/* 
 * CSS para el dropdown personalizado
 * Completamente independiente de Bootstrap
 */

/* Contenedor del dropdown personalizado */
.user-dropdown-custom {
    position: relative !important;
}

/* Toggle del dropdown personalizado */
.custom-dropdown-toggle {
    cursor: pointer !important;
    user-select: none !important;
    color: white !important;
    text-decoration: none !important;
    padding: 0.5rem 1rem !important;
    display: block !important;
}

/* Menú del dropdown personalizado */
.custom-dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    z-index: 9999 !important;
    min-width: 200px !important;
    background-color: #111 !important;
    border: 1px solid #c9a143 !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
    padding: 8px 0 !important;
}

/* Elementos del dropdown personalizado */
.custom-dropdown-item {
    display: block !important;
    padding: 8px 16px !important;
    color: white !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background-color 0.2s, color 0.2s !important;
}

/* Estado hover de los elementos */
.custom-dropdown-item:hover {
    background-color: rgba(201, 161, 67, 0.1) !important;
    color: #c9a143 !important;
}

/* Para forzar que el menú se muestre cuando es necesario */
.custom-dropdown-menu.show {
    display: block !important;
}

/* Fix para asegurar que los iconos se muestren correctamente */
.custom-dropdown-item i {
    margin-right: 8px !important;
    width: 16px !important;
    text-align: center !important;
}

/* Ocultar el dropdown original completamente */
.nav-item.dropdown {
    display: none !important;
}

/* Mostrar nuestro dropdown personalizado */
.nav-item.user-dropdown-custom {
    display: block !important;
}