/* ============================================================
   css/biblioteca/biblioteca.css · estilos de la Biblioteca Insight
   ────────────────────────────────────────────────────────────
   Salió del <style> de _layout.php en la Tanda 9 (2026-09): eran
   ~1.800 líneas que se volvían a descargar en CADA navegación,
   porque el HTML de la Biblioteca sale con no-store (hay sesión).
   Como archivo, el navegador lo pide una vez y lo reutiliza.

   Las variables (colores, tipografías, medidas) están en
   tokens.css, que se enlaza antes. Si un comentario de abajo cita
   una línea de _layout.php, es de antes de la mudanza.
   ============================================================ */

/* ============================================================
   PUENTE AL CONTRATO DE apuntes/ — control de usuario compartido
   ------------------------------------------------------------
   La Biblioteca reutiliza el control de usuario (avatar, menú de
   membresía) del sistema de apuntes: css/apuntes/componentes/
   usuario.css y admin-modal.css se enlazan TAL CUAL, sin copiar
   una línea. Ese CSS solo conoce el vocabulario del contrato
   (apuntes/docs/CONTRATO-TOKENS.md), así que estos alias son lo
   único que hace falta para que hable el idioma de la Biblioteca.

   La Biblioteca no tiene modo claro (`color-scheme: dark` fijo,
   sin toggle), así que <body> lleva `class="dark-mode"` a mano:
   activa las reglas `body.dark-mode …` que ya trae usuario.css
   —el mismo mecanismo con el que Premium y Neo pintan su oscuro—
   en vez de reinventar un tercer camino. */
:root {
  --font-body:      var(--font-cuerpo);
  --font-heading:   var(--font-titulo);

  --accent:         var(--gold);
  --accent-strong:  var(--gold-light);
  --accent-dim:     var(--gold-soft);
  --accent-rgb:     240,165,0;
  /* El segundo acento juega el mismo papel que el navy en Premium:
     estructura, no decora. Blue-bright ya cumple ese rol acá
     —el degradé de la barra de progreso lo combina con el gold—
     así que no es un color nuevo, es nombrar uno que ya existía. */
  --accent-2:        var(--blue-bright);
  --accent-2-strong: var(--blue-bright);
  --accent-2-rgb:    38,64,212;
  /* Texto encima del acento: el propio --bg, muy oscuro, da 10,7:1
     sobre el gold. Mismo criterio que --on-accent en Premium: no
     es el color de marca, es "lo que se lee arriba". */
  --on-accent:      var(--bg);
  --on-accent-2:    #ffffff;

  --bg2:            var(--bg-elevated);
  --card:           var(--bg-card);
  --card2:          var(--bg-card2);
  /* Faltaba, y usuario.css lo pide en cinco lugares (el valor del
     plan, la fecha de vencimiento, el mail del encabezado, el chip de
     cupo) más admin-modal.css en la descripción de cada panel. Sin
     esta línea esas declaraciones eran inválidas y el texto heredaba
     el color de su contenedor: el mismo defecto que --text2 en los
     apuntes, pero acá por omisión del puente. --text-soft es el
     secundario de la Biblioteca. */
  --text-2:         var(--text-soft);
  --gray:           var(--text-muted);
  --gray-light:     var(--text-dim);

  --radius-lg:      20px;
  --radius-xl:      28px;
  --shadow-lg:      var(--sombra-strong);
  --t:              .25s var(--ease-out);

  /* Semáforo del control de usuario. La Biblioteca no tiene otro
     lugar que use --estado-*, así que se eligen a propósito para
     verse bien SOLO sobre fondo oscuro (acá no hay modo claro que
     conciliar, a diferencia de Premium). --green ya es de la
     Biblioteca; aviso y crítico son nuevos, elegidos para no
     confundirse con el gold de marca. */
  --estado-ok:      var(--green);
  --estado-aviso:   #f97316;
  --estado-critico: #ef4444;
}

/* ============================================================
   RESET + BASE
============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  /* Compensa el navbar fijo cuando se hace scroll a un ancla */
  scroll-padding-top: calc(var(--navbar-h) + 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* El lugar de la barra de scroll queda reservado (Tanda 7): al abrir un
     modal el body pasa a overflow:hidden, la barra se va y antes toda la
     página saltaba 8 px a la derecha. */
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font-cuerpo);
  background: var(--bg);
  color: var(--text-soft);
  min-height: 100dvh; /* dvh: respeta barra de address en mobile */
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* Padding lateral para safe-area en landscape iPhone */
  padding-left:  var(--safe-left);
  padding-right: var(--safe-right);
}

a {
  text-decoration: none;
  color: inherit;
  /* Elimina delay de 300ms en touch */
  touch-action: manipulation;
}

img, svg { max-width: 100%; display: block; }
svg { flex-shrink: 0; }

button {
  font-family: inherit;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

/* Focus visible solo cuando se usa teclado */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ============================================================
   ACCESIBILIDAD — prefers-reduced-motion
============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   SCROLLBAR — desktop visible, mobile invisible
============================================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold), var(--blue-bright));
  border-radius: 999px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-light); }
@media (max-width: 768px) {
  ::-webkit-scrollbar { display: none; }
  * { scrollbar-width: none; }
}

/* Selección de texto con color de marca */
::selection { background: rgba(240,165,0,0.3); color: #fff; }

/* ============================================================
   BARRA DE PROGRESO
============================================================ */
#progress-bar {
  position: fixed;
  top: var(--safe-top); left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--blue-bright));
  z-index: 10000;
  border-radius: 0 2px 2px 0;
  will-change: width;
  transform: translateZ(0);
}

/* ============================================================
   CURSOR HALO (solo desktop, transform = GPU)
============================================================ */
#cursor-light {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,165,0,0.07) 0%, rgba(26,45,184,0.04) 50%, transparent 70%);
  transform: translate3d(-9999px, -9999px, 0);
  will-change: transform;
}
@media (hover: none), (pointer: coarse) {
  #cursor-light { display: none; }
}

