@font-face {
	font-family: 'Hurme Geometric Sans 4-Regular';
	src: url('../../fonts/HurmeGeometricSans4-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Hurme Geometric Sans 4-Light';
	src: url('../../fonts/HurmeGeometricSans4-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Hurme Geometric Sans 4-Black';
	src: url('../../fonts/HurmeGeometricSans4-Black.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Hurme Geometric Sans 4-LightOblique';
	src: url('../../fonts/HurmeGeometricSans4-LightObl.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Hurme Geometric Sans 4-SemiBold';
	src: url('../../fonts/HurmeGeometricSans4-SemiBold.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Hurme Geometric Sans 4-Black", Helvetica;
}

html,
body {
	width: 100%;
	height: 100%;
}

.inicio-de-sesion {
	width: 100%;
	height: 100vh;
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	justify-content: center;
	align-items: center;
	font-size: 24px;
}

.fondo-azul {
	position: absolute;
	width: 100%;
	min-height: 100vh;
	background-image: url(/images/fondo2000x2000.svg);
	background-repeat: no-repeat;
	background-size: cover;
	/* Mantiene la imagen sin cortes */
	background-position: center;
}

.container {
	display: flex;
	width: 100%;
	margin-top: 4%;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
	align-items: center;
	left: auto;
	right: auto;
}

.logo-plataforma {
	display: flex;
	width: 100%;
	align-items: anchor-center;
	justify-content: center;
}

.logocorto {
	/*width: 20%;*/
	width: 45%;
}

.line {
	margin: 0 20px;
}

.plataforma-credito {
	display: flex;
	flex-direction: column;
	font-family: "Hurme Geometric Sans 4-Regular", Helvetica;
}

.span {
	color: #3e4a60;
}

.text-wrapper-5 {
	color: #3e5063;
	font-size: 33px;
}

.text-wrapper-6 {
	color: #3e4a60;
	font-size: 25px;
}

.text-wrapper-7 {
	color: #3e4a60;
	font-size: 45px;
}

.text-wrapper-8 {
	color: #536bb9;
	font-size: 2rem;
}

/*****************/
.cajaInicioSesion {
	/* antes: width: 436px; */
	width: 480px;
	max-width: 500px;
	margin-top: 1%;
	margin-bottom: 7%;
	z-index: 1;
	position: relative;
	padding: 0 1rem; /* espacio lateral en pantallas pequeñas */
	box-sizing: border-box;
}

.input-container {
	position: relative;
	width: 100%;

}

.input-container input {
	width: 100%;
	padding: 10px 50px;
	font-size: 16px;
	border-radius: 50px;
	outline: none;
	transition: border-color 0.3s;
	z-index: 3;
	border: 0px solid #fff;
	color: #777;
	box-shadow: 40px 16px 38px -14px #FA851440;
	box-sizing: border-box;
}

.input-container label {
	position: absolute;
	left: 50px;
	/* Para evitar que se sobreponga con el ícono */
	top: 50%;
	transform: translateY(-50%);
	font-family: "Hurme Geometric Sans 4-Regular", Helvetica;
	padding: 0 5px;
	font-size: 16px;
	color: #777;
	transition: 0.3s;
}

.input-container input:focus+label,
.input-container input:not(:placeholder-shown)+label {
	top: -20px;
	/* Más alto para separarlo */
	left: 10px;
	/* Mantiene la alineación */
	font-size: 12px;
	color: #536bb9;
	padding-bottom: 15px;
}

.input-container input:focus+label,
.input-container input:not(:placeholder-shown)+label {
	top: 0;
	font-size: 12px;
	color: #536bb9;
}

.input-container img {
	position: absolute;
	width: 18px;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	color: #777;
	margin: 0 10px;
}


.rectangle {
	border: none;
	box-shadow: 40px 16px 38px -14px #fa851426;
	width: 100%;
	height: auto;
	top: 0;
	left: 0;
	border-radius: 50px;
}

.rectangle::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 4px;
	border-radius: 50px;
	background: linear-gradient(90deg, rgba(250, 133, 20, 1) 26%, rgba(154, 173, 252, 1) 55%, rgba(81, 105, 183, 1) 100%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	z-index: 1;
	pointer-events: none;
}

.input-contrasenia {
	margin-top: 8%;
}

.olvidateContrasenia {
	margin-bottom: 5px;
}

.olvidateContrasenia a {
	width: 180px;
	float: right;
	font-family: "Hurme Geometric Sans 4-LightOblique", Helvetica;
	font-weight: 300;
	color: #3e4a60;
	font-size: 14px;
	letter-spacing: 0;
	white-space: normal; /* permitir wrap en pantallas pequeñas */
	display: flex;
	justify-content: flex-end;
	margin-top: 10px;
}

.copy-wrap {
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 0px 10px 0px 0px;
}

.btn-ingresar {
	position: relative;
	background-color: #536bb9;
	width: 100%;
	height: 48px;
	top: 70%;
	left: 0;
	padding: 7px 0;
	border-radius: 50px;
	font-family: "Hurme Geometric Sans 4-SemiBold", Helvetica;
	font-weight: 600;
	color: #ffffff;
	font-size: 20px;
	letter-spacing: 0;
	line-height: normal;
	text-align: center;
	margin-top: 5%;

}

.Copyright {
	position: absolute;
	top: 1022px;
	left: 1459px;
	font-family: "Hurme Geometric Sans 4-Regular", Helvetica;
	font-weight: 400;
	color: #5169b7;
	font-size: 14px;
	letter-spacing: 0;
	line-height: normal;
	display: none;
}

.semcirculoAzul {
	width: 100%;
	position: fixed;
	display: flex;
	justify-content: flex-end;
}

.semcirculoAzul img {
	width: 17%;
}

.semcirculoNaranja {
	position: absolute;
	pointer-events: none;
	z-index: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
}

.semcirculoNaranja img {
	width: 17%;
}

.btn-ingresar {
	position: relative;
	z-index: 10;
}
@media only screen and (max-width: 1400px) {

	.semcirculoNaranja img {
		width: 20%;
	}

	.semcirculoAzul img {
		width: 20%;
	}
}

@media only screen and (max-width: 976px) {
	.logocorto {
		width: 100%;
	}

	.semcirculoNaranja img {
		width: 22%;
	}

	.semcirculoAzul img {
		width: 22%;
	}

	.container {
		margin-top: 15%;
	}

	.cajaInicioSesion {
		width: 480px;
		max-width: 480px;
	}

	.text-wrapper-5 {
		font-size: 30px;
	}

	.text-wrapper-8 {
		font-size: 45px;
	}
}

@media only screen and (max-width: 850px) {
	.container {
		margin-top: 18%;
	}

	.logocorto {
		width: 100%;
	}
}

@media only screen and (max-width: 740px) {
	.container {
		margin-top: 18%;
	}

	.logocorto {
		width: 100%;
	}

	.semcirculoNaranja img {
		width: 25%;
	}

	.semcirculoAzul img {
		width: 25%;
	}

	.container {
		margin-top: 160px;
	}

	.text-wrapper-5 {
		font-size: 23px;
	}

	.text-wrapper-8 {
		font-size: 35px;
	}

	.cajaInicioSesion {
		width: calc(100% - 40px);
		max-width: 350px;
	}
}

@media only screen and (max-width: 460px) {
	.semcirculoNaranja img {
		width: 25%;
	}

	.semcirculoAzul img {
		width: 25%;
	}

	.container {
		margin-top: 160px;
	}

	.logocorto {
		width: 100%;
	}

	.text-wrapper-5 {
		font-size: 20px;
	}

	.text-wrapper-8 {
		font-size: 30px;
	}

	.cajaInicioSesion {
		width: calc(100% - 32px);
		max-width: 320px;
	}
}

.pais-badge,
.version-badge {
	font-size: 0.8rem;
	font-weight: 500;
	color: #2D398F;
	line-height: 1;
}

/***** Estilo para la banderita *****/
.flag-icon {
	width: 20px;
	height: auto;
	vertical-align: middle;
	padding-bottom: 10px;
}

.flag-row {
	margin-top: 0.25rem;
}


#password-errors {
	margin-top: 0.75rem;
	margin-bottom: 0.75rem;
	border-radius: 12px;
	font-size: 0.85rem;
}

.password-helper {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 14px;
	padding: 1rem 1.25rem;
	margin-top: 0.75rem;
	margin-bottom: 1.5rem;
	font-size: 0.85rem;
	color: #555555;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
}

.password-helper-title {
	font-weight: 600;
	margin-bottom: 0.35rem;
	color: #444444;
}

.password-rules-list {
	margin-bottom: 0.6rem;
	padding-left: 0;
	list-style: none;
}

.password-rules-list li {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin-bottom: 0.25rem;
	transition: color 0.2s ease, transform 0.2s ease;
}

.password-rules-list li.text-success {
	transform: translateX(4px);
}

.password-rules-list li.text-danger {
	transform: translateX(0);
}

.state-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	font-size: 0.7rem;
}

.password-progress {
	width: 100%;
	height: 6px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.06);
	overflow: hidden;
	margin-bottom: 0.35rem;
}

.password-progress-bar {
	height: 100%;
	width: 0;
	border-radius: inherit;
	transition: width 0.25s ease, background-color 0.25s ease;
	background-color: #e74c3c;
}

.password-strength-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.password-strength-label {
	font-size: 0.8rem;
	color: #777777;
}

#password-match-msg {
	font-size: 0.85rem;
	min-height: 18px;
	margin-top: 0.35rem;
}

.input-container.input-contrasenia {
	margin-bottom: 0.9rem;
}

.input-container.input-contrasenia input.form-control {
	border-radius: 999px;
}

.password-toggle i {
	width: 18px;
	height: 18px;
}
.me-2 {
	vertical-align: bottom;
}