/* =============================================================================
   componentes/campania.css — Tema de color de la campaña y su franja con cuenta atrás
   -----------------------------------------------------------------------------
   TEMA: la campaña elige uno (backoffice → Campañas → Aspecto) y layout.php pone en el
   <body> las clases "ss-tema ss-tema-{tema}" (App\Support\Campania::clasesBody). Cada tema
   solo define colores; las reglas de abajo los aplican a la cabecera (logo, buscador,
   cuenta, carrito), al menú de categorías y a la franja.

   Hace falta porque el styles.css de cada campaña se escribió para el HTML del ASP
   (#seccion_home, #nav-principal…) y en web/ solo le llega el fondo del <body>: en Black
   Friday el menú quedaba en negro sobre la foto oscura (24-10-2026).

   Para un tema nuevo: un bloque body.ss-tema-{nombre} con sus variables y añadir el nombre
   a Campania::TEMAS (web/) y a la lista del backoffice.

   FRANJA (componentes/_campania-franja.php): texto + cuenta atrás + botón, bajo la
   cabecera. Sin tema, va en negro y blanco.
   ============================================================================= */

/* ---------- TEMAS: solo colores ----------
   Con la paleta del rediseño de web/ (24-10-2026): carmín corporativo #c10049, azul #1a2b6d,
   los oscuros de la web (#14171b, #212529) y tonos apagados, nada de colores puros.
   --ss-tema-logo: filtro del logo (blanco sobre fondos oscuros; "none" = el de siempre).
   Si se cambian, cambiar también las muestras del backoffice (backoffice/css/ajustes.css). */
body.ss-tema-black-friday {
   --ss-tema-cab-fondo: #14171b;
   --ss-tema-cab-texto: #fff;
   --ss-tema-menu-fondo: #1d2127;
   --ss-tema-menu-texto: rgba(255, 255, 255, .82);
   --ss-tema-acento: #e38cad;
   --ss-tema-franja-fondo: #c10049;
   --ss-tema-franja-texto: #fff;
   --ss-tema-logo: brightness(0) invert(1);
}
body.ss-tema-red-monday {
   --ss-tema-cab-fondo: #7d0a32;
   --ss-tema-cab-texto: #fff;
   --ss-tema-menu-fondo: #680a2b;
   --ss-tema-menu-texto: rgba(255, 255, 255, .85);
   --ss-tema-acento: #f2c4d2;
   --ss-tema-franja-fondo: #14171b;
   --ss-tema-franja-texto: #fff;
   --ss-tema-logo: brightness(0) invert(1);
}
body.ss-tema-halloween {
   --ss-tema-cab-fondo: #1f1b18;
   --ss-tema-cab-texto: #fff;
   --ss-tema-menu-fondo: #2a2420;
   --ss-tema-menu-texto: #e3a76f;
   --ss-tema-acento: #f3cfa6;
   --ss-tema-franja-fondo: #b5652a;
   --ss-tema-franja-texto: #fff;
   --ss-tema-logo: brightness(0) invert(1);
}
body.ss-tema-navidad {
   --ss-tema-cab-fondo: #5a1426;
   --ss-tema-cab-texto: #fff;
   --ss-tema-menu-fondo: #481020;
   --ss-tema-menu-texto: #f1e4cb;
   --ss-tema-acento: #d8b878;
   --ss-tema-franja-fondo: #24493a;
   --ss-tema-franja-texto: #fff;
   --ss-tema-logo: brightness(0) invert(1);
}
body.ss-tema-rebajas {
   --ss-tema-cab-fondo: #fbf3dc;
   --ss-tema-cab-texto: #212529;
   --ss-tema-menu-fondo: #f5e8c2;
   --ss-tema-menu-texto: #212529;
   --ss-tema-acento: #c10049;
   --ss-tema-franja-fondo: #c10049;
   --ss-tema-franja-texto: #fff;
   --ss-tema-logo: none;
}
body.ss-tema-verano {
   --ss-tema-cab-fondo: #1a2b6d;
   --ss-tema-cab-texto: #fff;
   --ss-tema-menu-fondo: #22377f;
   --ss-tema-menu-texto: rgba(255, 255, 255, .85);
   --ss-tema-acento: #a9d8e8;
   --ss-tema-franja-fondo: #f0c75e;
   --ss-tema-franja-texto: #1a2b6d;
   --ss-tema-logo: brightness(0) invert(1);
}

/* ---------- CABECERA ---------- */
/* Sin el mb-3 de siempre: con la cabecera de color, el hueco entre ella y la franja o el
   menú dejaba ver la foto de fondo de la campaña (24-10-2026). !important porque mb-3 lo es. */
