/* motion.css — capa de movimiento común del administrador.
   Criterio (Emil Kowalski): solo se anima lo que da feedback o evita un cambio brusco;
   solo transform y opacity; ease-out fuerte; nada de más de 300 ms salvo hojas móviles.
   Se carga al final del <head> para ganar a los estilos de cada página con la misma especificidad. */

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ── Botones: responden al presionar ───────────────────────────────────────── */
.p-btn, .btn, .t-btn, .p-filter-btn, .period-btn, .filter-btn, .apply-btn, .btn-wa,
.nav-item, .mobile-nav-item {
  transition: transform 160ms var(--ease-out), background-color 150ms ease,
              color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
  -webkit-tap-highlight-color: transparent;
}
.p-btn:active:not(:disabled), .btn:active:not(:disabled), .t-btn:active:not(:disabled),
.p-filter-btn:active, .period-btn:active, .filter-btn:active, .apply-btn:active, .btn-wa:active {
  transform: scale(0.97);
}
/* La navegación se toca decenas de veces al día: presión más sutil */
.nav-item:active, .mobile-nav-item:active { transform: scale(0.95); }

/* ── Menú lateral: se abre con curva fuerte, no con ease genérico ───────────── */
#sidebar { transition: width 200ms var(--ease-out); }

/* ── Ventanas: aparecen desde casi su tamaño, nunca de la nada ─────────────── */
.p-modal-overlay.open, .modal-overlay.open, .t-modal-overlay.open {
  transition: opacity 200ms var(--ease-out);
  @starting-style { opacity: 0; }
}
.p-modal-overlay.open .p-modal, .modal-overlay.open .modal, .t-modal-overlay.open .t-modal {
  transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out);
  @starting-style { opacity: 0; transform: translateY(8px) scale(0.97); }
}

/* En celular las ventanas son hojas que suben desde abajo */
@media (max-width: 768px) {
  /* margin:auto las dejaba a media pantalla; una hoja va pegada abajo */
  .p-modal-overlay .p-modal, .t-modal-overlay .t-modal { margin: auto 0 0; }
  .p-modal-overlay.open .p-modal, .t-modal-overlay.open .t-modal {
    transition: transform 320ms var(--ease-drawer), opacity 200ms ease;
    @starting-style { opacity: 1; transform: translateY(100%); }
  }
}

/* ── Avisos: bajan un poco al entrar, se van rápido ─────────────────────────── */
.toast {
  transform: translateY(-6px);
  transition: opacity 150ms ease, transform 150ms ease;
}
.toast.show {
  transform: translateY(0);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}

/* ── Movimiento reducido: se queda la opacidad, se va el desplazamiento ─────── */
@media (prefers-reduced-motion: reduce) {
  .p-btn, .btn, .t-btn, .p-filter-btn, .period-btn, .filter-btn, .apply-btn, .btn-wa,
  .nav-item, .mobile-nav-item { transform: none !important; }
  .p-modal-overlay.open .p-modal, .modal-overlay.open .modal, .t-modal-overlay.open .t-modal {
    transition: opacity 150ms ease;
    @starting-style { opacity: 0; transform: none; }
  }
  .toast, .toast.show { transform: none; }
}