body {
  margin: 0;
  padding: 0;
  /* background:  url(../img/backlogin2.jpg) no-repeat center top;  */ 
  background:  url(../img/LogoNalua1.jpg) no-repeat center center fixed;

  background-size: cover; 
  font-family: sans-serif;
  height: 100vh; 
  min-height: 100vh; /* Cambiado de height a min-height para mejor compatibilidad */ 

}

.login-box {  
  /*
  width: 320px;
  height: 420px;
*/ 
  width: 90%; /* Cambiado de 320px fijo a porcentaje para adaptabilidad */
  max-width: 320px; /* Establecemos un máximo para no estirar demasiado en pantallas grandes */
  height: auto; /* Cambiado a auto para adaptarse al contenido */
  min-height: 420px; /* Altura mínima */

  background: #000;
  color: #fff;
  top: 50%;
  left: 55%;
  position: absolute;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  /*padding: 70px 30px; */ 
  padding: 70px 20px 30px; /* Ajuste de padding para móviles */

  border-radius: 20px; 
  
 /*  para posicionar la cuadro del login */ 
 /*  margin: 70px auto; /* Centra todo el contenedor en la página */ 
  margin: -5%; 
 /* margin-left: -30px; /* Mueve el contenedor a la derecha */  
 margin-left: -10;
}

.login-box .avatar {
  width: 180px;
  height: 180px;
  border-radius: 70%;
  position:   absolute;
  top: -120px;
  left: calc(45% - 70px); 
  
  /* transform: translateX(-50%); /* Centrado perfecto */
}

.login-box h1 {
  margin: 0;
  padding: 0 0 20px;
  text-align: center;
  font-size: 22px;
}

.login-box label {
  margin: 0;
  padding: 0;
  font-weight: bold;
  display: block;
}

.login-box input {
  width: 100%;
  margin-bottom: 20px;
}

.login-box input[type="text"], .login-box input[type="password"] {
  border: none;
  border-bottom: 1px solid #fff;
  background: transparent;
  outline: none;
  height: 40px;
  color: #fff;
  font-size: 16px;
}

.login-box input[type="submit"] {
  border: none;
  outline: none;
  height: 40px;
  background: #E5DB8B; /* #ffc107; */  
  color: #fff;
  font-size: 18px;
  border-radius: 20px;
}

.login-box input[type="submit"]:hover {
  cursor: pointer;
  background: #4352a5; 
  color: #000000;
  
}

.login-box a {
  text-decoration: none;
  font-size: 12px;
  line-height: 20px;
  color: darkgrey;
}

.login-box a:hover {
  color: #fff;
}

.mensaje-error { 
  color: #b80f22;
  font-weight: bold;

}

.mensaje-valido{ 
  color:#fff; 
  font-weight: bold;

}