/*!
 * Merser Campaign Manager — estilos del componente público de consulta.
 * Todos los selectores usan el prefijo .merser- para evitar conflictos con
 * el theme o Elementor. Mobile-first, luego se amplía con min-width.
 */

.merser-inline-card,
.merser-modal {
	--merser-blue: #0b3d91;
	--merser-blue-dark: #072a66;
	--merser-blue-light: #eaf0fb;
	--merser-green: #25d366;
	--merser-green-dark: #1da851;
	--merser-white: #ffffff;
	--merser-gray-900: #1f2430;
	--merser-gray-600: #5b6472;
	--merser-gray-200: #e4e8f0;
	--merser-radius: 14px;
	--merser-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	font-family: var(--merser-font);
	color: var(--merser-gray-900);
	box-sizing: border-box;
}

.merser-inline-card *,
.merser-modal * {
	box-sizing: border-box;
}

/* ---------- Tarjeta inline ---------- */

.merser-inline-card {
	background: var(--merser-white);
	border: 1px solid var(--merser-gray-200);
	border-radius: var(--merser-radius);
	padding: 24px;
	max-width: 420px;
	box-shadow: 0 10px 30px rgba(11, 61, 145, 0.08);
}

.merser-inline-card__title {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 700;
	color: var(--merser-blue-dark);
}

.merser-inline-card__subtitle {
	margin: 0 0 18px;
	font-size: 14px;
	color: var(--merser-gray-600);
	line-height: 1.4;
}

/* ---------- Formulario ---------- */

.merser-field {
	display: block;
	margin-bottom: 6px;
}

.merser-field__label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--merser-gray-900);
}

.merser-field__input {
	width: 100%;
	padding: 14px 16px;
	font-size: 16px;
	border: 1.5px solid var(--merser-gray-200);
	border-radius: 10px;
	background: var(--merser-blue-light);
	color: var(--merser-gray-900);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.merser-field__input:focus {
	outline: none;
	border-color: var(--merser-blue);
	box-shadow: 0 0 0 3px rgba(11, 61, 145, 0.15);
}

.merser-field__error {
	color: #c0392b;
	font-size: 13px;
	margin: 4px 0 12px;
}

.merser-form__note {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--merser-gray-600);
	margin: 14px 0 0;
}

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

.merser-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	padding: 14px 20px;
	border-radius: 10px;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.08s ease, filter 0.15s ease;
}

.merser-btn:active {
	transform: scale(0.98);
}

.merser-btn--block {
	width: 100%;
}

.merser-btn--primary {
	background: var(--merser-blue);
	color: var(--merser-white);
}

.merser-btn--primary:hover {
	filter: brightness(1.08);
}

.merser-btn--whatsapp {
	background: var(--merser-green);
	color: var(--merser-white);
	margin-top: 6px;
}

.merser-btn--whatsapp:hover {
	background: var(--merser-green-dark);
}

.merser-btn--link {
	background: transparent;
	color: var(--merser-blue);
	font-weight: 600;
	padding: 10px;
}

.merser-icon-whatsapp::before {
	content: "\260E";
}

.merser-icon-lock::before {
	content: "\1F512";
}

/* ---------- Overlay / Modal ---------- */

.merser-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.merser-overlay[hidden] {
	display: none;
}

.merser-overlay__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(7, 20, 46, 0.55);
	backdrop-filter: blur(2px);
}

.merser-modal {
	position: relative;
	background: var(--merser-white);
	width: 100%;
	max-height: 92vh;
	overflow-y: auto;
	border-radius: 20px 20px 0 0;
	padding: 28px 20px 24px;
	animation: merser-slide-up 0.22s ease-out;
}

