/* ------------------------------------------------------------------ */
/* V.4 — Fuente display self-hosted: "Baloo 2" (SIL OFL).               */
/* Variable (400–800) en un solo woff2 subseteado a latín (~33 kb), sin */
/* CDN de terceros. font-display:swap → el texto se ve enseguida con el  */
/* fallback y flipea al cargar. La usa el token --font-display (abajo).  */
/* ------------------------------------------------------------------ */
@font-face {
    font-family: "Baloo 2";
    src: url("../fonts/baloo-2-latin-wght-normal.a70aa8d7a22a.woff2") format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

/* ------------------------------------------------------------------ */
/* Variables globales — cambia aquí para ajustar la paleta de colores  */
/* ------------------------------------------------------------------ */
/* ==================================================================== */
/* Paso V.1 — Dirección visual "Vibrante BookTok".                      */
/* Los tokens se remapean acá; todo lo que usa var(--…) hereda la nueva */
/* paleta. Dark mode por tokens: @media + [data-theme] (toggle navbar). */
/* Pendiente V.2: propagar los ~500 hex hardcodeados que no siguen      */
/* tokens (alerts, rangos, spoilers, badges del foro).                  */
/* ==================================================================== */
:root {
    /* Chrome oscuro (navbar/footer): índigo tinta */
    --bg:           #1B1030;
    --bg-soft:      #140B1F;
    --surface:      #ffffff;   /* cards */
    --surface-soft: #FEF6FB;   /* fondo del body — rosa muy lavado */
    --surface-2:    #F7EEF6;   /* superficie secundaria (chips, thumbs, filas) */
    --border:       #F1DCEC;
    --text:         #1B1030;   /* índigo tinta */
    --text-soft:    #6B5B85;
    --text-strong:  #0F0A1E;   /* texto más fuerte que --text (labels, énfasis) */
    --text-inverse: #FDF5FA;   /* texto sobre chrome oscuro */
    --primary:      #E11D74;   /* magenta — acción principal */
    --primary-hover:#C2185B;
    --accent:       #7C3AED;   /* violeta */
    --success:      #16a34a;
    --warning:      #d97706;
    --error:        #dc2626;
    --shadow:       0 14px 30px -16px rgba(27, 16, 48, 0.22);
    --radius:       16px;
    --container:    1120px;
    --transition:   0.2s ease;

    /* V.1 — nuevos tokens (los usan el hero/componentes de V.2) */
    --gradient:      linear-gradient(120deg, #E11D74 0%, #9D3AE0 55%, #6D28D9 100%);
    --gradient-soft: linear-gradient(120deg, #FEE9F3, #F3E8FF);
    --on-accent:     #ffffff;
    --font-body:     system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display:  "Baloo 2", "Trebuchet MS", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* A.6.b.3 — borde "troquelado" de las medallas sticker (die-cut) */
    --badge-diecut:        #ffffff;
    --badge-diecut-shadow: rgba(27, 16, 48, 0.16);
}

/* --- Dark mode: preferencia del SO (a menos que el usuario force light) --- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:#140B1F; --bg-soft:#0E0717; --surface:#241640; --surface-soft:#140B1F; --surface-2:#1E1230;
        --border:#3A2857; --text:#F6EEFF; --text-soft:#B9A6D6; --text-inverse:#F6EEFF; --text-strong:#FFFFFF;
        --primary:#FB6FA6; --primary-hover:#F472B6; --accent:#A78BFA;
        --shadow:0 16px 34px -16px rgba(0,0,0,0.6);
        --gradient:linear-gradient(120deg,#FB6FA6 0%,#C084FC 55%,#A78BFA 100%);
        --gradient-soft:linear-gradient(120deg,#2A1533,#241640);
        --on-accent:#1A0F26;
        --badge-diecut:#F4EDFA; --badge-diecut-shadow:rgba(0,0,0,.45);
    }
}
/* --- Dark mode forzado por el toggle --- */
:root[data-theme="dark"] {
    /* AUD-VIS.1 — `--surface-2` faltaba SOLO acá (sí estaba en el @media de
       arriba). Un usuario con el SO en claro que apretaba el toggle se quedaba
       con el rosa claro del tema light (#F7EEF6) bajo el texto casi blanco de
       --text: 38 usos afectados, entre ellos .btn-secondary y .badge → texto
       invisible. Los dos bloques dark deben declarar los MISMOS tokens. */
    --bg:#140B1F; --bg-soft:#0E0717; --surface:#241640; --surface-soft:#140B1F; --surface-2:#1E1230;
    --border:#3A2857; --text:#F6EEFF; --text-soft:#B9A6D6; --text-inverse:#F6EEFF; --text-strong:#FFFFFF;
    --primary:#FB6FA6; --primary-hover:#F472B6; --accent:#A78BFA;
    --shadow:0 16px 34px -16px rgba(0,0,0,0.6);
    --gradient:linear-gradient(120deg,#FB6FA6 0%,#C084FC 55%,#A78BFA 100%);
    --gradient-soft:linear-gradient(120deg,#2A1533,#241640);
    --on-accent:#1A0F26;
    --badge-diecut:#F4EDFA; --badge-diecut-shadow:rgba(0,0,0,.45);
}

/* Reset básico */
* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--surface-soft);
    color: var(--text);
    line-height: 1.6;
    transition: background var(--transition), color var(--transition);
}

/* V.1 — display font para títulos (BookTok: sans bold redondeada). */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* V.4 — Anillo de foco de teclado consistente (BookTok). :where() = specificity 0,
   así cualquier componente con su propio :focus-visible sigue mandando. Solo teclado
   (:focus-visible), no molesta al click con mouse. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Layout general */
.site-wrapper { min-height: 100vh; display: flex; flex-direction: column; }
.site-main { flex: 1; padding: 2rem 0; }
.container { width: min(100% - 2rem, var(--container)); margin: 0 auto; }

/* Navbar */
.navbar {
    background: var(--bg);
    color: var(--text-inverse);
    position: sticky; top: 0; z-index: 10;
    box-shadow: var(--shadow);
}
.navbar-inner {
    display: flex; align-items: center;
    justify-content: space-between; gap: 1rem;
    min-height: 72px;
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; }
/* Era el emoji 📚 (font-size). Ahora es el isotipo en SVG: alto fijo para que
   no empuje la altura de la barra, y width:auto por si algún día cambia la
   proporción del archivo. */
.brand-mark { display: block; height: 28px; width: auto; }
.nav-links, .nav-auth { display: flex; align-items: center; gap: 1rem; }
.nav-links a { color: inherit; transition: color var(--transition); }
.nav-links a:hover { color: #FB6FA6; }

/* V.1 — Toggle de tema claro/oscuro en el navbar */
.theme-toggle {
    background: rgba(255,255,255,0.10); color: var(--text-inverse);
    border: 1px solid rgba(255,255,255,0.18); border-radius: 999px;
    width: 38px; height: 38px; cursor: pointer; font-size: 1.05rem; line-height: 1;
    display: inline-grid; place-items: center; transition: background var(--transition); flex: none;
}
.theme-toggle:hover { background: rgba(255,255,255,0.20); }
.theme-toggle:focus-visible { outline: 2px solid #FB6FA6; outline-offset: 2px; }

/* V.3.4 — Menú de usuario (avatar + dropdown). Reemplaza el saludo + 4 botones
   sueltos que amontonaban el navbar logueado. Trigger sobre chrome oscuro (rgba);
   el dropdown abre sobre el cuerpo → usa tokens (--surface/--text) y adapta modo. */
.nav-user { position: relative; flex: none; }
.nav-user__trigger {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.3rem 0.6rem 0.3rem 0.35rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px; cursor: pointer;
    color: var(--text-inverse); font: inherit; font-weight: 600; line-height: 1;
    transition: background var(--transition);
}
.nav-user__trigger:hover { background: rgba(255,255,255,0.16); }
.nav-user__trigger:focus-visible { outline: 2px solid #FB6FA6; outline-offset: 2px; }
.nav-user__avatar {
    width: 32px; height: 32px; border-radius: 50%; flex: none; overflow: hidden;
    display: inline-grid; place-items: center;
    background: var(--gradient); color: #fff; font-weight: 800; font-size: 0.95rem;
}
.nav-user__avatar img { width: 100%; height: 100%; object-fit: cover; }
.nav-user__name { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-user__caret { font-size: 0.7rem; opacity: 0.8; transition: transform var(--transition); }
.nav-user__trigger[aria-expanded="true"] .nav-user__caret { transform: rotate(180deg); }

.nav-user__menu {
    position: absolute; right: 0; top: calc(100% + 10px);
    min-width: 210px; padding: 0.4rem; z-index: 20;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: 14px;
    box-shadow: var(--shadow);
    display: flex; flex-direction: column; gap: 0.1rem;
}
.nav-user__menu[hidden] { display: none; }
.nav-user__header {
    padding: 0.4rem 0.7rem 0.6rem; margin-bottom: 0.3rem;
    border-bottom: 1px solid var(--border); line-height: 1.3;
}
.nav-user__header-hi { display: block; font-size: 0.78rem; color: var(--text-soft); }
.nav-user__header-name { font-size: 1rem; }
.nav-user__item {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.55rem 0.7rem; border-radius: 9px;
    color: var(--text); font-weight: 600; font-size: 0.92rem;
    transition: background var(--transition), color var(--transition);
}
.nav-user__item:hover { background: var(--surface-2); color: var(--primary); }
.nav-user__item-ic { font-size: 1rem; width: 1.3em; text-align: center; flex: none; }
.nav-user__sep { height: 1px; background: var(--border); margin: 0.3rem 0.2rem; }
.nav-user__item--logout { color: var(--primary); }
.nav-user__item--logout:hover { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
@media (max-width: 560px) { .nav-user__name { display: none; } }

/* Botones */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.7rem 1.1rem; border-radius: 999px;
    font-weight: 600; transition: background var(--transition), transform var(--transition);
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--primary); color: var(--on-accent); }
.btn-primary:hover { background: var(--primary-hover); }
/* V.R.2 — .btn-secondary por defecto sirve sobre CONTENIDO (cards claras/oscuras):
   antes era white/rgba-blanco (solo legible sobre el chrome oscuro) → texto blanco
   invisible en claro en los ~24 usos de contenido. El navbar (siempre oscuro) se
   override abajo. */
.btn-secondary { background: var(--surface-2); color: var(--text); }
.btn-secondary:hover { background: color-mix(in srgb, var(--text) 10%, var(--surface-2)); }
.navbar .btn-secondary { background: rgba(255,255,255,0.10); color: var(--text-inverse); }
.navbar .btn-secondary:hover { background: rgba(255,255,255,0.18); }
.btn-light-outline { background: var(--gradient-soft); color: var(--primary); }
.btn-light-outline:hover { background: var(--surface); color: var(--primary-hover); }
.btn-dark-outline { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); border: 1.5px solid color-mix(in srgb, var(--text) 22%, transparent); }
.btn-dark-outline:hover { background: color-mix(in srgb, var(--text) 12%, transparent); }

/* Mensajes flash */
.messages-section { margin-bottom: 1.5rem; }
.alert { border-radius: 14px; padding: 0.9rem 1rem; margin-bottom: 0.8rem; border: 1px solid transparent; font-weight: 500; }
.alert-success { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.alert-info    { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.alert-warning { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.alert-error   { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

/* V.2.b — variantes dark de los alerts (mantienen el hue semántico). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .alert-success { background:#0e2a1a; color:#86efac; border-color:#1c5236; }
    :root:not([data-theme="light"]) .alert-info    { background:#0f2036; color:#93c5fd; border-color:#1e3a5f; }
    :root:not([data-theme="light"]) .alert-warning { background:#2c1e08; color:#fcd34d; border-color:#5a4212; }
    :root:not([data-theme="light"]) .alert-error   { background:#2e1212; color:#fca5a5; border-color:#5a2020; }
}
:root[data-theme="dark"] .alert-success { background:#0e2a1a; color:#86efac; border-color:#1c5236; }
:root[data-theme="dark"] .alert-info    { background:#0f2036; color:#93c5fd; border-color:#1e3a5f; }
:root[data-theme="dark"] .alert-warning { background:#2c1e08; color:#fcd34d; border-color:#5a4212; }
:root[data-theme="dark"] .alert-error   { background:#2e1212; color:#fca5a5; border-color:#5a2020; }

/* Tarjetas */
.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem;
}

/* Grillas */
.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --------------------------------------------------------------------
   GRID.1 — Ladder ÚNICO de las grillas de cards.
   Antes esto vivía disperso en 6 reglas (≤1024, ≤900, ≤768, ≤767, ≤640,
   ≤320) repartidas por el archivo, que se pisaban entre sí. El resultado:
   `.grid-4` NUNCA llegaba a 1 columna en el teléfono, porque un
   `.grid.grid-4` (especificidad 0,2,0, pensado para el grid de stats del
   perfil) la fijaba en 2 columnas a cualquier ancho. Ahora las columnas se
   definen SOLO acá; el caso de stats se resuelve con su propia clase
   (.stats-grid), sin pisar las grillas de cards.
   -------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Teléfonos: TODO a una columna. Las cards son "cargadas" (portada + badges
   + título + autor + rating + sinopsis): a 2 columnas quedan angostas y
   altísimas, con los badges apilados de a uno y el título cortado.

   AUD-VIS.1 — el corte pasa de 767px a 600px. GRID.1 lo había puesto en 767
   pensando en teléfonos de ~400px de ancho CSS, pero hay teléfonos que
   reportan ~720px: ahí el corte de 767 daba UNA card de ~690px de ancho, con
   la portada topeada en 160px ocupando el 23% y la sinopsis en líneas
   larguísimas. Con el corte en 600, un teléfono de 720px cae en 2 columnas
   de ~340px —la misma proporción que las cards de la grilla de 3 del
   escritorio (360px)— y los teléfonos de verdad (≤430px) siguen en 1 columna.
   El caso de 1 columna se acota además con el tope de .book-card de abajo.
   Ojo: el carrusel de la home comparte este corte (busca .home-carousel);
   si se mueve uno hay que mover el otro, o la misma card se ve de dos
   tamaños distintos en la misma pantalla. */
@media (max-width: 600px) {
    .grid-2,
    .grid-3,
    .grid-4 { grid-template-columns: 1fr; }
    /* AUD-VIS.1 — tope de ancho de la card de libro cuando queda en 1 columna.
       Sin esto, el corte de 1 columna deja la card tan ancha como el
       contenedor y la portada (topeada en 160px) ocupa una fracción cada vez
       más chica: a 600px de viewport son 160 sobre 532px de contenido = 30%,
       contra el 74% que tiene en la grilla de 4 del escritorio. El resultado
       es una card vacía con líneas de texto larguísimas. Topeada en 420px y
       centrada, el caso de 1 columna queda igual que en un teléfono real de
       ~390px, donde la proporción ya es buena (≈50%). */
    .book-card {
        max-width: 420px;
        margin-inline: auto;
    }
    /* Excepción: el grid de estadísticas del perfil. Son 4 tiles chicos
       (número + rótulo), no cards cargadas: ahí 2×2 se lee mejor que una
       tira de 4. AUD-VIS.1 — vivía en un @media suelto de ≤640px, así que
       entre 641 y 767px caía a 1 columna y volvía a 2 al achicar la
       pantalla (salto no monótono). Al vivir en el mismo escalón que el
       resto, la progresión queda 4 → 3 → 2 → 2×2, siempre monótona. */
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Hero de página */
.page-hero {
    background: var(--gradient-soft);
    border-radius: var(--radius); padding: 2rem; margin-bottom: 2rem;
    box-shadow: var(--shadow);
}
.page-hero h1 {
    margin-top: 0; margin-bottom: 0.5rem; font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    /* V.3.5 — títulos de hero con gradiente BookTok (unifica con el home). */
    background: var(--gradient); -webkit-background-clip: text; background-clip: text;
    color: transparent; width: fit-content; max-width: 100%;
}
/* V.3.6 — títulos utilitarios (auth/cuenta) sin gradiente: título sólido y sobrio. */
.page-hero--plain h1 {
    background: none;
    color: var(--text-strong);
    -webkit-text-fill-color: currentColor;
    width: auto;
}
.page-hero p  { margin: 0; color: var(--text-soft); max-width: 60ch; }

/* Secciones */
.section-block { margin-bottom: 2.2rem; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.section-heading h2 { margin: 0.3rem 0 0; }
.section-kicker { display: inline-block; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary); }

/* V.3.1 — Hero de la home (book-forward, BookTok). Reemplaza el hero
   "folleto de features" por portadas + promesa con gradiente. */
.home-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding: clamp(0.5rem, 2vw, 1.5rem) 0 clamp(1rem, 3vw, 2rem); }
.hero-eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: var(--primary); margin-bottom: 0.7rem; }
.home-hero__content h1 { font-family: var(--font-display); font-size: clamp(2.1rem, 5vw, 3.5rem); line-height: 1.08; letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
.grad-text { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-hero__lead { font-size: 1.12rem; color: var(--text-soft); margin: 1rem 0 0; max-width: 42ch; }
.home-hero .hero-actions { margin-top: 1.6rem; }
.home-hero__covers { position: relative; min-height: 330px; }
.hero-cover { position: absolute; top: 50%; left: 50%; width: 46%; max-width: 185px; aspect-ratio: 2/3; object-fit: cover; border-radius: 6px 12px 12px 6px; box-shadow: 0 18px 36px -12px rgba(124, 58, 237, 0.45); background: var(--surface-2); }
.hero-cover:nth-child(1) { transform: translate(-92%, -52%) rotate(-8deg); z-index: 1; }
.hero-cover:nth-child(2) { transform: translate(-50%, -50%) rotate(-1deg); z-index: 3; }
.hero-cover:nth-child(3) { transform: translate(-8%, -48%) rotate(8deg); z-index: 2; }
@media (max-width: 780px) {
    .home-hero { grid-template-columns: 1fr; }
    .home-hero__covers { min-height: 260px; margin-top: 0.5rem; }
    .hero-cover { width: 38%; max-width: 150px; }
}
.section-link { font-weight: 600; color: var(--primary); }

/* Badges */
.badge { display: inline-flex; align-items: center; padding: 0.35rem 0.7rem; border-radius: 999px; background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--border); font-size: 0.82rem; font-weight: 600; }
/* Badges de color — V.2.c.2. Pastilla translúcida dark-aware: cada clase declara
   su hue (--tint) y bg/texto/borde se derivan con color-mix sobre tokens que flipan
   por modo (--surface, --text) → una sola regla sirve claro y oscuro (antes eran
   pasteles fijos que brillaban sobre el fondo oscuro). El texto mezcla el hue con
   --text del modo, así se oscurece en claro y se aclara en dark automáticamente. */
.badge-accent, .badge-warning, .badge-week,
.badge-type-question, .badge-type-debate,
.badge-type-recommendation, .badge-type-trivia,
.badge-route-type, .badge-reading-level, .badge-reading-level-sm {
    background: color-mix(in srgb, var(--tint) 16%, var(--surface));
    color: color-mix(in srgb, var(--tint) 72%, var(--text));
    border: 1px solid color-mix(in srgb, var(--tint) 30%, transparent);
}
.badge-accent  { --tint: #7C3AED; }
.badge-warning { --tint: #D97706; }
.badge-week    { --tint: #CA8A04; }
.badge-type-question       { --tint: #2563EB; }
.badge-type-debate         { --tint: #DB2777; }
.badge-type-recommendation { --tint: #16A34A; }
.badge-type-trivia         { --tint: #7C3AED; }

/* Filas de meta e iconos */
.badge-row, .meta-row, .hero-actions, .cta-banner__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.meta-row { margin-top: 1rem; color: var(--text-soft); font-size: 0.92rem; }

/* Tarjetas de contenido */
.content-card h3, .book-card h3 { margin-top: 0.8rem; margin-bottom: 0.6rem; }
.content-card p,  .book-card p  { color: var(--text-soft); }
/* AUD-VIS.1 — `.empty-state { text-align: center }` vivía acá y estaba
   duplicada más abajo (bloque de estados vacíos) con el mismo valor + padding.
   Ganaba la de abajo por orden; ésta no aportaba nada. */

/* Formularios */
form p { margin-bottom: 1rem; }
form label { display: block; margin-bottom: 0.35rem; font-weight: 600; }
form input, form select, form textarea {
    width: 100%; padding: 0.8rem 0.9rem;
    border: 1px solid var(--border); border-radius: 12px;
    font: inherit; background: var(--surface); color: var(--text);
}
form textarea { resize: vertical; min-height: 120px; }
/* V.2.e — placeholders legibles en ambos modos (antes gris fijo del navegador). */
input::placeholder, textarea::placeholder { color: var(--text-soft); opacity: 1; }

/* Paginación: todas las reglas viven en un solo lugar (bloque "Paginación
   (GRID.3)" más abajo), incluida `.pagination-info` (antes se definía acá
   suelta y duplicada). */

/* Filtros */
.category-filter-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
/* VP — chips de filtro con más definición (sobre todo en dark, donde antes
   quedaban casi negros sin borde): tinte rosa muy suave + borde on-brand +
   texto legible. El activo usa --on-accent (texto oscuro sobre el rosa claro
   del dark; blanco sobre el magenta del light) + halo para "levantarlo". */
.filter-chip { display: inline-flex; align-items: center; padding: 0.5rem 0.9rem; border-radius: 999px; background: color-mix(in srgb, var(--primary) 6%, var(--surface)); color: var(--text); border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border)); font-weight: 600; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition); }
.filter-chip:hover { background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.filter-chip--active { background: var(--primary); color: var(--on-accent); border-color: var(--primary); box-shadow: 0 4px 12px -5px color-mix(in srgb, var(--primary) 55%, transparent); }

/* Spoilers */
.spoiler-warning { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; background: color-mix(in srgb, var(--warning) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent); border-radius: 14px; margin-bottom: 1rem; flex-wrap: wrap; }
.spoiler-warning--inline { padding: 0.6rem 0.9rem; background: color-mix(in srgb, var(--warning) 10%, var(--surface)); }
.spoiler-warning__icon { font-size: 1.5rem; flex-shrink: 0; }
.spoiler-content--hidden { display: none; }
.btn-spoiler-reveal { background: none; border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent); color: color-mix(in srgb, var(--warning) 72%, var(--text)); padding: 0.4rem 0.9rem; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 600; }
.btn-spoiler-reveal:hover { background: color-mix(in srgb, var(--warning) 18%, var(--surface)); }

/* Spoiler con <details> — accesible y sin JS (AUD.2). Reemplaza el reveal
   por onclick de las review cards; conserva la estética ámbar. */
details.spoiler { background: color-mix(in srgb, var(--warning) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); border-radius: 14px; padding: 0.6rem 0.9rem; margin-bottom: 1rem; }
details.spoiler > summary { display: flex; align-items: center; gap: 0.8rem; cursor: pointer; list-style: none; }
details.spoiler > summary::-webkit-details-marker { display: none; }
.spoiler__cue { font-weight: 600; color: color-mix(in srgb, var(--warning) 72%, var(--text)); }
.spoiler__cue::before { content: "▸"; display: inline-block; margin-right: 0.4rem; transition: transform 0.15s ease; }
details.spoiler[open] > summary .spoiler__cue::before { transform: rotate(90deg); }
.spoiler__content { margin: 0.7rem 0 0.2rem; }

/* Foro */
.forum-filters { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1.2rem; }
.filter-group { display: flex; flex-direction: column; gap: 0.5rem; }
.filter-label { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-soft); }
.filter-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.week-topic-card { background: linear-gradient(135deg, color-mix(in srgb, #CA8A04 14%, var(--surface)), var(--surface-2)); border-left: 4px solid #EAB308; }
.week-topic-card h3 { margin-top: 0.8rem; margin-bottom: 0.5rem; }
.linked-book-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: linear-gradient(135deg, color-mix(in srgb, var(--success) 14%, var(--surface)), var(--surface-2)); border-left: 4px solid var(--primary); }
.linked-book-banner h3 { margin: 0.3rem 0; }
.linked-book-banner__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.comment-card { border-left: 3px solid var(--border); }
.topic-actions { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.publication-comment-form { margin-top: 1.5rem; }  /* COH.7: ahora vive al pie de la lista */
.publication-comment-form textarea,
.publication-comment-form__form textarea { width: 100%; }  /* COH.7: __form = edit inline inyectado en la card */

/* COH.6/7 — el <form> de borrar comentario vive en la fila de acciones (foro +
   publicaciones): que se alinee con el link "Editar" como un ítem flex más. */
.card-actions--with-edit .hero-actions form { display: inline-flex; margin: 0; }

/* Reseñar inline en la ficha (form al pie de la sección). Pase visual pendiente. */
.review-inline-form { margin-top: 1.5rem; }
.review-inline-form__title { margin: 0 0 0.75rem; }
.review-inline-form__form textarea,
.review-inline-form__form input[type="text"],
.review-inline-form__form select { width: 100%; }
.review-inline-form__form p { margin: 0 0 0.85rem; }
/* COH.6 — global (no scopeado a .review-inline-form): el form de EDITAR se
   inyecta en .review-card, fuera de ese wrapper, y también debe mostrar errores. */
.js-review-errors {
    margin-bottom: 0.85rem;
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--danger, #dc2626) 12%, var(--surface));
    color: var(--text);
    font-size: 0.9rem;
}
.review-inline-login { margin-top: 1.5rem; }
.review-inline-login p { margin: 0; color: var(--text-soft); }

/* Comentar inline en el foro (form al pie del hilo). Pase visual fino pendiente. */
.forum-comment-form { margin-top: 1.5rem; }
.forum-comment-form__form textarea { width: 100%; }
.forum-comment-form__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin: 0.75rem 0;
}
.forum-comment-form__row .form-field { margin: 0; }
.forum-comment-login { margin-top: 1.5rem; }
.forum-comment-login p { margin: 0; color: var(--text-soft); }
/* COH.8 — nota "ir a los más nuevos" en páginas de comentarios viejas (publicaciones). */
.publication-comment-login { margin-top: 1.5rem; }
.publication-comment-login p { margin: 0; color: var(--text-soft); }

/* Publicaciones */
.publication-detail-card { padding: 0; overflow: hidden; }
.publication-image { width: 100%; max-height: 420px; object-fit: cover; border-bottom: 1px solid var(--border); }
.publication-body { padding: 1.5rem; }
.publication-body p { margin-bottom: 1rem; }
.publication-actions { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem 1.5rem; border-top: 1px solid var(--border); }

/* Footer */
.site-footer { background: var(--bg-soft); color: var(--text-inverse); margin-top: 3rem; }
/* RESP.3 — de 3 columnas (brand + "Secciones" de 10 links + Cuenta) a
   brand + 4 grupos temáticos. Un grupo nuevo = un track más acá y listo. */
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.1fr 1.1fr 0.9fr; gap: 2rem; padding: 2.5rem 0; }
.footer-title { margin-top: 0; margin-bottom: 0.8rem; font-size: 1rem; }
.footer-text { color: #cbd5e1; max-width: 36ch; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li + li { margin-top: 0.5rem; }
.footer-links a { color: inherit; transition: color var(--transition); }
.footer-links a:hover { color: #FB6FA6; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 1rem 0; color: #cbd5e1; font-size: 0.95rem; }

/* Responsive */
/* RESP.1 — acá vivía el apilado del navbar con flex-wrap (3-4 filas siempre
   visibles + sticky = ~250px tapando la pantalla). Lo reemplaza la hamburguesa
   + panel del bloque "Paso RESP" al final del archivo. El colapso del footer
   también se muda a ese bloque (RESP.3). */
/* GRID.1 — las columnas de .grid-2/3/4 se definen ahora en el ladder único
   de arriba (junto a la definición base). Acá quedan solo los ajustes que
   NO son de columnas. */
@media (max-width: 640px) {
    .site-main { padding: 1.5rem 0; }
    /* AUD-VIS.1 — acá estaba `.section-heading { flex-direction: column }`,
       INALCANZABLE: el bloque del Paso 16.3 la redeclara igual (+gap) en
       ≤768px y más abajo, así que ganaba siempre. El breakpoint real de
       .section-heading es 768, no 640. */
    .page-hero { padding: 1.4rem; }
}

/* ------------------------------------------------------------------ */
/* Libros                                                              */
/* ------------------------------------------------------------------ */

/* Barra de búsqueda */
.search-bar {
    display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;
}
.search-input {
    flex: 1; min-width: 220px; padding: 0.8rem 1rem;
    border: 1px solid var(--border); border-radius: 999px;
    font: inherit; background: var(--surface); color: var(--text);
}
.search-input:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

/* Tarjeta de libro */
/* COH.11 — Portada clickeable. El <a> envuelve la tapa SIN participar del
   layout (display:contents): la tapa sigue siendo el flex/grid item y todas
   las reglas de tamaño (flex:none, 0 0 96px, etc.) le siguen pegando al img.
   Los anchors llevan tabindex="-1" porque duplican el link del título — no
   sumamos paradas de tab en las grillas. */
.cover-link { display: contents; }

/* TAPA.1 — `height: auto` en TODAS las tapas que salen de
   `partials/_book_cover.html`. No es cosmético: ese partial emite el <img> con
   `width="400" height="600"` por CLS (SEO.1), y el navegador convierte esos
   atributos en estilos de presentación. El CSS los pisa **solo si los
   declara**: como ninguna de estas clases declaraba `height`, el atributo
   ganaba y clavaba la tapa en 600px de alto mientras el ancho seguía al
   contenedor. De ahí las portadas estiradas —peor cuanto más angosta la
   ventana— y el recorte lateral del `object-fit: cover`.

   Y el efecto secundario que no se ve: con el alto fijo, `aspect-ratio` se
   ignora por completo. Las dos reglas de abajo que lo declaran no estaban
   haciendo nada.

   La variante horizontal (.book-card--h) se salvaba por casualidad: es la
   única que fija su propio height, y por especificidad (0,2,0) le sigue
   ganando a esta. */
.book-card__cover,
.hero-cover,
.book-detail-cover img,
.route-step__cover img { height: auto; }

.book-card__cover {
    display: block;
    /* GRID.2 — la portada llena el ancho de la card. Antes estaba topeada en
       160px y centrada, lo que en cualquier card más ancha que ~200px (grid-3,
       carrusel, 1 columna en el teléfono) dejaba franjas de aire a los lados y
       hacía sentir la card "vacía". Ahora la card manda el tamaño: con la
       densidad unificada en grid-4, la tapa ocupa ~209px y el catálogo se lee
       como una estantería, sin desperdicio. La variante --h (Trending) la
       vuelve a acotar a 118px con más especificidad. */
    width: 100%;
    aspect-ratio: 2 / 3;             /* proporción de libro real */
    object-fit: cover;
    border-radius: 12px;
    margin: 0 0 0.8rem;
}

/* V.3.3.a — Placeholder de tapa BookTok (reemplaza los grises externos del seed,
   placehold.co). El TAMAÑO lo da la clase de contexto (book-card__cover / hero-cover);
   acá solo el aspecto: gradiente de marca + título tipografiado, vibrante en ambos modos. */
.book-cover-ph {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    padding: 0.9rem; text-align: center; overflow: hidden;
    background: linear-gradient(150deg, var(--accent), var(--primary));
    color: #fff;
    /* Efecto "libro 3D": pliegue del lomo (inset izq) + volumen (inset der)
       + sombra proyectada. Contextos con box-shadow propia (ficha) la pisan. */
    box-shadow: inset 3px 0 8px rgba(0, 0, 0, 0.28),
                inset -5px 0 9px rgba(0, 0, 0, 0.10),
                7px 9px 20px -8px rgba(0, 0, 0, 0.42);
}
/* Lomo (spine) a la izquierda: banda vertical que simula el encuadernado.
   Puro decorado (pointer-events:none); el overflow:hidden del contenedor lo
   recorta al border-radius de cada contexto (card / hero / ficha / paso). */
.book-cover-ph::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 9px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.42), rgba(255, 255, 255, 0.16) 55%, transparent);
    pointer-events: none;
}
.book-cover-ph__title {
    position: relative; z-index: 1;   /* por encima del lomo */
    font-family: var(--font-display); font-weight: 800;
    font-size: 1.05rem; line-height: 1.2;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
    overflow-wrap: anywhere;   /* títulos de una sola palabra larga (ej. "Fahrenheit") cortan en vez de clipearse */
}
.book-card__cover.book-cover-ph { height: auto; }   /* el aspect-ratio 2:3 manda (antes height fijo → apaisada) */
/* El efecto libro puso `position: relative` en `.book-cover-ph`, que —misma
   especificidad, definido más abajo— le pisaba el `position: absolute` al
   `.hero-cover` y desarmaba el abanico de tapas. Lo restauramos con más
   especificidad (0,2,0). Los pseudos del lomo/hojas funcionan igual sobre
   un ancestro absolute. */
.hero-cover.book-cover-ph { position: absolute; }
.hero-cover.book-cover-ph .book-cover-ph__title { font-size: 0.85rem; -webkit-line-clamp: 5; }
/* V.3.3.c — mismo placeholder en la ficha del libro y en los libros del recorrido de ruta */
.book-detail-cover .book-cover-ph { aspect-ratio: 2/3; border-radius: var(--radius); box-shadow: var(--shadow); }
.route-step__cover .book-cover-ph { aspect-ratio: 2/3; border-radius: 8px; padding: 0.5rem; }
.route-step__cover .book-cover-ph__title { font-size: 0.8rem; -webkit-line-clamp: 4; }

/* GRID.2 — variante horizontal de la card, para el carrusel de Trending.
   Con cards anchas, la tapa vertical centrada dejaba franjas de aire a los
   lados; acá la portada va fija a la izquierda (tamaño de libro, no crece con
   la card) y todo el texto usa el ancho restante. El texto vive en
   .book-card__body, así que un simple flex de dos ítems alcanza y es robusto
   (nada de grid-row sobre hermanos sueltos). Override de 118px de ancho: gana
   en especificidad al "portada llena" de .book-card__cover de más abajo. */
.book-card--h {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
}
.book-card--h .book-card__cover {
    width: 118px;
    height: 177px;   /* 2:3 exacto y FIJO. Sin esto, el título del placeholder
                        estiraba la tapa angosta y cada portada del carrusel
                        quedaba de una altura distinta según el largo del título
                        (el bug de "el cuadrado es diferente"). Con height fijo,
                        todas las tapas del Trending son idénticas; el título se
                        recorta por el overflow:hidden del placeholder. */
    flex: none;
    margin: 0;
}
/* Portada angosta: el título del placeholder baja de tamaño para entrar sin
   empujar la caja (mismo recurso que .hero-cover / .route-step__cover). */
.book-card--h .book-card__cover .book-cover-ph__title {
    font-size: 0.8rem;
    -webkit-line-clamp: 5;
}
.book-card--h .book-card__body {
    flex: 1;
    min-width: 0;   /* deja que el título/sinopsis se trunquen sin desbordar */
}
@media (max-width: 520px) {
    .book-card--h { gap: 0.85rem; }
    .book-card--h .book-card__cover { width: 88px; height: 132px; }
}

.authors-line { color: var(--text-soft); font-size: 0.95rem; margin: 0; }
.authors-line a { color: var(--primary); }
.authors-line a:hover { text-decoration: underline; }

/* Rating */
.rating-display { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.rating-stars { font-weight: 700; color: #b45309; }
.rating-count { color: var(--text-soft); font-size: 0.9rem; }

/* Detalle de libro — layout portada + info */
.book-detail-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
    align-items: start;
}
.book-detail-cover img {
    width: 100%; border-radius: var(--radius);
    box-shadow: var(--shadow);
}

@media (max-width: 768px) {
    .book-detail-layout { grid-template-columns: 1fr; }
    .book-detail-cover img { max-width: 260px; }
}

/* ------------------------------------------------------------------ */
/* Autor detalle                                                       */
/* ------------------------------------------------------------------ */
.author-detail-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.5rem;
    align-items: start;
}
/* FIX.2 — autor SIN foto: el template no renderiza la columna de la foto
   y la bio aterrizaba en el track de 220px (el 1fr quedaba vacío). */
.author-detail-layout--no-photo { grid-template-columns: 1fr; }
.author-detail-photo img {
    width: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

@media (max-width: 768px) {
    .author-detail-layout { grid-template-columns: 1fr; }
    .author-detail-photo img { max-width: 200px; }
}


/* ------------------------------------------------------------------ */
/* Usuarios — auth y perfil                                            */
/* ------------------------------------------------------------------ */

/* Centrar formularios de login/registro */
.auth-layout {
    max-width: 480px;
    margin: 0 auto;
}
.auth-alt {
    text-align: center;
    margin-top: 1.2rem;
    color: var(--text-soft);
}
.auth-alt a {
    color: var(--primary);
    font-weight: 600;
}
.auth-alt a:hover {
    text-decoration: underline;
}

/* Header del perfil */
.profile-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.profile-avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: white;
    font-size: 2rem;
    font-weight: 700;
}

/* Tarjetas de estadísticas */
.stat-card {
    text-align: center;
    padding: 1.2rem;
}
.stat-value {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.2;
}
.stat-label {
    display: block;
    font-size: 0.88rem;
    color: var(--text-soft);
    margin-top: 0.3rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (max-width: 640px) {
    .profile-header {
        flex-direction: column;
        text-align: center;
    }
}

/* ------------------------------------------------------------------ */
/* Paso A.6.a — Reader Ranks: chip de rango + barra de progreso         */
/* ------------------------------------------------------------------ */
.rank-block {
    margin: 0.4rem 0 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    align-items: flex-start;
}
.rank-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.15;
    background: var(--surface-2);
    color: var(--text-soft);
    border: 1px solid var(--border);
    white-space: nowrap;
}
.rank-chip__icon {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
                 "Twemoji Mozilla", "EmojiOne Color", sans-serif;
    font-size: 1.05rem;
    line-height: 1;
}
/* Color progresivo por rango (de neutro a dorado). V.2.c.2: misma fórmula translúcida
   dark-aware que los badges de color; hojeador queda neutro (tokens) por diseño. */
.rank-chip--hojeador      { background: var(--surface-2); color: var(--text-soft); border-color: var(--border); }
.rank-chip--lector_asiduo,
.rank-chip--devorador,
.rank-chip--bibliofilo,
.rank-chip--erudito,
.rank-chip--maestro,
.rank-chip--lectiverso {
    background: color-mix(in srgb, var(--tint) 16%, var(--surface));
    color: color-mix(in srgb, var(--tint) 72%, var(--text));
    border-color: color-mix(in srgb, var(--tint) 32%, transparent);
}
.rank-chip--lector_asiduo { --tint: #2563EB; }
.rank-chip--devorador     { --tint: #4F46E5; }
.rank-chip--bibliofilo    { --tint: #7C3AED; }
.rank-chip--erudito       { --tint: #DB2777; }
.rank-chip--maestro       { --tint: #D97706; }
.rank-chip--lectiverso    { --tint: #CA8A04; }

.rank-progress {
    width: 100%;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.rank-progress__bar {
    height: 8px;
    width: 100%;
    background: var(--border);
    border-radius: 999px;
    overflow: hidden;
}
.rank-progress__fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transition: width 0.4s ease;
}
.rank-progress__label { color: var(--text-soft); font-size: 0.82rem; }
.rank-progress__label--max { font-weight: 600; color: var(--warning); }

@media (max-width: 640px) {
    .rank-block { align-items: center; }
}


/* ------------------------------------------------------------------ */
/* Paso 14: Niveles de lectura                                         */
/* ------------------------------------------------------------------ */

/* Badge de nivel de lectura (en tarjetas y headers) */
.badge-reading-level { --tint: #2563EB; }  /* azul — formula compartida en V.2.c.2 */

/* Badge compacto para comentarios (mismo tinte, tamaño chico) */
.badge-reading-level-sm {
    --tint: #2563EB;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

/* Contexto de lectura arriba del comentario */
.comment-reading-context {
    margin-bottom: 0.6rem;
}

/* Advertencia de nivel de lectura (en topic_detail) */
.reading-level-warning {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.2rem;
    background: color-mix(in srgb, #2563EB 10%, var(--surface));
    border: 1px solid color-mix(in srgb, #2563EB 30%, transparent);
    border-radius: 14px;
    flex-wrap: wrap;
}
.reading-level-warning__icon {
    font-size: 1.8rem;
    flex-shrink: 0;
    line-height: 1;
}
.reading-level-warning__body {
    flex: 1;
    min-width: 200px;
}
.reading-level-warning__body strong {
    display: block;
    margin-bottom: 0.3rem;
    color: color-mix(in srgb, #2563EB 72%, var(--text));
}
.reading-level-warning__body p {
    margin: 0.3rem 0;
    color: var(--text-soft);
    font-size: 0.92rem;
}
.reading-level-warning__note {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid color-mix(in srgb, #2563EB 25%, transparent);
    color: var(--text-soft);
    font-size: 0.85rem;
    font-style: italic;
}

/* AUD-VIS.1 — .reading-level-hint borrada: 0 usos en templates (el hint de
   nivel en el form de comentarios ya no se renderiza). */

/* Fieldset para agrupar spoilers + nivel */
.form-fieldset-spoiler {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    margin: 1rem 0 1.5rem;
}
.form-fieldset-spoiler legend {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text-soft);
    padding: 0 0.5rem;
}

/* Label inline para checkboxes. COH.9 — inline-flex + gap: el checkbox y su
   texto quedan SIEMPRE en una línea, alineados, aunque la label viva dentro de
   un flex row (foro) o con el checkbox como hermano previo (publicaciones). */
.label-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 500;
    margin-left: 0.4rem;
    cursor: pointer;
}

/* Helptext debajo de campos */
.helptext {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.82rem;
    color: var(--text-soft);
}

/* ------------------------------------------------------------------ */
/* Paso 15.3: Rutas de lectura                                         */
/* ------------------------------------------------------------------ */

/* Tarjeta de ruta */
.route-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.route-card__cover {
    width: 100%;
    height: 140px;
    overflow: hidden;
}
.route-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.route-card__cover--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    /* V.R.4 — banner BookTok: gradiente vibrante (matchea las tapas de libro)
       en vez del degradé pálido que se veía vacío, sobre todo en dark. */
    background: var(--gradient);
}
.route-card__cover-icon {
    font-size: 3.6rem;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.35));
}
.route-card__body {
    padding: 0.8rem 0 0;
}

/* V.R.5 — variante "banner" horizontal para el bloque "Rutas para vos".
   Con pocas rutas el grid-3 dejaba el marco ámbar casi vacío; el banner ancho
   (miniatura izq + contenido der) lo llena y da jerarquía de destacado. Se
   apilan verticalmente via .route-rec-list. */
.route-rec-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.route-card--wide {
    display: grid;
    grid-template-columns: 190px 1fr;
    align-items: stretch;
    padding: 0;     /* la miniatura va flush; el body recupera su padding abajo */
    width: 100%;    /* V.R.6 — llena el ancho del marco (no dejar hueco a la derecha) */
}
.route-card--wide .route-card__cover {
    height: 100%;
    min-height: 168px;
}
.route-card--wide .route-card__body {
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
}
.route-card--wide .route-card__action { margin-top: auto; }
.route-card--wide .route-card__action .btn { width: auto; align-self: flex-start; }
@media (max-width: 560px) {
    .route-card--wide { grid-template-columns: 1fr; }
    .route-card--wide .route-card__cover { height: 130px; min-height: 0; }
}

/* Badge de tipo de ruta */
.badge-route-type { --tint: #16A34A; }  /* verde — formula compartida en V.2.c.2 */

/* ============================================================
   V.3.7 — Ruta como recorrido (sendero / timeline vertical)
   Reemplaza la lista de cards plana por un CAMINO de nodos
   conectados por una espina. La espina se "enciende" en
   gradiente hasta el nodo actual (pasos done + current);
   los pendientes quedan huecos. Estado por paso: modifier en
   el <li> (--done / --current / --pending) desde el template.
   ============================================================ */
.route-path {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.route-step {
    position: relative;
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 1rem;
    padding-bottom: 1.5rem;
}
.route-step:last-child { padding-bottom: 0; }

/* Riel + espina vertical */
.route-step__rail {
    position: relative;
    display: flex;
    justify-content: center;
}
.route-step__line {
    position: absolute;
    top: 20px;         /* arranca en el centro del nodo (40px/2) → sin colita arriba */
    bottom: -1.5rem;   /* cubre el gap hasta el siguiente nodo */
    width: 3px;
    border-radius: 3px;
    background: var(--border);
}
.route-step:last-child .route-step__line { display: none; }
/* La espina se enciende SOLO tras los pasos terminados (progreso honesto): el
   tramo debajo de un nodo `done` se tiñe → la línea llega hasta el nodo actual
   pero no lo pasa. El nodo `current` ya se distingue por el anillo magenta. */
.route-step--done .route-step__line {
    background: linear-gradient(var(--primary), var(--accent));
}

/* Nodo numerado */
.route-step__node {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.95rem;
    background: var(--surface);
    border: 3px solid var(--border);
    color: var(--text-soft);
    flex-shrink: 0;
}
.route-step--done .route-step__node {
    background: var(--gradient);
    border-color: transparent;
    color: #fff;
}
.route-step--current .route-step__node {
    background: var(--surface);
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent);
}

/* Card del paso — hereda .card (bg/borde/sombra dark-aware) + layout acá */
.route-step__card {
    padding: 1rem 1.1rem;
    display: grid;
    grid-template-columns: 1fr 72px;
    gap: 1rem;
    align-items: start;
}
.route-step--current .route-step__card {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
}
.route-step__main { min-width: 0; }
.route-step__main h3 { margin: 0.35rem 0 0.2rem; }
.route-step__label {
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-soft);
}
.route-step--current .route-step__label { color: var(--primary); }
.route-step__cover {
    width: 72px;
    flex-shrink: 0;
}
.route-step__cover img {
    width: 100%;
    border-radius: 8px;
}

/* Razón editorial (estilo cita) */
.route-book-reason {
    color: var(--primary);
    font-weight: 600;
    font-style: italic;
    font-size: 0.92rem;
    margin: 0.4rem 0;
    padding-left: 0.8rem;
    border-left: 3px solid var(--primary);
}

/* Autores como links */
.authors-line a {
    color: var(--primary);
    font-weight: 500;
}
.authors-line a:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    .route-step { grid-template-columns: 44px 1fr; gap: 0.75rem; }
    .route-step__node { width: 34px; height: 34px; font-size: 0.85rem; }
    .route-step__line { top: 17px; }   /* centro del nodo de 34px */
    .route-step__card { grid-template-columns: 1fr; }
    .route-step__cover { display: none; }
}

/* Paso 16.2 — Book detail polish */

/* Estado "sin rating" en el hero */
.rating-display--empty {
    color: var(--text-soft);
    font-style: italic;
}

/* Meta row del libro: espacios y pesos consistentes */
.book-meta-row {
    margin-top: 1rem;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.book-meta-row strong {
    color: var(--text-strong, #111827);
    font-weight: 600;
    margin-right: 0.25rem;
}

/* Tarjeta de reseña: uniforma altura visual */
.review-card h3 {
    margin-top: 0.4rem;
    margin-bottom: 0.6rem;
    font-size: 1.1rem;
}

/* Paso 32B — Indicador "Editado hace X" en review_card */
.meta-edited {
    color: var(--text-soft);
    font-size: 0.85rem;
    font-style: italic;
}

/* Paso 32B — Form inline del botón eliminar reseña (no rompe el flow) */
.review-delete-form {
    display: inline;
    margin: 0;
}

/* Info auxiliar del heading (ej: "Ya publicaste tu reseña ✓") */
.section-meta {
    color: var(--text-soft);
    font-size: 0.92rem;
    font-style: italic;
}

/* Pulir el empty-state para que no se vea plano en un grid */
.empty-state {
    text-align: center;
    padding: 2rem 1.5rem;
}
.empty-state h3 {
    margin-bottom: 0.5rem;
}
.empty-state p {
    color: var(--text-soft);
    max-width: 48ch;
    margin-inline: auto;
}
.empty-state .btn {
    margin-top: 0.8rem;
}

/* Botón pequeño para CTAs dentro de empty states */
.btn-sm {
    padding: 0.35rem 0.9rem;
    font-size: 0.9rem;
}

/* ================================================================== */
/* Paso 16.3 — Responsive para book_detail                             */
/* Breakpoints: 1024 (tablet) · 768 (mobile) · 320 (mobile pequeño)    */
/* ================================================================== */

/* Utilidades anti-overflow: que nada desborde su contenedor */
.book-hero,
.book-detail-layout,
.section-block { min-width: 0; }

.book-meta-row,
.authors-line,
.review-card,
.content-card { overflow-wrap: anywhere; }

/* -------- Tablet (≤ 1024 px) -------- */
@media (max-width: 1024px) {
    /* GRID.1 — las columnas de las grillas ya no se definen acá (ver ladder
       único junto a la definición base de .grid-*). */

    /* Portada más compacta, menos gap */
    .book-detail-layout {
        grid-template-columns: 240px 1fr;
        gap: 1.2rem;
    }

    /* Hero: padding ligeramente menor */
    .page-hero.book-hero { padding: 1.6rem; }
}

/* -------- Mobile (≤ 768 px) -------- */
@media (max-width: 768px) {
    /* GRID.1 — acá vivía `.grid-4 { repeat(2) }`, que pisaba el corte a 1
       columna del teléfono (misma especificidad, definido después). Las
       columnas ahora se deciden solo en el ladder único de arriba. */

    /* Portada arriba, sinopsis debajo */
    .book-detail-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .book-detail-cover {
        display: flex;
        justify-content: center;
    }
    .book-detail-cover img {
        max-width: 220px;
    }

    /* Encabezados de sección: título y link apilados */
    .section-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }
    .section-heading .hero-actions {
        width: 100%;
    }
    .section-heading .hero-actions .btn {
        flex: 1 1 auto;
        text-align: center;
    }

    /* Hero del libro: título más compacto */
    .page-hero.book-hero {
        padding: 1.4rem;
    }
    .page-hero.book-hero h1 {
        font-size: clamp(1.5rem, 5vw, 2rem);
        margin-bottom: 0.4rem;
    }

    /* Meta-row del libro: gap menor, fuente reducida */
    .book-meta-row {
        gap: 0.45rem 1.1rem;
        font-size: 0.9rem;
    }

    /* Tarjetas internas: padding un poco menor */
    .review-card,
    .content-card {
        padding: 1.2rem;
    }

    /* Área táctil mínima en botones (accesibilidad) */
    .btn { min-height: 44px; }
    .btn-sm { min-height: 36px; }
}

/* -------- Mobile pequeño (≤ 320 px) -------- */
@media (max-width: 320px) {
    /* GRID.1 — el "todo a 1 columna" ya lo cubre el ladder desde ≤767px. */

    /* Espaciado global más compacto */
    .site-main { padding: 1rem 0; }
    .container { width: min(100% - 1.25rem, var(--container)); }
    .section-block { margin-bottom: 1.4rem; }
    .card { padding: 1rem; }

    /* Hero y tipografía reducidas */
    .page-hero.book-hero {
        padding: 1.1rem;
        border-radius: 12px;
    }
    .page-hero.book-hero h1 { font-size: 1.35rem; }
    .section-heading h2 { font-size: 1.15rem; }

    /* Badges en tamaño compacto */
    .badge {
        padding: 0.25rem 0.55rem;
        font-size: 0.76rem;
    }

    /* Portada aún más chica */
    .book-detail-cover img { max-width: 170px; }

    /* Meta del libro: una fila por dato */
    .book-meta-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    /* Botones: ancho completo para tap cómodo */
    .section-heading .hero-actions .btn { width: 100%; }
}

/* =================================================================== */
/* Paso 17.3 — Widget de estado de lectura en book_detail              */
/* =================================================================== */

.book-status-widget {
    margin-top: 1.25rem;
    padding: 1rem 1.1rem;
    background: var(--gradient-soft);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.book-status-widget__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.book-status-widget__label {
    font-weight: 600;
    color: var(--text-strong, #111827);
    font-size: 0.95rem;
}

/* =================================================================== */
/* Paso 32.2.2 — Badge de "puntos ya otorgados" en el header del widget */
/* Estrella dorada con gradiente + tooltip custom con flecha y fade-in. */
/* Reemplazó al chip permanente "+2 pts otorgados".                     */
/* =================================================================== */
.points-info-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fbbf24 100%);
    color: #78350f;
    cursor: help;
    box-shadow:
        0 1px 2px rgba(180, 83, 9, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.18s ease;
    outline: none;
}

.points-info-badge:hover,
.points-info-badge:focus-visible {
    transform: scale(1.12) rotate(-6deg);
    box-shadow:
        0 6px 18px rgba(245, 158, 11, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.points-info-badge__icon {
    width: 1.05rem;
    height: 1.05rem;
    fill: currentColor;
    stroke: currentColor;
}

/* Tooltip custom: oscuro, con flecha hacia abajo, fade-in suave. */
.points-info-badge__tooltip {
    position: absolute;
    bottom: calc(100% + 0.6rem);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: max-content;
    max-width: 18rem;
    padding: 0.6rem 0.8rem;
    background: #111827;
    color: #f9fafb;
    font-size: 0.8rem;
    line-height: 1.45;
    text-align: left;
    font-weight: 400;
    border-radius: 0.55rem;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
    z-index: 100;
}

.points-info-badge__tooltip strong {
    display: block;
    color: #fde68a;
    font-weight: 600;
    margin-bottom: 0.2rem;
    font-size: 0.82rem;
}

.points-info-badge__tooltip-text {
    color: #d1d5db;
    font-size: 0.78rem;
}

/* Flechita del tooltip apuntando al badge. */
.points-info-badge__tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #111827;
}

.points-info-badge:hover .points-info-badge__tooltip,
.points-info-badge:focus-visible .points-info-badge__tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
    .points-info-badge,
    .points-info-badge__tooltip {
        transition: none;
    }
    .points-info-badge:hover,
    .points-info-badge:focus-visible {
        transform: scale(1.05);
    }
}

.book-status-widget__form {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}

.book-status-widget__form select {
    flex: 1;
    min-width: 180px;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface); color: var(--text);
    font-size: 0.95rem;
    font-family: inherit;
    cursor: pointer;
}

.book-status-widget__form select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.book-status-widget__hint {
    margin: 0.7rem 0 0;
    font-size: 0.85rem;
    color: var(--text-soft);
    font-style: italic;
}

.book-status-widget__cta {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* =================================================================== */
/* Paso 17.3 — Toast celebratorio cuando se otorgan puntos             */
/* Activa con `extra_tags="points"` en messages.success(...)           */
/* =================================================================== */

.alert.points {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #78350f;
    border-color: #fbbf24;
    font-size: 1.02rem;
    font-weight: 600;
    box-shadow: 0 10px 25px -10px rgba(251, 191, 36, 0.55);

    /* Entrada: baja suave + pulso */
    animation: pointsToastIn 0.55s cubic-bezier(0.2, 1, 0.3, 1) both,
               pointsToastPulse 1.5s ease-in-out 0.6s 2;
}

@keyframes pointsToastIn {
    from {
        opacity: 0;
        transform: translateY(-14px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes pointsToastPulse {
    0%, 100% { box-shadow: 0 10px 25px -10px rgba(251, 191, 36, 0.55); }
    50%      { box-shadow: 0 10px 35px -10px rgba(251, 191, 36, 0.95); }
}

/* Respeta accesibilidad: sin movimiento si el sistema lo pide. */
@media (prefers-reduced-motion: reduce) {
    .alert.points {
        animation: none;
    }
}


/* =================================================================== */
/* Paso 19.4 — Badge de puntos en el navbar                            */
/* =================================================================== */

.nav-points {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.85rem;
    /* V.3.6 — oro suavizado (menos saturado) para que no grite sobre el navbar índigo. */
    background: linear-gradient(135deg, #ecd68a, #d4a636);
    color: #78350f;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.92rem;
    transition: transform var(--transition), box-shadow var(--transition);
    border: 1px solid rgba(180, 83, 9, 0.12);
}

.nav-points:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 15px -4px rgba(251, 191, 36, 0.45);
    color: #78350f;
}


/* =================================================================== */
/* Paso 19.3 — Tabla de ranking y tarjetas de posición                 */
/* =================================================================== */

.my-rank-card { text-align: center; }
.my-rank-card--in-top {
    background: linear-gradient(135deg, color-mix(in srgb, var(--success) 16%, var(--surface)), color-mix(in srgb, var(--success) 9%, var(--surface)));
    border-color: color-mix(in srgb, var(--success) 35%, transparent);
}
.my-rank-card--outside {
    background: var(--surface-2);
    border-color: var(--border);
}
.my-rank-big {
    font-size: 1.4rem;
    margin: 0.8rem 0;
}
.my-rank-big strong { font-size: 1.8rem; color: var(--primary, #4338ca); }

.ranking-table-wrapper {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.ranking-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}
.ranking-table th,
.ranking-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--surface-2);
}
.ranking-table th {
    background: var(--surface-2);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-soft);
}
.ranking-table .col-pos { width: 64px; text-align: center; font-weight: 600; }
.ranking-table .col-points { width: 100px; text-align: right; }
.ranking-table .col-count { width: 110px; text-align: center; color: var(--text-soft); }
.ranking-table tbody tr:hover { background: var(--surface-2); }
.ranking-row--me {
    background: linear-gradient(90deg, rgba(225,29,116,0.12), transparent);
}
.ranking-row--me:hover { background: linear-gradient(90deg, rgba(225,29,116,0.20), transparent); }

/* =================================================================== */
/* Paso 19.3 — Historial de puntos                                     */
/* =================================================================== */

.filter-card { padding: 1rem 1.25rem; }
.filter-form {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
}
.filter-group { display: flex; flex-direction: column; gap: 0.25rem; }
.filter-group label { font-size: 0.85rem; color: var(--text-soft); font-weight: 500; }
.filter-group select {
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    background: var(--surface); color: var(--text);
    min-width: 180px;
}

.history-list { display: flex; flex-direction: column; gap: 0.6rem; }
.history-entry {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 1rem;
    align-items: center;
    padding: 0.9rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: 10px;
}
.history-entry--positive { border-left-color: #22c55e; }
.history-entry--negative { border-left-color: #ef4444; }
.history-entry__points {
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
}
.history-entry--positive .history-entry__points { color: #16a34a; }
.history-entry--negative .history-entry__points { color: #dc2626; }
.history-entry__header {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.2rem;
    font-size: 0.85rem;
    color: var(--text-soft);
}
.history-entry__description {
    margin: 0;
    color: var(--text, #1f2937);
}

@media (max-width: 640px) {
    .ranking-table { font-size: 0.85rem; }
    .ranking-table .col-count { display: none; }
    .history-entry { grid-template-columns: 70px 1fr; }
}


/* ------------------------------------------------------------------ */
/* Paso 20 — Feed personalizado en home                                */
/* ------------------------------------------------------------------ */

/* AUD-VIS.1 — acá vivía la caja de color de la sección (velo azul + borde +
   padding). HOME.2 la neutralizó con `.home-layer .feed-section` porque ahora
   el tinte lo aporta la banda de la capa; pero esa neutralización (0,2,0)
   PERDÍA contra la regla dark `:root[data-theme="dark"] .feed-section` (0,3,0),
   así que en modo oscuro la caja reaparecía —y sin padding ni border-radius,
   porque esos sí los ganaba HOME.2: un rectángulo de color a sangre. O sea:
   HOME.2 sólo funcionaba en claro. Como las 4 secciones de la home se usan una
   única vez cada una y SIEMPRE dentro de .home-layer, la caja entera (claro +
   oscuro + su neutralizador) es peso muerto. Se borra de raíz en vez de subir
   especificidad. La clase queda en el HTML como ancla semántica. */

/* Sub-bloques dentro del feed (temas / reseñas) */
.feed-block + .feed-block {
    margin-top: 1.5rem;
}
.feed-block__title {
    font-size: 1.05rem;
    color: var(--text-soft);
    margin: 0 0 0.8rem;
    font-weight: 600;
}

/* Estado de bienvenida (cold start) — dark-aware (antes background:white fijo
   → card blanca en dark con el texto claro ilegible). */
.feed-empty {
    background: var(--surface);
}

/* Tarjetas de reseña dentro del feed */
.review-card__title {
    font-style: italic;
    color: var(--text-soft);
    margin: 0.4rem 0;
}
.review-card__spoiler-note {
    color: #b45309;
    font-size: 0.9rem;
    margin: 0.4rem 0;
}

/* ------------------------------------------------------------------ */
/* Paso 21 — Búsqueda global                                           */
/* ------------------------------------------------------------------ */

/* Search bar grande dentro del hero de la página de resultados */
.search-bar--hero {
    margin-top: 1.2rem;
    max-width: 640px;
}

/* Tarjeta de autor en resultados de búsqueda */
.author-card {
    text-align: center;
}
.author-card__photo {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 auto 0.8rem;
    display: block;
}
.author-card h3 {
    margin: 0.5rem 0;
}

/* Search bar compacta de la navbar */
.navbar-search {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    transition: border-color 0.15s, background 0.15s;
}
.navbar-search:focus-within {
    border-color: var(--primary);
    background: var(--surface);
}
.navbar-search input {
    border: none;
    background: transparent;
    padding: 0.45rem 0.9rem;
    font: inherit;
    color: var(--text);
    width: 200px;
    outline: none;
}
.navbar-search button {
    border: none;
    background: transparent;
    padding: 0.45rem 0.8rem;
    cursor: pointer;
    color: var(--text-soft);
    font-size: 1rem;
}
.navbar-search button:hover {
    color: var(--primary);
}

/* RESP.1 — antes acá se escondía la búsqueda ≤768px ("vive en el hero", que
   solo existe en la home): en el resto del sitio desaparecía. Ahora en móvil
   la búsqueda vive DENTRO del panel de la hamburguesa (bloque Paso RESP). */

/* ------------------------------------------------------------------ */
/* Paso 22 — Libros en tendencia                                       */
/* ------------------------------------------------------------------ */

/* AUD-VIS.1 — caja de color eliminada (el tinte lo da la banda .home-layer).
   Ver el detalle en el bloque del Paso 20 (.feed-section). */

/* Wrapper de cada tarjeta trending: book_card + razón editorial */
.trending-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
/* GRID.2 — en la grilla de 2 columnas las .trending-card se estiran a la altura
   de su fila; la card crece (flex:1) para que las razones editoriales (💡)
   queden alineadas al fondo aunque las sinopsis tengan distinto largo. */
.trending-card > .book-card { flex: 1; }

/* Razón editorial debajo de la tarjeta */
.trending-card__reason {
    margin: 0;
    padding: 0.7rem 0.9rem;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
    border-radius: 10px;
    font-size: 0.9rem;
    color: color-mix(in srgb, var(--warning) 72%, var(--text));
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.trending-card__bullet {
    flex-shrink: 0;
    line-height: 1.4;
}


/* ------------------------------------------------------------------ */
/* Paso 22A.1 — Bloque "Por dónde empezar"                             */
/* ------------------------------------------------------------------ */

/* AUD-VIS.1 — caja de color eliminada (el tinte lo da la banda .home-layer).
   Ver el detalle en el bloque del Paso 20 (.feed-section). */

/* Texto introductorio editorial debajo del heading */
.start-here-lead {
    margin: 0 0 1.2rem;
    color: var(--text-soft);
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 60ch;
}



/* ------------------------------------------------------------------ */
/* Paso 22A.2 — Entry point por autor                                  */
/* Familia visual del Paso 22A.1: misma paleta violeta.                */
/* ------------------------------------------------------------------ */

.author-starter-section {
    padding: 1.5rem;
    /* COH.2 — el tope lila fijo era una banda clara en dark; accent tint flipea. */
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, var(--surface)) 0%, transparent 100%);
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
}

.author-starter-lead {
    margin: 0 0 1.2rem;
    color: var(--text-soft);
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 70ch;
}

/* Grid auto-fit: 2 columnas si caben las dos tarjetas, 1 si no.       */
/* Cuando solo una de las dos puertas está disponible, la única        */
/* tarjeta ocupa el ancho completo (no queda huérfana al costado).     */
.author-starter-grid {
    display: grid;
    /* GRID.2 — el tope 460px (antes 1fr) evita que con UN solo ítem (sin ruta)
       la card se estire a todo el ancho y la portada quede gigante. Con la card
       en layout horizontal, 460px da portada al costado + texto legible. */
    grid-template-columns: repeat(auto-fit, minmax(280px, 460px));
    justify-content: start;
    gap: 1.2rem;
}

.author-starter-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.author-starter-card__badge {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    /* V.R.7 — dark-aware: superficie + borde violeta por token. */
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
    border-radius: 999px;
    font-size: 0.85rem;
    color: #6b21a8;
    font-weight: 600;
    align-self: flex-start;
}

@media (max-width: 640px) {
    .author-starter-section {
        padding: 1rem;
    }
}

/* =================================================================== */
/* Paso 23.2 — Perfil mejorado                                         */
/* =================================================================== */

/* --- Encabezado del perfil (extensiones sobre 13.3) --------------- */

.profile-header__info {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
/* AUD-VIS.1 — .profile-header__email borrada: 0 usos (el mail no se muestra
   en el perfil público). */
.profile-header__bio {
    color: var(--text);
    margin: 0;
    max-width: 52ch;
}
.profile-header__genres {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}
.filter-chip--sm {
    font-size: 0.8rem;
    padding: 0.2rem 0.7rem;
}

/* --- Tarjeta de posición en el ranking (Sección 2) ---------------- */

/* Prefijo "#" más pequeño que el número */
.stat-value__prefix {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-soft);
    margin-right: 0.1rem;
}

/* Enlace sutil debajo del stat-label */
.stat-sublabel {
    display: block;
    font-size: 0.78rem;
    color: var(--primary);
    margin-top: 0.4rem;
    font-weight: 500;
}
.stat-sublabel:hover {
    text-decoration: underline;
}

/* Top 10: acento dorado */
.stat-card--top10 {
    /* COH.2 — el fondo crema/blanco fijo era una isla blanca en dark.
       Tinte dorado con color-mix sobre --surface + valor dorado dark-aware. */
    border: 2px solid #fbbf24;
    background: linear-gradient(135deg, color-mix(in srgb, #fbbf24 16%, var(--surface)), var(--surface));
}
.stat-card--top10 .stat-value {
    color: color-mix(in srgb, #d97706 55%, var(--text));
}

/* --- Reseñas en el perfil (Sección 4) ----------------------------- */

.profile-review-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.profile-review-card__book {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}
.profile-review-card__book a {
    color: var(--text);
}
.profile-review-card__book a:hover {
    color: var(--primary);
}
.profile-review-card__title {
    font-size: 0.92rem;
    font-weight: 400;
    font-style: italic;
    color: var(--text-soft);
    margin: 0;
}

/* --- Empty state icon (usado en Biblioteca vacía) ----------------- */

.empty-state__icon {
    font-size: 2.5rem;
    margin: 0 0 0.5rem;
    line-height: 1;
}

/* AUD-VIS.1 — el ajuste 2×2 de .stats-grid se mudó al ladder único de
   grillas (arriba de todo, junto a .grid-2/3/4). Vivía acá, en un @media
   suelto de ≤640px, y eso lo dejaba desincronizado del ladder: entre 641 y
   767px los 4 tiles se apilaban a 1 columna y volvían a 2 al ACHICAR la
   pantalla. Las columnas se definen en un solo lugar. */

/* =================================================================== */
/* Paso V.R.13 — Mi biblioteca: estantería viva                        */
/* Banda "Leyendo ahora" + chips con contador + estantes con repisa.   */
/* Reemplaza al grid de 5 conteos + acordeones del Paso 23.4 (doble    */
/* capa del mismo dato). Todo con tokens → dark mode sin overrides.    */
/* =================================================================== */

/* --- Banda "Leyendo ahora" (LEYENDO + RELEYENDO) ------------------- */

.now-reading {
    display: grid;
    /* RESP.2 — min(320px, 100%): en pantallas de <352px reales el track no
       fuerza los 320px y la card se achica en vez de desbordar. */
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.now-card {
    display: flex;
    gap: 1.1rem;
    background: var(--gradient-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem;
}
.now-card__cover {
    flex: 0 0 96px;
    width: 96px;
    height: 142px;
    object-fit: cover;
    border-radius: 4px 9px 9px 4px;   /* lomo recto, canto redondeado */
    box-shadow: 0 12px 14px -10px rgba(27, 16, 48, 0.5);
}
.now-card__cover--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.5rem;
    background: var(--gradient);
}
.now-card__cover-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 1.25;
    color: var(--on-accent);
}
.now-card__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.now-card__pill {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--gradient);
    color: var(--on-accent);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
}
.now-card__pill--re {
    background: var(--surface);
    color: var(--accent);
    border: 1px solid var(--border);
}
.now-card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.12rem;
    line-height: 1.25;
    margin: 0;
}
.now-card__title a { color: var(--text-strong); }
.now-card__title a:hover { color: var(--primary); }
.now-card__author {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.85rem;
}
.now-card__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: auto;
    padding-top: 0.55rem;
}

/* D5 — hay biblioteca pero nada activo: nota amable, no hueco mudo */
.now-empty {
    margin: 0 0 1.6rem;
    padding: 0.9rem 1rem;
    background: var(--surface-2);
    border-radius: 8px;
    color: var(--text-soft);
    font-size: 0.9rem;
}

/* --- Chips de estantes (una sola capa de navegación) ---------------- */

.library-chips {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.library-chip {
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.42rem 1rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.library-chip:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}
.library-chip[aria-selected="true"] {
    background: var(--gradient);
    color: var(--on-accent);
    border-color: transparent;
}
.library-chip__count {
    background: var(--surface-2);
    color: var(--text-soft);
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
}
.library-chip[aria-selected="true"] .library-chip__count {
    background: rgba(255, 255, 255, 0.28);
    color: var(--on-accent);
}
/* Chip en 0: atenuado — el vacío no reta */
.library-chip--empty { opacity: 0.55; }

/* --- Estantería: portadas apoyadas sobre una repisa ----------------- */

.lib-shelf-panel[hidden] { display: none; }
.lib-shelf-stage {
    position: relative;
    padding-bottom: 0.4rem;
}
/* La repisa: tabla bajo las portadas (top = 6px padding + 182px cover
   − solape para que los libros "apoyen"). var(--border) lee como madera
   suave en light y dark sin variables nuevas (D4). */
.lib-shelf-board {
    position: absolute;
    left: 0;
    right: 0;
    top: 182px;
    height: 13px;
    border-radius: 999px;
    background: var(--border);
    box-shadow: var(--shadow);
}
.lib-shelf-books {
    display: flex;
    gap: 1.15rem;
    align-items: flex-start;
    overflow-x: auto;
    padding: 6px 6px 2px;
    scrollbar-width: thin;
}
.lib-shelf-book {
    flex: 0 0 122px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
.lib-shelf-book__cover {
    position: relative;
    z-index: 1;
    display: block;
    width: 122px;
    height: 182px;
    object-fit: cover;
    border-radius: 4px 9px 9px 4px;
    box-shadow:
        inset 6px 0 8px -6px rgba(255, 255, 255, 0.55),
        0 12px 14px -10px rgba(27, 16, 48, 0.5);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lib-shelf-book:hover .lib-shelf-book__cover,
.lib-shelf-book:focus-visible .lib-shelf-book__cover {
    transform: translateY(-7px) rotate(-1.2deg);
    box-shadow: 0 20px 22px -12px rgba(27, 16, 48, 0.55);
}
.lib-shelf-book__cover--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.8rem 0.65rem;
    background: var(--gradient);
}
.lib-shelf-book__cover-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1.3;
    color: var(--on-accent);
}
.lib-shelf-book__caption { margin-top: 1.35rem; }
.lib-shelf-book__caption strong {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-strong);
    line-height: 1.3;
}
.lib-shelf-book__caption span {
    font-size: 0.74rem;
    color: var(--text-soft);
}

/* Slot fantasma "＋ Agregar libro" (solo en Quiero leer → catálogo) */
.lib-shelf-book__cover--ghost {
    background: transparent;
    border: 2px dashed var(--border);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: var(--text-soft);
    font-size: 0.8rem;
}
.lib-shelf-book__plus {
    font-size: 1.9rem;
    line-height: 1;
    color: var(--primary);
    font-family: var(--font-display);
}
.lib-shelf-book:hover .lib-shelf-book__cover--ghost {
    transform: translateY(-7px);
    border-color: var(--primary);
    box-shadow: none;
}

/* Estante vacío: acompaña, no reta */
.lib-shelf-empty {
    margin: 0.5rem 0 0;
    padding: 0.4rem 6px 0;
    color: var(--text-soft);
    font-size: 0.86rem;
}

/* --- Responsive ----------------------------------------------------- */

@media (max-width: 640px) {
    .now-card__cover {
        flex-basis: 80px;
        width: 80px;
        height: 118px;
    }
}


/* ------------------------------------------------------------------ */
/* Paso 33 — Recomendaciones de libros                                 */
/* ------------------------------------------------------------------ */

/* AUD-VIS.1 — caja de color eliminada (el tinte lo da la banda .home-layer).
   Acá también vivían las 10 líneas dark de V.3.2 que la reintroducían: eran
   EXACTAMENTE la regla que le ganaba a HOME.2 y rompía la home en oscuro.
   Ver el detalle en el bloque del Paso 20 (.feed-section). */


/* ------------------------------------------------------------------ */
/* Paso 35 — Búsqueda avanzada                                         */
/* ------------------------------------------------------------------ */

.book-search-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Panel <details> ----------------------------------------------- */
.advanced-filters {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 1rem;
    transition: padding 0.15s;
}
.advanced-filters[open] {
    padding: 1rem 1.25rem;
}

/* Sumario clickeable */
.advanced-filters__summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text);
    padding: 0.4rem 0;
    list-style: none;        /* oculta el triángulo nativo en Chrome */
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.advanced-filters__summary::-webkit-details-marker {
    display: none;            /* oculta el triángulo nativo en Safari */
}
.advanced-filters__summary::before {
    content: "▸";
    transition: transform 0.15s;
    color: var(--text-soft);
}
.advanced-filters[open] .advanced-filters__summary::before {
    transform: rotate(90deg);
}

/* Badge "activos" cuando hay filtros aplicados */
.advanced-filters__badge {
    background: var(--primary);
    color: white;
    font-size: 0.75rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Grid de campos */
.advanced-filters__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.advanced-filters__field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.9rem;
}
.advanced-filters__field > span {
    color: var(--text-soft);
    font-weight: 600;
}
.advanced-filters__field input[type="text"],
.advanced-filters__field input[type="number"],
.advanced-filters__field select {
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    background: var(--surface); color: var(--text);
    transition: border-color 0.15s;
}
.advanced-filters__field input:focus,
.advanced-filters__field select:focus {
    border-color: var(--primary);
    outline: none;
}

/* Checkbox especial */
.advanced-filters__field--checkbox {
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    align-self: end;            /* alinea con la última fila de inputs */
    padding-bottom: 0.5rem;
}
.advanced-filters__field--checkbox input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}
.advanced-filters__field--checkbox > span {
    color: var(--text);
    font-weight: 500;
}

/* Acciones del panel */
.advanced-filters__actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* Paginación (GRID.3) — centrada y agrupada. Antes usaba `space-between`, que
   con solo "Página X de Y" + "Siguiente" (primera página, sin "Anterior")
   dejaba un hueco enorme en el medio y se veía pobre. Ahora prev / info / next
   van juntos y centrados. Un ÚNICO look de botón cubre las dos convenciones de
   markup que conviven (unos templates usan `.pagination__link`, otros
   `.btn ...`); el indicador va en una pastilla suave. Así se ve igual en todo
   el sitio sin tener que tocar los 13 templates. */
.pagination {
    margin-top: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
/* COH.8 — pager de comentarios ARRIBA de la lista: sin el margen grande. */
.pagination--compact { margin-top: 0.6rem; }
/* Botones Anterior/Siguiente — mismo estilo en ambas convenciones. */
.pagination__link,
.pagination .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    font-size: 0.92rem;
    transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
}
.pagination__link:hover,
.pagination .btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
    box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--primary) 45%, transparent);
}
.pagination__link:focus-visible,
.pagination .btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
/* Indicador "Página X de Y" — pastilla suave que lo despega de los botones.
   AUD-VIS.1 sumó `.pagination__current` (dinámicas), que era el único sin
   estilo. GRID.3 unifica acá las DOS convenciones de nombre que quedaban:
   `.pagination-info` (kebab) y `.pagination__info` (BEM). */
.pagination__info,
.pagination-info,
.pagination__current {
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-soft);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 640px) {
    .advanced-filters__grid {
        grid-template-columns: 1fr;
    }
    .advanced-filters__field--checkbox {
        align-self: stretch;
    }
    /* GRID.3 — en móvil la paginación ya se acomoda sola (center + wrap): el
       viejo `flex-direction: column` la apilaba en vertical sin necesidad. */
}

/* =================================================================== */
/* Paso 35A.5.1 — Trivia: listado, quiz y cooldown                     */
/* =================================================================== */

/* --- Variables locales por dificultad ----------------------------- */

.trivia-list-page,
.trivia-quiz-page,
.trivia-cooldown {
    --trivia-easy:      #16a34a;
    --trivia-medium:    #d97706;
    --trivia-hard:      #b91c1c;
    --trivia-easy-bg:   color-mix(in srgb, var(--trivia-easy) 14%, var(--surface));
    --trivia-medium-bg: color-mix(in srgb, var(--trivia-medium) 14%, var(--surface));
    --trivia-hard-bg:   color-mix(in srgb, var(--trivia-hard) 14%, var(--surface));
}

/* ------------------------------------------------------------------ */
/* trivia_list.html                                                    */
/* ------------------------------------------------------------------ */

.trivia-list-page__header {
    margin-bottom: 2rem;
}

.trivia-list-page__back {
    display: inline-block;
    color: var(--text-soft);
    margin-bottom: 0.8rem;
    transition: color var(--transition);
}
.trivia-list-page__back:hover {
    color: var(--primary);
}

.trivia-list-page__title {
    margin: 0 0 0.6rem;
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    color: var(--text);
}

.trivia-list-page__subtitle {
    color: var(--text-soft);
    max-width: 56ch;
    margin: 0;
}

/* --- Empty state ---------------------------------------------------- */

.trivia-empty {
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 3rem 1.5rem;
    text-align: center;
}
.trivia-empty__icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 0.8rem;
}
.trivia-empty h2 {
    margin: 0 0 0.5rem;
    font-size: 1.3rem;
}
.trivia-empty p {
    color: var(--text-soft);
    margin: 0 0 1.2rem;
}

/* --- Banner de gating ---------------------------------------------- */

.trivia-gating-banner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    /* COH.2 — banner ámbar dark-aware (color-mix sobre --surface). */
    background: linear-gradient(135deg, color-mix(in srgb, #f59e0b 15%, var(--surface)), color-mix(in srgb, #f59e0b 9%, var(--surface)));
    border: 1px solid color-mix(in srgb, #f59e0b 35%, var(--border));
    border-radius: var(--radius);
    padding: 1.2rem;
    margin-bottom: 1.5rem;
}
.trivia-gating-banner__icon {
    font-size: 1.8rem;
    line-height: 1;
}
.trivia-gating-banner strong {
    display: block;
    margin-bottom: 0.3rem;
    color: color-mix(in srgb, #d97706 55%, var(--text));
}
.trivia-gating-banner p {
    margin: 0 0 0.6rem;
    color: color-mix(in srgb, #d97706 45%, var(--text));
}
.trivia-gating-banner p:last-child {
    margin-bottom: 0;
}

/* --- Grilla de cards de trivia ------------------------------------- */

.trivia-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.trivia-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 4px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    box-shadow: var(--shadow);
    transition: transform var(--transition), box-shadow var(--transition);
}
.trivia-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.trivia-card--easy   { border-top-color: var(--trivia-easy); }
.trivia-card--medium { border-top-color: var(--trivia-medium); }
.trivia-card--hard   { border-top-color: var(--trivia-hard); }

.trivia-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.9rem;
}
.trivia-card__difficulty {
    font-weight: 600;
    color: var(--text-soft);
}
.trivia-card__points {
    background: var(--surface-soft);
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    color: var(--text-soft);
    font-weight: 500;
}

.trivia-card__title {
    margin: 0;
    font-size: 1.15rem;
    color: var(--text);
}
.trivia-card__description {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.95rem;
}
.trivia-card__meta {
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--text-soft);
    font-size: 0.9rem;
}
.trivia-card__meta li + li {
    margin-top: 0.3rem;
}
.trivia-card__cta {
    margin-top: auto;
    padding-top: 0.8rem;
}
.trivia-card__play-btn {
    width: 100%;
}

/* ------------------------------------------------------------------ */
/* trivia_quiz.html                                                    */
/* ------------------------------------------------------------------ */

.trivia-quiz-page {
    max-width: 760px;
    margin: 0 auto;
}

.trivia-quiz__back {
    display: inline-block;
    color: var(--text-soft);
    margin-bottom: 1rem;
    transition: color var(--transition);
}
.trivia-quiz__back:hover {
    color: var(--primary);
}

/* --- Intro --------------------------------------------------------- */

.trivia-quiz__intro {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.8rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow);
}

.trivia-quiz__heading {
    margin-bottom: 1rem;
}

.trivia-quiz__difficulty {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
}
.trivia-quiz__difficulty--easy   { background: var(--trivia-easy-bg);   color: var(--trivia-easy); }
.trivia-quiz__difficulty--medium { background: var(--trivia-medium-bg); color: var(--trivia-medium); }
.trivia-quiz__difficulty--hard   { background: var(--trivia-hard-bg);   color: var(--trivia-hard); }

.trivia-quiz__title {
    margin: 0 0 0.3rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
}
.trivia-quiz__book {
    margin: 0;
    color: var(--text-soft);
}
.trivia-quiz__book a {
    color: var(--primary);
    text-decoration: underline;
}

.trivia-quiz__description {
    margin: 0 0 1rem;
    color: var(--text-soft);
}

.trivia-quiz__warning {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    /* V.R.7 — tinte azul dark-aware (color-mix sobre var(--surface)). */
    background: linear-gradient(135deg,
        color-mix(in srgb, #3b82f6 12%, var(--surface)),
        color-mix(in srgb, #3b82f6 7%, var(--surface)));
    border: 1px solid color-mix(in srgb, #3b82f6 30%, var(--border));
    border-radius: 12px;
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
}
.trivia-quiz__warning-icon {
    font-size: 1.4rem;
    line-height: 1;
}
.trivia-quiz__warning strong {
    display: block;
    margin-bottom: 0.2rem;
    /* COH.2 — el bg ya era dark-aware (V.R.7) pero el texto azul oscuro era
       invisible sobre el tinte oscuro. color-mix con --text auto-flipea. */
    color: color-mix(in srgb, #3b82f6 52%, var(--text));
}
.trivia-quiz__warning p {
    margin: 0;
    color: color-mix(in srgb, #3b82f6 40%, var(--text));
    font-size: 0.92rem;
}

.trivia-quiz__stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
    color: var(--text-soft);
    font-size: 0.95rem;
}
.trivia-quiz__stats strong {
    color: var(--text);
}

/* --- Form del quiz ------------------------------------------------- */

.trivia-quiz__form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.trivia-question {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.4rem;
    margin: 0;
    box-shadow: var(--shadow);
}

.trivia-question__legend {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
    padding: 0;
}

.trivia-question__counter {
    display: block;
    font-size: 0.78rem;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
}

.trivia-question__text {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.5;
}

/* --- Opciones ------------------------------------------------------ */

.trivia-question__options {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    counter-reset: trivia-opt;       /* reinicia el contador de letras A/B/C/D */
}

.trivia-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
    counter-increment: trivia-opt;
}
.trivia-option:hover {
    border-color: var(--primary);
    background: var(--surface-soft);
}

/* Input visualmente oculto pero accesible (sr-only pattern) */
.trivia-option__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Marker circular con la letra generada por CSS */
.trivia-option__marker {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-soft);
    border: 1.5px solid var(--border);
    border-radius: 50%;
    font-weight: 700;
    color: var(--text-soft);
    transition: background var(--transition),
                border-color var(--transition),
                color var(--transition);
}
.trivia-option__marker::before {
    content: counter(trivia-opt, upper-alpha);   /* A, B, C, D... */
}

.trivia-option__text {
    flex: 1;
    color: var(--text);
}

/* Estado "seleccionada" — funciona con :has() (>95% soporte 2026) */
.trivia-option:has(input:checked) {
    border-color: var(--primary);
    /* V.R.7 — tinte magenta (matchea el borde primary) dark-aware. */
    background: color-mix(in srgb, var(--primary) 9%, var(--surface));
}
.trivia-option:has(input:checked) .trivia-option__marker {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Foco accesible (teclado) */
.trivia-option:focus-within {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* --- Submit area --------------------------------------------------- */

.trivia-quiz__submit-area {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.4rem;
    text-align: center;
    box-shadow: var(--shadow);
}

.trivia-quiz__submit-hint {
    margin: 0 0 0.8rem;
    color: var(--text-soft);
    font-size: 0.9rem;
}

.trivia-quiz__submit-btn {
    min-width: 220px;
    padding: 0.9rem 2rem;
    font-size: 1.05rem;
}

/* ------------------------------------------------------------------ */
/* trivia_cooldown.html                                                */
/* ------------------------------------------------------------------ */

.trivia-cooldown {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    padding: 1rem;
}

.trivia-cooldown__card {
    max-width: 460px;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: var(--shadow);
}

.trivia-cooldown__icon {
    font-size: 3.5rem;
    display: block;
    margin-bottom: 0.8rem;
}

.trivia-cooldown__title {
    margin: 0 0 0.6rem;
    font-size: 1.5rem;
    color: var(--text);
}

.trivia-cooldown__lead {
    color: var(--text-soft);
    margin: 0 0 1.5rem;
    line-height: 1.55;
}

.trivia-cooldown__timer {
    /* V.R.7 — tinte azul dark-aware. */
    background: linear-gradient(135deg,
        color-mix(in srgb, #3b82f6 10%, var(--surface)),
        color-mix(in srgb, #38bdf8 12%, var(--surface)));
    border: 1px solid color-mix(in srgb, #38bdf8 32%, var(--border));
    border-radius: 14px;
    padding: 1.2rem;
    margin-bottom: 1.5rem;
}

.trivia-cooldown__time {
    font-size: 2.2rem;
    font-weight: 700;
    /* COH.2 — cifra cian oscuro sobre bg dark-aware (V.R.7) = invisible en dark.
       color-mix con --text auto-flipea. */
    color: color-mix(in srgb, #0ea5e9 52%, var(--text));
    font-variant-numeric: tabular-nums;     /* dígitos del mismo ancho */
    letter-spacing: 0.02em;
}

.trivia-cooldown__time-label {
    margin: 0;
    color: color-mix(in srgb, #0ea5e9 52%, var(--text));
    font-size: 0.9rem;
    opacity: 0.85;
}

.trivia-cooldown__actions {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}

.trivia-cooldown__hint {
    color: var(--text-soft);
    font-size: 0.85rem;
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 640px) {
    .trivia-cards-grid {
        grid-template-columns: 1fr;
    }
    .trivia-quiz__intro {
        padding: 1.4rem;
    }
    .trivia-question {
        padding: 1.1rem;
    }
    .trivia-quiz__submit-btn {
        width: 100%;
        min-width: auto;
    }
    .trivia-quiz__stats {
        flex-direction: column;
        gap: 0.4rem;
    }
    .trivia-cooldown__card {
        padding: 2rem 1.4rem;
    }
}

/* =================================================================== */
/* Paso 35A.5.2 — Trivia: resultado y experiencia post-juego           */
/* =================================================================== */

/* --- Variables locales del módulo de resultado -------------------- */

.trivia-result-page {
    --trivia-easy:        #16a34a;
    --trivia-medium:      #d97706;
    --trivia-hard:        #b91c1c;
    --trivia-correct:     #16a34a;
    --trivia-correct-bg:  color-mix(in srgb, var(--trivia-correct) 14%, var(--surface));
    --trivia-wrong:       #dc2626;
    --trivia-wrong-bg:    color-mix(in srgb, var(--trivia-wrong) 14%, var(--surface));
    --trivia-skip:        var(--text-soft);
    --trivia-skip-bg:     var(--surface-2);

    max-width: 760px;
    margin: 0 auto;
}

/* --- Encabezado --------------------------------------------------- */

.trivia-result__back {
    display: inline-block;
    color: var(--text-soft);
    margin-bottom: 0.8rem;
    transition: color var(--transition);
}
.trivia-result__back:hover {
    color: var(--primary);
}

.trivia-result__meta {
    margin-bottom: 0.5rem;
}

.trivia-result__difficulty {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}
.trivia-result__difficulty--easy   { background: color-mix(in srgb, var(--trivia-easy) 14%, var(--surface));   color: var(--trivia-easy); }
.trivia-result__difficulty--medium { background: color-mix(in srgb, var(--trivia-medium) 14%, var(--surface)); color: var(--trivia-medium); }
.trivia-result__difficulty--hard   { background: color-mix(in srgb, var(--trivia-hard) 14%, var(--surface));   color: var(--trivia-hard); }

.trivia-result__title {
    margin: 0 0 1.5rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--text);
}

/* --- Score grande ------------------------------------------------- */

.trivia-score {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: var(--shadow);
    margin-bottom: 1.25rem;
    animation: scoreFadeIn 0.55s cubic-bezier(0.2, 1, 0.3, 1) both;
}

.trivia-score__big {
    font-size: clamp(3rem, 8vw, 4.5rem);
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.6rem;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.trivia-score__correct {
    color: var(--primary);
}
.trivia-score__divider {
    color: var(--text-soft);
    font-weight: 400;
    margin: 0 0.3rem;
}
.trivia-score__total {
    color: var(--text-soft);
}

.trivia-score__accuracy {
    margin: 0 0 0.4rem;
    font-size: 1.1rem;
    color: var(--text-soft);
}
.trivia-score__time {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-soft);
}

@keyframes scoreFadeIn {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Banner de puntos --------------------------------------------- */

.trivia-points-banner {
    position: relative;
    border-radius: var(--radius);
    padding: 1.8rem 1.5rem;
    text-align: center;
    margin-bottom: 2rem;
    overflow: hidden;
}

/* Variante 1: ¡ganaste! */
.trivia-points-banner--gain {
    background: linear-gradient(135deg, #fef3c7, #fde68a 60%, #fbbf24);
    border: 2px solid #f59e0b;
    color: #78350f;
    box-shadow: 0 14px 30px -10px rgba(251, 191, 36, 0.65);
    animation:
        pointsBannerIn 0.7s cubic-bezier(0.2, 1, 0.3, 1) both,
        pointsBannerPulse 2s ease-in-out 0.7s 2;
}

/* Variantes 2 y 3: neutras (no acertaste / ya estás en el techo) */
.trivia-points-banner--zero,
.trivia-points-banner--maxed {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 1.2rem 1.5rem;
    text-align: left;
}

.trivia-points-banner__icon {
    font-size: 1.8rem;
    line-height: 1;
    flex-shrink: 0;
}

.trivia-points-banner__number {
    font-size: clamp(3rem, 9vw, 5rem);
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.4rem;
    color: #b45309;
    text-shadow: 0 2px 8px rgba(217, 119, 6, 0.3);
    animation: pointsNumberPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
    font-variant-numeric: tabular-nums;
}

.trivia-points-banner__label {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.45;
}
.trivia-points-banner--gain .trivia-points-banner__label strong {
    color: #78350f;
    font-weight: 800;
}

/* Sparkles decorativos (solo banner --gain) */
.trivia-points-banner__sparkle {
    position: absolute;
    font-size: 1.6rem;
    animation: sparkleTwinkle 1.6s ease-in-out infinite;
    opacity: 0.85;
    pointer-events: none;
}
.trivia-points-banner__sparkle--1 { top: 12%;    left: 10%;   animation-delay: 0s; }
.trivia-points-banner__sparkle--2 { top: 18%;    right: 12%;  animation-delay: 0.4s; }
.trivia-points-banner__sparkle--3 { bottom: 14%; left: 18%;   animation-delay: 0.8s; }

@keyframes pointsBannerIn {
    from { opacity: 0; transform: scale(0.92) translateY(8px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}

@keyframes pointsBannerPulse {
    0%, 100% { box-shadow: 0 14px 30px -10px rgba(251, 191, 36, 0.65); }
    50%      { box-shadow: 0 14px 40px -8px  rgba(251, 191, 36, 1); }
}

@keyframes pointsNumberPop {
    0%   { transform: scale(0.5);  opacity: 0; }
    65%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1);    opacity: 1; }
}

@keyframes sparkleTwinkle {
    0%, 100% { transform: scale(0.85); opacity: 0.5; }
    50%      { transform: scale(1.2);  opacity: 1; }
}

/* --- Breakdown ---------------------------------------------------- */

.trivia-breakdown__heading {
    font-size: 1.3rem;
    margin: 0 0 1rem;
    color: var(--text);
}

.trivia-breakdown-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: var(--radius);
    padding: 1.4rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow);
}
.trivia-breakdown-item--correct    { border-left-color: var(--trivia-correct); }
.trivia-breakdown-item--incorrect  { border-left-color: var(--trivia-wrong); }
.trivia-breakdown-item--unanswered { border-left-color: var(--trivia-skip); }
.trivia-breakdown-item--missing    { border-left-color: var(--text-soft); opacity: 0.7; }

.trivia-breakdown-item__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
}

.trivia-breakdown-item__counter {
    font-size: 0.78rem;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.trivia-breakdown-item__badge {
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    white-space: nowrap;
}
.trivia-breakdown-item__badge--correct    { background: var(--trivia-correct-bg); color: var(--trivia-correct); }
.trivia-breakdown-item__badge--incorrect  { background: var(--trivia-wrong-bg);   color: var(--trivia-wrong); }
.trivia-breakdown-item__badge--unanswered { background: var(--trivia-skip-bg);    color: var(--trivia-skip); }
.trivia-breakdown-item__badge--missing    { background: var(--surface-soft);     color: var(--text-soft); }

.trivia-breakdown-item__question {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 0.9rem;
    line-height: 1.5;
}

/* --- Lista de opciones del breakdown ----------------------------- */

.trivia-breakdown-options {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.trivia-breakdown-option {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
}

.trivia-breakdown-option__marker {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-soft);
    color: var(--text-soft);
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.85rem;
}

.trivia-breakdown-option__text {
    flex: 1;
}

.trivia-breakdown-option__tag {
    font-size: 0.72rem;
    color: var(--trivia-wrong);
    font-weight: 600;
    padding: 0.15rem 0.55rem;
    background: var(--surface);
    border: 1px solid var(--trivia-wrong);
    border-radius: 999px;
    white-space: nowrap;
}

/* Opción correcta — verde */
.trivia-breakdown-option--correct {
    background: var(--trivia-correct-bg);
    border-color: var(--trivia-correct);
}
.trivia-breakdown-option--correct .trivia-breakdown-option__marker {
    background: var(--trivia-correct);
    color: white;
}

/* La opción que el usuario eligió mal — roja */
.trivia-breakdown-option--chosen-wrong {
    background: var(--trivia-wrong-bg);
    border-color: var(--trivia-wrong);
}
.trivia-breakdown-option--chosen-wrong .trivia-breakdown-option__marker {
    background: var(--trivia-wrong);
    color: white;
}

/* --- Explicación -------------------------------------------------- */

.trivia-breakdown-item__explanation {
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    /* V.R.7 — tinte azul + texto dark-aware (color-mix sobre surface/text). */
    background: linear-gradient(135deg,
        color-mix(in srgb, #3b82f6 10%, var(--surface)),
        color-mix(in srgb, #3b82f6 6%, var(--surface)));
    border: 1px solid color-mix(in srgb, #3b82f6 28%, var(--border));
    border-radius: 10px;
    color: color-mix(in srgb, #3b82f6 42%, var(--text));
    font-size: 0.92rem;
    line-height: 1.55;
}
.trivia-breakdown-item__explanation strong {
    /* COH.2 — el body ya usa color-mix (42%); el strong azul oscuro fijo no
       flipaba. Un punto más de hue para el énfasis. */
    color: color-mix(in srgb, #3b82f6 55%, var(--text));
    margin-right: 0.3rem;
}

.trivia-breakdown-item__missing {
    color: var(--text-soft);
    font-style: italic;
    margin: 0;
}

/* --- CTAs post-juego --------------------------------------------- */

.trivia-result__ctas {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

/* --- Accesibilidad: respeta prefers-reduced-motion --------------- */

@media (prefers-reduced-motion: reduce) {
    .trivia-score,
    .trivia-points-banner--gain,
    .trivia-points-banner__number,
    .trivia-points-banner__sparkle {
        animation: none;
    }
}

/* --- Responsive --------------------------------------------------- */

@media (max-width: 640px) {
    .trivia-score {
        padding: 1.5rem 1rem;
    }
    .trivia-points-banner {
        padding: 1.4rem 1rem;
    }
    .trivia-breakdown-item {
        padding: 1.1rem;
    }
    .trivia-breakdown-item__header {
        gap: 0.5rem;
    }
    .trivia-result__ctas {
        flex-direction: column;
    }
    .trivia-result__ctas .btn {
        width: 100%;
    }
    /* En mobile, los sparkles del banner --gain pueden invadir el texto */
    .trivia-points-banner__sparkle {
        font-size: 1.3rem;
    }
}

/* =================================================================== */
/* Paso 35A.6 — Trivia teaser en book_detail                           */
/* =================================================================== */

.trivia-teaser {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.2rem;
    align-items: center;
    padding: 1.4rem 1.6rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    box-shadow: var(--shadow);
}

/* --- Variante jugable (gradiente índigo invitador) ----------------- */
/* V.R.7 — color-mix sobre var(--surface): adapta claro/oscuro sin @media
   (el degradé/tinte violeta se aclara en dark, el texto flipa con --text). */
.trivia-teaser--playable {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 18%, var(--surface)) 0%,
        color-mix(in srgb, var(--accent) 9%, var(--surface)) 100%);
    border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
}
.trivia-teaser--playable .trivia-teaser__icon {
    background: var(--surface);
    color: var(--accent);
}
.trivia-teaser--playable .trivia-teaser__title {
    color: color-mix(in srgb, var(--accent) 45%, var(--text));
}
.trivia-teaser--playable .trivia-teaser__lead {
    color: var(--text-soft);
}

/* --- Variante bloqueada (gris neutro, no agresivo) ----------------- */
.trivia-teaser--locked {
    background: var(--surface-soft);
    border-color: var(--border);
}
.trivia-teaser--locked .trivia-teaser__icon {
    background: var(--surface-2);
    color: var(--text-soft);
}
.trivia-teaser--locked .trivia-teaser__title {
    color: var(--text);
}
.trivia-teaser--locked .trivia-teaser__lead {
    color: var(--text-soft);
}

/* --- Icono circular ----------------------------------------------- */
.trivia-teaser__icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.7rem;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}

/* --- Cuerpo (título + lead) --------------------------------------- */
.trivia-teaser__body {
    min-width: 0;       /* permite truncar el título si hace falta */
}

.trivia-teaser__title {
    margin: 0 0 0.3rem;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
}

.trivia-teaser__lead {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* --- CTA ---------------------------------------------------------- */
.trivia-teaser__cta {
    flex-shrink: 0;
}
.trivia-teaser__cta .btn {
    white-space: nowrap;
}

/* --- Responsive: en mobile, todo apilado y CTA full-width --------- */
@media (max-width: 640px) {
    .trivia-teaser {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        gap: 0.9rem 1rem;
        padding: 1.2rem;
    }
    .trivia-teaser__cta {
        grid-column: 1 / -1;
    }
    .trivia-teaser__cta .btn {
        width: 100%;
    }
    .trivia-teaser__icon {
        width: 44px;
        height: 44px;
        font-size: 1.4rem;
    }
}

/* =================================================================== */
/* Paso 29.0 — Perfil público (estilos NUEVOS solamente)               */
/* Las clases .profile-header, .profile-avatar, .profile-header__info, */
/* .profile-header__email, .profile-header__bio, .profile-header__genres, */
/* .meta-row, .page-hero, .filter-chip, .btn YA EXISTEN — no se        */
/* redefinen. .profile-header es flex con flex-direction: column en    */
/* mobile, así que el botón Follow se ubica solo.                      */
/* =================================================================== */

/* --- Counters de seguidores / siguiendo ---------------------------- */
.profile-follow-stats {
    display: flex;
    gap: 1.2rem;
    margin: 0.6rem 0;
    font-size: 0.95rem;
    color: var(--text-soft);
}

.profile-follow-stats__item {
    /* span no clickeable hoy; preparado para volver <a> sin tocar CSS */
}

.profile-follow-stats strong {
    color: var(--text);
    font-weight: 700;
    margin-right: 0.2rem;
}

/* --- Acción a la derecha (hint propio / Follow / Login) ------------ */
.profile-follow-actions {
    align-self: center;
    margin-left: auto;          /* empuja el botón al borde derecho del flex */
}

.profile-follow-actions form {
    margin: 0;
}

.profile-follow-actions .btn {
    white-space: nowrap;
}

.profile-follow-actions__hint {
    color: var(--text-soft);
    font-style: italic;
    font-size: 0.9rem;
}

/* Mobile: el flex pasa a column (regla existente .profile-header).     */
/* En ese caso el botón es full-width.                                  */
@media (max-width: 640px) {
    .profile-follow-actions {
        margin-left: 0;
        width: 100%;
    }
    .profile-follow-actions .btn,
    .profile-follow-actions form {
        width: 100%;
    }
}

/* =================================================================== */
/* Paso 29.B — Notificaciones (badge en navbar + lista)                */
/* =================================================================== */

/* --- Badge en el navbar -------------------------------------------- */
.nav-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0.3rem 0.45rem;
    border-radius: 6px;
    transition: background-color var(--transition);
}

.nav-bell:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.nav-bell__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background-color: var(--error);
    color: var(--text-inverse);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    white-space: nowrap;
}

/* --- Toolbar (botón "marcar todas") -------------------------------- */
.notifications-toolbar {
    display: flex;
    justify-content: flex-end;
    margin: 1rem 0;
}

.notifications-toolbar form {
    margin: 0;
}

/* --- Lista --------------------------------------------------------- */
.notifications-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.notification-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 0.85rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: background var(--transition);
}

.notification-item--unread {
    background: var(--surface-soft);
    border-left: 3px solid var(--primary);
}

.notification-item__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.notification-item__avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--text-soft);
    color: var(--text-inverse);
    font-weight: 700;
    font-size: 1.05rem;
}

.notification-item__msg {
    margin: 0;
    color: var(--text);
    font-size: 0.95rem;
}

.notification-item__actor {
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
}

.notification-item__actor:hover {
    text-decoration: underline;
}

.notification-item__time {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.8rem;
    color: var(--text-soft);
}

.notification-item__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .notification-item {
        grid-template-columns: auto 1fr;
        gap: 0.75rem;
    }
    .notification-item__dot {
        grid-column: 2;
        justify-self: end;
        margin-top: -0.25rem;
    }
}

/* =================================================================== */
/* Paso 32A.4 + 32A.5 — Dinámicas semanales                            */
/* =================================================================== */

/* Tokens de tipo de dinámica. Reusan tokens existentes donde aplica
   (--accent en trivia para alinear con la paleta del 35A). */
:root {
    --dyn-trivia:    var(--accent);
    --dyn-question:  #2563eb;
    --dyn-challenge: #ea580c;
    --dyn-defense:   #db2777;
}

/* --- Card base (usado en home, foro, galería) --------------------- */

.dynamic-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 4px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    box-shadow: var(--shadow);
    transition: transform var(--transition), box-shadow var(--transition);
}
.dynamic-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}
.dynamic-card--trivia    { border-top-color: var(--dyn-trivia); }
.dynamic-card--question  { border-top-color: var(--dyn-question); }
.dynamic-card--challenge { border-top-color: var(--dyn-challenge); }
.dynamic-card--defense   { border-top-color: var(--dyn-defense); }

.dynamic-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.9rem;
    flex-wrap: wrap;
}

.dynamic-card__type-badge {
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.85rem;
    color: white;
    white-space: nowrap;
}
.dynamic-card__type-badge--trivia    { background: var(--dyn-trivia); }
.dynamic-card__type-badge--question  { background: var(--dyn-question); }
.dynamic-card__type-badge--challenge { background: var(--dyn-challenge); }
.dynamic-card__type-badge--defense   { background: var(--dyn-defense); }

.dynamic-card__countdown {
    background: var(--surface-soft);
    color: var(--text-soft);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-weight: 500;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.dynamic-card__countdown--scheduled {
    color: var(--accent);
}
.dynamic-card__countdown--soon {
    background: color-mix(in srgb, var(--warning) 14%, var(--surface));
    color: var(--warning);
    border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
}
.dynamic-card__countdown--expired {
    color: var(--text-soft);
    opacity: 0.7;
    text-decoration: line-through;
}

.dynamic-card__status {
    font-size: 0.85rem;
    color: var(--text-soft);
    font-weight: 500;
}
.dynamic-card__status--active {
    color: var(--success);
    font-weight: 600;
}

.dynamic-card__title {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text);
    line-height: 1.3;
}
.dynamic-card__title a {
    color: inherit;
}
.dynamic-card__title a:hover {
    color: var(--primary);
}

.dynamic-card__description {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.95rem;
    line-height: 1.5;
}

.dynamic-card__meta {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.9rem;
}
.dynamic-card__meta a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--border);
}
.dynamic-card__meta a:hover {
    text-decoration-color: var(--primary);
    color: var(--primary);
}

.dynamic-card__stats {
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--text-soft);
    font-size: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
}

.dynamic-card__cta {
    margin-top: auto;
    padding-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.dynamic-card__forum-link {
    color: var(--text-soft);
    font-size: 0.9rem;
}
.dynamic-card__forum-link:hover {
    color: var(--primary);
}

/* Variante compact (foro home) */
.dynamic-card--compact {
    padding: 1.1rem 1.25rem;
    gap: 0.7rem;
}
.dynamic-card--compact .dynamic-card__title {
    font-size: 1.1rem;
}

/* Variante list (galería) */
.dynamic-card--list .dynamic-card__cta .btn {
    width: 100%;
}

/* --- Bloque "Dinámica de la semana" wrapper ---------------------- */
/* (hereda section-block + section-heading; no agrega box propio) */

/* --- Galería /dinamicas/ ---------------------------------------- */

.dynamics-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.dynamics-filters {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--surface-soft);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}
.dynamics-filters .filter-group {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.dynamics-filters .filter-label {
    font-weight: 600;
    color: var(--text-soft);
    font-size: 0.85rem;
    min-width: 60px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dynamics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}

.dynamics-empty {
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--text-soft);
}
.dynamics-empty__icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 0.75rem;
}
.dynamics-empty h2 {
    color: var(--text);
    margin-bottom: 0.5rem;
}

/* Responsive */
@media (max-width: 640px) {
    .dynamics-grid {
        grid-template-columns: 1fr;
    }
    .dynamic-card__header {
        align-items: flex-start;
    }
    .dynamic-card__cta {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .dynamic-card__cta .btn {
        width: 100%;
    }
    .dynamics-filters .filter-group {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --- Dynamic detail (32A.5) --------------------------------------- */

.dynamic-detail {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.dynamic-detail__back {
    color: var(--text-soft);
    align-self: flex-start;
    transition: color var(--transition);
}
.dynamic-detail__back:hover {
    color: var(--primary);
}

.dynamic-detail__hero {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 6px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow);
}
.dynamic-detail--trivia    .dynamic-detail__hero { border-top-color: var(--dyn-trivia); }
.dynamic-detail--question  .dynamic-detail__hero { border-top-color: var(--dyn-question); }
.dynamic-detail--challenge .dynamic-detail__hero { border-top-color: var(--dyn-challenge); }
.dynamic-detail--defense   .dynamic-detail__hero { border-top-color: var(--dyn-defense); }

.dynamic-detail__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.dynamic-detail__title {
    margin: 0 0 0.75rem;
    font-size: 1.75rem;
    line-height: 1.25;
}

.dynamic-detail__description {
    color: var(--text-soft);
    line-height: 1.6;
    margin: 0 0 1rem;
}

.dynamic-detail__stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    color: var(--text-soft);
    font-size: 0.95rem;
    border-top: 1px solid var(--border);
    padding-top: 1rem;
}
.dynamic-detail__stats a {
    color: var(--primary);
}

/* --- Banners de estado/reveal ------------------------------------- */

.dynamic-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
}
.dynamic-banner__icon {
    font-size: 1.6rem;
    flex-shrink: 0;
}
.dynamic-banner strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.15rem;
}
.dynamic-banner p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.92rem;
}
.dynamic-banner > div {
    flex: 1;
}
.dynamic-banner--locked {
    background: color-mix(in srgb, var(--warning) 12%, var(--surface));
    border-color: color-mix(in srgb, var(--warning) 32%, transparent);
}
.dynamic-banner--closed {
    background: color-mix(in srgb, var(--success) 12%, var(--surface));
    border-color: color-mix(in srgb, var(--success) 32%, transparent);
}

/* --- TRIVIA: card de invitación a jugar --------------------------- */

.dynamic-trivia-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--dyn-trivia);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
}
.dynamic-trivia-card h2 {
    margin: 0 0 0.5rem;
}
.dynamic-trivia-card__meta {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    color: var(--text-soft);
    font-size: 0.9rem;
}
.dynamic-trivia-card__attempt {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--surface-soft);
    border-radius: 8px;
    color: var(--text);
}
.dynamic-trivia-card__cta {
    margin-top: 1rem;
}
.dynamic-trivia-card__missing {
    color: var(--warning);
    font-style: italic;
}

/* --- Prompt destacado --------------------------------------------- */

.dynamic-prompt {
    display: flex;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--surface-soft);
    border-radius: var(--radius);
    border-left: 4px solid var(--primary);
}
.dynamic-prompt__icon {
    font-size: 1.6rem;
    flex-shrink: 0;
}
.dynamic-prompt p {
    margin: 0;
    font-size: 1.05rem;
    color: var(--text);
    line-height: 1.5;
}

/* --- Form de respuesta -------------------------------------------- */

.dynamic-form-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
}
.dynamic-form-section h2 {
    margin: 0 0 1rem;
}
.dynamic-form-section--guest {
    background: var(--surface-soft);
    text-align: center;
    padding: 1.25rem;
}

.dynamic-response-form .form-field {
    margin-bottom: 1rem;
}
.dynamic-response-form__textarea {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    resize: vertical;
    transition: border-color var(--transition);
}
.dynamic-response-form__textarea:focus {
    border-color: var(--primary);
    outline: none;
}
.dynamic-response-form__counter {
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-soft);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.dynamic-response-form__counter.is-warning {
    color: var(--warning);
}
.dynamic-response-form__counter.is-error {
    color: var(--error);
    font-weight: 600;
}
.dynamic-response-form.is-closed .dynamic-response-form__textarea,
.dynamic-response-form.is-closed button {
    pointer-events: none;
    opacity: 0.6;
}

/* --- Listado de respuestas ---------------------------------------- */

.dynamic-responses h2 {
    margin: 0 0 1rem;
}
.dynamic-responses__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.dynamic-responses--empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-soft);
    background: var(--surface-soft);
    border-radius: var(--radius);
}

.dynamic-response {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
}
.dynamic-response--own {
    border-color: var(--primary);
    /* COH.2 — tinte primary dark-aware (era isla azul clara fija). */
    background: color-mix(in srgb, var(--primary) 7%, var(--surface));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 14%, transparent);
}
.dynamic-response__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.dynamic-response__author {
    font-weight: 600;
    color: var(--text);
}
.dynamic-response__author:hover {
    color: var(--primary);
}
.dynamic-response__date {
    color: var(--text-soft);
    font-size: 0.85rem;
}
.dynamic-response__body {
    margin: 0 0 0.75rem;
    color: var(--text);
    line-height: 1.55;
}
.dynamic-response__body p:last-child {
    margin-bottom: 0;
}
.dynamic-response__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

/* --- Comentarios inline sobre la respuesta ------------------------ */
/* Pase visual fino (claro+oscuro) PENDIENTE — esto es base funcional. */
.dynamic-comments {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}
.dynamic-comments__label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-soft);
}
.dynamic-comments__list {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
/* Sin comentarios todavía: que el hueco no empuje al cuadro de texto. */
.dynamic-comments__list:empty { margin: 0; }
.dynamic-comment {
    background: color-mix(in srgb, var(--text) 4%, var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.6rem 0.85rem;
}
.dynamic-comment__body {
    margin: 0.4rem 0 0.35rem;
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.5;
}
.dynamic-comment__body p:last-child { margin-bottom: 0; }
.dynamic-comment__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-soft);
}
.dynamic-comment__delete-form { display: inline; margin: 0; }
.dynamic-comments__form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}
.dynamic-comments__textarea {
    width: 100%;
    resize: vertical;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font: inherit;
}
.dynamic-comments__login {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-soft);
}

/* --- Link al foro ------------------------------------------------- */

.dynamic-forum-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.dynamic-forum-link__icon {
    font-size: 1.6rem;
    flex-shrink: 0;
}
.dynamic-forum-link strong {
    display: block;
    margin-bottom: 0.15rem;
}
.dynamic-forum-link p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.92rem;
}
.dynamic-forum-link > div {
    flex: 1;
}

/* --- Results page (32A.5) ----------------------------------------- */

.dynamic-results {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}
.dynamic-results__hero {
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow);
}
.dynamic-results__hero h1 {
    margin: 0.5rem 0;
}
.dynamic-results__meta {
    color: var(--text-soft);
    margin: 0 0 1.25rem;
}
.dynamic-results__stats {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 2.5rem;
    color: var(--text-soft);
}
.dynamic-results__stats strong {
    color: var(--text);
    font-size: 1.5rem;
    display: block;
}

/* --- Podio -------------------------------------------------------- */

.dynamic-podium__title,
.dynamic-ranking__title {
    margin: 0 0 1rem;
    font-size: 1.4rem;
}

.dynamic-podium__row {
    display: grid;
    gap: 1rem;
    align-items: end;
}
.dynamic-podium__row--n1 {
    grid-template-columns: minmax(240px, 360px);
    justify-content: center;
}
.dynamic-podium__row--n2 {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    max-width: 600px;
    margin: 0 auto;
}
.dynamic-podium__row--n3 {
    grid-template-columns: repeat(3, 1fr);
}

.dynamic-podium__card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem 1.25rem;
    text-align: center;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.dynamic-podium__card--rank-1 {
    background: linear-gradient(180deg, color-mix(in srgb, #facc15 22%, var(--surface)) 0%, var(--surface) 100%);
    border-color: #facc15;
    transform: translateY(-12px);
}
.dynamic-podium__card--rank-2 {
    background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
    border-color: #cbd5e1;
}
.dynamic-podium__card--rank-3 {
    background: linear-gradient(180deg, color-mix(in srgb, #fb923c 24%, var(--surface)) 0%, var(--surface) 100%);
    border-color: #fb923c;
}
.dynamic-podium__medal {
    font-size: 2.5rem;
    line-height: 1;
}
.dynamic-podium__rank {
    color: var(--text-soft);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.dynamic-podium__author {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text);
}
.dynamic-podium__author:hover {
    color: var(--primary);
}
.dynamic-podium__metrics {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    color: var(--text-soft);
    font-size: 0.92rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.dynamic-podium__snippet {
    margin: 0.75rem 0 0;
    color: var(--text-soft);
    font-style: italic;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* --- Ranking del 4° en adelante ----------------------------------- */

.dynamic-ranking__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    counter-reset: rank-counter;
}
.dynamic-ranking__item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.85rem 1.25rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem 1rem;
    align-items: center;
}
.dynamic-ranking__rank {
    color: var(--text-soft);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.dynamic-ranking__author {
    color: var(--text);
    font-weight: 600;
}
.dynamic-ranking__author:hover {
    color: var(--primary);
}
.dynamic-ranking__likes {
    color: var(--text-soft);
    font-size: 0.95rem;
}
.dynamic-ranking__snippet {
    grid-column: 1 / -1;
    margin: 0.25rem 0 0;
    color: var(--text-soft);
    font-style: italic;
    font-size: 0.9rem;
}

.dynamic-results__footer-cta {
    text-align: center;
    padding-top: 0.5rem;
}

/* Responsive — detail/results */
@media (max-width: 768px) {
    .dynamic-detail__hero,
    .dynamic-results__hero {
        padding: 1.5rem 1.25rem;
    }
    .dynamic-detail__title {
        font-size: 1.4rem;
    }
    /* RESP.2 — --n2 también colapsa: con 2 ganadores el row pedía mínimo
       480px+gap (2 × minmax(240px,1fr)) y desbordaba en 360px. */
    .dynamic-podium__row--n2,
    .dynamic-podium__row--n3 {
        grid-template-columns: 1fr;
    }
    .dynamic-podium__card--rank-1 {
        transform: none;
    }
    .dynamic-banner,
    .dynamic-forum-link {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    .dynamic-banner > div,
    .dynamic-forum-link > div {
        width: 100%;
    }
}

/* =================================================================== */
/* Paso 32A.6 — Lectiverso de la semana                                */
/* =================================================================== */

/* --- CTA secundario "Ver toda la semana" en home block ------------- */
.dynamic-card__week-link {
    color: var(--text-soft);
    font-size: 0.9rem;
    text-decoration: none;
    align-self: flex-start;
}
.dynamic-card__week-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* --- Sección al pie de detail y results ---------------------------- */
.dynamic-week-link {
    margin-top: 1.5rem;
    text-align: center;
}
.dynamic-week-link__cta {
    display: inline-block;
    padding: 0.85rem 1.5rem;
    background: var(--surface-soft);
    color: var(--text);
    border: 1px dashed var(--border);
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    transition: background var(--transition), border-color var(--transition);
}
.dynamic-week-link__cta:hover {
    background: var(--surface);
    border-color: var(--primary);
    color: var(--primary);
}

/* --- Wrapper general del digest ------------------------------------ */
.weekly-digest {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 0 0 2.5rem;
}

/* --- Hero ---------------------------------------------------------- */
.weekly-digest__hero {
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface-soft) 100%);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2rem 1.75rem;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.weekly-digest__title {
    font-size: 1.85rem;
    margin: 0;
    color: var(--text);
}
.weekly-digest__range {
    margin: 0;
    color: var(--text-soft);
    font-size: 1rem;
}
.weekly-digest__live-banner {
    margin-top: 0.5rem;
    padding: 0.85rem 1.1rem;
    /* COH.2 — banner ámbar dark-aware; la barra de acento queda dorada. */
    background: color-mix(in srgb, #f59e0b 14%, var(--surface));
    border-left: 4px solid #f59e0b;
    border-radius: 10px;
    color: color-mix(in srgb, #d97706 45%, var(--text));
    font-size: 0.95rem;
}
.weekly-digest__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}
.weekly-digest__nav-link {
    color: var(--text-soft);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
}
.weekly-digest__nav-link:hover {
    color: var(--primary);
}
.weekly-digest__nav-link--disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* --- Summary (4 stats) --------------------------------------------- */
.weekly-digest__summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.weekly-digest__stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.weekly-digest__stat-num {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}
.weekly-digest__stat-label {
    font-size: 0.85rem;
    color: var(--text-soft);
    text-transform: lowercase;
}

/* --- Bloque genérico ----------------------------------------------- */
.weekly-digest__block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.5rem 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.weekly-digest__block-title {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
    color: var(--text);
}
.weekly-digest__block-empty {
    margin: 0;
    color: var(--text-soft);
    font-style: italic;
    font-size: 0.95rem;
}

/* --- Estado vacío grande (solo bloque dinámica) -------------------- */
.weekly-digest__empty {
    text-align: center;
    padding: 1.5rem 1rem;
    color: var(--text-soft);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
}
.weekly-digest__empty-icon {
    font-size: 2.5rem;
    line-height: 1;
}

/* --- Podio inline (en bloque dinámica) ----------------------------- */
.weekly-digest__podium {
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    background: var(--surface-soft);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.weekly-digest__podium-label {
    margin: 0;
    font-weight: 700;
    color: var(--text);
}
.weekly-digest__podium-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.weekly-digest__podium-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.weekly-digest__podium-medal {
    font-size: 1.2rem;
}
.weekly-digest__podium-meta {
    color: var(--text-soft);
    font-size: 0.9rem;
    margin-left: auto;
}
.weekly-digest__see-more {
    align-self: flex-start;
    margin-top: 0.5rem;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
}
.weekly-digest__see-more:hover {
    text-decoration: underline;
}

/* --- Libros: grid ---------------------------------------------------- */
.weekly-digest__books-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}
.weekly-digest__book-card {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    transition: transform var(--transition);
}
.weekly-digest__book-card:hover {
    transform: translateY(-2px);
}
.weekly-digest__book-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--text);
    height: 100%;
}
.weekly-digest__book-cover {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    background: var(--surface);
}
.weekly-digest__book-cover--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--text-soft);
}
.weekly-digest__book-meta {
    padding: 0.6rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.85rem;
}
.weekly-digest__book-meta strong {
    line-height: 1.3;
}
.weekly-digest__book-meta span {
    color: var(--text-soft);
}

/* --- Reseñas: lista ------------------------------------------------- */
.weekly-digest__reviews-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.weekly-digest__review-card {
    border-left: 3px solid var(--primary);
    padding: 0.75rem 1rem;
    background: var(--surface-soft);
    border-radius: 0 10px 10px 0;
}
.weekly-digest__review-header {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    align-items: center;
}
.weekly-digest__review-rating {
    color: #f59e0b;
    letter-spacing: 0.1em;
    font-size: 0.95rem;
}
.weekly-digest__review-likes {
    color: var(--text-soft);
    font-size: 0.9rem;
}
.weekly-digest__review-title {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
}
.weekly-digest__review-title a {
    color: var(--text);
    text-decoration: none;
}
.weekly-digest__review-title a:hover {
    color: var(--primary);
}
.weekly-digest__review-meta {
    margin: 0 0 0.4rem;
    font-size: 0.88rem;
    color: var(--text-soft);
}
.weekly-digest__review-snippet {
    margin: 0;
    color: var(--text);
    font-size: 0.93rem;
    line-height: 1.55;
}

/* --- Trivia: top destacado + lista -------------------------------- */
.weekly-digest__trivia-top {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    /* V.R.7 — el stop #faf5ff (violeta claro) rompía en dark → color-mix. */
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--surface-soft)) 0%, var(--surface-soft) 100%);
    border: 1px solid var(--dyn-trivia);
    border-radius: 12px;
}
.weekly-digest__trivia-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}
.weekly-digest__trivia-num {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--dyn-trivia);
    font-variant-numeric: tabular-nums;
}
.weekly-digest__trivia-total {
    color: var(--text-soft);
    font-size: 1rem;
    margin-top: 0.15rem;
}
.weekly-digest__trivia-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.weekly-digest__trivia-info p {
    margin: 0;
}
.weekly-digest__trivia-user {
    font-weight: 700;
}
.weekly-digest__trivia-trivia {
    color: var(--text-soft);
    font-size: 0.92rem;
}
.weekly-digest__trivia-pct {
    color: var(--dyn-trivia);
    font-weight: 600;
    font-size: 0.9rem;
}
.weekly-digest__trivia-rest {
    margin: 0.75rem 0 0;
    padding-left: 1.5rem;
    color: var(--text-soft);
    font-size: 0.92rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* --- Foro: cards -------------------------------------------------- */
.weekly-digest__forum-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.weekly-digest__forum-card {
    padding: 0.75rem 1rem;
    background: var(--surface-soft);
    border-radius: 10px;
    border: 1px solid var(--border);
}
.weekly-digest__forum-title {
    margin: 0 0 0.3rem;
    font-size: 1.05rem;
}
.weekly-digest__forum-title a {
    color: var(--text);
    text-decoration: none;
}
.weekly-digest__forum-title a:hover {
    color: var(--primary);
}
.weekly-digest__forum-meta {
    margin: 0 0 0.3rem;
    font-size: 0.88rem;
    color: var(--text-soft);
}
.weekly-digest__forum-stats {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.88rem;
}

/* --- Top usuarios ------------------------------------------------- */
.weekly-digest__users-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    counter-reset: weekly-rank;
}
.weekly-digest__user-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.65rem 0.85rem;
    background: var(--surface-soft);
    border-radius: 8px;
}
.weekly-digest__user-rank {
    color: var(--text-soft);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.weekly-digest__user-name {
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
}
.weekly-digest__user-name:hover {
    color: var(--primary);
}
.weekly-digest__user-points {
    color: var(--primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.weekly-digest__user-entries {
    color: var(--text-soft);
    font-size: 0.85rem;
}
.weekly-digest__users-footnote {
    margin: 0.5rem 0 0;
    text-align: right;
    font-size: 0.9rem;
}
.weekly-digest__users-footnote a {
    color: var(--primary);
    text-decoration: none;
}
.weekly-digest__users-footnote a:hover {
    text-decoration: underline;
}

/* --- Footer nav ---------------------------------------------------- */
.weekly-digest__footer-nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

/* --- Responsive --------------------------------------------------- */
@media (max-width: 768px) {
    .weekly-digest__summary {
        grid-template-columns: repeat(2, 1fr);
    }
    .weekly-digest__title {
        font-size: 1.4rem;
    }
    .weekly-digest__trivia-top {
        flex-direction: column;
        text-align: center;
    }
    .weekly-digest__user-row {
        grid-template-columns: auto 1fr auto;
    }
    .weekly-digest__user-entries {
        grid-column: 2 / -1;
        text-align: right;
    }
}

/* ====================================================================
   Paso 38A — Ranking propio de trivia, stats y bloque de profile
==================================================================== */

/* --- Ranking público --------------------------------------------- */
.trivia-ranking-page {
    max-width: 980px;
    margin: 0 auto;
    padding: 2rem 1rem;
}
.trivia-ranking__header {
    text-align: center;
    margin-bottom: 2rem;
}
/* COH.2 — eyebrow compartido; .trivia-stats__kicker era un duplicado exacto. */
.trivia-ranking__kicker,
.trivia-stats__kicker {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-soft);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.trivia-ranking__title {
    font-size: 2.2rem;
    margin: 0.4rem 0 0.6rem;
}
.trivia-ranking__subtitle {
    color: var(--text-soft);
    max-width: 640px;
    margin: 0 auto;
}
.trivia-ranking__table-wrapper {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    /* RESP.2 — overflow-x auto (paridad con .ranking-table-wrapper de rewards):
       con hidden, la tabla de 5 columnas se CLIPEABA en 360px sin forma de
       ver las celdas de la derecha. */
    overflow-x: auto;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.trivia-ranking__table {
    width: 100%;
    border-collapse: collapse;
}
.trivia-ranking__table thead th {
    background: var(--surface-2);
    padding: 0.85rem 1rem;
    text-align: left;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border);
}
.trivia-ranking__table tbody td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}
.trivia-ranking__row--podium-1 {
    background: linear-gradient(90deg, rgba(250, 204, 21, 0.12), transparent 60%);
}
.trivia-ranking__row--podium-2 {
    background: linear-gradient(90deg, rgba(156, 163, 175, 0.14), transparent 60%);
}
.trivia-ranking__row--podium-3 {
    background: linear-gradient(90deg, rgba(217, 119, 6, 0.12), transparent 60%);
}
.trivia-ranking__pos {
    font-size: 1.1rem;
    font-weight: 700;
    width: 60px;
}
.trivia-ranking__user a {
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
}
.trivia-ranking__user a:hover { color: #2563eb; }
.trivia-ranking__accuracy {
    font-size: 1.05rem;
}
.trivia-ranking__accuracy-detail {
    display: block;
    font-size: 0.78rem;
    color: var(--text-soft);
    font-weight: 400;
}
.trivia-ranking__cta {
    margin-top: 1.5rem;
    text-align: center;
}

/* --- Stats personales -------------------------------------------- */
.trivia-stats-page {
    max-width: 980px;
    margin: 0 auto;
    padding: 2rem 1rem;
}
.trivia-stats__header {
    text-align: center;
    margin-bottom: 2rem;
}
.trivia-stats__title {
    font-size: 2.2rem;
    margin: 0.4rem 0 0.6rem;
}
.trivia-stats__subtitle {
    color: var(--text-soft);
    max-width: 640px;
    margin: 0 auto;
}
.trivia-stats__hero {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}
.trivia-stats__hero-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.4rem 1rem;
    text-align: center;
}
.trivia-stats__hero-card--main {
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    color: #fff;
    border-color: transparent;
}
.trivia-stats__hero-value {
    display: block;
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
}
.trivia-stats__hero-label {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    opacity: 0.85;
}
.trivia-stats__section {
    margin-bottom: 2.5rem;
}
.trivia-stats__section-title {
    font-size: 1.4rem;
    margin: 0 0 1rem;
}
.trivia-stats__badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.trivia-badge {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 1.2rem;
    text-align: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.trivia-badge--owned {
    border-color: var(--badge-color, #facc15);
    box-shadow: var(--shadow);
}
.trivia-badge--owned:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}
.trivia-badge--locked {
    opacity: 0.55;
    background: var(--surface-2);
}
.trivia-badge__icon {
    display: block;
    font-size: 2.6rem;
    margin-bottom: 0.5rem;
}
.trivia-badge__name {
    font-size: 1rem;
    margin: 0 0 0.4rem;
}
.trivia-badge__desc {
    font-size: 0.85rem;
    color: var(--text-soft);
    margin: 0 0 0.6rem;
}
.trivia-badge__date {
    font-size: 0.75rem;
    color: #9ca3af;
    font-style: italic;
}
.trivia-stats__rank-list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.trivia-stats__rank-row {
    display: grid;
    grid-template-columns: 2fr auto 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    transition: background 0.12s ease;
}
.trivia-stats__rank-row:last-child { border-bottom: none; }
.trivia-stats__rank-row:hover { background: var(--surface-2); }
.trivia-stats__rank-book { font-weight: 600; }
.trivia-stats__rank-diff {
    font-size: 0.8rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-weight: 600;
}
.trivia-stats__rank-diff--easy   { --tint: #16A34A; background: color-mix(in srgb, var(--tint) 16%, var(--surface)); color: color-mix(in srgb, var(--tint) 72%, var(--text)); }
.trivia-stats__rank-diff--medium { --tint: #D97706; background: color-mix(in srgb, var(--tint) 16%, var(--surface)); color: color-mix(in srgb, var(--tint) 72%, var(--text)); }
.trivia-stats__rank-diff--hard   { --tint: #DC2626; background: color-mix(in srgb, var(--tint) 16%, var(--surface)); color: color-mix(in srgb, var(--tint) 72%, var(--text)); }
.trivia-stats__rank-accuracy {
    font-weight: 700;
}
.trivia-stats__rank-accuracy small {
    font-weight: 400;
    color: var(--text-soft);
    margin-left: 0.3rem;
}
.trivia-stats__rank-attempts {
    font-size: 0.85rem;
    color: var(--text-soft);
}
.trivia-stats__cta {
    margin-top: 2rem;
    text-align: center;
}

/* --- Bloque de stats dentro de profile.html ---------------------- */
/* Paso F.3: la cuarta card (badges) se sacó — viven en .badges-block. */
.trivia-stats-block .trivia-stats-block__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.trivia-stats-block .stat-card--accent {
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    color: #fff;
}
.trivia-stats-block .stat-card--accent .stat-value,
.trivia-stats-block .stat-card--accent .stat-label { color: #fff; }
.trivia-stats-block__cta {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .trivia-stats__hero { grid-template-columns: 1fr; }
    .trivia-stats-block__grid { grid-template-columns: 1fr; }
    .trivia-stats__rank-row {
        grid-template-columns: 1fr auto;
        row-gap: 0.4rem;
    }
    .trivia-stats__rank-attempts { grid-column: 2; text-align: right; }
    .trivia-stats__rank-accuracy { grid-column: 1; }
    .trivia-ranking__table thead { display: none; }
    .trivia-ranking__table tbody td { padding: 0.6rem 0.8rem; font-size: 0.9rem; }
}
/* ==========================================================================
   Paso 38B.16 / 38B.17 — Bloque "Trivias para vos"
   Variantes:
     .is-carousel   → home: scroll horizontal con snap, sin JS.
     .is-grid       → profile: grid responsivo de cards.
   ========================================================================== */
.trivias-for-you__hint {
    color: var(--muted, var(--text-soft));
    margin: 0 0 1rem;
    font-size: 0.95rem;
}

.trivias-for-you__list {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.trivias-for-you.is-carousel .trivias-for-you__list {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    padding: 0.25rem 0.25rem 0.75rem;
    margin: 0 -0.25rem;
}

.trivias-for-you.is-carousel .trivia-card {
    flex: 0 0 260px;
    scroll-snap-align: start;
}

.trivias-for-you.is-grid .trivias-for-you__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.trivias-for-you .trivia-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.trivias-for-you .trivia-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.trivias-for-you .trivia-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}
/* 38B.16.1 — Chip de estado del usuario en la trivia (nueva / progreso / hecha). */
.trivia-card__status {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}
.trivia-card__status--new {
    background: color-mix(in srgb, var(--accent) 16%, var(--surface));
    color: var(--accent);
}
.trivia-card__status--progress {
    background: color-mix(in srgb, var(--warning) 20%, var(--surface));
    color: var(--warning);
}
.trivia-card__status--done {
    background: color-mix(in srgb, var(--success) 16%, var(--surface));
    color: var(--success);
}

.trivias-for-you .trivia-card .badge-difficulty {
    /* COH.2 — pill dorado dark-aware + radius 999px (era 8px, rompía el pill). */
    --tint: #D97706;
    background: color-mix(in srgb, var(--tint) 16%, var(--surface));
    color: color-mix(in srgb, var(--tint) 72%, var(--text));
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.trivias-for-you .trivia-card__title {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.3;
}
.trivias-for-you .trivia-card__title a {
    color: inherit;
    text-decoration: none;
}
.trivias-for-you .trivia-card__title a:hover {
    text-decoration: underline;
}

.trivias-for-you .trivia-card__book {
    margin: 0;
    color: var(--muted, var(--text-soft));
    font-size: 0.9rem;
}

.trivias-for-you .trivia-card__meta {
    margin: 0;
    color: var(--muted, var(--text-soft));
    font-size: 0.82rem;
}

.trivias-for-you__pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    gap: 1rem;
    font-size: 0.9rem;
}
.trivias-for-you__pagination a {
    text-decoration: none;
}

@media (max-width: 768px) {
    .trivias-for-you.is-carousel .trivia-card { flex-basis: 220px; }
    .trivias-for-you.is-grid .trivias-for-you__list {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* === Paso 38D: estado "jugada" + tu mejor score en cards de trivia === */
.trivia-card__header-left {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.trivia-card__played-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #1b6f3a;
    background: #e6f5ec;
    border: 1px solid #b9e0c8;
    border-radius: 999px;
    line-height: 1.4;
    white-space: nowrap;
}

/* === Paso 38E: UX de respuestas en dinámicas === */
.dynamic-form-section__heading {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.dynamic-form-section__heading h2 { margin: 0; }
/* AUD-VIS.1 — .dynamic-form-section__badge borrada: 0 usos en templates. */
.dynamic-response { position: relative; }
.dynamic-response__header-right {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.dynamic-response__pill {
    background: #eaf2ff;
    color: #1e4a8c;
    border: 1px solid #b7d0f3;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.dynamic-response__edited {
    font-style: italic;
    color: var(--text-soft);
    font-size: 0.85rem;
}
.dynamic-response-form__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.dynamic-response__own-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
    font-size: 0.9rem;
}
.dynamic-response__delete-form { display: inline; margin: 0; }

/* === Paso 38E.2: card en modo edit inline === */
.dynamic-response--editing {
    /* COH.2 — estado de edicion dark-aware; el !important era redundante:
       misma especificidad que --own pero declarado despues, ya ganaba por cascada. */
    box-shadow: 0 0 0 2px color-mix(in srgb, #3b82f6 25%, transparent);
    border-color: color-mix(in srgb, #3b82f6 35%, var(--border));
    background: color-mix(in srgb, #3b82f6 8%, var(--surface));
}
.dynamic-response-form--inline {
    margin-top: 0.75rem;
}
.dynamic-response-form--inline .dynamic-response-form__textarea {
    width: 100%;
}
.btn-link {
    background: none;
    border: none;
    padding: 0;
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
    color: var(--text-soft);
}
.btn-link:hover { color: var(--text-strong, #111); }
.btn-danger-link { color: #b54545; }
.btn-danger-link:hover { color: #7a2222; }


/* ==================================================================
   Paso 29.X Chat A — Settings hub y forms de cuenta
   ================================================================== */

.settings-hub {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.settings-hub__summary {
    padding: 1.25rem 1.5rem;
}
.settings-hub__summary h2 {
    margin: 0 0 0.75rem;
    font-size: 1.15rem;
}
.settings-hub__dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem 1.5rem;
    margin: 0;
}
.settings-hub__dl > div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.settings-hub__dl dt {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-soft);
}
.settings-hub__dl dd {
    margin: 0;
    font-weight: 600;
    word-break: break-word;
}
.settings-hub__hint {
    margin: 1rem 0 0;
    font-size: 0.85rem;
    color: var(--text-soft);
}

.settings-hub__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.settings-hub__card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.settings-hub__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}
.settings-hub__card h3 {
    margin: 0;
    font-size: 1.05rem;
}
.settings-hub__card p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-soft);
    flex-grow: 1;
}
.settings-hub__icon {
    font-size: 1.6rem;
    line-height: 1;
}
.settings-hub__cta {
    margin-top: 0.5rem;
    font-weight: 600;
    color: var(--accent, #1e4a8c);
    font-size: 0.9rem;
}
/* AUD-VIS.1 — .settings-hub__card--disabled y __cta--muted borradas: 0 usos
   en templates (previstas para tarjetas de ajustes deshabilitadas que nunca
   se llegaron a renderizar). */

/* Account forms (profile_edit, password_change, email_change) */
.account-form p {
    margin: 0 0 1rem;
}
.account-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.3rem;
}
.account-form input[type="text"],
.account-form input[type="email"],
.account-form input[type="password"],
.account-form input[type="url"],
.account-form textarea {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font: inherit;
    background: var(--surface); color: var(--text);
    box-sizing: border-box;
}
.account-form .helptext {
    display: block;
    font-size: 0.8rem;
    color: var(--text-soft);
    margin-top: 0.25rem;
}
.account-form ul.errorlist {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5rem;
    color: #b54545;
    font-size: 0.85rem;
}
.account-form ul {
    /* Para CheckboxSelectMultiple de favorite_genres */
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.4rem 0.75rem;
}
.account-form ul li label {
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}
.account-form__actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

/* ==================================================================
   Paso 29.X Chat B — Forgot password y baja de cuenta
   ================================================================== */

.settings-hub__card--danger {
    /* Acento sutil para diferenciar la card de baja del resto del hub */
    border-left: 3px solid var(--error);
}

.account-delete__warning {
    background: rgba(192, 57, 43, 0.08);
    border-left: 4px solid var(--error);
    padding: 1rem 1.25rem;
    margin: 1.25rem 0 1.5rem;
    border-radius: 4px;
}
.account-delete__warning strong {
    display: block;
    margin-bottom: 0.5rem;
}
.account-delete__warning ul {
    margin: 0;
    padding-left: 1.25rem;
}
.account-delete__warning li {
    margin-bottom: 0.25rem;
}

/* ==================================================================
   Paso 29.X.1 — Tagline, libro favorito, website + UX de géneros
   ================================================================== */

/* Char counter del tagline */
.account-form__counter {
    display: block;
    font-size: 0.8rem;
    color: var(--text-soft);
    margin-top: 0.25rem;
    text-align: right;
}
.account-form__counter--warn { color: #b45309; }
.account-form__counter--error { color: #b91c1c; font-weight: 600; }

/* Preview del libro favorito en el form */
.favorite-book-preview {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: var(--surface-2);
    border-radius: 8px;
    align-items: flex-start;
}
.favorite-book-preview__cover {
    width: 60px;
    height: 90px;
    object-fit: cover;
    border-radius: 4px;
    background: var(--border);
    flex-shrink: 0;
}
.favorite-book-preview__cover[hidden] { display: none; }
.favorite-book-preview__meta { display: flex; flex-direction: column; gap: 0.2rem; }
.favorite-book-preview__title { font-size: 1rem; }
.favorite-book-preview__year { color: var(--text-soft); font-size: 0.85rem; }
.favorite-book-preview__synopsis {
    font-size: 0.85rem;
    color: var(--text-soft);
    margin: 0.3rem 0 0;
}

/* Chip-checkbox: selector de géneros estilizado como filter-chip */
.account-form__chips {
    border: 0;
    padding: 0;
    margin: 0 0 1rem;
}
.account-form__chips legend {
    font-weight: 600;
    margin-bottom: 0.25rem;
    padding: 0;
}
.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.chip-checkbox {
    display: inline-block;
    cursor: pointer;
    margin: 0;
    font-weight: 400;
}
.chip-checkbox input[type="checkbox"] {
    /* A11y: hidden visualmente pero focusable por teclado */
    position: absolute;
    clip: rect(0,0,0,0);
    clip-path: inset(50%);
    width: 1px; height: 1px;
    overflow: hidden;
    white-space: nowrap;
}
.chip-checkbox input[type="checkbox"]:focus-visible + .filter-chip {
    outline: 2px solid var(--primary, #3b82f6);
    outline-offset: 2px;
}

/* Render del hero (perfil propio + público) */
.profile-header__tagline {
    font-style: italic;
    color: var(--text-soft);
    margin: 0.1rem 0 0.5rem;
    font-size: 0.95rem;
}
.profile-header__favorite-book {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface-2);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    margin: 0.5rem 0;
    transition: background var(--transition);
}
.profile-header__favorite-book:hover { background: var(--border); }
.profile-header__favorite-book__cover {
    width: 36px;
    height: 54px;
    object-fit: cover;
    border-radius: 3px;
}
.profile-header__favorite-book small {
    display: block;
    color: var(--text-soft);
    font-size: 0.75rem;
}
.profile-header__favorite-book__year { color: var(--text-soft); font-weight: 400; }
.profile-header__website { color: inherit; }


/* =====================================================================
   Paso 34 — Usuarios similares con afinidad explicable
   ===================================================================== */

.similar-users-page__subtitle {
    color: var(--text-soft);
    margin: 0 0 1.5rem;
    max-width: 60ch;
}

.similar-users-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 720px) {
    .similar-users-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
    .similar-users-list { grid-template-columns: repeat(3, 1fr); }
}

/* Variante compacta para el bloque home: lista 1-col más densa */
.similar-users-list--compact {
    grid-template-columns: 1fr;
}
@media (min-width: 720px) {
    .similar-users-list--compact { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
    .similar-users-list--compact { grid-template-columns: repeat(3, 1fr); }
}

.similar-user-card {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1rem;
    transition: transform var(--transition), box-shadow var(--transition);
}
.similar-user-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.similar-user-card__avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.similar-user-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.similar-user-card__avatar-fallback {
    font-weight: 700;
    color: var(--text-soft);
    font-size: 1.2rem;
}

.similar-user-card__body {
    flex: 1;
    min-width: 0;       /* permite que el contenido se trunque sin desbordar */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.similar-user-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.similar-user-card__name {
    font-weight: 700;
    color: var(--text, #0f172a);
    text-decoration: none;
    word-break: break-word;
}
.similar-user-card__name:hover { text-decoration: underline; }

.similar-user-card__affinity {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: help;
}

.similar-user-card__tagline {
    font-style: italic;
    color: var(--text-soft);
    margin: 0;
    font-size: 0.9rem;
}

.similar-user-card__shared {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
}
.similar-user-card__shared-label {
    color: var(--text-soft);
    font-weight: 600;
    margin-right: 0.1rem;
}

/* Variantes del filter-chip ya existente, diferenciadas por color sutil */
/* V.R.7 — tintes dark-aware (color-mix sobre surface/text). */
.similar-user-card__chip--author {
    background: color-mix(in srgb, var(--accent) 16%, var(--surface));
    color: color-mix(in srgb, var(--accent) 58%, var(--text));
}
.similar-user-card__chip--route {
    background: color-mix(in srgb, var(--warning) 18%, var(--surface));
    color: color-mix(in srgb, var(--warning) 60%, var(--text));
}

.similar-user-card__follow-form {
    margin: 0.25rem 0 0;
}
.similar-user-card__follow-form .btn-sm {
    padding: 0.35rem 0.8rem;
    font-size: 0.85rem;
}

.similar-users-empty {
    max-width: 560px;
    margin: 1rem auto;
    text-align: center;
}

/* === Paso 36 — Intención lectora === */
/* Hub /que-leer/ con 5 cards de intención + grid responsive de resultados. */

.que-leer-page__subtitle {
    color: var(--text-soft);
    max-width: 720px;
    margin-bottom: 1.6rem;
    line-height: 1.55;
}

.que-leer-hub {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}
@media (min-width: 700px) {
    .que-leer-hub {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1100px) {
    .que-leer-hub {
        grid-template-columns: repeat(3, 1fr);
    }
}

.que-leer-card {
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    padding: 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.que-leer-card:hover {
    border-color: var(--accent, #6d28d9);
    box-shadow: var(--shadow);
}
.que-leer-card--active {
    border-color: var(--accent, #6d28d9);
    background: var(--surface-soft, #f9fafb);
}

.que-leer-card__title {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.3;
}

.que-leer-card__hint {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.92rem;
    line-height: 1.5;
}

.que-leer-card__form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: auto;
}
.que-leer-card__form select {
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 0.45rem;
    background: var(--surface); color: var(--text);
    font-size: 0.93rem;
}

.que-leer-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.que-leer-card__chips input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.que-leer-card__chips .filter-chip:has(input:checked) {
    background: var(--accent, #6d28d9);
    color: var(--on-accent, #fff);  /* VP — contraste en dark (texto oscuro sobre violeta claro) */
}
.que-leer-card__chips .filter-chip {
    cursor: pointer;
}

.que-leer-card__locked {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.9rem;
    line-height: 1.5;
}
.que-leer-card__locked a {
    font-weight: 600;
}

.que-leer-results {
    margin-top: 2rem;
}

.que-leer-result__heading {
    margin: 0 0 0.6rem;
    font-size: 1.25rem;
    line-height: 1.35;
}

.que-leer-result__subheading {
    margin: 1.8rem 0 0.5rem;
    font-size: 1.05rem;
    color: var(--text-soft);
}

.que-leer-result__description {
    color: var(--text-soft);
    margin: 0 0 1rem;
    line-height: 1.55;
}

.que-leer-empty {
    background: var(--surface-soft, #f9fafb);
    border: 1px dashed var(--border);
    border-radius: 0.7rem;
    padding: 1.2rem;
    color: var(--text-soft);
    text-align: center;
}

.que-leer-starter {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 1rem;
    max-width: 320px;
}
.que-leer-starter__caption {
    color: var(--text-soft);
    font-size: 0.88rem;
    margin: 0;
    font-style: italic;
}

/* a11y helper si el proyecto aún no la tiene */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}


/* =====================================================================
   Paso F.1 — Loop social cerrado (seguidores/siguiendo + counters)
   ===================================================================== */

/* Counters del hero ahora son <a>: heredan color y agregan hover sutil. */
.profile-follow-stats__item {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.profile-follow-stats__item:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.profile-follow-stats__item:focus-visible {
    outline: 2px solid var(--accent, #2563eb);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Card básica: reusa la estructura visual de .similar-user-card. Solo
   agrega un pill "te sigue" propio (modificador, no duplicación). */
.user-card-basic__pill-reciprocal {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-soft);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: help;
}

/* Back link arriba del hero en las páginas de listas. */
.page-hero__back {
    display: inline-block;
    margin-bottom: 0.5rem;
    color: var(--text-soft);
    font-size: 0.9rem;
    text-decoration: none;
}
.page-hero__back:hover { text-decoration: underline; }


/* =====================================================================
   Paso F.3 — Landing de /recompensas/ + bloque de medallas all-cats
   ===================================================================== */

/* Hero de la landing — pequeño ajuste tipográfico del resumen */
.rewards-hero__summary {
    font-size: 1.05rem;
    color: var(--text-soft);
}

/* --- Bloque "Tus medallas" (perfil + landing) --------------------- */
.badges-block__categories {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
.badges-block__category {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem 1.25rem;
}
.badges-block__category-title {
    margin: 0 0 0.6rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.badges-block__category-icon {
    font-size: 1.25rem;
}
.badges-block__category-count {
    color: var(--text-soft);
    font-weight: 400;
    font-size: 0.9rem;
}
.badges-block__row {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.badges-block__badge {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /* S.2 — mismo disco que la vitrina del perfil (aro 1.5px + tinte 26). */
    border: 1.5px solid;
    font-size: 1.15rem;
    cursor: help;
}
.badges-block__empty {
    margin: 0;
    font-size: 0.85rem;
    color: #9ca3af;
    font-style: italic;
}

/* --- "¿Cómo ganar puntos?" --------------------------------------- */
.rewards-rules__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
.rewards-rules__item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.85rem 1rem;
}
.rewards-rules__points {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    padding: 0.3rem 0.6rem;
    background: #dcfce7;
    color: #166534;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95rem;
}
.rewards-rules__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.rewards-rules__action {
    font-weight: 600;
    color: var(--text);
}
.rewards-rules__desc {
    color: var(--text-soft);
    font-size: 0.85rem;
}

/* --- CTAs finales de la landing ---------------------------------- */
.rewards-ctas {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 768px) {
    .badges-block__categories { grid-template-columns: 1fr; }
    .rewards-rules__list      { grid-template-columns: 1fr; }
}


/* =====================================================================
   Paso F.5 — Onboarding post-registro (wizard de géneros)
   ===================================================================== */

/* Pitch que explica para qué se usan los géneros (debajo del fieldset) */
.onboarding-card__pitch {
    margin-top: 1rem;
    color: var(--text-soft);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Botones del wizard: "Saltar" a la izquierda, "Listo" a la derecha.
   Override deliberado del flex-start por defecto de .account-form__actions
   para crear una jerarquía visual entre acción primaria y secundaria. */
.onboarding-actions {
    justify-content: space-between;
    margin-top: 1.5rem;
}


/* =================================================================== */
/* Paso F.4.a — /libros/<slug>/resenas/                                 */
/* Breadcrumb + toolbar (sort dropdown + chips de rating + CTA) + back  */
/* =================================================================== */
.reviews-breadcrumb {
    font-size: 0.92rem;
    color: var(--text-soft);
    margin: 0 0 0.5rem 0;
}
.reviews-breadcrumb a {
    color: inherit;
    text-decoration: none;
}
.reviews-breadcrumb a:hover {
    text-decoration: underline;
}
.reviews-breadcrumb__sep {
    margin: 0 0.4rem;
    opacity: 0.6;
}

.book-reviews-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
}

.reviews-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1.25rem;
    margin: 0;
}

.reviews-sort-label {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-soft);
}
.reviews-sort-label select {
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface); color: var(--text);
    font-size: 0.95rem;
    color: inherit;
    cursor: pointer;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    min-width: 180px;
}

.reviews-rating-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.reviews-toolbar-cta {
    align-self: flex-end;
}

.reviews-back {
    margin-top: 1.5rem;
    text-align: center;
}


/* =================================================================== */
/* Paso F.4.b — Mood tags + favorite_quote                             */
/* =================================================================== */

/* Estado checked global de chip-checkbox: el chip se "tilda" visualmente.
   Cierra un gap latente del Paso F.5 (onboarding de géneros) que tenía
   el mismo patrón sin el feedback visual del :checked. */
.chip-checkbox input[type="checkbox"]:checked + .filter-chip {
    background: var(--primary, #3b82f6);
    color: var(--on-accent, white);  /* VP — contraste en dark (texto oscuro sobre rosa claro) */
}

/* Quote opcional dentro del review_card. Serif + comilla decorativa
   para diferenciar visualmente del content (sans-serif) y darle peso
   editorial a la cita. */
.review-quote {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    color: var(--text-soft);
    border-left: 3px solid var(--primary, #3b82f6);
    margin: 0.75rem 0;
    padding: 0.4rem 0 0.4rem 0.9rem;
    position: relative;
    font-size: 0.95rem;
    line-height: 1.5;
}
.review-quote::before {
    content: "\201C";  /* " */
    color: var(--primary, #3b82f6);
    opacity: 0.35;
    font-size: 2rem;
    line-height: 0;
    position: absolute;
    left: 0.2rem;
    top: 0.9rem;
}

/* Chips de mood marcados en una reseña: visualmente más sutiles que
   los chips clickeables del filtro (no son interactivos). Color fondo
   más claro y sin hover prominente. */
.review-moods {
    margin: 0.5rem 0 0.4rem;
}
.review-moods__chip {
    background: var(--surface-2);
    color: var(--text-soft);
    cursor: default;
}

/* Fila de filtros por mood en /libros/ y /libros/<slug>/resenas/.
   Layout horizontal con scroll si los 15 chips no entran. */
.mood-filter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}
.mood-filter-row__label {
    font-weight: 600;
    color: var(--text-soft);
    font-size: 0.9rem;
}
.mood-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Bloque "Los lectores lo describen como…" en book_detail. */
.aggregate-moods {
    margin: 0.5rem 0 1rem;
    padding: 0.75rem 0.9rem;
    background: var(--surface-2);
    border-radius: 10px;
    border-left: 3px solid var(--primary, #3b82f6);
}
.aggregate-moods__heading {
    margin: 0 0 0.5rem;
    font-weight: 600;
    color: var(--text-soft);
    font-size: 0.95rem;
}
.aggregate-moods__chip {
    text-decoration: none;
}
.aggregate-moods__count {
    opacity: 0.7;
    font-size: 0.8em;
    margin-left: 0.1rem;
}

/* Checkbox-row del has_spoilers en review_form: label + checkbox inline. */
.checkbox-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.checkbox-row label {
    margin: 0;
    white-space: nowrap;   /* que "Contiene spoilers" no se parta en 2 líneas */
}
.checkbox-row input[type="checkbox"] {
    flex: 0 0 auto;        /* que el checkbox no crezca y empuje la etiqueta */
    width: auto;
    margin: 0;
}
.form-help {
    color: var(--text-soft);
    font-size: 0.85rem;
    display: block;
    margin-top: 0.25rem;
}

/* =========================================================
   Paso F.6 — "Quién está leyendo esto ahora"
   Bloque social dentro de book_detail / sección 2.
   Avatares circulares apilados con leve solape (margin-left
   negativo) + counter "+M más están leyéndolo".
   ========================================================= */
.currently-reading-block {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.currently-reading-block__heading {
    font-weight: 600;
    color: var(--text-soft);
    font-size: 0.9rem;
    margin: 0 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.currently-reading-block__avatars {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.currently-reading-block__avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--border);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    margin-left: -8px;   /* leve solape estilo "stack" */
    transition: transform 0.12s ease;
}
.currently-reading-block__avatar:first-of-type {
    margin-left: 0;
}
.currently-reading-block__avatar:hover {
    transform: translateY(-2px);
    z-index: 2;
}
.currently-reading-block__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.currently-reading-block__avatar-fallback {
    font-weight: 700;
    color: var(--text-soft);
    font-size: 1rem;
}
.currently-reading-block__counter {
    color: var(--text-soft);
    font-size: 0.9rem;
    margin-left: 0.5rem;
}

/* AUD-VIS.1 — acá vivía la toolbar de orden del Paso F.6 (.catalog-toolbar +
   .catalog-sort-form*). FILT.1 la reemplazó por la barra .filter-bar /
   .filter-select y la dejó huérfana: verificado 0 usos en templates. */

/* =================================================================
 * R.X.a — Rutas: progreso, badges, tabs, cards
 * ================================================================= */

/* Hero del route_detail: CTA inline + form sin botón "block" --------- */
.hero-cta-form {
    display: inline-block;
    margin: 0;
}

.route-progress-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
}
.route-progress-chip--completed {
    background: rgba(34, 197, 94, 0.18);
    color: #d1fae5;
}
/* R.X.a.1 — chip "Abandonaste el X" en hero del route_detail. */
.route-progress-chip--abandoned {
    background: rgba(148, 163, 184, 0.25);
    color: var(--text-inverse);
}

/* Counter "Forma parte de N rutas" en book_detail -------------------- */
.route-count-highlight {
    color: var(--accent, #6366f1);
    font-weight: 700;
}

/* Tabs CSS-only con :target en "Mis rutas" --------------------------- */
.route-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.25rem;
}
.route-tabs__tab {
    padding: 0.5rem 1rem;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 6px 6px 0 0;
    background: transparent;
    color: var(--text-soft);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.route-tabs__tab:hover {
    color: var(--text);
    background: var(--surface-2);
}
/* Pestaña activa — la marca la lleva aria-selected, que togglea route_tabs.js.
   Reemplaza el mecanismo :target/:has (hacía saltar el scroll y dejaba el
   panel Activas en blanco al volver). */
.route-tabs__tab[aria-selected="true"] {
    color: var(--text);
    border-bottom-color: var(--accent);
}
/* Paneles: el JS togglea `hidden`. Sin JS, todos quedan visibles (degrada ok). */
.route-tabs__panel[hidden] {
    display: none;
}

.route-tabs__empty {
    color: var(--text-soft);
    font-style: italic;
    padding: 1rem 0;
}

/* Card de un UserRouteProgress -------------------------------------- */
.route-progress-card {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.route-progress-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}
.route-progress-card__header h3 {
    margin: 0;
    font-size: 1.05rem;
}
.route-progress-card__counter {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.9rem;
    font-weight: 500;
}
.route-progress-card__counter--completed {
    color: #166534;
}
.route-progress-card__counter--abandoned {
    color: #92400e;
}
.route-progress-card__next {
    margin: 0;
    font-size: 0.9rem;
}
/* Barra de progreso de la ruta (X/Y libros). Gradiente de marca en activas,
   apagada en abandonadas (muestra hasta dónde se llegó). */
.route-progress-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}
.route-progress-bar__fill {
    display: block;
    height: 100%;
    background: var(--gradient);
    border-radius: inherit;
    transition: width 0.4s ease;
}
.route-progress-bar--muted .route-progress-bar__fill {
    background: var(--text-soft);
    opacity: 0.55;
}

/* Toggle de privacidad inline (solo perfil propio) ------------------ */
.route-privacy-toggle {
    margin: 0;
}
.route-privacy-toggle__btn {
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--border);
    background: var(--surface); color: var(--text);
    border-radius: 999px;
    font-size: 0.75rem;
    cursor: pointer;
    color: var(--text-soft);
    transition: background 0.15s, border-color 0.15s;
}
.route-privacy-toggle__btn:hover {
    background: var(--surface-2);
    border-color: #94a3b8;
}
.route-privacy-toggle__btn--private {
    background: color-mix(in srgb, #f59e0b 14%, var(--surface));
    border-color: color-mix(in srgb, #f59e0b 38%, var(--border));
    color: color-mix(in srgb, #d97706 45%, var(--text));
}

/* ============================================================
   Paso F.7 — Identidad social inline (estilo card de foro)
   Partial unificador `_user_byline.html` + bandera en hero
   + sección "Logros destacados" en form de edición.
   ============================================================ */
.user-byline {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0.5rem 0;
}
.user-byline__avatar-link {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    line-height: 0;
    text-decoration: none;
}
.user-byline__avatar {
    border-radius: 50%;
    object-fit: cover;
    background: var(--gradient); /* V.3.6 — avatar placeholder BookTok (era gris) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.user-byline--sm .user-byline__avatar { width: 44px; height: 44px; font-size: 1rem; }
.user-byline--md .user-byline__avatar { width: 56px; height: 56px; font-size: 1.25rem; }
.user-byline--lg .user-byline__avatar { width: 72px; height: 72px; font-size: 1.45rem; }

/* Dot online — decorativo (siempre visible), borde para destacar sobre el avatar */
.user-byline__online-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    background: #22c55e;
    border: 2px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.4);
}
.user-byline--sm .user-byline__online-dot { width: 10px; height: 10px; }
.user-byline--lg .user-byline__online-dot { width: 14px; height: 14px; }

.user-byline__meta {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
    flex: 1;
}
.user-byline__username {
    color: inherit;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.15em;
    line-height: 1.2;
}
.user-byline--sm .user-byline__username { font-size: 1.05em; }
.user-byline--md .user-byline__username { font-size: 1.2em; }
.user-byline--lg .user-byline__username { font-size: 1.35em; }
.user-byline__username:hover { text-decoration: underline; }

/* Fila de chips coloreados (país + badges) */
.user-byline__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}
.user-byline__chips:empty { display: none; }

.user-byline-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.15;
    cursor: default;
    border: 1px solid transparent;
    white-space: nowrap;
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04);
    transition: transform 0.15s ease;
}
.user-byline-chip:hover { transform: translateY(-1px); }

/* COH.9 — Chip de país: la BANDERA como imagen self-hosted (django-countries),
   sin la píldora oscura. El emoji caía al código "PY" en Windows. Se muestra
   sola (sin fondo de píldora), como en un foro. */
.user-byline-chip--country {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    padding: 0;
    gap: 0;
}
.user-byline-chip--country:hover { transform: none; }
.user-byline-chip__flag-img {
    display: block;
    height: 14px;
    width: auto;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.15);
}
/* AUD-VIS.1 — .user-byline-chip__code borrada: 0 usos en templates. */

/* Chip de badge: icon + label */
.user-byline-chip__icon { font-size: 1rem; line-height: 1; }
.user-byline-chip__label { font-size: 0.72rem; }

/* Reviews en columna única: las cards tienen contenido largo (favorite_quote,
   moods, byline rico) y leen mejor stackeadas que en grid-2/3. F.7.1. */
.reviews-stack {
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* IMPORTANTE: fallback PRIMERO — las clases específicas por categoría
   tienen que venir DESPUÉS para sobreescribirlo (misma especificidad,
   último gana en CSS). */
.user-byline-chip--badge {
    background: var(--surface-2);
    color: var(--text-soft);
    border-color: var(--border);
}
/* COH.2 — chips pastel migrados a la fórmula --tint (color-mix sobre --surface/
   --text/transparent) que flipea, igual que los .badge-* vecinos. */
.user-byline-chip--badge-trivia {
    --tint: #D97706;
    background: color-mix(in srgb, var(--tint) 16%, var(--surface));
    color: color-mix(in srgb, var(--tint) 72%, var(--text));
    border-color: color-mix(in srgb, var(--tint) 30%, transparent);
}
.user-byline-chip--badge-reading {
    --tint: #2563EB;
    background: color-mix(in srgb, var(--tint) 16%, var(--surface));
    color: color-mix(in srgb, var(--tint) 72%, var(--text));
    border-color: color-mix(in srgb, var(--tint) 30%, transparent);
}
.user-byline-chip--badge-social {
    --tint: #16A34A;
    background: color-mix(in srgb, var(--tint) 16%, var(--surface));
    color: color-mix(in srgb, var(--tint) 72%, var(--text));
    border-color: color-mix(in srgb, var(--tint) 30%, transparent);
}
.user-byline-chip--badge-dynamic {
    --tint: #DB2777;
    background: color-mix(in srgb, var(--tint) 16%, var(--surface));
    color: color-mix(in srgb, var(--tint) 72%, var(--text));
    border-color: color-mix(in srgb, var(--tint) 30%, transparent);
}

.user-byline__tagline {
    color: var(--text-soft);
    font-style: italic;
    font-size: 0.9em;
    line-height: 1.35;
    margin-top: 0.1rem;
}

/* Hero del perfil: país (bandera + nombre) */
.profile-header__country {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.25rem 0 0;
    color: var(--text-soft);
    font-size: 0.95rem;
}
/* COH.9b — bandera como imagen self-hosted también en el hero (reemplaza al
   span-emoji .profile-header__flag). Hereda de .user-byline-chip__flag-img;
   acá un toque más grande porque el hero tiene más aire que un byline. */
.profile-header__flag-img { height: 18px; }

/* Form de edición: lista de "Logros destacados" — chip-like con disabled */
.featured-badges-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.featured-badges-list__option {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.featured-badges-list__option:hover {
    background: var(--surface-2);
}
.featured-badges-list__option input[type="checkbox"]:checked + span {
    color: var(--text);
    font-weight: 600;
}
.featured-badges-list__option:has(input[type="checkbox"]:checked) {
    background: color-mix(in srgb, #3b82f6 14%, var(--surface));
    border-color: color-mix(in srgb, #3b82f6 35%, var(--border));
}
.featured-badges-list__option:has(input[type="checkbox"]:disabled) {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--surface-2);
}

/* ============================================================
   Paso R.X.a.1 — Botones inline en cards de rutas
   Chip de estado en route_card + form Abandonar en _route_progress_card.
   ============================================================ */
.route-card__action {
    margin-top: 0.75rem;
}
.route-card__action .btn { width: 100%; }
.route-card__action form { margin: 0; }

/* Chips de estado del progress del user respecto a una ruta */
.badge-route-progress {
    border: 1px solid transparent;
    font-weight: 600;
}
.badge-route-progress--active {
    --tint: #2563EB;
    background: color-mix(in srgb, var(--tint) 16%, var(--surface));
    color: color-mix(in srgb, var(--tint) 72%, var(--text));
    border-color: color-mix(in srgb, var(--tint) 30%, transparent);
}
.badge-route-progress--completed {
    --tint: #16A34A;
    background: color-mix(in srgb, var(--tint) 16%, var(--surface));
    color: color-mix(in srgb, var(--tint) 72%, var(--text));
    border-color: color-mix(in srgb, var(--tint) 30%, transparent);
}
.badge-route-progress--abandoned {
    background: var(--surface-2);
    color: var(--text-soft);
    border-color: var(--border);
}

/* Form Abandonar dentro de la card del perfil "Mis rutas → Activas" */
.route-progress-card__abandon-form {
    margin: 0.6rem 0 0;
}
.route-progress-card__abandon-form .btn { display: inline-flex; }

/* ============================================================
   Paso R.X.c.1 — Estimación de duración + sort dropdown rutas
   ============================================================ */

/* Chip "🗓️ Aprox. N semanas" en la meta-row de cada card del listado. */
.route-card__duration {
    color: var(--text-soft);
    font-size: 0.9rem;
    white-space: nowrap;
}

/* R.X.c.1.1 — descripción de la ruta dentro del hero (antes vivía en una
   card aparte). Color suave para no competir con el título. */
.hero-description {
    margin: 0.5rem 0 1rem;
    color: var(--text-soft);
    font-size: 1rem;
    line-height: 1.5;
    max-width: 65ch;
}
.hero-description p { margin: 0.25rem 0; }

/* R.X.c.1.1 — fila de chips de metadata del hero (libros / duración / curador).
   Reemplaza la `.meta-row` plana que sólo decía "2 libros" con texto gris flaco.
   Cada chip tiene fondo translúcido sobre el degradé del hero, icon a la
   izquierda y se apila en flex con gap consistente. */
.route-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0 1.25rem;
}
.route-hero__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    /* COH.2 — chip apoyado en .page-hero (--gradient-soft, oscuro en dark).
       El pill blanco fijo + texto var(--text) casi blanco quedaba ilegible.
       color-mix sobre --surface/--text auto-flipea con el tema. */
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 5%, transparent);
}
.route-hero__chip small {
    opacity: 0.7;
    margin-left: 0.15rem;
    font-size: 0.85em;
    font-weight: 400;
}

/* Botón outline rojo para acciones destructivas en el hero ("Abandonar ruta").
   Color semántico (rojo) contenido (outline, no sólido) — visible sin gritar.
   Borde 2px con alpha 0.7: peso claro de botón sin competir con el primario.
   Reusable en futuros heroes que tengan acción destructiva inline. */
.btn-danger-outline {
    background: rgba(255, 255, 255, 0.65);
    color: #b91c1c;                         /* red-700 */
    border: 2px solid rgba(185, 28, 28, 0.7);
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-danger-outline:hover {
    background: rgba(185, 28, 28, 0.1);
    border-color: #b91c1c;
    color: #991b1b;                         /* red-800 */
}

/* Ajuste del contenedor de acciones para que el gap entre CTA y links
   secundarios sea consistente y no se vea pegado. */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
}

/* AUD-VIS.1 — acá vivía el sort dropdown de /libros/rutas/ (.route-sort-form).
   Igual que .catalog-sort-form en /libros/, FILT.1 lo reemplazó por la barra
   .filter-bar / .filter-select: verificado 0 usos en templates. */

/* =================================================================
 * R.X.c.2 — Bloque "Rutas para vos" + chip de afinidad
 * Section-block diferenciado visualmente con un acento cálido amarillo
 * para señalar "recomendación personalizada" sin recurrir al accent
 * del proyecto (que se usa para CTAs). El chip 💛 hereda padding/radius
 * de .badge y solo overridea colores.
 * ================================================================= */
.section-block--recommended {
    background: linear-gradient(135deg, color-mix(in srgb, var(--warning) 14%, var(--surface)) 0%, var(--surface-2) 100%);
    border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
    border-radius: 12px;
    /* V.R.6 — el marco no tenía padding: el contenido quedaba pegado al borde
       ámbar. Le damos aire para que la card "respire" dentro del marco. */
    padding: clamp(1rem, 2.5vw, 1.5rem);
}
.section-block--recommended .section-kicker {
    color: color-mix(in srgb, var(--warning) 72%, var(--text));
}
.section-block--recommended .section-heading h2 {
    color: var(--text-strong);
}
.recommended-subheading {
    color: var(--text-soft);
    margin: 0.25rem 0 1.25rem;
    font-size: 0.95rem;
}
.recommended-empty {
    text-align: center;
    padding: 1.5rem 1rem;
    color: var(--text-soft);
}
.recommended-empty p {
    margin-bottom: 0.85rem;
}
.badge-route-affinity {
    background: color-mix(in srgb, var(--warning) 16%, var(--surface));
    color: color-mix(in srgb, var(--warning) 72%, var(--text));
    border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
}

/* =================================================================
 * Paso A.6.b.1 — Vitrina plana de medallas personalizable
 * (drag-drop + botones ↑/↓ + ocultar). El modo edición solo aparece
 * en el perfil propio; en ajenos es read-only y sin ocultos.
 * ================================================================= */
.badge-showcase__hint {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.85rem;
}
/* A.6.b.3 — medallas STICKER die-cut (dirección elegida por el user).
   Cada medalla es un sticker circular: emoji grande sobre disco tinteado con el
   color del badge (inline, alpha 26 → color controlado, sin "arcoíris"), borde
   blanco troquelado (--badge-diecut, dark-aware) + sombra = efecto despegable,
   con una inclinación mínima alterna. El nombre va debajo. Preserva drag-drop:
   la unidad sigue siendo .badge-showcase__item[.js-badge-item]. */
.badge-showcase {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem 1rem;
    margin-top: 0.75rem;
}
.badge-showcase__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    width: 92px;
    text-align: center;
    color: var(--text);
}
.badge-showcase__icon {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
                 "Twemoji Mozilla", "EmojiOne Color", sans-serif;
    /* Disco: tinte del color (inline, alpha 26) + borde blanco troquelado. */
    width: 4.4rem;
    height: 4.4rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 4px solid var(--badge-diecut);
    box-shadow: 0 4px 11px var(--badge-diecut-shadow),
                inset 0 0 0 1.5px rgba(0, 0, 0, 0.05);
    font-size: 2rem;
    line-height: 1;
    transition: transform 0.15s ease;
}
/* Inclinación mínima alterna → look "pegado a mano". */
.badge-showcase__item:nth-child(3n+1) .badge-showcase__icon { transform: rotate(-4deg); }
.badge-showcase__item:nth-child(3n+2) .badge-showcase__icon { transform: rotate(3deg); }
.badge-showcase__item:nth-child(3n)   .badge-showcase__icon { transform: rotate(-1.5deg); }
.badge-showcase__item:hover .badge-showcase__icon { transform: rotate(0) scale(1.05); }
.badge-showcase__name {
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.badge-showcase__tier {
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-soft);
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
/* A.6.b.4 — pill de tier coloreado por medalla (color-mix → dark-aware).
   Cada tier declara --tc; bg/texto/borde se derivan sobre --surface/--text.
   El emoji de medalla va por ::before (template sin lógica extra). */
.badge-showcase__tier--bronze    { --tc: #c2410c; }
.badge-showcase__tier--silver    { --tc: #8b8b8b; }
.badge-showcase__tier--gold      { --tc: #d4a017; }
.badge-showcase__tier--legendary { --tc: #06b6d4; }
.badge-showcase__tier--bronze,
.badge-showcase__tier--silver,
.badge-showcase__tier--gold,
.badge-showcase__tier--legendary {
    background: color-mix(in srgb, var(--tc) 16%, var(--surface));
    color: color-mix(in srgb, var(--tc) 62%, var(--text));
    border: 1px solid color-mix(in srgb, var(--tc) 34%, var(--border));
}
.badge-showcase__tier--bronze::before    { content: "🥉 "; }
.badge-showcase__tier--silver::before    { content: "🥈 "; }
.badge-showcase__tier--gold::before      { content: "🥇 "; }
.badge-showcase__tier--legendary::before { content: "💎 "; }
/* Badge oculto (solo visible en el perfil propio): atenuado + disco punteado. */
.badge-showcase__item--hidden { opacity: 0.42; }
.badge-showcase__item--hidden .badge-showcase__icon {
    border-style: dashed;
    box-shadow: none;
}
/* Modo edición. */
.badge-showcase[data-editable] .badge-showcase__item { cursor: grab; }
.badge-showcase__item--dragging { opacity: 0.6; cursor: grabbing; }
.badge-showcase__controls {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.05rem;
}
@media (prefers-reduced-motion: reduce) {
    .badge-showcase__icon { transition: none; }
    .badge-showcase__item:hover .badge-showcase__icon { transform: none; }
}
.badge-showcase__btn {
    border: 1px solid var(--border);
    background: var(--surface); color: var(--text);
    border-radius: 6px;
    padding: 0.1rem 0.35rem;
    font-size: 0.8rem;
    line-height: 1.1;
    cursor: pointer;
    color: var(--text, #0f172a);
    transition: background 0.12s, border-color 0.12s;
}
.badge-showcase__btn:hover {
    background: var(--surface-2);
    border-color: #cbd5e1;
}
.badge-showcase__btn[aria-busy="true"] {
    opacity: 0.5;
    pointer-events: none;
}

/* =================================================================
 * Paso A.6.b.2 — Panel "Estás cerca de…" (next-badge progress)
 * ================================================================= */
.next-badges__list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 0.5rem;
}
.next-badges__item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 0.9rem;
    border-radius: 12px;
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    border-left: 4px solid var(--badge-color, #2563eb);
}
.next-badges__icon {
    font-size: 1.6rem;
    line-height: 1;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
                 "Twemoji Mozilla", "EmojiOne Color", sans-serif;
    flex-shrink: 0;
}
.next-badges__body { flex: 1; min-width: 0; }
.next-badges__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.next-badges__name { font-size: 0.95rem; }
.next-badges__tier {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-soft);
    white-space: nowrap;
}
.next-badges__bar {
    height: 8px;
    width: 100%;
    background: var(--border);
    border-radius: 999px;
    overflow: hidden;
}
.next-badges__fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary, #2563eb), var(--accent, #7c3aed));
    transition: width 0.4s ease;
}
.next-badges__hint {
    display: block;
    margin-top: 0.3rem;
    color: var(--text-soft);
    font-size: 0.8rem;
}

/* ===================================================================
   Paso S.2 — Rediseño de la card de reseña: "autor arriba, contenido
   protagonista". Header con byline + fecha, rating en estrellas junto
   al título, footer separado por divisor.
   =================================================================== */
.review-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
/* El byline ocupa el ancho disponible; la fecha no se encoge. */
.review-card__top .user-byline {
    margin: 0;
    flex: 1;
    min-width: 0;
    align-items: center;
}
.review-card__meta {
    flex-shrink: 0;
    text-align: right;
    color: var(--text-soft);
    font-size: 0.85rem;
    line-height: 1.3;
    padding-top: 0.2rem;
}
.review-card__date { white-space: nowrap; }

/* Rating en estrellas + título en una fila. */
.review-card__heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.7rem;
    margin-top: 0.9rem;
}
.review-card__heading h3 {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.25;
}
.review-stars {
    color: #f59e0b;
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    line-height: 1;
    flex-shrink: 0;
}

/* Footer de acciones separado del contenido por un divisor sutil. */
.review-card__footer {
    margin-top: 1.1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
}
.review-card__footer .card-actions { margin: 0; }

/* En móvil la fecha baja debajo del autor para no apretar el header. */
@media (max-width: 480px) {
    .review-card__top { flex-direction: column; gap: 0.5rem; }
    .review-card__meta { text-align: left; padding-top: 0; }
}

/* =================================================================
 * Paso A.7.b — Card "Tu racha 🔥" en /recompensas/ + chip en perfil.
 * Tokens only → dark-aware sin @media (estándar track V).
 * ================================================================= */
.streak-card__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.streak-card__stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    text-align: center;
}
.streak-card__num {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.streak-card__num--alive {
    background: linear-gradient(120deg, #f97316, var(--primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.streak-card__label { color: var(--text-soft); font-size: 0.85rem; }
.streak-card__status { font-size: 0.78rem; font-weight: 700; }
.streak-card__status--ok   { color: var(--success); }
.streak-card__status--risk { color: color-mix(in srgb, var(--warning) 75%, var(--text)); }

/* V.R.11 — shop como panel "escarcha" (tinte azul hielo, dark-aware por
   color-mix): saldo como mini-stat a la izquierda + CTA primario a la
   derecha, caption abajo. Antes eran 3 líneas sueltas sin jerarquía. */
.streak-card__shop {
    background: color-mix(in srgb, #38bdf8 8%, var(--surface));
    border: 1px solid color-mix(in srgb, #38bdf8 26%, var(--border));
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.streak-card__shop-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.streak-card__balance {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0;
}
.streak-card__balance-num {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, #0284c7 55%, var(--text));
}
.streak-card__balance-label { color: var(--text-soft); font-size: 0.85rem; }
.streak-card__shop .btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.streak-card__hint { color: var(--text-soft); margin-left: 0.5rem; }
.streak-card__how {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.82rem;
    border-top: 1px dashed color-mix(in srgb, #38bdf8 30%, var(--border));
    padding-top: 0.55rem;
}

@media (max-width: 640px) {
    .streak-card__grid { grid-template-columns: 1fr; }
}

/* Chip 🔥 en el hero del perfil (junto al rank-chip). */
.streak-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    background: color-mix(in srgb, #f97316 14%, var(--surface));
    color: color-mix(in srgb, #f97316 62%, var(--text));
    border: 1px solid color-mix(in srgb, #f97316 34%, var(--border));
}

/* =================================================================
 * Paso A.9 — Título equipable: pill junto al nombre (byline + hero).
 * El color viene del badge vía --title-color (inline). color-mix
 * sobre tokens → dark-aware sin @media (estándar track V).
 * ================================================================= */
.user-byline__title-chip {
    display: inline-block;
    padding: 0.05rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.5;
    vertical-align: middle;
    background: color-mix(in srgb, var(--title-color, var(--accent)) 15%, var(--surface));
    color: color-mix(in srgb, var(--title-color, var(--accent)) 60%, var(--text));
    border: 1px solid color-mix(in srgb, var(--title-color, var(--accent)) 35%, var(--border));
    max-width: 26ch;   /* COH.9 — más aire: "Explorador de rutas" entraba justo y se cortaba. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* V.R.8 — el chip vive como hijo directo de flex-columns
       (.profile-header__info y .user-byline__meta): sin esto se ESTIRA
       al ancho del contenedor en vez de abrazar su texto. */
    align-self: flex-start;
    width: fit-content;
}
/* COH.9 — dentro de la fila de chips del byline (flex-row, align-items:center)
   el título debe centrarse, no top-alinearse. */
.user-byline__chips .user-byline__title-chip { align-self: center; }
.user-byline__title-chip--hero {
    font-size: 0.8rem;
    padding: 0.15rem 0.75rem;
    margin: 0.15rem 0 0.35rem;
    max-width: none;
}

/* V.R.9 — fila única de identidad en el hero del perfil (título+rango+racha).
   Reemplaza el apilado vertical uno-por-línea. */
.profile-chips-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0.1rem 0 0.15rem;
}
.profile-chips-row .user-byline__title-chip--hero { margin: 0; }


/* ======================================================================
   Paso ED.1 — Markdown liviano: contenido rico + toolbar del editor
   ====================================================================== */

/* Contenido renderizado por |render_rich (comentarios, temas, reseñas
   completas, respuestas de dinámicas) + la vista previa del editor. */
.rich-text p { margin: 0 0 0.6rem; }
.rich-text p:last-child { margin-bottom: 0; }
.rich-text blockquote {
    margin: 0 0 0.6rem;
    padding: 0.45rem 0.9rem;
    border-left: 3px solid var(--primary);
    background: var(--surface-soft);
    border-radius: 0 10px 10px 0;
    font-style: italic;
}
.rich-text blockquote p:last-child { margin-bottom: 0; }
.rich-text ul, .rich-text ol { margin: 0 0 0.6rem; padding-left: 1.4rem; }
.rich-text li { margin: 0.15rem 0; }
.rich-text a { color: var(--primary); font-weight: 600; text-decoration: none; }
.rich-text a:hover { text-decoration: underline; }
.rich-text a.mention { color: var(--accent); }
.rich-text strong { color: var(--text-strong); }

/* Toolbar inyectada por md_editor.js sobre textareas .js-md-editor. */
.md-editor__bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    padding: 0.35rem 0.5rem;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
}
.md-editor__btn {
    border: 0;
    background: transparent;
    color: var(--text);
    min-width: 30px;
    height: 28px;
    padding: 0 0.45rem;
    border-radius: 7px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.md-editor__btn--italic { font-style: italic; font-family: Georgia, serif; }
.md-editor__btn:hover { background: var(--surface); color: var(--primary); }
.md-editor__btn:focus-visible,
.md-editor__tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.md-editor__spacer { flex: 1; }
.md-editor__tab {
    border: 0;
    background: transparent;
    color: var(--text-soft);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.3rem 0.7rem;
    border-radius: 7px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.md-editor__tab[aria-selected="true"] { color: var(--primary); background: var(--surface); }

/* El textarea "se pega" a la barra: sin redondeo arriba. */
textarea.md-editor__area { border-top-left-radius: 0; border-top-right-radius: 0; }

.md-editor__preview {
    min-height: 130px;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 10px 10px;
    background: var(--surface);
}
.md-editor__loading { color: var(--text-soft); font-size: 0.9rem; }
.md-editor__hint {
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
    color: var(--text-soft);
    font-family: ui-monospace, Consolas, monospace;
}

/* ==============================================================
   Paso H.1 — Preferencias de notificación (toggle del email digest)
   ============================================================== */
.notification-prefs__row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0 1rem;
    cursor: pointer;
}
.notification-prefs__row input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
    accent-color: var(--primary);
    cursor: pointer;
}
.notification-prefs__text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.notification-prefs__help {
    font-size: 0.85rem;
    color: var(--text-soft);
    line-height: 1.4;
}

/* ==============================================================
   Paso H.4 — Onboarding del primer libro
   ============================================================== */
.first-book-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
}
.first-book-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.first-book-item .book-card {
    flex: 1;                     /* iguala alturas para alinear los botones */
}
.first-book-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.first-book-actions__btn {
    width: 100%;
}
.first-book-skip {
    margin-top: 1.5rem;
    text-align: center;
}
.first-book-skip a {
    color: var(--text-soft);
    text-decoration: underline;
}

/* ==============================================================
   Paso M.3 — Páginas de error (404/403/400; la 500 es standalone)
   ============================================================== */
.error-page {
    max-width: 480px;
    margin: 3rem auto;
    text-align: center;
}
.error-page__icon {
    font-size: 3.5rem;
    display: block;
}
.error-page__code {
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--text-soft);
}
.error-page__title {
    margin: 0.25rem 0 0.75rem;
    font-size: 1.7rem;
}
.error-page__text {
    line-height: 1.6;
    color: var(--text-soft);
}
.error-page__actions {
    margin-top: 1.5rem;
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ==============================================================
   V.R.12 — Reorganización del editor de perfil
   ============================================================== */

/* FIX: el display:flex de la preview pisaba el atributo hidden — la caja
   quedaba siempre visible con el <img src=""> roto aunque no hubiera
   libro elegido. El [hidden] del contenedor debe ganar. */
.favorite-book-preview[hidden] {
    display: none;
}

/* Layout propio: 720px. El auth-layout (480px) es para login/registro;
   un form de 9 campos necesita aire. */
.profile-edit-layout {
    max-width: 720px;
    margin: 0 auto;
}

.profile-edit__section {
    padding: 1.25rem 0;
    border-top: 1px solid var(--border);
}
.profile-edit__section:first-of-type {
    border-top: none;
    padding-top: 0;
}
.profile-edit__section-title {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Dos campos cortos lado a lado (avatar + país); colapsa en móvil. */
.profile-edit__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 560px) {
    .profile-edit__row {
        grid-template-columns: 1fr;
    }
}

.profile-edit__badges-empty {
    margin: 0;
    padding: 0.9rem 1rem;
    background: var(--surface-2);
    border-radius: 8px;
    color: var(--text-soft);
    font-size: 0.9rem;
}

/* ==========================================================================
   Paso AUT.1 — Índice de autores + ficha con stats y fan strip
   Variables del tema en todo el bloque → dark mode sin overrides.
   ========================================================================== */

/* Lead del hero del índice */
.author-index-lead {
    margin-top: 0.6rem;
    max-width: 560px;
    opacity: 0.9;
}

/* Avatar fallback cuando el autor no tiene photo_url: inicial del nombre,
   mismas dimensiones que .author-card__photo para que la grilla no baile. */
.author-card__photo--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    color: var(--text-soft);
    font-size: 2.2rem;
    font-weight: 700;
}

/* Línea de datos de la card del índice (count de libros) */
.author-card__meta {
    margin: 0.2rem 0 0.4rem;
    color: var(--text-soft);
    font-size: 0.9rem;
}

/* Chip editorial "Por dónde empezar" (solo con best_starter cargado) */
.author-card__starter-chip {
    display: inline-block;
    padding: 0.15rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    font-size: 0.78rem;
    margin-bottom: 0.4rem;
}

/* Bio truncada de la card */
.author-card__bio {
    margin: 0.3rem 0 0;
    color: var(--text-soft);
    font-size: 0.85rem;
}

/* Stats de la obra en el hero de la ficha (segunda meta-row) */
.author-hero-stats {
    margin-top: 0.35rem;
}

/* Fan strip — "leíste N libros de este autor" */
.author-fan-strip {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
}
.author-fan-strip__icon {
    font-size: 1.5rem;
    line-height: 1;
}
.author-fan-strip__text {
    margin: 0;
}


/* ==================================================================== */
/* Paso L.1 — Palabra del día (Track L).                                */
/* Tarjeta sticker (estilo track V) del quiz diario en la home. Usa los  */
/* tokens de tema (--surface, --border, --primary…) → dark-aware solo.   */
/* ==================================================================== */
.daily-word-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, var(--surface)) 0%,
                                 color-mix(in srgb, var(--accent) 8%, var(--surface)) 100%);
    box-shadow: var(--shadow);
    padding: 1.5rem 1.6rem;
}
.daily-word-card__head {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 0.5rem;
}
.daily-word-card__eyebrow {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--primary);
}
.daily-word-card__word {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.05;
    margin: 0;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.daily-word-card__prompt {
    margin: 0 0 0.9rem;
    color: var(--text-soft);
    font-weight: 600;
}
.daily-word-card__cta {
    margin: 0.9rem 0 0;
}

/* Botonera de opciones */
.daily-word-options {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 640px) {
    .daily-word-options { grid-template-columns: repeat(3, 1fr); }
}
.daily-word-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.daily-word-option:hover:not(:disabled),
.daily-word-option:focus-visible:not(:disabled) {
    border-color: var(--primary);
    transform: translateY(-2px);
    outline: none;
}
.daily-word-option:disabled { cursor: default; }
.daily-word-option--locked {
    cursor: default;
    color: var(--text-soft);
    opacity: 0.75;
}
.daily-word-option--correct {
    border-color: var(--success);
    background: color-mix(in srgb, var(--success) 16%, var(--surface));
    color: var(--text-strong);
    font-weight: 700;
}
.daily-word-option--wrong {
    border-color: var(--error);
    background: color-mix(in srgb, var(--error) 14%, var(--surface));
    color: var(--text-strong);
}

/* Bloque de resultado (server-render + swap del JS) */
.daily-word-result {
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}
.daily-word-result--correct { border-color: var(--success); }
.daily-word-result--wrong   { border-color: var(--error); }
.daily-word-result--reveal {
    animation: dailyWordReveal 0.28s ease both;
}
@keyframes dailyWordReveal {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .daily-word-option { transition: none; }
    .daily-word-result--reveal { animation: none; }
}
.daily-word-result__verdict {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
}
.daily-word-result__definition { margin: 0 0 0.5rem; }
.daily-word-result__explanation {
    margin: 0 0 0.5rem;
    color: var(--text-soft);
}
.daily-word-result__example {
    margin: 0.5rem 0;
    padding-left: 0.9rem;
    border-left: 3px solid var(--accent);
    color: var(--text-soft);
    font-style: italic;
}
.daily-word-result__book { margin: 0.5rem 0 0; font-size: 0.9rem; }
.daily-word-result__points {
    margin: 0 0 0.6rem;
    font-weight: 700;
    color: var(--text-strong);
}
.daily-word-result__morrow {
    margin: 0.8rem 0 0;
    padding-top: 0.7rem;
    border-top: 1px solid var(--border);
    color: var(--text-soft);
    font-size: 0.85rem;
}
.daily-word-result__error { margin: 0; color: var(--error); font-weight: 600; }

/* ==================================================================== */
/* Paso AFI.2 — Buy box de afiliados en la ficha del libro.             */
/* Vive en la columna de la portada (280px), pegado bajo la tapa.       */
/* Tokens del tema en todo el bloque → dark-aware sin @media.           */
/* ==================================================================== */
.buy-box {
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.buy-box__heading {
    margin: 0 0 0.2rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.95rem;
}
.buy-box__link {
    width: 100%;
    text-align: center;
    /* Nombres de retailer largos ("Casa del Libro · Audiolibro") no
       deben desbordar la columna de 280px. */
    white-space: normal;
    overflow-wrap: anywhere;
}
.buy-box__disclosure {
    margin: 0.35rem 0 0;
    padding-top: 0.55rem;
    border-top: 1px dashed var(--border);
    color: var(--text-soft);
    font-size: 0.78rem;
    line-height: 1.45;
}

/* En móvil la portada se centra a 260px; el buy box la acompaña. */
@media (max-width: 768px) {
    .buy-box { max-width: 260px; }
}

/* ==================================================================== */
/* Paso AFI.3 — Serie/saga en la ficha: chip del hero + "siguiente".    */
/* Tokens del tema → dark-aware sin @media.                             */
/* ==================================================================== */
.badge-series {
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    color: color-mix(in srgb, var(--accent) 62%, var(--text));
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
}
.series-next {
    margin: 1rem 0 0;
    padding: 0.6rem 0.9rem;
    border: 1px dashed var(--border);
    border-radius: 10px;
    background: var(--surface-soft);
    font-size: 0.92rem;
}
.series-next a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
}
.series-next a:hover { text-decoration: underline; }

/* ==================================================================== */
/* Paso AUD.4 — Histograma de ratings 5→1 en la ficha (sección Reseñas).*/
/* Barras CSS puras; tokens del tema → dark-aware sin @media.           */
/* ==================================================================== */
.rating-histogram {
    max-width: 420px;
    margin: 0 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.rating-histogram__row {
    display: grid;
    grid-template-columns: 3rem 1fr 2.5rem;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--text-soft);
    font-size: 0.85rem;
    border-radius: 8px;
    padding: 0.1rem 0.25rem;
}
.rating-histogram__row:hover {
    background: var(--surface-soft);
    color: var(--text);
}
.rating-histogram__row:hover .rating-histogram__fill {
    background: var(--primary);
}
.rating-histogram__stars {
    font-weight: 700;
    white-space: nowrap;
}
.rating-histogram__track {
    display: block;
    height: 0.65rem;
    border-radius: 999px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    overflow: hidden;
}
.rating-histogram__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: color-mix(in srgb, #b45309 70%, var(--surface));
    transition: background-color 0.15s ease;
}
.rating-histogram__count {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ==================================================================== */
/* Paso L.2 — ¿Sabías que…? (datos curiosos + efemérides).              */
/* Widget de home + línea inline en fichas. Tokens → dark-aware.        */
/* ==================================================================== */
.curious-fact {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.2rem;
    border-left: 4px solid var(--accent);
    margin-bottom: 1.5rem;
}
.curious-fact__icon {
    font-size: 1.4rem;
    line-height: 1.2;
}
.curious-fact__eyebrow {
    margin: 0 0 0.15rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
}
.curious-fact__text {
    margin: 0;
}
.curious-fact__links {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
}
.curious-fact__links a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
}
.curious-fact__links a:hover { text-decoration: underline; }

/* Línea inline en fichas de libro/autor (más callada que el widget). */
.curious-fact-inline {
    margin: 1rem 0 0;
    padding: 0.6rem 0.9rem;
    border-left: 3px solid var(--accent);
    border-radius: 0 10px 10px 0;
    background: var(--surface-soft);
    font-size: 0.92rem;
    color: var(--text-soft);
}
.curious-fact-inline strong { color: var(--text); }

/* ==================================================================== */
/* Paso L.3 — Índice de trivias de lengua (/trivia/lengua/).            */
/* Reusa .trivia-list-page / .trivia-cards-grid del 35A; acá solo los   */
/* grupos por tema. Tokens → dark-aware.                                */
/* ==================================================================== */
.trivia-lengua-group {
    margin-bottom: 2rem;
}
.trivia-lengua-group__title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    margin: 0 0 0.9rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--border);
}

/* ============================================================
   Paso SEC — logout por POST: el item "Salir" del menú pasa de
   <a> a <button> dentro de un form. Estas reglas lo dejan
   pixel-igual al resto de los .nav-user__item.
   ============================================================ */
.nav-user__logout-form { margin: 0; }
button.nav-user__item {
    width: 100%;
    background: none;
    border: 0;
    font: inherit;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    text-align: left;
}

/* ============================================================
   Paso RESP — Responsive móvil (viewport objetivo 360-390px):
   RESP.1 navbar hamburguesa + panel, RESP.2 fixes de desborde,
   RESP.3 footer por grupos. Las reglas viejas del apilado del
   navbar (flex-wrap @900/@640) y el display:none de la búsqueda
   @768 se retiraron de sus bloques originales (ver comentarios
   in-place); el resto de este paso vive acá.
   ============================================================ */

/* --- RESP.1: hamburguesa (solo existe visualmente ≤900px) ---------- */
.nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 38px;
    padding: 0 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 10px;
    cursor: pointer;
    flex: none;
}
.nav-burger:hover { background: rgba(255,255,255,0.16); }
.nav-burger:focus-visible { outline: 2px solid #FB6FA6; outline-offset: 2px; }
.nav-burger__bar {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--text-inverse);
    border-radius: 2px;
    transition: transform 0.18s ease, opacity 0.18s ease;
}
/* Abierto → las 3 barras dibujan una "X" (mismo lenguaje que el caret
   rotado del navUser: el estado se lee en el propio control). */
.nav-burger[aria-expanded="true"] .nav-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .nav-burger__bar:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] .nav-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- RESP.1: panel ------------------------------------------------- */
/* Desktop: el panel es la fila de siempre — links a la izquierda,
   búsqueda a la derecha — ocupando el espacio entre brand y nav-auth.
   Foto idéntica a la previa al paso. */
.nav-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}
/* Los espejos móviles (fila ⭐ / botones auth) no aportan en desktop
   ni en el rango 481-900 (ahí la barra todavía muestra los originales). */
.nav-panel__points,
.nav-panel__auth { display: none; }

@media (max-width: 900px) {
    .nav-burger { display: inline-flex; }
    /* Con el panel fuera del flujo, los sobrevivientes de la barra son
       brand | nav-auth | burger: el margin auto pega los controles al
       burger (cluster único a la derecha, como cualquier app móvil). */
    .nav-auth { margin-left: auto; }

    /* Dropdown bajo la barra: absolute contra .navbar (sticky = containing
       block), full-width, chrome oscuro del navbar. Cerrado por defecto;
       navbar.js togglea .nav-panel--open + aria-expanded. */
    .nav-panel {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 15;
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
        padding: 0.9rem clamp(1rem, 4vw, 1.5rem) 1.1rem;
        background: var(--bg);
        color: var(--text-inverse);
        border-top: 1px solid rgba(255,255,255,0.08);
        box-shadow: var(--shadow);
        /* Si el panel es más alto que lo que queda de pantalla, scrollea él */
        max-height: calc(100vh - 72px);
        overflow-y: auto;
    }
    .nav-panel.nav-panel--open { display: flex; }

    /* Búsqueda primero (pulgar), links después. */
    .nav-panel .navbar-search { order: 1; }
    .nav-panel .navbar-search input { width: 100%; flex: 1; }
    .nav-panel .nav-links {
        order: 2;
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
    }
    .nav-panel .nav-links a {
        padding: 0.65rem 0.6rem;
        border-radius: 10px;
        font-weight: 600;
    }
    .nav-panel .nav-links a:hover { background: rgba(255,255,255,0.08); }
    .nav-panel__points,
    .nav-panel__auth { order: 3; }
}

/* Presupuesto de ancho de la barra (360px → 328px útiles, ver .md del paso):
   560: gaps más cortos (el nombre del avatar ya se oculta acá, regla V.3.4)
        + Ingresar/Registrarse pasan al panel (en 481-560 los dos botones
        con padding .btn ya no entraban);
   480: el chip ⭐ pasa a vivir SOLO en el panel.

   NAV.1 se llevó el corte de 640, que existía para esconder el botón Ranking
   de los anónimos: ese botón ya no está en ningún ancho, así que la regla
   quedaba apuntando a nada. Un presupuesto de ancho con un tramo muerto
   miente sobre dónde aprieta el espacio. */
@media (max-width: 560px) {
    .navbar-inner { gap: 0.5rem; }
    .nav-auth { gap: 0.5rem; }
    .nav-auth .btn { display: none; }
    .nav-panel__auth {
        display: flex;
        gap: 0.6rem;
        padding-top: 0.8rem;
        border-top: 1px solid rgba(255,255,255,0.08);
    }
    .nav-panel__auth .btn { flex: 1; }
    /* Sobre el chrome oscuro del panel, el secondary usa la variante navbar */
    .nav-panel__auth .btn-secondary {
        background: rgba(255,255,255,0.10);
        color: var(--text-inverse);
    }
}
@media (max-width: 480px) {
    .nav-points { display: none; }
    .nav-panel__points {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.65rem 0.6rem;
        margin-top: 0.2rem;
        border-top: 1px solid rgba(255,255,255,0.08);
        border-radius: 0 0 10px 10px;
        font-weight: 700;
    }
    .nav-panel__points:hover { background: rgba(255,255,255,0.08); }
}

/* --- RESP.2: desbordes con contenido hostil ------------------------ */
/* Usernames de hasta 150 chars sin espacios: quiebran en vez de desbordar.
   (Las review cards ya estaban cubiertas con overflow-wrap:anywhere.) */
.page-hero h1,
.user-byline__username,
.rich-text a.mention {
    overflow-wrap: anywhere;
}
/* Palabra/URL larga pegada en cuerpo de texto (URLs desnudas quedan como
   texto plano — linkify off — pero igual empujaban el layout). overflow-wrap
   se hereda → cubre todo el subárbol de cada contenedor. */
.rich-text,
.comment-card,
.publication-body,
.dynamic-response__body {
    overflow-wrap: anywhere;
}
/* Tooltip de puntos centrado sobre un badge pegado al borde: que nunca
   pida más que el viewport. */
.points-info-badge__tooltip {
    max-width: min(18rem, calc(100vw - 2rem));
}

/* --- RESP.3: footer por grupos -------------------------------------- */
/* El grid desktop (brand + 4 grupos) se editó in-place en .footer-grid.
   Acá el colapso móvil: 2 columnas compactas con el brand a lo ancho
   (antes: 1 columna → tira de ~15 filas hasta el copyright). */
@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.6rem 2rem;
        padding: 2rem 0;
    }
    .footer-brand { grid-column: 1 / -1; }
}
/* Fila del copyright: flex para convivir con los links legales
   (Términos/Privacidad como <li> acá, sin tocar los grupos de arriba).
   LEG.1 — ya se renderizan: la lista sale del context processor
   `legal_documents` y aparece cuando hay documentos publicados. */
.footer-bottom__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
}
.footer-bottom p { margin: 0; }
.footer-legal {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.2rem;
    padding: 0;
    margin: 0;
}
.footer-legal a { color: inherit; transition: color var(--transition); }
.footer-legal a:hover { color: #FB6FA6; }

/* ============================================================
   Paso SERIES.1 — Página de serie + "Sagas y series" en la
   ficha de autor. El chip .badge-series (AFI.3) ahora es <a>
   en ficha y cards; acá su hover + los bloques por saga.
   ============================================================ */
a.badge-series:hover {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 45%, transparent);
}

/* Byline del hero de la serie ("de Fulano, Mengano y 2 más · N libros") */
.series-byline { margin: 0; color: var(--text-soft); }
.series-byline a { color: var(--primary); font-weight: 700; }
.series-byline a:hover { text-decoration: underline; }
.series-backlink { margin-top: 1.5rem; }
.series-backlink a { color: var(--primary); font-weight: 600; }
.series-backlink a:hover { text-decoration: underline; }

/* AUD-VIS.1 — SERIES.1 armaba en la ficha de autor un bloque expandido por
   saga (head con título + meta + link a la derecha). AUT.2 lo reemplazó por
   `.series-index`, un índice compacto que sí escala cuando el autor tiene
   muchas series, y dejó huérfana toda la familia `.saga-group*`: verificado
   0 usos en templates. Sobrevive sólo `__shared`, el chip "Saga compartida",
   que author_detail.html sigue usando dentro del índice nuevo.

   Chip "Saga compartida": tinte accent, mismo esquema dark-aware de los
   badges de color (V.2.c.2). */
.saga-group__shared {
    --tint: #DB2777;
    background: color-mix(in srgb, var(--tint) 14%, var(--surface));
    color: color-mix(in srgb, var(--tint) 72%, var(--text));
    border: 1px solid color-mix(in srgb, var(--tint) 30%, transparent);
}

/* =================================================================== */
/* Paso FICHA.1 — Editoriales + premios + categorías secundarias.       */
/* Badges tintados que reusan la fórmula --tint de V.2.c.2 (dark-aware): */
/* bg/texto/borde se derivan con color-mix sobre tokens que flipan por   */
/* modo, así una sola regla sirve claro y oscuro.                        */
/* =================================================================== */
.badge-award,
.badge-secondary-genre {
    background: color-mix(in srgb, var(--tint) 16%, var(--surface));
    color: color-mix(in srgb, var(--tint) 72%, var(--text));
    border: 1px solid color-mix(in srgb, var(--tint) 30%, transparent);
}
.badge-award           { --tint: #CA8A04; }  /* dorado — premios */
.badge-secondary-genre { --tint: #0EA5E9; }  /* celeste — categoría secundaria */

/* Bloque de premios en la ficha del libro (bajo la meta-row). */
.book-awards { margin-top: 1rem; }
.book-awards__heading {
    margin: 0 0 0.4rem;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-soft);
}

/* Hero del autor — premios, seudónimo y enlaces salientes. */
.author-hero-awards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}
.author-hero-realname {
    margin-top: 0.75rem;
    color: var(--text-soft);
    font-style: italic;
    font-size: 0.95rem;
}
.author-hero-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.75rem;
}
.author-hero-link {
    font-weight: 600;
    font-size: 0.92rem;
}

/* =================================================================== */
/* Paso NEWS.1 — Mini-noticias en fichas. Variante de .curious-fact-    */
/* inline (misma caja): borde magenta para distinguirla del dato        */
/* curioso (violeta) + link a la fuente.                                */
/* =================================================================== */
.news-inline { border-left-color: var(--primary); }
.news-inline__source {
    margin-left: 0.4rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
}
.news-inline__source:hover { text-decoration: underline; }

/* =================================================================== */
/* Paso NEWS.1.1 — Franja "Novedades" en la home. Cards linkeadas       */
/* (reusan .grid .grid-3): 📰 + contexto (libro/autor) + texto. Acento   */
/* magenta como la línea de noticia de la ficha.                        */
/* =================================================================== */
.news-strip__item {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: 0 var(--radius) var(--radius) 0;
    text-decoration: none;
    box-shadow: var(--shadow);
    transition: transform var(--transition), border-color var(--transition);
}
.news-strip__item:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
}
.news-strip__badge { font-size: 1.15rem; }
.news-strip__context {
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--primary);
}
.news-strip__text { color: var(--text); font-size: 0.95rem; line-height: 1.45; }

/* =================================================================== */
/* Paso HOME.1 — Reorganización de la home                              */
/* =================================================================== */

/* Carrusel horizontal genérico. Calca la técnica del .is-carousel de   */
/* "Trivias para vos" (scroll-snap horizontal sin JS) para Trending y    */
/* Novedades, sin acoplarlos al CSS de trivia. Cada hijo directo es un   */
/* ítem de ancho fijo con snap-align. */
.home-carousel {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    padding: 0.25rem 0.25rem 0.75rem;
    margin: 0 -0.25rem;
}
.home-carousel > * {
    /* HOME.2 — con pocos ítems (1-2 novedades/trending) las cards CRECEN y
       llenan la fila en vez de dejar el hueco a la derecha; con muchos, el
       flex-grow no tiene margen y siguen scrolleando a su basis. */
    flex: 1 0 240px;
    max-width: 420px;
    scroll-snap-align: start;
}
/* VP — en el teléfono el carrusel muestra UNA card por vista + el asomo de la
   siguiente (~14%), que es lo que invita a deslizar; el scroll-snap la encaja
   sola. Antes entraban 2-3 cards angostas (el fix de 1 columna era solo para
   las grillas .grid-*, no para el carrusel). 768px+ mantiene varias por vista. */
/* AUD-VIS.1 — acompaña el corte del ladder de grillas, que pasó de 767 a
   600px. Si el carrusel siguiera cortando en 767, un teléfono de ~720px
   mostraría las cards del carrusel a ~690px de ancho y las de las grillas a
   ~340px: la misma card, dos tamaños, en la misma pantalla. */
@media (max-width: 600px) {
    .home-carousel > * {
        flex: 0 0 86%;
        max-width: none;
    }
}

/* Bloque social de afinidad (fusión Paso 34 + 34.3). El sub-bloque de   */
/* libros que aman los afines queda separado por un hilo para que se lea */
/* como "lo que leen tus afines", no como otra grilla de catálogo suelta.*/
.affinity-section__books {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}
.affinity-section__subtitle {
    margin: 0 0 0.15rem;
    font-size: 1.05rem;
}
.affinity-section__caption {
    margin: 0 0 1rem;
    color: var(--muted, var(--text-soft));
    font-size: 0.9rem;
}

/* =================================================================== */
/* Paso HOME.2 — Bandas por capa + rótulos                              */
/* =================================================================== */

/* El 100vw de las bandas agrega el ancho de la scrollbar → clip en
   .site-main lo absorbe SIN crear contenedor de scroll (no rompe el
   position:sticky del navbar, que vive fuera de .site-main). */
.site-main { overflow-x: clip; }

/* Cada capa de intención es una banda full-bleed: rompe el .container
   centrado y ocupa el ancho del viewport; el __inner re-encuadra al ancho
   del container (paridad con el hero). */
.home-layer {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.home-layer__inner {
    width: min(100% - 2rem, var(--container));
    margin: 0 auto;
    padding: 2.2rem 0;
}

/* Auto-ocultar una capa sin contenido real. Todos los bloques de la home
   (palabra, dato, cta, dinámica, secciones) renderizan <section> en su raíz,
   así que una capa sin ninguna <section> (anónimo/cold-start) desaparece
   —banda y rótulo— sin gatear en el template. */
.home-layer:not(:has(section)) { display: none; }

/* Rótulo de capa: marcador de NIVEL SUPERIOR, distinto del .section-kicker
   (que rotula cada sección). Da wayfinding: "en qué tramo del recorrido estoy". */
.home-layer__label {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 1.3rem;
    padding-left: 0.7rem;
    border-left: 4px solid var(--accent);
    line-height: 1.2;
}

/* Veladuras por capa: color-mix sobre el ground → se adaptan a claro/oscuro
   solas. Ritual queda neutro (arranque); los tintes empiezan en Para vos. */
.home-layer[data-layer="ritual"]    { background: var(--surface-soft); }
.home-layer[data-layer="paravos"]   { background: color-mix(in srgb, #3b82f6 8%,  var(--surface-soft)); }
.home-layer[data-layer="semana"]    { background: color-mix(in srgb, #CA8A04 10%, var(--surface-soft)); }
.home-layer[data-layer="descubri"]  { background: color-mix(in srgb, #f97316 8%,  var(--surface-soft)); }
.home-layer[data-layer="comunidad"] { background: color-mix(in srgb, var(--accent) 8%, var(--surface-soft)); }

/* AUD-VIS.1 — acá vivía el neutralizador `.home-layer .X-section` de HOME.2 /
   HOME.2.1. Ya no hace falta: las cajas de color que apagaba (claro Y oscuro)
   se borraron de raíz en sus bloques de origen (Pasos 20/22/22A.1/33). Apagar
   con un selector más específico dejaba dos fuentes de verdad peleando; la
   segunda —la dark— ganaba en silencio. Borrar > pisar. */

/* =================================================================== */
/* Paso FILT.1 — Filtros como barra de <select> + chips de filtro activo */
/* =================================================================== */

/* Barra de filtros: Género · Ánimo · Orden (Libros) / Tipo · Orden (Rutas). */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.8rem 1rem;
}
.filter-bar__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1 1 200px;
    min-width: 0;
}
.filter-bar__label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-soft);
}

/* <select> estilizado (el nativo usa el look del SO, feo en dark). La flecha
   es un SVG data-uri; se cambia por tema porque un background-image no hereda
   currentColor. El appearance:none oculta la flecha nativa. */
.filter-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    font: inherit;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    background-color: var(--surface);
    border: 1.5px solid color-mix(in srgb, var(--primary) 20%, var(--border));
    border-radius: 12px;
    padding: 0.6rem 2.2rem 0.6rem 0.9rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%236B5B85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    background-size: 0.85rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.filter-select:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.filter-select:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
@media (prefers-color-scheme: dark) {
    .filter-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23B9A6D6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); }
}
:root[data-theme="dark"] .filter-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23B9A6D6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); }
:root[data-theme="light"] .filter-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%236B5B85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); }

/* Fila de chips de filtro ACTIVO (removibles). */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.9rem;
}
.active-filters__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-soft);
}
.active-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.55rem 0.32rem 0.8rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--on-accent);
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
    box-shadow: 0 4px 12px -5px color-mix(in srgb, var(--primary) 55%, transparent);
    transition: background var(--transition);
}
.active-filter-chip:hover { background: var(--primary-hover); }
.active-filter-chip__x {
    display: inline-grid;
    place-items: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--on-accent) 22%, transparent);
    font-size: 0.72rem;
    line-height: 1;
}
.active-filters__clear {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    padding: 0.2rem 0.4rem;
}
.active-filters__clear:hover { text-decoration: underline; }

@media (max-width: 600px) {
    .filter-bar__field { flex-basis: 100%; }
}

/* =================================================================== */
/* Paso AUT.2 — Índice de series en la ficha de autor                   */
/* =================================================================== */

/* Lista compacta de sagas: reemplaza los bloques expandidos (nombre +
   grilla de libros) que no escalaban con muchas sagas. Cada fila lleva a
   series_detail, donde vive la saga completa y en orden. */
.series-index {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.series-index__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.9rem;
    padding: 0.8rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    box-shadow: var(--shadow);
}
.series-index__link {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text);
    text-decoration: none;
}
.series-index__link:hover { color: var(--primary); }
.series-index__meta {
    color: var(--text-soft);
    font-size: 0.9rem;
}
.series-index__cta {
    margin-left: auto;
    color: var(--primary);
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    white-space: nowrap;
}
.series-index__cta:hover { text-decoration: underline; }

@media (max-width: 600px) {
    /* En el cel el CTA baja a su propia línea en vez de pelear por el ancho. */
    .series-index__cta { margin-left: 0; }
}

/* =================================================================== */
/* Paso RET.1 — Pestañas del feed del home: «Para vos» / «Siguiendo».  */
/* Los tabs son <a> (fallback server-side ?feed=…); feed_tabs.js hace   */
/* el swap sin recarga. Subrayado activo con el gradiente de marca.     */
/* =================================================================== */
.feed-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 2px solid var(--border);
    margin-bottom: 1.25rem;
}
.feed-tabs__tab {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-soft);
    padding: 0.55rem 1.1rem 0.65rem;
    position: relative;
    border-radius: 10px 10px 0 0;
    transition: color var(--transition), background var(--transition);
}
.feed-tabs__tab:hover { color: var(--text); background: var(--surface-2); }
.feed-tabs__tab[aria-selected="true"] { color: var(--text-strong); }
.feed-tabs__tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 0.6rem;
    right: 0.6rem;
    bottom: -2px;
    height: 3px;
    border-radius: 3px;
    background: var(--gradient);
}
.feed-tabs__count {
    background: var(--primary);
    color: var(--on-accent);
    font-size: 0.68rem;
    font-family: var(--font-body);
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
    position: relative;
    top: -2px;
}
/* El hidden de los paneles debe ganar aunque algún display futuro lo pise. */
.feed-tabs__panel[hidden] { display: none; }

/* Card de actividad del panel Siguiendo: byline compartido + fecha. */
.following-item__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 0.7rem;
}
.following-item__when {
    color: var(--text-soft);
    font-size: 0.78rem;
    white-space: nowrap;
}

/* =================================================================== */
/* Paso RET.3 — Palabra del día en la navbar + puntito "no jugada hoy". */
/* =================================================================== */
/* "Palabra del día" es el único link de la navbar con espacios: sin esto
   se partía en dos líneas y el puntito quedaba flotando abajo (screenshot
   del user). Nowrap en todos: un link de navbar nunca debe quebrar. */
.nav-links a { white-space: nowrap; }

.nav-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    margin-left: 0.3rem;
    vertical-align: super;
}
/* Deep-links al widget (home o página): con navbar sticky, sin este margen
   el título de la card quedaba tapado al saltar. */
