/* assets/css/header.css - DISEÑO PREMIUM REFINADO */

/* ===============================
   NAVBAR PRINCIPAL
================================= */
.navbar-ultimate {
    background: linear-gradient(
        90deg,
        #071c3a 0%,
        #04132b 50%,
        #020d1f 100%
    );
    backdrop-filter: blur(8px);
    padding: 10px 0;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.55);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s ease;
}

/* Asegura alineación vertical perfecta */
.navbar-ultimate .container {
    display: flex;
    align-items: center;
}

/* ===============================
   LOGO
================================= */

.navbar-brand {
    display: flex;
    align-items: center;
    padding: 0;
    margin-right: 2.5rem;
}

.navbar-brand img {
    height: 60px;
    width: auto;
    transform: scale(1.4);
    transform-origin: left center;
    filter:
        drop-shadow(0 0 8px rgba(0, 242, 255, 0.35))
        brightness(1.15)
        contrast(1.1);
    transition: all 0.4s ease;
}

.navbar-brand:hover img {
    transform: scale(1.42);
    filter:
        drop-shadow(0 0 14px rgba(0, 242, 255, 0.5))
        brightness(1.2);
}

/* ===============================
   LINKS DEL MENÚ
================================= */
.nav-link {
    color: rgba(255, 255, 255, 0.75) !important;
    font-weight: 500;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 20px !important;
    transition: all 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
    color: #ffffff !important;
}

/* Indicador Neón refinado */
.active-link-indicator {
    position: relative;
    display: inline-block;
}

.active-link-indicator::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 10%;
    width: 80%;
    height: 2px;
    background-color: var(--ersit-neon, #00f2ff);
    box-shadow: 0 0 10px var(--ersit-neon, #00f2ff);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.nav-link:hover .active-link-indicator::after,
.nav-link.active .active-link-indicator::after {
    transform: scaleX(1);
}

/* ===============================
   SEPARADOR
================================= */
.vr-separator {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    height: 22px;
    margin: 0 18px;
}

/* ===============================
   BOTONES
================================= */
.btn-header {
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 26px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

/* LOGIN */
.btn-login-pro {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.btn-login-pro:hover {
    border-color: var(--ersit-neon, #00f2ff);
    color: var(--ersit-neon, #00f2ff);
    background: rgba(0, 242, 255, 0.05);
}

/* CREAR CASILLERO */
.btn-casillero-pro {
    background: linear-gradient(135deg, #00f2ff 0%, #009dff 100%);
    color: #021226;
    border: none;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(0, 242, 255, 0.35);
}

.btn-casillero-pro:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 242, 255, 0.55);
}

/* =====================================================
   ================= RESPONSIVE PREMIUM =================
   ===================================================== */

/* -------- Tablets -------- */
@media (max-width: 992px) {

    .navbar-brand {
        margin-right: 1.5rem;
    }

    .navbar-brand img {
        height: 52px;
        transform: scale(1.4);
    }

    .nav-link {
        font-size: 0.85rem;
        padding: 10px 14px !important;
    }

    .btn-header {
        padding: 10px 20px;
        font-size: 0.78rem;
    }
}

/* -------- Móviles -------- */
@media (max-width: 768px) {

    .navbar-ultimate {
        padding: 8px 0;
    }

    .navbar-brand {
        margin-right: 0;
    }

    .navbar-brand img {
        height: 46px;
        transform: scale(1.4);
    }

    /* Menú colapsado */
    .navbar-collapse {
        margin-top: 15px;
        padding: 15px 0;
        background: rgba(2, 13, 31, 0.95);
        border-radius: 10px;
        backdrop-filter: blur(6px);
    }

    .nav-link {
        padding: 12px 0 !important;
        font-size: 0.9rem;
        text-align: center;
    }

    .vr-separator {
        display: none;
    }

    /* Botones full width en móvil */
    .btn-header {
        width: 100%;
        margin-top: 10px;
        padding: 12px;
    }
}

/* -------- Móviles pequeños -------- */
@media (max-width: 480px) {

    .navbar-brand img {
        height: 40px;
        transform: scale(1.4);
    }

    .nav-link {
        font-size: 0.85rem;
    }

    .btn-header {
        font-size: 0.75rem;
    }
}