/* === NAVIGATION COMPONENT === */
/* Sistema de navegación principal responsive inteligente */

/* Importar variables compartidas */
@import url('../../shared/styles/variables.css');

/* ===== NAVEGACIÓN PRINCIPAL ===== */
.main-nav {
    display: flex !important; /* Asegurar que siempre sea flex */
    align-items: center !important; /* Alineación vertical siempre centrada */
    position: static !important; /* Evitar posicionamiento absoluto */
    background: transparent !important; /* Fondo transparente */
    width: auto !important; /* Ancho automático */
    height: auto !important; /* Alto automático */
}

.main-nav ul {
    display: flex !important; /* Siempre horizontal */
    flex-direction: row !important; /* Forzar dirección horizontal */
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center !important; /* Centrado vertical */
    gap: 4px; /* Gap uniforme entre todos los elementos */
}

/* ===== ENLACES BASE ===== */
.main-nav ul li a {
    padding: 0 10px; /* Padding uniforme igual al botón más opciones */
    font-size: 0.75em;
    font-family: 'MuseoModerno', sans-serif;
    font-weight: 500;
    text-transform: capitalize;
    letter-spacing: 0.8px;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    height: var(--header-height);
    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
    border-radius: 4px;
}

.main-nav ul li a.active {
    color: var(--accent-text);
}

.main-nav ul li a:focus {
    outline: none;
}

/* ===== SISTEMA HÍBRIDO TEXTO/ICONOS ===== */
/* Por defecto (desktop): mostrar texto, ocultar iconos */
.nav-text {
    display: inline;
    margin-right: 6px;
}

.nav-icon {
    display: none; /* Oculto por defecto en desktop */
    font-size: 1em;
}

/* ===== BOTÓN "MÁS OPCIONES" ===== */
.more-options-btn {
    background: none;
    border: none;
    color: inherit;
    font-family: 'MuseoModerno', sans-serif;
    font-weight: 500;
    font-size: 0.75em;
    text-transform: capitalize;
    letter-spacing: 0.8px;
    cursor: pointer;
    padding: 0 10px;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--header-height);
    box-sizing: border-box;
    position: relative;
    z-index: 950;
    border-radius: 4px;
}

.more-options-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: transparent;
    transition: background-color 0.25s ease;
    z-index: -1;
    pointer-events: none;
}

.more-options-btn:hover::before {
    background-color: rgba(255, 255, 255, 0.08);
}

.more-options-btn:focus {
    outline: none;
}

.more-options-btn:focus-visible {
    outline: none;
}

.more-options-btn:active {
    transform: scale(0.95);
    color: var(--accent-text);
}

.more-options-btn i {
    font-size: 1.2em;
    pointer-events: none;
}

/* Spacing adjustments removed - now using uniform gap system */

/* ===== RESPONSIVE DESIGN ===== */
/* PANTALLAS GRANDES: Solo texto - Sistema gradual fluido */
@media (min-width: 1025px) {
    /* Asegurar layout horizontal */
    .main-nav ul {
        flex-direction: row !important;
        gap: clamp(3px, 0.5vw, 8px); /* Gap fluido entre 3-8px */
    }
    
    /* Solo texto, sin iconos - máxima especificidad */
    .main-nav .nav-text {
        display: inline !important;
        margin-right: 0 !important;
    }
    
    .main-nav .nav-icon {
        display: none !important;
        visibility: hidden !important;
    }
    
    .nav-link {
        gap: clamp(2px, 0.3vw, 6px); /* Gap interno fluido */
        padding: 0 clamp(8px, 1.2vw, 16px); /* Padding fluido 8-16px */
        font-size: clamp(0.6em, 0.75vw, 0.8em); /* Tamaño fluido 0.6-0.8em */
        display: flex;
        align-items: center;
        height: var(--header-height);
        transition: all 0.2s ease; /* Transición suave */
    }
    
    .more-options-btn {
        padding: 0 clamp(8px, 1.2vw, 16px) 0 clamp(3px, 0.5vw, 6px);
        height: var(--header-height);
        display: flex;
        align-items: center;
        transition: all 0.2s ease; /* Transición suave */
    }
}

