/* Segmented control de mapas base (Fase 1 del rediseño, ver PLAN-DISENO-UX-UI.md).
   Este control vive dentro del MapNavbar (#navbar-basemap-switcher en index.html); el JS de
   L.switchBasemap.js mueve ahí el contenedor que Leaflet crea, pero las clases de abajo son
   las que definen cómo se ve. */

.hidden {
    display: none;
}

/* Contenedor de los 3 botones, ya viene con fondo/padding puestos por Tailwind en el navbar */
.leaflet-control-basemapsSwitcher {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Botón individual (OSM / Satélite / Cartográfica). El tamaño de fuente, el padding y el
   layout ya vienen de clases de Tailwind puestas directo en L.switchBasemap.js; acá solo
   queda lo que esas clases no cubren. */
.basemap-btn {
    border: none;
    background: transparent;
    font-family: "Plus Jakarta Sans", sans-serif;
    cursor: pointer;
    white-space: nowrap;
    /* El color va acá (no como clase de Tailwind en el JS) a propósito: este archivo se
       carga antes que output.css en el <head>, así que una utility como "text-white/70"
       le ganaría en cascada a ".basemap-btn--active" de aquí abajo al tener la misma
       especificidad. Manteniendo los dos colores en este mismo archivo, el orden importa
       y el activo gana como corresponde. */
    color: rgba(255, 255, 255, 0.7);
}

/* Botón del mapa base actualmente activo: pill blanca con sombra sutil, texto verde institucional */
.basemap-btn--active {
    background: #fff;
    color: #205c40;
    box-shadow: 0px 1px 1.5px rgba(0, 0, 0, 0.1), 0px 1px 1px rgba(0, 0, 0, 0.1);
}