﻿/* =====================================================
   ERPSEI - CORRECCIÓN RESPONSIVE V3
   PERFIL + NAVEGACIÓN + SUBMENÚS
   ===================================================== */

@media (max-width: 991.98px) {

    /* CONTENEDORES GENERALES */

    body:is(.home-main-theme, .module-main-theme) {
        overflow-x: clip;
    }

        body:is(.home-main-theme, .module-main-theme) .layout-content,
        body:is(.home-main-theme, .module-main-theme) .layout-content > .container,
        body:is(.home-main-theme, .module-main-theme) #mainContent {
            min-width: 0 !important;
            max-width: 100% !important;
        }

        /* ==========================================
       BARRA AZUL: PERFIL + NOMBRE + MENÚ
       ========================================== */

        body:is(.home-main-theme, .module-main-theme) .topbar-links {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            align-items: center !important;
            justify-content: flex-start !important;
            width: 100% !important;
            min-width: 0 !important;
            min-height: 70px !important;
            padding: 12px 14px !important;
            gap: 10px !important;
            background: #21166f !important;
            border-radius: 15px !important;
            position: relative !important;
            overflow: visible !important;
            z-index: 100 !important;
        }

            /* BOTÓN IZQUIERDO DEL PERFIL */

            body:is(.home-main-theme, .module-main-theme) .topbar-links #btnSidebar,
            body:is(.home-main-theme, .module-main-theme) .topbar-links #btnSidebar.active {
                position: static !important;
                top: auto !important;
                right: auto !important;
                bottom: auto !important;
                left: auto !important;
                inset: auto !important;
                transform: none !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                flex: 0 0 44px !important;
                width: 44px !important;
                height: 44px !important;
                padding: 0 !important;
                margin: 0 !important;
                border: 1px solid rgba(255,255,255,.25) !important;
                border-radius: 12px !important;
                background: rgba(255,255,255,.12) !important;
                color: #ffffff !important;
                box-shadow: none !important;
                z-index: auto !important;
            }

        body:is(.home-main-theme, .module-main-theme) #btnSidebar i {
            font-size: 22px !important;
            color: #ffffff !important;
        }

        /* NOMBRE DEL COLABORADOR */

        body:is(.home-main-theme, .module-main-theme) .topbar-links > .small {
            display: flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            flex: 1 1 auto !important;
            min-width: 0 !important;
            max-width: none !important;
            margin: 0 !important;
            padding: 0 !important;
            font-size: 12px !important;
            line-height: 1.4 !important;
            white-space: normal !important;
            overflow: visible !important;
            text-overflow: clip !important;
            color: #ffffff !important;
        }

            body:is(.home-main-theme, .module-main-theme) .topbar-links > .small b {
                white-space: normal !important;
                overflow-wrap: anywhere !important;
                color: #ffffff !important;
            }

        /* BOTÓN DERECHO DEL MENÚ */

        body:is(.home-main-theme, .module-main-theme) .quick-nav-wrap {
            display: flex !important;
            align-items: center !important;
            justify-content: flex-end !important;
            position: static !important;
            flex: 0 0 44px !important;
            width: 44px !important;
            min-width: 44px !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        body:is(.home-main-theme, .module-main-theme) .quick-nav-toggle {
            display: inline-flex !important;
            justify-content: center !important;
            align-items: center !important;
            width: 44px !important;
            height: 44px !important;
            padding: 0 !important;
            background: rgba(255,255,255,.12) !important;
            border: 1px solid rgba(255,255,255,.25) !important;
            border-radius: 12px !important;
            color: #ffffff !important;
            font-size: 21px !important;
            cursor: pointer;
        }

        /* ==========================================
       NAVEGACIÓN DESPLEGABLE
       ========================================== */

        body:is(.home-main-theme, .module-main-theme) #quickNavMenu {
            display: none !important;
            position: absolute !important;
            top: calc(100% + 8px) !important;
            left: 0 !important;
            right: 0 !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            height: auto !important;
            max-height: min(70dvh, 650px) !important;
            margin: 0 !important;
            padding: 12px !important;
            flex-direction: column !important;
            flex-wrap: nowrap !important;
            align-items: stretch !important;
            justify-content: flex-start !important;
            gap: 4px !important;
            background: #21166f !important;
            border: 1px solid rgba(255,255,255,.15) !important;
            border-radius: 15px !important;
            box-shadow: 0 15px 35px rgba(0,0,0,.20) !important;
            overflow-x: hidden !important;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch;
            z-index: 110 !important;
        }

            body:is(.home-main-theme, .module-main-theme) #quickNavMenu.is-open {
                display: flex !important;
            }

            /* CONTENEDORES DE LAS CATEGORÍAS */

            body:is(.home-main-theme, .module-main-theme) #quickNavMenu .quick-dd {
                display: block !important;
                position: static !important;
                flex: 0 0 auto !important;
                width: 100% !important;
                height: auto !important;
                min-height: 0 !important;
                margin: 0 !important;
                padding: 0 !important;
            }

            /* ENLACES PRINCIPALES */

            body:is(.home-main-theme, .module-main-theme) #quickNavMenu .quick-link {
                display: flex !important;
                align-items: center !important;
                justify-content: flex-start !important;
                position: static !important;
                width: 100% !important;
                min-height: 44px !important;
                height: auto !important;
                margin: 0 !important;
                padding: 11px 13px !important;
                white-space: normal !important;
                overflow-wrap: anywhere !important;
                color: #ffffff !important;
                background: transparent !important;
                border-radius: 9px !important;
                font-size: 14px !important;
                font-weight: 600 !important;
                text-decoration: none !important;
            }

                body:is(.home-main-theme, .module-main-theme) #quickNavMenu .quick-link::after {
                    display: none !important;
                }

            body:is(.home-main-theme, .module-main-theme) #quickNavMenu .quick-dd.open > .quick-link {
                color: #d4ad45 !important;
                background: rgba(255,255,255,.10) !important;
            }

            /* ==========================================
       SUBMENÚS TIPO ACORDEÓN
       ========================================== */

            body:is(.home-main-theme, .module-main-theme) #quickNavMenu .quick-dd-menu,
            body:is(.home-main-theme, .module-main-theme) #quickNavMenu .quick-dd-menu-wide {
                display: none !important;
                position: static !important;
                top: auto !important;
                right: auto !important;
                bottom: auto !important;
                left: auto !important;
                transform: none !important;
                width: 100% !important;
                min-width: 0 !important;
                max-width: 100% !important;
                height: auto !important;
                min-height: 0 !important;
                max-height: none !important;
                margin: 3px 0 8px !important;
                padding: 7px !important;
                background: rgba(255,255,255,.08) !important;
                border: 1px solid rgba(255,255,255,.12) !important;
                border-radius: 10px !important;
                box-shadow: none !important;
                overflow: visible !important;
                float: none !important;
            }

            body:is(.home-main-theme, .module-main-theme) #quickNavMenu .quick-dd.open > .quick-dd-menu {
                display: block !important;
            }

            body:is(.home-main-theme, .module-main-theme) #quickNavMenu .quick-dd-item {
                display: block !important;
                width: 100% !important;
                height: auto !important;
                min-height: 40px !important;
                margin: 0 !important;
                padding: 10px 12px !important;
                color: #ffffff !important;
                background: transparent !important;
                font-size: 13px !important;
                font-weight: 500 !important;
                line-height: 1.4 !important;
                white-space: normal !important;
                overflow-wrap: anywhere !important;
                border-radius: 8px !important;
                text-decoration: none !important;
            }

                body:is(.home-main-theme, .module-main-theme) #quickNavMenu .quick-dd-item:hover,
                body:is(.home-main-theme, .module-main-theme) #quickNavMenu .quick-dd-item:focus {
                    background: rgba(255,255,255,.15) !important;
                    color: #d4ad45 !important;
                }

            body:is(.home-main-theme, .module-main-theme) #quickNavMenu .quick-dd-divider {
                height: 1px !important;
                margin: 8px 0 !important;
                background: rgba(255,255,255,.18) !important;
            }

        /* ==========================================
       PANEL DEL COLABORADOR
       ========================================== */

        body:is(.home-main-theme, .module-main-theme) #sidebarProfile {
            position: fixed !important;
            top: 0 !important;
            bottom: 0 !important;
            left: 0 !important;
            right: auto !important;
            width: min(350px, 88vw) !important;
            height: 100dvh !important;
            max-height: 100dvh !important;
            margin: 0 !important;
            padding: calc(76px + env(safe-area-inset-top, 0px)) 18px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
            transform: translateX(-105%) !important;
            transition: transform .25s ease !important;
            background: #21166f !important;
            overflow-x: hidden !important;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch;
            z-index: 2001 !important;
            box-shadow: 8px 0 30px rgba(0,0,0,.18) !important;
        }

            body:is(.home-main-theme, .module-main-theme) #sidebarProfile.active {
                transform: translateX(0) !important;
            }

            body:is(.home-main-theme, .module-main-theme) #sidebarProfile .employee-card {
                position: relative !important;
                width: 100% !important;
                min-width: 0 !important;
                padding: 0 !important;
                margin: 0 !important;
            }

            body:is(.home-main-theme, .module-main-theme) #sidebarProfile .employee-card__header {
                padding-top: 0 !important;
            }

            body:is(.home-main-theme, .module-main-theme) #sidebarProfile .employee-card__fullname,
            body:is(.home-main-theme, .module-main-theme) #sidebarProfile .employee-card__item strong {
                overflow-wrap: anywhere !important;
            }

            /* BOTÓN X DENTRO DEL PANEL */

            body:is(.home-main-theme, .module-main-theme) #sidebarProfile .mobile-profile-close {
                position: absolute !important;
                top: calc(17px + env(safe-area-inset-top, 0px)) !important;
                right: 16px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                width: 44px !important;
                height: 44px !important;
                padding: 0 !important;
                color: #ffffff !important;
                background: rgba(255,255,255,.12) !important;
                border: 1px solid rgba(255,255,255,.25) !important;
                border-radius: 12px !important;
                font-size: 24px !important;
                cursor: pointer;
            }

        /* FONDO OSCURO AL ABRIR PERFIL */

        body:is(.home-main-theme, .module-main-theme) .mobile-profile-backdrop {
            position: fixed !important;
            inset: 0 !important;
            display: none !important;
            background: rgba(0,0,0,.40) !important;
            z-index: 2000 !important;
        }

            body:is(.home-main-theme, .module-main-theme) .mobile-profile-backdrop.active {
                display: block !important;
            }

        /* EL LAYOUT NO DEBE DESPLAZARSE */

        body:is(.home-main-theme, .module-main-theme) #layoutWrapper.shifted {
            margin-left: 0 !important;
            transform: none !important;
        }

    /* EVITAR SCROLL DETRÁS DEL PERFIL */

    body.mobile-profile-open {
        overflow: hidden !important;
    }
}

