/* Oilingo Geología — estilos */
:root{
  --f-display:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-app:"Work Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --ground:#F5F7F7; --card:#FFFFFF; --card-2:#F7F8F8; --ink:#111315; --ink-2:#3E4448; --muted:#6A7075; --line:#E6E9EA;
  --brand:#00857A; --brand-dark:#00635B; --brand-ink:#00635B; --brand-tint:#E3F5F1;
  --amber:#F2994A; --amber-dark:#C2701F; --amber-ink:#8A4E12; --amber-tint:#FCEDE0;
  --ok:#00857A; --ok-dark:#00635B; --ok-bg:#E3F5F1; --ok-ink:#00635B;
  --bad:#D4483B; --bad-dark:#A83326; --bad-bg:#FBEAE7; --bad-ink:#A83326;
  --sel-line:#00E0C6; --sel-bg:#E8FBF8; --sel-ink:#00635B;
  --lock:#EBEEEE; --lock-sh:#D3D9D9; --lock-ink:#98A1A3;
  --map-land:#EDF0F0; --map-line:#C3CACB;
  --m-dark:#111315; --m-body:#00857A; --m-head:#F2994A;
  --btn:#111315; --btn-ink:#FFFFFF; --btn-sh:#000000;
  --focus:#00857A; --shadow:0 18px 40px -24px rgba(17,19,21,.35);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
  --ground:#0B0D0E; --card:#16191B; --card-2:#1E2224; --ink:#EDF1F2; --ink-2:#B8C1C5; --muted:#8E979A; --line:#262C2F;
    --brand-dark:#00635B; --brand-ink:#00E0C6; --brand-tint:#0F2E2B;
    --amber-ink:#F2994A; --amber-tint:#3A2610;
    --ok-bg:#0F2E2B; --ok-ink:#5FE3D2; --bad-bg:#3A1A17; --bad-ink:#F09A8F;
    --sel-line:#00E0C6; --sel-bg:#0F2E2B; --sel-ink:#7FEEDF;
    --lock:#22282B; --lock-sh:#14181A; --lock-ink:#727B7E;
    --map-land:#1A1F21; --map-line:#394145;
    --m-dark:#EDF1F2; --m-body:#00857A; --m-head:#00E0C6;
    --btn:#00857A; --btn-ink:#FFFFFF; --btn-sh:#00635B;
    --focus:#00E0C6; --shadow:0 18px 40px -24px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --ground:#0B0D0E; --card:#16191B; --card-2:#1E2224; --ink:#EDF1F2; --ink-2:#B8C1C5; --muted:#8E979A; --line:#262C2F;
    --brand-dark:#00635B; --brand-ink:#00E0C6; --brand-tint:#0F2E2B;
    --amber-ink:#F2994A; --amber-tint:#3A2610;
    --ok-bg:#0F2E2B; --ok-ink:#5FE3D2; --bad-bg:#3A1A17; --bad-ink:#F09A8F;
    --sel-line:#00E0C6; --sel-bg:#0F2E2B; --sel-ink:#7FEEDF;
    --lock:#22282B; --lock-sh:#14181A; --lock-ink:#727B7E;
    --map-land:#1A1F21; --map-line:#394145;
    --m-dark:#EDF1F2; --m-body:#00857A; --m-head:#00E0C6;
  --focus:#00E0C6; --shadow:0 18px 40px -24px rgba(0,0,0,.8);
  --btn:#00857A; --btn-ink:#FFFFFF; --btn-sh:#00635B;
}

/* ---------- tema sepia: papel cálido, para leer mucho rato ---------- */
:root[data-theme="sepia"]{
  --ground:#F3EBDD; --card:#FBF5EA; --card-2:#F0E6D5; --ink:#2E2416; --ink-2:#4A3D28; --muted:#6B5934; --line:#E0D3BE;
  --brand-tint:#E2EFE9; --amber-tint:#F7E6CC;
  --ok-bg:#E2EFE9; --ok-ink:#00554E; --bad-bg:#F7E4DF; --bad-ink:#9C3527;
  --sel-line:#00857A; --sel-bg:#E6F2EE; --sel-ink:#00554E;
  --lock:#E8DCC7; --lock-sh:#D0C0A4; --lock-ink:#8F7B55;
  --map-land:#EFE6D6; --map-line:#CBB99A;
  --m-dark:#2E2416; --m-body:#00857A; --m-head:#C2701F;
  --btn:#2E2416; --btn-ink:#FBF5EA; --btn-sh:#1A1309;
  --shadow:0 18px 40px -24px rgba(60,45,20,.4);
}

/* ---------- tema cielo: claro, en azul ---------- */
:root[data-theme="cielo"]{
  --ground:#EDF4FA; --card:#FFFFFF; --card-2:#F2F7FC; --ink:#10212E; --ink-2:#2F4757; --muted:#5B7083; --line:#D4E2EF;
  --brand-tint:#DFF2EE; --amber-tint:#FBEAD7;
  --ok-bg:#DFF2EE; --ok-ink:#00635B; --bad-bg:#FBE7E4; --bad-ink:#A83326;
  --sel-line:#0E8FA8; --sel-bg:#DEF0F6; --sel-ink:#0A5F70;
  --lock:#DCE7F1; --lock-sh:#C2D3E2; --lock-ink:#8496A6;
  --map-land:#E3EDF6; --map-line:#B4C8DA;
  --m-dark:#10212E; --m-body:#00857A; --m-head:#F2994A;
  --btn:#10212E; --btn-ink:#FFFFFF; --btn-sh:#04121C;
  --shadow:0 18px 40px -24px rgba(16,33,46,.35);
}
*,*::before,*::after{box-sizing:border-box}
html,body{background:var(--ground);touch-action:manipulation;-webkit-text-size-adjust:100%;overflow-x:clip}   /* el ancho es el de la pantalla: nada la corre de costado */
body{margin:0;color:var(--ink);font:700 15px/1.45 var(--f-app);-webkit-font-smoothing:antialiased}
body.noscroll{overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--brand-ink)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.ic{flex:none;display:inline-block;vertical-align:middle}
.c-brand{color:var(--brand-ink)} .c-amber{color:var(--amber)}
[hidden]{display:none!important}

/* ---------- marco ---------- */
#root{display:grid;grid-template-columns:232px minmax(0,1fr) 300px;grid-template-areas:"side main rail";min-height:calc(100vh * var(--vhz, 1))}
.side{grid-area:side;position:sticky;top:0;height:calc(100vh * var(--vhz, 1));padding:20px 14px;border-inline-end:2px solid var(--line);display:flex;flex-direction:column;gap:18px}
.brand{display:flex;align-items:center;gap:8px;padding:0 8px}
.brand .mascot{width:48px}
.wordmark{font:700 30px/1 var(--f-display);letter-spacing:-.04em;color:var(--ink)}
.login-marca .wordmark{font-size:38px}
.course{display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 12px;border:2px solid var(--line);border-radius:14px;color:var(--brand-ink)}
.course small{display:block;font:800 12px/1 var(--f-app);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.course b{display:block;color:var(--ink);font-weight:900}
.snav{display:grid;gap:6px}
.snav button,.tabbar button{display:flex;align-items:center;gap:14px;border:2px solid transparent;background:none;border-radius:14px;padding:10px 14px;font:900 15px/1 var(--f-app);color:var(--muted);letter-spacing:.02em;text-align:start}@media (hover:hover){.snav button:hover,.tabbar button:hover{background:var(--card-2)}}
.snav button[aria-current="page"],.tabbar button[aria-current="page"]{color:var(--sel-ink);background:var(--sel-bg);border-color:var(--sel-line)}
.main{grid-area:main;width:100%;min-width:0;max-width:640px;margin:0 auto;padding:22px 20px 90px;outline:none}
.rail{grid-area:rail;position:sticky;top:0;height:calc(100vh * var(--vhz, 1));overflow:auto;padding:22px 18px;display:flex;flex-direction:column;gap:14px}
.topbar{display:none}
.tabbar{display:none}
@media (max-width:1100px){
  #root{grid-template-columns:92px minmax(0,1fr);grid-template-areas:"side main"}
  .rail{display:none}
  .side .wordmark,.side .course span,.snav span{display:none}
  .side{align-items:center}
  .brand{padding:0}
  .snav button{justify-content:center;padding:12px}
}
@media (max-width:700px){
  #root{display:block}
  .side{display:none}
  .topbar{display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:20;background:var(--ground);border-bottom:2px solid var(--line);padding:calc(8px + env(safe-area-inset-top,0px)) 14px 8px}
  .topbar .course{border:none;padding:6px 4px;flex:1}
  .tstat{display:flex;align-items:center;gap:4px;font:900 15px/1 var(--f-app);padding:6px}
  .tstat.streak{color:var(--lock-ink)} .tstat.streak.on{color:var(--brand-ink)}
  .tstat.bbl{color:var(--amber-ink)} .tstat.bbl .ic{color:var(--amber)}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--ground);border-top:2px solid var(--line);padding:6px 8px calc(8px + env(safe-area-inset-bottom,0px))}
  .tabbar button{flex-direction:column;gap:3px;font-size:12px;padding:6px 0;text-align:center;align-items:center;min-width:0}
  .tabbar button span{overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .main{padding:16px 14px 110px}
}