body.ss-tema header {
   background: var(--ss-tema-cab-fondo);
   color: var(--ss-tema-cab-texto);
   border-bottom-color: transparent !important;
   margin-bottom: 0 !important;
}
body.ss-tema header .ss-logo-escritorio,
body.ss-tema header #header-logo {
   filter: var(--ss-tema-logo);
}
body.ss-tema header .nav-link,
body.ss-tema header .text-secondary,
body.ss-tema header .text-reset,
body.ss-tema header .btn-link {
   color: var(--ss-tema-cab-texto) !important;
}
body.ss-tema header .nav-link:hover,
body.ss-tema header .nav-link:focus {
   color: var(--ss-tema-acento) !important;
}
/* El .degradado-txt de custom-25.css pinta el degradado con mix-blend-mode sobre un fondo
   BLANCO: sobre la cabecera de color se veía la caja. Con tema, texto liso del tema. */
body.ss-tema header .degradado-txt {
   background: transparent;
   color: inherit;
   mix-blend-mode: normal;
}
body.ss-tema header .degradado-txt::before {
   display: none;
}

/* ---------- MENÚ DE CATEGORÍAS (escritorio) ---------- */
body.ss-tema #menu-principal {
   background: var(--ss-tema-menu-fondo);
}
body.ss-tema #menu-principal a {
   color: var(--ss-tema-menu-texto);
}
body.ss-tema #menu-principal a:hover,
body.ss-tema #menu-principal a:focus {
   color: var(--ss-tema-acento);
}

/* ---------- CONTENIDO SOBRE EL FONDO DE LA CAMPAÑA ----------
   El styles.css de la campaña suele poner una foto (oscura) de fondo al <body>, y todo lo que
   no tiene fondo propio la deja ver: los textos oscuros encima no se leían (los iconos de
   Ofertas / Novedades / Outlet / Especiales de la portada, 24-10-2026).
   - Portada: las secciones transparentes recuperan el fondo de la página DE LADO A LADO (el
     border-image con "fill" y 100vmax de salida lo extiende fuera del container sin tocar el
     HTML ni el tamaño de la sección). La foto se sigue viendo alrededor del slider, que no es
     una de ellas.
   - Resto de páginas: todo el contenido sobre el fondo de la página. */
body.ss-campania.ss-portada main > section:not([class*="bg-"]):not(.carousel) {
   border-image: conic-gradient(var(--bs-body-bg, #fff) 0 0) fill 0 / / 0 100vmax;
}
body.ss-campania:not(.ss-portada) main {
   background-color: var(--bs-body-bg, #fff);
}

/* ---------- FRANJA DE CAMPAÑA ---------- */
.ss-franja-campania {
   background: var(--ss-tema-franja-fondo, #111);
   color: var(--ss-tema-franja-texto, #fff);
}
.ss-franja-campania__dentro {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: .4rem 1.25rem;
   padding-top: .5rem;
   padding-bottom: .5rem;
   text-align: center;
}
.ss-franja-campania__texto {
   font-weight: 800;
   letter-spacing: .04em;
   text-transform: uppercase;
}
.ss-cuenta {
   display: inline-flex;
   align-items: baseline;
   gap: .2rem .45rem;
   font-variant-numeric: tabular-nums;
}
.ss-cuenta__rotulo {
   font-size: .8rem;
   opacity: .85;
   margin-right: .15rem;
}
.ss-cuenta__bloque {
   white-space: nowrap;
}
.ss-cuenta__num {
   font-size: 1.15rem;
   font-weight: 800;
}
.ss-cuenta__ud {
   margin-left: .1rem;
   font-size: .75rem;
   opacity: .8;
}
.ss-franja-campania__boton {
   display: inline-flex;
   align-items: center;
   gap: .4rem;
   padding: .2rem .9rem;
   border: 1px solid currentColor;
   border-radius: 50rem;
   color: inherit;
   font-size: .875rem;
   font-weight: 600;
   text-decoration: none;
   transition: background-color .15s ease, color .15s ease;
}
.ss-franja-campania__boton:hover,
.ss-franja-campania__boton:focus {
   background: var(--ss-tema-franja-texto, #fff);
   color: var(--ss-tema-franja-fondo, #111);
}
@media (max-width: 575.98px) {
   .ss-franja-campania__dentro { gap: .3rem .8rem; font-size: .9rem; }
   .ss-cuenta__num { font-size: 1rem; }
}