/* ============================================
   OCULTAR BOTÓN GRIS DEL HEADER EN MÓVIL
   ============================================ */

@media (max-width: 991.98px) {

    body:is(.home-main-theme, .module-main-theme) header button.navbar-toggler {
        display: none !important;
        visibility: hidden !important;
    }

    body:is(.home-main-theme, .module-main-theme) header #navbarExample3 {
        display: flex !important;
        visibility: visible !important;
        height: auto !important;
        flex-grow: 0 !important;
        flex-basis: auto !important;
    }

    body:is(.home-main-theme, .module-main-theme) header .header-right-tools {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: auto !important;
        margin-left: auto !important;
    }
}

/* ================================================
   PERFIL MÓVIL - CAPA SUPERIOR
   ================================================ */

@media (max-width: 991.98px) {

    body:is(.home-main-theme, .module-main-theme) #sidebarProfile {
        z-index: 10051 !important;
        left: 0 !important;
        transform: translateX(-105%) !important;
        transition: transform .25s ease !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

        body:is(.home-main-theme, .module-main-theme) #sidebarProfile.active {
            left: 0 !important;
            transform: translateX(0) !important;
        }

    body:is(.home-main-theme, .module-main-theme) .mobile-profile-backdrop {
        z-index: 10050 !important;
    }

    body:is(.home-main-theme, .module-main-theme) #sidebarProfile .mobile-profile-close {
        position: absolute !important;
        top: calc(16px + env(safe-area-inset-top, 0px)) !important;
        right: 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(255,255,255,.25) !important;
        background: rgba(255,255,255,.12) !important;
        color: white !important;
        cursor: pointer;
        z-index: 2 !important;
    }

        body:is(.home-main-theme, .module-main-theme) #sidebarProfile .mobile-profile-close i {
            color: white !important;
            font-size: 22px !important;
        }

    body:is(.home-main-theme, .module-main-theme) #btnSidebar.active {
        position: static !important;
        transform: none !important;
    }
}

