/* https://www.youtube.com/watch?v=ZzVXaE14938 */

/*
 width: 200px; Para			altura efectiva ~35px en <select> 
 padding: 6px 10px;			Ajusta según la fuente 
 line-height: 1.2;			Ayuda a estabilizar la altura 
 box-sizing: border-box;	Incluye padding en el ancho 
 background-color: inherit; Toma el color de su contenedor 
 color: #222;				Texto (ajústalo si tu fondo es oscuro) 
 border: 1px solid #ccc;	Opcional: borde 
 border-radius: 6px;		Opcional: esquinas redondeadas 
 display: inline-block;		Asegura bloque alineable 
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: boder-box;
	font-family: "Montserrat", sans-serif;
}

body {
	/*border: 2px solid red;*/
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #F0F4F3;
}
.container {
	/*border: 2px solid black;*/
	width: 800px;
	height: 500px;
	display: flex;
	/*flex-direction: row;*/
	position: relative;
	background-color: white;
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 0 0 10px rgb(0,0,0,0.3);
}

.container-form {
	/*border: 2px solid green;*/
	width: 100%;
	overflow: hidden;
}

.container-form form{
	/*border: 2px solid red;*/
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transition: transform 0.5s ease-in;
}

.container-form h2{
	font-size: 30px;
	margin-bottom: 20px;
}

.social-networks {
	/*border: 2px solid red;*/
	display: flex;
	gap: 12px;
	margin-bottom: 20px;
}

.social-networks ion-icon {
	border: 1px solid #C9CCCB;
	border-radius: 6px;
	padding: 8px;
	cursor: pointer;
}

.container-form span {
	font-size: 12px;
	margin-bottom: 15px;
}

.container-input {
	/*border: 2px solid red;*/
	width: 300px;
	height: 40px;
	margin-bottom: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 0 15px;
	background-color: #EEEEEE;
}

.container-input input {
	border: none;
	outline: none;
	width: 100%;
	height: 100%;
	background-color: inherit;
}

.container-DropDownList {
	/*border: 2px solid red;*/
	width: 300px;
	height: 40px;
	margin-bottom: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 0 15px;
	background-color: #EEEEEE;
}

.DropDownList {
	border: none;
	outline: none;
	width: 100%;
	height: 100%;
	background-color: inherit;
}

.DropDownList option {
	background-color: #ffffff; /* fondo por defecto de cada opción */
	color: #1a1a1a;
}

/* Opción seleccionada (soporte variable según navegador) */
.DropDownList option:checked {
	background-color: inherit;
	/*background-color: #e6f0ff;*/
}

/* Efecto hover dentro del desplegable (no todos los navegadores lo soportan) */
.DropDownList option:hover {
	background-color: #dbe8ff;
}


.container-form a {
	color: black;
	font-size: 14px;
	margin-top: 5px;
	margin-bottom: 20px;
}

.button {
	width: 170px;
	height: 45px;
	font-size: 15px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	margin-top: 10px;
	background-color: #0A1172;
	color: white;
}

/* animación de formularios */

/*.sign-in {
	transform: translateX(100%);
} */

.sign-up {
	transform: translateX(-100%);
}

.container.toggle .sign-in {
	transform: translateX(100%);
}

.container.toggle .sign-up {
	transform: translateX(0);
}

/* Bienvenida */

.container-welcome {
	position: absolute;
	width: 50%;
	height: 100%;
	display: flex;
	/*flex-direction: column;*/
	align-items: center;
	transform: translateX(100%);
	background-color: #5874B8;
	transition: transform 0.5s ease-in-out, 
				border-radius 0.5s ease-in-out;
	overflow: hidden;
	border-radius: 25.54% 0% 0 65%;
}

.container.toggle .container-welcome {
	transform: translateX(0);
	border-radius: 0 25.54% 65% 0;
	background-color: #90B1DB;
}

.container-welcome .welcome {
	/*border: 2px solid red;*/
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 0 50px;
	color: white;
	transition: transform 0.5s ease-in-out;
}

.welcome-sign-in {
	transform: translateX(100%);
}

.container-welcome h3 {
	font-size: 40px;
}

.container-welcome p {
	font-size: 14px;
	text-align: center;
}

.container-welcome .button {
	/*border: 2px solid white;*/
	border: 1px solid #C9CCCB;
}

.container.toggle .welcome-sign-in {
	transform: translateX(0);
}

.container.toggle .welcome-sign-up {
	transform: translateX(-100%);
}