/**
 * Front de caramba-moreno/hotspots.
 *
 * REGLA QUE MANDA AQUI: estilos MINIMOS y HEREDADOS. El plugin no define ni un
 * color ni una tipografia propios. Solo hay layout irreducible —recortar,
 * transformar, posicionar por coordenada— y todo lo ajustable sale por custom
 * property con un default sobrio, para que el tema lo gobierne desde theme.json
 * sin CSS a la medida:
 *
 *   --cmh-color            color del pin        (default: currentColor)
 *   --cmh-punto            diametro del pin     (default: 16px)
 *   --cmh-punto-grande     pin destacado        (default: 24px)
 *   --cmh-anillo           diametro del anillo  (default: 32px)
 *   --cmh-borde-pin        halo del pin         (default: 2px)
 *   --cmh-borde-pin-color  color del halo       (default: transparent)
 *   --cmh-grupo            diametro del grupo   (default: 32px)
 *   --cmh-fondo-grupo      relleno del grupo    (default: #fff)
 *   --cmh-rejilla-color    lineas de la rejilla (default: rgba(0,0,0,.07))
 *   --cmh-paso             paso de la rejilla   (lo escribe el bloque)
 *   --cmh-escala           escala viva de la capa (la escribe view.js)
 *
 * Los tamanos default salen de la escala de espaciado del grupo (multiplos y
 * divisores de 16): 8 / 16 / 24 / 32. Nada de 13, 21 ni 36.
 */

/* --------------------------------------------------------------- Lienzo -- */

/*
 * ★ EL MAPA ES UNA SOLA CAPA FRENTE AL RESTO DE LA PAGINA.
 *
 * `isolation: isolate` hace que el bloque cree su propio contexto de
 * apilamiento. Sin esto, los z-index de adentro —controles 6, marcadores 3/5/6,
 * tarjeta 5, burbujas 4— compiten UNO POR UNO con lo que haya afuera, y quien
 * tenga que ponerse encima del mapa (por ejemplo un encabezado sticky) tiene que
 * adivinar cual es el mayor y superarlo. Cada vez que aca adentro suba un
 * numero, ese calculo de afuera queda mal en silencio.
 *
 * Con el aislamiento, afuera solo existe UN valor: el de `.cmh`. Los internos
 * dejan de asomarse. Es el lado de este bloque del contrato: no obligar al resto
 * del sitio a conocer sus tripas.
 *
 * ⚠️ No lleva `z-index` propio a proposito: se queda en `auto` y participa por
 * orden de documento, asi que a un encabezado sticky le basta `z-index: 1` con
 * fondo opaco para quedar encima.
 */
.cmh {
	position: relative;
	isolation: isolate;
	/*
	 * ★ COLUMNA FLEX PARA QUE LA ALTURA NATIVA DE GUTENBERG LLEGUE AL MAPA
	 * (Mauricio 2026-10-08: "fixed height deberia adoptar el vw vh options
	 * nativo de Gutenberg; tambien borde, padding y margin").
	 *
	 * WordPress escribe `min-height`, `padding`, `border` y el fondo en el
	 * ENVOLTORIO (`.cmh`), porque es el que sale de `get_block_wrapper_attributes()`.
	 * Pero el alto visible del bloque lo daba el VIEWPORT. Sin esto, poner una
	 * altura nativa agrandaba la caja y dejaba el mapa del mismo tamanio con un
	 * hueco debajo.
	 *
	 * Con la columna flex y `flex:1` en el viewport, el mapa CRECE hasta llenar
	 * lo que diga la altura nativa, y sin altura nativa la caja sigue midiendo
	 * exactamente lo que mide el viewport — o sea el comportamiento de siempre.
	 * `.cmh__controles` esta en `position:absolute`, asi que no participa del
	 * flujo y no se ve afectado.
	 */
	display: flex;
	flex-direction: column;
	--cmh-escala: 1;
}

/* El viewport RECORTA: es lo que convierte una capa mas grande que la caja en
   un mapa paneable. De aqui sale el alto visible del bloque. */
