/* ================================================
   DASHBOARD DE INICIO - WIDGETS
   Identidad "premium/corporativo elevado": Source Serif 4 para
   titulares, Manrope para UI, IBM Plex Mono para cifras (lectura de
   instrumento de laboratorio). Paleta índigo + acento bronce reservado
   para las cifras que más importan (pipeline, tendencias).
   Layout: fila de KPIs arriba + grid principal de 2 columnas
   (operativo / inventario) que ocupa todo el ancho disponible.
   ================================================ */

:root {
    /* Superficies */
    --dash-surface: #f5f6fb;
    --dash-surface-card: #ffffff;
    --dash-surface-sunken: #eef0f8;

    /* Texto */
    --dash-ink: #141b2e;
    --dash-ink-soft: #5b6178;
    --dash-ink-faint: #8b91a6;

    /* Bordes */
    --dash-line: #e3e6f0;
    --dash-line-soft: #edeff6;

    /* Acento primario (índigo) */
    --dash-accent: #1e2f6b;
    --dash-accent-bright: #2f4ed6;
    --dash-accent-soft: #e8ecfc;

    /* Acento secundario reservado para cifras clave */
    --dash-brass: #9a7325;
    --dash-brass-soft: #f6efdd;

    /* Semántico */
    --dash-ok: #146c43;
    --dash-ok-soft: #e3f5ea;
    --dash-warn: #a15c00;
    --dash-warn-soft: #fbedd6;
    --dash-crit: #a02334;
    --dash-crit-soft: #fbe4e6;

    /* Colores de acento por módulo (usados en dash-accent-* y estilos inline
       de mini-stats). Se mantienen los nombres históricos para no tocar los
       .razor, pero con los tonos de la nueva paleta. */
    --dash-blue: var(--dash-accent-bright);
    --dash-green: var(--dash-ok);
    --dash-red: var(--dash-crit);
    --dash-orange: var(--dash-warn);
    --dash-purple: #5b3fa3;
    --dash-pink: #a3396f;
    --dash-teal: #147a72;

    --dash-shadow-1: 0 1px 2px rgba(20, 27, 46, .05), 0 10px 24px -18px rgba(20, 27, 46, .28);
    --dash-shadow-2: 0 2px 6px rgba(20, 27, 46, .06), 0 22px 40px -24px rgba(20, 27, 46, .32);
    --dash-radius: 16px;
}

.dash-shell {
    width: 100%;
    max-width: 1760px;
    margin: 0 auto;
    padding: 0 1.5rem 2.5rem;
    box-sizing: border-box;
    font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    color: var(--dash-ink);
}

/* ------- Rótulos de sección (separan grupos temáticos del panel) ------- */
.dash-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--dash-ink-faint);
    margin: 1.9rem 0 0.85rem 0.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Manrope', ui-sans-serif, sans-serif;
}

.dash-section-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--dash-line-soft);
}

.dash-section-label:first-child {
    margin-top: 0;
}

/* ------- Barra de resumen ejecutivo (fila superior con divisores) ------- */
.dash-exec-bar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: var(--dash-line);
    border: 1px solid var(--dash-line);
    border-radius: var(--dash-radius);
    overflow: hidden;
    box-shadow: var(--dash-shadow-1);
    margin-bottom: 1.5rem;
}

.dash-exec-bar > .dash-exec-stat {
    background: var(--dash-surface-card);
    padding: 1.1rem 1.3rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.dash-exec-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dash-surface-sunken);
    color: var(--dash-accent-current, var(--dash-accent));
}

.dash-exec-icon svg {
    width: 19px;
    height: 19px;
}

.dash-exec-stat .valor {
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1;
    color: var(--dash-ink);
}

.dash-exec-stat .etiqueta {
    font-size: 0.76rem;
    color: var(--dash-ink-soft);
    margin-top: 0.25rem;
    line-height: 1.25;
}

