.location-list-container {
  max-height: 570px; /* Altura máxima */
  overflow-y: auto; /* Scroll si es necesario */
  width: 100%; /* Ancho completo */
  padding: 10px; /* Espaciado interno */
  box-sizing: border-box; 
  background-color: #f8f9fa; /* Fondo ligeramente gris */
  border-radius: 8px; /* Bordes redondeados del contenedor */
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

.location-card {
  padding: 20px 15px; /* Espaciado interno mejorado */
  border: 1px solid #e0e0e0; /* Borde gris claro */
  border-radius: 8px; /* Bordes redondeados */
  margin-bottom: 15px; /* Separación entre tarjetas */
  width: 100%; /* Ancho completo */
  background-color: #fff; /* Fondo blanco */
  transition: all 0.3s ease; /* Transición suave para el hover */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.05); /* Sombra suave */
  cursor: pointer; /* Manito para indicar que es clicable */
}

.location-card:hover {
  background-color: #007bff; /* Cambia el fondo al azul al hacer hover */
  border-color: #007bff; /* Cambia el borde al azul al hacer hover */
  color: #fff; /* Cambia el texto a blanco */
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada */
}

.location-card h5 {
  font-size: 18px; /* Tamaño del título */
  font-weight: 600; /* Peso del título */
  margin-bottom: 1px; /* Separación del título con el texto */
  color: #333; /* Color del título */
}

.location-card p {
  margin-bottom: 5px; /* Margen inferior ajustado */
  color: #666; /* Texto gris oscuro */
    font-size: 13px;
}

.location-card:hover h5,
.location-card:hover p {
  color: #fff; /* Cambiar el texto a blanco en hover */
}

.location-card button {
  background-color: #000;
  color: #fff;
  padding: 10px 15px;
  border-radius: 5px;
  border: none;
  margin-top: 10px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.location-card button:hover {
  background-color: #ff6347; /* Color diferente en hover */
}


.services {
  margin-top: 10px;
}

.service-tag {
  margin-right: 10px;
  font-weight: bold;
}

.dot {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  display: inline-block;
}

.dot.red {
  background-color: red;
}

.dot.blue {
  background-color: blue;
}

.dot.green {
  background-color: green;
}

.dot.yellow {
  background-color: yellow;
}



.gs-mapa {
    padding: 15px;
}

.map-area {
  position: relative;
  width: 100%;
  height: 550px;
}

#map {
  width: 100%;
  height: 100%;
}