@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* Integration layer:
   - keeps legacy Bootstrap markup working
   - maps core UI elements to HH Design System tokens/components */

body {
    background: var(--hh-bg);
    color: var(--hh-text-1);
    font-family: var(--hh-font-sans);
}

:root {
    --bs-body-color: var(--hh-text-1);
    --bs-heading-color: var(--hh-text-1);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: var(--hh-text-1);
}

.text-dark,
.text-black,
.text-body {
    color: var(--hh-text-1) !important;
}

.text-secondary {
    color: var(--hh-text-2) !important;
}

.hh-page-shell {
    max-width: 100%;
}

.ds-main {
    width: 100% !important;
    max-width: none !important;
    /* min-width:0 — .ds-app es CSS Grid (grid-template-columns:240px 1fr, ver components.css)
       y una columna 1fr tiene min-width:auto por defecto: si algo adentro es intrínsecamente
       muy ancho (ej. tablas históricas con 50+ columnas de semanas en Inteligencia Comercial),
       TODA la columna crece para acomodarlo, ignorando el viewport — bug real "pantalla
       inmensa" (2026-09), reproducido y confirmado con .ds-main midiendo >5000px en vez de
       ~1900px. min-width:0 fuerza a que la columna respete el ancho del grid track y delega
       el overflow a los contenedores internos con overflow-x:auto, que ya lo manejan bien. */
    min-width: 0 !important;
    padding-left: var(--hh-space-10);
    padding-right: var(--hh-space-10);
}

.main-content {
    padding: var(--hh-space-10) 0;
}

.ds-page-header h3 {
    color: var(--hh-text-1);
    font-size: var(--hh-fs-h1);
    font-weight: var(--hh-fw-semibold);
    margin-bottom: var(--hh-space-3);
}

.breadcrumb {
    margin-bottom: 0;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: var(--hh-text-3);
    font-size: var(--hh-fs-data);
}

.breadcrumb-item.active {
    color: var(--hh-text-2);
}

.hh-brand-link {
    display: flex;
    align-items: center;
    gap: var(--hh-space-6);
    text-decoration: none;
    color: var(--hh-text-1);
}

.hh-sidebar-user {
    margin-top: auto;
    padding: var(--hh-space-8) var(--hh-space-8);
    border-top: 1px solid var(--hh-border-1);
}

.ds-brand {
    position: relative;
}

.hh-sidebar-toggle {
    position: absolute;
    right: var(--hh-space-8);
    top: var(--hh-space-8);
    width: 24px;
    height: 24px;
    border: 1px solid var(--hh-border-2);
    background: var(--hh-surface-2);
    color: var(--hh-text-2);
    cursor: pointer;
}

.hh-sidebar-toggle:hover {
    color: var(--hh-text-1);
    border-color: var(--hh-border-3);
}

.hh-mobile-topbar {
    display: none;
}

.hh-mobile-menu-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--hh-border-2);
    background: var(--hh-surface-2);
    color: var(--hh-text-2);
}

.hh-mobile-title {
    color: var(--hh-text-2);
    font-size: var(--hh-fs-body);
    font-weight: var(--hh-fw-semibold);
}

.hh-sidebar-overlay {
    display: none;
}

/* Feedback real de usuario (2026-09): "es difícil encontrar la flecha para
   abrirlo nuevamente" — el botón medía 24×56px con el mismo tono de fondo
   que el resto de la UI (--hh-surface-2) y sin sombra, así que se perdía
   contra el borde de la pantalla. Más ancho, color de marca (no un gris
   más que se mezcla con todo lo demás) y sombra para que "flote" y se lea
   como algo clickeable, no como una línea del borde de la ventana. */
.hh-sidebar-reopen {
    display: none;
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 64px;
    border: none;
    border-radius: 0 var(--hh-radius-md, 8px) var(--hh-radius-md, 8px) 0;
    background: var(--hh-brand-500);
    color: #fff;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.25);
    z-index: var(--hh-z-sticky);
    cursor: pointer;
    font-size: 15px;
}

.hh-sidebar-reopen:hover {
    background: var(--hh-brand-400, var(--hh-brand-500));
    box-shadow: 2px 0 14px rgba(0, 0, 0, 0.35);
}

.user-avatar {
    width: 24px;
    height: 24px;
    background: var(--hh-brand-500);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--hh-fs-micro);
    font-weight: var(--hh-fw-semibold);
    margin-right: var(--hh-space-4);
}

/* Bootstrap -> HH mapping */
.ds-page-header {
    margin-bottom: var(--hh-space-4) !important;
}

.main-content {
    padding-top: var(--hh-space-4) !important;
}

.card {
    background: var(--hh-surface-1);
    border: 1px solid var(--hh-border-1) !important;
    border-radius: 0;
    box-shadow: none !important;
}

.card-header,
.card-footer {
    background: var(--hh-surface-2) !important;
    border-color: var(--hh-border-1) !important;
    color: var(--hh-text-2);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--hh-text-2);
    --bs-table-border-color: var(--hh-border-1);
    --bs-table-hover-color: var(--hh-text-1);
    --bs-table-hover-bg: var(--hh-state-hover);
    font-size: var(--hh-fs-data);
}

.table thead th,
.table-light th,
.table-custom th {
    background: var(--hh-surface-2) !important;
    color: var(--hh-text-3) !important;
    text-transform: uppercase;
    letter-spacing: var(--hh-ls-wide);
    font-size: var(--hh-fs-label);
    border-bottom: 1px solid var(--hh-border-2) !important;
}

/* PT-05 / UX-05 — encabezado fijo, opt-in por tabla (no global: la mayoría de
   tablas del proyecto son cortas y no lo necesitan, y aplicarlo a ciegas a
   TODAS las tablas .table del proyecto sin poder verificar cada una visualmente
   es justo el tipo de cambio amplio que ya evitamos en PT-03/PT-11). El
   background ya viene del bloque de arriba (mismo selector .table thead th),
   así que solo hace falta agregar el position:sticky — sin duplicar color. */
.table-sticky-head thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.table-custom td {
    border-bottom: 1px solid var(--hh-border-1) !important;
}

.table-custom tr:hover {
    background-color: var(--hh-state-hover) !important;
}

.form-control,
.form-select {
    background: var(--hh-bg);
    border: 1px solid var(--hh-border-2);
    border-radius: 0;
    color: var(--hh-text-1);
    font-size: var(--hh-fs-data);
}

.form-control:focus,
.form-select:focus {
    background: var(--hh-bg);
    color: var(--hh-text-1);
    border-color: var(--hh-brand-500);
    box-shadow: none;
}

