/* ==========================================================================
   viz.css - capa de datos del sistema de gestion
   Tokens de color y componentes para KPIs y graficos (Chart.js).

   Los valores vienen de la skill `dataviz` y estan validados con
   scripts/validate_palette.js contra las superficies reales de la app
   (#ffffff en claro, #212529 en oscuro), modo claro y oscuro, --pairs all.
   No cambies un hex sin volver a correr el validador.
   ========================================================================== */

:root {
    /* -- Superficies e ink ------------------------------------------------ */
    --viz-surface:    #ffffff;   /* fondo de .card, superficie del grafico */
    --viz-plane:      #f8f9fa;   /* fondo de pagina */
    --viz-ink:        #0b0b0b;   /* texto primario */
    --viz-ink-soft:   #52514e;   /* texto secundario */
    --viz-ink-muted:  #898781;   /* ejes y etiquetas */
    --viz-grid:       #e1e0d9;   /* linea de grilla, hairline solida */
    --viz-baseline:   #c3c2b7;   /* eje / linea base */

    /* -- Paleta categorica: identidad, en orden fijo ----------------------
       El orden ES el mecanismo de seguridad para daltonismo. No lo cicles
       ni generes un slot 9: agrupa la cola en "Otros" o usa small multiples. */
    --viz-series-1:      #2a78d6;   /* azul   */
    --viz-series-2:      #eb6834;   /* naranjo */
    --viz-series-3:      #1baf7a;   /* aqua   */
    --viz-series-4:      #eda100;   /* amarillo */
    /* Lavados al 10% para rellenos de area (nunca bloques saturados) */
    --viz-series-1-wash: rgba(42, 120, 214, 0.10);
    --viz-series-2-wash: rgba(235, 104, 52, 0.10);
    --viz-series-3-wash: rgba(27, 175, 122, 0.10);
    --viz-series-4-wash: rgba(237, 161, 0, 0.10);

    /* -- Estado: reservado. Nunca como "serie 5" -------------------------
       Siempre acompanado de icono + etiqueta, nunca color solo. */
    --viz-good:     #0ca30c;
    --viz-warning:  #fab219;
    --viz-serious:  #ec835a;
    --viz-critical: #d03b3b;
}

/* Modo oscuro. Mismos ocho matices, re-escalonados para la superficie
   oscura; no es un flip automatico. Hoy base.html fija
   data-bs-theme="light", asi que esto queda listo pero inactivo. */
@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme="light"]) {
        --viz-surface:   #212529;
        --viz-plane:     #0d0d0d;
        --viz-ink:       #ffffff;
        --viz-ink-soft:  #c3c2b7;
        --viz-ink-muted: #898781;
        --viz-grid:      #2c2c2a;
        --viz-baseline:  #383835;
        --viz-series-1:      #3987e5;
        --viz-series-2:      #d95926;
        --viz-series-3:      #199e70;
        --viz-series-4:      #c98500;
        --viz-series-1-wash: rgba(57, 135, 229, 0.14);
        --viz-series-2-wash: rgba(217, 89, 38, 0.14);
        --viz-series-3-wash: rgba(25, 158, 112, 0.14);
        --viz-series-4-wash: rgba(201, 133, 0, 0.14);
    }
}
:root[data-bs-theme="dark"] {
    --viz-surface:   #212529;
    --viz-plane:     #0d0d0d;
    --viz-ink:       #ffffff;
    --viz-ink-soft:  #c3c2b7;
    --viz-ink-muted: #898781;
    --viz-grid:      #2c2c2a;
    --viz-baseline:  #383835;
    --viz-series-1:      #3987e5;
    --viz-series-2:      #d95926;
    --viz-series-3:      #199e70;
    --viz-series-4:      #c98500;
    --viz-series-1-wash: rgba(57, 135, 229, 0.14);
    --viz-series-2-wash: rgba(217, 89, 38, 0.14);
    --viz-series-3-wash: rgba(25, 158, 112, 0.14);
    --viz-series-4-wash: rgba(201, 133, 0, 0.14);
}

