/* Estilo general del menú desplegable */
.dropdown-menu {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    background-color: #f8f9fa; /* Fondo claro */
    border: 1px solid #ddd;
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para efecto flotante */
    padding: 10px;
    width: 180px; /* Ancho del menú */
    z-index: 1000;
    display: none; /* Oculto por defecto */
    font-family: Arial, sans-serif; /* Fuente formal */
}

    /* Mostrar menú cuando sea visible */
    .dropdown-menu.visible {
        display: block;
    }

    /* Estilo de la lista */
    .dropdown-menu ul {
        list-style: none; /* Sin viñetas */
        margin: 0;
        padding: 0;
    }

        /* Estilo de los elementos de la lista */
        .dropdown-menu ul li {
            padding: 5px 10px; /* Espaciado interno */
            cursor: pointer;
            border-radius: 4px; /* Bordes redondeados */
            transition: background-color 0.3s ease;
        }

            /* Estilo del texto */
            .dropdown-menu ul li a {
                text-decoration: none; /* Sin subrayado */
                color: #333; /* Texto oscuro */
                font-size: 12px; /* Tamaño del texto */
                display: block; /* Ocupa todo el área del elemento */
            }

            /* Efecto hover */
            .dropdown-menu ul li:hover {
                background-color: #e9ecef; /* Fondo claro al pasar el cursor */
                color: #000; /* Texto más oscuro */
            }