.form-label,
label {
    color: var(--hh-text-3);
    font-size: var(--hh-fs-label);
    text-transform: uppercase;
    letter-spacing: var(--hh-ls-wide);
}

.btn {
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: var(--hh-ls-wide);
    font-size: var(--hh-fs-nav);
    font-weight: var(--hh-fw-medium);
}

.btn-primary {
    background: var(--hh-brand-500);
    border-color: var(--hh-brand-500);
}

.btn-outline-secondary {
    color: var(--hh-text-2);
    border-color: var(--hh-border-2);
}

.btn-outline-secondary:hover {
    background: var(--hh-state-hover);
    color: var(--hh-text-1);
    border-color: var(--hh-border-3);
}

.nav-pills .nav-link {
    border-radius: 0;
    color: var(--hh-text-3);
    text-transform: uppercase;
    font-size: var(--hh-fs-nav);
    letter-spacing: var(--hh-ls-wide);
}

.nav-pills .nav-link.active {
    background: transparent;
    color: var(--hh-brand-300);
    border-bottom: 2px solid var(--hh-brand-500);
}

/* PT-08 / migración de sistema de diseño — este bloque original de
   ".nav-tabs -> HH Design System" (subrayado simple, borde inferior) fue
   ELIMINADO aquí (2026-09): con la misma especificidad de selector y
   !important en ambos lados, el bloque "S&OP MODERNIZATION LAYER" más
   abajo en este mismo archivo (línea ~1160, "Custom Slider Tabs Layout")
   siempre ganaba la cascada por aparecer después — este era código muerto
   que ningún módulo veía nunca, solo confundía a quien leyera el CSS
   pensando que ese era el estilo activo. Cero cambio visual al quitarlo:
   verificado que nada dependía de él (ninguna otra regla lo sobreescribía
   de vuelta) antes de borrarlo. El estilo de pestañas activo hoy es el
   "Custom Slider Tabs Layout" — pastillas redondeadas, fondo sólido en la
   activa — documentado ahí como única fuente de verdad para .nav-tabs. */

.badge {
    border-radius: 0;
}

.text-muted {
    color: var(--hh-text-3) !important;
}

/* Fix Dropdown menus */
.dropdown-menu {
    background-color: var(--hh-surface-4) !important;
    border-color: var(--hh-border-2) !important;
}

.dropdown-item {
    color: var(--hh-text-2) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--hh-surface-5) !important;
    color: var(--hh-text-1) !important;
}

.modal-content {
    background-color: var(--hh-surface-4);
    border-color: var(--hh-border-2);
    color: var(--hh-text-1);
}

.modal-header {
    border-bottom-color: var(--hh-border-1);
    color: var(--hh-text-1);
}

.modal-footer {
    border-top-color: var(--hh-border-1);
}

.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

html.light-theme .btn-close {
    filter: none;
}

.footer {
    background: transparent;
    border-top: 1px solid var(--hh-border-1);
    color: var(--hh-text-3);
    padding: var(--hh-space-10) 0;
    font-size: var(--hh-fs-data);
}

/* Fix specific custom classes from style.css */
.stat-title {
    color: var(--hh-text-2) !important;
}

.stat-value {
    color: var(--hh-text-1) !important;
}

.user-name {
    color: var(--hh-text-1) !important;
}

/* Fix specific modal texts from modules */
#miniPage {
    background-color: var(--hh-surface-4) !important;
    border-color: var(--hh-border-2) !important;
    color: var(--hh-text-1);
}

#miniPage h2 {
    color: var(--hh-text-1) !important;
}

#closeModal {
    color: var(--hh-text-2) !important;
}

#closeModal:hover {
    color: var(--hh-text-1) !important;
}

/* Desktop collapse */
body.hh-sidebar-collapsed .ds-app {
    /* minmax(0,1fr), no 1fr — este override reintroducía el min-width:auto del track
       con el sidebar colapsado. Ver nota en .ds-app (components.css). */
    grid-template-columns: 0 minmax(0, 1fr);
}

body.hh-sidebar-collapsed .ds-main {
    width: 100% !important;
    max-width: 100% !important;
}

body.hh-sidebar-collapsed .ds-sidebar {
    transform: translateX(-100%);
    overflow: hidden;
}

body.hh-sidebar-collapsed .hh-sidebar-reopen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.hh-sidebar-collapsed .hh-sidebar-toggle i {
    transform: rotate(180deg);
}

.ds-sidebar {
    transition: transform var(--hh-dur-normal) var(--hh-ease-standard);
}

/* Mobile behavior */
@media (max-width: 991.98px) {
    .ds-app {
        /* minmax(0,1fr), no 1fr — en móvil/tablet es aún más crítico: sin esto una tabla
           ancha estira el layout más allá del viewport del dispositivo. */
        grid-template-columns: minmax(0, 1fr);
    }

    .ds-sidebar {
        position: fixed;
        z-index: var(--hh-z-modal);
        width: 260px;
        max-width: 84vw;
        transform: translateX(-100%);
    }

    body.hh-sidebar-open .ds-sidebar {
        transform: translateX(0);
    }

    .hh-sidebar-toggle {
        display: none;
    }

    .hh-sidebar-reopen {
        display: none !important;
    }

    .hh-mobile-topbar {
        display: flex;
        align-items: center;
        gap: var(--hh-space-6);
        padding: var(--hh-space-6) var(--hh-space-4);
        border-bottom: 1px solid var(--hh-border-1);
        margin-bottom: var(--hh-space-4);
        position: sticky;
        top: 0;
        z-index: var(--hh-z-sticky);
        background: var(--hh-bg);
    }

    .hh-sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: calc(var(--hh-z-modal) - 1);
    }

    body.hh-sidebar-open .hh-sidebar-overlay {
        display: block;
    }
}

