/* ============================================================================
 *  MOTION · Microinteracciones "precisión pro" (Meridian / NeatTech)
 *  Filosofía: rápido, con propósito, orquestado. Nada ambiental ni decorativo.
 *  Todo lo de entrada respeta prefers-reduced-motion.
 * ========================================================================= */

/* ── Entradas: cada bloque de la vista sube+aparece en secuencia ─────────── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes m-rise {
    from { opacity: 0; transform: translateY(9px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }

  /* SOLO al navegar (clase .route-enter puesta ~1.2s por count.js). Así NO se
     reproduce en re-renders internos de una vista (marcar día, filtrar…). */
  .app-view.route-enter > * {
    animation: m-rise 0.44s var(--ease-out-cubic) both;
  }
  .app-view.route-enter > *:nth-child(1) { animation-delay: 0.00s; }
  .app-view.route-enter > *:nth-child(2) { animation-delay: 0.05s; }
  .app-view.route-enter > *:nth-child(3) { animation-delay: 0.10s; }
  .app-view.route-enter > *:nth-child(4) { animation-delay: 0.15s; }
  .app-view.route-enter > *:nth-child(5) { animation-delay: 0.20s; }
  .app-view.route-enter > *:nth-child(n+6) { animation-delay: 0.24s; }

  /* Las tarjetas de la banda de KPIs entran con su propio micro-escalonado */
  .app-view.route-enter .kpi-strip .kpi { animation: m-rise 0.44s var(--ease-out-cubic) both; }
  .app-view.route-enter .kpi-strip .kpi:nth-child(2) { animation-delay: 0.06s; }
  .app-view.route-enter .kpi-strip .kpi:nth-child(3) { animation-delay: 0.11s; }
  .app-view.route-enter .kpi-strip .kpi:nth-child(4) { animation-delay: 0.16s; }

  /* El panel destacado navy entra con un fundido más sereno */
  .app-view.route-enter .dash-board { animation: m-fade 0.5s var(--ease-out) both; }
}

/* ── Microinteracciones (siempre; no dependen de reduced-motion) ─────────── */
.btn {
  transition: background-color var(--duration-press) var(--ease-out),
              transform var(--duration-press) var(--ease-out),
              box-shadow var(--duration-press) var(--ease-out);
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.99); }

.btn-icon, .iconbtn, .profile-logout {
  transition: background-color var(--duration-press) var(--ease-out),
              color var(--duration-press) var(--ease-out),
              transform var(--duration-press) var(--ease-out);
}
.btn-icon:active, .profile-logout:active { transform: scale(0.94); }

/* Tarjetas/paneles: elevación sutil al pasar (solo las clicables se mueven) */
.card, .panel, .stat-pill {
  transition: transform var(--duration-press) var(--ease-out),
              box-shadow var(--duration-press) var(--ease-out);
}
a.card:hover, .card.clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

/* Filas de listas/actividades con feedback */
.prox-row, .act, .cmd-row, .cmdk-item, .fac-alumno {
  transition: background-color var(--duration-press) var(--ease-out),
              border-color var(--duration-press) var(--ease-out);
}

/* Nav lateral: transición suave del estado activo */
.nav-item { transition: background-color var(--duration-press) var(--ease-out),
                        color var(--duration-press) var(--ease-out); }