/* ------------------------------------------------ bloqueo con esfera
   Copia del aviso "Actualizando" de la sesion Monitoreo (DashboardASF/monitoreo.aspx):
   velo negro al 45 %, tarjeta de 340 px y la esfera de 60 px con su halo. Los tonos,
   los radios y los tiempos de giro son los de alla. Se maneja con JS/Esfera.js
   (Bloqueo.mostrar / Bloqueo.ocultar). El sello es Imagenes/Sello.png.
   Solo se anima transform, igual que en la app: el color de las manchas no se
   mueve, se mueve su POSICION, y lo que se ve cambiar es la interferencia. */
:root{
  --esf-base:#2b3550; --esf-a:#3b6fd4; --esf-b:#5a6a8a; --esf-c:#c7cbd1;
  --esf-aro:.14; --esf-halo:0;
}
.velo{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;padding:0 32px;
  cursor:wait;animation:velo-entra .2s ease-out}
/* Sin esto el display:flex de arriba le gana al atributo hidden y el velo se
   queda puesto -y bloqueando- despues de terminar la carga. */
.velo[hidden]{display:none}
@keyframes velo-entra{from{opacity:0}to{opacity:1}}
.velo .velo-tarjeta{width:100%;max-width:340px;border-radius:14px;padding:26px 24px;
  background:var(--fondo);display:flex;flex-direction:column;align-items:center;outline:none}
.velo .velo-tarjeta p{margin:16px 0 0;font-size:14.5px;line-height:21px;text-align:center;color:var(--tinta)}
/* Caja exterior 18 % mayor que la esfera: el halo se sale de ella y no puede
   vivir dentro del contenedor recortado. */
.esfera{position:relative;width:71px;height:71px;display:grid;place-items:center}
.esfera .halo{position:absolute;inset:0;width:100%;height:100%;opacity:var(--esf-halo)}
.esfera .bola{position:relative;width:60px;height:60px;border-radius:50%;
  /* Recorte por DUPLICADO, y no por indeciso: el barrido mide el 160 % de la
     bola y se sale por los cuatro lados a proposito, mientras las manchas
     llevan `will-change` y se componen en su propia capa grafica. Una capa asi
     puede escaparse del `overflow:hidden` redondeado —fue la causa de que la
     esfera se leyera «cuadrada» el 25/09/2026— y `clip-path` es el que no se
     escapa. Quitar cualquiera de los dos deja la puerta abierta. */
  overflow:hidden;clip-path:circle(50%);background:var(--esf-base)}
.esfera .capa,.esfera .vidrio,.esfera .sello{
  position:absolute;inset:0;width:100%;height:100%;
  /* Redondas UNA POR UNA, y no solo por el recorte de la bola: una capa con
     mix-blend-mode o con will-change se compone aparte y puede escaparse del
     `overflow:hidden` redondeado del padre. Cuando eso pasa, lo que asoma es el
     cuadrado del sello —la imagen es cuadrada y de fondo negro— y la esfera se
     lee como un cuadrado con las esquinas comidas. Con esto no hay esquinas que
     se puedan escapar. */
  border-radius:50%}
.esfera .capa>svg{width:100%;height:100%;display:block}
/* El sello de la ASF, quieto y al fondo: es lo que se tiene que reconocer.
   Es el DISCO NEGRO, `img/asf-sello.png`, el mismo archivo que la app: a 60 px
   el negro se lee de golpe y el sello metalico se empasta. Ojo, no es el
   `img/asf.jpg` del encabezado; son dos imagenes con el mismo motivo y no se
   pueden intercambiar. El PNG trae las esquinas transparentes, asi que a
   `cover` no hay cuadrado que pueda asomar.
   OJO: esta url la tiene que incrustar tools/generar.py para que el archivo
   estatico siga siendo autocontenido; si se cambia la ruta aqui, hay que
   cambiarla alli. */
