/* Widget Chatbot Lenzens Variables con valores por defecto; el plugin las sobreescribe dinámicamente según la configuración de posición/padding. La base CSS asume derecha; si se configura "izquierda" (el valor activo en este sitio), el plugin inyecta la clase chatbot-lenzens-left en el con las reglas que mueven right -> left. */ :root { --chatbot-lenzens-pad-top: 30px; --chatbot-lenzens-pad-bottom: 30px; --chatbot-lenzens-pad-side: 30px; } #rasa-chat-bubble { position: fixed; bottom: var(--chatbot-lenzens-pad-bottom); right: var(--chatbot-lenzens-pad-side); display: flex; align-items: center; gap: 10px; padding: 15px 22px 15px 16px; background: linear-gradient(135deg, #5d4fff, #4a3fd9); border-radius: 40px; box-shadow: 0 4px 15px rgba(93, 79, 255, 0.4); cursor: pointer; z-index: 9999; transition: all 0.3s ease; } #rasa-chat-bubble:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(93, 79, 255, 0.5); } #rasa-chat-bubble-icon { font-size: 28px; line-height: 1; flex-shrink: 0; } #rasa-chat-bubble-text { font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; line-height: 1.2; } #rasa-chat-window { position: fixed; bottom: calc(var(--chatbot-lenzens-pad-bottom) + 80px); right: var(--chatbot-lenzens-pad-side); width: 380px; max-height: 550px; background: white; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); display: none; flex-direction: column; overflow: hidden; z-index: 9998; } @media (max-width: 480px) { #rasa-chat-window { width: 95%; right: 2.5%; bottom: calc(var(--chatbot-lenzens-pad-bottom) + 70px); } #rasa-chat-bubble { bottom: var(--chatbot-lenzens-pad-bottom); right: 20px; padding: 14px; border-radius: 50%; } #rasa-chat-bubble-text { display: none; } } /* Modo "izquierda": activado por el plugin añadiendo la clase chatbot-lenzens-left al cuando se elige ese lado. */ body.chatbot-lenzens-left #rasa-chat-bubble, body.chatbot-lenzens-left #rasa-chat-window { right: auto; left: var(--chatbot-lenzens-pad-side); } @media (max-width: 480px) { body.chatbot-lenzens-left #rasa-chat-window { right: auto; left: 2.5%; } body.chatbot-lenzens-left #rasa-chat-bubble { right: auto; left: 20px; } } #rasa-chat-header { background: linear-gradient(135deg, #5d4fff, #4a3fd9); color: white; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; } #rasa-chat-header h3 { margin: 0; font-size: 18px; font-weight: 600; color: #ffffff; } #rasa-chat-close { background: none; border: none; color: white; font-size: 24px; cursor: pointer; padding: 0; } #rasa-chat-messages { flex: 1; padding: 14px 16px; overflow-y: auto; background: #f5f7fa; } .rasa-msg-user { background: linear-gradient(135deg, #5d4fff, #4a3fd9); color: white; padding: 10px 14px; border-radius: 16px 16px 4px 16px; margin-left: auto; margin-bottom: 8px; max-width: 80%; box-shadow: 0 2px 8px rgba(93,79,255,0.2); white-space: pre-line; } .rasa-msg-bot { background: white; color: #333; padding: 10px 14px; border-radius: 16px 16px 16px 4px; margin-bottom: 8px; max-width: 90%; box-shadow: 0 2px 6px rgba(0,0,0,0.1); white-space: pre-line; font-size: 12.5px; line-height: 1.35; } /* Texto plano dentro de la burbuja del bot: que herede el salto de línea */ .rasa-msg-bot p { margin: 0 0 8px 0; } .rasa-msg-bot p:last-child { margin-bottom: 0; } #rasa-chat-footer { padding: 15px; border-top: 1px solid #eee; display: flex; gap: 10px; background: white; } #rasa-chat-input { flex: 1; padding: 12px 16px; border: 2px solid #eee; border-radius: 24px; outline: none; font-size: 15px; transition: border-color 0.2s; } #rasa-chat-input:focus { border-color: #5d4fff; } #rasa-chat-send { width: 48px; height: 48px; border-radius: 50%; border: none; background: linear-gradient(135deg, #5d4fff, #4a3fd9); color: white; font-size: 20px; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: all 0.2s ease; } #rasa-chat-send:hover { transform: scale(1.05); } /* ============================ Typing indicator — texto parpadeante ============================ */ .rasa-typing { display: inline-flex; align-items: center; background: white; padding: 10px 14px; border-radius: 16px 16px 16px 4px; margin-bottom: 10px; width: fit-content; box-shadow: 0 2px 6px rgba(0,0,0,0.1); } .rasa-typing-text { font-size: 13px; color: #888; font-style: italic; animation: rasa-blink 1s ease-in-out infinite; } @keyframes rasa-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } /* ============================ Tarjetas de tour/paquete ============================ */ /* Wrapper que agrupa la tarjeta clicable + la fila de botones debajo */ .rasa-product-block { margin: 6px 0; } .rasa-product-block:first-of-type { margin-top: 4px; } .rasa-product-card { display: block; position: relative; border: 1px solid #eee; border-radius: 10px; padding: 8px 10px; background: #fafbfc; box-shadow: 0 1px 3px rgba(0,0,0,0.05); text-decoration: none; color: inherit; transition: box-shadow 0.15s ease, border-color 0.15s ease; } .rasa-product-card:hover { border-color: #5d4fff; box-shadow: 0 2px 8px rgba(93,79,255,0.12); } /* Número de selección (1, 2, 3...) */ .rasa-product-num { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: #5d4fff; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(93,79,255,0.4); } /* Grid 2×2: [ imagen ] [ título ] [ precio ] [ stock ] */ .rasa-product-card-top { display: grid; grid-template-columns: 58px 1fr; grid-template-rows: auto auto; gap: 3px 9px; padding-right: 22px; /* espacio para el número */ } .rasa-product-img-col { grid-column: 1; grid-row: 1; } .rasa-product-img { width: 58px; height: 58px; object-fit: cover; border-radius: 6px; background: #fff; border: 1px solid #eee; display: block; } /* Título: arriba derecha */ .rasa-product-info { grid-column: 2; grid-row: 1; min-width: 0; display: flex; align-items: flex-start; } .rasa-product-title { font-weight: 400; color: #222; margin: 0; font-size: 12.5px; line-height: 1.3; } /* Precio: abajo izquierda */ .rasa-product-price-col { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; align-items: center; gap: 1px; } .rasa-product-price { color: #5d4fff; font-weight: 700; font-size: 12.5px; margin: 0; text-align: center; line-height: 1.2; } .rasa-product-price-old { color: #aaa; font-weight: 400; font-size: 10.5px; text-decoration: line-through; display: block; text-align: center; line-height: 1.2; } /* Stock: abajo derecha */ .rasa-stock-col { grid-column: 2; grid-row: 2; display: flex; align-items: center; } .rasa-stock-badge { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 2px 6px; border-radius: 8px; white-space: nowrap; } .rasa-stock-badge.en-stock { background: #e6f7ec; color: #1a8a4a; } .rasa-stock-badge.sin-stock { background: #fdeaea; color: #c1181e; } /* Botón base */ .rasa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 10px; border-radius: 16px; font-size: 12px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; flex: 1; white-space: nowrap; line-height: 1; } .rasa-btn:hover { transform: translateY(-1px); } .rasa-btn-icon { font-size: 13px; line-height: 1; } .rasa-btn-icon-svg { width: 15px; height: 15px; flex-shrink: 0; display: block; } /* Fila de acciones DEBAJO de la tarjeta */ .rasa-product-actions { display: flex; gap: 6px; margin-top: 5px; } /* Botón WhatsApp (verde) */ .rasa-btn-whatsapp { background: linear-gradient(135deg, #25D366, #1ebe5d); color: #fff; box-shadow: 0 2px 6px rgba(37,211,102,0.3); } /* Botón "Añadir al carrito" (oscuro/neutro) */ .rasa-btn-carrito { background: #2c2c2c; color: #fff; } .rasa-btn-carrito:disabled { opacity: 0.85; cursor: default; transform: none; } .rasa-btn-carrito.rasa-btn-success { background: linear-gradient(135deg, #25D366, #1ebe5d); } /* Caja destacada para el CTA general de WhatsApp (sin productos) */ .rasa-whatsapp-cta { margin-top: 8px; } .rasa-whatsapp-cta .rasa-btn { width: 100%; padding: 9px 12px; font-size: 13px; } /* Botón secundario / quick reply */ .rasa-btn-secundario { background: #fff; color: #5d4fff; border: 1.5px solid #5d4fff; } .rasa-btn-secundario:hover { background: #f1effe; } /* Caja para el CTA de "Ver más tours/paquetes" */ .rasa-ver-mas-cta { margin-top: 8px; } .rasa-ver-mas-cta .rasa-btn { width: 100%; padding: 9px 12px; font-size: 13px; } /* Lista de quick replies */ .rasa-quick-replies { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; } /* Nota auxiliar pequeña */ .rasa-hint { font-size: 12px; color: #888; margin-top: 4px; margin-bottom: 0; }