/* Capa de animaciones (nivel "vistoso"). Aditiva: se puede quitar quitando este archivo y js/anim.js.
   Respeta "reducir movimiento" del equipo y no se aplica al imprimir. */
:root{--ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.56,.64,1);--d:.32s;--ds:.18s;--rise:14px;--lift:-3px}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.16s}

/* entrada de página, escalonada */
.content>*{animation:a-in var(--d) var(--ease) backwards}
.content>*:nth-child(2){animation-delay:60ms}.content>*:nth-child(3){animation-delay:120ms}.content>*:nth-child(4){animation-delay:180ms}.content>*:nth-child(n+5){animation-delay:240ms}
.kpis .kpi,.grid>.card,.g2>.card,.g3>.card{animation:a-in var(--d) var(--ease) backwards}
.kpis .kpi:nth-child(1){animation-delay:80ms}.kpis .kpi:nth-child(2){animation-delay:140ms}.kpis .kpi:nth-child(3){animation-delay:200ms}.kpis .kpi:nth-child(4){animation-delay:260ms}.kpis .kpi:nth-child(5){animation-delay:320ms}.kpis .kpi:nth-child(n+6){animation-delay:380ms}
@keyframes a-in{from{opacity:0;transform:translateY(var(--rise))}}
table.t tbody tr{animation:a-fade .4s var(--ease) backwards}
table.t tbody tr:nth-child(2){animation-delay:30ms}table.t tbody tr:nth-child(3){animation-delay:60ms}table.t tbody tr:nth-child(4){animation-delay:90ms}table.t tbody tr:nth-child(5){animation-delay:120ms}table.t tbody tr:nth-child(6){animation-delay:150ms}table.t tbody tr:nth-child(n+7){animation-delay:180ms}
@keyframes a-fade{from{opacity:0}}

/* tarjetas y botones */
.kpi,.card.hov,a.card{transition:transform var(--d) var(--ease),box-shadow var(--d)}
.kpi:hover,a.card:hover{transform:translateY(var(--lift));box-shadow:0 10px 24px rgba(0,27,61,.14)}
.btn{position:relative;overflow:hidden;transition:transform var(--ds) var(--ease),box-shadow var(--ds),background var(--ds),border-color var(--ds),color var(--ds)}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,45,98,.2)}
.btn:active{transform:translateY(0) scale(.97)}
.btn:disabled{transform:none;box-shadow:none}
.a-rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:a-rip .55s var(--ease) forwards;pointer-events:none}
.btn.sec .a-rip{background:rgba(0,45,98,.18)}
@keyframes a-rip{to{transform:scale(1);opacity:0}}
.btn.a-load{pointer-events:none;opacity:.85}
.btn.a-load::before{content:"";display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:a-rot .7s linear infinite}
.btn.sec.a-load::before{border-color:rgba(0,45,98,.25);border-top-color:var(--blue-700)}
@keyframes a-rot{to{transform:rotate(360deg)}}

/* menú lateral */
.nav a{transition:background var(--ds),color var(--ds),padding var(--ds) var(--ease),box-shadow var(--ds)}
.nav a:hover{padding-left:15px}
.nav a svg{transition:transform var(--d) var(--spring)}.nav a:hover svg{transform:scale(1.15)}
.nav a.on{animation:a-nav .4s var(--spring)}
@keyframes a-nav{from{box-shadow:inset 0 0 0 var(--sunset)}}
body::after{content:"";position:fixed;inset:0;background:rgba(0,16,40,.5);opacity:0;pointer-events:none;transition:opacity .25s;z-index:15}
body.nav-open::after{opacity:1;pointer-events:auto}
@media(min-width:981px){body::after{display:none}}

/* avisos */
.alert{animation:a-slide var(--d) var(--spring);transition:opacity .4s,transform .4s,max-height .4s,margin .4s,padding .4s}
.alert.a-out{opacity:0;transform:translateY(-8px);max-height:0;margin-block:0;padding-block:0;overflow:hidden}
@keyframes a-slide{from{opacity:0;transform:translateY(-12px) scale(.98)}}
.alert.err{animation:a-slide var(--d) var(--spring),a-shake .5s .2s}
@keyframes a-shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}

/* barras y gráficos que se llenan */
.track i,.rp-bar i,.cap .track i{animation:a-fill .9s var(--ease) .15s backwards;transform-origin:left}
.col .stack i{animation:a-grow .8s var(--ease) .15s backwards;transform-origin:bottom}
@keyframes a-fill{from{width:0!important}}@keyframes a-grow{from{transform:scaleY(0)}}

/* números que cambian */
.a-tick{display:inline-block;animation:a-tick var(--d) var(--spring)}
@keyframes a-tick{0%{transform:translateY(-45%);opacity:0}100%{transform:none;opacity:1}}

