/**
 * Pedido 2026-11-11: mismos colores de CyberMonday (assets/css/cybermonday2026.css) pero
 * escopados bajo .cm-estilo-cyber (listador-box.php y ficha.php de variants/principal/ le
 * agregan esa clase al root solo para los equipos de lcf_mantiene_estilo_cyber(), via
 * funciones_helper.php), en vez de cargarse para todo el sitio como con la variante
 * "cybermonday".
 *
 * Logo (agregado despues, mismo dia): logo_cybertop.webp (no el logo-CyberMonday1.webp
 * original) en el mismo lugar donde estaba el de la variante cybermonday -- listador-box.php
 * y ficha.php ya envuelven el <img> en if ($cmEstiloDestacado), asi que estas reglas solo
 * posicionan, no hace falta volver a escoparlas bajo .cm-estilo-cyber.
 */

:root {
    --cm-cian: #2ccbf6;
    --cm-azul: #5580f7;
    --cm-violeta: #7a3af8;
    --cm-gradiente: linear-gradient(35deg, var(--cm-cian) 0%, var(--cm-azul) 50%, var(--cm-violeta) 100%);
}

/* ============== LISTADOR BOX (nl-box) ============== */

.cm-estilo-cyber .summer-sale-off-badge {
    border-color: var(--cm-violeta) !important;
}

.cm-estilo-cyber .summer-sale-off-text {
    background: var(--cm-gradiente) !important;
    background-color: var(--cm-violeta) !important;
    color: #ffffff !important;
}

.cm-estilo-cyber .summer-sale-precio,
.cm-estilo-cyber .summer-sale-efectivo {
    color: var(--cm-violeta) !important;
}

.cm-estilo-cyber .summer-sale-container.off-50 .summer-sale-off-badge {
    border-color: var(--cm-violeta) !important;
}

.cm-estilo-cyber .summer-sale-container.off-50 .summer-sale-off-text {
    background: var(--cm-gradiente) !important;
}

.cm-estilo-cyber .summer-sale-container.off-50 .summer-sale-precio,
.cm-estilo-cyber .summer-sale-container.off-50 .summer-sale-efectivo {
    color: var(--cm-violeta) !important;
}

.cm-estilo-cyber .listador-badge-cuotas {
    background-color: var(--cm-cian) !important;
}

/* Badge de "N cuotas sin interes" resaltado (listador-box.php y ficha.php, inline style propio) */
.cm-estilo-cyber .cuotas-badge-activa {
    background: var(--cm-gradiente) !important;
}

/* Logo arriba a la derecha de la IMAGEN del producto (listador-box.php) -- position:absolute
   dentro de .nl-box-imagen (ya tiene position:relative), pegado a la esquina superior derecha
   de la foto. top:10px lo enfrenta, a la misma altura, con la marca/codigo que queda en la
   esquina superior izquierda de la foto (.b20-productData-codigo). */
.cm-logo-listador-img {
    position: absolute;
    top: 10px;
    right: 8px;
    max-width: 46px;
    height: auto;
    z-index: 2;
    mix-blend-mode: multiply; /* el .webp trae fondo blanco solido -- se mezcla con el fondo del bloque en vez de verse como un cuadrado blanco, mismo truco que .a25-control-img / stylesListadores.css en el resto del sitio */
}

@media screen and (max-width: 1023px) {
    .cm-logo-listador-img {
        max-width: 38px;
    }
}

/* ============== FICHA ==============
   ficha.php trae un <style> propio mas abajo en el documento que pisa a lcf-extracted.css
   con rojo (#E4002B); para ganarle hace falta !important aca (igual que en cybermonday2026.css). */

.cm-estilo-cyber .ficha-promo-new-badge {
    border-color: var(--cm-violeta) !important;
}

.cm-estilo-cyber .ficha-promo-new-badge .ficha-off-text {
    background: var(--cm-gradiente) !important;
}

.cm-estilo-cyber .ficha-promo-new-badge .ficha-efectivo-text {
    color: var(--cm-violeta) !important;
}

.cm-estilo-cyber .ficha-promo-new-precio {
    color: var(--cm-violeta) !important;
}

.cm-estilo-cyber .ficha-promo-new-badge.off-50 {
    border-color: var(--cm-violeta) !important;
}

.cm-estilo-cyber .ficha-promo-new-badge.off-50 .ficha-off-text {
    background: var(--cm-gradiente) !important;
}

.cm-estilo-cyber .ficha-promo-new-badge.off-50 .ficha-efectivo-text {
    color: var(--cm-violeta) !important;
}

.cm-estilo-cyber .ficha-promo-new-precio.off-50 {
    color: var(--cm-violeta) !important;
}

/* Logo al lado del bloque de descuento + MercadoPago (ficha.php). Posicionado absoluto
   (cuelga hacia la izquierda, mas cerca de la imagen) para NO correr el badge. */
.ficha-promo-new-badge {
    position: relative;
}

.cm-logo-ficha-precio {
    position: absolute;
    left: -74px;
    top: 50%;
    transform: translateY(-50%);
    max-width: 85px;
    height: auto;
    mix-blend-mode: multiply;
}

@media screen and (max-width: 767px) {
    .cm-logo-ficha-precio {
        left: auto;
        right: -50px;
        max-width: 62px;
    }
}

@media screen and (max-width: 480px) {
    .cm-logo-ficha-precio {
        right: -42px;
        max-width: 52px;
    }
}

@media screen and (max-width: 360px) {
    .cm-logo-ficha-precio {
        right: -51px;
        max-width: 60px;
    }
}