/* ============================================
   ESTILOS MÓVILES OPTIMIZADOS - CORREGIDOS
   ============================================ */
@media (max-width: 991px) {
    /* === NAVBAR COLLAPSE === */
    .navbar-collapse {
        display: none !important;
        visibility: hidden !important;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        margin-top: 1rem;
        padding: 1rem;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
    }
    
    .navbar-collapse.show {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s;
    }
    
    /* === NAV ITEMS === */
    .navbar-nav .nav-item {
        margin-bottom: 0.5rem;
    }
    
    .navbar-nav .nav-link {
        padding: 0.875rem 1rem !important;
        border-radius: 8px;
        font-size: 1rem;
        background: #f8f9fa;
        border: 1px solid rgba(0, 0, 0, 0.05);
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .navbar-nav .nav-link:active {
        background: #e9ecef;
        transform: scale(0.98);
    }
    
    .navbar-nav .nav-link i {
        margin-right: 0.5rem;
    }
    
    /* === DROPDOWN INDICADOR === */
    .nav-item.dropdown > a::after,
    .nav-item.dropdown > .nav-link::after {
        content: '\f107';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        margin-left: auto;
        transition: transform 0.3s ease;
        font-size: 0.875rem;
        border: none !important;
        vertical-align: initial !important;
        width: auto !important;
        height: auto !important;
    }
    
    .nav-item.dropdown.show > a::after,
    .nav-item.dropdown.show > .nav-link::after {
        transform: rotate(180deg);
    }
    
    /* === DROPDOWN MENUS - CERRADOS === */
    .dropdown-menu,
    .dropdown-menu-cepas,
    .dropdown-menu-vinas,
    .user-dropdown-menu {
        /* POSICIÓN FIJA */
        position: static !important;
        float: none !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        
        /* TAMAÑO */
        width: 100% !important;
        max-width: 100% !important;
        min-width: auto !important;
        
        /* APARIENCIA */
        display: none !important;
        visibility: hidden !important;
        background: #ffffff;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        margin-top: 0.5rem;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
        
        /* ESTADO CERRADO */
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        padding: 0;
        
        /* TRANSICIÓN SUAVE */
        transition: opacity 0.25s ease, max-height 0.25s ease, padding 0.25s ease, visibility 0s linear 0.25s;
        
        /* PREVENIR INTERACCIÓN CUANDO ESTÁ CERRADO */
        pointer-events: none;
    }
    
    /* === DROPDOWN MENUS - ABIERTOS === */
    .dropdown-menu.show,
    .dropdown-menu-cepas.show,
    .dropdown-menu-vinas.show,
    .user-dropdown-menu.show {
        display: block !important;
        visibility: visible !important;
        max-height: 70vh !important;
        opacity: 1 !important;
        padding: 0.75rem !important;
        overflow-y: auto !important;
        pointer-events: auto !important;
        transition: opacity 0.25s ease, max-height 0.25s ease, padding 0.25s ease, visibility 0s linear 0s;
        
        /* ASEGURAR Z-INDEX CORRECTO */
        z-index: 1000 !important;
        position: relative !important;
    }
    
    /* === ITEMS DENTRO DEL DROPDOWN === */
    .dropdown-menu .dropdown-item,
    .dropdown-menu-cepas .dropdown-item,
    .dropdown-menu-vinas .dropdown-item,
    .user-dropdown-menu .dropdown-item {
        padding: 0.875rem 1rem !important;
        font-size: 1rem !important;
        color: #1f2937 !important;
        background: transparent !important;
        border-radius: 6px !important;
        margin-bottom: 0.25rem !important;
        transition: all 0.2s ease !important;
        display: flex !important;
        align-items: center !important;
        border: none !important;
        border-bottom: 1px solid #f3f4f6 !important;
        min-height: 44px;
        text-decoration: none !important;
    }
    
    .dropdown-menu .dropdown-item:last-child,
    .dropdown-menu-cepas .dropdown-item:last-child,
    .dropdown-menu-vinas .dropdown-item:last-child,
    .user-dropdown-menu .dropdown-item:last-child {
        border-bottom: none !important;
    }
    
    .dropdown-menu .dropdown-item:active,
    .dropdown-menu-cepas .dropdown-item:active,
    .dropdown-menu-vinas .dropdown-item:active,
    .user-dropdown-menu .dropdown-item:active {
        background: #f3f4f6 !important;
        color: #3f111c !important;
        padding-left: 1.2rem !important;
        transform: translateX(4px);
    }
    
    /* === HEADERS DE SECCIÓN === */
    .dropdown-menu-cepas .dropdown-header,
    .dropdown-menu-vinas .dropdown-header {
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
        font-weight: 700 !important;
        color: #1f2937 !important;
        background: #f9fafb !important;
        border-radius: 6px !important;
        border-left: 3px solid #3f111c !important;
        margin-top: 0.75rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* === LINK "TODAS LAS..." === */
    .dropdown-menu-cepas .todas-cepas,
    .dropdown-menu-vinas .todas-cepas {
        background: linear-gradient(135deg, #3f111c 0%, #5a1529 100%) !important;
        color: #ffffff !important;
        padding: 1rem !important;
        text-align: center !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        margin-bottom: 1rem !important;
        transition: all 0.2s ease !important;
        min-height: 44px;
        text-decoration: none !important;
        border-bottom: none !important;
    }
    
    .dropdown-menu-cepas .todas-cepas:active,
    .dropdown-menu-vinas .todas-cepas:active {
        background: linear-gradient(135deg, #5a1529 0%, #3f111c 100%) !important;
        transform: scale(0.98);
    }
    
    /* === DIVIDERS === */
    .dropdown-divider {
        margin: 0.75rem 0 !important;
        border-color: #e9ecef !important;
        opacity: 0.5 !important;
    }
    
    /* === ICONOS === */
    .dropdown-menu i,
    .dropdown-menu-cepas i,
    .dropdown-menu-vinas i {
        margin-right: 0.5rem;
        width: 20px;
        text-align: center;
    }
    
    /* === SCROLLBAR === */
    .dropdown-menu::-webkit-scrollbar,
    .dropdown-menu-cepas::-webkit-scrollbar,
    .dropdown-menu-vinas::-webkit-scrollbar {
        width: 6px;
    }
    
    .dropdown-menu::-webkit-scrollbar-track,
    .dropdown-menu-cepas::-webkit-scrollbar-track,
    .dropdown-menu-vinas::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }
    
    .dropdown-menu::-webkit-scrollbar-thumb,
    .dropdown-menu-cepas::-webkit-scrollbar-thumb,
    .dropdown-menu-vinas::-webkit-scrollbar-thumb {
        background: #3f111c;
        border-radius: 10px;
    }
    
    /* === BOTÓN HAMBURGUESA === */
    .navbar-toggler,
    .custom-toggler {
        border: 1px solid rgba(63, 17, 28, 0.2);
        padding: 0.5rem 0.75rem;
        border-radius: 6px;
        background: #fff;
        transition: all 0.2s ease;
    }
    
    .navbar-toggler:active,
    .custom-toggler:active {
        background: #f8f9fa;
        transform: scale(0.95);
    }
    
    .navbar-toggler.active,
    .custom-toggler.active {
        background: #3f111c;
    }
    
    .navbar-toggler.active span,
    .custom-toggler.active span {
        background: #fff;
    }
    
    /* === PREVENIR SELECCIÓN Y COMPORTAMIENTOS EXTRAÑOS === */
    .nav-link,
    .dropdown-item,
    .dropdown-header {
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        touch-action: manipulation; /* Prevenir zoom en doble tap */
    }
    
    /* Prevenir comportamientos de enlaces en dropdowns cerrados */
    .dropdown-menu:not(.show),
    .dropdown-menu-cepas:not(.show),
    .dropdown-menu-vinas:not(.show),
    .user-dropdown-menu:not(.show) {
        pointer-events: none !important;
    }
    
    /* Asegurar que los toggles siempre sean clickeables */
    .nav-item.dropdown > a,
    .nav-item.dropdown > .nav-link,
    .navbar-toggler {
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }
}

/* === MÓVILES PEQUEÑOS === */
@media (max-width: 576px) {
    .navbar-collapse {
        padding: 0.75rem;
    }
    
    .navbar-nav .nav-link {
        padding: 0.75rem 0.875rem !important;
        font-size: 0.95rem;
    }
    
    .dropdown-menu .dropdown-item,
    .dropdown-menu-cepas .dropdown-item,
    .dropdown-menu-vinas .dropdown-item {
        padding: 0.75rem 0.875rem !important;
        font-size: 0.95rem !important;
    }
}