/* ============================================================
   MexiCasas — Autocompletado de ubicación (combobox).
   Consume solo tokens. UI índigo, cero verde.
   ============================================================ */

/* El recuadro del campo pasa a ser el ancla posicional del desplegable. */
.mxc-ac-anclaje {
	position: relative;
}

.mxc-ac__lista {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 40;
	margin: 0;
	padding: 6px;
	list-style: none;
	max-height: 340px;
	overflow-y: auto;
	background: var(--mxc-bone);
	border: 1px solid var(--mxc-line);
	border-radius: var(--mxc-radius);
	box-shadow: var(--mxc-shadow-pop);
	overscroll-behavior: contain;
}

.mxc-ac__opcion {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
	border-radius: var(--mxc-radius-sm);
	cursor: pointer;
	line-height: 1.3;
}

.mxc-ac__opcion:hover,
.mxc-ac__opcion.is-activa {
	background: var(--mxc-indigo-soft);
}

.mxc-ac__nombre {
	font-size: var(--mxc-text-base);
	font-weight: 600;
	color: var(--mxc-ink);
}

.mxc-ac__match {
	background: transparent;
	color: var(--mxc-indigo-deep);
	font-weight: 700;
}

.mxc-ac__ctx {
	font-size: var(--mxc-text-xs);
	color: var(--mxc-ink-3);
}

.mxc-ac__opcion.is-activa .mxc-ac__ctx,
.mxc-ac__opcion:hover .mxc-ac__ctx {
	color: var(--mxc-ink-2);
}