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

/* ==========================================================================
   /productos multitienda: cabecera (título + botonera de tiendas) y lo que
   depende de la tienda elegida. JS: assets/js/productos/productosTiendas.js.

   Mismo lenguaje que la barra compacta (barraCompacta.css): Poppins, el color
   de "activo" de la web, grises suaves, radios de 8-12px. Variables --zbp-*,
   que el modo noche solo redefine.

   El "activo" es el color de Tiendas (29/10/2026): las fichas --zbw-* de
   assets/css/colorWeb.css (head.jsp), como la barra. --zbp-activo es el de
   texto, borde y foco (el dorado; de noche, el amarillo); el botón relleno
   lleva la marca con su letra (amarillo con letra oscura). Sin fichas, el
   naranja de antes.

   Pensado para la barra compacta, que es la que pide /productos. Con "La de
   siempre" (Pantalla) la cabecera no se queda fija y el título va sobre la
   franja oscura: ver el bloque del final.
   ========================================================================== */

.main {
    --zbp-fondo: #ffffff;
    --zbp-borde: #e8e8eb;
    --zbp-texto: #3a3a40;
    --zbp-titulo: #1d1d1f;
    --zbp-suave: #8a8a92;
    --zbp-boton: #f7f7f8;
    --zbp-hover: #f0f0f3;
    --zbp-activo: var(--zbw-texto, #e8590c);
    --zbp-activo-fondo: var(--zbw-fondo, #fff1e8);
    --zbp-ok: #16a34a;
    --zbp-aviso: #f59e0b;
    /* Familias de Amazon en la tabla de productos (bloque de cada familia, al final) */
    --zbp-familia: #5f7fb4;
    --zbp-familia-cabecera: #edf1f8;
    --zbp-familia-cabecera-hover: #e2e8f3;
    --zbp-familia-fondo: #f8fafd;
}
[data-bs-theme="dark"] .main {
    --zbp-fondo: #242733;
    --zbp-borde: #3a3f51;
    --zbp-texto: #d5d8e1;
    --zbp-titulo: #f2f3f7;
    --zbp-suave: #9aa0b1;
    --zbp-boton: #2d3140;
    --zbp-hover: #353a4b;
    --zbp-activo: var(--zbw-noche, #ff8a3d);
    --zbp-activo-fondo: var(--zbw-noche-fondo, rgba(244, 122, 32, .16));
    --zbp-familia: #7f9fd3;
    --zbp-familia-cabecera: rgba(127, 159, 211, .16);
    --zbp-familia-cabecera-hover: rgba(127, 159, 211, .24);
    --zbp-familia-fondo: rgba(127, 159, 211, .05);
}

/* Mientras carga el JS: el script en línea de la JSP ya sabe qué tienda toca
   y lo deja en <html data-zbp-canal>. Sin esto, con otra tienda recordada,
   el panel de Amazon asomaba un instante. productosTiendas.js lo quita. */
html[data-zbp-canal]:not([data-zbp-canal="amazon"]) #zbpContenidoAmazon {
    display: none !important;
}
html[data-zbp-canal]:not([data-zbp-canal="temu"]) #zbpContenidoTemu {
    display: none !important;
}

body {
    /* Sin "scroll anchoring": al plegar o abrir la botonera a media página, el
       navegador movía el scroll para que la tabla no se moviera, y ese
       movimiento contaba como scroll de la persona. Aquí la cabecera tiene
       que empujar la tabla. */
    overflow-anchor: none;
}

/* --------------------------------------------------------------------------
   Cabecera: tira del título + botonera

   Fijas juntas (sticky top 0): la tira ya trae 56px de relleno arriba para la
   barra fija, así que al pegarse ese relleno queda detrás de la barra y lo que
   se ve es justo el título.
   -------------------------------------------------------------------------- */
#header.zb-barra ~ .main .zbp-cabecera-fija {
    position: sticky;
    top: 0;
    z-index: 900;
}

/* Título, contexto (plegada) y botón de plegar al final. Más específico que
   la regla genérica de barraCompacta.css, que alinea por la línea base. */
