/**
 * =====================================================================================
 * FILE: /css/wk_user_dropdown.css
 * MODULE: User Account Dropdown — Desktop & Mobile
 *
 * PROPÓSITO:
 * Estilos dedicados para el menú desplegable de cuenta de usuario.
 * No depende de las variables CSS de Bootstrap (--bs-primary-rgb) para
 * evitar conflictos con data-bs-theme en Bootstrap 5.3.x.
 * Usa valores hex directos con fallback garantizado.
 *
 * CUBRE:
 * - Desktop: #wkSiteAccountDropdownWrap  (menu_site_pc_tablet.php)
 * - Mobile:  .wk-site-mobile-user-menu  (menu_site_mobile.php)
 *
 * VERSION: 1.0.0
 * DATE: 2026-05-19
 * =====================================================================================
 */

/* =========================================================================
   VARIABLES LOCALES DEL COMPONENTE
   Definidas en el propio contenedor → no dependen de :root ni de Bootstrap
   ========================================================================= */

#wkSiteAccountDropdownWrap,
.wk-site-mobile-user-menu {
    --wk-drop-primary:     #005BAB;
    --wk-drop-primary-alt: #004d94;   /* hover */
    --wk-drop-text:        #212529;
    --wk-drop-muted:       #6c757d;
    --wk-drop-divider:     #e9ecef;
    --wk-drop-hover-bg:    rgba(0, 91, 171, 0.06);
}

/* =========================================================================
   DESKTOP — #wkSiteAccountDropdownWrap
   ========================================================================= */

/* Caja del dropdown */
#wkSiteAccountDropdownWrap .dropdown-menu {
    min-width: 220px;
    border: 1px solid var(--wk-drop-divider);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    padding: 6px 0;
}

/* Cabecera "Access" */
#wkSiteAccountDropdownWrap .dropdown-header {
    font-size: 0.70rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--wk-drop-muted);
    padding: 6px 16px;
}

/* Nombre de usuario en la cabecera cuando está logueado */
#wkSiteAccountDropdownWrap .dropdown-header .wk-drop-username {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--wk-drop-text);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 1px;
}

/* Etiqueta del rol (Member, Admin, etc.) */
#wkSiteAccountDropdownWrap .dropdown-header .wk-drop-role {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--wk-drop-primary);
    text-transform: none;
    letter-spacing: 0;
}

/* Items del menú */
#wkSiteAccountDropdownWrap .dropdown-item {
    font-size: 0.875rem;
    color: var(--wk-drop-text);
    padding: 8px 16px;
    border-radius: 6px;
    margin: 1px 6px;
    width: auto;
    transition: background-color 0.15s ease, color 0.15s ease;
}

#wkSiteAccountDropdownWrap .dropdown-item:hover,
#wkSiteAccountDropdownWrap .dropdown-item:focus {
    background-color: var(--wk-drop-hover-bg);
    color: var(--wk-drop-primary);
}

/* Descripción pequeña bajo cada item */
#wkSiteAccountDropdownWrap .dropdown-item small {
    font-size: 0.72rem;
    color: var(--wk-drop-muted);
    margin-top: 1px;
}

/* Divisor */
#wkSiteAccountDropdownWrap .dropdown-divider {
    margin: 4px 0;
    border-color: var(--wk-drop-divider);
}

/* ── Iconos con text-primary dentro del dropdown ── */
/* Sobreescritura directa con hex: evita toda la cadena --bs-primary-rgb */
#wkSiteAccountDropdownWrap .text-primary {
    color: var(--wk-drop-primary) !important;
}

/* =========================================================================
   MOBILE — .wk-site-mobile-user-menu
   ========================================================================= */

/* Iconos dentro del menú móvil de usuario */
.wk-site-mobile-user-menu .text-primary {
    color: var(--wk-drop-primary) !important;
}

/* Nombre de usuario */
.wk-site-mobile-user-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--wk-drop-text, #212529);
    margin-bottom: 2px;
}

/* Etiqueta del rol */
.wk-site-mobile-user-role {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--wk-drop-primary, #005BAB);
    margin-bottom: 6px;
}

/* Links dentro del panel móvil */
.wk-site-mobile-user-dropdown a i.text-primary {
    color: var(--wk-drop-primary, #005BAB) !important;
}