/* Estilos globales, parte 5 de 12: Tokens del sistema editorial y piezas del Dashboard.
   Antes vivían en style.css. Las páginas cargan las 12 partes seguidas y
   en orden (la lista está al inicio de style.css): no cambies ese orden. */

/* ============================================================
   SISTEMA EDITORIAL DASHBOARD — Identidad Xtryde de marca v3
   Paleta: terracota + jade + carbon + cremas (mismo deck Sales)
   Tipografía: DM Sans + DM Mono (marca) + Fraunces (cifras hero)
   ============================================================ */

:root {
    --ficha-radius: 4px;
    --ficha-radius-lg: 16px;
    --ficha-sombra: 0 1px 0 rgba(42,54,61,0.04), 0 10px 24px -16px rgba(42,54,61,0.14);
    --ficha-sombra-hover: 0 2px 0 rgba(42,54,61,0.08), 0 16px 32px -18px rgba(42,54,61,0.22);
    --font-display: 'Fraunces', Georgia, serif;
    --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    /* Alias canonicos del sistema editorial (tokens.md): los controllers
       editoriales (p. ej. citas_admin) referencian --xt-font-* y --xt-texto-sec.
       Sin estos alias caian al font del body (DM Sans) y al color carbon. */
    --xt-font-display: 'Fraunces', Georgia, serif;
    --xt-font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --xt-font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
    --xt-texto-sec: #5E5E5E;
    /* Paleta oficial del Sales Deck v4 */
    --xt-terracota: #D84315;
    --xt-terracota-dark: #BF360C;
    --xt-terracota-soft: #F2A085;
    --xt-jade: #00897B;
    --xt-jade-dark: #00695C;
    --xt-carbon: #2A363D;
    --xt-crema: #FFF8F0;
    --xt-crema-2: #F5ECDD;
    --xt-crema-3: #EDE0CC;
    --xt-line: rgba(42, 54, 61, 0.16);
    --xt-line-strong: rgba(42, 54, 61, 0.32);
    /* Gris de apoyo: #6B6B6B daba 4.09:1 sobre crema-3; #5E5E5E pasa AA en
       todas las cremas (4.98:1 en crema-3). */
    --xt-muted: #5E5E5E;
    /* Terracota para TEXTO chico (< 18.66px): la de marca da 4.21:1 sobre
       crema y 3.41:1 sobre crema-3. Esta pasa AA en todas las cremas (4.73:1
       en crema-3). La de marca sigue en títulos grandes, iconos y bordes. */
    --xt-terracota-texto: #B3340D;
    /* Greca xicalcoliuhqui — usada como cinta superior en algunas fichas */
    --xt-greca-terracota: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'><path d='M0,12 V0 H12 V8 H4 V4 H8 V12' fill='none' stroke='%23D84315' stroke-opacity='0.4' stroke-width='1.5'/><path d='M12,0 V12 H24 V4 H16 V8 H20 V0' fill='none' stroke='%23D84315' stroke-opacity='0.4' stroke-width='1.5'/></svg>");
    --xt-greca-crema: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'><path d='M0,12 V0 H12 V8 H4 V4 H8 V12' fill='none' stroke='%23FFF8F0' stroke-opacity='0.42' stroke-width='1.5'/><path d='M12,0 V12 H24 V4 H16 V8 H20 V0' fill='none' stroke='%23FFF8F0' stroke-opacity='0.42' stroke-width='1.5'/></svg>");
    --xt-greca-soft: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'><path d='M0,12 V0 H12 V8 H4 V4 H8 V12' fill='none' stroke='%232A363D' stroke-opacity='0.18' stroke-width='1.5'/><path d='M12,0 V12 H24 V4 H16 V8 H20 V0' fill='none' stroke='%232A363D' stroke-opacity='0.18' stroke-width='1.5'/></svg>");
}