/* Light Theme Token Overrides */
html.light-theme {
    /* Superficies Light - Softened to avoid glaring pure white */
    --hh-bg: #f1f5f9;
    /* slate-100 */
    --hh-surface-1: #f8fafc;
    /* slate-50 (off-white, prevents eye strain) */
    --hh-surface-2: #f1f5f9;
    /* slate-100 */
    --hh-surface-3: #e2e8f0;
    /* slate-200 */
    --hh-surface-4: #cbd5e1;
    /* slate-300 */
    --hh-surface-5: #94a3b8;

    --hh-border-1: rgba(0, 0, 0, 0.06);
    --hh-border-2: rgba(0, 0, 0, 0.10);
    --hh-border-3: rgba(0, 0, 0, 0.15);
    --hh-border-4: rgba(0, 0, 0, 0.22);

    --hh-text-1: #0f172a;
    --hh-text-2: #334155;
    /* PT-02 / UX-03 — #64748b medía 4.55:1 sobre surface-1 (#f8fafc): pasa AA por un
       margen tan chico que el antialiasing de fuente puede tirarlo por debajo en la
       práctica. Oscurecido a #4f6270 (6.06:1 sobre surface-1, 5.14:1 sobre surface-3/4)
       sin cambiar el tono (mismo gris-azulado). */
    --hh-text-3: #4f6270;
    --hh-text-4: #94a3b8;
    --hh-text-inverse: #ffffff;

    --hh-glass-bg-dark: var(--hh-glass-bg-light);
    --hh-glass-border-dark: var(--hh-glass-border-light);

    --hh-state-hover: rgba(0, 0, 0, 0.04);
    --hh-state-focus: rgba(0, 0, 0, 0.08);
    --hh-state-select: rgba(65, 118, 141, 0.10);

    /* 2026-08-20 — success/warning/info/alert nunca tenían variante de tema claro (mismo
       valor fijo que oscuro, ver base en hh-design-system.css) — contra --hh-surface-5
       (#94a3b8, un gris-azul MEDIO) esos tonos de saturación media casi desaparecen
       (hallazgo real, módulo Inteligencia Comercial: "casi no se ve el dato de fondo").
       Variantes más oscuras/saturadas específicas para claro — mismo criterio que ya
       aplican --hh-text-*/--hh-border-* arriba en este bloque, ahora también para los
       colores de estado. --hh-danger NO se toca (ya se usa en toda la plataforma sobre
       fondos planos donde #dd5555 sí tiene contraste suficiente; homologarlo a un rojo más
       oscuro aquí cambiaría el tono visible en docenas de pantallas sin que nadie lo haya
       pedido — un módulo que necesite más contraste puede definir su propia variante local,
       como ya hace Inteligencia Comercial). */
    --hh-success: #0f766e;
    --hh-warning: #a16207;
    --hh-info: #0e7490;
    --hh-alert: #b45309;
}

/* ─── GOOGLE CHARTS RESPONSIVE TABLES ─── */
.google-visualization-table-table {
    background-color: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.cssHeaderRow {
    background-color: var(--hh-surface-2) !important;
}

.cssHeaderCell {
    background: var(--hh-surface-2) !important;
    color: var(--hh-text-2) !important;
    font-family: var(--hh-font-sans) !important;
    font-size: var(--hh-fs-label) !important;
    font-weight: var(--hh-fw-semibold) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--hh-ls-wide) !important;
    padding: var(--hh-space-6) var(--hh-space-8) !important;
    border-bottom: 2px solid var(--hh-border-2) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    text-align: left;
    /* Sticky Top Header */
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08) !important;
}

.cssTableRow {
    background-color: var(--hh-surface-1) !important;
    color: var(--hh-text-2) !important;
    transition: background-color var(--hh-dur-quick) var(--hh-ease-standard);
}

.cssOddTableRow {
    background-color: var(--hh-bg) !important;
    color: var(--hh-text-2) !important;
    transition: background-color var(--hh-dur-quick) var(--hh-ease-standard);
}

.cssTableCell {
    font-family: var(--hh-font-sans) !important;
    font-size: var(--hh-fs-data) !important;
    color: var(--hh-text-2) !important;
    padding: var(--hh-space-5) var(--hh-space-8) !important;
    border-bottom: 1px solid var(--hh-border-1) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    vertical-align: middle !important;
}

/* Distinguished First Column (Labels) - Sticky Left */
.cssTableCell:first-child {
    background-color: var(--hh-surface-2) !important;
    color: var(--hh-text-1) !important;
    font-weight: var(--hh-fw-semibold) !important;
    border-right: 1.5px solid var(--hh-border-3) !important;
    text-align: left !important;
    position: sticky !important;
    left: 0 !important;
    z-index: 9 !important;
    box-shadow: 2px 0 5px rgba(0,0,0,0.05) !important;
}

.cssHeaderCell:first-child {
    border-right: 1.5px solid var(--hh-border-3) !important;
    position: sticky !important;
    left: 0 !important;
    z-index: 11 !important; /* Higher than regular headers & cell labels */
}

.cssTableCell.google-visualization-table-type-number,
.cssTableCell.num {
    font-family: var(--hh-font-mono) !important;
    color: var(--hh-text-1) !important;
    font-weight: var(--hh-fw-medium) !important;
    text-align: right !important;
}

.cssRowNumberCell {
    font-family: var(--hh-font-mono) !important;
    font-size: var(--hh-fs-micro) !important;
    color: var(--hh-text-3) !important;
    background-color: var(--hh-surface-2) !important;
    border-bottom: 1px solid var(--hh-border-1) !important;
    border-right: 1px solid var(--hh-border-1) !important;
    text-align: center !important;
    padding: var(--hh-space-5) var(--hh-space-8) !important;
}

.cssHoverTableRow,
.cssTableRow:hover,
.cssOddTableRow:hover {
    background-color: var(--hh-surface-3) !important;
}

.cssSelectedTableRow {
    background-color: var(--hh-surface-4) !important;
}

.cssSelectedTableRow .cssTableCell {
    color: var(--hh-brand-400) !important;
}


/* ─── VISUAL HIERARCHY FOR ROW RUBROS ─── */
/* Parent rows (Headers of each section) */
#Venta_on,
#Inv_on,
#Invf_on,
#Ped_on,
#Comp_on,
#Cu_on,
#Venta_or,
#Inv_or,
#Invf_or,
#Ped_or,
#Comp_or,
#Cu_or {
    /* background-color: var(--hh-surface-2, #1d1d1d) !important; Removido para permitir los colores por bloque */
    font-weight: var(--hh-fw-semibold, 600) !important;
}

#Venta_on td:first-child,
#Inv_on td:first-child,
#Invf_on td:first-child,
#Ped_on td:first-child,
#Comp_on td:first-child,
#Cu_on td:first-child,
#Venta_or td:first-child,
#Inv_or td:first-child,
#Invf_or td:first-child,
#Ped_or td:first-child,
#Comp_or td:first-child,
#Cu_or td:first-child {
    color: var(--hh-text-1, #ffffff) !important;
    font-weight: var(--hh-fw-semibold, 600) !important;
    font-size: var(--hh-fs-body, 13px) !important;
}

