:root{
  --bg:#e6ecf3;--panel:#fff;--ink:#17232f;--muted:#566679;--line:#c9d4e0;--line-2:#8fa3b8;
  --brand:#1b3f66;--brand-2:#2b5f93;--brand-soft:#e7eff8;
  --accent:#2fa597;--accent-soft:#e3f5f2;
  --ok:#1b8a5a;--ok-soft:#e4f5ec;--warn:#a96a10;--warn-soft:#fdf3dd;--danger:#c0392b;--danger-soft:#fcebe8;
  --side:#10243a;--side-2:#16314d;--side-ink:#b9c8d9;--radius:12px;
  --accent-2:#3bb8a9;--accent-ink:#0f6f64;--accent-rgb:47,165,151;--brand-rgb:27,63,102;
  --shadow:0 1px 2px rgba(16,36,58,.10),0 4px 14px rgba(16,36,58,.08);
}
*{box-sizing:border-box}
html{font-size:15px}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:var(--brand-2);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:1.55rem;margin:0;letter-spacing:-.01em}h2{font-size:1.05rem;margin:0 0 .7rem}h3{font-size:.95rem;margin:0 0 .4rem}
.muted{color:var(--muted)}.right{text-align:right}.center{text-align:center}.nowrap{white-space:nowrap}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pos{color:var(--ok)}.neg{color:var(--danger)}
.ico{flex-shrink:0;vertical-align:-3px}
kbd{font:inherit;font-size:.72rem;background:#eef2f6;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;padding:0 6px;color:var(--muted)}

/* ---------- layout ---------- */
.app{display:flex;min-height:100vh;min-height:100svh}
.shell{flex:1;min-width:0;display:flex;flex-direction:column}
.side{width:244px;background:linear-gradient(180deg,var(--side),var(--side-2));color:var(--side-ink);padding:14px 12px 12px;position:sticky;top:0;height:100vh;overflow-y:auto;flex-shrink:0;display:flex;flex-direction:column}
.side nav{flex:1}
.side .brand{padding:2px 4px 14px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.08)}
.side .brand .logo-box{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.side .brand .logo-tile{width:42px;height:42px;background:#fff;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.side .brand .logo-tile img{width:30px;height:auto;display:block}
.side .brand .brand-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.side .brand .brand-txt strong{font-size:.98rem;letter-spacing:.01em}
.side .brand .sub{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#8fb3d0;font-weight:600;margin-top:2px}
.side .brand small{display:block;font-size:.76rem;color:#8da2b8;margin:9px 2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .grp{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#6f88a1;margin:16px 10px 5px;font-weight:600}
.side nav a{display:flex;align-items:center;gap:10px;color:var(--side-ink);padding:8px 10px;border-radius:9px;font-size:.9rem;margin-bottom:1px;transition:background .12s}
.side nav a .ico{opacity:.75}
.side nav a:hover{background:rgba(255,255,255,.07);text-decoration:none;color:#fff}
.side nav a.on{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;font-weight:600;box-shadow:0 2px 10px rgba(var(--accent-rgb),.35)}
.side nav a.on .ico{opacity:1}
.side .user{display:flex;align-items:center;gap:9px;margin-top:14px;padding:10px 6px 2px;border-top:1px solid rgba(255,255,255,.08)}
.side .user .avatar{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.side .user .who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.side .user .who a{color:#fff;font-size:.86rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .user .who span{font-size:.72rem;color:#8da2b8}
.side .user form{margin:0}
.side .user button{background:none;border:0;color:#8da2b8;cursor:pointer;padding:6px;border-radius:8px;display:flex}
.side .user button:hover{background:rgba(255,255,255,.08);color:#fff}

.topbar{position:sticky;top:0;z-index:15;display:flex;align-items:center;gap:12px;padding:10px 28px;background:rgba(242,245,249,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.searchbox{flex:1;max-width:520px;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line-2);border-radius:10px;padding:8px 12px;color:var(--muted);font:inherit;font-size:.9rem;cursor:text;text-align:left}
.searchbox:hover{border-color:#aebbd0}
.searchbox span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.icon-btn{background:#fff;border:1px solid var(--line-2);border-radius:9px;padding:7px;color:var(--ink);cursor:pointer;display:none;align-items:center}
.topbar .menu-btn{display:none}
.dd{position:relative}
.dd summary{list-style:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
.dd summary::-webkit-details-marker{display:none}
.dd-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:230px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(16,36,58,.18);padding:6px;z-index:30}
.dd-menu a{display:block;padding:8px 12px;border-radius:8px;color:var(--ink);font-size:.9rem}
.dd-menu a:hover{background:var(--brand-soft);text-decoration:none}
.main{flex:1;min-width:0;padding:22px 28px 60px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.top .actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.top .actions form{margin:0}
.scrim{display:none}

/* ---------- componentes ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:16px;box-shadow:var(--shadow)}
.card>h2:first-child{padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:12px}
.grid{display:grid;gap:14px}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--brand);color:#fff;border:1px solid var(--brand);padding:7px 15px;border-radius:9px;font:inherit;font-size:.9rem;font-weight:500;cursor:pointer;text-decoration:none;transition:background .12s,box-shadow .12s}
.btn:hover{background:var(--brand-2);border-color:var(--brand-2);text-decoration:none;box-shadow:0 2px 8px rgba(var(--brand-rgb),.25)}
.btn.sec{background:#fff;color:var(--brand);border:1.5px solid var(--brand-2);font-weight:600;box-shadow:none}.btn.sec:hover{background:var(--brand-soft);border-color:var(--brand)}
.btn.danger{background:#fff;color:var(--danger);border:1.5px solid var(--danger);font-weight:600;box-shadow:none}.btn.danger:hover{background:var(--danger-soft)}
.btn.sm{padding:4px 10px;font-size:.82rem}
.btn.xl{color:var(--accent-ink);border:1.5px solid var(--accent);font-weight:600}.btn.xl:hover{background:var(--accent-soft);border-color:var(--accent)}
.badge{display:inline-block;padding:2px 10px;border-radius:99px;font-size:.74rem;font-weight:600;background:#e9eef4;color:#41505f}
.badge.ok{background:var(--ok-soft);color:var(--ok)}.badge.warn{background:var(--warn-soft);color:var(--warn)}.badge.danger{background:var(--danger-soft);color:var(--danger)}.badge.info{background:var(--brand-soft);color:var(--brand)}
.flash{padding:11px 15px;border-radius:10px;margin-bottom:12px;border:1px solid}
.flash.ok{background:var(--ok-soft);border-color:#b9e3cc;color:#155d3d}
.flash.error{background:var(--danger-soft);border-color:#f0c4be;color:#8b2c22}
.flash.warn{background:var(--warn-soft);border-color:#f0d9a2;color:#8a5a12}

/* avisos emergentes */
.toasts{position:fixed;top:68px;right:20px;z-index:60;display:flex;flex-direction:column;gap:8px;max-width:min(420px,calc(100vw - 40px));max-height:calc(100vh - 100px);overflow-y:auto}
.toast{position:relative;padding:12px 38px 12px 14px;border-radius:11px;border:1px solid;background:#fff;box-shadow:0 8px 24px rgba(16,36,58,.18);font-size:.9rem;animation:toast-in .25s ease-out}
.toast.ok{border-color:#b9e3cc}
.toast.error{border-color:#f0c4be}
.toast.warn{border-color:#f0d9a2}
.toast .x{position:absolute;top:6px;right:8px;background:none;border:0;font-size:1.2rem;line-height:1;color:var(--muted);cursor:pointer}
.toast.out{opacity:0;transform:translateX(20px);transition:all .25s}
@keyframes toast-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* tablas */
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:#3d4f63;background:#dde6f0;position:sticky;top:0;font-weight:600;white-space:nowrap}
tbody tr:hover td{background:#f7fafe}
tbody tr:last-child td{border-bottom:0}
tfoot td,tr.tot td{font-weight:700;background:#f1f6fb;border-top:2px solid var(--line-2)}
tr.titulo td{font-weight:700;background:#f2f6fa}
.table-wrap{overflow-x:auto}
.card.table-wrap{padding:6px 8px}
td.sub{padding-left:26px}
table.compact{font-size:.84rem}table.compact th,table.compact td{padding:6px 7px}

/* formularios */
label{display:block;font-size:.8rem;color:#3d4f63;margin-bottom:4px;font-weight:600}
input,select,textarea{width:100%;max-width:100%;padding:8px 10px;border:1.5px solid var(--line-2);border-radius:9px;font:inherit;background:#fff;color:var(--ink);transition:border-color .12s,box-shadow .12s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.2)}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--accent)}
input[type=file]{padding:6px;background:#eef3f8}
textarea{min-height:70px;resize:vertical}
.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.span2{grid-column:span 2}.span3{grid-column:span 3}.span4{grid-column:span 4}
.filters{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px;background:#fff;border:1.5px solid var(--line-2);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow)}
.filters>div{min-width:130px}.filters input,.filters select{width:auto;min-width:130px}
.checks{display:flex;gap:16px;align-items:center;padding-top:22px}.checks label{display:flex;gap:6px;align-items:center;margin:0;color:var(--ink);font-weight:500}
.help{font-size:.8rem;color:var(--muted);margin-top:4px}
.lines input,.lines select{padding:6px 7px;font-size:.88rem}
.lines td{padding:4px}
.totales{margin-left:auto;max-width:360px;background:#f7f9fc;border:1px solid var(--line);border-radius:10px;padding:10px 14px}
.totales div{display:flex;justify-content:space-between;gap:16px;padding:3px 0}
.totales .big{font-weight:700;font-size:1.12rem;border-top:2px solid var(--line-2);margin-top:5px;padding-top:7px;color:var(--brand)}

/* solapas */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}
.tabs a{padding:9px 15px;border-radius:9px 9px 0 0;color:var(--muted);font-size:.92rem}
.tabs a:hover{background:var(--brand-soft);text-decoration:none}
.tabs a.on{background:var(--panel);color:var(--brand);border:1px solid var(--line);border-bottom-color:var(--panel);margin-bottom:-1px;font-weight:600}

/* dashboard */
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.kpi .t{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.kpi .v{font-size:1.55rem;font-weight:700;margin-top:3px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.kpi .s{font-size:.8rem;color:var(--muted);margin-top:3px}
.bars{display:flex;align-items:flex-end;gap:8px;height:200px;padding-top:8px;border-bottom:1px solid var(--line)}
.bars .col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;min-width:0}
.bars .pair{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px}
.bars .b{width:42%;min-height:2px;border-radius:4px 4px 0 0}
.bars .b.i{background:linear-gradient(180deg,var(--accent-2),var(--accent))}.bars .b.e{background:linear-gradient(180deg,#eab25a,#d99a2b)}
.bars .lbl{font-size:.7rem;color:var(--muted);margin-top:5px;white-space:nowrap}
.bars .col.now .lbl{color:var(--brand);font-weight:700}
.legend{display:flex;gap:14px;font-size:.8rem;color:var(--muted);margin-top:8px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px}
.hbar{margin:9px 0}.hbar .row{display:flex;justify-content:space-between;font-size:.86rem;gap:8px}
.hbar .track{height:8px;background:#e9eff5;border-radius:5px;margin-top:4px}
.hbar .fill{height:8px;background:linear-gradient(90deg,var(--brand-2),var(--accent));border-radius:5px}
.alerta{padding:9px 14px;border-radius:10px;margin-bottom:6px;font-size:.88rem;display:block}
.alerta.danger{background:var(--danger-soft);color:#8b2c22}.alerta.warn{background:var(--warn-soft);color:#8a5a12}
ul.clean{list-style:none;margin:0;padding:0}ul.clean li{padding:7px 0;border-bottom:1px solid var(--line);font-size:.88rem}
ul.clean li:last-child{border-bottom:0}

/* ingreso */
.center-page{min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(1000px 500px at 15% -10%,#d9eef0 0,transparent 60%),radial-gradient(900px 500px at 100% 110%,#dbe6f4 0,transparent 55%),var(--bg)}
.login{width:100%;max-width:410px}
.login .card{padding:24px 26px;border-radius:16px;box-shadow:0 10px 40px rgba(16,36,58,.12)}
.login-logo{text-align:center;margin-bottom:16px}.login-logo img{width:190px;max-width:62%;height:auto;mix-blend-mode:multiply}.login h1{margin-bottom:4px}
.login .btn{width:100%;justify-content:center;padding:10px}

/* paleta de búsqueda */
.palette{position:fixed;inset:0;z-index:80;background:rgba(16,36,58,.45);backdrop-filter:blur(2px);display:flex;align-items:flex-start;justify-content:center;padding-top:12vh}
.palette[hidden]{display:none}
.palette-box{width:min(620px,calc(100vw - 24px));background:#fff;border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.35);overflow:hidden}
.palette-in{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);color:var(--muted)}
.palette-in input{border:0;box-shadow:none;padding:4px 0;font-size:1.02rem}
.palette-in input:focus{box-shadow:none}
.palette-res{max-height:55vh;overflow-y:auto;padding:6px}
.palette-res .g{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:9px 10px 3px;font-weight:600}
.palette-res a{display:block;padding:8px 10px;border-radius:9px;color:var(--ink)}
.palette-res a small{display:block;color:var(--muted);font-size:.78rem}
.palette-res a.sel,.palette-res a:hover{background:var(--brand-soft);text-decoration:none}
.palette-res .empty{padding:18px;text-align:center;color:var(--muted);font-size:.9rem}
.palette-foot{display:flex;gap:16px;padding:8px 14px;border-top:1px solid var(--line);font-size:.75rem;color:var(--muted);background:#f7f9fc}

/* presupuesto para imprimir */
.doc{background:#fff;max-width:820px;margin:0 auto;padding:36px 44px;border:1px solid var(--line)}
.doc .head{display:flex;justify-content:space-between;gap:20px;border-bottom:2px solid var(--brand);padding-bottom:12px;margin-bottom:18px}
.doc h1{color:var(--brand)}
.doc{position:relative;overflow:hidden}
.doc .watermark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:0}
.doc .watermark img{width:64%;height:auto;opacity:.09;mix-blend-mode:multiply}
.doc .doc-body{position:relative;z-index:1}
.doc table th{position:static;background:rgba(250,251,253,.55)}
.doc tr.titulo td{background:rgba(242,245,249,.55)}
.doc tbody tr:hover td{background:transparent}
.doc tfoot td{background:transparent}
.doc .totales{background:transparent;border:0;padding:0}
.noprint-bar{max-width:820px;margin:0 auto 12px;display:flex;gap:8px}

.grid>*,.form-grid>*{min-width:0}

@media (max-width:900px){
  .app{display:block}
  .side{position:fixed;left:-270px;top:0;z-index:40;transition:left .2s;width:250px;height:100vh;height:100dvh}
  .side.open{left:0;box-shadow:0 0 40px rgba(0,0,0,.4)}
  .scrim{display:block;position:fixed;inset:0;background:rgba(16,36,58,.4);z-index:35;opacity:0;pointer-events:none;transition:opacity .2s}
  .side.open+.scrim{opacity:1;pointer-events:auto}
  .topbar{padding:8px 14px}.topbar .menu-btn{display:inline-flex}
  .searchbox kbd{display:none}
  .main{padding:14px 14px 50px}
  .g2,.g3,.g4{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr 1fr}.span3,.span4{grid-column:span 2}
  .toasts{top:60px;right:10px}
}
@media (max-width:560px){
  /* !important: también para las grillas con columnas fijadas en el atributo style */
  .g2,.g3,.g4,.form-grid{grid-template-columns:1fr!important}.span2,.span3,.span4{grid-column:auto}
  /* gráfico de 12 meses: barras más juntas y una etiqueta por medio (el mes actual, último, siempre se ve) */
  .bars{gap:3px}.bars .col:nth-child(odd) .lbl{visibility:hidden}.yaxis{min-width:38px}
  .searchbox span{display:none}.topbar-actions .xl{display:none}
}
@media print{
  .side,.scrim,.topbar,.toasts,.palette,.top .actions,.noprint,.noprint-bar,.filters,.menu-btn{display:none!important}
  body{background:#fff}.main{padding:0}.card{border:0;padding:0;box-shadow:none}.doc{border:0;padding:0;max-width:none}
  th{position:static}
  .doc .watermark{position:fixed}
  .doc,.doc *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---------- apariencia (Configuración) ---------- */
.temas{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.tema{display:block;margin:0;cursor:pointer}
.tema input{position:absolute;opacity:0;width:1px;height:1px}
.tema .tarj{border:2px solid var(--line-2);border-radius:12px;padding:10px;background:#fff;color:var(--ink);font-weight:600;font-size:.9rem;transition:border-color .12s,box-shadow .12s}
.tema input:checked+.tarj{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.25)}
.tema input:focus-visible+.tarj{outline:2px solid var(--brand)}
.muestra{display:flex;height:34px;border-radius:8px;overflow:hidden;margin-bottom:8px;border:1px solid var(--line)}
.muestra i{flex:1}.muestra i:first-child{flex:1.4}
.colores{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:12px}
.colores input[type=color]{width:100%;height:42px;padding:3px;cursor:pointer}

/* ---------- dashboard: accesos, variación, tendencia, ejes, dona ---------- */
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:16px}
.quick a{display:flex;align-items:center;gap:10px;background:var(--panel);border:1.5px solid var(--line);border-radius:12px;padding:11px 14px;color:var(--ink);font-weight:600;font-size:.9rem;box-shadow:var(--shadow);transition:transform .12s,border-color .12s,box-shadow .12s}
.quick a:hover{text-decoration:none;border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 18px rgba(var(--brand-rgb),.14)}
.quick a .ico{color:var(--accent);background:var(--accent-soft);border-radius:9px;padding:6px;width:32px;height:32px;box-sizing:border-box}
.delta{display:inline-block;margin-top:5px;font-size:.74rem;font-weight:700;padding:2px 8px;border-radius:99px;background:#eef2f6;color:var(--muted)}
.delta.up{background:var(--ok-soft);color:var(--ok)}.delta.down{background:var(--danger-soft);color:var(--danger)}
.kpi .spark{display:block;width:100%;height:26px;margin-top:10px;opacity:.9}
.kpi .spark polyline{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.chart{display:flex;gap:8px;margin-top:6px}
.yaxis{display:flex;flex-direction:column;justify-content:space-between;height:200px;font-size:.68rem;color:var(--muted);text-align:right;min-width:46px;font-variant-numeric:tabular-nums;line-height:1}
.plot{flex:1;position:relative;height:224px;min-width:0}
.grid-lines{position:absolute;left:0;right:0;top:0;height:200px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.grid-lines i{border-top:1px dashed var(--line-2);opacity:.55;height:0}.grid-lines i:last-child{border-top:1px solid var(--line-2);opacity:1}
.plot .bars{position:absolute;inset:0;height:224px;border:0;padding:0;align-items:stretch}
.plot .bars .col{position:relative;border-radius:8px}
.plot .bars .col:hover{background:rgba(var(--accent-rgb),.08)}
.plot .bars .pair{height:200px;flex:none}
.plot .bars .b{transition:filter .12s}.plot .bars .col:hover .b{filter:brightness(1.1)}
.plot .bars .lbl{height:24px;margin-top:0;padding-top:5px}
.tip{display:none;position:absolute;bottom:62%;left:50%;transform:translateX(-50%);background:var(--side);color:#fff;font-size:.72rem;line-height:1.5;padding:7px 10px;border-radius:8px;white-space:nowrap;z-index:5;box-shadow:0 6px 18px rgba(0,0,0,.25);pointer-events:none}
.plot .bars .col:hover .tip{display:block}
.plot .bars .col:nth-child(-n+2) .tip{left:0;transform:none}.plot .bars .col:nth-last-child(-n+2) .tip{left:auto;right:0;transform:none}
.donut-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.donut{width:148px;height:148px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.donut .hole{width:98px;height:98px;border-radius:50%;background:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2;text-align:center}
.donut .hole span{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}.donut .hole b{font-size:.92rem;font-variant-numeric:tabular-nums}
.donut-leg{list-style:none;margin:0;padding:0;flex:1;min-width:150px}
.donut-leg li{display:flex;align-items:center;gap:8px;font-size:.84rem;padding:4px 0;border-bottom:1px solid var(--line)}
.donut-leg li:last-child{border-bottom:0}.donut-leg i{width:10px;height:10px;border-radius:3px;flex-shrink:0}.donut-leg span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- interacción ---------- */
@keyframes sube{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.main>*{animation:sube .22s ease both}.main>*:nth-child(2){animation-delay:.03s}.main>*:nth-child(3){animation-delay:.06s}.main>*:nth-child(n+4){animation-delay:.09s}
.btn:active{transform:translateY(1px)}
.btn.loading{position:relative;color:transparent!important;pointer-events:none}
.btn.loading::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:gira .7s linear infinite}
.btn.sec.loading::after,.btn.danger.loading::after{border-color:rgba(var(--brand-rgb),.25);border-top-color:var(--brand)}
@keyframes gira{to{transform:rotate(360deg)}}
.icon-btn.always{display:inline-flex;color:var(--muted)}.icon-btn.always:hover{color:var(--brand);border-color:var(--brand-2)}
.icon-btn b{font-size:.95rem;width:18px;text-align:center;line-height:18px}
tbody tr.clic{cursor:pointer}
tbody tr.clic:hover td{background:var(--brand-soft)}
tbody tr{transition:background .1s}
.count{font-size:.78rem;color:var(--muted);padding:6px 4px 8px;font-weight:600}
.limpiar{margin-left:6px}
.kbd-help{position:fixed;inset:0;z-index:90;background:rgba(16,36,58,.5);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:16px}
.kbd-help[hidden]{display:none}
.kbd-help .box{background:var(--panel);border-radius:16px;padding:22px 26px;max-width:460px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:sube .18s ease}
.kbd-help ul{list-style:none;margin:10px 0 0;padding:0}.kbd-help li a,.kbd-help li span{display:block;padding:6px 8px;border-radius:8px;color:var(--ink);font-size:.9rem}
.kbd-help li a:hover{background:var(--brand-soft);text-decoration:none}
@media (prefers-reduced-motion:reduce){.main>*,.btn,.quick a,.kbd-help .box{animation:none!important;transition:none!important}}

/* ---------- tablas: encabezado fijo, densidad, estados vacíos ---------- */
.card.table-wrap.lista{max-height:calc(100vh - 230px);overflow:auto}
.card.table-wrap.lista th{z-index:2;box-shadow:0 1px 0 var(--line-2)}
html.dens-compact th,html.dens-compact td{padding:4px 8px}
html.dens-compact table{font-size:.84rem}
td[colspan].muted{text-align:center;padding:34px 12px;color:var(--muted);line-height:1.8}
tbody tr:hover td[colspan].muted{background:transparent}
.filters>div{min-width:0}
.filters input[type=checkbox]{min-width:0;width:auto}
.filters label:has(>input[type=checkbox]){display:flex;align-items:center;gap:7px;padding-top:23px;font-weight:500;color:var(--ink);white-space:nowrap;margin:0}