body { 
    padding: 0; 
    margin: 0; 
} 
html, body, #map { 
    height: 100%; 
}
.leaflet-tile {
    filter: grayscale(100%);
}
.leaflet-control-layers-expanded { 
background: #675e5e none repeat scroll 0 0; 
color: #ffffff; 
padding: 6px 10px 6px 6px; 
font-family: 'Times New Roman', Times, serif;
width: 125px;
height: auto;
} 


/* Estilo personalizado para los radios (capas base) */
.leaflet-control-layers-list input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    border: 2px solid #9F2241;
    width: 20px;
    height: 20px;
    border-radius: 50%; /* Forma circular para el radio */
    outline: none;
    cursor: pointer;
    margin-right: 5px;
}

/* Color del radio cuando está seleccionado */
.leaflet-control-layers-list input[type="radio"]:checked {
    
    background-color: #BC955C; /* Cambiar color cuando está seleccionado */
    border-color: #BC955C;
    
}

/* Pseudo-elemento para mostrar un punto en el centro del radio cuando esta seleccionado */
.leaflet-control-layers-list input[type="radio"]:checked::after {
    content: '';
    width: 12px;
    height: 12px;
    background-color: #235B4E;
    border-radius: 50%;
    display: block;
    position: relative;
    top: 2px;
    left: 2px;
}


/* Estilo personalizado para los checkboxes */
.leaflet-control-layers-list input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    border: 2px solid #9F2241;
    width: 19px;
    height: 19px;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    margin-right: 4px;
}

/* Color del checkbox cuando está seleccionado */
.leaflet-control-layers-list input[type="checkbox"]:checked {
    background-color: #BC955C; /* Color cuando está seleccionado */
    border-color: #BC955C; /* Color del borde cuando está seleccionado */
}

/* Pseudo-elemento para mostrar un símbolo de check cuando esté seleccionado */
.leaflet-control-layers-list input[type="checkbox"]:checked::after {
    content: '✔'; /* Símbolo de check */
    font-size: 15px;
    color: #235B4E;
    display: block;
    text-align: center;
    line-height: 19px;
}

/* Estulo de los popup*/
.leaflet-popup-content { 
    
    padding: 1px; 
    background:#000000; 
   } 
   .leaflet-popup-content-wrapper{ 
    background:#7d3b31; 
    color: #ffffff;   
   } 

   /* Estilo de zoom*/
   .leaflet-bar a {
    background-color: #675e5e;
    border-bottom: 1px solid #fffcfc;
    width: 26px;
    height: 26px;
    line-height: 26px;
    display: block;
    text-align: center;
    text-decoration: none;
    color: rgb(255, 255, 255);
}

.leaflet-bar a:hover {
    background-color: #BC955C;  /* Cambia el fondo del botón cuando está en hover */
    box-shadow: none;           /* Elimina el resplandor o sombra del botón */
}

/* Estilo del buscador */
.leaflet-control-search.search-exp {
    background: #675e5e;
    border: 2px solid rgb(255 33 33 / 14%);
    background-clip: padding-box;
}

.search-input {
    font-family: 'Times New Roman', Times, serif;

}
.leaflet-control-search .search-button {
    display: block;
    float: left;
    width: 25px;
    height: 25px;
    background: url('https://antonio96.neocities.org/mapa_web/leaflet-search-master/images/search-icon.png') no-repeat 4px 4px #675e5e;
    border-radius: 5px;

}

.search-button {
    margin-top: 3px ;
}


    /* Personaliza el efecto del botón cuando pasas el mouse */
.leaflet-control-search .search-button:hover {

    background-color: #BC955C;  /* Cambia el fondo del botón cuando está en hover */
    box-shadow: none;           /* Elimina el resplandor o sombra del botón */
}

/* Estilo de los resultados de ls busqueda */
.leaflet-control-search .search-tip {
    margin: 2px;
    padding: 2px 4px;
    display: block;
    color: #ffffff;
    background: #675e5e;
    border-radius: .25em;
    text-decoration: none;
    white-space: nowrap;
  
}
.leaflet-control-search .search-tip:hover {
    background-color: #BC955C;  /* Cambia el fondo del botón cuando está en hover */
    box-shadow: none;           /* Elimina el resplandor o sombra del botón */
}
b {
    font-size: 10px;
    font-weight: bold;
    color: #fdffff;
    background-color: #9F2241;
    border-radius: 10em;
    

	margin-left: 1%;
}

/* estilo de boton zoom inicial */

.leaflet-bar button, .leaflet-bar button:hover {
    background-color: #675e5e;
    border: none;
    border-bottom: 1px solid #BC955C;
    width: 26px;
    height: 26px;
    line-height: 26px;
    display: block;
    text-align: center;
    text-decoration: none;
    color: black;
}