/* =====================================================================
   EXAMEN MENTAL — hoja de estilos
   CSS puro. Sin frameworks, sin compilación.
   ===================================================================== */

/* ---------- TOKENS ---------- */
:root{
  --bg:#f6f7f9;
  --bg-soft:#eef0f4;
  --surface:#ffffff;
  --surface-2:#fbfbfd;
  --surface-3:#f2f3f7;
  --border:#e5e7ec;
  --border-strong:#d6d9e0;
  --text:#12141a;
  --text-2:#4c5360;
  --text-3:#858c9a;
  --accent:#5b5bd6;
  --accent-2:#7a5af8;
  --accent-soft:#ecebfe;
  --accent-ink:#4a3fc4;
  --ok:#1a9c62;
  --ok-soft:#e3f7ee;
  --bad:#d92d4b;
  --bad-soft:#fdeaee;
  --warn:#c77700;
  --warn-soft:#fff3e0;
  --shadow-1:0 1px 2px rgba(16,20,30,.05), 0 1px 3px rgba(16,20,30,.05);
  --shadow-2:0 2px 6px rgba(16,20,30,.06), 0 12px 28px -12px rgba(16,20,30,.16);
  --shadow-3:0 8px 20px rgba(16,20,30,.10), 0 30px 60px -20px rgba(16,20,30,.25);
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px;
  --sidebar-w:274px;
  --ease:cubic-bezier(.22,.9,.28,1);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0b0d12;
  --bg-soft:#0f1218;
  --surface:#151922;
  --surface-2:#1a1f2a;
  --surface-3:#212734;
  --border:#252b37;
  --border-strong:#333a49;
  --text:#eef0f5;
  --text-2:#a7aebd;
  --text-3:#727a8b;
  --accent:#8b8bf5;
  --accent-2:#a78bfa;
  --accent-soft:#22243d;
  --accent-ink:#c4c2ff;
  --ok:#3ddb96;
  --ok-soft:#10291f;
  --bad:#ff7a90;
  --bad-soft:#2c1520;
  --warn:#ffb547;
  --warn-soft:#2b2010;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 2px 8px rgba(0,0,0,.4), 0 16px 32px -16px rgba(0,0,0,.6);
  --shadow-3:0 10px 30px rgba(0,0,0,.5), 0 40px 70px -30px rgba(0,0,0,.7);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background-color .35s var(--ease), color .35s var(--ease);
  padding-bottom:env(safe-area-inset-bottom);
}
h1,h2,h3,h4{margin:0; letter-spacing:-.02em; line-height:1.2; font-weight:700}
p{margin:0}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}
input{font:inherit}
kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px;
  background:var(--surface-3); border:1px solid var(--border); border-radius:6px;
  padding:1px 6px; color:var(--text-3);
}
.hidden{display:none !important}
::selection{background:var(--accent-soft); color:var(--accent-ink)}

/* ---------- SIDEBAR ---------- */
.sidebar{
  position:fixed; inset:0 auto 0 0; width:var(--sidebar-w);
  background:var(--surface); border-right:1px solid var(--border);
  padding:22px 16px 16px; display:flex; flex-direction:column; gap:18px; z-index:40;
  transition:background-color .35s var(--ease), border-color .35s var(--ease);
}
.brand{display:flex; align-items:center; gap:12px; padding:0 6px}
.brand-mark{
  width:42px; height:42px; flex:none; display:grid; place-items:center; font-size:21px;
  border-radius:13px; background:linear-gradient(140deg,var(--accent),var(--accent-2));
  box-shadow:0 6px 16px -6px var(--accent);
}
.brand-mark.sm{width:32px;height:32px;font-size:17px;border-radius:10px}
.brand-text{display:flex; flex-direction:column; min-width:0}
.brand-text strong{font-size:15.5px; letter-spacing:-.02em}
.brand-text span{font-size:11.5px; color:var(--text-3); letter-spacing:.08em; font-weight:600}

