/* Espera con movimiento (Eduardo, 28/09/2026: «mientras está pensando hay que poner algo que se mueva»).
   Dos piezas: `.pensando` (un texto con tres puntos que laten y unas líneas grises que respiran, con la forma
   de los párrafos que van a llegar) y `.btn.ocupado` (un anillo que gira dentro del botón). Con
   «reducir movimiento» activado en el sistema, todo se queda quieto. */
.pensando { color: var(--muted); }
.pensando .pensando-txt { font-size: 16px; display: inline-flex; align-items: baseline; gap: 2px; }
.pensando .puntos span { display: inline-block; width: 5px; height: 5px; margin-left: 3px; border-radius: 50%; background: var(--accent); animation: latir 1.2s ease-in-out infinite; }
.pensando .puntos span:nth-child(2) { animation-delay: .2s; }
.pensando .puntos span:nth-child(3) { animation-delay: .4s; }
@keyframes latir { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-4px); opacity: 1; } }
.esqueleto { margin-top: 14px; }
.esqueleto i { display: block; height: 12px; border-radius: 6px; margin: 9px 0;
  background: linear-gradient(90deg, var(--line) 0%, var(--surface) 45%, var(--line) 90%); background-size: 240% 100%;
  animation: respirar 1.6s linear infinite; }
.esqueleto i:nth-child(1) { width: 92%; } .esqueleto i:nth-child(2) { width: 100%; } .esqueleto i:nth-child(3) { width: 78%; }
.esqueleto i:nth-child(4) { width: 60%; margin-top: 18px; }
@keyframes respirar { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.btn.ocupado { position: relative; color: transparent !important; pointer-events: none; }
.btn.ocupado::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; animation: girar .8s linear infinite; }
.btn-ghost.ocupado::after, .btn-soft.ocupado::after { border-color: var(--line); border-top-color: var(--accent); }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pensando .puntos span, .esqueleto i, .btn.ocupado::after { animation: none; }
  .pensando .puntos span { opacity: .7; }
}