/* Asistente de la web — Enfoque 360.
   Se carga en todas las páginas. Los colores y tipografías vienen de
   styles.css; aquí solo va lo propio del chat. */

/* La burbuja vive dentro de .flotantes, así que hereda el apilado de la
   esquina. Va en salvia para que no compita con el verde de WhatsApp: el
   botón que tiene que ganar la mirada sigue siendo el de WhatsApp. */
/* La burbuja es una PÍLDORA con etiqueta, no un círculo pelado: un icono de
   bocadillo solo no dice qué hay detrás, y este asistente ya agenda citas, así
   que merece que se entienda de un vistazo.
   Los selectores llevan `.asis` delante porque `.flotante` de styles.css fija
   ancho, alto y `border-radius: 50%`, y con la misma especificidad ganaría el
   que se cargue después. */
.asis .asis__burbuja {
  position: relative;   /* ancla del anillo que late (::before) */
  background: var(--brand-dark);
  color: #fff;
  width: auto;
  height: 52px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 0 1.15rem 0 .95rem;
}
.asis__burbuja__texto {
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.asis .asis__burbuja svg { width: 24px; height: 24px; }
.asis__burbuja:hover { background: #5d6c4d; }

/* Con el chat abierto la burbuja se esconde.
   Antes se convertía en una "X", pero el panel (z-index 61) la tapaba: el clic
   se lo comía el aviso del pie del panel, así que era un botón que no se podía
   pulsar, y al cerrar se devolvía el foco a un elemento oculto. Para cerrar
   están la X de la cabecera y la tecla Escape, que sí funcionan.
   No se toca el botón de WhatsApp: mientras alguien chatea es justo cuando más
   puede querer saltar a hablar con una persona. */
.asis.es-abierto .asis__burbuja { display: none; }

/* Un anillo que late unas pocas veces al cargar y para. Llama la atención sin
   convertirse en un parpadeo eterno, que es lo que acaba molestando. */
.asis .asis__burbuja::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--brand-dark);
  opacity: 0;
  animation: asisLlamar 2.2s var(--curva) 1.5s 3;
  pointer-events: none;
}
.asis.es-abierto .asis__burbuja::before { animation: none; }
@keyframes asisLlamar {
  0%   { opacity: .55; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.35); }
  100% { opacity: 0;   transform: scale(1.35); }
}

@media (max-width: 560px) {
  .asis .asis__burbuja { height: 48px; padding: 0 1rem 0 .8rem; }
  .asis.es-abierto .asis__burbuja { width: 48px; padding: 0; }
  .asis__burbuja__texto { font-size: .875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .asis .asis__burbuja::before { animation: none; }
}
.asis__burbuja svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Con el chat abierto, la burbuja pasa a ser el botón de cerrar.
   Los selectores llevan `.asis__burbuja` delante a propósito: sin él,
   `.flotante svg { display: block }` de styles.css pesa más y los dos iconos
   se pintaban a la vez, uno encima del otro. */
.asis.es-abierto .asis__burbuja .asis__abrir { display: none; }
.asis__burbuja .asis__cerrar-icono { display: none; }
.asis.es-abierto .asis__burbuja .asis__cerrar-icono { display: block; }

/* ---------- el panel ---------- */
.asis__panel {
  position: fixed;
  right: 20px;
  bottom: 92px;
  z-index: 61;
  width: min(23rem, calc(100vw - 40px));
  max-height: min(32rem, calc(100vh - 130px));
  display: none;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(43, 47, 38, .22);
  overflow: hidden;
}
.asis.es-abierto .asis__panel { display: flex; }

.asis__cabecera {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .85rem 1rem;
  background: var(--brand-dark);
  color: #fff;
}
.asis__cabecera h2 { margin: 0; font-size: .9375rem; font-weight: 600; color: #fff; }
.asis__cabecera p { margin: 0; font-size: .75rem; color: rgba(255, 255, 255, .78); }
.asis__cabecera__texto { flex: 1; min-width: 0; }
.asis__cerrar {
  background: none;
  border: none;
  color: rgba(255, 255, 255, .85);
  cursor: pointer;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
}
.asis__cerrar:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.asis__cerrar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ---------- los mensajes ---------- */
.asis__hilo {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.asis__msg {
  max-width: 85%;
  padding: .6rem .8rem;
  border-radius: 12px;
  font-size: .9375rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.asis__msg--asistente {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.asis__msg--visitante {
  background: var(--brand-tint);
  color: var(--ink);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.asis__msg--salida a { color: var(--brand-dark); font-weight: 600; text-decoration: underline; }

/* Tres puntos mientras piensa */
.asis__puntos { display: flex; gap: 4px; align-items: center; }
.asis__puntos span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-soft);
  animation: asisLatir 1.2s infinite ease-in-out;
}
.asis__puntos span:nth-child(2) { animation-delay: .15s; }
.asis__puntos span:nth-child(3) { animation-delay: .3s; }
@keyframes asisLatir {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* ---------- el formulario de contacto dentro del chat ---------- */
.asis__contacto {
  align-self: stretch;
  background: #fff;
  border: 1px solid var(--brand);
  border-radius: 12px;
  padding: .9rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.asis__contacto__titulo { margin: 0; font-weight: 600; font-size: .9375rem; color: var(--ink); }
.asis__contacto__lead { margin: 0; font-size: .8125rem; color: var(--ink-soft); }
.asis__contacto input {
  width: 100%;
  padding: .6rem .75rem;
  font: inherit;
  font-size: .9375rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.asis__contacto input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
.asis__contacto__btn {
  padding: .65rem 1rem;
  border: none;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-size: .9375rem;
  font-weight: 500;
  cursor: pointer;
}
.asis__contacto__btn:hover:not(:disabled) { background: var(--brand-dark); }
.asis__contacto__btn:disabled { opacity: .6; cursor: default; }
.asis__contacto__msg { margin: 0; font-size: .8125rem; color: #8a2f22; }
.asis__contacto__msg.es-ok { color: var(--brand-dark); }
.asis__contacto__msg a { color: inherit; font-weight: 600; text-decoration: underline; }

/* ---------- escribir ---------- */
.asis__forma {
  display: flex;
  gap: .5rem;
  padding: .75rem;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.asis__campo {
  flex: 1;
  min-width: 0;
  resize: none;
  height: 42px;
  max-height: 96px;
  padding: .6rem .75rem;
  font: inherit;
  font-size: .9375rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.asis__campo:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.asis__enviar {
  flex: none;
  width: 42px; height: 42px;
  border: none;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.asis__enviar:hover:not(:disabled) { background: var(--brand-dark); }
.asis__enviar:disabled { opacity: .5; cursor: default; }
.asis__enviar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.asis__aviso {
  margin: 0;
  padding: 0 1rem .75rem;
  font-size: .6875rem;
  line-height: 1.4;
  color: var(--ink-soft);
  background: var(--bg);
  text-align: center;
}

.asis__oculto {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* En móvil el panel ocupa casi toda la pantalla: un chat de 300px de alto
   con el teclado abierto no sirve para nada. */
@media (max-width: 560px) {
  .asis__panel {
    right: 10px;
    left: 10px;
    bottom: 86px;
    width: auto;
    max-height: calc(100vh - 120px);
    max-height: calc(100dvh - 120px);
  }
}

/* Con el chat abierto sobra el botón de volver arriba: son tres cosas
   apiladas en la misma esquina y en el móvil tapan demasiado. */
body.asis-abierto .flotante--subir { display: none; }

@media (prefers-reduced-motion: reduce) {
  .asis__puntos span { animation: none; opacity: .5; }
}