/* =========================
   LOGIN (robusto con fallback)
   Fondos en: /tracking/images/
   ========================= */

/* 1) Variables de rutas (ajusta nombres si difieren) */
:root{
  --lg-bg-desktop: url("/tracking/images/samichay_tracking_desktop.jpg");
  --lg-bg-tablet:  url("/tracking/images/samichay_tracking_tablet.jpg");
  --lg-bg-mobile:  url("/tracking/images/samichay_tracking_mobile.jpg");
}

/* 2) Fondo SIEMPRE visible (por defecto desktop).
      Usamos selector múltiple + !important para ganar a screen.css */
html, body, body.login-page{ min-height: 100%; }

body.login-page{
  margin: 0 !important;
  min-height: 100vh !important;
  font-family: Arial, Helvetica, sans-serif !important;

  /* Fallback garantizado: si un archivo falla (404), probará el siguiente */
  background-image: var(--lg-bg-desktop), var(--lg-bg-tablet), var(--lg-bg-mobile) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  /* Evita el gris si otro CSS borra el background-image */
  background-color: #0b1220 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;

  position: relative !important;
  overflow: hidden !important;
}

/* 3) Capa de contraste (overlay) */
body.login-page::before{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 0;
}

/* 4) Contenedor para centrar todo */
.login-wrap{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1; /* sobre overlay */
}

/* 5) Caja del login (ajusta al tuyo si ya existe otra clase) */
.login-card, .login-form, .login-box, .form-login, .login-content, .login-panel{
  width: min(520px, 92vw);
  background: rgba(255,255,255,1);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* 6) Logo centrado en la cabecera (contenedor + img) */
.login-logo{
  width: 100%;
  text-align: center;         /* centra el contenido inline */
  margin: 0 0 10px 0;
}

.login-logo img{
  display: inline-block;      /* se centra con text-align del contenedor */
  margin: 0 auto;
  max-width: 220px;
  max-height: 90px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Si usas otras clases para el logo */
.brand-logo, .img-logo, .logo-login{
  width: 100%;
  text-align: center;
  margin: 0 0 10px 0;
}
.brand-logo img, .img-logo img, .logo-login img{
  display: inline-block;
  margin: 0 auto;
  max-width: 220px;
  max-height: 90px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* 7) Móvil */
@media (max-width: 600px){
  .login-logo img,
  .brand-logo img, .img-logo img, .logo-login img{
    max-width: 200px;
    max-height: 70px;
  }
}

/* 7) Móvil: el form no debe ocupar toda la pantalla */
@media (max-width: 600px){
  body.login-page{ padding: 14px !important; }

  .login-card, .login-form, .login-box, .form-login, .login-content, .login-panel{
    width: min(520px, 96vw);
    border-radius: 16px;
  }

  .login-logo, .brand-logo, .img-logo, .logo-login{
    max-width: 200px !important;
    max-height: 70px !important;
  }
}

/* 8) Preferencia de fondo por tamaño (si no matchea, queda desktop igual) */
@media (max-width: 1024px){
  body.login-page{
    background-image: var(--lg-bg-tablet), var(--lg-bg-desktop), var(--lg-bg-mobile) !important;
  }
}
@media (max-width: 600px){
  body.login-page{
    background-image: var(--lg-bg-mobile), var(--lg-bg-desktop), var(--lg-bg-tablet) !important;
  }
}

img#captcha {
  filter: contrast(2.5) brightness(0.30) saturate(0);
  -webkit-filter: contrast(2) brightness(0.65) saturate(0);
  border-radius: 4px;
  display: inline-block;
  width: 120px !important;
  height: auto !important;
  margin: 0 !important;
}