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

/* ==========================================================================
   El color de resalto de la web en el tema (29/10/2026).

   El tema (main.css, plantilla Selecao) lo cargan todas las webs desde
   Shipping (https://shipping.z-bombilla.com/assets/css/main.css) y no se
   toca: pinta con el naranja de Shipping (--accent-color). Las webs con su
   propio color (hoy Tiendas y Finanzas) cargan, en su head.jsp y detrás de
   main.css, primero sus fichas (--zbw-*, en su assets/css/colorWeb.css) y
   después este fichero, que pasa el tema a esas fichas. Shipping y Temu no
   cargan ninguno de los dos y se quedan como están. La barra compacta y la
   sección «Pantalla» leen las fichas por su cuenta (barraCompacta.css y
   pantallaAjustes.css).

   La idea: --accent-color pasa a ser el color de TEXTO de la web (el que da
   4,5:1 sobre blanco). Todo lo que el tema pinta como texto con el acento
   (enlaces, iconos de listas, el texto de .info-item…) queda legible sin
   tocar una sola regla, y lo que no se pisa aquí, si rellena con el acento,
   sale con el color de texto y letra blanca (también legible). Solo los
   rellenos que de verdad se usan en las webs pasan a la marca, con su letra
   (el amarillo de Tiendas no se lee nunca como letra sobre claro).

   Cada valor lleva de reserva lo de main.css, por si alguna página cargara
   este fichero sin las fichas. :root delante sube la especificidad por
   encima de la de main.css, se cargue donde se cargue.

   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, sincroniza y sube su ?v= en las
   páginas que lo cargan (los head.jsp de Tiendas y Finanzas).
   ========================================================================== */

/* Variables: el acento es el color de texto; la pastilla del menú de siempre,
   la marca (con su letra, más abajo); lo que se pasa por encima en los
   desplegables, el de texto. */
:root {
    --accent-color: var(--zbw-texto, #ef6603);
    --nav-hover-color: var(--zbw-marca, #ef6603);
    --nav-dropdown-hover-color: var(--zbw-texto, #ef6603);
}

/* Página de noche: el acento es el de oscuro y lo que rellena con él lleva
   letra oscura. */
:root[data-bs-theme="dark"] {
    --accent-color: var(--zbw-noche, #ef6603);
    --nav-dropdown-hover-color: var(--zbw-noche, #ef6603);
    --contrast-color: var(--zbw-sobre-noche, #ffffff);
}

/* Lo oscuro de una página clara (.page-title de siempre, el pie, las franjas
   de llamada): el color de texto de la web no se leería encima. */
:root .dark-background {
    --accent-color: var(--zbw-noche, #ef6603);
    --contrast-color: var(--zbw-sobre-noche, #ffffff);
}
/* ...salvo la franja del título con la compacta, que barraCompacta.css vuelve
   una tira clara en una página clara (sigue llevando .dark-background): sin
   esto, un enlace de esa tira saldría con el color de noche sobre blanco. */
:root:not([data-bs-theme="dark"]) #header.zb-barra ~ .main .page-title:where(:not(.zb-titulo-propio)),
:root:not([data-bs-theme="dark"]) #header.zb-barra ~ main .page-title:where(:not(.zb-titulo-propio)),
:root:not([data-bs-theme="dark"]) #header.zb-barra ~ .page-title:where(:not(.zb-titulo-propio)) {
    --accent-color: var(--zbw-texto, #ef6603);
    --contrast-color: #ffffff;
}

/* Menú de siempre (escritorio): la pastilla del enlace activo y del que tiene
   el ratón encima es la marca; su letra, la de la marca (el tema la deja en
   --nav-color, blanca). En los desplegables (fondo claro), el de texto: el
   tema usa ahí --nav-hover-color como letra. */
@media (min-width: 1200px) {
    :root .navmenu li:hover > a,
    :root .navmenu .active,
    :root .navmenu .active > a,
    :root .navmenu .active:focus {
        color: var(--zbw-sobre-marca, #ffffff);
    }
    :root .navmenu .dropdown ul a:hover,
    :root .navmenu .dropdown ul .active:hover,
    :root .navmenu .dropdown ul li:hover > a {
        color: var(--nav-dropdown-hover-color);
    }
}

/* Menú de siempre (móvil): el círculo de la flecha del activo. */
@media (max-width: 1199px) {
    :root .navmenu a i:hover,
    :root .navmenu a:focus i:hover,
    :root .navmenu .active i,
    :root .navmenu .active:focus i {
        background-color: var(--zbw-marca, var(--accent-color));
        color: var(--zbw-sobre-marca, var(--contrast-color));
    }
}

/* «Volver arriba» (footer.jsp de todas las webs). */
:root .scroll-top {
    background-color: var(--zbw-marca, var(--accent-color));
}
:root .scroll-top i,
:root .scroll-top:hover {
    color: var(--zbw-sobre-marca, var(--contrast-color));
}
:root .scroll-top:hover {
    background-color: color-mix(in srgb, var(--zbw-marca, var(--accent-color)), transparent 20%);
}

/* Botón de las franjas de llamada (.call-to-action .cta-btn: servicios de
   Tiendas, portada de Finanzas). */
:root .call-to-action .cta-btn {
    background: var(--zbw-marca, var(--accent-color));
    color: var(--zbw-sobre-marca, var(--contrast-color));
}
:root .call-to-action .cta-btn:hover {
    background: color-mix(in srgb, var(--zbw-marca, var(--accent-color)) 90%, white 15%);
}

/* «Leer más» (.about .read-more del tema): hoy no lo usa ninguna página de
   Tiendas ni de Finanzas (el «Consultar API» lleva su style= en línea). */
:root .about .read-more {
    background: var(--zbw-marca, var(--accent-color));
    color: var(--zbw-sobre-marca, var(--contrast-color));
}
:root .about .read-more:hover {
    background: color-mix(in srgb, var(--zbw-marca, var(--accent-color)), transparent 20%);
}

/* El botón de la portada (.hero .btn-get-started): solo rellena al pasar. */
:root .hero .btn-get-started:hover {
    background: var(--zbw-marca, var(--accent-color));
    color: var(--zbw-sobre-marca, var(--contrast-color));
}

/* Contacto (.contact: contacto.jsp de cada web). */
:root .contact .info-item:hover i {
    background: var(--zbw-marca, var(--accent-color));
    color: var(--zbw-sobre-marca, var(--contrast-color));
}
:root .contact .php-email-form button[type=submit] {
    background: var(--zbw-marca, var(--accent-color));
    color: var(--zbw-sobre-marca, var(--contrast-color));
}
:root .contact .php-email-form button[type=submit]:hover {
    background: color-mix(in srgb, var(--zbw-marca, var(--accent-color)), transparent 25%);
}

/* Pestañas de .features (servicios de Tiendas, WEB-INF/legales/servicios.jsp). */
:root .features .nav-link.active {
    background: var(--zbw-marca, var(--accent-color));
    border-color: var(--zbw-marca, var(--accent-color));
    color: var(--zbw-sobre-marca, var(--contrast-color));
}
:root .features .nav-link.active h4 {
    color: var(--zbw-sobre-marca, var(--contrast-color));
}