@media (max-width: 1150px) {
    .dash-exec-bar {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .dash-exec-bar {
        grid-template-columns: repeat(2, 1fr);
    }
}

.dash-shell .dash-mono,
.dash-shell .valor,
.dash-shell .dash-kpi-value,
.dash-shell .dash-flujo-step .valor,
.dash-shell .dash-caducidad-stat .valor,
.dash-shell .dash-progress-pct,
.dash-shell .dash-mini-stat .valor {
    font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* ------- Filas de mini-stats (resumen ejecutivo / KPIs de calidad) ------- */
.dash-mini-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.dash-mini-stat {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--dash-surface-card);
    border: 1px solid var(--dash-line);
    border-radius: 14px;
    padding: 0.85rem 1rem;
    box-shadow: var(--dash-shadow-1);
}

.dash-mini-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--dash-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Selector compuesto (mayor especificidad que ".dash-icon-chip" sola) para que el
   blanco del ícono nunca sea pisado por la regla de color de ".dash-icon-chip"
   (que lo dejaba del mismo azul oscuro que el fondo, casi invisible). */
.dash-icon-chip.dash-mini-icon {
    color: #fff;
}

.dash-mini-icon svg {
    width: 18px;
    height: 18px;
}

.dash-mini-stat .valor {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--dash-ink);
    line-height: 1.1;
}

.dash-mini-stat .etiqueta {
    font-size: 0.72rem;
    color: var(--dash-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* ------- Semáforo de cumplimiento ------- */
.dash-kpi-semaforo {
    gap: 0.9rem;
}

.dash-semaforo {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px var(--dash-surface-sunken);
}

.dash-semaforo.verde {
    background: var(--dash-ok);
}

.dash-semaforo.amarillo {
    background: var(--dash-warn);
}

.dash-semaforo.rojo {
    background: var(--dash-crit);
}

.dash-semaforo:not(.verde):not(.amarillo):not(.rojo) {
    background: #cbd5e1;
}

/* ------- Fila de gráficos ------- */
.dash-charts-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    align-items: stretch;
}

.dash-charts-row.dash-single-col {
    grid-template-columns: 1fr;
}

.dash-charts-row .dash-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dash-chart {
    width: 100%;
}

@media (max-width: 1100px) {
    .dash-charts-row {
        grid-template-columns: 1fr;
    }
}

.dash-mini-stats-block,
.dash-trends-block,
.dash-insumos-block {
    margin-bottom: 1.25rem;
}

.dash-insumos-title {
    margin-bottom: 0.75rem;
}

/* ------- Fila superior de KPIs -------
   Mismo grid 1.4fr/1fr que .dash-charts-row para que las tarjetas de esta
   fila queden alineadas en ancho con las de la fila de abajo (si no, con
   flexbox al 50/50 quedan más angostas que su contraparte de 1.4fr). */
.dash-stats-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    align-items: stretch;
}

.dash-stats-row.dash-single-col {
    grid-template-columns: 1fr;
}

.dash-stat-card {
    min-width: 0;
}

@media (max-width: 1100px) {
    .dash-stats-row {
        grid-template-columns: 1fr;
    }
}

/* ------- Grid principal: operativo (2fr) + inventario (1fr) -------
   Usa áreas nombradas (no orden de aparición) para que cada tarjeta caiga
   siempre en su celda aunque algún widget de la fila no se muestre por
   permisos, y "align-items: stretch" (por defecto) para que ambas tarjetas
   de una misma fila tengan siempre la misma altura. */
.dash-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
    grid-template-areas:
        "slot-a slot-b"
        "slot-c slot-d";
    gap: 1.25rem;
}

.dash-main-grid.dash-single-col {
    grid-template-columns: 1fr;
    grid-template-areas:
        "slot-a"
        "slot-b"
        "slot-c"
        "slot-d";
}

