/* fase141 · /comunidad/ — Feedback de la comunidad (mockup de Jean 2026-09-18).
 * Carga después de home.css (tokens --violet-*, --ink, --pink) y guia.css (cabecera y pie).
 * Colores SOLO por tokens: los propios de la página viven en .fb-page. Títulos en serif del sistema
 * (como el mockup) sin descargar una fuente más. */
.fb-page {
  --fb-bg: #fdfcfe;
  --fb-card: #fff;
  --fb-line: #ebe9f2;
  --fb-soft: #f5f4f9;
  --fb-soft-2: #f4f3f8;          /* caja de respuestas: se tiene que distinguir del blanco de la tarjeta */
  --fb-tit: #16142e;
  --fb-txt: #5a5670;
  --fb-meta: #75718b;          /* 4.6:1 sobre blanco */
  --fb-chip: #efe9fd;
  --fb-chip-ink: var(--violet-700);
  --fb-tag: #f1eff4;
  --fb-tag-ink: #524e66;
  --fb-star: #e4a400;
  --fb-negro: #1d1b2c;         /* botón principal: casi negro con un punto de violeta, no el #000 que se ve brusco */
  --fb-negro-2: #2d2a42;
  --fb-ease: var(--ease-out);      /* Tanda 4: alias del token de home.css (salida exponencial) */
  --fb-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  background: var(--fb-bg);
  font-family: "Nunito Sans", system-ui, sans-serif;
}
.fb-page ::selection { background: var(--violet-100); color: var(--fb-tit); }
.fb-page [hidden] { display: none !important; }
.fb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Página externa (Jean 2026-09-18): la cabecera solo lleva el logo y el botón de cuenta, y en escritorio vive DENTRO de
   la tarjeta, separada por una línea (mockup). `.guide-body main` (guia.css, 0-1-1) le quita ancho y margen a todo <main>:
   las reglas van con el prefijo `.fb-page`. */
