@font-face {
			font-family: 'Montserrat';
			src: url('../fonts/Montserrat/Montserrat-SemiBold.ttf');
		}

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

		body {
			 background: linear-gradient(90deg, rgb(4, 35, 104), rgb(8, 52, 187));
			
		     background-color: rgb(3, 20, 255);
			
			background-repeat:no-repeat;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
			
			opacity: 0;
			transition: opacity 1s ease-in-out;
		}
		
		.loaded {
		  opacity: 1;
		}

		#loader {
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		  /* Agrega estilos para el indicador de carga */
		}
		
		.login__validation{
			color:#ff003c;
			visibility: hidden;
		}
		.ximagen {
		  position: relative;
		  display: flex;
		  justify-content: center;
		  align-items: center;
  
		  margin-left: 20px;
		  width:110px;
		  height:110px;
		  border-radius: 50%;
		  background-color: white;
		  padding: 10px; 
		 
		}
		
		.ximagen img {
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		  max-width: 100%;
		  max-height: 100%;
		}
		
		.container {
			display: flex;
			align-items: center;
			justify-content: center;
			min-height: 100vh;
		}

		.screen {		
			background: linear-gradient(90deg, rgba(3, 55, 255, 0.1), rgba(193, 0, 55, 0.1));
			
			backdrop-filter: blur(10px); 
			overflow: hidden;
			
			position: relative;	
			height: 600px;
			width: 360px;	
			box-shadow: 0px 0px 24px rgb(0, 66, 130);
		}

		.screen__content {
			z-index: 1;
			position: relative;	
			height: 100%;
		}

		.screen__background {		
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 0;
			-webkit-clip-path: inset(0 0 0 0);
			clip-path: inset(0 0 0 0);	
		}

		.screen__background__shape {
			transform: rotate(45deg);
			position: absolute;
		}

		.screen__background__shape1 {
			height: 520px;
			width: 520px;
			background: #FFF;	
			top: -50px;
			right: 120px;	
			border-radius: 0 72px 0 0;
		}

		.screen__background__shape2 {
			height: 220px;
			width: 220px;
			background: rgb(255, 24, 68);	
			top: -172px;
			right: 0;	
			border-radius: 32px;
		}

		.screen__background__shape3 {
			height: 540px;
			width: 190px;
			background: linear-gradient(270deg, rgb(3, 55, 255), rgb(44, 117, 255));
			top: -24px;
			right: 0;	
			border-radius: 32px;
		}

		.screen__background__shape4 {
			height: 400px;
			width: 200px;
			background: rgb(3, 20, 255);	
			top: 420px;
			right: 50px;	
			border-radius: 60px;
		}

		.login {
			width: 320px;
			padding: 30px;
			padding-top: 156px;
		}
	
		.login__field {
			padding: 20px 0px;		
			position: relative;	
			margin-top: 5px;
			margin-bottom: -45px;
		}

		.login__icon {
			position: absolute;
			top: 30px;
			color: rgb(193, 0, 55);
		}
		
		.login__icon_inverse {
		  margin-left: 0.1em;
		  border-radius: 20px;
		  padding: 5px 5px;
		  color: rgb(3, 20, 255);
		  border: 2px solid trasparent;
		  font-size: 16px;
		  cursor: pointer;
		  transition: all 0.3s ease-in-out;
		  
		}

		.login__icon_inverse:hover {
		  border: 1px solid rgb(44, 117, 255);
		  outline: none;
		}

		.login__input {
			border: none;
			border-bottom: 2px solid rgb(8, 52, 187);
			background: none;
			padding: 10px;
			padding-left: 24px;
			font-weight: 700;
			width: 75%;
			transition: .2s;
		}
	

		.login__input:active,
		.login__input:focus,
		.login__input:hover {
			outline: none;
			border-bottom-color: rgb(44, 117, 255);
		}

		.login__submit {
			background: #fff;
			font-size: 14px;
			margin-top: 30px;
			padding: 16px 20px;
			border-radius: 26px;
			border: 1px solid rgb(193, 0, 55);
			text-transform: uppercase;
			font-weight: 700;
			display: flex;
			align-items: center;
			width: 250px;
			height: 50px ;
			color: #000;
			box-shadow: 0px 2px 2px rgb(0, 66, 130);
			cursor: pointer;
			transition: .2s;
		}

		.login__submit:active,
		.login__submit:focus,
		.login__submit:hover {
			border-color: rgb(44, 117, 255);
			outline: none;
		}

		.button__icon {
			font-size: 24px;
			margin-left: auto;
			color: rgb(193, 0, 55);
		}

		.social-login {	
			position: absolute;
			height: 140px;
			width: 160px;
			text-align: center;
			bottom: 0px;
			right: 0px;
			color: #fff;
		}

		.social-icons {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.social-login__icon {
			padding: 20px 10px;
			color: #fff;
			text-decoration: none;	
			text-shadow: 0px 0px 8px rgb(193, 0, 55);
		}

		.social-login__icon:hover {
			transform: scale(1.5);	
		}
		
		.img-captcha{
			margin-top:10px;
			margin-bottom:45px;
			cursor: pointer;
		}
		
		@media (max-width: 480px) {
		 
		  .container{
			  min-height: 0;
		  }
		  .screen {
			width: 100%;
			top: 0;
			bottom: 0;
			box-shadow: none;
		  }
		}