/* ==========================================================================
   WEEM UI — piezas de aplicación (Admin y Operaciones). Issue #67.
   Complementa /shared/weem-ui.css con los mismos tokens --w-*; no redefine
   nada de esa hoja. Se carga después de ella.

   Segmentos    .w-seg > .w-seg__item   grupo de opciones excluyentes (Tabla /
                Kanban, períodos, pestañas de un editor). Activo con .active,
                .on, [aria-pressed=true] o [aria-selected=true].
   Filtros      .w-toggle               cápsula conmutable para filtros (estado,
                tipo, rubro). Mismos estados activos. Un .n hijo es el conteo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Segmentos
   -------------------------------------------------------------------------- */
.w-seg {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  padding: 3px;
  border: 1px solid var(--w-line);
  border-radius: var(--w-radius);
  background: var(--w-surface-2);
}
.w-seg__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--w-space-2);
  min-height: calc(var(--w-h) - 6px);
  padding: 0 var(--w-space-3);
  border: 1px solid transparent;
  border-radius: calc(var(--w-radius) - 3px);
  background: transparent;
  color: var(--w-muted);
  font: 600 .8125rem/1.2 var(--w-font);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--w-duration) var(--w-ease), color var(--w-duration) var(--w-ease), box-shadow var(--w-duration) var(--w-ease);
}
.w-seg__item:hover { color: var(--w-ink); }
.w-seg__item:focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 2px var(--w-ring-offset), 0 0 0 4px var(--w-ring); }
.w-seg__item svg { flex: none; width: 1.1em; height: 1.1em; }
.w-seg__item:is(.active, .on, [aria-pressed="true"], [aria-selected="true"]) {
  background: var(--w-surface);
  border-color: var(--w-line);
  color: var(--w-ink);
  box-shadow: var(--w-shadow-sm);
}
.w-seg__item[disabled] { opacity: .5; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   Filtros conmutables
   -------------------------------------------------------------------------- */
.w-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--w-h-sm);
  padding: 0 var(--w-space-3);
  border: 1px solid var(--w-line-strong);
  border-radius: var(--w-radius-full);
  background: var(--w-surface);
  color: var(--w-ink-2);
  font: 600 .8125rem/1.2 var(--w-font);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--w-duration) var(--w-ease), border-color var(--w-duration) var(--w-ease), color var(--w-duration) var(--w-ease);
}
.w-toggle:hover { background: var(--w-surface-2); border-color: var(--w-accent-line); }
.w-toggle:focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 2px var(--w-ring-offset), 0 0 0 4px var(--w-ring); }
.w-toggle svg { flex: none; width: 1.1em; height: 1.1em; }
.w-toggle .n { color: var(--w-muted); font: 500 .6875rem/1 var(--w-font-mono); }
.w-toggle:is(.active, .on, [aria-pressed="true"], [aria-selected="true"]) {
  background: var(--w-accent-soft);
  border-color: var(--w-accent-line);
  color: var(--w-ink);
}
.w-toggle:is(.active, .on, [aria-pressed="true"]) .n { color: var(--w-ink-2); }
.w-toggle[disabled] { opacity: .5; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   Táctil y pantallas angostas: objetivos de 44px
   -------------------------------------------------------------------------- */
@media (pointer: coarse), (max-width: 640px) {
  .w-seg__item, .w-toggle { min-height: var(--w-touch); }
}

@media (prefers-reduced-motion: reduce) {
  .w-seg__item, .w-toggle { transition: none; }
}