/* Eye icon layout */
#Venta_on td:first-child i,
#Inv_on td:first-child i,
#Invf_on td:first-child i,
#Comp_on td:first-child i {
    margin-left: 8px;
    color: var(--hh-brand-300, #80a4b3);
}

/* Child rows (Indented / Muted sub-metrics) */
.venta_on td:first-child,
.venta_or td:first-child,
.inv_on td:first-child,
.inv_or td:first-child,
.comp_on td:first-child,
.comp_or td:first-child,
.comp_rp td:first-child,
.invf_on td:first-child,
.invf_or td:first-child {
    padding-left: 24px !important;
    /* Visual indentation */
    font-size: var(--hh-fs-data, 12px) !important;
    color: var(--hh-text-3, #999999) !important;
}

/* Accent borders to group related metrics */
.venta_on,
.venta_or {
    border-left: 3px solid var(--hh-success, #44aa99) !important;
}

.inv_on,
.inv_or {
    border-left: 3px solid var(--hh-info, #80a4b3) !important;
}

.comp_on,
.comp_or,
.comp_rp {
    border-left: 3px solid var(--hh-warning, #ddaa44) !important;
}

.invf_on,
.invf_or {
    border-left: 3px solid var(--hh-danger, #dd5555) !important;
}

/* ─── EXTREMELY WIDE TABLE LAYOUT ADAPTATION ─── */
/* Force wrappers to scroll cleanly in styled cards */
#table,
#table-ajustado,
#table-ajustado-y2,
#table-ajustado1,
#table-ajustado1-y2,
#table-pedido,
#table-pedido1,
#table-porcentaje,
#table-detail_ped {
    width: 100%;
    overflow-x: auto !important;
    border: 1px solid var(--hh-border-2) !important;
    background-color: var(--hh-surface-1) !important;
    border-radius: 8px !important;
    box-shadow: var(--hh-elev-2) !important;
    margin-bottom: 20px !important;
}

/* Google Table layout density optimization */
.cssTableCell,
.cssHeaderCell {
    white-space: nowrap !important;
    padding: 8px 12px !important;
    /* Premium spacing density */
}

/* Highlights for Total Columns to distinguish years (28-column structure) */
.cssTableCell:nth-child(14),
.cssHeaderCell:nth-child(14) {
    border-right: 2px solid var(--hh-border-3) !important;
    background-color: var(--hh-surface-3) !important;
    font-weight: var(--hh-fw-semibold) !important;
}

.cssTableCell:nth-child(27),
.cssHeaderCell:nth-child(27) {
    border-right: 2px solid var(--hh-border-3) !important;
    background-color: var(--hh-surface-3) !important;
    font-weight: var(--hh-fw-semibold) !important;
}

.cssTableCell:nth-child(28),
.cssHeaderCell:nth-child(28) {
    background-color: var(--hh-surface-4) !important;
    /* Brand highlighting for final total */
    font-weight: var(--hh-fw-semibold) !important;
    color: var(--hh-text-1) !important;
}

/* Reset for consolidated tables where quarters shift the column indices */
[data-consolidated="true"] .cssTableCell:nth-child(14),
[data-consolidated="true"] .cssHeaderCell:nth-child(14),
[data-consolidated="true"] .cssTableCell:nth-child(27),
[data-consolidated="true"] .cssHeaderCell:nth-child(27),
[data-consolidated="true"] .cssTableCell:nth-child(28),
[data-consolidated="true"] .cssHeaderCell:nth-child(28) {
    background-color: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    border-right: 1px solid var(--hh-border-2) !important;
}

/* For consolidated tables, the TOTAL column is pushed to the very end (index 18 for single year, etc.) */
[data-consolidated="true"] .cssTableCell:last-child,
[data-consolidated="true"] .cssHeaderCell:last-child {
    background-color: var(--hh-surface-3) !important;
    font-weight: var(--hh-fw-semibold) !important;
    color: var(--hh-text-1) !important;
    border-left: 2px solid var(--hh-border-3) !important;
}

/* ─── FULL WIDTH TABS GRAPHICS ADAPTATION ─── */
.graphic,
#contenedor-grafica {
    width: 100% !important;
    max-width: 100% !important;
}

#item1,
#item1_cr,
#item2,
#item3 {
    width: 100% !important;
    min-height: 420px;
    background-color: var(--hh-surface-1);
    border: 1px solid var(--hh-border-2);
    padding: var(--hh-space-4);
    margin-bottom: var(--hh-space-6);
    border-radius: 8px;
    box-shadow: var(--hh-elev-2);
}

/* ─── PREMIUM FILTERS MODAL STYLING (HH DESIGN SYSTEM) ─── */
#filters .modal-content {
    background-color: var(--hh-surface-2) !important;
    border: 1px solid var(--hh-border-2) !important;
    border-radius: 12px !important;
    box-shadow: var(--hh-elev-4) !important;
}

#filters .modal-header {
    border-bottom: 1px solid var(--hh-border-2) !important;
    padding: 16px 24px !important;
}

#filters .modal-header .modal-title {
    font-weight: 700 !important;
    color: var(--hh-text-1) !important;
    font-size: 1.1rem !important;
}

#filters .modal-body {
    padding: 24px !important;
}

#filters .modal-footer {
    border-top: 1px solid var(--hh-border-2) !important;
    padding: 16px 24px !important;
}

/* Section Title Headers */
.filter-section-header {
    border-left: 3px solid var(--hh-brand-400);
    /* Brand Indicator */
    padding-left: 10px;
    margin-top: 20px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}

.filter-section-title {
    font-size: var(--hh-fs-body) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--hh-text-1) !important;
}

/* Input & Select Box styling */
#filters .form-label {
    font-size: var(--hh-fs-data) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--hh-text-3) !important;
    margin-bottom: 6px !important;
}

#filters select.form-select,
#filters select.form-control {
    background-color: var(--hh-surface-1) !important;
    color: var(--hh-text-1) !important;
    border: 1px solid var(--hh-border-2) !important;
    border-radius: 6px !important;
    font-family: var(--hh-font-sans) !important;
    font-size: var(--hh-fs-body) !important;
    padding: 6px 10px !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

#filters select.form-select:focus,
#filters select.form-control:focus {
    border-color: var(--hh-brand-400) !important;
    box-shadow: 0 0 0 2px var(--hh-state-select) !important;
}

/* Multiselect lists height and styling */
#filters select[multiple] {
    height: 190px !important;
    padding: 8px !important;
    border: 1px solid var(--hh-border-2) !important;
    background-color: var(--hh-surface-1) !important;
    color: var(--hh-text-1) !important;
    border-radius: 8px !important;
}