.search-trigger{
  display:flex; align-items:center; gap:9px; width:100%; padding:10px 12px;
  border-radius:var(--r-sm); background:var(--surface-3); color:var(--text-3);
  border:1px solid transparent; font-size:14px; transition:all .2s var(--ease);
}
.search-trigger:hover{border-color:var(--border-strong); color:var(--text-2)}
.search-trigger svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.search-trigger span{flex:1; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.side-nav{display:flex; flex-direction:column; gap:2px; overflow-y:auto; flex:1}
.nav-item{
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:11px;
  font-size:14.5px; font-weight:500; color:var(--text-2); text-align:left;
  transition:background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.nav-item .ico{font-size:16px; width:20px; text-align:center}
.nav-item:hover{background:var(--surface-3); color:var(--text)}
.nav-item:active{transform:scale(.98)}
.nav-item.active{background:var(--accent-soft); color:var(--accent-ink); font-weight:650}

.side-foot{display:flex; flex-direction:column; gap:12px; padding-top:12px; border-top:1px solid var(--border)}
.theme-toggle{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:11px;
  background:var(--surface-3); font-size:13.5px; font-weight:550; color:var(--text-2);
  transition:all .2s var(--ease);
}
.theme-toggle:hover{background:var(--border); color:var(--text)}
.side-note{font-size:11px; line-height:1.45; color:var(--text-3); padding:0 4px}
.side-note em{color:var(--text-2)}

/* ---------- TOPBAR ---------- */
.topbar{display:none}
.icon-btn{
  width:38px; height:38px; display:grid; place-items:center; border-radius:11px;
  background:var(--surface-3); color:var(--text-2); transition:all .2s var(--ease);
}
.icon-btn:hover{background:var(--border); color:var(--text)}
.icon-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* ---------- MAIN / VIEWS ---------- */
.main{margin-left:var(--sidebar-w); padding:38px 40px 90px; max-width:1180px}
.view{display:none}
.view.active{display:block; animation:viewIn .42s var(--ease) both}
@keyframes viewIn{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}

.view-head{margin-bottom:26px}
.view-head h1{font-size:30px; margin-bottom:6px}
.view-head p{color:var(--text-2); font-size:15px}
.section-title{font-size:13px; text-transform:uppercase; letter-spacing:.10em; color:var(--text-3); margin:30px 0 12px; font-weight:700}

/* ---------- HERO ---------- */
.hero{
  position:relative; overflow:hidden; padding:42px 38px; border-radius:var(--r-xl);
  background:
    radial-gradient(120% 140% at 88% -10%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%),
    radial-gradient(100% 120% at 8% 110%, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 60%),
    var(--surface);
  border:1px solid var(--border); box-shadow:var(--shadow-2); margin-bottom:26px;
}
.eyebrow{font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:10px}
.hero-title{font-size:clamp(30px,5.4vw,50px); letter-spacing:-.045em; font-weight:800; line-height:1.02}
.hero-sub{margin-top:10px; font-size:17px; color:var(--text-2); max-width:46ch}
.hero-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px}
.chip{
  padding:5px 13px; border-radius:999px; font-size:12.5px; font-weight:700; letter-spacing:.04em;
  background:var(--accent-soft); color:var(--accent-ink); border:1px solid transparent;
}
.chip.ghost{background:transparent; border-color:var(--border-strong); color:var(--text-3); font-weight:600}

/* ---------- STATS ---------- */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:12px}
.stat{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  padding:16px 18px; box-shadow:var(--shadow-1); transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.stat:hover{transform:translateY(-2px); box-shadow:var(--shadow-2)}
.stat .k{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3); font-weight:700}
.stat .v{font-size:29px; font-weight:800; letter-spacing:-.035em; margin-top:4px; font-variant-numeric:tabular-nums}
.stat .s{font-size:12px; color:var(--text-3)}
.stat.accent .v{color:var(--accent)}
.stat.ok .v{color:var(--ok)}
.stat.bad .v{color:var(--bad)}
.stat.warn .v{color:var(--warn)}

/* ---------- TILES ---------- */
.card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:14px}
.tile{
  display:flex; align-items:center; gap:14px; text-align:left; padding:18px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-1); transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.tile:hover{transform:translateY(-3px); box-shadow:var(--shadow-2); border-color:var(--border-strong)}
