:root {
    /* Identidad Lumbre — azul noche + ámbar + marfil; naranja energía para acción.
       Tokens canónicos (--lumbre-*): los HEX de marca viven SÓLO aquí (§26). */
    --lumbre-night: #172033; --lumbre-amber: #FFB000; --lumbre-energy: #FF6B35;
    --lumbre-ivory: #FFF9F0; --lumbre-white: #FFFFFF;
    --lumbre-success: #138A72; --lumbre-discovery: #7557E8;
    /* Roles de interfaz (light-first): el accent interactivo #BF4018 supera AA 4.5:1 como texto
       sobre marfil/blanco/accent-soft (medido); #FF6B35 y #FFB000 quedan solo para superficies
       grandes, marca e iconografía decorativa — nunca como texto sobre fondo claro. */
    --bg: var(--lumbre-ivory); --surface: var(--lumbre-white); --ink: #1B2438; --muted: #5C6577;
    --accent: #BF4018; --accent-hover: #9C3313; --accent-soft: #FDEBDF;
    --line: #EBE3D7; --warm: #9D6500; /* ámbar miel: legible como texto (4.9:1); la marca #FFB000 vive en --lumbre-amber */
    /* Estados semánticos (sustituyen colores hardcodeados). */
    --ok: #0E7259; --ok-soft: #E6F2EE; --warn: #8A5D00; --warn-soft: #FBF0D3;
    --danger: #B93E3E; --danger-soft: #F9E5E3; --discovery: var(--lumbre-discovery);
    /* Sombras mínimas: preferir borde sutil o contraste de fondo. */
    --shadow-sm: 0 1px 2px #1720330a; --shadow-md: 0 6px 20px #1720330f; --shadow: var(--shadow-md);
    /* Radios consistentes. */
    --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
    /* Escala de espaciado. */
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
    --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
    /* Tipografía: sans contemporánea para interfaz, serif para contenido editorial. */
    --font-ui: "Inter", "SF Pro Text", system-ui, -apple-system, Roboto, sans-serif;
    --font-reading: "Literata", Georgia, "Times New Roman", serif;
    /* Alias semánticos del design system (nombre de marca para agentes y componentes nuevos). */
    --lumbre-primary: var(--accent); --lumbre-accent: var(--lumbre-amber);
    --lumbre-background: var(--bg); --lumbre-surface: var(--surface); --lumbre-text: var(--ink);
    --lumbre-muted: var(--muted); --lumbre-success-raw: var(--ok); --lumbre-warning: var(--warn);
    --lumbre-error: var(--danger);
    --color-bg: var(--bg); --color-surface: var(--surface); --color-text: var(--ink);
    --color-muted: var(--muted); --color-brand: var(--accent); --color-border: var(--line);
    font-family: var(--font-ui); color: var(--ink); background: var(--bg);
    font-synthesis: none; text-rendering: optimizeLegibility;
}
:root[data-theme~="dark"] {
    /* Modo oscuro: noche profunda; el ámbar y la energía brillan sobre oscuro (mismos roles). */
    --bg: #0F1622; --surface: var(--lumbre-night); --ink: #F1EDE4; --muted: #9AA3B2;
    --accent: #FF7A45; --accent-hover: #FF9768; --accent-soft: #2A2318;
    --line: #26304A; --warm: var(--lumbre-amber);
    --ok: #35B394; --ok-soft: #14291F; --warn: #E0A93C; --warn-soft: #2C2411;
    --danger: #E0776F; --danger-soft: #331714;
    --shadow-sm: 0 1px 2px #0006; --shadow-md: 0 8px 28px #0007; --shadow: var(--shadow-md);
    color-scheme: dark;
}
/* ── VARIANTES DE TEMA CLARO (selector «Herramientas → Tema», §26: sólo tokens, ningún componente
      lleva color propio aquí). El valor guardado es una palabra suelta: «light», «light-a», «light-b»,
      «light-c», «light-d», «light-e» ó «dark». Los componentes que fijaron un color de la paleta base por
      literal se re-tingen abajo excluyendo el noche; los que usan tokens cambian solos.
      El oscuro NO se toca: sigue siendo el tema noche de siempre en cualquier variante. */
:root[data-theme~="light-a"] {
    /* A · LINOS Y TERRACOTA — lino greige de fondo (tinta visible, no blanco roto), ficha hueso y la
       terracota como ÚNICO color de acento; el ámbar se retira a iconografía. Cambio de tema a simple vista. */
    --bg: #EDEAE1; --surface: #FAF9F5; --ink: #22262C; --muted: #5E6269;
    --accent: #AF3B14; --accent-hover: #8E2F10; --accent-soft: #F6E6D8;
    --line: #D6D0C1; --warm: #875904;
    --ok: #0F7360; --ok-soft: #DCEBE2; --warn: #7E5300; --warn-soft: #F1E5C2;
    --danger: #B42318; --danger-soft: #F5DDD5;
    --shadow-sm: 0 1px 2px #22262C14; --shadow-md: 0 6px 20px #22262C1a;
}
:root[data-theme~="light-b"] {
    /* B · VERDE LUMBRE — menta decidida de fondo, ficha verdosa clarita, pino profundo en acciones.
       Aquí se entra por el bosque: el cambio de tema se nota nada más alternar. */
    --bg: #CFE7DA; --surface: #F0F8F3; --ink: #122C24; --muted: #4F6A5D;
    --accent: #0E5A3C; --accent-hover: #0A4430; --accent-soft: #BEE3CF;
    --line: #AFCFBB; --warm: #7A5F02;
    --ok: #0F7A55; --ok-soft: #DCF2E6; --warn: #7A5000; --warn-soft: #F0E4C2;
    --danger: #B42318; --danger-soft: #F5E0D8;
    --shadow-sm: 0 1px 2px #122C2414; --shadow-md: 0 6px 20px #122C241a;
    --lumbre-energy: #0F8A66;
}
:root[data-theme~="light-c"] {
    /* C · TIZA Y FOGATA — pizarra gris clara de fondo (se nota el gris), ficha blanca pura que sobre
       este gris se recorta sola, tinta negra y fuego terracota oscuro. Alto contraste editorial. */
    --bg: #DCE1E8; --surface: #FFFFFF; --ink: #10141A; --muted: #545D6A;
    --accent: #A82D12; --accent-hover: #82220C; --accent-soft: #F7DFD2;
    --line: #C2C9D3; --warm: #8A5C06;
    --ok: #0C6B54; --ok-soft: #D9E9E2; --warn: #7A5000; --warn-soft: #F2E6C4;
    --danger: #A81F1F; --danger-soft: #F4D9D3;
    --shadow-sm: 0 1px 2px #10141A14; --shadow-md: 0 6px 22px #10141A1c;
    --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
}
:root[data-theme~="light-d"] {
    /* D · NOCHE SUAVE — acero de día de verdad: fondo azul pizarra clarita, ficha azulada y brasa
       profunda en acciones. Al alternar con el oscuro se siente un solo producto. */
    --bg: #D5E0F1; --surface: #F4F8FD; --ink: #18253F; --muted: #4F5F78;
    --accent: #A93E10; --accent-hover: #84300B; --accent-soft: #F8E7D6;
    --line: #BCCAE0; --warm: #7C5A0C;
    --ok: #0D6E55; --ok-soft: #D8EBE2; --warn: #765308; --warn-soft: #F0E5C8;
    --danger: #AE2015; --danger-soft: #F4DCD6;
    --shadow-sm: 0 1px 2px #18253F14; --shadow-md: 0 6px 22px #18253F1a;
}
:root[data-theme~="light-e"] {
    /* E · AMATISTA — lavender pleno de fondo, ficha violeta clarita, tinta berenjena y amatista serio
       en acciones. El teal del anaquel es complementario del violeta: categoría y curso se distinguen solas. */
    --bg: #DED6F2; --surface: #F6F3FC; --ink: #221C3B; --muted: #58507A;
    --accent: #5638B8; --accent-hover: #452B96; --accent-soft: #D8CCF4;
    --line: #C9BCE6; --warm: #7A5C0A;
    --ok: #0E6E56; --ok-soft: #D7EAE1; --warn: #74500E; --warn-soft: #EFE5C9;
    --danger: #B02318; --danger-soft: #F5DFD9;
    --shadow-sm: 0 1px 2px #221C3B14; --shadow-md: 0 6px 22px #221C3B1a;
}
/* Alias del acento para hojas que llamaban `var(--brand, #e07a1f)` con un literal huérfano: al pasar
   por variable, la Mesa de Estudio y el capturador siguen al tema elegido (antes se quedaban en
   naranja viejo en TODAS las variantes). El literal queda sólo como fallback si app.css no cargara. */
:root { --brand: var(--accent); }
/* Re-tinges de componentes que fijaron el color de la paleta base por literal fuera de `var()`: así la
   variante cambia también esos puntos. Cada regla es un selector ya existente en su propia hoja. */
:root:not([data-theme~="dark"]) .brain-dwell .bdw-oa { background: var(--accent); }
:root:not([data-theme~="dark"]) .map-territory.acc-language { --tint: var(--accent); }
:root:not([data-theme~="dark"]) .map-territory.acc-teach { --tint: var(--muted); }
:root[data-theme~="light-b"] .brand > svg { color: var(--accent); }
:root[data-theme~="light-b"] .quick-tile > svg, :root[data-theme~="light-b"] .quick-group-btn > svg,
:root[data-theme~="light-b"] .quick-menu a > svg { color: var(--lumbre-amber); }
* { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.65; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
button, input, select, textarea { font: inherit; }
button, summary { cursor: pointer; }
button { color: inherit; }
svg { flex-shrink: 0; vertical-align: middle; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
.profile-heading { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.profile-photo { width: 110px; height: 110px; object-fit: cover; border-radius: 50%; }
.streak-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 22px 0 4px; }
.streak-card { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--accent); }
.streak-card > div { display: flex; flex-direction: column; line-height: 1.2; }
.streak-card strong { font: 400 26px/1 Georgia, serif; color: var(--ink); }
.streak-card span { font-size: 12px; color: var(--muted); }
.profile-reviews-title { margin-top: 40px; }
.copyright-notice { padding: 16px; border-left: 3px solid var(--accent); background: var(--accent-soft); font-size: 13px; }
.copyright-box { margin: 6px 0; padding: 14px 16px; border: 1px solid var(--line); border-left: 3px solid var(--warm); border-radius: var(--radius-sm); background: var(--surface); display: grid; gap: 11px; }
.copyright-box .copyright-notice { padding: 0; border: 0; background: none; }
:focus-visible { outline: 3px solid var(--warm); outline-offset: 4px; }
h1, h2, h3, p { margin: 0 0 16px; }
h1, h2 { font-family: var(--font-reading); font-weight: 600; letter-spacing: -.02em; line-height: 1.16; }
h1 { font-size: clamp(36px, 4.4vw, 62px); }
h2 { font-size: 34px; }
h3 { font-size: 18px; line-height: 1.4; font-weight: 600; }
em { color: var(--accent); font-weight: 400; }
.container { max-width: 1320px; width: calc(100% - 112px); margin: 0 auto; }
.narrow { max-width: 790px; }
.section { padding-top: 64px; padding-bottom: 64px; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--muted); line-height: 1.8; text-transform: uppercase; }
.muted, .quiet-note { color: var(--muted); }
.quiet-note { font-size: 12px; margin-top: 20px; }
.lead { font-size: 18px; color: var(--muted); margin-bottom: 32px; }
/* ── Franja de países (2026-10-05) — va ENCIMA del menú top, en letras pequeñas y CENTRADA: la línea
   corre de borde a borde de la ventana pero sus nombres se alinean al eje del portal (la marca y el
   menú también van centrados en la lectura). Los nombres llegan al HTML en capitalización de frase y
   se capitalizan aquí con CSS, como el menú top: lectores de pantalla y SEO siguen viendo «México»,
   no «MÉXICO». Sin fondo ni borde: es una línea de contexto, no una barra. */
.country-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; padding: 3px 12px 1px; font-size: 11px; line-height: 1.5; }
.country-strip a { color: var(--muted); text-decoration: none; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.country-strip a:hover { color: var(--accent-hover); text-decoration: underline; }
.country-strip a[aria-current] { color: var(--accent); }
.country-strip-sep { color: var(--muted); opacity: .5; user-select: none; }
.site-header { height: 64px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; gap: 16px; }
/* La marca es el único elemento que puede ceder si la línea se aprieta (1101–1366px): sin
   min-width:0 + ellipsis, un nombre de escuela largo impedía encoger la fila y desbordaba la página. */
.brand { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; min-width: 0; }
.brand-text { min-width: 0; overflow: hidden; }
.brand-word { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Con escuela anfitriona, el nombre largo partía la marca en dos líneas; el subtítulo cede antes. */
.brand-school .brand-word { min-width: 0; }
@media (max-width: 1439px) { .brand-sub { display: none; } }
/* El nombre de la cuenta también es decorativo en la barra: el avatar basta. Con «Mi Mesa" ya como
   cuarta liga y el buscador siempre presente, la fila logueada necesita el ancho extra: se retira el
   nombre bajo 1440px (igual que el subtítulo de marca) para que el renglón único respire ≥1280px. */
@media (min-width: 781px) and (max-width: 1439px) { .account-name { display: none; } }
.brand > svg { color: var(--lumbre-amber); }
/* Palabra-marca: LUMBRE funciona sola — sans geométrica, tracking amplio, sin sufijos (§6/§9). */
.brand-word { font: 700 16px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.brand:hover .brand-word { color: var(--ink); }
.main-nav, .header-actions { display: flex; align-items: center; gap: 20px; }
.main-nav { font-size: 13px; }
/* Opciones del menú top siempre en mayúsculas (requisito del usuario 2026-10-03): se capitaliza
   por CSS, no en el HTML — el texto accesible y el SEO conservan su forma correcta. */
.main-nav > a { text-transform: uppercase; }
.main-nav [aria-current] { color: var(--accent); }
/* «Tu Lumbre» (2026-10-07): la puerta del espacio privado de escuelas y empresas se distingue con el
   acento cálido del tema y un peso mayor, sin caja ni bordes que rompan la línea del nav. */
.main-nav > a.nav-tl { color: var(--warm); font-weight: 700; }
.main-nav > a.nav-tl:hover { color: var(--accent); }
/* Encarta: pocas puertas a la vista — el resto se recoge en «Más». */
.nav-more { position: relative; }
.nav-more > summary { list-style: none; cursor: pointer; color: inherit; display: inline-flex; align-items: center; gap: 5px; padding: 6px 2px; }
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more[open] > summary { color: var(--accent); }
.nav-more > div { position: absolute; right: 0; top: 32px; min-width: 190px; display: flex; flex-direction: column; gap: 2px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow); z-index: 45; }
.nav-more > div a { padding: 9px 10px; border-radius: var(--radius-sm); font-size: 13px; }
.nav-more > div a:hover { background: var(--accent-soft); }
/* Submenú «Mi Lumbre» (cabecera, flag ON): reutiliza .nav-more y sólo lo afinamos. El summary no es
   un `.main-nav > a`, así que hereda el MAYÚSCULAS del resto del nav; el chevron gira al abrir y el
   panel se alinea a la IZQUIERDA del botón (es un item central del nav, right:0 lo desplazaría mucho). */
.mi-lumbre-menu > summary { text-transform: uppercase; }
.mi-lumbre-menu > div { left: 0; right: auto; }
.mi-lumbre-caret { display: inline-block; margin-left: 2px; transition: transform .15s ease; }
.mi-lumbre-menu[open] .mi-lumbre-caret { transform: rotate(180deg); }
/* Directorio /directorio (página «Explorar»): retícula de puertas por sección. */
.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.dir-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: inherit; }
.dir-card:hover { border-color: var(--accent); background: var(--accent-soft); }
.dir-icon { font-size: 22px; line-height: 1.2; }
.dir-text { display: flex; flex-direction: column; gap: 2px; }
.dir-text small { line-height: 1.45; }
/* ── Barra de accesos rápidos: los cursos centrales que fija el admin (/admin/shortcuts),
      anclada bajo el menú principal. Chips compactos centrados que envuelven (sin scroll horizontal).
      Vacía ⇒ no se pinta. */
.quick-bar { border-bottom: 1px solid var(--line); background: var(--surface); }
.quick-bar-inner { max-width: 1320px; margin: 0 auto; padding: 8px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.quick-tile { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; min-height: 30px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font: 600 12.5px/1 var(--font-ui); white-space: nowrap; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.quick-tile > svg { color: var(--warm); flex: none; }
.quick-tile:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.quick-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Bloque de grupo (Primaria / Secundaria / Preparatoria): un solo chip que despliega sus grados.
   En escritorio aparece al pasar el mouse; con teclado o en móvil (sin hover) al enfocar el botón. */
.quick-group { position: relative; }
.quick-group-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; min-height: 30px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font: 700 12.5px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .02em; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.quick-group-btn > svg { color: var(--warm); flex: none; }
.quick-group-btn > .caret { color: var(--muted); transition: transform .15s ease; }
.quick-group-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.quick-group:focus-within > .quick-group-btn, .quick-group:hover > .quick-group-btn { color: var(--accent); border-color: var(--accent); }
.quick-group:focus-within > .quick-group-btn > .caret, .quick-group:hover > .quick-group-btn > .caret { transform: rotate(180deg); }
.quick-menu { position: absolute; top: 100%; left: 0; margin-top: 6px; min-width: 190px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .12s ease, transform .12s ease, visibility .12s; z-index: 40; }
.quick-group:hover > .quick-menu, .quick-group:focus-within > .quick-menu { opacity: 1; visibility: visible; transform: none; }
.quick-menu a, .quick-menu .quick-menu-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--ink); font: 500 13px/1.2 var(--font-ui); white-space: nowrap; }
.quick-menu a > svg, .quick-menu .quick-menu-item > svg { color: var(--warm); flex: none; }
.quick-menu a:hover { background: var(--accent-soft); color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .quick-group-btn > .caret, .quick-menu { transition: none; } }
/* En pantallas angostas el grupo derecho (Preparatoria) empujaba el menú fuera del viewport:
   anclado a la derecha del botón abre hacia adentro y no genera scroll horizontal. */
@media (max-width: 520px) { .quick-menu { left: auto; right: 0; max-width: min(190px, calc(100vw - 24px)); } }
.quick-bar-preview { border: 1px dashed var(--line); border-radius: var(--radius-md); margin: 10px 0 18px; }
.quick-bar-preview .quick-bar-inner { padding: 8px 12px; }
/* Editor de la lista en el panel admin. */
.shortcuts-table input[type=text] { width: 100%; }
.shortcuts-table select { width: 100%; }
@media (max-width: 720px) {
    .quick-bar-inner { padding: 7px 14px; gap: 5px; }
    .quick-tile { padding: 5px 10px; font-size: 12px; }
}
/* ══ Franja escolar sticky (2026-10) — SchoolNav ══
   Alturas compartidas como variables para que ningún offset quede a número arbitrario. */
:root { --header-h: 64px; --school-bar-h: 46px; }
@media (max-width: 720px) { :root { --school-bar-h: 44px; } }
.school-bar { position: sticky; top: 0; z-index: 35; background: var(--surface); border-bottom: 1px solid var(--line); }
.school-bar-inner { max-width: 1320px; margin: 0 auto; padding: 7px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.school-bar-tag { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; font: 800 11px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.school-bar-tag > svg { color: var(--warm); }
/* Combo de país (multi-país, INFORME_PERU §8): desplegable «banderita · PAÍS — PLAN» con el patrón
   school-group de la franja. Solo se pinta con PE_ENABLED=true; la banderita propia (flag-mx/flag-pe)
   lleva su contorno en currentColor, así que el tono tibio del botón le sienta bien sin reglas extra. */
.school-country { display: inline-flex; align-items: center; margin-right: 2px; }
.school-menu .country-opt span { display: inline-flex; align-items: center; gap: 7px; }
.school-menu .country-opt small { letter-spacing: .04em; text-transform: uppercase; font-size: 10px; }
.school-group { position: relative; }
.school-home { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; min-height: 32px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font: 700 13px/1 var(--font-ui); white-space: nowrap; transition: color .15s ease, border-color .15s ease, background .15s ease; }
.school-home > svg { color: var(--warm); }
.school-home:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.school-home.is-current { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.school-home:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.school-bar-sep { width: 1px; align-self: stretch; margin: 2px 5px; background: var(--line); }
.school-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; min-height: 32px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font: 700 13px/1 var(--font-ui); cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease; }
.school-btn > .caret { color: var(--muted); transition: transform .15s ease; }
.school-btn > svg:not(.caret) { color: var(--warm); }
.school-btn:hover, .school-group.is-open > .school-btn, .school-group:focus-within > .school-btn { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.school-group.is-open > .school-btn > .caret, .school-group:focus-within > .school-btn > .caret { transform: rotate(180deg); }
.school-group.is-current > .school-btn { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.school-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.school-menu { position: absolute; top: 100%; left: 0; margin-top: 6px; min-width: 220px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 2px; z-index: 40; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .12s ease, transform .12s ease, visibility .12s; }
.school-group.is-open > .school-menu, .school-group:focus-within > .school-menu { opacity: 1; visibility: visible; transform: none; }
.school-menu a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--ink); font: 600 13px/1.2 var(--font-ui); white-space: nowrap; }
.school-menu a small { color: var(--muted); font-variant-numeric: tabular-nums; }
.school-menu a:hover { background: var(--accent-soft); color: var(--accent); }
.school-menu a[aria-current] { background: var(--accent-soft); color: var(--accent); }
.school-menu-all { color: var(--accent); border-bottom: 1px solid var(--line); margin-bottom: 2px; border-radius: var(--radius-sm); }
/* Combo «Profesores»: subtítulos de sección dentro del desplegable y panel alto con scroll propio
   (cuatro secciones ~18 filas no caben sin recorte); en móvil el panel fijo ya trae max-height. */
.school-menu-sub { padding: 8px 10px 2px; font: 700 10px/1 var(--font-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.school-menu-sub:not(:first-of-type) { margin-top: 4px; border-top: 1px solid var(--line); }
.school-menu-wide { min-width: 268px; max-height: min(70vh, 560px); overflow: auto; }
@media (max-width: 520px) { .school-menu { left: auto; right: 0; } }
/* Móvil: una sola fila con Inicio + los tres niveles + Lecturas + Profesores. Con seis controles
   ya no caben estirados, así que la fila conserva su ancho natural y se desliza en horizontal
   (sin barra visible). Cada botón abre un panel fijo ancho apto para pantalla pequeña. */
@media (max-width: 720px) {
    .school-bar-inner { flex-wrap: nowrap; gap: 6px; padding: 6px 10px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .school-bar-inner::-webkit-scrollbar { display: none; }
    .school-bar-tag { display: none; }
    .school-country { flex: 0 0 auto; }
    .school-bar-sep { display: none; }
    .school-home { flex: 0 0 auto; padding: 6px 11px; font-size: 12px; }
    .school-group { flex: 0 0 auto; }
    .school-btn { width: auto; justify-content: center; gap: 4px; padding: 6px 11px; font-size: 12px; }
    .school-btn > span { overflow: visible; }
    .school-menu { position: fixed; left: 10px; right: 10px; top: var(--sb-panel-top, calc(var(--school-bar-h) + 4px)); margin-top: 0; min-width: 0; max-height: 62vh; overflow: auto; transform: none; }
}
/* El lede dentro de un encabezado de sección NUNCA debe subirse al título: el margen negativo
   global de .section-lede está pensado para ledes que van sueltos bajo la heading-line. */
.home-school .section-heading .section-lede, .home-courses .section-heading .section-lede { margin: 6px 0 0; }
@media (max-width: 400px) { .school-btn { font-size: 11.5px; } .school-btn > .caret { display: none; } }
/* Offsets que la franja comparte con el chrome sticky ya existente (sólo cuando la barra está). */
body.has-school-bar .object-cover { top: calc(var(--school-bar-h) + 12px); }
body.has-school-bar .format-switch { top: var(--school-bar-h); z-index: 28; }
body.has-school-bar section[id], body.has-school-bar article[id], body.has-school-bar h2[id] { scroll-margin-top: calc(var(--school-bar-h) + 16px); }
/* Inmersivo del OA: en pantalla completa nativa la barra ya no pinta (queda fuera del elemento a
   pantalla completa); el Modo Guía se despeja igual para no interferir con la lección. */
body.lo-guide-on .school-bar { display: none; }
@media (prefers-reduced-motion: reduce) { .school-btn > .caret, .school-menu { transition: none; } }

/* «Herramientas» del header: gemelo de «Más» — recoge atrás/tema para no saturar la derecha (§8/§9). */
.tools-menu > summary { color: var(--muted); padding: 6px 4px; }
.tools-menu > summary:hover { color: var(--ink); }
.tools-dots { font-size: 13px; font-weight: 700; letter-spacing: .18em; line-height: 1; }
.tools-menu > div { min-width: 210px; }
.tool-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: var(--radius-sm); background: none; color: inherit; font: 500 13px/1.4 var(--font-ui); text-align: left; cursor: pointer; }
.tool-item:hover { background: var(--accent-soft); }
.tool-item svg { color: var(--muted); flex-shrink: 0; }
/* Selector de tema (Herramientas → Tema): una opción por tema, cada una con su muestrario real de paleta
   (los swatches son literales porque retratan la paleta destino, no el tema en uso). La elección viva
   se marca con aria-pressed; el resto del menú sigue el lenguaje de .nav-more > div (§26). */
.theme-menu { min-width: 232px; }
.theme-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--radius-sm); background: none; color: inherit; font: 500 13px/1.35 var(--font-ui); text-align: left; cursor: pointer; }
.theme-opt:hover { background: var(--accent-soft); }
.theme-opt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.theme-opt .swatch { display: inline-flex; flex: none; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.theme-opt .swatch i { display: block; width: 13px; height: 20px; }
.theme-opt .swatch i + i { border-left: 1px solid #00000014; }
.theme-opt .opt-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.theme-opt .opt-text small { color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.3; }
.theme-sep { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
/* Selector de tema (2026-10-03, tercera pasada): TIRA CENTRADA al pie, sin combo ni flotante.
   Cada tema es una miniatura clicable: una maqueta en miniatura de cómo se ve (fondo del tema,
   dos líneas de «texto» con su tinta y un botón con su acento) + el nombre debajo. Un clic aplica;
   aria-pressed marca el activo. Los literales del .mpreview son intencionados: retratan la paleta
   DESTINO, no el tema en uso (misma regla que los swatches viejos). .theme-opt conserva el contrato
   con app.js (data-theme-id + aria-pressed). */
.theme-strip { width: 100%; margin-left: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 6px 14px; padding-top: 4px; border-top: 1px solid var(--line); }
.theme-strip .theme-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px; padding: 5px 4px 4px; border: 1px solid transparent; border-radius: var(--radius-sm); background: none; color: var(--muted); font: 500 10px/1.25 var(--font-ui); cursor: pointer; text-align: center; }
.theme-strip .theme-opt:hover { border-color: var(--line); color: var(--ink); }
.theme-strip .theme-opt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); font-weight: 700; }
.theme-strip .mpreview { position: relative; display: block; width: 52px; height: 34px; border: 1px solid var(--line); border-radius: 6px; }
.theme-strip .msheet { position: absolute; inset: 4px; border-radius: 4px; box-shadow: 0 1px 2px rgba(8,12,22,.18); }
.theme-strip .mline { position: absolute; top: 10px; left: 9px; width: 30px; height: 3px; border-radius: 2px; opacity: .9; }
.theme-strip .mline.short { top: 16px; width: 19px; }
.theme-strip .maccent { position: absolute; right: 8px; bottom: 7px; width: 12px; height: 5px; border-radius: 3px; }
.theme-strip .mname { width: 100%; overflow-wrap: anywhere; }
/* FASE 10 — bottom navigation (sólo móvil; ver media query <=780px). */
.bottom-nav { display: none; }
.header-actions { gap: 12px; font-size: 13px; }
/* Buscador global en el header: protagonista pero sin devorar la fila (header despejado). */
.header-search { position: relative; flex: 1 1 340px; max-width: 420px; min-width: 180px; }
.search-input-wrap { display: flex; flex-direction: row; align-items: center; gap: 10px; margin: 0; padding: 0 16px; height: 46px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: inset 0 1px 2px #0000000a; transition: border-color .15s, box-shadow .15s; }
.search-input-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); background: var(--bg); }
.search-input-wrap svg { flex-shrink: 0; color: var(--muted); width: 20px; height: 20px; }
/* El ID sube la especificidad por encima de `input:not([type=checkbox])...` (0,3,1) que imponía borde/fondo/ancho propios. */
.search-input-wrap input, #global-search-input { flex: 1; width: auto; border: 0; background: transparent; appearance: none; -webkit-appearance: none; font: inherit; font-size: 15px; color: var(--ink); padding: 0; outline: none; box-shadow: none; min-width: 0; height: 100%; }
.search-input-wrap input::-webkit-search-decoration, .search-input-wrap input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.search-input-wrap input::placeholder, #global-search-input::placeholder { color: var(--muted); }
.search-dropdown { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 80; min-width: min(360px, 90vw); overflow-x: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); max-height: 60vh; overflow-y: auto; }
.search-dropdown [role="option"] { display: block; text-decoration: none; color: var(--ink); padding: 12px 16px; border-bottom: 1px solid var(--line); transition: background .1s; }
.search-dropdown [role="option"]:last-child { border-bottom: 0; }
.search-dropdown [role="option"]:hover, .search-dropdown [role="option"].active { background: var(--accent-soft); }
.search-dropdown .sd-type { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; margin-right: 8px; vertical-align: middle; }
.sd-type-book { background: var(--accent-soft); color: var(--accent); }
.sd-type-object { background: var(--warm-soft, #fdf0e4); color: var(--warm); }
.sd-type-short_read { background: var(--ok-soft); color: var(--ok); }
.sd-type-collection { background: #ede9fe; color: #7c3aed; }
.search-dropdown .sd-title { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-dropdown .sd-meta { font-size: 13px; color: var(--muted); margin-top: 3px; }
.search-dropdown .sd-section { padding: 6px 14px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--bg); border-bottom: 1px solid var(--line); }
.search-dropdown .sd-empty { padding: 20px 14px; text-align: center; color: var(--muted); font-size: 13px; }
.search-dropdown .sd-more { display: block; text-align: center; padding: 12px; font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; border-top: 1px solid var(--line); }
.search-dropdown .sd-more:hover { background: var(--accent-soft); }
.button { border: 1px solid transparent; background: var(--accent); color: var(--surface); padding: 13px 22px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-size: 13px; font-weight: 550; min-height: 46px; line-height: 1.4; transition: background .15s, transform .15s; }
.button:hover { background: var(--accent-hover); color: var(--surface); transform: translateY(-1px); }
.button.secondary { color: var(--ink); background: transparent; border-color: var(--line); }
.button.secondary:hover { background: var(--accent-soft); }
.button.ghost { color: var(--accent); background: transparent; border-color: transparent; }
.button.ghost:hover { background: var(--accent-soft); color: var(--accent-hover); }
.button.danger { color: #fff; background: var(--danger); border-color: transparent; }
.button.danger:hover { background: color-mix(in srgb, var(--danger) 85%, #000); color: #fff; }
.button.small { padding: 9px 16px; min-height: 38px; font-size: 12px; }
.button.full { width: 100%; }
.button:disabled { opacity: .55; cursor: wait; transform: none; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); width: 36px; height: 36px; }
.icon-button:hover { background: var(--accent-soft); }
.nav-toggle { display: none; }
.bell { position: relative; color: inherit; text-decoration: none; }
.bell-badge { position: absolute; top: 1px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--warm); color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; }
/* Aviso global del admin y cintillo de mantenimiento: barra fina bajo la cabecera, en todas las paginas. */
.site-notice { border-bottom: 1px solid var(--line); background: var(--accent-soft); color: var(--ink, inherit); font-size: 14px; }
.site-notice-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding-top: 9px; padding-bottom: 9px; }
.site-notice-text { flex: 1 1 auto; min-width: 0; }
.site-notice-link { flex: 0 0 auto; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.site-notice--warn { background: #fdeee6; border-bottom-color: #f0c9b5; color: #7c2d12; }
.site-notice--success { background: #e8f6ee; border-bottom-color: #bfe4cd; color: #14603a; }
.notif-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.notif { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.notif.unread { border-color: var(--accent); background: var(--accent-soft); }
.notif-icon { flex: 0 0 auto; margin-top: 2px; color: var(--accent); }
.notif.unread .notif-icon { color: var(--warm); }
.notif-form { flex: 1 1 auto; margin: 0; }
.notif-body { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
div.notif-body { cursor: default; }
.notif-text { font-size: 15px; }
.notif.unread .notif-text { font-weight: 600; }
.notif-time { font-size: 12px; }
/* ── MENSAJERÍA INTERNA (migración 102) ─────────────────────────────── */
.mail { position: relative; color: inherit; text-decoration: none; }
.messages-page .msg-actions, .compose-page .msg-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.msg-tabs { display: flex; gap: 6px; margin: 4px 0 18px; border-bottom: 1px solid var(--line); }
.msg-tab { padding: 8px 14px; border-bottom: 2px solid transparent; color: var(--muted, inherit); text-decoration: none; font-weight: 600; font-size: 14px; }
.msg-tab:hover { color: var(--accent); }
.msg-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.msg-tab-count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--warm); color: #fff; font-size: 11px; text-align: center; }
.msg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.msg-row { display: flex; align-items: stretch; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); transition: border-color .15s ease; }
.msg-row:hover { border-color: var(--accent); }
.msg-row.unread { border-color: var(--accent); background: var(--accent-soft); }
.msg-open { flex: 1 1 auto; display: grid; grid-template-columns: minmax(120px, 1fr) 2fr auto; gap: 12px; align-items: center; padding: 13px 16px; color: inherit; text-decoration: none; min-width: 0; }
.msg-who { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-subject { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-time { font-size: 12px; white-space: nowrap; }
.msg-del-form { flex: 0 0 auto; display: flex; align-items: center; margin-right: 8px; }
.msg-del { opacity: .5; }
.msg-del:hover { opacity: 1; color: var(--warm); }
@media (max-width: 640px) { .msg-open { grid-template-columns: 1fr auto; } .msg-subject { grid-column: 1 / -1; order: 3; } }
/* Conversación */
.msg-thread { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.msg-post { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); padding: 14px 16px; }
.msg-post.mine { border-color: var(--accent); background: var(--accent-soft); }
.msg-post-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin-bottom: 8px; font-size: 13px; }
.msg-post-who { font-weight: 700; }
.msg-post-arrow { font-size: 12px; }
.msg-post-time { margin-left: auto; font-size: 12px; white-space: nowrap; }
.msg-post-body { font-size: 15px; line-height: 1.55; white-space: normal; }
.reply-card { margin-top: 4px; }
/* Selector de personas (autocompletado «Para») */
.people-field { position: relative; margin-bottom: 14px; }
.people-selected { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.people-selected:focus-within { border-color: var(--accent); }
.person-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent); font-size: 13px; font-weight: 600; }
.person-chip-out { border: 0; background: none; color: inherit; cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; opacity: .7; }
.person-chip-out:hover { opacity: 1; color: var(--warm); }
.people-input { flex: 1 1 160px; min-width: 120px; border: 0; background: none; color: inherit; font: inherit; padding: 6px 4px; outline: none; }
.people-empty { padding: 0 4px; }
.people-results { list-style: none; margin: 4px 0 0; padding: 6px; position: absolute; z-index: 30; left: 0; right: 0; max-height: 260px; overflow: auto; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 12px 30px rgba(0,0,0,.14); }
.people-results[hidden] { display: none; }
.person-result { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.person-result:hover, .person-result.is-active { background: var(--accent-soft); }
.person-result-name { font-weight: 600; }
.person-none { padding: 10px 12px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); background: none; border: 0; padding: 0; font-size: 13px; font-weight: 500; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.small-link { font-size: 12px; color: var(--muted); }
.hero { min-height: 636px; display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 72px; padding-top: 66px; padding-bottom: 72px; }
.hero h1 { font-size: clamp(42px, 4.35vw, 65px); line-height: 1.14; margin: 25px 0; letter-spacing: -.052em; }
.hero h1 em { display: inline-block; margin-top: 8px; }
.hero-description { color: var(--muted); font-size: 17px; line-height: 1.8; max-width: 450px; margin-bottom: 32px; }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 7px; }
.hero-note { font-size: 11px; color: var(--muted); margin: 20px 0 0; display: flex; gap: 7px; align-items: center; }
.hero-art { position: relative; display: grid; place-items: center; padding: 18px 10px; }
.orb { position: absolute; z-index: -1; }
.orb-one { width: 350px; height: 410px; background: #e0eaf3; border-radius: 180px 180px 30px 30px; transform: rotate(-12deg); top: -15px; left: 5px; }
.orb-two { width: 155px; height: 155px; background: #dce7f2; border-radius: 50%; bottom: -10px; right: 0; }
.reading-preview { background: var(--surface); color: var(--ink); width: 365px; padding: 26px 32px 20px; box-shadow: var(--shadow-md), 0 0 0 1px var(--line); border-radius: var(--radius-md); transform: rotate(2deg); }
.preview-top { display: flex; justify-content: space-between; align-items: center; font-size: 10px; letter-spacing: .04em; color: var(--muted); padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.preview-top span:first-child { display: flex; align-items: center; gap: 7px; }
.reading-preview > .eyebrow { font-size: 8px; }
.reading-preview h2 { font-size: 32px; margin-bottom: 22px; }
.reading-preview > p:not(.eyebrow) { font: 13px/1.9 var(--font-reading); color: var(--muted); }
.preview-play { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--line); margin-top: 22px; padding-top: 18px; font-size: 11px; color: var(--accent); }
.preview-play > small { margin-left: auto; color: var(--muted); }
.floating-note { position: absolute; bottom: 30px; left: -30px; display: flex; align-items: center; gap: 15px; padding: 15px 23px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow); font-size: 33px; color: var(--warm); transform: rotate(-5deg); }
.floating-note span { color: var(--muted); font-size: 11px; line-height: 1.6; }
.floating-note strong { font-weight: 600; color: var(--ink); }
.benefits { border-block: 1px solid var(--line); padding: 28px 20px; display: flex; justify-content: space-between; gap: 24px; }
.benefits > div { display: flex; align-items: center; gap: 17px; color: var(--accent); }
.benefits span { display: flex; flex-direction: column; gap: 3px; }
.benefits strong { font-weight: 550; color: var(--ink); font-size: 13px; }
.benefits small { font-size: 11px; color: var(--muted); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.section-heading h2 { margin-bottom: 0; }
.section-heading .eyebrow { margin-bottom: 9px; }
/* Cinco libros por fila exactos en escritorio (decisión del usuario): columnas fijas en lugar
   de auto-fill, que dejaba 6 o 7 según el ancho. Colapsa a 4 (≤1100px) y 2 (≤780px). */
.book-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px; }
.book-card { min-width: 0; }
.cover-link { display: block; position: relative; overflow: hidden; border-radius: var(--radius-sm); background: var(--accent-soft); }
.book-cover, .generated-cover { width: 100%; aspect-ratio: 8 / 11; height: auto; object-fit: cover; transition: transform .35s; }
.cover-link:hover .book-cover { transform: scale(1.025); }
.cover-read { position: absolute; bottom: 15px; left: 50%; transform: translate(-50%, 10px); opacity: 0; background: color-mix(in srgb, var(--surface) 92%, transparent); border-radius: var(--radius-sm); padding: 8px 15px; color: var(--accent-hover); font-size: 12px; display: flex; align-items: center; gap: 8px; white-space: nowrap; transition: .2s; }
.cover-link:hover .cover-read { opacity: 1; transform: translate(-50%, 0); }
.book-card-body { padding: 18px 1px 0; }
.book-kind { font-size: 8px; letter-spacing: .13em; color: var(--warm); margin-bottom: 7px; }
.book-card h3 { font-family: Georgia, serif; font-size: 20px; font-weight: 400; margin-bottom: 5px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.book-card-body > .muted { font-size: 12px; margin-bottom: 12px; }
.book-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 10px; color: var(--muted); }
.book-meta > span { display: inline-flex; gap: 5px; align-items: center; }
.generated-cover { container-type: inline-size; background: linear-gradient(160deg, var(--accent-soft), var(--surface)); padding: 11%; display: flex; flex-direction: column; justify-content: space-between; color: var(--accent-hover); position: relative; overflow: hidden; }
/* La chispa de la portada generada es ámbar de marca: reconocibilidad «esto es un OA Lumbre» (§16). */
.generated-cover i { color: var(--lumbre-amber); }
.generated-cover > span { font-size: clamp(7px, 3.4cqw, 9px); letter-spacing: .2em; }
.generated-cover strong { font: 400 clamp(16px, 11.5cqw, 32px)/1.2 Georgia, serif; overflow-wrap: anywhere; }
.generated-cover i { font-size: clamp(30px, 23cqw, 65px); align-self: center; font-style: normal; }
.generated-cover small { font-size: clamp(9px, 4.3cqw, 12px); }
.card-progress { display: flex; gap: 8px; align-items: center; margin-top: 14px; font-size: 10px; color: var(--accent); }
progress { appearance: none; height: 4px; border: 0; border-radius: 5px; background: var(--line); width: 100%; accent-color: var(--accent); }
progress::-webkit-progress-bar { background: var(--line); border-radius: 5px; }
progress::-webkit-progress-value { background: var(--accent); border-radius: 5px; }
progress::-moz-progress-bar { background: var(--accent); }
.card-progress span { flex-shrink: 0; }
.upload-banner { background: var(--accent-soft); border-radius: var(--radius-md); padding: 48px; display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-bottom: 70px; position: relative; overflow: hidden; }
.upload-banner h2 { font-size: 35px; }
.upload-banner p:not(.eyebrow) { color: var(--muted); font-size: 13px; margin-bottom: 0; }
.upload-banner .button { z-index: 1; flex-shrink: 0; }
.banner-symbol { position: absolute; right: -20px; bottom: -105px; font-size: 370px; line-height: 1; opacity: .045; }
.site-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; border-top: 1px solid var(--line); padding: 36px 56px; color: var(--muted); font-size: 11px; }
.site-footer .brand { font-size: 23px; color: var(--ink); }
.site-footer p { margin: 0; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-left: auto; }
/* Liga de personal a la analitica interna: en su propia fila y centrada, lejos
   de la esquina inferior derecha donde flotan el chip de la Brujula y el boton subir. */
.site-footer .footer-analytics { width: 100%; margin-left: 0; justify-content: center; text-align: center; }
/* Pestañas CSS-only del informe de visitantes (/admin/visitantes): radio + :checked ~ paneles.
   Sin JS inline => no exige relajar la CSP. Prefijo .va- para no colisionar con clases globales. */
.va-tabs { margin-top: 14px; }
.va-r { position: absolute; opacity: 0; width: 1px; height: 1px; }
.va-tablist { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.va-tab { padding: 8px 14px; border-radius: 8px 8px 0 0; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; border: 1px solid transparent; border-bottom: 0; user-select: none; }
.va-tab:hover { color: var(--ink); }
.va-panel { display: none; }
#va-r1:checked ~ .va-p1, #va-r2:checked ~ .va-p2, #va-r3:checked ~ .va-p3, #va-r4:checked ~ .va-p4, #va-r5:checked ~ .va-p5, #va-r6:checked ~ .va-p6, #va-r7:checked ~ .va-p7, #va-r8:checked ~ .va-p8 { display: block; }
#va-r1:checked ~ .va-tablist label[for="va-r1"], #va-r2:checked ~ .va-tablist label[for="va-r2"], #va-r3:checked ~ .va-tablist label[for="va-r3"], #va-r4:checked ~ .va-tablist label[for="va-r4"], #va-r5:checked ~ .va-tablist label[for="va-r5"], #va-r6:checked ~ .va-tablist label[for="va-r6"], #va-r7:checked ~ .va-tablist label[for="va-r7"], #va-r8:checked ~ .va-tablist label[for="va-r8"] { color: var(--ink); background: var(--surface); border-color: var(--line); }
#va-r1:focus-visible ~ .va-tablist label[for="va-r1"], #va-r2:focus-visible ~ .va-tablist label[for="va-r2"], #va-r3:focus-visible ~ .va-tablist label[for="va-r3"], #va-r4:focus-visible ~ .va-tablist label[for="va-r4"], #va-r5:focus-visible ~ .va-tablist label[for="va-r5"], #va-r6:focus-visible ~ .va-tablist label[for="va-r6"], #va-r7:focus-visible ~ .va-tablist label[for="va-r7"], #va-r8:focus-visible ~ .va-tablist label[for="va-r8"] { outline: 2px solid var(--accent); outline-offset: 2px; }
.kpi-num { display: block; font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.kpi-cap { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
/* Barra proporcional de las tablas «Por día» y «Agentes IA»: antes reutilizaba .chip (fondo blanco
   con borde) y quedaba invisible sobre la tabla clara. Ahora es una barra sólida con el color de tema. */
.va-bar { display: inline-block; height: 12px; min-width: 3px; border-radius: 6px; background: var(--accent); vertical-align: middle; }
.va-bar--alt { background: var(--warm); }
.site-footer small { width: 100%; font-size: 10px; }
/* Contador discreto de visitantes online (migración 101): bajo el firmante, en tono apagado. */
.site-online { width: 100%; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; opacity: .72; }
.site-online-dot { width: 7px; height: 7px; border-radius: 50%; background: #3fb950; box-shadow: 0 0 0 0 rgba(63, 185, 80, .5); animation: site-online-pulse 2.4s ease-out infinite; flex: none; }
@keyframes site-online-pulse { 0% { box-shadow: 0 0 0 0 rgba(63, 185, 80, .5); } 70% { box-shadow: 0 0 0 5px rgba(63, 185, 80, 0); } 100% { box-shadow: 0 0 0 0 rgba(63, 185, 80, 0); } }
@media (prefers-reduced-motion: reduce) { .site-online-dot { animation: none; } }
.site-online-members { opacity: .8; }
.site-online-members .site-online-dot { background: #58a6ff; box-shadow: 0 0 0 0 rgba(88, 166, 255, .5); }
.library-layout { display: grid; grid-template-columns: 215px minmax(0, 1fr); gap: 54px; padding-top: 48px; padding-bottom: 80px; min-height: 75vh; }
.library-sidebar { border-right: 1px solid var(--line); padding-right: 25px; }
.library-sidebar > h2 { font-size: 27px; margin-bottom: 25px; }
.library-sidebar .eyebrow { font-size: 8px; }
.library-sidebar nav { display: flex; flex-direction: column; gap: 5px; }
.library-sidebar nav a { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 7px; font-size: 12px; color: var(--muted); }
.library-sidebar nav a:hover, .library-sidebar nav .active { color: var(--accent); background: var(--accent-soft); }
.library-sidebar nav a:nth-child(8) { margin-top: 18px; }
.sidebar-note { margin-top: 42px; background: var(--accent-soft); padding: 25px 17px; border-radius: var(--radius-md); font-size: 12px; }
.sidebar-note > span { color: var(--warm); font-size: 25px; }
.sidebar-note p { margin-top: 10px; }
.sidebar-note a { font-size: 10px; color: var(--accent); }
.library-main .section-heading h1 { font-size: 37px; margin-bottom: 12px; }
.library-main .section-heading p:last-child { font-size: 13px; margin-bottom: 0; }
.search-form { display: flex; gap: 13px; align-items: center; padding: 7px 8px 7px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; margin-bottom: 35px; color: var(--muted); }
.search-form input { border: 0; background: transparent; padding: 8px 0; width: 100%; min-width: 0; font-size: 13px; color: var(--ink); }
.discover-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: -20px 0 30px; }
.discover-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); }
.discover-filters input, .discover-filters select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font-size: 13px; min-width: 130px; }
.discover-filters .chip { align-self: center; }
@media (max-width: 720px) { .discover-filters { gap: 8px; } .discover-filters input, .discover-filters select { min-width: 0; width: 100%; } .discover-filters label { flex: 1 1 45%; } }
.list-heading { display: flex; align-items: center; justify-content: space-between; margin: 30px 0 23px; }
/* Móvil (≤640): el control «Por página» en una línea nowrap empujaba el heading fuera del
   viewport (+20px medidos en /library?stage=… móvil 2026-10-01). Que envuelva sin romper nada. */
@media (max-width: 640px) { .list-heading { flex-wrap: wrap; } .list-heading > * { min-width: 0; } }
.list-heading h2 { font-size: 24px; margin: 0; }
.list-heading > span { font-size: 11px; }
.list-heading .per-page { display: inline-flex; align-items: center; gap: 7px; }
.list-heading .per-page .chip { padding: 5px 11px; font-size: 11px; }
.library-grid { gap: 22px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Tarjetas compactas del catálogo: título algo menor para que quepan más libros por fila. */
.library-grid .book-card-body { padding-top: 12px; }
.library-grid .book-card h3 { font-size: 16px; }
.pagination { display: flex; justify-content: center; gap: 20px; margin-top: 35px; }
.empty-state { text-align: center; border: 1px dashed var(--line); border-radius: var(--radius-md); padding: 55px 25px; }
.empty-state > svg { color: var(--accent); margin-bottom: 22px; }
.empty-state h2 { font-size: 29px; }
.empty-state p { color: var(--muted); }
.form-card { background: var(--surface); padding: 36px; border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow); }
.form-card h2 { font-size: 31px; }
.form-card > .muted { font-size: 13px; margin-bottom: 28px; }
label { display: flex; flex-direction: column; gap: 7px; font-size: 12px; font-weight: 550; margin-bottom: 18px; }
input:not([type="checkbox"]):not([type="range"]):not([type="radio"]), select, textarea { padding: 11px 13px; border: 1px solid var(--line); background: var(--bg); border-radius: 6px; color: var(--ink); width: 100%; min-width: 0; }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted); font-size: 12px; font-weight: 400; }
.checkbox { display: flex; flex-direction: row; align-items: flex-start; gap: 9px; color: var(--muted); font-weight: 400; }
.checkbox input { accent-color: var(--accent); margin-top: 4px; }
.checkbox a { text-decoration: underline; }
/* Selector de propósito en el registro: la regla global de label (columna) separa el radio del texto, así que lo volvemos fila compacta. */
.purpose-select { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 4px; margin: 0 0 18px; }
.purpose-select > legend { font-weight: 700; font-size: 12px; color: var(--ink); padding: 0 6px; }
.purpose-options { display: grid; gap: 0; }
.purpose-option { display: flex; flex-direction: row; align-items: center; gap: 10px; font-size: 14px; font-weight: 550; margin-bottom: 12px; cursor: pointer; }
.purpose-option input[type="radio"] { accent-color: var(--accent); width: 18px; height: 18px; flex-shrink: 0; margin: 0; }
/* Privacidad en las estadísticas (105): grupo de radios + apodo dentro del formulario de perfil. */
.stats-privacy { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 14px; margin: 14px 0; display: grid; gap: 9px; }
.stats-privacy > legend { font-weight: 700; font-size: .9rem; color: var(--ink); padding: 0 6px; }
.stats-privacy .checkbox { cursor: pointer; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-foot { text-align: center; font-size: 12px; margin: 25px 0 0; color: var(--muted); }
.form-foot a { color: var(--accent); text-decoration: underline; }
.form-error { border-radius: var(--radius-sm); padding: 12px; background: var(--danger-soft); color: var(--danger); font-size: 13px; }
.auth-layout { display: grid; grid-template-columns: 1fr 440px; gap: 100px; align-items: center; padding-block: 80px; min-height: 76vh; }
.auth-intro h1 { font-size: 46px; }
.auth-intro > p:not(.eyebrow) { color: var(--muted); }
.auth-resume { margin-top: 18px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); font-size: 15px; color: var(--ink); }
.auth-resume strong { color: var(--accent); }
.auth-quote { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 35px; }
.auth-quote > span { font: 65px Georgia, serif; color: var(--warm); height: 55px; display: block; }
.auth-quote blockquote { margin: 0 0 20px; font: 22px/1.6 Georgia, serif; max-width: 440px; }
.auth-quote small { font-size: 9px; letter-spacing: .1em; color: var(--muted); }
.avatar { width: 31px; height: 31px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-size: 12px; flex-shrink: 0; }
.account-menu { position: relative; }
.account-menu summary { list-style: none; display: flex; align-items: center; gap: 8px; }
/* z-45: .site-header no crea contexto de apilamiento, así que este popover compite globalmente con
   .school-bar (sticky, z-35) — con z-20 quedaba detrás de la franja escolar. Mismo umbral que
   `.nav-more > div` (45); sigue por debajo del buscador (80). */
.account-menu > div { position: absolute; right: 0; top: 42px; min-width: 230px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 20px; background: var(--surface); z-index: 45; box-shadow: var(--shadow); }
.account-menu p { font-size: 12px; overflow-wrap: anywhere; }
.upload-zone { padding: 36px 20px; border: 1px dashed var(--accent); border-radius: var(--radius-sm); align-items: center; text-align: center; background: var(--accent-soft); gap: 12px; margin-bottom: 28px; }
.upload-zone > span { color: var(--muted); font-size: 11px; }
.upload-zone input { max-width: 360px; font-size: 11px; }
.back-link { display: inline-block; font-size: 12px; color: var(--muted); margin-bottom: 32px; }
.book-detail { display: grid; grid-template-columns: 280px 1fr; gap: 60px; align-items: center; margin-bottom: 64px; }
.detail-cover img, .detail-cover .generated-cover { width: 100%; height: auto; border-radius: var(--radius-sm); box-shadow: 8px 12px 25px #0001; }
.detail-copy h1 { font-size: 49px; }
.book-author { font-size: 17px; color: var(--muted); }
.description { max-width: 680px; color: var(--muted); font-size: 14px; }
.detail-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 18px 0 10px; color: var(--muted); font-size: 11px; }
.detail-stats span { display: inline-flex; align-items: center; gap: 7px; }
.detail-stats strong { color: var(--ink); }
.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0; }
.inline-form label { margin: 0; font-weight: 400; color: var(--muted); }
.inline-form select { width: auto; font-size: 12px; padding: 8px; }
.detail-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; border-top: 1px solid var(--line); padding-top: 48px; }
.detail-columns h2 { font-size: 28px; }
.chapter-list { margin: 20px 0 35px; padding-left: 25px; color: var(--muted); font-size: 12px; }
.chapter-list li { padding-left: 6px; border-bottom: 1px solid var(--line); }
.chapter-list a { display: flex; align-items: center; gap: 12px; padding: 15px 0; color: var(--ink); }
.chapter-list a span { margin-right: auto; }
.chapter-list small { white-space: nowrap; color: var(--muted); }
.panel { border: 1px solid var(--line); background: var(--surface); border-radius: 9px; padding: 22px; margin-bottom: 18px; }
.panel summary { font-size: 13px; font-weight: 550; }
.panel[open] summary { margin-bottom: 20px; }
.panel p { font-size: 13px; }
.panel form + form { margin-top: 20px; }
.admin-fold > summary { display: flex; align-items: center; gap: 9px; list-style: none; cursor: pointer; font-size: 19px; font-weight: 600; color: var(--ink); }
.admin-fold > summary::-webkit-details-marker { display: none; }
.admin-fold > summary::before { content: '\25B8'; font-size: 13px; color: var(--muted); transition: transform .2s ease; }
.admin-fold[open] > summary::before { transform: rotate(90deg); }
.admin-fold[open] > summary { margin-bottom: 4px; }
.admin-book-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 4px; }
.admin-book-filters input[type="search"] { flex: 1 1 220px; min-width: 180px; }
.admin-book-filters select { width: auto; font-size: 13px; padding: 9px 10px; }
.admin-bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.admin-bulk-bar .bulk-sep { font-size: 12px; color: var(--muted); margin-left: 6px; }
.admin-bulk-bar select { width: auto; font-size: 13px; padding: 8px 10px; }
.admin-fold table td input[type="checkbox"], .admin-fold table th input[type="checkbox"] { width: 17px; height: 17px; cursor: pointer; }
/* Tablero /admin compacto: cintillo de cifras y cuadrícula de fichas de herramienta.
   Todo escopetado bajo .admin-* para no colisionar con .chip/.panel globales. */
.admin-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 26px; }
.admin-chips .chip { padding: 5px 13px; font-size: 12px; }
.admin-chips .chip strong { color: var(--ink); font-size: 15px; }
.admin-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin: 12px 0 30px; }
.admin-tile { display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
a.admin-tile:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); color: inherit; }
a.admin-tile:hover b { color: var(--accent); }
.admin-tile > svg { color: var(--muted); margin-top: 2px; }
.admin-tile b { display: block; font-size: 13.5px; line-height: 1.35; }
.admin-tile em { display: block; font-style: normal; font-size: 12px; line-height: 1.45; color: var(--muted); }
.admin-tile form { margin-top: 7px; }
.admin-fold h3 { font-size: 15px; margin: 18px 0 8px; }
.admin-fold article.panel { padding: 14px 16px; margin-bottom: 12px; }
.admin-fold article.panel h4 { margin: 0 0 6px; font-size: 14px; }
@media (max-width: 720px) { .admin-tiles { grid-template-columns: 1fr 1fr; gap: 8px; } .admin-tile { padding: 11px 12px; } }
.taxonomy-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.taxonomy-cell select { width: auto; font-size: 12px; padding: 7px 8px; }
.taxonomy-cell input { flex: 1 1 140px; min-width: 120px; font-size: 12px; padding: 7px 8px; }
.perm-form { gap: 8px; }
.perm-form .checkbox { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 12px; color: var(--muted); }
/* Ajuste de cuenta del admin (correo + contraseña de cualquier usuario, 096/097): columna estrecha,
   campos apilados y legibles sin etiquetas visibles (van en .sr-only). */
