:root{--bg:#f3f5f9;--card:#fff;--text:#18202f;--muted:#5f6b80;--line:#e3e7ee;--accent:#2457c5;
--accent-2:#3b7bf0;--accent-soft:#e8effd;--ok:#16794a;--warn:#9a6200;--err:#b3261e;--chip:#eef2f8;
--head:#0f1b33;--head-2:#1c3363;--head-text:#e8eefc;--head-muted:#9fb0d3;
--kpi-a:#2457c5;--kpi-b:#3b7bf0;--shadow:0 1px 2px rgba(16,24,40,.05),0 4px 14px rgba(16,24,40,.06);--radius:14px;
--c0:#2457c5;--c1:#14a38b;--c2:#f2a33a;--c3:#8b5cf6;--c4:#e05d6f;--c5:#0ea5e9;--c6:#84cc16;--c7:#64748b}
@media (prefers-color-scheme:dark){:root{--bg:#0f131a;--card:#181d26;--text:#e7ebf2;--muted:#9aa5b8;
--line:#2a313d;--accent:#7aa7ff;--accent-2:#9bbcff;--accent-soft:#1f2b44;--ok:#5fd394;--warn:#f0b54a;
--err:#ff8a80;--chip:#232a36;--head:#0a0e15;--head-2:#141c2c;--kpi-a:#1d3f8f;--kpi-b:#2f5fc4;--shadow:0 1px 2px rgba(0,0,0,.3);
--c0:#7aa7ff;--c1:#3dd6b9;--c2:#f7bd62;--c3:#a78bfa;--c4:#f2899a;--c5:#4cc3f5;--c6:#a3e04a;--c7:#94a3b8}}
*{box-sizing:border-box}
body{margin:0;font:15px/1.55 "Inter","Segoe UI Variable","Segoe UI",system-ui,-apple-system,sans-serif;
background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}

/* Cabecera */
header.top{background:linear-gradient(120deg,var(--head),var(--head-2));color:var(--head-text);
box-shadow:0 2px 10px rgba(10,20,40,.18);position:sticky;top:0;z-index:10}
.top-in{max-width:1240px;margin:0 auto;padding:0 16px;display:flex;flex-wrap:wrap;align-items:center;
gap:4px 18px}
header.top .brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:1.05rem;
letter-spacing:.2px;padding:12px 0;margin-right:6px;color:#fff;text-decoration:none}
.logo{width:26px;height:26px;border-radius:8px;
background:conic-gradient(from 200deg,var(--c1),var(--c0),var(--c3),var(--c2),var(--c1));
box-shadow:inset 0 0 0 6px rgba(15,27,51,.55)}
nav.menu{display:flex;flex-wrap:wrap;gap:0;flex:1 1 auto}
nav.menu a{padding:7px 9px;margin:7px 0;border-radius:999px;text-decoration:none;
color:var(--head-muted);font-weight:500;font-size:.9rem;transition:background .15s,color .15s}
nav.menu a:hover{color:#fff;background:rgba(255,255,255,.08)}
nav.menu a.on{color:#fff;background:rgba(255,255,255,.16)}
header.top form{margin-left:auto}
header.top button.secondary{color:var(--head-text);border-color:rgba(255,255,255,.35);padding:6px 14px}
header.top button.secondary:hover{background:rgba(255,255,255,.1)}

/* Estructura */
main{max-width:1240px;margin:0 auto;padding:22px 16px 40px}
h1{font-size:1.65rem;font-weight:700;letter-spacing:-.3px;margin:.25rem 0 1.1rem}
h2{font-size:1.02rem;font-weight:650;margin:0 0 .8rem}
.card h2:not(:first-child){margin-top:1.2rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;
margin-bottom:16px;box-shadow:var(--shadow)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.grid>.card{margin-bottom:0}.grid{margin-bottom:16px}
.grid.charts{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}

/* KPIs */
.kpi .label{color:var(--muted);font-size:.8rem;font-weight:600;text-transform:uppercase;
letter-spacing:.5px}
.kpi .value{font-size:1.65rem;font-weight:700;letter-spacing:-.4px;margin:4px 0 2px;
font-variant-numeric:tabular-nums}
.kpi-main{background:linear-gradient(135deg,var(--kpi-a),var(--kpi-b));border-color:transparent;
color:#fff}
.kpi-main .label,.kpi-main .small{color:rgba(255,255,255,.82)}
.pos{color:var(--ok)}.neg{color:var(--err)}

/* Gráficos */
.donut-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.donut{width:170px;height:170px;flex:0 0 auto}
.donut circle{transition:stroke-width .15s}.donut circle:not(.donut-track):hover{stroke-width:7.5}
.donut-track{stroke:var(--chip)}
.donut-num{font-size:8px;font-weight:700;fill:var(--text);text-anchor:middle}
.donut-cap{font-size:3.2px;fill:var(--muted);text-anchor:middle;text-transform:uppercase;letter-spacing:.3px}
.legend{list-style:none;margin:0;padding:0;flex:1 1 180px;min-width:0}
.legend li{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--line)}
.legend li:last-child{border-bottom:0}
.lg-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-val{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.lg-val small{display:block;font-weight:400;color:var(--muted);font-size:.78rem}
.sw{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.seg-0{stroke:var(--c0)}.seg-1{stroke:var(--c1)}.seg-2{stroke:var(--c2)}.seg-3{stroke:var(--c3)}
.seg-4{stroke:var(--c4)}.seg-5{stroke:var(--c5)}.seg-6{stroke:var(--c6)}.seg-7{stroke:var(--c7)}
.sw-0{background:var(--c0)}.sw-1{background:var(--c1)}.sw-2{background:var(--c2)}.sw-3{background:var(--c3)}
.sw-4{background:var(--c4)}.sw-5{background:var(--c5)}.sw-6{background:var(--c6)}.sw-7{background:var(--c7)}
.wbar{display:block;width:100%;height:6px;margin:6px 0 4px}
.wbar-track{fill:var(--chip)}.wbar-fill{fill:var(--accent)}
.kpi-main .wbar-track{fill:rgba(255,255,255,.25)}.kpi-main .wbar-fill{fill:#fff}
td.weight{min-width:110px}td.weight .wbar{margin:5px 0 0 auto;max-width:120px}

/* Tablas */
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th,td{padding:10px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{color:var(--muted);font-weight:600;font-size:.76rem;text-transform:uppercase;letter-spacing:.4px;
background:color-mix(in srgb,var(--chip) 60%,transparent)}
tr:last-child td{border-bottom:0}
tbody tr:hover td,table tr:hover td{background:color-mix(in srgb,var(--accent) 4%,transparent)}
td.num,th.num{text-align:right;white-space:nowrap}
td a{font-weight:500;text-decoration:none}td a:hover{text-decoration:underline}

.muted{color:var(--muted)}.small{font-size:.84rem}
.chip{display:inline-block;padding:2px 9px;border-radius:999px;background:var(--chip);font-size:.76rem;
font-weight:600}
.st-validado{color:var(--ok)}.st-provisional{color:var(--warn)}.st-antiguo{color:var(--warn)}
.st-ausente{color:var(--err)}

/* Avisos */
.msg{padding:11px 14px;border-radius:10px;margin-bottom:12px;border:1px solid var(--line);
border-left:4px solid var(--accent);background:var(--card);box-shadow:var(--shadow)}
.msg.error{border-left-color:var(--err)}.msg.success{border-left-color:var(--ok)}
.msg.warning{border-left-color:var(--warn)}
.banner{background:var(--warn);color:#000;padding:6px 16px;text-align:center;font-weight:600}

/* Formularios */
form p{margin:0 0 14px}label{display:block;font-weight:600;font-size:.88rem;margin-bottom:5px}
input,select,textarea{font:inherit;padding:8px 11px;border:1px solid var(--line);border-radius:9px;
background:var(--card);color:var(--text);max-width:100%;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
input[type=checkbox]{width:auto}textarea{width:100%;min-height:70px}
.helptext{display:block;color:var(--muted);font-size:.82rem;margin-top:3px}
.errorlist{color:var(--err);margin:4px 0;padding-left:18px}
button,.btn{display:inline-block;font:inherit;font-weight:600;font-size:.92rem;padding:9px 16px;
border-radius:10px;border:1px solid var(--accent);background:var(--accent);color:#fff;
text-decoration:none;cursor:pointer;transition:filter .15s,background .15s,transform .05s}
button:hover,.btn:hover{filter:brightness(1.08)}button:active,.btn:active{transform:translateY(1px)}
.btn.secondary,button.secondary{background:transparent;color:var(--accent)}
.btn.secondary:hover,button.secondary:hover{background:var(--accent-soft);filter:none}
.btn.danger,button.danger{border-color:var(--err);background:transparent;color:var(--err)}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:end}
.filters label{font-size:.76rem;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.bar{height:8px;background:var(--chip);border-radius:4px;overflow:hidden}
.bar span{display:block;height:100%;background:var(--accent)}

.btn.small,button.small{padding:4px 10px;font-size:.8rem;border-radius:8px}
tr.sub td{border-bottom:1px dashed var(--line);padding-top:6px;padding-bottom:6px}
tr.sub td:first-child{padding-left:24px;color:var(--muted)}
tr.void td{opacity:.55;text-decoration:line-through}

.foot{max-width:1240px;margin:0 auto;padding:0 16px 24px;color:var(--muted);font-size:.78rem;text-align:right}

/* Acceso */
.auth{max-width:420px;margin:8vh auto}.qr{background:#fff;padding:8px;width:220px;height:220px}
.codes{font-family:ui-monospace,monospace;columns:2;font-size:1.05rem}
.row-error td{background:color-mix(in srgb,var(--err) 10%,transparent)}
.row-warn td{background:color-mix(in srgb,var(--warn) 10%,transparent)}
inline-form,form.inline{display:inline}

@media (max-width:640px){
.top-in{gap:0 10px}nav.menu{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
nav.menu a{white-space:nowrap;margin:2px 0}main{padding:16px 12px 32px}
.grid.charts{grid-template-columns:1fr}.donut{width:140px;height:140px}.kpi .value{font-size:1.4rem}}