/* ENSA — Mapa Red de Atención (frontend)
   Paleta ENSA: rojo #e2001a, negro #1a1a1a, gris texto #747474,
   gris claro #f6f6f6, gris medio #ededed. Tipografía Maax (del tema). */

.erm-wrap {
	--erm-red: #e2001a;
	--erm-red-dark: #b80015;
	--erm-text: #1a1a1a;
	--erm-muted: #747474;
	--erm-light: #f6f6f6;
	--erm-mid: #ededed;
	--erm-list-width: 32%;
	--erm-map-height: 560px;
	/* Alto efectivo: el configurado, pero sin superar la ventana (header incl.). */
	--erm-h: clamp(380px, calc(100vh - 170px), var(--erm-map-height));
	color: var(--erm-text);
	font-family: inherit;
}

.erm-title {
	margin: 0 0 10px;
	font-size: 28px;
	font-weight: 700;
	color: var(--erm-text);
}
.erm-intro {
	margin: 0 0 24px;
	font-size: 16px;
	color: var(--erm-text);
}

/* --- Contenedor de dos columnas --- */
.erm-widget {
	--erm-h: clamp(380px, calc(100vh - 170px), var(--erm-map-height));
	display: grid;
	grid-template-columns: var(--erm-list-width) 1fr;
	position: relative;
	background: #fff;
	border: 1px solid var(--erm-mid);
}

/* --- Listado --- */
.erm-list {
	max-height: var(--erm-h);
	overflow-y: auto;
	background: #fff;
	border-right: 1px solid var(--erm-mid);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: #c8c8c8 transparent;
}
.erm-list::-webkit-scrollbar { width: 8px; }
.erm-list::-webkit-scrollbar-thumb { background: #c8c8c8; border-radius: 4px; }

.erm-search {
	position: sticky;
	top: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 13px clamp(14px, 2vw, 22px);
	background: #fff;
	border-bottom: 1px solid var(--erm-mid);
}
.erm-search-ico {
	flex: 0 0 16px;
	width: 16px; height: 16px;
	background: var(--erm-muted);
	-webkit-mask: no-repeat center / contain;
	mask: no-repeat center / contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z'/%3E%3C/svg%3E");
}
.erm-wrap .erm-search-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	box-shadow: none;
	background: none;
	font-family: inherit;
	font-size: 14px;
	color: var(--erm-text);
	padding: 4px 0;
}
.erm-wrap .erm-search-input:focus { outline: none; box-shadow: none; }
.erm-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.erm-wrap .erm-search-clear {
	flex: 0 0 auto;
	border: 0;
	background: var(--erm-mid);
	color: var(--erm-muted);
	width: 22px; height: 22px;
	padding: 0;
	border-radius: 50%;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
}
.erm-wrap .erm-search-clear:hover { background: #dcdcdc; color: var(--erm-text); }
.erm-search-empty {
	margin: 0;
	padding: 18px 20px;
	color: var(--erm-muted);
	font-size: 14px;
	text-align: center;
}

.erm-area[hidden],
.erm-area-list li[hidden] { display: none; }
.erm-area-title {
	margin: 0;
	padding: 14px clamp(14px, 2vw, 22px) 10px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .8px;
	color: var(--erm-red);
	text-transform: uppercase;
	position: sticky;
	top: 0;
	background: var(--erm-light);
	z-index: 2;
	border-bottom: 1px solid var(--erm-mid);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.erm-area-count {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--erm-muted);
}
.erm-has-search .erm-area-title { top: 51px; }
.erm-area-list { list-style: none; margin: 0; padding: 0; }
.erm-area-list li { margin: 0; }

.erm-wrap .erm-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	text-align: left;
	background: #fff;
	color: var(--erm-text);
	border: 0;
	border-radius: 0;
	border-bottom: 1px solid var(--erm-light);
	border-left: 3px solid transparent;
	padding: 12px clamp(14px, 2vw, 22px);
	cursor: pointer;
	font-family: inherit;
	box-shadow: none;
	transition: background .15s ease, border-color .15s ease;
}
.erm-wrap .erm-item:hover { background: var(--erm-light); border-left-color: var(--erm-red); color: var(--erm-text); }
.erm-wrap .erm-item:focus-visible { outline: 2px solid var(--erm-red); outline-offset: -2px; }
.erm-wrap .erm-item.is-active { background: #fdf0f1; border-left-color: var(--erm-red); }
.erm-item-pin {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	object-fit: contain;
	margin-top: 1px;
}
.erm-item-anchor {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin: 1px 2px 0;
	fill: var(--erm-red);
}
.erm-item-text { display: block; min-width: 0; }
.erm-item-name {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--erm-text);
	line-height: 1.25;
}
.erm-item.is-active .erm-item-name { color: var(--erm-red); }
.erm-item-addr {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	font-weight: 400;
	color: var(--erm-muted);
	line-height: 1.35;
}

