/* Reset básico para el header */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
}

/* =============================================================================
   HEADER STYLES - SISTEMA RESPONSIVE MEJORADO
============================================================================= */
header {
    position: fixed;
    top: 0;
    width: 100%;
    background: #8c00e9;
    backdrop-filter: blur(10px);
    z-index: 1000;
    transition: all 0.3s ease;
    box-shadow: 0 2px 20px rgba(107, 70, 193, 0.3);
    /* Altura adaptable según el viewport */
    min-height: clamp(70px, 8vh, 110px);
    padding: clamp(0.5rem, 1vh, 1rem) 0;
}

header nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 auto !important;
    max-width: none !important;
    /* Padding adaptable */
    padding: 0 clamp(0.5rem, 2vw, 2rem) !important;
    gap: clamp(0.5rem, 2vw, 1rem);
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 4.5rem;
    margin: 0;
}

.nav-links a {
    text-decoration: none;
    color: #ffffff;
    font-weight: 500;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    position: relative;
}

.nav-links a:hover {
    color: #66ff00;
}

/* =============================================================================
   LOGO SECTION - COMPLETAMENTE RESPONSIVE
============================================================================= */
header .logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    /* Ancho mínimo garantizado */
    min-width: clamp(80px, 12vw, 200px);
}

header .logo a {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

header .logo-icon {
    /* Altura responsive que se adapta al viewport */
    height: clamp(40px, 6vh, 80px);
    width: auto;
    display: flex;
    align-items: center;
}

header .logo-icon img {
    height: 100%;
    width: auto;
    display: block;
    object-fit: contain;
}

header .logo-text {
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    font-weight: bold;
    color: #000000;
    letter-spacing: -1px;
    /* Se oculta automáticamente en pantallas pequeñas */
    display: var(--logo-text-display, block);
}



/* =============================================================================
   DROPDOWN MENUS MEJORADOS
============================================================================= */
header .dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(212, 212, 212, 0.952);
    backdrop-filter: blur(20px);
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(107, 70, 193, 0.2);
    /* Ancho adaptable */
    min-width: clamp(250px, 25vw, 320px);
    max-width: 90vw;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-10px);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid rgba(34, 211, 238, 0.2);
    z-index: 1001;
}

header .nav-item:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(5px);
}

header .dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    background: rgba(212, 212, 212, 0.98);
    border: 1px solid rgba(34, 211, 238, 0.2);
    border-bottom: none;
    border-right: none;
    transform: translateX(-50%) rotate(45deg);
}

header .dropdown-header {
    padding: 1rem 1.5rem 0.5rem;
    border-bottom: 1px solid rgba(107, 70, 193, 0.1);
    margin-bottom: 0.5rem;
}

header .dropdown-title {
    font-weight: 600;
    color: #1E1B4B;
    font-size: clamp(0.9rem, 1.5vw, 1rem);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

header .dropdown-content {
    padding: 0.5rem 0 1rem;
}

header .dropdown-item {
    display: block;
    padding: clamp(0.6rem, 1vh, 0.75rem) clamp(1rem, 2vw, 1.5rem);
    color: #4B5563;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: clamp(0.8rem, 1.3vw, 0.9rem);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    overflow: hidden;
}

header .dropdown-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(135deg, #00fff2, #22D3EE);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

header .dropdown-item:hover {
    background: linear-gradient(135deg, rgba(107, 70, 193, 0.05), rgba(34, 211, 238, 0.05));
    color: #1E1B4B;
    transform: translateX(5px);
}

header .dropdown-item:hover::before {
    transform: scaleY(1);
}

header .dropdown-item .icon {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

/* Mega Menu para categorías con muchas subcategorías */
header .mega-dropdown {
    min-width: clamp(300px, 40vw, 500px);
    max-width: 90vw;
}

header .dropdown-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 20vw, 180px), 1fr));
    gap: 0.5rem;
    padding: 0.5rem;
}

