/* Yujju design system — botón flotante de WhatsApp (WhatsAppButtonHooks, todo el sitio).
   Abajo a la derecha, apilado sobre «volver arriba» (45px, bottom 50px) y, en móvil,
   sobre la barra inferior (~64px). Capa flotante: único caso con --yj-shadow-float. */

.yj-ds .yj-whatsapp {
    --yj-wa-size: 52px;
    position: fixed;
    right: 26px;
    bottom: calc(50px + 45px + var(--yj-space-4));
    z-index: 9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--yj-wa-size);
    height: var(--yj-wa-size);
    color: var(--yj-white);
    background: var(--yj-primary-strong);
    border-radius: var(--yj-radius-pill);
    box-shadow: var(--yj-shadow-float);
    transition: background var(--yj-transition), transform var(--yj-transition);
}
.yj-ds .yj-whatsapp:hover,
.yj-ds .yj-whatsapp:focus-visible {
    color: var(--yj-white);
    background: var(--yj-primary-hover);
    transform: translateY(-2px);
}
.yj-ds .yj-whatsapp:focus-visible {
    outline: 2px solid var(--yj-primary-strong);
    outline-offset: 3px;
}

@media (max-width: 1199px) {
    .yj-ds .yj-whatsapp { right: 6px; }
}

/* Menú lateral abierto (el tema pone .active en .goal-offcanvas, no en <body>):
   el botón flotante se oculta para no tapar el borde del panel. */
.yj-ds:has(.goal-offcanvas.active) .yj-whatsapp,
.yj-ds:has(.over-dark.active) .yj-whatsapp {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Móvil: «volver arriba» queda a 64px + 16px (header.css); el botón va encima. */
@media (max-width: 991px) {
    .yj-ds .yj-whatsapp {
        --yj-wa-size: 48px;
        right: 14px;
        bottom: calc(64px + var(--yj-space-4) + 45px + var(--yj-space-3));
    }
    .yj-ds:not(.body-footer-mobile) .yj-whatsapp { bottom: calc(50px + 45px + var(--yj-space-3)); }
}

@media print {
    .yj-ds .yj-whatsapp { display: none; }
}