/* login_fondo.css  --  el fondo de las pantallas de ingreso.
 *
 * Va aparte y se enlaza de ULTIMA en las dos paginas de ingreso porque cada
 * una carga un tema distinto y ninguno de los dos servia para las dos:
 *
 *   /index.php        (cliente)  carga tema/tema.css, que trae 70-accesos.css
 *                                y ahi el fondo va con !important.
 *   /admin/index.php  (admin)    carga tema/oscuro.css, que NO trae esa hoja,
 *                                asi que no recibia ningun fondo del tema.
 *
 * Puesta al final gana por orden de cascada en las dos, sin pelear con
 * !important ajenos ni tener que repetir la regla en cada login_*.css.
 *
 * Se usan las propiedades largas y nunca "background:", porque la forma
 * corta reinicia la imagen cada vez que alguien toca el color mas abajo.
 */

body.login-page, body.login, body.acceso, .activar-page{
  background-color:#0b1117 !important;
  /* webp primero (32 KB); el png queda de respaldo (1.1 MB). */
  background-image:url("/assets/img/bg_v2.png") !important;
  background-image:image-set(
      url("/assets/img/bg_v2.webp") type("image/webp"),
      url("/assets/img/bg_v2.png")  type("image/png")) !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-attachment:scroll !important;   /* fixed se rompe en iOS */
}

/* En pantallas angostas el recorte se corre: centrado se perderia el motivo
   del fondo y quedaria solo la zona vacia del medio. */
@media (max-width:640px){
  body.login-page, body.login, body.acceso, .activar-page{
    background-position:68% center !important;
  }
}

/* La barra de desplazamiento del ingreso del admin.
   assets/css/style.css hace html{overflow-y:scroll; scrollbar-gutter:stable},
   o sea reserva el canal siempre. Dentro del panel eso evita que el
   contenido salte cuando una pagina crece; en una pantalla de ingreso, que
   mide justo el alto de la ventana y nunca desplaza, solo deja una barra
   muerta -- y el ingreso del cliente, que no carga style.css, se veia sin
   ella. Aca se devuelve al comportamiento normal.
   Este archivo solo se enlaza en las cuatro pantallas de acceso, asi que
   este html no alcanza a ninguna otra pagina. */
html{
  overflow-y:auto !important;
  scrollbar-gutter:auto !important;
}