/* =====================================================================================
   Atendimento Web (base herdada do Financeiro Pro) — FUNDAÇÃO: tokens, casca e componentes globais
   Uma família só (Roboto, variável 400..700 — CONTRATOS §5; o tema.css vem antes e manda nas cores). Nada de caixa alta, nada de monoespaçada, nada abaixo de 12 px.
   Fundo cinza claríssimo + superfícies brancas encostadas separadas por FIO de 1 px. Sombra só onde há
   sobreposição de verdade (menu, modal, gaveta, toast). Números com tabular-nums. Sem mascote.
   Este arquivo é do DESIGN LEAD — estilo específico de tela vai no <style id="estilo-tela-…"> da própria tela.

   ┌───────────────────────────────────────────────────────────────────────────────────────────────┐
   │ CATÁLOGO DE CLASSES — o que existe e quando usar (nomes antigos entre parênteses continuam OK) │
   └───────────────────────────────────────────────────────────────────────────────────────────────┘

   ASSINATURA DA CASA — trilho da cobrança (DESIGN-2 §2). Só estas cores carregam semântica de cobrança;
   o azul da marca NUNCA é usado para fase. ⛔ Cliente sem fatura NÃO leva filete nem pastilha.
     .trilho-azul .trilho-ambar .trilho-laranja .trilho-vermelho .trilho-verde
        filete vertical de 3 px na borda esquerda (linha da lista de conversas, linha de tabela, cartão).
        Semântica: azul = a vencer (−2, 0) · âmbar = vencida (+2, +5) · laranja = bloqueio (+7)
                   vermelho = pós-bloqueio (+3p…) · verde = em dia (sem fatura aberta).
     .fase (pastilha da etapa) + a cor: .fase-avencer .fase-vencida .fase-bloqueio .fase-posbloqueio .fase-emdia
        (apelidos por cor: .fase-azul .fase-ambar .fase-laranja .fase-vermelho .fase-verde)
        Usar no cabeçalho da conversa, na linha da lista e na ficha: <span class="fase fase-vencida">+5</span>
     .valor-grande   valor da fatura em 24/680 com tabular-nums (bloco Cobrança da ficha)

   CASCA (só o lead mexe): .sidebar (232, sobre --bg, fio à direita) · .nav-item(.sub)(.ativo) · .nav-badge ·
     .nav-grupo/.nav-grupo-titulo · .sidebar-rodape/.sse-estado · .header (52, branco, fio) · .selo-modo
     (.selo-sombra/.selo-canario/.selo-ativo) · .header-usuario + .popover-usuario · .conteudo(.cheia)
   SANFONA DA BARRA (§20, só ≥ 901 px): a MESMA barra em dois tamanhos — larga 232 (--sidebar-l) e
     encolhida 64 (--sidebar-l-min, só ícone). Liga/desliga em 'body.menu-encolhido', posta pelo app.js
     a partir do localStorage "fp.menu.encolhido" ('1'/'0'), aplicada já no primeiro quadro de iniciar().
     .sidebar-recolher + .sidebar-recolher-txt + .seta = o botão preso no rodapé da barra (rótulo, title,
     aria-label e aria-expanded trocam no app.js; a seta gira 180°). Encolhida: o rótulo do item continua
     no DOM (escondido por clip-path, leitor de tela lê) e vira DICA em title/aria-label; .nav-badge vira
     pastilha no canto do ícone; .nav-grupo-titulo sai e sobra o fio do grupo; .sse-estado vira só a bolinha.
     ⛔ No celular NADA disso vale — lá a barra é a gaveta de sempre e o botão é .só-desktop.
     ⛔ A troca de tamanho é SECA: transição em width/margin-left anima layout e dispara em qualquer
     mudança de janela, não só no clique (o porquê medido está no comentário da §20).

   PÁGINA
     .pagina-cabecalho (.tela-cabecalho)  h1 20/650 + .tela-sub + .acoes à direita; no celular empilha
     .toolbar (.barra)                    busca + filtros + botões, com wrap; .espaco empurra
     .secao + .secao-titulo               bloco de ficha: título 13/620 e conteúdo compacto, fio embaixo
                                          (.secao.sem-fio tira o fio; .secao-corpo agrupa o conteúdo)

   AÇÃO
     .btn  .btn-primary .btn-ghost .btn-perigo (.btn-danger) .btn-contorno-danger .btn-verde   36 px · raio 8
     .btn-sm (.btn-p) 30 px · .btn-icone quadrado (só com aria-label!) · .btn-bloco 100% · <svg class="ico">
     ⛔ Botão de ação com rótulo sempre; ícone sozinho só em ✕ / ☰ / ⋯ com aria-label.

   DADO
     .chip (+ .chip-primary/-azul/-verde/-ambar/-vermelho/-roxo) raio 6 · .chips agrupa · .chip .x fecha
     .badge + estado: .badge-sombra .badge-enviado .badge-entregue .badge-lido .badge-falhou .badge-pendente
            .badge-descartado (roxo — não é erro) e as cores puras .badge-azul/-verde/-ambar/-vermelho/-cinza/-roxo
     .avatar (32) · .avatar.g (40) · .avatar.p (24)
     .card (raio 12, fio, SEM sombra) .card-cabecalho .card-corpo · .card.flutuante ganha sombra de menu
     .kpi (.card-metrica): .rotulo 13 fraco / .valor 24/680 / .delta 12 (.pos verde, .neg vermelho)
     .grid-kpi (.cards-grid) flex-wrap, cada card 1 1 200px — os da última linha esticam
     .tablewrap (.tabela-wrap) + table.tabela: cabeçalho colado em --surface-2, linha 44, fio, hover, SEM zebra;
            células .num (direita) .principal-cel .secundario .acoes-cel; ganha .scroll-esq/.scroll-dir do app.js

   ENTRADA
     .campo + label + .ajuda + .erro-campo · .input .select .textarea (36, raio 8, foco com halo)
     .linha (campos lado a lado) · .busca (lupa embutida) · .interruptor · .progresso(.verde)

   ESTADO
     .esqueleto (+ .esqueleto-titulo .esqueleto-linha .esqueleto-bloco .esqueleto-circulo .esqueleto-lista)
            CARREGANDO = esqueleto cinza com pulso suave. ⛔ Nunca "Carregando…" solto.
     .vazio                 <strong>título 14/600</strong> + frase 13 apagada + um botão
     .alerta-info/-aviso/-erro/-ok    faixa clara com o que houve e o que fazer
     .toast (.ok .erro .aviso)        canto inferior direito

   SOBREPOSIÇÃO (as únicas coisas com sombra)
     .modal (480) · .modal.g (640) · .modal.gg (800) — .modal-cabecalho/-corpo/-rodape
     .popover + .menu-item (32) · .gaveta (folha lateral / no celular sobe de baixo)

   NAVEGAÇÃO SECUNDÁRIA
     .abas + .aba(.ativa)   pílula discreta: ativa é branca com fio, as outras sem fundo
     .passos + .passo(.ativo/.feito) · .paginacao

   UTILITÁRIOS  .flex .flex-col .centro .entre .wrap .gap-4/8/12/16 .mt-8/12/16/24 .mb-8/12/16
     .muted .pequeno .mini .bold .num .verde .vermelho .ambar .roxo .direita .centro-txt .cortar .quebra
     .w-100 .max-720 .max-960 .clicavel .separador .só-mobile .só-desktop
   ===================================================================================== */

/* ══════════════════════════════════════════════════════════════════════ 1. TOKENS (DESIGN-2 §3) */
:root {
  /* ---- cor: superfícies e fios ---- */
  --bg: #f6f7f9;                /* fundo do aplicativo */
  --surface: #ffffff;           /* painéis */
  --surface-2: #fbfcfd;         /* cabeçalho de tabela, hover de linha, balão de entrada, composer */
  --linha: #e7eaee;             /* fio de 1 px — substitui o antigo --border em TUDO */
  --linha-forte: #d6dbe2;       /* divisória entre colunas e contorno de campo */

  /* ---- cor: texto ---- */
  --texto: #111827;             /* título e nome */
  --texto-corpo: #374151;       /* texto normal */
  --texto-fraco: #6b7280;       /* secundário */
  --texto-apagado: #9aa3af;     /* hora, contagem, placeholder */

  /* ---- cor: marca (azul é navegação e ação — nunca estado de cobrança) ---- */
  --primary: #0d6efd;
  --primary-escuro: #0b5ed7;
  --primary-suave: #ebf2fe;
  --primary-linha: #c7dbfe;

  /* ---- cor: estado ---- */
  --verde: #12a150;        --verde-suave: #e9f7ef;   --verde-escuro: #0b6b36;
  --ambar: #b45309;        --ambar-suave: #fef6e7;   --ambar-texto: #92400e;
  --vermelho: #dc2626;     --vermelho-suave: #feecec; --vermelho-texto: #991b1b;
  --roxo: #7c3aed;         --roxo-suave: #f3eefe;

  /* ---- trilho da cobrança (DESIGN-2 §2) ---- */
  --trilho-azul: #3b82f6;      --trilho-azul-txt: #1d4ed8;      --trilho-azul-bg: #eff6ff;
  --trilho-ambar: #d97706;     --trilho-ambar-txt: #92400e;     --trilho-ambar-bg: #fef6e7;
  --trilho-laranja: #ea580c;   --trilho-laranja-txt: #9a3412;   --trilho-laranja-bg: #fff1e7;
  --trilho-vermelho: #dc2626;  --trilho-vermelho-txt: #991b1b;  --trilho-vermelho-bg: #feecec;
  --trilho-verde: #12a150;     --trilho-verde-txt: #0b6b36;     --trilho-verde-bg: #e9f7ef;

  /* ---- tipografia ---- */
  /* UMA fonte só: Roboto (dossie/04 — o clone da Smart). tema.css redefine em html:root; este é o recuo. */
  --fonte: Roboto, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fs-corpo: 14px;             /* corpo, célula, mensagem */
  --fs-sec: 13px;               /* secundário, prévia, descrição */
  --fs-micro: 12px;             /* hora, contagem, rótulo de campo — PISO da casa */
  --fs-titulo-pagina: 20px;     /* h1 */
  --fs-titulo-secao: 13px;      /* cabeçalho de bloco */
  --fs-num-grande: 24px;        /* valor da fatura, indicador */

  /* ---- espaço (4 · 8 · 12 · 16 · 20 · 24 · 32 — nada fora dessa escala) ---- */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 20px; --e6: 24px; --e8: 32px;

  /* ---- raio ---- */
  --raio-chip: 6px;             /* chip, badge */
  --raio-btn: 8px;              /* botão, campo, linha selecionada, menu */
  --raio-painel: 12px;          /* painel, modal, composer */

  /* ---- sombra: só onde há sobreposição ---- */
  --sombra-menu: 0 6px 16px rgba(17, 24, 39, .10), 0 1px 2px rgba(17, 24, 39, .06);
  --sombra-modal: 0 24px 48px rgba(17, 24, 39, .18);

  /* ---- altura ---- */
  --a-campo: 36px;              /* campo e botão */
  --a-btn-p: 30px;              /* botão pequeno */
  --a-linha-lista: 64px;        /* linha da lista de conversas */
  --a-linha-tabela: 44px;
  --header-a: 52px;             /* cabeçalho */
  --sidebar-l: 232px;
  --sidebar-l-min: 64px;        /* sanfona: barra encolhida, só os ícones (≥ 901 px) */
  /* CAIXA DE ENTRADA — largura das colunas laterais. A do meio (a conversa) fica com o resto e tem de
     ser SEMPRE a maior. Os degraus por tamanho de tela estão no §21, no fim do arquivo.
     ⛔ Só px aqui. Em 08/09 um pedaço de comentário ficou SOLTO neste bloco, o parser engoliu a linha do
     --ib-lista-l junto com o lixo, a variável sumiu, e 'grid-template-columns' caiu para o valor inicial:
     a caixa inteira virou UMA coluna empilhada. Só aparecia com o menu ABERTO, porque com o menu
     encolhido o body redefine a variável e disfarça o estrago. */
  --ib-lista-l: 300px;
  --ib-lista-l-max: 320px;      /* … a mesma coluna com a barra encolhida */
  --ib-ficha-l: 272px;          /* ficha do contato */
  --alvo: 40px;                 /* alvo de toque (vira 44 no celular) */
  --transicao: .12s ease;       /* só cor e fundo */

  /* ═══════ APELIDOS dos nomes antigos (as telas usam; nenhuma pode quebrar) ═══════ */
  --card: var(--surface);
  --text: var(--texto);
  --muted: var(--texto-fraco);
  --muted-forte: var(--texto-corpo);
  --border: var(--linha);
  --primary-fraco: var(--primary-suave);
  --danger: var(--vermelho);
  --danger-fraco: var(--vermelho-suave);
  --verde-fraco: var(--verde-suave);
  --ambar-fraco: var(--ambar-suave);
  --roxo-fraco: var(--roxo-suave);
  --linha-zebra: var(--surface-2);
  --linha-hover: var(--surface-2);
  --fs-principal: var(--fs-corpo);
  --fs-secundaria: var(--fs-sec);
  --fs-mini: var(--fs-micro);
  --fs-titulo: var(--fs-titulo-pagina);
  --raio: var(--raio-painel);
  --raio-p: var(--raio-chip);
  --sombra: none;                       /* painel encostado NÃO tem sombra: tem fio */
  --sombra-flutuante: var(--sombra-menu);
}

