/* ═══════════════════════════════════════════════════════════════════════════
   SysBol — Design System
   Vanilla, sem build. Uma fundação única para todas as telas.

   Ordem do arquivo:
     1. Tokens             6. Tabela (+ cartões no celular)
     2. Base + utilitários 7. Selos de situação
     3. Esqueleto do app   8. Diálogo, gaveta, aviso
     4. Botões             9. Estado vazio e esqueleto de carga
     5. Formulários       10. Bloco, abas, métrica, caixa de marcação
                          11. Login · Celular
                          12. Busca global (⌘K)
                          13. Histórico de unificação de nomes
                          14. CSS específico de cada tela

   Regra: nenhuma cor, tamanho ou espaço solto no CSS das telas. Só token.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────── 1. TOKENS ─────────────────────────────── */
:root {
  /* Tipografia */
  --sb-fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sb-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Escala de letra (rem; a raiz é fixa em 14px, então 1rem = 14px). Aumentada em 06/11/2026 a pedido do dono:
     +25% em 11/12/13/14 (texto, menu, botões, tabela, campo, rótulo, dica, selo) e +15% em 16/20/26/32 (títulos).
     px reais: 11=12,0 · 12=13,1 · 13=14,2 · 14=15,3 · 16=16,1 · 20=20,1 · 26=26,2 · 32=32,2 */
  --sb-t-11: .8594rem;  --sb-t-12: .9375rem; --sb-t-13: 1.0156rem;
  --sb-t-14: 1.0938rem; --sb-t-16: 1.15rem;  --sb-t-20: 1.4375rem;
  --sb-t-26: 1.8688rem; --sb-t-32: 2.3rem;

  /* Espaço — escala de 4 */
  --sb-e-1: 4px;  --sb-e-2: 8px;  --sb-e-3: 12px; --sb-e-4: 16px;
  --sb-e-5: 24px; --sb-e-6: 32px; --sb-e-7: 48px; --sb-e-8: 64px;

  /* Forma */
  --sb-raio-p: 6px; --sb-raio: 8px; --sb-raio-g: 12px; --sb-raio-pill: 999px;

  /* Movimento */
  --sb-mov: 150ms cubic-bezier(.4, 0, .2, 1);
  --sb-mov-g: 240ms cubic-bezier(.32, .72, 0, 1);

  /* Camadas */
  --sb-z-topo: 50; --sb-z-fundo: 800; --sb-z-gaveta: 801;
  --sb-z-dialogo: 900; --sb-z-paleta: 920; --sb-z-aviso: 950;
  --sb-z-dica: 970;      /* balão de ajuda — acima de tudo, inclusive do modal */

  /* Medidas */
  --sb-lateral-larg: 248px;
  --sb-topo-alt: 60px;
  --sb-linha-alt: 46px;
  --sb-toque: 44px;      /* alvo mínimo de toque no celular (WCAG 2.5.5) */

  /* ── Cor: tema claro ── */
  --sb-acento: #4f46e5;
  --sb-acento-forte: #4338ca;
  --sb-acento-fraco: #eef2ff;
  --sb-acento-tinta: #3730a3;

  --sb-papel: #ffffff;
  --sb-tela: #f7f8fa;
  --sb-tinta: #0f1729;
  /* Contraste reforçado a pedido do dono (07/11/2026: "leitura cansativa"): dicas, resumos e metadados eram
     ~40% do texto da Nova cobrança em cinza-claro. Antes: tinta-2 #4a5568 (7,53:1) · tinta-3 #616c80 (5,30:1). */
  --sb-tinta-2: #3d4757;          /* papel 9,39:1 · tela 8,83:1 */
  --sb-tinta-3: #505b6d;          /* papel 6,87:1 · tela 6,46:1 · neutro 6,01:1 */
  --sb-tinta-selo: #4b5563;       /* texto do selo neutro sobre --sb-neutro-f: 6,8:1 */
  --sb-link: #4f46e5;             /* link como TEXTO — separado do acento de fundo: 6,29:1 */
  --sb-linha: #e6e9ee;
  --sb-linha-forte: #d3d8e0;

  --sb-lateral: #ffffff;
  --sb-lateral-tinta: #4a5568;
  --sb-lateral-tinta-ativa: #0f1729;
  --sb-lateral-ativo: #f0f1fe;
  --sb-lateral-linha: #e6e9ee;
  --sb-lateral-marca: #0f1729;

  --sb-sombra: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --sb-sombra-g: 0 12px 32px -8px rgba(16, 24, 40, .16), 0 4px 8px -4px rgba(16, 24, 40, .06);

  --sb-ok: #047857;      --sb-ok-f: #ecfdf5;
  --sb-alerta: #b45309;  --sb-alerta-f: #fffbeb;
  --sb-perigo: #be123c;  --sb-perigo-f: #fff1f2;
  --sb-info: #1d4ed8;    --sb-info-f: #eff6ff;
  --sb-neutro-f: #f1f3f6;
}

/* ── Cor: tema escuro. Segue o sistema; o botão da lateral força um dos dois. ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { color-scheme: dark; }
}
:root[data-tema="escuro"], @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) {
  --sb-acento: #5b5ef0;           /* era #6366f1 — branco sobre ele dava 4,47:1, reprovado. Agora 4,88:1 */
  --sb-acento-forte: #818cf8;
  --sb-acento-fraco: #1e1b4b;
  --sb-acento-tinta: #a5b4fc;
  --sb-link: #818cf8;             /* o acento é escuro demais para ser TEXTO no escuro: 6,06:1 */

  --sb-papel: #14161d;
  --sb-tela: #0b0c10;
  --sb-tinta: #e8eaf0;
  --sb-tinta-2: #aeb5c2;          /* contraste reforçado (07/11/2026): papel 8,4:1 */
  --sb-tinta-3: #9aa3b2;          /* era #7b8494 (4,58:1). Agora papel 6,8:1 · tela 7,3:1 */
  --sb-tinta-selo: #a3abb8;       /* selo neutro sobre --sb-neutro-f: 6,9:1 */
  --sb-linha: #232631;
  --sb-linha-forte: #2f3340;

  --sb-lateral: #0b0c10;
  --sb-lateral-tinta: #9199a8;
  --sb-lateral-tinta-ativa: #ffffff;
  --sb-lateral-ativo: #1c1f2a;
  --sb-lateral-linha: #1e2129;
  --sb-lateral-marca: #ffffff;

  --sb-sombra: 0 1px 2px rgba(0, 0, 0, .4);
  --sb-sombra-g: 0 16px 40px -8px rgba(0, 0, 0, .6);

  --sb-ok: #34d399;      --sb-ok-f: #052e26;
  --sb-alerta: #fbbf24;  --sb-alerta-f: #2e2206;
  --sb-perigo: #fb7185;  --sb-perigo-f: #3b0a17;
  --sb-info: #60a5fa;    --sb-info-f: #0c1e3d;
  --sb-neutro-f: #1c1f2a;
} }

/* Escuro forçado pelo botão (fora do media query, para vencer a preferência do SO). */
:root[data-tema="escuro"] {
  color-scheme: dark;
  --sb-acento: #5b5ef0;      --sb-acento-forte: #818cf8;
  --sb-acento-fraco: #1e1b4b; --sb-acento-tinta: #a5b4fc;
  --sb-link: #818cf8;
  --sb-papel: #14161d;       --sb-tela: #0b0c10;
  --sb-tinta: #e8eaf0;       --sb-tinta-2: #aeb5c2;   --sb-tinta-3: #9aa3b2;
  --sb-tinta-selo: #a3abb8;
  --sb-linha: #232631;       --sb-linha-forte: #2f3340;
  --sb-lateral: #0b0c10;     --sb-lateral-tinta: #9199a8;
  --sb-lateral-tinta-ativa: #ffffff; --sb-lateral-ativo: #1c1f2a;
  --sb-lateral-linha: #1e2129; --sb-lateral-marca: #ffffff;
  --sb-sombra: 0 1px 2px rgba(0, 0, 0, .4);
  --sb-sombra-g: 0 16px 40px -8px rgba(0, 0, 0, .6);
  --sb-ok: #34d399;      --sb-ok-f: #052e26;
  --sb-alerta: #fbbf24;  --sb-alerta-f: #2e2206;
  --sb-perigo: #fb7185;  --sb-perigo-f: #3b0a17;
  --sb-info: #60a5fa;    --sb-info-f: #0c1e3d;
  --sb-neutro-f: #1c1f2a;
}
:root[data-tema="claro"] { color-scheme: light; }

/* ──────────────────────────────── 2. BASE ──────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* Barra de rolagem — padrão único (página, modais, gavetas, tabelas).
   Chrome/Edge/Safari: ::-webkit-scrollbar (fina, arredondada, sem setas).
   Firefox: só cor/espessura — o scrollbar-color fica restrito a ele porque, no
   Chrome 121+, essa propriedade desliga o ::-webkit-scrollbar. Cores pelo tema. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--sb-tinta-3) 40%, transparent);
  border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--sb-tinta-3) 70%, transparent); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: transparent; }
@supports (-moz-appearance: none) {
  * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--sb-tinta-3) 45%, transparent) transparent; }
}

html, body {
  font-family: var(--sb-fonte);
  font-size: var(--sb-t-14);
  color: var(--sb-tinta);
  background: var(--sb-tela);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;   /* dinheiro alinha em coluna */
}
html { font-size: 14px; }   /* raiz fixa: 1rem continua = 14px; só os tokens --sb-t-* crescem */

h1, h2, h3 { color: var(--sb-tinta); letter-spacing: -.02em; }
a { color: var(--sb-link); }   /* link é TEXTO: exige 4,5:1, não os 3:1 de um elemento de UI */
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

/* Foco visível — só no teclado, nunca no clique. */
:focus-visible {
  outline: 2px solid var(--sb-acento);
  outline-offset: 2px;
  border-radius: var(--sb-raio-p);
}

/* Quem pediu menos movimento, recebe menos movimento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

.sb-mono { font-family: var(--sb-mono); font-size: var(--sb-t-13); color: var(--sb-tinta-2); }
.sb-num  { text-align: right; font-weight: 600; letter-spacing: -.01em; }
[hidden] { display: none !important; }

/* ── Utilitários ─────────────────────────────────────────────────────────────
   Rótulo que o leitor de tela lê e o olho não vê. Todo campo de busca sem
   rótulo visível depende disto — por isso mora aqui, não na tela.            */
.sb-oculto-visual {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0; overflow: hidden;
  clip: rect(0 0 0 0);      /* fallback antigo */
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Texto de apoio: nota de seção, sub-linha dentro de dd, aviso curto. */
.sb-nota { font-size: var(--sb-t-12); color: var(--sb-tinta-3); font-weight: 500; }

/* Esmaecido: item inativo ou marcado para remoção. Continua legível — some, nunca. */
.sb-esmaecido { opacity: .55; }

/* Bloco travado até a etapa anterior (PRD-3004). SEMPRE junto do atributo inert. O MOTIVO da trava nunca fica dentro dele. */
.sb-travado { opacity: .55; pointer-events: none; user-select: none; }

/* ───────────────────────── 3. ESQUELETO DO APP ─────────────────────────── */
/* minmax(0, 1fr): sem o mínimo zero, qualquer conteúdo largo (tabela, fileira
   de cartões) força a coluna além da janela e corta a tela à direita. */
.sb-app { display: grid; grid-template-columns: var(--sb-lateral-larg) minmax(0, 1fr); min-height: 100vh; }

/* ── Barra lateral ── */
.sb-lateral {
  background: var(--sb-lateral);
  border-right: 1px solid var(--sb-lateral-linha);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}

.sb-marca { display: flex; align-items: center; gap: 10px; padding: var(--sb-e-5) var(--sb-e-4) var(--sb-e-4); }
.sb-marca-selo {
  width: 30px; height: 30px; border-radius: var(--sb-raio); flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--sb-acento); color: #fff; font-weight: 800; font-size: var(--sb-t-14);
}
.sb-marca-nome { font-weight: 700; font-size: var(--sb-t-16); color: var(--sb-lateral-marca); letter-spacing: -.01em; }

/* Ícone pequeno junto de texto (selos, chips, rótulos) — substitui os emojis. */
.sb-ico-inline { width: 14px; height: 14px; stroke-width: 2; vertical-align: -2px; margin-right: 4px; flex: 0 0 auto; }

.sb-empresa-ini {
  width: 26px; height: 26px; border-radius: var(--sb-raio-p); flex: 0 0 auto;
  background: var(--sb-acento); color: #fff;
  display: grid; place-items: center; font-size: var(--sb-t-11); font-weight: 700;
}

/* A lista rola sozinha (min-height:0 + overflow): em tela baixa o rodapé com o
   usuário continua visível embaixo, em vez de ser empurrado para fora da tela. */
.sb-nav-lista {
  padding: 0 var(--sb-e-3) var(--sb-e-3); display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
.sb-lateral > :not(.sb-nav-lista) { flex-shrink: 0; }
.sb-nav-grupo {
  font-size: var(--sb-t-11); font-weight: 600; color: var(--sb-tinta-3);
  text-transform: uppercase; letter-spacing: .07em;
  padding: var(--sb-e-4) var(--sb-e-3) var(--sb-e-2);
}
.sb-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px var(--sb-e-3); border-radius: var(--sb-raio-p);
  color: var(--sb-lateral-tinta); text-decoration: none;
  font-size: var(--sb-t-14); font-weight: 500;
  transition: background var(--sb-mov), color var(--sb-mov);
}
.sb-nav-item:hover { background: var(--sb-lateral-ativo); color: var(--sb-lateral-tinta-ativa); }
.sb-nav-item[aria-current="page"] {
  background: var(--sb-lateral-ativo); color: var(--sb-lateral-tinta-ativa); font-weight: 600;
}
.sb-nav-item[aria-current="page"] svg { color: var(--sb-acento); }
.sb-nav-item svg { width: 17px; height: 17px; flex: 0 0 auto; stroke-width: 1.8; }
.sb-nav-etiq {
  margin-left: auto; font-size: var(--sb-t-11); font-weight: 700;
  padding: 1px 7px; border-radius: var(--sb-raio-pill);
  background: var(--sb-perigo); color: #fff;
}

.sb-lateral-pe {
  padding: var(--sb-e-3); border-top: 1px solid var(--sb-lateral-linha);
  display: flex; align-items: center; gap: 10px;
}
.sb-avatar {
  width: 30px; height: 30px; border-radius: var(--sb-raio-pill); flex: 0 0 auto;
  background: var(--sb-acento-fraco); color: var(--sb-acento-tinta);
  display: grid; place-items: center; font-size: var(--sb-t-12); font-weight: 700;
}
.sb-pe-txt { flex: 1; min-width: 0; }
.sb-pe-nome { font-size: var(--sb-t-13); font-weight: 600; color: var(--sb-lateral-tinta-ativa);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-pe-papel { font-size: var(--sb-t-11); color: var(--sb-lateral-tinta); }

.sb-icone-btn {
  width: 30px; height: 30px; border-radius: var(--sb-raio-p); flex: 0 0 auto;
  display: grid; place-items: center; color: var(--sb-tinta-2);
  transition: background var(--sb-mov), color var(--sb-mov);
}
.sb-icone-btn:hover { background: var(--sb-neutro-f); color: var(--sb-tinta); }
.sb-icone-btn svg { width: 17px; height: 17px; stroke-width: 1.8; }

/* ── Área principal ── */
.sb-principal { min-width: 0; display: flex; flex-direction: column; }

.sb-topo {
  height: var(--sb-topo-alt); padding: 0 var(--sb-e-6);
  /* 3 colunas (vazio · busca · empresa): a busca fica no centro exato do topo,
     sem depender da largura do chip de empresa à direita */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px) minmax(0, 1fr);
  align-items: center; gap: var(--sb-e-4);
  border-bottom: 1px solid var(--sb-linha); background: var(--sb-papel);
  position: sticky; top: 0; z-index: var(--sb-z-topo);
}
.sb-busca-global {
  grid-column: 2; width: 100%; min-width: 0;
  display: flex; align-items: center; gap: var(--sb-e-2);
  padding: 7px var(--sb-e-3); border: 1px solid var(--sb-linha);
  border-radius: var(--sb-raio); background: var(--sb-tela); color: var(--sb-tinta-3);
  transition: border-color var(--sb-mov), background var(--sb-mov);
}
.sb-busca-global:hover { border-color: var(--sb-linha-forte); background: var(--sb-papel); }
/* Desktop: centro da JANELA, não da área de conteúdo — o topo começa depois do
   menu lateral, então a busca recua metade da largura dele. */
