/* ──────────────────────────────────────────────────────────────
   Barra superior y cabecera de la plataforma (no de los minisitios)

   Se cargan juntas en app.blade.php cuando no hay vendedor. Los
   minisitios usan header-minisite y no ven nada de esto.

   Qué se arregla:
   · La barra era 12px sobre azul marino, con menús cuadrados y
     oscuros: se leía mal y se veía de hace diez años. Ahora es gris
     claro con texto oscuro.
   · Había dos franjas apiladas —barra y cabecera— y en la plataforma
     la de abajo solo llevaba el logo, porque no hay menú principal.
     En escritorio el logo sube a la barra y esa franja desaparece.
     En móvil la barra no se muestra, así que la cabecera sigue en su
     sitio con el logo y el botón de menú.
   · El desplegable de usuario no tenía avatar y los ítems se
     apretaban en 8px.
   ────────────────────────────────────────────────────────────── */

:root {
    --bar-fondo: #f2f3f6;
    --bar-fondo-hover: rgba(15, 23, 42, .07);
    --bar-texto: #3d4759;
    --menu-tinta: #0f172a;
    --menu-suave: #667085;
    --menu-borde: #eceef3;
}

/* ── Barra superior ─────────────────────────────────────────── */

.bc_wrap .bc_topbar {
    background: var(--bar-fondo);
    padding: 0;
    border-bottom: 1px solid #e4e6ec;
}

.bc_wrap .bc_topbar .content {
    min-height: 58px;
    gap: 16px;
    justify-content: flex-end;
}

/* El logo, que antes vivía en la franja de abajo */
.bc-bar-logo { display: inline-flex; align-items: center; text-decoration: none; }
.bc-bar-logo img { max-height: 34px; width: auto; }
.bc-bar-logo span { font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--menu-tinta); }
.bc-bar-logo:hover { text-decoration: none; opacity: .85; }

/* Vacío o no, el bloque izquierdo empuja al derecho hasta el borde */
.bc_wrap .bc_topbar .content .topbar-left { margin-right: auto; }

.bc_wrap .bc_topbar .content .topbar-left,
.bc_wrap .bc_topbar .content .topbar-left a {
    font-size: 13px;
    color: var(--bar-texto);
}

.bc_wrap .bc_topbar .content .topbar-items {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
}

.bc_wrap .bc_topbar .content .topbar-items > li {
    padding: 0;
    display: flex;
    align-items: center;
}

.bc_wrap .bc_topbar .content .topbar-items > li > a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--bar-texto);
    border-radius: 10px;
    transition: background .18s, color .18s;
}

.bc_wrap .bc_topbar .content .topbar-items > li > a:hover,
.bc_wrap .bc_topbar .content .topbar-items > li.show > a {
    background: var(--bar-fondo-hover);
    color: var(--menu-tinta);
    text-decoration: none;
}

.bc_wrap .bc_topbar .content .topbar-items > li > a .fa-angle-down {
    font-size: 14px;
    opacity: .6;
}

/* Avatar del usuario dentro de la barra */
.bc-bar-avatar,
.bc-bar-avatar-txt {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.bc-bar-avatar-txt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: #47536b;
}

/* Campana: el globo rojo con un 0 dentro era ruido permanente */
.bc_wrap .bc_topbar .dropdown-notifications > a { position: relative; }
.bc_wrap .bc_topbar .dropdown-notifications .fa-bell { font-size: 15px; margin: 0 !important; }

.bc_wrap .bc_topbar .dropdown-notifications .notification-icon {
    position: absolute;
    top: 2px;
    left: 22px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 17px;
    border-radius: 999px;
    border: 2px solid var(--bar-fondo);
}

/* ── Desplegables (barra y cabecera) ────────────────────────── */

.bc_wrap .bc_topbar .content .dropdown-menu,
.bc_wrap .bc_header .content .header-right .dropdown-menu {
    min-width: 224px;
    padding: 7px;
    background: #fff;
    border: 1px solid var(--menu-borde);
    border-radius: 14px;
    box-shadow: 0 18px 44px -18px rgba(15, 23, 42, .38);
    top: 100% !important;
    margin-top: 6px;
}

.bc_wrap .bc_topbar .content .dropdown-menu.width-auto { min-width: 130px; }

.bc_wrap .bc_topbar .content .dropdown-menu li a,
.bc_wrap .bc_header .content .header-right .dropdown-menu li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    font-size: 14px;
    color: var(--menu-tinta);
    border-radius: 9px;
}

.bc_wrap .bc_topbar .content .dropdown-menu li a:hover,
.bc_wrap .bc_header .content .header-right .dropdown-menu li a:hover {
    background: #f4f5f8;
    color: var(--menu-tinta);
}

.bc_wrap .bc_topbar .content .dropdown-menu li a i,
.bc_wrap .bc_header .content .header-right .dropdown-menu li a i {
    width: 17px;
    font-size: 15px;
    text-align: center;
    color: var(--menu-suave);
    flex: 0 0 auto;
}

/* La línea separadora se pintaba en casi todos los ítems: dejaba
   el menú rayado. Solo separa bloques de verdad. */
.bc_wrap .bc_topbar .content .dropdown-menu li.menu-hr,
.bc_wrap .bc_header .content .header-right .dropdown-menu li.menu-hr { border-top: 0; }

.bc_wrap .bc_topbar .content .dropdown-menu li.bc-sep,
.bc_wrap .bc_header .content .header-right .dropdown-menu li.bc-sep {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--menu-borde);
}