/* ============================================================
   RED DINÁMICA DE FONDO (2026-10)
   ------------------------------------------------------------
   Un <canvas> fijo detrás del contenido, que dibuja y anima
   js/biblioteca/red.js. Ese archivo crea el lienzo y pone la clase
   .con-red en <html>; sin él —o con la red desactivada para una
   página ($red_fondo en _layout.php)— nada de este bloque aplica.

   Los dos archivos van juntos: el script comprueba que estas reglas
   hayan llegado antes de dejar el lienzo en la página.
   ============================================================ */

/* z-index -1: por encima del fondo de la página y por debajo de todo
   el contenido, sin tocar el apilado de nadie. No hace falta subir
   hero, main ni el pie de nivel, así que ningún modal ni barra pegada
   cambia de contexto.
   Arranca DEBAJO del navbar: así no queda detrás de su backdrop-filter,
   que tendría que recalcularse en cada cuadro. */
#red-fondo {
  position: fixed;
  left: 0;
  top: calc(var(--navbar-h) + var(--safe-top));
  width: 100%;
  height: calc(100vh - var(--navbar-h));
  height: calc(100lvh - var(--navbar-h));   /* alto estable en celular: no cambia al esconderse la barra del navegador */
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
#red-fondo.lista { opacity: 1; }
@media print { #red-fondo { display: none; } }

/* El hero tiene fondo opaco: taparía la red justo donde más aire hay.
   Su degradé pasa, idéntico, al fondo de la página —que queda debajo
   del lienzo— y el hero se vuelve transparente. --alto-hero lo mide
   red.js; el 60vh es solo por si todavía no lo midió. */
.con-red body {
  background:
    radial-gradient(60% 50% at 50% 25%, rgba(26,45,184,0.22) 0%, transparent 70%) top center / 100% var(--alto-hero, 60vh) no-repeat,
    linear-gradient(160deg, #0d1540 0%, #0a0c1e 55%, #080a18 100%) top center / 100% var(--alto-hero, 60vh) no-repeat,
    var(--bg);
}
.con-red .hero { background: none; }

/* Cajas translúcidas con texto, apoyadas directo sobre la página: se
   les pone el color de la página por debajo. Se ven igual que antes,
   pero la red ya no pasa por detrás de las letras. */
.con-red .contacto-box {
  background: linear-gradient(135deg, rgba(26,45,184,0.15), rgba(240,165,0,0.07)), var(--bg);
}
.con-red .biblio-acceso--libre { background: linear-gradient(rgba(255,255,255,0.03), rgba(255,255,255,0.03)), var(--bg); }
.con-red .biblio-acceso--ok    { background: linear-gradient(var(--green-soft), var(--green-soft)), var(--bg); }
.con-red .biblio-acceso--aviso { background: linear-gradient(rgba(240,165,0,0.06), rgba(240,165,0,0.06)), var(--bg); }
.con-red .def-box              { background: linear-gradient(rgba(240,165,0,0.05), rgba(240,165,0,0.05)), var(--bg); }
/* El aviso sobre el material (su CSS viaja con _aviso-material.php). */
.con-red .biblio-aviso         { background: linear-gradient(rgba(255,255,255,0.025), rgba(255,255,255,0.025)), var(--bg); }

/* ============================================================
   NAVBAR — versión robusta
============================================================ */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: calc(var(--navbar-h) + var(--safe-top));
  padding-top: var(--safe-top);
  padding-left:  max(20px, var(--safe-left));
  padding-right: max(20px, var(--safe-right));
  background: rgba(10,12,30,0.85);
  border-bottom: 1px solid rgba(26,45,184,0.4);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Degradación elegante si no soporta backdrop-filter (Android viejo) */
@supports not (backdrop-filter: blur(20px)) {
  .site-nav { background: rgba(10,12,30,0.98); }
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0; /* permite truncar */
  flex: 1 1 auto;
}

.nav-logo {
  height: 36px;
  width: auto;
  flex-shrink: 0;
}

/* Botón volver — mobile-friendly */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 8px 14px;
  min-height: 36px;
  font-size: 0.82rem;
  font-weight: 500;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  flex-shrink: 0;
}
.btn-back:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(240,165,0,0.08);
}
.btn-back:active {
  transform: scale(0.96);
  background: rgba(240,165,0,0.15);
}
.btn-back svg { width: 16px; height: 16px; }

.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nav-brand-wrap {
  text-align: right;
  line-height: 1.2;
  min-width: 0;
}
.nav-brand {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text);
  display: block;
}
.nav-sub {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--gold);
  letter-spacing: 0.06em;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 30vw;
}

/* Botón flotante de compartir en navbar */
.nav-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  color: var(--text-muted);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.nav-share:hover {
  color: var(--gold);
  border-color: rgba(240,165,0,0.4);
  background: rgba(240,165,0,0.08);
}
.nav-share:active { transform: scale(0.92); }
.nav-share svg { width: 17px; height: 17px; }

/* ── Botón ingresar / user status en navbar ────────────────── */
.nav-btn-ingresar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(240,165,0,0.10);
  border: 1px solid rgba(240,165,0,0.3);
  color: var(--gold);
  border-radius: 999px;
  padding: 7px 15px;
  min-height: 36px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  flex-shrink: 0;
  white-space: nowrap;
}
.nav-btn-ingresar:hover {
  background: rgba(240,165,0,0.18);
  border-color: rgba(240,165,0,0.55);
  transform: translateY(-1px);
}
.nav-btn-ingresar:active { transform: scale(0.96); }
.nav-btn-ingresar svg { width: 14px; height: 14px; }

/* .nav-user / .nav-user-nombre / .nav-btn-salir se retiraron: el
   estado de sesion ahora lo dibuja el control de usuario
   compartido (ver biblioteca-insight/_usuario.php), enlazado
   desde css/apuntes/componentes/usuario.css. */

/* "Ingresar" conserva la palabra también en celular (Tanda 5, 2026-09).
   Solo con el ícono, al lado del círculo de "Volver", los dos se leían
   como un par de flechas atrás/adelante, y este es el botón que lleva a
   la conversión. El lugar lo libera .nav-brand-wrap, que en 480 px o
   menos se oculta (ver "Mobile (480px)" más abajo). El control de
   usuario ya se recorta solo (usuario.css, @media max-width:600px). */

