.login__container {

   background: var(--login-gradient);

   height: 100svh;

   display: grid;

   place-items: center;



   .login-card {

      background: white;

      padding: 4rem 2.4rem;

      width: 100%;

      max-width: 45rem;

      border-radius: var(--rounded-lg);



      .login-card__header {

         display: flex;

         flex-direction: column;

         gap: 2.4rem;

         margin-bottom: 3.2rem;

      }



      .login-form {

         display: flex;

         flex-direction: column;



         .login-form__field {

            display: flex;

            flex-direction: column;

            gap: 0.8rem;



            .login-form__input {

               background: #F7F7F7;

               border-bottom: 1px solid #6F7480;

               border-radius: var(--rounded-sm);



               &:focus {

                  border-bottom: 2px solid var(--main-color);

               }



            }



         }





         .login-form__submit {

            margin-top: 4rem;

         }



      }



   }



   .login-form__submit {

      background: var(--main-color);
      min-height: 4rem;
      color: white;

   }



}







.campo-contrasena-nuevo {

   display: flex;

   flex-direction: column;

   gap: 0.8rem;

   margin-top: 2rem;

}



.wrapper-contrasena-nuevo {

   position: relative;

   display: flex;

   align-items: center;

}



.etiqueta-contrasena-nuevo {

   font-size: 1.4rem;

   color: #333;

}



.input-contrasena-nuevo {

   background: #F7F7F7;

   border: 1px solid #6F7480;

   border-top: none;

   border-left: none;

   border-right: none;

   border-radius: 0.8rem;

   padding: 0.8rem 1.2rem;

   padding-right: 4.8rem;

   font-size: 1.6rem;

   color: #000;

   outline: none;

   width: 100%;

}



.boton-ojito {

   position: absolute;

   right: 1.2rem;

   top: 50%;

   transform: translateY(-50%);

   background: transparent;

   border: none;

   padding: 0.4rem;

   display: flex;

   align-items: center;

   justify-content: center;

   cursor: pointer;

   color: #6F7480;

   transition: color 0.2s ease;

   z-index: 10;

}



.boton-ojito:hover {

   color: var(--main-color);

}



.wrapper-contrasena-nuevo:has(.input-contrasena-nuevo:focus) .boton-ojito,

.wrapper-contrasena-nuevo:focus-within .boton-ojito {

   color: var(--main-color);

}



.input-contrasena-nuevo:focus {

   border-bottom: 2px solid var(--main-color);

}



#input-contrasena-nuevo[type="password"]::-webkit-credentials-auto-fill-button,

#input-contrasena-nuevo[type="password"]::-webkit-strong-password-auto-fill-button,

.input-contrasena-nuevo[type="password"]::-webkit-credentials-auto-fill-button,

.input-contrasena-nuevo[type="password"]::-webkit-strong-password-auto-fill-button,

input[type="password"]#input-contrasena-nuevo::-webkit-credentials-auto-fill-button,

input[type="password"]#input-contrasena-nuevo::-webkit-strong-password-auto-fill-button {

   display: none !important;

   visibility: hidden !important;

}



#input-contrasena-nuevo[type="password"]::-ms-reveal,

.input-contrasena-nuevo[type="password"]::-ms-reveal {

   display: none !important;

   visibility: hidden !important;

}



@media (width < 450px) {

   .login__container {

      padding: 0 1.6rem;

      .login-card {

         padding: 2.4rem 1.6rem;

      }

   }

}