/* ============================================================
   MexiCasas — favoritos.css
   Botón corazón (card + ficha), contador del header y página
   /favoritos/. Consume SOLO variables de tokens.css. Sin !important.
   La UI es índigo: activo = corazón índigo relleno.
   ============================================================ */

/* ---------- Botón corazón (base: redondo, bone, sombra) ---------- */

.mxc-fav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--mxc-line);
	border-radius: 999px;
	background: var(--mxc-bone);
	color: var(--mxc-ink-2);
	box-shadow: var(--mxc-shadow-card);
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease, transform 0.12s ease, background-color 0.15s ease;
}
.mxc-fav svg {
	width: 20px;
	height: 20px;
	fill: none;
	transition: fill 0.15s ease, stroke 0.15s ease;
}
.mxc-fav:hover {
	color: var(--mxc-indigo);
	border-color: var(--mxc-line-strong);
}
.mxc-fav:active { transform: scale(0.92); }
.mxc-fav:focus-visible {
	outline: 2px solid var(--mxc-indigo);
	outline-offset: 2px;
}
.mxc-fav[disabled] { opacity: 0.6; cursor: default; }

/* Activo: corazón índigo relleno. */
.mxc-fav--activo {
	color: var(--mxc-indigo);
	border-color: var(--mxc-indigo-soft);
}
.mxc-fav--activo svg {
	fill: var(--mxc-indigo);
	stroke: var(--mxc-indigo);
}

/* ---------- En la card: esquina superior derecha de la media ---------- */

.mxc-card__media .mxc-fav--card {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
}

/* ---------- En la ficha: sobre la foto de portada ---------- */

.mxc-single .mxc-galeria__featured { position: relative; }
.mxc-single .mxc-galeria__featured .mxc-fav--ficha {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	width: 46px;
	height: 46px;
	box-shadow: var(--mxc-shadow-pop);
}
.mxc-single .mxc-galeria__featured .mxc-fav--ficha svg { width: 22px; height: 22px; }

/* ---------- Contador en el header ---------- */

.mxc-fav-contador {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: var(--mxc-control-alto-sm);
	padding-inline: 12px;
	border-radius: var(--mxc-radius);
	color: var(--mxc-ink);
	text-decoration: none;
	font-size: var(--mxc-text-xs);
	font-weight: 600;
	transition: color 0.15s ease, background-color 0.15s ease;
}
.mxc-fav-contador svg { width: 18px; height: 18px; fill: none; color: var(--mxc-indigo); }
.mxc-fav-contador:hover { background: var(--mxc-indigo-soft); color: var(--mxc-indigo-deep); }
.mxc-fav-contador:focus-visible {
	outline: 2px solid var(--mxc-indigo);
	outline-offset: 2px;
}
.mxc-fav-contador__n {
	min-width: 18px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 520px) {
	.mxc-fav-contador__n { display: none; }
	.mxc-fav-contador { padding-inline: 10px; }
}

/* ---------- Página /favoritos/ ---------- */

.mxc-favoritos { padding-block: 40px 72px; }

.mxc-favoritos__cabecera { margin-bottom: 28px; }
.mxc-favoritos__titulo {
	font-size: clamp(var(--mxc-text-2xl), 4vw, var(--mxc-text-2xl));
	margin: 0;
}
.mxc-favoritos__sub {
	margin: 8px 0 0;
	font-size: var(--mxc-text-sm);
	color: var(--mxc-ink-2);
}

.mxc-favoritos__carga,
.mxc-favoritos__error {
	padding: 48px 24px;
	text-align: center;
	color: var(--mxc-ink-2);
	font-size: var(--mxc-text-sm);
}

/* Estado vacío */
.mxc-favoritos__vacio {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	padding: 64px 24px;
	background: var(--mxc-bone);
	border: 1px solid var(--mxc-line);
	border-radius: var(--mxc-radius-lg);
	box-shadow: var(--mxc-shadow-card);
}
.mxc-favoritos__vacio-icono {
	display: inline-flex;
	color: var(--mxc-ink-3);
}
.mxc-favoritos__vacio-icono svg { width: 44px; height: 44px; fill: none; }
.mxc-favoritos__vacio-titulo {
	margin: 0;
	font-family: var(--mxc-font-display);
	font-weight: 700;
	font-size: var(--mxc-text-xl);
	color: var(--mxc-ink);
}
.mxc-favoritos__vacio-texto {
	margin: 0;
	max-width: 44ch;
	font-size: var(--mxc-text-sm);
	color: var(--mxc-ink-2);
}