/* ============================================================
   MODAL COMPARTIR — propio (cierra con ×, click-afuera y Escape)
============================================================ */
.share-overlay {
  position: fixed; inset: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(6,8,20,0.74);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; pointer-events: none; visibility: hidden;
  /* visibility con retraso (Tanda 6): cerrado sale del orden de
     tabulación —antes sus cuatro controles se alcanzaban con Tab desde
     el navbar— sin cortar el fundido de salida. */
  transition: opacity 0.26s ease, visibility 0s linear 0.26s;
}
.share-overlay.active { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity 0.26s ease; }
.share-modal {
  position: relative; width: 100%; max-width: 380px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 30px 26px 24px; text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  transform: translateY(16px) scale(0.97);
  transition: transform 0.3s var(--ease-bounce);
}
.share-overlay.active .share-modal { transform: none; }
.share-modal::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #d4880f, var(--gold), #ffd270);
  border-radius: var(--radius) var(--radius) 0 0;
}
.share-close {
  position: absolute; top: 10px; right: 10px; width: 34px; height: 34px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 1.4rem; line-height: 1; background: transparent;
  transition: background 0.2s, color 0.2s;
}
.share-close:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.share-eyebrow {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 6px;
}
.share-modal-title {
  font-family: var(--font-titulo); font-size: 1.3rem; color: var(--text); margin-bottom: 18px;
}
.share-link { display: flex; gap: 8px; margin-bottom: 16px; }
.share-link input {
  flex: 1; min-width: 0; background: var(--bg-card2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0 12px; min-height: 42px;
  color: var(--text-soft); font-family: var(--font-mono); font-size: 0.76rem;
}
.share-copy {
  flex-shrink: 0; min-height: 42px; padding: 0 16px; border-radius: var(--radius-sm);
  background: rgba(240,165,0,0.12); border: 1px solid rgba(240,165,0,0.3);
  color: var(--gold); font-weight: 600; font-size: 0.82rem;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.share-copy:hover { background: var(--gold); color: #080a18; }
.share-copy.done { background: var(--green-soft); border-color: rgba(52,211,153,0.35); color: var(--green); }
.share-actions { display: flex; gap: 10px; margin-bottom: 20px; }
.share-act {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.85rem;
  color: #fff; text-decoration: none; transition: opacity 0.2s, transform 0.15s;
}
.share-act:hover { opacity: 0.9; transform: translateY(-1px); }
.share-act:active { transform: scale(0.97); }
.share-wa { background: #25D366; }
.share-ig { background: linear-gradient(135deg, #E1306C, #833AB4); }
.share-qr-wrap { border-top: 1px solid var(--border); padding-top: 18px; }
.share-qr-box {
  display: inline-block; padding: 10px; background: #fff; border-radius: 12px; line-height: 0;
}
.share-qr-box img, .share-qr-box canvas { display: block; }
.share-qr-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 10px; }
.share-feedback {
  font-size: 0.76rem; color: var(--green); min-height: 1em; margin-top: 10px;
  opacity: 0; transition: opacity 0.2s;
}
.share-feedback.show { opacity: 1; }
@media (max-width: 480px) {
  .share-modal { padding: 26px 20px 22px; }
}

/* ============================================================
   HERO
============================================================ */
.hero {
  background:
    radial-gradient(60% 50% at 50% 25%, rgba(26,45,184,0.22) 0%, transparent 70%),
    linear-gradient(160deg, #0d1540 0%, #0a0c1e 55%, #080a18 100%);
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding:
    calc(var(--navbar-h) + var(--safe-top) + 56px)
    24px
    64px;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px);
  animation: heroFadeIn 0.6s var(--ease-out) forwards 0.1s;
}

@keyframes heroFadeIn {
  to { opacity: 1; transform: translateY(0); }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(240,165,0,0.1);
  border: 1px solid rgba(240,165,0,0.35);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 999px;
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
}
.hero-badge::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--gold);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.hero h1 {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 1.08;
  color: var(--text);
  position: relative;
  z-index: 1;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
  /* Evita orphans en mobile */
  text-wrap: balance;
}
.hero h1 .acento {
  display: block;
  color: var(--gold);
  font-weight: 900;
}

.hero-sub {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 560px;
  margin: 14px auto 28px;
  line-height: 1.65;
  position: relative;
  z-index: 1;
  text-wrap: pretty;
}

/* Stats */
.hero-stats {
  display: flex;
  gap: clamp(20px, 5vw, 40px);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
}
.stat-item { text-align: center; min-width: 70px; }
.stat-number {
  font-family: var(--font-titulo);
  font-size: clamp(1.7rem, 4vw, 2rem);
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;   /* antes 0.62rem = 9,9 px (Tanda 7) */
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-top: 5px;
}

/* CTAs */
.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
}

.btn-primary,
.btn-secondary {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-cuerpo);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 999px;
  padding: 13px 26px;
  border: 1px solid transparent;
  transition: transform 0.2s var(--ease-out), box-shadow 0.25s, background 0.25s, border-color 0.25s;
  cursor: pointer;
  flex: 1 1 auto;
  white-space: nowrap;
}

.btn-primary {
  background: var(--gold);
  color: #080a18;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(240,165,0,0.28);
}
.btn-primary:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(240,165,0,0.45);
}
.btn-primary:active { transform: scale(0.97); }

.btn-secondary {
  background: transparent;
  color: var(--gold-light);
  border-color: rgba(240,165,0,0.4);
}
.btn-secondary:hover {
  background: rgba(240,165,0,0.08);
  border-color: rgba(240,165,0,0.7);
  transform: translateY(-2px);
}
.btn-secondary:active { transform: scale(0.97); }

/* ============================================================
   CONTENEDOR PRINCIPAL
============================================================ */
.content-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

/* ── Aviso de acceso de las secciones (2026-09) ─────────────────────
   Una línea tranquila arriba de la lista que dice qué se abre y qué
   no, antes de que el alumno toque nada. Nació en Parciales y Finales
   (.pf-acceso) y se trajo acá para que esa sección y las de apuntes
   compartan una sola regla. Lo dibuja biblio_banner_acceso() en
   _vista.php; Parciales arma su propio texto, porque ahí lo que se
   restringe es la descarga.

   Tres tonos: --libre (sin cuenta, neutro), --ok (acceso activo,
   verde) y --aviso (membresía vencida, dorado). */
.biblio-acceso {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.5;
  padding: 11px 16px; border-radius: var(--radius-sm);
  margin: 0 0 22px;
}
.biblio-acceso-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: currentColor;
}
.biblio-acceso-txt { flex: 1 1 220px; min-width: 0; }
.biblio-acceso strong { color: var(--text-soft); font-weight: 600; }
.biblio-acceso a {
  color: var(--gold); text-decoration: underline; text-underline-offset: 2px;
  margin-left: auto; white-space: nowrap;
}
.biblio-acceso--libre {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.biblio-acceso--ok {
  background: var(--green-soft);
  border: 1px solid rgba(52,211,153,0.25);
  color: var(--green);
}
.biblio-acceso--ok a { color: var(--green); }
.biblio-acceso--aviso {
  background: rgba(240,165,0,0.06);
  border: 1px solid rgba(240,165,0,0.28);
  color: var(--gold-light);
}

/* Info hint box */
.def-box {
  border-left: 3px solid var(--gold);
  background: rgba(240,165,0,0.05);
  padding: 14px 18px;
  border-radius: 0 12px 12px 0;
  margin-bottom: 28px;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text-soft);
  line-height: 1.55;
}
/* Stickers / emojis decorativos dentro de def-box — tamaño controlado */
.def-box img,
.def-box .sticker,
.def-box img.sticker {
  height: 56px;
  width: auto;
  max-width: 56px;
  flex-shrink: 0;
  object-fit: contain;
  /* Asegura que no expanda el flex container */
  align-self: center;
}
.def-box > span:first-child {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .def-box img,
  .def-box .sticker,
  .def-box img.sticker { height: 44px; max-width: 44px; }
  .def-box > span:first-child { font-size: 1.2rem; }
}

