/* =========================================================================
   PROVALDAR OS · v10.2 · Vidrio y efectos
   ---------------------------------------------------------------------
   El vidrio necesita algo detrás para verse: por eso hay una aurora fija
   (tres luces rojas que se mueven muy lento, una grilla tenue y grano) y
   los paneles pasan a ser translúcidos con desenfoque.
   Todo cuelga de html.fx-vidrio (fx.js lo pone y lo saca desde Ajustes) y
   el movimiento se apaga solo con «reducir movimiento» del sistema.
   ========================================================================= */

@property --fx-a{syntax:"<number>";inherits:false;initial-value:0}

/* ---------------- la aurora (detrás de todo) ---------------- */
.fx-aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;display:none}
html.fx-vidrio .fx-aurora{display:block}
html.fx-vidrio .app{position:relative;z-index:1}
.fx-aurora i{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform;transform:translateZ(0)}
.fx-aurora i:nth-child(1){width:640px;height:640px;left:8%;top:-220px;
  background:radial-gradient(circle,rgba(255,45,63,.34),transparent 64%);animation:fx-uno 44s ease-in-out infinite alternate}
.fx-aurora i:nth-child(2){width:820px;height:820px;right:-260px;top:22%;
  background:radial-gradient(circle,rgba(200,20,42,.36),transparent 66%);animation:fx-dos 58s ease-in-out infinite alternate}
.fx-aurora i:nth-child(3){width:560px;height:560px;left:30%;bottom:-300px;
  background:radial-gradient(circle,rgba(255,110,80,.16),transparent 66%);animation:fx-tres 50s ease-in-out infinite alternate}
.fx-aurora::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 62% 30%,#000 10%,transparent 72%);mask-image:radial-gradient(ellipse 70% 60% at 62% 30%,#000 10%,transparent 72%)}
.fx-aurora::after{content:"";position:absolute;inset:-50%;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes fx-uno{to{transform:translate3d(220px,140px,0) scale(1.15)}}
@keyframes fx-dos{to{transform:translate3d(-260px,-120px,0) scale(.9)}}
@keyframes fx-tres{to{transform:translate3d(-180px,-160px,0) scale(1.2)}}

/* ---------------- tokens de vidrio ---------------- */
html.fx-vidrio{
  --panel:linear-gradient(180deg,rgba(28,29,37,.56),rgba(13,14,19,.5));
  --card:rgba(22,23,30,.5);
  --vidrio-borde:rgba(255,255,255,.085);
  --vidrio-blur:blur(18px) saturate(150%);
}
html.fx-vidrio body{background-color:#050608}

/* Contenedores de primer nivel: llevan el desenfoque. Los de adentro sólo
   transparencia (un desenfoque dentro de otro cuesta y no se nota). */
html.fx-vidrio :is(.os-panel,.pl-kpis,.side,.agc,.salachat,.trazapanel,.rachabox,.userchip,.sv-paso,.tile,.agent,.doc,.intcard,.barkpi,.staff,.em-tabs){
  -webkit-backdrop-filter:var(--vidrio-blur);backdrop-filter:var(--vidrio-blur);
  border-color:var(--vidrio-borde);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.075),inset 0 -1px 0 rgba(0,0,0,.25),0 26px 50px -32px rgba(0,0,0,.95)}
html.fx-vidrio :is(.os-panel,.sv-paso,.pl-kpis){position:relative}

/* Borde de vidrio: luz arriba a la izquierda, brasa abajo a la derecha. */
html.fx-vidrio :is(.os-panel,.sv-paso,.pl-kpis)::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(155deg,rgba(255,255,255,.2),rgba(255,255,255,.03) 38%,rgba(255,255,255,0) 60%,rgba(255,45,63,.22));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}

/* Luz que sigue al cursor (fx.js pone --mx y --my). */
html.fx-vidrio :is(.os-panel,.sv-paso){
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%),rgba(255,45,63,calc(.12 * var(--fx-a))),transparent 44%),var(--panel);
  transition:--fx-a .35s ease,border-color .25s,transform .25s cubic-bezier(.2,.8,.2,1)}
html.fx-vidrio :is(.os-panel,.sv-paso):hover{--fx-a:1}
html.fx-vidrio .pv-pasos-card{background:radial-gradient(600px 180px at 0 0,rgba(255,45,63,.14),transparent 70%),radial-gradient(520px circle at var(--mx,50%) var(--my,0%),rgba(255,45,63,calc(.12 * var(--fx-a))),transparent 44%),var(--panel)}
html.fx-vidrio .sv-paso.estrella{background:radial-gradient(560px 220px at 0 0,rgba(255,45,63,.24),transparent 70%),radial-gradient(520px circle at var(--mx,50%) var(--my,0%),rgba(255,45,63,calc(.16 * var(--fx-a))),transparent 44%),var(--panel)}
html.fx-vidrio .sv-paso:hover{transform:translateY(-2px)}

/* Piezas internas: vidrio liviano, sin desenfoque. */
html.fx-vidrio :is(.em-cifra,.pv-cifras>div,.pv-stepper li,.pv-pedidos li,.sv-cli li,.pv-parte,.sv-salida,.pv-seg button){
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));border-color:rgba(255,255,255,.075);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}

/* Marco: barra lateral, barra de arriba y barra de comandos. */
html.fx-vidrio .rail{background:linear-gradient(180deg,rgba(12,13,18,.66),rgba(7,8,11,.74));
  -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);border-right-color:rgba(255,255,255,.07)}
html.fx-vidrio .topbar{background:rgba(8,9,12,.5);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%)}
html.fx-vidrio .cmdbar{background:rgba(14,15,20,.55);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 40px -18px rgba(0,0,0,.9),0 0 0 1px rgba(255,45,63,.14)}
html.fx-vidrio .modal{background:rgba(14,15,20,.72);-webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%)}
html.fx-vidrio .navitem{transition:background .2s,color .2s,border-color .2s,transform .2s}
html.fx-vidrio .navitem:hover{transform:translateX(2px)}

/* Botón principal: un brillo que cruza al pasar el cursor. */
html.fx-vidrio .btn.primary{position:relative;overflow:hidden;isolation:isolate}
html.fx-vidrio .btn.primary::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);transform:skewX(-18deg);transition:left .7s cubic-bezier(.2,.8,.2,1)}
html.fx-vidrio .btn.primary:hover::after{left:120%}
html.fx-vidrio .btn:active{transform:translateY(1px) scale(.985)}

/* Entrada de la vista: los paneles suben en cascada (fx.js pone --i). */
html.fx-vidrio .fx-entra :is(.os-head,.em-tabs,.os-panel,.sv-paso,.pl-kpis,.agc,.tile,.agent,.doc){
  animation:fx-sube .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes fx-sube{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}

/* Respiración de los indicadores en vivo. */
html.fx-vidrio .chip.ok .dot{animation:fx-late 2.4s ease-in-out infinite}
@keyframes fx-late{50%{box-shadow:0 0 0 5px rgba(61,220,132,0)}0%{box-shadow:0 0 0 0 rgba(61,220,132,.45)}}

@media (prefers-reduced-motion:reduce){
  .fx-aurora i,html.fx-vidrio .chip.ok .dot{animation:none}
  html.fx-vidrio .fx-entra *{animation:none!important}
  html.fx-vidrio .btn.primary::after{display:none}
}

/* ---------------- interruptor en Ajustes ---------------- */
.fx-ajuste{margin-top:16px}
.fx-ajuste .pv-seg{grid-template-columns:repeat(2,minmax(0,1fr));max-width:520px}