/* TrayectorIAcademy — estilos compartidos de la app (post-login) */
:root{
  --navy:#0b2545;
  --navy-2:#13315c;
  --teal:#0f766e;
  --gold:#c9962c;
  --gold-light:#e8c874;
  --bg:#f5f6f9;
  --ink:#0b1220;
  --muted:#5b6472;
  --card:#ffffff;
  --border:#e4e7ec;
  --radius:16px;
  --danger:#b3261e;
  --danger-bg:#ffeded;
  --ok:#0f766e;
  --ok-bg:#e8f5f3;
  --shadow:0 2px 6px rgba(11,37,69,0.06), 0 8px 24px rgba(11,37,69,0.06);
  --shadow-hover:0 4px 10px rgba(11,37,69,0.08), 0 14px 32px rgba(11,37,69,0.10);
  --accent-blue:#4fb4ff;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
.wrap{max-width:960px;margin:0 auto;padding:0 24px;}
.wrap-narrow{max-width:560px;margin:0 auto;padding:0 24px;}
/* ---------- Barra superior ---------- */
header.appbar{
  background:linear-gradient(120deg,var(--navy) 0%,var(--navy-2) 100%);
  color:#fff;padding:8px 0;position:sticky;top:0;z-index:10;
  box-shadow:0 2px 12px rgba(11,37,69,0.18);
}
header.appbar .wrap{display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:9px;color:#fff;font-weight:800;font-size:17px;
  text-decoration:none;letter-spacing:.2px;}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 4px rgba(201,150,44,0.18);}
