/* ============================================================
   Mapa corporal interactivo — [cv_mapa_corporal]
   Silueta estilizada (anverso/reverso) + chips + paneles por zona.
   Reutiliza las tarjetas .cv-news/.cv-ncard (definidas en sections.css).
   ============================================================ */

.cv-mapa {
	margin: var(--wp--preset--spacing--5) 0;
}

/* ── Figuras (imagen del maniquí + capa de zonas) ───────────── */
.cv-mapa__figuras {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--5);
	margin: 0 auto var(--wp--preset--spacing--5);
}

.cv-mapa__fig {
	position: relative;
	width: min(300px, 44%);
	margin: 0;
}

.cv-mapa__img {
	display: block;
	width: 100%;
	height: auto;
}

.cv-mapa__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: visible; /* deja que la etiqueta de la zona salga fuera del cuerpo */
}

.cv-mapa__cara {
	margin-top: var(--wp--preset--spacing--2);
	text-align: center;
	color: var(--cv-muted);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Puntos clicables sobre el cuerpo: cuerpo limpio + un punto por zona.
   Teal por defecto; al pasar/activar pasa a clay con un halo suave. */
.cv-mapa__dot {
	cursor: pointer;
}
.cv-mapa__hit {
	fill: transparent; /* zona de impacto generosa para dedos/ratón (50+) */
}
.cv-mapa__ring {
	fill: var(--cv-accent);
	fill-opacity: 0;
	transition: fill-opacity 0.3s var(--cv-ease);
}
.cv-mapa__pin {
	fill: var(--cv-primary);
	stroke: #fff;
	stroke-width: 0.8;
	transition: fill 0.25s var(--cv-ease);
}
.cv-mapa__dot:hover .cv-mapa__pin,
.cv-mapa__dot:focus-visible .cv-mapa__pin,
.cv-mapa__dot.is-active .cv-mapa__pin {
	fill: var(--cv-accent);
}
.cv-mapa__dot:hover .cv-mapa__ring,
.cv-mapa__dot:focus-visible .cv-mapa__ring,
.cv-mapa__dot.is-active .cv-mapa__ring {
	fill-opacity: 0.22;
}
.cv-mapa__dot:focus-visible {
	outline: none;
}

/* Etiqueta (píldora HTML): cabe el texto completo, nunca se corta. Lleva una
   rallita (::before) hacia el punto. Oculta por defecto; la muestra el JS al
   pasar/enfocar el punto (clase .is-shown). */
.cv-mapa__tips {
	position: absolute;
	inset: 0;
	pointer-events: none; /* no bloquea los puntos */
}
.cv-mapa__tip {
	position: absolute;
	transform: translateY(-50%);
	white-space: nowrap;
	background: #fff;
	color: var(--cv-ink);
	border: 1px solid var(--cv-line);
	border-radius: var(--cv-radius-pill);
	box-shadow: var(--cv-shadow-md);
	padding: 4px 12px;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	opacity: 0;
	transition: opacity 0.2s var(--cv-ease);
	z-index: 3;
}
.cv-mapa__tip::before {        /* la rallita que conecta con el punto */
	content: "";
	position: absolute;
	top: 50%;
	width: 16px;
	height: 2px;
	background: var(--cv-accent);
}
.cv-mapa__tip--der {           /* etiqueta a la derecha del punto */
	margin-left: 18px;
}
.cv-mapa__tip--der::before {
	right: 100%;
	margin-right: 2px;
}
.cv-mapa__tip--izq {           /* etiqueta a la izquierda del punto */
	transform: translate(-100%, -50%);
	margin-left: -18px;
}
.cv-mapa__tip--izq::before {
	left: 100%;
	margin-left: 2px;
}
.cv-mapa__tip.is-shown {
	opacity: 1;
}

/* Pista inicial (solo con JS y mientras no haya zona abierta). */
.cv-mapa__hint {
	display: none;
	color: var(--cv-muted);
	font-size: var(--wp--preset--font-size--lg);
	text-align: center;
	padding: var(--wp--preset--spacing--5) 0;
}
.cv-js .cv-mapa__hint {
	display: block;
}

/* ── Chips de texto (control accesible de respaldo) ─────────── */
.cv-mapa__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	justify-content: center;
	margin: 0 auto var(--wp--preset--spacing--6);
	max-width: 820px;
}

.cv-mapa__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--1);
	padding: 12px 20px;
	border: 1.5px solid var(--cv-line);
	border-radius: var(--cv-radius-pill);
	background: #fff;
	color: var(--cv-primary);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	text-decoration: none;
	line-height: 1.2;
	transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.3s var(--cv-ease);
}
.cv-mapa__chip:hover {
	border-color: var(--cv-primary);
	transform: translateY(-2px);
}
.cv-mapa__chip:focus-visible {
	outline: 3px solid var(--cv-accent);
	outline-offset: 2px;
}
.cv-mapa__chip.is-active {
	background: var(--cv-primary);
	border-color: var(--cv-primary);
	color: #fff;
}
.cv-mapa__n {
	display: inline-block;
	min-width: 1.6em;
	padding: 1px 6px;
	border-radius: var(--cv-radius-pill);
	background: var(--cv-teal-100);
	color: var(--cv-primary-hover);
	font-size: var(--wp--preset--font-size--xs);
	text-align: center;
}
.cv-mapa__chip.is-active .cv-mapa__n {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}

/* ── Paneles de resultados ──────────────────────────────────── */
.cv-mapa-panel {
	margin-top: var(--wp--preset--spacing--5);
	scroll-margin-top: var(--wp--preset--spacing--6);
}
.cv-mapa-panel:focus {
	outline: none;
}
.cv-mapa-panel__title {
	font-size: var(--wp--preset--font-size--2xl);
	color: var(--cv-primary);
	margin: 0 0 var(--wp--preset--spacing--4);
	padding-bottom: var(--wp--preset--spacing--2);
	border-bottom: 2px solid var(--cv-line);
}

/* Con JavaScript: solo se ve el panel abierto. Sin JS (sin .cv-js en <html>),
   todos los paneles quedan visibles y las zonas funcionan como saltos de ancla. */
.cv-js .cv-mapa-panel {
	display: none;
}
.cv-js .cv-mapa-panel.is-open {
	display: block;
}

/* Miniaturas de las tarjetas del mapa: recorte 4:3 ANCLADO ARRIBA (igual que el
   archivo de ejercicios). Así, si la ilustración es un díptico vertical (dos viñetas
   apiladas), se ve la viñeta superior completa y no se parte por la costura del medio. */
.cv-mapa .cv-ncard__img img {
	aspect-ratio: 4 / 3;
	object-position: top;
}

@media (prefers-reduced-motion: reduce) {
	.cv-mapa__ring,
	.cv-mapa__pin,
	.cv-mapa__tip,
	.cv-mapa__chip {
		transition: none;
	}
	.cv-mapa__chip:hover {
		transform: none;
	}
}