.tile:active{transform:translateY(-1px) scale(.99)}
.tile-ico{
  width:46px; height:46px; flex:none; display:grid; place-items:center; font-size:22px;
  border-radius:14px; background:var(--surface-3);
}
.tile-body{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.tile-body strong{font-size:15.5px; letter-spacing:-.015em}
.tile-body small{font-size:12.5px; color:var(--text-3); line-height:1.4}
.tile-arrow{color:var(--text-3); font-size:17px; transition:transform .25s var(--ease), color .25s var(--ease)}
.tile:hover .tile-arrow{transform:translateX(4px); color:var(--accent)}

.note-card{
  margin-top:26px; padding:18px 20px; border-radius:var(--r-md);
  background:var(--surface-2); border:1px dashed var(--border-strong);
}
.note-card strong{display:block; font-size:13.5px; margin-bottom:5px}
.note-card p{font-size:13.5px; color:var(--text-2)}

/* ---------- BOTONES ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:12px; font-size:14.5px; font-weight:600;
  background:var(--surface); border:1px solid var(--border-strong); color:var(--text);
  transition:transform .16s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease), opacity .2s;
}
.btn:hover{background:var(--surface-3)}
.btn:active{transform:scale(.97)}
.btn.primary{
  background:linear-gradient(140deg,var(--accent),var(--accent-2)); color:#fff; border-color:transparent;
  box-shadow:0 6px 18px -8px var(--accent);
}
.btn.primary:hover{filter:brightness(1.07)}
.btn.ghost{background:transparent; border-color:var(--border-strong); color:var(--text-2)}
.btn.danger{background:var(--bad-soft); color:var(--bad); border-color:transparent}
.btn.big{padding:14px 30px; font-size:16px; border-radius:14px; margin-top:26px}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none}
.btn-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}

/* ---------- OPCIONES (chips selectores) ---------- */
.opt-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px}
.opt-grid.narrow{grid-template-columns:repeat(auto-fill,minmax(172px,1fr))}
.opt{
  padding:14px; border-radius:var(--r-md); background:var(--surface);
  border:1.5px solid var(--border); text-align:center; font-weight:600; font-size:14.5px;
  transition:all .2s var(--ease);
}
.opt small{display:block; font-weight:500; font-size:11.5px; color:var(--text-3); margin-top:2px}
.opt:hover{border-color:var(--border-strong); transform:translateY(-2px)}
.opt.selected{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink); box-shadow:0 4px 14px -8px var(--accent)}
.opt.selected small{color:var(--accent-ink); opacity:.75}
.opt:disabled{opacity:.4; cursor:not-allowed}

/* ---------- TABS ---------- */
.tabs{display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:20px; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:none; padding:9px 17px; border-radius:999px; font-size:14px; font-weight:600;
  background:var(--surface); border:1px solid var(--border); color:var(--text-2);
  transition:all .2s var(--ease); white-space:nowrap;
}
.tab:hover{border-color:var(--border-strong); color:var(--text)}
.tab.active{background:var(--text); color:var(--bg); border-color:var(--text)}

/* ---------- GUÍA ---------- */
.guia-content{animation:viewIn .35s var(--ease) both}
.bloque-head{
  display:flex; align-items:center; gap:14px; padding:20px 22px; border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--accent-soft),transparent 70%), var(--surface);
  border:1px solid var(--border); margin-bottom:18px;
}
.bloque-sigla{
  font-size:23px; font-weight:800; letter-spacing:.04em; color:#fff; width:60px; height:60px; flex:none;
  display:grid; place-items:center; border-radius:18px;
  background:linear-gradient(140deg,var(--accent),var(--accent-2));
}
.bloque-head h2{font-size:21px}
.bloque-head p{font-size:13.5px; color:var(--text-2); margin-top:2px}

