/* ============================================ */
/* BOTÓN FLOTANTE DE WHATSAPP                    */
/* ============================================ */

.whatsapp-flotante {
    position: fixed; bottom: 25px; right: 25px; z-index: var(--z-whatsapp);
    width: 60px; height: 60px; border-radius: 50%;
    background: #25d366; color: white; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; box-shadow: 0 4px 20px rgba(37,211,102,0.4);
    transition: all var(--transicion-media); animation: pulsoWhatsApp 2s infinite;
}
.whatsapp-flotante:hover { transform: scale(1.12); box-shadow: 0 6px 30px rgba(37,211,102,0.5); }

.whatsapp-tooltip {
    position: absolute; right: 70px; top: 50%; transform: translateY(-50%);
    background: white; color: #333; padding: 10px 16px; border-radius: 8px;
    font-size: 0.85rem; font-weight: 500; white-space: nowrap;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15); opacity: 0; pointer-events: none;
    transition: opacity var(--transicion-rapida);
}
.whatsapp-tooltip::after { content: ''; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-left-color: white; }
.whatsapp-flotante:hover .whatsapp-tooltip { opacity: 1; }

@keyframes pulsoWhatsApp {
    0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.4); }
    70% { box-shadow: 0 0 0 15px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* -- Notificación de nuevo mensaje -- */
.whatsapp-notificacion {
    position: absolute; top: -5px; right: -5px;
    width: 20px; height: 20px; background: #ff4444; border-radius: 50%;
    display: none; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 700; color: white;
    animation: pulso 1.5s infinite;
}