:root{--bg:#0b0f14;--panel:#121821;--panel2:#0f141b;--ink:#e6edf3;--ink2:#aeb9c4;--muted:#6f7d8c;
 --line:#212b36;--accent:#31b7c4;--ok:#35c37e;--warn:#e0a53a;--crit:#e5606a;--dead:#5c6672;--acc2:#8a7cff;
 --mono:ui-monospace,"SFMono-Regular","Cascadia Code",Menlo,Consolas,monospace;--sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* layout */
.side{position:fixed;top:0;left:0;bottom:0;width:230px;background:var(--panel2);border-right:1px solid var(--line);overflow-y:auto;display:flex;flex-direction:column;z-index:20}
.brand{padding:16px 16px 12px;font-family:var(--mono);font-size:14px;letter-spacing:.05em;border-bottom:1px solid var(--line)}
.brand .logo{color:var(--accent)} .brand b{color:var(--accent)}
.side nav{flex:1;padding:8px 8px 20px}
.side nav a{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:6px;color:var(--ink2);font-size:13px;margin:1px 0}
.side nav a:hover{background:var(--panel);color:var(--ink)}
.side nav a.on{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.side nav a .i{color:var(--muted);font-size:11px;width:12px;text-align:center}
.grp{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;padding:12px 12px 4px}
.sidefoot{padding:12px 16px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--muted)}
main{margin-left:230px}
.top{position:sticky;top:0;display:flex;align-items:center;gap:12px;padding:10px 20px;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:10}
.burger{display:none;font-size:20px;cursor:pointer;color:var(--ink2)}
.search{flex:1;max-width:560px}
.search input{width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font-size:13px}
.search input:focus{outline:2px solid var(--accent);outline-offset:0}
.ro{font-family:var(--mono);font-size:11px;color:var(--warn);white-space:nowrap}
.wrap{padding:22px 24px 70px;max-width:1180px}
h1{font-size:22px;font-weight:800;letter-spacing:-.01em;margin:0 0 16px}
h1 .count{font-family:var(--mono);font-size:13px;color:var(--muted);font-weight:500;margin-left:6px}
h2{font-size:12px;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);margin:0 0 10px}
/* tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:22px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:14px 16px;display:block;color:inherit}
.tile .v{font-family:var(--mono);font-size:20px;font-weight:700;display:flex;align-items:center;gap:8px}
.tile .l{font-size:11px;color:var(--muted);margin-top:3px;text-transform:uppercase;letter-spacing:.05em}
.tile.bot:hover{border-color:var(--accent)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.g{background:var(--ok)}.y{background:var(--warn)}.r,.crit{background:var(--crit)}.gr{background:var(--dead)}
/* cards + tables */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media(max-width:820px){.cols2{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin-bottom:16px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:8px 10px;border-bottom:1px solid var(--line);color:var(--ink2);vertical-align:top}
td b{color:var(--ink)}
table.grid tr{cursor:pointer}
table.grid tbody tr:hover td,table.grid tr:hover td{background:var(--panel2)}
.scrollx{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
.empty{color:var(--muted);text-align:center;padding:26px}
/* detail */
.crumb{margin-bottom:6px;font-size:12px}
.kv{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.kvrow{display:grid;grid-template-columns:200px 1fr;gap:0;border-bottom:1px solid var(--line)}
.kvrow:last-child{border-bottom:none}
.kvrow .k{font-family:var(--mono);font-size:11px;color:var(--muted);padding:10px 14px;background:var(--panel2);text-transform:uppercase;letter-spacing:.04em}
.kvrow .v{padding:10px 14px;color:var(--ink);white-space:pre-wrap}
@media(max-width:640px){.kvrow{grid-template-columns:1fr}.kvrow .k{padding-bottom:2px}}
.actions{margin-top:16px;display:flex;align-items:center;gap:10px}
.btn{background:var(--accent);color:#04222a;font-weight:700;padding:8px 14px;border-radius:8px;font-size:13px}
.btn.disabled{background:var(--panel);color:var(--muted);border:1px solid var(--line);cursor:not-allowed}
.hint{color:var(--muted);font-size:12px}
/* login */
.loginbg{display:grid;place-items:center;min-height:100vh;background:radial-gradient(1200px 600px at 50% -10%,#12303a,transparent),var(--bg)}
.loginbox{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:30px 28px;width:min(360px,92vw);display:flex;flex-direction:column;gap:12px}
.loginbox .brand.big{font-size:20px;justify-content:center;border:none;padding:0;text-align:center}
.loginbox .sub{color:var(--muted);font-size:12px;text-align:center;margin-bottom:6px}
.loginbox input{padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:var(--panel2);color:var(--ink);font-size:14px}
.loginbox input:focus{outline:2px solid var(--accent)}
.loginbox button{padding:11px;border:none;border-radius:9px;background:var(--accent);color:#04222a;font-weight:800;font-size:14px;cursor:pointer;margin-top:4px}
.err{background:color-mix(in srgb,var(--crit) 15%,transparent);color:var(--crit);border:1px solid color-mix(in srgb,var(--crit) 35%,transparent);border-radius:8px;padding:8px 12px;font-size:13px}
/* mobile sidebar */
.burger{display:none}
@media(max-width:860px){
 .side{transform:translateX(-100%);transition:transform .2s}
 #navtoggle:checked ~ .side{transform:none}
 main{margin-left:0}.burger{display:block}
}
/* onboarding / docs */
.lead{color:var(--ink2);font-size:14.5px;max-width:80ch;margin:0 0 16px}
.doc{margin:0;padding-left:18px}.doc li{margin:7px 0;color:var(--ink2)}.doc b{color:var(--ink)}
.card h2 a,.doc a{color:var(--accent)}
table.mini{width:auto;margin:6px 0}table.mini td{padding:3px 10px 3px 0;border:none}
.banner{border-radius:10px;padding:12px 16px;margin-bottom:16px;font-weight:600;border:1px solid var(--line)}
.banner.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.banner.pend{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 35%,transparent)}
.chk.ok{color:var(--ok);font-weight:700}.chk.no{color:var(--muted)}
code{background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-family:var(--mono);font-size:12px;color:var(--ink)}
/* cronologia causal */
.chain{margin-bottom:14px}
.chtitle{display:flex;align-items:center;gap:10px;font-family:var(--sans);font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:12px}
.onum{font-family:var(--mono);font-size:12px;color:var(--accent);background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:2px 7px}
.chfecha{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--muted)}
.flow{display:flex;flex-direction:column;gap:0}
.node{background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:7px 12px;display:grid;grid-template-columns:160px 1fr;gap:12px}
.node .nlbl{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding-top:2px}
.node .nval{color:var(--ink2);font-size:13px}
.arrow{color:var(--accent);text-align:left;padding:1px 0 1px 74px;font-size:12px;line-height:1}
.refs{margin-top:8px;font-family:var(--mono);font-size:11.5px;color:var(--accent)}
@media(max-width:640px){.node{grid-template-columns:1fr}.node .nlbl{padding-bottom:2px}.arrow{padding-left:8px}}
/* trazabilidad chips */
h3.trz{font-size:10px;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:14px 0 8px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:7px;border:1px solid var(--line);background:var(--panel2);color:var(--ink2);font-size:12.5px;line-height:1.3}
.chip:hover{border-color:var(--accent);color:var(--ink)}
.chip .cl{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.chip.dataset{border-color:color-mix(in srgb,var(--acc2) 40%,var(--line))}
.chip.script{border-color:color-mix(in srgb,var(--ok) 34%,var(--line))}
.mini td.k{color:var(--muted);font-family:var(--mono);font-size:11px;text-transform:uppercase;padding-right:14px}
/* reproducibilidad + código */
pre.code{background:#0a0e13;border:1px solid var(--line);border-radius:8px;padding:12px 14px;overflow-x:auto;font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--ink2);white-space:pre;max-height:520px;overflow-y:auto}
pre.code.src{max-height:640px}
pre.code.cmd{background:#08120c;border-color:color-mix(in srgb,var(--ok) 30%,var(--line));color:var(--ok);max-height:none;white-space:pre-wrap}
pre.code.doc-body{white-space:pre-wrap;color:var(--ink2);max-height:420px}
.tag{font-family:var(--mono);font-size:10px;padding:2px 8px;border-radius:5px;letter-spacing:.04em;vertical-align:middle}
.tag.ok{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
.tag.no{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.chain2{display:flex;flex-direction:column;gap:0}
.chain2 .step{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:9px 13px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.chain2 .sl{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);min-width:78px}
.chain2 .meta{font-size:11px;color:var(--muted)}
.chain2 .nval{color:var(--ink2);font-size:13px}
.chain2 .insuf{color:var(--warn);font-size:12.5px;font-style:italic}
.arrow2{color:var(--accent);padding:2px 0 2px 82px;font-size:12px}
.repro .cmd{margin:0;flex:1;min-width:200px}
/* árbol del conocimiento */
.tree{font-family:var(--mono);font-size:13px;line-height:1.9}
.tree details{margin-left:14px;border-left:1px solid var(--line);padding-left:12px}
.tree summary{cursor:pointer;list-style:none;padding:2px 0}
.tree summary::-webkit-details-marker{display:none}
.tree summary::before{content:'▸ ';color:var(--accent)}
.tree details[open]>summary::before{content:'▾ '}
.tree a{color:var(--ink2)}.tree a:hover{color:var(--accent)}
.tree .rootnode{font-size:16px;font-weight:700;color:var(--accent);font-family:var(--sans)}
.tree .leaf{color:var(--ink2);padding:1px 0 1px 14px;display:block}
.tree .badge{font-size:10px;padding:1px 6px;border-radius:4px;margin-left:6px}
.tree .b-ref{background:color-mix(in srgb,var(--crit) 16%,transparent);color:var(--crit)}
.tree .b-ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.tree .b-open{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}