.dash-grid-slot {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.dash-grid-slot > .dash-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.dash-slot-a { grid-area: slot-a; }
.dash-slot-b { grid-area: slot-b; }
.dash-slot-c { grid-area: slot-c; }
.dash-slot-d { grid-area: slot-d; }

/* ------- Tarjeta base ------- */
.dash-card {
    background: var(--dash-surface-card);
    border: 1px solid var(--dash-line);
    border-radius: var(--dash-radius);
    padding: 1.3rem 1.45rem;
    box-shadow: var(--dash-shadow-1);
    transition: box-shadow 0.2s ease;
    min-width: 0;
}

.dash-card:hover {
    box-shadow: var(--dash-shadow-2);
}

.dash-accent-blue { --dash-accent-current: var(--dash-blue); }
.dash-accent-green { --dash-accent-current: var(--dash-green); }
.dash-accent-red { --dash-accent-current: var(--dash-crit); }
.dash-accent-orange { --dash-accent-current: var(--dash-orange); }
.dash-accent-purple { --dash-accent-current: var(--dash-purple); }
.dash-accent-pink { --dash-accent-current: var(--dash-pink); }
.dash-accent-teal { --dash-accent-current: var(--dash-teal); }

/* ------- Encabezado de tarjeta ------- */
.dash-card-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--dash-ink);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.dash-icon-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--dash-surface-sunken);
    color: var(--dash-accent-current, var(--dash-accent));
    font-size: 1rem;
    flex-shrink: 0;
}

.dash-icon-chip svg {
    width: 17px;
    height: 17px;
}

.dash-card-title-text {
    flex: 1 1 auto;
}

.dash-card-title-tag {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--dash-ink-faint);
    text-transform: none;
    letter-spacing: normal;
    background: var(--dash-surface-sunken);
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
}

/* ------- Ícono de ayuda + tooltip: qué es, de dónde sale, qué política se aplicó ------- */
.dash-info-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--dash-ink-faint);
    cursor: help;
}

.dash-info-icon svg {
    width: 100%;
    height: 100%;
}

.dash-info-icon:hover,
.dash-info-icon:focus-visible {
    color: var(--dash-accent);
    outline: none;
}

.dash-tooltip {
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #1b2440;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.45;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    width: max-content;
    max-width: 260px;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    box-shadow: var(--dash-shadow-2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 30;
}

.dash-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1b2440;
}

.dash-info-icon:hover .dash-tooltip,
.dash-info-icon:focus-visible .dash-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Cerca del borde izquierdo de la pantalla la burbuja centrada se saldría del
   viewport; los mini-stat (exec bar, KPI de calidad) alinean a la izquierda en vez
   de centrar para no cortarse contra el borde de la tarjeta. */
.dash-mini-stat .dash-tooltip,
.dash-exec-stat .dash-tooltip {
    left: 0;
    transform: translateX(0) translateY(4px);
}

.dash-mini-stat .dash-info-icon:hover .dash-tooltip,
.dash-mini-stat .dash-info-icon:focus-visible .dash-tooltip,
.dash-exec-stat .dash-info-icon:hover .dash-tooltip,
.dash-exec-stat .dash-info-icon:focus-visible .dash-tooltip {
    transform: translateX(0) translateY(0);
}

.dash-mini-stat .dash-tooltip::after,
.dash-exec-stat .dash-tooltip::after {
    left: 10px;
    transform: none;
}

/* ------- Contenido de KPI (stat card) ------- */
.dash-kpi-row {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-wrap: wrap;
}

.dash-kpi-gauge {
    flex: 0 0 auto;
}

.dash-kpi-numbers {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1 1 auto;
}

.dash-kpi-value {
    font-size: 2rem;
    font-weight: 600;
    color: var(--dash-ink);
    line-height: 1.05;
    letter-spacing: -0.01em;
}

.dash-kpi-label {
    font-size: 0.8rem;
    color: var(--dash-ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-sparkline-wrap {
    margin-left: auto;
    flex-shrink: 0;
}

.dash-pipeline-value {
    color: var(--dash-brass);
    font-weight: 700;
}

/* ------- Anillo de KPI (reemplaza DxBarGauge, que renderiza mal en algunos entornos) ------- */
.dash-ring-wrap {
    position: relative;
    width: 88px;
    height: 88px;
    flex-shrink: 0;
}

.dash-ring-wrap svg {
    transform: rotate(-90deg);
}

.dash-ring-wrap .bg {
    stroke: var(--dash-surface-sunken);
}

.dash-ring-wrap .fg {
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s ease;
}

.dash-ring-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--dash-ink);
}

