:root{--ink:#16243B;--ink-soft:#3A4A61;--muted:#5E6A72;--paper:#FAFAF7;--surface:#fff;
--rule:#DFE2DA;--rule-soft:#EDEFE9;--seal:#8A6B1F;--seal-bg:#FBF6E7;--verify:#2C6046;
--verify-bg:#EDF5F0;--alert:#A8322A;--alert-bg:#FBEFEE;--focus:#2F5FA8;
--sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
--serif:Georgia,"Times New Roman",serif}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55}
a{color:var(--focus)}button,input,select{font:inherit}
:focus-visible{outline:2.5px solid var(--focus);outline-offset:2px;border-radius:3px}
.marco{display:grid;grid-template-columns:250px 1fr;min-height:100dvh}
.rail{border-right:1px solid var(--rule);background:var(--surface);padding:20px 14px;position:sticky;top:0;height:100dvh;overflow-y:auto}
.rail .who b{display:block;font-size:16px}.rail .who span{color:var(--muted);font-size:13px}
.rail nav{display:grid;gap:2px;margin-top:16px;padding-top:14px;border-top:1px solid var(--rule-soft)}
.rail nav a{display:flex;justify-content:space-between;padding:9px 11px;border-radius:4px;color:var(--ink-soft);text-decoration:none}
.rail nav a:hover{background:var(--rule-soft)}
.rail nav a.on{background:var(--ink);color:#fff;font-weight:600}
main{padding:30px 26px 90px;max-width:900px}
h1{font-size:26px;margin:0 0 6px;font-weight:600}
.sub{color:var(--muted);margin:0 0 24px;max-width:62ch}
.panel{background:var(--surface);border:1px solid var(--rule);border-radius:5px;padding:20px;margin-bottom:16px}
.panel h3{margin:0 0 10px;font-size:17px}
.lead{color:var(--muted);margin:0 0 14px}
.btn{background:var(--ink);color:#fff;border:0;padding:11px 18px;border-radius:4px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{background:#0E1A2E}
.btn.ghost{background:none;color:var(--ink);border:1px solid var(--rule)}
.btn.ghost:hover{background:var(--rule-soft)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.row{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:14px}
.sel,.inp{background:var(--surface);border:1px solid var(--rule);border-radius:4px;padding:10px 11px;max-width:100%}
.inp{width:100%}
.badge{display:inline-block;font-size:11.5px;padding:2px 8px;border-radius:99px;border:1px solid;
background:var(--rule-soft);border-color:var(--rule);color:var(--ink-soft)}
.badge.ver{color:var(--verify);background:var(--verify-bg);border-color:#BFD8CB}
.badge.pen{color:var(--seal);background:var(--seal-bg);border-color:#E3D3A4}
.opt{display:block;width:100%;text-align:left;background:var(--surface);border:1px solid var(--rule);
padding:13px 15px;border-radius:4px;margin:8px 0;cursor:pointer}
.opt:hover{border-color:var(--ink-soft)}
.opt .L{font-family:var(--serif);font-weight:700;margin-right:9px;color:var(--muted)}
.opt.ok{border-color:var(--verify);background:var(--verify-bg)}
.opt.no{border-color:var(--alert);background:var(--alert-bg)}
.cita{font-family:var(--serif);background:var(--seal-bg);border-left:3px solid var(--seal);
padding:13px 16px;margin:14px 0;border-radius:0 4px 4px 0;font-size:15px}
.cita b{color:var(--seal)}.cita span{display:block;margin-top:4px;color:var(--ink-soft)}
.why{margin-top:14px;padding:14px 16px;border-radius:4px;border:1px solid var(--rule);background:var(--rule-soft)}
.why.good{background:var(--verify-bg);border-color:#BFD8CB}
.why.bad{background:var(--alert-bg);border-color:#E9C9C5}
.why .v{font-weight:700;margin-bottom:5px}
.traps{list-style:none;margin:12px 0 0;padding:10px 0 0;border-top:1px solid rgba(0,0,0,.09)}
.traps li{display:grid;grid-template-columns:22px 1fr;gap:6px;margin:6px 0;font-size:14.5px;color:var(--ink-soft)}
.traps .tl{font-family:var(--serif);font-weight:700;color:var(--alert)}
.prog{height:5px;background:var(--rule-soft);border-radius:99px;overflow:hidden;margin-bottom:20px}
.prog i{display:block;height:100%;background:var(--ink)}
.dots{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:18px}
.dots i{width:26px;height:4px;border-radius:99px;background:var(--rule)}
.dots i.on{background:var(--ink)}.dots i.cur{background:var(--seal)}
.paso{background:var(--surface);border:1px solid var(--rule);border-radius:5px;padding:24px 22px}
.paso .pk{font-family:var(--serif);font-size:13px;color:var(--seal);margin-bottom:6px}
.paso h2{margin:0 0 16px;font-size:21px;font-weight:600}
.paso ul{margin:0;padding-left:20px}.paso li{margin:11px 0;line-height:1.6}
.paso.clave{background:var(--seal-bg);border-color:#E3D3A4}
.paso.alerta{background:var(--alert-bg);border-color:#E9C9C5}
.areaH{font-family:var(--serif);font-size:13px;font-weight:700;color:var(--seal);
margin:24px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--rule)}
.lec{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
background:var(--surface);border:1px solid var(--rule);border-radius:4px;padding:12px 15px;
margin-bottom:8px;text-decoration:none;color:inherit}
.lec:hover{border-color:var(--ink-soft)}
.lec.done{border-left:3px solid var(--verify)}
.lec .lc{font-family:var(--serif);color:var(--seal);min-width:38px}
.lec .lt{font-weight:600}.lec .lo{display:block;color:var(--muted);font-size:13px}
.lec .lp{font-size:12px;color:var(--muted);white-space:nowrap}
.stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:11px;margin-bottom:20px}
.stat div{background:var(--surface);border:1px solid var(--rule);border-radius:5px;padding:14px}
.stat b{display:block;font-size:25px;font-weight:600;font-variant-numeric:tabular-nums}
.stat span{color:var(--muted);font-size:13px}
.bar{margin-bottom:13px}.bar b{display:block;font-size:14.5px;margin-bottom:5px}
.bar .t{height:9px;background:var(--rule-soft);border-radius:99px;overflow:hidden}
.bar .t i{display:block;height:100%;background:var(--verify)}
.bar .t i.low{background:var(--alert)}.bar .t i.mid{background:var(--seal)}
.bar small{color:var(--muted);font-size:12.5px}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--rule-soft)}
th{font-size:12.5px;color:var(--muted);font-weight:600}
tbody tr:hover{background:var(--rule-soft)}
.flash{background:var(--surface);border:1px solid var(--rule);border-radius:5px;padding:28px 22px;
min-height:190px;display:flex;flex-direction:column;justify-content:center;gap:14px;text-align:center}
.flash .fp{font-family:var(--serif);font-size:14.5px;color:var(--seal)}
.flash .fq{font-size:23px;font-weight:600}
.flash .fa{font-family:var(--serif);font-size:17px;color:var(--ink-soft);border-top:1px solid var(--rule);padding-top:14px}
.err{background:var(--alert-bg);border:1px solid #E9C9C5;color:var(--alert);
padding:11px 14px;border-radius:4px;margin-bottom:14px;font-size:14.5px}
.centro{max-width:420px;margin:12vh auto;padding:0 20px}
.centro .marca{font-family:var(--serif);font-size:13px;color:var(--seal);margin-bottom:8px}
.campo{margin-bottom:14px}.campo label{display:block;font-size:14px;margin-bottom:5px;font-weight:600}
.timer{font-family:var(--serif);font-size:19px;font-variant-numeric:tabular-nums}
.timer.warn{color:var(--alert)}
@media(max-width:820px){.marco{grid-template-columns:1fr}
.rail{position:static;height:auto;border-right:0;border-bottom:1px solid var(--rule)}
.rail nav{grid-template-columns:repeat(3,1fr);display:grid}
main{padding:20px 16px 80px}}