:root {
    /* ==========================================================================
       CENTRAL DE DISEÑO SEMÁNTICO
       ========================================================================== */

    /* Paleta Base (Lochmara Blue) */
    --primary-hue: #247dc1;
    --primary-dark: #186ab1;
    --primary-light: #4ea2e2;

    /* VARIABLES DE TEMA (MODO CLARO) */
    --theme-bg-body: #f5f5f9;
    --theme-bg-surface: #ffffff;
    /* Tarjetas, modales, etc. */
    --theme-bg-navbar: #ffffff;
    --theme-text-main: #566a7f;
    --theme-text-muted: #a1acb8;
    --theme-border: #d9dee3;
}

/* VARIABLES DE TEMA (MODO OSCURO) */
[data-bs-theme="dark"],
.dark-style {
    --theme-bg-body: #22242a;
    /* El color que querías para el fondo */
    --theme-bg-surface: #303134;
    /* El color que querías para lo "morado" */
    --theme-bg-navbar: #22242a;
    --theme-text-main: #cbcbe2;
    --theme-text-muted: #22242a;
    --theme-border: #22242a;

    /* Ajuste de primario para modo oscuro */
    --primary-hue: #4ea2e2;
}

/* ==========================================================================
   MAPEO GLOBAL A VARIABLES DE BOOTSTRAP Y SNEAT
   ========================================================================== */
:root,
[data-bs-theme="dark"],
.dark-style {
    /* Base Bootstrap */
    --bs-primary: var(--primary-hue);
    --bs-body-bg: var(--theme-bg-body);
    --bs-body-color: var(--theme-text-main);
    --bs-border-color: var(--theme-border);

    /* Superficies */
    --bs-card-bg: var(--theme-bg-surface);
    --bs-paper-bg: var(--theme-bg-surface);
    --bs-modal-content-bg: var(--theme-bg-surface);
    --bs-dropdown-bg: var(--theme-bg-surface);
    --bs-offcanvas-bg: var(--theme-bg-surface);
    --bs-footer-bg: var(--theme-bg-body);

    /* Navegación y Menús */
    --bs-header-bg: var(--theme-bg-navbar);
    --bs-menu-bg: var(--theme-bg-body);

    /* Tipografía */
    --bs-body-font-family: 'Public Sans', sans-serif;
}

/* ==========================================================================
   SOBREESCRITURA SISTEMÁTICA DE COMPONENTES
   ========================================================================== */

/* 1. Base y Estructura */
body {
    background-color: var(--theme-bg-body) !important;
    color: var(--theme-text-main) !important;
}

/* 2. Componentes de Superficie (Tarjetas, Modales, etc.) */
.card,
.modal-content,
.dropdown-menu,
.offcanvas,
.typeahead,
.tt-menu {
    background-color: var(--theme-bg-surface) !important;
    border-color: var(--theme-border) !important;
}

/* 3. Barra de Navegación (Navbar) */
html.dark-style .layout-navbar,
html.dark-style .bg-navbar-theme,
html.dark-style .navbar-detached,
html[data-bs-theme="dark"] .layout-navbar,
html[data-bs-theme="dark"] .bg-navbar-theme,
html[data-bs-theme="dark"] .navbar-detached {
    background-color: var(--theme-bg-navbar) !important;
    background: var(--theme-bg-navbar) !important;
    border-bottom: 1px solid var(--theme-border) !important;
    box-shadow: none !important;
    backdrop-filter: blur(8px) !important;
}

/* 4. Formularios e Inputs (Global) */
html.dark-style .form-control,
html.dark-style .form-select,
html.dark-style .input-group-text,
html.dark-style .select2-container--default .select2-selection--single,
html.dark-style .select2-dropdown,
html.dark-style .navbar-search-wrapper .form-control,
html.dark-style .typeahead,
html.dark-style .tt-menu,
html.dark-style .tt-hint,
html.dark-style .tt-input,
html.dark-style .search-input-wrapper,
html.dark-style .search-input-wrapper .search-input {
    background-color: var(--theme-bg-surface) !important;
    color: var(--theme-text-main) !important;
    border-color: var(--theme-border) !important;
    background-image: none !important;
}

/* 5. Tablas (Universal Premium Fix) */
html.dark-style table,
html.dark-style .table,
html[data-bs-theme="dark"] table,
html[data-bs-theme="dark"] .table {
    --bs-table-bg: var(--theme-bg-surface) !important;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03) !important;
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--theme-border) !important;
}

