/* Sistema de movimiento de todo el producto (etapa UX-MOTION-02, 16 de octubre de 2026). Sigue el estilo aprobado en el
   Resumen ejecutivo (gestion-anim.css), que conserva sus propias reglas y no se toca desde aquí.

   Reglas del sistema:
   - Solo se anima opacidad y transform (aquí con las propiedades sueltas `translate` y `scale`, para no pisar el
     `transform` que un elemento ya use para ubicarse) y el trazo de las donas. Nunca ancho, alto ni posición.
   - Las entradas usan `backwards`: terminada la animación no queda nada aplicado (ni capas ni contextos de apilamiento
     que cambien cómo se ven menús fijos o ventanas). Nada queda en movimiento y nada bloquea los clics.
   - Modo de la página (lo fija un script en línea del <head>, en <html>):
       .mo-full  → se llega desde otra pantalla (o pestaña nueva, o recarga): entrada completa.
       .mo-soft  → la página anterior era la misma (filtros, paginación, cambio de día): solo fundidos y barras.
       .mo-reduced → el sistema pide reducir movimiento: nada se mueve (igual que la media query del final).
   - Cada pantalla lo pide con atributos en el marcado (ver «Atributos» abajo); motion-reports.css y motion-clinic.css
     agregan lo propio de cada grupo de pantallas usando estos mismos tokens. */

/* ── Configuración central: cambiar aquí ajusta todo el sistema (motion.js lee los mismos valores) ─────────────── */
:root {
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1); /* desaceleración natural, sin rebote (la del Resumen ejecutivo) */
  --motion-hover: 160ms;       /* respuesta al pasar el mouse sobre tarjetas y enlaces que se elevan */
  --motion-control: 200ms;     /* botones: color, sombra y el leve hundido al presionar */
  --motion-menu: 220ms;        /* menús de tres puntos, ventanitas y listas desplegables */
  --motion-modal: 300ms;       /* ventanas (dialog), su fondo oscuro y los avisos flotantes */
  --motion-tab: 380ms;         /* fundido del contenido al cambiar filtros, pestañas o página; fundido de <main> */
  --motion-section: 550ms;     /* entrada de un bloque (data-mo="rise") */
  --motion-card: 550ms;        /* entrada de cada tarjeta de un grupo escalonado (data-mo-stagger) */
  --motion-card-step: 70ms;    /* desfase entre tarjetas; también la unidad de --mo-delay */
  --motion-number: 1200ms;     /* cifras que suben hasta su valor (data-mo-count) */
  --motion-bars: 1400ms;       /* barras que crecen desde su base (data-mo-bars) */
  --motion-bar-step: 18ms;     /* desfase entre barras (con tope de 16) */
  --motion-donut: 1500ms;      /* dona dibujada como un solo trazo (data-mo-donut) */
  --motion-collapse: 300ms;    /* contenido de un <details> al abrirse (data-mo-collapse) */
}

@keyframes mo-rise { from { opacity: 0; translate: 0 10px; } }
@keyframes mo-fade { from { opacity: 0; } }
@keyframes mo-grow-y { from { scale: 1 0; } }
@keyframes mo-grow-x { from { scale: 0 1; } }
@keyframes mo-unfold { from { opacity: 0; translate: 0 -6px; } }
@keyframes mo-dialog-in { from { opacity: 0; scale: .985; translate: 0 4px; } }
@keyframes mo-menu-in { from { opacity: 0; translate: 0 -4px; } }
@keyframes mo-toast-in { from { opacity: 0; translate: 0 -8px; } }

/* ── Atributos ──────────────────────────────────────────────────────────────────────────────────────────────── */

/* 1. data-mo="rise": el bloque sube y aparece. Solo en la entrada completa. style="--mo-delay: 2" lo retrasa 2 pasos. */
.mo-full [data-mo="rise"] {
  animation: mo-rise var(--motion-section) var(--motion-ease) backwards;
  animation-delay: calc(var(--mo-delay, 0) * var(--motion-card-step));
}

