/* Bitácora BCBA · diseño "Arena"
   Oscuro por defecto (como el diseño). Hay una variante clara para quien la elija.
   Las variables antiguas (--surface, --accent, ...) se mantienen como alias para el panel de admin y los gráficos. */

:root, :root[data-theme="dark"]{
  --bg:#0E1014; --bg2:#13161B; --card:#171A20; --card2:#1C2027; --raised:#13161B;
  --line:#232730; --line2:#2A2E37; --line3:#3A3F4A;
  --ink:#ECEDEE; --ink2:#A9AEB7; --ink3:#8B9099; --ink4:#5E636D;
  --acc:#C5E86C; --acc-bg:#C5E86C; --acc-hover:#D6F28A; --on-acc:#0E1014; --acc-soft:#1F2716; --acc-dim:#3A4A22; --acc-mid:#6E8A3A;
  --org:#FFB86B; --org-soft:#2A2216; --red:#F07A6A; --red-soft:#2A1719; --blue:#9DB4FF; --blue-soft:#1C2338;
  --heat0:#1A1D24; --heat1:#2E3A1F; --heat2:#55702C; --heat3:#8CB043; --heat4:#C5E86C;
  --shadow:rgba(0,0,0,.45); --dock:#1C1F26;
  color-scheme: dark;
  /* alias del diseño anterior */
  --surface:var(--card); --surface-alt:var(--card2); --ink-soft:var(--ink2); --ink-faint:var(--ink3);
  --accent:var(--acc); --accent-strong:var(--ink); --accent-soft:var(--acc-soft);
  --good:var(--acc); --good-soft:var(--acc-soft); --warn:var(--org); --warn-soft:var(--org-soft);
  --danger:var(--red); --danger-soft:var(--red-soft); --border:var(--line); --on-accent:var(--on-acc);
}
:root[data-theme="light"]{
  --bg:#F3F4EF; --bg2:#EAECE4; --card:#FFFFFF; --card2:#F1F2EC; --raised:#F7F8F3;
  --line:#E0E3D8; --line2:#D3D7CA; --line3:#B9BEB0;
  --ink:#15171B; --ink2:#4A4F58; --ink3:#666B74; --ink4:#9A9EA6;
  --acc:#4F6B0E; --acc-bg:#C5E86C; --acc-hover:#B6DC52; --on-acc:#0E1014; --acc-soft:#ECF5D3; --acc-dim:#D2E5A2; --acc-mid:#8FB043;
  --org:#B25E0C; --org-soft:#FCEBD6; --red:#B93A2B; --red-soft:#FADDD8; --blue:#3756B8; --blue-soft:#E2E8FB;
  --heat0:#E6E8E0; --heat1:#D7E8AF; --heat2:#B3D46A; --heat3:#86AE33; --heat4:#4F6B0E;
  --shadow:rgba(20,24,16,.14); --dock:#FFFFFF;
  color-scheme: light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:'Space Grotesk',system-ui,sans-serif; -webkit-font-smoothing:antialiased; min-height:100vh}
button, input, select, textarea{font-family:inherit; color:inherit}
a{color:var(--acc)}
h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.02em}
::selection{background:var(--acc-soft)}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.cap{font:500 12px 'JetBrains Mono',monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3)}
.muted{color:var(--ink3)}
.hide{display:none !important}
:focus-visible{outline:2px solid var(--acc); outline-offset:2px}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} }

/* ---------- barra superior ---------- */
.topbar{position:sticky; top:0; z-index:30; height:68px; display:flex; align-items:center; gap:24px; padding:0 28px; border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(10px)}
.logo{display:flex; align-items:center; gap:10px; font:600 16px 'Space Grotesk'; cursor:pointer; background:none; border:none; padding:0}
.logo-mark{width:32px; height:32px; border-radius:9px; background:var(--acc-bg); color:var(--on-acc); display:flex; align-items:center; justify-content:center; font:700 15px 'Space Grotesk'; flex-shrink:0}
.nav{display:flex; gap:4px}
.nav button{border:none; background:transparent; padding:9px 14px; border-radius:10px; font:500 14px 'Space Grotesk'; color:var(--ink3); cursor:pointer}
.nav button:hover{color:var(--ink)}
.nav button[aria-current="page"]{background:var(--card2); color:var(--acc)}
.top-right{margin-left:auto; display:flex; align-items:center; gap:12px}
.streak{display:flex; align-items:center; gap:6px; font:600 14px 'JetBrains Mono'; color:var(--org); background:none; border:none; cursor:pointer; padding:6px}
.streak i{width:10px; height:10px; border-radius:50%; background:var(--org); display:block}
.lvl-chip{display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:6px 12px 6px 6px; cursor:pointer}
.lvl-badge{width:30px; height:30px; border-radius:8px; background:var(--acc-bg); color:var(--on-acc); display:flex; align-items:center; justify-content:center; font:700 13px 'JetBrains Mono'; flex-shrink:0}
.lvl-meta{display:flex; flex-direction:column; gap:4px; width:110px}
.lvl-meta span{font:500 11px 'JetBrains Mono'; color:var(--ink3); white-space:nowrap}
.bar{height:4px; background:var(--line); border-radius:99px; overflow:hidden}
.bar > i{display:block; height:100%; background:var(--acc-bg); border-radius:99px}
.seg-mini{display:flex; border:1px solid var(--line2); border-radius:99px; overflow:hidden}
.seg-mini button{border:none; background:transparent; padding:5px 10px; font:600 11px 'JetBrains Mono'; color:var(--ink3); cursor:pointer}
.seg-mini button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.icon-btn{width:36px; height:36px; border-radius:10px; border:1px solid var(--line2); background:var(--card); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink2); flex-shrink:0}
.icon-btn:hover{color:var(--ink); border-color:var(--line3)}
.avatar{width:36px; height:36px; border-radius:50%; background:var(--card2); border:1px solid var(--line2); color:var(--ink); font:600 14px 'Space Grotesk'; cursor:pointer; display:flex; align-items:center; justify-content:center}

