/* ──────────────────────────────────────────────────────────────────────────
   TOPOO · el chat

   Lo propio de esta página. La paleta, los radios, la textura, `.pildora` y
   `.marca-dato` viven en `topoo.css` y se usan tal cual: **el chat y la landing
   tienen que parecer el mismo producto**, y lo parecen porque comparten la
   base, no porque dos archivos coincidan de casualidad.

   Las reglas del render no cambian y están en `chat.js`: **tope y vigencia
   siempre visibles, la letra chica se colapsa pero nunca se trunca, y todo se
   pinta desde `RespuestaBot` y nunca desde la frase redactada.**
   ────────────────────────────────────────────────────────────────────────── */
.chat{display:flex;flex-direction:column;height:100dvh;max-width:760px;margin:0 auto}

/* ── cabecera ──────────────────────────────────────────────────────────────
   **«Nueva conversación» vive acá y se ve siempre.** Estaba escondida abajo, y
   una salida que hay que buscar no es una salida: quien se enredó en una
   conversación necesita poder cortarla sin leer la pantalla entera. */
.chat .cabecera{display:flex;align-items:center;gap:10px;padding:11px 0;
  border-bottom:1px solid var(--linea)}
.chat .cabecera .topito{width:34px;height:30px}
.chat .cabecera .nombre{font-family:Fraunces,Georgia,serif;font-size:19px;
  font-weight:600;letter-spacing:.06em}
.chat .cabecera .quien{font-size:11.5px;color:var(--tinta3);margin-left:2px}
.chat .acciones{margin-left:auto;display:flex;gap:6px;align-items:center}
.chat .acciones button{background:none;border:1px solid var(--linea);
  color:var(--tinta2);border-radius:var(--r-pill);padding:6px 13px;font:inherit;
  font-size:12.5px;cursor:pointer;white-space:nowrap}
.chat .acciones button:hover{border-color:var(--acento);color:var(--acento);
  background:var(--acento-suave)}

/* ── el hilo ───────────────────────────────────────────────────────────── */
.hilo{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;
  padding:16px 0;scroll-behavior:smooth}

/* Un turno del bot es el avatar y lo que dice, del avatar hacia la derecha.
   Topito tiene cara en cada respuesta: es quien contesta, no «el sistema». */
.turno{display:flex;gap:9px;align-items:flex-start;max-width:min(620px,96%)}
.turno .topito{width:32px;height:28px;margin-top:3px}
.turno .dice{min-width:0;flex:1;display:flex;flex-direction:column;gap:8px}

.burbuja{padding:11px 14px;border-radius:var(--r-md);white-space:pre-wrap;
  line-height:1.5;font-size:14.5px}
.burbuja.yo{align-self:flex-end;max-width:min(560px,88%);background:var(--acento);
  color:#fff;border-radius:var(--r-md) var(--r-md) var(--r-xs) var(--r-md);
  box-shadow:var(--sombra)}
.burbuja.bot{background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--r-md) var(--r-md) var(--r-md) var(--r-xs);
  box-shadow:var(--sombra)}
.burbuja.err{background:var(--mal-suave);border:1px solid var(--mal);color:var(--mal)}
.burbuja .aviso{margin-top:7px;font-size:12px;color:var(--mal)}

/* Los tres puntos mientras piensa. Sin esto la espera se ve como una falla. */
.pensando{display:inline-flex;gap:4px;align-items:center;padding:3px 0}
.pensando i{width:6px;height:6px;border-radius:50%;background:var(--tinta3);
  animation:cava 1.1s ease-in-out infinite}
.pensando i:nth-child(2){animation-delay:.16s}
.pensando i:nth-child(3){animation-delay:.32s}
@keyframes cava{0%,60%,100%{transform:translateY(0);opacity:.45}
                30%{transform:translateY(-4px);opacity:1}}

/* ── tarjetas de oferta ────────────────────────────────────────────────── */
.resultados{display:flex;flex-direction:column;gap:8px}
.oferta{background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--r-madriguera);padding:13px 15px;box-shadow:var(--sombra)}
.oferta .cab{display:flex;align-items:flex-start;gap:10px;justify-content:space-between}
.oferta .nombre{font-weight:600;font-size:15px;line-height:1.25}
.oferta .dcto{font-family:Fraunces,Georgia,serif;font-size:24px;font-weight:600;
  color:var(--acento);white-space:nowrap;line-height:1}