#header.zb-barra ~ .main .page-title > .container.zbp-titulo {
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
    min-height: 30px;
}
#header.zb-barra ~ .main .zbp-cabecera-fija:not(.zbp-plegada) .page-title {
    /* Abierta, tira y botonera son un solo bloque: sin raya entre medias. */
    border-bottom-color: transparent;
}
.zbp-titulo h1 {
    flex: none;
}

.zbp-contexto {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: Poppins, system-ui, sans-serif;
    font-size: 13.5px;
    color: var(--zbp-texto);
    white-space: nowrap;
    overflow: hidden;
}
.zbp-contexto[hidden] {
    display: none;
}
.zbp-contexto .zbp-sep {
    flex: none;
    font-size: 11px;
    color: var(--zbp-suave);
}
.zbp-contexto .zbp-logo {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    font-size: 11px;
}
.zbp-contexto .zbp-logo i {
    font-size: 11px;
}
.zbp-contexto-canal {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    color: var(--zbp-titulo);
}
.zbp-contexto-dato {
    color: var(--zbp-suave);
    overflow: hidden;
    text-overflow: ellipsis;
}
.zbp-contexto-dato.zbp-aviso {
    color: #b45309;
}
[data-bs-theme="dark"] .zbp-contexto-dato.zbp-aviso {
    color: #fbbf24;
}

.zbp-plegar {
    flex: none;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--zbp-borde);
    border-radius: 8px;
    background: transparent;
    color: var(--zbp-texto);
    font-family: Poppins, system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}
.zbp-plegar:hover {
    background: var(--zbp-hover);
    color: var(--zbp-titulo);
}
.zbp-plegar:focus-visible {
    outline: 2px solid var(--zbp-activo);
    outline-offset: 2px;
}
.zbp-plegar i {
    font-size: 12px;
    transition: transform .2s ease;
}
.zbp-plegada .zbp-plegar i {
    transform: rotate(180deg);
}

/* Plegado suave: la fila del grid pasa de 1fr a 0fr. Al acabar se esconde
   (visibility) para que los botones plegados no reciban el foco con Tab. */
.zbp-tiendas-marco {
    display: grid;
    grid-template-rows: 1fr;
    background: var(--zbp-fondo);
    border-bottom: 1px solid var(--zbp-borde);
    transition: grid-template-rows .2s ease;
}
.zbp-plegada .zbp-tiendas-marco {
    grid-template-rows: 0fr;
    border-bottom-color: transparent;
}
.zbp-tiendas {
    min-height: 0;
    overflow: hidden;
    visibility: visible;
    transition: visibility 0s linear 0s;
}
.zbp-plegada .zbp-tiendas {
    visibility: hidden;
    transition: visibility 0s linear .2s;
}
@media (prefers-reduced-motion: reduce) {
    .zbp-tiendas-marco,
    .zbp-tiendas,
    .zbp-plegar i {
        transition: none;
    }
}
.zbp-sin-transicion .zbp-tiendas-marco,
.zbp-sin-transicion .zbp-tiendas,
.zbp-sin-transicion .zbp-plegar i {
    transition: none !important;
}

/* --------------------------------------------------------------------------
   Botonera de tiendas
   -------------------------------------------------------------------------- */
.zbp-tiendas-dentro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 28px;
    padding: 2px 24px 12px;
    font-family: Poppins, system-ui, sans-serif;
}

/* Los grupos pueden encogerse y partir sus botones en varias líneas: si no,
   con muchas tiendas la última se salía por la derecha. Sin raya entre
   grupos: cuando el segundo baja de línea quedaba colgando a la izquierda. */
.zbp-grupo {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.zbp-grupo-titulo {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--zbp-suave);
    padding-left: 2px;
}
.zbp-grupo-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.zbp-tienda {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    /* Sin segunda línea casi siempre (el detalle va junto al título al
       plegar): con 168px, "Temu" quedaba con medio botón vacío. */
    min-width: 140px;
    max-width: 240px;
    padding: 7px 16px 7px 7px;
    border: 1px solid var(--zbp-borde);
    border-radius: 10px;
    background: var(--zbp-boton);
    color: var(--zbp-texto);
    text-align: left;
    cursor: pointer;
    transition: background .12s, border-color .12s, box-shadow .12s;
}
.zbp-tienda:hover {
    background: var(--zbp-hover);
}
.zbp-tienda:focus-visible {
    outline: 2px solid var(--zbp-activo);
    outline-offset: 2px;
}
.zbp-tienda[aria-selected="true"] {
    background: var(--zbp-fondo);
    border-color: var(--zbp-activo);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--zbp-activo), transparent 82%);
}
.zbp-tienda[aria-selected="true"] .zbp-tienda-nombre {
    color: var(--zbp-activo);
}

