/* ============================================================
   Fondo compartido de las pantallas de login del portal.

   Para cambiar la foto: reemplazar «fondo-login.jpg» en esta
   misma carpeta. Se actualiza en todos los sistemas a la vez.

   Si el archivo no estuviera, las pantallas siguen funcionando:
   queda solo el velo oscuro sobre el fondo propio de cada una.

   Recomendado: foto apaisada, 1920x1080 o más, menos de 500 KB.
   ============================================================ */

body::before {
  content: '';
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  /* El velo va ARRIBA de la foto: sin él, la tarjeta no se lee */
  background-image:
    linear-gradient(175deg, rgba(10, 13, 32, .58), rgba(10, 13, 32, .78)),
    url('fondo-login.jpg');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  pointer-events: none;
  z-index: 0;
  /* Algunos sistemas ya usan body::before para sus propios adornos
     (la ticketera, por ejemplo, dibuja círculos borrosos). Sin estos
     reinicios la foto hereda ese redondeo y ese desenfoque, y en vez
     del fondo se ve una mancha. */
  width: auto; height: auto;
  margin: 0; padding: 0;
  border-radius: 0;
  filter: none;
  transform: none;
  animation: none;
  opacity: 1;
  mix-blend-mode: normal;
}

/* La tarjeta y todo el contenido quedan por encima de la foto */
body > *:not(script):not(style):not(link) {
  position: relative;
  z-index: 1;
}

/* En celulares la foto se recorta mucho: se la fija para que no salte
   al aparecer el teclado */
@media (max-width: 575.98px) {
  body::before { background-attachment: scroll; }
}

/* ------------------------------------------------------------
   Dos sistemas tienen el login armado distinto y pintan su propio
   fondo a pantalla completa, que taparía la foto. Se los contempla
   acá para que queden igual que el resto.
   ------------------------------------------------------------ */

/* Canchones: cortina verde propia a pantalla completa. Se la deja sin
   fondo para que la foto se vea igual que en el resto de los sistemas. */
.login-fondo {
  background: none !important;
}

/* Tablero: login de dos paneles. La foto va en el panel de marca
   (el azul de la izquierda); el formulario queda claro y legible. */
.auth-brand {
  background-image:
    linear-gradient(150deg, rgba(10, 13, 32, .78), rgba(10, 13, 32, .92)),
    url('fondo-login.jpg') !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
}