/*
 * Archivo propiedad de Z-Bombilla Spain, S.L con cif B54689120
 *  Prohibido la utilizacion de este fichero salvo acuerdo legal.
 */

/* ==========================================================================
   Barra superior compacta (barraCompacta.jsp). Diseño "Canvas" / "Canvas
   Admin" (09/2026): medidas y colores tal cual; lo único que cambia son los
   iconos, que son los de Bootstrap Icons que ya carga el WAR en vez de
   Lucide por <img>, para que hereden el color (y el modo noche).

   Todo va con variables --zbb-*: el modo noche solo las redefine, al final.
   Se carga en las páginas que llevan la compacta y en /perfil, también con
   «La de siempre» (pantallaAjustes.jsp: su vista previa es esta barra).

   FUENTE ÚNICA: comun-web/barra/ (raíz del repo). Cada WAR lleva una copia
   idéntica en assets/css/barra/, que deja ahí comun-web/sincronizar.ps1.
   No edites una copia: edita la fuente y sincroniza. Lo cargan dos JSP,
   barraCompacta.jsp y pantallaAjustes.jsp: sube su ?v= en las dos, con el
   mismo número (si no, en /perfil el CSS viejo pisa al nuevo).
   ========================================================================== */

.zb-barra,
.zb-panel {
    --zbb-alto: 56px;
    --zbb-fondo: #ffffff;
    --zbb-borde: #e8e8eb;
    --zbb-texto: #3a3a40;
    --zbb-titulo: #1d1d1f;
    --zbb-suave: #8a8a92;
    --zbb-hover: #f3f3f5;
    /* El color de resalto de la web (29/10/2026): sus fichas --zbw-* las pone
       en :root el colorWeb.css de cada web (hoy Tiendas y Finanzas). Sin
       fichas, el naranja de siempre: así se quedan Shipping y Temu. */
    --zbb-activo: var(--zbw-texto, #e8590c);
    --zbb-activo-fondo: var(--zbw-fondo, #fff1e8);
    --zbb-activo-raya: var(--zbw-raya, transparent);
    --zbb-mosaico: #f7f7f8;
    --zbb-mosaico-texto: #2a2a30;
    --zbb-avatar: var(--zbw-marca, #f47a20);
    --zbb-avatar-texto: var(--zbw-sobre-marca, #ffffff);
    /* El resalto sobre el fondo oscuro de Administración. */
    --zbb-admin-acento: var(--zbw-admin, #f9a66c);
    --zbb-admin-anillo: var(--zbw-admin-anillo, rgba(249, 166, 108, .6));
    --zbb-admin-activo: var(--zbw-admin, var(--zbb-activo));
    --zbb-admin-fondo: #1c1c21;
    --zbb-salir: #dc2626;
    --zbb-salir-borde: #f3d0d0;
    --zbb-salir-hover: #fef2f2;
    font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* --------------------------------------------------------------------------
   Barra
   -------------------------------------------------------------------------- */
.zb-barra {
    height: var(--zbb-alto);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 24px;
    background: var(--zbb-fondo);
    border-bottom: 1px solid var(--zbb-borde);
    z-index: 997;
}
/* fixed-top es de Bootstrap; se repite para las páginas que no lo cargan
   (BackStage). */
.zb-barra.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
}

.zb-barra-logo {
    flex: none;
    display: flex;
    align-items: center;
    height: 36px;
}
.zb-barra-logo img {
    height: 36px;
    width: auto;
    display: block;
}
.zb-logo-oscuro {
    display: none !important;
}

.zb-barra-accesos {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
}
.zb-barra-pista {
    position: relative;
    min-width: 0;
    display: flex;
}
.zb-barra-nav {
    display: flex;
    gap: 2px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
}
.zb-barra-nav::-webkit-scrollbar {
    display: none;
}

.zb-acceso,
.zb-acceso:focus {
    flex: none;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 400;
    white-space: nowrap;
    text-decoration: none;
    color: var(--zbb-texto);
    background: transparent;
}
.zb-acceso i {
    font-size: 16px;
    line-height: 1;
    opacity: .7;
}
.zb-acceso:hover {
    color: var(--zbb-titulo);
    background: var(--zbb-hover);
}
.zb-acceso.activo,
.zb-acceso.activo:hover {
    color: var(--zbb-activo);
    background: var(--zbb-activo-fondo);
    box-shadow: inset 0 -2px 0 var(--zbb-activo-raya);
    font-weight: 600;
}
.zb-acceso.activo i {
    opacity: 1;
}
.zb-acceso:focus-visible,
.zb-avatar:focus-visible,
.zb-barra-flecha:focus-visible {
    outline: 2px solid var(--zbb-activo);
    outline-offset: 2px;
}

/* Acceso de Administración fijado en la barra (21/10/2026): con el fondo del
   bloque «Administración» del panel y el texto claro, para que no se confunda
   con los de la cuenta. Activo: el naranja del título de ese bloque y un filo
   del mismo color. */
.zb-acceso.zb-acceso-admin,
.zb-acceso.zb-acceso-admin:focus {
    background: var(--zbb-admin-fondo);
    color: #e8e8ec;
}
.zb-acceso.zb-acceso-admin i {
    opacity: .75;
}
.zb-acceso.zb-acceso-admin:hover {
    background: #2c2c33;
    color: #ffffff;
}
.zb-acceso.zb-acceso-admin.activo,
.zb-acceso.zb-acceso-admin.activo:hover {
    background: var(--zbb-admin-fondo);
    color: var(--zbb-admin-acento);
    box-shadow: inset 0 0 0 1px var(--zbb-admin-anillo);
}
.zb-acceso.zb-acceso-admin.activo i {
    opacity: 1;
}

/* Chapita de un acceso (la de «Mis incidencias» de Shipping). La rellena y la
   enseña un JS de la web quitando d-none, que se repite aquí por si la página
   no carga Bootstrap. */
.zb-acceso-chapita {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #dc2626;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}
.zb-acceso-chapita.d-none {
    display: none;
}
/* El toggle oculto para main.js (barraCompacta.jsp): d-none es de Bootstrap y
   BackStage no lo carga; sin esto se lleva un hueco de la barra. */
.zb-barra .mobile-nav-toggle.d-none {
    display: none;
}

/* Distintivo de una sesión de demostración. */
.zb-barra .zb-demo-badge {
    flex: none;
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff9f1c, #ffbf47);
    color: #2b1a00;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
}

/* Degradados que avisan de que hay más a un lado. */
.zb-barra-fundido {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 36px;
    pointer-events: none;
    display: none;
}
.zb-barra-fundido.zb-izq {
    left: 0;
    background: linear-gradient(270deg, transparent, var(--zbb-fondo));
}
.zb-barra-fundido.zb-der {
    right: 0;
    background: linear-gradient(90deg, transparent, var(--zbb-fondo));
}
.zb-barra-pista.zb-puede-izq .zb-izq,
.zb-barra-pista.zb-puede-der .zb-der {
    display: block;
}

.zb-barra-flecha {
    flex: none;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--zbb-borde);
    border-radius: 999px;
    background: var(--zbb-fondo);
    color: var(--zbb-texto);
    display: grid;
    place-items: center;
    font-size: 12px;
    cursor: pointer;
}
.zb-barra-flecha[hidden] {
    display: none;
}
.zb-barra-flecha:disabled {
    opacity: .35;
    cursor: default;
}

/* Avatar: iniciales en círculo; con escudo si es admin. */
.zb-avatar {
    flex: none;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: none;
    cursor: pointer;
}
.zb-avatar-circulo {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--zbb-avatar);
    color: var(--zbb-avatar-texto);
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .02em;
}
.zb-avatar-circulo.zb-grande {
    width: 44px;
    height: 44px;
    flex: none;
    font-size: 15px;
}
.zb-avatar-escudo {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #1c1c21;
    border: 2px solid var(--zbb-fondo);
    color: #ffffff;
    display: grid;
    place-items: center;
    font-size: 8px;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   Árboles de un nivel (28/10/2026): un acceso con otros dentro lleva una
   flecha y su desplegable. El desplegable va dentro de la barra (hereda sus
   variables: tema y tamaño) pero fuera de la fila de accesos, que hace scroll
   de lado y lo recortaría; zbBarraCompacta.js lo coloca, fijo, debajo del
   padre. Un hijo de Administración sale oscuro también aquí.
   -------------------------------------------------------------------------- */
.zb-acceso-flecha {
    font-size: 10px !important;
    opacity: .55 !important;
    margin-left: -2px;
    transition: transform .15s ease;
}
.zb-acceso.zb-abierto .zb-acceso-flecha {
    transform: rotate(180deg);
}
.zb-acceso.zb-abierto:not(.activo):not(.zb-acceso-admin) {
    background: var(--zbb-hover);
}
/* El z-index solo cuenta dentro de la barra: #header ya es un contexto de
   apilamiento (fixed, z-index 997) y con la página compite el 997 de la barra,
   no este. Basta para quedar encima de la página y debajo del panel y de los
   modales. En la vista previa, la barra no es fija y este sí cuenta. */
.zb-arbol {
    position: fixed;
    z-index: 1050;
    min-width: 200px;
    max-width: 280px;
    box-sizing: border-box;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid var(--zbb-borde);
    background: var(--zbb-fondo);
    box-shadow: 0 10px 28px rgba(20, 20, 30, .14);
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
    animation: zb-arbol-entra .12s ease-out;
}
.zb-arbol[hidden] {
    display: none;
}
@keyframes zb-arbol-entra {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
/* height: auto, por la clase que trae cada acceso: «Crear documento» lleva
   btn-nuevo-doc, y /documentos de Finanzas le da a esa clase 32 px de alto
   (con «grande» quedaba más bajo que los otros). */
.zb-arbol-item {
    display: flex;
    align-items: center;
    gap: 10px;
    height: auto;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--zbb-texto);
    text-decoration: none;
    outline: none;
}
.zb-arbol-item i {
    flex: none;
    font-size: 15px;
    line-height: 1;
    opacity: .6;
}
/* El primero es el propio padre («Ver documentos»). */
.zb-arbol-item:first-child {
    font-weight: 500;
}
.zb-arbol-item:hover,
.zb-arbol-item:focus-visible {
    background: var(--zbb-activo-fondo);
    color: var(--zbb-mosaico-texto);
}
.zb-arbol-item:focus-visible {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--zbb-activo), transparent 50%);
}
.zb-arbol-item.activo {
    color: var(--zbb-activo);
}
.zb-arbol-item.activo i {
    opacity: 1;
}
.zb-arbol-item.zb-arbol-admin {
    background: var(--zbb-admin-fondo);
    color: #e8e8ec;
}
.zb-arbol-item.zb-arbol-admin:hover,
.zb-arbol-item.zb-arbol-admin:focus-visible {
    background: #2c2c33;
    color: #ffffff;
}
.zb-arbol-item.zb-arbol-admin.activo {
    color: var(--zbb-admin-acento);
}
.zb-arbol-item .zb-acceso-chapita {
    margin-left: auto;
}
@media (prefers-reduced-motion: reduce) {
    .zb-arbol,
    .zb-acceso-flecha {
        animation: none;
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Panel del avatar

   Velo 1051 y panel 1052: por encima de lo fijo de las páginas (la franja de
   etiquetas pendientes de /pedidos va a 1050) y por debajo de los modales de
   Bootstrap (1055), que se abren desde el panel («Crear documento» en
   Finanzas; zbBarraCompacta.js cierra el panel al pulsar). Lo que va con
   99999 (el «volver arriba» del tema, el aviso de cookies) se esconde con la
   clase zb-panel-abierto que el JS pone en <html> mientras está abierto.
   -------------------------------------------------------------------------- */
.zb-panel-velo {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 30, .18);
    z-index: 1051;
    opacity: 0;
    transition: opacity .18s ease;
}
html.zb-panel-abierto .scroll-top,
html.zb-panel-abierto #freeprivacypolicy-com---nb {
    visibility: hidden !important;
}
.zb-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    max-width: 100vw;
    box-sizing: border-box;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--zbb-fondo);
    color: var(--zbb-texto);
    box-shadow: -12px 0 32px rgba(20, 20, 30, .12);
    z-index: 1052;
    /* No basta con 100%: la flecha sobresale por la izquierda y se quedaría asomando
       hasta que el JS le pone hidden (unos 100 ms visibles al cerrar, 240 con movimiento
       reducido). */
    transform: translateX(calc(100% + 56px));
    transition: transform .22s ease;
}
.zb-panel.zb-con-admin {
    width: 400px;
}
.zb-panel-velo[hidden],
.zb-panel[hidden] {
    display: none;
}
.zb-panel-velo.zb-abierto {
    opacity: 1;
}
.zb-panel.zb-abierto {
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .zb-panel,
    .zb-panel-velo {
        transition: none;
    }
}

.zb-panel-cabecera {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
}
.zb-panel-quien {
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}
.zb-panel-nombre {
    font-size: 14px;
    font-weight: 600;
    color: var(--zbb-titulo);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* El engranaje de la configuración de la cuenta y la flecha de plegar.

   El engranaje no usa --zbb-activo ni --zbb-avatar directamente porque en Shipping
   no llegan al mínimo (blanco sobre #f47a20: 2,74:1). Son las mismas parejas de
   .zbaj-guardar en pantallaAjustes.css: sin fichas nuevas en los colorWeb.css. */
.zb-panel {
    --zbb-ajustes-texto: var(--zbw-texto, #c2410c);
    --zbb-ajustes-relleno: var(--zbw-boton, #c2410c);
    --zbb-ajustes-sobre: var(--zbw-sobre-boton, #ffffff);
    /* Filo suave, a propósito: lo que identifica el botón es el chevron (11,3:1 de día,
       10,4:1 de noche), y con eso WCAG 1.4.11 no exige contorno. Un filo de 3:1 era la
       única raya dura de un panel que no tiene ninguna. La forma la da la sombra. */
    --zbb-lengueta-filo: #c9c9d0;
    --zbb-lengueta-sombra: rgba(20, 20, 30, .22);
    --zbb-lengueta-ancho: 32px;
    --zbb-lengueta-alto: 56px;
    --zbb-cabecera-alto: 44px;
    --zbb-engranaje: 44px;
    --zbb-engranaje-icono: 22px;
}
.zb-panel-ajustes {
    flex: none;
    width: var(--zbb-engranaje);
    height: var(--zbb-engranaje);
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--zbb-activo-fondo);
    color: var(--zbb-ajustes-texto);
    /* Sobre el panel blanco el fondo suave solo se separa 1,07-1,12:1: el contorno lo
       marca en reposo. Con relleno ya no hace falta. */
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent);
    font-size: var(--zbb-engranaje-icono);
    line-height: 1;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.zb-panel-ajustes:hover,
.zb-panel-ajustes:focus-visible,
.zb-panel-ajustes.activo,
.zb-panel-ajustes.activo:hover {
    background: var(--zbb-ajustes-relleno);
    color: var(--zbb-ajustes-sobre);
    box-shadow: none;
}
.zb-panel-ajustes:focus-visible {
    outline: 2px solid var(--zbb-activo);
    outline-offset: 2px;
}
/* El engranaje aparece justo debajo del avatar: un doble clic en el avatar daría en él
   y sacaría de la página. Medio segundo sin ratón, y el segundo clic cae en el panel.
   Fuera del bloque de movimiento reducido: ahí el panel llega de golpe y hace más falta.
   El teclado no lo nota. */
.zb-panel.zb-abierto .zb-panel-ajustes {
    animation: zbAjustesEspera .5s;
}
@keyframes zbAjustesEspera {
    from, to {
        pointer-events: none;
    }
}
.zb-panel-empresa {
    font-size: 12px;
    color: var(--zbb-suave);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* La flecha de plegar. Es el primer hijo de la cabecera, que no lleva position: se
   coloca respecto al panel, por fuera de su borde izquierdo, y se desliza con él (va
   dentro del <aside>). Pisa 1 px el panel para que no quede raya a ninguna escala de
   pantalla. El clip-path deja la sombra solo hacia fuera (a la derecha está el panel):
   por eso el foco va por dentro, o lo cortaría. En el móvil, ver «Móvil». */
.zb-panel-cerrar {
    position: absolute;
    right: calc(100% - 1px);
    top: calc(18px + (var(--zbb-cabecera-alto) - var(--zbb-lengueta-alto)) / 2);
    width: calc(var(--zbb-lengueta-ancho) + 1px);
    height: var(--zbb-lengueta-alto);
    box-sizing: border-box;
    padding: 0;
    border: 1px solid var(--zbb-lengueta-filo);
    border-right: 0;
    border-radius: 12px 0 0 12px;
    background: var(--zbb-fondo);
    color: var(--zbb-texto);
    box-shadow: -4px 0 10px var(--zbb-lengueta-sombra);
    clip-path: inset(-24px 0 -24px -24px);
    display: grid;
    place-items: center;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.zb-panel-cerrar i {
    display: grid;
    place-items: center;
    transition: transform .15s ease;
}
.zb-panel-cerrar:hover {
    color: var(--zbb-ajustes-texto);
}
.zb-panel-cerrar:hover i {
    transform: translateX(2px);
}
.zb-panel-cerrar:focus-visible {
    outline: 2px solid var(--zbb-ajustes-texto);
    outline-offset: -5px;
}

.zb-panel-cuerpo {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 -4px;
    padding: 0 4px;
}
.zb-panel-seccion {
    flex: none;
    margin-bottom: -6px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--zbb-suave);
}

/* Mosaico de "Mi cuenta". Columnas y tamaño los pone zbBarraCompacta.js
   según el hueco (sin bloque admin, los mosaicos crecen); esto es lo que se
   ve antes de que el JS mida. */
.zb-rejilla-hueco {
    /* Base 0: su alto es el hueco que queda, que es lo que mide el JS. El
       mínimo lo pone el JS según cuántos mosaicos haya. */
    flex: 1 1 0;
    min-height: 64px;
    display: flex;
    flex-direction: column;
}
.zb-rejilla {
    --zbb-cols: 2;
    --zbb-fila: 96px;
    --zbb-mosaico-icono: 22px;
    --zbb-mosaico-letra: 12.5px;
    --zbb-mosaico-hueco: 9px;
    display: grid;
    grid-template-columns: repeat(var(--zbb-cols), minmax(0, 1fr));
    grid-auto-rows: var(--zbb-fila);
    gap: 6px;
}
.zb-mosaico {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--zbb-mosaico-hueco);
    padding: 8px 4px;
    border-radius: 12px;
    background: var(--zbb-mosaico);
    color: var(--zbb-mosaico-texto);
    font-size: var(--zbb-mosaico-letra);
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
}
.zb-mosaico i {
    font-size: var(--zbb-mosaico-icono);
    line-height: 1;
    opacity: .65;
}
.zb-mosaico:hover,
.zb-mosaico:focus-visible {
    background: var(--zbb-activo-fondo);
    color: var(--zbb-mosaico-texto);
}
.zb-mosaico.activo {
    color: var(--zbb-activo);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zbb-activo), transparent 65%);
}

/* Bloque oscuro de administración: lista a dos columnas. */
.zb-panel-admin {
    flex: none;
    padding: 12px 10px;
    border-radius: 12px;
    background: var(--zbb-admin-fondo);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.zb-panel-admin-titulo {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--zbb-admin-acento);
}
.zb-panel-admin-titulo i {
    font-size: 11px;
    color: #ffffff;
    opacity: .8;
}
.zb-panel-admin-lista {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 4px;
}
.zb-panel-admin-lista a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 6px;
    border-radius: 7px;
    font-size: 12px;
    line-height: 1.25;
    color: #e8e8ec;
    text-decoration: none;
}
.zb-panel-admin-lista a i {
    flex: none;
    font-size: 15px;
    line-height: 1;
    opacity: .7;
}
/* El mismo resalto que los mosaicos de «Mi cuenta» (23/10/2026): el blanco
   translúcido de antes apenas se veía sobre el fondo oscuro. */
.zb-panel-admin-lista a:hover,
.zb-panel-admin-lista a:focus-visible {
    background: var(--zbb-activo-fondo);
    color: var(--zbb-mosaico-texto);
}
.zb-panel-admin-lista a.activo {
    color: var(--zbb-admin-activo);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zbb-admin-activo), transparent 65%);
}
/* El activo con el ratón encima lleva el fondo de :hover (--zbb-activo-fondo),
   que de día es claro: la letra vuelve al color de texto de la web, el que va
   sobre ese fondo (--zbb-admin-activo es para el bloque oscuro y ahí daba de
   1,21 a 1,70:1). En Shipping no cambia nada: los dos son --zbb-activo. */
