/*
 * LA PANTALLA DE CARGA DE ANTES DE QUE LLEGUE EL JAVASCRIPT.
 *
 * Es el marcado estático que vive dentro de <div id="raiz"> en index.html: React
 * lo sustituye en cuanto monta. Va en su propio archivo porque la CSP solo admite
 * hojas de estilo del mismo origen ('self'), ni en línea ni de fuera.
 *
 * NO SE VE SI EL JS LLEGA RÁPIDO: arranca transparente y solo aparece a los
 * 300 ms (`animation-delay`). Una visita normal no la llega a ver nunca.
 *
 * Es la misma pantalla que `web/compartido/ui/PantallaCarga.tsx`: crema, isotipo
 * y anillos que se abren. Los colores son los de la marca, escritos a mano porque
 * aquí no hay Tailwind. Igual en las dos aplicaciones.
 */
.carga-inicial {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #fff6d2;
  opacity: 0;
  animation: carga-aparece 280ms cubic-bezier(0.22, 1, 0.36, 1) 300ms forwards;
}

.carga-inicial__centro {
  position: relative;
  display: grid;
  place-items: center;
  width: 10rem;
  height: 10rem;
}

.carga-inicial__anillo {
  position: absolute;
  inset: 0;
  border: 2px solid #073574;
  border-radius: 50%;
  opacity: 0.2;
  animation: carga-latido 1.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.carga-inicial__anillo:nth-child(2) {
  animation-delay: 0.6s;
}

.carga-inicial__anillo:nth-child(3) {
  animation-delay: 1.2s;
}

.carga-inicial__isotipo {
  position: relative;
  width: 4rem;
  height: 4rem;
}

@keyframes carga-aparece {
  to {
    opacity: 1;
  }
}

@keyframes carga-latido {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  20% {
    opacity: 0.45;
  }
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

/* Con «reducir movimiento»: aparece igual (es información, no adorno), pero quieta. */
@media (prefers-reduced-motion: reduce) {
  .carga-inicial {
    animation-duration: 0.01ms;
  }
  .carga-inicial__anillo {
    animation: none;
  }
}

.sr-only-carga {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}