/* --- 3. HEADER Y NAVEGACIÓN --- */
header {
    background: var(--dark);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.nav-menu {
    display: flex;
    align-items: center;
    gap: 30px;
}
.nav-container {
    max-width: 95%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 75px;
}
.logo {
    color: var(--white) !important;
    font-size: 1.6em;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -1px;
}
.menu-principal { list-style: none; display: flex; gap: 5px; margin: 0; padding: 0; }
.menu-principal>li>a {
    color: #d1d5db !important;
    font-weight: 600;
    padding: 10px 15px;
    text-transform: uppercase;
    font-size: 0.85em;
    transition: 0.3s;
    border-radius: 5px;
}
.menu-principal>li>a:hover { color: var(--white) !important; background: var(--dark-light); }

/* Dropdowns del menú */
.tiene-dropdown { position: relative; }
.dropdown {
    position: absolute; top: 100%; left: 0;
    background: var(--dark); min-width: 240px;
    list-style: none; padding: 10px 0;
    opacity: 0; visibility: hidden;
    transform: translateY(10px); transition: 0.3s;
    border-top: 3px solid var(--primary);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}
.tiene-dropdown:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
    display: block; color: #9ca3af !important; padding: 12px 20px;
    font-size: 0.9em; border-bottom: 1px solid #1f2937; transition: 0.2s;
}
.dropdown a:hover { background: var(--dark-light); color: var(--white) !important; padding-left: 25px; }
.menu-principal > li:last-child .dropdown, .menu-principal > li:nth-last-child(2) .dropdown {
    left: auto !important; right: 0 !important;
}

/* Buscador en el Nav */
.buscador-nav { display: flex; align-items: center; margin-left: auto; margin-right: 20px; position: relative; max-width: 100%; }
.buscador-nav input {
    background: #f1f5f9; border: 1px solid transparent; padding: 8px 16px 8px 35px;
    border-radius: 50px; font-family: var(--font-body); font-size: 0.9rem;
    color: #1e293b; width: 200px; transition: all 0.3s ease;
}
.buscador-nav input:focus { outline: none; background: #ffffff; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); width: 250px; }
.buscador-nav button { position: absolute; left: 10px; background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 1rem; padding: 0; display: flex; align-items: center; }

/* Botón Tema Oscuro */
#toggle-tema { background: none; border: none; font-size: 1.4rem; cursor: pointer; margin-left: 15px; }

/* Menú de Autenticación y Flows */
.menu-auth { display: flex; align-items: center; margin-left: auto; }
.auth-visitante, .auth-logueado { display: flex; align-items: center; gap: 10px; white-space: nowrap; /* Evita que los botones se rompan en dos líneas */ }
.btn-ghost {
    text-decoration: none; color: #f8fafc; font-weight: 600; font-size: 0.9rem;
    padding: 7px 14px; border-radius: 6px; transition: 0.2s;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.1); }
.btn-primary {
    background: var(--primary); color: white; text-decoration: none; font-weight: 600;
    font-size: 0.9rem; padding: 7px 14px; border-radius: 6px; transition: 0.2s;
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-salir { color: #ef4444; font-size: 0.9rem; text-decoration: none; font-weight: 600; margin-left: 5px; }
.badge-flows {
    background: #fef08a; color: #854d0e; font-weight: 700; font-size: 0.85rem;
    padding: 5px 10px; border-radius: 20px; border: 1px solid #fde047;
}

/* Menú Hamburguesa Móvil */
.menu-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 10px; z-index: 1100; }
.bar { width: 25px; height: 3px; background-color: white; transition: 0.3s; border-radius: 2px; }

@media (max-width: 768px) {
    html { scroll-padding-top: 70px; }
    .buscador-nav { display: none; }
    .menu-toggle { display: flex; }
    .nav-menu {
        position: fixed; 
        top: 0; 
        right: -100%; 
        width: 80%; 
        max-width: 300px; 
        height: 100vh;
        background: var(--dark); 
        padding: 100px 30px; 
        transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5); 
        z-index: 1050;
        /* NUEVO: Lo forzamos a columna en móvil */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }
    
    .nav-menu.active { right: 0; }
    
    .menu-auth {
        margin-left: 0; /* Quitamos el auto-margin para que no se pegue a la derecha en móvil */
        width: 100%;
        flex-wrap: wrap; /* Por si el saldo de Flows es muy largo */
    }
    .menu-principal { flex-direction: column; gap: 20px; }
    .menu-principal a { font-size: 1.1em; display: block; }
    .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: rgba(255, 255, 255, 0.05); margin-top: 10px; display: none; }
    .tiene-dropdown:hover .dropdown { display: block; }
    .menu-toggle.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .menu-toggle.active .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}