/* ============================================================
   EducaIA · TOKENS + COMPONENTES de la capa "--eia-*"
   CSS puro, sin dependencias. Cárgalo SIEMPRE después de index.css:
   los 35 tokens --eia-* son ALIAS de componente de la identidad que
   vive en el :root de index.css (Aurora Glass, congelada por el
   usuario el 2026-08-10 desde mockups/id-glass-dashboard.html).
   Re-derivados a glass en T9: donde hay equivalencia directa el token
   apunta con var(--x) al token base en vez de copiar su hex, así que
   un cambio de identidad llega solo — y el tema oscuro también, porque
   var() se resuelve en el ELEMENTO y [data-theme="dark"] re-declara los
   tokens base. Solo quedan valores propios (líneas, deshabilitado y las
   tres sombras) y esos se re-derivan de la paleta glass.
   ============================================================ */

:root {
  /* ── Superficies · equivalentes OPACOS de las láminas ──────────────
     Los --eia-* son la capa de COMPONENTE (bloques de estudio, modal de
     apodo, tour, tarjetas de lección): piezas que deben TAPAR lo que
     tienen debajo, así que apuntan a las superficies opacas del sistema
     (--cream/--card), NUNCA al material translúcido --glass-bg.
     --eia-soft sí es el relleno HUNDIDO translúcido (tracks, inputs,
     chips neutros): se adapta a la lámina que tenga debajo. */
  --eia-bg:        var(--cream);   /* fondo de página */
  --eia-card:      var(--card);    /* tarjetas / superficies elevadas */
  --eia-soft:      var(--soft);    /* relleno hundido (tracks, inputs, chips neutros) */
  --eia-line:      var(--line);            /* hairline de tinta, mismo RGB que --ink */
  --eia-line-2:    rgba(51,48,74,.06);     /* valor propio: mitad de --eia-line (= --glass-edge claro) */

  /* ── Tinta (índigo cálido) ── */
  --eia-ink:       var(--ink);     /* texto principal / títulos */
  --eia-muted:     var(--muted);   /* secundario */
  --eia-faint:     var(--faint);   /* terciario / metadatos */
  /* Deshabilitado: valores PROPIOS (glass no tiene familia "inerte").
     Re-derivados del índigo de la paleta: tinta al 40% para el rótulo y
     una superficie neutra indigo-lila —no el beige arcilla de antes—
     para el botón muerto. Se conserva la LUMINOSIDAD anterior (#cdc6b8)
     porque 3 páginas fuerzan un rótulo casi blanco encima. */
  --eia-disabled:  rgba(51,48,74,.40);
  --eia-disabled-bg:#cdc7da;

  /* ── Marca ── */
  --eia-blue:      var(--blue);    --eia-blue-edge:   var(--blue-edge);    /* acción primaria */
  --eia-blue-tint: var(--blue-tint);   --eia-blue-ink: var(--blue-ink);    /* alias que faltaban: había consumidores escribiendo var(--eia-blue-tint, <literal>) */
  --eia-violet:    var(--violet);  --eia-violet-edge: var(--violet-edge);  /* IA / secundario */
  --eia-violet-ink:var(--violet-ink);  /* texto violeta sobre su tinte */
  --eia-violet-tint:var(--violet-tint);  /* mismo valor que --eia-lilac, con el nombre de la convención */
  /* El degradado de marca ES el de la CTA. Antes se re-implementaba aquí a mano
     con otro ángulo y los stops invertidos (150deg, azul→violeta, frente al
     135deg violeta-claro→azul del token normativo), así que la app tenía DOS
     degradados de marca casi iguales y ninguno de los dos era el del mockup:
     el avatar social, el héroe de ranking, la barra del tour y la barra de XP
     del raíl salían con el gemelo. Ahora es el token, y en Noche llega solo
     (--grad-cta se re-declara en el bloque oscuro). */
  --eia-grad:      var(--grad-cta);

  /* ── Semánticos · cada familia: sólido / arista / texto / tinte ──────
     Los -tint de glass son LAVADOS translúcidos (van SOBRE la lámina, no
     la sustituyen) y los -ink están medidos sobre su propio -tint en
     .shots/contrast-gate.js. "danger" es la familia coral. */
  --eia-green:     var(--green);   --eia-green-edge:  var(--green-edge);  --eia-green-ink:var(--green-ink); --eia-green-tint:var(--green-tint);
  --eia-streak:    var(--streak);  --eia-streak-2:    var(--streak-lo);
  --eia-streak-tint:var(--streak-tint); --eia-streak-edge:var(--streak-edge);   /* alias que faltaban (los citaba blocks.css por su token base) */
  --eia-gold:      var(--gold);    --eia-gold-ink:    var(--gold-ink);    --eia-gold-tint:var(--gold-tint);
  --eia-gold-edge: var(--gold-edge);   /* arista dorada (nodo "mastered", CTA de repaso) */
  --eia-danger:    var(--coral);   --eia-danger-ink:  var(--coral-ink);   --eia-danger-tint:var(--coral-tint);
  --eia-danger-edge:var(--coral-edge);
  --eia-sky:       var(--sky);     --eia-sky-ink:     var(--sky-ink);     --eia-sky-tint: var(--sky-tint);
  --eia-sky-edge:  var(--sky-edge);    /* alias que faltaba */
  --eia-orange-ink:var(--streak-ink);  /* ink cálido (racha / aviso naranja) */
  --eia-emerald:   var(--green-lo);    /* 2º stop verde de los degradados "completado" */
  --eia-lilac:     var(--violet-tint); /* superficie de chip/pill morado */

  /* ── Radios (geometría, no identidad de tema) ── */
  --eia-r-pill: 999px;
  --eia-r-btn:  15px;
  --eia-r-card: 20px;
  --eia-r-lg:   24px;

  /* ── Sombras · misma silueta, color del sistema ─────────────────────
     Antes hardcodeaban rgba(46,36,82,…) y su gemelo oscuro usaba NEGRO,
     así que se desincronizaban del resto. Ahora las tres se construyen
     con rgba(var(--shd),…) —índigo cálido, nunca gris sucio— y el glow
     del héroe con rgba(var(--shd-cta),…), que es el mismo del CTA. */
  --eia-sh-card:   0 2px 9px rgba(var(--shd),.06);
  --eia-sh-hero:   0 14px 30px -12px rgba(var(--shd-cta),.5);   /* tarjeta morada elevada */
  --eia-sh-pop:    0 30px 70px -28px rgba(var(--shd),.5);       /* modal / device */
}