.acc{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); margin-bottom:11px; overflow:hidden; box-shadow:var(--shadow-1)}
.acc-head{
  width:100%; display:flex; align-items:center; gap:12px; padding:15px 18px; text-align:left;
  font-size:16px; font-weight:650; transition:background .2s var(--ease);
}
.acc-head:hover{background:var(--surface-3)}
.acc-head .caret{margin-left:auto; color:var(--text-3); transition:transform .3s var(--ease); font-size:13px}
.acc.open .acc-head .caret{transform:rotate(90deg)}
.acc-head .tag{
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 8px; border-radius:6px; background:var(--surface-3); color:var(--text-3);
}
.acc-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .38s var(--ease)}
.acc.open .acc-body{grid-template-rows:1fr}
.acc-body-inner{overflow:hidden}
.acc-pad{padding:2px 18px 18px; border-top:1px solid var(--border)}

.lead{font-size:14.5px; color:var(--text-2); padding:14px 0 4px; line-height:1.6}
.subhead{font-size:12px; text-transform:uppercase; letter-spacing:.09em; color:var(--text-3); font-weight:700; margin:18px 0 9px}
.term-list{display:grid; gap:9px}
.term{
  padding:12px 14px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border);
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.term:hover{border-color:var(--border-strong)}
.term b{font-size:14.5px; letter-spacing:-.01em}
.term .def{font-size:14px; color:var(--text-2); margin-top:2px}
.term .ej{
  font-size:13px; color:var(--text-2); margin-top:7px; padding:7px 10px; border-radius:8px;
  background:var(--accent-soft); border-left:3px solid var(--accent);
}
.term .ej b{color:var(--accent-ink); font-size:12px; text-transform:uppercase; letter-spacing:.05em}
.term ul{margin:7px 0 0; padding-left:19px; font-size:13.5px; color:var(--text-2)}
.term ul li{margin:2px 0}
.term .src{font-size:11px; color:var(--text-3); margin-top:6px}

.diff-box{
  margin-top:16px; padding:14px 16px; border-radius:12px;
  background:var(--warn-soft); border:1px solid color-mix(in srgb,var(--warn) 28%, transparent);
}
.diff-box .subhead{margin-top:0; color:var(--warn)}
.diff-box ul{margin:0; padding-left:19px; font-size:13.5px; color:var(--text-2)}
.diff-box li{margin:4px 0}
.diff-box li b{color:var(--text)}

/* ---------- QUIZ ---------- */
.quiz-top{
  position:sticky; top:0; z-index:20; padding:14px 0 12px; margin-bottom:6px;
  background:linear-gradient(var(--bg) 72%, transparent);
}
.quiz-meta{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px}
.quiz-meta .qcount{font-size:13.5px; font-weight:650; color:var(--text-2)}
.quiz-meta .spacer{flex:1}
.badge{
  padding:4px 11px; border-radius:999px; font-size:11.5px; font-weight:700; letter-spacing:.03em;
  background:var(--surface-3); color:var(--text-2); text-transform:capitalize;
}
.badge.facil{background:var(--ok-soft); color:var(--ok)}
.badge.media{background:var(--warn-soft); color:var(--warn)}
.badge.dificil{background:var(--bad-soft); color:var(--bad)}
.timer{
  font-variant-numeric:tabular-nums; font-weight:800; font-size:16px; letter-spacing:-.02em;
  padding:5px 13px; border-radius:10px; background:var(--surface-3);
}
.timer.warn{background:var(--warn-soft); color:var(--warn)}
.timer.crit{background:var(--bad-soft); color:var(--bad); animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.55}}

.progress{height:7px; border-radius:99px; background:var(--surface-3); overflow:hidden}
.progress > i{
  display:block; height:100%; border-radius:99px; width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width .5s var(--ease);
}

.qcard{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:26px; box-shadow:var(--shadow-2); animation:qIn .38s var(--ease) both;
}
@keyframes qIn{from{opacity:0; transform:translateX(22px) scale(.99)} to{opacity:1; transform:none}}
.qcard.out{animation:qOut .2s var(--ease) both}
@keyframes qOut{to{opacity:0; transform:translateX(-18px)}}
.qcat{font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:8px}
.qtext{font-size:20px; font-weight:650; letter-spacing:-.02em; line-height:1.35; margin-bottom:20px}

