/* Pines del mapa de reportes: gota de color con el emoji de la categoría.
   Se dibujan con CSS (divIcon) para no depender de las imágenes de Leaflet. */
.pin-reporte {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  font-size: 15px;
}
.pin-reporte > span {
  transform: rotate(45deg);
}
.pin-reporte--resuelto {
  opacity: 0.55;
  filter: grayscale(0.4);
}