#palabra-del-dia { scroll-margin-top: 90px; }

/* =================================================================== */
/* Paso SHARE.1 — Botón "Compartir" (fichas de libro/ruta/tema/dinámica) */
/* <details> como popover: el summary es el trigger pill, el menú es una  */
/* card flotante. En celular el JS lo puentea al share sheet nativo.      */
/* =================================================================== */
.share {
    position: relative;
    display: inline-block;
    margin-top: 0.6rem;
}
.share__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    list-style: none;               /* saca el triángulo del details */
    transition: border-color var(--transition), color var(--transition);
}
.share__trigger::-webkit-details-marker { display: none; }
.share__trigger:hover { border-color: var(--primary); color: var(--primary); }
.share__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    padding: 0.35rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
}
.share__item {
    display: block;
    padding: 0.5rem 0.7rem;
    border: none;
    border-radius: 8px;
    background: none;
    text-align: left;
    font: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
    cursor: pointer;
}
.share__item:hover { background: var(--surface-2); color: var(--primary); }

/* =================================================================== */
/* Paso REP.1 — Botón ⚑ Reportar (cards de comentarios/reseñas/etc.)   */
/* Trigger fantasma y chiquito (no compite con like/compartir); el      */
/* form se abre como popover card. El swap post-envío lo hace report.js.*/
/* =================================================================== */
.report {
    position: relative;
    display: inline-block;
}
.report__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    color: var(--text-soft);
    font-size: 0.95rem;
    cursor: pointer;
    list-style: none;
    transition: color var(--transition), background var(--transition);
}
.report__trigger::-webkit-details-marker { display: none; }
.report__trigger:hover { color: var(--error); background: var(--surface-2); }
.report[open] .report__trigger { color: var(--error); }
.report__form {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    width: min(280px, 78vw);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.8rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
}
.report__label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-strong);
}
.report__select,
.report__detail {
    font: inherit;
    font-size: 0.85rem;
    color: var(--text);
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.4rem 0.55rem;
}
.report__detail { resize: vertical; }
.report__submit { align-self: flex-end; font-size: 0.82rem; padding: 0.35rem 0.9rem; }
.report__error { margin: 0; font-size: 0.8rem; color: var(--error); }
.report__done { font-size: 0.82rem; color: var(--success); font-weight: 600; }

