/* =====================================================================
   Sofia · El asistente
   =====================================================================
   Propio, sin librería. Sustituye a las 283 líneas que retocaban las
   clases internas del widget de chat que se usaba antes —alojado fuera—
   y que se rompían con cada actualización de aquel paquete.

   Va en su propia hoja y no en `app.css` por lo de siempre: solo hace
   falta donde está el asistente, y así un cambio pensado para el listado
   no puede descolocarlo.

   LO QUE MANDA AQUÍ

   · Ningún color nuevo: todo sale de los tokens de `app.css`.
   · Solo se animan `transform` y `opacity`. Nada de `width` ni `top`.
   · En móvil el panel es una hoja a pantalla completa. Una ventana de
     380 px flotando en un teléfono es la peor decisión posible, y es la
     que toma casi todo el mundo.
   ===================================================================== */

:root{
  --ch-ancho: 380px;
  --ch-alto: 560px;
  --ch-radio: 18px;
  --ch-sombra: 0 10px 40px -12px rgba(20,18,31,.35), 0 2px 8px rgba(20,18,31,.08);
  --ch-transicion: 180ms;
}

/* `hidden` TIENE QUE GANAR.
   El atributo `hidden` vale `display:none` en la hoja del navegador, y
   cualquier `display:flex` de aquí lo pisa por especificidad. Sin esta
   línea el panel se veía abierto nada más cargar la página —y ninguna
   comprobación del HTML lo habría cazado, porque el atributo SÍ estaba
   puesto. Se vio en una captura. */
.ch [hidden]{ display: none; }

.ch{
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .75rem;
  font-size: .95rem;
  line-height: 1.55;
}

/* ───────────── La burbuja ───────────── */

.ch__burbuja{
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  /* El degradado de la marca, el mismo del logotipo. */
  background: linear-gradient(135deg, var(--violet), var(--aqua));
  color: var(--white);
  box-shadow: var(--ch-sombra);
  text-decoration: none;
  transition: transform var(--ch-transicion) ease-out,
              box-shadow var(--ch-transicion) ease-out;
}

.ch__burbuja:hover{ transform: scale(1.06); }
/* Al pulsar, la respuesta es inmediata: el principio 6. */
.ch__burbuja:active{ transform: scale(.96); }

.ch__burbuja:focus-visible{
  outline: 2px solid var(--violet);
  outline-offset: 3px;
}

.ch__icono{ grid-area: 1 / 1; transition: transform var(--ch-transicion) ease-out, opacity var(--ch-transicion) ease-out; }
.ch__icono--cerrar{ opacity: 0; transform: rotate(-90deg) scale(.7); }

/* Abierto: el icono gira a una X. El estado lo dice el atributo, no una
   clase suelta, para que el HTML sea la fuente de la verdad. */
.ch[data-abierto] .ch__icono--abrir{ opacity: 0; transform: rotate(90deg) scale(.7); }
.ch[data-abierto] .ch__icono--cerrar{ opacity: 1; transform: none; }

/* El aviso de datos por completar. Lleva número, no solo color. */
.ch__aviso{
  position: absolute;
  top: -2px; right: -2px;
  min-width: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--white);
  font-size: .72rem;
  line-height: 20px;
  text-align: center;
  font-variation-settings: "wght" 600;
  box-shadow: 0 0 0 2px var(--white);
}

/* ───────────── El panel ───────────── */

.ch__panel{
  display: flex;
  flex-direction: column;
  width: min(var(--ch-ancho), calc(100vw - 2rem));
  height: min(var(--ch-alto), calc(100vh - 7rem));
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--ch-radio);
  box-shadow: var(--ch-sombra);
  overflow: hidden;
  /* Aparece desde la burbuja, no desde el centro de la pantalla: el
     movimiento cuenta de dónde viene la cosa. */
  transform-origin: bottom right;
  animation: ch-entra 200ms ease-out;
}

@keyframes ch-entra{
  from{ opacity: 0; transform: translateY(8px) scale(.97); }
  to{   opacity: 1; transform: none; }
}

.ch__cabecera{
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--rule);
  /* Flota sobre el hilo cuando se desplaza, así que va translúcido con
     desenfoque y color sólido de reserva. */
  background: color-mix(in srgb, var(--white) 82%, transparent);
  backdrop-filter: blur(12px);
}

@supports not (backdrop-filter: blur(1px)){
  .ch__cabecera{ background: var(--white); }
}

.ch__marca{
  width: 30px; height: 30px; flex: none;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--violet), var(--aqua));
}

.ch__titulos{ display: flex; flex-direction: column; min-width: 0; flex: 1; }

.ch__titulo{
  font-size: .96rem;
  letter-spacing: -.01em;
  font-variation-settings: "wght" 600;
  color: var(--ink);
}

