/* Header Styles */

/* Aplicar fuentes al header */
.navbar-brand {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
}

.nav-link-custom {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 500 !important;
}

.lang-selector {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 600 !important;
}

.header-main {
    border-bottom: 1px solid #e0e0e0;
    background-color: #f8f9fa;
    padding: 0 !important;
    margin: 0 !important;
}

/* Sobrescribir estilos de Bootstrap navbar */
.navbar.navbar-expand-lg {
    padding: 0 !important; /* Sin padding, el container lo maneja */
    margin: 0 !important;
    min-height: 80px !important; /* Altura ampliada para el logo */
    align-items: flex-start !important;
    position: relative !important;
}

/* Container del navbar - usando Bootstrap container */
.navbar .container {
    padding-top: 0 !important;
    margin-top: 0 !important;
    align-items: flex-start !important;
    min-height: 80px !important;
    position: relative !important;
    width: 100% !important;
}

/* Logo - posicionado desde la línea base del texto hacia abajo */
.navbar-brand {
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    left: 0 !important; /* Alineado al contenedor */
    top: 20px !important; /* Empieza donde termina el texto */
    z-index: 10;
}

.logo-img {
    height: 50px !important;
    transition: transform 0.3s ease;
    display: block;
}

.logo-img:hover {
    transform: scale(1.05);
}

/* Collapse container */
.navbar-collapse {
    flex-grow: 1 !important;
    align-items: flex-start !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    width: 100% !important;
    position: relative !important;
}

/* Menu Items Container - con espacio superior */
.navbar-nav.menu-items {
    margin: 0 !important;
    padding-top: 0px !important; /* Espacio superior para no pegarse al borde */
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex-direction: row !important;
    align-items: flex-start !important;
}

/* Menu Items individuales */
.nav-item.menu-item {
    position: relative;
    display: flex !important;
    align-items: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
}

/* Espacio entre logo y primer item */
.nav-item.menu-item:first-child {
    margin-left: 140px !important; /* Espacio para el logo + separación */
}

/* Separadores verticales - desde arriba hasta alinearse con el texto */
.nav-item.menu-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0 !important; /* Desde arriba del todo */
    width: 1px;
    height: 32px !important; /* Hasta donde empieza el texto (12px padding + 20px texto) */
    background-color: #000000;
}

/* Navigation Links - SIN padding superior */
.nav-link.nav-link-custom {
    color: #00699C !important; /* Cambiado a nuevo color */
    font-weight: 500 !important;
    font-size: 14px !important;
    padding: 15px 1.5rem !important; /* Solo padding lateral */
    margin: 0 !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    line-height: 20px !important; /* Altura específica del texto */
    border: none !important;
    background: none !important;
    height: 20px !important; /* Altura fija para el texto */
}

.nav-link.nav-link-custom:hover,
.nav-link.nav-link-custom:focus {
    color: #00B6DB !important; /* Color para hover y focus */
    background: none !important;
}

.nav-link.nav-link-custom.active {
    color: #00B6DB !important; /* Color para estado activo */
    font-weight: 600 !important;
    background: none !important;
}

/* Language Selector Container - POSICIONADO A LA DERECHA */
.navbar-nav.ms-auto {
    align-items: flex-start !important;
    margin: 0 !important;
    padding: 15px 0 0 0 !important; /* Mismo padding top que los nav-links */
    position: absolute !important;
    right: 0 !important; /* Alineado al contenedor */
    top: 0 !important;
    width: auto !important;
}

.nav-item.dropdown {
    align-self: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dropdown-toggle.lang-selector {
    color: #00699C !important; /* Cambiado a nuevo color */
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 0.25rem 0.75rem !important;
    border: 1px solid #00699C !important; /* Border con el mismo color */
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
    background: white !important;
    line-height: 20px !important;
    height: auto !important;
}

.dropdown-toggle.lang-selector:hover,
.dropdown-toggle.lang-selector:focus {
    background-color: #00B6DB !important; /* Fondo hover/focus */
    color: white !important;
    border-color: #00B6DB !important; /* Border hover/focus */
}

.dropdown-toggle.lang-selector::after {
    margin-left: 0.5rem;
}

/* Icono X para cerrar menu responsive */
.navbar-toggler {
    border: none !important;
    padding: 4px 8px !important;
    outline: none !important;
    box-shadow: none !important;
}

.navbar-toggler:focus {
    box-shadow: none !important;
}

/* Crear icono X con CSS */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-image: none !important;
    position: relative;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before,
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: #00699C;
    transform-origin: center;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
    transform: translateY(-50%) rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    transform: translateY(-50%) rotate(-45deg);
}