@media (min-width: 861px) {
  .sb-busca-global { transform: translateX(calc(var(--sb-lateral-larg) / -2)); }
}
.sb-busca-global svg { width: 15px; height: 15px; stroke-width: 2; flex: 0 0 auto; }
.sb-busca-global span { font-size: var(--sb-t-13); flex: 1; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
kbd {
  font: 600 var(--sb-t-11)/1 var(--sb-fonte);
  padding: 3px 6px; border-radius: 5px;
  background: var(--sb-neutro-f); border: 1px solid var(--sb-linha); color: var(--sb-tinta-3);
}
.sb-topo-dir { grid-column: 3; justify-self: end; min-width: 0; display: flex; align-items: center; gap: var(--sb-e-3); }

/* Empresa ativa no topo: chip discreto; com 2+ empresas, um <select> invisível cobre o chip. */
.sb-topo-empresa {
  position: relative; display: flex; align-items: center; gap: var(--sb-e-2);
  min-height: 34px; max-width: 240px; padding: 3px var(--sb-e-3) 3px 4px;
  border: 1px solid var(--sb-linha); border-radius: var(--sb-raio); background: var(--sb-papel);
}
.sb-topo-empresa-nome {
  font-size: var(--sb-t-13); font-weight: 600; color: var(--sb-tinta);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.sb-topo-empresa-seta { width: 14px; height: 14px; stroke-width: 2; flex: 0 0 auto; color: var(--sb-tinta-3); }
.sb-topo-empresa-troca { cursor: pointer; transition: border-color var(--sb-mov); }
.sb-topo-empresa-troca:hover { border-color: var(--sb-linha-forte); }
.sb-topo-empresa select {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; font-size: 16px;   /* 16px: o iOS não dá zoom ao focar */
}
.sb-topo-empresa:focus-within { outline: 2px solid var(--sb-acento); outline-offset: 2px; }

/* ── Conteúdo ── */
.sb-conteudo { padding: var(--sb-e-6); flex: 1; min-width: 0; }

.sb-cab {
  display: flex; align-items: flex-start; gap: var(--sb-e-4);
  margin-bottom: var(--sb-e-6); flex-wrap: wrap;
}
.sb-cab-txt { flex: 1; min-width: 240px; }
.sb-cab h1 { font-size: var(--sb-t-26); font-weight: 680; margin-bottom: 3px; }
.sb-cab p { color: var(--sb-tinta-2); font-size: var(--sb-t-14); }
/* flex-wrap: dois botões longos (ex.: Pagamentos) quebram de linha em vez de estourar a tela. */
.sb-cab-acoes { display: flex; gap: var(--sb-e-2); align-items: center; flex-wrap: wrap; max-width: 100%; }

/* Cabeçalho de seção fora do painel: título + contagem + ação à direita. */
.sb-secao-cab {
  display: flex; align-items: center; gap: var(--sb-e-3);
  margin-top: var(--sb-e-6); margin-bottom: var(--sb-e-4);
}
.sb-secao-cab h2 { font-size: var(--sb-t-16); font-weight: 650; }
.sb-secao-cab-dir { margin-left: auto; }

.sb-painel {
  background: var(--sb-papel); border: 1px solid var(--sb-linha);
  border-radius: var(--sb-raio-g); box-shadow: var(--sb-sombra); overflow: hidden;
}
.sb-painel-cab {
  padding: var(--sb-e-4) var(--sb-e-5); border-bottom: 1px solid var(--sb-linha);
  display: flex; align-items: center; gap: var(--sb-e-3);
}
.sb-painel-cab h2 { font-size: var(--sb-t-16); font-weight: 650; }
.sb-painel-corpo { padding: var(--sb-e-5); }

/* ─────────────────────────────── 4. BOTÕES ─────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--sb-raio-p);
  font-size: var(--sb-t-14); font-weight: 550; white-space: nowrap;
  border: 1px solid transparent; transition: background var(--sb-mov), border-color var(--sb-mov);
  text-decoration: none;   /* <a class="btn"> é botão, não link sublinhado */
}
.btn svg { width: 16px; height: 16px; stroke-width: 2; flex: 0 0 auto; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-primario { background: var(--sb-acento); color: #fff; box-shadow: var(--sb-sombra); }
.btn-primario:hover:not(:disabled) { background: var(--sb-acento-forte); }

.btn-secundario { background: var(--sb-papel); border-color: var(--sb-linha-forte); color: var(--sb-tinta); }
.btn-secundario:hover:not(:disabled) { background: var(--sb-neutro-f); }

.btn-fantasma { color: var(--sb-tinta-2); }
.btn-fantasma:hover:not(:disabled) { background: var(--sb-neutro-f); color: var(--sb-tinta); }

.btn-perigo { background: var(--sb-perigo); color: #fff; }
.btn-perigo:hover:not(:disabled) { filter: brightness(.92); }

.btn-p { padding: 5px 10px; font-size: var(--sb-t-13); }

/* Botão ocupado: mostra que está trabalhando e bloqueia o duplo clique.
   Emissão duplicada de boleto é dinheiro real — a trava é obrigatória. */
.btn[data-ocupado="1"] { pointer-events: none; opacity: .8; }
.btn[data-ocupado="1"]::before {
  content: ""; width: 13px; height: 13px; flex: 0 0 auto;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: var(--sb-raio-pill); animation: sb-gira .6s linear infinite;
}
@keyframes sb-gira { to { transform: rotate(360deg); } }

/* ───────────────────────────── 5. FORMULÁRIOS ──────────────────────────── */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sb-e-4); }
.form-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.form-campo-largo { grid-column: 1 / -1; }

.form-campo label { font-size: var(--sb-t-13); font-weight: 600; display: flex; align-items: center; gap: 4px; }
.form-campo label .req { color: var(--sb-perigo); }

.form-campo input,
.form-campo select,
.form-campo textarea {
  padding: 9px 12px; border: 1px solid var(--sb-linha-forte);
  border-radius: var(--sb-raio-p); background: var(--sb-papel);
  font-size: var(--sb-t-14); width: 100%;
  transition: border-color var(--sb-mov), box-shadow var(--sb-mov);
}
/* Caixa de texto só cresce para baixo, dentro da coluna, com teto — arrastar a alça não quebra o layout. */
.form-campo textarea {
  resize: vertical; max-width: 100%; min-height: 72px; max-height: 320px;
}
.form-campo input:focus,
.form-campo select:focus,
.form-campo textarea:focus {
  outline: none; border-color: var(--sb-acento);
  box-shadow: 0 0 0 3px var(--sb-acento-fraco);
}
.form-campo input:disabled, .form-campo select:disabled { background: var(--sb-neutro-f); color: var(--sb-tinta-3); }

/* Caixa de marcação e rádio — padrão único: cor do sistema, sem a margem nativa
   (o espaço vem do gap do contêiner) e sem herdar o visual de campo de texto
   quando estão dentro de um .form-campo. */
input[type="checkbox"], input[type="radio"] {
  width: 16px; height: 16px; margin: 0; flex: 0 0 auto;
  accent-color: var(--sb-acento); cursor: pointer;
}
.form-campo input[type="checkbox"], .form-campo input[type="radio"],
.form-campo input[type="checkbox"]:focus, .form-campo input[type="radio"]:focus {
  width: 16px; padding: 0; border: 0; box-shadow: none;
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: 2px solid var(--sb-acento); outline-offset: 2px;
}

/* Anexo (input de arquivo) — padrão único: caixa tracejada + botão no estilo
   .btn-secundario, no lugar do botão cinza nativo do navegador. */
input[type="file"] {
  width: 100%; padding: 10px 12px;
  border: 1px dashed var(--sb-linha-forte); border-radius: var(--sb-raio-p);
  background: var(--sb-tela); color: var(--sb-tinta-3);
  font: inherit; font-size: var(--sb-t-13); cursor: pointer;
  transition: border-color var(--sb-mov), background var(--sb-mov);
}
input[type="file"]:hover { border-color: var(--sb-acento); background: var(--sb-papel); }
.form-campo input[type="file"]:focus,
input[type="file"]:focus-visible {
  outline: none; border-color: var(--sb-acento); box-shadow: 0 0 0 3px var(--sb-acento-fraco);
}
input[type="file"]::file-selector-button {
  margin-right: var(--sb-e-3); padding: 7px 14px;
  border: 1px solid var(--sb-linha-forte); border-radius: var(--sb-raio-p);
  background: var(--sb-papel); color: var(--sb-tinta);
  font: inherit; font-size: var(--sb-t-13); font-weight: 550; cursor: pointer;
  transition: background var(--sb-mov);
}
input[type="file"]::file-selector-button:hover { background: var(--sb-neutro-f); }
.form-campo input[type="file"] { border-style: dashed; padding: 10px 12px; }

.form-dica { font-size: var(--sb-t-12); color: var(--sb-tinta-3); }

/* Ajuda de campo: "?" ao lado do rótulo + balão explicativo. O balão vive no
   <body> (portal) e por isso NUNCA é recortado por painel/modal com overflow —
   antes o balão aparecia atrás do modal. Ver sbDicaMostrar() em app.js. */
.sb-ajuda {
  display: inline-grid; place-items: center; width: 16px; height: 16px; flex: 0 0 auto;
  border-radius: var(--sb-raio-pill); border: 1px solid var(--sb-linha-forte);
  background: var(--sb-neutro-f); color: var(--sb-tinta-3);
  font-size: 10px; font-weight: 800; line-height: 1; cursor: help; vertical-align: middle;
  transition: color var(--sb-mov), border-color var(--sb-mov);
}
.sb-ajuda:hover { color: var(--sb-tinta); border-color: var(--sb-tinta-3); }
.sb-dica-balao {
  position: fixed; z-index: var(--sb-z-dica); max-width: 280px;
  padding: var(--sb-e-3); background: var(--sb-tinta); color: var(--sb-papel);
  border-radius: var(--sb-raio); font-size: var(--sb-t-12); font-weight: 500; line-height: 1.45;
  box-shadow: var(--sb-sombra-g); pointer-events: none;
}
.sb-dica-balao[hidden] { display: none; }

/* Erro no campo, não num aviso que some. */
.form-campo[data-erro] input,
.form-campo[data-erro] select,
.form-campo[data-erro] textarea {
  border-color: var(--sb-perigo); box-shadow: 0 0 0 3px var(--sb-perigo-f);
}
.form-erro {
  font-size: var(--sb-t-12); color: var(--sb-perigo); font-weight: 550;
  display: flex; align-items: center; gap: 4px;
}

/* Barra de filtros: uma busca só + fichas do que está ligado. */
.sb-filtros { display: flex; align-items: center; gap: var(--sb-e-2); margin-bottom: var(--sb-e-4); flex-wrap: wrap; }
.sb-campo-busca { flex: 1; min-width: 220px; max-width: 380px; position: relative; display: flex; align-items: center; }
.sb-campo-busca svg { position: absolute; left: 11px; width: 15px; height: 15px; color: var(--sb-tinta-3); stroke-width: 2; }
.sb-campo-busca input {
  width: 100%; padding: 8px 12px 8px 34px;
  border: 1px solid var(--sb-linha-forte); border-radius: var(--sb-raio-p);
  background: var(--sb-papel); font-size: var(--sb-t-14);
  transition: border-color var(--sb-mov), box-shadow var(--sb-mov);
}
.sb-campo-busca input:focus { outline: none; border-color: var(--sb-acento); box-shadow: 0 0 0 3px var(--sb-acento-fraco); }

/* Seletor com busca (sbSeletorBusca, PRD-3004). Gatilho = regra de .form-campo select (:431-448);
   opções = .sb-cli-cartao (:1382-1392); destaque = linha selecionada da Configuração (:1545-1548). */
.sb-seletor {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sb-e-2); width: 100%;
  padding: 9px 12px; border: 1px solid var(--sb-linha-forte); border-radius: var(--sb-raio-p);
  background: var(--sb-papel); font-size: var(--sb-t-14); color: var(--sb-tinta); text-align: left;
  transition: border-color var(--sb-mov), box-shadow var(--sb-mov);
}
.sb-seletor:focus-visible, .sb-seletor[aria-expanded="true"] {
  outline: none; border-color: var(--sb-acento); box-shadow: 0 0 0 3px var(--sb-acento-fraco);
}
.sb-seletor:disabled { background: var(--sb-neutro-f); color: var(--sb-tinta-3); cursor: not-allowed; }
.sb-seletor-ph { color: var(--sb-tinta-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-seletor > svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--sb-tinta-3); stroke-width: 2; }
.sb-seletor-painel {
  margin-top: var(--sb-e-2); padding: var(--sb-e-3);
  border: 1px solid var(--sb-linha-forte); border-radius: var(--sb-raio); background: var(--sb-papel);
}
.sb-seletor-painel .sb-campo-busca { max-width: none; margin-bottom: var(--sb-e-3); }
.sb-seletor-lista {
  list-style: none; display: flex; flex-direction: column; gap: var(--sb-e-2);
  max-height: min(380px, 60vh); overflow-y: auto;
}
.sb-seletor-opcao { cursor: pointer; }
.sb-seletor-opcao.sb-cli-cartao + .sb-seletor-opcao.sb-cli-cartao { margin-top: 0; }  /* o gap da lista manda */
.sb-seletor-opcao:hover, .sb-seletor-opcao.sb-ativa { background: var(--sb-neutro-f); border-color: var(--sb-tinta-3); }
.sb-seletor-opcao-destaque,
.sb-seletor-opcao-destaque:hover { background: var(--sb-acento-fraco); border-color: var(--sb-acento); box-shadow: inset 3px 0 0 var(--sb-acento); }
/* Opção padrão com o foco do teclado: contorno em --sb-acento (o anel em --sb-acento-fraco dava ~1,1:1 — gate de UX c1/🟠2). */
.sb-seletor-opcao-destaque.sb-ativa { background: var(--sb-acento-fraco); border-color: var(--sb-acento);
  box-shadow: inset 3px 0 0 var(--sb-acento), 0 0 0 2px var(--sb-acento); }
/* Texto de apoio dentro de opção e cartão é SEMPRE --sb-tinta-2: o --sb-tinta-3 reprova no escuro
   (4,24:1 sobre acento-fraco; 3,91:1 sobre ok-f). */
.sb-seletor-em-uso { font-size: var(--sb-t-12); font-weight: 500; color: var(--sb-tinta-2); }
@media (max-width: 860px) { .sb-seletor, .sb-seletor-opcao { min-height: var(--sb-toque); } }

.sb-ficha {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: var(--sb-raio-pill);
  border: 1px solid var(--sb-linha-forte); background: var(--sb-papel);
  font-size: var(--sb-t-13); font-weight: 550; color: var(--sb-tinta-2);
  transition: background var(--sb-mov), border-color var(--sb-mov), color var(--sb-mov);
}
.sb-ficha:hover { border-color: var(--sb-tinta-3); color: var(--sb-tinta); }
.sb-ficha[aria-pressed="true"] {
  background: var(--sb-acento-fraco); border-color: var(--sb-acento); color: var(--sb-acento-tinta);
}
.sb-ficha-cont {
  font-size: var(--sb-t-11); font-weight: 700; padding: 0 5px;
  border-radius: var(--sb-raio-pill); background: var(--sb-neutro-f); color: var(--sb-tinta-3);
}
.sb-ficha[aria-pressed="true"] .sb-ficha-cont { background: var(--sb-acento); color: #fff; }
/* PRD-3001: etiqueta que sai com clique (botão nativo, sem aria-pressed). */
.sb-ficha-removivel { background: var(--sb-acento-fraco); border-color: var(--sb-acento); color: var(--sb-acento-tinta); cursor: pointer; }
/* PRD-3001: ícone "veio da API" (nuvem) no lugar do selo escrito; o texto vai no balão (data-dica) e no aria-label. */
.sb-origem-api { display: inline-flex; align-items: center; color: var(--sb-info); cursor: help; vertical-align: middle; border-radius: var(--sb-raio-pill); }
.sb-origem-api:focus-visible { outline: 2px solid var(--sb-acento); outline-offset: 2px; }
.sb-ico-api { width: 30px; height: 32px; flex: 0 0 auto; }
.sb-ficha .sb-ico-api { width: 20px; height: 21px; margin-right: 4px; vertical-align: -4px; color: var(--sb-info); }
/* PRD-3001: valor que veio da API e está travado. No escuro o padrão (--sb-tinta-3) dava 4,36:1. */
.form-campo[data-origem="API"] input[readonly] { color: var(--sb-tinta-2); background: var(--sb-neutro-f); cursor: default; }
.sb-filtros-dir { margin-left: auto; display: flex; gap: var(--sb-e-2); }

/* ────────────────────────────── 6. TABELA ──────────────────────────────── */
.sb-tabela-wrap {
  background: var(--sb-papel); border: 1px solid var(--sb-linha);
  border-radius: var(--sb-raio-g); box-shadow: var(--sb-sombra);
  /* overflow-x auto (não hidden): tabela mais larga que o painel ROLA de lado
     dentro dele — nunca corta coluna em silêncio nem empurra a página. */
  overflow-x: auto; overflow-y: hidden;
}
.sb-tabela { width: 100%; border-collapse: collapse; }

.sb-tabela th {
  padding: 10px var(--sb-e-4); text-align: left;
  font-size: var(--sb-t-12); font-weight: 600; color: var(--sb-tinta-2);
  background: var(--sb-tela); border-bottom: 1px solid var(--sb-linha); white-space: nowrap;
}
/* Coluna numérica: o título acompanha o valor (à direita). Sem isto a regra de
   cima vencia o .sb-num e o título ficava à esquerda, longe do número. */
.sb-tabela th.sb-num { text-align: right; }
.sb-tabela td {
  padding: 0 var(--sb-e-4); height: var(--sb-linha-alt);
  border-bottom: 1px solid var(--sb-linha);
  font-size: var(--sb-t-14); vertical-align: middle;
}
.sb-tabela tbody tr { transition: background var(--sb-mov); }
.sb-tabela tbody tr:hover { background: var(--sb-neutro-f); }
.sb-tabela tbody tr:last-child td { border-bottom: 0; }
.sb-tabela-clicavel tbody tr { cursor: pointer; }

.sb-th-ordenavel { cursor: pointer; user-select: none; }
.sb-th-ordenavel::after { content: '\2195'; opacity: .3; margin-left: 4px; }
.sb-th-ordenado-asc::after  { content: '\2191'; opacity: 1; color: var(--sb-acento); }
.sb-th-ordenado-desc::after { content: '\2193'; opacity: 1; color: var(--sb-acento); }

.sb-tabela-rodape {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--sb-e-3); padding: var(--sb-e-3) var(--sb-e-4);
  border-top: 1px solid var(--sb-linha); background: var(--sb-tela);
  font-size: var(--sb-t-13); color: var(--sb-tinta-2);
}
.sb-tabela-info { color: var(--sb-tinta-2); font-size: var(--sb-t-13); }
.sb-tabela-controles { display: flex; align-items: center; gap: var(--sb-e-2); }
.sb-tabela-controles button {
  padding: 6px 12px; border: 1px solid var(--sb-linha-forte);
  background: var(--sb-papel); border-radius: var(--sb-raio-p);
  font-size: var(--sb-t-13); font-weight: 550;
  transition: background var(--sb-mov);
}
.sb-tabela-controles button:hover:not(:disabled) { background: var(--sb-neutro-f); }
.sb-tabela-controles button:disabled { opacity: .45; cursor: not-allowed; }
.sb-tabela-controles select {
  padding: 6px 8px; border: 1px solid var(--sb-linha-forte);
  border-radius: var(--sb-raio-p); background: var(--sb-papel); font-size: var(--sb-t-13);
}

/* Ações da linha sempre visíveis (pedido do dono, 07/11/2026): escondidas até o mouse
   passar, pareciam faltar. Cinza discreto; o botão sob o mouse ganha destaque. */
.sb-acoes-linha { display: flex; gap: 2px; justify-content: flex-end; }
.sb-acao {
  width: 28px; height: 28px; border-radius: var(--sb-raio-p);
  display: grid; place-items: center; color: var(--sb-tinta-3);
  transition: background var(--sb-mov), color var(--sb-mov);
}
.sb-acao:hover { background: var(--sb-papel); color: var(--sb-acento); box-shadow: var(--sb-sombra); }
.sb-acao svg { width: 15px; height: 15px; stroke-width: 1.9; }

/* Célula com duas linhas: título forte + apoio fraco. */
.sb-cel-dupla { display: flex; flex-direction: column; gap: 1px; }
.sb-cel-dupla b { font-weight: 600; font-size: var(--sb-t-14); }
.sb-cel-dupla span { font-size: var(--sb-t-12); color: var(--sb-tinta-3); }

/* Cartões: só existem no celular. A tabela some, o cartão entra.
   Preenchidos por tabela() em app.js a partir das mesmas colunas. */
.sb-cartoes { display: none; }
.sb-cartao-linha {
  display: flex; flex-direction: column; gap: var(--sb-e-2);
  padding: var(--sb-e-4); border-bottom: 1px solid var(--sb-linha);
}
.sb-cartao-linha:last-child { border-bottom: 0; }
.sb-cartao-l { display: flex; align-items: center; justify-content: space-between; gap: var(--sb-e-3); }
.sb-cartao-tit { font-weight: 650; font-size: var(--sb-t-14); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-cartao-val { font-size: var(--sb-t-16); font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.sb-cartao-meta { font-size: var(--sb-t-12); color: var(--sb-tinta-3); }

/* ─────────────────────── 7. SELOS DE SITUAÇÃO ──────────────────────────── */
/* Cor + FORMA + texto. Quem não distingue cor continua entendendo. */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--sb-raio-pill);
  font-size: var(--sb-t-12); font-weight: 600; white-space: nowrap;
  background: var(--sb-neutro-f); color: var(--sb-tinta-2);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: var(--sb-raio-pill);
  background: currentColor; flex: 0 0 auto; }

.badge-rascunho          { background: var(--sb-neutro-f); color: var(--sb-tinta-selo); }
.badge-rascunho::before  { border-radius: 2px; }                       /* quadrado */
.badge-pendente-registro { background: var(--sb-alerta-f); color: var(--sb-alerta); }
.badge-em-aberto         { background: var(--sb-info-f); color: var(--sb-info); }
.badge-vencida           { background: var(--sb-perigo-f); color: var(--sb-perigo); }
.badge-vencida::before   { border-radius: 1px; transform: rotate(45deg); }  /* losango */
.badge-liquidada,
.badge-paga-parcialmente,
.badge-pagamento-recebido{ background: var(--sb-ok-f); color: var(--sb-ok); }
.badge-baixada           { background: var(--sb-neutro-f); color: var(--sb-tinta-2); }
.badge-cancelada,
.badge-rejeitada,
.badge-expirada          { background: var(--sb-perigo-f); color: var(--sb-perigo); }
.badge-substituida       { background: var(--sb-neutro-f); color: var(--sb-tinta-selo); }
.badge-em-protesto       { background: var(--sb-perigo-f); color: var(--sb-perigo); }
.badge-pausada           { background: var(--sb-alerta-f); color: var(--sb-alerta); }
.badge-ativo, .badge-ativa { background: var(--sb-ok-f); color: var(--sb-ok); }
.badge-inativo, .badge-inativa { background: var(--sb-neutro-f); color: var(--sb-tinta-selo); }
.badge-inativo::before, .badge-inativa::before { border-radius: 2px; }

/* Selos SEMÂNTICOS genéricos (OPB1/EMIS1): estado bancário na coluna "Banco",
   chaves do modo de emissão e afins — quando a cor carrega o significado
   direto (ok/aviso/perigo/informativo), não uma situação específica. */
.badge-ok     { background: var(--sb-ok-f);     color: var(--sb-ok); }
.badge-info   { background: var(--sb-info-f);   color: var(--sb-info); }
.badge-alerta { background: var(--sb-alerta-f); color: var(--sb-alerta); }
.badge-perigo { background: var(--sb-perigo-f); color: var(--sb-perigo); }

/* Chips da dimensão bancária na lista de Cobranças (OPB1/C). */
.sb-chips-banco { display: flex; gap: var(--sb-e-2); flex-wrap: wrap; margin: 0 0 var(--sb-e-3); }
.sb-chip-banco {
  padding: 4px 12px; min-height: 28px; border-radius: var(--sb-raio-pill);
  border: 1px solid var(--sb-linha-forte); background: var(--sb-papel);
  color: var(--sb-tinta-2); font-size: var(--sb-t-12); font-weight: 600; cursor: pointer;
}
.sb-chip-banco[aria-pressed="true"] { background: var(--sb-acento); border-color: var(--sb-acento); color: #fff; }

/* Situação do CLIENTE (cadastro). O selo é montado como 'badge-' + situação em
   clientes.js E em cobranca-nova.js — precisa viver aqui, ou o pagador bloqueado
   aparece cinza na tela de emissão. */
.badge-bloqueado           { background: var(--sb-perigo-f); color: var(--sb-perigo); }
.badge-bloqueado::before   { border-radius: 1px; transform: rotate(45deg); }   /* losango */
.badge-em-revisao          { background: var(--sb-alerta-f); color: var(--sb-alerta); }
.badge-anonimizado         { background: var(--sb-neutro-f); color: var(--sb-tinta-3); }
.badge-anonimizado::before { border-radius: 2px; }                             /* quadrado */

/* Situação da CONTA/CARTEIRA e do acesso ao banco (configuração). */
.badge-aguardando-aprovacao { background: var(--sb-alerta-f);   color: var(--sb-alerta); }
.badge-aprovada             { background: var(--sb-info-f);     color: var(--sb-info); }
.badge-padrao               { background: var(--sb-acento-fraco); color: var(--sb-acento-tinta); }
.badge-acesso-ok            { background: var(--sb-ok-f);       color: var(--sb-ok); }
.badge-sem-acesso           { background: var(--sb-perigo-f);   color: var(--sb-perigo); }
.badge-sem-acesso::before   { border-radius: 1px; transform: rotate(45deg); }  /* losango */

/* Situação de RÉGUA e TEMPLATE (comunicação — PRD-0007 COM1, ciclo
   RASCUNHO→EM_REVISAO→(APROVADO só template)→PUBLICADA(O)→SUBSTITUIDA(O)/ARQUIVADA).
   badge-rascunho (linha 561) já cobre RASCUNHO; badge-substituida e badge-em-revisao
   (acima) já existem com a semântica certa e são reaproveitadas aqui — não duplicar. */
.badge-publicada, .badge-publicado { background: var(--sb-ok-f); color: var(--sb-ok); }
.badge-aprovado             { background: var(--sb-info-f);   color: var(--sb-info); }
.badge-arquivada            { background: var(--sb-neutro-f); color: var(--sb-tinta-selo); }
.badge-arquivada::before    { border-radius: 2px; }                            /* quadrado — mesma leitura de inativo */
.badge-substituido          { background: var(--sb-neutro-f); color: var(--sb-tinta-selo); }

/* Selo de AMBIENTE (SANDBOX × PRODUÇÃO). Sandbox jamais se parece com produção:
   listrado = "dinheiro de teste". Usado na tabela de configuração (Modelo B). */
.sb-ambiente {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px var(--sb-e-2); border-radius: var(--sb-raio-p);
  font-size: var(--sb-t-11); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: var(--sb-neutro-f); color: var(--sb-tinta-2);
}
.sb-ambiente-sandbox {
  background: repeating-linear-gradient(135deg, var(--sb-alerta-f) 0 6px, transparent 6px 12px);
  color: var(--sb-alerta); box-shadow: inset 0 0 0 1px currentColor;
}
.sb-ambiente-sandbox::before { content: "\26A0"; }
.sb-ambiente-producao { background: var(--sb-ok-f); color: var(--sb-ok); box-shadow: inset 0 0 0 1px currentColor; }
.sb-ambiente-producao::before { content: "\25CF"; }

/* Vencimento com carga semântica. */
.sb-venc-tarde { color: var(--sb-perigo); font-weight: 600; }
.sb-venc-hoje  { color: var(--sb-alerta); font-weight: 600; }
/* PRD-0014: "N d em atraso" sob a data, na lista. Herda a cor de .sb-venc-tarde. */
.sb-venc-atraso { display: block; font-size: var(--sb-t-12); white-space: nowrap; }

/* ───────────────── 8. DIÁLOGO, GAVETA, AVISO ───────────────────────────── */
.sb-modal-overlay {
  position: fixed; inset: 0; z-index: var(--sb-z-dialogo);
  background: rgba(15, 23, 41, .5); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: var(--sb-e-5);
  animation: sb-surge 160ms ease;
}
@keyframes sb-surge { from { opacity: 0; } }

.sb-modal {
  background: var(--sb-papel); border: 1px solid var(--sb-linha);
  border-radius: var(--sb-raio-g); box-shadow: var(--sb-sombra-g);
  max-width: 560px; width: 100%; max-height: 88vh;
  display: flex; flex-direction: column;
  animation: sb-sobe 220ms cubic-bezier(.32, .72, 0, 1);
}
@keyframes sb-sobe { from { opacity: 0; transform: translateY(10px) scale(.98); } }

/* Formulário de cadastro (cliente): mais largo, para a letra maior não apertar os campos lado a lado. */
.sb-modal.sb-modal-larga { max-width: 760px; }
@media (min-width: 720px) {
  /* 2 colunas, como antes (a janela larga abriria 3 e deixaria um buraco); no celular segue 1 coluna. */
  .sb-modal.sb-modal-larga .form-grid:not(.sb-cli-fone-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sb-modal-cabecalho {
  padding: var(--sb-e-4) var(--sb-e-5); border-bottom: 1px solid var(--sb-linha);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sb-e-3);
}
.sb-modal-cabecalho h2 { font-size: var(--sb-t-16); font-weight: 650; min-width: 0; overflow-wrap: anywhere; }
.sb-modal-fechar {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: var(--sb-raio-p);   /* não encolhe com título longo */
  display: grid; place-items: center;
  font-size: var(--sb-t-20); line-height: 1; color: var(--sb-tinta-3);
  transition: background var(--sb-mov), color var(--sb-mov);
}
.sb-modal-fechar:hover { background: var(--sb-neutro-f); color: var(--sb-tinta); }
.sb-modal-corpo { padding: var(--sb-e-5); overflow-y: auto; }
.sb-modal-rodape {
  padding: var(--sb-e-4) var(--sb-e-5); border-top: 1px solid var(--sb-linha);
  background: var(--sb-tela);
  /* acompanha a curva do .sb-modal (raio menos a borda de 1px); sem isso o fundo
     cinza sai com canto reto por cima da borda arredondada */
  border-radius: 0 0 calc(var(--sb-raio-g) - 1px) calc(var(--sb-raio-g) - 1px);
  display: flex; justify-content: flex-end; gap: var(--sb-e-2); flex-wrap: wrap;
}
/* Celular estreito: três botões (Voltar · Recusar · Confirmar) não cabem numa linha.
   Cada botão cresce e quebra de linha, sem vazar do diálogo. */
@media (max-width: 480px) {
  .sb-modal-rodape .btn { flex: 1 1 auto; white-space: normal; }
  .sb-cab-acoes { width: 100%; }
  .sb-cab-acoes:empty { display: none; }   /* sem ação, não abre uma linha vazia no cabeçalho */
  .sb-cab-acoes > .btn { flex: 1 1 auto; white-space: normal; }
}

/* Gaveta lateral — detalhe sem trocar de página. */
.sb-gaveta-fundo {
  position: fixed; inset: 0; z-index: var(--sb-z-fundo);
  background: rgba(15, 23, 41, .45); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity 200ms;
}
.sb-gaveta-fundo.sb-on { opacity: 1; pointer-events: auto; }
.sb-gaveta {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--sb-z-gaveta);
  width: min(620px, 100vw); background: var(--sb-papel);
  border-left: 1px solid var(--sb-linha); box-shadow: var(--sb-sombra-g);
  transform: translateX(100%); transition: transform var(--sb-mov-g);
  display: flex; flex-direction: column;
}
.sb-gaveta.sb-on { transform: translateX(0); }
.sb-gaveta-cab { padding: var(--sb-e-5); border-bottom: 1px solid var(--sb-linha);
  display: flex; align-items: flex-start; gap: var(--sb-e-3); }
.sb-gaveta-cab h2 { font-size: var(--sb-t-20); font-weight: 680; margin-bottom: 6px; }
.sb-gaveta-corpo { padding: var(--sb-e-5); overflow-y: auto; flex: 1; }
.sb-gaveta-pe { padding: var(--sb-e-4) var(--sb-e-5); border-top: 1px solid var(--sb-linha);
  background: var(--sb-tela); display: flex; gap: var(--sb-e-2); }

/* PRD-3001 (D6/RF-07): gaveta mais larga e com letra maior em todo o sistema.
   As fontes são rem e o texto solto herda do body: só trocar a largura não muda nada,
   por isso a escala de tipografia é redefinida dentro da gaveta. */
.sb-gaveta {
  --sb-t-11: .9844rem;  --sb-t-12: 1.0625rem; --sb-t-13: 1.2031rem;
  --sb-t-14: 1.2813rem; --sb-t-15: 1.125rem;  --sb-t-16: 1.275rem; --sb-t-20: 1.625rem;
  font-size: var(--sb-t-14);
}
.sb-gaveta .badge { font-size: var(--sb-t-15); }
.sb-gaveta-pe { flex-wrap: wrap; }
@media (max-width: 480px) { .sb-gaveta-pe .btn { flex: 1 1 auto; white-space: normal; } }

/* Lista de definição — o jeito canônico de mostrar "campo: valor". */
/* minmax(0,1fr) + overflow-wrap: e-mail/identificador longo (sem espaço)
   quebra linha dentro da coluna em vez de ser cortado pelo painel. */
.sb-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px var(--sb-e-4); font-size: var(--sb-t-13); }
.sb-dl dt { color: var(--sb-tinta-3); font-weight: 550; }
.sb-dl dd { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.sb-dl dd .sb-nota { display: block; margin-top: var(--sb-e-1); }   /* sub-linha do valor */
/* PRD-3004-c: painel "Dados do boleto" (detalhe da cobrança). Valor, selo e nota ficam cada um na sua linha, em qualquer
   largura; o valor de texto longo respeita as quebras de linha. Até 600 px rótulo e valor empilham (nenhum selo fica cortado). */
.sb-dl-boleto dd .sb-boleto-valor { display: block; white-space: pre-line; overflow-wrap: anywhere; }
.sb-dl-boleto dd .sb-boleto-selo { display: block; margin-top: var(--sb-e-1); }
.sb-dl-boleto dd .sb-boleto-selo .badge { max-width: 100%; white-space: normal; }
.sb-dl-boleto dd .sb-nota { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .sb-dl-boleto { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .sb-dl-boleto dd { text-align: left; margin-bottom: var(--sb-e-3); }
  .sb-dl-boleto dd:last-child { margin-bottom: 0; }
}
.sb-divisor { height: 1px; background: var(--sb-linha); margin: var(--sb-e-5) 0; }
.sb-h-tit {
  font-size: var(--sb-t-12); font-weight: 600; color: var(--sb-tinta-3);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: var(--sb-e-3);
}

/* Trilha do que aconteceu com o título. */
.sb-trilha { position: relative; padding-left: 22px; }
.sb-trilha::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px;
  width: 2px; background: var(--sb-linha); }
.sb-trilha-item { position: relative; padding-bottom: var(--sb-e-4); }
.sb-trilha-item::before {
  content: ""; position: absolute; left: -21px; top: 5px;
  width: 8px; height: 8px; border-radius: var(--sb-raio-pill);
  background: var(--sb-linha-forte); border: 2px solid var(--sb-papel);
}
.sb-trilha-item.sb-ok::before { background: var(--sb-ok); }

/* Vereditos da simulação de comunicação (comunicação — PRD-0007 COM1, DEC-COM-002).
   O texto do veredito já vem num .badge próprio na entrada da trilha (ELEGIVEL etc.
   reaproveitam .badge-ok/.badge-info/.badge-alerta, seção 7) — aqui só a cor do
   marcador da linha do tempo acompanha a mesma leitura semântica. */
.sb-trilha-item.sb-elegivel::before { background: var(--sb-ok); }
.sb-trilha-item.sb-reservado::before,
.sb-trilha-item.sb-fora-vigencia::before { background: var(--sb-info); }
.sb-trilha-item.sb-sem-template::before,
.sb-trilha-item.sb-nao-publicado::before,
.sb-trilha-item.sb-bloqueada::before { background: var(--sb-alerta); }

.sb-trilha-t { font-size: var(--sb-t-13); font-weight: 600; }
.sb-trilha-d { font-size: var(--sb-t-12); color: var(--sb-tinta-3); }

/* Avisos (toast). */
#sb-toast-container {
  position: fixed; bottom: var(--sb-e-5); right: var(--sb-e-5); z-index: var(--sb-z-aviso);
  display: flex; flex-direction: column; gap: var(--sb-e-2);
}
.sb-toast {
  display: flex; align-items: center; gap: var(--sb-e-3);
  min-width: 280px; max-width: 380px;
  padding: 12px var(--sb-e-4); background: var(--sb-papel);
  border: 1px solid var(--sb-linha); border-left: 3px solid var(--sb-tinta-3);
  border-radius: var(--sb-raio); box-shadow: var(--sb-sombra-g);
  font-size: var(--sb-t-13); color: var(--sb-tinta);
  opacity: 0; transform: translateX(16px);
  transition: opacity 200ms, transform 200ms cubic-bezier(.32, .72, 0, 1);
}
.sb-toast-show { opacity: 1; transform: translateX(0); }
.sb-toast-sucesso { border-left-color: var(--sb-ok); }
.sb-toast-erro    { border-left-color: var(--sb-perigo); }
.sb-toast-aviso   { border-left-color: var(--sb-alerta); }
.sb-toast-info    { border-left-color: var(--sb-info); }

/* ──────────── 9. ESTADO VAZIO, ESQUELETO DE CARGA, MENSAGENS ───────────── */
.sb-vazio { padding: var(--sb-e-7) var(--sb-e-5); text-align: center; }
.sb-vazio-arte {
  width: 60px; height: 60px; margin: 0 auto var(--sb-e-4);
  border-radius: var(--sb-raio-g); background: var(--sb-acento-fraco); color: var(--sb-acento);
  display: grid; place-items: center;
}
.sb-vazio-arte svg { width: 28px; height: 28px; stroke-width: 1.5; }
.sb-vazio h3 { font-size: var(--sb-t-16); font-weight: 650; margin-bottom: 5px; }
.sb-vazio p { color: var(--sb-tinta-2); max-width: 40ch; margin: 0 auto var(--sb-e-4); }

/* Esqueleto: a tela mostra a forma do que está chegando, não um vazio. */
.sb-esqueleto {
  border-radius: var(--sb-raio-p);
  background: linear-gradient(90deg, var(--sb-neutro-f) 25%, var(--sb-linha) 37%, var(--sb-neutro-f) 63%);
  background-size: 400% 100%;
  animation: sb-brilho 1.4s ease infinite;
}
@keyframes sb-brilho { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.sb-esqueleto-linha { height: 14px; margin: var(--sb-e-3) 0; }

.sb-mensagem-erro   { color: var(--sb-perigo); font-size: var(--sb-t-13); font-weight: 550; margin: var(--sb-e-1) 0; }
.sb-mensagem-sucesso{ color: var(--sb-ok); font-size: var(--sb-t-13); font-weight: 550; margin: var(--sb-e-1) 0; }

.sb-alerta {
  display: flex; align-items: flex-start; gap: var(--sb-e-3);
  padding: var(--sb-e-3) var(--sb-e-4); border-radius: var(--sb-raio);
  background: var(--sb-alerta-f); border: 1px solid var(--sb-alerta);
  color: var(--sb-tinta); font-size: var(--sb-t-13);
}
.sb-alerta-info   { background: var(--sb-info-f);   border-color: var(--sb-info); }
.sb-alerta-perigo { background: var(--sb-perigo-f); border-color: var(--sb-perigo); }
.sb-alerta-ok     { background: var(--sb-ok-f);     border-color: var(--sb-ok); }

/* ═══════ 10. BLOCO, ABAS, MÉTRICA, CAIXA DE MARCAÇÃO ══════════════════════
   Peças que nasceram soltas no <style> de uma tela e se repetiam em outras.
   Aqui elas têm uma definição só — cada tela escreve o nome canônico direto
   no innerHTML (DT-0008).
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Bloco: caixa com borda dentro de um painel ──────────────────────────────
   Endereço e contato no cadastro do cliente, cartão de credencial e bloco de
   regra financeira na configuração. Mesma caixa, um nome só. */
.sb-bloco {
  border: 1px solid var(--sb-linha);
  border-radius: var(--sb-raio);
  padding: var(--sb-e-4);
}
.sb-bloco h3 { font-size: var(--sb-t-14); font-weight: 650; }

/* Rodapé do bloco: a ação de remover fica à direita, longe do dedo distraído. */
.sb-bloco-pe { display: flex; justify-content: flex-end; margin-top: var(--sb-e-3); }

/* ── Abas ───────────────────────────────────────────────────────────────────
   Trocam o conteúdo do painel sem trocar de página. O JS controla
   aria-selected; o CSS só reage a ele — sem classe "ativa" paralela. */
.sb-abas {
  display: flex; gap: var(--sb-e-1); flex-wrap: wrap;
  border-bottom: 1px solid var(--sb-linha);
  margin-bottom: var(--sb-e-5);
}
.sb-aba {
  min-height: var(--sb-toque);
  padding: var(--sb-e-2) var(--sb-e-3);
  font-size: var(--sb-t-14); font-weight: 550; color: var(--sb-tinta-2);
  border-bottom: 2px solid transparent;
  border-radius: var(--sb-raio-p) var(--sb-raio-p) 0 0;
  transition: color var(--sb-mov), background var(--sb-mov), border-color var(--sb-mov);
}
.sb-aba:hover { color: var(--sb-tinta); background: var(--sb-neutro-f); }
.sb-aba[aria-selected="true"] {
  color: var(--sb-acento-tinta); border-bottom-color: var(--sb-acento); font-weight: 650;
}

/* ── Métrica ────────────────────────────────────────────────────────────────
   Rótulo (.sb-h-tit) + número grande + subtítulo, com uma barra de cor no topo.
   A cor REFORÇA a leitura; o rótulo e a contagem já dizem tudo sem ela. */
.sb-metricas {
  display: grid;
  /* mínimo 250px: abaixo disso o valor grande não cabe — em telas médias a
     faixa quebra para 2×2 em vez de espremer os cartões. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: var(--sb-e-4);
  margin-bottom: var(--sb-e-3);
}
.sb-metrica {
  background: var(--sb-papel);
  border: 1px solid var(--sb-linha);
  border-top: 3px solid var(--sb-linha-forte);
  border-radius: var(--sb-raio-g);
  box-shadow: var(--sb-sombra);
  padding: var(--sb-e-4) var(--sb-e-5) var(--sb-e-5);
}
.sb-metrica .sb-h-tit { margin-bottom: var(--sb-e-2); }

.sb-metrica-pre  { font-size: var(--sb-t-12); font-weight: 600; color: var(--sb-tinta-3); }
/* Fonte fluida: 32px só quando há espaço; encolhe junto com a janela. O
   overflow-wrap é a trava final: um valor extremo quebra linha dentro do
   cartão em vez de vazar por cima do cartão vizinho. */
.sb-metrica-val  { font-size: clamp(24px, 1.6vw + 9px, var(--sb-t-32)); font-weight: 700;
                    line-height: 1.15; letter-spacing: -.02em; color: var(--sb-tinta);
                    min-width: 0; overflow-wrap: anywhere; }
.sb-metrica-sub  { font-size: var(--sb-t-13); color: var(--sb-tinta-2); margin-top: var(--sb-e-1); }
.sb-metrica-nota { font-size: var(--sb-t-11); color: var(--sb-tinta-3); margin-top: var(--sb-e-2); }

.sb-metrica-perigo { border-top-color: var(--sb-perigo); }
.sb-metrica-alerta { border-top-color: var(--sb-alerta); }
.sb-metrica-info   { border-top-color: var(--sb-info); }
.sb-metrica-ok     { border-top-color: var(--sb-ok); }

.sb-metrica-perigo .sb-metrica-val { color: var(--sb-perigo); }
.sb-metrica-alerta .sb-metrica-val { color: var(--sb-alerta); }
.sb-metrica-ok     .sb-metrica-val { color: var(--sb-ok); }
/* "Em aberto" (info) fica com o número em tinta normal — é saldo, não é alarme. */

/* Nota da faixa: só aparece quando a soma é parcial. Quando não há o que dizer,
   some (hidden) e o espaçamento continua certo pela margem do bloco seguinte. */
.sb-metricas-nota { font-size: var(--sb-t-13); color: var(--sb-tinta-2); }

/* ── Valor em destaque ──────────────────────────────────────────────────────
   O número que manda na tela: total do detalhe, total do boleto a emitir. */
.sb-valor-forte {
  /* Mesma receita do .sb-metrica-val: fonte fluida + quebra de linha como
     trava — sem isso, "R$ 1.234.567,89" em 32px fixos perde dígitos no
     celular dentro do .sb-det-topo (overflow hidden). */
  font-size: clamp(24px, 1.6vw + 9px, var(--sb-t-32)); font-weight: 700;
  line-height: 1.1; letter-spacing: -.02em;
  margin-bottom: 2px;
  min-width: 0; overflow-wrap: anywhere;
}
.sb-valor-forte-vazio { color: var(--sb-tinta-3); }

/* ── Caixa de marcação em linha ─────────────────────────────────────────────
   Caixa + rótulo lado a lado. O rótulo é clicável (for=id), então o alvo de
   toque é a linha inteira, não os 16px do quadradinho. */
.sb-check-linha {
  display: flex; flex-direction: row; align-items: center; gap: var(--sb-e-2);
  min-height: 32px; font-size: var(--sb-t-14);
}
.sb-check-linha input { width: 16px; height: 16px; flex: 0 0 auto; margin: 0; accent-color: var(--sb-acento); }
.sb-check-linha label { font-weight: 500; }
/* Rádio/caixa DENTRO do rótulo (grupos role=radiogroup): o label vira flex para
   o controle ficar no meio da altura do texto, não na linha de base. */
.sb-check-linha label:has(> input) { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.sb-check-linha:has(> label > input) { flex-wrap: wrap; column-gap: var(--sb-e-4); }

/* Caixa/rádio ao lado de texto que pode quebrar em várias linhas (aceite de
   pendências): o controle acompanha a PRIMEIRA linha, não o meio do bloco. */
.sb-check-bloco { display: flex; gap: var(--sb-e-2); align-items: flex-start; cursor: pointer; }
.sb-check-bloco > input { margin-top: calc((1lh - 16px) / 2); }

/* ───────────────────────── LOGIN (fora do esqueleto) ───────────────────── */
.sb-login-pagina {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: var(--sb-e-5); background: var(--sb-tela);
}
.sb-login-caixa {
  width: 100%; max-width: 380px; padding: var(--sb-e-7) var(--sb-e-6);
  background: var(--sb-papel); border: 1px solid var(--sb-linha);
  border-radius: var(--sb-raio-g); box-shadow: var(--sb-sombra-g);
}
.sb-login-marca { display: flex; align-items: center; gap: 10px; margin-bottom: var(--sb-e-5); }
.sb-login-titulo { font-size: var(--sb-t-20); font-weight: 680; margin-bottom: 2px; }
.sb-login-subtitulo { color: var(--sb-tinta-2); font-size: var(--sb-t-13); margin-bottom: var(--sb-e-5); }
.sb-login-caixa form { display: flex; flex-direction: column; gap: var(--sb-e-4); }
.sb-login-botao { margin-top: var(--sb-e-2); width: 100%; min-height: var(--sb-toque); }

/* ──────────────────────────── CELULAR ──────────────────────────────────── */
.sb-so-mob { display: none; }

@media (max-width: 860px) {
  .sb-app { grid-template-columns: 1fr; }
  .sb-lateral { display: none; }
  .sb-so-mob { display: block; }

  .sb-topo { padding: 0 var(--sb-e-4); grid-template-columns: minmax(0, 1fr) auto; }
  /* O toque abre a paleta igual ao ⌘K, e o alvo precisa caber num dedo. */
  .sb-busca-global { grid-column: 1; min-height: var(--sb-toque); }
  .sb-topo-dir { grid-column: 2; }
  /* No celular a empresa vira só o selo com as iniciais (o nome fica no title/no select). */
  .sb-topo-empresa { padding: 4px; min-height: var(--sb-toque); min-width: var(--sb-toque); justify-content: center; }
  .sb-topo-empresa-nome, .sb-topo-empresa-seta { display: none; }
  .sb-conteudo { padding: var(--sb-e-4) var(--sb-e-4) 84px; }  /* espaço p/ a barra de baixo */

  /* A tabela sai de cena; os cartões entram. Nada de rolar de lado. */
  .sb-tabela { display: none; }
  .sb-cartoes { display: flex; flex-direction: column; }

  .sb-filtros-dir { margin-left: 0; width: 100%; }
  .sb-campo-busca { max-width: none; width: 100%; }
  .sb-gaveta { width: 100vw; }
  .form-grid { grid-template-columns: 1fr; }

  /* Alvo de toque: a linha inteira da caixa de marcação, a aba, o campo do login. */
  .sb-check-linha { min-height: var(--sb-toque); }
  .sb-aba { flex: 1; }
  .sb-login-caixa input, .sb-login-caixa select { min-height: var(--sb-toque); }

  /* Alvo de toque (WCAG 2.5.5, DT-0008): botão de ação de cabeçalho, rodapé de
     bloco/gaveta/modal, ficha de filtro e chip de banco — comuns a várias telas,
     por isso vivem aqui (e não repetidos no CSS de cada uma). */
  .sb-cab-acoes .btn, .sb-det-topo-perigo .btn, .sb-secao-cab-dir .btn, .sb-bloco-pe .btn, .sb-gaveta-pe .btn,
  .sb-modal-rodape .btn, .sb-ficha, .sb-chip-banco { min-height: var(--sb-toque); }

  .sb-barra-mob {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
    display: flex; background: var(--sb-papel); border-top: 1px solid var(--sb-linha);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .sb-barra-mob a {
    flex: 1; min-height: 52px;             /* alvo de toque confortável */
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--sb-tinta-3); text-decoration: none;
    font-size: var(--sb-t-11); font-weight: 550;
  }
  .sb-barra-mob a[aria-current="page"] { color: var(--sb-acento); }
  .sb-barra-mob svg { width: 20px; height: 20px; stroke-width: 1.9; }
}

/* ═══════════ 12. BUSCA GLOBAL (⌘K) — a paleta de comando ══════════════════
   Acima do diálogo (⌘K funciona com uma gaveta aberta atrás) e abaixo do
   aviso — um toast disparado pela paleta continua visível.
   ═════════════════════════════════════════════════════════════════════════ */
.sb-paleta-fundo {
  position: fixed; inset: 0; z-index: var(--sb-z-paleta);
  background: rgba(15, 23, 41, .5); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh var(--sb-e-5) var(--sb-e-5);
  opacity: 0; pointer-events: none; transition: opacity var(--sb-mov);
}
.sb-paleta-fundo.sb-on { opacity: 1; pointer-events: auto; }

.sb-paleta {
  width: 100%; max-width: 560px;
  display: flex; flex-direction: column;
  max-height: min(60vh, 520px);
  background: var(--sb-papel); border: 1px solid var(--sb-linha);
  border-radius: var(--sb-raio-g); box-shadow: var(--sb-sombra-g);
  overflow: hidden;
  transform: translateY(-8px) scale(.99); transition: transform var(--sb-mov);
}
.sb-paleta-fundo.sb-on .sb-paleta { transform: none; }

/* ── Campo ── */
.sb-paleta-cab {
  display: flex; align-items: center; gap: var(--sb-e-3);
  padding: var(--sb-e-3) var(--sb-e-4);
  border-bottom: 1px solid var(--sb-linha);
}
.sb-paleta-cab-ico { display: grid; place-items: center; color: var(--sb-tinta-3); flex: 0 0 auto; }
.sb-paleta-cab-ico svg { width: 17px; height: 17px; stroke-width: 2; }

.sb-paleta-campo {
  flex: 1; min-width: 0; min-height: var(--sb-toque);
  border: 0; background: none; outline: none;
  font-size: var(--sb-t-16); color: var(--sb-tinta);
}
.sb-paleta-campo::placeholder { color: var(--sb-tinta-3); }

/* ── Lista ── */
.sb-paleta-lista { overflow-y: auto; flex: 1; padding: var(--sb-e-2); }
.sb-paleta-lista:empty { display: none; }   /* sem termo: só o campo, sem faixa vazia */
.sb-paleta-cab:has(+ .sb-paleta-lista:empty) { border-bottom: 0; }   /* senão a linha encosta na borda do painel */

.sb-paleta-grupo + .sb-paleta-grupo { margin-top: var(--sb-e-2); }
.sb-paleta-grupo-cab {
  font-size: var(--sb-t-11); font-weight: 600; color: var(--sb-tinta-3);
  text-transform: uppercase; letter-spacing: .07em;
  padding: var(--sb-e-2) var(--sb-e-2) var(--sb-e-1);
}

.sb-paleta-item {
  display: flex; align-items: center; gap: var(--sb-e-3);
  min-height: var(--sb-toque);
  padding: var(--sb-e-2) var(--sb-e-2);
  border-radius: var(--sb-raio-p);
  cursor: pointer; scroll-margin: var(--sb-e-2);
}
/* Destaque só pelo teclado/mouse que o JS marca — não por :hover solto,
   senão o cursor parado sob a lista briga com quem navega pelas setas. */
.sb-paleta-item.sb-paleta-ativo { background: var(--sb-lateral-ativo); }
.sb-paleta-item.sb-paleta-ativo .sb-paleta-ico { color: var(--sb-acento); }

.sb-paleta-ico {
  width: 30px; height: 30px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: var(--sb-raio-p);
  background: var(--sb-neutro-f); color: var(--sb-tinta-3);
}
.sb-paleta-ico svg { width: 15px; height: 15px; stroke-width: 1.9; }

.sb-paleta-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sb-paleta-tit {
  font-size: var(--sb-t-14); font-weight: 600; color: var(--sb-tinta);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-paleta-sub {
  font-size: var(--sb-t-12); color: var(--sb-tinta-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-paleta-val {
  font-size: var(--sb-t-13); font-weight: 700; white-space: nowrap;
  color: var(--sb-tinta); flex: 0 0 auto;
}

/* ── Estados: carregando, vazio, erro ── */
.sb-paleta-carregando { padding: var(--sb-e-2) var(--sb-e-3); }
.sb-paleta-msg { padding: var(--sb-e-4) var(--sb-e-3) var(--sb-e-5); }
.sb-paleta-msg-tit { font-size: var(--sb-t-14); font-weight: 650; color: var(--sb-tinta); }
.sb-paleta-msg-txt {
  font-size: var(--sb-t-13); color: var(--sb-tinta-2);
  margin-top: var(--sb-e-1); max-width: 48ch;
}

@media (max-width: 860px) {
  /* No celular a paleta sobe: o teclado virtual come a metade de baixo da tela. */
  .sb-paleta-fundo { padding: var(--sb-e-4); align-items: flex-start; }
  .sb-paleta { max-height: calc(100vh - var(--sb-e-8)); max-width: none; }
}

/* ═══════════════ 13. HISTÓRICO DE UNIFICAÇÃO DE NOMES ══════════════════════
   As variáveis --sb-cor-* foram REMOVIDAS: nenhuma tela as cita mais.

   Junto com elas caiu `--sb-raio: var(--sb-raio-p)`, que era um bug real —
   ela sobrescrevia o raio médio (8px) com o pequeno (6px), e assim TODO
   `var(--sb-raio)` do sistema (aviso, alerta, busca global, bloco) rendia 6px.
   O raio médio simplesmente não existia na prática. Agora existe.

   Os nomes de classe que cada tela escrevia por conta própria dentro do
   innerHTML (.hm-metrica, .sb-config-tab, .sb-caixa-marcar, .sb-config-inativo
   …) foram unificados nos nomes deste design system (DT-0008): cada .js passou
   a escrever o nome canônico direto — não sobra nome alternativo a manter.
   ═════════════════════════════════════════════════════════════════════════ */

/* ═══════════════ 14. CSS ESPECÍFICO DE CADA TELA ═══════════════════════════
   Migrado para cá dos <style> embutidos de cada HTML (DT-0008). Cada bloco só
   tem o que é exclusivo daquela tela — o resto já mora nas seções acima.
   Onde um nome desta seção colide com um nome do design system (ex.: .sb-bloco,
   .sb-cab-acoes, .sb-secao-cab-dir), o seletor migrado vem escopado a um
   contêiner específico da tela — nunca solto — para não vazar para as outras.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Tela: clientes ───────────────────────────────────────────────────────── */
#sb-cli-fichas { flex-wrap: wrap; }

/* PRD-3002: aba "Parceiros (n)" da ficha e barra de filtros de clientes. */
.sb-cli-parceiros { list-style: none; margin: var(--sb-e-3) 0; padding: 0; display: flex; flex-direction: column; gap: var(--sb-e-3); }
.sb-cli-parceiro-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--sb-e-2); flex-wrap: wrap; margin-bottom: var(--sb-e-3); }
.sb-cli-parceiro-selo { display: inline-flex; align-items: center; gap: var(--sb-e-1); }
.sb-cli-fichas { display: flex; flex-wrap: wrap; gap: var(--sb-e-2); }
.sb-cli-filtros-dir { flex-wrap: wrap; }
@media (max-width: 480px) {
  .sb-cli-parceiro .sb-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sb-cli-parceiro .sb-dl dd { text-align: left; margin-bottom: var(--sb-e-2); }
}
@media (max-width: 860px) { .sb-parc-tentar { min-height: var(--sb-toque); } }
.sb-parceiro-rodape { margin-top: var(--sb-e-3); }

/* Blocos repetíveis do formulário (endereço, contato). A caixa é o .sb-bloco do
   DS; aqui só o que difere: fundo rebaixado e o espaço entre um bloco e outro.
   Escopado às duas classes que sempre acompanham .sb-bloco nesta tela — nunca
   ao .sb-bloco puro, que tem outra aparência em configuração. */
.sb-secao-form { margin-top: var(--sb-e-5); }

/* Lista de clientes: CPF/CNPJ (embaixo do nome) nunca parte no meio. */
.sb-cli-doc { white-space: nowrap; }

/* PRD-3001 (redesenho do dono, 06/11/2026): janela do cadastro de cliente.
   Mais larga e em colunas; seções com título (.sb-h-tit) e linha divisória;
   contatos em tabela editável em linha (.sb-cli-ct). Peças e tokens são os do
   design system — aqui só a grade e o espaçamento desta janela. */
.sb-modal.sb-cli-modal { max-width: min(1080px, 94vw); }
.sb-cli-modal .sb-modal-corpo { padding: var(--sb-e-5) var(--sb-e-6) var(--sb-e-6); }
.sb-cli-modal .form-grid { align-items: start; row-gap: var(--sb-e-4); column-gap: var(--sb-e-5); }
.sb-cli-modal .sb-secao-form { margin-top: var(--sb-e-6); padding-top: var(--sb-e-5); border-top: 1px solid var(--sb-linha); }
.sb-cli-modal .sb-h-tit { display: block; }
.sb-cli-modal .sb-cli-secao-dica { margin: calc(-1 * var(--sb-e-1)) 0 var(--sb-e-4); }
#sb-cli-resto > .sb-cli-grade-dados-2 { margin-top: var(--sb-e-4); }

/* Grades: 1 coluna no celular, 2 na janela média, 3 (dados) / 4 (endereço) na larga. */
.sb-modal.sb-cli-modal .form-grid.sb-cli-grade-dados,
.sb-modal.sb-cli-modal .form-grid.sb-cli-grade-endereco { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .sb-modal.sb-cli-modal .form-grid.sb-cli-grade-dados,
  .sb-modal.sb-cli-modal .form-grid.sb-cli-grade-endereco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sb-cli-modal #sb-cli-campo-codigo,
  .sb-cli-modal .sb-cli-col-nome,
  .sb-cli-modal .sb-cli-col-logradouro { grid-column: 1 / -1; }
}
@media (min-width: 980px) {
  .sb-modal.sb-cli-modal .form-grid.sb-cli-grade-dados { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sb-modal.sb-cli-modal .form-grid.sb-cli-grade-endereco { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sb-cli-modal #sb-cli-campo-codigo { grid-column: auto; }
  .sb-cli-modal .sb-cli-col-nome, .sb-cli-modal .sb-cli-col-logradouro { grid-column: span 2; }
}

/* Contatos: tabela editável em linha (uma linha por contato; o tipo decide a vaga).
   Peças do design system: .sb-tabela, .form-campo, .btn, .sb-acao, .sb-origem-api.
   A linha de inclusão fica no topo, com fundo de tela e filete forte embaixo. */
.sb-cli-ct td { height: auto; padding: var(--sb-e-2) var(--sb-e-3); vertical-align: top; }
.sb-cli-ct th { padding: 10px var(--sb-e-3); }
.sb-cli-ct tbody tr:hover { background: transparent; }
.sb-cli-ct tr.sb-cli-ct-add { background: var(--sb-tela); }
.sb-cli-ct tr.sb-cli-ct-add td { border-bottom: 2px solid var(--sb-linha-forte); }
.sb-cli-ct .form-campo input, .sb-cli-ct .form-campo select { padding: 8px 10px; }
.sb-cli-ct .sb-cli-ct-col-tipo { width: 31%; }
.sb-cli-ct .sb-cli-ct-col-nome { width: 24%; }
.sb-cli-ct .sb-cli-ct-col-acao { width: 112px; }
.sb-cli-ct td.sb-cli-ct-acao { white-space: nowrap; }
.sb-cli-ct-flex { display: flex; align-items: center; gap: var(--sb-e-2); }
.sb-cli-ct-flex .form-campo { flex: 1; min-width: 0; }
.sb-cli-ct .sb-origem-api .sb-ico-api { width: 24px; height: 25px; }
.sb-cli-ct-excluir { width: 36px; height: 36px; }
.sb-cli-ct-excluir:hover:not(:disabled) { color: var(--sb-perigo); background: var(--sb-perigo-f); box-shadow: none; }
.sb-cli-ct-excluir:disabled { opacity: .4; cursor: not-allowed; }
.sb-cli-ct-excluir .sb-cli-ct-txt { display: none; }
.sb-cli-ct .form-erro { margin-top: 5px; }
.sb-cli-ct td.sb-cli-ct-vazio { color: var(--sb-tinta-3); padding: var(--sb-e-4) var(--sb-e-3); font-size: var(--sb-t-13); }

@media (max-width: 639px) { .sb-cli-modal .sb-modal-corpo { padding: var(--sb-e-4); } }
/* Celular e tablet estreito (mesma quebra de 860 px das listagens): cada contato vira um cartão
   empilhado, sem rolagem lateral. A regra global de 860 px já esconde .sb-tabela; aqui ela volta como bloco. */
@media (max-width: 860px) {
  .sb-cli-ct, .sb-cli-ct tbody, .sb-cli-ct tr, .sb-cli-ct td { display: block; width: 100%; }
  .sb-cli-ct thead { display: none; }
  .sb-cli-ct caption { display: none; }
  .sb-cli-ct tr { padding: var(--sb-e-3); border-bottom: 1px solid var(--sb-linha); }
  .sb-cli-ct tr:last-child { border-bottom: 0; }
  .sb-cli-ct td { padding: var(--sb-e-1) 0; border: 0; }
  .sb-cli-ct tr.sb-cli-ct-add td { border-bottom: 0; }
  .sb-cli-ct tr.sb-cli-ct-add { border-bottom: 2px solid var(--sb-linha-forte); }
  .sb-cli-ct td[data-rotulo]::before { content: attr(data-rotulo); display: block; font-size: var(--sb-t-13); font-weight: 600; margin-bottom: 5px; }
  .sb-cli-ct td.sb-cli-ct-acao { display: flex; justify-content: flex-end; padding-top: var(--sb-e-2); }
  .sb-cli-ct td.sb-cli-ct-acao::before { display: none; }
  .sb-cli-ct td.sb-cli-ct-acao .btn { width: 100%; min-height: var(--sb-toque); }
  .sb-cli-ct-excluir { width: auto; height: var(--sb-toque); padding: 0 var(--sb-e-3); display: inline-flex; align-items: center; gap: 6px; font-size: var(--sb-t-13); font-weight: 550; }
  .sb-cli-ct-excluir .sb-cli-ct-txt { display: inline; }
  .sb-cli-ct .form-campo input, .sb-cli-ct .form-campo select { min-height: var(--sb-toque); }
}

/* Linha de cobrança dentro da gaveta do cliente. */
.sb-cli-cob {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sb-e-3); padding: var(--sb-e-3) 0;
  border-bottom: 1px solid var(--sb-linha); text-decoration: none; color: var(--sb-tinta);
}
.sb-cli-cob:last-child { border-bottom: 0; }
.sb-cli-cob:hover { color: var(--sb-acento); }
.sb-cli-cob-val { font-weight: 700; white-space: nowrap; }
.sb-cli-dup { padding: var(--sb-e-3) 0; border-bottom: 1px solid var(--sb-linha); }
.sb-cli-dup:last-child { border-bottom: 0; }
.sb-cli-dup-motivo { font-size: var(--sb-t-12); color: var(--sb-tinta-3); }

@media (max-width: 860px) {
  /* Os dois botões do cabeçalho (Exportar / Novo cliente) empilham lado a lado,
     ocupando a largura toda — layout exclusivo desta tela. O alvo de toque de
     44px em si já vale para toda a aplicação (seção CELULAR, acima). */
  #sb-cli-cab-acoes { width: 100%; }
  #sb-cli-cab-acoes .btn { flex: 1; }
}

/* ── Tela: nova cobrança ──────────────────────────────────────────────────── */
/* Único CSS local desta tela: a grade "formulário + resumo fixo" e peças
   exclusivas dela (número do passo, cartão do pagador, linha de lista dinâmica).
   O valor em destaque é o .sb-valor-forte do design system. */
.sb-nc-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--sb-e-5);
  align-items: start;
}
.sb-nc-coluna { display: flex; flex-direction: column; gap: var(--sb-e-4); min-width: 0; }
.sb-nc-lado { position: sticky; top: calc(var(--sb-topo-alt) + var(--sb-e-4)); min-width: 0; }

.sb-passo-num {
  width: 24px; height: 24px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: var(--sb-raio-pill);
  background: var(--sb-acento-fraco); color: var(--sb-acento-tinta);
  font-size: var(--sb-t-12); font-weight: 700;
}
.sb-painel-cab .sb-passo-sub { margin-left: auto; font-size: var(--sb-t-12); color: var(--sb-tinta-3); }

/* Linha "campo + botão" (busca do pagador). */
.sb-nc-linha { display: flex; gap: var(--sb-e-2); align-items: flex-end; flex-wrap: wrap; }
.sb-nc-linha .form-campo { flex: 1; min-width: 200px; }
/* Campo com botão ao lado: o botão alinha com o input, não com a dica embaixo. */
.sb-campo-com-botao { display: flex; gap: var(--sb-e-2); align-items: stretch; }
.sb-campo-com-botao input { flex: 1; min-width: 0; }

/* Cartão do pagador escolhido / candidatos da busca. */
.sb-cli-cartao {
  display: flex; align-items: center; gap: var(--sb-e-3); flex-wrap: wrap;
  padding: var(--sb-e-3) var(--sb-e-4);
  border: 1px solid var(--sb-linha-forte); border-radius: var(--sb-raio);
  background: var(--sb-papel);
}
.sb-cli-cartao + .sb-cli-cartao { margin-top: var(--sb-e-2); }
.sb-cli-cartao-ok { border-color: var(--sb-ok); background: var(--sb-ok-f); }
.sb-cli-txt { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 2px; }
.sb-cli-nome { font-weight: 650; font-size: var(--sb-t-14); }
.sb-cli-sub { font-size: var(--sb-t-12); color: var(--sb-tinta-2); }

/* Listas dinâmicas (identificadores e contatos). */
.sb-nc-lista { display: flex; flex-direction: column; gap: var(--sb-e-2); }
.sb-nc-lista-item { display: flex; gap: var(--sb-e-2); align-items: center; flex-wrap: wrap; }
.sb-nc-lista-item input { flex: 1; min-width: 140px; }
.sb-nc-lista-item select { min-width: 120px; }
.sb-nc-lista-item input,
.sb-nc-lista-item select {
  padding: 9px 12px; border: 1px solid var(--sb-linha-forte);
  border-radius: var(--sb-raio-p); background: var(--sb-papel); font-size: var(--sb-t-14);
}
.sb-nc-lista-rotulo { font-size: var(--sb-t-13); color: var(--sb-tinta-2); min-width: 72px; }

/* Resumo do boleto. O valor é o .sb-valor-forte do DS (respiro já embutido nele). */
.sb-nc-pe { display: flex; flex-direction: column; gap: var(--sb-e-2); }
.sb-nc-pe .btn { width: 100%; }

/* PRD-0013 (correção D1/D9): dica de Pix única na etapa de regras, largura cheia,
   alinhada à esquerda (fora do <dd>, que alinha à direita). */
.sb-nc-dica-pix { display: block; text-align: left; margin-top: var(--sb-e-3); }

@media (max-width: 1040px) {
  .sb-nc-grade { grid-template-columns: 1fr; }
  /* No celular o resumo vai para o fim da página, depois das seções. */
  .sb-nc-lado { position: static; order: 2; }
  .sb-nc-coluna { order: 1; }
}

@media (max-width: 860px) {
  /* Alvo de toque (WCAG 2.5.5, DT-0008): "Emitir cobrança" e "Salvar rascunho"
     são as ações principais da tela. */
  .sb-nc-pe .btn { min-height: var(--sb-toque); }
}

/* Parcelado (PRD-0011 / REC1-M, Componente 10a): destaque transitório da
   parcela recalculada por efeito de uma edição em OUTRA linha — sem isso, a
   regra "só as posteriores mudam" (RF-04) fica invisível na grade editável. */
.sb-parc-recalculada { animation: sb-parc-flash 1.2s ease-out; }
@keyframes sb-parc-flash {
  0%   { background: var(--sb-alerta-f); }
  100% { background: transparent; }
}

/* Painel recolhível (sbRecolhivel, PRD-3004): o botão "Mais opções" (cobranca-nova.html:213-215) levado ao cabeçalho. */
.sb-painel-cab-recolhivel { flex-wrap: wrap; }
.sb-painel-cab-recolhivel .sb-passo-sub {
  flex: 1 1 200px; min-width: 0; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-recolhivel-botao { flex: 0 0 auto; }
@media (max-width: 600px) {
  .sb-painel-cab-recolhivel .sb-passo-sub { order: 3; flex-basis: 100%; margin-left: 0; text-align: left; }
}
@media (max-width: 860px) { .sb-recolhivel-botao { min-height: var(--sb-toque); } }

/* Densidade da Nova cobrança (PRD-3004, RF-12): cerca de 30% menos ESPAÇO e a mesma LETRA. Redeclara só tokens de
   espaço dentro do contêiner; --sb-t-* e tokens globais intocados. Valores da maquete aprovada (index.html:57-66). */
.sb-nc-compacta {
  --sb-e-1: 3px; --sb-e-2: 6px; --sb-e-3: 8px; --sb-e-4: 11px;
  --sb-e-5: 17px; --sb-e-6: 22px; --sb-e-7: 34px; --sb-linha-alt: 32px;
}
.sb-nc-compacta .form-campo { gap: 3px; }
.sb-nc-compacta .form-campo > label { flex-wrap: wrap; }
.sb-nc-compacta .form-campo input,
.sb-nc-compacta .form-campo select,
.sb-nc-compacta .form-campo textarea,
.sb-nc-compacta .sb-nc-lista-item input,
.sb-nc-compacta .sb-nc-lista-item select,
.sb-nc-compacta .sb-seletor { padding: 6px 10px; }
/* UX-A1: mesma especificidade da regra acima e depois dela — devolve o recuo da lupa (34px, .sb-campo-busca input). */
.sb-nc-compacta .sb-campo-busca input,
.sb-nc-compacta .form-campo .sb-campo-busca input { padding: 6px 10px 6px 34px; }
.sb-nc-compacta .sb-tabela th { padding: 7px var(--sb-e-4); }
.sb-nc-compacta .sb-cli-cartao { padding: var(--sb-e-2) var(--sb-e-3); }
.sb-nc-compacta .btn-p { padding: 3px 8px; }
@media (max-width: 860px) {   /* alvo de toque de 44 px continua (inclui DT-0009 item 2: botões dentro do cartão da tabela) */
  .sb-nc-compacta .form-campo input:not([type="radio"]):not([type="checkbox"]),
  .sb-nc-compacta .form-campo select,
  .sb-nc-compacta .sb-campo-busca input,
  .sb-nc-compacta .sb-seletor,
  .sb-nc-compacta .btn,
  .sb-nc-compacta .sb-cartao-linha .btn { min-height: var(--sb-toque); }
}

/* PRD-3004-b: grade dos campos do boleto. Controles da mesma linha alinhados pelo topo (rótulo | controle | pé). */
.sb-cb-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: var(--sb-e-3) var(--sb-e-4); align-items: start; }
@supports (grid-template-rows: subgrid) {
  .sb-cb-grade > .form-campo { grid-row: span 3; display: grid; grid-template-rows: subgrid; row-gap: 3px; align-content: start; }
}
.sb-cb-grade > .form-campo-largo { grid-column: 1 / -1; }
.sb-cb-rotulo { flex-wrap: wrap; }
.sb-nc-compacta .sb-cb-rotulo .badge { font-size: var(--sb-t-11); padding: 1px 6px; }
.sb-cb-pe { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sb-cb-pe:empty { display: none; }
.sb-cb-reset { display: flex; align-items: center; gap: var(--sb-e-2); flex-wrap: wrap; }
.form-campo textarea.sb-cb-texto, .sb-cb-texto { min-height: 94px; }  /* +30% sobre os 72px de `.form-campo textarea` (precisa da mesma especificidade para valer) */
.sb-cb-contador[data-excede] { color: var(--sb-perigo); font-weight: 550; }
/* Resumo lateral: a descrição (que pode ter muitas linhas) ocupa no máximo 2, com reticências; o texto inteiro fica no campo e no title. */
.sb-resumo-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.sb-cb-regra-cab { display: flex; align-items: center; gap: var(--sb-e-2); flex-wrap: wrap; margin-bottom: var(--sb-e-3); }
.sb-cb-regra-cab .sb-cb-reset { margin-left: auto; }
.sb-cb-balanco ul { margin: var(--sb-e-1) 0 var(--sb-e-3); padding-left: var(--sb-e-5); }
@media (max-width: 860px) {
  .sb-cb-rotulo .sb-ajuda { position: relative; }
  .sb-cb-rotulo .sb-ajuda::after { content: ""; position: absolute; inset: -14px; }  /* 16 + 28 = 44 px de toque */
  .sb-cb-grade .sb-check-linha label { min-height: var(--sb-toque); display: inline-flex; align-items: center; }
}

/* ── Tela: detalhe da cobrança ────────────────────────────────────────────── */
/* Só o layout desta tela. O que era genérico (nota de apoio, valor em destaque)
   está no design system. */
.sb-det-voltar { margin-bottom: var(--sb-e-3); }

/* Cabeçalho forte: o VALOR é o título. Selo da situação embaixo, nº interno em
   mono. A barra de ações é o rodapé do cabeçalho e fica colada no topo da tela
   enquanto o operador rola o detalhe — a ação nunca sai do alcance. */
.sb-det-topo {
  background: var(--sb-papel);
  border: 1px solid var(--sb-linha);
  border-radius: var(--sb-raio-g);
  box-shadow: var(--sb-sombra);
  overflow: hidden;
  margin-bottom: var(--sb-e-5);
}
.sb-det-topo-corpo { padding: var(--sb-e-5); }

.sb-det-selos {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-e-2);
  margin-top: var(--sb-e-3);
}
.sb-det-ident {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-e-2);
  margin-top: var(--sb-e-3);
}
.sb-det-topo-pe {
  padding: var(--sb-e-3) var(--sb-e-5);
  border-top: 1px solid var(--sb-linha);
  background: var(--sb-tela);
}
.sb-det-topo-pe .sb-cab-acoes { flex-wrap: wrap; }

/* Detalhe da cobrança: ação destrutiva no canto superior direito do cabeçalho. */
.sb-det-topo-corpo-dividido {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: var(--sb-e-3);
}
.sb-det-topo-info { min-width: 0; flex: 1 1 auto; }
.sb-det-topo-perigo { display: flex; gap: var(--sb-e-2); flex: 0 0 auto; }
.sb-det-topo-perigo:empty { display: none; }

@media (min-width: 861px) {
  .sb-det-topo { position: sticky; top: var(--sb-topo-alt); z-index: 20; }
}

/* Duas colunas: os dados à esquerda, a trilha à direita. */
.sb-det-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--sb-e-5);
  align-items: start;
}
.sb-det-col { display: flex; flex-direction: column; gap: var(--sb-e-5); min-width: 0; }
@media (max-width: 1100px) { .sb-det-cols { grid-template-columns: 1fr; } }

/* Números longos (linha digitável, correlação) quebram em vez de furar a caixa. */
.sb-det-cod {
  display: block; margin-top: var(--sb-e-1);
  overflow-wrap: anywhere; line-height: 1.5;
}

/* PRD-0013: código longo com o botão de copiar logo abaixo (linha digitável, barras, Pix). Usado pela TASK-008. */
.sb-det-copiavel .btn { margin-top: var(--sb-e-2); }
@media (max-width: 860px) { .sb-det-copiavel .btn { width: 100%; min-height: var(--sb-toque); } }

.sb-det-tags { display: flex; flex-wrap: wrap; gap: var(--sb-e-2); }

/* Eventos técnicos: fechado por padrão — é informação de suporte, não de operação. */
.sb-det-sanfona > summary {
  cursor: pointer; font-size: var(--sb-t-13); font-weight: 600;
  color: var(--sb-tinta-2); padding: var(--sb-e-1) 0;
}
.sb-det-sanfona > summary:hover { color: var(--sb-tinta); }
.sb-det-sanfona[open] > summary { margin-bottom: var(--sb-e-4); }

/* ── Tela: configuração ───────────────────────────────────────────────────── */
/* A coluna da esquerda tem DOIS níveis: Conta › Carteira. O convênio saiu dela
   (nunca foi alvo de seleção — não existe "painel do convênio") e virou cartão
   editável na aba "Convênios" do painel da conta, onde há largura de sobra e
   cada ação mora dentro do objeto sobre o qual age. O nível Banco só aparece
   quando carrega informação: 2+ bancos, ou banco fora de ATIVO. */

/* Layout: navegação (tabela) + trabalho (painel). Modelo B (Hot Fix Demanda 1,
   item 7): a navegação é a TABELA em cima (largura cheia) e o painel de
   detalhe embaixo, revelado ao selecionar. Antes era uma árvore na coluna
   estreita à esquerda. */
.sb-config-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sb-e-5);
  align-items: start;
}

