/* ==========================================================================
   PROMOCIONES  —  assets/css/promociones.css
   --------------------------------------------------------------------------
   Cartelito de promoción sobre la foto del producto y precio anterior tachado.

   Los colores NO se definen acá: los elige el administrador en
   /admin/promociones y llegan como estilo en línea.

   Las clases empiezan con "promo-" para no chocar con nada existente.
   ========================================================================== */

/* --- Cartelito sobre la foto, en el listado ------------------------------ */
/* Se posiciona igual que el cartel "SALE" que ya existía, para mantener la
   misma ubicación visual que el cliente ya conoce. */

.promo-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    padding: 4px 10px;
    border-radius: 4px;
    font-family: 'Poppins-Bold', sans-serif;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

@media (max-width: 575.98px) {
    .promo-badge {
        top: 7px;
        left: 7px;
        padding: 3px 8px;
        font-size: .65rem;
    }
}


/* --- Cartelito en la ficha del producto, al lado del precio -------------- */

.promo-badge-linea {
    display: inline-block;
    margin-left: .75rem;
    padding: 3px 10px;
    border-radius: 4px;
    font-family: 'Poppins-Bold', sans-serif;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}


/* --- Precio anterior tachado, en las tarjetas del listado --------------- */

.precio_anterior {
    display: inline-block;
    margin-right: .4rem;
    color: #9a9a9a;
    font-size: .82em;
    font-weight: 400;
    text-decoration: line-through;
}