.fb-shell { width: 100%; }
/* guia.css reserva el alto de SU cabecera fija (72px en móvil): aquí la cabecera es propia y va en el flujo */
html body.fb-page { padding-top: 0; }
/* el «Saltar al contenido» escondido dejaba asomar su sombra en la esquina */
.fb-page .skip:not(:focus-visible) { box-shadow: none; }   /* sin contenedor (mockup: el recuadro grande es la ventana del navegador, no un marco) */
.fb-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px max(24px, calc((100% - 912px) / 2)); border-bottom: 1px solid var(--fb-line); background: var(--fb-card); }
.fb-logo img { display: block; height: 44px; width: auto; }
.fb-user { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--fb-line); background: var(--fb-soft); color: var(--fb-tit); transition: background var(--t-fb) var(--ease-out); }
.fb-user svg { width: 20px; height: 20px; }
.fb-user:hover { background: #ebe9f2; }
/* con sesión: su avatar, en el MISMO recuadro que la barra de la tienda (radio 32.5 %, anillo + sombra) */
.fb-user.is-ava { border: 0; background: none; border-radius: 32.5%; overflow: hidden; box-shadow: 0 0 0 1px rgba(40, 20, 80, .08), 0 4px 10px -3px rgba(40, 20, 80, .32); transition: transform var(--t-fb) var(--ease-out), box-shadow var(--t-pop) var(--ease-out); }
.fb-user.is-ava:hover { box-shadow: 0 0 0 1px rgba(40, 20, 80, .12), 0 8px 16px -6px rgba(40, 20, 80, .4); }
.fb-user.is-ava:active { transform: scale(.95); }
.fb-user.is-ava svg { width: 100%; height: 100%; display: block; }
.fb-user:focus-visible, .fb-logo:focus-visible { outline: 2px solid var(--violet-600); outline-offset: 3px; border-radius: 12px; }
.fb-page .fb-main { width: min(100% - 48px, 912px); margin: 0 auto; padding: 30px 0 36px; }
.fb-card { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.fb-foot { display: flex; justify-content: center; align-items: center; gap: 8px 18px; flex-wrap: wrap; padding: 22px 16px 30px; font-size: 13px; color: var(--fb-meta); }
.fb-foot nav { display: flex; gap: 16px; }
.fb-foot a { color: var(--fb-meta); text-decoration: none; }
.fb-foot a:hover { color: var(--fb-tit); text-decoration: underline; }

/* cabecera */
.fb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.fb-head h1 { font-family: var(--fb-serif); font-weight: 600; font-size: clamp(26px, 3.6vw, 40px); line-height: 1.15; color: var(--fb-tit); margin: 0; letter-spacing: -.01em; }
.fb-head p { margin: 6px 0 0; font-size: 16px; color: var(--fb-txt); }

/* botones */
.fb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border: 0; border-radius: var(--ctl-r);
  background: var(--fb-negro); color: #fff; font: 500 15.5px/1 "Nunito Sans", system-ui, sans-serif; cursor: pointer; text-decoration: none;
  box-shadow: none;
  transition: background var(--t-pop) var(--ease-out), transform var(--t-fb) var(--ease-out); flex: none; }
.fb-btn svg { width: 17px; height: 17px; }
.fb-btn:hover { background: var(--fb-negro-2); }
.fb-btn:active, .fb-chip:active, .fb-ncom:active, .fb-mas:active { transform: scale(.97); }
.fb-btn:focus-visible, .fb-chip:focus-visible, .fb-v:focus-visible, .fb-ncom:focus-visible, .fb-menu-b:focus-visible, .fb-mas:focus-visible, .fb-x:focus-visible, .fb-r-rep:focus-visible, .fb-resp-mas:focus-visible { outline: 2px solid var(--violet-600); outline-offset: 2px; }
.fb-btn--sec { background: #fff; color: var(--fb-tit); border: 1px solid var(--fb-line); box-shadow: none; }
.fb-btn--sec:hover { background: var(--fb-soft); }
.fb-btn--sm { min-height: 36px; padding: 0 16px; font-size: 13px; }
.fb-btn.is-loading { pointer-events: none; opacity: .75; }

/* filtros */
.fb-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 0 20px; flex-wrap: wrap; }
.fb-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-chip { min-height: 36px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--fb-line); background: #fff; color: #3a3850; font: 500 14px/1 "Nunito Sans", system-ui, sans-serif; cursor: pointer; transition: background var(--t-pop) var(--ease-out), color var(--t-pop) var(--ease-out), border-color var(--t-pop) var(--ease-out), transform var(--t-fb) var(--ease-out); }
.fb-chip:hover { background: var(--fb-soft); }
.fb-chip.on { background: var(--fb-chip); border-color: transparent; color: var(--fb-chip-ink); font-weight: 600; }
.fb-orden select { height: 38px; padding: 0 40px 0 16px; border: 1px solid var(--fb-line); border-radius: 8px; background: #fff; color: var(--fb-tit); font: 500 14px "Nunito Sans", system-ui, sans-serif; cursor: pointer;
  appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2375718b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }

/* lista */
.fb-list { display: flex; flex-direction: column; gap: 12px; }
.fb-sk { height: 132px; border-radius: 12px; background: linear-gradient(90deg, var(--fb-soft) 25%, var(--fb-soft-2) 50%, var(--fb-soft) 75%); background-size: 200% 100%; animation: fbSk 1.3s linear infinite; }
@keyframes fbSk { to { background-position: -200% 0; } }
.fb-post { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; padding: 18px 24px 22px 22px; border: 1px solid var(--fb-line); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(20, 16, 40, .03); transition: border-color var(--t-tr) var(--ease-out), box-shadow var(--t-tr) var(--ease-out); }
.fb-list .fb-post:hover { border-color: #dedbe9; box-shadow: 0 1px 2px rgba(20, 16, 40, .04), 0 10px 26px -18px rgba(40, 20, 80, .28); }
.fb-post.is-in { animation: fbIn var(--t-sheet) var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes fbIn { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }
.fb-post.is-nuevo, .fb-r.is-nuevo { animation: fbNuevo var(--t-sheet) var(--ease-out) backwards; }
@keyframes fbNuevo { from { opacity: 0; transform: translateY(-8px); } }

/* votos */
.fb-votos { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; background: var(--fb-soft); border-radius: 999px; padding: 10px 0; align-self: start; }
.fb-votos b { display: block; font-variant-numeric: tabular-nums; font: 600 20px/1.2 "Nunito Sans", system-ui, sans-serif; color: var(--fb-tit); min-width: 2ch; text-align: center; }
.fb-v { width: 40px; height: 32px; display: grid; place-items: center; border: 0; background: none; color: var(--fb-meta); border-radius: 9px; cursor: pointer; transition: color var(--t-fb) var(--ease-out), background var(--t-fb) var(--ease-out), transform var(--t-fb) var(--ease-out); }
.fb-v:active { transform: scale(.88); }
.fb-votos b.is-up { animation: fbNUp var(--t-tr) var(--ease-out); }
.fb-votos b.is-down { animation: fbNDown var(--t-tr) var(--ease-out); }
@keyframes fbNUp { from { transform: translateY(7px); opacity: 0; filter: blur(2px); } }
@keyframes fbNDown { from { transform: translateY(-7px); opacity: 0; filter: blur(2px); } }
.fb-v svg { width: 22px; height: 22px; }
.fb-v:hover { background: #ebe9f2; color: var(--fb-tit); }
.fb-v.on { color: var(--violet-600); background: var(--fb-chip); }

/* cuerpo */
.fb-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fb-ava { width: 32px; height: 32px; border-radius: 32.5%; overflow: hidden; box-shadow: 0 0 0 1px rgba(40, 20, 80, .08), 0 3px 8px -3px rgba(40, 20, 80, .3); flex: none; display: grid; place-items: center; background: var(--fb-chip); color: var(--violet-700); font: 700 13px/1 "Nunito Sans", sans-serif; }
.fb-ava svg, .fb-ava img { width: 100%; height: 100%; display: block; object-fit: cover; }
.fb-quien { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 14px; }
.fb-quien b, .fb-r-m b { color: var(--fb-tit); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-quien time, .fb-r-m time { color: var(--fb-meta); font-size: 13.5px; white-space: nowrap; }
.fb-dot { color: var(--fb-meta); }
.fb-meta-r { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.fb-tag { background: var(--fb-tag); color: var(--fb-tag-ink); font-size: 12.5px; font-weight: 500; padding: 6px 14px; border-radius: 999px; white-space: nowrap; }
.fb-stars { display: inline-flex; gap: 1px; }
.fb-stars i { width: 19px; height: 19px; display: block; }
.fb-stars svg { width: 100%; height: 100%; fill: #e3e1ea; }
.fb-stars i.on svg { fill: var(--fb-star); }
.fb-menu-w { position: relative; }
.fb-menu-b, .fb-r-rep { width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: none; color: var(--fb-meta); border-radius: 8px; cursor: pointer; }
.fb-menu-b svg, .fb-r-rep svg { width: 18px; height: 18px; }
.fb-menu-b:hover, .fb-r-rep:hover { background: var(--fb-soft); color: var(--fb-tit); }
.fb-menu:not([hidden]) { animation: fbMenu var(--t-fb) var(--ease-out); transform-origin: top right; }
@keyframes fbMenu { from { opacity: 0; transform: scale(.95); } }
.fb-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; min-width: 150px; background: #fff; border: 1px solid var(--fb-line); border-radius: 10px; box-shadow: 0 14px 30px -14px rgba(40, 20, 80, .3); padding: 4px; }
.fb-menu[hidden] { display: none; }
.fb-menu button { width: 100%; text-align: left; border: 0; background: none; padding: 9px 12px; border-radius: 7px; font: 500 13.5px "Nunito Sans", sans-serif; color: var(--fb-tit); cursor: pointer; }
.fb-menu button:hover { background: var(--fb-soft); }
.fb-main-row { display: flex; align-items: flex-end; gap: 16px; margin-top: 8px; }   /* el contador va a la altura del TEXTO, no del título (mockup) */
.fb-textos { flex: 1; min-width: 0; }
.fb-tit { font-family: var(--fb-serif); font-weight: 600; font-size: 21px; line-height: 1.3; color: var(--fb-tit); margin: 0 0 4px; overflow-wrap: anywhere; }
.fb-tit a { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; text-decoration-thickness: 1.5px; transition: text-decoration-color var(--t-pop) var(--ease-out); }
.fb-tit a:hover { text-decoration-color: currentColor; }
.fb-tit a:focus-visible { outline: 2px solid var(--violet-600); outline-offset: 3px; border-radius: 4px; }
.fb-txt { margin: 0; font-size: 15px; line-height: 1.5; color: var(--fb-txt); max-width: 68ch; white-space: pre-line; overflow-wrap: anywhere; }
.fb-ncom { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 56px; height: 38px; padding: 0 12px; border: 1px solid var(--fb-line); border-radius: 8px; background: #fff; color: var(--fb-tit); font: 500 14px/1 "Nunito Sans", sans-serif; cursor: pointer; flex: none; text-decoration: none; font-variant-numeric: tabular-nums; transition: background var(--t-pop) var(--ease-out), transform var(--t-fb) var(--ease-out); }
.fb-ncom svg { width: 18px; height: 18px; color: var(--fb-tit); }
.fb-ncom:hover, .fb-ncom[aria-expanded="true"] { background: var(--fb-soft); }

/* respuestas */
.fb-resp { margin-top: 16px; background: var(--fb-soft-2); border: 0; border-radius: 10px; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.fb-r { display: flex; gap: 14px; align-items: flex-start; position: relative; }
.fb-r > .fb-ava { margin-top: 1px; }
.fb-r .fb-ava { width: 36px; height: 36px; }
.fb-r-b { flex: 1; min-width: 0; }
.fb-r-m { display: flex; align-items: baseline; gap: 4px 8px; font-size: 13.5px; min-width: 0; flex-wrap: wrap; padding-right: 28px; }
.fb-r-m time { font-size: 12.5px; }
/* el mockup no dibuja ⋯ en las respuestas: en escritorio aparece al pasar o enfocar (reportar sigue a un Tab); en táctil queda tenue */
.fb-r-rep { width: 26px; height: 26px; position: absolute; top: -2px; right: -6px; opacity: .45; }
@media (hover: hover) { .fb-r-rep { opacity: 0; transition: opacity var(--t-fb) var(--ease-out); } .fb-r:hover .fb-r-rep, .fb-r-rep:focus-visible { opacity: 1; } }
.fb-r-b p { margin: 1px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--fb-txt); white-space: pre-line; overflow-wrap: anywhere; }
.fb-resp-mas { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 2px 0 0 50px; color: var(--fb-tit); font: 600 13.5px "Nunito Sans", sans-serif; text-decoration: none; }
.fb-resp-mas svg { width: 15px; height: 15px; transition: transform var(--t-pop) var(--ease-out); }
.fb-resp-mas:hover svg { transform: translateX(3px); }
.fb-resp-mas:focus-visible { outline: 2px solid var(--violet-600); outline-offset: 3px; border-radius: 4px; }
.fb-dev { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 6px; background: var(--fb-negro); color: #fff; font: 700 10.5px/1 "Nunito Sans", sans-serif; letter-spacing: .03em; align-self: center; }
.fb-r.is-of .fb-r-m b { font-weight: 600; }
.fb-r-q { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.fb-ava--of { background: #efe7fb; }
.fb-resp-login { margin: 0; font-size: 13px; color: var(--fb-txt); }
.fb-resp-login a { color: var(--violet-700); font-weight: 600; }
.fb-resp-f textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--fb-line); border-radius: 10px; padding: 10px 12px; font: 400 13.5px/1.45 "Nunito Sans", sans-serif; color: var(--fb-tit); resize: vertical; min-height: 60px; background: #fff; }
.fb-resp-f textarea:focus, .fb-f input:focus, .fb-f textarea:focus { outline: 2px solid var(--violet-300, #c4b5fd); border-color: var(--violet-600); }
.fb-resp-f-pie { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.fb-resp-f-pie .fb-err { margin-right: auto; }

/* página de UNA publicación */
.fb-card.is-vista, .fb-hilo.is-vista { animation: fbVista var(--t-sheet) var(--ease-out); }
@keyframes fbVista { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } }
.fb-volver { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 18px; color: var(--fb-meta); font: 600 14px "Nunito Sans", sans-serif; text-decoration: none; transition: color var(--t-pop) var(--ease-out); }
.fb-volver svg { width: 17px; height: 17px; transition: transform var(--t-pop) var(--ease-out); }
.fb-volver:hover { color: var(--fb-tit); }
.fb-volver:hover svg { transform: translateX(-3px); }
.fb-volver:focus-visible { outline: 2px solid var(--violet-600); outline-offset: 3px; border-radius: 6px; }
.fb-tit--full { font-size: clamp(24px, 3vw, 30px); margin-bottom: 8px; letter-spacing: -.01em; }
.fb-post--full .fb-txt { font-size: 16px; max-width: 70ch; }
.fb-hilo-resp { margin-top: 30px; }
.fb-hilo-h { font-family: var(--fb-serif); font-weight: 600; font-size: 21px; color: var(--fb-tit); margin: 0 0 14px; }
.fb-hilo-h span { font-variant-numeric: tabular-nums; }
.fb-hilo-resp .fb-resp-f { background: #fff; border: 1px solid var(--fb-line); border-radius: 14px; padding: 14px; margin-bottom: 10px; transition: border-color var(--t-pop) var(--ease-out), box-shadow var(--t-pop) var(--ease-out); }
.fb-hilo-resp .fb-resp-f:focus-within { border-color: #d6d0ea; box-shadow: 0 10px 26px -18px rgba(40, 20, 80, .3); }
.fb-hilo-resp .fb-resp-f textarea { border: 0; padding: 4px 2px; min-height: 64px; background: none; }
.fb-hilo-resp .fb-resp-f textarea:focus { outline: none; }
.fb-hilo-resp .fb-resp-login { padding: 14px 16px; border: 1px dashed var(--fb-line); border-radius: 14px; margin-bottom: 10px; }
.fb-hilo-lista { display: flex; flex-direction: column; }
.fb-hilo-lista .fb-r { padding: 16px 4px; border-top: 1px solid var(--fb-line); align-items: flex-start; }
.fb-hilo-lista .fb-r:first-child { border-top: 0; }
.fb-hilo-lista .fb-r-b p { font-size: 14.5px; margin-top: 4px; }
.fb-hilo-lista .fb-r.is-of { background: linear-gradient(90deg, var(--fb-soft-2), transparent 80%); border-radius: 12px; padding-left: 12px; padding-right: 12px; }
.fb-hilo-lista .fb-r.is-of + .fb-r { border-top-color: transparent; }
.fb-hilo-lista .fb-r-rep { top: 12px; right: 0; }
.fb-hilo-vacio { margin: 8px 0; color: var(--fb-meta); font-size: 14px; }
.fb-sk--r { height: 64px; margin-top: 10px; }

.fb-mas { display: block; margin: 18px auto 0; min-height: 40px; padding: 0 22px; border: 1px solid var(--fb-line); border-radius: 10px; background: #fff; color: var(--fb-tit); font: 600 14px "Nunito Sans", sans-serif; cursor: pointer; transition: background var(--t-pop) var(--ease-out), transform var(--t-fb) var(--ease-out); }
.fb-mas[hidden] { display: none; }
.fb-mas:hover { background: var(--fb-soft); }
.fb-vacio { text-align: center; padding: 40px 12px; color: var(--fb-txt); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.fb-vacio p { margin: 0; font-size: 15px; }

/* diálogo */
/* `* { margin: 0 }` de home.css le quita al <dialog> el `margin: auto` con el que el navegador lo centra */
.fb-dlg { margin: auto; border: 0; padding: 0; border-radius: 18px; width: min(100% - 24px, 560px); max-height: min(92dvh, 820px); box-shadow: 0 40px 90px -30px rgba(40, 20, 80, .5); color: var(--fb-tit); }
.fb-dlg::backdrop { background: rgba(22, 20, 46, .45); }
.fb-dlg[open] { animation: fbDlg var(--t-sheet) var(--ease-out); }
@keyframes fbDlg { from { opacity: 0; transform: translateY(8px) scale(.97); filter: blur(3px); } }
.fb-dlg[open]::backdrop { animation: fbFade var(--t-pop) var(--ease-out); }
@keyframes fbFade { from { opacity: 0; } }
.fb-dlg-in { padding: 22px 24px 20px; }
.fb-dlg-in:focus { outline: none; }
.fb-dlg.is-saliendo { animation: fbDlgOut var(--t-fb) var(--ease-in) forwards; }
.fb-dlg.is-saliendo::backdrop { animation: fbFadeOut var(--t-fb) var(--ease-in) forwards; }
@keyframes fbDlgOut { to { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes fbFadeOut { to { opacity: 0; } }
.fb-dlg-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.fb-dlg-h h2 { font-family: var(--fb-serif); font-weight: 600; font-size: 22px; margin: 0; color: var(--fb-tit); }
.fb-x { width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: var(--fb-soft); border-radius: 50%; cursor: pointer; color: var(--fb-tit); flex: none; }
.fb-x svg { width: 18px; height: 18px; }
.fb-dlg-p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--fb-txt); }
.fb-anon { background: var(--fb-soft-2); border: 1px solid var(--fb-line); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; font-size: 13.5px; line-height: 1.5; color: var(--fb-txt); }
.fb-anon p { margin: 0; } .fb-anon p + p { margin-top: 6px; }
.fb-anon b { color: var(--fb-tit); }
.fb-anon a { color: var(--violet-700); font-weight: 600; }
.fb-f { display: flex; flex-direction: column; gap: 14px; }
.fb-fs { border: 0; margin: 0; padding: 0; }
.fb-fs[hidden] { display: none; }
.fb-fs legend, .fb-fld label { font-size: 13.5px; font-weight: 600; color: var(--fb-tit); margin-bottom: 7px; padding: 0; }
.fb-fs legend i { font-weight: 400; color: var(--fb-meta); }
.fb-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-opt { position: relative; cursor: pointer; }
.fb-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.fb-opt span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--fb-line); font-size: 13.5px; font-weight: 500; color: #3a3850; background: #fff; }
.fb-opt input:checked + span { background: var(--fb-chip); color: var(--fb-chip-ink); border-color: transparent; font-weight: 600; }
.fb-opt input:focus-visible + span { outline: 2px solid var(--violet-600); outline-offset: 2px; }
.fb-stars-in { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.fb-star-in { position: relative; cursor: pointer; width: 30px; height: 30px; }
.fb-star-in input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.fb-star-in svg { width: 100%; height: 100%; fill: #e3e1ea; transition: fill var(--t-press) var(--ease-out); }
.fb-star-in:hover svg, .fb-star-in:hover ~ .fb-star-in svg, .fb-star-in input:checked ~ span svg, .fb-star-in:has(input:checked) ~ .fb-star-in svg { fill: var(--fb-star); }
.fb-star-in input:focus-visible ~ span svg { outline: 2px solid var(--violet-600); outline-offset: 1px; border-radius: 4px; }
.fb-fld { display: flex; flex-direction: column; }
.fb-f input:not([type=radio]), .fb-f textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--fb-line); border-radius: 10px; padding: 11px 12px; font: 400 14.5px/1.45 "Nunito Sans", sans-serif; color: var(--fb-tit); background: #fff; }
.fb-f textarea { resize: vertical; min-height: 120px; }
.fb-f [aria-invalid] { border-color: #c2410c; }
.fb-fld-pie { display: flex; justify-content: space-between; gap: 10px; margin-top: 5px; min-height: 16px; }
.fb-cnt { font-size: 12px; color: var(--fb-meta); flex: none; }
.fb-err { font-size: 12.5px; color: #b42318; line-height: 1.35; }
.fb-err--gen:empty { display: none; }
.fb-nota { margin: -4px 0 0; font-size: 12.5px; color: var(--fb-meta); }
.fb-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fb-cap:empty { display: none; }
.fb-dlg-acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; flex-wrap: wrap; }

/* normas */
.fb-link { border: 0; background: none; padding: 0; font: inherit; color: var(--fb-tit); text-decoration: underline; text-decoration-color: #cfcadf; text-underline-offset: 3px; cursor: pointer; transition: text-decoration-color var(--t-pop) var(--ease-out); white-space: nowrap; }
.fb-link:hover { text-decoration-color: currentColor; }
.fb-link:focus-visible { outline: 2px solid var(--violet-600); outline-offset: 2px; border-radius: 3px; }
.fb-normas { list-style: none; counter-reset: n; margin: 6px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fb-normas li { counter-increment: n; display: grid; grid-template-columns: 26px 1fr; column-gap: 10px; row-gap: 1px; }
.fb-normas li::before { content: counter(n); grid-row: span 2; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--fb-soft); color: var(--fb-tit); font: 700 12px/1 "Nunito Sans", sans-serif; font-variant-numeric: tabular-nums; }
.fb-normas b { color: var(--fb-tit); font-weight: 600; font-size: 14.5px; }
.fb-normas span { color: var(--fb-txt); font-size: 13.5px; line-height: 1.45; }
.fb-normas-pie { margin-top: 14px; }
.fb-normas-d { font-size: 12.5px; color: var(--fb-meta); margin-top: -4px; }
.fb-normas-d summary { cursor: pointer; list-style: none; width: fit-content; border-radius: 4px; }
.fb-normas-d summary::-webkit-details-marker { display: none; }
.fb-normas-d summary u { text-decoration-color: #cfcadf; text-underline-offset: 3px; }
.fb-normas-d summary:hover u { text-decoration-color: currentColor; }
.fb-normas-d summary:focus-visible { outline: 2px solid var(--violet-600); outline-offset: 2px; }
.fb-normas-d .fb-normas li::before { background: #fff; }
.fb-normas-d[open] .fb-normas { margin-top: 12px; padding: 14px; background: var(--fb-soft-2); border-radius: 12px; animation: fbFade var(--t-pop) var(--ease-out); }

/* aviso */
.fb-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; background: var(--fb-tit); color: #fff; padding: 12px 18px; border-radius: 12px; font: 600 14px "Nunito Sans", sans-serif; z-index: 60; max-width: calc(100% - 32px); transition: opacity var(--t-pop) var(--ease-out), transform var(--t-pop) var(--ease-out); }
.fb-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* móvil (mockup iPhone) */
@media (max-width: 720px) {
  .fb-top { padding: 12px 16px; border-bottom: 0; }
  .fb-logo img { height: 38px; }
  .fb-user { width: 40px; height: 40px; }
  .fb-page .fb-main { width: auto; padding: 6px 16px 24px; }
  .fb-head { flex-direction: column; align-items: stretch; gap: 16px; }
  .fb-head h1 { font-size: 26px; }
  .fb-head p { font-size: 15px; }
  .fb-btn:not(.fb-btn--sm) { width: 100%; }
  .fb-dlg-acts .fb-btn { width: auto; flex: 1; }
  .fb-bar { flex-direction: column; align-items: flex-start; gap: 12px; margin: 16px 0 16px; }
  .fb-chip { padding: 0 16px; font-size: 13.5px; }
  .fb-page .fb-list { margin: 0 -8px; }
  .fb-post { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 14px 14px 14px 10px; }
  .fb-v { width: 34px; height: 28px; }
  .fb-v svg { width: 20px; height: 20px; }
  .fb-votos { padding: 6px 0; }
  .fb-votos b { font-size: 16px; }
  .fb-ava { width: 30px; height: 30px; }
  .fb-quien { flex-direction: column; align-items: flex-start; gap: 0; font-size: 13px; }
  .fb-quien time { font-size: 12px; }
  .fb-quien .fb-dot { display: none; }
  .fb-tag { font-size: 11.5px; padding: 4px 11px; }
  .fb-meta-r { gap: 6px; }
  .fb-meta-r .fb-stars i { width: 13px; height: 13px; }
  /* título con el contador al lado y el texto debajo a TODO el ancho (mockup) */
  .fb-main-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; align-items: start; }
  .fb-textos { display: contents; }
  .fb-tit { grid-column: 1; grid-row: 1; font-size: 16.5px; align-self: center; }
  .fb-ncom { grid-column: 2; grid-row: 1; height: 32px; min-width: 48px; font-size: 13px; }
  .fb-txt { grid-column: 1 / -1; grid-row: 2; font-size: 13.5px; margin-top: 2px; }
  .fb-resp { padding: 10px 12px; }
  .fb-r { gap: 10px; }
  .fb-r .fb-ava { width: 32px; height: 32px; }
  .fb-r-m { font-size: 13px; flex-direction: column; align-items: flex-start; gap: 0; }
  .fb-r-m .fb-dot { display: none; }
  .fb-r-b p { font-size: 13px; }
  .fb-dlg-in { padding: 18px 16px 16px; }
  .fb-resp-mas { padding-left: 42px; }
  .fb-tit--full { font-size: 22px; }
  .fb-post--full .fb-txt { font-size: 14.5px; }
  .fb-hilo-resp { margin-top: 22px; }
  .fb-hilo-lista .fb-r-b p { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .fb-dlg.is-saliendo, .fb-dlg.is-saliendo::backdrop,
  .fb-sk, .fb-post.is-nuevo, .fb-r.is-nuevo, .fb-post.is-in, .fb-dlg[open], .fb-dlg[open]::backdrop, .fb-menu:not([hidden]), .fb-card.is-vista, .fb-hilo.is-vista, .fb-votos b.is-up, .fb-votos b.is-down { animation: none; }
  .fb-toast, .fb-btn, .fb-chip, .fb-v, .fb-star-in svg, .fb-ncom, .fb-mas, .fb-volver svg, .fb-resp-mas svg, .fb-user.is-ava { transition: none; }
  .fb-btn:active, .fb-chip:active, .fb-ncom:active, .fb-mas:active, .fb-v:active, .fb-user.is-ava:active { transform: none; }
}