/* Osprey — el cargador del analisis (parts/trabajo.php, assets/progreso.js).
   Una pantalla en blanco sobre la pagina: un anillo de marcas en perspectiva
   que se llena con los pasos reales, el icono del paso en el centro y, debajo,
   lo que se esta haciendo. Movil primero. Sin sombras difusas: el volumen lo
   da la perspectiva. Con «reducir movimiento» no se anima nada (regla general
   de portada.css). Todo color sale de los tokens del tema. */

html.cargando, html.cargando body { overflow: hidden; }

.trabajo {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 24px 16px;
  background: var(--fondo); text-align: center;
  animation: aparecer .35s ease-out;
}
.trabajo[hidden] { display: none; }
.trabajo:focus { outline: none; }
.trabajo--saliendo { animation: desvanecer .35s ease-in forwards; }

/* ── el anillo ───────────────────────────────────────────────────────── */

/* La caja tiene la forma de la elipse que se ve, no la del circulo que se
   inclina: asi no queda un hueco vacio encima y debajo del anillo. */
.cargador { position: relative; width: min(88vw, 340px); aspect-ratio: 1.55; perspective: 900px; }

.cargador__plano {
  position: absolute; left: 0; right: 0; top: 50%; aspect-ratio: 1;
  transform: translateY(-50%) rotateX(56deg);
  transform-style: preserve-3d;
}
/* El disco sobre el que descansan las marcas: una linea fina, sin sombra. */
.cargador__plano::before {
  content: ""; position: absolute; inset: 9%;
  border-radius: 50%; border: 1px solid var(--acento-linea);
  background: var(--acento-lavado);
}
.cargador__anillo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.marca {
  fill: var(--borde);
  animation: ola 1.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.04s);
  transition: fill .35s ease;
}
.marca.llena { fill: var(--acento); animation-name: brillo; }
.trabajo--listo .marca { fill: var(--acento); animation: none; opacity: 1; }

/* ── el centro: el paso en curso ─────────────────────────────────────── */

.cargador__centro {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.cargador__icono {
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--acento); background: var(--superficie);
  border: 1px solid var(--acento-claro);
  animation: flotar 2.6s ease-in-out infinite;
}
.cargador__icono svg { width: 30px; height: 30px; }
.cargador__icono.cambia svg { animation: entrar .45s cubic-bezier(.2, .8, .2, 1); }
.trabajo--listo .cargador__icono {
  color: var(--superficie); background: var(--acento); border-color: var(--acento);
  animation: latido .6s ease-out;
}
.cargador__cuenta {
  font-family: var(--fuente-dato); font-size: 13px; letter-spacing: .08em;
  color: var(--tinta-suave); font-variant-numeric: tabular-nums;
}

/* ── debajo: que se esta haciendo ────────────────────────────────────── */

.cargador__texto { max-width: 34rem; }
.cargador__url {
  margin: 0; font-size: 13px; color: var(--tinta-tenue);
  font-family: var(--fuente-dato); word-break: break-all;
}
.cargador__url span { color: var(--tinta-suave); }
.cargador__texto h2 {
  margin: 8px 0 0; font-size: clamp(22px, 6vw, 30px); font-weight: 700;
  letter-spacing: -.02em; color: var(--tinta);
}
#ahoraDetalle { margin: 8px auto 0; font-size: 16px; line-height: 1.5; color: var(--tinta-suave); max-width: 30rem; }

@keyframes aparecer   { from { opacity: 0; } }
@keyframes desvanecer { to { opacity: 0; transform: scale(1.02); } }
@keyframes ola        { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes brillo     { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
@keyframes flotar     { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(2px); } }
@keyframes entrar     { from { opacity: 0; transform: scale(.6) rotate(-12deg); } }
@keyframes latido     { 40% { transform: scale(1.12); } }

@media (min-width: 720px) {
  .trabajo { gap: 26px; }
  .cargador { width: 440px; }
  .cargador__icono { width: 84px; height: 84px; }
  .cargador__icono svg { width: 38px; height: 38px; }
}