/* Tabela de navegação (Modelo B). */
.sb-config-arvore { position: static; }
.sb-config-arvore > .sb-painel-corpo { padding: var(--sb-e-3); }
.sb-config-tabela-wrap { overflow-x: auto; }
.sb-config-tabela { width: 100%; border-collapse: collapse; }
.sb-config-tabela > thead > tr > th {
  padding: 8px var(--sb-e-3); text-align: left; white-space: nowrap;
  font-size: var(--sb-t-12); font-weight: 600; color: var(--sb-tinta-2);
  background: var(--sb-tela); border-bottom: 1px solid var(--sb-linha);
}
.sb-config-tabela > tbody > tr > td {
  padding: 8px var(--sb-e-3); border-bottom: 1px solid var(--sb-linha);
  font-size: var(--sb-t-13); vertical-align: middle;
}
.sb-config-tabela > tbody > tr.sb-config-tr:hover { background: var(--sb-neutro-f); }
.sb-config-tabela > tbody > tr[aria-current="true"] { background: var(--sb-acento-fraco); }
/* Marcador da linha selecionada só na 1ª célula — em todas as td virava uma
   barra vertical antes de cada coluna. */
.sb-config-tabela > tbody > tr[aria-current="true"] > td:first-child { box-shadow: inset 3px 0 0 var(--sb-acento); }
.sb-config-tr-banco > td {
  background: var(--sb-tela); font-weight: 700; color: var(--sb-tinta); padding-top: var(--sb-e-3);
}
.sb-config-banco-cod { font-family: var(--sb-mono); font-size: var(--sb-t-11); color: var(--sb-tinta-3); font-weight: 500; }
.sb-config-tr-acao td { padding: var(--sb-e-1) var(--sb-e-3); border-bottom: 0; }
.sb-config-cel-conta { display: flex; flex-direction: column; gap: 1px; text-align: left; max-width: 260px; }
.sb-config-cel-conta:hover .sb-config-conta-nome { color: var(--sb-acento-tinta); }
.sb-config-cel-cart {
  text-align: left; font-weight: 600; color: var(--sb-tinta);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-config-cel-cart:hover { color: var(--sb-acento-tinta); }
.sb-config-teto {
  font-size: var(--sb-t-11); font-weight: 700; color: var(--sb-alerta);
  background: var(--sb-alerta-f); padding: 1px 7px; border-radius: var(--sb-raio-pill); white-space: nowrap;
}

.sb-config-arv-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sb-e-2); flex-wrap: wrap;
  padding: var(--sb-e-1) var(--sb-e-2) var(--sb-e-3);
  border-bottom: 1px solid var(--sb-linha);
  margin-bottom: var(--sb-e-3);
}
.sb-config-arv-tit {
  font-size: var(--sb-t-12); font-weight: 600; color: var(--sb-tinta-3);
}

