/* #830 — el estado de arranque, mientras se comprueba la sesión.
 *
 * Vive en un archivo aparte y NO como <style> en línea por el mismo motivo que
 * `/theme-init.js` (#79): no requerir 'unsafe-inline' en el CSP. Va enlazado en
 * el <head>, así que es render-blocking y está disponible desde el primer frame
 * — incluido el arranque en desarrollo, donde el CSS de la aplicación lo inyecta
 * JavaScript y todavía no existe.
 *
 * Sólo estila el bloque `.arranque` de `index.html`, que Vue reemplaza al montar.
 * Nada de esto sobrevive al montaje.
 *
 * El tema oscuro se toma de la clase `.dark` que `/theme-init.js` ya aplicó antes
 * del primer paint (y de `prefers-color-scheme` como respaldo, por si el tema
 * está en 'system' sin valor guardado).
 */

.arranque {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem 1.5rem;
  text-align: center;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #faf7f5;
  color: #4a4340;
}

/* Marca institucional: vino del Poder Judicial, no un spinner genérico. */
.arranque__marca {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  border: 3px solid rgba(104, 49, 72, 0.2);
  border-top-color: #683148;
  animation: arranque-giro 900ms linear infinite;
}

.arranque__texto {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #3d1d2b;
}

/* La segunda línea aparece sola a los 8 s. Una espera que se explica se tolera;
 * una espera muda se lee como "se colgó" — y con el tope del refresh en 30 s,
 * esa lectura equivocada dura demasiado.
 *
 * Con CSS y sin JavaScript a propósito: el hilo principal está ocupado con el
 * arranque, y un temporizador acá sería una dependencia más que puede no
 * dispararse.
 */
.arranque__demora {
  margin: 0;
  max-width: 32rem;
  font-size: 0.8125rem;
  color: #6b625e;
  /* `visibility` y no sólo `opacity` (codex): con `opacity: 0` el texto sigue
   * existiendo para un lector de pantalla, que anunciaría "está tardando más de
   * lo normal" en el primer segundo — justo el mensaje que NO corresponde
   * todavía. `visibility: hidden` lo saca también del árbol de accesibilidad. */
  visibility: hidden;
  opacity: 0;
  animation: arranque-aparecer 400ms ease-out 8s forwards;
}

@keyframes arranque-giro {
  to {
    transform: rotate(360deg);
  }
}

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

/* Si el arranque no llega a montar la aplicación, el bloque deja de decir
 * "comprobando" —que sería mentira— y lo dice `main.ts` marcando este atributo.
 * Sin esto, un fallo de carga del módulo deja "Comprobando tu sesión…" para
 * siempre (codex). */
.arranque[data-arranque-fallido] .arranque__marca {
  animation: none;
  border-top-color: #8a1f2f;
}

.arranque[data-arranque-fallido] .arranque__demora {
  visibility: visible;
  opacity: 1;
  animation: none;
}

/* Quien pidió menos movimiento no recibe el giro — pero sí el aviso, que es
 * información, no decoración. */
@media (prefers-reduced-motion: reduce) {
  .arranque__marca {
    animation: none;
    border-top-color: #683148;
  }
  .arranque__demora {
    animation-duration: 1ms;
  }
}

.dark .arranque {
  background: #1a1618;
  color: #d7cfcb;
}

.dark .arranque__texto {
  color: #e0a0b2;
}

.dark .arranque__demora {
  color: #b3a8a4;
}

.dark .arranque__marca {
  border-color: rgba(224, 160, 178, 0.25);
  border-top-color: #e0a0b2;
}

/* NO hay bloque `prefers-color-scheme` acá, y es deliberado: `/theme-init.js` es
 * render-blocking y ya resolvió la preferencia del sistema antes del primer
 * paint, así que `.dark` es la respuesta COMPLETA. Un `@media` de respaldo
 * pintaría oscuro a quien eligió tema claro teniendo el sistema en oscuro — ese
 * caso no lleva ninguna clase en el <html>, así que el respaldo le aplicaría y le
 * daría el tema que justamente rechazó. */