/* ══════════════════════════════════════════════════════════════════════
   EL SISTEMA DE MOVIMIENTO
   ══════════════════════════════════════════════════════════════════════

   Un solo lenguaje de movimiento para el panel médico, la Academia y la
   calculadora. La regla de diseño: el movimiento CUENTA lo que pasa —una
   gráfica que se dibuja dice «estos datos acaban de calcularse», un número
   que sube dice «esto es un resultado»— y nunca decora por decorar.

   La curva firma es un muelle con un pelo de rebote:
       cubic-bezier(.34, 1.56, .64, 1)
   Es lo que hace que las cosas se sientan elásticas y no congeladas.

   Todo se apaga solo con prefers-reduced-motion. */

:root{
  --mv-muelle: cubic-bezier(.34, 1.56, .64, 1);
  --mv-suave:  cubic-bezier(.22, 1, .36, 1);
}

/* `[hidden]` tiene que ganar siempre a cualquier display de esta hoja
   (mv-listo, mv-in, etc. conviven con paneles que se ocultan por JS). */
[hidden]{display:none!important}

/* ── 1 · ENTRADA ELÁSTICA ────────────────────────────────────────────
   La aplica movimiento.js a las tarjetas recién pintadas, con un
   escalonado de 40 ms entre hermanas: la pantalla se ARMA, no aparece. */
@keyframes mvEntra{
  from{ opacity:0; transform:translateY(14px) scale(.97); }
  60% { opacity:1; }
  to  { opacity:1; transform:translateY(0) scale(1); }
}
.mv-in{ animation:mvEntra .5s var(--mv-muelle) both; }

/* ── 2 · PUNTOS DE GRÁFICA QUE BROTAN ────────────────────────────────── */
@keyframes mvPunto{
  from{ opacity:0; transform:scale(0); }
  to  { opacity:1; transform:scale(1); }
}
.mv-pt{
  opacity:0; transform-origin:center; transform-box:fill-box;
  animation:mvPunto .34s var(--mv-muelle) forwards;
}

/* ── 3 · FEEDBACK TÁCTIL CON MUELLE ──────────────────────────────────
   Al pulsar, TODO responde: se hunde un 4 % y vuelve con rebote. Es lo
   que separa una app de una página. Solo transform: nunca repinta capas. */
.mv-listo .btn, .mv-listo .cta, .mv-listo button, .mv-listo .tab,
.mv-listo [role="button"]{
  transition: transform .18s var(--mv-muelle), box-shadow .18s var(--mv-suave);
}
.mv-listo .btn:active, .mv-listo .cta:active, .mv-listo button:active,
.mv-listo .tab:active, .mv-listo [role="button"]:active{
  transform:scale(.96);
}

/* Las tarjetas levitan un pelo al pasar por encima (solo con ratón:
   en el teléfono el hover fantasma se queda pegado). */
@media (hover:hover) and (pointer:fine){
  .mv-listo .blq, .mv-listo .mk, .mv-listo .m, .mv-listo .card,
  .mv-listo .es-item, .mv-listo .ccard, .mv-listo .lp-tri{
    transition: transform .22s var(--mv-suave), box-shadow .22s var(--mv-suave);
  }
  .mv-listo .blq:hover, .mv-listo .mk:hover, .mv-listo .m:hover,
  .mv-listo .es-item:hover, .mv-listo .ccard:hover, .mv-listo .lp-tri:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(13,34,64,.10);
  }
}

/* ── 4 · BARRAS QUE CRECEN ───────────────────────────────────────────
   movimiento.js las arranca en 0 y suelta el ancho real: la barra se
   LLENA delante del usuario. (Las clases ya tienen transition propia;
   esta es la red para las que no.) */
.mv-barra{ transition: width .8s var(--mv-suave) !important; }

/* ── 5 · EL PULSO DE «GUARDANDO…» ────────────────────────────────────
   Para estados de espera cortos: respira, no congela. */
@keyframes mvPulso{ 0%,100%{opacity:1} 50%{opacity:.55} }
.mv-pulso{ animation:mvPulso 1.1s ease-in-out infinite; }

/* ── 6 · APARICIÓN DEL TOAST / AVISOS ────────────────────────────────── */
@keyframes mvToast{
  from{ opacity:0; transform:translateY(8px) scale(.98); }
  to  { opacity:1; transform:translateY(0) scale(1); }
}
.mv-listo .aviso, .mv-listo .toast, .mv-listo .decir, .mv-listo .av{
  animation:mvToast .38s var(--mv-muelle) both;
}

/* ── APAGADO TOTAL ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .mv-in, .mv-pt, .mv-pulso,
  .mv-listo .aviso, .mv-listo .toast, .mv-listo .av{ animation:none !important; opacity:1 !important; transform:none !important; }
  .mv-listo *{ transition:none !important; }
  .mv-barra{ transition:none !important; }
}