/* ==========================================================================
   Boton flotante de WhatsApp (inc/whatsapp-flotante.php)
   --------------------------------------------------------------------------
   El logo verde original de WhatsApp: circulo de 56 px, glifo blanco (lo
   pidio Mango y lo aprobo Fran el 1 nov 2026, issue #21; antes era un
   cuadrado negro). Va abajo a la derecha, debajo de los drawers y el menu
   (z-index 10000 y 9999) y de la barra de compra (990). Si quedaria arriba
   de un boton o un campo, assets/js/whatsapp-flotante.js lo sube (translate,
   aparte del transform de la barra de compra).
   ========================================================================== */

.fedelan-wa-flotante {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 985;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 50%;
    background: var(--fedelan-whatsapp);
    color: #FFFFFF;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    text-decoration: none;
    transition: transform var(--fedelan-dur, 0.25s) var(--fedelan-ease, ease), translate var(--fedelan-dur, 0.25s) var(--fedelan-ease, ease), background-color 0.15s ease, visibility 0s;
}

.fedelan-wa-flotante:hover {
    background: #1EBE5A;
    color: #FFFFFF;
}

.fedelan-wa-flotante:focus-visible {
    outline: 2px solid var(--fedelan-accent);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--fedelan-paper);
}

.fedelan-wa-flotante svg {
    display: block;
    width: 30px;
    height: 30px;
}

@media (min-width: 1024px) {
    .fedelan-wa-flotante {
        right: 24px;
        bottom: 24px;
    }
}

/* Al llegar al final de la pagina el boton caia encima del credito de la
   linea legal. El pie suma abajo el alto del boton y su aire, asi el boton
   queda sobre blanco. Esta hoja solo carga cuando el boton sale. */
.fedelan-footer__legal {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

@media (min-width: 1024px) {
    .fedelan-footer__legal {
        padding-bottom: 80px;
    }
}

/* En la ficha del telefono, cuando aparece la barra fija de compra, el boton
   sube lo que mide la barra (64 de foto mas 16 de aire y el filete) y queda
   encima, sin taparle el boton de agregar. */
@media (max-width: 699px) {
    body:has(.fedelan-barra-compra.is-visible) .fedelan-wa-flotante {
        transform: translateY(-82px);
    }

    /* El aviso de agregado ocupa todo el ancho abajo: mientras se ve, el
       boton se va. */
    body:has(.fedelan-snackbar--visible) .fedelan-wa-flotante {
        visibility: hidden;
    }
}

/* Con un drawer, el menu, el agregado rapido, los filtros, la guia de talles
   o cualquier dialogo abiertos, el boton no va. */
body.fedelan-cart-open .fedelan-wa-flotante,
body.fedelan-favorites-open .fedelan-wa-flotante,
body.fedelan-compra-rapida-open .fedelan-wa-flotante,
body.fedelan-menu-open .fedelan-wa-flotante,
body.fedelan-filter-open .fedelan-wa-flotante,
body.fedelan-modal-abierto .fedelan-wa-flotante,
body:has(dialog[open]) .fedelan-wa-flotante {
    visibility: hidden;
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .fedelan-wa-flotante {
        transition: none;
    }
}

@media print {
    .fedelan-wa-flotante {
        display: none;
    }
}