/**
 * TAZDUCA SEPARATE FLOATING BUTTONS
 * Separar botones de WhatsApp y Chatbot para que no estén encimados
 * DREV1 - Solución para botones superpuestos
 */

/* ============================================
   SEPARACIÓN DE BOTONES FLOTANTES
   ============================================ */

/* BOTÓN WHATSAPP - POSICIÓN INFERIOR DERECHA */
.whatsapp-float,
.whatsapp-float-ultra,
a[href*="wa.me"],
a[href*="whatsapp"].whatsapp-float,
a[class*="whatsapp"][class*="float"] {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    width: 60px !important;
    height: 60px !important;
    z-index: 1001 !important; /* Mayor z-index que chatbot */
    
    /* Estilo visual WhatsApp */
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
    border-radius: 50% !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    
    /* Efectos */
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    
    /* Animación distintiva */
    animation: whatsappFloat 3s ease-in-out infinite !important;
}

/* BOTÓN CHATBOT - POSICIÓN INFERIOR IZQUIERDA */
#chatbot-toggle,
.chatbot-toggle,
.chatbot-float {
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important; /* Cambiado a IZQUIERDA para separar */
    width: 60px !important;
    height: 60px !important;
    z-index: 1000 !important;
    
    /* Estilo visual Chatbot */
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    border-radius: 50% !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    cursor: pointer !important;
    
    /* Efectos */
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    
    /* Animación distintiva */
    animation: chatbotFloat 3s ease-in-out infinite !important;
}

/* ============================================
   ICONOS Y CONTENIDO
   ============================================ */

/* Ícono WhatsApp */
.whatsapp-float i,
.whatsapp-float-ultra i,
a[href*="wa.me"] i,
a[href*="whatsapp"] i {
    font-size: 28px !important;
    color: white !important;
    pointer-events: none !important;
}

/* Ícono Chatbot */
#chatbot-toggle i,
.chatbot-toggle i,
.chatbot-float i {
    font-size: 28px !important;
    color: white !important;
    pointer-events: none !important;
}

/* ============================================
   EFECTOS HOVER
   ============================================ */

/* Hover WhatsApp */
.whatsapp-float:hover,
.whatsapp-float-ultra:hover,
a[href*="wa.me"]:hover,
a[href*="whatsapp"]:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 6px 24px rgba(37, 211, 102, 0.6) !important;
    animation: none !important; /* Detener animación en hover */
}

/* Hover Chatbot */
#chatbot-toggle:hover,
.chatbot-toggle:hover,
.chatbot-float:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 6px 24px rgba(59, 130, 246, 0.6) !important;
    animation: none !important; /* Detener animación en hover */
}

/* ============================================
   ANIMACIONES DISTINTIVAS
   ============================================ */

/* Animación WhatsApp - Pulso verde */
@keyframes whatsappFloat {
    0%, 100% {
        transform: scale(1);
        box-shadow: 
            0 4px 16px rgba(37, 211, 102, 0.4),
            0 0 0 0 rgba(37, 211, 102, 0.5);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 
            0 6px 20px rgba(37, 211, 102, 0.5),
            0 0 0 10px rgba(37, 211, 102, 0.1);
    }
}

/* Animación Chatbot - Pulso azul */
@keyframes chatbotFloat {
    0%, 100% {
        transform: scale(1);
        box-shadow: 
            0 4px 16px rgba(59, 130, 246, 0.4),
            0 0 0 0 rgba(59, 130, 246, 0.5);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 
            0 6px 20px rgba(59, 130, 246, 0.5),
            0 0 0 10px rgba(59, 130, 246, 0.1);
    }
}

/* ============================================
   TOOLTIPS/LABELS PARA IDENTIFICACIÓN
   ============================================ */

/* Tooltip WhatsApp */
.whatsapp-float::before,
.whatsapp-float-ultra::before,
a[href*="wa.me"]::before,
a[href*="whatsapp"]::before {
    content: 'WhatsApp' !important;
    position: absolute !important;
    bottom: 110% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(0, 0, 0, 0.8) !important;
    color: white !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    transition: opacity 0.3s !important;
    pointer-events: none !important;
    z-index: 2000 !important;
}

/* Tooltip Chatbot */
#chatbot-toggle::before,
.chatbot-toggle::before {
    content: 'Chat' !important;
    position: absolute !important;
    bottom: 110% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(0, 0, 0, 0.8) !important;
    color: white !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    transition: opacity 0.3s !important;
    pointer-events: none !important;
    z-index: 2000 !important;
}