.zb-panel-admin-lista a.activo:hover,
.zb-panel-admin-lista a.activo:focus-visible {
    color: var(--zbb-activo);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zbb-activo), transparent 65%);
}

.zb-panel-salir {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--zbb-salir-borde);
    font-size: 13px;
    color: var(--zbb-salir);
    text-decoration: none;
}
.zb-panel-salir i {
    font-size: 15px;
    opacity: .8;
}
.zb-panel-salir:hover,
.zb-panel-salir:focus-visible {
    background: var(--zbb-salir-hover);
    color: var(--zbb-salir);
}

/* --------------------------------------------------------------------------
   «Más de Z-Bombilla» (21/10/2026): encima de «Cerrar sesión», las otras webs
   del ecosistema. Las que la cuenta tiene, botones pequeños a su inicio, en
   una sola línea (dos a la mitad: .zb-ligadas); las que no, una tarjeta que
   la anuncia y lleva a su portada (.zb-otra). El color de cada web va en
   --zbb-otra (icono, tinte y borde), --zbb-otra-texto (su versión oscura,
   para que el texto se lea) y --zbb-otra-sobre (el icono encima de
   --zbb-otra: blanco, salvo en el amarillo de Tiendas): lo ponen las clases
   .zb-otra-<web>.
   -------------------------------------------------------------------------- */