/* =============================================================================
   HEADER ACTIONS - COMPLETAMENTE ADAPTABLE
============================================================================= */
header .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: clamp(0.3rem, 1vw, 0.8rem) !important;
    flex-shrink: 0 !important;
    min-width: fit-content !important;
}

header .action-btn {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Tamaño adaptable */
    width: clamp(32px, 5vw, 44px) !important;
    height: clamp(32px, 5vw, 44px) !important;
    padding: clamp(6px, 1vw, 10px) !important;
}

header .action-btn:hover {
    background: rgba(34, 211, 238, 0.2) !important;
    transform: scale(1.1) !important;
}

header .action-btn svg {
    width: clamp(16px, 3vw, 22px) !important;
    height: clamp(16px, 3vw, 22px) !important;
    stroke: #0030ce !important;
    stroke-width: 1.5 !important;
    fill: none !important;
}

header .cart-btn {
    position: relative !important;
}

header .cart-count {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    background: #EC4899 !important;
    color: white !important;
    border-radius: 50% !important;
    width: clamp(16px, 2.5vw, 20px) !important;
    height: clamp(16px, 2.5vw, 20px) !important;
    font-size: clamp(0.6rem, 1vw, 0.75rem) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold !important;
    animation: bounce 0.3s ease-in-out !important;
}

@keyframes bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* =============================================================================
   MOBILE MENU MEJORADO
============================================================================= */
header .mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: #0030ce;
    cursor: pointer;
    padding: 0.5rem;
    flex-shrink: 0;
}

header .mobile-menu-btn svg {
    width: clamp(20px, 4vw, 24px);
    height: clamp(20px, 4vw, 24px);
}

header .mobile-menu {
    position: fixed;
    top: var(--header-height, 80px);
    left: -100%;
    width: 100%;
    height: calc(100vh - var(--header-height, 80px));
    background: rgba(193, 145, 255, 0.98);
    backdrop-filter: blur(20px);
    transition: left 0.3s ease;
    padding: clamp(1rem, 3vw, 2rem);
    overflow-y: auto;
    z-index: 999;
}

header .mobile-menu.active {
    left: 0;
}

header .mobile-nav-item {
    margin-bottom: 1rem;
}

header .mobile-nav-item > a {
    display: block;
    color: #1E1B4B;
    text-decoration: none;
    padding: clamp(0.8rem, 2vh, 1rem);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.2);
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

header .mobile-nav-item > a:hover {
    background: rgba(255, 255, 255, 0.3);
}

header .mobile-subcategories {
    padding-left: 1rem;
    margin-top: 0.5rem;
}

header .mobile-subcategories a {
    display: block;
    color: #4B5563;
    padding: clamp(0.6rem, 1.5vh, 0.75rem) 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    margin-bottom: 0.25rem;
    text-decoration: none;
    font-size: clamp(0.8rem, 2vw, 0.9rem);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

header .mobile-subcategories a:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #1E1B4B;
}

/* =============================================================================
   SISTEMA DE BREAKPOINTS INTELIGENTE
============================================================================= */

/* Variables CSS para controlar el comportamiento responsive */
:root {
    --header-height: clamp(70px, 8vh, 110px);
    --reserved-space: clamp(200px, 25vw, 400px);
    --logo-text-display: block;
}

/* Pantallas muy grandes (1920px+) */
@media (min-width: 1920px) {
    :root {
        --reserved-space: 500px;
    }
}

/* Pantallas grandes (1600px - 1919px) */
@media (min-width: 1600px) and (max-width: 1919px) {
    :root {
        --reserved-space: 450px;
    }
}