/* ---------- Marca: icono + nombre real (no imagen de bloque) ---------- */
.brandmark{display:flex;align-items:center;gap:11px;text-decoration:none;}
.brandmark img{height:46px;width:46px;border-radius:50%;display:block;flex-shrink:0;}
.brandmark .wordmark{display:flex;flex-direction:column;line-height:1.15;}
.brandmark .title{font-size:18px;font-weight:800;color:#fff;letter-spacing:.2px;white-space:nowrap;}
.brandmark .title .accent{color:var(--accent-blue);}
.brandmark .tagline{font-size:9px;letter-spacing:.9px;text-transform:uppercase;color:#9fb0c7;
  margin-top:2px;white-space:nowrap;}
.brandmark .tagline .accent{color:var(--accent-blue);}
.brandmark.big .title{font-size:26px;}
.brandmark.big img{height:64px;width:64px;}
.brandmark.big .tagline{font-size:11px;}
.brandmark.on-light .title{color:var(--navy);}
.brandmark.on-light .tagline{color:var(--muted);}
.appbar nav{display:flex;align-items:center;}
.appbar nav a{color:#c6d0e0;text-decoration:none;font-size:14px;font-weight:600;margin-left:22px;
  transition:color .15s;}
.appbar nav a:hover{color:#fff;}
.appbar .logout{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.25);color:#fff;
  padding:8px 16px;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;margin-left:22px;
  font-family:inherit;transition:background .15s;}
.appbar .logout:hover{background:rgba(255,255,255,.14);}
.brand img{height:58px;width:auto;display:block;border-radius:8px;}
/* ---------- Portada de acceso (login.html) ---------- */
.cover-hero{text-align:center;color:#fff;padding:40px 0;}
.cover-hero img.logo-grande{width:180px;height:auto;border-radius:20px;margin-bottom:24px;
  box-shadow:0 12px 40px rgba(0,0,0,0.35);}
.cover-hero h1{color:#fff;font-size:28px;margin:0 0 10px;}
.cover-hero p.lead{color:#cfd8e6;font-size:15.5px;max-width:400px;margin:0 auto 32px;}
.cover-actions{display:flex;flex-direction:column;gap:12px;max-width:320px;margin:0 auto;}
.cover-actions .btn.secondary{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.3);}
.cover-actions .btn.secondary:hover{background:rgba(255,255,255,.14);}
.back-link{display:inline-block;margin-bottom:16px;color:#cfd8e6;font-size:13.5px;font-weight:600;
  text-decoration:none;cursor:pointer;}
.back-link:hover{color:#fff;}
.auth-card .logo-chico{width:56px;height:auto;border-radius:12px;display:block;margin:0 auto 18px;
  box-shadow:0 6px 18px rgba(0,0,0,0.25);}
/* ---------- Cabecera de página con degradado (estilo hero de la landing) ---------- */
.page-hero{
  background:linear-gradient(150deg,var(--navy) 0%,var(--navy-2) 60%,#0d3b4a 100%);
  color:#fff;padding:44px 0 68px;margin-bottom:-40px;
}
.page-hero .eyebrow{
  display:inline-block;background:rgba(201,150,44,0.16);color:var(--gold-light);
  padding:5px 12px;border-radius:20px;font-size:12px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;margin-bottom:14px;
}
.page-hero h1{color:#fff;font-size:27px;margin:0 0 8px;}
.page-hero p.lead{color:#cfd8e6;margin:0;font-size:15px;max-width:520px;}
main{padding-bottom:80px;}
main > .wrap, main > .wrap-narrow{position:relative;}
h1{font-size:24px;margin:0 0 8px;font-weight:800;letter-spacing:-.2px;}
h2{font-size:17px;margin:0 0 14px;font-weight:700;}
p.lead{color:var(--muted);font-size:15px;margin:0 0 28px;}
/* ---------- Tarjetas ---------- */
.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow);
}
.card + .card{margin-top:16px;}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:640px){.grid{grid-template-columns:1fr;}}
/* ---------- Tarjeta de módulo ---------- */
.modcard{display:flex;align-items:center;gap:15px;transition:box-shadow .15s, transform .15s;}
.modcard.unlocked:hover{box-shadow:var(--shadow-hover);transform:translateY(-1px);}
.modcard .modnum{
  width:38px;height:38px;border-radius:10px;background:#eef2f7;color:var(--navy);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14.5px;flex-shrink:0;
}
.modcard.unlocked .modnum{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#241a02;}
.modcard .info{flex:1;min-width:0;}
.modcard .info .nombre{font-weight:700;font-size:14.5px;}
.modcard .info .pct{font-size:12.5px;color:var(--teal);font-weight:700;margin-top:3px;}
.modcard .lock{font-size:12px;color:var(--muted);}
.modcard .acciones{display:flex;gap:8px;flex-shrink:0;}
@media (max-width:480px){
  .modcard{flex-wrap:wrap;}
  .modcard .acciones{flex-basis:100%;margin-top:10px;}
  .modcard .acciones .btn{flex:1;text-align:center;padding-left:8px;padding-right:8px;}
}
/* ---------- Botones ---------- */
.btn{
  display:inline-block;background:linear-gradient(135deg,var(--gold),#dba63a);color:#241a02;font-weight:800;
  padding:12px 22px;border-radius:11px;text-decoration:none;border:none;cursor:pointer;font-size:14.5px;
  font-family:inherit;box-shadow:0 2px 8px rgba(201,150,44,0.35);
  transition:filter .18s cubic-bezier(.34,1.56,.64,1), transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
}
.btn:hover{filter:brightness(1.04);transform:translateY(-1px);box-shadow:0 4px 14px rgba(201,150,44,0.4);}
.btn:active{transform:translateY(0) scale(.98);box-shadow:0 2px 8px rgba(201,150,44,0.35);}
.btn.secondary{background:#fff;color:var(--navy);border:1.5px solid var(--border);box-shadow:none;}
.btn.secondary:hover{border-color:var(--navy);box-shadow:none;}
.btn.small{padding:8px 15px;font-size:13px;border-radius:9px;}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.btn.block{display:block;width:100%;text-align:center;}
/* ---------- Formularios ---------- */
.field{margin-bottom:16px;}
.field label{display:block;font-size:13.5px;font-weight:700;margin-bottom:6px;color:var(--navy);}
/* 28/08/2026 — fila que combina una label con una acción secundaria a su
   lado (p.ej. "Contraseña" + "¿Olvidaste tu contraseña?"), patrón habitual
   en pantallas de login modernas en vez de un botón suelto debajo del
   campo. */
.field-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px;}
.field-label-row label{margin-bottom:0;}
.field input, .field select, .field textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:15px;
  font-family:inherit;transition:border-color .15s, box-shadow .15s;background:#fff;color:var(--ink);
}
.field input:focus, .field textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,150,44,0.15);
}
/* El navegador rellena los campos de correo/contraseña guardados con un
   fondo azul/amarillo propio (autofill) que no respeta el resto del
   diseño -- se sustituye por el mismo blanco del campo, con una
   transición de fondo casi infinita para que el propio navegador no
   pueda revertirlo. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px #fff inset;
  box-shadow:0 0 0 1000px #fff inset;
  transition:background-color 9999s ease-in-out 0s;
}
.msg{padding:13px 15px;border-radius:10px;font-size:14px;margin-bottom:16px;font-weight:600;}
.msg.error{background:var(--danger-bg);color:var(--danger);}
.msg.ok{background:var(--ok-bg);color:var(--ok);}
.msg.info{background:#eef2f7;color:var(--muted);}
/* 28/08/2026 — enlace de texto para acciones secundarias dentro de un
   formulario (p.ej. "¿Olvidaste tu contraseña?", "‹ Volver a iniciar
   sesión" en recuperar.html). Contraste suficiente sobre fondo blanco
   (a diferencia de .back-link, pensado para el fondo oscuro de la
   portada). Reset explícito de "appearance": sin esto, algunos
   navegadores conservan el marco/fondo nativo de <button> aunque
   background y border ya estén a "none" -- es justo lo que se veía en
   producción (un recuadro gris con borde, en vez de un simple texto).
   28/08/2026 (3ª pasada) — causa real encontrada tras comprobar, con el
   propio Eduardo, el CSS servido en vivo (idéntico byte a byte al de
   aquí, sin caché de por medio) en dos dispositivos distintos y sin
   relación entre sí (un Chromebook y un móvil Android): el recuadro NO
   lo pone nuestro CSS ni el navegador por defecto -- lo añade el propio
   sistema cuando tiene activado un modo de "alto contraste" (la función
   de accesibilidad de Android/ChromeOS que reduce a los navegadores web
   al modo "forced-colors", pensado para gente con baja visión). Ese modo
   ignora a propósito el color/fondo/borde que pongamos, INCLUSO con
   "!important" -- por diseño, es la única forma que tiene el sistema de
   garantizar contraste a quien lo necesita, y por eso ningún ajuste de
   color anterior podía arreglarlo. La única vía real para decir "confía
   en mi propio diseño, ya tiene contraste de sobra" es la propiedad
   estándar forced-color-adjust:none, que aquí SÍ se puede usar con
   seguridad porque el texto en negrita (var(--muted) o var(--navy)) ya
   tiene contraste de lectura correcto por sí mismo -- no estamos quitando
   accesibilidad real, solo evitando que un modo pensado para casos de
   bajo contraste actúe sobre un texto que ya no lo tiene. */
.text-link{-webkit-appearance:none;-moz-appearance:none;appearance:none;
  forced-color-adjust:none;-ms-high-contrast-adjust:none;
  background:none;border:none;padding:4px 2px;margin:0;font:inherit;font-size:13px;
  font-weight:700;color:var(--muted);cursor:pointer;text-decoration:none;transition:color .15s;}
.text-link:hover{color:var(--gold);}
.text-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px;}
/* 28/08/2026 (2ª pasada) — la primera versión de este enlace llevaba un
   borde/fondo dorado propio a modo de "chip"; a ojo, sobre el fondo blanco
   de la tarjeta, se seguía leyendo como una caja. Se sustituye por texto
   sin caja, con la misma tipografía en negrita y el mismo azul marino que
   usa "TRAYECTORIAcademy" en el logotipo (.brandmark.on-light .title) --
   coherente con la imagen de marca, sin ningún marco alrededor. */
.field-hint-link{-webkit-appearance:none;-moz-appearance:none;appearance:none;
  forced-color-adjust:none;-ms-high-contrast-adjust:none;
  background:none;border:none;box-shadow:none;padding:2px;margin:0;
  font:inherit;font-size:12.5px;font-weight:800;letter-spacing:.1px;
  color:var(--navy);cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:color .15s;}
.field-hint-link:hover{color:var(--gold);}
.field-hint-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px;}
/* ---------- Login / registro ---------- */
.center-page{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:
    radial-gradient(circle at 22% 15%, rgba(79,180,255,0.12), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(201,150,44,0.08), transparent 50%),
    linear-gradient(150deg,var(--navy) 0%,var(--navy-2) 55%,#0d3b4a 100%);
}
.auth-card{
  background:var(--card);border:1px solid var(--border);border-radius:20px;padding:38px 34px;
  width:100%;max-width:400px;
  box-shadow:0 1px 2px rgba(11,37,69,0.04), 0 10px 24px rgba(11,37,69,0.10), 0 40px 80px rgba(11,37,69,0.22);
}
.auth-card .brand{color:var(--navy);justify-content:center;margin-bottom:24px;font-size:21px;}
.auth-card .brand .dot{background:var(--gold);}
.tabs{display:flex;border-bottom:1.5px solid var(--border);margin-bottom:22px;}
.tabs button{flex:1;background:none;border:none;padding:12px 0;font-size:14.5px;font-weight:700;
  color:var(--muted);cursor:pointer;border-bottom:2.5px solid transparent;font-family:inherit;
  transition:color .15s, border-color .15s;}
.tabs button.active{color:var(--navy);border-bottom-color:var(--gold);}
/* ---------- Planes ---------- */
.plan-option{
  border:1.5px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:16px;
  background:#fff;box-shadow:var(--shadow);position:relative;
}
.plan-option.highlight{border-color:var(--gold);box-shadow:0 4px 20px rgba(201,150,44,0.18);}
.plan-option.highlight::before{
  content:"Recomendado";position:absolute;top:-11px;right:22px;background:var(--gold);color:#241a02;
  font-size:11px;font-weight:800;padding:4px 12px;border-radius:20px;letter-spacing:.3px;
}
.plan-option .price{font-size:28px;font-weight:800;color:var(--navy);letter-spacing:-.5px;}
.plan-option .price small{font-size:14px;font-weight:600;color:var(--muted);}
.plan-option ul{margin:14px 0 20px;padding-left:0;list-style:none;color:var(--ink);font-size:14px;}
.plan-option li{margin-bottom:9px;padding-left:24px;position:relative;}
.plan-option li::before{content:"✓";position:absolute;left:0;color:var(--teal);font-weight:800;}
/* ---------- Aviso de transparencia IA (Art. 50 Reglamento UE de IA) ---------- */
.ai-disclosure{
  display:flex;align-items:center;gap:8px;background:#eef4ff;border:1px solid #cfe0ff;
  color:#2a4d8f;font-size:12.5px;font-weight:600;padding:9px 14px;border-radius:10px;
  margin-bottom:12px;
}
/* ---------- Chat ---------- */
.chat-window{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  height:56vh;overflow-y:auto;padding:22px;margin-bottom:14px;box-shadow:var(--shadow);
}
.bubble{max-width:80%;padding:12px 16px;border-radius:14px;margin-bottom:12px;font-size:14.5px;
  line-height:1.55;white-space:pre-wrap;}
.bubble.user{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;margin-left:auto;
  border-bottom-right-radius:4px;}
.bubble.assistant{background:#eef2f7;color:var(--ink);margin-right:auto;border-bottom-left-radius:4px;}
.chat-form{display:flex;gap:10px;}
.chat-form textarea{flex:1;resize:none;padding:13px 15px;border:1.5px solid var(--border);border-radius:12px;
  font-family:inherit;font-size:14.5px;transition:border-color .15s;}
.chat-form textarea:focus{outline:none;border-color:var(--gold);}
/* ---------- Test / práctica ---------- */
.question-box .enunciado{font-size:16.5px;font-weight:700;margin-bottom:20px;line-height:1.55;color:var(--navy);}
.option{
  display:block;width:100%;text-align:left;background:#fff;border:1.5px solid var(--border);
  border-radius:11px;padding:14px 17px;margin-bottom:10px;cursor:pointer;font-size:14.5px;
  font-family:inherit;transition:border-color .15s, background .15s;
}
.option:hover:not(:disabled){border-color:var(--navy);background:#f9fafc;}
.option.selected{border-color:var(--navy);background:#eef2f7;}
.option.correct{border-color:var(--ok);background:var(--ok-bg);font-weight:600;}
.option.incorrect{border-color:var(--danger);background:var(--danger-bg);font-weight:600;}
.option:disabled{cursor:default;}
.explicacion{margin-top:18px;padding:15px 17px;background:#eef2f7;border-radius:11px;font-size:14px;
  color:var(--muted);border-left:3px solid var(--gold);}
.progreso-test{font-size:13px;color:var(--muted);margin-bottom:14px;font-weight:600;}
.spinner{color:var(--muted);font-size:14px;}
.empty-state{text-align:center;padding:50px 20px;color:var(--muted);}
.empty-state h2{color:var(--navy);}
/* ---------- Páginas legales (aviso legal, términos, privacidad) ---------- */
.legal{font-size:14.5px;line-height:1.7;color:var(--ink);}
.legal h2{font-size:19px;margin:34px 0 12px;color:var(--navy);}
.legal h2:first-child{margin-top:0;}
.legal h3{font-size:15.5px;margin:20px 0 8px;color:var(--navy);}
.legal p{margin:0 0 14px;}
.legal ul, .legal ol{margin:0 0 14px;padding-left:22px;}
.legal li{margin-bottom:6px;}
.legal .updated{color:var(--muted);font-size:13px;margin-bottom:28px;}
.legal .pending{background:#fff4e0;border-left:3px solid var(--gold);padding:10px 14px;border-radius:8px;
  color:#7a5a00;font-size:13.5px;margin:0 0 14px;}
.legal a{color:var(--teal);text-decoration:underline;}
.legal strong{color:var(--navy);}
/* ---------- Medidor de presupuesto de IA del tutor + bono (26/08/2026, Fase 4) ---------- */
.budget-meter{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 18px;margin-bottom:16px;box-shadow:var(--shadow);
}
.budget-meter-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  flex-wrap:wrap;margin-bottom:9px;}
.budget-meter-label{font-size:13px;font-weight:700;color:var(--navy);}
.budget-meter-cifras{font-size:13px;font-weight:700;color:var(--muted);}
.budget-meter-track{height:8px;border-radius:6px;background:#eef2f7;overflow:hidden;}
.budget-meter-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--teal),#14a89c);
  transition:width .3s ease;}
.budget-meter.warn .budget-meter-fill{background:linear-gradient(90deg,var(--gold),var(--gold-light));}
.budget-meter.critical .budget-meter-fill{background:linear-gradient(90deg,var(--danger),#e0655c);}
.budget-meter.critical .budget-meter-cifras{color:var(--danger);}
.budget-meter-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:10px;flex-wrap:wrap;}
.budget-meter-nota{font-size:12.5px;color:var(--muted);}
.budget-meter.critical .budget-meter-nota{color:var(--danger);font-weight:600;}
.budget-meter-buy{flex-shrink:0;}
@media (max-width:480px){
  .budget-meter-foot{flex-direction:column;align-items:stretch;}
  .budget-meter-buy{width:100%;text-align:center;}
}
/* ---------- Fase 3 (29/08/2026) — widgets reales del panel: racha de
   estudio y cronograma de examen, ambos alimentados por /api/me (campos
   añadidos en la Fase 1/2: current_streak_days, exam_target_date).
   Mismo lenguaje visual que el resto del sitio (tarjeta .card, tokens de
   color existentes) — nada de Tailwind ni del sistema propio del
   prototipo de dashboard, que es una pantalla aparte con su propia
   identidad ya documentada. ---------- */
.dash-widgets{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
@media (max-width:640px){.dash-widgets{grid-template-columns:1fr;}}
.widget-racha{display:flex;align-items:center;gap:14px;}
.widget-racha .llama{font-size:30px;line-height:1;flex-shrink:0;}
.widget-racha .num{font-size:22px;font-weight:800;color:var(--navy);}
.widget-racha .txt{font-size:12.5px;color:var(--muted);font-weight:600;}
.widget-cronograma .dias{font-size:22px;font-weight:800;color:var(--navy);}
.widget-cronograma .txt{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:2px;}
.widget-cronograma .sin-fecha{font-size:13.5px;color:var(--muted);margin-bottom:10px;}
/* ---------- Fase 3 — interruptor accesible real (checkbox nativo
   estilizado, no un div-botón): mantiene foco/teclado/lector de pantalla
   nativos, solo se le cambia la apariencia visual. ---------- */
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--border);}
.toggle-row:last-child{border-bottom:none;}
.toggle-row .toggle-info .toggle-title{font-size:14.5px;font-weight:700;color:var(--navy);}
.toggle-row .toggle-info .toggle-desc{font-size:12.5px;color:var(--muted);margin-top:2px;}
.toggle-switch{position:relative;display:inline-block;width:46px;height:26px;flex-shrink:0;}
.toggle-switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1;}
.toggle-switch .track{position:absolute;inset:0;background:#d7dde5;border-radius:20px;transition:background .18s ease;}
.toggle-switch .thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(11,37,69,0.3);transition:transform .18s ease;}
.toggle-switch input:checked + .track{background:linear-gradient(135deg,var(--gold),#dba63a);}
.toggle-switch input:checked + .track + .thumb{transform:translateX(20px);}
.toggle-switch input:focus-visible + .track{outline:2px solid var(--gold);outline-offset:2px;}
/* ---------- Fase 3 — Simulacros: tarjetas de selección de tipo,
   cronómetro real y desglose de resultado por aula. ---------- */
.sim-type-card{display:block;width:100%;text-align:left;background:#fff;
  border:1.5px solid var(--border);border-radius:var(--radius);padding:18px 20px;
  margin-bottom:12px;cursor:pointer;font-family:inherit;transition:border-color .15s, box-shadow .15s;}
.sim-type-card:hover{border-color:var(--navy);box-shadow:var(--shadow-hover);}
.sim-type-card .titulo{font-size:15.5px;font-weight:800;color:var(--navy);margin-bottom:4px;}
.sim-type-card .detalle{font-size:13px;color:var(--muted);}
.sim-timer{position:sticky;top:66px;z-index:5;display:flex;align-items:center;justify-content:space-between;
  gap:12px;background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:12px 16px;margin-bottom:16px;box-shadow:var(--shadow);font-weight:700;font-size:14px;color:var(--navy);}
.sim-timer.urgente{border-color:var(--danger);color:var(--danger);}
.sim-timer .reloj{font-variant-numeric:tabular-nums;font-size:17px;}
.sim-resultado-nota{font-size:40px;font-weight:800;color:var(--navy);margin:0 0 4px;}
.sim-resultado-nota.aprobado{color:var(--ok);}
.sim-resultado-nota.suspenso{color:var(--danger);}
.sim-resumen-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--border);font-size:13.5px;}
.sim-resumen-row:last-child{border-bottom:none;}
.sim-resumen-row .nombre{font-weight:700;color:var(--navy);}
.sim-resumen-row .cifras{color:var(--muted);font-weight:600;flex-shrink:0;}
.sim-revision-item{border:1.5px solid var(--border);border-radius:11px;padding:15px 17px;margin-bottom:12px;}
.sim-revision-item.correcta{border-color:var(--ok);background:var(--ok-bg);}
.sim-revision-item.incorrecta{border-color:var(--danger);background:var(--danger-bg);}
.sim-revision-item .enunciado{font-weight:700;color:var(--navy);margin-bottom:8px;font-size:14.5px;}
.sim-revision-item .respuesta-linea{font-size:13.5px;margin-bottom:4px;}
.sim-nav{display:flex;justify-content:space-between;gap:10px;margin-top:16px;}

/* ==========================================================================
   FASE A (01/09/2026) — Sistema visual oscuro del PANEL DEL ALUMNO.
   ==========================================================================
   Hasta ahora el panel real (dashboard/ajustes/simulacros/aprender/
   práctica/tutor/diagnóstico) usaba el mismo sistema navy/gold que la
   landing pública. Eduardo aprobó (28-29/08) un prototipo de panel con un
   sistema visual propio, oscuro, y pidió llevarlo a producción de verdad
   (01/09) — "que yo entre en mi dashboard y vea lo que diseñamos al
   detalle, funcionando todo correctamente".

   Decisión de arquitectura (norma nº1: analizar antes de tocar código):
   en vez de reescribir las variables de :root (--navy, --card, etc.) para
   que "cambien de significado" en modo oscuro, se añade un sistema de
   clases NUEVO y AUTÓNOMO (prefijo .panel-), con sus propios tokens de
   color (prefijo --dk-). Motivo: --navy y --card ya cumplen DOS papeles
   distintos en este archivo (color de texto sobre tarjeta blanca, Y color
   de fondo de cabeceras/degradados) — sobrescribirlos a ciegas habría
   convertido texto en fondo y fondo en texto en sitios inesperados. Este
   enfoque es más código, pero CERO riesgo de romper index.html, login.html,
   recuperar.html y planes.html, que se quedan exactamente igual (siguen
   con navy/gold, es la parte de cara al público, según lo acordado).

   Tipografía: Plus Jakarta Sans (títulos) / IBM Plex Sans (texto) /
   JetBrains Mono (cifras tabulares: cronómetros, contadores) — las mismas
   que ya se verificaron y aprobaron en el prototipo. Los <link> de Google
   Fonts se añaden en el <head> de cada página del panel (no aquí, para
   poder usar preconnect y no bloquear el primer render) — la CSP de
   netlify.toml ya permite fonts.googleapis.com/fonts.gstatic.com desde el
   20/08, no hace falta tocarla.
   ========================================================================== */
:root{
  --dk-bg:#0a1128;
  --dk-panel:#101f42;
  --dk-panel-2:#0d1a38;
  --dk-hairline:#1f2937;
  --dk-ink:#eef2ff;
  --dk-muted:#8891a8;
  --dk-faint:#5b6480;
  --dk-success:#10b981;
  --dk-success-bg:rgba(16,185,129,0.14);
  --dk-warning:#f59e0b;
  --dk-warning-bg:rgba(245,158,11,0.14);
  --dk-critical:#ef4444;
  --dk-critical-bg:rgba(239,68,68,0.14);
  --dk-focus:#8b5cf6;
  --dk-cta:#f97316;
  --dk-cta-deep:#b45309;
  --dk-brand:#2f7dfb;
  --dk-brand-2:#5aa6ff;
  --dk-font-display:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --dk-font-body:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --dk-font-mono:'JetBrains Mono',ui-monospace,monospace;
}
/* Fondo y tipografía base de cualquier página del panel — se activa solo
   en las páginas que llevan <body class="panel-page">, así que no afecta
   a ninguna página pública. */
body.panel-page{
  background:var(--dk-bg);color:var(--dk-ink);
  font-family:var(--dk-font-body);
  color-scheme:dark;
}
body.panel-page a{color:inherit;}
body.panel-page h1,body.panel-page h2,body.panel-page h3{font-family:var(--dk-font-display);}
body.panel-page .tnum{font-family:var(--dk-font-mono);font-variant-numeric:tabular-nums;}
/* Respeta la preferencia de "reducir movimiento" del sistema operativo en
   TODO el panel, no solo en un componente concreto — coherente con la
   accesibilidad ya cuidada en el resto del sitio (ver el caso real de
   forced-colors documentado más arriba en este mismo archivo). */
@media (prefers-reduced-motion:reduce){
  body.panel-page *,body.panel-page *::before,body.panel-page *::after{
    animation-duration:.001ms!important;transition-duration:.001ms!important;
  }
}

/* ---------- Estructura: sidebar + contenido ---------- */
.panel-shell{display:flex;min-height:100vh;}
.panel-sidebar{
  width:76px;flex-shrink:0;background:var(--dk-panel-2);
  border-right:1px solid var(--dk-hairline);display:flex;flex-direction:column;
  padding:18px 0;position:sticky;top:0;height:100vh;overflow-y:auto;
}
@media (min-width:860px){.panel-sidebar{width:248px;padding:22px 16px;}}
.panel-sidebar .panel-brand{
  display:flex;align-items:center;gap:10px;justify-content:center;
  padding:0 0 20px;margin-bottom:14px;border-bottom:1px solid var(--dk-hairline);
  text-decoration:none;color:var(--dk-ink);
}
@media (min-width:860px){.panel-sidebar .panel-brand{justify-content:flex-start;padding-left:8px;}}
.panel-sidebar .panel-brand img{height:34px;width:34px;border-radius:50%;flex-shrink:0;}
.panel-sidebar .panel-brand .name{display:none;font-weight:800;font-size:14.5px;font-family:var(--dk-font-display);}
@media (min-width:860px){.panel-sidebar .panel-brand .name{display:block;}}
.panel-nav{display:flex;flex-direction:column;gap:3px;flex:1;}
/* Enlace del sidebar: área de clic amplia (mín. 44px de alto, ver skill de
   pulido de interfaz) aunque el icono en sí sea pequeño. */
.panel-navlink{
  display:flex;align-items:center;justify-content:center;gap:12px;
  min-height:44px;padding:10px 12px;border-radius:12px;
  color:var(--dk-muted);text-decoration:none;font-size:13.5px;font-weight:600;
  transition:background-color .15s ease,color .15s ease;
}
@media (min-width:860px){.panel-navlink{justify-content:flex-start;}}
.panel-navlink svg{width:19px;height:19px;flex-shrink:0;}
.panel-navlink .label{display:none;}
@media (min-width:860px){.panel-navlink .label{display:inline;}}
.panel-navlink:hover{background:rgba(255,255,255,.05);color:var(--dk-ink);}
.panel-navlink.active{
  color:var(--dk-ink);
  background:linear-gradient(90deg,rgba(47,125,251,.22),rgba(47,125,251,.05));
  box-shadow:inset 3px 0 0 var(--dk-brand);
}
.panel-main{flex:1;min-width:0;padding:20px 18px 70px;}
@media (min-width:640px){.panel-main{padding:26px 32px 80px;}}
.panel-main .wrap-panel{max-width:1080px;margin:0 auto;}

/* ---------- Barra superior con buscador e iconos de estado ---------- */
.panel-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-bottom:22px;flex-wrap:wrap;
}
.panel-topbar h1{font-size:20px;margin:0;color:var(--dk-ink);}
.panel-topbar .eyebrow{
  display:block;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--dk-brand-2);margin-bottom:4px;
}
.panel-topbar-icons{display:flex;align-items:center;gap:6px;}
/* Botón de icono: 44x44 de área de clic real aunque el icono visual sea
   más pequeño (skill de pulido — evita el error clásico de iconos
   diminutos difíciles de pulsar en móvil). */
.panel-icon-btn{
  position:relative;width:44px;height:44px;border-radius:12px;border:none;
  background:transparent;color:var(--dk-muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .15s ease,color .15s ease;font-family:inherit;
}
.panel-icon-btn:hover{background:rgba(255,255,255,.06);color:var(--dk-ink);}
.panel-icon-btn svg{width:20px;height:20px;}
.panel-icon-btn .dot-alert{
  position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;
  background:var(--dk-cta);box-shadow:0 0 0 2px var(--dk-panel-2);
}
.panel-icon-btn.urgente{color:var(--dk-cta);animation:panel-shake 2.4s ease-in-out infinite;}
@keyframes panel-shake{0%,92%,100%{transform:rotate(0);}94%{transform:rotate(-8deg);}96%{transform:rotate(8deg);}98%{transform:rotate(-4deg);}}

/* ---------- Paneles flotantes (Radar de la IA / Cronograma / Perfil) ----------
   Física de resorte suave en vez de easing lineal, escala de entrada desde
   0.95 (nunca desde 0 — nada aparece de la nada), 180ms: ver skill de
   microinteracciones. */
.panel-dropdown{
  position:absolute;top:52px;right:0;width:340px;max-width:calc(100vw - 32px);
  background:rgba(16,31,66,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--dk-hairline);border-radius:16px;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 24px 48px -12px rgba(0,0,0,.5);
  padding:16px;z-index:30;
  opacity:0;transform:scale(.95) translateY(-4px);pointer-events:none;
  transition:opacity .18s cubic-bezier(.34,1.56,.64,1),transform .18s cubic-bezier(.34,1.56,.64,1);
}
.panel-dropdown.open{opacity:1;transform:scale(1) translateY(0);pointer-events:auto;}
.panel-dropdown h3{font-size:13.5px;margin:0 0 10px;color:var(--dk-ink);}
.panel-dropdown-section{padding:10px 0;border-top:1px solid var(--dk-hairline);}
.panel-dropdown-section:first-child{border-top:none;padding-top:0;}

/* ---------- Tarjetas ---------- */
.panel-card{
  background:var(--dk-panel);border:1px solid var(--dk-hairline);border-radius:18px;
  padding:20px;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s cubic-bezier(.2,.8,.2,1),border-color .25s ease;
}
.panel-card.hoverable:hover{
  transform:translateY(-2px);border-color:rgba(90,166,255,.35);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 18px 40px -16px rgba(47,125,251,.28);
}
.panel-card-2{background:var(--dk-panel-2);border:1px solid var(--dk-hairline);border-radius:14px;padding:16px;}
.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:720px){.panel-grid{grid-template-columns:1fr;}}
.panel-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media (max-width:860px){.panel-grid-3{grid-template-columns:1fr;}}

/* ---------- Botones ---------- */
.panel-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 20px;border-radius:12px;border:none;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:700;text-decoration:none;
  transition:filter .18s cubic-bezier(.34,1.56,.64,1),transform .18s cubic-bezier(.34,1.56,.64,1);
}
.panel-btn:active{transform:scale(.97);}
.panel-btn.cta{background:linear-gradient(135deg,var(--dk-cta),var(--dk-cta-deep));color:#fff;}
.panel-btn.cta:hover{filter:brightness(1.08);}
.panel-btn.brand{background:linear-gradient(135deg,var(--dk-brand),var(--dk-brand-2));color:#fff;}
.panel-btn.brand:hover{filter:brightness(1.08);}
.panel-btn.ghost{background:rgba(255,255,255,.05);color:var(--dk-ink);border:1px solid var(--dk-hairline);}
.panel-btn.ghost:hover{background:rgba(255,255,255,.09);}
.panel-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;filter:none;}
.panel-btn.block{display:flex;width:100%;}

/* ---------- Insignia "Próximamente" (mismo criterio honesto del
   prototipo: nunca fingir que algo funciona si no tiene backend real
   detrás — Aula Visual, videollamada, Recursos descargables). ---------- */
.panel-badge-soon{
  display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.35);
  color:#fff;font-size:11px;font-weight:700;padding:5px 10px;border-radius:20px;
}
.panel-badge-soon .led{width:6px;height:6px;border-radius:50%;background:var(--dk-critical);
  animation:panel-pulse 2.4s ease-in-out infinite;}