/* Styled thin scrollbars for modern look */
#filters select[multiple]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
#filters select[multiple]::-webkit-scrollbar-track {
    background: transparent;
}
#filters select[multiple]::-webkit-scrollbar-thumb {
    background: var(--hh-border-3);
    border-radius: 4px;
}
#filters select[multiple]::-webkit-scrollbar-thumb:hover {
    background: var(--hh-brand-500);
}

#filters select[multiple] option {
    padding: 8px 12px !important;
    border-radius: 6px !important;
    margin-bottom: 3px !important;
    font-size: 12.5px !important;
    color: var(--hh-text-2) !important;
    transition: all 0.15s ease !important;
}

#filters select[multiple] option:hover {
    background-color: var(--hh-state-hover) !important;
    color: var(--hh-text-1) !important;
    cursor: pointer;
}

#filters select[multiple] option:checked {
    background-color: var(--hh-brand-500) !important;
    color: #ffffff !important;
}

/* Styled search input inside multiselect lists */
#filters .form-control[name="q"] {
    background-color: var(--hh-surface-2) !important;
    border: 1px solid var(--hh-border-2) !important;
    color: var(--hh-text-1) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: var(--hh-fs-body) !important;
    margin-bottom: 8px !important;
    width: 100% !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
#filters .form-control[name="q"]:focus {
    border-color: var(--hh-brand-500) !important;
    box-shadow: 0 0 0 2px var(--hh-state-select) !important;
    outline: none !important;
}

#filters .input-group-addon {
    display: block;
    font-size: var(--hh-fs-nav) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hh-text-3);
    margin-bottom: 8px !important;
    font-weight: 700;
}

/* Middle Transfer Buttons Layout */
#filters .d-flex.flex-row.flex-md-column.justify-content-center.gap-2.mb-2 button {
    font-size: var(--hh-fs-h3) !important;
    font-weight: 500 !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    border: 1px solid var(--hh-border-2) !important;
    color: var(--hh-text-2) !important;
    background-color: var(--hh-surface-2) !important;
    transition: all 0.2s ease !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#filters .d-flex.flex-row.flex-md-column.justify-content-center.gap-2.mb-2 button:hover {
    background-color: var(--hh-brand-500) !important;
    border-color: var(--hh-brand-500) !important;
    color: #ffffff !important;
    transform: scale(1.02);
}

/* ─── ALTERNATING S&OP SECTION CARDS ─── */
.sop-section-card {
    padding: 20px !important;
    border-radius: 12px !important;
    border: 1px solid var(--hh-border-2) !important;
    margin-bottom: 24px !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.sop-section-card:hover {
    box-shadow: var(--hh-elev-3) !important;
}

.sop-section-card:nth-of-type(odd) {
    background-color: var(--hh-surface-1) !important;
}

.sop-section-card:nth-of-type(even) {
    background-color: var(--hh-surface-2) !important;
}

/* ─── PRINT OPTIMIZATION (DASHBOARDS & WIDE TABLES) ─── */
@media print {
    @page {
        size: portrait;
        margin: 10mm;
    }

    body,
    html {
        background: var(--hh-bg) !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Hide Navigation, Sidebars, and Interactive Buttons */
    .ds-sidebar,
    .ds-page-header,
    .hh-page-shell>header,
    .btn,
    button,
    #filters,
    .nav-tabs,
    .modal {
        display: none !important;
    }

    /* Expand the shell */
    .hh-page-shell {
        margin-left: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* Fix Wide Tables & Scrollable containers */
    .table-responsive,
    #table,
    #table-ajustado,
    #table-ajustado-y2,
    #table-ajustado1,
    #table-ajustado1-y2,
    div[style*="overflow"] {
        overflow: visible !important;
        overflow-x: visible !important;
        width: 100% !important;
        max-width: none !important;
        white-space: normal !important;
    }

    /* Ensure Google Charts render correctly in print */
    .google-visualization-table-table {
        page-break-inside: auto;
    }

    .cssTableRow,
    .cssHoverTableRow {
        page-break-inside: avoid;
        page-break-after: auto;
    }

    /* Cards break correctly */
    .card,
    .sop-section-card {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        border: 1px solid var(--hh-border-2) !important;
        box-shadow: none !important;
    }
}

/* ─── S&OP TABLET RESPONSIVE OPTIMIZATIONS (FASE 3.4) ─── */
@media (max-width: 1024px) {
    /* 2x2 grid format for KPIs */
    #sop-kpi-container .row > div {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        margin-bottom: var(--hh-space-4) !important;
    }
    
    /* Full screen filter modal */
    #filters .modal-dialog {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        height: 100vh !important;
    }
    #filters .modal-content {
        height: 100% !important;
        border-radius: 0 !important;
        border: none !important;
    }
    #filters .modal-body {
        max-height: calc(100vh - 120px) !important;
        overflow-y: auto !important;
    }
    
    /* Tighten table density for medium screens */
    .cssHeaderCell, .cssTableCell, .hh-table th, .hh-table td {
        font-size: var(--hh-fs-nav) !important;
        padding: 6px 8px !important;
    }
}

/* Trimestral Consolidated Styling */
.col-quarter-header {
    background-color: var(--hh-surface-3) !important;
    color: var(--hh-text-1) !important;
    border-right: 1px solid var(--hh-border-2) !important;
    border-left: 1px solid var(--hh-border-2) !important;
}

td[class*="-quarter"] {
    background-color: var(--hh-surface-2) !important;
    color: var(--hh-brand-400) !important;
    font-weight: bold !important;
    border-right: 1px solid var(--hh-border-2) !important;
    border-left: 1px solid var(--hh-border-2) !important;
}

/* ==========================================================================
   S&OP MODERNIZATION LAYER (Fase 1: Premium Glassmorphism & Grid Interaction)
   ========================================================================== */

/* 1. Glassmorphic Exec KPIs (.hh-kpi) */
.hh-kpi {
    background: var(--hh-surface-1) !important;
    border: 1px solid var(--hh-border-2) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.hh-kpi:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.15), 0 8px 8px -5px rgba(0, 0, 0, 0.08) !important;
    border-color: var(--hh-brand-400) !important;
}

/* 2. Custom Slider Tabs Layout for .nav-tabs
   PT-08 — única definición de .nav-tabs en el proyecto (2026-09: se eliminó
   un segundo bloque más arriba en este archivo que nunca ganaba la cascada
   — ver la nota donde vivía, cerca de .nav-pills). Cualquier cambio al
   estilo de tabs va aquí, no se vuelve a duplicar en otro lado. */
