/* ============ Tokens (paleta de referencia validada, light/dark) ============ */
:root{
  --bg:#ffffff; --surface:#ffffff; --surface2:#f7f7f7; --surface3:#e5e5e5;
  --ink:#3c3c3c; --ink2:#4b4b4b; --muted:#afafaf;
  --line:#e5e5e5; --border:#e5e5e5; --shadow:0 2px 0 #e5e5e5;
  --accent:#58cc02; --accent-strong:#58a700; --accent-soft:#d7ffb8; --accent-ink:#ffffff;
  --good:#58cc02; --good-text:#58a700; --good-soft:#d7ffb8;
  --bad:#ff4b4b;  --bad-text:#ea2b2b;  --bad-soft:#ffdfe0;
  --warn:#ffc800; --warn-soft:#fff5d1;
  --c1:#58cc02; --c2:#1cb0f6; --c3:#ffc800; --c4:#00cd9c; --c5:#ce82ff; --c6:#ff4b4b; --c7:#ff9600; --c8:#2b70c9;
  --gold:#ffc800;
  --radius:16px; --radius-s:10px;
}
:root[data-theme="dark"]{
  --bg:#131f24; --surface:#131f24; --surface2:#202f36; --surface3:#37464f;
  --ink:#f1f7fb; --ink2:#dce6ec; --muted:#52656d;
  --line:#37464f; --border:#37464f; --shadow:0 2px 0 #37464f;
  --accent:#58cc02; --accent-strong:#58a700; --accent-soft:#1f3a12; --accent-ink:#ffffff;
  --good:#58cc02; --good-text:#7bd53b; --good-soft:#1f3a12;
  --bad:#ff4b4b;  --bad-text:#ff9b9b;  --bad-soft:#3a1414;
  --warn:#ffc800; --warn-soft:#332a0e;
  --c1:#58cc02; --c2:#1cb0f6; --c3:#ffc800; --c4:#00cd9c; --c5:#ce82ff; --c6:#ff4b4b; --c7:#ff9600; --c8:#2b70c9;
  --gold:#ffc800;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --bg:#131f24; --surface:#131f24; --surface2:#202f36; --surface3:#37464f;
    --ink:#f1f7fb; --ink2:#dce6ec; --muted:#52656d;
    --line:#37464f; --border:#37464f; --shadow:0 2px 0 #37464f;
    --accent:#58cc02; --accent-strong:#58a700; --accent-soft:#1f3a12; --accent-ink:#ffffff;
    --good:#58cc02; --good-text:#7bd53b; --good-soft:#1f3a12;
    --bad:#ff4b4b;  --bad-text:#ff9b9b;  --bad-soft:#3a1414;
    --warn:#ffc800; --warn-soft:#332a0e;
    --c1:#58cc02; --c2:#1cb0f6; --c3:#ffc800; --c4:#00cd9c; --c5:#ce82ff; --c6:#ff4b4b; --c7:#ff9600; --c8:#2b70c9;
  }
}
/* ============ Base ============ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'duolingo-sans','Nunito','Lato',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; transition:background .3s,color .3s;
}
h1,h2,h3,h4{line-height:1.25; margin:0 0 .4em}
p{margin:.35em 0}
button{font:inherit; cursor:pointer; color:inherit}
input,select{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:6px}
.app{max-width:1120px; margin:0 auto; padding:0 20px 80px}
.hidden{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* ============ Header ============ */
header.top{
  position:sticky; top:0; z-index:50; backdrop-filter:blur(10px);
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px 20px; margin:0 0 22px;
}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.15rem; letter-spacing:-.01em; cursor:pointer; background:none; border:none; padding:4px}
.logo .mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--c5));display:grid;place-items:center;color:#fff;font-size:18px}
.logo small{display:block;font-weight:500;color:var(--muted);font-size:.68rem;letter-spacing:.02em}
.top .spacer{flex:1}
.chip{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:5px 13px; font-size:.86rem; font-weight:600; white-space:nowrap;
}
.chip .icon{font-size:1rem}
.chip.xp b{color:var(--accent)}
.chip.streak b{color:var(--c8)}
.chip.streak{transition:transform .15s, background .2s}
.chip.streak:hover{transform:translateY(-2px); background:var(--surface2)}
.streak-dot{position:absolute; top:-6px; right:-6px; min-width:17px; height:17px; padding:0 4px;
  border-radius:999px; background:var(--bad); color:#fff; font-size:.66rem; font-weight:800;
  display:grid; place-items:center; box-shadow:0 0 0 2px var(--bg); line-height:1}
/* Retos diarios/semanales (misiones) del hub de racha */
.mission{display:flex; align-items:center; gap:10px; padding:9px 10px; border:1px solid var(--line);
  border-radius:12px; margin:7px 0; background:var(--surface)}
.mission.m-ready{border-color:var(--good); background:color-mix(in srgb, var(--good) 10%, var(--surface))}
.mission.m-claimed{opacity:.6}
.mission .m-ico{font-size:1.3rem; width:30px; text-align:center; flex:none}
.mission .m-body{flex:1; min-width:0}
.mission .m-top{display:flex; justify-content:space-between; gap:8px; font-size:.9rem}
.mission .m-xp{color:var(--accent); font-weight:800; flex:none}
.mission .m-sub{font-size:.76rem; color:var(--muted); margin-top:3px}
.mission .m-act{flex:none}
.mission .m-check{font-size:1.1rem}
.mission .m-lock{color:var(--muted)}
.mission .pbar{height:7px; margin:5px 0 0}
.hub-tabs{display:flex; gap:6px; margin:10px 0}
.hub-tabs button{flex:1; padding:8px 6px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface); font-weight:700; font-size:.82rem; cursor:pointer}
.hub-tabs button.on{background:var(--accent); color:#fff; border-color:var(--accent)}
.iconbtn{
  width:38px;height:38px;border-radius:12px;border:1px solid var(--border);
  background:var(--surface); display:grid; place-items:center; font-size:17px;
  transition:transform .15s, background .2s;
}
.iconbtn:hover{transform:translateY(-2px); background:var(--surface2)}
.iconbtn[aria-pressed="false"]{opacity:.45}
.chip.hdr-badge{padding:5px 9px; font-size:1rem}
.more-wrap{position:relative}
.more-menu{position:absolute; right:0; top:calc(100% + 6px); z-index:80; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:6px; min-width:190px; display:flex; flex-direction:column; gap:2px}
.more-item{display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:9px 12px; border:none; background:transparent; border-radius:8px; font-size:.9rem; font-weight:600; color:var(--ink); cursor:pointer}
.more-item:hover{background:var(--surface2)}
.more-item[aria-pressed="false"]{opacity:.55}
/* Nivel + barra XP en header */
.lvlbox{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:4px 14px 4px 6px}
.lvlnum{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--c5));color:#fff;font-weight:800;display:grid;place-items:center;font-size:.85rem}
.lvlbar{width:90px;height:7px;border-radius:99px;background:var(--surface3);overflow:hidden}
.lvlbar i{display:block;height:100%;border-radius:99px;background:var(--accent);transition:width .6s cubic-bezier(.22,1,.36,1)}
.lvlbox small{font-size:.7rem;color:var(--muted);font-weight:600}
/* ============ Hero ============ */
.hero{
  border-radius:20px; padding:28px 30px; margin-bottom:24px;
  background:var(--surface); border:2px solid var(--line);
  color:var(--ink); position:relative; overflow:hidden; animation:fadeUp .5s ease both;
}
.hero h1{font-size:clamp(1.4rem,3.4vw,2rem); margin-bottom:2px; color:var(--ink)}
.hero p{color:var(--ink2); max-width:640px; margin-bottom:16px}
.hero .actions{display:flex; gap:10px; flex-wrap:wrap}
/* ============ Botones ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:14px; padding:11px 20px; font-weight:800; font-size:.95rem;
  background:var(--accent); color:var(--accent-ink);
  box-shadow:0 4px 0 var(--accent-strong);
  transition:transform .12s, box-shadow .12s, background .2s, opacity .2s, filter .15s;
  text-decoration:none;
}
.btn:hover{transform:translateY(-1px); filter:brightness(1.06); box-shadow:0 5px 0 var(--accent-strong)}
.btn:active{transform:translateY(3px); box-shadow:0 1px 0 var(--accent-strong); filter:none}
.btn.ghost{background:var(--surface); color:var(--ink); border:2px solid var(--line); box-shadow:0 4px 0 var(--line)}
.btn.ghost:hover{background:var(--surface2); filter:none; box-shadow:0 5px 0 var(--line)}
.btn.onhero{background:var(--accent); color:#fff}
.btn.good{background:var(--good); box-shadow:0 4px 0 #086108}
.btn.small{padding:7px 14px; font-size:.84rem; border-radius:11px; box-shadow:0 3px 0 var(--accent-strong)}
.btn.small.ghost{box-shadow:0 3px 0 var(--line)}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none}
/* ============ Stats strip (stat tiles) ============ */
.stats-strip{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:26px}
.tile{
  background:var(--surface); border:2px solid var(--line); border-radius:18px;
  padding:14px 16px; animation:fadeUp .5s ease both;
}
.tile .t-label{font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.tile .t-value{font-size:1.55rem; font-weight:800; margin-top:2px}
.tile .t-sub{font-size:.78rem; color:var(--ink2)}
.tile .t-value .unit{font-size:.85rem; font-weight:600; color:var(--ink2)}
/* ============ Secciones ============ */
.section-h{display:flex; align-items:baseline; gap:12px; margin:26px 0 14px}
.section-h h2{font-size:1.2rem; margin:0}
.section-h .line{flex:1; height:1px; background:var(--line)}
.section-h .meta{font-size:.8rem; color:var(--muted); font-weight:600}
/* ============ Grid de módulos ============ */
.mgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px}
.mcard{
  position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px; cursor:pointer; text-align:left;
  transition:transform .18s, box-shadow .22s; animation:fadeUp .45s ease both;
  display:flex; flex-direction:column; gap:8px; min-height:170px;
}
.mcard:hover:not(.locked){transform:translateY(-4px); box-shadow:var(--shadow)}
.mcard .m-top{display:flex; align-items:center; gap:10px}
.mcard .m-ico{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:23px;
  background:color-mix(in srgb, var(--mc,var(--accent)) 16%, var(--surface));
  border:1px solid color-mix(in srgb, var(--mc,var(--accent)) 30%, transparent);
}
.mcard .m-num{font-size:.68rem; font-weight:800; letter-spacing:.08em; color:var(--muted); text-transform:uppercase}
.mcard h3{font-size:1rem; margin:0}
.mcard .m-desc{font-size:.82rem; color:var(--ink2); flex:1}
.mcard .m-foot{display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--muted)}
.mcard .stars{color:var(--gold); letter-spacing:1px; font-size:.9rem}
.mcard .stars .off{color:var(--surface3); -webkit-text-stroke:1px var(--muted)}
.mcard .pbar{flex:1; height:7px; border-radius:99px; background:var(--surface3); overflow:hidden}
.mcard .pbar i{display:block; height:100%; background:var(--mc,var(--accent)); border-radius:99px; transition:width .5s}
.mcard .score-t{font-weight:700; color:var(--ink2)}
.mcard.locked{cursor:not-allowed; opacity:.62}
.mcard.locked .m-ico{filter:grayscale(1)}
.mcard .lock{
  position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%;
  background:var(--surface3); display:grid; place-items:center; font-size:14px;
}
.mcard .done-badge{position:absolute; top:12px; right:12px; width:30px;height:30px;border-radius:50%;
  background:var(--good-soft); color:var(--good-text); display:grid; place-items:center; font-size:15px; font-weight:800}