.menu{position:absolute; right:16px; top:60px; z-index:40; min-width:240px; background:var(--card); border:1px solid var(--line2); border-radius:16px; padding:8px; box-shadow:0 20px 40px -18px var(--shadow); display:flex; flex-direction:column; gap:2px}
.menu .who{padding:10px 12px 12px; border-bottom:1px solid var(--line); margin-bottom:4px}
.menu .who b{display:block; font-size:15px}
.menu .who span{font-size:13px; color:var(--ink3)}
.menu button{border:none; background:none; text-align:left; padding:10px 12px; border-radius:10px; font:500 14px 'Space Grotesk'; cursor:pointer; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:10px}
.menu button:hover{background:var(--card2)}

/* ---------- contenido ---------- */
main{max-width:1280px; margin:0 auto; padding:28px 32px 56px}
.screen{display:flex; flex-direction:column; gap:14px; animation:fadeIn .18s ease-out}
@keyframes fadeIn{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}
.h1{font:700 34px/1.05 'Space Grotesk'; letter-spacing:-.03em; margin:0}
.h2{font:700 26px/1.1 'Space Grotesk'; letter-spacing:-.025em; margin:0}
.lead{font:400 15px/1.5 'Space Grotesk'; color:var(--ink2); margin:0}
.grid{display:grid; gap:14px}
.home-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.col{display:flex; flex-direction:column; gap:14px; min-width:0}
.cards-auto{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px}

.panel{background:var(--card); border:1px solid var(--line); border-radius:22px; padding:18px; display:flex; flex-direction:column; gap:12px; min-width:0}
.panel-head{display:flex; justify-content:space-between; align-items:center; gap:10px}
.link-mono{font:500 12px 'JetBrains Mono'; color:var(--acc); cursor:pointer; background:none; border:none; padding:0; letter-spacing:.04em}
.tile{background:var(--card); border:1px solid var(--line); border-radius:20px; padding:16px; display:flex; flex-direction:column; gap:10px; cursor:pointer; text-align:left; transition:border-color .15s, transform .1s}
.tile:hover{border-color:var(--line3)}
.tile:active{transform:scale(.99)}
.tile .t{font:600 16px 'Space Grotesk'}
.tile .s{font:400 13px 'Space Grotesk'; color:var(--ink3)}
.shape{width:34px; height:34px; display:block}

.hero{background:var(--acc-bg); color:var(--on-acc); border-radius:24px; padding:22px; display:flex; flex-direction:column; gap:16px; cursor:pointer; border:none; text-align:left; transition:transform .1s}
.hero:hover{filter:brightness(1.03)}
.hero .cap{color:var(--on-acc); opacity:.85}
.hero-title{font:700 34px/1.05 'Space Grotesk'; letter-spacing:-.03em; text-wrap:balance}
.hero-go{width:48px; height:48px; border-radius:50%; background:var(--on-acc); color:var(--acc-bg); display:flex; align-items:center; justify-content:center; font:600 20px 'Space Grotesk'; flex-shrink:0}

