/* ============================================
   ESTILOS PARA NAVBAR - NavLink Active States
   ============================================ */

/* Estado por defecto de los links */
.navbar-nav .nav-link {
    color: #333333 !important;
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
    position: relative;
    border-bottom: 2px solid transparent;
}

/* Hover state */
.navbar-nav .nav-link:hover {
    color: #008000 !important;
}

/* Active state - Blazor agrega esta clase automáticamente */
.navbar-nav .nav-link.active {
    color: #008000 !important;
    font-weight: 600;
    border-bottom: 2px solid #008000;
}

/* Asegurar que el active state funcione en nav-item también */
.nav-item.active .nav-link,
.nav-item .nav-link.active {
    color: #008000 !important;
    font-weight: 600;
    border-bottom: 2px solid #008000;
}

/* Dropdown items activos */
.dropdown-item.active {
    background-color: #e8f5e9 !important;
    color: #008000 !important;
    font-weight: 600;
}

/* Links de banderas de idioma - sin estilos de active */
.navbar-nav .nav-link img {
    border: none;
}

/* Asegurar que los links con solo onClick no tengan estilos de active */
.navbar-nav .nav-link:not([href]),
.navbar-nav a[onclick]:not([href]) {
    border-bottom: none !important;
}

/* Focus state para accesibilidad */
.navbar-nav .nav-link:focus {
    outline: 2px solid #008000;
    outline-offset: 2px;
}

/* Animación suave del borde inferior */
.navbar-nav .nav-link {
    transition: color 0.3s ease, border-bottom-color 0.3s ease, font-weight 0.2s ease;
}

/* Media query para móviles */
@media (max-width: 992px) {
    .navbar-nav .nav-link {
        border-bottom: none;
        border-left: 3px solid transparent;
        padding-left: 1rem;
    }

    .navbar-nav .nav-link.active {
        border-left: 3px solid #008000;
        border-bottom: none;
        background-color: rgba(0, 128, 0, 0.05);
    }
}