/* 2. data-mo-stagger: cada hijo aparece en orden (tope de 8 pasos: el último empieza a los ~0,5 s). Solo en la entrada
   completa. El índice lo da el CSS (no depende del script, así no hay parpadeo). --mo-delay del contenedor suma pasos. */
.mo-full [data-mo-stagger] > :not(dialog) {
  animation: mo-rise var(--motion-card) var(--motion-ease) backwards;
  animation-delay: calc((var(--mo-delay, 0) + var(--mo-i, 0)) * var(--motion-card-step));
}
[data-mo-stagger] > :nth-child(2) { --mo-i: 1; }
[data-mo-stagger] > :nth-child(3) { --mo-i: 2; }
[data-mo-stagger] > :nth-child(4) { --mo-i: 3; }
[data-mo-stagger] > :nth-child(5) { --mo-i: 4; }
[data-mo-stagger] > :nth-child(6) { --mo-i: 5; }
[data-mo-stagger] > :nth-child(7) { --mo-i: 6; }
[data-mo-stagger] > :nth-child(n+8) { --mo-i: 7; }

/* 3. data-mo-bars="y" | "x" con [data-mo-bar] dentro: cada barra crece desde su base hasta el tamaño que dio el
   servidor (y: desde abajo; x: desde la izquierda). En ambos modos. El índice (--mo-bar-i, tope 16) lo pone motion.js. */
.mo-full [data-mo-bars] [data-mo-bar], .mo-soft [data-mo-bars] [data-mo-bar] {
  animation: mo-grow-y var(--motion-bars) var(--motion-ease) backwards;
  animation-delay: calc(var(--mo-bar-base, 160ms) + var(--mo-bar-i, 0) * var(--motion-bar-step));
  transform-origin: bottom;
}
.mo-soft [data-mo-bars] [data-mo-bar] { --mo-bar-base: 60ms; }
.mo-full [data-mo-bars="x"] [data-mo-bar], .mo-soft [data-mo-bars="x"] [data-mo-bar] { animation-name: mo-grow-x; transform-origin: left; }

/* 4. data-mo-count: lo hace motion.js (cifras que suben, solo en la entrada completa). */
/* 5. data-mo-donut: lo hace motion.js (trazo continuo de la dona, en ambos modos). */

/* 6. data-mo-collapse en un <details>: su contenido se despliega cada vez que se abre. */
details[data-mo-collapse][open] > :not(summary) { animation: mo-unfold var(--motion-collapse) var(--motion-ease); }

/* 7. data-mo-fade: fundido del contenido que cambia con filtros, pestañas o páginas. En ambos modos. */
.mo-full [data-mo-fade], .mo-soft [data-mo-fade] { animation: mo-fade var(--motion-tab) var(--motion-ease) backwards; }

/* 8. data-mo-hover="lift": solo en tarjetas o enlaces que llevan a algo. Se eleva 2 px y afina borde y sombra. */
[data-mo-hover="lift"] {
  transition: translate var(--motion-hover) var(--motion-ease), box-shadow var(--motion-hover) var(--motion-ease), border-color var(--motion-hover) var(--motion-ease);
}
[data-mo-hover="lift"]:hover, [data-mo-hover="lift"]:focus-visible {
  translate: 0 -2px; border-color: var(--brand-line); box-shadow: 0 6px 18px -10px rgba(25, 36, 58, .35);
}

/* ── Reglas generales (sin atributos) ──────────────────────────────────────────────────────────────────────── */

/* Fundido corto de la página al llegar desde otra pantalla. El Resumen ejecutivo tiene su propia entrada. La ficha del
   paciente no se funde: sus alertas médicas y observaciones (.alert-card) deben verse completas desde el primer cuadro. */
.mo-full:not(.mo-nomain) main:not(:has(.mgt.anim-full, .mgt.anim-soft, .alert-card)) { animation: mo-fade var(--motion-tab) var(--motion-ease) backwards; }

