/* ============================================================================
   NATIVA · HOJA DE ESTILOS PRINCIPAL · v309
   Extraída del monolito en v6.3.309 (antes: primer bloque <style> del index).
   ⚠️ Este archivo DEBE subirse JUNTO al index, en la misma carpeta de GitHub.
   Validación de referencia: llaves balanceadas 1112/1112.
   ============================================================================ */

:root{
--bg:#06050f;--surface:#0e0c1e;--card:#161428;--card2:#1e1b35;
--border:rgba(255,255,255,0.07);
--mat:#8b5cf6;--len:#ec4899;--soc:#f59e0b;--nat:#10b981;
--eti:#ffd166;--art:#f43f5e;--efi:#3b82f6;--eng:#06d6a0;--ppp:#84cc16;
--accent:#8b5cf6;--accent2:#ff6b6b;--accent3:#ffd166;--accent4:#06d6a0;
--text:#f0eeff;--text2:#c4c9d4;--xp:#ffd166;--streak:#ff6b6b;
--radius:18px;--radius-sm:12px;
}
/* v6.3.300 MODO CLARO (Capa 1) — tema claro basado en la PLANTILLA PREFERIDA.
   Fondo lila claro cálido (#f4f2fb), superficies casi blancas, texto azul-tinta.
   Los acentos (materias, XP, neones) se mantienen idénticos (identidad NATIVA).
   Se activa con data-theme="light". */
html[data-theme="light"], body[data-theme="light"], [data-theme="light"]{
--bg:#f4f2fb;--surface:#ffffff;--card:#ffffff;--card2:#f6f4fd;
--border:rgba(30,20,60,0.10);
--text:#1c1830;--text2:#5b5775;
}
/* ═══════════════════════════════════════════════════════════════
   v6.3.300 MODO CLARO — SISTEMA MACRO (enfoque de raíz, no parche por parche)
   En modo claro, TODOS los fondos oscuros "quemados" del motor se reinterpretan
   a claro de golpe. Esto cubre las decenas de tonos oscuros (#0xxxxx, #1xxxxx,
   negros translúcidos) que estaban escritos a mano y no respondían al tema.
   Los colores de ACENTO (materias, XP, neones) NO se tocan: siguen vibrantes.
   Solo CSS — no toca lógica.
   ═══════════════════════════════════════════════════════════════ */

/* ── (1) FONDOS OSCUROS SÓLIDOS (inline) → superficie clara ── */
/* Familia de oscuros base (fondos de pantalla, paneles, cards oscuras) */
[data-theme="light"] [style*="background:#06050f"],[data-theme="light"] [style*="background:#060818"],
[data-theme="light"] [style*="background:#08060f"],[data-theme="light"] [style*="background:#080810"],
[data-theme="light"] [style*="background:#0a0818"],[data-theme="light"] [style*="background:#0b0a16"],
[data-theme="light"] [style*="background:#0c0a1a"],[data-theme="light"] [style*="background:#0d0b1e"],
[data-theme="light"] [style*="background:#0d1030"],[data-theme="light"] [style*="background:#0d1117"],
[data-theme="light"] [style*="background:#0e0c1e"],[data-theme="light"] [style*="background:#0f0c20"],
[data-theme="light"] [style*="background:#111438"],[data-theme="light"] [style*="background:#12101f"],
[data-theme="light"] [style*="background:#13112a"],[data-theme="light"] [style*="background:#13131a"],
[data-theme="light"] [style*="background:#161428"],[data-theme="light"] [style*="background:#161840"],
[data-theme="light"] [style*="background:#1a1535"],[data-theme="light"] [style*="background:#1a1630"],
[data-theme="light"] [style*="background:#1a1733"],[data-theme="light"] [style*="background:#1e1b35"]{
  background:var(--card) !important;
}
/* Negros translúcidos → superficie clara translúcida */
[data-theme="light"] [style*="background:rgba(0,0,0,"]{ background:rgba(30,20,60,.04) !important; }
/* Blancos translúcidos (eran tarjetas grises sobre oscuro) → lila muy claro */
[data-theme="light"] [style*="background:rgba(255,255,255,.02)"],[data-theme="light"] [style*="background:rgba(255,255,255,.03)"],
[data-theme="light"] [style*="background:rgba(255,255,255,.04)"],[data-theme="light"] [style*="background:rgba(255,255,255,.05)"],
[data-theme="light"] [style*="background:rgba(255,255,255,.06)"],[data-theme="light"] [style*="background:rgba(255,255,255,.07)"],
[data-theme="light"] [style*="background:rgba(255,255,255,.08)"],[data-theme="light"] [style*="background:rgba(255,255,255,.1)"]{
  background:rgba(139,92,246,.05) !important;
}

/* ── (2) GRADIENTES OSCUROS (inline) → claro suave conservando tinte ── */
/* Los gradientes que arrancan oscuros (cabeceras, tiles) se neutralizan a card2.
   Las tiles de materia tienen su regla propia abajo para conservar su color. */
[data-theme="light"] [style*="linear-gradient(135deg,#0"],[data-theme="light"] [style*="linear-gradient(180deg,#0"],
[data-theme="light"] [style*="linear-gradient(90deg,#0"],[data-theme="light"] [style*="linear-gradient(135deg,#1"],
[data-theme="light"] [style*="linear-gradient(180deg,#1"]{
  background:var(--card2) !important;
}

