/* =========================================================
   IBIZA GROUP — EFECTOS GLOBALES ESTABLES v7
   Sin tilt 3D, sin mix-blend-mode, sin filtros animados y sin
   transformaciones continuas del cursor. Mantiene profundidad,
   destellos y microinteracciones de bajo costo.
   ========================================================= */

html{scroll-behavior:smooth}

#ig-progress{
  position:fixed;top:0;left:0;height:2.5px;width:0;z-index:99999;
  background:linear-gradient(90deg,#c8a45b,#f0d999);
  box-shadow:0 0 10px rgba(200,164,91,.55);
  transition:width .28s ease,opacity .2s ease;
  pointer-events:none;opacity:0;
}
#ig-progress.ig-active{opacity:1}

::selection{background:rgba(200,164,91,.28);color:#151515}

*{scrollbar-width:thin;scrollbar-color:rgba(200,164,91,.55) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(200,164,91,.45);border-radius:20px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(200,164,91,.75);background-clip:content-box}
.sidebar::-webkit-scrollbar-thumb{background:rgba(230,205,145,.35);background-clip:content-box}

body.ig-shell{position:relative}
body.ig-shell:before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1100px 640px at 10% -12%,rgba(200,164,91,.10),transparent 60%),
    radial-gradient(900px 560px at 108% 6%,rgba(200,164,91,.06),transparent 58%),
    radial-gradient(780px 520px at 46% 118%,rgba(20,16,8,.035),transparent 62%);
}

#ig-sparkles{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict}
.ig-spark{
  position:absolute;border-radius:50%;
  background:rgba(200,164,91,.78);
  box-shadow:0 0 7px rgba(200,164,91,.28);
  opacity:0;
  animation:igTwinkle linear infinite;
  will-change:opacity;
}
.ig-spark.ig-spark-dark{background:rgba(245,224,168,.86);box-shadow:0 0 6px rgba(230,205,145,.30)}
@keyframes igTwinkle{0%,100%{opacity:.02}50%{opacity:var(--ig-peak,.34)}}

/* iOS/Android: sin destello azul de toque. */
a,button,.btn,[role="button"]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* La barra superior solo anima la sombra: evita repintados del blur. */
.topbar{transition:box-shadow .25s ease}
.topbar.ig-scrolled{box-shadow:0 1px 0 rgba(200,164,91,.16),0 10px 24px -10px rgba(15,12,5,.14)}
.topbar.ig-scrolled-deep{box-shadow:0 1px 0 rgba(200,164,91,.24),0 16px 32px -12px rgba(15,12,5,.18)}

.sidebar{position:relative;isolation:isolate}
.sidebar > *{position:relative;z-index:1}
.sidebar > .ig-spark{position:absolute;z-index:0}

.nav a{transition:background-color .2s ease,color .2s ease,transform .18s ease}
.nav a:active{transform:translateX(2px) scale(.985)}
.nav svg{transition:transform .2s ease}
.nav a.active{box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.back-area{transition:background-color .2s ease,color .2s ease,transform .18s ease}
.logout{position:relative;transition:color .2s ease}
.logout:after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:currentColor;transition:right .22s ease}
.logout:active:after{right:0}

button,.btn,a.btn,.login-button,.modal-close,.js-slot,.mobile-menu{
  transition:transform .18s ease,box-shadow .22s ease,background-color .2s ease,opacity .2s ease;
}
button:not(:disabled):active,.btn:not(:disabled):active,a.btn:active{transform:scale(.975)}
button.show-password:active{transform:translateY(-50%) scale(.96)}
button:disabled,.btn:disabled,.btn-loading{cursor:default}

.btn.primary{position:relative;overflow:hidden}
.btn.primary:before{
  content:"";position:absolute;top:-60%;left:-30%;width:40%;height:220%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.48),transparent);
  transform:translateX(-160%) rotate(8deg);
  transition:transform .65s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.btn.primary:active:before{transform:translateX(320%) rotate(8deg)}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.nav a:focus-visible{
  outline:2px solid rgba(200,164,91,.8);outline-offset:2px;border-radius:6px;
}

