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

/* ==========================================================================
   Capa de la demo de Shipping (zbDemo.js): el panel flotante «DEMO», la
   bienvenida, la visita guiada (foco + bocadillo), el índice «Qué enseñar»,
   los avisos de acción simulada y la página
   /demo/fuera (WEB-INF/demo/fueraDemo.jsp).

   Solo se carga en una sesión demo (fragmento demo.jsp). Todo cuelga de
   clases zbd-* e ids zbd*: ningún JS de los paneles escucha esos nombres.
   El aspecto es el de Shipping (main.css: naranja #ef6603, gris oscuro
   #2a2c39, Roboto / Raleway / Poppins). Shipping no tiene modo oscuro.

   Capas (z-index), de abajo arriba:
     cabecera fija del tema ....... 997-1030
     modales de Bootstrap ......... 1050 (fondo) / 1055
     panel DEMO ................... 1990 (1040 con un modal abierto: queda
                                    debajo de su fondo y no se pisan)
     foco / bocadillo ............. 2001 / 2002
     avisos ....................... 2003 (encima del foco de la visita)
     tarjetas propias ............. 2004 (encima de todo lo anterior: son modales)
     preloader, menú móvil, banner de cookies y «subir»: 9997-99999 (encima;
     el preloader se va al cargar y el resto los pone el tema a propósito).

   El banner de cookies (fijo abajo, a todo el ancho) tapa la parte de abajo
   hasta que se acepta o se rechaza: zbDemo.js pone su alto en --zbd-abajo y
   el panel, los avisos, las tarjetas y el bocadillo se quedan por encima.
   ========================================================================== */

:root {
    --zbd-acento: #ef6603;
    --zbd-acento-2: #ff8a3d;
    --zbd-acento-oscuro: #c75400;
    --zbd-acento-suave: rgba(239, 102, 3, .12);
    --zbd-acento-texto: #ffffff;
    --zbd-tinta: #2a2c39;
    --zbd-tinta-2: #353848;
    --zbd-superficie: #ffffff;
    --zbd-superficie-2: #f7f7f9;
    --zbd-borde: #e5e6ec;
    --zbd-texto: #2a2c39;
    --zbd-texto-cuerpo: #444444;
    --zbd-texto-suave: #6b6e7c;
    --zbd-sombra: 0 18px 48px rgba(22, 23, 33, .22), 0 3px 10px rgba(22, 23, 33, .12);
    --zbd-velo: rgba(20, 21, 30, .58);
    --zbd-ok: #15803d;
    --zbd-ok-suave: rgba(21, 128, 61, .1);
    --zbd-fuente: var(--default-font, "Roboto"), system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --zbd-fuente-titulos: var(--heading-font, "Raleway"), var(--default-font, "Roboto"), system-ui, sans-serif;
    --zbd-fuente-nav: var(--nav-font, "Poppins"), var(--default-font, "Roboto"), system-ui, sans-serif;
    /* Lo que tapa el banner de cookies abajo (lo pone zbDemo.js). */
    --zbd-abajo: 0px;
}

/* --------------------------------------------------------------------------
   Panel flotante
   -------------------------------------------------------------------------- */
.zbd-dock {
    position: fixed;
    left: 18px;
    bottom: calc(18px + var(--zbd-abajo, 0px));
    z-index: 1990;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border-radius: 999px;
    background: var(--zbd-tinta);
    color: #fff;
    box-shadow: var(--zbd-sombra);
    font-family: var(--zbd-fuente-nav);
    font-size: 13.5px;
    line-height: 1.2;
    max-width: calc(100vw - 36px);
    transition: transform .25s ease, opacity .25s ease;
}

/* Con un modal de Bootstrap abierto, el panel queda debajo de su fondo: ni tapa los
   botones del modal ni recibe clics a medias. */
body.modal-open .zbd-dock {
    z-index: 1040;
}

.zbd-dock-marca {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 7px 9px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--zbd-acento), var(--zbd-acento-2));
    color: var(--zbd-acento-texto);
    font-family: var(--zbd-fuente-nav);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    white-space: nowrap;
    border: 0;
    cursor: pointer;
}

.zbd-dock-marca:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.zbd-dock-marca .zbd-punto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
    animation: zbdLatido 2.2s infinite;
}