.account-form { flex-direction: column; align-items: stretch; gap: 6px; min-width: 230px; }
.account-form input:not([type="checkbox"]) { width: 100%; font-size: 12.5px; padding: 7px 9px; margin: 0; }
.account-form .checkbox-sm { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 12px; font-weight: 400; color: var(--muted); }
.account-form .checkbox-sm input { width: auto; margin: 0; accent-color: var(--accent); }
.account-form .button { align-self: flex-start; }
/* Panel de análisis de la dirección (/organizations/{slug}/analisis): barra de ciclo + pestañas + tablas. */
.org-manage-links { margin: 12px 0 0; }
.an-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 6px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.an-period { display: flex; align-items: flex-end; gap: 10px; }
.an-filter-label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.an-filter-label select, .an-filter-label input { font-size: 13px; padding: 6px 8px; margin: 0; min-width: 150px; }
.an-student-filters { margin: 4px 0 14px; }
.an-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.an-tab { padding: 7px 13px; border-radius: 999px; font-size: 13px; color: var(--ink); text-decoration: none; }
.an-tab:hover { background: var(--bg); }
.an-tab.on { background: var(--accent); color: #fff; font-weight: 600; }
.an-table td, .an-table th { white-space: nowrap; }
.an-table td:nth-child(n+4) { text-align: end; font-variant-numeric: tabular-nums; }
.an-table th:nth-child(n+4) { text-align: end; }
.an-table .an-progress { text-align: left; }
.an-progress .program-track { display: inline-block; width: 90px; vertical-align: middle; margin-right: 6px; }
.an-progress span { font-size: 12px; color: var(--muted); }
.an-person { display: flex; align-items: center; gap: 8px; white-space: normal; }
.an-person img { border-radius: 50%; flex: 0 0 auto; }
.an-on { display: inline-block; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-size: 11px; font-weight: 600; vertical-align: middle; }
.an-period-create { max-width: 560px; margin-top: 18px; }
.an-period-create label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.an-period-create .checkbox { flex-direction: row; align-items: center; font-weight: 400; }
.an-date-row { display: flex; gap: 12px; }
.an-date-row label { flex: 1; }
.share-links { display: flex; flex-wrap: wrap; gap: 10px; }
.danger-link { border: 0; background: none; color: var(--danger); font-size: 12px; padding: 5px 0; }
.comment, .review { margin-block: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--line); font-size: 13px; }
.comment > p:first-child { display: flex; gap: 10px; align-items: center; }
.comment small { font-size: 10px; color: var(--muted); }
.comment > details { margin-top: 10px; }
.user-text { overflow-wrap: anywhere; white-space: normal; }
.rating-stars { color: var(--warm); }
.badge { display: inline-block; background: var(--accent-soft); color: var(--accent); font-size: 10px; padding: 4px 8px; border-radius: 5px; }
.import-list { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.import-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 13px; }
.import-status { background: var(--accent-soft); padding: 18px; border-radius: var(--radius-sm); font-size: 13px; }
.import-status p { margin: 8px 0 0; }
.import-status-detail { font-size: 12px; color: var(--muted); }
.import-status-detail:not(:empty)::before { content: 'Último paso: '; font-weight: 600; }
.upload-progress-card { max-width: 620px; margin: 0 auto; }
.upload-progress-title { font-size: 18px; font-weight: 600; margin: 0 0 12px; }
.progress-track { height: 10px; background: var(--line); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width .25s ease; }
.upload-progress-pct { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.import-phases { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 11px; }
.import-phases li { display: flex; align-items: center; gap: 11px; font-size: 13px; color: var(--muted); }
.import-phases .phase-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); flex: 0 0 auto; }
.import-phases li.done { color: var(--ink); }
.import-phases li.done .phase-dot { background: var(--accent); border-color: var(--accent); }
.import-phases li.current { color: var(--ink); font-weight: 600; }
.import-phases li.current .phase-dot { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); animation: phase-pulse 1.3s ease-in-out infinite; }
.upload-progress-detail { font-size: 12px; color: var(--muted); margin: 16px 0 0; }
@keyframes phase-pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--accent-soft); } 50% { box-shadow: 0 0 0 6px transparent; } }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 35px 0; }
.stats-grid .panel { display: flex; flex-direction: column; }
.stats-grid strong { font: 40px Georgia, serif; }
.stats-grid span { color: var(--muted); font-size: 12px; }
.table-wrap { overflow-x: auto; margin: 25px 0 45px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
table { border-collapse: collapse; text-align: left; font-size: 12px; width: 100%; }
th, td { border-bottom: 1px solid var(--line); padding: 14px 17px; vertical-align: top; }
th { background: var(--accent-soft); font-weight: 550; }
/* FASE 8 — tablas -> cards/listas en móvil. */
@media (max-width: 780px) {
    .table-wrap { overflow: visible; border: 0; margin: 18px 0 32px; }
    .table-wrap table, .table-wrap thead, .table-wrap tbody, .table-wrap tr, .table-wrap th, .table-wrap td { display: block; width: auto; }
    .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .table-wrap tr { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); padding: 4px 0; margin-bottom: 12px; }
    .table-wrap td { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; border: 0; border-bottom: 1px solid var(--line); padding: 10px 14px; text-align: right; }
    .table-wrap tr td:last-child { border-bottom: 0; }
    .table-wrap td::before { content: attr(data-label); font-weight: 600; color: var(--muted); text-align: left; }
    .table-wrap td:not([data-label])::before { content: none; }
    .table-wrap td.log-message { display: block; text-align: left; }
}
.quote-page { text-align: center; min-height: 70vh; }
.quote-page blockquote { font: 30px/1.65 Georgia, serif; margin: 0 0 30px; }
.quote-mark { font: 90px Georgia, serif; color: var(--warm); height: 100px; display: block; }
.quote-page .actions { justify-content: center; margin-top: 35px; }
.prose p { line-height: 1.9; color: var(--muted); }
.prose h2 { margin-top: 35px; }
.flash { padding: 14px 30px; background: var(--accent-soft); text-align: center; font-size: 13px; }
.flash.error { background: var(--danger-soft); color: var(--danger); }
.page-head { margin-bottom: 22px; }
.page-head h1 { margin: 6px 0 8px; }
.summary-list { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.plain-list { list-style: none; padding: 0; margin: 0 0 16px; font-size: 13px; max-height: 260px; overflow: auto; }
.plain-list li { padding: 6px 0; border-bottom: 1px solid var(--line); }
/* Zona personal: notas de investigación y recomendaciones (Fase H) */
.panel-tabs { display: flex; gap: 6px; margin: 0 0 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.panel-tabs a.tab { padding: 10px 14px; font-size: 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; }
.panel-tabs a.tab.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.filter-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 22px; }
.filter-form input[type="search"] { flex: 1 1 240px; min-width: 0; }
.note-list, .recommendation-history { list-style: none; padding: 0; margin: 0; max-height: none; overflow: visible; display: flex; flex-direction: column; gap: 16px; }
.note-card { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px; background: var(--surface); }
.note-quote { margin: 0 0 12px; padding-left: 14px; border-left: 3px solid var(--warm); color: var(--muted); font-style: italic; }
.note-body { margin: 0 0 10px; line-height: 1.7; }
.note-label { margin: 0 0 8px; color: var(--warm); }
.note-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; margin-bottom: 8px; }
.note-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.note-actions { display: flex; gap: 8px; }
.rec-row { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px 18px; background: var(--surface); }
.rec-title { margin: 0 0 4px; font-size: 15px; }
.rec-message { margin: 6px 0; color: var(--muted); font-style: italic; }
.warn { color: var(--danger); }
.recommend-route { margin: 18px 0; }
.recommend-form { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.recommend-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
@media (max-width: 620px) { .rec-row { flex-direction: column; align-items: stretch; } }
.toast { position: fixed; left: 50%; bottom: 25px; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 13px 22px; border-radius: var(--radius-sm); box-shadow: var(--shadow); z-index: 100; font-size: 13px; max-width: calc(100vw - 30px); width: max-content; }
.error-page { max-width: 680px; margin: 10vh auto; padding: 30px; }
.error-page .brand { margin-bottom: 50px; }
.error-page .actions { margin-top: 25px; }
.sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 10px; left: 10px; background: var(--surface); padding: 10px; z-index: 100; }
/* Círculos de lectura (FASE 1) — mobile-first */
.list-title { font-size: 20px; margin: 34px 0 18px; }
.circle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.circle-card { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); min-width: 0; }
a.circle-card:hover { border-color: var(--accent); }
.circle-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.circle-card-body strong { font-size: 14px; overflow-wrap: anywhere; }
.circle-card-body small { font-size: 11px; }
.circle-card > form { flex-shrink: 0; }
.circle-thumb { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: grid; place-items: center; background: var(--accent-soft); }
.circle-thumb img { width: 100%; height: 100%; object-fit: cover; }
.circle-thumb.large { width: 92px; height: 92px; }
.circle-initial { font: 400 26px Georgia, serif; color: var(--accent); }
.circle-thumb.large .circle-initial { font-size: 44px; }
/* FASE 7 — círculos como comunidades de lectura. */
.community-card { align-items: flex-start; }
.circle-reading { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); font-size: 12px; }
.circle-reading svg { flex-shrink: 0; color: var(--accent); }
.circle-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 5px; }
.circle-enter { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--accent); }
.circle-create summary { cursor: pointer; list-style: none; display: inline-flex; }
.circle-create summary::-webkit-details-marker { display: none; }
.circle-create[open] summary { margin-bottom: 22px; }
.circle-create-form { display: flex; flex-direction: column; }
.circle-header { display: flex; gap: 22px; align-items: flex-start; margin-bottom: 20px; }
.circle-header-body { min-width: 0; }
.circle-header-body h1 { font-size: clamp(28px, 5vw, 42px); margin: 6px 0 10px; }
.circle-header-body .lead { font-size: 15px; margin-bottom: 12px; }
.circle-header-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-top: 14px; }
/* Cabecera simplificada (§5 entrada de curso): nombre → qué aprenderás → acción principal → temario.
   La acción principal manda; compartir/salir/exportar y el conteo de miembros pasan a secundario. */