/* Banco — agrupador FRACO: só nomeia o grupo, não compete com a conta. */
.sb-config-banco { margin-bottom: var(--sb-e-4); }
.sb-config-banco:last-child { margin-bottom: 0; }
.sb-config-banco-tit {
  display: flex; align-items: center; gap: var(--sb-e-2);
  padding: 0 var(--sb-e-2) var(--sb-e-2);
  font-size: var(--sb-t-12); font-weight: 600; color: var(--sb-tinta-3);
}
.sb-config-banco-nome {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Ramo — indentação com fio, para a hierarquia se ler de relance. */
.sb-config-ramo {
  margin-left: var(--sb-e-3);
  padding-left: var(--sb-e-3);
  border-left: 1px solid var(--sb-linha);
}

/* Conta — a unidade FORTE: é onde moram credencial e certificado. */
.sb-config-conta {
  display: flex; align-items: flex-start; gap: var(--sb-e-2);
  width: 100%; text-align: left; min-height: 40px;
  padding: var(--sb-e-2) var(--sb-e-3);
  border: 1px solid transparent; border-radius: var(--sb-raio-p);
  transition: background var(--sb-mov), border-color var(--sb-mov);
}
.sb-config-conta:hover { background: var(--sb-neutro-f); }
.sb-config-conta[aria-current="true"] {
  background: var(--sb-acento-fraco); border-color: var(--sb-acento);
}
.sb-config-conta-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sb-config-conta-nome {
  font-size: var(--sb-t-14); font-weight: 650; color: var(--sb-tinta);
  overflow-wrap: anywhere;                  /* rótulo longo dobra, não estoura */
}
.sb-config-conta-num {
  font-family: var(--sb-mono); font-size: var(--sb-t-11); color: var(--sb-tinta-3);
}
.sb-config-selos {
  display: flex; flex-wrap: wrap; gap: var(--sb-e-1); margin-top: var(--sb-e-1);
}

/* Conta ATIVA: fio de acento. A carteira indentada abaixo pertence, visivelmente,
   a esta conta — e a conta que só CONTÉM a seleção não rouba o aria-current dela. */
#sb-config-arvore [data-aberta="1"] > .sb-config-conta:not([aria-current="true"]) {
  border-color: var(--sb-linha-forte);
}
#sb-config-arvore [data-aberta="1"] > .sb-config-ramo { border-left-color: var(--sb-acento); }