.nav-tabs {
    border-bottom: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 6px !important;
    background-color: var(--hh-surface-2) !important;
    border: 1px solid var(--hh-border-1) !important;
    border-radius: 12px !important;
    margin-bottom: 24px !important;
}

.nav-tabs .nav-link {
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 18px !important;
    font-weight: 600 !important;
    color: var(--hh-text-3) !important;
    background-color: transparent !important;
    transition: all 0.2s ease-in-out !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

.nav-tabs .nav-link:hover {
    color: var(--hh-text-1) !important;
    background-color: var(--hh-state-hover) !important;
}

.nav-tabs .nav-link.active {
    color: #ffffff !important;
    background-color: var(--hh-brand-500) !important;
    box-shadow: 0 4px 12px rgba(78, 115, 223, 0.25) !important;
}

/* 3. Floating Filter Summary Bar (#sticky-filter-summary) */
#sticky-filter-summary {
    background-color: var(--hh-surface-2) !important;
    border: 1px solid var(--hh-border-2) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
    backdrop-filter: blur(10px) !important;
    padding: 8px 16px !important;
    margin-bottom: 12px !important;
    transition: all 0.2s ease !important;
}

#sticky-filter-summary i.fa-filter {
    background: rgba(78, 115, 223, 0.1) !important;
    padding: 8px !important;
    border-radius: 8px !important;
}

/* 4. Crosshair Column Highlights (.hh-col-hover) */
.hh-col-hover {
    background-color: var(--hh-state-hover) !important;
    position: relative;
}

/* 5. Escala de "Cumplimiento" (5 estados) — pedido 2026-09-13: pasada de
   UI/UX en Intelligence Básicos MF + Resurtido Básico. Esta escala vivía
   hardcodeada y ligeramente distinta en 3 lugares (basicos-mf/index.php,
   basico/index.php x2) con hex de Bootstrap que nunca se retonaban para
   light-theme. Se centraliza aquí, con tokens reales que sí cambian entre
   temas, para que cualquier módulo futuro con el mismo patrón (rojo<50% /
   naranja<70% / amarillo<90% / verde<=100% / azul>100%) la reutilice en
   vez de volver a copiar hex sueltos. */
.hh-cum-rojo     { background: var(--hh-danger-bg);   color: var(--hh-danger); }
.hh-cum-naranja  { background: var(--hh-alert-bg);    color: var(--hh-alert); }
.hh-cum-amarillo { background: var(--hh-warning-bg);  color: var(--hh-warning); }
.hh-cum-verde    { background: var(--hh-success-bg);  color: var(--hh-success); }
.hh-cum-azul     { background: var(--hh-state-select); color: var(--hh-brand-500); }

/* Make table headers sticky in scroll wrappers */
.table-responsive {
    position: relative;
    max-height: 70vh;
}

/* Premium rounding for visual container sections */
.sop-section-card {
    background-color: var(--hh-surface-1) !important;
    border: 1px solid var(--hh-border-2) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.sop-section-card:hover {
    border-color: var(--hh-border-3) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08) !important;
}

/* Styling for data summary badges */
.badge.bg-secondary {
    background-color: var(--hh-surface-3) !important;
    color: var(--hh-text-2) !important;
    border: 1px solid var(--hh-border-2) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: var(--hh-fs-nav) !important;
    font-weight: 600 !important;
}

/* =========================================================================
   S&OP MODERNIZATION: GLASSMORPHISM CONTROL BAR, ACTION DOCK & HEATMAPS
   ========================================================================= */

/* 1. Glassmorphism Control Bar */
.sop-control-bar {
    position: sticky !important;
    top: 0;
    z-index: 100;
    background-color: rgba(30, 30, 45, 0.8) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 12px 20px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.light-theme .sop-control-bar {
    background-color: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08) !important;
}

/* Select indicators and buttons inside the Control Bar */
.sop-control-select {
    background-color: var(--hh-surface-2) !important;
    color: var(--hh-text-1) !important;
    border: 1px solid var(--hh-border-2) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: var(--hh-fs-body) !important;
    font-weight: 600 !important;
    outline: none !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.sop-control-select:focus {
    border-color: var(--hh-brand-500) !important;
    box-shadow: 0 0 0 2px rgba(78, 115, 223, 0.25) !important;
}

/* 2. Floating Action Dock (Bottom Actions Bar) */
.sop-action-dock {
    position: fixed !important;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    z-index: 1040;
    opacity: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: rgba(21, 21, 33, 0.85) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    padding: 12px 24px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease !important;
}

.light-theme .sop-action-dock {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) !important;
}

