/* MiRed Formulario de Contacto — diseño fiel a la marca. */

.mired-fc {
	--mfc-red: #e00034;
	--mfc-blue: #00aef0;
	--mfc-ink: #161616;
	--mfc-muted: #adb0b0;
	--mfc-border: #e7e8f2;
	--mfc-field-bg: #ffffff;
	font-family: inherit;
	color: var(--mfc-ink);
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
	overflow-wrap: break-word;
}

.mired-fc *,
.mired-fc *::before,
.mired-fc *::after {
	box-sizing: border-box;
}

.mired-fc-form {
	width: 100% !important;
	max-width: 100% !important;
}

.mired-fc-heading {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 1.25rem;
	color: var(--mfc-ink);
}

/* ── Pestañas de motivo ────────────────────────────────────────────── */
.mired-fc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	align-items: center;
	margin-bottom: 26px;
}

/* Padding uniforme en todas para que no salten de tamaño al activarse;
   las inactivas van sin fondo ni redondeo (solo texto) hasta seleccionarse. */
.mired-fc-tab {
	border: none !important;
	background: transparent !important;
	background-color: transparent !important;
	color: var(--mfc-ink) !important;
	font-weight: 700;
	font-size: 14px;
	padding: 8px 12px !important;
	border-radius: 0 !important;
	cursor: pointer;
	line-height: 1.2;
	font-family: inherit;
	box-shadow: none !important;
	transition: background-color 0.15s ease, color 0.15s ease, border-radius 0.15s ease;
}

.mired-fc-tab.is-active {
	background-color: var(--mfc-red) !important;
	background: var(--mfc-red) !important;
	color: #fff !important;
	border-radius: 8px !important;
	border: none !important;
}

.mired-fc-tab:focus-visible {
	outline: 2px solid var(--mfc-blue) !important;
	outline-offset: 3px;
}

/* ── Filas y campos ────────────────────────────────────────────────── */
/* auto-fit + minmax: las columnas colapsan según el ESPACIO disponible
   (no solo el viewport), así no se rompe dentro de columnas estrechas de
   Elementor. El min() evita desbordes en contenedores muy angostos. */
.mired-fc-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 1.25rem 20px;
	margin-bottom: 26px;
}

/* Provincia es un único campo: a media columna cuando hay sitio, completo
   cuando el contenedor es angosto. */
.mired-fc-row--province {
	display: block;
}

.mired-fc-row--province .mired-fc-field {
	width: 100%;
}

/* En pantallas con sitio, Provincia ocupa media columna (como en el diseño). */
@media (min-width: 600px) {
	.mired-fc-row--province .mired-fc-field {
		width: calc(50% - 10px);
	}
}

.mired-fc-field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.mired-fc-field--full {
	margin-bottom: 26px;
}

.mired-fc-field > label {
	font-weight: 700;
	font-size: 16px;
	margin-bottom: 0.4rem;
	color: var(--mfc-ink);
}

/* Sufijo aclaratorio de la etiqueta, p. ej. "(solo subagentes)". */
.mired-fc-hint {
	font-weight: 400;
	color: var(--mfc-muted);
}

.mired-fc-field input,
.mired-fc-field textarea {
	width: 100% !important;
	box-sizing: border-box !important;
	background: var(--mfc-field-bg) !important;
	border: 1.5px solid var(--mfc-border) !important;
	border-radius: 6px !important;
	padding: 0.7rem 1rem !important;
	font-size: 16px !important;
	font-family: inherit;
	color: var(--mfc-ink) !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mired-fc-field input {
	height: 45px;
}

.mired-fc-field textarea {
	resize: vertical;
	min-height: 138px;
}

.mired-fc-field input::placeholder,
.mired-fc-field textarea::placeholder {
	color: var(--mfc-muted);
}

.mired-fc-field input:focus,
.mired-fc-field textarea:focus {
	outline: none;
	border-color: var(--mfc-blue);
	box-shadow: 0 0 0 3px rgba(0, 174, 240, 0.15);
}

/* ── Estado de error ───────────────────────────────────────────────── */
.mired-fc-error {
	display: none;
	color: var(--mfc-red);
	font-size: 0.8rem;
	margin-top: 0.35rem;
}

.mired-fc-field.has-error input,
.mired-fc-field.has-error textarea,
.mired-fc-consent.has-error input {
	border-color: var(--mfc-red);
}

.mired-fc-field.has-error .mired-fc-error,
.mired-fc-consent.has-error .mired-fc-error {
	display: block;
}

/* ── Consentimiento ────────────────────────────────────────────────── */
.mired-fc-consent {
	margin-bottom: 26px;
}

.mired-fc-consent label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 400;
	font-size: 14px;
	color: var(--mfc-ink);
	cursor: pointer;
	line-height: 1.4;
	margin-bottom: 0;
}

.mired-fc-consent input[type="checkbox"] {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 0;
	border-radius: 5px;
	accent-color: var(--mfc-blue);
	cursor: pointer;
}