.zbd-dock-marca small {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0;
    opacity: .9;
}

.zbd-dock-flecha {
    font-size: 11px;
    margin-left: 2px;
    transition: transform .2s ease;
}

.zbd-dock.zbd-plegado .zbd-dock-flecha {
    transform: rotate(180deg);
}

.zbd-dock-botones {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.zbd-dock.zbd-plegado .zbd-dock-botones {
    display: none;
}

.zbd-dock.zbd-plegado {
    padding: 5px;
}

.zbd-dock-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 11px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: #e8e9f0;
    font-family: var(--zbd-fuente-nav);
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
}

.zbd-dock-btn i {
    font-size: 15px;
    line-height: 1;
}

.zbd-dock-btn:hover,
.zbd-dock-btn:focus-visible {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    outline: none;
}

.zbd-dock-btn.zbd-dock-principal {
    background: rgba(239, 102, 3, .22);
    color: #ffb37d;
}

.zbd-dock-btn.zbd-dock-principal:hover,
.zbd-dock-btn.zbd-dock-principal:focus-visible {
    background: rgba(239, 102, 3, .34);
    color: #ffd1b0;
}

.zbd-dock-btn.zbd-dock-quiero {
    background: var(--zbd-acento);
    color: #fff;
    font-weight: 600;
}

.zbd-dock-btn.zbd-dock-quiero:hover,
.zbd-dock-btn.zbd-dock-quiero:focus-visible {
    background: var(--zbd-acento-oscuro);
    color: #fff;
}

.zbd-dock-sep {
    width: 1px;
    height: 22px;
    margin: 0 4px;
    background: rgba(255, 255, 255, .16);
}

/* Etiqueta de los botones sin texto (solo icono): encima del botón. */
@media (hover: hover) {
    .zbd-dock-btn[data-zbd-tip]::after {
        content: attr(data-zbd-tip);
        position: absolute;
        left: 50%;
        bottom: calc(100% + 12px);
        transform: translateX(-50%) translateY(4px);
        width: max-content;
        max-width: 240px;
        padding: 6px 10px;
        border-radius: 8px;
        background: var(--zbd-tinta);
        color: #fff;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.35;
        white-space: normal;
        text-align: center;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .15s ease, transform .15s ease;
    }
    .zbd-dock-btn[data-zbd-tip]:first-child::after {
        left: 0;
        transform: translateY(4px);
    }
}

/* Escritorio grande: todo con texto. Más estrecho: los secundarios, solo icono. */
@media (max-width: 1399px) {
    .zbd-dock-btn .zbd-txt-opc {
        display: none;
    }
    .zbd-dock-btn.zbd-btn-opc {
        padding: 8px 10px;
    }
}

@media (max-width: 1399px) and (hover: hover) {
    .zbd-dock-btn.zbd-btn-opc:hover::after,
    .zbd-dock-btn.zbd-btn-opc:focus-visible::after {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }
}

@media (max-width: 991px) {
    .zbd-dock-btn .zbd-txt {
        display: none;
    }
    .zbd-dock-btn {
        padding: 8px 10px;
    }
    .zbd-dock-marca small {
        display: none;
    }
}

@media (max-width: 991px) and (hover: hover) {
    .zbd-dock-btn:hover::after,
    .zbd-dock-btn:focus-visible::after {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }
    .zbd-dock-btn[data-zbd-tip]:first-child:hover::after,
    .zbd-dock-btn[data-zbd-tip]:first-child:focus-visible::after {
        transform: translateY(0);
    }
}

/* Móvil: pegado abajo, plegado de entrada (solo la píldora «DEMO»); desplegado, una
   fila de iconos que cabe en 360 px. Durante la visita se esconde: el bocadillo
   necesita la pantalla. */