/* ============================================================
   SECCIÓN LABEL / TÍTULO
============================================================ */
.section-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--gold);
  margin-bottom: 8px;
}
.section-title {
  font-family: var(--font-titulo);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 900;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.section-hint {
  font-size: 0.95rem;
  color: var(--text-muted);
  max-width: 640px;
  line-height: 1.6;
  margin-bottom: 8px;
  border-left: 3px solid rgba(240,165,0,0.35);
  padding-left: 14px;
}

/* Clave de acceso de la portada: adelanta el codigo de color de los
   apuntes antes de que el visitante elija seccion. Ver index.php. */
.folder-clave {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  margin: 14px 0 26px;
  padding-left: 17px;          /* alinea con .section-hint (3px borde + 14px) */
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.folder-clave-par {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ============================================================
   GRILLA DE CARPETAS (portada)
============================================================ */
.folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: 16px;
  margin-top: 20px;
}

.folder-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 200px;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.25s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.folder-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(240,165,0,0.05), transparent 50%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.folder-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.folder-card:hover {
  border-color: rgba(240,165,0,0.4);
  box-shadow: 0 12px 40px rgba(26,45,184,0.2);
  transform: translateY(-4px);
}
.folder-card:hover::before,
.folder-card:hover::after { opacity: 1; }
.folder-card:hover::after { transform: scaleX(1); }
.folder-card:active { transform: translateY(-2px) scale(0.99); }

/* Icono de seccion (Tanda visual, 2026-09) — reemplaza al emoji.
   Circulo sin relleno con anillo y trazo en --gold PLENO: el mismo
   dorado del overline "Biblioteca por niveles", para que la conexion se
   lea directa. El azul de marca no sirve aca: sobre --bg-card da 1,23:1
   y el icono desaparece; --gold da 8,9:1.
   El SVG (Lucide, trazo 1,5) hereda el color por currentColor. */
.folder-icono {
  width: 52px; height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  flex-shrink: 0;
}
.folder-icono-svg {
  width: 26px; height: 26px;
  display: block;
}
.folder-name {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text);
  letter-spacing: -0.005em;
}
.folder-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.55;
  flex: 1;
}
.folder-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.folder-count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: rgba(240,165,0,0.1);
  color: var(--gold);
  border: 1px solid rgba(240,165,0,0.2);
  padding: 4px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.folder-arrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--gold);          /* SIEMPRE visible (no depende de hover) */
  transition: transform 0.2s var(--ease-out);
  white-space: nowrap;
}
.folder-card:hover .folder-arrow {
  transform: translateX(4px);
}

/* ============================================================
   GRILLA DE CARDS DE APUNTES (Secundaria / Pack / Universidad)
============================================================ */
.apuntes-grid-simple {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 14px;
  margin-top: 20px;
}

.apunte-card-simple {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 130px;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.25s var(--ease-out);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.apunte-card-simple::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s var(--ease-out);
}
.apunte-card-simple:hover {
  border-color: rgba(240,165,0,0.35);
  box-shadow: var(--sombra);
  transform: translateY(-3px);
}
.apunte-card-simple:hover::before { transform: scaleY(1); }
.apunte-card-simple:active { transform: translateY(-1px) scale(0.99); }

/* Estado "visitado" — feedback persistente para el estudiante */
.apunte-card-simple.visited {
  border-color: rgba(52,211,153,0.25);
  background: linear-gradient(135deg, var(--bg-card), rgba(52,211,153,0.03));
}
.apunte-card-simple.visited::before { background: var(--green); transform: scaleY(1); opacity: 0.6; }