/* ── (3) TEXTOS claros → oscuros legibles ── */
[data-theme="light"] [style*="color:#fff"],[data-theme="light"] [style*="color:#ffffff"],
[data-theme="light"] [style*="color:#f0eeff"],[data-theme="light"] [style*="color:#f0e.ff"]{ color:var(--text) !important; }
[data-theme="light"] [style*="color:rgba(255,255,255,.9)"],[data-theme="light"] [style*="color:rgba(255,255,255,.8)"],
[data-theme="light"] [style*="color:rgba(255,255,255,.7)"]{ color:var(--text) !important; }
[data-theme="light"] [style*="color:rgba(255,255,255,.6)"],[data-theme="light"] [style*="color:rgba(255,255,255,.5)"],
[data-theme="light"] [style*="color:rgba(255,255,255,.55)"],[data-theme="light"] [style*="color:rgba(255,255,255,.45)"],
[data-theme="light"] [style*="color:rgba(255,255,255,.4)"],[data-theme="light"] [style*="color:rgba(255,255,255,.35)"],
[data-theme="light"] [style*="color:rgba(255,255,255,.3)"],[data-theme="light"] [style*="color:rgba(255,255,255,.25)"]{ color:var(--text2) !important; }
[data-theme="light"] [style*="color:#e2e8f0"],[data-theme="light"] [style*="color:#e5e7eb"],
[data-theme="light"] [style*="color:#f1f5f9"],[data-theme="light"] [style*="color:#cbd5e1"],
[data-theme="light"] [style*="color:#c4c9d4"]{ color:#3a3550 !important; }

/* ── (4) BORDES claros translúcidos → oscuros sutiles ── */
[data-theme="light"] [style*="rgba(255,255,255,.05)"][style*="border"],
[data-theme="light"] [style*="rgba(255,255,255,.06)"][style*="border"],
[data-theme="light"] [style*="rgba(255,255,255,.07)"][style*="border"],
[data-theme="light"] [style*="rgba(255,255,255,.08)"][style*="border"],
[data-theme="light"] [style*="rgba(255,255,255,.1)"][style*="border"]{ border-color:rgba(30,20,60,.12) !important; }

/* ── (5) CLASES CSS estructurales con fondo oscuro ── */
[data-theme="light"] .topbar,[data-theme="light"] .rpg-topbar{ background:var(--surface) !important; }
[data-theme="light"] .bottom-nav{ background:rgba(255,255,255,.97) !important; border-top:1px solid rgba(30,20,60,.10) !important; }
[data-theme="light"] .nav-item{ color:var(--text2) !important; }
[data-theme="light"] .nav-item.act{ color:var(--accent) !important; }
[data-theme="light"] .prog-bar,[data-theme="light"] .mat-bar,[data-theme="light"] .anual-mini,
[data-theme="light"] .bita-mat-bar,[data-theme="light"] .prof-xp-bar{ background:rgba(30,20,60,.10) !important; }
[data-theme="light"] select,[data-theme="light"] input,[data-theme="light"] textarea{
  background:#f6f4fd !important; color:var(--text) !important; border-color:rgba(30,20,60,.15) !important;
}

/* ── (6) TILES DE MATERIAS — claro conservando el COLOR de cada una ── */
[data-theme="light"] .tile-mat{ background:linear-gradient(135deg,#ede8fb,#f8f5fe) !important; }
[data-theme="light"] .tile-len{ background:linear-gradient(135deg,#fce4f1,#fdf3f9) !important; }
[data-theme="light"] .tile-soc{ background:linear-gradient(135deg,#fdf0db,#fdf9f0) !important; }
[data-theme="light"] .tile-nat{ background:linear-gradient(135deg,#dcf5ec,#f0fcf8) !important; }
[data-theme="light"] .tile-eti{ background:linear-gradient(135deg,#fdf2d9,#fdfaef) !important; }
[data-theme="light"] .tile-art{ background:linear-gradient(135deg,#fde0e8,#fdf2f5) !important; }
[data-theme="light"] .tile-efi{ background:linear-gradient(135deg,#dcebfa,#eff7fd) !important; }
[data-theme="light"] .tile-eng{ background:linear-gradient(135deg,#daf3ea,#eefcf6) !important; }
[data-theme="light"] .tile-ppp{ background:linear-gradient(135deg,#eef6d9,#f7fcef) !important; }
[data-theme="light"] .mat-tile [style*="color:rgba(255,255,255"]{ color:var(--text2) !important; }

/* ── (7) CLASES ESTRUCTURALES con gradiente/fondo OSCURO (multilínea) ──
   Estas tienen el fondo oscuro en el CSS (no inline), por eso los selectores
   de atributo no las alcanzaban. Se fuerzan a superficie clara en modo claro.
   La tarjeta grande del home (.rpg-pod), bloques de sesión, paneles admin, etc. */
[data-theme="light"] .rpg-pod{
  background:linear-gradient(135deg,#ffffff,#f6f4fd) !important;
  border-color:rgba(139,92,246,.20) !important;
  box-shadow:0 8px 24px rgba(120,100,200,.12) !important;
}
[data-theme="light"] .adm-header-card,
[data-theme="light"] .prof-identity-card{
  background:linear-gradient(135deg,#ffffff,#f6f4fd) !important;
  border-color:rgba(139,92,246,.18) !important;
}
[data-theme="light"] .ser-block,[data-theme="light"] .saber-block,[data-theme="light"] .hacer-block,
[data-theme="light"] .video-block,[data-theme="light"] .reto-block,[data-theme="light"] .ia-block{
  background:var(--card2) !important;
  border-color:rgba(30,20,60,.10) !important;
}
[data-theme="light"] .ug1,[data-theme="light"] .ug2,[data-theme="light"] .ug3,
[data-theme="light"] .ug4,[data-theme="light"] .ug5,[data-theme="light"] .ug6{
  background:var(--card2) !important;
}
[data-theme="light"] .reset-sec{ background:var(--card2) !important; }
[data-theme="light"] .day-done{ background:linear-gradient(135deg,#daf3ea,#eefcf6) !important; }
/* El texto dentro de la tarjeta grande del home debe ser oscuro (sublabels claros) */
[data-theme="light"] .rpg-pod-sublabel,[data-theme="light"] .rpg-pod .rpg-pod-sublabel{ color:var(--text2) !important; }

/* ── (8) FONDO GENERAL LILA (#f4f2fb de la plantilla) ──
   Asegurar que el fondo claro del body se vea: app y pantallas transparentes
   para que el lila del body sea el "fondo fondo". */
[data-theme="light"] body{ background:var(--bg) !important; }
[data-theme="light"] #app,[data-theme="light"] .screen{ background:transparent !important; }

/* ── (9) TEXTOS claros ilegibles — barrido amplio ──
   Muchos textos usan colores claros únicos (#e2d9f3, #d4edda, #c4c9d4, #f0eeff,
   #e2e8f0, etc.) que sobre fondo claro no se leen. Se fuerzan a texto oscuro,
   PERO solo dentro de zonas de contenido (no botones de color sólido). */
[data-theme="light"] .rpg-luma-bubble,
[data-theme="light"] .rpg-luma-bubble *,
[data-theme="light"] .luma-tu,[data-theme="light"] .luma-me{
  color:var(--text) !important;
}
/* El texto em (cursiva) de Luma usaba verde claro rgba(167,243,208) → oscuro */
[data-theme="light"] .rpg-luma-bubble em{ color:#3a7a5c !important; }
[data-theme="light"] .rpg-luma-bubble strong{ color:#0a9d6e !important; }
/* Textos con tonos claros varios (cubre los que faltaban) */
[data-theme="light"] [style*="color:#e2d9f3"],[data-theme="light"] [style*="color:#d4edda"],
[data-theme="light"] [style*="color:#ddd"],[data-theme="light"] [style*="color:#eee"],
[data-theme="light"] [style*="color:#f5f5f5"],[data-theme="light"] [style*="color:#fafafa"],
[data-theme="light"] [style*="color:#d1d5db"],[data-theme="light"] [style*="color:#9ca3af"],
[data-theme="light"] [style*="color:#94a3b8"],[data-theme="light"] [style*="color:#a0aec0"]{
  color:var(--text2) !important;
}
/* Títulos de momentos (Objetivo·Sesión, etc.) que quedaban blancos sobre blanco */
[data-theme="light"] .explain-title{ color:var(--text) !important; }
/* Textarea de evidencia: fondo claro y texto oscuro (estaba rgba oscuro) */
[data-theme="light"] textarea,
[data-theme="light"] .screen select,
[data-theme="light"] #app input[type="text"],[data-theme="light"] #app input[type="email"],
[data-theme="light"] #app input[type="password"],[data-theme="light"] #app input[type="number"],
[data-theme="light"] #app textarea,[data-theme="light"] #app select{
  background:#f6f4fd !important; color:var(--text) !important;
}
[data-theme="light"] ::placeholder{ color:#9089a5 !important; }
/* Botón "Guardar evidencia" y similares con texto claro sobre fondo claro */
[data-theme="light"] .mat-btn-send,[data-theme="light"] .mat-btn-primary{ color:#ffffff !important; }
/* Refuerzo: dentro de tarjetas claras (.rpg-pod, bloques), los textos var(--text)
   ya funcionan; pero los strong/em con color inline claro se fuerzan */
[data-theme="light"] .rpg-pod [style*="color:#fff"],
[data-theme="light"] .rpg-pod strong,[data-theme="light"] .rpg-pod em{ color:var(--text) !important; }
/* Refuerzo amplio: TODOS los textos dentro del pod grande del home (TU NIVEL
   ACTUAL, Progreso anual, Nivel 1 Exploradora, números) → legibles. Excepto los
   que ya tienen color de acento propio (chips XP/racha). */
[data-theme="light"] .rpg-pod-label,
[data-theme="light"] .rpg-prog-header-lbl,
[data-theme="light"] .rpg-prog-header-pct,
[data-theme="light"] .rpg-pod-sublabel{ color:var(--text2) !important; }
[data-theme="light"] .rpg-nivel-main{ color:var(--text) !important; }

/* ── (11) TEXTOS CON DEGRADADO (-webkit-background-clip:text) ──
   Varios títulos (Nivel X Exploradora, PROGRESO ANUAL, etc.) pintan el texto con
   un degradado de colores claros y lo vuelven transparente. Sobre fondo claro
   quedan casi invisibles. En modo claro se anula el efecto y se usa color sólido.
   Nota: BUENOS DÍAS (.rpg-greet) y el nombre (.rpg-name) se dejan con su color
   dorado/degradado porque sí se leen y se ven bonitos. */
[data-theme="light"] .rpg-nivel-main,
[data-theme="light"] .rpg-prog-header-lbl,
[data-theme="light"] .rpg-pod-sublabel{
  -webkit-text-fill-color:currentColor !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  background:none !important;
}
[data-theme="light"] .rpg-nivel-main{ color:var(--text) !important; }
[data-theme="light"] .rpg-prog-header-lbl,[data-theme="light"] .rpg-pod-sublabel{ color:var(--text2) !important; }

/* ── (10) MOMENTOS DE SESIÓN (lesson) — barra, bloques y textos ──
   La barra superior del momento era negra (#06050f) y los textos de los bloques
   (SER, Objetivo, Explicación, Reto, IA, Interactivo, Cierre) eran claros. */
[data-theme="light"] .lesson-top{
  background:#ffffff !important;
  border-bottom:2px solid rgba(139,92,246,.20) !important;
  box-shadow:0 4px 16px rgba(120,100,200,.10) !important;
}
/* La barra de PESTAÑAS del momento (.step-pills) también era negra (#06050f) */
[data-theme="light"] .step-pills{
  background:#ffffff !important;
  border-bottom:1px solid rgba(139,92,246,.15) !important;
}
/* El subtítulo "Sesión X" bajo la barra (#lesson-gps) era una franja negra */
[data-theme="light"] #lesson-gps{
  background:#ffffff !important;
  color:var(--text2) !important;
  border-bottom:1px solid rgba(139,92,246,.10) !important;
}
[data-theme="light"] #lesson-gps *{ color:var(--text2) !important; }
/* El subtítulo bajo la barra (Sesión X) con fondo negro inline */
[data-theme="light"] [style*="background:#06050f"]{ background:#ffffff !important; }
/* Las OPCIONES de respuesta (quiz A/B/C/D, Verdadero/Falso, dilema SER) ──
   usan var(--text) pero se veían atenuadas; se fuerza texto oscuro y opacidad
   plena para que se lean bien. */
[data-theme="light"] .opt-btn,
[data-theme="light"] .opt-btn *,
[data-theme="light"] .ren-choice-btn,
[data-theme="light"] .ren-choice-btn *,
[data-theme="light"] .dilema-opts button,
[data-theme="light"] .dilema-opts button *{
  color:var(--text) !important;
  opacity:1 !important;
}
[data-theme="light"] .lesson-top [style*="color:rgba(255,255,255"]{ color:var(--text) !important; }
[data-theme="light"] .lesson-prog-label{ color:var(--text2) !important; }
/* Textos de TODOS los bloques de momento → oscuros legibles */
[data-theme="light"] .explain-title,[data-theme="light"] .block-title{ color:var(--text) !important; }
[data-theme="light"] .explain-text,[data-theme="light"] .block-text,
[data-theme="light"] .ser-block,[data-theme="light"] .ser-block *,
[data-theme="light"] .saber-block,[data-theme="light"] .saber-block *,
[data-theme="light"] .reto-block,[data-theme="light"] .reto-block *,
[data-theme="light"] .ia-block,[data-theme="light"] .ia-block *,
[data-theme="light"] .video-block,[data-theme="light"] .video-block *,
[data-theme="light"] .hacer-block,[data-theme="light"] .hacer-block *{
  color:var(--text) !important;
}
/* Las opciones de quiz/reto (textos que se veían casi invisibles) */
[data-theme="light"] [style*="color:rgba(255,255,255,.5)"],
[data-theme="light"] [style*="color:rgba(255,255,255,.6)"],
[data-theme="light"] [style*="color:rgba(255,255,255,.88)"],
[data-theme="light"] [style*="color:rgba(255,255,255,.85)"]{ color:var(--text) !important; }
/* Botones grandes de momento (Siguiente, Empecemos) con texto claro: dejar blanco
   sobre su fondo morado (ya tienen fondo de color, el texto blanco está bien) */
[data-theme="light"] .moment-next-btn,[data-theme="light"] .lesson-next-btn{ color:#ffffff !important; }
/* Desactivar el modo-lectura especial: ahora todo el tema claro lo cubre, evita
   conflictos. Se neutraliza para que use las reglas generales del tema claro. */
[data-theme="light"] .lesson-content.modo-lectura .explain-block{ background:var(--card2) !important; }
[data-theme="light"] .lesson-content.modo-lectura .explain-title{ color:var(--text) !important; }
[data-theme="light"] .lesson-content.modo-lectura .explain-text{ color:var(--text) !important; }

/* ── (12) v6.3.300 — RINCONES TENUES DETECTADOS EN CAPTURAS ──
   Elementos que en oscuro se ven bien pero en claro quedaban casi invisibles:
   franja de frase de Luma, botones grandes deshabilitados, opciones de quiz/reto,
   badge "Modo lectura", botones secundarios y chips de premio. Solo CSS, no toca
   lógica: los deshabilitados SIGUEN deshabilitados, solo se vuelven legibles. */

/* (12.1) Franja de frase del momento (#luma-lesson-banner): era negra (#06050f)
   con texto verde. En claro: superficie clara y texto verde-bosque legible. */
[data-theme="light"] #luma-lesson-banner{
  background:#eef7ee !important;
  color:#2f7d32 !important;
  border-bottom:1px solid rgba(45,90,39,.18) !important;
  box-shadow:0 2px 8px rgba(120,100,200,.08) !important;
}

/* (12.2) Botones grandes de momento (.btn-primary) — incluido el estado
   deshabilitado (opacity:.4 inline). El texto era blanco → invisible en lila claro.
   En claro: texto morado oscuro legible aunque esté deshabilitado. El gradiente
   de fondo es claro, así que el blanco no se leía. */
[data-theme="light"] .btn-primary{ color:#ffffff !important; }
[data-theme="light"] .btn-primary[disabled],
[data-theme="light"] .btn-primary:disabled{
  background:linear-gradient(135deg,#cdbef0,#ddd3f7) !important;
  color:#5b21b6 !important;
  box-shadow:none !important;
  opacity:.85 !important;
}

/* (12.3) Opciones de respuesta del QUIZ interactivo (#aopts-N button) y del SER
   (.dilema-btn): forzar texto oscuro y opacidad plena en estado normal. Cuando ya
   están respondidas el JS les pone color:#fff inline con !important, que gana. */
[data-theme="light"] [id^="aopts-"] button,
[data-theme="light"] .dilema-btn{
  color:var(--text) !important;
  opacity:1 !important;
}
/* El contexto del dilema (.dilema-ctx) y la pregunta del reto */
[data-theme="light"] .dilema-ctx{ color:var(--text) !important; }

/* (12.4) Botón "Modo lectura" dentro de la explicación: usaba color:#c4b5fd inline
   (lila claro) → invisible sobre blanco. En claro: morado oscuro legible. */
[data-theme="light"] #btn-modo-lectura{
  color:#6d28d9 !important;
  background:rgba(139,92,246,.10) !important;
  border-color:rgba(139,92,246,.35) !important;
  opacity:1 !important;
}

/* (12.5) Botones secundarios (.btn-sec): "Escuchar explicación", etc. */
[data-theme="light"] .btn-sec{
  color:#6d28d9 !important;
  border-color:rgba(139,92,246,.35) !important;
  background:rgba(139,92,246,.06) !important;
}

/* (12.6) Botones con texto morado claro inline (Otra pista, Otra explicación):
   #a78bfa sobre blanco casi no se ve → morado más oscuro. */
[data-theme="light"] [style*="color:#a78bfa"]{ color:#7c3aed !important; }

/* (12.7) Chips de premio al final del cierre (+XP, Racha): fondos rgba muy suaves
   sobre claro. El texto de color (var(--xp)/var(--streak)) se mantiene; solo se
   refuerza el fondo para que el chip se distinga de la página. */
[data-theme="light"] [style*="background:rgba(255,107,107,.08)"]{
  background:rgba(255,107,107,.12) !important;
  border-color:rgba(255,107,107,.35) !important;
}
[data-theme="light"] [style*="background:rgba(255,209,102,.08)"]{
  background:rgba(245,158,11,.12) !important;
  border-color:rgba(245,158,11,.3) !important;
}

/* (12.8) Color lila claro inline (#c4b5fd) usado en varios botones/textos:
   sobre fondo claro casi no se ve. Se oscurece a morado legible. */
[data-theme="light"] [style*="color:#c4b5fd"]{ color:#7c3aed !important; }

/* (12.9) IA Tutora — texto de respuesta (.ia-resp-txt) usa color:#d1d5db (gris
   claro) sobre fondo oscuro rgba(0,0,0,.15). En claro: texto oscuro sobre
   superficie clara. */
[data-theme="light"] .ia-resp-txt{ color:var(--text) !important; }
[data-theme="light"] [style*="color:#d1d5db"]{ color:var(--text) !important; }
[data-theme="light"] .ia-resp-txt[style*="background:rgba(0,0,0,.15)"],
[data-theme="light"] [style*="background:rgba(0,0,0,.15)"]{ background:var(--card2) !important; }

/* ── (13) v6.3.301 — TEXTOS BLANCOS HARDCODEADOS EN PANELES ──
   Facilitador, Tutor, Admin y Perfil usan color:#fff / rgba(255,255,255,..)
   fijos (pensados para fondo oscuro). Sobre superficie clara desaparecían.
   Se mapean a las variables de texto del tema. NO se tocan los blancos que van
   sobre fondos de color sólido (botones morados/rojos/gradientes): esos quedan
   blancos a propósito. Solo CSS, no toca lógica. */

/* (13.1) Rendimiento Académico — nombre de asignatura y detalle (img 1) */
[data-theme="light"] .tv2-mc-name{ color:var(--text) !important; }
[data-theme="light"] .tv2-mc-chev{ color:var(--text2) !important; }
[data-theme="light"] .tv2-per-sec-lbl{ color:var(--text2) !important; }
[data-theme="light"] .tv2-mc-avbar{ background:rgba(30,20,60,.10) !important; }
[data-theme="light"] .tv2-mc-det{ background:rgba(30,20,60,.03) !important; }

/* (13.2) Centro de Diagnósticos — títulos de tarjeta (img 2) */
[data-theme="light"] .tv2-diag-title{ color:var(--text) !important; }

/* (13.3) Panel Tutor — Notas por sesión (nombre asignatura) */
[data-theme="light"] .tutor-mat-name{ color:var(--text) !important; }
[data-theme="light"] .tutor-mat-prog{ color:var(--text2) !important; }
[data-theme="light"] .tutor-mat-arrow{ color:var(--text2) !important; }

/* (13.4) Bitácora — números de estadística */
[data-theme="light"] .bita-stat-num{ color:var(--text) !important; }

/* (13.5) Panel Admin — títulos y valores sobre tarjeta clara */
[data-theme="light"] .adm-header-title{ color:var(--text) !important; }
[data-theme="light"] .adm-header-sub{ color:var(--text2) !important; }
[data-theme="light"] .adm-stat-val{ color:var(--text) !important; }
[data-theme="light"] .adm-select{ color:var(--text) !important; }

/* (13.6) Perfil — nombre e identidad sobre tarjeta clara */
[data-theme="light"] .prof-id-name{ color:var(--text) !important; }
[data-theme="light"] .prof-id-full,
[data-theme="light"] .prof-xp-labels,
[data-theme="light"] .prof-xp-falta{ color:var(--text2) !important; }

/* (13.7) Explicación de lección — título y texto del cuerpo */
[data-theme="light"] .explain-title{ color:var(--text) !important; }
[data-theme="light"] .block-text{ color:var(--text) !important; }
[data-theme="light"] .lesson-prog-label{ color:var(--text2) !important; }

/* (13.8) Matrícula / Renovación — etiquetas y descripciones tenues */
[data-theme="light"] .ren-step-lbl,
[data-theme="light"] .ren-field-lbl,
[data-theme="light"] .ren-doc-desc{ color:var(--text2) !important; }
[data-theme="light"] .ren-dot{ color:var(--text2) !important; border-color:rgba(30,20,60,.18) !important; }

/* (13.9) BARRIDO de respaldo — botones/enlaces de panel con texto blanco inline
   que están sobre fondos translúcidos claros. Cubre "Ver componente interactivo"
   (texto gris sobre blanco) y bloques del Informe por Período / Matrícula del
   panel Tutor (img 5, 6), donde el texto va en color claro inline. */
[data-theme="light"] [style*="color:rgba(255,255,255,.7)"],
[data-theme="light"] [style*="color:rgba(255,255,255,.75)"],
[data-theme="light"] [style*="color:rgba(255,255,255,.8)"],
[data-theme="light"] [style*="color:rgba(255,255,255,.88)"],
[data-theme="light"] [style*="color:rgba(255,255,255,.9)"]{ color:var(--text) !important; }
[data-theme="light"] [style*="color:rgba(255,255,255,.4)"],
[data-theme="light"] [style*="color:rgba(255,255,255,.45)"],
[data-theme="light"] [style*="color:rgba(255,255,255,.5)"],
[data-theme="light"] [style*="color:rgba(255,255,255,.55)"],
[data-theme="light"] [style*="color:rgba(255,255,255,.6)"],
[data-theme="light"] [style*="color:rgba(255,255,255,.65)"]{ color:var(--text2) !important; }

/* (13.10) Informe por Período — pills P1-P4 y botón de descarga. El fondo
   rgba(255,255,255,.05/.08) es invisible sobre claro; se hace visible. Los pills
   bloqueados conservan su opacity:.35 inline (siguen viéndose "en espera"). */
[data-theme="light"] .tv2-per-btn{
  background:rgba(139,92,246,.08) !important;
  color:var(--text2) !important;
  border-color:rgba(30,20,60,.10) !important;
}
[data-theme="light"] .tv2-pdf-btn:disabled{
  background:rgba(30,20,60,.06) !important;
  color:var(--text2) !important;
}

/* (13.11) Botones de Matrícula — colores propios (#06d6a0 verde, #60a5fa azul)
   sobre fondos muy claros quedaban lavados. Se oscurecen para buen contraste. */
[data-theme="light"] [style*="color:#06d6a0"]{ color:#059669 !important; }
[data-theme="light"] [style*="color:#60a5fa"]{ color:#2563eb !important; }
[data-theme="light"] [style*="color:#f43f5e"]{ color:#e11d48 !important; }

/* ── (14) v6.3.302 — BOTONES "FANTASMA" EN CABECERAS Y PANELES ──
   Botones de acción con color pastel claro sobre fondo translúcido claro:
   "Cerrar sesión", "Revisar →", "Promover grado", "Pedir análisis a Luma",
   pestañas de Seguimiento, estados de matrícula, etc. En oscuro contrastan;
   en claro quedaban casi invisibles. Se oscurecen los colores de acento
   pastel y se refuerzan los fondos. Solo CSS, no toca lógica. */

/* (14.1) Colores pastel de acento que faltaban por mapear en modo claro.
   Solo afectan [data-theme="light"], así que en oscuro siguen vibrantes. */
[data-theme="light"] [style*="color:#f87171"]{ color:#dc2626 !important; }  /* rojo  */
[data-theme="light"] [style*="color:#4ade80"]{ color:#16a34a !important; }  /* verde */
[data-theme="light"] [style*="color:#6ee7b7"]{ color:#059669 !important; }  /* verde menta */
[data-theme="light"] [style*="color:#fbbf24"]{ color:#b45309 !important; }  /* ámbar */
[data-theme="light"] [style*="color:#34d399"]{ color:#059669 !important; }
[data-theme="light"] [style*="color:#fb7185"]{ color:#e11d48 !important; }
[data-theme="light"] [style*="color:#93c5fd"]{ color:#2563eb !important; }

/* (14.2) "Cerrar sesión" (cabecera de cada panel): fondo rojo translúcido casi
   invisible → algo más marcado para que el botón se vea. El color ya lo arregla 14.1. */
[data-theme="light"] [style*="background:rgba(220,38,38,.15)"]{
  background:rgba(220,38,38,.10) !important;
  border-color:rgba(220,38,38,.30) !important;
}

/* (14.3) "Revisar →" (evidencias por revisar): fondo lila translúcido. */
[data-theme="light"] [style*="background:rgba(167,139,250,.15)"]{
  background:rgba(124,58,237,.10) !important;
  border-color:rgba(124,58,237,.30) !important;
}

/* (14.4) "Promover grado" / "Renovación"/"Matriculado" — fondos verdes/azules muy claros */
[data-theme="light"] [style*="background:rgba(6,214,160,.12)"],
[data-theme="light"] [style*="background:rgba(74,222,128,.1)"]{
  background:rgba(5,150,105,.10) !important;
  border-color:rgba(5,150,105,.30) !important;
}
[data-theme="light"] [style*="background:rgba(96,165,250,.1)"]{
  background:rgba(37,99,235,.08) !important;
  border-color:rgba(37,99,235,.28) !important;
}

/* (14.5) Pestañas de Seguimiento Familiar (Matrícula/Pagos/Estado/Notas/Historial):
   usan color:rgba(255,255,255,.35) — ya van a --text2 por el barrido general, pero
   se asegura aquí explícitamente para los botones de pestaña tipo "background:none". */
[data-theme="light"] [id^="segtab-"]{ color:var(--text2) !important; }
[data-theme="light"] [id^="segtab-"].activo,
[data-theme="light"] [id^="segtab-"][style*="border-bottom:2px solid"]{ color:var(--accent) !important; }

/* (14.6) Banners NEGROS de cabecera que seguían oscuros en claro:
   - .ud-header (mapa de sesiones / vista de unidad del estudiante): rgba(6,5,15,.96)
   - sticky header "Vista de Unidad" del Currículo: rgba(6,5,15,.95) inline
   Se pasan a superficie clara. Los textos internos ya van oscuros por los barridos. */
[data-theme="light"] .ud-header{
  background:#ffffff !important;
  border-bottom:1px solid rgba(139,92,246,.18) !important;
}
[data-theme="light"] [style*="background:rgba(6,5,15,.95)"],
[data-theme="light"] [style*="background:rgba(6,5,15,.96)"],
[data-theme="light"] [style*="background:rgba(6,5,15,.98)"]{
  background:#ffffff !important;
}
/* Textos del .ud-header (título de unidad, breadcrumb) → oscuros */
[data-theme="light"] .ud-header [style*="color:#fff"],
[data-theme="light"] .ud-header [style*="color:rgba(255,255,255"]{ color:var(--text) !important; }

/* ── (15) v6.3.303 — AUDITORÍA EXHAUSTIVA DE CLASES CSS ──
   Barrido sistemático de TODAS las clases con texto blanco/pastel hardcodeado
   sobre superficie clara (auditadas una por una contra el tema oscuro). Las que
   van sobre fondo de color sólido (botones morados, día actual, badges con
   gradiente) NO se tocan: el blanco ahí es correcto. Solo CSS, no toca lógica. */

/* (15.1) Textos #fff sobre tarjeta/superficie clara → texto oscuro */
[data-theme="light"] .aldea-pct-orb-val,
[data-theme="light"] .tv2-aldea-label span:first-child,
[data-theme="light"] .badge-modal-name,
[data-theme="light"] .tutor-uni-name,
[data-theme="light"] .tv2-modal-title{ color:var(--text) !important; }

/* (15.2) Textos rgba(255,255,255,..) tenues sobre superficie clara → text2 */
[data-theme="light"] .mat-prog,
[data-theme="light"] .cg-lock .cg-num,
[data-theme="light"] .cg-lock-ico,
[data-theme="light"] .aldea-capas-info,
[data-theme="light"] .tv2-sd-ok,
[data-theme="light"] .tv2-sd-pen{ color:var(--text2) !important; }

/* (15.3) Botones de cerrar de modales (×) con color pastel → morado legible */
[data-theme="light"] #comp-modal-close,
[data-theme="light"] .tv2-modal-close{ color:var(--text2) !important; }

/* (15.4) Acentos pastel sobre superficie clara → versión oscura del mismo matiz.
   splash-student, nav-profile activo, badges, canales de música, voz de Luma. */
[data-theme="light"] .splash-student,
[data-theme="light"] .badge-act,
[data-theme="light"] .music-channel.active-ch{ color:#7c3aed !important; }
[data-theme="light"] #nav-profile.act{ color:#b45309 !important; }
[data-theme="light"] .luma-voz-btn{ color:#059669 !important; }

/* (15.5) Chips de NIVEL (Superior/Alto/Básico/Bajo) — pills y celdas de sesión.
   El fondo de color tenue se ve casi blanco en claro; se oscurece el texto
   conservando el matiz (verde/azul/ámbar/rojo) y se refuerza un poco el fondo. */
[data-theme="light"] .tv2-pp-sup,[data-theme="light"] .tv2-sd-sup{ color:#15803d !important; background:rgba(34,197,94,.16) !important; }
[data-theme="light"] .tv2-pp-alt,[data-theme="light"] .tv2-sd-alt{ color:#1d4ed8 !important; background:rgba(96,165,250,.16) !important; }
[data-theme="light"] .tv2-pp-bas,[data-theme="light"] .tv2-sd-bas{ color:#b45309 !important; background:rgba(251,191,36,.18) !important; }
[data-theme="light"] .tv2-pp-baj,[data-theme="light"] .tv2-sd-baj{ color:#b91c1c !important; background:rgba(239,68,68,.14) !important; }
[data-theme="light"] .tv2-pp-pct{ color:#7c3aed !important; }
[data-theme="light"] .tv2-pp-pen{ color:var(--text2) !important; }

/* (15.6) Rarezas de insignias (texto de color sobre tarjeta clara) */
[data-theme="light"] .rarity-rara{ color:#059669 !important; }
[data-theme="light"] .rarity-epica{ color:#2563eb !important; }
[data-theme="light"] .rarity-legendaria{ color:#7c3aed !important; }
[data-theme="light"] .rarity-mitica{ color:#b45309 !important; }

/* (15.7) Dilema SER — botón elegido (chosen) usa color:#fff pero su fondo se
   vuelve sólido de color al elegir (ámbar/verde con .4 alpha). Mantener blanco
   sólo cuando ya está elegido (tiene fondo de color); en estado normal el texto
   ya es oscuro por el sub-bloque 12. Aquí se asegura el blanco del elegido. */
[data-theme="light"] .dilema-btn.chosen-A,
[data-theme="light"] .dilema-btn.chosen-B{ color:#ffffff !important; }

/* (15.8) tv2-per-btn.activo: al activarse recibe fondo de color por inline, así
   que el texto debe poder ser de color (no forzar). El barrido lo maneja; aquí
   sólo se garantiza contraste del estado activo con borde de color. */

/* (15.9) BARRIDO COMPLETO DE OPACIDADES DE BLANCO COMO TEXTO.
   Cubre exhaustivamente toda opacidad de rgba(255,255,255,X) usada como color
   de texto en estilos inline/JS. Altas (≥.7) → texto principal; medias/bajas →
   texto secundario. Las que aparecen sólo como fondo/borde no se ven afectadas
   porque el selector exige "color:". */
[data-theme="light"] [style*="color:rgba(255,255,255,.7)"],
[data-theme="light"] [style*="color:rgba(255,255,255,.75)"],
[data-theme="light"] [style*="color:rgba(255,255,255,.78)"],
[data-theme="light"] [style*="color:rgba(255,255,255,.8)"],
[data-theme="light"] [style*="color:rgba(255,255,255,.82)"],
[data-theme="light"] [style*="color:rgba(255,255,255,.85)"],
[data-theme="light"] [style*="color:rgba(255,255,255,.88)"],
[data-theme="light"] [style*="color:rgba(255,255,255,.9)"],
[data-theme="light"] [style*="color:rgba(255,255,255,.95)"],
[data-theme="light"] [style*="color:rgba(255,255,255,1)"]{ color:var(--text) !important; }
[data-theme="light"] [style*="color:rgba(255,255,255,.65)"],
[data-theme="light"] [style*="color:rgba(255,255,255,.6)"],
[data-theme="light"] [style*="color:rgba(255,255,255,.55)"],
[data-theme="light"] [style*="color:rgba(255,255,255,.5)"],
[data-theme="light"] [style*="color:rgba(255,255,255,.45)"],
[data-theme="light"] [style*="color:rgba(255,255,255,.4)"],
[data-theme="light"] [style*="color:rgba(255,255,255,.38)"],
[data-theme="light"] [style*="color:rgba(255,255,255,.35)"],
[data-theme="light"] [style*="color:rgba(255,255,255,.3)"],
[data-theme="light"] [style*="color:rgba(255,255,255,.25)"],
[data-theme="light"] [style*="color:rgba(255,255,255,.2)"],
[data-theme="light"] [style*="color:rgba(255,255,255,.15)"]{ color:var(--text2) !important; }

/* (15.10) RESPALDO DE SUPERFICIES pintadas con gradiente OSCURO por JS inline.
   Aunque el helper _temaFondo() ya las aclara al renderizar en claro, una vista
   generada ANTES de activar el tema (o no regenerada al cambiarlo) conservaría el
   gradiente oscuro. Este respaldo CSS lo corrige siempre: si la clase de
   superficie está en modo claro, va a --card pase lo que pase en el inline.
   Los gradientes de COLOR vibrante (barras XP, botones) NO usan estas clases. */
[data-theme="light"] .ntv-mat-card{
  background:var(--card) !important;
  box-shadow:0 2px 10px rgba(120,100,200,.08) !important;
}
[data-theme="light"] .ntv-mat-card.done{ background:var(--card2) !important; }
[data-theme="light"] .tv2-diag-card,
[data-theme="light"] .tv2-mc,
[data-theme="light"] .aldea-canvas,
[data-theme="light"] .aldea-header{ background:var(--card) !important; }

/* (15.11) ⭐ CAUSA RAÍZ TRANSVERSAL: el catch-all de botones genéricos dentro de
   .screen los pinta con fondo blanco-translúcido y texto gris-lavanda claro
   (rgba(220,220,235,.8)) con !important, pensado para fondo oscuro. En claro eso
   es ilegible y vencía a las reglas anteriores. Aquí se reescribe para modo claro
   con la MISMA especificidad de :not() + el prefijo de tema (que añade peso), así
   que gana. Botones legibles en todos los paneles. */
[data-theme="light"] .screen button:not(.btn-primary):not(.btn-sec):not(.back-btn):not(.nav-item):not(.emo-btn):not(.rpg-config-btn):not([class*="adm-"]):not([class*="quiz-"]):not([class*="sp"]):not([id*="mic"]){
  background:rgba(139,92,246,.07) !important;
  border:1px solid rgba(30,20,60,.12) !important;
  color:var(--text) !important;
}
[data-theme="light"] .screen button:not(.btn-primary):not(.btn-sec):not(.back-btn):not(.nav-item):not(.emo-btn):not(.rpg-config-btn):not([class*="adm-"]):not([class*="quiz-"]):not([class*="sp"]):not([id*="mic"]):active{
  background:rgba(139,92,246,.16) !important;
  border-color:rgba(139,92,246,.5) !important;
}

/* (15.12) ⭐ Gris-lavanda rgba(220,220,235,.X) usado como texto secundario en
   todo el CSS estructural (.rpg-*, inputs, plantillas JS). En claro → text2. */
[data-theme="light"] [style*="color:rgba(220,220,235"],
[data-theme="light"] .rpg-pod-sublabel,
[data-theme="light"] .rpg-player-name,
[data-theme="light"] .rpg-prog-header-lbl{ color:var(--text2) !important; }
/* Inputs/textarea/select del .screen (tenían fondo y texto oscuros) */
[data-theme="light"] .screen input,[data-theme="light"] .screen textarea,
[data-theme="light"] .screen select,[data-theme="light"] #app input,
[data-theme="light"] #app textarea,[data-theme="light"] #app select{
  background:#f6f4fd !important;
  border:1px solid rgba(30,20,60,.15) !important;
  color:var(--text) !important;
}

/* ── (16) v6.3.304 — TABLA DE NOTAS, TÍTULO DE CURRÍCULO Y MINIJUEGOS ── */

/* (16.1) MATRIZ DE NOTAS POR SESIÓN (Tutor/Facilitador). Las filas "Pendiente"
   se generan con <tr style="opacity:.4"> + texto blanco → casi invisibles en
   claro. Dentro de los contenedores de matriz (#fmat-*) se sube la opacidad y
   se fuerza texto oscuro en toda la tabla. No toca _facRenderMatriz (lógica). */
[data-theme="light"] [id^="fmat-"] table{ color:var(--text) !important; }
[data-theme="light"] [id^="fmat-"] table tr{ opacity:1 !important; }
[data-theme="light"] [id^="fmat-"] table th,
[data-theme="light"] [id^="fmat-"] table td{ color:var(--text) !important; }
[data-theme="light"] [id^="fmat-"] table tr[style*="opacity:.4"] td{ color:var(--text2) !important; }
[data-theme="light"] [id^="fmat-"] table [style*="color:rgba(255,255,255"]{ color:var(--text2) !important; }
/* La cabecera de materia colapsable (#fmat header) usa color:#fff sobre fondo
   de color tenue → texto oscuro del color de la materia lo maneja el inline;
   el nombre #fff se oscurece. */
[data-theme="light"] [id^="fmat-"] [style*="color:#fff"]{ color:var(--text) !important; }

/* También la tabla equivalente que arma _tutorRenderNotas / panel tutor: cubrir
   cualquier tabla con filas opacity:.4 dentro de las pantallas de seguimiento. */
[data-theme="light"] .screen table tr[style*="opacity:.4"]{ opacity:1 !important; }
[data-theme="light"] .screen table tr[style*="opacity:.4"] td{ color:var(--text2) !important; }

/* (16.2) CURRÍCULO — el "cuadrito vacío" superior izquierdo es el título del
   panel (badge/título que usa texto claro sobre fondo claro). Se fuerza visible. */
[data-theme="light"] #screen-contenido .panel-title,
[data-theme="light"] #screen-contenido [style*="color:#fff"],
[data-theme="light"] #screen-contenido [style*="color:rgba(255,255,255"]{ color:var(--text) !important; }

/* (16.3) ⭐ TÍTULOS DE CABECERA CON GRADIENTE (.greet/.name de las topbars de
   paneles). Usan -webkit-text-fill-color:transparent + background-clip:text para
   pintar el texto con un gradiente. Si el clip se pierde (border-box), el texto
   queda TRANSPARENTE = invisible (el "cuadrito vacío" del Currículo). En modo
   claro se restaura un relleno sólido legible y se mantiene el degradado sólo si
   el clip sigue activo. Cubre los ~30 títulos de cabecera de todos los paneles. */
[data-theme="light"] .topbar .greet,
[data-theme="light"] .topbar .name,
[data-theme="light"] .rpg-topbar .greet,
[data-theme="light"] .rpg-topbar .name,
[data-theme="light"] [style*="-webkit-text-fill-color:transparent"][style*="background-clip:text"],
[data-theme="light"] [style*="-webkit-background-clip:text"]{
  -webkit-text-fill-color:currentColor !important;
  color:var(--text) !important;
  background:none !important;
}
/* El subtítulo "greet" (línea superior pequeña) un poco más suave */
[data-theme="light"] .topbar .greet,
[data-theme="light"] .rpg-topbar .greet{ color:var(--text2) !important; }

/* (16.4) MINIJUEGOS — integrar el modal al tema claro (antes quedaba con
   "partes negras" junto al resto claro). Se aclaran fondo, cabecera y tarjetas
   selectoras. El iframe del juego conserva su propio fondo (cada juego lo maneja).
   Los títulos con gradiente de la cabecera ya se restauran por la regla 16.3. */
[data-theme="light"] #minijuegos-modal{ background:var(--bg) !important; }
[data-theme="light"] #minijuegos-modal [style*="background:rgba(6,5,15,.98)"]{
  background:var(--surface) !important;
  border-bottom:1px solid rgba(139,92,246,.18) !important;
}
[data-theme="light"] #minijuegos-modal #btn-mj-g7{
  background:rgba(139,92,246,.12) !important;
  color:var(--text) !important;
}
[data-theme="light"] #minijuegos-modal #btn-mj-tetris{
  background:rgba(6,214,160,.12) !important;
  color:var(--text) !important;
}
[data-theme="light"] #minijuegos-modal #btn-mj-g7 span,
[data-theme="light"] #minijuegos-modal #btn-mj-tetris span{ color:var(--text2) !important; }
[data-theme="light"] #minijuegos-modal [onclick*="_cerrarMinijuegos"]{
  background:rgba(30,20,60,.06) !important;
  border:1.5px solid rgba(30,20,60,.18) !important;
  color:var(--text) !important;
}
[data-theme="light"] #minijuegos-iframe{ background:var(--card) !important; }

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

/* ── SCROLLBAR GLOBAL NATIVA ── */
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(139,92,246,.45),rgba(6,214,160,.3));border-radius:99px;}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(139,92,246,.75),rgba(6,214,160,.55));}
::-webkit-scrollbar-corner{background:transparent;}
html{scroll-behavior:smooth;height:100%;overflow:hidden;}
body{overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Nunito',sans-serif;
background:var(--bg);color:var(--text);height:100%;overflow-x:hidden;
font-size:15px;}

/* SPLASH */
#splash{display:none;}
#splash.hidden-by-session{display:none!important;}
.splash-logo-img{width:min(280px,75vw);height:auto;margin-bottom:20px;
animation:popIn .9s cubic-bezier(.34,1.56,.64,1) both;}
.splash-brand{font-size:clamp(2rem,8vw,3.2rem);font-weight:900;
background:linear-gradient(135deg,#a78bfa,#f472b6,#34d399);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
letter-spacing:.05em;animation:popIn .9s ease .2s both;}
.splash-slogan{font-size:clamp(.8rem,2.5vw,.95rem);color:var(--text2);
margin-top:6px;animation:fadeUp .8s ease .4s both;text-align:center;
font-style:italic;}
.splash-student{font-size:clamp(1rem,3.5vw,1.2rem);color:#a78bfa;
margin-top:8px;font-weight:800;animation:fadeUp .8s ease .5s both;}
.splash-bar-wrap{margin-top:32px;width:min(200px,55vw);}
.splash-bar{height:4px;background:var(--card2);border-radius:10px;overflow:hidden;}
.splash-fill{height:100%;width:0;
background:linear-gradient(90deg,#8b5cf6,#f472b6,#06d6a0);
border-radius:10px;animation:load 2.5s ease forwards .7s;animation-fill-mode:forwards;}
.splash-version{position:absolute;bottom:20px;font-size:.65rem;
color:var(--text2);font-weight:700;letter-spacing:.08em;
background:rgba(139,92,246,.15);border:1px solid rgba(139,92,246,.3);
border-radius:20px;padding:3px 12px;}
.splash-time-greet{margin-top:14px;font-size:clamp(1.1rem,4vw,1.4rem);color:var(--accent3);
font-weight:800;animation:fadeUp .8s ease .6s both;}

/* ONBOARDING */
#onboarding{position:fixed;inset:0;z-index:8000;background:var(--bg);
display:none;flex-direction:column;align-items:center;justify-content:center;
padding:24px;text-align:center;overflow-y:auto;}
#onboarding.vis{display:flex;}
.ob-logo{width:min(120px,35vw);margin-bottom:12px;animation:bounce 2s ease infinite;}
.ob-title{font-size:clamp(1.4rem,5vw,2rem);font-weight:900;margin-bottom:8px;
background:linear-gradient(135deg,#a78bfa,#f472b6);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.ob-sub{font-size:clamp(.8rem,2.5vw,.9rem);color:var(--text2);
margin-bottom:22px;line-height:1.6;max-width:380px;}
.ob-steps{display:flex;flex-direction:column;gap:10px;max-width:360px;width:100%;margin-bottom:24px;}
.ob-step{display:flex;align-items:center;gap:12px;background:var(--card);
border-radius:14px;padding:11px 14px;border:1px solid var(--border);text-align:left;}
.ob-step-icon{font-size:1.4rem;flex-shrink:0;}
.ob-step-text strong{display:block;font-size:.82rem;margin-bottom:2px;}
.ob-step-text span{font-size:.74rem;color:var(--text2);line-height:1.4;}
.btn-start{padding:15px 38px;border:none;border-radius:var(--radius);
background:linear-gradient(135deg,#8b5cf6,#a78bfa);color:white;
font-size:1rem;font-weight:800;cursor:pointer;
box-shadow:0 4px 24px rgba(139,92,246,.4);transition:transform .15s;}
.btn-start:active{transform:scale(.97);}

/* APP */
#app{display:none;flex-direction:column;height:100%;overflow-x:hidden;overflow-y:auto;}
#app.vis{display:flex;}
.screen{display:none;flex-direction:column;
animation:fadeUp .3s ease;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
position:relative;flex:1;min-height:0;padding-bottom:88px;box-sizing:border-box;}
/* screen-gestion no oculta overflow-x para que los tabs sean visibles */
#screen-gestion{overflow-x:visible !important;}
.screen.act{display:flex;}
/* Paneles que están FUERA de #app (seguimiento, gestión) no heredan la altura acotada
   del contenedor flex, así que su overflow-y no tenía contra qué scrollear. Les damos
   altura de viewport y scroll propio, por debajo de la barra nav (z-index 99999). */
#screen-seguimiento.act, #screen-gestion.act{
  position:fixed; top:0; left:0; right:0; bottom:0;
  height:100vh; height:100dvh;
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  z-index:40; background:#0a0818;
}
/* Item4: mismo tratamiento de altura fija + scroll para el Salon de Logros.
   Lleva !important porque la regla base #screen-logros usa !important en position/height/overflow. */
#screen-logros.act {
    position: fixed !important; top: 0; left: 0; right: 0; bottom: 0;
    height: 100vh !important; height: 100dvh !important;
    overflow-y: auto !important; overflow-x: hidden; -webkit-overflow-scrolling: touch;
    z-index: 40; background: #0a0818;
}
/* screen-lesson es el único con altura fija y scroll interno */
#screen-lesson{min-height:unset;height:100vh;overflow:hidden;}

/* TOPBAR */
.topbar{display:flex;align-items:center;justify-content:space-between;
padding:16px 16px 10px;position:sticky;top:0;z-index:4000;
background:rgba(6,5,15,.85);backdrop-filter:blur(16px);
border-bottom:1px solid var(--border);}
.topbar-left .greet{font-size:.68rem;color:var(--text2);font-weight:700;}
.topbar-left .name{font-size:.95rem;font-weight:800;}
.chips{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.chip{display:flex;align-items:center;gap:4px;background:var(--card);
border-radius:20px;padding:4px 9px;font-size:.7rem;font-weight:700;
border:1px solid var(--border);}
.chip.xp{background:rgba(255,209,102,.1);border-color:rgba(255,209,102,.25);color:var(--xp);}
.chip.str{background:rgba(255,107,107,.1);border-color:rgba(255,107,107,.25);color:var(--streak);}
.version-tag{font-size:.58rem;font-weight:800;color:#8b5cf6;
background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.25);
border-radius:20px;padding:2px 8px;letter-spacing:.04em;}

/* BOTTOM NAV — blindado, nunca salta */
.bottom-nav{position:fixed !important;bottom:0 !important;left:50% !important;
transform:translateX(-50%) !important;width:100% !important;max-width:480px !important;
z-index:99999 !important;box-sizing:border-box;
background:linear-gradient(180deg,rgba(10,8,28,.92) 0%,rgba(15,10,35,.97) 100%);
border-top:1px solid rgba(139,92,246,.3);
box-shadow:0 -4px 24px rgba(139,92,246,.12),0 -1px 0 rgba(139,92,246,.2);
display:flex;padding:6px 0 10px;height:74px;flex-shrink:0;
backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:3px;cursor:pointer;padding:4px 2px;
border:none;background:none;color:rgba(196,201,212,.4);
font-size:.75rem;font-weight:700;transition:color .2s,transform .15s;
letter-spacing:.02em;min-width:0;overflow:hidden;}
.nav-item .ni{font-size:1.4rem;line-height:1;transition:transform .2s,text-shadow .2s;display:block;}
.nav-item .nl{display:block;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;line-height:1.2;font-size:.75rem;}
/* Fix v161: solo el rol tutor (2 botones) los agrupa al centro; el resto conserva el reparto original */
.bottom-nav.nav-rol-tutor{justify-content:center !important;gap:3rem;}
.bottom-nav.nav-rol-tutor .nav-item{flex:0 0 auto;}
.nav-item.act{color:#a78bfa !important;opacity:1 !important;}
.nav-item.act .ni{transform:scale(1.22) !important;display:block;
  text-shadow:0 0 12px #a78bfa,0 0 24px rgba(167,139,250,.5) !important;}
.nav-item:active{transform:scale(.9);}
/* Colores neón por pestaña activa */
#nav-home.act{color:#a78bfa !important;}
#nav-home.act .ni{text-shadow:0 0 12px #a78bfa,0 0 24px rgba(167,139,250,.5) !important;}
#nav-materias.act{color:#10b981 !important;}
#nav-materias.act .ni{text-shadow:0 0 12px #10b981,0 0 24px rgba(16,185,129,.5) !important;}
#nav-logros.act{color:#ff6b6b !important;}
#nav-logros.act .ni{text-shadow:0 0 12px #ff6b6b,0 0 24px rgba(255,107,107,.5) !important;}
#nav-profile.act{color:#fbbf24 !important;}
#nav-profile.act .ni{text-shadow:0 0 12px #fbbf24,0 0 24px rgba(251,191,36,.5) !important;}
#nav-facilitador.act{color:#06d6a0 !important;}
#nav-facilitador.act .ni{text-shadow:0 0 12px #06d6a0 !important;}
#nav-tutor.act{color:#ec4899 !important;}
#nav-tutor.act .ni{text-shadow:0 0 12px #ec4899 !important;}
#nav-admin.act{color:#f59e0b !important;}
#nav-admin.act .ni{text-shadow:0 0 12px #f59e0b !important;}

/* CARDS */
.crystal{background:rgba(22,20,40,.6) !important;backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.07);border-radius:14px;}
.card{background:var(--card);border-radius:var(--radius);
padding:16px;margin:0 14px 12px;border:1px solid var(--border);}
.sec-title{font-size:.62rem;font-weight:800;letter-spacing:.1em;
color:var(--text2);text-transform:uppercase;padding:0 16px;
margin-bottom:8px;margin-top:4px;}
.prog-bar{height:6px;background:rgba(255,255,255,.06);
border-radius:10px;overflow:hidden;margin-top:7px;}
.prog-fill{height:100%;border-radius:10px;
background:linear-gradient(90deg,#8b5cf6 0%,#06d6a0 100%);
box-shadow:0 0 14px rgba(6,214,160,.65);
transition:width 1s ease;}

/* BUTTONS */
.btn-primary{width:calc(100% - 28px);padding:14px;border:none;
border-radius:var(--radius-sm);
background:linear-gradient(135deg,#8b5cf6,#a78bfa);
color:white;font-size:.9rem;font-weight:800;cursor:pointer;
margin:0 14px;display:flex;align-items:center;justify-content:center;gap:8px;
transition:transform .15s;box-shadow:0 4px 20px rgba(139,92,246,.3);}
.btn-primary:active{transform:scale(.97);}
.btn-sec{background:var(--card2);border:1px solid var(--border);
border-radius:var(--radius-sm);padding:9px 14px;color:var(--text);
font-size:.78rem;font-weight:700;cursor:pointer;transition:all .2s;}
.btn-danger{background:rgba(255,107,107,.08);border:1px solid rgba(255,107,107,.25);
border-radius:var(--radius-sm);padding:9px 14px;color:var(--accent2);
font-size:.78rem;font-weight:700;cursor:pointer;}

/* HERO */
.hero{margin:0 14px 12px;border-radius:22px;padding:22px 18px;
background:linear-gradient(135deg,#1a1040 0%,#0e0c1e 100%);
border:1px solid rgba(139,92,246,.2);position:relative;overflow:visible;
text-align:center;}
.hero::before{content:'';position:absolute;top:-50px;right:-30px;
width:140px;height:140px;
background:radial-gradient(circle,rgba(139,92,246,.3) 0%,transparent 70%);
border-radius:50%;pointer-events:none;}

.hero-logo-sm{
  height:clamp(44px,12vw,55px);
  width:auto;
  object-fit:contain;
  display:block;
  margin:0 auto;
  mix-blend-mode:screen;
}
.hero-brand{
  font-size:clamp(1.1rem,4vw,1.5rem);
  font-weight:900;
  text-align:center;
  background:linear-gradient(135deg,#a78bfa,#f472b6);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  /* evita corte en pantallas <320px */
  word-break:break-word;
}
.hero-slogan{
  font-size:clamp(.66rem,2.2vw,.72rem);
  color:var(--text2);
  font-style:italic;
  margin-top:4px;
  line-height:1.4;
}
.hero-grade{
  font-size:clamp(.7rem,2.4vw,.78rem);
  color:var(--text2);
  margin-top:6px;
  line-height:1.4;
  /* evita desborde en nombres largos */
  word-break:break-word;
  max-width:100%;
}
.hero-xp-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:rgba(255,209,102,.1);
  border:1px solid rgba(255,209,102,.2);
  border-radius:20px;
  padding:4px 12px;
  font-size:clamp(.66rem,2.2vw,.72rem);
  font-weight:800;
  color:var(--xp);
  margin-top:10px;
  /* no se sale del contenedor en pantallas angostas */
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* EMOTION */
.emotion-card{margin:0 14px 12px;border-radius:var(--radius);
padding:14px;background:var(--card);border:1px solid var(--border);}
.emotion-row{display:flex;gap:7px;}
.emo-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
padding:9px 4px;background:var(--card2);border:2px solid transparent;
border-radius:12px;cursor:pointer;transition:all .2s;font-size:.58rem;
font-weight:700;color:var(--text2);}
.emo-btn .ei{font-size:clamp(1.2rem,4vw,1.4rem);}
.emo-btn.sel{border-color:#8b5cf6;background:rgba(139,92,246,.15);}
/* Neón fluorescente por emoción — Manual identidad visual */
.emo-btn.sel[data-em="motivada"]{border-color:#06d6a0 !important;background:rgba(6,214,160,.15) !important;box-shadow:0 0 12px rgba(6,214,160,.35);}
.emo-btn.sel[data-em="bien"]{border-color:#a78bfa !important;background:rgba(167,139,250,.15) !important;box-shadow:0 0 12px rgba(167,139,250,.35);}
.emo-btn.sel[data-em="cansada"]{border-color:#ffd166 !important;background:rgba(255,209,102,.12) !important;box-shadow:0 0 12px rgba(255,209,102,.3);}
.emo-btn.sel[data-em="frustrada"]{border-color:#ff6b6b !important;background:rgba(255,107,107,.12) !important;box-shadow:0 0 12px rgba(255,107,107,.3);}
#emo-msg{display:none;margin-top:10px;font-size:.76rem;color:var(--text2);
line-height:1.5;padding:9px;background:var(--card2);border-radius:10px;}

/* MINI GRID */
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 14px 12px;}
.mini-card{border-radius:14px;padding:13px;border:1px solid var(--border);}

/* MATERIAS GRID */
.mat-grid{display:flex;flex-direction:column;gap:6px;margin:0 14px 10px;}
@media(min-width:600px){.mat-grid{grid-template-columns:repeat(4,1fr);}}
@media(min-width:900px){.mat-grid{grid-template-columns:repeat(5,1fr);}}
.mat-tile{border-radius:16px;padding:13px 10px;cursor:pointer;
transition:transform .18s,box-shadow .18s;border:1px solid var(--border);
min-height:85px;display:flex;flex-direction:column;justify-content:space-between;
position:relative;overflow:hidden;}
.mat-tile:hover{transform:translateX(3px);box-shadow:0 4px 16px rgba(0,0,0,.3);}
.tile-mat::before{content:'';position:absolute;top:-10px;right:-10px;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.45) 0%,transparent 70%);pointer-events:none;}
.tile-len::before{content:'';position:absolute;top:-10px;right:-10px;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle,rgba(236,72,153,.45) 0%,transparent 70%);pointer-events:none;}
.tile-soc::before{content:'';position:absolute;top:-10px;right:-10px;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle,rgba(245,158,11,.45) 0%,transparent 70%);pointer-events:none;}
.tile-nat::before{content:'';position:absolute;top:-10px;right:-10px;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle,rgba(16,185,129,.45) 0%,transparent 70%);pointer-events:none;}
.tile-eti::before{content:'';position:absolute;top:-10px;right:-10px;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle,rgba(255,209,102,.45) 0%,transparent 70%);pointer-events:none;}
.tile-art::before{content:'';position:absolute;top:-10px;right:-10px;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle,rgba(244,63,94,.45) 0%,transparent 70%);pointer-events:none;}
.tile-efi::before{content:'';position:absolute;top:-10px;right:-10px;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.45) 0%,transparent 70%);pointer-events:none;}
.tile-eng::before{content:'';position:absolute;top:-10px;right:-10px;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle,rgba(6,214,160,.45) 0%,transparent 70%);pointer-events:none;}
.tile-ppp::before{content:'';position:absolute;top:-10px;right:-10px;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle,rgba(251,113,133,.45) 0%,transparent 70%);pointer-events:none;}
.mat-tile:active{transform:scale(.96);}
.mat-icon{font-size:1.8rem;margin-bottom:5px;padding-left:3px;display:block;transition:filter .3s,transform .3s;}
.mat-tile:hover .mat-icon{animation:iconGlow 1.5s ease-in-out infinite;}
.tile-mat .mat-icon{filter:drop-shadow(0 0 8px rgba(139,92,246,.9)) drop-shadow(0 0 18px rgba(139,92,246,.5));}
.tile-len .mat-icon{filter:drop-shadow(0 0 8px rgba(236,72,153,.9)) drop-shadow(0 0 18px rgba(236,72,153,.5));}
.tile-soc .mat-icon{filter:drop-shadow(0 0 8px rgba(245,158,11,.9)) drop-shadow(0 0 18px rgba(245,158,11,.5));}
.tile-nat .mat-icon{filter:drop-shadow(0 0 8px rgba(16,185,129,.9)) drop-shadow(0 0 18px rgba(16,185,129,.5));}
.tile-eti .mat-icon{filter:drop-shadow(0 0 8px rgba(255,209,102,.9)) drop-shadow(0 0 18px rgba(255,209,102,.5));}
.tile-art .mat-icon{filter:drop-shadow(0 0 8px rgba(244,63,94,.9)) drop-shadow(0 0 18px rgba(244,63,94,.5));}
.tile-efi .mat-icon{filter:drop-shadow(0 0 8px rgba(59,130,246,.9)) drop-shadow(0 0 18px rgba(59,130,246,.5));}
.tile-eng .mat-icon{filter:drop-shadow(0 0 8px rgba(6,214,160,.9)) drop-shadow(0 0 18px rgba(6,214,160,.5));}
.tile-ppp .mat-icon{filter:drop-shadow(0 0 8px rgba(132,204,22,.9)) drop-shadow(0 0 18px rgba(132,204,22,.5));}
@keyframes iconGlow{
  0%,100%{opacity:.85;}
  50%{opacity:1;transform:scale(1.08);}
}
.mat-name{font-weight:800;font-size:.72rem;line-height:1.2;}
.tile-mat .mat-name{color:var(--mat);}
.tile-len .mat-name{color:var(--len);}
.tile-soc .mat-name{color:var(--soc);}
.tile-nat .mat-name{color:var(--nat);}
.tile-eti .mat-name{color:var(--eti);}
.tile-art .mat-name{color:var(--art);}
.tile-efi .mat-name{color:var(--efi);}
.tile-eng .mat-name{color:var(--eng);}
.tile-ppp .mat-name{color:var(--ppp);}
.mat-prog{font-size:.6rem;color:rgba(255,255,255,.55);margin-top:2px;}
.mat-bar{height:3px;background:rgba(255,255,255,.08);border-radius:3px;margin-top:6px;}
.mat-bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,#8b5cf6 0%,#06d6a0 100%);box-shadow:0 0 8px rgba(6,214,160,.7);}
.tile-mat{background:linear-gradient(135deg,#3d2878,#150b30);}
.tile-len{background:linear-gradient(135deg,#7c1850,#1a0520);}
.tile-soc{background:linear-gradient(135deg,#6b4008,#1a0e02);}
.tile-nat{background:linear-gradient(135deg,#0f5040,#041810);}
.tile-eti{background:linear-gradient(135deg,#6a3d00,#1a1000);}
.tile-art{background:linear-gradient(135deg,#7c1030,#1a0208);}
.tile-efi{background:linear-gradient(135deg,#0f3868,#040c1e);}
.tile-eng{background:linear-gradient(135deg,#0a5035,#041510);}
.tile-ppp{background:linear-gradient(135deg,#3d5500,#101800);}

/* ANUAL */
.anual-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.anual-row:last-child{margin:0;}
.anual-icon{font-size:.9rem;width:20px;text-align:center;}
.anual-label{font-size:.7rem;flex:1;color:var(--text2);font-weight:600;}
.anual-mini{flex:2;height:4px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden;}
.anual-mini-fill{height:100%;border-radius:4px;transition:width 1s ease;filter:drop-shadow(0 0 4px currentColor);}
.anual-pct{font-size:.66rem;font-weight:800;width:28px;text-align:right;}

/* RUTA DEL ESTUDIANTE */
.ruta-card{margin:0 14px 12px;border-radius:var(--radius);
background:linear-gradient(135deg,#1a1040,#0e0c1e);
border:1px solid rgba(139,92,246,.2);padding:16px;}
.ruta-row{display:flex;align-items:center;gap:10px;padding:7px 0;
border-bottom:1px solid rgba(255,255,255,.05);}
.ruta-row:last-child{border:none;}
.ruta-icon{font-size:1rem;width:22px;text-align:center;}
.ruta-text{font-size:.78rem;flex:1;}
.ruta-status{font-size:.65rem;font-weight:800;}

/* MATERIA DETAIL */
.ud-header{padding:14px 14px 10px;display:flex;align-items:center;gap:10px;background:rgba(6,5,15,.96);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:4000;}
.md-header{padding:14px 14px 10px;display:flex;align-items:center;gap:10px;
position:sticky;top:0;z-index:4000;background:rgba(6,5,15,.85);
backdrop-filter:blur(12px);border-bottom:1px solid var(--border);}
.back-btn{width:34px;height:34px;border-radius:10px;background:var(--card);
border:1px solid var(--border);color:var(--text);font-size:.9rem;
cursor:pointer;display:flex;align-items:center;justify-content:center;}
.md-title{font-weight:800;font-size:.92rem;}
.md-sub{font-size:.66rem;color:var(--text2);margin-top:2px;}

/* UNIT CARDS */
.unit-card{margin:0 14px 10px;border-radius:var(--radius);
padding:15px;border:1px solid var(--border);cursor:pointer;
transition:transform .2s,border-color .2s;position:relative;overflow:hidden;}
.unit-card:not(.locked):hover{transform:scale(1.01);}
.unit-card:active{transform:scale(.98);}
.unit-card.locked{opacity:.4;cursor:default;}
.unit-card.done-unit{border-color:rgba(6,214,160,.3);}
.unit-card.active-unit{border-color:rgba(139,92,246,.4);}
.unit-header{display:flex;align-items:center;gap:10px;}
.unit-icon{font-size:1.6rem;width:38px;text-align:center;}
.unit-title{font-weight:800;font-size:.86rem;}
.unit-sub{font-size:.66rem;color:var(--text2);margin-top:2px;}
.unit-badge{margin-left:auto;font-size:.56rem;font-weight:800;
padding:3px 8px;border-radius:20px;letter-spacing:.04em;white-space:nowrap;}
.badge-act{background:rgba(139,92,246,.18);color:#a78bfa;}
.badge-done{background:rgba(6,214,160,.12);color:#06d6a0;}
.badge-lock{background:rgba(255,255,255,.05);color:var(--text2);}
.ug1{background:linear-gradient(135deg,#1e1340,#0e0c1e);}
.ug2{background:linear-gradient(135deg,#1a2440,#0e0c1e);}
.ug3{background:linear-gradient(135deg,#1a3020,#0e0c1e);}
.ug4{background:linear-gradient(135deg,#302010,#0e0c1e);}
.ug5{background:linear-gradient(135deg,#101e30,#0e0c1e);}
.ug6{background:linear-gradient(135deg,#301020,#0e0c1e);}

/* DAYS MAP */
.days-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;
padding:0 14px;margin-bottom:12px;}
@media(min-width:500px){.days-grid{grid-template-columns:repeat(10,1fr);}}
/* v295: camino guiado vertical (Opción C) */
.cg-wrap{display:flex;flex-direction:column;gap:8px;padding:0 14px;margin-bottom:12px;}
.cg-row{display:flex;align-items:center;gap:13px;border-radius:13px;padding:13px 14px;transition:.15s;border:1px solid transparent;}
.cg-row.cg-activa{background:rgba(139,92,246,.16);border-color:var(--mat);box-shadow:0 0 18px rgba(139,92,246,.22);cursor:pointer;}
.cg-row.cg-prog{background:rgba(255,209,102,.08);border-color:rgba(255,209,102,.35);cursor:pointer;}
.cg-row.cg-done{background:rgba(6,214,160,.06);border-color:rgba(6,214,160,.2);cursor:pointer;}
.cg-row.cg-lock{background:rgba(255,255,255,.02);border-color:rgba(255,255,255,.05);cursor:default;}
.cg-row:not(.cg-lock):hover{transform:translateX(2px);}
.cg-row:not(.cg-lock):active{transform:scale(.99);}
.cg-num{width:38px;height:38px;border-radius:11px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.95rem;position:relative;}
.cg-activa .cg-num{background:var(--mat);color:#fff;box-shadow:0 0 12px rgba(139,92,246,.5);}
.cg-prog .cg-num{background:rgba(255,209,102,.22);color:#ffd166;}
.cg-done .cg-num{background:rgba(6,214,160,.22);color:#06d6a0;}
.cg-lock .cg-num{background:rgba(255,255,255,.05);color:rgba(255,255,255,.3);}
.cg-body{flex:1;min-width:0;}
.cg-nom{font-size:.82rem;font-weight:700;line-height:1.3;}
.cg-lock .cg-nom{color:var(--text2);}
.cg-meta{font-size:.62rem;color:var(--text2);margin-top:2px;}
.cg-right{flex-shrink:0;font-size:.66rem;font-weight:800;}
.cg-btn{font-size:.66rem;font-weight:800;padding:7px 14px;border-radius:9px;background:var(--mat);color:#fff;border:none;cursor:pointer;font-family:inherit;}
.cg-lock-ico{font-size:1rem;color:rgba(255,255,255,.3);}
.cg-mp{background:rgba(255,209,102,.06);border:1px solid rgba(255,209,102,.22);border-radius:13px;display:flex;align-items:center;gap:13px;padding:13px 14px;margin-top:4px;}
.cg-mp.cg-mp-lock{opacity:.65;}
.cg-mp .cg-num{background:rgba(255,209,102,.2);color:#ffd166;}
.cg-mp.cg-mp-lock .cg-num{background:rgba(255,209,102,.1);color:rgba(255,209,102,.45);}
.day-node{aspect-ratio:1;border-radius:11px;display:flex;flex-direction:column;
align-items:center;justify-content:center;cursor:pointer;
transition:transform .2s;font-size:.58rem;font-weight:800;gap:1px;}
.day-node:not(.day-lock):hover{transform:scale(1.1);}
.day-node:active{transform:scale(.92);}
.day-done{background:linear-gradient(135deg,#06d6a0,#00c49a);color:#000;}
.day-curr{background:linear-gradient(135deg,#8b5cf6,#a78bfa);color:#fff;
animation:pulse 2s ease infinite;box-shadow:0 0 16px rgba(139,92,246,.5);}
.day-lock{background:var(--card);color:var(--text2);cursor:default;}
.day-prog{background:linear-gradient(135deg,#3b1f6e,#5b21b6);color:#fff;border:2px solid #7c3aed;position:relative;overflow:hidden;}
.day-prog-bar{position:absolute;bottom:0;left:0;height:3px;background:linear-gradient(90deg,#a78bfa,#7c3aed);box-shadow:0 0 8px rgba(139,92,246,.9);transition:width .4s ease;}
.day-done-bar{position:absolute;bottom:0;left:0;height:3px;width:100%;background:linear-gradient(90deg,#06d6a0,#00c49a);box-shadow:0 0 8px rgba(6,214,160,.9);}
.unit-prog{border:1px solid rgba(124,58,237,.5)!important;border-left:3px solid #7c3aed!important;background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(91,33,182,.06))!important;box-shadow:0 0 12px rgba(124,58,237,.15)!important;}
.unit-done{border:1px solid rgba(6,214,160,.5)!important;border-left:3px solid #06d6a0!important;background:linear-gradient(135deg,rgba(6,214,160,.12),rgba(0,196,154,.06))!important;box-shadow:0 0 12px rgba(6,214,160,.15)!important;}
.unit-sf-badge{position:absolute;top:8px;right:8px;font-size:1.1rem;animation:emergeGirasol .6s cubic-bezier(.175,.885,.32,1.275);filter:drop-shadow(0 0 8px #ffd166);z-index:10;}
@keyframes micPulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.12);opacity:.8;}}
.recording{background:#ef4444 !important;color:#fff !important;animation:micPulse 1.5s ease infinite;box-shadow:0 0 20px rgba(239,68,68,.5);}
.insignia-50{animation:emergeGirasol .6s cubic-bezier(.175,.885,.32,1.275);filter:drop-shadow(0 0 5px #ffd166);}
@keyframes emergeGirasol{0%{transform:scale(0) rotate(-45deg);opacity:0;}100%{transform:scale(1.08) rotate(0deg);opacity:1;}}
.d-num{font-family:inherit;font-size:.9rem;font-weight:900;}

/* LESSON */
.lesson-top{display:flex;align-items:center;gap:8px;padding:16px 14px 12px;
flex-shrink:0;z-index:10001;
background:#06050f;width:100%;box-sizing:border-box;overflow:hidden;
border-bottom:2px solid rgba(139,92,246,.3);min-height:64px;box-shadow:0 4px 20px #06050f;}
.lesson-prog{flex:1;min-width:0;}
.lesson-prog-label{font-size:.65rem;color:rgba(255,255,255,.75);margin-bottom:3px;font-weight:600;}
.step-pills{display:flex;gap:5px;padding:8px 14px 6px;margin-bottom:0;flex-shrink:0;z-index:10000;background:#06050f;border-bottom:1px solid rgba(139,92,246,.2);
overflow-x:auto;scrollbar-width:none;}
.step-pills::-webkit-scrollbar{display:none;}
.sp{flex-shrink:0;padding:4px 10px;border-radius:20px;
font-size:.64rem;font-weight:700;cursor:pointer;transition:all .2s;}
.sp.done-sp{background:#06d6a0;color:#000;font-weight:800;}
.sp.curr-sp{background:#8b5cf6;color:#fff;box-shadow:0 0 0 2px #fff,0 0 0 4px #8b5cf6;}
.sp.todo-sp{background:var(--card);color:var(--text2);}
.lesson-content{padding:14px 14px 160px;isolation:isolate;flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;}
.ls{isolation:isolate;position:relative;z-index:1;}

/* BLOCKS */
.ser-block{background:linear-gradient(135deg,#1e1810,#0e0c1e);
border-radius:var(--radius);padding:16px;border-left:4px solid var(--xp);margin-bottom:12px;}
.saber-block{background:linear-gradient(135deg,#102420,#0e0c1e);
border-radius:var(--radius);padding:16px;border-left:4px solid #06d6a0;margin-bottom:12px;}
.hacer-block{background:linear-gradient(135deg,#1a1040,#0e0c1e);
border-radius:var(--radius);padding:16px;border-left:4px solid #8b5cf6;margin-bottom:12px;}
.block-label{font-size:.56rem;font-weight:900;letter-spacing:.1em;
text-transform:uppercase;margin-bottom:6px;}
.block-text{font-size:.84rem;line-height:1.65;color:rgba(255,255,255,.88);}

/* DILEMA SER */
.dilema-ctx{background:var(--card2);border-radius:12px;padding:12px;
margin:10px 0;font-size:.82rem;line-height:1.6;color:var(--text2);
border-left:3px solid var(--accent3);}
.dilema-opts{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
@media(min-width:500px){.dilema-opts{flex-direction:row;}}
.dilema-btn{flex:1;padding:13px 12px;border:2px solid var(--border);
border-radius:13px;cursor:pointer;background:var(--card);
color:var(--text);font-size:.82rem;font-weight:700;text-align:left;
transition:all .25s;line-height:1.4;}
.dilema-btn:hover{border-color:#8b5cf6;background:rgba(139,92,246,.1);}
.dilema-btn.chosen-A{border-color:#f59e0b;background:rgba(245,158,11,.4);color:#fff;box-shadow:0 0 24px rgba(245,158,11,.6);}
.dilema-btn.chosen-B{border-color:#06d6a0;background:rgba(6,214,160,.4);color:#fff;box-shadow:0 0 24px rgba(6,214,160,.6);}
.dilema-response{display:none;margin-top:12px;border-radius:13px;
padding:13px;font-size:.82rem;line-height:1.65;animation:fadeUp .35s ease;}
.dilema-response.show{display:block;}
.dr-A{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);color:var(--accent3);}
.dr-B{background:rgba(6,214,160,.08);border:1px solid rgba(6,214,160,.2);color:#06d6a0;}

/* EXPLAIN */
.explain-block{background:var(--card);border-radius:var(--radius);
padding:16px;margin-bottom:12px;}
.explain-title{font-weight:900;font-size:1rem;margin-bottom:10px;color:#fff;}
/* v268/v270 — MODO LECTURA (Variación C: gris suave). Solo Objetivo y Explicación. */
.lesson-content.modo-lectura .explain-block{background:#eef0f4 !important;border:1px solid rgba(100,110,130,.3) !important;box-shadow:0 4px 20px rgba(0,0,0,.3);transition:background .3s,color .3s;}
.lesson-content.modo-lectura .explain-title{color:#2d3142 !important;}
.lesson-content.modo-lectura .explain-text{color:#2b2e38 !important;}
.lesson-content.modo-lectura .explain-ex{background:#e2e6ee !important;color:#363a45 !important;border-left-color:#6366f1 !important;}
.lesson-content.modo-lectura .explain-ex *{color:#363a45 !important;}
.explain-text{font-size:.8rem;line-height:1.7;color:rgba(255,255,255,.88);
max-height:28vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
padding-right:4px;}
.explain-ex{background:rgba(139,92,246,.08);border-radius:10px;
padding:11px 12px;margin-top:10px;border:1px solid rgba(139,92,246,.18);
font-size:.8rem;white-space:pre-line;}

/* VIDEO */
.video-block{background:linear-gradient(135deg,#100e1f,#06050f);
border-radius:var(--radius);padding:14px;margin-bottom:12px;
border:1px solid rgba(255,107,107,.12);
display:flex;align-items:center;gap:10px;cursor:pointer;}
.play-circle{width:44px;height:44px;border-radius:50%;flex-shrink:0;
background:linear-gradient(135deg,#ff6b6b,#c0392b);
display:flex;align-items:center;justify-content:center;font-size:1rem;}
.video-title{font-weight:800;font-size:.82rem;}
.video-sub{font-size:.65rem;color:var(--text2);margin-top:2px;}

/* v262/v264 — Layout de dos columnas: tip a un lado, tarjeta de video al otro */
/* v267 — APILADO (Opción B): tip arriba, tarjeta de video abajo, centrado y compacto */
.ntv-video-row{display:flex;flex-direction:column;gap:12px;margin-bottom:12px;}
.ntv-tip-col{width:100%;margin-bottom:0;}
.ntv-video-row .ntv-vcard{aspect-ratio:16/9;width:100%;max-width:440px;margin:0 auto;}
@media(max-width:560px){.ntv-video-row{flex-direction:column;}.ntv-video-row .ntv-vcard{width:100%;max-width:440px;margin-left:auto;margin-right:auto;}}
/* v260 — Tarjeta de video "Púrpura Místico" (reemplaza el enlace plano de YouTube) */
.ntv-vcard{position:relative;display:block;width:100%;max-width:440px;margin-left:auto;margin-right:auto;aspect-ratio:16/9;border-radius:18px;overflow:hidden;cursor:pointer;margin-bottom:12px;
  background:radial-gradient(ellipse at 50% 60%,rgba(var(--vc-rgb,139,92,246),.22) 0%,transparent 55%),radial-gradient(ellipse at 20% 30%,rgba(var(--vc-rgb2,167,139,250),.14) 0%,transparent 45%),linear-gradient(160deg,#150b30 0%,#091724 50%,#050a0e 100%);
  border:1px solid rgba(var(--vc-rgb,139,92,246),.15);
  box-shadow:0 0 0 1px rgba(var(--vc-rgb,139,92,246),.18),0 8px 32px rgba(0,0,0,.7),0 0 60px rgba(var(--vc-rgb,139,92,246),.10),inset 0 1px 0 rgba(var(--vc-rgb2,167,139,250),.08);
  transition:transform .3s cubic-bezier(.22,.68,0,1.2),box-shadow .3s ease;}
.ntv-vcard:hover{transform:translateY(-4px) scale(1.012);box-shadow:0 0 0 1px rgba(var(--vc-rgb,139,92,246),.35),0 20px 60px rgba(0,0,0,.8),0 0 80px rgba(var(--vc-rgb,139,92,246),.20),inset 0 1px 0 rgba(var(--vc-rgb2,167,139,250),.12);}
.ntv-vcard::before{content:'';position:absolute;inset:0;z-index:1;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.06) 2px,rgba(0,0,0,.06) 4px);pointer-events:none;}
.ntv-vcard-aura{position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 50% 40%,rgba(var(--vc-rgb,139,92,246),.18) 0%,transparent 65%);pointer-events:none;}
.ntv-vcard-play{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;}
.ntv-vcard-ring{position:relative;width:72px;height:72px;}
.ntv-vcard-ring::before{content:'';position:absolute;inset:-8px;border-radius:50%;border:1.5px solid transparent;border-top-color:rgba(var(--vc-rgb,139,92,246),.8);border-right-color:rgba(var(--vc-rgb2,167,139,250),.5);animation:ntvSpinRing 4s linear infinite;}
.ntv-vcard-ring::after{content:'';position:absolute;inset:-3px;border-radius:50%;background:rgba(var(--vc-rgb,139,92,246),.07);border:1px solid rgba(var(--vc-rgb,139,92,246),.25);animation:ntvPulseRing 2.5s ease-in-out infinite;}
@keyframes ntvSpinRing{to{transform:rotate(360deg);}}
@keyframes ntvPulseRing{0%,100%{transform:scale(1);opacity:.6;}50%{transform:scale(1.08);opacity:1;}}
.ntv-vcard-circle{width:72px;height:72px;border-radius:50%;background:radial-gradient(circle at 38% 35%,rgba(var(--vc-rgb2,167,139,250),.28),rgba(var(--vc-rgb,139,92,246),.18) 50%,rgba(5,10,14,.8) 100%);border:1.5px solid rgba(var(--vc-rgb,139,92,246),.5);display:flex;align-items:center;justify-content:center;box-shadow:0 0 24px rgba(var(--vc-rgb,139,92,246),.45),0 0 60px rgba(var(--vc-rgb,139,92,246),.15),inset 0 1px 0 rgba(var(--vc-rgb2,167,139,250),.25);transition:all .25s ease;position:relative;z-index:1;}
.ntv-vcard:hover .ntv-vcard-circle{border-color:rgba(var(--vc-rgb2,167,139,250),.75);box-shadow:0 0 36px rgba(var(--vc-rgb,139,92,246),.65),0 0 80px rgba(var(--vc-rgb,139,92,246),.25),inset 0 1px 0 rgba(200,180,255,.35);transform:scale(1.08);}
.ntv-vcard-tri{width:0;height:0;border-top:12px solid transparent;border-bottom:12px solid transparent;border-left:20px solid rgba(220,210,255,.95);margin-left:4px;filter:drop-shadow(0 0 6px rgba(var(--vc-rgb2,167,139,250),.9));}
.ntv-vcard-bar{position:absolute;bottom:0;left:0;right:0;height:2px;z-index:6;background:linear-gradient(90deg,rgb(var(--vc-rgb,139,92,246)) 0%,#06d6a0 100%);box-shadow:0 0 14px rgba(6,214,160,.65);width:60%;}
.ntv-vcard-info{position:absolute;bottom:0;left:0;right:0;z-index:4;padding:24px 16px 14px;background:linear-gradient(to top,rgba(6,5,15,.97) 0%,rgba(21,11,48,.7) 50%,transparent 100%);display:flex;align-items:flex-end;justify-content:space-between;gap:10px;}
.ntv-vcard-meta{flex:1;min-width:0;}
.ntv-vcard-eyebrow{display:flex;align-items:center;gap:6px;margin-bottom:5px;}
.ntv-vcard-dot{width:5px;height:5px;border-radius:50%;background:#8b5cf6;box-shadow:0 0 6px rgba(var(--vc-rgb,139,92,246),.9);animation:ntvDotPulse 2s ease-in-out infinite;}
@keyframes ntvDotPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.7);}}
.ntv-vcard-eyetext{font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:rgba(var(--vc-rgb,139,92,246),.85);}
.ntv-vcard-title{font-family:'Orbitron',monospace;font-size:clamp(12px,2.5vw,15px);font-weight:700;color:#F0F4FF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 12px rgba(var(--vc-rgb2,167,139,250),.5);letter-spacing:.5px;}
.ntv-vcard-badge{flex-shrink:0;display:flex;align-items:center;gap:5px;background:rgba(var(--vc-rgb,139,92,246),.14);border:1px solid rgba(var(--vc-rgb,139,92,246),.30);border-radius:8px;padding:5px 10px;font-size:11px;font-weight:700;color:rgba(var(--vc-rgb2,167,139,250),.95);letter-spacing:.5px;}
.ntv-vcard-corner{position:absolute;z-index:2;width:24px;height:24px;}
.ntv-vcard-corner.tl{top:12px;left:12px;}
.ntv-vcard-corner.tr{top:12px;right:12px;transform:scaleX(-1);}
.ntv-vcard-corner::before,.ntv-vcard-corner::after{content:'';position:absolute;background:rgba(var(--vc-rgb,139,92,246),.55);}
.ntv-vcard-corner::before{top:0;left:0;width:100%;height:1.5px;}
.ntv-vcard-corner::after{top:0;left:0;width:1.5px;height:100%;}

/* ACTIVITY */
.act-q{background:var(--card);border-radius:var(--radius);padding:15px;
font-weight:700;font-size:.86rem;margin-bottom:8px;line-height:1.5;}
.options{display:flex;flex-direction:column;gap:7px;}
.opt-btn{background:var(--card2);border:1px solid var(--border);
border-left:3px solid var(--border);
border-radius:var(--radius-sm);padding:11px 13px;color:var(--text);
font-size:.82rem;font-weight:600;cursor:pointer;text-align:left;
transition:all .2s;}
.opt-btn:hover:not(.dis){border-color:#8b5cf6;border-left:3px solid #8b5cf6;background:rgba(139,92,246,.08);}
.opt-btn.correct{
  border-left:4px solid #06d6a0 !important;
  background:rgba(6,214,160,.35) !important;
  color:#06d6a0 !important;
  box-shadow:0 0 24px rgba(6,214,160,.5) !important;
}
.opt-btn.wrong{
  border-left:4px solid #ff6b6b !important;
  background:rgba(255,107,107,.35) !important;
  color:#ff6b6b !important;
  box-shadow:0 0 20px rgba(255,107,107,.4) !important;
}
.opt-btn.dis{cursor:default;}
.fb-box{border-radius:var(--radius-sm);padding:10px 13px;font-size:.8rem;
margin-top:7px;display:none;}
.fb-box.show{display:block;animation:fadeUp .3s ease;}
.fb-c{background:rgba(6,214,160,.08);color:#06d6a0;border:1px solid rgba(6,214,160,.2);}
.fb-w{background:rgba(255,107,107,.07);color:#ff6b6b;border:1px solid rgba(255,107,107,.2);}

/* RETO */
.reto-block{background:linear-gradient(135deg,#101f10,#0e0c1e);
border-radius:var(--radius);padding:16px;margin-bottom:12px;
border:1px solid rgba(6,214,160,.12);}
.reto-q{font-size:.84rem;line-height:1.65;margin-bottom:10px;white-space:pre-line;}
.reto-row{display:flex;gap:8px;}
.reto-inp{flex:1;background:var(--card2);border:2px solid var(--border);
border-radius:var(--radius-sm);padding:10px 12px;color:var(--text);
font-size:.9rem;outline:none;transition:border-color .2s;}
.reto-inp:focus{border-color:#06d6a0;}
.reto-go{background:#06d6a0;border:none;border-radius:var(--radius-sm);
color:#000;font-weight:800;font-size:.9rem;padding:0 16px;cursor:pointer;}

/* IA */
.ia-block{background:linear-gradient(135deg,#0e0a25,#06050f);
border-radius:var(--radius);padding:14px;margin-bottom:12px;
border:1px solid rgba(139,92,246,.18);}
.ia-chips{display:flex;flex-wrap:wrap;gap:6px;}
.ia-chip{background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.25);
border-radius:20px;padding:5px 11px;font-size:.72rem;font-weight:700;
cursor:pointer;transition:all .2s;color:#c4aef0;}
.ia-chip:hover{background:rgba(139,92,246,.22);}
.ia-chat{margin-top:10px;display:none;background:var(--card);border-radius:11px;
padding:11px;font-size:.79rem;line-height:1.65;color:var(--text2);}
.ia-chat.show{display:block;animation:fadeUp .3s ease;}

/* MODAL COMPONENTE INTERACTIVO */
#comp-modal{display:none;position:fixed;inset:0;z-index:99999;background:#0d1117;flex-direction:column;overflow:hidden;}
#comp-modal.open{display:flex;}
#comp-modal-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0;}
#comp-modal-title{font-size:.8rem;font-weight:800;color:#e2e8f0;}
#comp-modal-close{background:rgba(139,92,246,.2);border:1px solid rgba(139,92,246,.4);color:#a78bfa;border-radius:20px;padding:6px 14px;font-size:.72rem;font-weight:700;cursor:pointer;}
#comp-modal iframe{flex:1;border:none;width:100%;height:100%;}

/* AUTO-CENTRADO INPUTS MÓVIL */
@media(max-width:767px){
  textarea:focus, input[type="text"]:focus {
    scroll-margin-bottom: 20px;
  }
}

/* EDITOR HACER */
.hacer-editor{background:var(--card);border:1px solid var(--border);
border-radius:var(--radius-sm);padding:12px;margin-top:10px;}
.hacer-editor textarea{width:100%;background:transparent;border:none;
color:var(--text);font-size:.84rem;line-height:1.65;resize:vertical;
min-height:90px;outline:none;font-family:inherit;}
.hacer-editor textarea::placeholder{color:var(--text2);}
.hacer-editor-label{font-size:.66rem;color:var(--text2);margin-bottom:6px;
font-weight:700;text-transform:uppercase;letter-spacing:.06em;}

/* QUIZ */
.quiz-header{padding:14px 14px 8px;display:flex;align-items:center;gap:10px;
position:sticky;top:0;z-index:4000;background:rgba(6,5,15,.85);
backdrop-filter:blur(12px);}
.quiz-q-text{background:var(--card);border-radius:var(--radius);padding:17px;
margin:0 14px 12px;font-size:.9rem;font-weight:700;line-height:1.5;}
.quiz-result{display:none;flex-direction:column;align-items:center;
padding:24px 16px;text-align:center;}
.quiz-result.show{display:flex;animation:fadeUp .4s ease;}
.result-circle{width:90px;height:90px;border-radius:50%;
background:linear-gradient(135deg,#8b5cf6,#a78bfa);
display:flex;flex-direction:column;align-items:center;justify-content:center;
margin-bottom:14px;box-shadow:0 0 36px rgba(139,92,246,.4);}
.result-num{font-size:1.8rem;font-weight:900;}
.result-lbl{font-size:.55rem;opacity:.7;}
.result-msg{font-size:1.3rem;font-weight:900;margin-bottom:5px;}
.xp-tag{background:rgba(255,209,102,.08);border:1px solid rgba(255,209,102,.25);
border-radius:20px;padding:6px 16px;font-size:.84rem;font-weight:800;color:var(--xp);}

/* MI ALDEA */
/* ═══════════════════════════════════════════════════════════════
   ALDEA v6.3 — HUB EVOLUTIVO GAMER + PALETA MANUAL
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   MI ALDEA — HUB EVOLUTIVO AAA  v6.3.309
   Solo propiedades visuales. IDs/clases JS intactos.
   ═══════════════════════════════════════════════════ */

#screen-aldea {
  box-sizing: border-box !important;
  padding-bottom: 95px !important;
  background: #06050f;
}

/* ── TOPBAR de aldea: título "MI ALDEA" estilo HUD ── */
#screen-aldea .topbar {
  background: linear-gradient(180deg, rgba(6,214,160,.06) 0%, transparent 100%);
  border-bottom: 1px solid rgba(6,214,160,.12);
}
#screen-aldea .name {
  font-family: 'Orbitron', 'Rajdhani', 'Exo 2', sans-serif;
  font-weight: 900;
  font-size: .9rem;
  letter-spacing: .04em;
  text-transform: none;
  background: linear-gradient(90deg, #06d6a0, #38bdf8, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}
#screen-aldea .greet {
  font-size: .58rem;
  letter-spacing: .04em;
  text-transform: none;
  color: rgba(6,214,160,.55);
}

/* ── ENCABEZADO DUPLICADO — ocultar ── */
.aldea-header {
  display: none !important;
}
.aldea-header::before { content: none !important; }
.aldea-header::after  { content: none !important; }

/* ── HUB DE EVOLUCIÓN PANORÁMICO ── */
.aldea-canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 16/7;
  min-height: 160px;
  max-height: 320px;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  /* Vacío espacial oscuro — fondo absorbente */
  background:
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(245,158,11,.07) 0%, transparent 65%),
    radial-gradient(ellipse 40% 70% at 15% 50%, rgba(16,185,129,.09) 0%, transparent 60%),
    linear-gradient(160deg, #040c08 0%, #020509 40%, #050310 70%, #030208 100%);
  border: 1px solid rgba(16,185,129,.25);
  box-shadow:
    0 0 50px rgba(16,185,129,.1),
    0 0 80px rgba(245,158,11,.06),
    inset 0 0 80px rgba(0,0,0,.8);
}

/* Wireframe holográfico verde neón — izquierda */
/* Retícula wireframe removida — la imagen de la aldea tiene su propio arte */
.aldea-canvas::before { content: none; }

/* Velo dorado sutil en el lado derecho — no tapa la imagen */
.aldea-canvas::after {
  content: '';
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(90deg,
    transparent          0%,
    transparent          55%,
    rgba(245,158,11,.04) 75%,
    rgba(251,191,36,.08) 100%);
  z-index: 2; pointer-events: none;
}

/* Línea de tiempo energética en la base del hub */
.aldea-canvas .aldea-progreso-wrap {
  position: absolute !important;
  bottom: 0; left: 0; right: 0;
  margin: 0 !important;
  padding: 0 12px 8px;
  z-index: 4;
  background: linear-gradient(0deg, rgba(6,5,15,.85) 0%, transparent 100%);
}
.aldea-canvas .aldea-progreso-bar {
  height: 4px !important;
  background: rgba(255,255,255,.06) !important;
  border-radius: 4px !important;
}
.aldea-canvas .aldea-capas-info {
  margin-top: 4px !important;
  font-size: .55rem !important;
  color: rgba(6,214,160,.5) !important;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@keyframes aldeaWireframePulse {
  0%,100% { opacity: .7; }
  50%      { opacity: 1; }
}

.aldea-capa { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; object-position:center bottom; transition:opacity .8s ease; z-index:0; }
.aldea-capa.oculta  { opacity:0; }
.aldea-capa.visible { opacity:1; }

/* ── ORBE HUD — Núcleo de energía Luma ── */
#aldea-canvas { display: flex; align-items: center; justify-content: center; }
.aldea-pct-orb {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: 86px; height: 86px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(0,220,255,.28) 0%,
    rgba(0,180,255,.1)  40%,
    transparent         70%);
  box-shadow:
    0 0 0 2px rgba(0,220,255,.5),
    0 0 20px rgba(0,200,255,.7),
    0 0 50px rgba(0,200,255,.35),
    0 0 90px rgba(0,180,255,.15),
    inset 0 0 24px rgba(0,220,255,.2);
  border: 2px solid rgba(0,220,255,.6);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  animation: aldeaOrbBreath 3s ease-in-out infinite;
}
.aldea-pct-orb-val {
  font-family: 'Orbitron', 'Rajdhani', monospace;
  font-size: 1.35rem; font-weight: 900;
  color: #fff; line-height: 1;
  text-shadow: 0 0 16px rgba(0,220,255,1), 0 0 32px rgba(0,200,255,.7);
}
.aldea-pct-orb-lbl {
  font-size: .36rem; font-weight: 800;
  color: rgba(0,220,255,.85);
  text-transform: uppercase; letter-spacing: .12em;
  text-align: center; margin-top: 2px;
}

@keyframes aldeaOrbBreath {
  0%,100% {
    box-shadow: 0 0 0 2px rgba(0,220,255,.5),
                0 0 20px rgba(0,200,255,.7),
                0 0 50px rgba(0,200,255,.35),
                inset 0 0 24px rgba(0,220,255,.2);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(0,220,255,.8),
                0 0 32px rgba(0,220,255,1),
                0 0 80px rgba(0,200,255,.55),
                0 0 120px rgba(0,180,255,.2),
                inset 0 0 32px rgba(0,220,255,.3);
  }
}

/* ── BARRA DE PROGRESO global (fuera del canvas) ── */
.aldea-progreso-wrap { margin-top: 8px; }
.aldea-progreso-bar  {
  height: 4px; border-radius: 4px;
  background: rgba(255,255,255,.07); overflow: hidden;
}
.aldea-progreso-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #06d6a0, #38bdf8, #8b5cf6) !important;
  box-shadow: 0 0 14px rgba(6,214,160,.75) !important;
  transition: width .8s ease;
}
.aldea-capas-info {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 5px; font-size: .6rem; color: rgba(255,255,255,.4);
}

/* ── NOMBRE Y AÑO de aldea (aldea-sub) ── */
.aldea-sub {
  font-size: .62rem; color: rgba(255,255,255,.38);
  margin-top: 2px;
}

/* ── REJILLA DE TOMOS DE CONOCIMIENTO GREMIAL ── */
.medallones-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 14px;
  margin-bottom: 14px;
}
@media(min-width: 600px) { .medallones-grid { grid-template-columns: repeat(4,1fr); } }

/* TOMO — pergamino envejecido / tablilla mística */
.medallon {
  border-radius: 16px;
  padding: 16px 10px 13px;
  text-align: center;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s;
  position: relative;
  overflow: hidden;
  /* Textura pergamino beige/ocre */
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,245,220,.12) 0%, transparent 65%),
    linear-gradient(160deg, #e8d8a8 0%, #d4b87a 35%, #c9a85a 65%, #b8953a 100%) !important;
  border: 1px solid rgba(160,120,55,.7) !important;
  box-shadow:
    0 6px 24px rgba(0,0,0,.65),
    inset 0 0 0 1px rgba(220,185,110,.35),
    inset 0 0 28px rgba(180,140,70,.1);
}

/* Borde interior grabado (marco de pergamino) */
.medallon::before {
  content: '';
  position: absolute; inset: 5px;
  border-radius: 11px;
  border: 1px solid rgba(150,110,45,.3);
  pointer-events: none; z-index: 0;
}

/* Textura de fibra — segundo plano decorativo */
.medallon::after {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(
      45deg,
      transparent, transparent 3px,
      rgba(180,140,60,.05) 3px, rgba(180,140,60,.05) 4px
    );
  border-radius: 16px;
  pointer-events: none; z-index: 0;
}

.medallon:not(.locked-med):active {
  transform: scale(.96);
  box-shadow: 0 0 36px rgba(251,191,36,.55), 0 6px 24px rgba(0,0,0,.65);
}
.medallon.locked-med { opacity: .32; cursor: default; }

/* Escudo heráldico RPG alrededor del emoji */
.med-emoji {
  font-size: 1.9rem;
  margin-bottom: 4px;
  display: inline-flex;
  align-items: center; justify-content: center;
  position: relative; z-index: 1;
  width: 52px; height: 52px;
  background: linear-gradient(160deg, rgba(255,255,255,.3) 0%, rgba(200,160,80,.2) 100%);
  border-radius: 12px 12px 14px 14px; /* forma escudo */
  border: 1px solid rgba(160,120,50,.45);
  box-shadow:
    0 3px 10px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.3);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
  clip-path: polygon(50% 0%, 95% 15%, 100% 60%, 50% 100%, 0% 60%, 5% 15%);
}

.med-periodo {
  font-size: .44rem; font-weight: 900;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(90,60,15,.65); margin-bottom: 3px;
  position: relative; z-index: 1;
}
.med-nombre {
  font-size: .75rem; font-weight: 900;
  line-height: 1.25; color: #2d1600 !important;
  position: relative; z-index: 1;
}
.med-desc {
  font-size: .56rem; color: rgba(70,45,8,.65);
  margin-top: 3px; line-height: 1.4;
  position: relative; z-index: 1;
}

/* SKILL LEVEL — texto gigante telemetría */
.med-status {
  font-family: 'Orbitron', 'Rajdhani', monospace;
  font-size: .7rem; font-weight: 900;
  margin-top: 9px; padding: 4px 10px;
  border-radius: 20px;
  display: inline-block;
  position: relative; z-index: 1;
  letter-spacing: .06em;
}
.med-locked-tag {
  background: rgba(0,0,0,.15); color: rgba(50,35,8,.55);
}
.med-open-tag {
  background: rgba(16,185,129,.2); color: #054a35;
  box-shadow: 0 0 12px rgba(16,185,129,.3);
}

/* Halos neón por soberanía — borde neón de su color oficial */
.med-agua {
  border: 1px solid rgba(59,130,246,.6) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.65),
              0 0 28px rgba(59,130,246,.4),
              inset 0 0 0 1px rgba(220,185,110,.25) !important;
}
.med-tierra {
  border: 1px solid rgba(16,185,129,.6) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.65),
              0 0 28px rgba(16,185,129,.4),
              inset 0 0 0 1px rgba(220,185,110,.25) !important;
}
.med-energia {
  border: 1px solid rgba(245,158,11,.6) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.65),
              0 0 28px rgba(245,158,11,.4),
              inset 0 0 0 1px rgba(220,185,110,.25) !important;
}
.med-economia {
  border: 1px solid rgba(255,209,102,.6) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.65),
              0 0 28px rgba(255,209,102,.4),
              inset 0 0 0 1px rgba(220,185,110,.25) !important;
}

/* ── DETALLE DE ALDEA ── */
.aldea-detail {
  display: none; margin: 0 14px 14px;
  border-radius: 14px; padding: 16px;
  background: rgba(6,5,15,.6);
  border: 1px solid rgba(139,92,246,.22);
  backdrop-filter: blur(10px);
}
.aldea-detail.show { display: block; animation: fadeUp .35s ease; }

/* ── BARRA ALDEA en panel tutor v2 ── */
.tv2-aldea-bar-wrap { padding: 0 14px 10px; }
.tv2-aldea-label { display: flex; justify-content: space-between; margin-bottom: 6px; }
.tv2-aldea-label span:first-child { font-size: .68rem; font-weight: 800; color: #fff; }
.tv2-aldea-label span:last-child  { font-size: .72rem; font-weight: 900; color: var(--nat); }
.tv2-aldea-bar  { height:4px; border-radius:4px; background:rgba(255,255,255,.07); overflow:hidden; }
.tv2-aldea-fill {
  height:100%; border-radius:4px;
  background:linear-gradient(90deg,var(--mat),var(--nat)) !important;
  box-shadow:0 0 10px rgba(6,214,160,.6) !important;
  transition:width .8s ease;
}
.tv2-aldea-fill::after { content:''; position:absolute; top:0; right:0; width:6px; height:100%; background:rgba(255,255,255,.6); border-radius:4px; filter:blur(2px); }


/* CELEBRATION */
#celebration{position:fixed;inset:0;z-index:20000;
background:rgba(0,0,0,.75);display:none;align-items:center;
justify-content:center;flex-direction:column;text-align:center;padding:24px;}
#celebration.show{display:flex;animation:fadeUp .4s ease;}
.celeb-logo{width:80px;margin-bottom:12px;animation:bounce 1s ease infinite;}
.celeb-title{font-size:clamp(1.5rem,5vw,2rem);font-weight:900;margin-bottom:6px;
background:linear-gradient(135deg,#ffd166,#f472b6);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.celeb-sub{font-size:.9rem;color:var(--text2);margin-bottom:16px;line-height:1.5;}
.celeb-xp{font-size:clamp(1.1rem,4vw,1.4rem);font-weight:900;
color:var(--xp);margin-bottom:18px;}
.confetti{position:absolute;border-radius:2px;
animation:confettiFall 2s ease forwards;}

/* SUMMARY */
#day-summary{position:fixed;inset:0;z-index:19000;
background:rgba(0,0,0,.8);display:none;align-items:center;
justify-content:center;padding:20px;overflow-y:auto;}
#day-summary.show{display:flex;}
.sum-card{background:var(--surface);border-radius:22px;padding:24px;
max-width:380px;width:100%;border:1px solid rgba(139,92,246,.25);
animation:popIn .4s cubic-bezier(.34,1.56,.64,1);margin:auto;box-sizing:border-box;}
.sum-title{font-size:1.4rem;font-weight:900;text-align:center;margin-bottom:14px;}
.sum-rows{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.sum-row{display:flex;justify-content:space-between;align-items:center;
padding:9px 12px;background:var(--card);border-radius:11px;}
.sum-label{font-size:.78rem;color:var(--text2);}
.sum-val{font-weight:800;font-size:.86rem;}
.sum-next{background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.18);
border-radius:13px;padding:12px;margin-bottom:16px;text-align:center;}
.sum-next-lbl{font-size:.64rem;color:var(--text2);font-weight:800;
letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px;}
.sum-next-txt{font-size:.84rem;font-weight:700;}

/* PROFILE */
.profile-hero{padding:22px 16px 14px;text-align:center;
background:linear-gradient(180deg,var(--surface),transparent);}
.prof-logo{width:72px;margin-bottom:8px;animation:bounce 2s ease infinite;}
.prof-name{font-size:clamp(1.2rem,4vw,1.5rem);font-weight:900;margin-bottom:2px;}
.prof-full{font-size:.72rem;color:var(--text2);margin-bottom:2px;}
.prof-grade{font-size:.72rem;color:var(--text2);}
.prof-level{display:inline-flex;gap:5px;margin-top:7px;
background:rgba(255,209,102,.08);border:1px solid rgba(255,209,102,.2);
border-radius:20px;padding:4px 12px;font-size:.72rem;font-weight:800;color:var(--xp);}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
margin:0 14px 14px;}
@media(min-width:500px){.stats-grid{grid-template-columns:repeat(6,1fr);}}
.stat-box{background:var(--card);border-radius:12px;padding:11px;
text-align:center;border:1px solid var(--border);}
.stat-val{font-size:clamp(1rem,3.5vw,1.3rem);font-weight:900;}
.stat-lbl{font-size:.58rem;color:var(--text2);margin-top:2px;font-weight:700;}
.badge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 14px 14px;}
@media(min-width:500px){.badge-grid{grid-template-columns:repeat(6,1fr);}}
.badge-item{background:var(--card);border-radius:12px;padding:11px 7px;
text-align:center;border:1px solid var(--border);}
.badge-item.lock-badge{opacity:.35;}
.b-icon{font-size:1.5rem;margin-bottom:3px;}
.b-name{font-size:.58rem;font-weight:700;color:var(--text2);line-height:1.3;}
.reset-sec{margin:0 14px 14px;background:linear-gradient(135deg,#1a0a0a,#0e0c1e);
border-radius:var(--radius);padding:16px;border:1px solid rgba(255,107,107,.18);}
.reset-title{font-weight:800;font-size:.88rem;margin-bottom:10px;color:var(--accent2);}

/* TUTOR */
.tutor-header{padding:16px 14px 12px;
background:linear-gradient(135deg,#0a1020,#06050f);
border-bottom:1px solid var(--border);}
.tutor-title{font-size:clamp(1.1rem,4vw,1.3rem);font-weight:900;color:var(--accent3);}
.tutor-sub{font-size:.7rem;color:var(--text2);margin-top:2px;}
.alert-card{margin:0 14px 9px;border-radius:var(--radius-sm);
padding:12px 13px;display:flex;align-items:flex-start;gap:10px;border:1px solid;}
.alert-good{background:rgba(6,214,160,.06);border-color:rgba(6,214,160,.18);}
.alert-warn{background:rgba(255,209,102,.06);border-color:rgba(255,209,102,.18);}
.alert-info{background:rgba(139,92,246,.06);border-color:rgba(139,92,246,.18);}
.alert-icon{font-size:1.3rem;flex-shrink:0;}
.alert-text{font-size:.76rem;line-height:1.45;}
.alert-text strong{display:block;font-size:.78rem;margin-bottom:1px;}
.tutor-stats{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0 14px 12px;}
@media(min-width:500px){.tutor-stats{grid-template-columns:repeat(4,1fr);}}
.ts{background:var(--card);border-radius:var(--radius-sm);padding:12px;
border:1px solid var(--border);}
.ts-val{font-size:clamp(1.1rem,4vw,1.4rem);font-weight:900;}
.ts-lbl{font-size:.62rem;color:var(--text2);font-weight:700;margin-top:2px;}

/* LAST STUDY */
.last-study{display:inline-flex;align-items:center;gap:5px;
background:rgba(6,214,160,.08);border:1px solid rgba(6,214,160,.18);
border-radius:20px;padding:3px 11px;font-size:.68rem;font-weight:700;
color:#06d6a0;margin:0 14px 10px;}


.sound-btn:hover{transform:scale(1.1);}

/* TOAST */
.toast{position:fixed;bottom:95px;left:50%;
transform:translateX(-50%) translateY(12px);
background:var(--card2);color:var(--text);border-radius:12px;
padding:9px 16px;font-size:.78rem;font-weight:700;
opacity:0;pointer-events:none;transition:all .3s;z-index:400;
white-space:nowrap;border:1px solid var(--border);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.xp-pop{position:fixed;top:25%;left:50%;
transform:translateX(-50%) scale(.5);
background:linear-gradient(135deg,#8b5cf6,#a78bfa);
color:white;border-radius:20px;padding:10px 20px;
font-size:clamp(.9rem,3.5vw,1.2rem);font-weight:900;
opacity:0;pointer-events:none;transition:all .4s;z-index:500;}
.xp-pop.show{opacity:1;transform:translateX(-50%) scale(1);}

/* RESPONSIVE */
@media(min-width:768px){
/* C1: font-size base */
body{font-size:17px;}

/* C2: max-width centrado */
#app,#onboarding{max-width:700px;margin:0 auto;}
.bottom-nav{max-width:700px;margin:0 auto;}
.sound-btn{right:calc(50% - 700px/2 + 14px);}
#music-fab{right:calc(50% - 700px/2 + 14px);}
#music-panel-menu{right:calc(50% - 700px/2 + 14px);}
.toast{bottom:100px;}

/* C3: Cards */
.card{padding:18px 20px;margin:0 18px 14px;border-radius:20px;border-left:3px solid transparent;}
.sec-title{font-size:.7rem;padding:0 20px;margin-top:14px;margin-bottom:10px;display:flex;align-items:center;gap:8px;color:var(--accent);}
.sec-title::after{content:'';flex:1;height:1px;background:rgba(139,92,246,.15);}

/* C5: Borde izquierdo materia */
.tile-mat{border-left:3px solid var(--mat);box-shadow:0 0 18px rgba(139,92,246,.45),0 0 40px rgba(139,92,246,.15),inset -2px 0 20px rgba(139,92,246,.1);animation:matTileGlow 3s ease-in-out infinite;}
.tile-len{border-left:3px solid var(--len);box-shadow:0 0 18px rgba(236,72,153,.45),0 0 40px rgba(236,72,153,.15),inset -2px 0 20px rgba(236,72,153,.1);animation:matTileGlow 3s ease-in-out infinite;}
.tile-soc{border-left:3px solid var(--soc);box-shadow:0 0 18px rgba(245,158,11,.45),0 0 40px rgba(245,158,11,.15),inset -2px 0 20px rgba(245,158,11,.1);animation:matTileGlow 3s ease-in-out infinite;}
.tile-nat{border-left:3px solid var(--nat);box-shadow:0 0 18px rgba(16,185,129,.45),0 0 40px rgba(16,185,129,.15),inset -2px 0 20px rgba(16,185,129,.1);animation:matTileGlow 3s ease-in-out infinite;}
.tile-eti{border-left:3px solid var(--eti);box-shadow:0 0 18px rgba(255,209,102,.45),0 0 40px rgba(255,209,102,.15),inset -2px 0 20px rgba(255,209,102,.1);animation:matTileGlow 3s ease-in-out infinite;}
.tile-art{border-left:3px solid var(--art);box-shadow:0 0 18px rgba(244,63,94,.45),0 0 40px rgba(244,63,94,.15),inset -2px 0 20px rgba(244,63,94,.1);animation:matTileGlow 3s ease-in-out infinite;}
.tile-efi{border-left:3px solid var(--efi);box-shadow:0 0 18px rgba(59,130,246,.45),0 0 40px rgba(59,130,246,.15),inset -2px 0 20px rgba(59,130,246,.1);animation:matTileGlow 3s ease-in-out infinite;}
.tile-eng{border-left:3px solid var(--eng);box-shadow:0 0 18px rgba(6,214,160,.45),0 0 40px rgba(6,214,160,.15),inset -2px 0 20px rgba(6,214,160,.1);animation:matTileGlow 3s ease-in-out infinite;}
.tile-ppp{border-left:3px solid var(--ppp);box-shadow:0 0 18px rgba(251,113,133,.45),0 0 40px rgba(251,113,133,.15),inset -2px 0 20px rgba(251,113,133,.1);animation:matTileGlow 3s ease-in-out infinite;}
@keyframes matTileGlow{
  0%,100%{opacity:1;}
  50%{filter:brightness(1.08);}
}

/* C6: Nav inferior */
.nav-item .ni{font-size:1.4rem;}
.nav-item{font-size:.64rem;padding:6px 0;gap:3px;}
.bottom-nav{padding:8px 0 14px;}

/* C7: Topbar */
.topbar{padding:20px 20px 14px;}
.topbar-left .greet{font-size:.74rem;color:var(--text2);font-weight:700;}
.topbar-left .name{font-size:1.05rem;}
.chip{padding:6px 13px;font-size:.76rem;gap:5px;}
.version-tag{font-size:.65rem;padding:3px 10px;}

/* C8: Bloques lección */
.block-text{font-size:.92rem;line-height:1.72;}
.block-label{font-size:.65rem;}
.ser-block,.saber-block,.hacer-block{padding:20px;margin-bottom:16px;border-radius:20px;}
.explain-text{font-size:.88rem;line-height:1.72;}
.lesson-content{padding:0 18px;}

/* C9: Hero — ajustes tablet+ */
.hero{
  margin:16px 18px 18px;
  padding:26px 22px;
  border-radius:26px;
}
.hero-brand{font-size:1.55rem;}
.hero-slogan{font-size:.82rem;}
.hero-xp-badge{font-size:.8rem;padding:6px 18px;margin-top:12px;}
}

@media(min-width:1024px){
/* Escritorio: subir el root de 15px a 17px (~113%) para mejorar legibilidad. Solo agranda fuentes (rem); paddings/anchos/alto del nav son px y NO se mueven. */
html{font-size:17px;}
#app{max-width:800px;}
.bottom-nav{max-width:800px;}
:root{--fab-right:calc(50% - 800px/2 + 14px);}
.sound-btn{right:var(--fab-right);}
#music-fab{right:var(--fab-right) !important;bottom:95px !important;}
#music-panel-menu{right:var(--fab-right) !important;}
#luma-orb{right:var(--fab-right) !important;bottom:155px !important;}
/* panel-pos:JS */
.lesson-content{padding-bottom:160px;}
}
@media(min-width:1280px){
#app{max-width:960px;}
.bottom-nav{max-width:960px;}
:root{--fab-right:calc(50% - 960px/2 + 14px);}
.sound-btn{right:var(--fab-right);}
#music-fab{right:var(--fab-right) !important;bottom:95px !important;}
#music-panel-menu{right:var(--fab-right) !important;}
#luma-orb{right:var(--fab-right) !important;bottom:155px !important;}
/* panel-pos:JS */
.lesson-content{padding-bottom:180px;}
}
/* Monitores muy grandes: un punto mas de root (15px -> 18px ~120%). Va despues de 1024/1280 para respetar la cascada. */
@media(min-width:1440px){
html{font-size:18px;}
}

/* ── RESPONSIVE DESKTOP — componentes nuevos v6.3 ───────────── */
@media(min-width:768px){
  /* Aldea canvas — más alto en desktop */
  .aldea-canvas{ aspect-ratio:16/7 !important; max-height:420px; }

  /* Orbes de misión — más grandes en desktop */
  .orbes-misiones{gap:16px;padding:12px 20px 24px;}
  .orbe-mision{width:72px;height:72px;}
  .orbe-mision-ico{font-size:1.6rem;}

  /* Mi Aldea — tarjetas soberanía */
  .aldea-progreso-bar{height:16px;}

  /* Bita mat grid — más columnas en desktop */
  .bita-mat-grid{grid-template-columns:repeat(5,1fr)!important;}

  /* Orbes de logros — más columnas */
  .orbe-grid{grid-template-columns:repeat(4,1fr)!important;}

  /* RPG home — más espacio */
  .rpg-luma-bubble{font-size:.88rem;padding:14px 18px;margin:10px 14px 0;}
  .rpg-topbar{padding:18px 20px 14px;}
  .rpg-name{font-size:1.1rem;}
  .rpg-greet{font-size:.72rem;}

  /* Emociones — fila en desktop */
  .emo-grid{display:flex;justify-content:center;gap:12px;}
  .emo-btn{min-width:80px;}

  /* Step pills sesión */
  .step-pills{gap:8px;padding:10px 20px 8px;}
  .sp{padding:5px 14px;font-size:.7rem;}

  /* Modales soberanía */
  #_sob-modal-ov > div{max-width:420px;}

  /* Lesson top */
  .lesson-top{padding:18px 20px 14px;}
}

@media(min-width:1024px){
  /* Bita mat grid — 6 columnas en pantalla grande */
  .bita-mat-grid{grid-template-columns:repeat(6,1fr)!important;}

  /* Orbe grid logros — 5 columnas */
  .orbe-grid{grid-template-columns:repeat(5,1fr)!important;}

  /* Orbes misión — 4 en fila siempre */
  .orbes-misiones{grid-template-columns:repeat(4,1fr);}
  .orbe-mision{width:80px;height:80px;}

  /* Fuentes más grandes */
  .rpg-name{font-size:1.2rem;}
  .hero-brand{font-size:1.7rem;}
}

/* ANIMATIONS */
@keyframes load{to{width:100%;}}
@keyframes popIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes pulse{0%,100%{box-shadow:0 0 16px rgba(139,92,246,.5)}
50%{box-shadow:0 0 28px rgba(139,92,246,.8)}}
@keyframes confettiFall{
0%{transform:translateY(-80px) rotate(0deg);opacity:1}
100%{transform:translateY(110vh) rotate(720deg);opacity:0}}

[data-logo]{}

/* MUSIC PANEL */
#music-fab{position:fixed;bottom:100px;right:14px;z-index:10400;}
#music-fab{display:none !important;}
#music-toggle-btn{width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,#8b5cf6,#a78bfa);
  border:none;cursor:pointer;font-size:1.1rem;
  box-shadow:0 3px 14px rgba(139,92,246,.45);
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s;}
#music-toggle-btn:active{transform:scale(.92);}
#music-toggle-btn.playing{animation:pulse 2s ease infinite;}


.music-channel{display:flex;align-items:center;gap:9px;padding:8px 10px;
  border-radius:10px;cursor:pointer;transition:background .15s;
  font-size:.8rem;font-weight:700;color:var(--text);}
.music-channel:hover{background:rgba(139,92,246,.15);}
.music-channel.active-ch{background:rgba(139,92,246,.2);color:#a78bfa;}
.music-channel .ch-icon{font-size:1.1rem;width:24px;text-align:center;}
.vol-row{display:flex;align-items:center;gap:8px;
  padding:8px 10px 4px;border-top:1px solid var(--border);margin-top:6px;}
.vol-row span{font-size:.7rem;color:var(--text2);}







/* PLANTA NATIVA */
.planta-wrap{text-align:center;padding:14px 14px 0;}
.planta-label{font-size:.62rem;font-weight:800;color:var(--text2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;}
#planta-svg{transition:transform .8s cubic-bezier(.34,1.56,.64,1);transform-origin:bottom center;}
.planta-hoja{transition:opacity .8s ease;}
.planta-flor{display:none;}

/* MUSIC PANEL */
#music-fab{position:fixed;bottom:95px;right:14px;z-index:9000;}
#music-toggle-btn{width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,#8b5cf6,#a78bfa);
  border:none;cursor:pointer;font-size:1.1rem;
  box-shadow:0 3px 14px rgba(139,92,246,.45);
  display:flex;align-items:center;justify-content:center;transition:transform .2s;}
#music-toggle-btn:active{transform:scale(.92);}
#music-toggle-btn.playing{animation:pulse 2s ease infinite;}
#music-panel-menu{display:none;position:fixed;bottom:150px;right:14px;z-index:10000;background:rgba(13,12,24,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:16px;padding:12px;width:220px;box-shadow:0 8px 32px rgba(0,0,0,.7);}

.music-channel{display:flex;align-items:center;gap:9px;padding:8px 10px;
  border-radius:10px;cursor:pointer;transition:background .15s;
  font-size:.8rem;font-weight:700;color:var(--text);border:none;background:transparent;width:100%;text-align:left;}
.music-channel:hover{background:rgba(139,92,246,.15);}
.music-channel.active-ch{background:rgba(139,92,246,.2);color:#a78bfa;}
.music-channel .chi{font-size:1.1rem;width:26px;text-align:center;}
.vol-row{display:flex;align-items:center;gap:8px;
  padding:8px 10px 4px;border-top:1px solid var(--border);margin-top:6px;}
.vol-row span{font-size:.75rem;color:var(--text2);}




#music-panel-menu{display:none;position:absolute;bottom:60px;right:0;background:#161428;border:1px solid var(--mat);border-radius:16px;padding:15px;width:240px;box-shadow:0 20px 50px rgba(0,0,0,0.9);z-index:9999;}
#music-panel-menu.open{display:block !important;}

/* Auth logo se encoge cuando sale teclado */
/* auth-screen CSS eliminado */
#auth-logo-wrap { transition: all .3s ease; text-align:center; }


/* ═══════════════════════════════════════════════════════════
   SALÓN DE LOGROS NATIVA — CSS Premium
═══════════════════════════════════════════════════════════ */

/* Pantalla Salón de Logros */
#screen-logros {
  background: linear-gradient(160deg, #0a0818 0%, #110d2e 50%, #0e0c1e 100%);
  padding-bottom: 120px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  height: 100% !important;
  position: relative !important;
  transform: none !important;
  filter: none !important;
  backdrop-filter: none !important;
}

.logros-hero {
  text-align: center;
  padding: 28px 20px 16px;
  position: relative;
}

.logros-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(139,92,246,0.18) 0%, transparent 70%);
  pointer-events: none;
}

.logros-titulo {
  font-size: 1.5rem;
  font-weight: 900;
  background: linear-gradient(135deg, #ffd166, #f72585, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 4px;
}

.logros-sub {
  font-size: .75rem;
  color: var(--text2);
  letter-spacing: .05em;
}

.logros-stats {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 12px 0 4px;
}

.logros-stat {
  text-align: center;
}

.logros-stat-num {
  font-size: 1.4rem;
  font-weight: 900;
  color: #ffd166;
}

.logros-stat-lbl {
  font-size: .62rem;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .07em;
}

/* Categorías */
.logros-cat {
  margin: 16px 14px 0;
}

.logros-cat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: 12px;
}

.logros-cat-title {
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.logros-cat-count {
  font-size: .65rem;
  color: var(--text2);
  margin-left: auto;
}

/* Grid de insignias */
.badges-grid-premium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 8px;
}

/* Insignia individual */
.badge-premium {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  position: relative;
}

.badge-icon-wrap {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}

.badge-premium:active .badge-icon-wrap {
  transform: scale(.92);
}

/* Estado bloqueado */
.badge-locked .badge-icon-wrap {
  background: radial-gradient(circle, #1a1535 60%, #0e0c1e 100%);
  border: 2px solid rgba(255,255,255,.06);
  filter: grayscale(1);
  opacity: .35;
}

/* Estado desbloqueado — por rareza */
.badge-comun .badge-icon-wrap {
  background: radial-gradient(circle, #2a2a3a 60%, #1a1a2e 100%);
  border: 2px solid rgba(156,163,175,.65);
  box-shadow: 0 0 16px rgba(156,163,175,.3);
  animation: badgeBreathe 3.5s ease-in-out infinite;
}

.badge-rara .badge-icon-wrap {
  background: radial-gradient(circle, #0f3020 60%, #0a1e12 100%);
  border: 2px solid rgba(6,214,160,.75);
  box-shadow: 0 0 22px rgba(6,214,160,.4), 0 0 44px rgba(6,214,160,.12);
  animation: badgeBreathe 3s ease-in-out infinite;
}

.badge-epica .badge-icon-wrap {
  background: radial-gradient(circle, #0f1a4a 60%, #080e32 100%);
  border: 2px solid rgba(96,165,250,.85);
  box-shadow: 0 0 28px rgba(96,165,250,.45), 0 0 56px rgba(96,165,250,.15);
  animation: badgeBreathe 2.5s ease-in-out infinite;
}

.badge-legendaria .badge-icon-wrap {
  background: radial-gradient(circle, #38084a 60%, #200530 100%);
  border: 2px solid rgba(139,92,246,.95);
  box-shadow: 0 0 32px rgba(139,92,246,.6), 0 0 64px rgba(139,92,246,.25);
  animation: badgeBreathe 2s ease-in-out infinite;
}

.badge-mitica .badge-icon-wrap {
  background: radial-gradient(circle, #3a2200 60%, #200f00 100%);
  border: 2px solid rgba(251,191,36,1);
  box-shadow: 0 0 36px rgba(251,191,36,.65), 0 0 72px rgba(251,191,36,.25);
  animation: badgeBreathe 1.8s ease-in-out infinite;
}

@keyframes badgeBreathe {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* Animaciones de pulso */
@keyframes pulseRara {
  0%,100%{ box-shadow: 0 0 16px rgba(52,211,153,.2); }
  50%{ box-shadow: 0 0 28px rgba(52,211,153,.4); }
}
@keyframes pulseEpica {
  0%,100%{ box-shadow: 0 0 20px rgba(96,165,250,.25); }
  50%{ box-shadow: 0 0 36px rgba(96,165,250,.5); }
}
@keyframes pulseLegend {
  0%,100%{ box-shadow: 0 0 24px rgba(167,139,250,.35), 0 0 48px rgba(167,139,250,.15); }
  50%{ box-shadow: 0 0 40px rgba(167,139,250,.6), 0 0 80px rgba(167,139,250,.3); }
}
@keyframes pulseMitica {
  0%,100%{ box-shadow: 0 0 28px rgba(251,191,36,.4), 0 0 56px rgba(251,191,36,.2); }
  50%{ box-shadow: 0 0 50px rgba(251,191,36,.7), 0 0 100px rgba(251,191,36,.35); transform:scale(1.03); }
}

/* Ícono SVG dentro */
.badge-svg {
  font-size: 2.4rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
}

.badge-locked .badge-svg {
  filter: grayscale(1) brightness(.4);
  font-size: 1.8rem;
}

/* Nombre y rareza */
.badge-name {
  font-size: .6rem;
  font-weight: 800;
  color: var(--text);
  text-align: center;
  line-height: 1.3;
  max-width: 80px;
}

.badge-locked .badge-name {
  color: var(--text2);
}

.badge-rarity {
  font-size: .5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 1px 5px;
  border-radius: 4px;
}

.rarity-comun     { background: rgba(156,163,175,.15); color: #9ca3af; }
.rarity-rara      { background: rgba(52,211,153,.15);  color: #34d399; }
.rarity-epica     { background: rgba(96,165,250,.15);  color: #60a5fa; }
.rarity-legendaria{ background: rgba(167,139,250,.2);  color: #a78bfa; }
.rarity-mitica    { background: rgba(251,191,36,.2);   color: #fbbf24; }

/* Partículas legendaria */
.badge-legendaria::before,
.badge-legendaria::after {
  content: '✦';
  position: absolute;
  font-size: .6rem;
  color: #a78bfa;
  animation: floatParticle 3s ease infinite;
  pointer-events: none;
}
.badge-legendaria::before { top: 5px; right: 8px; animation-delay: 0s; }
.badge-legendaria::after  { bottom: 22px; left: 5px; animation-delay: 1.5s; }

.badge-mitica::before,
.badge-mitica::after {
  content: '★';
  position: absolute;
  font-size: .7rem;
  color: #fbbf24;
  animation: floatParticle 2.5s ease infinite;
  pointer-events: none;
}
.badge-mitica::before { top: 4px; left: 8px; animation-delay: 0s; }
.badge-mitica::after  { bottom: 20px; right: 5px; animation-delay: 1.2s; }

@keyframes floatParticle {
  0%,100%{ transform:translateY(0) scale(1); opacity:.7; }
  50%{ transform:translateY(-6px) scale(1.3); opacity:1; }
}

/* Animación de desbloqueo */
@keyframes unlockReveal {
  0%  { transform:scale(0.3) rotate(-15deg); opacity:0; filter:brightness(3); }
  60% { transform:scale(1.08) rotate(3deg); opacity:1; filter:brightness(1.5); }
  80% { transform:scale(0.95) rotate(-1deg); }
  100%{ transform:scale(1) rotate(0deg); opacity:1; filter:brightness(1); }
}

.badge-unlocking .badge-icon-wrap {
  animation: unlockReveal 1.4s cubic-bezier(.34,1.56,.64,1) forwards !important;
}

/* Modal de insignia */
.badge-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn .2s ease;
}

.badge-modal {
  background: linear-gradient(160deg, #1a1535, #0e0c1e);
  border-radius: 24px;
  padding: 32px 24px;
  max-width: 320px;
  width: 100%;
  text-align: center;
  border: 1px solid rgba(139,92,246,.3);
  box-shadow: 0 20px 60px rgba(0,0,0,.8);
  animation: popIn .4s cubic-bezier(.34,1.56,.64,1);
}

.badge-modal-icon {
  font-size: 4rem;
  margin-bottom: 12px;
  display: block;
}

.badge-modal-name {
  font-size: 1.2rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 6px;
}

.badge-modal-desc {
  font-size: .78rem;
  color: var(--text2);
  line-height: 1.6;
  margin-bottom: 16px;
}

.badge-modal-rarity {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: .7rem;
  font-weight: 800;
  margin-bottom: 16px;
}

.badge-modal-meta {
  font-size: .65rem;
  color: var(--text2);
  margin-bottom: 20px;
}

.badge-modal-close {
  width: 100%;
  padding: 12px;
  border-radius: 50px;
  border: none;
  background: linear-gradient(135deg,#8b5cf6,#a78bfa);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  font-size: .88rem;
}


@keyframes shake {
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-8px);}
  40%{transform:translateX(8px);}
  60%{transform:translateX(-5px);}
  80%{transform:translateX(5px);}
}

.ruta-cfg-btn{padding:7px 14px;border-radius:10px;background:var(--card2);border:2px solid var(--border);color:var(--text);font-size:.78rem;font-weight:700;cursor:pointer;transition:all .2s;}
.ruta-cfg-btn.sel{background:linear-gradient(135deg,var(--accent),#059669);border-color:#06d6a0;color:#fff;}
.ruta-mat-card{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:12px;margin-bottom:5px;background:var(--card2);border:1px solid var(--border);transition:all .2s;}
.ruta-mat-card.active{border-left:4px solid #06d6a0;background:rgba(6,214,160,.06);}
.ruta-mat-card.warn{border-left:4px solid #fbbf24;background:rgba(251,191,36,.06);}

/* ORBES DE MISIONES */
/* v281/v285: tarjetas de materias recomendadas — clase propia (ntv-) para no chocar con .ruta-mat-card del config */
.ntv-mat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  padding:12px 0 88px;
}
.ntv-mat-card{
  border-radius:14px;
  padding:16px 14px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform .15s,box-shadow .2s;
  -webkit-tap-highlight-color:transparent;
  outline:none;
}
.ntv-mat-card:focus,.ntv-mat-card:focus-visible{outline:none;box-shadow:none;}
.ntv-mat-card:hover{transform:scale(1.03) translateY(-2px);}
.ntv-mat-card:active{transform:scale(.97);}
.ntv-mat-card.done{opacity:.7;}
.ntv-mat-ico{font-size:1.8rem;display:block;margin-bottom:9px;line-height:1;}
.ntv-mat-nombre{font-size:.8rem;font-weight:800;line-height:1.25;}
@media(max-width:760px){
  .ntv-mat-grid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:480px){
  .ntv-mat-grid{grid-template-columns:repeat(2,1fr);}
}

.orbes-misiones{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  column-gap:10px;
  row-gap:20px;
  padding:12px 14px 24px;
  justify-items:center;
  align-items:center;
}
.orbe-mision{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:clamp(52px,14vw,68px);height:clamp(52px,14vw,68px);border-radius:50%;cursor:pointer;
  border:none;
  box-shadow:0 0 14px var(--orbe-col,rgba(139,92,246,.7)),inset 0 1px 0 rgba(255,255,255,.18);
  background:radial-gradient(circle at 38% 35%,var(--orbe-col-light,rgba(167,139,250,.6)),var(--orbe-col-dark,rgba(26,16,64,.95)) 70%);
  animation:orbePulse 3s ease-in-out infinite;
  transition:transform .18s,box-shadow .18s;
  -webkit-tap-highlight-color:transparent;}
/* Anillo neón exterior */
.orbe-mision::before{
  content:'';
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:1.5px solid var(--orbe-col,rgba(139,92,246,.6));
  box-shadow:0 0 8px var(--orbe-col,rgba(139,92,246,.5));
  animation:orbeRingPulse 3s ease-in-out infinite;
  pointer-events:none;
}
@keyframes orbeRingPulse{
  0%,100%{opacity:.5;}
  50%{opacity:1;}
}
.orbe-mision.done::before{display:none;}
.orbe-mision:active{transform:scale(.92);}
.orbe-mision-ico{font-size:1.35rem;line-height:1;}
.orbe-mision-badge{position:absolute;top:-3px;right:-3px;
  background:#ffd166;color:#0a0814;
  font-size:.48rem;font-weight:900;
  width:16px;height:16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #08060f;
  box-shadow:0 0 8px rgba(255,209,102,.85);}
.orbe-mision.done{opacity:.45;filter:grayscale(.6);}
@keyframes orbePulse{
  0%,100%{box-shadow:0 0 14px var(--orbe-col,rgba(139,92,246,.7)),inset 0 1px 0 rgba(255,255,255,.15);}
  50%{box-shadow:0 0 28px var(--orbe-col,rgba(139,92,246,1)),0 0 50px var(--orbe-col,rgba(139,92,246,.4)),inset 0 1px 0 rgba(255,255,255,.25);}
}
.stat-card{background:var(--card2);border:1px solid var(--border);border-radius:14px;padding:12px;text-align:center;}
.stat-val{font-size:1.3rem;font-weight:900;margin-bottom:2px;}
.stat-lbl{font-size:.62rem;color:var(--text2);font-weight:700;text-transform:uppercase;letter-spacing:.05em;}
#prof-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;}

/* ── ORBES DE MAESTRIA ── */
.orbe-maestria {
  width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;position:relative;
  animation:lumaBreathe 3s ease-in-out infinite;
  margin:0 auto 8px;cursor:pointer;
}
.orbe-std {
  box-shadow:0 0 20px var(--orbe-color,rgba(124,58,237,.5));
  border:2px solid var(--orbe-color,rgba(124,58,237,.4));
}
.orbe-excel {
  box-shadow:0 0 24px rgba(255,209,102,.7),0 0 48px rgba(255,209,102,.3);
  border:2px solid rgba(255,209,102,.6);
  background:radial-gradient(circle,#2a1f00,#1a1200) !important;
}
.orbe-petal {
  position:absolute;inset:-10px;
  background:conic-gradient(
    transparent 0deg, rgba(255,209,102,.15) 20deg,
    transparent 40deg, rgba(255,209,102,.15) 60deg,
    transparent 80deg, rgba(255,209,102,.15) 100deg,
    transparent 120deg, rgba(255,209,102,.15) 140deg,
    transparent 160deg, rgba(255,209,102,.15) 180deg,
    transparent 200deg, rgba(255,209,102,.15) 220deg,
    transparent 240deg, rgba(255,209,102,.15) 260deg,
    transparent 280deg
  );
  border-radius:50%;
  animation:rotatePetal 8s linear infinite;
}
@keyframes rotatePetal{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.shiny-effect {
  animation:shinyOrbe 2s ease-in-out infinite;
}
@keyframes shinyOrbe {
  0%,100%{filter:drop-shadow(0 0 8px #ffd166);}
  50%{filter:drop-shadow(0 0 20px #ffd166) drop-shadow(0 0 40px rgba(255,209,102,.4));}
}
.orbe-grid {
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:10px;margin:0 14px 14px;
  align-items:stretch;
}
.orbe-card {
  background:var(--card2);border:1px solid var(--border);
  border-radius:16px;padding:14px 8px;text-align:center;
  position:relative;overflow:visible;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:120px;
}
.orbe-card.excel-card {
  border-color:rgba(255,209,102,.3);
  background:linear-gradient(160deg,#1a1200,#0d0900);
}

/* ── LUMA BUBBLE ── */
#luma-bubble {
  position: fixed;
  bottom: 212px;
  right: 66px;
  max-width: 190px;
  background: rgba(10,24,10,.88);
  border: 1px solid rgba(45,90,39,.4);
  border-radius: 18px 18px 18px 6px;
  padding: 9px 13px;
  font-size: .7rem;
  color: #c8e6c9;
  line-height: 1.55;
  z-index: 8599;
  box-shadow: 0 6px 24px rgba(0,0,0,.5), 0 0 12px rgba(45,90,39,.15);
  backdrop-filter: blur(12px);
  opacity: 0;
  transform: scale(0.85) translateY(6px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.175,.885,.32,1.275);
  pointer-events: none;
  font-style: italic;
}
#luma-bubble.show {
  opacity: 1;
  transform: scale(1) translateY(0);
}
#luma-bubble::before {
  content: '🌿 ';
  font-style: normal;
}
#luma-bubble::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 16px;
  width: 12px;
  height: 12px;
  background: rgba(10,24,10,.88);
  border-right: 1px solid rgba(45,90,39,.4);
  border-bottom: 1px solid rgba(45,90,39,.4);
  transform: rotate(45deg);
}
/* ── LUMA LESSON BANNER ── */
#luma-lesson-banner {
  padding: 5px 14px;
  font-size: .65rem;
  color: rgba(120,240,140,1);
  font-style: italic;
  background: #06050f !important;
  position:sticky;
  top:64px;
  z-index:9400;
  box-shadow:0 2px 8px #0a0818;
  border-bottom: 1px solid rgba(45,90,39,.12);
  min-height: 24px;
  transition: opacity .4s;
  display: none;
}

/* Insignia Luma */
@keyframes lumaGold{
  0%,100%{box-shadow:0 0 14px rgba(255,209,102,.6),0 0 28px rgba(255,209,102,.15);border-color:rgba(255,209,102,.6);}
  50%{box-shadow:0 0 24px rgba(255,209,102,1),0 0 48px rgba(255,209,102,.3);border-color:rgba(255,209,102,.95);}
}
.luma-insig-orb{
  width:72px;height:72px;border-radius:50%;overflow:hidden;
  border:3px solid rgba(255,209,102,.75);
  animation:lumaGold 3s ease-in-out infinite;
  margin:0 auto 8px;cursor:pointer;
}
.luma-insig-orb img{width:100%;height:110%;object-fit:cover;object-position:center 12%;margin-top:-5%;}
.maestras-row{display:flex;gap:12px;justify-content:center;margin-bottom:16px;padding:0 14px;}
.maestra-card{
  flex:1;max-width:150px;border-radius:18px;padding:14px 10px;text-align:center;
  cursor:pointer;transition:transform .2s;
}
.maestra-card:hover{transform:scale(1.04);}
.luma-maestra-card{
  background:linear-gradient(160deg,#0d1f0c,#050f04);
  border:1px solid rgba(255,209,102,.3);
  box-shadow:0 0 20px rgba(45,90,39,.15);
}
.sf-maestra-card{
  background:linear-gradient(160deg,#1a1200,#0d0800);
  border:1px solid rgba(255,209,102,.35);
  box-shadow:0 0 20px rgba(255,209,102,.1);
}

.luma-voz-btn{
  width:28px;height:28px;border-radius:50%;border:none;
  background:rgba(45,90,39,.3);color:#6ee7b7;
  font-size:.75rem;cursor:pointer;display:flex;
  align-items:center;justify-content:center;
  transition:background .2s;flex-shrink:0;
}
.luma-voz-btn.activa{background:rgba(45,90,39,.7);color:#d4edda;}


/* ── BITÁCORA DASHBOARD ── */
.bita-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;}
.bita-stat{background:var(--card2);border:1px solid var(--border);border-radius:14px;padding:10px 8px;text-align:center;}
.bita-stat-num{font-size:1.1rem;font-weight:900;color:#fff;}
.bita-stat-lbl{font-size:.56rem;color:var(--text2);margin-top:2px;}

.bita-reciente{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:14px;-webkit-overflow-scrolling:touch;}
.bita-reciente::-webkit-scrollbar{display:none;}
.bita-rec-card{min-width:140px;background:var(--card2);border:1px solid var(--border);border-radius:14px;padding:10px;flex-shrink:0;cursor:pointer;}
.bita-rec-mat{font-size:.62rem;font-weight:800;margin-bottom:2px;}
.bita-rec-ses{font-size:.58rem;color:var(--text2);}
.bita-rec-xp{font-size:.6rem;color:var(--xp);font-weight:800;margin-top:4px;}

.bita-mat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;}
.bita-mat-btn{border-radius:14px;padding:12px 8px;text-align:center;cursor:pointer;border:1px solid var(--border);background:var(--card2);transition:transform .15s;}
.bita-mat-btn{transition:transform .15s,box-shadow .2s;}
.bita-mat-btn:hover{transform:scale(1.04) translateY(-2px);box-shadow:0 6px 20px rgba(139,92,246,.35);cursor:pointer;}
.bita-mat-btn:active{transform:scale(.96);}
.bita-mat-btn.activa{border-width:2px;}
.bita-mat-icon{font-size:1.5rem;margin-bottom:6px;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 6px;animation:lumaBreathe 3s ease-in-out infinite;}
.bita-mat-name{font-size:.58rem;font-weight:800;}
.bita-mat-bar{height:3px;background:rgba(255,255,255,.08);border-radius:3px;margin-top:6px;overflow:hidden;}
.bita-mat-fill{height:100%;border-radius:3px;box-shadow:0 0 6px currentColor;}
.bita-mat-pct{font-size:.52rem;color:var(--text2);margin-top:2px;}

.bita-detalle{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:14px;margin-bottom:14px;display:none;}
.bita-detalle.visible{display:block;}
.bita-tabs{display:flex;gap:6px;margin-bottom:12px;}
.bita-tab{flex:1;padding:7px;border-radius:10px;border:1px solid var(--border);background:var(--card2);font-size:.65rem;font-weight:800;color:var(--text2);cursor:pointer;text-align:center;}
.bita-tab.on{background:var(--purple);color:#fff;border-color:var(--purple);}
.bita-periodo-title{font-size:.62rem;font-weight:800;color:var(--text2);text-transform:uppercase;letter-spacing:.1em;margin:10px 0 6px;}
.bita-unidad-row{display:flex;align-items:center;gap:8px;padding:8px;background:var(--card2);border-radius:10px;margin-bottom:6px;}
.bita-unidad-icon{font-size:1.1rem;flex-shrink:0;}
.bita-unidad-info{flex:1;min-width:0;}
.bita-unidad-name{font-size:.68rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bita-unidad-nota{font-size:.58rem;color:var(--text2);}
.bita-dl-btn{padding:5px 10px;border-radius:8px;border:none;font-size:.6rem;font-weight:800;cursor:pointer;font-family:inherit;flex-shrink:0;}
.bita-mp-card{background:linear-gradient(135deg,rgba(124,58,237,.15),rgba(91,33,182,.08));border:1px solid rgba(124,58,237,.3);border-radius:14px;padding:12px;margin-bottom:12px;}
.bita-mp-status{display:inline-block;padding:3px 8px;border-radius:8px;font-size:.58rem;font-weight:800;}

/* ── PANEL TUTOR ACORDEÓN ── */
.tutor-mat-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-radius:14px;cursor:pointer;
  margin-bottom:6px;transition:background .2s;
}
.tutor-mat-header:active{opacity:.85;}
.tutor-mat-left{display:flex;align-items:center;gap:10px;}
.tutor-mat-icon{font-size:1.3rem;}
.tutor-mat-name{font-size:.8rem;font-weight:900;color:#fff;}
.tutor-mat-prog{font-size:.6rem;color:rgba(255,255,255,.5);margin-top:1px;}
.tutor-mat-arrow{font-size:.75rem;transition:transform .3s;color:rgba(255,255,255,.4);}
.tutor-mat-arrow.open{transform:rotate(90deg);}
.tutor-mat-body{display:none;padding:0 4px 8px;animation:fadeUp .2s ease;}
.tutor-mat-body.open{display:block;}
.tutor-uni-row{display:flex;align-items:center;gap:8px;padding:8px 10px;
  background:rgba(255,255,255,.04);border-radius:10px;margin-bottom:5px;}
.tutor-uni-name{flex:1;font-size:.68rem;font-weight:700;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tutor-uni-nota{font-size:.62rem;font-weight:900;}
.tutor-dl-ico{font-size:1rem;cursor:pointer;opacity:.7;}
.tutor-reporte-btn{
  width:100%;padding:12px;border-radius:14px;border:none;
  background:linear-gradient(135deg,#7c3aed,#4c1d95);
  color:#fff;font-weight:900;font-size:.82rem;cursor:pointer;
  font-family:inherit;margin-bottom:14px;
  box-shadow:0 4px 14px rgba(124,58,237,.3);
}

/* Mi Aldea - Capas PNG */
.aldea-canvas{
  position:relative;width:100%;max-width:620px;
  margin:0 auto;aspect-ratio:4/3;
  border-radius:18px;overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,.4);
}
.aldea-capa{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center bottom;
  transition:opacity .8s ease;
}
.aldea-capa.oculta{ opacity:0; }
.aldea-capa.visible{ opacity:1; }
.aldea-progreso-wrap{
  max-width:420px;margin:12px auto 0;padding:0 4px;
}
.aldea-progreso-bar{
  height:14px;background:rgba(255,255,255,.08);
  border-radius:10px;overflow:hidden;margin-bottom:10px;
  border:1px solid rgba(6,214,160,.15);
}
.aldea-progreso-fill{
  height:100%;background:linear-gradient(90deg,#06d6a0,#84cc16,#fbbf24);
  border-radius:10px;transition:width .8s ease;
  box-shadow:0 0 16px rgba(6,214,160,.9),0 0 32px rgba(6,214,160,.4);
}
.aldea-capas-info{
  display:flex;justify-content:space-between;
  font-size:.72rem;color:var(--text2);
}


/* ── PANEL TUTOR v2 ── */
.tutor-v2-wrap { padding: 0 0 80px; }

/* Bloque 1: Matriz */
.tv2-matriz-wrap { overflow-x: auto; margin-bottom: 16px; }
.tv2-matriz {
  width: 100%; border-collapse: collapse;
  font-size: .68rem; min-width: 520px;
}
.tv2-matriz th {
  padding: 8px 6px; font-weight: 800; font-size: .6rem;
  text-transform: uppercase; letter-spacing: .08em;
  border-bottom: 2px solid rgba(255,255,255,.1);
  white-space: nowrap;
}
.tv2-matriz td {
  padding: 8px 6px; border-bottom: 1px solid rgba(255,255,255,.05);
  text-align: center; transition: background .2s;
}
.tv2-matriz tr:hover td { background: rgba(255,255,255,.03); }
.tv2-celda-nota {
  font-weight: 900; font-size: .72rem; cursor: pointer;
  border-radius: 8px; padding: 4px 6px; display: inline-block;
  transition: transform .15s, opacity .15s;
}
.tv2-celda-nota:hover { transform: translateY(-2px); opacity: .85; }
.tv2-mat-name { text-align: left !important; }
.tv2-mat-icon { font-size: 1rem; margin-right: 4px; }

/* Bloque 2: Diagnósticos */
.tv2-diag-row { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-bottom: 16px; }
.tv2-diag-card {
  background: var(--card2); border: 1px solid var(--border);
  border-radius: 16px; padding: 14px 12px; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.tv2-diag-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.tv2-diag-icon { font-size: 1.4rem; margin-bottom: 6px; }
.tv2-diag-title { font-size: .65rem; font-weight: 900; color: #fff; margin-bottom: 3px; }
.tv2-diag-sub { font-size: .58rem; color: var(--text2); line-height: 1.4; }

/* Modal flotante */
.tv2-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.75);
  z-index: 9500; display: flex; align-items: center;
  justify-content: center; padding: 16px;
  animation: fadeIn .2s ease;
}
.tv2-modal {
  background: #13131a; border-radius: 20px;
  width: 100%; max-width: 480px; max-height: 82vh; overflow-y: auto;
  padding: 20px 16px 28px;
  animation: scaleUp .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes scaleUp { from{transform:scale(.92);opacity:0} to{transform:scale(1);opacity:1} }
.tv2-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.tv2-modal-title { font-size: .9rem; font-weight: 900; color: #fff; }
.tv2-modal-close {
  background: rgba(255,255,255,.08); border: none; color: #fff;
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  font-size: .85rem;
}

/* Bloque 2b: Progreso aldea */
.tv2-aldea-bar-wrap {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 16px;
}
.tv2-aldea-label { display: flex; justify-content: space-between; margin-bottom: 8px; }
.tv2-aldea-label span:first-child { font-size: .7rem; font-weight: 800; color: #fff; }
.tv2-aldea-label span:last-child { font-size: .72rem; font-weight: 900; color: #06d6a0; }
.tv2-aldea-bar {
  height: 10px; background: rgba(255,255,255,.08);
  border-radius: 10px; overflow: hidden; position: relative;
}
.tv2-aldea-fill {
  height: 100%; border-radius: 10px;
  background: linear-gradient(90deg, #06d6a0, #84cc16);
  transition: width 1s ease;
  position: relative; overflow: hidden;
  box-shadow: 0 0 14px rgba(6,214,160,.75);
}
.tv2-aldea-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  animation: shimmer 2s infinite;
}
@keyframes shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }

/* Bloque 3: Selector período PDF */
.tv2-pdf-wrap {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 14px 16px;
}
.tv2-pdf-title { font-size: .7rem; font-weight: 800; color: var(--text2);
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: 10px; }
.tv2-per-row { display: flex; gap: 8px; margin-bottom: 12px; }
.tv2-per-btn {
  flex: 1; padding: 10px 4px; border-radius: 12px;
  border: 2px solid transparent; font-size: .72rem; font-weight: 800;
  cursor: pointer; font-family: inherit; transition: all .2s;
  background: rgba(255,255,255,.05); color: var(--text2);
}
.tv2-per-btn.activo {
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.tv2-pdf-btn {
  width: 100%; padding: 13px; border-radius: 14px; border: none;
  font-family: inherit; font-size: .82rem; font-weight: 900;
  cursor: pointer; transition: opacity .2s, transform .15s;
  background: linear-gradient(135deg, #7c3aed, #4c1d95);
  color: #fff;
}
.tv2-pdf-btn:disabled {
  background: rgba(255,255,255,.08); color: var(--text2); cursor: default;
}
.tv2-pdf-btn:not(:disabled):hover { opacity: .9; transform: translateY(-1px); }

/* Dona CSS emociones */
.tv2-dona-wrap { position: relative; width: 100px; height: 100px; margin: 0 auto 12px; }
.tv2-dona { width: 100px; height: 100px; border-radius: 50%; }


/* ── RENDIMIENTO ACADÉMICO — cards colapsables v2 ── */
.tv2-mc{background:var(--card);border:1px solid var(--border);border-radius:16px;margin:0 0 8px;overflow:hidden;transition:box-shadow .2s;}
.tv2-mc-hdr{display:flex;align-items:center;gap:8px;padding:10px 12px;cursor:pointer;transition:background .15s;}
.tv2-mc-hdr:hover{background:rgba(255,255,255,.04);}
.tv2-mc-icon{font-size:1.1rem;width:26px;text-align:center;flex-shrink:0;}
.tv2-mc-name{flex:1;font-size:.78rem;font-weight:800;color:#fff;}
.tv2-per-pills{display:flex;gap:4px;flex-wrap:wrap;align-items:center;}
.tv2-pp{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:20px;font-size:.58rem;font-weight:800;white-space:nowrap;line-height:1.4;}
.tv2-pp-sup{background:rgba(34,197,94,.15);color:#4ade80;border:1px solid rgba(34,197,94,.3);}
.tv2-pp-alt{background:rgba(96,165,250,.15);color:#60a5fa;border:1px solid rgba(96,165,250,.3);}
.tv2-pp-bas{background:rgba(251,191,36,.15);color:#fbbf24;border:1px solid rgba(251,191,36,.3);}
.tv2-pp-baj{background:rgba(239,68,68,.15);color:#f87171;border:1px solid rgba(239,68,68,.3);}
.tv2-pp-pen{background:rgba(255,255,255,.06);color:var(--text2);border:1px solid var(--border);}
.tv2-pp-pct{background:rgba(139,92,246,.1);color:#a78bfa;border:1px solid rgba(139,92,246,.25);}
.tv2-mc-avwrap{display:flex;align-items:center;gap:6px;min-width:60px;}
.tv2-mc-avpct{font-size:.62rem;font-weight:900;min-width:26px;text-align:right;}
.tv2-mc-avbar{flex:1;height:3px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;}
.tv2-mc-avfill{height:100%;border-radius:3px;}
.tv2-mc-final{min-width:58px;text-align:right;}
.tv2-mc-chev{color:rgba(255,255,255,.35);font-size:.65rem;margin-left:2px;transition:transform .2s;flex-shrink:0;}
.tv2-mc-chev.open{transform:rotate(90deg);}
.tv2-mc-det{display:none;border-top:1px solid rgba(255,255,255,.05);padding:10px 12px 14px;background:rgba(0,0,0,.2);}
.tv2-mc-det.open{display:block;}
.tv2-per-sec{margin-bottom:10px;}
.tv2-per-sec-lbl{font-size:.6rem;font-weight:800;color:var(--text2);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px;}
.tv2-ses-grid{display:flex;flex-wrap:wrap;gap:4px;}
.tv2-sd{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.52rem;font-weight:900;border:1px solid transparent;}
.tv2-sd-sup{background:rgba(34,197,94,.2);color:#4ade80;border-color:rgba(34,197,94,.4);}
.tv2-sd-alt{background:rgba(96,165,250,.2);color:#60a5fa;border-color:rgba(96,165,250,.4);}
.tv2-sd-bas{background:rgba(251,191,36,.18);color:#fbbf24;border-color:rgba(251,191,36,.35);}
.tv2-sd-baj{background:rgba(239,68,68,.15);color:#f87171;border-color:rgba(239,68,68,.3);}
.tv2-sd-ok{background:rgba(255,255,255,.07);color:rgba(255,255,255,.5);border-color:rgba(255,255,255,.1);}
.tv2-sd-pen{background:transparent;color:rgba(255,255,255,.15);border:1px dashed rgba(255,255,255,.12);}
.tv2-legend-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px;}

/* ── PANEL FACILITADOR ── */
.fac-kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px;}
.fac-kpi{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px 8px;text-align:center;}
.fac-kpi-num{font-size:1.3rem;font-weight:900;}
.fac-kpi-lbl{font-size:.55rem;color:var(--text2);margin-top:2px;text-transform:uppercase;letter-spacing:.08em;}
.fac-sem-row{display:flex;gap:8px;margin-bottom:16px;}
.fac-sem-item{flex:1;border-radius:14px;padding:12px 8px;text-align:center;border:1px solid;}
.fac-student-row{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--card);border:1px solid var(--border);border-radius:14px;margin-bottom:8px;}
.fac-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#4c1d95);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;}
.fac-mp-row{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px 14px;margin-bottom:8px;}
.fac-nota-btn{padding:6px 10px;border-radius:8px;border:1px solid var(--border);background:var(--card2);color:var(--text2);font-family:inherit;font-size:.65rem;font-weight:700;cursor:pointer;}
.fac-nota-btn.sel{background:#7c3aed;border-color:#7c3aed;color:#fff;}


/* PANEL ADMINISTRADOR */
.adm-header-card{background:linear-gradient(135deg,#1a1a2e,#2d1b69);border-radius:18px;padding:20px 16px;margin-bottom:16px;border:1px solid rgba(124,58,237,.3);}
.adm-header-title{font-size:1.1rem;font-weight:900;color:#fff;margin-bottom:2px;}
.adm-header-sub{font-size:.65rem;color:rgba(255,255,255,.5);}
.adm-kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px;}
.adm-kpi{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px 8px;text-align:center;}
.adm-kpi-num{font-size:1.3rem;font-weight:900;}
.adm-kpi-lbl{font-size:.55rem;color:var(--text2);margin-top:2px;text-transform:uppercase;letter-spacing:.08em;}
.adm-section{margin-bottom:16px;}
.adm-section-title{font-size:.65rem;font-weight:800;color:var(--text2);text-transform:uppercase;letter-spacing:.12em;padding:0 0 8px;margin-bottom:8px;border-bottom:1px solid var(--border);}
.adm-btn{padding:13px 10px;border-radius:14px;border:none;font-family:inherit;font-size:.78rem;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-bottom:8px;}
.adm-btn-reset{background:linear-gradient(135deg,rgba(251,191,36,.2),rgba(180,130,0,.15));border:2px solid rgba(251,191,36,.5);color:#fbbf24;}
.adm-btn-danger{background:linear-gradient(135deg,rgba(244,63,94,.3),rgba(185,28,28,.25));border:2px solid rgba(244,63,94,.6);color:#fff;}
.adm-btn-logout{background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--text2);}
.adm-emo-row{display:flex;gap:6px;margin-bottom:8px;}
.adm-emo-item{flex:1;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px 6px;text-align:center;}
.adm-emo-icon{font-size:1.2rem;margin-bottom:4px;}
.adm-emo-pct{font-size:.75rem;font-weight:900;}
.adm-emo-lbl{font-size:.55rem;color:var(--text2);}
.adm-stat-row{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--card);border:1px solid var(--border);border-radius:12px;margin-bottom:6px;}
.adm-stat-key{font-size:.68rem;color:var(--text2);}
.adm-stat-val{font-size:.72rem;font-weight:800;color:#fff;}
.adm-select{width:100%;background:var(--card2);border:1px solid var(--border);color:#fff;font-family:inherit;font-size:.72rem;padding:10px 12px;border-radius:12px;outline:none;margin-bottom:4px;display:block;}
.adm-paso-lbl{font-size:.6rem;color:var(--text2);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px;margin-top:10px;}


/* PERFIL SAMANTHA */
.prof-identity-card{background:linear-gradient(160deg,#1a0a3e,#0d1f3c);border-radius:22px;padding:24px 20px 20px;margin-bottom:16px;border:1px solid rgba(167,139,250,.25);}
.prof-avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#4c1d95);display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 12px;border:3px solid rgba(167,139,250,.4);box-shadow:0 0 24px rgba(124,58,237,.4);}
.prof-id-name{text-align:center;font-size:1.1rem;font-weight:900;color:#fff;margin-bottom:2px;}
.prof-id-full{text-align:center;font-size:.65rem;color:rgba(255,255,255,.5);margin-bottom:10px;}
.prof-nivel-badge{display:inline-block;padding:8px 16px;background:rgba(255,209,102,.12);border:1px solid rgba(255,209,102,.3);border-radius:30px;font-size:.8rem;font-weight:900;color:#ffd166;}
.prof-xp-wrap{margin:14px 4px 0;}
.prof-xp-labels{display:flex;justify-content:space-between;font-size:.6rem;color:rgba(255,255,255,.4);margin-bottom:5px;}
.prof-xp-bar{height:8px;background:rgba(255,255,255,.1);border-radius:8px;overflow:hidden;}
.prof-xp-fill{height:100%;border-radius:8px;background:linear-gradient(90deg,#ffd166,#f59e0b);box-shadow:0 0 14px rgba(255,209,102,.65);transition:width 1s ease;}
.prof-xp-falta{text-align:center;font-size:.58rem;color:rgba(255,255,255,.35);margin-top:5px;}
.prof-energy-row{display:grid;grid-template-columns:repeat(3,1fr) !important;gap:8px;margin-bottom:16px;}
.prof-energy-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px 8px;text-align:center;}
.prof-energy-icon{font-size:1.6rem;margin-bottom:4px;}
.prof-energy-val{font-size:1.2rem;font-weight:900;margin-bottom:2px;}
.prof-energy-lbl{font-size:.56rem;color:var(--text2);text-transform:uppercase;letter-spacing:.08em;}
.prof-action-row{display:flex;gap:8px;margin-bottom:16px;}
.prof-action-btn{flex:1;padding:11px 8px;border-radius:14px;border:1px solid var(--border);background:var(--card);color:var(--text2);font-family:inherit;font-size:.68rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;}
.prof-action-btn:active{background:var(--card2);}