:root{
    --kpi-1:var(--ui-blue);
    --kpi-2:var(--ui-teal);
    --kpi-3:var(--ui-purple);
    --kpi-4:var(--ui-orange);
    --kpi-5:var(--ui-green);
    --kpi-6:var(--ui-pink);
    --kpi-7:var(--ui-cyan);
    --kpi-8:var(--ui-red);
    --kpi-9:var(--ui-yellow);
    --kpi-10:var(--ui-indigo);
}

/* -----------------------------------------------------------------------
   GRIDS
------------------------------------------------------------------------ */
.ui-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;align-items:stretch}
.ui-kpi-grid.is-base{grid-template-columns:repeat(2,minmax(260px,1fr))}
.ui-kpi-grid.is-neutral{grid-template-columns:repeat(4,minmax(0,1fr))}
.ui-kpi-grid.is-five{grid-template-columns:repeat(5,minmax(0,1fr))}

/* -----------------------------------------------------------------------
   BASE — dark mode
   Fondo oscuro con tinte de color, barra izquierda sólida
------------------------------------------------------------------------ */
.ui-kpi,
.ui-kpi-main,
.ui-kpi-simple,
.ui-kpi-neutral,
.ui-kpi-neutral-secondary{
    --kpi-color:var(--kpi-1);
    position:relative;
    display:flex;
    flex-direction:column;
    gap:.55rem;
    min-height:120px;
    padding:20px 18px 16px 22px;
    border-radius:22px;
    border:1px solid color-mix(in srgb,var(--kpi-color) 42%,rgba(148,163,184,.20));
    background:
        radial-gradient(circle at 0 0,color-mix(in srgb,var(--kpi-color) 28%,transparent),transparent 56%),
        linear-gradient(135deg,color-mix(in srgb,var(--kpi-color) 14%,rgba(10,14,22,.94)),rgba(8,11,18,.84));
    box-shadow:0 16px 36px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.04);
    overflow:hidden;
    isolation:isolate;
}

/* Barra lateral izquierda — dark */
.ui-kpi::before,
.ui-kpi-main::before,
.ui-kpi-simple::before,
.ui-kpi-neutral::before,
.ui-kpi-neutral-secondary::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:4px;
    border-radius:22px 0 0 22px;
    background:color-mix(in srgb,var(--kpi-color) 80%,transparent);
    pointer-events:none;
}

/* -----------------------------------------------------------------------
   VARIANTES DE TAMAÑO
------------------------------------------------------------------------ */
.ui-kpi--primary,
.ui-kpi-main{min-height:156px;padding:28px 22px 20px 26px}

.ui-kpi--secondary,
.ui-kpi-simple,
.ui-kpi-neutral-secondary{min-height:112px;padding:18px 16px 18px 20px;border-radius:20px}

.ui-kpi--dense{min-height:auto;gap:.4rem;padding:16px 14px 16px 18px;border-radius:18px}

