.icon-bar {
	    position: fixed;
	    bottom: 0;
	    left: 0;
	    right: 5;
	    max-width: 400px;
	    margin: 0 auto;
	    display: flex;
	    justify-content: space-between;
	    background-color: #ffffff;
	    padding: env(safe-area-inset-bottom) 0;
	    /* notch-safe en iOS */
	    
	    z-index: 1000;
	}


	.icon-bar .nav-link {
	    flex: 1;
	    text-align: center;
	    padding: 0.1em 0;
	    border-bottom: 4px solid transparent;
	    transition: background-color 0.3s, border-color 0.3s;
	}

	.icon-bar .nav-link img {
	    width: 80px;
	    /* usa píxeles o rem para consistencia */
	    height: auto;
	}

	.icon-bar .nav-link:hover {
	    background-color: #a0e1f5;
	}

	.icon-bar .nav-link.active {
	    background-color: #60c6d8;
	    border-bottom-color: #00a1ba;
	}





.icon-sit {
	position: fixed;
	top: 50%;
	background-color: #ffffff;
	z-index: 10000;
  }





html, body {
			
			height: 100%;
			width: 100%;
			margin: auto;
			font-family: Arial, Helvetica, sans-serif;
			
			
}
		
.leaflet-container {
			height: 100%;
			width: 100%;
					
			
		
}
		
.content {
			max-width: 900px;
			margin: auto;
			background: white;
			padding: 4px;
			font-family: Arial, Helvetica, sans-serif;
}
		
		

	




/* Asegura que #map sea un contenedor relativo */
#map {
  position: relative;
}

/* Posiciona el selector en la esquina superior derecha */
#map .select {
  position: absolute;
  top: 10px;
  left: 50px;
  z-index: 1000;            /* Encima de las capas del mapa */
  
  background: white;        /* Fondo para destacar */
  padding: 6px 8px;         /* Espacio interior */
  border-radius: 4px;       /* Bordes redondeados */
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* Evita que al hacer clic en el select se mueva el mapa */
#map .select select {
  cursor: pointer;
}
#map .select {
  /* Deshabilita la propagación de clics al mapa */
  pointer-events: auto;
}