.mcard .m-type{font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  background:var(--surface2); border-radius:6px; padding:2px 7px; color:var(--ink2)}
/* ============ Vista sesión / preguntas ============ */
.session-top{display:flex; align-items:center; gap:14px; margin-bottom:18px}
.session-top .back{flex:none}
.qprog{flex:1; height:12px; border-radius:99px; background:var(--surface3); overflow:hidden}
.qprog i{display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--c5)); border-radius:99px; transition:width .5s cubic-bezier(.22,1,.36,1)}
.qcount{font-size:.85rem; font-weight:700; color:var(--muted); white-space:nowrap}
.qcard{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:26px; box-shadow:var(--shadow); animation:fadeUp .4s ease both; max-width:820px; margin:0 auto;
}
.qcard .q-topic{display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--accent); background:color-mix(in srgb,var(--accent) 12%, transparent); padding:3px 10px; border-radius:99px; margin-bottom:10px}
.qcard .q-prompt{font-size:1.12rem; font-weight:700; margin-bottom:6px; white-space:pre-line}
.qcard .q-data{
  background:var(--surface2); border:1px dashed var(--line); border-radius:var(--radius-s);
  padding:12px 16px; margin:12px 0; font-size:.95rem;
}
.qcard .q-data b{font-variant-numeric:tabular-nums}
.q-help{font-size:.8rem; color:var(--muted); margin-top:4px}
/* Opciones MC / VF */
.opts{display:grid; gap:10px; margin-top:16px}
.opt{
  text-align:left; padding:13px 16px; border-radius:12px; border:2px solid var(--line);
  background:var(--surface); font-size:.95rem; font-weight:500;
  transition:border-color .15s, background .15s, transform .12s; display:flex; gap:10px; align-items:center;
}
.opt:hover:not(:disabled){border-color:var(--accent); transform:translateX(3px)}
.opt .key{flex:none; width:26px;height:26px;border-radius:8px;background:var(--surface2);display:grid;place-items:center;font-size:.75rem;font-weight:800;color:var(--muted)}
.opt.sel{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%, var(--surface))}
.opt.correct{border-color:var(--good); background:var(--good-soft); animation:pop .35s ease}
.opt.correct .key{background:var(--good); color:#fff}
.opt.wrong{border-color:var(--bad); background:var(--bad-soft); animation:shake .4s ease}
.opt.wrong .key{background:var(--bad); color:#fff}
.opt:disabled{cursor:default}
.tf-row{display:flex; gap:12px; margin-top:16px}
.tf-row .opt{flex:1; justify-content:center; font-weight:700; font-size:1rem}
/* Inputs numéricos / texto */
.answer-row{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; align-items:center}
.answer-row .prefix{font-weight:800; font-size:1.1rem; color:var(--muted)}
.ainput{
  flex:1; min-width:180px; padding:12px 16px; border-radius:12px; border:2px solid var(--line);
  background:var(--surface); font-size:1.05rem; font-variant-numeric:tabular-nums;
}
.ainput:focus{border-color:var(--accent); outline:none}
.ainput.ok{border-color:var(--good); background:var(--good-soft)}
.ainput.err{border-color:var(--bad); background:var(--bad-soft); animation:shake .4s}
/* Relacionar columnas */
.match-wrap{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px}
.match-col{display:flex; flex-direction:column; gap:9px}
.match-col h4{font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin:0}
.mitem{
  padding:10px 13px; border-radius:11px; border:2px solid var(--line); background:var(--surface);
  font-size:.86rem; text-align:left; transition:all .15s; position:relative;
}
.mitem:hover:not(:disabled){border-color:var(--accent)}
.mitem.sel{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%, var(--surface)); transform:scale(1.02)}
.mitem.paired{border-style:solid; font-weight:600}
.mitem .pairdot{position:absolute; top:-8px; right:-6px; min-width:20px; height:20px; padding:0 5px; border-radius:99px;
  color:#fff; font-size:.68rem; font-weight:800; display:grid; place-items:center}
/* Arrastrar */
.drag-pool{display:flex; flex-wrap:wrap; gap:9px; margin:14px 0; min-height:44px; padding:10px; border-radius:var(--radius-s); background:var(--surface2)}
.dragchip{
  padding:8px 13px; border-radius:99px; background:var(--surface); border:2px solid var(--accent);
  font-size:.83rem; font-weight:600; cursor:grab; user-select:none; transition:transform .15s, opacity .2s;
}
.dragchip:active{cursor:grabbing}
.dragchip.sel{background:var(--accent); color:#fff; transform:scale(1.05)}
.dragchip.dragging{opacity:.4}
.dz-grid{display:grid; gap:10px}
.dzone{
  display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px;
  border:2px dashed var(--line); background:var(--surface); min-height:52px; transition:all .15s;
}
.dzone .dz-label{font-weight:700; font-size:.9rem; flex:none; min-width:120px}
.dzone .dz-slot{flex:1; font-size:.82rem; color:var(--muted); font-style:italic}
.dzone .dz-slot .dragchip{font-style:normal; cursor:pointer}
.dzone.over{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%, var(--surface)); transform:scale(1.01)}
.dzone.filled{border-style:solid; border-color:var(--accent)}
/* Ordenar pasos */
.order-list{display:grid; gap:9px; margin-top:14px}
.oitem{
  display:flex; align-items:center; gap:11px; padding:11px 14px; border-radius:11px;
  border:2px solid var(--line); background:var(--surface); text-align:left; font-size:.9rem; transition:all .15s;
}
.oitem:hover:not(:disabled){border-color:var(--accent)}
.oitem .onum{flex:none; width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-weight:800;font-size:.8rem;background:var(--surface2);color:var(--muted)}
.oitem.picked{border-color:var(--accent)}
.oitem.picked .onum{background:var(--accent); color:#fff}
/* Feedback */
.fb{border-radius:var(--radius-s); padding:16px 18px; margin-top:18px; animation:fadeUp .35s ease both; border:1px solid}
.fb.ok{background:var(--good-soft); border-color:color-mix(in srgb,var(--good) 40%, transparent)}
.fb.bad{background:var(--bad-soft); border-color:color-mix(in srgb,var(--bad) 40%, transparent)}
.fb .fb-head{display:flex; align-items:center; gap:9px; font-weight:800; font-size:1rem; margin-bottom:6px}
.fb.ok .fb-head{color:var(--good-text)}
.fb.bad .fb-head{color:var(--bad-text)}
.fb .fb-exp{font-size:.9rem; color:var(--ink2)}
.fb .fb-tip{margin-top:10px; font-size:.85rem; background:color-mix(in srgb,var(--gold) 14%, transparent); border-radius:9px; padding:9px 12px}
.fb .steps{margin:10px 0 0; padding:0; list-style:none; counter-reset:st}
.fb .steps li{
  counter-increment:st; position:relative; padding:7px 0 7px 38px; font-size:.9rem; border-top:1px dashed var(--line);
  font-variant-numeric:tabular-nums;
}
.fb .steps li:first-child{border-top:none}
.fb .steps li::before{
  content:counter(st); position:absolute; left:0; top:7px; width:24px;height:24px;border-radius:8px;
  background:var(--accent); color:#fff; font-size:.72rem; font-weight:800; display:grid; place-items:center;
}
.fb .xp-gain{display:inline-block; margin-left:auto; font-weight:800; color:var(--accent); animation:pop .4s ease}
.q-actions{display:flex; gap:10px; margin-top:18px; justify-content:flex-end}
/* ============ Resultado ============ */
.result-card{max-width:560px; margin:30px auto; text-align:center; background:var(--surface); border:1px solid var(--border);
  border-radius:20px; padding:40px 30px; box-shadow:var(--shadow); animation:fadeUp .5s ease both; position:relative; overflow:hidden}
.result-card .big-ico{font-size:56px; animation:pop .6s cubic-bezier(.22,1.4,.36,1) both}
.result-card h2{font-size:1.5rem; margin:10px 0 2px}
.result-card .r-sub{color:var(--ink2); font-size:.92rem}
.r-stars{font-size:2rem; letter-spacing:6px; color:var(--gold); margin:12px 0 4px}
.r-stars .off{opacity:.22}
.r-score-ring{width:130px; height:130px; margin:14px auto; position:relative}
.r-score-ring svg{transform:rotate(-90deg)}
.r-score-ring .val{position:absolute; inset:0; display:grid; place-items:center; font-size:1.7rem; font-weight:800}
.r-meta{display:flex; justify-content:center; gap:24px; margin:12px 0 20px; font-size:.85rem; color:var(--ink2)}
.r-meta b{display:block; font-size:1.1rem; color:var(--ink)}
.recap{max-width:720px; margin:10px auto; text-align:left}
/* ============ Lección ============ */
.lesson{max-width:780px; margin:0 auto}
.lesson-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px 26px; margin-bottom:14px; animation:fadeUp .4s ease both}
.lesson-card h3{display:flex; align-items:center; gap:9px; font-size:1.02rem}
.lesson-card p, .lesson-card li{font-size:.92rem; color:var(--ink2)}
.lesson-card ul{margin:.4em 0; padding-left:1.3em}
.lesson-card .formula{
  background:var(--surface2); border-radius:var(--radius-s); padding:10px 16px; margin:8px 0;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.92rem; overflow-x:auto; white-space:nowrap;
}
.lesson-card table{border-collapse:collapse; width:100%; font-size:.86rem; margin:8px 0}
.lesson-card th,.lesson-card td{border:1px solid var(--line); padding:7px 10px; text-align:left}
.lesson-card th{background:var(--surface2)}
/* ============ Memorama ============ */
.memo-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; max-width:720px; margin:18px auto}
.memo-card{aspect-ratio:3/2.4; perspective:900px; cursor:pointer; border:none; background:none; padding:0}
.memo-inner{display:block; position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .5s cubic-bezier(.4,1.4,.6,1)}
.memo-card.flipped .memo-inner{transform:rotateY(180deg)}
.memo-face{
  position:absolute; inset:0; backface-visibility:hidden; border-radius:13px; display:grid; place-items:center;
  padding:8px; font-size:.74rem; font-weight:600; text-align:center; border:2px solid var(--border);
}
.memo-front{background:linear-gradient(135deg,var(--accent),var(--c5)); color:#fff; font-size:1.6rem}
.memo-back{background:var(--surface); transform:rotateY(180deg)}
.memo-back.concept{background:color-mix(in srgb,var(--accent) 12%, var(--surface)); font-weight:800; font-size:.84rem}
.memo-card.matched{animation:pop .4s ease}
.memo-card.matched .memo-back{border-color:var(--good); background:var(--good-soft)}
.memo-hud{display:flex; justify-content:center; gap:22px; font-size:.9rem; font-weight:700; color:var(--ink2); flex-wrap:wrap}
/* ============ Escape Room ============ */
.esc-wrap{max-width:860px; margin:0 auto}
.esc-story{
  background:linear-gradient(135deg,#1b2440,#3b2b63); color:#eef; border-radius:var(--radius);
  padding:26px 28px; margin-bottom:20px; position:relative; overflow:hidden; animation:fadeUp .5s both;
}
.esc-story::after{content:"🔐"; position:absolute; right:20px; bottom:10px; font-size:70px; opacity:.18}
.esc-story h2{color:#fff}
.esc-story p{color:#cfd2ee; font-size:.93rem; max-width:600px}
.doors{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:20px}
.door{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; text-align:center;
  cursor:pointer; transition:transform .18s, box-shadow .2s; animation:fadeUp .45s both;
}
.door:hover:not(.solved){transform:translateY(-4px); box-shadow:var(--shadow)}
.door .d-ico{font-size:36px; margin-bottom:6px}
.door h4{font-size:.9rem; margin:0 0 4px}
.door .d-state{font-size:.74rem; font-weight:700; color:var(--muted)}
.door.solved{border-color:var(--good); cursor:default}
.door.solved .d-state{color:var(--good-text)}
.door .d-code{margin-top:8px; font-family:ui-monospace,monospace; font-weight:800; font-size:1.05rem; letter-spacing:2px;
  background:var(--good-soft); color:var(--good-text); border-radius:8px; padding:4px 10px; display:inline-block}
.safe{
  max-width:560px; margin:0 auto; background:var(--surface); border:2px solid var(--line); border-radius:20px;
  padding:26px; text-align:center; box-shadow:var(--shadow);
}
.safe.locked-visual{background:repeating-linear-gradient(45deg,var(--surface),var(--surface) 12px,var(--surface2) 12px,var(--surface2) 24px)}
.safe .dial{font-size:44px}
.code-row{display:flex; gap:10px; justify-content:center; margin:16px 0; flex-wrap:wrap}
.code-in{
  width:96px; padding:12px 8px; text-align:center; font-family:ui-monospace,monospace; font-weight:800; font-size:1.1rem;
  border:2px solid var(--line); border-radius:12px; background:var(--surface2); letter-spacing:1px;
}
.code-in:focus{border-color:var(--accent); outline:none}
.safe.shake{animation:shake .45s ease}
.safe.open-anim{border-color:var(--good); animation:pop .5s ease}
/* ============ Dashboard stats ============ */
.dash-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px}
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; animation:fadeUp .45s both}
.panel h3{font-size:.95rem; display:flex; align-items:center; gap:8px; margin-bottom:12px}
.hbar-row{display:grid; grid-template-columns:130px 1fr 48px; align-items:center; gap:10px; padding:5px 0; font-size:.83rem}
.hbar-row .hb-label{color:var(--ink2); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hbar-track{height:14px; border-radius:5px; background:var(--surface2); overflow:hidden}
.hbar-track i{display:block; height:100%; background:var(--accent); border-radius:4px 4px 4px 4px; transition:width .6s}
.hbar-row .hb-val{font-weight:700; font-variant-numeric:tabular-nums; text-align:right; color:var(--ink2)}
.tag-list{display:flex; flex-wrap:wrap; gap:8px}
.tag{font-size:.78rem; font-weight:700; padding:5px 12px; border-radius:99px; display:inline-flex; align-items:center; gap:6px}
.tag.dom{background:var(--good-soft); color:var(--good-text)}
.tag.ref{background:var(--warn-soft); color:var(--ink)}
.tag.neutral{background:var(--surface2); color:var(--ink2)}
.hist-table{width:100%; border-collapse:collapse; font-size:.82rem}
.hist-table td,.hist-table th{padding:7px 8px; border-bottom:1px solid var(--line); text-align:left}
.hist-table th{color:var(--muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.05em}
.hist-table td.num{font-variant-numeric:tabular-nums; text-align:right}
.badge-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px}
.badge{
  text-align:center; padding:14px 8px; border-radius:13px; background:var(--surface2); border:1px solid var(--border);
  transition:transform .15s;
}
.badge:hover{transform:translateY(-3px)}
.badge .b-ico{font-size:28px}
.badge .b-name{font-size:.72rem; font-weight:800; margin-top:4px}
.badge .b-desc{font-size:.64rem; color:var(--muted)}
.badge.locked-b{opacity:.38; filter:grayscale(1)}
.badge.earned{border-color:var(--gold); background:color-mix(in srgb,var(--gold) 10%, var(--surface))}
/* ============ Flashcards ============ */
.flash-wrap{max-width:560px; margin:20px auto; text-align:center}
.flashcard{width:100%; height:280px; perspective:1000px; cursor:pointer; border:none; background:none; padding:0}
.flash-inner{display:block; position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .55s cubic-bezier(.4,1.3,.6,1)}
.flashcard.flipped .flash-inner{transform:rotateY(180deg)}
.flash-face{
  position:absolute; inset:0; backface-visibility:hidden; border-radius:20px; display:grid; place-items:center;
  padding:26px; border:1px solid var(--border); box-shadow:var(--shadow);
}
.flash-front{background:linear-gradient(135deg,var(--accent),var(--c5)); color:#fff; font-size:1.5rem; font-weight:800}
.flash-back{background:var(--surface); transform:rotateY(180deg); font-size:1rem; color:var(--ink2)}
.flash-nav{display:flex; gap:10px; justify-content:center; margin-top:16px; flex-wrap:wrap}
.flash-count{font-size:.82rem; color:var(--muted); font-weight:700; margin-top:8px}
/* ============ Blitz (contrarreloj) ============ */
.blitz-timer{
  width:88px; height:88px; margin:0 auto 6px; border-radius:50%; display:grid; place-items:center;
  font-size:1.6rem; font-weight:800; background:var(--surface); border:5px solid var(--accent); font-variant-numeric:tabular-nums;
  transition:border-color .3s;
}
.blitz-timer.low{border-color:var(--bad); animation:pulse 1s infinite}
.blitz-bonus{height:24px; font-weight:800; font-size:.9rem; color:var(--good-text); margin-bottom:2px}
.blitz-bonus.pop-anim{animation:pop .5s ease}
/* ============ Tienda de recompensas ============ */
.pbar{flex:1; height:7px; border-radius:99px; background:var(--surface3); overflow:hidden}
.pbar i{display:block; height:100%; background:var(--accent); border-radius:99px; transition:width .5s}
.reward-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:10px}
.repaso-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:6px 0}
.mini-tbl{border-collapse:collapse; margin:8px 0; font-size:.82rem; width:100%; overflow-x:auto; display:block}
.mini-tbl th,.mini-tbl td{border:1px solid var(--line); padding:3px 7px; text-align:center; white-space:nowrap}
.mini-tbl th{background:var(--surface2); font-weight:800; color:var(--ink2)}
.repaso-card{width:100%; padding:14px}
@media(max-width:520px){ .repaso-grid{grid-template-columns:1fr} }
.reward-card{position:relative; background:var(--surface2); border:1px solid var(--line); border-top:3px solid var(--rar,var(--line)); border-radius:var(--radius-s); padding:12px 8px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px}
.reward-card.unlocked{border-color:var(--accent); border-top-color:var(--rar,var(--accent))}
.rw-rar{position:absolute; top:6px; left:8px; font-size:.55rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em}
.rw-ico{font-size:28px}
.rw-name{font-size:.78rem; font-weight:700; min-height:2.1em; line-height:1.2}
.rw-lock{width:100%; display:flex; flex-direction:column; gap:4px; align-items:center}
.rw-lock .pbar{width:100%}
.rw-lock small{color:var(--muted); font-size:.68rem}
.reward-card.equipped{border-color:var(--good); box-shadow:0 0 0 2px color-mix(in srgb,var(--good) 40%,transparent) inset}
.reward-card .rw-tag{position:absolute; top:6px; right:6px; font-size:.6rem; font-weight:800; padding:1px 6px; border-radius:99px}
.rw-tag.owned{background:var(--accent-soft); color:var(--accent-strong)}
.rw-tag.eq{background:var(--good-soft); color:var(--good-text)}
.rw-tag.lock{background:var(--surface3); color:var(--muted)}
/* ============ Avatar / foto con marco, fondo y accesorios ============ */
.av-stack{position:relative; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; overflow:visible; flex:none}
.av-stack .av-bg{position:absolute; inset:0; border-radius:50%; overflow:hidden; z-index:0}
.av-stack .av-bg span{position:absolute; inset:0; display:grid; place-items:center; opacity:.5}
.av-stack .av-bg .av-scene{position:absolute; inset:0; width:100%; height:100%; display:block}
.av-stack .av-base{position:relative; z-index:1; width:100%; height:100%; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:transparent}
.av-stack .av-base img{width:100%; height:100%; object-fit:cover}
.av-stack .av-base .av-emoji{line-height:1}
.av-stack .av-frame{position:absolute; inset:0; border-radius:50%; z-index:4; pointer-events:none}
.av-stack .av-acc{position:absolute; z-index:5; pointer-events:none; line-height:1}
.av-sticker{display:inline-block; color:#fff; font-weight:800; padding:2px 6px; border-radius:7px; box-shadow:0 1px 3px rgba(0,0,0,.35); white-space:nowrap; border:1.5px solid rgba(255,255,255,.92); box-sizing:border-box}
@keyframes av-spin{to{transform:rotate(360deg)}}
/* ---- Efectos del MARCO: solo decoran el anillo/borde (sin emojis) ---- */
.av-stack .av-ring{position:absolute; inset:-5px; border-radius:50%; z-index:3; pointer-events:none}
/* Anillo de destellos (dorado giratorio) */
.av-stack.fx-sparkle .av-ring{background:conic-gradient(from 0deg,transparent 0deg,var(--gold) 40deg,transparent 90deg,transparent 180deg,#fff3c4 220deg,transparent 270deg,var(--gold) 320deg,transparent 360deg); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px)); mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px)); animation:av-spin 3.5s linear infinite; filter:drop-shadow(0 0 3px var(--gold))}
/* Aura brillante (halo pulsante) */
@keyframes av-pulse-glow{0%,100%{box-shadow:0 0 10px 2px var(--accent)} 50%{box-shadow:0 0 22px 6px var(--accent)}}
.av-stack.fx-glow{animation:av-pulse-glow 2s ease-in-out infinite; border-radius:50%}
/* Anillo neón (aro fijo que brilla) */
.av-stack.fx-neon .av-ring{border:3px solid #2af5c8; box-shadow:0 0 10px #2af5c8, inset 0 0 6px #2af5c8}
/* Anillo de fuego (naranja/rojo giratorio) */
.av-stack.fx-flame .av-ring{background:conic-gradient(from 0deg,#ff3b1a,#ffb63a,#ff7a1a,#ffd24a,#ff3b1a); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px)); mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px)); animation:av-spin 2.2s linear infinite; filter:drop-shadow(0 0 4px #ff7a1a)}
/* Anillo arcoíris (multicolor giratorio) */
.av-stack.fx-rainbow .av-ring{background:conic-gradient(from 0deg,#e34948,#eda100,#1baf7a,#2a78d6,#4a3aa7,#e34948); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px)); mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px)); animation:av-spin 4s linear infinite}
/* ---- Partículas al acertar (efecto "al acertar") ---- */
.hit-p{position:fixed; z-index:130; pointer-events:none; will-change:transform,opacity; animation:hit-fly 1s ease-out forwards}
@keyframes hit-fly{0%{transform:translate(0,0) scale(.4); opacity:0} 20%{opacity:1} 100%{transform:translate(var(--dx),var(--dy)) scale(1.15); opacity:0}}
.equip-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:8px}
.equip-item{position:relative; border:2px solid var(--line); border-radius:12px; background:var(--surface); padding:8px 4px; text-align:center; cursor:pointer; transition:transform .12s, border-color .15s}
.equip-item:hover{transform:translateY(-2px)}
.equip-item.on{border-color:var(--good); background:var(--good-soft)}
.equip-item .ei-ico{font-size:22px; line-height:1}
.equip-item .ei-name{font-size:.62rem; font-weight:700; margin-top:3px; color:var(--ink2); line-height:1.1}
.equip-item .ei-on{position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%; background:var(--good); color:#fff; font-size:.6rem; display:grid; place-items:center; font-weight:800}
.shop-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.coll-sec{margin-bottom:14px}
.coll-sec h4{margin:0 0 8px; font-size:.9rem}
details.coll-sec > summary{cursor:pointer; font-size:.95rem; list-style:none; display:flex; align-items:center; gap:8px; padding:2px 0}
details.coll-sec > summary::-webkit-details-marker{display:none}
details.coll-sec > summary::before{content:'▸'; color:var(--muted); transition:transform .15s}
details.coll-sec[open] > summary::before{transform:rotate(90deg)}
/* ============ Modos de juego ============ */
.modes-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px}
.mode-card{background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--mc,var(--accent)); border-radius:var(--radius-s); padding:14px; text-align:left; cursor:pointer; transition:transform .15s, box-shadow .2s; display:flex; flex-direction:column; gap:5px}
.mode-card:hover:not(.locked){transform:translateY(-3px); box-shadow:var(--shadow)}
.mode-card .mo-ico{font-size:26px}
.mode-card h4{margin:0; font-size:.95rem}
.mode-card p{margin:0; font-size:.76rem; color:var(--ink2)}
.mode-card.locked{opacity:.55; cursor:not-allowed}
.mode-card .mo-cat{font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
/* ============ Leaderboard ============ */
.lb-controls{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px}
.lb-controls .ainput{max-width:220px}
.lb-table tr.first td{background:color-mix(in srgb, var(--gold) 14%, var(--surface)); font-weight:800}
.lb-table tr.me td{background:color-mix(in srgb, var(--accent) 9%, var(--surface))}
.lb-medal{font-size:1.05rem}
.lb-view{background:none; border:0; padding:0; margin:0; cursor:pointer; font:inherit; color:inherit; display:inline-flex; align-items:center; border-radius:10px; transition:opacity .15s}
.lb-view:hover{opacity:.75}
.lb-name{text-align:left; line-height:1.25}
.lb-name b{border-bottom:1px dotted color-mix(in srgb, var(--accent) 55%, transparent)}
/* ============ Modal de stats de un estudiante del leaderboard ============ */
.lbs-head{display:flex; align-items:center; gap:14px; margin-bottom:6px}
.lbs-tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin:16px 0 6px}
.lbs-tiles .tile{padding:12px 14px}
.lbs-bar{height:9px; border-radius:6px; background:var(--surface2); overflow:hidden; margin-top:8px}
.lbs-bar>span{display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--gold))}
.cmp-table{width:100%; border-collapse:collapse; margin:8px 0}
.cmp-table td,.cmp-table th{padding:8px 10px; text-align:center; border-bottom:1px solid var(--line)}
.cmp-table th:nth-child(2){color:var(--muted); font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em}
.cmp-table td{font-size:1.1rem; font-weight:800; color:var(--ink2)}
.cmp-table td.cmp-win{color:var(--good-text); background:color-mix(in srgb, var(--good) 16%, transparent); border-radius:8px}
.reto-vs{display:flex; align-items:center; justify-content:center; gap:18px; text-align:center; margin:12px 0}
.reto-vs .reto-sc{font-size:1.8rem; font-weight:800; color:var(--accent)}
.reto-vs .reto-mid{font-size:.9rem; font-weight:800; color:var(--muted)}
.lb-motiv{margin:10px 0 0; padding:10px 14px; border-radius:var(--radius-s); background:var(--surface2); font-size:.88rem; font-weight:700; color:var(--ink2)}
/* ============ Modal de desbloqueo múltiple ============ */
.reward-unlock-list{max-height:min(46vh,320px); overflow-y:auto; margin:12px 0; text-align:left; display:flex; flex-direction:column; gap:6px}
.ru-row{display:flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid var(--line); border-radius:11px; background:var(--surface2)}
.ru-row .ru-ico{font-size:22px; flex:none}
.ru-row .ru-txt{display:flex; flex-direction:column; line-height:1.2}
.ru-row .ru-txt small{color:var(--muted); font-size:.72rem}
/* ============ Tareas y calendario ============ */
.task-badge{position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; border-radius:99px; background:var(--bad); color:#fff; font-size:.62rem; font-weight:800; display:grid; place-items:center; padding:0 4px}
.task-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.task-card{background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:var(--radius-s); padding:14px 16px; margin-bottom:10px}
.task-card.done{opacity:.72; border-left-color:var(--good)}
.task-card.late{border-left-color:var(--bad)}
.task-card.soon{border-left-color:var(--warn)}
.tag.prio-alta{background:var(--bad-soft); color:var(--bad-text)}
.tag.prio-media{background:var(--warn-soft); color:#8a6400}
.tag.prio-baja{background:var(--surface2); color:var(--ink2)}
.task-card details{margin-top:8px; font-size:.86rem}
.task-card details summary{cursor:pointer; font-weight:700; color:var(--accent)}
.due-chip{font-size:.74rem; font-weight:800; padding:3px 10px; border-radius:99px; background:var(--surface2); white-space:nowrap}
.due-chip.soon{background:var(--warn-soft); color:#8a6400}
.due-chip.late{background:var(--bad-soft); color:var(--bad-text)}
.cal-exam{display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--line); border-radius:11px; margin-bottom:8px}
.cal-exam .ce-date{font-weight:800; min-width:92px; font-variant-numeric:tabular-nums}
/* ============ Revisión de respuestas ============ */
.rv-item{background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--line); border-radius:var(--radius-s); padding:14px 16px; margin-bottom:10px}
.rv-item.ok{border-left-color:var(--good)}
.rv-item.bad{border-left-color:var(--bad)}
.rv-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px}
.rv-tag{font-size:.72rem; font-weight:800; padding:3px 10px; border-radius:99px}
.rv-tag.ok{background:var(--good-soft); color:var(--good-text)}
.rv-tag.bad{background:var(--bad-soft); color:var(--bad-text)}
.rv-meta{font-size:.74rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.04em}
.rv-q{font-weight:700; margin-bottom:8px}
.rv-line{font-size:.86rem; color:var(--ink2); margin-top:4px}
.rv-steps{margin-top:8px; font-size:.86rem}
.rv-steps summary{cursor:pointer; font-weight:700; color:var(--accent)}
/* ============ Modal / toast / confetti ============ */
.overlay{position:fixed; inset:0; background:rgba(9,9,12,.55); z-index:90; display:grid; place-items:center; padding:20px; animation:fadeIn .25s ease both}
.modal{background:var(--surface); border-radius:20px; max-width:520px; width:100%; padding:28px; box-shadow:var(--shadow); animation:pop .35s cubic-bezier(.22,1.3,.36,1) both; max-height:86vh; overflow:auto}
#toasts{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:120; display:flex; flex-direction:column; gap:8px; align-items:center}
.toast{
  background:var(--ink); color:var(--bg); border-radius:99px; padding:10px 22px; font-weight:700; font-size:.88rem;
  box-shadow:var(--shadow); animation:toastIn .4s cubic-bezier(.22,1.3,.36,1) both; display:flex; gap:8px; align-items:center;
}
.confetti-p{position:fixed; top:-14px; z-index:130; pointer-events:none; animation:confetti-fall linear forwards}
/* ============ Animaciones ============ */
@keyframes fadeUp{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
@keyframes pop{0%{transform:scale(.6); opacity:0} 70%{transform:scale(1.06)} 100%{transform:scale(1); opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)}}
@keyframes toastIn{from{opacity:0; transform:translateY(16px) scale(.9)} to{opacity:1; transform:none}}
@keyframes confetti-fall{to{transform:translateY(105vh) rotate(720deg); opacity:.9}}
@keyframes pulse{0%,100%{transform:scale(1)} 50%{transform:scale(1.06)}}
.mcard:nth-child(2){animation-delay:.03s}.mcard:nth-child(3){animation-delay:.06s}.mcard:nth-child(4){animation-delay:.09s}
.mcard:nth-child(5){animation-delay:.12s}.mcard:nth-child(6){animation-delay:.15s}.mcard:nth-child(7){animation-delay:.18s}
.mcard:nth-child(8){animation-delay:.21s}.mcard:nth-child(9){animation-delay:.24s}.mcard:nth-child(10){animation-delay:.27s}
.mcard:nth-child(11){animation-delay:.3s}.mcard:nth-child(12){animation-delay:.33s}
@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms !important; transition-duration:.01ms !important}}
/* ============ Perfil ============ */
.fld{display:block; font-size:.8rem; font-weight:700; color:var(--ink2); margin:12px 0}
.fld input:not([type=checkbox]), .fld select{margin-top:4px; width:100%}
.fld.row{display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:.88rem; padding:6px 0; border-bottom:1px dashed var(--line)}
.fld.row input[type=checkbox]{width:20px; height:20px; accent-color:var(--accent); flex:none}
/* ---- Vestidor (avatar + equipar en dos columnas, colapsable y responsive) ---- */
.panel-dresser{grid-column:1/-1}
.dresser-wrap{margin:8px 0 2px; border:1px solid var(--line); border-radius:14px; padding:0 14px 14px; background:var(--surface2)}
.dresser-wrap > summary{cursor:pointer; font-weight:800; font-size:1rem; padding:13px 2px; list-style:none; display:flex; align-items:center; gap:8px}
.dresser-wrap > summary::-webkit-details-marker{display:none}
.dresser-wrap > summary::before{content:'▾'; color:var(--muted); transition:transform .15s}
.dresser-wrap:not([open]) > summary::before{transform:rotate(-90deg)}
.dw-hint{font-weight:500; color:var(--muted); font-size:.78rem}
.dresser{display:grid; grid-template-columns:minmax(150px,210px) 1fr; gap:20px; align-items:start}
.dresser-preview{position:sticky; top:74px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px}
.dresser-preview .dp-av{line-height:0}
.dresser-preview .dp-id b{font-size:1.02rem}
.dresser-preview .dp-id small{color:var(--ink2)}
.dresser-preview .dp-tags{justify-content:center; margin:0}
.dresser-dress{min-width:0}
.dsec{border:1px solid var(--line); border-radius:12px; background:var(--surface); margin-bottom:10px; padding:0 12px}
.dsec > summary{cursor:pointer; font-weight:700; font-size:.9rem; padding:11px 2px; list-style:none; display:flex; align-items:center; gap:8px}
.dsec > summary::-webkit-details-marker{display:none}
.dsec > summary::before{content:'▾'; color:var(--muted); font-size:.78rem; transition:transform .15s}
.dsec:not([open]) > summary::before{transform:rotate(-90deg)}
.dsec > summary small{font-weight:400; color:var(--muted); font-size:.76rem}
.dsec .dsec-body{padding-bottom:12px}
.eq-slot-label{font-size:.72rem; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin:2px 0 4px}
.av-modes{display:flex; gap:6px; margin:8px 0; width:100%}
.av-mode{flex:1; padding:8px 6px; border:2px solid var(--line); border-radius:11px; background:var(--surface); font-weight:700; font-size:.82rem; cursor:pointer; transition:border-color .15s, background .15s}
.av-mode.on{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%, var(--surface))}
.builder .builder-row{display:flex; align-items:center; gap:10px}
.builder .b-name{flex:1; font-size:.85rem; font-weight:700}
@media(max-width:720px){
  .dresser{grid-template-columns:1fr; gap:8px}
  .dresser-preview{display:contents}
  .dp-av{position:sticky; top:56px; z-index:6; width:max-content; margin:4px auto; background:var(--surface2); border-radius:50%; padding:5px; box-shadow:0 4px 14px rgba(0,0,0,.18)}
  .dp-id{text-align:center; margin-top:4px}
  .dp-tags{margin-top:2px}
  .av-modes{max-width:340px; margin:8px auto}
}
.avatar-pick{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:10px 0}
.avatar-pick .av{width:42px; height:42px; font-size:22px; border-radius:11px; border:2px solid var(--line); background:var(--surface);
  transition:transform .12s; display:inline-grid; place-items:center; line-height:1; padding:0; overflow:hidden}
.color-swatches{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px}
.color-swatches .sw{width:34px; height:34px; border-radius:50%; border:3px solid var(--surface3); cursor:pointer; transition:transform .12s}
.color-swatches .sw:hover{transform:scale(1.12)}
.color-swatches .sw.on{border-color:var(--ink); transform:scale(1.12)}
.avatar-pick .av:hover{transform:scale(1.1)}
.avatar-pick .av.on{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 14%, var(--surface))}
.profile-row{display:flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid var(--line); border-radius:11px; margin-bottom:8px}
.profile-row.active{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 6%, var(--surface))}
.profile-row .pr-av{font-size:22px}
.profile-row .pr-name{flex:1; font-weight:700; font-size:.9rem; overflow:hidden; text-overflow:ellipsis}
.btn.danger{background:var(--bad); box-shadow:0 4px 0 #8f2020}
select.ainput{appearance:auto}
.avatar-pick .av.locked{opacity:.45; cursor:not-allowed}
#btnProfile svg{display:block; border-radius:50%}
.lvlbox{cursor:pointer; transition:transform .15s}
.lvlbox:hover{transform:translateY(-2px)}
/* ============ Constructor de avatar ============ */
.builder-row{display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px dashed var(--line); font-size:.85rem}
.builder-row .b-val{min-width:96px; text-align:center; font-weight:700; font-size:.8rem}
.builder-row .bnav{width:30px; height:30px; border-radius:9px; border:1px solid var(--border); background:var(--surface2); font-weight:800; font-size:1rem}
.builder-row .bnav:hover{background:var(--accent); color:#fff}
/* ============ Niveles y recompensas ============ */
.lvl-row{display:flex; align-items:center; gap:12px; padding:10px 8px; border-bottom:1px solid var(--line)}
.lvl-row:last-child{border-bottom:none}
.lvl-row .lvl-badge{flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-weight:800; background:var(--surface3); color:var(--muted)}
.lvl-row.done .lvl-badge{background:linear-gradient(135deg,var(--accent),var(--c5)); color:#fff}
.lvl-row.next .lvl-badge{background:var(--warn-soft); color:var(--ink); outline:2px dashed var(--gold)}
.lvl-row .lvl-info{flex:1; font-size:.85rem}
.lvl-row .lvl-info small{display:block; color:var(--muted); font-size:.7rem; font-variant-numeric:tabular-nums}
.lvl-row .lvl-state{font-size:1rem; font-weight:800}
.lvl-row.done .lvl-state{color:var(--good-text)}
.lvl-row:not(.done){opacity:.75}
/* ============ Guía progresiva ============ */
.guide-locked{text-align:center; border-style:dashed !important; color:var(--ink2); font-size:.9rem; opacity:.85}
.guide-locked span{font-size:.82rem; color:var(--muted)}
/* ============ Accesibilidad ============ */
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}
/* ============ Responsive ============ */
@media (max-width:720px){
  .app{padding:0 14px 70px}
  header.top{padding:10px 14px; margin:0 0 16px; gap:8px}
  .lvlbox .lvlbar{width:56px}
  .chip{padding:4px 10px; font-size:.78rem}
  .qcard{padding:18px}
  .match-wrap{grid-template-columns:1fr}
  .memo-grid{grid-template-columns:repeat(4,1fr); gap:8px}
  .memo-face{font-size:.6rem}
  .hbar-row{grid-template-columns:96px 1fr 44px}
  .hero::after{display:none}
}
/* ============ Impresión: solo la guía de estudio ============ */
#printGuide{display:none}
@media print{
  body{background:#fff; color:#000}
  body > *{display:none !important}
  #printGuide{display:block !important; font-size:12px; color:#000}
  #printGuide h1{font-size:20px} #printGuide h2{font-size:15px; border-bottom:2px solid #333; padding-bottom:4px; margin-top:18px}
  #printGuide h3{font-size:13px}
  #printGuide table{width:100%; border-collapse:collapse; font-size:10.5px; margin:6px 0}
  #printGuide th,#printGuide td{border:1px solid #999; padding:4px 6px; text-align:left; vertical-align:top}
  #printGuide th{background:#eee}
  #printGuide .pf{font-family:ui-monospace,monospace; background:#f2f2f2; padding:2px 6px}
  #printGuide ol,#printGuide ul{margin:4px 0; padding-left:18px}
}

/* ============ ❤️ Corazones (vidas) ============ */
.chip.hearts{background:var(--bad-soft); border:1px solid var(--border)}
.chip.hearts b{color:var(--bad-text)}
.chip.hearts.empty{animation:heartPulse 1.6s ease-in-out infinite}
@keyframes heartPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.hearts-bar{display:flex;gap:6px;justify-content:center;font-size:1.5rem;margin:8px 0}
.hearts-bar .hb.off{opacity:.45;filter:grayscale(1)}

/* ============ 🗺️ Árbol de lecciones (camino de nodos) ============ */
.lesson-path{display:flex;flex-direction:column;align-items:center;padding:10px 0 30px;position:relative}
.lp-banner{
  width:min(430px,94%); margin:18px 0 22px; padding:14px 18px; border-radius:14px;
  background:var(--mc); color:#fff; display:flex; align-items:center; justify-content:space-between;
  box-shadow:var(--shadow); font-weight:800;
}
.lp-banner-name{font-size:1.02rem}
.lp-banner-meta{background:rgba(255,255,255,.22);border-radius:99px;padding:2px 12px;font-size:.85rem}
.lp-row{
  display:flex; flex-direction:column; align-items:center; margin:7px 0;
  transform:translateX(calc(var(--x,0) * 52px));
  transition:transform .3s;
}
.lp-node{
  position:relative; width:74px; height:74px; border-radius:50%;
  border:none; cursor:pointer; font-size:1.9rem; display:flex; align-items:center; justify-content:center;
  background:var(--mc); color:#fff;
  box-shadow:0 6px 0 color-mix(in srgb, var(--mc) 60%, #000 40%), 0 10px 18px rgba(0,0,0,.18);
  transition:transform .12s, box-shadow .12s, filter .2s;
}
.lp-node:not(.locked):active{transform:translateY(4px); box-shadow:0 2px 0 color-mix(in srgb, var(--mc) 60%, #000 40%)}
.lp-node:not(.locked):hover{filter:brightness(1.06)}
.lp-node.locked{
  background:var(--surface3); color:var(--muted); cursor:pointer;
  box-shadow:0 6px 0 var(--line); filter:saturate(.4);
}
.lp-node.done{background:var(--gold); box-shadow:0 6px 0 #b57f00, 0 10px 18px rgba(0,0,0,.18)}
.lp-node.current{
  width:86px; height:86px; font-size:2.2rem;
  outline:4px solid color-mix(in srgb, var(--mc) 40%, transparent);
  outline-offset:5px; animation:lpBreath 2.2s ease-in-out infinite;
}
@keyframes lpBreath{0%,100%{outline-offset:5px}50%{outline-offset:9px}}
.lp-start{
  position:absolute; top:-38px; left:50%; transform:translateX(-50%);
  background:var(--surface); color:var(--accent); border:2px solid var(--line);
  font-size:.72rem; font-weight:900; letter-spacing:.06em; padding:5px 12px; border-radius:10px;
  animation:lpFloat 1.6s ease-in-out infinite; white-space:nowrap; box-shadow:var(--shadow); z-index:2;
}
.lp-start::after{
  content:''; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%) rotate(45deg);
  width:10px; height:10px; background:var(--surface); border-right:2px solid var(--line); border-bottom:2px solid var(--line);
}
@keyframes lpFloat{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-5px)}}
.lp-check{
  position:absolute; right:-4px; bottom:-2px; width:26px; height:26px; border-radius:50%;
  background:var(--good); color:#fff; font-size:.9rem; font-weight:900;
  display:flex; align-items:center; justify-content:center; border:3px solid var(--bg);
}
.lp-best{
  position:absolute; left:50%; bottom:-10px; transform:translateX(-50%);
  background:var(--surface); border:1px solid var(--line); border-radius:99px;
  color:var(--ink2); font-size:.66rem; font-weight:800; padding:1px 8px;
}
.lp-label{max-width:170px; text-align:center; margin-top:10px; font-size:.8rem; line-height:1.25; color:var(--ink2)}
.lp-label b{display:block; color:var(--ink); font-size:.82rem}
.lp-label.dim b{color:var(--muted)}
.lp-stars{color:var(--gold); font-size:.85rem; letter-spacing:.1em}
.lp-stars .off{color:var(--surface3)}
.lp-node.checkpoint{
  width:88px; height:88px; border-radius:26px; font-size:2.3rem; cursor:default;
  background:var(--surface2); color:var(--ink2); box-shadow:0 6px 0 var(--line);
  border:3px dashed var(--line);
}
.lp-node.checkpoint.done{background:var(--warn-soft); border-color:var(--gold); filter:none}
@media (max-width:520px){
  .lp-row{transform:translateX(calc(var(--x,0) * 34px))}
}
@media (prefers-reduced-motion: reduce){
  .lp-node.current,.lp-start,.chip.hearts.empty{animation:none}
}

/* ============ Pantalla de acceso ============ */
html.gated body > *:not(#authGate){display:none !important}

/* ============ ☁️ Indicador de sincronización ============ */
#syncBadge{
  position:fixed; left:14px; bottom:14px; z-index:9000; pointer-events:none;
  padding:7px 14px; border-radius:99px; font-size:.78rem; font-weight:800;
  opacity:0; transform:translateY(8px); transition:opacity .25s, transform .25s;
}
#syncBadge.show{opacity:1; transform:none}
#syncBadge.ok{background:var(--good-soft); color:var(--good-text); border:1px solid var(--border)}
#syncBadge.err{background:var(--bad-soft); color:var(--bad-text); border:1px solid var(--border)}


/* ============ Identidad UTECA ============ */
.logo .mark{ width:34px; height:34px; border-radius:9px; background:#fff; padding:2px; box-shadow:0 1px 3px rgba(0,0,0,.12); display:grid; place-items:center; overflow:hidden; }
.logo .mark img{ width:100%; height:100%; object-fit:contain; }
.logo small{ color:var(--accent); }
svg.ic{ width:18px; height:18px; display:inline-block; vertical-align:-3px; }
.iconbtn svg.ic{ vertical-align:middle; }
.chip .icon svg.ic{ width:16px; height:16px; display:block; }
.chip.hearts .icon svg.ic{ color:#ff026f; }
.chip.streak .icon svg.ic{ color:#eb6834; }
.chip.subject .icon svg.ic{ width:16px; height:16px; color:var(--accent); }
.pr-av svg.ic{ width:20px; height:20px; color:var(--accent); }
.tag svg.ic{ width:13px; height:13px; vertical-align:-2px; }
.m-ico svg.ic{ color:var(--mc, var(--accent)); }
.more-item svg.ic{ width:16px; height:16px; flex:none; }
.btn svg.ic{ width:16px; height:16px; margin-right:6px; }
.mcard .lock svg.ic, .m-ico svg.ic{ width:20px; height:20px; }
.lp-ico svg.ic{ width:26px; height:26px; color:#fff; display:block; }
.lp-node.checkpoint .lp-ico svg.ic{ color:var(--gold); }
.lp-node.done .lp-ico svg.ic{ color:#fff; }
.iconbtn svg.ic{ width:17px; height:17px; }

/* =====================================================================
   LOGIN  ·  correo institucional + contrasena (sin registro)
   ===================================================================== */
#authGate{
  position:fixed; inset:0; z-index:9999; padding:24px;
  display:flex; align-items:center; justify-content:flex-end;
  background:#2b2b2b url('assets/Fondo_Full_Ini.png') center/cover no-repeat;
  font-family:'duolingo-sans','Nunito','Lato',system-ui,sans-serif;
}
#authGate::before{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.35) 100%); }
.lg-art{
  position:absolute; left:6vw; top:50%; transform:translateY(-50%);
  width:min(34vw,520px); height:auto; pointer-events:none; z-index:1;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.45));
}
.lg-card{
  position:relative; z-index:2; width:min(430px,100%); margin-right:6vw;
  background:#fff; border-radius:24px; padding:40px 40px 30px; text-align:center;
  box-shadow:0 30px 70px rgba(0,0,0,.35);
}
.lg-logo{ width:180px; max-width:70%; height:auto; display:block; margin:0 auto 22px;
  filter:brightness(0) saturate(100%) invert(13%) sepia(9%) saturate(500%) hue-rotate(155deg) brightness(95%); }
.lg-title{ margin:0; font-size:26px; font-weight:700; color:#3c3c3c; letter-spacing:-.2px; }
.lg-sub{ margin:6px 0 26px; font-size:15px; color:#777; }
.lg-notice{ background:#fff5d1; border:2px solid #ffc800; color:#7a5b00; border-radius:12px; padding:11px 14px; font-size:14px; margin-bottom:18px; text-align:left; }
.lg-field{ display:block; text-align:left; margin-bottom:16px; }
.lg-field > span{ display:block; font-size:12.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#afafaf; margin-bottom:7px; }
.lg-card input[type="email"], .lg-card input[type="password"], .lg-card input[type="text"]{
  width:100%; box-sizing:border-box; height:54px; padding:0 16px;
  border:2px solid #e5e5e5; border-radius:14px; background:#f7f7f7; color:#3c3c3c;
  font:inherit; font-size:16px; transition:border-color .15s, background .15s;
}
.lg-card input::placeholder{ color:#c0c0c0; }
.lg-card input:focus, .lg-card input:focus-visible{ outline:none !important; border-color:#ff026f; background:#fff; box-shadow:0 0 0 4px rgba(255,2,111,.14); }
.lg-card .lg-eye:focus-visible, .lg-card .lg-btn:focus-visible, .lg-remember input:focus-visible{ outline:3px solid #ff026f; outline-offset:2px; }
.lg-pass{ position:relative; display:block; }
.lg-pass input{ padding-right:78px !important; }
.lg-eye{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:none; border:none; padding:8px 10px; border-radius:10px; cursor:pointer;
  font-size:13px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:#1cb0f6;
}
.lg-eye:hover{ background:#ddf4ff; }
.lg-card .lg-remember{ display:flex !important; align-items:center; gap:9px; font-size:14.5px; color:#777; cursor:pointer; margin:2px 0 22px; text-align:left; font-weight:400; }
.lg-card .lg-remember input{ width:19px !important; height:19px; flex:none; accent-color:#ff026f; cursor:pointer; margin:0; }
.lg-err{ background:#ffdfe0; color:#ea2b2b; border-radius:12px; padding:11px 14px; font-size:14px; font-weight:700; margin-bottom:16px; text-align:left; }
.lg-err.hidden{ display:none; }
.lg-btn{
  width:100%; height:54px; border:none; border-radius:16px; cursor:pointer;
  background:#ff026f; color:#fff; font-size:16px; font-weight:700; letter-spacing:.8px; text-transform:uppercase;
  box-shadow:0 4px 0 #c30057; transition:filter .15s, transform .1s, box-shadow .1s;
}
.lg-btn:hover:not(:disabled){ filter:brightness(1.06); }
.lg-btn:active:not(:disabled){ transform:translateY(4px); box-shadow:none; }
.lg-btn:disabled{ opacity:.6; cursor:wait; }
.lg-help{ margin:22px 0 0; font-size:13.5px; color:#777; line-height:1.5; }
.lg-foot{ margin:14px 0 0; font-size:12px; color:#c0c0c0; }
@media (max-width:1000px){
  #authGate{ justify-content:center; }
  .lg-art{ display:none; }
  .lg-card{ margin-right:0; }
}
@media (max-width:480px){
  #authGate{ padding:16px; }
  .lg-card{ padding:30px 24px 24px; border-radius:20px; }
  .lg-title{ font-size:22px; }
}

.site-foot{ margin-top:44px; padding:22px 12px 28px; text-align:center; font-size:.78rem; color:var(--muted); border-top:1px solid var(--line); }

/* Iconos SVG en memorama, escape y guía */
.memo-front svg.ic{ width:26px; height:26px; color:#fff; }
.guide-locked svg.ic{ width:15px; height:15px; vertical-align:-2px; }
.lesson-card h3 svg.ic{ width:18px; height:18px; vertical-align:-3px; color:var(--accent); }
.hist-table th svg.ic{ width:18px; height:18px; }
.d-ico svg.ic{ width:30px; height:30px; }
.dial svg.ic{ width:26px; height:26px; }


/* =====================================================================
   LAYOUT DUOLINGO /learn  (fuentes e iconos de Duolingo como placeholder;
   los alumnos los reemplazarán por recursos propios)
   ===================================================================== */
@font-face{ font-family:'duolingo-sans'; font-weight:400; font-style:normal; font-display:swap; src:url('assets/duo/duolingo-sans-400.woff2?v=2') format('woff2'); }
@font-face{ font-family:'duolingo-sans'; font-weight:700; font-style:normal; font-display:swap; src:url('assets/duo/duolingo-sans-700.woff2?v=2') format('woff2'); }
@font-face{ font-family:'feather'; font-weight:700; font-style:normal; font-display:swap; src:url('assets/duo/feather-700.woff2?v=2') format('woff2'); }

.duo-shell{ display:grid; grid-template-columns:256px minmax(0,1fr) 400px; max-width:1440px; margin:0 auto; min-height:100vh; }

/* ---- barra lateral ---- */
.duo-side{ position:sticky; top:0; height:100vh; padding:16px 16px 16px; border-right:2px solid var(--line); display:flex; flex-direction:column; gap:6px; background:var(--bg); }
.duo-logo{ font-family:'feather','Nunito',sans-serif; font-weight:700; font-size:30px; letter-spacing:-.5px; color:#58cc02; background:none; border:none; text-align:left; padding:12px 16px 26px; line-height:1; cursor:pointer; }
.duo-nav{ display:flex; flex-direction:column; gap:8px; }
.duo-nav-item{
  display:flex; align-items:center; gap:20px; width:100%; height:52px; padding:0 16px;
  background:none; border:2px solid transparent; border-radius:12px; cursor:pointer; position:relative;
  font-size:15px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--duo-nav); text-align:left; transition:background .15s;
}
.duo-nav-item:hover{ background:var(--surface2); }
.duo-nav-item.is-active{ color:#1cb0f6; background:var(--duo-nav-bg); border-color:var(--duo-nav-bd); }
.duo-nav-ico{ width:32px; height:32px; flex:none; object-fit:contain; display:inline-grid; place-items:center; }
.duo-avatar{ overflow:visible; }
.duo-nav-item .streak-dot, .duo-nav-item .task-badge{ position:absolute; right:14px; top:14px; }
.duo-side .more-wrap{ position:relative; }
.duo-side .more-menu{ left:100%; right:auto; top:auto; bottom:0; margin-left:12px; min-width:230px; border:2px solid var(--line); border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.08); }
.duo-side .more-item{ font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--duo-nav); padding:12px 16px; }
.duo-side .more-item:hover{ color:#1cb0f6; background:var(--duo-nav-bg); }

/* ---- columna central ---- */
.duo-main{ max-width:none; margin:0; padding:24px 32px 96px; min-width:0; }
.duo-main > section{ max-width:592px; margin:0 auto; }
#moduleGrid.mgrid{ display:block; }

/* ---- columna derecha ---- */
.duo-right{ padding:24px 32px 24px 0; align-self:start; display:flex; flex-direction:column; gap:16px; }
#duoMobileTop{ display:none; }
.duo-stats{ display:flex; align-items:center; justify-content:space-between; height:44px; padding:0 4px; }
.duo-stat{ display:inline-flex; align-items:center; gap:8px; background:none; border:none; border-radius:12px; padding:6px 10px; cursor:pointer; font-size:15px; font-weight:700; color:#3c3c3c; transition:background .15s; }
.duo-stat:hover{ background:var(--surface2); }
.duo-stat img{ height:26px; width:auto; }
.duo-streak img{ height:24px; } .duo-streak b{ color:#ff9600; } .duo-streak.zero b{ color:#afafaf; } .duo-streak.zero img{ filter:grayscale(1); opacity:.55; }
.duo-gem b{ color:#1cb0f6; } .duo-gem img{ height:24px; }
.duo-hearts b{ color:#ff4b4b; } .duo-hearts img{ height:28px; } .duo-hearts.empty img{ filter:grayscale(1); }
.duo-flag{ display:inline-grid; place-items:center; width:38px; height:30px; border-radius:8px; background:#ff026f; color:#fff; }
.duo-flag svg.ic{ width:22px; height:22px; color:#fff; }
.duo-stat #subjShort{ font-size:13px; color:var(--duo-nav); text-transform:uppercase; letter-spacing:.5px; max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.duo-card{ border:2px solid var(--line); border-radius:16px; padding:18px; background:var(--surface); }
.duo-card h3{ margin:0; font-size:19px; font-weight:700; color:var(--ink); }
.duo-card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.duo-link{ background:none; border:none; color:#1cb0f6; font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; cursor:pointer; padding:0; }
.duo-hero p{ color:#777; font-size:15px; margin:6px 0 14px; line-height:1.45; }
.duo-card-actions{ display:flex; flex-direction:column; gap:10px; }
.duo-card-actions .btn{ width:100%; }
.duo-league{ display:flex; gap:16px; align-items:center; color:#777; font-size:15px; line-height:1.45; }
.duo-league img{ width:56px; height:auto; flex:none; }
.duo-league b{ color:var(--ink); }
.dq-row{ display:flex; align-items:center; gap:14px; padding:10px 0; }
.dq-row + .dq-row{ border-top:2px solid var(--line); }
.dq-ico{ width:40px; height:40px; flex:none; display:grid; place-items:center; color:#ffc800; }
.dq-ico svg.ic{ width:30px; height:30px; }
.dq-body{ flex:1; min-width:0; }
.dq-body b{ display:block; font-size:15px; color:var(--ink); margin-bottom:8px; }
.dq-bar{ position:relative; height:16px; border-radius:8px; background:var(--surface3); overflow:hidden; }
.dq-bar i{ position:absolute; inset:0 auto 0 0; background:#ffc800; border-radius:8px; }
.dq-bar span{ position:absolute; inset:0; display:grid; place-items:center; font-size:12px; font-weight:700; color:#777; }
.dq-chest{ width:34px; height:auto; flex:none; }
.dq-row.done .dq-bar i{ background:#58cc02; }
.duo-practice{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.duo-practice .btn{ width:100%; padding:0 8px; font-size:13px; }
.duo-levelcard{ display:flex; align-items:center; gap:12px; }
.duo-levelcard .lvlbox{ border:none; background:none; padding:0; flex:1; }
.duo-levelcard .lvlnum{ background:#58cc02; }
.duo-foot{ text-align:center; font-size:13px; color:#afafaf; padding:6px 0 12px; }

/* ---- botones estilo Duolingo (mayúsculas, sombra de 4px) ---- */
.btn{ height:50px; padding:0 16px; border-radius:16px; font-size:15px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; box-shadow:0 4px 0 var(--accent-strong); }
.btn:hover{ transform:none; filter:brightness(1.05); box-shadow:0 4px 0 var(--accent-strong); }
.btn:active{ transform:translateY(4px); box-shadow:none; }
.btn.ghost{ background:var(--surface); color:#1cb0f6; border:2px solid var(--line); box-shadow:0 4px 0 var(--line); }
.btn.ghost:hover{ background:var(--surface2); box-shadow:0 4px 0 var(--line); }
.btn.good{ box-shadow:0 4px 0 #58a700; }
.btn.danger{ box-shadow:0 4px 0 #ea2b2b; }
.btn.small{ height:40px; padding:0 12px; font-size:13px; border-radius:12px; box-shadow:0 3px 0 var(--accent-strong); }
.btn.small.ghost{ box-shadow:0 3px 0 var(--line); }
.btn svg.ic{ margin-right:6px; }

/* ---- camino de lecciones estilo Duolingo ---- */
.lesson-path{ padding:0 0 40px; }
.lp-banner{
  width:100%; margin:24px 0 28px; padding:16px; border-radius:13px; background:var(--mc); color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:12px; box-shadow:none; min-height:90px; position:sticky; top:16px; z-index:5;
}
.lp-banner-text{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.lp-banner-kicker{ display:flex; align-items:center; gap:8px; font-size:16px; font-weight:700; letter-spacing:.2px; opacity:.95; }
.lp-banner-kicker img{ width:16px; height:16px; opacity:.85; }
.lp-banner-name{ font-size:22px; font-weight:700; line-height:1.25; }
.lp-guide{
  position:relative; display:inline-flex; align-items:center; gap:10px; flex:none; height:54px; padding:12px 14px 12px 12px;
  background:transparent; color:#fff; border:none; border-radius:16px; cursor:pointer;
  font-size:15px; font-weight:700; letter-spacing:.8px; text-transform:uppercase;
}
.lp-guide::before{ content:''; position:absolute; inset:-2px; border:2px solid rgba(0,0,0,.2); border-radius:16px; box-shadow:0 2px 0 rgba(0,0,0,.2); }
.lp-guide:active::before{ box-shadow:none; transform:translateY(2px); }
.lp-guide img{ width:24px; height:24px; }
.lp-row{ margin:12px 0; transform:translateX(calc(var(--x,0) * 35px)); }
.lp-node{
  width:70px; height:65px; border-radius:0; background:transparent; box-shadow:none; filter:none; position:relative; border:none; cursor:pointer;
  display:block; padding:0; transition:none;
}
.lp-node::after{
  content:''; position:absolute; left:0; bottom:8px; width:70px; height:57px; border-radius:50%;
  background:var(--mc); box-shadow:0 8px 0 rgba(0,0,0,.2), 0 8px 0 var(--mc); z-index:0; transition:transform .08s, box-shadow .08s;
}
.lp-node:not(.locked):hover{ filter:none; }
.lp-node:not(.locked):hover::after{ filter:brightness(1.05); }
.lp-node:not(.locked):active{ transform:none; box-shadow:none; }
.lp-node:not(.locked):active::after{ transform:translateY(8px); box-shadow:0 0 0 rgba(0,0,0,.2), 0 0 0 var(--mc); }
.lp-img{ position:absolute; left:14px; top:12px; width:42px; height:34px; z-index:1; pointer-events:none; }
.lp-node.locked{ --mc:var(--surface3); background:transparent; box-shadow:none; filter:none; cursor:default; }
.lp-node.done, .lp-node.checkpoint.done{ background:transparent; box-shadow:none; border:none; filter:none; }
.lp-node.locked .lp-img{ filter:brightness(0) saturate(0) invert(.7); }
.lp-node.done{ --mc:#ffc800; }
.lp-node.done::after{ background:var(--mc); box-shadow:0 8px 0 rgba(0,0,0,.2), 0 8px 0 var(--mc); }
.lp-node.current{ width:70px; height:65px; outline:none; animation:none; }
.lp-node.current::before{ content:''; position:absolute; left:-12px; top:-8px; width:94px; height:81px; border-radius:50%; border:8px solid var(--surface3); z-index:-1; }
.lp-start{
  top:-58px; padding:12px; border-radius:10px; background:var(--surface); color:var(--mc); border:2px solid var(--line);
  font-size:15px; font-weight:700; letter-spacing:.5px; box-shadow:none; z-index:3;
}
.lp-start::after{ bottom:-8px; width:14px; height:14px; background:var(--surface); border-right:2px solid var(--line); border-bottom:2px solid var(--line); }
.lp-check{ display:flex; right:-4px; bottom:2px; width:24px; height:24px; background:var(--surface); color:#58cc02; border:2px solid var(--line); font-size:.8rem; z-index:2; }
.lp-best{ bottom:-4px; font-size:11px; }
.lp-label{ margin-top:2px; font-size:.78rem; color:#afafaf; }
.lp-label b{ display:none; }
.lp-label.dim{ display:none; }
.lp-stars{ font-size:.8rem; }
.lp-node.checkpoint{ width:70px; height:65px; border-radius:0; border:none; --mc:var(--surface3); background:transparent; box-shadow:none; filter:none; cursor:default; }
.lp-node.checkpoint::after{ border-radius:50%; }
.lp-node.checkpoint.done{ --mc:#ffc800; }
.lp-node.checkpoint .lp-img{ filter:brightness(0) saturate(0) invert(.7); }
.lp-node.checkpoint.done .lp-img{ filter:none; }

/* ---- responsivo ---- */
@media (max-width:1180px){
  .duo-shell{ grid-template-columns:88px minmax(0,1fr); }
  .duo-side{ padding:16px 12px; grid-row:1 / span 2; }
  #duoMobileTop{ display:flex; flex-direction:column; gap:12px; max-width:592px; margin:0 auto 12px; }
  #duoMobileTop .duo-stats{ margin-bottom:4px; }
  .duo-logo{ font-size:0; padding:12px 0 22px; }
  .duo-logo::before{ content:'a'; font-size:30px; display:block; text-align:center; }
  .duo-nav-item{ justify-content:center; padding:0; gap:0; }
  .duo-nav-item > .duo-nav-label{ display:none; }
  .duo-nav-item .streak-dot, .duo-nav-item .task-badge{ right:6px; top:6px; display:grid; }
  .duo-right{ grid-column:2; position:static; max-height:none; padding:0 24px 32px; }
}
@media (max-width:640px){
  .duo-shell{ grid-template-columns:1fr; }
  .duo-side{ position:fixed; top:auto; bottom:0; left:0; right:0; height:64px; flex-direction:row; padding:6px 8px; border-right:none; border-top:2px solid var(--line); z-index:60; }
  .duo-logo{ display:none; }
  .duo-nav{ flex-direction:row; width:100%; justify-content:space-around; gap:0; }
  .duo-nav-item{ height:48px; width:42px; padding:0; }
  .duo-nav-ico{ width:28px; height:28px; }
  .duo-side .more-wrap{ display:block; }
  .duo-side .more-menu{ left:auto; right:0; top:auto; bottom:calc(100% + 10px); margin:0; }
  .duo-main{ padding:16px 12px 96px; }
  .duo-right{ grid-column:1; padding:0 12px 96px; }
  .lp-row{ transform:translateX(calc(var(--x,0) * 22px)); }
}
@media (prefers-reduced-motion: reduce){ .lp-start{ animation:none; } }

/* variables de la barra lateral por tema */
:root{ --duo-nav:#777777; --duo-nav-bg:#ddf4ff; --duo-nav-bd:#84d8ff; }
:root[data-theme="dark"]{ --duo-nav:#dce6ec; --duo-nav-bg:#202f36; --duo-nav-bd:#3f85a7; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){ --duo-nav:#dce6ec; --duo-nav-bg:#202f36; --duo-nav-bd:#3f85a7; }
}


/* ---- Práctica: tarjetas estilo "Desafíos" ---- */
.quest-banner{ display:flex; align-items:center; gap:16px; background:#ce82ff; color:#fff; border-radius:16px; padding:22px 24px; margin-bottom:24px; }
.quest-banner .qb-text{ flex:1; min-width:0; }
.quest-banner h2{ margin:0 0 6px; font-size:22px; font-weight:700; color:#fff; }
.quest-banner p{ margin:0; font-size:15px; line-height:1.45; opacity:.95; }
.quest-banner .qb-art{ width:76px; height:auto; flex:none; }
.quest-sec{ display:flex; align-items:center; gap:12px; margin:22px 0 12px; }
.quest-sec h3{ margin:0; font-size:19px; font-weight:700; color:var(--ink); }
.quest-sec .line{ flex:1; height:2px; background:var(--line); }
.quest-list{ display:flex; flex-direction:column; gap:12px; }
.quest-card{
  display:flex; align-items:center; gap:16px; width:100%; text-align:left;
  background:var(--surface); border:2px solid var(--line); border-radius:16px; padding:14px 16px;
  cursor:pointer; transition:background .15s, border-color .15s;
}
.quest-card:hover:not(.locked){ background:var(--surface2); border-color:var(--qc); }
.quest-card:active:not(.locked){ transform:translateY(2px); }
.quest-card.locked{ opacity:.6; cursor:not-allowed; }
.qc-ico{ width:52px; height:52px; flex:none; border-radius:14px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--qc) 16%, transparent); color:var(--qc); }
.qc-ico svg.ic{ width:28px; height:28px; }
.qc-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.qc-body b{ font-size:16px; color:var(--ink); }
.qc-body small{ font-size:13.5px; color:var(--muted); line-height:1.35; }
.qc-go{ flex:none; color:var(--muted); display:grid; place-items:center; }
.qc-go svg.ic{ width:20px; height:20px; }
.quest-empty{ display:flex; align-items:center; gap:10px; border:2px solid var(--line); border-radius:16px;
  padding:14px 16px; color:var(--muted); font-size:15px; margin-bottom:8px; }

/* ---- Modal de vidas estilo Duolingo ---- */
.duo-lives{ text-align:center; }
.duo-lives h2{ margin:0 0 14px; font-size:22px; font-weight:700; }
.duo-lives .hearts-bar{ gap:8px; margin:0 0 14px; }
.duo-lives .hearts-bar .hb svg.ic{ width:34px; height:34px; color:#ff4b4b; }
.duo-lives .hearts-bar .hb.off{ opacity:1; filter:none; }
.duo-lives .hearts-bar .hb.off svg.ic{ color:var(--surface3); }
.dl-state{ margin:0; font-size:17px; font-weight:700; color:var(--ink); }
.dl-sub{ margin:4px 0 18px; font-size:14px; color:var(--muted); }
.dl-opt{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; background:var(--surface);
  border:2px solid var(--line); border-radius:16px; padding:12px 14px; margin-top:10px; cursor:pointer; }
.dl-opt.is-info{ cursor:default; }
.dl-opt:hover:not(.is-info){ background:var(--surface2); }
.dl-opt-ico{ width:40px; height:40px; flex:none; display:grid; place-items:center; color:#ff4b4b; }
.dl-opt-ico svg.ic{ width:28px; height:28px; }
.dl-opt-body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.dl-opt-body b{ font-size:15px; color:var(--ink); }
.dl-opt-body small{ font-size:13px; color:var(--muted); }
.dl-opt-cta{ flex:none; font-size:13px; font-weight:700; letter-spacing:.6px; color:#1cb0f6; }

/* ---- Racha semanal (columna derecha) ---- */
#streakCard{ background:var(--warn-soft); border-color:color-mix(in srgb, var(--warn) 45%, var(--line)); }
.sw-head{ display:flex; flex-direction:column; gap:2px; margin-bottom:14px; }
.sw-head b{ font-size:19px; font-weight:700; color:#d18800; }
.sw-head span{ font-size:14px; color:var(--ink2); }
.sw-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; background:var(--surface); border-radius:14px; padding:10px 6px; }
.sw-day{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.sw-day > span{ font-size:12px; font-weight:700; color:var(--muted); }
.sw-day.is-today > span{ color:#ff9600; }
.sw-day i{ width:26px; height:26px; border-radius:50%; background:var(--surface3); display:grid; place-items:center; }
.sw-day i.on{ background:#ffc800; }
.sw-day i svg.ic{ width:16px; height:16px; color:#fff; }