body {
    margin: 0;
    padding: 0;
}
#map {
    width: 100%;
    height: 700px;
}

.leyenda {
    background: white;
    padding: 10px;
    border-radius: 5px;
    line-height: 24px;
}

.leyenda i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}

.info-panel {
    padding: 10px;
    background: white;
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    position: absolute;
    bottom: 450px;
    right: 20px;
    z-index: 1000;
    max-width: 300px;
}

.info-panel h4 {
    margin: 0 0 10xp;
    color: #444;
}



.sidebar-content {
  padding: 10px;
}


/* Fondo general del sidebar */
.leaflet-sidebar {
  background-color: #1a1a1a; /* fondo oscuro elegante */
  font-family: 'Roboto', sans-serif;
  color: #e0e0e0;
  box-shadow: 4px 0 15px rgba(0, 0, 0, 0.5);
  border-right: 1px solid #333;
}

/* Tabs laterales (iconos) */
.leaflet-sidebar-tabs {
  background-color: #121212;
  border-right: 1px solid #333;
}

.leaflet-sidebar-tabs > ul > li {
  color: #999;
  transition: background 0.3s;
}

.leaflet-sidebar-tabs > ul > li:hover {
  background-color: #2a2a2a;
  color: #fff;
}

.leaflet-sidebar-tabs > ul > li.active {
  background-color: #333;
  color: #4fc3f7;
}

/* //// */

/* Contenido del panel */
.leaflet-sidebar-content {
  /* padding: 20px; */
  font-size: 15px;
  line-height: 1.6;
  background-color: #1a1a1a;
}

/* Títulos */
.leaflet-sidebar-content h1,
.leaflet-sidebar-content h2,
.leaflet-sidebar-content h3 {
  /* color: #4fc3f7; */
  color: white;
  margin-top: 0;
}

/* Botón de cerrar */
.leaflet-sidebar-close {
  background-color: #2a2a2a;
  top: unset;
  color: #ccc;
  border: none;
  font-size: 20px;
  transition: background 0.2s;
}
.leaflet-sidebar-close:hover {
  background-color: #4fc3f7;
  color: #000;
  cursor: pointer;
}

#tourist-places{
 cursor: pointer;
}

#tourist-places li:hover {
  background-color: #4fc3f7;

}