.bc-header-selectors {
        display: inline-flex !important;
        align-items: center;
        gap: 2px;
        margin-right: 6px;
        vertical-align: middle;
    }
    .bc-header-selectors li { padding-left: 10px !important; padding-right: 10px !important; }
    .bc-header-selectors .dropdown-menu { min-width: 100px; }
    @media (max-width:768px) { .bc-header-selectors { display: none !important; } }

    .bc_header .bc-menu > .main-menu > .bc-has-children { position: relative; }
    .bc_header .bc-menu > .main-menu > .bc-has-children > .bc-submenu {
        display: none !important; position: absolute; top: 100%; left: 0; z-index: 1000;
        min-width: 200px; margin: 0; padding: 8px 0; list-style: none;
        background: #fff; border-radius: 10px;
        box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
    }
    .bc_header .bc-menu > .main-menu > .bc-has-children:hover > .bc-submenu {
        display: block !important;
    }
    .bc_header .bc-menu > .main-menu > .bc-has-children > .bc-submenu > li {
        display: block;
        width: 100%;
        padding: 0;
    }
    .bc_header .bc-menu > .main-menu > .bc-has-children > .bc-submenu > li > a {
        display: block;
        padding: 10px 18px;
        color: #1a2b48;
        line-height: 1.4;
        text-transform: none;
        white-space: nowrap;
    }
    .bc_header .bc-menu > .main-menu > .bc-has-children > .bc-submenu > li > a:hover,
    .bc_header .bc-menu > .main-menu > .bc-has-children > .bc-submenu > li > a:focus {
        color: var(--bc-theme-primary, #5191fa);
        background: rgba(0, 0, 0, .04);
    }

    /* ── Campana de notificaciones ──────────────────────────────────────────
       El desplegable es el de siempre (Layout::parts.notification + la hoja
       notification.css que ya carga app-minisite); aquí solo se le dan los
       colores del tema del vendedor y el sitio que le toca en esta barra. */
    .bc_header .topbar-items.bc-notify-bar {
        display: inline-flex !important;
        align-items: center;
        margin: 0 2px 0 0;
        padding: 0;
        list-style: none;
    }
    .bc_header .bc-notify-bar > li { padding: 0 8px !important; }
    .bc_header .bc-notify-bar .is_login {
        display: inline-flex;
        align-items: center;
        line-height: 1;
    }
    .bc_header .bc-notify-bar .is_login .fa-bell { font-size: 15px; margin: 0 !important; }
    /* La flecha sobra al lado de un icono suelto: sin texto que acompañar solo
       ensancha el botón. */
    .bc_header .bc-notify-bar .is_login .fa-angle-down { display: none !important; }
    /* Arriba a la derecha del icono. notification.css lo ancla a la izquierda
       (`left: 8px`), que sobre una campana suelta cae encima del dibujo. */
    .bc_header .bc-notify-bar .notification-icon {
        top: -6px;
        left: auto;
        right: 1px;
        min-width: 15px;
        padding: 2px 4px;
        font-size: 9px !important;
        line-height: 1;
    }
    /* El menú cuelga del borde derecho de la barra y nunca más ancho que la
       pantalla: 350px fijos se salían del móvil. */
    .bc_header .bc-notify-bar .dropdown-menu.notify-items {
        right: 0;
        left: auto;
        width: 350px !important;
        max-width: calc(100vw - 32px) !important;
        max-height: 70vh;
        /* `.bc_header .dropdown-menu` corta lo que sobresale; con un tope de
           altura eso sería recortar la lista en seco en vez de dejarla rodar. */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        /* La pareja de la página y no la de la cabecera: este panel es
           contenido (avatares, mensajes, fechas), no un menú de enlaces. Y
           `--bc-header-dropdown-bg/-text` son dos opciones sueltas del tema
           que nada obliga a contrastar entre sí — rootuser tiene las dos en
           #30a8f6 y saldría azul sobre azul. `--bc-background`/`--bc-text`
           son el fondo y la tinta del sitio: legibles por definición. */
        background: var(--bc-background, #fff) !important;
    }
    .bc_header .bc-notify-bar .dropdown-toolbar,
    .bc_header .bc-notify-bar .notification,
    .bc_header .bc-notify-bar .bc-notify-vacio {
        background: transparent !important;
        border-color: rgba(0, 0, 0, .07) !important;
    }
    .bc_header .bc-notify-bar .notification.active {
        background: color-mix(in srgb, var(--bc-text, #212529) 6%, transparent) !important;
    }
    .bc_header .bc-notify-bar .bc-notify-vacio {
        display: block;
        padding: 18px 14px;
        text-align: center;
        font-size: 13px;
        opacity: .7;
    }
    /* Las reglas del cristal sobre el hero pintan de blanco todo
       `.topbar-items li > a`, y ahí caen también los enlaces de dentro del
       desplegable, que van sobre fondo claro. El `:not(#_)` no cambia a quién
       apunta el selector —ningún elemento tiene ese id—: solo le sube el peso
       por encima de aquella, que lleva !important. */
    .bc_header .bc-notify-bar:not(#_) .dropdown-toolbar-title,
    .bc_header .bc-notify-bar:not(#_) .markAllAsRead,
    .bc_header .bc-notify-bar:not(#_) .bc-notify-vacio,
    .bc_header .bc-notify-bar:not(#_) .notification a,
    .bc_header .bc-notify-bar:not(#_) .notification a:hover {
        color: var(--bc-text, #212529) !important;
        text-shadow: none !important;
    }
    .bc_header .bc-notify-bar:not(#_) .notification-meta .timestamp { opacity: .65; }
    .bc_header .bc-notify-bar:not(#_) .dropdown-footer {
        background: var(--bc-primary, #1a2b48) !important;
        border-top: 0 !important;
    }
    .bc_header .bc-notify-bar:not(#_) .dropdown-footer a {
        padding: 0 !important;
        color: var(--bc-on-primary, #fff) !important;
        text-shadow: none !important;
    }
    /* Por debajo de 990px minisite-cards.css esconde `.topbar-items`; la
       campana se queda, que es justo lo que hay que ver de un vistazo. */
    @media (max-width: 990px) {
        .bc_wrap .bc_header .topbar-items.bc-notify-bar,
        .frontend-page .bc_header .topbar-items.bc-notify-bar {
            display: inline-flex !important;
        }
        .bc_header .bc-notify-bar > li { padding: 0 4px !important; }
        /* Anclado a la barra y no a la campana. Colgándolo del icono, sus
           350px se salían 82px por la izquierda de un móvil de 375: el ancho
           no se podía recortar porque `.dropdown-large` lleva
           `min-width: 350px !important`, y min-width gana a max-width.
           El `position: fixed` no se escapa al viewport: el `backdrop-filter`
           de `.bc_header` la convierte en bloque contenedor de sus fixed, así
           que `left/right: 0` son los bordes de la propia barra. */
        .bc_header .bc-notify-bar .dropdown-menu.notify-items {
            position: fixed !important;
            top: calc(100% + 8px) !important;
            left: 0 !important;
            right: 0 !important;
            width: auto !important;
            min-width: 0 !important;
            max-width: none !important;
            max-height: 68vh !important;
        }
    }