.cmh__viewport {
	position: relative;
	overflow: hidden;
	touch-action: pan-y;   /* el gesto vertical sigue siendo de la pagina */
	cursor: grab;
	/* Crece con la altura nativa del envoltorio; sin ella, manda su propio alto. */
	flex: 1 1 auto;
	/* Para que el radio de borde nativo recorte tambien el mapa, no solo la caja. */
	border-radius: inherit;
}

.cmh.esta-arrastrando .cmh__viewport {
	cursor: grabbing;
	user-select: none;
}

/* Alto natural: manda la proporcion de la capa, no hay recorte vertical. */
/*
 * ★★ CUANDO EL EDITOR FIJA UNA ALTURA MINIMA, ESA ES LA ALTURA DEL MAPA.
 *
 * `min-height` es un PISO, no una medida: con 400px puestos y un arte cuyo alto
 * natural da 454, la caja se iba a 454 — medido, y es la diferencia real contra
 * el `alto fijo` viejo, que RECORTABA. Quien escribe 400 en un mapa paneable no
 * esta pidiendo "al menos 400": esta pidiendo una ventana de 400 por la que se
 * panea el resto.
 *
 * `block-size: 0` deja que el `min-height` del nucleo sea el unico que manda, y
 * el viewport lo llena. Sin altura minima no aplica, asi que el modo natural
 * —la imagen entera, sin recorte— sigue siendo el de siempre.
 *
 * ⚠️ El selector mira el ATRIBUTO style, que es donde WordPress escribe la
 * altura minima. Si algun dia el nucleo la moviera a una clase o a una custom
 * property, esta regla deja de aplicar EN SILENCIO y el mapa volveria a 454.
 * Se re-verifica en una linea, en la consola de find-locally:
 *   getComputedStyle(document.querySelector('.cmh')).height
 */
.cmh[style*="min-height"] {
	block-size: 0;
}

.cmh[style*="min-height"] > .cmh__viewport {
	block-size: 100%;
}

/*
 * ★ LAS CLASES `cmh--alto-*` SE RETIRARON EN 0.6.0. El alto lo pone la altura
 * minima nativa de Gutenberg sobre el envoltorio, y el viewport la llena gracias
 * a la columna flex de arriba. Lo unico que sobrevive de aquel mecanismo es el
 * tope movil, porque expresa una intencion que el control nativo no puede: que
 * el mapa no se coma la pantalla del telefono. Es un TOPE, no un segundo
 * mecanismo para fijar el alto.
 */

/* Alto de pantalla: el mapa CUBRE el alto y el ancho sobrante se panea.
   Es la correccion que pidio Mauricio sobre el Figma, donde el mapa ocupa solo
   el tercio de arriba de la columna y los otros dos quedan vacios. */

/*
 * ★ EN MOVIL EL LIENZO ES MAS BAJO — y se resuelve con UNA media query, no con
 * un segundo mapa.
 *
 * Poner dos mapas seria duplicar los marcadores y su contenido, que es
 * exactamente la duplicacion que el resto del disenio evita: dos listas de lo
 * mismo se desincronizan solas (alguien corrige una ciudad en uno y no en el
 * otro) y ademas el navegador cargaria y renderizaria las dos. Lo unico que
 * cambia entre movil y escritorio es el ALTO DE LA VENTANA, que es una
 * propiedad de CSS. Los marcadores no se enteran: sus coordenadas son
 * porcentajes del arte, no de la ventana.
 */
@media ( max-width: 781px ) {
	.cmh { max-block-size: 56vh; }
}

/*
 * ★ LA REJILLA VA EN LA CAPA, NO EN EL VIEWPORT. Estaba en el viewport y por eso
 * quedaba clavada a la ventana mientras el mapa se movia por debajo: al panear,
 * un punto del dibujo cambiaba de cuadro. La rejilla es una referencia DEL ARTE
 * —sirve para leer donde cae un marcador—, asi que tiene que viajar con el. En
 * la capa hereda el transform, o sea que panea y escala junto al mapa.
 */
.cmh--con-rejilla .cmh__capa {
	background-image:
		linear-gradient( to right, var( --cmh-rejilla-color, rgba( 0, 0, 0, .07 ) ) 1px, transparent 1px ),
		linear-gradient( to bottom, var( --cmh-rejilla-color, rgba( 0, 0, 0, .07 ) ) 1px, transparent 1px );
	background-size: var( --cmh-paso, 32px ) var( --cmh-paso, 32px );
}

/*
 * ★ EL VIAJE DE PUNTO A PUNTO VA ANIMADO (Mauricio 2026-10-08). La clase la
 * pone y la quita `animar()` en view.js, y SOLO en los saltos discretos: con
 * una transicion permanente el arrastre y la rueda se sienten elasticos, porque
 * `pintar()` corre decenas de veces por segundo mientras se panea.
 */
.cmh.esta-viajando .cmh__capa {
	transition: transform .5s cubic-bezier( .22, .61, .36, 1 );
}

@media ( prefers-reduced-motion: reduce ) {
	.cmh.esta-viajando .cmh__capa { transition: none; }
}

/* La capa: proporcion NATIVA, y se mueve entera. `transform-origin:0 0` hace
   que la matematica del zoom sea la simple (escalar desde la esquina), que es
   la que usa view.js para mantener fijo un punto al hacer zoom. */
.cmh__capa {
	position: relative;
	width: 100%;
	transform-origin: 0 0;
}

/*
 * ★ `will-change: transform` va SOLO mientras se arrastra, nunca fijo.
 *
 * Fijo, el navegador promueve la capa a una capa compuesta, la rasteriza UNA vez
 * al tamano que tenia y despues escala ese bitmap en lugar de volver a dibujar
 * el SVG. Resultado: el mapa —que es vectorial— se veia PIXELADO con el zoom
 * puesto. Medido: `getComputedStyle(capa).willChange` daba "transform" en
 * reposo, con la capa ya escalada.
 *
 * Transitorio se queda con lo mejor de los dos lados: durante el gesto hay capa
 * compuesta y el arrastre va suave; al soltar, la promocion desaparece y el
 * navegador vuelve a rasterizar el vector a la escala final, nitido.
 *
 * Es ademas lo que dice la propia especificacion de will-change: no dejarlo
 * puesto de forma permanente.
 */
.cmh.esta-arrastrando .cmh__capa {
	will-change: transform;
}

.cmh__imagen {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	pointer-events: none;   /* el gesto es del viewport, no de la imagen */
	user-select: none;
	/*
	 * ★ DEFENSA CONTRA EL `cover` DE UN TERCERO (H8 / invariante I2).
	 *
	 * I1 dice que los pines viven en el mismo espacio de coordenadas que el
	 * dibujo, y eso vale mientras la imagen NO se recorte. Si el tema del sitio
	 * le aplica `object-fit: cover` a las imagenes —caso real en sitios que no
	 * construimos nosotros— el arte se escala y se desplaza DENTRO de su caja, y
	 * los pines quedan corridos EN SILENCIO: medido en el mapa de DLC, un pin al
	 * 10% de la caja caeria en el 30.9% del arte.
	 *
	 * I2 ya descarto la salida de compensarlo leyendo el crop del DOM: funciona
	 * una vez y habria que recalcularlo en cada paneo y en cada zoom. La salida
	 * correcta es que el recorte NO OCURRA. Dos declaraciones, no una: `object-fit`
	 * por si el tema lo pone, y `aspect-ratio: auto` por si ademas le fija un alto.
	 */
	object-fit: fill;
	aspect-ratio: auto;
}

/*
 * ★ Y SI LA DEFENSA NO ALCANZA, QUE SE VEA. El tema podria ganar con mayor
 * especificidad o con `!important`. `view.js` lo mide al arrancar y, si el arte
 * esta deformado, marca el bloque con `data-cmh-arte-deformado`. Esta regla lo
 * hace visible en lugar de dejar los pines corridos sin que nadie se entere —
 * la misma politica que `data-cmh-huerfanos`: ruidoso, no silencioso.
 */
.cmh[ data-cmh-arte-deformado ] {
	outline: 3px dashed #c00;
	outline-offset: -3px;
}

.cmh[ data-cmh-arte-deformado ]::after {
	content: "⚠ El tema de este sitio esta recortando la imagen del mapa: los marcadores no coinciden con el dibujo.";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 7;
	padding: 8px 12px;
	background: #c00;
	color: #fff;
	font-size: 13px;
	line-height: 1.3;
}

/* Aviso para quien administra el sitio cuando el mapa queda oculto al publico. */
.cmh--sin-licencia {
	padding: 16px;
	border: 1px dashed currentColor;
	font-size: 14px;
}

/* ------------------------------------------------------------ Marcador -- */

.cmh-marcador {
	position: absolute;
	line-height: 0;
	/* CONTRA-ESCALADO: la capa crece con el zoom, el pin NO. Sin esto el punto
	   se inflaria hasta tapar el pais. Es tambien lo que hace que la agrupacion
	   tenga sentido: el pin mide lo mismo siempre, asi que "estan encimados" es
	   una pregunta con respuesta estable. */
	transform: translate( -50%, -50% ) scale( calc( 1 / var( --cmh-escala, 1 ) ) );
	transform-origin: center;
}

.cmh-marcador.esta-agrupado { display: none; }

.cmh-marcador--destacado,
.cmh-marcador--anillo { z-index: 3; }

.cmh-marcador.esta-abierto { z-index: 5; }

/*
 * ★ EL MARCADOR CON EL MOUSE ENCIMA SE ELEVA — sin esto las BURBUJAS DE GRUPO
 * le pintan encima a su propia tarjeta (Mauricio 2026-10-08, captura de Mazelab
 * con el "2" tapando "Czech Republic").
 *
 * El `transform` de contra-escalado hace que cada marcador sea su propio
 * contexto de apilamiento, asi que el `z-index:5` de la tarjeta solo compite
 * ADENTRO del marcador; hacia afuera compite el marcador, y en hover se quedaba
 * en `auto` contra el `z-index:4` de `.cmh-grupo`. `esta-abierto` ya subia a 5,
 * pero eso solo pasa al hacer CLIC: en hover no aplicaba.
 */
.cmh-marcador:hover,
.cmh-marcador:focus-within {
	z-index: 5;
}

/*
 * ★ RELLENO COMO ESTILO DE BLOQUE (Mauricio 2026-10-08: "el punto que el usuario
 * pueda elegir relleno o default; relleno sobre-escribe el default").
 *
 * La clase `is-style-relleno` la pone WordPress solo: el estilo se declara con
 * `register_block_style()` y la clase viaja por `get_block_wrapper_attributes()`,
 * que el render del marcador YA usaba. Cero atributos nuevos, cero controles a
 * la medida, y aparece en el panel de Estilos que el editor ya tiene.
 */
.cmh-marcador.is-style-relleno .cmh-marcador__punto {
	background: var( --cmh-color, currentColor );
}

/* Reset del boton: layout irreducible. Sin esto el pin sale con el chrome
   nativo del control y deja de ser un punto. No lleva color propio: hereda de
   --cmh-color, que por default es currentColor. */
.cmh-marcador__punto {
	display: block;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	appearance: none;
	-webkit-appearance: none;
	inline-size: var( --cmh-punto, 16px );
	block-size: var( --cmh-punto, 16px );
	border-radius: 50%;
	/*
	 * ★ ARO POR DEFECTO, RELLENO AL ACTIVARSE (Mauricio 2026-10-08: "los
	 * puntitos no-hovered que tengan solo stroke y no relleno y el siendo
	 * hovered que si tenga el fondo negro").
	 *
	 * El trazo va en `border` y no en `box-shadow` a proposito: con
	 * `box-sizing:border-box` el punto sigue midiendo --cmh-punto exacto, asi
	 * que la agrupacion —que mide distancias entre centros— no cambia de
	 * comportamiento al cambiar el relleno. El `box-shadow` se reserva para el
	 * realce, que SI debe crecer hacia afuera.
	 */
	border: var( --cmh-trazo-pin, 2px ) solid var( --cmh-color, currentColor );
	background: transparent;
	box-shadow: 0 0 0 var( --cmh-borde-pin, 2px ) var( --cmh-borde-pin-color, transparent );
	cursor: pointer;
	text-decoration: none;
	transition: background-color .18s ease;
}

/* Relleno: hover del propio punto, marcador abierto, o su tarjeta señalada. */
.cmh-marcador:hover > .cmh-marcador__punto,
.cmh-marcador.esta-abierto > .cmh-marcador__punto,
.cmh-marcador.esta-senalado .cmh-marcador__punto {
	background: var( --cmh-color, currentColor );
}

@media ( prefers-reduced-motion: reduce ) {
	.cmh-marcador__punto { transition: none; }
}

/*
 * ★ SIN ANILLO DE FOCO POR RATON — la otra mitad de "el mapa deja un borde
 * despues del hover". La causa principal se quito en view.js (el foco ya solo
 * se mueve por teclado); esto es la red por si algun otro camino enfoca con el
 * raton. `:focus-visible` conserva el anillo para quien navega con teclado, que
 * es el unico que lo necesita.
 */
.cmh-marcador__punto:focus:not( :focus-visible ),
.cmh-grupo:focus:not( :focus-visible ) {
	outline: none;
}

.cmh-marcador--destacado .cmh-marcador__punto,
.cmh-marcador--anillo .cmh-marcador__punto {
	inline-size: var( --cmh-punto-grande, 24px );
	block-size: var( --cmh-punto-grande, 24px );
}

.cmh-marcador--anillo::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: var( --cmh-anillo, 32px );
	block-size: var( --cmh-anillo, 32px );
	transform: translate( -50%, -50% );
	border: 1px solid var( --cmh-color, currentColor );
	border-radius: 50%;
	pointer-events: none;
}

/* --------------------------------------------------------------- Grupo -- */

/*
 * ★ GRAMATICA VISUAL, tomada del mapa de la Muni (Figma Make, leido operando la
 * app): el marcador individual va RELLENO y el grupo va HUECO —blanco con
 * anillo de color y el numero adentro—. Se lee de un vistazo cual es uno y cual
 * es varios, sin necesidad de leer la cifra.
 */
.cmh-grupo {
	position: absolute;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	appearance: none;
	-webkit-appearance: none;
	inline-size: var( --cmh-grupo, 32px );
	block-size: var( --cmh-grupo, 32px );
	border: 2px solid var( --cmh-color, currentColor );
	border-radius: 50%;
	background: var( --cmh-fondo-grupo, #fff );
	color: inherit;
	font: inherit;
	font-size: .75em;
	line-height: 1;
	cursor: pointer;
	transform: translate( -50%, -50% ) scale( calc( 1 / var( --cmh-escala, 1 ) ) );
	transform-origin: center;
	z-index: 4;
}

.cmh__grupos {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.cmh__grupos .cmh-grupo { pointer-events: auto; }

/* ------------------------------------------------------------- Tarjeta -- */

/*
 * ★ EL PLUGIN NO DIBUJA LA TARJETA. Aca solo hay POSICION: donde se para
 * respecto del pin y cuando se revela. El aspecto —fondo, tipografia, colores,
 * la foto— lo pone el contenido que el editor mete adentro, que en DLC es el
 * patron «Tarjeta · Tooltip» del sistema de diseno. Por eso no hay ni un color
 * ni una fuente en estas reglas: si los hubiera, el plugin estaria peleando con
 * el sistema de diseno de cada sitio.
 */
.cmh-marcador__tarjeta {
	position: absolute;
	z-index: 5;
	inline-size: max-content;
	max-inline-size: min( 288px, 60vw );
	line-height: normal;
	opacity: 0;
	pointer-events: none;
	/*
	 * ★ EL REVELADO ES SOLO `opacity` + `pointer-events`. NADA de `visibility`.
	 *
	 * Antes se togglaba `visibility` junto con la opacidad y la transicion se
	 * quedaba trabada: con la clase puesta, el marcador visible y la regla
	 * ganando la cascada limpiamente, la opacidad computada seguia en 0 — y con
	 * `transition:none` saltaba a 1 en el acto. O sea que el problema nunca fue
	 * la cascada, era el cruce entre voltear `visibility` y animar `opacity` en
	 * el mismo cambio. Intentar transicionar las dos tampoco lo arreglo.
	 *
	 * Sacando `visibility` de la ecuacion el revelado es una sola propiedad
	 * animable y funciona igual en todos lados. La tarjeta oculta no molesta al
	 * puntero porque `pointer-events:none` la deja pasar, y no ensucia el arbol
	 * de accesibilidad porque el boton ya declara `aria-expanded="false"`, que es
	 * el mecanismo correcto para un disclosure.
	 */
	transition: opacity 120ms ease;
}

@media ( prefers-reduced-motion: reduce ) {
	.cmh-marcador__tarjeta { transition: none; }
}

.cmh-marcador--lado-auto > .cmh-marcador__tarjeta,
.cmh-marcador--lado-arriba > .cmh-marcador__tarjeta {
	inset-block-end: calc( 100% + var( --cmh-separacion, 8px ) );
	inset-inline-start: 50%;
	transform: translateX( calc( -50% + var( --cmh-desvio, 0px ) ) );
}

.cmh-marcador--lado-abajo > .cmh-marcador__tarjeta {
	inset-block-start: calc( 100% + var( --cmh-separacion, 8px ) );
	inset-inline-start: 50%;
	transform: translateX( calc( -50% + var( --cmh-desvio, 0px ) ) );
}

.cmh-marcador--lado-izquierda > .cmh-marcador__tarjeta {
	inset-inline-end: calc( 100% + var( --cmh-separacion, 8px ) );
	inset-block-start: 50%;
	transform: translateY( -50% );
}

.cmh-marcador--lado-derecha > .cmh-marcador__tarjeta {
	inset-inline-start: calc( 100% + var( --cmh-separacion, 8px ) );
	inset-block-start: 50%;
	transform: translateY( -50% );
}

/*
 * Revelado. DOS fuentes, y ninguna es `:focus-within`.
 *
 * ★ POR QUE NO `:focus-within` (medido, no supuesto): un clic de raton deja el
 * foco EN el boton. Con una regla `:focus-within` la tarjeta quedaba abierta
 * para siempre —ni un segundo clic ni Escape la cerraban— aunque el store
 * hiciera bien su trabajo: tras Escape el DOM decia `aria-expanded="false"` y
 * la clase `esta-abierto` ya no estaba, y aun asi `getComputedStyle` daba
 * `opacity:1; visibility:visible`, porque el boton seguia siendo
 * `document.activeElement`. `:focus-visible` tampoco sirve: al pulsar Escape el
 * navegador vuelve a marcar el foco como visible y la tarjeta se reabria sola.
 *
 * El teclado NO necesita CSS: <button> dispara `click` con Enter y con Espacio,
 * o sea que alterna igual que el raton (patron disclosure de ARIA).
 *
 * El hover va SIN gatear por modo: la regla es unica —hover activa, clic fija—
 * y no es configurable por bloque.
 */
.cmh-marcador--con-tarjeta:hover > .cmh-marcador__tarjeta,
.cmh-marcador.esta-abierto > .cmh-marcador__tarjeta {
	opacity: 1;
	pointer-events: auto;
}

/*
 * ★ LA TARJETA NO VIAJA CON EL MAPA: aparece cuando el mapa ya llego.
 *
 * Mientras la capa esta en transicion no se puede medir su posicion final, asi
 * que `acomodarTarjeta()` se abstiene (ver la guarda en view.js) y la tarjeta
 * quedaria sin corregir durante esos 500ms — medido: llegaba a asomarse 49px
 * fuera del mapa. Ocultarla mientras viaja hace que aterrice ya colocada, que
 * ademas se lee como intencion y no como un salto.
 *
 * Solo afecta al viaje (hover sobre la REJILLA, o clic en una burbuja). Pasar
 * el raton directo sobre un pin no mueve el mapa, asi que ahi la tarjeta
 * aparece al instante, sin esperar nada.
 */
.cmh.esta-viajando .cmh-marcador__tarjeta {
	opacity: 0;
}

/*
 * ★ PUENTE SOBRE EL HUECO — es lo que hacia que el tooltip NO SE PUDIERA
 * CLICKEAR (Mauricio 2026-10-08: "algunas no me deja darle click, muestra la
 * manita de navegacion").
 *
 * La tarjeta se revela con `:hover` del MARCADOR y se dibuja separada de el por
 * `--cmh-separacion`. Al mover el raton del punto hacia la tarjeta, el cursor
 * cruza ese hueco: ahi ya no esta sobre el marcador, el `:hover` se apaga, la
 * tarjeta pierde `pointer-events` y desaparece antes de que el clic ocurra. La
 * "manita de navegacion" que se veia es el `cursor:grab` del viewport, que es
 * justo lo que queda debajo cuando la tarjeta se fue.
 *
 * El puente es un pseudo-elemento transparente que tapa exactamente el hueco,
 * asi que el recorrido raton -> tarjeta nunca sale del marcador.
 */
.cmh-marcador--lado-auto > .cmh-marcador__tarjeta::before,
.cmh-marcador--lado-arriba > .cmh-marcador__tarjeta::before {
	content: "";
	position: absolute;
	inset-inline: -12px;
	inset-block-start: 100%;
	block-size: calc( var( --cmh-separacion, 8px ) + 12px );
}

.cmh-marcador--lado-abajo > .cmh-marcador__tarjeta::before {
	content: "";
	position: absolute;
	inset-inline: -12px;
	inset-block-end: 100%;
	block-size: calc( var( --cmh-separacion, 8px ) + 12px );
}

/* El tooltip con destino se anuncia como lo que es: algo en lo que se hace clic. */
.cmh-marcador__tarjeta.tiene-enlace {
	cursor: pointer;
}

/* ----------------------------------------------------------- Controles -- */

.cmh__controles {
	position: absolute;
	inset-block-start: 16px;
	inset-inline-start: 16px;
	display: flex;
	gap: 4px;
	z-index: 6;
}

.cmh__control {
	display: grid;
	place-items: center;
	inline-size: 32px;
	block-size: 32px;
	padding: 0;
	border: 1px solid var( --cmh-color, currentColor );
	border-radius: 50%;
	background: var( --cmh-fondo-grupo, #fff );
	color: inherit;
	font: inherit;
	line-height: 1;
	cursor: pointer;
}

/* ------------------------------------------------------------- Utilidad -- */

.cmh-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------- La cola de la tarjeta -- */

/*
 * El triangulito que une la tarjeta con su pin. Esto SI es del plugin y no del
 * sistema de diseno: no es decoracion, es lo que dice A QUE PUNTO pertenece la
 * tarjeta. Sin el, una tarjeta flotando cerca de tres pines no dice de cual es.
 *
 * Hereda el color de fondo de la tarjeta por `--cmh-tarjeta-fondo`, que el tema
 * puede redefinir; el default es blanco porque es lo que usa la tarjeta del
 * sistema. 12x8 son las medidas del Figma.
 */
.cmh-marcador__tarjeta::after {
	content: "";
	position: absolute;
	inline-size: 0;
	block-size: 0;
	border-inline: 6px solid transparent;
}

.cmh-marcador--lado-auto > .cmh-marcador__tarjeta::after,
.cmh-marcador--lado-arriba > .cmh-marcador__tarjeta::after {
	inset-block-start: 100%;
	inset-inline-start: 50%;
	/* La cola compensa el desvio de la tarjeta: la caja se corre para no salirse
	   del recorte, pero la punta tiene que seguir sobre su pin. */
	margin-inline-start: calc( -6px - var( --cmh-desvio, 0px ) );
	border-block-start: 8px solid var( --cmh-tarjeta-fondo, #fff );
}

.cmh-marcador--lado-abajo > .cmh-marcador__tarjeta::after {
	inset-block-end: 100%;
	inset-inline-start: 50%;
	margin-inline-start: calc( -6px - var( --cmh-desvio, 0px ) );
	border-block-end: 8px solid var( --cmh-tarjeta-fondo, #fff );
}

/* --------------------------------- Spot <-> tarjeta de la rejilla -- */

/*
 * La foto del tooltip SALE DE LA TARJETA de la rejilla: la escribe view.js en
 * `--cmh-foto` al emparejar. No se sube dos veces ni se referencia dos veces.
 *
 * Va como fondo del hueco que el patron del sistema de diseno ya reserva, en
 * lugar de inyectar un <img>: asi el plugin llena un espacio que el diseno
 * definio, en vez de meter markup propio dentro de una pieza ajena.
 *
 * ⚠️ PENDIENTE DEL SISTEMA DE DISENO, no del plugin: ese hueco hoy no tiene
 * medidas. En el Figma (nodo 469:10373) la foto es de 52x52 con radio 7; el
 * patron «Tarjeta · Tooltip» trae en su lugar un grupo de color sin tamano ni
 * bloque de imagen. Hasta que ese hueco tenga sus medidas, la foto entra pero
 * casi no se ve. Se corrige en el patron, NO aca: si el plugin le pusiera el
 * tamano, estaria decidiendo diseno de un cliente.
 */
/*
 * ★ EL HUECO DE LA FOTO ES EL PRIMER HIJO DEL GRUPO INTERIOR, NO DEL TOOLTIP.
 *
 * El selector anterior era `.tiene-foto .wp-block-group:first-child` y el primer
 * `.wp-block-group` del tooltip es el grupo EXTERIOR —la tarjeta entera—, asi
 * que la foto se pintaba de fondo de TODA la tarjeta y el texto quedaba encima
 * de la imagen, ilegible. Visto en la pagina, no en la medicion.
 */
.cmh-marcador__tarjeta.tiene-foto > .wp-block-group > .wp-block-group:first-child {
	background-image: var( --cmh-foto );
	background-size: cover;
	background-position: 50% 50%;

	/*
	 * ⚠️ PROVISIONAL — estas medidas son del Figma (nodo 469:10373: 52x52) y
	 * DEBERIAN vivir en el patron «Tarjeta · Tooltip» (wp_block 52), que hoy trae
	 * ese hueco sin tamano. Se ponen aca para que la tarjeta no se vea rota
	 * mientras el patron se corrige. Al corregirlo, BORRAR estas tres lineas: el
	 * plugin no debe fijar medidas del diseno de un cliente.
	 */
	flex: 0 0 auto;
	inline-size: 52px;
	block-size: 52px;
}

/*
 * Señalado cruzado: pasar sobre la tarjeta de la rejilla enciende su spot y le
 * abre el tooltip, y al reves. Es el «data brushing» del patron store locator —
 * lo que hace que la lista y el mapa se lean como una sola cosa y no como dos
 * listas puestas al lado.
 */
.cmh-marcador.esta-senalado > .cmh-marcador__tarjeta {
	opacity: 1;
	pointer-events: auto;
}

.cmh-marcador.esta-senalado {
	z-index: 6;
}

.cmh-marcador.esta-senalado .cmh-marcador__punto {
	box-shadow: 0 0 0 var( --cmh-borde-pin, 2px ) var( --cmh-color, currentColor );
}

/* El realce de la tarjeta de la rejilla no inventa color: usa el que ya tiene. */
.esta-senalada {
	outline: 1px solid currentColor;
	outline-offset: -1px;
}