/* spec-20260902-002-lucayuvdev (pedido del usuario, QA manual) — reemplaza las ocho barras
   parpadeantes (`.bar1`-`.bar8`, paleta fija sin relación con el tema) por un anillo que usa los
   custom properties de `tokensDeDiseno.css` (`--accent`/`--border`), así se ve consistente con el
   resto de la interfaz y responde solo al tema claro/oscuro.

   `.container`/`.middle` NO se tocan: siguen siendo el mismo punto de enganche que
   `Screens/PantallaCargando.jsx`, `Main/login.blade.php` y `React/main.blade.php#cargandoutilidad`
   ya usan, con la MISMA mecánica de centrado (`.middle` se centra contra el ancestro posicionado más
   cercano, o el viewport si no hay ninguno) — cambiar esa mecánica es un cambio de comportamiento
   ajeno a este pedido, que era puramente visual. */

.middle {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

.anillo-de-carga {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--border, #e2e2e2);
  border-top-color: var(--accent, #4f46e5);
  animation: anillo-de-carga-girar 0.7s linear infinite;
}

@keyframes anillo-de-carga-girar {
  to {
    transform: rotate(360deg);
  }
}