.answers{display:grid; gap:10px}
.ans{
  display:flex; align-items:flex-start; gap:13px; padding:14px 16px; text-align:left;
  border-radius:14px; background:var(--surface-2); border:1.5px solid var(--border);
  font-size:15px; line-height:1.45; transition:all .2s var(--ease);
}
.ans:not(:disabled):hover{border-color:var(--accent); background:var(--accent-soft); transform:translateX(3px)}
.ans:not(:disabled):active{transform:scale(.99)}
.ans .letter{
  width:26px; height:26px; flex:none; display:grid; place-items:center; border-radius:8px;
  background:var(--surface-3); font-size:12.5px; font-weight:800; color:var(--text-3);
  transition:all .2s var(--ease);
}
.ans:not(:disabled):hover .letter{background:var(--accent); color:#fff}
.ans.picked{border-color:var(--accent); background:var(--accent-soft)}
.ans.picked .letter{background:var(--accent); color:#fff}
.ans.correct{border-color:var(--ok); background:var(--ok-soft); animation:popIn .32s var(--ease)}
.ans.correct .letter{background:var(--ok); color:#fff}
.ans.wrong{border-color:var(--bad); background:var(--bad-soft)}
.ans.wrong .letter{background:var(--bad); color:#fff}
.ans:disabled{cursor:default; opacity:1}
.ans.dim{opacity:.5}
@keyframes popIn{0%{transform:scale(.97)}55%{transform:scale(1.015)}100%{transform:scale(1)}}

.feedback{margin-top:18px; border-radius:14px; padding:16px 18px; animation:fbIn .3s var(--ease) both}
@keyframes fbIn{from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none}}
.feedback.ok{background:var(--ok-soft); border:1px solid color-mix(in srgb,var(--ok) 30%, transparent)}
.feedback.bad{background:var(--bad-soft); border:1px solid color-mix(in srgb,var(--bad) 30%, transparent)}
.feedback .fb-title{font-size:15.5px; font-weight:750; display:flex; align-items:center; gap:8px}
.feedback.ok .fb-title{color:var(--ok)}
.feedback.bad .fb-title{color:var(--bad)}
.feedback .fb-correct{font-size:14px; margin-top:9px}
.feedback .fb-correct b{color:var(--text)}
.feedback .fb-exp{font-size:14px; color:var(--text-2); margin-top:7px; line-height:1.55}
.feedback .fb-con{font-size:11.5px; color:var(--text-3); margin-top:9px; text-transform:uppercase; letter-spacing:.06em; font-weight:700}

.nav-q{display:flex; gap:10px; margin-top:20px; flex-wrap:wrap}
.nav-q .spacer{flex:1}

/* ---------- RESULTADOS ---------- */
.result{
  text-align:center; padding:38px 26px; border-radius:var(--r-xl);
  background:
    radial-gradient(110% 130% at 50% -20%, color-mix(in srgb,var(--accent) 22%, transparent), transparent 60%),
    var(--surface);
  border:1px solid var(--border); box-shadow:var(--shadow-2); animation:viewIn .5s var(--ease) both;
}
.result h2{font-size:14px; text-transform:uppercase; letter-spacing:.12em; color:var(--text-3)}
.ring{width:186px; height:186px; margin:20px auto 8px; position:relative}
.ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.ring circle{fill:none; stroke-width:13; stroke-linecap:round}
.ring .bgc{stroke:var(--surface-3)}
.ring .fgc{stroke:url(#gradR); transition:stroke-dashoffset 1.2s var(--ease)}
.ring .inner{position:absolute; inset:0; display:grid; place-content:center; gap:0}
.ring .pct{font-size:42px; font-weight:800; letter-spacing:-.045em; font-variant-numeric:tabular-nums}
.ring .frac{font-size:14px; color:var(--text-3); font-weight:600}
.verdict{font-size:23px; font-weight:750; letter-spacing:-.025em; margin-top:6px}
.verdict.excelente{color:var(--ok)} .verdict.bien{color:var(--accent)}
.verdict.regular{color:var(--warn)} .verdict.bajo{color:var(--bad)}
.result-stats{display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:22px}
.rs{padding:12px 20px; border-radius:14px; background:var(--surface-2); border:1px solid var(--border); min-width:104px}
.rs .v{font-size:23px; font-weight:800; font-variant-numeric:tabular-nums}
.rs .k{font-size:11.5px; color:var(--text-3); text-transform:uppercase; letter-spacing:.06em; font-weight:700}
.rs.ok .v{color:var(--ok)} .rs.bad .v{color:var(--bad)}

.panel{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:22px; box-shadow:var(--shadow-1); margin-top:18px;
}
.panel h3{font-size:17px; margin-bottom:14px}
.review-item{padding:14px 0; border-bottom:1px solid var(--border)}
.review-item:last-child{border-bottom:0; padding-bottom:0}
.review-item .rq{font-size:14.5px; font-weight:600; margin-bottom:7px}
.review-item .ra{font-size:13.5px; margin:3px 0}
.review-item .ra.bad{color:var(--bad)}
.review-item .ra.ok{color:var(--ok)}
.review-item .re{font-size:13px; color:var(--text-2); margin-top:6px; padding-left:11px; border-left:2px solid var(--border-strong)}

/* ---------- BARRAS ---------- */
.bar-row{margin:12px 0}
.bar-row .bl{display:flex; justify-content:space-between; font-size:13.5px; margin-bottom:5px; gap:12px}
.bar-row .bl b{font-weight:600}
.bar-row .bl span{color:var(--text-3); font-variant-numeric:tabular-nums; flex:none}
.bar{height:9px; border-radius:99px; background:var(--surface-3); overflow:hidden}
.bar > i{display:block; height:100%; border-radius:99px; width:0; transition:width 1s var(--ease)}
.bar > i.g{background:linear-gradient(90deg,var(--ok),color-mix(in srgb,var(--ok) 55%, var(--accent)))}
.bar > i.y{background:linear-gradient(90deg,var(--warn),color-mix(in srgb,var(--warn) 60%, var(--accent)))}
.bar > i.r{background:linear-gradient(90deg,var(--bad),color-mix(in srgb,var(--bad) 60%, var(--accent-2)))}
.bar > i.a{background:linear-gradient(90deg,var(--accent),var(--accent-2))}

/* ---------- FLASHCARDS ---------- */
.fc-filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px}
.fc-wrap{max-width:660px; margin:0 auto}
.fc-count{text-align:center; font-size:13.5px; color:var(--text-3); margin-bottom:12px; font-weight:600}
.flashcard{perspective:1600px; height:330px; margin-bottom:18px; cursor:pointer}
.fc-inner{
  position:relative; width:100%; height:100%; transition:transform .62s var(--ease);
  transform-style:preserve-3d;
}
.flashcard.flipped .fc-inner{transform:rotateY(180deg)}
.fc-face{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:34px 30px; border-radius:var(--r-xl); border:1px solid var(--border);
  background:var(--surface); box-shadow:var(--shadow-2); overflow:auto;
}
.fc-face.back{
  transform:rotateY(180deg);
  background:linear-gradient(155deg,var(--accent-soft),var(--surface) 68%);
}
.fc-cat{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:14px}
.fc-q{font-size:24px; font-weight:700; letter-spacing:-.025em; line-height:1.28}
.fc-a{font-size:17px; line-height:1.55; color:var(--text)}
.fc-a .extra{display:block; font-size:14px; color:var(--text-2); margin-top:10px}
.fc-hint{position:absolute; bottom:16px; left:0; right:0; font-size:11.5px; color:var(--text-3); letter-spacing:.04em}
.fc-hard-flag{position:absolute; top:14px; right:16px; font-size:15px}
.fc-controls{display:flex; gap:9px; justify-content:center; flex-wrap:wrap}

/* ---------- BUSCADOR ---------- */
.search-overlay{
  position:fixed; inset:0; z-index:100; background:rgba(10,12,18,.5);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  display:flex; justify-content:center; padding:70px 16px 16px; animation:fadeIn .2s var(--ease)
}
.search-overlay[hidden]{display:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.search-panel{
  width:100%; max-width:660px; max-height:100%; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-3); overflow:hidden; animation:sIn .28s var(--ease) both;
}
@keyframes sIn{from{opacity:0; transform:translateY(-16px) scale(.985)}to{opacity:1; transform:none}}
.search-bar{display:flex; align-items:center; gap:11px; padding:13px 15px; border-bottom:1px solid var(--border)}
.search-bar svg{width:19px;height:19px;flex:none;fill:none;stroke:var(--text-3);stroke-width:2;stroke-linecap:round}
.search-bar input{
  flex:1; border:0; background:none; outline:none; font-size:17px; color:var(--text); min-width:0;
}
.search-bar input::placeholder{color:var(--text-3)}
.search-suggest{display:flex; gap:7px; flex-wrap:wrap; padding:12px 15px; border-bottom:1px solid var(--border)}
.sg{
  padding:5px 11px; border-radius:999px; font-size:12.5px; background:var(--surface-3);
  color:var(--text-2); transition:all .18s var(--ease); font-weight:550;
}
.sg:hover{background:var(--accent-soft); color:var(--accent-ink)}
.search-results{overflow-y:auto; padding:8px 8px 14px; flex:1}
.sr-group{margin-top:10px}
.sr-group > h4{
  font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--text-3);
  padding:6px 10px; font-weight:700;
}
.sr-item{
  display:block; width:100%; text-align:left; padding:10px 12px; border-radius:11px;
  transition:background .16s var(--ease);
}
.sr-item:hover{background:var(--surface-3)}
.sr-item b{font-size:14.5px}
.sr-item mark{background:color-mix(in srgb,var(--accent) 34%, transparent); color:inherit; border-radius:3px; padding:0 2px}
.sr-item p{font-size:13px; color:var(--text-2); margin-top:2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.sr-empty{padding:32px 16px; text-align:center; color:var(--text-3); font-size:14px}

/* ---------- MENSAJE SORPRESA ---------- */
.egg{
  margin:10px; padding:30px 26px 26px; border-radius:var(--r-lg); text-align:center;
  background:
    radial-gradient(120% 130% at 50% -20%, color-mix(in srgb, var(--accent-2) 26%, transparent), transparent 62%),
    linear-gradient(160deg, var(--accent-soft), var(--surface-2) 70%);
  border:1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  animation:eggIn .55s var(--ease) both;
}
@keyframes eggIn{from{opacity:0; transform:translateY(16px) scale(.97)} to{opacity:1; transform:none}}
.egg-hearts{display:flex; justify-content:center; gap:10px; margin-bottom:14px}
.egg-hearts span{font-size:26px; display:inline-block; animation:latido 1.7s var(--ease) infinite}
.egg-hearts span:nth-child(2){animation-delay:.22s; font-size:32px}
.egg-hearts span:nth-child(3){animation-delay:.44s}
@keyframes latido{0%,100%{transform:scale(1)}18%{transform:scale(1.22)}36%{transform:scale(1)}54%{transform:scale(1.13)}}
.egg h3{
  font-size:23px; letter-spacing:-.03em; margin-bottom:14px;
  background:linear-gradient(100deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.egg p{
  font-size:15px; line-height:1.65; color:var(--text-2); max-width:44ch; margin:0 auto 11px;
  animation:eggLinea .6s var(--ease) both;
}
.egg p:nth-of-type(1){animation-delay:.10s}
.egg p:nth-of-type(2){animation-delay:.20s}
.egg p:nth-of-type(3){animation-delay:.30s}
.egg p:nth-of-type(4){animation-delay:.40s}
.egg p:nth-of-type(5){animation-delay:.50s; color:var(--text); font-weight:600}
@keyframes eggLinea{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.egg-firma{
  margin-top:18px; font-size:17px; font-weight:700; letter-spacing:-.02em; color:var(--accent-ink);
  animation:eggLinea .6s var(--ease) .62s both;
}
.egg-pie{
  margin-top:16px; padding-top:14px; border-top:1px dashed color-mix(in srgb, var(--accent) 30%, transparent);
  font-size:12.5px; color:var(--text-3); animation:eggLinea .6s var(--ease) .74s both;
}
.cf.corazon{
  width:auto; height:auto; background:none !important; border-radius:0;
  line-height:1; filter:drop-shadow(0 2px 6px rgba(0,0,0,.18));
}

/* ---------- EMPTY ---------- */
.empty{
  text-align:center; padding:56px 24px; border-radius:var(--r-lg);
  background:var(--surface); border:1px dashed var(--border-strong);
}
.empty .e-ico{font-size:44px; margin-bottom:12px}
.empty h3{font-size:19px; margin-bottom:6px}
.empty p{color:var(--text-2); font-size:14.5px; max-width:44ch; margin:0 auto}

/* ---------- CONFETI ---------- */
.confetti{position:fixed; inset:0; pointer-events:none; z-index:200; overflow:hidden}
.cf{position:absolute; width:9px; height:15px; border-radius:2px; opacity:0; animation:cfFall linear forwards}
@keyframes cfFall{
  0%{opacity:1; transform:translateY(-12vh) rotate(0deg)}
  100%{opacity:0; transform:translateY(108vh) rotate(680deg)}
}

/* ---------- TOAST ---------- */
.toast-wrap{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:150; display:flex; flex-direction:column; gap:8px; align-items:center}
.toast{
  padding:11px 20px; border-radius:999px; background:var(--text); color:var(--bg);
  font-size:13.5px; font-weight:600; box-shadow:var(--shadow-3); animation:tIn .3s var(--ease) both;
}
@keyframes tIn{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
.toast.out{animation:tOut .3s var(--ease) forwards}
@keyframes tOut{to{opacity:0; transform:translateY(10px)}}

/* ---------- BOTTOM NAV ---------- */
.bottom-nav{display:none}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1024px){
  :root{--sidebar-w:230px}
  .main{padding:32px 26px 90px}
}
@media (max-width:860px){
  .sidebar{display:none}
  .topbar{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    position:sticky; top:0; z-index:50; padding:11px 16px;
    padding-top:calc(11px + env(safe-area-inset-top));
    background:color-mix(in srgb,var(--bg) 86%, transparent);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
  }
  .tb-brand{display:flex; align-items:center; gap:9px; font-size:15.5px; letter-spacing:-.02em}
  .tb-actions{display:flex; gap:8px}
  .main{margin-left:0; padding:20px 16px 108px; max-width:100%}
  .hero{padding:30px 22px; border-radius:var(--r-lg)}
  .hero-sub{font-size:15.5px}
  .view-head h1{font-size:25px}
  .qcard{padding:20px 18px; border-radius:var(--r-md)}
  .qtext{font-size:18px}
  .ans{font-size:14.5px; padding:13px 14px}
  .card-grid{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .flashcard{height:310px}
  .fc-q{font-size:21px}
  .search-overlay{padding:14px 10px}
  .bottom-nav{
    display:grid; grid-template-columns:repeat(5,1fr); position:fixed; bottom:0; left:0; right:0; z-index:60;
    background:color-mix(in srgb,var(--surface) 92%, transparent);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-top:1px solid var(--border);
    padding:7px 4px calc(7px + env(safe-area-inset-bottom));
  }
  .bn-item{
    display:flex; flex-direction:column; align-items:center; gap:2px; padding:5px 2px;
    font-size:10.5px; font-weight:600; color:var(--text-3); border-radius:10px;
    transition:color .2s var(--ease), transform .2s var(--ease);
  }
  .bn-item span{font-size:19px; line-height:1; transition:transform .25s var(--ease)}
  .bn-item.active{color:var(--accent)}
  .bn-item.active span{transform:translateY(-2px) scale(1.12)}
  .bn-item:active{transform:scale(.94)}
}
@media (max-width:420px){
  .stat-grid{grid-template-columns:1fr 1fr}
  .stat .v{font-size:24px}
  .ring{width:158px; height:158px}
  .ring .pct{font-size:35px}
  .result{padding:28px 18px}
  .rs{min-width:88px; padding:10px 14px}
  .opt-grid{grid-template-columns:1fr 1fr}
}

/* ---------- ACCESIBILIDAD ---------- */
:focus-visible{outline:2.5px solid var(--accent); outline-offset:2px; border-radius:8px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}