/* ---------- tarjetas y botones ---------- */
.card{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:16px;margin-bottom:14px}
.rail .card{margin:0}
.card h3{display:flex;align-items:center;gap:8px;font:900 17px/1.25 var(--f-app);margin:0 0 6px}
.card p{margin:0 0 12px;color:var(--muted);font-size:14.5px}
.v-title{font:900 26px/1.15 var(--f-app);margin:6px 2px 16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;border:none;border-radius:14px;padding:14px 16px;font:700 16px/1 var(--f-display);letter-spacing:-.01em;color:var(--btn-ink);background:var(--btn);box-shadow:0 4px 0 var(--btn-sh);transition:transform .06s;min-height:44px}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--brand-dark)}
.btn:disabled{background:var(--lock);color:var(--lock-ink);box-shadow:0 4px 0 var(--lock-sh);cursor:not-allowed;transform:none}
.btn.ok{background:var(--ok);box-shadow:0 4px 0 var(--ok-dark)}
.btn.bad{background:var(--bad);box-shadow:0 4px 0 var(--bad-dark)}
.btn-amber{background:var(--amber);color:#2B1D05;box-shadow:0 4px 0 var(--amber-dark)}
.btn-ghost{background:var(--card);color:var(--ink);border:2px solid var(--line);box-shadow:0 4px 0 var(--line)}
.btn-ghost.danger{color:var(--bad-ink)}
.btn-white{background:#fff;color:var(--lv,var(--brand));box-shadow:0 4px 0 rgba(0,0,0,.2)}
.icon-btn{width:44px;height:44px;border:none;background:none;border-radius:12px;display:grid;place-items:center;color:var(--muted);flex:none}@media (hover:hover){.icon-btn:hover{background:var(--card-2)}}
.linkbtn{border:none;background:none;color:var(--brand-ink);font:800 14.5px var(--f-app);display:inline-flex;align-items:center;justify-content:center;min-height:44px;gap:6px;padding:10px 12px;text-decoration:underline;text-underline-offset:3px}
.bar{height:10px;border-radius:6px;background:var(--lock);overflow:hidden}
.bar i{display:block;height:100%;border-radius:6px;background:var(--lv,var(--brand))}
.dot{width:10px;height:10px;border-radius:50%;flex:none;display:inline-block}

/* ---------- camino ---------- */
.path{display:flex;flex-direction:column;gap:30px}
.level{--lv:#2F7D5B}
.lvhead{position:sticky;top:0;z-index:6;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;align-items:center;background:var(--lv);color:#fff;border-radius:18px;padding:14px 18px;box-shadow:0 5px 0 color-mix(in srgb,var(--lv) 70%,#000)}
.lvhead small{display:block;font:900 12.5px/1.2 var(--f-app);letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.lvhead h2{margin:2px 0 0;font:900 24px/1.1 var(--f-app)}
.lvhead p{margin:2px 0 0;font:800 14px/1.3 var(--f-app);opacity:.92}
.lvprog{display:grid;gap:5px;justify-items:end;min-width:90px;font:900 13px var(--f-app)}
.lvprog .bar{width:90px;background:rgba(255,255,255,.3)}
.lvprog .bar i{background:#fff}
.lvhead .btn{grid-column:1/-1;background:rgba(255,255,255,.16);box-shadow:none;border:2px solid rgba(255,255,255,.45);padding:10px}
.level.locked .lvhead{filter:saturate(.35)}
.unit{position:relative;margin-top:22px}
.uhead{display:flex;align-items:center;gap:12px;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:10px 12px;margin:0 0 20px}
.uhead small{display:block;font:900 12.5px/1 var(--f-app);color:var(--muted);letter-spacing:.07em;text-transform:uppercase}
.uhead b{display:block;font:900 16px/1.2 var(--f-app);margin-top:3px}
.uic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--lv) 16%,var(--card));color:var(--lv);flex:none}
.uintro{margin-inline-start:auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border:2px solid var(--line);border-bottom-width:4px;background:var(--card);border-radius:12px;padding:7px 13px;font:900 13px/1 var(--f-app);color:var(--ink-2)}
.uintro:disabled{opacity:.45;cursor:not-allowed}
.nrow{position:relative;height:86px;display:flex;justify-content:center}
.nrow.cur-row{margin-top:46px}
.node{position:relative;width:70px;height:62px;border-radius:50%;border:none;display:grid;place-items:center;padding:0;transform:translateX(var(--x));background:var(--lv);color:#fff;box-shadow:0 6px 0 color-mix(in srgb,var(--lv) 65%,#000)}
.node:active{transform:translateX(var(--x)) translateY(4px);box-shadow:0 2px 0 color-mix(in srgb,var(--lv) 65%,#000)}
.node.locked{background:var(--lock);color:var(--lock-ink);box-shadow:0 6px 0 var(--lock-sh)}
.node.open{background:color-mix(in srgb,var(--lv) 55%,var(--card))}
/* repaso opcional: más chico y sin relleno, para que se lea como un desvío y no como un paso; bloqueado, más chico y gris */
.node.n-opc.locked{width:56px;height:50px}
.node.n-opc.open{width:56px;height:50px;background:var(--card);color:var(--lv);outline:2px dashed color-mix(in srgb,var(--lv) 60%,transparent);outline-offset:-2px}
.node.current::before{content:"";position:absolute;inset:-9px -9px -15px;border-radius:50%;border:5px solid color-mix(in srgb,var(--lv) 30%,transparent)}
.node.t-exam{width:84px;height:72px;background:var(--amber);color:#2B1D05;box-shadow:0 6px 0 var(--amber-dark)}
.node.t-exam.locked{background:var(--lock);color:var(--lock-ink);box-shadow:0 6px 0 var(--lock-sh)}
.node.t-exam.done{background:var(--amber)}
.bubble{position:absolute;bottom:calc(100% + 16px);left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--card);border:2px solid var(--line);color:var(--ink);font:900 12.5px/1 var(--f-app);letter-spacing:.06em;text-transform:uppercase;padding:9px 12px;border-radius:12px;pointer-events:none;animation:bob 1.8s ease-in-out infinite;z-index:3}
.bubble::after{content:"";position:absolute;top:100%;left:50%;width:12px;height:12px;background:var(--card);border-right:2px solid var(--line);border-bottom:2px solid var(--line);transform:translate(-50%,-6px) rotate(45deg)}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-5px)}}
.pop{position:absolute;top:78px;left:0;right:0;z-index:8;background:var(--lv);color:#fff;border-radius:16px;padding:14px 16px 16px;box-shadow:0 16px 30px -12px rgba(0,0,0,.45);text-align:start;max-width:420px;margin:0 auto}
.pop::before{content:"";position:absolute;top:-7px;left:calc(50% + var(--x) - 8px);width:16px;height:16px;background:inherit;transform:rotate(45deg);border-radius:3px}
.pop h4{margin:0;font:900 16px/1.25 var(--f-app)}
.pop p{margin:5px 0 12px;font:800 14px/1.4 var(--f-app);opacity:.95}
.pop.muted{background:var(--card);color:var(--ink);border:2px solid var(--line)}
.pop.muted p{color:var(--muted);margin-bottom:0}
.path-mascot{position:absolute;inset-inline-end:0;top:-6px;width:118px;pointer-events:none}
.path-end{display:flex;gap:8px;align-items:center;justify-content:center;color:var(--muted);font-size:14px;margin:10px 0 0}
@media (max-width:700px){
  .lvhead{position:relative;top:auto}
  .path-mascot{width:76px;inset-inline-end:-6px;top:-2px}
  .node{transform:translateX(calc(var(--x) * .7))}
  .node:active{transform:translateX(calc(var(--x) * .7)) translateY(4px)}
  .pop::before{left:calc(50% + var(--x) * .7 - 8px)}
}

/* ---------- panel lateral ---------- */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat-big{display:grid;justify-items:start;gap:2px}
.stat-big b{font:900 26px/1 var(--f-app)}
.stat-big span{font:800 12.5px/1.2 var(--f-app);color:var(--muted)}
.lvcard small{font:900 11px var(--f-app);color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.lvcard h3{color:var(--lv);margin:2px 0}
.lvcard .cnt{display:block;margin-top:6px;font:800 12.5px var(--f-app);color:var(--muted)}

/* ---------- repaso, ligas, perfil ---------- */
.mlist{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:9px}
.mlist li{display:grid;grid-template-columns:10px 1fr;gap:10px;align-items:start;font-size:14.5px}
.mlist .dot{margin-top:6px}
.gloss{list-style:none;margin:0;padding:0}
.gloss li{display:grid;gap:2px;padding:9px 0;border-top:1px solid var(--line)}
.gloss b{font-weight:900} .gloss span{color:var(--muted);font-size:14px}
.league-head{display:flex;gap:12px;align-items:flex-start}
.lic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--card-2);flex:none}
.league-head h3{margin:0}
.league-head p{margin:4px 0 0}
.ladder{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-top:16px}
.rung{display:flex;flex-direction:column;align-items:center;gap:6px;font:800 11px/1.15 var(--f-app);color:var(--muted);text-align:center}
.rung.cur{color:var(--ink)}
.dropw{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--card-2)}
.rung.cur .dropw{box-shadow:0 0 0 3px var(--sel-line)}
.note-ex{font-size:13px!important}
.board{list-style:none;margin:0;padding:0}
.board li{display:grid;grid-template-columns:24px 32px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 8px;border-radius:12px;font-size:14.5px}
.board li.me{background:var(--sel-bg);color:var(--sel-ink)}
.board .rk{color:var(--muted);text-align:center;font-variant-numeric:tabular-nums}
.board .av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff;font-weight:900}
.board .pts{font-variant-numeric:tabular-nums;font-weight:900}
.board li.zone{display:flex;gap:6px;font:900 11px/1 var(--f-app);letter-spacing:.08em;text-transform:uppercase;color:var(--ok-ink)}
.zone .zl{flex:1;height:2px;background:var(--ok);opacity:.45;border-radius:2px}
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.sbox{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:12px;display:flex;gap:10px;align-items:center}
.sbox b{display:block;font:900 21px/1 var(--f-app)}
.sbox small{display:block;font:800 12.5px/1.2 var(--f-app);color:var(--muted);margin-top:4px}
.tprog{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.tprog li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:4px 10px;align-items:center}
.tprog .mini{grid-row:span 2;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--lv);color:#fff;font-weight:900}
.tprog em{font-style:normal;color:var(--ok-ink);font-size:12.5px}
.tprog .cnt{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.tprog .bar{grid-column:2/4;height:8px}
.switch{display:inline-flex;align-items:center;gap:10px;border:2px solid var(--line);background:var(--card-2);border-radius:999px;padding:6px 14px 6px 6px;font:900 14px var(--f-app);min-height:44px}
.switch span{width:38px;height:22px;border-radius:11px;background:var(--lock);position:relative}
.switch span::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:inset-inline-start .15s}
.switch[aria-checked="true"] span{background:var(--brand)}
.switch[aria-checked="true"] span::after{inset-inline-start:19px}
.credits details[open] ul{margin:0;padding-inline-start:18px;display:grid;gap:5px;font-size:13px;color:var(--muted)}

/* ---------- capa superpuesta ---------- */
.ov{position:fixed;inset:0;z-index:90;background:var(--ground);overflow:auto}
.ov-in{min-height:100%;display:flex;flex-direction:column}
.onb,.res{width:100%;max-width:560px;margin:auto;padding:32px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.onb .mascot{width:210px}
.onb h1{font:900 28px/1.15 var(--f-app);margin:6px 0 0;text-wrap:balance}
.onb p{margin:0;color:var(--muted);font-size:16px;line-height:1.5;max-width:46ch}
.onb .btn{max-width:360px}
.brandline{display:flex;align-items:center;gap:8px;font:900 15px var(--f-app);color:var(--brand-ink)}
.brandline .wordmark{font-size:24px}
.lvpicks{display:grid;gap:10px;width:100%;margin-top:6px}
.lvpick{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;text-align:start;border:2px solid var(--line);border-bottom-width:4px;background:var(--card);border-radius:16px;padding:12px 14px}@media (hover:hover){.lvpick:hover{border-color:var(--lv)}}
.lvnum{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--lv);color:#fff;font:900 20px var(--f-app)}
.lvpick b{display:block;font:900 17px/1.2 var(--f-app)}
.lvpick small{display:block;color:var(--muted);font-size:14px;margin-top:2px}
.res .mascot{width:200px}
.res h2{font:900 28px/1.15 var(--f-app);margin:0;color:var(--amber-ink)}
.res.fail h2{color:var(--bad-ink)}
.res-sub{margin:0;color:var(--muted);font-size:15.5px;max-width:44ch}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%}
.t3{border-radius:14px;border:2px solid var(--c);overflow:hidden;background:var(--card)}
.t3 small{display:block;background:var(--c);color:var(--ci);font:900 11px/1 var(--f-app);letter-spacing:.07em;text-transform:uppercase;padding:7px 4px}
.t3 b{display:flex;align-items:center;justify-content:center;gap:5px;padding:12px 4px;font:900 20px/1 var(--f-app)}
.t-bbl{--c:var(--amber);--ci:#2B1D05} .t-ok{--c:var(--ok);--ci:#fff} .t-time{--c:var(--brand);--ci:#fff}
.res-line{margin:0;color:var(--muted);font-size:14.5px;display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap}
.res-line b{color:var(--ink)}
.res-streak{display:flex;gap:12px;align-items:center;text-align:start;width:100%;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:12px 14px;color:var(--brand-ink)}
.res-streak b{display:block;color:var(--ink);font-weight:900}
.res-streak span{display:block;color:var(--muted);font-size:14px}
.lb-ov{background:rgba(6,14,17,.92)}
.lb{margin:auto;padding:20px;max-width:1000px;display:flex;flex-direction:column;align-items:center;gap:14px}
.lb img{max-width:100%;max-height:calc(75vh * var(--vhz, 1));border-radius:12px;display:block}
.lb figure{margin:0}
.lb figcaption{color:#E6EEF0;margin-top:10px;display:grid;gap:4px;font-size:14.5px}
.lb figcaption span{color:#B9C8CC;font-size:13px}
.lb figcaption a{color:#8AD7E1}
.lb .btn{max-width:220px}

/* ---------- slides ---------- */
.sl{flex:none;display:flex;flex-direction:column;height:calc(100vh * var(--vhz, 1));height:calc(100dvh * var(--vhz, 1));min-height:0}
.sl-top{flex:none;display:flex;align-items:center;gap:12px;padding:12px 16px;max-width:1040px;width:100%;margin:0 auto}
.dots{flex:1;display:flex;gap:6px}
.dots i{flex:1;height:8px;border-radius:5px;background:var(--lock)}
.dots i.seen{background:color-mix(in srgb,var(--lv) 45%,var(--lock))}
.dots i.on{background:var(--lv)}
.sl-skip{display:inline-flex;gap:6px;align-items:center;border:2px solid var(--line);background:var(--card);border-radius:12px;padding:8px 12px;font:900 14px var(--f-app);color:var(--ink-2)}
.sl-count{font:900 13px var(--f-app);color:var(--muted);min-width:40px;text-align:end}
.sl-body{flex:1;min-height:0;overflow:auto;display:flex;align-items:center;align-items:safe center;outline:none;padding:8px 20px 20px}
.cover,.slide{max-width:1000px;width:100%;margin:0 auto}
.cover{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;align-items:center}
.cover .mascot{width:100%;max-width:300px}
.chip-lv{display:inline-block;background:var(--lv);color:#fff;font:900 12px/1 var(--f-app);letter-spacing:.06em;text-transform:uppercase;padding:7px 10px;border-radius:8px}
.cover h2{font:900 clamp(30px,4vw,44px)/1.1 var(--f-app);margin:12px 0 10px;text-wrap:balance}
.lead{font-size:18px;line-height:1.5;color:var(--ink-2);margin:0 0 18px}
.learn-h{font:900 12px var(--f-app);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.learn{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.learn li{display:flex;gap:8px;align-items:flex-start;font-size:16px}
.learn .ic{color:var(--ok);margin-top:2px}
.slide.has-vis{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:30px;align-items:center}
.slide h2{font:900 clamp(24px,3vw,34px)/1.15 var(--f-app);margin:0 0 10px;text-wrap:balance}
.slide p{font-size:17px;line-height:1.55;color:var(--ink-2);margin:0 0 14px;max-width:60ch}
.pts{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.pts li{position:relative;padding-inline-start:20px;font-size:15.5px;line-height:1.45}
.pts li::before{content:"";position:absolute;inset-inline-start:3px;top:.55em;width:8px;height:8px;border-radius:2px;background:var(--lv);transform:rotate(45deg)}
/* recuadro de caso o ejemplo: celeste, como el ejemplo en un libro; distinto de los verdes de la app para que no se lea como un acierto */
.caja-caso{background:#E6F1FA;border-radius:14px;padding:12px 14px;margin:0 0 14px;max-width:60ch}
.caja-caso .cc-tag{display:flex;align-items:center;gap:6px;font:800 11.5px/1.2 var(--f-app);letter-spacing:.07em;text-transform:uppercase;color:#2B5F86;margin-bottom:6px}
.caja-caso .cc-tag svg{flex:none}
.slide .caja-caso p{margin:0;font-size:15px;font-weight:400;line-height:1.5;color:var(--ink-2)}
:root[data-theme="dark"] .caja-caso{background:#14222E}:root[data-theme="dark"] .caja-caso .cc-tag{color:#8EC3E8}
@media (prefers-color-scheme: dark){:root:not([data-theme]) .caja-caso{background:#14222E}:root:not([data-theme]) .caja-caso .cc-tag{color:#8EC3E8}}
.keyfig{display:grid;gap:2px;border-inline-start:5px solid var(--lv);background:var(--card);border-radius:14px;border-start-start-radius:0;border-end-start-radius:0;padding:12px 16px;margin:0 0 14px}
.keyfig b{font:900 28px/1.1 var(--f-app);color:var(--lv)}
.keyfig span{color:var(--ink-2);font-size:14.5px}
.sl-foot{flex:none;display:flex;gap:12px;justify-content:space-between;padding:14px 20px calc(16px + env(safe-area-inset-bottom,0px));max-width:1040px;width:100%;margin:0 auto}
.sl-foot .btn{width:auto;min-width:150px}
@media (max-width:760px){
  .cover,.slide.has-vis{grid-template-columns:minmax(0,1fr);gap:16px}
  .cover-art{display:none}
  .sl-body{align-items:flex-start}
  .slide p{font-size:16px}
  .sl-foot .btn{flex:1;min-width:0}
}

/* ---------- fotos y diagramas ---------- */
.photo{margin:0}
.photo-btn{display:block;position:relative;width:100%;border:none;padding:0;background:none;border-radius:14px;overflow:hidden}
.photo img{display:block;width:100%;height:auto;max-height:calc(52vh * var(--vhz, 1));object-fit:cover;border-radius:14px}
.photo-zoom{position:absolute;inset-inline-end:8px;bottom:8px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(6,14,17,.6);color:#fff}
.photo figcaption{font:700 12.5px/1.4 var(--f-app);color:var(--muted);margin-top:6px}
.photo .credit{display:block;font-size:11.5px;opacity:.85}
.quizfig .cap{display:none}
.answered .quizfig .cap{display:inline;color:var(--ink-2)}
.dgwrap{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:10px}
/* dibujo que se agranda al tocarlo */
.dg-tap{display:block;width:100%;position:relative;font:inherit;color:inherit;text-align:inherit;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.dg-lupa{position:absolute;right:6px;bottom:6px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--card);border:1.5px solid var(--line);color:var(--muted);pointer-events:none}
.lb-dg{width:100%;max-height:calc(74vh * var(--vhz, 1));overflow:auto;-webkit-overflow-scrolling:touch;border-radius:14px}
.lb-dg .dgwrap{width:max(100%,560px);padding:8px}
.lb-dg .dgwrap svg{width:100%;height:auto;display:block}
@media (orientation:landscape){.lb-dg .dgwrap{width:100%}}
.lb-hint{color:#B9C8CC;font-size:13px;margin:0;text-align:center}
.dg{display:block;width:100%;height:auto;max-height:calc(60vh * var(--vhz, 1));overflow:visible}
.dg text{font-family:var(--f-app)}
.dg .lbl{font-weight:800;font-size:11px;fill:var(--ink);paint-order:stroke;stroke:var(--card);stroke-width:3px;stroke-linejoin:round}
.dg .lbl.sm{font-size:9.5px;font-weight:700}
.dg .note{font-weight:700;font-size:9.5px;fill:var(--muted)}
.dg .stxt{font-weight:800;font-size:9px;fill:#3E4448}
.dg .boxt{font-weight:900;font-size:12px}
.dg .boxt2{font-weight:800;font-size:9.5px;fill:var(--ink)}
.dg .boxs{font-weight:700;font-size:8.5px}
.dg .op{font-weight:900;font-size:13px;fill:var(--ink)}
.dg .arw{stroke:var(--ink-2);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.dg .arw.mig{stroke:#2E8B57;stroke-width:2.4}
.dg .panel{fill:var(--card-2);stroke:var(--line)}
.dg .hit{fill:transparent}
.dg .prov{fill:var(--map-land);stroke:var(--map-line);stroke-width:.7}
.dgwrap.quiz .lbl,.dgwrap.quiz .reveal{display:none}
.dg .quiz-only{display:none}
.dgwrap.quiz .quiz-only{display:inline}
/* los dibujos son láminas: en modo oscuro se mantienen sobre papel claro para que rocas y rótulos se lean igual */
@media (prefers-color-scheme: dark){:root:not([data-theme]) .dgwrap{--card:#FBFAF6;--card-2:#F1EEE6;--ink:#111315;--ink-2:#3E4448;--muted:#6A7075;--line:#DDD8CC;--map-land:#E9EEF0;--map-line:#B9C6CB;--sel-line:#00857A;--sel-bg:#E3F5F1;--sel-ink:#00635B;--ok-bg:#E3F5F1;--ok-ink:#00635B;--bad-bg:#FBEAE7;--bad-ink:#A83326;color:var(--ink);border-color:transparent}}
:root[data-theme="dark"] .dgwrap{--card:#FBFAF6;--card-2:#F1EEE6;--ink:#111315;--ink-2:#3E4448;--muted:#6A7075;--line:#DDD8CC;--map-land:#E9EEF0;--map-line:#B9C6CB;--sel-line:#00857A;--sel-bg:#E3F5F1;--sel-ink:#00635B;--ok-bg:#E3F5F1;--ok-ink:#00635B;--bad-bg:#FBEAE7;--bad-ink:#A83326;color:var(--ink);border-color:transparent}
.hot .z,.corr .z{cursor:pointer}@media (hover:hover){.hot .z:hover{filter:brightness(1.08)}}
.z.zsel{stroke:var(--sel-line)!important;stroke-width:3px!important}
.hit.zsel{fill:rgba(88,167,179,.28)}
.z.zok{stroke:var(--ok)!important;stroke-width:3px!important}
.hit.zok{fill:rgba(0,133,122,.25)}
.z.zbad{stroke:var(--bad)!important;stroke-width:3px!important}
.hit.zbad{fill:rgba(212,72,59,.22)}
path.z[stroke="transparent"].zsel{stroke:rgba(0,224,198,.6)!important;stroke-width:14px!important}
path.z[stroke="transparent"].zok{stroke:rgba(0,133,122,.55)!important;stroke-width:14px!important}
path.z[stroke="transparent"].zbad{stroke:rgba(212,72,59,.5)!important;stroke-width:14px!important}
.z.zlink{fill:rgba(88,167,179,.16)}
.well .rig{stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:round}
.well .bore{stroke:var(--ink);stroke-width:2.4;stroke-dasharray:100;stroke-dashoffset:100;fill:none}
.well .bit{fill:var(--ink);opacity:0}
.well .wname{font-weight:900;font-size:11px;fill:var(--ink)}
.well-hit{fill:transparent;cursor:pointer}
.well.wsel .rig,.well.wsel .wname{stroke:var(--brand-ink);fill:var(--brand-ink)}
.well.drilling .bore{animation:drill .9s ease-out forwards}
.well.shown .bit{opacity:1}
.well.res-agua .bit{fill:#4A90D9} .well.res-petroleo .bit{fill:#2E8B57} .well.res-gas .bit{fill:#E4572E} .well.res-seco .bit{fill:#8C959A}
@keyframes drill{to{stroke-dashoffset:0}}
.perf svg,.pick svg{cursor:crosshair}
.game .aim{stroke:var(--brand-ink);stroke-width:1.4;stroke-dasharray:4 4;fill:none}
.game .rig-big{stroke:var(--ink);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.game .bore2{stroke:var(--ink);stroke-width:3;fill:none;stroke-dasharray:100;stroke-dashoffset:100;animation:drill 1s ease-out forwards}
.game .best{stroke:var(--ok);stroke-width:2.2;stroke-dasharray:5 4;fill:none}
.game .best-dot{fill:var(--ok)}
.game .pickline{stroke:var(--brand);stroke-width:2.2;stroke-dasharray:6 4}
.game .pickline.good{stroke:var(--ok);stroke-dasharray:none}
.game .pickline.bad{stroke:var(--bad)}
.game .picktxt{font-weight:900;font-size:10px;fill:#111315;paint-order:stroke;stroke:#FAF8F2;stroke-width:3px}
.game .picktxt.good{fill:#11683A}
.game .clink{stroke:var(--brand);stroke-width:3;stroke-linecap:round}
.game .clink.good{stroke:var(--ok)} .game .clink.bad{stroke:var(--bad)} .game .clink.ghost{stroke-dasharray:5 4;opacity:.85}
.readout{margin:10px 2px 0;font-size:14.5px;color:var(--ink-2)}

/* ---------- lecciones ---------- */
.play{position:fixed;inset:0;z-index:70;background:var(--ground);display:flex;flex-direction:column}
.p-top{flex:none;padding-top:env(safe-area-inset-top,0px)}
.p-top-in{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:10px 16px}
.pbar{flex:1;height:16px;border-radius:9px;background:var(--lock);overflow:hidden}
.pbar i{display:block;height:100%;width:0;border-radius:9px;background:var(--lv);transition:width .35s ease}
.p-count{font:900 13px var(--f-app);color:var(--muted);min-width:44px;text-align:end;font-variant-numeric:tabular-nums}
.p-lives{display:flex;gap:2px;color:var(--bad)}
.heart.lost{color:var(--lock)}
.p-body{flex:1;overflow:auto;outline:none}
.p-inner{max-width:720px;margin:0 auto;padding:8px 20px 28px}
.p-foot{flex:none;border-top:2px solid var(--line);background:var(--ground);max-height:calc(60vh * var(--vhz, 1));overflow:auto}
.p-foot.ok{background:var(--ok-bg);border-top-color:transparent}
.p-foot.bad{background:var(--bad-bg);border-top-color:transparent}
.p-foot-in{max-width:720px;margin:0 auto;padding:14px 20px calc(16px + env(safe-area-inset-bottom,0px))}
.ex-kind{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:900 12px/1 var(--f-app);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.ex-unit{letter-spacing:0;text-transform:none;font-weight:800;background:var(--card-2);border-radius:6px;padding:4px 7px}
.retry{display:inline-flex;align-items:center;gap:6px;background:var(--amber-tint);color:var(--amber-ink);font:900 11.5px/1 var(--f-app);letter-spacing:.04em;text-transform:uppercase;padding:6px 9px;border-radius:8px;margin-bottom:12px}
.ex-q{font:900 clamp(19px,2.4vw,23px)/1.3 var(--f-app);margin:12px 0 6px;text-wrap:pretty}
.ex-help{margin:0 0 12px;color:var(--muted);font-size:14px}
.ex-photo{margin:10px 0 4px}
.ex-photo img{max-height:calc(40vh * var(--vhz, 1))}
.opts{display:grid;gap:10px;margin-top:16px}
.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:start;border:2px solid var(--line);border-bottom-width:4px;background:var(--card);border-radius:14px;padding:13px 14px;font:800 16px/1.3 var(--f-app);color:var(--ink)}@media (hover:hover){.opt:hover:not(:disabled){background:var(--card-2)}}
.opt .k{flex:none;width:26px;height:26px;border-radius:8px;border:2px solid var(--line);display:grid;place-items:center;font:900 13px/1 var(--f-app);color:var(--muted)}
.opt.sel{border-color:var(--sel-line);background:var(--sel-bg);color:var(--sel-ink)}
.opt.right{border-color:var(--ok);background:var(--ok-bg);color:var(--ok-ink)}
.opt.wrong{border-color:var(--bad);background:var(--bad-bg);color:var(--bad-ink)}
.opt:disabled,.tile:disabled,.oitem:disabled,.chip:disabled,.blank:disabled,.bin:disabled{cursor:default}
.tf{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.tf .opt{justify-content:center;padding:18px 10px}
.tf.big .opt{font-size:18px;padding:24px 10px}
.sprint-q{font-size:clamp(20px,2.6vw,26px)}
.sprint-note{margin:0;text-align:center;color:var(--muted)}
.match{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.tile{min-height:58px;border:2px solid var(--line);border-bottom-width:4px;background:var(--card);border-radius:14px;padding:8px 10px;font:800 14.5px/1.25 var(--f-app);color:var(--ink);text-align:center}
.tile.term{font-size:15.5px;font-weight:900}@media (hover:hover){.tile:hover:not(:disabled){background:var(--card-2)}}
.tile.sel{border-color:var(--sel-line);background:var(--sel-bg);color:var(--sel-ink)}
.tile.done{border-color:var(--line);background:var(--card-2);color:var(--lock-ink);border-bottom-width:2px}
.tile.fok{border-color:var(--ok);background:var(--ok-bg);color:var(--ok-ink)}
.tile.fbad{border-color:var(--bad);background:var(--bad-bg);color:var(--bad-ink);animation:shake .35s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.ord{display:grid;gap:8px}
.oitem{display:flex;align-items:center;gap:12px;width:100%;text-align:start;border:2px solid var(--line);border-bottom-width:4px;background:var(--card);border-radius:14px;padding:11px 12px;font:800 15px/1.3 var(--f-app);color:var(--ink)}
.oitem .n{flex:none;width:28px;height:28px;border-radius:50%;border:2px dashed var(--line);display:grid;place-items:center;font:900 14px/1 var(--f-app);color:transparent}
.oitem.on{border-color:var(--sel-line);background:var(--sel-bg);color:var(--sel-ink)}
.oitem.on .n{border:none;background:var(--lv);color:#fff}
.oitem.right{border-color:var(--ok);background:var(--ok-bg);color:var(--ok-ink)} .oitem.right .n{border:none;background:var(--ok);color:#fff}
.oitem.wrong{border-color:var(--bad);background:var(--bad-bg);color:var(--bad-ink)} .oitem.wrong .n{border:none;background:var(--bad);color:#fff}
.sent{font:800 19px/2.2 var(--f-app);margin:10px 0 16px}
.blank{display:inline-flex;align-items:center;justify-content:center;min-width:100px;min-height:44px;vertical-align:middle;margin:0 2px;padding:0 10px;border:none;border-bottom:3px solid var(--muted);background:none;border-radius:0;font:900 16px/1 var(--f-app);color:var(--ink)}
.blank.filled{border:2px solid var(--sel-line);border-bottom-width:4px;border-radius:12px;background:var(--sel-bg);color:var(--sel-ink)}
.blank.right{border:2px solid var(--ok);border-bottom-width:4px;border-radius:12px;background:var(--ok-bg);color:var(--ok-ink)}
.blank.wrong{border:2px solid var(--bad);border-bottom-width:4px;border-radius:12px;background:var(--bad-bg);color:var(--bad-ink)}
.bank{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--line);border-bottom-width:4px;background:var(--card);border-radius:12px;padding:9px 13px;font:800 15px/1.1 var(--f-app);color:var(--ink);min-height:44px}@media (hover:hover){.chip:hover:not(:disabled){background:var(--card-2)}}
.chip.sel{border-color:var(--sel-line);background:var(--sel-bg);color:var(--sel-ink)}
.chip.used{color:transparent;background:var(--card-2);border-color:var(--card-2)}
.chip.used .sw{opacity:0}
.chip.right{border-color:var(--ok);background:var(--ok-bg);color:var(--ok-ink)}
.chip.wrong{border-color:var(--bad);background:var(--bad-bg);color:var(--bad-ink)}
.wellbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.sw{width:22px;height:16px;flex:none}
.colgame{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:16px;align-items:start}
.colstack{display:flex;flex-direction:column-reverse;gap:3px;min-height:160px;border:2px dashed var(--line);border-radius:14px;padding:6px;justify-content:flex-start}
.colempty{margin:auto;color:var(--muted);font-size:13.5px;padding:10px;text-align:center}
.cblock{position:relative;height:48px;border:none;border-radius:8px;overflow:hidden;padding:0;background:none}
.cblock svg{position:absolute;inset:0;width:100%;height:100%}
.cblock span{position:relative;display:inline-block;margin:0 6px;background:rgba(255,255,255,.88);color:#111315;font:900 12.5px/1.2 var(--f-app);padding:3px 6px;border-radius:6px}
.cblock.right{outline:3px solid var(--ok)} .cblock.wrong{outline:3px solid var(--bad)}
.colpool{display:grid;gap:8px}
.colpool .chip{justify-content:flex-start}
.spool{display:flex;flex-wrap:wrap;gap:8px;min-height:48px;margin-bottom:12px}
.bins{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:10px}
.bin{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-height:130px;border:2px dashed var(--line);border-radius:14px;padding:10px;background:var(--card);text-align:start}
.bin b{font:900 14px/1.2 var(--f-app);color:var(--ink-2)}
.bin.armed{border-color:var(--sel-line);background:var(--sel-bg)}
.bin-items{display:flex;flex-wrap:wrap;gap:6px}
.bin-items .chip{padding:7px 10px;font-size:13.5px;cursor:pointer}
/* cada caja con su color y la tarjeta puesta toma el de su caja (prueba del 23-sep-2026: «todo blanco, no se entiende») */
:root{--b0:#3B6FD8;--b1:#B7790F;--b2:#8A5CF6;--b3:#3F7F8C}
.bin{--bc:var(--line);border:2px solid var(--bc);background:color-mix(in srgb,var(--bc) 9%,var(--card))}
.bin b{color:color-mix(in srgb,var(--bc) 80%,var(--ink))}
.bin-items{flex-direction:column;align-items:stretch}
.bin-items .chip{border-color:var(--bc);background:color-mix(in srgb,var(--bc) 18%,var(--card));white-space:normal;text-align:start;justify-content:flex-start;min-height:40px}
.bin-items .chip.wrong{border-color:var(--bad);background:var(--bad-bg);color:var(--bad-ink);text-decoration:line-through}
.bin.armed{border-style:dashed;background:color-mix(in srgb,var(--bc) 16%,var(--card))}
@media (max-width:560px){.bin{min-height:110px;padding:8px}.bin b{font-size:13px}.bin-items .chip{font-size:13px;padding:6px 8px}.colgame{grid-template-columns:minmax(0,1fr)}.match .tile{font-size:13.5px}}
.fb-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;min-height:36px;flex-wrap:wrap}
.fb-ico{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--card);flex:none}
.p-foot.ok .fb-ico{color:var(--ok)} .p-foot.bad .fb-ico{color:var(--bad)}
.fb-title{font:900 20px/1.2 var(--f-app)}
.p-foot.ok .fb-title{color:var(--ok-ink)} .p-foot.bad .fb-title{color:var(--bad-ink)}
.combo{display:inline-flex;align-items:center;gap:4px;background:var(--amber);color:#2B1D05;border-radius:999px;padding:4px 10px;font:900 12.5px/1 var(--f-app)}
.fb-head .mascot{margin-inline-start:auto;width:64px;margin-block:-10px -6px}
.fb-ans{margin:0 0 6px;font:800 15px/1.45 var(--f-app);color:var(--bad-ink)}
.fb-ans ol{margin:4px 0 0;padding-inline-start:22px}
.fb-why{margin:0 0 6px;font-size:15px}
.fb-exp{margin:0 0 6px;font:700 15px/1.45 var(--f-app);color:var(--ink)}
.fb-src{margin:0 0 14px;font:700 12.5px/1.35 var(--f-app);color:var(--muted)}

/* ---------- mascota ---------- */
.mascot{display:block;height:auto}
/* el movimiento de la mascota lo calcula js/core.js (brazo enganchado a la manivela) */
.mascot .m-happy{display:none}
.mascot.happy .m-happy{display:inline}
.mascot.happy .m-eye,.mascot.happy .m-pupil{display:none}
@keyframes nod{0%,100%{transform:rotate(7deg)}50%{transform:rotate(-7deg)}}
@keyframes spin{from{transform:rotate(180deg)}to{transform:rotate(540deg)}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}.well .bore,.game .bore2{stroke-dashoffset:0}}

/* ---------- pistas: términos que se pueden tocar ---------- */
.nw{white-space:nowrap}.hint{font:inherit;color:inherit;background:none;border:none;padding:0;margin:0;cursor:help;text-decoration:underline dotted color-mix(in srgb,var(--brand-ink) 70%,transparent);text-decoration-thickness:2px;text-underline-offset:4px;border-radius:4px}.hint.open{background:var(--sel-bg);color:var(--sel-ink)}@media (hover:hover){.hint:hover{background:var(--sel-bg);color:var(--sel-ink)}}
.hintpop{position:fixed;z-index:300;max-width:min(300px,calc(100vw - 24px));background:var(--ink);color:var(--card);border-radius:14px;padding:11px 14px 12px;box-shadow:var(--shadow);font:700 14px/1.45 var(--f-app)}
.hintpop b{font-weight:900;font-size:15px;margin-inline-end:6px}
.hintpop i{font-style:normal;font-size:12.5px;opacity:.75}
.hintpop p{margin:4px 0 0}
.hintpop::before{content:"";position:absolute;left:calc(var(--ax) - 7px);width:14px;height:14px;background:inherit;transform:rotate(45deg);border-radius:3px}
.hintpop.down::before{top:-6px}
.hintpop.up::before{bottom:-6px}

/* ---------- arrastrar en «Clasificá» ---------- */
.spool .chip,.bin-items .chip{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.chip.dragging{opacity:.35}
.drag-ghost{position:fixed;z-index:250;pointer-events:none;transform:translate(-50%,-60%) rotate(-3deg);box-shadow:0 12px 24px -10px rgba(6,44,52,.55);border-color:var(--sel-line);background:var(--sel-bg);color:var(--sel-ink)}
.is-dragging,.is-dragging *{cursor:grabbing!important}
.bin.over{border-style:solid;background:color-mix(in srgb,var(--bc) 22%,var(--card));transform:scale(1.02)}
.spool.over{outline:2px dashed var(--sel-line);outline-offset:4px;border-radius:12px}

/* ---------- teoría dentro del ejercicio, resumen y tablas ---------- */
.linkbtn.theory{padding:2px 0 12px;font-size:14px;text-align:start}
.peek-tag{display:inline-flex;align-items:center;gap:6px;font:900 13px var(--f-app);color:var(--muted)}
.sl.peek .sl-foot{justify-content:flex-end}
.slide.sum{max-width:760px}
.sumlist{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.sumlist li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:start;font:700 17px/1.5 var(--f-app);color:var(--ink)}
.sumlist .ic{color:#fff;background:var(--lv);border-radius:50%;padding:4px;width:26px;height:26px}
.extable-wrap{overflow-x:auto;margin:10px 0 4px;border:2px solid var(--line);border-radius:14px;background:var(--card)}
.extable{border-collapse:collapse;width:100%;font:700 14px/1.35 var(--f-app);font-variant-numeric:tabular-nums}
.extable th,.extable td{padding:9px 12px;text-align:start;border-bottom:1px solid var(--line);vertical-align:top}
.extable thead th{font:900 12px/1.2 var(--f-app);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:var(--card-2)}
.extable tbody th{font-weight:900;color:var(--ink)}
.extable tr:last-child th,.extable tr:last-child td{border-bottom:none}
@media (max-width:480px){.extable{font-size:13px}.extable th,.extable td{padding:8px 7px}.extable thead th{font-size:10.5px;letter-spacing:.02em}}

/* ---------- glosario ---------- */
.gsearch{display:flex;align-items:center;gap:8px;border:2px solid var(--line);border-radius:12px;padding:0 12px;margin:10px 0 6px;background:var(--card-2);color:var(--muted)}
.gsearch:focus-within{border-color:var(--sel-line)}
.gsearch input{flex:1;min-width:0;border:none;background:none;font:700 16px var(--f-app);color:var(--ink);padding:11px 0;outline:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gloss2{list-style:none;margin:0;padding:0;max-height:560px;overflow:auto}
.gloss2 li{padding:10px 2px;border-top:1px solid var(--line)}
.gloss2 b{font-weight:900}
.gloss2 i{font-style:normal;color:var(--muted);font-size:13px}
.gloss2 p{margin:3px 0 0;color:var(--ink-2);font-size:14.5px;line-height:1.45}
.gempty{color:var(--muted);font-size:14px}
.lvhead .lvgoal{margin-top:6px;font:700 13px/1.35 var(--f-app);opacity:.85;max-width:52ch}

/* desglose por nivel en resultados y diagnóstico del perfil */
.res-break{width:100%;margin:6px 0 2px;text-align:start}
.res-break h4{margin:0 0 8px;font:900 13px/1.2 var(--f-app);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.brow{display:grid;grid-template-columns:1fr 92px 44px;align-items:center;gap:10px;padding:5px 0;font:800 14px/1.3 var(--f-app)}
.brow i{display:block;height:9px;border-radius:5px;background:var(--line);overflow:hidden}
.brow i u{display:block;height:100%;background:var(--lv);text-decoration:none}
.brow b{text-align:end;font-variant-numeric:tabular-nums}
.diag{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.diag li{display:grid;grid-template-columns:1fr 92px 44px 58px;align-items:center;gap:10px;font:800 14px/1.3 var(--f-app)}
.diag i{display:block;height:9px;border-radius:5px;background:var(--line);overflow:hidden}
.diag i u{display:block;height:100%;background:var(--lv);text-decoration:none}
.diag b{text-align:end;font-variant-numeric:tabular-nums}
.diag small{color:var(--muted);font-weight:700;text-align:end}
.final-sec .lvhead{border-style:dashed}
@media (max-width:480px){.diag li{grid-template-columns:1fr 60px 40px 50px;gap:6px;font-size:13px}.brow{grid-template-columns:1fr 60px 40px;gap:6px}}

/* --- zonas tocables del dibujo: borde visible, hover y selección --- */
/* el contorno se dibuja grueso y la máscara del dibujo deja ver su mitad interna, así el borde sigue la forma real de la zona */
.zghosts{pointer-events:none}
/* sin el rectángulo celeste que pinta el navegador al tocar o enfocar: la selección la marca el contorno de la zona */
.dgwrap.hot,.dgwrap.hot *{-webkit-tap-highlight-color:transparent}
.dgwrap.hot [data-zone]:focus{outline:none}
/* Zonas tocables: un contorno fino y claro que dice «esto se toca» sin tapar el dibujo.
   El punteado grueso y oscuro de antes parecía una grilla de error (feedback del 23-sep-2026).
   vector-effect: el trazo mide lo mismo en pantalla sea cual sea la escala de la lámina. */
.zghost,.zghost *{pointer-events:none;fill:var(--sel-line)!important;fill-opacity:0;stroke:var(--sel-line)!important;stroke-width:2px!important;stroke-opacity:.55;stroke-dasharray:none;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:none!important;opacity:1!important;mask:none!important;transition:fill-opacity .15s,stroke-opacity .15s}
.zghost text,.zghost image{display:none!important}
.zghost.hov,.zghost.hov *{fill-opacity:.12;stroke-opacity:.9}
.zghost.sel,.zghost.sel *{fill-opacity:.32;stroke-opacity:1;stroke-width:3.5px!important}
.zghost.ok,.zghost.ok *{fill:var(--ok)!important;fill-opacity:.22;stroke:var(--ok)!important;stroke-opacity:1;stroke-width:3.5px!important}
.zghost.bad,.zghost.bad *{fill:var(--bad)!important;fill-opacity:.2;stroke:var(--bad)!important;stroke-opacity:1;stroke-width:3.5px!important}
.zghost.off{display:none}
.ex-help.warn{color:var(--bad);font-weight:800}
@keyframes dgshake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
.dgwrap.shake,.bet.shake{animation:dgshake .5s}
@media (prefers-reduced-motion: reduce){.dgwrap.shake,.bet.shake{animation:none}}
.langsw{display:flex;gap:8px;margin-top:10px}
/* el selector de tema reusa el switch de idioma, con 5 opciones que envuelven en dos filas */
/* Cuatro rectángulos IGUALES. Con flex-wrap, la última opción se estiraba sola para llenar la
   fila y quedaba más grande que las otras tres: una grilla 2x2 con filas iguales lo evita. */
.temasw{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:8px}
.temasw .lang{min-height:66px;display:grid;gap:3px;align-content:center;text-align:center;padding:10px 8px}
.temasw .lang small{font:700 11.5px/1.2 var(--f-app);color:var(--muted);display:block}
.temasw .lang.on small{color:rgba(255,255,255,.85)}
.langsw .lang{flex:1;min-height:44px;padding:10px 12px;border:2px solid var(--line);background:var(--card);border-radius:12px;font:900 14px/1 var(--f-app);color:var(--ink);cursor:pointer}
.langsw .lang.on{border-color:var(--brand);background:var(--brand);color:#fff}
.extra-sec .lvhead{border-style:dashed}

/* --- selector de cursos: cada curso es como un idioma --- */
.course{display:flex;align-items:center;gap:9px;padding:9px 11px;border:2px solid var(--line);background:var(--card);border-radius:14px;cursor:pointer;color:var(--ink);font:inherit;text-align:start;width:100%}@media (hover:hover){.course:hover{border-color:var(--lv,var(--brand))}}
.course .ic{color:var(--lv,var(--brand));flex:none}
.course small{display:block;font:800 10.5px/1.2 var(--f-app);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.course b{display:block;font:900 15px/1.2 var(--f-app)}
.course .cchev{margin-inline-start:auto;color:var(--muted)}
.topbar .course{width:auto;padding:7px 10px}
.topbar .course b{font-size:14px}
.courses{max-width:640px;width:100%;margin-inline:auto;text-align:start;padding:14px 20px calc(32px + env(safe-area-inset-bottom))}
.ovtop{position:sticky;top:0;z-index:4;margin:0 -20px 10px;padding:6px 20px 8px;background:var(--ground);border-bottom:2px solid var(--line)}
.ovback{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 10px;margin-inline-start:-10px;border:0;background:none;color:var(--brand-ink);cursor:pointer;font:900 15px/1 var(--f-app);border-radius:10px}@media (hover:hover){.ovback:hover{background:var(--brand-tint)}}
.ovback svg{flex:none;transform:scaleX(-1)}
html[dir="rtl"] .ovback svg{transform:none}
.courses h2{display:flex;align-items:center;gap:10px;margin:0 0 6px;font:900 24px/1.15 var(--f-app)}
.courses h3{margin:20px 0 8px;font:900 14px/1.2 var(--f-app);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.csub{margin:0;color:var(--muted);font:700 14px/1.45 var(--f-app)}
.clist{display:grid;gap:10px}
.ccard{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border:2px solid var(--line);border-radius:16px;background:var(--card);cursor:pointer;text-align:start;color:var(--ink);font:inherit}@media (hover:hover){.ccard:hover{border-color:var(--lv)}}
.ccard.on{border-color:var(--lv);box-shadow:inset 0 0 0 2px var(--lv)}
.ccard .cic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--lv);color:#fff;flex:none}
.ccard .ctxt{flex:1;min-width:0}
.ccard b{display:block;font:900 16px/1.2 var(--f-app)}
.ccard small{display:block;color:var(--muted);font:700 12.5px/1.35 var(--f-app)}
.cbar{display:block;height:8px;border-radius:4px;background:var(--line);margin:7px 0 4px;overflow:hidden}
.cbar i{display:block;height:100%;background:var(--lv)}
.ccard .cpct{font-weight:800!important;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ccard .cpct b{display:inline;font:800 12.5px/1.35 var(--f-app);font-variant-numeric:tabular-nums}
.ccard .cnow{color:var(--lv);flex:none}
.cgroup h4{margin:14px 0 6px;font:900 13px/1.2 var(--f-app);color:var(--ink)}
.csoon{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.csoon li{display:flex;align-items:center;gap:10px;padding:0;border:2px dashed var(--line);border-radius:12px;opacity:.85}@media (hover:hover){.csoon li:hover{opacity:1;border-color:var(--lv)}}
.csoon .cic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--lv);color:#fff;flex:none;opacity:.75}
.csoon b{display:block;font:900 13.5px/1.2 var(--f-app)}
.csoon small{display:block;color:var(--muted);font:700 12px/1.3 var(--f-app)}
@media (max-width:760px){.courses{max-width:none}}
.rgroup{display:flex;align-items:center;gap:10px;margin:22px 0 6px}
.rgroup span{font:900 13px/1.2 var(--f-app);letter-spacing:.06em;text-transform:uppercase;color:var(--lv);background:var(--card);border:2px solid var(--lv);border-radius:999px;padding:6px 12px}
.rgroup::after{content:'';flex:1;height:2px;background:var(--line)}
.rutas{display:grid;gap:10px}
.ruta{border:2px solid var(--line);border-radius:14px;padding:11px 12px;background:var(--card)}
.rtop{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rtop b{font:900 15px/1.2 var(--f-app)}
.rtop span{font:900 13px/1 var(--f-app);color:var(--muted);font-variant-numeric:tabular-nums}
.ruta small{display:block;color:var(--muted);font:700 12.5px/1.35 var(--f-app);margin-top:2px}
.rpills{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.rpill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:2px solid var(--lv);border-radius:999px;background:var(--card);color:var(--ink);font:800 12.5px/1 var(--f-app);cursor:pointer}
.rpill .ic{color:var(--lv)}
.rpill .rn{width:16px;height:16px;border-radius:50%;background:var(--lv);color:#fff;display:grid;place-items:center;font:900 10px/1 var(--f-app)}
.rpill.soon{border-style:dashed;opacity:.6;cursor:default}@media (hover:hover){.rpill:not(.soon):hover{background:var(--lv);color:#fff}}@media (hover:hover){.rpill:not(.soon):hover .ic{color:#fff}}
/* cursos en preparación: se pueden abrir y muestran su temario */
.cnota{margin:0 0 6px;color:var(--muted);font:700 12.5px/1.35 var(--f-app)}
.ccard>.ic{flex:none;color:var(--muted)}
.ccard .ctag{display:inline-block;margin-bottom:3px;padding:2px 8px;border-radius:999px;background:var(--lv);color:#fff;font:800 11px/1.4 var(--f-app)}
/* presentación de un curso */
.ficha .fhead{display:flex;gap:14px;align-items:center;margin:4px 0 14px}
.ficha .fhead .cic{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:var(--lv);color:#fff;flex:none}
.ficha .fhead small{color:var(--muted);font:800 12px/1.3 var(--f-app);text-transform:uppercase;letter-spacing:.04em}
.ficha .fhead h2{margin:2px 0;font:900 24px/1.12 var(--f-app)}
.ficha .fhead p{margin:0;color:var(--ink-2);font:700 14px/1.35 var(--f-app)}
.ficha .fstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.ficha .fstats span{display:grid;justify-items:center;padding:10px 4px;border:2px solid var(--line);border-radius:14px;background:var(--card);color:var(--muted);font:700 12px/1.3 var(--f-app)}
.ficha .fstats b{color:var(--ink);font:900 20px/1.1 var(--f-display)}
.ficha .fporque{margin:0 0 10px;font:700 15px/1.45 var(--f-app);color:var(--ink-2)}
.ficha .fantes{display:flex;gap:8px;align-items:flex-start;margin:0 0 10px;padding:10px 12px;border-radius:12px;background:var(--card-2);font:700 13.5px/1.4 var(--f-app)}
.ficha .ftemas{margin:0;padding-inline-start:22px;display:grid;gap:4px;font:700 14.5px/1.4 var(--f-app)}
.ficha .fniveles{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ficha .fniveles li{display:flex;gap:10px;align-items:center}
.ficha .fniveles .lvnum{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--nv);color:#fff;font:900 13px/1 var(--f-app);flex:none}
.ficha .fniveles b{display:block;font:900 14.5px/1.2 var(--f-app)}
.ficha .fniveles small{display:block;color:var(--muted);font:700 12.5px/1.35 var(--f-app)}
.ficha .fbtns{display:grid;gap:10px;margin-top:20px;position:sticky;bottom:0;padding:12px 0 calc(4px + env(safe-area-inset-bottom));background:var(--ground)}
.csoon li>button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;background:none;text-align:start;cursor:pointer;border-radius:10px;color:inherit;font:inherit}@media (hover:hover){.csoon li>button:hover{background:var(--soft)}}
.csoon li>button .cver{margin-inline-start:auto;flex:none;color:var(--lv);font:800 12px/1 var(--f-app);opacity:0;white-space:nowrap}.csoon li.on>button .cver{opacity:1}@media (hover:hover){.csoon li>button:hover .cver{opacity:1}}
.csoon li.on{border-color:var(--lv);background:var(--soft)}
.soon-path .lvhead{align-items:flex-start}
.soon-path .cic.big{flex:none;color:#fff;opacity:.85}
.soonbox{margin:14px 0 4px;padding:12px;border:2px dashed var(--line);border-radius:14px;background:var(--card)}
.soonbox h4,.soonh{margin:0 0 8px;font:900 14px/1.2 var(--f-app)}
.soonh{margin:20px 0 8px}
.soonrep{margin:9px 0 0;color:var(--muted);font:700 12.5px/1.4 var(--f-app)}
.soonlist{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:t}
.soonlist li{display:flex;align-items:center;gap:10px;padding:11px 12px;border:2px solid var(--line);border-radius:12px;background:var(--card)}
.soonlist li span{flex:none;width:24px;height:24px;border-radius:50%;background:var(--lv);color:#fff;display:grid;place-items:center;font:900 12px/1 var(--f-app)}
.soonlist li b{font:800 14px/1.3 var(--f-app)}
.soonnote{margin:14px 0 16px;color:var(--muted);font:700 12.5px/1.45 var(--f-app)}
/* inicio */
.hero{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:18px;background:var(--lv);color:#fff;margin:0 0 14px}
.hero-txt{flex:1;min-width:0}
.hero small{display:block;font:900 11px/1 var(--f-app);letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.hero h1{margin:4px 0 6px;font:900 24px/1.15 var(--f-app)}
.hero p{margin:0;font:700 13.5px/1.45 var(--f-app);opacity:.92}
.hero .mascot{flex:none;width:92px;height:92px}
.home-stats{margin-bottom:14px}
.hnow{display:flex;align-items:center;gap:12px;padding:12px 14px;border:2px solid var(--lv);border-radius:16px;background:var(--card);margin-bottom:6px;flex-wrap:wrap}
.hnow .cic.big{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--lv);color:#fff;flex:none}
.hnow-txt{flex:1;min-width:150px}
.hnow-txt b{display:block;font:900 17px/1.2 var(--f-app)}
.hnow-txt small{display:block;color:var(--muted);font:700 12.5px/1.35 var(--f-app)}
.hnow .btn{flex:none}
.hsoon{margin:6px 0 0;color:var(--muted);font:700 12.5px/1.35 var(--f-app)}
.hlist{display:grid;gap:8px;margin-bottom:4px}
.hcard{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border:2px solid var(--line);border-radius:14px;background:var(--card);cursor:pointer;text-align:start;color:inherit;font:inherit}@media (hover:hover){.hcard:hover{border-color:var(--lv)}}
.hcard .cic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--lv);color:#fff;flex:none}
.htxt{flex:1;min-width:0}
.htxt b{display:block;font:900 15px/1.2 var(--f-app)}
.htxt small{display:block;color:var(--muted);font:700 12px/1.3 var(--f-app);margin-bottom:5px}
.hpct{flex:none;font:900 13px/1 var(--f-app);color:var(--lv);font-variant-numeric:tabular-nums}
.hmore{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;padding:14px;border:2px dashed var(--line);border-radius:16px}
.hmore div{flex:1;min-width:200px}
.hmore b{display:block;font:900 15px/1.2 var(--f-app)}
.hmore small{display:block;color:var(--muted);font:700 12.5px/1.4 var(--f-app);margin-top:3px}
@media (max-width:560px){.hero h1{font-size:20px}.hero .mascot{width:64px;height:64px}}
/* entrada y onboarding guiado */
.login-ov .ov-box,.login{max-width:520px}
.login{text-align:center;display:grid;gap:14px;justify-items:center;width:100%;margin:auto;padding:28px 20px}
.login-marca{display:flex;align-items:center;gap:10px}
.login-marca .mascot{width:56px;height:56px}
.login h1{margin:0;font:900 26px/1.15 var(--f-app)}
.login-sub{margin:0;color:var(--muted);font:700 14px/1.45 var(--f-app)}
.login-bul{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:8px;width:100%;text-align:start}
.login-bul li{display:flex;align-items:center;gap:10px;font:700 13.5px/1.35 var(--f-app);color:var(--ink)}
.login-bul .ic{color:var(--brand);flex:none}
.login-form{display:grid;gap:10px;width:100%;text-align:start;margin-top:4px}
.login-form label{display:grid;gap:5px;font:800 12.5px/1.2 var(--f-app);color:var(--muted)}
.login-form .flab{display:block;text-align:start}
.login-form .fopt{font-weight:700;opacity:.8}
.login-form input{padding:11px 12px;border:2px solid var(--line);border-radius:12px;background:var(--card);font:700 16px/1.2 var(--f-app);color:var(--ink)}
.login-form input:focus{outline:none;border-color:var(--brand)}
.login-form .btn{margin-top:2px}
.login-sso{display:grid;gap:6px;width:100%;padding-top:14px;border-top:2px solid var(--line)}
.login-sso small{display:flex;align-items:flex-start;gap:7px;text-align:left;color:var(--muted);font:700 13px/1.45 var(--f-app)}
.login-sso small .ic{flex:none;margin-top:1px}
.onb-wide{max-width:560px}
.onb-paso{display:inline-block;font:900 11px/1 var(--f-app);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.opicks{display:grid;gap:8px;width:100%;margin-top:4px}
.opick{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;border:2px solid var(--line);border-radius:14px;background:var(--card);cursor:pointer;text-align:start;color:inherit;font:inherit}@media (hover:hover){.opick:hover{border-color:var(--brand);background:var(--card-2)}}
.opick span{flex:1;min-width:0}
.opick b{display:block;font:900 15px/1.25 var(--f-app)}
.opick small{display:block;color:var(--muted);font:700 12.5px/1.35 var(--f-app)}
.opick .ic{flex:none;color:var(--muted)}
.rec{display:flex;align-items:center;gap:12px;width:100%;padding:14px;border:2px solid var(--lv);border-radius:16px;background:var(--card);text-align:start}
.rec .cic.big{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;background:var(--lv);color:#fff;flex:none}
.rec small{display:block;color:var(--muted);font:900 11px/1 var(--f-app);letter-spacing:.1em;text-transform:uppercase}
.rec b{display:block;font:900 19px/1.2 var(--f-app);margin:3px 0 2px}
.rec span{display:block;color:var(--muted);font:700 13px/1.35 var(--f-app)}
.onb .rec-por{margin:0;text-align:start;width:100%;color:var(--muted);font:700 13px/1.45 var(--f-app)}
.rec-ruta{width:100%;text-align:start;padding:12px;border:2px dashed var(--line);border-radius:14px}
.rec-ruta h4{display:flex;align-items:center;gap:7px;margin:0 0 8px;font:900 13.5px/1.2 var(--f-app)}
.rec-ruta small{display:block;margin-top:8px;color:var(--muted);font:700 12px/1.35 var(--f-app)}
.rpill.on{box-shadow:inset 0 0 0 2px var(--lv)}
/* el camino de la ruta en el inicio */
.ruta-camino{display:grid;gap:8px;margin:0 0 16px}
.rpaso{display:flex;align-items:center;gap:11px;width:100%;padding:11px 13px;border:2px solid var(--line);border-radius:14px;background:var(--card);cursor:pointer;text-align:start;color:inherit;font:inherit}@media (hover:hover){.rpaso:not(:disabled):hover{border-color:var(--lv)}}
.rpaso .rp-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--line);color:var(--muted);flex:none}
.rpaso .rp-tx b{display:block;font:900 14.5px/1.2 var(--f-app)}
.rpaso .rp-tx small{display:block;color:var(--muted);font:700 12px/1.3 var(--f-app)}
.rpaso.done .rp-ic{background:var(--lv);color:#fff}
.rpaso.open .rp-ic{background:var(--lv);color:#fff;opacity:.75}
.rpaso.now{border-color:var(--lv);box-shadow:inset 0 0 0 2px var(--lv)}
.rpaso.now .rp-ic{background:var(--lv);color:#fff}
.rpaso.soon{border-style:dashed;opacity:.62;cursor:default}
.ses b{display:block;font:900 15px/1.2 var(--f-app)}
.ses small{display:block;color:var(--muted);font:700 12.5px/1.35 var(--f-app)}
.ses-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 12px}   /* abajo, lugar para la sombra del botón: pisaba el texto */
.lv-plan{opacity:.88}
.lv-plan .lvhead{background:var(--card-2);color:var(--ink)}
.lv-plan .lvhead small,.lv-plan .lvhead p{color:var(--muted)}
.lv-plan .soonlist{margin-top:12px}

/* Ejercicio de cuenta: el markup y los colores viven en engine.js, que ya usa las variables
   del tema. Acá queda sólo lo que no se puede expresar con un style="": el foco y el placeholder. */
#p-calc::placeholder{color:var(--muted);opacity:1}
#p-calc:focus{outline:none;border-color:var(--brand)}
/* término que la industria dice en inglés: va en cursiva y al tocarlo muestra el español */
.hint.en{font-style:italic}

/* ---------- idiomas ----------
   La app se arma con propiedades lógicas (start/end, inline-start), así que en árabe y hebreo
   el layout se da vuelta solo con el dir="rtl" que pone js/i18n.js. Lo que NO se da vuelta son
   los dibujos: un diagrama técnico espejado enseña mal y los rótulos quedan al revés. */
[dir="rtl"] .dg svg,[dir="rtl"] .game svg,[dir="rtl"] .well svg,[dir="rtl"] .mascot{direction:ltr}
[dir="rtl"] .dg,[dir="rtl"] .game{direction:ltr}
[dir="rtl"] .dg .lbl,[dir="rtl"] .dg .stxt,[dir="rtl"] .dg .note{direction:rtl}
/* los números y las unidades en alfabeto latino, dentro de un texto en árabe o hebreo */
[dir="rtl"] .num,[dir="rtl"] [data-num]{direction:ltr;unicode-bidi:isolate}

/* chino, japonés y coreano: tipografía propia y sin espaciado entre letras, que en CJK molesta */
.cjk{--f-app:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans SC","Noto Sans JP","Noto Sans KR","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
     --f-display:"Hiragino Sans","Noto Sans SC","Noto Sans JP","Noto Sans KR","PingFang SC",system-ui,sans-serif}
.cjk .wordmark{letter-spacing:normal}
.cjk .snav button,.cjk .tabbar button,.cjk .bubble{letter-spacing:normal}
.cjk .bubble{text-transform:none}
/* El primer paso, en lugar de cuatro contadores en cero */
.primer-paso{background:var(--card);border:2px solid var(--line);border-left:none;border-radius:16px;padding:16px 18px;display:grid;gap:7px;position:relative;overflow:hidden}
.primer-paso::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--brand)}
.primer-paso small{display:flex;align-items:center;gap:6px;font:900 12px/1 var(--f-app);letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink)}
.primer-paso b{font:700 20px/1.2 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.primer-paso p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.primer-paso .pp-meta{font:700 13px/1.4 var(--f-app);color:var(--muted)}
/* Preguntar antes de tirar el avance de una lección. Va en el body (no dentro de main) porque
   un position:fixed adentro de un contenedor con transform deja de ser fijo. */
.salir-ov{position:fixed;inset:0;z-index:200;background:rgba(9,11,12,.62);display:flex;align-items:center;justify-content:center;padding:20px}
.salir-caja{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:22px 20px;max-width:360px;width:100%;display:grid;gap:12px;box-shadow:var(--shadow)}
.salir-caja b{font:700 20px/1.25 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.salir-caja p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.salir-caja .btn{margin-top:2px}
/* Créditos plegados: el resumen es el control, con alto de dedo */
/* explicito: el navegador no siempre oculta el contenido plegado si una regla propia le puso display */
.credits details:not([open]) > *:not(summary){display:none!important}
.credits summary{display:flex;align-items:center;gap:9px;min-height:44px;cursor:pointer;font:700 17px/1.2 var(--f-display);letter-spacing:-.01em;color:var(--ink);list-style:none}
.credits summary::-webkit-details-marker{display:none}
.credits summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2.5px solid var(--muted);border-bottom:2.5px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
.credits details[open] summary::after{transform:rotate(-135deg)}
.credits li{padding:4px 0}
.credits li a{min-height:0;display:inline}

/* ---------- camino a medida (js/ai-camino.js) ---------- */
.ai-card{display:block;width:100%;text-align:start;padding:14px;margin:0 0 14px;border:2px solid var(--line);border-radius:16px;background:var(--card);cursor:pointer;color:inherit;font:inherit}@media (hover:hover){.ai-card:hover{border-color:var(--brand);background:var(--card-2)}}
.ai-card-new{border-style:dashed}
.ai-card-tag{display:flex;align-items:center;gap:6px;color:var(--brand-ink);font:900 11px/1 var(--f-app);letter-spacing:.1em;text-transform:uppercase}
.ai-card b{display:block;font:900 17px/1.25 var(--f-app);margin:7px 0 6px}
.ai-card small{display:block;color:var(--muted);font:700 12.5px/1.4 var(--f-app);margin-top:6px}
.ai-card .cbar{display:block;height:7px;border-radius:99px;background:var(--lock);overflow:hidden}
.ai-card .cbar i{display:block;height:100%;border-radius:99px;background:var(--brand)}

.ai-bul{list-style:none;margin:2px 0 4px;padding:0;display:grid;gap:9px;width:100%;text-align:start}
.ai-bul li{display:flex;align-items:center;gap:10px;color:var(--ink-2);font:700 13.5px/1.35 var(--f-app)}
.ai-bul .ic{flex:none;color:var(--brand)}

.ai-spin{display:flex;gap:7px;margin:8px 0 4px}
.ai-spin i{width:11px;height:11px;border-radius:50%;background:var(--brand);animation:aiPulse 1.1s ease-in-out infinite}
.ai-spin i:nth-child(2){animation-delay:.16s}
.ai-spin i:nth-child(3){animation-delay:.32s}
@keyframes aiPulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.ai-spin i{animation:none;opacity:.6}}
.onb .ai-load-sub{color:var(--muted);font:700 13px/1.4 var(--f-app)}

/* OJO: `.opick span{flex:1}` ya existe y le gana por especificidad a `.ai-check`,
   así que la casilla se estiraba a todo el ancho. Por eso va calificada con .opick. */
.opick .ai-check{flex:none;display:grid;place-items:center;width:24px;height:24px;border:2px solid var(--line);border-radius:8px;background:var(--card)}
.opick .ai-check .ic{opacity:0;color:#fff}
.opick.on{border-color:var(--brand);background:var(--sel-bg)}
.opick.on .ai-check{border-color:var(--brand);background:var(--brand)}
.opick.on .ai-check .ic{opacity:1}
.ai-libre{display:block;width:100%;text-align:start;margin-top:4px}
.ai-libre textarea{width:100%;margin-top:5px;padding:10px 12px;border:2px solid var(--line);border-radius:12px;background:var(--card);color:inherit;font:700 13.5px/1.4 var(--f-app);resize:vertical}
.ai-libre textarea:focus{outline:none;border-color:var(--focus)}

.ai-barra{display:flex;align-items:center;gap:10px;width:100%}
.ai-barra .cbar{flex:1;height:8px;border-radius:99px;background:var(--lock);overflow:hidden}
.ai-barra .cbar i{display:block;height:100%;border-radius:99px;background:var(--brand)}
.ai-barra b{font:900 13px/1 var(--f-app);color:var(--muted);white-space:nowrap}

.ai-pasos{display:grid;gap:8px;width:100%}
.ai-paso{display:flex;align-items:flex-start;gap:11px;width:100%;padding:11px 12px;border:2px solid var(--line);border-left:5px solid var(--lv);border-radius:13px;background:var(--card);cursor:pointer;text-align:start;color:inherit;font:inherit}@media (hover:hover){.ai-paso:hover{border-color:var(--brand);border-left-color:var(--lv);background:var(--card-2)}}
.ai-paso.done{opacity:.62}
.ai-n{flex:none;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--lv);color:#fff;font:900 12.5px/1 var(--f-app)}
.ai-tx{flex:1;min-width:0}
.ai-tx b{display:block;font:900 14.5px/1.25 var(--f-app)}
.ai-meta{display:flex;align-items:center;gap:5px;color:var(--muted);font:800 11.5px/1.3 var(--f-app);margin-top:3px}
.ai-por{display:block;color:var(--ink-2);font:700 12.5px/1.4 var(--f-app);margin-top:4px}
.ai-modo{flex:none;display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:99px;font:900 11px/1 var(--f-app);white-space:nowrap}
.ai-modo-aprender{background:var(--brand-tint);color:var(--brand-ink)}
.ai-modo-repasar{background:var(--amber-tint);color:var(--amber-ink)}
.ai-modo-confirmar{background:var(--card-2);color:var(--muted);border:1px solid var(--line)}
.onb .ai-falta{display:flex;align-items:flex-start;gap:8px;width:100%;margin:0;text-align:start;color:var(--amber-ink);font:700 12.5px/1.4 var(--f-app)}
.onb .ai-falta .ic{flex:none;margin-top:1px}
.ai-despues{width:100%;text-align:start;padding-top:4px}
.ai-despues h4{margin:0 0 7px;font:900 13px/1.2 var(--f-app)}
/* el camino puede ser largo: la capa scrollea y los botones quedan al final, no flotando */
.ai-ov .ai-plan .ai-pasos{max-height:none}
@media (max-width:520px){
  .ai-paso{flex-wrap:wrap}
  .ai-modo{margin-inline-start:36px}
}
.ai-paso.muerto{cursor:default;opacity:.55;border-style:dashed}@media (hover:hover){.ai-paso.muerto:hover{border-color:var(--line);background:var(--card)}}
.ai-paso.muerto .ai-n{background:var(--lock);color:var(--lock-ink)}
/* El portero y la bienvenida */
.acceso h1{font-size:23px}
.acceso .login-form input{text-transform:uppercase;letter-spacing:.06em;font-family:var(--f-display);font-weight:700}
.cod-mal{margin:2px 0 0;display:flex;align-items:center;gap:7px;font:700 13.5px/1.4 var(--f-app);color:var(--bad-ink);background:var(--bad-bg);border-radius:10px;padding:9px 11px}
.bv-tag{display:inline-flex;align-items:center;font:900 11.5px/1 var(--f-app);letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink);background:var(--brand-tint);border-radius:999px;padding:7px 12px}
.bienvenida .mascot{width:170px}
.bv-bul{margin-top:4px}
/* En el resultado, el próximo paso manda y «volver al camino» es la salida secundaria */
.res .btn + .btn{margin-top:10px}
.res .btn-ghost{box-shadow:none}

/* ---------- preguntarle al asistente ---------- */
.ai-preguntar .gsearch.ai-q{width:100%;margin:2px 0 10px}
.ai-ejs{width:100%;text-align:start;padding-top:2px}
.ai-ejs h4{margin:0 0 8px;font:900 13px/1.2 var(--f-app)}
.ai-ej-btn{display:block;width:100%;text-align:start;margin-bottom:6px;padding:9px 12px;border:2px dashed var(--line);border-radius:12px;background:var(--card);color:var(--ink-2);cursor:pointer;font:700 13px/1.35 var(--f-app)}@media (hover:hover){.ai-ej-btn:hover{border-color:var(--brand);border-style:solid;color:var(--ink)}}
.ai-local{width:100%;text-align:start;padding-top:6px}
.ai-local h4{display:flex;align-items:center;gap:6px;margin:0 0 4px;font:900 13px/1.2 var(--f-app)}
.ai-hits{max-height:340px}
.ai-hits li{padding:0;border-top:1px solid var(--line)}
.ai-hit{display:flex;align-items:center;gap:10px;width:100%;padding:10px 4px;border:none;background:none;cursor:pointer;text-align:start;color:inherit;font:inherit;border-left:4px solid var(--lv)}@media (hover:hover){.ai-hit:hover{background:var(--card-2)}}
.ai-hit .ic{flex:none;color:var(--muted)}
.ai-respuesta{width:100%;text-align:start;margin:2px 0 10px;padding:12px;border:2px solid var(--line);border-radius:14px;background:var(--card-2)}
.ai-respuesta h4{display:flex;align-items:center;gap:6px;margin:0 0 6px;font:900 12px/1 var(--f-app);letter-spacing:.08em;text-transform:uppercase;color:var(--brand-ink)}
.ai-resp-tx{margin:0 0 10px;color:var(--ink);font:700 14px/1.5 var(--f-app)}
.ai-respuesta .ai-pasos{gap:7px}
.ai-curso{display:block;width:100%;text-align:start;margin-top:6px;padding:10px 12px;border:2px solid var(--line);border-radius:12px;background:var(--card);cursor:pointer;color:inherit;font:inherit}@media (hover:hover){.ai-curso:hover:not(:disabled){border-color:var(--brand)}}
.ai-curso:disabled{cursor:default;opacity:.6;border-style:dashed}
.ai-curso b{display:block;font:900 14px/1.25 var(--f-app)}
.ai-curso small{display:block;color:var(--muted);font:700 12.5px/1.4 var(--f-app);margin-top:3px}
.ai-aviso{display:flex;align-items:flex-start;gap:8px;width:100%;margin:0 0 10px;padding:10px 12px;border-radius:12px;background:var(--amber-tint);color:var(--amber-ink);font:700 12.5px/1.4 var(--f-app);text-align:start}
.ai-aviso .ic{flex:none;margin-top:1px}
.ai-tambien{display:block;color:var(--muted);font:800 11px/1.3 var(--f-app);margin-top:3px;font-style:italic}
.ov-in:focus{outline:none}

/* ---------- Inicio (23-sep-2026): lo que sigue arriba, la semana, la ruta en un renglón ---------- */
/* gotas y barriles salen de la barra: la barra es para elegir curso; los números viven en «Tu semana» y en Perfil */
.topbar .tstat{display:none}
.topbar .course{flex:1;width:100%}
.hnext{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px;border-radius:18px;background:var(--card);border:2px solid var(--lv);margin:0 0 12px}
.hnext-hola{font:900 11px/1 var(--f-app);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hnext-curso{display:inline-flex;align-items:center;gap:6px;color:var(--lv);font:800 13px/1.2 var(--f-app)}
.hnext-curso span{color:var(--ink)}
.hnext-tema{font:900 21px/1.2 var(--f-display);letter-spacing:-.01em;color:var(--ink)}
.hnext-meta{margin:0;color:var(--muted);font:700 13px/1.35 var(--f-app)}
.hnext .cbar{width:100%}
.hnext .btn{margin-top:6px}
.hsem{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:18px;background:var(--card);border:2px solid var(--line);margin:0 0 12px;--lv:var(--brand)}
.hsem.ok{border-color:var(--ok);--lv:var(--ok)}
.hsem b{font:900 16px/1.25 var(--f-app)}
.hsem small{color:var(--muted);font:700 12.5px/1.4 var(--f-app)}
.hsem-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hsem-cambiar{min-height:44px;padding:0 4px;border:none;background:none;color:var(--muted);font:700 12.5px/1 var(--f-app);text-decoration:underline;cursor:pointer}
.hsem-num{font:900 24px/1.1 var(--f-display)}
.mchips{display:flex;gap:8px;margin-top:8px;width:100%;max-width:340px}
.mchip{flex:1;min-width:48px;min-height:48px;border:2px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);font:900 18px/1 var(--f-display);cursor:pointer}
.mchip.on{border-color:var(--brand);background:var(--brand-tint)}
.hruta{padding:12px 14px;border-radius:18px;background:var(--card);border:2px solid var(--line);margin:0 0 12px}
.hruta-top{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.hruta-top small{font:900 11px/1 var(--f-app);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hruta-top b{flex:1;min-width:0;font:900 15px/1.2 var(--f-app);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hruta-top span{color:var(--muted);font:800 12.5px/1 var(--f-app)}
.hruta-pasos{display:flex;align-items:center}
.hpaso{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--lv);background:var(--card);color:var(--lv);cursor:pointer}
.hpaso.done{background:var(--lv);color:#fff}
.hpaso.now{box-shadow:0 0 0 4px color-mix(in srgb,var(--lv) 25%,transparent)}
.hpaso.soon{border-style:dashed;opacity:.5;cursor:default}
.hpaso-l{flex:1;height:2px;min-width:4px;background:var(--line)}
.hrep,.hmas{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:12px 14px;border-radius:16px;border:2px solid var(--line);background:var(--card);color:var(--ink);text-align:start;cursor:pointer;margin:0 0 12px;font:inherit}
.hrep{border-color:var(--amber, #C98A00)}
.hrep span,.hmas span{flex:1;min-width:0}
.hrep b,.hmas b{display:block;font:900 15px/1.25 var(--f-app)}
.hrep small,.hmas small{display:block;color:var(--muted);font:700 12.5px/1.35 var(--f-app)}
button.hsem{width:100%;text-align:start;cursor:pointer;font:inherit;color:inherit}
.hsem-top{width:100%}
.hsem-sin{border-style:dashed}
.linkbtn.on{font-weight:900;text-decoration:none}

/* ---------- reportar una pregunta (la banderita) ---------- */
.p-rep{color:var(--muted)}
.rep-ov{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center}
.rep{width:100%;max-width:560px;max-height:calc(92vh * var(--vhz, 1));overflow:auto;background:var(--card);color:var(--ink);border-radius:20px 20px 0 0;padding:18px 16px calc(16px + env(safe-area-inset-bottom,0px))}
.rep h2{margin:0 0 2px;font:900 19px/1.2 var(--f-display)}
.rep-q{margin:0 0 12px;color:var(--muted);font:700 13px/1.35 var(--f-app)}
.rep-mot{display:grid;gap:8px}
.rep-op{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:48px;padding:10px 12px;border:2px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);text-align:start;cursor:pointer;font:inherit}
.rep-op b{font:900 15px/1.2 var(--f-app)}
.rep-op small{color:var(--muted);font:700 12.5px/1.3 var(--f-app)}
.rep-op.on{border-color:var(--sel-line);background:var(--sel-bg)}
.rep-lbl{display:block;margin:14px 0 6px;font:800 13px var(--f-app);color:var(--ink-2)}
.rep textarea{width:100%;box-sizing:border-box;min-height:84px;padding:10px 12px;border:2px solid var(--line);border-radius:12px;background:var(--card-2);color:var(--ink);font:600 16px/1.35 var(--f-app);resize:vertical}
.rep-bt{display:flex;gap:10px;margin-top:14px}
.rep-bt .btn:disabled{opacity:.45}
.rep-toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:210;background:var(--ink);color:var(--card);padding:10px 16px;border-radius:12px;font:800 14px var(--f-app);box-shadow:0 6px 20px rgba(0,0,0,.2)}

/* ---------- la pregunta de entrada del tema (gancho) ---------- */
.gch{margin:14px 0 6px;padding:12px;border-radius:14px;background:var(--card-2);border:2px dashed var(--line)}
.gch-h{display:flex;align-items:center;gap:6px;margin:0 0 4px;font:900 11.5px/1 var(--f-app);letter-spacing:.08em;text-transform:uppercase;color:var(--lv,var(--brand))}
.gch-q{margin:0 0 10px;font:800 15.5px/1.35 var(--f-app);color:var(--ink)}
.gch-ops{display:grid;gap:8px}
.gch-op{min-height:44px;padding:10px 12px;border:2px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);text-align:start;font:700 14.5px/1.3 var(--f-app);cursor:pointer}
.gch-op.ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,var(--card))}
.gch-op.no{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,var(--card))}
.gch-op.off{opacity:.55}
.gch-op:disabled{cursor:default}
.gch-exp{margin:10px 0 0;font:600 14px/1.4 var(--f-app);color:var(--ink-2)}

/* =========================================================================
   Juegos del método (METODO.md, principios 13 a 16)
   ========================================================================= */

/* ---------- Estimá: el control deslizante ---------- */
.est{margin-top:14px;padding:18px 16px 14px;border:2px solid var(--line);border-radius:18px;background:var(--card)}
.est-val{display:block;text-align:center;font:900 34px/1.1 var(--f-display);letter-spacing:-.02em;color:var(--muted);font-variant-numeric:tabular-nums;transition:color .15s,transform .15s}
.est-val.on{color:var(--ink)}
.est.ok .est-val{color:var(--ok)}
.est.bad .est-val{color:var(--bad)}
.est-track{position:relative;height:64px;display:flex;align-items:center;margin-top:10px}
.est-track input[type=range]{position:relative;z-index:2;width:100%;height:44px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;touch-action:none}
.est-track input[type=range]:disabled{cursor:default}
.est-track input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:5px;background:linear-gradient(to right,var(--lv,var(--brand)) 0 var(--p,50%),var(--line) var(--p,50%) 100%)}
.est-track input[type=range]::-moz-range-track{height:10px;border-radius:5px;background:linear-gradient(to right,var(--lv,var(--brand)) 0 var(--p,50%),var(--line) var(--p,50%) 100%)}
.est-track input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-9px;border-radius:50%;background:var(--card);border:4px solid var(--lv,var(--brand));box-shadow:0 2px 8px rgba(0,0,0,.18)}
.est-track input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--card);border:4px solid var(--lv,var(--brand));box-shadow:0 2px 8px rgba(0,0,0,.18)}
.est-track input[type=range]:focus-visible::-webkit-slider-thumb{outline:3px solid var(--sel-line);outline-offset:2px}
.est-band{position:absolute;z-index:1;top:50%;height:26px;transform:translateY(-50%);border-radius:13px;background:color-mix(in srgb,var(--ok) 18%,transparent);border:2px dashed var(--ok)}
.est-ans{position:absolute;z-index:3;top:6px;bottom:6px;width:3px;margin-left:-1.5px;border-radius:2px;background:var(--ok);animation:estpop .35s ease-out}
.est-ans span{position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);padding:3px 8px;border-radius:8px;background:var(--ok);color:#fff;font:900 12.5px/1.2 var(--f-app);white-space:nowrap}
.est-lims{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:2px;color:var(--muted);font:700 12.5px/1.2 var(--f-app);font-variant-numeric:tabular-nums}
.est-mid{font-size:11.5px;opacity:.85;text-align:center}
@keyframes estpop{from{opacity:0;transform:scaleY(.2)}to{opacity:1;transform:none}}

/* ---------- Encontrá el error: un pedazo de documento ---------- */
.doc{margin-top:14px;padding:14px 16px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--ink-2);box-shadow:0 1px 0 var(--line)}
.doc-h{display:flex;align-items:center;gap:6px;font:900 11px/1 var(--f-app);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.doc-t{margin:10px 0 0;font:600 16px/2 var(--f-app);color:var(--ink)}
.frase{display:inline;padding:4px 3px;margin:0 -1px;border:none;border-radius:6px;background:none;color:inherit;font:inherit;line-height:inherit;text-align:start;cursor:pointer;-webkit-box-decoration-break:clone;box-decoration-break:clone;text-decoration:underline dotted color-mix(in srgb,var(--muted) 60%,transparent);text-underline-offset:5px}
.frase:disabled{cursor:default}
.frase.sel{background:color-mix(in srgb,var(--amber) 32%,transparent);text-decoration:none}
.frase.found{background:color-mix(in srgb,var(--ok) 20%,transparent);text-decoration:line-through;text-decoration-color:var(--bad);text-decoration-thickness:2px}
.frase.missed{background:color-mix(in srgb,var(--bad) 16%,transparent);text-decoration:line-through;text-decoration-color:var(--bad);text-decoration-thickness:2px}
.frase.wrong{text-decoration:underline wavy var(--muted);opacity:.8}
.doc-fix{margin-top:12px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--ok) 10%,var(--card));border-left:4px solid var(--ok);font:600 14.5px/1.45 var(--f-app);animation:estpop .3s ease-out}

/* ---------- El caso: decisiones encadenadas ---------- */
.caso{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:14px}
.caso-paso{display:flex;gap:10px;animation:casoin .3s ease-out}
.caso-n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--lv,var(--brand));color:#fff;font:900 13px var(--f-app);margin-top:2px}
.caso-c{flex:1;min-width:0}
.caso-sit{margin:2px 0 8px;font:700 15.5px/1.45 var(--f-app);color:var(--ink)}
.caso-paso:not(.now) .caso-sit{color:var(--ink-2)}
.caso .opt.off{opacity:.5}
.caso-cons{margin-top:8px;padding:10px 12px;border-radius:12px;font:600 14px/1.45 var(--f-app);color:var(--ink);animation:estpop .25s ease-out}
.caso-cons.ok{background:color-mix(in srgb,var(--ok) 10%,var(--card));border-left:4px solid var(--ok)}
.caso-cons.bad{background:color-mix(in srgb,var(--bad) 8%,var(--card));border-left:4px solid var(--bad)}
.caso-bien{display:block;margin-top:6px;color:var(--ink-2)}
@keyframes casoin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- La apuesta ---------- */
.bet{display:grid;gap:8px}
.bet-q{display:flex;align-items:center;justify-content:center;gap:6px;font:800 13.5px/1.2 var(--f-app);color:var(--ink-2)}
.bet-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bet-b{flex-direction:column;gap:3px;min-height:56px;padding:8px 6px}
.bet-b b{font:900 15px/1 var(--f-app)}
.bet-b small{font:800 11.5px/1 var(--f-app);opacity:.8;font-variant-numeric:tabular-nums}
.bet-b[data-n="1"]{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.bet-b[data-n="3"]{background:var(--amber);color:#1b1100}
.bet-b:disabled{opacity:.45}
.betres{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:3px 9px;border-radius:999px;font:900 13px/1 var(--f-app);color:#fff;font-variant-numeric:tabular-nums}
.betres.up{background:var(--ok)}
.betres.down{background:var(--bad)}
@media (prefers-reduced-motion:reduce){.est-ans,.doc-fix,.caso-paso,.caso-cons{animation:none}}
/* respondido: la pista queda neutra y el control toma el color del resultado, para que la banda y la respuesta se lean solas */
.est.ok .est-track input[type=range]::-webkit-slider-runnable-track,.est.bad .est-track input[type=range]::-webkit-slider-runnable-track{background:var(--line)}
.est.ok .est-track input[type=range]::-moz-range-track,.est.bad .est-track input[type=range]::-moz-range-track{background:var(--line)}
.est.ok .est-track input[type=range]::-webkit-slider-thumb{border-color:var(--ok)}
.est.bad .est-track input[type=range]::-webkit-slider-thumb{border-color:var(--bad)}
.est.ok .est-track input[type=range]::-moz-range-thumb{border-color:var(--ok)}
.est.bad .est-track input[type=range]::-moz-range-thumb{border-color:var(--bad)}
.answered .est~.ex-help,.answered .doc~.ex-help{display:none}
/* la respuesta se rotula DEBAJO de la pista: arriba chocaba con el número grande */
.est-ans span{bottom:auto;top:calc(100% + 4px)}
.est.ok .est-mid,.est.bad .est-mid{visibility:hidden}
.est.ok .est-lims,.est.bad .est-lims{margin-top:18px}

/* ---------- colores de las partes (Repartí): distinguibles entre sí y en los dos temas ---------- */
:root{--c0:#00857A;--c1:#E08A2E;--c2:#3B6FD8;--c3:#8A5CF6;--c4:#7A8A94}

/* ---------- Compará: dos tarjetas lado a lado ---------- */
.cmp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:14px}
.cmp-card{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:6px;min-height:44px;padding:30px 12px 12px;border:2px solid var(--line);border-bottom-width:4px;border-radius:16px;background:var(--card);color:var(--ink);text-align:start;font:inherit;cursor:pointer}
.cmp-card:disabled{cursor:default}
.cmp-tag{position:absolute;top:8px;left:12px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--card-2);color:var(--ink-2);font:900 12px var(--f-app)}
.cmp-card>b{font:900 15px/1.25 var(--f-app)}
.cmp-card ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.cmp-card li{display:flex;flex-direction:column;gap:1px;padding-top:6px;border-top:1px solid var(--line)}
.cmp-card li span{font:700 11.5px/1.3 var(--f-app);color:var(--muted)}
.cmp-card li b{font:800 14px/1.3 var(--f-app)}
.cmp-card.sel{border-color:var(--sel-line);background:var(--sel-bg)}
.cmp-card.sel .cmp-tag{background:var(--sel-line);color:#fff}
.cmp-card.right{border-color:var(--ok);background:var(--ok-bg)}
.cmp-card.right .cmp-tag{background:var(--ok);color:#fff}
.cmp-card.wrong{border-color:var(--bad);background:var(--bad-bg)}
.cmp-card.wrong .cmp-tag{background:var(--bad);color:#fff}
.cmp-porque{margin-top:14px;animation:casoin .3s ease-out}
.cmp-porque h4{margin:6px 0 10px;font:800 16px/1.35 var(--f-app);color:var(--ink)}
.cmp-nota{margin:0;font:800 13px/1.3 var(--f-app)}
.cmp-nota.ok{color:var(--ok-ink)}
.cmp-nota.bad{color:var(--bad-ink)}

/* ---------- Repartí el 100%: la barra se arma mientras se mueven los controles ---------- */
.rp{margin-top:14px;padding:14px;border:2px solid var(--line);border-radius:18px;background:var(--card)}
.rp-bar{display:flex;height:26px;border-radius:13px;overflow:hidden;background:var(--line)}
.rp-bar i{display:block;height:100%;transition:width .15s ease-out}
.rp-bar i+i{box-shadow:inset 2px 0 0 var(--card)}
.rp-real{margin-top:6px;height:14px;border-radius:7px;animation:estpop .35s ease-out}
.rp-row{display:grid;grid-template-columns:14px 1fr auto auto;align-items:center;gap:4px 8px;margin-top:12px}
.rp-sw{width:14px;height:14px;border-radius:4px;background:var(--c)}
.rp-row label{font:800 14px/1.3 var(--f-app);color:var(--ink)}
.rp-row output{font:900 15px var(--f-app);font-variant-numeric:tabular-nums;color:var(--ink)}
.rp-row input[type=range]{grid-column:1/-1;width:100%;height:36px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;touch-action:none}
.rp-row input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(to right,var(--c) 0 var(--p,0%),var(--line) var(--p,0%) 100%)}
.rp-row input[type=range]::-moz-range-track{height:8px;border-radius:4px;background:linear-gradient(to right,var(--c) 0 var(--p,0%),var(--line) var(--p,0%) 100%)}
.rp-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-9px;border-radius:50%;background:var(--card);border:4px solid var(--c);box-shadow:0 2px 6px rgba(0,0,0,.18)}
.rp-row input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--card);border:4px solid var(--c)}
.rp-true{grid-row:1;grid-column:4;justify-self:end;padding:2px 8px;border-radius:8px;font:800 12px var(--f-app);color:#fff}
.rp-true.ok{background:var(--ok)}
.rp-true.bad{background:var(--bad)}
/* cerca pero no exacto (dentro de la tolerancia): amarillo, con texto oscuro para que se lea en los dos temas */
.rp-true.near{background:#F2C230;color:#3D2E00}
.rp-tot{margin:12px 0 0;text-align:center;font:800 13.5px/1.3 var(--f-app)}
.rp-tot.ok{color:var(--ok-ink)}
.rp-tot.off{color:var(--muted)}

/* ---------- Escalá: el orden, y después la regla a escala ---------- */
.esc-axis{position:relative;margin:18px 0 6px;height:132px;padding:0 8px;animation:estpop .35s ease-out}
.esc-line{position:absolute;left:8px;right:8px;top:50%;height:3px;border-radius:2px;background:var(--line)}
.esc-pt{position:absolute;top:50%;transform:translateX(-50%)}
.esc-pt i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--lv,var(--brand));border:3px solid var(--card)}
.esc-pt span{position:absolute;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;width:max-content;max-width:120px;text-align:center;font:700 11.5px/1.25 var(--f-app);color:var(--muted);font-variant-numeric:tabular-nums}
.esc-pt span b{font:900 12px/1.2 var(--f-app);color:var(--ink)}
.esc-pt.arriba span{bottom:14px}
.esc-pt.abajo span{top:14px}
.esc-pt.primero span{left:-8px;transform:none;align-items:flex-start;text-align:start}
.esc-pt.ultimo span{left:auto;right:-8px;transform:none;align-items:flex-end;text-align:end}
.esc-nota{position:absolute;bottom:-18px;left:0;right:0;margin:0;text-align:center;font:700 11.5px var(--f-app);color:var(--muted)}
.answered .cmp~.ex-help,#p-cmp2:not(:empty)~.ex-help{display:none}
.rp-cap{display:block;margin:0 0 4px;font:900 11px/1 var(--f-app);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.rp-bar+.rp-cap{margin-top:10px}.rp-real{height:26px;border-radius:13px}
.esc-dir{display:flex;align-items:center;gap:8px;margin:14px 0 0;font:900 11px/1 var(--f-app);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.esc-dir i{flex:1;height:6px;border-radius:3px;background:linear-gradient(90deg,color-mix(in srgb,var(--lv,var(--brand)) 15%,transparent),var(--lv,var(--brand)));position:relative}
.esc-dir i::after{content:'';position:absolute;right:-2px;top:50%;transform:translateY(-50%);border:6px solid transparent;border-left:9px solid var(--lv,var(--brand));border-right:0}
.answered .esc-dir,.answered .esc-dir~.ex-help{display:none}
.esc-axis{margin-bottom:40px;height:118px}.esc-nota{bottom:-30px}
/* la palabra usada deja su casillero gris, como en las apps de idiomas: invisible parecía que faltaba algo */
.chip.used{background:var(--line);border-color:var(--line);box-shadow:none;border-bottom-width:2px}
.rep-luego{margin:12px 0 0;font-size:13.5px;color:var(--muted)}
body.cargando,body.cargando *{cursor:progress!important}
.rgroup span{display:inline-flex;align-items:center;gap:8px}
.rgroup .bandera{border-radius:3px;box-shadow:0 0 0 1px var(--line);flex:none}
.logos{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 2px}
.logo-chip{margin:0;display:flex;flex-direction:column;align-items:center;gap:5px;width:96px}
.logo-chip span{display:flex;align-items:center;justify-content:center;width:96px;height:60px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px}
.logo-chip img{max-width:100%;max-height:100%;object-fit:contain}
.logo-chip figcaption{font:700 11.5px/1.25 var(--f-app);color:var(--muted);text-align:center}

/* Perfil: no depende del curso elegido, así que no muestra el selector (arriba en el celular, al costado en la compu) */
body.sin-curso #c-top,body.sin-curso #c-side{visibility:hidden}
body.sin-curso .topbar{display:none}


/* lámina: una oración por renglón, sin espacio entre ellas */
.slide-txt p.lineas span{display:block}
.slide-txt p.lineas span+span{margin-top:8px}

.caso-de{display:block;margin-bottom:4px;color:var(--muted);font:800 12px/1.3 var(--f-app);text-transform:uppercase;letter-spacing:.04em}
.res-terms b{color:var(--ink)}
/* tema oscuro: los íconos pintados con el color del curso (azules y verdes oscuros) casi no se
   veían sobre el fondo negro; se aclaran sin cambiar el color de los botones rellenos */
:root[data-theme="dark"] .topbar .course .ic,:root[data-theme="dark"] .uic,:root[data-theme="dark"] .node.n-opc.open,:root[data-theme="dark"] .hnext-curso .ic,:root[data-theme="dark"] .ccard>.ic{color:color-mix(in srgb,var(--lv,#496CCA) 60%,#fff)}
:root[data-theme="dark"] .node.n-opc.open{outline-color:color-mix(in srgb,var(--lv) 60%,#fff)}

/* ---------- Explorar: portadas por familia (26-sep-2026) ---------- */
.xtabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:10px 0 16px;border-radius:14px;background:var(--card-2)}
.xtabs button{border:none;border-radius:10px;padding:9px;background:transparent;color:var(--muted);font:800 14px/1.2 var(--f-app);cursor:pointer}
.xtabs button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.xhero{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;width:100%;margin:6px 0 18px;padding:14px;border:none;border-radius:18px;text-align:start;cursor:pointer;background:color-mix(in srgb,var(--fam) 14%,var(--card));color:color-mix(in srgb,var(--fam) 75%,var(--ink))}
.xhero-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;flex:none;background:var(--fam);color:#fff}
.xhero-txt{flex:1;min-width:0}
.xhero-txt small{display:block;font:800 12px/1.3 var(--f-app);opacity:.85}
.xhero-txt b{display:block;font:900 17px/1.2 var(--f-app)}
.xhero-txt span{display:block;font:700 13px/1.35 var(--f-app);opacity:.9}
.xfila{margin:0 0 16px}
.xh{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.xh b{font:900 16px/1.2 var(--f-app);color:var(--ink)}
.xh small{color:var(--muted);font:700 12.5px/1.3 var(--f-app);text-align:end}
.xcarw{position:relative;margin:8px -20px 0 0}
.xcar{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;margin:0;padding:2px 20px 6px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.xcar::-webkit-scrollbar{display:none}
.cov{flex:none;width:140px;min-height:146px;border-radius:16px;padding:11px 10px 13px;display:flex;flex-direction:column;justify-content:space-between;gap:10px;text-align:start;position:relative;overflow:hidden;scroll-snap-align:start;border:2px solid transparent;background:color-mix(in srgb,var(--fam) 14%,var(--card));color:color-mix(in srgb,var(--fam) 78%,var(--ink));cursor:pointer}
.cov-top{display:flex;justify-content:space-between;align-items:center;gap:4px;min-height:24px}
.cov-txt b{display:block;font:900 14px/1.2 var(--f-app);color:inherit}
.cov-txt small{display:block;margin-top:3px;font:700 12px/1.3 var(--f-app);opacity:.88}
.cov-seguir{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:999px;background:var(--fam);color:#fff;font:800 11.5px/1.2 var(--f-app);white-space:nowrap}
.xhero .cov-seguir{flex:none}
.cov-bar{position:absolute;left:0;right:0;bottom:0;height:6px;background:color-mix(in srgb,var(--fam) 22%,transparent)}
.cov-bar i{display:block;height:100%;background:var(--fam)}
.cov.pronto{background:var(--card);border-color:var(--line);color:var(--muted)}
.cov.pronto .cov-txt b{color:var(--ink-2)}
.cov-pronto{padding:2px 6px;border-radius:999px;border:1.5px solid var(--line);color:var(--muted);font:800 10.5px/1.25 var(--f-app);white-space:nowrap}
.xsumar{display:flex;align-items:center;gap:12px;width:100%;padding:14px;border:2px dashed var(--line);border-radius:16px;background:transparent;color:var(--ink);text-align:start;cursor:pointer}
.xsumar b{display:block;font:900 15px/1.2 var(--f-app)}
.xsumar small{display:block;color:var(--muted);font:700 12.5px/1.3 var(--f-app)}
.ficha .fpronto{margin:0 0 12px;padding:10px 12px;border-radius:12px;border:2px solid var(--line);font:700 14px/1.4 var(--f-app);color:var(--ink-2)}
.ccard>svg.ic{flex:none;color:var(--muted)}
#nueva-version{position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:95;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:var(--ink);color:var(--ground);font:800 14px/1.3 var(--f-app);box-shadow:0 6px 20px rgba(0,0,0,.25)}
#nueva-version span{flex:1}
#nueva-version .btn{width:auto;padding:10px 14px;font-size:14px;background:var(--ground);color:var(--ink);box-shadow:none}
.card.ver p{margin:0 0 10px;font:700 14px/1.4 var(--f-app);color:var(--muted)}
.card.ver p b{color:var(--ink)}
/* flechitas: triángulo gris sobre un círculo del color del fondo */
.xfl{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:30px;height:30px;padding:0;border:1.5px solid var(--line);border-radius:50%;display:grid;place-items:center;cursor:pointer;background:var(--card);box-shadow:0 2px 6px rgba(0,0,0,.12)}
.xfl[hidden]{display:none}
.xfl::before{content:'';width:0;height:0;border-style:solid}
.xfl.der{right:6px}
.xfl.der::before{border-width:6px 0 6px 9px;border-color:transparent transparent transparent var(--muted);margin-left:3px}
.xfl.izq{left:-14px}
.xfl.izq::before{border-width:6px 9px 6px 0;border-color:transparent var(--muted) transparent transparent;margin-right:3px}
/* Inicio y Mis cursos con el color de la familia, como Explorar */
.hnext.tint{position:relative;overflow:hidden;border-color:transparent;background:color-mix(in srgb,var(--fam) 14%,var(--card))}
.hnext.tint .hnext-curso,.hnext.tint .hnext-curso span{color:color-mix(in srgb,var(--fam) 78%,var(--ink))}
.hnext.tint .cbar{background:color-mix(in srgb,var(--fam) 22%,transparent)}
.hnext.tint .cbar i{background:var(--fam)}
.xmio{margin:0}
.hfila{margin-top:6px}
/* en Inicio la fila llega hasta el borde según el relleno de .main (20px; 14px en el celular) */
.main .xcarw{margin-right:-20px}
@media (max-width:720px){.main .xcarw{margin-right:-14px}.main .xcar{padding-right:14px}}
.ficha .fritmo{display:flex;gap:8px;align-items:flex-start;margin:-2px 0 12px;font:700 14px/1.4 var(--f-app);color:var(--ink-2)}
.ficha .fritmo b{color:var(--ink)}
.xhero .xritmo{margin-top:2px;font-size:12px;opacity:.8}
.xmio-g{margin:10px 0 -2px;font:900 13px/1.2 var(--f-app);color:var(--muted)}
.xmio-g:first-child{margin-top:0}
.xmio.fin{opacity:.92}
.xfin{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--fam);color:#fff}
.xcompl{margin-top:6px;border-top:2px solid var(--line)}
.xcompl summary{list-style:none;display:flex;align-items:center;gap:8px;padding:14px 2px;cursor:pointer;font:900 15px/1.2 var(--f-app);color:var(--ink)}
.xcompl summary::-webkit-details-marker{display:none}
.xcompl summary::after{content:'';margin-left:auto;width:0;height:0;border-style:solid;border-width:8px 6.5px 0 6.5px;border-color:var(--muted) transparent transparent transparent;transition:transform .15s}
.xcompl[open] summary::after{transform:rotate(180deg)}
.xcompl .clist{padding-bottom:6px}
.pcab{margin:0 0 14px;cursor:default}
.irme{white-space:nowrap;position:fixed;left:50%;transform:translateX(-50%);bottom:calc(86px + env(safe-area-inset-bottom));z-index:60;display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border:1.5px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font:800 14px/1.2 var(--f-app);box-shadow:0 4px 14px rgba(0,0,0,.15);cursor:pointer}
.irme[hidden]{display:none}
.tprog .cert-btn{grid-column:1/-1;margin-top:6px;width:auto;justify-self:start;padding:8px 14px;font-size:14px}
.cert-ov p{max-width:420px}
/* letra «Muy grande»: los nombres de la barra de pestañas entran sin cortarse */
html[data-letra="1.25"] .tabbar button span{font-size:10.5px;letter-spacing:-.02em}
html[data-letra="1.12"] .tabbar button span{font-size:11.5px}
/* barra de arriba: «Curso actual» + nombre, y a la derecha «Ver todos» */
.topbar .course{gap:10px}
.topbar .course .ctop-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--lv) 16%,var(--card));color:var(--lv)}
.topbar .course .ctop-txt{flex:1;min-width:0;display:grid}
.topbar .course .ctop-txt small{color:var(--muted);font:800 11px/1.2 var(--f-app)}
.topbar .course .ctop-txt b{font:900 14px/1.2 var(--f-app);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .course .ctop-ver{flex:none;display:inline-flex;align-items:center;gap:2px;color:var(--brand-ink,var(--brand));font:800 13px/1.2 var(--f-app)}
:root[data-theme="dark"] .topbar .course .ctop-ic{color:color-mix(in srgb,var(--lv) 60%,#fff)}
/* con letra grande una palabra larga del nivel empujaba la cajita de avance fuera de la pantalla */
.lvhead .lvtxt{min-width:0;overflow-wrap:anywhere;hyphens:auto}
.lvprog{min-width:72px}
.lvprog .bar{width:72px}
/* el título del tema cede ancho (palabra larga + letra grande empujaba «Intro» fuera de la pantalla) */
.uhead>div{flex:1;min-width:0;overflow-wrap:anywhere;hyphens:auto}
.uhead .uintro{flex:none}
.cmp-card{min-width:0;overflow-wrap:anywhere;hyphens:auto}
/* ---------- Panel (súper administrador y admin de empresa) ---------- */
.panel .pn-msg{margin:8px 0 0;padding:10px 12px;border-radius:12px;background:var(--card-2);font:700 14px/1.4 var(--f-app)}
.pn-emps{display:grid;gap:8px;margin-bottom:10px}
.pn-emp{display:grid;gap:2px;padding:12px;border:2px solid var(--line);border-radius:14px;background:var(--card)}
.pn-emp.off{opacity:.6}
.pn-emp b{font:900 15px/1.2 var(--f-app)}
.pn-emp small{color:var(--muted);font:700 12.5px/1.35 var(--f-app);overflow-wrap:anywhere}
.pn-emp .linkbtn{justify-self:start}
.pn-tabla{overflow-x:auto;margin:0 -4px;padding:0 4px}
.pn-tabla table{width:100%;border-collapse:collapse;font:700 13px/1.35 var(--f-app)}
.pn-tabla th{text-align:start;color:var(--muted);font:800 12px/1.2 var(--f-app);padding:6px 8px;border-bottom:2px solid var(--line)}
.pn-tabla td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
.pn-tabla td small{display:block;color:var(--muted);font-weight:700;overflow-wrap:anywhere}
.pn-c{display:inline-block;margin:0 4px 4px 0;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--lv) 16%,var(--card));color:color-mix(in srgb,var(--lv) 80%,var(--ink));font:800 11.5px/1.4 var(--f-app);white-space:nowrap}
.pe-activa{display:flex;align-items:center;gap:8px;font:800 14px var(--f-app)}