/* ============================================================ FORROS RH — CHATBOT CSS OPTIMIZADO / PREMIUM / RESPONSIVE Compatible con las clases actuales .frh-* ============================================================ */ /* ============================================================ 1. VARIABLES ============================================================ */ .frh-chat { --frh-primary: #e63946; --frh-primary-dark: #c4172a; --frh-primary-light: #ff7180; --frh-primary-rgb: 230, 57, 70; --frh-success: #25d366; --frh-success-dark: #128c7e; --frh-bg: #0b0b16; --frh-panel: #11111f; --frh-panel-2: #151525; --frh-text: #ffffff; --frh-text-soft: rgba(255,255,255,.78); --frh-text-muted: rgba(255,255,255,.45); --frh-border: rgba(255,255,255,.09); --frh-border-soft: rgba(255,255,255,.055); --frh-bot: rgba(255,255,255,.065); --frh-user-from: #e63946; --frh-user-to: #b01020; --frh-radius: 20px; --frh-radius-sm: 12px; --frh-shadow: 0 30px 80px rgba(0,0,0,.55), 0 10px 30px rgba(0,0,0,.35); --frh-transition: 220ms cubic-bezier(.4,0,.2,1); position: fixed; right: 24px; bottom: 96px; z-index: 9200; font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--frh-text); box-sizing: border-box; } .frh-chat *, .frh-chat *::before, .frh-chat *::after { box-sizing: border-box; } /* ============================================================ 2. BOTÓN FLOTANTE ============================================================ */ .frh-chat__toggle { position: relative; width: 60px; height: 60px; display: grid; place-items: center; border: 0; border-radius: 50%; background: linear-gradient( 145deg, var(--frh-primary-light) 0%, var(--frh-primary) 42%, var(--frh-primary-dark) 100% ); color: #fff; cursor: pointer; font-size: 1.4rem; box-shadow: 0 10px 30px rgba(var(--frh-primary-rgb), .45), 0 3px 10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25); transition: transform var(--frh-transition), box-shadow var(--frh-transition); animation: frhPulse 3.5s ease-in-out infinite; -webkit-tap-highlight-color: transparent; } .frh-chat__toggle:hover { transform: translateY(-2px) scale(1.07); box-shadow: 0 16px 42px rgba(var(--frh-primary-rgb), .6), 0 5px 15px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25); animation: none; } .frh-chat__toggle:active { transform: scale(.94); } @keyframes frhPulse { 0%, 100% { box-shadow: 0 10px 30px rgba(var(--frh-primary-rgb), .45), 0 0 0 0 rgba(var(--frh-primary-rgb), .28); } 50% { box-shadow: 0 10px 30px rgba(var(--frh-primary-rgb), .45), 0 0 0 15px rgba(var(--frh-primary-rgb), 0); } } /* ============================================================ 3. ICONOS OPEN / CLOSE ============================================================ */ .frh-chat__icon-open, .frh-chat__icon-close { position: absolute; display: grid; place-items: center; transition: opacity .25s ease, transform .3s cubic-bezier(.34,1.56,.64,1); } .frh-chat__icon-open { opacity: 1; transform: rotate(0) scale(1); } .frh-chat__icon-close { opacity: 0; transform: rotate(-90deg) scale(.5); } .frh-chat.is-open .frh-chat__icon-open { opacity: 0; transform: rotate(90deg) scale(.5); } .frh-chat.is-open .frh-chat__icon-close { opacity: 1; transform: rotate(0) scale(1); } .frh-chat.is-open .frh-chat__toggle { animation: none; } /* ============================================================ 4. BADGE ============================================================ */ .frh-chat__badge { position: absolute; top: -3px; right: -3px; width: 22px; height: 22px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; background: linear-gradient( 135deg, var(--frh-success), var(--frh-success-dark) ); color: #fff; font-size: .62rem; font-weight: 800; box-shadow: 0 3px 10px rgba(37,211,102,.45); transition: opacity .25s ease, transform .3s cubic-bezier(.34,1.56,.64,1); pointer-events: none; } .frh-chat.is-open .frh-chat__badge { opacity: 0; transform: scale(0) rotate(-25deg); } /* ============================================================ 5. PANEL PRINCIPAL ============================================================ */ .frh-chat__panel { position: absolute; right: 0; bottom: 74px; width: 380px; max-height: 620px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 24px; background: linear-gradient( 180deg, rgba(18,18,32,.97), rgba(9,9,20,.97) ); box-shadow: 0 35px 90px rgba(0,0,0,.65), 0 10px 35px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(28px) saturate(1.4); -webkit-backdrop-filter: blur(28px) saturate(1.4); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(18px) scale(.96); transform-origin: bottom right; transition: opacity .25s ease, visibility .25s ease, transform .35s cubic-bezier(.34,1.56,.64,1); } .frh-chat.is-open .frh-chat__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); } /* ============================================================ 6. HEADER ============================================================ */ .frh-chat__header { position: relative; display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 13px 15px; flex-shrink: 0; overflow: hidden; color: #fff; background: radial-gradient( circle at 10% 50%, rgba(230,57,70,.25), transparent 45% ), linear-gradient( 145deg, #19050b, #250813 55%, #12030a ); } .frh-chat__header::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 120deg, transparent 20%, rgba(255,255,255,.035) 50%, transparent 80% ); pointer-events: none; } .frh-chat__header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient( 90deg, transparent, rgba(230,57,70,.7), transparent ); } /* ============================================================ 7. AVATAR ============================================================ */ .frh-chat__avatar { position: relative; width: 43px; height: 43px; flex: 0 0 43px; } .frh-chat__avatar::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: conic-gradient( var(--frh-primary), #ff9aa3, var(--frh-primary), var(--frh-primary-dark), var(--frh-primary) ); animation: frhAvatarRing 5s linear infinite; } .frh-chat__avatar img { position: relative; z-index: 1; width: 100%; height: 100%; display: block; object-fit: cover; border: 2px solid #11111f; border-radius: 50%; background: #111; } @keyframes frhAvatarRing { to { transform: rotate(360deg); } } /* ============================================================ 8. ESTADO ONLINE ============================================================ */ .frh-chat__dot { position: absolute; right: 0; bottom: 0; z-index: 2; width: 11px; height: 11px; border: 2px solid #11111f; border-radius: 50%; background: var(--frh-success); box-shadow: 0 0 8px rgba(37,211,102,.7); animation: frhOnlinePulse 2.5s ease-in-out infinite; } @keyframes frhOnlinePulse { 0%, 100% { box-shadow: 0 0 6px rgba(37,211,102,.55); } 50% { box-shadow: 0 0 14px rgba(37,211,102,.95); } } /* ============================================================ 9. INFORMACIÓN DEL HEADER ============================================================ */ .frh-chat__hinfo { position: relative; z-index: 1; flex: 1; min-width: 0; } .frh-chat__eyebrow { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; color: rgba(255,255,255,.45); font-size: .57rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .frh-chat__eyebrow i { color: var(--frh-primary-light); } .frh-chat__hinfo strong { display: block; overflow: hidden; color: #fff; font-size: .95rem; font-weight: 750; white-space: nowrap; text-overflow: ellipsis; } .frh-chat__hinfo .frh-chat__status { display: flex; align-items: center; gap: 5px; margin-top: 2px; color: rgba(255,255,255,.48); font-size: .67rem; } .frh-chat__status i { color: var(--frh-success); font-size: .45rem; text-shadow: 0 0 5px rgba(37,211,102,.8); } /* ============================================================ 10. BOTONES DEL HEADER ============================================================ */ .frh-chat__close, .frh-chat__help { position: relative; z-index: 2; width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 31px; border: 0; border-radius: 50%; cursor: pointer; color: rgba(255,255,255,.65); transition: background var(--frh-transition), color var(--frh-transition), transform var(--frh-transition); } .frh-chat__close { background: rgba(255,255,255,.09); } .frh-chat__help { background: rgba(255,255,255,.05); } .frh-chat__close:hover { color: #fff; background: rgba(230,57,70,.45); transform: scale(1.08) rotate(90deg); } .frh-chat__help:hover { color: #fff; background: rgba(255,255,255,.15); transform: scale(1.08); } /* ============================================================ 11. ÁREA DE MENSAJES ============================================================ */ .frh-chat__msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 17px 14px 9px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(230,57,70,.45) transparent; } .frh-chat__msgs::-webkit-scrollbar { width: 4px; } .frh-chat__msgs::-webkit-scrollbar-track { background: transparent; } .frh-chat__msgs::-webkit-scrollbar-thumb { border-radius: 10px; background: linear-gradient( 180deg, rgba(230,57,70,.55), rgba(230,57,70,.12) ); } /* ============================================================ 12. MENSAJES ============================================================ */ .frh-msg { max-width: 87%; display: flex; flex-direction: column; gap: 3px; animation: frhMessageIn .28s cubic-bezier(.34,1.56,.64,1); } .frh-msg.bot { align-self: flex-start; } .frh-msg.user { align-self: flex-end; } @keyframes frhMessageIn { from { opacity: 0; transform: translateY(9px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ============================================================ 13. BURBUJAS ============================================================ */ .frh-msg__bubble { position: relative; padding: 11px 14px; border-radius: 18px; font-size: .84rem; line-height: 1.58; overflow-wrap: anywhere; word-break: break-word; } .frh-msg.bot .frh-msg__bubble { color: rgba(255,255,255,.91); background: linear-gradient( 145deg, rgba(255,255,255,.075), rgba(255,255,255,.045) ); border: 1px solid rgba(255,255,255,.075); border-bottom-left-radius: 5px; box-shadow: 0 3px 14px rgba(0,0,0,.22); } .frh-msg.user .frh-msg__bubble { color: #fff; background: linear-gradient( 145deg, var(--frh-user-from), var(--frh-user-to) ); border-bottom-right-radius: 5px; box-shadow: 0 5px 20px rgba(230,57,70,.32), inset 0 1px 0 rgba(255,255,255,.15); } .frh-msg__bubble strong { font-weight: 750; } .frh-msg__bubble em { font-style: italic; } .frh-msg__bubble a { color: #ff9aa3; text-decoration: underline; text-underline-offset: 2px; word-break: break-all; } /* ============================================================ 14. HORA ============================================================ */ .frh-msg__time { padding: 0 5px; color: rgba(255,255,255,.34); font-size: .61rem; } .frh-msg.bot .frh-msg__time { align-self: flex-start; } .frh-msg.user .frh-msg__time { align-self: flex-end; } /* ============================================================ 15. BOTONES DENTRO DE MENSAJES ============================================================ */ .frh-msg__btns { display: flex; flex-direction: column; gap: 7px; margin-top: 9px; } .frh-msg__btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 13px; border: 0; border-radius: 11px; cursor: pointer; font-family: inherit; font-size: .78rem; font-weight: 700; text-decoration: none; transition: transform var(--frh-transition), box-shadow var(--frh-transition), background var(--frh-transition); } .frh-msg__btn:hover { transform: translateY(-2px); } .frh-msg__btn:active { transform: translateY(0) scale(.98); } .frh-msg__btn.primary { color: #fff; background: linear-gradient( 145deg, var(--frh-primary), var(--frh-primary-dark) ); box-shadow: 0 4px 14px rgba(230,57,70,.35), inset 0 1px 0 rgba(255,255,255,.16); } .frh-msg__btn.primary:hover { box-shadow: 0 8px 24px rgba(230,57,70,.48); } .frh-msg__btn.green { color: #fff; background: linear-gradient( 135deg, var(--frh-success), var(--frh-success-dark) ); box-shadow: 0 4px 14px rgba(37,211,102,.28); } .frh-msg__btn.ghost { color: rgba(255,255,255,.86); background: rgba(255,255,255,.065); border: 1px solid rgba(255,255,255,.11); } .frh-msg__btn.ghost:hover { background: rgba(255,255,255,.12); } /* ============================================================ 16. RESPUESTAS RÁPIDAS ============================================================ */ .frh-chat__qbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 9px 12px 10px; flex-shrink: 0; border-top: 1px solid rgba(255,255,255,.05); background: rgba(0,0,0,.16); } .frh-chat__qbar::before { content: "Sugerencias rápidas"; width: 100%; color: rgba(255,255,255,.38); font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .frh-chat__qbar:not(.has-items)::before { display: none; } .frh-qr { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 5px 10px 5px 6px; border: 1px solid rgba(230,57,70,.28); border-radius: 999px; background: rgba(230,57,70,.065); color: #ff8d98; cursor: pointer; font-family: inherit; font-size: .73rem; font-weight: 650; white-space: nowrap; text-decoration: none; transition: transform var(--frh-transition), background var(--frh-transition), border-color var(--frh-transition), box-shadow var(--frh-transition); } .frh-qr:hover { color: #fff; background: rgba(230,57,70,.15); border-color: rgba(230,57,70,.6); transform: translateY(-1px); box-shadow: 0 5px 14px rgba(230,57,70,.18); } .frh-qr:active { transform: scale(.97); } .frh-qr__icon { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 22px; border-radius: 50%; background: rgba(230,57,70,.78); color: #fff; font-size: .6rem; } .frh-qr--green { color: #35d978; border-color: rgba(37,211,102,.3); background: rgba(37,211,102,.055); } .frh-qr--green .frh-qr__icon { background: rgba(37,211,102,.82); } .frh-qr--green:hover { background: rgba(37,211,102,.13); border-color: rgba(37,211,102,.65); box-shadow: 0 5px 14px rgba(37,211,102,.15); } /* ============================================================ 17. INPUT / FOOTER ============================================================ */ .frh-chat__foot { display: flex; align-items: center; gap: 8px; padding: 10px 12px 13px; flex-shrink: 0; border-top: 1px solid rgba(255,255,255,.055); background: rgba(0,0,0,.19); } .frh-chat__inp { flex: 1; min-width: 0; min-height: 42px; padding: 9px 15px; border: 1px solid rgba(255,255,255,.1); border-radius: 22px; outline: none; background: rgba(255,255,255,.065); color: rgba(255,255,255,.94); font-family: inherit; font-size: .84rem; transition: border-color var(--frh-transition), background var(--frh-transition), box-shadow var(--frh-transition); } .frh-chat__inp::placeholder { color: rgba(255,255,255,.28); } .frh-chat__inp:hover { border-color: rgba(255,255,255,.17); } .frh-chat__inp:focus { border-color: rgba(230,57,70,.65); background: rgba(255,255,255,.09); box-shadow: 0 0 0 3px rgba(230,57,70,.1); } /* ============================================================ 18. BOTÓN ENVIAR ============================================================ */ .frh-chat__send { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 42px; border: 0; border-radius: 50%; cursor: pointer; background: linear-gradient( 145deg, var(--frh-primary-light), var(--frh-primary-dark) ); color: #fff; font-size: .9rem; box-shadow: 0 5px 17px rgba(230,57,70,.42), inset 0 1px 0 rgba(255,255,255,.18); transition: transform var(--frh-transition), box-shadow var(--frh-transition); } .frh-chat__send:hover { transform: scale(1.09) rotate(-5deg); box-shadow: 0 8px 25px rgba(230,57,70,.55); } .frh-chat__send:active { transform: scale(.94); } /* ============================================================ 19. TYPING ============================================================ */ .frh-msg.typing .frh-msg__bubble { display: flex; align-items: center; gap: 5px; min-width: 58px; padding: 13px 15px; } .frh-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.42); animation: frhDot 1.3s ease-in-out infinite; } .frh-dot:nth-child(2) { animation-delay: .2s; } .frh-dot:nth-child(3) { animation-delay: .4s; } @keyframes frhDot { 0%, 60%, 100% { opacity: .4; transform: translateY(0) scale(1); } 30% { opacity: 1; transform: translateY(-6px) scale(1.1); } } /* ============================================================ 20. MAPA ============================================================ */ .frh-map-card { margin-top: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: rgba(255,255,255,.04); box-shadow: 0 4px 15px rgba(0,0,0,.18); } .frh-map-card iframe { display: block; width: 100%; height: 165px; border: 0; } .frh-map-info { display: flex; align-items: center; gap: 9px; padding: 10px 13px; background: rgba(255,255,255,.025); font-size: .78rem; } .frh-map-info i { flex-shrink: 0; color: var(--frh-primary); font-size: 1rem; } .frh-map-info div { line-height: 1.4; } .frh-map-info strong { display: block; font-size: .81rem; } .frh-map-info span { display: block; color: rgba(255,255,255,.48); font-size: .71rem; } /* ============================================================ 21. IMÁGENES / AUDIO / ARCHIVOS ============================================================ */ .frh-msg__audio { width: 100%; max-width: 210px; height: 34px; border-radius: 9px; outline: none; } .frh-msg__img { display: block; max-width: 190px; margin-top: 5px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; cursor: pointer; box-shadow: 0 5px 18px rgba(0,0,0,.28); transition: opacity .2s ease, transform .2s ease; } .frh-msg__img:hover { opacity: .9; transform: scale(1.015); } .frh-msg__file { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid rgba(255,255,255,.09); border-radius: 11px; background: rgba(255,255,255,.065); color: rgba(255,255,255,.87); font-size: .78rem; text-decoration: none; transition: background var(--frh-transition), transform var(--frh-transition); } .frh-msg__file:hover { background: rgba(255,255,255,.12); transform: translateY(-1px); } /* ============================================================ 22. TARJETA CLIENTE ============================================================ */ .frh-lead-card { display: flex; flex-direction: column; gap: 6px; margin-bottom: 2px; padding: 11px 14px; border: 1px solid rgba(230,57,70,.2); border-radius: 13px; background: linear-gradient( 145deg, rgba(230,57,70,.1), rgba(230,57,70,.045) ); box-shadow: 0 3px 12px rgba(230,57,70,.08); } .frh-lead-card__row { display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.9); font-size: .82rem; } .frh-lead-card__row i { width: 16px; flex-shrink: 0; color: rgba(230,57,70,.85); text-align: center; } /* ============================================================ 23. GUÍA DE PASOS ============================================================ */ .frh-guide-steps { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; } .frh-guide-step { display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; background: rgba(255,255,255,.055); transition: background var(--frh-transition), transform var(--frh-transition); } .frh-guide-step:hover { background: rgba(255,255,255,.085); transform: translateX(2px); } .frh-guide-step-num { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; background: linear-gradient( 135deg, var(--frh-primary), var(--frh-primary-dark) ); color: #fff; font-size: .72rem; font-weight: 800; } .frh-guide-step-body { display: flex; flex-direction: column; gap: 2px; } .frh-guide-step-body strong { color: rgba(255,255,255,.95); font-size: .82rem; } .frh-guide-step-body span { color: rgba(255,255,255,.5); font-size: .73rem; line-height: 1.4; } /* ============================================================ 24. GRID DE AYUDA ============================================================ */ .frh-help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 10px 0 4px; } .frh-help-card { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; padding: 11px 9px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; background: rgba(255,255,255,.05); color: inherit; cursor: pointer; font-family: inherit; text-align: center; transition: background var(--frh-transition), border-color var(--frh-transition), transform var(--frh-transition); } .frh-help-card:hover { background: rgba(230,57,70,.12); border-color: rgba(230,57,70,.3); transform: translateY(-2px); } .frh-help-card i { color: var(--frh-primary); font-size: 1.15rem; } .frh-help-card span { color: rgba(255,255,255,.8); font-size: .72rem; font-weight: 650; line-height: 1.3; } /* ============================================================ 25. GRID DE SERVICIOS ============================================================ */ .frh-greet-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; margin: 12px 0 4px; } .frh-greet-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: rgba(255,255,255,.055); color: inherit; cursor: pointer; font-family: inherit; text-align: center; transition: background var(--frh-transition), border-color var(--frh-transition), transform var(--frh-transition); } .frh-greet-tile:hover { background: rgba(230,57,70,.13); border-color: rgba(230,57,70,.34); transform: translateY(-2px); } .frh-greet-tile i { color: var(--frh-primary); font-size: 1.15rem; } .frh-greet-tile span { color: rgba(255,255,255,.85); font-size: .72rem; font-weight: 700; } /* ============================================================ 26. TARJETA USUARIO ============================================================ */ .frh-greet-card { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; padding: 10px 12px; border: 1px solid rgba(230,57,70,.2); border-radius: 13px; background: rgba(230,57,70,.075); } .frh-greet-card__avatar { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; background: linear-gradient( 135deg, var(--frh-primary), var(--frh-primary-dark) ); color: #fff; font-size: 1rem; font-weight: 800; } .frh-greet-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .frh-greet-card__name { overflow: hidden; color: #fff; font-size: .87rem; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; } .frh-greet-card__sub { color: rgba(255,255,255,.45); font-size: .67rem; } /* ============================================================ 27. RESEÑAS ============================================================ */ .frh-reviews { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .frh-review { padding: 10px 12px; border: 1px solid rgba(255,255,255,.07); border-left: 3px solid rgba(251,191,36,.5); border-radius: 10px; background: rgba(255,255,255,.045); } .frh-review__head { margin-bottom: 4px; } .frh-review__text { margin: 0 0 5px; color: rgba(255,255,255,.76); font-size: .76rem; font-style: italic; line-height: 1.45; } .frh-review__name { color: rgba(255,255,255,.4); font-size: .67rem; font-weight: 700; } /* ============================================================ 28. RESPUESTA DEL ADMIN ============================================================ */ .frh-msg.admin-reply .frh-msg__bubble { color: rgba(255,255,255,.9); background: rgba(230,57,70,.11); border: 1px solid rgba(230,57,70,.24); border-bottom-left-radius: 4px; } .frh-msg.admin-reply .frh-msg__bubble::before { content: "🧑‍💼 Asesor RH"; display: block; margin-bottom: 4px; color: rgba(230,57,70,.85); font-size: .64rem; font-weight: 750; } /* ============================================================ 29. TARJETAS BANCARIAS ============================================================ */ .frh-bank-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .frh-bank-card { overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; background: rgba(255,255,255,.045); box-shadow: 0 5px 18px rgba(0,0,0,.22); transition: transform var(--frh-transition), box-shadow var(--frh-transition); } .frh-bank-card:hover { transform: translateY(-2px); box-shadow: 0 9px 27px rgba(0,0,0,.3); } .frh-bank-card__head { display: flex; align-items: center; gap: 10px; padding: 10px 13px 8px; border-bottom: 1px solid rgba(255,255,255,.065); background: linear-gradient( 135deg, rgba(230,57,70,.16), rgba(196,23,42,.07) ); } .frh-bank-card__logo { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; background: linear-gradient( 135deg, var(--frh-primary), var(--frh-primary-dark) ); color: #fff; font-size: .95rem; box-shadow: 0 3px 9px rgba(230,57,70,.35); } .frh-bank-card__head-info { flex: 1; min-width: 0; } .frh-bank-card__head-info strong { display: block; overflow: hidden; color: #fff; font-size: .81rem; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; } .frh-bank-card__head-info span { color: rgba(255,255,255,.45); font-size: .67rem; } .frh-bank-card__body { display: flex; flex-direction: column; gap: 6px; padding: 10px 13px 12px; } .frh-bank-card__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .79rem; } .frh-bank-card__label { flex-shrink: 0; color: rgba(255,255,255,.43); font-size: .69rem; } .frh-bank-card__value { flex: 1; overflow: hidden; color: rgba(255,255,255,.9); font-weight: 600; text-align: right; text-overflow: ellipsis; } .frh-bank-card__num { color: #fff; font-family: "Courier New", monospace; font-size: .94rem; font-weight: 800; letter-spacing: .1em; } .frh-bank-card__copy { width: 27px; height: 27px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 0; border-radius: 8px; background: rgba(255,255,255,.075); color: rgba(255,255,255,.6); cursor: pointer; transition: background var(--frh-transition), color var(--frh-transition), transform var(--frh-transition); } .frh-bank-card__copy:hover { color: var(--frh-success); background: rgba(37,211,102,.18); transform: scale(1.08); } .frh-bank-card__copy.copied { color: var(--frh-success); background: rgba(37,211,102,.22); } /* ============================================================ 30. CHAT EN VIVO ============================================================ */ .frh-live-only { display: none !important; } .frh-chat.is-live .frh-live-only { display: flex !important; } .frh-chat__icon-btn { width: 36px; height: 36px; display: grid; place-items: center; flex-shrink: 0; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; background: rgba(255,255,255,.055); color: rgba(255,255,255,.62); cursor: pointer; transition: background var(--frh-transition), color var(--frh-transition), transform var(--frh-transition); } .frh-chat__icon-btn:hover { color: #fff; background: rgba(255,255,255,.12); transform: scale(1.06); } .frh-chat__icon-btn.recording { color: #ff7b86; background: rgba(230,57,70,.18); border-color: rgba(230,57,70,.55); animation: liveRecPulse 1s ease-in-out infinite; } @keyframes liveRecPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(230,57,70,.35); } 50% { box-shadow: 0 0 0 7px rgba(230,57,70,0); } } .frh-attach-preview { display: flex; align-items: center; gap: 7px; margin: 0 12px 7px; padding: 7px 11px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; background: rgba(255,255,255,.045); color: rgba(255,255,255,.62); } /* ============================================================ 31. TEASER ============================================================ */ .frh-chat__teaser { position: absolute; right: 0; bottom: 70px; max-width: 280px; padding: 10px 36px 10px 14px; border-radius: 14px 14px 4px 14px; background: #fff; color: #171725; font-size: .82rem; font-weight: 650; box-shadow: 0 10px 30px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px) scale(.96); transition: opacity .25s ease, visibility .25s ease, transform .25s ease; } .frh-chat__teaser.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); } .frh-chat.is-open .frh-chat__teaser { opacity: 0; visibility: hidden; pointer-events: none; } .frh-chat__teaser-x { position: absolute; top: 5px; right: 7px; padding: 3px; border: 0; background: transparent; color: #888; cursor: pointer; font-size: .7rem; } .frh-chat__teaser-x:hover { color: var(--frh-primary); } /* ============================================================ 32. ACCESIBILIDAD ============================================================ */ .frh-chat button:focus-visible, .frh-chat input:focus-visible, .frh-chat a:focus-visible { outline: 2px solid var(--frh-primary-light); outline-offset: 3px; } .frh-chat button:disabled, .frh-chat input:disabled { opacity: .55; cursor: not-allowed; } /* ============================================================ 33. MODO CLARO ============================================================ */ [data-theme="light"] .frh-chat__panel { background: rgba(248,249,252,.97); border-color: rgba(0,0,0,.08); box-shadow: 0 30px 80px rgba(0,0,0,.17), 0 8px 30px rgba(0,0,0,.08); } [data-theme="light"] .frh-chat__msgs { scrollbar-color: rgba(0,0,0,.16) transparent; } [data-theme="light"] .frh-chat__msgs::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); } [data-theme="light"] .frh-msg.bot .frh-msg__bubble { color: #171725; background: rgba(0,0,0,.045); border-color: rgba(0,0,0,.07); box-shadow: 0 3px 10px rgba(0,0,0,.05); } [data-theme="light"] .frh-msg__time { color: rgba(0,0,0,.32); } [data-theme="light"] .frh-msg__bubble a { color: var(--frh-primary-dark); } [data-theme="light"] .frh-msg__btn.ghost { color: #1a1a2e; background: rgba(0,0,0,.045); border-color: rgba(0,0,0,.09); } [data-theme="light"] .frh-chat__qbar { border-top-color: rgba(0,0,0,.06); background: rgba(0,0,0,.025); } [data-theme="light"] .frh-chat__qbar::before { color: rgba(0,0,0,.42); } [data-theme="light"] .frh-chat__foot { border-top-color: rgba(0,0,0,.07); background: rgba(0,0,0,.025); } [data-theme="light"] .frh-chat__inp { color: #171725; background: rgba(0,0,0,.045); border-color: rgba(0,0,0,.1); } [data-theme="light"] .frh-chat__inp::placeholder { color: rgba(0,0,0,.3); } [data-theme="light"] .frh-chat__inp:focus { background: #fff; } [data-theme="light"] .frh-guide-step { background: rgba(0,0,0,.035); border-color: rgba(0,0,0,.08); } [data-theme="light"] .frh-guide-step-body strong { color: #111; } [data-theme="light"] .frh-guide-step-body span { color: rgba(0,0,0,.52); } [data-theme="light"] .frh-help-card, [data-theme="light"] .frh-greet-tile { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.08); } [data-theme="light"] .frh-help-card span, [data-theme="light"] .frh-greet-tile span { color: rgba(0,0,0,.72); } [data-theme="light"] .frh-greet-card { background: rgba(230,57,70,.06); } [data-theme="light"] .frh-greet-card__name { color: #151522; } [data-theme="light"] .frh-greet-card__sub { color: rgba(0,0,0,.45); } [data-theme="light"] .frh-review { background: rgba(0,0,0,.025); border-color: rgba(0,0,0,.07); } [data-theme="light"] .frh-review__text { color: rgba(0,0,0,.7); } [data-theme="light"] .frh-review__name { color: rgba(0,0,0,.4); } [data-theme="light"] .frh-bank-card { background: #f5f5f8; border-color: rgba(0,0,0,.08); } [data-theme="light"] .frh-bank-card__head { background: rgba(230,57,70,.06); border-bottom-color: rgba(0,0,0,.07); } [data-theme="light"] .frh-bank-card__head-info strong { color: #181825; } [data-theme="light"] .frh-bank-card__head-info span, [data-theme="light"] .frh-bank-card__label { color: rgba(0,0,0,.45); } [data-theme="light"] .frh-bank-card__value { color: #171725; } [data-theme="light"] .frh-bank-card__num { color: #171725; } [data-theme="light"] .frh-bank-card__copy { color: rgba(0,0,0,.5); background: rgba(0,0,0,.06); } [data-theme="light"] .frh-map-card { border-color: rgba(0,0,0,.09); background: #f4f4f8; } [data-theme="light"] .frh-map-info { background: rgba(0,0,0,.025); } [data-theme="light"] .frh-map-info span { color: rgba(0,0,0,.5); } /* ============================================================ 34. TABLET ============================================================ */ @media (max-width: 768px) { .frh-chat { right: 16px; bottom: 84px; } .frh-chat__panel { width: min( 380px, calc(100vw - 32px) ); max-height: min( 680px, calc(100dvh - 110px) ); } .frh-chat__teaser { max-width: calc(100vw - 100px); white-space: normal; line-height: 1.4; } } /* ============================================================ 35. MÓVIL ============================================================ */ @media (max-width: 480px) { .frh-chat { right: 12px; bottom: calc( 80px + env(safe-area-inset-bottom) ); } .frh-chat__panel { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; max-width: none; height: min( 700px, calc( 100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 8px ) ); max-height: none; border-radius: 20px 20px 0 0; transform-origin: bottom center; } .frh-chat__toggle { width: 53px; height: 53px; font-size: 1.25rem; } .frh-chat__header { min-height: 66px; padding: 10px 12px; } .frh-chat__avatar { width: 40px; height: 40px; flex-basis: 40px; } .frh-chat__hinfo strong { font-size: .9rem; } .frh-chat__msgs { padding: 12px 10px 5px; } .frh-msg { max-width: 92%; } .frh-msg__bubble { padding: 9px 11px; font-size: .82rem; } .frh-chat__qbar { padding: 7px 9px 8px; } .frh-qr { min-height: 32px; padding: 4px 8px 4px 5px; font-size: .69rem; } .frh-qr__icon { width: 20px; height: 20px; flex-basis: 20px; } .frh-chat__foot { padding: 8px 10px calc( 10px + env(safe-area-inset-bottom) ); } .frh-chat__inp { min-width: 0; min-height: 44px; padding: 8px 12px; /* * Evita zoom automático de Safari */ font-size: 16px; } .frh-chat__send { width: 44px; height: 44px; flex-basis: 44px; } .frh-chat__icon-btn { width: 44px; height: 44px; } .frh-chat__teaser { right: 0; bottom: 64px; max-width: calc(100vw - 90px); padding: 9px 32px 9px 12px; font-size: .75rem; white-space: normal; line-height: 1.35; } .frh-help-grid, .frh-greet-grid { gap: 6px; } } /* ============================================================ 36. MÓVILES MUY PEQUEÑOS ============================================================ */ @media (max-width: 360px) { .frh-chat { right: 10px; bottom: calc( 76px + env(safe-area-inset-bottom) ); } .frh-chat__toggle { width: 49px; height: 49px; font-size: 1.1rem; } .frh-chat__panel { height: min( 680px, calc( 100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 6px ) ); } .frh-chat__hinfo strong { font-size: .84rem; } .frh-chat__eyebrow { font-size: .52rem; } .frh-chat__close, .frh-chat__help { width: 29px; height: 29px; flex-basis: 29px; } .frh-msg__bubble { font-size: .8rem; } } /* ============================================================ 37. REDUCIR ANIMACIONES ============================================================ */ @media (prefers-reduced-motion: reduce) { .frh-chat *, .frh-chat *::before, .frh-chat *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ============================================================ 38. PANTALLAS GRANDES ============================================================ */ @media (min-width: 1400px) { .frh-chat { right: 32px; } .frh-chat__panel { width: 400px; max-height: 680px; } } /* ============================================================ FIN DEL CSS ============================================================ */