/* Variables por defecto; Mapa Desur › Ajustes y el widget de Elementor las sobreescriben. */
.desur-mapa-wrap {
	--desur-accent: #3C489F;
	--desur-hover: #CC3366;
	--desur-pin-border: #fff;
	--desur-pin: 48px;
	--desur-tip-bg: #fff;
	--desur-tip-title: #3C489F;
	--desur-tip-text: #333;
	--desur-tip-muted: #9C9897;
	--desur-tip-w: 270px;
	--desur-list-btn-bg: #fff;
	--desur-list-btn-hover-bg: #f4f6fb;
	--desur-list-btn-hover: #CC3366;
	--desur-reset-bg: #fff;
	--desur-reset-color: #3C489F;
	--desur-reset-hover-bg: #3C489F;
	--desur-reset-hover-color: #fff;
	display: flex; gap: 20px; align-items: stretch; width: 100%;
}
.desur-mapa-canvas { flex: 1 1 0; min-width: 0; scroll-margin-top: var(--desur-scroll-offset, 16px); height: var(--desur-h, 600px); border-radius: 6px; background: #f2f2f2; z-index: 0; }
.desur-mapa-canvas .leaflet-container { font-family: inherit; }

/* Marcador circular con logo (centrado en la coordenada; el tamaño sale de --desur-pin) */
.desur-pin { background: none; border: 0; }
.desur-pin-inner {
	position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
	width: var(--desur-pin); height: var(--desur-pin); box-sizing: border-box;
	border-radius: 50%; background: #fff; border: 3px solid var(--desur-pin-border);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .35); overflow: hidden; display: flex; align-items: center; justify-content: center;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.desur-pin:hover .desur-pin-inner { transform: translate(-50%, -50%) scale(1.15); border-color: var(--desur-hover); box-shadow: 0 4px 12px rgba(0, 0, 0, .45); }
.desur-pin-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.desur-initials {
	display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
	background: var(--desur-accent); color: #fff; font: 600 15px/1 sans-serif; letter-spacing: .5px;
}

/* Cluster */
.desur-cluster { background: none; border: 0; }
.desur-cluster-in {
	position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
	width: var(--desur-pin); height: var(--desur-pin); box-sizing: border-box;
	background: var(--desur-accent); color: #fff; border: 3px solid var(--desur-pin-border); border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: center;
	font: 600 15px/1 sans-serif;
}

/* Tooltip */
.leaflet-tooltip.desur-tooltip {
	padding: 0; border: 0; border-radius: 6px; background: var(--desur-tip-bg); color: var(--desur-tip-text);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .25); white-space: normal; width: var(--desur-tip-w); pointer-events: none;
}
.leaflet-tooltip-top.desur-tooltip::before { border-top-color: var(--desur-tip-bg); }
.leaflet-tooltip-bottom.desur-tooltip::before { border-bottom-color: var(--desur-tip-bg); }
.leaflet-tooltip-left.desur-tooltip::before { border-left-color: var(--desur-tip-bg); }
.leaflet-tooltip-right.desur-tooltip::before { border-right-color: var(--desur-tip-bg); }
.desur-card { display: flex; gap: 12px; padding: 12px; align-items: flex-start; }
.desur-card-logo { flex: 0 0 52px; width: 52px; height: 52px; }
.desur-card-img { width: 52px; height: 52px; object-fit: contain; border-radius: 50%; display: block; }
.desur-card-logo .desur-initials { display: flex; border-radius: 50%; font-size: 16px; }
.desur-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.desur-card-name { font-size: 14px; line-height: 1.25; text-transform: uppercase; letter-spacing: .3px; color: var(--desur-tip-title); }
.desur-card-loc { font-size: 12px; color: var(--desur-tip-muted); line-height: 1.3; }
.desur-card-desc { font-size: 12.5px; color: var(--desur-tip-text); line-height: 1.4; margin-top: 4px; }

/* Aviso de zoom */
.desur-hint {
	position: absolute; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
	background: rgba(0, 0, 0, .45); color: #fff; font-size: 16px; text-align: center; padding: 20px;
	opacity: 0; pointer-events: none; transition: opacity .25s;
}
.desur-hint.on { opacity: 1; }

/* Lista lateral opcional: su alto lo marca el mapa (contain: size) y hace scroll si hay más ítems */
.desur-mapa-list {
	list-style: none; margin: 0; padding: 0; flex: 0 0 var(--desur-list-w, 280px); overflow-y: auto; contain: size;
	display: flex; flex-direction: column; gap: 8px;
}
.desur-list-item {
	display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; cursor: pointer;
	background: var(--desur-list-btn-bg, #fff); border: 1px solid #d9dde1; border-radius: 4px; padding: 8px 10px; color: #222;
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.desur-mapa-wrap .desur-list-item:hover,
.desur-mapa-wrap .desur-list-item:focus-visible,
.desur-mapa-wrap .desur-list-item.is-active {
	background-color: var(--desur-list-btn-hover-bg, #f4f6fb);
	border-color: var(--desur-list-btn-hover, var(--desur-hover, #CC3366));
	box-shadow: 0 3px 10px rgba(0, 0, 0, .14);
}
.desur-list-img { flex: 0 0 32px; width: 32px; height: 32px; object-fit: contain; border-radius: 50%; }
.desur-list-item .desur-initials { font-size: 11px; border-radius: 50%; }
.desur-list-item span { display: flex; flex-direction: column; min-width: 0; }
.desur-list-name { font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: var(--desur-tip-title); transition: color .15s ease; }
.desur-mapa-wrap .desur-list-item:hover .desur-list-name,
.desur-mapa-wrap .desur-list-item:focus-visible .desur-list-name,
.desur-mapa-wrap .desur-list-item.is-active .desur-list-name {
	color: var(--desur-list-btn-hover, var(--desur-hover, #CC3366));
}
.desur-list-loc { font-size: 11px; color: var(--desur-tip-muted); transition: color .15s ease; }

/* Botón «Ver todos» en la esquina superior derecha del mapa */
.desur-btn-reset {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--desur-reset-bg, #fff);
	color: var(--desur-reset-color, var(--desur-accent, #3C489F));
	border: 1px solid rgba(0, 0, 0, .14);
	border-radius: 6px;
	padding: 7px 12px;
	font: 600 12.5px/1.2 sans-serif;
	letter-spacing: .2px;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
	pointer-events: auto;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.desur-btn-reset svg {
	width: 14px; height: 14px; flex-shrink: 0; display: block;
}
.desur-btn-reset:hover,
.desur-btn-reset:focus-visible {
	background: var(--desur-reset-hover-bg, var(--desur-accent, #3C489F));
	color: var(--desur-reset-hover-color, #fff);
	border-color: var(--desur-reset-hover-bg, var(--desur-accent, #3C489F));
	box-shadow: 0 4px 12px rgba(0, 0, 0, .24);
	transform: translateY(-1px);
}
.desur-btn-reset:active {
	transform: translateY(0);
	box-shadow: 0 2px 4px rgba(0, 0, 0, .18);
}

/* Móvil / tablet vertical: primero el mapa completo y debajo la lista de botones */
@media (max-width: 767px) {
	.desur-mapa-wrap { flex-direction: column; gap: 14px; }
	.desur-mapa-canvas {
		flex: none; width: 100%;
		height: min(var(--desur-h, 600px), 75vh); min-height: 340px;
	}
	.desur-mapa-list {
		flex: none; contain: none; overflow: visible; max-height: none;
		display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
	}
	.desur-mapa-list li { min-width: 0; }
	.desur-list-item { padding: 10px; }
	.desur-list-item span { overflow: hidden; }
	.desur-list-name, .desur-list-loc { overflow-wrap: anywhere; }
	.leaflet-tooltip.desur-tooltip { width: min(var(--desur-tip-w), 230px); }
	.desur-btn-reset { padding: 8px 10px; }
}
@media (max-width: 479px) {
	.desur-mapa-list { grid-template-columns: 1fr; }
	.desur-btn-reset span { display: none; }
}