@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════════
   ASISTENTE DE INFINYAI · la ventana de chat y su lanzador

   Autocontenido: la web tiene tres hojas distintas (3D, normal, legales) y el
   widget no puede depender de los tokens de ninguna. Los colores son los de
   la marca: morado #8b74ff, azul #4aa8ff, fondos #0d0d13 / #15151d.

   El lanzador es una PASTILLA con rótulo, no un círculo: ya hay un botón
   redondo de volver arriba y un tercer círculo se leería como parte del grupo.
   ═══════════════════════════════════════════════════════════════════════════ */

.chat-l, .chat, .chat-teaser {
  --ch-bg: #0d0d13;
  --ch-surface: #15151d;
  --ch-surface-2: #1c1b27;
  --ch-line: rgba(255, 255, 255, .12);
  --ch-text: #f7f7fb;
  --ch-muted: #aaa9ba;
  --ch-brand: #8b74ff;
  --ch-brand-2: #a66cff;
  --ch-blue: #4aa8ff;
  --ch-grad: linear-gradient(135deg, #7657ff, #936eff 55%, #4f9fff);
  --ch-ease: cubic-bezier(.2, .65, .2, 1);
  --ch-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--ch-font);
  -webkit-font-smoothing: antialiased;
}

/* ── 1. Lanzador ─────────────────────────────────────────────────────────── */

.chat-l {
  position: fixed;
  z-index: 880;
  right: 22px;
  bottom: calc(22px + env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 50px;
  padding: 0 18px 0 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 26px;
  background: #7657ff; /* primera parada del degradado: rótulo blanco a 4,59:1 */
  color: #fff;
  font: 800 .92rem/1 var(--ch-font);
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 12px 34px -8px rgba(119, 86, 255, .55), 0 2px 8px rgba(0, 0, 0, .35);
  transition: transform .4s var(--ch-ease), box-shadow .4s var(--ch-ease), opacity .3s var(--ch-ease);
}

.chat-l__mark {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: var(--ch-grad); /* el bitono morado/azul sigue a la vista, sin letras encima */
}

.chat-l__mark svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
}

@media (hover: hover) {
  .chat-l:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 0 1px rgba(166, 108, 255, .5), 0 18px 44px -10px rgba(119, 86, 255, .75);
  }
}

/* Sin API confirmada no se pinta; con la ventana abierta sobra. */
.chat-l { visibility: hidden; opacity: 0; }
body.chat-listo .chat-l { visibility: visible; opacity: 1; }
body.chat-abierto .chat-l { opacity: 0; pointer-events: none; }

/* Un anillo que avisa de que esto es nuevo, y solo la primera vez. */
.chat-l::after {
  position: absolute;
  inset: -4px;
  content: "";
  border: 2px solid var(--ch-brand-2);
  border-radius: inherit;
  opacity: 0;
}
.chat-l.pulsa::after { animation: chat-pulso 2.4s var(--ch-ease) 3; }
@keyframes chat-pulso {
  0%   { opacity: .9; transform: scale(1); }
  70%  { opacity: 0;  transform: scale(1.32); }
  100% { opacity: 0;  transform: scale(1.32); }
}

/* Los otros flotantes suben para dejar sitio al lanzador. */
body.chat-listo .page-back-to-top { bottom: calc(86px + env(safe-area-inset-bottom)); }
body.chat-listo .back-to-top { bottom: 90px; }
/* Mientras el aviso proactivo está a la vista, el botón de volver arriba se
   aparta (visibility, para sacarlo también del orden de tabulación). */
body.chat-teaser-visible .page-back-to-top,
body.chat-teaser-visible .back-to-top { opacity: 0; visibility: hidden; pointer-events: none; }

@media (max-width: 420px) {
  .chat-l { padding: 0; width: 50px; border-radius: 50%; justify-content: center; }
  .chat-l > span:not(.chat-l__mark) { display: none; }
  /* Sin rótulo no hay texto que sostener: el degradado vuelve a la pastilla. */
  .chat-l { background: var(--ch-grad); }
  .chat-l__mark { background: none; }
}