/* --- Mapa --- */
.erm-map-col { position: relative; }
.erm-map {
	width: 100%;
	height: var(--erm-h);
	background: var(--erm-mask, #ececec);
	z-index: 1;
}
.erm-map.leaflet-container { font-family: inherit; }
.erm-map .leaflet-control-attribution { display: none; }
.erm-map .leaflet-bar a {
	color: var(--erm-text);
	width: 34px;
	height: 34px;
	line-height: 34px;
}
.erm-map .leaflet-bar a:hover { color: var(--erm-red); }
.erm-map .leaflet-bar { border: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); border-radius: 0; }
.erm-map .leaflet-bar a:first-child,
.erm-map .leaflet-bar a:last-child { border-radius: 0; }

.erm-wrap .erm-reset {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 500;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--erm-red);
	color: #fff;
	border: 0;
	border-radius: 0;
	padding: 10px 16px 10px 14px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
	transition: background .15s ease;
}
.erm-wrap .erm-reset:hover { background: var(--erm-red-dark); color: #fff; }
.erm-wrap .erm-reset[hidden] { display: none; }
.erm-reset-icon {
	width: 15px; height: 15px;
	background: currentColor;
	-webkit-mask: no-repeat center / contain;
	mask: no-repeat center / contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3L3 6v15l6-3 6 3 6-3V3l-6 3-6-3z' fill='white'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3L3 6v15l6-3 6 3 6-3V3l-6 3-6-3z' fill='white'/%3E%3C/svg%3E");
}

/* --- Tarjeta (popup) --- */
.leaflet-popup.erm-popup .leaflet-popup-content-wrapper {
	border-radius: 0;
	box-shadow: 0 8px 26px rgba(0, 0, 0, .22);
	padding: 0;
	overflow: hidden;
}
.leaflet-popup.erm-popup .leaflet-popup-content {
	margin: 0;
	width: 270px !important;
	line-height: 1.4;
}
.leaflet-popup.erm-popup .leaflet-popup-close-button { color: var(--erm-muted); top: 8px; right: 6px; }
.leaflet-popup.erm-popup .leaflet-popup-close-button:hover { color: var(--erm-red); }

.erm-card-head {
	background: #fff;
	border-top: 4px solid var(--erm-red);
	border-bottom: 1px solid var(--erm-mid);
	padding: 14px 16px 12px;
}
.erm-card-logo {
	display: block;
	max-height: 34px;
	max-width: 160px;
	width: auto;
	margin-bottom: 10px;
}
.erm-card-area {
	display: block;
	font-size: 11px;
	letter-spacing: .7px;
	text-transform: uppercase;
	color: var(--erm-red);
	font-weight: 700;
}
.erm-card-name {
	display: block;
	margin-top: 2px;
	font-size: 17px;
	font-weight: 700;
	color: var(--erm-text);
	line-height: 1.2;
}
.erm-card-body { padding: 12px 16px 14px; }
.erm-card-row {
	display: flex;
	gap: 8px;
	font-size: 13px;
	color: var(--erm-text);
	margin: 0 0 8px;
}
.erm-card-row:last-child { margin-bottom: 0; }
.erm-card-row .erm-ico {
	flex: 0 0 15px;
	width: 15px; height: 15px;
	margin-top: 2px;
	fill: var(--erm-red);
}
.erm-card-row a { color: var(--erm-text); text-decoration: none; word-break: break-word; }
.erm-card-row a:hover { color: var(--erm-red); text-decoration: underline; }
.erm-card-row .erm-card-emails a { display: block; }

/* --- Puerto (mini ancla roja) --- */
.erm-anchor-icon { background: none; border: 0; }
.erm-anchor {
	display: block;
	width: 22px;
	height: 22px;
	fill: var(--erm-red);
	filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px rgba(255, 255, 255, .55)) drop-shadow(0 1px 3px rgba(0, 0, 0, .6));
	transition: transform .12s ease;
}
.erm-anchor-icon:hover .erm-anchor { transform: scale(1.3); }

