/* =====================================================
   WHATSAPP FLOTANTE SPNEXT
===================================================== */

.whatsapp-floating {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 1050;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 62px;
    height: 62px;

    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;

    background:
        linear-gradient(135deg,
            #16a34a,
            #22c55e);

    color: var(--white);

    box-shadow:
        0 14px 34px rgba(22, 163, 74, 0.34),
        0 5px 14px rgba(2, 6, 23, 0.2);

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        background-color var(--transition-normal);

    isolation: isolate;
}


/* =====================================================
   ICONO PRINCIPAL
===================================================== */

.whatsapp-floating-icon {
    width: 100%;
    height: 100%;

    display: grid;
    place-items: center;

    border-radius: inherit;

    color: var(--white);
}

.whatsapp-floating-icon i {
    display: block;

    color: inherit;

    font-size: 2rem;
    line-height: 1;

    transition:
        transform var(--transition-normal);
}


/* =====================================================
   ESTADOS DE INTERACCIÓN
===================================================== */

.whatsapp-floating:hover,
.whatsapp-floating:focus-visible {
    color: var(--white);

    transform:
        translateY(-5px) scale(1.04);

    box-shadow:
        0 18px 40px rgba(22, 163, 74, 0.42),
        0 8px 18px rgba(2, 6, 23, 0.25);
}

.whatsapp-floating:hover .whatsapp-floating-icon i,
.whatsapp-floating:focus-visible .whatsapp-floating-icon i {
    transform: rotate(-7deg) scale(1.06);
}

.whatsapp-floating:focus-visible {
    outline: 3px solid rgba(165, 243, 252, 0.95);
    outline-offset: 5px;
}


/* =====================================================
   TOOLTIP
===================================================== */

.whatsapp-tooltip {
    position: absolute;
    top: 50%;
    right: calc(100% + 14px);

    width: max-content;
    max-width: 250px;

    padding: 10px 14px;

    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 11px;

    background: rgba(15, 23, 42, 0.96);
    color: var(--white);

    box-shadow:
        0 12px 30px rgba(2, 6, 23, 0.24);

    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(-50%) translateX(8px);

    transition:
        opacity var(--transition-normal),
        visibility var(--transition-normal),
        transform var(--transition-normal);
}


/* Flecha del tooltip */

.whatsapp-tooltip::after {
    content: "";

    position: absolute;
    top: 50%;
    right: -6px;

    width: 12px;
    height: 12px;

    border-top: 1px solid rgba(148, 163, 184, 0.16);
    border-right: 1px solid rgba(148, 163, 184, 0.16);

    background: rgba(15, 23, 42, 0.96);

    transform:
        translateY(-50%) rotate(45deg);
}

.whatsapp-floating:hover .whatsapp-tooltip,
.whatsapp-floating:focus-visible .whatsapp-tooltip {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(-50%) translateX(0);
}


/* =====================================================
   INDICADOR DE ESTADO
===================================================== */

.whatsapp-status {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 2;

    width: 14px;
    height: 14px;

    border: 3px solid var(--white);
    border-radius: 50%;

    background: #22c55e;

    box-shadow:
        0 0 0 3px rgba(34, 197, 94, 0.18);
}


/* Animación exterior */

.whatsapp-status::after {
    content: "";

    position: absolute;
    inset: -5px;

    border: 2px solid rgba(34, 197, 94, 0.55);
    border-radius: 50%;

    animation:
        whatsapp-status-pulse 2s ease-out infinite;
}

@keyframes whatsapp-status-pulse {

    0% {
        opacity: 0.8;

        transform: scale(0.7);
    }

    70% {
        opacity: 0;

        transform: scale(1.55);
    }

    100% {
        opacity: 0;

        transform: scale(1.55);
    }

}


/* =====================================================
   EFECTO DE PULSO DEL BOTÓN
===================================================== */

.whatsapp-floating::before {
    content: "";

    position: absolute;
    inset: -1px;
    z-index: -1;

    border: 2px solid rgba(34, 197, 94, 0.35);
    border-radius: inherit;

    animation:
        whatsapp-button-pulse 2.8s ease-out infinite;
}

@keyframes whatsapp-button-pulse {

    0% {
        opacity: 0.55;

        transform: scale(1);
    }

    75% {
        opacity: 0;

        transform: scale(1.35);
    }

    100% {
        opacity: 0;

        transform: scale(1.35);
    }

}


/* =====================================================
   RESPONSIVE: TABLET
===================================================== */

@media (max-width: 991.98px) {

    .whatsapp-floating {
        right: 22px;
        bottom: 22px;

        width: 58px;
        height: 58px;
    }

    .whatsapp-floating-icon i {
        font-size: 1.85rem;
    }

}


/* =====================================================
   RESPONSIVE: MÓVIL
===================================================== */

@media (max-width: 575.98px) {

    .whatsapp-floating {
        right: 17px;
        bottom: 17px;

        width: 55px;
        height: 55px;

        border-width: 2px;
    }

    .whatsapp-floating-icon i {
        font-size: 1.72rem;
    }

    .whatsapp-status {
        top: 1px;
        right: 1px;

        width: 13px;
        height: 13px;
    }

    /*
     * En móviles se oculta el tooltip para evitar
     * que cubra parte del contenido.
     */

    .whatsapp-tooltip {
        display: none;
    }

}


/* =====================================================
   MOVIMIENTO REDUCIDO
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .whatsapp-floating,
    .whatsapp-floating-icon i,
    .whatsapp-tooltip {
        transition: none;
    }

    .whatsapp-floating::before,
    .whatsapp-status::after {
        animation: none;
    }

}