/* ============================================================
   nav.css — Header con degradado de marca (azul-marino → verde)
   ============================================================ */

.site-header {
    background: linear-gradient(
        135deg,
        #122b5c 0%,
        #1a3a7a 40%,
        #0e7a5f 100%
    );
    border-bottom: 1px solid rgba(0,200,150,0.15);
    box-shadow: 0 2px 20px rgba(0,0,0,0.30);
}

/* Toque de luz sutil desde arriba */
.site-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.03) 0%,
        transparent 60%
    );
    pointer-events: none;
    z-index: 0;
}

.site-header .site-header__inner {
    position: relative;
    z-index: 1;
}

/* Logo blanco */
.site-header .logo__img {
    filter: brightness(0) invert(1);
    height: 38px;
}

/* Hamburguesa blanca */
.site-header .nav-toggle span {
    background: rgba(255,255,255,0.85);
}

/* ── Grupo de enlaces ────────────────────────────────────── */
.nav-links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
}

/* ── Cada enlace ─────────────────────────────────────────── */
.nav-link {
    display: inline-flex;
    align-items: center;
    position: relative;
    padding: 0.4rem 0.95rem;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: rgba(255,255,255,0.80);
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background .14s, color .14s, border-color .14s, transform .14s;
}

.nav-link:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-color: rgba(255,255,255,0.18);
    transform: translateY(-1px);
    text-decoration: none;
}

/* Punto verde de acento debajo */
.nav-link::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #00c896;
    transition: transform .2s cubic-bezier(.34, 1.56, .64, 1);
}

.nav-link:hover::after,
.nav-link.is-active::after {
    transform: translateX(-50%) scale(1);
}

.nav-link.is-active {
    background: rgba(0,200,150,0.18);
    color: #fff;
    font-weight: 600;
    border-color: rgba(0,200,150,0.30);
}

/* ── "Acceso clientes" ───────────────────────────────────── */
.site-header .nav__login {
    color: rgba(255,255,255,0.82);
    border-color: rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.07);
    font-size: 0.84rem;
    padding: 0.42rem 0.95rem;
    border-radius: 9px;
}
.site-header .nav__login:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(0,200,150,0.55);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

/* ── Chip de usuario ─────────────────────────────────────── */
.site-header .nav__user-chip {
    background: rgba(0,200,150,0.14);
    border-color: rgba(0,200,150,0.28);
    color: rgba(255,255,255,0.90);
}

/* ── Botones área privada / admin ────────────────────────── */
.site-header .nav__area-btn {
    background: rgba(0,200,150,0.25);
    border: 1px solid rgba(0,200,150,0.40);
    color: #fff;
    font-size: 0.84rem;
}
.site-header .nav__area-btn:hover {
    background: rgba(0,200,150,0.40);
    border-color: rgba(0,200,150,0.60);
    color: #fff;
}
.site-header .nav__area-btn--admin {
    background: rgba(26,58,122,0.60);
    border-color: rgba(255,255,255,0.20);
}
.site-header .nav__area-btn--admin:hover {
    background: rgba(26,58,122,0.85);
}

/* ── Botón Salir ─────────────────────────────────────────── */
.site-header .nav__logout-btn {
    color: rgba(255,255,255,0.48);
    font-size: 0.84rem;
}
.site-header .nav__logout-btn:hover {
    color: #fca5a5;
    text-decoration: none;
}

/* ── Separador vertical ──────────────────────────────────── */
.site-header .nav__sep {
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(255,255,255,0.22) 30%,
        rgba(255,255,255,0.22) 70%,
        transparent
    );
}

/* ── CTA con brillo verde ────────────────────────────────── */
.btn--nav-cta {
    position: relative;
    overflow: hidden;
    font-size: 0.84rem;
    padding: 0.44rem 1.1rem;
    border-radius: 9px;
    background: linear-gradient(135deg, #00c896 0%, #0e7a5f 100%);
    box-shadow: 0 2px 10px -2px rgba(0,200,150,0.45);
}
.btn--nav-cta::before {
    content: "";
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.38) 50%,
        rgba(255,255,255,0) 100%
    );
    transform: skewX(-18deg);
    pointer-events: none;
}
.btn--nav-cta:hover { transform: translateY(-2px); }
.btn--nav-cta:hover::before { animation: nav-shine .5s ease forwards; }
@keyframes nav-shine {
    from { left: -75%; }
    to   { left: 125%; }
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 760px) {
    .site-header .nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
        background: linear-gradient(135deg, #122b5c 0%, #0e7a5f 100%);
        border-bottom: 1px solid rgba(0,200,150,0.15);
        padding: 1rem 1.25rem;
        box-shadow: 0 8px 24px rgba(0,0,0,0.35);
        z-index: 40;
    }
    .site-header .nav.is-open {
        display: flex;
    }
    .nav-links {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        background: transparent;
        border: none;
        padding: 0;
        gap: 0.1rem;
    }
    .nav-link {
        width: 100%;
        padding: 0.65rem 0.75rem;
        font-size: 0.95rem;
        transform: none;
    }
    .nav-link::after { display: none; }
    .site-header .nav__login,
    .site-header .nav__area-btn { width: 100%; text-align: center; }
    .site-header .nav__user-chip { max-width: none; width: 100%; box-sizing: border-box; }
    .site-header .nav__sep {
        width: 100%; height: 1px; margin: 0.4rem 0;
        background: linear-gradient(
            to right,
            transparent,
            rgba(255,255,255,0.15) 20%,
            rgba(255,255,255,0.15) 80%,
            transparent
        );
    }
}