/*CLASES PARA FORMULARIO LOGIN HTML*/

	:root {
		--color: #ffffff;
	}

	* {
		box-sizing: border-box;
	}

	html {
		scroll-behavior: smooth;
	} 
	
/*clase para div*/ 
	.login-container {
		display: flex;
		justify-content: space-around;
		padding: 20px;  
		background-image: linear-gradient(to right top, #21072c, #34124e, #441f74, #4f2e9e, #5240cb);
	}
	
/*clase para campos: RUT, Contraseña*/ 
	.login-container form input {
		display: block; 
		padding: 10px;
		width: 100%;
		margin: 0.5rem 0;
		outline: none;
		background-color: #F3F3F3;
		border: none;
		border-radius: 25px;

		font-family: "Arial", "sans-serif";
		font-size: 16px;
		font-weight: normal;
		text-align: center; 			
		letter-spacing: 0.8px;
		color: #000000;
		
		backdrop-filter: blur(15px);
		-webkit-border-radius: 25px;
		-moz-border-radius: 25px;
		-ms-border-radius: 25px;
		-o-border-radius: 25px;
	}

	.login-container form input:focus {
		box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.2);
		animation: wobble 0.3s ease-in;
		-webkit-animation: wobble 0.3s ease-in;
	}

/*clase para mostrar u ocultar contraseña*/ 
	.container-pass {
		position: relative;
		display: inline-block;
	}
	
	.container-pass input {
		padding-right: 35px;
	} 
	
	.container-pass img {
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
		width: 20px;
		cursor: pointer;
	}

/*clase para botón: ENTRAR*/ 
	.login-container form button {
		background-image: linear-gradient(to right, #050e1c, #00204b, #002f7d, #003ab0, #1441e1); 
		filter: brightness(130%);  

		color: var(--color); 
		display: block; 
		padding: 10px;
		border-radius: 25px;
		outline: none;
		
		font-family: "Arial", "sans-serif";
		font-size: 16px;
		letter-spacing: 1.5px;
		font-weight: bold;
		width: 100%;
		cursor: pointer;
		margin-bottom: 0.5rem;
		transition: all 0.1s ease-in-out;
		border: none;
		-webkit-border-radius: 25px;
		-moz-border-radius: 25px;
		-ms-border-radius: 25px;
		-o-border-radius: 25px;
		-webkit-transition: all 0.1s ease-in-out;
		-moz-transition: all 0.1s ease-in-out;
		-ms-transition: all 0.1s ease-in-out;
		-o-transition: all 0.1s ease-in-out;
	}

	.login-container form button:hover {
		background-image: linear-gradient(to right top, #3d13d4, #0063f5, #008ff5, #00b2e5, #82cfda);
		color: #FF1493;	
		box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.15);
		transform: scale(1.02);
		-webkit-transform: scale(1.02);
		-moz-transform: scale(1.02);
		-ms-transform: scale(1.02);
		-o-transform: scale(1.02); 
	}

	@keyframes wobble {
		0% {
			transform: scale(1.025);
			-webkit-transform: scale(1.025);
			-moz-transform: scale(1.025);
			-ms-transform: scale(1.025);
			-o-transform: scale(1.025);
		}
		25% {
			transform: scale(1);
			-webkit-transform: scale(1);
			-moz-transform: scale(1);
			-ms-transform: scale(1);
			-o-transform: scale(1);
		}
		75% {
			transform: scale(1.025);
			-webkit-transform: scale(1.025);
			-moz-transform: scale(1.025);
			-ms-transform: scale(1.025);
			-o-transform: scale(1.025);
		}
		100% {
			transform: scale(1);
			-webkit-transform: scale(1);
			-moz-transform: scale(1);
			-ms-transform: scale(1);
			-o-transform: scale(1);
		}
	}
	
	
	
/*** RESPONSIVOS ***/	
/*================*/
	@media (width < 768px) {
		/*Estilos para pantallas de hasta 768px*/
		.row {
			display: flex; 
			flex-wrap: wrap; 
			gap: 5px; 
		}
		
		.container-pass{
			display: flex; 
			flex-wrap: wrap; 
			gap: 5px; 			
		}		
		
		.login-container form input {
			font-size: 14px;
		}	
		
		.login-container form button {
			font-size: 14px;
		}
	}