/* --- Ficha base — watermark del isotipo SIEMPRE presente en todas las fichas --- */
.ficha-xtryde {
    position: relative;
    overflow: hidden;
    border-radius: var(--ficha-radius-lg);
    padding: 1.65rem 1.55rem 1.4rem;
    box-shadow: var(--ficha-sombra);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    isolation: isolate;
    background: var(--xt-crema-2);
    color: var(--xt-carbon);
}
.ficha-xtryde:hover {
    box-shadow: var(--ficha-sombra-hover);
}
.ficha-xtryde > * { position: relative; z-index: 1; }

/* Watermark del isotipo X — default en TODAS las fichas. Cada variante
   ajusta tamaño y opacidad para evitar repetición visual. */
.ficha-xtryde::after {
    content: "";
    position: absolute;
    right: var(--watermark-x, -36px);
    bottom: var(--watermark-y, -36px);
    width: var(--watermark-size, 140px);
    height: var(--watermark-size, 140px);
    background-image: var(--watermark-img, url("../img/isotipo-terracota.svg"));
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: var(--watermark-opacity, 0.08);
    pointer-events: none;
    z-index: 0;
}
/* Modifier opt-in para watermark más grande (hero / signature) */
.ficha-iso {
    --watermark-size: 200px;
    /* Sobre crema; las fichas de color fijan la suya (0.12-0.16). */
    --watermark-opacity: 0.06;
    --watermark-x: -40px;
    --watermark-y: -40px;
}

/* Modifier de cinta de greca (xicalcoliuhqui) en la parte superior */
.ficha-greca::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 14px;
    background-image: var(--xt-greca-soft);
    background-repeat: repeat-x;
    background-size: 32px 16px;
    z-index: 2;
    pointer-events: none;
}

/* Variantes de color — paleta reducida a 3 (+ terracota signature solo en hero) */
.ficha-crema {
    background: var(--xt-crema-2);
    color: var(--xt-carbon);
    --watermark-img: url("../img/isotipo-terracota.svg");
    --watermark-opacity: 0.08;
    --watermark-size: 140px;
}
.ficha-crema-3 {
    background: var(--xt-crema-3);
    color: var(--xt-carbon);
    --watermark-img: url("../img/isotipo-terracota.svg");
    /* Al 9% el texto terracota chico encima de un trazo daba 4.24:1. */
    --watermark-opacity: 0.04;
    --watermark-size: 140px;
}
/* Fichas de firma: el fondo va en el tono oscuro de la marca para que el
   texto crema llegue a contraste AA (crema sobre #D84315 da 4.2:1; sobre
   #BF360C, 5.3:1). Decisión del cierre de los 73 (tono de las fichas).
   La marca de agua va en carbón: una blanca aclara el fondo justo donde cae
   el texto (crema al 92% sobre el isotipo blanco daba 3.7:1); la carbón lo
   oscurece y el texto solo gana contraste. */