.ig-rippling{position:relative;overflow:hidden}
button.show-password.ig-rippling{position:absolute;overflow:visible}
.ig-ripple{
  position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.50);
  transform:scale(0);animation:igRipple .5s ease-out forwards;
}
.sidebar .ig-ripple,[class*="dark"] .ig-ripple{background:rgba(230,205,145,.30)}
@keyframes igRipple{to{transform:scale(2.5);opacity:0}}

.ig-btn-loading{position:relative;color:transparent!important;pointer-events:none}
.ig-btn-loading:after{
  content:"";position:absolute;inset:0;margin:auto;width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:igSpin .65s linear infinite;
}
.dark-card .ig-btn-loading:after,.btn.secondary.ig-btn-loading:after{border-color:rgba(0,0,0,.25);border-top-color:#151515}
@keyframes igSpin{to{transform:rotate(360deg)}}

/* Aparición sin blur ni 3D para evitar flicker en GPU/compositor. */
.ig-reveal{
  opacity:0;transform:translateY(12px);
  transition:opacity .38s cubic-bezier(.16,1,.3,1),transform .38s cubic-bezier(.16,1,.3,1);
}
.ig-reveal.ig-in{opacity:1;transform:translateY(0)}

/* Las tarjetas permanecen en su capa normal. No se aplica transform ni
   will-change permanente, que era la principal fuente de parpadeo en PC. */
.card,.stat,.kpi,.quick,.quick-card,.dark-card,.soft-panel,.week-row,.maint-item{
  transform:none;
}

tbody tr{transition:background-color .18s ease}
.ig-flash{animation:igFlash .75s ease}
@keyframes igFlash{0%{background-color:rgba(200,164,91,.22)}100%{background-color:transparent}}

.badge.redb,.status.expired,.status.urgent,.status.warning{position:relative}
.badge.redb:before,.status.expired:before,.status.urgent:before,.status.warning:before{
  content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(182,65,57,.28);
  animation:igPulse 2.8s ease-out infinite;pointer-events:none;
}
@keyframes igPulse{0%{box-shadow:0 0 0 0 rgba(182,65,57,.22)}70%,100%{box-shadow:0 0 0 7px rgba(182,65,57,0)}}

/* Modales: animar solo el panel; sin backdrop-filter animado. */
.modal.show > div:not(.back){animation:igModalIn .28s cubic-bezier(.16,1,.3,1) both;box-shadow:0 26px 70px -24px rgba(0,0,0,.42),0 0 0 1px rgba(200,164,91,.10)}
.modal.show .back{animation:igBackIn .2s ease both}
@keyframes igModalIn{from{opacity:0;transform:translateY(10px) scale(.975)}to{opacity:1;transform:none}}
@keyframes igBackIn{from{opacity:0}to{opacity:1}}

.stat .value,.kpi strong{font-variant-numeric:tabular-nums}
.week-arrow,.liq-item svg,.js-maint-toggle svg{transition:transform .22s ease}
.week-details,.maint-item .maint-body{transition:opacity .18s ease}
.avatar,.mark{transition:box-shadow .22s ease,transform .18s ease}
.bell,[class*="bell"]{transition:transform .18s ease}
.doc-grid img,.bike-row img,[class*="thumb"] img{transition:transform .25s ease}

@media (hover:hover) and (pointer:fine){
  .nav a:hover{transform:translateX(2px)}
  .nav a:hover svg{transform:scale(1.06)}
  .back-area:hover{transform:translateX(2px)}
  .logout:hover:after{right:0}
  button:not(:disabled):hover,.btn:not(:disabled):hover,a.btn:hover{box-shadow:0 8px 18px -10px rgba(20,16,8,.28)}
  .btn.primary:hover:before{transform:translateX(320%) rotate(8deg)}
  .card:hover,.stat:hover,.kpi:hover,.quick:hover,.quick-card:hover,.dark-card:hover,.soft-panel:hover{border-color:rgba(200,164,91,.34)}
  .avatar:hover,.mark:hover{box-shadow:0 0 0 3px rgba(200,164,91,.14)}
  .doc-grid img:hover,.bike-row img:hover,[class*="thumb"] img:hover{transform:scale(1.02)}
}
button.show-password:hover{transform:translateY(-50%)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  #ig-sparkles{display:none!important}
}