/* Estilos generales para el body y la navbar */
body {
    margin: 0;
    font-family: Arial, sans-serif; /* Puedes cambiar la fuente */
}

.navbar {
    background-image: linear-gradient(to bottom, #212529, #373c42, #212529); /* De gris oscuro a negro */
    color: #ffffff; /* Color de texto claro */
    padding: 1rem 1.5rem; /* Espaciado interno */
    display: flex; /* Habilitamos Flexbox */
    justify-content: space-between; /* El logo a la izquierda, los enlaces a la derecha */
    align-items: center; /* Centramos verticalmente los elementos */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
}

.navbar-brand{
  margin-left: .5rem;
}

.navbar-brand img {
    height: 80px; /* Tamaño de tu logo, ajusta según sea necesario */
    max-width: 100%; /* Asegura que el logo no se desborde */
    border-radius: 9px;
}

/* Estilos para la lista de navegación */
.navbar-nav {
    list-style: none; /* Quita los puntos de la lista */
    margin: 0;
    padding: 0;
    display: flex; /* Habilitamos Flexbox para los elementos de la lista */
}

.nav-item {
  padding: 10px;
    /* Aquí aplicamos el degradado */
    border-radius: 5px; /* Bordes ligeramente redondeados, ajusta el valor si quieres más o menos */
    overflow: hidden; /* Asegura que el degradado no se desborde si hay border-radius */
    transition: all 0.3s ease; /* Transición para efectos de hover */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sutil sombra para dar profundidad */
}

/* Efecto hover para el .nav-item */
.nav-item:hover {
    background-image: linear-gradient(to bottom, #212529, #495057, #212529); /* De gris oscuro a negro */
    transform: translateY(-2px); /* Un ligero levantamiento al pasar el ratón */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Aumenta la sombra */
}

.nav-link {
    color: #ffffff; /* Color de los enlaces */
    text-decoration: none; /* Quita el subrayado de los enlaces */
    padding: 0.5rem 0; /* Espaciado interno de los enlaces */
    display: block; /* Para que el padding se aplique correctamente */
    transition: color 0.3s ease; /* Transición suave para el hover */
    font-size: 1.4rem;
}

.nav-link:hover {
    color: #cccccc; /* Color al pasar el ratón por encima */
}

/* Estilos para el botón hamburguesa */
.navbar-toggler {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borde claro */
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: none; /* Por defecto oculto en pantallas grandes */
    border-radius: 0.25rem;
    position: relative; /* Para posicionar las líneas de la hamburguesa */
    z-index: 2; /* Para que esté por encima del menú cuando se abre */
}

.toggler-icon {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #ffffff; /* Color de las líneas de la hamburguesa */
    border-radius: 1px;
    margin: 4px 0; /* Espaciado entre las líneas */
    transition: all 0.3s ease-in-out; /* Animación para el icono */
}

/* Animación de la hamburguesa a "X" */
.navbar-toggler.active .toggler-icon:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.navbar-toggler.active .toggler-icon:nth-child(2) {
    opacity: 0;
}

.navbar-toggler.active .toggler-icon:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}


/* Estilos para el menú colapsable (que se muestra en móviles) */
/* --- CAMBIO IMPORTANTE AQUÍ --- */
.navbar-collapse {
    /* Por defecto (escritorio), el menú está visible y dispuesto horizontalmente */
    display: flex; /* Añade esto para usar flexbox en escritorio también */
    flex-basis: auto; /* Ocupa solo el espacio necesario, no el 100% */
    flex-grow: 0; /* No crece para ocupar todo el ancho disponible */
    max-height: none; /* Asegura que el menú sea visible en escritorio */
    overflow: visible; /* Asegura que el contenido no se recorte */
    transition: none; /* Desactiva la transición de altura en escritorio */
    justify-content: flex-end; /* Alinea los elementos a la derecha en escritorio */
}
/* --- FIN DEL CAMBIO IMPORTANTE --- */


/* MEDIA QUERY para pantallas pequeñas (Smartphones) */
@media (max-width: 991.98px) { /* El breakpoint de Bootstrap para 'lg' es 992px */
    .navbar {
        flex-direction: row; /* Aseguramos la fila */
        justify-content: space-between; /* Logo a un lado, hamburguesa al otro */
        align-items: center; /* Centramos verticalmente */
    }

    .navbar-toggler {
        display: block; /* Muestra el botón hamburguesa */
    }

    .navbar-collapse {
        /* En pantallas pequeñas, el menú debe ocupar el 100% de ancho y ser vertical */
        display: block; /* Ocupa su propia línea */
        width: 100%;
        order: 3; /* Asegura que el menú colapsado aparezca debajo del logo y el toggler */
        text-align: center; /* Centra los enlaces */
        background-color: #343a40; /* Fondo para el menú desplegable */
        padding-bottom: 1rem; /* Espaciado inferior cuando está abierto */
        max-height: 0; /* Inicialmente oculto en móvil */
        overflow: hidden; /* Oculta el contenido desbordado */
        transition: max-height 0.3s ease-out; /* Transición para abrir/cerrar en móvil */
        justify-content: center; /* Centra los elementos del menú en móvil */
    }

    .navbar-collapse.show {
        max-height: 300px; /* Altura máxima cuando el menú está abierto (ajusta si es necesario) */
        /* Podrías usar auto, pero la transición no sería suave */
    }

    .navbar-nav {
        flex-direction: column; /* Apila los elementos verticalmente */
        width: 100%; /* Ocupa todo el ancho disponible */
    }

    .nav-item {
        margin: 0; /* Elimina el margen lateral */
        padding: 0.5rem 0; /* Añade espaciado vertical */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Separador entre elementos */
    }

    .nav-item:last-child {
        border-bottom: none; /* No hay separador en el último elemento */
    }

    .nav-link {
        padding: 0.75rem 1rem; /* Más padding para que sean más fáciles de tocar */
    }
}