.dash-ring-label-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.05;
}

.dash-ring-label-pct {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dash-ink);
}

.dash-ring-label-sub {
    font-size: 0.62rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--dash-ink-faint);
}

/* ------- Barras de carga de trabajo (reemplaza DxChart de barras) ------- */
.dash-bars {
    display: flex;
    align-items: flex-end;
    gap: 0.9rem;
    height: 190px;
    padding: 0 0.2rem;
}

.dash-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    height: 100%;
    justify-content: flex-end;
    min-width: 0;
}

.dash-bar-stack {
    width: 100%;
    max-width: 38px;
    border-radius: 6px 6px 3px 3px;
    background: linear-gradient(180deg, var(--dash-accent-bright) 0%, var(--dash-accent) 100%);
    transition: height 0.4s ease;
    min-height: 3px;
}

.dash-bar-value {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--dash-ink-soft);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

.dash-bar-label {
    font-size: 0.7rem;
    color: var(--dash-ink-faint);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.dash-bar-sublabel {
    font-size: 0.62rem;
    color: var(--dash-ink-faint);
    opacity: 0.75;
    text-align: center;
    white-space: nowrap;
}

/* ------- Donut de distribución de estados (reemplaza DxPieChart) ------- */
.dash-donut-wrap {
    display: flex;
    align-items: center;
    gap: 1.3rem;
    flex-wrap: wrap;
}

.dash-donut-legend {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 1;
    min-width: 150px;
}

.dash-donut-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.82rem;
}

.dash-donut-row .sw {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    flex-shrink: 0;
}

.dash-donut-row .lbl {
    color: var(--dash-ink-soft);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-donut-row .val {
    font-weight: 700;
    flex-shrink: 0;
}

.dash-donut-row .pct {
    color: var(--dash-ink-faint);
    font-weight: 400;
    flex-shrink: 0;
    min-width: 3.2em;
    text-align: right;
}

/* ------- Estados vacío / carga ------- */
.dash-empty {
    color: var(--dash-ink-faint);
    font-size: 0.9rem;
    padding: 0.6rem 0;
    text-align: center;
}

.dash-list-nota {
    color: var(--dash-ink-faint);
    font-size: 0.78rem;
    padding: 0 0 0.5rem;
}

.dash-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    color: var(--dash-ink-soft);
    font-size: 0.95rem;
    padding: 3rem 0;
}

.dash-empty-page {
    background: var(--dash-surface-card);
    border: 1px dashed #cbd5e1;
    border-radius: var(--dash-radius);
    padding: 3rem 1.5rem;
    text-align: center;
}

.dash-empty-page .dash-empty-icon {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
    opacity: 0.7;
}

/* ------- Flujo de muestras (pipeline) ------- */
.dash-flujo {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex-wrap: wrap;
}

.dash-flujo-step {
    flex: 1 1 120px;
    text-align: center;
    padding: 0.75rem 0.5rem;
    position: relative;
}

.dash-flujo-step .valor {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--dash-accent);
}

.dash-flujo-step .etiqueta {
    font-size: 0.74rem;
    color: var(--dash-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
}

.dash-flujo-step:not(:last-child)::after {
    content: "\2192";
    position: absolute;
    right: -0.3rem;
    top: 1rem;
    color: var(--dash-ink-faint);
    font-size: 1.3rem;
}

/* ------- Badges de severidad (alertas / caducidades) ------- */
.dash-badge {
    display: inline-block;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    font-family: 'Manrope', ui-sans-serif, sans-serif;
}

.dash-badge-vencida,
.dash-badge-vencido {
    background: var(--dash-crit-soft);
    color: var(--dash-crit);
}

.dash-badge-porVencer,
.dash-badge-critico {
    background: var(--dash-warn-soft);
    color: var(--dash-warn);
}

.dash-badge-proximo {
    background: #fef3c7;
    color: #92640a;
}

.dash-badge-ok {
    background: var(--dash-ok-soft);
    color: var(--dash-ok);
}

.dash-badge-neutro {
    background: var(--dash-surface-sunken);
    color: var(--dash-ink-faint);
}

.dash-list {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 160px;
    max-height: 320px;
    overflow-y: auto;
    margin: 0 -0.3rem;
}

.dash-alerta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.3rem;
    border-bottom: 1px solid var(--dash-line-soft);
    font-size: 0.87rem;
    gap: 0.75rem;
}