.ficha-terracota {
    background: var(--xt-terracota-dark, #BF360C);
    color: var(--xt-crema);
    --watermark-img: url("../img/isotipo-carbon.svg");
    --watermark-opacity: 0.16;
    --watermark-size: 200px;
}
.ficha-jade {
    background: var(--xt-jade-dark, #00695C);
    color: var(--xt-crema);
    --watermark-img: url("../img/isotipo-carbon.svg");
    --watermark-opacity: 0.16;
    --watermark-size: 150px;
}
.ficha-dark {
    background: var(--xt-carbon);
    color: var(--xt-crema);
    --watermark-img: url("../img/isotipo-blanco.svg");
    --watermark-opacity: 0.12;
    --watermark-size: 150px;
}
.ficha-jade.ficha-greca::before { background-image: var(--xt-greca-crema); }
.ficha-terracota.ficha-greca::before { background-image: var(--xt-greca-crema); }
.ficha-dark.ficha-greca::before { background-image: var(--xt-greca-crema); }
/* Alias legacy */
.ficha-verde { background: var(--xt-jade-dark, #00695C); color: var(--xt-crema); }
.ficha-acento { background: var(--xt-carbon); color: var(--xt-crema); }
.ficha-peach { background: var(--xt-crema-3); color: var(--xt-carbon); }

/* --- Sello numerado editorial (mono DM Mono, letter-spacing 0.22em del deck) --- */
.sello-num {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    /* Tenue con el color, no con opacity: la opacity bajaba también el número
       en terracota (<strong>) a 2.6:1. Sin color-mix, el texto sale entero. */
    color: color-mix(in srgb, currentColor 72%, transparent);
    display: inline-block;
    margin-bottom: 1rem;
    /* No partir palabras: si la ficha es muy angosta, baja el letter-spacing
       en vez de mostrar "VE\nDE\nTU" letra por letra. */
    word-break: keep-all;
    overflow-wrap: normal;
}
/* Sobre crema-3 (#EDE0CC) el carbón al 72% no llega a AA; al 80%, 5.58:1. */
.ficha-crema-3 .sello-num,
.ficha-peach .sello-num { color: color-mix(in srgb, currentColor 80%, transparent); }
@media (max-width: 480px) {
    .sello-num { letter-spacing: 0.14em; font-size: 0.75rem; }
}
.sello-num strong {
    font-weight: 500;
    margin-right: 0.7rem;
    color: var(--xt-terracota-texto);
}
.ficha-terracota .sello-num strong,
.ficha-jade .sello-num strong,
.ficha-dark .sello-num strong { color: var(--xt-crema); }
/* Sobre fondo de color el sello no baja al 72%: al 90% pasa AA (4.6:1). */
.ficha-terracota .sello-num,
.ficha-jade .sello-num,
.ficha-dark .sello-num { color: color-mix(in srgb, currentColor 90%, transparent); }
/* El renglón de abajo de una cifra (Xt.fichaKpi y kpi-hero): tenue sobre
   crema, y al 92% sobre fichas de color para pasar AA (4.7:1 en terracota). */
.kpi-sub { opacity: 0.75; margin-top: 0.4rem; }
.ficha-terracota .kpi-sub,
.ficha-jade .kpi-sub,
.ficha-dark .kpi-sub { opacity: 0.92; }
/* La etiqueta gris del sistema no se lee sobre una ficha de color: va en crema. */
.ficha-terracota .label-mono,
.ficha-jade .label-mono,
.ficha-dark .label-mono { color: var(--xt-crema); }

/* --- Tipografía display (números KPI) — mix DM Sans (peso) + Fraunces (cifras hero) --- */
.cifra-display {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.0;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.cifra-hero {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 0.95;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
}
.cifra-sec {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 2rem;
    line-height: 1.0;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* --- KPI Hero (Ingresos en 2 columnas) --- */
.kpi-hero {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 200px;
}
.kpi-hero .kpi-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
}

/* --- KPI editorial secundario --- */
.kpi-editorial {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 140px;
}

/* Delta chip (variación %) — sello discreto: rectangular, nunca se parte
   ("▲" arriba y "8.1%" abajo) ni se aplasta junto a un pie largo. */
.delta-chip {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
    gap: 0.3rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    padding: 0.25rem 0.6rem;
    border-radius: var(--ficha-radius, 4px);
    background: rgba(255,248,240,0.1);
    color: var(--xt-crema);
}
.ficha-terracota .delta-chip,
.ficha-jade .delta-chip,
.ficha-verde .delta-chip {
    background: rgba(255,248,240,0.08);
    box-shadow: inset 0 0 0 1px rgba(255,248,240,0.32);
}
.ficha-crema .delta-chip,
.ficha-crema-3 .delta-chip,
.ficha-peach .delta-chip {
    background: rgba(42,54,61,0.08);
    color: var(--xt-jade-dark);
}
.ficha-crema .delta-chip.delta-neg,
.ficha-crema-3 .delta-chip.delta-neg,
.ficha-peach .delta-chip.delta-neg {
    background: rgba(216,67,21,0.10);
    color: var(--xt-terracota-texto);
}
/* Con el tinte del chip y la marca de agua encima hace falta el tono más
   hondo en las tres cremas. */
.ficha-crema .delta-chip,
.ficha-crema-3 .delta-chip,
.ficha-peach .delta-chip { color: #004D40; }
.ficha-crema .delta-chip.delta-neg,
.ficha-crema-3 .delta-chip.delta-neg,
.ficha-peach .delta-chip.delta-neg { color: #A52E0A; }

/* --- Header de sección editorial — DM Sans bold + greca line --- */
.seccion-editorial {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 2.5rem 0 1.25rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--xt-line);
}
.seccion-editorial h2 {
    font-family: var(--font-display);
    font-size: 1.85rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--xt-carbon);
}
.seccion-editorial .seccion-meta {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--xt-muted);
}

/* --- Etiqueta de categoría en pie de ficha (opcional, usar con clase .con-pie) --- */
.ficha-pie {
    margin-top: 1.4rem;
    padding-top: 0.95rem;
    border-top: 1px solid currentColor;
    opacity: 0.85;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
/* Pie sobre crema: #A52E0A (el hover de .btn-primario) da 5.98:1 en
   crema-2 y 5.39:1 en crema-3; la terracota daba 3.79:1 y 3.41:1. */
.ficha-crema .ficha-pie,
.ficha-crema-3 .ficha-pie {
    border-top-color: var(--xt-line);
    opacity: 1;
    color: #A52E0A;
}
.ficha-peach .ficha-pie {
    border-top-color: rgba(42,54,61,0.18);
    opacity: 1;
    color: #A52E0A;
}
.ficha-terracota .ficha-pie,
.ficha-jade .ficha-pie,
.ficha-dark .ficha-pie {
    border-top-color: rgba(255,248,240,0.25);
    color: rgba(255,248,240,0.92);   /* AA sobre el fondo oscuro de la ficha */
    opacity: 1;
}

/* --- Tarjeta-panel grande (para tendencia / charts) sin watermark por default --- */
.panel-xtryde {
    position: relative;
    overflow: hidden;
    background: white;
    border: 1px solid var(--xt-line);
    border-radius: var(--ficha-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--ficha-sombra);
}
/* Cinta de greca arriba del panel — modifier opt-in para marcar paneles signature */
.panel-greca::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 14px;
    background-image: var(--xt-greca-soft);
    background-repeat: repeat-x;
    background-size: 32px 16px;
    z-index: 1;
    pointer-events: none;
}
.panel-greca { padding-top: 2.1rem; }
.panel-xtryde > * { position: relative; z-index: 2; }

.panel-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.15rem;
}
.panel-titulo {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--xt-carbon);
}
.panel-subtitulo {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--xt-muted);
    margin-top: 0.35rem;
}

/* Grid editorial KPIs: hero + 5 chicas */
.kpi-grid-editorial {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
    .kpi-grid-editorial {
        grid-template-columns: repeat(4, 1fr);
    }
    .kpi-grid-editorial .kpi-hero {
        grid-column: span 2;
        grid-row: span 2;
    }
}
@media (min-width: 1280px) {
    .kpi-grid-editorial {
        grid-template-columns: repeat(6, 1fr);
    }
    .kpi-grid-editorial .kpi-hero {
        grid-column: span 2;
        grid-row: span 2;
    }
}

/* Grid de insights — mezcla de fichas crema/terracota/verde */
.insights-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    margin-bottom: 1.75rem;
}
@media (min-width: 768px) {
    .insights-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .insights-grid { grid-template-columns: repeat(3, 1fr); }
}