/* ══════════════════════════════════════════════════════════════════════ 2. BASE */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--fs-corpo);
  font-weight: 400;
  line-height: 1.5;
  color: var(--texto-corpo);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  overflow-x: clip;
}
h1, h2, h3, h4 { margin: 0; color: var(--texto); font-weight: 620; line-height: 1.3; }
h1 { font-size: var(--fs-titulo-pagina); font-weight: 650; letter-spacing: -.01em; }
h2 { font-size: var(--fs-titulo-secao); font-weight: 620; }   /* título de SEÇÃO 13/620 (§3) */
h3 { font-size: var(--fs-titulo-secao); font-weight: 620; }
p { margin: 0 0 var(--e2); }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
svg.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* foco visível em tudo que recebe teclado (DESIGN-2 §8) */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.btn:focus-visible, .input:focus-visible, .select:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px; }
::selection { background: var(--primary-linha); }

/* ══════════════════════════════════════════════════════════════════════ 3. TRILHO DA COBRANÇA */
/* filete de 3 px na borda esquerda — some por baixo do fundo, então funciona em linha selecionada também */
.trilho-azul, .trilho-ambar, .trilho-laranja, .trilho-vermelho, .trilho-verde {
  box-shadow: inset 3px 0 0 0 var(--trilho-cor, transparent);
}
.trilho-azul { --trilho-cor: var(--trilho-azul); }
.trilho-ambar { --trilho-cor: var(--trilho-ambar); }
.trilho-laranja { --trilho-cor: var(--trilho-laranja); }
.trilho-vermelho { --trilho-cor: var(--trilho-vermelho); }
.trilho-verde { --trilho-cor: var(--trilho-verde); }

/* pastilha da fase (o código da etapa: −2 · 0 · +2 · +5 · +7 · +3p · +6p · +9p) */
.fase {
  display: inline-flex; align-items: center; gap: var(--e1);
  height: 20px; padding: 0 var(--e2); border-radius: var(--raio-chip);
  font-size: var(--fs-micro); font-weight: 600; line-height: 1; white-space: nowrap;
  background: var(--fase-bg, var(--surface-2)); color: var(--fase-txt, var(--texto-fraco));
  font-variant-numeric: tabular-nums;
}
.fase-avencer, .fase-azul { --fase-bg: var(--trilho-azul-bg); --fase-txt: var(--trilho-azul-txt); }
.fase-vencida, .fase-ambar { --fase-bg: var(--trilho-ambar-bg); --fase-txt: var(--trilho-ambar-txt); }
.fase-bloqueio, .fase-laranja { --fase-bg: var(--trilho-laranja-bg); --fase-txt: var(--trilho-laranja-txt); }
.fase-posbloqueio, .fase-vermelho { --fase-bg: var(--trilho-vermelho-bg); --fase-txt: var(--trilho-vermelho-txt); }
.fase-emdia, .fase-verde { --fase-bg: var(--trilho-verde-bg); --fase-txt: var(--trilho-verde-txt); }

