/* ==========================================================================
   MODO ESTUDIO (2026-10-02) — capa delgada sobre app.css, scopeada a body.lo-study
   (sólo /object/{slug}). Principio rector: «simplificar la interfaz no significa
   simplificar el conocimiento». Nada se borra del DOM; lo que no sirve PARA LEER en
   este momento deja de competir por la pantalla y se alcanza desde la barra mínima.
   Todo vive bajo prefijos .lo-study / .lsb-: no toca reglas ajenas de app.css.
   ========================================================================== */
:root { --study-bar-h: 56px; }

/* §Bilingüe Selector de idioma (widget web de Google Translate) — sólo el visor de OA.
   Vive a nivel TOP en la barra de estudio (.lsb-actions), siempre visible; al pulsar, objects.js escribe
   la cookie googtrans y recarga. Aquí se pinta el control y se oculta la barra/burbuja de Google para
   que la lección conserve su tipografía y no salte el layout. Los bloques de ejercicio llevan
   notranslate (LessonRenderer): se traduce la prosa y los ejercicios siguen respondibles. */
body.lo-study .lang-flags { display: inline-flex; gap: 5px; align-items: center; flex: none; }
body.lo-study .lang-flags button {
    background: none; border: 1.5px solid var(--line, rgba(0, 0, 0, .12));
    cursor: pointer; padding: 2px; border-radius: 4px;
    width: 28px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
    opacity: .7; transition: opacity .15s, box-shadow .15s, border-color .15s;
}
body.lo-study .lang-flags button svg { width: 20px; height: 14px; display: block; border-radius: 2px; }
body.lo-study .lang-flags button:hover { opacity: 1; border-color: var(--warm, #f0a417); }
body.lo-study .lang-flags button.active { opacity: 1; border-color: var(--warm, #f0a417); box-shadow: 0 0 0 1px var(--warm, #f0a417); }
/* En la barra, banderas compactas para no deformar la fila con la marca y las acciones. */
.lsb-actions .lang-flags { gap: 4px; }
.lsb-actions .lang-flags button { width: 26px; height: 20px; }
.lsb-actions .lang-flags button svg { width: 18px; height: 12px; }

/* Ocultar la interfaz que inyecta el widget (barra superior, burbuja, gadget, spinner) y anular el
   desplazamiento que empuja el <body> al leer. */
body.lo-study .goog-te-banner-frame,
body.lo-study .goog-te-balloon-frame,
body.lo-study .goog-te-gadget,
body.lo-study .goog-logo-link,
body.lo-study .goog-te-spinner,
body.lo-study #goog-gt-tt,
body.lo-study #google_translate_element { display: none !important; }
body.lo-study { top: 0 !important; margin-top: 0 !important; padding-top: 0 !important; }

/* 1) Fuera el vestíbulo del portal durante la lectura: mega menú (site-header) y franja
      escolar (Primaria/Secundaria/Preparatoria). Mismo mecanismo ya probado en el Modo Guía
      (body.lo-guide-on .school-bar { display:none }). Siguen en el DOM para el resto del sitio. */
body.lo-study .site-header { display: none; }
body.lo-study .school-bar { display: none; }

/* 2) La barra de estudio sustituye a la cabecera: mínima y pegajosa (marca · materia/grado ·
      temario · más · avatar). En móvil es aún más delgada: [←] título abreviado [⋯] [avatar].
      z-97 (antes 90): el menú del avatar vive DENTRO de esta barra y el z-index sólo ordena
      dentro del contexto de apilamiento del ancestro — con 90 el desplegable (y su submenú de
      recientes, z-96) quedaba tapado por la barra pegajosa de lectura (.lo-sticky-bar, fixed,
      z-95) al hacer scroll. Sigue por debajo del panel «Más» (125), el toast (100) y el escenario
      del Modo Guía (200), que no conviven con ella en el mismo hueco. */
.lo-study-bar {
    position: sticky; top: 0; z-index: 97;
    height: var(--study-bar-h);
    background: var(--surface); border-bottom: 1px solid var(--line);
}
.lsb-inner {
    /* Cuadra EXACTAMENTE con .container: mismo ancho, mismo max-width, mismos breakpoints y SIN
       padding horizontal extra. .container no lleva padding (sólo el retranque del calc), así que
       cualquier relleno aquí desplaza marca y título respecto del breadcrumb y el h1 de la página y
       la barra se ve descentrada. Los retranques 112/64/40 son los de .container (base / 1100px / 780px). */
    height: 100%; width: calc(100% - 112px); max-width: 1320px; margin: 0 auto;
    display: flex; align-items: center; gap: var(--space-3);
}
@media (max-width: 1100px) {
    .lsb-inner { width: calc(100% - 64px); }
}
@media (max-width: 780px) {
    .lsb-inner { width: calc(100% - 40px); }
}
.lsb-back {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 40px; height: 40px; border-radius: 10px; color: inherit; text-decoration: none;
}
.lsb-back:hover { background: var(--accent-soft); }
/* Regreso siempre visible: en escritorio el breadcrumb queda en la página, no en la barra. */
.lsb-back svg { display: inline-block; }
.lsb-back span { display: none; } /* el glifo «←» de texto sólo sirve de respaldo sin íconos */
.lsb-brand { display: inline-flex; align-items: center; gap: 6px; flex: none; font-weight: 700; color: inherit; text-decoration: none; }
.lsb-brand svg { color: var(--accent); }
.lsb-brand .brand-word { font-size: .95rem; letter-spacing: .12em; }
.lsb-meta { flex: 1 1 auto; min-width: 0; flex-shrink: 1; display: flex; align-items: baseline; gap: .9rem; margin: 0; }
/* .lsb-meta es un <p> y hereda `margin:0 0 16px` de app.css; con align-items:center la barra centra
   la caja de MARGEN, así que el texto sube ~8px y queda desfasado de la marca y los botones. */
/* La marca y el rótulo de la materia no pueden quedar pegados: separador propio + aire. */
.lsb-meta::before { content: ''; flex: none; align-self: center; width: 1px; height: 20px; background: var(--line); margin-right: .15rem; }
.lsb-where { flex: none; color: var(--muted); font-size: .82rem; font-weight: 600; white-space: nowrap; }
.lsb-title { flex: 0 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* El título ocupa el centro elástico; las acciones quedan a la derecha sin margen forzado. */
.lsb-actions { flex: none; display: flex; align-items: center; gap: .45rem; }
.lsb-btn {
    display: inline-flex; align-items: center; gap: .35rem; flex: none;
    height: 40px; padding: 0 .7rem; border: 1px solid var(--line); border-radius: 10px;
    background: var(--surface); color: var(--ink); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.lsb-btn:hover { background: var(--accent-soft); }
.lsb-btn svg { color: var(--accent); }
/* El «⋯» de esta barra ya NO pinta su propio panel: abre el panel compartido de la ficha (#lo-more,
   views/object.php), que objects.js ancla a este botón. Antes repetía aquí las herramientas y los datos
   del objeto: dos copias en el DOM y un popover que se abría mal. */
.lsb-btn[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent); }

/* 2bis) Menú del avatar en la barra de estudio (2026-10-05): views/_account-menu.php, la MISMA
   copia que pintaba el header (ids y JS intactos). Aquí sólo se viste: pastilla redondeada como
   sus vecinas «⋯»/«Ver temario», sin el nombre (la barra es mínima, el avatar basta) y con el
   desplegable anclado bajo la pastilla — el top:42px de app.css estaba calibrado al header de
   64px, no a esta barra de 56 con avatar de 31. */
.lo-study-bar .account-menu summary { height: 40px; padding: 0 .55rem; border-radius: 10px; }
.lo-study-bar .account-menu summary:hover { background: var(--accent-soft); }
.lo-study-bar .account-menu .account-name { display: none; }
.lo-study-bar .account-menu > div { top: calc(100% + 8px); }
@media (max-width: 780px) {
    /* En el header del portal, app.css vuelve el menú de cuenta estático a ancho completo en móvil
       (se cortaba en 360px) porque se despliega dentro del panel de la hamburguesa. En la barra de
       estudio NO hay hamburguesa: la fila mide 56px y un bloque estático la reventaría. Aquí el
       desplegable siempre es popover flotante, anclado al borde derecho de la barra. */
    .js .lo-study-bar .account-menu { width: auto; }
    .js .lo-study-bar .account-menu summary { min-height: 40px; height: 40px; }
    .js .lo-study-bar .account-menu > div {
        position: absolute; top: calc(100% + 8px); right: 0;
        width: min(320px, calc(100vw - 28px)); min-width: 0; max-height: calc(100vh - var(--study-bar-h) - 24px); overflow-y: auto;
        padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
        box-shadow: var(--shadow); background: var(--surface);
    }
}
/* La Brújula (scrim 60 / panel 61) y la paleta de comandos (70) son fijos GLOBALES del sitio:
   al subir la barra a 97 para que su menú de cuenta no quede tapado, aquí sólo en modo estudio
   se elevan por encima para que ningún panel se meta bajo la barra. */
body.lo-study .compass-scrim { z-index: 98; }
body.lo-study .compass-panel { z-index: 99; }
body.lo-study .palette-overlay { z-index: 98; }

/* Escritorio: se muestra la materia/grado y el rótulo del temario. */
@media (min-width: 721px) {
    .lsb-inner { gap: var(--space-4); }
    .lsb-meta { gap: 1.1rem; }
    .lsb-where { font-size: .9rem; }
}
/* Móvil: sólo marca (chispa) · título abreviado · acciones; sin rótulo «Ver temario» (va el ícono).
   Se aprieta el cromo (regreso, huecos, botones) para que el título tenga de dónde ceder y la fila
   nunca desborde: con `min-width:0` en la columna elástica basta, pero bajo 420 px un título largo
   empujaba las acciones fuera de la pantalla. */
@media (max-width: 720px) {
    .lsb-inner { gap: 6px; }
    .lsb-brand .brand-word { display: none; }
    .lsb-meta::before { display: none; }
    /* Con el selector de idioma a nivel top, la fila móvil ya no da para más: el título sale de la barra
       (el h1 de la ficha queda justo debajo) para que las 5 pastillas y las acciones no desborden. */
    .lsb-meta { display: none; }
    .lsb-where { display: none; }
    .lsb-temario > span { display: none; }
    .lsb-btn { padding: 0 .5rem; }
    .lsb-back { width: 34px; }
    .lsb-actions { gap: .3rem; }
    /* El selector de idioma no puede descuadrar la barra móvil: pastillas mínimas (5 tramos). */
    .lsb-actions .lang-flags { gap: 2px; }
    .lsb-actions .lang-flags button { width: 22px; height: 18px; padding: 1px; }
    .lsb-actions .lang-flags button svg { width: 16px; height: 11px; }
}
@media (max-width: 420px) {
    .lsb-inner { width: calc(100% - 28px); padding: 0 7px; gap: 4px; }
    .lsb-meta { gap: 4px; }
}

/* 3) Cabecera y offsets pegajosos: al no estar el site-header, la columna que antes se anclaba a
      su altura (portada sticky, saltos por ancla) lo hace ahora a la barra de estudio. La ficha
      arranca justa debajo de la barra (el respiro grande del catálogo aquí sobra). */
body.lo-study .object-page { padding-top: var(--space-4); }
body.lo-study .breadcrumb { margin-bottom: var(--space-2); }
body.lo-study .object-cover { top: calc(var(--study-bar-h) + 8px); }
body.lo-study section[id], body.lo-study article[id], body.lo-study h2[id] { scroll-margin-top: calc(var(--study-bar-h) + 16px); }
/* La barra pegajosa de lectura ya no se solapa con la de estudio: se apila debajo. */
body.lo-study .lo-sticky-bar { top: var(--study-bar-h); }
/* El panel «Más» se ancla solo (objects.js lo fija bajo el disparador y lo cierra si ese disparador
   desaparece): ya no hay coordenadas que sincronizar entre las dos barras apiladas del modo estudio. */

/* 4) Columna de lectura despejada (el contenido pedagógico es el protagonista, §7): menos cromo,
      sin tarjetas anidadas ni sombras donde basta el texto; ancho cómodo para leer. */
body.lo-study .lo-lesson { max-width: 820px; margin: 0 auto; }
@media (max-width: 640px) {
    /* Nada de scroll horizontal: el texto largo (URLs, código) rompe en la columna, no desborda. */
    body.lo-study .lo-lesson, body.lo-study .object-copy { overflow-wrap: anywhere; }
}

/* Anterior / siguiente visible tras la autoevaluación (§4): dos enlaces lado a lado, sin cromo de tarjeta. */
.lo-lesson-nav { display: flex; gap: var(--space-3); margin: var(--space-6) auto var(--space-2); max-width: 820px; }
.loln { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; gap: .6rem; padding: .7rem .9rem;
    border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink);
    text-decoration: none; }
.loln:hover { border-color: var(--accent); }
.loln svg { flex: none; color: var(--accent); }
.loln .loln-txt { display: flex; flex-direction: column; min-width: 0; }
.loln small { color: var(--muted); font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.loln strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loln-next { justify-content: flex-end; text-align: right; }
.loln.is-ghost { visibility: hidden; }

/* «Vinculación oficial» plegada: conservada íntegra pero fuera del flujo de lectura (§3). */
.lo-official-tail { margin: var(--space-6) 0 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.lo-official-tail > summary { cursor: pointer; list-style: none; padding: .8rem var(--space-4); font-weight: 700; color: var(--muted); }
.lo-official-tail > summary::-webkit-details-marker { display: none; }
.lo-official-tail > summary::before { content: '▸ '; color: var(--accent); }
.lo-official-tail[open] > summary::before { content: '▾ '; }
.lo-official-tail .lo-official-body { padding: 0 var(--space-4) var(--space-4); }

/* «Más sobre esta lección» plegado: toda la información secundaria (§12) tras la autoevaluación. */
.lo-more-lesson { margin: var(--space-6) 0 0; border-top: 1px solid var(--line); padding-top: var(--space-4); }
.lo-more-lesson > summary { cursor: pointer; list-style: none; font-weight: 700; color: var(--muted); }
.lo-more-lesson > summary::-webkit-details-marker { display: none; }
.lo-more-lesson > summary::before { content: '▸ '; color: var(--accent); }
.lo-more-lesson[open] > summary::before { content: '▾ '; }

/* §6 Cabecera de la lección DESPEJADA: en modo estudio la ficha no es un escaparate. La portada
   deja de ocupar una columna pegajosa con sombra y se vuelve una miniatura discreta sobre el título;
   los metadatos (autoría, cifras) pierden peso para que la lección sea el protagonista (§7). Ningún
   dato desaparece: portada, firma y cifras siguen ahí, sólo ceden jerarquía visual. */
body.lo-study .object-head { grid-template-columns: 1fr; gap: var(--space-3); margin-bottom: var(--space-6); }
body.lo-study .object-cover { position: static; max-width: 132px; margin: 0 auto var(--space-3); }
body.lo-study .object-cover img,
body.lo-study .object-cover .generated-cover { box-shadow: none; border: 1px solid var(--line); border-radius: var(--radius-sm); }
body.lo-study .author-badge, body.lo-study .detail-stats { font-size: .82rem; opacity: .85; }
body.lo-study .lo-objective { margin-top: var(--space-2); }
@media (min-width: 721px) {
    /* escritorio: la portada queda como ficha lateral pequeña, no como columna que compite con la lectura. */
    body.lo-study .object-head { grid-template-columns: 150px 1fr; align-items: start; }
    body.lo-study .object-cover { max-width: 150px; margin: 0; }
}

/* §14 / §16 Rendimiento: el secundario plegado no debe costar layout ni pintura hasta que el lector
   llega a él. content-visibility:auto salta el trabajo de render de cada bloque mientras no está en
   pantalla (y sus <img> ya traen loading="lazy", así que tampoco piden píxel). La carga de red diferida
   de los comentarios requeriría un GET propio (hoy sólo hay POST); se optó por no crear un endpoint nuevo
   para no ampliar el riesgo — el plegado + content-visibility ya cubre el objetivo de rendimiento. */
body.lo-study .lo-more-lesson .lo-reinforcements,
body.lo-study .lo-more-lesson .lo-ayuda,
body.lo-study .lo-more-lesson .lo-paths,
body.lo-study .lo-more-lesson .lo-universe,
body.lo-study .lo-more-lesson .lo-related,
body.lo-study .lo-more-lesson .lo-play {
    content-visibility: auto;
    contain-intrinsic-size: auto 480px;
}

/* Accesibilidad: sin animaciones si el usuario las prefiere así. */
@media (prefers-reduced-motion: reduce) { .lo-study-bar, .lsb-btn { transition: none; } }