.zbp-logo {
    position: relative;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}
.zbp-logo i {
    font-size: 17px;
}
/* Punto de estado de la conexión, en la esquina del logo. */
.zbp-estado {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 11px;
    height: 11px;
    border-radius: 999px;
    border: 2px solid var(--zbp-boton);
    background: var(--zbp-ok);
}
.zbp-tienda[aria-selected="true"] .zbp-estado {
    border-color: var(--zbp-fondo);
}
.zbp-estado.zbp-aviso {
    background: var(--zbp-aviso);
}

.zbp-tienda-texto {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.zbp-tienda-nombre {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--zbp-titulo);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zbp-tienda-meta {
    font-size: 11.5px;
    color: var(--zbp-suave);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zbp-tienda-meta.zbp-aviso {
    color: #b45309;
}
[data-bs-theme="dark"] .zbp-tienda-meta.zbp-aviso {
    color: #fbbf24;
}

/* Una sola tienda: no hay nada que elegir, el botón se queda en rótulo. */
.zbp-tiendas.zbp-sola .zbp-tienda {
    cursor: default;
    box-shadow: none;
    border-color: var(--zbp-borde);
}
.zbp-tiendas.zbp-sola .zbp-tienda .zbp-tienda-nombre {
    color: var(--zbp-titulo);
}

/* "+" para conectar otra tienda: cuadrado del alto de una tienda. El texto va
   en el tooltip y en aria-label (con texto se quedaba solo en otra línea). */
.zbp-anadir-hueco {
    flex: none;
    position: relative;
    align-self: flex-end;
}
.zbp-anadir {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    padding: 0;
    border: 1px dashed var(--zbp-borde);
    border-radius: 10px;
    background: transparent;
    color: var(--zbp-suave);
    cursor: pointer;
}
.zbp-anadir:hover,
.zbp-anadir[aria-expanded="true"] {
    color: var(--zbp-activo);
    border-color: var(--zbp-activo);
    background: var(--zbp-activo-fondo);
}
.zbp-anadir i {
    font-size: 18px;
}

/* Menú de "Conectar tienda": fuera de la botonera (que recorta) y colocado
   con JS debajo del botón. Hereda las variables de body, no de .main. */
.zbp-menu {
    --zbp-fondo: #ffffff;
    --zbp-borde: #e8e8eb;
    --zbp-texto: #3a3a40;
    --zbp-titulo: #1d1d1f;
    --zbp-suave: #8a8a92;
    --zbp-hover: #f0f0f3;
    --zbp-activo: var(--zbw-texto, #e8590c);
    position: fixed;
    z-index: 1000;
    width: 290px;
    padding: 8px;
    border: 1px solid var(--zbp-borde);
    border-radius: 12px;
    background: var(--zbp-fondo);
    box-shadow: 0 12px 32px rgba(20, 20, 30, .14);
    font-family: Poppins, system-ui, sans-serif;
}
[data-bs-theme="dark"] .zbp-menu {
    --zbp-fondo: #242733;
    --zbp-borde: #3a3f51;
    --zbp-texto: #d5d8e1;
    --zbp-titulo: #f2f3f7;
    --zbp-suave: #9aa0b1;
    --zbp-hover: #353a4b;
    --zbp-activo: var(--zbw-noche, #ff8a3d);
}
.zbp-menu[hidden] {
    display: none;
}
.zbp-menu-titulo {
    padding: 4px 8px 6px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--zbp-suave);
}
.zbp-menu a,
.zbp-menu span.zbp-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 8px;
    color: var(--zbp-texto);
    font-size: 13px;
    text-decoration: none;
}
.zbp-menu a:hover {
    background: var(--zbp-hover);
    color: var(--zbp-titulo);
}
.zbp-menu .zbp-logo {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    font-size: 12px;
}
.zbp-menu .zbp-logo i {
    font-size: 13px;
}
.zbp-menu-accion {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--zbp-activo);
    font-weight: 500;
}
.zbp-menu span.zbp-menu-item {
    opacity: .55;
}
.zbp-menu span.zbp-menu-item .zbp-menu-accion {
    color: var(--zbp-suave);
}

/* --------------------------------------------------------------------------
   Contenido de las tiendas que aún no tienen panel, y cuenta sin tiendas
   -------------------------------------------------------------------------- */

/* Los paneles de Amazon y Temu son <section> del tema, con 60px de relleno
   arriba: pensado para ir debajo de la franja de foto, no pegado a la
   botonera. */
#zbpContenidoAmazon,
#zbpContenidoTemu {
    padding-top: 20px;
}
.zbp-contenido {
    padding: 20px 24px 40px;
    font-family: Poppins, system-ui, sans-serif;
    color: var(--zbp-texto);
    background: transparent;
    overflow: visible;
}
.zbp-hueco {
    border: 1.5px dashed var(--zbp-borde);
    border-radius: 12px;
    padding: 40px 22px;
    background: var(--zbp-fondo);
    text-align: center;
}
.zbp-hueco > i {
    display: block;
    font-size: 34px;
    color: var(--zbp-suave);
    opacity: .6;
    margin-bottom: 10px;
}
.zbp-hueco h2 {
    font-family: Poppins, system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--zbp-titulo);
}
.zbp-hueco p {
    font-size: 13px;
    color: var(--zbp-suave);
    max-width: 440px;
    margin: 0 auto;
}
.zbp-hueco-boton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    margin-top: 16px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    /* Relleno: la marca de la web con su letra (el amarillo de Tiendas lleva
       letra oscura); sin fichas, el naranja con letra blanca de antes. */
    background: var(--zbw-marca, var(--zbp-activo));
    color: var(--zbw-sobre-marca, #ffffff);
    font-family: Poppins, system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
}
.zbp-hueco-boton:hover {
    filter: brightness(.95);
}