@media (max-width: 820px) {
  body.chat-listo .page-back-to-top { bottom: calc(86px + env(safe-area-inset-bottom)); }
}

/* ── 1 bis. El aviso proactivo: una burbuja junto al lanzador ───────────── */

.chat-teaser {
  position: fixed;
  z-index: 879;
  right: 22px;
  bottom: calc(84px + env(safe-area-inset-bottom));
  width: min(300px, calc(100vw - 44px));
  padding: 14px 40px 14px 16px;
  color: var(--ch-text);
  border: 1px solid rgba(139, 116, 255, .35);
  border-radius: 16px 16px 4px 16px;
  background: var(--ch-surface);
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .04);
  font: 500 .9rem/1.45 var(--ch-font);
  transform-origin: 100% 100%;
  transition: opacity .35s var(--ch-ease), translate .35s var(--ch-ease), scale .35s var(--ch-ease), visibility .35s;
}
.chat-teaser[hidden] { display: block; visibility: hidden; opacity: 0; translate: 0 8px; scale: .96; }
.chat-teaser strong { display: block; margin-bottom: 2px; color: #fff; font-weight: 800; }
.chat-teaser__cerrar {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  color: var(--ch-muted);
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  font: 700 1rem/1 var(--ch-font);
}
/* El glifo se queda en 26 px; el área que recibe el dedo llega a 44 px. */
.chat-teaser__cerrar::before { content: ""; position: absolute; inset: -9px; }
@media (hover: hover) { .chat-teaser__cerrar:hover { color: #fff; background: rgba(255, 255, 255, .08); } }
.chat-teaser__abrir {
  display: inline-block;
  margin-top: 0;
  color: #c6bbff;
  font-weight: 800;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 8px 0; /* el relleno sustituye al margen: misma posición, ~36 px de alto */
  font-family: inherit;
  font-size: .86rem;
}
@media (max-width: 420px) { .chat-teaser { right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); } }

/* ── 2. La ventana ───────────────────────────────────────────────────────── */

.chat {
  position: fixed;
  z-index: 1100; /* por encima de la cabecera pegajosa (1000) de las páginas estándar */
  right: clamp(12px, 3vw, 22px);
  bottom: clamp(12px, 3vw, 22px);
  display: flex;
  width: min(396px, calc(100vw - 24px));
  height: min(640px, calc(100dvh - 88px));
  flex-direction: column;
  padding: 0;  /* cierra la puerta a reglas genéricas de la página (zizelab: section { padding: 84px 0 }) */
  margin: 0;
  overflow: hidden;
  color: var(--ch-text);
  border: 1px solid rgba(139, 116, 255, .3);
  border-radius: 22px;
  background: var(--ch-bg);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .04), 0 24px 70px -30px rgba(119, 86, 255, .6);
  transform-origin: 100% 100%;
  transition: opacity .3s var(--ch-ease), translate .3s var(--ch-ease), scale .3s var(--ch-ease), visibility .3s;
}
.chat[hidden] {
  display: flex;
  visibility: hidden;
  opacity: 0;
  translate: 0 14px;
  scale: .96;
}
@media (prefers-reduced-motion: reduce) {
  .chat, .chat-teaser, .chat-l { transition: none; }
  .chat[hidden] { display: none; }
  .chat-l.pulsa::after { animation: none; }
}
@media (max-width: 560px) {
  .chat { inset: 0; width: 100%; height: 100dvh; border-radius: 0; border: 0; }
}

/* ── 3. Cabecera ─────────────────────────────────────────────────────────── */

.chat__cab {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  padding: 14px 12px 14px 16px;
  border-bottom: 1px solid var(--ch-line);
  background:
    radial-gradient(circle at 90% 0, rgba(74, 168, 255, .18), transparent 40%),
    radial-gradient(circle at 0 100%, rgba(139, 116, 255, .22), transparent 45%),
    var(--ch-surface);
}
.chat__avatar {
  display: grid;
  width: 40px;
  height: 40px;
  flex: none;
  place-items: center;
  border-radius: 12px;
  background: var(--ch-grad);
  box-shadow: 0 8px 22px -6px rgba(119, 86, 255, .7);
}
.chat__avatar svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }
.chat__ident { flex: 1; min-width: 0; }
.chat__titulo { margin: 0; color: #fff; font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; }
.chat__estado { display: flex; align-items: center; gap: 6px; margin: 3px 0 0; color: var(--ch-muted); font-size: .76rem; }
.chat__punto { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #5de0a3; box-shadow: 0 0 0 3px rgba(93, 224, 163, .18); }
.chat__cerrar {
  display: grid;
  width: 34px;
  height: 34px;
  flex: none;
  place-items: center;
  color: #fff;
  border: 1px solid var(--ch-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  cursor: pointer;
  transition: background-color .3s var(--ch-ease), transform .4s var(--ch-ease);
}
@media (hover: hover) { .chat__cerrar:hover { background: rgba(255, 255, 255, .14); transform: rotate(90deg); } }

/* ── 4. Conversación ─────────────────────────────────────────────────────── */

.chat__hilo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 16px 14px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 116, 255, .35) transparent;
}
.chat__msg { max-width: 88%; }
.chat__msg--yo { align-self: flex-end; }
.chat__msg--bot { align-self: flex-start; }
.chat__burbuja {
  padding: 11px 14px;
  border-radius: 16px;
  font-size: .94rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.chat__msg--yo .chat__burbuja { color: #fff; background: #7657ff; border: 1px solid rgba(79, 159, 255, .55); border-bottom-right-radius: 5px; } /* 4,59:1; el azul solo en el borde, nunca bajo el texto */
.chat__msg--bot .chat__burbuja { color: var(--ch-text); border: 1px solid var(--ch-line); background: var(--ch-surface); border-bottom-left-radius: 5px; }
/* color: inherit y márgenes completos: las páginas legales traen p/ul/li desnudos. */
.chat__burbuja p { margin: 0 0 .6em; color: inherit; }
.chat__burbuja p:last-child { margin-bottom: 0; }
.chat__burbuja ul { margin: .35em 0 .6em; padding: 0; list-style: none; color: inherit; }
.chat__burbuja li { position: relative; margin: 0 0 .32em; padding-left: 1.1em; }
.chat__burbuja li::before { position: absolute; top: .58em; left: 0; width: 6px; height: 6px; content: ""; border-radius: 50%; background: var(--ch-brand); }
.chat__burbuja code { padding: .1em .38em; border-radius: 5px; background: rgba(139, 116, 255, .14); color: #ddd7ff; font-family: inherit; font-size: .92em; font-weight: 600; }
.chat__burbuja strong { color: #fff; }
.chat__burbuja a { color: #c6bbff; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(198, 187, 255, .4); text-underline-offset: 3px; }
.chat__msg--yo .chat__burbuja a { color: #fff; }

.chat__fuentes { display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 0 0; }
.chat__fuente {
  padding: .28em .66em;
  color: #c6bbff;
  border: 1px solid rgba(139, 116, 255, .3);
  border-radius: 999px;
  background: rgba(139, 116, 255, .08);
  font-size: .72rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .3s var(--ch-ease);
}
@media (hover: hover) { .chat__fuente:hover { background: rgba(139, 116, 255, .2); } }

.chat__tarea { display: flex; align-items: center; gap: 8px; padding: 4px 2px; align-self: flex-start; color: var(--ch-muted); font-size: .8rem; }
.chat__puntos { display: inline-flex; gap: 5px; padding: 6px 4px; }
.chat__puntos i { width: 7px; height: 7px; border-radius: 50%; background: var(--ch-brand); opacity: .3; animation: chat-late 1.2s var(--ch-ease) infinite; }
.chat__puntos i:nth-child(2) { animation-delay: .16s; }
.chat__puntos i:nth-child(3) { animation-delay: .32s; }
@keyframes chat-late { 0%, 60%, 100% { opacity: .28; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chat__puntos i { animation: none; opacity: .7; } }

.chat__aviso { align-self: stretch; margin: 0; padding: 6px 10px; color: var(--ch-muted); font-size: .78rem; text-align: center; }
.chat__aviso--mal { color: #ff9c8f; }

/* ── 5. Sugerencias de arranque ──────────────────────────────────────────── */

.chat__sugerencias { display: flex; flex-wrap: wrap; gap: 7px; padding: 2px 0 4px; }
.chat__sug {
  padding: .55em .85em;
  color: #ddd7ff;
  border: 1px solid rgba(139, 116, 255, .35);
  border-radius: 12px;
  background: rgba(139, 116, 255, .08);
  font: 600 .8rem/1.3 var(--ch-font);
  text-align: left;
  cursor: pointer;
  transition: transform .4s var(--ch-ease), box-shadow .4s var(--ch-ease), background-color .4s var(--ch-ease);
}
@media (hover: hover) {
  .chat__sug:hover { transform: translateY(-2px); color: #fff; background: #7657ff; border-color: #7657ff; box-shadow: 0 8px 20px -8px rgba(139, 116, 255, .7); } /* 4,59:1 */
}

/* ── 6. Barra de escritura ───────────────────────────────────────────────── */

.chat__pie { flex: none; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ch-line); background: var(--ch-bg); }
.chat__caja {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 5px 5px 5px 12px;
  border: 1px solid var(--ch-line);
  border-radius: 14px;
  background: var(--ch-surface);
  transition: border-color .3s var(--ch-ease), box-shadow .3s var(--ch-ease);
}
.chat__caja:focus-within { border-color: var(--ch-brand); box-shadow: 0 0 0 3px rgba(139, 116, 255, .2); }
.chat__texto { flex: 1; min-width: 0; max-height: 108px; padding: 7px 0; color: var(--ch-text); border: 0; outline: none; background: none; resize: none; overflow-y: auto; scrollbar-width: none; font: 400 .94rem/1.45 var(--ch-font); }
.chat__texto::-webkit-scrollbar { display: none; }
.chat__texto::placeholder { color: var(--ch-muted); opacity: .85; }
.chat__boton {
  display: grid;
  width: 38px;
  height: 38px;
  flex: none;
  place-items: center;
  border: 0;
  border-radius: 11px;
  cursor: pointer;
  transition: background-color .3s var(--ch-ease), transform .4s var(--ch-ease), color .3s var(--ch-ease);
}
.chat__boton[disabled] { opacity: .4; cursor: default; }
.chat__mic { color: #ddd7ff; background: rgba(139, 116, 255, .14); }
.chat__enviar { color: #fff; background: var(--ch-grad); }
@media (hover: hover) {
  .chat__mic:not([disabled]):hover { background: rgba(139, 116, 255, .28); }
  .chat__enviar:not([disabled]):hover { transform: translateY(-2px); }
}
.chat__mic.graba { color: #fff; background: #c0281c; animation: chat-graba 1.3s var(--ch-ease) infinite; }
@keyframes chat-graba { 0%, 100% { box-shadow: 0 0 0 0 rgba(192, 40, 28, .5); } 60% { box-shadow: 0 0 0 9px rgba(192, 40, 28, 0); } }
@media (prefers-reduced-motion: reduce) { .chat__mic.graba { animation: none; } }

.chat__legal { margin: 7px 2px 0; color: var(--ch-muted); font-size: .7rem; line-height: 1.35; text-align: center; }
.chat__legal a { color: #c6bbff; }

@media print { .chat, .chat-l, .chat-teaser { display: none !important; } }

/* ===== 19-09-2026 · iOS: el campo de texto NO puede bajar de 16 px =====
   Safari en iPhone hace zoom automático al enfocar un campo con la letra por
   debajo de 16 px, y con el zoom puesto la página ya se puede mover de lado.
   Se veía como «la web tiene scroll lateral» y como un chat que no cabía.
   16 px exactos lo corta de raíz, y solo en pantallas táctiles estrechas,
   para no tocar el tamaño en escritorio. */
@media (max-width: 860px) {
  .chat__texto {
    font-size: 16px;
  }
}

/* La × del cartel va dibujada, para que quede centrada de verdad */
.chat-teaser__cerrar svg {
  display: block;
}