/* ============================================================================
   wa-groups.css · WhatsApp > Grupos (/client/groups), Automação de grupos
   (/client/groups/automation) e Canais (/client/channels). GR-U, 01/10/2026.

   Uma tabela só (ui-table, linhas de 64 px com foto + 2 linhas), pílulas com
   contagem, busca, ordenação, paginação (ui-pagination), seleção com ações em
   lote (ui-table-bulk), seletor "Adicionar a uma rede" (ui-popover), painel de
   detalhes (ui-modal-drawer) e a automação no padrão de ajustes (ui-card +
   ui-switch + ui-savebar). Este arquivo só ARRUMA as peças do ui-kit na
   página: nenhum componente paralelo, só tokens --ui-*, namespace wag-*, sem
   sombra, sem faixa de cor, sem !important. Substitui wa-chats.css,
   groups.css e channels.css (que eram só destas telas).
   ============================================================================ */

.wag-page { min-width: 0; }
/* [hidden] vence o display das peças (.ui-btn, .ui-pill, .ui-help...) mesmo sem o reboot do Bootstrap */
.wag-page [hidden], .wag-modal [hidden], .wag-drawer [hidden] { display: none; }
.wag-top .dsh-breadcrumb { margin: 0 0 var(--ui-space-4); }

/* ── Cabeçalho ───────────────────────────────────────────────────────────── */
.wag-head { align-items: center; }
.wag-head .ui-page-head-txt { min-width: 0; }
.wag-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; }
.wag-meta-dev { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--ui-fw-medium); color: var(--ui-ink-2); }
.wag-sep { margin: 0 var(--ui-space-2); color: var(--ui-muted-2); }
.wag-dot { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-ok); }
.wag-dot.is-off { background: var(--ui-muted-2); }
.wag-head .ui-page-actions { flex-wrap: nowrap; }
.wag-syncform { display: contents; }
.wag-strong { font-weight: var(--ui-fw-semibold); color: var(--ui-ink); }

/* Avisos (ui-callout) */
.wag-flash { margin-bottom: var(--ui-space-4); border-radius: var(--ui-r-xl); }
.wag-flash.is-ok { border-color: rgba(var(--ui-ok-rgb), .32); background: rgba(var(--ui-ok-rgb), .06); }
.wag-flash.is-ok .ui-callout-ico { background: rgba(var(--ui-ok-rgb), .14); color: var(--ui-ok-ink); }
.wag-flash .ui-callout-text { font-size: var(--ui-fs-body); }

