/* === CRITICAL FIX: Asegurar orden correcto header ARRIBA + navegación DEBAJO === */

/* Cuando nav-function-top está activo, el header DEBE estar ARRIBA de la navegación horizontal */
body.nav-function-top .page-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 15000 !important; /* MUY ALTO para estar por encima de TODO */
}

/* La navegación horizontal debe estar DEBAJO del header */
body.nav-function-top #js-nav-menu-wrapper {
    position: fixed !important;
    top: 64px !important; /* Altura del header */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10000 !important; /* Menor que el header */
}

/* El contenido principal debe tener margin-top para no quedar oculto */
body.nav-function-top .page-content {
    margin-top: 0 !important; /* Quitamos el margin extra */
    padding-top: 0 !important;
}

/* Asegurar que page-content-wrapper respete el espacio del header + nav */
body.nav-function-top .page-content-wrapper {
    padding-top: 7.625rem !important; /* Aproximadamente 122px (64px header + 58px nav) = espacio justo necesario */
    margin-top: 0 !important;
}

/* === FIX PARA VISTA MÓVIL SIN TOP NAVIGATION === */
/* Cuando NO hay top navigation Y está en vista móvil, el header debe estar por encima del sidebar */
body.mobile-view-activated:not(.nav-function-top) .page-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 20000 !important; /* MUY ALTO para estar por encima del sidebar móvil */
}

/* El sidebar en móvil debe estar debajo del header */
body.mobile-view-activated:not(.nav-function-top) .page-sidebar {
    position: fixed !important;
    top: 64px !important; /* Empieza debajo del header */
    z-index: 19000 !important; /* Menor que el header */
}

/* Asegurar que el contenido respete el header en móvil sin top nav */
body.mobile-view-activated:not(.nav-function-top) .page-content-wrapper {
    padding-top: 64px !important; /* Solo la altura del header */
}

/* === ESTILOS PARA OPCIONES DESHABILITADAS EN EL PANEL DE CONFIGURACIÓN === */
/* Estilo para switches deshabilitados */
.settings-panel .list .btn-switch.disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* Reducir opacidad del contenedor completo cuando está deshabilitado */
.settings-panel .list.opacity-50 {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

.settings-panel .list.opacity-50 .onoffswitch-title,
.settings-panel .list.opacity-50 .onoffswitch-subtitle {
    color: #999 !important;
}