/* DEEC Studio · panel administrativo: uso dinámico del color dentro de la paleta (azul · grafito · grises + estados) */

/* ── Indicadores: azul sólido · azul claro · grafito · ámbar suave · gris azulado ── */
.kpi{position:relative;overflow:hidden;isolation:isolate;padding:20px 20px 18px;border-radius:10px;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.kpi>*{position:relative;z-index:1}
.kpi:hover{transform:translateY(-3px)}
/* Indicador con destino: toda la tarjeta es un enlace (admin.js kpi), con foco visible y sin cambiar su aspecto */
.kpi--link{display:block;color:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.kpi--link:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.kpi--link:active{transform:translateY(-1px)}
.kpi__i{display:grid;place-items:center;width:38px;height:38px;margin-bottom:14px;border-radius:10px;background:var(--acc-l);color:var(--acc)}
.kpi__i svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.kpi b{font-weight:300;letter-spacing:-.03em}
/* Todos los indicadores usan el azul de la marca, igual que los del portal del cliente */
.kpis .kpi{background:var(--kpi-b);border-color:var(--kpi-b);color:var(--kpifg);box-shadow:none}
.kpis .kpi .kpi__i{background:color-mix(in srgb,var(--kpifg) 18%,transparent);color:var(--kpifg);box-shadow:none}
.kpis .kpi span{color:color-mix(in srgb,var(--kpifg) 82%,transparent)}
.kpis .kpi b{color:var(--kpifg)}
.kpis .kpi small{color:color-mix(in srgb,var(--kpifg) 72%,transparent)}
.kpis .kpi:hover{border-color:var(--acc-2)}
/* Variación del indicador: junto a la cifra, discreta. ↑ +N en verde fosforescente, ↓ −N en rojo, → 0 neutro; sobre una píldora oscura sólida para mantener el contraste sobre el azul del indicador. Sin datos comparables: texto breve y tenue.
   La explicación sale en un tooltip (#kpiTip, admin.js); la flecha y el signo acompañan al color, que nunca es lo único que informa. */
.kpis .kpi .kpi__n{display:flex;align-items:center;flex-wrap:nowrap;gap:8px;min-width:0;margin-top:8px}
.kpis .kpi .kpi__n b{margin:0;flex:none}
.kpi__d{flex:0 1 auto;font-style:normal;letter-spacing:0;text-transform:none;min-width:0;padding:3px 10px;border-radius:99px;background:color-mix(in srgb,#000 52%,var(--kpi-b));font-size:13px;font-weight:600;line-height:1.25;white-space:nowrap;cursor:help;-webkit-tap-highlight-color:transparent}
.kpi__d--up{color:#39FF14}
.kpi__d--down{color:#FF5A5A}
.kpi__d--flat{color:color-mix(in srgb,var(--kpifg) 86%,transparent)}
.kpi__d--none{color:color-mix(in srgb,var(--kpifg) 86%,transparent)}
/* Flecha de navegación: pequeña y discreta en la esquina inferior; se acentúa y avanza un poco al pasar el cursor o enfocar la tarjeta. La descripción deja sitio a la derecha para que no se solapen. */
.kpis .kpi .kpi__go{position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:18px;height:18px;color:color-mix(in srgb,var(--kpifg) 70%,transparent);transition:transform .2s,color .2s}
.kpi__go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kpis .kpi--link:hover .kpi__go,.kpis .kpi--link:focus-visible .kpi__go{color:var(--kpifg);transform:translateX(3px)}
.kpis .kpi--link small{padding-right:26px}
@media (prefers-reduced-motion:reduce){.kpis .kpi .kpi__go{transition:none}}
.kpi__tip{position:fixed;z-index:95;max-width:min(270px,calc(100vw - 16px));padding:8px 11px;border-radius:8px;background:var(--fg);color:var(--bg2);font-size:12.5px;font-weight:500;line-height:1.4;box-shadow:0 10px 26px -10px color-mix(in srgb,var(--shadow) 55%,transparent);pointer-events:none}
.kpi__tip[hidden]{display:none}
.kpis .kpi>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpis .kpi small{line-height:1.35}

/* ── Tarjetas del resumen: cada una con su acento ── */
.card{transition:box-shadow .3s,border-color .3s}
.card:hover{box-shadow:0 18px 40px -28px color-mix(in srgb,var(--shadow) 30%,transparent)}
.card__i{display:inline-grid;place-items:center;width:32px;height:32px;margin-right:12px;border-radius:9px;background:var(--acc-l);color:var(--acc);flex:none}
.card__i svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card__h:has(.card__i){justify-content:flex-start}
.card__h:has(.card__i) h2{margin-right:auto}
.card--c1{border-top:3px solid var(--acc)}
.card--c1 .card__h{background:var(--bg2)}
.card--c2{border-top:3px solid var(--inv-bg)}
.card--c2 .card__i{background:var(--inv-bg);color:var(--inv-acc)}
.card--c3{border-top:3px solid var(--inv-acc)}
.card--c3 .card__i{background:var(--acc-l);color:var(--info)}
.card--c4{border-top:3px solid var(--warn-s)}
.card--c4 .card__i{background:var(--warn-l);color:var(--warn)}
.card--c4 .card__h{background:var(--warn-l)}

/* ── Navegación y acciones ── */
.nav a{position:relative;transition:background .2s,color .2s,transform .2s}
.nav a.on{background:var(--sb-on);box-shadow:inset 3px 0 0 var(--sb-onfg)}
.nav a.on svg{color:var(--sb-onfg)}
.nav a:hover svg{transform:translateX(2px)}
.nav a svg{transition:transform .2s}
.btn:not(.btn--ghost):not(.btn--danger){background:var(--acc);box-shadow:none}
.btn:not(.btn--ghost):not(.btn--danger):hover{background:var(--acc-hover)}
.btn--ghost:hover{background:var(--acc-l)}

/* ── Tablas, barras y etiquetas ── */
tbody tr[data-go]:hover,tbody tr[data-ticket]:hover{background:color-mix(in srgb,var(--acc) 5%,transparent)}
tbody tr[data-ticket]{cursor:pointer}
.bar i::after{background:var(--acc)}
.bd{font-weight:600}
.bd--ok{background:var(--ok-l);color:var(--ok)}
.bd--warn{background:var(--warn-l);color:var(--warn)}
.bd--bad{background:var(--bad-l);color:var(--bad)}
.bd--acc{background:var(--info-l);color:var(--info)}
.top h1{color:var(--fg)}

@media (prefers-reduced-motion:reduce){.kpi,.card,.nav a svg{transition:none}.kpi:hover{transform:none}}
@media (hover:none){.kpi:hover{transform:none}}

.ord-d{display:none}