/* Dispositivo (2 ou mais): segmentado discreto acima da tabela */
.wag-dev { display: flex; align-items: center; gap: var(--ui-space-3); min-width: 0; margin: 0 0 var(--ui-space-4); }
.wag-dev-lbl { flex: 0 0 auto; font-size: var(--ui-fs-label); color: var(--ui-muted); }
.wag-dev .ui-seg { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.wag-dev .ui-seg::-webkit-scrollbar { display: none; }
.wag-dev .ui-seg-btn .wag-dot { width: 7px; height: 7px; }
.wag-dev .ui-select { width: auto; min-width: 240px; max-width: 100%; }

/* ── Trabalhos em andamento (adicionar pessoas em fila) ──────────────────── */
.wag-jobs { display: flex; flex-direction: column; gap: var(--ui-space-2); margin: 0 0 var(--ui-space-4); }
.wag-jobs[hidden] { display: none; }
.wag-job { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px var(--ui-space-3); padding: var(--ui-space-3) var(--ui-space-4); background: var(--ui-bg-card); border: 1px solid var(--ui-border); border-radius: var(--ui-r-lg); }
.wag-job .ui-tile { grid-row: span 2; }
.wag-job-t { min-width: 0; font-size: var(--ui-fs-body); font-weight: var(--ui-fw-medium); color: var(--ui-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wag-job-n { font-size: var(--ui-fs-label); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wag-job .ui-progress { grid-column: 2 / -1; height: 6px; }
.wag-job .ui-progress-bar { width: var(--wag-p, 0%); }

/* ── Tabela ──────────────────────────────────────────────────────────────── */
.wag-table { margin-bottom: var(--ui-space-6); }
.wag-table .ui-table-bar-end { flex-wrap: nowrap; }
.wag-table .ui-table-bar-end .ui-search { flex: 0 1 220px; width: 220px; max-width: none; }
.wag-table .ui-search[hidden] { display: none; }
.wag-sort { width: auto; min-width: 140px; }
.wag-table .ui-table-bulk-n { margin-right: 0; }
.wag-bulk-sp { flex: 1 1 auto; }
.wag-table .ui-table-bulk .ui-btn svg { width: var(--ui-ic-sm); height: var(--ui-ic-sm); }

/* Faixa do Sincronizar: o que está acontecendo + quanto tempo já foi */
.wag-sync { display: flex; align-items: center; gap: var(--ui-space-3); padding: 10px var(--ui-table-pad); border-top: 1px solid var(--ui-border-subtle); background: var(--ui-fill-1); font-size: var(--ui-fs-label); color: var(--ui-ink-2); }
.wag-sync[hidden] { display: none; }
.wag-sync .ui-spinner { color: var(--ui-accent-ink); }
.wag-sync-txt { flex: 1 1 auto; min-width: 0; }
.wag-sync-t { flex: 0 0 auto; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.wag-sync.is-solo { max-width: 480px; margin: var(--ui-space-5) auto 0; border: 0; border-radius: var(--ui-r-lg); }

/* Célula principal: foto/iniciais + nome + linha de apoio */
.wag-table .ui-cell-title { font-size: var(--ui-fs-body-lg); }
.wag-sub > svg { width: 14px; height: 14px; margin: -2px 4px 0 0; vertical-align: middle; color: var(--ui-muted); }
.wag-mark { padding: 0 1px; border-radius: calc(var(--ui-r-sm) / 2); background: rgba(var(--ui-accent-rgb), .16); color: inherit; }
.wag-table td.is-num { color: var(--ui-ink-2); }
.wag-none { font-size: var(--ui-fs-label); color: var(--ui-muted); white-space: nowrap; }
/* No celular a contagem sobe para a linha de apoio ("128 membros · Você é admin"): cartão mais baixo */
.wag-sm-only { display: none; }
@media (max-width: 760px) { .wag-sm-only { display: inline; } }
.wag-none[data-ui-tip] { cursor: help; text-decoration: underline dotted var(--ui-muted-2); text-underline-offset: 3px; }

/* Coluna "Rede": a rede é um lugar, então é link (neutro, a marca fica para a ação) */
.wag-net { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; padding: 2px 0; border-radius: var(--ui-r-sm); color: var(--ui-ink-2); font-size: var(--ui-fs-body); text-decoration: none; }
.wag-net > svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--ui-muted); }
.wag-net > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wag-net:hover { color: var(--ui-ink); }
.wag-net:hover > span { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ui-line-strong); }
.wag-net:focus:not(:focus-visible) { outline: none; }
.wag-net:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
/* Sem rede: a célula fica vazia; o atalho só aparece no hover/foco da linha */
.wag-net-add { margin-left: -10px; color: var(--ui-muted); opacity: 0; transition: opacity var(--ui-dur-1) var(--ui-ease); }
.wag-net-add svg { width: var(--ui-ic-xs); height: var(--ui-ic-xs); }
.ui-table tbody tr:hover .wag-net-add, .ui-table tbody tr:focus-within .wag-net-add, .wag-net-add:focus-visible { opacity: 1; }
@media (hover: none) { .wag-net-add { display: none; } }

/* Caixa de seleção indisponível (canal que você só segue): dica no contêiner */
.wag-chk-lock { display: inline-flex; }
.wag-chk-lock .ui-checkbox:disabled { cursor: not-allowed; opacity: .45; }

/* "..." da linha: item indisponível mostra o motivo escrito embaixo */
.wag-menu { width: 272px; }
.wag-mi { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.wag-mi-why { white-space: normal; font-size: var(--ui-fs-help); line-height: 1.35; color: var(--ui-muted); }
.wag-menu .ui-menu-item.is-disabled { align-items: flex-start; height: auto; min-height: 36px; padding-top: 8px; padding-bottom: 8px; opacity: 1; }
.wag-menu .ui-menu-item.is-disabled > svg { margin-top: 2px; opacity: .5; }
.wag-menu .ui-menu-item.is-disabled .wag-mi > span:first-child { color: var(--ui-muted); }

/* Rodapé: contagem · por página · páginas */
.wag-foot-end { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ui-space-3); }
.wag-perpage { width: auto; min-width: 136px; }
.wag-table .ui-pagination[hidden] { display: none; }

/* ── Estados vazios (cartão com ui-empty + ui-steps) ─────────────────────── */
.wag-empty { padding: var(--ui-space-12) var(--ui-space-8) var(--ui-space-8); background: var(--ui-bg-card); border: 1px solid var(--ui-border); border-radius: var(--ui-r-xl); }
.wag-empty > .ui-empty { padding: 0; }
.wag-empty > .ui-empty p { max-width: 420px; }
.wag-empty > .ui-steps { margin: 0 auto var(--ui-space-6); }
.wag-empty > .ui-empty-actions { margin-top: 0; }

/* ── Painel de detalhes (ui-modal-drawer) ────────────────────────────────── */
.wag-drawer .ui-mtitle { overflow-wrap: anywhere; }
.wag-d { display: flex; flex-direction: column; gap: var(--ui-space-5); }
.wag-d-head { display: flex; align-items: center; gap: var(--ui-space-4); min-width: 0; }
.wag-d-name { font-size: var(--ui-fs-title); font-weight: var(--ui-fw-semibold); line-height: var(--ui-lh-tight); color: var(--ui-ink); overflow-wrap: anywhere; }
.wag-d-sub { margin-top: 4px; font-size: var(--ui-fs-label); color: var(--ui-muted); }
.wag-d-note { display: flex; align-items: flex-start; gap: 10px; padding: var(--ui-space-3) var(--ui-space-4); border-radius: var(--ui-r-lg); background: var(--ui-fill-1); font-size: var(--ui-fs-label); line-height: var(--ui-lh-body); color: var(--ui-ink-2); }
.wag-d-note > svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; color: var(--ui-muted); }
.wag-d-sec { display: flex; flex-direction: column; gap: var(--ui-space-2); }
.wag-d-desc { margin: 0; font-size: var(--ui-fs-body); line-height: var(--ui-lh-body); color: var(--ui-ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.wag-d-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--ui-space-3) var(--ui-space-4); margin: 0; font-size: var(--ui-fs-body); }
.wag-d-facts dt { font-weight: var(--ui-fw-regular); color: var(--ui-muted); }
.wag-d-facts dd { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px 6px; min-width: 0; margin: 0; text-align: right; color: var(--ui-ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.wag-d-facts dd .ui-btn-link { height: auto; padding: 0; }
.wag-d-facts .wag-sep { margin: 0; }
.wag-d-adv summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; border-radius: var(--ui-r-sm); font-size: var(--ui-fs-label); color: var(--ui-muted); cursor: pointer; }
.wag-d-adv summary::-webkit-details-marker { display: none; }
.wag-d-adv summary svg { width: 14px; height: 14px; transition: transform var(--ui-dur-1) var(--ui-ease); }
.wag-d-adv[open] summary svg { transform: rotate(90deg); }
.wag-d-adv summary:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.wag-d-id { margin-top: var(--ui-space-2); padding: var(--ui-space-2) 10px; border-radius: var(--ui-r-sm); background: var(--ui-fill-1); font-family: var(--ui-mono); font-size: var(--ui-fs-help); color: var(--ui-ink-2); overflow-wrap: anywhere; }
.wag-d-skel { display: flex; flex-direction: column; gap: var(--ui-space-3); }
.wag-d-skel > .ui-skel-row { padding: 0 0 var(--ui-space-3); }
.wag-d-skel > .ui-skel-row .ui-skel-circle { width: 48px; height: 48px; }
.wag-d-err { display: flex; align-items: flex-start; gap: var(--ui-space-2); padding: var(--ui-space-4); border-radius: var(--ui-r-lg); background: rgba(var(--ui-danger-rgb), .06); font-size: var(--ui-fs-body); color: var(--ui-ink-2); }
.wag-d-err > svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 3px; color: var(--ui-danger-ink); }
.wag-d-foot:not([hidden]) { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); }
.wag-d-foot > .ui-btn { flex: 1 1 0; min-width: 0; justify-content: center; }
.wag-d-foot > .ui-btn-primary { flex-basis: 100%; }