.bc_wrap .bc_topbar .content .dropdown-menu li.bc-salir a { color: #b42318; }
.bc_wrap .bc_topbar .content .dropdown-menu li.bc-salir a i { color: #b42318; }
.bc_wrap .bc_topbar .content .dropdown-menu li.bc-salir a:hover { background: #fee4e2; }

/* Panel de notificaciones */
.bc_wrap .bc_topbar .notify-items { padding: 0 !important; overflow: hidden; }
.bc_wrap .bc_topbar .notify-items .dropdown-toolbar {
    padding: 12px 14px;
    border-bottom: 1px solid var(--menu-borde);
}
.bc_wrap .bc_topbar .notify-items .dropdown-toolbar-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--menu-tinta);
}
.bc_wrap .bc_topbar .notify-items .dropdown-toolbar-actions { float: right; }
.bc_wrap .bc_topbar .notify-items .dropdown-toolbar-actions a { font-size: 12.5px; color: var(--menu-suave); }
.bc_wrap .bc_topbar .notify-items .dropdown-footer {
    padding: 10px;
    border-top: 1px solid var(--menu-borde);
    background: #fafbfc;
}
.bc_wrap .bc_topbar .notify-items .dropdown-footer a { font-size: 13px; font-weight: 600; }
.bc_wrap .bc_topbar .notify-items .bc-notify-vacio {
    padding: 26px 16px;
    font-size: 13.5px;
    text-align: center;
    color: var(--menu-suave);
}

/* ── Cabecera ───────────────────────────────────────────────── */

.bc_wrap .bc_header { border-bottom: 1px solid var(--menu-borde); }

.bc_wrap .bc_header .content .header-left { min-height: 76px; }
.bc_wrap .bc_header .content .header-left .bc-logo img { max-height: 42px; width: auto; }

/* Sin menú principal —el caso de la plataforma— la cabecera no
   tiene por qué reservar el alto de un menú que no existe. */
.bc_wrap .bc_header.is-bare .content .header-left { min-height: 62px; }
.bc_wrap .bc_header.is-bare .content .header-left .bc-logo img { max-height: 36px; }

.bc_wrap .bc_header .content .header-left .bc-menu ul li a {
    padding: 28px 14px;
    font-size: 14.5px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: -.01em;
}

.bc_wrap .bc_header .content .header-left .bc-menu ul li > .menu-dropdown {
    padding: 7px;
    border: 1px solid var(--menu-borde);
    border-radius: 14px;
    box-shadow: 0 18px 44px -18px rgba(15, 23, 42, .38);
}

.bc_wrap .bc_header .content .header-left .bc-menu ul li > .menu-dropdown li { padding: 0 7px; }
.bc_wrap .bc_header .content .header-left .bc-menu ul li > .menu-dropdown li:not(:last-child) a { border-bottom: 0; }
.bc_wrap .bc_header .content .header-left .bc-menu ul li > .menu-dropdown li a {
    padding: 9px 10px;
    border-radius: 9px;
}
.bc_wrap .bc_header .content .header-left .bc-menu ul li > .menu-dropdown li a:hover { background: #f4f5f8; }

.bc_wrap .bc_header .content .header-right .bc-more-menu {
    display: none;
    width: 44px;
    height: 44px;
    font-size: 21px;
    color: var(--menu-tinta);
    border-radius: 12px;
    line-height: 1;
}

.bc_wrap .bc_header .content .header-right .bc-more-menu:hover { background: #f4f5f8; }

/* ── Cajón móvil ────────────────────────────────────────────── */

.bc_wrap .bc_header .bc-menu-mobile { width: 306px; box-shadow: 0 0 60px rgba(15, 23, 42, .28); }
.bc_wrap .bc_header .bc-menu-mobile .user-profile { padding-bottom: 8px; }
.bc_wrap .bc_header .bc-menu-mobile ul li a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 18px;
    font-size: 15px;
    color: var(--menu-tinta);
}
.bc_wrap .bc_header .bc-menu-mobile ul li a i { width: 18px; font-size: 16px; color: var(--menu-suave); text-align: center; }
.bc_wrap .bc_header .bc-menu-mobile ul li a:hover { background: #f4f5f8; text-decoration: none; }
.bc_wrap .bc_header .bc-menu-mobile ul li.bc-sep { margin-top: 6px; border-top: 1px solid var(--menu-borde); padding-top: 6px; }
.bc_wrap .bc_header .bc-menu-mobile ul li.bc-salir a { color: #b42318; }
.bc_wrap .bc_header .bc-menu-mobile ul li.bc-salir a i { color: #b42318; }
.bc_wrap .bc_header .bc-menu-mobile .multi-lang:empty { display: none; }
.bc_wrap .bc_header .bc-menu-mobile .g-menu:empty { display: none; }

@media (max-width: 768px) {
    .bc_wrap .bc_header .content .header-right .bc-more-menu { display: flex; align-items: center; justify-content: center; float: right; }
    .bc_wrap .bc_header .content .header-left { min-height: 62px; }
}

/* ── Escritorio: una sola franja ────────────────────────────── */

@media (min-width: 769px) {
    /* Con el logo ya en la barra, la cabecera sin menú no aporta nada
       y se llevaba 62px de alto. En móvil sigue visible, porque ahí
       la barra no se muestra y el logo y el botón de menú viven aquí. */
    .bc_wrap .bc_header.is-bare { display: none; }
}