.insight-titular {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.015em;
    text-wrap: balance;
    margin-top: 0.4rem;
}

/* Responsive móvil */
@media (max-width: 767px) {
    .ficha-xtryde { padding: 1.15rem 1.15rem 1rem; }
    /* Hero solo expande a 2 col cuando el grid padre TIENE 2+ columnas en móvil
       (dashboard). Otros grids (corte-caja) son 1fr en móvil y no deben crear
       una columna implícita con span 2. Sobrescribimos el `grid-column: span 2`
       de la regla base para evitar columnas fantasma en grids 1fr. */
    .kpi-hero { min-height: 160px; grid-column: auto; }
    .kpi-grid-editorial .kpi-hero { grid-column: span 2; }
    .cifra-hero { font-size: 2.4rem; }
    .cifra-sec { font-size: 1.5rem; }
    .panel-xtryde { padding: 1.15rem; }
    .seccion-editorial h2 { font-size: 1.3rem; }
}

/* ============================================================
   Estado de Resultados — layout responsive
   ============================================================ */
.er-fila {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}
.er-concepto {
    min-width: 0;
    flex: 1;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.er-montos {
    display: flex;
    gap: 1.5rem;
    text-align: right;
    flex-shrink: 0;
}
.er-monto {
    width: 7rem;
    display: inline-block;
}
.er-resultado {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}
.er-resultado-label { font-size: 0.95rem; min-width: 0; flex: 1; }
.er-resultado-final .er-resultado-label { font-size: 1.05rem; }
.er-resultado-margen { margin-left: 0.4rem; white-space: nowrap; }
.er-resultado-valor { font-size: 1.15rem; flex-shrink: 0; white-space: nowrap; }
.er-resultado-final .er-resultado-valor { font-size: 1.5rem; }

/* Renglón del estado de resultados y del flujo (finanzas-resultados.js y
   finanzas-flujo.js): la sangría de un subconcepto es una clase. */
.er-fila { padding: 0.55rem 1.25rem; }
.er-fila.er-fila--sangria { padding-left: 2.25rem; }

@media (max-width: 640px) {
    .er-fila { gap: 0.5rem; padding-left: 0.85rem; padding-right: 0.85rem; }
    .er-fila.er-fila--sangria { padding-left: 1.4rem; }
    .er-montos { gap: 0.5rem; }
    .er-monto { width: auto; min-width: 4.5rem; font-size: 0.82rem; }
    .er-monto-parcial:empty { display: none; }
    .er-monto-total:empty { display: none; }

    .er-resultado {
        gap: 0.5rem;
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
        flex-wrap: wrap;
    }
    .er-resultado-label { font-size: 0.85rem; flex-basis: 100%; }
    .er-resultado-final .er-resultado-label { font-size: 0.95rem; }
    .er-resultado-margen {
        display: block;
        margin-left: 0;
        margin-top: 0.25rem;
    }
    .er-resultado-valor {
        font-size: 1.25rem;
        flex-basis: 100%;
        text-align: right;
    }
    .er-resultado-final .er-resultado-valor { font-size: 1.55rem; }
}

/* Respeta reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .ficha-xtryde { transition: none; }
}

/* ============================================================
   TOP PRODUCTOS — Podium editorial (winner + lista compacta)
   ============================================================ */
.podium-wrap { display: flex; flex-direction: column; gap: 0.85rem; }

/* Winner card — el #1 del ranking */
.podium-winner {
    position: relative;
    overflow: hidden;
    border-radius: var(--ficha-radius-lg);
    padding: 1.4rem 1.4rem 1.2rem;
    background: var(--xt-carbon);
    color: var(--xt-crema);
    isolation: isolate;
}
.podium-winner::after {
    content: "";
    position: absolute;
    right: -32px;
    bottom: -32px;
    width: 140px; height: 140px;
    background: url("../img/isotipo-blanco.svg") no-repeat center/contain;
    opacity: 0.14;
    pointer-events: none;
    z-index: 0;
}
.podium-winner > * { position: relative; z-index: 1; }
/* Ganador sobre jade o terracota: la marca de agua va en carbón, como en las
   fichas de firma (la blanca aclaraba el fondo bajo el texto). */
.podium-winner--color::after { background-image: url("../img/isotipo-carbon.svg"); }
.podium-winner-rank {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,248,240,0.92);
    margin-bottom: 0.6rem;
}
.podium-winner-rank strong { color: var(--xt-crema); margin-right: 0.5rem; }
.podium-winner-nombre {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin-bottom: 0.5rem;
    text-wrap: balance;
}
.podium-winner-valor {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--xt-crema);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* Lista compacta — posiciones 02 a 05 */
.podium-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.podium-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem 0.85rem;
    border-radius: 8px;
    transition: background 0.15s ease;
}
.podium-row:hover { background: rgba(216,67,21,0.06); }
.podium-row-rank {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--xt-terracota-texto);
    min-width: 1.6rem;
}
.podium-row-nombre {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--xt-carbon);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.podium-row-valor {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--xt-carbon);
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   MINI-CHIPS para info compacta en headers de panel
   ============================================================ */