.what-you-learn-label { font-weight: 700; }
.circle-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.circle-cta-row form { display: inline-flex; }
.course-primary { font-size: 16px; padding: 12px 22px; font-weight: 700; }
.circle-secondary-actions { margin-top: 10px; }
.circle-secondary-actions > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--muted); font-size: 13px; list-style: none; }
.circle-secondary-actions > summary::-webkit-details-marker { display: none; }
.circle-secondary-actions > summary:hover { color: var(--accent); }
.circle-secondary-body { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.circle-secondary-body .inline-form { display: inline-flex; }
.circle-header-meta { margin-top: 10px; opacity: .8; }
/* ── Cabecera-HERO del curso (2026-10-03): dos columnas en escritorio (texto + póster de portada),
      fila de chips con la dimensión real del curso bajo el título, y CTA destacado. En móvil la portada
      sube arriba como banda 16:9 y el texto debajo. Todo con tokens → claro/oscuro automático. */
.circle-hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; margin-bottom: 22px; }
.circle-hero-main { min-width: 0; }
.circle-hero-main h1 { font-size: clamp(28px, 5vw, 42px); line-height: 1.1; margin: 6px 0 12px; }
.circle-hero-main .lead { font-size: 15px; margin: 0 0 12px; }
.circle-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.hero-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: 12.5px; font-weight: 600; }
.hero-chip svg { color: var(--muted); flex: 0 0 auto; }
.hero-chip.is-free { background: color-mix(in srgb, var(--success, #2e9e5b) 14%, transparent); border-color: transparent; color: var(--success, #2e9e5b); }
.hero-chip.is-free svg { color: var(--success, #2e9e5b); }
.hero-chip.is-paid { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.circle-hero-aside { min-width: 0; }
.circle-hero-cover { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); background: var(--accent-soft); box-shadow: var(--shadow); display: grid; place-items: center; }
.circle-hero-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.circle-hero-cover.is-fallback { background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--accent) 14%, transparent)); }
.circle-hero-cover .circle-initial { font: 400 clamp(72px, 12vw, 104px)/1 Georgia, serif; color: var(--accent); }
@media (max-width: 820px) { .circle-hero { grid-template-columns: 1fr; gap: 18px; } .circle-hero-aside { order: -1; } .circle-hero-cover { aspect-ratio: 16 / 9; } }

/* Nube de conceptos recogida en un desplegable secundario. */
.cc-collapsed > summary.list-title { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.cc-collapsed > summary.list-title::-webkit-details-marker { display: none; }
.cc-collapsed[open] > summary.list-title svg { transform: rotate(90deg); }
/* Estados de aprendizaje real en el temario (evidencia de autoevaluación, no visitas). */
.route-obj-state { display: inline-flex; align-items: center; gap: 3px; color: var(--accent); font-size: 11px; font-weight: 700; white-space: nowrap; }
.route-object.is-completado .route-obj-state { color: var(--success, #2e9e5b); }
/* La Brújula: icono limpio en la barra (el texto «Mi aprendizaje» se retiró del header saturado;
   el botón se explica solo con title/aria-label y el panel lleva su propio encabezado). */
.compass-btn { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 0 10px; }
.circle-share-panel { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px; background: var(--surface); margin-bottom: 8px; animation: circle-share-in .2s ease; }
.circle-share-panel[hidden] { display: none; }
.circle-share-panel .eyebrow { margin-bottom: 6px; }
.circle-share-msg { display: block; margin-bottom: 14px; }
.circle-share-msg textarea { width: 100%; font: inherit; font-size: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px; resize: vertical; background: var(--bg); color: inherit; }
.circle-share-btns { display: flex; flex-wrap: wrap; gap: 10px; }
@keyframes circle-share-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .circle-share-panel { animation: none; } }
.circle-block { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 26px; }
.recommendation-list { display: flex; flex-direction: column; gap: 14px; }
.recommendation { border-left: 3px solid var(--warm); background: var(--accent-soft); padding: 16px 18px; border-radius: 0 8px 8px 0; }
.recommendation-text { font: 400 16px/1.6 Georgia, serif; margin-bottom: 10px; }
.recommendation-meta { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.recommendation-meta a { color: var(--accent); }
.book-kind.kind-public { color: var(--accent); }
.book-kind.kind-private { color: var(--warm); }
.circle-book-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.linklike { border: 0; background: none; color: var(--muted); font-size: 12px; padding: 6px 0; cursor: pointer; min-height: 32px; }
.linklike:hover { color: var(--danger); text-decoration: underline; }
.circle-add { margin-bottom: 16px; }
.circle-add > summary { cursor: pointer; font-size: 13px; font-weight: 550; }
.circle-add[open] > summary { margin-bottom: 20px; }
.circle-search { display: flex; gap: 10px; margin-bottom: 18px; }
.share-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.share-results form { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; }
.share-result-title { grid-column: 1 / -1; font-size: 13px; }
.share-results input[name="note"] { grid-column: 1; }
.share-results .button { grid-column: 2; }
.member-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.member-list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.member-name { font-size: 13px; flex: 1; min-width: 0; }
.badge-role { display: inline-block; background: var(--accent-soft); color: var(--accent); font-size: 10px; padding: 2px 7px; border-radius: 5px; }
.invite-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.invite-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.invite-link { flex: 1; min-width: 180px; font-size: 12px; }
.invite-message { flex-basis: 100%; margin: 2px 0 0; font-size: 12px; font-style: italic; }
.invite-form { display: flex; flex-direction: column; gap: 12px; }
.invite-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.invite-form input, .invite-form textarea { width: 100%; }
.invite-form .button { align-self: flex-start; }
.invite-banner { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius-md); background: var(--surface); }
.invite-banner .eyebrow { margin: 0 0 6px; }
.invite-banner p { margin: 4px 0; }
.invite-banner blockquote { margin: 10px 0; padding: 0; border: none; font-style: italic; color: var(--ink); }
/* FASE 2 — feed de actividad, progreso compartido, conversación y reseñas del círculo. */
.activity-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.feed-item { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.feed-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; align-self: center; }
.feed-item.feed-finished .feed-dot { background: var(--warm); }
.feed-item.feed-recommended .feed-dot, .feed-item.feed-reviewed .feed-dot { background: var(--ok); }
.feed-text { flex: 1; min-width: 0; font-size: 13px; line-height: 1.5; }
.feed-text a { color: var(--accent); }
.feed-time { font-size: 11px; white-space: nowrap; }
/* FASE 3 — objetivos colectivos del círculo. */
.goal-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.goal { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.goal.done { border-color: var(--warm); }
.goal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.goal-head strong { font: 400 18px/1.3 Georgia, serif; }
.goal-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #fff; background: var(--warm); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.goal-meta { font-size: 12px; margin: 4px 0 8px; }
.goal-bar { height: 8px; border-radius: 999px; background: var(--accent-soft); overflow: hidden; }
.goal-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease; }
.goal.done .goal-bar > span { background: var(--warm); }
.circle-book-page .cb-header { display: flex; gap: 22px; align-items: flex-start; margin-bottom: 8px; }
.cb-cover { width: 160px; flex-shrink: 0; }
.cb-cover img, .cb-cover .generated-cover { width: 100%; border-radius: var(--radius-sm); }
.cb-title { min-width: 0; }
.cb-title h1 { font-size: clamp(24px, 4vw, 34px); margin: 6px 0 8px; }
.cb-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.cb-myprogress { font-size: 13px; color: var(--muted); }
.cb-myprogress strong { color: var(--accent); }
.review-invite { border: 1px solid var(--warm); background: var(--accent-soft); border-radius: var(--radius-md); padding: 20px 22px; margin: 22px 0; }
.review-invite h2 { font-size: 22px; margin: 4px 0 14px; }
.progress-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.progress-list li { display: grid; grid-template-columns: minmax(90px, 160px) 1fr auto; align-items: center; gap: 12px; }
.progress-name { font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress-track { display: block; height: 8px; background: var(--accent-soft); border-radius: 99px; overflow: hidden; }
.progress-fill { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.progress-pct { font-size: 12px; color: var(--muted); min-width: 34px; text-align: right; }
.panel { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 16px; margin-bottom: 18px; }
.panel > summary { cursor: pointer; font-size: 13px; font-weight: 550; padding: 12px 0; }
.panel[open] > summary { margin-bottom: 12px; }
.panel form { display: flex; flex-direction: column; gap: 14px; padding-bottom: 16px; }
.review { border-top: 1px solid var(--line); padding: 14px 0; }
.review .avatar, .comment .avatar { margin-right: 8px; vertical-align: middle; }
.review p:first-child, .comment p:first-child { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; margin-bottom: 8px; }
.review .user-text, .comment .user-text { font: 400 15px/1.65 Georgia, serif; white-space: normal; }
.rating-stars { color: var(--warm); font-size: 12px; }
.badge { display: inline-block; background: var(--accent-soft); color: var(--accent); font-size: 10px; padding: 2px 8px; border-radius: 5px; }
.thread { display: flex; flex-direction: column; }
.comment { border-bottom: 1px solid var(--line); padding: 14px 0; }
.comment small { color: var(--muted); font-size: 11px; }
.comment form { display: inline; margin-left: auto; }
.thread-form { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.thread-form .button { align-self: flex-start; }
/* FASE 4 — comunidades de conocimiento: pestañas, lectura actual, esta semana, aprendizajes, performance, reflexiones, reacciones y respuestas. */
.circle-tabs { display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--line); margin: 4px 0 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.circle-tabs::-webkit-scrollbar { display: none; }
.circle-tabs a { flex-shrink: 0; display: inline-flex; align-items: center; font-size: 13px; font-weight: 550; color: var(--muted); padding: 12px 14px; min-height: 44px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.circle-tabs a:hover { color: var(--accent); }
.circle-tabs a.active { color: var(--accent); border-bottom-color: var(--accent); }
.current-reading-list { display: flex; flex-direction: column; gap: 16px; }
.current-reading { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; padding: 18px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius-md); background: var(--surface); }
.cr-cover { width: 92px; }
.cr-cover img, .cr-cover .generated-cover { width: 100%; border-radius: var(--radius-sm); }
.cr-body { min-width: 0; }
.cr-body h3 { font: 400 22px/1.25 Georgia, serif; margin: 4px 0 2px; overflow-wrap: anywhere; }
.cr-body h3 a { color: var(--ink); }
.cr-body h3 a:hover { color: var(--accent); }
.cr-stats { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0; padding: 0; font-size: 12px; color: var(--muted); }
.cr-stats strong { color: var(--accent); font-size: 14px; }
.cr-progress { height: 8px; border-radius: 999px; background: var(--accent-soft); overflow: hidden; }
.cr-progress > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.cr-collective { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.cr-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.cr-admin { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.cr-admin > summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.cr-dates { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 12px; }
.cr-dates label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.hint-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px dashed var(--line); border-radius: var(--radius-md); color: var(--muted); font-size: 14px; }
.hint-card svg { color: var(--accent); flex-shrink: 0; }
.hint-card strong { color: var(--ink); }
.week-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.week-stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.week-stat strong { font: 400 24px/1.1 Georgia, serif; color: var(--accent); }
.week-stat span { font-size: 12px; color: var(--muted); }
.week-stat.lead-stat { grid-column: 1 / -1; background: var(--accent-soft); border-color: transparent; }
.feed-item.feed-featured { background: var(--accent-soft); border-radius: var(--radius-sm); padding-inline: 10px; }
.feed-item.feed-reflected .feed-dot, .feed-item.feed-replied .feed-dot { background: var(--ok); }
.feed-item.feed-current .feed-dot { background: var(--accent); }
.knowledge-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.knowledge-item { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.knowledge-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; margin-bottom: 6px; }
.knowledge-head a { color: var(--accent); }
.kind-badge { display: inline-block; font-size: 10px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 5px; background: var(--accent-soft); color: var(--accent); }
.kind-badge.kind-reflection { background: var(--ok-soft); color: var(--ok); }
.knowledge-excerpt { font: 400 15px/1.6 Georgia, serif; margin-bottom: 6px; overflow-wrap: anywhere; }
.book-card.circle-book.is-current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.current-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 650; letter-spacing: .08em; color: #fff; background: var(--accent); padding: 3px 8px; border-radius: 5px; margin-bottom: 6px; }
.perf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.perf-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.perf-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.perf-name { font-size: 14px; }
.perf-book { font-size: 13px; color: var(--accent); overflow-wrap: anywhere; }
.perf-track { display: block; height: 7px; background: var(--accent-soft); border-radius: 99px; overflow: hidden; margin-top: 4px; }
.perf-fill { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.perf-metrics { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.perf-metrics > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.perf-metrics dt { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.perf-metrics dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.convo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.convo-item { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.convo-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; margin-bottom: 6px; }
.convo-head a { color: var(--accent); }
.convo-excerpt { font-size: 14px; line-height: 1.6; margin-bottom: 8px; overflow-wrap: anywhere; }
.convo-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; }
.react-form { display: inline; margin: 0; }
.react-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 6px 12px; min-height: 36px; cursor: pointer; font-size: 12px; transition: color .2s, border-color .2s, background .2s; }
.react-btn:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.react-btn.on { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); background: var(--danger-soft); }
.react-btn svg { width: 16px; height: 16px; }
.post-tools { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.applicable-idea { margin-top: 10px; padding: 12px 14px; border-left: 3px solid var(--warm); background: var(--accent-soft); border-radius: 0 8px 8px 0; font: 400 14px/1.6 Georgia, serif; }
.idea-tag { display: block; font: 600 10px/1 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--warm); margin-bottom: 6px; }
.reply-list { list-style: none; margin: 12px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.reply { display: flex; gap: 10px; }
.reply > div { min-width: 0; }
.reply strong { font-size: 13px; }
.reply .user-text { font-size: 14px; margin-top: 2px; }
.avatar.sm { width: 26px; height: 26px; font-size: 11px; }
.reply-form { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.reply-form input { flex: 1; min-width: 0; }
.reply-form .button { flex-shrink: 0; }
.reflection { border-top: 1px solid var(--line); padding: 16px 0; }
.reflection-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; margin-bottom: 8px; }
.reflection-head form { margin-left: auto; }
/* FASE 5 — analítica local del libro (estructura y legibilidad, sin IA). */
.analysis { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); padding: 18px 20px; margin: 18px 0; }
.analysis h3 { font: 400 22px/1.25 Georgia, serif; margin: 4px 0 12px; }
.readability { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; margin-bottom: 14px; }
.readability-badge { display: inline-block; font-size: 11px; font-weight: 650; letter-spacing: .04em; color: #fff; background: var(--accent); padding: 3px 10px; border-radius: 999px; }
.readability small { font-size: 11px; }
.analysis-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.analysis-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--accent-soft); min-width: 0; }
.analysis-stat strong { font: 400 20px/1.1 Georgia, serif; color: var(--accent); overflow-wrap: anywhere; }
.analysis-stat span { font-size: 11px; color: var(--muted); }
.analysis-structure { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-top: 14px; }
.analysis-structure svg { flex-shrink: 0; }
.analysis .quiet-note { margin-top: 12px; }
/* FASE 4 — ficha de libro: primera pantalla simple + colapsables educativos. */
.detail-visibility { margin: 0 0 6px; letter-spacing: .02em; }
details.analysis { padding: 4px 16px; background: var(--surface); }
details.analysis > summary { font-size: 13px; font-weight: 550; }
details.analysis[open] > summary { margin-bottom: 16px; }
.edu-note { margin: 0 0 14px; }
.edu-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 20px; margin: 0; }
.edu-facts div { border-left: 2px solid var(--line); padding-left: 12px; }
.edu-facts dt { font-size: 11px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.edu-facts dd { margin: 2px 0 0; font-size: 14px; color: var(--ink); }
@media (min-width: 780px) {
    .week-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .current-reading { grid-template-columns: 120px minmax(0, 1fr); }
    .cr-cover { width: 120px; }
    .perf-card { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; }
    .perf-metrics { grid-column: auto; grid-row: 1; grid-template-columns: repeat(4, auto); gap: 24px; margin: 0; padding: 0 0 0 22px; border-top: 0; border-left: 1px solid var(--line); }
    .analysis-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1279px) {
    /* Barra logueada con CUATRO ligas (Universo · Cursos · Explorar · Mi Mesa) + buscador siempre en la
       barra: por debajo de 1280px la fila ya no cabe en un renglón. Envolver a dos filas es más honesto
       que encoger más y evita el scroll horizontal de página (regresión que se combatió en 360–1366px). */
    .site-header { height: auto; min-height: 64px; flex-wrap: wrap; padding-block: 10px; row-gap: 6px; }
    .header-search { flex: 1 1 260px; order: 3; }
    .main-nav { gap: 18px; }
}
@media (max-width: 1100px) {
    /* Verificación 360/768/1366: entre 781 y 1100 la línea brand+nav+buscador+acciones
       necesitaba ~1010px y desbordaba la página (+242px medida). Envolver es más honesto
       que seguir encogendo: header en dos filas, sin scroll horizontal de página. */
    .site-header { height: auto; min-height: 64px; flex-wrap: wrap; padding-block: 10px; row-gap: 6px; }
    .header-search { flex: 1 1 260px; order: 3; }
    .container { width: calc(100% - 64px); }
    .site-header, .site-footer { padding-inline: 32px; }
    .main-nav { gap: 18px; }
    .hero { gap: 30px; }
    .reading-preview { width: 330px; padding-inline: 28px; }
    .floating-note { left: -5px; bottom: 0; }
    .library-layout { grid-template-columns: 170px minmax(0, 1fr); gap: 30px; }
    .library-sidebar { padding-right: 14px; }
    .book-grid, .library-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .auth-layout { gap: 45px; grid-template-columns: 1fr 400px; }
    .auth-intro h1 { font-size: 38px; }
    .detail-columns { gap: 35px; }
}
@media (max-width: 780px) {
    .container { width: calc(100% - 40px); }
    .site-header { height: auto; min-height: 56px; padding: 12px 16px; flex-wrap: wrap; gap: 10px; }
    .brand { font-size: 20px; }
    .nav-toggle { display: inline-flex; order: 2; margin-left: auto; }
    /* Los destinos (Inicio · Cursos · Explorar · Aprendizaje · Tú) viven en la .bottom-nav fija del
       móvil: el .main-nav del header NO se despliega aquí, para no duplicarlos. La hamburguesa abre
       solo la cuenta + utilidades + tema (ver .header-actions abajo). */
    .main-nav { display: none; }
    /* La hamburguesa es el menu COMPLETO en movil: al abrirla se apila .main-nav debajo de la busqueda
       (Cursos · Mi Lumbre · Tienda · PISA · Explorar), para llegar a destinos que no caben en la barra.
       app.js ya cierra el panel al elegir un enlace (.main-nav a). Bajo html.js; sin JS queda la barra. */
    .js .site-header.nav-open .main-nav { display: flex; flex-direction: column; align-items: stretch; gap: 2px; order: 4; width: 100%; margin-top: 6px; font-size: 16px; }
    .js .site-header.nav-open .main-nav > a { padding: 12px 14px; border-radius: var(--radius-sm); }
    .js .site-header.nav-open .main-nav > a:hover { background: var(--bg); }
    .js .site-header.nav-open .main-nav .nav-more > summary { padding: 12px 14px; }
    .js .site-header.nav-open .main-nav .nav-more > div { position: static; width: 100%; min-width: 0; box-shadow: none; border: 0; background: transparent; padding-left: 14px; }
    .js .site-header.nav-open .header-actions { order: 5; }
    /* Buscador: segunda fila siempre visible, a todo el ancho. */
    .header-search { order: 3; flex: 1 1 100%; max-width: none; margin-top: 6px; }
    .search-input-wrap { height: 48px; }
    .search-dropdown { max-height: 65vh; }
    /* Acciones de cuenta: fuera de la fila 1; se revelan como UN panel apilado al abrir la hamburguesa.
       Todo el bloque va bajo html.js (lo añade app.js): sin JavaScript se conserva el header anterior
       (acciones en su fila y desplegable nativo del <details>), para no perder el cierre de sesión. */
    .js .header-actions { display: none; }
    .js .site-header.nav-open .header-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; order: 4; width: 100%; margin-left: 0; }
    /* El menú de cuenta deja de ser popover absoluto (se cortaba en 360px): contenido estático a
       ancho completo. En escritorio sigue siendo el desplegable flotante de siempre. */
    .js .account-menu { width: 100%; }
    .js .account-menu summary { min-height: 44px; }
    .js .account-menu > div { position: static; top: auto; right: auto; width: 100%; min-width: 0; padding: 0; border: 0; box-shadow: none; background: transparent; }
    .js .theme-menu { min-width: 0; }
    .theme-opt .swatch i { width: 14px; height: 22px; }
    .header-actions .button { padding: 8px 12px; }
    /* «Más» y «Herramientas» (si aparecen) en móvil: submenú desplegado en línea, no flotante. */
    .nav-more { border-bottom: 1px solid var(--line); }
    .nav-more > summary { padding: 12px 6px; min-height: 48px; }
    .nav-more > div { position: static; min-width: 0; border: 0; box-shadow: none; background: transparent; padding: 0 0 6px 18px; max-height: none; overflow: visible; }
    .tools-menu { border-bottom: 0; }
    /* FASE 10 — touch targets >=44px en móvil. */
    .icon-button { width: 44px; height: 44px; }
    .button.small { min-height: 44px; }
    /* Dentro del panel sí mostramos el nombre de la cuenta (arriba ya no compite en la fila). */
    .js .account-name { display: inline; }
    .hero { grid-template-columns: 1fr; gap: 45px; padding-top: 50px; }
    .hero h1 { font-size: 49px; }
    .hero-description { font-size: 16px; }
    .hero-art { max-width: 450px; width: 100%; margin: 0 auto; }
    .reading-preview { width: 330px; }
    .orb-one { left: 20px; }
    .floating-note { left: 0; }
    .benefits { flex-direction: column; gap: 25px; padding: 27px; }
    .section { padding-block: 40px; }
    .section-heading { align-items: flex-start; }
    .section-heading h2 { font-size: 28px; }
    .section-heading > .text-link { font-size: 11px; max-width: 110px; flex-shrink: 0; }
    .book-grid, .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; }
    .book-card h3 { font-size: 19px; }
    .book-meta { gap: 8px; }
    .book-meta span:last-child { display: none; }
    .upload-banner { flex-direction: column; align-items: flex-start; padding: 30px; }
    .upload-banner h2 { font-size: 30px; }
    .site-footer { padding: 30px 20px; gap: 20px; }
    .site-footer nav { margin: 0; width: 100%; }
    /* Tira de temas en móvil: también centrada (hereda width:100% del nav del footer). */
    .theme-strip { justify-content: center; }
    .library-layout { display: block; padding-top: 25px; }
    .library-sidebar { border: 0; padding: 0; margin-bottom: 28px; }
    .library-sidebar > .eyebrow, .library-sidebar > h2, .sidebar-note { display: none; }
    .library-sidebar nav { flex-direction: row; overflow-x: auto; gap: 5px; padding-bottom: 6px; }
    .library-sidebar nav a { white-space: nowrap; padding: 9px 12px; border: 1px solid var(--line); }
    .library-sidebar nav a:nth-child(8) { margin-top: 0; }
    .library-sidebar nav svg { display: none; }
    .library-main .section-heading { flex-wrap: wrap; }
    .library-main .section-heading h1 { font-size: 33px; }
    .auth-layout { grid-template-columns: 1fr; padding-block: 40px; gap: 30px; }
    .auth-intro { text-align: center; }
    .auth-intro h1 { font-size: 35px; }
    .auth-quote { display: none; }
    .form-card { padding: 25px; }
    .book-detail { grid-template-columns: 1fr; gap: 30px; }
        /* Ancho definido: .generated-cover usa container-type:inline-size (aporte de ancho ~0),
           así que con margin:auto + shrink-to-fit la portada se colapsaba a 1 carácter en móvil. */
        .detail-cover { width: min(230px, 100%); margin-inline: auto; }
    .detail-copy h1 { font-size: 39px; }
    .detail-columns { grid-template-columns: 1fr; gap: 35px; }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .circle-book-page .cb-header { flex-direction: column; gap: 16px; }
    .cb-cover { width: 132px; }
    .cb-actions .button { flex: 1; }
    .progress-list li { grid-template-columns: 1fr auto; row-gap: 6px; }
    .progress-name { grid-column: 1 / -1; }
    .circle-book-actions { flex-wrap: wrap; }
    .feed-time { display: none; }
    .cr-actions .button { flex: 1; }
    .convo-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
    /* FASE 10 — bottom navigation móvil + hueco para que no tape el contenido. */
    body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
    .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: stretch; justify-content: space-around; gap: 1px; padding: 5px 3px calc(5px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -2px 16px rgb(0 0 0 / .07); }
    .bottom-nav a { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 48px; padding: 6px 1px; border-radius: var(--radius-sm); color: var(--muted); font-size: 11.5px; font-weight: 550; line-height: 1; text-decoration: none; transition: color .15s, background .15s; }
    .bottom-nav a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .bottom-nav a svg { width: 22px; height: 22px; }
    .bottom-nav a.active { color: var(--accent); background: var(--accent-soft); }
    .bottom-nav a:active { background: var(--accent-soft); }
    .toast { bottom: calc(78px + env(safe-area-inset-bottom)); }
}
@media (max-width: 420px) {
    .hero h1 { font-size: 41px; }
    .hero-art { transform: scale(.94); }
    .reading-preview { width: 305px; }
    .orb-one { width: 290px; }
    /* «Entrar» siempre visible: ocultarlo dejaba sólo «Crear cuenta» y el inicio de sesión
       quedaba escondido dentro del registro. Con .header-actions gana especificidad frente
       al display:flex de .main-nav/.header-actions y sigue visible en móvil. */
    .header-actions .login-link { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 0 2px; font-size: 14px; font-weight: 550; white-space: nowrap; }
    .form-grid { grid-template-columns: 1fr; gap: 0; }
    .book-card h3 { font-size: 17px; }
    .current-reading { grid-template-columns: 1fr; }
    .cr-cover { width: 120px; margin: 0 auto; }
    .perf-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .week-stat strong { font-size: 21px; }
}
/* Móvil estrecho (≤520px): «Herramientas» se pliega a icono — conserva aria-label y title, sigue
   siendo operable y táctil. Las acciones de cuenta ya son columna a todo el ancho dentro del panel. */
@media (max-width: 520px) {
    .tools-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Descubrimiento por temática: chips, exploración y libros relacionados. */
.topic-explore { margin: 0 0 28px; }
.topic-explore .eyebrow { margin-bottom: 10px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 12px; line-height: 1; text-decoration: none; transition: color .15s, background .15s, border-color .15s; }
.chip:hover { color: var(--accent); border-color: var(--accent); }
.chip.active { color: var(--surface); background: var(--accent); border-color: var(--accent); }
.chip-count { display: inline-block; min-width: 18px; padding: 1px 5px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 10px; text-align: center; }
.chip.active .chip-count { background: color-mix(in srgb, var(--surface) 26%, transparent); color: var(--surface); }
/* Barra de progreso de la exportación por capas (rutas/org/círculos grandes). */
.export-progress { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.export-progress[hidden] { display: none; }
.export-progress-track { flex: 1 1 160px; min-width: 120px; height: 8px; border-radius: 999px; background: var(--accent-soft); overflow: hidden; }
.export-progress-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width .25s ease; }
.import-progress { margin: 4px 0 0; }
.import-progress .export-progress-text { display: block; margin-bottom: 6px; }
.chip-sm { margin-top: 9px; padding: 4px 10px; font-size: 11px; }
.book-topics { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 0; }
.chip-topic { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 600; }
.chip-tag { font-size: 11px; }
.related-books { margin-top: 42px; }
.related-grid { margin-top: 16px; }
@media (max-width: 720px) {
    .chip-row { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 6px; scrollbar-width: thin; }
    .chip { flex: 0 0 auto; }
}
/* Selector de formato: control segmentado con icono. Cabe siempre en pantalla: sin scroll horizontal. */
.format-switch { display: flex; gap: 6px; padding: 5px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.fs-item { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 12px; border-radius: 10px; color: var(--muted); font-size: 13px; font-weight: 550; line-height: 1; text-decoration: none; white-space: nowrap; transition: color .15s, background .15s; }
.fs-item svg { flex: 0 0 auto; }
.fs-item:hover { color: var(--accent); background: var(--accent-soft); }
.fs-item.active { color: #fff; background: var(--accent); }
.fs-short { display: none; }
@media (max-width: 720px) {
    /* Móvil: 5 columnas fijas con icono encima y texto corto, pegado arriba para tenerlo siempre a mano. */
    .format-switch { position: sticky; top: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 4px; border-radius: 12px; }
    .fs-item { flex-direction: column; gap: 4px; padding: 9px 2px 8px; font-size: 11px; font-weight: 600; white-space: normal; }
    .fs-long { display: none; }
    .fs-short { display: inline; }
}

/* Rutas de lectura (colecciones): listado, ficha y administración. */
.collection-filters { margin: 0 0 26px; }
/* «Filtrar por edad o tema» plegado: mismo gesto visual que los filtros del catálogo de cursos. */
.collection-more-filters { margin: 0 0 18px; }
.collection-more-filters > summary { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font-size: 14px; cursor: pointer; list-style: none; user-select: none; }
.collection-more-filters > summary::-webkit-details-marker { display: none; }
.collection-more-filters > summary:hover, .collection-more-filters[open] > summary { border-color: var(--accent); color: var(--accent); }
/* Prefiltros rápidos: la etiqueta ocupa su propia línea y los chips quedan debajo. */
.chip-row-label { flex: 0 0 100%; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.collection-filters + .collection-filters { margin-top: -12px; }
.collection-clear { margin: -10px 0 22px; }
.collection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 16px; }
.collection-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow); text-decoration: none; transition: transform .18s, border-color .18s; }
.collection-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.collection-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.collection-type { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.badge-official { background: var(--warm); color: #fff; }
.collection-name { font: 400 21px/1.25 Georgia, serif; color: var(--ink); }
.collection-objective { font-size: 13px; color: var(--muted); margin: 0; }
.collection-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 12px; margin-top: auto; padding-top: 6px; }
.collection-meta span { display: inline-flex; align-items: center; gap: 4px; }
/* FASE 6 — rutas: tarjeta-camino y pasos numerados. */
.route-card { flex-direction: row; align-items: flex-start; gap: 14px; }
.route-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.route-card-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.route-facts { font-size: 12px; }
.route-card .collection-objective { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.route-go { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--accent); }
/* Rutas con portada generada: banner a sangre en la tarjeta (especificidad 2 clases gana al padding del modo fila). */
.collection-card.route-banner { flex-direction: column; padding: 0; gap: 0; overflow: hidden; }
.collection-card.route-banner .route-cover { display: block; width: 100%; aspect-ratio: 14 / 5; background: var(--accent-soft); }
.collection-card.route-banner .route-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.collection-card.route-banner .route-card-body { padding: 14px 18px 18px; }
.collection-cover-lg { display: block; width: 100%; height: auto; border-radius: var(--radius-md); box-shadow: var(--shadow); margin: 0 0 18px; }
.next-label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; margin: 14px 0 6px; }
.cb-step { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--line); color: var(--ink); font-size: 11px; font-weight: 700; }
.collection-hero { margin-bottom: 8px; }
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 18px; }
.collection-objective-lg { font-size: 17px; color: var(--ink); background: var(--accent-soft); border-left: 3px solid var(--accent); padding: 12px 16px; border-radius: var(--radius-sm); }
.collection-progress { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); margin: 22px 0; }
.collection-progress progress { width: 100%; height: 10px; border-radius: 999px; margin: 8px 0; accent-color: var(--accent); }
.progress-numbers { display: flex; align-items: baseline; gap: 8px; font-size: 18px; }
.progress-numbers strong { font: 400 26px/1 Georgia, serif; color: var(--ink); }
.collection-description { margin: 20px 0; }
.collection-admin { margin: 24px 0; }
.collection-admin h3 { margin: 26px 0 8px; font-size: 16px; }
.collection-admin .circle-create-form > label, .collection-admin .inline-form > label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.form-row { display: flex; flex-wrap: wrap; gap: 12px; }
.form-row > label { flex: 1 1 150px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); }
.check-inline { flex-direction: row !important; align-items: center; gap: 7px !important; }
.check-inline input { width: auto; }
.link-danger { background: none; border: none; color: var(--danger); font-size: 12px; padding: 0; text-decoration: underline; }
.cb-meta summary.link { color: var(--accent); font-size: 12px; text-decoration: underline; list-style: none; }
.cb-meta summary.link::-webkit-details-marker { display: none; }
.stage-list { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-direction: column; gap: 8px; }
.stage-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font-size: 14px; }
.collection-books { margin-top: 30px; }
.stage-heading { margin: 26px 0 12px; font-size: 17px; color: var(--accent); }
.collection-book { display: grid; grid-template-columns: 34px 90px 1fr; gap: 14px; align-items: start; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); margin-bottom: 12px; }
/* OA aún no liberado dentro del aula (?aula=, migración 135): fila tenue, portada no clicable y aviso. */
.collection-book.is-locked { opacity: .72; }
.collection-book.is-locked .cb-cover.is-locked { display: block; width: 90px; cursor: default; }
.collection-book.is-locked .cb-cover.is-locked img, .collection-book.is-locked .cb-cover.is-locked .generated-cover { filter: grayscale(.7); opacity: .8; }
.cb-state.cb-object.is-locked, .collection-book.is-locked .cb-state.cb-object { background: var(--line); color: var(--muted); }
.oa-lock-note { margin: 6px 0 0; }
/* Página de acceso directo bloqueado (/object/{slug} con OA aún no liberado, 135). */
.oa-locked-page { display: flex; justify-content: center; }
.oa-locked-card { max-width: 560px; text-align: center; padding: 32px 24px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.oa-locked-lock { font-size: 40px; line-height: 1; margin: 0 0 8px; }
.oa-locked-when { margin: 12px 0; }
.oa-locked-actions { margin-top: 18px; }
.cb-state { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-size: 15px; font-weight: 700; background: var(--accent-soft); color: var(--accent); }
.cb-state.cb-finished { background: var(--ok-soft); color: var(--ok); }
.cb-state.cb-reading { background: var(--warn-soft); color: var(--warn); }
.cb-cover img, .cb-cover .generated-cover { width: 90px; aspect-ratio: 8 / 11; height: auto; object-fit: cover; border-radius: 6px; }
.generated-cover.mini { padding: 8%; }
.generated-cover.mini strong { font-size: clamp(9px, 3.6cqw, 14px); }
.cb-body h3 { margin: 2px 0 2px; font-size: 18px; }
.cb-order { display: flex; align-items: center; gap: 8px; font-size: 12px; margin: 0 0 2px; }
.cb-statechip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 600; }
.cb-statechip.cb-finished { background: var(--ok-soft); color: var(--ok); }
.cb-statechip.cb-reading { background: var(--warn-soft); color: var(--warn); }
.cb-why { font-size: 14px; color: var(--ink); margin: 6px 0; }
.cb-objective { margin: 4px 0; }
.cb-body .button { margin-top: 10px; }
.cb-admin { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding-top: 10px; border-top: 1px dashed var(--line); }
.cb-reorder { display: flex; gap: 6px; }
.cb-reorder form { margin: 0; }
.cb-reorder .icon-button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.cb-meta { min-width: 0; }
.cb-meta form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; min-width: 240px; }
@media (max-width: 560px) {
    /* Una sola columna y apilado explícito: con grid-template-columns de 2 pistas la
       auto-colocación metía .cb-body en la pista estrecha (30px) y el texto salía apretado
       en una línea. Ahora portada, cuerpo y administración ocupan todo el ancho. */
    .collection-book { grid-template-columns: 1fr; }
    .cb-state { display: none; } /* redundante: el estado ya va como chip en .cb-order */
    .cb-cover { grid-column: 1 / -1; }
    .cb-body { grid-column: 1 / -1; }
    .cb-cover img, .cb-cover .generated-cover { width: 120px; }
    .collection-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
    .form-row > label { flex: 1 1 100%; }
    .progress-numbers strong { font-size: 22px; }
}

/* Organizaciones: resumen, miembros y biblioteca privada. */
.org-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 20px 0 8px; }
.org-stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.org-stat strong { font: 400 24px/1.1 Georgia, serif; color: var(--accent); }
.org-stat span { font-size: 12px; color: var(--muted); }
.org-section { margin-top: 34px; }
.member-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.member-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.member-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.member-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.member-initial { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.member-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inline-form.tight { margin: 0; gap: 6px; }
.inline-form.tight select { padding: 6px 8px; }
.member-check { width: 17px; height: 17px; cursor: pointer; flex: 0 0 auto; }
.member-row .member-id { flex: 1 1 180px; }
.member-totals { flex: 0 1 auto; white-space: nowrap; }
.member-role { width: auto; font-size: 13px; padding: 7px 9px; flex: 0 0 auto; }
.admin-bulk-bar .check-all { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; margin: 0; }
.admin-bulk-bar .check-all input { width: 17px; height: 17px; cursor: pointer; }
.import-report { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px 18px; background: var(--surface); }
.import-errors { margin: 8px 0 0; padding-left: 18px; max-height: 240px; overflow: auto; font-size: 13px; color: var(--muted); }
.import-errors li { margin-bottom: 3px; }
.org-library { display: flex; flex-direction: column; gap: 12px; }
.org-book { display: grid; grid-template-columns: 90px 1fr; gap: 14px; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.org-book > form { grid-column: 1 / -1; }
.org-book .cb-body h3 { margin: 0 0 2px; font-size: 17px; }
@media (max-width: 560px) {
    .org-book { grid-template-columns: 72px 1fr; }
    .org-book .cb-cover img, .org-book .cb-cover .generated-cover { width: 72px; }
    .member-row { flex-direction: column; align-items: flex-start; }
}

/* Rutas asignadas a un círculo (§33/§64): progreso colectivo claro y mobile-first. */
.route-list { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 12px; }
.route-card { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.route-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.route-head h3 { margin: 0; font-size: 18px; }
.route-objective { margin: 4px 0 12px; }
.route-progress { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.route-metric { display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 13px; }
.route-metric strong { font: 400 18px/1 Georgia, serif; }

/* Programas de organización (§34/§35): avance colectivo de cada ruta. */
.program-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.program-row { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.program-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.program-name { font-weight: 600; font-size: 16px; }
.program-pct { font: 400 22px/1 Georgia, serif; color: var(--accent); white-space: nowrap; }
.program-objective { margin: 4px 0 8px; font-size: 13px; }
.program-track { display: block; height: 8px; border-radius: 999px; background: var(--accent-soft); overflow: hidden; margin-bottom: 6px; }
.program-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

/* Panel personal (§36 Persona): tiempo, comenzados, terminados, racha y rutas asignadas. */
.persona-stats .streak-card { flex: 1 1 160px; }
.persona-stats .streak-card strong { font-size: 22px; }
.profile-routes { margin-top: 34px; }
.profile-routes .program-list { margin-top: 12px; }

/* Onboarding de organización (§29/§59/§60): rutas oficiales sugeridas. */
.suggest-box { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 16px; margin: 16px 0; }
.suggest-box legend { font-weight: 600; padding: 0 6px; }
.suggest-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-top: 10px; }
.suggest-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; }
.suggest-item input { margin-top: 3px; }
.suggest-item span { display: flex; flex-direction: column; gap: 2px; }
.suggest-item small { font-size: 12px; }
.suggest-manage { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 8px; }
.suggest-manage li { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.suggest-manage .suggest-name { min-width: 0; }

/* Fase F — Estadísticas públicas (/stats), widget de portada y podio del círculo. */
.check-field { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; }
.check-field input { margin-top: 3px; }
.check-field small { flex: 1 0 100%; font-size: 12px; color: var(--muted); }

.stats-hero .section-heading { margin-bottom: 18px; }
.stats-periods { display: flex; flex-wrap: wrap; gap: 8px; }
.period-chip { padding: 7px 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 13px; text-decoration: none; }
.period-chip:hover { color: var(--accent); border-color: var(--accent); }
.period-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

.stats-board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.stats-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.stats-row.top-1 { border-color: var(--warm); background: var(--accent-soft); }
.stats-rank { flex-shrink: 0; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 400 16px/1 Georgia, serif; }
.stats-row.top-1 .stats-rank { background: var(--warm); color: #fff; }
.stats-name { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.stats-name-text { display: flex; flex-direction: column; min-width: 0; }
.stats-name-text strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-name-text small { font-size: 12px; color: var(--muted); }
.stats-metrics { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: flex-end; flex-shrink: 0; }
.stats-metrics .metric { font-size: 13px; color: var(--muted); white-space: nowrap; }
.stats-metrics .metric.lead { color: var(--ink); font-weight: 600; font-size: 14px; }

.home-top-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.home-top-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.home-top-rank { flex-shrink: 0; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 400 14px/1 Georgia, serif; }
.home-top-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-top-metric { flex-shrink: 0; font-size: 13px; color: var(--muted); }

.week-board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.week-board-row { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.week-board-row.top-1 { border-color: var(--warm); background: var(--accent-soft); }
.week-board-rank { flex-shrink: 0; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 400 13px/1 Georgia, serif; }
.week-board-row.top-1 .week-board-rank { background: var(--warm); color: #fff; }
.week-board-name { flex: 1 1 auto; min-width: 0; }
.week-board-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.week-board-metric { flex-shrink: 0; font-size: 13px; color: var(--muted); }

@media (max-width: 640px) {
    .stats-row { flex-wrap: wrap; }
    .stats-metrics { justify-content: flex-start; width: 100%; }
}

/* Lecturas breves — comprobación, reflexión y fuentes (idéntico para toda lectura). */
.short-read { display: flex; flex-direction: column; gap: 18px; margin-top: 28px; }
.short-read .panel { padding: 22px 24px; }
.short-read h3 { margin-bottom: 14px; }
.sr-question { position: relative; border: 0; border-radius: var(--radius-md); padding: 18px 20px; margin: 0 0 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.sr-question:last-of-type { margin-bottom: 0; }
.sr-legend { display: block; padding: 0; margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.sr-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: var(--accent); color: #fff; font: 600 12px/1 var(--font-ui); vertical-align: middle; }
.sr-q-prompt { font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--ink); margin: 0 0 14px; }
.sr-options { display: flex; flex-direction: column; gap: 8px; }
.sr-option { position: relative; display: flex; flex-direction: row; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); font-size: 14px; font-weight: 400; color: var(--ink); cursor: pointer; transition: border-color .15s, background .15s; }
.sr-option:hover { border-color: var(--accent); background: var(--accent-soft); }
.sr-option input[type="radio"] { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; pointer-events: none; }
.sr-radio { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); transition: border-color .15s, background .15s; }
.sr-radio::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .15s; }
.sr-option input:checked ~ .sr-radio { border-color: var(--accent); background: var(--accent); }
.sr-option input:checked ~ .sr-radio::after { transform: scale(1); }
.sr-option input:focus-visible ~ .sr-radio { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-opt-text { flex: 1 1 auto; min-width: 0; }
.sr-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.sr-question[data-answered] .sr-option { cursor: default; }
.sr-question[data-answered] .sr-option:hover { border-color: var(--line); background: var(--bg); }
.sr-question[data-answered] .sr-option:has(input:checked):hover { border-color: var(--accent); background: var(--accent-soft); }
.sr-question .button { margin-top: 14px; }
.sr-feedback { margin: 14px 0 0; font-size: 14px; font-weight: 600; }
.sr-feedback.shown { padding: 11px 14px; border-radius: var(--radius-sm); }
.sr-feedback.ok { background: var(--ok-soft); color: var(--ok); }
.sr-feedback.no { background: var(--danger-soft); color: var(--danger); }
:root[data-theme~="dark"] .sr-feedback.ok { background: var(--ok-soft); color: var(--ok); }
:root[data-theme~="dark"] .sr-feedback.no { background: var(--danger-soft); color: var(--danger); }
.sr-explain { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.sr-prompt { font-weight: 600; margin-bottom: 10px; }
.sr-private { display: block; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.sr-private textarea { width: 100%; margin-top: 6px; }
.sr-reflect .button { margin-right: 12px; }
.sr-saved { font-size: 13px; color: var(--accent); font-weight: 600; }
.sr-sources summary { font-weight: 600; }
.source-list { margin: 12px 0 0; padding-left: 18px; font-size: 14px; color: var(--muted); }
.source-list li { margin-bottom: 6px; }
.source-list a { color: var(--accent); }

/* Home logueada (Lumbre 2.0): continuar leyendo primero, después ruta, descubre y círculos. */
.home-logged { padding-top: var(--space-7); padding-bottom: var(--space-7); }
.home-greeting { font-size: clamp(28px, 4vw, 40px); margin-bottom: var(--space-5); }
.continue-hero { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; gap: var(--space-5); align-items: center; padding: var(--space-5); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); text-decoration: none; transition: transform .18s, border-color .18s; }
a.continue-hero:hover { transform: translateY(-2px); border-color: var(--accent); }
.continue-cover { width: 116px; }
.continue-cover img, .continue-cover .generated-cover { width: 100%; aspect-ratio: 8 / 11; height: auto; object-fit: cover; border-radius: var(--radius-sm); }
.continue-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.continue-kicker { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.continue-body strong { font: 400 clamp(22px, 3vw, 30px)/1.2 var(--font-reading); color: var(--ink); overflow-wrap: anywhere; }
.continue-body small { font-size: 13px; color: var(--muted); }
.continue-progress { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 12px; color: var(--accent); }
.continue-progress progress { flex: 1 1 auto; max-width: 320px; }
.continue-cta { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 12px 20px; border-radius: var(--radius-sm); background: var(--accent); color: var(--surface); font-size: 13px; font-weight: 550; }
.continue-empty { grid-template-columns: minmax(0, 1fr) auto; }
.home-block { margin-top: var(--space-7); }
.home-block .section-heading { margin-bottom: var(--space-4); }
.home-routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); }
.home-route { display: flex; flex-direction: column; gap: 4px; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); text-decoration: none; transition: border-color .18s; }
.home-route:hover { border-color: var(--accent); }
.home-route strong { font-size: 16px; color: var(--ink); }
.home-route small { font-size: 12px; color: var(--muted); }
/* Rutas de aprendizaje en portada (Explorar): tarjetas tipo banner, claras para docentes. */
.discover-routes .routes-lede { font-size: 14px; color: var(--muted); margin: -6px 0 var(--space-4); max-width: 62ch; }
.route-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); }
.route-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; text-decoration: none; transition: transform .18s, border-color .18s, box-shadow .18s; }
.route-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.route-card-cover { display: block; aspect-ratio: 600 / 214; background: var(--accent-soft); }
.route-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.route-card-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.route-kind { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--warm); }
.route-card-body strong { font-family: Georgia, serif; font-size: 20px; font-weight: 400; color: var(--ink); line-height: 1.15; }
.route-card-body small { font-size: 13px; color: var(--muted); }
.route-count { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--muted); }
@media (max-width: 620px) {
    .continue-hero { grid-template-columns: 84px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4); }
    .continue-cover { width: 84px; }
    .continue-cta { grid-column: 1 / -1; justify-content: center; }
    .continue-empty { grid-template-columns: 1fr; }
}

