/** * TAZDUCA CHATBOT - FORZAR FUNCIONALIDAD BOTÓN MINIMIZAR * CSS específico para asegurar que el botón superior izquierdo gris funcione * DREV1 - Fix crítico del botón minimizar */ /* ============================================ BOTÓN MINIMIZAR - FUERZA BRUTA CSS ============================================ */ /* Forzar visibilidad y funcionalidad del botón minimizar */ #tazduca-chatbot #chatbot-minimize { /* PROPIEDADES CRÍTICAS - NO SOBRESCRIBIR */ pointer-events: auto !important; cursor: pointer !important; opacity: 1 !important; visibility: visible !important; display: flex !important; position: relative !important; z-index: 999 !important; /* DIMENSIONES FIJAS */ width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; max-width: 32px !important; max-height: 32px !important; /* ESTILO VISUAL */ border-radius: 50% !important; background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important; border: none !important; color: white !important; /* ALINEACIÓN */ align-items: center !important; justify-content: center !important; /* ANIMACIONES Y TRANSICIONES */ transition: all 0.2s ease !important; transform: scale(1) !important; /* ELIMINACIONES DE BLOQUEOS */ user-select: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; /* BOX SHADOW PARA INDICAR CLICKEABLE */ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(107, 114, 128, 0.3) !important; } /* Ícono del botón minimizar */ #tazduca-chatbot #chatbot-minimize i { font-size: 14px !important; color: white !important; pointer-events: none !important; z-index: 1 !important; position: relative !important; } /* Estados de interacción */ #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), 0 0 0 3px rgba(107, 114, 128, 0.5) !important; } #tazduca-chatbot #chatbot-minimize:active { transform: scale(0.95) !important; background: linear-gradient(135deg, #374151 0%, #1f2937 100%) !important; } #tazduca-chatbot #chatbot-minimize:focus { outline: 3px solid rgba(107, 114, 128, 0.5) !important; outline-offset: 2px !important; } /* ============================================ CONTENEDOR DE CONTROLES ============================================ */ /* Asegurar que el contenedor no bloquee clicks */ #tazduca-chatbot .chatbot-controls { pointer-events: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; position: relative !important; z-index: 50 !important; } /* ============================================ HEADER DEL CHATBOT ============================================ */ /* Asegurar que el header permita interacción con botones */ #tazduca-chatbot .chatbot-header { pointer-events: auto !important; position: relative !important; z-index: 10 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 12px 20px !important; } /* ============================================ ELIMINAR INTERFERENCIAS ============================================ */ /* Eliminar cualquier overlay o pseudo-elemento que pueda bloquear */ #tazduca-chatbot .chatbot-header::before, #tazduca-chatbot .chatbot-header::after, #tazduca-chatbot .chatbot-controls::before, #tazduca-chatbot .chatbot-controls::after, #tazduca-chatbot #chatbot-minimize::before { pointer-events: none !important; } /* Asegurar que otros elementos no interfieran */ #tazduca-chatbot .chatbot-avatar, #tazduca-chatbot .chatbot-info { pointer-events: auto !important; z-index: 5 !important; } /* ============================================ ESTADOS ESPECIALES ============================================ */ /* Estado cuando el chat está minimizado */ #tazduca-chatbot.minimized #chatbot-minimize { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important; box-shadow: 0 2px 6px rgba(34, 197, 94, 0.3), 0 0 0 2px rgba(34, 197, 94, 0.3) !important; } #tazduca-chatbot.minimized #chatbot-minimize i { transform: rotate(180deg) !important; } /* Estado de carga/procesando */ #tazduca-chatbot #chatbot-minimize.loading { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; cursor: wait !important; } #tazduca-chatbot #chatbot-minimize.loading i { animation: pulse 1s infinite !important; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(0.95); } } /* ============================================ 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; max-width: 28px !important; max-height: 28px !important; } #tazduca-chatbot #chatbot-minimize i { font-size: 12px !important; } } /* ============================================ DEBUG MODE ============================================ */ /* Modo debug para verificar que el botón es clickeable */ .debug-minimize #tazduca-chatbot #chatbot-minimize { border: 3px solid lime !important; background: linear-gradient(135deg, #22c55e 50%, #6b7280 50%) !important; } .debug-minimize #tazduca-chatbot #chatbot-minimize::after { content: 'CLICKEABLE' !important; position: absolute !important; top: -20px !important; left: 50% !important; transform: translateX(-50%) !important; background: lime !important; color: black !important; padding: 2px 6px !important; font-size: 8px !important; border-radius: 3px !important; pointer-events: none !important; z-index: 1000 !important; } /* ============================================ FALLBACKS DE EMERGENCIA ============================================ */ /* Si todo falla, crear un botón alternativo */ #tazduca-chatbot .emergency-minimize { position: absolute !important; top: 12px !important; right: 12px !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; background: #dc2626 !important; color: white !important; border: none !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 1000 !important; font-size: 14px !important; } /* ============================================ ANIMACIÓN DE CONFIRMACIÓN ============================================ */ /* Animación cuando el botón se presiona exitosamente */ @keyframes minimize-success { 0% { transform: scale(1); background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%); } 50% { transform: scale(1.2); background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); } 100% { transform: scale(1); background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%); } } #tazduca-chatbot #chatbot-minimize.success { animation: minimize-success 0.6s ease !important; } /* ============================================ INDICADOR DE FUNCIONALIDAD ============================================ */ /* Pulso sutil para indicar que está activo */ #tazduca-chatbot #chatbot-minimize { animation: subtle-pulse 3s infinite !important; } @keyframes subtle-pulse { 0%, 100% { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(107, 114, 128, 0.3); } 50% { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 0 0 4px rgba(107, 114, 128, 0.2); } }