/* ============================================================= Unified Chat Launcher — unified.css ============================================================= */ /* ── Variables de color (se sobreescriben con inline style si el admin configura un color/posición personalizado) ── */ :root { --uc-primary: #2eb872; /* verde — cámbialo desde el panel */ --uc-primary-dk: #27a265; /* hover: ~10% más oscuro */ --uc-text-light: #ffffff; --uc-menu-bg: #2eb872; --uc-divider: rgba(255,255,255,0.3); --uc-whatsapp: #25D366; --uc-radius: 14px; --uc-shadow: 0 6px 24px rgba(0,0,0,0.22); --uc-z: 10000; } /* ── Contenedor general ── position:fixed se aplica sobre body (el JS mueve el nodo al ) para evitar que un contenedor con transform/filter lo desplace. ── */ .uc-launcher { position: fixed !important; bottom: var(--uc-bottom, 24px); left: var(--uc-left, auto); right: var(--uc-right, 24px); top: auto !important; z-index: var(--uc-z) !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; /* Aisla el launcher de posibles transform en padres */ transform: translateZ(0); } /* ── Botón principal "¿Te ayudo?" ── */ .uc-toggle-btn { display: flex; align-items: center; gap: 10px; background: var(--uc-primary); color: var(--uc-text-light); border: none; border-radius: 50px; padding: 12px 20px; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: var(--uc-shadow); transition: background 0.2s, transform 0.15s; white-space: nowrap; } .uc-toggle-btn:hover, .uc-toggle-btn:focus { background: var(--uc-primary-dk); outline: none; } .uc-toggle-btn:active { transform: scale(0.97); } .uc-toggle-btn svg { width: 20px; height: 20px; flex-shrink: 0; } /* Ocultar el ícono X por defecto; mostrar el de chat */ .uc-icon-close { display: none; } .uc-icon-chat { display: block; } /* Cuando el menú está abierto: intercambia iconos */ .uc-launcher.is-open .uc-icon-close { display: block; } .uc-launcher.is-open .uc-icon-chat { display: none; } /* Ocultar la etiqueta de texto cuando está abierto */ .uc-launcher.is-open .uc-toggle-label { display: none; } /* ── Menú de opciones ── */ .uc-menu { /* Flota encima del botón sin afectar el tamaño del launcher */ position: absolute; bottom: calc(100% + 8px); right: 0; left: auto; background: var(--uc-menu-bg); border-radius: var(--uc-radius); box-shadow: var(--uc-shadow); overflow: hidden; min-width: 260px; max-width: 320px; /* Animación de entrada */ opacity: 0; transform: translateY(8px) scale(0.97); pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease; } .uc-menu[aria-hidden="false"] { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } /* Cuando el botón está a la izquierda, el menú se abre hacia la derecha */ .uc-side-left .uc-menu { right: auto; left: 0; } /* ── Cada opción del menú ── */ .uc-option { display: flex; align-items: center; gap: 14px; padding: 16px 20px; color: var(--uc-text-light); text-decoration: none; border-bottom: 1px solid var(--uc-divider); transition: background 0.15s; } .uc-option:last-child { border-bottom: none; } .uc-option:hover, .uc-option:focus { background: rgba(0,0,0,0.08); outline: none; color: var(--uc-text-light); } /* Oct8ne puede sobrescribir display; fijamos fila horizontal icono + texto */ .uc-option.oct8ne-widget-on, .uc-option.oct8ne-widget-off { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; white-space: nowrap; } .uc-option.oct8ne-widget-on .uc-option-text, .uc-option.oct8ne-widget-off .uc-option-text { display: inline-block !important; line-height: 1.2; } .uc-option.oct8ne-widget-on br, .uc-option.oct8ne-widget-off br { display: none !important; } /* Icono de cada opción */ .uc-option-icon { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .uc-option-icon svg { width: 22px; height: 22px; } /* Texto principal + subtítulo */ .uc-option-text { display: flex; flex-direction: column; font-size: 15px; font-weight: 600; line-height: 1.3; } .uc-option-text small { font-size: 12px; font-weight: 400; font-style: italic; margin-top: 2px; opacity: 0.9; } /* ── Variante WhatsApp (color distinto si quieres) ── */ /* Descomenta estas líneas si prefieres fondo verde para ese item: .uc-option-whatsapp { background: var(--uc-whatsapp); } .uc-option-whatsapp:hover { background: #1ebe5d; } */ /* Oct8ne recomienda ocultar inicialmente los disparadores. Su script los muestra cuando detecta agentes conectados. */ .oct8ne-widget-on, .oct8ne-widget-off { display: none; } /* ── Ocultar los botones originales del módulo WhatsApp ── */ .whatsapp-layout { display: none !important; } /* ── Responsive: en móvil burbuja redonda sin texto ── */ @media (max-width: 600px) { /* Reposiciona pegado al borde inferior ── el admin puede ajustar con --uc-bottom, pero en móvil siempre usamos margen pequeño */ .uc-launcher { bottom: 16px !important; } /* Burbuja circular limpia ── important para ganar a cualquier tema */ .uc-toggle-btn { width: 56px !important; height: 56px !important; min-width: 56px !important; min-height: 56px !important; border-radius: 50% !important; padding: 0 !important; justify-content: center !important; gap: 0 !important; overflow: hidden; } /* Ocultar texto en móvil siempre, incluso si el tema lo sobreescribe */ .uc-toggle-label, .uc-launcher.is-open .uc-toggle-label { display: none !important; width: 0 !important; overflow: hidden !important; } /* En móvil: solo el icono de chat, nunca la X */ .uc-toggle-btn .uc-icon-chat { display: block !important; width: 26px !important; height: 26px !important; flex-shrink: 0; margin: 0 !important; } .uc-toggle-btn .uc-icon-close, .uc-launcher.is-open .uc-toggle-btn .uc-icon-close { display: none !important; } /* Menú ancho completo */ .uc-menu { min-width: calc(100vw - 32px); max-width: calc(100vw - 32px); } }