/* Forzado de cabeceras Lochmara Blue para TODO el proyecto */
.table thead,
.table thead tr,
.table thead th,
.table-dark thead th,
.table-light thead th {
    background-color: var(--primary-hue) !important;
    color: #ffffff !important;
    border-color: var(--primary-dark) !important;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

/* Estilos para filas de agrupación y subniveles (Fix para el morado) */
.table .table-primary, 
.table .table-primary > td, 
.table .table-primary > th {
    background-color: var(--primary-dark) !important;
    color: #ffffff !important;
    border-color: var(--primary-hue) !important;
}

.table .table-light, 
.table .table-light > td, 
.table .table-light > th {
    background-color: rgba(36, 125, 193, 0.08) !important;
    color: var(--primary-hue) !important;
    font-weight: 600;
}

.table .bg-label-secondary {
    background-color: rgba(36, 125, 193, 0.05) !important;
    color: var(--theme-text-main) !important;
    font-weight: 700;
}

/* Estilos para Reportes de Matriz y Asistencia */
.matrix-cell { width: 35px; height: 35px; text-align: center; vertical-align: middle; border: 1px solid var(--theme-border); font-size: 0.8rem; }
.matrix-present { background-color: rgba(36, 125, 193, 0.1) !important; color: var(--primary-hue) !important; font-weight: bold; }
.matrix-absent { color: var(--theme-text-muted); opacity: 0.3; }
.sticky-col { position: sticky; left: 0; background-color: var(--theme-bg-surface) !important; z-index: 10; border-right: 2px solid var(--theme-border) !important; }
.bg-total { background-color: var(--primary-dark) !important; color: #ffffff !important; }

/* 6. Menú Lateral (Sidebar) */
html.dark-style .menu-vertical, 
html.dark-style .menu-vertical .menu-inner,
html.dark-style .menu-vertical .menu-sub,
html.dark-style .menu-vertical .menu-item.active {
    background-color: var(--theme-bg-body) !important;
}

/* Jerarquía de 3 Niveles (Módulo -> Submódulo -> Ventana) */

/* Nivel 2 (Submódulos) */
.menu-vertical .menu-sub .menu-link {
    padding-left: 1.5rem !important;
}

/* Nivel 3 (Ventanas) */
.menu-vertical .menu-sub .menu-sub .menu-link {
    padding-left: 2.5rem !important; /* Más sangría a la derecha */
    font-size: 0.85rem !important;   /* Texto ligeramente más pequeño */
}

/* Iconos de 3er Nivel */
.menu-vertical .menu-sub .menu-sub .menu-link i,
.menu-vertical .menu-sub .menu-sub .menu-link i.custom-menu-icon {
    font-size: 0.8rem !important;    /* Icono más pequeño */
    opacity: 0.7;                    /* Más sutil */
    margin-right: 0.5rem !important;
}

.menu-vertical .menu-item.active .menu-sub .menu-sub .menu-link.active i {
    opacity: 1 !important;
}

.menu-vertical .menu-item.active>.menu-link:not(.menu-toggle) {
    background: linear-gradient(72.47deg, var(--primary-hue) 22.16%, rgba(36, 125, 193, 0.7) 76.47%) !important;
}

/* 7. Branding y Botones */
.app-brand-logo.demo,
.app-brand .app-brand-logo {
    background: var(--primary-hue) !important;
}

.btn-primary {
    background-color: var(--primary-hue) !important;
    border-color: var(--primary-hue) !important;
}

.btn-primary:hover {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
}

.text-primary {
    color: var(--primary-hue) !important;
}

/* 8. Pantalla de Autenticación */
.authentication-bg {
    background-color: var(--theme-bg-body) !important;
}

.auth-cover-bg-color {
    background-color: #0f2742 !important;
    /* Tono 950 Lochmara */
}

/* ==========================================================================
   FIX RESPONSIVO (Móviles y Tablets)
   ========================================================================== */

@media (max-width: 1199.98px) {
    /* Navbar: Ajustar buscador para que no empuje los iconos */
    #global-search-select + .select2-container {
        width: 180px !important;
    }
}

@media (max-width: 991.98px) {
    /* Navbar: Reducir aún más el buscador */
    #global-search-select + .select2-container {
        width: 140px !important;
    }
    
    .select2-selection__placeholder {
        font-size: 0.75rem;
    }

    /* Forzar scroll horizontal en tablas para evitar que rompan el contenedor */
    .card .table-responsive, 
    .card-body .table-responsive,
    .table-responsive {
        overflow-x: auto !important;
        display: block;
        width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    /* Ajuste de padding en tablas para ganar espacio */
    .table th, .table td {
        padding: 0.6rem 0.4rem !important;
        font-size: 0.85rem;
    }
}

@media (max-width: 767.98px) {
    /* Navbar: Ocultar buscador en móviles muy pequeños para priorizar perfil y campana */
    #global-search-select + .select2-container {
        display: none !important;
    }
    
    .layout-navbar .navbar-nav-right {
        width: 100%;
        justify-content: flex-end;
    }

    /* Botones de acción en tablas más compactos */
    .btn-sm-mobile {
        padding: 0.25rem 0.5rem;
        font-size: 0.7rem;
    }

    /* Ajuste de contenedor de búsqueda expandable en móviles */
    .search-responsive-container {
        transition: all 0.3s ease;
    }

    @media (max-width: 767.98px) {
        .search-responsive-container {
            display: none !important; /* Oculto por defecto */
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: var(--theme-bg-navbar) !important;
            z-index: 1000;
            padding: 0 15px !important;
            border-radius: 8px;
        }

        .search-responsive-container.active-mobile {
            display: flex !important; /* Se muestra al activar */
            align-items: center;
        }

        .search-icon-mobile {
            cursor: pointer;
            padding: 10px;
            z-index: 1001;
        }
        
        /* Botón para cerrar búsqueda en móvil */
        .search-close-mobile {
            display: block !important;
            margin-left: 10px;
            color: var(--theme-text-main);
            cursor: pointer;
            font-size: 1.5rem;
        }

        /* Forzar ancho y altura de Select2 en móvil */
        .search-responsive-container .select2-container {
            width: calc(100% - 45px) !important;
            flex-grow: 1;
        }

        .search-responsive-container .select2-selection--single {
            height: 45px !important;
            display: flex !important;
            align-items: center !important;
            border-radius: 8px !important;
        }

        .select2-dropdown {
            width: 100% !important;
            left: 0 !important;
            border: none !important;
            box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
            z-index: 2000 !important;
        }

        .select2-search__field {
            height: 42px !important;
            font-size: 1rem !important;
        }

        /* Maximizar espacio lateral en móviles */
        .container-xxl, 
        .container-p-y,
        .content-wrapper > .container-xxl {
            padding-left: 0.5rem !important;
            padding-right: 0.5rem !important;
        }

        .card {
            margin-bottom: 1rem !important;
        }
        
        .card-body {
            padding: 1rem 0.75rem !important;
        }
    }

    .search-close-mobile { display: none; }
}