/* pasar lista */
.lrow{border-radius:8px;transition:opacity .2s}
.lrow.a-f-presente{animation:a-fl-ok .9s ease-out}.lrow.a-f-ausente{animation:a-fl-bad .9s ease-out}.lrow.a-f-justificado{animation:a-fl-warn .9s ease-out}.lrow.a-f-pendiente{animation:a-fl-n .6s ease-out}
@keyframes a-fl-ok{0%{background:var(--ok-bg)}100%{background:transparent}}@keyframes a-fl-bad{0%{background:var(--bad-bg)}100%{background:transparent}}@keyframes a-fl-warn{0%{background:var(--warn-bg)}100%{background:transparent}}@keyframes a-fl-n{0%{background:var(--tint)}100%{background:transparent}}
.lb{position:relative;transition:background var(--ds),color var(--ds),border-color var(--ds),transform var(--ds) var(--spring)}
.lb:active{transform:scale(.92)}
.lb.a-pop{animation:a-pop .4s var(--spring)}
.lb.a-pop::after{content:"";position:absolute;inset:-2px;border-radius:10px;border:2px solid currentColor;opacity:0;animation:a-ring .6s ease-out;pointer-events:none}
@keyframes a-pop{45%{transform:scale(1.14)}}@keyframes a-ring{0%{opacity:.7;transform:scale(.9)}100%{opacity:0;transform:scale(1.35)}}
.ljust.a-open{animation:a-drop .28s var(--ease)}
@keyframes a-drop{from{opacity:0;transform:translateY(-8px)}}
.a-conf{position:fixed;width:9px;height:14px;pointer-events:none;z-index:9999;border-radius:2px;animation:a-conf 1.1s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes a-conf{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}

/* portón */
.cam-guia{animation:a-guia 1.8s ease-in-out infinite}
@keyframes a-guia{50%{border-color:var(--sunset);transform:scale(.97)}}
.cam-box{position:relative;overflow:hidden}
.cam-box::after{content:"";position:absolute;left:24%;right:24%;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--heaven),transparent);box-shadow:0 0 14px var(--heaven);animation:a-scan 2.2s ease-in-out infinite;pointer-events:none}
@keyframes a-scan{0%,100%{top:22%}50%{top:76%}}
.g-estado{animation:a-slide var(--d) var(--ease)}
.g-estado.rojo{animation:a-slide var(--d) var(--ease),a-shake .5s .15s}
.g-estado.verde{animation:a-slide var(--d) var(--ease),a-glow 1s .1s}
@keyframes a-glow{0%{box-shadow:0 0 0 0 rgba(30,123,75,.6)}100%{box-shadow:0 0 0 22px rgba(30,123,75,0)}}
.g-pers{animation:a-slide var(--d) .08s var(--ease) backwards}
.g-pers img,.g-sinfoto{animation:a-pop2 .5s .12s var(--spring) backwards}
@keyframes a-pop2{from{transform:scale(.6);opacity:0}}
.g-opc{animation:a-in .3s var(--ease) backwards}
.g-opc:nth-of-type(2){animation-delay:50ms}.g-opc:nth-of-type(3){animation-delay:100ms}.g-opc:nth-of-type(4){animation-delay:150ms}.g-opc:nth-of-type(n+5){animation-delay:200ms}

/* foto ampliada */
#fotoBox img.avatar{transition:transform var(--d) var(--spring),box-shadow var(--d)}
#fotoBox img.avatar:hover{transform:scale(1.05) rotate(-1deg);box-shadow:0 10px 22px rgba(0,27,61,.2)}
.foto-zoom{animation:a-fadez var(--d) var(--ease);backdrop-filter:blur(6px)}
.foto-zoom.a-out{animation:a-fadez var(--d) var(--ease) reverse forwards}
.foto-zoom img{animation:a-grow-img var(--d) var(--spring)}
.foto-zoom.a-out img{animation:a-grow-img var(--d) var(--ease) reverse forwards}
@keyframes a-fadez{from{opacity:0}}
@keyframes a-grow-img{from{transform:translate(var(--dx,0),var(--dy,0)) scale(var(--sc,.9));opacity:.4}}

/* otros */
.idle-box{animation:a-slide var(--d) var(--spring)}.idle-ov{animation:a-fadez .25s}
.badge{transition:background var(--ds),color var(--ds)}
.login .hero h1,.login .hero p{animation:a-in .6s var(--ease) backwards}.login .hero p{animation-delay:.12s}
.login form{animation:a-in .5s .1s var(--ease) backwards}
input:not([type=checkbox]):not([type=radio]),select,textarea{transition:border-color var(--ds),box-shadow var(--ds)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}@view-transition{navigation:none}}
@media print{*,*::before,*::after{animation:none!important;transition:none!important}body::after{display:none}}