.zb-panel-otras {
    /* Al final del cuerpo del panel: pegadas abajo aunque «Mi cuenta» no llene
       el hueco, y con scroll junto a él en una pantalla baja. */
    flex: none;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.zb-otra {
    --zbb-otra: #f47a20;
    --zbb-otra-texto: #a34a08;
    --zbb-otra-sobre: #ffffff;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 8px;
    border-radius: 12px;
    border: 1px dashed color-mix(in srgb, var(--zbb-otra), transparent 50%);
    background: color-mix(in srgb, var(--zbb-otra) 6%, var(--zbb-fondo));
    color: var(--zbb-texto);
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}
.zb-otra:hover,
.zb-otra:focus-visible {
    border-style: solid;
    background: color-mix(in srgb, var(--zbb-otra) 12%, var(--zbb-fondo));
    color: var(--zbb-texto);
}
.zb-otra-icono {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: var(--zbb-otra);
    color: var(--zbb-otra-sobre);
    font-size: 16px;
    line-height: 1;
}
.zb-otra-texto {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.25;
}
.zb-otra-nombre {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--zbb-titulo);
}
.zb-otra-marca {
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--zbb-otra), transparent 84%);
    color: var(--zbb-otra-texto);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .02em;
}
.zb-otra-claim {
    font-size: 11.5px;
    color: var(--zbb-suave);
}
.zb-otra-ir {
    font-size: 14px;
    color: var(--zbb-otra-texto);
}
.zb-ligadas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 6px;
}
.zb-ligada {
    --zbb-otra: #f47a20;
    --zbb-otra-sobre: #ffffff;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 6px;
    border-radius: 10px;
    border: 1px solid var(--zbb-borde);
    background: var(--zbb-fondo);
    color: var(--zbb-titulo);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}