@media (max-width: 767px) {
    .zbd-dock {
        left: 10px;
        bottom: calc(10px + var(--zbd-abajo, 0px));
        bottom: calc(10px + env(safe-area-inset-bottom, 0px) + var(--zbd-abajo, 0px));
        max-width: calc(100vw - 20px);
        gap: 4px;
        padding: 5px;
        border-radius: 22px;
    }
    .zbd-dock:not(.zbd-plegado) {
        right: 10px;
        justify-content: space-between;
    }
    .zbd-dock-botones {
        flex: 1 1 auto;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .zbd-dock-btn,
    .zbd-dock-btn.zbd-btn-opc {
        padding: 7px;
    }
    .zbd-dock-btn i {
        font-size: 17px;
    }
    .zbd-dock-sep {
        display: none;
    }
    .zbd-dock-marca {
        gap: 6px;
        padding: 7px 9px 7px 8px;
        letter-spacing: .03em;
    }
    body.zbd-en-visita .zbd-dock {
        transform: translateY(140%);
        opacity: 0;
        pointer-events: none;
    }
}

@keyframes zbdLatido {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, .55);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

/* --------------------------------------------------------------------------
   Tarjetas (bienvenida, índice, despedida): un modal propio, no el de
   Bootstrap, para no chocar con los modales de los paneles.
   -------------------------------------------------------------------------- */
.zbd-velo {
    position: fixed;
    inset: 0;
    z-index: 2004;
    background: var(--zbd-velo);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    padding-bottom: calc(16px + var(--zbd-abajo, 0px));
    animation: zbdAparece .2s ease;
}

.zbd-tarjeta {
    position: relative;
    width: 100%;
    max-width: 680px;
    max-height: calc(100vh - 32px - var(--zbd-abajo, 0px));
    max-height: calc(100dvh - 32px - var(--zbd-abajo, 0px));
    overflow: auto;
    overscroll-behavior: contain;
    border-radius: 20px;
    background: var(--zbd-superficie);
    color: var(--zbd-texto-cuerpo);
    box-shadow: var(--zbd-sombra);
    font-family: var(--zbd-fuente);
    font-size: 15px;
    line-height: 1.5;
    text-align: left;
    animation: zbdSube .28s cubic-bezier(.2, .8, .2, 1);
}

.zbd-tarjeta.zbd-tarjeta-indice {
    max-width: 760px;
}

.zbd-tarjeta-cabecera {
    position: relative;
    padding: 26px 56px 22px 28px;
    border-radius: 20px 20px 0 0;
    background:
        radial-gradient(circle at 92% 0%, rgba(239, 102, 3, .55), transparent 46%),
        linear-gradient(135deg, #22242f 0%, #2a2c39 60%, #3a3140 100%);
    color: #fff;
    overflow: hidden;
}

.zbd-tarjeta-cabecera .zbd-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(239, 102, 3, .22);
    color: #ffb37d;
    font-family: var(--zbd-fuente-nav);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.zbd-tarjeta-cabecera h2 {
    margin: 12px 0 6px;
    font-family: var(--zbd-fuente-titulos);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.zbd-tarjeta-cabecera p {
    margin: 0;
    color: rgba(255, 255, 255, .84);
    font-size: 15px;
}

.zbd-tarjeta-cerrar {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 20px;
    line-height: 34px;
    text-align: center;
    cursor: pointer;
    padding: 0;
}

.zbd-tarjeta-cerrar:hover,
.zbd-tarjeta-cerrar:focus-visible {
    background: rgba(255, 255, 255, .24);
    outline: none;
}

.zbd-tarjeta-cuerpo {
    padding: 22px 28px 8px;
}

.zbd-tarjeta-pie {
    /* Pegado abajo: con una tarjeta larga (la bienvenida en un móvil) los botones se ven
       sin tener que llegar al final. */
    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    padding: 14px 28px 24px;
    background: var(--zbd-superficie);
    border-radius: 0 0 20px 20px;
}

@media (max-width: 575px) {
    .zbd-velo {
        padding: 10px;
        padding-bottom: calc(10px + var(--zbd-abajo, 0px));
        align-items: flex-end;
    }
    .zbd-tarjeta {
        max-height: calc(100vh - 20px - var(--zbd-abajo, 0px));
        max-height: calc(100dvh - 20px - var(--zbd-abajo, 0px));
        border-radius: 18px;
    }
    .zbd-tarjeta-cabecera {
        padding: 20px 52px 18px 18px;
        border-radius: 18px 18px 0 0;
    }
    .zbd-tarjeta-cabecera h2 {
        font-size: 21px;
    }
    .zbd-tarjeta-cabecera p {
        font-size: 14px;
    }
    .zbd-tarjeta-cuerpo {
        padding: 16px 18px 6px;
    }
    .zbd-tarjeta-pie {
        padding: 12px 18px 16px;
        border-radius: 0 0 18px 18px;
        box-shadow: 0 -10px 18px -14px rgba(22, 23, 33, .35);
    }
    .zbd-tarjeta-pie .zbd-boton {
        flex: 1 1 auto;
        justify-content: center;
    }
}

.zbd-lista-ventajas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Móvil: las seis ventajas en dos columnas y solo con el título (cabe sin desplazar). */
@media (max-width: 575px) {
    .zbd-lista-ventajas {
        gap: 8px;
    }
    .zbd-lista-ventajas li {
        flex-direction: column;
        gap: 6px;
        padding: 10px;
    }
    .zbd-lista-ventajas li i {
        width: 28px;
        height: 28px;
        font-size: 15px;
    }
    .zbd-lista-ventajas li strong {
        font-size: 13px;
        line-height: 1.3;
    }
    .zbd-lista-ventajas li span {
        display: none;
    }
}

.zbd-lista-ventajas li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 12px;
    border-radius: 14px;
    background: var(--zbd-superficie-2);
    border: 1px solid var(--zbd-borde);
    font-size: 13.5px;
    line-height: 1.4;
}

.zbd-lista-ventajas li i {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--zbd-acento-suave);
    color: var(--zbd-acento);
    font-size: 17px;
}

.zbd-lista-ventajas li strong {
    display: block;
    color: var(--zbd-texto);
    font-size: 14px;
    margin-bottom: 1px;
}

.zbd-lista-ventajas li span {
    color: var(--zbd-texto-suave);
}

.zbd-lista-cierre {
    list-style: none;
    margin: 0;
    padding: 0;
}

.zbd-lista-cierre li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 0;
    color: var(--zbd-texto-cuerpo);
}

