/* Propuesta responsive para indexAlt.php — no se toca css/index.css original.
   Esta hoja solo la carga indexAlt.php. */

/* index.css pone body{overflow:hidden}. En pantallas bajas (celular en
   horizontal, o con el teclado virtual abierto al tocar los campos de
   usuario/clave, que reduce el alto visible) el logo + título + card pueden
   superar el alto disponible, dejando el botón "INGRESAR" inalcanzable sin
   poder hacer scroll. Se habilita scroll vertical como red de seguridad en
   pantallas angostas o bajas; el fondo animado (.scene) es position:fixed,
   así que se queda quieto igual aunque el contenido de encima haga scroll. */
@media (max-width: 576px), (max-height: 650px) {
  body {
    overflow-y: auto;
    overflow-x: hidden;
  }
}

/* Pantallas muy bajas (celular en horizontal, ~≤480px de alto): compactar
   los espacios verticales para que en la mayoría de los casos ni siquiera
   haga falta el scroll agregado arriba. */
@media (max-height: 480px) {
  .logo-section {
    margin-bottom: 8px;
  }

  .logo-img {
    height: 44px;
  }

  .login-title {
    font-size: 1.2rem;
    margin-top: 4px;
  }

  .login-card {
    padding: 18px 20px;
  }

  .card-header-text {
    margin-bottom: 16px;
    font-size: 1.1rem;
  }

  .input-group-custom {
    margin-bottom: 12px;
  }

  .input-group-custom input {
    padding: 12px 12px 12px 44px;
  }

  .btn-login {
    padding: 12px;
    margin-top: 6px;
  }

  /* Decorativo y de opacidad muy baja (0.06); a este alto puede quedar
     visualmente pegado a la card. */
  .compass {
    display: none;
  }
}