/* DIMACEA | Extraído de index.html | bloque CSS 6 */

:root {
            --kpi-money-size: clamp(1.45rem, 4.1vw, 3.15rem);
            --kpi-big-size: clamp(1.65rem, 4vw, 2.85rem);
            --kpi-mid-size: clamp(1.18rem, 2.6vw, 1.9rem);
            --card-pad-fluid: clamp(.65rem, 1.35vw, 1.2rem);
            --section-gap-fluid: clamp(.72rem, 1.7vw, 1.45rem);
            --header-title-size: clamp(1.05rem, 3vw, 1.9rem);
            --header-sub-size: clamp(.82rem, 2.25vw, 1.15rem);
        }

        /* ===== Textos numéricos seguros en cualquier pantalla ===== */
        #kpiVenta, #kpiTargetVal, #kpiProgressVal, #projClose, #projDaily, #kpiGapAmount,
        #kpiTicket, #headerEfec, #kpiMundialDeos, #kpiMundialMassSkin, #kpiMundialOral,
        #kpiMundialSkin, #kpiMundialInnov, #kpiMundialDeosMundialistas,
        #kpiDeos, #kpiDish, #kpiPep, #kpiSedal, #kpiSol {
            max-width: 100%;
            overflow-wrap: anywhere;
            word-break: break-word;
            line-height: 1.05;
            font-variant-numeric: tabular-nums;
        }
        #kpiVenta {
            font-size: var(--kpi-money-size) !important;
            letter-spacing: -0.045em;
            white-space: normal !important;
            text-align: center;
        }
        #kpiUniverso, #kpiCobertura, #kpiGap {
            font-size: var(--kpi-big-size) !important;
            line-height: 1 !important;
        }
        #headerTitle { font-size: var(--header-title-size) !important; }
        #headerVend { font-size: var(--header-sub-size) !important; }
        #headerEfec { font-size: clamp(1.25rem, 3vw, 2rem) !important; }

        #kpiMainSection > .card, #coreKpiSection > .card, #kpiMundialSection > .mundial-card,
        #chartsSection > .card, #noBuyCard, #buyCard, #weeklyCard, #deliveryControlCard, #topProductsCard {
            min-width: 0;
        }
        #kpiMainSection > .card, #coreKpiSection > .card, #kpiMundialSection > .mundial-card {
            padding: var(--card-pad-fluid) !important;
        }
        #kpiMainSection, #coreKpiSection, #kpiMundialSection, #chartsSection, .grid.grid-cols-1.xl\:grid-cols-3 {
            gap: var(--section-gap-fluid) !important;
        }

        /* ===== Venta Total: proyección ordenada y alineada ===== */
        #kpiMainSection > .card:first-child {
            overflow: hidden !important;
        }
        #kpiMainSection > .card:first-child .projection-box {
            width: 100%;
            min-width: 0;
            padding: clamp(.5rem, 1vw, .8rem) !important;
            display: grid;
            grid-template-columns: 1fr;
            gap: clamp(.32rem, .65vw, .5rem);
        }
        #kpiMainSection > .card:first-child .projection-box > div {
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) minmax(7.2rem, auto);
            align-items: center !important;
            column-gap: .65rem;
            row-gap: .25rem;
            padding: .18rem 0 .38rem;
        }
        #kpiMainSection > .card:first-child .projection-box > div:last-child {
            padding-bottom: 0;
        }
        #kpiMainSection > .card:first-child .projection-box > div > span:first-child {
            min-width: 0;
            display: inline-flex;
            align-items: center;
            gap: .25rem;
            white-space: normal !important;
            line-height: 1.15 !important;
        }
        #kpiMainSection > .card:first-child .projection-box > div > span:last-child {
            justify-self: end;
            min-width: 0;
            max-width: 100% !important;
            white-space: nowrap !important;
            text-align: right !important;
            padding: .22rem .48rem;
            border-radius: 999px;
            background: rgba(255,255,255,.78);
            border: 1px solid rgba(148,163,184,.28);
            box-shadow: 0 1px 2px rgba(15,23,42,.04);
            font-size: clamp(.68rem, 1.15vw, .78rem) !important;
            letter-spacing: -0.015em;
        }
        body.dark #kpiMainSection > .card:first-child .projection-box > div > span:last-child {
            background: rgba(15,23,42,.72) !important;
            border-color: rgba(71,85,105,.65) !important;
        }

        /* KPIs Core y Mundial */
        #coreKpiSection h3, #kpiMundialSection h3 { font-size: var(--kpi-mid-size) !important; }
        #coreKpiSection p, #kpiMundialSection p {
            font-size: clamp(.48rem, 1.2vw, .64rem) !important;
            line-height: 1.05 !important;
            white-space: normal;
        }
        #kpiMundialSection .mundial-card { min-height: clamp(94px, 11vw, 132px); }

        /* ===== DEOS Mundialistas: caja temática fútbol mundial 2026 ===== */
        .mundial-deos-card { gap: clamp(4px, .8vw, 7px); }
        .worldcup-2026-box {
            position: relative;
            width: 100%;
            margin-top: clamp(5px, .7vw, 8px);
            padding: clamp(7px, .9vw, 10px) clamp(7px, .95vw, 11px);
            border-radius: 14px;
            overflow: hidden;
            color: #ffffff;
            border: 1px solid rgba(255,255,255,.48);
            background:
                radial-gradient(circle at 50% 50%, rgba(255,255,255,.18) 0 7%, transparent 7.5% 100%),
                linear-gradient(90deg, transparent 49%, rgba(255,255,255,.28) 49.5% 50.5%, transparent 51%),
                linear-gradient(135deg, #15803d 0%, #16a34a 42%, #0f766e 100%);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.13), 0 8px 16px rgba(21,128,61,.16);
        }
        .worldcup-2026-box::before,
        .worldcup-2026-box::after {
            content: "";
            position: absolute;
            top: 24%;
            width: 22px;
            height: 52%;
            border: 1px solid rgba(255,255,255,.38);
            pointer-events: none;
        }
        .worldcup-2026-box::before { left: -7px; border-radius: 0 999px 999px 0; }
        .worldcup-2026-box::after { right: -7px; border-radius: 999px 0 0 999px; }
        .worldcup-2026-label {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            font-size: clamp(.44rem, 1.05vw, .56rem) !important;
            line-height: 1.05 !important;
            font-weight: 950;
            letter-spacing: .06em;
            text-transform: uppercase;
            text-shadow: 0 1px 2px rgba(0,0,0,.26);
            white-space: normal !important;
        }
        .worldcup-2026-chip {
            position: relative;
            z-index: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            margin-top: 4px;
            padding: 2px 7px;
            border-radius: 999px;
            background: rgba(255,255,255,.18);
            border: 1px solid rgba(255,255,255,.32);
            font-size: clamp(.42rem, .95vw, .52rem) !important;
            font-weight: 900;
            letter-spacing: .08em;
            text-transform: uppercase;
        }
        .worldcup-2026-value {
            position: relative;
            z-index: 1;
            margin-top: 4px;
            font-size: clamp(.95rem, 2.25vw, 1.2rem) !important;
            font-weight: 950;
            line-height: 1.05;
            color: #ffffff;
            text-shadow: 0 1px 3px rgba(0,0,0,.32);
        }
        .worldcup-2026-value span { font-size: 10px; opacity: .82; }
        .worldcup-2026-value div { color: #dcfce7 !important; font-size: 9px !important; margin-top: 1px !important; }
        body.dark .worldcup-2026-box {
            background:
                radial-gradient(circle at 50% 50%, rgba(255,255,255,.14) 0 7%, transparent 7.5% 100%),
                linear-gradient(90deg, transparent 49%, rgba(255,255,255,.22) 49.5% 50.5%, transparent 51%),
                linear-gradient(135deg, #065f46 0%, #047857 48%, #164e63 100%) !important;
            border-color: rgba(187,247,208,.38) !important;
        }

        /* Header responsive */
        header { gap: clamp(.5rem, 1.5vw, 1rem); }
        #headerButtons { flex-wrap: wrap; justify-content: flex-end; }
        #preventaDaysBadge, #headerDate, #modeTodayBtn, #modeDeliveryBtn, #modeGeneralBtn {
            max-width: 100%;
            white-space: normal !important;
            line-height: 1.15 !important;
        }
        .client-name, .client-sub, .delivery-products, #weeklyHitsList, #deliveryControlList, #listProd {
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        @media (min-width: 769px) and (max-width: 1366px) {
            main#mainContent header { padding: 1rem 1.25rem !important; }
            main#mainContent > .flex-1 { padding: 1rem !important; gap: 1rem !important; }
            #kpiMainSection { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
            #kpiMainSection > .card:first-child { grid-column: span 2 / span 2; }
            #kpiMainSection > .card:nth-child(2), #kpiMainSection > .card:nth-child(3), #kpiMainSection > .card:nth-child(4) { min-height: 180px; }
            #kpiVenta { font-size: clamp(1.65rem, 3.15vw, 2.6rem) !important; }
            #kpiMundialSection { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
        }
        @media (min-width: 769px) and (max-width: 1120px) {
            #sidebar { width: 17.5rem !important; }
            #kpiMainSection { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
            #kpiMainSection > .card:first-child { grid-column: span 2 / span 2; }
            #coreKpiSection, #kpiMundialSection { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
            #chartsSection { grid-template-columns: 1fr !important; height: auto !important; }
            #chartsSection > .card { height: 280px !important; }
            #kpiVenta { font-size: clamp(1.55rem, 4vw, 2.25rem) !important; }
        }
        @media (max-width: 768px) {
            body { overflow-x: hidden !important; }
            #mainContent > header { padding: .75rem .85rem !important; align-items: stretch !important; }
            #mainContent > header > div:first-child, #mainContent > header > div:last-child { width: 100% !important; align-items: stretch !important; text-align: left !important; }
            #headerButtons { justify-content: flex-start !important; }
            #preventaDaysBadge, #headerDate, #modeTodayBtn, #modeDeliveryBtn, #modeGeneralBtn { width: 100%; justify-content: center; }
            main#mainContent > .flex-1 { padding: .75rem !important; gap: .85rem !important; }
            #kpiMainSection { grid-template-columns: 1fr !important; }
            #kpiVenta { font-size: clamp(1.45rem, 8.5vw, 2.25rem) !important; letter-spacing: -0.04em; }
            #kpiMainSection > .card:first-child .flex.justify-between { flex-wrap: wrap; gap: .25rem; }
            #kpiMainSection > .card:first-child .projection-box > div { grid-template-columns: minmax(0, 1fr) minmax(6.4rem, auto); column-gap: .48rem; }
            #kpiMainSection > .card:first-child .projection-box > div > span:last-child { font-size: clamp(.64rem, 3.05vw, .78rem) !important; padding: .2rem .4rem; }
            #coreKpiSection, #kpiMundialSection { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
            #kpiMundialSection .mundial-card:last-child { grid-column: span 2 / span 2; }
            #chartsSection { grid-template-columns: 1fr !important; height: auto !important; }
            #chartsSection > .card { height: 260px !important; }
            .card-header { padding: .7rem .85rem !important; }
            .card-footer-fixed { padding: .55rem .85rem !important; }
        }
        @media (max-width: 380px) {
            #kpiVenta { font-size: clamp(1.25rem, 8vw, 1.75rem) !important; }
            #kpiUniverso, #kpiCobertura, #kpiGap { font-size: 1.65rem !important; }
            #coreKpiSection, #kpiMundialSection { gap: .55rem !important; }
            #coreKpiSection h3, #kpiMundialSection h3 { font-size: 1.05rem !important; }
            #kpiMundialSection .mundial-card { min-height: 108px; }
            .worldcup-2026-label { font-size: .42rem !important; }
            .worldcup-2026-value { font-size: .9rem !important; }
            #kpiMainSection > .card:first-child .projection-box > div { grid-template-columns: minmax(0, 1fr); }
            #kpiMainSection > .card:first-child .projection-box > div > span:last-child { justify-self: stretch; text-align: center !important; white-space: normal !important; }
            #modeTodayBtn, #modeDeliveryBtn, #modeGeneralBtn { font-size: .58rem !important; padding: .55rem .6rem !important; }
        }
        @media (min-width: 1600px) {
            main#mainContent > .flex-1 { max-width: 1680px; width: 100%; margin-left: auto; margin-right: auto; }
            #kpiVenta { font-size: 3.25rem !important; }
        }

        /* kpiVenta FIX v5: móvil OK, PC más aire a la derecha para verse profesional */
        #kpiVenta{
            width: 100%;
            display: block;
            text-align: center;
            padding: 0 16px 0 12px;   /* base: un poco más de aire a la derecha */
            box-sizing: border-box;
            white-space: nowrap !important;
            overflow-wrap: normal !important;
            word-break: keep-all !important;
            overflow: visible !important;
            max-width: 100%;
            transform-origin: 50% 50%;
            line-height: 1.02 !important;
        }
        @media (min-width: 768px){
            #kpiVenta{ padding-right: 28px; padding-left: 12px; }
        }
        @media (min-width: 1280px){
            #kpiVenta{ padding-right: 34px; }
        }