/* El tope va SIEMPRE que exista: un 50 % con techo de $5.000 no es un 50 %. */
.oferta .tope{display:block;font-family:Inter,sans-serif;font-size:10.5px;
  font-weight:500;color:var(--acento);background:var(--acento-suave);
  border-radius:var(--r-pill);padding:2px 8px;text-align:center;margin-top:5px}
.oferta .linea{display:flex;flex-wrap:wrap;gap:3px 14px;margin-top:8px}
.oferta .lugar{font-size:13px;color:var(--tinta)}
.oferta .pago{font-size:11.5px;color:var(--tinta2)}
.oferta .dato{display:inline-flex;gap:5px;align-items:baseline;min-width:0}
.oferta .dato b{color:var(--tinta3);font-weight:500;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.04em}
.oferta .vig{font-size:11px;color:var(--tinta3);margin-top:9px;display:flex;
  flex-wrap:wrap;gap:6px;align-items:center;padding-top:9px;
  border-top:1px dashed var(--linea)}
.oferta details{margin-top:8px}
.oferta details summary{font-size:11.5px;color:var(--acento);cursor:pointer;
  list-style:none}
.oferta details summary::-webkit-details-marker{display:none}
.oferta details summary::before{content:"▸ ";font-size:10px}
.oferta details[open] summary::before{content:"▾ "}
.oferta details .chica{font-size:11.5px;color:var(--tinta2);margin-top:6px;
  white-space:pre-wrap;line-height:1.45}
/* La trazabilidad no es letra chica: es el argumento. Se ve, en monoespaciada. */
.oferta .ref{font-size:10px;color:var(--tinta3);margin-top:7px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;word-break:break-all}

/* ── por dónde seguir ──────────────────────────────────────────────────────
   **Después de cada respuesta hay botones, siempre.** El bot contestaba y se
   quedaba callado, y seguir obligaba a escribir la pregunta siguiente desde
   cero. Los conteos salen del mismo buscador que responde: un botón no puede
   prometer lo que no hay. */
.opciones{display:flex;gap:7px;flex-wrap:wrap}
.opciones .titulo{width:100%;font-size:11px;color:var(--tinta3);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:1px}
.opciones .pildora.reiniciar{border-style:dashed;color:var(--tinta2)}
.mas{align-self:flex-start;background:none;border:1px dashed var(--linea);
  color:var(--tinta2);border-radius:var(--r-sm);padding:8px 13px;font:inherit;
  font-size:12.5px;cursor:pointer}
.mas:hover{border-color:var(--acento);color:var(--acento)}

/* Lo que quedó fuera por vigencia sin confirmar. Se cuenta siempre y se puede
   desplegar: es el precio declarado de la regla «solo entra lo confirmado». */
.descartadas{font-size:11.5px;color:var(--tinta3)}
.descartadas summary{cursor:pointer;list-style:none}
.descartadas summary::-webkit-details-marker{display:none}
.descartadas summary::before{content:"▸ ";font-size:10px}
.descartadas[open] summary::before{content:"▾ "}
.descartadas ul{margin:6px 0 0;padding-left:18px}
.descartadas li{margin-bottom:2px}

/* ── la entrada ────────────────────────────────────────────────────────── */
.entrada{display:flex;gap:8px;padding:12px 0 16px;border-top:1px solid var(--linea)}
.entrada input{flex:1;min-width:0;padding:13px 15px;border:1px solid var(--linea);
  border-radius:var(--r-sm);background:var(--papel);color:var(--tinta);font:inherit}
.entrada input:focus{outline:2px solid var(--acento);outline-offset:1px;
  border-color:transparent}
.entrada button{background:var(--acento);color:#fff;border:0;
  border-radius:var(--r-sm);padding:0 20px;font:inherit;font-weight:600;cursor:pointer;
  box-shadow:var(--sombra)}
.entrada button:hover{filter:brightness(1.07)}

@media (max-width:620px){
  .turno{max-width:100%}
  .oferta .cab{flex-direction:column;gap:4px}
  .oferta .tope{text-align:left;align-self:flex-start}
  .chat .cabecera .quien{display:none}
  .opciones .pildora{width:100%}
}