/* Recuperación de contraseña: una superficie clara, enfocada y sin saltos. */

body.woocommerce-lost-password {
	background: var(--ct-fondo);
	color: var(--ct-texto-negro);
}

body.woocommerce-lost-password .post-content > .woocommerce {
	display: block;
	padding-block: var(--ct-separacion-menu-pagina-desktop) 56px;
}

body.woocommerce-lost-password .woocommerce-notices-wrapper,
body.woocommerce-lost-password .ctsys-recuperacion-form,
body.woocommerce-lost-password .ctsys-recuperacion-confirmacion {
	box-sizing: border-box;
	width: min(100%, 680px);
	margin-inline: auto;
}

body.woocommerce-lost-password .ctsys-recuperacion-form {
	grid-column: 1 / -1;
}

body.woocommerce-lost-password .woocommerce-notices-wrapper {
	margin-bottom: 16px;
}

body.woocommerce-lost-password .woocommerce-notices-wrapper:empty {
	display: none;
}

.ctsys-recuperacion-form,
.ctsys-recuperacion-confirmacion {
	border: 1px solid var(--ct-borde-fuerte) !important;
	border-radius: var(--ct-radio);
	background: var(--ct-superficie);
	box-shadow: var(--ct-sombra-alta);
	color: var(--ct-texto-negro);
}

.ctsys-recuperacion-form {
	padding: clamp(24px, 4vw, 40px);
}

.ctsys-recuperacion-form__cabecera {
	margin-bottom: 28px;
}

.ctsys-recuperacion-form__eyebrow {
	margin: 0 0 8px;
	color: var(--ct-cyan-osc);
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.ctsys-recuperacion-form__titulo {
	position: relative;
	margin: 0;
	padding-bottom: 16px;
	color: var(--ct-texto-negro);
	font-size: clamp(1.7rem, 3vw, 2.25rem);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.1;
}

.ctsys-recuperacion-form__titulo::after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 48px;
	height: 3px;
	border-radius: 999px;
	background: var(--ct-naranja);
	content: '';
}

.ctsys-recuperacion-form__intro,
.ctsys-recuperacion-confirmacion__texto,
.ctsys-recuperacion-confirmacion__ayuda {
	margin: 18px 0 0;
	color: var(--ct-texto-negro);
	font-size: 1rem;
	line-height: 1.6;
}

.ctsys-recuperacion-form__campo {
	float: none;
	clear: both;
	width: 100%;
	margin: 0 0 20px;
	padding: 0;
}

.ctsys-recuperacion-form__campo label {
	display: block;
	margin-bottom: 8px;
	color: var(--ct-texto-negro);
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.35;
}

.ctsys-recuperacion-form__campo .required {
	color: var(--ct-error);
}

.ctsys-recuperacion-form__campo input.input-text,
.ctsys-recuperacion-form__campo .password-input input.input-text {
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	border: 1px solid var(--ct-borde-fuerte) !important;
	border-radius: var(--ct-radio-campo);
	background: var(--ct-superficie);
	color: var(--ct-texto-negro);
	font-size: 1rem;
	line-height: 1.35;
	transition: border-color var(--ct-transicion), box-shadow var(--ct-transicion);
}

.ctsys-recuperacion-form__campo input.input-text::placeholder {
	color: var(--ct-tinta-tenue);
	opacity: 1;
}

.ctsys-recuperacion-form__campo input.input-text:hover {
	border-color: var(--ct-cyan) !important;
}

.ctsys-recuperacion-form__campo input.input-text:focus {
	border-color: var(--ct-cyan) !important;
	outline: 0;
	box-shadow: var(--ct-foco);
}

.ctsys-recuperacion-form__seguridad {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 4px 0 24px;
	padding: 12px 14px;
	border: 1px solid var(--ct-borde);
	border-radius: var(--ct-radio-campo);
	background: var(--ct-superficie-suave);
}

.ctsys-recuperacion-form__seguridad-icono {
	display: inline-grid;
	flex: 0 0 22px;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ct-cyan-tinte);
	color: var(--ct-cyan-osc);
	font-size: .8rem;
	font-weight: 900;
}

.ctsys-recuperacion-form__seguridad p {
	margin: 0;
	color: var(--ct-tinta);
	font-size: .875rem;
	line-height: 1.5;
}

.ctsys-recuperacion-form__accion {
	width: 100%;
	margin: 0;
}

.ctsys-recuperacion-form__boton {
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	border: 1px solid var(--ct-boton-principal-fondo) !important;
	border-radius: var(--ct-radio-campo) !important;
	background: var(--ct-boton-principal-fondo) !important;
	color: var(--ct-boton-principal-texto) !important;
	font-size: 1rem !important;
	font-weight: 800 !important;
	line-height: 1.2;
	transition: background-color var(--ct-transicion), transform var(--ct-transicion), box-shadow var(--ct-transicion);
}

.ctsys-recuperacion-form__boton:hover {
	border-color: var(--ct-boton-principal-hover) !important;
	background: var(--ct-boton-principal-hover) !important;
	box-shadow: 0 6px 16px rgb(0 0 0 / 10%);
	transform: translateY(-1px);
}

.ctsys-recuperacion-form__volver {
	margin: 22px 0 0;
	text-align: center;
}

.ctsys-recuperacion-form__volver a {
	color: var(--ct-cyan-osc);
	font-size: .95rem;
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ctsys-recuperacion-form__trampa {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.ctsys-recuperacion-confirmacion {
	padding: clamp(28px, 5vw, 48px);
	text-align: center;
}

.ctsys-recuperacion-confirmacion__icono {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: 18px;
	border-radius: 50%;
	background: var(--ct-cyan);
	color: #fff;
	font-size: 1.4rem;
	font-weight: 900;
}

.ctsys-recuperacion-confirmacion .ctsys-recuperacion-form__titulo::after {
	right: 0;
	left: 0;
	margin-inline: auto;
}

.ctsys-recuperacion-confirmacion__ayuda {
	color: var(--ct-tinta-suave);
	font-size: .9375rem;
}

.ctsys-recuperacion-confirmacion .ctsys-recuperacion-form__volver {
	margin-top: 28px;
}

body.woocommerce-lost-password .woocommerce-message,
body.woocommerce-lost-password .woocommerce-error,
body.woocommerce-lost-password .woocommerce-info {
	box-sizing: border-box;
	margin: 0;
	border-radius: var(--ct-radio-campo);
	font-size: .9375rem;
	line-height: 1.5;
}

@media (max-width: 767px) {
	body.woocommerce-lost-password .post-content > .woocommerce {
		padding-block: var(--ct-separacion-menu-pagina-mobile) 32px;
	}

	.ctsys-recuperacion-form {
		padding: 24px 20px;
	}

	.ctsys-recuperacion-form__cabecera {
		margin-bottom: 24px;
	}

	.ctsys-recuperacion-form__titulo {
		font-size: 1.7rem;
	}

	.ctsys-recuperacion-form__intro,
	.ctsys-recuperacion-confirmacion__texto,
	.ctsys-recuperacion-confirmacion__ayuda {
		font-size: .9375rem;
	}

	.ctsys-recuperacion-confirmacion {
		padding: 28px 20px;
	}

}

@media (prefers-reduced-motion: reduce) {
	.ctsys-recuperacion-form__campo input.input-text,
	.ctsys-recuperacion-form__boton {
		transition: none;
	}

	.ctsys-recuperacion-form__boton:hover {
		transform: none;
	}
}