.card-icon-box {
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  background: rgba(240,165,0,0.08);
  border: 1px solid rgba(240,165,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}

.card-nombre {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--text);
  line-height: 1.35;
  flex: 1;
  letter-spacing: -0.005em;
  /* Permite que palabras largas se rompan en mobile */
  overflow-wrap: anywhere;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.card-action {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  transition: transform 0.3s var(--ease-out);
  white-space: nowrap;
  /* Visible siempre — clave para mobile UX */
  opacity: 0.7;
}
.apunte-card-simple:hover .card-action {
  opacity: 1;
  transform: translateX(3px);
}

/* ── Tarjeta simple DENTRO de un acordeón (2026-09) ─────────────────
   Universidad usa esta misma tarjeta, la de Secundaria, dentro de sus
   acordeones: tarjeta entera clickeable, barra dorada y subida de 3px.
   Antes usaba una fila propia (.apunte-card) en la que solo el botón
   "Abrir" abría el apunte. Esa fila se retiró en la Tanda 5: Modelos de
   Exámenes e IGCSE también usan esta tarjeta.

   Dos ajustes de CONTEXTO, no de diseño:

   · Fondo --bg-card2. En Secundaria la tarjeta (#0e1030) se apoya sobre
     la página (#0a0c1e) y queda un escalón más clara. Dentro de un
     acordeón el entorno ya es #0e1030: con el mismo color la tarjeta
     quedaba igual o más oscura que lo que la rodea. --bg-card2 repone
     ese escalón, y es el color que la fila de Universidad ya usaba.
   · Sin margin-top en la grilla. En Secundaria esos 20px la separan del
     título de la sección; dentro de un acordeón ese aire ya lo da el
     padding del cuerpo.

   Todo lo demás —tamaños, padding, hover, visitados, mobile y vista
   Lista— sale de las reglas de arriba, sin copia. */
.accordion .apuntes-grid-simple { margin-top: 0; }
.accordion .apunte-card-simple { background: var(--bg-card2); }
.accordion .apunte-card-simple.visited {
  background: linear-gradient(135deg, var(--bg-card2), rgba(52,211,153,0.03));
}

/* Badge gratis / bloqueado */
.badge {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-free {
  background: var(--green-soft);
  color: var(--green);
  border: 1px solid rgba(52,211,153,0.25);
}
.badge-locked {
  background: rgba(255,255,255,0.05);
  color: var(--text-muted);
  border: 1px solid rgba(255,255,255,0.1);
}

/* Card bloqueada */
.apunte-card-simple.locked { opacity: 0.78; }
.apunte-card-simple.locked:hover {
  border-color: rgba(255,255,255,0.2);
  opacity: 0.95;
}
.card-icon-box.locked {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
  color: var(--text-muted);
}

/* ============================================================
   ACORDEONES (Universidad / Exámenes)
============================================================ */
.accordion {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.accordion:hover {
  border-color: rgba(240,165,0,0.3);
  box-shadow: 0 4px 24px rgba(26,45,184,0.12);
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  cursor: pointer;
  user-select: none;
  min-height: 64px; /* tap target seguro */
  transition: background 0.2s;
}
.accordion-header:hover { background: rgba(240,165,0,0.03); }
.accordion-header:active { background: rgba(240,165,0,0.06); }

.accordion-header-left {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  flex: 1 1 auto;
}
.accordion-icon {
  width: 42px; height: 42px;
  background: rgba(240,165,0,0.1);
  border: 1px solid rgba(240,165,0,0.22);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;        /* reducido para siglas de hasta 6 letras */
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
  flex-shrink: 0;
  font-family: var(--font-mono);  /* monospace para siglas, más legible */
  overflow: hidden;               /* por las dudas */
}
/* Sigla de materia (Tanda 7): "AM" arriba, "III" abajo, en dorado. En un
   renglón "MAT III" no entraba en el recuadro a un tamaño legible;
   apilada entra a 10,5 px, también en el de 38 px del celular, y todas
   las materias quedan con la misma forma. Ver biblio_icono_materia(). */
.accordion-icon.is-sigla {
  font-size: 0.66rem;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--gold);
}
.accordion-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.accordion-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.accordion-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  /* Permite wrap si título es largo */
  overflow-wrap: anywhere;
}

.accordion-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.accordion-count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 4px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.accordion-chevron {
  width: 22px; height: 22px;
  color: var(--text-muted);
  transition: transform 0.35s var(--ease-out), color 0.25s;
}
.accordion.open > .accordion-header .accordion-chevron {
  transform: rotate(180deg);
  color: var(--gold);
}

/* Una sola velocidad, animando la altura REAL (Tanda 7). Antes se animaba
   max-height de 0 a un techo fijo (12000 px acá, 5000 en las unidades):
   un acordeón chico saltaba abierto y al cerrar se quedaba quieto hasta
   colapsar de golpe, así que la velocidad dependía de cuánto contenido
   tuviera. Ahora la fila de la grilla va de 0fr a 1fr —su alto
   verdadero— y el padding del interior acompaña para que cerrado mida 0.
   Navegadores sin transición de grid-template-rows abren sin animar. */
.accordion-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.4s var(--ease-out), visibility 0s;
}
.accordion-body > .accordion-body-inner {
  min-height: 0;
  overflow: hidden;
  transition: padding 0.4s var(--ease-out);
}
.accordion-body-inner { padding: 6px 18px 20px; }
/* Cerrado, también fuera del orden de tabulación y de los lectores de
   pantalla (Tanda 6): con max-height 0 solo se ocultaba a la vista, y
   en Universidad los 124 enlaces de los acordeones cerrados seguían
   recibiendo Tab. visibility cambia al TERMINAR el cierre (retraso =
   duración) y al EMPEZAR la apertura (sin esta regla, la transición es
   solo de max-height), así que la animación queda igual. */
.accordion:not(.open) > .accordion-body {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.4s var(--ease-out), visibility 0s linear 0.4s;
}
.accordion:not(.open) > .accordion-body > .accordion-body-inner { padding-top: 0; padding-bottom: 0; }

/* Sub-acordeones (AM1) */
.sub-accordion {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color 0.3s;
}
.sub-accordion:last-child { margin-bottom: 0; }
.sub-accordion:hover { border-color: rgba(240,165,0,0.22); }

.sub-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  min-height: 52px;
  transition: background 0.2s;
}
.sub-accordion-header:hover { background: rgba(240,165,0,0.04); }
.sub-accordion-header:active { background: rgba(240,165,0,0.07); }

/* Foco de teclado visible en las cabeceras (Tanda 6). Hacia adentro:
   .accordion recorta con overflow:hidden y un contorno hacia afuera
   quedaría cortado. */
.accordion-header:focus-visible,
.sub-accordion-header:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

.sub-accordion-left {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  flex: 1 1 auto;
}
.sub-accordion-badge {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--gold);
  background: rgba(240,165,0,0.1);
  border: 1px solid rgba(240,165,0,0.2);
  border-radius: 8px;
  /* Ancho FIJO y no min-width (Tanda 7): con min-width, "f(x)", "lim" y
     "∂z/∂t" daban badges de distinto ancho y los títulos de las unidades
     arrancaban en columnas distintas (69,6 / 75,6 / 81,2 px). */
  padding: 4px 4px;
  width: 56px;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
  flex-shrink: 0;
  font-weight: 600;
}
.sub-accordion-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

