/* Pulido: transiciones limpias y micro-animaciones para todo el inventario. Solo piel: no cambia ninguna pantalla ni dato. Quitar el <link> lo revierte. */

/* cambio de página suave (el navegador mezcla la pantalla vieja con la nueva) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:pOut .22s ease both}
::view-transition-new(root){animation:pIn .38s cubic-bezier(.2,.8,.2,1) both}
@keyframes pOut{to{opacity:0;transform:scale(.995)}}
@keyframes pIn{from{opacity:0;transform:translateY(8px)}}

/* entrada escalonada de lo que se ve */
@keyframes pSube{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
main .glass,main .mosaico,main .vtile,main .res,main .aviso,main .rejilla>*{animation:pSube .6s cubic-bezier(.2,.8,.2,1) both}
main .glass:nth-child(2),main .mosaico:nth-child(2),main .rejilla>*:nth-child(2){animation-delay:.05s}
main .glass:nth-child(3),main .mosaico:nth-child(3),main .rejilla>*:nth-child(3){animation-delay:.1s}
main .glass:nth-child(4),main .mosaico:nth-child(4),main .rejilla>*:nth-child(4){animation-delay:.15s}
main .glass:nth-child(n+5),main .mosaico:nth-child(n+5),main .rejilla>*:nth-child(n+5){animation-delay:.2s}

/* tarjetas y renglones que responden al mouse */
.mosaico,.vtile,.glass.lista a,.res{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .3s}
.mosaico:hover,.vtile:hover{transform:translateY(-4px)}
.glass.lista a{transition:background .25s,transform .3s cubic-bezier(.2,.8,.2,1)}.glass.lista a:hover{transform:translateX(3px)}
table tbody tr{transition:background .25s}

/* botones: brillo que cruza al pasar y apretón al tocar */
.btn{position:relative;overflow:hidden;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s,filter .3s}
.btn:active{transform:scale(.97)}
.btn.primario:after{content:"";position:absolute;top:0;bottom:0;width:55%;left:-80%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);transform:skewX(-20deg);transition:left .7s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.btn.primario:hover:after{left:130%}
.btn:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid color-mix(in srgb,currentColor 0%,#ff6a1a);outline-offset:2px}

/* números alineados y campos que se iluminan */
.num,td.num,.mono{font-variant-numeric:tabular-nums}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px rgba(255,106,26,.14);transition:box-shadow .25s,border-color .25s}

/* pastillas de estado con un pulso suave cuando son urgentes */
.pastilla.rojo{animation:pPulso 2.6s ease-in-out infinite}
@keyframes pPulso{50%{box-shadow:0 0 0 5px rgba(255,93,108,.14)}}

@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}::view-transition-old(root),::view-transition-new(root){animation:none}}