/**
 * 📱 CORRECCIÓN DE NAVBAR PARA MÓVIL
 * Estilos específicos para mejorar la experiencia en dispositivos móviles
 */

/* ============================================================================
   📱 CORRECCIÓN DE ICONOS EN MÓVIL
   ============================================================================ */

/* Reducir tamaño de iconos en móvil */
@media (max-width: 768px) {
    .navbar-nav .nav-link i {
        font-size: 0.9rem !important;
        margin-right: 0.25rem !important;
    }
    
    /* Iconos específicos del navbar */
    .navbar-nav .nav-link i.fa-gamepad,
    .navbar-nav .nav-link i.fa-chart-line,
    .navbar-nav .nav-link i.fa-bell,
    .navbar-nav .nav-link i.fa-user {
        font-size: 0.85rem !important;
    }
    
    /* Ajustar padding para iconos más pequeños */
    .navbar-nav .nav-link {
        padding: 0.5rem 0.6rem !important;
        font-size: 0.8rem !important;
    }
    
    /* Dropdown items con iconos más pequeños */
    .dropdown-item i {
        font-size: 0.8rem !important;
        margin-right: 0.4rem !important;
    }
}

/* ============================================================================
   📱 MEJORAS PARA TABLET
   ============================================================================ */

@media (max-width: 991.98px) and (min-width: 769px) {
    .navbar-nav .nav-link i {
        font-size: 0.95rem !important;
    }
    
    .navbar-nav .nav-link {
        padding: 0.5rem 0.8rem !important;
        font-size: 0.85rem !important;
    }
}

/* ============================================================================
   📱 NAVBAR TOGGLER MEJORADO
   ============================================================================ */

@media (max-width: 991.98px) {
    .navbar-toggler {
        padding: 0.25rem 0.5rem !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 6px !important;
    }
    
    .navbar-toggler:focus {
        box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25) !important;
    }
    
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
        width: 1.2em !important;
        height: 1.2em !important;
    }
}

/* ============================================================================
   📱 DROPDOWN MENU MEJORADO PARA MÓVIL
   ============================================================================ */

@media (max-width: 768px) {
    .dropdown-menu {
        min-width: 200px !important;
        max-width: 90vw !important;
        margin-top: 0.25rem !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    }
    
    .dropdown-item {
        padding: 0.6rem 1rem !important;
        font-size: 0.85rem !important;
        border-radius: 4px !important;
        margin: 0.1rem 0.5rem !important;
    }
    
    .dropdown-item:hover {
        transform: translateX(3px) !important;
    }
}

/* ============================================================================
   📱 USER INFO CONTAINER MEJORADO
   ============================================================================ */

@media (max-width: 768px) {
    .user-info-container {
        padding: 0.3rem 0.5rem !important;
        margin-right: 0.5rem !important;
    }
    
    .user-avatar i {
        font-size: 1.2rem !important;
    }
    
    .user-details {
        min-width: 50px !important;
    }
    
    .user-name, .user-level {
        font-size: 0.7rem !important;
        line-height: 1.1 !important;
    }
}

/* ============================================================================
   📱 NAVBAR BRAND MEJORADO
   ============================================================================ */

@media (max-width: 768px) {
    .navbar-brand {
        font-size: 1.4rem !important;
        margin-right: 0.5rem !important;
    }
    
    .navbar-brand i {
        font-size: 1.3rem !important;
        margin-right: 0.3rem !important;
    }
}

/* ============================================================================
   📱 NOTIFICATION BADGE MEJORADO
   ============================================================================ */

@media (max-width: 768px) {
    .notification-badge {
        font-size: 0.5rem !important;
        padding: 0.1rem 0.3rem !important;
        min-width: 1rem !important;
        height: 1rem !important;
        line-height: 0.8 !important;
    }
}

/* ============================================================================
   📱 COLLAPSE NAVBAR MEJORADO
   ============================================================================ */

@media (max-width: 991.98px) {
    .navbar-collapse {
        background: rgba(44, 62, 80, 0.98) !important;
        backdrop-filter: blur(15px) !important;
        border-radius: 8px !important;
        margin-top: 0.5rem !important;
        padding: 0.5rem !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    .navbar-nav {
        flex-direction: column !important;
        gap: 0.25rem !important;
        width: 100% !important;
    }
    
    .nav-item {
        width: 100% !important;
    }
    
    .nav-link {
        width: 100% !important;
        text-align: left !important;
        padding: 0.6rem 1rem !important;
        border-radius: 6px !important;
    }
}

/* ============================================================================
   📱 ANIMACIONES MEJORADAS
   ============================================================================ */

@media (max-width: 768px) {
    .navbar-nav .nav-link {
        transition: all 0.2s ease !important;
    }
    
    .navbar-nav .nav-link:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }
    
    .dropdown-item {
        transition: all 0.2s ease !important;
    }
}

/* ============================================================================
   📱 MEJORAS DE ACCESIBILIDAD
   ============================================================================ */

@media (max-width: 768px) {
    .nav-link:focus,
    .dropdown-item:focus {
        outline: 2px solid rgba(255, 255, 255, 0.5) !important;
        outline-offset: 2px !important;
    }
    
    .navbar-toggler:focus {
        outline: 2px solid rgba(255, 255, 255, 0.5) !important;
        outline-offset: 2px !important;
    }
}

/* ============================================================================
   📱 CORRECCIÓN DE Z-INDEX
   ============================================================================ */

@media (max-width: 768px) {
    .navbar {
        z-index: 1050 !important;
    }
    
    .dropdown-menu {
        z-index: 1060 !important;
    }
    
    .navbar-collapse {
        z-index: 1055 !important;
    }
}