@font-face{font-family:"Manrope";src:url(/brand/manrope.woff2) format("woff2");font-weight:200 800;font-display:swap}
:root{--bg:#0b0f0d;--surface:#141a17;--surface2:#101512;--border:#2a3530;--text:#eef3ef;--muted:#a3b1a9;--accent:#d2fa83;--ink:#10231c;--warn:#ffcf7a;--bad:#ff9d9d;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.55 "Manrope",system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--accent)}
.hd{border-bottom:1px solid var(--border);background:rgba(11,15,13,.92);position:sticky;top:0;z-index:5;backdrop-filter:blur(8px)}
.hd .bar{max-width:1080px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.hd nav{display:flex;gap:16px;font-size:.92rem;flex-wrap:wrap}
.hd nav a{color:var(--text);text-decoration:none;opacity:.85}
.hd nav a:hover,.hd nav a[aria-current]{opacity:1;color:var(--accent)}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.crumbs{font-size:.85rem;color:var(--muted);margin:20px 0 0}
.crumbs a{color:var(--muted)}
.hero{padding:12px 0 8px}
.hero h1{font-size:clamp(1.8rem,5vw,2.8rem);line-height:1.1;margin:8px 0 10px}
.hero p{max-width:640px;color:var(--muted);margin:0}
.eyebrow{font-size:.78rem;letter-spacing:.12em;color:var(--accent);font-weight:800;margin:20px 0 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;margin:24px 0 8px}
.tcard{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:18px;text-decoration:none;color:var(--text);transition:border-color .15s,transform .15s}
.tcard:hover,.tcard:focus-visible{border-color:var(--accent);transform:translateY(-2px)}
.tcard .ic{width:40px;height:40px;border-radius:12px;background:#183e35;display:grid;place-items:center;font-size:1.3rem}
.tcard h2{font-size:1.1rem;margin:6px 0 0}
.tcard p{margin:0;color:var(--muted);font-size:.93rem}
.tcard .go{margin-top:auto;padding-top:8px;color:var(--accent);font-weight:700;font-size:.9rem}
.tool{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:18px;margin:22px 0;align-items:start}
@media(max-width:820px){.tool{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:18px}
.card h2,.card h3{margin:0 0 10px;font-size:1.05rem}
.res{position:sticky;top:70px;border-color:#3b5a42;background:linear-gradient(160deg,#16231c,#141a17)}
@media(max-width:820px){.res{position:static}}
.f{display:grid;gap:5px;margin:0 0 14px}
.f>span{font-size:.85rem;color:var(--muted);font-weight:600}
.f small{color:var(--muted);font-size:.78rem}
.inp{display:flex;align-items:center;background:var(--bg);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.inp:focus-within{outline:2px solid var(--accent)}
.inp input,.inp select{flex:1;min-width:0;width:100%;font:inherit;color:var(--text);background:transparent;border:0;padding:11px 12px;outline:none}
.inp select option{background:var(--surface);color:var(--text)}
.inp .u{padding:0 12px;color:var(--muted);font-size:.9rem;white-space:nowrap}
.inp .u.l{padding-right:0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:420px){.row2{grid-template-columns:1fr}}
.seg{display:flex;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:3px;gap:3px}
.seg button{flex:1;font:inherit;font-weight:700;font-size:.9rem;color:var(--muted);background:transparent;border:0;border-radius:9px;padding:8px 6px;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--accent);color:var(--ink)}
.seg button:focus-visible{outline:2px solid var(--accent)}
.sec{font-size:.78rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;margin:20px 0 10px;font-weight:800}
.sec:first-child{margin-top:0}
.big{font-size:clamp(2rem,6vw,2.8rem);font-weight:800;line-height:1.05;margin:2px 0}
.lbl{color:var(--muted);font-size:.88rem}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:14px 0}
.kpi{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:12px;padding:10px 12px}
.kpi b{display:block;font-size:1.1rem}
.kpi span{font-size:.76rem;color:var(--muted)}
.bars{display:grid;gap:9px;margin:12px 0}
.bar-row{display:grid;gap:3px}
.bar-row .t{display:flex;justify-content:space-between;gap:8px;font-size:.9rem}
.bar-row .t b{font-weight:700}
.track{height:8px;border-radius:999px;background:#0b0f0d;border:1px solid var(--border);overflow:hidden}
.fill{height:100%;background:var(--accent);border-radius:999px}
.note{font-size:.84rem;color:var(--muted);margin:10px 0 0}
.tip{background:rgba(210,250,131,.08);border:1px solid rgba(210,250,131,.3);border-radius:12px;padding:10px 12px;font-size:.92rem;margin:12px 0}
.tip.warn{background:rgba(255,207,122,.08);border-color:rgba(255,207,122,.35)}
.tip.bad{background:rgba(255,157,157,.08);border-color:rgba(255,157,157,.35)}
.btn{font:inherit;font-weight:800;border:1px solid var(--border);background:transparent;color:var(--text);border-radius:999px;padding:11px 20px;cursor:pointer;text-decoration:none;display:inline-block}
.btn.primary{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.btn:disabled{opacity:.6;cursor:default}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:right;padding:7px 8px;border-bottom:1px solid var(--border)}
th:first-child,td:first-child{text-align:left}
th{color:var(--muted);font-weight:600;font-size:.78rem}
tr.me td{color:var(--accent);font-weight:700}
.tw{overflow-x:auto}
.doc h2{font-size:1.25rem;margin:36px 0 10px}
.doc p,.doc li{color:#cdd8d1}
.doc ul,.doc ol{padding-left:20px}
details{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 16px;margin:8px 0}
summary{cursor:pointer;font-weight:700}
details p{margin:8px 0 0}
.related{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:12px 0 48px}
.related a{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 14px;color:var(--text);text-decoration:none;font-weight:700}
.related a:hover{border-color:var(--accent)}
.related small{display:block;color:var(--muted);font-weight:400}
.ft{border-top:1px solid var(--border);padding:22px 0 40px;color:var(--muted);font-size:.85rem}
.ft a{color:var(--muted)}
.spin{display:inline-block;width:18px;height:18px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:s .8s linear infinite;vertical-align:-3px;margin-right:8px}
@keyframes s{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:10px 18px;max-width:90vw;z-index:10}
/* checklist */
.cl-group{margin:0 0 14px}
.cl-group h3{margin:0 0 8px}
.cl-item{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--border);cursor:pointer}
.cl-item input{margin-top:5px;width:20px;height:20px;accent-color:#d2fa83;flex:none}
.cl-item b{display:block;font-weight:600}
.cl-item small{color:var(--muted)}
.cl-item.crit b::after{content:"clave";margin-left:8px;font-size:.68rem;background:var(--accent);color:var(--ink);border-radius:999px;padding:1px 8px;font-weight:800;vertical-align:2px}
.cl-item.no b{color:var(--bad)}
.cl-state{display:flex;gap:6px;margin-top:6px}
.prog{height:10px;border-radius:999px;background:#0b0f0d;border:1px solid var(--border);overflow:hidden;margin:10px 0}
.prog>div{height:100%;background:var(--accent);transition:width .25s}
@media print{body{background:#fff;color:#000}.hd,.actions,.related,.ft,.res .btn{display:none}.card{border-color:#999;background:#fff}.doc p,.doc li{color:#000}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.hd nav{align-items:center}
.nav-drop{position:relative;display:inline-flex}
.nav-drop-link{display:inline-flex;align-items:center;gap:4px}
.nav-drop-link svg{transition:transform .2s}
.nav-menu{position:absolute;top:100%;left:50%;transform:translate(-50%,6px);min-width:300px;padding:8px;margin-top:10px;display:grid;gap:2px;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity .16s,transform .16s,visibility .16s;z-index:30}
.nav-menu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.hd .nav-menu a{display:grid;gap:1px;padding:10px 12px;border-radius:12px;color:var(--text);opacity:1}
.nav-menu strong{font-size:.92rem}
.nav-menu small{color:var(--muted);font-size:.78rem}
.hd .nav-menu a:hover,.hd .nav-menu a:focus-visible{background:#1b2320;color:var(--text)}
.hd .nav-menu .nav-menu-all{display:block;margin-top:4px;border-top:1px solid var(--border);border-radius:0 0 12px 12px;color:var(--accent);font-weight:700}
.hd .nav-menu a{grid-template-columns:auto 1fr;align-items:center;column-gap:12px}
.nav-menu .nav-menu-ic{width:34px;height:34px;border-radius:10px;background:#183e35;color:#d2fa83;display:grid;place-items:center}
.nav-menu a>span:last-child{display:grid;gap:1px}
.nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav-drop:hover .nav-drop-link svg,.nav-drop:focus-within .nav-drop-link svg{transform:rotate(180deg)}
@media(max-width:820px){.nav-menu,.nav-drop-link svg{display:none}}
.i{color:var(--accent);flex:none}
.tcard .ic .i{width:22px;height:22px}
.related .i{width:18px;height:18px;vertical-align:-4px;margin-right:6px}