/* Zona crítica: 1360x768 y similares */
@media (min-width: 1200px) and (max-width: 1400px) {
    :root {
        --reserved-space: 350px;
        --logo-text-display: none; /* Ocultar texto del logo si es necesario */
    }
    
    /* Estrategia específica para 1360x768 */
    header .nav-item > a {
        /* Texto aún más compacto */
        font-size: clamp(0.6rem, 1vw, 0.7rem) !important;
        padding: clamp(0.4rem, 0.6vh, 0.6rem) clamp(0.4rem, 1vw, 0.8rem) !important;
        max-width: clamp(70px, 10vw, 100px) !important;
    }
    
    /* Reducir gaps aún más */
    header .nav-links {
        gap: clamp(0.1rem, 0.5vw, 0.3rem) !important;
    }
    
    /* Hacer botones más compactos */
    header .action-btn {
        width: clamp(28px, 4vw, 36px) !important;
        height: clamp(28px, 4vw, 36px) !important;
    }
}

/* Pantallas medianas donde el menú debe colapsar */
@media (max-width: 1199px) {
    :root {
        --logo-text-display: block;
    }
    
    header .nav-links {
        display: none !important;
    }
    
    header .mobile-menu-btn {
        display: block !important;
    }
}

/* Tablets */
@media (max-width: 768px) {
    :root {
        --header-height: clamp(60px, 10vh, 90px);
    }
    
    header .logo-text {
        font-size: clamp(1rem, 4vw, 1.4rem);
    }
}

/* Móviles */
@media (max-width: 480px) {
    :root {
        --header-height: clamp(60px, 12vh, 80px);
        --logo-text-display: none;
    }
    
    header {
        padding: clamp(0.25rem, 1vh, 0.5rem) 0;
    }
    
    header nav {
        padding: 0 clamp(0.5rem, 2vw, 1rem) !important;
    }
    
    header .mobile-menu {
        padding: clamp(0.5rem, 2vw, 1rem);
    }
}

/* =============================================================================
   FALLBACK PARA RESOLUCIONES PROBLEMÁTICAS
============================================================================= */

/* Si el espacio es insuficiente, activar menú móvil */
@media (max-width: 1360px) and (max-height: 768px) {
    /* Opción: forzar menú móvil en pantallas problemáticas */
    .force-mobile-menu .nav-links {
        display: none !important;
    }
    
    .force-mobile-menu .mobile-menu-btn {
        display: block !important;
    }
}

/* =============================================================================
   MEJORAS DE ACCESIBILIDAD Y UX
============================================================================= */

/* Mejorar contraste en modo hover */
header .nav-item > a:hover,
header .nav-item > a:focus {
    outline: 2px solid rgba(34, 211, 238, 0.5);
    outline-offset: 2px;
}

/* Asegurar que los dropdowns sean accesibles por teclado */
header .nav-item:focus-within .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(5px);
}

/* Mejorar la experiencia táctil en móviles */
@media (hover: none) and (pointer: coarse) {
    header .nav-item > a {
        min-height: 44px; /* Tamaño mínimo táctil */
    }
    
    header .action-btn {
        min-width: 44px !important;
        min-height: 44px !important;
    }
}

/* =============================================================================
   OPTIMIZACIONES DE RENDIMIENTO
============================================================================= */

/* Usar will-change para animaciones */
header .dropdown {
    will-change: opacity, visibility, transform;
}

header .nav-item > a {
    will-change: transform, background-color;
}

/* GPU acceleration para animaciones suaves */
header .nav-item > a:hover {
    transform: translateY(-2px) translateZ(0);
}

/* =============================================================================
   SUBCATEGORÍAS EN MENÚ MÓVIL - FUNCIONALIDAD COMPLETA
============================================================================= */

/* Estilos para subcategorías expandibles en móvil */
header .mobile-nav-item.has-submenu > a::after {
    content: '▼';
    font-size: 0.8rem;
    transition: transform 0.3s ease;
    margin-left: auto;
}

header .mobile-nav-item.has-submenu.active > a::after {
    transform: rotate(180deg);
}

header .mobile-subcategories {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding-left: 1rem;
    margin-top: 0;
}

header .mobile-nav-item.active .mobile-subcategories {
    max-height: 500px;
    margin-top: 0.5rem;
}

/* =============================================================================
   MEJORAS PARA DROPDOWNS - ASEGURAR VISIBILIDAD
============================================================================= */

/* Asegurar que los dropdowns sean siempre visibles */
header .nav-item {
    position: relative;
}

