/* Ingenia · interfaz del estudiante (solo index.html). Modo oscuro como diseño principal.
   Se carga DESPUÉS de estilos.css: redefine los colores y suma los componentes del inicio. El panel de administración no la usa. */
:root:root:root{
  --bg:#141414; --surface:#222222; --surface-2:#2b2b2b; --ink:#F8F7F4; --muted:#BDB7AE; --line:#3a3a3a;
  --accent:#FF914D; --accent-ink:#141414; --accent-text:#FF914D; --focus:#FFD7B8;
  --good:#4ADE80; --good-bg:#14301f; --bad:#FF8A80; --bad-bg:#3a1a18; --warn:#FBBF24; --warn-bg:#2b2b2b;
  --r:14px; --sombra:0 8px 24px rgba(0,0,0,.35);
  color-scheme:dark;
}
body{-webkit-font-smoothing:antialiased}
.wrap.ancha{max-width:980px}
.btn.ghost{color:var(--accent)}
.btn:hover:not([disabled]){filter:brightness(1.08)}
.btn,.opt,.eje-card{transition:filter .15s,border-color .15s,transform .2s,box-shadow .2s}
.banner{background:var(--surface-2);border-left:4px solid var(--accent)}
.card{border-radius:var(--r)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* Encabezado con logo (logo.png sin modificar; su fondo claro se mantiene para que se lea el texto negro) */
header .lg{gap:14px;flex-wrap:wrap}
.lema{font-size:.85rem;color:var(--muted);max-width:24ch;line-height:1.3;border-left:3px solid var(--accent);padding-left:10px}
.hd-right{flex-direction:row;flex-wrap:wrap;align-items:center}
.curso{display:inline-block;margin-top:6px;font-size:.8rem;padding:2px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}

.seccion{display:flex;flex-direction:column;gap:12px}
.seccion>h2{font-family:var(--font-display);font-weight:600;margin:0;font-size:1.2rem}
.seccion>.sub{margin:0;color:var(--muted);font-size:.9rem}
.ico{flex:none;color:var(--accent)}

/* Estadísticas */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:6px;min-height:136px}
.stat .k{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.85rem;font-weight:600}
.stat .v{font-size:2rem;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.stat .v small{font-size:.9rem;font-weight:600;color:var(--muted)}
.stat .s{font-size:.82rem;color:var(--muted)}
.stat .s b{color:var(--ink)}
.stat .ok{color:var(--good)} .stat .no{color:var(--bad)}
.stat.vacio .v{color:var(--muted)}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:340px){.stats{grid-template-columns:1fr}}
.bar{height:10px;background:var(--surface-2);border:0;border-radius:999px}
.bar>i{border-radius:999px;background:var(--accent)}
@media (prefers-reduced-motion:no-preference){.bar>i{animation:crece .7s ease-out}@keyframes crece{from{width:0}}}
.aviso-carga{color:var(--muted);font-size:.9rem;margin:0}
.sk-bloque{background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 50%,var(--surface) 75%);background-size:200% 100%;border-radius:var(--r);min-height:136px;border:1px solid var(--line)}
@media (prefers-reduced-motion:no-preference){.sk-bloque{animation:brilla 1.4s linear infinite}@keyframes brilla{to{background-position:-200% 0}}}

