/* Pantalla de carga. Va aparte de index.css y se enlaza en el <head> de index.html para que
   tenga estilo desde el primer pintado (en desarrollo, index.css llega después, por JS).
   Los colores repiten los tokens de index.css (--paper, --line, --red) porque aquí no existen aún. */
:root {
  color-scheme: light dark;
}
/* Tema elegido por el usuario (public/theme.js lo aplica antes de pintar) */
:root[data-theme='light'] {
  color-scheme: light;
}
:root[data-theme='dark'] {
  color-scheme: dark;
}
body {
  margin: 0;
  background: light-dark(#f5f2f3, #121214);
}
.splash {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.25rem;
  background: light-dark(#f5f2f3, #121214);
  /* Aparece solo si la carga tarda: sin parpadeo en recargas rápidas */
  animation: splash-in 0.3s 0.15s both;
}
.splash-logo {
  display: block;
  width: 56px;
  height: 56px;
  animation: splash-breathe 1.6s ease-in-out infinite alternate;
}
.splash-bar {
  position: relative;
  display: block;
  width: 8rem;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: light-dark(#e8ded6, #303036);
}
.splash-bar::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  border-radius: inherit;
  background: light-dark(#d32f2f, #ff6b63);
  animation: splash-slide 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
@keyframes splash-in {
  from {
    opacity: 0;
  }
}
@keyframes splash-breathe {
  to {
    scale: 1.06;
    opacity: 0.85;
  }
}
@keyframes splash-slide {
  from {
    translate: -100% 0;
  }
  to {
    translate: 250% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .splash,
  .splash-logo,
  .splash-bar::after {
    animation: none;
  }
}
/* La de React continúa a la de index.html: sin volver a aparecer con fundido */
.splash.is-continued {
  animation: none;
}