/* El overlay de espera del diseño ("Overlay de espera", variantes 2a y 2b).
   Es un solo componente: el anillo gira siempre y el texto es opcional.

   Sin texto es lo normal -esperas de uno a tres segundos donde no hay nada que avisar-. Con texto
   solo cuando la espera cuesta algo: puede demorar, sale del portal, o cerrar la ventana rompe la
   operacion. Nunca "Cargando": eso ya lo dice el anillo.

   El logo sale del archivo de marca. En la espera va la version 1, el celular solo: a 44 px
   la moneda no se lee y compite con el QR. La seccion de pagos usa la 3, la del logo entero.
   Arranca oculto y lo muestra el JS al enviar un formulario. Sin JavaScript no aparece. */

#espera {
  position: fixed;
  inset: 0;
  z-index: var(--z-cargando);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--aire-8);
  background: var(--vidrio);
  -webkit-backdrop-filter: blur(4px) saturate(108%);
  backdrop-filter: blur(4px) saturate(108%);
  animation: esperaEntra var(--t-rapida) ease both;
  /* El fundido con el que se va y deja ver la pantalla. La visibilidad espera lo mismo: si se
     apaga antes, el overlay deja de tapar cuando todavia se ve. */
  transition: opacity var(--t-media) ease, visibility 0s linear var(--t-media);
}
/* Aparece de una: el fundido es para irse. */
#espera:not(.is-hidden) { transition: none; }
#espera.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;
}

/* El anillo: dos cuartos de vuelta con los colores de la barra, girando sobre el logo. */
.espera-anillo { position: relative; width: 92px; height: 92px; }
.espera-anillo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid var(--anillo-base);
  border-top-color: var(--anillo-verde);
  border-bottom-color: var(--anillo-azul);
  animation: esperaGira var(--t-giro) linear infinite;
}
.espera-anillo img {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  display: block;
}
/* Dos logos: el celular solo -por defecto- y el entero con la moneda. La moneda va solo en NETPAGOS
   y el QR; el disparador lo pide con data-marca. */
#espera[data-marca="simple"] .espera-logo-pagos { display: none; }
#espera[data-marca="pagos"] .espera-logo-simple { display: none; }

/* La variante interior: el mismo anillo dentro de un modal, mientras baja su PDF. Tapa el visor,
   no la pantalla. Sin texto y sin moneda -solo el logo del celular, que va en el markup-. */
.modal-espera {
  position: absolute;
  inset: 0;
  z-index: var(--z-cargando);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fondo-suave);
}

/* El texto, cuando lo hay */
.espera-texto { text-align: center; max-width: 260px; }
.espera-leyenda {
  font-family: var(--tipo-titulo); font-weight: var(--peso-fuerte); font-size: var(--tam-bloque); color: var(--tinta);
}
.espera-bajada {
  font-size: var(--tam-meta); color: var(--tinta-suave); margin-top: var(--aire-2); line-height: var(--alto-texto);
}

@keyframes esperaGira { to { transform: rotate(360deg); } }
@keyframes esperaEntra { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }

/* Con movimiento reducido la animacion se ralentiza en vez de frenarse: asi se sigue leyendo
   como una espera. */
@media (prefers-reduced-motion: reduce) {
  .espera-anillo::after { animation-duration: var(--t-giro-lento); }
  #espera { animation: none; }
}