body {
    font-family: "Fira Code", monospace !important;
}

/* Aplica a todo el mapa Leaflet y sus controles */
.leaflet-container,
.leaflet-sidebar,
.leaflet-popup,
.leaflet-control {
    font-family: "Fira Code", monospace !important;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  width: 100%;
  height: 100vh;
  position: relative;
  z-index: 1;
}

.leaflet-sidebar {
  z-index: 1000;
}

.leaflet-sidebar .leaflet-sidebar-content {
  max-height: 100%;
  overflow-y: auto;
}

/* Cambiar el fondo del header completo */
.leaflet-sidebar-header {
    background: #380808;   
    color: #fff;           /* texto blanco */
    font-weight: bold;
}

.leaflet-sidebar-tabs {
    background: #380808;   
    color: #fff;
}

.leaflet-sidebar-tabs > li.active,
.leaflet-sidebar-tabs > ul > li.active {
    background-color: #380808 !important; 
    color: #fff !important; 
}

.leaflet-sidebar-tabs > li.active i {
    background-color: #380808 !important;
    color: #fff !important;
    border-radius: 5px;
    padding: 5px;
}

/* Íconos de tabs inactivas */
.leaflet-sidebar-tabs > li > a i {
    color: #fff !important;   /* blancos */
}

/* Opcional: cambiar también el <a> entero por si hay texto */
.leaflet-sidebar-tabs > li > a {
    color: #fff !important;
}

/* Forzar blanco en todos los íconos inactivos y activos */
.leaflet-sidebar-tabs li a,
.leaflet-sidebar-tabs li a i {
    color: #fff !important;
}

.leaflet-sidebar-tabs li a:hover i {
    color: #AF7502 !important; /* ejemplo: amarillo en hover */
}



/* Ajuste móvil opcional */
@media (max-width: 768px) {
  .leaflet-sidebar {
    width: 80%;
  }
}