.dash-alerta-row:last-child {
    border-bottom: none;
}

.dash-alerta-row:hover {
    background: var(--dash-surface-sunken);
    border-radius: 8px;
}

.dash-alerta-row-detalle {
    align-items: flex-start;
}

.dash-alerta-parametros {
    font-size: 0.76rem;
    color: var(--dash-ink-faint);
    margin-top: 0.15rem;
}

/* ------- Progreso de lotes (barras) ------- */
.dash-progress-list {
    display: flex;
    flex-direction: column;
    gap: 1.05rem;
    flex: 1;
    min-height: 160px;
    max-height: 340px;
    overflow-y: auto;
    padding-right: 0.2rem;
}

.dash-progress-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.86rem;
    margin-bottom: 0.4rem;
}

.dash-progress-item-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.76rem;
    margin-bottom: 0.5rem;
}

.dash-progress-bar {
    width: 100%;
    height: 7px;
    background: var(--dash-surface-sunken);
    border-radius: 999px;
    overflow: hidden;
}

.dash-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--dash-accent) 0%, var(--dash-accent-bright) 100%);
    border-radius: 999px;
    transition: width 0.4s ease;
}

.dash-progress-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.74rem;
    color: var(--dash-ink-faint);
    margin-top: 0.35rem;
}

.dash-progress-pct {
    font-weight: 700;
    color: var(--dash-accent);
}

/* ------- Resumen caducadas / por caducar ------- */
.dash-caducidad-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.dash-caducidad-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.6rem 0.5rem;
    border-radius: 12px;
    background: var(--dash-surface-sunken);
}

.dash-caducidad-stat .valor {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.dash-caducidad-stat .etiqueta {
    font-size: 0.72rem;
    color: var(--dash-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-top: 0.3rem;
    text-align: center;
    font-weight: 600;
}

.dash-caducidad-stat.vencido .valor {
    color: var(--dash-crit);
}

.dash-caducidad-stat.proximo .valor {
    color: var(--dash-warn);
}

.dash-caducidad-group-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--dash-ink-soft);
    margin: 0.6rem 0 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.dash-caducidad-group-title.vencido {
    color: var(--dash-crit);
}

.dash-caducidad-group-title.proximo {
    color: var(--dash-warn);
}

/* ------- Heatmap de caducidades ------- */
.dash-heatmap-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 260px;
    overflow-y: auto;
    margin: 0 -0.2rem;
    padding: 0 0.2rem;
}

.dash-heatmap-cell {
    display: grid;
    grid-template-columns: 10px 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.65rem;
    border-radius: 10px;
    background: var(--dash-surface-sunken);
    font-size: 0.85rem;
}

.dash-heatmap-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dash-heatmap-dot.vencido { background: var(--dash-crit); }
.dash-heatmap-dot.critico { background: var(--dash-warn); }
.dash-heatmap-dot.proximo { background: #d4a017; }
.dash-heatmap-dot.ok { background: var(--dash-ok); }

/* ------- Responsive ------- */
@media (max-width: 1100px) {
    .dash-main-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "slot-a"
            "slot-b"
            "slot-c"
            "slot-d";
    }
}

@media (max-width: 768px) {
    .dash-shell {
        padding: 0 0.85rem 1.75rem;
    }

    .dash-stat-card {
        flex: 1 1 100%;
    }

    .dash-kpi-value {
        font-size: 1.6rem;
    }

    .dash-sparkline-wrap {
        display: none;
    }
}