/* ============================================================================
   ESTILOS DEL MAPA DE IGLESIAS — misma familia visual que el lector
   ========================================================================== */

/* El contenedor: alto generoso y esquinas suaves, como una tarjeta. */
.sb-iglesias-mapa {
	height: min(78vh, 760px);
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid #e6dcc3;
	position: relative;
	z-index: 0; /* que los menús del sitio queden por encima del mapa */
}

/* El aviso flotante ("Cargando…" / "Acércate para ver más"). */
.sb-mapa-aviso {
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--sb-tinta, #2a2216);
	color: var(--sb-crema, #faf6ec);
	font: 600 0.82rem/1 'Inter', system-ui, sans-serif;
	padding: 8px 16px;
	border-radius: 999px;
	z-index: 1000; /* por encima de los mosaicos de Leaflet */
	pointer-events: none; /* que no estorbe al arrastrar el mapa */
}

/* Pantalla de CARGA: tapa el mapa (fondo crema) con un spinner y "Cargando…"
   mientras se prepara el mapa y se verifica tu ubicación. Al ubicarte, se
   desvanece y aparece el mapa ya centrado en ti. */
.sb-mapa-cargando {
	position: absolute;
	inset: 0;
	z-index: 1200; /* por encima de todo el mapa */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	background: var(--sb-crema, #faf6ec);
	color: var(--sb-tinta-suave, #75684f);
	font: 600 0.95rem/1.4 'Inter', system-ui, sans-serif;
	text-align: center;
	padding: 20px;
	transition: opacity .5s ease;
}
.sb-mapa-cargando.sb-oculto { opacity: 0; pointer-events: none; } /* se desvanece al revelar */
.sb-mapa-spinner {
	width: 42px; height: 42px;
	border: 4px solid #e6dcc3;
	border-top-color: var(--sb-oro, #9a7b3f); /* el oro de la marca gira */
	border-radius: 50%;
	animation: sb-girar 0.9s linear infinite;
}
@keyframes sb-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sb-mapa-spinner { animation: none; } }

/* El globito de cada iglesia. */
.sb-popup { font-family: 'Inter', system-ui, sans-serif; min-width: 180px; }
.sb-popup strong { font-family: 'Literata', Georgia, serif; font-size: 1rem; color: var(--sb-tinta, #2a2216); }
.sb-popup-den { color: var(--sb-tinta-suave, #75684f); font-size: 0.78rem; text-transform: capitalize; margin-top: 2px; }
.sb-popup-enlaces { display: flex; gap: 14px; margin-top: 9px; }
.sb-popup-enlaces a { color: var(--sb-oro, #9a7b3f); font-weight: 600; font-size: 0.85rem; text-decoration: none; }
.sb-popup-enlaces a:hover { text-decoration: underline; }

/* Datos ricos que se cargan al abrir el globito (foto, teléfono, web…). */
.sb-popup-extra { margin-top: 8px; }
.sb-popup-foto {
	width: 100%;
	max-height: 150px;
	object-fit: cover;
	border-radius: 8px;
	margin-bottom: 8px;
	display: block;
}
.sb-popup-datos { color: var(--sb-tinta-suave, #75684f); font-size: 0.82rem; margin-top: 4px; }
.sb-popup-web {
	display: inline-block;
	margin-top: 6px;
	color: var(--sb-oro, #9a7b3f);
	font-weight: 600;
	font-size: 0.85rem;
	text-decoration: none;
}
.sb-popup-web:hover { text-decoration: underline; }

/* El icono de iglesia: una sombra suave para que despegue del mapa. */
.sb-icono-iglesia svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }

/* "Aquí estás tú": un punto azul con un anillo que late. */
.sb-yo-punto {
	display: block;
	width: 14px;
	height: 14px;
	margin: 2px;
	border-radius: 50%;
	background: #2b6cff;
	border: 2px solid #fff;
	box-shadow: 0 0 0 rgba(43, 108, 255, 0.5);
	animation: sb-latido 2s infinite;
}
@keyframes sb-latido {
	0%   { box-shadow: 0 0 0 0 rgba(43, 108, 255, 0.45); }
	70%  { box-shadow: 0 0 0 14px rgba(43, 108, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(43, 108, 255, 0); }
}

/* El botón "cerca de mí" bajo los controles de zoom. */
.sb-btn-cerca {
	width: 34px;
	height: 34px;
	display: flex;               /* centra el icono SVG dentro del botón */
	align-items: center;
	justify-content: center;
	background: #fff;
	color: var(--sb-oro, #9a7b3f);              /* el alfiler toma el oro de la marca (currentColor) */
	border: 2px solid rgba(0, 0, 0, 0.2);
	border-radius: 6px;
	cursor: pointer;
}
.sb-btn-cerca:hover { background: #f4f4f4; color: #7a5f2d; }

/* Las burbujas del clúster, tintadas al oro de la marca (encima de los
   verdes/amarillos de fábrica de MarkerCluster). */
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large {
	background: rgba(154, 123, 63, 0.35);
}
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div {
	background: rgba(154, 123, 63, 0.85);
	color: #fff;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
}

/* --- LEYENDA del mapa: distingue nuestras iglesias (con ficha) de las de OSM --- */
.sb-mapa-leyenda {
	background: rgba(255, 255, 255, .93);
	border-radius: 10px;
	padding: 8px 12px;
	font: 500 12px/1.2 'Inter', system-ui, sans-serif;
	color: #4a4030;
	box-shadow: 0 2px 10px rgba(24, 24, 48, .18);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.sb-leg-item { display: flex; align-items: center; gap: 8px; }
.sb-leg-pin { flex: none; display: inline-block; border-radius: 50%; }
/* El marcador DESTACADO (nuestra ficha): vino con borde oro, más grande. */
.sb-leg-ficha { width: 15px; height: 15px; background: #5a1220; border: 2px solid #c9a55e; }
/* El marcador normal (OpenStreetMap): dorado pequeño. */
.sb-leg-osm { width: 11px; height: 11px; background: #9a7b3f; border: 2px solid #fff; }