/* ============================================================
   MexiCasas — contacto.css
   Modal de contacto interno de la ficha (single-propiedad.php).
   <dialog> nativo, mismo lenguaje visual que #mxc-reportar.
   Solo índigo, controles 52/42px, piso 13px. Consume tokens.css.
   ============================================================ */

.mxc-contacto-modal {
	width: min(480px, calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	padding: 0;
	border: 1px solid var(--mxc-line);
	border-radius: var(--mxc-radius-lg);
	box-shadow: var(--mxc-shadow-pop);
	background: var(--mxc-bone);
	color: var(--mxc-ink);
	overflow: auto;
}
.mxc-contacto-modal::backdrop {
	background: var(--mxc-overlay);
}
.mxc-contacto-modal__cuerpo,
.mxc-contacto-modal__listo {
	padding: 24px;
}

.mxc-contacto-modal__cabecera {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}
.mxc-contacto-modal__titulo {
	margin: 0;
	font-family: var(--mxc-font-display);
	font-size: var(--mxc-text-xl);
	font-weight: 700;
	letter-spacing: -0.01em;
}
.mxc-contacto-modal__cerrar {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: -6px -6px 0 0;
	padding: 0;
	border: 0;
	border-radius: var(--mxc-radius);
	background: transparent;
	color: var(--mxc-ink-3);
	cursor: pointer;
}
.mxc-contacto-modal__cerrar svg { width: 20px; height: 20px; }
.mxc-contacto-modal__cerrar:hover { background: var(--mxc-sand); color: var(--mxc-ink); }
.mxc-contacto-modal__cerrar:focus-visible {
	outline: 2px solid var(--mxc-indigo);
	outline-offset: 2px;
}

.mxc-contacto-modal__intro {
	margin: 8px 0 18px;
	font-size: var(--mxc-text-sm);
	color: var(--mxc-ink-2);
}

/* Los labels dentro del form llevan su propio espaciado superior salvo el
   primero de cada bloque, para respirar entre campos. */
.mxc-contacto-modal__form .mxc-field-label {
	margin-top: 16px;
}
.mxc-contacto-modal__identidad .mxc-field-label:first-child,
.mxc-contacto-modal__form > .mxc-field-label:first-of-type {
	margin-top: 0;
}

.mxc-contacto-modal__identidad {
	margin-bottom: 8px;
}
.mxc-contacto-modal__cuenta {
	margin: 12px 0 0;
	font-size: var(--mxc-text-xs);
	color: var(--mxc-ink-3);
}
.mxc-contacto-modal__cuenta a {
	color: var(--mxc-indigo-deep);
	font-weight: 600;
	text-decoration: none;
}
.mxc-contacto-modal__cuenta a:hover { text-decoration: underline; }

/* Segmentado a lo ancho dentro del modal. */
.mxc-contacto-modal__intencion {
	display: flex;
	width: 100%;
	box-sizing: border-box;
}
.mxc-contacto-modal__intencion label {
	flex: 1;
}
.mxc-contacto-modal__intencion span {
	justify-content: center;
	width: 100%;
}

.mxc-contacto-modal__mensaje {
	min-height: auto;
	resize: vertical;
}

/* Honeypot: invisible pero presente en el DOM. */
.mxc-contacto-modal__trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mxc-contacto-modal__aviso { margin-top: 16px; }

.mxc-contacto-modal__pie {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 22px;
}

.mxc-contacto-modal__listo { text-align: center; }
.mxc-contacto-modal__listo-icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 8px auto 16px;
	border-radius: 50%;
	background: var(--mxc-indigo-soft);
	color: var(--mxc-indigo-deep);
}
.mxc-contacto-modal__listo-icono svg { width: 26px; height: 26px; }
.mxc-contacto-modal__listo-texto {
	margin: 0 0 22px;
	font-size: var(--mxc-text-base);
	color: var(--mxc-ink);
}
.mxc-contacto-modal__listo-pie {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}