/* Antes de que cargue la app: fondo de html/body (en dev el CSS lo inyecta JS y habría un cuadro blanco) y splash estático.
   Valores sueltos a propósito: tokens.css todavía no llegó. Espejo de --color-bg-page / -panel / --color-line-separator. */
html,
body {
  margin: 0;
  background: #1c1c1e;
  color-scheme: dark;
}

.splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1c1c1e;
  /* Respaldo si la app nunca lo saca: a los 8 s deja de tapar. */
  animation: splash-fuera 0s 8s forwards;
}

@keyframes splash-fuera {
  to {
    visibility: hidden;
    pointer-events: none;
  }
}

.splash__logo {
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
}

/* Chrome del shell, solo si hay un rol recordado (main.tsx lo pone en data-rol). Es pura pintura: no decide nada. */
.splash__barra {
  display: none;
}

.splash[data-rol='alumno'] .splash__barra,
.splash[data-rol='profe'] .splash__barra {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5.5rem;
  background: #242426;
}

@media (min-width: 64rem) {
  .splash[data-rol='alumno'] .splash__barra,
  .splash[data-rol='profe'] .splash__barra {
    top: 0;
    right: auto;
    width: 15.5rem;
    height: auto;
    border-right: 1px solid #38383a;
  }
}