.zbd-lista-cierre li + li {
    border-top: 1px solid var(--zbd-borde);
}

.zbd-lista-cierre li i {
    color: var(--zbd-acento);
    font-size: 18px;
    line-height: 1.3;
}

.zbd-nota {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 14px 0 0;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--zbd-ok-suave);
    color: var(--zbd-texto-cuerpo);
    font-size: 13.5px;
    line-height: 1.45;
}

.zbd-nota i {
    color: var(--zbd-ok);
    font-size: 15px;
    line-height: 1.35;
}

.zbd-nota.zbd-nota-cuenta {
    background: rgba(42, 44, 57, .06);
}

.zbd-nota.zbd-nota-cuenta i {
    color: var(--zbd-tinta);
}

.zbd-boton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid var(--zbd-borde);
    background: var(--zbd-superficie);
    color: var(--zbd-texto);
    font-family: var(--zbd-fuente-nav);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
}

.zbd-boton:hover,
.zbd-boton:focus-visible {
    background: var(--zbd-superficie-2);
    border-color: #cfd1da;
    color: var(--zbd-texto);
}

.zbd-boton:focus-visible {
    outline: 2px solid var(--zbd-acento);
    outline-offset: 2px;
}

.zbd-boton.zbd-boton-principal {
    border-color: transparent;
    background: var(--zbd-acento);
    color: var(--zbd-acento-texto);
    box-shadow: 0 8px 18px rgba(239, 102, 3, .22);
}

.zbd-boton.zbd-boton-principal:hover,
.zbd-boton.zbd-boton-principal:focus-visible {
    background: var(--zbd-acento-oscuro);
    color: var(--zbd-acento-texto);
}

.zbd-boton[disabled] {
    opacity: .7;
    cursor: wait;
}

/* Índice «Qué enseñar» */
.zbd-indice-grupo {
    margin-bottom: 18px;
}

.zbd-indice-grupo h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-family: var(--zbd-fuente-nav);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--zbd-texto-suave);
}

.zbd-indice-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

@media (max-width: 575px) {
    .zbd-indice-items {
        grid-template-columns: 1fr;
    }
}

.zbd-indice-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    width: 100%;
    padding: 11px 12px;
    border-radius: 14px;
    border: 1px solid var(--zbd-borde);
    background: var(--zbd-superficie-2);
    color: var(--zbd-texto);
    font-family: var(--zbd-fuente);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease, background-color .15s ease;
}

.zbd-indice-item:hover,
.zbd-indice-item:focus-visible {
    border-color: var(--zbd-acento);
    background: #fff;
    transform: translateY(-1px);
    outline: none;
}

