/* ==========================================================================
   CUSTOM.CSS - MOTOR ESTRUCTURAL LIMPIO (V2.0)
   100% Adaptable a Variables CSS (Dark / Lite)
   0% Redundancia.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Outfit:wght@300;400;600;800&display=swap');
:root {
    --font-display: 'Outfit', sans-serif;
    --font-body: 'Roboto', sans-serif;
}
/* ==========================================================================
   1. RESET Y ESTRUCTURA BASE
   ========================================================================== */
body {
    -webkit-font-smoothing: antialiased;
    background-color: var(--md-bg) !important;
    color: var(--md-text-main) !important;
    font-family: var(--font-body) !important;
    overflow-x: hidden !important;
    margin: 0; padding: 0;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--md-bg); }
::-webkit-scrollbar-thumb { background: var(--md-text-sub); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--md-primary); }
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--md-surface-variant) inset !important;
    -webkit-text-fill-color: var(--md-text-main) !important;
    caret-color: var(--md-text-main) !important;
}
@media screen and (min-width: 769px) {
    html, body { height: 100vh !important; width: 100vw !important; overflow: hidden !important; }
    body #main { display: flex !important; flex-wrap: nowrap !important; height: 100vh !important; }
    body #main div.module-wrapper {
        flex: 1 1 0px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
}
/* ==========================================================================
   2. NOTIFICACIONES (TOASTS) - SIEMPRE ARRIBA (Z-INDEX SUPREMO)
   ========================================================================== */
.ox-messages-wrapper, .ox-errors-wrapper, .ox-warnings-wrapper, .ox-infos-wrapper {
    position: fixed !important; top: 24px !important; left: 50% !important; transform: translateX(-50%) !important;
    z-index: 100000 !important;
    display: flex !important; flex-direction: column !important; gap: 12px !important;
    pointer-events: none !important; width: 90vw !important; max-width: 450px !important;
}
.ox-messages div, .ox-errors div, .ox-warnings div, .ox-infos div {
    pointer-events: auto !important; display: flex !important; align-items: center !important;
    padding: 16px 50px 16px 20px !important;
    border-radius: 12px !important;
    background-color: var(--md-glass-bg) !important;
    backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(130, 130, 130, 0.3) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4) !important;
    color: var(--md-text-main) !important; font-weight: 600 !important; font-size: 14px !important;
    animation: toast-slide-down 0.4s ease forwards !important;
    position: relative !important;
}
.ox-errors div { border-left: 6px solid #E74C3C !important; }
.ox-warnings div { border-left: 6px solid #ff9800 !important; }
.ox-messages div { border-left: 6px solid #2ECC71 !important; }
.ox-messages-wrapper i.mdi-close, .ox-errors-wrapper i.mdi-close, .ox-warnings-wrapper i.mdi-close, .ox-infos-wrapper i.mdi-close,
.ox-messages div i.mdi-close, .ox-errors div i.mdi-close, .ox-warnings div i.mdi-close, .ox-infos div i.mdi-close {
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    transform: translateY(-50%) !important;
    font-size: 20px !important;
    color: var(--md-text-sub) !important;
    opacity: 0.8 !important;
    cursor: pointer !important;
    padding: 6px !important;
    border-radius: 50% !important;
    background-color: transparent !important;
    transition: all 0.2s ease-in-out !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 100001 !important;
}
.ox-messages-wrapper i.mdi-close:hover, .ox-errors-wrapper i.mdi-close:hover, .ox-warnings-wrapper i.mdi-close:hover, .ox-infos-wrapper i.mdi-close:hover,
.ox-messages div i.mdi-close:hover, .ox-errors div i.mdi-close:hover, .ox-warnings div i.mdi-close:hover, .ox-infos div i.mdi-close:hover {
    color: #E74C3C !important;
    opacity: 1 !important;
    background-color: rgba(231, 76, 60, 0.1) !important;
    transform: translateY(-50%) scale(1.15) !important;
}
.ox-messages div:hover i.mdi-close, .ox-errors div:hover i.mdi-close, .ox-warnings div:hover i.mdi-close, .ox-infos div:hover i.mdi-close {
    color: var(--md-text-sub) !important;
}
.ox-messages div:hover i.mdi-close:hover, .ox-errors div:hover i.mdi-close:hover, .ox-warnings div:hover i.mdi-close:hover, .ox-infos div:hover i.mdi-close:hover {
    color: #E74C3C !important;
}
@keyframes toast-slide-down { 0% { transform: translateY(-40px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
/* ==========================================================================
   3. BARRA SUPERIOR (CRISTAL Y STICKY)
   ========================================================================== */
.ox-button-bar-container {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* ==========================================================================
   3.5. CUADROS DE DIÁLOGO (POPUPS) - POR ENCIMA DE TODO
   ========================================================================== */
.ui-widget-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 100000 !important;
    background: var(--md-overlay-bg, rgba(0, 0, 0, 0.3)) !important;
    background-image: none !important;
    backdrop-filter: blur(12px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
    animation: fadeInOverlay 0.3s ease-out forwards !important;
}
@keyframes fadeInOverlay {
    from { opacity: 0; }
    to { opacity: 1; }
}
.ui-dialog {
    z-index: 100001 !important;
    background-color: var(--md-surface) !important;
    border: 1px solid var(--md-border-strong) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5) !important;
    border-radius: 12px !important;
    background-color: var(--md-glass-bg) !important;
    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;
    border: 1px solid rgba(130, 130, 130, 0.3) !important;
}
.ui-dialog .ui-dialog-titlebar {
    background-color: var(--md-surface-variant) !important;
    border-bottom: 1px solid var(--md-border-soft) !important;
    color: var(--md-text-main) !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 15px 20px !important;
}
.ox-button-bar {
    background-image: none !important;
    backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important;
    border-bottom: 1px solid var(--md-border-soft) !important;
    padding: 8px 24px !important; display: flex !important; justify-content: space-between !important; align-items: center !important;
}
/* ==========================================================================
   3.6. RESTRICCIÓN ADAPTATIVA DE DIÁLOGOS MULTINIVEL (ANTI-EXPANSIÓN PRO)
   ========================================================================== */
body .ui-dialog.ui-widget {
    max-width: 92vw !important;
    width: 900px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
}
body .ui-dialog.ui-widget[style*="z-index: 100002"],
body .ui-dialog.ui-widget[style*="z-index: 100003"],
body .ui-dialog.ui-widget[style*="z-index: 100004"] {
    width: 860px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6) !important;
}
body .ui-dialog .ui-dialog-content .ox-overflow-auto,
body .ui-dialog .ui-dialog-content .ox_comercial_Pedidos__list_scroll {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: auto !important;
    box-sizing: border-box !important;
}
body .ui-dialog .ui-dialog-content .xava_form {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
/* ====================================================================
   NUCLEO DEFINITIVO: BOTONES MATERIAL DESIGN 3 (GRABAR, NUEVO, ETC.)
   Blindaje Total y Purismo M3
   ==================================================================== */
body:not(.login-mode-active) div.ox-module form.xava_form .ox-bottom-buttons input[type="button"],
body:not(.login-mode-active) div.ox-module form.xava_form .ox-button {
    background-color: var(--md-primary) !important;
    background-image: none !important;
    color: #000000 !important;
    border: none !important;
    border-radius: 20px !important;
    height: 40px !important;
    padding: 0 24px !important;
    font-family: var(--font-body) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    -webkit-appearance: none; appearance: none;
}
body:not(.login-mode-active) div.ox-module form.xava_form .ox-bottom-buttons input[type="button"]::before,
body:not(.login-mode-active) div.ox-module form.xava_form .ox-bottom-buttons input[type="button"]::after,
body:not(.login-mode-active) div.ox-module form.xava_form .ox-button::before,
body:not(.login-mode-active) div.ox-module form.xava_form .ox-button::after,
body:not(.login-mode-active) div.ox-module form.xava_form .ox-bottom-buttons input[type="button"]:hover::before,
body:not(.login-mode-active) div.ox-module form.xava_form .ox-bottom-buttons input[type="button"]:hover::after {
    display: none !important;
    visibility: hidden !important;
    content: none !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 0 !important;
}
body:not(.login-mode-active) div.ox-module form.xava_form .ox-bottom-buttons input[type="button"]:hover,
body:not(.login-mode-active) div.ox-module form.xava_form .ox-button:hover,
body:not(.login-mode-active) div.ox-module form.xava_form .ox-bottom-buttons input[type="button"]:focus,
body:not(.login-mode-active) div.ox-module form.xava_form .ox-button:focus {
    background-color: var(--md-primary) !important;
    background-image: none !important;
    color: #000000 !important;
    background-image: linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)) !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12) !important;
    filter: none !important;
    transform: translateY(-2px) !important;
    opacity: 1 !important;
}
body:not(.login-mode-active) div.ox-module form.xava_form .ox-bottom-buttons input[type="button"]:active,
body:not(.login-mode-active) div.ox-module form.xava_form .ox-button:active {
    background-color: var(--md-primary) !important;
    background-image: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)) !important;
    transform: translateY(0) !important;
    box-shadow: none !important;
    border: none !important;
    color: #000000 !important;
}
.ox-bottom-buttons button[name="xava.DEFAULT_ACTION"] { display: none !important; }
/* ==========================================================================
   4. FORMULARIOS MATERIAL 3 (DISEÑO COMPACTO Y ETIQUETAS ATRAPADAS)
   ========================================================================== */
body:not(.login-mode-active) .ox-layout-detail,
body:not(.login-mode-active) .ox-layout-detail tr {
    display: block !important;
    width: 100% !important;
}
/* EN CUSTOM.CSS (Aplica solo a Escritorio) */
body:not(.login-mode-active):not(.mobile) .ox-label {
    display: inline-block !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
body:not(.login-mode-active) .ox-editor-wrapper {
    position: relative !important;
    display: inline-block !important;
    vertical-align: top !important;
    width: auto !important;
    min-height: 56px !important;
    margin-right: 2px !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
}
body:not(.login-mode-active) .ox-editor-wrapper:last-child { margin-right: 0 !important; }
body:not(.login-mode-active) .ox-editor-wrapper br { display: none !important; }
body:not(.login-mode-active) .small-label {
    position: absolute !important;
    top: 8px !important;
    left: 12px !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: var(--md-text-sub) !important;
    z-index: 10 !important;
    pointer-events: none !important;
    transition: color 0.3s !important;
}
body:not(.login-mode-active) .ox-editor-wrapper input.editor[type="text"],
body:not(.login-mode-active) .ox-editor-wrapper input.editor[type="number"] {
    background-color: var(--md-surface-variant) !important;
    color: var(--md-text-main) !important;
    border: none !important;
    border-bottom: 1px solid var(--md-outline, #8E918F) !important;
    border-radius: 6px 6px 0 0 !important;
    padding: 24px 12px 6px 12px !important;
    height: 56px !important;
    font-size: 1rem !important;
    width: auto !important;
    min-width: 130px !important;
    box-sizing: border-box !important;
    transition: all 0.2s !important;
    background-image: none !important;
}
body:not(.login-mode-active) .ox-editor-wrapper select.editor,
body:not(.login-mode-active) .ox-editor-wrapper select {
    background-color: var(--md-surface-variant) !important;
    color: var(--md-text-main) !important;
    border: none !important;
    border-bottom: 1px solid var(--md-outline, #8E918F) !important;
    border-radius: 6px 6px 0 0 !important;
    padding: 24px 40px 6px 12px !important;
    height: 56px !important;
    font-size: 1rem !important;
    width: auto !important;
    min-width: 130px !important;
    box-sizing: border-box !important;
    transition: all 0.2s !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23909090'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 20px !important;
}
body:not(.login-mode-active) .ox-editor-wrapper select option {
    background-color: var(--md-surface) !important;
    color: var(--md-text-main) !important;
    padding: 10px !important;
}
/* ==========================================================================
   EFECTO FOCO GLOBAL M3 (BLINDADO CONTRA OTROS CSS)
   ========================================================================== */
body:not(.login-mode-active) .ox-editor-wrapper:has(input:focus, select:focus, textarea:focus, .editor:focus) .small-label {
    color: var(--md-primary) !important;
    font-weight: 700 !important;
}
body:not(.login-mode-active) .ox-editor-wrapper input.editor:focus,
body:not(.login-mode-active) .ox-editor-wrapper input[type="text"]:focus,
body:not(.login-mode-active) .ox-editor-wrapper input[type="number"]:focus,
body:not(.login-mode-active) .ox-editor-wrapper input[type="password"]:focus,
body:not(.login-mode-active) .ox-editor-wrapper select.editor:focus,
body:not(.login-mode-active) .ox-editor-wrapper select:focus,
body:not(.login-mode-active) .ox-editor-wrapper textarea.editor:focus,
body:not(.login-mode-active) .ox-editor-wrapper textarea:focus {
    border-bottom: 2px solid var(--md-primary) !important;
    background-color: var(--md-surface-variant) !important;
    color: var(--md-text-main) !important;
    outline: none !important;
}
/* ==========================================================================
   5. CHECKBOXES (BLINDAJE DE TAMAÑO)
   ========================================================================== */
body:not(.login-mode-active) input[type="checkbox"].editor,
body:not(.login-mode-active) input[type="checkbox"] {
    width: 24px !important; height: 24px !important;
    min-width: 24px !important; max-width: 24px !important;
    min-height: 24px !important; max-height: 24px !important;
    accent-color: var(--md-primary) !important;
    cursor: pointer !important;
    border: none !important; background: transparent !important;
    display: inline-block !important; margin: 0 auto !important;
}
body:not(.login-mode-active) .ox-editor-wrapper:has(input[type="checkbox"]) { min-width: 140px !important; }
body:not(.login-mode-active) .ox-editor-wrapper input[type="checkbox"] { margin-top: 24px !important; margin-left: 22px !important; }
body:not(.login-mode-active) input[type="checkbox"]:disabled { opacity: 0.8 !important; filter: grayscale(0.2) !important; }
/* ==========================================================================
   6. ESTILO DE LAS TABLAS CON MD (LISTAS / GRILLAS OPENXAVA)
   Centralizado y 100% adaptativo (Dark / Lite).
   Lee las variables --md-table-* definidas en:
   - material3.css     (Dark)
   - material3Lite.css (Lite)
   ========================================================================== */
/* --- 6.1 LIENZO BASE (Mata el blanco heredado de base/materialdash) --- */
body:not(.login-mode-active) .ox-list,
body:not(.login-mode-active) .ox-collection-table,
body:not(.login-mode-active) .ox-collection table {
    background-color: var(--md-table-bg) !important;
    color: var(--md-text-main) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: none !important;
    border-radius: var(--border-radius-base, 12px) !important;
    overflow: hidden !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10) !important;
    font-family: var(--font-body) !important;
}
/* --- 6.2 CABECERA Y FILA DE FILTROS --- */
body:not(.login-mode-active) .ox-list thead,
body:not(.login-mode-active) .ox-list thead tr,
body:not(.login-mode-active) .ox-list tr:has(th),
body:not(.login-mode-active) .ox-list tr:has(.ox-list-subheader) {
    background-color: var(--md-table-header-bg) !important;
}
body:not(.login-mode-active) .ox-list th,
body:not(.login-mode-active) .ox-list .ox-list-header {
    background-color: var(--md-table-header-bg) !important;
    color: var(--md-table-header-color) !important;
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    padding: var(--md-table-cell-padding) !important;
    border-top: none !important;
    border-bottom: var(--md-table-cell-border) !important;
    text-shadow: none !important;
}
body:not(.login-mode-active) .ox-list th a,
body:not(.login-mode-active) .ox-list .ox-list-header a,
body:not(.login-mode-active) .ox-list th i {
    color: var(--md-table-header-color) !important;
}
body:not(.login-mode-active) .ox-list .ox-list-subheader {
    background-color: var(--md-table-header-bg) !important;
    padding: 8px 10px !important;
    border-bottom: var(--md-table-cell-border) !important;
}
body:not(.login-mode-active) .ox-list .ox-list-subheader input,
body:not(.login-mode-active) .ox-list .ox-list-subheader select {
    background-color: var(--md-surface) !important;
    color: var(--md-text-main) !important;
    border: 1px solid var(--md-table-border-color) !important;
    border-radius: 8px !important;
    min-height: 34px !important;
    padding: 4px 10px !important;
    font-size: 0.85rem !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease !important;
}
body:not(.login-mode-active) .ox-list .ox-list-subheader input:focus,
body:not(.login-mode-active) .ox-list .ox-list-subheader select:focus {
    border-color: var(--md-primary) !important;
    outline: none !important;
}
/* --- 6.3 CUERPO: FILAS, ZEBRA Y COLUMNAS --- */
body:not(.login-mode-active) .ox-list tbody {
    background-color: var(--md-table-bg) !important;
}
body:not(.login-mode-active) .ox-list tbody tr {
    background-color: var(--md-table-row-bg) !important;
    transition: background-color 0.15s ease !important;
}
body:not(.login-mode-active) .ox-list tbody tr:nth-child(even) {
    background-color: var(--md-table-row-alt-bg) !important;
}
body:not(.login-mode-active) .ox-list td,
body:not(.login-mode-active) .ox-list .ox-list-data-cell,
body:not(.login-mode-active) .ox-list .ox-list-action-cell {
    background-color: transparent !important;
    color: var(--md-text-main) !important;
    padding: var(--md-table-cell-padding) !important;
    border: none !important;
    border-bottom: var(--md-table-cell-border) !important;
    font-size: 0.9rem !important;
    text-shadow: none !important;
}
body:not(.login-mode-active) .ox-list tbody tr:last-child td {
    border-bottom: none !important;
}
body:not(.login-mode-active) .ox-list tbody tr > td:nth-child(odd) {
    background-color: var(--md-table-column-odd) !important;
}
body:not(.login-mode-active) .ox-list tbody tr > td:nth-child(even) {
    background-color: var(--md-table-column-even) !important;
}
body:not(.login-mode-active) .ox-list td,
body:not(.login-mode-active) .ox-list .ox-list-data-cell {
    color: var(--md-table-item-color) !important;
}
body:not(.login-mode-active) .ox-list td a {
    color: var(--md-table-item-link-color) !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}
body:not(.login-mode-active) .ox-list td a:hover {
    color: var(--md-table-item-link-hover) !important;
    text-decoration: underline !important;
}
/* --- 6.4 HOVER Y SELECCIÓN DE FILA --- */
body:not(.login-mode-active) .ox-list tbody tr:hover {
    background-color: var(--md-table-row-hover-bg) !important;
}
body:not(.login-mode-active) .ox-list tbody tr.selected,
body:not(.login-mode-active) .ox-list tbody tr.ox-selected,
body:not(.login-mode-active) .ox-list tbody tr.row-selected,
body:not(.login-mode-active) .ox-list tbody tr:has(input[type="checkbox"]:checked) {
    background-color: var(--md-table-row-selected-bg) !important;
}
body:not(.login-mode-active) .ox-list tbody tr.selected > td,
body:not(.login-mode-active) .ox-list tbody tr.ox-selected > td,
body:not(.login-mode-active) .ox-list tbody tr.row-selected > td,
body:not(.login-mode-active) .ox-list tbody tr:has(input[type="checkbox"]:checked) > td {
    color: var(--md-table-row-selected-color) !important;
    font-weight: 600 !important;
}
/* --- 6.5 FILA DE TOTALES --- */
body:not(.login-mode-active) .ox-list tfoot,
body:not(.login-mode-active) .ox-list tfoot tr,
body:not(.login-mode-active) .ox-list tr.ox-total-row {
    background-color: var(--md-table-total-bg) !important;
}
body:not(.login-mode-active) .ox-list tfoot td,
body:not(.login-mode-active) .ox-list .ox-list-total-cell {
    background-color: transparent !important;
    color: var(--md-primary) !important;
    font-weight: 700 !important;
    border-top: var(--md-table-cell-border) !important;
    border-bottom: none !important;
}
/* --- 6.6 CONTROLES DE LISTA (Todos / Sin agrupar / filas por página) --- */
body:not(.login-mode-active) .ox-collection select,
body:not(.login-mode-active) .ox-list-pagination select {
    background-color: var(--md-surface-variant) !important;
    color: var(--md-text-main) !important;
    border: 1px solid var(--md-table-border-color) !important;
    border-radius: 8px !important;
    min-height: 36px !important;
    padding: 6px 12px !important;
    font-size: 0.85rem !important;
    box-shadow: none !important;
}
body:not(.login-mode-active) .ox-list-info,
body:not(.login-mode-active) .ox-list-info-detail,
body:not(.login-mode-active) .ox-list-pagination {
    color: var(--md-text-sub) !important;
    font-size: 0.85rem !important;
}
body:not(.login-mode-active) .ox-list-info a,
body:not(.login-mode-active) .ox-list-pagination a {
    color: var(--md-primary) !important;
}
/* ==========================================================================
   7. MENÚ LATERAL Y HEADER (ESTRUCTURA TABS M3 CENTRALIZADA)
   ========================================================================== */
#module_header {
    padding: 0 0 0 10px !important;
    background-color: var(--md-surface) !important;
    background-image: var(--md-header-pattern) !important;
    background-repeat: repeat-x !important;
    background-position: left center !important;
    height: 54px !important;
    min-height: 54px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid var(--module-header-boot-border) !important;
    box-sizing: border-box !important;
}
#module_header_left {
    display: flex !important;
    align-items: center !important;
    flex-grow: 1 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    height: 100% !important;
    scrollbar-width: none !important;
}
#module_header_left::-webkit-scrollbar { display: none !important; }
/* ================== TABS MATERIAL 3 ================== */
.module-header-tab {
    position: relative !important;
    display: inline-flex !important;
    height: 100% !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}
.module-header-tab a,
.module-header-tab .selected {
    position: relative !important;
    color: var(--md-text-sub) !important;
    padding: 0 5px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-family: var(--font-body) !important;
    font-size: 0.875rem !important;
    border: none !important;
    border-bottom: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}
.module-header-tab a:hover {
    background-color: rgba(128, 128, 128, 0.08) !important;
    color: var(--md-text-main) !important;
}
.module-header-tab .selected {
    color: var(--md-primary) !important;
    font-weight: 700 !important;
}
.module-header-tab .selected::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0px !important;
    left: 0 !important;
    width: 100% !important;
    height: 4px !important;
    background-color: var(--md-primary) !important;
    border-radius: 4px 4px 0 0 !important;
}
.module-header-tab i.mdi-close,
.module-header-tab .close-icon {
    font-size: 14px !important;
    margin-left: 8px !important;
    width: 20px !important;
    height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    opacity: 0.5 !important;
    color: inherit !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
}
.module-header-tab i.mdi-close::after,
.module-header-tab .close-icon::after {
    display: none !important;
    content: none !important;
}
.module-header-tab i.mdi-close:hover,
.module-header-tab .close-icon:hover {
    opacity: 1 !important;
    background-color: rgba(231, 76, 60, 0.15) !important;
    color: #E74C3C !important;
    transform: scale(1.1) !important;
}
#module_header_right {
    height: 54px !important;
    display: flex !important;
    align-items: center !important;
    margin-top: -3px !important;
}
body.login-mode-active #module_header, body.login-mode-active .ox-button-bar-container { display: none !important; }
#ox_comercial_SignIn__GoSignUp___signUp, input[value='Crear cuenta'], input[title='Crear cuenta'] { display: none !important; visibility: hidden !important; position: absolute !important; z-index: -999 !important; }
body.login-mode-active .hideShowPassword-wrapper { width: 100% !important; display: block !important; position: static !important; margin: 0 !important; }
body.login-mode-active .hideShowPassword-toggle { display: none !important; }
/* ==========================================================================
   RECUPERAR EL COLOR DEL CURSOR (CARET) EN LOS CAMPOS CON FOCO
   ========================================================================== */