.ch__estado{
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.35;
  /* Un estado largo no debe empujar la cabecera. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ch__cerrar{
  flex: none;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 0; border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--ch-transicion) ease-out, color var(--ch-transicion) ease-out;
}
.ch__cerrar:hover{ background: var(--wash); color: var(--ink); }
.ch__cerrar:focus-visible{ outline: 2px solid var(--violet); outline-offset: 2px; }

/* ───────────── El hilo ───────────── */

.ch__hilo{
  flex: 1;
  margin: 0;
  padding: 1rem;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--wash);
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.ch__turno{ display: flex; max-width: 100%; }
.ch__turno--bot{ justify-content: flex-start; }
.ch__turno--persona{ justify-content: flex-end; }

.ch__globo{
  margin: 0;
  max-width: 86%;
  padding: .65rem .85rem;
  border-radius: 14px;
  font-size: .92rem;
  /* Un mensaje puede traer saltos de línea y palabras larguísimas
     (un correo, una URL): que rompa antes de desbordar. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ch__turno--bot .ch__globo{
  background: var(--white);
  border: 1px solid var(--rule);
  color: var(--ink);
  border-bottom-left-radius: 5px;
}

.ch__turno--persona .ch__globo{
  background: var(--violet);
  color: var(--white);
  border-bottom-right-radius: 5px;
}

/* Mientras no ha llegado la confirmación del servidor, lo que escribió
   se ve ya pero apagado: está dicho, no está guardado. */
.ch__turno--enviando .ch__globo{ opacity: .6; }

.ch__turno--error .ch__globo{
  background: var(--white);
  border: 1px solid var(--rule-fuerte);
  color: var(--body);
}

.ch__guardado{
  display: block;
  margin-top: .4rem;
  color: var(--aqua);
  font-size: .78rem;
  letter-spacing: .02em;
}

/* El color no puede ser lo único que lo diga: delante va una marca. */
.ch__guardado::before{ content: "✓ "; }

.ch__accion{
  display: inline-block;
  margin-top: .6rem;
  padding: .45rem 1rem;
  border-radius: 999px;
  background: var(--violet);
  color: var(--white);
  font-size: .85rem;
  text-decoration: none;
  transition: transform var(--ch-transicion) ease-out;
}
.ch__accion:hover{ transform: translateY(-1px); }
.ch__accion:focus-visible{ outline: 2px solid var(--ink); outline-offset: 2px; }

.ch__reintentar{
  /* En bloque: pegado al final del párrafo se leía como parte de la
     frase («¿Lo intentas otra vez?Reintentar»). */
  display: block;
  margin-top: .45rem;
  border: 0; padding: 0;
  background: none;
  color: var(--violet);
  font: inherit;
  font-size: .85rem;
  text-decoration: underline;
  cursor: pointer;
}

/* ───────────── Los tres puntos ───────────── */

.ch__escribiendo{
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0 1rem .6rem;
  background: var(--wash);
}

.ch__escribiendo span{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rule-fuerte);
  animation: ch-punto 1.1s ease-in-out infinite;
}
.ch__escribiendo span:nth-child(2){ animation-delay: .15s; }
.ch__escribiendo span:nth-child(3){ animation-delay: .3s; }

@keyframes ch-punto{
  0%, 100%{ transform: translateY(0); opacity: .45; }
  50%{ transform: translateY(-3px); opacity: 1; }
}

/* ───────────── El formulario ───────────── */

.ch__form{
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  padding: .7rem;
  border-top: 1px solid var(--rule);
  background: var(--white);
}

.ch__etiqueta{
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ch__form textarea{
  flex: 1;
  min-height: 42px;
  max-height: 120px;
  padding: .6rem .75rem;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: .92rem;
  resize: none;
}

.ch__form textarea:focus-visible{
  outline: 2px solid var(--violet);
  outline-offset: -1px;
  border-color: var(--violet);
}

.ch__enviar{
  flex: none;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border: 0; border-radius: 12px;
  background: var(--violet);
  color: var(--white);
  cursor: pointer;
  transition: transform var(--ch-transicion) ease-out, opacity var(--ch-transicion) ease-out;
}
.ch__enviar:hover{ transform: scale(1.05); }
.ch__enviar:active{ transform: scale(.94); }
.ch__enviar:focus-visible{ outline: 2px solid var(--ink); outline-offset: 2px; }
.ch__enviar[disabled]{ opacity: .45; cursor: default; transform: none; }

.ch__pie{
  margin: 0;
  padding: .5rem 1rem .7rem;
  background: var(--white);
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.45;
  letter-spacing: .01em;
}

/* ───────────── En un teléfono, una hoja entera ───────────── */

@media (max-width: 30rem){
  .ch{ right: 0; bottom: 0; left: 0; align-items: flex-end; gap: 0; }

  .ch__burbuja{ margin: 0 1rem 1rem 0; }

  .ch__panel{
    width: 100vw;
    /* `dvh` y no `vh`: con la barra del navegador, `vh` deja el campo de
       texto debajo del borde de la pantalla. */
    height: 100dvh;
    border: 0;
    border-radius: 0;
    animation: ch-sube 220ms ease-out;
  }

  @keyframes ch-sube{
    from{ opacity: 0; transform: translateY(16px); }
    to{   opacity: 1; transform: none; }
  }

  /* Con el panel abierto la burbuja estorba: es la X de la cabecera la
     que cierra. */
  .ch[data-abierto] .ch__burbuja{ display: none; }

  .ch__globo{ max-width: 92%; }
}

/* ───────────── Accesibilidad ───────────── */

@media (prefers-reduced-motion: reduce){
  .ch__burbuja,
  .ch__icono,
  .ch__cerrar,
  .ch__enviar{ transition-duration: .01ms; }

  .ch__panel{ animation-duration: .01ms; }
  .ch__escribiendo span{ animation: none; opacity: .7; }
  .ch__burbuja:hover,
  .ch__enviar:hover{ transform: none; }
}

@media (prefers-reduced-transparency: reduce){
  .ch__cabecera{ background: var(--white); backdrop-filter: none; }
}

@media (prefers-contrast: more){
  .ch__panel{ border-color: var(--ink); }
  .ch__turno--bot .ch__globo,
  .ch__form textarea{ border-color: var(--ink); }
  .ch__estado, .ch__pie{ color: var(--body); }
}

/* =====================================================================
   La página `/chat`, que es la misma conversación sin JavaScript
   ===================================================================== */

.c-chat{
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem) var(--gutter) 3rem;
}

.c-chat h1{
  margin: 0 0 .35rem;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  letter-spacing: -.02em;
  line-height: 1.15;
}

.c-chat__contexto,
.c-chat__aviso{
  margin: 0 0 1.5rem;
  color: var(--body);
  font-size: .95rem;
}

.c-chat__aviso{
  padding: .8rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--wash);
}