.zbd-indice-item.zbd-aqui {
    border-color: rgba(239, 102, 3, .45);
    background: #fff8f3;
}

.zbd-indice-item i {
    flex: 0 0 auto;
    font-size: 18px;
    color: var(--zbd-acento);
    margin-top: 1px;
}

.zbd-indice-item strong {
    display: block;
    font-size: 14px;
    line-height: 1.3;
}

.zbd-indice-item span {
    display: block;
    font-size: 12.5px;
    color: var(--zbd-texto-suave);
    line-height: 1.35;
}

.zbd-indice-item .zbd-marca-recorrido {
    display: inline-block;
    margin-top: 5px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--zbd-acento-suave);
    color: var(--zbd-acento-oscuro);
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
}

.zbd-indice-item.zbd-visto strong::after {
    content: " \2713";
    color: var(--zbd-ok);
}

/* --------------------------------------------------------------------------
   Visita guiada: foco (un hueco con una sombra enorme) y bocadillo.
   El foco no recoge clics (pointer-events: none) y la sombra tampoco: se
   puede seguir usando la página con la visita abierta.
   -------------------------------------------------------------------------- */
.zbd-foco {
    position: fixed;
    z-index: 2001;
    border-radius: 12px;
    box-shadow: 0 0 0 9999px var(--zbd-velo), 0 0 0 3px var(--zbd-acento), 0 0 26px 6px rgba(239, 102, 3, .45);
    pointer-events: none;
    transition: top .3s ease, left .3s ease, width .3s ease, height .3s ease, opacity .2s ease;
}

.zbd-foco.zbd-sin-objetivo {
    box-shadow: 0 0 0 9999px var(--zbd-velo);
    width: 0 !important;
    height: 0 !important;
    top: 50% !important;
    left: 50% !important;
}

.zbd-bocadillo {
    position: fixed;
    z-index: 2002;
    width: 380px;
    max-width: calc(100vw - 24px);
    border-radius: 16px;
    background: var(--zbd-superficie);
    color: var(--zbd-texto-cuerpo);
    box-shadow: var(--zbd-sombra);
    font-family: var(--zbd-fuente);
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
    transition: top .3s ease, left .3s ease, opacity .2s ease;
    animation: zbdAparece .2s ease;
}

.zbd-bocadillo-flecha {
    position: absolute;
    width: 16px;
    height: 16px;
    background: var(--zbd-superficie);
    transform: rotate(45deg);
}

.zbd-bocadillo-cabecera {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 14px 12px 0 16px;
}

.zbd-bocadillo-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}

.zbd-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--zbd-acento-suave);
    color: var(--zbd-acento-oscuro);
    font-family: var(--zbd-fuente-nav);
    font-size: 11.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zbd-tema {
    color: var(--zbd-texto-suave);
    font-size: 11.5px;
    white-space: nowrap;
}

.zbd-bocadillo-x,
.zbd-bocadillo-saltar {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--zbd-texto-suave);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 5px;
    border-radius: 8px;
}

.zbd-bocadillo-saltar {
    font-size: 15px;
    padding: 5px 6px;
}

.zbd-bocadillo-x:hover,
.zbd-bocadillo-saltar:hover,
.zbd-bocadillo-x:focus-visible,
.zbd-bocadillo-saltar:focus-visible {
    background: var(--zbd-superficie-2);
    color: var(--zbd-texto);
    outline: none;
}

.zbd-bocadillo h4 {
    margin: 10px 16px 6px;
    font-family: var(--zbd-fuente-titulos);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--zbd-texto);
}

.zbd-bocadillo-texto {
    margin: 0 16px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--zbd-texto-cuerpo);
    /* En un móvil apaisado o con un texto largo, el texto se desplaza y los botones siguen a
       la vista (en la caja no: la flecha, que sobresale, quedaría cortada). */
    max-height: calc(100vh - 180px - var(--zbd-abajo, 0px));
    overflow-y: auto;
}

.zbd-bocadillo-texto p {
    margin: 0 0 8px;
}

.zbd-bocadillo-texto ul,
.zbd-bocadillo-texto ol {
    margin: 0 0 8px;
    padding-left: 18px;
}