/* ==========================================================================
   Contenedor de grafico
   La altura incluye la banda del eje X. Sin esto el canvas con
   maintainAspectRatio:false colapsa o recorta las etiquetas del eje.
   ========================================================================== */
.chart-area {
    position: relative;
    height: 320px;
}
@media (max-width: 768px) {
    .chart-area { height: 260px; }
}

/* ==========================================================================
   Stat tile
   Reemplaza las clases de SB-Admin-2 que quedaron sin CSS
   (border-left-*, text-xs, text-gray-800). Contrato: etiqueta en
   oracion, valor en cifras proporcionales, acento a la izquierda.
   ========================================================================== */
.stat-tile {
    border-left: 4px solid var(--viz-baseline);
    height: 100%;
}
.stat-tile .stat-label {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--viz-ink-soft);
    margin-bottom: .25rem;
}
.stat-tile .stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--viz-ink);
    /* Cifras proporcionales: tabular-nums deja sueltos los numeros grandes.
       El tabular se reserva para columnas (tablas, ticks de eje). */
    font-variant-numeric: proportional-nums;
}
.stat-tile .stat-icon {
    font-size: 1.75rem;
    color: var(--viz-baseline);
}

/* El acento nombra la serie o el estado, nunca el ranking */
.stat-tile.accent-series-1 { border-left-color: var(--viz-series-1); }
.stat-tile.accent-series-2 { border-left-color: var(--viz-series-2); }
.stat-tile.accent-series-3 { border-left-color: var(--viz-series-3); }
.stat-tile.accent-good     { border-left-color: var(--viz-good); }
.stat-tile.accent-warning  { border-left-color: var(--viz-warning); }
/* serious: entre "pendiente" y "atrasada" — p. ej. vence esta semana. Existe
   para no pintar del mismo amarillo dos urgencias distintas. */
.stat-tile.accent-serious  { border-left-color: var(--viz-serious); }
.stat-tile.accent-critical { border-left-color: var(--viz-critical); }

/* En las tarjetas de ESTADO el icono toma el mismo token: el estado nunca
   viaja solo en el color, va con icono y etiqueta. En las de serie el icono
   se queda recesivo — ahi el color es identidad de dato, no una senal. */
.stat-tile.accent-good .stat-icon     { color: var(--viz-good); }
.stat-tile.accent-warning .stat-icon  { color: var(--viz-warning); }
.stat-tile.accent-serious .stat-icon  { color: var(--viz-serious); }
.stat-tile.accent-critical .stat-icon { color: var(--viz-critical); }

/* ==========================================================================
   Vista de tabla
   Todo grafico tiene su gemelo en tabla: ningun valor queda accesible
   solo por tooltip o solo por color.
   ========================================================================== */
.viz-tabla > summary {
    cursor: pointer;
    font-size: .8125rem;
    color: var(--viz-ink-soft);
    padding: .5rem 0 0;
    list-style: none;
}
.viz-tabla > summary::-webkit-details-marker { display: none; }
.viz-tabla > summary::before {
    content: "\25B8";           /* triangulo derecha */
    display: inline-block;
    margin-right: .4rem;
    transition: transform .15s;
}
.viz-tabla[open] > summary::before { transform: rotate(90deg); }
.viz-tabla table {
    font-size: .8125rem;
    margin-top: .5rem;
    font-variant-numeric: tabular-nums;  /* aqui si: columna de numeros */
}

/* Llave de color junto al texto de una serie.
   El texto usa tokens de ink; el color lo carga la marca de al lado. */
.viz-llave {
    display: inline-block;
    width: .625rem;
    height: .625rem;
    border-radius: 50%;
    margin-right: .4rem;
    vertical-align: baseline;
}
.viz-llave.series-1 { background: var(--viz-series-1); }
.viz-llave.series-2 { background: var(--viz-series-2); }