:root{
  --bg:#0b131c; --bg2:#0e1926; --panel:#132231; --panel2:#16283a; --panel3:#1b3247;
  --border:#26415a; --border2:#345676; --ink:#e4eef7; --muted:#93aec6; --muted2:#6d8aa4;
  --gold:#eab04a; --gold2:#c8801c; --blue:#4aa3e0; --blue2:#1c4e80;
  --green:#33d69f; --greenbg:#0f2e28; --red:#ff6f61; --redbg:#331714;
  --cyan:#38c0dd; --cyanbg:#0f2b34; --violet:#b48cf0;
  --shadow:0 6px 22px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(180deg,#0a1119,#0b131c 220px);color:var(--ink);
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.5;font-size:15px}
.wrap{max-width:1160px;margin:0 auto;padding:0 18px 90px}
a{color:var(--blue)}
/* HEADER */
header.top{background:linear-gradient(120deg,#0f2c4c,#16283a 60%,#1b3247);
  border-bottom:1px solid var(--border);box-shadow:var(--shadow);position:relative;overflow:hidden}
header.top::after{content:"";position:absolute;right:-60px;top:-40px;width:260px;height:260px;
  background:radial-gradient(circle,rgba(234,176,74,.13),transparent 70%);pointer-events:none}
.top-inner{max-width:1160px;margin:0 auto;padding:20px 20px 16px;display:flex;
  align-items:center;gap:18px;flex-wrap:wrap}
.brand h1{margin:0;font-size:23px;letter-spacing:.3px}
.brand h1 span{color:var(--gold)}
.brand .kick{letter-spacing:2.5px;font-size:11px;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.brand .sub{font-size:13px;color:var(--muted)}
.spacer{flex:1 1 40px}
.badge{cursor:pointer;user-select:none;border-radius:11px;padding:9px 14px;font-size:13px;font-weight:700;
  display:flex;align-items:center;gap:9px;border:1px solid;transition:.15s;white-space:nowrap}
.badge:hover{transform:translateY(-1px)}
.badge.ok{background:var(--greenbg);border-color:#1f6b52;color:var(--green)}
.badge.bad{background:var(--redbg);border-color:#7a2a22;color:var(--red)}
.badge .dot{width:9px;height:9px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
/* TABS */
nav.tabs{display:flex;gap:6px;max-width:1160px;margin:0 auto;padding:0 14px;flex-wrap:wrap;
  position:sticky;top:0;z-index:30;background:rgba(11,19,28,.92);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border)}
nav.tabs button{background:none;border:none;color:var(--muted);font-size:14.5px;font-weight:600;
  padding:14px 16px 12px;cursor:pointer;border-bottom:3px solid transparent;transition:.15s;font-family:inherit}
nav.tabs button:hover{color:var(--ink)}
nav.tabs button.active{color:var(--gold);border-bottom-color:var(--gold)}
nav.tabs button .em{font-size:16px;margin-right:5px}
/* BOTTOM NAV (estilo app, solo en movil) */
nav.bottomnav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:rgba(11,19,28,.97);backdrop-filter:blur(12px);border-top:1px solid var(--border);
  box-shadow:0 -6px 22px rgba(0,0,0,.4);padding-bottom:env(safe-area-inset-bottom)}
nav.bottomnav button{flex:1 1 0;min-width:0;background:none;border:none;color:var(--muted);
  font-family:inherit;font-size:10px;font-weight:700;letter-spacing:.2px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:7px 2px 6px;min-height:56px;border-top:2px solid transparent;transition:.15s;-webkit-tap-highlight-color:transparent}
nav.bottomnav button .em{font-size:21px;line-height:1;margin:0}
nav.bottomnav button.active{color:var(--gold);border-top-color:var(--gold);
  background:linear-gradient(0deg,rgba(234,176,74,.13),transparent 90%)}
.tabpane{display:none;padding-top:22px}
.tabpane.active{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* CARDS */
.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:18px 20px;
  margin:16px 0;box-shadow:var(--shadow)}
.card.accent{border-top:4px solid var(--gold)}
h2.sec{font-size:20px;margin:6px 0 4px;border-bottom:2px solid var(--border);padding-bottom:8px}
h3{color:var(--blue);font-size:17px;margin:20px 0 8px}
h4{color:var(--gold);margin:14px 0 6px;font-size:14px;text-transform:uppercase;letter-spacing:.5px}
p{margin:8px 0}
.muted{color:var(--muted)}
.small{font-size:13px}
code,.mono{font-family:"Consolas","SF Mono",monospace}
code{background:#0c1a26;border:1px solid var(--border);border-radius:5px;padding:1px 6px;color:#9fe3c6;font-size:13px}
.eq{background:#0c1a26;border-left:4px solid var(--blue);border-radius:6px;padding:10px 15px;margin:9px 0;
  font-family:"Cambria Math","Times New Roman",Georgia,serif;font-size:17px;overflow-x:auto}
.box{border-radius:10px;padding:12px 15px;margin:11px 0;font-size:14px}
.box .t{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.7px;font-weight:700;margin-bottom:4px}
.box.trap{background:var(--redbg);border:1px solid #6e2a23}.box.trap .t{color:var(--red)}
.box.key{background:#2a230d;border:1px solid #6b571d}.box.key .t{color:var(--gold)}
.box.win{background:var(--greenbg);border:1px solid #1f6b52}.box.win .t{color:var(--green)}
.box.info{background:var(--cyanbg);border:1px solid #1f5566}.box.info .t{color:var(--cyan)}
/* CHIPS */
.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:8px;font-size:13.5px;
  font-weight:700;margin:3px 5px 3px 0;border:1px solid;font-family:"Consolas",monospace}
.chip.gold{background:#2a230d;color:var(--gold);border-color:#6b571d}
.chip.green{background:var(--greenbg);color:var(--green);border-color:#1f6b52}
.chip.red{background:var(--redbg);color:var(--red);border-color:#7a2a22}
.chip.blue{background:#0d2337;color:var(--blue);border-color:#22506f}
.chip.cyan{background:var(--cyanbg);color:var(--cyan);border-color:#1f5566}
.chip.violet{background:#1e1533;color:var(--violet);border-color:#3f2d63}
.chip .lab{color:var(--muted);font-weight:600}
/* STEPS */
.step{border:1px solid var(--border);border-radius:12px;margin:14px 0;overflow:hidden;background:var(--panel2)}
.step.locked{opacity:.5;filter:grayscale(.4)}
.step.done{border-color:#1f6b52}
.step-head{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--panel3);cursor:pointer}
.step-head .n{width:30px;height:30px;border-radius:50%;background:var(--blue2);color:#fff;display:flex;
  align-items:center;justify-content:center;font-weight:700;flex:0 0 auto}
.step.done .step-head .n{background:var(--green);color:#04241a}
.step-head .ttl{font-weight:700;font-size:15px}
.step-head .st{margin-left:auto;font-size:12px;color:var(--muted)}
.step-body{padding:14px 18px;display:none}
.step.open .step-body{display:block}
.step-head .em{font-size:17px}
/* INPUT ROWS */
.field{display:flex;align-items:center;gap:10px;margin:8px 0;flex-wrap:wrap}
.field label{min-width:210px;font-size:14px}
.field .unit{color:var(--muted);font-size:13px;min-width:60px}
input[type=number],input[type=text]{background:#0a1723;border:1px solid var(--border2);color:var(--ink);
  border-radius:7px;padding:7px 9px;font-size:14px;width:130px;font-family:"Consolas",monospace}
input:focus{outline:none;border-color:var(--gold)}
input.good{border-color:var(--green);background:#0f2620}
input.bad{border-color:var(--red);background:#2a1512}
.mark{font-size:16px;min-width:22px;font-weight:700}
.mark.good{color:var(--green)}.mark.bad{color:var(--red)}
button.btn{background:var(--blue2);color:#fff;border:1px solid var(--border2);border-radius:8px;
  padding:8px 16px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s}
button.btn:hover{background:#245c94}
button.btn.gold{background:var(--gold2);border-color:#8a5a14}button.btn.gold:hover{background:#d8931f}
button.btn.ghost{background:transparent;color:var(--muted)}button.btn.ghost:hover{color:var(--ink);background:#122234}
button.btn.green{background:#1a7a5c}button.btn.green:hover{background:#219a73}
button.btn.violet{background:#5b3d8f;border-color:#43296e}button.btn.violet:hover{background:#7050ad}
button.btn:disabled{opacity:.4;cursor:not-allowed}
.reveal{background:#0c1a26;border:1px dashed var(--border2);border-radius:9px;padding:12px 15px;margin:10px 0;
  display:none;font-size:14px}
.reveal.show{display:block;animation:fade .2s}
.reveal .eq{background:#0a141e}
/* FIGURE */
.fig{background:#0c1926;border:1px solid var(--border);border-radius:12px;padding:10px;margin:12px 0;text-align:center}
.fig svg{max-width:100%;height:auto;display:block;margin:0 auto}
.fig .cap{font-size:12px;color:var(--muted);margin-top:6px}
/* GRID */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.grid2,.grid3{grid-template-columns:1fr}.field label{min-width:150px}}
/* SLIDERS */
.slider{display:flex;align-items:center;gap:10px;margin:9px 0}
.slider label{min-width:120px;font-size:13.5px;color:var(--muted)}
.slider input[type=range]{flex:1;accent-color:var(--gold)}
.slider .val{min-width:74px;text-align:right;font-family:"Consolas",monospace;color:var(--gold);font-weight:700;font-size:14px}
/* TABLE */
table{border-collapse:collapse;width:100%;margin:10px 0;font-size:13.5px}
th,td{border:1px solid var(--border);padding:7px 10px;text-align:left}
th{background:var(--panel3);color:var(--ink)}
tr:nth-child(even) td{background:#101f2e}
/* DRILLS */
.drillbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:8px 0}
.stat{background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:8px 14px;text-align:center;min-width:90px}
.stat .v{font-size:22px;font-weight:800;font-family:"Consolas",monospace}
.stat .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.timer{font-family:"Consolas",monospace;font-size:26px;font-weight:800}
.timer.warn{color:var(--gold)}.timer.over{color:var(--red)}
.log{max-height:230px;overflow-y:auto;font-size:12.5px;font-family:"Consolas",monospace}
.log .row{padding:5px 8px;border-bottom:1px solid var(--border);display:flex;gap:8px}
.log .row .tg{color:var(--red);font-weight:700}
.log .row .ok{color:var(--green)}
/* MODAL */
.modal{position:fixed;inset:0;background:rgba(4,9,14,.72);z-index:100;display:none;align-items:flex-start;
  justify-content:center;padding:40px 16px;overflow-y:auto}
.modal.show{display:flex}
.modal .inner{background:var(--panel);border:1px solid var(--border2);border-radius:14px;max-width:560px;
  width:100%;padding:22px;box-shadow:var(--shadow)}
.modal h3{margin-top:0}
.assert{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--border);font-size:13.5px}
.assert .m{font-weight:700}
.pill{display:inline-block;background:#0d2337;border:1px solid #22506f;color:var(--blue);border-radius:20px;
  padding:3px 11px;font-size:12px;margin:3px 5px 3px 0}
.hidden{display:none!important}
hr.dash{border:0;border-top:1px dashed var(--border);margin:18px 0}
.tag{display:inline-block;background:var(--blue2);color:#fff;border-radius:6px;padding:2px 9px;font-weight:700;font-size:13px;margin-right:8px}
.pts{color:var(--gold);font-weight:700}
.footer{text-align:center;color:var(--muted2);font-size:12.5px;margin-top:40px}
/* ============ MOBILE-FIRST (telefono) ============ */
@media(max-width:640px){
  html{-webkit-text-size-adjust:100%}
  nav.tabs{display:none}                 /* arriba en desktop, abajo en movil */
  nav.bottomnav{display:flex}
  .wrap{padding:0 13px calc(72px + env(safe-area-inset-bottom))}  /* deja aire p/ la nav fija */
  .tabpane{padding-top:16px}
  /* header compacto tipo barra de app */
  .top-inner{padding:13px 15px 12px;gap:8px}
  .brand .kick{display:none}
  .brand h1{font-size:clamp(17px,5vw,21px);line-height:1.25}
  .brand .sub{font-size:11.5px;line-height:1.4}
  .badge{padding:7px 11px;font-size:12px}
  /* titulos fluidos, sin desbordes */
  h2.sec{font-size:clamp(17px,4.7vw,20px)}
  h3{font-size:16px}
  .eq{font-size:15.5px}
  /* tarjetas y campos mas holgados al tacto */
  .card{padding:15px 14px;margin:13px 0}
  .field label{min-width:130px;font-size:13.5px}
  .field input[type=number],.field input[type=text]{width:118px}
  .slider label{min-width:92px}
  button.btn{min-height:44px;padding:10px 15px}   /* target tactil >=44px */
  .step-head{padding:13px 14px}
  /* tablas: scroll horizontal propio, nunca empujan el body */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  /* modal a pantalla angosta */
  .modal{padding:18px 10px}
  .modal .inner{padding:18px 16px}
  .drillbar{gap:9px}
  .stat{min-width:78px;padding:7px 11px}
}

/* ============================================================================
   FASE 3 — HUB UNIFICADO: router de secciones + nav de 2 niveles + Inicio +
   estilos .doc (contenido portado de ORO y PLAN, re-tematizado a oscuro).
   ============================================================================ */

/* ---- Secciones de nivel superior (Inicio / Simulador / Oro / Plan) ---- */
.section{display:none}
.section.active{display:block;animation:fade .25s ease}

/* Nav superior de secciones (visible en desktop) */
nav.topnav{display:flex;gap:6px;max-width:1160px;margin:0 auto;padding:0 14px;flex-wrap:wrap;
  position:sticky;top:0;z-index:30;background:rgba(11,19,28,.92);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border)}
nav.topnav button{background:none;border:none;color:var(--muted);font-size:14.5px;font-weight:600;
  padding:14px 16px 12px;cursor:pointer;border-bottom:3px solid transparent;transition:.15s;font-family:inherit}
nav.topnav button:hover{color:var(--ink)}
nav.topnav button.active{color:var(--gold);border-bottom-color:var(--gold)}
nav.topnav button .em{font-size:16px;margin-right:6px}

/* Sub-tabs del Simulador (tira con scroll horizontal en móvil) */
nav.subtabs{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  margin:0;padding:12px 0 8px;position:sticky;top:0;z-index:25;
  background:linear-gradient(180deg,var(--bg) 72%,rgba(11,19,28,0));border-bottom:1px solid var(--border)}
nav.subtabs::-webkit-scrollbar{display:none}
nav.subtabs button{flex:0 0 auto;background:var(--panel2);border:1px solid var(--border);color:var(--muted);
  font-size:13.5px;font-weight:600;padding:9px 14px;border-radius:10px;cursor:pointer;transition:.15s;
  font-family:inherit;white-space:nowrap;min-height:40px}
nav.subtabs button:hover{color:var(--ink);border-color:var(--border2)}
nav.subtabs button.active{color:#08130d;background:var(--gold);border-color:var(--gold2)}
nav.subtabs button .em{font-size:15px;margin-right:5px}
@media(min-width:641px){nav.subtabs{position:static}}   /* en desktop no fija, para no chocar con topnav */

/* ---- INICIO (dashboard) ---- */
.hero-in{background:linear-gradient(120deg,#0f2c4c,#16283a 60%,#1b3247);border:1px solid var(--border);
  border-top:4px solid var(--gold);border-radius:16px;padding:20px 22px;margin:16px 0;box-shadow:var(--shadow)}
.hero-in h2{border:0;margin:0 0 4px;font-size:clamp(19px,5vw,24px)}
.hero-in .who{color:var(--muted);font-size:13.5px}
.countbox{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px}
.countbox .num{font-family:"Consolas",monospace;font-size:44px;font-weight:800;color:var(--gold);line-height:1}
.countbox .lab{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.countbox input[type=date]{background:#0a1723;border:1px solid var(--border2);color:var(--ink);
  border-radius:8px;padding:7px 10px;font-size:14px;font-family:inherit}
.tilegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0}
.tile{background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:14px;text-align:center}
.tile .v{font-size:26px;font-weight:800;font-family:"Consolas",monospace;line-height:1.05}
.tile .l{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-top:4px}
.tile .s{font-size:12px;color:var(--muted2);margin-top:3px}
.golink{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.golink button{flex:1 1 auto}
@media(max-width:640px){.tilegrid{grid-template-columns:repeat(2,1fr)}.countbox .num{font-size:38px}}

/* ==================== DIAGNÓSTICO por arquetipo (Inicio · F7) ==================== */
.diag-reco{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--panel2);border:1px solid var(--border);border-left:4px solid var(--gold);
  border-radius:12px;padding:13px 16px;margin:4px 0 14px}
.diag-reco .rc-txt{flex:1 1 220px;min-width:0}
.diag-reco .rc-k{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:3px}
.diag-reco .rc-h{font-size:16px;font-weight:800;color:var(--ink)}
.diag-reco .rc-s{font-size:13px;color:var(--muted);margin-top:3px}
.diag-reco button{flex:0 0 auto;white-space:nowrap}
.diag-list{margin-top:4px}
.diag-row{display:flex;align-items:center;gap:10px;margin:8px 0}
.diag-row .nm{flex:0 0 42%;font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.diag-track{flex:1;height:9px;border-radius:6px;background:var(--panel3);overflow:hidden}
.diag-fill{display:block;height:100%;border-radius:6px;transition:width .35s ease}
.diag-row .pc{flex:0 0 82px;text-align:right;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.diag-row .pc b{color:var(--ink);font-weight:700}
@media(max-width:640px){.diag-row .nm{flex-basis:38%}.diag-row .pc{flex-basis:70px}}

/* ============================================================================
   .doc — contenido portado (ORO / PLAN). Clases re-tematizadas a la paleta
   oscura del app. Namespaced en .doc para NO chocar con .step/.chip del app.
   ============================================================================ */
.doc{font-size:15px}
.doc h2{color:var(--gold);font-size:clamp(18px,4.6vw,22px);margin:34px 0 10px;padding-bottom:7px;
  border-bottom:2px solid var(--border);scroll-margin-top:64px}
.doc h2:first-child{margin-top:6px}
.doc h2 .num{display:inline-block;min-width:28px;color:var(--gold2);opacity:.8}
.doc h3{color:var(--blue);font-size:17px;margin:22px 0 8px}
.doc h4{color:var(--gold);margin:14px 0 6px;font-size:14px;text-transform:uppercase;letter-spacing:.4px}
.doc p{margin:9px 0}
.doc .lead{font-size:16px;color:var(--muted)}
.doc .mini{font-size:13.5px}
.doc .center{text-align:center}
.doc strong,.doc b{color:#f4f8fc}
.doc a{color:var(--blue)}
.doc code{background:#0c1a26;border:1px solid var(--border);border-radius:5px;padding:1px 6px;
  font-family:"Consolas",monospace;font-size:13px;color:var(--cyan)}
.doc .mono{font-family:"Consolas",monospace}
.doc .goldtxt{color:var(--gold);font-weight:700}
.doc .redtxt{color:var(--red);font-weight:700}
.doc .greentxt{color:var(--green);font-weight:700}
.doc ul.tight{margin:6px 0;padding-left:20px}
.doc ul.tight li{margin:4px 0}
.doc hr.sep{border:0;border-top:1px dashed var(--border);margin:22px 0}

/* chip-nav interno (reemplaza el TOC) */
.docnav{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 4px}
.docnav button{background:var(--panel2);border:1px solid var(--border);color:var(--muted);
  border-radius:16px;padding:6px 12px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s}
.docnav button:hover{background:var(--panel3);color:var(--ink);border-color:var(--border2)}

/* cards / boxes / chips dentro de .doc */
.doc .card{background:var(--panel);border:1px solid var(--border);border-radius:12px;
  padding:16px 18px;margin:13px 0;box-shadow:0 2px 10px rgba(0,0,0,.22)}
.doc .card.arch{border-top:5px solid var(--gold)}
.doc .box{border-radius:10px;padding:12px 15px;margin:11px 0;font-size:14px;border:1px solid}
.doc .box b.t{display:block;margin-bottom:4px;font-size:11.5px;text-transform:uppercase;letter-spacing:.6px}
.doc .box.trap{background:var(--redbg);border-color:#6e2a23}.doc .box.trap b.t{color:var(--red)}
.doc .box.key{background:#2a230d;border-color:#6b571d}.doc .box.key b.t{color:var(--gold)}
.doc .box.win{background:var(--greenbg);border-color:#1f6b52}.doc .box.win b.t{color:var(--green)}
.doc .box.calc,.doc .box.info{background:var(--cyanbg);border-color:#1f5566}.doc .box.calc b.t,.doc .box.info b.t{color:var(--cyan)}
.doc .box.mor{background:#1e1533;border-color:#3f2d63}.doc .box.mor b.t{color:var(--violet)}
.doc .chip{display:inline-block;padding:2px 9px;border-radius:6px;font-size:12.5px;font-weight:700;
  margin:1px 4px 2px 0;border:1px solid;font-family:inherit}
.doc .chip.c-key{background:#2a230d;color:var(--gold);border-color:#6b571d}
.doc .chip.c-trap,.doc .chip.c-moh{background:var(--redbg);color:var(--red);border-color:#7a2a22}
.doc .chip.c-calc,.doc .chip.c-est{background:var(--cyanbg);color:var(--cyan);border-color:#1f5566}
.doc .chip.c-win,.doc .chip.c-obl{background:var(--greenbg);color:var(--green);border-color:#1f6b52}
.doc .chip.c-num{background:#0d2337;color:var(--blue);border-color:#22506f}
.doc .chip.c-com{background:#1e1533;color:var(--violet);border-color:#3f2d63}

/* pasos numerados en línea (override del .step colapsable del app) */
.doc .step{border:0;background:none;border-radius:0;overflow:visible;margin:9px 0;
  padding-left:38px;position:relative;min-height:28px;font-size:14px}
.doc .step .n{position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;
  background:var(--panel3);border:1px solid var(--gold2);color:var(--gold);display:flex;
  align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:0 0 auto}

/* ecuaciones y tablas */
.doc .eq{background:#0c1a26;border-left:4px solid var(--blue);border-radius:6px;padding:11px 15px;margin:10px 0;
  font-family:"Cambria Math","Times New Roman",Georgia,serif;font-size:17px;text-align:center;overflow-x:auto;color:#eaf2fb}
.doc .eq.small{font-size:15px}
.doc .frac{display:inline-block;text-align:center;vertical-align:middle;margin:0 .18em}
.doc .frac>span{display:block;padding:0 .35em}
.doc .frac .den{border-top:1.6px solid currentColor;padding-top:1px}
.doc table{border-collapse:collapse;width:100%;margin:11px 0;font-size:13.5px}
.doc th,.doc td{border:1px solid var(--border);padding:7px 9px;text-align:left;vertical-align:top}
.doc th{background:var(--panel3);color:var(--ink)}
.doc tr:nth-child(even) td{background:#101f2e}
.doc table.mini{font-size:12.5px}

/* figuras */
.doc .fig{background:#0c1926;border:1px solid var(--border);border-radius:10px;padding:10px;margin:12px 0;text-align:center}
.doc .fig svg{max-width:100%;height:auto;display:block;margin:0 auto}
.doc .cap{color:var(--muted);font-size:12.5px;margin-top:6px}
/* SVG theming (clases s-* de ORO) mapeadas a la paleta oscura */
.doc .s-bg{fill:var(--panel2)}.doc .s-bg2{fill:#0a1420}.doc .s-line{stroke:var(--border);fill:none}
.doc .s-ink{stroke:var(--ink)}.doc .s-txt{fill:var(--ink)}.doc .s-dim{fill:var(--muted)}
.doc .s-gold{stroke:var(--gold);fill:none}.doc .s-goldf{fill:var(--gold)}
.doc .s-red{stroke:var(--red);fill:none}.doc .s-redf{fill:var(--red)}
.doc .s-blue{stroke:var(--blue);fill:none}.doc .s-bluef{fill:var(--blue)}
.doc .s-green{stroke:var(--green);fill:none}.doc .s-greenf{fill:var(--green)}

/* ORO: arquetipos, barra 40/60, kbd, pill */
.doc .arch .tag{display:inline-block;background:#0f2c4c;color:var(--gold);border:1px solid #6b571d;
  border-radius:6px;padding:2px 10px;font-weight:800;font-size:14px;margin-right:8px}
.doc .arch .src{color:var(--muted);font-size:13px}
.doc .barwrap{display:flex;height:34px;border-radius:8px;overflow:hidden;border:1px solid var(--border);margin:10px 0;font-size:12.5px;font-weight:700}
.doc .barwrap .b1{background:var(--redbg);color:var(--red);flex:0 0 40%;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--border)}
.doc .barwrap .b2{background:var(--greenbg);color:var(--green);flex:1;display:flex;align-items:center;justify-content:center}
.doc .kbd{background:#0c1a26;border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;padding:1px 7px;font-family:"Consolas",monospace;font-size:13px;color:var(--gold)}
.doc .pill{display:inline-block;background:#0d2337;border:1px solid #22506f;color:var(--blue);border-radius:20px;padding:3px 11px;font-size:12px;margin:3px 5px 3px 0}

/* PLAN: barras de frecuencia, details, calendario, pocket */
.doc .fbar{display:flex;align-items:center;gap:10px;margin:7px 0}
.doc .fbar .lab{flex:0 0 250px;font-size:13.5px}
.doc .fbar .track{flex:1;background:#0c1a26;border-radius:7px;height:20px;overflow:hidden;border:1px solid var(--border)}
.doc .fbar .fill{height:100%;background:linear-gradient(90deg,var(--blue2),#2f6aa8);border-radius:7px;
  color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:flex-end;padding-right:7px}
.doc .fbar .fill.hi{background:linear-gradient(90deg,#7a2a22,var(--red));color:#fff}
.doc details{margin:10px 0;border:1px solid var(--border);border-radius:9px;background:var(--panel2);overflow:hidden}
.doc details>summary{cursor:pointer;padding:10px 14px;font-weight:700;font-size:14px;color:var(--blue);
  background:var(--panel3);list-style:none;user-select:none}
.doc details>summary::-webkit-details-marker{display:none}
.doc details>summary::before{content:"\25B6";display:inline-block;margin-right:9px;font-size:11px;transition:transform .15s;color:var(--gold)}
.doc details[open]>summary::before{transform:rotate(90deg)}
.doc details.pista>summary{color:var(--gold);background:#2a230d}
.doc details .body{padding:12px 15px}
.doc .day{background:var(--panel2);border:1px solid var(--border);border-left:5px solid var(--blue2);
  border-radius:10px;padding:12px 16px;margin:11px 0}
.doc .day.hoy{border-left-color:var(--gold);background:#1a1c12}
.doc .day.sim{border-left-color:var(--red);background:#231414}
.doc .day.block{border-left-color:var(--muted2);background:#131a22;opacity:.94}
.doc .day h4{margin:0 0 8px;display:flex;align-items:center;gap:8px;color:var(--ink);text-transform:none;letter-spacing:0;font-size:15px}
.doc .day .tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:12px;background:var(--panel3);color:var(--blue)}
.doc .day.hoy .tag{background:#3a2f10;color:var(--gold)}
.doc .day.sim .tag{background:#3a1a16;color:var(--red)}
.doc .day.block .tag{background:#1e2833;color:var(--muted)}
.doc label.task{display:flex;align-items:flex-start;gap:9px;margin:6px 0;font-size:14px;cursor:pointer}
.doc label.task input{margin-top:3px;width:17px;height:17px;flex:0 0 auto;accent-color:var(--green);cursor:pointer}
.doc label.task input:checked + span{color:var(--muted2);text-decoration:line-through}
.doc .prog{font-size:13px;color:var(--muted);margin:4px 0 14px}
.doc .prog b{color:var(--green)}
.doc .resetbtn{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:8px;
  padding:6px 12px;font-size:13px;cursor:pointer;margin-top:6px;font-family:inherit}
.doc .resetbtn:hover{background:var(--redbg);color:var(--red);border-color:#7a2a22}
.doc .pocket{background:var(--panel);border:2px dashed var(--gold2);border-radius:14px;padding:18px 20px;margin:16px 0}
.doc .pocket h3{margin-top:0}
.doc .tag2{display:inline-block;font-size:11px;font-weight:700;background:var(--blue2);color:#fff;padding:2px 8px;border-radius:6px;margin-right:5px}

/* PLAN: sus SVGs vienen con colores claros → van sobre marco claro tipo "blueprint" */
.doc.plan svg{background:#eef3f8;border:1px solid var(--border);border-radius:10px;padding:6px;
  max-width:100%;height:auto;display:block;margin:10px auto}

/* ---- Ajustes móviles del hub ---- */
@media(max-width:640px){
  nav.topnav{display:none}                 /* en móvil manda la bottomnav de secciones */
  .doc table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .doc .fbar .lab{flex-basis:130px}
  .hero-in{padding:16px 15px}
  .tile .v{font-size:22px}
}

/* ============================================================================
   FASE 3 · extra — alias de variables legacy de ORO/PLAN (para que los pocos
   estilos inline y atributos SVG que las usan resuelvan a la paleta oscura) +
   clases no cubiertas por el bloque anterior (pre, indices, arsenal).
   ============================================================================ */
.doc{
  /* ORO (nombres en ingles) */
  --line:var(--border); --dim:var(--muted); --calc:var(--cyan); --purple:var(--violet);
  /* PLAN (nombres en espanol) */
  --linea:var(--border); --tinta:var(--ink); --gris:var(--muted); --papel:var(--panel); --fondo:var(--bg);
  --acc:var(--gold); --acc2:var(--gold2); --azul:var(--blue2); --azul2:var(--blue);
  --rojo:var(--red); --verde:var(--green); --morado:var(--violet);
}
/* PLAN: bloques de codigo <pre> (dark) */
.doc pre{background:#0f2230;color:#d7e6ef;border-radius:9px;padding:14px 16px;overflow-x:auto;
  font-family:"Consolas",monospace;font-size:13px;line-height:1.5;margin:11px 0}
.doc pre .cm{color:#7fa6bd} .doc pre .hl{color:#8be9a8}
/* ORO: indice .toc (div con <ol>) */
.doc .toc{background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:14px 18px;margin:16px 0}
.doc .toc b{color:var(--gold)}
.doc .toc ol{margin:6px 0 0;padding-left:22px;columns:2;column-gap:26px}
.doc .toc a{color:var(--muted);text-decoration:none}
.doc .toc a:hover{color:var(--gold);text-decoration:underline}
/* PLAN: nav.toc de chips — NO sticky, para no chocar con la nav del hub */
.doc nav.toc{position:static;display:flex;flex-wrap:wrap;gap:5px;justify-content:center;
  background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:9px 11px;margin:6px 0 14px}
.doc nav.toc a{color:var(--blue);text-decoration:none;font-weight:600;font-size:13px;
  padding:4px 10px;border-radius:16px;background:var(--panel3);border:1px solid var(--border)}
.doc nav.toc a:hover{background:var(--blue2);color:#fff}
/* PLAN: caja arsenal */
.doc .arsenal{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:10px 16px;margin:14px 0;font-size:14px}
.doc .arsenal a{color:var(--blue);font-weight:600;text-decoration:none} .doc .arsenal a:hover{text-decoration:underline}
/* ORO: ancla invisible con offset para el sticky nav */
.doc .anchor{display:block;position:relative;top:-56px;visibility:hidden}
@media(max-width:720px){.doc .toc ol{columns:1}}

/* ==================== DOJO DEL LETRERO (F9) ==================== */
.dojo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin:12px 0}
.dojo-card{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:12px;
  padding:12px 14px 12px 22px;cursor:pointer;transition:.15s;overflow:hidden;min-height:44px}
.dojo-card:hover{border-color:var(--gold);transform:translateY(-1px)}
.dojo-card.locked{opacity:.45;cursor:not-allowed}
.dojo-card.locked:hover{border-color:var(--border);transform:none}
.dojo-card.passed{border-color:#1a7a5c}
.dojo-card .belt{position:absolute;left:0;top:0;bottom:0;width:8px}
.dojo-card .dt{font-size:14px}
.dojo-card .ds{font-size:12px;color:var(--muted);margin-top:2px}
.dojo-card .dst{font-size:12px;font-weight:700;margin-top:6px}
.djdots{display:flex;gap:5px;margin:6px 0 10px;flex-wrap:wrap}
.djdot{width:10px;height:10px;border-radius:50%;background:var(--panel3);border:1px solid var(--border2)}
.djdot.done{background:var(--green);border-color:var(--green)}
.djdot.cur{background:var(--gold);border-color:var(--gold)}
.djopts{display:flex;flex-direction:column;gap:8px;margin:10px 0}
button.djopt{text-align:left;background:var(--panel2);color:var(--ink);border:1px solid var(--border2);
  border-radius:10px;padding:11px 14px;font-size:14px;font-family:inherit;cursor:pointer;min-height:44px;transition:.15s}
button.djopt:hover:not(:disabled){border-color:var(--gold);background:var(--panel3)}
button.djopt:disabled{cursor:default}
button.djopt.good{border-color:var(--green);background:var(--greenbg);color:var(--ink)}
button.djopt.bad{border-color:var(--red);background:var(--redbg)}
table.djt{border-collapse:collapse;width:100%;margin:8px 0;font-size:13px}
table.djt th,table.djt td{border:1px solid var(--border);padding:6px 9px;text-align:left}
table.djt th{background:var(--panel2);color:var(--gold)}
@media(max-width:640px){.dojo-grid{grid-template-columns:1fr}}