/* RET.3b — página propia /palabra-del-dia/. */
.daily-word-page__lead {
    color: var(--text-soft);
    max-width: 55ch;
    margin: 0.4rem 0 0;
}

/* ===================================================================
   LEG.1 — Documentos legales (Términos, Privacidad)
   -------------------------------------------------------------------
   El cuerpo reusa `.rich-text`, que ya estila párrafos, listas, citas y
   enlaces. Acá solo lo que un texto legal suma y un comentario no tiene:
   títulos de sección, tablas y la línea de vigencia.

   Medida de lectura acotada: un párrafo legal a todo el ancho de la
   pantalla es exactamente lo que hace que nadie los lea.
   =================================================================== */
.legal-doc { max-width: 68ch; }

.legal-doc__meta {
    margin: 0 0 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-soft);
    font-size: 0.9rem;
}

/* Los h2 abren sección: bastante aire arriba para que se lea la
   estructura al hojear, que es como se leen estos documentos. */
.legal-doc__body h2 {
    margin: 2rem 0 0.7rem;
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--primary);
}
.legal-doc__body h2:first-child { margin-top: 0; }
.legal-doc__body h3 { margin: 1.4rem 0 0.5rem; font-size: 1.05rem; }
.legal-doc__body h4 { margin: 1.2rem 0 0.4rem; font-size: 0.98rem; }

.legal-doc__body li { margin-bottom: 0.35rem; }

/* La tabla se desborda sola en el teléfono si no se le da salida: el
   wrapper con scroll evita que empuje el ancho de TODA la página. */
.legal-doc__body table {
    display: block;
    overflow-x: auto;
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.2rem;
    font-size: 0.94rem;
}
.legal-doc__body th,
.legal-doc__body td {
    border: 1px solid var(--border);
    padding: 0.5rem 0.7rem;
    text-align: left;
    vertical-align: top;
}
.legal-doc__body th { background: var(--surface-2); font-weight: 600; }

.legal-doc__body hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 1.8rem 0;
}

/* Ir de un documento al otro sin volver al pie de página. */
.legal-doc__nav {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    align-items: center;
    color: var(--text-soft);
    font-size: 0.92rem;
}
.legal-doc__nav a { color: var(--primary); font-weight: 600; }