/* ── TROMPITO CHATBOT WIDGET CSS ── */ /* Fuentes requeridas en el del index.html: */ :root { --trompito-rojo: #D72B2B; --trompito-amarillo: #F5C518; --trompito-naranja: #E86A1A; --trompito-verde: #00c846; --trompito-crema: #F5EDD6; --trompito-negro: #0E0B06; --trompito-gris: #1C1710; } /* ── WIDGET BUTTON ── */ .trompito-wrap { position: fixed; bottom: 24px; right: 24px; z-index: 1100; /* mismo nivel que la ventana, por encima del nav */ display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .trompito-tooltip { background: var(--trompito-amarillo); color: #3B1F0A; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .75rem; letter-spacing: 1px; padding: .35rem .8rem; border-radius: 20px; white-space: nowrap; box-shadow: 0 4px 16px rgba(0,0,0,.3); animation: trompFloat 3s ease-in-out infinite; transition: opacity .4s; } @keyframes trompFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .trompito-btn { width: 56px; height: 56px; border-radius: 50%; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: visible; padding: 0; box-shadow: 0 8px 32px rgba(0,200,70,.3); animation: trompPulse 2.5s ease-in-out infinite; transition: transform .2s; position: relative; flex-shrink: 0; } .trompito-btn:hover { transform: scale(1.08); } .trompito-btn.open { animation: none; transform: scale(1.05); } .trompito-btn img { width: 56px; height: 56px; border-radius: 50%; } @keyframes trompPulse { 0%, 100% { box-shadow: 0 8px 32px rgba(0,200,70,.3), 0 0 0 0 rgba(245,197,24,.5); } 50% { box-shadow: 0 8px 32px rgba(0,200,70,.4), 0 0 0 14px rgba(245,197,24,0); } } .trompito-badge { position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--trompito-rojo); color: white; font-size: .65rem; font-weight: 900; display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; animation: badgeBounce 1s ease infinite; } @keyframes badgeBounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } /* ── CHAT WINDOW ── */ .chat-window { position: fixed; bottom: 92px; right: 24px; width: 370px; height: calc(100vh - 108px); /* ocupa casi toda la pantalla verticalmente */ max-height: 580px; /* pero no más de 580px */ background: var(--trompito-gris); border: 1px solid rgba(245,197,24,.2); border-radius: 18px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.6); transform: scale(.8) translateY(20px); opacity: 0; pointer-events: none; transition: all .35s cubic-bezier(.34,1.56,.64,1); transform-origin: bottom right; z-index: 1100; } .chat-window.open { transform: scale(1) translateY(0); opacity: 1; pointer-events: all; } .chat-header { background: linear-gradient(135deg, var(--trompito-rojo), var(--trompito-naranja)); padding: .9rem 1.1rem; display: flex; align-items: center; gap: .8rem; flex-shrink: 0; } .chat-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--trompito-verde); border: 2px solid rgba(245,197,24,.8); overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .chat-avatar img { width: 100%; height: 100%; object-fit: contain; } .chat-header-info { flex: 1; } .chat-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.2rem; letter-spacing: 2px; color: var(--trompito-crema); line-height: 1; } .chat-status { font-size: .72rem; color: rgba(245,237,214,.7); display: flex; align-items: center; gap: .4rem; margin-top: .2rem; } .status-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; animation: blink 2s ease infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .4; } } .chat-lang { font-family: 'Barlow Condensed', sans-serif; font-size: .65rem; letter-spacing: 1px; background: rgba(0,0,0,.2); padding: .2rem .5rem; border-radius: 10px; color: rgba(245,237,214,.7); } .chat-close { background: none; border: none; color: rgba(245,237,214,.7); font-size: 1.2rem; cursor: pointer; transition: color .2s; line-height: 1; padding: .2rem; } .chat-close:hover { color: var(--trompito-crema); } /* Lead score bar */ .lead-bar { background: rgba(0,0,0,.3); padding: .4rem 1rem; display: flex; align-items: center; gap: .6rem; flex-shrink: 0; } .lead-label { font-family: 'Barlow Condensed', sans-serif; font-size: .65rem; letter-spacing: 1px; text-transform: uppercase; color: rgba(245,197,24,.5); } .lead-track { flex: 1; height: 4px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; } .lead-fill { height: 100%; background: linear-gradient(90deg, var(--trompito-amarillo), var(--trompito-verde)); border-radius: 2px; transition: width .5s ease; } .lead-score-val { font-family: 'Bebas Neue', sans-serif; font-size: .85rem; color: var(--trompito-amarillo); } .chat-messages { flex: 1; overflow-y: auto; padding: .9rem; display: flex; flex-direction: column; gap: .7rem; scrollbar-width: thin; scrollbar-color: rgba(245,197,24,.2) transparent; } .chat-messages::-webkit-scrollbar { width: 4px; } .chat-messages::-webkit-scrollbar-thumb { background: rgba(245,197,24,.2); border-radius: 2px; } .msg { display: flex; gap: .5rem; align-items: flex-end; animation: msgIn .3s ease; } @keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .msg.user { flex-direction: row-reverse; } .msg-av { width: 28px; height: 28px; border-radius: 50%; background: var(--trompito-verde); display: flex; align-items: center; justify-content: center; font-size: .85rem; flex-shrink: 0; border: 1px solid rgba(245,197,24,.6); overflow: hidden; } .msg-av img { width: 100%; height: 100%; object-fit: contain; } .msg-bubble { max-width: 78%; padding: .6rem .85rem; border-radius: 14px; font-size: .875rem; line-height: 1.5; white-space: pre-wrap; } .msg.bot .msg-bubble { background: rgba(245,197,24,.08); border: 1px solid rgba(245,197,24,.12); color: var(--trompito-crema); border-bottom-left-radius: 4px; } .msg.user .msg-bubble { background: linear-gradient(135deg, var(--trompito-rojo), #c42020); color: var(--trompito-crema); border-bottom-right-radius: 4px; } .quick-replies { display: flex; flex-wrap: wrap; gap: .4rem; padding-left: 33px; margin-top: .2rem; } .quick-btn { background: none; border: 1px solid rgba(245,197,24,.3); color: var(--trompito-amarillo); font-family: 'Barlow Condensed', sans-serif; font-size: .75rem; letter-spacing: .5px; padding: .3rem .7rem; border-radius: 20px; cursor: pointer; transition: all .2s; } .quick-btn:hover { background: rgba(245,197,24,.1); border-color: rgba(245,197,24,.6); } .quick-btn.featured { background: rgba(245,197,24,.15); border-color: rgba(245,197,24,.6); } .typing { display: flex; gap: .5rem; align-items: flex-end; } .typing-dots { background: rgba(245,197,24,.08); border: 1px solid rgba(245,197,24,.12); border-radius: 14px; border-bottom-left-radius: 4px; padding: .65rem .9rem; display: flex; gap: 4px; align-items: center; } .typing-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--trompito-amarillo); opacity: .4; animation: dot 1.2s ease infinite; } .typing-dots span:nth-child(2) { animation-delay: .2s; } .typing-dots span:nth-child(3) { animation-delay: .4s; } @keyframes dot { 0%, 100% { opacity: .4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } } /* Reservation form */ .res-form { background: rgba(0,0,0,.3); border: 1px solid rgba(245,197,24,.15); border-radius: 10px; padding: .8rem; display: flex; flex-direction: column; gap: .5rem; margin-top: .3rem; margin-left: 33px; } .res-form label { font-family: 'Barlow Condensed', sans-serif; font-size: .7rem; letter-spacing: 2px; text-transform: uppercase; color: rgba(245,197,24,.6); } .res-form input, .res-form select { background: rgba(245,197,24,.05); border: 1px solid rgba(245,197,24,.2); color: var(--trompito-crema); font-family: 'Barlow', sans-serif; font-size: .85rem; padding: .5rem .7rem; border-radius: 6px; outline: none; width: 100%; transition: border-color .2s; } .res-form input:focus, .res-form select:focus { border-color: rgba(245,197,24,.5); } .res-form select { cursor: pointer; } .res-form select option { background: #1C1710; } .res-form-btn { background: linear-gradient(135deg, var(--trompito-rojo), var(--trompito-naranja)); color: var(--trompito-crema); border: none; border-radius: 8px; padding: .6rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .82rem; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: transform .2s; margin-top: .2rem; } .res-form-btn:hover { transform: translateY(-1px); } /* Package cards */ .pkg-cards { display: flex; flex-direction: column; gap: .5rem; margin-top: .3rem; margin-left: 33px; } .pkg-card { background: rgba(245,197,24,.06); border: 1px solid rgba(245,197,24,.15); border-radius: 10px; padding: .7rem .9rem; cursor: pointer; transition: all .2s; display: flex; justify-content: space-between; align-items: center; } .pkg-card:hover { background: rgba(245,197,24,.12); border-color: rgba(245,197,24,.4); transform: translateX(3px); } .pkg-card.featured { border-color: var(--trompito-amarillo); background: rgba(245,197,24,.1); } .pkg-card .pkg-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .95rem; color: var(--trompito-crema); } .pkg-card .pkg-price { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; color: var(--trompito-amarillo); } .pkg-card .pkg-tag { font-size: .65rem; color: rgba(245,237,214,.5); margin-top: .1rem; } .pkg-card.featured .pkg-tag { color: var(--trompito-amarillo); } /* Rating */ .rating-wrap { display: flex; gap: .4rem; padding-left: 33px; margin-top: .2rem; } .star-btn { font-size: 1.5rem; background: none; border: none; cursor: pointer; transition: transform .15s; opacity: .4; filter: grayscale(1); } .star-btn:hover, .star-btn.active { opacity: 1; filter: none; transform: scale(1.2); } .chat-input-wrap { padding: .75rem; border-top: 1px solid rgba(245,197,24,.1); display: flex; gap: .5rem; flex-shrink: 0; } .chat-input { flex: 1; background: rgba(245,197,24,.06); border: 1px solid rgba(245,197,24,.15); border-radius: 24px; padding: .6rem 1rem; color: var(--trompito-crema); font-family: 'Barlow', sans-serif; font-size: .875rem; outline: none; transition: border-color .2s; } .chat-input:focus { border-color: rgba(245,197,24,.4); } .chat-input::placeholder { color: rgba(245,237,214,.3); } .chat-send { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--trompito-rojo), var(--trompito-naranja)); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: transform .2s, opacity .2s; flex-shrink: 0; color: white; } .chat-send:hover { transform: scale(1.1); } .chat-send:disabled { opacity: .5; cursor: not-allowed; } @media (max-width: 420px) { .chat-window { width: calc(100vw - 16px); right: 8px; bottom: 88px; top: 16px; max-height: none; } .trompito-wrap { right: 12px; bottom: 16px; } }