/* 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;
}

/* ---- La barra lateral que se oculta en pantallas grandes ----
   app.js le pone `menu-oculto` a <html> (y menu-oculto.js, desde el <head>,
   antes de pintar). La barra sale por la izquierda con un margen negativo de su
   ancho —los 264 px de `w-[264px]` en base.html: si cambia uno, cambia el
   otro— y el contenido crece con ella. Al terminar de salir se vuelve
   invisible, para que el teclado no entre a enlaces que no se ven; al volver,
   se ve en el acto. Sólo en lg: abajo la barra va encima del contenido y tiene
   su propio botón. La salida, más rápida que la entrada.
   `left: auto` no es adorno: en lg la barra es `sticky`, y con el `left-0` que
   necesita abajo de lg, sticky la clavaba en x=0 —medido—: no salía, se
   quedaba encima del contenido hasta desaparecer de golpe. */
@media (min-width: 1024px) {
  #barra-lateral {
    left: auto;
    transition: margin-left 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
  }
  html.menu-oculto #barra-lateral {
    margin-left: -264px;
    visibility: hidden;
    transition: margin-left 0.18s ease-in, visibility 0s linear 0.18s;
  }
}

/* ---- 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;
  }
}