/* Botones en línea para filtros de opciones fijas (core/_filtro_opciones.html).
   Por debajo son radios: el estado lo lleva el form, sin JS. Un riel gris con la
   opción elegida en relieve. Colores de core/css/theme.css. */
.seg {
    display: inline-flex; flex-wrap: wrap; max-width: 100%; min-height: 2.375rem;
    gap: 0.1875rem; padding: 0.1875rem; border-radius: 0.5625rem;
    background: rgb(var(--c-muted-bg));
}
.seg label { position: relative; display: flex; }
.seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg span {
    display: flex; align-items: center; min-height: 2rem; padding: 0 0.75rem;
    border-radius: 0.4375rem;
    font-size: 0.875rem; font-weight: 500; color: rgb(var(--c-txt-2)); white-space: nowrap;
    cursor: pointer; transition: background-color .15s, color .15s;
}
.seg span:hover { color: rgb(var(--c-txt)); }
.seg input:checked + span {
    background: rgb(var(--c-card)); color: rgb(var(--c-txt)); font-weight: 600;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .1);
}
.seg input:focus-visible + span { outline: 2px solid rgb(var(--c-primary)); outline-offset: -2px; }

/* Variante con borde y de la altura de los inputs (2.5rem), para elegir dentro de un formulario
   (la API de «Maps por zona», agente/_zona_opciones.html): sobre fondo gris el riel de .seg no se distingue. */
.seg-borde { display: inline-flex; flex-shrink: 0; height: 2.5rem; border: 1px solid rgb(var(--c-stroke-strong));
    border-radius: 0.5625rem; overflow: hidden; background: rgb(var(--c-card)); }
.seg-borde label { position: relative; display: flex; }
.seg-borde label + label { border-left: 1px solid rgb(var(--c-stroke-strong)); }
.seg-borde input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg-borde span { display: flex; align-items: center; padding: 0 0.875rem; font-size: 0.875rem;
    color: rgb(var(--c-txt-2)); cursor: pointer; white-space: nowrap; transition: background-color .15s, color .15s; }
.seg-borde span:hover { color: rgb(var(--c-txt)); }
.seg-borde input:checked + span { background: rgb(var(--c-primary) / .1); color: rgb(var(--c-primary)); font-weight: 600; }
.seg-borde input:focus-visible + span { outline: 2px solid rgb(var(--c-primary)); outline-offset: -2px; }

/* Panel de «Maps por zona» (listado de clientes y tarjeta del chat): sólo con su switch prendido; columnas según el
   ancho del panel (en la tarjeta es angosto), no el de la pantalla. */
[data-solo-zona] { display: none; }
[data-con-zona]:has(input[name="herramientas"][value="maps_zona"]:checked) [data-solo-zona] { display: block; }
.zona-grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); gap: 0.75rem 1.5rem; }
.zona-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; min-width: 0; }