.zb-ligada:hover,
.zb-ligada:focus-visible {
    border-color: color-mix(in srgb, var(--zbb-otra), transparent 45%);
    background: color-mix(in srgb, var(--zbb-otra) 8%, var(--zbb-fondo));
    color: var(--zbb-titulo);
}
.zb-ligada-icono {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    background: var(--zbb-otra);
    color: var(--zbb-otra-sobre);
    font-size: 13px;
    line-height: 1;
}
.zb-ligada-nombre {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.zb-ligada-ir {
    flex: none;
    font-size: 17px;
    line-height: 1;
    color: var(--zbb-suave);
}
.zb-otra-shipping {
    --zbb-otra: #f26a10;
    --zbb-otra-texto: #a34a08;
}
/* Tiendas, el amarillo de la bombilla (29/10/2026; antes ámbar #e39a0e con el
   icono blanco, 2,4:1): el amarillo nunca es letra sobre claro, así que el
   icono va oscuro (13:1) y el texto en el dorado de su web (#806600: «Aún no
   lo tienes», 5,18:1; con el ratón encima, 5,11). De noche, el aclarado del
   40 % de siempre (6,43:1; con el ratón, 5,30). */
.zb-otra-tiendas {
    --zbb-otra: #fde254;
    --zbb-otra-texto: #806600;
    --zbb-otra-sobre: #1d1d1f;
}
.zb-otra-finanzas {
    --zbb-otra: #12a874;
    --zbb-otra-texto: #0b7a53;
}
@media (prefers-reduced-motion: reduce) {
    .zb-otra,
    .zb-ligada,
    .zb-panel-ajustes,
    .zb-panel-cerrar i {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   El título de la página, con la compacta

   La barra de siempre es transparente y va encima de la franja oscura con
   foto (.page-title), que por eso lleva 100px de relleno arriba. Con la
   compacta, blanca y fija, esa franja se queda en una tira fina con el
   título, como en el diseño. Se hace aquí y no página a página: toda página
   que lleve la compacta queda igual sin tocar su JSP.

   - La franja puede ir dentro de <main> (lo normal) o justo después de la
     barra, sin <main> (/config/agencias-admin): las dos formas.
   - Una portada que quiera conservar su franja grande de siempre (el hero de
     /servicios) lleva además la clase zb-titulo-propio y aquí no se toca.
     Va dentro de :where() para no subir la especificidad: las páginas que
     afinan la tira (la cabecera fija de /productos) siguen ganando.
   - Lo que estaba pensado para la franja oscura (botón btn-outline-light,
     enlace text-white) se repinta: sobre blanco no se veía.
   -------------------------------------------------------------------------- */
#header.zb-barra ~ .main .page-title:where(:not(.zb-titulo-propio)),
#header.zb-barra ~ main .page-title:where(:not(.zb-titulo-propio)),
#header.zb-barra ~ .page-title:where(:not(.zb-titulo-propio)) {
    --default-color: var(--zbb-texto);
    --heading-color: var(--zbb-titulo);
    --background-color: var(--zbb-fondo);
    background-image: none;
    background-color: var(--zbb-fondo);
    color: var(--zbb-texto);
    border-bottom: 1px solid var(--zbb-borde);
    text-align: left;
    padding: calc(var(--zbb-alto) + 12px) 0 12px;
}
#header.zb-barra ~ .main .page-title:where(:not(.zb-titulo-propio))::before,
#header.zb-barra ~ main .page-title:where(:not(.zb-titulo-propio))::before,
#header.zb-barra ~ .page-title:where(:not(.zb-titulo-propio))::before {
    display: none;
}
#header.zb-barra ~ .main .page-title:where(:not(.zb-titulo-propio)) > .container,
#header.zb-barra ~ main .page-title:where(:not(.zb-titulo-propio)) > .container,
#header.zb-barra ~ .page-title:where(:not(.zb-titulo-propio)) > .container {
    max-width: none;
    padding: 0 24px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 14px;
}
#header.zb-barra ~ .main .page-title:where(:not(.zb-titulo-propio)) h1,
#header.zb-barra ~ main .page-title:where(:not(.zb-titulo-propio)) h1,
#header.zb-barra ~ .page-title:where(:not(.zb-titulo-propio)) h1 {
    font-family: Poppins, system-ui, sans-serif;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}