/* -----------------------------------------------------------------------
   ELEMENTOS INTERNOS
------------------------------------------------------------------------ */
.ui-kpi-chip{
    position:static;top:auto;right:auto;
    align-self:flex-start;
    display:inline-flex;align-items:center;
    min-height:30px;padding:0 13px;
    border-radius:999px;
    border:1px solid color-mix(in srgb,var(--kpi-color) 64%,transparent);
    background:color-mix(in srgb,var(--kpi-color) 27%,rgba(255,255,255,.06));
    color:#dff7ff;font-size:13px;font-weight:950;line-height:1
}
.ui-kpi-label{display:block;margin:0;color:var(--text-soft);font-size:12px;font-weight:950;line-height:1.1;letter-spacing:.12em;text-transform:uppercase}
.ui-kpi-value{display:block;color:#fff;font-size:clamp(30px,3vw,36px);font-weight:950;letter-spacing:-.045em;line-height:.98}
.ui-kpi-note{display:block;max-width:280px;margin:0;color:var(--text-soft);font-size:14px;line-height:1.18;font-weight:700}

.ui-kpi--dense .ui-kpi-chip{min-height:26px;padding-inline:10px;font-size:12px}
.ui-kpi--dense .ui-kpi-label{font-size:11px;letter-spacing:.1em}
.ui-kpi--dense .ui-kpi-value{font-size:24px}
.ui-kpi--dense .ui-kpi-note{font-size:12px}

/* -----------------------------------------------------------------------
   COLORES
------------------------------------------------------------------------ */
.is-kpi-1,.is-blue{--kpi-color:var(--kpi-1)}
.is-kpi-2,.is-teal{--kpi-color:var(--kpi-2)}
.is-kpi-3,.is-purple{--kpi-color:var(--kpi-3)}
.is-kpi-4,.is-orange{--kpi-color:var(--kpi-4)}
.is-kpi-5,.is-green{--kpi-color:var(--kpi-5)}
.is-kpi-6,.is-pink{--kpi-color:var(--kpi-6)}
.is-kpi-7,.is-cyan,.is-sky{--kpi-color:var(--kpi-7)}
.is-kpi-8,.is-red{--kpi-color:var(--kpi-8)}
.is-kpi-9,.is-lime{--kpi-color:var(--kpi-9)}
.is-kpi-10,.is-indigo,.is-violet,.is-emerald{--kpi-color:var(--kpi-10)}

/* -----------------------------------------------------------------------
   LIGHT MODE — fondo con color visible, congruente con dark
------------------------------------------------------------------------ */
body.light .ui-kpi,
body.light .ui-kpi-main,
body.light .ui-kpi-simple,
body.light .ui-kpi-neutral,
body.light .ui-kpi-neutral-secondary{
    background:
        radial-gradient(circle at 0 0,color-mix(in srgb,var(--kpi-color) 22%,transparent),transparent 62%),
        linear-gradient(135deg,
            color-mix(in srgb,var(--kpi-color) 18%,#ffffff),
            color-mix(in srgb,var(--kpi-color) 6%,#f4f8ff) 100%);
    border-color:color-mix(in srgb,var(--kpi-color) 40%,rgba(148,163,184,.20));
    box-shadow:0 10px 24px rgba(10,14,22,.08),inset 0 1px 0 rgba(255,255,255,.90)
}

/* Barra lateral izquierda — light (misma lógica que dark) */
body.light .ui-kpi::before,
body.light .ui-kpi-main::before,
body.light .ui-kpi-simple::before,
body.light .ui-kpi-neutral::before,
body.light .ui-kpi-neutral-secondary::before{
    background:color-mix(in srgb,var(--kpi-color) 72%,transparent)
}

body.light .ui-kpi-value,
body.light .ui-kpi-main .ui-kpi-value,
body.light .ui-kpi-simple .ui-kpi-value,
body.light .ui-kpi-neutral .ui-kpi-value,
body.light .ui-kpi-neutral-secondary .ui-kpi-value{color:#172033!important}

body.light .ui-kpi-label{color:color-mix(in srgb,var(--kpi-color) 60%,#172033)}
body.light .ui-kpi-note{color:color-mix(in srgb,var(--kpi-color) 40%,#2a3a50)}

body.light .ui-kpi-chip{
    color:color-mix(in srgb,var(--kpi-color) 80%,#172033);
    background:color-mix(in srgb,var(--kpi-color) 20%,rgba(255,255,255,.80));
    border-color:color-mix(in srgb,var(--kpi-color) 50%,transparent)
}

/* -----------------------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------------------ */
@media(max-width:1100px){
    .ui-kpi-grid.is-neutral{grid-template-columns:repeat(3,minmax(0,1fr))}
    .ui-kpi-grid.is-five{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
    .ui-kpi-grid.is-base{grid-template-columns:1fr}
    .ui-kpi-grid.is-neutral,.ui-kpi-grid.is-five{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
    .ui-kpi-grid.is-neutral,.ui-kpi-grid.is-five{grid-template-columns:1fr}
    .ui-kpi,.ui-kpi-main,.ui-kpi-simple,.ui-kpi-neutral,.ui-kpi-neutral-secondary{min-height:auto;padding:20px 18px 20px 22px}
}