/* Lumifix · Movimiento suave en todo el proyecto.
   Se carga al final de cada página. Usa :where() en lo general para no pisar estilos propios de cada pantalla.
   Las clases .mo-enter / .mo-out las pone /shared/js/motion.js. Todo se apaga con prefers-reduced-motion. */
:root{--mo-ease:cubic-bezier(.22,.8,.24,1);--mo-soft:cubic-bezier(.4,0,.2,1);--mo-in:.4s;--mo-out:.22s}

@keyframes mo-fade{from{opacity:0}}
@keyframes mo-rise{from{opacity:0;transform:translateY(14px)}}
@keyframes mo-pop{from{opacity:0;transform:translateY(16px) scale(.96)}}
@keyframes mo-slide{from{opacity:0;transform:translateX(34px)}}
@keyframes mo-fade-out{to{opacity:0}}
@keyframes mo-pop-out{to{opacity:0;transform:translateY(10px) scale(.96)}}
@keyframes mo-slide-out{to{opacity:0;transform:translateX(34px)}}
@keyframes mo-toast-in{from{opacity:0;transform:translateY(14px) scale(.95)}}
@keyframes mo-toast-out{to{opacity:0;transform:translateY(8px) scale(.95)}}
@keyframes mo-check{0%{transform:scale(0) rotate(-20deg);opacity:0}60%{transform:scale(1.18) rotate(4deg);opacity:1}100%{transform:scale(1) rotate(0)}}
@keyframes mo-ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c,#10b981) 45%,transparent)}100%{box-shadow:0 0 0 22px transparent}}
@keyframes mo-shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
@keyframes mo-shimmer{to{background-position:-200% 0}}

/* ---------- Transición entre páginas (navegadores con View Transitions) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:mo-fade-out .22s var(--mo-soft) both}
::view-transition-new(root){animation:mo-fade .32s var(--mo-soft) both}

/* ---------- Cambio de pantalla dentro de un panel (#main del panel, #view del admin, etc.) ---------- */
.mo-enter>*{animation:mo-rise var(--mo-in) var(--mo-ease) backwards}
.mo-enter>*:nth-child(2){animation-delay:.05s}.mo-enter>*:nth-child(3){animation-delay:.1s}.mo-enter>*:nth-child(4){animation-delay:.15s}
.mo-enter>*:nth-child(5){animation-delay:.2s}.mo-enter>*:nth-child(n+6){animation-delay:.25s}

/* Refrescos de la misma pantalla: sin repetir la entrada (evita el "parpadeo" al guardar o recargar datos).
   .mo-still apaga las animaciones de entrada; .mo-cont las continúa donde iban si el refresco llega mientras entraban. */
.mo-still *:not(.sp):not(.spn):not([class*=spin]):not(.ux-ov):not(.ux-card){animation:none!important}
.mo-cont *{animation-delay:var(--mo-skip,0s)!important}

/* ---------- Ventanas, confirmaciones y paneles laterales: entrada ---------- */
.mdl:not(.dw){animation:mo-fade .22s both}
.mdl:not(.dw) .mbox{animation:mo-pop .34s var(--mo-ease) both}
dialog[open]{animation:mo-pop .3s var(--mo-ease) both}
dialog[open]::backdrop{animation:mo-fade .25s both}
.ux-ic.ok svg,.ux-ic.er svg,.ux-ok .ux-ic svg{animation:mo-check .5s .12s var(--mo-ease) both}
.ux-ic.ok,.ux-ok .ux-ic{animation:uxk .45s .08s both,mo-ring .9s .25s ease-out 1}
.ux-ic.er{animation:uxk .45s .08s both,mo-shake .5s .55s both}
.mo .err:not([hidden]),.ux-ban,.ux-err:not(:empty){animation:mo-rise .3s var(--mo-ease) backwards}

