/**
 * Preloader global de la SPA: lo único que se ve entre que llega el HTML y arranca Angular (#2373).
 *
 * NEUTRO POR DEFECTO, Y ÉSA ES LA REGLA. Aquí vivía el «pacman» heredado de JHipster, relleno con el
 * verde de CertiDevs (`#4b9a54`) y con el favicon de CertiDevs como comecocos. Eso se pintaba en
 * CADA arranque y en CUALQUIER host, también en el dominio propio de un cliente
 * (`formacion.pontia.tech`), donde la rule `ui-cohesion-pass` prohíbe que aparezca nada de
 * CertiDevs. #2340 quitó la marca del login y del shell público, pero esas correcciones ocurren
 * cuando la SPA ya arrancó: esto va antes, así que la marca no puede estar escrita aquí.
 *
 * DE DÓNDE SALE EL COLOR. Del host, y sólo si ya se conoce: `ThemeService` guarda el
 * `brandPrimaryColor` de la empresa dueña del dominio bajo una clave que INCLUYE ese dominio, y el
 * script de arranque de `index.html` lo lee y escribe `--cdevs-loading-accent`. Sin visita previa
 * —o sin color propio— el indicador se queda en el gris del sistema de diseño, que es una respuesta
 * correcta en todos los dominios y no la marca de nadie.
 *
 * POR QUÉ ESTOS GRISES SON LITERALES Y NO TOKENS. Esta hoja se sirve suelta desde `index.html`,
 * antes del bundle de Angular: los `--cdevs-*` de `content/scss/_tokens.scss` todavía no existen.
 * Los dos valores son copia literal de `--cdevs-line` (#e5e7eb) y `--cdevs-ink-muted` (#6b7280); no
 * son colores nuevos ni de marca.
 */

:root {
  --cdevs-loading-track: #e5e7eb;
  --cdevs-loading-accent: #6b7280;
  --cdevs-loading-size: 40px;
  --cdevs-loading-stroke: 3px;
}

@keyframes cdevs-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes cdevs-loading-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

.app-loading {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: 10em;
}

.app-loading p {
  display: block;
  font-size: 1.17em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: normal;
}

/* Anillo fino: el arco que gira es el único trazo con color, y ese color es el del host. */
.app-loading .cdevs-loading-spinner {
  width: var(--cdevs-loading-size);
  height: var(--cdevs-loading-size);
  box-sizing: border-box;
  border-radius: 50%;
  border: var(--cdevs-loading-stroke) solid var(--cdevs-loading-track);
  border-top-color: var(--cdevs-loading-accent);
  animation: cdevs-loading-spin 0.9s linear infinite;
}

/**
 * Con movimiento reducido no se gira nada: el anillo se queda quieto y sólo respira la opacidad,
 * que sigue comunicando «esto está trabajando» sin rotación (WCAG 2.1, 2.3.3).
 */
@media (prefers-reduced-motion: reduce) {
  .app-loading .cdevs-loading-spinner {
    animation: cdevs-loading-pulse 1.8s ease-in-out infinite;
  }
}