/* =====================================================
   ERPSEI - CONFIGURACION GLOBAL RESPONSIVE
   INICIO Y MODULOS
   ===================================================== */

/* Ocultar la X adicional del perfil en escritorio */
@media (min-width: 992px) {

    #sidebarProfile .mobile-profile-close {
        display: none !important;
    }
}

/* Navegación móvil para todos los módulos */
@media (max-width: 991.98px) {

    /* Ocultar el botón gris superior */

    body header .navbar-toggler,
    body header .intranet-auth-toggler {
        display: none !important;
    }

    /* Mostrar notificaciones y cerrar sesión */

    body header #navbarExample3 {
        display: flex !important;
        visibility: visible !important;
        height: auto !important;
        flex-basis: auto !important;
        flex-grow: 0 !important;
        width: auto !important;
    }

    body header .header-right-tools {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: auto !important;
        margin-left: auto !important;
    }

    /* Evitar desplazamientos horizontales */

    body .layout-content,
    body .layout-content > .container,
    body #mainContent {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Menú principal */

    body #quickNavMenu {
        max-height: min(70dvh, 650px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

        body #quickNavMenu .quick-dd {
            display: block !important;
            position: static !important;
            height: auto !important;
            min-height: 0 !important;
            width: 100% !important;
            flex: 0 0 auto !important;
        }

        /* Submenús debajo de cada categoría */

        body #quickNavMenu .quick-dd-menu,
        body #quickNavMenu .quick-dd-menu-wide {
            position: static !important;
            inset: auto !important;
            transform: none !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
            margin: 4px 0 8px !important;
            padding: 8px !important;
            background: rgba(255,255,255,.09) !important;
            border: 1px solid rgba(255,255,255,.12) !important;
            border-radius: 10px !important;
            box-shadow: none !important;
            overflow: visible !important;
            float: none !important;
            display: none !important;
        }

        /* Mostrar solamente el submenú abierto */

        body #quickNavMenu .quick-dd.open > .quick-dd-menu,
        body #quickNavMenu .quick-dd.open > .quick-dd-menu-wide {
            display: block !important;
        }

        /* Enlaces secundarios */

        body #quickNavMenu .quick-dd-item {
            display: block !important;
            width: 100% !important;
            min-height: 40px !important;
            padding: 10px 12px !important;
            font-size: 13px !important;
            font-weight: 500 !important;
            line-height: 1.4 !important;
            color: #ffffff !important;
            background: transparent !important;
            white-space: normal !important;
            overflow-wrap: anywhere !important;
            border-radius: 8px !important;
            text-decoration: none !important;
        }

            body #quickNavMenu .quick-dd-item:hover,
            body #quickNavMenu .quick-dd-item:focus {
                color: #d4ad45 !important;
                background: rgba(255,255,255,.15) !important;
            }

        /* Categoría activa */

        body #quickNavMenu .quick-dd.open > .quick-link {
            color: #d4ad45 !important;
            background: rgba(255,255,255,.10) !important;
        }
}