@media (max-width: 575.98px) {
    .zbp-tiendas-dentro {
        padding: 2px 12px 10px;
    }
    .zbp-contenido {
        padding: 14px 12px 32px;
    }
    .zbp-tienda {
        min-width: 0;
    }
    /* En móvil el contexto no cabe junto al título: solo la tienda. */
    .zbp-contexto .zbp-contexto-dato,
    .zbp-contexto .zbp-sep-dato {
        display: none;
    }
    .zbp-plegar-texto {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Con la barra "de siempre" (Pantalla → La de siempre)

   El título va sobre la franja oscura con foto y la cabecera no se queda fija
   (la franja mide más de 150px). Se centra todo y se pasa a claro.
   -------------------------------------------------------------------------- */
#header:not(.zb-barra) ~ .main .zbp-titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 16px;
}
#header:not(.zb-barra) ~ .main .zbp-titulo h1 {
    margin: 0;
}
#header:not(.zb-barra) ~ .main .zbp-contexto,
#header:not(.zb-barra) ~ .main .zbp-contexto-canal,
#header:not(.zb-barra) ~ .main .zbp-contexto .zbp-sep,
#header:not(.zb-barra) ~ .main .zbp-contexto-dato {
    color: #ffffff;
}
#header:not(.zb-barra) ~ .main .zbp-plegar {
    margin-left: 0;
    color: #ffffff;
    border-color: rgba(255, 255, 255, .5);
}
#header:not(.zb-barra) ~ .main .zbp-plegar:hover {
    background: rgba(255, 255, 255, .12);
}
#header:not(.zb-barra) ~ .main .zbp-tiendas-dentro {
    padding-top: 12px;
}

/* ── «Crear en PrestaShop»: casilla en la primera columna (productos Amazon) ──
   Grande y con borde oscuro: se ve igual en las filas blancas y en las grises. */