@keyframes merser-slide-up {
	from { transform: translateY(24px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

.merser-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: var(--merser-gray-200);
	color: var(--merser-gray-900);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

/* ---------- Estado de carga ---------- */

.merser-loading {
	text-align: center;
	padding: 12px 4px 4px;
}

.merser-loading__spinner {
	width: 56px;
	height: 56px;
	margin: 0 auto 18px;
	border-radius: 50%;
	border: 4px solid var(--merser-blue-light);
	border-top-color: var(--merser-blue);
	animation: merser-spin 0.8s linear infinite;
}

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

.merser-loading__title {
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: 700;
	color: var(--merser-blue-dark);
}

.merser-loading__subtitle {
	margin: 0 0 18px;
	font-size: 14px;
	color: var(--merser-gray-600);
}

.merser-loading__steps {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	text-align: left;
	max-width: 280px;
	margin-left: auto;
	margin-right: auto;
}

.merser-loading__steps li {
	position: relative;
	padding: 8px 0 8px 30px;
	font-size: 14px;
	color: var(--merser-gray-600);
}

.merser-loading__steps li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var(--merser-gray-200);
}

.merser-loading__steps li.is-done {
	color: var(--merser-gray-900);
	font-weight: 600;
}

.merser-loading__steps li.is-done::before {
	background: var(--merser-blue);
	border-color: var(--merser-blue);
}

.merser-loading__footer {
	font-size: 12px;
	color: var(--merser-gray-600);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

/* ---------- Resultado ---------- */

.merser-result {
	text-align: center;
	padding: 8px 4px 4px;
}

.merser-result__icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: var(--merser-green);
	color: var(--merser-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
}

.merser-result__icon--neutral {
	background: var(--merser-gray-200);
	color: var(--merser-gray-600);
}

.merser-result__title {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 800;
	color: var(--merser-blue-dark);
}

.merser-result__text {
	margin: 0 0 6px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--merser-gray-900);
}

.merser-result__text--muted {
	color: var(--merser-gray-600);
	font-size: 13px;
}

.merser-result__amount-box {
	background: var(--merser-blue-light);
	border-radius: 12px;
	padding: 18px;
	margin: 16px 0 18px;
}

.merser-result__amount-label {
	display: block;
	font-size: 13px;
	color: var(--merser-gray-600);
	margin-bottom: 4px;
}

.merser-result__amount {
	display: block;
	font-size: 32px;
	font-weight: 800;
	color: var(--merser-blue-dark);
}

.merser-result__term {
	display: block;
	font-size: 14px;
	color: var(--merser-gray-900);
	margin-top: 4px;
}

.merser-result__disclaimer {
	display: block;
	font-size: 11px;
	color: var(--merser-gray-600);
	margin-top: 8px;
}

/* ---------- Desktop ---------- */

@media (min-width: 640px) {
	.merser-overlay {
		align-items: center;
	}

	.merser-modal {
		max-width: 440px;
		border-radius: var(--merser-radius);
		padding: 32px;
	}
}

/* ---------- Accesibilidad: foco visible ---------- */

.merser-btn:focus-visible,
.merser-field__input:focus-visible,
.merser-modal__close:focus-visible {
	outline: 3px solid var(--merser-blue);
	outline-offset: 2px;
}

/* ---------- Fase 3: desafío de identidad ---------- */

.merser-challenge {
	text-align: center;
	padding: 8px 4px 4px;
}

.merser-challenge__icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: var(--merser-blue-light);
	color: var(--merser-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
}

.merser-challenge__title {
	margin: 0 0 6px;
	font-size: 19px;
	font-weight: 700;
	color: var(--merser-blue-dark);
}

.merser-challenge__subtitle {
	margin: 0 0 18px;
	font-size: 14px;
	color: var(--merser-gray-600);
	line-height: 1.4;
}

.merser-challenge form {
	text-align: left;
}


/* Fase 4 — integración y accesibilidad */
body.merser-modal-open { overflow: hidden; }
.merser-modal { max-width: min(440px, calc(100vw - 24px)); width: 100%; min-width: 0; }
.merser-inline-card { width: 100%; max-width: 420px; }
.merser-btn { max-width: 100%; min-height: 48px; }
.merser-field__input { min-width: 0; }
.merser-modal__close { z-index: 2; }
.merser-state[hidden] { display: none !important; }
.merser-loading__steps li.is-done::after {
	content: "✓";
	position: absolute;
	left: 4px;
	top: 7px;
	color: var(--merser-white);
	font-size: 11px;
	font-weight: 800;
}
@media (max-width: 639px) {
	.merser-inline-card { max-width: 100%; padding: 20px; }
	.merser-modal {
		max-width: 100%;
		width: 100%;
		max-height: min(92vh, 760px);
		border-radius: 18px 18px 0 0;
		padding: 30px 18px 22px;
	}
	.merser-result__amount { font-size: 29px; }
}
@media (min-width: 640px) {
	.merser-modal { width: min(440px, calc(100vw - 48px)); }
}
@media (prefers-reduced-motion: reduce) {
	.merser-modal, .merser-loading__spinner { animation: none !important; }
	.merser-btn { transition: none; }
}

/* ---- Fase 5.7 ---- */
.merser-overlay__backdrop { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.merser-field__help { margin: 6px 0 12px; font-size: 13px; color: var(--merser-gray-600); }
.merser-loading__steps[hidden], .merser-result__term[hidden] { display: none !important; }
.merser-result__term { display: block; margin-top: 4px; font-weight: 600; color: var(--merser-gray-900); }
.merser-result--positive .merser-result__amount { font-size: clamp(30px, 8vw, 40px); }

/* ---- Fase 5.9 ---- */
.merser-field__hint { display: block; margin: 2px 0 8px; font-size: 13px; font-weight: 600; color: var(--merser-gray-900); }
.merser-btn[aria-disabled="true"], .merser-btn:disabled { opacity: .65; pointer-events: none; cursor: default; }