#header.zb-barra ~ .main .page-title:where(:not(.zb-titulo-propio)) h1 i,
#header.zb-barra ~ main .page-title:where(:not(.zb-titulo-propio)) h1 i,
#header.zb-barra ~ .page-title:where(:not(.zb-titulo-propio)) h1 i {
    font-size: 15px;
    opacity: .6;
}
#header.zb-barra ~ .main .page-title:where(:not(.zb-titulo-propio)) p,
#header.zb-barra ~ main .page-title:where(:not(.zb-titulo-propio)) p,
#header.zb-barra ~ .page-title:where(:not(.zb-titulo-propio)) p {
    font-size: 12.5px;
    color: var(--zbb-suave);
    margin: 0;
}
#header.zb-barra ~ .main .page-title:where(:not(.zb-titulo-propio)) .btn-outline-light,
#header.zb-barra ~ main .page-title:where(:not(.zb-titulo-propio)) .btn-outline-light,
#header.zb-barra ~ .page-title:where(:not(.zb-titulo-propio)) .btn-outline-light {
    --bs-btn-color: var(--zbb-texto);
    --bs-btn-border-color: var(--zbb-borde);
    --bs-btn-hover-color: var(--zbb-titulo);
    --bs-btn-hover-bg: var(--zbb-hover);
    --bs-btn-hover-border-color: var(--zbb-borde);
    --bs-btn-active-color: var(--zbb-titulo);
    --bs-btn-active-bg: var(--zbb-hover);
    --bs-btn-active-border-color: var(--zbb-borde);
}
#header.zb-barra ~ .main .page-title:where(:not(.zb-titulo-propio)) .text-white,
#header.zb-barra ~ main .page-title:where(:not(.zb-titulo-propio)) .text-white,
#header.zb-barra ~ .page-title:where(:not(.zb-titulo-propio)) .text-white,
#header.zb-barra ~ .main .page-title:where(:not(.zb-titulo-propio)) .link-light,
#header.zb-barra ~ main .page-title:where(:not(.zb-titulo-propio)) .link-light,
#header.zb-barra ~ .page-title:where(:not(.zb-titulo-propio)) .link-light {
    color: var(--zbb-activo) !important;
}
/* Las variables del título se definen en .zb-barra; la tira no cuelga de
   ella, así que las repite. El alto, a todo lo que va detrás de la barra y
   no solo a la franja (lo puede usar cualquier hermano que deje su hueco,
   como .horas-root de BackStage), y con la barra grande, el suyo. */