/* Carteira — a linha de seleção. Serve na coluna E dentro do cartão de convênio.
   Duas linhas no máximo; NUNCA quebra letra a letra. */
.sb-config-cart {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sb-e-1) var(--sb-e-2);
  width: 100%; text-align: left; min-height: 34px;
  padding: var(--sb-e-2);
  border: 1px solid transparent; border-radius: var(--sb-raio-p);
  font-size: var(--sb-t-13); color: var(--sb-tinta-2);
  transition: background var(--sb-mov), color var(--sb-mov);
}
.sb-config-cart:hover { background: var(--sb-neutro-f); color: var(--sb-tinta); }
.sb-config-cart[aria-current="true"] {
  background: var(--sb-acento-fraco); border-color: var(--sb-acento);
  color: var(--sb-acento-tinta); font-weight: 650;
}
/* Base de 60%: se os selos apertarem o nome abaixo disso, ELES descem de linha. */
.sb-config-cart-txt {
  flex: 1 1 60%; min-width: 0;
  display: flex; align-items: baseline; gap: var(--sb-e-2);
}
.sb-config-cart-cod {                    /* só é emitido quando código ≠ nome */
  font-family: var(--sb-mono); font-size: var(--sb-t-11); color: var(--sb-tinta-3);
  flex: 0 0 auto; white-space: nowrap;
}
.sb-config-cart-nome {                   /* a correção do "PRI / NCI / PAL" */
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-config-cart .sb-config-selos { flex: 0 1 auto; margin-top: 0; }
.sb-config-cart-versoes { flex: 1 1 100%; }   /* só na variante do cartão */

/* Inativo: esmaecido pelo .sb-esmaecido do design system — ainda legível,
   nunca sumido sem aviso (configuracao.js já escreve esse nome direto). */

.sb-config-ramo-vazio {
  font-size: var(--sb-t-12); color: var(--sb-tinta-3);
  padding: var(--sb-e-1) var(--sb-e-2);
}
.sb-config-add { margin: var(--sb-e-1) 0 var(--sb-e-2) var(--sb-e-2); }

/* Convênio: cartão do painel (aba "Convênios"), não mais nó de navegação. */
.sb-config-conv-lista { display: flex; flex-direction: column; gap: var(--sb-e-4); }
.sb-config-conv-cab {
  display: flex; align-items: center; gap: var(--sb-e-2); flex-wrap: wrap;
  margin-bottom: var(--sb-e-3);
}
.sb-config-conv-nome { min-width: 0; overflow-wrap: anywhere; }  /* tem a linha inteira */
.sb-config-conv-editar { margin-left: auto; }
.sb-config-cart-lista { display: flex; flex-direction: column; gap: var(--sb-e-1); }

/* Fichas e botão convivendo no cabeçalho da seção (o .sb-secao-cab-dir do DS já
   empurra para a direita; aqui só ganham eixo e respiro entre si). Escopado ao
   painel de configuração — o .sb-secao-cab-dir de outras telas (ex.: início)
   continua só com o comportamento base do design system. */
#sb-config-painel .sb-secao-cab-dir { display: flex; align-items: center; gap: var(--sb-e-2); flex-wrap: wrap; }
/* A seção abre o painel da aba: não empilha margem de topo sobre a barra de abas. */
#sb-config-painel [role="tabpanel"] > .sb-secao-cab:first-child { margin-top: 0; }

/* Breadcrumb que AGE: volta para a conta dona da carteira. */
.sb-config-voltar {
  display: inline-flex; align-items: center; gap: var(--sb-e-1);
  font-size: var(--sb-t-12); font-weight: 600; color: var(--sb-tinta-2);
  padding: var(--sb-e-1) 0; margin-bottom: var(--sb-e-1);
}
.sb-config-voltar:hover { color: var(--sb-acento-tinta); }

/* Cabeçalho do painel. */
#sb-config-painel .sb-painel-cab { flex-wrap: wrap; }
.sb-config-cab-txt { flex: 1; min-width: 0; }
.sb-config-caminho {
  font-size: var(--sb-t-12); color: var(--sb-tinta-3);
  margin-top: 2px; overflow-wrap: anywhere;
}
.sb-config-cab-dir { display: flex; gap: var(--sb-e-2); flex-wrap: wrap; }

/* Cartão interno do painel — credencial, certificado, conexão. */
.sb-config-cartoes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sb-e-4);
}
/* A caixa é o .sb-bloco do DS (configuracao.js escreve as duas classes juntas);
   aqui só o fundo e o conteúdo. */
