/**
 * TAZDUCA CHATBOT - FIX BOTONES NO FUNCIONALES
 * Solución CSS para asegurar que los botones sean clickeables
 * Ingeniero Senior - Corrección profesional
 */

/* ============================================
   RESET COMPLETO DE BOTONES
   ============================================ */

/* Resetear cualquier interferencia CSS que pueda bloquear clicks */
#tazduca-chatbot button {
    /* Restablecer propiedades básicas */
    pointer-events: auto !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    
    /* Asegurar visibilidad */
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    
    /* Posicionamiento */
    position: relative !important;
    z-index: 10 !important;
    
    /* Eliminar propiedades que bloqueen interacción */
    transform: none;
    transition: all 0.3s ease;
    
    /* Propiedades de botón */
    border: none;
    background: inherit;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    
    /* Alineación */
    align-items: center;
    justify-content: center;
    
    /* Eliminar outline al hacer focus */
    outline: none;
}

/* Asegurar que los íconos no bloqueen clicks */
#tazduca-chatbot button i {
    pointer-events: none !important;
    user-select: none !important;
}

/* ============================================
   BOTÓN MINIMIZAR - CONFIGURACIÓN ESPECÍFICA
   ============================================ */

#tazduca-chatbot #chatbot-minimize {
    /* Dimensiones fijas */
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    
    /* Estilo visual */
    border-radius: 50% !important;
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
    color: white !important;
    
    /* Funcionalidad asegurada */
    pointer-events: auto !important;
    cursor: pointer !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    position: relative !important;
    z-index: 15 !important;
    
    /* Efectos */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#tazduca-chatbot #chatbot-minimize:hover {
    background: linear-gradient(135deg, #4b5563 0%, #374151 100%) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

#tazduca-chatbot #chatbot-minimize:active {
    transform: scale(0.95) !important;
    transition: transform 0.1s !important;
}

#tazduca-chatbot #chatbot-minimize i {
    font-size: 14px !important;
    color: white !important;
    pointer-events: none !important;
}

/* ============================================
   BOTÓN VERDE ENVÍO - CONFIGURACIÓN ESPECÍFICA
   ============================================ */

#tazduca-chatbot #chatbot-send {
    /* Dimensiones fijas */
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    
    /* Estilo visual */
    border-radius: 50% !important;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: white !important;
    
    /* Funcionalidad asegurada */
    pointer-events: auto !important;
    cursor: pointer !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    position: relative !important;
    z-index: 15 !important;
    
    /* Efectos */
    box-shadow: 
        0 4px 12px rgba(34, 197, 94, 0.4),
        0 2px 6px rgba(34, 197, 94, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#tazduca-chatbot #chatbot-send:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    transform: scale(1.05) translateY(-2px) !important;
    box-shadow: 
        0 8px 20px rgba(34, 197, 94, 0.5),
        0 4px 12px rgba(34, 197, 94, 0.3) !important;
}

#tazduca-chatbot #chatbot-send:active {
    transform: scale(0.95) !important;
    transition: transform 0.1s !important;
}

#tazduca-chatbot #chatbot-send i {
    font-size: 16px !important;
    color: white !important;
    pointer-events: none !important;
}

/* ============================================
   CONTENEDORES - ASEGURAR NO BLOQUEEN CLICKS
   ============================================ */

/* Header del chatbot */
#tazduca-chatbot .chatbot-header {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 5 !important;
}

/* Contenedor de controles */
#tazduca-chatbot .chatbot-controls {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Contenedor de input */
#tazduca-chatbot .input-container {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* Campo de input */
#tazduca-chatbot #chatbot-input {
    pointer-events: auto !important;
    user-select: auto !important;
    -webkit-user-select: auto !important;
    cursor: text !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 10 !important;
}

/* ============================================
   BOTÓN FLOTANTE
   ============================================ */

#chatbot-toggle {
    pointer-events: auto !important;
    cursor: pointer !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: fixed !important;
    z-index: 1000 !important;
    
    /* Posición estándar */
    bottom: 20px !important;
    right: 20px !important;
    
    /* Estilo */
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
    transition: all 0.3s ease !important;
}

#chatbot-toggle:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5) !important;
}

#chatbot-toggle i {
    font-size: 24px !important;
    pointer-events: none !important;
}

/* ============================================
   ELIMINAR INTERFERENCIAS
   ============================================ */

/* Eliminar pseudo-elementos que puedan interferir */
#tazduca-chatbot button::before,
#tazduca-chatbot button::after {
    pointer-events: none !important;
}

/* Eliminar overlays que puedan bloquear clicks */
#tazduca-chatbot .chatbot-header::before,
#tazduca-chatbot .chatbot-header::after,
#tazduca-chatbot .input-container::before,
#tazduca-chatbot .input-container::after {
    pointer-events: none !important;
}

/* ============================================
   ESTADOS DE BOTONES
   ============================================ */

/* Estado deshabilitado - no aplicar */
#tazduca-chatbot button:disabled {
    pointer-events: auto !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

/* Estado de loading */
#tazduca-chatbot button.loading {
    pointer-events: auto !important;
    cursor: wait !important;
}

#tazduca-chatbot button.loading i {
    animation: spin 1s linear infinite !important;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

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

@media (max-width: 480px) {
    #tazduca-chatbot #chatbot-minimize {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }
    
    #tazduca-chatbot #chatbot-minimize i {
        font-size: 12px !important;
    }
    
    #tazduca-chatbot #chatbot-send {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }
    
    #tazduca-chatbot #chatbot-send i {
        font-size: 14px !important;
    }
    
    #chatbot-toggle {
        width: 50px !important;
        height: 50px !important;
        bottom: 15px !important;
        right: 15px !important;
    }
    
    #chatbot-toggle i {
        font-size: 20px !important;
    }
}

/* ============================================
   DEBUG - INDICADORES VISUALES
   ============================================ */

/* Indicador de botón funcional (solo para desarrollo) */
.debug-mode #tazduca-chatbot button {
    border: 2px solid lime !important;
    position: relative !important;
}

.debug-mode #tazduca-chatbot button::after {
    content: '✓' !important;
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    background: lime !important;
    color: black !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    font-size: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
}

/* ============================================
   FALLBACK - BOTONES BÁSICOS
   ============================================ */

/* En caso de que los botones específicos no se encuentren */
#tazduca-chatbot .chatbot-controls button,
#tazduca-chatbot .input-container button {
    pointer-events: auto !important;
    cursor: pointer !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 10 !important;
    
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 50% !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}