body:not(.login-mode-active) .ox-editor-wrapper input:focus,
body:not(.login-mode-active) .ox-editor-wrapper textarea:focus,
body:not(.login-mode-active) .ox-list-subheader input:focus,
body:not(.login-mode-active) .ox-list-data-cell input.editor:focus {
    caret-color: var(--md-primary) !important;
}
#module_header_right {
    background: var(--module-header-background);
    float: none !important;
    padding: 0 10px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    background: -webkit-gradient(linear, left top, right top, from(white), to(black)) !important;
    background-image: linear-gradient(to left, var(--modules-list-background), var(--modules-list-background), var(--modules-list-background), var(--modules-list-background), var(--modules-list-background), transparent) !important;
}
/* ==========================================================================
   FIX: Visualización de Archivos SRI en modo Read-Only para Tema Oscuro
   ========================================================================== */
.ox-filepond-read-only .filepond--item {
    background-color: #2c2c2c !important;
    border: 1px solid #555555 !important;
    border-radius: 6px !important;
}
.ox-filepond-read-only .filepond--file-info-main,
.ox-filepond-read-only .filepond--file-info-sub {
    color: #ffffff !important;
    text-shadow: none !important;
}
.ox-filepond-read-only .filepond--file {
    cursor: pointer !important;
}
.ox-filepond-read-only {
    min-height: 50px !important;
    margin-bottom: 15px !important;
}
/* ==========================================================================
   FIX DEFINITIVO: FilePond Adaptable (Dark/Light Mode) y Anti-Colapso
   ========================================================================== */
.ox-upload-editor-box .filepond--root {
    min-width: 300px !important;
    width: 100% !important;
    min-height: 76px !important;
    border: 2px dashed rgba(128, 128, 128, 0.5) !important;
    border-radius: 8px !important;
    background-color: transparent !important;
    box-sizing: border-box !important;
}
.ox-upload-editor-box .filepond--panel-root {
    background-color: rgba(128, 128, 128, 0.08) !important;
    border: none !important;
}
.ox-upload-editor-box .filepond--drop-label {
    color: inherit !important;
    opacity: 0.8 !important;
}
.ox-upload-editor-box .filepond--label-action {
    color: #ff9800 !important;
    text-decoration: none !important;
    font-weight: bold !important;
}
.ox-upload-editor-box .filepond--label-action:hover {
    text-decoration: underline !important;
}
/* ==========================================================================
   FIX: Espaciado entre la Etiqueta (Label) y el recuadro de FilePond
   ========================================================================== */
.ox-editor-wrapper .ox-upload-editor-box {
    margin-top: 28px !important;
    display: block !important;
}
.ox-filepond-read-only .filepond--file-info {
    transform: translate3d(8px, 0px, 0px) !important;
}
/* ==========================================================================
   4.1. CAMPOS REQUERIDOS Y ERRORES (MATERIAL DESIGN 3)
   ========================================================================== */
body:not(.login-mode-active) .ox-editor-wrapper .ox-error-editor input.editor,
body:not(.login-mode-active) .ox-editor-wrapper .ox-error-editor select.editor,
body:not(.login-mode-active) .ox-editor-wrapper .ox-error-editor textarea.editor {
    border-bottom: 2px solid var(--error-campo-requerido) !important;
}
body:not(.login-mode-active) .ox-editor-wrapper:has(.ox-error-editor) .small-label {
    color: var(--error-campo-requerido) !important;
    font-weight: 600 !important;
}
body:not(.login-mode-active) .ox-editor-wrapper .ox-error-editor input.editor:focus,
body:not(.login-mode-active) .ox-editor-wrapper .ox-error-editor select.editor:focus,
body:not(.login-mode-active) .ox-editor-wrapper .ox-error-editor textarea.editor:focus {
    border-bottom: 2px solid var(--error-campo-requerido) !important;
    background-color: rgba(255, 68, 68, 0.05) !important;
    outline: none !important;
}
.ox-list-info-detail {
    width: 70% !important;
}
/* ==========================================================================
   OPTIMIZACIÓN UX ESCRITORIO: BOTÓN DE RETORNO EN LOGO DE BIENVENIDA
   ========================================================================== */