.sb-config-cartao { background: var(--sb-papel); }
.sb-config-cartao h3 { margin-bottom: var(--sb-e-2); }
.sb-config-cartao p { font-size: var(--sb-t-13); color: var(--sb-tinta-2); margin-bottom: var(--sb-e-2); }
.sb-config-cartao p:last-child { margin-bottom: 0; }
.sb-config-cartao code {
  font-family: var(--sb-mono); font-size: var(--sb-t-12);
  color: var(--sb-tinta-2); word-break: break-all;
}
.sb-config-acoes { display: flex; flex-wrap: wrap; gap: var(--sb-e-2); margin-top: var(--sb-e-3); }

/* Regras financeiras: um bloco (.sb-bloco, junto de .sb-config-regra) por tipo,
   cada campo com rótulo real. */
.sb-config-regra { margin-bottom: var(--sb-e-4); }
.sb-config-regra:last-child { margin-bottom: 0; }
.sb-config-regra h3 { margin-bottom: var(--sb-e-3); }

/* Capacidades: grade de caixas de marcação (.sb-check-linha do DS). */
.sb-config-caps {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--sb-e-2) var(--sb-e-4);
}

/* Aviso com ação (o .sb-alerta do DS + um botão à direita). */
.sb-config-alerta-txt { flex: 1; min-width: 0; }
.sb-config-alerta { margin-bottom: var(--sb-e-4); }
.sb-config-mt { margin-top: var(--sb-e-4); }

/* Estado da credencial em texto (o selo colorido fica no .badge do DS). */
.sb-config-cred-ok      { color: var(--sb-ok); font-weight: 600; }
.sb-config-cred-alerta  { color: var(--sb-alerta); font-weight: 600; }
.sb-config-cred-pendente{ color: var(--sb-perigo); font-weight: 600; }

/* PRD-0013: aviso com ação e ações de cartão também cabem no dedo. */
.sb-alerta > .sb-ico-inline { margin-top: 2px; }
@media (max-width: 860px) {
  .sb-config-acoes .btn, .sb-config-alerta .btn, .sb-mostrar { min-height: var(--sb-toque); }
}
@media (max-width: 480px) {
  .sb-config-alerta { flex-wrap: wrap; }
  .sb-config-alerta .btn, .sb-mostrar { width: 100%; }
}
.sb-mostrar { margin-top: var(--sb-e-2); }
/* No .form-campo (coluna flex) o botão não estica no desktop; abaixo de 480px a regra acima o deixa na largura cheia. */
.form-campo > .sb-mostrar { align-self: flex-start; }
/* Confirmação dentro do aviso de troca de ambiente (formulário de conta Sicredi). */
.sb-config-alerta-txt > .sb-check-linha { margin-top: var(--sb-e-2); }
/* PRD-0013 (correção D4): a confirmação de troca de ambiente é o alvo inteiro
   (caixa + rótulo, ≥ 24px; 44px no celular pela regra da .sb-check-linha) e o
   erro aparece logo abaixo dela, dentro do aviso âmbar. */
.sb-config-alerta-txt > .sb-check-linha input { width: 20px; height: 20px; }
.sb-config-alerta-txt > .sb-check-linha label { cursor: pointer; padding: 4px 0; min-height: 24px; display: inline-flex; align-items: center; }
.sb-config-alerta-txt > .sb-check-linha input[aria-invalid="true"] { outline: 2px solid var(--sb-perigo); outline-offset: 2px; }
.sb-config-alerta-txt > .form-erro { margin-top: var(--sb-e-1); }
/* Resultado do teste de conexão: alerta no fim do cartão, sem sobra embaixo. */
.sb-config-cartao > .sb-config-alerta:last-child { margin-bottom: 0; }
/* DT-0013 (1): lista de pendências da validação da carteira (submeter / salvar rascunho). */
.sb-config-pendencias { margin: var(--sb-e-2) 0 0; padding-left: var(--sb-e-5, 20px); }
.sb-config-pendencias li + li { margin-top: var(--sb-e-1); }
/* Atalho "Corrigir" dentro do alerta vermelho: acento forte (escuro 5,67:1 sobre #3b0a17; o acento comum dava 3,47:1). */
.sb-alerta-perigo .sb-link-mini { color: var(--sb-acento-forte); }
/* Alvo de toque do "Corrigir" no celular (Hwei DT-0013). */
@media (max-width: 860px) { .sb-config-pendencias .sb-link-mini { min-height: var(--sb-toque, 44px); display: inline-flex; align-items: center; padding: 0 var(--sb-e-2); } }
.form-campo > .form-erro + .form-dica, .form-campo > .form-dica + .form-erro { margin-top: var(--sb-e-1); }

/* Aba "Modo de emissão" (EMIS1-M). Selos semânticos (.badge-ok/-alerta/-perigo)
   vêm do design system, seção 7. */
.sb-alerta-aviso { background: var(--sb-alerta-f); border-color: var(--sb-alerta); }

/* PRD-0013-b: no celular, a lista do aviso de pagamento empilha rótulo e valor (os valores são frases). */
@media (max-width: 480px) {
  .sb-config-aviso .sb-dl { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .sb-config-aviso .sb-dl dd { text-align: left; margin-bottom: var(--sb-e-3); }
  .sb-config-aviso .sb-dl dd:last-child { margin-bottom: 0; }
}

/* PRD-0013-b: links da lista de pendências herdam a cor do texto do alerta (contraste 17,24:1 claro / 12,96:1 escuro) e ganham sublinhado. */
.sb-config-aviso .sb-config-pendencias a { color: inherit; text-decoration: underline; overflow-wrap: anywhere; }
.sb-config-pendencias-orient { display: block; margin-top: var(--sb-e-2); }

/* A1: alvos de foco programático ("Ver pendências") ficam abaixo da barra fixa e com anel visível. */
#sb-cfg-aviso-pendencias, #sb-cfg-aviso-tit { scroll-margin-top: calc(var(--sb-topo-alt) + var(--sb-e-4)); }
/* Alvos de foco programático (tabindex=-1): anel só na navegação por teclado, nunca no clique do mouse. */
#sb-cfg-aviso-pendencias:focus, #sb-cfg-aviso-tit:focus, #sb-cfg-aviso-resultado:focus { outline: none; }
#sb-cfg-aviso-pendencias:focus-visible, #sb-cfg-aviso-tit:focus-visible, #sb-cfg-aviso-resultado:focus-visible {
  outline: 2px solid var(--sb-acento); outline-offset: 2px; border-radius: var(--sb-raio-p);
}

/* A2: no celular a lista aninhada perde o recuo (ocupava ~110 px) e a orientação vem depois dela. */
@media (max-width: 480px) {
  .sb-config-aviso .sb-config-pendencias-itens { padding-left: 0; list-style: none; }
  .sb-config-aviso .sb-config-pendencias-itens li { line-height: 1.35; }
}

/* LOTE-001 (DT-0012): saídas da configuração — inativar conta/convênio, descartar/rejeitar carteira.
   A saída da conta fica no fim da aba, separada por uma linha: longe do caminho comum. */
.sb-config-saida {
  margin-top: var(--sb-e-5); padding-top: var(--sb-e-4);
  border-top: 1px solid var(--sb-linha);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sb-e-2);
}
.sb-config-efeitos { margin: var(--sb-e-2) 0 var(--sb-e-3); padding-left: var(--sb-e-5); }
.sb-config-efeitos li + li { margin-top: var(--sb-e-1); }
@media (max-width: 860px) {
  .sb-config-saida .btn, .sb-config-conv-cab .btn { min-height: var(--sb-toque); }
}
@media (max-width: 480px) {
  .sb-config-saida .btn { width: 100%; }
}

.sb-emissao { display: flex; flex-direction: column; gap: var(--sb-e-4); }
.sb-emissao-topo {
  display: flex; align-items: center; gap: var(--sb-e-4);
  border-radius: var(--sb-raio-g); padding: var(--sb-e-4);
  border: 1px solid var(--sb-linha);
}
.sb-emissao-topo-sim     { background: var(--sb-neutro-f); }
.sb-emissao-topo-sandbox { background: var(--sb-alerta-f); border-color: var(--sb-alerta); }
.sb-emissao-topo-real    { background: var(--sb-perigo-f); border-color: var(--sb-perigo); }
.sb-emissao-num {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: var(--sb-raio);
  background: var(--sb-tinta); color: var(--sb-papel);
  font-size: var(--sb-t-20); font-weight: 700;
}
.sb-emissao-num-p { width: 28px; height: 28px; font-size: var(--sb-t-13); }
.sb-emissao-topo-txt { display: flex; flex-direction: column; gap: 2px; }
.sb-emissao-topo-txt b { font-size: var(--sb-t-16); }
.sb-emissao-topo-txt span { font-size: var(--sb-t-13); color: var(--sb-tinta-2); }

.sb-emissao-chaves { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sb-e-4); }
@media (max-width: 860px) { .sb-emissao-chaves { grid-template-columns: 1fr; } }
.sb-emissao-chave {
  border: 1px solid var(--sb-linha); border-radius: var(--sb-raio-g);
  padding: var(--sb-e-4); background: var(--sb-papel);
}
.sb-emissao-chave-tit { font-weight: 680; display: flex; align-items: center; gap: var(--sb-e-2); flex-wrap: wrap; margin-bottom: var(--sb-e-2); }
.sb-emissao-chave p { font-size: var(--sb-t-13); color: var(--sb-tinta-2); margin: 0 0 var(--sb-e-2); line-height: 1.5; }
.sb-emissao-acoes { display: flex; gap: var(--sb-e-2); flex-wrap: wrap; margin-top: var(--sb-e-2); }

.sb-emissao-mapa { border-top: 1px solid var(--sb-linha); padding-top: var(--sb-e-4); }
.sb-emissao-mapa-tit {
  font-size: var(--sb-t-11); font-weight: 700; color: var(--sb-tinta-3);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--sb-e-3);
}
.sb-emissao-modo {
  display: flex; gap: var(--sb-e-3); align-items: flex-start;
  padding: var(--sb-e-2) var(--sb-e-3); border-radius: var(--sb-raio);
}
.sb-emissao-modo-atual { background: var(--sb-acento-fraco); box-shadow: inset 0 0 0 1px var(--sb-acento); }
.sb-emissao-modo-txt { display: flex; flex-direction: column; gap: 1px; }
.sb-emissao-modo-txt b { font-size: var(--sb-t-13); }
.sb-emissao-modo-txt span { font-size: var(--sb-t-12); color: var(--sb-tinta-3); }
.sb-emissao-nota { font-size: var(--sb-t-12); color: var(--sb-tinta-3); margin-top: var(--sb-e-3); }

/* Habilitar banco (Hot Fix Demanda 2 / CFG2-M). */
.sb-hab-grupo-tit {
  font-size: var(--sb-t-11); font-weight: 700; color: var(--sb-tinta-3);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--sb-e-2);
}
.sb-hab-cartao { margin-bottom: var(--sb-e-3); }
.sb-hab-cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sb-e-2); flex-wrap: wrap;
}
.sb-hab-info {
  font-size: var(--sb-t-13); color: var(--sb-tinta-2);
  margin: var(--sb-e-2) 0; display: flex; flex-direction: column; gap: 2px;
}
.sb-hab-rot { color: var(--sb-tinta-3); font-weight: 600; }
.sb-hab-ja { color: var(--sb-ok); font-weight: 600; font-size: var(--sb-t-13); }

@media (max-width: 900px) {
  .sb-config-layout { grid-template-columns: 1fr; }
  .sb-config-arvore { position: static; max-height: none; }
}
@media (max-width: 860px) {
  /* Alvo de toque nos itens da coluna. Caixa de marcação já vem do DS. */
  .sb-config-conta, .sb-config-cart, .sb-config-voltar { min-height: var(--sb-toque); }

  /* Quatro rótulos longos não cabem espremidos a 1/4 da tela: a barra rola de
     lado. Escopo local — o app.css continua com .sb-aba{flex:1} (seção CELULAR)
     para as outras telas. */
  #sb-config-painel .sb-abas {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
  }
  #sb-config-painel .sb-aba { flex: 0 0 auto; }
}

/* PRD-3005 — cabeçalho vivo, grade agrupada, linha de banco e painéis (bloco único da PRD).
   Origem: maquete aprovada docs/mockups/configuracao-bancos/configuracao-v2.html (classes mq-* → sb-config-*),
   só tokens e classes do design system; duas correções da Técnica: contraste da ficha âmbar pressionada
   (a maquete dava 1,67:1 no escuro; agora 4,84:1 claro / 9,33:1 escuro) e regras de toque até 860 px. */