/* Colores por ASIGNATURA — usar el tile (tint de fondo) + fg (texto del monograma/emoji).
   data-subject en el contenedor; o aplicar las clases .subj-*
   Re-derivados a las 7 familias glass (receta .ico.* del mockup del panel:
   tinte de la familia + su -ink), así que la aurora se ve a través del tile
   y el tema oscuro llega solo. El REPARTO asignatura→familia no cambia. */
.subj-bio   { --tile:var(--green-tint);  --fg:var(--green-ink); }  /* Biología    */
.subj-mate  { --tile:var(--blue-tint);   --fg:var(--blue-ink); }   /* Matemáticas */
.subj-fis   { --tile:var(--violet-tint); --fg:var(--violet-ink); } /* Física      */
.subj-hist  { --tile:var(--streak-tint); --fg:var(--streak-ink); } /* Historia    */
.subj-quim  { --tile:var(--green-tint);  --fg:var(--green-ink); }  /* ⚗︎ Química     */
.subj-ing   { --tile:var(--sky-tint);    --fg:var(--sky-ink); }    /* Inglés      */
.subj-leng  { --tile:var(--coral-tint);  --fg:var(--coral-ink); }  /* Lengua      */
.subj-otra  { --tile:var(--soft);        --fg:var(--muted); }

/* ════════════════════════════════════════════════════════════
   1) BOTÓN "chunky" — la firma del rediseño
   T9 · Re-derivado a CTA glass: la arista sólida (box-shadow 0 Npx 0)
   deja paso al degradado + glow del acento + brillo interior, la
   gramática de .btn de mockups/id-glass-*.html. Se conserva la API de
   clases y la física del press (translateY con --spring), que baja de
   5px a 1px porque ya no hay borde de 9px que hundir; --dy sigue siendo
   el único punto de control. Hover: 2px de subida (mockup).
   ════════════════════════════════════════════════════════════ */
