/*
 * Ajustes del feedback del cliente — 08/09/2026 (documento "Web Retail v5").
 *
 * Va en un archivo aparte y no en src/scss porque el build de gulp del tema no está
 * instalado en este entorno (no hay node_modules) y editar assets/css/body.css a mano
 * lo dejaría fuera de sincronía con su fuente SCSS: la próxima compilación borraría
 * los cambios sin avisar. Al vivir en su propio archivo encolado después, estas reglas
 * sobreviven a un rebuild y se ven de un vistazo.
 *
 * Cuando se vuelva a montar el build, el contenido de aquí se puede pasar tal cual a
 * src/scss/ y quitar el encolado de functions.php.
 */

/* ============================================================ WhatsApp: 2 números */

/*
 * El botón dejó de ser un enlace directo: ahora despliega Call Center y Asesor Digital.
 * Se apoya en <details>/<summary>, así que abre y cierra sin JavaScript.
 */
.wa-picker {
    position: relative;
}

.wa-picker--flotante {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
}

/* El summary hereda el aspecto del botón que ya existía. */
.wa-picker > summary {
    list-style: none;
    cursor: pointer;
}

.wa-picker > summary::-webkit-details-marker,
.wa-picker > summary::marker {
    display: none;
    content: '';
}

.wa-picker__menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    min-width: 232px;
    padding: 8px;
    background: #fff;
    border: 1px solid #E4E4E4;
    border-radius: 14px;
    box-shadow: 0 12px 40px -12px rgba(16, 24, 40, .28);
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: wa-picker-in 160ms ease-out;
}

@keyframes wa-picker-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.wa-picker__titulo {
    display: block;
    padding: 6px 10px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #9a94ab;
}

.wa-picker__opcion {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 9px;
    color: #1E1932;
    text-decoration: none;
    transition: background-color 140ms ease;
}

.wa-picker__opcion:hover,
.wa-picker__opcion:focus-visible {
    background: #f1eff6;
    color: #1E1932;
    text-decoration: none;
}

.wa-picker__opcion > svg {
    flex: 0 0 auto;
    color: #25D366;
}

.wa-picker__opcion span {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.wa-picker__opcion strong {
    font-size: 13px;
    font-weight: 650;
}

.wa-picker__opcion small {
    font-size: 12px;
    color: #6b6580;
}

/* En móvil el menú ocupa casi todo el ancho para que los dos destinos se lean bien. */
@media (max-width: 480px) {
    .wa-picker__menu {
        position: fixed;
        right: 12px;
        left: 12px;
        bottom: 84px;
        min-width: 0;
    }
}

/* ================================================ disclaimer de imágenes referenciales */

/*
 * Pedido para las galerías de modelo: las fotos son de fábrica y el equipamiento real
 * puede variar según la versión comercializada en Bolivia.
 */
.gal-disclaimer {
    margin: 14px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #6b6580;
    font-style: italic;
}

/* ============================================================ accesorios sin foto */

/*
 * 13 de 43 accesorios no tienen imagen cargada. Antes se veía un rectángulo vacío que
 * parecía un error de carga; ahora se muestra un marcador explícito.
 */
.acc-img:empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1eff6;
    border-radius: 10px;
}

.acc-img:empty::after {
    content: 'Sin imagen';
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #b3aec2;
}

/* ============================================================ newsletter */

/*
 * El formulario ya envía de verdad (antes tenía onsubmit="return false"), así que
 * necesita dónde decir cómo fue.
 */
.footer-newsletter-msg {
    margin: 8px 0 0;
    min-height: 16px;
    font-size: 12px;
    line-height: 1.4;
    color: #9a94ab;
}

.footer-newsletter-msg.ok    { color: #7ddca4; }
.footer-newsletter-msg.error { color: #ff9b8a; }

.footer-newsletter-btn:disabled { opacity: .5; cursor: progress; }

/* ================================================ logos de marca en sucursales */

/*
 * «Verificar los logos, algunos se ven más grandes y otros más pequeños» (p5).
 *
 * La causa no era el CSS sino los archivos: los ocho logos tienen proporciones que van
 * de 0.93 (Mitsubishi, 280×300) a 2.46 (Chery, 737×300), y tamaños de 217 px a 2560 px.
 * Con `height:30px; width:auto` cada uno ocupaba un ancho distinto, y los muy anchos
 * además chocaban contra el max-width y bajaban de altura.
 *
 * Se les da a todos la MISMA caja y se deja que object-fit encaje la imagen dentro. Así
 * el peso óptico se iguala sin depender de cómo venga recortado cada archivo.
 */
.suc-header-marca-img {
    width: 64px;
    height: 30px;
    max-width: none;
    object-fit: contain;
    object-position: center;
}

/* ============================================== modelos sin fotografía */

/*
 * Los modelos dados de alta a la espera de las fotos de fábrica. El catálogo ya los
 * manda al final de la grilla; esto evita además que la tarjeta parezca rota.
 */
.product-img:empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 151px;
    background: repeating-linear-gradient(45deg, #f6f5f9, #f6f5f9 10px, #f1eff6 10px, #f1eff6 20px);
    border-radius: 10px;
}

.product-img:empty::after {
    content: 'Foto pendiente';
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #b3aec2;
}