#header.zb-barra ~ * {
    --zbb-alto: 56px;
}
#header.zb-barra.zb-tam-grande ~ * {
    --zbb-alto: 64px;
}
#header.zb-barra ~ .main,
#header.zb-barra ~ main,
#header.zb-barra ~ .page-title {
    --zbb-fondo: #ffffff;
    --zbb-borde: #e8e8eb;
    --zbb-texto: #3a3a40;
    --zbb-titulo: #1d1d1f;
    --zbb-suave: #8a8a92;
    --zbb-hover: #f3f3f5;
    --zbb-activo: var(--zbw-texto, #e8590c);
}

/* --------------------------------------------------------------------------
   Móvil
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .zb-barra {
        gap: 10px;
        padding: 0 12px;
    }
    .zb-barra-logo img {
        height: 28px;
    }
    .zb-acceso,
    .zb-acceso:focus {
        padding: 7px 9px;
    }
    /* 100%, no 100vw: 100vw cuenta la barra de desplazamiento de una ventana de escritorio
       estrecha, y el panel empezaría 15 px fuera, justo por el lado de la salida. */
    .zb-panel,
    .zb-panel.zb-con-admin {
        width: 100%;
    }
    /* A todo el ancho no hay «por fuera»: la misma flecha entra en la cabecera, delante
       del avatar y lejos del engranaje. El botón es la zona de toque (44 x 44, desde el
       borde de la pantalla) y el <i>, lo que se ve (28 x 28). Los márgenes la pegan al
       borde y al avatar: gasta 32 px de nombre y no 48. Aquí apunta a la izquierda: es el
       «volver» de cualquier teléfono, y una «>» a la izquierda del todo se lee como
       «abrir» o «siguiente». */
    .zb-panel-cerrar {
        position: static;
        flex: none;
        width: 44px;
        height: var(--zbb-cabecera-alto);
        margin: 0 -6px 0 -18px;
        padding: 0 0 0 8px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        box-shadow: none;
        clip-path: none;
    }
    .zb-panel-cerrar i {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        background: var(--zbb-hover);
        transform: rotate(180deg);
    }
    .zb-panel-cerrar:hover i {
        transform: rotate(180deg);
    }
    .zb-panel-cerrar:focus-visible {
        outline-offset: -2px;
    }
    #header.zb-barra ~ .main .page-title:where(:not(.zb-titulo-propio)) > .container,
    #header.zb-barra ~ main .page-title:where(:not(.zb-titulo-propio)) > .container,
    #header.zb-barra ~ .page-title:where(:not(.zb-titulo-propio)) > .container {
        padding: 0 12px;
    }
}