header .nav-item:hover .dropdown,
header .nav-item:focus-within .dropdown,
header .nav-item.active .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(5px);
    pointer-events: auto;
}

/* Mantener dropdown visible cuando el mouse está sobre él */
header .dropdown:hover {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(5px);
}

/* Indicador visual para elementos con submenú */
header .nav-item.has-dropdown > a::after {
    content: '▼';
    font-size: 0.7rem;
    margin-left: 0.3rem;
    opacity: 0.7;
    transition: transform 0.3s ease;
}

header .nav-item.has-dropdown:hover > a::after {
    transform: rotate(180deg);
}

/* =============================================================================
   ESTRUCTURA MEJORADA PARA SUBCATEGORÍAS
============================================================================= */

/* Grid para subcategorías múltiples */
header .dropdown-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 18vw, 200px), 1fr));
    gap: 0.3rem;
    padding: 0.5rem;
}

header .dropdown-column {
    display: flex;
    flex-direction: column;
}

header .dropdown-column-title {
    font-weight: 600;
    color: #1E1B4B;
    font-size: clamp(0.8rem, 1.2vw, 0.9rem);
    padding: 0.5rem 1rem;
    border-bottom: 1px solid rgba(107, 70, 193, 0.1);
    margin-bottom: 0.3rem;
}

/* Subcategorías organizadas */
header .subcategory-group {
    margin-bottom: 1rem;
}

header .subcategory-group:last-child {
    margin-bottom: 0;
}

/* =============================================================================
   ESTADOS INTERACTIVOS MEJORADOS
============================================================================= */

/* Hover states más precisos */
header .nav-item {
    transition: all 0.3s ease;
}

/* Evitar parpadeo de dropdowns */
header .nav-item::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 10px;
    background: transparent;
    z-index: 999;
}

/* =============================================================================
   ACCESIBILIDAD MEJORADA PARA SUBCATEGORÍAS
============================================================================= */

/* Navegación por teclado */
header .nav-item > a:focus + .dropdown,
header .nav-item > a:focus-within + .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(5px);
}

/* Estados de focus para subcategorías */
header .dropdown-item:focus {
    background: linear-gradient(135deg, rgba(107, 70, 193, 0.1), rgba(34, 211, 238, 0.1));
    color: #1E1B4B;
    outline: 2px solid rgba(34, 211, 238, 0.5);
    outline-offset: -2px;
}

/* =============================================================================
   RESPONSIVE ESPECÍFICO PARA DROPDOWNS
============================================================================= */

/* Dropdowns en pantallas pequeñas */
@media (max-width: 1199px) {
    header .dropdown {
        display: none; /* Ocultar dropdowns desktop en móvil */
    }
}

/* Mejoras para pantallas táctiles */
@media (hover: none) and (pointer: coarse) {
    header .nav-item:hover .dropdown {
        display: none; /* Evitar hover accidental en móvil */
    }
    
    /* Requerir toque/click para mostrar dropdowns */
    header .nav-item.touched .dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(5px);
    }
}

/* =============================================================================
   UTILIDADES PARA DEBUGGING (comentar en producción)
============================================================================= */

/*
@media (min-width: 1200px) and (max-width: 1400px) {
    header nav {
        outline: 2px solid red;
    }
    
    header .nav-links {
        outline: 2px solid blue;
    }
    
    header .header-actions {
        outline: 2px solid green;
    }
    
    header .logo {
        outline: 2px solid yellow;
    }
}
*/

/* =============================================================================
   JAVASCRIPT HELPERS - CLASES DE UTILIDAD
============================================================================= */

/* Clase para activar dropdown programáticamente */
.dropdown-active .dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(5px) !important;
}

/* Clase para elemento de menú activo */
.nav-item-active > a {
    background: rgba(34, 211, 238, 0.15) !important;
    color: #000000 !important;
}

/* Clase para menú móvil expandido */
.mobile-expanded .mobile-subcategories {
    max-height: none !important;
}