/**
 * Oleadas · frontend.
 *
 * El formulario de la lista de espera usa las clases del registro del base
 * (.ma-ru-field, .ma-ru-input, .ma-ru-cta, .ma-ru-success), así hereda la
 * marca y el refuerzo sin repetir nada. Acá va sólo lo propio.
 */

.ma-ru-ole__mensaje {
	margin: 0 0 22px;
	padding: 16px 18px;
	border-left: 4px solid var(--ma-ru-ole-acento, var(--ma-ru-accent, #2b6cb0));
	border-radius: var(--ma-ru-radius, 8px);
	background: var(--ma-ru-ole-mensaje-bg, color-mix(in srgb, var(--ma-ru-accent, #2b6cb0) 8%, transparent));
	color: var(--ma-ru-text, #1f2933);
	font-size: calc(var(--ma-ru-font-size, 15px) * 1.02);
	line-height: 1.55;
}

.ma-ru-ole .ma-ru-actions {
	justify-content: center;
	margin-top: 18px;
}

.ma-ru-ole .ma-ru-submit {
	min-width: 240px;
}

@media (max-width: 480px) {
	.ma-ru-ole .ma-ru-submit {
		width: 100%;
	}
}

.ma-ru-ole__aviso {
	background: var(--ma-ru-ole-mensaje-bg, color-mix(in srgb, var(--ma-ru-accent, #2b6cb0) 8%, transparent));
	border: 1px solid color-mix(in srgb, var(--ma-ru-accent, #2b6cb0) 25%, transparent);
	color: var(--ma-ru-text, #1f2933);
}

.ma-ru-ole__cupos {
	margin: 0 0 18px;
	font-weight: 600;
	text-align: center;
	color: var(--ma-ru-ole-acento, var(--ma-ru-accent, #2b6cb0));
}

.ma-ru-wrap .ma-ru-input[readonly] {
	background-color: color-mix(in srgb, var(--ma-ru-border, #e4e8ef) 35%, transparent);
	cursor: default;
}

/* Con la cuenta ya creada, el aviso de la reserva sobra. */
.ma-ru-form:has(.ma-ru-success:not([hidden])) .ma-ru-ole__aviso,
.ma-ru-form:has(.ma-ru-success:not([hidden])) .ma-ru-ole__cupos {
	display: none;
}