/* Estilo para el Navbar */
.navbar {
    background: linear-gradient(135deg, #1a1a1a, #333333); /* Gradiente oscuro */
    border-bottom: 4px solid #00d40e; /* Borde inferior azul */
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5); /* Sombra suave */
}

/* Estilo de los enlaces del menú */
.navbar .nav-link {
    color: #f0f0f0 !important; /* Enlaces claros */
    font-family: 'Montserrat', sans-serif; /* Fuente moderna */
    font-size: 1.1rem; /* Tamaño moderado */
    padding: 12px 18px; /* Espaciado cómodo */
    letter-spacing: 1px; /* Espaciado de letras */
    text-transform: uppercase; /* Mayúsculas */
    font-weight: 700; /* Negrita */
    transition: all 0.3s ease; /* Transiciones suaves */
}

/* Efecto hover en los enlaces */
.navbar .nav-link:hover {
    color: #00bcd4 !important; /* Cambio de color al pasar el mouse */
    background-color: rgba(0, 188, 212, 0.2); /* Fondo azul translúcido */
    border-radius: 10px; /* Bordes redondeados */
    transform: scale(1.05); /* Efecto de agrandamiento */
    box-shadow: 0 0 8px rgba(5, 214, 22, 0.7); /* Resplandor en hover */
}

/* Estilo para el logotipo */
.navbar .navbar-brand img {
    height: 60px; /* Tamaño del logo */
    transition: transform 0.3s ease; /* Efecto de zoom */
}

/* Efecto de hover para el logotipo */
.navbar .navbar-brand:hover img {
    transform: scale(1.1); /* Agrandar el logo */
}

/* Estilo del navbar-toggler (ícono hamburguesa) */
.navbar-toggler-icon {
    background-color: #00d40e; /* Ícono hamburguesa azul */
    border-radius: 5px; /* Bordes redondeados */
}

/* Estilo del menú colapsado en móvil */
.navbar-collapse {
    background-color: rgba(0, 0, 0, 0.85); /* Fondo oscuro cuando el menú está desplegado */
    border-radius: 10px; /* Bordes redondeados */
    padding: 10px 0; /* Espaciado adecuado */
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.4); /* Sombra suave */
    display: flex;
    flex-direction: column; /* Columna para los elementos del menú */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-in-out; /* Transición suave */
}

/* Mostrar el menú cuando el toggle está activo */
.navbar-collapse.show {
    opacity: 1;
    visibility: visible;
}

/* Estilo de los enlaces del menú cuando está colapsado */
.navbar-collapse .nav-link {
    color: #f0f0f0 !important; /* Enlaces claros en el menú colapsado */
    font-size: 1.2rem; /* Tamaño más grande */
    font-weight: 600; /* Enlaces en negrita */
    padding: 15px 20px; /* Aumentar espaciado */
    text-align: center; /* Centrar los enlaces en móviles */
    transition: all 0.3s ease; /* Transición suave */
}

/* Hover en los enlaces del menú móvil */
.navbar-collapse .nav-link:hover {
    color: #00d40e !important; /* Color azul en hover */
    background-color: rgba(163, 242, 17, 0.2); /* Fondo azul translúcido */
    border-radius: 5px; /* Bordes redondeados */
    transform: scale(1.05); /* Efecto de agrandamiento */
}

.navbar-nav .nav-item .active {
    color: #00d40e !important; /* Resaltar el enlace activo */
    font-weight: 800; /* Hacer más grueso el texto del menú activo */
    text-shadow: 0 0 10px rgba(0, 212, 21, 0.7); /* Resplandor azul alrededor del enlace activo */
}

/* Estilo para la barra de navegación en escritorio (mantener horizontal) */
@media (min-width: 992px) {
    .navbar-collapse {
        display: flex;
        justify-content: flex-end; /* Los enlaces del menú se alinean a la derecha */
        flex-direction: row; /* Mantener los enlaces en una fila */
        opacity: 1;
        visibility: visible;
        box-shadow: none; /* Eliminar sombra en escritorio */
    }

    .navbar-nav {
        display: flex;
        flex-direction: row; /* Elementos en fila */
    }

    .navbar-nav .nav-item {
        margin-right: 20px; /* Espaciado entre los elementos */
    }

    .navbar-toggler {
        display: none; /* Ocultar el botón hamburguesa en pantallas grandes */
    }
}

/* Estilo cuando el navbar está en modo móvil */
@media (max-width: 991px) {
    .navbar-collapse.show {
        background-color: rgba(0, 0, 0, 0.85); /* Fondo oscuro cuando se despliega en móvil */
    }

    .navbar-nav {
        width: 100%; /* Ocupa todo el ancho */
        display: flex;
        flex-direction: column; /* Coloca los enlaces verticalmente */
        align-items: center; /* Centra los enlaces */
    }
}