/* ── Seletor "Adicionar a uma rede" (ui-popover) ─────────────────────────── */
.wag-pick .ui-mbody { display: flex; flex-direction: column; gap: var(--ui-space-3); max-height: min(420px, 60vh); }
.wag-pick-inner { display: flex; flex-direction: column; gap: var(--ui-space-3); }
.wag-pick-inner:empty { display: none; }
.wag-pick-intro { margin: 0; font-size: var(--ui-fs-label); line-height: var(--ui-lh-body); color: var(--ui-muted); }
.wag-pick-list { display: flex; flex-direction: column; gap: 2px; margin: 0 calc(var(--ui-space-2) * -1); }
.wag-pick-list .ui-check { align-items: center; min-height: 44px; padding: 6px var(--ui-space-2); border-radius: var(--ui-r-md); cursor: pointer; transition: background-color var(--ui-dur-1) var(--ui-ease); }
.wag-pick-list .ui-check:hover { background: var(--ui-fill-1); }
.wag-pick-list .ui-check:has(input:checked) { background: rgba(var(--ui-accent-rgb), .07); }
.wag-pick-list .ui-check:has(input:disabled) { cursor: not-allowed; }
.wag-pick-list .ui-check:has(input:disabled):hover { background: transparent; }
.wag-pick-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ui-space-3); flex: 1 1 auto; min-width: 0; }
.wag-pick-name { min-width: 0; font-size: var(--ui-fs-body); font-weight: var(--ui-fw-medium); color: var(--ui-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wag-pick-n { flex: 0 0 auto; font-size: var(--ui-fs-label); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wag-pick-list .ui-check:has(input:disabled) .wag-pick-name { color: var(--ui-muted); }
.wag-pick-new { display: flex; align-items: center; gap: var(--ui-space-3); min-height: 44px; margin: 0 calc(var(--ui-space-2) * -1); padding: 6px var(--ui-space-2); border-radius: var(--ui-r-md); color: var(--ui-ink); font-size: var(--ui-fs-body); font-weight: var(--ui-fw-medium); text-decoration: none; transition: background-color var(--ui-dur-1) var(--ui-ease); }
.wag-pick-new:hover { background: var(--ui-fill-1); color: var(--ui-ink); }
.wag-pick-new:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 0; }
.wag-pick-new .ui-tile { --ui-tile-size: 28px; border-radius: var(--ui-r-sm); }
.wag-pick-new .ui-tile svg { width: var(--ui-ic-sm); height: var(--ui-ic-sm); }
.wag-pick-out { display: flex; flex-direction: column; gap: 6px; padding-top: var(--ui-space-3); border-top: 1px solid var(--ui-border-subtle); }
.wag-pick-out-t { font-size: var(--ui-fs-help); font-weight: var(--ui-fw-medium); color: var(--ui-muted); }
.wag-pick-out-row { display: flex; align-items: center; gap: var(--ui-space-2); min-width: 0; font-size: var(--ui-fs-label); color: var(--ui-muted); }
.wag-pick-out-row > svg { width: 14px; height: 14px; flex: 0 0 auto; }
.wag-pick-out-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wag-pick-out-row b { font-weight: var(--ui-fw-medium); color: var(--ui-ink-2); }
.wag-pick .ui-error[hidden] { display: none; }
.wag-pick .ui-mfoot { display: flex; justify-content: flex-end; gap: var(--ui-space-2); }

/* ── Modais (enviar, adicionar pessoas): só arrumação das peças ──────────── */
.wag-modal .ui-mbody > * + * { margin-top: var(--ui-space-4); }
.wag-modal .ui-mbody > div:empty { display: none; }
.wag-modal .ui-mbody > .wag-sec > * + * { margin-top: var(--ui-space-3); }
.wag-modal .ui-field { margin-bottom: 0; }
.wag-types { display: flex; flex-wrap: wrap; gap: 6px; }
.wag-modal .msg-type-tab { display: inline-flex; align-items: center; gap: 6px; height: var(--ui-ctl-sm); padding: 0 var(--ui-space-3); border: 1px solid var(--ui-line); border-radius: var(--ui-r-pill); background: var(--ui-bg-card); color: var(--ui-ink-2); font-size: var(--ui-fs-label); font-weight: var(--ui-fw-medium); cursor: pointer; transition: background-color var(--ui-dur-1) var(--ui-ease), border-color var(--ui-dur-1) var(--ui-ease), color var(--ui-dur-1) var(--ui-ease); }
.wag-modal .msg-type-tab svg { width: var(--ui-ic-xs); height: var(--ui-ic-xs); color: var(--ui-muted); }
.wag-modal .msg-type-tab:hover { background: var(--ui-fill-1); color: var(--ui-ink); }
.wag-modal .msg-type-tab.active { background: var(--ui-ink); border-color: var(--ui-ink); color: var(--ui-bg-card); }
.wag-modal .msg-type-tab.active svg { color: inherit; }
.wag-modal .msg-type-tab:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.wag-msg-block { padding: var(--ui-space-4); border: 1px solid var(--ui-border-subtle); border-radius: var(--ui-r-lg); background: var(--ui-bg-card); }
.wag-modal .msg-sub-block { margin-bottom: var(--ui-space-3); padding: var(--ui-space-4); border: 1px solid var(--ui-border-subtle); border-radius: var(--ui-r-lg); background: var(--ui-fill-1); }
.wag-modal .msg-sub-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--ui-space-3); }
.wag-modal .msg-sub-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--ui-space-2); border-radius: var(--ui-r-sm); background: var(--ui-fill-2); color: var(--ui-ink-2); font-size: var(--ui-fs-help); font-weight: var(--ui-fw-medium); }
.wag-modal .cc-btn-add, .wag-modal .cc-btn-remove { display: inline-flex; align-items: center; gap: 6px; height: var(--ui-ctl-sm); padding: 0 var(--ui-space-3); border: 1px solid var(--ui-line-strong); border-radius: var(--ui-r-md); background: var(--ui-bg-card); color: var(--ui-ink-2); font-size: var(--ui-fs-label); font-weight: var(--ui-fw-medium); cursor: pointer; }
.wag-modal .cc-btn-add:hover { background: var(--ui-fill-1); color: var(--ui-ink); }
.wag-modal .cc-btn-remove { height: 28px; padding: 0 var(--ui-space-2); border-color: transparent; color: var(--ui-danger-ink); background: transparent; }
.wag-modal .cc-btn-remove:hover { background: rgba(var(--ui-danger-rgb), .08); }
.wag-modal .cc-btn-add svg, .wag-modal .cc-btn-remove svg { width: var(--ui-ic-xs); height: var(--ui-ic-xs); }
.wag-modal .mb-hint code, .wag-modal .msg-block code { padding: 1px 5px; border-radius: calc(var(--ui-r-sm) / 2); background: var(--ui-fill-2); color: var(--ui-ink-2); font-size: .9em; }
.wag-when { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-3); }
.wag-when .ui-dt { width: 220px; max-width: 100%; }
.wag-when .ui-dt[hidden] { display: none; }
.wag-box { padding: var(--ui-space-4); border-radius: var(--ui-r-lg); background: var(--ui-fill-1); }
.wag-box-t { margin-bottom: var(--ui-space-2); font-size: var(--ui-fs-label); font-weight: var(--ui-fw-semibold); color: var(--ui-ink); }
.wag-box .ui-help { margin-top: var(--ui-space-2); }
.wag-box .ui-field-row { margin-top: var(--ui-space-3); }
.wag-box .ui-field { margin: 0; }
.wag-est { display: flex; align-items: center; gap: 6px; min-height: 18px; margin-top: var(--ui-space-2); font-size: var(--ui-fs-help); color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.wag-est:empty { display: none; }
.wag-est > svg { width: 14px; height: 14px; }
.wag-mono { font-family: var(--ui-mono); font-size: var(--ui-fs-label); }
.wag-note { display: flex; align-items: flex-start; gap: var(--ui-space-2); padding: 10px var(--ui-space-3); border-radius: var(--ui-r-lg); background: rgba(var(--ui-warn-rgb), .09); font-size: var(--ui-fs-label); line-height: var(--ui-lh-body); color: var(--ui-ink-2); }
.wag-note > svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; color: var(--ui-warn-ink); }
.wag-note[hidden] { display: none; }
.wag-mode { margin-bottom: var(--ui-space-1); }
.wag-sec[hidden] { display: none; }
/* "De outro grupo" (dentro do mesmo modal: nunca um modal por cima do outro) */
.wag-ig-list { max-height: 300px; margin-top: var(--ui-space-3); overflow-y: auto; border: 1px solid var(--ui-border-subtle); border-radius: var(--ui-r-lg); }
.wag-ig-row { display: flex; align-items: center; gap: var(--ui-space-3); min-height: 52px; padding: 6px var(--ui-space-3); border-top: 1px solid var(--ui-border-subtle); }
.wag-ig-row:first-child { border-top: 0; }
.wag-ig-row[hidden] { display: none; }
.wag-ig-txt { flex: 1 1 auto; min-width: 0; }
.wag-ig-name { font-size: var(--ui-fs-body); color: var(--ui-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wag-ig-sub { font-size: var(--ui-fs-help); color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.wag-ig-msg { padding: var(--ui-space-6) var(--ui-space-4); text-align: center; font-size: var(--ui-fs-label); color: var(--ui-muted); }
.wag-ig-msg.is-err { color: var(--ui-danger-ink); }
/* Resultado de envio / adição */
.wag-res { display: flex; align-items: flex-start; gap: var(--ui-space-2); padding: 10px var(--ui-space-3); border-radius: var(--ui-r-lg); font-size: var(--ui-fs-label); line-height: var(--ui-lh-body); color: var(--ui-ink-2); background: var(--ui-fill-1); }
.wag-res:empty { display: none; }
.wag-res > svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; color: var(--ui-muted); }
.wag-res.is-ok { background: rgba(var(--ui-ok-rgb), .08); }
.wag-res.is-ok > svg { color: var(--ui-ok-ink); }
.wag-res.is-err { background: rgba(var(--ui-danger-rgb), .07); }
.wag-res.is-err > svg { color: var(--ui-danger-ink); }
.wag-res-sub { display: block; margin-top: 2px; font-size: var(--ui-fs-help); color: var(--ui-muted); }
.wag-res a { color: var(--ui-accent-ink); }
.wag-prog { display: flex; flex-direction: column; gap: var(--ui-space-2); }
.wag-prog-head { display: flex; justify-content: space-between; font-size: var(--ui-fs-label); font-variant-numeric: tabular-nums; }
.wag-prog-head b { font-weight: var(--ui-fw-semibold); color: var(--ui-ink); }
.wag-prog-head span { color: var(--ui-muted); }
.wag-prog .ui-progress-bar { width: var(--wag-p, 0%); }
.wag-prog .ui-progress-bar.is-done { background: var(--ui-ok); }
.wag-prog .ui-progress-bar.is-off { background: var(--ui-muted-2); }
.wag-prog-stats { display: flex; flex-wrap: wrap; gap: var(--ui-space-3); font-size: var(--ui-fs-help); color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.wag-prog-stats span { display: inline-flex; align-items: center; gap: 4px; }
.wag-prog-stats svg { width: 13px; height: 13px; }

/* ── Automação de grupos (ajustes: um cartão, linhas com interruptor) ────── */
.wag-auto { display: flex; flex-direction: column; gap: var(--ui-space-6); max-width: 820px; }
.wag-auto .ui-card { border-color: var(--ui-border); border-radius: var(--ui-r-xl); overflow: visible; }
.wag-set { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 0 var(--ui-space-4); padding: var(--ui-space-5); }
.wag-set + .wag-set { border-top: 1px solid var(--ui-border-subtle); }
.wag-set > .ui-tile { margin-top: -2px; }
.wag-set-t { display: block; font-size: var(--ui-fs-body-lg); font-weight: var(--ui-fw-semibold); line-height: 22px; color: var(--ui-ink); }
.wag-set-p { margin: 2px 0 0; font-size: var(--ui-fs-label); line-height: var(--ui-lh-body); color: var(--ui-muted); }
.wag-set > .ui-switch { padding-top: 2px; }
.wag-set-body { grid-column: 2 / -1; display: flex; flex-direction: column; gap: var(--ui-space-4); margin-top: var(--ui-space-4); }
.wag-set-body[hidden] { display: none; }
.wag-set-body > .ui-field { margin: 0; }
.wag-set-body .ui-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-2); }
.wag-scope { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--ui-space-2); font-size: var(--ui-fs-help); color: var(--ui-muted); }
.wag-scope > svg { width: 14px; height: 14px; }
.wag-cmds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--ui-space-6); margin: 0; padding: 0; list-style: none; }
.wag-cmd { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); min-height: 48px; border-bottom: 1px solid var(--ui-border-subtle); }
.wag-cmd-txt { display: flex; flex-direction: column; min-width: 0; }
.wag-cmd-code { font-family: var(--ui-mono); font-size: var(--ui-fs-label); color: var(--ui-ink); }
.wag-cmd-desc { font-size: var(--ui-fs-help); color: var(--ui-muted); }
/* Listas do dispositivo (números bloqueados, palavras proibidas) */
.wag-items { margin: 0; padding: 0; list-style: none; border: 1px solid var(--ui-border-subtle); border-radius: var(--ui-r-lg); }
.wag-items:empty { display: none; }
.wag-item { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); min-height: 44px; padding: 2px 4px 2px var(--ui-space-4); border-top: 1px solid var(--ui-border-subtle); font-size: var(--ui-fs-body); color: var(--ui-ink); }
.wag-item:first-child { border-top: 0; }
.wag-item > span { min-width: 0; overflow-wrap: anywhere; }
.wag-item .ui-btn-icon { color: var(--ui-muted); }
.wag-item .ui-btn-icon:hover { color: var(--ui-danger-ink); background: rgba(var(--ui-danger-rgb), .08); }
.wag-items-empty { margin: 0; font-size: var(--ui-fs-label); color: var(--ui-muted); }
.wag-items-empty[hidden] { display: none; }
.wag-add { display: flex; gap: var(--ui-space-2); }
.wag-add .ui-input { flex: 1 1 auto; min-width: 0; }
.wag-auto .ui-error[hidden] { display: none; }
.wag-auto-foot { display: flex; justify-content: flex-end; gap: var(--ui-space-2); }