.col-chk-ps {
    width: 40px;
    text-align: center;
    vertical-align: middle;
}
.chk-ps {
    width: 20px;
    height: 20px;
    margin: 0;
    vertical-align: middle;
    accent-color: #0d6efd;
    cursor: pointer;
}
.chk-ps:disabled {
    opacity: .3;
    cursor: not-allowed;
}
.chk-ps:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}
.table tbody tr.fila-marcada-ps > td {
    background-color: #e8f0fe;
    --bs-table-accent-bg: #e8f0fe;
    --bs-table-bg-state: #e8f0fe;
}

/* ── Familias de Amazon (padre e hijos) en la tabla de productos ──
   Cada familia se lee como un bloque en forma de corchete (segunda vuelta,
   22/10/2026: no se veía dónde acababan los hijos). No es un adorno: es la guía
   de agrupación, y por eso sobria (3 px y un azul apagado, --zbp-familia):
     - la cabecera (el padre, _htmlCabeceraFamilia de productosAmazonUI.js) con
       fondo propio; pliega y despliega la familia (chevron, .fam-plegar);
     - una raya a la izquierda, seguida, en la cabecera, en las variantes
       (.fila-hija) y en la fila «todos los marketplaces» que se abra debajo de
       una variante (.fila-expandida.fam-dentro);
     - y otra por debajo en la fila que cierra el bloque (.fam-cierre: la última
       que se ve; plegada o sin variantes, la cabecera). La pone el JS.
   La raya de la izquierda va en la primera celda que se ve: la casilla de
   PrestaShop (td.col-chk-ps) si sale o, si no, la siguiente (en «solo para
   ver» la casilla no sale nunca). Es una sombra interior y no un borde: con
   border-collapse medio borde caería fuera de la tabla y lo recortaría
   .table-responsive. La segunda sombra es la de Bootstrap 5.3 (rayado, hover y
   marcada), que la primera no puede borrar. Colores --zbp-*: el modo noche
   los cambia arriba. */
#tablaProductos tr.fila-familia > td {
    --bs-table-bg-state: var(--zbp-familia-cabecera);
    --bs-table-color-state: var(--zbp-titulo);
    font-size: .85rem;
    cursor: pointer;
}
#tablaProductos tr.fila-familia:hover > td {
    --bs-table-bg-state: var(--zbp-familia-cabecera-hover);
}
#tablaProductos tr.fila-familia > td.celda-chk-familia {
    cursor: default;
}
#tablaProductos tr.fila-familia .fam-icono {
    color: var(--zbp-familia);
}
#tablaProductos tr.fila-familia .fam-meta {
    color: var(--zbp-suave);
    font-size: .78rem;
}
#tablaProductos .fam-plegar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    margin-right: .35rem;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--zbp-texto);
    vertical-align: middle;
}
#tablaProductos .fam-plegar:hover {
    background: var(--zbp-fondo);
}
#tablaProductos .fam-plegar:focus-visible {
    outline: 2px solid var(--zbp-familia);
    outline-offset: 1px;
}
#tablaProductos .fam-plegar i {
    display: inline-block;
    transition: transform .15s ease;
}
#tablaProductos tr.fam-plegada .fam-plegar i {
    transform: rotate(-90deg);
}
#tablaProductos .fam-plegar-vacio {
    visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
    #tablaProductos .fam-plegar i {
        transition: none;
    }
}
#tablaProductos tr.fila-hija > td {
    --bs-table-bg: var(--zbp-familia-fondo);
}
#tablaProductos tr.fila-hija > td.text-start {
    padding-left: 1.5rem;
}
body:not(.ampr-solo-ver) #tablaProductos tr.fila-familia > td.col-chk-ps:not(.d-none),
#tablaProductos tr.fila-familia > td.col-chk-ps.d-none + td,
.ampr-solo-ver #tablaProductos tr.fila-familia > td.col-chk-ps + td,
body:not(.ampr-solo-ver) #tablaProductos tr.fila-hija > td.col-chk-ps:not(.d-none),
#tablaProductos tr.fila-hija > td.col-chk-ps.d-none + td,
.ampr-solo-ver #tablaProductos tr.fila-hija > td.col-chk-ps + td,
#tablaProductos tr.fila-expandida.fam-dentro > td {
    box-shadow: inset 3px 0 0 var(--zbp-familia),
        inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}
#tablaProductos tr.fam-cierre > td {
    border-bottom: 2px solid var(--zbp-familia);
}