.btn3d {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--disp); font-weight: 600; font-size: 16px; letter-spacing: -.01em;
  padding: 15px 22px; border: none; border-radius: var(--eia-r-btn);
  cursor: pointer; transition: transform .12s var(--spring), box-shadow .12s;
  -webkit-tap-highlight-color: transparent; user-select: none;
  --dy: 1px;
}
.btn3d:hover  { transform: translateY(-2px); }
.btn3d:active { transform: translateY(var(--dy)); }

/* Primaria y violeta comparten el glow violeta-azul del sistema (--shd-cta). */
.btn3d--primary { background-image: var(--grad-cta); color:#fff; box-shadow: var(--glass-cta); }
.btn3d--primary:active { box-shadow: 0 6px 16px -8px rgba(var(--shd-cta),.5), inset 0 1px 0 rgba(255,255,255,.35); }

.btn3d--violet  { background-image: linear-gradient(135deg, var(--eia-violet), var(--eia-violet-edge)); color:#fff;
  box-shadow: var(--glass-cta); }
.btn3d--violet:active { box-shadow: 0 6px 16px -8px rgba(var(--shd-cta),.5), inset 0 1px 0 rgba(255,255,255,.35); }

/* Verde: no hay glow verde en la paleta congelada, así que el volumen lo dan
   el degradado hacia la arista y la sombra ambiental índigo (--shd). */
.btn3d--success { background-image: linear-gradient(135deg, var(--eia-green), var(--eia-green-edge)); color:#fff;
  box-shadow: 0 12px 28px -12px rgba(var(--shd),.40), inset 0 1px 0 rgba(255,255,255,.35); }
.btn3d--success:active { box-shadow: 0 6px 16px -10px rgba(var(--shd),.40), inset 0 1px 0 rgba(255,255,255,.35); }

/* neutro: lámina de cristal con borde luminoso (receta .btn.ghost del mockup);
   el press la HUNDE con --glass-in en vez de encogerle la arista. */
.btn3d--ghost {
  background: var(--glass-bg-2); color: var(--eia-ink); border: 1px solid var(--glass-border);
  box-shadow: var(--glass-sm);
}
.btn3d--ghost:active { box-shadow: var(--glass-in); }

/* blanco sobre fondo de color (CTA dentro de tarjeta morada): tiene que TAPAR
   el degradado, así que se queda en la superficie OPACA --eia-card. */
.btn3d--white { background: var(--eia-card); color: var(--blue-ink);
  box-shadow: 0 10px 22px -12px rgba(var(--shd),.45), inset 0 1px 0 rgba(255,255,255,.9); }
.btn3d--white:active { box-shadow: var(--glass-in); }

.btn3d[disabled], .btn3d--disabled { /* !imp: estado disabled del componente */
  background-image: none !important; background-color: var(--eia-disabled-bg) !important;
  color: var(--eia-disabled) !important;
  box-shadow: none !important; cursor: default; pointer-events: none;
}
.btn3d--block { width: 100%; }
.btn3d--sm { font-size: 13.5px; padding: 11px 16px; border-radius: 13px; }

/* ════════════════════════════════════════════════════════════
   2) TARJETAS
   ════════════════════════════════════════════════════════════ */
.eia-hero { background: var(--eia-grad); border-radius: var(--eia-r-lg); box-shadow: var(--eia-sh-hero); color:#fff; position:relative; overflow:hidden; }
/* círculos decorativos translúcidos dentro de .eia-hero */
.eia-hero::before { content:''; position:absolute; right:-34px; top:-34px; width:150px; height:150px; border-radius:50%; background:rgba(255,255,255,.10); }

/* ════════════════════════════════════════════════════════════
   3) ANILLO DE PROGRESO (meta diaria, % dominado, nivel)
   SVG: <circle r=R> de fondo + <circle> de relleno con
   stroke-dasharray = 2πR ; stroke-dashoffset = C*(1 - pct).
   Rotar el <svg> -90deg para empezar arriba.  r=34 → C≈213.6.
   El track usa --eia-line (un stroke SVG no puede llevar la sombra
   interior de --glass-in, que es como el sistema marca los hundidos).
   ════════════════════════════════════════════════════════════ */
.ring { transform: rotate(-90deg); }
.ring__track { fill:none; stroke: var(--eia-line); }
.ring__fill  { fill:none; stroke: var(--eia-green); stroke-linecap: round;
               transition: stroke-dashoffset .5s cubic-bezier(.2,.8,.3,1); }

/* ════════════════════════════════════════════════════════════
   4) ORBE-MASCOTA "Nova" (asistente IA) — solo CSS, sin SVG complejo.
   Markup:
   <div class="nova"><i class="nova__spark">✦</i>
     <div class="nova__body">
       <i class="nova__gloss"></i>
       <i class="nova__eye nova__eye--l"></i><i class="nova__eye nova__eye--r"></i>
       <i class="nova__smile"></i>
     </div></div>
   Tamaño vía font-size del .nova (escala con em). Default ≈ 74px.
   Cuerpo re-derivado a los 2º stops de la marca (azul→violeta) y el
   volumen a rgba(var(--shd)) / rgba(var(--shd-cta)). La CARA (ojos,
   sonrisa) se queda en literales a propósito: es la misma en ambos
   temas, la tinta del sistema se volvería casi blanca en oscuro.
   ════════════════════════════════════════════════════════════ */
.nova { position:relative; width:1em; height:1em; font-size:74px; animation: nova-bob 3.4s ease-in-out infinite; transform-origin:bottom center; }
.nova__spark { position:absolute; top:-.1em; right:-.05em; font-size:.19em; color:var(--gold-lo); font-style:normal; }
.nova__body  { position:absolute; inset:0; border-radius:36% 36% 40% 40% / 38% 38% 42% 42%;
  background: linear-gradient(150deg, var(--blue-lo), var(--violet-lo));
  box-shadow: inset 0 .09em .17em rgba(255,255,255,.4), inset 0 -.12em .2em rgba(var(--shd),.28), 0 .11em .22em -.08em rgba(var(--shd-cta),.5);
  overflow:hidden; }
.nova__gloss { position:absolute; top:8%; left:14%; width:48%; height:34%; background:rgba(255,255,255,.5); border-radius:50%; filter:blur(.07em); }
.nova__eye   { position:absolute; top:43%; width:.12em; height:.16em; background:#2c2647; border-radius:.08em; }
.nova__eye--l{ left:27%; } .nova__eye--r{ right:27%; }
.nova__smile { position:absolute; top:64%; left:50%; transform:translateX(-50%); width:.22em; height:.11em; border-bottom:.035em solid rgba(44,38,71,.85); border-radius:0 0 .22em .22em; }
.nova.is-cheer { animation: nova-cheer .6s ease; }
@keyframes nova-bob   { 0%,100%{ transform:translateY(0) rotate(-1deg) } 50%{ transform:translateY(-.07em) rotate(1deg) } }
@keyframes nova-cheer { 0%{ transform:translateY(0) scale(1) } 35%{ transform:translateY(-.12em) scale(1.06) } 70%{ transform:translateY(0) scale(1.01) } 100%{ transform:translateY(0) scale(1) } }

/* ════════════════════════════════════════════════════════════
   5) CUENTA ATRÁS + BARRA DE PROGRESO (tarjeta de examen)
   Chip de cuenta atrás coloreado por urgencia: cada estado usa el
   -ink de SU familia sobre su propio -tint (los tres pares están
   medidos en el gate). La barra sigue la receta .track del mockup:
   relleno hundido + brillo superior en el relleno.
   ════════════════════════════════════════════════════════════ */
.countdown { font-size:12px; font-weight:800; padding:5px 10px; border-radius:10px; white-space:nowrap; }
.countdown--ok   { color:var(--eia-green-ink);  background:var(--eia-green-tint); }  /* lejano / sano */
.countdown--warn { color:var(--eia-danger-ink); background:var(--eia-danger-tint); } /* medio */
.countdown--soon { color:var(--eia-muted);      background:var(--eia-soft); }        /* informativo */
.bar { height:8px; background:var(--eia-soft); box-shadow:var(--glass-in); border-radius:99px; overflow:hidden; }
.bar > i { display:block; height:100%; border-radius:99px; box-shadow:inset 0 1px 0 rgba(255,255,255,.35); }

/* ════════════════════════════════════════════════════════════
   6) QUIZ — estados de opción
   El tinte del estado se pinta como IMAGEN sobre la superficie
   (background-image con un degradado de un solo color + background-color):
   `background: var(--tint), var(--card)` sería inválido at-computed-value
   time y dejaría la opción TRANSPARENTE. La tecla ✓/✗ lleva blanco sobre
   la ARISTA de la familia, nunca sobre el color base (regla del mockup).
   ════════════════════════════════════════════════════════════ */
.opt { display:flex; align-items:center; gap:11px; width:100%; text-align:left; font-family:inherit;
       font-size:14px; font-weight:600; padding:14px 15px; border-radius:14px; cursor:pointer;
       background: var(--eia-card); border:1.5px solid var(--eia-line); color:var(--eia-ink); }
.opt__key { flex:none; width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; background: var(--eia-soft); border:1.5px solid var(--eia-line); color: var(--eia-muted); }
/* El CANTO del estado usa --*-edge-soft (que apunta al -ink de la familia): el
   -edge se ve en claro pero sobre el tinte oscuro mide 1.9-2.0, o sea que en
   Noche el borde del acierto/fallo desaparecía. La TECLA sí se queda en -edge,
   que es su rol de relleno opaco con rótulo blanco (par gateado). */
.opt.is-correct { background-color: var(--eia-card); background-image: linear-gradient(var(--eia-green-tint), var(--eia-green-tint));
  border-color: var(--green-edge-soft); color: var(--eia-green-ink); }
.opt.is-correct .opt__key { background: var(--eia-green-edge); color:#fff; border:none; }
.opt.is-wrong   { background-color: var(--eia-card); background-image: linear-gradient(var(--eia-danger-tint), var(--eia-danger-tint));
  border-color: var(--coral-edge-soft); color: var(--eia-danger-ink); }
.opt.is-wrong .opt__key { background:var(--eia-danger-edge); color:#fff; border:none; }
.opt.is-muted   { color: var(--eia-faint); border-color: var(--eia-line-2); }

/* ════════════════════════════════════════════════════════════
  Notas de tipografía: --disp (Fredoka) en títulos, botones y badges;
  --ui (Nunito) en cuerpo e inputs.
  Cuerpo: 13–15px, line-height 1.5–1.6, color var(--eia-muted).
  ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   PUENTE CON index.css  ·  cargar SIEMPRE después de index.css.
   Eleva los componentes compartidos ya existentes al lenguaje de la
   identidad sin tocar index.css (producción). index.css ya trae la
   paleta, las láminas y la trilogía de elevación, así que aquí solo
   añadimos la FIRMA que falta.
   ════════════════════════════════════════════════════════════ */

/* — Tokens --eia-* en modo oscuro (T9) ────────────────────────────────
     La mayoría YA NO necesita gemelo: apuntan con var() a tokens que
     [data-theme="dark"] de index.css re-declara (--card, --soft, --line,
     --ink, --muted, --faint, las 7 familias con sus -tint/-ink), y var()
     se resuelve en el ELEMENTO, así que el tema llega solo. Aquí quedan
     únicamente los valores PROPIOS: la línea fina secundaria, el par de
     deshabilitado y las tres sombras (misma silueta, más profundidad). — */
[data-theme="dark"]{
  --eia-line-2:rgba(240,236,247,.07);
  --eia-disabled:rgba(240,236,247,.30);
  --eia-disabled-bg:#3a3350;
  --eia-sh-card:0 3px 12px rgba(var(--shd),.42);
  --eia-sh-hero:0 16px 34px -14px rgba(var(--shd-cta),.55);
  --eia-sh-pop:0 30px 70px -28px rgba(var(--shd),.72);
}

/* La "bridge" de botones/tut se plegó en index.css (final del archivo). */