/* ── Celular ─────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    .wag-table .ui-table-bar-end { width: 100%; }
    .wag-table .ui-table-bar-end .ui-search { flex: 1 1 auto; width: auto; }
    .wag-sort { flex: 0 0 124px; width: 124px; min-width: 0; }
    .wag-table .ui-table-bulk { gap: var(--ui-space-2); }
    .wag-table .ui-table-bulk-n { flex: 1 1 100%; }
    .wag-bulk-sp { display: none; }
    .wag-foot-end { justify-content: center; width: 100%; }
    .wag-table .ui-table-foot > span { width: 100%; }
    .wag-sync { flex-wrap: wrap; padding: 10px var(--ui-table-pad); }
    .wag-table .ui-table:not(.is-scroll) > tbody > tr > td.wag-net-cell { grid-column: 1 / -1; }
    .wag-empty { padding: var(--ui-space-8) var(--ui-space-4) var(--ui-space-6); }
    .wag-empty > .ui-steps.is-cards { grid-template-columns: minmax(0, 1fr); max-width: 360px; }
    .wag-empty > .ui-steps.is-cards > li { flex-direction: row; text-align: left; }
    .wag-empty .ui-empty-actions .ui-btn { flex: 1 1 100%; }
    .wag-set { grid-template-columns: minmax(0, 1fr) auto; padding: var(--ui-space-4); }
    .wag-set > .ui-tile { display: none; }
    .wag-set-body { grid-column: 1 / -1; }
    .wag-set-body .ui-choices, .wag-cmds { grid-template-columns: minmax(0, 1fr); }
    .wag-add { flex-direction: column; }
    .wag-dev .ui-select { min-width: 0; width: 100%; }
}
@media (max-width: 560px) {
    /* Cabeçalho: título e ações (ícones de 44) na mesma linha; a meta embaixo,
       na largura toda, só com o essencial (as contagens estão nas pílulas). */
    .wag-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--ui-space-1) var(--ui-space-3); }
    .wag-head > .ui-page-head-txt { display: contents; }
    .wag-head .ui-page-title { grid-column: 1; grid-row: 1; }
    .wag-head .ui-page-meta { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
    .wag-head .ui-page-actions { grid-column: 2; grid-row: 1; width: auto; }
    .wag-hide-sm { display: none; }
    .wag-head .wag-act-lbl { display: none; }
    .wag-head .wag-act { width: var(--ui-target-touch); height: var(--ui-target-touch); padding: 0; gap: 0; }
    .wag-head .wag-act svg { width: var(--ui-ic-md); height: var(--ui-ic-md); }
    .wag-dev { flex-direction: column; align-items: stretch; gap: var(--ui-space-2); }
    .wag-d-foot > .ui-btn { flex-basis: calc(50% - 4px); }
    .wag-d-foot > .ui-btn-primary { flex-basis: 100%; }
    .wag-when .ui-dt { width: 100%; }
}

@media (max-width: 375px) {
    /* 360: busca e ordenar em linhas próprias (nada cortado) */
    .wag-table .ui-table-bar-end { flex-wrap: wrap; }
    .wag-table .ui-table-bar-end .ui-search, .wag-sort { flex: 1 1 100%; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .wag-net-add, .wag-pick-list .ui-check, .wag-pick-new, .wag-d-adv summary svg, .wag-modal .msg-type-tab { transition: none; }
}