/* =========================================================
   URT Custom Auth - Recuperar contraseña
   Ruta: /user/password
   ========================================================= */

.user-pass {
	width: 100%;
}

.user-pass * {
	box-sizing: border-box;
}

.user-pass .gt-sesion--password {
	width: 100%;
	min-height: calc(100vh - 150px);
	padding: 72px 20px;
	background:
		radial-gradient(circle at top left, rgba(63, 111, 217, .10), transparent 34%),
		linear-gradient(180deg, #eef3fb 0%, #f7faff 100%);
}

.user-pass .gt-sesion__container--center {
	width: 100%;
	display: flex;
	justify-content: center;
}

.user-pass .gt-form-sesion__container {
	width: min(100%, 520px);
	margin: 0 auto;
	padding: 34px 32px 32px;
	background: #ffffff;
	border: 1px solid #d9e2f2;
	border-radius: 28px;
	box-shadow:
		0 18px 44px rgba(40, 76, 146, .13),
		0 2px 8px rgba(16, 24, 40, .04);
}

.user-pass .gt-sesion__title {
	margin: 0 0 14px;
	color: #3f6fd9;
	font-size: 26px;
	font-weight: 900;
	line-height: 1.18;
}

.user-pass .gt-password-text {
	margin: 0 0 26px;
	color: #5f6b7a;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.55;
}

.user-pass .gt-form-field {
	margin-bottom: 24px;
}

.user-pass .form-label {
	display: block;
	margin: 0 0 8px;
	color: #344054;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
}

.user-pass .form-item,
.user-pass .js-form-item {
	margin: 0;
	width: 100%;
}

.user-pass input[type="text"],
.user-pass input[type="email"],
.user-pass .form-input {
	width: 100%;
	max-width: 100%;
	min-height: 50px;
	display: block;
	padding: 12px 15px;
	border: 1px solid #cfd8e6;
	border-radius: 14px;
	background: #ffffff;
	color: #101828;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	outline: none;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
	transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.user-pass input[type="text"]::placeholder,
.user-pass input[type="email"]::placeholder,
.user-pass .form-input::placeholder {
	color: #98a2b3;
}

.user-pass input[type="text"]:focus,
.user-pass input[type="email"]:focus,
.user-pass .form-input:focus {
	border-color: #3f6fd9;
	background: #ffffff;
	box-shadow:
		0 0 0 4px rgba(63, 111, 217, .14),
		0 2px 8px rgba(40, 76, 146, .10);
}

.user-pass .form-button-wrapper {
	width: 100%;
	margin-top: 8px;
}

.user-pass .form-button-wrapper .gt-btn,
.user-pass .form-button-wrapper input[type="submit"] {
	width: 100%;
	min-height: 52px;
	border-radius: 16px;
	border: 1px solid #3f6fd9;
	background: #3f6fd9;
	color: #ffffff;
	font-size: 16px;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 0 12px 26px rgba(63, 111, 217, .24);
	transition: background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.user-pass .form-button-wrapper .gt-btn:hover,
.user-pass .form-button-wrapper input[type="submit"]:hover,
.user-pass .form-button-wrapper .gt-btn:focus,
.user-pass .form-button-wrapper input[type="submit"]:focus {
	background: #244a9b;
	border-color: #244a9b;
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: 0 16px 32px rgba(63, 111, 217, .30);
	outline: none;
}

@media (max-width: 576px) {
	.user-pass .gt-sesion--password {
		min-height: calc(100vh - 120px);
		padding: 40px 14px;
	}

	.user-pass .gt-form-sesion__container {
		padding: 28px 18px 24px;
		border-radius: 22px;
	}

	.user-pass .gt-sesion__title {
		font-size: 24px;
	}

	.user-pass .gt-password-text {
		font-size: 15px;
	}

	.user-pass input[type="text"],
	.user-pass input[type="email"],
	.user-pass .form-input {
		min-height: 48px;
		font-size: 15px;
	}
}