/* Movimiento del sistema — UNA sola fuente.
 *
 * Vive en su propio archivo (no en input.css) porque tiene que cargar TAMBIÉN
 * en desarrollo, donde Tailwind viene del CDN y app.css ni se toca. Y tiene
 * que ser un archivo servido desde nuestro dominio: la CSP de producción
 * (style-src 'self') bloquea cualquier <style> en línea.
 *
 * Principios: el movimiento confirma, no decora. Entradas de ~300ms con curva
 * suave, salidas más rápidas que las entradas, y todo se apaga si el sistema
 * operativo pide movimiento reducido.
 */

@keyframes aparecer {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@keyframes toast-entrar {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}

@keyframes toast-salir {
  to { opacity: 0; transform: translateX(18px); }
}

@keyframes velo-aparecer {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- Las tarjetas entran al cargar la página ---- */
main .rounded-2xl {
  animation: aparecer 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Escalonado sutil de las primeras secciones: se nota el ritmo, no la espera. */
main > * > .rounded-2xl:nth-child(2),
main > * > :nth-child(2) > .rounded-2xl { animation-delay: 0.05s; }
main > * > .rounded-2xl:nth-child(3),
main > * > :nth-child(3) > .rounded-2xl { animation-delay: 0.1s; }
main > * > .rounded-2xl:nth-child(n+4),
main > * > :nth-child(n+4) > .rounded-2xl { animation-delay: 0.14s; }

/* ---- Botones: respuesta táctil al presionar ---- */
button:not(:disabled),
a[class*="rounded-"] {
  transition-property: transform, box-shadow, background-color, border-color, color, opacity;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}

button:active:not(:disabled),
a[class*="rounded-"]:active {
  transform: scale(0.98);
}

/* ---- Barras que crecen al llegar (gráfica del inicio y vigencia del CSD).
   app.js les fija la medida al cargar; la transición hace el resto. ---- */
[data-barra]    { transition: height 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
[data-progreso] { transition: width  0.9s cubic-bezier(0.16, 1, 0.3, 1); }

/* ---- Contenido de los <details> (Más opciones, zona de peligro) ---- */
details[open] > *:not(summary) {
  animation: aparecer 0.25s ease-out both;
}

/* ---- El panel de resultados del buscador de claves ---- */
[data-resultados]:not(.hidden) {
  animation: aparecer 0.16s ease-out both;
}

/* ---- Toasts (los mensajes de la esquina) ---- */
#toasts { position: fixed; top: 4.75rem; right: 1rem; z-index: 90;
          display: flex; flex-direction: column; gap: 0.5rem;
          width: min(24rem, calc(100vw - 2rem)); }

.toast          { animation: toast-entrar 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }
.toast:nth-child(2) { animation-delay: 0.07s; }
.toast:nth-child(n+3) { animation-delay: 0.14s; }
.toast-saliendo { animation: toast-salir 0.28s ease-in both; }

/* ---- Diálogo de confirmación ---- */
dialog[open] {
  animation: aparecer 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}

dialog::backdrop {
  background: rgb(7 11 20 / 0.45);
  backdrop-filter: blur(2px);
  animation: velo-aparecer 0.22s ease-out both;
}

/* ---- Quien pide menos movimiento, manda ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}