body, main {
 position: relative;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  min-height: 100vh;
  max-height: fit-content;
  font-family: "Lucida Sans Unicode";

}
/*<<<< IMAGEN DE FONDO>>>>*/
body.iniciar-sesion-img {
 background: url(../../img/users/iniciar_sesion.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  
}

div,
nav,
ul,
i,
h1,
img {
box-sizing: border-box;
} 
.iniciar-sesion-form {
position: relative;
display: flex;
flex-direction:column;
justify-content:space-evenly;
height: fit-content;
gap: 30px;
align-self: center;
margin-top: 10%;
margin-bottom: 10%;
width: 87%;
padding: 25px 18px;
background-image: linear-gradient(#000d1dea,#243332e7);
border-radius: 12px;
text-decoration-color: #000000;
box-shadow: -1px 1px 5px rgba(172, 252, 255, 0.938);
font-weight: lighter !important;
font-family: "Lucida Sans Unicode";
text-align: center;
animation: aparecer both;
animation-timeline: view();
animation-range: cover 20% contain 40%
}


.iniciar-sesion-title{
font-family: inherit;
     font-size: clamp(1.2rem, 2vw, 2rem) !important;
     color: #ffffff !important;
     text-shadow: -1px 1px 1px black,-1px 1px 1px black;
     font-weight: lighter !important;
}

.input-container-ini-ses{
color: #ffe876;
 font-size: clamp(1rem, 2vw, 1rem);
padding: 0;
font-weight: lighter;
text-shadow: -1px 1px 1px black,-1px 1px 1px black;
margin-bottom: 0%;
}
.input-container-ini-ses input{
display: flex;
 flex-direction: column;
 margin: auto;
 width: 89%;
 margin-top: 10px;
 margin-bottom: 10px;

background: linear-gradient( #c9ffffd3,#f7feffde) !important;
border-radius: 8px;
color: rgb(5, 1, 37);


font-size: 16px !important;
padding: 6px  8px;
 font-weight:lighter !important;
    
}


/* ======== CONTENEDOR DEL INPUT CON OJITO ======== */
.password-wrapper-login {
 position: relative; 
}



/* -------> <<<< LOGIN EYE IN INPUT >>>> <-------- */
.toggle-password-login {
 position: absolute;
  right: 22px;
  bottom: 17px; 
  cursor: pointer;
  display: flex;
  align-items: center;
 color: #007e2a; 
  transition: color 0.2s ease;
}

.toggle-password-login:hover {
color: #7a0014; 


}

/*------------------>  <<<< FORM LOGIN BUTTONS >>>> <------------------*/

.iniciar-sesion-btns{
 display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 15px;
  align-items: center;
width:max-content ;
align-self: center;

}
.iniciar-sesion-butt{
 background-color: #00f94fc5;
  color: rgba(255, 255, 255, 0.888);
  outline: 1px solid rgba(255, 255, 255, 0.809);
  text-shadow: -1px 1px 1px #000000;
  font-weight:lighter;
  text-decoration: none;
  padding: 7px 50px;
  margin: auto;
  border-radius: 10px;
  transition: background-color 1s, border-radius 0.8s, outline 0.7s,
  outline-offset 0.5s;
  outline: 0;
  outline-offset: 0;
  font-size: 16px;


}

.iniciar-sesion-butt:hover  {
 background-color: rgba(0, 0, 0, 0.242);
  outline: 2px solid rgba(0, 255, 94, 0.596);
  color: rgb(22, 255, 119);
  text-shadow: -1px 1px 1px #000000;
  border-radius: 25px;
  box-shadow: 0px 0px  20px rgb(84, 250, 134);


}

.crear-cuenta-butt {
 background-color: #06bfcce7;
   color: rgba(255, 255, 255, 0.888);
  outline: 1px solid rgba(0, 0, 0, 0.809);
  text-shadow: -1px 1px 1px #000000;
  font-weight: lighter;
  text-decoration: none;
  padding: 4px 39px;
  margin:auto;
 border-radius: 10px;
  transition: background-color 1s, border-radius 0.8s, outline 0.7s,
  outline-offset 0.5s;
  outline: 3;
  outline-offset: 0;
  font-size: 16px;
}
.crear-cuenta-butt:hover {
 background-color: rgba(0, 0, 0, 0.242);
  outline: 2px solid rgba(0, 255, 251, 0.596);
  color: rgb(207, 248, 255);
  text-shadow: -1px 1px 1px #000000;
  box-shadow: 0px 0px  20px rgb(84, 153, 250);
 
 border-radius: 25px;


} 


.recuperar-contraseña-butt  {

display: flex;
bottom: 35%;
align-self: center;
justify-self: flex-start;
padding: 3px 10px;
color: #fdf903;
text-shadow: -1px 1px 1px #000000, -1px 1px 1px #000000;
font-size: 14px;
text-decoration: none;
text-transform: uppercase;
background-color: transparent;
border-radius: 10px;
letter-spacing: 1px;
transition: background-color 1s, border-radius 0.8s, outline 0.7s,
outline-offset 0.5s;
outline: 0.1;
outline-offset: 5;
} 

.recuperar-contraseña-butt:hover {
background: #7affcc;
color: #ff0048;
text-shadow: -1px 1px 1px #000000;
border-radius: 5px;
box-shadow: 0 0 5px #03e9f4,
    0 0 35px #03e9f4, 
    0 0 20px #03e9f4;
outline: 1px solid rgba(255, 0, 76, 0.596);
border-radius: 14px;
outline-offset: -1px;
padding: 3px 18px  ;
font-size: 15px;
outline: 3;

}
/*----------> <<<<  FORM LOGIN BUTTONS / ENDS >>>  <-----------*/



/*----------> BASES SESSIONS LOGIN STYLES  <<<< QUERIES >>>>  <-----------*/
/* __________________________________________________________________________*/


/*-------------------->  LOGIN FORM  <---------------------*/

@media screen and (min-width: 620px) {
.iniciar-sesion-form  {
gap: 30px;
justify-self: center;
margin-top: 5%;
margin-bottom: 5%;
width: 28%;
padding: 25px 8px;
 
}

 .iniciar-sesion-title{
     font-size: clamp(1.2rem, 2vw, 1.8rem) !important;
     margin-top: 22px;
     margin-bottom: 0%;
   
 }

 .input-container-ini-ses{
 font-size: clamp(1rem, 2vw, 1.1rem);
 }

 .input-container-ini-ses input {
 margin: auto;
 width: 70%;
font-size: 18px !important;
padding: 7px  10px;

}
/* -------> <<<< LOGIN EYE IN INPUT >>>> <-------- */
.toggle-password-login {

  right: 75px;             
  top: 67%;

}


/*------------------>  <<<< FORM LOGIN BUTTONS >>>> <------------------*/

.btn__section__register{
  gap: 10px;
}

.iniciar-sesion-butt{
   padding: 8px 60px;
  font-size: 17px;

}

.crear-cuenta-butt {
  padding: 4px 48px;
  font-size: 17px;
}

.crear-cuenta-butt:hover {
.login_btn_register_form:hover {
  background-color: rgba(0, 0, 0, 0.242);
  outline: 2px solid rgba(0, 255, 251, 0.596);
  color: rgb(207, 248, 255);
  text-shadow: -1px 1px 1px #000000;
  box-shadow: 0px 0px  20px rgb(84, 153, 250);

 border-radius: 25px;

} 
} 


.recuperar-contraseña-butt  {

bottom: 33%;
padding: 3px 10px;
font-size: 14px;
} 

.recuperar-contraseña-butt:hover {
padding: 4px 11px  ;
font-size: 15px;
}

}

/*----------> <<<<  FORM LOGIN BUTTONS / ENDS >>>  <-----------*/
/*----------> FORM_LOGIN SECTION   QUERIES / <<<  ENDS >>>  <-----------*/
/*_______________________________________________________________________*/