/* =====================================================================
   Preguntas en forma de charla (12 nov 2026, pedido de Chucho: como las
   de BKT, pero con Papoi). La pregunta es una burbuja tuya a la izquierda;
   al tocarla, Papoi "escribe" un instante y responde a la derecha.
   Lo arma /charla.js a partir de los <details> de .preguntas[data-charla]:
   sin JS quedan los <details> de siempre (estilo.css).
   ===================================================================== */
.charla { display: grid; gap: 12px; }
.ch-item { display: grid; }
.ch-pregunta { justify-self: start; max-width: min(100%, 600px); display: inline-flex; align-items: center; justify-content: space-between; gap: 16px;
               padding: 14px 14px 14px 20px; border-radius: 20px 20px 20px 6px; cursor: pointer; text-align: left;
               background: var(--bg-200); border: 1px solid var(--line-100); color: var(--text-100); font: 600 16.5px/1.35 var(--sans);
               box-shadow: 0 14px 30px -22px rgba(0, 0, 0, .9);
               transition: transform 300ms var(--curva), border-color 300ms var(--curva), box-shadow 300ms var(--curva); }
.ch-pregunta:hover { transform: translateY(-1px); border-color: var(--line-200); }
.ch-item.abierto .ch-pregunta { border-color: var(--accent-line); }
.ch-pregunta:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* + que gira hasta ser × */
.ch-signo { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: rgba(149, 0, 255, .14); color: var(--accent-text);
            transition: background-color 300ms var(--curva), color 300ms var(--curva), transform 500ms var(--curva); }
.ch-signo::before, .ch-signo::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 1px;
                                      background: currentColor; transition: transform 500ms var(--curva); }
.ch-signo::after { transform: rotate(90deg); }
.ch-item.abierto .ch-signo { background: var(--accent); color: #fff; transform: rotate(45deg); }

/* la respuesta se abre con la altura justa */
.ch-respuesta { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 450ms var(--curva); }
.ch-respuesta > div { min-height: 0; overflow: hidden; }
.ch-item.abierto .ch-respuesta { grid-template-rows: 1fr; }
.ch-chat { display: flex; flex-direction: row-reverse; align-items: flex-end; gap: 10px; padding: 10px 0 6px clamp(28px, 12%, 110px); }
.ch-avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--bg-200); border: 1px solid var(--accent-line); object-fit: cover;
             box-shadow: 0 0 18px -6px rgba(149, 0, 255, .9); }
.ch-globo { display: flex; flex-direction: column; align-items: flex-end; max-width: min(600px, 100%); }
.ch-quien { margin: 0 6px 5px 0; font: 600 12px/1 var(--sans); letter-spacing: .02em; color: var(--accent-text); }
.ch-burbuja { padding: 13px 16px; border-radius: 18px 18px 6px 18px; background: rgba(149, 0, 255, .16); border: 1px solid rgba(177, 68, 255, .42);
              color: var(--text-100); font-size: 15.5px; line-height: 1.6; transform-origin: 100% 100%; }
.ch-burbuja p { margin: 0; padding: 0; font-size: inherit; color: inherit; }
.ch-burbuja p + p { margin-top: 8px; }
/* "escribiendo…" */
.ch-escribe { display: none; align-items: center; gap: 4px; height: 40px; padding: 0 16px; border-radius: 18px 18px 6px 18px;
              background: rgba(149, 0, 255, .16); border: 1px solid rgba(177, 68, 255, .42); }
.ch-escribe i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-text); animation: ch-ola 1s ease-in-out infinite; }
.ch-escribe i:nth-child(2) { animation-delay: .15s; }
.ch-escribe i:nth-child(3) { animation-delay: .3s; }
@keyframes ch-ola { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
.ch-item.escribe .ch-escribe { display: flex; }
.ch-item.escribe .ch-burbuja { display: none; }
.ch-item.abierto:not(.escribe) .ch-burbuja { animation: ch-llega 500ms var(--curva) both; }
@keyframes ch-llega { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: none; } }

/* entrada: las burbujas suben una tras otra cuando aparece la sección */
.charla .ch-item { opacity: 0; transform: translateY(14px); }
.charla.vista .ch-item { opacity: 1; transform: none;
                         transition: opacity 600ms var(--curva) calc(var(--i, 0) * 70ms), transform 700ms var(--curva) calc(var(--i, 0) * 70ms); }

/* la columna de la izquierda, con Papoi */
.papoi-responde { margin-top: 22px; display: flex; align-items: center; gap: 14px; font-size: 15.5px; line-height: 1.5; color: var(--text-200); }
.papoi-responde img { flex: none; width: 64px; height: 64px; border-radius: 18px; background: var(--bg-200); border: 1px solid var(--line-100); }

@media (max-width: 560px) {
  .ch-pregunta { font-size: 15.5px; padding: 13px 12px 13px 16px; }
  .ch-chat { padding-left: 18px; }
  .ch-burbuja { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .charla .ch-item { opacity: 1; transform: none; }
  .ch-respuesta, .ch-signo, .ch-signo::before, .ch-signo::after, .ch-pregunta { transition: none; }
  .ch-escribe i, .ch-item.abierto:not(.escribe) .ch-burbuja { animation: none; }
}