/* ==================================================================
 * WIST · Tarjeta de paso (.wist-paso)
 * ------------------------------------------------------------------
 * Tarjeta centrada para los momentos que no son la pantalla en si: un paso
 * de confirmacion o un estado sin salida. Sacada de wist-checkout.css el
 * 2026-10-07, cuando la empezo a usar tambien Mi cuenta. La usan:
 *
 * - woocommerce/checkout/form-verify-email.php (plantilla sobrescrita):
 *   «Confirma tu correo», en lugar de «pagar el pedido» o de la pagina de
 *   gracias cuando WooCommerce no reconoce a quien abre el enlace.
 * - Los estados de order-pay en los que no se puede pagar (enlace no valido,
 *   pedido ya pagado o cancelado, falta iniciar sesion), en functions.php.
 * - La confirmacion de cierre de sesion (mu-plugin wist-mi-cuenta), cuando
 *   el enlace de «Salir» llega sin su codigo de seguridad o caducado.
 *
 * Se carga en el checkout y en Mi cuenta (functions.php).
 *
 * Es un paso de acceso, asi que lleva la tarjeta de las pantallas de acceso
 * (plantilla 4686, «¿Olvidaste tu contraseña?»): 600 px, centrada, con los
 * mismos valores. Los del formulario repiten los de .wist-auth-form en
 * wist-cuenta.css; si cambian alli, cambiar aqui.
 * ================================================================== */

.wist-paso {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(100svh - 160px);
	padding: var(--wist-space-400) 16px;
	background: var(--wist-canvas);
}

.wist-paso__tarjeta {
	display: flex;
	flex-direction: column;
	gap: var(--wist-space-200);
	width: 100%;
	max-width: 600px;
	padding: 32px;
	border: 1px solid var(--wist-border-decorative);
	border-radius: 24px;
	background: var(--wist-surface);
	box-shadow: var(--wist-shadow-2);
}

.wist-paso__titulo {
	margin: 0;
	text-align: center;
}

.wist-paso__texto {
	margin: 0;
	text-align: center;
	color: var(--wist-ink-secondary);
	font-family: Inter, system-ui, sans-serif;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.wist-paso__texto a {
	color: var(--wist-ink-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wist-paso__form {
	display: flex;
	flex-direction: column;
	gap: var(--wist-space-300);
	margin: var(--wist-space-100) 0 0;
}

/* La regla global de filas de formulario (CSS de Bricks, en linea:
   "body.bricks-is-frontend .woocommerce form .form-row") les da 24 px de
   margen inferior, que se sumaban al gap. Se iguala su acotacion y se suma
   una clase para ganarle. */
body.bricks-is-frontend .woocommerce form.wist-paso__form .form-row {
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

.wist-paso__form label {
	display: block;
	margin-bottom: var(--wist-space-100);
	color: var(--wist-ink-primary);
	font-family: Inter, system-ui, sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.5;
}

.wist-paso__form .required {
	color: var(--wist-ink-secondary);
}

/* Supera la regla global que topa los campos de una linea a 24 rem
   ("body.bricks-is-frontend .woocommerce form .form-row input.input-text"). */
body.bricks-is-frontend .woocommerce .wist-paso form .form-row input.input-text {
	width: 100%;
	max-width: 100%;
}

.wist-paso__form .woocommerce-error {
	margin: 0;
	border-radius: var(--wist-radius-md);
}

/* Acciones de los estados sin formulario: un boton principal y, debajo, una
   salida en texto, como «Volver a iniciar sesión» en la tarjeta de acceso. */
.wist-paso__acciones {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--wist-space-100);
	margin-top: var(--wist-space-100);
}

.wist-paso__enlace {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	color: var(--wist-ink-secondary);
	font-family: Inter, system-ui, sans-serif;
	font-size: 0.9375rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wist-paso__enlace:hover {
	color: var(--wist-ink-primary);
}

/* La unica accion de la pantalla: ancho completo, tamano L del master. */
.wist-paso__boton,
.wist-paso__form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 3.25rem;
	padding: 14px 30px;
	border: 0;
	border-radius: var(--wist-radius-lg);
	background: var(--wist-blue-base);
	color: var(--wist-blue-on);
	font-family: Inter, system-ui, sans-serif;
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 24px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.1s ease;
}

.wist-paso__boton:hover,
.wist-paso__form button[type="submit"]:hover {
	background: var(--wist-blue-base-hover);
}

.wist-paso__boton:active,
.wist-paso__form button[type="submit"]:active {
	transform: scale(0.97);
}

.wist-paso__boton:focus-visible,
.wist-paso__form button[type="submit"]:focus-visible {
	outline: 2px solid var(--wist-blue-base);
	outline-offset: 3px;
}

@media (max-width: 767px) {

	.wist-paso {
		min-height: calc(100svh - 96px);
		padding: var(--wist-space-300) 16px;
	}

	.wist-paso__tarjeta {
		padding: 24px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.wist-paso__boton,
	.wist-paso__form button[type="submit"] {
		transition: none;
	}

	.wist-paso__boton:active,
	.wist-paso__form button[type="submit"]:active {
		transform: none;
	}
}