/* --- Cluster --- */
.erm-cluster {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--erm-text);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	border-radius: 50%;
	border: 3px solid #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.erm-cluster:hover { background: var(--erm-red); }

/* --- Sucursal (badge con isotipo ENSA) --- */
.erm-badge-icon { background: none; border: 0; }
.erm-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	background: #fff;
	border: 3px solid var(--erm-red);
	border-radius: 50%;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
	position: relative;
	transition: transform .12s ease;
}
.erm-badge::after {
	content: "";
	position: absolute;
	bottom: -9px;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: var(--erm-red);
}
.erm-badge img {
	width: 28px;
	height: 28px;
	object-fit: contain;
	display: block;
}
.erm-badge-icon:hover .erm-badge { transform: scale(1.08); }

/* --- Toggle de lista (solo móvil) --- */
.erm-wrap .erm-list-toggle {
	display: none;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--erm-red);
	color: #fff;
	border: 0;
	border-radius: 0;
	padding: 14px 16px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
}
.erm-list-toggle-icon {
	width: 18px; height: 12px;
	background:
		linear-gradient(currentColor, currentColor) top/100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) center/100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) bottom/100% 2px no-repeat;
}
.erm-list-toggle[aria-expanded="true"] .erm-list-toggle-icon {
	background: linear-gradient(currentColor, currentColor) center/100% 2px no-repeat;
}

/* --- Puertos: ventana de N ítems completos, sin barra, con flechas (escritorio) --- */
.erm-scroll-btn { display: none; }
@media (min-width: 861px) {
	.erm-list.erm-has-scroller { overflow: hidden; }
	.erm-area-scroll { position: relative; }
	.erm-area-viewport {
		overflow-y: auto;
		scrollbar-width: none;
		scroll-snap-type: y mandatory;
		overscroll-behavior: contain;
	}
	.erm-area-viewport::-webkit-scrollbar { display: none; }
	.erm-area-viewport .erm-area-list > li { scroll-snap-align: start; }
	.erm-wrap .erm-scroll-btn {
		display: block;
		position: absolute;
		left: 6px;
		z-index: 2;
		width: 26px;
		height: 26px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: transparent;
		box-shadow: none;
		cursor: pointer;
		transition: opacity .2s ease, background-color .2s ease;
	}
	.erm-wrap .erm-scroll-btn::before {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: 9px;
		height: 9px;
		border-left: 1.5px solid #9a9a9a;
		border-top: 1.5px solid #9a9a9a;
		transition: border-color .2s ease;
	}
	.erm-wrap .erm-scroll-up { top: 8px; }
	.erm-wrap .erm-scroll-up::before { transform: translate(-50%, -25%) rotate(45deg); }
	.erm-wrap .erm-scroll-down { bottom: 8px; }
	.erm-wrap .erm-scroll-down::before { transform: translate(-50%, -75%) rotate(-135deg); }
	.erm-wrap .erm-scroll-btn:hover,
	.erm-wrap .erm-scroll-btn:focus-visible { background: var(--erm-light); outline: none; }
	.erm-wrap .erm-scroll-btn:hover::before,
	.erm-wrap .erm-scroll-btn:focus-visible::before { border-color: var(--erm-red); }
	.erm-wrap .erm-scroll-btn.is-off { opacity: 0; pointer-events: none; }
}

@media (max-width: 860px) {
	.erm-widget { grid-template-columns: 1fr; }
	.erm-wrap .erm-list-toggle { display: flex; order: 1; }
	.erm-list {
		order: 2;
		max-height: 0;
		overflow: hidden;
		border-right: 0;
		transition: max-height .3s ease;
	}
	.erm-widget.erm-list-open .erm-list {
		max-height: 60vh;
		overflow-y: auto;
		border-bottom: 1px solid var(--erm-mid);
	}
	.erm-map-col { order: 3; }
	.erm-map { height: min(var(--erm-map-height), 70vh); }
}



/* Pantallas con escala (125 %, 150 %…): el navegador agranda cada tile y su
   borde se mezcla con transparente → líneas finas. 1px de solape las tapa. */
@media (min-resolution: 1.01dppx) {
	.erm-map img.leaflet-tile {
		width: 257px !important;
		height: 257px !important;
		/* Leaflet 1.9 usa plus-lighter (suma brillo): con solape daría líneas blancas. */
		mix-blend-mode: normal !important;
	}
}