/* ============================================================
   Estilos compartidos para los menús desplegables del header
   (Localidad, Ayuda, Usuario).
   El PopoverClass se aplica directamente al elemento .mud-popover,
   por eso aquí damos forma de "tarjeta" a ese contenedor y
   armonizamos subheaders e items en su interior.
   ============================================================ */

/* Marca de agrupación para los tres popovers del header */
.header-dropdown-popover {
    border-radius: 16px !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 20px 48px -12px rgba(15, 23, 42, 0.28),
                0 6px 16px -6px rgba(15, 23, 42, 0.16) !important;
    margin-top: 8px !important;
    animation: headerDropdownIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes headerDropdownIn {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* La lista interna del menú: sin padding vertical para que los
   subheaders de color lleguen limpios a los bordes redondeados */
.header-dropdown-popover .mud-list {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: transparent !important;
}

/* ---------- Items del menú ---------- */
.header-dropdown-popover .mud-list-item {
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    font-size: 0.92rem !important;
    transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
    border-left: 3px solid transparent;
}

.header-dropdown-popover .mud-list-item:hover {
    background-color: #eef4ff !important;
    border-left-color: #0045ac;
    padding-left: 22px !important;
}

/* Item deshabilitado: más tenue y sin interacción visual */
.header-dropdown-popover .mud-list-item.mud-list-item-disabled {
    opacity: 0.45 !important;
}

/* ---------- Subheaders / encabezados de sección ---------- */
.header-dropdown-popover .mud-list-subheader {
    padding: 10px 20px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    word-break: break-word !important;
}

/* Encabezado principal (cliente / "Ayuda") */
.header-dropdown-popover .cima-booking {
    text-align: center !important;
    font-weight: 700 !important;
    color: #0045ac !important;
    background-color: #f5f8ff !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    font-size: 0.95rem !important;
}

/* Subtítulo de sección (gris claro) */
.header-dropdown-popover .titulo-seccion {
    color: #0045ac !important;
    font-weight: 700 !important;
    background-color: #f9fafb !important;
    border-top: 1px solid #eef0f3 !important;
    border-bottom: 1px solid #eef0f3 !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Banda azul fuerte (ej. "Contenedores Vacíos") */
.header-dropdown-popover .contenedores-vacios {
    font-weight: 700 !important;
    background-color: #0045ac !important;
    color: #ffffff !important;
    text-align: center !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.02em;
}

/* ---------- Divisores ---------- */
.header-dropdown-popover .mud-divider,
.header-dropdown-popover .thick-divider {
    border-color: rgba(15, 23, 42, 0.10) !important;
    border-top-width: 1px !important;
    margin: 0 !important;
}

/* ---------- Encabezado de usuario (Agencia / Cliente) ---------- */
.header-dropdown-popover .user-agency-header {
    background-color: #f5f8ff !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}

.header-dropdown-popover .user-agency-header .header-label {
    color: #64748b;
    font-weight: 600;
    font-size: 0.78rem;
    margin-right: 4px;
}

.header-dropdown-popover .user-agency-header .header-value {
    color: #0045ac;
    font-weight: 700;
    font-size: 0.85rem;
}

/* ---------- Item de localidad seleccionada ---------- */
.header-dropdown-popover .mud-loc-selected {
    background-color: #eef4ff !important;
    color: #0045ac !important;
    font-weight: 700 !important;
    border-left-color: #0045ac !important;
}

/* ---------- Menú de usuario con scroll (lista larga) ---------- */
.scrollable-user-menu {
    max-height: calc(100vh - 120px) !important;
    overflow-y: auto !important;
    /* El ancho nunca supera el viewport, dejando 24px de respiro en cada
       borde; así el popover no se corta aunque el cliente sea largo */
    min-width: 280px !important;
    width: max-content !important;
    max-width: min(380px, calc(100vw - 24px)) !important;
    box-sizing: border-box !important;
}

/* Anclado a la derecha: el menú crece hacia la izquierda y nunca se
   desborda por el borde derecho de la pantalla */
/* Mantiene el redondeo (clip horizontal) pero permite scroll vertical */
.user-menu-popover.scrollable-user-menu {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.user-menu-popover .header-value {
    display: inline-block;
    max-width: 100%;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    line-height: 1.3;
}

/* El bloque Agencia/Cliente puede envolver en varias líneas sin cortarse */
.user-menu-popover .user-agency-header {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

/* Scrollbar sutil para el menú de usuario */
.scrollable-user-menu::-webkit-scrollbar {
    width: 8px;
}

.scrollable-user-menu::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.18);
    border-radius: 8px;
}

.scrollable-user-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.30);
}

/* Anchos mínimos cómodos para los otros dos popovers */
.header-dropdown-popover.menu-location,
.header-dropdown-popover.menu-help {
    min-width: 240px !important;
}

/* En móvil damos un poco más de ancho utilizable */
@media (max-width: 600px) {
    .header-dropdown-popover {
        min-width: 220px !important;
    }
    .scrollable-user-menu {
        max-width: 92vw !important;
    }
}