/* Chat de preguntas frecuentes de TarjetIT (dueños de negocio). Una columna, alineada a la izquierda.
   Lo único con personalidad es el sello: cada respuesta llega "sellada", como una visita en la tarjeta. */
.chat-pagina {
  --marca: #0B2545;
  --marca-2: #149DDD;
  --titulo: var(--marca);
  --tu-fondo: var(--marca);
  --tu-texto: #FFFFFF;
  --boton-fondo: var(--marca);
  --boton-texto: #FFFFFF;
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px 40px;
}
.chat-pagina.en-panel { padding: 0 0 24px; margin: 0; }
/* En el panel (lienzo azul noche) las respuestas son figuras claras, como las tarjetas del panel. */
.chat-pagina.en-panel {
  --marca: var(--ink);
  --titulo: #0B2545;
  --tu-fondo: #149DDD;
  --tu-texto: #06162B;
  --boton-fondo: #149DDD;
  --boton-texto: #06162B;
}
.chat-pagina.en-panel .burbuja {
  --paper: #F2F5F8; --ink: #0A1626; --muted: #4B5D72; --line: #D3DCE6; --wash: #E4EBF2; --focus: #0B6FB0;
  background: var(--paper); color: var(--ink); border-color: transparent;
}
.chat-pagina h1 { font: 700 clamp(1.75rem, 6vw, 2.25rem)/1.1 "Bricolage Grotesque", system-ui, sans-serif; color: var(--marca); }
.chat-intro { color: var(--muted); margin: 8px 0 20px; max-width: 52ch; }

/* ---- Conversación ---- */
.chat { display: flex; flex-direction: column; gap: 14px; }
.msg { display: flex; gap: 10px; align-items: flex-start; scroll-margin-top: 16px; }
.msg.tu { justify-content: flex-end; }
.msg.tu p {
  margin: 0; max-width: 85%; padding: 10px 14px;
  background: var(--tu-fondo); color: var(--tu-texto);
  border-radius: 18px 18px 4px 18px; overflow-wrap: anywhere;
}

/* El sello: círculo con doble filo y el ícono de TarjetIT, como la marca que deja un sello de goma. */
.sello {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--marca-2); box-shadow: inset 0 0 0 2px #FFFFFF, inset 0 0 0 3px var(--marca-2);
  background: #FFFFFF url("/img/brand/tarjetit-icono.svg") center / 20px no-repeat;
  transform: rotate(-8deg);
}
.msg.nuevo .sello { animation: sellar 220ms cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes sellar {
  from { transform: scale(1.6) rotate(-20deg); opacity: 0; }
  to { transform: scale(1) rotate(-8deg); opacity: 1; }
}
.msg.escribiendo .burbuja p { color: var(--muted); margin: 0; }

.burbuja {
  min-width: 0; max-width: calc(100% - 46px);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 4px 18px 18px 18px; padding: 12px 14px;
}
.burbuja > :last-child { margin-bottom: 0; }
.burbuja .article-body > :last-child { margin-bottom: 0; }
.burbuja .titulo { font-weight: 700; color: var(--titulo); margin-bottom: 6px; }
.burbuja .tambien { color: var(--muted); font-size: 0.875rem; margin: 12px 0 6px; }
.msg.sin-respuesta .burbuja, .msg.persona .burbuja { border-color: var(--marca-2); }

.sugerencias { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sugerencias a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--wash);
  color: var(--ink); text-decoration: none; font-size: 0.9375rem; line-height: 1.3;
}
.sugerencias a:hover { border-color: var(--marca-2); }

.whatsapp {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; padding: 0 16px;
  border-radius: var(--radius-s); background: #1A7F37; color: #FFFFFF; font-weight: 700; text-decoration: none;
}

/* ---- Caja para escribir ---- */
.chat-caja {
  display: flex; gap: 8px; margin: 18px 0 0; padding: 6px;
  border: 2px solid var(--boton-fondo); border-radius: 999px; background: var(--paper);
}
.chat-caja input {
  flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 12px;
  border: 0; background: transparent; font: inherit; color: var(--ink);
}
.chat-caja input:focus { outline: none; }
.chat-caja:focus-within { box-shadow: 0 0 0 3px rgba(20, 157, 221, .35); }
.chat-caja button {
  flex: 0 0 auto; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px;
  background: var(--boton-fondo); color: var(--boton-texto); font: 700 1rem/1 "Atkinson Hyperlegible Next", system-ui, sans-serif; cursor: pointer;
}
.chat-caja button:disabled { opacity: .6; cursor: progress; }

/* ---- Lista completa ---- */
.temas { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.temas h2 { font: 700 1.375rem/1.2 "Bricolage Grotesque", system-ui, sans-serif; color: var(--marca); margin-bottom: 4px; }
.temas h3 { font: 600 1rem/1.3 "Bricolage Grotesque", system-ui, sans-serif; color: var(--muted); margin: 24px 0 4px; }
.qa { border-bottom: 1px solid var(--line); }
.qa summary {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  min-height: 48px; padding: 10px 0; cursor: pointer; font-weight: 700; list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; flex: 0 0 auto; color: var(--marca-2); font-size: 1.4rem; line-height: 1; transition: transform 160ms ease; }
.qa[open] summary::after { transform: rotate(45deg); }
.qa .article-body { padding: 0 0 14px; }
/* El encabezado del panel es alto en celular: que la respuesta nueva no quede debajo de él. */
.chat-pagina.en-panel .msg { scroll-margin-top: 200px; }
@media (min-width: 1024px) { .chat-pagina.en-panel .msg { scroll-margin-top: 110px; } }