[v-cloak] {
  display: none;
}

h2.loading-state {
  color: #000000;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
}

.no-results-state {
  color: #000000;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
}

/* Estilos para Leaflet Map */
#leaflet-map {
  position: relative;
  width: 100%;
  height: 100%;
  flex: 1;
  z-index: 1;
}

/* Prevenir que el mapa reciba focus y cause scroll */
.leaflet-container {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.leaflet-pane {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* Asegurar que los popups no causen problemas */
.leaflet-popup {
  z-index: 1001 !important;
}

.leaflet-popup-content-wrapper {
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Prevenir que el contenedor del mapa cause scroll */
.row-map__map {
  overflow: hidden;
  position: relative;
  height: 100%;
  max-height: 700px;
  display: flex;
  flex-direction: column;
}

/* Contenedor de contenido del mapa - permitir flexbox */
.row-map__content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.row-map__content .cols_group {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.row-map__content .column_6 {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Asegurar visibilidad de marcadores CircleMarker */
.leaflet-overlay-pane svg,
.leaflet-overlay-pane canvas {
  position: relative !important;
  z-index: 400 !important;
}

.leaflet-marker-pane {
  z-index: 600 !important;
}

/* Estilos para CircleMarker */
.leaflet-interactive {
  cursor: pointer;
}

/* Estilos para marcador personalizado */
.custom-marker-icon {
  background: transparent;
  border: none;
}

.custom-marker-icon svg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.row-map__list {
  height: 100%;
  max-height: 700px;
  overflow-y: auto;
}