.sb-config-resumo {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-e-2) var(--sb-e-4);
  font-size: var(--sb-t-13); color: var(--sb-tinta-2);
}
.sb-config-resumo b { font-size: var(--sb-t-16); color: var(--sb-tinta); font-weight: 700; margin-right: 2px; }
.sb-config-sep { width: 1px; align-self: stretch; background: var(--sb-linha); }
.sb-ficha.sb-ficha-alerta { background: var(--sb-alerta-f); border-color: var(--sb-alerta); color: var(--sb-alerta); }
.sb-ficha.sb-ficha-alerta .sb-ficha-cont { background: var(--sb-papel); color: var(--sb-alerta); }
.sb-ficha.sb-ficha-alerta[aria-pressed="true"] { background: var(--sb-alerta); color: var(--sb-alerta-f); }
.sb-ficha.sb-ficha-alerta[aria-pressed="true"] .sb-ficha-cont { background: var(--sb-alerta-f); color: var(--sb-alerta); }
.sb-config-filtros { margin-bottom: var(--sb-e-3); padding: 0 var(--sb-e-2); }
.sb-config-filtros .sb-campo-busca { flex: 1 1 400px; max-width: 460px; }
.sb-config-status { margin-left: auto; font-size: var(--sb-t-12); color: var(--sb-tinta-3); }
.sb-config-status b { color: var(--sb-tinta-2); font-weight: 650; }
.sb-config-banco-lin { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sb-e-2) var(--sb-e-3); }
.sb-config-banco-lin .sb-nota { font-weight: 500; }
.sb-config-pront { display: inline-flex; align-items: center; gap: var(--sb-e-1); font-weight: 500; }
.sb-config-banco-acoes { margin-left: auto; display: flex; gap: var(--sb-e-2); flex-wrap: wrap; }
.sb-config-banco-acoes .sb-config-add { margin: 0; }
/* Drill-down (ajuste do dono, 07/11/2026): banco → contas → carteiras; o painel abre na linha de baixo.
   Seta = a mesma do seletor de empresa do topo (fechada aponta para a direita, aberta para baixo). */
.sb-config-clicavel { cursor: pointer; }
.sb-config-tabela > tbody > tr.sb-config-tr-banco:hover > td { background: var(--sb-neutro-f); }
.sb-config-seta { width: 16px; height: 16px; stroke-width: 2; flex: 0 0 auto; color: var(--sb-tinta-3); transform: rotate(-90deg); transition: transform var(--sb-mov); }
.sb-config-alternar[aria-expanded="true"] > .sb-config-seta { transform: none; }
.sb-config-banco-alt { display: inline-flex; align-items: center; gap: var(--sb-e-2); font-weight: 700; color: var(--sb-tinta); text-align: left; }
.sb-config-banco-alt:hover { color: var(--sb-acento-tinta); }
.sb-config-cel-conta.sb-config-alternar { flex-direction: row; align-items: center; gap: var(--sb-e-2); max-width: 320px; }
.sb-config-tabela > tbody > tr > td.sb-config-nivel-1 { padding-left: calc(var(--sb-e-3) + 24px); }
.sb-config-tabela > tbody > tr > td.sb-config-nivel-2 { padding-left: calc(var(--sb-e-3) + 48px); }
.sb-config-tabela > tbody > tr.sb-config-tr-conta > td.sb-config-nivel-1 .sb-config-selos { margin-left: 24px; }
.sb-config-tabela > tbody > tr.sb-config-tr-cart > td { border-bottom-style: dashed; }
.sb-config-cel-acao { text-align: right; white-space: nowrap; width: 1%; }
/* O rótulo invisível é absoluto: sem âncora aqui ele escapa da grade que rola e alarga a página no celular. */
.sb-config-th-acao { position: relative; }
/* Rolagem até a linha clicada: não deixa a linha atrás da barra fixa do topo. */
.sb-config-tabela > tbody > tr { scroll-margin-top: calc(var(--sb-topo-alt) + var(--sb-e-3)); }
.sb-config-tabela > tbody > tr.sb-config-tr-painel > td {
  padding: var(--sb-e-2) var(--sb-e-3) var(--sb-e-4) calc(var(--sb-e-3) + 24px);
  background: var(--sb-tela); cursor: auto; font-size: var(--sb-t-14);
}
.sb-config-tr-painel #sb-config-painel { box-shadow: inset 3px 0 0 var(--sb-acento); }
.sb-config-tabela > tbody > tr > td.sb-config-escondidas { padding: var(--sb-e-2) var(--sb-e-3); font-size: var(--sb-t-12); color: var(--sb-tinta-2); }
.sb-config-escondidas .sb-link-mini, .sb-config-ramo-vazio .sb-link-mini { margin-left: var(--sb-e-3); }
.sb-config-meio { display: block; font-size: var(--sb-t-12); color: var(--sb-tinta-3); font-weight: 500; }
.sb-config-cart-lin { display: flex; align-items: center; gap: var(--sb-e-2); flex-wrap: wrap; }
.sb-config-tabela > thead > tr > th .sb-ajuda { margin-left: 2px; }
.sb-config-teto-cel { display: inline-flex; align-items: center; gap: var(--sb-e-1); }
.sb-config-uso-num { font-size: var(--sb-t-14); font-weight: 650; }
.sb-config-lista-cart { display: flex; flex-direction: column; gap: var(--sb-e-1); }
.sb-config-lista-cart .sb-config-cart-txt { flex-direction: column; align-items: flex-start; gap: 0; }
.sb-config-bloco { margin-bottom: var(--sb-e-4); }
.sb-config-bloco > h3 + * { margin-top: var(--sb-e-3); }
.sb-config-bloco > h3 + .form-dica { margin-top: var(--sb-e-1); margin-bottom: var(--sb-e-3); }
.sb-config-pix { display: inline-flex; align-items: center; gap: var(--sb-e-1); }
@media (max-width: 860px) {
  .sb-config-status, .sb-config-banco-acoes, #sb-config-painel .sb-config-cab-dir { margin-left: 0; width: 100%; }
  .sb-config-banco-acoes .btn, #sb-config-painel .sb-config-cab-dir .btn, .sb-config-acoes .btn, .sb-config-tabela > tbody > tr > td > .sb-link-mini, .sb-config-escondidas-lin .sb-link-mini { min-height: var(--sb-toque); }
  .sb-config-tabela > tbody > tr > td > .sb-link-mini, .sb-config-escondidas-lin .sb-link-mini { display: inline-flex; align-items: center; padding: 0 var(--sb-e-2); }
  /* linha do banco e "N contas escondidas" não somem à direita dentro da grade que rola: presas à
     esquerda, com a largura da tela, quebrando linha (A4). */
  .sb-config-banco-lin, .sb-config-escondidas-lin { position: sticky; left: 0; max-width: calc(100vw - 64px); }
  /* O painel aberto dentro da grade que rola de lado fica preso à esquerda, na largura da tela. */
  .sb-config-tr-painel #sb-config-painel { position: sticky; left: 0; max-width: calc(100vw - 64px); }
  .sb-config-tabela > tbody > tr.sb-config-tr-painel > td { padding-left: var(--sb-e-2); padding-right: var(--sb-e-2); }
  .sb-config-escondidas-lin { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--sb-e-1); }
  .sb-config-escondidas .sb-config-escondidas-lin .sb-link-mini { margin-left: 0; }
  /* alvo de toque dos botões de conta e de carteira da grade (A4; o botão já centra o texto na altura) */
  .sb-config-cel-conta, .sb-config-cel-cart { min-height: var(--sb-toque); }
  .sb-config-cel-conta { justify-content: center; }
}

/* ── Tela: operações bancárias ────────────────────────────────────────────── */
/* Faixa de resumo do dia (OPB1, modelo B aprovado pelo dono). */
.sb-op-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sb-e-3); margin-bottom: var(--sb-e-4); }
.sb-op-card { border: 1px solid var(--sb-linha); border-radius: var(--sb-raio-g); padding: var(--sb-e-3) var(--sb-e-4); background: var(--sb-papel); }
.sb-op-num { font-size: var(--sb-t-26); font-weight: 700; letter-spacing: -.02em; }
.sb-op-rot { font-size: var(--sb-t-12); color: var(--sb-tinta-3); font-weight: 600; }
.sb-op-extra { font-size: var(--sb-t-11); color: var(--sb-tinta-3); margin-top: 2px; }
.sb-op-perigo .sb-op-num { color: var(--sb-perigo); }
.sb-op-alerta .sb-op-num { color: var(--sb-alerta); }
.sb-op-ok .sb-op-num { color: var(--sb-ok); }

/* Barra de abas: numa linha só e rola de lado quando não cabe (mesmo idioma da Configuração).
   A linha de base é sombra interna (não borda): com overflow-x a borda da aba ativa ficaria
   cortada; assim o sublinhado de 2px da aba ativa cobre a linha de base, sem degrau. */
.sb-op-abas {
  display: flex; gap: 2px; margin-bottom: var(--sb-e-3);
  flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
  box-shadow: inset 0 -1px 0 var(--sb-linha-forte);
}
.sb-op-aba {
  flex: 0 0 auto; white-space: nowrap;
  padding: 8px 14px; font-size: var(--sb-t-13); font-weight: 600; color: var(--sb-tinta-2);
  background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; min-height: var(--sb-toque);
}
.sb-op-aba[aria-selected="true"] { color: var(--sb-acento); border-bottom-color: var(--sb-acento); }

/* Pendências (OPB2-M / PRD5 fatia 2): fila de trabalho.
   Mockup aprovado: docs/mockups/prd5-fatia2-pendencias.html */
.sb-pend-filtro { display: flex; justify-content: flex-end; margin-bottom: var(--sb-e-2); }
.sb-pend-acoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sb-link-mini {
  background: none; border: none; padding: 0; font-size: var(--sb-t-12); color: var(--sb-acento);
  text-decoration: underline; cursor: pointer; min-height: 0;
}
/* Destaque imediato da pendência NOVA (DEC-OPB-006) — faixa âmbar + borda esquerda. */
.sb-pend-nova td { background: color-mix(in srgb, var(--sb-alerta-f) 55%, transparent); }
.sb-pend-nova td:first-child { box-shadow: inset 3px 0 0 var(--sb-alerta); }
.sb-cartao-linha.sb-pend-nova {
  background: color-mix(in srgb, var(--sb-alerta-f) 55%, transparent);
  box-shadow: inset 3px 0 0 var(--sb-alerta);
}
/* Modal "Encerrar pendência": desfecho sempre com título + descrição. */
.sb-pend-radios { display: grid; gap: var(--sb-e-2); margin: var(--sb-e-2) 0; }
.sb-pend-radio {
  display: flex; gap: 10px; align-items: flex-start; padding: var(--sb-e-3);
  border: 1px solid var(--sb-linha); border-radius: var(--sb-raio); font-size: var(--sb-t-13); cursor: pointer;
}
.sb-pend-radio input { margin-top: 2px; }

/* PAG1-M (achados C1, C3, C8 da revisão): fieldset sem a borda nativa que cortava a legenda;
   selo em célula dupla com a largura do próprio texto; campo de dias da quarentena curto. */
fieldset.sb-pend-radios { border: 0; padding: 0; min-width: 0; }
fieldset.sb-pend-radios > legend { padding: 0; margin-bottom: var(--sb-e-2); }
.sb-cel-dupla > .badge, .sb-pag-pend > .badge { align-self: flex-start; }
/* Detalhe embaixo da etiqueta: começa onde começa o TEXTO da etiqueta
   (recuo 9px + bolinha 6px + espaço 5px), não na borda da célula. */
.sb-cel-dupla > .badge + span { padding-left: 20px; margin-top: 2px; }
#sb-cfg-qua-dias { max-width: 8rem; }
.sb-pag-comprovante { white-space: pre-wrap; overflow-wrap: anywhere; }

/* PAG1-M ciclo 2 (Hwei): alvos de toque ≥ 24px (WCAG 2.5.8) e respiros. */
/* Nº interno na lista: o link vira um alvo de 24px de altura, não só a linha de texto. */
.sb-link-alvo { display: inline-block; min-height: 24px; line-height: 24px; }
/* Desfecho/estorno/encerrar pendência: o círculo do radio com 24px de área. */
.sb-pend-radio input { width: 24px; height: 24px; margin: 0; flex: 0 0 auto; accent-color: var(--sb-acento); }
/* Texto do cartão centrado na altura do rádio de 24px (1ª linha). */
.sb-pend-radio > span { padding-top: calc((24px - 1lh) / 2); }
/* Caixas de marcação da esteira e da quarentena (Configuração). */
.sb-config-esteira .sb-check-linha input,
.sb-config-quarentena .sb-check-linha input { width: 24px; height: 24px; }
/* "Desfecho"/"Tipo de estorno" logo abaixo do quadro de valores: o .sb-pend-radios (margem curta)
   vencia o .sb-config-mt e colava o rótulo na linha de cima. */
fieldset.sb-pend-radios.sb-config-mt { margin-top: var(--sb-e-5); }
/* Aviso de tarefa vencida no topo da gaveta: separado do quadro "Divergência". */
.sb-tc-aviso-topo { margin-bottom: var(--sb-e-4); }
/* Coluna "Dono": "desde 10/10" numa linha só. */
.sb-nowrap { white-space: nowrap; }

/* ═══════════════════════ MANUAL (manual.html + fragmentos) ═════════════════
   Casca do manual navegável (índice + seção) e o vocabulário dos fragmentos
   em manual/secoes/<id>.html: .man-resumo, .man-caminho, figure.man-fig,
   ol.man-passos, .man-nota, table.man-tabela. Só token, claro e escuro.
   ═════════════════════════════════════════════════════════════════════════ */
.man-layout {
  display: grid; grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--sb-e-5); align-items: start;
}
.man-indice {
  position: sticky; top: calc(var(--sb-topo-alt) + var(--sb-e-5));
  /* mesma folga em cima e embaixo — antes sobravam só 8px e o fim parecia cortado */
  max-height: calc(100vh - var(--sb-topo-alt) - 2 * var(--sb-e-5));
  display: flex; flex-direction: column; gap: var(--sb-e-3);
  background: var(--sb-papel); border: 1px solid var(--sb-linha);
  border-radius: var(--sb-raio-g); box-shadow: var(--sb-sombra);
  padding: var(--sb-e-3);
}
.man-indice .sb-campo-busca { max-width: none; min-width: 0; flex: 0 0 auto; }
.man-busca-status { padding: 0 var(--sb-e-2); }
.man-busca-status:empty { display: none; }
.man-indice-alternar { display: none; }
.man-indice-lista { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding-bottom: var(--sb-e-2); }
.man-grupo + .man-grupo { margin-top: var(--sb-e-3); }
.man-grupo-tit {
  font-size: var(--sb-t-11); font-weight: 600; color: var(--sb-tinta-3);
  text-transform: uppercase; letter-spacing: .07em; padding: var(--sb-e-1) var(--sb-e-2);
}
.man-grupo ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.man-item {
  display: block; padding: 7px var(--sb-e-2); border-radius: var(--sb-raio-p);
  color: var(--sb-tinta-2); text-decoration: none; font-size: var(--sb-t-13); font-weight: 500;
  transition: background var(--sb-mov), color var(--sb-mov);
}
.man-item:hover { background: var(--sb-neutro-f); color: var(--sb-tinta); }
.man-item[aria-current="true"] {
  background: var(--sb-acento-fraco); color: var(--sb-acento-tinta); font-weight: 650;
  box-shadow: inset 2px 0 0 var(--sb-acento);
}
.man-item-trecho { display: block; margin-top: 2px; font-size: var(--sb-t-12); color: var(--sb-tinta-3); font-weight: 400; }
.man-item mark, .man-corpo mark.man-achado {
  background: var(--sb-alerta-f); color: inherit; box-shadow: inset 0 -2px 0 var(--sb-alerta); border-radius: 2px;
}

.man-artigo { padding: var(--sb-e-6); max-width: 920px; min-width: 0; }
.man-artigo > h2 {
  font-size: var(--sb-t-26); font-weight: 680; margin-bottom: var(--sb-e-1);
  scroll-margin-top: calc(var(--sb-topo-alt) + var(--sb-e-4));
}
.man-artigo > h2:focus { outline: none; }
/* O título só recebe foco para o leitor de tela anunciar a seção; não é clicável, então sem contorno. */
.man-artigo > h2:focus-visible { outline: none; }
.man-grupo-rot { font-size: var(--sb-t-12); font-weight: 600; color: var(--sb-tinta-3); margin-bottom: var(--sb-e-5); }

/* Texto corrido do fragmento: leitura confortável, medida de linha limitada. */
.man-corpo { font-size: var(--sb-t-14); line-height: 1.65; color: var(--sb-tinta); overflow-wrap: break-word; }
.man-corpo > * + * { margin-top: var(--sb-e-4); }
.man-corpo p, .man-corpo li { max-width: 72ch; }
.man-corpo h3 {
  font-size: var(--sb-t-16); font-weight: 650; margin-top: var(--sb-e-6);
  padding-top: var(--sb-e-4); border-top: 1px solid var(--sb-linha);
  scroll-margin-top: calc(var(--sb-topo-alt) + var(--sb-e-4));
}
.man-corpo h3 + * { margin-top: var(--sb-e-3); }
.man-corpo h4 { font-size: var(--sb-t-14); font-weight: 650; }
.man-corpo ul:not([class]), .man-corpo ol:not([class]) { padding-left: var(--sb-e-5); }
.man-corpo li + li { margin-top: var(--sb-e-1); }
.man-corpo code { font-family: var(--sb-mono); font-size: var(--sb-t-12); background: var(--sb-neutro-f); padding: 1px 5px; border-radius: 4px; }
.man-corpo img { max-width: 100%; height: auto; }

.man-resumo {
  font-size: var(--sb-t-16); line-height: 1.6; color: var(--sb-tinta-2);
  padding: var(--sb-e-3) var(--sb-e-4); background: var(--sb-acento-fraco);
  border-radius: var(--sb-raio); box-shadow: inset 3px 0 0 var(--sb-acento);
}
.man-corpo .man-resumo { max-width: none; }
.man-caminho {
  font-size: var(--sb-t-12); color: var(--sb-tinta-3); font-weight: 550;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-e-1);
}
.man-caminho b, .man-caminho strong { color: var(--sb-tinta-2); font-weight: 650; }

figure.man-fig {
  margin: var(--sb-e-5) 0; border: 1px solid var(--sb-linha); border-radius: var(--sb-raio-g);
  background: var(--sb-tela); box-shadow: var(--sb-sombra); overflow: hidden;
}
figure.man-fig img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--sb-linha); }
figure.man-fig img:focus-visible { outline: 2px solid var(--sb-acento); outline-offset: -2px; border-radius: 0; }
figure.man-fig figcaption {
  padding: var(--sb-e-2) var(--sb-e-4); font-size: var(--sb-t-12);
  color: var(--sb-tinta-2); background: var(--sb-papel); line-height: 1.5;
}
.man-corpo img[data-man-zoom] { cursor: zoom-in; }

ol.man-passos { list-style: none; counter-reset: man-passo; padding: 0; }
ol.man-passos > li {
  counter-increment: man-passo; position: relative;
  padding-left: 40px; min-height: 28px; padding-top: 3px;
}
ol.man-passos > li + li { margin-top: var(--sb-e-3); }
ol.man-passos > li::before {
  content: counter(man-passo); position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: var(--sb-raio-pill);
  display: grid; place-items: center;
  background: var(--sb-acento-fraco); color: var(--sb-acento-tinta);
  font-size: var(--sb-t-13); font-weight: 700; line-height: 1;
}

