/* ═══════════════════════════════════════════════════════════════════════
   CAMADA 2 — COMPONENTES, com os valores MEDIDOS no artefato
   ═══════════════════════════════════════════════════════════════════════

   Par da `public/assets/visual-novo-componentes.css` do ERP. Os valores são os
   MESMOS, porque saíram da mesma referência — e porque o People roda embarcado
   no Performance: peça com medida diferente entrega o remendo.

   Como os valores foram obtidos: `medir_componentes.mjs` abre o artefato,
   força a direção B no claro e lê `getComputedStyle` de cada peça;
   `comparar_sistemas.mjs` mede o elemento REAL que cumpre aquele papel e falha
   por número. Esta folha é a resposta àquela lista.

   ⚠️ Aqui os tamanhos também vão em PIXEL. A raiz do People é 16px (então
   `rem` casaria), mas o ERP é 14px — escrever nos dois em pixel é o que
   garante que a MESMA peça tenha o MESMO tamanho nos dois sistemas.
   🔴 POR QUE TODO SELETOR TRAZ `[data-swgma-mode]`. O `swgma-theme.css` veste
   campo, tabela e cartão com `html[data-swgma-theme][data-swgma-mode="light"] …`
   — DOIS atributos, (0,3,1). Um seletor meu como
   `html[data-swgma-theme^="novo-"] body table thead th` é (0,1,5): mais
   elementos, menos atributos. E a coluna do MEIO é comparada ANTES da dos
   elementos, então (0,3,1) ganha de (0,1,5) e os dois `!important` não empatam
   nada. Foi o que fez cabeçalho de tabela, campo e cartão continuarem com a
   cor antiga mesmo com a folha nova carregada e com `!important`.
   Acrescentar `[data-swgma-mode]` — que o arranque SEMPRE escreve — iguala a
   coluna e devolve a decisão para quem tem mais elementos.
   ⚠️ Nada vale fora de `html[data-swgma-theme^="novo-"]`.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── CABEÇALHO DE PÁGINA ────────────────────────────────────────────────
   medido: 22,72px · peso 600 · espaçamento -0,3408px · linha 26,128px
   (o título já vinha certo pela casca; aqui fica o subtítulo e o corpo) */