/* El Resumen ejecutivo anima con gestion-anim.css: si alguna pieza compartida trae atributos, aquí no se suman
   (gestion-anim.css carga después y sus reglas, de igual o mayor peso, siguen mandando). */
.mgt.anim-full [data-mo], .mgt.anim-soft [data-mo], .mgt.anim-full [data-mo-stagger] > *, .mgt.anim-soft [data-mo-stagger] > *,
.mgt.anim-full [data-mo-fade], .mgt.anim-soft [data-mo-fade], .mgt.anim-full [data-mo-bar], .mgt.anim-soft [data-mo-bar] { animation: none; }

/* Ventanas: aparecen con un leve acercamiento; el fondo oscuro se funde. */
dialog[open] { animation: mo-dialog-in var(--motion-modal) var(--motion-ease); }
dialog[open]::backdrop { animation: mo-fade var(--motion-modal) var(--motion-ease); }

/* Menús de tres puntos y ventanitas: fundido y 4 px. Listas desplegables propias: misma duración y curva. */
details[open] > .menu-pop, details[open] > .cal-pop, details[open] > .note-pop, details[open] > .rename-pop, details[open] > form.menu-pop {
  animation: mo-menu-in var(--motion-menu) var(--motion-ease);
}
.combo-panel, .results:has(button) { animation-duration: var(--motion-menu); animation-timing-function: var(--motion-ease); }

/* Avisos flotantes. */
.notice.toast {
  animation: mo-toast-in var(--motion-modal) var(--motion-ease);
  transition: opacity var(--motion-modal) var(--motion-ease), transform var(--motion-modal) var(--motion-ease);
}

/* Botones: transición de color y sombra con el token, y un hundido de 1 px al presionar (sin cambiar colores). */
button, a.button {
  transition: background-color var(--motion-control) var(--motion-ease), border-color var(--motion-control) var(--motion-ease),
    box-shadow var(--motion-control) var(--motion-ease), color var(--motion-control) var(--motion-ease), translate var(--motion-control) var(--motion-ease);
}
button:not(:disabled):active, a.button:active { translate: 0 1px; }

/* ── Reducir movimiento: la información aparece de inmediato ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-mo], [data-mo] *, [data-mo-stagger] > *, [data-mo-bar], [data-mo-fade], [data-mo-fade] *, [data-mo-collapse] > *,
  [data-mo-hover], [data-mo-donut] *, main, dialog, dialog::backdrop, .menu-pop, .cal-pop, .note-pop, .rename-pop,
  .combo-panel, .results, .notice.toast, button, a.button { animation: none !important; transition: none !important; }
  [data-mo-hover]:hover, [data-mo-hover]:focus-visible, button:active, a.button:active { translate: none !important; }
}
.mo-reduced [data-mo], .mo-reduced [data-mo] *, .mo-reduced [data-mo-stagger] > *, .mo-reduced [data-mo-bar],
.mo-reduced [data-mo-fade], .mo-reduced [data-mo-fade] *, .mo-reduced [data-mo-collapse] > *, .mo-reduced [data-mo-hover],
.mo-reduced [data-mo-donut] *, .mo-reduced main, .mo-reduced dialog, .mo-reduced dialog::backdrop, .mo-reduced .menu-pop,
.mo-reduced .cal-pop, .mo-reduced .note-pop, .mo-reduced .rename-pop, .mo-reduced .combo-panel, .mo-reduced .results,
.mo-reduced .notice.toast, .mo-reduced button, .mo-reduced a.button { animation: none !important; transition: none !important; }
.mo-reduced [data-mo-hover]:hover, .mo-reduced [data-mo-hover]:focus-visible, .mo-reduced button:active, .mo-reduced a.button:active { translate: none !important; }

/* Al imprimir (y en los PDF que salen de una página del sistema) nada se anima. */
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}