/* =========================================================
   AXIOMA — Pantalla de carga (splash de marca indeterminado)
   Se pinta dentro de #app antes de que Blazor monte el layout.
   Carga primero y usa los tokens de AXIOMA con fallback: así el
   primer pintado es correcto aunque tokens.css aún no haya llegado.
   ========================================================= */

.ax-splash {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* El contenido se sube un poco respecto del centro geométrico (48px abajo ⇒ ~24px arriba). */
  padding-bottom: 48px;
  gap: 12px;
  font-family: var(--ax-font-family, 'Inter', 'Segoe UI', system-ui, sans-serif);
  background:
    radial-gradient(620px 320px at 50% -10%,
      color-mix(in srgb, var(--ax-primary, #5b5ce6) 16%, transparent),
      transparent 70%),
    var(--ax-bg, #f6f7fb);
}

/* Halo que respira detrás del isotipo */
.ax-splash-halo {
  position: relative;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
}

.ax-splash-halo::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--ax-primary, #5b5ce6) 26%, transparent);
  animation: axSplashHalo 2.4s ease-in-out infinite;
}

.ax-splash-iso {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #ffffff;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--ax-primary, #3b7dbd), var(--ax-primary-lift, #5fa3d8));
  box-shadow: 0 14px 34px color-mix(in srgb, var(--ax-primary, #5b5ce6) 42%, transparent);
}

.ax-splash-word {
  font-size: 18px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--ax-text-primary, #172033);
}

/* Barra indeterminada: transmite trabajo sin prometer un porcentaje */
.ax-splash-shimmer {
  position: relative;
  width: 220px;
  height: 3px;
  border-radius: 999px;
  background: var(--ax-gray-200, #e2e8f0);
  overflow: hidden;
}

.ax-splash-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 42%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--ax-primary, #5b5ce6), transparent);
  animation: axSplashSweep 1.5s ease-in-out infinite;
}

/* Mensajes de estado: cuatro capas que se alternan solo con CSS.
   El ciclo es de 12 s (4 mensajes × 3 s de turno) y cada capa se retrasa 3 s
   respecto de la anterior, de modo que siempre hay UNA visible. */
.ax-splash-msg {
  position: relative;
  width: 260px;
  height: 22px;
  font-size: 12.5px;
  color: var(--ax-text-secondary, #45505e);
}

/* El saludo va un punto más grande que los mensajes de progreso: es la bienvenida, no
   un estado técnico. La caja de mensajes es más alta para que quepa sin recortarse. */
.ax-splash-msg span.ax-splash-welcome {
  font-size: 15px;
  font-weight: 600;
}

.ax-splash-msg span {
  position: absolute;
  inset: 0;
  text-align: center;
  opacity: 0;
  animation: axSplashMsg 12s linear infinite;
}

.ax-splash-msg span:nth-child(2) { animation-delay: 3s; }
.ax-splash-msg span:nth-child(3) { animation-delay: 6s; }
.ax-splash-msg span:nth-child(4) { animation-delay: 9s; }

@keyframes axSplashHalo {
  0%, 100% { transform: scale(0.84); opacity: 0.55; }
  50%      { transform: scale(1.08); opacity: 0.18; }
}

@keyframes axSplashSweep {
  0%   { transform: translateX(-130%); }
  100% { transform: translateX(320%); }
}

/* Un turno por capa = 25 % del ciclo (3 s de 12 s), con un fundido corto al
   entrar y al salir para que el cambio no se lea como un parpadeo. */
@keyframes axSplashMsg {
  0%    { opacity: 0; }
  1.5%  { opacity: 1; }
  22%   { opacity: 1; }
  24.5% { opacity: 0; }
  100%  { opacity: 0; }
}

/* Contrato de calma: sin bucles animados si el sistema pide movimiento reducido.
   Queda el splash estático con el último mensaje («Cargando…»). */
@media (prefers-reduced-motion: reduce) {
  .ax-splash-halo::before {
    animation: none;
    opacity: 0.35;
  }

  .ax-splash-shimmer::after {
    display: none;
  }

  .ax-splash-msg span {
    animation: none;
    opacity: 0;
  }

  .ax-splash-msg span:last-child {
    opacity: 1;
  }
}