.dropdown-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 100%; /* Justo debajo del botón principal */
    left: 0;
    background-color: #f0f0f0; /* Fondo gris claro */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera */
    z-index: 1000;
    border: 1px solid #000; /* Borde negro delgado */
    min-width: 200px; /* Asegura un ancho mínimo para los botones */
}

.dropdown-menu li {
    border-bottom: 1px solid #000; /* Línea de separación entre botones */
}
.dropdown-menu li:last-child {
    border-bottom: none; /* Elimina el borde en el último elemento */
}

.dropdown-menu .dropdown-item {
    color: black; /* Color del texto */
    padding: 8px 12px; /* Espaciado interno de los elementos */
    border-radius: 4px; /* Bordes ligeramente redondeados */
}

.dropdown-menu .dropdown-item:hover {
    background-color: #f0f0f0; /* Fondo en hover */
    color: #333; /* Color del texto en hover */
}

.dropdown-menu a {
    display: block;
    padding: 10px 20px; /* Espaciado interno */
    text-decoration: none;
    color: #205081; /* Color del texto */
    background-color: #f0f0f0; /* Fondo gris claro */
    transition: background-color 0.3s;
}
.dropdown-menu a:hover {
    background-color: #dcdcdc; /* Fondo más oscuro al pasar el ratón */
    color: #000; /* Texto negro para contraste */
}

/* Asegurar el despliegue completo en pantallas pequeñas */
@media (max-width: 768px) {
    .dropdown-menu {
        position: static; /* Los submenús se comportan de forma fluida */
        width: 100%; /* Ocupan todo el ancho */
    }
}