/* ==========================================================================
 * _kpi_strip.css — TIRA DE KPIs DEL KERNEL (S25 / S29)
 * --------------------------------------------------------------------------
 * Primitivas: .sf-kpi-grid (grilla de una sola linea), .sf-stat-card (KPI con
 * icono, del widget kernel `_widgets/_stat_card.html`) y .sf-stat-mini
 * (variante compacta para la tira de resumen de los listados).
 *
 * POR QUE ESTE ARCHIVO EXISTE (IT76, 2026-07-28)
 * ---------------------------------------------
 * Estas reglas vivian dentro de `_components.css`, que SOLO se carga en el
 * storefront (`base_storefront.html`). Pero sus consumidores estan todos del
 * otro lado: el widget kernel `_widgets/_stat_card.html` y 9 paginas del
 * app-shell (POS comprobantes / NCE / cuentas corrientes / DTE / dashboards,
 * CRM analytics). Resultado: el markup se emitia correcto y el browser no
 * encontraba NI UNA de las reglas — KPIs sin card, sin acento, sin grilla,
 * apilados en vertical. Un fallo silencioso: no rompe, se ve pobre.
 *
 * La doctrina S29 declara `.sf-kpi-grid` como el grid canonico de KPIs y
 * prohibe re-declarar grillas por vertical; era imposible de cumplir mientras
 * la clase no existiera en el shell donde viven los verticales.
 *
 * Fuente UNICA: este archivo. Lo cargan los DOS shells —
 * `layouts/app_shell.html` (verticales) y `storefront/base_storefront.html`
 * (tienda publica). No copiar estas reglas a ningun otro stylesheet.
 * Guard: apps/core/ui/tests/test_kernel_css_reachable.py
 * ========================================================================== */

/* ============================================================
 * Stat card KPI premium (_widgets/_stat_card.html) — S25 kernel
 * ============================================================ */
/* Densidad enterprise (IT46/IT47): compacto sin perder jerarquia
   premium — acento, burbuja gradient, tabular nums y hover elevation
   se conservan. El grid canonico es .sf-kpi-grid (S29, prohibido
   re-declarar grids de KPIs por vertical).
   IT47 (pedido del usuario): los KPIs van SIEMPRE en UNA sola linea —
   grid-auto-flow column reparte 1fr por card sin importar cuantas
   haya ni el ancho efectivo (notebooks con zoom incluidos); el valor
   se auto-escala con clamp(). En mobile (<768px) una linea de 6 seria
   ilegible: cae a grilla de 2 columnas. */
