/*
 * Piel de campaña (Black Friday / Cyber Monday).
 * Solo actúa con la clase is-bf en <html>, que pone el script de head.tpl según la fecha.
 * Pasada la campaña: quitar el <link> y el script de head.tpl y borrar este fichero.
 * Paleta: casi negro + Acid Apple (#D4E585), la versión «alternativa» del manual de marca.
 */
html.is-bf {
    --bf-black: #0B0B0C;
    --bf-black-2: #1A1A1D;
    --bf-line: #2C2C30;
    --bf-accent: #D4E585;
    --bf-text: #FFFFFF;
    --bf-muted: #C9CBD1;
    --bf-on-dark: var(--bf-accent);   /* texto sobre fondo oscuro */
    --bf-on-accent: var(--bf-black);  /* texto sobre fondo de acento */
}

/* Barra deslizante */
html.is-bf .msg-header-banner {
    background: var(--bf-black);
    color: var(--bf-on-dark);
}
html.is-bf .msg-header-list li { font-weight: 600; }

/* Bloque de ofertas de la home */
html.is-bf .nexirhotproducts-cabecera,
html.is-bf #nexirhotproducts-cabecera { background-color: var(--bf-black) !important; }
html.is-bf #nexirhotproducts-cabecera,
html.is-bf #nexirhotproducts-cabecera p,
html.is-bf #nexirhotproducts-cabecera span { color: var(--bf-muted); }
html.is-bf #nexirhotproducts-cabecera h1,
html.is-bf #nexirhotproducts-cabecera h2,
html.is-bf #nexirhotproducts-cabecera h3,
html.is-bf #nexirhotproducts-cabecera .h2 { color: var(--bf-on-dark); }
html.is-bf #nexirhotproducts-cabecera .btn,
html.is-bf #nexirhotproducts-cabecera a.btn {
    background: var(--bf-accent);
    border-color: var(--bf-accent);
    color: var(--bf-on-accent);
}
html.is-bf .nexirhotproducts,
html.is-bf .nexirhotproducts-home,
html.is-bf .dbhotproducts,
html.is-bf .dbhotproducts-cabecera,
html.is-bf #dbhotproducts-cabecera { background-color: var(--bf-black) !important; }

/* Etiquetas de descuento */
html.is-bf .product-flags li.product-flag.discount-percentage,
html.is-bf .product-flags li.product-flag.discount-amount,
html.is-bf .product-flags li.product-flag.discount,
html.is-bf .discount_page,
html.is-bf .discount_mini {
    background-color: var(--bf-black) !important;
    color: var(--bf-on-dark) !important;
}

/* Banda previa al footer */
html.is-bf #footer .pre-footer { background: var(--bf-black); }

/* Encabezados de los filtros (Amazing Filter) */
html.is-bf .af_subtitle {
    background: var(--bf-black);
    color: var(--bf-text);
}
html.is-bf .af_subtitle.toggle-content:before { border-color: var(--bf-text); }
html.is-bf #af_form .af_subtitle_heading.afmobile {
    background-color: var(--bf-black);
    border-color: var(--bf-black);
}
html.is-bf #af_form .af_subtitle_heading.afmobile .af_subtitle,
html.is-bf #af_form .af_subtitle_heading.afmobile i { color: var(--bf-text); }
html.is-bf #af_form .af_subtitle_heading.afmobile .content_min_filter { color: var(--bf-on-dark); }

/* Franja de campaña con cuenta atrás (header.tpl) */
html.is-bf .nxr-bf-strip {
    display: block !important; /* gana al [hidden] de Bootstrap */
    background: var(--bf-accent);
    color: var(--bf-on-accent);
}
html.is-bf .nxr-bf-strip__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px 22px;
    min-height: 46px;
    padding: 6px 16px;
    color: var(--bf-on-accent);
    text-decoration: none;
}
html.is-bf .nxr-bf-strip__link:hover { color: var(--bf-on-accent); text-decoration: none; }
html.is-bf .nxr-bf-strip__title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
    background: var(--bf-black);
    color: var(--bf-on-dark);
    padding: 6px 10px;
    border-radius: 4px;
}
html.is-bf .nxr-bf-strip__claim { font-size: 18px; font-weight: 700; }
html.is-bf .nxr-bf-strip__timer { font-size: 14px; font-weight: 500; }
html.is-bf .nxr-bf-strip__timer strong {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
html.is-bf .nxr-bf-strip__cta {
    font-size: 14px;
    font-weight: 600;
    background: var(--bf-black);
    color: var(--bf-text);
    padding: 7px 16px;
    border-radius: 999px;
}
html.is-bf .nxr-bf-strip__link:hover .nxr-bf-strip__cta { color: var(--bf-on-dark); }
@media (max-width: 767px) {
    html.is-bf .nxr-bf-strip__link { gap: 4px 10px; min-height: 40px; flex-wrap: wrap; padding: 6px 10px; }
    html.is-bf .nxr-bf-strip__title { font-size: 15px; padding: 4px 8px; }
    html.is-bf .nxr-bf-strip__claim { font-size: 14px; }
    html.is-bf .nxr-bf-strip__timer { font-size: 12px; }
    html.is-bf .nxr-bf-strip__timer strong { font-size: 13px; }
    html.is-bf .nxr-bf-strip__cta { display: none; }
}

/* Cinta «Black Friday» encima del descuento en las fichas */
html.is-bf .product-flags .dbproductdiscount.discount-flags {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}
html.is-bf .product-flags .dbproductdiscount.discount-flags::before {
    content: "Black Friday";
    display: block;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--bf-accent);
    color: var(--bf-on-accent);
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}
/* La franja va dentro de #header, cuyos enlaces heredan el blanco de la cabecera */
html.is-bf #header .nxr-bf-strip__link,
html.is-bf #header .nxr-bf-strip__link:hover,
html.is-bf #header .nxr-bf-strip__claim,
html.is-bf #header .nxr-bf-strip__timer,
html.is-bf #header .nxr-bf-strip__timer span,
html.is-bf #header .nxr-bf-strip__timer strong { color: var(--bf-on-accent); }
html.is-bf #header .nxr-bf-strip__title { color: var(--bf-on-dark); }
html.is-bf #header .nxr-bf-strip__cta { color: var(--bf-text); }
html.is-bf #header .nxr-bf-strip__link:hover .nxr-bf-strip__cta { color: var(--bf-on-dark); }

/*
 * Cyber Monday (30-nov): el script añade is-cm además de is-bf, así que todo lo anterior
 * sigue aplicando y aquí solo cambia la paleta: azul noche + azul eléctrico (familia Blue
 * de la guía de marca). El texto va siempre en blanco: azul sobre azul no se lee bien.
 */
html.is-bf.is-cm {
    --bf-black: #0E1A4F;
    --bf-line: #24336F;
    --bf-accent: #1A73E8;
    --bf-text: #FFFFFF;
    --bf-muted: #D5DCF2;
    --bf-on-dark: #FFFFFF;
    --bf-on-accent: #FFFFFF;
}
html.is-bf.is-cm .product-flags .dbproductdiscount.discount-flags::before { content: "Cyber Monday"; }

/* Logo recoloreado con un filtro SVG (header.tpl): el verde pasa al color de campaña y el
   blanco se queda blanco. Sirve para los logos de los seis idiomas, cada uno con su lema. */
html.is-bf img.logo { filter: url("#nxr-logo-bf"); }
html.is-bf.is-cm img.logo { filter: url("#nxr-logo-cm"); }