.sub-accordion-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.sub-accordion-count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.sub-accordion-chevron {
  width: 17px; height: 17px;
  color: var(--text-muted);
  transition: transform 0.3s var(--ease-out), color 0.25s;
}
.sub-accordion.open > .sub-accordion-header .sub-accordion-chevron {
  transform: rotate(180deg);
  color: var(--gold);
}

.sub-accordion-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.4s var(--ease-out), visibility 0s;
}
.sub-accordion-body > .sub-accordion-body-inner {
  min-height: 0;
  overflow: hidden;
  transition: padding 0.4s var(--ease-out);
}
.sub-accordion-body-inner { padding: 6px 12px 12px; }
.sub-accordion:not(.open) > .sub-accordion-body {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.4s var(--ease-out), visibility 0s linear 0.4s;
}
.sub-accordion:not(.open) > .sub-accordion-body > .sub-accordion-body-inner { padding-top: 0; padding-bottom: 0; }

/* ============================================================
   EMPTY STATE
============================================================ */
.empty-state {
  text-align: center;
  padding: 60px 24px;
}
.empty-state-icon {
  font-size: 3rem;
  margin-bottom: 14px;
  opacity: 0.6;
}
.empty-state-text {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

/* ============================================================
   GATAS — Sistema de stickers y burbujas didácticas
   Clases: .gata-msg .izquierda / .derecha
           .sticker-gata
           .gata-bubble
           .gata-nombre
============================================================ */

/* Contenedor del mensaje (sticker + burbuja) */
.gata-msg {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin: 28px 0;
  position: relative;
  z-index: 2; /* por encima de otros elementos decorativos */
}
.gata-msg.derecha {
  flex-direction: row-reverse;
}

/* Sticker — tamaño controlado, nunca se agranda */
.sticker-gata {
  width:  80px;
  height: 80px;
  object-fit: contain;
  flex-shrink: 0;
  /* Leve sombra para que "floten" sobre el fondo */
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
  transition: transform 0.35s var(--ease-bounce, cubic-bezier(0.34,1.56,0.64,1));
  position: relative;
  z-index: 2;
}
.gata-msg:hover .sticker-gata {
  transform: translateY(-5px) scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
  .sticker-gata { transition: none; }
  .gata-msg:hover .sticker-gata { transform: none; }
}

/* Burbuja de diálogo */
.gata-bubble {
  background: var(--bg-card2, #141840);
  border: 1px solid rgba(240,165,0,0.2);
  border-radius: 16px;
  padding: 14px 18px;
  max-width: 520px;
  position: relative;
  box-shadow: 0 4px 20px rgba(0,0,0,0.22);
  flex: 1 1 auto;
  min-width: 0;
}

/* Cola de la burbuja — izquierda (gata al costado izq) */
.gata-msg.izquierda .gata-bubble::before {
  content: '';
  position: absolute;
  bottom: 16px;
  left: -9px;
  width: 0; height: 0;
  border-style: solid;
  border-width: 8px 10px 8px 0;
  border-color: transparent rgba(240,165,0,0.2) transparent transparent;
}
.gata-msg.izquierda .gata-bubble::after {
  content: '';
  position: absolute;
  bottom: 17px;
  left: -7px;
  width: 0; height: 0;
  border-style: solid;
  border-width: 7px 9px 7px 0;
  border-color: transparent var(--bg-card2, #141840) transparent transparent;
}

/* Cola de la burbuja — derecha (gata al costado der) */
.gata-msg.derecha .gata-bubble::before {
  content: '';
  position: absolute;
  bottom: 16px;
  right: -9px;
  width: 0; height: 0;
  border-style: solid;
  border-width: 8px 0 8px 10px;
  border-color: transparent transparent transparent rgba(240,165,0,0.2);
}
.gata-msg.derecha .gata-bubble::after {
  content: '';
  position: absolute;
  bottom: 17px;
  right: -7px;
  width: 0; height: 0;
  border-style: solid;
  border-width: 7px 0 7px 9px;
  border-color: transparent transparent transparent var(--bg-card2, #141840);
}

/* Nombre de la gata dentro de la burbuja */
.gata-nombre {
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold, #F0A500);
  margin-bottom: 6px;
  font-weight: 600;
}

/* Texto de la burbuja */
.gata-bubble p:not(.gata-nombre) {
  font-size: 0.93rem;
  color: var(--text-soft, #c8c8da);
  line-height: 1.6;
  margin: 0;
}
.gata-bubble p + p { margin-top: 6px; }

/* strong dentro de burbujas */
.gata-bubble strong { color: var(--text, #fff); }

/* Tipografía especial "Elvira" — burbuja con borde rojo suave */
.gata-msg.elvira .gata-bubble {
  border-color: rgba(248, 113, 113, 0.28);
  background: linear-gradient(135deg, var(--bg-card2, #141840), rgba(248,113,113,0.04));
}
.gata-msg.elvira .gata-nombre { color: #f87171; }
.gata-msg.elvira .gata-bubble::before {
  border-color: transparent rgba(248,113,113,0.28) transparent transparent;
}
.gata-msg.elvira.derecha .gata-bubble::before {
  border-color: transparent transparent transparent rgba(248,113,113,0.28);
}

/* ── Responsive gatas ─────────────────────────────────────── */
@media (max-width: 768px) {
  .sticker-gata { width: 64px; height: 64px; }
  .gata-bubble  { padding: 12px 15px; }
  .gata-bubble p:not(.gata-nombre) { font-size: 0.9rem; }
}
@media (max-width: 480px) {
  .gata-msg     { gap: 10px; margin: 20px 0; }
  .sticker-gata { width: 54px; height: 54px; }
  .gata-bubble  { padding: 10px 13px; border-radius: 13px; }
  .gata-bubble p:not(.gata-nombre) { font-size: 0.87rem; }
  /* En pantallas muy chicas, las gatas siempre a la izquierda */
  .gata-msg.derecha { flex-direction: row; }
  .gata-msg.derecha .gata-bubble::before {
    right: auto; left: -9px;
    border-width: 8px 10px 8px 0;
    border-color: transparent rgba(240,165,0,0.2) transparent transparent;
  }
  .gata-msg.derecha .gata-bubble::after {
    right: auto; left: -7px;
    border-width: 7px 9px 7px 0;
    border-color: transparent var(--bg-card2, #141840) transparent transparent;
  }
  .gata-msg.elvira.derecha .gata-bubble::before {
    border-color: transparent rgba(248,113,113,0.28) transparent transparent;
  }
}

/* ============================================================
   MODAL (Pack bloqueado)
============================================================ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  padding:
    max(20px, var(--safe-top))
    20px
    max(20px, var(--safe-bottom));
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }

@supports not (backdrop-filter: blur(8px)) {
  .modal-overlay { background: rgba(0,0,0,0.9); }
}

.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 26px 28px;
  max-width: 420px;
  width: 100%;
  max-height: calc(100dvh - 60px);
  overflow-y: auto;
  text-align: center;
  position: relative;
  transform: scale(0.95) translateY(20px);
  transition: transform 0.3s var(--ease-out);
  box-shadow: var(--sombra-strong);
}
.modal-overlay.active .modal { transform: scale(1) translateY(0); }

.modal-close {
  position: absolute;
  top: 14px; right: 16px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-muted);
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.modal-close:hover { background: rgba(255,255,255,0.14); color: var(--text); }
.modal-close:active { transform: scale(0.92); }

.modal-icon {
  font-size: 2.4rem;
  margin-bottom: 14px;
}
.modal h2 {
  font-family: var(--font-titulo);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.modal-text {
  font-size: 0.93rem;
  color: var(--text-soft);
  line-height: 1.7;
  margin-bottom: 22px;
}
.modal-topic {
  font-weight: 700;
  color: var(--gold);
}
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: #25D366;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 24px;
  min-height: 50px;
  border-radius: 999px;
  transition: background 0.25s, transform 0.15s, box-shadow 0.25s;
  box-shadow: 0 4px 20px rgba(37,211,102,0.3);
}
.btn-whatsapp:hover { background: #1ebe5a; transform: translateY(-2px); }
.btn-whatsapp:active { transform: scale(0.97); }
.btn-whatsapp svg { width: 20px; height: 20px; }

.modal-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 12px;
}

/* ============================================================
   CONTACTO
============================================================ */
.contacto {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 20px;
}
.contacto-box {
  background: linear-gradient(135deg, rgba(26,45,184,0.15), rgba(240,165,0,0.07));
  border: 1px solid rgba(240,165,0,0.15);
  border-radius: var(--radius);
  padding: 26px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.contacto-text h3 {
  font-family: var(--font-titulo);
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.contacto-text p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.contacto-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.contacto-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 18px;
  min-height: 44px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 0.25s, color 0.25s, transform 0.15s, border-color 0.25s;
  border: 1px solid transparent;
}
.contacto-btn:active { transform: scale(0.96); }
.btn-ig  { background: rgba(225,48,108,0.1); color: #E1306C; border-color: rgba(225,48,108,0.2); }
.btn-ig:hover  { background: #E1306C; color: #fff; }
.btn-wa  { background: rgba(37,211,102,0.1); color: #25D366; border-color: rgba(37,211,102,0.2); }
.btn-wa:hover  { background: #25D366; color: #fff; }
.btn-web { background: rgba(240,165,0,0.1);  color: var(--gold); border-color: rgba(240,165,0,0.2); }
.btn-web:hover { background: var(--gold); color: #080a18; }

/* ============================================================
   FOOTER
============================================================ */
footer {
  background: #060812;
  border-top: 1px solid rgba(255,255,255,0.05);
  padding:
    2rem
    1.5rem
    calc(2rem + var(--safe-bottom));
  text-align: center;
  color: var(--text-soft);
}
.footer-brand {
  font-family: var(--font-titulo);
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 4px;
}
.footer-brand span { color: var(--gold); }
.footer-sub {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 1.2rem;
}
.footer-links {
  display: flex;
  justify-content: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  font-size: 0.88rem;
}
.footer-links a {
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--gold); }
.fl-ig:hover { color: #E1306C !important; }
.fl-wa:hover { color: #25D366 !important; }

/* ============================================================
   BOTÓN VOLVER ARRIBA — flotante mobile-friendly
============================================================ */
#btn-arriba {
  position: fixed;
  bottom: calc(1.5rem + var(--safe-bottom));
  right:  calc(1.5rem + var(--safe-right));
  z-index: 500;
  width: 48px; height: 48px;
  background: var(--blue);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(26,45,184,0.45);
  /* Entra y SALE igual (Tanda 7). Antes alternaba display none/flex con una
     animación solo de entrada: aparecía suave y desaparecía de golpe. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
  transition: background 0.2s, transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out), visibility 0s linear 0.3s;
}
#btn-arriba.visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: background 0.2s, transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out), visibility 0s;
}
#btn-arriba:hover { background: var(--blue-bright); transform: translateY(-3px); }
#btn-arriba:active { transform: scale(0.92); }

/* ============================================================
   RESPONSIVE — 3 breakpoints reales
============================================================ */

/* Tablets y portátiles chicos */
@media (max-width: 1024px) {
  .content-wrapper { padding: 36px 22px 70px; }
  .hero { min-height: 46vh; }
}

/* Mobile grande (768px) */
@media (max-width: 768px) {
  .hero {
    padding:
      calc(var(--navbar-h) + var(--safe-top) + 40px)
      20px
      48px;
    min-height: auto;
  }
  .hero h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
  .hero-sub { font-size: 0.95rem; margin: 12px auto 22px; }
  .hero-stats { gap: 24px; margin-bottom: 26px; }
  .stat-number { font-size: 1.7rem; }
  .content-wrapper { padding: 32px 18px 70px; }
  .folder-card { padding: 22px 20px; min-height: 180px; }
  .apunte-card-simple { padding: 18px 16px; }
  .accordion-header { padding: 16px 18px; min-height: 60px; }
  .accordion-body-inner { padding: 4px 16px 18px; }
  .sub-accordion-header { padding: 11px 14px; }
}

/* Mobile (480px) */
@media (max-width: 480px) {
  .site-nav { gap: 8px; }
  .nav-logo { height: 32px; }
  /* "Profe Seba / Nivel …" se va en celular (Tanda 5): no se toca,
     ocupaba un tercio del navbar y el hero repite el nivel justo abajo.
     Ese ancho es el que deja a "Ingresar" con su palabra. */
  .nav-brand-wrap { display: none; }
  .nav-share { width: 40px; height: 40px; }
  /* "Volver" queda como círculo con flecha e "Ingresar" como píldora
     dorada con texto: dos formas distintas para dos cosas distintas. */
  .btn-back { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .btn-back span { display: none; }

  .hero {
    padding:
      calc(var(--navbar-h) + var(--safe-top) + 30px)
      18px
      42px;
  }
  .hero-badge {
    font-size: 0.75rem;
    padding: 5px 14px;
    margin-bottom: 18px;
  }
  .hero h1 { font-size: 1.9rem; line-height: 1.1; }
  .hero-sub { font-size: 0.9rem; max-width: 90%; margin: 10px auto 20px; }
  .hero-stats {
    gap: 14px;
    margin-bottom: 22px;
    /* Stats en una sola línea siempre */
    flex-wrap: nowrap;
    justify-content: space-around;
  }
  /* max-content y no 0 (Tanda 7): con 0 cada ítem medía lo que su número
     (~50 px) y "MATERIAS" se salía 7 px hacia la derecha, descentrada. */
  .stat-item { min-width: max-content; flex: 1 1 0; }
  .stat-number { font-size: 1.5rem; }
  .stat-label { font-size: 0.75rem; }
  .hero-ctas { flex-direction: column; width: 100%; max-width: 320px; gap: 10px; }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-secondary { width: 100%; min-height: 50px; }

  .content-wrapper { padding: 28px 16px 60px; }
  .section-title { font-size: 1.5rem; }
  .def-box { padding: 12px 14px; font-size: 0.9rem; gap: 10px; }

  .folder-grid { grid-template-columns: 1fr; gap: 12px; }
  .folder-card { padding: 20px 18px; min-height: auto; }
  .folder-icono { width: 46px; height: 46px; }
  .folder-icono-svg { width: 23px; height: 23px; }
  .folder-name { font-size: 1.08rem; }

  .apuntes-grid-simple { grid-template-columns: 1fr; gap: 10px; }
  .apunte-card-simple { padding: 16px 14px; min-height: auto; }

  /* Acordeón mobile — más compacto */
  .accordion-header { padding: 14px 14px; gap: 8px; }
  /* El 0.55rem NO es un descuido de legibilidad: es el recuadro de sigla
     de 38px, que tiene que aceptar "MAT"/"III" apilado. Ver .accordion-icon
     y .is-sigla arriba, exentos del piso de 12px por la misma razon. */
  .accordion-icon { width: 38px; height: 38px; font-size: 0.55rem; font-weight: 700; }
  .accordion-title { font-size: 0.98rem; }
  .accordion-label { font-size: 0.75rem; }
  .accordion-right { gap: 8px; }
  .accordion-count { font-size: 0.75rem; padding: 3px 8px; }
  .accordion-chevron { width: 20px; height: 20px; }
  .accordion-body-inner { padding: 4px 12px 14px; }

  .sub-accordion-header { padding: 10px 12px; }
  .sub-accordion-badge { font-size: 0.75rem; width: 48px; padding: 3px 3px; }
  .sub-accordion-title { font-size: 0.88rem; }
  .sub-accordion-body-inner { padding: 4px 8px 10px; }

  /* Modal mobile */
  .modal { padding: 28px 20px 24px; border-radius: 18px; }
  .modal-icon { font-size: 2.2rem; }
  .modal h2 { font-size: 1.3rem; }
  .modal-text { font-size: 0.88rem; }

  /* Contacto */
  .contacto { padding: 0 18px 16px; }
  .contacto-box {
    flex-direction: column;
    text-align: center;
    padding: 22px 20px;
    gap: 16px;
  }
  .contacto-links { justify-content: center; width: 100%; }
  .contacto-btn { flex: 1 1 auto; justify-content: center; min-width: 110px; }

  /* Footer */
  footer { padding: 1.8rem 1.2rem calc(1.8rem + var(--safe-bottom)); }
  .footer-links { gap: 1rem; font-size: 0.82rem; }

  #btn-arriba {
    width: 44px; height: 44px;
    bottom: calc(1.2rem + var(--safe-bottom));
    right:  calc(1.2rem + var(--safe-right));
  }
}

/* Mobile muy chico (360px o menos — iPhone SE 1ra gen, etc) */
@media (max-width: 360px) {
  .hero h1 { font-size: 1.75rem; }
  .stat-number { font-size: 1.3rem; }
  .stat-label { font-size: 0.75rem; }
}

/* ── Pantallas táctiles: 44 px para tocar (Tanda 5, 2026-09) ──────────
   El encabezado de este archivo promete tap-targets de 44 px; lo
   cumplían los buscadores y los acordeones, no los botones (medido en
   375 px: Volver 42×36, Ingresar 46×36, Compartir 36×36, links del pie
   29 de alto). Va por (pointer: coarse) y no por ancho: una tablet
   también se usa con el dedo, y una ventana angosta de PC, con mouse. */
@media (pointer: coarse) {
  .btn-back               { min-height: 44px; }
  .nav-btn-ingresar       { min-height: 44px; }
  .nav-share              { width: 44px; height: 44px; }
  .nav-left > a:first-child { display: inline-flex; align-items: center; min-height: 44px; }
  .site-nav .usuario-btn  { min-height: 44px; min-width: 44px; justify-content: center; }
  .footer-links a         { min-height: 44px; }
  /* El enlace del aviso de acceso es texto corrido: se agranda el área
     de toque sin mover nada alrededor. */
  .biblio-acceso a        { padding: 12px 0; margin-top: -12px; margin-bottom: -12px; }
}
@media (pointer: coarse) and (max-width: 480px) {
  .btn-back { width: 44px; height: 44px; }
}

/* Landscape mobile — evita que el hero ocupe toda la pantalla */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: auto; padding-top: calc(var(--navbar-h) + 20px); padding-bottom: 30px; }
  .hero-stats { margin-bottom: 18px; }
}