body:not(.login-mode-active) #ox_comercial_SignIn__core .hero-slide .inline-flex,
body #ox_comercial_SignIn__core form pre,
#ox_comercial_SignIn__core .hero-slide a,
div:has(> i.fa-box-open),
.hover-trigger {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #ff9800 !important;
    padding: 10px 14px !important;
    border-radius: 14px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.2) !important;
    text-decoration: none !important;
}
#ox_comercial_SignIn__core .hero-slide i.fa-box-open,
#ox_comercial_SignIn__core .hero-slide i.fa-database,
div:has(> i.fa-box-open) i,
.hover-trigger i {
    font-size: 18px !important;
    color: #ffffff !important;
    transition: transform 0.3s ease !important;
}
#ox_comercial_SignIn__core .hero-slide i.fa-box-open::before,
#ox_comercial_SignIn__core .hero-slide i.fa-database::before,
div:has(> i.fa-box-open) i::before,
.hover-trigger i::before {
    content: "\f060" !important;
}
#ox_comercial_SignIn__core .hero-slide a:hover,
div:has(> i.fa-box-open):hover,
.hover-trigger:hover {
    padding: 10px 22px !important;
    background: #e68a00 !important;
    box-shadow: 0 6px 20px rgba(230, 138, 0, 0.45) !important;
}
#ox_comercial_SignIn__core .hero-slide a:hover i,
div:has(> i.fa-box-open):hover i,
.hover-trigger:hover i {
    transform: translateX(-4px) !important;
}
#ox_comercial_SignIn__core .hero-slide a::after,
div:has(> i.fa-box-open)::after,
.hover-trigger::after {
    content: "Volver al inicio" !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    font-family: 'Outfit', sans-serif !important;
    display: block !important;
    max-width: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    transition: max-width 0.4s ease, opacity 0.3s ease 0.1s !important;
}
#ox_comercial_SignIn__core .hero-slide a:hover::after,
div:has(> i.fa-box-open):hover::after,
.hover-trigger:hover::after {
    max-width: 120px !important;
    opacity: 1 !important;
}
#ox_comercial_SignIn__core .hero-slide i.mdi-home-variant-outline,
#ox_comercial_SignIn__core .hero-slide i.mdi-database,
div:has(> i.mdi-home-variant-outline) i,
.hover-trigger i {
    font-size: 20px !important;
    color: #ffffff !important;
    transition: transform 0.3s ease !important;
}
.logo-floating:hover .icon-main {
    display: none !important;
}
/* ==========================================================================
9. WELCOME PAGE & TIMELINE (MATERIAL DESIGN 3 ADAPTATIVE)
Blindaje total para Dark (materialEnt) y Lite (materialEntLite)
========================================================================== */
.welcome-container {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: var(--font-body) !important;
}
/* --- HEADER (Elevated Card con acento primario) --- */
.welcome-header {
    background: linear-gradient(135deg, rgba(255, 153, 0, 0.08) 0%, var(--md-surface) 100%);
    border: 1px solid rgba(255, 153, 0, 0.2);
    border-left: 6px solid var(--md-primary);
    border-radius: 20px;
    padding: 32px 40px;
    color: var(--md-text-main);
    margin-bottom: 40px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}
.welcome-header::after {
    content: '';
    position: absolute;
    right: -50px;
    bottom: -50px;
    width: 200px;
    height: 200px;
    background: rgba(255, 153, 0, 0.04);
    border-radius: 50%;
}
.welcome-header h1 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--md-text-main);
    letter-spacing: -0.5px;
}
.welcome-header p {
    font-size: 15px;
    color: var(--md-text-sub);
    margin: 0;
}
/* --- TIMELINE ESTRUCTURA --- */
.modern-timeline {
    position: relative;
    padding-left: 32px;
    margin-bottom: 40px;
}
.modern-timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: linear-gradient(to bottom, var(--md-primary) 0%, var(--md-outline) 100%);
    border-radius: 4px;
}
/* --- ITEMS DEL TIMELINE --- */
.timeline-item {
    position: relative;
    margin-bottom: 32px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.timeline-item:nth-child(1) { animation-delay: 0.1s; }
.timeline-item:nth-child(2) { animation-delay: 0.2s; }
.timeline-item:nth-child(3) { animation-delay: 0.3s; }
.timeline-item:nth-child(4) { animation-delay: 0.4s; }
.timeline-item:nth-child(5) { animation-delay: 0.5s; }
/* --- DOT (Punto de conexión M3) --- */
.timeline-dot {
    position: absolute;
    left: -36px;
    top: 24px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--md-surface);
    border: 4px solid var(--md-primary);
    box-shadow: 0 0 0 4px rgba(255, 153, 0, 0.15);
    z-index: 2;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.timeline-item:hover .timeline-dot {
    transform: scale(1.2);
    background: var(--md-primary);
    box-shadow: 0 0 0 6px rgba(255, 153, 0, 0.25);
}
/* --- TARJETA DE CONTENIDO (Surface Container) --- */
.timeline-content {
    background: var(--md-surface);
    border: 1px solid var(--md-outline);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--shadow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.timeline-content:hover {
    transform: translateY(-4px);
    border-color: var(--md-primary);
    box-shadow: 0 12px 28px -8px rgba(255, 153, 0, 0.2);
}
/* --- METADATOS Y BADGES --- */
.timeline-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.timeline-date {
    font-size: 13px;
    font-weight: 500;
    color: var(--md-text-sub);
}
.timeline-version {
    font-size: 12px;
    font-weight: 700;
    color: var(--md-primary);
    background: rgba(255, 153, 0, 0.12);
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 153, 0, 0.3);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
/* --- TEXTOS --- */
.timeline-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--md-text-main);
    margin: 0 0 16px 0;
}
.timeline-details {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.timeline-details li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--md-text-sub);
}
.timeline-details li strong {
    color: var(--md-text-main);
    font-weight: 600;
}
/* --- ICONOS DE DETALLES (M3 State Layers) --- */
.timeline-details li i {
    font-size: 16px;
    color: var(--md-primary);
    background: rgba(255, 153, 0, 0.12);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all 0.2s ease;
}
.timeline-details li:hover i {
    background: rgba(255, 153, 0, 0.24);
    transform: scale(1.05);
}
/* --- FOOTER --- */
.welcome-footer {
    text-align: center;
    margin-top: 40px;
    padding: 20px;
    color: var(--md-text-sub);
    font-size: 14px;
    border-top: 1px solid var(--md-outline);
}
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (max-width: 768px) {
    .welcome-header { padding: 24px; }
    .welcome-header h1 { font-size: 22px; }
    .modern-timeline { padding-left: 24px; }
    .timeline-dot { left: -24px; width: 14px; height: 14px; }
    .timeline-content { padding: 16px; }
}
.ox-file .filepond--item, .ox-files .filepond--item {
    width: 100% !important;
    cursor: pointer !important;
}
/* ==========================================================================
   Componente Visual: Plan de Accion IA (@PlanAccion)
   ========================================================================== */
