:root{--bg:#f3f5fb;--card:#fff;--ink:#141b2d;--muted:#5a6479;--line:#dfe5f2;--navy:#000e84;--blue:#206ff6;--soft:#e8eefa;
  --green:#1e8e4f;--green-s:#e4f5ea;--amber:#b7791f;--amber-s:#fdf3e1;--red:#c0392b;--red-s:#fbe9e7}
@media (prefers-color-scheme:dark){:root{--bg:#0b1020;--card:#131a2e;--ink:#e8edf8;--muted:#97a3bd;--line:#252f4a;--navy:#9db4ff;--blue:#6ea6ff;--soft:#1a2547;
  --green:#5ccf8c;--green-s:#16331f;--amber:#e8b25a;--amber-s:#3a2d15;--red:#ef7a6c;--red-s:#3d1c19}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15.5px/1.5 "Source Sans 3","Segoe UI",system-ui,-apple-system,sans-serif}
h1,h2,h3,.num{font-family:Montserrat,"Segoe UI",system-ui,sans-serif}
button{font:inherit}
.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
nav.lado{background:var(--marca,#000e84);color:#dbe4ff;padding:20px 14px;position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;gap:3px}
.marca{display:flex;gap:10px;align-items:center;padding:4px 8px 14px}
.marca-logo{display:block;background:#fff;border-radius:14px;padding:10px 12px;margin:2px 2px 6px}.marca-logo img{display:block;width:100%;height:auto}.marca-sub{font-size:11.5px;color:#9fb2f0;padding:0 6px 14px;line-height:1.3}
.logo{width:36px;height:36px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--marca,#000e84);font:700 18px Montserrat,system-ui,sans-serif}
.marca b{display:block;font:700 17px Montserrat,system-ui,sans-serif;color:#fff;line-height:1.1}.marca span{font-size:11.5px;color:#9fb2f0}
nav.lado button.item{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:10px;font-weight:500;font-size:14.5px;color:#c9d6ff}
nav.lado button.item:hover{background:rgba(255,255,255,.08)}
nav.lado button.item.on{background:#fff;color:var(--marca,#000e84);font-weight:600}
nav.lado button.item:focus-visible{outline:2px solid #fff}
.grupo{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:#8fa3e8;padding:12px 12px 2px}
.cnt{margin-left:auto;background:#f5b53f;color:#3a2600;font-size:11px;font-weight:700;padding:1px 7px;border-radius:99px}
.quien{margin-top:auto;font-size:12px;color:#9fb2f0;padding:10px 12px;border-top:1px solid rgba(255,255,255,.14)}
.quien button{all:unset;cursor:pointer;color:#fff;text-decoration:underline}
main{padding:26px 34px 80px;max-width:1260px;width:100%}
.demo{background:var(--amber-s);color:var(--amber);padding:6px 14px;border-radius:10px;font-size:13px;margin-bottom:14px}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:4px}
h1{margin:0;font-size:30px;letter-spacing:-.4px;color:var(--navy)}
.sub{margin:4px 0 20px;color:var(--muted);max-width:780px}
h2{font-size:19px;margin:0 0 12px;color:var(--navy)} h3{font-size:16px;margin:0 0 4px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;overflow-x:auto}
.grid{display:grid;gap:14px}.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.g3{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}.g2{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))}
.mt{margin-top:14px}
.kpi .l{font-size:13px;color:var(--muted)}.kpi .num{font-size:36px;font-weight:700;letter-spacing:-1px;color:var(--navy);line-height:1.15}.kpi .d{font-size:12.5px;color:var(--muted)}
.kpi.mal .num{color:var(--red)}.kpi.bien .num{color:var(--green)}
.pill{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 10px;border-radius:99px;white-space:nowrap}
.p-g{background:var(--green-s);color:var(--green)}.p-a{background:var(--amber-s);color:var(--amber)}.p-r{background:var(--red-s);color:var(--red)}.p-b{background:var(--soft);color:var(--blue)}.p-x{background:var(--line);color:var(--muted)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr.click{cursor:pointer}tr.click:hover td{background:var(--soft)}.r{text-align:right}
.btn{all:unset;box-sizing:border-box;cursor:pointer;background:var(--blue);color:#fff;padding:9px 16px;border-radius:10px;font-weight:600;font-size:14px;display:inline-block;text-align:center}
.btn:hover{filter:brightness(1.08)}.btn:focus-visible,.chip:focus-visible,tr.click:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.btn.suave{background:var(--soft);color:var(--blue)}.btn.rojo{background:var(--red-s);color:var(--red)}.btn.sm{padding:5px 12px;font-size:13px}.btn[disabled]{opacity:.5;cursor:not-allowed}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.chip{all:unset;box-sizing:border-box;cursor:pointer;border:1px solid var(--line);background:var(--card);padding:6px 13px;border-radius:99px;font-size:13.5px;font-weight:500}
.chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
@media (prefers-color-scheme:dark){.chip.on{color:#0b1020}}
input,select,textarea{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 12px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blue);outline-offset:0}
textarea{min-height:110px;resize:vertical}
label.f{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin:12px 0 5px}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.nota{background:var(--soft);border-left:4px solid var(--blue);padding:11px 15px;border-radius:10px;font-size:13.5px;margin:14px 0}
.nota.a{background:var(--amber-s);border-color:var(--amber)}.nota.r{background:var(--red-s);border-color:var(--red)}
.vacio{color:var(--muted);text-align:center;padding:28px 10px}
.bars{display:flex;align-items:flex-end;gap:6px;height:150px;padding-top:8px;overflow-x:auto}
.bars div{flex:1;min-width:28px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;height:100%;font-size:10.5px;color:var(--muted)}
.bars i{display:block;width:100%;background:var(--blue);border-radius:5px 5px 0 0;min-height:3px}
.rb{margin:0 0 14px}.rb .h{display:flex;justify-content:space-between;gap:10px;font-size:14px;margin-bottom:4px}
.rb .t{display:flex;height:12px;border-radius:99px;overflow:hidden;background:var(--line)}.rb .t i{display:block;height:100%}
.kv{display:grid;grid-template-columns:140px 1fr;gap:6px 12px;font-size:14px;margin:8px 0}.kv>span{color:var(--muted)}
.tl{border-left:2px solid var(--line);margin-left:6px;padding-left:16px}.tl>div{position:relative;padding:0 0 12px;font-size:13.5px}
.tl>div:before{content:"";position:absolute;left:-23px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--blue)}
.tl small{color:var(--muted);display:block}
.flujo{display:flex;gap:6px;align-items:stretch;flex-wrap:wrap;margin:10px 0}
.flujo .p{flex:1;min-width:92px;border:1px solid var(--line);border-radius:10px;padding:7px 9px;font-size:12px;background:var(--card);color:var(--muted)}
.flujo .p b{display:block;color:var(--ink);font-size:12.5px}.flujo .p.ya{background:var(--green-s);border-color:transparent}.flujo .p.ya b{color:var(--green)}
.flujo .p.aqui{border-color:var(--blue);background:var(--soft)}.flujo .p.aqui b{color:var(--blue)}
.velo{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:20;display:none}.velo.on{display:block}
.cajon{position:fixed;top:0;right:0;height:100vh;width:min(560px,100%);background:var(--card);border-left:1px solid var(--line);box-shadow:-20px 0 50px rgba(0,0,0,.2);transform:translateX(105%);transition:.25s;z-index:30;overflow-y:auto;padding:24px}
.cajon.on{transform:none}
.x{all:unset;cursor:pointer;float:right;font-size:24px;color:var(--muted);line-height:1;padding:2px 6px}
.aviso{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#141b2d;color:#fff;padding:12px 20px;border-radius:12px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:50;max-width:90vw}
.aviso.on{opacity:1}.aviso.mal{background:#8f2a20}
.login{max-width:380px;margin:12vh auto;padding:0 20px}.login .card{padding:28px}
.cuerpo-login h1{font-size:26px}
.acciones{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.mono{font-variant-numeric:tabular-nums}
@media(max-width:860px){.marca-logo,.marca-sub{display:none}.app{grid-template-columns:1fr}nav.lado{position:static;height:auto;flex-direction:row;overflow-x:auto;padding:10px}.marca,.quien,.grupo{display:none}nav.lado button.item{width:auto;white-space:nowrap}main{padding:18px 16px 80px}.fila{grid-template-columns:1fr}}