/* Estilos para el control de exportación de GeoJSON */

.leaflet-bar .leaflet-control-custom {
    /* <<< Define el tamaño total del botón aquí >>> */
    width: 34px;  /* Ejemplo: Aumentado a 34px */
    height: 34px; /* Ejemplo: Aumentado a 34px */
    line-height: 34px; /* Centrar verticalmente si hubiera texto */
    text-align: center; /* Centrar horizontalmente */

    cursor: pointer; /* Cambiar a puntero para indicar que es clickeable */
    background-color: #fff; /* Fondo blanco estándar de controles Leaflet */
}

/* El icono ('img') dentro del contenedor */
.leaflet-control-custom img {
    /* <<< Define el tamaño del icono aquí >>> */
    width: 26px;  /* Ejemplo: El icono mide 26px */
    height: 26px; /* Ejemplo: El icono mide 26px */

    /* Centrar verticalmente el icono si el contenedor es más alto */
    /* (requiere ajustes si no es compatible con todos los navegadores) */
    /* Una forma simple es usar padding en el contenedor */
    /* padding-top: 4px; */ /* (34px contenedor - 26px icono) / 2 */
    
    /* Otra forma más moderna con flexbox en el contenedor */
    /* .leaflet-bar .leaflet-control-custom { display: flex; justify-content: center; align-items: center; } */
}

/* .leaflet-bar .leaflet-control .leaflet-control-custom{
    width: 24px;
    height: 24px;
    cursor: crosshair;
    border: 2px solid #ccc; /* Borde gris tenue 
    box-sizing: content-box; 
} */

/* Ajuste para que los controles estén pegados entre sí */
.leaflet-bar .leaflet-control-custom + .leaflet-control-custom,
.leaflet-bar .leaflet-control-medicion + .leaflet-control-medicion {
    border-top: none; /* Elimina el borde superior para íconos consecutivos */
    /* border-bottom: none; */
}
.medir-icon, .exportar-icon {
    width: 100%;
    height: 100%;
}