.e-con.contenedor-mapa-lista {
  --height: 80vh;
  --display: flex;
}

.contenedor-mapa-lista {
  flex-direction: column;
  max-height: 600px;
  gap: 20px;
}

.panel-lateral-recursos-mapa,
.mapa-custom {
  border-radius: 4px;
}

.panel-lateral-recursos-mapa {
  max-height: 48%;
  padding: 10px;
  background: var(--color-gris-claro);
}

.panel-lateral-recursos-mapa .grupos-capas {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
}

.panel-lateral-recursos-mapa .grupo-capa {
  display: flex;
  flex-direction: column;
}

.panel-lateral-recursos-mapa .cabecera-grupo-capa {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.panel-lateral-recursos-mapa .cabecera-grupo-capa:hover {
  opacity: 0.8;
}

.panel-lateral-recursos-mapa .titulo-capa {
  margin-bottom: 5px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
}

.panel-lateral-recursos-mapa .lista-recursos {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.panel-lateral-recursos-mapa .grupo-capa:not(.desplegado) .lista-recursos {
  display: none;
}

/* Reutilizar estilos de flecha para grupos y recursos */
.panel-lateral-recursos-mapa .flecha {
  font-size: 1.2em;
  transition: transform 0.3s ease;
}

.panel-lateral-recursos-mapa .grupo-capa.desplegado .cabecera-grupo-capa .flecha,
.panel-lateral-recursos-mapa .recurso-desplegable.desplegado .cabecera-recurso .flecha {
  transform: rotate(180deg);
}

.panel-lateral-recursos-mapa .recurso-desplegable {
  border-radius: 4px;
  overflow: hidden;
}

.panel-lateral-recursos-mapa .recurso-desplegable.resaltado {
  animation: parpadeo 1s ease;
}

.panel-lateral-recursos-mapa .cabecera-recurso {
  display: flex;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  padding: 6px;
  background: #fff;
  transition: background 0.3s;
}

.panel-lateral-recursos-mapa .recurso-desplegable.desplegado .cabecera-recurso {
  flex-direction: column;
  align-items: unset;
}

.panel-lateral-recursos-mapa .cabecera-recurso:hover {
  background: var(--color-azul-pastel);
}

.panel-lateral-recursos-mapa .imagen-recurso {
  width: 60px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
  transition: width 0.25s, aspect-ratio 0.25s;
}

.panel-lateral-recursos-mapa .recurso-desplegable.desplegado .imagen-recurso {
  width: 100%;
  aspect-ratio: 21/9;
}

.panel-lateral-recursos-mapa .nombre-recurso-y-flecha {
  display: flex;
  gap: 10px;
  flex: 1;
  align-items: center;
}

.panel-lateral-recursos-mapa .nombre-recurso {
  flex-grow: 1;
  font-size: 1.2em;
  margin-bottom: 0;
}

.panel-lateral-recursos-mapa .descripcion-recurso {
  display: none;
  background: #fff;
  padding: 8px 10px;
  font-size: 0.9em;
  border-top: 1px solid #ddd;
}

.panel-lateral-recursos-mapa .recurso-desplegable.desplegado .descripcion-recurso {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: start;
}

.mapa-custom {
  flex-grow: 1;
  width: 100%;
  height: 100%;
  box-shadow: var(--sombra-predeterminada);
}

/* GESTIÓN DE MARCADORES */
/* Agrupación de marcadores */
.mapa-custom .marker-cluster-small,
.mapa-custom .marker-cluster-medium,
.mapa-custom .marker-cluster-large {
  background-color: #ffffff;
  box-shadow: var(--sombra-predeterminada);
}

.mapa-custom .marker-cluster-small div {
  background-color: var(--color-terciario);
  color: #ffffff;
}

.mapa-custom .marker-cluster-medium div {
  background-color: var(--color-primario);
  color: #ffffff;
}

.mapa-custom .marker-cluster-large div {
  background-color: var(--color-secundario);
  color: #3d2b00;
}
/* Fin agrupación de marcadores */

/* Iconos de marcadores */
.mapa-custom .leaflet-popup {
  margin-bottom: 75px;
}

.mapa-custom .icon-stack {
  position: relative;
  width: 60px;
  height: 60px;
}

.mapa-custom .icon-stack .material-symbols-outlined {
  position: absolute;
  top: -10px;
  left: 0;
  text-align: center;
}

.mapa-custom .material-symbols-outlined.top-icon {
  font-size: 24px;
  top: 0;
  left: 27%;
  background: white;
  color: var(--porto-body-color);
  border-radius: 50%;
  padding: 2px;
}

.mapa-custom .material-symbols-outlined.base-icon {
  font-size: 60px;
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48;
}

.tipo-alojamiento .base-icon {
  color: #ff6f00;
}

.tipo-artesania .base-icon {
  color: #a1887f;
}

.tipo-centro-salud .base-icon {
  color: #d32f2f;
}

.tipo-club-buceo .base-icon {
  color: #0288d1;
}

.tipo-espacio-deportivo .base-icon {
  color: #388e3c;
}

.tipo-espacio-mice .base-icon {
  color: #6a1b9a;
}

.tipo-espacio-natural .base-icon {
  color: #2e7d32;
}

.tipo-espacio-patrimonial .base-icon {
  color: #8d6e63;
}

.tipo-evento .base-icon {
  color: #ff1744;
}

.tipo-farmacia .base-icon {
  color: #43a047;
}

.tipo-fiesta .base-icon {
  color: #e91e63;
}

.tipo-folleto .base-icon {
  color: #546e7a;
}

.tipo-golf-destination .base-icon {
  color: #33691e;
}

.tipo-guia-turistico .base-icon {
  color: #009688;
}

.tipo-jardin-botanico-miniatura .base-icon {
  color: #8bc34a;
}

.tipo-lugar-local .base-icon {
  color: #ff9800;
}

.tipo-parque-inclusivo .base-icon {
  color: #00bcd4;
}

.tipo-playa .base-icon {
  color: #03a9f4;
}

.tipo-punto-inmersion .base-icon {
  color: #512da8;
}

.tipo-restaurante .base-icon {
  color: #d84315;
}

.tipo-ruta-cicloturista .base-icon {
  color: #00796b;
}

.tipo-ruta-senderista .base-icon {
  color: #689f38;
}

.tipo-transporte .base-icon {
  color: #3f51b5;
}

.tipo-turismo-industrial .base-icon {
  color: #455a64;
}
/* Fin iconos de marcadores */

/* Estilo de los popups */
.mapa-custom .leaflet-popup-content {
  width: max-content !important;
  max-width: 80vw;
}

.mapa-custom:has(.tipo-recurso) .leaflet-popup-content-wrapper {
  padding: 0;
  overflow: hidden;
  border-radius: 4px;
}

.mapa-custom:has(.tipo-recurso) .leaflet-popup-content {
  margin: 0;
}

.mapa-custom:has(.tipo-recurso) .leaflet-popup-close-button {
  color: #ffffff;
  font-size: 20px;
}

.mapa-custom .contenido-popup {
  padding: 10px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
}

.mapa-custom .tipo-recurso {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: var(--color-primario);
  color: #ffffff;
  font-weight: bold;
  padding: 10px;
}

.mapa-custom .tipo-recurso .icono-recurso {
  color: var(--color-primario);
  background-color: #ffffff;
  border-radius: 100%;
  padding: 5px;
  font-size: 18px;
}

.mapa-custom .imagen-recurso-popup {
  width: 100px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
}

.mapa-custom h4 {
  line-height: 20px;
}
/* Fin estilo de los popups */

/* FIN GESTIÓN DE MARCADORES */

/* MEDIAS */
@media (min-width: 768px) {
  .contenedor-mapa-lista {
    flex-direction: row;
  }

  .panel-lateral-recursos-mapa {
    width: 350px;
    max-height: 100%;
  }

  .mapa-custom {
    width: unset;
    height: 100%;
  }
}

@media (min-width: 992px) {
  .panel-lateral-recursos-mapa {
    width: 400px;
  }
}

/* ANIMACIONES */
@keyframes parpadeo {
  0% {
    box-shadow: 0 0 0px var(--color-primario);
  }
  50% {
    box-shadow: 0 0 10px var(--color-secundario);
  }
  100% {
    box-shadow: 0 0 0px var(--color-terciario);
  }
}