/* Biblioteca (Lumbre 2.0): búsqueda grande, pestañas simples y filtros tras un botón. */
.library-page { padding-top: var(--space-7); padding-bottom: 80px; min-height: 75vh; }
/* Estado de carga al aplicar un filtro sin recargar (library.js): atenúa la zona y bloquea doble clic, sin sacudir el layout. */
.library-main { transition: opacity .18s ease; }
.library-main[data-lib-busy] { opacity: .5; pointer-events: none; }
.library-page .section-heading h1 { font-size: clamp(30px, 4vw, 40px); margin-bottom: 8px; }
.library-page .section-heading p:last-child { font-size: 14px; margin-bottom: 0; }
.search-lg { padding: 8px 8px 8px 20px; min-height: 56px; border-radius: var(--radius-md); margin-bottom: var(--space-4); }
.search-lg input { font-size: 15px; padding: 12px 0; }
.lib-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.lib-tabs { display: flex; gap: 6px; padding: 4px; overflow-x: auto; overflow-y: hidden; border-bottom: 0; flex: 1 1 auto; scrollbar-width: none; }
.lib-tabs::-webkit-scrollbar { display: none; }
.lib-tab { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--muted); text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.lib-tab svg { flex: 0 0 auto; }
.lib-tab:hover { background: var(--accent-soft); color: var(--accent); }
.lib-tab.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
/* Filtros en flujo (no flotantes): el panel se despliega a lo ancho bajo la toolbar. */
/* Guard 360px: el drawer vive dentro de un flex (.lib-toolbar); sin min-width:0 un
   child ancho empujaba .filters-body fuera del viewport (+22px medidos en /library). */
.filters-drawer { position: relative; flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; }
/* Chrome con display:flex en <details>: el cuerpo cerrado SE MAQUETA igual y empuja el viewport
   (+20px medidos en /library móvil 2026-10-01). Retirarlo explícitamente cuando está cerrado. */
