:root {
color-scheme: light;
--miriam1-teal: #4ab4af;
--miriam1-bg: #ffffff;
--miriam1-surface: #f9f9f9;
--miriam1-text: #222;
--miriam1-muted: #6b7280;
--miriam1-font: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
--radius: 12px;
--shadow: 0 10px 30px rgba(0, 0, 0, .15);
}
#chat-bubble {
position: fixed;
inset: auto 20px 20px auto;
width: 65px;
height: 65px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 26px;
color: #fff;
background: var(--miriam1-teal);
box-shadow: var(--shadow); outline: 2px solid white;
outline-offset: 0px;
z-index: 9998;
cursor: pointer;
border: none;
transition: transform .15s ease, box-shadow .15s ease, background-color 0.5s ease; -webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
user-select: none;
}
#chat-bubble:hover {
transform: translateY(-2px);
box-shadow: 0 14px 34px rgba(0, 0, 0, .2);
animation-play-state: paused;
}
#chat-bubble:active {
transform: translateY(0);
}
@media (max-width: 768px) {
#chat-bubble {
width: 52px;
height: 52px;
bottom: 60px;
right: 16px;
font-size: 22px;
}
}
#chat-bubble .badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 999px;
background: #ef4444;
color: #fff;
font-size: 12px;
display: none;
align-items: center;
justify-content: center;
font-weight: 700;
box-shadow: var(--shadow);
}
#chat-bubble[data-unread]:not([data-unread="0"]) .badge {
display: flex;
}
#chat-window {
position: fixed;
right: 20px;
bottom: 95px;
width: 420px;
max-width: 90vw;
height: 620px;
max-height: 75vh;
background: var(--miriam1-bg);
border: 1px solid #e5e7eb;
border-radius: var(--radius);
display: none;
flex-direction: column;
z-index: 9999;
box-shadow: var(--shadow);
overflow: hidden;
font-family: var(--miriam1-font);
} @media (max-width: 768px) {
#chat-window {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
border-radius: 0; padding-top: 0;
padding-bottom: 0;
} #chat-bubble:has(+ #chat-window[style*="display: flex"]),
body:has(#chat-window[style*="display: flex"]) #chat-bubble {
display: none !important;
}
} @media (max-width: 768px) {
body.chat-open #chat-bubble {
display: none !important;
}
body.chat-open #chat-bubble .proactive-message {
display: none !important;
}
}
#chat-header {
background: var(--miriam1-teal);
color: #fff;
padding: 12px 14px;
display: flex;
align-items: center;
gap: 10px; flex-shrink: 0;
}
@media (max-width: 768px) {
#chat-header {
padding: 10px 14px;
padding-top: max(44px, calc(10px + env(safe-area-inset-top)));
}
#chat-header .avatar {
width: 28px;
height: 28px;
line-height: 28px;
}
#chat-header .title {
font-size: 15px;
}
#chat-header .subtitle {
font-size: 11px;
}
}
#chat-header .avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: none;
font-weight: 700;
font-size: 0;
line-height: 32px;
text-align: center;
display: block;
flex-shrink: 0;
overflow: hidden;
}
#chat-header .title {
font-weight: 700;
line-height: 1.2;
}
#chat-header .subtitle {
font-size: 12px;
opacity: .9;
}
#chat-tools {
margin-left: auto;
display: flex;
gap: 6px;
align-items: center;
}
#chat-clear,
#chat-close {
background: transparent;
border: 0;
color: #fff;
cursor: pointer;
font-size: 18px;
line-height: 1;
display: grid;
place-items: center; padding: 8px;
min-width: 44px;
min-height: 44px;
-webkit-tap-highlight-color: transparent;
}
#chat-messages {
position: relative;
flex: 1;
padding: 14px;
overflow-y: auto;
overflow-x: hidden;
background: var(--miriam1-surface);
color: var(--miriam1-text); -webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.msg {
max-width: 92%;
margin: 8px 0;
padding: 10px 14px;
border-radius: 18px;
font-size: 14px;
line-height: 1.5;
word-wrap: break-word;
animation: fadeIn .3s ease-out;
}
.msg.restored {
animation: none;
}
.msg p,
.msg ul,
.msg ol {
margin: 0 0 .5rem 0;
}
.msg p:last-child {
margin: 0;
}
.msg ul,
.msg ol {
padding-left: 20px;
}
.msg time {
display: block;
margin-top: 6px;
font-size: 11px;
color: var(--miriam1-muted);
}
.msg.user {
margin-left: auto;
background: #e9e9eb !important;
color: #333 !important;
border-bottom-right-radius: 6px;
}
.msg.bot {
margin-right: auto;
background: var(--miriam1-teal) !important;
color: #fff !important;
border-bottom-left-radius: 6px;
font-family: var(--miriam1-font);
font-size: 14px;
line-height: 1.5;
}
.msg.bot a {
color: #fff;
text-decoration: underline;
font-weight: 600;
}
.msg.bot a:hover {
text-decoration: none;
}
.msg.bot strong,
.msg.bot b {
font-weight: 700 !important;
}
#chat-messages .msg.bot strong,
#chat-messages .msg.bot b {
font-weight: 700 !important;
}
.typing {
display: inline-flex;
gap: 6px;
align-items: center;
}
.dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
opacity: .6;
animation: blink 1s infinite;
}
.dot:nth-child(2) {
animation-delay: .15s;
}
.dot:nth-child(3) {
animation-delay: .3s;
}
@keyframes blink {
0%,
80%,
100% {
opacity: .2;
}
40% {
opacity: 1;
}
}
#chat-input-bar {
display: flex;
gap: 8px;
align-items: flex-end;
padding: 10px;
background: var(--miriam1-bg);
border-top: 1px solid #e5e7eb; flex-shrink: 0;
}
@media (max-width: 768px) {
#chat-input-bar {
padding: 8px 12px;
padding-bottom: calc(8px + env(safe-area-inset-bottom));
gap: 0;
}
#send-btn {
display: none !important;
}
#chat-input {
border-radius: 20px;
padding: 10px 14px;
min-height: 40px;
}
}
#chat-input {
flex: 1;
resize: none;
border: 1px solid #cfd4dc;
border-radius: 10px;
padding: 10px 12px;
min-height: 42px;
max-height: 120px;
font: 14px/1.4 var(--miriam1-font);
box-sizing: border-box;
transition: border-color .15s, box-shadow .15s; font-size: 16px; color: var(--miriam1-text);
background-color: var(--miriam1-bg); -webkit-appearance: none;
appearance: none;
}
#chat-input:focus {
outline: none;
border-color: var(--miriam1-teal);
box-shadow: 0 0 0 .2rem rgba(74, 180, 175, .25);
}
#send-btn {
height: 42px; min-width: 44px;
padding: 0 14px;
border-radius: 10px;
border: 0;
cursor: pointer;
font-weight: 700;
color: #fff;
background: var(--miriam1-teal);
transition: filter .15s, transform .1s;
display: inline-grid;
place-items: center;
-webkit-tap-highlight-color: transparent;
}
#send-btn:hover {
filter: brightness(1.05);
}
#send-btn:active {
transform: translateY(1px);
background: #3a9a96;
}
#send-btn[disabled] {
opacity: .6;
cursor: not-allowed;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
white-space: nowrap;
}
@keyframes bubble-bounce {
0%,
75%,
100% {
transform: translateY(0);
}
85% {
transform: translateY(-16px);
}
95% {
transform: translateY(2px);
}
}
#chat-bubble.is-animating {
animation: bubble-bounce 2.8s ease-in-out 2s infinite;
} #chat-bubble::before {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
background: rgba(74, 180, 175, 0.7);
z-index: -1;
animation: pulse-ring 2s infinite;
}
#chat-bubble:hover::before {
animation: none;
opacity: 0;
}
@keyframes pulse-ring {
0% {
transform: scale(1);
opacity: 0.7;
}
70% {
transform: scale(1.5);
opacity: 0;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
#chat-bubble .proactive-message {
position: absolute;
bottom: calc(100% + 10px);
right: 0;
background-color: var(--miriam1-bg);
color: var(--miriam1-text);
padding: 10px 15px;
border-radius: var(--radius);
box-shadow: var(--shadow);
font-size: 14px;
font-weight: 600;
white-space: nowrap;
opacity: 0;
transform: translateY(10px);
visibility: hidden;
transition: opacity .3s, transform .3s, visibility .3s;
z-index: -1;
}
#chat-bubble .proactive-message::after {
content: '';
position: absolute;
top: 100%;
right: 20px;
border-width: 6px;
border-style: solid;
border-color: var(--miriam1-bg) transparent transparent transparent;
}
#chat-bubble .proactive-message.visible {
opacity: 1;
transform: translateY(0);
visibility: visible;
z-index: 9997;
}
#chat-window * {
box-sizing: border-box;
} .msg.bot .chat-button-container {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.msg.bot .chat-button {
background-color: rgba(255, 255, 255, 0.2);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: 20px;
padding: 8px 14px;
cursor: pointer;
font-family: var(--miriam1-font);
font-size: 14px;
font-weight: 500;
transition: background-color .2s, opacity .2s; min-height: 44px;
-webkit-tap-highlight-color: transparent;
}
.msg.bot .chat-button:hover {
background-color: rgba(255, 255, 255, 0.35);
}
.msg.bot .chat-button:active {
background-color: rgba(255, 255, 255, 0.5);
}
.msg.bot .chat-button:disabled {
opacity: 0.6;
cursor: not-allowed;
background-color: rgba(0, 0, 0, 0.1);
border-color: rgba(255, 255, 255, 0.4);
} @keyframes slideUpFade {
from {
opacity: 0;
transform: translateY(20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
#chat-window[style*="display: flex"] {
animation: slideUpFade 0.3s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .chat-feedback {
display: flex;
gap: 4px;
margin-top: 6px;
justify-content: flex-end;
}
.feedback-btn {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 14px;
padding: 2px 8px;
cursor: pointer;
font-size: 14px;
line-height: 1;
opacity: 0.6;
transition: opacity .2s, background-color .2s;
-webkit-tap-highlight-color: transparent;
}
.feedback-btn:hover {
opacity: 1;
background-color: rgba(255, 255, 255, 0.15);
}
.feedback-btn.selected {
opacity: 1;
background-color: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.6);
}
.feedback-btn:disabled {
cursor: default;
}
.feedback-btn:disabled:not(.selected) {
opacity: 0.3;
} .chat-disclaimer {
font-size: 10px;
color: #9ca3af;
text-align: center;
padding: 4px 15px;
background-color: var(--miriam1-bg);
width: 100%;
border-top: 1px solid #f3f4f6;
font-family: var(--miriam1-font);
line-height: 1.3;
flex-shrink: 0;
}
#chat-input-bar {
border-top: none !important; 
} @media (max-width: 768px) { @supports (height: 100dvh) {
#chat-window {
height: 100dvh;
}
} .msg {
max-width: 90%;
font-size: 14px;
padding: 8px 12px;
border-radius: 16px;
}
.msg.bot strong,
.msg.bot b {
font-size: 14px !important;
}
.msg time {
font-size: 10px;
} #chat-bubble .proactive-message {
font-size: 11px;
white-space: nowrap;
right: -5px;
font-weight: 500;
} .msg.bot .chat-button {
font-size: 13px;
min-height: 44px;
padding: 6px 12px;
} .chat-disclaimer {
font-size: 9px;
padding: 2px 10px;
} #chat-input-bar {
position: sticky;
bottom: 0;
background: var(--miriam1-bg);
z-index: 10;
} #chat-messages {
flex: 1;
min-height: 0; } #chat-input:focus {
margin-bottom: 0;
}
} @media (max-width: 768px) and (orientation: landscape) {
#chat-messages {
max-height: calc(100vh - 140px);
}
#chat-header {
padding: 8px 14px;
}
} :root {
--miriam-soporte-color: #5b7fc7;
} #chat-header {
transition: background-color 0.5s ease;
} #send-btn {
transition: filter .15s, transform .1s, background-color 0.5s ease;
}
.msg.bot {
transition: background-color 0.5s ease;
}
#chat-bubble.miriam-mode-soporte {
background: var(--miriam-soporte-color);
}
#chat-window.miriam-mode-soporte #chat-header {
background: var(--miriam-soporte-color);
}
#chat-window.miriam-mode-soporte .msg.bot {
background: var(--miriam-soporte-color) !important;
}
#chat-window.miriam-mode-soporte #send-btn {
background: var(--miriam-soporte-color);
}
#chat-window.miriam-mode-soporte #send-btn:active {
background: #4a6bb3;
}
#chat-window.miriam-mode-soporte #chat-input:focus {
border-color: var(--miriam-soporte-color);
box-shadow: 0 0 0 .2rem rgba(91, 127, 199, .25);
} .msg.bot.miriam-fade-out {
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.3s ease, transform 0.3s ease;
} #typing-indicator.miriam-fade-in {
animation: miriamSwitchFadeIn 0.3s ease-out;
}
@keyframes miriamSwitchFadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .soporte-form {
background: rgba(255,255,255,.15);
border-radius: 10px;
padding: 12px;
margin-top: 10px;
}
.soporte-form .sf-title {
font-weight: 700;
font-size: 13px;
margin-bottom: 8px;
color: #fff;
}
.soporte-form .sf-input {
display: block;
width: 100%;
padding: 8px 10px;
margin-bottom: 6px;
border: 1px solid rgba(255,255,255,.3);
border-radius: 6px;
background: rgba(255,255,255,.9);
color: #333;
font-family: inherit;
font-size: 13px;
box-sizing: border-box;
}
.soporte-form .sf-input:focus {
outline: none;
border-color: #fff;
box-shadow: 0 0 0 2px rgba(255,255,255,.4);
}
.soporte-form .sf-input::placeholder {
color: #999;
}
.soporte-form textarea.sf-input {
resize: vertical;
min-height: 50px;
}
.soporte-form .sf-submit {
display: block;
width: 100%;
padding: 10px;
margin-top: 4px;
border: none;
border-radius: 8px;
background: #fff;
color: var(--miriam-soporte-color);
font-family: inherit;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background .2s, transform .1s;
}
.soporte-form .sf-submit:hover {
background: #e8edf6;
}
.soporte-form .sf-submit:active {
transform: scale(.98);
}
.soporte-form .sf-submit:disabled {
opacity: .7;
cursor: default;
}
.soporte-form .sf-input.sf-invalid {
border-color: #ff6b6b;
background: rgba(255,107,107,.1);
}
.soporte-form .sf-error {
color: #ff6b6b;
font-size: 11px;
margin: -4px 0 6px 2px;
font-weight: 600;
} .soporte-form select.sf-input {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 30px;
cursor: pointer;
min-height: 38px;
}
.soporte-form select.sf-input:focus {
outline: none;
border-color: #fff;
box-shadow: 0 0 0 2px rgba(255,255,255,.4);
} .soporte-form .sf-label {
font-size: 11px;
color: rgba(255,255,255,.85);
margin-bottom: 2px;
display: block;
font-weight: 600;
} .soporte-form .sf-conditional {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.3s ease;
margin-bottom: 0;
}
.soporte-form .sf-conditional.sf-visible {
max-height: 80px;
opacity: 1;
margin-bottom: 6px;
} .soporte-form .sf-conditional.sf-visible:has(.sf-hint) {
max-height: 60px;
}
.soporte-form .sf-conditional .sf-input {
margin-bottom: 0;
} .soporte-form .sf-hint {
font-size: 11px;
color: rgba(255,255,255,.8);
background: rgba(255,255,255,.1);
border-radius: 6px;
padding: 6px 10px;
line-height: 1.4;
margin-bottom: 2px;
} .sf-email-hint {
font-size: 11px;
color: #fbbf24;
margin: -4px 0 6px 2px;
font-weight: 600;
}
@media (max-width: 768px) {
.soporte-form select.sf-input {
min-height: 44px;
font-size: 16px;
}
.soporte-form .sf-conditional.sf-visible {
max-height: 84px;
}
}