/* Responsive Design - MANTENIDO EXACTAMENTE IGUAL */
@media (max-width: 991px) {
    .navbar.navbar-expand-lg {
        align-items: center !important;
        min-height: 60px !important;
        padding: 0.5rem 1rem !important;
        position: static !important;
    }
    
    .navbar .container {
        align-items: center !important;
        min-height: 60px !important;
        position: static !important;
        padding: 0 !important; /* Sin padding en responsive */
        width: 100% !important;
    }
    
    .navbar-brand {
        position: static !important;
        align-self: center !important;
        top: auto !important;
        left: auto !important;
    }
    
    /* Menu collapse - ancho completo y altura completa */
    .navbar-collapse {
        position: fixed !important;
        top: 60px !important; /* Altura del navbar */
        left: 0 !important;
        width: 100vw !important;
        height: calc(100vh - 60px) !important;
        background-color: #f8f9fa !important;
        z-index: 1000 !important;
        padding: 2rem !important;
        overflow-y: auto !important;
        /* Imagen de fondo en la parte inferior */
        background-image: url('/assets/img/Logos/imgMenuresponsive.png') !important;
        background-repeat: no-repeat !important;
        background-position: bottom center !important;
        background-size: contain !important;
    }
    
    .navbar-nav.menu-items {
        flex-direction: column !important;
        align-items: flex-start !important;
        margin: 0 !important;
        width: 100% !important;
        padding: 0 !important;
    }
    
    .nav-item.menu-item {
        width: 100% !important;
        border: none !important; /* Ocultar líneas */
        align-items: stretch !important;
        margin-bottom: 1.5rem !important; /* Más espacio entre items */
    }
    
    .nav-item.menu-item:first-child {
        margin-left: 0 !important;
    }
    
    .nav-item.menu-item::before {
        display: none !important; /* Ocultar separadores verticales */
    }
    
    .nav-link.nav-link-custom {
        padding: 1rem 0 !important; /* Más padding vertical */
        width: 100% !important;
        height: auto !important;
        font-size: 16px !important; /* Texto más grande en móvil */
        line-height: 1.4 !important;
    }
    
    .navbar-nav.ms-auto {
        align-items: flex-start !important;
        margin-top: 2rem !important;
        margin-left: 0 !important;
        position: static !important;
        right: auto !important;
        top: auto !important;
        padding: 0 !important;
        width: 100% !important;
    }
    
    .nav-item.dropdown {
        align-self: flex-start !important;
        margin-top: 0 !important;
        width: 100% !important;
    }
    
    .dropdown-toggle.lang-selector {
        display: inline-block !important;
        width: auto !important;
        font-size: 16px !important;
    }
}

@media (max-width: 768px) {
    .navbar.navbar-expand-lg {
        padding: 0.5rem !important;
    }
    
    .logo-img {
        height: 40px !important;
    }
    
    .nav-item.menu-item::before {
        height: 18px !important;
    }
    
    .nav-link.nav-link-custom {
        line-height: 18px !important;
        height: 18px !important;
    }
}

/* HEADER STICKY - */

/* Header Sticky */
.header-main {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    border-bottom: 1px solid #e0e0e0;
    background-color: #f8f9fa;
    padding: 0 !important;
    margin: 0 !important;
    /* Transición suave para efectos adicionales (opcional) */
    transition: all 0.3s ease;
    /* Sombra sutil cuando hace sticky (opcional) */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Asegurar que el navbar mantenga su fondo */
.header-main .navbar {
    background-color: #f8f9fa !important;
    transition: all 0.3s ease;
}

/* Efecto opcional: cambiar la sombra en scroll */
.header-main.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Asegurar que el body tenga espacio para el contenido */
body {
    padding-top: 0; /* No necesitamos padding-top porque sticky mantiene el flujo */
}

/* Responsive - mantener sticky en todas las resoluciones */
@media (max-width: 991px) {
    .header-main {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
    }
    
    /* Asegurar que el menu collapse se posicione correctamente */
    .navbar-collapse {
        position: fixed !important;
        top: 60px !important; /* Altura del navbar en móvil */
        left: 0 !important;
        width: 100vw !important;
        height: calc(100vh - 60px) !important;
        background-color: #f8f9fa !important;
        z-index: 999 !important; /* Un nivel menos que el header */
        padding: 2rem !important;
        overflow-y: auto !important;
        background-image: url('/assets/img/Logos/imgMenuresponsive.png') !important;
        background-repeat: no-repeat !important;
        background-position: bottom center !important;
        background-size: contain !important;
    }
}

@media (max-width: 768px) {
    .header-main {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
    }
}