/**
 * Formulario de registro — shortcode [lp_registration_form].
 *
 * Réplica del aspecto del formulario Bricks `form_create_account` que vivía en
 * la plantilla "Registro" (`/crear-cuenta/`): etiquetas de 13,28 px en negrita,
 * campos con radio 20 px, borde negro al 40 % y botón negro a ancho completo.
 *
 * Theme: bricks-child | project/assets/css/lpx-registration.css
 */

/* ------------------------------------------------------------------ */
/* Contenedor                                                          */
/* ------------------------------------------------------------------ */

.lpx-registration {
	width: 100%;
}

.lpx-registration__form {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: var(--text-m, 1rem);
	font-weight: 400;
	line-height: 1.5;
	color: var(--dark, #000);
}

/* ------------------------------------------------------------------ */
/* Campos                                                              */
/* ------------------------------------------------------------------ */

.lpx-registration__field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: 100%;
	padding-bottom: var(--space-s, 1rem);
}

.lpx-registration__field .label,
.lpx-registration__field > label {
	display: block;
	margin: 0;
	font-size: var(--text-s, 0.83rem);
	font-weight: 600;
	line-height: 1.7;
	letter-spacing: 0.4px;
	color: var(--dark, #000);
	text-transform: none;
}

.lpx-registration__field .label.required::after,
.lpx-registration__field > label.required::after {
	content: " *";
	color: var(--primary, #000);
}

.lpx-registration__control {
	position: relative;
	display: block;
	width: 100%;
}

.lpx-registration__field input[type="text"],
.lpx-registration__field input[type="email"],
.lpx-registration__field input[type="tel"],
.lpx-registration__field input[type="password"],
.lpx-registration__field select {
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0;
	padding: var(--space-xs, 0.7rem) var(--space-s, 1rem);
	font-family: inherit;
	font-size: var(--text-m, 1rem);
	font-weight: 400;
	line-height: 1.5;
	color: var(--dark-80, rgba(0, 0, 0, 0.8));
	background-color: #fff;
	border: 1px solid var(--dark-40, rgba(0, 0, 0, 0.4));
	border-radius: var(--radius-l, 20px);
	box-shadow: none;
}

/*
 * El color de los placeholders de los campos lo impone el tema con
 * `!important` (`:not(.cas-calendar-wrapper *) input:not(…):not(.form-control)::placeholder { color: var(--primary-30) !important }`),
 * así que aquí solo se fija la opacidad para que no se atenúen más.
 */
.lpx-registration__field input::placeholder {
	opacity: 1;
}

/* Select: sin apariencia nativa + flecha (igual que el resto del sitio). */
.lpx-registration__field select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: calc(var(--space-s, 1rem) + 1.5rem);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: calc(100% - 0.75rem) 50%;
	background-size: 16px 12px;
}

/*
 * El texto del select lleva el mismo color que el texto de un campo normal
 * (`--dark-80`). Necesita más especificidad y `!important` porque el tema
 * fuerza `color: var(--text-body) !important` en todos los select
 * (`:not(.cas-calendar-wrapper *) select:not(.form-select)`).
 */
.lpx-registration .lpx-registration__field .lpx-registration__control select,
.lpx-registration .lpx-registration__field .lpx-registration__date-part select {
	color: var(--dark-80, rgba(0, 0, 0, 0.8)) !important;
}

/*
 * Las opciones del desplegable llevan el mismo color que el texto de un campo;
 * la opción vacía ("Seleccionar", "Día", "Mes", "Año") es el placeholder y usa
 * el mismo tono que el placeholder de un campo de texto (`--primary-30`).
 */
.lpx-registration__field select option {
	color: var(--dark-80, rgba(0, 0, 0, 0.8));
}

.lpx-registration__field select option.placeholder {
	color: var(--primary-30, rgba(0, 0, 0, 0.3));
}

/*
 * Select sin valor: muestra su opción vacía con el tono del placeholder de un
 * campo de texto (`--primary-30`). Necesita más especificidad y `!important`
 * porque el tema fuerza `color: var(--text-body) !important` en todos los
 * select y esta misma hoja fija `--dark-80` para el select con valor.
 */
.lpx-registration .lpx-registration__field select:has(option.placeholder:checked) {
	color: var(--primary-30, rgba(0, 0, 0, 0.3)) !important;
}

/* Foco accesible y coherente con el formulario anterior. */
.lpx-registration__field input:focus,
.lpx-registration__field select:focus {
	border-color: var(--primary, #000);
	outline: 2px solid var(--primary, #000);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Mostrar / ocultar contraseña                                        */
/* ------------------------------------------------------------------ */

/*
 * El CSS global del tema impone el padding de los campos con `!important`
 * (`:not(.cas-calendar-wrapper *) input:not(...)`, especificidad 0.5.3), así
 * que el hueco del botón necesita una regla más específica para ganarle.
 */
.lpx-registration .lpx-registration__field .lpx-registration__control input.lpx-registration__input--toggle:not([type="checkbox"]):not([type="radio"]) {
	padding-right: 3.25rem !important;
}

.lpx-registration__toggle {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 100%;
	padding: 0;
	color: var(--dark-60, rgba(0, 0, 0, 0.6));
	background: none;
	border: 0;
	border-radius: 0 var(--radius-l, 20px) var(--radius-l, 20px) 0;
	cursor: pointer;
}

.lpx-registration__toggle:hover {
	color: var(--dark, #000);
}

.lpx-registration__toggle:focus-visible {
	outline: 2px solid var(--primary, #000);
	outline-offset: -4px;
}

.lpx-registration__toggle .lpx-registration__icon--hide {
	display: none;
}

.lpx-registration__toggle[aria-pressed="true"] .lpx-registration__icon--show {
	display: none;
}

.lpx-registration__toggle[aria-pressed="true"] .lpx-registration__icon--hide {
	display: block;
}

/* ------------------------------------------------------------------ */
/* Fecha de nacimiento (día / mes / año en una fila)                   */
/* ------------------------------------------------------------------ */

.lpx-registration__birthdate {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
	width: 100%;
}

.lpx-registration__date-part {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.lpx-registration__date-label {
	font-size: var(--text-xs, 0.69rem);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.4px;
	color: var(--dark-60, rgba(0, 0, 0, 0.6));
}

/* ------------------------------------------------------------------ */
/* Errores y mensajes                                                  */
/* ------------------------------------------------------------------ */

.lpx-registration__field.has-error input,
.lpx-registration__field.has-error select {
	border-color: #b32d2e;
}

.lpx-registration__error {
	display: block;
	font-size: 0.8rem;
	line-height: 1.4;
	color: #b32d2e;
}

.lpx-registration__error[hidden] {
	display: none;
}

.lpx-registration__msg {
	display: none;
	margin: 0 0 var(--space-s, 1rem);
	padding: 0.75rem 1rem;
	font-size: 0.9rem;
	line-height: 1.5;
	border: 1px solid transparent;
	border-radius: var(--radius-s, 0.5rem);
}

.lpx-registration__msg.is-visible {
	display: block;
}

.lpx-registration__msg.is-error {
	color: #7a1f20;
	background-color: #fdecec;
	border-color: #f3c9c9;
}

.lpx-registration__msg.is-success {
	color: #14472b;
	background-color: #eaf7ef;
	border-color: #c6e6d3;
}

/* ------------------------------------------------------------------ */
/* Botón de envío                                                      */
/* ------------------------------------------------------------------ */

.lpx-registration__actions {
	padding-bottom: 0;
}

.lpx-registration__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	width: 100%;
	margin: 0;
	padding: var(--space-xs, 0.7rem) var(--space-m, 1rem);
	font-family: inherit;
	font-size: var(--text-s, 0.83rem);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.5px;
	color: var(--light, #fff);
	text-transform: uppercase;
	background-color: var(--dark, #000);
	border: 1px solid var(--dark-40, rgba(0, 0, 0, 0.4));
	border-radius: var(--radius-l, 20px);
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

.lpx-registration__submit:hover {
	background-color: #1c1c1c;
}

.lpx-registration__submit:focus-visible {
	outline: 2px solid var(--primary, #000);
	outline-offset: 3px;
}

.lpx-registration__submit[disabled] {
	opacity: 0.7;
	cursor: progress;
}

.lpx-registration__spinner {
	display: none;
	width: 1rem;
	height: 1rem;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: lpx-registration-spin 0.8s linear infinite;
}

.lpx-registration__form.is-sending .lpx-registration__spinner {
	display: inline-block;
}

@keyframes lpx-registration-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lpx-registration__spinner {
		animation-duration: 1.6s;
	}
}

/* ------------------------------------------------------------------ */
/* Móvil: la fila de fecha se mantiene en una sola línea               */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.lpx-registration__birthdate {
		gap: 0.375rem;
	}

	.lpx-registration__field select {
		padding-right: calc(var(--space-xs, 0.7rem) + 1.5rem);
		background-position: calc(100% - 0.5rem) 50%;
	}
}