/* Mostrar tooltips en hover */
.whatsapp-float:hover::before,
.whatsapp-float-ultra:hover::before,
a[href*="wa.me"]:hover::before,
a[href*="whatsapp"]:hover::before,
#chatbot-toggle:hover::before,
.chatbot-toggle:hover::before {
    opacity: 1 !important;
}

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

@media (max-width: 768px) {
    /* WhatsApp - Esquina inferior derecha móvil */
    .whatsapp-float,
    .whatsapp-float-ultra,
    a[href*="wa.me"],
    a[href*="whatsapp"] {
        bottom: 15px !important;
        right: 15px !important;
        width: 55px !important;
        height: 55px !important;
    }
    
    .whatsapp-float i,
    .whatsapp-float-ultra i,
    a[href*="wa.me"] i,
    a[href*="whatsapp"] i {
        font-size: 24px !important;
    }
    
    /* Chatbot - Esquina inferior izquierda móvil */
    #chatbot-toggle,
    .chatbot-toggle {
        bottom: 15px !important;
        left: 15px !important;
        width: 55px !important;
        height: 55px !important;
    }
    
    #chatbot-toggle i,
    .chatbot-toggle i {
        font-size: 24px !important;
    }
    
    /* Separación mayor en móvil para evitar clicks accidentales */
    .whatsapp-float,
    .whatsapp-float-ultra,
    a[href*="wa.me"],
    a[href*="whatsapp"] {
        right: 20px !important;
    }
    
    #chatbot-toggle,
    .chatbot-toggle {
        left: 20px !important;
    }
}

/* Móvil muy pequeño */
@media (max-width: 480px) {
    .whatsapp-float,
    .whatsapp-float-ultra,
    a[href*="wa.me"],
    a[href*="whatsapp"] {
        bottom: 12px !important;
        right: 12px !important;
        width: 50px !important;
        height: 50px !important;
    }
    
    #chatbot-toggle,
    .chatbot-toggle {
        bottom: 12px !important;
        left: 12px !important;
        width: 50px !important;
        height: 50px !important;
    }
    
    .whatsapp-float i,
    .whatsapp-float-ultra i,
    a[href*="wa.me"] i,
    a[href*="whatsapp"] i,
    #chatbot-toggle i,
    .chatbot-toggle i {
        font-size: 22px !important;
    }
}

/* ============================================
   PREVENIR SUPERPOSICIÓN
   ============================================ */

/* Asegurar que los botones nunca se superpongan */
.whatsapp-float,
.whatsapp-float-ultra,
a[href*="wa.me"],
a[href*="whatsapp"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#chatbot-toggle,
.chatbot-toggle {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ============================================
   DEBUG MODE
   ============================================ */

.debug-floating-buttons .whatsapp-float,
.debug-floating-buttons .whatsapp-float-ultra,
.debug-floating-buttons a[href*="whatsapp"] {
    border: 3px solid lime !important;
}

.debug-floating-buttons #chatbot-toggle,
.debug-floating-buttons .chatbot-toggle {
    border: 3px solid orange !important;
}

.debug-floating-buttons .whatsapp-float::after,
.debug-floating-buttons .whatsapp-float-ultra::after,
.debug-floating-buttons a[href*="whatsapp"]::after {
    content: 'WhatsApp - Derecha' !important;
    position: absolute !important;
    top: -30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: lime !important;
    color: black !important;
    padding: 2px 6px !important;
    font-size: 10px !important;
    border-radius: 3px !important;
    pointer-events: none !important;
}

.debug-floating-buttons #chatbot-toggle::after,
.debug-floating-buttons .chatbot-toggle::after {
    content: 'Chatbot - Izquierda' !important;
    position: absolute !important;
    top: -30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: orange !important;
    color: black !important;
    padding: 2px 6px !important;
    font-size: 10px !important;
    border-radius: 3px !important;
    pointer-events: none !important;
}

/* ============================================
   FALLBACK PARA ELEMENTOS EXISTENTES
   ============================================ */

/* Si hay elementos con las clases existentes, aplicar la separación */
[class*="float"][class*="whatsapp"] {
    right: 20px !important;
    left: auto !important;
    z-index: 1001 !important;
}

[class*="float"][class*="chat"] {
    left: 20px !important;
    right: auto !important;
    z-index: 1000 !important;
}