/* MA - Registro de Usuarios | formulario y campos — v1.5.1
   Todos los valores salen de variables --ma-ru-* que genera MA_RU_Styles
   (heredadas de Elementor o definidas en Ajustes de Estilos).

   Variables nuevas de esta versión (con fallback, no hace falta tocar PHP):
     --ma-ru-card-bg      fondo de la caja
     --ma-ru-card-pad     padding interno
     --ma-ru-card-radius  redondeo de la caja
     --ma-ru-card-shadow  sombra
     --ma-ru-label-color  color de las etiquetas
     --ma-ru-cols         columnas de las listas de opciones
*/

/* ---------------------------------------------------------------------
 * La caja
 * ------------------------------------------------------------------ */

.ma-ru-wrap {
	font-family: var(--ma-ru-font, inherit);
	font-size: var(--ma-ru-font-size, 15px);
	line-height: var(--ma-ru-line-height, 1.55);
	color: var(--ma-ru-text, #1f2933);
	max-width: var(--ma-ru-max-width, 560px);
	width: 100%;
	margin: 0 auto;

	background: var(--ma-ru-card-bg, var(--ma-ru-panel-bg, #fff));
	border: 1px solid var(--ma-ru-border, #e4e8ef);
	border-radius: var(--ma-ru-card-radius, 16px);
	padding: var(--ma-ru-card-pad, 30px 28px);
	box-shadow: var(--ma-ru-card-shadow, 0 1px 2px rgba(16, 24, 40, .04), 0 8px 28px -12px rgba(16, 24, 40, .12));
}

.ma-ru-wrap *,
.ma-ru-wrap *::before,
.ma-ru-wrap *::after {
	box-sizing: border-box;
}

.ma-ru-form {
	position: relative;
}

/* ---------------------------------------------------------------------
 * Bloques del formulario
 *
 * Desde 2.6.0 el registro es de una sola página: los pasos se retiraron.
 * Los bloques sólo separan visualmente los datos de cuenta de los del perfil.
 * ------------------------------------------------------------------ */

.ma-ru-bloque + .ma-ru-bloque {
	margin-top: 30px;
	padding-top: 26px;
	border-top: 1px solid var(--ma-ru-border, #e4e8ef);
}

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

.ma-ru-field {
	margin-bottom: var(--ma-ru-field-gap, 20px);
}

.ma-ru-row {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.ma-ru-row .ma-ru-field {
	flex: 1 1 220px;
}

/* Dentro de la caja va todo en una sola columna, como el modelo.
   El panel de miembros conserva las dos columnas.
   Para volver a dos columnas acá: borrá este bloque. */
.ma-ru-wrap .ma-ru-row {
	flex-direction: column;
	gap: 0;
}

.ma-ru-wrap .ma-ru-row .ma-ru-field {
	flex: 1 1 auto;
}

.ma-ru-field > label {
	display: block;
	font-size: calc(var(--ma-ru-label-size, 14px) * .93);
	font-weight: var(--ma-ru-label-weight, 600);
	color: var(--ma-ru-label-color, var(--ma-ru-accent-dark, #234e7d));
	margin-bottom: 7px;
	letter-spacing: .01em;
}

.ma-ru-req {
	color: var(--ma-ru-error, #c0392b);
	font-size: .9em;
	vertical-align: text-top;
}

/* ---------------------------------------------------------------------
 * Ayuda en burbuja (?)
 * ------------------------------------------------------------------ */

.ma-ru-tip {
	position: relative;
	display: inline-block;
	margin-left: 4px;
	vertical-align: middle;
	cursor: help;
	line-height: 1;
}

.ma-ru-tip__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid var(--ma-ru-muted, #8b95a5);
	color: var(--ma-ru-muted, #8b95a5);
	font-size: 11px;
	font-weight: 700;
	transition: border-color .16s ease, color .16s ease;
}

.ma-ru-tip:hover .ma-ru-tip__mark,
.ma-ru-tip:focus .ma-ru-tip__mark {
	border-color: var(--ma-ru-accent, #2b6cb0);
	color: var(--ma-ru-accent, #2b6cb0);
}

.ma-ru-tip__bubble {
	position: absolute;
	bottom: calc(100% + 9px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	z-index: 20;
	width: max-content;
	max-width: 260px;
	padding: 9px 12px;
	border-radius: var(--ma-ru-radius, 8px);
	background: var(--ma-ru-text, #1f2933);
	color: #fff;
	font-size: calc(var(--ma-ru-font-size, 15px) * .82);
	font-weight: 400;
	line-height: 1.45;
	text-align: left;
	white-space: normal;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

/* La flechita de la burbuja */
.ma-ru-tip__bubble::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: var(--ma-ru-text, #1f2933);
}

.ma-ru-tip:hover .ma-ru-tip__bubble,
.ma-ru-tip:focus .ma-ru-tip__bubble {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* Cerca del borde de la caja la burbuja se corre para no cortarse */
.ma-ru-field:first-child .ma-ru-tip__bubble {
	left: 0;
	transform: translateX(0) translateY(4px);
}

.ma-ru-field:first-child .ma-ru-tip:hover .ma-ru-tip__bubble,
.ma-ru-field:first-child .ma-ru-tip:focus .ma-ru-tip__bubble {
	transform: translateX(0) translateY(0);
}

.ma-ru-field:first-child .ma-ru-tip__bubble::after {
	left: 18px;
}

@media (max-width: 480px) {
	.ma-ru-tip__bubble {
		max-width: 200px;
	}
}

/* ---------------------------------------------------------------------
 * Captcha
 * ------------------------------------------------------------------ */

.ma-ru-field--captcha {
	margin-top: 22px;
	min-height: 66px;
}

.ma-ru-field--captcha .cf-turnstile {
	display: flex;
	justify-content: center;
}

/* ---------------------------------------------------------------------
 * Inputs
 * ------------------------------------------------------------------ */

.ma-ru-wrap .ma-ru-input,
.ma-ru-panel .ma-ru-input {
	width: 100%;
	padding: var(--ma-ru-input-pad-y, 12px) var(--ma-ru-input-pad-x, 14px);
	border: 1px solid var(--ma-ru-border, #e4e8ef);
	border-radius: var(--ma-ru-radius, 8px);
	font-family: inherit;
	font-size: var(--ma-ru-font-size, 15px);
	line-height: var(--ma-ru-line-height, 1.55);
	background: var(--ma-ru-input-bg, #fff);
	color: inherit;
	box-sizing: border-box;
	transition: border-color .16s ease, box-shadow .16s ease;
}

.ma-ru-wrap .ma-ru-input::placeholder,
.ma-ru-panel .ma-ru-input::placeholder {
	color: var(--ma-ru-muted, #8b95a5);
	opacity: .75;
}

.ma-ru-wrap .ma-ru-input:hover,
.ma-ru-panel .ma-ru-input:hover {
	border-color: color-mix(in srgb, var(--ma-ru-accent, #2b6cb0) 35%, var(--ma-ru-border, #e4e8ef));
}

.ma-ru-wrap .ma-ru-input:focus,
.ma-ru-panel .ma-ru-input:focus {
	outline: none;
	border-color: var(--ma-ru-accent, #2b6cb0);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ma-ru-accent, #2b6cb0) 15%, transparent);
}

.ma-ru-wrap .ma-ru-input.has-error,
.ma-ru-panel .ma-ru-input.has-error {
	border-color: var(--ma-ru-error, #c0392b);
}

.ma-ru-wrap .ma-ru-input.has-error:focus,
.ma-ru-panel .ma-ru-input.has-error:focus {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ma-ru-error, #c0392b) 15%, transparent);
}

.ma-ru-wrap .ma-ru-input[disabled],
.ma-ru-panel .ma-ru-input[disabled] {
	opacity: .65;
	cursor: not-allowed;
}

.ma-ru-wrap select.ma-ru-input,
.ma-ru-panel select.ma-ru-input {
	appearance: none;
	-webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 38px;
	cursor: pointer;
}

.ma-ru-wrap textarea.ma-ru-input,
.ma-ru-panel textarea.ma-ru-input {
	resize: vertical;
	min-height: 96px;
}

.ma-ru-help {
	display: block;
	font-size: calc(var(--ma-ru-font-size, 15px) * .82);
	color: var(--ma-ru-muted, #8b95a5);
	margin-top: 6px;
	line-height: 1.45;
}

.ma-ru-error {
	display: none;
	font-size: calc(var(--ma-ru-font-size, 15px) * .85);
	color: var(--ma-ru-error, #c0392b);
	margin-top: 6px;
}

.ma-ru-error.is-visible {
	display: block;
}

/* ---------------------------------------------------------------------
 * Opciones (radio y checkbox) — dos columnas
 * ------------------------------------------------------------------ */

.ma-ru-options {
	display: grid;
	grid-template-columns: repeat(var(--ma-ru-cols, 2), minmax(0, 1fr));
	gap: 11px 18px;
	margin-top: 2px;
}

.ma-ru-option {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: calc(var(--ma-ru-font-size, 15px) * .96);
	color: var(--ma-ru-muted, #6b7280);
	cursor: pointer;
	margin: 0;
	transition: color .16s ease;
}

.ma-ru-option:hover {
	color: var(--ma-ru-text, #1f2933);
}

.ma-ru-option input {
	margin: 0;
	width: 17px;
	height: 17px;
	flex: 0 0 17px;
	accent-color: var(--ma-ru-accent, #2b6cb0);
	cursor: pointer;
}

.ma-ru-option input:focus-visible {
	outline: 2px solid var(--ma-ru-accent, #2b6cb0);
	outline-offset: 2px;
}

/* Cuando hay una sola opción larga conviene ocupar el ancho completo. */
.ma-ru-options--full {
	--ma-ru-cols: 1;
}

/* ---------------------------------------------------------------------
 * Contraseña
 * ------------------------------------------------------------------ */

.ma-ru-pass-wrap {
	position: relative;
}

.ma-ru-toggle-pass {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	padding: 6px;
	color: var(--ma-ru-muted, #8b95a5);
	opacity: .7;
	transition: opacity .16s ease;
}

.ma-ru-toggle-pass:hover {
	opacity: 1;
}

/* ---------------------------------------------------------------------
 * Términos y condiciones
 * ------------------------------------------------------------------ */

.ma-ru-field--terms {
	margin-top: 26px;
	padding: 14px 16px;
	border: 1px solid var(--ma-ru-border, #e4e8ef);
	border-radius: var(--ma-ru-radius, 8px);
	background: color-mix(in srgb, var(--ma-ru-accent, #2b6cb0) 4%, transparent);
}

.ma-ru-field--terms .ma-ru-option {
	align-items: flex-start;
	color: var(--ma-ru-text, #1f2933);
}

.ma-ru-field--terms .ma-ru-option input {
	margin-top: 2px;
}

.ma-ru-field--terms a {
	color: var(--ma-ru-accent, #2b6cb0);
	font-weight: 600;
}

/* ---------------------------------------------------------------------
 * Botones
 * ------------------------------------------------------------------ */

.ma-ru-actions {
	display: flex;
	gap: 12px;
	margin-top: 28px;
}

/* Dentro de la caja: divisor arriba y botón principal a todo el ancho. */
.ma-ru-wrap .ma-ru-actions {
	padding-top: 22px;
	border-top: 1px solid var(--ma-ru-border, #e4e8ef);
	justify-content: center;
}

/*
 * Botón de acción destacada.
 *
 * Los colores salen de las variables --ma-ru-cta-* que se configuran en
 * Ajustes de Estilos. El refuerzo del plugin base repite estas reglas con
 * prioridad sobre el tema; esto es lo que se ve si el refuerzo está apagado.
 */
.ma-ru-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--ma-ru-cta-bg, #12a05e);
	border: 1px solid var(--ma-ru-cta-bg, #12a05e);
	color: var(--ma-ru-cta-text, #fff);
	border-radius: var(--ma-ru-radius, 8px);
	padding: var(--ma-ru-btn-pad-y, 13px) var(--ma-ru-btn-pad-x, 26px);
	font-family: inherit;
	font-size: var(--ma-ru-font-size, 15px);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.ma-ru-cta:hover {
	background-color: var(--ma-ru-cta-hover, #0d7a47);
	border-color: var(--ma-ru-cta-hover-border, var(--ma-ru-cta-hover, #0d7a47));
	color: var(--ma-ru-cta-hover-text, var(--ma-ru-cta-text, #fff));
}

.ma-ru-cta[disabled] {
	opacity: .6;
	cursor: not-allowed;
}

.ma-ru-wrap .ma-ru-actions .ma-ru-btn {
	flex: 1 1 auto;
}

.ma-ru-wrap .ma-ru-actions .ma-ru-btn--ghost {
	flex: 0 0 auto;
}

.ma-ru-btn {
	background: var(--ma-ru-accent, #2b6cb0);
	color: var(--ma-ru-btn-text, #fff);
	border: 1px solid var(--ma-ru-accent, #2b6cb0);
	border-radius: var(--ma-ru-radius, 8px);
	padding: var(--ma-ru-btn-pad-y, 13px) var(--ma-ru-btn-pad-x, 26px);
	font-family: inherit;
	font-size: var(--ma-ru-font-size, 15px);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease, transform .1s ease;
}

.ma-ru-btn:hover {
	background: var(--ma-ru-accent-dark, #234e7d);
	border-color: var(--ma-ru-accent-dark, #234e7d);
}

.ma-ru-btn:active {
	transform: translateY(1px);
}

.ma-ru-btn:focus-visible {
	outline: 2px solid var(--ma-ru-accent, #2b6cb0);
	outline-offset: 3px;
}

.ma-ru-btn[disabled] {
	opacity: .6;
	cursor: not-allowed;
}

.ma-ru-btn--ghost {
	flex: 0 0 auto;
	background: transparent;
	color: var(--ma-ru-accent, #2b6cb0);
	border-color: var(--ma-ru-border, #e4e8ef);
}

.ma-ru-btn--ghost:hover {
	background: color-mix(in srgb, var(--ma-ru-accent, #2b6cb0) 8%, transparent);
	color: var(--ma-ru-accent, #2b6cb0);
	border-color: var(--ma-ru-accent, #2b6cb0);
}

/* ---------------------------------------------------------------------
 * Mensajes
 * ------------------------------------------------------------------ */

.ma-ru-global-error,
.ma-ru-success,
.ma-ru-notice {
	padding: 13px 15px;
	border-radius: var(--ma-ru-radius, 8px);
	font-size: calc(var(--ma-ru-font-size, 15px) * .92);
	line-height: 1.5;
	margin-bottom: 18px;
}

.ma-ru-global-error {
	background: color-mix(in srgb, var(--ma-ru-error, #c0392b) 9%, transparent);
	color: var(--ma-ru-error, #c0392b);
	border: 1px solid color-mix(in srgb, var(--ma-ru-error, #c0392b) 28%, transparent);
}

.ma-ru-success {
	background: color-mix(in srgb, var(--ma-ru-success, #1e6f50) 9%, transparent);
	color: var(--ma-ru-success, #1e6f50);
	border: 1px solid color-mix(in srgb, var(--ma-ru-success, #1e6f50) 28%, transparent);
}

/* Confirmación que ocupa el lugar del formulario de recuperación. */
.ma-ru-lost-done .ma-ru-lost-done__texto {
	margin-bottom: 0;
}

.ma-ru-lost-done .ma-ru-actions {
	margin-top: 18px;
}

.ma-ru-notice--info {
	background: color-mix(in srgb, var(--ma-ru-accent, #2b6cb0) 7%, transparent);
	color: var(--ma-ru-accent, #2b6cb0);
	border: 1px solid color-mix(in srgb, var(--ma-ru-accent, #2b6cb0) 22%, transparent);
}

/* ---------------------------------------------------------------------
 * Honeypot
 * ------------------------------------------------------------------ */

.ma-ru-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------------------------------------------------------------------
 * Login
 * ------------------------------------------------------------------ */

.ma-ru-login {
	max-width: 440px;
}

.ma-ru-form-title {
	margin: 0 0 20px;
	font-size: calc(var(--ma-ru-font-size, 15px) * 1.4);
	font-weight: 700;
	line-height: 1.25;
	color: var(--ma-ru-label-color, var(--ma-ru-accent-dark, #234e7d));
}

.ma-ru-login-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: -4px;
}

.ma-ru-link {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	color: var(--ma-ru-accent, #2b6cb0);
	font-family: inherit;
	font-size: calc(var(--ma-ru-font-size, 15px) * .88);
	text-decoration: underline;
	cursor: pointer;
}

.ma-ru-link:hover {
	color: var(--ma-ru-accent-dark, #234e7d);
}

.ma-ru-alt-link {
	margin: 20px 0 0;
	font-size: calc(var(--ma-ru-font-size, 15px) * .9);
	color: var(--ma-ru-muted, #8b95a5);
	text-align: center;
}

.ma-ru-alt-link a {
	color: var(--ma-ru-accent, #2b6cb0);
	font-weight: 600;
}

/* ---------------------------------------------------------------------
 * Aviso de privacidad (nombre y apellido no públicos)
 * ------------------------------------------------------------------ */

.ma-ru-privado {
	margin: -8px 0 20px;
	padding: 9px 13px;
	border-left: 3px solid var(--ma-ru-accent, #2b6cb0);
	background: color-mix(in srgb, var(--ma-ru-accent, #2b6cb0) 5%, transparent);
	border-radius: 0 var(--ma-ru-radius, 8px) var(--ma-ru-radius, 8px) 0;
	font-size: calc(var(--ma-ru-font-size, 15px) * .84);
	color: var(--ma-ru-muted, #6b7280);
	line-height: 1.5;
}

/* ---------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------ */

@media (max-width: 560px) {
	.ma-ru-wrap {
		padding: var(--ma-ru-card-pad-mobile, 22px 18px);
		border-radius: var(--ma-ru-card-radius-mobile, 12px);
	}
	.ma-ru-options {
		--ma-ru-cols: 1;
		gap: 10px;
	}
	.ma-ru-actions {
		flex-direction: column-reverse;
	}
	.ma-ru-btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ma-ru-wrap * {
		transition: none !important;
	}
}

/* ---------------------------------------------------------------------
 * Aviso de perfil incompleto
 * ------------------------------------------------------------------ */

body.ma-ru-modal-abierto {
	overflow: hidden;
}

.ma-ru-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(16, 24, 40, .55);
}

.ma-ru-modal[hidden] {
	display: none;
}

.ma-ru-modal__caja {
	position: relative;
	max-width: 480px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	text-align: center;
}

.ma-ru-modal__cerrar {
	position: absolute;
	top: 12px;
	right: 14px;
	width: 32px;
	height: 32px;
	border: none;
	background: none;
	color: var(--ma-ru-muted, #8b95a5);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.ma-ru-modal__cerrar:hover {
	color: var(--ma-ru-text, #1f2933);
}

.ma-ru-modal__titulo {
	margin: 0 0 12px;
	font-size: calc(var(--ma-ru-font-size, 15px) * 1.35);
	color: var(--ma-ru-label-color, var(--ma-ru-accent-dark, #234e7d));
}

.ma-ru-modal__texto {
	margin: 0 0 14px;
	color: var(--ma-ru-text, #1f2933);
	line-height: 1.6;
}

.ma-ru-modal__faltan {
	margin: 0 0 22px;
	padding: 10px 14px;
	border-radius: var(--ma-ru-radius, 8px);
	background: color-mix(in srgb, var(--ma-ru-accent, #2b6cb0) 6%, transparent);
	font-size: calc(var(--ma-ru-font-size, 15px) * .86);
	color: var(--ma-ru-muted, #6b7280);
	line-height: 1.5;
}

.ma-ru-modal__acciones {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

.ma-ru-modal__acciones .ma-ru-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 480px) {
	.ma-ru-modal__acciones {
		flex-direction: column-reverse;
	}
	.ma-ru-modal__acciones > * {
		width: 100%;
	}
}

/* Icono al lado de la etiqueta de un campo */
.ma-ru-label-icon {
	font-size: 16px;
	width: 16px;
	height: 16px;
	line-height: 1;
	vertical-align: -3px;
	color: var(--ma-ru-muted, #8b95a5);
}

/* El botón de alta va centrado y con un ancho cómodo, no a todo el formulario. */
.ma-ru-wrap .ma-ru-actions .ma-ru-submit {
	min-width: 240px;
}

@media (max-width: 480px) {
	.ma-ru-wrap .ma-ru-actions .ma-ru-submit {
		min-width: 0;
		width: 100%;
	}
}

/* Variante fantasma del botón de acción: mismo color, sin relleno.
   El hover es idéntico al del botón lleno, así el par se ve como un par. */
.ma-ru-cta--ghost {
	background-color: transparent;
	border-color: var(--ma-ru-cta-bg, #12a05e);
	color: var(--ma-ru-cta-bg, #12a05e);
}

.ma-ru-cta--ghost:hover {
	background-color: var(--ma-ru-cta-hover, #0d7a47);
	border-color: var(--ma-ru-cta-hover-border, var(--ma-ru-cta-hover, #0d7a47));
	color: var(--ma-ru-cta-hover-text, #fff);
}