/* ============================================================
   ZAHARDEV ACADEMY — estilos
   Celular primero (pestañas abajo, dedo pulgar) y escritorio (barra lateral).
   Decisiones con evidencia en docs/diseno-pedagogico.md:
   · objetivos táctiles ≥ 44–48 px (Apple HIG / Material)
   · progreso siempre visible (gradiente de meta, progreso dotado)
   · retroalimentación inmediata en práctica; diferida en examen
   · celebración al cierre (regla pico-final)
   ============================================================ */

:root{
  /* marca ZaharDev (zahardev.com): índigo #3730A3 en claro y #A5B4FC en oscuro, sobre un fondo con tinte índigo */
  --bg:#0B0D1C; --bg-2:#0F1226; --surface:#151935; --surface-2:#1B2042; --surface-3:#232A52;
  --line:#2E3668; --line-soft:#20264A;
  --text:#EEF0FA; --text-2:#C3C8E0; --dim:#A3A9C6; --faint:#9298B8;
  --brand:#A5B4FC; --brand-ink:#14163A;

  /* color del juego */
  --xp:#FFC53D; --xp-ink:#2A1E00; --xp-soft:rgba(255,197,61,.14);
  --fire:#FF8A3D; --fire-soft:rgba(255,138,61,.15);
  --gem:#A98BFF; --gem-soft:rgba(169,139,255,.16);
  --ok:#3DD68C; --ok-soft:rgba(61,214,140,.14); --ok-ink:#03190E;
  --bad:#FF6B6B; --bad-soft:rgba(255,107,107,.13);
  --warn:#F5B84A; --warn-soft:rgba(245,184,74,.13);
  --road:#7AA7E0; --road-soft:rgba(122,167,224,.14);
  --r-comun:#5FD1C4; --r-rara:#5B9CFF; --r-epica:#B57BFF; --r-legendaria:#FFC53D;

  --acc:var(--brand); --acc-ink:var(--brand-ink); --acc-soft:rgba(165,180,252,.14); --acc-line:rgba(165,180,252,.36);

  --radius:16px; --radius-sm:12px; --radius-lg:22px;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 16px 36px -24px rgba(0,0,0,.85);
  --lift:0 3px 0 rgba(0,0,0,.35);
  --f-display:"Inter",-apple-system,"Segoe UI",system-ui,Roboto,Arial,sans-serif;
  --f-body:"Inter",-apple-system,"Segoe UI",system-ui,Roboto,Arial,sans-serif;
  --f-label:var(--f-body);
  --f-mono:"JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --side-w:264px; --top-h:58px; --nav-h:68px; --read-max:760px;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  color-scheme:dark;
}
/* cada escuela conserva su color; Fundamentos (el tronco común) lleva el de la marca */
.t-fundamentos{ --acc:#A5B4FC; --acc-ink:#14163A; --acc-soft:rgba(165,180,252,.14); --acc-line:rgba(165,180,252,.36); --acc-2:#6366F1; }
.t-zenix      { --acc:#34D399; --acc-ink:#03170F; --acc-soft:rgba(52,211,153,.14); --acc-line:rgba(52,211,153,.36); --acc-2:#0E8A5F; }
.t-zentor     { --acc:#F2B544; --acc-ink:#1A1206; --acc-soft:rgba(242,181,68,.14); --acc-line:rgba(242,181,68,.36); --acc-2:#A77412; }
.t-marketing  { --acc:#F472B6; --acc-ink:#2A0718; --acc-soft:rgba(244,114,182,.14); --acc-line:rgba(244,114,182,.38); --acc-2:#BE185D; }

@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#F5F6FB; --bg-2:#EDEFF7; --surface:#FFFFFF; --surface-2:#F5F6FB; --surface-3:#EBEDF6; --line:#D6D9E8; --line-soft:#E5E7F1;
    --text:#14161A; --text-2:#3D4256; --dim:#565C76; --faint:#646A84;
    --brand:#3730A3; --brand-ink:#FFFFFF; --xp:#9A6700; --xp-ink:#FFFFFF; --xp-soft:rgba(233,164,0,.14); --fire:#D9560B; --fire-soft:rgba(240,106,18,.12);
    --gem:#6E4FE0; --gem-soft:rgba(110,79,224,.10); --ok:#0E7F49; --ok-soft:rgba(20,163,94,.11); --ok-ink:#FFFFFF; --bad:#C62E2E; --bad-soft:rgba(214,60,60,.09);
    --warn:#8F5C00; --warn-soft:rgba(233,164,0,.14); --road:#2F67B2; --road-soft:rgba(47,103,178,.10);
    --r-comun:#0F766E; --r-rara:#2F6FE0; --r-epica:#8A46E0; --r-legendaria:#9A6700;
    --acc:var(--brand); --acc-ink:var(--brand-ink); --acc-soft:rgba(55,48,163,.08); --acc-line:rgba(55,48,163,.28);
    --shadow:0 1px 2px rgba(20,22,26,.05),0 10px 28px -20px rgba(20,22,26,.30); --lift:0 3px 0 rgba(20,22,26,.10);
    color-scheme:light;
  }
  :root:not([data-theme="dark"]) .t-fundamentos{ --acc:#3730A3; --acc-ink:#FFF; --acc-soft:rgba(55,48,163,.08); --acc-line:rgba(55,48,163,.28); --acc-2:#262083; }
  :root:not([data-theme="dark"]) .t-zenix{ --acc:#047857; --acc-ink:#FFF; --acc-soft:rgba(4,120,87,.09); --acc-line:rgba(4,120,87,.30); --acc-2:#065F46; }
  :root:not([data-theme="dark"]) .t-zentor{ --acc:#8A5A00; --acc-ink:#FFF; --acc-soft:rgba(138,90,0,.10); --acc-line:rgba(138,90,0,.32); --acc-2:#6B4500; }
  :root:not([data-theme="dark"]) .t-marketing{ --acc:#BE185D; --acc-ink:#FFF; --acc-soft:rgba(190,24,93,.08); --acc-line:rgba(190,24,93,.30); --acc-2:#8E1146; }
}
:root[data-theme="light"]{
    --bg:#F5F6FB; --bg-2:#EDEFF7; --surface:#FFFFFF; --surface-2:#F5F6FB; --surface-3:#EBEDF6; --line:#D6D9E8; --line-soft:#E5E7F1;
    --text:#14161A; --text-2:#3D4256; --dim:#565C76; --faint:#646A84;
    --brand:#3730A3; --brand-ink:#FFFFFF; --xp:#9A6700; --xp-ink:#FFFFFF; --xp-soft:rgba(233,164,0,.14); --fire:#D9560B; --fire-soft:rgba(240,106,18,.12);
    --gem:#6E4FE0; --gem-soft:rgba(110,79,224,.10); --ok:#0E7F49; --ok-soft:rgba(20,163,94,.11); --ok-ink:#FFFFFF; --bad:#C62E2E; --bad-soft:rgba(214,60,60,.09);
    --warn:#8F5C00; --warn-soft:rgba(233,164,0,.14); --road:#2F67B2; --road-soft:rgba(47,103,178,.10);
    --r-comun:#0F766E; --r-rara:#2F6FE0; --r-epica:#8A46E0; --r-legendaria:#9A6700;
    --acc:var(--brand); --acc-ink:var(--brand-ink); --acc-soft:rgba(55,48,163,.08); --acc-line:rgba(55,48,163,.28);
    --shadow:0 1px 2px rgba(20,22,26,.05),0 10px 28px -20px rgba(20,22,26,.30); --lift:0 3px 0 rgba(20,22,26,.10);
    color-scheme:light;
}
:root[data-theme="light"] .t-fundamentos{ --acc:#3730A3; --acc-ink:#FFF; --acc-soft:rgba(55,48,163,.08); --acc-line:rgba(55,48,163,.28); --acc-2:#262083; }
:root[data-theme="light"] .t-zenix{ --acc:#047857; --acc-ink:#FFF; --acc-soft:rgba(4,120,87,.09); --acc-line:rgba(4,120,87,.30); --acc-2:#065F46; }
:root[data-theme="light"] .t-zentor{ --acc:#8A5A00; --acc-ink:#FFF; --acc-soft:rgba(138,90,0,.10); --acc-line:rgba(138,90,0,.32); --acc-2:#6B4500; }
:root[data-theme="light"] .t-marketing{ --acc:#BE185D; --acc-ink:#FFF; --acc-soft:rgba(190,24,93,.08); --acc-line:rgba(190,24,93,.30); --acc-2:#8E1146; }

/* ============================================================ BASE */
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
html{ background:var(--bg); -webkit-text-size-adjust:100%; }
body{ font-family:var(--f-body); color:var(--text); background:var(--bg); line-height:1.55; font-size:16px; -webkit-font-smoothing:antialiased; overscroll-behavior-y:none; }
button{ font-family:inherit; color:inherit; cursor:pointer; border:none; background:none; font-size:inherit; }
input,textarea,select{ font-family:inherit; font-size:16px; color:var(--text); }
a{ color:var(--acc); }
::selection{ background:var(--acc); color:var(--acc-ink); }
:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; border-radius:8px; }
svg{ flex:0 0 auto; }
[hidden]{ display:none !important; }

/* ============================================================ MARCO */
.app{ min-height:100dvh; }
.sidebar{ display:none; }
.topbar{
  position:sticky; top:0; z-index:40; height:calc(var(--top-h) + var(--safe-t)); padding:var(--safe-t) 12px 0 14px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.brand{ display:flex; align-items:center; gap:10px; min-width:0; text-decoration:none; color:var(--text); }
.mark{ width:32px; height:32px; border-radius:10px; flex:0 0 auto; display:grid; place-items:center; background:linear-gradient(150deg,#33D1EE,#007A92); color:#03151B; font-family:var(--f-display); font-weight:700; font-size:17px; box-shadow:0 3px 0 #005C6E; }
.brand .escudo{ width:36px; height:36px; flex:0 0 auto; display:block; }
.brand .wm b{ display:block; font-family:var(--f-display); font-weight:700; font-size:15px; line-height:1.05; letter-spacing:-.01em; }
.brand .wm small{ display:block; font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--brand); margin-top:2px; }
.hud{ display:flex; align-items:center; gap:6px; }
.chip-hud{ display:inline-flex; align-items:center; gap:5px; height:36px; padding:0 10px; border-radius:12px; font-family:var(--f-display); font-weight:700; font-size:15px; border:1px solid var(--line-soft); background:var(--surface); }
.chip-hud svg{ width:19px; height:19px; }
.chip-hud.fire{ color:var(--fire); } .chip-hud.fire.off{ color:var(--faint); }
.chip-hud.xp{ color:var(--xp); }
.chip-hud.gem{ color:var(--gem); }
.avatar{ width:36px; height:36px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; overflow:hidden; font-family:var(--f-display); font-weight:700; font-size:14px; color:#fff; background:var(--av,#3A4A7A); border:2px solid var(--surface); }
.avatar img{ width:100%; height:100%; object-fit:cover; }
.avatar.lg{ width:72px; height:72px; font-size:26px; border-width:3px; }
.avatar.md{ width:46px; height:46px; font-size:17px; }
.avatar.sm{ width:30px; height:30px; font-size:12px; border-width:1px; }

main{ padding-bottom:calc(var(--nav-h) + var(--safe-b) + 28px); min-width:0; }
.view{ animation:viewin .28s cubic-bezier(.2,.7,.2,1); }
@keyframes viewin{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
.wrap{ max-width:var(--read-max); margin:0 auto; padding:18px 16px; }
.wrap.wide{ max-width:1180px; }

.tabbar{ position:fixed; bottom:0; left:0; right:0; z-index:50; height:calc(var(--nav-h) + var(--safe-b)); padding-bottom:var(--safe-b);
  display:grid; grid-template-columns:repeat(5,1fr); background:color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-top:1px solid var(--line-soft); }
.tabbar .tab{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--faint); font-size:11px; font-weight:600; min-height:48px; }
.tabbar .tab svg{ width:24px; height:24px; }
.tabbar .tab.on{ color:var(--brand); }
.tabbar .tab .dot{ position:absolute; top:8px; right:calc(50% - 18px); min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--fire); color:#fff; font-size:10px; font-weight:800; display:grid; place-items:center; }

@media (min-width:960px){
  .app{ display:grid; grid-template-columns:var(--side-w) minmax(0,1fr); }
  .topbar{ position:sticky; padding-left:24px; }
  .topbar .brand{ display:none; }
  .topbar{ justify-content:flex-end; }
  .tabbar{ display:none; }
  main{ padding-bottom:48px; }
  .wrap{ padding:28px 32px; }
  .sidebar{ display:flex; flex-direction:column; gap:4px; position:sticky; top:0; height:100dvh; overflow-y:auto; padding:20px 14px 16px; border-right:1px solid var(--line-soft); background:var(--bg-2); }
  .sidebar .brand{ padding:0 8px 18px; }
  .side-sec{ font-family:var(--f-label); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin:16px 10px 6px; }
  .side-link{ display:flex; align-items:center; gap:12px; width:100%; padding:11px 12px; border-radius:12px; color:var(--text-2); font-size:15px; font-weight:600; text-align:left; border:2px solid transparent; }
  .side-link svg{ width:22px; height:22px; color:var(--dim); }
  .side-link:hover{ background:var(--surface); color:var(--text); }
  .side-link.on{ background:var(--acc-soft); border-color:var(--acc-line); color:var(--text); }
  .side-link.on svg{ color:var(--acc); }
  .side-link .sl-t{ flex:1; min-width:0; }
  .side-link .sl-t small{ display:block; font-size:11.5px; color:var(--dim); font-weight:500; }
  .side-link .count{ min-width:22px; height:22px; padding:0 6px; border-radius:11px; background:var(--fire); color:#fff; font-size:11px; font-weight:800; display:grid; place-items:center; }
  .side-foot{ margin-top:auto; padding-top:12px; border-top:1px solid var(--line-soft); }
}

/* ============================================================ TIPOGRAFÍA Y PIEZAS */
.eyebrow{ font-family:var(--f-label); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--acc); font-weight:700; }
.eyebrow.muted{ color:var(--dim); }
h1.disp{ font-family:var(--f-display); font-weight:700; letter-spacing:-.02em; line-height:1.06; font-size:clamp(26px,6vw,38px); margin:6px 0 0; text-wrap:balance; }
h2.sec{ font-family:var(--f-display); font-weight:700; letter-spacing:-.01em; line-height:1.15; font-size:21px; margin:0; text-wrap:balance; }
p.lead{ color:var(--text-2); font-size:16px; line-height:1.6; margin:8px 0 0; }
.muted{ color:var(--dim); font-size:14px; }
.hint{ font-size:12.5px; color:var(--faint); line-height:1.5; }
.sechead{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:28px 2px 12px; }
.sechead .link{ color:var(--acc); font-size:13.5px; font-weight:700; }
.card{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); box-shadow:var(--shadow); }
.card.pad{ padding:16px; }
.stack{ display:flex; flex-direction:column; gap:10px; }
.grid2{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:640px){ .grid2{ grid-template-columns:1fr 1fr; } }
.tag{ display:inline-flex; align-items:center; gap:6px; font-family:var(--f-label); font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:999px; border:1px solid transparent; white-space:nowrap; }
.tag svg{ width:13px; height:13px; }
.tag .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.tag.built{ color:var(--ok); background:var(--ok-soft); }
.tag.road{ color:var(--road); background:var(--road-soft); }
.tag.acc{ color:var(--acc); background:var(--acc-soft); border-color:var(--acc-line); }
.tag.plain{ color:var(--dim); background:var(--surface-2); border-color:var(--line-soft); }
.tag.xp{ color:var(--xp); background:var(--xp-soft); }
.tag.bad{ color:var(--bad); background:var(--bad-soft); }
.tag.warn{ color:var(--warn); background:var(--warn-soft); }

/* botones "táctiles" con borde inferior (affordance de pulsar) */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:50px; background:var(--acc); color:var(--acc-ink); font-weight:700; font-size:15.5px; letter-spacing:0;
  border-radius:var(--radius-sm); padding:13px 18px; width:100%; box-shadow:0 2px 0 var(--acc-2,rgba(0,0,0,.35)); transition:transform .06s, box-shadow .06s; }
.btn:active:not(:disabled){ transform:translateY(1px); box-shadow:0 1px 0 var(--acc-2,rgba(0,0,0,.35)); }
.btn svg{ width:20px; height:20px; }
.btn.ghost{ background:transparent; border:2px solid var(--line); color:var(--text-2); box-shadow:none; }
.btn.soft{ background:var(--acc-soft); color:var(--acc); border:2px solid var(--acc-line); box-shadow:none; }
.btn.ok{ background:var(--ok); color:var(--ok-ink); box-shadow:0 4px 0 color-mix(in srgb, var(--ok) 60%, #000); }
.btn.xp{ background:var(--xp); color:var(--xp-ink); box-shadow:0 4px 0 color-mix(in srgb, var(--xp) 60%, #000); }
.btn.auto{ width:auto; }
.btn.sm{ min-height:40px; padding:8px 14px; font-size:13px; }
.btn:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }
.bar{ height:10px; border-radius:99px; background:var(--line-soft); overflow:hidden; }
.bar i{ display:block; height:100%; background:var(--acc); border-radius:99px; transition:width .6s cubic-bezier(.2,.7,.2,1); position:relative; }
.bar i::after{ content:""; position:absolute; top:2px; left:8px; right:8px; height:3px; border-radius:3px; background:rgba(255,255,255,.35); }
.bar.sm{ height:6px; } .bar.sm i::after{ display:none; }
.bar.xp i{ background:var(--xp); }
.row{ display:flex; align-items:center; gap:13px; padding:14px; border-radius:var(--radius); width:100%; text-align:left; background:var(--surface); border:1px solid var(--line-soft); }
button.row:hover{ border-color:var(--line); }
.row .ri{ flex:0 0 auto; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--acc-soft); color:var(--acc); font-family:var(--f-mono); font-weight:700; }
.row .ri svg{ width:21px; height:21px; }
.row .rc{ min-width:0; flex:1; }
.row .rc b{ display:block; font-family:var(--f-display); font-weight:600; font-size:15.5px; line-height:1.25; }
.row .rc small{ display:block; color:var(--dim); font-size:13px; margin-top:3px; line-height:1.4; }
.row .chev{ color:var(--faint); width:18px; height:18px; }
.note{ display:flex; gap:11px; padding:13px 14px; border-radius:var(--radius); background:var(--road-soft); border:1px solid color-mix(in srgb, var(--road) 30%, transparent); font-size:14px; color:var(--text-2); line-height:1.55; }
.note .ni{ color:var(--road); flex:0 0 auto; margin-top:1px; } .note .ni svg{ width:18px; height:18px; }
.note .ni svg.il-mini{ width:28px; height:28px; }
.note.warn{ background:var(--warn-soft); border-color:color-mix(in srgb, var(--warn) 35%, transparent); } .note.warn .ni{ color:var(--warn); }
.note.bad{ background:var(--bad-soft); border-color:color-mix(in srgb, var(--bad) 32%, transparent); } .note.bad .ni{ color:var(--bad); }
.note.acc{ background:var(--acc-soft); border-color:var(--acc-line); } .note.acc .ni{ color:var(--acc); }
.note.ok{ background:var(--ok-soft); border-color:color-mix(in srgb, var(--ok) 35%, transparent); } .note.ok .ni{ color:var(--ok); }
.note b, .note strong{ color:var(--text); }
.seg{ display:flex; gap:4px; padding:4px; background:var(--bg-2); border:1px solid var(--line-soft); border-radius:14px; overflow-x:auto; scrollbar-width:none; }
.seg::-webkit-scrollbar{ display:none; }
.seg button{ flex:1; min-height:40px; padding:8px 12px; border-radius:10px; font-size:13.5px; font-weight:700; color:var(--dim); white-space:nowrap; }
.seg button.on{ background:var(--surface); color:var(--text); box-shadow:var(--shadow); }
.crumbs{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.backbtn{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--line-soft); color:var(--text-2); flex:0 0 auto; }
.backbtn svg{ width:20px; height:20px; }
.crumbs .ct{ min-width:0; } .crumbs .ct b{ display:block; font-size:13.5px; color:var(--text-2); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ============================================================ INICIO / APRENDER */
.me-card{ position:relative; overflow:hidden; border-radius:var(--radius-lg); padding:18px; background:radial-gradient(120% 90% at 100% 0%, var(--gem-soft), transparent 60%), var(--surface); border:1px solid var(--line-soft); box-shadow:var(--shadow); }
.me-top{ display:flex; align-items:center; gap:14px; }
.me-top .who{ flex:1; min-width:0; }
.me-top .who small{ display:block; color:var(--dim); font-size:13px; }
.me-top .who b{ display:block; font-family:var(--f-display); font-size:20px; line-height:1.15; }
.lvl{ display:inline-flex; align-items:center; gap:6px; margin-top:4px; font-family:var(--f-label); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gem); }
.lvl .badge-n{ min-width:26px; height:26px; padding:0 6px; border-radius:8px; background:var(--gem); color:#160B3A; display:grid; place-items:center; font-family:var(--f-display); font-size:14px; letter-spacing:0; box-shadow:0 2px 0 color-mix(in srgb, var(--gem) 55%, #000); }
.xprow{ margin-top:14px; }
.xprow .lab{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--dim); margin-bottom:6px; font-family:var(--f-mono); }
.xprow .lab b{ color:var(--xp); }
.goal-ring{ position:relative; width:64px; height:64px; flex:0 0 auto; }
.goal-ring svg{ transform:rotate(-90deg); }
.goal-ring .gi{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; font-family:var(--f-display); font-weight:700; font-size:13px; line-height:1; }
.goal-ring .gi small{ display:block; font-size:9.5px; color:var(--dim); font-family:var(--f-mono); margin-top:2px; }
.week{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-top:14px; }
.week .d{ text-align:center; font-size:11px; color:var(--dim); font-family:var(--f-mono); }
.week .d i{ display:grid; place-items:center; width:30px; height:30px; margin:4px auto 0; border-radius:50%; background:var(--surface-3); color:transparent; }
.week .d i svg{ width:16px; height:16px; }
.week .d.on i{ background:var(--fire); color:#fff; box-shadow:0 0 0 3px var(--fire-soft); }
.week .d.today i{ outline:2px dashed var(--fire); outline-offset:2px; }
.nextstep{ display:flex; align-items:center; gap:14px; margin-top:14px; padding:14px; border-radius:var(--radius); background:var(--acc-soft); border:2px solid var(--acc-line); width:100%; text-align:left; }
.nextstep .ni{ width:46px; height:46px; border-radius:14px; background:var(--acc); color:var(--acc-ink); display:grid; place-items:center; box-shadow:0 3px 0 var(--acc-2); }
.nextstep .ni svg{ width:22px; height:22px; }
.nextstep b{ display:block; font-family:var(--f-display); font-size:16px; }
.nextstep small{ display:block; color:var(--text-2); font-size:13px; }
/* misiones del día */
.misiones{ margin-top:12px; padding:12px 13px; border-radius:var(--radius-sm); background:var(--surface-2); border:1px solid var(--line-soft); }
.misiones.todas{ border-color:var(--gem); background:linear-gradient(135deg, var(--gem-soft), var(--surface-2)); }
.mis-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; font-size:13.5px; }
.mis-head b{ display:flex; align-items:center; gap:6px; } .mis-head svg{ width:16px; height:16px; color:var(--brand); }
.mis-n{ font-family:var(--f-mono); font-weight:700; color:var(--text-2); display:flex; align-items:center; gap:4px; }
.misiones.todas .mis-n{ color:var(--gem); }
.mis{ display:flex; align-items:center; gap:10px; padding:7px 0; border-top:1px solid var(--line-soft); }
.mis-chk{ width:22px; height:22px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; flex:0 0 auto; }
.mis.ok .mis-chk{ background:var(--ok); border-color:var(--ok); color:var(--ok-ink); } .mis-chk svg{ width:13px; height:13px; }
.mis-t{ flex:1; min-width:0; } .mis-t b{ display:block; font-size:13.5px; } .mis-t small{ display:block; color:var(--dim); font-size:12px; line-height:1.35; }
.mis-t .bar{ display:block; height:5px; border-radius:3px; background:var(--surface-3); margin-top:5px; overflow:hidden; }
.mis-t .bar i{ display:block; height:100%; background:var(--brand); transition:width .4s; } .mis.ok .bar i{ background:var(--ok); }
.mis.ok .mis-t b{ text-decoration:line-through; color:var(--text-2); }
.mis-xp{ text-align:right; font-family:var(--f-mono); font-weight:700; font-size:12.5px; color:var(--text-2); flex:0 0 auto; }
.mis-xp small{ display:block; color:var(--xp); font-size:11px; }
.nudge{ display:flex; align-items:center; gap:10px; margin-top:12px; padding:11px 13px; border-radius:var(--radius-sm); background:var(--surface-2); border:1px solid var(--line-soft); font-size:13.5px; color:var(--text-2); }
.nudge svg{ width:18px; height:18px; color:var(--xp); }
.nudge b{ color:var(--text); }
.school-tabs{ display:flex; gap:8px; overflow-x:auto; padding:2px 0 8px; scrollbar-width:none; }
.school-tabs::-webkit-scrollbar{ display:none; }
.school-tab{ flex:0 0 auto; display:flex; align-items:center; gap:8px; min-height:44px; padding:8px 14px; border-radius:14px; border:2px solid var(--line-soft); background:var(--surface); font-weight:700; font-size:14px; color:var(--text-2); }
.school-tab svg{ width:18px; height:18px; color:var(--acc); }
.school-tab.on{ border-color:var(--acc); background:var(--acc-soft); color:var(--text); }
.school-tab .pc{ font-family:var(--f-mono); font-size:11px; color:var(--dim); }

/* ---------- el sendero ---------- */
.unit{ margin-top:26px; border-radius:var(--radius-lg); padding:16px 16px 14px; background:var(--acc); color:var(--acc-ink); box-shadow:0 5px 0 var(--acc-2); position:relative; }
.unit.locked{ background:var(--surface-3); color:var(--dim); box-shadow:0 5px 0 var(--line); }
.unit .uk{ font-family:var(--f-label); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; opacity:.8; }
.unit b{ display:block; font-family:var(--f-display); font-size:19px; line-height:1.2; margin-top:3px; }
.unit small{ display:block; font-size:13px; opacity:.85; margin-top:4px; }
.unit .ubar{ height:8px; border-radius:8px; background:rgba(0,0,0,.18); margin-top:12px; overflow:hidden; }
.unit .ubar i{ display:block; height:100%; background:rgba(255,255,255,.9); border-radius:8px; }
.unit.locked .ubar i{ background:var(--dim); }
.path{ --path-amp:56px; display:flex; flex-direction:column; align-items:center; gap:18px; padding:22px 0 6px; }
.node{ position:relative; width:72px; height:72px; border-radius:50%; display:grid; place-items:center; background:var(--acc); color:var(--acc-ink); box-shadow:0 6px 0 var(--acc-2); transition:transform .08s; }
.node:active{ transform:translateY(4px); box-shadow:0 2px 0 var(--acc-2); }
.node svg{ width:30px; height:30px; }
.node.done{ background:var(--acc); }
.node.done::after{ content:""; position:absolute; inset:-6px; border-radius:50%; border:3px solid var(--acc); opacity:.35; }
.node.open{ background:var(--surface); color:var(--acc); border:3px solid var(--acc); box-shadow:0 6px 0 var(--line); }
.node.locked{ background:var(--surface-3); color:var(--faint); box-shadow:0 6px 0 var(--line); }
.node.current{ animation:pulse 1.8s ease-in-out infinite; }
.node.exam{ width:86px; height:86px; border-radius:50%; background:var(--xp); color:var(--xp-ink); box-shadow:0 6px 0 color-mix(in srgb, var(--xp) 55%, #000); }
.node.exam.locked{ background:var(--surface-3); color:var(--faint); box-shadow:0 6px 0 var(--line); }
.node.exam.done{ background:linear-gradient(150deg, #FFE08A, var(--xp)); }
.node.exam svg{ width:36px; height:36px; }
.node .bubble{ position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%); white-space:nowrap; padding:7px 12px; border-radius:10px; background:var(--surface); color:var(--acc); border:2px solid var(--acc-line); font-family:var(--f-mono); font-size:11px; font-weight:800; letter-spacing:.12em; animation:float 2.4s ease-in-out infinite; }
.node .bubble::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:7px solid transparent; border-top-color:var(--acc-line); }
.node-lab{ font-size:12.5px; color:var(--text-2); text-align:center; max-width:190px; margin-top:-8px; line-height:1.3; }
.node-wrap{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.node-wrap.der{ transform:translateX(var(--path-amp)); } .node-wrap.izq{ transform:translateX(calc(-1 * var(--path-amp))); }
/* la burbuja (EMPIEZA, SIGUE, EXAMEN) ocupa hasta 48 px sobre el círculo con su flotación: se le abre lugar para que no tape lo de arriba */
.node-wrap.con-burbuja{ margin-top:40px; }
@keyframes pulse{ 0%,100%{ box-shadow:0 6px 0 var(--acc-2), 0 0 0 0 var(--acc-line);} 50%{ box-shadow:0 6px 0 var(--acc-2), 0 0 0 14px transparent; } }
@keyframes float{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,-5px);} }
.crown{ margin:18px auto 0; display:flex; flex-direction:column; align-items:center; gap:8px; }

/* ============================================================ LECCIÓN */
.readbar{ position:fixed; top:0; left:0; right:0; height:4px; z-index:60; background:transparent; }
.readbar i{ display:block; height:100%; width:0; background:var(--acc); transition:width .15s; }
.lesson-meta{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 4px; }
.lesson-meta .tag{ white-space:normal; max-width:100%; line-height:1.35; }
.objetivo{ margin-top:14px; padding:14px 16px; border-radius:var(--radius); background:var(--surface-2); border:1px solid var(--line-soft); font-size:15px; color:var(--text-2); }
.objetivo .lbl{ font-family:var(--f-label); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--acc); display:block; margin-bottom:5px; font-weight:700; }
.prose{ margin-top:20px; font-size:16.5px; line-height:1.72; color:var(--text-2); }
.prose > :first-child{ margin-top:0; }
.prose p{ margin:0 0 15px; }
.prose h3{ font-family:var(--f-display); font-size:20px; color:var(--text); margin:28px 0 10px; line-height:1.25; }
.prose strong, .prose b{ color:var(--text); font-weight:650; }
.prose em{ color:var(--acc); font-style:normal; font-weight:600; }
.prose ul, .prose ol{ margin:0 0 16px; padding-left:0; list-style:none; }
.prose li{ position:relative; padding-left:22px; margin-bottom:9px; }
.prose ul > li::before{ content:""; position:absolute; left:4px; top:11px; width:7px; height:7px; border-radius:2px; background:var(--acc); transform:rotate(45deg); }
.prose ol{ counter-reset:n; }
.prose ol > li{ counter-increment:n; padding-left:34px; }
.prose ol > li::before{ content:counter(n); position:absolute; left:0; top:2px; width:23px; height:23px; border-radius:7px; display:grid; place-items:center; background:var(--acc-soft); border:1px solid var(--acc-line); color:var(--acc); font-family:var(--f-mono); font-size:12px; font-weight:700; }
.prose .quote{ border-left:4px solid var(--acc); padding:12px 16px; margin:18px 0; background:var(--acc-soft); border-radius:0 12px 12px 0; color:var(--text); font-size:15.5px; line-height:1.6; }
.prose .quote .ql{ display:block; font-family:var(--f-label); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--acc); margin-bottom:6px; font-weight:700; }
.prose .note{ margin:16px 0; font-size:14.5px; }
.prose .ejemplo{ margin:16px 0; padding:14px 16px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line-soft); font-size:15px; }
.prose .ejemplo .lbl{ display:flex; align-items:center; gap:7px; font-family:var(--f-label); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--acc); margin-bottom:7px; font-weight:700; }
.prose .formula{ margin:14px 0; padding:12px 14px; border-radius:var(--radius-sm); background:var(--bg-2); border:1px dashed var(--acc-line); font-family:var(--f-mono); font-size:14px; color:var(--text); overflow-x:auto; }
.tablewrap{ overflow-x:auto; margin:14px 0 18px; border:1px solid var(--line-soft); border-radius:var(--radius); }
.prose table, .dtable{ width:100%; border-collapse:collapse; font-size:14px; line-height:1.45; }
.prose th, .prose td, .dtable th, .dtable td{ text-align:left; padding:10px 12px; vertical-align:top; border-bottom:1px solid var(--line-soft); }
.prose th, .dtable th{ font-family:var(--f-label); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); font-weight:700; background:var(--surface-2); }
.prose td:first-child, .dtable td:first-child{ color:var(--text); font-weight:600; }
.prose tr:last-child td, .dtable tr:last-child td{ border-bottom:none; }
.box{ margin-top:22px; padding:16px; border-radius:var(--radius); }
.box .lbl{ display:flex; align-items:center; gap:8px; font-family:var(--f-label); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px; font-weight:700; }
.box .lbl svg{ width:16px; height:16px; }
.box p{ margin:0 0 10px; } .box p:last-child{ margin:0; }
.box.venta{ background:var(--acc-soft); border:1px solid var(--acc-line); color:var(--text); font-size:15.5px; line-height:1.6; }
.box.venta .lbl{ color:var(--acc); }
.box.frase{ background:var(--surface); border:2px dashed var(--acc-line); }
.box.frase .lbl{ color:var(--acc); }
.box.frase p{ font-size:16px; line-height:1.6; color:var(--text); font-style:italic; }
.locked-screen{ text-align:center; padding:40px 20px; }
.locked-screen .lk{ width:84px; height:84px; margin:0 auto 16px; border-radius:26px; background:var(--surface-3); color:var(--faint); display:grid; place-items:center; }
.locked-screen .lk svg{ width:38px; height:38px; }

/* opciones (comprobación, práctica, examen) */
.quiz{ margin-top:26px; }
.quiz-h{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.q{ padding:16px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line-soft); }
.q + .q{ margin-top:10px; }
.q .qp{ font-weight:650; color:var(--text); font-size:16px; line-height:1.45; margin-bottom:12px; }
.q .qp .qn{ font-family:var(--f-mono); color:var(--acc); margin-right:6px; }
.opt{ display:flex; align-items:center; gap:12px; width:100%; min-height:52px; text-align:left; padding:12px 14px; border-radius:var(--radius-sm); border:2px solid var(--line); background:var(--surface); color:var(--text); font-size:15px; line-height:1.4; box-shadow:0 3px 0 var(--line); transition:transform .06s; }
.opt + .opt{ margin-top:9px; }
.opt .ol{ flex:0 0 auto; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; font-family:var(--f-mono); font-size:12.5px; font-weight:800; border:2px solid var(--line); color:var(--dim); }
.opt:hover:not(:disabled){ border-color:var(--acc-line); }
.opt:active:not(:disabled){ transform:translateY(2px); box-shadow:0 1px 0 var(--line); }
.opt:disabled{ cursor:default; }
.opt.pick{ border-color:var(--acc); background:var(--acc-soft); box-shadow:0 3px 0 var(--acc-2); }
.opt.pick .ol{ background:var(--acc); border-color:var(--acc); color:var(--acc-ink); }
.opt.ok{ border-color:var(--ok); background:var(--ok-soft); box-shadow:0 3px 0 color-mix(in srgb, var(--ok) 55%, #000); }
.opt.ok .ol{ background:var(--ok); border-color:var(--ok); color:var(--ok-ink); }
.opt.bad{ border-color:var(--bad); background:var(--bad-soft); box-shadow:0 3px 0 color-mix(in srgb, var(--bad) 55%, #000); animation:shake .35s; }
.opt.bad .ol{ background:var(--bad); border-color:var(--bad); color:#fff; }
@keyframes shake{ 0%,100%{ transform:none;} 25%{ transform:translateX(-5px);} 75%{ transform:translateX(5px);} }
.expl{ margin-top:10px; font-size:14.5px; line-height:1.55; color:var(--text-2); padding:11px 13px; border-radius:var(--radius-sm); background:var(--surface-2); }
.expl b{ color:var(--text); }
.lesson-nav{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:22px; }
.lesson-nav button{ min-height:56px; padding:12px 14px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line-soft); display:flex; flex-direction:column; gap:3px; text-align:left; min-width:0; }
.lesson-nav button:disabled{ opacity:.35; cursor:default; }
.lesson-nav small{ font-family:var(--f-label); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.lesson-nav b{ font-size:13.5px; color:var(--text); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lesson-nav .next{ text-align:right; }

/* ============================================================ EXAMEN Y PRÁCTICA (pantalla enfocada) */
.focus{ max-width:680px; margin:0 auto; padding:16px; min-height:calc(100dvh - var(--top-h)); display:flex; flex-direction:column; }
.focus-top{ display:flex; align-items:center; gap:12px; }
.focus-top .x{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:var(--dim); }
.focus-top .x svg{ width:24px; height:24px; }
.focus-top .bar{ flex:1; height:14px; }
.focus-top .meta{ font-family:var(--f-mono); font-size:13px; font-weight:700; color:var(--dim); white-space:nowrap; }
.focus-top .meta.low{ color:var(--bad); }
.focus-body{ flex:1; padding:22px 0 12px; }
.focus-body .qk{ font-family:var(--f-label); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--acc); font-weight:700; }
.focus-body .qtext{ font-family:var(--f-display); font-size:clamp(19px,4.6vw,24px); line-height:1.3; font-weight:600; margin:10px 0 20px; text-wrap:pretty; }
.focus-foot{ position:sticky; bottom:0; padding:12px 0 calc(12px + var(--safe-b)); background:linear-gradient(transparent, var(--bg) 30%); }
.feedback{ border-radius:var(--radius); padding:14px 16px; margin-bottom:12px; font-size:15px; line-height:1.5; }
.feedback.ok{ background:var(--ok-soft); color:var(--text); border:2px solid color-mix(in srgb, var(--ok) 40%, transparent); }
.feedback.bad{ background:var(--bad-soft); color:var(--text); border:2px solid color-mix(in srgb, var(--bad) 40%, transparent); }
.feedback b{ display:block; font-family:var(--f-display); font-size:17px; margin-bottom:4px; }
.feedback.ok b{ color:var(--ok); } .feedback.bad b{ color:var(--bad); }
.combo{ display:inline-flex; align-items:center; gap:6px; font-family:var(--f-display); font-weight:800; color:var(--fire); font-size:15px; animation:pop .3s; }
.combo svg{ width:18px; height:18px; }
.rules{ list-style:none; padding:0; margin:14px 0 0; }
.rules li{ display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--line-soft); font-size:14.5px; color:var(--text-2); }
.rules li svg{ width:20px; height:20px; color:var(--acc); flex:0 0 auto; }
.rules li:last-child{ border-bottom:none; }
.score-hero{ text-align:center; padding:26px 18px; border-radius:var(--radius-lg); background:var(--surface); border:2px solid var(--line-soft); }
.score-hero.pass{ border-color:color-mix(in srgb, var(--ok) 45%, transparent); background:radial-gradient(100% 80% at 50% 0%, var(--ok-soft), transparent 70%), var(--surface); }
.score-hero .big{ font-family:var(--f-display); font-size:64px; font-weight:700; line-height:1; color:var(--text); animation:pop .5s; }
.score-hero.pass .big{ color:var(--ok); }
.score-hero p{ margin:10px 0 0; color:var(--text-2); }
.statline{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; }
.statline .st{ padding:12px 8px; border-radius:var(--radius-sm); background:var(--surface-2); text-align:center; }
.statline .st b{ display:block; font-family:var(--f-display); font-size:20px; }
.statline .st small{ display:block; font-size:11.5px; color:var(--dim); margin-top:2px; }

/* ============================================================ RECOMPENSAS */
.modal-back{ position:fixed; inset:0; z-index:500; background:rgba(5,8,18,.72); backdrop-filter:blur(4px); display:grid; place-items:center; padding:20px; animation:fadein .2s; }
@keyframes fadein{ from{ opacity:0; } to{ opacity:1; } }
.modal{ width:100%; max-width:380px; border-radius:24px; padding:26px 22px 20px; background:var(--surface); border:1px solid var(--line); text-align:center; box-shadow:0 30px 80px -20px rgba(0,0,0,.7); animation:popin .38s cubic-bezier(.2,1.4,.4,1); }
@keyframes popin{ from{ transform:scale(.7); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes pop{ 0%{ transform:scale(.6);} 70%{ transform:scale(1.12);} 100%{ transform:none;} }
.modal .rw{ width:112px; height:112px; margin:0 auto 14px; border-radius:32px; display:grid; place-items:center; position:relative; color:#fff; background:var(--rw,var(--xp)); box-shadow:0 8px 0 color-mix(in srgb, var(--rw,var(--xp)) 55%, #000), 0 0 60px -6px var(--rw,var(--xp)); animation:pop .6s .1s both; }
.modal .rw svg{ width:56px; height:56px; }
.modal .rw.round{ border-radius:50%; }
.modal .rw.shine::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%); background-size:250% 100%; animation:shimmer 1.8s infinite; }
@keyframes shimmer{ from{ background-position:120% 0; } to{ background-position:-120% 0; } }
.modal .mk{ font-family:var(--f-label); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:800; color:var(--rw,var(--xp)); }
.modal h2{ font-family:var(--f-display); font-size:26px; line-height:1.15; margin:6px 0 6px; }
.modal p{ color:var(--text-2); margin:0 0 18px; font-size:15px; line-height:1.5; }
.modal .bigxp{ font-family:var(--f-display); font-size:44px; font-weight:700; color:var(--xp); line-height:1; margin:4px 0 10px; }
.float-xp{ position:fixed; z-index:600; pointer-events:none; font-family:var(--f-display); font-weight:800; font-size:22px; color:var(--xp); text-shadow:0 2px 0 rgba(0,0,0,.35); animation:floatup 1.1s ease-out forwards; }
@keyframes floatup{ from{ opacity:1; transform:translate(-50%,0) scale(.9);} to{ opacity:0; transform:translate(-50%,-70px) scale(1.15);} }
#confetti{ position:fixed; inset:0; z-index:550; pointer-events:none; }
.toast{ position:fixed; left:50%; bottom:calc(var(--nav-h) + var(--safe-b) + 16px); transform:translateX(-50%); z-index:700; max-width:calc(100vw - 32px); text-align:center; background:var(--text); color:var(--bg); padding:11px 16px; border-radius:12px; font-size:14px; font-weight:700; box-shadow:var(--shadow); animation:popin .25s both; }
@media (min-width:960px){ .toast{ bottom:24px; } }

/* ============================================================ RANKING Y EQUIPO */
.podium{ display:grid; grid-template-columns:1fr 1fr 1fr; align-items:end; gap:10px; margin-top:16px; }
.podium .p{ text-align:center; }
.podium .p .avatar{ margin:0 auto 6px; }
.podium .p b{ display:block; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.podium .p small{ display:block; font-family:var(--f-mono); font-size:12px; color:var(--xp); font-weight:700; }
.podium .stand{ margin-top:8px; border-radius:14px 14px 4px 4px; display:grid; place-items:center; font-family:var(--f-display); font-size:26px; font-weight:800; color:#fff; }
.podium .p1 .stand{ height:96px; background:linear-gradient(180deg,#FFD761,#E9A400); }
.podium .p2 .stand{ height:72px; background:linear-gradient(180deg,#D7DEEA,#9AA6BD); }
.podium .p3 .stand{ height:56px; background:linear-gradient(180deg,#F0B184,#C97A45); }
.podium .p1 .avatar{ box-shadow:0 0 0 3px #FFD761; }
.lb{ margin-top:14px; }
.lb-row{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--radius-sm); }
.lb-row + .lb-row{ margin-top:4px; }
.lb-row .pos{ width:26px; text-align:center; font-family:var(--f-display); font-weight:800; color:var(--dim); }
.lb-row .nm{ flex:1; min-width:0; }
.lb-row .nm b{ display:block; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-row .nm small{ display:block; font-size:12px; color:var(--dim); }
.lb-row .val{ font-family:var(--f-display); font-weight:700; white-space:nowrap; }
.lb-row .mv{ width:22px; text-align:center; font-size:12px; font-weight:800; }
.lb-row .mv.up{ color:var(--ok); } .lb-row .mv.down{ color:var(--bad); } .lb-row .mv.eq{ color:var(--faint); }
.lb-row.me{ background:var(--acc-soft); border:2px solid var(--acc-line); }
.countdown{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--dim); font-family:var(--f-mono); }
.countdown svg{ width:16px; height:16px; }
.feed-item{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-soft); align-items:flex-start; }
.feed-item:last-child{ border-bottom:none; }
.feed-item .ft{ flex:1; min-width:0; font-size:14.5px; color:var(--text-2); line-height:1.45; }
.feed-item .ft b{ color:var(--text); }
.feed-item .ft small{ display:block; font-size:12px; color:var(--faint); margin-top:2px; }
.kudo{ display:inline-flex; align-items:center; gap:5px; min-height:36px; padding:6px 11px; border-radius:10px; border:2px solid var(--line); font-size:13px; font-weight:800; color:var(--text-2); }
.kudo.on{ border-color:var(--xp); color:var(--xp); background:var(--xp-soft); }

/* ============================================================ LOGROS */
.stats-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:14px; }
@media (min-width:640px){ .stats-grid{ grid-template-columns:repeat(4,1fr); } }
.stat{ display:flex; align-items:center; gap:10px; padding:12px; border-radius:var(--radius-sm); background:var(--surface); border:1px solid var(--line-soft); }
.stat .si{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; flex:0 0 auto; }
.stat .si svg{ width:20px; height:20px; }
.stat b{ display:block; font-family:var(--f-display); font-size:19px; line-height:1.1; }
.stat small{ display:block; font-size:11.5px; color:var(--dim); }
.badge-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media (min-width:640px){ .badge-grid{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:960px){ .badge-grid{ grid-template-columns:repeat(5,1fr); } }
.badge-tile{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:7px; padding:14px 8px 12px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line-soft); }
.badge-tile .bi{ width:62px; height:62px; border-radius:20px; display:grid; place-items:center; color:#fff; background:var(--rc); box-shadow:0 4px 0 color-mix(in srgb, var(--rc) 55%, #000); position:relative; }
.badge-tile .bi svg{ width:30px; height:30px; }
.badge-tile.legendaria .bi::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%); background-size:250% 100%; animation:shimmer 2.2s infinite; }
.badge-tile b{ font-size:12.5px; line-height:1.25; }
.badge-tile small{ font-size:11px; color:var(--dim); line-height:1.3; }
.badge-tile.lock .bi{ background:var(--surface-3); color:var(--faint); box-shadow:0 4px 0 var(--line); }
.badge-tile.lock b{ color:var(--dim); }
.badge-tile .bar{ width:80%; height:6px; }
.rar{ font-family:var(--f-label); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:800; color:var(--rc); }
.r-comun{ --rc:var(--r-comun); } .r-rara{ --rc:var(--r-rara); } .r-epica{ --rc:var(--r-epica); } .r-legendaria{ --rc:var(--r-legendaria); }
.cal{ display:grid; grid-auto-flow:column; grid-template-rows:repeat(7, 13px); gap:3px; overflow-x:auto; padding-bottom:4px; }
.cal i{ width:13px; height:13px; border-radius:3px; background:var(--surface-3); display:block; }
.cal i.l1{ background:color-mix(in srgb, var(--ok) 35%, var(--surface-3)); } .cal i.l2{ background:color-mix(in srgb, var(--ok) 60%, var(--surface-3)); }
.cal i.l3{ background:color-mix(in srgb, var(--ok) 82%, var(--surface-3)); } .cal i.l4{ background:var(--ok); }
.cert-card{ display:flex; align-items:center; gap:14px; padding:14px; border-radius:var(--radius); background:var(--surface); border:2px solid var(--acc-line); }
.cert-card .ci{ width:50px; height:50px; border-radius:14px; display:grid; place-items:center; background:var(--acc); color:var(--acc-ink); box-shadow:0 3px 0 var(--acc-2); }
.cert-card .ci svg{ width:26px; height:26px; }
.cert-card.lock{ border-color:var(--line-soft); opacity:.7; } .cert-card.lock .ci{ background:var(--surface-3); color:var(--faint); box-shadow:none; }
.diploma{ max-width:820px; margin:0 auto; padding:44px 40px; border-radius:18px; background:#FFFDF7; color:#1C2333; border:10px double #C8A24A; text-align:center; font-family:var(--f-display); }
.diploma .dk{ font-family:var(--f-mono); font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:#8A6A1E; }
.diploma h1{ font-size:40px; margin:18px 0 6px; color:#0B1020; }
.diploma .who{ font-size:34px; margin:16px 0; color:#3730A3; border-bottom:2px solid #E6D8AE; display:inline-block; padding:0 30px 8px; }
.diploma p{ font-family:var(--f-body); font-size:16px; color:#3A4560; margin:6px 0; }
.diploma .foot{ display:flex; justify-content:space-between; margin-top:34px; font-family:var(--f-mono); font-size:12px; color:#5A6580; text-align:left; gap:20px; }

/* ============================================================ CAMPO (herramientas) */
.chiprow{ display:flex; gap:8px; overflow-x:auto; padding:2px 0 6px; scrollbar-width:none; }
.chiprow::-webkit-scrollbar{ display:none; }
.chip{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; min-height:42px; padding:8px 14px; border-radius:999px; font-size:13.5px; font-weight:700; white-space:nowrap; background:var(--surface); border:2px solid var(--line-soft); color:var(--text-2); }
.chip.on{ background:var(--acc); color:var(--acc-ink); border-color:var(--acc); }
.chip .star{ color:var(--acc); font-size:11px; } .chip.on .star{ color:var(--acc-ink); }
.block{ margin-top:16px; }
.block-h{ font-family:var(--f-label); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--acc); margin-bottom:8px; display:flex; align-items:center; gap:8px; font-weight:700; }
.block-h .ln{ flex:1; height:1px; background:var(--line-soft); }
.block-h.bad{ color:var(--bad); } .block-h.road{ color:var(--road); }
.vocab{ display:flex; flex-wrap:wrap; gap:7px; }
.vocab span{ font-family:var(--f-mono); font-size:12.5px; padding:5px 10px; border-radius:8px; background:var(--surface); border:1px solid var(--line-soft); color:var(--text-2); }
.ficha-hero{ padding:20px; border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--line-soft); }
.ficha-hero .big-e{ font-size:38px; line-height:1; }
.pitch-box{ padding:16px 16px 16px 18px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); position:relative; font-size:15.5px; line-height:1.6; color:var(--text); }
.obj-pair{ padding:14px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line-soft); font-size:14.5px; }
.obj-pair .o{ color:var(--text); font-style:italic; }
.obj-pair .arrow{ color:var(--ok); font-family:var(--f-mono); margin:8px 0 6px; font-size:11px; letter-spacing:.1em; }
.obj-pair .a{ color:var(--text-2); line-height:1.55; }
.li-x, .li-c{ display:flex; gap:9px; align-items:flex-start; margin-bottom:8px; font-size:14.5px; color:var(--text-2); line-height:1.5; }
.li-x svg, .li-c svg{ width:17px; height:17px; margin-top:2px; }
.li-x svg{ color:var(--bad); } .li-c svg{ color:var(--road); }
.bc-stripe{ position:absolute; left:0; top:0; bottom:0; width:5px; }
.bc-dot{ flex:0 0 auto; width:14px; height:14px; border-radius:5px; }
.acc-item{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; }
.acc-item + .acc-item{ margin-top:10px; }
.acc-q{ width:100%; text-align:left; padding:15px; display:flex; align-items:center; gap:12px; min-height:56px; }
.acc-q .qt{ flex:1; } .acc-q .qt b{ display:block; font-size:15px; color:var(--text); font-style:italic; } .acc-q .qt small{ display:block; color:var(--dim); font-size:12.5px; margin-top:2px; }
.acc-q .caret{ color:var(--faint); transition:transform .25s; }
.acc-item.open .acc-q .caret{ transform:rotate(180deg); color:var(--acc); }
.acc-a{ display:none; padding:0 16px 16px; color:var(--text-2); font-size:14.5px; line-height:1.6; }
.acc-item.open .acc-a{ display:block; }
.step{ display:flex; gap:13px; padding:14px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line-soft); }
.step .n{ flex:0 0 auto; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-family:var(--f-mono); font-weight:800; font-size:13px; color:var(--acc-ink); background:var(--acc); }
.step b{ display:block; font-size:15px; color:var(--text); margin-bottom:3px; }
.step p{ margin:0; font-size:14px; color:var(--text-2); line-height:1.55; }
.step .time{ font-family:var(--f-mono); font-size:11px; color:var(--acc); background:var(--acc-soft); padding:2px 8px; border-radius:7px; margin-left:6px; white-space:nowrap; font-weight:700; }
.check-item{ display:flex; align-items:center; gap:13px; padding:14px; min-height:56px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line-soft); width:100%; text-align:left; }
.check-item .cbx{ flex:0 0 auto; width:28px; height:28px; border-radius:8px; border:2px solid var(--line); display:grid; place-items:center; }
.check-item .cbx svg{ width:16px; height:16px; opacity:0; color:#fff; }
.check-item.done .cbx{ background:var(--ok); border-color:var(--ok); } .check-item.done .cbx svg{ opacity:1; }
.check-item .ctxt{ flex:1; font-size:14.5px; color:var(--text); line-height:1.45; } .check-item .ctxt small{ display:block; color:var(--dim); font-size:12.5px; margin-top:2px; }
.check-item.done .ctxt{ color:var(--dim); }
.gl-item{ padding:13px 14px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line-soft); }
.gl-item + .gl-item{ margin-top:8px; }
.gl-item .gt{ font-family:var(--f-mono); font-size:14px; color:var(--acc); font-weight:700; }
.gl-item .ga{ color:var(--text-2); font-size:14.5px; margin-top:4px; line-height:1.5; }
.nodecir{ padding:15px; border-radius:var(--radius); background:var(--bad-soft); border:1px solid color-mix(in srgb, var(--bad) 30%, transparent); }
.nodecir .lbl{ display:flex; align-items:center; gap:7px; color:var(--bad); font-family:var(--f-label); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:9px; font-weight:700; }
.nodecir .lbl svg{ width:15px; height:15px; }
.nodecir .words{ display:flex; flex-wrap:wrap; gap:7px; }
.nodecir .words span{ font-family:var(--f-mono); font-size:12.5px; padding:4px 9px; border-radius:7px; background:var(--bad-soft); color:var(--bad); text-decoration:line-through; }
.field{ margin-bottom:16px; }
.field label{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:14px; color:var(--text-2); margin-bottom:8px; font-weight:600; }
.field label .v{ font-family:var(--f-mono); color:var(--acc); font-weight:700; }
.field .hint{ margin-top:6px; }
.field input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:8px; background:var(--line); outline:none; }
.field input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:28px; height:28px; border-radius:50%; background:var(--acc); cursor:pointer; border:4px solid var(--surface); box-shadow:0 0 0 1px var(--acc-line); }
.field input[type=range]::-moz-range-thumb{ width:24px; height:24px; border-radius:50%; background:var(--acc); cursor:pointer; border:4px solid var(--surface); }
div.num{ display:flex; align-items:center; gap:10px; } div.num .pre{ font-family:var(--f-mono); color:var(--dim); }
.inp, div.num input{ flex:1; width:100%; min-height:48px; background:var(--bg-2); border:2px solid var(--line); border-radius:var(--radius-sm); padding:11px 13px; color:var(--text); font-size:16px; outline:none; }
div.num input{ font-family:var(--f-mono); }
textarea.inp{ min-height:84px; resize:vertical; line-height:1.5; }
.inp:focus, div.num input:focus{ border-color:var(--acc); }
.result{ border-radius:var(--radius-lg); padding:20px; text-align:center; background:var(--ok-soft); border:2px solid color-mix(in srgb, var(--ok) 35%, transparent); }
.result .rl{ font-family:var(--f-label); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ok); font-weight:700; }
.result .rb{ font-family:var(--f-display); font-weight:700; font-size:clamp(32px,9vw,46px); color:var(--ok); margin:6px 0 2px; line-height:1.05; }
.result .rs{ color:var(--text-2); font-size:14px; }
.result .rows{ margin-top:14px; text-align:left; }
.result .rows div{ display:flex; justify-content:space-between; gap:12px; font-size:13.5px; padding:8px 0; border-bottom:1px solid var(--line-soft); }
.result .rows div:last-child{ border-bottom:none; }
.result .rows span{ color:var(--text-2); } .result .rows b{ font-family:var(--f-mono); color:var(--text); white-space:nowrap; }
.verdict{ margin-top:12px; padding:14px; border-radius:var(--radius); background:var(--surface); border:2px dashed var(--acc-line); color:var(--text); font-size:14.5px; line-height:1.55; }
.verdict b{ color:var(--acc); }
.output{ margin-top:16px; padding:16px; border-radius:var(--radius); background:var(--surface); border:2px solid var(--acc-line); font-size:15px; line-height:1.65; color:var(--text); }
.output h4{ margin:14px 0 6px; font-family:var(--f-label); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--acc); }
.output h4:first-child{ margin-top:0; } .output p{ margin:0 0 8px; } .output .empty-v{ color:var(--faint); font-style:italic; }

/* ============================================================ ACCESO / BIENVENIDA */
.login{ min-height:100dvh; display:grid; place-items:center; padding:24px 18px calc(24px + var(--safe-b)); background:radial-gradient(90% 60% at 50% 0%, rgba(99,102,241,.24), transparent 70%), var(--bg); }
.login-card{ width:100%; max-width:420px; text-align:center; }
.login-logo{ width:76px; height:76px; margin:0 auto 14px; filter:drop-shadow(0 10px 18px rgba(55,48,163,.45)); }
.login-logo svg, .sheet-logo svg{ width:100%; height:100%; display:block; }
.login-wm{ font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); margin:0 0 14px; }
.login-wm b{ color:var(--text); font-weight:800; }
.login-pie{ margin:22px 0 0; padding-top:16px; border-top:1px solid var(--line-soft); font-size:12.5px; color:var(--faint); }
.login-pie b{ color:var(--text-2); }
.sheet-logo{ width:56px; height:56px; margin:0 0 14px; }
.login-card h1{ font-family:var(--f-display); font-size:32px; line-height:1.1; margin:0 0 8px; }
.login-card .sub{ color:var(--text-2); font-size:15.5px; line-height:1.55; margin:0 0 22px; }
.perks{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 0 22px; }
.perks div{ padding:12px 6px; border-radius:var(--radius-sm); background:var(--surface); border:1px solid var(--line-soft); font-size:12px; color:var(--text-2); }
.perks svg{ width:24px; height:24px; display:block; margin:0 auto 6px; }
.prov{ display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:54px; border-radius:14px; font-weight:700; font-size:15.5px; border:2px solid var(--line); background:var(--surface); color:var(--text); box-shadow:0 4px 0 var(--line); }
.prov + .prov{ margin-top:10px; }
.prov:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--line); }
.prov.google{ background:#fff; color:#1F1F1F; border-color:#DADCE0; box-shadow:0 1px 2px rgba(20,22,26,.12); }
.prov svg{ width:22px; height:22px; }
.or{ display:flex; align-items:center; gap:10px; color:var(--faint); font-size:12.5px; margin:18px 0; }
.or::before, .or::after{ content:""; flex:1; height:1px; background:var(--line-soft); }
.auth-msg{ font-size:13.5px; min-height:20px; color:var(--dim); margin-top:10px; }
.auth-msg.ok{ color:var(--ok); } .auth-msg.err{ color:var(--bad); }
.sheet{ max-width:520px; margin:0 auto; padding:24px 18px; }
.choice{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:14px; min-height:64px; border-radius:var(--radius); border:2px solid var(--line); background:var(--surface); box-shadow:0 3px 0 var(--line); }
.choice + .choice{ margin-top:10px; }
.choice.on{ border-color:var(--acc); background:var(--acc-soft); box-shadow:0 3px 0 var(--acc-2); }
.choice b{ display:block; font-size:15.5px; } .choice small{ display:block; color:var(--dim); font-size:13px; }
.choice .ci{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--acc-soft); color:var(--acc); flex:0 0 auto; }
.choice .ci svg{ width:22px; height:22px; }
.loading{ display:grid; place-items:center; min-height:70dvh; text-align:center; padding:20px; }
.loading .spin{ width:46px; height:46px; border-radius:50%; border:4px solid var(--line); border-top-color:var(--brand); animation:spin .8s linear infinite; margin:0 auto 16px; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ============================================================ BUSCAR */
.searchbox{ display:flex; align-items:center; gap:10px; padding:0 14px; min-height:50px; border-radius:14px; background:var(--surface); border:2px solid var(--line); }
.searchbox:focus-within{ border-color:var(--acc); }
.searchbox svg{ color:var(--dim); width:20px; height:20px; }
.searchbox input{ flex:1; background:none; border:none; outline:none; color:var(--text); min-height:46px; }
.search-cat{ font-family:var(--f-label); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--acc); margin:20px 2px 9px; display:flex; align-items:center; gap:8px; font-weight:700; }
.search-cat .ln{ flex:1; height:1px; background:var(--line-soft); }
.hl{ background:var(--acc-soft); color:var(--acc); border-radius:3px; padding:0 1px; }
.empty{ text-align:center; padding:44px 20px; color:var(--dim); }
.empty svg{ width:34px; height:34px; color:var(--faint); margin-bottom:12px; }
.empty b{ display:block; color:var(--text-2); font-size:15.5px; margin-bottom:4px; }

/* ============================================================ PANEL DE DIRECCIÓN */
.kpis{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (min-width:760px){ .kpis{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1100px){ .kpis{ grid-template-columns:repeat(6,1fr); } }
.kpi{ padding:14px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line-soft); }
.kpi small{ display:block; font-size:12px; color:var(--dim); line-height:1.3; }
.kpi b{ display:block; font-family:var(--f-display); font-size:26px; line-height:1.1; margin-top:6px; }
.kpi .sub{ font-size:11.5px; color:var(--faint); margin-top:2px; }
.tbl-wrap{ overflow-x:auto; border:1px solid var(--line-soft); border-radius:var(--radius); background:var(--surface); }
.tbl{ width:100%; border-collapse:collapse; font-size:13.5px; white-space:nowrap; }
.tbl th, .tbl td{ padding:10px 12px; text-align:left; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
.tbl th{ position:sticky; top:0; background:var(--surface-2); font-family:var(--f-label); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); font-weight:700; cursor:pointer; user-select:none; }
.tbl th.num, .tbl td.num{ text-align:right; font-variant-numeric:tabular-nums; }
.tbl tr:last-child td{ border-bottom:none; }
.tbl tbody tr{ cursor:pointer; }
.tbl tbody tr:hover td{ background:var(--surface-2); }
.tbl td.wrap{ white-space:normal; min-width:240px; }
.who{ display:flex; align-items:center; gap:10px; }
.who b{ display:block; font-size:14px; } .who small{ display:block; font-size:11.5px; color:var(--dim); }
.al{ display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:999px; font-size:11px; font-weight:700; margin:1px 2px 1px 0; }
.al.r{ background:var(--bad-soft); color:var(--bad); } .al.y{ background:var(--warn-soft); color:var(--warn); } .al.g{ background:var(--ok-soft); color:var(--ok); }
.mini{ display:flex; gap:4px; align-items:center; }
.mini i{ display:block; width:28px; height:6px; border-radius:3px; background:var(--line); overflow:hidden; position:relative; }
.mini i span{ position:absolute; left:0; top:0; bottom:0; background:var(--acc); }
.chart{ display:flex; align-items:flex-end; gap:2px; height:120px; padding-top:8px; }
.chart .c{ flex:1; background:var(--brand); border-radius:3px 3px 0 0; min-height:1px; position:relative; }
.chart .c.z{ background:var(--line-soft); }
.chart-axis{ display:flex; justify-content:space-between; font-size:11px; color:var(--faint); font-family:var(--f-mono); margin-top:6px; }
.heat{ display:grid; grid-template-columns:34px repeat(24, 1fr); gap:2px; font-size:10px; color:var(--faint); font-family:var(--f-mono); }
.heat i{ display:block; aspect-ratio:1; border-radius:2px; background:var(--surface-3); }
.ratio{ font-family:var(--f-mono); font-size:12px; font-weight:700; }
.ratio.r{ color:var(--bad); } .ratio.y{ color:var(--warn); } .ratio.g{ color:var(--ok); }
.ex-item{ border:1px solid var(--line-soft); border-radius:var(--radius); background:var(--surface); overflow:hidden; }
.ex-item + .ex-item{ margin-top:8px; }
.ex-item summary{ list-style:none; cursor:pointer; padding:12px 14px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ex-item summary::-webkit-details-marker{ display:none; }
.ex-item .qrow{ display:grid; grid-template-columns:24px 1fr auto; gap:10px; padding:10px 14px; border-top:1px solid var(--line-soft); font-size:13.5px; align-items:start; }
.ex-item .qrow .ok{ color:var(--ok); font-weight:800; } .ex-item .qrow .no{ color:var(--bad); font-weight:800; }
.ex-item .qrow small{ display:block; color:var(--dim); font-size:12.5px; margin-top:3px; }

/* ============================================================ ILUSTRACIONES (momentos de juego)
   Caricatura sólo para celebrar; duran menos de 2 s. Con «reducir movimiento» la regla de abajo
   las lleva a su estado final al instante (por eso todo usa animation-fill-mode both). */
.il{ width:140px; height:140px; display:block; margin:-6px auto 10px; overflow:visible; }
.il-rayos{ opacity:0; animation:il-aparece .4s .45s both, il-gira 9s .85s linear infinite; }
@keyframes il-aparece{ to{ opacity:.9; } }
@keyframes il-gira{ to{ transform:rotate(360deg); } }
.il-destello{ opacity:0; animation:il-destello 1.3s var(--d,0s) ease-out both; }
@keyframes il-destello{ 0%{ opacity:0; transform:scale(.2) rotate(0); } 40%{ opacity:1; transform:scale(1.2) rotate(20deg); } 100%{ opacity:.9; transform:scale(1) rotate(45deg); } }
.il-cofre .il-cuerpo{ transform-origin:80px 140px; animation:il-sacude .45s ease-in-out both; }
@keyframes il-sacude{ 0%,100%{ transform:rotate(0); } 20%{ transform:rotate(-4deg); } 40%{ transform:rotate(4deg); } 60%{ transform:rotate(-3deg); } 80%{ transform:rotate(3deg); } }
.il-cofre .il-tapa{ transform-origin:138px 80px; animation:il-abre .55s .45s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes il-abre{ to{ transform:translate(-6px,-28px) rotate(-16deg); } }
.il-moneda{ opacity:0; transform-box:fill-box; transform-origin:center; animation:il-brota .8s var(--d) ease-out both; }
@keyframes il-brota{ 0%{ opacity:0; transform:translate(0,18px) scale(.3); } 35%{ opacity:1; } 100%{ opacity:1; transform:translate(var(--x),var(--y)) scale(1); } }
.il-llama .il-fuego{ transform-origin:80px 142px; animation:il-enciende .6s cubic-bezier(.34,1.56,.64,1) both, il-flama .8s .6s ease-in-out 4 alternate; }
@keyframes il-enciende{ 0%{ transform:scale(.2); opacity:0; } 100%{ transform:none; opacity:1; } }
@keyframes il-flama{ 0%{ transform:none; } 50%{ transform:scale(1.04,.96) skewX(-2deg); } 100%{ transform:scale(.97,1.04) skewX(2deg); } }
.il-arco{ stroke-dasharray:100; stroke-dashoffset:100; animation:il-llena .9s .1s ease-out both; }
@keyframes il-llena{ to{ stroke-dashoffset:0; } }
.il-palomita{ stroke-dasharray:100; stroke-dashoffset:100; animation:il-traza .45s .95s ease-out both; }
@keyframes il-traza{ to{ stroke-dashoffset:0; } }
.il-nivel .il-medalla, .il-trofeo .il-copa{ transform-origin:80px 140px; animation:il-salta .9s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes il-salta{ 0%{ transform:translateY(40px) scale(.4); opacity:0; } 55%{ transform:translateY(-14px) scale(1.06); opacity:1; } 75%{ transform:translateY(4px) scale(.98); } 100%{ transform:none; opacity:1; } }
.il-protector .il-escudo{ transform-origin:80px 130px; animation:il-enciende .6s cubic-bezier(.34,1.56,.64,1) both; }
.il-carta{ position:relative; width:118px; height:140px; margin:-6px auto 12px; perspective:600px; }
.il-cara{ position:absolute; inset:0; border-radius:22px; display:grid; place-items:center; border:3px solid #1E1B4B; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.il-dorso{ background:#3730A3; animation:il-voltea .7s .35s cubic-bezier(.34,1.3,.64,1) both; }
.il-dorso svg{ width:72%; height:72%; }
.il-frente{ background:var(--rc); color:#fff; box-shadow:0 6px 0 color-mix(in srgb, var(--rc) 55%, #000); animation:il-voltea-frente .7s .35s cubic-bezier(.34,1.3,.64,1) both; }
.il-frente svg{ width:56%; height:56%; }
@keyframes il-voltea{ from{ transform:rotateY(0); } to{ transform:rotateY(180deg); } }
@keyframes il-voltea-frente{ from{ transform:rotateY(-180deg); } to{ transform:rotateY(0); } }
.il-mini{ width:28px; height:28px; display:block; flex:0 0 auto; }
.il-check{ animation:pop .4s both; }
.il-check .il-palomita{ animation-delay:.2s; }
.score-hero .il{ width:112px; height:112px; margin:-4px auto 2px; }
/* robot guía */
.robot{ width:100%; height:100%; display:block; overflow:visible; }
.rb-flota{ transform-origin:80px 150px; animation:rb-flota 3.2s ease-in-out infinite; }
@keyframes rb-flota{ 0%,100%{ transform:none; } 50%{ transform:translateY(-3px); } }
.rb-ojo{ transform-box:fill-box; transform-origin:center; animation:rb-parpadea 4.6s infinite; }
@keyframes rb-parpadea{ 0%,94%,100%{ transform:none; } 97%{ transform:scaleY(.1); } }
.rb-luz{ animation:rb-luz 2s ease-in-out infinite; }
@keyframes rb-luz{ 50%{ fill:#FDE68A; } }
.rb-brazo{ transform-origin:114px 114px; animation:rb-saluda .45s ease-in-out 6 alternate both; }
@keyframes rb-saluda{ from{ transform:rotate(-10deg); } to{ transform:rotate(14deg); } }
.guia{ display:flex; align-items:flex-end; gap:10px; margin-top:16px; }
.guia-rb{ width:78px; height:78px; flex:0 0 auto; }
.guia .burbuja{ flex:1; min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:16px 16px 16px 4px; padding:12px 14px; font-size:14.5px; line-height:1.5; color:var(--text-2); box-shadow:var(--shadow); }
.guia .burbuja b{ color:var(--text); }
.guia .burbuja .quien{ display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); font-weight:700; margin-bottom:2px; }
.guia-acc{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
/* repaso adaptativo: lección terminada que se está olvidando (memoria.js) y errores por repasar */
.node.done.reforzar{ background:var(--surface); color:var(--warn); border:3px solid var(--warn); box-shadow:0 6px 0 var(--line); animation:ref-tambalea 3.4s ease-in-out infinite; }
.node.done.reforzar::after{ border:3px dashed var(--warn); opacity:.5; }
@keyframes ref-tambalea{ 0%,80%,100%{ transform:none; } 85%{ transform:rotate(-8deg); } 90%{ transform:rotate(6deg); } 95%{ transform:rotate(-3deg); } }
.ref-tag{ display:block; width:max-content; margin:5px auto 0; padding:2px 9px; border-radius:999px; background:var(--warn-soft); color:var(--warn); font-size:11.5px; font-weight:700; }
.guia-btn{ display:flex; margin-top:10px; }
.row.errores .ri{ background:var(--bad-soft); color:var(--bad); }
.modal{ position:relative; }
.rb-esquina{ position:absolute; left:-14px; top:-42px; width:78px; height:78px; pointer-events:none; }
.score-hero .guia-rb{ width:96px; height:96px; margin:-6px auto 4px; }
.chip-hud.fire:not(.off) svg{ transform-origin:50% 90%; animation:il-flama .9s ease-in-out infinite alternate; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
@media print{
  .sidebar,.topbar,.tabbar,#confetti,.no-print{ display:none !important; }
  .app{ display:block; } body{ background:#fff; } main{ padding:0; }
  .diploma{ border-width:8px; }
}

/* ============================================================ MODO FOCO (examen y práctica: sin distracciones) */
body.foco .tabbar, body.foco .topbar{ display:none; }
body.foco main{ padding-bottom:0; }
body.foco .focus{ min-height:100dvh; padding-top:calc(16px + var(--safe-t)); }
@media (min-width:960px){ body.foco .app{ grid-template-columns:minmax(0,1fr); } body.foco .sidebar{ display:none; } }
main.view{ animation:viewin .28s cubic-bezier(.2,.7,.2,1); }
.side-foot .who{ padding:8px; border-radius:12px; } .side-foot .who:hover{ background:var(--surface); }
.lb-row .mv{ flex:0 0 auto; }
button.nudge{ cursor:pointer; }

/* ============================================================ GRÁFICAS (panel de dirección)
   Una serie por gráfica (sin leyenda: el título la nombra), un solo eje, barras ≤24 px con
   extremo redondeado de 4 px, separación de 2 px, cuadrícula de 1 px recesiva y escala
   secuencial de un solo tono. Colores validados con el validador de paletas (ver docs). */
:root{ --viz-1:#3987e5; --viz-grid:#222D48; --viz-axis:#34416A;
  --seq-1:#184f95; --seq-2:#256abf; --seq-3:#3987e5; --seq-4:#6da7ec; --seq-5:#b7d3f6; }
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --viz-1:#2a78d6; --viz-grid:#E7EAF1; --viz-axis:#C6CCD8;
  --seq-1:#86b6ef; --seq-2:#5598e7; --seq-3:#2a78d6; --seq-4:#1c5cab; --seq-5:#0d366b; } }
:root[data-theme="light"]{ --viz-1:#2a78d6; --viz-grid:#E7EAF1; --viz-axis:#C6CCD8;
  --seq-1:#86b6ef; --seq-2:#5598e7; --seq-3:#2a78d6; --seq-4:#1c5cab; --seq-5:#0d366b; }
.vz-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; }
.vz-head b{ font-family:var(--f-display); font-size:16px; } .vz-head small{ color:var(--dim); font-size:12.5px; }
.vz-plot{ position:relative; margin-left:38px; }
.vz-grid{ position:absolute; left:0; right:0; height:1px; background:var(--viz-grid); }
.vz-grid.base{ background:var(--viz-axis); }
.vz-grid span{ position:absolute; right:calc(100% + 8px); top:-7px; font-family:var(--f-mono); font-size:10.5px; color:var(--faint); font-variant-numeric:tabular-nums; white-space:nowrap; }
.vz-cols{ position:absolute; inset:0; display:flex; align-items:stretch; justify-content:center; gap:2px; }
.vz-col{ flex:1 1 0; max-width:24px; height:100%; display:flex; align-items:flex-end; padding:0; border-radius:0; }
.vz-col i{ display:block; width:100%; background:var(--viz-1); border-radius:4px 4px 0 0; transition:filter .12s; }
.vz-col:hover i, .vz-col:focus-visible i{ filter:brightness(1.25); }
.vz-col.today i{ outline:2px solid var(--surface); }
.vz-x{ display:flex; justify-content:space-between; margin:6px 0 0 38px; font-family:var(--f-mono); font-size:10.5px; color:var(--faint); }
.vz-heat{ display:grid; grid-template-columns:30px repeat(24, minmax(0,1fr)); gap:2px; font-family:var(--f-mono); font-size:10px; color:var(--faint); align-items:center; }
.vz-heat .cell{ aspect-ratio:1; border-radius:3px; background:var(--surface-3); padding:0; min-width:0; }
.vz-heat .cell:hover, .vz-heat .cell:focus-visible{ outline:2px solid var(--text); outline-offset:0; }
.vz-heat .q1{ background:var(--seq-1); } .vz-heat .q2{ background:var(--seq-2); } .vz-heat .q3{ background:var(--seq-3); } .vz-heat .q4{ background:var(--seq-4); } .vz-heat .q5{ background:var(--seq-5); }
.vz-scale{ display:flex; align-items:center; gap:4px; margin-top:10px; font-size:11.5px; color:var(--dim); }
.vz-scale i{ width:16px; height:12px; border-radius:3px; display:inline-block; }
.vz-tip{ position:fixed; z-index:800; pointer-events:none; padding:8px 11px; border-radius:10px; background:var(--surface); border:1px solid var(--line); box-shadow:0 12px 30px -12px rgba(0,0,0,.5); font-size:12.5px; max-width:260px; }
.vz-tip b{ display:block; font-family:var(--f-display); font-size:15px; color:var(--text); }
.vz-tip span{ color:var(--text-2); }
details.vz-table{ margin-top:10px; } details.vz-table summary{ cursor:pointer; font-size:12.5px; color:var(--acc); font-weight:700; }
details.vz-table .tbl-wrap{ margin-top:8px; max-height:280px; overflow:auto; }
.meter{ display:inline-block; width:64px; height:6px; border-radius:3px; background:var(--line-soft); overflow:hidden; vertical-align:middle; margin-right:6px; }
.meter i{ display:block; height:100%; background:var(--viz-1); border-radius:3px; }
.dir-filters{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:16px 0 14px; }
.dir-filters .searchbox{ flex:1 1 220px; min-height:44px; }
.dir-filters .searchbox input{ min-height:40px; }
.al svg{ width:12px; height:12px; }
.chev{ width:18px; height:18px; color:var(--faint); flex:0 0 auto; }
.nextstep .chev{ color:var(--acc); }
.me-top .who{ display:block; }
.chip svg, .seg button svg{ width:16px; height:16px; vertical-align:-3px; }
.kpi b{ font-size:clamp(20px,2.4vw,26px); }
.kudo{ flex:0 0 auto; } .kudo svg{ width:16px; height:16px; }