.pa-dashboard-wrapper {
    display: flex;
    gap: 15px;
    background-color: var(--md-surface, #1e1e1e);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid var(--md-outline-variant, #333);
    font-family: inherit;
    align-items: stretch;
    margin-top: 25px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}
.pa-header-box {
    background-color: var(--md-surface-variant, #2d2d2d);
    border: 1px solid var(--md-outline-variant, #404040);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1.2 1 250px;
    min-width: 0;
}
.pa-icon-box {
    background-color: var(--md-surface, #1e1e1e);
    color: var(--md-primary, #ff6b6b);
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 22px;
    border: 1px solid var(--md-outline-variant, #404040);
}
.pa-header-texts {
    flex: 1;
    min-width: 0;
}
.pa-header-texts h4 {
    color: inherit;
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: normal !important;
}
.pa-subtitle {
    color: inherit;
    opacity: 0.65;
    font-size: 12px;
    line-height: 1.4;
    display: block;
    white-space: normal !important;
    word-wrap: break-word;
}
.pa-action-box {
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 200px;
    min-width: 0;
    transition: transform 0.2s ease;
}
.pa-action-box:hover {
    transform: translateY(-2px);
}
.pa-badge {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.pa-action-text {
    color: inherit;
    font-size: 13px;
    line-height: 1.4;
    flex: 1;
    min-width: 0;
    white-space: normal !important;
    word-break: break-word;
}
/* ==========================================================================
   Componente Premium: Tarjetas KPI Adaptativas (@TarjetaKPI)
   ========================================================================== */
.ind-card {
    background-color: var(--md-surface, #1e1e1e);
    border: 1px solid rgba(130, 130, 130, 0.2);
    border-radius: 12px;
    padding: 18px 20px;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    font-family: inherit;
    margin-right: 15px;
    margin-bottom: 15px;
    box-sizing: border-box;
}
.ind-dot {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.ind-title {
    color: var(--md-on-surface-variant, #a0a0a0);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ind-value {
    color: var(--md-on-surface, #ffffff);
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 8px;
    line-height: 1.1;
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.ind-subtitle {
    font-size: 13px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-weight: 500;
    color: var(--md-on-surface-variant, #a0a0a0);
    min-height: 24px;
    box-sizing: border-box;
}
.ind-progress-track {
    background-color: var(--md-surface-variant, rgba(150, 150, 150, 0.2));
    height: 6px;
    border-radius: 4px;
    width: 100%;
    overflow: hidden;
    margin-bottom: 12px;
}
.ind-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 1s ease-in-out;
}
.ind-footer {
    display: flex;
    justify-content: space-between;
    color: var(--md-on-surface-variant, #888888);
    font-size: 11px;
    font-weight: 500;
}
.ind-footer-right {
    font-weight: 700;
    text-transform: uppercase;
}
.kpi-privacy-eye {
    color: var(--md-on-surface-variant, #a0a0a0);
    opacity: 0.7;
    transition: opacity 0.2s ease, transform 0.1s ease;
}
.kpi-privacy-eye:hover {
    opacity: 1;
    transform: scale(1.1);
}
/* --- Temas de Colores Sincronizados con tus Donuts --- */
/* --- NUEVO TEMA: Naranja Material UI ---
   Este color (#f97316 / #ff9800) hace match perfecto con tu gráfico de barras inferior */
.ind-theme-orange .ind-dot { background-color: #f97316; }
.ind-theme-orange .ind-value { color: #f97316; }
.ind-theme-orange .ind-subtitle i { color: #f97316; }
.ind-theme-orange .ind-footer-right { color: #f97316; }
.ind-theme-orange .ind-progress-fill { background-color: #f97316; }
.ind-theme-green .ind-dot { background-color: #00E396; }
.ind-theme-green .ind-value { color: #00E396; }
.ind-theme-green .ind-subtitle i { color: #00E396; }
.ind-theme-green .ind-footer-right { color: #00E396; }
.ind-theme-green .ind-progress-fill { background-color: #00E396; }
.ind-theme-yellow .ind-dot { background-color: #FFA500; }
.ind-theme-yellow .ind-value { color: #FFA500; }
.ind-theme-yellow .ind-subtitle i { color: #FFA500; }
.ind-theme-yellow .ind-footer-right { color: #FFA500; }
.ind-theme-yellow .ind-progress-fill { background-color: #FFA500; }
.ind-theme-red .ind-dot { background-color: #ef4444; }
.ind-theme-red .ind-value { color: #ef4444; }
.ind-theme-red .ind-subtitle i { color: #ef4444; }
.ind-theme-red .ind-footer-right { color: #ef4444; }
.ind-theme-red .ind-progress-fill { background-color: #ef4444; }
.ind-theme-blue .ind-dot { background-color: #1a73e8; }
.ind-theme-blue .ind-value { color: #1a73e8; }
.ind-theme-blue .ind-subtitle i { color: #1a73e8; }
.ind-theme-blue .ind-footer-right { color: #1a73e8; }
.ind-theme-blue .ind-progress-fill { background-color: #1a73e8; }
.ind-theme-purple .ind-dot { background-color: #a855f7; }
.ind-theme-purple .ind-value { color: #a855f7; }
.ind-theme-purple .ind-subtitle i { color: #a855f7; }
.ind-theme-purple .ind-footer-right { color: #a855f7; }
.ind-theme-purple .ind-progress-fill { background-color: #a855f7; }
/* ==========================================================================
   INFRAESTRUCTURA: FOOTER BAR (Modo Flotante, Alineación Derecha & Redondeado)
   ========================================================================== */
#theme_chooser.footer-bar {
    margin: 0 !important;
    text-align: right !important;
    background: transparent !important;
    border: none !important;
}
.footer-bar {
    position: fixed;
    bottom: 16px;
    left: auto;
    right: 24px;
    width: fit-content;
    max-width: 60%;
    height: 48px;
    z-index: 9999;
    padding: 0 24px;
    box-sizing: border-box;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* --- NUEVO: Diseño de Pastilla/Chip --- */
    border-radius: 50px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    border: none !important;
}
.footer-bar-content {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    height: 100%;
    width: 100%;
    white-space: nowrap;
}
/* --- MODO CLARO --- */
.footer-bar.light-mode-active {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}
.footer-bar.light-mode-active .footer-item { color: #4b5563 !important; }
.footer-bar.light-mode-active .footer-separator { color: #d1d5db !important; }
/* --- MODO OSCURO --- */
.footer-bar.dark-mode-active {
    background-color: rgba(31, 41, 55, 0.85) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}
.footer-bar.dark-mode-active .footer-item { color: #d1d5db !important; }
.footer-bar.dark-mode-active .footer-separator { color: #4b5563 !important; }
/* ==========================================================================
   ELEMENTOS DE INFORMACIÓN
   ========================================================================== */
.footer-item {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}
.footer-item i { font-size: 1.1rem; opacity: 0.8; }
.footer-separator { font-size: 0.9rem; }
/* ==========================================================================
   BOTÓN SCROLL-TO-TOP (Volver arriba)
   ========================================================================== */
.footer-action-btn {
    background: rgba(128, 128, 128, 0.1);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    outline: none;
}
.light-mode-active .footer-action-btn { color: #4b5563; }
.dark-mode-active .footer-action-btn { color: #d1d5db; }
.footer-action-btn i { font-size: 1.2rem; }
.footer-action-btn:hover {
    background: rgba(128, 128, 128, 0.25);
    transform: translateY(-2px);
}
.footer-action-btn:active { transform: translateY(0); }
/* ==========================================================================
   BLINDAJE DEL SWITCH (TEMA)
   ========================================================================== */
a.theme-switch-link {
    text-decoration: none !important;
    display: block !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    min-width: auto !important;
    outline: none !important;
}
a.theme-switch-link:hover,
a.theme-switch-link:active,
a.theme-switch-link:visited {
    background: transparent !important;
}
.theme-switch {
    position: relative;
    width: 56px;
    height: 28px;
    border-radius: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
    transition: background-color 0.3s;
}
.light-mode-active .theme-switch { background-color: #e5e7eb !important; }
.dark-mode-active .theme-switch { background-color: #374151 !important; }
.theme-switch-circle {
    position: absolute;
    left: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.light-mode-active .theme-switch-circle {
    transform: translateX(0);
    background-color: #ffffff !important;
}
.dark-mode-active .theme-switch-circle {
    transform: translateX(28px);
    background-color: #1a1a1a !important;
}
.theme-switch-circle i {
    font-size: 14px;
    line-height: 1;
}
.light-mode-active .icon-sun { display: block !important; color: #ff9800 !important; }
.dark-mode-active .icon-sun { display: none !important; }
.light-mode-active .icon-moon { display: none !important; }
.dark-mode-active .icon-moon { display: block !important; color: white !important; }
@media (max-width: 768px) {
    .footer-bar {
        right: 12px;
        left: 12px;
        max-width: 100%;
        padding: 0 16px;
    }
    .footer-item.secondary-info,
    .footer-separator.secondary-info { display: none !important; }
}
/**************** Colores de los iconos para kardex*************************
==========
==========
*/
/* ============================================================
   ESTILOS PARA ICONOS SEMANTICOS DE INVENTARIO
   ============================================================ */
.mdi-arrow-collapse-down, .material-icons.arrow-collapse-down { color: var(--color-ingreso) !important; }
.mdi-arrow-expand-up, .material-icons.arrow-expand-up { color: var(--color-egreso) !important; }
.mdi-cart, .material-icons.cart { color: var(--color-compra) !important; }
.mdi-tune, .material-icons.tune { color: var(--color-ajuste) !important; }
.mdi-warehouse, .material-icons.warehouse { color: var(--color-bodega) !important; }
.mdi-account, .material-icons.account { color: var(--color-cliente) !important; }
.mdi-truck-delivery, .material-icons.truck-delivery { color: var(--color-proveedor) !important; }
.mdi-silverware-fork-knife, .material-icons.silverware-fork-knife { color: var(--color-consumo) !important; }
.mdi-clipboard-list, .material-icons.clipboard-list { color: var(--color-inicial) !important; }
.mdi-factory, .material-icons.factory { color: var(--color-produccion) !important; }
.mdi-swap-horizontal, .material-icons.swap-horizontal { color: var(--color-transferencia) !important; }
/* ==========================================================================
   3.7. FIX Z-INDEX: AUTOCOMPLETE / COMBOS DENTRO DE POPUPS
   El menú .ui-autocomplete de los temas vive en 99999 y quedaba BAJO el
   velo (100000) y el diálogo (100001). Lo subimos por encima de todo,
   incluidos los diálogos anidados (100002-100004).
   ========================================================================== */
body .ui-autocomplete,
body .ui-autocomplete.ui-widget,
body .ui-autocomplete.ui-widget.ui-menu {
    z-index: 100005 !important;
    position: absolute !important;
}
body .ui-dialog .ox-popup-menu,
body .ui-dialog .ox-subcontroller {
    z-index: 100005 !important;
}
/* ==========================================================================
   10. SEMÁNTICA DE ACCIONES DE FILA (EDITAR / ELIMINAR) ? TOKENS GLOBALES
   ========================================================================== */
/* --- EDITAR: azul informativo, deja de competir con la marca --- */
body:not(.login-mode-active) .ox-list i.mdi-pencil,
body:not(.login-mode-active) .ox-list i.mdi-pencil-outline,
body:not(.login-mode-active) .ox-list i.mdi-square-edit-outline {
    color: var(--color-action-edit) !important;
    transition: color 0.15s ease, transform 0.15s ease;
}
/* --- ELIMINAR: rojo destructivo, inequívoco --- */
body:not(.login-mode-active) .ox-list i.mdi-delete,
body:not(.login-mode-active) .ox-list i.mdi-delete-outline,
body:not(.login-mode-active) .ox-list i.mdi-trash-can,
body:not(.login-mode-active) .ox-list i.mdi-trash-can-outline {
    color: var(--color-action-delete) !important;
    transition: color 0.15s ease, transform 0.15s ease;
}
/* --- Contenedor del icono: chip redondeado para dar área de clic y hover --- */
body:not(.login-mode-active) .ox-list td a:has(i.mdi-pencil),
body:not(.login-mode-active) .ox-list td a:has(i.mdi-delete) {
    display: inline-flex !important;
    padding: 6px !important;
    border-radius: 8px !important;
    transition: background-color 0.15s ease;
}
/* --- Acciones secundarias de la barra: menor peso visual (gris, no naranja) --- */
body:not(.login-mode-active) .ox-button-bar a:not(.ox-default-action),
body:not(.login-mode-active) .ox-button-bar button:not(.ox-default-action) {
    color: var(--color-action-secondary) !important;
    border: 1px solid var(--color-border) !important;
    background: transparent !important;
}
/* ==========================================================================
   10. SEMÁNTICA DE ACCIONES V2 (EDITAR / ELIMINAR / CREAR / SECUNDARIAS)
   FIX: icono real Editar = mdi-border-color | geometría uniforme 28×28 |
   NUEVO recupera relleno completo (fondo + borde + texto + icono).
   ========================================================================== */
/* ---------- 10.1 EDITAR (azul semántico) ---------- */
body:not(.login-mode-active) .ox-list i.mdi-border-color,
body:not(.login-mode-active) .ox-list i.mdi-pencil,
body:not(.login-mode-active) .ox-list i.mdi-pencil-outline,
body:not(.login-mode-active) .ox-list i.mdi-square-edit-outline {
    color: var(--color-action-edit) !important;
    transition: color 0.15s ease;
}
/* ---------- 10.2 ELIMINAR (rojo destructivo) ---------- */
body:not(.login-mode-active) .ox-list i.mdi-delete,
body:not(.login-mode-active) .ox-list i.mdi-delete-outline,
body:not(.login-mode-active) .ox-list i.mdi-trash-can,
body:not(.login-mode-active) .ox-list i.mdi-trash-can-outline {
    color: var(--color-action-delete) !important;
    transition: color 0.15s ease;
}
/* ---------- 10.3 GEOMETRÍA UNIFORME (adiós desalineación) ----------
   Chip 28×28 idéntico para TODOS los enlaces de acción de la fila,
   sin depender de la clase del icono. */
body:not(.login-mode-active) .ox-list td.ox-list-action-cell a.ox-image-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    margin: 0 2px !important;
    border-radius: 8px !important;
    vertical-align: middle !important;
    transition: background-color 0.15s ease;
}
/* ---------- 10.4 HOVER / ACTIVE / FOCUS ---------- */
body:not(.login-mode-active) .ox-list td.ox-list-action-cell a.ox-image-link:has(i.mdi-border-color):hover,
body:not(.login-mode-active) .ox-list td.ox-list-action-cell a.ox-image-link:has(i.mdi-pencil):hover {
    background-color: var(--color-action-edit-bg) !important;
}
body:not(.login-mode-active) .ox-list td.ox-list-action-cell a.ox-image-link:has(i.mdi-border-color):hover i,
body:not(.login-mode-active) .ox-list td.ox-list-action-cell a.ox-image-link:has(i.mdi-pencil):hover i {
    color: var(--color-action-edit-hover) !important;
}
body:not(.login-mode-active) .ox-list td.ox-list-action-cell a.ox-image-link:has(i.mdi-delete):hover,
body:not(.login-mode-active) .ox-list td.ox-list-action-cell a.ox-image-link:has(i.mdi-trash-can):hover {
    background-color: var(--color-action-delete-bg) !important;
}
body:not(.login-mode-active) .ox-list td.ox-list-action-cell a.ox-image-link:has(i.mdi-delete):hover i,
body:not(.login-mode-active) .ox-list td.ox-list-action-cell a.ox-image-link:has(i.mdi-trash-can):hover i {
    color: var(--color-action-delete-hover) !important;
}
body:not(.login-mode-active) .ox-list td.ox-list-action-cell a.ox-image-link:active i {
    transform: scale(0.9);
}
body:not(.login-mode-active) .ox-list td.ox-list-action-cell a.ox-image-link:focus-visible {
    outline: 2px solid var(--color-focus-ring) !important;
    outline-offset: 2px !important;
}
/* ==========================================================================
   10.5-B FIX TOTAL BOTÓN NUEVO (LITE + DARK)
   base.css pinta el <i> con background #FF9900 y color propio.
   Aquí integramos icono y etiqueta al botón para que hereden los tokens.
   ========================================================================== */
body:not(.login-mode-active) .ox-button-bar a[id*="new"],
body:not(.login-mode-active) .ox-button-bar a.ox-default-action {
    background: var(--color-action-create) !important;
    background-image: none !important;
    color: var(--color-on-create) !important;
    border: none !important;
    box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12) !important;
}
body:not(.login-mode-active) .ox-button-bar a[id*="new"] i,
body:not(.login-mode-active) .ox-button-bar a.ox-default-action i {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--color-on-create) !important;
    box-shadow: none !important;
}
body:not(.login-mode-active) .ox-button-bar a[id*="new"] .ox-action-label,
body:not(.login-mode-active) .ox-button-bar a.ox-default-action .ox-action-label {
    background: transparent !important;
    color: var(--color-on-create) !important;
}
body:not(.login-mode-active) .ox-button-bar a[id*="new"]:hover,
body:not(.login-mode-active) .ox-button-bar a.ox-default-action:hover {
    background: var(--color-action-create-hover) !important;
}
body:not(.login-mode-active) .ox-button-bar a[id*="new"]:hover i,
body:not(.login-mode-active) .ox-button-bar a[id*="new"]:hover .ox-action-label,
body:not(.login-mode-active) .ox-button-bar a.ox-default-action:hover i,
body:not(.login-mode-active) .ox-button-bar a.ox-default-action:hover .ox-action-label {
    background: transparent !important;
    color: var(--color-on-create) !important;
}
body:not(.login-mode-active) .ox-button-bar a[id*="new"]:focus-visible,
body:not(.login-mode-active) .ox-button-bar a.ox-default-action:focus-visible {
    outline: 2px solid var(--color-focus-ring) !important;
    outline-offset: 2px !important;
}
/* ---------- 10.6 SECUNDARIAS (CERRAR CAJA, IMPRIMIR, formatos...) ----------
   NUEVO, acción por defecto y ayuda quedan EXCLUIDOS. */
body:not(.login-mode-active) .ox-button-bar a:not(.ox-default-action):not([id*="new"]):not(.ox-help),
body:not(.login-mode-active) .ox-button-bar button:not(.ox-default-action):not([id*="new"]) {
    color: var(--color-action-secondary) !important;
    border: 1px solid var(--color-border) !important;
    background: transparent !important;
}
body:not(.login-mode-active) .ox-button-bar a:not(.ox-default-action):not([id*="new"]):not(.ox-help):hover,
body:not(.login-mode-active) .ox-button-bar button:not(.ox-default-action):not([id*="new"]):hover {
    color: var(--color-action-secondary-hover) !important;
    background-color: var(--color-surface-hover) !important;
    border-color: var(--color-action-secondary) !important;
}
body:not(.login-mode-active) .ox-button-bar a:not(.ox-default-action):not([id*="new"]):not(.ox-help) i,
body:not(.login-mode-active) .ox-button-bar button:not(.ox-default-action):not([id*="new"]) i {
    color: inherit !important;
}
/* ==========================================================================
   10.7 ACCIONES DESTRUCTIVAS: BARRA DE HERRAMIENTAS Y LIMPIEZA DE FILTROS
   El rojo semántico (--color-action-delete) también rige para:
   - Botón "Borrar" de la barra superior (CRUD.deleteSelected / deleteRow).
   - Icono "Borra valores del filtro" (mdi-eraser / xava_clear_condition).
   Dark/Lite se adaptan solos vía tokens.
   ========================================================================== */
/* --- BOTÓN BORRAR DE LA BARRA (texto + icono en rojo) ---
   La cadena de :not() supera en especificidad a la regla de secundarias (10.6) */
body:not(.login-mode-active) .ox-button-bar a:not(.ox-default-action):not([id*="new"]):not(.ox-help)[id*="delete"],
body:not(.login-mode-active) .ox-button-bar a:not(.ox-default-action):not([id*="new"]):not(.ox-help)[id*="delete"] i {
    color: var(--color-action-delete) !important;
}
body:not(.login-mode-active) .ox-button-bar a:not(.ox-default-action):not([id*="new"]):not(.ox-help)[id*="delete"]:hover {
    color: var(--color-action-delete-hover) !important;
    background-color: var(--color-action-delete-bg) !important;
    border-color: var(--color-action-delete) !important;
}
body:not(.login-mode-active) .ox-button-bar a:not(.ox-default-action):not([id*="new"]):not(.ox-help)[id*="delete"]:hover i {
    color: var(--color-action-delete-hover) !important;
}
body:not(.login-mode-active) .ox-button-bar a:not(.ox-default-action):not([id*="new"]):not(.ox-help)[id*="delete"]:focus-visible {
    outline: 2px solid var(--color-action-delete) !important;
    outline-offset: 2px !important;
}
/* --- LIMPIAR FILTRO (mdi-eraser) en rojo, con chip de hover --- */
body:not(.login-mode-active) .ox-list-subheader i.mdi-eraser,
body:not(.login-mode-active) .ox-list-subheader a.xava_clear_condition,
body:not(.login-mode-active) .ox-list-subheader a:has(i.mdi-eraser) {
    color: var(--color-action-delete) !important;
}
body:not(.login-mode-active) .ox-list-subheader a:has(i.mdi-eraser),
body:not(.login-mode-active) .ox-list-subheader a.xava_clear_condition {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 6px !important;
    border-radius: 8px !important;
    transition: background-color 0.15s ease !important;
}
body:not(.login-mode-active) .ox-list-subheader a:has(i.mdi-eraser):hover,
body:not(.login-mode-active) .ox-list-subheader a.xava_clear_condition:hover {
    background-color: var(--color-action-delete-bg) !important;
}
body:not(.login-mode-active) .ox-list-subheader a:has(i.mdi-eraser):hover i,
body:not(.login-mode-active) .ox-list-subheader i.mdi-eraser:hover {
    color: var(--color-action-delete-hover) !important;
}
/* ==========================================================================
   10.8 DOCUMENTOS Y PERSISTENCIA: PDF / EXCEL / GRABAR (Dark + Lite)
   La cadena de :not() supera a la regla de secundarias (10.6) sin tocarla.
   ========================================================================== */
/* ---------- PDF (rojo Adobe) ---------- */
body:not(.login-mode-active) .ox-button-bar a:not(.ox-default-action):not([id*="new"]):not(.ox-help)[id*="generatePdf"],
body:not(.login-mode-active) .ox-button-bar a:not(.ox-default-action):not([id*="new"]):not(.ox-help)[id*="generatePdf"] i {
    color: var(--color-action-pdf) !important;
}
body:not(.login-mode-active) .ox-button-bar a:not(.ox-default-action):not([id*="new"]):not(.ox-help)[id*="generatePdf"]:hover {
    color: var(--color-action-pdf-hover) !important;
    background-color: var(--color-action-pdf-bg) !important;
    border-color: var(--color-action-pdf) !important;
}
body:not(.login-mode-active) .ox-button-bar a:not(.ox-default-action):not([id*="new"]):not(.ox-help)[id*="generatePdf"]:hover i {
    color: var(--color-action-pdf-hover) !important;
}
/* ---------- EXCEL (verde Microsoft) ---------- */
body:not(.login-mode-active) .ox-button-bar a:not(.ox-default-action):not([id*="new"]):not(.ox-help)[id*="generateExcel"],
body:not(.login-mode-active) .ox-button-bar a:not(.ox-default-action):not([id*="new"]):not(.ox-help)[id*="generateExcel"] i {
    color: var(--color-action-excel) !important;
}
body:not(.login-mode-active) .ox-button-bar a:not(.ox-default-action):not([id*="new"]):not(.ox-help)[id*="generateExcel"]:hover {
    color: var(--color-action-excel-hover) !important;
    background-color: var(--color-action-excel-bg) !important;
    border-color: var(--color-action-excel) !important;
}
body:not(.login-mode-active) .ox-button-bar a:not(.ox-default-action):not([id*="new"]):not(.ox-help)[id*="generateExcel"]:hover i {
    color: var(--color-action-excel-hover) !important;
}
/* ---------- GRABAR / GUARDAR (verde éxito) ---------- */
body:not(.login-mode-active) .ox-button-bar a:not(.ox-default-action):not([id*="new"]):not(.ox-help)[id*="__save"],
body:not(.login-mode-active) .ox-button-bar a:not(.ox-default-action):not([id*="new"]):not(.ox-help)[id*="__save"] i {
    color: var(--color-action-save) !important;
}
body:not(.login-mode-active) .ox-button-bar a:not(.ox-default-action):not([id*="new"]):not(.ox-help)[id*="__save"]:hover {
    color: var(--color-action-save-hover) !important;
    background-color: var(--color-action-save-bg) !important;
    border-color: var(--color-action-save) !important;
}
body:not(.login-mode-active) .ox-button-bar a:not(.ox-default-action):not([id*="new"]):not(.ox-help)[id*="__save"]:hover i {
    color: var(--color-action-save-hover) !important;
}
/* ---------- FOCO accesible para los tres ---------- */
body:not(.login-mode-active) .ox-button-bar a[id*="generatePdf"]:focus-visible,
body:not(.login-mode-active) .ox-button-bar a[id*="generateExcel"]:focus-visible,
body:not(.login-mode-active) .ox-button-bar a[id*="__save"]:focus-visible {
    outline: 2px solid var(--color-focus-ring) !important;
    outline-offset: 2px !important;
}
/* ==========================================================
   ICONO ACTUALIZAR PRECIO ? ÚNICO Y ESPECTACULAR
   Scopeado por id: NO afecta a otros mdi-cash-sync de la app
   ========================================================== */
/* ---------- 1) Icono junto al campo "Precio de Venta" ---------- */
#ox_comercial_Items__property_actions_precioConIva a {
    padding: 4px 6px;
    border-radius: 8px;
    display: inline-block;
}
#ox_comercial_Items__property_actions_precioConIva i.mdi,
#ox_comercial_Items__property_actions_precioConIva i.mdi::before {
    color: var(--color-action-precio) !important;
}
#ox_comercial_Items__property_actions_precioConIva i.mdi {
    font-size: 26px !important;
    line-height: 1 !important;
    vertical-align: middle;
    filter: drop-shadow(0 0 6px var(--color-action-precio-glow));
    transition: transform .15s ease, filter .15s ease, color .15s ease;
}
#ox_comercial_Items__property_actions_precioConIva a:hover {
    background: var(--color-action-precio-bg);
}
#ox_comercial_Items__property_actions_precioConIva a:hover i.mdi,
#ox_comercial_Items__property_actions_precioConIva a:hover i.mdi::before {
    color: var(--color-action-precio-hover) !important;
    filter: drop-shadow(0 0 12px var(--color-action-precio-glow));
    transform: scale(1.15) rotate(20deg);
}
/* ---------- 2) Toolbar: forzamos el MISMO color (ganan especificidad) ---------- */
body:not(.login-mode-active) .ox-button-bar a:not(.ox-default-action):not([id*="new"]):not(.ox-help)[id*="ActualizarPrecio"],
body:not(.login-mode-active) .ox-button-bar a:not(.ox-default-action):not([id*="new"]):not(.ox-help)[id*="ActualizarPrecio"] i,
body:not(.login-mode-active) .ox-button-bar a:not(.ox-default-action):not([id*="new"]):not(.ox-help)[id*="ActualizarPrecio"] i::before {
    color: var(--color-action-precio) !important;
}
body:not(.login-mode-active) .ox-button-bar a:not(.ox-default-action):not([id*="new"]):not(.ox-help)[id*="ActualizarPrecio"]:hover,
body:not(.login-mode-active) .ox-button-bar a:not(.ox-default-action):not([id*="new"]):not(.ox-help)[id*="ActualizarPrecio"]:hover i,
body:not(.login-mode-active) .ox-button-bar a:not(.ox-default-action):not([id*="new"]):not(.ox-help)[id*="ActualizarPrecio"]:hover i::before {
    color: var(--color-action-precio-hover) !important;
    background-color: var(--color-action-precio-bg) !important;
}
body:not(.login-mode-active) a[id*="ActualizarPrecio"]:focus-visible {
    outline: 2px solid var(--color-focus-ring) !important;
    outline-offset: 2px !important;
}
/* ========== GUARDAR: filled M3 con semántica save (solo color) ========== */
body:not(.login-mode-active) input[data-action="DialogoPrecio.guardar"] {
    background-color: var(--color-action-save) !important;
    color: var(--color-on-save) !important;
    border: none !important;
    box-shadow: none !important;
}
body:not(.login-mode-active) input[data-action="DialogoPrecio.guardar"]:hover {
    background-color: var(--color-action-save-hover) !important;
    color: var(--color-on-save) !important;
}
body:not(.login-mode-active) input[data-action="DialogoPrecio.guardar"]:focus-visible {
    outline: 2px solid var(--color-focus-ring) !important;
    outline-offset: 2px !important;
}
/* ========== CANCELAR: outlined M3 ========== */
body:not(.login-mode-active) input[data-action="DialogoPrecio.cancel"] {
    background-color: transparent !important;
    color: var(--color-action-secondary) !important;
    border: 1px solid var(--color-border) !important;
}
body:not(.login-mode-active) input[data-action="DialogoPrecio.cancel"]:hover {
    background-color: var(--color-surface-hover) !important;
    color: var(--color-action-secondary-hover) !important;
}
/* ========== SUPERFICIES DEL DIÁLOGO (jerarquía M3 correcta) ========== */
body:not(.login-mode-active) .ui-dialog {
    background: var(--md-surface-container) !important;
    border: 1px solid var(--md-outline) !important;
}
body:not(.login-mode-active) .ui-dialog .ox-frame,
body:not(.login-mode-active) .ui-dialog .ox-frame-content {
    background: transparent !important;
    border-color: var(--md-table-border-color) !important;
}
/* ---------- ICONO DE VIGENCIA en HISTORIAL PRECIOS ---------- */
body:not(.login-mode-active) [id*="historialPrecios"] .mdi-check-circle,
body:not(.login-mode-active) [id*="historialPrecios"] .mdi-check-circle::before {
    color: var(--color-ingreso) !important;
}
body:not(.login-mode-active) [id*="historialPrecios"] .mdi-close-circle,
body:not(.login-mode-active) [id*="historialPrecios"] .mdi-close-circle::before {
    color: var(--color-egreso) !important;
}
body:not(.login-mode-active) [id*="historialPrecios"] i.mdi {
    font-size: 18px !important;
}
/* ============================================================
   TARJETA KPI ? Estructura uniforme + theming automático
   ============================================================ */
.ind-head,
.ind-head-actions {
    height: 24px;
    max-height: 24px;
}
.ind-value {
    height: 37px;
    max-height: 37px;
}
.ind-subtitle {
    height: 20px;
    max-height: 20px;
}
.ind-footer {
    height: 16px;
    max-height: 16px;
}
/* ============================================================
   CONTROL DE DESBORDAMIENTO
   ============================================================ */
.ind-head {
    overflow: visible;
}
.ind-value,
.ind-subtitle,
.ind-footer {
    overflow: hidden;
}
/* --- Acentos de tema: alias de paleta existente --- */
.ind-card           { --kpi-accent: var(--color-compra); }
.ind-theme-blue     { --kpi-accent: var(--color-compra); }
.ind-theme-purple   { --kpi-accent: var(--color-cliente); }
.ind-theme-green    { --kpi-accent: var(--color-ingreso); }
.ind-theme-red      { --kpi-accent: var(--color-egreso); }
.ind-theme-yellow   { --kpi-accent: var(--color-action-precio); }
/* --- Semáforo LED: intensidad de brillo según nivel de alerta --- */
/* --- Tarjeta: contenedor maestro (gap único, sin márgenes hijos) --- */
.ind-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    padding: 16px;
    background: var(--md-surface-container);
    border: 1px solid var(--md-hairline);
    border-radius: var(--border-radius-base);
    box-shadow: 0 8px 24px var(--md-shadow-soft);
    overflow: hidden;
    font-family: var(--font-body);
}
/* --- ZONA 1 · Header: slot fijo de 24px, con o sin semáforo --- */
.ind-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; min-height: 24px;
}
.ind-title {
    margin: 0; font-size: 11px; font-weight: 600;
    letter-spacing: .8px; text-transform: uppercase;
    color: var(--md-text-sub);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ind-head-actions { display: flex; align-items: center; gap: 8px; height: 24px; flex: none; }
.ind-dot {
    width: 10px; height: 10px; border-radius: 50%; flex: none;
    background: var(--kpi-accent);
    box-shadow: 0 0 6px color-mix(in srgb, var(--kpi-accent) 70%, transparent);
}
/* --- Botón de acceso directo: absoluto, centro-derecha, capa inferior --- */
.ind-click-indicator {
    position: absolute;
    right: 12px;
    top: 50%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    color: var(--kpi-accent);
    background: color-mix(in srgb, var(--kpi-accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--kpi-accent) 28%, transparent);
    opacity: .55;
    z-index: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease;
}
.ind-card > :not(.ind-click-indicator) { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
    .ind-card-clickable:hover .ind-click-indicator {
        opacity: 1;
        transform: scale(1.08);
        box-shadow: 0 0 12px color-mix(in srgb, var(--kpi-accent) 35%, transparent);
    }
}
@media (hover: none) and (pointer: coarse) {
    .ind-click-indicator { opacity: .7; }
}
.ind-click-indicator {
    width: 24px; height: 24px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center; font-size: 13px;
    color: var(--kpi-accent);
    background: color-mix(in srgb, var(--kpi-accent) 16%, transparent);
    opacity: .55; transition: opacity .2s ease, transform .2s ease;
}
/* --- ZONA 2 · Valor: altura fija de una línea --- */
.ind-value {
    font-family: var(--font-display);
    font-size: 32px; font-weight: 700; line-height: 1.15; min-height: 37px;
    color: var(--kpi-accent);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* --- ZONA 3 · Subtítulo: slot fijo de 20px --- */
.ind-subtitle {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; min-height: 20px; font-size: 13px; color: var(--md-text-main);
}
.ind-subtitle-label {
    display: flex; align-items: center; gap: 6px; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ind-subtitle-label i { color: var(--kpi-accent); font-size: 16px; flex: none; }
.kpi-privacy-eye { cursor: pointer; flex: none; font-size: 18px;
    color: var(--md-text-sub); transition: color .2s; }
.kpi-privacy-eye:hover { color: var(--md-text-main); }
/* --- ZONA 4 · Barra: anclada abajo con margin-top:auto --- */
.ind-progress-track {
    position: relative; height: 6px; border-radius: 3px; flex: none;
    background: var(--md-surface-variant);
    margin-top: auto;
}
.ind-progress-fill {
    position: relative; height: 100%; border-radius: inherit;
    background: var(--kpi-accent); transition: width .6s ease;
}
.pending-badge {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    padding: 1px 7px; border-radius: 9px;
    background: var(--md-surface);
    border: 1px solid color-mix(in srgb, var(--kpi-state) 60%, transparent);
    color: var(--kpi-state);
    font-size: 10px; font-weight: 700; line-height: 14px;
    box-shadow: 0 2px 4px var(--md-shadow-soft);
}
.pending-badge.semaforo-rojo { animation: kpi-shake .5s ease-in-out infinite; }
/* --- ZONA 5 · Footer: slot fijo de 16px, una línea --- */
.ind-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; min-height: 16px; font-size: 11px; color: var(--md-text-sub);
}
.ind-footer > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ind-footer-right { font-weight: 600; color: var(--kpi-accent); }
.ind-footer-right.semaforo-verde,
.ind-footer-right.semaforo-naranja,
.ind-footer-right.semaforo-rojo {
    color: var(--kpi-state); text-transform: uppercase; letter-spacing: .5px;
}
.ind-footer-right.semaforo-rojo { animation: kpi-blink 1s step-start infinite; }
/* --- Accesibilidad y interacción (acceso directo) --- */
.ind-card-clickable {
    cursor: pointer; user-select: none; -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ind-card-clickable:focus-visible {
    outline: 2px solid var(--color-focus-ring); outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
    .ind-card-clickable:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 28px var(--md-shadow-strong);
        border-color: color-mix(in srgb, var(--kpi-accent) 40%, transparent);
    }
    .ind-card-clickable:hover .ind-click-indicator { opacity: 1; transform: scale(1.08); }
}
@media (hover: none) and (pointer: coarse) {
    .ind-card-clickable .ind-click-indicator { opacity: .7; }
    .ind-card-clickable:active { transform: scale(.98); }
}
/* =========================================================
   KPI - SEMÁFORO DE ESTADO
   ========================================================= */
.semaforo-verde {
    --kpi-state: var(--color-ingreso);
    --led-speed: 2.6s;
    --led-glow: 5px;
}
.semaforo-naranja {
    --kpi-state: var(--color-action-precio);
    --led-speed: 1.15s;
    --led-glow: 8px;
}
.semaforo-rojo {
    --kpi-state: var(--color-egreso);
    --led-speed: .55s;
    --led-glow: 12px;
}
.semaforo-indicator {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background:
            color-mix(in srgb, var(--kpi-state) 12%, transparent);
    border:
            1px solid
            color-mix(in srgb, var(--kpi-state) 30%, transparent);
}
.semaforo-led {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--kpi-state);
    animation:
            kpi-led-breathe
            var(--led-speed)
            ease-in-out
            infinite;
}
.semaforo-rojo .semaforo-led {
    animation-name: kpi-led-critical;
}
@keyframes kpi-led-critical {
    0%, 100% {
        opacity: .35;
        transform: scale(.82);
        box-shadow:
                0 0 2px
                color-mix(in srgb, var(--kpi-state) 45%, transparent);
    }
    50% {
        opacity: 1;
        transform: scale(1.18);
        box-shadow:
                0 0 12px 4px
                color-mix(in srgb, var(--kpi-state) 85%, transparent);
    }
}
/* --- Animaciones sin color (theme-safe) --- */
@keyframes kpi-led-breathe {
    0%, 100% {
        opacity: .45;
        transform: scale(.85);
        box-shadow: 0 0 1px 0 color-mix(in srgb, var(--kpi-state) 35%, transparent);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
        box-shadow: 0 0 var(--led-glow) calc(var(--led-glow) / 3)
        color-mix(in srgb, var(--kpi-state) 90%, transparent);
    }
}
/* ============================================================
   TARJETA KPI ? NAVEGACIÓN TEMPORAL
   Solo aparece cuando modificadorFechas="1"
   ============================================================ */
.ind-title-zone {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    height: 24px;
}
.ind-title-zone .ind-title {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    line-height: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* ============================================================
   BOTONES DE FECHA
   Reset completo del <button> nativo del navegador
   ============================================================ */
.kpi-date-nav {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    min-width: 22px;
    max-width: 22px;
    min-height: 22px;
    max-height: 22px;
    flex: 0 0 22px;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:
            color-mix(
                    in srgb,
                    var(--kpi-accent) 10%,
                    transparent
            );
    color: var(--kpi-accent);
    font-family: inherit;
    line-height: 1;
    box-shadow: none;
    cursor: pointer;
    box-sizing: border-box;
    opacity: .8;
    transition:
            background-color .18s ease,
            color .18s ease,
            transform .18s ease,
            opacity .18s ease,
            box-shadow .18s ease;
}
.kpi-date-nav i {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    color: inherit;
    pointer-events: none;
}
/* --- Responsive uniforme (aplica a TODAS las tarjetas por igual) --- */
@media (max-width: 480px) {
    .ind-card {
        padding: 14px;
        gap: 10px;
    }
    .ind-value {
        font-size: 28px;
        min-height: 32px;
    }
}
/* ============================================================
   TARJETA KPI ? TOUCH TARGET DE NAVEGACIÓN DE FECHA
   El icono sigue pequeño, pero el área táctil real es ~44x44
   ============================================================ */
@media (max-width: 768px), (pointer: coarse) {
    .ind-head {
        overflow: visible !important;
    }
    .ind-title-zone {
        overflow: visible !important;
    }
    .kpi-date-nav {
        position: relative !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        flex: 0 0 28px !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    .kpi-date-nav::before {
        content: "";
        position: absolute;
        top: -8px;
        right: -8px;
        bottom: -8px;
        left: -8px;
        border-radius: 50%;
        background: transparent;
        pointer-events: auto;
    }
    .kpi-date-nav i {
        position: relative;
        z-index: 1;
        width: 28px;
        height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 20px;
        pointer-events: none;
    }
    .kpi-date-nav:active:not(:disabled) i {
        transform: scale(.86);
        background:
                color-mix(
                        in srgb,
                        var(--kpi-accent) 28%,
                        transparent
                );
    }
    .kpi-date-nav:disabled {
        opacity: .25 !important;
    }
}
/* ============================================================
   TARJETA KPI ? CARRUSEL MÓVIL TIPO FLUTTER / PAGE VIEW
   ============================================================ */
.kpi-mobile-carousel {
    display: contents;
}
.kpi-mobile-indicators {
    display: none;
}
@media (max-width: 768px) {
    body.mobile .kpi-mobile-carousel {
        display: block;
        position: relative;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    body.mobile .kpi-mobile-scroller {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch;
        gap: 12px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        padding:
                4px
                16px
                8px
                4px !important;
        scroll-padding-left: 4px;
        box-sizing: border-box;
        scrollbar-width: none;
    }
    body.mobile .kpi-mobile-scroller::-webkit-scrollbar {
        display: none;
    }
    body.mobile
    .kpi-mobile-scroller
    > .phone-detail-element {
        display: block !important;
        flex:
                0 0 88% !important;
        width: 88% !important;
        min-width: 88% !important;
        max-width: 88% !important;
        padding: 0 !important;
        margin: 0 !important;
        border-bottom: none !important;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        box-sizing: border-box !important;
    }
    body.mobile
    .kpi-mobile-scroller
    .ind-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    /* ========================================================
       INDICADORES TIPO FLUTTER
       ======================================================== */
    body.mobile .kpi-mobile-indicators {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 24px;
        margin-top: 4px;
        margin-bottom: 8px;
    }
    body.mobile .kpi-page-dot {
        appearance: none;
        -webkit-appearance: none;
        display: block;
        width: 7px;
        height: 7px;
        min-width: 7px;
        min-height: 7px;
        padding: 0;
        margin: 0;
        border: none;
        border-radius: 999px;
        background:
                color-mix(
                        in srgb,
                        var(--md-text-sub) 45%,
                        transparent
                );
        cursor: pointer;
        opacity: .65;
        transition:
                width .25s ease,
                background-color .25s ease,
                opacity .25s ease,
                transform .25s ease;
        -webkit-tap-highlight-color: transparent;
    }
    body.mobile .kpi-page-dot.is-active {
        width: 20px;
        background: var(--md-primary);
        opacity: 1;
    }
    body.mobile .kpi-page-dot:active {
        transform: scale(.85);
    }
}
/* ============================================================
   KPI MÓVIL ? TÍTULO Y FECHA EN UNA SOLA LÍNEA
   ============================================================ */
.kpi-title-prefix,
.kpi-title-date {
    white-space: nowrap;
}
@media (max-width: 768px) {
    body.mobile .ind-head {
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        gap: 3px !important;
        overflow: visible !important;
        align-items: center !important;
    }
    body.mobile .ind-head-actions {
        height: 32px !important;
        max-height: 32px !important;
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        margin-left: 2px !important;
    }
    body.mobile .ind-title-zone {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        height: 32px !important;
        gap: 2px !important;
        overflow: visible !important;
    }
    body.mobile .ind-title-zone .ind-title {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        gap: 3px !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        letter-spacing: .15px !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        word-break: keep-all !important;
    }
    body.mobile .kpi-title-de {
        display: none !important;
    }
    body.mobile .kpi-title-prefix {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }
    body.mobile .kpi-title-date {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }
    body.mobile .kpi-date-nav {
        flex-shrink: 0 !important;
    }
}
@media (hover: hover) and (pointer: fine) {
    .kpi-date-nav:hover:not(:disabled) {
        opacity: 1;
        background:
                color-mix(
                        in srgb,
                        var(--kpi-accent) 22%,
                        transparent
                );
        transform: scale(1.10);
        box-shadow:
                0 0 8px
                color-mix(
                        in srgb,
                        var(--kpi-accent) 25%,
                        transparent
                );
    }
}
.kpi-date-nav:active:not(:disabled) {
    transform: scale(.90);
}
.kpi-date-nav:focus-visible {
    outline: 2px solid var(--kpi-accent);
    outline-offset: 1px;
    opacity: 1;
}
.kpi-date-nav:disabled {
    display: inline-flex;
    opacity: .22;
    cursor: default;
    background:
            color-mix(
                    in srgb,
                    var(--md-text-sub) 8%,
                    transparent
            );
    color: var(--md-text-sub);
    box-shadow: none;
    transform: none;
}
@media (hover: none) and (pointer: coarse) {
    .kpi-date-nav:not(:disabled) {
        opacity: 1;
    }
}
@media (prefers-reduced-motion: reduce) {
    .semaforo-led { animation: none; opacity: 1;
        box-shadow: 0 0 var(--led-glow) calc(var(--led-glow) / 3)
        color-mix(in srgb, var(--kpi-state) 80%, transparent); }
}
@keyframes kpi-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes kpi-blink { 50% { opacity: .55; } }
@keyframes kpi-shake {
    0%,100% { transform: translateY(-50%) translateX(0); }
    25%     { transform: translateY(-50%) translateX(-1px); }
    75%     { transform: translateY(-50%) translateX(1px); }
}
/* --- Responsive uniforme (aplica a TODAS las tarjetas por igual) --- */
@media (max-width: 480px) {
    .ind-card { padding: 14px; gap: 10px; }
    .ind-value { font-size: 28px; min-height: 32px; }
}

/* ==========================================================================
   MENU 2.0 ? ESTADO ESTABLE, LAYOUT, NAVEGACIÓN Y USUARIO
   ========================================================================== */
:root{
    --menu2-sidebar-width:272px;
    --menu2-sidebar-collapsed-width:60px;
    --menu2-scroll-margin:12px;
    --menu2-popup-gap:8px;
    --menu2-entry-idle:color-mix(in srgb,var(--md-text-main) 58%,var(--md-text-sub));
    --menu2-entry-hover:var(--md-text-main);
    --menu2-entry-active:var(--md-primary);
}

/* ---------- Shell ---------- */
body:has(#modules_list[data-menu-version="2.0"]) #main{
    display:flex!important;
    flex-wrap:nowrap!important;
    width:100vw!important;
    max-width:100vw!important;
    height:100vh!important;
    overflow:hidden!important;
}
body:has(#modules_list[data-menu-version="2.0"]) #modules_list{
    display:flex!important;
    flex-direction:column!important;
    visibility:visible!important;
    opacity:1!important;
    position:relative!important;
    left:0!important;
    margin:0!important;
    padding:0!important;
    flex:0 0 var(--menu2-sidebar-width)!important;
    width:var(--menu2-sidebar-width)!important;
    min-width:var(--menu2-sidebar-width)!important;
    max-width:var(--menu2-sidebar-width)!important;
    height:100vh!important;
    min-height:0!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
    background:var(--modules-list-background)!important;

    /*
     * IMPORTANTE:
     * La inicialización/restauración NO anima el ancho.
     * Los cambios explicitos tampoco dejan transiciones pendientes.
     */
    transition:none!important;
}


/*
 * El estado visual canónico vive también en #modules_list.
 * Así el JSP puede renderizar directamente contraído antes de ejecutar JS.
 */
body:has(#modules_list[data-menu-version="2.0"]) #modules_list.menu2-collapsed{
    flex-basis:var(--menu2-sidebar-collapsed-width)!important;
    width:var(--menu2-sidebar-collapsed-width)!important;
    min-width:var(--menu2-sidebar-collapsed-width)!important;
    max-width:var(--menu2-sidebar-collapsed-width)!important;
}

/* ---------- Tres zonas: cabecera / navegación / usuario ---------- */
body:has(#modules_list[data-menu-version="2.0"]) #modules_list_top{
    position:relative;
    flex:0 0 auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    box-sizing:border-box!important;
    background:radial-gradient(
            120px 70px at calc(100% - 18px) 18px,
            color-mix(in srgb,var(--md-primary) 10%,transparent),
            transparent 72%
    )!important;
}
body:has(#modules_list[data-menu-version="2.0"]) #modules_list_outbox{
    display:block!important;
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
}
body:has(#modules_list[data-menu-version="2.0"]) #modules_list_box,
body:has(#modules_list[data-menu-version="2.0"]) #modules_list_box>tbody,
body:has(#modules_list[data-menu-version="2.0"]) #modules_list_content,
body:has(#modules_list[data-menu-version="2.0"]) #modules_list_content>td{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    border-spacing:0!important;
    border-collapse:collapse!important;
    box-sizing:border-box!important;
}
body:has(#modules_list[data-menu-version="2.0"]) #modules_list_core{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-width:100%!important;
    padding:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:contain;
    box-sizing:border-box!important;
    scrollbar-width:thin;
    scrollbar-color:transparent transparent;
}
body:has(#modules_list[data-menu-version="2.0"]) #modules_list_core::-webkit-scrollbar{width:7px}
body:has(#modules_list[data-menu-version="2.0"]) #modules_list_core::-webkit-scrollbar-track{background:transparent}
body:has(#modules_list[data-menu-version="2.0"]) #modules_list_core::-webkit-scrollbar-thumb{
    border:2px solid transparent;
    border-radius:10px;
    background:transparent;
    background-clip:padding-box;
}
body:has(#modules_list[data-menu-version="2.0"]) #modules_list:hover #modules_list_core{
    scrollbar-color:color-mix(in srgb,var(--md-text-sub) 34%,transparent) transparent;
}
body:has(#modules_list[data-menu-version="2.0"]) #modules_list:hover #modules_list_core::-webkit-scrollbar-thumb{
    background:color-mix(in srgb,var(--md-text-sub) 32%,transparent);
    background-clip:padding-box;
    box-shadow:0 0 8px color-mix(in srgb,var(--md-text-sub) 18%,transparent);
}

/* ---------- Cabecera/logo ---------- */
body:has(#modules_list[data-menu-version="2.0"]) #application_title{
    position:relative!important;
    padding:12px 14px 14px!important;
}
body:has(#modules_list[data-menu-version="2.0"]) #application_title::after{
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    bottom:0;
    height:1px;
    background:linear-gradient(
            90deg,
            transparent 0%,
            color-mix(in srgb,var(--md-text-sub) 16%,transparent) 12%,
            color-mix(in srgb,var(--md-text-sub) 30%,transparent) 50%,
            color-mix(in srgb,var(--md-text-sub) 16%,transparent) 88%,
            transparent 100%
    );
}

/* ---------- Buscador ---------- */
body:has(#modules_list[data-menu-version="2.0"]) #search_modules{
    position:relative!important;
    width:100%!important;
    margin:0!important;
    padding:10px 14px 14px!important;
    border-bottom:0!important;
    box-sizing:border-box!important;
    background:transparent!important;
}
body:has(#modules_list[data-menu-version="2.0"]) #search_modules input,
body:has(#modules_list[data-menu-version="2.0"]) #menu2_search_text{
    display:block!important;
    width:100%!important;
    height:38px!important;
    margin:0!important;
    padding:9px 34px 9px 36px!important;
    box-sizing:border-box!important;
    border:1px solid var(--md-input-border-subtle)!important;
    border-radius:9px!important;
    outline:0!important;
    background-color:var(--md-input-bg)!important;
    color:var(--md-text-main)!important;
    font-family:var(--font-body)!important;
    font-size:13px!important;
    transition:
            border-color .16s ease,
            background-color .16s ease,
            box-shadow .16s ease!important;
}
body:has(#modules_list[data-menu-version="2.0"]) #search_modules input::placeholder,
body:has(#modules_list[data-menu-version="2.0"]) #menu2_search_text::placeholder{
    color:var(--md-text-sub)!important;
    opacity:.82!important;
}
body:has(#modules_list[data-menu-version="2.0"]) #search_modules input:focus,
body:has(#modules_list[data-menu-version="2.0"]) #menu2_search_text:focus{
    border-color:var(--md-primary)!important;
    background-color:var(--md-surface-elevated)!important;
    box-shadow:0 0 0 2px color-mix(in srgb,var(--md-primary) 15%,transparent)!important;
}
body:has(#modules_list[data-menu-version="2.0"]) #search_modules .menu2-search-icon{
    position:absolute;
    left:24px;
    top:50%;
    transform:translateY(-50%);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:16px;
    height:16px;
    color:var(--md-text-sub);
    opacity:.92;
    pointer-events:none;
    z-index:2;
}
body:has(#modules_list[data-menu-version="2.0"]) #search_modules .menu2-search-icon i{
    margin:0!important;
    font-size:16px!important;
    line-height:1!important;
    color:inherit!important;
}

/* ---------- Árbol ---------- */
body:has(#modules_list[data-menu-version="2.0"]) #menu2_root,
body:has(#modules_list[data-menu-version="2.0"]) .menu2-root{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:8px 12px 24px!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
}
body:has(#modules_list[data-menu-version="2.0"]) .menu2-hidden-helper{display:none!important}
body:has(#modules_list[data-menu-version="2.0"]) .menu2-section{
    width:100%;
    margin:18px 0 0;
    box-sizing:border-box;
}
body:has(#modules_list[data-menu-version="2.0"]) .menu2-section:first-child{margin-top:8px}
body:has(#modules_list[data-menu-version="2.0"]) .menu2-section-title,
body:has(#modules_list[data-menu-version="2.0"]) .menu2-section-label{
    color:var(--md-text-sub)!important;
    font-family:var(--font-display);
    font-size:10px!important;
    font-weight:800!important;
    line-height:1.2!important;
    letter-spacing:1.45px!important;
    text-transform:uppercase!important;
    opacity:.88!important;
}
body:has(#modules_list[data-menu-version="2.0"]) .menu2-section-title{
    width:100%;
    padding:0 10px 7px!important;
    box-sizing:border-box;
}
body:has(#modules_list[data-menu-version="2.0"]) .menu2-section--favorites .menu2-section-title{
    color:var(--md-primary)!important;
    opacity:.92!important;
}
body:has(#modules_list[data-menu-version="2.0"]) .menu2-section-items{
    display:flex;
    flex-direction:column;
    width:100%;
    gap:2px;
}
body:has(#modules_list[data-menu-version="2.0"]) .menu2-folder-node{
    position:relative;
    width:100%;
}
body:has(#modules_list[data-menu-version="2.0"]) .menu2-folder-toggle,
body:has(#modules_list[data-menu-version="2.0"]) .menu2-module-link{
    position:relative;
    display:flex;
    align-items:center;
    width:100%;
    min-width:0;
    border:0;
    background:transparent;
    color:var(--menu2-entry-idle)!important;
    font:inherit;
    text-align:left;
    text-decoration:none!important;
    box-sizing:border-box;
    cursor:pointer;
    transition:
            background-color .18s ease,
            color .18s ease,
            transform .18s ease;
}
body:has(#modules_list[data-menu-version="2.0"]) .menu2-folder-toggle{
    min-height:42px;
    padding:5px 9px;
    border-radius:11px;
}
body:has(#modules_list[data-menu-version="2.0"]) .menu2-module-link{
    min-height:38px;
    padding:4px 8px;
    border-radius:9px;
}
body:has(#modules_list[data-menu-version="2.0"]) .menu2-folder-toggle:hover,
body:has(#modules_list[data-menu-version="2.0"]) .menu2-module-link:hover{
    color:var(--menu2-entry-hover)!important;
    background:color-mix(in srgb,var(--md-primary) 7%,transparent)!important;
}
body:has(#modules_list[data-menu-version="2.0"]) .menu2-entry-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 30px;
    width:30px;
    height:30px;
    margin-right:10px;
    border-radius:9px;
    color:currentColor!important;
    background:color-mix(in srgb,currentColor 10%,transparent)!important;
    transition:
            background-color .18s ease,
            box-shadow .18s ease,
            transform .18s ease;
}
body:has(#modules_list[data-menu-version="2.0"]) .menu2-entry-icon i{
    margin:0!important;
    padding:0!important;
    color:inherit!important;
    font-size:18px!important;
    line-height:1!important;
}
body:has(#modules_list[data-menu-version="2.0"]) .menu2-module-link .menu2-entry-icon{
    flex-basis:26px;
    width:26px;
    height:26px;
    margin-right:8px;
    background:transparent!important;
}
body:has(#modules_list[data-menu-version="2.0"]) .menu2-module-link .menu2-entry-icon i{font-size:16px!important}
body:has(#modules_list[data-menu-version="2.0"]) .menu2-module-link--favorite .menu2-entry-icon{
    color:var(--md-primary)!important;
    background:color-mix(in srgb,var(--md-primary) 10%,transparent)!important;
}
body:has(#modules_list[data-menu-version="2.0"]) .menu2-folder-toggle:hover .menu2-entry-icon,
body:has(#modules_list[data-menu-version="2.0"]) .menu2-module-link:hover .menu2-entry-icon{
    color:var(--menu2-entry-hover)!important;
    background:color-mix(in srgb,var(--md-primary) 12%,transparent)!important;
    box-shadow:none!important;
}
body:has(#modules_list[data-menu-version="2.0"]) .menu2-entry-text{
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    color:inherit;
    font-family:var(--font-body);
    font-size:13.5px;
    font-weight:500;
    line-height:1.2;
    white-space:nowrap;
    text-overflow:ellipsis;
}
body:has(#modules_list[data-menu-version="2.0"]) .menu2-entry-trailing{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 20px;
    margin-left:5px;
    color:color-mix(in srgb,var(--md-text-sub) 92%,transparent)!important;
    opacity:.9!important;
    transition:
            color .18s ease,
            opacity .18s ease,
            transform .18s ease;
}
body:has(#modules_list[data-menu-version="2.0"]) .menu2-folder-toggle:hover .menu2-entry-trailing{
    color:var(--md-primary)!important;
    opacity:1!important;
    transform:translateX(2px);
}
body:has(#modules_list[data-menu-version="2.0"]) .menu2-folder-children{
    display:none;
    margin:1px 0 4px 15px;
    padding-left:9px;
    border-left:1px solid color-mix(in srgb,var(--md-text-sub) 15%,transparent);
}
body:has(#modules_list[data-menu-version="2.0"]) .menu2-folder-node.is-open>.menu2-folder-children{display:block}
body:has(#modules_list[data-menu-version="2.0"]) .menu2-chevron{transition:transform .18s ease}
body:has(#modules_list[data-menu-version="2.0"]) .menu2-folder-node.is-open>.menu2-folder-toggle .menu2-chevron{transform:rotate(90deg)}

/* ---------- Búsqueda: independiente de navegación ---------- */
body:has(#modules_list[data-menu-version="2.0"]) #menu2_root .menu2-search-hidden{display:none!important}
body:has(#modules_list[data-menu-version="2.0"]) #menu2_root.is-searching .menu2-folder-node.is-search-open>.menu2-folder-children{display:block!important}
body:has(#modules_list[data-menu-version="2.0"]) #menu2_root.is-searching .menu2-folder-node.is-search-context>.menu2-folder-toggle{
    background:transparent!important;
    color:var(--menu2-entry-idle)!important;
}
body:has(#modules_list[data-menu-version="2.0"]) #menu2_root.is-searching .menu2-folder-node.is-search-context>.menu2-folder-toggle::before,
body:has(#modules_list[data-menu-version="2.0"]) #menu2_root.is-searching .menu2-folder-node.is-search-context>.menu2-folder-toggle::after{
    content:none!important;
    display:none!important;
}
body:has(#modules_list[data-menu-version="2.0"]) #menu2_root .menu2-module-link.is-search-match:not(.is-selected){
    background:transparent!important;
    color:var(--md-text-main)!important;
}
body:has(#modules_list[data-menu-version="2.0"]) #menu2_root .menu2-module-link.is-search-match:not(.is-selected) .menu2-entry-text{
    color:var(--md-text-main)!important;
    font-weight:650!important;
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-decoration-color:color-mix(in srgb,var(--md-primary) 45%,transparent);
    text-underline-offset:3px;
}
body:has(#modules_list[data-menu-version="2.0"]) #menu2_root .menu2-module-link.is-search-match:not(.is-selected)::before,
body:has(#modules_list[data-menu-version="2.0"]) #menu2_root .menu2-module-link.is-search-match:not(.is-selected)::after{
    content:none!important;
    display:none!important;
}

/* ---------- Selección única ---------- */
body:has(#modules_list[data-menu-version="2.0"]) #menu2_root .menu2-module-link.is-selected{
    position:relative;
    background:color-mix(in srgb,var(--md-primary) 11%,transparent)!important;
    color:var(--menu2-entry-active)!important;
}
body:has(#modules_list[data-menu-version="2.0"]) #menu2_root .menu2-module-link.is-selected .menu2-entry-icon,
body:has(#modules_list[data-menu-version="2.0"]) #menu2_root .menu2-module-link.is-selected .menu2-entry-text,
body:has(#modules_list[data-menu-version="2.0"]) #menu2_root .menu2-module-link.is-selected .menu2-entry-trailing{
    color:var(--menu2-entry-active)!important;
}
body:has(#modules_list[data-menu-version="2.0"]) #menu2_root .menu2-module-link.is-selected .menu2-entry-text{
    font-weight:650!important;
}
body:has(#modules_list[data-menu-version="2.0"]) #menu2_root .menu2-module-link.is-selected::before{
    content:none!important;
    display:none!important;
}
body:has(#modules_list[data-menu-version="2.0"]) #menu2_root .menu2-module-link.is-selected::after{
    content:"";
    position:absolute;
    right:3px;
    top:7px;
    bottom:7px;
    width:4px;
    border-radius:999px;
    background:var(--md-primary);
    box-shadow:0 0 10px color-mix(in srgb,var(--md-primary) 55%,transparent);
    pointer-events:none;
    z-index:4;
}
/* La carpeta que contiene al activo sigue siendo carpeta. */
body:has(#modules_list[data-menu-version="2.0"]) #menu2_root .menu2-folder-node:has(.menu2-module-link.is-selected)>.menu2-folder-toggle{
    background:transparent!important;
    color:var(--menu2-entry-idle)!important;
}
body:has(#modules_list[data-menu-version="2.0"]) #menu2_root .menu2-folder-node:has(.menu2-module-link.is-selected)>.menu2-folder-toggle .menu2-entry-icon,
body:has(#modules_list[data-menu-version="2.0"]) #menu2_root .menu2-folder-node:has(.menu2-module-link.is-selected)>.menu2-folder-toggle .menu2-entry-text{
    color:inherit!important;
    font-weight:500!important;
}
body:has(#modules_list[data-menu-version="2.0"]) #menu2_root .menu2-folder-node:has(.menu2-module-link.is-selected)>.menu2-folder-toggle::before,
body:has(#modules_list[data-menu-version="2.0"]) #menu2_root .menu2-folder-node:has(.menu2-module-link.is-selected)>.menu2-folder-toggle::after{
    content:none!important;
    display:none!important;
}

/* ---------- Footer usuario ---------- */
body:has(#modules_list[data-menu-version="2.0"]) #menu2_sidebar_footer{
    position:relative!important;
    flex:0 0 auto!important;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    width:100%;
    min-width:0;
    margin:0;
    padding:12px 14px;
    box-sizing:border-box;
    background:linear-gradient(
            180deg,
            color-mix(in srgb,var(--modules-list-background) 18%,transparent) 0%,
            var(--modules-list-background) 18%,
            var(--modules-list-background) 100%
    )!important;
    border-top:1px solid var(--md-hairline)!important;
    backdrop-filter:blur(10px);
}
body:has(#modules_list[data-menu-version="2.0"]) .menu2-userbox{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}
body:has(#modules_list[data-menu-version="2.0"]) .menu2-userbox-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 34px;
    width:34px;
    height:34px;
    border-radius:50%;
    font-weight:700;
    font-size:13px;
    color:var(--md-on-primary);
    background:linear-gradient(
            135deg,
            var(--md-primary),
            color-mix(in srgb,var(--md-primary) 72%,#fff)
    );
}
body:has(#modules_list[data-menu-version="2.0"]) .menu2-userbox-meta{
    display:flex;
    flex-direction:column;
    min-width:0;
}
body:has(#modules_list[data-menu-version="2.0"]) .menu2-userbox-name{
    font-size:13px;
    font-weight:700;
    line-height:1.1;
    color:var(--md-text-main);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
body:has(#modules_list[data-menu-version="2.0"]) .menu2-userbox-role{
    font-size:11px;
    line-height:1.1;
    color:var(--md-text-sub);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
body:has(#modules_list[data-menu-version="2.0"]) .menu2-userbox-logout{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 34px;
    width:34px;
    height:34px;
    border-radius:10px;
    border:1px solid var(--md-border-strong);
    background:var(--md-surface-container);
    color:var(--md-text-sub)!important;
    text-decoration:none!important;
    transition:
            background-color .18s ease,
            color .18s ease,
            border-color .18s ease;
}
body:has(#modules_list[data-menu-version="2.0"]) .menu2-userbox-logout:hover,
body:has(#modules_list[data-menu-version="2.0"]) .menu2-userbox-logout:focus-visible{
    color:var(--md-primary)!important;
    border-color:var(--md-primary)!important;
    background:color-mix(in srgb,var(--md-primary) 8%,var(--md-surface-container))!important;
    outline:2px solid color-mix(in srgb,var(--md-primary) 45%,transparent);
    outline-offset:2px;
}

/* ---------- Popup del usuario ---------- */
.menu2-user-popup{
    position:fixed;
    z-index:16000;
    display:none;
    min-width:max-content;
    padding:6px;
    box-sizing:border-box;
    border:1px solid var(--md-border-strong);
    border-radius:11px;
    background:color-mix(in srgb,var(--md-surface-container) 96%,transparent);
    color:var(--md-text-main);
    box-shadow:0 14px 32px rgba(0,0,0,.28);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}
.menu2-user-popup.is-open{display:block}
.menu2-user-popup-link{
    display:flex;
    align-items:center;
    gap:9px;
    min-height:38px;
    padding:7px 11px;
    border-radius:8px;
    color:var(--md-text-main)!important;
    text-decoration:none!important;
    white-space:nowrap;
}
.menu2-user-popup-link:hover,
.menu2-user-popup-link:focus-visible{
    color:var(--md-primary)!important;
    background:color-mix(in srgb,var(--md-primary) 9%,transparent)!important;
    outline:2px solid color-mix(in srgb,var(--md-primary) 48%,transparent);
    outline-offset:1px;
}
.menu2-user-popup-link i{
    color:var(--md-primary)!important;
    font-size:18px!important;
}

/* ---------- Toggle explícito ---------- */
body:has(#modules_list[data-menu-version="2.0"]) #modules_list_hide,
body:has(#modules_list[data-menu-version="2.0"]) #modules_list_show{
    position:fixed!important;
    top:12px!important;
    transform:none!important;
    z-index:1500!important;
    width:30px!important;
    height:30px!important;
    padding:0!important;
    align-items:center!important;
    justify-content:center!important;
    border:1px solid var(--md-border-strong)!important;
    border-radius:9px!important;
    background:var(--md-surface-container)!important;
    color:var(--md-text-sub)!important;
    box-shadow:0 4px 14px rgba(0,0,0,.18)!important;
    cursor:pointer!important;
    transition:
            background-color .18s ease,
            color .18s ease,
            border-color .18s ease,
            transform .18s ease;
}
body:has(#modules_list[data-menu-version="2.0"]) #modules_list_hide{
    display:flex!important;
    left:calc(var(--menu2-sidebar-width) - 42px)!important;
}
body:has(#modules_list[data-menu-version="2.0"]) #modules_list_show{
    display:none!important;
    left:calc(var(--menu2-sidebar-collapsed-width)/2 - 15px)!important;
}
body:has(#modules_list[data-menu-version="2.0"]) #modules_list.menu2-collapsed~#modules_list_hide{display:none!important}
body:has(#modules_list[data-menu-version="2.0"]) #modules_list.menu2-collapsed~#modules_list_show{display:flex!important}
body:has(#modules_list[data-menu-version="2.0"]) #modules_list_hide:hover,
body:has(#modules_list[data-menu-version="2.0"]) #modules_list_show:hover{
    color:var(--md-primary)!important;
    border-color:var(--md-primary)!important;
    background:color-mix(in srgb,var(--md-primary) 8%,var(--md-surface-container))!important;
    transform:scale(1.04)!important;
}
body:has(#modules_list[data-menu-version="2.0"]) #modules_list_hide:focus-visible,
body:has(#modules_list[data-menu-version="2.0"]) #modules_list_show:focus-visible{
    outline:2px solid var(--md-primary);
    outline-offset:2px;
}
body:has(#modules_list[data-menu-version="2.0"]) #modules_list_hide i,
body:has(#modules_list[data-menu-version="2.0"]) #modules_list_show i{
    margin:0!important;
    font-size:18px!important;
    line-height:1!important;
}

/* ---------- Rail contraído: depende del elemento, no del body ---------- */
body:has(#modules_list[data-menu-version="2.0"]) #modules_list.menu2-collapsed #search_modules,
body:has(#modules_list[data-menu-version="2.0"]) #modules_list.menu2-collapsed #application_title,
body:has(#modules_list[data-menu-version="2.0"]) #modules_list.menu2-collapsed .menu2-section-title{
    display:none!important;
}
body:has(#modules_list[data-menu-version="2.0"]) #modules_list.menu2-collapsed #modules_list_core>.menu2-root{
    padding:68px 6px 14px!important;
}
body:has(#modules_list[data-menu-version="2.0"]) #modules_list.menu2-collapsed .menu2-section{margin:5px 0!important}
body:has(#modules_list[data-menu-version="2.0"]) #modules_list.menu2-collapsed .menu2-folder-toggle,
body:has(#modules_list[data-menu-version="2.0"]) #modules_list.menu2-collapsed .menu2-module-link{
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    margin:4px auto!important;
    padding:0!important;
    justify-content:center!important;
    border-radius:11px!important;
}
body:has(#modules_list[data-menu-version="2.0"]) #modules_list.menu2-collapsed .menu2-entry-icon{
    flex:0 0 36px!important;
    width:36px!important;
    height:36px!important;
    margin:0!important;
    border-radius:9px!important;
}
body:has(#modules_list[data-menu-version="2.0"]) #modules_list.menu2-collapsed .menu2-entry-icon i{
    font-size:18px!important;
    line-height:1!important;
}
body:has(#modules_list[data-menu-version="2.0"]) #modules_list.menu2-collapsed .menu2-entry-text,
body:has(#modules_list[data-menu-version="2.0"]) #modules_list.menu2-collapsed .menu2-entry-trailing{
    display:none!important;
}
body:has(#modules_list[data-menu-version="2.0"]) #modules_list.menu2-collapsed .menu2-folder-children{
    display:none!important;
}
body:has(#modules_list[data-menu-version="2.0"]) #modules_list.menu2-collapsed #menu2_sidebar_footer{
    justify-content:center!important;
    padding:10px 8px!important;
}
body:has(#modules_list[data-menu-version="2.0"]) #modules_list.menu2-collapsed .menu2-userbox{
    justify-content:center!important;
    gap:0!important;
}
body:has(#modules_list[data-menu-version="2.0"]) #modules_list.menu2-collapsed .menu2-userbox-meta,
body:has(#modules_list[data-menu-version="2.0"]) #modules_list.menu2-collapsed .menu2-userbox-logout{
    display:none!important;
}
body:has(#modules_list[data-menu-version="2.0"]) #modules_list.menu2-collapsed .menu2-userbox-badge{
    cursor:pointer;
}
body:has(#modules_list[data-menu-version="2.0"]) #modules_list.menu2-collapsed .menu2-userbox-badge:focus-visible{
    outline:2px solid var(--md-primary);
    outline-offset:3px;
}
body:has(#modules_list[data-menu-version="2.0"]) #modules_list.menu2-collapsed #menu2_root .menu2-folder-node:has(.menu2-module-link.is-selected)>.menu2-folder-toggle{
    background:transparent!important;
}

/* ---------- Flyout ---------- */
.menu2-flyout{
    position:fixed;
    display:none;
    z-index:12000;
    width:245px;
    max-height:calc(100vh - 24px);
    overflow-y:auto;
    padding:8px;
    border:1px solid var(--md-border-strong);
    border-radius:13px;
    background:color-mix(in srgb,var(--md-surface-container) 94%,transparent);
    color:var(--md-text-main);
    box-shadow:0 14px 34px rgba(0,0,0,.28);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-sizing:border-box;
    scrollbar-width:thin;
    scrollbar-color:color-mix(in srgb,var(--md-text-sub) 30%,transparent) transparent;
}
.menu2-flyout-header{
    padding:8px 10px 10px;
    margin-bottom:4px;
    color:var(--md-text-sub);
    font-size:10px;
    font-weight:750;
    letter-spacing:1.25px;
    text-transform:uppercase;
    border-bottom:1px solid color-mix(in srgb,var(--md-text-sub) 15%,transparent);
}
.menu2-flyout .menu2-folder-toggle,
.menu2-flyout .menu2-module-link{
    position:relative;
    display:flex;
    align-items:center;
    width:100%;
    min-height:40px;
    padding:5px 8px;
    border:0;
    border-radius:9px;
    background:transparent;
    color:var(--md-text-main);
    font:inherit;
    text-align:left;
    text-decoration:none;
    box-sizing:border-box;
    cursor:pointer;
}
.menu2-flyout .menu2-folder-toggle:hover,
.menu2-flyout .menu2-module-link:hover{
    background:color-mix(in srgb,var(--md-primary) 8%,transparent);
}
.menu2-flyout .menu2-entry-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 28px;
    width:28px;
    height:28px;
    margin-right:8px;
    color:var(--md-primary);
}
.menu2-flyout .menu2-entry-text{
    display:block!important;
    flex:1 1 auto;
    min-width:0;
    color:inherit;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.menu2-flyout .menu2-entry-trailing{
    display:flex!important;
    margin-left:auto;
    color:var(--md-text-sub);
}
.menu2-flyout .menu2-folder-children{
    display:none;
    margin-left:15px;
    padding-left:8px;
    border-left:1px solid color-mix(in srgb,var(--md-text-sub) 14%,transparent);
}
.menu2-flyout .menu2-folder-node.is-open>.menu2-folder-children{display:block!important}
.menu2-flyout .menu2-module-link.is-selected{
    background:color-mix(in srgb,var(--md-primary) 12%,transparent);
    color:var(--md-primary);
}
.menu2-flyout .menu2-module-link.is-selected::after{
    content:"";
    position:absolute;
    right:3px;
    top:7px;
    bottom:7px;
    width:4px;
    border-radius:999px;
    background:var(--md-primary);
    box-shadow:0 0 10px color-mix(in srgb,var(--md-primary) 55%,transparent);
}

/* ---------- Contenido central / flow nativo ---------- */
body:has(#modules_list[data-menu-version="2.0"]) #main>.module-wrapper{
    position:relative!important;
    flex:1 1 0!important;
    width:auto!important;
    margin-left:0!important;
    left:0!important;
    min-width:0!important;
    max-width:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
}
body:has(#modules_list[data-menu-version="2.0"]) #module_header_menu_button{display:none!important}
body:has(#modules_list[data-menu-version="2.0"]) .module-wrapper .ox-module,
body:has(#modules_list[data-menu-version="2.0"]) .ox-view{
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
}
body:has(#modules_list[data-menu-version="2.0"]) .ox-list-scroll,
body:has(#modules_list[data-menu-version="2.0"]) .ox-overflow-auto{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overscroll-behavior-x:contain;
}
body:has(#modules_list[data-menu-version="2.0"]) .ox-list-scroll table.ox-list,
body:has(#modules_list[data-menu-version="2.0"]) .ox-overflow-auto table.ox-list{
    table-layout:auto!important;
}

/* ---------- Carga: estado informativo, nunca una mascara sobre .ox-view ---------- */
.menu2-module-status{
    display:none;
    position:fixed;
    top:76px;
    right:24px;
    z-index:10000;
    align-items:center;
    gap:10px;
    max-width:calc(100vw - var(--menu2-sidebar-width) - 48px);
    padding:12px 16px;
    box-sizing:border-box;
    border:1px solid var(--md-border-strong);
    border-radius:10px;
    background:var(--md-surface-container);
    color:var(--md-text-main);
    font-family:var(--font-body);
    font-size:13px;
    line-height:1.4;
    pointer-events:none;
}
body:has(#modules_list[data-menu-version="2.0"][data-menu2-view-state="loading"])
#menu2_module_status{display:flex}
body:has(#modules_list.menu2-collapsed) #menu2_module_status{
    max-width:calc(100vw - var(--menu2-sidebar-collapsed-width) - 48px);
}
.menu2-module-status::before{
    content:"";
    width:14px;
    height:14px;
    flex:0 0 14px;
    border:2px solid var(--md-border-strong);
    border-top-color:var(--md-primary);
    border-radius:50%;
    animation:menu2-status-spin .8s linear infinite;
}
@keyframes menu2-status-spin{to{transform:rotate(360deg)}}
body:has(#modules_list[data-menu-version="2.0"]).menu2-module-switching
#main>.module-wrapper::before{
    content:"";
    position:absolute;
    z-index:8001;
    top:0;
    left:0;
    right:0;
    height:2px;
    background:var(--md-primary);
    pointer-events:none;
}

/* ---------- Tablet/ventanas estrechas: no cambian el estado ---------- */
@media screen and (max-width:1120px){
    body:has(#modules_list[data-menu-version="2.0"]) #main{display:flex!important;flex-wrap:nowrap!important}
    body:has(#modules_list[data-menu-version="2.0"]) #modules_list,
    body:has(#modules_list[data-menu-version="2.0"]) #modules_list_outbox,
    body:has(#modules_list[data-menu-version="2.0"]) #modules_list_core{
        visibility:visible!important;
        opacity:1!important;
    }
    body:has(#modules_list[data-menu-version="2.0"]) #module_header_menu_button{display:none!important}
}
@media(prefers-reduced-motion:reduce){
    .menu2-flyout{transition:none!important}
    .menu2-module-status::before{animation:none!important}
}