/* Botón flotante IA WhatsApp – IA Empresarial */

.iawfb-button {
    position: fixed;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: #0B5FA8;            /* Azul corporativo */
    color: #ffffff;                       /* Icono blanco */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    border: 2px solid #0B5FA8;
    box-sizing: border-box;
    transition:
        transform 0.25s ease,
        background-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
    /* El PHP define --iawfb-transform según la posición elegida en ajustes */
    transform: var(--iawfb-transform, translate(0, 0));
    isolation: isolate;                  /* Permite que el halo quede detrás del botón */
    overflow: visible;
}

/* Icono */
.iawfb-icon svg {
    width: 32px;
    height: 32px;
    fill: currentColor;
}

/* Hover: cambia colores y hace un pequeño "lift" */
.iawfb-button:hover {
    background-color: #ffffff;
    color: #0B5FA8;
    border-color: #0B5FA8;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    transform: var(--iawfb-transform, translate(0, 0)) translateY(-3px);
}

/* ===== Halo animado (pulso) ===== */

.iawfb-button::before,
.iawfb-button::after {
    content: "";
    position: absolute;
    inset: -6px; /* halo un poco más grande que el botón */
    border-radius: 50%;
    background-color: rgba(11, 95, 168, 0.35); /* Azul con transparencia */
    z-index: -1;
    opacity: 0;
    transform: scale(1);
    animation: iawfb-pulse 1.8s infinite;
}

.iawfb-button::after {
    animation-delay: 0.6s;
}

@keyframes iawfb-pulse {
    0% {
        opacity: 0.5;
        transform: scale(1);
    }
    70% {
        opacity: 0;
        transform: scale(1.8);
    }
    100% {
        opacity: 0;
        transform: scale(1.8);
    }
}

/* Ajustes en móviles */
@media (max-width: 767px) {
    .iawfb-button {
        width: 56px;
        height: 56px;
    }

    .iawfb-icon svg {
        width: 28px;
        height: 28px;
    }
}

/* ===== Fix: asegurar visibilidad del botón en la página de inicio (home) en escritorio ===== */
/* Esto no toca la posición configurada en el plugin; solo garantiza que NO se oculte ni quede detrás de otros elementos */

@media (min-width: 768px) {
    .home .iawfb-button {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 999999 !important;
    }
}

/*
   Si en algún momento quisieras forzar que en la home
   esté SIEMPRE abajo a la derecha, podrías usar esto:

   @media (min-width: 768px) {
       .home .iawfb-button {
           display: flex !important;
           opacity: 1 !important;
           visibility: visible !important;
           z-index: 999999 !important;
           right: 24px !important;
           bottom: 24px !important;
           left: auto !important;
           top: auto !important;
           --iawfb-transform: translate(0, 0) !important;
       }
   }

   Pero de momento lo dejamos comentado para que siga
   respetando la posición que tú definas en los ajustes del plugin.
*/