/* Tarjetas de eje */
.ejes{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-items:start}
@media (max-width:700px){.ejes{grid-template-columns:1fr}}
.eje-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:12px}
.eje-card:hover,.eje-card.open{border-color:var(--accent);box-shadow:0 0 0 1px rgba(255,145,77,.3),var(--sombra)}
@media (prefers-reduced-motion:no-preference){.eje-card:hover{transform:translateY(-2px)}}
.eje-top{display:flex;gap:12px;align-items:center}
.eje-ico{flex:none;width:44px;height:44px;border-radius:12px;background:var(--surface-2);display:grid;place-items:center}
.eje-top h3{margin:0;font-family:var(--font-display);font-size:1.1rem;font-weight:600}
.eje-card>p{margin:0;color:var(--muted);font-size:.9rem}
.eje-prog .rl{font-size:.88rem;margin-bottom:6px}
.eje-prog .rl span{color:var(--muted)}
.eje-btn{align-self:flex-start;display:inline-flex;gap:8px;align-items:center}
.eje-btn .chev{transition:transform .2s}
.eje-card.open .eje-btn .chev{transform:rotate(180deg)}
.eje-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.eje-card.open .eje-panel{grid-template-rows:1fr}
.eje-panel>div{overflow:hidden;min-height:0;visibility:hidden;display:flex;flex-direction:column;gap:8px;transition:visibility 0s .25s}
.eje-card.open .eje-panel>div{visibility:visible;transition-delay:0s}
.bl{font:inherit;color:var(--ink);text-align:left;width:100%;display:flex;gap:12px;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer}
.bl:hover{border-color:var(--accent)}
.bl .t{flex:1;display:flex;flex-direction:column;gap:2px;font-weight:600}
.bl .t span{font-weight:400;font-size:.8rem;color:var(--muted)}
.est{display:inline-flex;gap:5px;align-items:center;font-size:.76rem;font-weight:700;white-space:nowrap}
.est svg{width:16px;height:16px}
.est.ok{color:var(--good)} .est.ref{color:var(--warn)} .est.now{color:var(--accent)} .est.todo{color:var(--muted)}
.eje-panel .foot{margin:2px 0 0}
@media (max-width:420px){.bl{flex-wrap:wrap}.est{margin-left:auto}}

/* Evolución */
.evo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:760px){.evo{grid-template-columns:1fr}}
.evo .card h3{margin:0;font-family:var(--font-display);font-size:1rem;font-weight:600}
.lineas{width:100%;max-width:560px;height:auto;display:block}
.lineas text{fill:var(--muted);font-size:11px}
.lineas .gd{stroke:var(--line);stroke-width:1}
.lineas .ln{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.lineas circle{fill:var(--accent);stroke:var(--surface);stroke-width:2}
.hbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:baseline}
.hbar .bar{grid-column:1/-1}
.hbar .nom{font-size:.9rem}
.hbar b{font-variant-numeric:tabular-nums}
.hbar .foot{grid-column:1/-1;margin-top:-2px}
.tabla-sr summary{font-size:.85rem;color:var(--muted);font-weight:600}
.tabla-sr table{margin-top:8px;font-size:.85rem}

/* Logros */
.logros{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:860px){.logros{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.logros{grid-template-columns:1fr}}
.logro{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:8px}
.logro .ins{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--muted);border:2px solid var(--line)}
.logro .ins svg{width:26px;height:26px}
.logro h3{margin:0;font-family:var(--font-display);font-size:1rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.logro p{margin:0;font-size:.85rem;color:var(--muted)}
.logro .est-l{font-size:.8rem;font-weight:700;color:var(--muted)}
.logro.on{border-color:var(--accent);box-shadow:0 0 0 1px rgba(255,145,77,.25)}
.logro.on .ins{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.logro.on .est-l{color:var(--accent)}
.logro:not(.on) .ins{opacity:.7}
@media (prefers-reduced-motion:no-preference){.logro.on .ins{animation:brote .6s ease-out}@keyframes brote{0%{transform:scale(.7)}60%{transform:scale(1.12)}100%{transform:scale(1)}}}

/* Aviso de logro */
#toasts{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:20;width:min(92vw,420px)}
.toast{background:var(--surface);border:1px solid var(--accent);border-radius:var(--r);padding:12px 14px;display:flex;gap:12px;align-items:flex-start;box-shadow:var(--sombra);cursor:pointer}
.toast b{display:block}
.toast span{font-size:.88rem;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){.toast{animation:entra .35s ease-out}@keyframes entra{from{opacity:0;transform:translateY(14px)}}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.logro .ins .ico{color:currentColor}

/* Cuenta regresiva */
.paes{flex-direction:column;align-items:stretch;gap:8px}
.crono{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cr{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 4px;text-align:center}
.cr b{display:block;font-size:1.9rem;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--accent)}
.cr span{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.cr-sub{font-size:.88rem;color:var(--muted);text-align:center}
@media (max-width:380px){.cr b{font-size:1.5rem}}