.mired-fc-privacy-link {
	color: var(--mfc-blue) !important;
	font-weight: 600;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
	transition: opacity 0.15s ease;
}

.mired-fc-privacy-link:hover {
	opacity: 0.75;
}
.mired-fc-consent.has-error input[type="checkbox"] {
	outline: 2px solid var(--mfc-red);
	outline-offset: 2px;
}
/* ── Modal de éxito ────────────────────────────────────────────────── */
.mired-fc-dialog {
	width: min(92vw, 440px);
	margin: auto;
	padding: 40px 32px 32px;
	border: 0;
	border-radius: 20px;
	background: #fff;
	color: var(--mfc-ink);
	text-align: center;
	box-shadow: 0 30px 80px rgba(22, 22, 22, 0.28);
	font-family: inherit;
}

.mired-fc-dialog[open] {
	animation: mfc-pop 0.28s cubic-bezier(0.2, 0.8, 0.3, 1.2);
}

.mired-fc-dialog::backdrop {
	background: rgba(22, 22, 22, 0.5);
	backdrop-filter: blur(3px);
	animation: mfc-fade 0.2s ease;
}

@keyframes mfc-pop {
	from { opacity: 0; transform: translateY(12px) scale(0.96); }
	to   { opacity: 1; transform: none; }
}

@keyframes mfc-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.mired-fc-dialog__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin-bottom: 20px;
	border-radius: 50%;
	background: rgba(0, 174, 240, 0.12);
	color: var(--mfc-blue);
	box-shadow: 0 0 0 10px rgba(0, 174, 240, 0.06);
}

.mired-fc-dialog__title {
	margin: 0 0 12px !important;
	padding: 0 !important;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--mfc-ink);
}

.mired-fc-dialog__text {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 1rem;
	line-height: 1.55;
	color: #5b5f66;
}

.mired-fc-dialog form {
	margin: 32px 0 0 !important;
}

.mired-fc-dialog:focus {
	outline: none;
}

.mired-fc-dialog__close {
	justify-content: center !important;
	width: 100% !important;
}
/* ── Botón enviar ──────────────────────────────────────────────────── */
.mired-fc-submit {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	background-color: var(--mfc-blue) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 10px 24px !important;
	min-height: 45px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	font-family: inherit;
	cursor: pointer !important;
	transition: filter 0.15s ease, opacity 0.15s ease;
}

.mired-fc-submit:hover {
	filter: brightness(0.95);
}

.mired-fc-submit:focus-visible {
	outline: 2px solid var(--mfc-ink);
	outline-offset: 3px;
}

.mired-fc-submit[disabled] {
	opacity: 0.6;
	cursor: progress;
}

/* ── Feedback global (errores; el éxito va en el modal) ─────────────── */
.mired-fc-feedback {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 1rem 0 0;
	padding: 12px 14px;
	border-radius: 8px;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.4;
}

.mired-fc-feedback[hidden] {
	display: none;
}

.mired-fc-feedback svg {
	flex: 0 0 auto;
	margin-top: 1px;
}

.mired-fc-feedback.is-success {
	color: #1a7f37;
	background: #e9f7ee;
}

.mired-fc-feedback.is-error {
	color: #b3002a;
	background: #fdeef1;
}

/* Botón mientras envía. */
.mired-fc-submit.is-sending svg {
	display: none;
}

.mired-fc-submit.is-sending::after {
	content: "";
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: mfc-spin 0.7s linear infinite;
}

@keyframes mfc-spin {
	to { transform: rotate(360deg); }
}
.mired-fc-form {
	position: relative;
}

/* ── Honeypot oculto ───────────────────────────────────────────────── */
/* Patrón visually-hidden: invisible para personas pero presente para bots,
   sin desplazar contenido ni provocar scroll horizontal. */
.mired-fc-hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ── Provincia oculta para bancos ──────────────────────────────────── */
.mired-fc-row--province.is-hidden {
	display: none;
}

/* ── Responsive ────────────────────────────────────────────────────── */
/* Las filas colapsan solas por auto-fit; aquí afinamos pestañas, botón y
   espaciados en pantallas pequeñas para que nada se desborde. */
@media (max-width: 767px) {
	.mired-fc-tabs {
		gap: 0.6rem 1rem;
	}

	.mired-fc-tab {
		font-size: 0.9rem;
		padding: 6px 10px !important;
	}

	.mired-fc-tab.is-active {
		padding: 6px 10px !important;
	}

	.mired-fc-submit {
		width: 100%;
		justify-content: center;
	}

	.mired-fc-row--province .mired-fc-field {
		max-width: 100%;
	}
}

/* Pantallas muy estrechas: cada pestaña ocupa toda la fila para no cortar
   el texto largo de los motivos. */
@media (max-width: 420px) {
	.mired-fc-tabs {
		flex-direction: column;
		align-items: stretch;
	}

	.mired-fc-tab {
		text-align: left;
	}
}