/* Pantalla de arranque (W-5). Vive fuera del bundle: si el JS falla al
   cargar, esto ya esta pintado y a los 8 s explica que paso. Los colores
   repiten los tokens de src/index.css (aqui aun no hay nada mas cargado). */
.arranque {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left));
  font: 16px/1.5 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  text-align: center;
  color: #16222b;
  background: #edf1f3;
}

.arranque p {
  margin: 0;
  max-width: 32ch;
}

.arranque-marca {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0b6e7f;
}

.arranque-cargando {
  color: #55676f;
}

/* visibility (no display): se anima en todos los navegadores, tambien en
   Safari antiguo. */
.arranque-fallo {
  visibility: hidden;
  color: #a32a21;
  animation: arranque-aparecer 0s 8s forwards;
}

@keyframes arranque-aparecer {
  to {
    visibility: visible;
  }
}

@media (prefers-color-scheme: dark) {
  .arranque {
    color: #dde6ea;
    background: #0f1519;
  }
  .arranque-marca {
    color: #45b6c6;
  }
  .arranque-cargando {
    color: #93a5ae;
  }
  .arranque-fallo {
    color: #e0736a;
  }
}