.sop-action-dock.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.sop-dock-text {
    font-size: var(--hh-fs-body) !important;
    font-weight: 600 !important;
    color: var(--hh-text-1) !important;
    margin-right: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 3. Heatmap & Table Formatting */
/* Formato condicional pastel (Heatmaps) */
.cell-optimal {
    background-color: rgba(34, 197, 94, 0.15) !important;
    color: #4ade80 !important;
    font-weight: 600 !important;
}

.light-theme .cell-optimal {
    background-color: rgba(22, 163, 74, 0.1) !important;
    color: #15803d !important;
}

.cell-warning {
    background-color: rgba(234, 179, 8, 0.15) !important;
    color: #facc15 !important;
    font-weight: 600 !important;
}

.light-theme .cell-warning {
    background-color: rgba(202, 138, 4, 0.1) !important;
    color: #854d0e !important;
}

.cell-danger {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    font-weight: 600 !important;
}

.light-theme .cell-danger {
    background-color: rgba(220, 38, 38, 0.1) !important;
    color: #b91c1c !important;
}

/* Fila de fórmulas / Solo Lectura */
.row-calculated {
    background-color: var(--hh-surface-2) !important;
    opacity: 0.85;
}

.row-calculated td {
    font-weight: 500 !important;
    color: var(--hh-text-2) !important;
}

/* Resaltado de inputs en edición */
.tr-presupuesto-row input.form-control {
    background-color: var(--hh-surface-1) !important;
    color: var(--hh-text-1) !important;
    border: 1px solid var(--hh-border-2) !important;
    border-radius: 6px !important;
    font-family: var(--hh-font-sans) !important;
    font-size: var(--hh-fs-body) !important;
    padding: 4px 8px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.tr-presupuesto-row input.form-control:focus,
.tr-presupuesto-row input.inputd:focus {
    background-color: rgba(78, 115, 223, 0.05) !important;
    border-bottom: 2px solid var(--hh-brand-500) !important;
    border-color: var(--hh-brand-500) !important;
    box-shadow: 0 0 0 2px rgba(78, 115, 223, 0.15) !important;
    outline: none !important;
}

/* S&OP Welcome & Empty States Dashboard Layout */
body:not(.sop-searched) .sop-section-card {
    display: none !important;
}

body.sop-searched .sop-welcome-state {
    display: none !important;
}

.sop-welcome-state {
    border: 1px dashed var(--hh-border-3) !important;
    background-color: var(--hh-surface-1) !important;
    box-shadow: var(--hh-elev-2) !important;
    transition: all 0.3s ease;
}

.sop-welcome-state:hover {
    border-color: var(--hh-brand-400) !important;
    box-shadow: var(--hh-elev-3) !important;
}

/* S&OP Header alignment & card-in-card visual clean up */
.card-header.d-flex.flex-column {
    align-items: stretch !important;
}

.card-header .nav-tabs {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
}


.card-header .sop-control-bar,
.light-theme .card-header .sop-control-bar {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
}

/* Ensure quick filter selectors don't wrap too aggressively */
.sop-control-select {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    border-radius: 6px !important;
    font-size: var(--hh-fs-data) !important;
}

/* Flex layout tweaks inside card-header toolbar row */
.sop-control-bar #quick-sync,
.sop-control-bar #quick-consult,
.sop-control-bar #toggle-charts {
    height: 32px;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    display: inline-flex;
    align-items: center;
}

/* ─── S&OP SIDE COMMENTS DRAWER & INDICATORS ─── */
.sop-drawer {
    position: fixed !important;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100vh;
    z-index: 1050;
    background-color: rgba(21, 21, 33, 0.95) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.light-theme .sop-drawer {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.08);
}

.sop-drawer.show {
    right: 0 !important;
}

.sop-drawer-header {
    padding: 20px;
    border-bottom: 1px solid var(--hh-border-1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sop-drawer-body {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sop-cell-context {
    background-color: var(--hh-surface-2);
    border-radius: 12px;
    padding: 12px 16px;
    border: 1px solid var(--hh-border-2);
}

.sop-audit-timeline, .sop-comments-list {
    max-height: 160px;
    overflow-y: auto;
    border: 1px solid var(--hh-border-2);
    border-radius: 8px;
    background: var(--hh-surface-1);
    padding: 8px;
}

/* Styled thin scrollbars for drawers */
.sop-audit-timeline::-webkit-scrollbar, 
.sop-comments-list::-webkit-scrollbar {
    width: 4px;
}
.sop-audit-timeline::-webkit-scrollbar-thumb, 
.sop-comments-list::-webkit-scrollbar-thumb {
    background: var(--hh-border-3);
    border-radius: 4px;
}

.timeline-item, .comment-item {
    padding: 8px;
    border-bottom: 1px dashed var(--hh-border-2);
    font-size: 11.5px;
    line-height: 1.4;
}

.timeline-item:last-child, .comment-item:last-child {
    border-bottom: none;
}

.comment-meta {
    font-size: 10px;
    color: var(--hh-text-3);
    margin-bottom: 2px;
}

/* Comments Triangle Badge in Grid */
.cell-has-comment {
    position: relative !important;
}

.cell-has-comment::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    border-width: 0 8px 8px 0 !important;
    border-color: transparent var(--hh-warning) transparent transparent !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

/* Glassmorphism Estandarizado */
.hh-glass {
    backdrop-filter: var(--hh-glass-blur) !important;
    -webkit-backdrop-filter: var(--hh-glass-blur) !important;
}
html.light-theme .hh-glass {
    background-color: var(--hh-glass-bg-light) !important;
    border-color: var(--hh-glass-border-light) !important;
}
html:not(.light-theme) .hh-glass {
    background-color: var(--hh-glass-bg-dark) !important;
    border-color: var(--hh-glass-border-dark) !important;
}

/* ────────────────────────────────────────────────────────────────────────
   Shared Multiselect Premium Styles
──────────────────────────────────────────────────────────────────────── */
.ci-ms-wrapper { position: relative; display: inline-block; min-width: 140px; font-family: var(--font-sans, var(--hh-font-sans)); }
.ci-ms-btn { 
  display: flex; align-items: center; justify-content: space-between; 
  height: 28px; padding: 0 10px; border-radius: 4px; border: 0.5px solid var(--ci-border2, var(--hh-border-2)); 
  background: var(--ci-surface, var(--hh-surface-1)); cursor: pointer; user-select: none; transition: border-color 0.2s; 
}
.ci-ms-btn:hover { border-color: var(--ci-brand, var(--hh-brand-500)); }
.ci-ms-wrapper.open .ci-ms-btn { border-color: var(--ci-brand, var(--hh-brand-500)); box-shadow: 0 0 0 2px rgba(108,92,231,.18); }
.ci-ms-label { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; color: var(--ci-text1, var(--hh-text-1)); }
.ci-ms-caret { font-size: 10px; color: var(--ci-text3, var(--hh-text-3)); transition: transform 0.2s; }
.ci-ms-wrapper.open .ci-ms-caret { transform: rotate(180deg); }
.ci-ms-dropdown { 
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; 
  background: var(--ci-surface, var(--hh-surface-1)); border: 0.5px solid var(--ci-border2, var(--hh-border-2)); 
  border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
  z-index: 1050; opacity: 0; visibility: hidden; transform: translateY(-5px); transition: all 0.2s; 
}
.ci-ms-wrapper.open .ci-ms-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.ci-ms-list { max-height: 220px; overflow-y: auto; padding: 6px 0; }
.ci-ms-item { 
  display: flex; align-items: center; padding: 6px 12px; font-size: 11px; color: var(--ci-text1, var(--hh-text-1)); 
  cursor: pointer; transition: background 0.15s; margin: 0; font-weight: normal; 
}
.ci-ms-item:hover { background: var(--ci-surface2, var(--hh-surface-2)); }
.ci-ms-item input { margin-right: 8px; cursor: pointer; accent-color: var(--ci-brand, var(--hh-brand-500)); }
/* Grupo "Seleccionados" fijo arriba de la lista — evita tener que navegar cientos/miles
   de opciones para encontrar y desmarcar lo ya elegido (ver ci-multiselect.js renderOptions) */
.ci-ms-group-label {
  padding: 4px 12px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: var(--ci-brand, var(--hh-brand-500));
}
.ci-ms-divider { height: 1px; margin: 4px 0; background: var(--ci-border2, var(--hh-border-2)); }
/* Buscador inline del multiselect — colores vía tokens para dark/light correcto.
   Los inline styles del JS solo aportan layout (sticky/z-index); todo color aquí. */
.ci-ms-search-wrap {
  padding: 6px 8px 4px;
  background: var(--ci-surface, var(--hh-surface-1));
  border-bottom: 0.5px solid var(--ci-border2, var(--hh-border-2));
}
.ci-ms-search {
  width: 100%; box-sizing: border-box; padding: 5px 8px; font-size: 12px; line-height: 1.4;
  border: 0.5px solid var(--ci-border2, var(--hh-border-2)); border-radius: 4px;
  background: var(--ci-surface2, var(--hh-surface-2, #f1f5f9));
  color: var(--ci-text1, var(--hh-text-1));
  outline: none; transition: border-color 0.15s;
}
.ci-ms-search::placeholder { color: var(--ci-text3, var(--hh-text-3)); }
.ci-ms-search:focus {
  border-color: var(--ci-brand, var(--hh-brand-500));
  box-shadow: 0 0 0 2px rgba(108,92,231,.15);
}

/* ────────────────────────────────────────────────────────────────────────
   PHONE RESPONSIVE OPTIMIZATIONS (shared across all modules)
──────────────────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
    .ds-page-header.d-flex {
        flex-wrap: wrap;
        gap: var(--hh-space-6);
    }

    .ds-page-header h3 {
        font-size: var(--hh-fs-h2);
    }

    .hh-table,
    .table {
        font-size: var(--hh-fs-micro);
    }

    .hh-table th,
    .hh-table td,
    .table th,
    .table td {
        padding: var(--hh-space-3) var(--hh-space-4);
    }

    .hh-modal {
        width: 100%;
        max-width: 100vw;
    }

    .hh-modal-header,
    .hh-modal-body,
    .hh-modal-footer {
        padding: var(--hh-space-8);
    }

    .hh-modal-footer {
        flex-wrap: wrap;
    }

    .hh-modal-footer .hh-btn {
        flex: 1 1 auto;
    }
}

/* ─── SIDEBAR ACCORDION / COLLAPSIBLE SECTIONS ─── */
.ds-nav-group {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--hh-space-2);
}

.ds-nav-section-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: var(--hh-space-8) var(--hh-space-12) var(--hh-space-4);
    font-size: var(--hh-fs-micro);
    font-weight: var(--hh-fw-semibold);
    color: var(--hh-text-3);
    text-transform: uppercase;
    letter-spacing: var(--hh-ls-wider);
    cursor: pointer;
    text-align: left;
    transition: color var(--hh-dur-quick) var(--hh-ease-standard);
}

.ds-nav-section-btn:hover {
    color: var(--hh-text-1);
}

.ds-nav-section-btn .ds-nav-arrow {
    font-size: 10px;
    transition: transform var(--hh-dur-normal) var(--hh-ease-standard);
    color: var(--hh-text-3);
}

.ds-nav-group.is-open .ds-nav-section-btn .ds-nav-arrow {
    transform: rotate(180deg);
}

.ds-nav-submenu {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows var(--hh-dur-normal) var(--hh-ease-standard);
}

.ds-nav-group.is-open .ds-nav-submenu {
    grid-template-rows: 1fr;
}

.ds-nav-submenu-inner {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* PT-09 / UX-19 — separador visual para los links de nivel superior que antes
   eran grupos colapsables de un solo item (WMS Intelligence, Ventas, Control
   de Gastos, Resurtido — ver includes/header.php). Verificado en vivo: sin
   este margen, un link plano justo debajo de un grupo real (ej. Merchandising)
   se leía como si fuera parte de ESE grupo, porque ambos comparten el mismo
   padding y no había ninguna señal de "esto es una entrada nueva, no un hijo
   del grupo de arriba". */
.ds-nav-link--standalone {
    margin-top: var(--hh-space-4);
    border-top: 1px solid var(--hh-border-1);
    padding-top: 10px;
}

/* PT-09 / UX-20 — buscador de módulos (ver includes/header.php + initNavSearch
   en assets/js/main.js). */
.ds-nav-search {
    position: relative;
    margin: 0 var(--hh-space-10) var(--hh-space-8);
}

.ds-nav-search-icon {
    position: absolute;
    left: var(--hh-space-6);
    top: 50%;
    transform: translateY(-50%);
    color: var(--hh-text-4);
    font-size: 11px;
    pointer-events: none;
}

.ds-nav-search-input {
    width: 100%;
    background: var(--hh-surface-2);
    border: 1px solid var(--hh-border-2);
    border-radius: var(--hh-radius-sm);
    color: var(--hh-text-1);
    font-size: 12px;
    padding: 6px var(--hh-space-8) 6px 28px;
    height: 30px;
}

.ds-nav-search-input::placeholder {
    color: var(--hh-text-4);
}

.ds-nav-search-input:focus {
    outline: none;
    border-color: var(--hh-brand-500);
    box-shadow: 0 0 0 2px var(--hh-state-select);
}

.ds-nav-search-kbd {
    position: absolute;
    right: var(--hh-space-6);
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    color: var(--hh-text-4);
    border: 1px solid var(--hh-border-2);
    border-radius: 3px;
    padding: 1px 4px;
    pointer-events: none;
    font-family: inherit;
}

.ds-nav-search-input:focus ~ .ds-nav-search-kbd {
    display: none; /* al escribir ya no hace falta el hint del atajo */
}

.ds-nav-search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--hh-surface-4);
    border: 1px solid var(--hh-border-2);
    border-radius: var(--hh-radius-sm);
    box-shadow: var(--hh-elev-4, 0 8px 24px rgba(0,0,0,.35));
    max-height: 320px;
    overflow-y: auto;
    z-index: var(--hh-z-sticky, 50);
}

.ds-nav-search-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hh-space-6);
    padding: 8px var(--hh-space-8);
    color: var(--hh-text-2);
    text-decoration: none;
    font-size: 12px;
}

.ds-nav-search-item .ds-nav-search-item-group {
    font-size: 10px;
    color: var(--hh-text-4);
    text-transform: uppercase;
    letter-spacing: var(--hh-ls-wide);
    flex-shrink: 0;
}

.ds-nav-search-item.is-active,
.ds-nav-search-item:hover {
    background: var(--hh-state-hover);
    color: var(--hh-text-1);
}

.ds-nav-search-empty {
    padding: var(--hh-space-8);
    color: var(--hh-text-4);
    font-size: 12px;
    text-align: center;
}