/* ==========================================================================
   LAYOUT DE CABECERA (Mobile-First)
   ========================================================================== */
.main-header {
    position: relative;
    z-index: 1000;
    background-color: var(--bg-header);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.header-container {
    max-width: 100%;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 5rem;
    padding: 0 3rem;
    /* Padding fluido: más pequeño en pantallas ajustadas, más grande en 4K */
    padding: 0 clamp(1.5rem, 4vw, 3rem);
    /* Usamos clamp para que el gap varíe entre 1rem y 2rem según el ancho */
    gap: clamp(1rem, 2vw, 2rem);
}

/* Brand / Logo */
.header-brand a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--brand-primary);
    min-width: 0; /* CRÍTICO: Permite que el contenedor se encoja */
}

.brand-logo {
    object-fit: contain;
    transition: transform 0.2s ease;
}

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

.brand-name {
    font-size: clamp(1rem, 4vw, 1.25rem); /* Tipografía fluida: se ajusta sola entre 1rem y 1.25rem */
    font-weight: 700;
    line-height: 1.1;
}



/* ==========================================================================
   NAVEGACIÓN (OCULTA EN MÓVIL)
   ========================================================================== */

.header-nav {
    display: none;
}

.nav-list {
    list-style: none;
    display: flex;
    align-items: center;
    /* El espacio se encogerá automáticamente antes de llegar al modo móvil */
    gap: clamp(0.8rem, 1.5vw, 2rem);
}

.nav-link {
    position: relative;
    text-decoration: none;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.5rem 0;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Pseudo-elemento para el subrayado animado */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--brand-primary);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
}

/* ESTADO: PÁGINA ACTIVA */
.nav-link.is-active-page {
    color: var(--brand-primary);
    font-weight: 700; /* Peso extra para destacar jerarquía */
}

.nav-link.is-active-page::after {
    width: 100%;
    background-color: var(--accent);
    height: 3px;
}

.nav-link:hover {
    color: var(--brand-primary);
}

.nav-link:hover::after {
    width: 100%; /* El subrayado se expande suavemente */
}

/* Efecto sutil de "elevación" para el texto en hover */
.nav-link:active {
    transform: translateY(1px);
}

/* Botones de Acción */
.header-user-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.auth-buttons {
    display: flex;
}

.btn {
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-secondary {
    color: var(--brand-primary);
    background: transparent;
}

.btn-primary {
    background-color: var(--brand-primary);
    color: white;
    border: none;
}

.btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* Icono de menú moderno */
.mobile-nav-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 10;
}

.hamburger {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--brand-primary);
    position: relative;
    transition: background 0.3s;
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 3px;
    background-color: var(--brand-primary);
    left: 0;
    transition: transform 0.3s, top 0.3s;
}

.hamburger::before { top: -8px; } /* Línea superior */
.hamburger::after { bottom: -8px; } /* Línea inferior */

/* Clase que activará Javascript para mostrar el menú */
.header-nav.is-active {
    display: flex;
    flex-direction: column; 
    gap: 1.5rem;
    position: absolute;
    top: 5rem; 
    left: 0;
    width: 100%;
    background-color: var(--bg-header);
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Estilo de los botones dentro del menú móvil */
.header-nav.is-active .auth-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    width: 100%;
    border-top: 1px solid var(--border-color);
    padding-top: 1.5rem;
}

.header-nav.is-active .btn {
    width: 100%;
    text-align: center;
}

/* Animación del icono Hamburguesa a una "X" */
.mobile-nav-toggle.is-active .hamburger {
    background-color: transparent;
}

.mobile-nav-toggle.is-active .hamburger::before {
    transform: rotate(45deg);
    top: 0;
}

.mobile-nav-toggle.is-active .hamburger::after {
    transform: rotate(-45deg);
    bottom: 0;
}



/* ==========================================================================
   BOTÓN DE CAMBIO DE TEMA
   ========================================================================== */

.theme-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main); /* Usa el color de texto principal de tu reset */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease;
    border-radius: 0.5rem;
}

.theme-toggle:hover {
    transform: scale(1.1) rotate(15deg);
    background-color: var(--brand-secondary);
    color: var(--brand-primary);
}

/* Lógica de visibilidad de iconos */
.sun-icon { display: none; }
.moon-icon { display: block; }

[data-theme='dark'] .sun-icon { display: block; }
[data-theme='dark'] .moon-icon { display: none; }

/* Ajuste del tamaño del SVG en REM */
.theme-toggle svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: none;     /* Importante: los iconos son de trazo */
    stroke: currentColor; /* Hereda el color del botón o del texto */
}



/* --- OSCURECER EL FONDO AL ABRIR EL MENÚ --- */
.nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px); /* Efecto cristal esmerilado */
    z-index: 999; /* Justo debajo del header (1000) */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

/* Se activa cuando el menú está abierto */
.nav-overlay.is-active {
    opacity: 1;
    visibility: visible;
}



/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

/* Se reduce ligeramente el tamaño de la fuente en la zona con estrechamiento */
@media (min-width: 1200px) and (max-width: 1350px) {
    .nav-link {
        font-size: 0.85rem; /* Un poco más pequeño para ganar píxeles vitales */
    }
    
    .brand-name {
        font-size: 1.1rem; /* Protegemos el logo para que no empuje el resto */
    }

    .btn {
        padding: 0.6rem 0.8rem; /* Ganamos espacio en los botones de auth */
    }
    
    .header-user-actions {
        gap: 0.5rem; /* Pegamos un poco más el selector de tema */
    }
}

/* Pantallas Grandes (Tablets y Laptops) */
@media (min-width: 1200px) {
    .main-header {
        position: sticky;
        top: 0;
    }

    .header-nav {
        display: flex; /* Mantiene la lista y los botones alineados horizontalmente */
        align-items: center;
        gap: 2rem; 
    }
    
    .mobile-nav-toggle {
        display: none; 
    }
}

/* Pantallas Pequeñas (tablets o ordenadores con baja resolución) */
@media (max-width: 1199px) {
    .header-nav {
        display: none; /* Escondemos el menú hasta que se pulse la hamburguesa */
    }

    .header-container {
        padding: 0.75rem 1rem; /* Reducimos padding lateral en móviles */
    }

    /* Empujamos el botón de tema para que se pegue a la hamburguesa */
    .header-user-actions {
        margin-left: auto;
        margin-right: 0.5rem; /* Espacio entre el tema y la hamburguesa */
        width: auto;
        padding-top: 0;
        border-top: none;
    }

    /* Centra los enlaces */
    .header-nav.is-active .nav-list {
        justify-content: center;
    }
}

/* Optimización para móviles (Menos de 640px) */
@media (max-width: 640px) {
    .header-container {
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.5rem;
        min-height: auto;
    }

    .brand-name {
        max-width: 300px;
    }

    /* Forzamos la lista a vertical SOLO por debajo de 640px */
    .header-nav.is-active .nav-list {
        flex-direction: column;
        align-items: center; /* Centra los enlaces para que queden alineados con los botones */
        width: 100%;
    }
}