/* Pantalla de carga única con la marca. Requiere /comun/tokens.css y /comun/base.css (isotipo y botones).
   El marcado mínimo que cada página trae ya escrito está en la cabecera de comun/carga.mjs.
   Se ve desde la primera pintura con el estilo base: el latido del isotipo solo adorna
   (transform; nunca opacidad ni visibilidad) y prefers-reduced-motion lo quita.

   .ag-carga             en el flujo de la página, centrada, con medio alto de ventana reservado
   .ag-carga--encima     tapa a su contenedor (que debe tener position: relative): el contenido de
                         debajo conserva su sitio y nada salta al quitarla
   .ag-carga--pantalla   tapa toda la ventana (entrada: no hay cabecera)
   .ag-carga--noche      sobre el fondo oscuro de marca, en cualquiera de las anteriores */

.ag-carga {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--ag-e-4);
  min-height: 50vh;
  padding: var(--ag-e-7) var(--ag-margen);
  background: var(--ag-fondo);
  color: var(--ag-texto);
  font-family: var(--ag-fuente);
  text-align: center;
}
.ag-carga--encima { position: absolute; inset: 0; z-index: 5; min-height: 0; justify-content: flex-start; padding-top: max(var(--ag-e-7), 12vh); }
.ag-carga--pantalla { position: fixed; inset: 0; z-index: 400; min-height: 0; overflow-y: auto; }
.ag-carga--noche {
  color: #fff;
  background:
    radial-gradient(50% 40% at 50% 35%, rgba(0, 163, 182, .28), transparent 70%),
    linear-gradient(160deg, var(--ag-noche-suave), var(--ag-noche) 65%);
}

.ag-carga__marca { animation: ag-carga-late 1.6s ease-in-out infinite; }
.ag-carga--atascada .ag-carga__marca { animation: none; }
@keyframes ag-carga-late { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.ag-carga__estado { display: grid; gap: var(--ag-e-2); max-width: 440px; }
.ag-carga__texto { margin: 0; font-size: 16px; font-weight: 700; color: var(--ag-texto-suave); overflow-wrap: anywhere; }
.ag-carga__texto:focus { outline: none; }
.ag-carga__tardanza { margin: 0; font-size: 17px; font-weight: 800; color: var(--ag-texto); }
.ag-carga__detalle { margin: 0; font-size: 15px; color: var(--ag-texto-suave); }
.ag-carga__acciones { justify-content: center; margin-top: var(--ag-e-2); }
.ag-carga__sin-js { margin: 0; padding: var(--ag-e-4); border-radius: var(--ag-r-m); background: var(--ag-ambar-suave); color: var(--ag-texto); }

.ag-carga--noche .ag-carga__texto, .ag-carga--noche .ag-carga__detalle { color: var(--ag-noche-texto); }
.ag-carga--noche .ag-carga__tardanza { color: #fff; }
.ag-carga--noche .ag-boton { background: transparent; border-color: rgba(201, 216, 228, .55); color: #fff; }
.ag-carga--noche .ag-boton:hover { background: rgba(255, 255, 255, .08); }
.ag-carga--noche .ag-boton--primario { background: #5ed3e0; border-color: #5ed3e0; color: var(--ag-noche); }
.ag-carga--noche .ag-boton--primario:hover { background: #8fe3ec; border-color: #8fe3ec; }
.ag-carga--noche .ag-boton:focus-visible { box-shadow: 0 0 0 2px var(--ag-noche), 0 0 0 4px #8fe3ec; }

@media (max-width: 559px) {
  .ag-carga__acciones { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .ag-carga__marca { animation: none; }
}