.chip-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.3rem 0.65rem;
    border-radius: var(--ficha-radius, 4px);
    background: rgba(216,67,21,0.08);
    /* #A52E0A: con el tinte encima de crema-3, #B3340D no llega a AA. */
    color: #A52E0A;
}
.chip-meta.jade { background: rgba(0,137,123,0.10); color: var(--xt-jade-dark); }
.chip-meta.dark { background: rgba(42,54,61,0.08); color: var(--xt-carbon); }

/* ============================================================
   WRAPPER de tabs outer (Dashboard | Reportes) — dashboard_reportes.js
   ============================================================ */
.dr-tabs-wrap {
    margin-bottom: 1.25rem;
    display: flex;
    justify-content: flex-start;
}
.dr-tabs-wrap .dash-tabs { width: 100%; }

/* ============================================================
   DASHBOARD CHROME — header editorial (título Fraunces + tabs + control bar)
   ============================================================ */
.dash-chrome {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.dash-chrome-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}
.dash-titulo {
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--xt-carbon);
    line-height: 1;
}

/* Pestañas: LA pestaña de la app (MARCA-XTRYDE §12.5, igual que .tabs-xt):
   subrayado terracota de 3 px en la activa, sin cápsula ni relleno. Solo para
   cambiar de pantalla; los filtros son .xt-chips y las acciones btn-xt-*. */
