/* ===================================
   Desktop Visibility Fix
   Oculta elementos móviles en pantallas desktop
   =================================== */

/* ESTILOS BASE - OCULTAR TODO POR DEFECTO */
.mobile-menu-btn,
.mobile-nav-overlay,
.mobile-nav-menu,
.mobile-nav-links,
.mobile-bottom-nav,
.mobile-bottom-nav-items,
.nav-label {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* OCULTAR ELEMENTOS MÓVILES EN DESKTOP */
/* Para pantallas mayores a 768px */
@media (min-width: 769px) {
    /* Ocultar menú hamburguesa */
    .mobile-menu-btn {
        display: none !important;
    }

    /* Ocultar overlay del menú móvil */
    .mobile-nav-overlay {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* Ocultar navegación inferior móvil */
    .mobile-bottom-nav {
        display: none !important;
    }

    /* Asegurarse de que el menú móvil y sus enlaces estén ocultos */
    .mobile-nav-menu,
    .mobile-nav-links {
        display: none !important;
    }

    /* Remover padding del main container que es solo para móvil */
    .main-container {
        padding-bottom: 0 !important;
    }

    /* Mostrar navegación lateral desktop */
    .side-nav {
        display: flex !important;
    }
}

/* ESTILOS BASE PARA ELEMENTOS MÓVILES */
/* Estos elementos deben estar ocultos por defecto */
.mobile-menu-btn {
    display: none;
}

.mobile-nav-overlay {
    display: none;
    opacity: 0;
    visibility: hidden;
}

.mobile-nav-menu {
    display: none;
}

.mobile-bottom-nav {
    display: none;
}

/* SOLO MOSTRAR EN MÓVIL */
@media (max-width: 768px) {
    /* Mostrar botón hamburguesa */
    .mobile-menu-btn {
        display: flex !important;
    }

    /* Preparar overlay (pero no mostrarlo hasta que se active) */
    .mobile-nav-overlay {
        display: block !important;
        /* opacity y visibility se controlan con JavaScript */
    }

    /* Mostrar navegación inferior */
    .mobile-bottom-nav {
        display: block !important;
    }

    /* Ocultar navegación desktop */
    .side-nav {
        display: none !important;
    }
}

/* FIX ADICIONAL PARA CHROME */
/* Asegurarse de que los textos del menú no sean visibles sin el overlay activo */
.mobile-nav-overlay:not(.active) {
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.mobile-nav-overlay:not(.active) * {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Cuando el overlay está activo */
.mobile-nav-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;
}

/* LIMPIAR ESTILOS CONFLICTIVOS */
/* Remover cualquier estilo que pueda mostrar elementos móviles en desktop */
@media (min-width: 769px) {
    /* Forzar ocultamiento de todos los elementos con clases mobile */
    [class*="mobile-nav"],
    [class*="mobile-menu"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* Excepción: permitir que el theme toggle sea visible */
    .theme-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}