.btn{border:1px solid var(--line2); background:var(--card); color:var(--ink); border-radius:12px; padding:11px 16px; font:600 14px 'Space Grotesk'; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:background .15s, border-color .15s}
.btn:hover:not(:disabled){border-color:var(--line3)}
.btn:disabled{opacity:.45; cursor:default}
.btn-primary, .btn-lime{background:var(--acc-bg); color:var(--on-acc); border-color:var(--acc-bg)}
.btn-primary:hover:not(:disabled), .btn-lime:hover:not(:disabled){background:var(--acc-hover); border-color:var(--acc-hover)}
.btn-white{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.btn-ghost{background:transparent}
.btn-lg{height:52px; border-radius:14px; font-size:16px; font-weight:700; padding:0 22px}
.btn-sm{padding:7px 12px; font-size:13px; border-radius:10px}
.btn-danger{color:var(--red); border-color:var(--red)}
.pill{display:inline-flex; align-items:center; padding:8px 12px; border-radius:10px; background:var(--card); border:1px solid var(--line); font:500 13px 'JetBrains Mono'}
.tag{display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:8px; font:600 12px 'JetBrains Mono'}
.tag-acc{background:var(--acc-soft); color:var(--acc)} .tag-org{background:var(--org-soft); color:var(--org)} .tag-red{background:var(--red-soft); color:var(--red)} .tag-mut{background:var(--card2); color:var(--ink3)}

/* segmentos (Retos / Simulacro / Errores) y chips */
.segs{display:flex; gap:6px; flex-wrap:wrap}
.segs button{border:1px solid var(--line2); background:transparent; color:var(--ink2); padding:9px 14px; border-radius:12px; font:600 14px 'Space Grotesk'; cursor:pointer}
.segs button[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{border:1px solid var(--line2); background:transparent; color:var(--ink2); padding:7px 12px; border-radius:10px; font:600 12px 'JetBrains Mono'; cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.opt-card{border:1.5px solid var(--line); background:var(--card); border-radius:18px; padding:16px; display:flex; flex-direction:column; gap:4px; text-align:left; cursor:pointer}
.opt-card[aria-pressed="true"]{border-color:var(--acc); background:var(--acc-soft)}
.opt-card .t{font:600 16px 'Space Grotesk'}
.opt-card .s{font:400 13px/1.35 'Space Grotesk'; color:var(--ink3)}
.opt-card .x{font:600 11px 'JetBrains Mono'; color:var(--acc); margin-top:4px}

/* mapa de dominios */
.dom-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.dom-tile{border-radius:14px; padding:12px; display:flex; flex-direction:column; gap:6px; cursor:pointer; border:none; text-align:left; min-width:0}
.dom-tile .k{font:700 20px 'Space Grotesk'}
.dom-tile .p{font:600 13px 'JetBrains Mono'}
.dom-tile .n{font:400 12px/1.25 'Space Grotesk'; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lvl-hi{color:var(--acc)} .lvl-mid{color:var(--org)} .lvl-lo{color:var(--red)} .lvl-none{color:var(--ink4)}
.bg-hi{background:var(--acc-soft)} .bg-mid{background:var(--org-soft)} .bg-lo{background:var(--red-soft)} .bg-none{background:var(--card2)}

/* misiones, métricas */
.quest{display:flex; flex-direction:column; gap:8px}
.quest .row1{display:flex; justify-content:space-between; gap:10px; font:500 14px 'Space Grotesk'}
.quest .xp{font:600 12px 'JetBrains Mono'; color:var(--ink3); white-space:nowrap}
.quest .bar{height:6px}
.metric{background:var(--card); border:1px solid var(--line); border-radius:20px; padding:16px; display:flex; flex-direction:column; gap:6px}
.metric .v{font:700 32px/1 'Space Grotesk'; letter-spacing:-.02em}
.metric .v small{font:500 16px 'Space Grotesk'; color:var(--ink3)}
.metric .sub{font:500 12px 'Space Grotesk'; color:var(--ink3)}
.resume{display:flex; align-items:center; gap:16px; cursor:pointer; text-align:left}
.panel.resume{flex-direction:row; color:var(--ink)}
.ring{width:46px; height:46px; flex-shrink:0}
.heat{display:grid; grid-template-rows:repeat(7,1fr); grid-auto-flow:column; grid-auto-columns:1fr; gap:4px; height:130px}
.heat i{border-radius:3px; display:block}

/* temas */
.topic-row{background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden}
.topic-row[data-open="true"]{border-color:var(--line3)}
.topic-head{width:100%; display:flex; align-items:center; gap:14px; padding:14px 16px; background:none; border:none; cursor:pointer; text-align:left}
.topic-letter{width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font:700 18px 'Space Grotesk'; flex-shrink:0}
.topic-name{font:600 15px 'Space Grotesk'}
.topic-meta{font:500 12px 'JetBrains Mono'; color:var(--ink3); margin-top:3px}
.topic-items{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px 20px; padding:6px 16px 16px; border-top:1px solid var(--line)}
.item-btn{display:grid; grid-template-columns:44px 1fr 12px; gap:8px; align-items:center; padding:10px 2px; background:none; border:none; text-align:left; cursor:pointer; color:var(--ink2); font:400 14px/1.35 'Space Grotesk'}
.item-btn:hover{color:var(--ink)}
.item-btn .c{font:600 12px 'JetBrains Mono'}
.item-btn .d{width:8px; height:8px; border-radius:50%}
.segbar{display:flex; gap:4px; height:8px}
.segbar > div{border-radius:99px; background:var(--line); overflow:hidden}
.segbar > div > i{display:block; height:100%}
.search{height:46px; border:1px solid var(--line2); background:var(--card); border-radius:14px; padding:0 14px; font:400 15px 'Space Grotesk'; width:100%; max-width:360px}

/* detalle de tema */
.big-code{font:700 64px/1 'Space Grotesk'; letter-spacing:-.04em; color:var(--acc)}
.study{background:var(--card); border:1px solid var(--line); border-radius:20px; padding:18px 20px; display:flex; flex-direction:column; gap:10px}
.study p{margin:0; font:400 16px/1.6 'Space Grotesk'; color:var(--ink)}
.cta-row{border-radius:20px; padding:16px 18px; display:flex; justify-content:space-between; align-items:center; gap:12px; cursor:pointer; border:1px solid var(--line); background:var(--card); text-align:left}
.cta-row.lime{background:var(--acc-bg); color:var(--on-acc); border-color:var(--acc-bg)}
.cta-row .t{font:600 16px 'Space Grotesk'}
.cta-row .s{font:400 13px 'Space Grotesk'; opacity:.75}

/* tarjetas */
.focus{max-width:600px; margin:0 auto; width:100%; display:flex; flex-direction:column; gap:14px}
.focus-wide{max-width:720px}
.focus-top{display:flex; justify-content:space-between; align-items:center; font:500 12px 'JetBrains Mono'; color:var(--ink3)}
.focus-top button{background:none; border:none; color:var(--ink3); font:inherit; cursor:pointer; padding:4px 0}
.boxes{display:grid; grid-template-columns:repeat(5,1fr); gap:6px}
.box{border:1px solid var(--line); background:var(--card); border-radius:12px; padding:8px 4px; text-align:center; cursor:pointer}
.box[aria-pressed="true"]{border-color:var(--line3)}
.box b{display:block; font:700 15px 'JetBrains Mono'}
.box span{font:500 10px 'JetBrains Mono'; color:var(--ink3)}
.flash{position:relative; min-height:400px; border-radius:28px; background:var(--card); border:1px solid var(--line2); padding:26px; display:flex; flex-direction:column; cursor:pointer; text-align:left; width:100%; box-shadow:0 14px 0 -6px var(--card2)}
.flash .front{font:700 36px/1.1 'Space Grotesk'; letter-spacing:-.025em; margin:auto 0}
.flash .back{font:400 17px/1.55 'Space Grotesk'; margin:auto 0; display:flex; flex-direction:column; gap:14px}
.flash .back .ex{font-size:15px; color:var(--ink2); border-top:1px solid var(--line); padding-top:12px}
.rate{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.rate button{border-radius:18px; padding:14px; display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer; font:700 16px 'Space Grotesk'}
.rate .no{background:transparent; border:1px solid var(--red); color:var(--red)}
.rate .yes{background:var(--acc-bg); border:1px solid var(--acc-bg); color:var(--on-acc)}
.rate small{font:500 10px 'JetBrains Mono'; opacity:.75}
.rate button:disabled{opacity:.4; cursor:default}

/* preguntas */
.qprog{display:flex; gap:5px}
.qprog i{flex:1; height:4px; border-radius:99px; background:var(--line); display:block}
.qstem{font:400 20px/1.45 'Space Grotesk'; margin:0}
.answer{width:100%; display:flex; gap:14px; align-items:flex-start; border:1.5px solid var(--line); background:var(--card); border-radius:16px; padding:14px 16px; cursor:pointer; text-align:left; font:400 16px/1.45 'Space Grotesk'; color:var(--ink)}
.answer:hover:not(:disabled){border-color:var(--line3)}
.answer .l{font:600 13px 'JetBrains Mono'; color:var(--ink3); width:16px; flex-shrink:0; padding-top:2px}
.answer .why{display:block; margin-top:8px; font-size:14px; color:var(--ink2)}
.answer[data-state="ok"]{border-color:var(--acc); background:var(--acc-soft)} .answer[data-state="ok"] .l{color:var(--acc)}
.answer[data-state="bad"]{border-color:var(--red); background:var(--red-soft)} .answer[data-state="bad"] .l{color:var(--red)}
.answer[data-state="dim"]{opacity:.5}
.answer[data-state="sel"]{border-color:var(--acc); background:var(--acc-soft)} .answer[data-state="sel"] .l{color:var(--acc)}
.answer:disabled{cursor:default}
.feedback{border-radius:18px; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; gap:12px; border:1px solid var(--line); background:var(--card)}
.feedback .t{font:700 18px 'Space Grotesk'}
.feedback .s{font:600 12px 'JetBrains Mono'}

/* examen */
.run-grid{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; align-items:start}
.run-top{display:flex; justify-content:space-between; align-items:center; gap:12px; font:500 12px 'JetBrains Mono'; color:var(--ink3)}
.timer{font:700 18px 'JetBrains Mono'; color:var(--ink)}
.timer.low{color:var(--red)}
.longbar{height:5px; background:var(--line); border-radius:99px; overflow:hidden}
.longbar i{display:block; height:100%; background:var(--acc-bg)}
.qmap{display:grid; grid-template-columns:repeat(15,1fr); gap:4px}
.qmap button{aspect-ratio:1; border-radius:4px; border:none; padding:0; cursor:pointer; background:var(--line)}
.qmap button[data-a="1"]{background:var(--acc-mid)}
.qmap button[data-f="1"]{background:var(--org)}
.qmap button[data-cur="1"]{outline:2px solid var(--ink); outline-offset:0}
.legend{display:flex; gap:12px; font:500 11px 'JetBrains Mono'; color:var(--ink3); flex-wrap:wrap}
.legend i{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px; vertical-align:-1px}
.len-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
.len{border:1px solid var(--line); background:var(--card); border-radius:20px; padding:16px; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:2px}
.len b{font:700 30px 'Space Grotesk'; letter-spacing:-.02em}
.len .t{font:500 14px 'Space Grotesk'} .len .s{font:500 11px 'JetBrains Mono'; color:var(--ink3)}
.len[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.len[aria-pressed="true"] .s{color:var(--ink4)}
.len:disabled{opacity:.35; cursor:default}

/* resultados */
.result-hero{background:var(--acc-bg); color:var(--on-acc); border-radius:24px; padding:24px; display:flex; flex-direction:column; gap:12px}
.result-hero.low{background:var(--org)}
.result-pct{font:700 88px/0.9 'Space Grotesk'; letter-spacing:-.04em}
.dbars{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 28px}
.dbar{display:grid; grid-template-columns:20px 1fr 40px; gap:10px; align-items:center; font:600 13px 'JetBrains Mono'}
.dbar .track{position:relative; height:8px; background:var(--line); border-radius:99px}
.dbar .track i{display:block; height:100%; border-radius:99px}
.dbar .track u{position:absolute; top:-4px; width:2px; height:16px; background:var(--ink); text-decoration:none}
.boss{display:flex; align-items:center; gap:12px; font:500 14px 'Space Grotesk'}
.boss .k{width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font:600 13px 'JetBrains Mono'}

/* errores */
.mist{background:var(--card); border:1px solid var(--line); border-radius:18px}
.mist-head{width:100%; display:grid; grid-template-columns:48px 1fr 20px; gap:12px; padding:16px; background:none; border:none; text-align:left; cursor:pointer; font:400 15px/1.45 'Space Grotesk'; color:var(--ink)}
.mist-head .c{font:600 12px 'JetBrains Mono'; color:var(--red); padding-top:2px}
.mist-head .m{display:block; font:500 11px 'JetBrains Mono'; color:var(--ink3); margin-top:6px; letter-spacing:.03em}
.mist-body{padding:0 16px 16px 76px; display:flex; flex-direction:column; gap:10px}
.mist-ans{display:grid; grid-template-columns:72px 1fr; gap:6px 10px; font:500 14px 'Space Grotesk'}
.mist-ans .lb{font:600 11px 'JetBrains Mono'; padding-top:2px}

/* progreso */
.lvl-big{width:60px; height:60px; border-radius:16px; background:var(--acc-bg); color:var(--on-acc); display:flex; align-items:center; justify-content:center; font:700 24px 'JetBrains Mono'; flex-shrink:0}
.lvl-steps{display:grid; grid-template-columns:repeat(10,1fr); gap:4px; text-align:center; font:500 10px 'JetBrains Mono'; color:var(--ink4)}
.lvl-steps i{display:block; height:8px; border-radius:99px; margin-bottom:6px; background:var(--line)}
.lvl-steps .done i{background:var(--acc-bg)} .lvl-steps .cur i{background:var(--acc-mid)} .lvl-steps .cur{color:var(--acc)}
.chart{display:flex; align-items:flex-end; gap:8px; height:180px; position:relative; padding-top:20px}
.chart .b{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; height:100%}
.chart .b i{display:block; width:100%; border-radius:8px 8px 4px 4px; background:var(--acc-dim)}
.chart .b.last i{background:var(--acc-bg)}
.chart .b span{font:600 11px 'JetBrains Mono'; color:var(--ink2)}
.chart .goal{position:absolute; left:0; right:0; border-top:1px dashed var(--ink4)}
.hist-row{display:grid; grid-template-columns:64px 1fr 20px; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); background:none; border-left:none; border-right:none; border-top:none; width:100%; text-align:left; cursor:pointer; color:var(--ink)}
.hist-row .p{font:700 20px 'Space Grotesk'}
.hist-row .s{font:500 11px 'JetBrains Mono'; color:var(--ink3); display:block; margin-top:2px}
.badges{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
.badge-card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:14px; display:flex; flex-direction:column; gap:8px}
.badge-ic{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font:700 14px 'JetBrains Mono'; color:var(--on-acc)}
.badge-card.off{opacity:.45} .badge-card.off .badge-ic{background:var(--line) !important; color:var(--ink4)}
.badge-card b{font:600 15px 'Space Grotesk'} .badge-card span{font:400 12px 'Space Grotesk'; color:var(--ink3)}

/* etiqueta de vista previa (funciones que aún no existen en el servidor) */
.mock{position:relative}
.demo-tag{display:inline-flex; align-items:center; gap:4px; font:600 9.5px 'JetBrains Mono'; letter-spacing:.08em; padding:3px 6px; border-radius:6px; background:var(--blue-soft); color:var(--blue); vertical-align:middle; cursor:help; white-space:nowrap}
.mock > .demo-tag.corner{position:absolute; top:10px; right:10px}

/* avisos */
.notice{margin-bottom:12px; border-radius:16px; padding:12px 14px; display:flex; justify-content:space-between; align-items:center; gap:10px; font:500 14px/1.45 'Space Grotesk'; border:1px solid var(--line2); background:var(--card)}
.notice.ok{border-color:var(--acc); background:var(--acc-soft)}
.notice.warn{border-color:var(--org); background:var(--org-soft)}
.notice.err{border-color:var(--red); background:var(--red-soft)}
.notice button{background:none; border:none; cursor:pointer; color:inherit; font:600 13px 'Space Grotesk'; text-decoration:underline; padding:4px}
.locked{background:var(--card); border:1px solid var(--line); border-radius:24px; padding:28px; display:flex; flex-direction:column; gap:14px; align-items:flex-start; max-width:640px}

/* ---------- acceso (login / registro / onboarding) ---------- */
.auth{min-height:100vh; display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.auth-left{padding:56px; display:flex; flex-direction:column; gap:22px; justify-content:center}
.auth-right{padding:56px; display:flex; align-items:center; justify-content:center; background:var(--bg2); position:relative}
.auth-controls{position:absolute; top:20px; right:20px; display:flex; gap:8px; align-items:center}
.auth-hero{font:700 54px/1.02 'Space Grotesk'; letter-spacing:-.035em; text-wrap:balance; margin:0}
.auth-card{width:100%; max-width:400px; background:var(--card); border:1px solid var(--line2); border-radius:24px; padding:26px; display:flex; flex-direction:column; gap:18px}
.auth-tabs{display:flex; background:var(--bg); border-radius:12px; padding:4px}
.auth-tabs button{flex:1; padding:9px; border-radius:9px; border:none; background:transparent; font:600 14px 'Space Grotesk'; color:var(--ink3); cursor:pointer}
.auth-tabs button[aria-selected="true"]{background:var(--card2); color:var(--ink)}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font:500 12px 'JetBrains Mono'; color:var(--ink3); text-transform:uppercase; letter-spacing:.04em}
.field input, .field select{height:48px; border:1px solid var(--line2); background:var(--bg); border-radius:12px; padding:0 14px; font:400 15px 'Space Grotesk'; color:var(--ink)}
.field input:focus{outline:none; border:1.5px solid var(--acc)}
.field .hint{font:400 12px 'Space Grotesk'; color:var(--ink3)}
.auth-links{display:flex; justify-content:space-between; gap:10px; font:500 13px 'Space Grotesk'}
.auth-links button{background:none; border:none; padding:0; cursor:pointer; font:inherit}
.auth-msg{margin:0; font:500 14px/1.45 'Space Grotesk'; border-radius:12px; padding:10px 12px; background:var(--card2); color:var(--ink2)}
.auth-msg.err{background:var(--red-soft); color:var(--red)}
.auth-msg.ok{background:var(--acc-soft); color:var(--acc)}
.auth-msg button{background:none; border:none; color:inherit; text-decoration:underline; cursor:pointer; padding:0; font:inherit; margin-top:4px}
/* portada: etiqueta, palabra destacada y caja de los 3 días de prueba */
.auth-kicker{align-self:flex-start; letter-spacing:.06em}
.auth-hero .hl{color:var(--acc)}
.trial-box{display:flex; gap:16px; align-items:flex-start; max-width:620px; background:var(--card); border:1px solid var(--acc-dim); border-radius:18px; padding:16px 18px}
.trial-num{flex:none; width:74px; height:68px; border-radius:14px; background:var(--acc-bg); color:var(--on-acc); display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1}
.trial-num b{font:700 30px 'Space Grotesk'} .trial-num span{font:600 8px 'JetBrains Mono'; letter-spacing:.04em; margin-top:3px}
@media (min-width: 821px){
  .auth .auth-right{align-items:flex-start; padding-top:110px}
  .auth-right .auth-card{position:sticky; top:40px}
}
/* dibujo de la portada (analista tomando datos con un niño) */
.auth-il{max-width:520px; width:100%}
.hero-il{width:100%; height:auto; display:block}
.il-blob{fill:var(--acc-soft)}
.il-dot{fill:var(--acc); opacity:.35}
.il-card{fill:var(--card); stroke:var(--line2); stroke-width:1.5}
.il-label{font:600 12px 'Space Grotesk',sans-serif; fill:var(--ink)}
.il-tiny{font:500 9.5px 'Space Grotesk',sans-serif; fill:var(--ink3)}
.il-axis{stroke:var(--ink3); stroke-width:1.4}
.il-phase{stroke:var(--ink2); stroke-width:1.4; stroke-dasharray:4 3}
.il-line{fill:none; stroke:var(--blue); stroke-width:2.2; stroke-linejoin:round}
.il-pt circle{fill:var(--card); stroke:var(--blue); stroke-width:2}
.il-table{fill:#C49A6C} .il-table-leg{fill:#9C7650}
.il-shirt-a{fill:var(--blue)} .il-arm-a{fill:none; stroke:var(--blue); stroke-width:18; stroke-linecap:round}
.il-skin-a{fill:#E2B48C} .il-hair-a{fill:#3B2A20}
.il-eye{fill:#211C15} .il-smile{fill:none; stroke:#211C15; stroke-width:2.2; stroke-linecap:round}
.il-badge{fill:var(--acc-bg)}
.il-tablet{fill:#2B2F36} .il-screen{fill:#FFFFFF} .il-screen-ln{fill:#15171B} .il-screen-ln2{fill:#C9CDD3}
.il-screen-chart{fill:none; stroke:#3756B8; stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.il-screen-btn{fill:var(--acc-bg)}
.il-shirt-c{fill:var(--acc-mid)} .il-arm-c{fill:none; stroke:var(--acc-mid); stroke-width:14; stroke-linecap:round}
.il-skin-c{fill:#A86B47} .il-hair-c{fill:#2A1D16}
.il-block1{fill:var(--blue)} .il-block2{fill:var(--acc-mid)} .il-block3{fill:var(--org)}
.il-check-bg{fill:var(--acc-bg)}
.il-check{fill:none; stroke:var(--on-acc); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round}
@keyframes ilBob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)}}
.il-float{animation:ilBob 5s ease-in-out 1s infinite}
/* botones que llevan al formulario: solo en móvil, donde el formulario queda abajo */
.auth-jump{display:none; gap:10px; flex-wrap:wrap}
.auth-jump .btn{flex:1 1 100%; justify-content:center}
@media (max-width: 820px){
  .auth{grid-template-columns:1fr; position:relative}
  .auth-jump{display:flex}
  /* idioma y tema arriba, junto al logo, no abajo con el formulario */
  .auth .auth-right{position:static}
  .auth .auth-controls{top:24px; right:22px}
}
.demo-q{background:var(--card); border:1px solid var(--line); border-radius:20px; padding:18px; display:flex; flex-direction:column; gap:12px; max-width:620px}
.demo-opts{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.demo-opts button{padding:11px 13px; border-radius:12px; border:1.5px solid var(--line2); background:var(--bg); font:500 14px 'Space Grotesk'; cursor:pointer; text-align:left; color:var(--ink)}
.demo-opts button[data-state="ok"]{border-color:var(--acc); background:var(--acc-soft)}
.demo-opts button[data-state="bad"]{border-color:var(--red); background:var(--red-soft)}
.onb-opt{padding:14px 16px; border-radius:14px; border:1.5px solid var(--line2); background:var(--bg); display:flex; justify-content:space-between; align-items:center; cursor:pointer; gap:10px; width:100%; color:var(--ink)}
.onb-opt[aria-pressed="true"]{border-color:var(--acc); background:var(--acc-soft)}
.onb-opt b{font:600 15px 'Space Grotesk'} .onb-opt span{font:500 12px 'JetBrains Mono'; color:var(--ink3)}
.steps{display:flex; gap:6px} .steps i{flex:1; height:5px; border-radius:99px; background:var(--line); display:block} .steps i.on{background:var(--acc-bg)}

/* ---------- dock móvil ---------- */
.dock{display:none}
@media (min-width: 821px){ .mob-only{display:none !important} }

/* ---------- modales (también los usa el panel de admin) ---------- */
.modal-overlay{position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:16px; z-index:60}
.modal-box{background:var(--card); border:1px solid var(--line2); border-radius:20px; padding:20px; max-width:420px; width:100%; box-shadow:0 20px 50px -20px var(--shadow); display:flex; flex-direction:column; gap:14px}
.modal-box p{margin:0; line-height:1.5}
.row{display:flex; gap:8px; align-items:center}
.between{justify-content:space-between}
.stack{display:flex; flex-direction:column; gap:10px}
.card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px}
.card.empty{color:var(--ink3); text-align:center}
/* sin animación de entrada cuando solo cambia algo dentro de la misma pantalla */
main.still .screen{animation:none}
/* grupos de opciones del simulacro */
.opt-group{display:flex; flex-direction:column; gap:10px; padding:16px 18px; border:1px solid var(--line); border-radius:18px; background:var(--card)}
.opt-label{font:600 15px 'Space Grotesk'; color:var(--ink)}
.opt-hint{margin:0; font:400 13px/1.45 'Space Grotesk'; color:var(--ink3)}
/* el pie va siempre al final de la página y centrado */
#app{min-height:100vh; display:flex; flex-direction:column}
#app > main{width:100%; flex:1 0 auto}
.footer{width:100%; max-width:1280px; margin:0 auto; padding:20px 32px 32px; border-top:1px solid var(--line); text-align:center; font:400 13px 'Space Grotesk'; color:var(--ink3)}
/* botones grandes para pasar de un tema a otro */
.back-btn{align-self:flex-start; text-align:left; padding:10px 14px; border-radius:12px; border:1px solid var(--line2); background:var(--card); color:var(--ink2); font:500 14px/1.35 'Space Grotesk'; cursor:pointer}
.back-btn:hover{border-color:var(--acc); color:var(--ink)}
.topic-nav{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:8px}
.topic-nav-btn{display:flex; flex-direction:column; gap:6px; align-items:flex-start; text-align:left; padding:18px 20px; border-radius:18px; border:1px solid var(--line2); background:var(--card); color:var(--ink); cursor:pointer; min-height:110px; transition:border-color .15s, background .15s}
.topic-nav-btn:hover{border-color:var(--acc); background:var(--card2)}
.topic-nav-btn.next{align-items:flex-end; text-align:right}
.topic-nav-btn .dir{font:600 15px 'Space Grotesk'; color:var(--acc)}
.topic-nav-btn .code{font:700 22px 'JetBrains Mono'}
.topic-nav-btn .txt{font:400 14px/1.4 'Space Grotesk'; color:var(--ink2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
body.admin-wide main{max-width:1280px}

/* ---------- responsive ---------- */
@media (max-width: 1100px){
  .nav button{padding:9px 10px}
  .lvl-meta{display:none}
}
@media (max-width: 900px){
  .home-grid, .run-grid{grid-template-columns:minmax(0,1fr)}
  .topic-items{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dbars{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 820px){
  .topbar{height:60px; padding:0 16px; gap:10px}
  .nav, .desk-only{display:none !important}
  main{padding:16px 16px 24px}
  .footer{padding:18px 16px 112px}
  body.focus-mode .footer{padding-bottom:24px}
  .topic-nav{grid-template-columns:1fr}
  .topic-nav-btn.next{align-items:flex-start; text-align:left}
  body.focus-mode main{padding-bottom:30px}
  .h1, .hero-title{font-size:27px; line-height:1.1}
  .h2{font-size:21px}
  .qstem{font-size:18px}
  .dock{display:grid; position:fixed; left:16px; right:16px; bottom:max(16px, env(safe-area-inset-bottom)); height:66px; z-index:35; background:var(--dock); border:1px solid var(--line2); border-radius:24px; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:center; box-shadow:0 12px 30px -10px var(--shadow)}
  body.focus-mode .dock{display:none}
  .dock button{display:flex; flex-direction:column; align-items:center; gap:4px; background:none; border:none; cursor:pointer; font:500 10px 'Space Grotesk'; color:var(--ink3); padding:0}
  .dock button[aria-current="page"]{color:var(--acc)}
  .dock .ic{width:20px; height:20px; border:1.6px solid var(--ink4); display:block}
  .dock button[aria-current="page"] .ic{background:var(--acc-bg); border-color:var(--acc-bg)}
  .dock .play .ic{width:46px; height:46px; border-radius:16px; margin-top:-26px; background:var(--acc-bg); border-color:var(--acc-bg); color:var(--on-acc); display:flex; align-items:center; justify-content:center; font:700 18px 'Space Grotesk'}
  .auth-left, .auth-right{padding:28px 22px}
  .auth-right{background:var(--bg)}
  .auth-hero{font-size:36px}
  .auth-controls{top:14px; right:14px}
  .demo-opts{grid-template-columns:1fr}
  .len-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topic-items{grid-template-columns:minmax(0,1fr)}
  .dbars{grid-template-columns:minmax(0,1fr)}
  .flash{min-height:430px}
  .flash .front{font-size:30px}
  .result-pct{font-size:64px}
  .mist-body{padding-left:16px}
  .qmap{grid-template-columns:repeat(12,1fr)}
  .menu{top:52px}
  .heat{height:150px}
}
@media (max-width: 420px){
  .dom-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rate button{padding:12px 8px}
}