/*
 * loader.css — Loader de pantalla completa, compartido por login y el panel admin (T-134A).
 *
 * Estas reglas vivían dentro de assets/css/site.css, que el panel admin no carga:
 * el admin usa adminMinCss.css. Enlazar site.css entero en el panel arrastraría el
 * reset, la tipografía y las variables del sitio público sobre él, así que el
 * componente se extrae a su propia hoja y cada consumidor la enlaza por su cuenta:
 *
 *   - apps/web/views/login.html          (el uso original)
 *   - apps/admin/views/layout/adminHead.php
 *
 * Es la única fuente de verdad del componente: no duplicar estas reglas en
 * site.css ni en adminMinCss.css.
 */

.universal-loader-container {
  position: fixed;
  top: 0px;
  left: 0px;
  /*
   * 20000, no los 5000 que tenía en site.css: el panel admin tiene modales en
   * 9999 y 10000 (prospectos.css, agregarEvento.css, asistencias.css), y con
   * 5000 el loader quedaría por debajo de un modal abierto. En el sitio público
   * nada supera 5000 —nav 99, .fab-integridad 98—, así que subirlo no cambia
   * nada allá.
   */
  z-index: 20000;
  display: none;
  background-color: black;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/*
 * Los hexadecimales van tal cual a propósito: el requisito es reutilizar el
 * spinner del login sin cambiarlo, y login.html no carga las variables
 * --color-* de adminMinCss.css.
 */
.universal-loader {
  background-color: black;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}