html[data-swgma-theme^="novo-"][data-swgma-mode] .page-header .page-subtitle,
html[data-swgma-theme^="novo-"][data-swgma-mode] .page-header > div > p {
  font-size: 13.12px !important;
  color: var(--sw-text-2, #3C3C43) !important;
  margin: 3px 0 0 !important;
}

/* ── CARTÃO DE NÚMERO ───────────────────────────────────────────────────
   medido: respiro 14/15 · raio 12 · sombra 0 1px 3px rgba(0,0,0,.08) */
html[data-swgma-theme^="novo-"][data-swgma-mode] .stat-card,
html[data-swgma-theme^="novo-"][data-swgma-mode] .kpi-card {
  padding: 14px 15px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
  background: var(--sw-canvas, #fff) !important;
}
html[data-swgma-theme^="novo-"][data-swgma-mode] .stat-label,
html[data-swgma-theme^="novo-"][data-swgma-mode] .stat-card .label {
  font-size: 11.52px !important;
  color: var(--sw-text-2, #3C3C43) !important;
  letter-spacing: 0.1152px !important;
  text-transform: none !important;
}
html[data-swgma-theme^="novo-"][data-swgma-mode] .stat-value,
html[data-swgma-theme^="novo-"][data-swgma-mode] .stat-card .value {
  font-size: 24.8px !important;
  font-weight: 600 !important;
  letter-spacing: -0.744px !important;
  line-height: 27.28px !important;
}

/* ── QUADRO / CARTÃO ────────────────────────────────────────────────────
   medido: raio 18 · sombra 0 1px 3px rgba(0,0,0,.08) · sem borda */
html[data-swgma-theme^="novo-"][data-swgma-mode] .table-container,
html[data-swgma-theme^="novo-"][data-swgma-mode] .card:not(.nv-conta) {
  border-radius: 18px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
}
/* ⚠️ na direção B o quadro NÃO TEM LINHA: a sombra de 1px já o separa do fundo,
   e borda + sombra juntas dão o contorno duplo do visual antigo. Medido:
   `1px solid transparent` — a borda continua lá reservando o pixel, só não
   pinta, senão o quadro pula 2px quando o estado muda. */
html[data-swgma-theme="novo-b"][data-swgma-mode] .table-container,
html[data-swgma-theme="novo-b"][data-swgma-mode] .card:not(.nv-conta) {
  border: 1px solid transparent !important;
}
html[data-swgma-theme="novo-a"][data-swgma-mode] .table-container,
html[data-swgma-theme="novo-a"][data-swgma-mode] .card:not(.nv-conta) { border-radius: 16px !important; }
html[data-swgma-theme="novo-c"][data-swgma-mode] .table-container,
html[data-swgma-theme="novo-c"][data-swgma-mode] .card:not(.nv-conta) {
  border-radius: 8px !important;
  box-shadow: 0 1px 1px rgba(42,40,88,.06) !important;
}

/* ── TABELA ─────────────────────────────────────────────────────────────
   medido: th 12px/600, respiro 10/14, cor #8E8E93, fundo BRANCO, sem caixa
   alta; td 13,28px, respiro 11/12, cor preta, linha #D1D1D6 */
/* 🔴 DUAS FALHAS REAIS, achadas perguntando ao navegador QUEM GANHA a
   propriedade (CDP `CSS.getMatchedStylesForNode`), não deduzindo:

   1. `thead` NÃO É AUTOMÁTICO. O parser de HTML insere `<tbody>` sozinho, mas
      não `<thead>` — e muita tabela do People escreve `<table><tr><th>` direto.
      `table thead th` simplesmente não casava nessas, e quem vestia o cabeçalho
      era a regra antiga (`table th`). Daí o cinza errado e o fundo da página no
      cabeçalho.
   2. ESPECIFICIDADE, e a coluna que eu contei errado: o `swgma-theme.css` usa
      `html[data-swgma-theme][data-swgma-mode="light"] …` — DOIS atributos, ou
      seja (0,3,1). O meu `html[data-swgma-theme^="novo-"] body table thead th`
      é (0,2,5): mais elementos, menos atributos. E a coluna do meio é comparada
      ANTES da dos elementos, então (0,3,1) ganha de (0,2,5) — dois `!important`
      não empatam, o de fora vence. A correção é casar a coluna: o
      `[data-swgma-mode]` entra no prefixo. */
html[data-swgma-theme^="novo-"][data-swgma-mode] body table th,
html[data-swgma-theme^="novo-"][data-swgma-mode] table th,
html[data-swgma-theme^="novo-"][data-swgma-mode] table thead th {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 10px 14px !important;
  /* 🔴 3,26:1 COM O VALOR DO ARTEFATO. `#8E8E93` em 12px sobre branco não se
     lê — o desenho usa esse cinza e ele falha o piso de texto normal. O
     token `--nv-rotulo-tabela` passou a ser calculado para 4,5:1 (é a mesma
     decisão do botão escuro: quando fidelidade custa legibilidade, fica o
     legível e a diferença é declarada). */
  color: var(--nv-rotulo-tabela, #76767C) !important;
  background: var(--sw-canvas, #fff) !important;
  border-bottom: 1px solid var(--sw-border, #D1D1D6) !important;
}
html[data-swgma-theme^="novo-"][data-swgma-mode] body table td,
html[data-swgma-theme^="novo-"][data-swgma-mode] table td,
html[data-swgma-theme^="novo-"][data-swgma-mode] table tbody td {
  font-size: 13.28px !important;
  padding: 11px 12px !important;
  color: var(--sw-text-1, #000) !important;
  border-bottom: 1px solid var(--sw-border, #D1D1D6) !important;
  vertical-align: middle !important;
}
html[data-swgma-theme^="novo-"][data-swgma-mode] table tbody tr:last-child td { border-bottom: 0 !important; }

/* ── BOTÕES ─────────────────────────────────────────────────────────────
   medido: respiro 8/16 · raio 9 · 13,44px · peso 600 · brilho na aresta */
html[data-swgma-theme^="novo-"][data-swgma-mode] .btn {
  padding: 8px 16px !important;
  border-radius: 9px !important;
  font-size: 13.44px !important;
  font-weight: 600 !important;
}
html[data-swgma-theme="novo-a"][data-swgma-mode] .btn { border-radius: 999px !important; padding: 9px 22px !important; font-weight: 500 !important; }
html[data-swgma-theme="novo-c"][data-swgma-mode] .btn { border-radius: 5px !important; }
html[data-swgma-theme="novo-b"][data-swgma-mode] .btn-primary {
  /* medido: acento a 88% (vidro tingido), não sólido */
  background: color-mix(in srgb, var(--sw-primary, #C45C16) 88%, transparent) !important;
  border-color: color-mix(in srgb, var(--sw-primary, #C45C16) 62%, transparent) !important;
}
html[data-swgma-theme^="novo-"][data-swgma-mode] .btn-primary {
  box-shadow: inset 0 1px 0 rgba(255,255,255,var(--nv-brilho, .8)), 0 1px 3px rgba(0,0,0,.14) !important;
}
/* fantasma: cinza CHEIO com texto no acento, sem borda — não contorno vazado */
html[data-swgma-theme="novo-b"][data-swgma-mode] .btn-outline,
html[data-swgma-theme="novo-b"][data-swgma-mode] .btn-secondary {
  background: var(--nv-preenche, #E5E5EA) !important;
  color: var(--sw-primary, #C45C16) !important;
  border-color: transparent !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,var(--nv-brilho, .8)), 0 1px 2px rgba(0,0,0,.07) !important;
}
html[data-swgma-theme="novo-b"][data-swgma-mode] .btn-wiz-back {
  background: var(--nv-preenche, #E5E5EA) !important;
  color: var(--sw-primary, #C45C16) !important;
  border-color: transparent !important;
}

/* ═══ AS VARIANTES QUE FALTAVAM (14/09/2026) ═════════════════════════════
   A base já estava medida acima desde 11/09. Faltava o resto do vocabulário
   do artefato — e sem ele o sistema tinha um botão certo e cinco improvisados.
   Par exato do que foi escrito no Performance no mesmo dia: o botão é a peça
   que mais denuncia dois sistemas quando difere.

   Medido no ateliê (dir b): gap 7px · quieto transparente com `--sw-text-2` ·
   mini 11,52px com respiro 4px 10px.
   ⚠️ `.btn-sm` (904 usos) fica do TAMANHO DA BASE, de propósito: no People ele
   é o tamanho de fato. Mapeá-lo para `mini` encolheria o sistema inteiro.
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-swgma-theme^="novo-"][data-swgma-mode] .btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px !important;
}
/* O gap substitui a margem do ícone — com os dois, o respiro vira 11px num
   botão e 7px no vizinho. ⚠️ Aqui a classe é `mr-`/`ml-` (Bootstrap 4), não
   `me-`/`ms-`: foi o que fez o botão principal sair com respiro de ícone-só
   na primeira tentativa. */
html[data-swgma-theme^="novo-"][data-swgma-mode] .btn > i[class*="mr-"],
html[data-swgma-theme^="novo-"][data-swgma-mode] .btn > i[class*="me-"],
html[data-swgma-theme^="novo-"][data-swgma-mode] .btn > span[class*="mr-"] { margin-right: 0 !important; }
html[data-swgma-theme^="novo-"][data-swgma-mode] .btn > i[class*="ml-"],
html[data-swgma-theme^="novo-"][data-swgma-mode] .btn > i[class*="ms-"] { margin-left: 0 !important; }

html[data-swgma-theme^="novo-"][data-swgma-mode] .btn-xs,
html[data-swgma-theme^="novo-"][data-swgma-mode] .btn.mini { font-size: 11.52px !important; padding: 4px 10px !important; }

html[data-swgma-theme^="novo-"][data-swgma-mode] .btn-icon,
html[data-swgma-theme^="novo-"][data-swgma-mode] .btn:has(> i:only-child:not([class*="mr-"]):not([class*="ml-"]):not([class*="me-"]):not([class*="ms-"])) { padding: 8px !important; }
html[data-swgma-theme^="novo-"][data-swgma-mode] .btn-xs:has(> i:only-child:not([class*="mr-"]):not([class*="ml-"])) { padding: 4px !important; }

/* quieto */
html[data-swgma-theme^="novo-"][data-swgma-mode] .btn-ghost {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--sw-text-2) !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
html[data-swgma-theme^="novo-"][data-swgma-mode] .btn-ghost:hover {
  background: color-mix(in srgb, var(--sw-primary) 8%, transparent) !important;
  color: var(--sw-primary) !important;
}

/* perigo SUAVE — o `perigo` do artefato. O `.btn-danger` continua sólido: é o
   botão de "excluir mesmo", e enfraquecê-lo seria mudar o peso de uma decisão
   destrutiva para seguir a forma. */
html[data-swgma-theme^="novo-"][data-swgma-mode] .btn-perigo-suave {
  background: transparent !important;
  color: var(--sw-danger, #b3261e) !important;
  border-color: color-mix(in srgb, var(--sw-danger, #b3261e) 42%, transparent) !important;
  box-shadow: none !important;
}
html[data-swgma-theme^="novo-"][data-swgma-mode] .btn:disabled,
html[data-swgma-theme^="novo-"][data-swgma-mode] .btn.disabled { opacity: .5 !important; filter: none !important; transform: none !important; }

/* ── CAMPOS ─────────────────────────────────────────────────────────────
   medido: respiro 7/11 · raio 9 · 13,28px · sem borda, fundo cinza */
/* ⚠️ `body` no seletor de propósito: os `<style>` de cada página trazem
   `!important` em campo e tabela, e entre dois `!important` ganha quem tem mais
   especificidade. Um elemento a mais resolve sem precisar de mais `!important`. */
html[data-swgma-theme^="novo-"][data-swgma-mode] body input.form-control,
html[data-swgma-theme^="novo-"][data-swgma-mode] body select.form-control,
html[data-swgma-theme^="novo-"][data-swgma-mode] body textarea.form-control,
html[data-swgma-theme^="novo-"][data-swgma-mode] body .form-input,
html[data-swgma-theme^="novo-"][data-swgma-mode] input.form-control,
html[data-swgma-theme^="novo-"][data-swgma-mode] select.form-control,
html[data-swgma-theme^="novo-"][data-swgma-mode] textarea.form-control,
html[data-swgma-theme^="novo-"][data-swgma-mode] .form-input {
  padding: 7px 11px !important;
  border-radius: 9px !important;
  font-size: 13.28px !important;
}
html[data-swgma-theme="novo-b"][data-swgma-mode] body input.form-control,
html[data-swgma-theme="novo-b"][data-swgma-mode] body select.form-control,
html[data-swgma-theme="novo-b"][data-swgma-mode] body textarea.form-control,
html[data-swgma-theme="novo-b"][data-swgma-mode] body .form-input,
html[data-swgma-theme="novo-b"][data-swgma-mode] input.form-control,
html[data-swgma-theme="novo-b"][data-swgma-mode] select.form-control,
html[data-swgma-theme="novo-b"][data-swgma-mode] textarea.form-control,
html[data-swgma-theme="novo-b"][data-swgma-mode] .form-input {
  background-color: var(--nv-preenche, #E5E5EA) !important;
  border-color: transparent !important;
  /* ⚠️ `background-clip`: com a borda transparente de 1px, cortar o fundo no
     padding-box deixa um anel da cor da página em volta do campo. O artefato
     corta no border-box. É 1px, e é o 1px que faz o campo parecer torto. */
  background-clip: border-box !important;
}
html[data-swgma-theme="novo-a"][data-swgma-mode] input.form-control,
html[data-swgma-theme="novo-a"][data-swgma-mode] .form-input {
  border-radius: 5px 5px 0 0 !important;
  border: 0 !important; border-bottom: 2px solid var(--sw-border-strong, #D0BFB4) !important;
  background-color: var(--sw-surface, #F1E9E2) !important;
}
/* ⚠️ Campo com ícone dentro (a busca das listas) mantém o respiro da esquerda:
   7px ali esconderia metade do ícone. A medida do artefato vale para o campo
   simples, e a exceção é declarada, não esquecida. */
/* 🔴 `.search-box` e `.input-icon` NÃO EXISTEM NO PEOPLE. Eu escrevi a exceção
   com dois nomes de classe inventados, e o ícone de lupa ficou EM CIMA do
   texto em 24 telas (a classe real é `.search-input-wrap`, mais
   `.input-wrap`, `.ben-search-wrap`, `.atend-busca-wrap`). A prova de
   estrutura passava; uma FOTO mostrou.
   Quem marca agora é o `visual-camada3.js`, perguntando ao DOM se o campo tem
   ícone posicionado antes dele — pergunta estrutural, que não erra no próximo
   nome de classe. Os nomes ficam como reserva, para quem não tem o script. */
/* ⚠️ E A EXCEÇÃO PRECISA GANHAR DA REGRA DO CAMPO, QUE É MINHA TAMBÉM.
   `input[data-nv-icone]` é (0,2,1); a regra do campo, três linhas acima, é
   `…[data-swgma-mode] body input.form-control` = (0,3,3). Os dois com
   `!important`, e (0,3,3) ganha: o respiro voltava para 11px e o ícone ficava
   em cima do texto DE NOVO. A exceção carrega o mesmo prefixo e mais o
   atributo — (0,4,3). É a mesma conta da camada 2, agora dentro da própria
   folha: `!important` não resolve empate, especificidade resolve. */
html[data-swgma-theme^="novo-"][data-swgma-mode] body input.form-control[data-nv-icone],
html[data-swgma-theme^="novo-"][data-swgma-mode] body input[data-nv-icone],
html[data-swgma-theme^="novo-"][data-swgma-mode] input[data-nv-icone],
html[data-swgma-theme^="novo-"][data-swgma-mode] body .search-input-wrap input.form-control,
html[data-swgma-theme^="novo-"][data-swgma-mode] body .input-wrap input.form-control,
html[data-swgma-theme^="novo-"][data-swgma-mode] body .input-group input.form-control,
html[data-swgma-theme^="novo-"][data-swgma-mode] .search-input-wrap input,
html[data-swgma-theme^="novo-"][data-swgma-mode] .input-wrap input,
html[data-swgma-theme^="novo-"][data-swgma-mode] .input-group .form-control,
html[data-swgma-theme^="novo-"][data-swgma-mode] .search-box input,
html[data-swgma-theme^="novo-"][data-swgma-mode] .input-icon input {
  /* 34px é a reserva (ícone de fonte comum); quem tem ícone medido usa a
     medida — `--nv-pad-icone`, escrita pelo `visual-camada3.js`. */
  padding-left: var(--nv-pad-icone, 34px) !important;
}

/* ── CHIP (etiqueta clicável de filtro) ─────────────────────────────────
   🔴 SELO ≠ CHIP. O artefato separa `.selo` (estado: ativo, vencido, pago) de
   `.chip` (etiqueta que se clica para filtrar), com medida diferente. O People
   tem as duas classes, então são duas regras — e não "o que der para achar".
   medido: 4/11 · 11,84px · pílula · fundo cinza, borda transparente;
   ESCOLHIDO: acento a 14% no fundo, acento no texto, 34% na borda, peso 600. */
/* ⚠️ `.pill` NÃO entra aqui. Fui conferir onde cada classe é usada: o `.pill`
   do People é ESTADO ("vencido", "não expira" — a função que o monta chama-se
   `_selo`), então ele é selo, não chip. Vai com o selo, abaixo. O `.chip` é o
   chip de verdade: etiqueta com `×` para remover, em `components.css`. */
/* 🔴 `.filter-pill` ENTRA AQUI porque é chip, e porque a prova no ESCURO o
   reprovou: a tela de notificações pinta o escolhido com
   `background:var(--sw-primary); color:#fff`, e no escuro o acento é claro
   (#E8874A) — branco em cima dele dá 2,6:1. O `swgma-theme.css` já tinha um
   remendo para isso, mas só sob `[data-swgma-mode="light"]`: no escuro ninguém
   cobria. O chip do artefato resolve os dois de uma vez, porque ele não pinta
   o fundo com o acento CHEIO — usa 14% e escreve NO acento. */
html[data-swgma-theme^="novo-"][data-swgma-mode] .filter-pill,
html[data-swgma-theme^="novo-"][data-swgma-mode] .chip {
  padding: 4px 11px !important;
  border-radius: 999px !important;
  font-size: 11.84px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  background: var(--nv-preenche, #E5E5EA);
  color: var(--sw-text-2, #3C3C43);
  border: 1px solid transparent;
}
html[data-swgma-theme^="novo-"][data-swgma-mode] .filter-pill.active,
html[data-swgma-theme^="novo-"][data-swgma-mode] .chip.on,
html[data-swgma-theme^="novo-"][data-swgma-mode] .chip.active,
html[data-swgma-theme^="novo-"][data-swgma-mode] .chip.selected,
html[data-swgma-theme^="novo-"][data-swgma-mode] .chip[aria-pressed="true"] {
  background: color-mix(in srgb, var(--sw-primary, #C45C16) 14%, transparent);
  color: var(--sw-primary, #C45C16);
  border-color: color-mix(in srgb, var(--sw-primary, #C45C16) 34%, transparent);
  font-weight: 600 !important;
}

/* ── SELO ───────────────────────────────────────────────────────────────
   medido: 2/9 · 11,2px · peso 600 · pílula */
html[data-swgma-theme^="novo-"][data-swgma-mode] .badge,
html[data-swgma-theme^="novo-"][data-swgma-mode] .status-badge,
html[data-swgma-theme^="novo-"][data-swgma-mode] .pill {
  padding: 2px 9px !important;
  border-radius: 999px !important;
  font-size: 11.2px !important;
  font-weight: 600 !important;
  letter-spacing: 0.112px !important;
}
html[data-swgma-theme="novo-c"][data-swgma-mode] .badge,
html[data-swgma-theme="novo-c"][data-swgma-mode] .status-badge,
html[data-swgma-theme="novo-c"][data-swgma-mode] .pill { border-radius: 3px !important; }

/* ── RÓTULO DE BLOCO (diálogo) ──────────────────────────────────────────
   medido: 11,52px · espaçamento 1,152px · peso 700 · cor #8E8E93 */
html[data-swgma-theme^="novo-"][data-swgma-mode] .nv-bloco > h6 {
  font-size: 11.52px !important;
  letter-spacing: 1.152px !important;
  font-weight: 700 !important;
  color: var(--nv-rotulo-bloco, #8E8E93) !important;
}

/* ── ABAS ───────────────────────────────────────────────────────────────
   medido: 6/13 · 13,28px · peso 600 · SEM linha embaixo — na direção B a fila
   de abas é um SEGMENTADO (fundo cinza, pastilha branca no ativo). */
html[data-swgma-theme^="novo-"][data-swgma-mode] .tabs button,
html[data-swgma-theme^="novo-"][data-swgma-mode] .tab,
html[data-swgma-theme^="novo-"][data-swgma-mode] .nav-tab {
  padding: 9px 14px !important;
  font-size: 13.28px !important;
  font-weight: 500 !important;
}
html[data-swgma-theme="novo-b"][data-swgma-mode] .tabs,
html[data-swgma-theme="novo-b"][data-swgma-mode] .nav-tabs {
  border-bottom: 0 !important;
  background: var(--nv-preenche, #E5E5EA) !important;
  border-radius: 9px !important;
  padding: 3px !important;
  gap: 3px !important;
  display: inline-flex !important;
}
html[data-swgma-theme="novo-b"][data-swgma-mode] .tabs button,
html[data-swgma-theme="novo-b"][data-swgma-mode] .tab,
html[data-swgma-theme="novo-b"][data-swgma-mode] .nav-tab {
  border: 0 !important; border-radius: 7px !important; padding: 6px 13px !important;
}
html[data-swgma-theme="novo-b"][data-swgma-mode] .tabs button.active,
html[data-swgma-theme="novo-b"][data-swgma-mode] .tab.active,
html[data-swgma-theme="novo-b"][data-swgma-mode] .nav-tab.active {
  background: var(--sw-canvas, #fff) !important;
  color: var(--sw-text-1, #000) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.12) !important;
  font-weight: 600 !important;
}

/* ── INTERRUPTOR ────────────────────────────────────────────────────────
   medido: 28×16 · pílula · bolinha 12×12 com 2px de folga · andar de 12px ·
   corpo LIGADO em acento a 92% e bolinha BRANCA.

   🔴 ESTAVA INVERTIDO. O interruptor do People é `.form-switch > input +
   .switch-track` com a bolinha em `::after` — mesmo mecanismo do artefato — mas
   ligado ele pintava o TRILHO com acento a 20% e a BOLINHA com o acento cheio.
   O artefato faz o contrário: trilho no acento, bolinha branca. Visto de longe
   um lê "ligado" e o outro lê "quase apagado".
   E a medida estava em `rem`: 2,4×1,3rem = 38,4×20,8px, um terço maior que o
   desenho. Vai em pixel, como o resto da camada. */
html[data-swgma-theme^="novo-"][data-swgma-mode] .form-switch .switch-track {
  width: 28px !important;
  height: 16px !important;
  border-radius: 999px !important;
  background: var(--nv-sw-off, #E5E5EA) !important;
  border: 1px solid transparent !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.07) !important;
}
html[data-swgma-theme^="novo-"][data-swgma-mode] .form-switch .switch-track::after {
  width: 12px !important; height: 12px !important;
  top: 2px !important; left: 2px !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.22), 0 0 0 .5px rgba(0,0,0,.04) !important;
}
/* ⚠️ `~` e não `+`: o `style.css` usa irmão GERAL porque entre o input e o
   trilho às vezes entra um rótulo. Com `+` a regra não casava e o interruptor
   ligado ficava com a cor do desligado. */
html[data-swgma-theme^="novo-"][data-swgma-mode] .form-switch input:checked ~ .switch-track::after {
  transform: translateX(12px) !important;
  background: #fff !important;
}
html[data-swgma-theme="novo-b"][data-swgma-mode] .form-switch input:checked ~ .switch-track {
  background: color-mix(in srgb, var(--sw-primary, #C45C16) 92%, transparent) !important;
  border-color: transparent !important;
}
html[data-swgma-theme="novo-a"][data-swgma-mode] .form-switch input:checked ~ .switch-track,
html[data-swgma-theme="novo-c"][data-swgma-mode] .form-switch input:checked ~ .switch-track {
  background: var(--sw-primary, #C45C16) !important;
  border-color: transparent !important;
}

/* 🔴 O BRILHO DA ARESTA MUDA COM O MODO. Medido no artefato: `.8` no claro e
   `.15` no escuro. Com `.8` no escuro fica uma linha branca marcada em cima
   do botão — o efeito de vidro depende de quanto a luz do ambiente é forte,
   e no escuro ela não é. Vira token: um lugar, dois valores. */
html[data-swgma-theme^="novo-"][data-swgma-mode="dark"] { --nv-brilho: .15; }


/* ═══════════════════════════════════════════════════════════════════════════
   TABELA VAZIA — a MESMA peça do Performance (14/09/2026)

   O People já tinha o componente `.empty-state` (`UI.emptyState()`), usado em
   58 arquivos — dentro e fora de tabela. Em vez de criar um segundo, ele foi
   REVESTIDO com o desenho da casa: ícone num selo tingido, título em peso
   forte, dica em texto secundário. Assim `UI.emptyState()`, o passe de
   `tabela-vazia.js` e o estado vazio do ERP mostram a mesma coisa.
   ⚠️ A regra NÃO é escopada por tema: tabela vazia é conteúdo, não decoração —
   ela precisa aparecer também em quem ficou no visual antigo.
   ═══════════════════════════════════════════════════════════════════════════ */
.sw-vazio-linha > td {
  padding: 0 !important;
  background: transparent !important;
  border-bottom: 0 !important;
}
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; padding: 2.4rem 1rem; text-align: center;
}
.empty-state > i,
.empty-state .sw-vazio-ico {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border-radius: 14px; font-size: 1.15rem; margin: 0;
  color: var(--sw-text-3, #6b7280);
  background: color-mix(in srgb, var(--sw-text-3, #6b7280) 10%, transparent);
}
.empty-state > p {
  margin: 0; font-size: .92rem; font-weight: 600; line-height: 1.3;
  color: var(--sw-text-1, #111);
}
.empty-state .sw-vazio-dica {
  font-size: .8rem; line-height: 1.4; max-width: 46ch;
  color: var(--sw-text-3, #6b7280);
}
.sw-vazio--curto { padding: 1.4rem 1rem; }
.sw-vazio--curto > i,
.sw-vazio--curto .sw-vazio-ico { width: 2.2rem; height: 2.2rem; font-size: .95rem; }

/* Tabela sem classe também estica: o People tem 23 assim. */
html[data-swgma-theme^="novo-"][data-swgma-mode] table:not(.table) { width: 100%; border-collapse: collapse; }


/* ═══ DICA DE FERRAMENTA — a MESMA peça do Performance (14/09/2026) ═══════
   Medida no artefato (`#dica`): fundo #1E1F2B · letra #F4F3F1 · .76rem/500 ·
   respiro 7/10 · raio 6 · largura máxima 280 · sombra 0 4px 14px.
   ⚠️ Não é escopada por tema: dica é conteúdo, não decoração.
   ⚠️ `z-index: 1200` — acima do trilho (100) e do diálogo, senão a dica de um
   botão dentro de modal nasce atrás dele. */
#nv-dica {
  position: fixed; z-index: 1200; pointer-events: none; opacity: 0;
  transform: translateY(3px);
  transition: opacity .12s ease, transform .12s ease;
  background: #1E1F2B; color: #F4F3F1;
  font-size: .76rem; line-height: 1.4; font-weight: 500;
  padding: 7px 10px; border-radius: 6px; max-width: 280px;
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
}
#nv-dica.on { opacity: 1; transform: translateY(0); }
#nv-dica b { display: block; font-weight: 600; }
#nv-dica span { display: block; opacity: .78; font-weight: 400; margin-top: 2px; }
html[data-swgma-mode="dark"] #nv-dica { background: #3A3B4A; }
@media (prefers-reduced-motion: reduce) { #nv-dica { transition: none; } }


/* ═══════════════════════════════════════════════════════════════════════════
   UMA MEDIDA SÓ + INTERRUPTOR + SELECT2 NA MEDIDA DO CAMPO (14/09/2026)
   Par exato do que foi feito no Performance no mesmo dia. O botão e o campo são
   as peças que mais denunciam dois sistemas quando diferem — e aqui o select2
   não tinha NENHUMA regra do visual novo: ele desenhava com a cara de fábrica,
   ao lado de campos já vestidos.
   ═══════════════════════════════════════════════════════════════════════════ */

/* uma altura só, com e sem `-sm` */
html[data-swgma-theme^="novo-"][data-swgma-mode] body .btn,
html[data-swgma-theme^="novo-"][data-swgma-mode] body .btn-sm,
html[data-swgma-theme^="novo-"][data-swgma-mode] body .form-control,
html[data-swgma-theme^="novo-"][data-swgma-mode] body .form-select,
html[data-swgma-theme^="novo-"][data-swgma-mode] body select,
html[data-swgma-theme^="novo-"][data-swgma-mode] body input[type="text"],
html[data-swgma-theme^="novo-"][data-swgma-mode] body input[type="date"],
html[data-swgma-theme^="novo-"][data-swgma-mode] body input[type="number"],
html[data-swgma-theme^="novo-"][data-swgma-mode] body input[type="email"],
html[data-swgma-theme^="novo-"][data-swgma-mode] body input[type="password"] {
  min-height: 40px !important;
  height: auto !important;
  line-height: 1.5 !important;
}
html[data-swgma-theme^="novo-"][data-swgma-mode] body .btn-xs { min-height: 28px !important; line-height: 1.35 !important; }
html[data-swgma-theme^="novo-"][data-swgma-mode] body textarea.form-control { height: auto !important; }

/* ── CAIXA DE MARCAR É INTERRUPTOR ──────────────────────────────────────
   Medido no ateliê (`.sw`): trilha 34×19, raio 999, botão 15 com 2 de folga,
   `translateX(15)` ao ligar, acento quando ligado. CSS puro sobre o
   `<input type="checkbox">`: nenhuma marcação nova nas 103 telas. */
html[data-swgma-theme^="novo-"][data-swgma-mode] body input[type="checkbox"]:not(.sw-nao) {
  appearance: none; -webkit-appearance: none;
  width: 34px !important; height: 19px !important; min-height: 0 !important;
  border-radius: 999px !important;
  background: var(--nv-sw-off, var(--sw-border, #D1D1D6)) !important;
  border: 0 !important; padding: 0 !important; margin: 0 6px 0 0;
  position: relative; flex: none; cursor: pointer; vertical-align: -4px;
  transition: background .16s ease;
}
html[data-swgma-theme^="novo-"][data-swgma-mode] body input[type="checkbox"]:not(.sw-nao)::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 15px; height: 15px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.28);
  transition: transform .16s ease;
}
html[data-swgma-theme^="novo-"][data-swgma-mode] body input[type="checkbox"]:not(.sw-nao):checked {
  background: var(--sw-primary) !important;
}
html[data-swgma-theme^="novo-"][data-swgma-mode] body input[type="checkbox"]:not(.sw-nao):checked::after { transform: translateX(15px); }
/* 🔴 O TERCEIRO ESTADO: "alguns marcados".
   A caixa de marcar tem `:indeterminate` e o cabeçalho das tabelas usa isso
   para dizer "parte da lista está selecionada". Como interruptor, sem regra,
   esse estado ficava IGUAL a "nenhum marcado" — a tela mentia sobre a seleção.
   Trilho no acento (algo está selecionado) e botão no MEIO do curso: lê-se de
   longe que não é nem ligado nem desligado. */
html[data-swgma-theme^="novo-"][data-swgma-mode] body input[type="checkbox"]:not(.sw-nao):indeterminate {
  background: color-mix(in srgb, var(--sw-primary) 45%, var(--nv-sw-off, #D1D1D6)) !important;
}
html[data-swgma-theme^="novo-"][data-swgma-mode] body input[type="checkbox"]:not(.sw-nao):indeterminate::after {
  transform: translateX(7.5px);
}
html[data-swgma-theme^="novo-"][data-swgma-mode] body input[type="checkbox"]:not(.sw-nao):focus-visible {
  outline: 2px solid var(--sw-primary); outline-offset: 2px;
}
html[data-swgma-theme^="novo-"][data-swgma-mode] body input[type="checkbox"]:disabled { opacity: .5; }

/* ── SELECT2 COM A MEDIDA DO CAMPO ──────────────────────────────────────
   🔴 Ele não tinha regra nenhuma do visual novo: desenhava com a cara de
   fábrica (borda fina, canto 4, altura 28) ao lado de campos de 40 px com
   canto 9 e fundo cinza. */
html[data-swgma-theme^="novo-"][data-swgma-mode] body .select2-container--default .select2-selection--single {
  min-height: 40px !important; height: auto !important;
  padding: 7px 11px !important;
  border: 0 !important; border-radius: 9px !important;
  background: var(--nv-preenche, var(--sw-surface-2, #E5E5EA)) !important;
  display: flex; align-items: center;
}
html[data-swgma-theme^="novo-"][data-swgma-mode] body .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--sw-text-1) !important; font-size: 13.28px !important; line-height: 1.5 !important;
  padding: 0 18px 0 0 !important;
}
html[data-swgma-theme^="novo-"][data-swgma-mode] body .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100% !important; right: 8px !important;
}
html[data-swgma-theme^="novo-"][data-swgma-mode] body .select2-container--default.select2-container--focus .select2-selection--single,
html[data-swgma-theme^="novo-"][data-swgma-mode] body .select2-container--default.select2-container--open .select2-selection--single {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sw-primary) 20%, transparent) !important;
}
html[data-swgma-theme^="novo-"][data-swgma-mode] body .select2-dropdown {
  border: 1px solid var(--sw-border) !important; border-radius: 12px !important;
  background: var(--sw-surface) !important; overflow: hidden;
  box-shadow: 0 8px 24px rgba(20,22,34,.14) !important;
}
html[data-swgma-theme^="novo-"][data-swgma-mode] body .select2-results__option {
  font-size: 13.28px !important; padding: 8px 11px !important; color: var(--sw-text-1) !important;
}
html[data-swgma-theme^="novo-"][data-swgma-mode] body .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: color-mix(in srgb, var(--sw-primary) 10%, transparent) !important;
  color: var(--sw-primary) !important;
}
html[data-swgma-theme^="novo-"][data-swgma-mode] body .select2-search--dropdown .select2-search__field {
  min-height: 36px !important; border: 0 !important; border-radius: 9px !important;
  background: var(--nv-preenche, var(--sw-surface-2, #E5E5EA)) !important;
  padding: 6px 10px !important; font-size: 13.28px !important; color: var(--sw-text-1) !important;
}

/* ═══ ESCONDER VENCE VESTIR ══════════════════════════════════════════════════
   🔴 O DEFEITO QUE ISTO FECHA. A folha do visual novo veste `.btn` com
   `display: inline-flex !important` (linha 178). Declaração `!important` de
   folha ganha de declaração NORMAL em linha — sempre, sem empate a resolver.
   Logo, para todo `.btn` do People:

       style="display:none" no HTML .......... decorativo
       el.style.display = 'none' no JS ....... decorativo
       atributo [hidden] ..................... decorativo (o tailwind define
                                               `[hidden]:where(...)`, (0,1,0))
       class="hidden" ........................ decorativo (tailwind, (0,1,0))

   MEDIDO no navegador, na página servida: 10 casos de esconder, 10 falhando.
   E não era só botão — a mesma família derrubava o CONTADOR DE NOTIFICAÇÕES
   (`.sidebar-ua-badge`, casca.css:798, que nasce `style="display:none"` em
   layout.js:576) e o CARTÃO DE DINHEIRO das Diárias (`.stat-card`,
   visual-novo.css:488, escondido até a consulta responder).

   🔴 POR QUE `@layer` E NÃO MAIS ESPECIFICIDADE. Declaração `!important`
   DENTRO de uma camada vence declaração `!important` FORA de camada, seja qual
   for a especificidade — a ordem de importância é invertida nas camadas. É o
   único jeito determinístico: as regras de display do visual novo vão de
   (0,2,1) a (0,5,1), e disputar isso por seletor é corrida armamentista, que
   é exatamente o erro que [[css-especificidade-coluna-do-meio]] registra.
   Navegador sem `@layer` ignora o bloco inteiro e volta ao que já era hoje —
   nunca fica pior.

   ⚠️ QUEM ESCONDE E DEPOIS MOSTRA CONTINUA FUNCIONANDO: `el.style.display=''`
   apaga a propriedade do atributo, o seletor deixa de casar, e a peça aparece.
   Provado (`btn-volta` na sonda).

   ⚠️ As DUAS grafias, e sem distinguir maiúscula: o JS serializa
   `display: none;` COM espaço, o HTML da casa escreve `display:none` sem. Uma
   só das duas corrige o markup estático e deixa o dinâmico na tela — que é o
   pior dos mundos, porque a tela PARECE corrigida.

   ⚠️ `.d-none` fica de fora: o People não carrega Bootstrap e essa classe não
   existe na árvore. No ERP ela entra, com ressalva para a dupla responsiva.

   Prova: scripts/visual/sonda_final.mjs — REPROVA sem este bloco (10 errados)
   e passa com ele (20 certos). ════════════════════════════════════════════ */
@layer nv-esconde {
  [hidden]:not([hidden="until-found"]),
  [style*="display:none" i],
  [style*="display: none" i],
  .hidden { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   NO TELEFONE, A TRUNCAGEM DA COLUNA ZERA O TEXTO EM VEZ DE O ENCURTAR
   ═══════════════════════════════════════════════════════════════════════
   🔴 MEDIDO A 390px EM 19/09/2026. O truque da casa para truncar célula é
      `max-width: 0` no `<td>` (4 classes `*-clip` e 7 usos em linha, em 6
      telas de RH). Sob `table-layout: auto` isso diz ao navegador "esta
      coluna pode ser tão estreita quanto quiseres" — e no telefone, onde as
      colunas de largura fixa já consomem tudo, o que sobra é ZERO:

        modulos/rh/processos    12 textos de largura zero (nome e empresa
                                   das partes do processo)
        modulos/rh/horas-extras 11 (a descrição da hora extra)
        modulos/rh/licencas       6 (nome do funcionário e do médico)

      Não é texto cortado: é texto AUSENTE. A célula existe, tem altura, tem
      dica — e não mostra um pixel de letra.

   ⚠️ E NÃO SE CONSERTA COM `min-width`. Medido: com `min-width: 120px` a
      propriedade COMPUTA (120px) e a célula continua com 0 de largura. O
      algoritmo de tabela automática do Chromium decide a coluna pela largura
      PREFERIDA do conteúdo, e `max-width: 0` faz a preferida ser zero.
      Tentei também `width` na célula e `min-width` na tabela: só o
      `max-width` da célula muda a conta.

   A cura é tirar a causa: NO TELEFONE NÃO SE TRUNCA. A tabela fica larga e o
   invólucro rola — o mesmo caminho do ERP, onde o `overflow-x: auto` do
   invólucro já existia e era a coluna que não tinha piso.

   ⚠️ `td[data-label]` entra na lista porque é a marca do arranjo de CARTÃO (a
      linha vira bloco e o rótulo vem de `::before`): ali a truncagem de
      coluna do desktop não faz sentido nenhum, e era ela que zerava a
      descrição em `horas-extras`.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  html[data-swgma-theme^="novo-"] table td[class$="-clip"],
  html[data-swgma-theme^="novo-"] table td[style*="max-width:0"],
  html[data-swgma-theme^="novo-"] table td[data-label] { max-width: none !important; }
  html[data-swgma-theme^="novo-"] table td[class$="-clip"] > span,
  html[data-swgma-theme^="novo-"] table td[style*="max-width:0"] > span,
  html[data-swgma-theme^="novo-"] table td[data-label] > span { max-width: none !important; }
  /* o nome da parte, em `processos`, vive dentro de dois níveis de flex */
  html[data-swgma-theme^="novo-"] table td .proc-parte,
  html[data-swgma-theme^="novo-"] table td .proc-parte-txt { min-width: 96px !important; }
}
/* ⚠️ E FALTAVA UM SEGUNDO LEVANTE, para a tabela que NÃO virou cartão.
   Em `modulos/rh/licencas` a linha continua sendo linha de tabela a 390px, e
   tirar o `max-width` não bastou: medido, as colunas de largura fixa somam
   exatamente a largura da tabela (48+40+75+105+105+55+88 = 516) e as duas
   colunas de texto ficam com zero. E não é o `max-width` que as zera agora —
   é o `overflow: hidden`, que faz a largura MÍNIMA de conteúdo da célula ser
   zero, então o algoritmo pode dar-lhe nada sem "quebrar" nada.
   Com a tabela a 760px há o que distribuir: medido, a célula do nome passou de
   0 para 167px e as 6 ausências foram a zero. O invólucro já rola. */
@media (max-width: 760px) {
  html[data-swgma-theme^="novo-"] table:has(td[class$="-clip"]),
  html[data-swgma-theme^="novo-"] table:has(td[style*="max-width:0"]) { min-width: 760px; }
  /* a que virou CARTÃO não leva largura nenhuma: ali a linha é um bloco e
     esticar a tabela criaria barra horizontal onde não havia. */
  html[data-swgma-theme^="novo-"] table:has(td[data-label]) { min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   A LINHA DE CARTÃO PROTEGE OS BOTÕES E SACRIFICA O NOME
   ═══════════════════════════════════════════════════════════════════════
   🔴 MEDIDO A 390px EM 19/09/2026. O padrão da casa para uma linha de lista
      em cartão é este:

        .card  display:flex; align-items:center; gap:1rem
          ├─ ícone ou capa ............ flex-shrink: 0
          ├─ TEXTO ..... flex:1;min-width:0   ou   flex:0 1 200px;min-width:0
          ├─ selo de estado ........... white-space: nowrap
          └─ botões ................... flex-shrink: 0

      No telefone o ícone, o selo, os botões e os vãos pedem mais do que a
      linha tem. Todos são inencolhíveis — menos o TEXTO, que tem
      `min-width: 0` justamente para poder encolher. Então encolhe:

        modulos/atendimento/fluxos          nome da pasta:      0px de 114
        modulos/atendimento/canais          nome do canal:     12px de 200
        modulos/agendamentos/equipamentos   nome do equipamento: 63px de 169

      É uma ordem de prioridade invertida: o que identifica a linha desaparece
      para que caibam quatro botões de ícone. Em `fluxos` o nome da pasta fica
      com ZERO pixels — a lista de pastas não mostra pasta nenhuma.

   A cura: no telefone a linha QUEBRA e o texto fica com a primeira linha
   inteira; os botões descem para a segunda. Nada se esconde e nada encolhe.

   ⚠️ O seletor casa com a INTENÇÃO, não com um acidente: quem escreveu
      `min-width: 0` naquele filho escreveu exatamente "este pode encolher", e
      é esse o filho a proteger. E só em cartão que é LINHA
      (`display:flex` sem `column`) — cartão em coluna não é tocado.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  html[data-swgma-theme^="novo-"] .card[style*="display:flex"]:not([style*="column"]) {
    flex-wrap: wrap;
  }
  html[data-swgma-theme^="novo-"] .card[style*="display:flex"]:not([style*="column"]) > div[style*="min-width:0"] {
    flex: 1 1 100%;
  }
  /* 🔴 E O CRACHÁ DE PESSOA TOMA A LINHA INTEIRA. Em `modulos/rh/feedbacks` o
     `.func-badge` tinha 115px e "Priscila Wanderley" pede 123 — o nome perdia
     36,6%. Nome de pessoa é o que se rastreia numa lista; o resto da linha
     cede antes dele. */
  html[data-swgma-theme^="novo-"] .func-badge { flex: 1 1 100%; min-width: 0; }
  html[data-swgma-theme^="novo-"] .func-badge-text { flex: 1 1 auto; min-width: 0; }
}
/* ⚠️ E PRECISA DE `!important`, porque o alvo é ESTILO EM LINHA. O filho de
   texto traz `style="flex:1;min-width:0"` escrito no HTML, e estilo em linha
   vence regra de folha sempre — a menos que a folha seja importante. Medido em
   `agendamentos/equipamentos`: sem o `!important` o `flex-basis` continuava 0%,
   o texto ficava com 20px e a linha nem chegava a quebrar (com base zero tudo
   "cabe"). Ver [[css-especificidade-coluna-do-meio]]. */
@media (max-width: 760px) {
  html[data-swgma-theme^="novo-"] .card[style*="display:flex"]:not([style*="column"]) > div[style*="min-width:0"] {
    flex: 1 1 100% !important;
  }
  /* 🔴 E O CARTÃO DE FEEDBACK É CLASSE, NÃO `style` — o seletor acima não o
     alcança. Medido: `.fb-card` tem 324px, a linha dentro dela 287, e a coluna
     de texto fica com 103 — o nome "Priscila Wanderley" pede 123 e perde
     36,6%. A linha quebra e o crachá fica com a largura toda. */
  html[data-swgma-theme^="novo-"] .fb-card div[style*="display:flex"] { flex-wrap: wrap; }
  html[data-swgma-theme^="novo-"] .fb-card div[style*="min-width:0"] { flex: 1 1 100% !important; }
}

/* ── AS TRÊS ÚLTIMAS DO TELEFONE, medidas em 19/09/2026 ────────────────── */
@media (max-width: 760px) {
  /* 🔴 NOME DE SETOR CORTADO 27,9% em `modulos/agendamentos/config`: a mesma
     linha de cartão que espreme o texto, aqui sem `.card` e sem `style` no
     contêiner — o nome fica com 129px de 179. A lista de setores é um flex
     de flex; quebrar a linha devolve a largura ao nome. */
  html[data-swgma-theme^="novo-"] #setores-list > div > div { flex-wrap: wrap; }
  html[data-swgma-theme^="novo-"] #setores-list > div > div > div { flex: 1 1 100%; min-width: 0; }

  /* 🔴 PERÍODO DE FÉRIAS TRANSBORDANDO: "05/10/2026 – 03/11/2026" pede 154px
     e a célula dá 146 — 8 a 15px escorrendo POR CIMA da coluna vizinha
     (`overflow: visible`), que é pior que cortar: as duas ficam ilegíveis.
     Um intervalo de datas quebra depois do travessão sem perder sentido. */
  html[data-swgma-theme^="novo-"] tbody td > div { white-space: normal; }

  /* 🔴 RÓTULO DE BOTÃO CORTADO: "Limpar" pede 77px e o botão tem 73 — ele é
     `flex: 0 1 auto`, então encolhe 4px e come a última letra. Botão não
     encolhe abaixo do que escreve: ou cabe, ou a fila quebra. */
  html[data-swgma-theme^="novo-"] .btn { min-width: fit-content; }

  /* 🔴 CAMPO DE FORMULÁRIO NA LINHA DO RÓTULO: em `perfil` o CPF ficou com
     22px de 102. No telefone rótulo e campo empilham — é o padrão de
     formulário em tela estreita, e nenhum dos dois encolhe. */
  html[data-swgma-theme^="novo-"] .form-group { flex-wrap: wrap; }
  html[data-swgma-theme^="novo-"] .form-group > .form-control { flex: 1 1 100%; min-width: 0; }
}
/* ⚠️ E as duas precisam de `!important` pela MESMA razão da regra do cartão:
   o alvo é estilo EM LINHA. Em `rh/ferias` o período vem com
   `style="white-space:nowrap"` escrito no HTML; em `agendamentos/config` a
   coluna de texto está um nível mais fundo do que eu tinha alcançado. */
@media (max-width: 760px) {
  html[data-swgma-theme^="novo-"] tbody td > div,
  html[data-swgma-theme^="novo-"] tbody td > div > span { white-space: normal !important; }
  html[data-swgma-theme^="novo-"] #setores-list div { flex-wrap: wrap; }
  html[data-swgma-theme^="novo-"] #setores-list > div > div > div { flex: 1 1 100% !important; min-width: 0; }
}

/* ── E A ÚLTIMA CAMADA DA MESMA HISTÓRIA: `table-layout: fixed` ─────────
   🔴 MEDIDO A 390px. Depois de tirar o `max-width: 0` e de dar largura à
      tabela, duas telas continuaram a truncar metade das células:

        modulos/rh/faltas    "Acompanhamento de filho ao médico"  32px de 252
        modulos/rh/licencas  "Dra. Marília Gadelha"               77px de 145

      Porque `table-layout: fixed` ignora o conteúdo: a largura da coluna vem
      da primeira linha e das larguras declaradas, e nada que se diga à célula
      muda isso. `max-width: none` não tem efeito nenhum sob layout fixo — foi
      por isso que as duas correções anteriores passaram ao lado destas telas.

   No telefone a tabela passa a `auto`: a coluna nasce do conteúdo e o
   invólucro rola. Rolar de lado é um gesto; ler 32px de uma frase de 252 não
   é possibilidade nenhuma.
   ⚠️ Só nas tabelas que usam a truncagem da casa (`*-clip` ou `max-width:0`):
      tabela que já se comporta não muda de algoritmo. */
@media (max-width: 760px) {
  html[data-swgma-theme^="novo-"] table:has(td[class$="-clip"]),
  html[data-swgma-theme^="novo-"] table:has(td[style*="max-width:0"]) {
    table-layout: auto !important;
  }
}