.man-nota {
  position: relative; padding: var(--sb-e-3) var(--sb-e-4) var(--sb-e-3) 44px;
  background: var(--sb-info-f); border: 1px solid var(--sb-info); border-radius: var(--sb-raio);
  font-size: var(--sb-t-13); line-height: 1.55;
}
.man-corpo .man-nota { max-width: none; }
/* Ícone de informação (círculo + "i") em SVG via máscara: herda a cor do token. */
.man-nota::before {
  content: ""; position: absolute; left: var(--sb-e-4); top: 14px;
  width: 18px; height: 18px; background: var(--sb-info);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5h.01'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.man-nota > * + * { margin-top: var(--sb-e-2); }

/* Tabela: rola por dentro no celular, nunca a página. O JS envolve cada
   table.man-tabela num .man-tabela-rolo (tabindex=0, para rolar pelo teclado). */
.man-tabela-rolo { overflow-x: auto; max-width: 100%; border: 1px solid var(--sb-linha); border-radius: var(--sb-raio); }
table.man-tabela { width: 100%; border-collapse: collapse; font-size: var(--sb-t-13); line-height: 1.5; }
table.man-tabela th {
  text-align: left; padding: var(--sb-e-2) var(--sb-e-3); white-space: nowrap;
  font-size: var(--sb-t-12); font-weight: 650; color: var(--sb-tinta-2);
  background: var(--sb-tela); border-bottom: 1px solid var(--sb-linha-forte);
}
table.man-tabela td { padding: var(--sb-e-2) var(--sb-e-3); border-bottom: 1px solid var(--sb-linha); vertical-align: top; min-width: 12ch; }
table.man-tabela tbody tr:nth-child(even) td { background: var(--sb-tela); }
table.man-tabela tbody tr:last-child td { border-bottom: 0; }

/* Anterior / Próxima no fim da seção. */
.man-paginacao {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sb-e-3);
  margin-top: var(--sb-e-7); padding-top: var(--sb-e-5); border-top: 1px solid var(--sb-linha);
}
.man-pag {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: var(--sb-e-3) var(--sb-e-4); border: 1px solid var(--sb-linha-forte);
  border-radius: var(--sb-raio); text-decoration: none; color: var(--sb-tinta);
  transition: border-color var(--sb-mov), background var(--sb-mov);
}
.man-pag:hover { border-color: var(--sb-acento); background: var(--sb-acento-fraco); }
.man-pag-rot { font-size: var(--sb-t-12); color: var(--sb-tinta-3); font-weight: 600; }
.man-pag-tit { font-weight: 650; overflow-wrap: anywhere; }
.man-pag-prox { grid-column: 2; text-align: right; }

/* Lightbox: imagem ampliada, fecha com Esc, clique fora ou no X. */
.man-lightbox {
  position: fixed; inset: 0; z-index: var(--sb-z-dialogo);
  background: rgba(15, 23, 41, .82);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sb-e-3); padding: var(--sb-e-7) var(--sb-e-5) var(--sb-e-5);
  animation: sb-surge 160ms ease;
}
.man-lightbox img {
  max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain;
  border-radius: var(--sb-raio); box-shadow: var(--sb-sombra-g); background: var(--sb-papel);
}
.man-lightbox-legenda { color: #fff; font-size: var(--sb-t-13); text-align: center; max-width: 72ch; }
.man-lightbox-fechar {
  position: absolute; top: var(--sb-e-3); right: var(--sb-e-3);
  width: var(--sb-toque); height: var(--sb-toque); border-radius: var(--sb-raio-pill);
  display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .14);
}
.man-lightbox-fechar:hover { background: rgba(255, 255, 255, .26); }
.man-lightbox-fechar svg { width: 20px; height: 20px; stroke-width: 2; }
.man-lightbox-fechar:focus-visible { outline-color: #fff; border-radius: var(--sb-raio-pill); }

/* Botão flutuante de ajuda ("?") em todas as telas logadas, menos o manual.
   z-index abaixo do fundo da gaveta e do diálogo; com modal, gaveta, paleta
   ou modal-funil abertos ele some de vez. */
.sb-ajuda-fab {
  position: fixed; right: var(--sb-e-5); bottom: var(--sb-e-5); z-index: 90;
  width: 40px; height: 40px; border-radius: var(--sb-raio-pill);
  display: grid; place-items: center;
  background: var(--sb-papel); color: var(--sb-acento-tinta);
  border: 1px solid var(--sb-linha-forte); box-shadow: var(--sb-sombra-g);
  transition: background var(--sb-mov), color var(--sb-mov), border-color var(--sb-mov);
}
.sb-ajuda-fab:hover { background: var(--sb-acento); color: #fff; border-color: var(--sb-acento); }
.sb-ajuda-fab svg { width: 20px; height: 20px; stroke-width: 1.9; }
.sb-ajuda-fab:focus-visible { border-radius: var(--sb-raio-pill); }
body:has(.sb-modal-overlay) .sb-ajuda-fab,
body:has(.sb-gaveta) .sb-ajuda-fab,
body:has(#sb-funil-motivo) .sb-ajuda-fab,
body:has(.sb-paleta-fundo) .sb-ajuda-fab { display: none; }

@media (max-width: 1100px) {
  .man-layout { grid-template-columns: 220px minmax(0, 1fr); }
  .man-artigo { padding: var(--sb-e-5); }
}

@media (max-width: 860px) {
  .man-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sb-e-4); }
  .man-indice { position: static; max-height: none; }
  .man-indice .sb-campo-busca input { min-height: var(--sb-toque); }
  .man-indice-alternar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sb-e-2);
    width: 100%; min-height: var(--sb-toque); padding: 0 var(--sb-e-3);
    border: 1px solid var(--sb-linha-forte); border-radius: var(--sb-raio-p);
    font-weight: 600; text-align: left;
  }
  .man-indice-alternar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .man-indice-alternar svg { width: 18px; height: 18px; stroke-width: 2; flex: 0 0 auto; transition: transform var(--sb-mov); }
  .man-indice-alternar[aria-expanded="true"] svg { transform: rotate(180deg); }
  .man-indice:not(.man-aberto) .man-indice-lista { display: none; }
  .man-item { min-height: var(--sb-toque); display: flex; flex-direction: column; justify-content: center; }
  .man-artigo { padding: var(--sb-e-4); }
  .man-artigo > h2 { font-size: var(--sb-t-20); }
  .man-paginacao { grid-template-columns: minmax(0, 1fr); }
  .man-pag-prox { grid-column: 1; }
  .man-pag { min-height: var(--sb-toque); }
  .man-lightbox { padding: var(--sb-e-7) var(--sb-e-2) var(--sb-e-3); }

  /* Acima da barra inferior (52px + área segura), sem cobrir os itens dela. */
  .sb-ajuda-fab {
    width: var(--sb-toque); height: var(--sb-toque);
    right: var(--sb-e-3); bottom: calc(52px + env(safe-area-inset-bottom) + var(--sb-e-3));
  }
  /* Espaço extra no fim da página para o botão não cobrir a última ação. */
  body.sb-com-ajuda .sb-conteudo { padding-bottom: 136px; }
}

/* Âncora de rolagem dentro da página: não para atrás do topo fixo. */
.sb-ancora { scroll-margin-top: calc(var(--sb-topo-alt) + var(--sb-e-4)); }
/* Destaque breve ao levar o usuário até uma área da mesma página (ex.: Modelos da fábrica). */
@keyframes sbDestaqueBreve {
  0%   { box-shadow: 0 0 0 0 var(--sb-acento); background-color: var(--sb-lateral-ativo); }
  100% { box-shadow: 0 0 0 10px transparent; background-color: transparent; }
}
.sb-destaque-breve { border-radius: var(--sb-raio); animation: sbDestaqueBreve 1.6s ease-out; }
@media (prefers-reduced-motion: reduce) { .sb-destaque-breve { animation: none; } }

/* LOTE-001 corr1: aviso da confirmação reforçada no modal de inativar. */
#sb-cfg-saida-aviso { margin: 0 0 var(--sb-e-3); }

/* ═══════ IDENTIDADE (PRD-0017) ═══════════════════════════════════════════
   Peças compartilhadas do login e da gestão de acessos (publicadas no app.js):
   caixinhas de código, reautenticação empilhada, códigos de recuperação, menu
   de ações, regras de senha, sessões e passos. Só token — o que é exclusivo do
   login (.sb-login-larga, .sb-qr, .sb-chave…) mora em login-acesso.css.
   ═════════════════════════════════════════════════════════════════════════ */

/* (a) Caixinhas de 6 dígitos. Borda --sb-tinta-3 (5,30:1 / 4,79:1 no escuro):
   --sb-linha-forte daria 1,43:1 e reprovaria o WCAG 1.4.11. */
.sb-codigo6-rotulo { font-size: var(--sb-t-13); font-weight: 600; color: var(--sb-tinta); margin-bottom: var(--sb-e-2); }
.sb-codigo6 {
  display: grid; grid-template-columns: repeat(6, minmax(0, 48px));
  gap: var(--sb-e-2); justify-content: center;
}
.sb-codigo6-dig {
  width: 100%; height: 52px; min-width: 0; padding: 0; text-align: center;
  font: 600 var(--sb-t-20)/1 var(--sb-mono);
  border: 1px solid var(--sb-tinta-3); border-radius: var(--sb-raio);
  background: var(--sb-papel); color: var(--sb-tinta);
}
.sb-codigo6-dig:focus { outline: 2px solid var(--sb-acento); outline-offset: 1px; border-color: var(--sb-acento); }
.sb-codigo6[data-erro] .sb-codigo6-dig { border-color: var(--sb-perigo); }
.sb-codigo6-dig:disabled { background: var(--sb-neutro-f); color: var(--sb-tinta-3); }
.sb-codigo6 + .form-erro { justify-content: center; text-align: center; margin-top: var(--sb-e-2); }
@media (max-width: 420px) {
  .sb-codigo6 { gap: 6px; }
  .sb-codigo6-dig { height: 48px; font-size: var(--sb-t-16); }
}

/* (b) Reautenticação: overlay EMPILHADO sobre o modal aberto (abaixo da paleta
   e do funil/aviso). */
.sb-reauth-overlay { z-index: calc(var(--sb-z-dialogo) + 5); }
.sb-reauth { max-width: 440px; }
.sb-reauth .sb-modal-corpo { display: flex; flex-direction: column; gap: var(--sb-e-4); }

/* (c) Códigos de recuperação. */
.sb-codrec {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sb-e-2) var(--sb-e-4); padding: var(--sb-e-4); margin: 0;
  background: var(--sb-neutro-f); border-radius: var(--sb-raio);
  font: 500 var(--sb-t-14) var(--sb-mono); color: var(--sb-tinta);
  list-style-position: inside;
}
.sb-codrec li { overflow-wrap: anywhere; }
/* A lista recebe foco só por programa (para o leitor de tela começar nela); não é clicável, sem contorno. */
.sb-codrec:focus, .sb-codrec:focus-visible { outline: none; }
.sb-codrec-acoes { display: flex; flex-wrap: wrap; gap: var(--sb-e-2); margin-top: var(--sb-e-3); }
.sb-codrec-retorno { margin-top: var(--sb-e-2); min-height: 1lh; }

/* (e) Menu de ações — portal no <body>, posicionado pelo gatilho. */
.sb-menu-acoes {
  position: fixed; z-index: calc(var(--sb-z-fundo) - 10);
  min-width: 220px; max-width: min(320px, calc(100vw - var(--sb-e-4)));
  padding: var(--sb-e-1); display: flex; flex-direction: column;
  background: var(--sb-papel); border: 1px solid var(--sb-linha);
  border-radius: var(--sb-raio); box-shadow: var(--sb-sombra-g);
}
.sb-menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sb-e-3);
  width: 100%; min-height: var(--sb-toque); padding: var(--sb-e-2) var(--sb-e-3);
  text-align: left; border-radius: var(--sb-raio-p);
  font-size: var(--sb-t-14); color: var(--sb-tinta);
}
.sb-menu-item:hover:not([aria-disabled="true"]) { background: var(--sb-neutro-f); }
.sb-menu-item > svg { width: 16px; height: 16px; flex: 0 0 auto; stroke-width: 1.8; color: var(--sb-tinta-3); }
.sb-menu-txt { display: flex; flex-direction: column; min-width: 0; }
.sb-menu-nota { font-size: var(--sb-t-12); color: var(--sb-tinta-3); }
.sb-menu-perigo { color: var(--sb-perigo); }
.sb-menu-perigo > svg { color: var(--sb-perigo); }
.sb-menu-item[aria-disabled="true"] { color: var(--sb-tinta-3); cursor: not-allowed; }
.sb-menu-sep { border: 0; border-top: 1px solid var(--sb-linha); margin: var(--sb-e-1) 0; }

/* Menu da conta: o avatar virou botão. No celular ele entra no topo (44×44). */
.sb-avatar-btn { cursor: pointer; transition: box-shadow var(--sb-mov); }
.sb-avatar-btn:hover, .sb-avatar-btn[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--sb-acento); }
.sb-topo-dir > .sb-avatar-btn.sb-so-mob { display: none; }
@media (max-width: 860px) {
  .sb-topo-dir > .sb-avatar-btn.sb-so-mob {
    display: grid; width: var(--sb-toque); height: var(--sb-toque); font-size: var(--sb-t-13);
  }
}

/* Regras da senha ao vivo (✓ / ○ em SVG + texto). */
.sb-regras-senha { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sb-e-1); }
.sb-regras-senha li { display: flex; align-items: center; gap: var(--sb-e-2); font-size: var(--sb-t-13); color: var(--sb-tinta-3); }
.sb-regras-senha li svg { width: 14px; height: 14px; flex: 0 0 auto; stroke-width: 2.2; }
.sb-regras-senha li.sb-regra-ok { color: var(--sb-ok); }

/* Minhas sessões. */
.sb-sessoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sb-sessao {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sb-e-3);
  padding: var(--sb-e-3) 0; border-bottom: 1px solid var(--sb-linha);
}
.sb-sessao:last-child { border-bottom: 0; }
.sb-sessao-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sb-sessao-agente { overflow-wrap: anywhere; }
.sb-sessoes-unica { margin-top: var(--sb-e-2); }
.sb-sessoes-dica { margin-top: var(--sb-e-4); }
#sb-conta-sessoes .sb-alerta + .btn { margin-top: var(--sb-e-3); }
#sb-conta-sessoes-msg { margin-bottom: var(--sb-e-3); }

/* Passos do 1º acesso (1 Aplicativo · 2 Confirmar · 3 Recuperação). */
.sb-passos {
  list-style: none; margin: 0 0 var(--sb-e-5); padding: 0;
  display: flex; gap: var(--sb-e-2); flex-wrap: wrap;
  font-size: var(--sb-t-12); font-weight: 600; color: var(--sb-tinta-3);
  counter-reset: sb-passo;
}
.sb-passos li { display: flex; align-items: center; gap: var(--sb-e-1); counter-increment: sb-passo; }
.sb-passos li::before {
  content: counter(sb-passo); width: 20px; height: 20px; border-radius: var(--sb-raio-pill);
  display: grid; place-items: center; background: var(--sb-neutro-f); color: var(--sb-tinta-3);
}
.sb-passos li[aria-current="step"] { color: var(--sb-acento-tinta); }
.sb-passos li[aria-current="step"]::before { background: var(--sb-acento); color: #fff; }

/* Formulários da conta (Trocar senha, Novos códigos). */
.sb-conta-form { display: flex; flex-direction: column; gap: var(--sb-e-4); }
.sb-conta-lead { margin-bottom: var(--sb-e-4); }
.sb-conta-guardei { margin-top: var(--sb-e-4); }
.sb-conta-aviso { margin-top: var(--sb-e-3); }
.sb-conta-aviso-corpo { display: flex; flex-direction: column; gap: var(--sb-e-2); min-width: 0; }
.sb-conta-aviso-acoes { display: flex; flex-wrap: wrap; gap: var(--sb-e-2); }
#sb-nc-erro { margin-top: var(--sb-e-3); }

@media (max-width: 860px) {
  .sb-codrec-acoes .btn, .sb-conta-aviso-acoes .btn, .sb-sessao .btn { min-height: var(--sb-toque); }
  .sb-sessao { flex-wrap: wrap; }
}

/* ═════════ PRD-0018 — modo suporte (faixa, menu da conta) e troca de empresa ═════════
   Só tokens existentes. Contraste: papel sobre alerta 5.02:1 (claro) · 10.82:1 (escuro). */
:root { --sb-faixa-alt: 44px; }
.sb-faixa-suporte {
  position: sticky; top: 0; z-index: calc(var(--sb-z-topo) + 5);
  display: flex; align-items: center; gap: var(--sb-e-3); min-height: var(--sb-faixa-alt);
  padding: var(--sb-e-1) var(--sb-e-6); background: var(--sb-alerta); color: var(--sb-papel); font-size: var(--sb-t-14);
}
.sb-faixa-suporte svg { width: 18px; height: 18px; stroke-width: 2; flex: 0 0 auto; }
.sb-faixa-txt { flex: 1 1 auto; min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-faixa-suporte .btn { background: var(--sb-papel); color: var(--sb-tinta); border-color: transparent; flex: 0 0 auto; }
.sb-faixa-suporte .btn:focus-visible { outline: 2px solid var(--sb-papel); outline-offset: 2px; }
.sb-faixa-selo {
  display: inline-block; margin-right: var(--sb-e-2); padding: 0 var(--sb-e-2);
  border-radius: var(--sb-raio-pill); background: var(--sb-papel); color: var(--sb-alerta); font-weight: 700;
}
.sb-faixa-selo[hidden] { display: none; }
.sb-em-suporte .sb-lateral { top: var(--sb-faixa-alt); height: calc(100vh - var(--sb-faixa-alt)); }
.sb-em-suporte .sb-topo { top: var(--sb-faixa-alt); }
@media (max-width: 1279px) { .sb-faixa-extra { display: none; } }
@media (max-width: 860px) {
  .sb-faixa-suporte { flex-wrap: wrap; padding: var(--sb-e-2) var(--sb-e-4); }
  .sb-faixa-txt { white-space: normal; flex-basis: calc(100% - 30px); }
  .sb-faixa-suporte .btn { width: 100%; min-height: var(--sb-toque); justify-content: center; }
  .sb-em-suporte .sb-topo { position: static; }
}

/* Menu da conta em modo suporte: cabeçalho informativo (não focável). */
.sb-menu-conta-suporte {
  padding: var(--sb-e-3); border-bottom: 1px solid var(--sb-linha);
  display: flex; flex-direction: column; gap: var(--sb-e-1); font-size: var(--sb-t-13);
}
.sb-menu-conta-suporte strong { overflow-wrap: anywhere; }

/* Chip da empresa: selo "Suporte" e versão em botão (9+ empresas, painel com busca). */
.sb-topo-empresa-selo { flex: 0 0 auto; }
button.sb-topo-empresa { font: inherit; color: inherit; text-align: left; }
.sb-menu-empresas { width: 300px; }
.sb-menu-empresas .sb-campo-busca { max-width: none; min-width: 0; margin: var(--sb-e-1) 0 var(--sb-e-2); }
.sb-menu-empresas-lista { max-height: min(320px, 50vh); overflow-y: auto; display: flex; flex-direction: column; }
.sb-menu-empresas .sb-menu-item[aria-current="true"] { background: var(--sb-acento-fraco); }
.sb-menu-vazio { margin: 0; padding: var(--sb-e-3); }
@media (max-width: 860px) {
  .sb-topo-empresa-selo { display: none; }
  .sb-menu-empresas .sb-campo-busca input { min-height: var(--sb-toque); }
}
@media print { .sb-faixa-suporte { position: static; } }

/* PRD-3003: parceiro por CNPJ, troca de parceiro e linha do filtro ativo. */
.sb-nota-parceiro { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-e-1) var(--sb-e-2); margin-bottom: var(--sb-e-3); overflow-wrap: anywhere; }
.sb-nota-parceiro strong { color: var(--sb-tinta); font-weight: 600; }
.sb-cli-parceiro-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.sb-troca-parc-atual { margin-bottom: var(--sb-e-3); overflow-wrap: anywhere; }
#sb-troca-parc-a1 { margin-bottom: var(--sb-e-3); }
#sb-parceiro-conteudo dd, .sb-trilha-d { overflow-wrap: anywhere; }
@media (max-width: 860px) {
  .sb-nota-parceiro .btn, #sb-btn-trocar-parceiro { min-height: var(--sb-toque); }
  .sb-cli-ficha-abas { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; }
  .sb-cli-ficha-abas .sb-aba { flex: 0 0 auto; white-space: nowrap; }
}