/*
 * KummaraDS — kds-segmented
 * ============================================================
 * Barra de filtro segmentada con contadores. Cada segmento es un ENLACE
 * (server-render): al clickear navega con ?status=… y el server marca el activo
 * con .is-active. Reemplaza el <select> de estado + la fila de kds-stat-card. Se
 * usa suelta o DOCKEADA como header de un kds-panel (queda pegada arriba de la
 * tabla, separada por su borde inferior).
 *
 *   .kds-segmented                 barra (flex; scrollea en móvil, sin barra visible)
 *   .kds-segmented__seg            un segmento (enlace: rótulo + conteo)
 *   .kds-segmented__label          texto del segmento
 *   .kds-segmented__count          badge con el conteo
 *   .kds-segmented__seg.is-active  segmento activo (acento suave + sombra)
 *   --cyan | --teal | --amber | --rose   acento (sólo se pinta en el activo)
 * ============================================================
 */

.kds-segmented {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2xs, .25rem);
    padding: var(--ds-space-xs, .5rem) var(--ds-space-sm, .75rem);
    border-bottom: 1px solid var(--ds-border, #eee);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.kds-segmented::-webkit-scrollbar { width: 0; height: 0; }

.kds-segmented__seg {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex: 0 0 auto;
    padding: .4rem .8rem;
    border: 1px solid transparent;
    border-radius: .5625rem;
    color: var(--ds-text-muted, #606060);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .14s, color .14s, border-color .14s, transform .1s;
}
.kds-segmented__seg:hover {
    background: var(--ds-surface-sunken, #f8f9fa);
    color: var(--ds-text, #212529);
}
.kds-segmented__seg:active { transform: translateY(1px); }

.kds-segmented__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.55rem;
    height: 1.2rem;
    padding: 0 .4rem;
    border-radius: 62.4375rem;
    background: var(--ds-surface-sunken, #eef1f4);
    color: var(--ds-text-muted, #606060);
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
}

/* ---- Activo: relleno suave del acento; etiqueta + conteo en texto OSCURO (WCAG AA).
   El acento se lee por el relleno + el borde + el fondo del badge de conteo. ---- */
.kds-segmented__seg.is-active { font-weight: 700; }
.kds-segmented__seg.is-active .kds-segmented__count { color: var(--ds-text, #212529); }

.kds-segmented__seg--cyan.is-active {
    background: rgba(48, 156, 159, .12);
    color: var(--color-cyan-dark, #309c9f);
    border-color: rgba(48, 156, 159, .26);
    box-shadow: 0 1px .3125rem rgba(48, 156, 159, .18);
}
.kds-segmented__seg--cyan.is-active .kds-segmented__count { background: var(--color-cyan-dark, #309c9f); }

.kds-segmented__seg--teal.is-active {
    background: rgba(46, 184, 168, .12);
    color: var(--color-teal-dark, #1FA090);
    border-color: rgba(46, 184, 168, .26);
    box-shadow: 0 1px .3125rem rgba(46, 184, 168, .18);
}
.kds-segmented__seg--teal.is-active .kds-segmented__count { background: var(--color-teal, #2EB8A8); }

.kds-segmented__seg--amber.is-active {
    background: rgba(232, 179, 14, .15);
    color: var(--ds-text-on-warning, #334155);
    border-color: rgba(232, 179, 14, .32);
    box-shadow: 0 1px .3125rem rgba(232, 179, 14, .20);
}
.kds-segmented__seg--amber.is-active .kds-segmented__count { background: var(--color-amber, #E8B30E); }

.kds-segmented__seg--rose.is-active {
    background: rgba(230, 96, 123, .12);
    color: var(--color-rose, #E6607B);
    border-color: rgba(230, 96, 123, .28);
    box-shadow: 0 1px .3125rem rgba(230, 96, 123, .18);
}
.kds-segmented__seg--rose.is-active .kds-segmented__count { background: var(--color-rose, #E6607B); }

/* Etiqueta del activo en texto oscuro (los acentos de marca son de tono medio y
   no alcanzan 4.5:1 como texto). Va después de los acentos para ganar por orden. */
.kds-segmented__seg.is-active { color: var(--ds-text, #212529); }

@media (max-width: 767.98px) {
    .kds-segmented { padding: .45rem .5rem; }
    .kds-segmented__seg { padding: .38rem .6rem; font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
    .kds-segmented__seg { transition: none; }
    .kds-segmented__seg:active { transform: none; }
}