.c-chat__hilo{
  margin: 0 0 1.25rem;
  padding: 1rem;
  list-style: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--wash);
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.c-chat__turno{ display: flex; flex-direction: column; gap: .2rem; max-width: 86%; }
.c-chat__turno--persona{ align-self: flex-end; align-items: flex-end; }

.c-chat__quien{
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.c-chat__turno p{
  margin: 0;
  padding: .65rem .85rem;
  border-radius: 14px;
  background: var(--white);
  border: 1px solid var(--rule);
  overflow-wrap: anywhere;
}

.c-chat__turno--persona p{
  background: var(--violet);
  border-color: var(--violet);
  color: var(--white);
}

.c-chat__form{ display: flex; flex-direction: column; gap: .6rem; }

.c-chat__form label{
  font-size: .85rem;
  color: var(--body);
  font-variation-settings: "wght" 600;
}

.c-chat__form textarea{
  padding: .7rem .85rem;
  border: 1px solid var(--rule);
  border-radius: 12px;
  font: inherit;
  resize: vertical;
}

.c-chat__form textarea:focus-visible{
  outline: 2px solid var(--violet);
  outline-offset: -1px;
}

.c-chat__form button{
  align-self: flex-start;
  padding: .6rem 1.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--violet);
  color: var(--white);
  font: inherit;
  cursor: pointer;
}

.c-chat__form button:focus-visible{ outline: 2px solid var(--ink); outline-offset: 2px; }

/* ───────────── Las respuestas rápidas (bd/109) ─────────────
   Botones debajo de la pregunta, cuando se contesta con un valor de
   catálogo. 44 px de alto: en el teléfono se pulsan con el pulgar, y un
   botón más bajo hace que se pulse el de al lado. */

.ch__opciones,
.c-chat__opciones{
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.ch__opciones{ margin: .5rem 0 0; }
.c-chat__opciones{ margin: 0 0 1rem; }

.ch__opcion,
.c-chat__opciones button{
  min-height: 44px;
  padding: .4rem .9rem;
  border: 1px solid var(--violet);
  border-radius: 999px;
  background: var(--white);
  color: var(--violet);
  font: inherit;
  font-size: .85rem;
  line-height: 1.2;
  cursor: pointer;
  transition: transform var(--ch-transicion, 180ms) ease-out;
}
.ch__opcion:hover,
.c-chat__opciones button:hover{ transform: translateY(-1px); }
.ch__opcion:focus-visible,
.c-chat__opciones button:focus-visible{ outline: 2px solid var(--ink); outline-offset: 2px; }