/* La ventana de confirmar y de pedir un texto (js/ventana.js). Va en toda página que carga
   HTMX, también en las que no traen main.css: por eso cada color tiene su valor de respaldo. */
.ventana {
  width: min(440px, calc(100% - 32px));
  padding: var(--space-xl, 2rem) var(--space-xl, 2rem) var(--space-lg, 1.5rem);
  border: none;
  border-radius: var(--radius-lg, 14px);
  background: var(--color-bg-card, #fff);
  color: var(--color-text, #1a1d26);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(15, 36, 64, 0.1));
}
.ventana::backdrop { background: rgba(15, 36, 64, 0.4); }
.ventana-texto { margin: 0; font-size: var(--text-base, 0.9375rem); line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.ventana-campo { width: 100%; margin-top: var(--space-md, 1rem); }
.ventana-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-sm, 0.5rem); margin-top: var(--space-xl, 2rem); }
.ventana-acciones > [hidden] { display: none; }
/* En el celular los dos botones se reparten el ancho: objetivos grandes para el pulgar. */
@media (max-width: 480px) {
  .ventana-acciones > button { flex: 1 1 0; justify-content: center; }
}
@media (prefers-reduced-motion: no-preference) {
  .ventana[open] { animation: ventana-entra 140ms ease-out; }
  .ventana[open]::backdrop { animation: ventana-fondo 140ms ease-out; }
}
@keyframes ventana-entra { from { opacity: 0; transform: translateY(6px); } }
@keyframes ventana-fondo { from { opacity: 0; } }