.active-leaflet-toolbar {
    position: static;
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    background: var(--app-sidebar-background-color, #00695c);
    color: var(--app-sidebar-text-color, rgba(255, 255, 255, .75));
    font-family: inherit;
}

.active-leaflet-toolbar button {
    min-width: 44px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .45rem;
    border: 0;
    border-right: 1px solid color-mix(in srgb, currentColor 28%, transparent);
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1.1;
    cursor: pointer;
}

.active-leaflet-toolbar button:last-child {
    border-right: 0;
}

.active-leaflet-toolbar button:hover,
.active-leaflet-toolbar button:focus-visible {
    background: color-mix(in srgb, currentColor 14%, transparent);
    color: inherit;
    outline: none;
}

.active-leaflet-toolbar button:disabled {
    cursor: wait;
    opacity: .65;
}

.active-leaflet-toolbar i {
    width: 1rem;
    text-align: center;
}

.active-leaflet-fullscreen-host:fullscreen,
.active-leaflet-fullscreen-host:-webkit-full-screen {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
}

.active-leaflet-fullscreen-host:fullscreen .active-leaflet-toolbar,
.active-leaflet-fullscreen-host:-webkit-full-screen .active-leaflet-toolbar {
    flex: 0 0 auto;
    border-radius: 0;
}

.active-leaflet-fullscreen-host:fullscreen .leaflet-container,
.active-leaflet-fullscreen-host:-webkit-full-screen .leaflet-container {
    width: 100% !important;
    height: auto !important;
    min-height: 0;
    flex: 1 1 auto;
}

/* Control de capas de Leaflet (el de ValoraIntranet, ahora para todas). Va en esta hoja porque
   las webs la cargan justo detrás de leaflet.css y tiene que ganarle. El color sale del menú. */
.leaflet-control-layers {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--app-sidebar-background-color, #00695c) 35%, transparent) !important;
    border-radius: .65rem !important;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 .35rem 1rem rgba(15, 23, 42, .18) !important;
    backdrop-filter: blur(6px);
}

.leaflet-control-layers-toggle {
    width: 42px !important;
    height: 42px !important;
    background-size: 22px 22px !important;
}

.leaflet-control-layers-expanded {
    min-width: 220px;
    padding: .65rem .75rem !important;
    color: #263238;
}

.leaflet-control-layers-list label {
    margin: 0;
    padding: .25rem .35rem;
    border-radius: .4rem;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.leaflet-control-layers-list label:hover {
    background: color-mix(in srgb, var(--app-sidebar-background-color, #00695c) 10%, white);
}

.leaflet-control-layers-selector {
    accent-color: var(--app-sidebar-background-color, #00695c);
}

.leaflet-control-layers-separator {
    margin: .55rem 0 !important;
    border-top-color: color-mix(in srgb, var(--app-sidebar-background-color, #00695c) 25%, transparent) !important;
}

@media (max-width: 575.98px) {
    .leaflet-control-layers-expanded {
        min-width: 190px;
        max-width: calc(100vw - 40px);
    }
}

/* active-site.css esconde todos los radios para pintar uno propio en el label de al lado
   (input + label span). En el control de capas el radio va dentro del label y se quedaba
   sin nada: no se veía qué capa base estaba elegida. */
.leaflet-control-layers input.leaflet-control-layers-selector {
    display: inline-block;
}