/* ---------- Ventanas y avisos: salida (la pone motion.js con .mo-out) ---------- */
.mo-out{pointer-events:none!important;animation:mo-fade-out var(--mo-out) var(--mo-soft) both!important}
.mo-out>.mo-ovc{animation:mo-pop-out var(--mo-out) var(--mo-soft) both!important}
/* ventanas propias que se agregan a <body> (publicidad, calendario, etc.): motion.js les pone estas clases */
.mo-ov{animation:mo-fade .24s var(--mo-soft) both}.mo-ovc{animation:mo-pop .34s var(--mo-ease) both}
/* ventana de suscripción de Planes (se muestra con .on) */
.pk.on{animation:mo-fade .24s var(--mo-soft) both}.pk.on .pk-d{animation:mo-pop .34s var(--mo-ease) both}
.pk.on.mo-out .pk-d{animation:mo-pop-out var(--mo-out) var(--mo-soft) both!important}
.ux-ov.mo-out,.modal.mo-out,.mdl.mo-out,.dr-b.mo-out,.scrim.mo-out{animation:mo-fade-out var(--mo-out) var(--mo-soft) both!important}
.ux-ov.mo-out .ux-card,.modal.mo-out .mo,.mdl:not(.dw).mo-out .mbox,dialog.mo-out{animation:mo-pop-out var(--mo-out) var(--mo-soft) both!important}
.drawer.mo-out .dr-b{animation:mo-fade-out var(--mo-out) var(--mo-soft) both!important}
.drawer.mo-out .dr-p{animation:mo-slide-out var(--mo-out) var(--mo-soft) both!important}
.toast.mo-out,.ux-to.mo-out,.cu-toast.mo-out,.cg-toast.mo-out,.dl-bn.mo-out{animation:mo-toast-out var(--mo-out) var(--mo-soft) both!important}
#mdl.dwo:not(.dw){animation:mo-fade-out .22s both}#mdl.dwo:not(.dw) .mbox{animation:mo-pop-out .22s var(--mo-soft) both}
/* avisos: entrada suave en todos los paneles */
.toast,.ux-to,.cu-toast,.cg-toast{animation:mo-toast-in .38s var(--mo-ease) backwards}
.dl-bn{animation:mo-rise .4s var(--mo-ease) backwards}
#toast{transition:opacity .3s var(--mo-soft),transform .3s var(--mo-ease)!important;transform:translateX(-50%) translateY(10px) scale(.96)}#toast.on{transform:translateX(-50%)}

/* ---------- Detalles: botones, enlaces, campos, tarjetas, filas ---------- */
:where(button,a,input,select,textarea,summary,label.o,.card,.pill,.tag,tr){transition:background-color .2s var(--mo-soft),border-color .2s var(--mo-soft),color .2s var(--mo-soft),box-shadow .25s var(--mo-soft),opacity .2s var(--mo-soft),transform .2s var(--mo-ease)}
:where(button:not(:disabled),[role=button]):active{transform:scale(.97)}
:where(tbody tr):hover{background-color:color-mix(in srgb,currentColor 3.5%,transparent)}
:where(details>*:not(summary)){animation:mo-fade .3s var(--mo-soft)}
:where(.sp){animation-timing-function:linear}
/* barras de progreso y medidores llenan con suavidad */
:where(.bar>i,.meter>i,.prog>i,.pb>i,[role=progressbar]>*){transition:width .6s var(--mo-ease),background-color .3s,opacity .3s}
/* esqueleto de carga con brillo suave */
.skeleton,.skel{background:linear-gradient(90deg,transparent 25%,color-mix(in srgb,currentColor 8%,transparent) 50%,transparent 75%) 0 0/200% 100%;animation:mo-shimmer 1.4s linear infinite}
/* iconos de confirmación de los avisos */
.ux-to>i,.toast>svg{animation:mo-check .5s .1s var(--mo-ease) both}

/* ---------- Respetar a quien pide menos movimiento ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
}