.zbd-bocadillo-texto b,
.zbd-bocadillo-texto strong {
    color: var(--zbd-texto);
}

.zbd-bocadillo-texto .zbd-valor {
    display: block;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--zbd-ok-suave);
    color: var(--zbd-texto);
    font-size: 13px;
}

.zbd-bocadillo-texto .zbd-valor::before {
    content: "\2605  ";
    color: var(--zbd-ok);
}

.zbd-bocadillo-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px 14px;
}

.zbd-bocadillo-botones {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.zbd-progreso {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    max-width: 150px;
}

.zbd-progreso span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--zbd-borde);
}

.zbd-progreso span.zbd-hecho {
    background: var(--zbd-acento);
}

.zbd-bocadillo-pie .zbd-boton {
    padding: 7px 13px;
    font-size: 13px;
    border-radius: 9px;
}

/* Paso sin elemento (centrado en la pantalla). */
.zbd-bocadillo.zbd-centrado {
    width: 440px;
}

/* Entre dos pasos, si el siguiente tarda en aparecer: «un momento», sin botones. */
.zbd-bocadillo.zbd-esperando {
    width: 320px;
}

.zbd-bocadillo.zbd-esperando .zbd-bocadillo-texto {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 16px 16px;
    color: var(--zbd-texto-suave);
}

/* --------------------------------------------------------------------------
   Avisos de acción simulada (abajo a la derecha; por encima del botón «subir»
   del tema, que va en la esquina).
   -------------------------------------------------------------------------- */
.zbd-avisos {
    position: fixed;
    right: 18px;
    bottom: calc(76px + var(--zbd-abajo, 0px));
    z-index: 2003;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 370px;
    max-width: calc(100vw - 36px);
    pointer-events: none;
}

@media (max-width: 767px) {
    .zbd-avisos {
        right: 10px;
        left: 10px;
        width: auto;
        max-width: none;
        bottom: calc(66px + var(--zbd-abajo, 0px));
        bottom: calc(66px + env(safe-area-inset-bottom, 0px) + var(--zbd-abajo, 0px));
    }
}

.zbd-aviso {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 10px 12px 14px;
    border-radius: 14px;
    background: var(--zbd-tinta);
    color: #f1f2f7;
    box-shadow: var(--zbd-sombra);
    font-family: var(--zbd-fuente);
    font-size: 13.5px;
    line-height: 1.45;
    pointer-events: auto;
    animation: zbdEntraAviso .3s cubic-bezier(.2, .8, .2, 1);
}

.zbd-aviso > i {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--zbd-acento);
    color: #fff;
    font-size: 15px;
}

.zbd-aviso-cuerpo {
    flex: 1 1 auto;
    min-width: 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.zbd-aviso strong {
    display: block;
    color: #ffb37d;
    font-family: var(--zbd-fuente-nav);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.zbd-aviso-x {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .6);
    font-size: 18px;
    line-height: 1;
    padding: 2px 4px;
    cursor: pointer;
}

.zbd-aviso-x:hover,
.zbd-aviso-x:focus-visible {
    color: #fff;
    outline: none;
}

.zbd-aviso.zbd-saliendo {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity .3s ease, transform .3s ease;
}

/* Con la barra de impresión masiva de «Envíos realizados» a la vista (#printBar: fija abajo,
   a todo el ancho, z-index 1055), el panel y los avisos suben por encima de ella: si no, el
   panel tapa «N etiquetas seleccionadas» y sus botones, justo lo que enseña la visita. Va
   aquí, después de las reglas de móvil del panel y de los avisos, para ganarles. */
body:has(#printBar:not(.d-none)) .zbd-dock {
    bottom: calc(70px + var(--zbd-abajo, 0px));
}

body:has(#printBar:not(.d-none)) .zbd-avisos {
    bottom: calc(128px + var(--zbd-abajo, 0px));
}

@media (max-width: 767px) {
    body:has(#printBar:not(.d-none)) .zbd-dock {
        bottom: calc(62px + env(safe-area-inset-bottom, 0px) + var(--zbd-abajo, 0px));
    }
    body:has(#printBar:not(.d-none)) .zbd-avisos {
        bottom: calc(118px + env(safe-area-inset-bottom, 0px) + var(--zbd-abajo, 0px));
    }
}

/* Durante la visita, nada de la capa tapa el paso (zbDemo.js, apartarDeLaVisita): el panel se
   aparta si pisa el elemento resaltado o el bocadillo, y los avisos suben arriba a la derecha
   si el paso está en su esquina. */
.zbd-dock.zbd-dock-apartado {
    opacity: 0;
    pointer-events: none;
}

.zbd-avisos.zbd-avisos-arriba {
    top: 70px;
    bottom: auto !important;
}

/* El banner de cookies (z-index 99999) taparía lo que la visita enseña abajo (p. ej. la barra
   de impresión masiva, fija abajo con z-index 1055): mientras dura la visita queda bajo el
   velo, a la vista y se puede pulsar igual. Al cerrarla, vuelve encima de todo. */
body.zbd-en-visita #freeprivacypolicy-com---nb {
    z-index: 1000 !important;
}

