/* Estilo para la barra de navegación */
#menu {
    background-color: black !important; /* Fondo negro */
    height: 55px; /* Ajustado para mejor visualización */
    padding: 0 1rem; /* Ajustar el padding */
    display: flex;
    align-items: center; /* Centrar verticalmente */
}

/* Estilo para los enlaces del menú */
#menu .navbar-nav .nav-link {
    color: white !important; /* Letras blancas */
    font-size: 16px;
    padding: 10px 15px; /* Espaciado uniforme */
}

/* Cambio de color al pasar el mouse */
#menu .navbar-nav .nav-link:hover {
    color: gray !important; /* Letras grises al pasar el mouse */
}

/* Estilo para los dropdowns */
#menu .dropdown-menu {
    background-color: black; /* Fondo negro */
    border: none; /* Sin borde */
}

/* Estilo para los ítems dentro del dropdown */
#menu .dropdown-menu .dropdown-item {
    color: white !important; /* Letras blancas */
}

/* Cambio de color al pasar el mouse en los ítems del dropdown */
#menu .dropdown-menu .dropdown-item:hover {
    background-color: gray !important; /* Fondo gris */
    color: white !important; /* Letras blancas */
}

/* ================= ICONOS SOCIALES ================= */

/* Contenedor de iconos sociales */
.social-icons {
    display: flex;
    gap: 8px; /* Espaciado entre iconos */
    align-items: center;
}

/* Estilos de los iconos sociales */
.social-icons img {
    width: 24px; /* Tamaño más pequeño */
    height: 24px;
}

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

@media (max-width: 991px) {
    /* Ajusta los iconos sociales en móviles */
    .social-icons {
        justify-content: center;
        margin-top: 10px;
    }
    
    /* Ajusta la altura del navbar para que no se corte */
    #menu {
        height: auto;
        padding: 10px;
    }
    
    /* Evita que los dropdowns se salgan de la pantalla */
    .dropdown-menu {
        width: 100%; /* Usa todo el ancho */
    }
}