/* importar fuente */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,300&display=swap");

* {
box-sizing: border-box;
}



body {
font-family: "Poppins", sans-serif;
background: #f6f5f7; 
background-image: url('../../4insumos/img/libros_fondo.jpeg');
background-size: cover; 
background-repeat: no-repeat; 
background-position: center; 
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: -20px 0 50px;
} 



h1 {
font-weight: bold;
margin: 0;
}


.l1{
color: #fff;                /*  cambio aqui  */
font-weight: bold;
margin: 0;
}

p {
font-size: 14px;
font-weight: 100;
line-height: 20px;
letter-spacing: 0.5px;
margin: 20px 0 30px;
}

span {
font-size: 12px;
}

a {
color: #228be6;
font-size: 14px;
text-decoration: none;
margin: 15px 0;
}


.s2 {
font-size: 12px;                     /*  cambio aqui  */
color: #ffffff;
}



#red {
color: red;
}

.container {
background: #ffffff00;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0, 10px 10px rgba(0, 0, 0, 0.22);
position: relative;
overflow: hidden;
width: 768px;
max-width: 100%;
min-height: 480px;
}



.profile-pic {
position: absolute;
top: 20px; /* Ajusta según sea necesario */
left: 20px; /* Ajusta según sea necesario */
width: 50px; /* Ajusta el tamaño de la imagen */
height: 50px; /* Asegúrate de que el ancho y alto sean iguales para un efecto circular */
border-radius: 50%; /* Esto hace que la imagen sea redonda */
object-fit: cover; /* Esto asegura que la imagen se recorte correctamente */
border: 2px solid #fff; /* Opcional: un borde blanco alrededor de la imagen */
}






.form-container form {
background: linear-gradient(#000000c4, #00000059 ,#bfbfbfb4) no-repeat 0 0 / cover;  /*cambio efectuado */
display: flex;
flex-direction: column;
padding: 0 50px;
height: 100%;
justify-content: center;
align-items: center;
text-align: center;
}

.form-container input {
background:#8188818e;
color:#fff;
border: none;
border-radius:5px;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
}


button {
border-radius: 20px;
    border: 1px solid #00000059;           /*   cambio aqui  */
background:#000000a9;
color: #fff;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
text-transform: uppercase;
transition: transform 80ms ease-in;
}

#lila {
background:#000000a9;
border: 1px solid #00000059; 
}

button:active {
transform: scale(0.95);
}

button:focus {
outline: none;
}

button.ghost {
background: transparent;
border-color: #fff;
}

.form-container {
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}

.sign-in-container {
left: 0;
width: 50%;
z-index: 2;
}

.sign-up-container {
left: 0;
width: 50%;
z-index: 1;
}

.overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}


.overlay {
background: linear-gradient(#04401ec7, #035928de, #731d34de ,#731931c7) no-repeat 0 0 / cover;
color: #fff;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: tranform 0.6s ease-in-out;
} 

.over {
background: linear-gradient(#731d34de ,#731931c7,#04401ec7, #035928de) no-repeat 0 0 / cover;
color: #fff;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: tranform 0.6s ease-in-out;
}

.overlay-panel {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 40px;
height: 100%;
width: 50%;
text-align: center;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}

.overlay-right {
right: 0;
transform: translateX(0);
}

.input-group {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin: 8px 0;
}

.input-group input {
width: 48%; /* Ajusta el ancho de los inputs */
}

input::placeholder {
color: #ffffffa9; /* Cambia este color al que desees */
opacity: 1;
}

.fa{
clear: both;
font-size: 30px;
transform: translateX(-35px);
cursor: pointer;
}