/* Crear un splat y seguir su procesamiento: las subidas con progreso y el avance del
   procesamiento (componentes/etapas.js). */

/* ---------- Subidas con progreso ---------- */

.subidas {
  display: grid;
  gap: var(--esp-4);
}

.lista-subidas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-3);
}

.subida {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px 70px;
  align-items: center;
  gap: var(--esp-3);
}

.subida-nombre {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subida.con-error {
  color: var(--error);
}

/* La barra de avance de una subida (la de herramientas del marco es `.barra`, en marco.css). */
.barra-avance {
  display: block;
  height: 6px;
  border-radius: var(--r-pastilla);
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.barra-relleno {
  display: block;
  height: 100%;
  background: var(--texto);
  transition: width 200ms linear;
}

.subida.lista .barra-relleno {
  background: var(--ok);
}

@media (max-width: 600px) {
  .subida {
    grid-template-columns: minmax(0, 1fr) 60px;
  }

  .subida .barra-avance {
    grid-column: 1 / -1;
  }
}

/* ---------- Avance del procesamiento (componentes/etapas.js: panelAvance) ----------
   Un anillo: `--p` (0–100) es el % del worker. `.anillo-espera` gira sin número (en cola, o sin
   dato); `.anillo-quieto` late cuando el número no se movió entre dos consultas (la etapa sigue
   viva, COLMAP no mueve el %). El agujero es una máscara: el número va arriba, sin máscara. */

.anillo {
  --p: 0;
  --grosor: 8px;
  position: relative;
  width: 104px;
  aspect-ratio: 1;
  margin: 0 auto;
  display: grid;
  place-items: center;
}

.anillo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--acento) calc(var(--p) * 1%), var(--panel-activo) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--grosor)), #000 calc(100% - var(--grosor) + 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--grosor)), #000 calc(100% - var(--grosor) + 1px));
}

.anillo-valor {
  font-size: var(--t-h2);
  font-weight: var(--peso-semibold);
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

.anillo-listo::before {
  background: var(--ok);
}

.anillo-espera::before {
  background: conic-gradient(var(--acento) 0 22%, var(--panel-activo) 0);
  animation: anillo-girar 1.6s linear infinite;
}

.anillo-quieto::before {
  animation: anillo-latir 1.8s ease-in-out infinite;
}

@keyframes anillo-girar {
  to {
    transform: rotate(1turn);
  }
}

@keyframes anillo-latir {
  50% {
    opacity: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .anillo-espera::before,
  .anillo-quieto::before {
    animation: none;
  }
}

.vista-estado-error strong {
  color: var(--error);
}