/* Marca de "punto interesante" (p. ej. el botón «Visita guiada» tras la bienvenida). */
.zbd-latido {
    position: relative;
}

.zbd-latido::before {
    content: "";
    position: absolute;
    top: -3px;
    right: -3px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--zbd-acento);
    animation: zbdLatidoAcento 1.8s infinite;
    pointer-events: none;
}

@keyframes zbdLatidoAcento {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 102, 3, .7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(239, 102, 3, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(239, 102, 3, 0);
    }
}

@keyframes zbdAparece {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes zbdSube {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.98);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes zbdEntraAviso {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   /demo/fuera (fueraDemo.jsp): «Esto en tu cuenta real…»
   -------------------------------------------------------------------------- */
.zbd-fuera {
    padding: 40px 0 56px;
}

.zbd-fuera-caja {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--zbd-borde);
    box-shadow: 0 18px 48px rgba(22, 23, 33, .08);
    color: var(--zbd-texto-cuerpo);
}

.zbd-fuera-icono {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    background: var(--zbd-acento-suave);
    color: var(--zbd-acento);
    font-size: 28px;
}

.zbd-fuera-caja h2 {
    margin: 0 0 10px;
    font-family: var(--zbd-fuente-titulos);
    font-size: 24px;
    font-weight: 700;
    color: var(--zbd-texto);
}

.zbd-fuera-que {
    font-size: 17px;
    line-height: 1.55;
    color: var(--zbd-texto);
}

.zbd-fuera-ventaja {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 16px 0 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--zbd-ok-suave);
    font-size: 14.5px;
}

.zbd-fuera-ventaja i {
    color: var(--zbd-ok);
    font-size: 17px;
    line-height: 1.35;
}

.zbd-fuera-ruta {
    margin: 14px 0 0;
    color: var(--zbd-texto-suave);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    word-break: break-all;
}

.zbd-fuera-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.zbd-fuera-demo {
    margin: 18px 0 0;
    color: var(--zbd-texto-suave);
    font-size: 13px;
}

@media (max-width: 575px) {
    .zbd-fuera {
        padding: 24px 0 40px;
    }
    .zbd-fuera-caja {
        padding: 22px 18px;
        border-radius: 16px;
    }
    .zbd-fuera-caja h2 {
        font-size: 20px;
    }
    .zbd-fuera-que {
        font-size: 16px;
    }
    .zbd-fuera-acciones .zbd-boton {
        flex: 1 1 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .zbd-foco,
    .zbd-bocadillo,
    .zbd-tarjeta,
    .zbd-velo,
    .zbd-aviso,
    .zbd-dock,
    .zbd-indice-item {
        animation: none !important;
        transition: none !important;
    }
    .zbd-dock-marca .zbd-punto,
    .zbd-latido::before {
        animation: none !important;
    }
}

/* Al imprimir (etiquetas, manifiestos), la capa no sale. */
@media print {
    .zbd-dock,
    .zbd-avisos,
    .zbd-velo,
    .zbd-foco,
    .zbd-bocadillo {
        display: none !important;
    }
}

/* Durante una visita: el botón «subir» del tema (abajo a la derecha) pisaba el «Siguiente» del
   bocadillo en el móvil, y los avisos (2003) podían tapar el bocadillo (2002): van debajo. */
body.zbd-en-visita .scroll-top,
body.zbd-en-visita #scroll-top {
    display: none !important;
}

body.zbd-en-visita .zbd-avisos {
    z-index: 2000;
}