/* =====================================================
   ERPSEI - CORRECCIÓN DEL MENÚ EN MÓDULOS
   ===================================================== */

@media (max-width: 991.98px) {

    /* Barra azul como referencia del menú */

    body.module-main-theme .topbar-links {
        position: relative !important;
        overflow: visible !important;
        z-index: 1050 !important;
        isolation: isolate;
    }

    /* Contenedor del botón */

    body.module-main-theme .quick-nav-wrap {
        position: static !important;
        overflow: visible !important;
    }

    /* Botón de las tres rayitas */

    body.module-main-theme .quick-nav-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 48px !important;
        height: 48px !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        position: relative !important;
        z-index: 2 !important;
    }

    /* Menú cerrado */

    body.module-main-theme #quickNavMenu {
        display: none !important;
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        max-height: 70dvh !important;
        margin: 0 !important;
        padding: 12px !important;
        background: #21166f !important;
        border-radius: 14px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        z-index: 1051 !important;
    }

        /* Menú abierto */

        body.module-main-theme #quickNavMenu.is-open {
            display: flex !important;
            flex-direction: column !important;
            align-items: stretch !important;
            justify-content: flex-start !important;
            flex-wrap: nowrap !important;
            gap: 5px !important;
            visibility: visible !important;
            opacity: 1 !important;
            pointer-events: auto !important;
        }

        /* Categorías */

        body.module-main-theme #quickNavMenu .quick-dd {
            position: static !important;
            width: 100% !important;
            height: auto !important;
            min-height: 0 !important;
            flex: 0 0 auto !important;
        }

        /* Submenús inicialmente cerrados */

        body.module-main-theme #quickNavMenu .quick-dd-menu {
            display: none !important;
            position: static !important;
            transform: none !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            height: auto !important;
            margin: 5px 0 10px !important;
            padding: 8px !important;
            background: rgba(255,255,255,.10) !important;
            border-radius: 10px !important;
            box-shadow: none !important;
            overflow: visible !important;
        }

        /* Submenú abierto */

        body.module-main-theme #quickNavMenu .quick-dd.open > .quick-dd-menu {
            display: block !important;
        }

        /* Opciones legibles */

        body.module-main-theme #quickNavMenu .quick-link,
        body.module-main-theme #quickNavMenu .quick-dd-item {
            display: block !important;
            position: static !important;
            width: 100% !important;
            height: auto !important;
            padding: 11px 12px !important;
            color: #ffffff !important;
            background: transparent;
            white-space: normal !important;
            overflow-wrap: anywhere !important;
            font-size: 14px !important;
            line-height: 1.4 !important;
            text-decoration: none !important;
        }

        body.module-main-theme #quickNavMenu .quick-dd.open > .quick-link {
            color: #d4ad45 !important;
        }
}

/* ==========================================
   ERPSEI - VISIBILIDAD DE MENÚS MÓVILES
   ========================================== */

@media (max-width: 991.98px) {

    body:is(.home-main-theme, .module-main-theme)
    #quickNavMenu:not(.is-open) {
        display: none !important;
    }

    body:is(.home-main-theme, .module-main-theme)
    #quickNavMenu.is-open {
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    body:is(.home-main-theme, .module-main-theme)
    #quickNavMenu .quick-dd {
        position: static !important;
        height: auto !important;
        min-height: 0 !important;
    }

    body:is(.home-main-theme, .module-main-theme)
    #quickNavMenu .quick-dd-menu {
        display: none !important;
        position: static !important;
        width: 100% !important;
        height: auto !important;
    }

    body:is(.home-main-theme, .module-main-theme)
    #quickNavMenu .quick-dd.open > .quick-dd-menu {
        display: block !important;
    }
}
