/* 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; }