.dash-tabs {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    border-bottom: 1px solid var(--xt-line);
    flex-wrap: wrap;
}
.dash-tab {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--xt-muted);
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    padding: 0.7rem 1.1rem;
    min-height: 44px;
    border-radius: 0;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
    line-height: 1.2;
}
.dash-tab:hover { color: var(--xt-carbon); }
.dash-tab.is-active {
    color: var(--xt-carbon);
    border-bottom-color: var(--xt-terracota);
}
.dash-tab:focus-visible { outline: 2px solid var(--xt-terracota); outline-offset: -2px; }
.dash-tab-ghost { background: rgba(255,248,240,0.4); }
.dash-tab-ghost:hover { background: rgba(255,248,240,0.7); }

/* Control bar — sin fondo card, layout horizontal limpio */
.dash-chrome-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem 1.25rem;
    padding: 0.85rem 1.1rem;
    border-top: 1px solid var(--xt-line);
    border-bottom: 1px solid var(--xt-line);
    background: var(--xt-crema);
    border-radius: 6px;
}
.dash-control {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.dash-control.hidden { display: none; }
.dash-control-lab {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--xt-muted);
}
.dash-select {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--xt-carbon);
    background: transparent;
    border: 1px solid var(--xt-line);
    border-radius: 6px;
    padding: 0.4rem 0.7rem;
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.dash-select:hover { border-color: var(--xt-terracota); }
.dash-select:focus {
    outline: 2px solid var(--xt-terracota);
    outline-offset: 2px;
    border-color: var(--xt-terracota);
}
.dash-rango-label {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--xt-muted);
}

