/* Mixo: estilo único para todo el sitio. * * Los colores se declaran aquí y no se heredan de la página. Antes * Mixo tomaba el color de texto de cada sección y se veía distinto * —y en las páginas legales, casi ilegible— según dónde estuviera. * * Cargar con al final del , después del estilo propio * de cada página, para que el orden de la cascada no cambie. */ #mxy{ --mx-azul:#0057FA; --mx-azul-dk:#0040DC; --mx-tinta:#05061F; --mx-papel:#FFFFFF; --mx-suave:#F5F8FD; --mx-linea:#E4EBF7; --mx-mute:#4A5678; --mx-claro:#E9F0FF; /* Gris de la zona de controles. Bastante más apagado que --mx-suave, el de las burbujas del bot, para que no se confunda con la conversación. La línea que las separa es un punto más marcada que --mx-linea, que sobre este gris se perdería. */ --mx-zona:#E9EEF7; --mx-zona-linea:#D6DFEF; --mx-radio:18px; --mx-body:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif; --mx-display:"Plus Jakarta Sans",system-ui,sans-serif; color:var(--mx-tinta); } /* Blindaje. * * Un color heredado pierde contra cualquier regla que apunte al * elemento, aunque sea débil. Las páginas legales traen su propio * «strong{color:...}» y «a{color:...}», y por eso el nombre de Mixo * salía azul marino sobre la cabecera azul marino: ilegible. * * Las etiquetas sueltas vuelven a heredar. Ninguna regla de Mixo * pinta estas etiquetas por clase, así que no se pisa nada. */ #mxy :where(a, b, i, em, small, strong, li, p, ul){color:inherit} /* Los enlaces dentro de la conversación no tenían estilo propio: se los damos, para que se vean igual en todas las secciones. */ #mxy-log a{color:var(--mx-azul);text-decoration:underline;text-underline-offset:2px} #mxy-log a:hover{color:var(--mx-azul-dk)} #mxy-log .mxy-yo a{color:#fff} /* Con el menú abierto, el asistente se quita de en medio. */ body.menu-abierto #mxy{opacity:0;visibility:hidden;pointer-events:none; transition:opacity .18s ease,visibility .18s} /* Con el chat abierto en pantallas chicas, la página de atrás queda * quieta. En iOS no basta con overflow:hidden —Safari lo ignora—, así * que el cuerpo se fija y se guarda la posición para devolverla al * cerrar. El desplazamiento se lo pone el guion en «top». */ body.mxy-fijo{ position:fixed; left:0; right:0; width:100%; overflow:hidden; overscroll-behavior:none; } #mxy{ position:fixed; right:20px; bottom:var(--mx-abajo,20px); z-index:2147483000; font-family:var(--mx-body); } #mxy-open{ height:58px;border-radius:999px;border:0;cursor:pointer;position:relative; padding:0 20px 0 16px; background:var(--mx-azul);color:#fff; display:flex;align-items:center;gap:12px;text-align:left; font-family:var(--mx-body);letter-spacing:-.012em; /* El aro claro lo separa de lo que tenga detrás: no se pierde sobre una foto ni sobre una sección de color. */ /* Un filo claro de 1.5px y una sombra amplia: lo despegan del fondo sin el borde blanco grueso, que pesaba demasiado. */ box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34), 0 16px 36px -10px rgba(5,6,31,.42), 0 4px 12px -4px rgba(0,87,250,.5); transition:transform .18s ease,background .18s,box-shadow .18s; } #mxy-open:hover{ transform:translateY(-2px); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5), 0 22px 44px -10px rgba(5,6,31,.5), 0 6px 16px -4px rgba(0,87,250,.6); } #mxy-txt{display:flex;flex-direction:column;line-height:1.25;white-space:nowrap} #mxy-txt b{font-size:15px;font-weight:800} #mxy-txt i{font-style:normal;font-size:12px;font-weight:600;color:var(--mx-claro)} #mxy-open:hover{transform:scale(1.06);background:var(--mx-azul-dk)} #mxy-open:focus-visible{outline:3px solid var(--mx-tinta);outline-offset:3px} #mxy.abierto #mxy-open{display:none} #mxy-panel{ width:378px; max-width:calc(100vw - 32px); height:576px; max-height:var(--mx-alto,calc(100vh - 40px)); background:var(--mx-papel); border-radius:var(--mx-radio); overflow:hidden; display:flex; flex-direction:column; box-shadow:0 20px 56px rgba(5,6,31,.26), 0 0 0 1px var(--mx-linea); /* El gesto muere aquí: no se transmite a la página de atrás. */ overscroll-behavior:contain; } #mxy-panel[hidden]{display:none} #mxy-head{display:flex;align-items:center;gap:11px;padding:14px 13px 14px 15px; background:var(--mx-tinta);color:#fff} #mxy-face{width:36px;height:36px;border-radius:50%;background:var(--mx-papel);flex:none; display:grid;place-items:center;overflow:hidden} #mxy-face img{width:22px;height:22px;object-fit:contain} #mxy-name{display:flex;flex-direction:column;line-height:1.32;flex:1;min-width:0} #mxy-name strong{font-family:var(--mx-display);font-size:15.5px;font-weight:800;letter-spacing:-.015em} #mxy-name span{font-size:11.5px;color:#9DB4DA} #mxy-close{background:transparent;border:0;color:#9DB4DA;cursor:pointer;padding:6px;border-radius:8px} #mxy-close:hover{color:#fff;background:rgba(255,255,255,.11)} /* Lo único que se desplaza dentro del panel es la conversación. * * overscroll-behavior corta el encadenamiento cuando se llega al * tope: sin él, seguir arrastrando movía la página de atrás. * pan-y deja subir y bajar, y nada más: un arrastre en diagonal * ya no se escapa de lado. */ #mxy-log{ flex:1;overflow-y:auto;padding:18px 15px 4px; display:flex;flex-direction:column;gap:9px; overscroll-behavior:contain; touch-action:pan-y; -webkit-overflow-scrolling:touch; } #mxy-log::-webkit-scrollbar{width:6px} #mxy-log::-webkit-scrollbar-thumb{background:#C9DAF8;border-radius:3px} /* El resto del panel no desplaza nada. Sin esto, un dedo apoyado * en la cabecera, en los botones o en el pie arrastraba la página. * Los toques siguen funcionando: touch-action no afecta al clic. */ #mxy-head, #mxy-foot{touch-action:none} #mxy-ops{touch-action:pan-y} .mxy-b{max-width:86%;padding:11px 14px;font-size:14px;line-height:1.58;border-radius:15px; animation:mxy-in .2s ease both} @keyframes mxy-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.mxy-b{animation:none}} .mxy-bot{align-self:flex-start;background:var(--mx-suave);color:var(--mx-tinta);border-bottom-left-radius:5px} .mxy-yo{align-self:flex-end;background:var(--mx-tinta);color:#fff;border-bottom-right-radius:5px} .mxy-b b{font-weight:700} .mxy-b .mxy-precio{color:var(--mx-azul);font-weight:700} .mxy-b ul{margin:8px 0 0;padding-left:17px} .mxy-b li{margin:2px 0} .mxy-esc{align-self:flex-start;background:var(--mx-suave);padding:14px 16px;border-radius:15px; border-bottom-left-radius:5px;display:flex;gap:4px} .mxy-esc i{width:6px;height:6px;border-radius:50%;background:#9DB4DA;animation:mxy-bt 1.1s infinite} .mxy-esc i:nth-child(2){animation-delay:.16s} .mxy-esc i:nth-child(3){animation-delay:.32s} @keyframes mxy-bt{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}} /* Las opciones y el pie comparten un gris tenue y forman un solo * bloque de controles. La conversación queda como la única zona * blanca, que es además la única que se desplaza: de un vistazo se * ve dónde se arrastra y dónde se toca. */ /* Nunca más de un tercio del panel: si hay muchos botones, se * desplazan entre ellos y la conversación no se pierde de vista. */ #mxy-ops{ display:flex;flex-wrap:wrap;gap:7px;padding:12px 15px 5px; background:var(--mx-zona); border-top:1px solid var(--mx-zona-linea); max-height:38%;overflow-y:auto;overscroll-behavior:contain; } #mxy-ops::-webkit-scrollbar{width:5px} #mxy-ops::-webkit-scrollbar-thumb{background:#C4CFE4;border-radius:3px} /* Sin opciones no debe quedar ni una raya suelta. */ #mxy-ops:empty{padding:0;border-top:0} .mxy-op{background:var(--mx-papel);border:1.5px solid var(--mx-linea);color:var(--mx-tinta);font-size:13px; padding:8px 13px;border-radius:999px;cursor:pointer;font-family:inherit; line-height:1.3;transition:.14s} .mxy-op:hover{border-color:var(--mx-tinta);background:var(--mx-tinta);color:#fff} .mxy-op:focus-visible{outline:2px solid var(--mx-azul);outline-offset:2px} .mxy-op.cta{background:var(--mx-azul);border-color:var(--mx-azul);color:#fff;font-weight:650} .mxy-op.cta:hover{background:var(--mx-azul-dk);border-color:var(--mx-azul-dk)} .mxy-op.leve{color:var(--mx-mute);border-color:transparent;text-decoration:underline; text-underline-offset:3px;padding-left:5px;padding-right:5px} .mxy-op.leve:hover{background:transparent;color:var(--mx-tinta);border-color:transparent} /* Campo para escribir. Comparte el gris de los botones: todo lo que * se toca queda abajo, en un solo bloque, y lo que se lee, arriba. * La letra de 16px evita que el iPhone haga zoom al tocarlo. Todo * va declarado porque el brief trae estilos propios para input. */ #mxy-pide{display:flex;align-items:center;gap:8px;margin:0;padding:8px 15px 0; background:var(--mx-zona);touch-action:manipulation} #mxy-pide[hidden]{display:none} #mxy-ops:empty + #mxy-pide{border-top:1px solid var(--mx-zona-linea);padding-top:12px} #mxy-campo{flex:1;min-width:0;width:auto;height:44px;margin:0;padding:0 14px;box-sizing:border-box; border:1.5px solid var(--mx-linea);border-radius:12px;background:#fff;color:var(--mx-tinta); font:500 16px/1.3 var(--mx-body);letter-spacing:normal;box-shadow:none; -webkit-appearance:none;appearance:none} #mxy-campo::placeholder{color:#6B7694;opacity:1} #mxy-campo:focus{outline:none;border-color:var(--mx-azul);box-shadow:0 0 0 3px var(--mx-claro)} #mxy-enviar{flex:none;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:12px; background:var(--mx-azul);color:#fff;box-shadow:none;display:grid;place-items:center; cursor:pointer;transition:background .14s,opacity .14s} #mxy-enviar:hover{background:var(--mx-azul-dk)} #mxy-enviar:focus-visible{outline:2px solid var(--mx-tinta);outline-offset:2px} #mxy-pide.ocupado #mxy-enviar{opacity:.45;pointer-events:none} /* Formulario para dejar datos. Vive en la zona gris, con la misma * letra de 16px del campo de preguntas para que iOS no haga zoom. */ #mxy-datos{display:grid;gap:7px;width:100%} #mxy-datos input{ height:42px;padding:0 13px;box-sizing:border-box;width:100%;margin:0; border:1.5px solid var(--mx-linea);border-radius:11px;background:#fff;color:var(--mx-tinta); font:500 16px/1.3 var(--mx-body);letter-spacing:normal;box-shadow:none;-webkit-appearance:none;appearance:none; } #mxy-datos input::placeholder{color:#6B7694;opacity:1} #mxy-datos input:focus{outline:none;border-color:var(--mx-azul);box-shadow:0 0 0 3px var(--mx-claro)} #mxy-datos button{ height:42px;border:0;border-radius:11px;background:var(--mx-azul);color:#fff;cursor:pointer; font:650 14px/1 var(--mx-body);transition:background .14s; } #mxy-datos button:hover{background:var(--mx-azul-dk)} #mxy-datos.ocupado button{opacity:.5;pointer-events:none} #mxy-datos p{margin:0;font-size:11.5px;color:var(--mx-mute);line-height:1.45} #mxy-datos p a{color:var(--mx-azul);text-decoration:underline} #mxy-datos .mxy-mal{color:#B42318;font-weight:600} #mxy-foot{padding:8px 15px 13px;background:var(--mx-zona);border-top:0} /* Sin opciones ni campo, el pie recupera la línea de separación. */ #mxy-ops:empty + #mxy-pide[hidden] + #mxy-foot{border-top:1px solid var(--mx-zona-linea);padding-top:11px} #mxy-human{width:100%;border:1.5px solid var(--mx-linea);background:#fff;color:var(--mx-tinta); border-radius:11px;padding:8px 10px;font-size:13.2px;font-family:inherit;font-weight:600; cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:.14s} #mxy-human:hover{border-color:var(--mx-azul);color:var(--mx-azul)} #mxy-human:focus-visible{outline:2px solid var(--mx-azul);outline-offset:2px} @media (max-width:520px){ #mxy{right:14px;bottom:var(--mx-abajo,14px);left:14px} #mxy-panel{width:100%;height:var(--mx-alto,80vh)} #mxy-open{margin-left:auto} }