@keyframes panel-pulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.5);}50%{box-shadow:0 0 0 5px rgba(239,68,68,0);}}

/* ---------- Avatar con anillo de nivel (bronce/plata/oro/élite),
   calculado a partir de la nota ponderada REAL del alumno (no de ejemplo)
   — ver assets/js/dashboard-page.js, notaDominioPonderada(). ---------- */
.panel-avatar{position:relative;width:40px;height:40px;border-radius:50%;flex-shrink:0;}
.panel-avatar img,.panel-avatar .initials{
  width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
  background:linear-gradient(135deg,var(--dk-brand),var(--dk-brand-2));
  color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;
}
.panel-avatar::before{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  background:linear-gradient(135deg,#8a6a3a,#c9962c);z-index:-1;
}
.panel-avatar.nivel-plata::before{background:linear-gradient(135deg,#9aa5b1,#e2e8f0);}
.panel-avatar.nivel-oro::before{background:linear-gradient(135deg,var(--dk-cta-deep),#f5c451);}
.panel-avatar.nivel-elite::before{
  background:linear-gradient(135deg,var(--dk-brand),var(--dk-focus),var(--dk-brand-2));
}

/* ---------- Barras de progreso ---------- */
.panel-progress-track{height:8px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;}
.panel-progress-fill{
  height:100%;border-radius:6px;background:linear-gradient(90deg,var(--dk-brand),var(--dk-brand-2));
  transition:width 1.1s cubic-bezier(.16,.8,.24,1);
}
.panel-progress-fill.cta{background:linear-gradient(90deg,var(--dk-cta),#fbbf6a);}
.panel-progress-fill.critical{background:linear-gradient(90deg,var(--dk-critical),#f87171);}

/* ==========================================================================
   FASE B (01/09/2026) — Dashboard real. Único ajuste de CSS de esta fase:
   .msg.error/.ok/.info son globales (definidas arriba para todo el sitio,
   fondo claro pensado para páginas navy/gold) y dashboard-page.js las
   reutiliza tal cual para errores de carga — sin este bloque se verían
   como una tarjeta clara flotando sobre el fondo oscuro. Se sobrescriben
   SOLO dentro de body.panel-page, así que las páginas públicas no cambian.
   ========================================================================== */
body.panel-page .msg{border:1px solid var(--dk-hairline);}
body.panel-page .msg.error{background:var(--dk-critical-bg);color:#fca5a5;}
body.panel-page .msg.ok{background:var(--dk-success-bg);color:#6ee7b7;}
body.panel-page .msg.info{background:var(--dk-panel-2);color:var(--dk-muted);}

/* ==========================================================================
   FASE B — 01/09/2026 (2ª pasada, misma sesión): réplica visual exacta de
   3 elementos del prototipo que la primera entrega de Fase B había
   sustituido por versiones propias (documentado y explicado a Eduardo).
   A petición explícita suya ("lo quiero exactamente igual"), se añade:
   - Buscador decorativo del topbar (igual que en el prototipo: no ejecuta
     ninguna búsqueda real todavía — no hay ningún índice de contenido que
     buscar en el backend real. Puramente visual, sin JS que finja un
     resultado).
   - Anillo circular de "Progreso general" (sustituye el número plano de
     la Fase B original).
   - Radar hexagonal "Tu trayectoria" (sustituye las barras por módulo de
     la Fase B original) — ver la nota de agrupación real por módulo en
     dashboard-page.js, notaTrayectoria().
   ========================================================================== */
.panel-topbar-search{
  flex:1;min-width:160px;max-width:360px;display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.05);border:1px solid var(--dk-hairline);border-radius:12px;
  padding:0 14px;height:40px;transition:border-color .15s ease,background-color .15s ease;
}
.panel-topbar-search:focus-within{border-color:rgba(90,166,255,.4);background:rgba(255,255,255,.07);}
.panel-topbar-search svg{width:16px;height:16px;color:var(--dk-faint);flex-shrink:0;}
.panel-topbar-search input{
  flex:1;min-width:0;background:none;border:none;outline:none;color:var(--dk-ink);
  font-family:inherit;font-size:13px;
}
.panel-topbar-search input::placeholder{color:var(--dk-faint);}

.panel-ring{position:relative;width:56px;height:56px;flex-shrink:0;}
.panel-ring svg{width:100%;height:100%;transform:rotate(-90deg);}
.panel-ring .ring-track{fill:none;stroke:var(--dk-hairline);stroke-width:8;}
.panel-ring .ring-fill{
  fill:none;stroke:var(--dk-brand-2);stroke-width:8;stroke-linecap:round;
  transition:stroke-dashoffset 1s cubic-bezier(.16,.8,.24,1);
}
.panel-ring .ring-valor{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;color:var(--dk-ink);
}

.panel-radar-svg{width:100%;height:auto;display:block;}
.panel-radar-svg .radar-grid{fill:none;stroke:var(--dk-hairline);stroke-width:1;}
.panel-radar-svg .radar-eje{stroke:var(--dk-hairline);stroke-width:1;}
.panel-radar-svg .radar-area{fill:rgba(90,166,255,.22);stroke:var(--dk-brand-2);stroke-width:2;}
.panel-radar-svg .radar-punto{fill:var(--dk-brand-2);}
.panel-radar-svg .radar-etiqueta{fill:var(--dk-muted);font-size:6.4px;font-family:inherit;}
.panel-radar-svg .radar-valor{fill:var(--dk-ink);font-size:5.8px;font-weight:700;font-family:inherit;}

/* ==========================================================================
   FASE B2 + G (02/09/2026) — reskin oscuro de Ajustes, Simulacros y Tutor
   IA (chat.html), las 3 pantallas que quedaban con el shell público
   navy/gold (.appbar/.page-hero) mientras el resto del panel (Fases A, B,
   C-F) ya usaba el sistema oscuro. Su lógica real (Fase 2/3: fecha de
   examen, notificaciones, los 4 tipos de simulacro con corrección real,
   el chat del tutor con historial y medidor de presupuesto) no se toca en
   absoluto — CERO cambios de comportamiento, solo de aspecto.

   Decisión de arquitectura (misma norma nº1 de siempre: no tocar lo que ya
   funciona sin motivo): en vez de reescribir ajustes-page.js/
   simulacros-page.js/chat-page.js/budget-meter.js para que usen las clases
   .panel-* nuevas, se sobrescriben SUS MISMAS clases de siempre (.card,
   .btn, .field, .toggle-switch, .sim-*, .chat-window, .bubble, .option,
   .budget-meter, .text-link, .explicacion, .progreso-test, .spinner)
   exclusivamente bajo body.panel-page — exactamente el mismo patrón ya
   aplicado a .msg en la Fase B (ver más arriba). Las páginas que siguen
   siendo públicas o navy/gold (login.html, planes.html, practica.html,
   diagnostico.html, aprender.html...) no llevan body.panel-page, así que
   no cambian ni un píxel; siguen compartiendo el mismo CSS de siempre. El
   único cambio real fuera de este archivo es el cableado del topbar
   (renderTopbarComun) y quitar el antiguo botón suelto #btn-logout de los
   3 controladores JS, sustituido por "Cerrar sesión" dentro del
   desplegable de perfil, igual que en el resto del panel oscuro.
   ========================================================================== */
body.panel-page .card{
  background:var(--dk-panel);border:1px solid var(--dk-hairline);
  border-radius:18px;padding:20px;box-shadow:none;
}
body.panel-page .card + .card{margin-top:16px;}
body.panel-page h2{color:var(--dk-ink);font-family:var(--dk-font-display);}
body.panel-page p.lead{color:var(--dk-muted);}

body.panel-page .btn{
  background:linear-gradient(135deg,var(--dk-cta),var(--dk-cta-deep));color:#fff;box-shadow:none;
}
body.panel-page .btn:hover{box-shadow:0 4px 14px rgba(249,115,22,.35);}
body.panel-page .btn.secondary{
  background:rgba(255,255,255,.05);color:var(--dk-ink);border:1.5px solid var(--dk-hairline);
}
body.panel-page .btn.secondary:hover{border-color:var(--dk-brand-2);}
body.panel-page .text-link{color:var(--dk-muted);}
body.panel-page .text-link:hover{color:var(--dk-brand-2);}
body.panel-page .text-link:focus-visible{outline-color:var(--dk-brand-2);}

/* Ajustes — campo de fecha */
body.panel-page .field label{color:var(--dk-ink);}
body.panel-page .field input,
body.panel-page .field select,
body.panel-page .field textarea{
  background:var(--dk-panel-2);border:1.5px solid var(--dk-hairline);color:var(--dk-ink);color-scheme:dark;
}
body.panel-page .field input:focus,
body.panel-page .field textarea:focus{
  border-color:var(--dk-brand-2);box-shadow:0 0 0 3px rgba(90,166,255,.18);
}
body.panel-page .field input:-webkit-autofill,
body.panel-page .field input:-webkit-autofill:hover,
body.panel-page .field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--dk-ink);
  -webkit-box-shadow:0 0 0 1000px var(--dk-panel-2) inset;
  box-shadow:0 0 0 1000px var(--dk-panel-2) inset;
  transition:background-color 9999s ease-in-out 0s;
}

/* Ajustes — interruptor de notificaciones */
body.panel-page .toggle-row{border-bottom:1px solid var(--dk-hairline);}
body.panel-page .toggle-row .toggle-info .toggle-title{color:var(--dk-ink);}
body.panel-page .toggle-row .toggle-info .toggle-desc{color:var(--dk-muted);}
body.panel-page .toggle-switch .track{background:rgba(255,255,255,.14);}
body.panel-page .toggle-switch .thumb{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4);}
body.panel-page .toggle-switch input:checked + .track{background:linear-gradient(135deg,var(--dk-brand),var(--dk-brand-2));}
body.panel-page .toggle-switch input:focus-visible + .track{outline:2px solid var(--dk-brand-2);}

/* Simulacros — selección de tipo, cronómetro, resultado y revisión */
body.panel-page .sim-type-card{background:var(--dk-panel);border:1.5px solid var(--dk-hairline);}
body.panel-page .sim-type-card:hover{border-color:var(--dk-brand-2);box-shadow:0 18px 40px -16px rgba(47,125,251,.28);}
body.panel-page .sim-type-card .titulo{color:var(--dk-ink);}
body.panel-page .sim-type-card .detalle{color:var(--dk-muted);}
body.panel-page .sim-timer{background:var(--dk-panel);border:1px solid var(--dk-hairline);color:var(--dk-ink);box-shadow:none;}
body.panel-page .sim-timer.urgente{border-color:var(--dk-critical);color:#fca5a5;}
body.panel-page .question-box .enunciado{color:var(--dk-ink);}
body.panel-page .sim-resultado-nota{color:var(--dk-ink);}
body.panel-page .sim-resultado-nota.aprobado{color:var(--dk-success);}
body.panel-page .sim-resultado-nota.suspenso{color:var(--dk-critical);}
body.panel-page .sim-resumen-row{border-bottom:1px solid var(--dk-hairline);}
body.panel-page .sim-resumen-row .nombre{color:var(--dk-ink);}
body.panel-page .sim-resumen-row .cifras{color:var(--dk-muted);}
body.panel-page .sim-revision-item{border:1.5px solid var(--dk-hairline);background:var(--dk-panel);}
body.panel-page .sim-revision-item.correcta{border-color:var(--dk-success);background:var(--dk-success-bg);}
body.panel-page .sim-revision-item.incorrecta{border-color:var(--dk-critical);background:var(--dk-critical-bg);}
body.panel-page .sim-revision-item .enunciado{color:var(--dk-ink);}
body.panel-page .sim-revision-item .respuesta-linea{color:var(--dk-muted);}
body.panel-page .progreso-test{color:var(--dk-muted);}
body.panel-page .spinner{color:var(--dk-muted);}

/* Preguntas de opción múltiple (.option), usadas por Simulacros dentro
   del panel oscuro — practica.html/diagnostico.html las siguen usando
   igual que siempre, sin body.panel-page, así que no cambian. */
body.panel-page .option{background:var(--dk-panel-2);border:1.5px solid var(--dk-hairline);color:var(--dk-ink);}
body.panel-page .option:hover:not(:disabled){border-color:var(--dk-brand-2);background:rgba(90,166,255,.08);}
body.panel-page .option.selected{border-color:var(--dk-brand-2);background:rgba(90,166,255,.14);}
body.panel-page .option.correct{border-color:var(--dk-success);background:var(--dk-success-bg);}
body.panel-page .option.incorrect{border-color:var(--dk-critical);background:var(--dk-critical-bg);}
body.panel-page .explicacion{background:var(--dk-panel-2);color:var(--dk-muted);border-left:3px solid var(--dk-cta);}

/* Tutor IA (chat.html) */
body.panel-page .ai-disclosure{background:rgba(90,166,255,.1);border:1px solid rgba(90,166,255,.25);color:var(--dk-brand-2);}
body.panel-page .chat-window{background:var(--dk-panel);border:1px solid var(--dk-hairline);box-shadow:none;}
body.panel-page .bubble.user{background:linear-gradient(135deg,var(--dk-brand),var(--dk-brand-2));}
body.panel-page .bubble.assistant{background:var(--dk-panel-2);color:var(--dk-ink);}
body.panel-page .chat-form textarea{background:var(--dk-panel-2);border:1.5px solid var(--dk-hairline);color:var(--dk-ink);color-scheme:dark;}
body.panel-page .chat-form textarea:focus{border-color:var(--dk-brand-2);}

/* Medidor de presupuesto del tutor (chat.html), solo se pinta al agotarse */
body.panel-page .budget-meter{background:var(--dk-panel);border:1px solid var(--dk-hairline);box-shadow:none;}
body.panel-page .budget-meter-label{color:var(--dk-ink);}
body.panel-page .budget-meter-cifras{color:var(--dk-muted);}
body.panel-page .budget-meter-track{background:rgba(255,255,255,.1);}
body.panel-page .budget-meter-nota{color:var(--dk-muted);}
body.panel-page .budget-meter.critical .budget-meter-nota{color:#fca5a5;}

/* ==========================================================================
   FASE H — 02/09/2026 (2ª pasada, misma sesión): reskin oscuro de las 4
   páginas del recorrido del alumno que se quedaron fuera por error de las
   fases anteriores — Evaluaciones (diagnostico.html), Planes (planes.html),
   Estudiar (aprender.html) y Práctica (practica.html). Las 4 son parte del
   mismo panel autenticado (enlazadas desde el menú lateral y desde Aulas/
   Dashboard/Habilidades/Pasaporte), así que quedarse con el shell público
   navy/gold antiguo mientras las otras 8 ya usaban el sistema oscuro rompía
   la coherencia visual del recorrido completo del alumno — esto es lo que
   Eduardo señaló con las capturas de pantalla. Mismo criterio que la Fase
   B2 + G: CERO cambios de comportamiento/lógica, solo de aspecto, reusando
   las clases de siempre bajo body.panel-page.
   ========================================================================== */

/* ---------- Evaluación de nivel (diagnostico-page.js): tarjetas de
   resultado por módulo — misma clase .modcard que usa el tiltSelector de
   cardtilt.js, pero SOLO diagnostico-page.js la usaba hasta ahora; el resto
   del panel usa otras clases para sus tarjetas de módulo. ---------- */
body.panel-page .modcard .modnum{background:var(--dk-panel-2);color:var(--dk-ink);}
body.panel-page .modcard .info .pct{color:var(--dk-brand-2);}
body.panel-page .modcard .lock{color:var(--dk-muted);}

/* ---------- Práctica (practica-page.js): pantalla de "bloque terminado".
   Sin este bloque, el h2 heredaba var(--navy) — texto oscuro invisible
   sobre el fondo oscuro del panel. ---------- */
body.panel-page .empty-state{color:var(--dk-muted);}
body.panel-page .empty-state h2{color:var(--dk-ink);}

/* ---------- Planes (planes-page.js): tarjetas de precio. ---------- */
body.panel-page .plan-option{
  background:var(--dk-panel);border:1.5px solid var(--dk-hairline);box-shadow:none;
}
body.panel-page .plan-option.highlight{
  border-color:var(--dk-cta);box-shadow:0 4px 20px rgba(249,115,22,.18);
}
body.panel-page .plan-option .price{color:var(--dk-ink);}
body.panel-page .plan-option .price small{color:var(--dk-muted);}
body.panel-page .plan-option ul{color:var(--dk-ink);}
body.panel-page .plan-option li::before{color:var(--dk-brand-2);}

/* ---------- Estudiar (aprender.html/aprender-page.js): el temario en sí
   (#study-body, generado por renderMarkdown con innerHTML controlado — ver
   la nota de seguridad al principio de aprender-page.js), el índice de
   bloques (.toc), la barra de "Escuchar" (Web Speech API, .audio-bar) y el
   modo "Diapositivas" (.view-toggle/.slide-*). Es la página con más CSS
   propio de las 4, porque es la única con prosa larga con su propia
   tipografía (h1-h3, tablas, citas) en vez de componentes reutilizados. ---------- */
body.panel-page #study-body{color:var(--dk-ink);}
body.panel-page #study-body h1,
body.panel-page #study-body h2,
body.panel-page #study-body h3{color:var(--dk-ink);}
body.panel-page #study-body h2{border-bottom-color:var(--dk-hairline);}
body.panel-page #study-body strong{color:var(--dk-ink);}
body.panel-page #study-body hr{border-top-color:var(--dk-hairline);}
body.panel-page #study-body blockquote{
  background:rgba(249,115,22,.08);border-left-color:var(--dk-cta);
}
body.panel-page #study-body blockquote p{color:var(--dk-ink);}
body.panel-page #study-body th,
body.panel-page #study-body td{border-color:var(--dk-hairline);}
body.panel-page #study-body th{background:var(--dk-panel-2);color:var(--dk-ink);}
body.panel-page #study-body .reading{
  background:rgba(249,115,22,.16);box-shadow:0 0 0 4px rgba(249,115,22,.16);
}
body.panel-page .toc a{
  background:var(--dk-panel-2);color:var(--dk-ink);border-color:var(--dk-hairline);
}
body.panel-page .toc a:hover{border-color:var(--dk-brand-2);}
body.panel-page .audio-bar{
  background:var(--dk-panel);border:1px solid var(--dk-hairline);box-shadow:none;
}
body.panel-page .audio-bar .audio-btn{
  background:var(--dk-panel-2);color:var(--dk-ink);border-color:var(--dk-hairline);
}
body.panel-page .audio-bar .audio-btn:hover:not(:disabled){border-color:var(--dk-brand-2);}
body.panel-page .audio-bar .audio-btn.primary{
  background:linear-gradient(135deg,var(--dk-cta),var(--dk-cta-deep));color:#fff;
}
body.panel-page .audio-bar select{
  background:var(--dk-panel-2);color:var(--dk-ink);border-color:var(--dk-hairline);color-scheme:dark;
}
body.panel-page .audio-bar .audio-status{color:var(--dk-muted);}
body.panel-page .view-toggle button{
  background:var(--dk-panel-2);color:var(--dk-ink);border-color:var(--dk-hairline);
}
body.panel-page .view-toggle button.active{
  background:var(--dk-brand);color:#fff;border-color:var(--dk-brand);
}
body.panel-page .slide-stage{
  background:linear-gradient(180deg,var(--dk-panel),var(--dk-panel-2));
  border:1px solid var(--dk-hairline);
}
body.panel-page .slide-stage h2,
body.panel-page .slide-stage h3{color:var(--dk-ink);}
body.panel-page .slide-stage p,
body.panel-page .slide-stage li{color:var(--dk-ink);}
body.panel-page .slide-stage blockquote{
  background:rgba(249,115,22,.08);border-left-color:var(--dk-cta);
}
body.panel-page .slide-nav .slide-counter{color:var(--dk-muted);}
body.panel-page .slide-dots button{background:var(--dk-hairline);}
body.panel-page .slide-dots button.active{background:var(--dk-cta);}

/* 02/09/2026 (4ª pasada) — Tutor IA a paridad con el prototipo: chips de
   sugerencia rápida, tarjeta permanente de acceso al bono de 35€ (el
   backend ya existe y funciona — stripe-checkout.js/stripe-webhook.js/
   tutor-budget.js, Fase 4 del lanzamiento; solo faltaba el punto de
   entrada SIEMPRE visible que tiene el prototipo, no solo cuando se agota
   el presupuesto) y el mock de "Videollamada con tu Tutor IA" marcado
   honestamente como Próximamente, igual que en el prototipo aprobado. */
.tutor-layout{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start;}
@media (max-width:900px){.tutor-layout{grid-template-columns:1fr;}}
.tutor-chat-col{min-width:0;}
.tutor-chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;}
.tutor-chip{
  -webkit-appearance:none;appearance:none;border-radius:999px;
  border:1px solid var(--dk-hairline);background:var(--dk-panel-2);
  color:var(--dk-muted);font:inherit;font-size:12.5px;font-weight:600;
  padding:8px 14px;cursor:pointer;transition:border-color .15s,color .15s,background .15s;
}
.tutor-chip:hover{border-color:var(--dk-brand-2);color:var(--dk-ink);}
.tutor-chip:focus-visible{outline:2px solid var(--dk-brand-2);outline-offset:2px;}
.tutor-side-col{display:flex;flex-direction:column;gap:16px;}
.tutor-bono-card{
  border-radius:16px;padding:16px;border:1px solid var(--dk-hairline);
  background:linear-gradient(160deg, rgba(249,115,22,.18), rgba(16,31,66,.4));
}
.tutor-bono-card h3{font-size:13.5px;font-weight:700;color:var(--dk-ink);margin:0 0 4px;}
.tutor-bono-card p{font-size:12px;color:var(--dk-muted);line-height:1.5;margin:0 0 12px;}
.tutor-bono-card button{
  width:100%;border:none;border-radius:12px;padding:11px;cursor:pointer;
  background:linear-gradient(135deg,var(--dk-cta),var(--dk-cta-deep));
  color:#fff;font:inherit;font-size:13px;font-weight:700;transition:filter .15s,transform .1s;
}
.tutor-bono-card button:hover:not(:disabled){filter:brightness(1.1);}
.tutor-bono-card button:active:not(:disabled){transform:scale(.98);}
.tutor-bono-card button:disabled{opacity:.6;cursor:not-allowed;}
.tutor-videocall{border-radius:16px;overflow:hidden;border:1px solid var(--dk-hairline);background:var(--dk-panel);}
.tutor-videocall-hero{
  position:relative;aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(135deg,#111a35,#0a0f22);
}
.tutor-videocall-hero::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 28% 22%,rgba(90,166,255,.28),transparent 55%),radial-gradient(circle at 78% 78%,rgba(139,92,246,.2),transparent 50%);
}
.tutor-videocall-badge{
  position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;color:#fff;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);
  border-radius:999px;padding:5px 10px 5px 8px;z-index:1;
}
.tutor-videocall-badge .led{width:6px;height:6px;border-radius:50%;background:var(--dk-critical);animation:tutor-pulse 1.6s ease-in-out infinite;}
.tutor-videocall-avatar{
  position:relative;height:64px;width:64px;border-radius:50%;display:grid;place-items:center;z-index:1;
  background:radial-gradient(circle at 35% 30%, #5aa6ff, #1c48b8 70%);box-shadow:0 0 0 6px rgba(90,166,255,.12);
}
.tutor-videocall-avatar .dot-pair{display:flex;gap:6px;}
.tutor-videocall-avatar .dot-pair span{height:8px;width:8px;border-radius:50%;background:#fff;}
.tutor-videocall-bars{display:flex;align-items:flex-end;gap:2px;height:16px;z-index:1;}
.tutor-videocall-bars span{width:3px;border-radius:2px;background:var(--dk-brand-2);animation:tutor-voice-bar 1s ease-in-out infinite;}
.tutor-videocall-bars span:nth-child(2){animation-delay:.2s;}
.tutor-videocall-bars span:nth-child(3){animation-delay:.4s;}
.tutor-videocall-bars span:nth-child(4){animation-delay:.6s;}
.tutor-videocall-tag{
  position:absolute;bottom:10px;left:10px;font-size:11px;font-weight:600;color:#fff;
  background:rgba(0,0,0,.4);backdrop-filter:blur(4px);border-radius:999px;padding:4px 10px;z-index:1;
}
.tutor-videocall-body{padding:16px;display:flex;flex-direction:column;gap:12px;}
.tutor-videocall-body h2{font-size:14.5px;font-weight:700;color:var(--dk-ink);margin:0 0 4px;}
.tutor-videocall-body p{font-size:12px;color:var(--dk-muted);line-height:1.5;margin:0;}
.tutor-videocall-controls{display:flex;align-items:center;justify-content:center;gap:10px;}
.tutor-videocall-controls button{
  height:40px;width:40px;border-radius:50%;border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;
}
.tutor-videocall-controls button.danger{background:rgba(239,68,68,.7);border-color:transparent;}
.tutor-videocall-controls button:disabled{opacity:.55;cursor:not-allowed;}
.tutor-videocall-cta{
  align-self:flex-start;border-radius:10px;border:none;background:rgba(255,255,255,.06);
  color:var(--dk-ink);font:inherit;font-size:12.5px;font-weight:600;padding:10px 16px;
}
.tutor-videocall-cta:disabled{opacity:.6;cursor:not-allowed;}
@keyframes tutor-pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
@keyframes tutor-voice-bar{0%,100%{height:4px;}50%{height:16px;}}