/* --------------------------------------------------------------------------
   Tamaño grande (zb-tam-grande; zb-grande ya es el avatar del panel): la
   barra de 56 a 64 px, letra, iconos y avatar algo mayores, y el panel un
   punto más de letra. El alto de lo que va detrás, con la franja del título.
   -------------------------------------------------------------------------- */
.zb-barra.zb-tam-grande {
    --zbb-alto: 64px;
}
.zb-barra.zb-tam-grande .zb-barra-logo,
.zb-barra.zb-tam-grande .zb-barra-logo img {
    height: 42px;
}
.zb-barra.zb-tam-grande .zb-acceso {
    font-size: 15px;
    padding: 9px 14px;
}
.zb-barra.zb-tam-grande .zb-acceso i {
    font-size: 17px;
}
.zb-barra.zb-tam-grande .zb-avatar-circulo {
    width: 40px;
    height: 40px;
    font-size: 14px;
}
.zb-barra.zb-tam-grande .zb-arbol-item {
    font-size: 14.5px;
    padding: 10px 12px;
}
.zb-panel.zb-tam-grande {
    --zbb-lengueta-ancho: 36px;
    --zbb-lengueta-alto: 64px;
    --zbb-cabecera-alto: 48px;
    --zbb-engranaje: 48px;
    --zbb-engranaje-icono: 24px;
}
.zb-panel.zb-tam-grande .zb-panel-cerrar {
    font-size: 20px;
}
.zb-panel.zb-tam-grande .zb-panel-nombre {
    font-size: 15.5px;
}
.zb-panel.zb-tam-grande .zb-panel-empresa,
.zb-panel.zb-tam-grande .zb-panel-admin-lista a {
    font-size: 13.5px;
}
.zb-panel.zb-tam-grande .zb-mosaico {
    font-size: calc(var(--zbb-mosaico-letra) + 1.5px);
}
.zb-panel.zb-tam-grande .zb-panel-salir {
    font-size: 14.5px;
}
/* En el móvil la grande no puede comerse el sitio de los accesos con el logo. */
@media (max-width: 575.98px) {
    .zb-barra.zb-tam-grande .zb-barra-logo,
    .zb-barra.zb-tam-grande .zb-barra-logo img {
        height: 28px;
    }
    .zb-barra.zb-tam-grande .zb-acceso {
        padding: 8px 10px;
    }
}

/* --------------------------------------------------------------------------
   Solo iconos (zb-solo-iconos): el nombre de cada acceso sigue en la página,
   oculto (da nombre al enlace), y sale en un tip propio al pasar el ratón o
   con el foco (.zb-tip, que zbBarraCompacta.js cuelga del <body>). El
   desplegable de un árbol sí lleva textos.
   -------------------------------------------------------------------------- */