.filters-drawer:not([open]) > .filters-body { display: none; }
.filters-drawer > summary { list-style: none; display: inline-flex; }
.filters-drawer > summary::-webkit-details-marker { display: none; }
.filters-body { box-sizing: border-box; align-self: stretch; width: 100%; min-width: 0; margin-top: 10px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.filter-group { margin-bottom: 18px; }
.filter-group:last-child { margin-bottom: 0; }
.filter-group-title { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 10px; }
.filters-body .discover-filters { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: end; }
.filters-body .discover-filters .filter-group-title, .filters-body .discover-filters .filter-actions { grid-column: 1 / -1; }
.filters-body .discover-filters .filter-group-title { margin-bottom: 0; }
.filters-body .discover-filters label { margin-bottom: 0; }
.filters-body .discover-filters input, .filters-body .discover-filters select { width: 100%; min-width: 0; }
.filters-body .chip-row { flex-wrap: wrap; overflow: visible; }
.filter-actions { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.library-page .topic-explore { margin-bottom: var(--space-5); }
/* Tarjeta de libro simplificada: título, tiempo · tema, autor y progreso. */
.book-card-body { display: flex; flex-direction: column; gap: 3px; }
.book-card-body h3 { margin-bottom: 2px; }
.book-line { font-size: 12px; color: var(--muted); margin: 0; }
.book-author-line { font-size: 13px; color: var(--ink); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Contacto: honeypot anti-bots oculto fuera de pantalla (las personas no lo ven, los bots lo rellenan). */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.contact-page .form-card { max-width: 620px; }

/* ==========================================================================
   Objetos de aprendizaje (`lumbre-lo/1.0`) — leccion renderizada a partir de
   datos inertes. Las clases `lo-*` las emite LessonRenderer; la interaccion la
   anade objects.js. Todo se apoya en los tokens del design system de arriba.
   ========================================================================== */
.object-page { padding-top: var(--space-6); padding-bottom: var(--space-8); }
/* Cabecera de la ficha (OA y, por clases compartidas, lecturas): portada menor fija
   (sticky) para que título/acciones respiren; antes la portada de 220 px empujaba todo. */
.object-head { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-6); align-items: start; margin-bottom: var(--space-7); }
.object-cover img, .object-cover .generated-cover { width: 100%; height: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
@media (min-width: 721px) { .object-cover { position: sticky; top: 84px; } }
.object-copy h1 { font-size: clamp(26px, 3vw, 40px); margin-bottom: 4px; letter-spacing: -.01em; }
/* Gancho de marketing (115): la frase que ABRE la ficha y da ganas de entrar. Mismo
   tratamiento visual en el OA (.lo-hook) y en el curso (.collection-hook): destacada,
   con el acento de marca, para que lo primero que se lea sea lo que vende el contenido. */
.lo-hook, .collection-hook {
    margin: 10px 0 0; padding: .5rem .85rem;
    font-size: clamp(1.05rem, 2.2vw, 1.32rem); font-weight: 700; line-height: 1.4;
    color: var(--accent); background: var(--accent-soft);
    border-left: 4px solid var(--accent); border-radius: 10px; max-width: 62ch;
}
.lo-objective { color: var(--ink); font-size: 15px; margin: 12px 0 0; max-width: 72ch; }
.author-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; margin: 6px 0 0; border: 1px solid var(--line); }
.author-badge.author-ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.author-badge.author-warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.author-badge.author-none { background: var(--surface); color: var(--muted); }
.lo-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
/* Selector de modo de estudio del Tutor Engine (ficha del OA): pastilla segmentada que
   convive con el resto de acciones. companion.js la enlaza y le quita el hidden. */
.cb-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-sm); }
.cb-seg[hidden] { display: none; }
.cb-seg-btn { border: 0; border-radius: 999px; padding: 6px 13px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.cb-seg-btn:hover { color: var(--accent); }
.cb-seg-btn.is-on { background: var(--accent); color: #fff; }
.cb-seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ==========================================================================
   Rediseño de la cabecera del OA (2026-09): menos hiperlinks saturando —
   clasificación + tags en una línea de metadatos, UNA fila de acciones con un
   solo foco (Modo guía), utilidades marginales en el menú «⋯ Más» y barra
   pegajosa al leer. Todo derivado de los tokens del design system.
   ========================================================================== */
/* Línea única de metadatos: enlaces de texto plano, la pastilla sólo aparece al hover. */
.lo-meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.lo-meta-line a { color: var(--muted); padding: 3px 8px; border: 1px solid transparent; border-radius: 999px; line-height: 1.3; transition: color .15s, background .15s, border-color .15s; }
.lo-meta-line a:hover { color: var(--accent); background: var(--accent-soft); border-color: var(--line); }
.lm-sep { color: var(--line); padding: 0 3px; }
.lm-plan { padding: 0 8px; font-size: 12px; }
.lm-tag { color: var(--muted); }
/* Fila de acciones: primarias a la izquierda, menú «⋯ Más» a la derecha. */
.lo-controls { position: relative; justify-content: space-between; }
.lc-primary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.lo-controls .button.primary { background: var(--accent); color: var(--surface); border-color: transparent; font-weight: 700; }
.lo-controls .button.primary:hover { background: var(--accent-hover); color: var(--surface); }
/* ── PANEL «MÁS» de la ficha (rediseño 2026-10-03) ─────────────────────────
   Un solo panel agrupado, que NUNCA está en el flujo de la página: abrirlo no
   empuja la lección ni vuelca datos en medio de la fila de acciones (el defecto
   que tenía el desplegable anterior). objects.js le pone position:fixed y la
   geometría del disparador pulsado (.is-anchored); sin JS cae en absolute bajo
   la fila de acciones y todo sigue alcanzable. */
.lc-more { position: static; }
.lc-more > summary { list-style: none; }
.lc-more > summary::-webkit-details-marker { display: none; }
.lc-more[open] > summary { background: var(--accent-soft); }
.lop {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 125;
    width: min(92vw, 340px); max-height: min(72vh, 620px);
    display: flex; flex-direction: column; overflow: hidden; text-align: left;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
.lop.is-anchored { position: fixed; }   /* con JS: top/left escritos desde el disparador */
.lop-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.lop-title { flex: 1; min-width: 0; font-size: .86rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lop-x { flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer; }
.lop-x:hover { background: var(--accent-soft); color: var(--accent); }
.lop-scroll { overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px; }
.lop-group + .lop-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.lop-group form { margin: 0; }
.lop-h { margin: 10px 10px 2px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lop-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.lop-item svg { flex: none; color: var(--accent); }
.lop-item:hover, .lop-item:focus-visible { background: var(--accent-soft); color: var(--accent); outline: none; }
.lop-item.is-danger, .lop-item.is-danger svg { color: var(--danger); }
.lop-item.is-danger:hover { background: var(--danger-soft); color: var(--danger); }
.lop-pick { gap: 6px; }
.lop-pick select { max-width: 9rem; font: inherit; font-size: 13px; }
/* Gestión con fondo discreto: nadie debe confundir «Retirar objeto» con una herramienta de estudio. */
.lop-mgmt { background: color-mix(in srgb, var(--warm, #f0a417) 8%, transparent); border-radius: var(--radius-sm); }
/* Datos: en la columna estrecha del panel la etiqueta va SOBRE el valor (en la tarjeta del guía
   conserva su rejilla de dos columnas — por eso el ajuste está scopeado a .lop-info). */
.lop-info .lo-content-info-body { display: grid; gap: 8px; padding: 2px 12px 10px; }
.lop-info .lo-ci-line { display: block; font-size: .84rem; line-height: 1.45; overflow-wrap: anywhere; }
.lop-info .lo-ci-line > strong { display: block; flex: none; margin-bottom: 1px; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.lop-info .lo-ci-val { display: block; flex: none; }
/* El guía se lleva estos datos a su tarjeta: si ya no están, el grupo no debe dejar un título huérfano. */
.lop-info:not(:has(.lo-content-info-body)) { display: none; }
/* Capa que captura el clic de fuera; sólo visible con el panel abierto (objects.js). */
.lop-scrim { position: fixed; inset: 0; z-index: 124; background: transparent; }
.lop-scrim[hidden] { display: none; }
@media (max-width: 640px) {
    /* Móvil: hoja inferior de borde a borde — el botón puede haber envuelto y quedar en cualquier x,
       y una hoja siempre está al alcance del pulgar. Aquí el JS no escribe geometría. */
    .lop, .lop.is-anchored { position: fixed; left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-width: none; max-height: min(78vh, 560px); }
    .lop-item { min-height: 46px; }
    .lop-scrim { background: rgba(8, 12, 18, .5); }
}
/* Formmodal «Ver intro»: overlay único creado por objects.js con iframe al /shows/{slug}/embed
   del mismo origen. Al cerrar se oculta (no se destruye) para no recargar el show. */
.lo-intro-modal { position: fixed; inset: 0; z-index: 130; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(8, 12, 18, .66); backdrop-filter: blur(3px); }
.lo-intro-modal.open { display: flex; }
.lo-intro-box { display: flex; flex-direction: column; width: min(1080px, 100%); height: 92vh; max-height: 92vh; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.lo-intro-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.lo-intro-head strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lo-intro-x { flex: none; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.lo-intro-x:hover { background: var(--accent-soft); color: var(--accent); }
.lo-intro-frame { display: block; flex: 1; width: 100%; min-height: 0; border: 0; background: var(--bg); }
body.lo-intro-on { overflow: hidden; }
@media (max-width: 640px) {
    .lo-intro-modal { padding: 0; }
    .lo-intro-box { width: 100%; max-height: 100vh; height: 100%; border-radius: 0; border: 0; }
    .lo-intro-frame { min-height: 0; }
}
/* Cloak de enlace externo (creado por objects.js): confirmación antes de salir del OA. */
.lo-ext-modal { position: fixed; inset: 0; z-index: 140; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(8, 12, 18, .66); backdrop-filter: blur(3px); }
.lo-ext-modal.open { display: flex; }
.lo-ext-box { width: min(440px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 16px 18px; }
.lo-ext-head { display: flex; align-items: center; gap: 10px; font-size: 17px; color: var(--ink); }
.lo-ext-head strong { flex: 1; min-width: 0; }
.lo-ext-x { flex: none; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; }
.lo-ext-x:hover { background: var(--accent-soft); color: var(--accent); }
.lo-ext-msg { margin: 10px 0 12px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.lo-ext-host { font-weight: 700; font-size: 16px; color: var(--ink); word-break: break-all; }
.lo-ext-url { margin-top: 6px; font-size: 12px; color: var(--muted); word-break: break-all; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; max-height: 96px; overflow: auto; }
.lo-ext-actions { display: flex; gap: 10px; margin-top: 16px; }
.lo-ext-cancel, .lo-ext-go { flex: 1; padding: 10px 14px; border-radius: var(--radius-md); font-weight: 600; cursor: pointer; font-size: 14px; }
.lo-ext-cancel { border: 1px solid var(--line); background: transparent; color: var(--ink); }
.lo-ext-cancel:hover { background: var(--accent-soft); }
.lo-ext-go { border: 1px solid var(--accent); background: var(--accent); color: #fff; }
.lo-ext-go:hover { background: var(--accent-hover); }
@media (max-width: 420px) { .lo-ext-actions { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .lo-ext-modal { backdrop-filter: none; } }
/* Barra pegajosa de lectura: delgada, arriba, mientras la cabecera quedó fuera de pantalla. */
.lo-sticky-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 95; display: flex; align-items: center; gap: 8px; padding: 8px max(14px, calc((100vw - 1120px) / 2)); background: color-mix(in srgb, var(--surface) 93%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.lo-sticky-bar[hidden] { display: none; }
/* El «⋯» de esta barra abre el panel compartido de la ficha (#lo-more), que objects.js ancla al propio
   botón: ya no hace falta fijar el desplegable de la cabecera con coordenadas históricas ni sincronizar
   dos barras apiladas. */
.lo-sticky-bar .sb-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
body.lo-guide-on .lo-sticky-bar { display: none !important; }
@media (max-width: 640px) {
    .lo-sticky-bar .button { padding: 8px 10px; }
    .lo-sticky-bar .sb-title { font-size: 13px; }
}
.lo-format-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--warm); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
.lo-meta-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lo-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 500; line-height: 1; }
.lo-badge-age { background: var(--accent-soft); color: var(--accent); }
.lo-badge-subject { background: var(--warm-soft, #fef3c7); color: var(--warm, #92400e); }
.lo-badge-lang { background: var(--surface); color: var(--muted); border: 1px solid var(--line); }
/* Filtros de objetos: formulario compacto de desplegables (una fila en escritorio, se apila en móvil) para no saturar de enlaces la vista. */
.obj-filters-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: end; padding: 16px 0; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.obj-filters-form label { display: flex; flex-direction: column; gap: 5px; margin: 0; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.obj-filters-form select { width: 100%; min-width: 0; }
.obj-filters-form .filter-actions { grid-column: 1 / -1; margin-top: 0; }
.generated-cover.lo-cover { border-top: 4px solid var(--warm); }

/* Leccion y bloques. */
.lo-lesson { max-width: 820px; margin: 0 auto; }

/* Banners publicitarios en vista de OA online (arriba y abajo del contenido). */
.lo-ad-banner {
  width: 100%;
  margin: 0 auto var(--space-4);
  padding: 0;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.lo-ad-banner[hidden] { display: none; }
.lo-ad-banner .ad-label {
  position: absolute;
  top: 4px;
  right: 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  font-weight: 600;
}
.lo-ad-banner img {
  width: 100%;
  height: auto;
  display: block;
}
.lo-ad-banner a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.lo-ad-banner a:hover {
  opacity: 0.9;
}
.lo-ad-banner--top {
  margin-bottom: var(--space-5);
}
.lo-ad-banner--bottom {
  margin-top: var(--space-5);
  margin-bottom: 0;
}

.lo-block { position: relative; padding: var(--space-4) 0; border-bottom: 1px solid transparent; }
.lo-lesson .lo-p, .lo-prompt { font-size: 17px; line-height: 1.7; color: var(--ink); }
.lo-heading { font-family: var(--font-reading); font-weight: 400; letter-spacing: -.02em; margin: 8px 0; }
.lo-sub { margin: 4px 0 10px; }
.lo-list { padding-left: 22px; display: grid; gap: 6px; font-size: 16px; line-height: 1.6; }

/* Zona destacada «Para dominar este tema» (cierre estándar de todo OA). */
.lo-dominar {
  position: relative;
  margin: var(--space-7) 0 var(--space-6);
  padding: clamp(20px, 3.2vw, 32px) clamp(18px, 3.4vw, 36px) var(--space-4);
  border-radius: var(--radius-lg);
  border: 2px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 60%, var(--surface)), var(--surface) 55%);
  box-shadow: 0 16px 40px -22px color-mix(in srgb, var(--accent) 60%, transparent);
}
.lo-dominar::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 6px;
  border-radius: 0 6px 6px 0; background: linear-gradient(180deg, var(--accent), var(--warm));
}
.lo-dominar > .lo-block { padding-left: 14px; }
.lo-dominar > .lo-block:first-child { padding-top: 0; }
.lo-dominar > .lo-heading .lo-heading {
  display: flex; align-items: center; gap: 12px; margin: 0 0 6px;
  font-family: var(--font-reading); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem); color: var(--accent);
}
.lo-dominar > .lo-heading .lo-heading::before {
  content: "\2713"; flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent); color: var(--surface); font-size: 21px; font-weight: 900;
  box-shadow: 0 6px 16px -6px var(--accent);
}
.lo-dominar > .lo-list { padding: 8px 0; }
.lo-dominar > .lo-list .lo-heading {
  font-weight: 700; color: var(--ink); margin: 4px 0 10px;
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
}
.lo-dominar > .lo-list .lo-list { list-style: none; padding-left: 0; display: grid; gap: 8px; }
.lo-dominar > .lo-list .lo-list > li {
  position: relative; line-height: 1.55; padding: 9px 14px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 78%, var(--accent-soft));
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
}
.lo-dominar > .lo-list ul.lo-list > li { padding-left: 34px; }
.lo-dominar > .lo-list ul.lo-list > li::before {
  content: ""; position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
}
.lo-dominar > .lo-list ol.lo-list { counter-reset: dom; }
.lo-dominar > .lo-list ol.lo-list > li { counter-increment: dom; padding-left: 44px; }
.lo-dominar > .lo-list ol.lo-list > li::before {
  content: counter(dom); position: absolute; left: 11px; top: 9px;
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--surface); font-weight: 800; font-size: 13px;
}
/* En modos guiado/escena el contenedor se colapsa para no romper el paso a paso. */
.lo-guided .lo-dominar, .lo-stage-body .lo-dominar { display: contents; }

/* Avisos y citas. */
.lo-callout { padding: 16px 18px; border-radius: var(--radius-md); border-left: 4px solid var(--accent); background: var(--surface); }
.lo-callout-title { font-weight: 700; margin: 0 0 4px; }
.lo-callout-body { margin: 0; } 
.lo-callout--info { border-color: #4a6fa5; background: color-mix(in srgb, #4a6fa5 8%, var(--surface)); }
.lo-callout--tip { border-color: var(--ok); background: var(--ok-soft); }
.lo-callout--warning { border-color: var(--warn); background: var(--warn-soft); }
.lo-callout--important { border-color: var(--danger); background: var(--danger-soft); }
.lo-quote { margin: 0; padding: 6px 0 6px 20px; border-left: 3px solid var(--warm); font-family: var(--font-reading); font-size: 19px; font-style: italic; color: var(--ink); }
.lo-quote cite { display: block; margin-top: 8px; font-size: 13px; font-style: normal; color: var(--muted); }

/* Medios. */
.lo-figure { margin: 0; }
.lo-img { border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.lo-figure figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); }
.lo-video video, .lo-audio audio { width: 100%; border-radius: var(--radius-md); background: #000; }
.lo-embed-frame { position: relative; width: 100%; padding-top: 56.25%; border-radius: var(--radius-md); overflow: hidden; background: #000; box-shadow: var(--shadow-sm); }
.lo-embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lo-embed-title { margin-top: 8px; }
/* Facade click-to-load de vídeo (YouTube/Vimeo): cubre el frame 16:9 sin cargar el
   reproductor de terceros. Compartido por .lo-embed-frame, .media-embed-frame y .wc-video-frame. */
.embed-facade { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; border: 0; cursor: pointer; color: #fff; background: radial-gradient(120% 120% at 50% 30%, #26313d 0%, #0a0e13 70%); font: 600 clamp(14px, 2.4vw, 18px)/1.3 var(--font-reading, system-ui, sans-serif); text-align: center; }
.embed-facade:focus-visible { outline: 3px solid var(--warm, #FFB000); outline-offset: -3px; }
.embed-facade-play { position: relative; flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; transition: transform .15s ease, background .15s ease, color .15s ease; }
.embed-facade-play::before { content: ""; margin-left: 6px; border-style: solid; border-width: 14px 0 14px 24px; border-color: transparent transparent transparent currentColor; }
.embed-facade:hover .embed-facade-play, .embed-facade:focus-visible .embed-facade-play { transform: scale(1.08); background: var(--warm, #FFB000); color: #12161d; }
.embed-facade-label { max-width: 92%; }
.lo-link-wrap { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.lo-link { color: var(--accent); font-weight: 600; }
.lo-link-note { width: 100%; }

/* Datos. */
.lo-table-wrap { overflow-x: auto; }
.lo-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.lo-table caption { text-align: left; color: var(--muted); font-size: 13px; padding-bottom: 8px; }
.lo-table th, .lo-table td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; }
.lo-table thead th { background: var(--accent-soft); font-weight: 700; }
.lo-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface) 60%, var(--bg)); }
.lo-chart { margin: 0; color: var(--ink); }
.lo-chart-title { font-weight: 700; margin-bottom: 8px; }
.lo-chart-canvas svg { width: 100%; height: auto; color: var(--ink); }
.lo-chart-source { margin-top: 4px; }
.lo-chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 13px; }
.lo-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.lo-legend-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
/* Mapas mentales y planos cartesianos (los dibuja objects.js; la lista es el respaldo accesible). */
.lo-mindmap, .lo-graph { margin: 0; color: var(--ink); }
.lo-mindmap { position: relative; } /* ancla del botón de pantalla completa */
.lo-mm-canvas { display: none; } /* sin JS gana la lista; al dibujar el SVG, objects.js pone .lo-mm-drawn */
.lo-mindmap.lo-mm-drawn .lo-mm-canvas { display: block; }
.lo-mindmap.lo-mm-drawn .lo-mm-tree { display: none; }
.lo-mm-tree ul { margin: 4px 0 4px 16px; }
.lo-graph-formulas { margin-top: 6px; }

/* jsMind: mindmap radial tradicional */
.lo-jm-canvas {
    display: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    margin: 16px 0;
    min-height: 400px;
    position: relative;
}
.lo-mindmap.lo-jm-drawn .lo-jm-canvas {
    display: block;
    touch-action: none; /* el arrastre de un dedo panea el mapa (objects.js); sin esto, el gesto horizontal dispara el atrás/adelante del navegador */
}
/* Pantalla completa opcional del mapa mental (botón que inyecta objects.js): para los
   radiales anchos que no caben en los 500 px del bloque dentro de la lección. */
.lo-jm-fs { position: absolute; top: 24px; right: 10px; z-index: 5; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 17px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; opacity: .8; transition: opacity .15s ease, border-color .15s ease, color .15s ease; }
.lo-jm-fs:hover, .lo-jm-fs:focus-visible { opacity: 1; border-color: var(--accent); color: var(--accent); }
.lo-mindmap:fullscreen { background: var(--surface); padding: 12px; }
.lo-mindmap:fullscreen .lo-jm-canvas { height: calc(100vh - 24px) !important; margin: 0; border: 0; border-radius: 0; } /* gana al height inline del renderer */
.lo-mindmap:fullscreen .lo-jm-fs { top: 20px; right: 20px; }
.jsmind {
    font-family: var(--font-ui) !important;
}
.jsmind .jsmind-node {
    cursor: pointer;
}
.jsmind .jsmind-node-selected {
    background: var(--accent-soft) !important;
    border-color: var(--accent) !important;
}
/* Fórmulas MathML nativas (renderizadas en servidor; sin librerías). */
.lo-formula { margin: 14px 0; text-align: center; overflow-x: auto; }
.lo-formula math { font-size: 1.18rem; }
.lo-formula-caption { margin-top: 6px; }

/* Interaccion (quizzes). */
.lo-quiz { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.lo-prompt { margin: 0 0 12px; font-weight: 600; }
.lo-options { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.lo-opt { display: block; width: 100%; text-align: left; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); transition: border-color .15s, background .15s; }
.lo-opt:hover { border-color: var(--accent); }
.lo-tf-buttons { display: flex; gap: 10px; }
.lo-tf-buttons .lo-opt { width: auto; flex: 1; text-align: center; }
.lo-opt.picked { border-color: var(--accent); background: var(--accent-soft); }
.lo-opt.correct { border-color: var(--ok); background: var(--ok-soft); }
.lo-opt.wrong, .lo-blank.wrong, .lo-match-row.wrong { border-color: var(--danger); background: var(--danger-soft); }
.lo-blank.correct, .lo-match-row.correct { border-color: var(--ok); background: var(--ok-soft); }
.lo-blank { width: 130px; padding: 6px 8px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--radius-sm); background: var(--bg); }
.lo-actions { display: flex; gap: 10px; margin-top: 12px; }
.lo-fillblank .lo-prompt { font-weight: 400; }
.lo-match-cols { display: grid; gap: 8px; }
.lo-match-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.lo-match-term { font-weight: 600; }
.lo-match-select { padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); max-width: 55%; }
.lo-feedback { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-sm); font-size: 14px; }
.lo-feedback.ok { background: var(--ok-soft); }
.lo-feedback.no { background: var(--warn-soft); }
.lo-fb-head { font-weight: 700; margin: 0 0 4px; }
.lo-fb-explain { margin: 0; }
.lo-fb-evidence { margin-top: 8px; }
.lo-fb-evidence summary { cursor: pointer; color: var(--muted); font-size: 13px; }

/* Flashcards. Las caras van apiladas (absolute) dentro de una tarjeta de alto fijo, así que
   el texto largo debe caber dentro: se centra con seguridad y, si no cabe, la cara hace scroll
   en vez de desbordarse y chocar con la tarjeta de al lado (el bug de «formato al voltear»). */
.lo-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.lo-card { position: relative; min-height: 150px; perspective: 1000px; cursor: pointer; }
.lo-face { position: absolute; inset: 0; display: grid; place-content: safe center; overflow: auto; overscroll-behavior: contain; padding: 16px; text-align: center; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); backface-visibility: hidden; transition: transform .4s; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.lo-back { transform: rotateY(180deg); background: var(--accent-soft); }
.lo-card.flipped .lo-front { transform: rotateY(-180deg); }
.lo-card.flipped .lo-back { transform: rotateY(0); }

/* Juegos de repaso (wordsearch / memory / sort): mismo lenguaje visual que los quizzes. */
.lo-game { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
/* Sopa de letras. */
.lo-ws-board { display: grid; gap: 3px; margin: 12px auto; max-width: 460px; user-select: none; }
.lo-ws-cell { aspect-ratio: 1 / 1; display: grid; place-content: center; padding: 0; font: inherit; font-weight: 700; font-size: 15px; text-transform: uppercase; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; transition: background .12s, border-color .12s; }
.lo-ws-cell:hover { border-color: var(--accent); }
.lo-ws-cell.sel { border-color: var(--accent); background: var(--accent-soft); }
.lo-ws-cell.found { background: var(--ok-soft); border-color: var(--ok); color: var(--ink); cursor: default; }
.lo-ws-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.lo-ws-word { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); font-size: 14px; text-transform: capitalize; }
.lo-ws-word.done { text-decoration: line-through; border-color: var(--ok); background: var(--ok-soft); color: var(--muted); }
.lo-ws-status { margin-top: 10px; font-weight: 700; }
/* Memoria. */
.lo-mem-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.lo-mem-card { position: relative; aspect-ratio: 4 / 3; padding: 0; border: 0; background: transparent; perspective: 800px; cursor: pointer; transform-style: preserve-3d; }
.lo-mem-face { position: absolute; inset: 0; display: grid; place-content: safe center; padding: 8px; text-align: center; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 14px; line-height: 1.35; backface-visibility: hidden; transition: transform .35s; overflow-wrap: anywhere; }
.lo-mem-back { background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 22px; }
.lo-mem-front { background: var(--bg); transform: rotateY(180deg); }
.lo-mem-card.open .lo-mem-back, .lo-mem-card.matched .lo-mem-back { transform: rotateY(-180deg); }
.lo-mem-card.open .lo-mem-front, .lo-mem-card.matched .lo-mem-front { transform: rotateY(0); }
.lo-mem-card.matched .lo-mem-front { border-color: var(--ok); background: var(--ok-soft); }
/* Clasificar. */
.lo-sort-pool { display: flex; flex-wrap: wrap; gap: 8px; min-height: 42px; margin: 4px 0 14px; padding: 10px; border: 1px dashed var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.lo-chip { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; cursor: grab; transition: border-color .12s, background .12s; }
.lo-chip.picked { border-color: var(--accent); background: var(--accent-soft); }
.lo-chip.correct { border-color: var(--ok); background: var(--ok-soft); }
.lo-chip.wrong { border-color: var(--danger); background: var(--danger-soft); }
.lo-sort-bins { display: grid; gap: 10px; }
.lo-sort-bin { padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); min-height: 96px; }
.lo-sort-cat { margin: 0 0 8px; font-weight: 700; text-align: center; color: var(--warm); }
.lo-sort-slots { display: flex; flex-wrap: wrap; gap: 6px; min-height: 36px; }
/* Clasificar: región de estado accesible (aria-live). El foco visible ya lo da el :focus-visible global. */
.lo-sort-status { margin: 10px 0 0; min-height: 1.2em; color: var(--muted); }

/* Ordenar secuencia (sequence): lista barajada con botones ↑/↓ y arrastre; 100 % teclado. */
.lo-seq-list { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.lo-seq-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); cursor: grab; }
.lo-seq-item.correct { border-color: var(--ok); background: var(--ok-soft); }
.lo-seq-item.wrong { border-color: var(--danger); background: var(--danger-soft); }
.lo-seq-num { flex-shrink: 0; width: 26px; height: 26px; display: grid; place-content: center; border-radius: 50%; background: var(--accent-soft); color: var(--warm); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.lo-seq-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.lo-seq-ctrl { flex-shrink: 0; display: flex; gap: 4px; }
.lo-seq-btn { width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 16px; line-height: 1; cursor: pointer; transition: border-color .12s, background .12s; }
.lo-seq-btn:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.lo-seq-btn:disabled { opacity: .35; cursor: default; }
.lo-seq-status { margin: 10px 0 0; min-height: 1.2em; color: var(--muted); }

/* Respuesta numérica (numeric_answer). */
.lo-num-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lo-num-input { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); font: inherit; font-size: 16px; min-width: 160px; max-width: 240px; }
.lo-num-input.correct { border-color: var(--ok); background: var(--ok-soft); }
.lo-num-input.wrong { border-color: var(--danger); background: var(--danger-soft); }
.lo-num-unit { color: var(--muted); font-weight: 600; }

/* Pasos progresivos (step_reveal): numeración automática, revelado uno a uno. */
.lo-steps { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.lo-steps-list { list-style: none; counter-reset: lo-step; margin: 0; padding: 0; display: grid; gap: 12px; }
.lo-step { position: relative; padding: 12px 14px 12px 46px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); counter-increment: lo-step; }
.lo-step::before { content: counter(lo-step); position: absolute; left: 12px; top: 12px; width: 24px; height: 24px; display: grid; place-content: center; border-radius: 50%; background: var(--accent-soft); color: var(--warm); font-weight: 700; font-size: 13px; }
.lo-step[hidden] { display: none; }
.lo-step-title { margin: 0 0 4px; font-weight: 700; }
.lo-step-text { margin: 0; }
.lo-step-code { margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); overflow-x: auto; font-size: 13px; line-height: 1.5; }
.lo-step-code code { font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; }
.lo-step-formula { margin: 10px 0 0; text-align: center; overflow-x: auto; }
.lo-step-formula math { font-size: 1.12rem; }
.lo-step-img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 10px 0 0; }
.lo-step-callout { margin: 10px 0 0; }
.lo-steps-count { margin: 10px 0 0; min-height: 1.2em; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Móvil: controles de secuencia y entrada numérica a ancho cómodo, área táctil ≥44 px. */
@media (max-width: 480px) {
    .lo-seq-item { flex-wrap: wrap; }
    .lo-seq-text { flex-basis: calc(100% - 46px); }
    .lo-seq-btn { width: 44px; height: 44px; }
    .lo-num-input { max-width: none; width: 100%; }
}

/* Detective de errores (error_detective): líneas marcables con revelado de aciertos/fallos. */
.lo-err-list { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.lo-err-line { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .12s, background .12s; }
.lo-err-mark { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.lo-err-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.lo-err-line.selected { border-color: var(--accent); background: var(--accent-soft); }
.lo-err-line.selected .lo-err-mark { background: var(--accent); border-color: var(--accent); }
.lo-err-line.correct { border-color: var(--ok); background: var(--ok-soft); }
.lo-err-line.correct .lo-err-mark { background: var(--ok); border-color: var(--ok); }
.lo-err-line.wrong { border-color: var(--danger); background: var(--danger-soft); }
.lo-err-line.wrong .lo-err-mark { background: var(--danger); border-color: var(--danger); }
.lo-err-line.missed { border-color: var(--warn); background: var(--warn-soft); }
.lo-err-status { margin: 10px 0 0; min-height: 1.2em; color: var(--muted); }

/* Respuesta con confianza (confidence): opciones + escala fija de 4 niveles. */
.lo-conf-label { margin: 14px 0 6px; }
.lo-conf-scale { display: flex; flex-wrap: wrap; gap: 8px; }
.lo-conf-btn { flex: 1 1 auto; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; transition: border-color .12s, background .12s; }
.lo-conf-btn:hover { border-color: var(--accent); }
.lo-conf-btn.picked { border-color: var(--accent); background: var(--accent-soft); font-weight: 700; }

/* Predicción (prediction): revelado del resultado real tras responder. */
.lo-pred-reveal { margin: 14px 0 0; padding: 14px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); background: var(--bg); }
.lo-pred-reveal[hidden] { display: none; }
.lo-pred-text { margin: 0; }
.lo-pred-img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 10px 0 0; }
.lo-pred-explain { margin: 10px 0 0; color: var(--muted); }
.lo-pred-reflection { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); }

/* Compuerta de avance (checkpoint): agregado de resultados locales y veredicto. */
.lo-checkpoint { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.lo-checkpoint-intro { margin: 0 0 12px; }
.lo-checkpoint-result { margin: 0 0 12px; }
.lo-checkpoint-result:empty { display: none; }
.lo-checkpoint-score { margin: 0; font-variant-numeric: tabular-nums; }
.lo-checkpoint-verdict { margin: 6px 0 0; font-weight: 700; }
.lo-checkpoint-verdict.ok { color: var(--ok); }
.lo-checkpoint-verdict.no { color: var(--danger); }
.lo-checkpoint .lo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lo-checkpoint-pass[hidden], .lo-checkpoint-fail[hidden] { display: none; }

/* Resaltar texto (text_highlight): palabras/frases marcables, con o sin categorías. */
.lo-hl-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.lo-hl-cat { min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; transition: border-color .12s, background .12s; }
.lo-hl-cat:hover { border-color: var(--accent); }
.lo-hl-cat.picked { border-color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.lo-hl-body { line-height: 2; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.lo-hl-token { display: inline-block; margin: 2px 1px; padding: 2px 6px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: inherit; font: inherit; cursor: pointer; transition: background .12s, border-color .12s; }
.lo-hl-token:hover { background: var(--accent-soft); }
.lo-hl-token.marked { border-color: var(--accent); background: var(--accent-soft); }
.lo-hl-token.correct { border-color: var(--ok); background: var(--ok-soft); }
.lo-hl-token.wrong { border-color: var(--danger); background: var(--danger-soft); }
.lo-hl-token.missed { border-color: var(--warn); background: var(--warn-soft); }
.lo-hl-sentence { display: block; width: 100%; text-align: left; margin: 4px 0; padding: 8px 10px; line-height: 1.5; }
.lo-hl-status { margin: 10px 0 0; min-height: 1.2em; }

/* Comparar fuentes (source_compare): paneles lado a lado; se apilan en móvil. */
.lo-sources { margin: 0; }
.lo-src-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.lo-src { margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lo-src-label { font-weight: 700; color: var(--warm); }
.lo-src-text { overflow-wrap: anywhere; }
.lo-src-img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.lo-src--table { overflow-x: auto; }
.lo-src-caption { margin: 10px 0 0; }

/* Constructor de argumentos (argument_builder): andamiaje por pasos. */
.lo-argument { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.lo-arg-steps { display: grid; gap: 14px; }
.lo-arg-step { display: grid; gap: 6px; }
.lo-arg-label { margin: 0; font-weight: 700; }
.lo-arg-hint { margin: 0; }
.lo-arg-input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); font: inherit; resize: vertical; }
.lo-arg-status { margin: 10px 0 0; min-height: 1.2em; }

/* Antes y después (before_after): divisor deslizable sobre dos imágenes. */
.lo-compare { margin: 0; }
.lo-ba-frame { position: relative; overflow: hidden; border-radius: var(--radius-md); --ba-pos: 50%; }
.lo-ba-frame .lo-img { display: block; width: 100%; height: auto; }
.lo-ba-before { position: absolute; top: 0; left: 0; clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0); }
.lo-ba-handle { position: absolute; top: 0; bottom: 0; left: var(--ba-pos); width: 3px; margin-left: -1.5px; background: var(--surface); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); pointer-events: none; }
.lo-ba-tag { position: absolute; bottom: 8px; padding: 3px 8px; border-radius: var(--radius-sm); background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; font-weight: 700; pointer-events: none; }
.lo-ba-tag--before { left: 8px; }
.lo-ba-tag--after { right: 8px; }
.lo-ba-range { width: 100%; margin: 12px 0 0; }
.lo-compare-caption { margin: 8px 0 0; }

/* Bloc de notas (scratchpad). */
.lo-scratchpad { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.lo-scratch-input { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); font: inherit; resize: vertical; }
.lo-scratch-status { margin: 10px 0 0; min-height: 1.2em; }

/* Bloque de código (code): ventana profesional con resaltado autoral, números de línea y copiar.
   Los colores tk-* son literales deliberados: no existen tokens semánticos para sintaxis y deben
   calibrarse sobre el fondo del editor; se voltean en el bloque de tema oscuro. Lo demás usa tokens. */
.lo-code { --code-bg: #f7f4ee; --tk-com: #6a737d; --tk-str: #0a6b33; --tk-kw: #7d3bc4; --tk-num: #b35900; --tk-fn: #0b6bcb; --tk-tag: #cf222e; --tk-attr: #8250df; --tk-var: #953800;
    margin: 16px 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.lo-code-bar { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--bg); border-bottom: 1px solid var(--line); font-size: 12px; }
.lo-code-lang { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--muted); }
.lo-code-file { color: var(--muted); font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; }
.lo-code-bar .lo-code-copy { margin-left: auto; }
.lo-code-pre { margin: 0; padding: 12px 14px; overflow-x: auto; background: var(--code-bg); }
.lo-code-pre code { font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; font-size: .9rem; line-height: 1.55; color: var(--ink); counter-reset: ln; display: block; }
.lo-code-ln { display: block; white-space: pre; position: relative; padding-left: 2.9em; counter-increment: ln; }
.lo-code-ln::before { content: counter(ln); position: absolute; left: 0; width: 2.1em; text-align: right; color: var(--muted); opacity: .6; user-select: none; }
.lo-code-ln.is-hl { background: var(--accent-soft); box-shadow: -2px 0 0 var(--accent); }
.lo-code-caption { margin: 0; padding: 8px 14px; border-top: 1px solid var(--line); }
.tk-com { color: var(--tk-com); font-style: italic; }
.tk-str { color: var(--tk-str); }
.tk-kw { color: var(--tk-kw); font-weight: 600; }
.tk-num { color: var(--tk-num); }
.tk-fn { color: var(--tk-fn); }
.tk-tag { color: var(--tk-tag); }
.tk-attr { color: var(--tk-attr); }
.tk-var { color: var(--tk-var); }
:root[data-theme~="dark"] .lo-code { --code-bg: #0b1017; --tk-com: #8b949e; --tk-str: #7ee787; --tk-kw: #d2a8ff; --tk-num: #ffa657; --tk-fn: #79c0ff; --tk-tag: #ff7b72; --tk-attr: #d2a8ff; --tk-var: #ffa657; }

/* Código inline en prosa (`código`). */
.lo-icode { font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; font-size: .88em; padding: .1em .35em; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--ink); }


/* Móvil: categorías a ancho cómodo y divisor con área táctil alta. */
@media (max-width: 480px) {
    .lo-hl-cat { flex: 1 1 auto; }
    .lo-ba-range { height: 44px; }
}

/* Linea de tiempo. */
.lo-timeline { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid var(--line); display: grid; gap: 16px; }
.lo-tl-item { position: relative; }
.lo-tl-item::before { content: ''; position: absolute; left: -29px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.lo-tl-label { font-size: 12px; font-weight: 700; color: var(--warm); text-transform: uppercase; letter-spacing: .04em; }
.lo-tl-body p { margin: 4px 0 0; color: var(--muted); }

/* Rama / decisiones. */
.lo-branch { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.lo-branch-text { font-size: 17px; line-height: 1.6; }
.lo-branch-choices { display: grid; gap: 8px; margin: 12px 0; }
.lo-branch-choice { width: 100%; }
.lo-branch-end { color: var(--warm); font-weight: 700; }

/* Reflexion. */
.lo-reflection textarea { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); font: inherit; }

/* Altavoz por bloque. */
.lo-tts-btn { position: absolute; top: 8px; right: 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--muted); line-height: 1; display: none; align-items: center; justify-content: center; }
.lo-block:hover .lo-tts-btn, .lo-tts-btn:focus-visible { display: inline-flex; }
.lo-tts-btn.speaking { color: var(--accent); border-color: var(--accent); }
/* ANIMACIONES de los objetos: entrada al hacer scroll, feedback con carácter y chispa de celebración.
   CSS puro + IntersectionObserver + Web Animations API (sin librerías, CSP 'self' intacto).
   El bloque anterior de prefers-reduced-motion y los guardas de JS desactivan todo si el usuario prefiere calma. */
.lo-anim .lo-block { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.lo-anim .lo-block.lo-in { opacity: 1; transform: none; }
.lo-opt.correct, .lo-ws-cell.found, .lo-mem-card.matched, .lo-chip.correct, .lo-match-row.correct { animation: lo-pop .45s cubic-bezier(.2, 1.6, .4, 1); }
.lo-feedback.ok .lo-fb-head { animation: lo-pop .5s cubic-bezier(.2, 1.6, .4, 1); display: inline-block; }
.lo-feedback.no { animation: lo-shake .45s ease; }
.lo-ws-status.ok { animation: lo-pop .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes lo-pop { 0% { transform: scale(.6); opacity: .2; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
@keyframes lo-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
.lo-spark { position: fixed; z-index: 90; pointer-events: none; color: var(--accent); font-size: 18px; will-change: transform, opacity; }
.button.speaking, .button.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* MODO GUÍA (presentación): overlay a pantalla completa, bloque activo centrado
   como diapositiva, HUD arriba y barra abajo. Reversible: al salir vuelve el scroll. */
.lo-guided .lo-block { display: none; }
.lo-guided .lo-block.lo-active { display: block; }
body.lo-guide-on { overflow: hidden; overscroll-behavior: contain; }   /* Fase 8: ni pull-to-refresh ni «atrás» del navegador al deslizar en la guía */

/* Marca de agua temática (portada del OA) tras la diapositiva, estilo Encarta: tenue,
   desaturada y sin protagonismo. Los controles del escenario suben por encima con z-index. */
.lo-stage-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: .09; filter: grayscale(.55) contrast(.9); -webkit-mask-image: radial-gradient(120% 90% at 50% 45%, #000 30%, transparent 78%); mask-image: radial-gradient(120% 90% at 50% 45%, #000 30%, transparent 78%); }
.lo-staged .lo-stage-hud, .lo-staged .lo-stage-body, .lo-staged .lo-wizard { position: relative; z-index: 1; }

/* max-width:none es OBLIGATORIO: .lo-lesson trae max-width:820px + margin:0 auto, y con inset:0 y
   margin:0 la caja fixed quedaría anclada a la izquierda a 820px (la página asoma por la derecha). */
.lo-lesson.lo-staged { position: fixed; inset: 0; z-index: 200; margin: 0; max-width: none; display: flex; flex-direction: column; background: var(--bg); }
.lo-stage-hud { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.lo-stage-title { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lo-stage-step { flex: 0 0 auto; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.lo-stage-actions { flex: 0 0 auto; display: flex; gap: 8px; }
.lo-stage-btn { font-size: .82rem; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); cursor: pointer; }
.lo-stage-btn:hover { border-color: var(--accent); }
.lo-stage-exit { color: var(--muted); }

.lo-stage-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; align-items: center; justify-content: center; padding: clamp(14px, 3vw, 48px); }
/* Auto-fit: la diapositiva aprovecha el ancho alto disponibles; se amplía en pantallas grandes y se encoge en móviles sin scroll lateral. */
.lo-stage-body .lo-block.lo-active { width: min(96vw, 1440px); max-height: 100%; margin: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: clamp(22px, 4.6vw, 64px); box-shadow: 0 24px 60px #20201e22; font-size: clamp(1rem, 1.1vw + .55rem, 1.35rem); animation: loStageIn .32s ease; }
.lo-stage-body .lo-block.lo-active h1 { font-size: clamp(1.9rem, 4.4vw, 3.4rem); line-height: 1.15; margin-bottom: .5em; }
.lo-stage-body .lo-block.lo-active h2 { font-size: clamp(1.5rem, 3.6vw, 2.6rem); line-height: 1.2; }
.lo-stage-body .lo-block.lo-active h3 { font-size: clamp(1.25rem, 2.6vw, 1.9rem); line-height: 1.25; }
.lo-stage-body .lo-block.lo-active p, .lo-stage-body .lo-block.lo-active li { font-size: clamp(1.1rem, 1.35vw + .55rem, 1.5rem); line-height: 1.72; }
.lo-stage-body .lo-block.lo-active .lo-caption { font-size: clamp(.95rem, 1vw + .5rem, 1.15rem); }
/* Imágenes, canvas y SVG del OA escalan con la diapositiva; se centran y respetan aspect-ratio. */
.lo-stage-body .lo-block.lo-active img, .lo-stage-body .lo-block.lo-active canvas, .lo-stage-body .lo-block.lo-active svg { max-width: 100%; height: auto; display: block; margin-inline: auto; }
.lo-stage-body .lo-block.lo-active .lo-vis, .lo-stage-body .lo-block.lo-active .lo-visual { margin: 1em 0; }
.lo-stage-body .lo-block.lo-active .lo-vis-canvas, .lo-stage-body .lo-block.lo-active .lo-visual canvas { width: 100%; height: auto; }
.lo-step-tag { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; margin-bottom: 12px; font-size: 1.05rem; }
@keyframes loStageIn { from { opacity: 0; transform: translateY(12px) scale(.99); } to { opacity: 1; transform: none; } }

/* Animaciones de entrada estilo PowerPoint: el JS elige una al azar por paso. */
.lo-stage-body .lo-block.lo-active.lo-fx-fade { animation: loFxIn .55s ease both; }
.lo-stage-body .lo-block.lo-active.lo-fx-slideR { animation: loFxSlideR .55s cubic-bezier(.2, .8, .3, 1) both; }
.lo-stage-body .lo-block.lo-active.lo-fx-slideL { animation: loFxSlideL .55s cubic-bezier(.2, .8, .3, 1) both; }
.lo-stage-body .lo-block.lo-active.lo-fx-slideU { animation: loFxSlideU .55s cubic-bezier(.2, .8, .3, 1) both; }
.lo-stage-body .lo-block.lo-active.lo-fx-zoom { animation: loFxZoom .55s cubic-bezier(.2, .9, .3, 1) both; }
.lo-stage-body .lo-block.lo-active.lo-fx-rotate { animation: loFxRotate .6s ease-out both; }
.lo-stage-body .lo-block.lo-active.lo-fx-flip { animation: loFxFlip .65s cubic-bezier(.2, .8, .3, 1) both; backface-visibility: hidden; }
.lo-stage-body .lo-block.lo-active.lo-fx-blur { animation: loFxBlur .6s ease both; }
.lo-stage-body .lo-block.lo-active.lo-fx-bounce { animation: loFxBounce .8s cubic-bezier(.2, 1.4, .4, 1) both; }
.lo-stage-body .lo-block.lo-active.lo-fx-drop { animation: loFxDrop .55s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes loFxIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes loFxSlideR { from { opacity: 0; transform: translateX(-8%); } to { opacity: 1; transform: none; } }
@keyframes loFxSlideL { from { opacity: 0; transform: translateX(8%); } to { opacity: 1; transform: none; } }
@keyframes loFxSlideU { from { opacity: 0; transform: translateY(14%); } to { opacity: 1; transform: none; } }
@keyframes loFxZoom { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes loFxRotate { from { opacity: 0; transform: rotate(-6deg) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes loFxFlip { from { opacity: 0; transform: perspective(1200px) rotateY(-14deg) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes loFxBlur { from { opacity: 0; filter: blur(12px); transform: scale(.98); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes loFxBounce { 0% { opacity: 0; transform: translateY(24%) scale(.92); } 55% { opacity: 1; transform: translateY(-4%) scale(1.02); } 100% { opacity: 1; transform: none; } }
@keyframes loFxDrop { from { opacity: 0; transform: translateY(-22%) scale(.95); } to { opacity: 1; transform: none; } }

/* Pantalla de cierre del modo guía (paso final virtual). */
.lo-stage-done { width: 100%; max-width: 640px; margin: auto; text-align: center; padding: clamp(24px, 5vw, 48px); }
.lo-done-icon { width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; font-weight: 800; color: #fff; background: var(--accent); box-shadow: 0 10px 30px #20201e26; }
.lo-done-title { font-size: clamp(1.5rem, 4vw, 2.1rem); margin: 0 0 8px; }
.lo-done-text { color: var(--muted); font-size: 1.05rem; line-height: 1.6; margin: 0 0 22px; }
.lo-done-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* La barra del wizard pasa a ser estática dentro del escenario (ya no fixed al borde). */
.lo-wizard { background: var(--surface); border-top: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
.lo-wizard-progress { height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; margin-bottom: 10px; }
.lo-wizard-progress span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s ease; }
.lo-wizard-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: min(96vw, 1440px); margin: 0 auto; }
.lo-wizard-count { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lo-lesson.lo-staged .lo-wizard { box-shadow: none; }

/* Fase 8 · móvil: el HUD con 5 botones se vuelve de iconos (las etiquetas ceden el
   sitio; el nombre accesible ya vive en aria-label) y todo respira con el safe-area. */
@media (max-width: 640px) {
    .lo-stage-hud { gap: 8px; padding: 8px 10px; }
    .lo-stage-title { font-size: .85rem; }
    .lo-stage-step { font-size: .68rem; }
    .lo-stage-actions { gap: 5px; }
    .lo-stage-btn { padding: 7px 9px; font-size: .9rem; }
    .lo-btn-label { display: none; }
    .lo-wizard { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
    .lo-wizard-nav { gap: 8px; }
}

@media (max-width: 780px) {
    .lo-stage-title { font-size: .85rem; }
    .lo-stage-body { padding: 14px; }
    .lo-stage-body .lo-block.lo-active { padding: 20px 16px; border-radius: 12px; }
}

/* MODO INFANTIL (data-kid): portada de entrada, barra táctil y panel «Ayúdame».
   Todo se apoya en las variables del tema; botones grandes, texto legible y una
   sola acción clara por pantalla. Secundaria/prepa/adultos NO reciben estas clases. */
.lo-lesson.lo-kid { font-size: clamp(1.05rem, 1.4vw + .5rem, 1.4rem); }
.object-head--kid { display: block; }
.object-head--kid .lo-kid-title { font-size: clamp(1.7rem, 5vw, 2.7rem); line-height: 1.12; margin: 0 0 .35em; }
.lo-kid-phrase { font-size: clamp(1.1rem, 2.4vw, 1.4rem); line-height: 1.55; color: var(--fg); max-width: 44ch; margin: 0 0 1.1em; }
.lo-controls--kid .lo-kid-start { min-height: 60px; font-size: 1.25rem; padding: 16px 32px; border-radius: 16px; }
.lo-controls--kid .button.big { min-height: 56px; font-size: 1.1rem; }
.lc-more--kid { margin-top: 6px; }
.lc-more--kid > summary { cursor: pointer; list-style: none; }
.lc-more--kid > summary::-webkit-details-marker { display: none; }

/* Portada de entrada del guía infantil: se comporta como una diapositiva más. */
.lo-stage-entry { width: min(94vw, 620px); margin: auto; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: clamp(26px, 5vw, 52px); box-shadow: 0 24px 60px #20201e22; animation: loStageIn .32s ease; }
.lo-entry-mark { font-size: 2.6rem; color: var(--accent); line-height: 1; }
.lo-entry-title { font-size: clamp(1.6rem, 4.4vw, 2.6rem); line-height: 1.15; margin: 8px 0 12px; }
.lo-entry-phrase { font-size: clamp(1.1rem, 2.6vw, 1.4rem); line-height: 1.55; color: var(--fg); margin: 0 0 12px; }
.lo-entry-meta { font-size: .95rem; color: var(--muted); margin: 0 0 22px; }
.lo-entry-go { min-height: 60px; font-size: 1.25rem; padding: 16px 40px; border-radius: 16px; display: inline-flex; align-items: center; gap: 10px; }

/* Panel lateral «Ayúdame»: no cambia el paso de lectura; «Volver» regresa al mismo punto. */
.lo-help { position: fixed; inset: 0; z-index: 240; display: flex; justify-content: flex-end; background: #20201e55; }
.lo-help-box { width: min(94vw, 460px); height: 100%; overflow-y: auto; background: var(--surface); border-left: 1px solid var(--line); box-shadow: -18px 0 50px #20201e33; padding: clamp(16px, 3vw, 26px); animation: loHelpIn .28s ease; }
@keyframes loHelpIn { from { transform: translateX(24%); opacity: .4; } to { transform: none; opacity: 1; } }
.lo-help-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 16px; }
.lo-help-kicker { flex: 0 0 100%; margin: 0; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.lo-help-title { flex: 1 1 auto; font-size: 1.15rem; }
.lo-help-x { flex: 0 0 auto; border: 1px solid var(--line); background: var(--bg); color: var(--fg); border-radius: 999px; padding: 7px 14px; font-size: .92rem; cursor: pointer; }
.lo-help-x:hover { border-color: var(--accent); }
.lo-help-body { font-size: 1.05rem; line-height: 1.6; }
.lo-help-body .rf-lesson, .lo-help-body .lo-content-info-body { margin-top: 6px; }
.lo-help-more { margin-top: 18px; border: 1px dashed var(--line); background: transparent; color: var(--accent); border-radius: 10px; padding: 10px 14px; font-size: .95rem; cursor: pointer; width: 100%; }
.lo-info-ghost { min-height: 40px; }

/* Datos secundarios («Información sobre este contenido»): una línea por dato, etiqueta + valor. */
.lo-content-info-body { display: grid; gap: 8px; padding: 6px 2px; }
.lo-ci-line { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: .95rem; }
.lo-ci-line > strong { flex: 0 0 120px; color: var(--muted); font-weight: 600; }
.lo-ci-val { flex: 1 1 200px; }
.lo-ci-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* Barra táctil infantil: todas las acciones caben en el alcance del pulgar, con etiqueta visible. */
@media (max-width: 640px) {
    .lo-guided.lo-kid .lo-btn-label { display: inline; }
    .lo-guided.lo-kid .lo-wizard-nav .button.small { padding: 10px 12px; font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
    .lo-stage-body .lo-block.lo-active,
    .lo-stage-body .lo-block.lo-active.lo-fx-fade,
    .lo-stage-body .lo-block.lo-active.lo-fx-slideR,
    .lo-stage-body .lo-block.lo-active.lo-fx-slideL,
    .lo-stage-body .lo-block.lo-active.lo-fx-slideU,
    .lo-stage-body .lo-block.lo-active.lo-fx-zoom,
    .lo-stage-body .lo-block.lo-active.lo-fx-rotate,
    .lo-stage-body .lo-block.lo-active.lo-fx-flip,
    .lo-stage-body .lo-block.lo-active.lo-fx-blur,
    .lo-stage-body .lo-block.lo-active.lo-fx-bounce,
    .lo-stage-body .lo-block.lo-active.lo-fx-drop { animation: none !important; }
}

/* Refuerzos opcionales del OA (§3, §31, §33): CTA amable + tarjetas desplegables, sin popups. */
.lo-reinforcements { margin: clamp(20px, 4vw, 40px) auto; }
.rf-head { text-align: center; margin-bottom: clamp(14px, 3vw, 24px); }
.rf-head h2 { font-size: clamp(1.3rem, 3vw, 1.8rem); margin: 2px 0 6px; }
.rf-head .muted { margin: 0; }
.rf-list { display: flex; flex-direction: column; gap: 12px; }
.rf-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.rf-card[open] { box-shadow: 0 10px 30px #20201e14; }
.rf-summary { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; }
.rf-summary::-webkit-details-marker { display: none; }
.rf-summary:hover { background: var(--accent-soft); }
.rf-icon { font-size: 1.5rem; line-height: 1; flex: 0 0 auto; }
.rf-titles { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rf-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.rf-title { font-weight: 700; color: var(--fg); }
.rf-chev { flex: 0 0 auto; color: var(--muted); font-size: 1.3rem; transition: transform .2s ease; }
.rf-card[open] .rf-chev { transform: rotate(90deg); }
.rf-body { border-top: 1px solid var(--line); padding: clamp(14px, 3vw, 24px); }
.rf-lesson { margin: 0; }
.rf-back { margin: 16px 0 0; text-align: center; }
.rf-back a { color: var(--accent); font-size: .9rem; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .rf-chev { transition: none; } }

/* ---- Motor de Explicaciones Visuales (bloque visual_explanation) ---- */
.lo-ve { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); overflow: hidden; margin: 8px 0; }
.lo-ve-stage { min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 28px 20px; text-align: center; }
.lo-ve[data-canvas="square"] .lo-ve-stage { min-height: 420px; }
.lo-ve[data-canvas="tall"] .lo-ve-stage { min-height: 520px; }
.ve-caption { font-size: clamp(18px, 3.2vw, 26px); font-weight: 700; color: var(--ink); margin: 0; }
.ve-narration { font-size: clamp(15px, 2.4vw, 18px); color: var(--muted); max-width: 46ch; margin: 0; }
.ve-field { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; width: 100%; }
.ve-item { transition: opacity .35s ease, transform .35s ease; }
.ve-enter { opacity: 0; transform: translateY(10px) scale(.96); }
.ve-text { font-size: clamp(17px, 3vw, 24px); color: var(--ink); line-height: 1.35; }
.ve-text.ve-strong { font-weight: 700; }
.ve-text.ve-muted { color: var(--muted); }
.ve-num { font-size: clamp(56px, 14vw, 120px); font-weight: 800; line-height: 1; color: var(--ink); letter-spacing: -0.03em; }
.ve-label { display: inline-block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); background: var(--accent-soft); padding: 4px 12px; border-radius: 999px; }
.ve-emoji { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ve-glyph { font-size: clamp(30px, 7vw, 56px); line-height: 1; }
.ve-shapes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ve-shape { width: 40px; height: 40px; background: var(--accent); display: inline-block; }
.ve-shape.ve-circle { border-radius: 50%; }
.ve-shape.ve-triangle { width: 0; height: 0; background: transparent; border-left: 22px solid transparent; border-right: 22px solid transparent; border-bottom: 38px solid var(--accent); }
.ve-shape.ve-bar { width: 26px; height: 60px; border-radius: 6px; }
.ve-shape.ve-c-warm { background: var(--warm); } .ve-shape.ve-c-warm.ve-triangle { border-bottom-color: var(--warm); }
.ve-shape.ve-c-ok { background: var(--ok); } .ve-shape.ve-c-ok.ve-triangle { border-bottom-color: var(--ok); }
.ve-shape.ve-c-ink { background: var(--ink); } .ve-shape.ve-c-ink.ve-triangle { border-bottom-color: var(--ink); }
.ve-shape.ve-c-line { background: var(--line); } .ve-shape.ve-c-line.ve-triangle { border-bottom-color: var(--line); }
.ve-img img { max-width: 100%; max-height: 46vh; border-radius: var(--radius-sm); }
.ve-group { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 16px; border: 2px dashed var(--line); border-radius: var(--radius-md); }
.ve-group-items, .ve-group .ve-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ve-group-label { font-size: 13px; font-weight: 700; color: var(--muted); }
/* Layouts (§44): el motor compone; el autor sólo declara. */
.ve-layout-row .ve-field { flex-direction: row; }
.ve-layout-column .ve-field { flex-direction: column; }
.ve-layout-grid .ve-field { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 14px; max-width: 620px; margin: 0 auto; }
.ve-layout-groups .ve-field { gap: 26px; }
.ve-layout-compare .ve-field, .ve-layout-split .ve-field { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: center; }
.ve-layout-equation .ve-field { flex-direction: row; gap: 14px; }
.ve-layout-equation .ve-num, .ve-layout-equation .ve-text { font-size: clamp(34px, 8vw, 64px); }
/* Énfasis por acción (§47). */
.ve-hi { box-shadow: 0 0 0 4px var(--accent-soft); border-radius: 10px; }
.ve-pulse { animation: ve-pulse .9s ease; }
@keyframes ve-pulse { 0%,100% { transform: scale(1); } 40% { transform: scale(1.12); } }
.ve-moved { transform: translateY(-14px); }
.ve-ask { margin-top: 6px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ve-ask-q { font-size: clamp(17px, 3vw, 22px); font-weight: 600; color: var(--ink); margin: 0; }
/* Controles (§24). */
.lo-ve:not(.lo-ve-live) .lo-ve-bar { display: none; }
.lo-ve-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--bg); }
.lo-ve-btn { min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.lo-ve-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.lo-ve-btn:disabled { opacity: .4; cursor: default; }
.lo-ve-play { background: var(--accent); color: #fff; border-color: var(--accent); }
.lo-ve-dots { display: flex; gap: 6px; margin: 0 6px; }
.lo-ve-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.lo-ve-dot.on { background: var(--accent); }
.lo-ve-count { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lo-ve-fallback { margin: 0; padding: 16px 20px; }
.lo-ve-fallback li { margin: 6px 0; }
/* Fullscreen (§23): el contenido es protagonista. */
.lo-ve:fullscreen { background: var(--bg); border-radius: 0; display: flex; flex-direction: column; }
.lo-ve:fullscreen .lo-ve-stage { flex: 1; min-height: 0; }
.lo-ve:fullscreen .lo-ve-bar { position: sticky; bottom: 0; }
/* Mobile-first: barra de controles compacta para que quepa en una fila en pantallas estrechas. */
@media (max-width: 759px) {
  .lo-ve-bar { gap: 6px; padding: 8px 10px; }
  .lo-ve-btn { min-width: 40px; height: 40px; padding: 0 8px; font-size: 16px; }
  .lo-ve-dots { gap: 4px; margin: 0 2px; }
  .lo-ve-dot { width: 7px; height: 7px; }
  /* Mientras un reproductor multi-escena está en pantalla, objects.js pone body.lo-ve-on: retiramos
     el chip fijo «Estás estudiando» para que no tape los botones derechos (⛶ ✕). Vuelve al apartarlo. */
  body.lo-ve-on .compass-route-chip { opacity: 0; transform: translateY(12px); pointer-events: none; }
}
.compass-route-chip { transition: opacity .2s ease, transform .2s ease; }
@media (prefers-reduced-motion: reduce) { .compass-route-chip { transition: none; } }
@media (prefers-reduced-motion: reduce) { .ve-item { transition: none; } .ve-enter { opacity: 1; transform: none; } .ve-pulse { animation: none; } }

/* Franja de escala de contenido (landing anónima): números grandes reales que dan perspectiva. */
.pulse-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(16px, 4vw, 48px); margin: clamp(8px, 2vw, 20px) auto clamp(28px, 5vw, 48px); padding: clamp(18px, 3vw, 28px) 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.pulse-item { flex: 1 1 150px; min-width: 130px; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.pulse-num { font-size: clamp(1.9rem, 4.5vw, 2.9rem); font-weight: 800; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; }
.pulse-label { font-size: .82rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }

/* Objetos dentro de una ruta: chip de estado propio (✦) y acento de materia. */
.cb-state.cb-object, .cb-statechip.cb-object { background: var(--accent-soft); color: var(--warm); }
.collection-objects .stage-heading { color: var(--warm); }

@media (max-width: 720px) {
    .object-head { grid-template-columns: 1fr; }
    .object-cover { max-width: 180px; margin: 0 auto; }
}

/* Contenido relacionado al final del objeto. */
.lo-related { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.lo-related .eyebrow { margin-bottom: 16px; }
.lo-related-route { margin-bottom: 32px; }
.lo-route-card { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.lo-route-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.lo-route-cover { flex-shrink: 0; }
.lo-route-cover img { border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.lo-route-cover .generated-cover { width: 80px; height: 110px; border-radius: var(--radius-sm); }
.lo-route-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.lo-route-info strong { font-size: 16px; overflow-wrap: anywhere; }
.lo-route-info small { font-size: 13px; }
.lo-route-collection { color: var(--warm); font-weight: 600; }
.lo-route-arrow { font-size: 28px; color: var(--muted); flex-shrink: 0; }
/* «Anterior en la ruta»: la tarjeta espejo del siguiente — la flecha abre a la izquierda. */
.lo-related-route--prev .lo-route-arrow { margin-right: 2px; }
.lo-related-grid { margin-top: 8px; }
.lo-related-grid .book-card-title { font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; display: block; overflow-wrap: anywhere; line-height: 1.3; }
.lo-related-grid .book-card-title:hover { color: var(--accent); }
@media (max-width: 720px) {
    .lo-route-card { flex-wrap: wrap; }
    .lo-related-grid .book-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important; }
}

/* RUTAS VIVAS (views/object.php · seccion .lo-paths): caminos curados con la pregunta del lector. */
.lo-paths { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 2px solid var(--accent-soft); }
.lo-paths .lp-head { margin-bottom: 20px; }
.lo-paths .lp-head h2 { margin: 4px 0 8px; letter-spacing: -.015em; }
.lo-paths .eyebrow { color: var(--warm); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; margin: 0; }
.lp-group { margin-bottom: 22px; }
.lp-group-title { font-size: .95rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 10px; font-weight: 700; }
.lp-group-items { display: grid; grid-template-columns: 1fr; gap: 10px; }
.lp-card { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s, transform .15s; }
.lp-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.lp-question { display: block; font-size: .85rem; color: var(--warm); font-weight: 600; margin-bottom: 4px; }
.lp-title { display: block; font-size: 1.02rem; line-height: 1.35; overflow-wrap: anywhere; }
.lp-why { display: block; font-size: .88rem; color: var(--muted); margin-top: 5px; line-height: 1.5; }
.lp-meta { display: block; font-size: .78rem; color: var(--muted); margin-top: 7px; }
.lp-meta .lp-back { font-style: normal; color: var(--accent); margin-right: 8px; }
.lp-meta .lp-subject { background: var(--accent-soft); color: var(--warm); border-radius: 999px; padding: 1px 9px; margin-right: 8px; font-weight: 600; }
@media (min-width: 900px) {
    .lp-group { display: grid; grid-template-columns: 200px 1fr; gap: 0 20px; align-items: start; }
    .lp-group-title { padding-top: 14px; margin: 0; }
    .lp-group-items { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

/* ---------------------------------------------------------------------------
   ESTUDIO DE CREACIÓN DE OBJETOS (views/object-studio.php)
   --------------------------------------------------------------------------- */
.studio { max-width: 760px; }
.studio-steps { display: flex; flex-wrap: wrap; gap: 10px 26px; list-style: none; margin: 18px 0 26px; padding: 0; font-size: 14px; color: var(--muted); }
.studio-steps li { position: relative; padding-left: 4px; }
.studio-steps strong { color: var(--ink); }
.studio .form-card { margin-bottom: 20px; }
.studio-h { font-size: 19px; margin: 0 0 16px; letter-spacing: -.01em; }
.studio-blocks { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 16px 6px; margin: 4px 0 20px; }
.studio-blocks legend { font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 6px; }
.studio-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 18px; }
.studio-checks .checkbox { margin-bottom: 10px; font-weight: 450; }
.studio-prompt { border-left: 3px solid var(--accent); }
.studio-prompt-actions { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.studio-prompt-text { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.55; white-space: pre; background: var(--bg); min-height: 320px; }
.studio-file small { font-weight: 400; }
/* API para agentes: panel de claves en el Estudio y página /agentes */
.studio-api .studio-token-new { border: 1px solid var(--accent); border-radius: 12px; padding: 14px 16px; margin: 14px 0; }
.studio-api .studio-token-new textarea { min-height: 0; }
.studio-token-list { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 8px; }
.studio-token-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bg); border-radius: 10px; padding: 10px 14px; }
.studio-token-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.studio-token-form label { flex: 1 1 240px; }
.agents-doc pre.studio-prompt-text { min-height: 0; overflow-x: auto; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.studio-guide { margin-top: 8px; }
.studio-guide p { margin: 12px 0 0; line-height: 1.7; color: var(--muted); }
.studio-guide code { background: var(--bg); padding: 1px 6px; border-radius: 5px; font-size: .9em; }
.studio-help { margin-top: 28px; }
.studio-h2 { font-size: 17px; margin: 0 0 4px; letter-spacing: -.01em; }
.studio-help .studio-guide { margin-top: 10px; }
.studio-guide summary { cursor: pointer; font-weight: 600; }
.studio-tips { margin: 12px 0 0; padding-left: 20px; line-height: 1.7; color: var(--muted); }
.studio-tips li { margin: 6px 0; }

/* VOLVER ARRIBA: botón flotante global (layout). Aparece tras una pantalla de scroll;
 en móvil se sienta sobre la bottom-nav respetando el safe-area. */
.to-top { position: fixed; right: 14px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 70;
    width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--surface); color: var(--ink); border: 1px solid var(--line); cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
    opacity: 0; transform: translateY(10px); pointer-events: none;
    transition: opacity .25s ease, transform .25s ease; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { border-color: var(--accent); color: var(--accent); }
@media (min-width: 720px) { .to-top { right: 22px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); } }

/* ── Botón flotante de WhatsApp (configurable por instancia) ──────────────────────────────
   Sólo existe en el DOM si settings['whatsapp_number'] está en la BD de ESA instancia (mismo
   gate que el layout aplica con body.has-wa). Verde oficial WhatsApp; sobre temas oscuros se ve
   igual porque es color propio, no --accent. En móvil sube por encima de la bottom-nav. */
.wa-float { position: fixed; right: 14px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 72;
    width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: #25D366; color: #fff; text-decoration: none; border: none; line-height: 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
    transition: transform .2s ease, box-shadow .2s ease; }
.wa-float:hover, .wa-float:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .28); color: #fff; }
.wa-float svg { width: 30px; height: 30px; display: block; }
@media (min-width: 720px) { .wa-float { right: 22px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); } }
/* Con el flotante activo el «volver arriba» sube una casilla para no solaparse con él en la esquina. */
body.has-wa .to-top { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 720px) { body.has-wa .to-top { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) { .wa-float { transition: none; } }

/* ── Catálogo de cursos por categorías ────────────────────────────────── */
/* Identidad cromática: categoría = teal (anaquel), curso = terracota (accent). */
.circles-page { --cat: #2f6d68; --cat-soft: #dcebe8; --cat-ink: #24504c; }
/* Variante B (verde): el anaquel se aparta del acento verde para no confundir categoría con acción. */
:root[data-theme~="light-b"] .circles-page { --cat: #1F5F73; --cat-soft: #DCEAEE; --cat-ink: #174A5A; }
:root[data-theme~="dark"] .circles-page { --cat: #6bb0a8; --cat-soft: #213834; --cat-ink: #a9d6cf; }
/* Estado de carga del filtrador/paginador AJAX (circles-app.js): atenúa la región mientras llega el
   fragmento (?frag=1) y bloquea doble-clic; si el fetch falla, el JS quita el atributo y navega entero. */
.circles-body { transition: opacity .15s ease; }
.circles-body[data-circles-busy] { opacity: .45; pointer-events: none; cursor: progress; }
/* Leyenda de conceptos: categoría vs curso */
.circles-legend { display: grid; gap: 12px; margin: 0 0 32px; }
@media (min-width: 700px) { .circles-legend { grid-template-columns: 1fr 1fr; } }
.legend-card { border: 1px solid var(--line); border-left: 3px solid var(--muted); border-radius: var(--radius-md); background: var(--surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.legend-card strong { font-size: 15px; }
.legend-card small { color: var(--muted); font-size: 13px; line-height: 1.55; }
.legend-category { border-left-color: var(--cat); }
.legend-course { border-left-color: var(--accent); }
.kind-chip { display: inline-flex; align-self: flex-start; align-items: center; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--cat-soft); color: var(--cat-ink); margin-bottom: 4px; }
.kind-chip.kind-course { background: var(--accent-soft); color: var(--accent); }
.list-title-note { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 8px; }

/* Zona plegable «Mis cursos» — nace plegada para no saturar la página. */
.my-courses-collapse { margin: 24px 0 8px; }
.my-courses-collapse > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-size: 20px; font-weight: 600; padding: 8px 0; user-select: none; }
.my-courses-collapse > summary::-webkit-details-marker { display: none; }
.my-courses-collapse > summary .toggle-arrow { display: inline-flex; transition: transform .2s ease; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .my-courses-collapse > summary .toggle-arrow { transition: none; } }
.my-courses-collapse[open] > summary .toggle-arrow { transform: rotate(90deg); }
.my-courses-collapse > .circle-grid { margin-top: 14px; }
.list-title-toggle { margin: 24px 0 0; }

.catalog-categories { display: flex; flex-direction: column; gap: 20px; margin-top: 16px; }
.catalog-section { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--cat); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); }
.catalog-section-header { display: flex; align-items: flex-start; gap: 14px; padding: 18px 16px; background: linear-gradient(var(--cat-soft), var(--surface)); border-bottom: 1px solid var(--line); }
.catalog-section-thumb { width: 48px; height: 48px; border-radius: 12px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--cat); color: #fff; font-weight: 600; font-size: 19px; }
.catalog-section-thumb img { width: 100%; height: 100%; object-fit: cover; }
.catalog-section-info { flex: 1; min-width: 0; }
.catalog-section-info h3 { margin: 0; font-size: 18px; font-weight: 600; }
.catalog-section-info h3 a { color: inherit; text-decoration: none; }
.catalog-section-info h3 a:hover { color: var(--cat-ink); }
.catalog-section-desc { margin: 4px 0 2px; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.catalog-section-info small { color: var(--muted); font-size: 13px; }
.catalog-section-link { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--cat-ink); text-decoration: none; padding: 8px 0; }
.catalog-section-link:hover { color: var(--cat); text-decoration: underline; }
.catalog-courses { list-style: none; margin: 0; padding: 12px; display: grid; grid-template-columns: 1fr; gap: 10px; background: none; }
.catalog-courses > li { min-width: 0; }
.catalog-course { display: flex; align-items: center; gap: 12px; height: 100%; padding: 12px 12px 12px 14px; background: var(--bg); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius-md); text-decoration: none; color: inherit; transition: border-color .15s, background .15s, transform .15s; }
.catalog-course:hover { background: var(--surface); border-color: var(--accent); transform: translateY(-1px); }
.catalog-course-thumb { width: 40px; height: 40px; border-radius: 10px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-size: 15px; font-weight: 600; }
.catalog-course-thumb img { width: 100%; height: 100%; object-fit: cover; }
.catalog-course-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.catalog-course-info strong { display: block; font-size: 14.5px; font-weight: 600; }
.catalog-course-desc { color: var(--muted); font-size: 12.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.catalog-course-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.catalog-course-meta .kind-chip { margin-bottom: 0; }
.catalog-course-meta small { font-size: 12px; }
.catalog-course-enter { flex-shrink: 0; color: var(--muted); display: inline-flex; align-items: center; transition: color .15s, transform .15s; }
.catalog-course:hover .catalog-course-enter { color: var(--accent); transform: translateX(2px); }
.catalog-subcategories { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.catalog-subcategories-label { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.catalog-subcategory { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--hover); border: 1px solid var(--line); border-radius: 20px; text-decoration: none; color: var(--ink); font-size: 13px; transition: background .15s, border-color .15s; }
.catalog-subcategory:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.catalog-subcategory small { color: var(--muted); font-size: 11px; }
@media (min-width: 600px) {
    .catalog-courses { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .catalog-courses { grid-template-columns: repeat(3, 1fr); }
}

/* ── Breadcrumb de cursos ──────────────────────────────────────────────── */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.breadcrumb a { color: var(--accent); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { color: var(--line); margin: 0 2px; }
.breadcrumb-current { color: var(--ink); font-weight: 500; }

/* ── Explorador de cursos (estanterías + búsqueda facetada) ────────────── */
/* Barra de búsqueda/orden: mobile-first, en fila a partir de 600px. */
.circles-filterbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin: 8px 0 16px; }
.circles-search { position: relative; flex: 1 1 220px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.circles-search:focus-within { border-color: var(--accent); }
.circles-search > svg { color: var(--muted); flex-shrink: 0; }
.circles-search input { flex: 1; min-width: 0; border: 0; background: none; padding: 11px 0; font: inherit; color: var(--ink); }
.circles-search input:focus { outline: none; }
.circles-filterbar select { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); padding: 0 12px; font: inherit; }
/* «Más filtros»: el orden adicional no ocupa sitio hasta que alguien lo pide. */
.circles-more { position: relative; }
.circles-more > summary { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font-size: 14px; cursor: pointer; list-style: none; }
.circles-more > summary::-webkit-details-marker { display: none; }
.circles-more > summary:hover { border-color: var(--accent); color: var(--accent); }
.circles-more[open] > summary { border-color: var(--accent); color: var(--accent); }
.circles-more .circles-sort { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); font-size: 13px; color: var(--muted); min-width: 190px; }
.circles-more .circles-sort select { width: 100%; }
/* Dropdown de sugerencias del buscador de Cursos (/api/circles). */
.cs-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); max-height: 340px; overflow-y: auto; padding: 4px; }
.cs-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); text-decoration: none; color: inherit; }
.cs-item:hover, .cs-item.active { background: var(--accent-soft); }
.cs-thumb { width: 40px; height: 40px; flex-shrink: 0; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.cs-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-info { display: flex; flex-direction: column; min-width: 0; }
.cs-info strong { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-info small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-empty { padding: 12px 10px; font-size: 13px; color: var(--muted); }
.cs-all { display: block; margin-top: 4px; padding: 9px 10px; border-top: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; }
.cs-all:hover { text-decoration: underline; }
/* ── Motor de descubrimiento unificado (.ex-*): el mismo dropdown en navbar + secciones. ──
   Mobile/tablet-first: los items son hileras táctiles de 44px+, la miniatura es un póster 1:1
   que se recorta con object-fit. Funciona dentro de .search-dropdown (maestro, agrupado) y de
   .ex-dropdown (sección, plano). `.cs-*` de arriba queda como alias retro-compatibles. */
.ex-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); max-height: min(70vh, 420px); overflow-y: auto; padding: 4px; }
.ex-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); text-decoration: none; color: inherit; min-height: 44px; }
.ex-item:hover, .ex-item.active { background: var(--accent-soft); }
.ex-thumb { width: 40px; height: 40px; flex-shrink: 0; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 16px; }
.ex-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ex-info { display: flex; flex-direction: column; min-width: 0; }
.ex-info strong { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-info small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-section { padding: 8px 10px 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ex-empty { padding: 14px 10px; font-size: 13px; color: var(--muted); text-align: center; }
.ex-all { display: block; margin-top: 4px; padding: 10px; border-top: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; text-align: center; }
.ex-all:hover { text-decoration: underline; }
/* El maestro de la navbar ya aporta fondo/padding a sus [role="option"]; el item .ex- gana para hilar la miniatura. */
.search-dropdown [role="option"].ex-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 0; }
/* Chips de categoría (filtra por categoría inmediata; ?cat= también arrastra subcategorías).
   Rail de una sola fila con scroll horizontal nativo: evita el muro de chips cuando hay muchas categorías. */
.circle-chips { display: flex; flex-wrap: nowrap; gap: 8px; margin: 0 0 22px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding: 2px 2px 8px; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent); }
.circle-chips::-webkit-scrollbar { display: none; }
.circle-chips .chip { flex: 0 0 auto; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); color: var(--ink); text-decoration: none; font-size: 13.5px; }
.chip small { color: var(--muted); font-size: 11.5px; }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip.is-active small { color: #ffffffcc; }
/* Estantería horizontal: rail con scroll-snap nativo (swipe en móvil, sin JS). */
.shelf { margin: 0 0 28px; }
.shelf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 2px 10px; }
.shelf-head h2 { font-size: 17px; font-weight: 650; margin: 0; }
.shelf-all { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; flex-shrink: 0; }
.shelf-all:hover { text-decoration: underline; }
.shelf-rail { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 2px 2px 12px; scrollbar-width: thin; }
.shelf-rail > .course-card { flex: 0 0 clamp(160px, 42vw, 210px); scroll-snap-align: start; }

/* ── Localización rápida por clasificación técnica (banda en páginas estilo Netflix) ── */
.quick-locate { margin: 6px 0 26px; padding: 14px 0 4px; border-top: 1px solid var(--line); }
.quick-locate-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 2px 12px; }
.quick-locate-head h2 { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 16px; }
.quick-locate-head h2 > svg { color: var(--warm); }
.quick-locate-row { display: grid; gap: 6px; margin: 0 0 12px; }
@media (min-width: 640px) { .quick-locate-row { grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 12px; } }
.quick-locate-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.quick-locate .chip-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }   /* la barra nativa fea queda oculta; con JS aparecen las flechas ‹ › (§76); sin JS sigue el swipe */
.quick-locate .chip-row::-webkit-scrollbar { display: none; }
/* Flechas §76 dentro de la propia fila de chips: alto contenido, no invaden la etiqueta de la faceta. */
.quick-locate .rail-host .rail-btn { height: 32px; }
.quick-locate .rail-btn.rail-inset-prev { left: 2px; }
.quick-locate .rail-btn.rail-inset-next { right: 2px; }
.mine-shelf .shelf-rail > .course-card { flex-basis: clamp(180px, 48vw, 230px); }
/* Tarjeta de curso (compartida por raíles y grilla de resultados). El contenedor .course-card se
   define una sola vez más abajo (portada 16:9); aquí viven las piezas del cuerpo. */
.course-poster { aspect-ratio: 4 / 3; width: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, var(--accent-soft), var(--surface)); color: var(--accent); font-weight: 700; font-size: 34px; overflow: hidden; }
.course-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.course-card-body { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; min-width: 0; flex: 1; }
.course-card-body strong { font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.course-card-body small { font-size: 12px; }
.course-card-desc { color: var(--muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Nivel/público (categoría raíz · materia) es dato de decisión; miembros/rutas quedan secundarios. */
.course-card-level { color: var(--accent); font-weight: 600; font-size: 11.5px; }
.course-card-extra { color: var(--muted); opacity: .75; font-size: 11px; }
/* Progreso REAL del alumno (autoevaluaciones cerradas) en la tarjeta del catálogo: barra fina, nunca un porcentaje inventado. */
.course-card-progress { display: flex; align-items: center; gap: 6px; color: var(--accent); font-size: 11.5px; font-weight: 600; }
.course-card-progress progress { flex: 1; height: 6px; accent-color: var(--accent); }
/* Barra de progreso personal en tarjetas de «Mi aprendizaje» y catálogo. */
.learning-bar { display: block; width: 100%; height: 6px; margin: 7px 0 3px; }
.learning-card.is-done .learning-bar > span { background: var(--warm); }
.course-enter { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--accent); font-size: 12.5px; font-weight: 600; }
/* Grilla de resultados (modo búsqueda/filtro). */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
@media (min-width: 700px) { .course-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
.circles-pagination { margin-top: 26px; gap: 10px; flex-wrap: wrap; justify-content: center; }
.circles-pagination .is-current { background: var(--accent); border-color: var(--accent); color: #fff; pointer-events: none; }
.per-page-note { text-align: center; color: var(--muted); font-size: 13px; margin-top: 10px; }
.per-page-note a { color: var(--accent); }
.shelf-hint { text-align: center; color: var(--muted); font-size: 13.5px; margin: 4px 0 0; }
.shelf-hint a { color: var(--accent); }

/* ── Catálogo «Cursos» reorganizado (2026-10-02): continuación de la portada. ──
   Encabezado compacto + UNA barra (buscador · Filtros · Ordenar) + DOS pestañas de ámbito.
   Reutiliza .level-card (fichas de nivel), .course-card (ficha única) y los tokens del tema. */
.circles-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; }
.circles-head h1 { margin: 0; font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.15; letter-spacing: -.01em; color: var(--ink); }
.circles-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 14px; }
.circles-bar .circles-search { flex: 1 1 240px; }
/* Botones-panel «Filtros» y «Ordenar»: mismos gestos (details/summary), plegados por defecto. */
.circles-filters, .circles-order { position: relative; }
/* Mismo guard que .filters-drawer: en Chrome el cuerpo de un <details> cerrado se maquila igual
   si tiene display propio; sin esta regla el panel de 132 categorías ocupaba sitio con el botón
   cerrado y aparecía un tercer buscador en el pliegue. */
.circles-filters:not([open]) > .circles-filters-panel, .circles-order:not([open]) > .circles-order-panel { display: none; }
.circles-filters > summary, .circles-order > summary { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font-size: 14px; cursor: pointer; list-style: none; user-select: none; }
.circles-filters > summary::-webkit-details-marker, .circles-order > summary::-webkit-details-marker { display: none; }
.circles-filters > summary:hover, .circles-order > summary:hover { border-color: var(--accent); color: var(--accent); }
.circles-filters[open] > summary, .circles-order[open] > summary { border-color: var(--accent); color: var(--accent); }
.circles-order > summary strong { font-weight: 700; }
.circles-filters-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: min(340px, 92vw); padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
/* Móvil: el botón no arranca en el borde de pantalla (padding del contenedor ~20px); con 92vw el
   panel se salía ~6px del column y provocaba mini-scroll horizontal al abrirlo. Se ancla ligeramente
   a la izquierda y se acota al viewport real. */
@media (max-width: 640px) {
    .circles-filters-panel { left: -12px; width: min(340px, calc(100vw - 28px)); }
}
.circles-catfind { width: 100%; box-sizing: border-box; padding: 9px 12px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; }
.circles-catfind:focus { outline: none; border-color: var(--accent); }
.circles-filters-hint { margin: 0 0 8px; line-height: 1.4; }
.circles-catlist { list-style: none; margin: 0; padding: 0; max-height: min(46vh, 360px); overflow-y: auto; overscroll-behavior: contain; }
.circles-catlink { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-size: 14px; min-height: 40px; }
.circles-catlink:hover { background: var(--accent-soft); color: var(--accent); }
.circles-catlink.is-active { background: var(--accent); color: var(--surface); }
.circles-catlink.is-root { font-weight: 650; border-bottom: 1px solid var(--line); border-radius: 0; margin-bottom: 4px; }
.circles-catlink small { color: var(--muted); font-size: 11.5px; flex-shrink: 0; }
.circles-catlink.is-active small { color: color-mix(in srgb, var(--surface) 80%, transparent); }
.circles-catlevel.depth-1 .circles-catlink { padding-left: 22px; }
.circles-catlevel.depth-2 .circles-catlink { padding-left: 34px; font-size: 13.5px; }
.circles-catlevel.depth-3 .circles-catlink { padding-left: 46px; font-size: 13px; }
.circles-order-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 190px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); display: flex; flex-direction: column; }
.circles-orderlink { padding: 9px 12px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-size: 14px; min-height: 40px; display: flex; align-items: center; }
.circles-orderlink:hover { background: var(--accent-soft); color: var(--accent); }
.circles-orderlink.is-active { color: var(--accent); font-weight: 700; }
/* DOS vistas de ámbito (pestañas segmentadas); el contador va discreto al lado del nombre. */
.circles-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; margin: 0 0 14px; }
.circles-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 999px; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600; transition: color .15s, background .15s; }
.circles-tab:hover { color: var(--ink); }
.circles-tab.is-active { background: var(--accent); color: var(--surface); }
.circles-tab small { font-size: 11.5px; opacity: .8; }
.circles-scope-note { margin: -4px 0 14px; }
/* Filtros activos como chips removibles + «Limpiar». */
.circles-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.circles-active .chip .x { font-weight: 700; }
.circles-clear { color: var(--accent); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.circles-clear:hover { text-decoration: underline; }
/* Total discreto junto al listado. */
.circles-total { margin: 0 2px 12px; font-size: 13px; }
/* Aterrizaje de «Más cursos»: hero de propuesta de valor + raíles curados sobre la cuadrícula.
   Mobile-first; solo tokens (--accent/--muted/--ink) => claro y oscuro sin reglas aparte. */
.circles-hero { margin: 4px 0 18px; }
.circles-hero .hero-kicker { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.circles-hero h2 { margin: 0 0 6px; font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.12; letter-spacing: -.01em; color: var(--ink); }
.circles-hero .lead { margin: 0; max-width: 60ch; color: var(--muted); font-size: clamp(.98rem, 2.2vw, 1.08rem); line-height: 1.5; }
.circles-rails { margin: 8px 0 6px; }
.circles-explore { margin: 8px 2px 12px; font-size: 16px; font-weight: 650; color: var(--ink); }
/* Grandes familias curadas («Más cursos»): puertas y subgrupos como TARJETAS-FOTO (portada real de
   una categoría miembro vía cover_pic, velo de legibilidad y rótulo blanco abajo, igual que .level-card);
   el icono SVG queda como insignia y como respaldo si la categoría no tiene imagen. Rejilla auto-fill
   mobile-first (1 col en estrecho). Solo tokens => claro/oscuro automático; transiciones de color/altura
   ya usadas por .level-card (prefers-reduced-motion las anula globalmente). */
.circles-families { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 12px; margin: 0 0 20px; }
.family-tile { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .15s, background .15s, box-shadow .15s, transform .15s; }
.family-tile:hover { border-color: var(--accent); background: var(--accent-soft); }
.family-tile.is-active { border-color: var(--accent); background: var(--accent-soft); }
.family-tile .family-body { display: flex; flex-direction: column; gap: 2px; }
.family-tile .family-ic { color: var(--accent); }
.family-tile strong { font-size: 15px; }
.family-tile small { color: var(--muted); font-size: 12.5px; }
.family-tile .family-blurb { color: var(--muted); font-size: 12.5px; }
.family-tile.family-all strong { color: var(--accent); }
/* Puerta de familia con portada-foto reutilizada (cover_id de familyCounts, la misma de la home):
   banda 16:9 a sangre arriba y cuerpo con padding debajo; el glifo SVG queda solo de respaldo. */
.family-tile-photo { padding: 0; gap: 0; overflow: hidden; }
.family-tile-photo .family-cover { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--accent-soft); border-bottom: 1px solid var(--line); }
.family-tile-photo .family-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.family-tile-photo .family-body { padding: 11px 14px 14px; }
.family-tile .family-go { margin-top: 4px; display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font-size: 12.5px; font-weight: 600; }
.family-subgroups { margin: 10px 0 18px; }
.family-head { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
.family-head .family-ic { color: var(--accent); }
/* Portada curada de la familia en la cabecera (la misma foto del tile «Explora» de la home): miniatura
   cuadrada redondeada junto al título; cae al glifo SVG si no hay portada servible. */
.family-head .family-cover--head { flex: 0 0 auto; width: 68px; height: 68px; border-radius: var(--radius-md, 12px); overflow: hidden; background: var(--accent-soft); border: 1px solid var(--line); }
.family-head .family-cover--head img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 720px) { .family-head .family-cover--head { width: 96px; height: 96px; } }
.family-head h2 { margin: 0; font-size: clamp(1.4rem, 3vw, 1.8rem); color: var(--ink); }
.family-blurb { display: none; }
@media (min-width: 640px) { .family-blurb { display: block; } }
/* ── Página de especialidad («Familia › Especialidad», 2026-10-03): los cursos de UNA rama del catálogo
      no-escolar ordenados por su SUB-ESPECIALIDAD (categoría padre inmediata) y NUMERADOS 1..N, en vez de
      la cuadrícula plana. Cada grupo abre con su número (insignia de acento) + nombre + cifras; sus fichas
      salen en una rejilla con un número de secuencia sobrepuesto. Reutilizado del viejo «programa de familia»:
      ahora con contexto de ruta. Mismo lenguaje visual (tokens → claro/oscuro) que el temario numerado. */
.fam-program { margin: 4px 0 8px; }
.fam-program-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 16px; font-weight: 700; color: var(--ink); }
.fam-program-title svg { color: var(--accent); }
.fam-program-count { font-weight: 600; }
.fam-program-count::before { content: "·"; margin: 0 2px 0 8px; color: var(--muted); }
.fam-group { padding: 4px 0 18px; border-top: 1px solid var(--line); }
.fam-group:first-of-type { border-top: 0; }
.fam-group-head { display: flex; align-items: flex-start; gap: 11px; margin: 16px 0 14px; }
.fam-group-num { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: #fff; font: 800 15px/1 var(--font-ui); box-shadow: var(--shadow-sm); }
.fam-group-txt { min-width: 0; }
.fam-group-name { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.fam-group-meta { margin: 2px 0 0; font-size: 12.5px; }
.fam-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 14px; }
.fam-course { position: relative; }
.fam-course .course-card { height: 100%; }
.fam-seq { position: absolute; top: 8px; left: 8px; z-index: 2; display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; background: var(--accent); color: #fff; font: 800 13px/1 var(--font-ui); box-shadow: var(--shadow-sm); pointer-events: none; }
@media (max-width: 480px) { .fam-courses { grid-template-columns: 1fr; } }
/* Ruta para volver del drill escolar (nivel → grado → materias). */
.circles-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13.5px; color: var(--muted); }
.circles-crumb a { color: var(--accent); text-decoration: none; }
.circles-crumb a:hover { text-decoration: underline; }
.circles-crumb strong { color: var(--ink); font-weight: 600; }
.circles-subhead { margin: 0 0 14px; }
.circles-subhead h2 { margin: 0 0 2px; font-size: 17px; font-weight: 650; }
.circles-subhead p { margin: 0; }
/* Paso de grado: mosaico de grados/semestres del nivel elegido. */
.grade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 12px; }
.grade-tile { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .15s, background .15s; }
.grade-tile:hover { border-color: var(--accent); background: var(--accent-soft); }
.grade-tile strong { font-size: 15px; }
.grade-tile small { color: var(--muted); font-size: 12.5px; }
.grade-go { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; color: var(--accent); font-size: 13px; font-weight: 600; }
/* Fichas de nivel dentro del catálogo: mismo componente de la portada, pero ocupando la columna
   completa (sin espacio muerto) y en UNA columna bajo 640px, donde tres columnas recortarían
   «Secundaria»/«Preparatoria». Doble clase: .level-grid (repeat 3) se define DESPUÉS en este hoja y
   ganaría por orden con igual especificidad. */
.level-grid.level-grid-full { max-width: none; }
@media (max-width: 640px) { .level-grid.level-grid-full { grid-template-columns: 1fr; } }
.circles-pag-gap { align-self: center; color: var(--muted); padding: 0 2px; }
/* Cuadrícula del catálogo: 4 columnas en escritorio ancho, 2 en tablet, 1 en móvil. Las reglas
   van DESPUÉS de .course-grid (auto-fill) y ganan por orden de cascada en cada rango. */
.circles-grid { grid-template-columns: 1fr; }
@media (min-width: 640px) { .circles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .circles-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* ── Valor percibido (2026-10-03): el catálogo comunica profundidad y vida con lo mínimo.
   cc-flag: UNA marca de novedad real por tarjeta, anclada a la esquina de la portada — corta y
   legible sobre foto o fallback, sin cambiar el tamaño ni la jerarquía de la ficha.
   circles-pulse: actividad real de la semana en una línea discreta con punto «vivo».
   family-stats: la dimensión de la familia como promesa del título, una línea de 13.5px.
   circles-also: salida natural al terminar una familia — lista de texto, no tarjetas. ── */
.cc-flag { position: absolute; top: 8px; left: 8px; z-index: 1; font-size: 10px; font-weight: 800; letter-spacing: .08em; line-height: 1; padding: 5px 9px; border-radius: 999px; }
.cc-flag.is-new { background: var(--accent); color: var(--surface); }
.cc-flag.is-upd { background: rgba(15, 22, 34, .62); color: #fff; backdrop-filter: blur(3px); }
.circles-pulse { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 13px; }
.circles-pulse .pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lumbre-success); flex: 0 0 auto; }
.family-stats { margin: 2px 0 3px; font-size: 13.5px; font-weight: 650; color: var(--ink); }
.circles-also { margin: 34px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.circles-also h2 { margin: 0 0 10px; font-size: 16px; font-weight: 650; color: var(--ink); }
.circles-also ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
.circles-also a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); text-decoration: none; font-size: 14px; transition: border-color .15s, background .15s; }
.circles-also a:hover { border-color: var(--accent); background: var(--accent-soft); }
.circles-also a > svg { margin-left: auto; color: var(--accent); flex: 0 0 auto; }
.circles-also small { color: var(--muted); font-size: 12px; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
    .shelf-rail { scroll-behavior: smooth; }
    .course-card, .chip { transition: border-color .15s, background .15s, color .15s; }
}

/* ── Motor de descubrimiento reutilizable (home + secciones): raíles y tarjetas .ex- y .media-.
   Mobile/tablet-first: raíl con scroll-snap de pulgar y pósters 4:3; en pantallas ≥700px las
   tarjetas ganan tamaño sin perder el desplazamiento horizontal. ─────────────────────── */
.ex-shelf { margin: 0 0 28px; }
.ex-shelf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 2px 10px; }
.ex-shelf-head h2 { font-size: 17px; font-weight: 650; margin: 0; }
.ex-shelf-all { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ex-shelf-rail { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 2px 2px 12px; scrollbar-width: thin; }
.ex-shelf-rail > .media-card { flex: 0 0 clamp(150px, 42vw, 210px); scroll-snap-align: start; }
.media-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; text-decoration: none; color: inherit; min-width: 0; }
.media-card:hover { border-color: var(--accent); }
.media-poster { position: relative; aspect-ratio: 4 / 3; width: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, var(--accent-soft), var(--surface)); color: var(--accent); font-weight: 700; font-size: 34px; overflow: hidden; }
.media-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-initial { line-height: 1; }
/* Portada automática (§15): cuando no hay imagen, el poster muestra patrón + iconografía del tipo
   + color por área del conocimiento (mates→azul/violeta, ciencias→verde, historia→ocre, tech→violeta). */
.media-cover-tone { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #FFFFFFd9; }
.media-cover-tone > svg { position: relative; z-index: 1; }
.media-cover-tone::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(#FFFFFF2e 1.5px, transparent 1.6px); background-size: 18px 18px; opacity: .55; }
.media-cover-name { position: absolute; left: 10px; right: 10px; bottom: 7px; font: 600 10px/1.35 var(--font-ui); letter-spacing: .02em; color: #FFFFFFb3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tone-default { background: linear-gradient(150deg, var(--lumbre-night), #2A3A5C); }
.tone-mate { background: linear-gradient(150deg, #24345F, var(--lumbre-discovery)); }
.tone-ciencias { background: linear-gradient(150deg, #0E5847, var(--lumbre-success)); }
.tone-historia { background: linear-gradient(150deg, #7E5320, #B98A42); }
.tone-tech { background: linear-gradient(150deg, #12172A, #46338F); }
.tone-lengua { background: linear-gradient(150deg, var(--lumbre-amber), #E88C1C); color: var(--lumbre-night); }
.tone-vida { background: linear-gradient(150deg, #FF8A5C, var(--lumbre-energy)); }
.media-card-body { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; min-width: 0; }
/* Corazón «me gusta» sobre la portada de cada tarjeta (todas las familias). Táctil: área ≥ 32px. */
.media-like { position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 3px 8px; border: 0; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font: inherit; font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer; backdrop-filter: blur(2px); }
.media-like svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 1.8; }
.media-like:hover { background: rgba(0,0,0,.72); }
.media-like.is-liked { background: var(--accent); }
.media-like.is-liked svg { fill: #fff; stroke: #fff; }
/* content-actions: corazón + recomendar en las fichas (mobile/tablet-first, envuelve en fila).
   Rediseño §cabecera OA: versión compacta — texto secundario, sin borde de pastilla gigante
   (reserva el peso visual para la fila de acciones Modos/Guía). */
.content-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0; }
.ca-like { display: inline-flex; align-items: center; gap: 6px; }
.ca-like-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; }
.ca-like-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.ca-like-btn:hover { border-color: transparent; color: var(--accent); background: var(--accent-soft); }
.ca-like.is-liked .ca-like-btn { border-color: transparent; color: var(--accent); background: var(--accent-soft); }
.ca-like.is-liked .ca-like-btn svg { fill: var(--accent); stroke: var(--accent); }
.ca-like-count { min-width: 16px; font-size: 12px; font-weight: 700; color: var(--muted); }
.ca-recommend { position: relative; }
.ca-recommend-summary, a.ca-recommend-summary { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; list-style: none; }
.ca-recommend-summary::-webkit-details-marker { display: none; }
.ca-recommend-summary:hover { border-color: transparent; color: var(--accent); background: var(--accent-soft); }
.ca-recommend-body { position: absolute; top: calc(100% + 6px); left: 0; z-index: 70; box-sizing: border-box; width: max(300px, min(420px, calc(100vw - 24px))); margin-top: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-md); }
@media (max-width: 560px) { .ca-recommend-body { position: static; width: auto; max-width: 100%; margin-top: 8px; box-shadow: none; } }
.ca-recommend-body label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.ca-recommend-body textarea { width: 100%; box-sizing: border-box; margin-top: 4px; font: inherit; font-size: 16px; }
.ca-recommend-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ca-recommend-note { margin-top: 8px; overflow-wrap: anywhere; }
.media-card-body strong { font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.media-card-body small { font-size: 12px; }
/* Grilla de resultados del explorador (mezcla de familias): igual lenguaje que la rail, en rejilla. */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
@media (min-width: 700px) { .media-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
/* Resultados unificados de /library: la clase explore-grid se usa también aquí, pero explore.css
   sólo se carga en /explore y fichas de objeto — sin respaldo global las tarjetas salían a ancho
   completo (1 por fila). Rejilla responsiva hasta 5 por fila en escritorio (decisión usuario 2026-09-30).
   Los media-grid propios de /explore usan explore.css; aquí se fija el número de columnas. */
.library-page .explore-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .library-page .explore-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .library-page .explore-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .library-page .explore-grid { grid-template-columns: repeat(5, 1fr); } }
@media (prefers-reduced-motion: no-preference) {
    .ex-shelf-rail { scroll-behavior: smooth; }
    .media-card { transition: border-color .15s, background .15s, color .15s; }
}
/* FILOSOFÍA DE SISTEMA (§76 del Plan Maestro) — todo desplazador horizontal (raíl) lleva botones
   laterales grandes ‹ › que avanzan un pantallazo (los inyecta app.js sobre .shelf-rail/.ex-shelf-rail):
   solo aparecen si el contenido desborda y se ocultan en cada extremo. El swipe nativo se conserva. */
.rail-host { position: relative; }
/* Con botones activos la barra nativa sobra (`.rail-host` sólo existe con JS: sin él la barra queda de respaldo).
   El reposo inicial del scroll-snap no es 0 exacto, por eso el JS trata ≤ 8 px como «extremo inicial». */
.rail-host .shelf-rail, .rail-host .ex-shelf-rail { scrollbar-width: none; }
.rail-host .shelf-rail::-webkit-scrollbar, .rail-host .ex-shelf-rail::-webkit-scrollbar { display: none; }
.rail-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 42px; height: 68px; display: none; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface) 94%, transparent); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-md); transition: opacity .15s, border-color .15s, color .15s; }
.rail-host.rail-scrollable .rail-btn { display: inline-flex; }
.rail-btn:hover { border-color: var(--accent); color: var(--accent); }
.rail-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rail-btn.rail-off { opacity: 0; pointer-events: none; }
.rail-prev { left: -16px; }
.rail-next { right: -16px; }
@media (max-width: 780px) {
    .rail-btn { width: 36px; height: 56px; }
    .rail-prev { left: 0; }
    .rail-next { right: 0; }
    .quick-locate .rail-host .rail-btn { width: 30px; height: 32px; }
}

/* §77 Escaparate — spotlight de /circles: las portadas IA rotan solas con el título del curso
   para captar la atención antes de bajar a las estanterías. Misma filosofía que §76: controles
   grandes que aparecen al pasar el ratón, swipe en móvil y rotación automática desactivada
   con prefers-reduced-motion. Fuente de datos: Circle::spotlight() (manifiesto del generador IA). */
.spotlight { position: relative; margin: 0 0 30px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-md); overflow: hidden; max-width: 100%; }
/* prefers-reduced-motion: el cambio manual de diapositiva es instantáneo, sin fundido. */
.spotlight.spot-instant .spot-slide { transition: none; }
.spot-stage { position: relative; aspect-ratio: 21 / 9; }
.spot-slide { position: absolute; inset: 0; display: block; opacity: 0; visibility: hidden; transition: opacity .7s ease; color: #fff; text-decoration: none; }
.spot-slide.is-on { opacity: 1; visibility: visible; z-index: 2; }
.spot-media { position: absolute; inset: 0; }
.spot-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spot-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9, 13, 26, .9) 0%, rgba(9, 13, 26, .62) 42%, rgba(9, 13, 26, .06) 78%); }
.spot-copy { position: absolute; z-index: 3; left: clamp(18px, 4vw, 46px); right: 34%; bottom: clamp(18px, 4vw, 42px); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.spot-eyebrow { margin: 0; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .72); }
.spot-title { font-size: clamp(22px, 3.2vw, 40px); line-height: 1.12; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.spot-desc { font-size: clamp(13px, 1.3vw, 16px); line-height: 1.45; color: rgba(255, 255, 255, .86); }
.spot-cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; font-weight: 700; font-size: 14px; color: #fff; }
.spot-cta svg { transition: transform .15s; }
.spot-slide:hover .spot-cta svg { transform: translateX(3px); }
.spot-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 44px; height: 72px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(255, 255, 255, .28); border-radius: 14px; background: rgba(9, 13, 26, .42); color: #fff; cursor: pointer; opacity: 0; transition: opacity .18s, background .18s, border-color .18s; }
.spotlight:hover .spot-btn, .spot-btn:focus-visible { opacity: 1; }
.spot-btn:hover { background: rgba(9, 13, 26, .66); border-color: rgba(255, 255, 255, .55); }
.spot-prev { left: 14px; }
.spot-next { right: 14px; }
.spot-foot { position: absolute; z-index: 6; right: clamp(14px, 3vw, 26px); bottom: clamp(14px, 3vw, 24px); display: flex; align-items: center; gap: 10px; }
.spot-dots { display: flex; gap: 7px; }
.spot-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .42); cursor: pointer; transition: transform .15s, background .15s; }
.spot-dot.is-on { background: #fff; transform: scale(1.25); }
.spot-pause { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: rgba(9, 13, 26, .42); color: #fff; cursor: pointer; }
.spotlight.is-paused .spot-pause svg { display: none; }
.spotlight.is-paused .spot-pause::after { content: "\25B6"; font-size: 9px; }
@media (max-width: 780px) {
    .spot-stage { aspect-ratio: 3 / 4; }
    .spot-slide::after { background: linear-gradient(0deg, rgba(9, 13, 26, .92) 26%, rgba(9, 13, 26, .28) 62%, rgba(9, 13, 26, .05) 100%); }
    .spot-copy { right: 18px; bottom: 64px; }
    .spot-btn { width: 38px; height: 60px; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .spot-slide { transition: none; } }

/* ── Home Lumbre: hero azul noche + buscador protagonista + estanterías del catálogo. ──
   Mobile-first: el buscador ocupa todo el ancho y el dropdown cuelga bajo él. */
.home-discovery { padding-bottom: var(--space-6, 40px); }
.home-hero { padding: 14px 0 4px; }
.hero-panel { position: relative; overflow: hidden; text-align: center; padding: clamp(22px, 3.4vw, 40px) clamp(18px, 4vw, 48px) clamp(20px, 3vw, 34px); border-radius: var(--radius-lg); background: var(--lumbre-night); color: #F4F1EA; box-shadow: var(--shadow-md); }
/* Resplandor sutil de chispa en la esquina: luz sin degradados excesivos (§13/§38). */
.hero-panel::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #FFB00022, #FFB00000 68%); pointer-events: none; }
.hero-kicker { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--lumbre-amber); }
.hero-kicker > svg { color: var(--lumbre-amber); }
/* Microinteracción de marca (§21): la chispa respira despacio; nada de animar todo lo demás. */
@media (prefers-reduced-motion: no-preference) {
    .hero-kicker > svg { animation: lumbre-spark 3.4s ease-in-out infinite; }
    @keyframes lumbre-spark { 0%, 100% { opacity: .72; transform: scale(1); } 50% { opacity: 1; transform: scale(1.13); } }
}
.home-hero h1 { color: #FFFFFF; font-size: clamp(1.7rem, 4.4vw, 2.6rem); line-height: 1.14; margin: 4px auto 10px; max-width: 24ch; }
.home-hero .lead { max-width: 640px; margin: 0 auto; color: #B9C2D6; font-size: clamp(1rem, 3.2vw, 1.12rem); }
/* El claim de marca: siempre presente, ámbar sobre noche. */
.hero-claim { margin: 18px 0 4px; font: 600 clamp(15px, 3.4vw, 19px)/1.5 var(--font-reading); color: var(--lumbre-amber); letter-spacing: .01em; }
.hero-claim > span { font-size: .9em; }
.hero-question { display: block; margin: 22px auto 10px; font-size: 15px; font-weight: 600; color: #FFFFFF; }
/* La píldora usa --surface (no #FFFFFF a pelo): en modo oscuro --ink es casi blanco y el
   texto escrito quedaba invisible sobre fondo blanco forzado. */
.home-search { position: relative; display: flex; align-items: center; gap: 10px; max-width: 620px; margin: 0 auto; padding: 0 16px; background: var(--surface); border: 1px solid transparent; border-radius: 999px; box-shadow: 0 2px 0 #FFB00055; }
.home-search:focus-within { border-color: var(--lumbre-amber); box-shadow: 0 0 0 4px #FFB00033; }
.home-search > svg { color: var(--muted); flex-shrink: 0; }
.home-search input { flex: 1 1 auto; width: auto !important; min-width: 0; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 15px 0 !important; font: inherit; font-size: 16px; color: var(--ink); -webkit-text-fill-color: var(--ink); caret-color: var(--ink); -webkit-appearance: none; appearance: none; }
/* Neutralizar la decoración nativa del campo de búsqueda (bezels y botón «x») que deforma la píldora. */
.home-search input::-webkit-search-decoration, .home-search input::-webkit-search-cancel-button, .home-search input::-webkit-search-results-button, .home-search input::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; display: none; }
.home-search input:focus { outline: none; }
.home-search input::placeholder { color: var(--muted); transition: opacity .5s; }
/* Botón «Buscar» dentro de la píldora: siempre visible, táctil ≥40px, y la píldora entera
   conserva margen inferior para que el teclado móvil no tape la acción al escribir. */
.home-search-go { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; min-height: 40px; min-width: 44px; padding: 8px 16px; border: 0; border-radius: 999px; background: var(--lumbre-amber); color: var(--lumbre-night); font: 600 14px/1 inherit; cursor: pointer; transition: background .15s, transform .05s; }
.home-search-go:hover { background: var(--lumbre-energy); }
.home-search-go:active { transform: scale(.97); }
.home-search-go:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.home-search-go svg { flex-shrink: 0; }
.home-search { margin-bottom: 8px; scroll-margin-bottom: 45vh; }
@media (max-width: 480px) {
    .home-search { padding: 0 10px; gap: 8px; }
    .home-search-go { padding: 8px 12px; font-size: 13px; }
}
.home-hero-actions { justify-content: center; margin-top: 20px; }
/* Botones sobre superficie nocturna: primario ámbar (AAA con texto noche), secundario contorno claro. */
.hero-panel .button { background: var(--lumbre-amber); color: var(--lumbre-night); border-color: transparent; font-weight: 600; }
.hero-panel .button:hover { background: var(--lumbre-energy); color: var(--lumbre-night); }
.hero-panel .button.ghost-light { background: transparent; color: #F4F1EA; border-color: #FFFFFF3d; }
.hero-panel .button.ghost-light:hover { background: #FFFFFF14; color: #FFFFFF; border-color: #FFFFFF66; }
.home-continue { margin-top: 8px; }
.home-block { margin-top: 30px; }
.home-shelves { margin-top: 34px; }
.home-rails { margin-top: 4px; }
/* DESCUBRE: pocas puertas grandes, no 40 chips (colores = tonos de la paleta, no feria). */
.discover-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.discover-tile { display: flex; flex-direction: column; gap: 4px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); transition: border-color .15s, transform .15s; }
.discover-tile:hover { transform: translateY(-2px); color: var(--ink); border-color: var(--accent); }
.discover-tile strong { font-size: 17px; }
.discover-tile span { font-size: 12px; color: var(--muted); }
.discover-tone-0 { border-top: 3px solid var(--lumbre-amber); }
.discover-tone-1 { border-top: 3px solid var(--lumbre-success); }
.discover-tone-2 { border-top: 3px solid var(--lumbre-discovery); }
.discover-tone-3 { border-top: 3px solid var(--lumbre-energy); }
.discover-tone-4 { border-top: 3px solid var(--lumbre-night); }
.discover-tone-5 { border-top: 3px solid var(--warm); }
/* CURSOS CON INSCRIPCIÓN ABIERTA: tarjetas de comunidad con botón Inscribirme (POST /circles/{slug}/join). */
.open-courses-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 14px; }
.open-course { display: grid; grid-template-columns: 84px 1fr; grid-template-areas: "thumb body" "thumb cta"; gap: 4px 14px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); transition: border-color .15s, transform .15s; }
.open-course:hover { border-color: var(--accent); transform: translateY(-2px); }
.open-course-thumb { grid-area: thumb; align-self: start; display: block; width: 84px; aspect-ratio: 3/4; border-radius: 10px; overflow: hidden; background: var(--accent-soft); }
.open-course-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.open-course-thumb .generated-cover { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 6px; text-align: center; font-size: 12px; line-height: 1.2; color: var(--ink); }
.open-course-body { grid-area: body; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.open-course-body h3 { font-size: 16px; margin: 0; }
.open-course-body h3 a { color: var(--ink); }
.open-course-meta { margin-top: 2px; }
.open-course-cta { grid-area: cta; align-self: end; }
.open-course-cta form { margin: 0; }
/* APRENDE DE DIFERENTES FORMAS: seis superficies reales, un solo sistema de iconos. */
.ways-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 12px; }
.way { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ico name" "ico desc"; gap: 1px 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); transition: border-color .15s, background .15s; }
.way:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.way-ico { grid-area: ico; align-self: start; margin-top: 2px; display: inline-flex; color: var(--accent); }
.way:hover .way-ico { background: none; }
.way strong { grid-area: name; font-size: 15px; }
.way small { grid-area: desc; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
/* Marca secundaria «✦ OA» (§16): el identificador visual de los objetos de aprendizaje. */
.oa-mark { color: var(--warm); font-style: normal; }
@media (prefers-reduced-motion: no-preference) {
    .discover-tile, .way { transition: border-color .15s, background .15s, transform .15s; }
}

/* ── /estudiar y /temas: el mismo sistema de puertas (.way) con fila extra para la acción. ──
   Tarjetas de grado/tema llevan un enlace-pie («Elegir →», contador) debajo de la descripción:
   se añade un área "go" a la rejilla para que no salte a la columna del icono. */
.estudiar-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 13.5px; }
.estudiar-crumb a { color: var(--accent); font-weight: 600; }
.estudiar-crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.estudiar-crumb span { color: var(--muted); }
.estudiar-crumb strong { color: var(--ink); font-weight: 650; }
.estudiar-grid .way { grid-template-areas: "ico name" "ico desc" "ico go"; }
.way-go, .estudiar-count, .temas-count { grid-area: go; justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 650; color: var(--accent); }
.way small + .way-go, .way small + .estudiar-count, .way small + .temas-count { margin-top: 0; }
.estudiar-count, .temas-count { font-size: 12px; font-weight: 600; color: var(--muted); }
.estudiar-year { margin: 22px 0 10px; font-size: 15px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.estudiar-advanced { margin-top: 18px; font-size: 13.5px; color: var(--muted); }
.estudiar-advanced > span { margin: 0 8px; color: var(--line); }
/* ── /lecturas: listado de fichas de lectura corta y larga. Reutiliza el lenguaje de .way y los
   tonos de portada; la diferencia es la miniatura + la procedencia (origen) siempre visible. ── */
.lect-list { display: grid; gap: 12px; }
.lect-card { display: grid; grid-template-columns: 84px 1fr; gap: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); transition: border-color .15s, background .15s; }
.lect-card:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.lect-thumb { width: 84px; height: 112px; border-radius: 10px; object-fit: cover; background: var(--surface-2, var(--surface)); }
.lect-thumb-gen { display: inline-flex; align-items: center; justify-content: center; color: var(--accent); background: var(--accent-soft); }
.lect-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lect-body h3 { margin: 0; font-size: 16px; line-height: 1.3; }
.lect-author { margin: 0; font-size: 13px; color: var(--muted); }
.lect-origin { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.lect-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 650; background: var(--accent-soft); color: var(--accent); }
.lect-badge-dominio { background: #e7f5ec; color: #1f7a44; }
.lect-badge-sintesis { background: #eef2ff; color: #3552c9; }
.lect-badge-fuente { background: #fbf1e3; color: #9a5b12; }
.lect-badge-lumbre { background: var(--accent-soft); color: var(--accent); }
.lect-origin-text { line-height: 1.45; }
.lect-meta { margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 12.5px; color: var(--muted); }
/* Pista «Leer →» de la ficha: la tarjeta entera ya es el enlace, así que es un span (un <a> anidado
   dentro del <a> de la tarjeta invalida el HTML y el navegador cierra la ficha antes, rompiendo el grid). */
.lect-go { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: var(--accent); font-size: 13px; font-weight: 600; }
.lect-card:hover .lect-go { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 520px) { .lect-card { grid-template-columns: 64px 1fr; gap: 12px; } .lect-thumb, .lect-thumb-gen { width: 64px; height: 86px; } }
/* Panel de origen siempre visible en la ficha del libro (/book/{slug}). */
.book-origin { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-md); background: var(--surface); }
.book-origin-head { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.book-origin-head strong { color: var(--ink); font-weight: 700; }
.book-origin-badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; background: var(--accent-soft); color: var(--accent); }
.book-origin-dominio { background: #e7f5ec; color: #1f7a44; }
.book-origin-sintesis { background: #eef2ff; color: #3552c9; }
.book-origin-fuente { background: #fbf1e3; color: #9a5b12; }
.book-origin-text { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink); }
.book-origin-author { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
/* Portadas numéricas de /estudiar (2026-10-01): cada grado muestra un mosaico con su número
   como gráfica de portada, en lugar de ficha de sólo texto. Los tonos reutilizan .cover-tone-*
   (§4: superficies grandes con texto claro, válido en claro y oscuro). El numeral es decorativo
   (aria-hidden en la vista): el nombre real del grado lo da el <strong> de la ficha. */
.way .grade-tile-num { position: relative; width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-top: 1px; box-shadow: inset 0 1px 0 #ffffff26, 0 3px 10px -4px #0b0e1473; color: #fff; overflow: hidden; }
/* Scrim bajo el número: los tonos claros de la paleta (ámbar, energía) no alcanzan 3:1 con
   blanco directo sobre el degradado; el velo oscuro central garantiza contraste en todos. */
.way .grade-tile-num::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 46% 52%, #140a0059, #140a0000 72%); }
.grade-tile-num .grade-num { position: relative; font-style: normal; font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: -.03em; text-shadow: 0 1px 2px #0000008c, 0 0 7px #00000059; }
.grade-tile-num .grade-num-dot { position: relative; align-self: stretch; margin: 0; font-style: normal; font-weight: 800; font-size: 15px; line-height: 26px; text-shadow: 0 1px 2px #0000008c; opacity: .9; }
.estudiar-grid .way { grid-template-columns: auto 1fr; }
.way.estudiar-ico, .way .estudiar-ico { width: 46px; height: 46px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; color: #fff; box-shadow: inset 0 1px 0 #ffffff26; }
/* Materias del grado: rejilla base de .way (ico · name · desc · go) para que la loseta
numerada quede a la izquierda, como en los grados. Sin override de display. */
.estudiar-route { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 13.5px; font-weight: 600; color: var(--accent); }
.estudiar-route:hover { text-decoration: underline; text-underline-offset: 3px; }
.estudiar-course-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
/* /temas: buscador con la píldora del hero pero adaptado a fondo claro, y chips de etapa. */
.temas-search { margin: 0 0 20px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); max-width: 100%; }
.temas-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.temas-grid { margin-bottom: 8px; }
.temas-stage-chips { margin: 4px 0 18px; }

/* ── Home Lumbre · cuatro bloques (tu siguiente paso · encuentra · descubre · explorar) ── */
.hero-compact .home-hero-actions { margin-top: 14px; }
.hero-compact .lead { font-size: clamp(.98rem, 2.6vw, 1.06rem); }
.hero-login { color: #B9C2D6; }
.hero-login:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; }
.home-step { margin-top: var(--space-6, 32px); }
.home-step .home-greeting { margin-bottom: 14px; }
.home-step-lead { max-width: 62ch; margin: 0 0 6px; color: var(--muted); font-size: 15px; }
.continue-cta-big { padding: 15px 24px; font-size: 15px; font-weight: 650; }
.home-subhome { margin-top: var(--space-6, 30px); }
.home-subhome .section-heading { margin-bottom: 14px; }
.find-heading { margin-bottom: 16px; }
.home-find .home-search { margin: 0 0 18px; }
.home-find .home-search input { background: var(--surface); }
.home-find .ways-grid { margin-top: 4px; }
.section-lede { max-width: 62ch; margin: -14px 0 18px; color: var(--muted); font-size: 15px; }
.home-suggest .home-rails { margin-top: 0; }
.home-explore { margin-top: var(--space-7, 44px); }
.home-roles { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: var(--space-6, 32px); padding-top: 18px; border-top: 1px solid var(--line); }
.home-roles-label { font-size: 13px; font-weight: 700; color: var(--muted); margin-right: 4px; }
/* El buscador protagonista sobre superficie clara (bloque 2): conserva la forma de píldora del hero.
   Aquí no hay panel nocturno, así que el borde y la sombra se dibujan a mano. */
.home-find .home-search { border: 1px solid var(--line); box-shadow: var(--shadow-sm); background: var(--surface); max-width: 100%; }
.home-find .home-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }

/* ── Home · masthead «abre la enciclopedia» (anónimo): papel claro editorial, todo con tokens => se adapta solo al cambiar de tema. ── */
.hero-masthead { background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-md); padding: clamp(30px, 5vw, 58px) clamp(18px, 4vw, 48px) clamp(26px, 4vw, 44px); }
.hero-masthead::before { display: none; }
.hero-masthead .hero-kicker, .hero-masthead .hero-kicker > svg { color: var(--warm); }
.hero-masthead h1 { color: var(--ink); margin-bottom: 12px; }
.hero-masthead .lead { color: var(--muted); margin-bottom: 26px; }
/* Sello de la píldora del hero: --surface sigue al tema (marfil/blanco claro, noche en oscuro). */
.hero-panel .home-search { color: var(--ink); }
.hero-panel .home-search > svg { color: var(--muted); }
.hero-masthead .home-search { margin: 0 auto; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.hero-masthead .home-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.hero-masthead .hero-login { color: var(--muted); }
.hero-masthead .hero-login:hover { color: var(--accent); }
/* Temas de ejemplo: una línea quieta, sin cajas, para lanzar la curiosidad. */
.quick-topics { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; margin: 16px auto 0; font-size: 13px; color: var(--muted); }
.quick-topics a { color: var(--accent); font-weight: 500; }
.quick-topics a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
.quick-topics i { color: var(--line); font-style: normal; }
/* Tres accesos como enlaces ligeros con icono, no tarjetas-caja (la marca de «dashboard» desaparece). */
.masthead-ways { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 26px; margin: 26px auto 0; }
.masthead-ways a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 15px; font-weight: 600; padding: 4px 2px; }
.masthead-ways a > svg { color: var(--accent); }
.masthead-ways a:hover { color: var(--accent); }
/* Explorar todo: tira tranquila de píldoras de texto, peso visual bajo para no competir con arriba. */
.explore-strip { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.explore-link { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; transition: border-color .15s, background .15s; }
.explore-link > svg { color: var(--accent); }
.explore-link:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }

/* ── Portada centrada en cursos (Fase 2): «Aprendizaje escolar» y «Cursos» ──────────────
   Tarjetas familiares de plataforma de cursos con la identidad de Lumbre (misma paleta,
   sin sombras estridentes). Una cuadrícula por bloque; en móvil colapsan a una columna. */
.home-school-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.school-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.school-card-ico { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.school-card > strong { font-size: 19px; }
.school-card > small { line-height: 1.45; color: var(--muted); }
.school-card-grades { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.school-card-grades a { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font-size: 13px; font-weight: 600; transition: border-color .15s, background .15s; }
.school-card-grades a:hover { border-color: var(--accent); background: var(--accent-soft); }
.school-card-all { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: 14px; font-weight: 700; }
@media (max-width: 900px) { .home-school-grid { grid-template-columns: 1fr; } }

.course-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; color: var(--ink); text-decoration: none; min-width: 0; transition: border-color .15s, transform .15s, box-shadow .15s; }
.course-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.course-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.course-cover { display: block; position: relative; aspect-ratio: 16 / 9; background: var(--bg); overflow: hidden; }
.course-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.course-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin-top: 4px; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
/* Una sola línea de contexto en texto plano (nivel · lecciones · disponibilidad), no una pila de badges.
   Los elementos se separan con un punto medio; «Gratis» se pinta en color de acento, sin pastilla. */
.course-meta em { font-style: normal; font-weight: 500; }
.course-meta em + em::before { content: "·"; margin-right: 6px; color: var(--line); }
.course-meta em.free { color: var(--accent); font-weight: 600; }

/* ── Mi escritorio ──────────────────────────────────────────────────── */
.desk-page { max-width: 860px; }
.desk-header { margin-bottom: var(--space-5); }
.desk-header h1 { font-size: 1.6rem; font-weight: 600; margin: 0 0 4px; }
.desk-header p { margin: 0; }
.desk-stats { display: flex; gap: var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-6); padding: 16px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.desk-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 80px; }
.desk-stat-value { font-size: 1.4rem; font-weight: 700; color: var(--accent); }
.desk-stat-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.desk-section { margin-bottom: var(--space-6); }
.desk-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--space-4); }
.desk-section-head h2 { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; font-weight: 600; margin: 0; }
.desk-subtitle { font-size: .85rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin: var(--space-4) 0 var(--space-2); }
/* Retomar lectura — grid de libros */
.desk-reading-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.desk-book { display: flex; gap: 12px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; color: inherit; transition: border-color .15s; }
.desk-book:hover { border-color: var(--accent); }
.desk-book-cover { width: 48px; height: 64px; flex-shrink: 0; border-radius: 6px; overflow: hidden; }
.desk-book-cover img { width: 100%; height: 100%; object-fit: cover; }
.desk-book-cover .generated-cover { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 11px; }
.desk-book-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.desk-book-info strong { font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.desk-book-info small { font-size: 12px; }
.desk-progress-bar { display: block; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; margin-top: 4px; }
.desk-progress-bar span { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width .3s; }
/* Mis cursos — grid */
.desk-courses-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.desk-course { display: flex; gap: 12px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; color: inherit; transition: border-color .15s; }
.desk-course:hover { border-color: var(--accent); }
.desk-course-thumb { width: 40px; height: 40px; flex-shrink: 0; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); font-size: 16px; font-weight: 600; color: var(--accent); }
.desk-course-thumb img { width: 100%; height: 100%; object-fit: cover; }
.desk-course-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.desk-course-info strong { font-size: 14px; }
.desk-course-info small { font-size: 12px; }
/* Objetos de aprendizaje — lista */
.desk-lo-list { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.desk-lo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--surface); text-decoration: none; color: inherit; transition: background .15s; }
.desk-lo:hover { background: var(--hover); }
.desk-lo-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.desk-lo-info strong { font-size: 14px; }
.desk-lo-info small { font-size: 12px; }
.desk-lo-stats { display: flex; gap: 12px; flex-shrink: 0; align-items: center; }
/* Notas y citas */
.desk-notes { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.desk-note { display: block; padding: 12px 16px; background: var(--surface); text-decoration: none; color: inherit; transition: background .15s; }
.desk-note:hover { background: var(--hover); }
.desk-note-quote { font-size: 13px; font-style: italic; color: var(--ink); margin: 0 0 4px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.desk-note-body { font-size: 13px; margin: 0 0 4px; color: var(--muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.desk-note small { font-size: 12px; }
/* Empty state */
.desk-page .empty-state { text-align: center; padding: var(--space-7) var(--space-5); }
.desk-page .empty-state h2 { margin-top: var(--space-4); }
.desk-page .empty-state .actions { display: flex; gap: 12px; justify-content: center; margin-top: var(--space-5); }
@media (max-width: 599px) {
    .desk-stats { gap: var(--space-3); padding: 12px 16px; }
    .desk-stat-value { font-size: 1.1rem; }
    .desk-reading-grid { grid-template-columns: 1fr; }
    .desk-courses-grid { grid-template-columns: 1fr; }
}

/* ── Inscripción directa de usuarios (admin) ──────────────────────────── */
.enroll-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.enroll-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--surface); }
.enroll-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.enroll-info strong { font-size: 14px; }
.enroll-info small { font-size: 12px; }

/* ── Objetos de aprendizaje inline en rutas del curso ─────────────────── */
/* La ficha del OA lleva PORTADA vertical (póster 3:4), no un glifo: el slot fue 40×28 «de icono»
   y aplastaba/recortaba la portada hasta hacerla irreconocible (queja 2026-10-02 en
   /circles/{curso}). Ahora es miniatura-póster real de 64×85 con el fallback a juego. */
.route-objects { display: flex; flex-direction: column; gap: 1px; margin: 12px 0; background: var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.route-object { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--bg); text-decoration: none; color: inherit; transition: background .15s; }
.route-object:hover { background: var(--accent-soft); }
.route-obj-icon { flex-shrink: 0; color: var(--accent); display: flex; align-items: center; justify-content: center; width: 64px; height: 85px; border-radius: 8px; background: var(--accent-soft); overflow: hidden; }
.route-obj-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.route-obj-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.route-obj-info strong { font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.route-obj-info small { font-size: 11.5px; }
@media (max-width: 520px) { .route-obj-icon { width: 52px; height: 70px; } }

/* ── Visor ligero de la API (/api/docs) ─────────────────────────────────── */
.apidocs-page .apidocs-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.apidocs-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0; }
.apidocs-toolbar .search-input-wrap { flex: 1 1 240px; }
.apidocs { display: flex; flex-direction: column; gap: 14px; }
.apidocs-info .quiet-note { margin: 4px 0; }
.apidocs-tag-h { font-size: 1.05rem; margin: 0 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.apidocs-op { border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 6px 0; background: var(--surface); }
.apidocs-op > summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; }
.apidocs-op > summary::-webkit-details-marker { display: none; }
.apidocs-op[open] > summary { border-bottom: 1px solid var(--line); }
.apidocs-method { font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; color: #fff; background: var(--muted); flex-shrink: 0; min-width: 52px; text-align: center; }
.apidocs-method--get { background: var(--ok); }
.apidocs-method--post { background: var(--accent, #4f7a3a); }
.apidocs-method--put { background: var(--warn); }
.apidocs-method--delete { background: var(--danger); }
.apidocs-path { font-size: 13px; word-break: break-all; }
.apidocs-flag { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; flex-shrink: 0; }
.apidocs-op-body { padding: 10px 12px; }
.apidocs-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 12px 0 4px; }
.apidocs-params li, .apidocs-props li { margin: 3px 0; font-size: 13px; }
.apidocs-req { color: var(--danger); font-weight: 700; }
.apidocs-type { color: var(--muted); }
.apidocs-schema { margin: 4px 0 4px 4px; padding-left: 10px; border-left: 2px solid var(--line); }
.apidocs-schema-ref code, .apidocs-enum code { font-size: 12px; }
.apidocs-schema-desc { margin: 2px 0; }
.apidocs-nested > summary { cursor: pointer; font-size: 12px; color: var(--accent, #4f7a3a); }
.apidocs-enum { margin: 4px 0; font-size: 12px; color: var(--muted); }
.apidocs-block-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.apidocs-block-chip { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); text-decoration: none; color: var(--ink); font-family: var(--mono, monospace); font-size: 13px; min-width: 150px; flex: 0 1 auto; transition: background .15s, border-color .15s; }
.apidocs-block-chip:hover { background: var(--accent-soft); border-color: var(--accent, #4f7a3a); }
.apidocs-block-label { font-family: inherit; font-size: 11px; color: var(--muted); }

/* ── Banner de previsualización / borrador en la ficha del objeto ────────── */
.lo-preview-banner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0; padding: 10px 14px; background: var(--warn-soft); border: 1px solid var(--warn); border-radius: var(--radius-sm); color: var(--ink); font-size: 13px; }
.lo-preview-banner code { font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
    .apidocs-block-chip, .apidocs-op > summary { transition: none; }
}

/* ── DESCUBRIMIENTOS LUMBRE (V1): vitrina, cromo generado, colecciones y aviso de conquista. ──
   La cara del cromo es datos, no arte: emoji de la materia sobre su paleta (--disc via style).
   El acabado por Tier (§6) es discreto: el marco crece con el romano, nunca esconde valor. */
.disc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-top: 12px; }
.disc-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 14px 14px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(165deg, color-mix(in srgb, var(--disc) 16%, var(--surface)), var(--surface) 62%); box-shadow: 0 1px 2px rgb(27 36 56 / 6%); text-align: center; }
.disc-card.mastered { border-color: color-mix(in srgb, var(--disc) 55%, var(--line)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--disc) 22%, transparent), 0 4px 14px rgb(27 36 56 / 10%); }
.disc-vitrine .disc-card { background: linear-gradient(165deg, color-mix(in srgb, var(--disc) 26%, var(--surface)), var(--surface) 70%); }
.disc-emoji { font-size: 46px; line-height: 1; filter: drop-shadow(0 3px 6px rgb(27 36 56 / 25%)); }
.disc-title { font-size: 14px; line-height: 1.25; color: var(--ink); }
.disc-meta { font-size: 11.5px; color: var(--muted); }
.disc-src { font-size: 11.5px; color: var(--accent); text-decoration: none; }
.disc-src:hover { text-decoration: underline; }
.disc-tier { position: absolute; top: 8px; right: 8px; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 7px; background: var(--surface); }
.disc-card .disc-pin { margin-top: auto; width: 100%; }
.disc-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; }
.disc-chip { font-size: 12.5px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); text-decoration: none; background: var(--surface); }
.disc-chip:hover { color: var(--ink); border-color: var(--muted); }
.disc-chip.on { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.disc-collections { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 10px; }
.disc-collection { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); text-decoration: none; color: var(--ink); }
.disc-collection:hover { border-color: var(--muted); }
.disc-collection.complete { border-color: var(--warm); }
.disc-collection strong { font-size: 13.5px; }
.disc-progress { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.disc-progress > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.disc-empty { padding: 22px; text-align: center; }
/* Aviso de conquista: aparece sobre todo (el estudiante acaba de lograr algo). Cierre por ×, clic o 9 s. */
.discovery-pop { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; gap: 12px; align-items: center; max-width: min(360px, calc(100vw - 36px)); padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--disc) 55%, var(--line)); border-radius: 16px; background: linear-gradient(150deg, color-mix(in srgb, var(--disc) 22%, var(--surface)), var(--surface) 65%); box-shadow: 0 12px 34px rgb(27 36 56 / 28%); animation: disc-pop .28s ease-out; }
.discovery-emoji { font-size: 40px; line-height: 1; }
.discovery-body { display: flex; flex-direction: column; gap: 3px; }
.discovery-head { color: var(--ink); font-size: 13px; }
.discovery-title { color: var(--muted); font-size: 12.5px; }
.discovery-link { color: var(--accent); font-size: 12.5px; }
.discovery-close { position: absolute; top: 6px; right: 8px; border: 0; background: none; color: var(--muted); font-size: 16px; cursor: pointer; line-height: 1; }
@keyframes disc-pop { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .discovery-pop { animation: none; }
}

/* CAPA ACADÉMICA: banda de contexto en la ficha del OA cuando se abre desde /a/{id} (§8/§19). */
.lo-assignment-band { margin: 12px 0 4px; padding: 10px 14px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; background: var(--accent-soft); color: var(--ink); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.lo-assignment-band p { margin: 4px 0 0; flex: 1 1 100%; }

/* CAPA DE APOYOS (§12/§18/§27): banda de contexto del apoyo (prerrequisitos + volver), rejilla
   «¿Necesitas ayuda?» en la ficha curricular y CTA de retorno al terminar el apoyo. Mismo lenguaje
   visual que .lo-assignment-band; rejilla auto-fill con fallback móvil de dos columnas. */
.lo-apoyo-band { margin: 12px 0 4px; padding: 10px 14px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; background: var(--surface); color: var(--ink); display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.lo-apoyo-prereq { margin: 0; font-size: 14px; }
.lo-apoyo-back.chip { white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 13px; }
.lo-ayuda { margin: 26px 0; padding: 18px; border: 1px dashed var(--accent); border-radius: 14px; background: var(--accent-soft); }
.lo-ayuda .ay-head h2 { margin: 2px 0 4px; font-size: 20px; }
.ay-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 12px; }
.ay-card { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: inherit; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; }
.ay-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .08); color: inherit; }
.ay-card .ay-tipo { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.ay-card .ay-title { font-size: 15px; line-height: 1.3; }
.ay-done { margin: 22px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.ay-done p { margin: 0; }
@media (max-width: 560px) { .ay-grid { grid-template-columns: 1fr 1fr; } .lo-apoyo-band { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .ay-card:hover { transform: none; } }

/* ============================================================================
   MARCA DE LA ESCUELA ANFITRIONA (white label, /admin/branding). Todo es
   aditivo: sin escuela activa ningún selector de abajo se aplica (el layout
   pinta la marca Lumbre de siempre). Se reutilizan los tokens canónicos; el
   acento se re-tiñe sólo redefiniendo --accent* en :root (nunca texto libre),
   por eso aquí NO se concatena --accent con sufijo alpha (debe quedar literal).
   ========================================================================== */

/* Cabecera: logo + nombre + subtítulo «con Lumbre» apilados, misma altura que antes. */
.brand-school { align-items: center; }
.brand-logo { width: 30px; height: 30px; flex: 0 0 auto; object-fit: contain; border-radius: 7px; display: block; }
.brand-logo-foot { width: 44px; height: 44px; border-radius: 9px; }
.org-hero-logo { width: 56px; height: 56px; border-radius: 10px; margin-bottom: 12px; }
.brand-logo-inline { border-radius: 6px; background: var(--bg); vertical-align: middle; }
.brand-cover-inline { display: block; margin-top: 8px; border-radius: 8px; max-width: 160px; height: auto; }
.brand-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.05; min-width: 0; }
.brand-sub { font: 500 10.5px/1.1 var(--font-ui); letter-spacing: .01em; color: var(--muted); }

/* Conmutador de escuela (solo alumnos de 2+ escuelas con marca): hereda .nav-more. */
.brand-switch-form { margin: 0; }
.brand-switch .text-link { justify-content: flex-start; width: 100%; text-align: left; padding: 8px 10px; border-radius: var(--radius-sm); }
.brand-switch .text-link.is-active { font-weight: 700; color: var(--ink); }

/* Pie: datos de contacto de la escuela bajo la firma. */
.school-contact { flex: 1 1 100%; font-size: 11.5px; color: var(--muted); }
.school-contact a { color: var(--ink); text-decoration: none; }
.school-contact a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Página /contact: tarjeta con correo, teléfonos, dirección y horario de la escuela. */
.school-contact-card { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-md); padding: 18px 22px; margin-bottom: 26px; }
.school-contact-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.school-contact-card li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); flex-wrap: wrap; }
.school-contact-card svg { color: var(--accent); flex: 0 0 auto; }
.school-contact-card a { color: var(--accent); text-decoration: none; }
.school-contact-card a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Captcha propio (imagen GD servida por /captcha). */
.captcha-field { margin-bottom: 18px; }
.captcha-row { display: inline-flex; margin-top: 6px; }
.captcha-img { display: block; width: 150px; height: 46px; border: 1px solid var(--line); border-radius: 6px; background: var(--lumbre-ivory); }

/* Sugerencias de la comunidad (/sugerencias, /admin/sugerencias). */
.sug-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sug-table th, .sug-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--line); }
.sug-badge { display: inline-block; padding: 2px 9px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.sug-badge--pendiente { background: var(--warn-bg, #fff3cd); color: var(--warn-fg, #856404); }
.sug-badge--respondida { background: var(--info-bg, #cce5ff); color: var(--info-fg, #004085); }
.sug-badge--implementada { background: var(--ok-bg, #d4edda); color: var(--ok-fg, #155724); }
.sug-badge--descartada { background: var(--danger-bg, #f8d7da); color: var(--danger-fg, #721c24); }
.sug-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.sug-chip { padding: 5px 14px; border-radius: 18px; font-size: 13px; text-decoration: none; color: var(--ink); border: 1px solid var(--line); background: var(--surface); }
.sug-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.sug-details summary { cursor: pointer; }
.sug-reply-form { margin-top: 10px; display: grid; gap: 10px; max-width: 520px; }
.sug-full { white-space: pre-wrap; font-size: 14px; line-height: 1.5; }

/* Panel /admin/branding: filas de dos columnas (una en móvil), checks con aviso, preview.
   ESCOPETADO bajo .branding-form: .form-row y .check-field ya tenían definición global
   (líneas ~936/~1056) que usan /organizations, /collections y /grupos; redefinirlas
   aquí a secas descuadraba esos formularios en todo el portal. */
.branding-form .form-row { display: grid; grid-template-columns: 1fr; gap: 0 20px; }
@media (min-width: 640px) { .branding-form .form-row { grid-template-columns: 1fr 1fr; } }
.branding-form .check-field { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 9px; margin-bottom: 16px; padding: 0; border: 0; background: none; border-radius: 0; font-weight: 550; }
.branding-form .check-field > input[type="checkbox"] { width: auto; margin: 3px 0 0; flex: 0 0 auto; accent-color: var(--accent); }
.branding-form .check-field small { flex: 1 1 100%; padding-left: 24px; margin: 0; font-weight: 400; color: var(--muted); font-size: 11.5px; }
.branding-form h3 { font-size: 18px; margin: 26px 0 12px; }

/* Vista previa «así se ve ahora»: simula la cabecera teñida con el acento de la escuela. */
.brand-preview { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow); padding: 20px 22px; margin: 8px 0 26px; }
.brand-preview-bar { display: flex; align-items: center; gap: 10px; }
.brand-preview-claim { color: var(--muted); font-size: 13px; margin: 12px 0 14px; }

/* ── Home anónima · bloque de acceso «ya tengo cuenta» (decisión 2026-09-29) ───────────────────
   El único «Entrar» del landing era el enlacecito de la esquina del header: el alumno matriculado y el
   profe que llegan por un enlace del colegio no lo veían. Va DENTRO del masthead, junto al registro.
   .hero-panel .button fuerza el ámbar nocturno sobre la superficie clara del masthead, así que se gana
   con el marcador de clase (mismo patrón que .header-actions .login-link en el bloque móvil). */
.hero-masthead .masthead-access { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin: 22px auto 0; padding-top: 18px; border-top: 1px solid var(--line); }
.hero-masthead .masthead-access .button { background: var(--accent); color: var(--surface); border-color: transparent; font-weight: 600; }
.hero-masthead .masthead-access .button:hover { background: var(--accent-hover); color: var(--surface); }
.hero-masthead .masthead-access .button.secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.hero-masthead .masthead-access .button.secondary:hover { background: var(--accent-soft); color: var(--ink); border-color: var(--accent); }
.masthead-access-note { font-size: 14px; font-weight: 600; color: var(--muted); }
.masthead-access-note a { color: var(--accent); font-weight: 650; }
.masthead-access-note a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Pantallas bajas (móvil apaisado, laptops pequeñas): se aprieta el masthead para que el bloque de
   acceso siga visible SIN HACER SCROLL, que es justamente la promesa del rediseño. */
@media (max-height: 780px) {
    .hero-masthead { padding-bottom: 20px; }
    .hero-masthead .lead { margin-bottom: 16px; }
    .hero-masthead .masthead-ways { margin-top: 14px; }
    .hero-masthead .masthead-access { margin-top: 14px; padding-top: 12px; }
}

/* ── Home logueada · puertas por rol bajo el saludo ─────────────────────────────────────────────
   Panel docente / Mis grupos (quien enseña) y Mis aulas + Continuar (quien aprende): destinos que antes
   sólo vivían dentro del menú del avatar. Píldoras con los tokens del tema, sin competir con «Continuar». */
.home-role-entries { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 18px; }
.home-role-entry { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; min-height: 38px; transition: border-color .15s, background .15s; }
.home-role-entry > svg { color: var(--accent); flex: 0 0 auto; }
.home-role-entry:hover { border-color: var(--accent); background: var(--accent-soft); }
.home-role-entry.is-continue { border-color: var(--accent); }

/* ── Home logueada rediseñada (2026-09-30) ──────────────────────────────────────────────────
   El logueado ve el MISMO masthead editorial que el visitante: adiós al «Hola», al héroe
   «Tu siguiente paso» y al «Continuar en…». Las puertas por rol van dentro del masthead y el
   avance real se lista en «En curso», una línea por elemento con mini-progreso. */
.masthead-access-roles .home-role-entry { background: var(--surface); }
.home-ongoing-list { display: grid; gap: 8px; }
/* Tercera columna de ANCHO FIJO (132px): la píldora de tipo vive en la segunda y se alinea a la
   derecha, así que queda en la MISMA posición vertical tanto en filas con barra de progreso
   (Lectura/Plan) como sin ella (Curso). Antes la última columna era «auto» y, al no haber
   progreso, el chip saltaba al borde derecho y las filas se veían desalineadas y a medio hacer. */
.home-ongoing-item { display: grid; grid-template-columns: minmax(0, 1fr) auto 132px; align-items: center; gap: 14px; padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.home-ongoing-item:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.home-ongoing-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ongoing-chip { justify-self: end; font-size: 11px; line-height: 1; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); white-space: nowrap; }
.home-ongoing-pct { display: inline-flex; align-items: center; gap: 8px; justify-self: end; color: var(--muted); font-size: 13px; }
.home-ongoing-pct progress { width: 78px; }
@media (max-width: 640px) {
    .home-ongoing-item { grid-template-columns: minmax(0, 1fr) auto; }
    .home-ongoing-pct { grid-column: 1 / -1; justify-self: stretch; }
    .home-ongoing-pct progress { flex: 1 1 auto; width: auto; }
}

/* ═══ Segunda mejora de diseño (2026-10-01) ═══════════════════════════════════════════════
   Cabecera con menú «Herramientas» etiquetado, acción única en el hero, fallback diseñado
   de portada, «Qué aprenderás» real, selector de materias por grado, temario plegable del
   visitante y progreso del alumno. Todo con tokens semánticos => claro/oscuro se adaptan.
   Los tonos saturados de .cover-tone-* son SUPERFICIES GRANDES (nunca texto claro sobre
   fondo claro): así viven ámbar/energía según la regla de roles de color. ──────────── */

/* ── §2 Cabecera: un solo menú de herramientas, etiquetado y con badges reales. ── */
.tools-menu > summary { gap: 6px; }
.tools-label { font-size: 13.5px; font-weight: 600; }
.tools-menu > div { min-width: 272px; max-width: min(330px, 92vw); }
.tool-item { min-height: 40px; }
.tool-item small { margin-left: auto; padding-left: 10px; color: var(--muted); font-size: 11px; font-weight: 500; text-align: right; }
.tool-badge { margin-left: auto; min-width: 19px; padding: 1px 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
.tool-badge:empty { display: none; }
.tools-heading { margin: 12px 10px 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.tools-sep { margin: 8px 4px; height: 0; border-top: 1px solid var(--line); }

/* ── §3 Portada: UNA acción principal bajo el buscador. ── */
.hero-actions { display: flex; justify-content: center; margin: 24px 0 0; }
.hero-cta { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 13px 28px; font-size: 16px; font-weight: 700; }
.home-themes .home-rails { margin-top: 18px; }

/* ── §4 Fallback DISEÑADO de portada (sin generar imágenes): tono cálido + símbolo temático,
      determinista por curso (course_cover en helpers.php). Reutilizado por .course-poster,
      .course-cover y .subject-cover — la clase va en el mismo elemento. */
.cover-fallback { position: relative; color: #FFF7EE; }
.cover-glyph { display: grid; place-items: center; width: 100%; height: 100%; }
.cover-glyph > svg { width: 40%; max-width: 54px; height: auto; opacity: .93; }
.cover-tone-1 { background: linear-gradient(140deg, #7E2A0E, var(--lumbre-energy)); }      /* matemáticas · terracota→energía */
.cover-tone-2 { background: linear-gradient(140deg, #5C4100, var(--warm)); }               /* lenguajes · miel profundo */
.cover-tone-3 { background: linear-gradient(140deg, #08463A, var(--lumbre-success)); }     /* ciencias · verde noche */
.cover-tone-4 { background: linear-gradient(140deg, #33246F, var(--lumbre-discovery)); }   /* humanidades · violeta */
.cover-tone-5 { background: linear-gradient(140deg, #0F1622, #384766); }                   /* tecnología · azul noche */
.cover-tone-6 { background: linear-gradient(140deg, #6E1B35, #A93E63); }                   /* arte/sociedad · rosa profundo */
/* Grano luminoso sobre el fallback: el mismo punteado del póster automático de descubrimiento
   (.media-cover-tone::after), para que una portada sin foto se lea DELIBERADA, no «imagen rota».
   El glifo sube de capa para quedarse nítido sobre el patrón. */
.cover-fallback::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(#FFFFFF26 1.5px, transparent 1.6px); background-size: 18px 18px; opacity: .5; pointer-events: none; }
.cover-glyph { position: relative; z-index: 1; }
/* Títulos y descripciones con clamp: el título COMPLETO sigue accesible vía title y lector. */
.course-body > strong, .course-body > small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── §6 «Qué aprenderás» con objetivos reales de los módulos. ── */
.course-goals { max-width: 62ch; margin: 12px 0 14px; padding: 12px 16px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); background: var(--surface); }
.course-goals .what-you-learn-label { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-size: 13px; color: var(--ink); }
.course-goals .what-you-learn-label > svg { color: var(--accent); flex: 0 0 auto; }
.course-goals ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.course-goals li { font-size: 14px; line-height: 1.5; color: var(--muted); }
.course-goals li::marker { color: var(--accent); }

/* ── §5 Página de grado: «Elige una materia para empezar». ── */
.subject-pick .quiet-note { margin: 2px 0 14px; }
.subject-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 14px; }
.subject-card { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: inherit; text-decoration: none; overflow: hidden; }
/* Insignia de número (página de grado): la materia en orden lógico curricular, sobre la portada. */
.subject-num { position: absolute; top: 8px; left: 8px; z-index: 1; display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: var(--accent); color: #fff; font: 800 13px/1 var(--font-ui); box-shadow: var(--shadow-sm); }
.subject-card:hover { border-color: var(--accent); }
.subject-cover { display: block; aspect-ratio: 16 / 9; background: var(--bg); }
.subject-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.subject-info { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 12px 14px 14px; min-width: 0; }
.subject-info strong { font-size: 15.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.subject-desc { color: var(--muted); font-size: 12.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.subject-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; color: var(--accent); font-size: 13px; font-weight: 700; }
/* Cursos «en preparación»: framework oficial sembrado (Chile Media NT1) sin LOs publicados aún.
   La tarjeta mantiene el enlace al /circles/{slug} del curso (ruta y OA visibles ahí), pero se
   presenta desaturada y con un chip ámbar para no prometer lecciones que todavía no existen. */
.subject-pick-pending .quiet-note { color: var(--muted); font-style: italic; }
.subject-card-pending { opacity: .82; }
.subject-card-pending .subject-cover { filter: saturate(.55) opacity(.85); }
.subject-card-pending:hover { opacity: 1; }
/* Tarjeta sin ninguna ruta aún (programas Lumbre): no es un enlace, así que no debe insinuarlo —
   sin hover de acento, sin flecha y con cursor por defecto. aria-disabled va en el marcado. */
.subject-card-unbuilt, .subject-card-unbuilt:hover { cursor: default; border-style: dashed; opacity: .72; }
.subject-card-unbuilt:hover { border-color: var(--line); }
.subject-card-unbuilt .subject-go.muted { color: var(--muted); }
.subject-chip-pending { align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: lowercase; }

/* ── §8 Temario del visitante: módulos plegables nativos (<details>: teclado y lector sin JS),
      requisito explicado una sola vez y muestra sólo si la lección abre de verdad.
      Cada módulo abre con su portada (o mosaico con icono) + número en pestaña: más vistoso. */
.syllabus { display: grid; gap: 10px; }
.syllabus-module { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.syllabus-module:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.syllabus-module[open] { border-color: var(--accent); }
.syllabus-module > summary { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 12px 16px; cursor: pointer; list-style: none; }
.syllabus-module > summary::-webkit-details-marker { display: none; }
.syllabus-module > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.syllabus-cover { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--radius-sm); overflow: hidden; background: var(--accent-soft); color: var(--accent); box-shadow: var(--shadow-sm); }
.syllabus-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.syllabus-cover.is-fallback { background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--accent) 12%, transparent)); }
.syllabus-num { position: absolute; top: 0; left: 0; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 0 0 var(--radius-sm) 0; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 800; }
.syllabus-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.syllabus-title { font-weight: 700; font-size: 15.5px; line-height: 1.25; color: var(--ink); }
.syllabus-meta { color: var(--muted); font-size: 12.5px; }
.syllabus-module > summary::after { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
.syllabus-module[open] > summary::after { transform: rotate(-135deg); }
.syllabus-module .route-objective { margin: 0 16px 4px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 13px; }
.syllabus-list { list-style: none; margin: 0; padding: 12px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); border-top: 1px solid var(--line); }
.lesson { display: flex; align-items: stretch; gap: 12px; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.lesson:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.syllabus-open { color: var(--ink); }
.syllabus-open:hover { color: var(--accent); }
.syllabus-locked { color: var(--muted); cursor: default; }
.syllabus-locked .lesson-cover img { filter: grayscale(.35) opacity(.72); }
/* Portada del tema: miniatura 16:9 que llena su cajetín (object-fit: cover recorta sin deformar). */
.lesson-cover { position: relative; flex: 0 0 auto; align-self: stretch; display: grid; place-items: center; width: 96px; min-height: 62px; border-radius: var(--radius-sm); overflow: hidden; background: var(--accent-soft); color: var(--accent); }
.lesson-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lesson-cover.is-fallback { background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--accent) 14%, transparent)); }
.lesson-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.lesson-title { font-size: 14px; font-weight: 650; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.syllabus-locked .lesson-title { color: var(--muted); }
.lesson-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11.5px; }
.lesson-min { color: var(--muted); margin-left: auto; white-space: nowrap; }
.sample-tag { flex: 0 0 auto; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.lock-tag { flex: 0 0 auto; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); font-size: 10.5px; font-weight: 700; }
/* ── §8 Temario del visitante MOSAICO compacto y ordenado (2026-10-03): cada módulo es una LOSETA de
      una rejilla auto-ajustada (`.tem-mosaic`), no una sección apiliada a todo el ancho. La loseta lleva
      cabecera breve (insignia con el número 1,2,3… + título sin el prefijo «Módulo N ·» repetido + conteo)
      y DENTRO sus lecciones como miniaturas-portada (`.tem-card`, imagen del OA + número de secuencia
      global en una pestaña). Más denso que apilar, pero el orden se lee de un vistazo. Todo con tokens →
      claro/oscuro automático. */
.tem-mosaic { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; align-items: start; }
/* Curso de UN solo módulo (típico de primaria): auto-fit colapsa las pistas vacías y la loseta
ocupa TODO el ancho — antes quedaba a 280px con un vacío enorme a la derecha que rompía la
página. Con la loseta ancha, las miniaturas suben de tamaño y llenan la fila. */
.tem-mosaic:has(> .tem-module:only-child) .tem-grid { grid-template-columns: repeat(auto-fill, minmax(min(172px, 100%), 1fr)); }
.tem-module { display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); padding: 14px; min-width: 0; }
.tem-mod-head { display: flex; align-items: flex-start; gap: 10px; }
.tem-mod-num { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: #fff; font: 800 15px/1 var(--font-ui); box-shadow: var(--shadow-sm); }
.tem-mod-txt { min-width: 0; }
.tem-mod-title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tem-mod-meta { margin: 3px 0 0; font-size: 12px; }
.tem-mod-obj { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(132px, 100%), 1fr)); gap: 10px; }
/* Módulo de UNA sola lección: que la miniatura ocupe el ancho de la loseta (sin hueco muerto a la derecha). */
.tem-grid:has(> .tem-card:only-child) { grid-template-columns: 1fr; }
.tem-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; text-decoration: none; color: inherit; min-width: 0; transition: border-color .15s, box-shadow .15s, transform .15s; }
.tem-card:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-2px); }
.tem-card.is-locked { color: var(--muted); }
.tem-poster { position: relative; aspect-ratio: 4 / 3; width: 100%; display: grid; place-items: center; background: linear-gradient(145deg, var(--accent-soft), var(--surface)); color: var(--accent); overflow: hidden; }
.tem-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tem-poster.is-fallback { background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--accent) 14%, transparent)); }
/* Póster de respaldo (sin portada real): patrón de puntos + icono + materia, para que la
   ausencia de imagen se vea como diseño intencional, nunca como <img> roto. */
.tem-poster.is-fallback::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(color-mix(in srgb, var(--accent) 26%, transparent) 1.4px, transparent 1.5px); background-size: 15px 15px; opacity: .5; }
.tem-post-ic { position: relative; z-index: 1; display: grid; place-items: center; color: var(--accent); }
.tem-post-subject { position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 7px; text-align: center; font: 600 10px/1.3 var(--font-ui); letter-spacing: .02em; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tem-card.is-locked .tem-poster img { filter: grayscale(.5) opacity(.6); }
.tem-seq { position: absolute; top: 6px; left: 6px; z-index: 2; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font: 800 12px/1 var(--font-ui); box-shadow: var(--shadow-sm); }
.tem-lock { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.35); }
.tem-body { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px 10px; }
.tem-title { font-size: 12.5px; font-weight: 650; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tem-card.is-locked .tem-title { color: var(--muted); }
.tem-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 10.5px; }
.tem-min { color: var(--muted); margin-left: auto; white-space: nowrap; }
.tem-empty { margin: 0; padding: 2px 0; }
@media (prefers-reduced-motion: no-preference) { .tem-card { transition: border-color .15s, box-shadow .15s, transform .15s; } }
@media (max-width: 480px) { .tem-mosaic { grid-template-columns: 1fr; gap: 13px; } .tem-grid { grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr)); } }
/* Temario del MIEMBRO (2026-10-05): usa el mismo mosaico que el visitante, así que el título del módulo
   es además puerta de su página, y debajo van las acciones (Ver/Continuar módulo, quitar si administra). */
.tem-mod-title a { color: inherit; text-decoration: none; }
.tem-mod-title a:hover { color: var(--accent); }
.tem-mod-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.tem-card.is-current { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.tem-card.is-done .tem-seq { background: var(--ok); }
/* ── §8 Temario en VISTA LISTA (2026-10-07): el mismo temario, una fila por lección — más denso y
      rápido de escanear en cursos con muchas lecciones. El modo vive en la URL (?tem=lista); los
      módulos se apilan a todo el ancho (`.tem-listwrap`) y dentro cada lección es una fila con su
      número global, miniatura, título y estado. Todo con tokens → claro/oscuro automático. */
.tem-view-toggle { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.tem-listwrap { display: flex; flex-direction: column; gap: 16px; }
.tem-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tem-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-decoration: none; color: inherit; min-width: 0; transition: border-color .15s, box-shadow .15s; }
.tem-row:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.tem-row.is-locked { color: var(--muted); cursor: default; }
.tem-row.is-current { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.tem-row-num { flex: 0 0 auto; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font: 800 12px/1 var(--font-ui); }
.tem-row.is-done .tem-row-num { background: var(--ok); }
.tem-row-poster { flex: 0 0 auto; position: relative; width: 56px; height: 42px; border-radius: 7px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(145deg, var(--accent-soft), var(--surface)); color: var(--accent); }
.tem-row-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tem-row-poster.is-fallback { background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--accent) 14%, transparent)); }
.tem-row.is-locked .tem-row-poster img { filter: grayscale(.5) opacity(.6); }
.tem-row-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tem-row-title { font-size: 13.5px; font-weight: 650; line-height: 1.3; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tem-row.is-locked .tem-row-title { color: var(--muted); }
.tem-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 10.5px; }
.tem-row-status { flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 11px; white-space: nowrap; }
@media (max-width: 480px) { .tem-row-title { white-space: normal; } .tem-row-poster { width: 44px; height: 34px; } }


/* ── §8 Temario del alumno: lecciones plegables por módulo, avance y «Vas aquí». ── */
.module-lessons { margin: 6px 0 12px; }
.module-lessons > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 650; cursor: pointer; list-style: none; }
.module-lessons > summary::-webkit-details-marker { display: none; }
.module-lessons > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.route-object.is-current { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.route-object.is-current strong { color: var(--accent); }
.route-object.is-current .route-obj-state { color: var(--accent); font-weight: 700; }

/* Microtransiciones sólo si la persona no pidió menos movimiento. */
@media (prefers-reduced-motion: no-preference) {
    .syllabus-module > summary::after { transition: transform .15s; }
    .subject-card { transition: border-color .15s; }
}
/* Móvil fino (320px): el resumen del módulo respira en dos líneas y las acciones del menú no se aprietan. */
@media (max-width: 480px) {
    .syllabus-module > summary { flex-wrap: wrap; row-gap: 4px; }
    .syllabus-title { flex: 1 1 auto; }
    .lesson-cover { width: 78px; min-height: 54px; }
    .tools-menu > div { right: -6px; }
    .hero-cta { width: min(100%, 320px); justify-content: center; }
}

/* ── HERO CORTO estilo catálogo (Udemy, 2026-10): a la izquierda título + UNA frase; a la derecha,
   TRES fichas grandes con imagen (Primaria · Secundaria · Preparatoria). Toda la ficha es clicable y
   lleva a /estudiar/{nivel}; los grados y materias se revelan DESPUÉS, no en la portada. Mobile-first:
   en pantallas finas la copia va arriba y las tres fichas quedan una al lado de otra, reconocibles y
   tocables. Todo con tokens => claro/oscuro. ─────────────────────────────────────────────────────── */
.home-hero { display: grid; gap: clamp(16px, 3vw, 34px); align-items: center; padding: clamp(14px, 2.4vw, 30px) 0 4px; }
.home-hero-copy h1 { margin: 0 0 8px; font-size: clamp(1.5rem, 3.4vw, 2.25rem); line-height: 1.14; color: var(--ink); letter-spacing: -.01em; }
.home-hero-copy .lead { margin: 0 0 12px; max-width: 40ch; color: var(--muted); font-size: clamp(.98rem, 2.2vw, 1.08rem); line-height: 1.5; }
.home-hero-copy .text-link { font-size: 14px; font-weight: 700; }
/* Rótulo «SEP México» sobre el título: acento de marca, legible en claro y oscuro (no el ámbar del panel nocturno). */
.home-hero-copy .hero-kicker { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
/* Tres fichas de nivel: velo oscuro y rótulo abajo; la superficie entera es el enlace.
   Alto UNIFORME por altura (no por aspect-ratio) para que las tres franjas de la portada —
   las fichas escolares del hero (columna estrecha), «Para profesores» (3 col a todo el ancho) y
   «Lecturas» (4 col a todo el ancho)— queden a la MISMA altura. Con aspect-ratio el alto crecía con
   el ancho de la columna y las franjas de abajo se veían mucho más altas que las de arriba; la pauta
   la marca el hero, así que fijamos una altura común y la foto se recorta con object-fit: cover. */
.level-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 18px); }
.level-card { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: #fff; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s; }
.level-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.level-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.level-cover { display: block; position: relative; height: clamp(240px, 25vw, 330px); overflow: hidden; }
.level-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Velo de legibilidad sobre la foto: el rótulo siempre se lee claro sobre oscuro, en cualquier tema. */
.level-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0000 42%, #0b0e14d9 100%); }
.level-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; gap: 2px; padding: 12px 12px 13px; }
.level-body strong { font-size: clamp(1rem, 2.1vw, 1.28rem); line-height: 1.15; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #0007; }
.level-cta { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: #FFD9C7; }
.level-card:hover .level-cta { color: #fff; }
.level-card:hover .level-cta svg { transform: translateX(3px); }
@media (prefers-reduced-motion: no-preference) { .level-cta svg { transition: transform .15s; } }
/* Escritorio ancho: la copia ocupa una columna y las tres fichas se alinean a su derecha. */
@media (min-width: 860px) { .home-hero { grid-template-columns: minmax(240px, 1fr) minmax(0, 1.5fr); } }
/* Móvil fino: tres fichas siguen visibles lado a lado; se vuelve al alto proporcional (auto) para
   no fijar una altura que desborde columnas de ~110px; se acorta a 4:5 para no alargar la página. */
@media (max-width: 520px) {
    .level-cover { height: auto; aspect-ratio: 4 / 5; }
    .level-body { padding: 9px 9px 10px; }
    .level-cta { font-size: 11.5px; }
}
/* Nota de marca honesta y línea de Explorar: discretas, al pie de sus bloques. */
.home-school-note { margin: 12px auto 0; padding: 0 4px; text-align: center; }
.home-more-line { margin: 18px 0 0; text-align: center; }
/* Fila fija de «Más para aprender»: hasta 4 cursos en una línea en escritorio. */
@media (min-width: 900px) { .course-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Riel «Lecturas» de la portada (2026-10-01): cuatro accesos por nivel con la misma ficha del nivel
   escolar. Doble clase + regla DESPUÉS de .level-grid (3362) para ganar la cascada por orden. */
.level-grid.level-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
@media (max-width: 900px) { .level-grid.level-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Fila de 5 puertas (portada «Grandes colecciones»): 5 en escritorio ancho, 3 en tablet, 2 en móvil.
   Sin esta clase las 5 fichas caerían en el default de .level-grid (3 col) y dejarían una fila suelta. */
.level-grid.level-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: none; }
@media (max-width: 1024px) { .level-grid.level-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .level-grid.level-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Franja «Programas Lumbre» (2026-10-05, portada y /circles): son DOS recorridos con landing propio, y
   con las 3 columnas por defecto de .level-grid quedaría una ficha suelta y aire muerto. Dos columnas en
   escritorio, una en móvil (las fichas llevan foto o emblema, y necesitan línea de tagline + métricas). */
.level-grid.level-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
@media (max-width: 720px) { .level-grid.level-grid-2 { grid-template-columns: 1fr; } }
.programs-block { margin-top: clamp(30px, 4vw, 48px); }
.programs-block .section-heading { margin-bottom: 14px; }
/* Línea de métricas del recorrido (4 etapas · 300–450 h estimadas): discreta bajo el blurb, sin robarle
   protagonismo al número grande, que es la prueba de abundancia de la ficha. */
.programs-meta { display: block; font-size: 12px; letter-spacing: .01em; color: #ffffffbf; text-shadow: 0 1px 2px #0008; }
/* Puerta al landing del programa, dentro de su ficha /circles/{programa} (2026-10-05): panel discreto
   con el texto a la izquierda y su acción a la derecha; en móvil el botón ocupa la fila para no dejarlo
   colgando. Reutiliza los tokens de .home-route, así se lee parte de la página y no un banner pegado. */
.programa-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.programa-banner .pb-txt { flex: 1 1 320px; min-width: 0; }
.programa-banner .list-title { margin-bottom: 4px; }
.programa-banner .button { flex: none; }
@media (max-width: 640px) { .programa-banner .button { width: 100%; justify-content: center; } }
/* Blurb de una línea bajo el título en las fichas de familia: se corta con clamp para no
   estirar el body absoluto sobre la foto; el texto completo vive en el aria-label del enlace. */
.level-blurb { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 12.5px; line-height: 1.3; color: #ffffffd9; text-shadow: 0 1px 2px #0008; }
/* Portada sin foto (fichas de lecturas): el glifo se centra sobre el tono, como el fallback de course-card. */
.level-cover svg { position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%); color: #ffffffd9; }

/* ═══ Tercera pasada de diseño — «galleta» (2026-10-03) ═══════════════════════════════════
   La portada era correcta pero PLANA: hero tímido, fichas de familia que se leían vacías
   (degradado oscuro + glifo de línea casi invisible) y filas de «continúa» sin vida. Este
   bloque sube la temperatura visual SIN tocar marcado ni estructura: halo cálido y titular
   grande en el hero, brillo + zoom en las fichas, el glifo convertido en EMBLEMA sobre disco,
   encabezados con regla de acento y filas con barra de progreso de color. Todo con tokens y
   color-mix => claro/oscuro se respeta. ─────────────────────────────────────────────────── */

/* — Hero: titular grande y seguro + halo cálido detrás de la copia (z-index -1: bajo el texto). — */
.home-hero { position: relative; }
.home-hero::before { content: ""; position: absolute; z-index: -1; top: -8%; left: -7%; width: 48%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 66%); filter: blur(8px); pointer-events: none; }
.home-hero-copy h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.03; letter-spacing: -.025em; }
.home-hero-copy .hero-kicker { gap: 9px; }
.home-hero-copy .hero-kicker::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--accent); }
.home-hero-copy .lead { font-size: clamp(1.02rem, 2.2vw, 1.18rem); line-height: 1.55; }

/* — Fichas con imagen: zoom suave + brillo superior deliberado + sombra más rica al hover. — */
@media (prefers-reduced-motion: no-preference) { .level-cover img { transition: transform .6s cubic-bezier(.2,.7,.2,1); } }
.level-card:hover .level-cover img { transform: scale(1.07); }
.level-cover::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 70% at 50% -8%, #ffffff26, transparent 55%); pointer-events: none; }
.level-card { box-shadow: 0 2px 10px rgba(20,14,8,.08); }
.level-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(20,14,8,.18); }
.level-body strong { letter-spacing: -.01em; }

/* — Fichas de familia / lecturas SIN foto: el glifo se vuelve emblema en disco translúcido,
      para que una ficha sin foto se lea diseñada y no vacía. Sólo afecta al <svg> de fallback
      (si hay foto es un <img> absoluto y no pasa por aquí). — */
.level-grid-5 .level-cover > svg, .level-grid-4 .level-cover > svg, .level-grid-2 .level-cover > svg { width: 30%; max-width: 84px; height: auto; }
.level-grid-5 .level-cover > svg, .level-grid-4 .level-cover > svg, .level-grid-2 .level-cover > svg { padding: 21%; border-radius: 50%; box-sizing: border-box;
    background: radial-gradient(circle at 50% 45%, #ffffff2e, #ffffff0a 72%); box-shadow: inset 0 0 0 1px #ffffff2e; }

/* — Encabezados de sección: icono teñido de acento y un poco más de aire bajo el título. — */
.home-block .section-heading, .home-ongoing .section-heading { margin-bottom: 20px; }
.section-heading h2 { display: inline-flex; align-items: center; gap: 10px; }
.section-heading h2 svg { color: var(--accent); flex: none; }

/* — «Continúa aprendiendo»: acento izquierdo, progreso de color y micro-elevación al hover. — */
.home-ongoing-item { border-left: 3px solid color-mix(in srgb, var(--accent) 55%, var(--line)); }
.home-ongoing-item progress { accent-color: var(--accent); height: 8px; border-radius: 999px; overflow: hidden; }
.home-ongoing-item:hover { transform: translateY(-1px); }

/* ═══ HERO EDITORIAL A GRANDE (2026-10-03) ════════════════════════════════════════════════
   La portada pasa de un hero tímido a una BANDA EDITORIAL: foto real de fondo (portada
   garantizada del primer nivel), scrim oscuro en degradado para que el titular mande, y UNA
   sola acción. Todo se activa sólo con .has-media (hay foto) => sin imagen conserva el panel
   claro de siempre y NUNCA quedan textos blancos sobre fondo claro. El marcado nuevo mete
   .home-hero-inner como el grid, así que .home-hero pasa a ser el lienzo posicional. ───── */
.home-hero { position: relative; isolation: isolate; display: block; overflow: hidden;
    border-radius: var(--radius-lg); padding: clamp(22px, 4.6vw, 60px) clamp(18px, 3.6vw, 46px); }
.home-hero-inner { position: relative; z-index: 1; display: grid; gap: clamp(18px, 3vw, 34px); align-items: center; }
@media (min-width: 860px) { .home-hero-inner { grid-template-columns: minmax(300px, 1.05fr) minmax(0, 1.4fr); } }

/* Capa de foto + scrim (sólo con imagen). El halo de acento de la pasada anterior se apaga
   sobre la foto porque el scrim ya aporta la temperatura; se queda para el modo sin imagen. */
.home-hero.has-media { background: #0b0e14; }  /* reserva: si la foto no cargara, el texto blanco sigue legible */
.home-hero.has-media .home-hero-media { position: absolute; inset: 0; z-index: -2; margin: 0; }
.home-hero.has-media .home-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-hero.has-media::before { display: none; }
/* Scrum ALIGERADO (α 0.77→0.10): deja VER la foto editorial y aun así el blanco del titular
   supera ~10:1 (AAA). Antes la media izquierda era 0.9 => la foto se volvía negro y el hero
   volvía a leerse plano. El tramo oscuro se acorta hacia la izquierda, donde vive el texto. */
.home-hero.has-media::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(100deg, #0b0e14c4 2%, #0b0e1499 38%, #0b0e1455 70%, #0b0e141a 100%); }

/* Sobre la banda oscura: el titular en blanco, la frase y el rótulo en tonos cálidos legibles. */
.home-hero.has-media .home-hero-copy h1 { color: #fff; }
.home-hero.has-media .home-hero-copy .lead { color: #f3e9dfda; }
.home-hero.has-media .home-hero-copy .hero-kicker { color: var(--accent); }
/* Fallback SIN foto: panel suave, conserva la legibilidad del tema claro/oscuro. */
.home-hero:not(.has-media) { border: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }

/* Titular aún más display (sube sobre la regla de la pasada anterior por orden de cascada). */
.home-hero-copy h1 { font-size: clamp(2.2rem, 5.1vw, 3.7rem); max-width: 18ch; }

/* UNA sola acción principal: píldora sólida de acento con sombra luminosa. TEXTO OSCURO sobre
   el naranja => contraste ~7:1 (AA/AAA) en vez del blanco que fallaba (2.6:1). */
.home-hero-actions { display: flex; margin-top: 22px; }
.home-hero-cta { display: inline-flex; align-items: center; gap: 9px; min-height: 50px; padding: 14px 26px;
    border-radius: 999px; background: var(--accent); color: #2a1206; font-size: 16px; font-weight: 800; text-decoration: none;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 42%, transparent); transition: transform .16s, box-shadow .16s; }
.home-hero-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 34px color-mix(in srgb, var(--accent) 50%, transparent); color: #2a1206; }
.home-hero-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.home-hero-cta svg { transition: transform .16s; }
.home-hero-cta:hover svg { transform: translateX(3px); }

/* Las tres fichas de nivel sobre la banda ganan presencia con una sombra más profunda. */
.home-hero.has-media .level-card { box-shadow: 0 12px 30px #00000099; }
@media (prefers-reduced-motion: reduce) { .home-hero-cta, .home-hero-cta svg { transition: none; } }

/* Pista docente (/profesores/{key}): fuentes oficiales listas por tipo, discretas. */
.tt-kind-title { margin: 18px 0 6px; font-size: 15px; }
.tt-resource-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; }

/* Panel admin · previsualización numerada de las selecciones del escaparate (mismo orden que la portada). */
.curation-preview { margin: 8px 0 4px; padding-left: 26px; display: grid; gap: 3px; }
.curation-preview li { font-size: 14px; }
.curation-preview code { color: var(--accent); font-weight: 700; }

/* Cabecera: el menú de cuenta es ahora UNA sola puerta (utilidades + cuenta). El panel crece: que
   no infle el viewport — scroll interno y ancho contenido en móvil fino. */
.account-menu > div { max-height: min(78vh, 620px); overflow-y: auto; }
.account-menu .tools-group { display: flex; flex-direction: column; gap: 2px; min-width: 232px; }
.account-menu .tool-item { width: 100%; }
.account-menu .tool-item > small { display: block; color: var(--muted); font-size: 11px; }
.tools-heading { margin: 12px 2px 4px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.account-menu .theme-menu { display: flex; flex-direction: column; gap: 2px; }
.tools-sep { border-top: 1px solid var(--line); height: 0; margin: 12px 0; }
@media (max-width: 480px) {
    .account-menu > div { left: 0; right: 0; top: 46px; max-height: 72vh; }
    .account-menu .tools-group { min-width: 0; }
}
/* OA: «Explora temas relacionados» — lista ligera de chips dentro del details cerrado (sin nube). */
.cc-related-list { list-style: none; padding: 0; margin: 8px 0 4px; display: flex; flex-wrap: wrap; gap: 8px; }

/* ═══ PORTADA · OPTIMIZACIÓN FINA (2026-10-03) ═══════════════════════════════════════════
   MENOS ELEMENTOS, MÁS VALOR POR ELEMENTO. La portada queda en seis franjas (hero · continúa ·
   explora · profesores · lecturas · footer) y estas reglas sólo ajustan LO QUE YA EXISTE:
   jerarquía del mensaje en tres tiempos, aire entre bloques, el número de cursos como protagonista
   de la tarjeta-puerta, una sola línea de continuidad con su acción y el historial plegado.
   Va AL FINAL del archivo para ganar la cascada por orden (especificidad igual, sin !important). */

/* — Hero en tres tiempos: titular · subtítulo destacado (la promesa doble: escuela y vida) ·
      una frase de apoyo. El subtítulo manda menos que el h1 y más que el lead: lectura en diagonal. — */
.home-hero-copy .hero-sub { margin: 0 0 10px; max-width: 30ch; font: 600 clamp(1.15rem, 2.5vw, 1.55rem)/1.24 var(--font-reading);
    letter-spacing: -.012em; color: var(--accent); }
.home-hero-copy .lead { font-size: clamp(.98rem, 1.9vw, 1.06rem); line-height: 1.58; max-width: 46ch; color: var(--muted); }
/* Sobre la banda con foto: el subtítulo sube a ámbar claro (el acento puro se apaga en el scrim) y el
   lead baja un punto de opacidad, para que el orden titular > subtítulo > frase se lea de un vistazo. */
.home-hero.has-media .home-hero-copy .hero-sub { color: #FFCF9B; }
.home-hero.has-media .home-hero-copy .lead { color: #f3e9dfc4; max-width: 48ch; }

/* — Aire: la separación entre franjas pasa a ser proporcional al viewport (antes 30px fijos, que en
      1440px se leían apilados). NO se agrandan las tarjetas: sólo respira la estructura. — */
.home-discovery { padding-bottom: clamp(36px, 5vw, 64px); }
.home-block { margin-top: clamp(38px, 5vw, 62px); }
.home-block > .section-lede { margin: -12px 0 20px; max-width: 72ch; line-height: 1.5; }
.home-school-note { margin-top: 14px; font-size: 12px; line-height: 1.5; }

/* — «Explora Lumbre»: el NÚMERO es la prueba de abundancia. Va bajo el rótulo, en cifra tabular
      grande con sombra propia, y la palabra «cursos» en versalilla pequeña: se percibe la masa de
      contenido sin listar un solo curso. — */
.level-count { display: flex; align-items: baseline; gap: 6px; margin-top: 1px;
    font-size: clamp(1.45rem, 2.2vw, 1.85rem); font-weight: 800; line-height: 1; letter-spacing: -.02em;
    color: #fff; text-shadow: 0 2px 10px #0009; font-variant-numeric: tabular-nums; }
.level-count small { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #ffffffc9; }
.level-grid.level-grid-5 .level-body { gap: 5px; padding-bottom: 15px; }
.level-grid.level-grid-5 .level-blurb { -webkit-line-clamp: 2; font-size: 12px; }

/* — «Continúa aprendiendo»: una línea por elemento con SU acción al final (microcopy de continuidad).
      Se pasa de grid de tres columnas a flex: el título absorbe el espacio y el resto se mantiene
      a la derecha, así la fila no deja huecos cuando no hay progreso. La columna de la lista es
      minmax(0,1fr): con `auto` el contenido nowrap (chip + acción) ensanchaba la fila por encima del
      contenedor y toda la portada ganaba scroll horizontal en móvil (390 px: filas de 456 px). — */
.home-ongoing-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.home-ongoing-item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.home-ongoing-item strong { flex: 1 1 auto; min-width: 0; }
.home-ongoing-pct { flex: none; }
.ongoing-chip { flex: none; }
.ongoing-go { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--accent); }
.ongoing-go svg { transition: transform .15s; }
.home-ongoing-item:hover .ongoing-go svg { transform: translateX(3px); }
@media (max-width: 640px) {
    .home-ongoing-item { flex-wrap: wrap; row-gap: 9px; padding: 13px 14px; }
    .home-ongoing-item strong { flex: 1 1 100%; }
    .home-ongoing-pct { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { .ongoing-go svg { transition: none; } }

/* — Móvil fino (§13: ni bloques gigantes ni títulos partido): las fichas docentes pasan a UNA
      columna, y con el 4:5 heredado del grid cada una medía 335×419 — tres bloques que no cabían
      ni en dos pantallas. Se fijan como franja horizontal corta. Y en las tres fichas escolares
      del hero (93 px de ancho a 390 px) el rótulo bajaba de tamaño para NO romperse a mitad de
      palabra: «Preparatoria» entraba entera o se recortaba sin avisar. — */
@media (max-width: 640px) {
    .level-grid.level-grid-full .level-cover { height: clamp(150px, 44vw, 190px); aspect-ratio: auto; }
    .home-hero .level-body { padding: 8px 8px 9px; }
    .home-hero .level-body strong { font-size: 12.5px; letter-spacing: -.015em; }
    .home-hero .level-cta { font-size: 10.5px; }
    /* En las puertas de 2 columnas (~163 px) la cifra + la palabra «cursos» desbordaba el recuadro
       y se recortaba: en móvil el número baja un punto y sigue siendo lo primero que se lee. */
    .level-grid-5 .level-count { font-size: 1.3rem; gap: 4px; }
    .level-grid-5 .level-count small { font-size: .6rem; }
}

/* — Historial plegado: `<details>` nativo, sin JS y sin panel. El ruido del «visto recientemente»
      sale de la portada y queda a un clic, con el pie que lleva a Mi Brújula. — */
.home-history { margin-top: 16px; }
.home-history > summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
    padding: 4px 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.home-history > summary::-webkit-details-marker { display: none; }
.home-history > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s; }
.home-history[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.home-history > summary:hover { color: var(--accent); }
.home-history-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px 22px;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.home-history-list a { display: flex; align-items: baseline; gap: 9px; padding: 6px 0; font-size: 13.5px;
    color: var(--ink); text-decoration: none; }
.home-history-list a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-history-list a:hover { color: var(--accent); }
.home-history-list small { flex: none; }

/* ── Control de calidad (migracion 124, /admin/calidad): chips de estado y cola. Escopetado con
   prefijo propio qc- (no existe en ninguna otra vista) para no pisar reglas existentes. ──────── */
.qc-chip { cursor: default; }
a.qc-chip { text-decoration: none; }
.qc-obj-revisar, .qc-task-pendiente { border-color: var(--warm, #b26a1f); color: inherit; }
.qc-obj-auditar, .qc-task-en_proceso { border-color: #3d7ab8; }
.qc-obj-correcto, .qc-task-resuelta { border-color: #3f9d5a; }
.qc-obj-no_tocar, .qc-task-requiere_humano, .qc-task-rechazada { border-color: #b8474a; }
.qc-obj { font-size: 12px; text-transform: capitalize; }
/* El estado del objeto es editable desde la cola: <select> que hereda el border-color por estado de las
   reglas qc-obj-* de arriba (mismo idioma visual que los badges de la barra de la ficha). */
.qc-obj-select { font: inherit; font-size: 12px; text-transform: capitalize; border-width: 1px; border-style: solid; border-radius: 6px; padding: 2px 4px; background: transparent; cursor: pointer; }
.qc-task { text-decoration: none; text-transform: capitalize; }
.qc-instruction { max-width: 420px; }
.qc-resolution td { background: color-mix(in srgb, var(--surface, #fff) 60%, transparent); }
.qc-date { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }