/*
 * Estilo base del mapa. Colores del diseño aprobado (fondo oscuro + dorado).
 * Se pueden cambiar desde el tema redefiniendo estas variables. Diseño final: paso 7.
 */
.admire-map {
	--admire-map-accent: #C5A059;
	--admire-map-bg: #080C14;
	--admire-map-surface: #1B2838;
	--admire-map-text: #E8F0F8;
	--admire-map-muted: #8FAFC4;
	position: relative;
	width: 100%;
}

.admire-map__canvas {
	width: 100%;
	min-height: 320px;
	background: var(--admire-map-bg);
	border-radius: 6px;
	overflow: hidden;
}

.admire-map.is-loading .admire-map__canvas { opacity: 0.7; }

.admire-map__message {
	position: absolute;
	left: 50%;
	top: 1em;
	transform: translateX(-50%);
	z-index: 500;
	margin: 0;
	padding: 0.6em 1em;
	background: var(--admire-map-surface);
	color: var(--admire-map-text);
	border: 1px solid var(--admire-map-accent);
	border-radius: 4px;
	font-size: 0.9em;
	text-align: center;
	max-width: 90%;
}

.admire-map [hidden] { display: none !important; }

/* Llamada a la compra, abajo a la izquierda sobre el mapa */
.admire-map__cta {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 500;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em 0.9em;
	max-width: calc(100% - 24px);
	padding: 0.7em 1em;
	background: rgba(27, 40, 56, 0.92);
	color: var(--admire-map-text);
	border: 1px solid rgba(197, 160, 89, 0.6);
	border-radius: 6px;
	font-size: 0.9em;
	box-sizing: border-box;
}

.admire-map__cta-link {
	color: var(--admire-map-accent);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.admire-map__cta-link:hover,
.admire-map__cta-link:focus { color: var(--admire-map-text); }

/* En móvil, que no tape la atribución (abajo a la derecha): se sube un poco. */
@media (max-width: 600px) {
	.admire-map__cta { bottom: 28px; left: 8px; max-width: calc(100% - 16px); }
}

/*
 * Pin de cada revelación: la portada con el vinilo asomando, como en la imagen del disco.
 * Dos capas: el disco detrás (gira) y la funda delante (fija).
 * Ojo: Leaflet coloca el pin moviendo el elemento exterior con "transform", así que
 * las animaciones se aplican a los <span> interiores para no descolocarlo.
 */
.admire-dot {
	background: none;
	border: 0;
	cursor: pointer;
}

.admire-dot__pin {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	transition: transform 0.2s ease;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
}

/* Posiciones calculadas a partir de la imagen original (funda + disco). */
.admire-dot__disc {
	position: absolute;
	left: 37.49%;
	top: 1.7%;
	width: 62.49%;
	height: 95.86%;
	border-radius: 50%;
	background: url(../img/vinilo-pin-192.png) center / cover no-repeat;
}

.admire-dot__sleeve {
	position: absolute;
	left: 0;
	top: 0;
	width: 64.75%;
	height: 100%;
	border-radius: 2px;
	background: url(../img/vinilo-funda-144.png) center / 100% 100% no-repeat;
	box-shadow: 0 0 0 1px rgba(197, 160, 89, 0.55); /* Filo dorado: sobre el mapa oscuro la funda negra se perdía. */
}

.admire-dot:hover .admire-dot__pin,
.admire-dot:focus-visible .admire-dot__pin,
.admire-dot.is-active .admire-dot__pin {
	transform: scale(1.35);
}

.admire-dot:focus { outline: none; }
.admire-dot:focus-visible .admire-dot__sleeve { box-shadow: 0 0 0 2px var(--admire-map-text); }

/* El disco gira al pasar por encima y mientras su revelación está abierta (~33 rpm).
   Quien tenga activado "reducir movimiento" en su sistema no verá el giro. */
@media (prefers-reduced-motion: no-preference) {
	@keyframes admire-spin {
		from { transform: rotate(0deg); }
		to   { transform: rotate(360deg); }
	}
	.admire-dot:hover .admire-dot__disc,
	.admire-dot.is-active .admire-dot__disc {
		animation: admire-spin 1.8s linear infinite;
	}
}

/*
 * Grupos (clusters): la misma portada que los pines (clase admire-dot), más:
 *  - dos fundas apiladas detrás, desplazadas, para indicar que hay varias revelaciones;
 *  - el número en un círculo dorado sobre la esquina de la funda.
 */
.admire-cluster { overflow: visible; }

.admire-cluster__stack,
.admire-cluster__stack::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 64.75%;
	height: 100%;
	border-radius: 2px;
	background: url(../img/vinilo-funda-144.png) center / 100% 100% no-repeat;
	box-shadow: 0 0 0 1px rgba(197, 160, 89, 0.35);
}
.admire-cluster__stack {
	transform: translate(-4px, -4px);
	opacity: 0.6;
}
.admire-cluster__stack::before {
	content: "";
	transform: translate(-4px, -4px);
	opacity: 0.6;
}

.admire-cluster__count {
	position: absolute;
	top: -9px;
	left: calc(64.75% - 11px);
	z-index: 2;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: var(--admire-map-accent);
	color: var(--admire-map-bg);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 0 0 2px var(--admire-map-bg);
	transition: transform 0.2s ease;
}

.admire-cluster:hover .admire-cluster__count { transform: scale(1.15); }

/* En los grupos el disco gira al pasar por encima, pero la portada no crece
   (si no, se descuadraría respecto a las fundas apiladas). */
.admire-cluster:hover .admire-dot__pin,
.admire-cluster:focus-visible .admire-dot__pin { transform: none; }

/* Tarjeta */
.admire-popup .leaflet-popup-content-wrapper,
.admire-popup .leaflet-popup-tip {
	background: var(--admire-map-surface, #1B2838);
	color: var(--admire-map-text, #E8F0F8);
	border: 1px solid rgba(197, 160, 89, 0.5);
}
.admire-popup .leaflet-popup-content-wrapper { border-radius: 6px; }
.admire-popup .leaflet-popup-content { margin: 16px 18px; }
.admire-popup a.leaflet-popup-close-button { color: var(--admire-map-muted, #8FAFC4); }

.admire-card { font-size: 14px; line-height: 1.55; }
.admire-card__text { margin: 0 0 0.6em; white-space: pre-line; }
.admire-card.is-expanded .admire-card__text { max-height: 50vh; overflow-y: auto; }

.admire-card__more {
	background: none;
	border: 0;
	padding: 0;
	margin: 0 0 0.8em;
	color: var(--admire-map-accent, #C5A059);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.admire-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em 1em;
	margin: 0;
	font-size: 12px;
	color: var(--admire-map-muted, #8FAFC4);
	letter-spacing: 0.03em;
}
.admire-card__place {
	display: inline-block;
	padding: 0.1em 0.6em;
	border: 1px solid rgba(197, 160, 89, 0.6);
	border-radius: 999px;
	color: var(--admire-map-text, #E8F0F8);
}

.admire-card__meta { align-items: center; }

.admire-card__title {
	margin: 0 0 0.5em;
	color: var(--admire-map-accent, #C5A059);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Atribución del mapa, discreta sobre fondo oscuro */
.admire-map .leaflet-control-attribution {
	background: rgba(8, 12, 20, 0.7);
	color: var(--admire-map-muted);
}
.admire-map .leaflet-control-attribution a { color: var(--admire-map-muted); }

/* Like */
.admire-card__meta .admire-like { margin-left: auto; }

.admire-like {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.25em 0.7em;
	background: transparent;
	border: 1px solid rgba(197, 160, 89, 0.6);
	border-radius: 999px;
	color: var(--admire-map-text, #E8F0F8);
	font: inherit;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.admire-like:hover,
.admire-like:focus-visible { border-color: var(--admire-map-accent, #C5A059); outline: none; }
.admire-like:disabled { cursor: progress; }

.admire-like__icon {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	transition: fill 0.15s ease;
}
.admire-like.is-liked { color: var(--admire-map-accent, #C5A059); border-color: var(--admire-map-accent, #C5A059); }
.admire-like.is-liked .admire-like__icon { fill: currentColor; }

@media (prefers-reduced-motion: no-preference) {
	@keyframes admire-pop {
		0% { transform: scale(1); }
		40% { transform: scale(1.35); }
		100% { transform: scale(1); }
	}
	.admire-like.is-pop .admire-like__icon { animation: admire-pop 0.35s ease; }
}

.admire-card__msg { margin: 0.5em 0 0; font-size: 12px; color: #e8a0a0; }
.admire-card__msg:empty { display: none; }