.zb-barra.zb-solo-iconos .zb-acceso {
    position: relative;
    gap: 4px;
    padding-left: 11px;
    padding-right: 11px;
}
.zb-barra.zb-solo-iconos .zb-acceso-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.zb-tip {
    position: fixed;
    z-index: 1060;
    padding: 5px 9px;
    border-radius: 7px;
    background: #1d1d1f;
    color: #ffffff;
    font: 500 12px/1.2 Poppins, system-ui, sans-serif;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.zb-tip[hidden] {
    display: none;
}

/* --------------------------------------------------------------------------
   La barra de la vista previa de «Pantalla» (no fija, dentro de la página).
   -------------------------------------------------------------------------- */
.zb-barra.zb-barra-previa {
    position: relative;
    z-index: auto;
    border: 1px solid var(--zbb-borde);
    border-radius: 12px;
}

/* --------------------------------------------------------------------------
   Modo noche (tema.jsp pone data-bs-theme en <html>) y tema de la barra

   La persona puede pedir la barra oscura en una página clara (zb-tema-oscuro)
   o clara en una oscura (zb-tema-claro), en la barra, el velo y el panel (el
   desplegable de un árbol cuelga de la barra). Por eso cada regla de noche
   de la barra, el panel y el velo va dos veces: con data-bs-theme y sin
   zb-tema-claro, y con zb-tema-oscuro. La franja del título no: es de la
   página y sigue a la página.
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] .zb-barra:not(.zb-tema-claro),
[data-bs-theme="dark"] .zb-panel:not(.zb-tema-claro),
.zb-barra.zb-tema-oscuro,
.zb-panel.zb-tema-oscuro,
[data-bs-theme="dark"] #header.zb-barra ~ .main,
[data-bs-theme="dark"] #header.zb-barra ~ main,
[data-bs-theme="dark"] #header.zb-barra ~ .page-title {
    --zbb-fondo: #242733;
    --zbb-borde: #3a3f51;
    --zbb-texto: #d5d8e1;
    --zbb-titulo: #f2f3f7;
    --zbb-suave: #9aa0b1;
    --zbb-hover: #2d3140;
    --zbb-activo: var(--zbw-noche, #ff8a3d);
    --zbb-activo-fondo: var(--zbw-noche-fondo, rgba(244, 122, 32, .16));
    --zbb-mosaico: #2d3140;
    --zbb-mosaico-texto: #e4e6ec;
    --zbb-admin-fondo: #15161c;
    --zbb-salir: #f87171;
    --zbb-salir-borde: rgba(248, 113, 113, .35);
    --zbb-salir-hover: rgba(248, 113, 113, .1);
}
/* Lo de la flecha y el engranaje. */
[data-bs-theme="dark"] .zb-panel:not(.zb-tema-claro),
.zb-panel.zb-tema-oscuro {
    --zbb-ajustes-texto: var(--zbb-activo);
    --zbb-ajustes-relleno: var(--zbw-noche, #ff8a3d);
    --zbb-ajustes-sobre: var(--zbw-sobre-noche, #1d1d1f);
    --zbb-lengueta-filo: #4b5063;
    --zbb-lengueta-sombra: rgba(0, 0, 0, .25);
}
[data-bs-theme="dark"] .zb-panel-velo:not(.zb-tema-claro),
.zb-panel-velo.zb-tema-oscuro {
    background: rgba(0, 0, 0, .45);
}
/* La barra ya es oscura: un filo claro para que el de Administración se distinga. */
[data-bs-theme="dark"] .zb-barra:not(.zb-tema-claro) .zb-acceso.zb-acceso-admin,
.zb-barra.zb-tema-oscuro .zb-acceso.zb-acceso-admin {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
[data-bs-theme="dark"] .zb-barra:not(.zb-tema-claro) .zb-acceso.zb-acceso-admin:hover,
.zb-barra.zb-tema-oscuro .zb-acceso.zb-acceso-admin:hover {
    background: #1f2029;
}
/* El anillo del de Administración activo (el naranja, o el color de la web),
   después del filo (antes el filo de noche lo pisaba). */
[data-bs-theme="dark"] .zb-barra:not(.zb-tema-claro) .zb-acceso.zb-acceso-admin.activo,
.zb-barra.zb-tema-oscuro .zb-acceso.zb-acceso-admin.activo {
    box-shadow: inset 0 0 0 1px var(--zbb-admin-anillo);
}
[data-bs-theme="dark"] .zb-barra:not(.zb-tema-claro) .zb-logo-claro,
.zb-barra.zb-tema-oscuro .zb-logo-claro {
    display: none !important;
}
[data-bs-theme="dark"] .zb-barra:not(.zb-tema-claro) .zb-logo-oscuro,
.zb-barra.zb-tema-oscuro .zb-logo-oscuro {
    display: block !important;
}
/* «Más de Z-Bombilla»: el texto en el color de la web, aclarado. */
[data-bs-theme="dark"] .zb-panel:not(.zb-tema-claro) .zb-otra,
.zb-panel.zb-tema-oscuro .zb-otra {
    --zbb-otra-texto: color-mix(in srgb, var(--zbb-otra), #ffffff 40%);
    background: color-mix(in srgb, var(--zbb-otra) 10%, var(--zbb-fondo));
}
[data-bs-theme="dark"] .zb-panel:not(.zb-tema-claro) .zb-otra:hover,
[data-bs-theme="dark"] .zb-panel:not(.zb-tema-claro) .zb-otra:focus-visible,
.zb-panel.zb-tema-oscuro .zb-otra:hover,
.zb-panel.zb-tema-oscuro .zb-otra:focus-visible {
    background: color-mix(in srgb, var(--zbb-otra) 18%, var(--zbb-fondo));
}
/* El tip de «solo iconos», claro sobre una barra oscura (lleva la clase de
   tema de su barra: cuelga del <body>). */
[data-bs-theme="dark"] .zb-tip:not(.zb-tema-claro),
.zb-tip.zb-tema-oscuro {
    background: #f2f3f7;
    color: #1d1d1f;
}