/* Pantalla de arranque (SPEC-018). Va como archivo propio y no inline por la misma razón que
   theme-boot.js: la CSP de la Api permite estilos inline pero el arranque completo del SPA se
   mantiene en archivos servidos desde el mismo origen.

   Estilos propios y no Tailwind: en la fase 1 el CSS de la aplicación todavía no se descargó —
   esa espera es justamente la que esta pantalla cubre. */

#boot {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: #373636;
  font-family: "Noto Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Degradé propio y no plano: valores COPIADOS de --bg/--brand/--brand-accent en
     src/styles/index.css (no se puede importar ese archivo acá, ver cabecera del archivo).
     Radial primero (brillo suave detrás del logo) y lineal diagonal debajo — sobrio a
     propósito: esta pantalla se ve cientos de veces por día y un degradé saturado cansa. */
  background:
    radial-gradient(ellipse 60% 50% at 50% 38%, rgba(95, 191, 213, 0.16) 0%, rgba(95, 191, 213, 0) 70%),
    linear-gradient(135deg, #f7f7f6 0%, #f1f0ef 45%, #e9e7e6 100%);

  /* El umbral anti-parpadeo es CSS y no un temporizador: bajo 300 ms no se pinta nada, y en local
     —donde el arranque es de decenas de milisegundos— la pantalla no llega a aparecer. */
  opacity: 0;
  animation: boot-aparece 200ms ease-out 300ms forwards;
}

/* El tema lo fija theme-boot.js antes del primer paint: acá solo se hereda. Degradé oscuro
   propio (no un aclarado automático del claro) — mismos tokens, variante --bg/--card dark de
   src/styles/index.css. */
.dark #boot {
  color: #ededec;
  background:
    radial-gradient(ellipse 60% 50% at 50% 38%, rgba(95, 191, 213, 0.14) 0%, rgba(95, 191, 213, 0) 70%),
    linear-gradient(135deg, #151414 0%, #1d1b1b 55%, #262323 100%);
}

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

/* El SVG (boot-logo.svg) trae los colores de marca y fondo transparente: se ve bien
   sobre ambos degradés sin necesitar una variante .dark aparte. */
#boot-marca {
  width: 160px;
  height: auto;
  filter: drop-shadow(0 2px 10px rgba(55, 54, 54, 0.14));
}

.dark #boot-marca {
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.35));
}

#boot-paso {
  font-size: 0.9rem;
  color: #717070;
}

.dark #boot-paso {
  color: #878787;
}

#boot-barra {
  width: 180px;
  height: 3px;
  border-radius: 2px;
  background: #e4e2e2;
  overflow: hidden;
}

.dark #boot-barra {
  background: #3a3737;
}

/* Indeterminada a propósito: no hay forma honesta de medir el avance de una descarga de bundle
   ni de una consulta HTTP, y una barra que promete un porcentaje inventado miente. */
#boot-barra::after {
  content: "";
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 2px;
  background: #1e418c;
  animation: boot-avanza 1.1s ease-in-out infinite;
}

.dark #boot-barra::after {
  background: #60c4f5;
}

@keyframes boot-avanza {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

/* Respeta la preferencia del sistema: sin animación, la pantalla aparece de una vez y la barra
   queda quieta en vez de desplazarse. */
@media (prefers-reduced-motion: reduce) {
  #boot { animation-duration: 1ms; }
  #boot-barra::after { animation: none; width: 100%; }
}