.esfera .sello{background:var(--esf-base) url("../Imagenes/Sello.png") center/cover no-repeat}
/* Las manchas, al 30 %, pasan de tapar a tenir. SIN `mix-blend-mode`: sobre el
   negro del sello `screen(0,s)` es `s`, o sea que no hacia nada salvo forzar
   una capa grafica aparte, que es justo lo que se escapaba del recorte. Con un
   sello de medios tonos volveria a importar. El precio de este sello es que a
   30 % las manchas casi no se ven y la esfera pierde el azul: decision tomada
   con las dos versiones enfrentadas, aqui y en la app. */
.esfera .capa{will-change:transform;opacity:.3}
/* Barrido: una banda de luz cruza en diagonal, como el reflejo de un cristal al
   girarlo. Aclara de paso y se va; no se queda encima de nada.
   Van dos cajas anidadas y no una sola con el degradado inclinado: la de fuera
   se mueve en HORIZONTAL por la pantalla, que es lo que se quiere ver, y la de
   dentro es la que esta girada 25 grados. Con un `linear-gradient(115deg)` en
   una sola caja, la banda viajaria a lo largo de su propio eje. Mide el 160 %
   de la bola para entrar y salir fuera de cuadro. */
.esfera .brillo{position:absolute;left:-30%;top:-30%;width:160%;height:160%;
  animation:esf-barre 2600ms linear infinite}
.esfera .brillo i{display:block;width:100%;height:100%;transform:rotate(25deg);
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 42%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 58%)}
/* El bisel gira en el canto: movimiento que no le quita legibilidad a la
   imagen. Cuatro arcos pegados de 27/28 grados que se apagan hacia la cola; la
   cabeza va a blanco pleno porque corre sobre negro y no hay donde quemarse.
   Lo que hay que cuidar al tocar las opacidades es que LA COLA SIGA SIENDO
   COLA: si los cuatro se parecen, el bisel deja de leerse como un destello que
   recorre el canto y se vuelve un aro fijo, que es lo que ya hace el aro.
   La mascara lo deja en 2.5 px, por dentro del borde. OJO con el
   `closest-side`: sin el, un `radial-gradient(circle,...)` mide sus paradas
   contra la esquina mas lejana, asi que el 100 % cae al 70 % del ancho y el aro
   aparece DENTRO del sello en vez de en el canto. Es lo que pasaba antes. */
.esfera .aro-gira{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(255,255,255,.4) 0deg 27deg,
    rgba(255,255,255,1) 27deg 55deg,
    rgba(255,255,255,.75) 55deg 82deg,
    rgba(255,255,255,.4) 82deg 110deg,
    rgba(255,255,255,0) 110deg 360deg);
  animation:esf-gira 1900ms linear infinite;
  -webkit-mask:radial-gradient(circle closest-side, transparent 0 calc(100% - 2.5px), #000 calc(100% - 2.5px) 100%);
  mask:radial-gradient(circle closest-side, transparent 0 calc(100% - 2.5px), #000 calc(100% - 2.5px) 100%)}
.esfera .a{animation:esf-gira 2125ms linear infinite}
.esfera .b{animation:esf-gira 1438ms linear infinite reverse}
/* La tercera gira y ademas respira: sin el latido, tres capas a velocidad
   constante se leen como un solo disco rotando. Van en dos cajas anidadas para
   que el giro y el latido corran con sus propios tiempos. */
.esfera .c{animation:esf-gira 2938ms linear infinite}
.esfera .c>svg{animation:esf-late 813ms linear infinite}
.esfera .aro{stroke-opacity:var(--esf-aro)}
@keyframes esf-gira{to{transform:rotate(360deg)}}
/* Arranca y termina fuera de la bola, y se queda quieto el ultimo tercio del
   ciclo: sin ese descanso el destello vuelve a entrar apenas sale y se lee como
   un defecto de pintado. El 130 % se mide sobre el ancho de la PROPIA banda,
   que es el 160 % de la bola. */
@keyframes esf-barre{0%{transform:translateX(-130%)}66%,100%{transform:translateX(130%)}}
@keyframes esf-late{0%,100%{transform:scale(1)}50%{transform:scale(1.16)}}