@media (max-width: 640px) {
    .dash-titulo { font-size: 1.6rem; }
    .dash-tabs { width: 100%; justify-content: stretch; }
    .dash-tab { flex: 1; padding: 0.6rem 0.5rem; font-size: 0.85rem; min-height: 44px; }
    .dash-rango-label { margin-left: 0; width: 100%; text-align: left; }

    /* Opt-in: barras con 4+ tabs usan .dash-tabs-scroll en lugar del flex:1
       stretch que aplasta etiquetas largas como "Factura global" o "Proveedores".
       Resultado: pills a ancho natural + scroll horizontal con snap + fade hint
       en el borde derecho. Llamar a _centrarTabActivo(btn) al cambiar de tab
       para que la activa quede centrada. */
    .dash-tabs.dash-tabs-scroll {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0;
        mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
    }
    .dash-tabs.dash-tabs-scroll::-webkit-scrollbar { display: none; }
    .dash-tabs.dash-tabs-scroll .dash-tab {
        flex: 0 0 auto !important;
        scroll-snap-align: start;
        padding: 0.6rem 1rem !important;
        font-size: 0.85rem !important;
        min-height: 44px;
        white-space: nowrap;
    }
    .dash-tabs.dash-tabs-scroll .dash-tab.is-active { scroll-snap-align: center; }
    /* Si la barra esta dentro de un dash-chrome-top, stack vertical para que
       las tabs tomen ancho completo (titulo arriba, tabs abajo). */
    .dash-chrome:has(.dash-tabs-scroll) .dash-chrome-top {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
    }
}

/* ============================================================
   STAT CHIPS — kpi compacto editorial (label mono + valor Fraunces)
   Usado arriba de charts (tendencia, día/hora) para resumir señales
   ============================================================ */
.stat-chips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.15rem;
}
.stat-chip {
    position: relative;
    padding: 0.85rem 1rem 0.95rem;
    border-radius: 12px;
    border: 1px solid var(--xt-line);
    background: var(--xt-crema);
    overflow: hidden;
}
.stat-chip.solid-jade { background: var(--xt-jade-dark, #00695C); color: var(--xt-crema); border-color: transparent; }
.stat-chip.solid-terracota { background: var(--xt-terracota-dark, #BF360C); color: var(--xt-crema); border-color: transparent; }
.stat-chip.solid-dark { background: var(--xt-carbon); color: var(--xt-crema); border-color: transparent; }
.stat-chip .lab {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 0.3rem;
}
.stat-chip .val {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.35rem;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.stat-chip .sub {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    opacity: 0.7;
    margin-top: 0.2rem;
    text-transform: uppercase;
}
/* Sobre los chips sólidos de color, al 92% (como .kpi-sub): al 70-75% el
   crema bajaba de AA. */
.stat-chip.solid-terracota .lab, .stat-chip.solid-terracota .sub,
.stat-chip.solid-jade .lab, .stat-chip.solid-jade .sub { opacity: 0.92; }

/* ============================================================
   BARRA STACKED HORIZONTAL — sustituye donuts (categorías, métodos)
   Layout: segmento[] + leaderboard lateral
   ============================================================ */
.stack-wrap { display: flex; flex-direction: column; gap: 1.1rem; }
.stack-bar {
    display: flex;
    height: 36px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--xt-crema-2);
}
.stack-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--xt-crema);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    transition: filter 0.15s ease;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 0.4rem;
}
.stack-seg:hover { filter: brightness(1.1); }
.stack-leaderboard {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem 1.2rem;
}
.stack-leaderboard li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.4rem 0;
    border-bottom: 1px dashed var(--xt-line);
    font-size: 0.85rem;
}
.stack-dot {
    width: 10px; height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}
.stack-name {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    color: var(--xt-carbon);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.stack-pct {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--xt-muted);
    min-width: 3rem;
    text-align: right;
}

/* ============================================================
   HEATMAP DÍA × HORA — versión mejorada con marginales y peak
   ============================================================ */
.hm-table {
    display: grid;
    grid-template-columns: 36px repeat(24, minmax(22px, 1fr)) 92px;
    gap: 3px;
    min-width: 780px;
}
.hm-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--xt-muted);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hm-cell {
    height: 24px;
    border-radius: 3px;
    background: var(--xt-crema-2);
    position: relative;
    transition: transform 0.12s ease;
}
.hm-cell:hover { transform: scale(1.18); z-index: 3; outline: 1px solid var(--xt-carbon); }
.hm-cell.peak {
    outline: 2px solid var(--xt-jade-dark);
    outline-offset: 1px;
}
.hm-total {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--xt-carbon);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.4rem;
    font-variant-numeric: tabular-nums;
}
.hm-total.col {
    font-size: 0.75rem;
    color: var(--xt-muted);
    justify-content: center;
    padding-right: 0;
    transform: rotate(-90deg);
    transform-origin: center;
}
.hm-legend {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--xt-muted);
    margin-top: 0.85rem;
}
.hm-scale {
    display: inline-flex;
    height: 10px;
    width: 120px;
    border-radius: var(--ficha-radius, 4px);
    background: linear-gradient(90deg, rgba(216,67,21,0.06), rgba(216,67,21,0.95));
}