/* DISPOSITIVOS TÁCTILES: Solo iconos - Sistema fluido */
@media (max-width: 1024px) {
    /* Asegurar layout horizontal */
    .main-nav ul {
        display: flex !important;
        flex-direction: row !important;
        gap: clamp(4px, 1vw, 8px); /* Gap fluido 4-8px */
        align-items: center !important;
    }
    
    /* Solo iconos, sin texto - máxima especificidad */
    .main-nav .nav-text {
        display: none !important;
        visibility: hidden !important;
    }
    
    .main-nav .nav-icon {
        display: inline !important;
        visibility: visible !important;
        font-size: clamp(0.9em, 1.2vw, 1.2em); /* Iconos fluidos */
    }
    
    .nav-link {
        padding: clamp(6px, 1.5vw, 10px); /* Padding fluido 6-10px */
        min-width: clamp(32px, 6vw, 42px); /* Ancho fluido 32-42px */
        min-height: clamp(32px, 6vw, 42px); /* Alto fluido 32-42px */
        justify-content: center;
        display: flex;
        align-items: center;
        border-radius: 6px;
        transition: all 0.2s ease; /* Transición suave */
    }
    
    .more-options-btn {
        min-width: clamp(32px, 6vw, 42px);
        min-height: clamp(32px, 6vw, 42px);
        padding: clamp(6px, 1.5vw, 10px);
        justify-content: center;
        display: flex;
        align-items: center;
        transition: all 0.2s ease; /* Transición suave */
    }
}

/* MÓVIL: Área táctil optimizada para header fijo de 60px */
@media (max-width: 768px) {
    .main-nav ul {
        gap: 6px; /* Gap reducido para encajar en 60px */
    }
    
    .nav-link {
        padding: 8px; /* Padding más compacto para 60px */
        min-width: 40px; /* Ligeramente reducido pero táctil */
        min-height: 40px; /* Encaja mejor en header de 60px */
        font-size: 0.9em; /* Iconos ligeramente más pequeños */
    }
    
    .more-options-btn {
        min-width: 40px; /* Consistente con nav-links */
        min-height: 40px; /* Encaja en header de 60px */
        padding: 8px; /* Padding compacto */
        z-index: 950; /* Por encima del player */
    }
}

/* Pantallas muy pequeñas */
@media (max-width: 480px) {
    .main-nav ul {
        gap: 6px; /* Gap más compacto */
    }
    
    .nav-link {
        padding: 10px;
        min-width: 42px;
        min-height: 42px;
    }
    
    .nav-icon {
        font-size: 1em;
    }
    
    .more-options-btn {
        min-width: 42px;
        min-height: 42px;
        padding: 10px;
    }
    
    .more-options-btn i {
        font-size: 1.1em;
    }
}

/* ===== ESTADOS ESPECÍFICOS ===== */
/* Navegación activa */
.nav-link.active {
    background-color: rgba(139, 34, 82, 0.3);
    color: var(--accent-text);
}

/* Loading state para enlaces */
.nav-link.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Disabled state */
.nav-link:disabled,
.more-options-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ===== FEEDBACK TÁCTIL ===== */
/* Para dispositivos touch */
@media (hover: none) and (pointer: coarse) {
    .nav-link:active,
    .more-options-btn:active {
        background-color: rgba(255, 255, 255, 0.1);
        transform: scale(0.95);
    }
}

/* RECORDATORIO: Este componente requiere:
   - Font Awesome icons: fa-credit-card, fa-compass, fa-map-marked-alt, fa-ticket-alt, fa-ellipsis-v
   - Páginas: konect.html, discober.html (enlaces externos)
   - Variables CSS: --header-height (FIJA: 60px), --accent-text, --accent-color
   - JavaScript: more-options-btn handler, active states, responsive detection
   - CRÍTICO: Iconos solo aparecen en dispositivos táctiles < 900px (tablets pequeños y móviles)
   - CRÍTICO: Desktop y tablets grandes (≥900px) siempre muestran texto
   - CRÍTICO: Sistema detecta dispositivos táctiles con hover:none y pointer:coarse
   - CRÍTICO: Header con altura FIJA de 60px para UX consistente en todas las resoluciones
   - CRÍTICO: Elementos del menú ajustados para encajar perfectamente en header de 60px
*/