/* valor da fatura: número grande da ficha */
.valor-grande { font-size: var(--fs-num-grande); font-weight: 680; color: var(--texto); line-height: 1.2; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════════════════ 4. CASCA: BARRA LATERAL */
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-l);
  background: var(--bg); border-right: 1px solid var(--linha);
  display: flex; flex-direction: column; z-index: 60;
  transition: transform .18s ease;
}
.sidebar-overlay { position: fixed; inset: 0; background: rgba(17, 24, 39, .40); z-index: 55; opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.sidebar-marca { display: flex; align-items: center; gap: var(--e2); height: var(--header-a); padding: 0 var(--e4); flex: none; }
.marca-icone { width: 26px; height: 26px; border-radius: var(--raio-btn); background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 650; font-size: 14px; flex: none; }
.marca-texto { font-weight: 620; font-size: 14px; color: var(--texto); white-space: nowrap; letter-spacing: -.005em; }
.sidebar-fechar { margin-left: auto; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: var(--e2) var(--e3) var(--e2); }
.nav-item {
  display: flex; align-items: center; gap: var(--e2);
  height: 30px; padding: 0 var(--e2); margin: 1px 0;
  border-radius: var(--raio-btn); color: var(--texto-corpo);
  font-weight: 500; font-size: 13px; white-space: nowrap;
}
/* Separação entre as linhas do menu: alternância discreta de fundo (pedido do dono em 06/09, olhando a gaveta
   do celular, onde os itens corriam soltos). ⛔ A alternância vem ANTES de hover e ativo e com especificidade
   menor, para nunca vencer nenhum dos dois. A contagem é por elemento <a>, então o rótulo do grupo não conta. */
.sidebar-nav > .nav-item:nth-of-type(even):not(.ativo),
.nav-grupo > .nav-item:nth-of-type(even):not(.ativo) { background: rgba(17, 24, 39, .028); }
/* ⚠️ CONSERTO 08/09: a alternância acima NÃO tinha "especificidade menor" como o comentário dizia —
   ':nth-of-type(even):not(.ativo)' conta como 3 classes e vencia o hover (que tinha 2), então os itens
   PARES não acendiam ao passar o mouse. Passou despercebido enquanto o rótulo estava escrito; com a barra
   ENCOLHIDA o realce do hover é a única confirmação de que a dica é daquele ícone. Agora o hover empata em
   especificidade e vem depois no arquivo — vence. Medido: item par "Régua de Cobrança" acendia .027, agora .06 */
.sidebar-nav .nav-item:not(.ativo):hover, .nav-grupo .nav-item:not(.ativo):hover { background: rgba(17, 24, 39, .06); text-decoration: none; color: var(--texto); }
/* ativo: o fundo já basta — ⛔ sem barra colorida à esquerda */
.sidebar-nav .nav-item.ativo, .nav-grupo .nav-item.ativo { background: var(--primary-suave); color: var(--primary); font-weight: 600; }
.nav-item .ico { width: 17px; height: 17px; opacity: .9; }
/* sub (Ferramentas/Definições): desde 08/09 também tem ÍCONE, então o recuo de 33 px sai — os ícones de
   todos os itens ficam na MESMA coluna. O que mantém o sub subordinado é o peso e o tamanho do texto,
   e o bloco do grupo (fio em cima + rótulo). Isso é o que faz a barra encolhida funcionar. */
.nav-item.sub { padding-left: var(--e2); font-size: 12.5px; font-weight: 400; height: 27px; }
.nav-item.sub.ativo { font-weight: 600; }
/* contagem simples à direita, apagada */
.nav-conta { margin-left: auto; font-size: var(--fs-micro); font-weight: 500; color: var(--texto-apagado); font-variant-numeric: tabular-nums; }
/* badge de NÃO LIDAS: é aviso, não contagem neutra — continua azul e visível */
.nav-badge { margin-left: auto; background: var(--primary); color: #fff; font-size: var(--fs-micro); font-weight: 600; padding: 0 6px; height: 18px; line-height: 18px; border-radius: 999px; min-width: 18px; text-align: center; font-variant-numeric: tabular-nums; }
/* grupo é bloco: fio em cima + respiro, para "Ferramentas" e "Definições" não flutuarem no meio da lista */
/* 18/09 (ordem do dono: "tenta fazer não precisar dessa barra de descida, somente se o monitor for
   pequeno"): o menu do dono tem 25 itens + 3 grupos + o canal do bot + rodapé = 1.275 px, contra
   ~950 px úteis num monitor 1080p. Aqui a barra fica mais compacta (itens 30/27 px, grupos com menos
   respiro) e os grupos passam a FECHAR pelo título (comp/menu_grupos.js), lembrando a escolha. */
.nav-grupo { margin-top: var(--e2); padding-top: var(--e2); border-top: 1px solid var(--linha); }
.nav-grupo.fechado > .nav-item { display: none; }
.nav-grupo-titulo { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
.nav-grupo-titulo .ng-seta { margin-left: auto; width: 12px; height: 12px; opacity: .55; transition: transform .15s; }
.nav-grupo.fechado .nav-grupo-titulo .ng-seta { transform: rotate(-90deg); }
body.menu-encolhido .nav-grupo-titulo .ng-seta { display: none; }
/* a barra de rolagem do menu: fina, e só quando não cabe */
.sidebar-nav { scrollbar-width: thin; scrollbar-gutter: auto; }
/* (a densidade por altura de tela fica no FIM deste arquivo — precisa vir depois de .sidebar-recolher
   e .sidebar-rodape, que são declarados mais abaixo com a mesma especificidade) */
.nav-grupo-titulo { font-size: var(--fs-micro); color: var(--texto-apagado); font-weight: 600; padding: 0 var(--e2) var(--e1); }
/* 14/09/2026 — o rodapé QUEBRA LINHA no zoom (flex-wrap): com o A+ crescendo pela escala do texto,
   os três itens (estado · versão · A− A+) não cabiam nos 232px da barra e o A+ vazava pela borda.
   A 100% continua tudo numa linha só; no A+ o par de zoom desce para a linha de baixo, inteiro. */
.sidebar-rodape { padding: 6px var(--e3); border-top: 1px solid var(--linha); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px var(--e2); font-size: 10px; color: var(--texto-apagado); flex: none; }
/* 18/09 (ordem do dono, olhando o rodapé): "pode diminuir isso, a versão ficar menor e os botões de mais e
   menos". Versão em 10 px apagada; A−/A+ em 22 px (o tema injeta .tt-btn depois deste arquivo, por isso a
   regra aqui leva duas classes — vence por especificidade, não por ordem). No celular (≤ 900 px) o alvo de
   44 px continua valendo pela regra do próprio componente. */
.sidebar-rodape .versao { font-size: 10px; }
.sidebar-rodape .tt-caixa { gap: 1px; }
.sidebar-rodape .tt-btn { width: 22px; height: 22px; font-size: 11px; line-height: 1; padding: 0; }
.sidebar-rodape .tt-atual { min-height: 22px; height: 22px; font-size: 10px; padding: 0 5px; }
@media (max-width: 900px) { .sidebar-rodape .tt-btn { width: 44px; height: 44px; font-size: 15px; } .sidebar-rodape .tt-atual { min-height: 44px; height: auto; font-size: var(--fs-micro); } }
.sidebar-rodape .tt-caixa { margin-left: auto; }
.sse-estado { display: inline-flex; align-items: center; gap: 6px; }
.sse-estado i { width: 7px; height: 7px; border-radius: 50%; background: var(--ambar); display: inline-block; flex: none; }
.sse-estado.on i { background: var(--verde); }
.sse-estado.off i { background: var(--vermelho); }
.versao { color: var(--texto-apagado); font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════════════════ 5. CASCA: CABEÇALHO */
.principal { margin-left: var(--sidebar-l); min-height: 100vh; display: flex; flex-direction: column; min-width: 0; }
.header {
  position: sticky; top: 0; z-index: 40; height: var(--header-a);
  display: flex; align-items: center; gap: var(--e3); padding: 0 var(--e5); min-width: 0;
  background: var(--surface); border-bottom: 1px solid var(--linha);
}
.header-conta { display: flex; flex-direction: column; justify-content: center; line-height: 1.25; min-width: 0; }
.header-titulo { font-weight: 620; font-size: var(--fs-corpo); color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-numero { font-size: var(--fs-micro); font-weight: 500; color: var(--texto-apagado); white-space: nowrap; }
.header-espaco { flex: 1; min-width: var(--e2); }
.header-usuario {
  display: flex; align-items: center; gap: var(--e2); padding: 0 var(--e2) 0 var(--e1); min-height: var(--a-campo);
  background: transparent; border: 1px solid transparent; border-radius: var(--raio-btn); color: var(--texto-corpo);
  transition: background var(--transicao), border-color var(--transicao); flex: none; max-width: 100%;
}
.header-usuario:hover, .header-usuario[aria-expanded="true"] { background: var(--bg); border-color: var(--linha); }
.usuario-nome { font-weight: 500; font-size: var(--fs-sec); color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }

/* selo do modo — TRÊS estados, cada um com cor própria (§2.1); o texto vem do app.js */
.selo-modo { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .02em; padding: 3px var(--e2); border-radius: var(--raio-chip); white-space: nowrap; flex: none; }
.selo-sombra { background: var(--ambar-suave); color: var(--ambar-texto); }
.selo-ativo { background: var(--verde-suave); color: var(--verde-escuro); }
.selo-canario { background: var(--primary-suave); color: var(--primary-escuro); }

.conteudo { flex: 1; padding: var(--e6); min-width: 0; overflow-x: clip; }
.conteudo.cheia { padding: 0; }

/* popover genérico + o do usuário (sobreposição ⇒ tem sombra) */
.popover { position: fixed; background: var(--surface); border: 1px solid var(--linha); border-radius: var(--raio-btn); box-shadow: var(--sombra-menu); padding: var(--e2); z-index: 70; animation: aparecer .12s ease; }
.popover-usuario { top: calc(var(--header-a) + 6px); right: var(--e4); width: 260px; max-width: calc(100vw - 24px); }
.popover-usuario-topo { display: flex; gap: var(--e3); align-items: center; padding: var(--e1) var(--e1) var(--e2); }
.popover-usuario-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.popover-usuario-texto strong { font-weight: 600; font-size: var(--fs-corpo); color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.popover-usuario-texto .secundario { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.popover-usuario-texto .chip { align-self: flex-start; }
.popover .separador { margin: var(--e1) 0 var(--e2); }
.popover-modo { display: block; padding: 0 var(--e1) var(--e2); font-size: var(--fs-micro); line-height: 1.45; }
/* especificidade 0,2,0 de propósito: precisa ganhar de .btn/.btn-ghost, que vêm depois no arquivo */
.popover .popover-sair { justify-content: flex-start; color: var(--vermelho); }
.popover .popover-sair:hover { background: var(--vermelho-suave); color: var(--vermelho); }
/* item de menu dentro de popover: 32 px (DESIGN-2 §6) */
.menu-item { display: flex; align-items: center; gap: var(--e2); width: 100%; height: 32px; padding: 0 var(--e2); border: 0; background: transparent; border-radius: var(--raio-chip); color: var(--texto-corpo); font-size: var(--fs-sec); text-align: left; }
.menu-item:hover { background: var(--bg); color: var(--texto); text-decoration: none; }
.menu-item.perigo { color: var(--vermelho); }
.menu-item.perigo:hover { background: var(--vermelho-suave); }
.menu-titulo { font-size: var(--fs-micro); font-weight: 600; color: var(--texto-apagado); padding: var(--e2) var(--e2) var(--e1); }

body.sem-login .sidebar, body.sem-login .sidebar-overlay, body.sem-login .header { display: none; }
body.sem-login .principal { margin-left: 0; }
body.sem-login .conteudo { display: grid; place-items: center; min-height: 100vh; }

/* ══════════════════════════════════════════════════════════════════════ 6. PÁGINA: CABEÇALHO E BARRA */
.pagina-cabecalho, .tela-cabecalho { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e4); flex-wrap: wrap; min-width: 0; }
.pagina-cabecalho h1, .tela-cabecalho h1 { margin-right: auto; min-width: 0; }
.pagina-cabecalho .acoes, .tela-cabecalho .acoes { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }
.tela-sub { color: var(--texto-fraco); font-size: var(--fs-sec); }
.toolbar, .barra { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; margin-bottom: var(--e3); min-width: 0; }
.toolbar .espaco, .barra .espaco { flex: 1; }
.toolbar .select, .toolbar select, .toolbar .input, .toolbar input:not([type=checkbox]):not([type=radio]),
.barra .select, .barra select, .barra .input, .barra input:not([type=checkbox]):not([type=radio]) { width: auto; min-width: 160px; }
.toolbar .busca input, .barra .busca input { width: 100%; }
.toolbar .full, .barra .full { width: 100%; flex: 1 1 100%; }

/* seção de ficha: título 13/620 + conteúdo, separada por fio. ⛔ Sem cartão dentro de cartão. */
.secao { padding: var(--e4); border-bottom: 1px solid var(--linha); min-width: 0; }
.secao:last-child, .secao.sem-fio { border-bottom: 0; }
.secao-titulo { font-size: var(--fs-titulo-secao); font-weight: 620; color: var(--texto); margin-bottom: var(--e2); display: flex; align-items: center; gap: var(--e2); }
.secao-titulo .conta { margin-left: auto; font-size: var(--fs-micro); font-weight: 500; color: var(--texto-apagado); }
.secao-corpo { display: flex; flex-direction: column; gap: var(--e2); min-width: 0; }

/* ══════════════════════════════════════════════════════════════════════ 7. CARTÕES E INDICADORES */
.card { background: var(--surface); border: 1px solid var(--linha); border-radius: var(--raio-painel); box-shadow: none; min-width: 0; }
.card.flutuante { box-shadow: var(--sombra-menu); }
.card-corpo { padding: var(--e4); }
.card-cabecalho { padding: var(--e3) var(--e4); border-bottom: 1px solid var(--linha); display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.card-cabecalho h2 { margin-right: auto; }
.grid-kpi, .cards-grid { display: flex; flex-wrap: wrap; gap: var(--e3); margin-bottom: var(--e4); }
.grid-kpi > *, .cards-grid > * { flex: 1 1 200px; min-width: 0; }
.kpi, .card-metrica { padding: var(--e3) var(--e4); min-width: 0; }
.kpi .rotulo, .card-metrica .rotulo { color: var(--texto-fraco); font-size: var(--fs-sec); }
.kpi .valor, .card-metrica .valor { font-size: var(--fs-num-grande); font-weight: 680; color: var(--texto); line-height: 1.2; margin-top: var(--e1); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kpi .delta, .kpi .rodape, .card-metrica .delta { font-size: var(--fs-micro); color: var(--texto-apagado); margin-top: var(--e1); }
.kpi .delta.pos, .card-metrica .delta.pos { color: var(--verde-escuro); }
.kpi .delta.neg, .card-metrica .delta.neg { color: var(--vermelho); }

/* ══════════════════════════════════════════════════════════════════════ 8. TABELAS (⛔ sem zebra) */
.tablewrap, .tabela-wrap { overflow: auto; max-height: calc(100vh - 200px); border-radius: var(--raio-painel); -webkit-overflow-scrolling: touch; min-width: 0; container-type: inline-size; }
.card > .tablewrap, .card > .tabela-wrap { border-radius: var(--raio-painel); }
.card > .tablewrap:not(:last-child), .card > .tabela-wrap:not(:last-child) { border-radius: var(--raio-painel) var(--raio-painel) 0 0; }
/* indicador de rolagem: bordas esfumadas do lado em que ainda há coluna escondida (classes vindas do app.js) */
.tablewrap.scroll-dir, .tabela-wrap.scroll-dir { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), rgba(0,0,0,0)); mask-image: linear-gradient(to right, #000 calc(100% - 48px), rgba(0,0,0,0)); }
.tablewrap.scroll-esq, .tabela-wrap.scroll-esq { -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0), #000 48px); mask-image: linear-gradient(to right, rgba(0,0,0,0), #000 48px); }
.tablewrap.scroll-esq.scroll-dir, .tabela-wrap.scroll-esq.scroll-dir { -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0), #000 48px, #000 calc(100% - 48px), rgba(0,0,0,0)); mask-image: linear-gradient(to right, rgba(0,0,0,0), #000 48px, #000 calc(100% - 48px), rgba(0,0,0,0)); }
table.tabela, .tablewrap > table, .tabela-wrap > table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-corpo); }
.tabela thead th, .tablewrap > table thead th, .tabela-wrap > table thead th {
  position: sticky; top: 0; z-index: 2; background: var(--surface-2);
  text-align: left; font-weight: 600; font-size: var(--fs-micro); color: var(--texto-fraco);
  height: 36px; padding: 0 var(--e4); border-bottom: 1px solid var(--linha); white-space: nowrap;
}
.tabela tbody td, .tablewrap > table tbody td, .tabela-wrap > table tbody td {
  height: var(--a-linha-tabela); padding: var(--e2) var(--e4); border-bottom: 1px solid var(--linha);
  vertical-align: middle; background: var(--surface); color: var(--texto-corpo);
}
.tabela tbody tr:last-child td, .tablewrap > table tbody tr:last-child td, .tabela-wrap > table tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover > td, .tablewrap > table tbody tr:hover > td, .tabela-wrap > table tbody tr:hover > td { background: var(--surface-2); }
.tabela tbody tr.clicavel { cursor: pointer; }
/* LINHA SELECIONADA — o azul mais presente (peso do FlowSeller Pro, 08/09): fundo --primary-suave já existia,
   o que entra é o fio --primary-linha em cima e embaixo e a primeira coluna em --primary-escuro. Continua
   sendo NAVEGAÇÃO (onde eu estou), não estado de dívida: o trilho da cobrança segue intocado (DESIGN-2 §2). */
.tabela tbody tr.selecionada > td, .tablewrap > table tbody tr.selecionada > td,
.tabela-wrap > table tbody tr.selecionada > td {
  background: var(--primary-suave); border-bottom-color: var(--primary-linha);
}
/* ⛔ nada de box-shadow aqui: o filete do trilho (§3) também é inset box-shadow e seria apagado por cima. */
.tabela tbody tr.selecionada > td.principal-cel, .tablewrap > table tbody tr.selecionada > td.principal-cel,
.tabela tbody tr.selecionada .principal-cel, .tablewrap > table tbody tr.selecionada .principal-cel { color: var(--primary-escuro); }
.tabela tbody tr.selecionada:hover > td, .tablewrap > table tbody tr.selecionada:hover > td { background: var(--primary-suave); }
.tabela .num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela .secundario, .secundario { color: var(--texto-fraco); font-size: var(--fs-sec); font-weight: 400; }
.tabela .principal-cel, .principal-cel { font-weight: 600; color: var(--texto); }
.tabela .acoes-cel, .acoes-cel { text-align: right; white-space: nowrap; }
.tabela-vazia { padding: var(--e8) var(--e5); text-align: center; color: var(--texto-fraco); }
/* estado vazio/carregando em <td colspan>: centraliza no que se VÊ (largura do wrapper), não na tabela que rola */
.tabela tbody td.tabela-vazia, .tablewrap > table tbody td.tabela-vazia, .tabela-wrap > table tbody td.tabela-vazia { background: var(--surface); display: block; position: sticky; left: 0; width: 100cqw; height: auto; border-bottom: 0; }
.tablewrap td > .vazio, .tabela-wrap td > .vazio { position: sticky; left: 0; width: calc(100cqw - 32px); max-width: calc(100cqw - 32px); }
.tablewrap td.tabela-vazia > .vazio, .tabela-wrap td.tabela-vazia > .vazio { position: static; width: auto; max-width: none; padding: 0; }
.paginacao { display: flex; align-items: center; gap: var(--e2); padding: var(--e2) var(--e4); border-top: 1px solid var(--linha); font-size: var(--fs-sec); color: var(--texto-fraco); flex-wrap: wrap; }
.paginacao .espaco { flex: 1; }
.paginacao .btn { min-height: var(--a-btn-p); }

/* ══════════════════════════════════════════════════════════════════════ 9. BOTÕES */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--a-campo); padding: 0 var(--e3); border-radius: var(--raio-btn);
  border: 1px solid var(--linha-forte); background: var(--surface); color: var(--texto-corpo);
  font-weight: 500; font-size: var(--fs-corpo); line-height: 1.2;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao), opacity var(--transicao), transform 80ms ease;
}
.btn:hover { background: var(--surface-2); border-color: var(--texto-apagado); color: var(--texto); text-decoration: none; }
/* MOVIMENTO — regra da casa (decisão do dono, 06/09): só CONFIRMA uma ação que a pessoa fez.
   ⛔ nada se mexe no hover, ⛔ nada de fade de conteúdo, ⛔ nada em número de dinheiro.
   Aqui: o botão AFUNDA 1 px enquanto está pressionado. É o "cliquei" físico, some ao soltar. */
.btn:active:not(:disabled):not(.desabilitado) { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn .ico { width: 16px; height: 16px; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 500; }
.btn-primary:hover { background: var(--primary-escuro); border-color: var(--primary-escuro); color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--texto-fraco); }
.btn-ghost:hover { background: var(--bg); color: var(--texto); border-color: transparent; }
.btn-perigo, .btn-danger { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.btn-perigo:hover, .btn-danger:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.btn-contorno-danger { color: var(--vermelho); border-color: #f3bcbc; background: var(--surface); }
.btn-contorno-danger:hover { background: var(--vermelho-suave); border-color: #e79b9b; color: var(--vermelho); }
.btn-verde { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn-verde:hover { background: #0e8a44; border-color: #0e8a44; color: #fff; }
.btn-sm, .btn-p { min-height: var(--a-btn-p); padding: 0 var(--e2); font-size: var(--fs-sec); }
.btn-icone { padding: 0; width: var(--a-campo); min-width: var(--a-campo); }
.btn-icone.btn-sm, .btn-icone.btn-p { width: var(--a-btn-p); min-width: var(--a-btn-p); }
.btn-bloco { width: 100%; }
.btn.ativo { background: var(--primary-suave); border-color: var(--primary-linha); color: var(--primary); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════ 10. CHIPS, BADGES, AVATAR */
.chip {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 var(--e2);
  border-radius: var(--raio-chip); font-size: var(--fs-micro); font-weight: 500;
  background: var(--surface-2); color: var(--texto-fraco); border: 1px solid var(--linha);
  line-height: 1; white-space: nowrap;
}
.chip.pilula { border-radius: 999px; }
.chip.ativo, .chip-primary, .chip-azul { background: var(--primary-suave); color: var(--primary-escuro); border-color: transparent; }
.chip-verde { background: var(--verde-suave); color: var(--verde-escuro); border-color: transparent; }
.chip-ambar { background: var(--ambar-suave); color: var(--ambar-texto); border-color: transparent; }
.chip-vermelho { background: var(--vermelho-suave); color: var(--vermelho-texto); border-color: transparent; }
.chip-roxo { background: var(--roxo-suave); color: var(--roxo); border-color: transparent; }
.chip.clicavel, button.chip { cursor: pointer; height: 26px; }
.chip.clicavel:hover, button.chip:hover { border-color: var(--linha-forte); color: var(--texto); }
.chip .x { cursor: pointer; opacity: .6; margin-left: 2px; }
.chip .x:hover { opacity: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.badge { display: inline-block; padding: 2px var(--e2); border-radius: var(--raio-chip); font-size: var(--fs-micro); font-weight: 600; line-height: 1.4; white-space: nowrap; }
.badge-verde, .badge-entregue, .badge-concluido, .badge-ativo, .badge-aprovado, .badge-ok { background: var(--verde-suave); color: var(--verde-escuro); }
.badge-lido { background: #cdeeda; color: #084f27; }
.badge-ambar, .badge-sombra, .badge-fila, .badge-agendado, .badge-esperando, .badge-processando { background: var(--ambar-suave); color: var(--ambar-texto); }
.badge-vermelho, .badge-falhou, .badge-morta, .badge-erro, .badge-cancelado, .badge-rejeitado, .badge-bloqueado { background: var(--vermelho-suave); color: var(--vermelho-texto); }
.badge-azul, .badge-enviado, .badge-rodando, .badge-enviando, .badge-recebido, .badge-aberta { background: var(--primary-suave); color: var(--primary-escuro); }
.badge-cinza, .badge-pendente, .badge-rascunho, .badge-arquivada, .badge-inativo, .badge-pulado { background: #eceff3; color: var(--texto-corpo); }
/* 'descartado' (a fila reconferiu no MyCore e não cobrou quem já pagou) não é erro nem envio: roxo próprio (§7.1). */
.badge-roxo, .badge-descartado { background: var(--roxo-suave); color: var(--roxo); }

/* AVATAR — círculo AZUL CHEIO com as iniciais em branco (ordem do dono, 08/09, olhando o FlowSeller Pro:
   "veja que é azul, quero deixar parecido, mesma cor"). O azul é o mesmo --primary #0D6EFD de sempre; branco
   sobre ele mede 4,50:1, acima do mínimo de 4,5 do DESIGN-2 §8.
   ⛔ Isto é identidade/navegação, NÃO é o trilho da cobrança (DESIGN-2 §2): o azul aqui não diz nada sobre dívida. */
.avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff;
  display: inline-grid; place-items: center; font-weight: 600; font-size: var(--fs-micro); flex: none; overflow: hidden;
}
/* .avatar.claro = o fundo suave de antes. Use quando o avatar já estiver POR CIMA de azul (balão de saída,
   cabeçalho azul, seleção bem marcada) e o círculo cheio sumiria dentro do fundo. */
.avatar.claro { background: var(--primary-suave); color: var(--primary-escuro); }
.avatar.g { width: 40px; height: 40px; font-size: var(--fs-sec); }
.avatar.p { width: 24px; height: 24px; font-size: var(--fs-micro); }

/* ══════════════════════════════════════════════════════════════════════ 11. FORMULÁRIOS */
.campo { display: flex; flex-direction: column; gap: var(--e1); margin-bottom: var(--e3); min-width: 0; }
.campo label, .rotulo-campo { font-size: 12.5px; font-weight: 500; color: var(--texto-fraco); }
.campo .ajuda { font-size: 12.5px; color: var(--texto-apagado); }
.campo .erro-campo { font-size: 12.5px; color: var(--vermelho); font-weight: 500; }
.input, .select, .textarea,
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search],
input[type=tel], input[type=url], input[type=date], input[type=time], input[type=datetime-local], select, textarea {
  width: 100%; min-height: var(--a-campo); padding: 7px var(--e3); line-height: 1.35;
  border: 1px solid var(--linha-forte); border-radius: var(--raio-btn);
  background: var(--surface); color: var(--texto); font-size: var(--fs-corpo); outline: none;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
textarea, .textarea { line-height: 1.5; }   /* texto longo continua com 1,5 */
input[type=time], input[type=date], input[type=datetime-local] { line-height: 1.2; height: var(--a-campo); }
select, .select { padding-right: 30px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; }
input:focus, select:focus, textarea:focus, .input:focus, .select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-suave); }
input:disabled, select:disabled, textarea:disabled { background: var(--bg); color: var(--texto-apagado); }
input::placeholder, textarea::placeholder { color: var(--texto-apagado); }
textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
input[type=checkbox], input[type=radio] { min-height: 0; accent-color: var(--primary); width: 16px; height: 16px; }
input[type=file] { border: 0; padding: 0; min-height: 0; }
.input.full, .select.full { width: 100%; }
.linha { display: flex; gap: var(--e3); min-width: 0; }
.linha > * { flex: 1; min-width: 0; }
.busca { position: relative; min-width: 0; }
.toolbar .busca, .barra .busca { flex: 1 1 240px; min-width: 220px; max-width: 420px; }
.busca input { padding-left: 34px; width: 100%; }
.busca svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--texto-apagado); pointer-events: none; }
.interruptor { position: relative; display: inline-flex; align-items: center; gap: var(--e2); cursor: pointer; min-height: 28px; }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor .trilho { width: 34px; height: 20px; border-radius: 999px; background: var(--linha-forte); position: relative; transition: background var(--transicao); flex: none; }
.interruptor .trilho::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform var(--transicao); }
.interruptor input:checked + .trilho { background: var(--primary); }
.interruptor input:checked + .trilho::after { transform: translateX(14px); }
.interruptor input:focus-visible + .trilho { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ══════════════════════════════════════════════════════════════════════ 12. MODAL */
.modal-fundo { position: fixed; inset: 0; background: rgba(17, 24, 39, .40); display: grid; place-items: center; z-index: 100; padding: var(--e5); animation: aparecer .12s ease; }
.modal { background: var(--surface); border-radius: var(--raio-painel); box-shadow: var(--sombra-modal); width: 100%; max-width: 480px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; min-width: 0; }
.modal.g { max-width: 640px; }
.modal.gg { max-width: 800px; }
.modal-cabecalho h2, .gaveta-cabecalho h2 { font-size: 15px; }   /* título de MODAL/GAVETA 15/620 (§6) */
.modal-cabecalho { display: flex; align-items: center; gap: var(--e2); padding: var(--e4) var(--e5) var(--e3); border-bottom: 1px solid var(--linha); }
.modal-cabecalho h2 { margin-right: auto; min-width: 0; font-size: 15px; font-weight: 620; }
.modal-corpo { padding: var(--e4) var(--e5); overflow: auto; min-height: 0; }
.modal-rodape { display: flex; justify-content: flex-end; gap: var(--e2); padding: var(--e3) var(--e5) var(--e4); border-top: 1px solid var(--linha); flex-wrap: wrap; }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

/* ══════════════════════════════════════════════════════════════════════ 13. TOAST */
.toasts { position: fixed; right: var(--e5); bottom: var(--e5); display: flex; flex-direction: column; gap: var(--e2); z-index: 200; max-width: 380px; }
.toast { background: var(--texto); color: #fff; padding: var(--e2) var(--e3); border-radius: var(--raio-btn); box-shadow: var(--sombra-modal); font-size: var(--fs-sec); display: flex; gap: var(--e2); align-items: flex-start; animation: subir .18s ease; }
.toast.ok { background: var(--verde-escuro); }
.toast.erro { background: var(--vermelho); }
.toast.aviso { background: var(--ambar); }
.toast .fechar { margin-left: auto; opacity: .75; cursor: pointer; background: none; border: 0; color: inherit; padding: 0 2px; font-size: 16px; line-height: 1; min-width: 24px; min-height: 24px; }
@keyframes subir { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ══════════════════════════════════════════════════════════════════════ 14. CAIXA DE ENTRADA (base) */
/* Três colunas ENCOSTADAS, separadas por fio: lista 344 · conversa flexível · ficha 320. Nenhuma tem sombra. */
.inbox-grid {
  display: grid; grid-template-columns: var(--ib-lista-l) minmax(0, 1fr) var(--ib-ficha-l);
  height: calc(100vh - var(--header-a)); background: var(--surface);
}
.inbox-lista { border-right: 1px solid var(--linha); display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--surface); }
.inbox-lista-filtros { padding: var(--e3); border-bottom: 1px solid var(--linha); display: flex; flex-direction: column; gap: var(--e2); }
.inbox-lista-itens { flex: 1; overflow-y: auto; }
/* ⛔ sem transição no hover de linha e de item de menu: o realce entra na hora, como no Intercom */
.conversa-item { display: flex; gap: var(--e3); padding: var(--e3) var(--e4); min-height: var(--a-linha-lista); border-bottom: 1px solid var(--linha); cursor: pointer; }
.conversa-item:hover { background: var(--surface-2); }
.conversa-item.ativa { background: var(--primary-suave); }
.conversa-item.ativa .nome { color: var(--primary-escuro); }
.conversa-item .texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.conversa-item .topo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e2); }
.conversa-item .nome { font-weight: 600; font-size: var(--fs-corpo); color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversa-item .hora { color: var(--texto-apagado); font-size: var(--fs-micro); font-weight: 500; flex: none; }
.conversa-item .preview { color: var(--texto-fraco); font-size: var(--fs-sec); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversa-item .rodape { display: flex; align-items: center; gap: var(--e2); font-size: var(--fs-micro); color: var(--texto-apagado); min-width: 0; }
.conversa-item.nao-lida .nome { font-weight: 650; }
.conversa-item .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex: none; }

.inbox-conversa { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--surface); }
.inbox-conversa-topo { min-height: 60px; padding: var(--e2) var(--e4); border-bottom: 1px solid var(--linha); background: var(--surface); display: flex; align-items: center; gap: var(--e3); min-width: 0; }
.inbox-mensagens { flex: 1; overflow-y: auto; padding: var(--e4) var(--e5); display: flex; flex-direction: column; gap: var(--e3); background: var(--surface); }
/* ⭐ 22/09/2026 — ORDEM DO DONO: "o ajuste era para as linhas ficarem mais corretas para não
   ficarem tão esticadas, pegar a ideia do notas". 68% sozinho não incomoda no celular (68% de uma
   tela estreita já é pouco), mas numa janela larga de PC vira um balão de 600px+ e a linha de
   texto estica de ponta a ponta — a MESMA doença que a nota interna teve e foi corrigida com
   max-width min(520px, 92%) (project_rodada_correcoes_1909). Aqui o teto vem PRIMEIRO: 520px é
   o mesmo número já aprovado pelo dono para leitura confortável; os 68% continuam de reserva para
   telas estreitas, onde 520px nunca chega a mandar. ⛔ .balao-foto (abaixo) já é mais estreito que
   isso e continua intocado — a regra mais específica sempre vence. */
.balao { max-width: min(520px, 68%); padding: var(--e2) var(--e3); border-radius: var(--raio-painel); font-size: var(--fs-corpo); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.balao.in { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--linha); color: var(--texto-corpo); border-bottom-left-radius: var(--e1); }
.balao.out { align-self: flex-end; background: var(--primary-suave); color: var(--texto); border-bottom-right-radius: var(--e1); }
.balao .meta { display: flex; justify-content: flex-end; gap: 6px; margin-top: var(--e1); font-size: var(--fs-micro); font-weight: 500; color: var(--texto-apagado); }
.balao .meta .ticks { letter-spacing: -2px; }
.balao .meta .ticks.lido { color: var(--primary); }
.balao .meta .ticks.falhou { color: var(--vermelho); }
.balao .botoes { display: flex; flex-direction: column; gap: var(--e1); margin-top: var(--e2); }
.balao .botoes span { background: var(--surface); border: 1px solid var(--linha-forte); border-radius: 999px; padding: 5px var(--e3); text-align: center; color: var(--primary); font-weight: 500; font-size: var(--fs-sec); }
.balao.sombra { outline: 1px dashed var(--ambar); }
/* 21/09 — link dentro do balao. No balao de SAIDA (fundo azul) o azul do tema sumiria: herda a cor
   do proprio balao e se distingue pelo sublinhado. */
.balao-link { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.balao-link:hover { text-decoration-thickness: 2px; }
.balao.out .balao-link { color: inherit; }
/* ---- balão: complementos que moravam só no CSS embutido da inbox.js herdada e que a caixa nova
   (telas/caixa.js, E4) também usa — trazidos para cá pelo integrador (11/09). Classe usada no JS que
   não existe no CSS não estoura erro no console e já escondeu uma faixa de emergência em produção. */
.balao.junto { margin-top: calc(-1 * var(--e2)); }
.balao.in .meta { justify-content: flex-start; }
.balao .meta .selo-sombra-mini { background: var(--ambar-suave); color: var(--ambar-texto); font-weight: 600; font-size: var(--fs-micro); padding: 0 6px; border-radius: var(--raio-chip); }
.balao .tpl { font-size: var(--fs-micro); font-weight: 500; color: var(--texto-fraco); margin-bottom: var(--e1); }
.balao .erro { color: var(--vermelho); font-size: var(--fs-micro); margin-top: var(--e1); }
.balao .anexo { font-size: var(--fs-sec); color: var(--texto-fraco); }
/* ⛔⛔ 22/09/2026 — ORDEM DO DONO: "ajeitar o contexto de escrita... igual o problema das notas
   internas que tomava de ponta a ponta... quebra melhor de linhas e diminuição em pelo menos 30%
   do tamanho da imagem". MEDIDO no print do Patrick (foto "Serviço Agendado com Sucesso" + legenda
   longa): a foto tinha teto de 260px, mas o BALÃO em volta dela ⛔ não tinha teto nenhum amarrado a
   isso — um balão é um item flex que encolhe para caber o conteúdo (align-self flex-start/end),
   e o algoritmo do navegador, para achar essa largura, tenta equilibrar as linhas da LEGENDA; com
   um parágrafo comprido isso dá um balão bem mais largo que a foto de 260px. O texto então some
   "para o lado" da foto, em vez de quebrar por baixo dela — a MESMA doença da nota interna antiga
   (align-self stretch, max-width 100%), só que pelo lado da largura mínima, não da máxima.
   ⭐ O CONSERTO É O MESMO ESPÍRITO WHATSAPP: o balão que tem foto ⛔ não pode ser mais largo do que
   a própria foto — a legenda quebra DENTRO dessa largura, nunca ao lado. A classe balao-foto é
   marcada pelo JS (caixa.js, função balao()) sempre que a mensagem é uma foto de verdade (tipo
   image + já baixada); 182px = a foto (abaixo, 30% menor: 260 vezes 0,7 = 182) + o respiro --e3 de
   cada lado. */
.balao img { max-width: 182px; border-radius: var(--raio-btn); display: block; margin-bottom: var(--e1); }
.balao.balao-foto { max-width: min(206px, 68%); }
.balao .anexo-foto { display: block; margin-bottom: var(--e1); border-radius: var(--raio-btn); }
/* 19/09 (dono: "imagem ta indo mal feita"): PNG com fundo transparente pintado sobre o balao
   azul-escuro apagava o texto da arte. O WhatsApp mostra foto sobre fundo claro; aqui tambem.
   O arquivo enviado ao cliente e o original - isto e so a exibicao na tela. */
.balao .anexo-foto img { margin-bottom: 0; background: #fff; }
.balao .anexo-foto:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.balao .anexo-figurinha { max-width: 140px; margin-bottom: var(--e1); }
/* player nativo: largura fixa + max-width, senão o Chromium colapsa o <audio> para ~110 px */
.balao .anexo-audio { width: 280px; max-width: 100%; }
.balao .anexo-audio audio { width: 100%; height: 40px; display: block; }
.balao .anexo-video video { width: 300px; max-width: 100%; max-height: 320px; height: auto; border-radius: var(--raio-btn); display: block; background: #000; }
.balao .anexo-pe { font-size: var(--fs-micro); color: var(--texto-apagado); margin-top: var(--e1); }
.balao .anexo-doc { display: flex; align-items: center; gap: var(--e2); max-width: 300px; padding: var(--e2); margin-bottom: var(--e1);
  background: var(--surface); border: 1px solid var(--linha); border-radius: var(--raio-btn); color: var(--texto-corpo); text-decoration: none; }
.balao .anexo-doc .ico { flex: none; width: 20px; height: 20px; color: var(--texto-fraco); }
.balao .anexo-doc-nome { flex: 1; min-width: 0; font-size: var(--fs-sec); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balao .anexo-doc-abrir { flex: none; font-size: var(--fs-micro); font-weight: 600; color: var(--primary); }
.balao .anexo-doc:hover { border-color: var(--linha-forte); }
.balao .anexo-falhou { display: inline-block; color: var(--ambar-texto); background: var(--ambar-suave);
  border-radius: var(--raio-chip); padding: 2px var(--e2); font-weight: 500; }
.balao .botoes { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.ib-sistema { align-self: center; max-width: 90%; text-align: center; font-size: var(--fs-micro); font-weight: 500; color: var(--texto-apagado); background: var(--surface-2); border: 1px solid var(--linha); padding: 3px var(--e3); border-radius: 999px; }
/* NÃO ENVIAR (etiqueta de sistema 'ban' vista pelo humano) — no topo da conversa e na ficha */
.selo-nao-enviar { display: inline-flex; align-items: center; gap: 4px; flex: none;
  background: var(--vermelho); color: #fff; border-radius: var(--raio-chip);
  padding: 0 7px; height: 19px; font-size: 11.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.dia-separador { align-self: center; font-size: var(--fs-micro); font-weight: 500; color: var(--texto-apagado); background: var(--surface-2); border: 1px solid var(--linha); padding: 2px var(--e3); border-radius: 999px; margin: var(--e1) 0; }

.composer { background: var(--surface); padding: var(--e4); display: flex; flex-direction: column; gap: var(--e2); }
.composer-caixa { border: 1px solid var(--linha-forte); border-radius: var(--raio-painel); background: var(--surface); padding: var(--e2); display: flex; flex-direction: column; gap: var(--e2); transition: border-color var(--transicao), box-shadow var(--transicao); }
.composer-caixa:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-suave); }
.composer textarea { min-height: 44px; max-height: 160px; border: 0; padding: var(--e2); border-radius: var(--raio-chip); }
.composer textarea:focus { box-shadow: none; }
.composer .acoes { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.composer .acoes .espaco { flex: 1; }
.composer .aviso-janela { font-size: 12.5px; color: var(--ambar-texto); }

.inbox-contato { border-left: 1px solid var(--linha); overflow-y: auto; background: var(--surface); min-width: 0; display: flex; flex-direction: column; }
.inbox-contato .secao-titulo { font-size: var(--fs-titulo-secao); font-weight: 620; color: var(--texto); margin-bottom: var(--e2); }
.lista-kv { display: grid; grid-template-columns: auto 1fr; gap: var(--e1) var(--e3); font-size: var(--fs-sec); align-items: baseline; }
.lista-kv dt { color: var(--texto-fraco); }
.lista-kv dd { margin: 0; font-weight: 500; color: var(--texto); word-break: break-word; }
.inbox-vazio { display: grid; place-items: center; color: var(--texto-fraco); height: 100%; }

/* ══════════════════════════════════════════════════════════════════════ 15. GAVETA (folha lateral) */
.gaveta-fundo { position: fixed; inset: 0; background: rgba(17, 24, 39, .30); z-index: 90; }
.gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100vw; background: var(--surface); box-shadow: var(--sombra-modal); z-index: 91; display: flex; flex-direction: column; animation: deslizar .18s ease; }
.gaveta-cabecalho { display: flex; align-items: center; gap: var(--e2); padding: var(--e4) var(--e5); border-bottom: 1px solid var(--linha); flex: none; }
.gaveta-cabecalho h2 { margin-right: auto; min-width: 0; }
.gaveta-corpo { flex: 1; overflow: auto; padding: var(--e4) var(--e5); }
@keyframes deslizar { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ══════════════════════════════════════════════════════════════════════ 16. ABAS E PASSOS */
/* pílula discreta: a ativa é branca com fio; as outras não têm fundo nenhum */
.abas { display: inline-flex; gap: var(--e1); margin-bottom: var(--e3); max-width: 100%; overflow-x: auto; }
.aba { display: inline-flex; align-items: center; gap: 6px; padding: 0 var(--e3); min-height: var(--a-btn-p); border-radius: var(--raio-btn); color: var(--texto-fraco); font-weight: 500; font-size: var(--fs-sec); cursor: pointer; white-space: nowrap; border: 1px solid transparent; background: transparent; transition: background var(--transicao), color var(--transicao), border-color var(--transicao); }
.aba:hover { color: var(--texto); background: var(--surface-2); }
.aba .conta, .aba b { color: var(--texto-apagado); font-weight: 500; font-variant-numeric: tabular-nums; }
/* ATIVA = AZUL CHEIO com texto branco — é o controle segmentado do FlowSeller Pro ("Humano | Bot"), pedido do
   dono em 08/09. Branco sobre --primary mede 4,50:1 (DESIGN-2 §8). ⛔ Sem movimento no hover: só cor. */
.aba.ativa { color: #fff; background: var(--primary); border-color: var(--primary); font-weight: 600; }
.aba.ativa:hover { color: #fff; background: var(--primary-escuro); border-color: var(--primary-escuro); }
/* a contagem fica em BRANCO CHEIO: sobre --primary só o branco puro chega a 4,5:1 — qualquer branco
   transparente cai para ~3,5 e reprovaria (DESIGN-2 §8). O que baixa o tom dela é o peso, não a cor. */
.aba.ativa .conta, .aba.ativa b { color: #fff; font-weight: 500; }
.aba.ativa .ico { opacity: 1; }
.passos { display: flex; gap: 6px; align-items: center; margin-bottom: var(--e4); font-size: var(--fs-sec); color: var(--texto-fraco); flex-wrap: wrap; }
.passo { display: flex; align-items: center; gap: 6px; }
.passo .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--linha); font-weight: 600; font-size: var(--fs-micro); }
.passo.ativo { color: var(--texto); font-weight: 600; }
.passo.ativo .n { background: var(--primary); border-color: var(--primary); color: #fff; }
.passo.feito .n { background: var(--verde); border-color: var(--verde); color: #fff; }
.passo-sep { flex: 0 0 24px; height: 1px; background: var(--linha-forte); }

/* ══════════════════════════════════════════════════════════════════════ 17. ESTADOS */
/* ---- carregando: esqueleto cinza com pulso suave. ⛔ Nunca "Carregando…" solto ---- */
.esqueleto { display: block; background: #e9ecf1; border-radius: var(--raio-chip); animation: esqueleto-pulso 1.4s ease-in-out infinite; }
.esqueleto-titulo { height: 20px; width: 200px; max-width: 60%; border-radius: var(--raio-chip); }
.esqueleto-linha { height: 12px; width: 100%; }
.esqueleto-linha.curta { width: 40%; }
.esqueleto-linha.media { width: 70%; }
.esqueleto-bloco { height: 88px; width: 100%; border-radius: var(--raio-painel); }
.esqueleto-circulo { width: 32px; height: 32px; border-radius: 50%; flex: none; }
.esqueleto-lista { display: flex; flex-direction: column; gap: var(--e3); }
/* Estrela do favorito: pulso curto SO quando marca (confirma o clique). Ela fica acesa depois -- e a
   marca de "responder com prioridade" que a equipe inteira ve. A classe some sozinha no animationend. */
@keyframes estrela-pop { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }
.pop-estrela { animation: estrela-pop 180ms ease-out; }

@keyframes esqueleto-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.carregando-tela { display: flex; flex-direction: column; gap: var(--e3); padding: var(--e1) 0; max-width: 960px; }
.conteudo.cheia > .carregando-tela { padding: var(--e6); }

/* ---- vazio ---- */
.vazio { padding: var(--e8) var(--e5); text-align: center; color: var(--texto-fraco); font-size: var(--fs-sec); display: flex; flex-direction: column; align-items: center; gap: var(--e1); }
.vazio strong { display: block; color: var(--texto); font-size: var(--fs-corpo); font-weight: 600; }
.vazio .btn, .vazio a.btn { margin-top: var(--e2); }
.vazio > a:not(.btn) { margin-top: var(--e1); }

/* ---- alertas ---- */
.alerta { padding: var(--e2) var(--e3); border-radius: var(--raio-btn); font-size: var(--fs-sec); line-height: 1.5; border: 1px solid transparent; }
.alerta-info { background: var(--primary-suave); color: #0b3d91; border-color: var(--primary-linha); }
.alerta-aviso { background: var(--ambar-suave); color: var(--ambar-texto); border-color: #f2dcb4; }
.alerta-erro { background: var(--vermelho-suave); color: var(--vermelho-texto); border-color: #f3bcbc; }
.alerta-ok { background: var(--verde-suave); color: var(--verde-escuro); border-color: #b7e3c8; }

/* ---- progresso ---- */
.progresso { height: 6px; background: #e9ecf1; border-radius: 999px; overflow: hidden; }
.progresso > i { display: block; height: 100%; background: var(--primary); border-radius: 999px; transition: width .3s ease; }
.progresso.verde > i { background: var(--verde); }
.grade-svg { width: 100%; height: auto; display: block; }

/* ══════════════════════════════════════════════════════════════════════ 18. UTILITÁRIOS */
.flex { display: flex; } .flex-col { flex-direction: column; } .centro { align-items: center; } .entre { justify-content: space-between; } .wrap { flex-wrap: wrap; }
.gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; }
.muted { color: var(--texto-fraco); } .pequeno { font-size: var(--fs-sec); } .mini { font-size: var(--fs-micro); }
.bold { font-weight: 600; color: var(--texto); } .num { font-variant-numeric: tabular-nums; }
.verde { color: var(--verde-escuro); } .vermelho { color: var(--vermelho); } .ambar { color: var(--ambar-texto); } .roxo { color: var(--roxo); }
.direita { text-align: right; } .centro-txt { text-align: center; }
.cortar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quebra { white-space: pre-wrap; word-break: break-word; }
.w-100 { width: 100%; } .max-720 { max-width: 720px; } .max-960 { max-width: 960px; }
.clicavel { cursor: pointer; }
.só-mobile { display: none; }
.separador { height: 1px; background: var(--linha); margin: var(--e3) 0; }
.codigo-copiar { display: flex; gap: var(--e2); align-items: center; background: var(--surface-2); border: 1px solid var(--linha); border-radius: var(--raio-btn); padding: var(--e2) var(--e3); word-break: break-all; font-size: var(--fs-sec); }

/* ══════════════════════════════════════════════════════════════════════ 19. LOGIN */
.login-card { width: 100%; max-width: 400px; }
.login-card .card-corpo { padding: var(--e8) var(--e8) var(--e6); }
.login-marca { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e5); }
.login-marca .marca-icone { width: 36px; height: 36px; font-size: 16px; }
.login-marca h1 { font-size: 17px; font-weight: 650; }
.login-marca .sub { font-size: var(--fs-sec); color: var(--texto-fraco); }

/* ══════════════════════════════════════════════════════════════════════ 20. RESPONSIVO */
@media (max-width: 1100px) {
  /* duas colunas: a lista nasce menor e cresce menos, senão a conversa fica espremida */
  :root { --ib-lista-l: 300px; --ib-lista-l-max: 360px; --ib-ficha-l: 300px; }
  .inbox-grid { grid-template-columns: var(--ib-lista-l) minmax(0, 1fr); }
  .inbox-contato { display: none; }
  .inbox-grid.mostrar-contato .inbox-contato { display: flex; position: fixed; right: 0; top: var(--header-a); bottom: 0; width: 320px; background: var(--surface); z-index: 45; box-shadow: var(--sombra-modal); }
}

@media (max-width: 900px) {
  :root { --alvo: 44px; }

  /* menu vira drawer */
  .sidebar { transform: translateX(-100%); width: min(288px, 84vw); background: var(--surface); }
  body.menu-aberto .sidebar { transform: none; box-shadow: var(--sombra-modal); }
  body.menu-aberto .sidebar-overlay { opacity: 1; pointer-events: auto; }
  body.menu-aberto { overflow: hidden; }
  .principal { margin-left: 0; }
  .só-mobile { display: inline-flex; }
  .só-desktop { display: none !important; }
  .nav-item { height: var(--alvo); }
  .nav-item.sub { height: 40px; }
  /* na gaveta o fundo é branco e as linhas são altas: a alternância precisa de um tom a mais para ler */
  .sidebar-nav > .nav-item:nth-of-type(even):not(.ativo),
  .nav-grupo > .nav-item:nth-of-type(even):not(.ativo) { background: var(--bg); }

  /* cabeçalho compacto em UMA linha: ☰ · Financeiro Pro · SOMBRA · avatar */
  .header { padding: 0 var(--e3); gap: var(--e2); }
  .header-numero { display: none; }
  .header-conta { flex: 1 1 auto; min-width: 0; }
  .header-espaco { display: none; }
  .header-usuario { padding: 0; border-radius: 50%; width: var(--alvo); height: var(--alvo); justify-content: center; }
  .header-usuario .usuario-nome, .header-usuario .usuario-papel { display: none; }
  .popover-usuario { right: var(--e3); }

  .conteudo { padding: var(--e4) var(--e3); }

  /* cabeçalho da página: título em cima, ações em 2 por linha (ou 100%) */
  .pagina-cabecalho, .tela-cabecalho { gap: var(--e2) var(--e3); }
  .pagina-cabecalho .tela-sub, .tela-cabecalho .tela-sub { flex: 1 1 auto; }
  .pagina-cabecalho > .btn, .tela-cabecalho > .btn, .pagina-cabecalho .acoes > .btn, .tela-cabecalho .acoes > .btn { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .pagina-cabecalho .acoes, .tela-cabecalho .acoes { flex: 1 1 100%; }
  .pagina-cabecalho .acoes > .btn:only-child, .tela-cabecalho .acoes > .btn:only-child { flex-basis: 100%; }

  /* toolbar empilha: busca 100%, selects e botões 2 por linha */
  .toolbar, .barra { gap: var(--e2); }
  .toolbar .busca, .barra .busca { flex: 1 1 100%; max-width: none; min-width: 0; }
  .toolbar .espaco, .barra .espaco { display: none; }
  .toolbar > .btn, .barra > .btn, .toolbar > .select, .toolbar > select, .barra > .select, .barra > select,
  .toolbar > .input, .barra > .input, .toolbar > label:not(.busca), .barra > label:not(.busca) { flex: 1 1 calc(50% - 4px); min-width: 0; width: auto; }
  .toolbar > .chips, .barra > .chips { flex: 1 1 100%; }

  /* uma coluna por vez (DESIGN-2 §7): campo lado a lado empilha em vez de espremer */
  .linha { flex-wrap: wrap; }
  .linha > * { flex: 1 1 100%; }

  .grid-kpi, .cards-grid { gap: var(--e2); }
  .grid-kpi > *, .cards-grid > * { flex-basis: 150px; }

  .tablewrap, .tabela-wrap { max-height: none; }
  .paginacao { gap: var(--e2); }
  .paginacao > span:first-child { flex: 1 1 100%; }
  .paginacao .espaco { display: none; }
  .paginacao .btn { flex: 1 1 auto; }

  /* modal cola embaixo, largura total, cantos 12 em cima */
  .modal-fundo { padding: 0; place-items: end center; }
  .modal, .modal.g, .modal.gg { max-width: 100%; max-height: 94vh; border-radius: var(--raio-painel) var(--raio-painel) 0 0; }
  .modal-rodape .btn { flex: 1 1 calc(50% - 4px); }
  .toasts { left: var(--e3); right: var(--e3); bottom: var(--e3); max-width: none; }
  .gaveta { width: 100vw; }

  .inbox-grid { grid-template-columns: minmax(0, 1fr); }
  .inbox-lista { display: none; border-right: 0; }
  .inbox-grid.mostrar-lista .inbox-lista { display: flex; }
  .inbox-grid.mostrar-lista .inbox-conversa { display: none; }
  .inbox-grid.mostrar-contato .inbox-contato { width: 100vw; }
  .inbox-mensagens { padding: var(--e3); }
  .composer { padding: var(--e3) var(--e3) calc(var(--e3) + env(safe-area-inset-bottom)); }
  .balao { max-width: 86%; }
}

/* ══════════════════════════════════════════════ 20. SANFONA DA BARRA LATERAL (só no computador)
   Pedido do dono (08/09): "clicar em uma parte e ele praticamente sumir, na verdade amassar e ficar
   ícones pequenos, eu ter as duas formas." São DOIS tamanhos da MESMA barra — larga (232) e encolhida
   (64, só ícone). A escolha vive em localStorage "fp.menu.encolhido" (app.js) e volta ao recarregar.
   ⛔ No celular NADA disso vale: lá a barra é a gaveta de sempre. Por isso tudo mora em ≥ 901 px. */

/* o botão existe nos dois estados; encostado no rodapé da barra */
.sidebar-recolher {
  display: flex; align-items: center; gap: var(--e2); flex: none;
  height: 34px; margin: 0 var(--e3) var(--e3); padding: 0 var(--e2);
  border: 1px solid transparent; border-radius: var(--raio-btn);
  background: transparent; color: var(--texto-fraco);
  font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1;
  white-space: nowrap; cursor: pointer; text-align: left;
  transition: background var(--transicao), color var(--transicao), transform 80ms ease;
}
.sidebar-recolher:hover { background: rgba(17, 24, 39, .06); color: var(--texto); }
/* MOVIMENTO (DESIGN-2 §9): afunda 1 px enquanto está pressionado — confirma o clique. ⛔ nada no hover. */
.sidebar-recolher:active { transform: translateY(1px); }
.sidebar-recolher .seta { transition: none; }

@media (min-width: 901px) {
  /* ⛔ A TROCA DE TAMANHO É SECA, sem transição — e isso foi MEDIDO, não é gosto (08/09).
     Animar 'width' da barra + 'margin-left' do conteúdo anima LAYOUT: os dois juntos pegam qualquer
     mudança de viewport, não só o clique. Prova 1: estreitando a janela para 700 px e voltando para
     1440, a barra ficava 180 ms em 288 px com o conteúdo em margin-left 0 — o conteúdo passava POR
     BAIXO da barra, sem ninguém ter clicado em nada (DESIGN-2 §9: movimento só confirma uma AÇÃO).
     Prova 2: a captura de página inteira (a forma como esta casa prova tudo) mostrava a barra em 64 px
     com o body SEM a classe 'menu-encolhido' — a foto mentia em toda tela mais alta que a janela.
     Com uma das duas transições sozinha o defeito some, mas aí a barra e o conteúdo andam em tempos
     diferentes e o conteúdo fica embaixo da barra no meio do caminho. Então: nenhuma das duas.
     O clique já se confirma sozinho — o botão afunda 1 px, a seta vira 180° e a barra inteira troca. */
  body.menu-encolhido .sidebar { width: var(--sidebar-l-min); }
  body.menu-encolhido .principal { margin-left: var(--sidebar-l-min); }

  /* ⭐ os 168 px que a barra devolve NÃO viram vão na conversa: engordam a lista da caixa de
     entrada, que é onde o nome do cliente vinha cortado. A variável desce por herança até
     .inbox-grid (aqui e no CSS da própria tela), então basta trocá-la no body. */
  body.menu-encolhido { --ib-lista-l: var(--ib-lista-l-max); }

  /* marca vira só o quadrado "F" */
  body.menu-encolhido .sidebar-marca { justify-content: center; padding: 0; }
  body.menu-encolhido .marca-texto { display: none; }

  /* item: só o ícone, centralizado. O rótulo continua no DOM (leitor de tela lê), some da vista. */
  body.menu-encolhido .sidebar-nav { padding: var(--e2) var(--e2) var(--e4); }
  body.menu-encolhido .nav-item,
  body.menu-encolhido .nav-grupo .nav-item { position: relative; justify-content: center; gap: 0; padding: 0; }
  body.menu-encolhido .nav-item > span:not(.nav-badge) {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  body.menu-encolhido .nav-item .ico { width: 18px; height: 18px; opacity: 1; }

  /* rótulo do grupo vira um FIO de separação (o fio do próprio .nav-grupo) */
  body.menu-encolhido .nav-grupo-titulo { display: none; }
  body.menu-encolhido .nav-grupo { margin-top: var(--e3); padding-top: var(--e3); }

  /* contagem de não lidas continua visível: número pequeno sobre o canto do ícone */
  body.menu-encolhido .nav-badge {
    position: absolute; top: 0; right: 2px; margin: 0;
    height: 16px; line-height: 16px; padding: 0 4px; min-width: 16px;
    border: 1.5px solid var(--bg);
  }

  /* rodapé do tempo real vira só a bolinha (o texto continua no DOM; a dica está no title) */
  body.menu-encolhido .sidebar-rodape { justify-content: center; padding: var(--e3) 0; }
  body.menu-encolhido .versao { display: none; }
  body.menu-encolhido .sse-estado { font-size: 0; gap: 0; }
  body.menu-encolhido .sse-estado i { width: 8px; height: 8px; }

  /* botão de recolher: só a seta, virada para o outro lado */
  body.menu-encolhido .sidebar-recolher { justify-content: center; margin: 0 var(--e2) var(--e3); padding: 0; }
  body.menu-encolhido .sidebar-recolher-txt {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  body.menu-encolhido .sidebar-recolher .seta { transform: rotate(180deg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  /* esqueleto sem pulso: fica no cinza cheio, sem piscar */
  .esqueleto { animation: none !important; opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════════ 21. DEGRAUS DA CAIXA (08/09)
   As colunas laterais crescem por FAIXA de tela, com px puro. Quanto maior o monitor, mais larga a lista —
   mas a conversa continua sendo a maior coluna em qualquer tamanho, que era o defeito de antes. */
@media (min-width: 1500px) { :root { --ib-lista-l: 320px; --ib-lista-l-max: 384px; --ib-ficha-l: 300px; } }
@media (min-width: 1800px) { :root { --ib-lista-l: 344px; --ib-lista-l-max: 424px; --ib-ficha-l: 320px; } }
@media (min-width: 2200px) { :root { --ib-lista-l: 344px; --ib-lista-l-max: 480px; --ib-ficha-l: 320px; } }

/* ══════════════════════════════════════════════════════════════════════ 22. FICHA RECOLHIDA (08/09)
   Um ícone no cabeçalho da conversa esconde a coluna da direita e devolve a largura para a conversa.
   Só no computador: abaixo de 1101 px a ficha já é uma gaveta e o botão não aparece. */
@media (min-width: 1101px) {
  body.ficha-recolhida .inbox-grid { grid-template-columns: var(--ib-lista-l) minmax(0, 1fr); }
  body.ficha-recolhida .inbox-contato { display: none; }
}

/* ===== Densidade do menu por ALTURA de tela (18/09) =====================================================
   Ordem do dono: "tenta fazer não precisar dessa barra de descida, somente se o monitor for pequeno".
   MEDIDO no navegador: tudo aberto, o menu do dono mede 850 px a 30/27 px por item. Numa janela de 1080 px
   inteira cabe, mas o Chrome real come ~130 px de abas e endereço — sobram ~735 para o menu. Por isso:
     · até 1000 px de altura útil (1080p real): item 27/25 px sem margem, grupo com menos respiro → 594 px
       com Definições fechado (nasce assim, comp/menu_grupos.js), 744 px com tudo aberto;
     · até 820 px (notebook 1080p a 125 %, 1366×768): 25/23 px → cabe com Definições fechado.
   Fica NO FIM do arquivo de propósito: .sidebar-recolher (height fixo de 34 px) e .sidebar-rodape são
   declarados antes com a mesma especificidade — aqui embaixo é a ordem que decide. Em monitor alto nada
   muda. */
.sidebar-recolher { height: 32px; margin-bottom: var(--e2); }
@media (max-height: 1000px) {
  .sidebar-nav { padding: 4px var(--e3) 4px; }
  .nav-item { height: 27px; margin: 0; }
  .nav-item.sub { height: 25px; }
  .nav-grupo { margin-top: 6px; padding-top: 4px; }
  .sidebar-recolher { height: 30px; margin-bottom: 6px; }
  .sidebar-rodape { padding: 4px var(--e3); }
}
@media (max-height: 820px) {
  .sidebar-nav { padding: 2px var(--e3) 2px; }
  .nav-item { height: 25px; }
  .nav-item.sub { height: 23px; }
  .nav-grupo { margin-top: 4px; padding-top: 2px; }
  .nav-grupo-titulo { padding-bottom: 2px; }
  .sidebar-recolher { height: 28px; margin-bottom: 4px; }
  .sidebar-rodape { padding: 3px var(--e3); }
}

/* ===== Símbolo da WebFiber (18/09) ======================================================================
   Ordem do dono: "bota no canto direito apenas o símbolo da webfiber sem a escrita". O símbolo (os três
   círculos, recortado do logo oficial em static/img/simbolo-webfiber-*.png, fundo transparente) fica no
   canto direito do cabeçalho; o mesmo símbolo troca o "A" genérico da barra lateral e do login. */
.header-marca { width: 28px; height: 28px; flex: none; margin-left: var(--e2); object-fit: contain; user-select: none; }
.marca-icone.marca-simbolo { background: transparent; border-radius: 0; object-fit: contain; padding: 0; }
@media (max-width: 900px) { .header-marca { width: 24px; height: 24px; margin-left: var(--e1); } }

/* 18/09, ordem do dono apontando o "73" ao lado de Caixa de Entrada: "isso não existe" e depois "pode
   tirar isso também". O número era a soma de não lidas de TODA a caixa (inclusive o que não é da pessoa)
   e não bate com nada da Smart. Some da tela; o app.js continua escrevendo nele sem quebrar. */
.sidebar-nav #badge-nao-lidas { display: none; }

/* ===== ⭐⭐ A CONTAGEM NO CELULAR (18/09, tarde) ========================================================
   Ordem do dono, literal: "No celular continua sem aparecer numero de contagem".
   O elemento é o #cx-movel-contagem do cabeçalho (static/index.html) — o ÚNICO ancoradouro que
   sobrevive aos DOIS painéis do celular (lista e conversa), já que até 600 px a conversa desliza por
   cima da lista e leva junto as abas, a faixa "Em espera" e a régua. Quem o escreve é
   static/js/telas/caixa.js (pintarContagemMovel), com contagens.pendentes e o MESMO tempo da faixa.
   ⛔ A LINHA DO [hidden] É OBRIGATÓRIA e vem ANTES do resto: .só-mobile volta a display:inline-flex
   dentro da media query, e sem esta regra o hidden do botão seria ANULADO pela classe — a armadilha
   que a casa já registrou ("hidden anulado por classe com display"). */
.cx-movel-contagem[hidden] { display: none !important; }
.cx-movel-contagem { align-items: center; gap: 5px; flex: none; min-height: 28px; padding: 0 9px; margin-left: var(--e1);
  border: 1px solid rgba(var(--warning-rgb), .55); border-radius: 999px; background: var(--ambar-suave);
  color: var(--warning-texto); font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1;
  cursor: pointer; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-movel-contagem:hover { background: rgba(var(--warning-rgb), .28); }
.cx-movel-contagem .cx-movel-n { font-weight: 700; }
/* o TEMPO (só passado o piso de 6 min) fica menor e um pouco mais apagado: o número é o assunto */
.cx-movel-contagem .cx-movel-t { font-weight: 500; opacity: .85; }
/* 23/09 (prova do sininho): com a pílula acesa o cabeçalho do celular PASSAVA DA TELA — medido em 390 px:
   421 px de largura, a página rolando de lado e o símbolo da WebFiber já empurrado para fora da vista.
   Só enquanto a pílula aparece: o símbolo sai (ele já não se via) e o respiro entre os botões cai para
   4 px (cada botão continua com o alvo de 44 px). Medido depois: cabe inteiro de 360 a 430 px.
   O título "Atendimento Web" continua como o espaçador que empurra os botões para a direita, mas sem
   texto: antes ele tinha 0 px e não aparecia; com o espaço que sobrou viraria um "A..." solto.
   ⛔ O selo do modo e a pílula NÃO somem: são eles que dizem que nada sai e quantos esperam. */
@media (max-width: 900px) {
  .header:has(#cx-movel-contagem:not([hidden])) { gap: var(--e1); }
  .header:has(#cx-movel-contagem:not([hidden])) .cx-movel-contagem { margin-left: 0; }
  .header:has(#cx-movel-contagem:not([hidden])) .header-conta { visibility: hidden; }
  .header:has(#cx-movel-contagem:not([hidden])) .header-marca { display: none; }
}

/* 19/09: a pastilha fixa de "nova versão publicada" (app.js vigiarVersao) — clicável, sem sumir sozinha */
.toast.toast-versao { border-left: 3px solid var(--primary); font-weight: 600; }