/* ============================================================
   SEMÁFORO de inventario / alertas — fichas tipo card con barra
   ============================================================ */
.semaforo-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    max-height: clamp(280px, 60vh, 480px);
    overflow-y: auto;
    padding-right: 0.4rem;
}
.semaforo-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.4rem 1rem;
    align-items: center;
    padding: 0.8rem 1rem;
    background: var(--xt-crema-2);
    border-radius: var(--ficha-radius, 4px);
    border: 1px solid var(--xt-line);   /* el estado va en el color del borde completo */
    position: relative;
    overflow: hidden;
    flex-shrink: 0;  /* Evita que flex aplaste filas cuando hay muchas y el wrap tiene max-height */
}
.semaforo-row.critico { border-color: #C62828; background: rgba(198,40,40,0.06); }
.semaforo-row.bajo    { border-color: var(--xt-terracota); background: rgba(216,67,21,0.07); }
.semaforo-row.estable { border-color: var(--xt-jade); background: rgba(0,137,123,0.06); }
.semaforo-nombre {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--xt-carbon);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.semaforo-meta {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--xt-muted);
    grid-column: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.semaforo-valor {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--xt-carbon);
    text-align: right;
    font-variant-numeric: tabular-nums;
    grid-row: span 2;
    white-space: nowrap;
}
.semaforo-bar {
    grid-column: 1 / -1;
    height: 4px;
    border-radius: var(--ficha-radius, 4px);
    background: rgba(42,54,61,0.08);
    overflow: hidden;
}
.semaforo-bar > span {
    display: block;
    height: 100%;
    background: currentColor;
    border-radius: var(--ficha-radius, 4px);
}
.semaforo-row.critico .semaforo-bar > span { background: #C62828; }
.semaforo-row.bajo .semaforo-bar > span    { background: var(--xt-terracota); }
.semaforo-row.estable .semaforo-bar > span { background: var(--xt-jade); }

/* Móvil: tipografía más compacta + meta con menos letter-spacing para no overflow */
@media (max-width: 640px) {
    .semaforo-row { padding: 0.7rem 0.85rem; gap: 0.3rem 0.7rem; }
    .semaforo-nombre { font-size: 0.88rem; }
    .semaforo-valor  { font-size: 0.95rem; }
    .semaforo-meta   { font-size: 0.75rem; letter-spacing: 0.1em; }
}

/* Casillas y radios sin regla propia: color de marca en lugar del azul del
   navegador. :where() no suma especificidad, así que la regla de cada módulo
   (jade en Pedidos, terracota en Clientes, etc.) sigue mandando. */
:where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--xt-terracota); }