.sf-kpi-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: .65rem;
}
@media (max-width: 767px) {
    .sf-kpi-grid {
        grid-auto-flow: row;
        grid-auto-columns: unset;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1920px) {
    .sf-kpi-grid { gap: .8rem; }
}
.sf-stat-card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    background: var(--sf-color-bg-elevated, #fff);
    border: 1px solid var(--sf-color-border, #e2e8f0);
    border-radius: .875rem;
    padding: .8rem .85rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: box-shadow .2s ease, transform .2s ease;
}
.sf-stat-card:hover {
    box-shadow: 0 8px 20px -10px rgba(15, 23, 42, 0.18);
    transform: translateY(-1px);
}
.sf-stat-card__accent {
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--sf-color-primary, #0ea5e9);
}
.sf-stat-card--emerald .sf-stat-card__accent { background: #10b981; }
.sf-stat-card--blue    .sf-stat-card__accent { background: #3b82f6; }
.sf-stat-card--amber   .sf-stat-card__accent { background: #f59e0b; }
.sf-stat-card--rose    .sf-stat-card__accent { background: #f43f5e; }
.sf-stat-card--indigo  .sf-stat-card__accent { background: #6366f1; }
.sf-stat-card--slate   .sf-stat-card__accent { background: #94a3b8; }
.sf-stat-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .4rem;
    min-width: 0;
}
.sf-stat-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: .6rem;
    font-size: .8rem;
    color: #fff;
}
.sf-stat-card--emerald .sf-stat-card__icon { background: linear-gradient(135deg,#10b981,#059669); }
.sf-stat-card--blue    .sf-stat-card__icon { background: linear-gradient(135deg,#3b82f6,#2563eb); }
.sf-stat-card--amber   .sf-stat-card__icon { background: linear-gradient(135deg,#f59e0b,#d97706); }
.sf-stat-card--rose    .sf-stat-card__icon { background: linear-gradient(135deg,#f43f5e,#e11d48); }
.sf-stat-card--indigo  .sf-stat-card__icon { background: linear-gradient(135deg,#6366f1,#4f46e5); }
.sf-stat-card--slate   .sf-stat-card__icon { background: linear-gradient(135deg,#94a3b8,#64748b); }
.sf-stat-card__trend {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .62rem;
    font-weight: 700;
    padding: .15rem .45rem;
    border-radius: 999px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.sf-stat-card__trend--up   { color: #047857; background: rgba(16,185,129,.12); }
.sf-stat-card__trend--down { color: #be123c; background: rgba(244,63,94,.12); }
.sf-stat-card__trend--flat { color: var(--sf-color-text-muted,#64748b); background: rgba(148,163,184,.14); }
.sf-stat-card__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--sf-color-text-muted, #64748b);
}
.sf-stat-card__value {
    margin-top: .1rem;
    font-size: clamp(1rem, .55rem + .9vw, 1.3rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    color: var(--sf-color-text, #0f172a);
}
.sf-stat-card__meta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: .15rem;
    font-size: .68rem;
    color: var(--sf-color-text-muted, #64748b);
}

/* ============================================================
 * Stat MINI (IT48, S29) — tira de resumen compacta para listados
 * (Total / Pagados / Pendientes / ...). Variante liviana de
 * .sf-stat-card (sin icono) para usar DENTRO de .sf-kpi-grid.
 * Tono via modificador --{emerald|blue|amber|rose|indigo|slate}
 * (barra de acento izquierda + label tintado).
 * ============================================================ */
.sf-stat-mini {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: var(--sf-color-bg-elevated, #fff);
    border: 1px solid var(--sf-color-border, #e2e8f0);
    border-radius: .7rem;
    padding: .5rem .65rem .5rem .8rem;
}
.sf-stat-mini::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--sf-mini-accent, #94a3b8);
}
.sf-stat-mini__label {
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sf-color-text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sf-stat-mini__value {
    margin-top: .15rem;
    font-size: clamp(.9rem, .5rem + .6vw, 1.1rem);
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--sf-color-text, #0f172a);
}
.sf-stat-mini--emerald { --sf-mini-accent: #10b981; }
.sf-stat-mini--blue    { --sf-mini-accent: #3b82f6; }
.sf-stat-mini--amber   { --sf-mini-accent: #f59e0b; }
.sf-stat-mini--rose    { --sf-mini-accent: #f43f5e; }
.sf-stat-mini--indigo  { --sf-mini-accent: #6366f1; }
.sf-stat-mini--slate   { --sf-mini-accent: #94a3b8; }
.sf-stat-mini--violet  { --sf-mini-accent: #8b5cf6; }
.sf-stat-mini--emerald .sf-stat-mini__label { color: #059669; }
.sf-stat-mini--blue    .sf-stat-mini__label { color: #2563eb; }
.sf-stat-mini--amber   .sf-stat-mini__label { color: #b45309; }
.sf-stat-mini--rose    .sf-stat-mini__label { color: #be123c; }
.sf-stat-mini--indigo  .sf-stat-mini__label { color: #4f46e5; }
.sf-stat-mini--violet  .sf-stat-mini__label { color: #7c3aed; }
.dark .sf-stat-mini--emerald .sf-stat-mini__label,
html[data-theme="dark"] .sf-stat-mini--emerald .sf-stat-mini__label { color: #34d399; }
.dark .sf-stat-mini--blue .sf-stat-mini__label,
html[data-theme="dark"] .sf-stat-mini--blue .sf-stat-mini__label { color: #60a5fa; }
.dark .sf-stat-mini--amber .sf-stat-mini__label,
html[data-theme="dark"] .sf-stat-mini--amber .sf-stat-mini__label { color: #fbbf24; }
.dark .sf-stat-mini--rose .sf-stat-mini__label,
html[data-theme="dark"] .sf-stat-mini--rose .sf-stat-mini__label { color: #fb7185; }
.dark .sf-stat-mini--indigo .sf-stat-mini__label,
html[data-theme="dark"] .sf-stat-mini--indigo .sf-stat-mini__label { color: #a5b4fc; }
.dark .sf-stat-mini--violet .sf-stat-mini__label,
html[data-theme="dark"] .sf-stat-mini--violet .sf-stat-mini__label { color: #c4b5fd; }

/* ============================================================
 * Primitivas dataviz CSS-only (IT89, 2026-08-01) — S25/S29
 * ------------------------------------------------------------
 * .sf-stackbar  barra apilada de composicion (segmentos categoricos)
 * .sf-hbar      barra horizontal rotulada (una medida, un tono)
 * .sf-meter     medida vs umbral (bullet: fill + marker de piso)
 *
 * Reglas (skill dataviz): marcas finas, data-end redondeado 4px,
 * spacer 2px entre segmentos, texto SIEMPRE en tinta (--sf-color-text*),
 * colores de serie SOLO tokens --sf-viz-* (categorica validada CVD
 * light+dark). Anchos data-driven: PROHIBIDO style= inline (CSP) —
 * la pagina genera clases de ancho en su <style nonce>.
 * ============================================================ */
.sf-stackbar {
    display: flex;
    height: 14px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--sf-viz-grid, #e2e8f0);
}
.sf-stackbar__seg { height: 100%; min-width: 2px; }
.sf-stackbar__seg + .sf-stackbar__seg {
    border-left: 2px solid var(--sf-color-bg-elevated, #fff);
}
.sf-viz-fill-1 { background: var(--sf-viz-1, #2a78d6); }
.sf-viz-fill-2 { background: var(--sf-viz-2, #eb6834); }
.sf-viz-fill-3 { background: var(--sf-viz-3, #1baf7a); }
.sf-viz-fill-4 { background: var(--sf-viz-4, #eda100); }

.sf-legend {
    display: flex; flex-wrap: wrap;
    gap: .35rem 1.1rem;
    margin-top: .5rem;
    font-size: .72rem;
    color: var(--sf-color-text-muted, #64748b);
}
.sf-legend__item { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; }
.sf-legend__swatch { width: .65rem; height: .65rem; border-radius: 3px; flex: none; }
.sf-legend__value {
    color: var(--sf-color-text, #0f172a);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.sf-hbar-list { display: block; }
.sf-hbar {
    display: grid;
    grid-template-columns: minmax(7rem, 12rem) 1fr auto;
    align-items: center;
    gap: .6rem;
}
.sf-hbar + .sf-hbar { margin-top: .45rem; }
.sf-hbar__label {
    font-size: .78rem;
    color: var(--sf-color-text-muted, #64748b);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sf-hbar__track {
    display: block;
    height: 10px;
    border-radius: 4px;
    background: var(--sf-viz-grid, #e2e8f0);
    overflow: hidden;
    min-width: 0;
}
.sf-hbar__fill {
    display: block;
    height: 100%;
    border-radius: 0 4px 4px 0;
    background: var(--sf-viz-1, #2a78d6);
}
.sf-hbar__value {
    font-size: .78rem; font-weight: 600;
    color: var(--sf-color-text, #0f172a);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.sf-hbar__sub { color: var(--sf-color-text-muted, #64748b); font-weight: 400; }

.sf-meter { position: relative; height: 14px; border-radius: 4px; background: var(--sf-viz-grid, #e2e8f0); }
.sf-meter__fill {
    position: absolute; top: 0; bottom: 0; left: 0;
    border-radius: 4px;
    background: var(--sf-color-success, #059669);
}
.sf-meter--breach .sf-meter__fill { background: var(--sf-color-danger, #dc2626); }
.sf-meter__marker {
    position: absolute; top: -3px; bottom: -3px;
    width: 2px;
    background: var(--sf-color-text, #0f172a);
}
.sf-meter__scale {
    display: flex; justify-content: space-between;
    margin-top: .3rem;
    font-size: .68rem;
    color: var(--sf-color-text-muted, #64748b);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
 * Leyenda en PILDORAS (IT264) — variante de `.sf-legend` para
 * conteos por ESTADO (no por serie de un chart): «Libre 8 ·
 * Ocupada 5 · Limpieza 1». El punto toma el tono del sistema
 * (`.sf-tone--<tono>`, capa de tokens), asi que nunca vuelve a
 * necesitar un hex por vertical.
 * ------------------------------------------------------------ */
.sf-legend--pills { gap: .4rem; margin-top: 0; }
.sf-legend--pills .sf-legend__item {
    gap: .35rem;
    padding: .28rem .65rem;
    border-radius: 999px;
    background: var(--sf-color-bg-elevated, #fff);
    border: 1px solid var(--sf-color-border, #e2e8f0);
    font-weight: 600;
}
.sf-legend__dot {
    width: .5rem;
    height: .5rem;
    border-radius: 999px;
    flex: none;
    background: var(--sf-tone, var(--sf-color-border-strong, #94a3b8));
}

/* ------------------------------------------------------------
 * Anchos data-driven CSP-safe (IT264).
 * El bloque de dataviz de arriba documenta que `style=` inline esta
 * PROHIBIDO (CSP con nonce lo bloquea) y delegaba en que «la pagina
 * genera clases de ancho en su <style nonce>» — es decir, cada
 * pantalla se fabricaba su propia escala. Esta escala fija de 5% es
 * kernel-owned: la pagina redondea el porcentaje y elige la clase.
 * Sirve para .sf-meter__fill, .sf-hbar__fill y .sf-stackbar__seg.
 * ------------------------------------------------------------ */
.sf-fill--p0   { width: 0; }
.sf-fill--p5   { width: 5%; }
.sf-fill--p10  { width: 10%; }
.sf-fill--p15  { width: 15%; }
.sf-fill--p20  { width: 20%; }
.sf-fill--p25  { width: 25%; }
.sf-fill--p30  { width: 30%; }
.sf-fill--p35  { width: 35%; }
.sf-fill--p40  { width: 40%; }
.sf-fill--p45  { width: 45%; }
.sf-fill--p50  { width: 50%; }
.sf-fill--p55  { width: 55%; }
.sf-fill--p60  { width: 60%; }
.sf-fill--p65  { width: 65%; }
.sf-fill--p70  { width: 70%; }
.sf-fill--p75  { width: 75%; }
.sf-fill--p80  { width: 80%; }
.sf-fill--p85  { width: 85%; }
.sf-fill--p90  { width: 90%; }
.sf-fill--p95  { width: 95%; }
.sf-fill--p100 { width: 100%; }