:root{
  /* Valores iguais aos do tema.css (claro) -- 15/09/2026: sem o tema.css
     carregado (previa isolada, e-mail, tela quebrada), o sistema nao pode
     voltar a ficar azul. Ver Padrao-Visual/design-system.md Parte 1. */
  --navy:#16302a; --navy-700:#0f2620; --navy-800:#0a1c17;
  --cyan:#7a6949; --cyan-600:#655437;
  --bg:#f5f2ea; --card:#ffffff; --line:#e3ddd0;
  --ink:#1b201d; --muted:#555b57;
  --sucesso-fundo:#e6f0ea; --sucesso-borda:#b9d3c3; --sucesso-texto:#1f5a3c;
  --atencao-fundo:#f6e9dd; --atencao-borda:#e3c4a6; --atencao-texto:#8a4b1c;
  /* COR-15 -- 17/09/2026 (tarefa d5): #e0455a media 3,63:1 no claro, abaixo do
     minimo 4,5:1. Aponta agora para o mesmo valor de --red (COR-11), que ja
     passa (5,09:1). Token separado permanece porque --erro-texto e so texto
     solto (duas telas), enquanto --red tambem serve fundo de botao e borda --
     ver pergunta e resposta no relatorio da tarefa d5. */
  --erro-texto:#b3402f;
  --red:#b3402f; --green:#2f6d4f; --orange:#b3762a; --purple:#6b519a;
  --shadow:0 1px 2px rgba(27,32,29,.06),0 1px 1px rgba(27,32,29,.04);
}
*{box-sizing:border-box;margin:0;padding:0}
/* `hidden` tem de ganhar de qualquer `display` nosso. Sem o !important, um
   `.btn{display:inline-flex}` aparece mesmo marcado como hidden — foi o que
   deixou o botão "Enviar arquivo" visível antes de escolher o arquivo. */
[hidden]{display:none !important}
/* A FONTE DO CORPO NÃO MORA AQUI — 12/09/2026, decisão do escritório.
   Ela é valor de identidade, e valor de identidade é do tema.css (a régua está
   em Padrao-Visual/design-system.md, "A fronteira da CSS"). Esta linha declarava a system
   font stack, que a decisão de 02/09 proíbe com estas palavras, e só perdia
   porque o tema.css carrega depois: trocar a ordem de dois <link> no base.html
   viraria o sistema inteiro sem quebrar nada e sem acusar nada.
   Dono único: tema.css:129. Guarda: tests/test_fonte_tem_um_dono.py */
body{background:var(--bg);color:var(--ink);font-size:14px;line-height:1.45}
a{color:inherit;text-decoration:none}
/* Duas colunas e NADA em cima. A barra superior (`.topbar`) e a faixa de abas
   dela (`.topbar-abas`) foram extintas em 02/09/2026: busca, tema, WhatsApp,
   sino e usuário desceram todos para a barra lateral, que virou a única
   navegação do sistema (ver o comentário no topo do base.html).
   Some com isso a linha de 60px do `grid-template-rows` — e é por isso que a
   `.side` agora gruda em `top:0` e as telas de altura fixa valem 100vh. */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
/* Barra SEMPRE recolhida no monitor (decisão do escritório, 15/09/2026 —
   revoga o expandir/recolher de 02-03/09/2026: não há mais toggle nem estado
   salvo). Só vale em telas largas — sem isso esta regra (especificidade
   0,1,1) vencia o reset mobile de baixo (0,1,0) mesmo dentro da media query,
   e o `.main` (sem grid-column próprio) caía por auto-placement na coluna
   estreita, vazia, sobrando o resto da tela — era esse o bug do menu
   "comendo" o conteúdo abaixo de 920px. 68px: ver `.side`, abaixo (largura
   revista de 60 para 68px na tarde de 15/09/2026, junto com a fonte). */
@media(min-width:921px){
  .app{grid-template-columns:68px 1fr}
}
/* Botão de abrir a gaveta, SÓ no celular: no monitor quem recolhe/expande é a
   própria logo, mas ela mora dentro da barra — com a gaveta fechada não haveria
   como abri-la. Ligado no celular.css. */
.menu-abrir{display:none;border:0;background:transparent;padding:0;cursor:pointer}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;overflow:hidden}
.avatar img,.av img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
/* ============================ BARRA LATERAL ================================
   Três faixas empilhadas: a MARCA (que é o próprio botão de recolher), a LISTA
   (a única coisa que rola) e o RODAPÉ fixo com sino, janela de notificação e
   botão do canto.

   Quem rola é a `.side-lista`, e não a `.side` — isso é obrigatório, não gosto:
   a janela de notificação e o painel do canto precisam escapar da largura da
   barra quando ela está recolhida (68px), e qualquer `overflow` na `.side`
   cortaria os dois. Pelo mesmo motivo o painel de 2º nível não mora aqui
   dentro: ver `.flyout-panel`, mais abaixo.

   `position:sticky` já cria o contexto de posicionamento pros pseudo-elementos
   de vidro abaixo, não precisa de `position:relative` junto. */
.side{background:var(--navy);display:flex;flex-direction:column;
      position:sticky;top:0;height:100vh;z-index:40}
.side::before{content:'';position:absolute;top:0;left:0;right:0;height:120px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.07),transparent)}
.side::after{content:'';position:absolute;top:0;right:0;bottom:0;width:1px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.03) 60%,transparent);
  box-shadow:1px 0 12px rgba(0,0,0,.25)}

/* ---- a marca: link para o Dashboard (15/09/2026) ----
   Até 15/09/2026 a logo era o botão de recolher/expandir e o nome do
   escritório (`brand-txt`) vinha do lado; os dois saíram — a barra não
   recolhe/expande mais e o nome não cabe em 68px. A classe `logo` é a mesma
   de antes de propósito: o tema.css já veste a marca por ela. */
.side-topo{flex-shrink:0;padding:12px 8px 6px}
.side .brand{display:flex;align-items:center;justify-content:center;width:100%;color:#fff}
.side .logo-toggle{display:flex;align-items:center;flex-shrink:0;padding:6px;
  border-radius:9px;text-decoration:none}
.side .logo-toggle:hover{background:rgba(255,255,255,.08)}
.brand .logo,.menu-abrir .logo{width:30px;height:30px;border-radius:8px;background:var(--navy);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:16px;flex-shrink:0}

/* ---- a lista de 1º nível ---- */
.side-lista{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  padding:4px 8px 8px;display:flex;flex-direction:column;gap:2px}
.side-lista::-webkit-scrollbar{width:6px}
.side-lista::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:4px}
/* 14px é a régua decidida para o 1º nível (o 2º, dentro do painel suspenso,
   é 12px). Vale só dentro da barra — o resto do sistema fica para outra fase. */
.nav{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:9px;color:#cfdcd6;cursor:pointer;
     font-weight:400;font-size:14px;border:0;background:transparent;width:100%;text-align:left;
     white-space:nowrap;position:relative;transition:background .12s}
.nav:hover{background:rgba(255,255,255,.08);color:#fff}
/* Hover e seleção são SÓ o retângulo de fundo, e o negrito saiu em 03/09/2026:
   fundo + cor já bastam para marcar o item ativo.

   A cor do texto inativo era `#cdd7ee`, um azul-claro herdado de quando
   `--navy` era `#112a63`. O fundo seguiu o tema para o verde (`#16302a`,
   tema.css) e a tinta ficou para trás, porque é hex solto e não token — a
   identidade não tem azul (tema.css:46). Trocada em 13/09/2026 por um neutro
   da mesma família, e o contraste SUBIU: 9,76:1 para 9,97:1 sobre a barra. */
.nav.active,.nav.aberto{background:rgba(255,255,255,.13);color:#fff}
.nav .ic{width:32px;min-width:32px;text-align:center;font-size:16px;opacity:.95;position:relative}
.ic>.selo-cont{position:absolute;top:-5px;right:-7px;margin:0;min-width:14px;height:14px;line-height:14px;
  padding:0 3px;font-size:10px;border:1.5px solid var(--navy)}
.nav .rot{overflow:hidden;text-overflow:ellipsis;flex:1}
.nav.reservado{cursor:default;opacity:.75}
.nav.reservado:hover{background:transparent}
/* selo numérico (Chats não lidos, notificações não lidas) e selo "novo" da
   reserva de espaço — os dois encostam na direita da linha */
.selo-cont{margin-left:auto;background:var(--red);color:#fff;border-radius:20px;
  font-size:10px;font-weight:700;padding:1px 6px;min-width:18px;text-align:center;flex-shrink:0}
.selo-novo{margin-left:auto;background:var(--cyan);color:#fff;border-radius:20px;
  font-size:10px;font-weight:700;padding:1px 7px;flex-shrink:0;text-transform:uppercase;letter-spacing:.04em}

/* ---- 2º nível DENTRO da barra (decisão do escritório, 15/09/2026) ----
   Substitui o painel suspenso/flyout: clicar num módulo com filhos
   (`.side.foco`) encolhe os outros módulos a zero (abaixo) e mostra os
   filhos dele aqui, logo abaixo do `.nav.aberto`. Fica pré-renderizado pros
   15 módulos (barato) e escondido por padrão — só aparece com `.side.foco`
   no módulo `.aberto`, via seletor de irmão adjacente. */
.subs{max-height:0;opacity:0;overflow:hidden;display:flex;flex-direction:column;gap:1px;
  transition:max-height .28s ease,opacity .22s ease}
.side.foco .nav:not(.aberto){height:0;min-height:0;padding-top:0;padding-bottom:0;
  margin:0;opacity:0;overflow:hidden;pointer-events:none;
  transition:height .24s ease,opacity .18s ease,padding .24s ease}
.side.foco .nav.aberto + .subs{max-height:1200px;opacity:1;margin:2px 0 6px;flex-shrink:0}
/* Cabeçalho único (escritório, 30/09/2026): com um módulo aberto, o "voltar"
   é o cabeçalho, e o item do módulo sai para não repetir o nome. */
.side.foco .nav.aberto{display:none}
.side.foco .voltar{background:rgba(255,255,255,.13);color:#fff}
.subs a.tem3{position:relative}
.subs a.tem3::after{content:'';position:absolute;right:3px;top:50%;margin-top:-3px;
  border:3px solid transparent;border-left-color:currentColor;opacity:.6}
.subs a.tem3.abrindo{background:rgba(255,255,255,.2);color:#fff}
/* "Botão fantasma" (18/09/2026, pedido do escritório): trocar de módulo já
   aberto por outro (ex.: Marketing aberto, clicar em Grupo) chama
   `fecharFoco()` e abre o novo módulo NO MESMO clique (app.js) — `.side`
   nunca perde `.foco`, só o `.aberto` muda de módulo. Sem esta regra, o
   `.subs` do módulo que estava aberto seguia a transição de 280ms da regra
   `.subs` acima (a mesma que faz o ABRIR ficar suave) e ficava visível,
   sobreposto, por cima do 2º nível do módulo novo — um item com ícone e
   `href` de verdade (um filho de Marketing, por exemplo), sem cabeçalho
   nem faixa combinando, plantado entre o "voltar" e o primeiro item do
   módulo que a pessoa realmente abriu. Não era item extra nenhum: era o
   MESMO `.subs` de um módulo que a pessoa tinha aberto antes, ainda
   fechando. Rende medido em `/private/tmp/.../inspecionar2.py`, 80ms depois
   do clique. Corrige só a RENDERIZAÇÃO (fecha instantâneo o `.subs` de quem
   deixou de estar `.aberto`, sem mudar dado nenhum de menu): a transição
   de fechar-tudo (voltar/Esc) continua igual, porque aí `.side` perde
   `.foco` junto e este seletor para de valer. */
.side.foco .nav:not(.aberto) + .subs{transition:none;max-height:0;opacity:0}
/* 15/09/2026 (tarde): cada item ganha ícone, no mesmo estilo dos módulos —
   `.ic` em cima, `.rot` embaixo. Antes era só texto (`display:block`); o
   `<a>` virou flex-coluna para caber os dois `<span>` que o base.html agora
   manda (`.ic`/`.rot`, espelhando `.nav`). */
.subs a{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:8px 10px;border-radius:9px;font-size:12px;
  color:#cfdcd6;white-space:normal;word-break:break-word;text-align:center}
.subs a .ic{display:flex;opacity:.95}
.subs a:hover{background:rgba(255,255,255,.08);color:#fff}
.subs a.active{background:rgba(255,255,255,.13);color:#fff;font-weight:600}
/* ---- MENU-01 — submenu claramente diferente (decisão do escritório,
   15/09/2026, NOITE): quando um módulo está aberto, os TRÊS sinais têm que
   aparecer JUNTOS — cabeçalho com seta+nome (ver `.voltar`, logo abaixo),
   faixa de fundo #22413A SÓ atrás dos itens (`.subs` em si; o cabeçalho é
   irmão dela, fora da faixa) e item ativo em fundo areia com texto/ícone
   verde. Proibido: borda colorida à esquerda, gradiente, sombra pesada,
   emoji — decisão explícita do escritório contra as três formas mais
   comuns de marcar "ativo" já usadas em outros pontos do sistema. */
/* Botão "voltar aos módulos" / cabeçalho do 2º nível — redesenhado em
   15/09/2026: de manhã era texto ("‹ módulos"); à TARDE virou botão só com
   ícone; à NOITE (MENU-01) ganhou de volta o NOME do módulo aberto, como
   cabeçalho do submenu — seta + nome curto, 10px/700, com linha fina
   embaixo (o terceiro sinal do MENU-01 — as cores/tamanho ficam no bloco
   do monitor, mesmo motivo do parágrafo acima). Continua sendo UM
   elemento só, não um por módulo: como os `.nav` que não são o aberto
   encolhem a zero (`.side.foco .nav:not(.aberto)`, acima), ele é sempre o
   que sobra visível logo em cima de `.subs` — e o app.js escreve nele o
   nome curto do módulo aberto (lido do próprio `.rot` do `.nav.aberto`,
   `#voltar-nome`) em QUALQUER largura; só o CSS que MOSTRA esse nome
   (`.voltar .rot`) é exclusivo do monitor. Mesma altura de uma linha de
   módulo (`.nav`). Uma das três formas de fechar o 2º nível (as outras
   são clicar de novo no módulo aberto e a tecla Esc) — só aparece com
   `.side.foco`. */
.voltar{display:none;align-items:center;justify-content:center;gap:4px;padding:9px 8px;
  margin-bottom:2px;border-radius:9px;color:rgba(255,255,255,.7);
  cursor:pointer;border:0;background:transparent;width:100%;font-family:inherit}
.voltar:hover{color:#fff;background:rgba(255,255,255,.08)}
.voltar .rot{display:none}
.side.foco .voltar{display:flex}
@media(prefers-reduced-motion:reduce){
  .subs,.side.foco .nav:not(.aberto){transition:none}
}

/* ---- rodapé fixo: status, sino, janela de notificação e botão do canto ----
   15/09/2026: o texto "Plataforma Jurídica / captura DJEN ativa" saiu — só a
   bolinha (com `title`) fica. Sino e canto continuam, redesenhados pra caber
   nos 68px da barra (ver o bloco desktop abaixo). */
.side-fim{flex-shrink:0;position:relative;padding:6px 8px 10px;display:flex;flex-direction:column;gap:2px}
.side .foot{color:#7e90bd;font-size:10px;padding:8px;line-height:1.5;
           display:flex;align-items:flex-start;gap:8px;border-top:1px solid rgba(255,255,255,.08)}
.linha-icone{display:flex;align-items:center;gap:10px;padding:8px;border-radius:9px;cursor:pointer;
  color:#cdd7ee;border:0;background:transparent;width:100%;text-align:left;font-size:12px;
  font-family:inherit;white-space:nowrap}
.linha-icone:hover{background:rgba(255,255,255,.08);color:#fff}
.linha-icone .ic{width:32px;min-width:32px;display:inline-flex;justify-content:center;position:relative}
.linha-icone .rot{overflow:hidden;text-overflow:ellipsis;flex:1}
.canto{display:flex;align-items:center;gap:9px;padding:8px;border-radius:9px;cursor:pointer;
  border:0;background:transparent;width:100%;text-align:left;font-family:inherit;color:#cdd7ee}
.canto:hover,.canto.aberto{background:rgba(255,255,255,.08)}
.canto .avatar{width:30px;height:30px;font-size:10px;background:var(--cyan);flex-shrink:0}
.canto-txt{overflow:hidden;flex:1;min-width:0}
.canto-nome{display:block;font-size:12px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* bolinha de status: verde = tudo conectado, amarelo = parcial, vermelho =
   nada conectado/configurado (WhatsApp do CRM+SAC, Google Drive, Campanhas) */
.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px}
.status-dot.status-verde{background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,.6)}
.status-dot.status-amarelo{background:var(--orange);box-shadow:0 0 6px rgba(179,118,42,.6)}
.status-dot.status-vermelho{background:#ef4444;box-shadow:0 0 6px rgba(239,68,68,.6)}
.side .foot{border-top:0;justify-content:center}

/* ---- janela de notificação: EMBUTIDA no verde, não um popup claro ----
   Fica sobre a barra, logo acima do botão do canto, no mesmo tom escuro. É de
   propósito diferente do painel de 2º nível (que é claro e sai para fora): uma
   é "o sistema falando comigo", a outra é navegação. Com a barra recolhida ela
   escapa da largura de 68px — daí `.side` não poder ter overflow. */
.janela-notif{display:none;position:absolute;left:8px;right:8px;bottom:56px;z-index:30;
  background:#1a3d34;border:1px solid rgba(255,255,255,.14);border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.35);color:#fff}
.janela-notif.mostrar{display:block}
@media(min-width:921px){ .janela-notif{right:auto;width:260px} }
.janela-notif-topo{display:flex;align-items:center;justify-content:space-between;
  padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.12);font-size:12px}
.janela-notif-topo button{border:0;background:transparent;color:#cdd7ee;cursor:pointer;font-size:16px;line-height:1;padding:0 2px}
.janela-notif-lista{padding:5px;display:flex;flex-direction:column;gap:2px;max-height:230px;overflow-y:auto}
.notif-item{padding:7px 8px;border-radius:7px;font-size:12px;color:#fff}
.notif-item.lida{color:rgba(255,255,255,.6)}
.notif-item.vazio{color:rgba(255,255,255,.6);font-style:italic}
.notif-item .quando{font-size:10px;color:rgba(255,255,255,.55);margin-top:2px}
.janela-notif-pe{display:block;padding:8px 10px;font-size:12px;color:#cdd7ee;
  border-top:1px solid rgba(255,255,255,.12);text-align:center}
.janela-notif-pe:hover{color:#fff;background:rgba(255,255,255,.06)}

/* ---- painel do botão do canto ---- */
.canto-flyout{display:none;position:absolute;left:calc(100% + 6px);bottom:8px;min-width:240px;
  background:var(--card);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--r-md,10px);box-shadow:0 12px 32px rgba(0,0,0,.18);padding:6px;z-index:60}
.canto-flyout.mostrar{display:block}
.canto-email{font-size:12px;color:var(--muted);padding:8px 10px;word-break:break-all}
.canto-flyout .sep{height:1px;background:var(--line);margin:5px 4px}

/* ---- painel do 3º nível (escritório, 30/09/2026) ----
   Abre ao lado da barra, no monitor e no celular, ao clicar num item de 2º
   nível que tem páginas. O `top` vem do app.js, alinhado ao item clicado. */
.painel3{display:none;position:fixed;left:74px;width:240px;max-width:calc(100vw - 90px);
  max-height:calc(100vh - 16px);overflow-y:auto;background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-md,10px);box-shadow:0 12px 32px rgba(0,0,0,.18);
  padding:6px;z-index:60}
.painel3.mostrar{display:block}
.painel3-titulo{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);padding:6px 10px}
.painel3-secao{font-size:12px;font-weight:700;color:var(--ink);padding:8px 10px 2px}
.painel3 .sep{height:1px;background:var(--line);margin:5px 4px}
.painel3 .flyout-item{font-size:13px;padding:8px 10px}
.painel3 .flyout-item.active{background:var(--bg);font-weight:600}

/* `.flyout-panel`/`.flyout-titulo` (painel suspenso do 2º nível, fora da
   barra) foram REMOVIDOS em 15/09/2026 — o 2º nível agora é `.subs`, dentro
   da barra (ver o bloco logo depois de `.selo-novo`, acima). `.flyout-item`
   continua: é o item do painel do CANTO (Configurações, Saúde, tema, Sair),
   que não mudou. */
.flyout-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border-radius:7px;
  font-size:12px;color:var(--ink);cursor:pointer;border:0;background:transparent;
  text-align:left;font-family:inherit}
.flyout-item:hover{background:var(--bg)}

/* ============================================================================
   BARRA RECOLHIDA — só no monitor (15/09/2026; ICO-03 e o item 7 de nome
   curto revistos à NOITE do mesmo dia — ver Padrao-Visual/design-system.md §8)
   ----------------------------------------------------------------------------
   A exceção de 8px (nome do módulo, item de 2º nível, primeiro nome no canto)
   FOI REVOGADA pelo escritório na tarde de 15/09/2026: a barra volta ao
   piso geral do sistema, 10px (Padrao-Visual/design-system.md, régua de 02/09/2026) —
   sem exceção nenhuma. Não há mais nada abaixo de 10px na barra lateral.

   Largura: 68px. Medida para caber o rótulo mais longo do 1º nível em 10px/600
   sem reticências — "Ferramentas" mede 59,04px em IBM Plex Sans 600 10px
   (`canvas.measureText`, os outros 14 rótulos são mais curtos, incluindo
   "Operacional" 56,02px e "Cadastros" 46,74px). 68px sobra ~9px de folga pro
   antialiasing e pro selo do ícone não estourar a lista
   (`overflow-x:hidden`) — a mesma proporção de folga da medida anterior
   (60px para 47,23px em 8px ≈ 13px de folga; aqui 68-59,04 ≈ 9px, porque o
   próprio rótulo cresceu e a barra não precisa crescer na mesma proporção).

   ICO-03 (decisão do escritório, NOITE de 15/09/2026 — revoga os números
   antigos deste comentário, 16px/2px/46px): o ícone do 1º nível cresce de
   16 para 20px, o gap entre ícone e nome de 2 para 5px, e a altura da linha
   de módulo de 46 para 54px (o botão "voltar" acompanha, ver `.voltar` mais
   abaixo). O item 7 (nome curto) é o que sobra de espaço pro ícone crescer
   sem estourar 68px: com o rótulo agora limitado a 10 letras/uma linha
   (`nome_curto()`, `app/templating.py`), o gargalo de largura que travava o
   ícone em 16px deixou de existir — o texto nunca mais é o fator limitante.
   A fonte continua no piso de 10px (não existe exceção nem aqui). */
  .side{width:68px}
  .side-lista{padding:4px 2px 6px;gap:2px}
  .nav{flex-direction:column;justify-content:center;align-items:center;
    height:54px;padding:0 2px;gap:5px;white-space:nowrap}
  .nav .ic{width:auto;min-width:0;font-size:20px;position:relative}
  /* Nome curto (item 7, NOITE de 15/09/2026): o rótulo exibido na barra tem
     no máximo 10 letras e cabe numa linha só — por isso `text-overflow` e
     `-webkit-line-clamp` SAEM daqui: não sobra nada pra truncar. O nome
     completo continua em `title=`/`aria-label=` do `.nav` (base.html); só o
     texto visível na barra encurta. `nowrap` é reforço, não recorte. */
  .nav .rot{flex:none;font-size:10px;line-height:1.1;max-width:64px;
    overflow:hidden;white-space:nowrap;opacity:.9}
  .nav.active .rot,.nav.aberto .rot{font-weight:600;opacity:1}
  .selo-novo{display:none}

  .linha-icone{flex-direction:column;height:40px;justify-content:center;
    gap:2px;padding:0;position:relative}
  .linha-icone .ic{position:relative}
  .linha-icone .rot{display:none}

  /* Rodapé: avatar em cima, só o PRIMEIRO NOME embaixo — dividir avatar+nome
     numa linha só de 60px cortava o nome (achado do escritório, 15/09/2026);
     em coluna os dois cabem inteiros. Fonte no piso (10px) desde a revisão da
     mesma tarde. */
  .canto{flex-direction:column;gap:3px;padding:6px 2px;height:auto}
  .canto .avatar{width:26px;height:26px}
  .canto-txt{flex:none;max-width:64px;width:100%}
  .canto-nome{font-size:10px;text-align:center;white-space:nowrap;max-width:64px}

  /* ---- 2º nível dentro da barra: ícone + rótulo, altura consistente
     (mesma lógica da linha de módulo acima). Ícone 18px, gap de 5px até o
     nome, altura mínima 54px — revisto na NOITE de 15/09/2026 (ICO-03; era
     ícone sem tamanho próprio, gap 2px, min-height 44px). */
  .subs a{text-align:center;font-size:10px;line-height:1.2;padding:6px 3px;
    gap:5px;min-height:52px}
  .subs a .ic{font-size:18px}
  /* Nome curto (item 7, NOITE de 15/09/2026): SEM `-webkit-line-clamp`
     (multi-linha) nem reticências — o rótulo do 2º nível também passa a
     vir pré-encurtado (`nome_curto()`) e cabe numa linha só. O nome
     completo continua em `title=`/`aria-label=` do `<a>` (base.html). */
  .subs a .rot{white-space:nowrap;overflow:hidden;max-width:64px}
  /* Botão "voltar": mesma altura de uma linha de módulo (54px desde
     ICO-03) — ícone (seta) + nome curto do módulo aberto, escrito pelo
     app.js. Era só ícone/46px até a TARDE de 15/09/2026. */
  .voltar{height:54px}

  /* ---- MENU-01 (NOITE de 15/09/2026): as CORES dos três sinais — faixa
     de fundo atrás dos itens, item ativo em areia, cabeçalho com nome do
     módulo — só valem aqui, na barra recolhida do monitor (ver o
     comentário junto de `.subs a:hover`/`.voltar`, fora deste bloco, sobre
     por que a gaveta do celular não ganha o mesmo sinal). */
  /* 22/09/2026: com `.side.foco`, o `padding` fica só no `.subs` ABERTO e a
     lista perde o `gap`. Os `.subs` fechados e os `.nav` encolhidos dos
     outros módulos continuam no DOM; com padding cada um guardava 8px, e com
     o gap cada um somava mais 2px — empilhados, formavam o vão do tamanho de
     um botão entre o "voltar" e o módulo aberto (medido: 66px no Financeiro).
     Marketing, o único sem submenu fechado antes dele, dava 6px — e é o
     padrão do escritório: 6px do "voltar" ao módulo e 4px do módulo à
     faixa. Sem módulo aberto, a lista continua como era. */
  .subs{background:#22413A;border-radius:6px;padding:4px}
  .side.foco .subs{padding:0}
  .side.foco .nav.aberto + .subs{padding:4px;margin-top:4px}
  .side.foco .side-lista{gap:0}
  .side.foco .nav.aberto{margin-top:4px}
  .subs a{color:#D5E0DA}
  .subs a.active{background:#F5F2EA;color:#16302A;font-weight:600}
  .subs a.active .ic{color:#16302A;opacity:1}
  /* 18/09/2026: o botão ficava em LINHA (seta + nome lado a lado) mesmo com
     a barra em 68px — o nome saía cortado, porque só `.nav` (acima) ganha
     `flex-direction:column` neste bloco; `.voltar` seguia em linha desde a
     regra de base. Pedido do escritório ("o nome de voltar... pode ser o
     símbolo em cima ou embaixo do nome"): o `.voltar` passa a seguir o
     MESMO arranjo dos outros itens da barra — ícone em cima, nome embaixo. */
  .voltar{flex-direction:column;gap:2px;font-weight:700;
    border-bottom:1px solid rgba(255,255,255,.18);border-radius:9px 9px 0 0}
  .voltar .rot{display:block;font-size:10px;font-weight:700;white-space:nowrap;
    overflow:hidden;max-width:64px}
/* A moldura da tela (Fase 6, item B). Era 24px em cima e 28px dos lados: 56px de
   largura e 48px de altura gastos em vazio, em toda tela, o tempo todo — e o que
   está dentro dela já tem moldura própria (o `.card` desenha borda, sombra e
   16px de respiro). Duas molduras em volta do mesmo conteúdo é uma a mais.
   12/14 não é um número novo: é o que o `celular.css` já usava, e o que a tela
   estreita já mostrava sem ninguém reclamar. */
.main{padding:12px 14px;overflow:auto}

/* ===== REGRA DAS TELAS DE ALTURA FIXA — leia antes de criar outra =====
   Publicações, SAC, chats do CRM e card do lead são caixas com altura presa
   à janela, onde quem rola é a coluna de dentro, não a página.
   Isso só funciona com DUAS coisas juntas:

     1. na caixa:   grid-template-rows:minmax(0,1fr)
     2. em cada elo até quem rola:   min-height:0

   Sem a (1), a trilha implícita da grade é `auto`, e trilha `auto` nunca
   encolhe abaixo do min-content: com uma publicação longa a linha ia para
   5.000px, a caixa estourava a altura declarada e o filho com
   `overflow-y:auto` ficava do tamanho do conteúdo — ou seja, sem barra, sem
   descer. Sem a (2), o mesmo acontece um nível abaixo, porque item de flex
   tem `min-height:auto` por padrão e se recusa a encolher.

   Já quebrou três vezes por esquecer um dos dois. Toda tela nova nesse
   formato precisa das duas linhas.

   ----- E a TERCEIRA coisa: nunca escreva a altura na mão -----

   Até 17/08/2026 cada uma dessas telas trazia no próprio arquivo um
   `height:calc(100vh - Npx)`, com N medido a olho e copiado para a seguinte:
   156px em quatro templates, 250px em Publicações. Todos errados pelo mesmo
   motivo — N tinha que somar tudo que existe acima da caixa, e ninguém
   consegue manter essa conta:

     · os 156px contavam as abas de módulo, que `@media(min-width:901px)
       {.abas:not(.sub){display:none}}` esconde EXATAMENTE na faixa em que o
       calc valia. 46,6px de tela morta em Chats e SAC, todo dia, sem ninguém
       ver. (O `:not(.sub)` entrou em 03/09/2026 — sem ele a regra pegava
       também a faixa de 3º nível, que a barra lateral não desenha. Esta
       frase citava a regra sem ele e ficou vencida no mesmo commit que a
       consertou; quem mudar a regra, mude esta linha junto.)
     · em `grupos.html` o que fica acima é um aviso condicional (a tag de
       ANTHROPIC_API_KEY faltando). Nenhuma constante serve para os dois
       estados: no dia em que a chave chegar, o aviso some e N fica errado
       para o outro lado.
     · e tirar um título (item B) obrigava a recalcular N na mão, que é como
       um conserto de aparência virava risco de layout.

   Agora quem mede é o navegador: a tela marca `{% block classe_main %}
   altura-janela{% endblock %}`, o `.main` recebe a altura da janela, e a caixa
   é `flex:1` — ela fica com o que sobrou, seja lá o que estiver acima. Zero
   número para manter.

   Desde 02/09/2026 nem essa constante existe: a barra de cima foi extinta e
   não há mais nada acima da tela — a altura é a da janela, e ponto. */
@media(min-width:901px){
  .main.altura-janela{height:100vh;display:flex;flex-direction:column}
  /* `height:auto` desfaz o calc do próprio componente; o `flex` põe no lugar.
     O `min-height` de cada variante fica de pé de propósito: em janela muito
     baixa a caixa para de encolher e o `.main` rola — que é o que já
     acontecia antes, e é melhor que uma conversa de 40px de altura. */
  .main.altura-janela > .chat-tela{flex:1 1 auto;height:auto}
}
.ph{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap;gap:12px}
/* `.ph` sem título (item B) sobra com um filho só, e o canto certo depende do
   que sobrou. `space-between` com um filho encosta ele à esquerda — o que serve
   pra linha de contexto (o mês do extrato, a contagem do recorte) e atrapalha
   pro grupo de botões, que sempre morou à direita: mover 26 telas de canto seria
   trocar ganho de espaço por "cadê o botão?". Daí duas regras, e `.ph-info`
   marcando explicitamente qual é qual — adivinhar pelo conteúdo daria errado no
   dia em que uma tela tiver as duas coisas. */
.ph > :only-child{margin-left:auto}
.ph > .ph-info:only-child{margin-left:0}
/* 20px é o h1 da régua (02/09/2026). Era 22 — um número só desta tela. */
/* `:not(.topo-titulo)`: mesma colisao que `.cp h1` tem mais abaixo, e o mesmo
   conserto. O cabecalho antigo (`.ph`) e o topo novo (TELA-01) convivem, e uma
   tela que poe o `h1.topo-titulo` DENTRO do `.ph` -- e o que o bloco
   `titulo_pagina` de `config_modulo_base.html` permite -- caia para 20px/800:
   `.ph h1` vale 0,1,1 e `.topo-titulo` 0,1,0. Medido em 17/09/2026. */
.ph h1:not(.topo-titulo){font-size:20px;color:var(--navy);font-weight:800}
.ph p{color:var(--muted);font-size:12px;margin-top:3px}
/* Título pequeno abaixo do menu — usado nas 3 telas de chat no lugar do
   .ph h1 grande, pra sobrar altura pro chat/lista (ver Tarefa 2 do plano de
   unificação). */
.ph-mini{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:8px}
/* `line-height` e `border` explícitos: sem os dois, `<a class="btn">` e
   `<button class="btn">` saíam com ALTURAS DIFERENTES lado a lado, e foi o que
   o escritório viu em Publicações ("Painel" 40,84px ao lado de "Buscar no DJEN"
   35px). Duas causas somadas, ambas invisíveis no código:
     · `<button>` não herda `line-height` do body — ficava em `normal` (~15px)
       enquanto o `<a>` herdava 1,45 do body (13 × 1,45 = 18,85px);
     · `.btn.ghost` tem borda de 1px e o `.btn` cheio tinha `border:0`, o que
       sozinho já dava 2px de diferença.
   Agora o `.btn` reserva a borda com `transparent` — a variante ghost só troca
   a cor dela, não o tamanho da caixa. */
.btn{background:var(--acao);color:var(--acao-texto);border:1px solid transparent;border-radius:9px;padding:10px 16px;font-weight:600;cursor:pointer;font-size:12px;line-height:1.15;display:inline-flex;align-items:center;gap:7px}
.btn:hover{background:var(--acao-hover)}
.btn.ghost{background:#fff;color:var(--navy);border-color:var(--line)}
.btn.sm{padding:6px 11px;font-size:12px}
.btn.danger{background:var(--red)}
.btn.danger.sm{background:var(--card);color:var(--red);border-color:var(--red)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}
.grid2{display:grid;grid-template-columns:1.6fr 1fr;gap:12px}
/* §7.7 (03/09/2026): cartão é borda de 1px e SEM sombra. Não é regra nova — é a
   régua de borda que o sistema já tinha escrita: `--borda` (1px) separa
   (cartão, tabela, campo), `--barra-acento` (3px) marca (aba ativa, item em
   destaque). O cartão é caso de separar, então fica na linha fina, e sombra não
   entra. O `--shadow` continua existindo e em uso (`.kb-col`,
   `.cp-bloco`), e a §7.7 vale para o `.card`: modal, painel suspenso e menu
   seguem com a sombra deles, que é o que os põe ACIMA da tela em vez de dentro
   dela. */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px}
.card .hd{padding:11px 15px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
/* flex, e não block, porque MUITO cabeçalho de card começa com `{{ icone(...) }}`.
   `.ico` é `display:block` (tema.css, e é de propósito — regra 3 do design
   system, ícone não vai no meio de frase corrida), então dentro de um h3 block
   ele virava uma linha só dele e empurrava o título para baixo: era o "símbolo"
   solto acima da palavra "Filtros" nas Publicações. O `gap` é o mesmo 7px do
   `.btn`, para ícone+texto ficarem com o mesmo respiro em toda parte. */
.card .hd h3{font-size:14px;color:var(--navy);font-weight:700;
  display:flex;align-items:center;gap:7px}
.card .bd{padding:13px 15px}
/* CARD-02 (17/09/2026, opcao D - "solto, separado por filete"): o numero de
   resumo deixa de ser caixa. `.stat` some do `.card` - fundo transparente, sem
   borda ao redor, sem raio - e ganha um filete vertical de 1px a esquerda que
   separa um numero do outro dentro da mesma fileira (`.grid4`); o
   primeiro item da fileira nao leva filete.

   Etapa 2 (17/09/2026, mesma tarefa): as outras classes que duplicavam
   este numero (`.num` solto -- ja emitido por
   `m.cartao`/`.stat` --, `.big`) entram na MESMA regra
   por agrupamento de seletor, em vez de copias. `.big` ja nao
   tinha caixa propria -- a caixa que aparece ao redor delas em algumas
   telas e `.card`/`.row`, um cartao ou linha comuns do sistema (CARD-01), que
   ja existiam ali antes desta rodada e nao sao o alvo do CARD-02; so a
   tipografia do numero precisava convergir, e converge aqui. */
/* `.card.stat` (nao so `.stat`): `tema.css` carrega DEPOIS de app.css e tem
   `.card, .modal{border-radius:var(--r-lg)}` -- mesma especificidade de
   `.stat` sozinho, e quem carrega por ultimo ganha o empate. Sem o `.card`
   junto no seletor o raio 0 desta regra nunca vencia esse empate -- o
   cartao continuava saindo com canto 14px, medido com `medir_cards.py`
   (17/09/2026, mesma tarefa). */
.card.stat{padding:0 0 0 16px;background:transparent;border:0;border-left:1px solid var(--line);border-radius:0}
.card.stat:first-child{padding-left:0;border-left:0}
/* O cartão de KPI inteiro na régua, não só o número. `.lab` era 12,5px e `.sub`
   11,5px — meio degrau de cada lado de um nível que existe. 12px é o `h4`, e é
   o degrau em que rótulo e legenda deste cartão cabem sem inventar tamanho.
   A `.stat-detalhe` (lá embaixo, no bloco do design system) é a terceira parte
   da MESMA peça — `m.cartao` emite as três — e foi junto pelo mesmo motivo:
   deixar uma delas para trás é como o cartão volta a ter três tamanhos. */
.stat .lab{color:var(--muted);font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px;line-height:1.3}
.stat .lab .ico{opacity:.75}
/* 28px é o degrau "destaque" da régua (03/09/2026), e o uso dele é exatamente
   este: o número de KPI de cartão. Os números de destaque do sistema estavam
   entre 24 e 42px; passam todos para 28, mono, com o letter-spacing da opção D
   aprovada em 17/09. Quem precisar de número grande usa este degrau — não
   inventa um tamanho próprio.

   `.big` (Financeiro) é o MESMO número -- entra nesta regra em vez de repetir
   tamanho, peso e cor. */
.stat .num,.big{
  font-family:var(--fonte-mono);font-size:28px;font-weight:800;color:var(--ink);
  margin-top:7px;line-height:1.1;letter-spacing:-.5px}
.stat .sub{font-size:11px;color:var(--muted);margin-top:5px;line-height:1.4}

@media (max-width:600px){
  /* o filete vertical não funciona empilhado: de N colunas numa linha só, a
     grade vira 2 colunas; o filete some do 1º de cada par e a 2ª linha de
     pares ganha um traço horizontal em vez do vertical, para não colar. */
  .grid4{grid-template-columns:repeat(2,1fr);row-gap:14px}
  .grid4 .stat:nth-child(2n+1){border-left:0;padding-left:0}
  .grid4 .stat:nth-child(n+3){padding-top:14px;border-top:1px solid var(--line)}
}

/* Cor num KPI: são DOIS casos, e a diferença é o que está sendo colorido.

   1. **O número tem qualidade** — receita é verde, despesa é vermelha, a
      receber é laranja. O rótulo continua neutro, porque "Receitas" não é uma
      notícia; o valor é. Escreve-se `style="color:var(--green)"` no `.num`, e
      são 12 no sistema, todos com token de cor. Isso está certo e fica.

   2. **O cartão inteiro é um aviso** — "conciliação pendente" no Início. Não é
      um número bom ou ruim: é dívida de trabalho, algo que alguém precisa
      zerar. Aí o rótulo vai junto, porque o aviso é o cartão, não o valor.
      É esta classe.

   Confundir os dois é o que faria nascer um terceiro jeito. O teste prático:
   se o número virasse zero, seria boa notícia? Se sim, é aviso (caso 2). Se o
   número apenas mudaria de qualidade, é o caso 1.

   A cor vem de `--red` e não do `#c02942` que estava inline no Início: aquele
   era um quarto vermelho, quase igual ao token e não igual — e, por ser fixo,
   continuava escuro no tema escuro, onde `--red` clareia para #e2705c. */
.stat-alerta .lab,.stat-alerta .num{color:var(--red)}
.pill{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px}
.pill.r{background:#fde8eb;color:var(--red)}.pill.c{background:#e3f4fc;color:var(--cyan-600)}
.pill.g{background:#e3f6ed;color:var(--green)}.pill.o{background:#fdf0e0;color:var(--orange)}
.row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .bar{width:4px;height:38px;border-radius:4px;flex-shrink:0}
.row .grow{flex:1;min-width:0}
.row .t{font-weight:600;font-size:14px}
.row .s{font-size:12px;color:var(--muted);margin-top:2px}
/* inline-flex (não inline-block) porque muitas tags começam com um `icone()`, e
   `.ico` é display:block — num inline-block ele quebraria a linha (regra 3). */
.tag{font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;vertical-align:middle}
.tag.red{background:#fde8eb;color:var(--red)}.tag.green{background:#e3f6ed;color:var(--green)}
.tag.cyan{background:#e3f4fc;color:var(--cyan-600)}.tag.orange{background:#fdf0e0;color:var(--orange)}
.tag.gray{background:var(--bg);color:var(--muted)}.tag.purple{background:#efeafb;color:var(--purple)}
.tag.yellow{background:#fff6d9;color:#8a6d00}
/* ETQ-01, atenção (COR-10, terracota): a quarta cor de estado, ao lado de green (sucesso),
   red (erro) e gray (neutro). Tokens com par escuro em tema.css. 17/09/2026. */
.tag.atencao{background:var(--atencao-fundo);color:var(--atencao-texto)}
/* COR-10 (atencao/terracota), o substituto do `.tag.yellow`, que o catalogo
   proibiu em 15/09/2026. Nasceu em cadastros.css, escopado a um modulo so;
   trazido para ca em 16/09 porque selo de SITUACAO nao e assunto de um modulo:
   a familia inteira mora aqui, e o teste que cobra "toda cor tem classe" le
   este arquivo. Familia partida em duas folhas passa verde num modulo e
   quebra em silencio no proximo que usar a mesma cor. */
.tag.cad-atencao{background:#F6E9DD;color:#8A4B1C}
table{width:100%;border-collapse:collapse}
/* 12px NAO sai da regra do degrau mais proximo — sai da §7.1, que decidiu o
   numero por extenso em 03/09/2026: "Tamanho da fonte da tabela: 12px — o `h4`
   da regua. Nao e um tamanho novo: e o degrau que ja existia."

   Isto importa porque 13px e 11px sao justamente os dois tamanhos
   EQUIDISTANTES da regua (13 dista 1 de 12 e 1 de 14; 11 dista 1 de 10 e 1 de
   12), e por isso a coordenacao os reservou para o escritorio decidir. Aqui
   nao ha o que inferir: a decisao ja existe, é datada e nomeia a tabela.

   O cabecalho vai junto porque a mesma §7.1 diz que ele "continua diferenciado
   por peso e cor, nao por tamanho" — o que ele ja faz (caixa alta, peso 700,
   --muted). O ganho pedido pelo escritorio e caber mais linha sem rolar.

   Se o escritorio decidir o contrario sobre 13/11, e ESTE commit que se
   reverte, sozinho: as outras 35 declaracoes do passe nao dependem dele. */
/* CORREÇÃO 17/09/2026 (org6): TAB-03 no design-system.md passou a pedir cabeçalho
   10px sobre var(--linha-cabecalho) — a frase acima ("não por tamanho") não vale
   mais; é a reversão que o parágrafo já previa, isolada nesta declaração. */
th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:11px 14px;border-bottom:1px solid var(--line);font-weight:700;background:var(--linha-cabecalho)}
td{padding:13px 14px;border-bottom:1px solid var(--line);font-size:12px;vertical-align:middle}
tr:hover td{background:#fafbfd}
.mono{font-variant-numeric:tabular-nums;color:var(--navy);font-weight:600}
.new-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cyan);margin-right:6px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cal .dow{background:#f7f9fc;color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase;text-align:center;padding:10px 0}
.cal .cell{background:#fff;min-height:104px;padding:7px 8px;display:flex;flex-direction:column;gap:4px}
.cal .cell[data-date]{cursor:pointer}
.cal .cell[data-date]:hover{background:#f4f9ff}
.cal .cell.out{background:#fafbfd}
.cal .dn{font-size:12px;font-weight:700;color:var(--ink);align-self:flex-start}
.cal .cell.out .dn{color:#c2cad9}
.cal .cell.today .dn{background:var(--cyan);color:#fff;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.ev{font-size:10px;padding:3px 7px;border-radius:6px;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.ev.ghost{background:#fff;border:1.5px dashed var(--red);color:var(--red)}
.tabs{display:flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:4px;margin-bottom:10px;width:fit-content}
.tab{padding:8px 16px;border-radius:7px;cursor:pointer;font-weight:600;font-size:12px;color:var(--muted);border:0;background:transparent}
.tab.active{background:var(--acao);color:var(--acao-texto)}
.box{width:18px;height:18px;border-radius:5px;border:2px solid var(--line);flex-shrink:0}
.box.on{background:var(--green);border-color:var(--green);position:relative}
.box.on::after{content:"✓";color:#fff;font-size:12px;position:absolute;top:-2px;left:2px;font-weight:700}
/* AVISO-01 + COR-10: faixa de atenção, terracota e SEM degradê (decisão do
   escritório em 16/09/2026 — o âmbar com gradiente era dourado + degradê, os dois
   proibidos pela marca). O <b> herda a cor: o #6b4d12 fixo sumia no escuro. */
.banner{background:var(--atencao-fundo);border:1px solid var(--atencao-borda);border-radius:12px;padding:13px 16px;display:flex;gap:11px;align-items:flex-start;font-size:12px;color:var(--atencao-texto);margin-bottom:18px}
.banner b{color:inherit}
/* seletor de cores (tipos de compromisso) */
.cores{display:flex;gap:8px;flex-wrap:wrap}
.cor input{position:absolute;opacity:0;width:0;height:0}
.cor span{width:26px;height:26px;border-radius:8px;display:block;cursor:pointer;border:2px solid transparent}
.cor input:checked + span{border-color:var(--navy);box-shadow:0 0 0 2px #fff inset}
/* abas de submenu de módulo (Painel | Chats | Funil | ...): a mesma lista já
   está na barra lateral, então em telas largas ela some daqui — sobra só como
   navegação alternativa no celular/tablet, onde a lateral vira gaveta
   (ver celular.css, que reexibe abaixo de 900px). Regra de esconder por
   último de propósito: mesma especificidade da base, então quem vem depois
   no arquivo ganha o empate. */
.abas{display:flex;gap:22px;border-bottom:1px solid var(--line);margin-bottom:18px}
/* 12px é a régua do 2º nível (02/09/2026) — a mesma do `.flyout-item`, que é
   este mesmo 2º nível desenhado do outro jeito (painel suspenso no monitor,
   esta faixa no celular). Eram 14px aqui e 12 lá: a mesma lista de submenu
   saindo de dois tamanhos conforme a largura da tela.
   O `border-bottom` de 2,5px NÃO foi mexido: espessura de borda não é a régua
   de fonte, e 2,5 não é nem `--borda` (1px) nem `--barra-acento` (3px) — está
   na lista que volta para o escritório. */
.abas a{display:inline-flex;align-items:center;gap:6px;padding:9px 2px 11px;font-size:12px;font-weight:600;color:var(--muted);border-bottom:2.5px solid transparent}
.abas a:hover{color:var(--navy)}
.abas a.on{color:var(--navy);border-bottom-color:var(--cyan)}
/* segunda faixa: as telas de dentro de "Configurar" */
.abas.sub{gap:14px;border-bottom:0;margin:-10px 0 18px;background:var(--card);
  border:1px solid var(--line);border-radius:10px;padding:2px 12px}
.abas.sub a{font-size:10px;padding:7px 2px 8px;border-bottom-width:2px}
/* No monitor quem navega entre as sub-telas é a barra lateral (o painel
   suspenso de 2º nível); repetir a mesma lista embaixo do cabeçalho seria a
   lista dupla que o CLAUDE.md veta. No celular, onde a barra vira gaveta, esta
   faixa continua sendo a navegação de verdade.
   A faixa `.topbar-abas`, que existia no topo entre 26/08 e 02/09/2026, morreu
   junto com a barra de cima.

   `:not(.sub)` entrou em 03/09/2026 (Fase 9, aplicando a §7.4 do Padrão
   Visual). A regra escondia .abas E .abas.sub juntas, porque `.abas.sub`
   também casa com `.abas` — e o 3º nível a barra lateral NÃO desenha. O
   resultado eram telas de configuração sem caminho de clique nenhum no
   computador: 7 sem nenhum, 3 só por link avulso, 4 (as do CRM) só pela
   Central de Configurações. Esconder vale só para o 2º nível, que é o
   redundante; o 3º é sempre visível, em qualquer largura. */
/* `.sempre` (24/09/2026): a faixa do módulo que mora dentro de um grupo da
   barra lateral (Marketing → Tráfego Pago, Puma). Lá a barra mostra só os
   módulos, não as telas de cada um — a faixa é o único caminho no computador
   e não some. Mesmo desenho de `.abas`. */
@media(min-width:901px){.abas:not(.sub):not(.sempre){display:none}}
/* chips de escolha (status, prioridade, visibilidade) */
.chips{display:flex;gap:9px;flex-wrap:wrap}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border-radius:22px;
           border:1.5px solid var(--line);font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;background:#fff}
.chip input:checked + span{border-color:var(--sucesso-borda);color:var(--sucesso-texto);background:var(--sucesso-fundo)}
.chip.p-alta input:checked + span{border-color:var(--red);color:var(--red);background:#fdeef0}
.chip.p-media input:checked + span{border-color:var(--orange);color:var(--orange);background:#fdf5ea}
/* ================= CONFIGURAÇÕES ================= */
/* Navegação entre telas de Configurações vive só na barra lateral escura
   (NAV_CONFIG, igual a todo módulo) — nada de menu duplicado aqui dentro. */
.cfg-lab{font-size:12px;font-weight:700;color:var(--ink);display:block;margin-bottom:9px}
.cfg-ajuda{font-size:12px;color:var(--muted);margin-top:9px;line-height:1.6}

/* ================= TEMA ESCURO ================= */
/* tarefa d2 (17/09/2026): início */
/* --bg/--card/--line/--ink/--muted/--navy eram redeclarados aqui com o azul-
   marinho antigo, mas o tema.css carrega DEPOIS e já redefine os seis nesse
   mesmo seletor `html.escuro` — letra morta, conferido token por token (os
   dois que pareciam suspeitos, --navy e --ink, também são refeitos lá).
   --shadow é o único que sobrevive: o tema.css não tem par pra ele, e rgba
   preto não é cor da paleta antiga. */
html.escuro{ --shadow:0 1px 3px rgba(0,0,0,.4); }
html.escuro body{background:var(--bg)}
/* .side saiu: tema.css já tem `html.escuro .side{background:#11201c}` (o
   verde profundo fixo da lateral) no MESMO seletor — carregando depois, já
   vencia sozinho. O #111a2e daqui nunca chegava a pintar. */
/* a janela de notificação é um degrau acima do fundo da barra, nos dois temas
   -- e por decisão de desenho (comentário da regra base, acima) é sempre o
   mesmo tom escuro, não um tom por tema. O #1a2440 que estava aqui quebrava
   essa decisão só no escuro; a regra base (`#1a3d34`) já resolve os dois. */
/* d2, 2a rodada (17/09/2026): saiu -- a base (`.ph h1`,`.card .hd h3`) já é
   var(--navy), e o tema.css já faz o par escuro dele ser tinta clara e quente
   (#e6e4df, "texto em destaque, não fundo"). O hex frio daqui só pintava por
   cima sem ganhar nada. */
html.escuro .logo,html.escuro .avatar{background:#1d3b33;color:#fff}
/* .menu-abrir saiu: a regra base já é toda por token
   (background:var(--card);color:var(--ink);border:1px solid var(--line)) --
   os hex daqui só pintavam por cima com o azul antigo, sem ganhar nada. */
html.escuro input,html.escuro select,html.escuro textarea{background:var(--card);color:var(--ink);border-color:var(--line)}
html.escuro .btn.ghost{background:var(--card);color:var(--navy);border-color:var(--line)}
html.escuro .btn.ghost:hover{background:var(--bg)}
html.escuro .btn.danger.sm:hover{background:var(--bg)}
/* linha de tabela sob o mouse: mesmo degrau que o cabeçalho já usa. */
html.escuro table tr:hover td{background:var(--linha-cabecalho)}
/* .barra-salvar, .kb-card e .kb-col saíram do grupo: as duas primeiras já são
   var(--card) na regra base, e .kb-col já é var(--bg) -- os hex daqui
   pintavam por cima sem ganhar nada e, pior, igualavam kb-card e kb-col (que
   no claro são propositalmente diferentes: cartão sobre a raia). Só
   `.cal .cell` de fato precisava do override (a base é #fff fixo, não
   token). */
html.escuro .cal .cell{background:var(--card)}
/* .modal saiu deste grupo: agora tem regra própria (vidro líquido), mais
   abaixo, perto da definição base — precisa vir DEPOIS no arquivo pra vencer
   a mesma especificidade que este seletor agrupado tinha. .cfg-menu também
   saiu: a classe não é mais usada em nenhum template (o menu interno
   duplicado de Configurações foi removido, só a barra lateral ficou). */
/* .cal .dow é cabeçalho da grade (mesmo papel do `th`) -- var(--linha-cabecalho).
   .pub summary:hover é hover "levemente destacado", mesma faixa. .cal .cell.out
   é a célula fora do mês, um degrau ABAIXO do cartão (como o kb-col recua da
   kb-card) -- var(--bg), não var(--linha-cabecalho). */
html.escuro .cal .dow,
html.escuro .pub summary:hover{background:var(--linha-cabecalho)}
html.escuro .cal .cell.out{background:var(--bg)}
/* .mini-dia:hover saiu: a base já é var(--bg) (mesmo grau usado aqui pro
   `.cal .cell[data-date]:hover`); o hex por cima só trocava o resultado
   certo pelo azul antigo. */
html.escuro .cal .cell[data-date]:hover{background:var(--bg)}
/* tarefa d2: fim */
/* COR-12 no escuro (17/09/2026): estes três vinham da paleta azul antiga
   (#243049/#1b2338 com texto #a9b8d6). O neutro do escuro é a mesma faixa que o
   cabeçalho de tabela usa (var(--linha-cabecalho), #232B26) com o cinza de apoio —
   5,5:1 de contraste, o mesmo par do claro (#ECE7DC sobre #555B57, 5,6:1).
   O estado LIGADO da pílula e do chip virou verde em 17/09/2026 (tarefa e1,
   FILT-02) -- tokens --sucesso-fundo/--sucesso-borda/--sucesso-texto do
   tema.css, nos dois temas. As proteções que mantinham um valor à parte
   dentro dos chats do CRM e do SAC foram apagadas em 17/09/2026 (tarefa e4):
   medido que nenhuma tela de chat usa `.pilula` ou `.chip`. */
html.escuro .chip span,html.escuro .pilula{background:var(--linha-cabecalho);border-color:var(--line);color:var(--muted)}
html.escuro .chip input:checked + span,html.escuro .pilula.on{background:var(--sucesso-fundo);border-color:var(--sucesso-borda);color:var(--sucesso-texto)}
html.escuro .flash{background:#12301f;border-color:#1e5638;color:#9ae6bb}
/* `.flash.erro` tinha regra SO no claro, e `html.escuro .flash` (duas classes
   + elemento) ganha dela na especificidade: no escuro o erro saia com o VERDE
   do sucesso — medido, `rgb(18,48,31)` nos dois. "O DJEN recusou 2 OABs" lia
   como "deu tudo certo". O par escuro do rosa #fde8eb/#f3b0bb/#8a2333. */
html.escuro .flash.erro{background:#3a1518;border-color:#6b2630;color:#f0a9b3}
html.escuro .login-wrap{background:#0a1c17}
html.escuro .login-card{background:var(--card)}
html.escuro .login-card h1{color:var(--ink)}
html.escuro .tag.gray{background:var(--linha-cabecalho);color:var(--muted)}
/* Par escuro das etiquetas coloridas (Fase 9, 03/09/2026). Só a .gray tinha —
   as outras seis ficavam com o fundo pastel CLARO do modo claro e o texto
   clareado pelo token, ou seja claro sobre claro. Medido no sistema rodando,
   com o tema escuro ligado: `tag cyan` 1,45:1, `tag orange` 2,16:1,
   `tag green` 2,61:1 (o mínimo legível é 4,5:1).
   O fundo aqui NÃO é cor nova: é a própria cor do texto do modo escuro
   (tema.css:207-211) a 16% sobre o cartão, então acompanha a paleta sozinho
   se ela mudar, e o tema claro fica intocado. */
/* 04/09/2026 — DUAS sessões mediram este mesmo verde no mesmo dia, sem saber
   uma da outra, e chegaram ao mesmo número: 16% dá 4,34:1, abaixo dos 4,5:1
   que o comentário acima promete, e 14% fecha em 4,51:1. O conflito de merge
   foi entre as duas correções, não entre correção e descuido.

   Ficou 13%, e não 14%, por um motivo que só apareceu quando alguém mediu com
   TRÊS métodos: float sem arredondar, arredondamento por canal e rasterização
   em canvas discordam em ±0,05 entre si. Em 14% os três davam 4,485 / 4,508 /
   4,512 — ou seja, a margem sobre a meta era MENOR que a discordância entre os
   medidores, e "passa" virava função de qual medidor se usasse. Em 13% os três
   dão 4,562 / 4,572 / 4,622.

   Mesmo raciocínio no vermelho: 11% dava 4,521 / 4,505 / 4,552 (mínimo cinco
   milésimos acima da meta) e desceu para 10%, que dá mínimo 4,582.
   Roxo em 12%: mínimo 4,524, já com folga. Cyan (7,22:1) e orange (5,12:1)
   nunca precisaram de correção.

   Régua para quem mexer aqui: o número tem que passar nos três métodos, não
   no seu. Empate técnico não é aprovação. */
html.escuro .tag.red{background:rgba(226,112,92,.10)}
html.escuro .tag.green{background:rgba(90,165,131,.13)}
html.escuro .tag.cyan{background:rgba(216,201,173,.14)}
html.escuro .tag.orange{background:rgba(217,154,69,.16)}
html.escuro .tag.purple{background:rgba(160,138,201,.12)}
/* A .yellow é a única cuja cor de TEXTO também era fixa e escura (#8a6d00),
   sem token por trás — por isso ganha as duas metades aqui. */
html.escuro .tag.yellow{background:rgba(217,154,69,.16);color:#e8c46a}

/* ================= CRM (estilo Kommo) ================= */
.funil-btn{border:0;background:transparent;color:var(--navy);font-size:16px;font-weight:800;
  cursor:pointer;outline:0;padding:5px 10px;border-radius:8px;letter-spacing:.01em;
  display:inline-flex;align-items:center;gap:5px}
.funil-btn:hover{background:var(--bg)}
/* d2, 2a rodada: saiu -- mesmo motivo do `.ph h1` acima: base já var(--navy). */
.lead-card{border-left-width:1px}
/* Os cinco tamanhos abaixo do piso deste bloco (9 e 9,5px) subiram para 10px em
   03/09/2026: 10 é o menor tamanho permitido em qualquer lugar do sistema, e a
   régua nomeia justamente estes casos — "legendas e timestamps". */
.lc-nome{font-size:10px;color:var(--muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-data{font-size:10px;color:var(--muted);flex-shrink:0}
.lc-titulo{display:block;font-size:12px;font-weight:600;color:var(--cyan-600);line-height:1.25;margin-bottom:5px}
.lc-titulo:hover{text-decoration:underline}
.lc-valor{font-size:10px;font-weight:600;color:var(--green);margin-top:1px}
.lc-tags{flex:1;display:flex;gap:4px;flex-wrap:wrap;min-width:0}
.lc-tag{font-size:10px;background:var(--bg);color:var(--muted);border:1px solid var(--line);
        border-radius:5px;padding:1px 6px;white-space:nowrap}
.lc-bolinha{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--muted)}
.lc-bolinha.ok{background:var(--green)}
.lc-bolinha.hoje{background:var(--orange)}
.lc-bolinha.vencida{background:var(--red)}
.lc-bolinha.sem{background:transparent;border:1.5px solid var(--line)}
/* Bloco D: mesma forma/tamanho do .lc-bolinha de tarefa, cor diferente — o
   ponto de temperatura não é status de tarefa, e reaproveitar a classe
   confundiria as duas leituras no mesmo card. */
.lc-temp{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.lc-temp.red{background:var(--red)}
.lc-temp.orange{background:var(--orange)}
.lc-temp.gray{background:var(--muted)}
/* card do lead: Sobre + Feed (como no Kommo) */
.feed{max-height:520px;overflow:auto}
.feed-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.feed-item:last-child{border-bottom:0}
html.escuro .lc-tag{background:#1b2338;border-color:#2b3552}


.card.destaque{box-shadow:0 0 0 2px var(--cyan);animation:pisca 1.6s ease-out}
@keyframes pisca{0%{box-shadow:0 0 0 5px rgba(34,193,195,.35)}100%{box-shadow:0 0 0 2px var(--cyan)}}

.canal.on .hd h3{color:var(--cyan-600)}
.canal-det{font-size:12px;color:var(--muted);background:var(--bg);border:1px solid var(--line);
  border-radius:8px;padding:7px 10px;margin-bottom:11px;word-break:break-all;font-family:ui-monospace,monospace}
.canal-form{margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}

/* ===== CARD DO LEAD: campos do painel =====
   O GRID desta tela não mora mais aqui: ela usa a grade de três ondas
   (.chat-tela.crm.com-aberta), a mesma do SAC. O que sobrou nesta seção são
   só as classes de CAMPO (.lp-*), que valem dentro de .chat-painel-corpo. */
.lp-voltar{display:inline-flex;align-items:center;color:var(--muted);text-decoration:none;padding:0 4px}
.lp-voltar:hover{color:var(--navy)}
/* Nome do lead, editável no lugar. Já morou num cabeçalho só dele e depois na
   faixa `.chat-painel-topo`; desde 07/09/2026 está de volta no `.lp-topo`, ao
   lado da foto, porque os dois títulos empilhados repetiam a mesma frase. O
   `flex:1` continua valendo — `.lp-topo` também é flex. O sublinhado tracejado
   no hover/foco é o que avisa que dá pra editar; não tirar. */
.lp-titulo{flex:1;min-width:0;border:0;border-bottom:1px dashed transparent;background:transparent;
  font-size:14px;font-weight:700;color:var(--navy);outline:0;padding:2px 0}
.lp-titulo:hover{border-bottom-color:var(--line)}
.lp-titulo:focus{border-bottom-color:var(--cyan)}
/* Onda 2, 1a linha do print: circulo com a foto | apelido. A foto estava no
   RODAPE da ficha, onde so era vista depois de rolar tudo -- identificar quem
   e o lead e trabalho do topo. */
.lp-topo{display:flex;align-items:center;gap:9px;margin-bottom:9px;min-width:0}
.lp-topo-nome{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.lp-topo-nome .lp-titulo{flex:none;width:100%}
.lp-topo-contato{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);
  white-space:nowrap;min-width:0;overflow:hidden}
.lp-topo-apelido{overflow:hidden;text-overflow:ellipsis;min-width:0}
.lp-grupo-escritorio{display:flex;justify-content:space-between;align-items:baseline}
/* Painel sobre a lista de conversas (MOD-08): desliza da esquerda, sem véu,
   e nunca passa da largura dela. Fundir e grupo com o cliente. */
.painel-lista{position:absolute;top:0;left:0;bottom:0;width:var(--largura-lista,300px);
  z-index:30;background:var(--card);border-right:1px solid var(--line);
  box-shadow:8px 0 24px rgba(15,23,42,.12);overflow-y:auto;
  transform:translateX(-100%);transition:transform .22s ease}
.painel-lista.aberto{transform:translateX(0)}
html.escuro .painel-lista{box-shadow:8px 0 24px rgba(0,0,0,.35)}
.painel-lista-form{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.painel-lista-topo{display:flex;justify-content:space-between;align-items:center}
.painel-lista-topo b{font-size:14px}
.painel-lista-fechar{border:0;background:none;color:var(--muted);cursor:pointer;display:flex;padding:4px}
.painel-lista-fechar:hover{color:var(--ink)}
.painel-lista-dica{margin:0}
.painel-lista-campo{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}
.painel-lista-campo legend{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.painel-lista-campo label{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);
  border-radius:var(--r-sm);font-size:12.5px;cursor:pointer;min-width:0}
.painel-lista-campo label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.painel-lista-campo label:has(input:checked){border-color:var(--cyan);background:var(--bg)}
.painel-lista-acoes{display:flex;justify-content:space-between;gap:8px;margin-top:4px}
.painel-lista-erro{margin:0;color:var(--red);font-size:12px}
.painel-lista-progresso{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.painel-lista-etapa{margin:0;font-size:12px;color:var(--muted)}
.progresso{height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.progresso>i{display:block;height:100%;width:var(--p,0%);background:var(--acao);border-radius:inherit;transition:width .25s linear}
.painel-lista-aviso{margin:0;color:var(--orange);font-size:12px}
.painel-lista-foto{display:flex;align-items:center;gap:10px}
.painel-lista-foto img,.grupo-cfg-foto img{border-radius:50%;object-fit:cover}
.painel-lista-campo .fld,.grupo-cfg-linha .fld{margin:0}
.grupo-cfg-foto{display:flex;align-items:center;gap:10px;margin:8px 0}
.grupo-cfg-sem-foto{width:48px;height:48px;border-radius:50%;border:1px dashed var(--line);display:grid;place-items:center;color:var(--muted)}
.grupo-cfg-lista{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.grupo-cfg-linha{display:grid;grid-template-columns:1fr 1fr auto auto;gap:6px;align-items:center}
.grupo-cfg-marca{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted);white-space:nowrap}
.lp-fechamento{display:grid;grid-template-columns:1fr;gap:8px;margin-top:4px}
.lp-fechamento .btn{height:34px;width:100%;justify-content:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-tela.crm .chat-painel .lp-tags .lp-id{flex-basis:100%}
.lp-grupo-escritorio a{font-size:11px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted)}
.lp-foto{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  background:var(--line)}
.lp-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:14px}
/* Titulo dos tres grupos do print (Informacoes / Dados do Lead / Ficha do
   Lead). Sem regua propria: 10px e o piso da escala fechada do escritorio, e a
   caixa alta com espacamento e a mesma do `.atz-nome` do Automatize. */
.lp-grupo{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:16px 0 2px;padding-top:10px;border-top:1px solid var(--line)}
.lp-campos > .lp-grupo:first-child{margin-top:0;padding-top:0;border-top:0}
.lp-subgrupo{margin:8px 0 2px}
/* Campo que o WhatsApp carimba e o sistema so captura. O icone do WhatsApp,
   e nao um cadeado: ele diz DE ONDE vem o valor, que explica; o cadeado so
   proibiria. (E `cadeado` nao existe em app/icones.py.) */
.lp-travado{display:inline-flex;align-items:center;gap:5px;color:var(--muted)}
.lp-travado .ico{flex:0 0 auto;opacity:.6}
/* A primeira mensagem pode ter 900 caracteres; a ficha tem 135px + o resto.
   Duas linhas e reticencias, com o texto inteiro no `title`. */
.lp-primeira{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.4}
/* O "salvo" do salvamento por campo. Discreto e passageiro no sucesso; o erro
   NAO some sozinho -- falhar em silencio faz a pessoa fechar a tela achando
   que gravou, que e o pior desfecho possivel deste desenho. */
.lp-salvo{grid-column:2;font-size:10px;color:var(--green);opacity:0;
  transition:opacity .15s ease;pointer-events:none}
.lp-salvo.on{opacity:1}
.lp-salvo.erro{color:var(--red);opacity:1;font-weight:600}
.lp-id{font-size:12px;color:var(--muted);font-weight:600;font-family:var(--fonte-mono)}

.lp-etapa{margin-bottom:14px}
.lp-funil{font-size:12px;color:var(--muted);margin-bottom:2px}
.lp-etapa-linha{display:flex;align-items:center;gap:8px}
.lp-etapa-sel{flex:1;min-width:0;position:relative}
.lp-etapa-sel summary{display:flex;align-items:center;gap:6px;list-style:none;cursor:pointer;
  font-size:14px;font-weight:700;color:var(--ink);padding:2px 0}
.lp-etapa-sel summary::-webkit-details-marker{display:none}
.lp-etapa-sel summary span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-etapa-sel summary .chip-cor{background:var(--cor-etapa);margin-right:0}
.lp-etapa-sel .clt-pop{left:0;right:0;max-height:360px;overflow-y:auto}
.lp-dias{font-size:12px;color:var(--muted);white-space:nowrap}
.lp-barra{height:3px;background:var(--line);border-radius:3px;margin-top:7px;overflow:hidden}
.lp-barra span{display:block;height:100%;width:45%;border-radius:3px;background:var(--cor-etapa,var(--green))}
.lp-alerta{font-size:12px;background:#fff7e6;border:1px solid #f3deb0;color:#7a5a18;
  border-radius:9px;padding:8px 11px;margin-bottom:12px;display:flex;align-items:center;gap:7px}

.lp-abas{display:flex;gap:14px;border-bottom:1px solid var(--line);margin-bottom:6px;
  overflow-x:auto;scrollbar-width:none}
.lp-abas::-webkit-scrollbar{display:none}
.lp-abas a{font-size:12px;font-weight:600;color:var(--muted);text-decoration:none;
  padding:9px 0;border-bottom:2px solid transparent;white-space:nowrap}
.lp-abas a.on{color:var(--navy);border-bottom-color:var(--cyan)}
.lp-abas-mais{margin-left:auto;font-size:15px}

.lp-campos{padding:6px 0}
.lp-campos[hidden]{display:none}
.lp-linha,.aba-contrato .ac-honorarios .fld{display:grid;grid-template-columns:135px 1fr;gap:10px;align-items:center;padding:6px 0}
.lp-resumo{font-size:13px;line-height:1.5;white-space:pre-line;display:-webkit-box;
  -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lp-resumo.aberto{display:block}
.lp-ver-mais{border:0;background:0;padding:2px 0 10px;font-size:12px;color:var(--muted);cursor:pointer}
.lp-ver-mais:hover{color:var(--ink)}
.lp-linha label,.aba-contrato .ac-honorarios .fld>label{font-size:12px;font-weight:400;color:var(--muted);line-height:1.35;margin:0}
.crm-exigido{color:var(--red)}
.lp-linha input,.lp-linha select,.lp-linha textarea,.aba-contrato .ac-honorarios input,.aba-contrato .ac-honorarios select{border:0;border-bottom:1px dashed transparent;
  background:transparent;font-size:12px;color:var(--ink);outline:0;padding:4px 0;width:100%;
  font-family:inherit;resize:vertical}
.lp-linha input:hover,.lp-linha select:hover,.lp-linha textarea:hover,.aba-contrato .ac-honorarios input:hover,.aba-contrato .ac-honorarios select:hover{border-bottom-color:var(--line)}
.lp-linha input:focus,.lp-linha select:focus,.lp-linha textarea:focus,.aba-contrato .ac-honorarios input:focus,.aba-contrato .ac-honorarios select:focus{border-bottom-color:var(--cyan)}
.lp-linha select[multiple]{border:1px solid var(--line);border-radius:8px;padding:5px}
/* Aba Contrato (ficha do lead e do grupo): o campo em branco sai vazio no
   contrato. O montador de honorários usa o campo e a linha da ficha (acima). */
.aba-contrato .ac-vazio .lp-rotulo{color:var(--orange)}
.aba-contrato .ac-acoes{display:flex;justify-content:flex-end;margin:12px 0 4px}
.aba-contrato .ac-honorarios .hn-subform{margin-left:18px!important}
.aba-contrato .ac-honorarios .fld{max-width:none!important}  /* o montador traz max-width no style= */
.aba-contrato .ac-honorarios .mini-check{display:inline-flex}
.aba-contrato .ac-honorarios input[type=radio],.aba-contrato .ac-honorarios input[type=checkbox]{width:auto;flex:0 0 auto}
.lp-fixo{font-size:12px;color:var(--ink)}


/* NÃO usar justify-content:flex-end aqui: com poucas mensagens ele encosta
   tudo embaixo (bonito), mas assim que a conversa cresta além da altura da
   caixa, o flexbox empurra as mensagens mais antigas pra CIMA da borda do
   container — numa área que overflow-y:auto não alcança (scrollHeight não
   cresce pra esse lado). Resultado: dá pra ver a conversa mas rolar pra cima
   simplesmente não faz nada, a mensagem antiga fica presa ali sem jeito de
   chegar nela. margin-top:auto no primeiro filho encosta embaixo do mesmo
   jeito quando cabe tudo, e vira 0 (em vez de empurrar) assim que o conteúdo
   já enche o espaço — aí o scroll normal alcança o topo de verdade. */
.chat-corpo{flex:1;min-height:0;overflow-y:auto;padding:20px 24px;display:flex;
  flex-direction:column;gap:14px}
.chat-corpo > *:first-child{margin-top:auto}
/* "Esta desalinhado os simbolos que vao dentro da conversa, certifique-se que
   fiquem na mesma linha" (print da Onda 3). A causa: `.ico` e `display:block`
   (tema.css), e um SVG bloco dentro de uma linha de texto joga o icone -- e
   tudo depois dele -- para a linha de baixo. Era por isso que data e autor
   ficavam numa linha, o simbolo noutra e o texto numa terceira.
   `flex` com `align-items:center` resolve sem mexer no `.ico`, que e global. */
.chat-evento{font-size:12px;color:var(--muted);line-height:1.6;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.chat-evento .chat-hora{margin-right:0;flex:0 0 auto}
.chat-evento .chat-ic{margin:0;display:inline-flex;align-items:center;flex:0 0 auto}
/* Uma cor por tipo de alteração: a barra à esquerda e o ícone. A barra também
   amarra o texto que quebra de linha ao evento dele. */
.chat-evento{border-left:3px solid var(--cor-evento,var(--line));padding-left:8px}
.chat-evento .chat-ic{color:var(--cor-evento,var(--muted))}
.chat-evento.ev-etapa{--cor-evento:var(--green)}
.chat-evento.ev-ia{--cor-evento:var(--purple)}
.chat-evento.ev-automacao{--cor-evento:var(--automacao)}
.chat-evento.ev-status{--cor-evento:var(--orange)}
.chat-evento.ev-tarefa{--cor-evento:var(--cyan)}
.chat-evento.ev-nota{--cor-evento:var(--navy)}
.chat-bolha{max-width:min(680px,80%);width:fit-content;background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line);
  border-radius:14px;padding:11px 15px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.chat-bolha.entrada{align-self:flex-start}
.chat-bolha.saida{align-self:flex-end;background:#e8f4fd;border-color:#c9e3f7}
html.escuro .chat-bolha{background:rgba(27,33,30,.9)}
/* Status da mensagem enviada, na convenção do WhatsApp (Fase 6, item E):
   só o tique, sem palavra — o rótulo vive no `title`/`aria-label`. Cinza em
   enviada/entregue, azul só em lida, vermelho no erro. O verde saiu: ele
   dizia "deu certo" nos três estados e apagava a diferença entre eles. */
.chat-status{display:inline-flex;align-items:center;color:var(--muted)}
.chat-status.lida{color:var(--cyan)}
.chat-status.erro{color:var(--red)}
.chat-txt{font-size:14.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
/* Placeholder de PAINEL — a mensagem que ocupa um painel ainda sem seleção:
   chat sem conversa aberta, leitor sem publicação escolhida. Não é o estado
   vazio de lista/tabela/cartão (esses têm as três macros `vazio*`): lá falta um
   registro, aqui falta uma escolha, e a saída não é um botão, é clicar na lista
   ao lado.
   `.chat-vazio` e `.pub-vazio` eram esta mesma declaração escrita duas vezes,
   caractere por caractere, em arquivos diferentes — o nome do módulo tinha
   virado o nome do componente. Sobram `.chat-vazio-tela` (+40px de respiro),
   `.ag-vazio` (13px, +20px) e `.cp-vazio` (+34px, sem `margin:auto` porque mora
   dentro de um cartão): mesmo conceito, paddings diferentes, e convergem quando
   as telas delas passarem por aqui. */
.vazio-painel{margin:auto;text-align:center;color:var(--muted);font-size:14px}

.chat-tarefas{border-top:1px solid var(--line);background:var(--card);padding:9px 24px}
.chat-tarefa{display:flex;align-items:center;gap:9px;font-size:12.5px;padding:4px 0}
.chat-tarefa>*{flex:0 0 auto;white-space:nowrap}
.chat-tarefa .dica{margin:0}
.chat-tarefa b{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.chat-tarefa.vencida b{color:var(--red)}
.chat-tarefa.vazia{color:#7a5a18;background:#fff7e6;border:1px solid #f3deb0;
  border-radius:9px;padding:8px 12px}
.link{background:0;border:0;padding:0;font:inherit;color:var(--cyan-600);cursor:pointer;
  text-decoration:underline}

/* Faixa de chips do topo da conversa — `.chat-topo` e `.chip-acao` do protótipo
   (styles.css:290-297). Antes a faixa era `style=` inline com medidas próprias
   e os chips eram `.btn ghost sm`: caixa branca opaca, canto de 9px, negrito e
   um ícone antes do rótulo. O chip do desenho é transparente, canto de 5px,
   28px de altura e SÓ TEXTO. A faixa tem 40px e rola na horizontal, para o
   terceiro chip do SAC não ser cortado quando a coluna estreita. */
/* `:not(.lead)` NÃO é firula: `.chat-chips` também é usada na tela do lead,
   cuja faixa é `style=` inline com botões de 27,8px — o `height:40px` e o
   `overflow-x` daqui não são sobrescritos por aquele inline, e os botões
   passariam a estourar uma faixa de 40px com 16px de padding. */
.chat-tela:not(.lead) .chat-chips{flex:0 0 auto;height:40px;display:flex;align-items:center;
  gap:8px;padding:0 16px;background:var(--card);border-bottom:1px solid var(--line);
  overflow-x:auto;overflow-y:hidden}
.chip-acao{height:28px;padding:0 10px;border-radius:5px;border:1px solid var(--line);
  background:transparent;color:var(--ink);font-family:inherit;font-size:12px;line-height:1;
  cursor:pointer;white-space:nowrap;flex:0 0 auto;display:inline-flex;align-items:center;
  text-decoration:none}
.chip-acao:hover{border-color:var(--navy);background:var(--bg)}
.chip-acao:active{background:var(--bg)}
/* Recuo lateral de 24px -> 10px (pedido de 07/09/2026: "diminua a distancia do
   texto para as linhas extremas"). O de baixo tambem encolheu: 16px sobrando
   embaixo de uma caixa de 38px era quase meia caixa de ar. */
.chat-caixa{border-top:1px solid var(--line);background:var(--card);padding:8px 10px 10px}
/* Composer de 2 estados (Workspace de 3 Ondas, porte de 04/09/2026). O que
   fica sempre visível é só a linha de escrever (textarea + Enviar, dentro de
   `#form-chat`/`#form-chat-sac`) e o aviso de "respondendo a" quando ativo —
   o resto (alternar Bate-papo/Nota, anexar, microfone, respostas rápidas)
   entra em `.chat-caixa-extra` e só aparece com o composer em foco
   (`:focus-within`, então clicar em QUALQUER controle de dentro mantém aberto,
   não só o textarea). `max-height`, não `height:0`, porque o conteúdo de
   dentro varia de tela pra tela (o Card do lead tem IA e Tarefa a mais que o
   Chats; o SAC tem tudo numa linha só) — nenhuma das três precisa saber o
   tamanho exato da outra. `pointer-events:none` fechado evita clicar em botão
   invisível pelo teclado (tab não pula pra ele porque ele deixa de caber, mas
   um clique de mouse "através" do espaço colapsado não pode ativar nada). */
.chat-caixa-extra{max-height:0;opacity:0;overflow:hidden;pointer-events:none;
  transition:max-height .15s ease,opacity .12s ease}
.chat-caixa:focus-within .chat-caixa-extra,.chat-caixa.gravando .chat-caixa-extra,.chat-caixa.audio-pronto .chat-caixa-extra{max-height:160px;opacity:1;pointer-events:auto;margin-bottom:0;
  overflow:visible}
/* Grupo à direita da barra de ferramentas (protótipo `.ferramentas .dir`):
   atalhos, emoji e clipe. `margin-left:auto` no GRUPO, nunca num item que pode
   sumir — armadilha #4 da SPEC_TECNICA. */
.chat-extra-dir{margin-left:auto;display:flex;align-items:center;gap:2px;flex:0 0 auto;position:relative}
/* Dentro da barra de ferramentas o alternador Bate-papo/Nota interna é um item
   da MESMA linha (protótipo: `.ferramentas` tem 38px de altura), não um bloco
   com respiro embaixo. A margem original continua valendo onde a classe é
   reusada fora daqui — o Card do lead, que empilha. */
/* Medidas da `.ferramentas` do protótipo: faixa de 38px, `Enviar` de 26px e
   botões de ícone de 28px. Escopado em `.chat-conversa` (a 3ª onda) de
   propósito: o Card do lead reusa `.chat-caixa-extra` com outro conteúdo, mais
   denso, e encolher os botões dele não foi pedido. */
.chat-conversa .chat-caixa-extra{min-height:38px}
/* `.bt-enviar` do protótipo (styles.css:346): 26px de altura, canto de 5px e
   SEM borda. O `.btn` da casa vem com canto de 9px e uma borda de 1px, que era
   o que fazia o Enviar sair diferente do desenho. */
.chat-tela:not(.lead) .chat-conversa .chat-caixa-extra .btn{height:26px;line-height:26px;
  padding:0 14px;font-size:12px;border-radius:5px;border:0}
/* A tela do lead reusa a mesma casca com o par que tinha antes de 05/09,
   incluindo o `.btn.ghost` de 28px, que lá veste Cancelar, Tarefa e IA. Sem
   esta linha aqueles três voltariam aos 35,8px do `.btn` padrão. */
.chat-tela.lead .chat-conversa .chat-caixa-extra .btn{height:26px;line-height:24px;
  padding:0 14px;font-size:12px}
.chat-tela.lead .chat-conversa .chat-caixa-extra .btn.ghost{height:28px;padding:0 7px}
/* `.ic` do protótipo (styles.css:350): botão de ícone é 28x28 SEM moldura e SEM
   fundo, canto de 5px, com o ícone a 15px. Antes microfone, atalhos, emoji e
   clipe usavam `.btn.ghost`, que é caixa branca com borda e canto de 9px —
   quatro caixinhas onde o desenho pede quatro ícones soltos. */
.chat-ferr-ic{width:28px;height:28px;border-radius:5px;border:0;background:none;color:var(--muted);
  cursor:pointer;display:grid;place-items:center;flex:0 0 auto;padding:0}
.chat-ferr-ic:hover{background:var(--bg);color:var(--ink)}
.chat-ferr-ic .ico{width:15px;height:15px}
/* `.cancelar` do protótipo (styles.css:354): é texto, não botão. Sublinha no
   hover em vez de ganhar moldura. */
.chat-cancelar{border:0;background:none;color:var(--muted);cursor:pointer;font-family:inherit;
  font-size:12px;white-space:nowrap;flex:0 0 auto;padding:0 4px}
.chat-cancelar:hover{color:var(--ink);text-decoration:underline}
/* Na barra de ferramentas tudo é item da MESMA linha de 38px. Dois resquícios
   de quando não era: `.chat-anexo-form` traz `margin-top:8px`, que deixava o
   clipe 8px mais baixo que o emoji e os atalhos ao lado; e a `.dica` do status
   do microfone traz 12px de margem inferior mesmo VAZIA, empurrando a faixa
   para baixo sem nada escrito nela. */
.chat-extra-dir .chat-anexo-form{margin-top:0;gap:6px}
.chat-caixa-extra .dica{margin:0}
.chat-ferr-ic.gravando{color:var(--red);animation:micGravando 1s ease-in-out infinite}
.mic-onda{width:120px;height:22px;color:var(--red);flex:0 0 auto}
.chat-caixa.audio-pronto .chat-caixa-extra .dica{white-space:nowrap}
@keyframes micGravando{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.chat-ferr-ic.gravando{animation:none}}
.chat-caixa-extra .dica:empty{display:none}
.chat-emoji-pop{position:absolute;bottom:calc(100% + 6px);right:0;z-index:9;background:var(--card);
  border:1px solid var(--line);border-radius:9px;box-shadow:0 10px 28px rgba(27,32,29,.16);
  padding:6px;display:grid;grid-template-columns:repeat(8,26px);gap:2px}
.chat-emoji-pop[hidden]{display:none}
.chat-emoji-pop button{border:0;background:none;cursor:pointer;font-size:15px;line-height:26px;
  height:26px;border-radius:5px;padding:0}
.chat-emoji-pop button:hover{background:var(--bg)}
/* Linha sempre visível (Workspace de 3 Ondas): barra fina de 38px, não mais
   caixa de texto com borda. `Enviar` mora em `.chat-caixa-extra` — a spec do
   protótipo esconde até o botão de enviar enquanto ninguém escreve; Enter
   continua mandando a mensagem (handler no textarea), então isso não tira
   função, só o botão visível quando fechado. */
.chat-form{display:flex;align-items:center;gap:8px;height:38px}
/* "Bate-papo com {cliente}": fonte no menor degrau da escala fechada (10px),
   encostado no canto e com teto de 20% da largura -- eram 12,5px e 36%, mais
   de um terco da barra gasto para dizer o obvio. Passando do teto, reticencias:
   o `min-width:0` e o que faz o `text-overflow` funcionar dentro do flex. */
.chat-form-prefixo{flex:0 1 auto;min-width:0;font-size:10px;color:var(--muted);
  white-space:nowrap;max-width:20%;overflow:hidden;text-overflow:ellipsis}
.chat-form-prefixo b{color:var(--ink);font-weight:600}
.chat-form .atalho{flex:0 0 auto;border:0;background:0;color:var(--muted);cursor:pointer;
  padding:4px;border-radius:6px;display:flex;align-items:center}
.chat-form .atalho:hover{background:var(--bg);color:var(--ink)}
.chat-form textarea{flex:1;min-width:60px;border:0;background:0;resize:none;
  font-family:inherit;font-size:13.5px;line-height:20px;height:20px;overflow:hidden;
  outline:0;padding:0;color:var(--ink)}
.chat-form textarea::placeholder{color:var(--muted)}
.chat-form-tag{flex:0 0 auto;font-size:11px;color:var(--muted);white-space:nowrap}

html.escuro .chat-bolha.saida{background:#16324a;border-color:#1f4a6b}
/* d2, 2a rodada: saiu -- base já var(--navy); o par dentro do chat
   (`.chat-tela .lp-titulo`, abaixo) continua intocado e já usa var(--ink). */
html.escuro .chat-tarefa.vazia{background:#2a2313;border-color:#4a3d17;color:#e8d59a}
@media (max-width:1000px){
  .chat-corpo{min-height:320px}
}


.ia-item{margin-bottom:14px}
.ia-texto{font-size:14px;line-height:1.6;white-space:pre-wrap;background:var(--bg);
  border:1px solid var(--line);border-radius:10px;padding:11px 14px}
/* O bloco da minuta da IA é "isto espera você" — o mesmo conceito de
   `.destacada`, e já era o MESMO literal claro (#fffdf5). O escuro é que
   divergia: #2a2313 aqui contra #231f13 lá, dois marrons quase iguais que
   ninguém escolheu separadamente. Passou a sair do token (item I). */
.ia-rascunho{border-top:1px solid var(--line);background:var(--destaque);padding:12px 24px}
.ia-rascunho.barrado{background:#fdf3f4}
.ia-rascunho-cab{font-size:12px;font-weight:700;color:#7a5a18;margin-bottom:8px}
.ia-rascunho.barrado .ia-rascunho-cab{color:#8a2333}
.ia-menu{position:relative}
.ia-opcoes{position:absolute;bottom:calc(100% + 6px);left:0;background:var(--card);
  border:1px solid var(--line);border-radius:11px;box-shadow:0 8px 26px rgba(15,23,42,.16);
  min-width:230px;overflow:hidden;z-index:20}
.ia-opcao{display:flex;justify-content:space-between;gap:10px;align-items:center;width:100%;
  background:0;border:0;text-align:left;padding:10px 14px;font-size:12px;color:var(--ink);
  cursor:pointer;font-family:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.ia-opcao:last-child{border-bottom:0}
.ia-opcao:hover{background:var(--bg)}
html.escuro .ia-rascunho.barrado{background:#2d1a1f}

/* números clicáveis do dashboard, com resposta ao passar o cursor */
.num-link{display:block;text-decoration:none;color:inherit;border-radius:12px;
  transition:transform .16s cubic-bezier(.34,1.4,.64,1), background-color .16s, box-shadow .16s}
.num-link:hover{background:var(--bg);transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(15,23,42,.09)}
.num-link:active{transform:translateY(0) scale(.985)}
.num-link .big{transition:transform .16s cubic-bezier(.34,1.4,.64,1)}
.num-link:hover .big{transform:scale(1.09)}
/* tarefa d2 (17/09/2026): fundo saiu -- a base (.num-link:hover) já é
   var(--bg); o hex por cima pintava azul antigo sem ganhar nada. Só a
   sombra mais escura para o fundo escuro fica. */
html.escuro .num-link:hover{box-shadow:0 6px 18px rgba(0,0,0,.3)}
@media (prefers-reduced-motion: reduce){
  .num-link,.num-link .big{transition:none}
  .num-link:hover,.num-link:hover .big{transform:none}
}

.cal-legenda{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.cal-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:5px 11px;
  border:1px solid var(--line);border-radius:20px;color:var(--muted);text-decoration:none;
  background:var(--card);transition:border-color .15s, color .15s}
.cal-chip:hover{border-color:var(--cyan);color:var(--cyan-600)}
.cal-chip.on{background:var(--cyan);border-color:var(--cyan);color:#fff}
.cal-chip.on i{box-shadow:0 0 0 2px rgba(255,255,255,.6)}
.cal-chip i{width:8px;height:8px;border-radius:50%;display:inline-block}
.cal-chip b{color:inherit}
.cal-chip.alerta{border-color:#f3b0bb;color:#8a2333;background:#fde8eb}
.cal-chip.alerta:hover{border-color:var(--red)}
html.escuro .cal-chip.alerta{background:#2d1a1f;border-color:#5a2a35;color:#f3b0bb}

/* ===== publicações: origem e trilha de datas do prazo ===== */
.pub-origem{border-left:4px solid var(--cyan);max-width:820px;margin:0 auto 16px}
.pub-origem-cab{display:flex;align-items:center;gap:9px;flex-wrap:wrap}

.pub-datas{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--bg);
  border:1px solid var(--line);border-radius:11px;padding:13px 16px;margin-bottom:16px}
.pub-datas > div{display:flex;flex-direction:column;gap:2px}
.pub-datas b{font-size:14px}
.pub-seta{color:var(--muted);font-size:16px;display:inline-flex;align-items:center}
.pub-fatal{color:var(--red)}
/* O irmao silencioso do `?`: marca campo que NAO sai no documento assinado e
   serve so ao controle interno do escritorio (metrica, previsao de caixa, o
   numero que alimenta o modulo de Processos). Pedido do escritorio em
   07/09/2026 — "uma exclamacao bem pequena" — para separar, na tela de contrato,
   o que vai impresso do que fica dentro de casa.

   Nao e botao e nao abre nada: o `?` explica a ETAPA, o `!` diz a NATUREZA do
   campo, e a frase inteira cabe no `title`. Menor que o `?` de proposito (14px,
   fonte 10px, o piso da regua) porque e sinal de fundo, nao chamada de atencao.

   Mora aqui, e nao no <style> de contrato_novo.html, porque quem emite o `!` do
   campo de expectativa de meses e `app/static/js/app.js` — que a tela de
   detalhe do contrato tambem usa. */
.interno{display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;border-radius:50%;border:1px solid var(--orange);
  color:var(--muted);font:700 10px/1 var(--fonte-ui);cursor:help;
  vertical-align:middle;margin-left:2px}
button.ajuda{width:15px;height:15px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);color:var(--muted);font-size:10px;cursor:pointer;padding:0;line-height:1}
button.ajuda:hover{border-color:var(--cyan);color:var(--cyan-600)}
.ajuda-caixa{margin-top:12px;background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:12px 15px;font-size:12px;line-height:1.65}
.ajuda-caixa p{margin:0 0 7px}
.ajuda-caixa p:last-child{margin:0}
.pub-ato{font-size:10px;font-weight:700;border-radius:20px;padding:2px 9px;white-space:nowrap}

.cat-linha{display:flex;gap:6px;align-items:center}
.cat-linha select{flex:1;min-width:0}
.cat-btn{width:32px;height:32px;flex:0 0 auto;border:1px solid var(--line);border-radius:8px;
  background:var(--card);color:var(--muted);font-size:16px;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center}
.cat-btn:hover{border-color:var(--cyan);color:var(--cyan-600)}
.cat-btn.rem:hover{border-color:var(--red);color:var(--red)}
.cat-novo{display:flex;gap:6px;align-items:center;margin-top:8px;flex-wrap:wrap}
.cat-novo[hidden]{display:none}
.cat-novo input[type=text],.cat-novo input:not([type]){flex:1;min-width:150px;
  border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:12px;outline:0;
  background:var(--card);color:var(--ink)}
.cat-novo input[type=color]{width:32px;height:32px;padding:0;border:1px solid var(--line);
  border-radius:8px;background:transparent;cursor:pointer;flex:0 0 auto}

/* ===== chats: lista + painel do lead + conversa ===== */
/* altura presa à janela (regra da linha 87): o offset é o espaço que o
   cabeçalho da página (título + card de busca/filtros; as abas do módulo
   somem em telas largas, ver acima) ocupa acima da caixa — mede de novo com
   a régua do navegador se alterar qualquer um desses blocos, senão o painel
   volta a estourar a altura da janela (min-height força overflow) e "não dá
   pra rolar" as mensagens de novo. Medido com o `.abas` já escondido: 63px
   a menos que a versão anterior (372px). */
.chat-tela{display:grid;grid-template-columns:var(--largura-lista,300px) 1fr;grid-template-rows:minmax(0,1fr);gap:0;
  height:calc(100vh - 309px);min-height:360px;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}
.chat-tela.com-aberta{grid-template-columns:minmax(0,var(--largura-lista,300px))
  minmax(0,var(--largura-painel,280px)) minmax(var(--onda3-min,420px),1fr)}
/* BUG DE 18/08/2026 — recolher o painel escondia o botão de trazer de volta.
   `display:none` no `.chat-painel` levava junto o cabeçalho, e era lá dentro
   que morava o botão. Quem recolhesse ficava sem nenhum controle na tela, e a
   preferência fica no `localStorage`: recarregar voltava recolhido de novo.
   A correção da época foi recolher para uma FAIXA de 34px, que era só o botão.

   Em 04/09/2026 isso saiu: o botão de recolher passou a morar na DIVISÓRIA,
   como no protótipo de 3 Ondas (`.recolher` dentro de cada `.divisor`). A
   divisória fica sempre visível na borda, a coluna pode ir a zero de verdade
   (não sobra faixa de 34px) e o caminho de volta continua à vista — as regras
   `.lista-recolhida` / `.painel-recolhida` estão junto do `.sac-divisoria`,
   mais abaixo. */

/* Variante de uma coluna só — a caixa de entrada do CRM, que abre sem nada
   selecionado ao lado. Sem segunda coluna não há divisória: divisoria.js sai
   antes de criar barra nenhuma. */
.chat-tela.so-lista{grid-template-columns:1fr}
.chat-tela.so-lista .chat-lista{border-right:0}

/* `container-type` aqui, e não só em `.chat-item`: a barra de filtro esconde o
   `Total: N` abaixo de 340px de PAINEL (protótipo `@container (max-width:340px)`),
   medida que só existe se a coluna inteira for o contêiner. */
.chat-lista{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0;min-height:0;
  container-type:inline-size;container-name:onda1}
/* As três faixas do protótipo carregam cada uma a PRÓPRIA altura, o próprio
   padding e a própria linha divisória. A `.lista-topo` do protótipo não tem
   borda de baixo nem padding: quem fecha o cabeçalho é a borda da 3ª faixa.
   Antes o padding (11/12) e o `gap:7px` moravam aqui e nenhuma faixa tinha
   altura — por isso o cabeçalho inteiro saía com medida diferente do desenho,
   embora o comentário logo abaixo já dissesse 52 · 28 · 32. */
.chat-lista-topo{background:var(--bg);display:flex;flex-direction:column;
  flex:0 0 auto;position:relative;z-index:5}
.clt-titulo{padding:14px 16px 2px}
.clt-busca{display:flex;align-items:center;gap:8px;height:52px;padding:0 16px;
  border-bottom:1px solid var(--line)}
.clt-busca .ico{flex:0 0 auto;color:var(--muted)}
.clt-busca input{border:0;background:transparent;outline:0;flex:1;font-size:12px;color:var(--ink);min-width:0}
/* Sem `flex-wrap`, de propósito — armadilha #1 da SPEC §6. A barra do protótipo
   não quebra em duas linhas: quando falta largura, quem some é o `Total: N`,
   pela container query lá embaixo. Com `wrap`, os botões caíam para a linha de
   baixo e a barra deixava de ter 32px. */
.clt-linha{position:relative;display:flex;align-items:center;gap:8px;height:32px;padding:0 16px;
  border-bottom:1px solid var(--line)}
.chat-lista-topo .pilula{font-size:10.5px;padding:4px 9px}
.clt-total{font-size:11px}
/* ---------------------------------------------------------------------------
   1ª onda — cabeçalho do protótipo (CRM e SAC / inbox_crm.html, inbox_sac.html)

   Três faixas, nesta ordem: busca (52px) · faixa de seção (28px) · barra de
   filtro (32px). Os hex do `styles.css` do protótipo NÃO foram copiados —
   SPEC_TECNICA.md §4 manda mapear para os tokens reais de `tema.css`:
   `--surface`→`--bg`, `--row`→`--card`, `--brand`→`--navy`, `--pill`→`--green`,
   `--filtro-bg/fg`→ o mesmo par que a `.pilula.on` já usa nesta casa.
   --------------------------------------------------------------------------- */
.clt-secao{display:flex;align-items:center;gap:8px;height:28px;padding:0 16px;
  border-bottom:1px solid var(--line)}
.clt-secao b{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clt-cont{margin-left:auto;background:var(--green);color:#fff;font-size:10px;line-height:16px;
  height:16px;min-width:16px;padding:0 5px;border-radius:8px;text-align:center;
  font-variant-numeric:tabular-nums;flex:0 0 auto}
/* chip do preset ativo: um botão só, no lugar das pílulas soltas */
.clt-filtro{display:inline-flex;align-items:center;background:#eefaff;color:var(--cyan-600);
  font-weight:600;font-size:11px;line-height:18px;height:18px;padding:0 8px;border-radius:4px;
  border:0;cursor:pointer;font-family:inherit;white-space:nowrap;max-width:60%;
  overflow:hidden;text-overflow:ellipsis}
.clt-filtro:hover{filter:brightness(.97)}
/* `.retic` do protótipo: os botões da barra são ÍCONE PURO — sem moldura, sem
   fundo, na cor de texto secundário, e só escurecem no hover ou quando o menu
   está aberto (`aria-expanded`).
   Isto existe porque a versão anterior reaproveitou `.clt-ic`, que é a caixinha
   do cabeçalho do funil (`crm_funil.html`): borda, canto de 8px e `background`
   fixo em `#fff`. Na barra do chat isso virava uma caixa branca no lugar de um
   ícone — e no tema escuro o `#fff` fixo não tem override nenhum, então o
   ícone (claro, por `currentColor`) ficava branco sobre branco: INVISÍVEL.
   Eram quatro dessas em fila no SAC. `.clt-ic` continua existindo para o funil;
   o que não pode é servir aos dois. */
.clt-retic{border:0;background:none;color:var(--muted);cursor:pointer;font-size:15px;
  line-height:1;padding:0 2px;font-family:inherit;text-decoration:none;
  display:inline-flex;align-items:center}
.clt-retic:hover,.clt-retic[aria-expanded="true"]{color:var(--ink)}
.clt-retic.ico{width:20px;height:20px;display:grid;place-items:center;font-size:12px;
  line-height:1;padding:0}
.clt-retic.ico .ico{width:13px;height:13px}
/* Armadilha #4 da spec: `margin-left:auto` num item que some (o `Total: N`
   desaparece por container query) leva junto a ancoragem dos botões. O `auto`
   mora no grupo, nunca no item. */
.clt-dir{margin-left:auto;display:flex;align-items:center;gap:6px;flex:0 0 auto}
.clt-dir .clt-total{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
@container onda1 (max-width:340px){ .clt-dir .clt-total{display:none} }
/* menus/popover do cabeçalho (protótipo `.pop`, `.mi`, `.pop-sep`, `.mi-tit`) */
.clt-pop{position:absolute;top:calc(100% + 4px);z-index:9;background:var(--card);
  border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 28px rgba(27,32,29,.16);
  min-width:190px;padding:6px 0}
.clt-mi{display:flex;align-items:center;gap:8px;min-height:30px;padding:0 12px;font-size:12px;
  color:var(--ink);cursor:pointer;border:0;background:none;width:100%;box-sizing:border-box;
  font-family:inherit;text-align:left;text-decoration:none}
.clt-mi:hover{background:var(--bg)}
.clt-mi .ck{margin-left:auto;color:var(--navy);font-weight:700}
.clt-mi-tit{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  padding:8px 12px 2px}
.clt-sep{height:1px;background:var(--line);margin:6px 0}
/* `.pop-filtro` do protótipo (styles.css:97-118): o popover de filtro não é
   uma listinha como o de Ordenar — é um painel ancorado à LARGURA DA BARRA,
   com a coluna de presets em cima e um rodapé próprio com Limpar e Aplicar.
   A seleção ali é `aria-selected` no preset inteiro, não um ✓ à direita.

   Os Chats do CRM usam também a segunda coluna (`.clt-pop-campos`): visões
   à esquerda e campos que se combinam à direita (CRM-R110). O SAC continua só
   com a coluna de presets. */
.clt-pop-filtro{left:8px;right:8px;min-width:0;padding:0}
.clt-presets{padding:8px 0;max-height:262px;overflow-y:auto}
.clt-preset{display:flex;align-items:center;gap:8px;height:32px;padding:0 12px;font-size:12px;
  color:var(--ink);cursor:pointer;border:0;background:none;width:100%;box-sizing:border-box;
  font-family:inherit;text-align:left;text-decoration:none}
.clt-preset:hover{background:var(--bg)}
.clt-preset[aria-selected="true"]{color:var(--cyan-600);font-weight:600;background:#eefaff}
html.escuro .clt-preset[aria-selected="true"]{background:#132b3d;color:#5ecdf5}
.clt-pop-rodape{display:flex;justify-content:flex-end;gap:8px;padding:8px 12px;
  border-top:1px solid var(--line)}
/* `.bt` / `.bt.primario` do protótipo: 24px e raio 5px. */
.clt-pop-rodape .btn{height:24px;line-height:22px;padding:0 10px;border-radius:5px;font-size:12px}
.clt-pop-rodape .btn.ghost{font-weight:400}
html.escuro .clt-filtro{background:#132b3d;color:#5ecdf5}
.clt-pop-campos{right:auto;width:min(600px,92vw);display:grid;grid-template-columns:230px 1fr}
.clt-pop-campos[hidden]{display:none}
.chat-lista:has(.clt-pop-campos:not([hidden])){position:relative;z-index:30}
.clt-pop-campos .clt-presets{max-height:none;border-right:1px solid var(--line)}
.clt-pop-campos .clt-pop-rodape{grid-column:1/-1}
.clt-pop-campos .clt-preset{height:auto;min-height:32px;flex-wrap:wrap;padding:6px 12px;row-gap:0}
.clt-preset-n{margin-left:auto;color:var(--muted);font-weight:400;font-variant-numeric:tabular-nums}
.clt-exp{flex:0 0 100%;font-size:11px;font-weight:400;color:var(--muted);line-height:1.35}
.pop-campos{padding:8px 12px;display:flex;flex-direction:column;gap:8px;
  max-height:min(420px,60vh);overflow-y:auto}
.pop-campo label{display:block;font-size:11px;font-weight:600;color:var(--ink);margin-bottom:2px}
.pop-campo select{width:100%;height:28px;font-size:12px;border:1px solid var(--line);border-radius:5px;
  background:var(--card);color:var(--ink);padding:0 6px;font-family:inherit}
.pop-campo .pop-campo-chk{display:flex;align-items:center;gap:6px;font-size:12px;margin:0}
.pop-campo .clt-exp{margin-top:2px}
@media (max-width:700px){
  .clt-pop-campos{right:8px;width:auto;grid-template-columns:1fr}
  .clt-pop-campos .clt-presets{border-right:0;border-bottom:1px solid var(--line)}
}
.chat-itens{flex:1;min-height:0;overflow-y:auto}
.chat-paginas{display:flex;align-items:center;justify-content:center;gap:10px;
  padding:12px;border-top:1px solid var(--line)}
.chat-paginas .btn-secundario{padding:4px 10px;font-size:11.5px}
/* Grade fixa (Workspace de 3 Ondas, porte de 04/09/2026): 16 | 32 | 1fr | 52px.
   Antes a hora morava DENTRO de `.chat-item-cab` (`flex-wrap:wrap`), com
   `margin-left:auto` — era a mesma armadilha já documentada em
   Padrao-Visual/design-system.md ("flex-wrap no cabeçalho da linha"): nome comprido +
   chip de etapa enrolava a linha e a hora descia junto, porque ela era irmã
   dos chips, não uma coluna própria. A grade tira a hora (e o badge de não
   lidas) de dentro do texto e dá a ela a 4ª coluna, sempre no mesmo lugar.
   `.chat-item-link` vira `display:contents`: o `<a>` continua existindo (link
   real, funciona sem JS, ctrl+clique abre aba nova) mas some da árvore de
   caixas — os filhos dele (avatar, texto, meta) é que ocupam as colunas 2/3/4
   por `grid-column` explícito, não por ordem de DOM. Explícito porque o SAC
   (_sac_lista.html) não tem o formulário da estrela (coluna 1): com posição
   automática, o item dele perderia uma coluna e tudo andava uma casa para a
   esquerda. */
.chat-item{display:grid;grid-template-columns:16px 32px minmax(0,1fr) 52px;column-gap:8px;
  align-items:center;min-height:52px;padding:7px 10px;
  border-bottom:1px solid var(--line);border-left:3px solid transparent;
  position:relative;container-type:inline-size}
.chat-item:hover{background:var(--bg)}
.chat-item.ativa{background:var(--bg);border-left-color:var(--cyan)}
/* estrela do CRM (só existe em _lista_conversas.html) — coluna 1, sempre
   reservada mesmo quando o botão não está lá (SAC), pra manter os avatares
   das duas telas alinhados na mesma coluna. Opacidade só no hover/on: era
   assim antes (.conv-estrela já existia), a grade só lhe dá lugar fixo. */
.chat-item-star{grid-column:1;justify-self:center;align-self:center}
/* `.ci-star` do protótipo (styles.css:138-140): a estrela NASCE invisível e só
   aparece com o mouse na linha, ou quando está marcada. E não cresce: o
   `scale(1.25)` do `.conv-estrela` estourava a coluna de 16px da grade, que é
   a mesma casa do checkbox de ações múltiplas. Escopado em `.chat-item-star`
   porque `.conv-estrela` também é usada fora da lista de conversas. */
/* Cor `--muted`, não o `--line` do `.conv-estrela` genérico: `--line` é cor de
   borda — sumia no tema escuro e ficava apagada no claro. E o foco pelo
   teclado revela a estrela, que antes continuava invisível. */
.chat-item-star .conv-estrela{font-size:12px;opacity:0;transition:opacity .12s;color:var(--muted)}
.chat-item:hover .chat-item-star .conv-estrela,
.chat-item-star .conv-estrela:focus-visible,
.chat-item-star .conv-estrela.on{opacity:1}
.chat-item-star .conv-estrela:hover,.chat-item-star .conv-estrela.on{color:var(--orange)}
.chat-item-star .conv-estrela:hover{transform:none}
.chat-item-star .conv-estrela .ico{width:12px;height:12px}
/* Ações múltiplas do SAC (04/09/2026): a caixinha ocupa a MESMA coluna 1 que a
   estrela do CRM reserva vazia hoje — nasce escondida, `.chat-lista.
   selecionando` é quem revela. Fora dessa coluna eu teria que alargar a grade
   inteira só para um modo que passa a maior parte do tempo desligado. */
.chat-item-check{grid-column:1;justify-self:center;align-self:center;display:none;cursor:pointer}
.chat-item-check input{width:14px;height:14px;margin:0;cursor:pointer}
.chat-lista.selecionando .chat-item-check{display:flex}
/* estrela e checkbox dividem a coluna 1: com "Ações múltiplas" ligado, quem
   ocupa a casa é o checkbox — as duas juntas espremeriam os 16px */
.chat-lista.selecionando .chat-item-star{display:none}
.chat-tela.crm .chat-item{grid-template-columns:12px 32px minmax(0,1fr) 52px;padding-left:4px}
.chat-item-link{display:contents}
.chat-item{cursor:pointer}
.chat-item-txt::after{content:"";position:absolute;inset:0}
.chat-item-star,.chat-item-check{position:relative;z-index:1}
.chat-item-link .conv-av,.chat-item-link img.avatar{grid-column:2;width:32px;height:32px;font-size:11px}
.chat-item-txt{grid-column:3;min-width:0;display:flex;flex-direction:column;gap:2px;justify-content:center}
.chat-item-cab{display:flex;align-items:center;gap:5px;flex-wrap:nowrap;min-width:0;overflow:hidden}
/* `.ci-nome` do protótipo (styles.css:145): 13px/18px, e `flex:0 1 auto`, NÃO
   `flex:1`. Com `flex:1` o nome tomava toda a sobra e empurrava o ícone de
   alerta para a ponta direita da coluna, longe do nome que ele qualifica. */
.chat-item-cab b{font-size:13px;line-height:18px;font-weight:600;flex:0 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Regra dura da spec: no máximo 1 chip de texto + 1 ícone por linha — some
   quando o espaço aperta, e sobra o nome, que precisa de espaço primeiro.

   O limiar voltou aos 308px do protótipo em 05/09/2026, e junto veio a
   correção do que ele MEDE — que era o erro de fato.

   No protótipo o `container-type` está em `.lista`, a coluna inteira
   (styles.css:58): `@container (max-width:308px)` pergunta pela largura da
   COLUNA. Aqui havia `container-type` também no `.chat-item`, e como a
   consulta sem nome casa com o container mais PRÓXIMO, ela passou a medir a
   caixa de conteúdo da linha — 24px de padding a menos que a coluna. Medindo
   a coisa errada, nenhum número acerta: com 308 o chip sumia já aos 340px de
   coluna (medido em tela), e com 260, valor a que isso levou em 04/09, ele
   não sumia NUNCA, porque 260 fica abaixo dos 271px de conteúdo que a coluna
   dá no seu mínimo de 296. A regra existia e não valia em largura nenhuma.

   A consulta agora é NOMEADA (`@container onda1`), então mede a coluna, como
   no protótipo: o chip só some entre 296 e 308px, que é o "só some quase no
   mínimo" que a spec pede (styles.css:156). */
.chat-item-cab .lista-etapa,.chat-item-sub .lista-etapa,
.chat-item-cab .tag,.chat-item-sub .tag{font-size:10px;font-weight:600;line-height:15px;
  padding:0 5px;border-radius:3px;flex:0 1 auto;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;display:inline-flex;align-items:center}
/* levantamento de 04/09: o chip de status (etapa/"sem lead"/tipo/minuta) saiu
   de dentro de `.chat-item-cab` (que agora só tem nome + 1 ícone de alerta)
   pra uma linha própria, `.chat-item-sub` — mesma regra "≤1 chip + 1 ícone",
   e o container query precisa valer nas duas linhas, não só na de cima. */
.chat-item-sub{display:flex;align-items:center;gap:6px;min-width:0}
/* No Chats do CRM a linha do id. + etapa existe sempre, com altura própria:
   é o que deixa todo cartão com as mesmas três linhas. */
.chat-tela.crm .chat-item-sub{height:15px;overflow:hidden}
.chat-item-sub .chat-item-id{flex:0 0 auto;white-space:nowrap}
.chat-item-id{font-family:var(--fonte-mono);font-size:10px;color:var(--muted)}
@container onda1 (max-width:308px){
  .chat-item-cab .lista-etapa,.chat-item-cab .tag,
  .chat-item-sub .lista-etapa,.chat-item-sub .tag{display:none}
}
/* coluna 4: hora ancorada no topo, badge/pílula ancorada na base — mesma
   régua de `.ci-meta` da spec, sobre os nomes reais do sistema. */
.chat-item-meta{grid-column:4;align-self:stretch;display:flex;flex-direction:column;
  align-items:flex-end;justify-content:space-between;min-height:34px}
.chat-item-hora{font-size:10px;line-height:18px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
/* `.chat-badge` tinha `align-self:center` pensado pra um pai em linha
   (`.chat-item-link` flex-row antigo) — dentro de `.chat-item-meta`, que
   agora é uma coluna, `center` centralizaria o badge no eixo horizontal em
   vez de encostá-lo à direita, junto da hora. */
.chat-item-meta .chat-badge{align-self:flex-end}
/* `.ci-nao` do protótipo: 16px de lado, raio 8, peso 600, entrelinha 16.
   Escopado: `.badge-nao-lida`/`.chat-badge` (17px, raio 9, peso 800) é o badge
   da casa e vale nas outras telas. */
.chat-item-meta .chat-badge{min-width:16px;height:16px;line-height:16px;border-radius:8px;font-weight:600}
.chat-item-prev{font-size:12px;line-height:16px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-item-prev.entrada{color:var(--ink);font-weight:600}
.chat-item.esperando .chat-item-prev{color:var(--orange)}

/* Não lida como no WhatsApp: nome em negrito, hora destacada e contador verde.
   Ficava dentro de `_sac_lista.html`; subiu para cá quando a aba Chats do CRM
   passou a usar o mesmo padrão — um lugar só para os dois módulos. */
.chat-item.nao-lida .chat-item-cab b{font-weight:700;color:var(--navy)}
.chat-item.nao-lida .chat-item-prev{color:var(--ink);font-weight:600}
.dica.nao-lida-hora,.chat-item-hora.nao-lida-hora{color:var(--green);font-weight:700}
.chat-badge{background:var(--green);color:#fff;font-size:10px;font-weight:800;
  min-width:17px;height:17px;border-radius:9px;display:inline-flex;align-items:center;
  justify-content:center;padding:0 5px;flex:0 0 auto;align-self:center}

/* ações compactas no topo da lista (SAC: novo grupo, resumir, config, histórico) —
   mesma família visual dos .clt-* do CRM, só que como ícone em vez de pílula */

/* barra de ações múltiplas do SAC — some por `hidden`, aparece por baixo dos
   ícones quando `sacAlternarSelecao()` liga o modo de seleção */
.clt-lote{display:flex;align-items:center;gap:8px;padding:8px 14px;flex-wrap:wrap;
  border-top:1px solid var(--line)}
/* CRM: contagem e os dois botões numa linha só, em qualquer largura da lista.
   Quem cede é a contagem (fica só o número e, na coluna mais estreita, some);
   os botões nunca quebram nem descem de linha. */
.chat-tela.crm .clt-lote{flex-wrap:nowrap;gap:5px;padding:8px 10px}
.chat-tela.crm .clt-lote .dica{flex:1 1 auto;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.chat-tela.crm .clt-lote .btn{flex:0 0 auto;white-space:nowrap;padding:0 9px}
.chat-tela.crm .clt-lote .dica b{font-weight:600;color:var(--ink)}
/* abaixo de 320px de lista sobra só o número (a frase inteira fica no title) */
@container onda1 (max-width:320px){ .chat-tela.crm .clt-lote .dica .rot{display:none} }
@container onda1 (max-width:200px){ .chat-tela.crm .clt-lote .dica{display:none} }

/* Divisória arrastável da lista (SAC e Chats do CRM usam a mesma) */
.chat-tela[data-divisoria]{position:relative}
/* `.divisor` do protótipo (styles.css:36-39): faixa VISÍVEL de 5px na cor da
   borda, que troca de cor no hover — e uma zona de pega de mais 4px de cada
   lado por `::after`, para pegar a barra sem precisar de mira.
   O `opacity:.35` que havia aqui era um bug de verdade: `opacity` num elemento
   PAI limita o filho — o botão de recolher tem `opacity:1`, mas dentro de uma
   barra a 35% ele nunca passava de 35%. E o único momento em que ele aparece é
   justamente o hover da barra. Ou seja, o botão só existia desbotado. O
   protótipo não usa opacity em lugar nenhum aqui: troca a cor de fundo. */
.sac-divisoria{position:absolute;top:0;bottom:0;width:5px;margin-left:-2px;cursor:col-resize;
  z-index:5;background:var(--line)}
.sac-divisoria::after{content:"";position:absolute;inset:0 -4px}
.sac-divisoria:hover,.sac-divisoria.arrastando{background:var(--navy)}
/* Botão de recolher dentro da própria divisória — o `.recolher` que o
   protótipo põe em cada `.divisor` (layout_workspace_base.html). Escalonado no
   eixo Y: com as duas colunas recolhidas as barras ficam coladas e um botão
   cobriria o outro, travando a reabertura (armadilha #3 da SPEC_TECNICA).
   Fora do `:hover` da barra ele não pinta o fundo do próprio botão — a regra de
   hover acima usa `opacity:.35` na barra inteira, então o botão precisa do
   `opacity:1` explícito para não herdar o desbotado. */
.sac-divisoria .recolher{position:absolute;top:calc(50% - 24px);left:50%;
  transform:translate(-50%,-50%);width:16px;height:34px;border-radius:8px;
  border:1px solid var(--line);background:var(--card);color:var(--muted);cursor:pointer;
  padding:0;font-size:10px;line-height:1;display:grid;place-items:center;z-index:6;
  opacity:0;transition:opacity .12s}
.sac-divisoria.fim .recolher{top:calc(50% + 24px)}
.sac-divisoria:hover .recolher,.sac-divisoria .recolher:focus-visible,
.chat-tela.lista-recolhida .sac-divisoria:not(.fim) .recolher,
.chat-tela.painel-recolhida .sac-divisoria.fim .recolher{opacity:1}
.sac-divisoria .recolher:hover{color:var(--ink);border-color:var(--muted)}
/* coluna recolhida vai a ZERO, como no protótipo (`.painel.recolhido`): a
   largura já é 0 pela variável; aqui só somem borda e conteúdo transbordado */
.chat-tela.lista-recolhida .chat-lista{overflow:hidden;border-right:0}
.chat-tela.painel-recolhida .chat-painel{overflow:hidden;border-left:0;border-right:0}

/* barra de anexo, abaixo do campo de escrever */
.chat-anexo-form{display:flex;align-items:center;gap:9px;margin-top:8px}
.chat-anexo-form[hidden]{display:none}
.chat-anexo-form label.btn{cursor:pointer;margin:0;padding:9px 16px;font-size:12px}

/* divisor de dia dentro da conversa */
.chat-dia{align-self:center;background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:3px 12px;font-size:11.5px;font-weight:700;color:var(--muted);
  margin:6px 0}

/* anexo dentro da bolha (imagem, vídeo, áudio, documento) */
.chat-anexo{margin-top:6px}
.chat-anexo img{max-width:260px;max-height:260px;border-radius:9px;display:block;
  border:1px solid var(--line)}
.chat-anexo video{max-width:280px;border-radius:9px;display:block}
.anexo-visor{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.78);display:flex;flex-direction:column;
  gap:10px;padding:16px}
.anexo-visor-barra{display:flex;align-items:center;gap:8px;color:#fff;font-size:13px}
.anexo-visor-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anexo-visor .btn{color:#fff;border-color:rgba(255,255,255,.35)}
.anexo-visor-miolo{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.anexo-visor-miolo img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.anexo-visor-miolo iframe{width:min(1000px,100%);height:100%;border:0;border-radius:8px;background:#fff}
.chat-anexo audio{max-width:260px}
.chat-baixar{display:inline-flex;align-items:center;gap:4px;margin-top:4px;font-size:11.5px;color:var(--muted)}
.chat-anexo-pe{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.chat-baixar.como-link{background:transparent;border:0;padding:0;cursor:pointer;
  font-family:inherit;color:var(--cyan-600);font-weight:600}
.chat-baixar.como-link:hover{text-decoration:underline}

.chat-painel{border-left:1px solid var(--glass-border);border-right:1px solid var(--line);display:flex;flex-direction:column;
  overflow-y:auto;min-width:0;min-height:0;order:2;background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(var(--glass-blur-menu)) saturate(var(--glass-saturate-menu));
  backdrop-filter:blur(var(--glass-blur-menu)) saturate(var(--glass-saturate-menu))}
html.escuro .chat-painel{background:rgba(27,33,30,.55)}
.chat-painel-topo{display:flex;align-items:center;gap:8px;padding:11px 14px;
  border-bottom:1px solid var(--line)}
.chat-painel-topo b{flex:1;min-width:0;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-painel-corpo{padding:12px 14px}
/* O painel do Chats NÃO tem mais medida própria de rótulo. Tinha: 88px, largura
   escolhida quando ali cabia um resumo de cinco linhas curtas ("Etapa",
   "Telefone", "E-mail"). Hoje o painel é o card inteiro do lead, com
   "Plataforma de origem" e "Data chegada lead" — e em 88px todo rótulo
   quebrava em duas linhas. Vale a única medida do .lp-linha, a mesma da ficha:
   card igual quer dizer igual também na régua. */
.chat-painel-corpo .lp-linha{padding:4px 0}
/* ---------------------------------------------------------------------------
   2ª onda do SAC — componentes do protótipo (group_panel_sac.html)

   `.texto-longo` é a exceção deliberada da spec 2.3: histórico, objetivo e
   descrição do grupo NÃO truncam em uma linha — 3 linhas com "ver mais", e o
   botão só aparece quando o texto realmente excede (o JS o esconde quando
   `scrollHeight <= clientHeight`). Uma linha viraria "Cliente admitido em
   03/2020 como auxiliar…", que não informa nada.
   --------------------------------------------------------------------------- */
.texto-longo{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  font-size:12px;line-height:16px;color:var(--ink);white-space:pre-wrap;margin:0;padding:4px 0}
.texto-longo.aberto{-webkit-line-clamp:unset}
.ver-mais{border:0;background:none;color:var(--green);cursor:pointer;font-family:inherit;
  font-size:11px;padding:0;margin-top:2px}
.ver-mais:hover{text-decoration:underline}
.sac-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:2px 0}
.sac-tags .tag-add{background:transparent;border:1px dashed var(--line);color:var(--muted);
  cursor:pointer;font-family:inherit;font-size:10px;line-height:16px;padding:0 7px;border-radius:9px}
.sac-tags .tag-add:hover{border-color:var(--navy);color:var(--ink)}
.participante{display:flex;align-items:center;gap:8px;min-height:30px;padding:3px 0}
.participante .av{width:22px;height:22px;border-radius:50%;background:var(--acao);color:var(--acao-texto);
  font-size:9px;font-weight:600;display:grid;place-items:center;flex:0 0 auto}
.participante .n{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.participante .papel{margin-left:auto;font-size:10px;color:var(--muted);flex:0 0 auto}
.linha-incluir{display:flex;align-items:center;gap:8px;padding-top:8px}
.linha-incluir input{flex:1;min-width:0}

/* ---------------------------------------------------------------------------
   2ª onda do SAC — medidas do painel do grupo (`group_panel_sac.html` +
   styles.css §"2ª ONDA"). Escopado em `.chat-tela.sac .chat-painel`, e o
   `.sac` NÃO é decoração: `.chat-painel` é a mesma casca do painel do LEAD,
   que aparece no Chats do CRM e no Card do lead — e a 2ª onda do CRM está
   declarada como NÃO portada (o escritório mandou deixar a ficha do lead como
   está). Sem o `.sac`, estas medidas caíam sobre as 15 linhas de
   `_ficha_lead.html`, que é incluído dentro de `.chat-painel` nas duas telas.
   Tudo aqui vale para `.card`, `.hd`,
   `.bd`, `.lp-linha` e `.btn` são componentes da casa inteira, e o desenho de
   card do sistema (h3 de 14px em negrito com linha divisória) continua certo
   em todas as outras telas. Aqui o protótipo pede outra coisa.
   --------------------------------------------------------------------------- */
/* `.card` do protótipo: raio 8px (o da casa é 14px). */
.chat-tela.sac .chat-painel .card{border-radius:8px}
/* `.card-tit`: etiqueta pequena em versalete cinza, SEM linha divisória — não
   um cabeçalho de card. Era isso que fazia os seis cards do painel parecerem
   seis telas empilhadas em vez de seis blocos de um painel. */
.chat-tela.sac .chat-painel .card .hd{padding:8px 12px 4px;border-bottom:0;display:block}
.chat-tela.sac .chat-painel .card .hd h3{font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:600;line-height:1.4}
.chat-tela.sac .chat-painel .card .bd{padding:0 12px 8px}
/* `.card-pe`: rodapé do card, à direita e com borda em cima — é onde o
   protótipo põe o "Salvar" do Controle da IA. */
.chat-tela.sac .chat-painel .card .pe{display:flex;justify-content:flex-end;gap:8px;
  padding:8px 12px;border-top:1px solid var(--line)}
.chat-tela.sac .chat-painel .card .pe.pe-espalhado{justify-content:space-between;
  align-items:center}
/* `.campo` do protótipo: o rótulo cede primeiro (teto de 160px, não 135px
   fixos) e o valor nunca desce de 150px — que é o que impede rótulo e valor de
   truncarem juntos quando a coluna encolhe até os 380px da trava. */
.chat-tela.sac .chat-painel .lp-linha,.chat-tela.sac .chat-painel .aba-contrato .ac-honorarios .fld{grid-template-columns:minmax(0,160px) minmax(150px,1fr);
  gap:12px;min-height:26px;padding:4px 0}
/* Ficha do lead no Chats do CRM (29/09/2026): o valor, onde se escreve, tem
   largura fixa; quem encolhe com a ficha é o rótulo, cortado em "…" como no Kommo. */
.chat-tela.crm .chat-painel .lp-linha,.chat-tela.crm .chat-painel .aba-contrato .ac-honorarios .fld{grid-template-columns:minmax(0,1fr) 160px}
.chat-tela.crm .chat-painel .lp-linha>label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* O "ⓘ" (DICA-01) no rótulo: o balão sai do rótulo, então esse não corta. */
.chat-tela.crm .chat-painel .lp-linha>label.lp-com-info{overflow:visible;display:flex;align-items:center;gap:2px;min-width:0}
.chat-tela.crm .chat-painel .lp-rotulo{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-tela.crm .chat-painel .lp-com-info .lp-info{flex:0 0 auto}
.lp-info{color:var(--muted);cursor:help;margin-left:2px}
/* `.bt` do protótipo: 24px de altura e raio de 5px. O `.btn` da casa é 27,8px
   (ou 35,8px sem `.sm`), raio 9px e sempre negrito. */
.chat-tela.sac .chat-painel .btn{height:24px;line-height:22px;padding:0 10px;border-radius:5px;font-size:12px}
.chat-tela.sac .chat-painel .btn.ghost{font-weight:400}
/* `.p2-nome`: h3 de 15px/20px. */
.chat-tela.sac .chat-painel-topo b{font-size:15px;line-height:20px;font-weight:600}
/* `.p2-sub` do protótipo: a linha de subtítulo do cabeçalho, com o ponto médio
   esmaecido separando os pedaços. Era uma `.dica` genérica com `·` solto. */
.chat-tela.sac .chat-painel .p2-sub{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);
  margin:2px 0 0;padding:0 14px 10px;border-bottom:1px solid var(--line);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-tela.sac .chat-painel .p2-sub .ponto{opacity:.6}


.chat-tela.sac .chat-painel .p2-cab{position:sticky;top:0;z-index:10;background:var(--card)}
html.escuro .chat-tela.sac .chat-painel .p2-cab{background:var(--card)}
.chat-tela.sac .chat-painel .p2-cab .p2-sub{border-bottom:0}
.chat-tela.sac .chat-painel .p2-cab{border-bottom:1px solid var(--line)}
.chat-tela.sac .chat-painel .p2-cab .chat-painel-topo{border-bottom:0}

.chat-tela.sac .chat-painel .sac-chave-linha{display:flex;align-items:center;gap:8px}
.chat-tela.sac .chat-painel .sac-chave{flex:0 0 auto;position:relative;width:34px;height:19px;
  padding:0;border:0;border-radius:19px;background:var(--line);cursor:pointer;
  transition:background .15s}
.chat-tela.sac .chat-painel .sac-chave span{position:absolute;top:3px;left:3px;width:13px;height:13px;
  border-radius:50%;background:#fff;transition:left .15s;
  box-shadow:0 1px 2px rgba(0,0,0,.25)}
.chat-tela.sac .chat-painel .sac-chave.on{background:var(--green)}
.chat-tela.sac .chat-painel .sac-chave.on span{left:18px}
.chat-tela.sac .chat-painel .sac-chave:disabled{cursor:default;opacity:.55}
.chat-tela.sac .chat-painel .sac-chave-rot{flex:1;min-width:0;font-size:12px;color:var(--ink)}

.chat-tela.sac .chat-painel .campo-texto{display:block;width:100%;box-sizing:border-box;
  min-height:80px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;
  background:var(--card);color:var(--ink);font:inherit;font-size:12px;line-height:1.55;
  resize:vertical;outline:0;box-shadow:none}
.chat-tela.sac .chat-painel .campo-texto::placeholder{color:var(--muted)}
.chat-tela.sac .chat-painel .campo-texto:focus,
.chat-tela.sac .chat-painel .campo-texto:focus-visible{border-color:var(--muted);
  outline:none;box-shadow:none}
.chat-tela.sac .chat-painel .campo-texto.erro{border-color:var(--red)}

.chat-tela.sac .chat-painel .linha-incluir{display:block;padding-top:8px}
.chat-tela.sac .chat-painel .linha-incluir .inp{display:block;width:100%;box-sizing:border-box;
  height:32px;padding:0 10px;border:1px solid var(--line);border-radius:6px;
  background:var(--card);color:var(--ink);font:inherit;font-size:12px;outline:0;box-shadow:none}
.chat-tela.sac .chat-painel .linha-incluir .inp::placeholder{color:var(--muted)}
.chat-tela.sac .chat-painel .linha-incluir .inp:focus,
.chat-tela.sac .chat-painel .linha-incluir .inp:focus-visible{border-color:var(--muted);
  outline:none;box-shadow:none}
.chat-tela.sac .chat-painel .linha-incluir .inp.erro{border-color:var(--red)}
.chat-tela.sac .chat-painel .linha-incluir .inp:disabled{opacity:.6}

/* As tags do painel valem para as DUAS telas (07/09/2026, ordem do escritorio:
   "tags eu quero que possua o mesmo desenho do print"). Este bloco era so do
   SAC; ganhou o `.crm` ao lado em vez de uma copia com outros numeros, que e
   como duas telas iguais viram duas telas parecidas. */
.chat-tela.sac .chat-painel .sac-tags,
.chat-tela.crm .chat-painel .sac-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.chat-tela.sac .chat-painel .tag-add,
.chat-tela.crm .chat-painel .tag-add{height:22px;padding:0 9px;border:1px dashed var(--line);
  border-radius:20px;background:transparent;color:var(--muted);font:inherit;font-size:10px;
  font-weight:700;cursor:pointer;line-height:1}
.chat-tela.sac .chat-painel .tag-add:hover,
.chat-tela.crm .chat-painel .tag-add:hover{border-color:var(--muted);color:var(--ink)}
.chat-tela.sac .chat-painel .tag-nova,
.chat-tela.crm .chat-painel .tag-nova{width:132px;height:22px;padding:0 9px;
  border:1px solid var(--line);border-radius:20px;background:var(--card);color:var(--ink);
  font:inherit;font-size:11px;outline:0;box-shadow:none}
.chat-tela.sac .chat-painel .tag-nova:focus,
.chat-tela.sac .chat-painel .tag-nova:focus-visible,
.chat-tela.crm .chat-painel .tag-nova:focus,
.chat-tela.crm .chat-painel .tag-nova:focus-visible{border-color:var(--muted);outline:none;
  box-shadow:none}
.chat-tela.sac .chat-painel .tag-nova.erro,
.chat-tela.crm .chat-painel .tag-nova.erro{border-color:var(--red)}
/* O "x" da pilula. No SAC ele e um <button class="link"> com estilo escrito no
   proprio HTML, porque la mora dentro de um <form> proprio; aqui e um botao
   comum (form dentro de form o HTML nao permite), e o estilo veio para ca --
   mesmos valores, para as duas pilulas serem a mesma pilula. */
.chat-tela .chat-painel .lp-tag-x{border:0;background:0;padding:0 0 0 4px;margin:0;
  font:inherit;line-height:1;color:inherit;opacity:.6;cursor:pointer}
.chat-tela .chat-painel .lp-tag-x:hover{opacity:1}
.chat-tela .chat-painel .lp-tag-x:focus-visible{outline:0;border-radius:var(--r-sm);
  box-shadow:0 0 0 3px var(--anel-foco)}

.chat-conversa{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg);order:3}
.chat-conversa-topo{display:flex;align-items:center;gap:10px;padding:11px 18px;
  border-bottom:1px solid var(--line);background:var(--card)}
.chat-conversa-topo b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Lápis de "editar sob demanda" — porte de 04/09/2026, mesma régua de "rótulo
   por padrão, lápis no hover" nos dois lugares que usam: nome do grupo (SAC)
   e vínculo cliente/processo/responsável (achado da revisão de 04/09: tirar
   o `<select>` sem repor uma forma de editar depois deixava o vínculo travado
   pra sempre). Base genérica + hover escopado por contexto — sem isso o lápis
   ficaria sempre visível, ou nunca. */
.editar{flex:0 0 auto;border:0;background:none;color:var(--muted);
  cursor:pointer;padding:2px 3px;border-radius:5px;opacity:0;transition:opacity .12s}
.editar:hover{opacity:1;color:var(--ink)}
.chat-conversa-nome-txt{display:flex;align-items:center;gap:6px;min-width:0}
.chat-conversa-nome-txt b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-conversa-nome-txt:hover .editar,.chat-conversa-nome-txt .editar:focus-visible{opacity:1}
/* `#sacTopo:hover .editar` do protótipo: quem revela o lápis é o hover do
   cabeçalho INTEIRO, não o do texto do nome. Com o alvo no texto era preciso
   acertar o nome para o lápis aparecer. */
.chat-tela.sac .chat-painel-topo:hover .editar{opacity:.7}
.chat-tela.sac .chat-painel-topo .editar:hover{opacity:1}
/* `.lp-linha` é grid de 2 colunas (135px 1fr) — o lápis não pode ser um 3º
   filho direto (viraria linha nova, sem coluna que caiba). `.lp-linha-editavel`
   é o 2º filho, um flex que segura valor+lápis juntos na mesma coluna. */
.lp-linha-editavel{display:flex;align-items:center;gap:4px;min-width:0}
.lp-linha-editavel:hover .editar,.lp-linha-editavel .editar:focus-visible{opacity:1}
.chat-conversa-nome-edit{display:flex;align-items:center;gap:6px}
.chat-conversa-nome-edit .inp{flex:1;min-width:0;height:30px;border:1px solid var(--line);
  border-radius:8px;padding:0 9px;font-family:inherit;font-size:13.5px;color:var(--ink);
  background:var(--card);outline:0}
.chat-conversa-nome-edit .inp:focus{border-color:var(--cyan)}
/* Editando o nome: o cabeçalho do SAC é estreito, e com os botões de ação ao
   lado (não lida, Compromisso, sino) o campo de nome sobra com ~90px — não dá
   para digitar nada. Some com os botões enquanto edita; o campo toma o resto
   do cabeçalho. */
.chat-conversa-topo.renomeando > form.inline,
.chat-conversa-topo.renomeando > a.btn{display:none}
.chat-vazio-tela{margin:auto;text-align:center;color:var(--muted);font-size:13.5px;padding:40px}
@media (max-width:1200px){
  .chat-tela.com-aberta{grid-template-columns:var(--largura-lista,280px) 1fr}
  .chat-painel{display:none}
  /* ...MENOS no CRM: ali o painel é a ficha do lead, e desde 05/09/2026 não
     existe outra tela onde editá-la. Escondê-lo deixaria o lead sem nada pra
     editar num notebook de ~1100px. */
  .chat-tela.crm .chat-painel{display:flex}
  /* ...e MENOS no SAC: ali o painel é o ÚNICO lugar onde se vincula
     cliente/processo/responsável, se mexe nos participantes e se renomeia o
     grupo — o botão "Detalhes" que dava um caminho alternativo não existe
     mais. Escondê-lo abaixo de 1200px deixaria o SAC sem como editar o caso.
     Como o painel volta, a tela precisa das TRÊS colunas de novo: com duas,
     o terceiro filho cairia numa segunda linha da grade e o `overflow:hidden`
     da tela engoliria a conversa. Colunas menores que no desktop porque aqui
     sobra menos largura.
     A regra das três colunas abaixo virou rede de segurança: de 901 a 1200px
     quem manda é o bloco seguinte (duas colunas, sem a lista) — ela só volta
     a valer em navegador sem `:has`. Leia o comentário de lá antes de mexer
     nos números daqui. */
  .chat-tela.sac .chat-painel{display:flex}
  .chat-tela.com-aberta.sac,.chat-tela.com-aberta.crm{grid-template-columns:minmax(0,var(--largura-lista,300px))
    minmax(0,var(--largura-painel,280px)) minmax(var(--onda3-min,420px),1fr)}
}
/* Chats do CRM e SAC, 29/09/2026: as três ondas ficam em toda largura acima de
   900px, como no Kommo, sem mínimo para a conversa. Quando falta largura as três
   encolhem juntas, na mesma proporção (`data-cede="todas"`, divisoria.js); a
   lista e o painel recolhem e voltam pelo botão da barra, que segue ajustável. */
.chat-tela.crm,.chat-tela.sac{--onda3-min:0px;--onda2-min:280px;--onda3-ref:600px}
.chat-tela.crm{--onda2-min:300px}
/* No empilhamento abaixo cada variante precisa aparecer pelo NOME: `.so-lista`
   é 0,2,0 e venceria o `.chat-tela` sozinho (0,1,0) por especificidade,
   independentemente da ordem. `.com-aberta.sac` e `.com-aberta.crm` (0,3,0)
   entram pelo mesmo motivo: as três colunas que eles recuperam acima, no bloco
   de 1200px, também valeriam aqui embaixo. O `.crm` entrou em 07/09/2026 JUNTO
   com a regra de lá — esquecê-lo aqui deixaria o celular com as três ondas
   espremidas, e o empilhamento não teria como ganhar: 0,3,0 lá contra 0,2,0
   aqui, e ordem no arquivo não desempata especificidade.
   Este comentário fica FORA do bloco de propósito: tests/test_rolagem_telas.py
   lê o arquivo com regex e engoliria um comentário interno junto da lista de
   seletores, deixando de conferir a regra. */
@media (max-width:900px){
  .chat-tela,.chat-tela.com-aberta,.chat-tela.com-aberta.sac,
  .chat-tela.com-aberta.crm,.chat-tela.so-lista{grid-template-columns:1fr;grid-template-rows:auto;height:auto}
  .chat-lista{border-right:0;border-bottom:1px solid var(--line)}
  /* Os 300px existem para a lista dividir a tela com a conversa aberta abaixo
     dela. Sem nada aberto — que é como /crm/conversas e /grupos abrem — a
     lista É a tela, e o teto a espremia num terço da janela com o aviso de
     "selecione uma conversa" ocupando o resto. Medido em 690x900: lista de
     300px numa janela de 900. */
  .chat-tela.com-aberta .chat-lista{max-height:300px}
  /* Altura da janela, não do conteúdo: com 450 conversas a lista solta crescia
     para 3568px e a página inteira virava uma rolagem só, em vez de rolar
     dentro da própria lista como no computador. */
  .chat-tela:not(.com-aberta) .chat-lista{height:calc(100vh - 120px);min-height:320px}
  /* O `!important` é por causa de um `style="display:flex"` no próprio HTML de
     `crm_leads.html` e `grupos.html` — sem ele a regra perde para o atributo
     inline. */
  .chat-tela:not(.com-aberta) .chat-vazio-tela{display:none!important}
  .chat-tela.lead .chat-painel{border-right:0;border-bottom:1px solid var(--line)}
  /* Empilhado, o painel do SAC vai DEPOIS da conversa (.chat-conversa é
     order:3): quem abre um grupo quer ler as mensagens primeiro, não o
     formulário de vínculo. A regra mora aqui, e não no celular.css, porque o
     empilhamento do SAC começa exatamente aqui, em 900px — lá ela só valia a
     partir de 600px e deixava a faixa de 601 a 900px empilhada com o
     formulário na frente das mensagens. */
  .chat-tela.com-aberta.sac .chat-painel{order:4}
  /* Empilhado, a divisória não separa mais nada: ela é `position:absolute` com
     `top:0;bottom:0` num `left` que o divisoria.js grava pensando em colunas.
     Sem esta regra ela vira um risco vertical atravessando a lista, a conversa
     e a ficha de cima a baixo — foi o que apareceu na tela do escritório ao
     estreitar a janela. Some junto o arrastar, que também não faz sentido em
     coluna única. */
  .chat-tela .sac-divisoria{display:none}
  /* A altura de 300px acima só corta se alguém segurar o conteúdo: sem isto o
     rolador interno da lista se dimensiona pelo conteúdo (200 conversas) e
     vaza por cima da conversa que vem logo abaixo. */
  .chat-lista{overflow:hidden}
}

/* ===== agentes de IA ===== */
.ag-th,.ag-tr{display:grid;grid-template-columns:1.3fr 1.6fr 1fr 130px 70px 120px;
  gap:10px;align-items:center;padding:11px 16px}
.ag-th{background:var(--bg);font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted);border-bottom:1px solid var(--line)}
.ag-tr{border-bottom:1px solid var(--line)}
.ag-tr:last-child{border-bottom:0}
.ag-tr.off{opacity:.55}
.ag-nome{font-size:14px;font-weight:600;color:var(--cyan-600);text-decoration:none}
.ag-nome:hover{text-decoration:underline}
.ag-onde{display:flex;gap:4px;flex-wrap:wrap}
.ag-toggle{width:36px;height:20px;border-radius:20px;border:0;background:var(--line);
  cursor:pointer;padding:0;position:relative;transition:background .15s}
.ag-toggle span{position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;
  background:#fff;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.ag-toggle.on{background:var(--cyan)}
.ag-toggle.on span{left:19px}
.modelo-card{border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;
  flex-direction:column;gap:7px;align-items:flex-start}
.modelo-card b{font-size:14px}
.modelo-card .dica{flex:1}

.ag-editor{display:grid;grid-template-columns:1fr 370px;gap:20px;align-items:start}
.diretrizes-lista{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.diretriz{background:var(--bg);border:1px solid var(--line);border-radius:9px;
  padding:8px 12px;font-size:12px;color:var(--ink)}
.etapa-check{display:flex;align-items:center;gap:9px;padding:8px 0;font-size:12px;
  cursor:pointer;border-bottom:1px solid var(--line)}
.etapa-check:last-child{border-bottom:0}
.etapa-cor{width:10px;height:10px;border-radius:50%;flex:0 0 auto}

/* `top` era 76px = os 60px da barra de cima + 16 de respiro. A barra de cima
   foi extinta em 02/09/2026 e sobrou só o respiro. */
.ag-preview{background:var(--card);border:1px solid var(--line);border-radius:14px;
  display:flex;flex-direction:column;position:sticky;top:16px;max-height:calc(100vh - 100px)}
.ag-preview .hd{border-bottom:1px solid var(--line);padding:13px 16px;display:flex;
  align-items:center;justify-content:space-between}
.ag-chat{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:9px;
  min-height:260px}
.ag-vazio{margin:auto;text-align:center;color:var(--muted);font-size:12px;padding:20px}
.ag-vazio p{margin:8px 0 0}
.ag-bolha{max-width:88%;padding:9px 12px;border-radius:11px;font-size:12px;line-height:1.5;
  white-space:pre-wrap;word-break:break-word}
.ag-bolha.eu{align-self:flex-end;background:#e8f4fd;border:1px solid #c9e3f7}
.ag-bolha.ia{align-self:flex-start;background:var(--bg);border:1px solid var(--line)}
.ag-form{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line);align-items:flex-end}
.ag-form textarea{flex:1;border:1px solid var(--line);border-radius:10px;padding:8px 11px;
  font-size:12px;font-family:inherit;outline:0;resize:none;background:var(--card);color:var(--ink)}
html.escuro .ag-bolha.eu{background:#16324a;border-color:#1f4a6b}
@media (max-width:1100px){.ag-editor{grid-template-columns:1fr}
  .ag-preview{position:static;max-height:none}}

/* caixa de entrada unificada */
/* O submenu que empilhava por baixo do módulo (`.subnav`, `.subitem`,
   `button.seta`) e a faixa `.topbar-abas` morreram em 02/09/2026: o 2º nível
   virou o painel suspenso (`.flyout-panel`, lá em cima), que abre por cima do
   conteúdo em vez de empurrar a lista para baixo — e funciona igual com a
   barra expandida ou recolhida, o que o `.subnav` nunca conseguiu. */

.visao{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.visao a{padding:5px 11px;font-size:14px;color:var(--muted);text-decoration:none;line-height:1.2;display:inline-flex;align-items:center}
.visao a.on{background:var(--cyan);color:#fff}
.visao a:not(.on):hover{background:var(--bg)}

/* barra única do Funil: seletor de funil + visão + busca + ações, tudo numa
   linha compacta em vez do card de busca full-width separado que tinha antes */
.funil-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.funil-busca{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);
  border-radius:9px;padding:6px 10px;flex:1;min-width:200px}
.funil-busca input[name="q"]{border:0;background:transparent;outline:0;flex:1;font-size:12px;color:var(--ink);min-width:0}
.funil-busca select{border:0;background:transparent;outline:0;font-size:12px;color:var(--muted);cursor:pointer;flex:0 0 auto}
.lista-ponto{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;
  background:var(--cyan);vertical-align:middle}
.lista-ponto.ganho{background:var(--green)}
.lista-ponto.perdido{background:var(--muted)}
.lista-titulo{font-size:12px;font-weight:600;color:var(--cyan-600);text-decoration:none}
.lista-titulo:hover{text-decoration:underline}
.lista-etapa{font-size:10px;font-weight:600;border-radius:5px;padding:3px 9px;display:inline-block}

.conv-av{width:34px;height:34px;border-radius:50%;background:var(--acao);color:var(--acao-texto);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.conv-estrela{background:0;border:0;font-size:16px;color:var(--line);cursor:pointer;padding:0;line-height:1;
  transition:transform .15s, color .15s}
.conv-estrela:hover{transform:scale(1.25);color:var(--orange)}
.conv-estrela.on{color:var(--orange)}

/* conexão de números de WhatsApp */

/* Números de WhatsApp: uma linha por número; o resto mora no painel dele. */
.num-tela .hd h3{display:flex;align-items:center;gap:4px}
.num-filtros{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.num-chips{display:flex;gap:6px}
.num-lista{display:flex;flex-direction:column}
.num-linha,.num-cab{display:grid;grid-template-columns:30px minmax(140px,1.4fr) minmax(120px,1fr) 210px;
  gap:12px;align-items:center;padding:10px 16px;border:0;border-bottom:1px solid var(--line);
  background:transparent;color:var(--ink);font:inherit;font-size:12.5px;text-align:left;cursor:pointer;width:100%}
.num-linha:hover{background:var(--bg)}
.num-cab{gap:12px;padding:8px 16px;border-bottom:1px solid var(--line);font-size:10px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.num-linha[hidden]{display:none}
.num-linha.off{opacity:.55}
.num-foto{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  border:1px solid var(--line);color:var(--muted)}
.num-foto img{width:100%;height:100%;object-fit:cover}
.num-quem{display:flex;flex-direction:column;min-width:0}
.num-quem b,.num-quem .dica{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.num-tela .num-grupo-padrao{padding:10px 16px;border-bottom:1px solid var(--line)}
.num-cab span:last-child{text-align:right}
.num-funil{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.num-selos{display:flex;align-items:center;gap:5px;justify-content:flex-end}
.num-nada{padding:14px 16px}
.num-linha[aria-expanded=true]{background:var(--bg)}
.num-detalhe{padding:4px 16px 8px 58px;border-bottom:1px solid var(--line);background:var(--bg)}
.num-detalhe[hidden]{display:none}
.wa-c{text-align:center}
.wa-acoes{display:flex;align-items:center;gap:3px}
.wa-acoes .btn.sm{padding:4px 7px;font-size:10px}
.wa-erro{font-size:12px;color:#8a2333;background:#fde8eb;padding:8px 14px;border-top:1px solid #f3b0bb}
.flash.erro{background:#fde8eb;border-color:#f3b0bb;color:#8a2333}
html.escuro .wa-logo{background:#14301c;border-color:#1f5130;color:#5fd68c}
/* d2, 2a rodada: saiu -- mesmo motivo do `.ph h1` acima: base já var(--navy). */
@media (max-width:1100px){
  .wa-th{display:none}
  .wa-tr{grid-template-columns:1fr 1fr;row-gap:8px}
}

/* menu lateral de funis (estilo Kommo) */
.funis-overlay{position:fixed;inset:0;background:rgba(15,23,42,.35);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;
  transition:opacity .18s;z-index:60}
.funis-overlay.aberto{opacity:1;pointer-events:auto}
/* fundo fixo (não var(--navy)): no escuro --navy vira cor de TEXTO quase-branca
   (ver tema.css), então herdar a variável deixaria este painel claro por engano */
.funis-menu{position:fixed;top:0;left:0;bottom:0;width:270px;background:rgba(22,48,42,.82);
  -webkit-backdrop-filter:blur(var(--glass-blur-menu)) saturate(var(--glass-saturate-menu));
  backdrop-filter:blur(var(--glass-blur-menu)) saturate(var(--glass-saturate-menu));
  border:1px solid rgba(255,255,255,.12);border-radius:0 16px 16px 0;
  transform:translateX(-100%);transition:transform .2s ease;z-index:61;
  display:flex;flex-direction:column;box-shadow:2px 0 32px rgba(15,23,42,.25)}
.funis-menu.aberto{transform:none}
.fm-topo{font-size:12px;font-weight:700;letter-spacing:.12em;color:rgba(255,255,255,.45);
  padding:22px 24px 14px}
.fm-lista{flex:1;overflow-y:auto;padding-bottom:8px}
.fm-lista a{display:flex;align-items:center;gap:8px;padding:13px 24px;font-size:14px;
  color:rgba(255,255,255,.72);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.06)}
.fm-lista a:hover{background:rgba(255,255,255,.06);color:#fff}
.fm-lista a.on{color:var(--cyan);font-weight:600}
.fm-estrela{font-size:10px;color:var(--orange)}
.fm-add{display:flex;align-items:center;justify-content:space-between;padding:15px 24px;
  font-size:12px;color:rgba(255,255,255,.5);text-decoration:none;border-top:1px solid rgba(255,255,255,.1)}
.fm-add:hover{background:rgba(255,255,255,.06);color:#fff}
.fm-add span{font-size:16px}
/* A gaveta virou o dono do funil em 07/09/2026 (PLANO-CRM §1e): o "⋯" de cada
   linha abre renomear, principal, ordem, arquivar e excluir. Ele é posicionado
   por cima da ponta direita da linha em vez de entrar no fluxo — assim o <a>
   guarda o padding e a borda que ele já tinha, e a gaveta de quem não configura
   fica idêntica à de antes. */
.fm-linha{position:relative}
.fm-linha:has(.fm-cfg) > a{padding-right:46px}
.fm-cfg{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border:0;background:0;padding:0;border-radius:var(--r-sm);cursor:pointer;
  color:rgba(255,255,255,.45)}
.fm-cfg:hover{background:rgba(255,255,255,.12);color:#fff}
.fm-add{width:100%;border:0;background:0;font:inherit;text-align:left;cursor:pointer}
.fm-conta{font-size:11px;color:rgba(255,255,255,.5)}
/* dentro do modal, não da gaveta: aqui o fundo é claro */
.fm-acoes{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px}
.fm-perigo{border-top:1px solid var(--line);padding-top:10px}
.lc-tag.mais{background:var(--cyan);color:#fff;border-color:var(--cyan)}

/* configuração do CRM (funis, campos, listas) */
.sub-abas{display:flex;gap:6px;margin:0 0 16px;flex-wrap:wrap}
.sub-abas a{font-size:12px;font-weight:600;color:var(--muted);text-decoration:none;
  padding:6px 13px;border-radius:20px;border:1px solid var(--line);background:var(--card)}
.sub-abas a.on{color:#fff;background:var(--cyan);border-color:var(--cyan)}
/* A linha de ajuda tinha TRÊS classes e dois tamanhos: `.dica` a 12,5px,
   `.fld-dica` e `.hint` a 11,5px. É a mesma peça — o texto pequeno que explica
   o campo ou o bloco — e `m.campo` emite a `.fld-dica`. Vão as três para 12px,
   o `h4` da régua, senão a mesma frase sai de dois tamanhos conforme a macro
   que a escreveu. */
.dica{font-size:12px;color:var(--muted);margin:0 0 12px;line-height:1.5}
.cfg-titulo{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.funil-nome{border:0;border-bottom:1px dashed transparent;background:transparent;font-size:14px;
  font-weight:700;color:var(--navy);outline:0;padding:2px 0;width:100%}
.funil-nome:hover{border-bottom-color:var(--line)}
.funil-nome:focus{border-bottom-color:var(--cyan)}
.campo-cfg{display:flex;align-items:center;gap:6px;padding:9px 0;border-bottom:1px solid var(--line)}
.campo-cfg:last-of-type{border-bottom:0}
.campo-cfg.off{opacity:.5}
.campo-obg{position:relative}
.campo-obg-bt{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:transparent;color:var(--ink);font:500 12px var(--fonte-ui);cursor:pointer;white-space:nowrap}
.campo-obg-bt b{color:var(--acao)}
.campo-obg-pop{position:absolute;right:0;top:34px;z-index:50;width:340px;max-height:420px;overflow:auto;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--glass-shadow);padding:6px 0}
.campo-obg-dica{font-size:12px;color:var(--muted);padding:6px 12px 8px;line-height:1.4}
.campo-obg-funil{display:flex;align-items:center;gap:8px;padding:8px 12px;font:600 12px var(--fonte-ui);
  text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-top:1px solid var(--line)}
.campo-obg-funil .campo-obg-abre{margin-left:auto;border:0;background:none;color:var(--muted);cursor:pointer}
.campo-obg-etapa{display:flex;align-items:center;gap:10px;padding:7px 12px 7px 16px;font-size:13px;color:var(--ink);cursor:pointer}
.campo-obg-cor{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.campo-obg-etapa input,.campo-obg-funil input{width:auto;margin:0}
.campo-cfg form.campo-form{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.campo-form .etapa-nome{flex:0 1 200px;font-weight:600}
.campo-form .tag{flex:0 0 auto}
.campo-op{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;flex:1;min-width:0}
.mini-check{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);
  cursor:pointer;white-space:nowrap;flex:0 0 auto}
.mini-check input{margin:0;cursor:pointer}
.lista-txt{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 11px;
  font-size:12px;font-family:inherit;line-height:1.6;outline:0;resize:vertical;
  background:var(--card);color:var(--ink)}
.lista-txt:focus{border-color:var(--cyan)}
/* d2, 2a rodada: saiu -- mesmo motivo do `.ph h1` acima: base já var(--navy). */

/* configuração das etapas do funil */
.etapa-cfg{display:flex;align-items:center;gap:6px;padding:5px 0;border-bottom:1px solid var(--line)}
.etapa-cfg:last-of-type{border-bottom:0}
.etapa-cfg form.etapa-form{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.etapa-form input[type=color]{width:22px;height:22px;padding:0;border:1px solid var(--line);
  border-radius:6px;background:transparent;cursor:pointer;flex:0 0 auto}
.etapa-form input[type=color]::-webkit-color-swatch-wrapper{padding:2px}
.etapa-form input[type=color]::-webkit-color-swatch{border:0;border-radius:4px}
.etapa-estagio{border:1px solid var(--line);border-radius:7px;padding:3px 6px;
  font-size:10px;background:transparent;color:var(--muted);cursor:pointer;max-width:150px;flex:0 0 auto}
.etapa-nome{flex:1;min-width:0;border:0;border-bottom:1px dashed transparent;background:transparent;
  font-size:12px;color:var(--ink);outline:0;padding:3px 0}
.etapa-nome:hover{border-bottom-color:var(--line)}
.etapa-nome:focus{border-bottom-color:var(--cyan)}

/* automações do funil (Automatize) */
.aut-acao{font-size:12px}
.aut-acao b{color:var(--cyan-600);white-space:nowrap}

/* ================= KANBAN ================= */
.kanban{display:flex;gap:14px;overflow-x:auto;padding-bottom:14px;align-items:flex-start}
.kb-col{background:var(--bg);border:1px solid var(--line);border-radius:10px;min-width:250px;width:250px;
        flex-shrink:0;box-shadow:var(--shadow)}
.kb-head{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);font-size:14px;
  border-top:3px solid var(--cor-etapa,transparent)}
.kb-head b{color:var(--navy)}
.kb-body{padding:8px;display:flex;flex-direction:column;gap:6px;min-height:140px;border-radius:0 0 14px 14px;transition:background .12s}
.kb-card{background:var(--card);border:1px solid var(--line);border-radius:8px;
         padding:7px 9px;cursor:grab;box-shadow:none}
/* O card destacado do kanban tinha fundo SÓ no escuro: no claro, a mesma marca
   era só a barra amarela. Dois temas contando coisas diferentes sobre o mesmo
   estado. Agora os dois têm a barra e o fundo, e o fundo é o token. */
.kb-card.destaque{background:var(--destaque)}
.kb-card:hover{border-color:var(--cyan);background:var(--bg)}
.kb-card.arrastando{opacity:.45;cursor:grabbing}

/* pílulas de filtro (lista da agenda) */
.pilula{display:inline-flex;align-items:center;gap:5px;padding:7px 15px;border-radius:22px;border:1.5px solid var(--line);font-size:12px;font-weight:600;
        color:var(--muted);background:#fff;white-space:nowrap}
.pilula:hover{border-color:var(--cyan);color:var(--cyan-600)}
.pilula.on{border-color:var(--sucesso-borda);color:var(--sucesso-texto);background:var(--sucesso-fundo)}
/* barra fixa de salvar (formulário) */
.barra-salvar{position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:1px solid var(--line);
              padding:12px 24px;display:flex;justify-content:center;gap:12px;z-index:15;
              box-shadow:0 -3px 14px rgba(16,24,40,.06)}
/* formulário completo de compromisso */
.form-sec{font-size:16px;font-weight:800;color:var(--cyan-600);margin:26px 0 14px}
.form-linha{display:flex;gap:14px;flex-wrap:wrap}
.form-linha > *{flex:1;min-width:170px}
.lembrete{display:flex;gap:9px;align-items:flex-end;flex-wrap:wrap;margin-bottom:9px}
.lembrete select,.lembrete input{border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:12px;outline:0}

/* navegação de mês (‹ mês ›) — Financeiro */
.mini-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.mini-nav b{font-size:14px;color:var(--navy)}
.mini-nav a{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;
            color:var(--muted);font-size:16px}
.mini-nav a:hover{background:var(--bg);color:var(--navy)}
/* Publicações — lista expandível legível */
.pub{border-bottom:1px solid var(--line)}
.pub:last-child{border-bottom:0}
.pub summary{list-style:none;cursor:pointer;padding:14px 18px;display:block}
.pub summary::-webkit-details-marker{display:none}
.pub summary:hover{background:#fafbfd}
.pub .pub-seta{color:var(--muted);font-size:12px;transition:transform .15s;flex-shrink:0}
.pub[open] .pub-seta{transform:rotate(90deg)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);align-items:center}
.legend span{display:inline-flex;align-items:center;gap:6px}
.swatch{width:11px;height:11px;border-radius:3px}
form.inline{display:inline}
/* Link "vá para lá": rótulo + seta. O `icone()` é display:block, então o link
   precisa ser o container flex — é a saída (b) da regra 3 do design system,
   e é por isso que a seta NÃO fica solta no meio da frase. */
.link-seta{display:inline-flex;align-items:center;gap:4px;vertical-align:middle}
/* atalho de conserto dentro de um aviso ("Conectar Google →"): era estilo em
   linha repetido em dois templates, virou modificador ao subir para o macro */
.link-seta.destaque{color:var(--cyan);font-weight:700}
/* flex porque a faixa começa com um ícone: `.ico` é display:block (tema.css), e
   dentro de um bloco comum ele empurraria o texto para a linha de baixo —
   é a regra 3 do design system. `.banner` já era flex pelo mesmo motivo. */
/* AVISO-02 + COR-09 (16/09/2026): o "deu certo" é faixa no topo, verde do catálogo. */
.flash{background:var(--sucesso-fundo);border:1px solid var(--sucesso-borda);color:var(--sucesso-texto);border-radius:10px;padding:11px 14px;margin-bottom:16px;font-size:12px;font-weight:600;
       display:flex;align-items:center;gap:8px}
/* Modal — vidro líquido */
.ov{display:none;position:fixed;inset:0;background:rgba(10,20,45,.45);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  z-index:50;align-items:center;justify-content:center;padding:20px}
.ov.show{display:flex}
.modal{background:var(--glass-bg-modal);
  -webkit-backdrop-filter:blur(var(--glass-blur-modal)) saturate(var(--glass-saturate-modal));
  backdrop-filter:blur(var(--glass-blur-modal)) saturate(var(--glass-saturate-modal));
  border:1px solid var(--glass-border);
  border-radius:var(--r-glass);width:480px;max-width:100%;
  box-shadow:0 8px 24px rgba(15,23,42,.12),0 2px 6px rgba(15,23,42,.08);overflow:hidden}
.modal .mh{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.modal .mh h3{color:var(--navy);font-size:14px}
.modal .mb{padding:20px;display:flex;flex-direction:column;gap:14px}
.modal .mf{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px}
/* navegador sem suporte a backdrop-filter: perde o vidro, mantém legível */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .modal{background:#fff}
  /* d2: fallback sólido do vidro líquido -- cartão sólido é var(--card), não
     o azul antigo. */
  html.escuro .modal{background:var(--card)}
}
html.escuro .modal{
  background:var(--glass-bg-modal);
  border-color:rgba(255,255,255,.10);
  box-shadow:0 8px 24px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.24);
}
/* Painel lateral (MOD-04, Padrao-Visual/design-system.md) -- desliza da direita SEM
   veu e SEM desfoque (ao contrario do MOD-03 acima): o objetivo e escrever ou
   consultar ao lado sem perder o que esta atras. `[hidden]` tira do fluxo
   enquanto fechado; a classe `.aberto` (somada um frame depois, em
   `app.js:abrirPainel`) e que dispara a transicao -- sem esse atraso de um
   frame o navegador aplicaria a posicao final direto, e a barra "apareceria"
   sem deslizar. */
.painel-lat{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:100%;
  background:var(--card);border-left:1px solid var(--line);
  box-shadow:-8px 0 24px rgba(15,23,42,.12),-2px 0 6px rgba(15,23,42,.08);
  z-index:50;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .22s ease}
.painel-lat[hidden]{display:none}
.painel-lat.aberto{transform:translateX(0)}
.painel-lat-topo{padding:18px 20px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;flex:0 0 auto}
.painel-lat-topo h3{color:var(--navy);font-size:14px}
.painel-lat-corpo{padding:20px;overflow-y:auto;flex:1 1 auto}
html.escuro .painel-lat{
  border-color:rgba(255,255,255,.10);
  box-shadow:-8px 0 24px rgba(0,0,0,.35),-2px 0 6px rgba(0,0,0,.24);
}
/* celular: MOD-04 ocupa a tela inteira, como todo painel/gaveta nesta largura */
@media(max-width:600px){.painel-lat{width:100%}}
/* rodapé de ações dentro do corpo do painel (não é rodapé fixo como o `.mf`
   do modal — o painel rola inteiro, então "Salvar" desce com o formulário) */
.painel-lat-acoes{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
/* variantes de proporção — opt-in, não afetam o .modal base (480px) usado hoje
   em ~20 telas: .largo = razão áurea 1.618:1; .compacto = π/2 ≈ 1.571:1 */
.modal.largo{width:780px;min-height:482px}
.modal.compacto{width:360px;min-height:229px}
/* Barra de filtro (macro `barra_filtros`) — as medidas que estavam repetidas
   em nove telas, com uma delas divergindo em três de uma vez. Ver o comentário
   do macro em `_macros.html` para o levantamento. */
.barra-filtros{margin-bottom:14px}
.barra-filtros>.bd{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
/* o rótulo do campo já separa as linhas; margem no .fld desalinharia a barra,
   que encosta tudo pela base (`align-items:flex-end`) */
.barra-filtros .fld{margin:0}

/* REGRA BASE DO CAMPO — 04/09/2026.
   Até aqui `.fld` não tinha margem base nenhuma: seis escopos escolhiam a sua
   (10px em .agente-corpo e .ag-bloco, 12px em .pub-form, 10px no celular.css,
   e zero em .pub-vinculo e .barra-filtros), e todo campo fora desses escopos
   ficava com vão ZERO — medido na página real: dois `.fld` empilhados
   encostavam um no outro. São 463 campos em 55 telas, e a maioria não está em
   escopo nenhum.
   O valor é `--s-3` (12px) porque é o único dos escolhidos que já vinha da
   escala; 10px não vem de lugar nenhum. Efeito: .agente-corpo e .ag-bloco
   ganham 2px por campo, e o resto sai de 0 para 12.
   A linha de baixo NÃO é redundante: `.form-linha` é flex com `gap:14px`, que
   já vale nos dois eixos. Sem zerar ali, a margem entrava DENTRO da linha e a
   altura dela subia de 60,4 para 72,4px — medido antes de escrever isto. */
.fld{margin-bottom:var(--s-3)}
.form-linha .fld{margin-bottom:0}
.fld label{font-size:12px;font-weight:700;color:var(--ink);display:block;margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:12px;outline:0;font-family:inherit}
.fld input:focus,.fld select:focus{border-color:var(--cyan)}
/* Campo com busca (CAMPO-08): a lista flutua embaixo do campo. */
.busca-campo{position:relative}
.busca-lista{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:45;list-style:none;margin:0;
  padding:6px;background:var(--card);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 12px 32px rgba(0,0,0,.18);max-height:280px;overflow-y:auto}
.busca-lista li{padding:7px 10px;border-radius:6px;font-size:12px;color:var(--ink);cursor:pointer}
.busca-lista li small{display:block;font-size:11px;color:var(--muted)}
.busca-lista li:hover,.busca-lista li[aria-selected="true"]{background:var(--bg)}
.busca-lista li.busca-nada{cursor:default;color:var(--muted);background:none}
.x{cursor:pointer;color:var(--muted);font-size:20px;border:0;background:0;line-height:1;display:flex;align-items:center}

/* ---- Componente único de credencial/API key (Padrao-Visual/design-system.md) ----
   Um só lugar pra label+input+badge+ajuda de qualquer campo que peça
   chave/token/senha — usado em /configuracoes/ia e /configuracoes/integracoes
   (macro em app/templates/_campo_credencial.html). */
.cred-campo{margin-bottom:14px}
.cred-campo:last-child{margin-bottom:0}
.cred-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.cred-topo label{font-size:12px;font-weight:700;color:var(--ink)}
.cred-wrap{position:relative}
.cred-wrap input{width:100%;border:1px solid var(--line);border-radius:9px;
  padding:10px 72px 10px 12px;font-size:12px;outline:0;font-family:inherit}
.cred-wrap input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px var(--anel-foco)}
.cred-acoes{position:absolute;right:4px;top:0;bottom:0;display:flex;align-items:center;gap:2px}
.cred-acao{width:26px;height:26px;border:0;background:0;border-radius:6px;color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.cred-acao:hover{background:var(--bg);color:var(--ink)}
.cred-acao.ativo{background:var(--bg);color:var(--cyan-600)}
.cred-acao .ic-ok{display:none;color:var(--green)}
.cred-acao.copiado .ic-copiar{display:none}
.cred-acao.copiado .ic-ok{display:inline-flex}
.cred-ajuda{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.5}
.cred-remover{background:none;border:0;color:var(--muted);font-size:12px;cursor:pointer;
  text-decoration:underline;padding:0;margin-left:6px}
.cred-remover:hover{color:var(--red)}
/* Login */
/* PUB-01 (Padrao-Visual/design-system.md #1.21): fundo verde liso (COR-01), sem
   gradiente; cartao branco RAIO-03 (8px) com SOMB-02, sem sombra pesada;
   nome do escritorio em TIPO-02 (Cormorant). Vale para login, erro e convite
   -- as tres telas sem menu que usam .login-wrap/.login-card. */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--navy);padding:20px}
.login-card{background:#fff;border-radius:8px;box-shadow:0 4px 14px rgba(27,32,29,.12);width:400px;max-width:100%;padding:34px}
.login-card .logo{width:64px;height:64px;border-radius:var(--r-md);background:var(--chumbo);overflow:hidden;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.login-card .logo img{width:100%;height:100%;display:block}
.login-card h1{text-align:center;color:var(--navy);font-family:var(--fonte-marca);font-size:28px;font-weight:600;margin-bottom:4px}
.login-card p.sub{text-align:center;color:var(--muted);font-size:12px;margin-bottom:22px}
.login-card .erro{background:#f8e7e3;color:var(--red);border-radius:9px;padding:10px 12px;font-size:12px;margin-bottom:14px;text-align:center;font-weight:600}
.login-card .btn{width:100%;justify-content:center;margin-top:8px;padding:12px}
/* Tela de entrada (PUB-01, Padrao-Visual/design-system.md): painel verde com a
   marca e o puma à esquerda, formulário à direita. O puma é `img/puma.png` como
   máscara, pintado com --contraste; poeira, brilho e saída em `js/entrada.js`.
   `.ent.sem-entrada` (volta com erro) mostra tudo parado e já no lugar. */
.ent{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;background:var(--bg);
  transition:grid-template-columns .9s cubic-bezier(.7,0,.2,1)}
.ent-lado{position:relative;overflow:hidden;isolation:isolate;background:var(--navy);color:#fff;padding:48px 56px;
  display:flex;flex-direction:column;justify-content:space-between}
.ent-lado::before{content:"";position:absolute;inset:-20%;z-index:-1;
  background:radial-gradient(35% 30% at 20% 85%,rgba(47,109,79,.55),transparent 70%),
    radial-gradient(60% 60% at 50% 50%,transparent 55%,rgba(10,28,23,.6) 100%);
  animation:ent-luz 18s ease-in-out infinite alternate}
.ent-lado::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.09;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
.ent-topo{position:relative;z-index:1;display:flex;align-items:center;gap:14px}
.ent-logo{width:48px;height:48px;border-radius:var(--r-md);overflow:hidden;flex:none;box-shadow:0 0 0 1px rgba(216,201,173,.18)}
.ent-logo img{width:100%;height:100%;display:block}
.ent-nome{font-family:var(--fonte-marca);font-weight:600;font-size:28px;line-height:1.15;color:#fff}
.ent-frase{position:relative;z-index:1;font:600 20px/1.35 var(--fonte-ui);max-width:340px;color:var(--areia)}
.ent-rodape{position:relative;z-index:1;margin-top:10px;font:400 12px var(--fonte-ui);color:rgba(255,255,255,.55)}
.ent-puma{position:absolute;left:50%;top:47%;width:min(76%,520px);aspect-ratio:674/618;
  transform:translate(-50%,-50%);perspective:900px;pointer-events:none}
.ent-puma canvas{position:absolute;inset:-30%;width:160%;height:160%;transition:opacity .9s ease}
.ent-puma-forma{position:absolute;inset:0;transition:transform .6s ease-out}
.ent-puma-cor,.ent-brilho,.ent-mini span{-webkit-mask:url(/static/img/puma.png) center/contain no-repeat;
  mask:url(/static/img/puma.png) center/contain no-repeat}
.ent-puma-cor{position:absolute;inset:0;background:var(--contraste);opacity:0}
.ent-puma.surgiu .ent-puma-cor{animation:ent-aparece 1s ease forwards}
.ent-brilho{position:absolute;inset:0;opacity:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,253,245,.85) 50%,transparent 62%) no-repeat;
  background-size:260% 100%;background-position:160% 0}
.ent-puma.pronto .ent-brilho{opacity:1;animation:ent-brilho 7s ease-in-out infinite}
.ent-puma.pronto .ent-puma-forma{animation:ent-respira 6s ease-in-out infinite}
.ent-form{display:flex;align-items:center;justify-content:center;padding:32px 24px}
.ent-form form{width:100%;max-width:360px}
.ent-form h1{font:600 20px/1.15 var(--fonte-ui);margin:0 0 6px;color:var(--ink)}
.ent-form p{font:400 14px/1.55 var(--fonte-ui);color:var(--muted);margin:0 0 28px}
.ent-form .erro{background:#f8e7e3;color:var(--red);border-radius:var(--r-md);padding:10px 12px;font-size:12px;margin-bottom:14px;font-weight:600}
.ent-campo{margin-bottom:14px}
.ent-campo label{display:block;font:600 12px var(--fonte-ui);margin-bottom:6px;color:var(--ink);transition:color .2s}
.ent-campo:focus-within label{color:var(--cyan)}
.ent-caixa{position:relative}
.ent-caixa>.ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;transition:color .2s}
.ent-caixa:focus-within>.ico{color:var(--cyan)}
.ent-caixa input{width:100%;box-sizing:border-box;height:46px;padding:0 44px 0 42px;border-radius:var(--r-md);
  border:var(--borda) solid var(--line);font:400 14px var(--fonte-ui);background:var(--card);color:var(--ink)}
.ent-caixa input:focus{outline:0;border-color:var(--cyan);box-shadow:0 0 0 4px var(--anel-foco)}
.ent-ver{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--muted);
  width:34px;height:34px;border-radius:var(--r-sm);cursor:pointer;display:flex;align-items:center;justify-content:center}
.ent-ver:hover{color:var(--ink);background:var(--bg)}
.ent-entrar{width:100%;justify-content:center;height:46px;margin-top:6px;font:600 14px var(--fonte-ui);
  position:relative;overflow:hidden;transition:transform .15s ease,box-shadow .25s ease}
.ent-entrar::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(216,201,173,.45) 50%,transparent 65%) no-repeat;
  background-size:260% 100%;background-position:160% 0;animation:ent-brilho 7s ease-in-out 2.6s infinite}
.ent-entrar:hover{box-shadow:0 8px 22px rgba(22,48,42,.28);transform:translateY(-1px)}
.ent-entrar:active{transform:none}
.ent-form form>*{opacity:0;transform:translateY(12px);animation:ent-sobe .7s cubic-bezier(.2,.7,.2,1) forwards}
.ent-form form>:nth-child(1){animation-delay:.25s}.ent-form form>:nth-child(2){animation-delay:.35s}
.ent-form form>:nth-child(3){animation-delay:.45s}.ent-form form>:nth-child(4){animation-delay:.55s}
.ent-form form>:nth-child(5){animation-delay:.65s}.ent-form form>:nth-child(6){animation-delay:.75s}
.ent-topo-cel{display:none}
.ent-mini{width:52px;height:52px;border-radius:var(--r-md);background:var(--navy);display:flex;align-items:center;justify-content:center;flex:none}
.ent-mini span{width:70%;aspect-ratio:674/618;background:var(--contraste);animation:ent-aparece 1s ease both}
.ent.saindo{grid-template-columns:1fr 0fr}
.ent.saindo .ent-form{opacity:0;transform:translateX(40px);transition:opacity .4s ease,transform .5s ease}
.ent.saindo .ent-puma{transition:transform 1.1s cubic-bezier(.6,0,.2,1),opacity .6s ease .7s;
  transform:translate(-30%,-50%) scale(1.5);opacity:0}
.ent.saindo .ent-topo,.ent.saindo .ent-frase,.ent.saindo .ent-rodape{opacity:0;transition:opacity .4s}
.ent-abrindo{position:fixed;inset:0;z-index:5;background:var(--bg);clip-path:circle(0% at 50% 50%);
  transition:clip-path .9s cubic-bezier(.7,0,.2,1);pointer-events:none}
.ent.saindo~.ent-abrindo{clip-path:circle(150% at 50% 50%);transition-delay:.7s}
.ent.sem-entrada .ent-form form>*,.ent.sem-entrada .ent-mini span{opacity:1;transform:none;animation:none}
.ent.sem-entrada .ent-puma-cor{opacity:1}
.ent.sem-entrada .ent-puma canvas{display:none}
@keyframes ent-aparece{from{opacity:0}to{opacity:1}}
@keyframes ent-brilho{0%{background-position:160% 0}20%,100%{background-position:-60% 0}}
@keyframes ent-respira{0%,100%{scale:1}50%{scale:1.015}}
@keyframes ent-luz{0%{transform:translate(0,0)}100%{transform:translate(-6%,5%)}}
@keyframes ent-sobe{to{opacity:1;transform:none}}
@media(max-width:820px){.ent{grid-template-columns:1fr}.ent-lado{display:none}
  .ent-topo-cel{display:flex;align-items:center;gap:12px;margin-bottom:28px}
  .ent-topo-cel .ent-nome{font-size:24px;color:var(--navy)}}
@media(prefers-reduced-motion:reduce){
  .ent-form form>*,.ent-mini span{opacity:1;transform:none;animation:none}
  .ent-puma-cor{opacity:1;animation:none}.ent-puma canvas{display:none}
  .ent-entrar::after,.ent-lado::before,.ent-puma.pronto .ent-brilho,.ent-puma.pronto .ent-puma-forma{animation:none}}
/* No escuro o --navy vira cor de texto (claro); o painel da marca fica no verde
   escuro fixo, o mesmo de `html.escuro .login-wrap`. */
html.escuro .ent-lado,html.escuro .ent-mini{background:#0a1c17}
html.escuro .ent-topo-cel .ent-nome{color:var(--ink)}
@media(max-width:920px){.app{grid-template-columns:1fr}.side{display:none}.grid4{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}}

/* ===== Agenda: alternador de visualização e grade hora × dia ===== */
/* Bolinha da cor da categoria dentro do chip — o que as caixas de fora
   mostravam com `.cal-chip i`. Sem ela, "Prazo" e "Audiência" viram texto igual. */
.chip-cor{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;
  vertical-align:middle}
/* Botão só-ícone da barra (estrela dos filtros salvos, exportar). Mesma família
   do `.clt-ic` do SAC, redesenhado aqui porque aquele é quadrado de 4px e esta
   barra precisa da mesma altura do campo de busca. */
.ag-ic{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:1px solid var(--line);border-radius:9px;background:var(--card);
  color:var(--navy);cursor:pointer;text-decoration:none;flex:0 0 auto}
.ag-ic:hover{background:var(--bg);border-color:var(--cyan);color:var(--cyan-600)}
.ag-ic[aria-expanded="true"]{border-color:var(--cyan);color:var(--cyan-600);background:#eefaff}
.ag-ic-n{position:absolute;top:-5px;right:-5px;min-width:15px;height:15px;border-radius:8px;
  background:var(--cyan);color:#fff;font-size:9px;font-style:normal;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;padding:0 3px}

/* Popover da barra. FLUTUA — `position:absolute` — porque o `<details>` que
   havia no lugar empurrava a lista inteira para baixo ao abrir. */
.ag-pop{position:absolute;top:calc(100% + 6px);z-index:45;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-md,10px);
  box-shadow:0 12px 32px rgba(0,0,0,.18)}
/* Os filtros salvos deixaram de ser um SEGUNDO popover na faixa e viraram uma
   gaveta dentro deste — por isso não flutuam mais: dentro de um popover que já
   flutua, um segundo `position:absolute` se ancoraria na faixa e sairia por
   cima do conteúdo do primeiro. */
.ag-pop-salvos{padding:12px 12px 0;border-bottom:1px solid var(--line)}
.ag-pop-cab{display:flex;align-items:center;gap:6px;padding:9px 12px;font-size:12px;
  font-weight:700;color:var(--ink);border-bottom:1px solid var(--line)}
.ag-pop-x{margin-left:auto;border:0;background:transparent;font-size:14px;line-height:1;
  color:var(--muted);cursor:pointer;padding:2px 4px}
.ag-pop-x:hover{color:var(--red)}
.ag-pop-corpo{padding:12px;max-height:62vh;overflow:auto}
.ag-pop .cfg-titulo{margin-bottom:6px}

/* --- marcação em lote da Lista (10/09/2026) --- */
.ag-lote{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 16px;
  border-bottom:1px solid var(--line);background:var(--bg)}
.ag-lote-resp{display:inline-flex;align-items:center;gap:6px}
.ag-lote-resp select{border:1px solid var(--line);border-radius:8px;padding:5px 8px;
  font-size:12px;background:var(--card);color:var(--ink)}
th.col-check,td.col-check{width:34px;text-align:center;padding-left:10px;padding-right:0}
tr.linha-clicavel{cursor:pointer}
tr.linha-clicavel:hover{background:var(--bg)}
tr.marcada{background:#eefaff}
html.escuro tr.marcada{background:#132b3d}

.tempo{display:grid;grid-template-columns:66px repeat(var(--cols),minmax(120px,1fr));
       gap:1px;background:var(--line);min-width:min-content}
.tempo-canto,.tempo-cab{background:#f7f9fc;padding:9px 8px;text-align:center}
.tempo-cab a{display:block;text-decoration:none;color:var(--muted)}
.tempo-cab b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.02em}
.tempo-cab span{font-size:12px;color:var(--navy);font-weight:700}
.tempo-cab.hoje{background:#eefaff}
.tempo-cab.hoje span{color:var(--cyan-600)}
.tempo-hora{background:#f7f9fc;color:var(--muted);font-size:12px;font-weight:700;
            padding:8px 8px;text-align:right;white-space:nowrap}
.tempo-hora.topo{color:var(--navy)}
.tempo-cel{background:#fff;min-height:46px;padding:3px;display:flex;flex-direction:column;gap:3px;position:relative}
.tempo-cel.topo{min-height:34px;background:#fbfdff}
/* a área clicável fica atrás dos eventos: clicar no vazio marca, no evento abre */
.tempo-vazio{position:absolute;inset:0;z-index:0}
.tempo-vazio:hover{background:rgba(31,176,230,.07)}
.tempo-ev{position:relative;z-index:1;display:block;color:#fff;font-size:12px;font-weight:600;
          padding:4px 7px;border-radius:7px;text-decoration:none;line-height:1.3;
          overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tempo-ev b{font-weight:800;opacity:.85;margin-right:3px}
.tempo-ev:hover{filter:brightness(1.08)}
.tempo-ev.ghost{background:#fff;color:var(--red);border:1.5px dashed var(--red)}
/* d2, 2a rodada (17/09/2026): .tempo-canto/.tempo-cab/.tempo-hora são a faixa
   de cabeçalho da grade de horários (mesmo papel do `th` e do `.cal .dow`) --
   var(--linha-cabecalho). .tempo-cel.topo é a mesma célula de `.tempo-cel`
   (linha abaixo, já var(--card)), só com um tom mais claro no claro; sem
   token próprio pra essa variação, acompanha a célula. */
html.escuro .tempo-canto,html.escuro .tempo-cab,html.escuro .tempo-hora{background:var(--linha-cabecalho)}
/* .tempo-cab.hoje NÃO mudou -- parei e relato: o claro usa #eefaff, a mesma
   família do ciano "ligado" (chip marcado, pilula.on, clt-preset[aria-selected]),
   e o escuro (#16283a) é o par dela, não um cinza/bege neutro. "Hoje" é
   destaque com significado próprio, não superfície neutra -- e o ciano ligado
   está fora desta rodada (é FILT-02, decisão do escritório ainda por vir). */
html.escuro .tempo-cab.hoje{background:#16283a}
html.escuro .tempo-cel{background:var(--card)}
html.escuro .tempo-cel.topo{background:var(--card)}
html.escuro .tempo-ev.ghost{background:transparent}

/* Kanban: aviso de que a coluna tem mais leads do que os cards desenhados */
.lc-mais{display:block;text-align:center;padding:9px;font-size:12px;
  color:var(--muted);border-top:1px dashed var(--line);text-decoration:none}
.lc-mais:hover{color:var(--cyan)}
/* Paginador das listas do CRM */
.paginador{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px}
.paginador .btn-secundario{padding:5px 12px;font-size:12px}

/* ==========================================================================
   DESIGN SYSTEM — as classes que as macros de `_macros.html` produzem
   (Fase 6, item A). Nada aqui redesenha o que já existe: são os nomes que
   faltavam para os padrões que já estavam escritos à mão em dezenas de telas.
   ========================================================================== */

/* Número, dinheiro e contagem alinham à direita, com dígitos de mesma largura —
   coluna de valor que não alinha obriga a ler número por número. `.mono` já
   fazia isso célula a célula; aqui é a coluna inteira, cabeçalho junto. */
/* `nowrap` faz parte da regra, não é enfeite: sem ele, "R$ 6.519,39" quebra
   entre o símbolo e o número quando a coluna aperta — e uma tabela de 12 meses
   aperta sempre. Número partido em duas linhas deixa de ser número: perde-se a
   comparação de grandeza, que é a única razão de a coluna existir. Quem cede é
   a tabela, rolando dentro do próprio cartão (`tabela-rolante`), não o dado. */
.col-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Coluna de data: largura fixa, para a data não empurrar a coluna vizinha de
   linha em linha (dd/mm/aaaa e "—" têm larguras muito diferentes), e sem quebra
   — data partida em duas linhas dobra a altura da linha inteira.
   96px não é número novo: é o que `agenda_lista.html` já usava inline, e era o
   único lugar do sistema que tinha resolvido isso. Aqui ele ganha nome. */
.col-data{width:96px;white-space:nowrap;font-variant-numeric:tabular-nums}

/* Número e data tabular saem em IBM Plex Mono — a decisão de tipografia de
   02/09/2026 ("IBM Plex Mono, só número/dado tabular"). A fonte já estava
   declarada em `tema.css` como `--fonte-mono` e já valia para `.mono`; o que
   faltava era a COLUNA inteira herdar a mesma coisa que a célula avulsa.
   `td.` de propósito, e não `.col-num` cru: das 148 marcações no sistema, 41
   estão num `<th>` — e o cabeçalho é a palavra "Valor", não um número. Mono ali
   não alinha dígito nenhum e só desalinha o rótulo do resto do cabeçalho, que
   a §7.1 manda diferenciar por peso e cor. */
td.col-num, td.col-data{font-family:var(--fonte-mono)}

/* Tabela larga rola dentro do próprio cartão. Sem isto a PÁGINA rola de lado,
   e no celular a barra lateral sai de vista junto. */
/* Destaque de linha/cartão: UMA regra para os três lugares que a usam (conversa
   na lista, linha da tabela de leads, linha do histórico). Antes eram seis
   declarações — três claras e três escuras — com o mesmo par de literais
   repetido, cada uma presa ao nome da tela onde nasceu. O escuro sai de graça:
   `--destaque` já troca de valor em `html.escuro` (Fase 6, item I). */
.destacada{background:var(--destaque)}

.tabela-rolante{overflow-x:auto}

/* A linha pequena embaixo de um campo: o que a pessoa precisa saber ANTES de
   errar. Estava escrita com `style="font-size:12px;color:var(--muted)"`
   repetido em ~40 lugares, com três tamanhos diferentes entre eles. */
.fld-dica{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.45}

/* Abas de submódulo (Planejamento: Vendas/Orgânico/Ativos/Perguntas). Antes,
   inline no `_nav_conteudos_pagos.html` — e cada módulo que quisesse abas ia
   copiar aquele bloco de estilo inline. */
.abas-modulo{display:flex;gap:6px;margin-bottom:14px;padding-bottom:10px;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.abas-modulo .btn.ghost.ativo{background:var(--bg);border-color:var(--cyan);color:var(--cyan-600)}

/* A linha de contexto do KPI (o período, a régua) — o que explica o número. */
.stat-detalhe{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.45}

/* Estado vazio. Havia CINCO classes para isto (`cp-vazio`, `chat-vazio`,
   `pub-vazio`, `ag-vazio`, `tp-vazio`), com quatro tamanhos de fonte e três
   paddings — a mesma tela em cinco versões, cada uma parada no dia em que foi
   copiada.

   A varredura do item F (17/08) mostrou que não eram cinco versões de UMA
   coisa: são duas coisas. Esta aqui é o estado vazio de lista, tabela ou
   cartão — falta um REGISTRO, e a saída é uma ação. A outra é o placeholder de
   painel (`.vazio-painel`, mais acima) — falta uma ESCOLHA, e a saída é clicar
   na lista ao lado. Confundir as duas é o que gerava classe nova a cada tela.

   Das cinco: `tp-vazio` saiu (Campanhas), `chat-vazio` e `pub-vazio` viraram
   `.vazio-painel` (eram declarações idênticas caractere por caractere). Ficam
   `.chat-vazio-tela`, `.ag-vazio` e `.cp-vazio` — placeholder de painel também,
   variando só no padding, e convergem quando as telas delas forem tocadas. */
.vazio .bd{text-align:center;padding:34px 18px}
.vazio-titulo{font-weight:700;color:var(--ink);font-size:14px}
.vazio-texto{font-size:12px;color:var(--muted);line-height:1.7;margin-top:6px;
  max-width:62ch;margin-left:auto;margin-right:auto}
.vazio-acao{margin-top:16px}

/* Estado vazio dentro do corpo de um cartão que já existe (macro `vazio_bloco`)
   — o painel pequeno de um dashboard, onde `vazio()` desenharia um cartão
   dentro do cartão e `vazio_linha()` não cabe por não haver `<tbody>`.
   Escrito à mão em 11 lugares, e nas 11 com o MESMO estilo inline
   (`color:var(--muted);font-size:12px`): não é divergência, é um nome que
   faltava. Sem centralizar e sem padding próprio, ao contrário de `.vazio` —
   o `.bd` do cartão de fora já dá o respiro, e a frase alinha com o conteúdo
   que estaria ali se houvesse conteúdo. */
.vazio-bloco{color:var(--muted);font-size:12px;line-height:1.6}
.vazio-bloco-acao{margin-top:10px}

/* Estado vazio dentro de `<tbody>` (macro `vazio_linha`). Estava escrito à mão
   com `style="text-align:center;color:var(--muted);padding:Npx"` — e o N variava
   entre 24, 26 e 30 dentro do MESMO módulo, o que faz a tabela vazia parecer
   outra tabela a cada tela. 26px é a mediana dos que existiam. */
.linha-vazia td{text-align:center;color:var(--muted);padding:26px 14px;line-height:1.6}
.linha-vazia-acao{margin-top:12px}

/* Cartão que pede atenção. Era `style="border:2px solid var(--orange)"` escrito
   à mão — ou seja, a borda que SEPARA engrossada para virar destaque, que é
   justamente a confusão que os dois tokens de espessura desfazem. O destaque
   agora é barra de acento; o contorno continua sendo 1px como o de todo cartão. */
.card.destacado{border-left:var(--barra-acento) solid var(--cyan)}
.card.destacado.atencao{border-left-color:var(--orange)}

/* Os passos de "conectar um aparelho" (macro `passos_conectar_aparelho`).
   O estilo estava inline em três lugares, com `line-height` 1.8 num e 1.9
   noutro — a mesma lista parecia dois componentes. */
.passos-parear{margin:12px 0 0;padding-left:18px;line-height:1.85;font-size:12px}

/* =========================================================================
   CAMPANHAS E PLANEJAMENTO — era `campanhas.css`, folha própria carregada por <link>.
   Entrou aqui no item I da Fase 6: duas folhas soltas eram duas requisições
   a mais e, pior, dois lugares onde procurar uma regra. As classes seguem
   com o prefixo do módulo, que é o que impede colisão — o que sai é o
   arquivo separado, não o namespace.
   ====================================================================== */
/* Dashboard de campanhas — cartões de indicador, gráfico semanal e tabela
   detalhada ordenável. Antes tinha paleta escura própria e sequestrava o
   fundo do .main; agora herda os tokens reais (claro/escuro) como o resto
   do sistema. */
/* `.main` no seletor, e não `.cp a` solto: este `.cp` é a <div> que embrulha o
   Tráfego Pago (campanhas.html:12), mas a tela de Conteúdos Pagos põe a MESMA
   classe no <body> — e aí `.cp a` casava todo link da página, a barra lateral
   inclusive. `color:inherit` fazia o item de menu herdar `--ink`, quase preto
   no tema claro; no escuro o defeito existia igual e passava despercebido,
   porque lá `--ink` é quase branco. Medido em 13/09/2026: `.cp a` vale 0,1,1 e
   `.nav` vale 0,1,0, então o Tráfego Pago vencia a barra do sistema inteiro. */
.cp .main a, .main .cp a{color:inherit;text-decoration:none}
/* A regra `.cp h1{font-size:20px;font-weight:800}` foi APAGADA em 17/09/2026.
   Ela servia a uma `<div class="cp">` que embrulhava o Trafego Pago e nao
   existe mais em template nenhum; sobrevivia so por coincidencia de nome com
   o `body class="cp"` de `conteudos_pagos.html`, onde atropelava o titulo
   (baixava 22px/700 para 20px/800). Ficou uma rodada com `:not(.topo-titulo)`,
   que a deixou sem casar com nada: o unico `<h1>` daquela tela E o
   `.topo-titulo`. As outras regras `.cp` continuam vivas. */
.cp .cp-sub{color:var(--muted);font-size:14px;margin-top:4px}

/* ---------- campo dentro de célula de tabela (padrão da busca do topo,
   .search em app.css: borda 1px + raio 9px, sem o visual nativo do SO) ---------- */

/* ---------- submenu de filtros: único vidro leve do módulo ---------- */
.cp-sel{background:var(--card);border:1px solid var(--line);color:var(--ink);
  border-radius:10px;padding:9px 13px;font-size:14px;font-family:inherit;cursor:pointer;
  min-width:170px;outline:0}
.cp-sel:focus{border-color:var(--cobre)}
.cp-acoes{margin-left:auto;display:flex;gap:8px}

/* ---------- gráfico ---------- */
.cp-bloco{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);margin-top:18px;overflow:hidden}
.cp-bloco-topo{display:flex;align-items:center;gap:12px;padding:15px 18px;
  border-bottom:1px solid var(--line)}
.cp-bloco-topo h3{font-size:14px;font-weight:700;color:var(--navy)}
.cp-legenda{display:flex;gap:14px;margin-left:auto;font-size:12px;color:var(--muted)}

/* ---------- macro m.grafico_linhas (_macros.html) ----------------------------
   O prefixo é próprio (`gl-`) e não `cp-`: esta macro é do sistema inteiro
   (Task 9, Task 13), não só de Campanhas, e herdar o prefixo de uma tela seria
   o erro que produziu wa-tabela/tp-tabela/crm-tabela.

   Mas prefixo separado não é licença para VALOR duplicado: o respiro e o
   quadradinho da legenda são a mesma decisão visual nos dois, então o seletor
   é combinado. Copiar `padding:16px 18px` para os dois lados é a metade do
   erro do wa-tabela que sobrevive à escolha certa de nome — no dia em que o
   respiro mudar, um dos dois fica para trás e ninguém repara. ------------- */
.cp-grafico,.gl-grafico{padding:16px 18px}
.cp-legenda i,.gl-legenda i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px}
.gl-legenda{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-bottom:10px}

/* ---------- tabela detalhada ---------- */
.cp-tab{width:100%;border-collapse:collapse;font-size:12px}
/* 11,5px não é degrau de régua nenhum, e o degrau mais próximo dele é único:
   dista 0,5 de 12 e 1,5 de 10. Vai para 12. */
/* CORREÇÃO 17/09/2026 (org6): TAB-03 no design-system.md pede cabeçalho 10px
   sobre var(--linha-cabecalho) — a régua deste `th` muda de 12 para 10, fora
   do raciocínio de "11,5 vs 12" acima, que valia até aqui. */
.cp-tab th{color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.6px;padding:11px 12px;text-align:right;white-space:nowrap;cursor:pointer;
  user-select:none;border-bottom:1px solid var(--line);background:var(--linha-cabecalho)}
.cp-tab th:first-child,.cp-tab th.esq{text-align:left}
.cp-tab th:hover{color:var(--ink)}
.cp-tab th .seta{opacity:.4;font-size:10px;display:inline-flex;align-items:center;vertical-align:middle}
.cp-tab th.ordenado .seta{opacity:1;color:var(--cobre)}
.cp-tab td{padding:12px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.cp-tab td:first-child,.cp-tab td.esq{text-align:left;white-space:normal}

/* A macro `vazio_linha` (item F) centraliza pelo `<tr class="linha-vazia">`, mas
   a célula do vazio é sempre a primeira da linha — e `.cp-tab td:first-child`
   acima é mais específico que `.linha-vazia td` do `app.css`, então o texto
   saía à esquerda. É por isso que a tabela desta tela usava `class="esq"` no
   vazio: não para alinhar à esquerda de propósito, mas porque ninguém tinha
   como centralizar. Esta linha é a permissão que faltava, e mora aqui, do lado
   da regra que ela desfaz, e não no `app.css`, onde ficaria sem contexto. */
.cp-tab tr.linha-vazia td{text-align:center;white-space:normal}
.cp-tab tbody tr:hover{background:var(--bg)}
/* campanha parada não some da tabela, mas para de disputar atenção com quem está rodando */
.cp-tab tbody tr.inativa{opacity:.55}
.cp-tab tbody tr.inativa:hover{opacity:1}
.cp-tab tbody tr.inativa b{font-weight:600}
.cp-pill{font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;
  display:inline-flex;align-items:center;gap:4px;vertical-align:middle}
.cp-pill.ativa{background:#e3f4fc;color:var(--cyan-600)}
.cp-pill.pausada{background:#fdf0e0;color:var(--orange)}
.cp-pill.encerrada{background:var(--bg);color:var(--muted)}
html.escuro .cp-pill.encerrada{background:var(--linha-cabecalho);color:var(--muted)}
/* no escuro, --cyan-600/--orange viram tons claros (pensados pra texto sobre
   fundo escuro) — sobre o fundo pastel claro fixo daria texto claro em cima
   de claro, quase ilegível. Mesma receita da .encerrada acima: fundo escuro
   saturado + texto claro. */
html.escuro .cp-pill.ativa{background:#0f3a52;color:#7fd4f5}
html.escuro .cp-pill.pausada{background:#4a3413;color:#f0b968}


/* Substatus de "Em andamento" (Agenda, 26/08/2026) — detalhe abaixo da
   etiqueta de status na Lista, e a linha de definição no formulário.
   `.hint` já era usada em convite.html sem nenhum CSS: ganhou estilo aqui em
   vez de uma classe nova, para não somar mais um nome para a mesma coisa. */
.substatus-rot{font-size:10px;color:var(--muted);margin-top:3px;font-weight:600}
.hint{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.35}
/* Chips de substatus no filtro: recuados sob "Em andamento", para a tela
   dizer sozinha que um depende do outro (Agenda, 26/08/2026). */
.chips.sub-de-status{margin-top:6px;padding-left:14px;border-left:2px solid var(--line)}

/* Filtros salvos da Agenda (26/08/2026) — botão no canto do painel de filtros
   e o painel que ele abre. */
.fs-lista{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.fs-item{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  border-radius:20px;padding:4px 6px 4px 12px;background:var(--card);font-size:12px}
.fs-item a{color:var(--ink);text-decoration:none;font-weight:600}
.fs-item a:hover{color:var(--cyan-600)}
.fs-item form{display:inline;margin:0}
.fs-x{border:0;background:none;color:var(--muted);cursor:pointer;font-size:12px;line-height:1;padding:2px 4px}
.fs-x:hover{color:var(--red)}
.fs-salvar{display:flex;gap:8px;flex-wrap:wrap}
.fs-salvar input{flex:1;min-width:220px;border:1px solid var(--line);border-radius:9px;
  padding:8px 12px;font-size:12px;outline:0;background:var(--card);color:var(--ink)}
.fs-salvar input:disabled{opacity:.55;cursor:not-allowed}
.fs-vazio{font-size:12px;color:var(--muted);margin:8px 0 0}

/* =========================================================================
   CÉLULA DO CATÁLOGO DE MÉTRICAS (Item 13, 02/09/2026)
   Prefixo `metrica-`, e não `cp-` (Campanhas): o widget
   `templates/widgets/_celula_metrica.html` é usado por qualquer tela, e
   herdar o prefixo de UMA tela é o que produziu wa-tabela/tp-tabela/crm-tabela
   (ver o topo de CLAUDE.md). `.lab`/`.num` dentro dele são os mesmos do
   `card stat` — a célula reusa a tipografia do cartão de KPI de propósito,
   para o número não mudar de tamanho conforme a tela em que aparece.
   ========================================================================= */
.metrica-celula{display:flex;flex-direction:column;gap:2px}
.metrica-celula .lab{display:flex;align-items:center;gap:6px;color:var(--muted);
  font-size:12px;font-weight:600}
/* 28px, o mesmo `.stat .num`: o comentário acima já dizia que esta célula reusa
   a tipografia do cartão de KPI "para o número não mudar de tamanho conforme a
   tela em que aparece" — e mesmo assim eram 24 aqui e 30 lá. Agora são o mesmo
   degrau de verdade. */
.metrica-celula .num{font-size:28px;font-weight:800;letter-spacing:-.4px;margin-top:4px}
.metrica-selo{margin-top:5px}
.metrica-link{color:var(--muted);text-decoration:none;border-bottom:1px dotted var(--line)}
.metrica-link:hover{color:var(--cyan-600)}
.metrica-avisos{margin:6px 0 0;padding-left:15px;color:var(--muted);font-size:12px;line-height:1.45}

/* O DESENHO DE REFERENCIA DO CHAT — vale para as TRES telas de conversa.
   Nasceu no SAC em 05/09, medido contra as imagens do WhatsApp que o escritorio
   mandou, e ficou escopado em `.chat-tela.sac` enquanto so ele estava
   autorizado. No mesmo dia o escritorio pediu o CRM "100% fiel ao design de
   referencia do chat", entao o `.sac` saiu: `.chat-bolha` so existe em
   _bolha_sac.html, _bolha_crm.html e _bolha_local.html, e as tres devem parecer
   a mesma coisa. Um quarto template que use `.chat-bolha` entra aqui de graca —
   que e o comportamento desejado, nao um efeito colateral. */
.chat-tela .chat-corpo{gap:0}
.chat-tela .chat-bolha{padding:6px 9px;margin-bottom:4px;border-radius:12px;
  max-width:75%;box-shadow:none}
.chat-tela .chat-bolha.entrada{background:var(--card);border-color:var(--line)}
/* A cor da saída diz DE ONDE a mensagem saiu — `models.OrigemMensagem`, posta
   na classe por `_bolha_crm.html`. O verde continua sendo o envio do CRM, que é
   o caso comum; âmbar é a IA, cinza quente é o que alguém mandou pelo
   aplicativo do WhatsApp. Os tokens já trazem a versão escura, então não há
   regra `html.escuro` aqui: uma só definição por cor. */
.chat-tela .chat-bolha.saida{background:var(--bolha-nos);border-color:var(--bolha-nos-b)}
.chat-tela .chat-bolha.saida.ia{background:var(--bolha-ia);border-color:var(--bolha-ia-b)}
.chat-tela .chat-bolha.saida.externo{background:var(--bolha-fora);border-color:var(--bolha-fora-b)}
/* Selo de origem no rodapé: só IA e aplicativo do WhatsApp o ganham. Envio do
   CRM não ganha nada — a ausência é o sinal, e é o caso mais frequente. */
.chat-tela .bolha-pe .bolha-origem{display:inline-flex;align-items:center;color:var(--chip-fg);opacity:.7}
.chat-tela .chat-bolha .bolha-de{font-size:12px;font-weight:600;color:var(--cyan-600);
  margin-bottom:1px;line-height:1.25}
.chat-tela .chat-bolha .chat-txt{font-size:13px;color:var(--ink);line-height:1.35;display:block}
.chat-tela .chat-bolha .bolha-pe{display:flex;align-items:center;justify-content:flex-end;
  gap:4px;font-size:11px;line-height:1.1;color:var(--chip-fg);margin-top:1px}

.chat-tela .chat-bolha{position:relative}
.chat-tela .reagir-abrir{position:absolute;top:2px;right:-26px;width:22px;height:22px;
  border:0;background:none;padding:0;cursor:pointer;opacity:0;transition:opacity .12s;
  font-size:14px;line-height:1}
.chat-tela .chat-bolha.saida .reagir-abrir{right:auto;left:-26px}
.chat-tela .chat-bolha:hover .reagir-abrir,
.chat-tela .reagir-abrir:focus-visible{opacity:.65}
.chat-tela .reagir-abrir:hover{opacity:1}
.chat-tela .reagir-pop{position:absolute;bottom:calc(100% + 6px);left:8px;z-index:20;
  display:flex;align-items:center;gap:6px;background:#11201c;border-radius:20px;
  padding:6px 12px;box-shadow:0 6px 18px rgba(0,0,0,.28);
  opacity:0;transform:scale(.92);transform-origin:bottom left;pointer-events:none;
  transition:opacity .12s ease,transform .12s ease}
.chat-tela .chat-bolha.saida .reagir-pop{left:auto;right:8px;transform-origin:bottom right}
.chat-tela .reagir-pop.aberto{opacity:1;transform:scale(1);pointer-events:auto}
.chat-tela .reagir-pop button{border:0;background:none;padding:0 1px;cursor:pointer;
  font-size:18px;line-height:1;transition:transform .1s}
.chat-tela .reagir-pop button:hover{transform:scale(1.25)}
.chat-tela .reagir-pop .mais{width:22px;height:22px;border-radius:50%;color:#fff;
  font-size:17px;display:grid;place-items:center}
/* As ações vão para a esquerda e a hora fica na direita. Quem empurra é o
   PRIMEIRO controle, não "todo form": no SAC só existe o form de apagar, mas no
   Chats do CRM o "Responder" vem antes dele — com a regra no form, abria-se um
   vão no meio do rodapé. `.chat-status` (o tique) não entra: ele é da direita. */
.chat-tela .bolha-pe > form:first-child,
.chat-tela .bolha-pe > .msg-acao:first-child{margin-right:auto}
.chat-tela .bolha-pe .msg-acao{opacity:0;transition:opacity .12s}
.chat-tela .chat-bolha:hover .bolha-pe .msg-acao{opacity:.6}
.chat-tela .bolha-pe .msg-acao:hover{opacity:1}
.chat-tela.sac .chat-painel .card .card-aviso{text-align:center;font-size:10px;line-height:1.45;
  padding:5px 12px;border-top:1px solid var(--line)}
.chat-tela.sac .chat-painel .card .card-aviso.erro{color:var(--red)}
.chat-tela.sac .chat-painel .card .card-aviso.ok{color:var(--green)}

/* Tema escuro das telas de conversa (Chats do CRM, Card do lead e SAC).
   No escuro o `tema.css` inverte o papel de --navy e --cyan: lá eles viram
   claros, porque servem de COR DE TEXTO. Quem os usa como FUNDO com letra
   branca — avatar, selo de não lidas, botão primário — fica branco sobre
   claro. Medido nas duas telas do CRM: avatar 1,27 (50 ocorrências na lista),
   selo 2,94, botão "Aplicar" 2,14. O mínimo recomendado é 4,5.
   A correção troca só a COR DA LETRA, mantendo o fundo que cada elemento já
   tem — o desenho não muda, só volta a ser legível. Escopado em `.chat-tela`
   de propósito: o mesmo defeito existe em outras telas e não foi autorizado
   mexer nelas nesta rodada. */
html.escuro .chat-tela .conv-av,
html.escuro .chat-tela .chat-badge,
html.escuro .chat-tela .clt-cont{color:#0b1a13}

/* BOTAO PRIMARIO DAS TELAS DE CONVERSA — uma regra so, para as tres telas.
   Antes eram tres blocos separados (painel do SAC, campo de escrever, lista),
   e o resto ficava com o `var(--cyan)` do botao padrao do sistema: medido no
   Chats do CRM, a mesma tela tinha "Aplicar" em #7a6949, "Salvar" em #493f10 e
   "Enviar" em #16302a — tres cores para a mesma acao. A referencia do chat tem
   uma: o verde do menu. `.ghost` e `.danger` ficam de fora, que sao os outros
   dois papeis de botao do sistema.
   No escuro --navy vira claro (la ele e cor de texto), entao o fundo passa a
   ser --green com letra escura — mesma logica ja aplicada nos selos. */
/* Os dois seletores nao sao redundancia: o `tema.css` carrega DEPOIS deste
   arquivo e tem `.btn:not(.ghost):not(.danger):not(.sm)` no oliva da marca,
   com a MESMA especificidade (0,4,0) da primeira linha aqui — no empate quem
   vem depois ganha, e era por isso que "Salvar" e "Enviar" continuavam #493f10
   enquanto "Aplicar" (que e `.sm`, fora daquela regra) ja obedecia. A segunda
   linha repete o `:not(.sm)` so para subir a especificidade para 0,5,0 e
   passar na frente. Mexeu no `tema.css`? Confira este par. */
.chat-tela .btn:not(.ghost):not(.danger),
.chat-tela .btn:not(.ghost):not(.danger):not(.sm){background:var(--navy);
  border-color:var(--navy);color:#fff}
.chat-tela .btn:not(.ghost):not(.danger):hover,
.chat-tela .btn:not(.ghost):not(.danger):not(.sm):hover{background:var(--navy-700);
  border-color:var(--navy-700)}
html.escuro .chat-tela .btn:not(.ghost):not(.danger),
html.escuro .chat-tela .btn:not(.ghost):not(.danger):not(.sm){background:var(--green);
  border-color:var(--green);color:#0b1a13}
html.escuro .chat-tela .btn:not(.ghost):not(.danger):hover,
html.escuro .chat-tela .btn:not(.ghost):not(.danger):not(.sm):hover{background:#6fb896;
  border-color:#6fb896;color:#0b1a13}

/* O rodape do balao tem UMA linha de 12px — e a hora que manda a altura. Os
   icones de acao vinham com o tamanho de fora (14 e 15px) e esticavam a linha
   para 17,1px: cinco pixels a mais em CADA balao, 225px de rolagem extra numa
   conversa de 45 mensagens. No SAC isso nao aparecia porque a tela conferida
   nao tinha balao de saida, que e o unico com acao. */
.chat-tela .bolha-pe .msg-acao{display:inline-flex;align-items:center;
  height:12px;line-height:1;padding:0 2px}
.chat-tela .bolha-pe .msg-acao svg{width:12px;height:12px;display:block}
.chat-tela .bolha-pe form{display:inline-flex;align-items:center}

/* Topo do chat do lead: foto, busca dentro da conversa e o botão de baixar.
   A foto vem de `/crm/leads/{id}/foto` e nunca falha — sem imagem, a rota
   devolve as iniciais. O `.o3-quem` continua com `flex:1`, então busca e botão
   encostam na direita sozinhos, como no SAC. */
/* Só geometria: as cores, o `.ico` e o input vêm do `.clt-busca`, que é o campo
   de busca já eleito do chat. Modelo de campo novo não se inventa. */
.chat-tela .o3-achados{display:flex;align-items:center;gap:8px;padding:6px 18px;
  font-size:11.5px;color:var(--muted);background:var(--bg);
  border-bottom:1px solid var(--line)}
.chat-tela .o3-achados b{color:var(--navy)}
.chat-tela .o3-achados a{margin-left:auto;color:var(--cyan-600)}

.chat-tela{--filtro-bg:#e3f6ed;--filtro-fg:var(--green);--chip-bg:var(--bg);--chip-fg:#4d534e}
html.escuro .chat-tela{--filtro-bg:#132b23;--chip-bg:#242a27;--chip-fg:#c3c8c4}
.chat-tela .clt-filtro,
html.escuro .chat-tela .clt-filtro,
.chat-tela .clt-preset[aria-selected="true"],
html.escuro .chat-tela .clt-preset[aria-selected="true"]{background:var(--filtro-bg);
  color:var(--filtro-fg)}
.chat-tela .lista-etapa,
.chat-tela .tag.gray,
.chat-tela .lc-tag,
html.escuro .chat-tela .tag.gray,
html.escuro .chat-tela .lc-tag{background:var(--chip-bg);color:var(--chip-fg);
  border-color:var(--line)}
html.escuro .chat-tela input,
html.escuro .chat-tela select,
html.escuro .chat-tela textarea{background:var(--bg);color:var(--ink);border-color:var(--line)}
html.escuro .chat-tela .lp-titulo{background:transparent;color:var(--ink)}

/* `.chat-frame` saiu em 07/09/2026: o composer do CRM passou a ser o do SAC,
   exatamente igual, e o SAC nunca teve essa moldura.

   O SELETOR PRECISOU PERDER O `.chat-frame` JUNTO, e essa era a armadilha: a
   base `.chat-caixa-extra` so tem `max-height`, `opacity` e `overflow` -- o
   `display:flex` morava AQUI. Sem o wrapper no HTML, a regra parou de casar,
   a barra virou bloco e os dez botoes empilharam um por linha, 102px de altura.
   Nenhum erro, nenhum aviso: so a barra errada. (O SAC nao sentiu porque
   `_grupo_aberto.html` traz o `display:flex` num `style=` inline.) */
.chat-tela .chat-caixa-extra{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.chat-tela .chat-caixa:focus-within .chat-caixa-extra{border-top:1px solid var(--line)}
.chat-tela.crm .chat-form{height:auto;min-height:38px}
.chat-tela .chat-form textarea:focus,
.chat-tela .chat-form textarea:focus-visible{outline:0;box-shadow:none}
.chat-tela .chat-form-tag{margin-left:auto;font-size:11px;color:var(--muted);
  font-variant-numeric:tabular-nums;padding-left:8px}
.chat-tela .chat-extra-dir .btn.ghost.sm{width:28px;height:28px;padding:0;
  justify-content:center;border-radius:5px}
.chat-tela .chat-extra-dir .btn.ghost.sm.on{background:var(--bg);border-color:var(--navy);
  color:var(--navy)}
.chat-tela .chat-extra-dir .ia-menu,
.chat-tela .chat-extra-dir form.inline,
.chat-tela .chat-extra-dir .chat-anexo-form{display:flex;align-items:center;margin:0}


/* ======================= ONDA 3 — A LINHA UNICA ==========================
   Ordem do print, da esquerda para a direita: avisos da IA, + Compromisso,
   + Contrato, lupa, baixar. Eram duas faixas empilhadas (38px + 37px); agora
   sao uma, e a busca empurra o baixar para a direita sozinha. */
/* Todo botao da linha com o conteudo centrado e altura unica -- o print pediu
   "informacoes de cada botao alinhadas ao centro". */
.chat-tela .o3-bt{display:inline-flex;align-items:center;justify-content:center;
  gap:5px;height:28px;flex:0 0 auto}
.chat-tela .o3-so-ic{width:28px;padding:0;gap:0}
.chat-tela .o3-so-ic .ico{margin-right:0}
/* A busca virou simbolo + pop. O `margin-left:auto` mudou de dono: era do
   campo, agora e da CAIXA -- com o campo escondido, o `auto` no elemento
   oculto nao empurra nada, e a lupa e o baixar ficavam colados no Contrato. */
.chat-tela .o3-busca-caixa{margin-left:auto;position:relative;flex:0 0 auto}
.chat-tela .o3-so-ic.on{border-color:var(--cyan);color:var(--cyan-600)}
.chat-tela .o3-busca-pop{position:absolute;top:32px;right:0;z-index:30;padding:8px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 12px 32px rgba(23,23,23,.16)}
/* A busca acontece na pagina (07/09/2026): marcacao, contagem e as duas setas.
   A cor NAO e um token novo: e o par que o sistema ja usa em `.tag orange`
   (fundo #fdf0e0 sobre `var(--orange)`, e o mesmo rgba no tema escuro). O
   resultado ATUAL ganha CONTORNO em vez de outra cor -- inventar um segundo
   amarelo so para "o de agora" e o caminho curto para uma paleta paralela. */
.chat-tela .o3-busca-pop{align-items:center;gap:6px}
.chat-tela mark.o3-hit{background:#fdf0e0;color:var(--orange);
  border-radius:3px;padding:0 1px}
html.escuro .chat-tela mark.o3-hit{background:rgba(217,154,69,.16)}
.chat-tela mark.o3-hit.atual{outline:2px solid var(--orange);outline-offset:1px}
.chat-tela .o3-busca-conta{font-size:11px;color:var(--muted);white-space:nowrap;
  min-width:44px;text-align:right;flex:0 0 auto}
.chat-tela .o3-busca-conta.vazio{color:var(--red)}
.chat-tela .o3-busca-nav{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;padding:0;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--card);color:var(--muted);cursor:pointer;flex:0 0 auto}
.chat-tela .o3-busca-nav:hover:not(:disabled){color:var(--navy);border-color:var(--navy)}
.chat-tela .o3-busca-nav:disabled{opacity:.4;cursor:default}
.chat-tela .o3-busca-nav:focus-visible{outline:0;box-shadow:0 0 0 3px var(--anel-foco)}
.chat-tela .o3-busca-pop .o3-busca{display:flex;align-items:center;gap:6px;width:230px;
  max-width:60vw;height:28px;padding:0 10px}

/* Os avisos da IA, na ordem do print: robo SEM COR, chave, avisos. */
/* Uma linha so, de novo -- e agora sem frase. O aviso escrito desconfigurava
   a faixa das duas maneiras que tentei: em duas linhas ela ia de 38px para
   55px; em uma so, empurrava Compromisso e Contrato para fora em tela
   estreita. O escritorio resolveu: triangulo de exclamacao, e o texto no
   `title`. Largura fixa em vez de porcentagem -- sao tres icones. */
.chat-tela .o3-ia{display:inline-flex;align-items:center;gap:6px;flex:1 1 auto;min-width:160px}
.chat-tela .o3-ia-robo{display:inline-flex;color:var(--muted)}
/* Chave de verdade (nao um botao com texto): verde ligada, cinza desligada. */
.chat-tela .o3-chave{width:26px;height:15px;padding:0;border:0;border-radius:20px;
  background:var(--green);cursor:pointer;display:inline-flex;align-items:center;
  transition:background .15s ease;flex:0 0 auto}
.chat-tela .o3-chave > span{width:11px;height:11px;border-radius:50%;background:#fff;
  margin-left:13px;transition:margin .15s ease}
.chat-tela .o3-ia.off .o3-chave{background:var(--muted)}
.chat-tela .o3-ia.off .o3-chave > span{margin-left:2px}
.chat-tela .o3-chave:focus-visible{outline:0;box-shadow:0 0 0 3px var(--anel-foco)}
/* Duas classes, e nao uma: a IA para de responder por DOIS motivos, e eles nao
   pedem a mesma aparencia.
   `off` e o estado da CHAVE -- cinza, botao a esquerda -- e vale para os dois.
   `apagada` e so o lead interrompido pela perda: ai a linha inteira fica
   transparente e NENHUM aviso aparece, que e o "menos chamativa possivel" do
   print levado a serio (sem IA ligada nao ha o que avisar).
   Quando quem calou foi a PROPRIA IA, a linha NAO apaga: e justamente a hora do
   triangulo laranja, e `opacity:.5` no pai o apagaria junto -- opacidade de
   filho nao sobe acima da do pai. */
.chat-tela .o3-ia.apagada{opacity:.5}
.chat-tela .o3-ia.travada .o3-chave{cursor:not-allowed;opacity:.55}
.chat-tela .o3-ia.automacoes:not(.off) .o3-chave{background:var(--automacao)}
.chat-tela .lp-linha select.ia-sem-resposta{color:var(--erro-texto);border-color:var(--erro-texto)}
.chat-tela .o3-trava{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);white-space:nowrap}
/* O aviso da IA pisca UMA vez ao abrir a tela quando ela chamou você (`.o3-ia-info.alerta`). */
@keyframes o3PiscaAlerta{50%{opacity:.25}}
@media (prefers-reduced-motion: reduce){
  .o3-ia-info.alerta{animation:none}
}



/* ==================== RESPONSIVIDADE DAS TRES COLUNAS ====================
   Pedido de 07/09/2026: "respeite a responsividade de cada uma das colunas para
   nao quebrar". O que quebra aqui nao e a largura da coluna -- a divisoria ja
   cuida dela -- e sim o CONTEUDO que se recusa a encolher dentro dela.

   `min-width:0` em item de flex/grid: sem ele o item usa a largura do conteudo
   como minimo, e `text-overflow:ellipsis` nunca dispara. E o motivo classico de
   uma coluna empurrar a vizinha para fora da tela. */
.chat-tela .lp-linha{min-width:0}
.chat-tela .lp-linha > *{min-width:0}
/* O `.lp-linha` e 135px + resto. Abaixo de ~300px de painel, 135px de rotulo
   nao deixam espaco para o valor: as duas passam a empilhar. */
@media (max-width: 1100px){
  .chat-tela .lp-linha,.chat-tela .aba-contrato .ac-honorarios .fld{grid-template-columns:110px 1fr}
}
.chat-tela .lp-campos{min-width:0}
.chat-tela .lp-fixo{min-width:0;overflow-wrap:anywhere}
/* Painel estreito: o titulo e o apelido cortam com reticencias em vez de
   esticar a coluna. */
.chat-tela .lp-topo{min-width:0}
@container (max-width: 300px){
  .chat-tela .o3-ia{max-width:100%}
}


/* ---- O composer do CRM e o do SAC: os icones a mais usam .chat-ferr-ic ----
   Eram `.btn ghost sm` (botao com borda e 28px). Com dez deles em fila a barra
   do CRM parecia outra tela ao lado da mesma barra no SAC. */
.chat-tela.crm .chat-caixa-extra .chat-ferr-ic.on{color:var(--navy);background:var(--bg)}
.chat-tela.crm .ia-menu{position:relative;display:inline-flex}
.chat-tela.crm .ia-opcoes{position:absolute;bottom:30px;right:0;z-index:30;min-width:210px;
  display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:0 12px 32px rgba(23,23,23,.16);overflow:hidden}
.chat-tela.crm .ia-opcoes[hidden]{display:none}
.chat-tela.crm .ia-opcao{display:flex;flex-direction:column;gap:1px;align-items:flex-start;
  padding:7px 11px;font:inherit;font-size:12px;text-align:left;background:0;border:0;
  color:var(--ink);cursor:pointer;text-decoration:none}
.chat-tela.crm .ia-opcao:hover{background:var(--bg)}

/* ===== Publicações: o prazo vira modal, e o topo devolve altura à mesa =====
   Escopado em `.pub-main` (posto no `{% block classe_main %}` de
   publicacoes.html) de propósito: `.main` é de TODAS as telas, e apertar o
   padding lá mexeria em cadastro, agenda e financeiro juntos. */
.main.pub-main{padding:8px 10px}

.tecla{font-family:ui-monospace,monospace;font-size:10px;border:1px solid var(--line);
  border-radius:4px;padding:1px 5px;background:var(--bg);color:var(--ink)}

/* o modal cresce com o conteudo, mas nunca passa da janela: o miolo rola. */
.modal.largo .mb{max-height:calc(100vh - 220px);overflow-y:auto}

/* ===========================================================================
   Conteúdos Pagos — a tela `/conteudos-pagos`.

   Nasceu como folha própria (`conteudos_pagos.css`) em 12/09/2026 e veio para
   cá no merge do mesmo dia: `test_css_consolidada` cobra que folha pedida por
   UMA tela mora no app.css, e "de área" quer dizer duas telas ou mais. Tudo
   continua escopado por `body.cp`, que é o que impede de virar regra do
   sistema.

   A MUDANÇA DE ORDEM FOI MEDIDA antes, e não deduzida. Como folha própria, ela
   entrava pelo `{% block folhas %}`, DEPOIS de tema.css e celular.css; aqui ela
   entra antes das duas. Conferidas as 140 regras contra as duas folhas,
   procurando par que declare a MESMA propriedade sobre o MESMO seletor-chave
   com especificidade igual ou maior: zero. O instrumento foi conferido contra o
   app.css, onde ele acha 175 pares que se tocam — não estava devolvendo zero
   por estar quebrado. Em relação ao próprio app.css nada muda: este bloco é o
   último do arquivo, que é a mesma posição que a folha separada tinha.

   Duas réguas mandam no arquivo:

   GUTTER = 15px — o mesmo do `.card .hd`. Cabeçalho do cartão, barra de
     seleção, células da tabela, subtela e rodapé começam todos aqui. É o que
     faz a margem esquerda ser uma linha reta de cima a baixo.

   ESCALA = 12 / 10px — degraus da régua do sistema (h4 e h5), não valores
     próprios desta tela. O degrau de 8px que ela teve em 12/09/2026 subiu para
     10px em 16/09/2026, com o piso da TIPO-04; o histórico está no
     ATUALIZACOES.md.
   =========================================================================== */

/* --- a escala, uma vez só ------------------------------------------------ */
body.cp .card .hd h3 { font-size: 12px; }
body.cp .tag { padding: 3px 8px; }
body.cp .ph-mini { font-size: 10px; }
body.cp .cal-chip { font-size: 10px; padding: 4px 10px; }
body.cp .fld-dica { font-size: 10px; margin-top: 4px; }

/* `m.campo` emite `.fld`; a tela não redesenha o campo, só reafina a régua */
body.cp .fld { margin-bottom: 0; }
body.cp .fld label { font-size: 10px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
body.cp .fld input, body.cp .fld select, body.cp .fld textarea {
  padding: 7px 9px; font-size: 10px; border-radius: var(--r-md); }

/* campo escrito à mão (linha nova e subtela, onde `m.campo` não cabe porque o
   rótulo e o campo moram em células diferentes da tabela) */
body.cp .cp-campo {
  width: 100%; box-sizing: border-box;
  border: var(--borda) solid var(--line); border-radius: var(--r-md);
  padding: 7px 9px; font-size: 10px; font-family: inherit; line-height: 1.3;
  color: var(--ink); background: var(--card); outline: 0;
}
body.cp .cp-campo:focus { border-color: var(--cyan); }
body.cp select.cp-campo { height: 30px; }
body.cp .cp-dica { font-size: 10px; color: var(--muted); margin-top: 4px; }
body.cp .cp-oculto { position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== FILTRO ============================================================ */
body.cp .cp-filtro { margin-bottom: var(--s-3); }
body.cp .cp-filtro > .hd { cursor: pointer; list-style: none; }
body.cp .cp-filtro > .hd::-webkit-details-marker { display: none; }
body.cp .cp-hd-acoes { display: flex; align-items: center; gap: var(--s-2); }
body.cp .cp-sum { font-size: 10px; color: var(--muted); }
body.cp .cp-chevron { color: var(--muted); display: inline-flex;
  transform: rotate(180deg); transition: transform .15s; }
body.cp .cp-filtro[open] > .hd .cp-chevron { transform: rotate(0deg); }

body.cp .cp-salvos {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  padding-bottom: var(--s-3); margin-bottom: var(--s-3);
  border-bottom: var(--borda) solid var(--line);
}
body.cp .cp-salvos-lab { font-size: 10px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; }
body.cp .cp-chip-add { font-weight: 700; cursor: pointer; }
body.cp a.cal-chip { text-decoration: none; }

/* busca: barra isolada, então o rótulo vai para dentro (placeholder) e o de
   fora fica só para o leitor de tela — §7.6 da spec de 03/09/2026 */
body.cp .cp-busca {
  width: 100%; box-sizing: border-box; margin-bottom: var(--s-4);
  border: var(--borda) solid var(--line); border-radius: var(--r-md);
  padding: 8px 11px; font-size: 10px; font-family: inherit;
  color: var(--ink); background: var(--card); outline: 0;
}
body.cp .cp-busca:focus { border-color: var(--cyan); }

body.cp .cp-cols { display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5); align-items: start; }
body.cp .cp-col > .ph-mini { margin-bottom: var(--s-2); }
body.cp .cp-col .cal-legenda { margin-bottom: var(--s-2); gap: 6px; }
body.cp .cp-mt { margin-top: var(--s-4); }

body.cp .cp-datas { display: flex; gap: var(--s-2); }
body.cp .cp-datas .fld { flex: 1 1 0; min-width: 0; }

body.cp .cp-radio { font-size: 10px; color: var(--muted); margin-top: var(--s-2);
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
body.cp .cp-radio label { display: inline-flex; align-items: center; gap: 4px; }
body.cp .cp-radio input { width: auto; margin: 0; }

body.cp .cp-check { font-size: 10px; color: var(--muted); display: inline-flex;
  align-items: center; gap: var(--s-2); margin-top: var(--s-2); cursor: pointer; }
body.cp .cp-check input { width: auto; margin: 0; }
body.cp .cp-check b { color: var(--ink); }

body.cp .cp-acoes { display: flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-5); padding-top: var(--s-3);
  border-top: var(--borda) solid var(--line); }
body.cp .cp-limpar { font-size: 10px; color: var(--muted);
  text-decoration: none; flex: 1; }
body.cp .cp-limpar:hover { color: var(--cyan-600); }

/* ===== BARRA DE SELEÇÃO ================================================== */
body.cp .cp-lote {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  padding: 9px 15px; background: var(--destaque);
  border-bottom: var(--borda) solid var(--line);
  box-shadow: inset var(--barra-acento) 0 0 var(--cyan);
  font-size: 10px; color: var(--ink);
}
body.cp .cp-lote label { color: var(--muted); }
body.cp .cp-lote-sep { width: 1px; height: 15px; background: var(--line); }
body.cp .cp-lote-campo { border: var(--borda) solid var(--line);
  border-radius: var(--r-md); padding: 5px 8px; font-size: 10px;
  font-family: inherit; background: var(--card); color: var(--ink); }

/* ===== TABELA ============================================================ */
body.cp .cp-rolagem { overflow-x: auto; }
/* d3 (17/09/2026): sem isto, o `.cp-rolagem` rola por dentro (confirmado por
   `scrollLeft`) mas o `overflow-x:auto` sozinho não impede que o `layout overflow`
   da tabela (`.cp-tb`, min-width:1040px) suba até `documentElement` — o corpo
   e todo o resto da árvore já mediam contidos (clientWidth = innerWidth), só o
   `<html>` reportava `scrollWidth` de 1040-e-tantos e rolava a PÁGINA inteira a
   375px e 768px. `contain: layout` isola esse cálculo no próprio contêiner.

   Duas coisas medidas antes de escolher isto (revisão de 17/09/2026):
   1) NÃO é a causa clássica de item de grid sem `min-width:0` — `.main` é
      item do grid `.app`, mas já chegava com `clientWidth == innerWidth`
      SEM nenhum `min-width:0`; forçar `min-width:0` nele, sozinho, não
      mudou o `scrollWidth` de `documentElement` (continuou 1023/1029 a
      375/768px). Só `contain: layout` corrigiu.
   2) `contain: layout` faz de `.cp-rolagem` o bloco de contenção dos
      descendentes `position:absolute/fixed` — únicos dentro dele são
      `.cp-abre` (a cada linha) e, quando a linha abre, `.cp-form`/
      `.cp-det-pe` (`position:sticky`, escopados à própria rolagem). Medido
      com Playwright, `getBoundingClientRect()` de TODO elemento não-static
      da tela, com linha fechada e com linha aberta, nas 3 larguras, com e
      sem esta regra: zero diferença de posição em qualquer um — inclusive
      nos de fora do `.cp-rolagem` (`.cp-mais`, `.cp-oculto`, o menu). */
body.cp .cp-rolagem { contain: layout; }
body.cp .cp-tb { min-width: 1040px; }
body.cp .cp-tb th, body.cp .cp-tb td { padding: 9px 10px; font-size: 12px;
  vertical-align: middle; }
body.cp .cp-tb th { font-size: 10px; padding-top: 8px; padding-bottom: 8px;
  background: var(--linha-cabecalho); }
body.cp .cp-tb th:first-child, body.cp .cp-tb td:first-child { padding-left: 15px; }
body.cp .cp-tb th:last-child,  body.cp .cp-tb td:last-child  { padding-right: 15px; }
body.cp .cp-tb tbody tr:last-child td { border-bottom: 0; }

body.cp .cp-cx { width: 34px; }
body.cp .cp-cx input { width: auto; margin: 0; cursor: pointer; display: block; }
body.cp .cp-col-area { width: 74px; }
body.cp .cp-col-quem { width: 200px; }
body.cp .cp-col-cod  { width: 118px; }
body.cp .cp-col-plat { width: 96px; }
body.cp .cp-col-fmt  { width: 128px; }
body.cp .cp-col-sit  { width: 104px; }
body.cp .cp-acao-col { width: 86px; }
body.cp .cp-fim { text-align: right; }

body.cp .cp-tese { font-weight: 600; color: var(--ink); line-height: 1.35; }
body.cp .cp-obs  { font-size: 10px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
body.cp .cp-quem { color: var(--ink); }
body.cp .cp-slug { font-size: 10px; color: var(--cyan-600); word-break: break-all; }
body.cp .cp-plat { font-weight: 600; color: var(--navy); }
body.cp .cp-fmt  { color: var(--muted); }

body.cp .cp-cod { font-family: var(--fonte-mono); font-size: 10px; font-weight: 600;
  background: var(--bg); border: var(--borda) solid var(--line);
  border-radius: var(--r-sm); padding: 3px 8px; display: inline-block;
  white-space: nowrap; }
body.cp .cp-cod-novo { background: var(--destaque); border-color: var(--cyan);
  color: var(--cyan-600); }

body.cp .cp-ver { border: var(--borda) solid var(--line); background: var(--card);
  cursor: pointer; border-radius: var(--r-sm); width: 24px; height: 24px;
  color: var(--muted); padding: 0; display: inline-flex;
  align-items: center; justify-content: center; }
body.cp .cp-ver:hover { border-color: var(--cyan); color: var(--cyan-600); }

/* ===== ABRIR E FECHAR, SEM SCRIPT =========================================
   A seta da linha, o "Novo conteúdo" e a barra de seleção abrem por CAIXA
   MARCADA, não por JavaScript.

   O motivo é medido, não preferência: o arquivo estático que o escritório abre
   para conferir não executa script, e a tela chegava morta — clicar na seta não
   abria a subtela. Com `:has()` a MESMA marcação serve à tela viva e à prévia,
   não existem dois mecanismos para a mesma coisa, e a subtela passa a abrir
   pelo teclado de graça (a caixa é controle de verdade, só invisível).

   Por isso nenhum destes três nasce com o atributo `hidden`: `[hidden]` do
   app.css é `!important` e venceria a regra de abrir. Quem esconde aqui é o
   `display:none` abaixo.

   `:has()` é do navegador, não da tela — Safari 15.4+, Chrome 105+, Firefox
   121+. Abaixo disso a subtela fica FECHADA, que é o lado seguro de falhar. */
body.cp .cp-detalhe,
body.cp .cp-nova,
body.cp .cp-lote { display: none; }

body.cp .cp-linha:has(.cp-abre:checked) + .cp-detalhe { display: table-row; }
body.cp:has(.cp-mais:checked) .cp-nova { display: table-row; }
body.cp .card:has(.cp-marca:checked) .cp-lote { display: flex; }

/* a barra de acento marca a linha aberta E a subtela: são um bloco só */
body.cp .cp-linha:has(.cp-abre:checked) td,
body.cp .cp-linha:has(.cp-marca:checked) td { background: var(--destaque); }
body.cp .cp-linha:has(.cp-abre:checked) td:first-child {
  box-shadow: inset var(--barra-acento) 0 0 var(--cyan); }
/* a seta vira, para a linha dizer sozinha que está aberta */
body.cp .cp-linha:has(.cp-abre:checked) .cp-ver .ico { transform: rotate(180deg); }

body.cp .cp-ver .ico { transition: transform .15s; }
body.cp .cp-abre, body.cp .cp-mais { position: absolute; opacity: 0;
  width: 1px; height: 1px; pointer-events: none; }
body.cp label.cp-mais-bt { cursor: pointer; }

body.cp .cp-nova td { background: var(--destaque); vertical-align: top; }
body.cp .cp-nova td:first-child { box-shadow: inset var(--barra-acento) 0 0 var(--green); }
/* o chip do código e a etiqueta descem para a linha de base dos campos */
body.cp .cp-nova .cp-cod, body.cp .cp-nova .tag { margin-top: 5px; }

/* ===== SUBTELA =========================================================== */
body.cp .cp-detalhe td { background: var(--destaque); padding: 0 15px 14px 15px;
  box-shadow: inset var(--barra-acento) 0 0 var(--cyan); }

body.cp .cp-form { background: var(--card); border: var(--borda) solid var(--line);
  border-radius: var(--r-md); padding: var(--s-4); }

body.cp .cp-tres { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3) var(--s-4); align-items: start; }

body.cp .cp-f, body.cp .cp-sub { display: flex; flex-direction: column;
  gap: 4px; min-width: 0; }
body.cp .cp-f > label, body.cp .cp-sub > label { font-size: 10px; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
  line-height: 1.4; }
body.cp .cp-f textarea.cp-campo { resize: vertical; line-height: 1.45; height: 30px; }

/* curtos: a caixa encolhe, a BORDA ESQUERDA continua na coluna */
body.cp .cp-curto .cp-campo { max-width: 140px; }
body.cp .cp-num { text-align: right; }

/* Início e Fim dividem a PRIMEIRA coluna — o par não sai dela */
body.cp .cp-par { display: flex; gap: var(--s-2); min-width: 0; }
body.cp .cp-par > .cp-sub { flex: 1 1 0; }
body.cp .cp-par .cp-campo { max-width: 150px; }

/* orçamento diário: tem a altura e a régua de um campo, mas é conta, não entrada */
body.cp .cp-auto { display: block; background: var(--bg); border-style: dashed;
  color: var(--navy); font-weight: 600; }

body.cp .cp-det-pe { display: flex; align-items: center; gap: var(--s-3);
  padding-top: var(--s-3); }
body.cp .cp-det-pe .cp-dica { margin-top: 0; flex: 1; }
body.cp .cp-inativar:hover { color: var(--red); }

/* ===== INATIVA =========================================================== */
/* linha inativa: apagada, mas legível — o código dela continua reservado */
body.cp .cp-inativa td { background: var(--bg); }
body.cp .cp-inativa .cp-tese, body.cp .cp-inativa .cp-quem,
body.cp .cp-inativa .cp-plat, body.cp .cp-inativa .cp-cod { color: var(--muted); }

/* ===== RODAPÉ ============================================================ */
body.cp .cp-rodape { display: flex; align-items: center; gap: var(--s-2);
  padding: 10px 15px; border-top: var(--borda) solid var(--line);
  font-size: 10px; color: var(--muted); }
body.cp .cp-pag { border: var(--borda) solid var(--line); border-radius: var(--r-sm);
  padding: 3px 9px; background: var(--card); font-size: 10px; cursor: pointer;
  font-family: inherit; color: var(--muted); }
body.cp .cp-pag.on { color: var(--ink); font-weight: 600; }
/* O paginador virou LINK em 13/09/2026 (página é endereço, não estado de
   script), e `<a>` não herda cor nem sublinhado destas regras — daí as duas
   linhas abaixo. `.off` é a ponta inerte: `<span>` no lugar do link quando não
   há para onde ir, em vez de link morto. */
body.cp a.cp-pag { text-decoration: none; display: inline-block; }
body.cp .cp-pag.off { opacity: .45; cursor: default; }

/* ===========================================================================
   TELA ESTREITA

   Os cortes são os do sistema — **900 / 600 / 400**, os mesmos do
   `celular.css` —, mais um de 1200px que o `app.css` também já usa. Inventar
   um corte próprio (o 1180px que estava aqui) faz a tela quebrar meio passo
   antes das outras, e quem mede o sistema acha quatro réguas em vez de uma.

   A tabela **continua rolando na horizontal dentro do cartão**, e isso é
   decisão do escritório de 03/09/2026 (§7.1: "rolagem lateral garantida em
   qualquer largura de tela"), não omissão. Nove colunas não viram cartões
   empilhados: o que a pessoa compara nesta tela é linha contra linha.

   O que a página nunca faz é rolar na horizontal — quem rola é só o `.cp-rolagem`.
   =========================================================================== */

/* --- 1200px: as grades de 4 e de 3 caem para 2 -------------------------- */
@media (max-width: 1200px) {
  body.cp .cp-cols { grid-template-columns: repeat(2, 1fr); }
  body.cp .cp-tres { grid-template-columns: repeat(2, 1fr); }
}

/* --- 900px: a barra lateral já virou gaveta; a subtela precisa parar de
       acompanhar a rolagem da tabela ------------------------------------- */
@media (max-width: 900px) {
  /* A subtela mora numa célula de `colspan=9`, então nasce com a largura da
     tabela (1040px). Num telefone isso obrigaria a rolar para a direita só
     para ver um formulário. `sticky left:0` prende os dois blocos na borda
     esquerda da janela enquanto a tabela rola por baixo, e a largura passa a
     ser a da janela, não a da tabela. */
  body.cp .cp-detalhe > td > .cp-form,
  body.cp .cp-detalhe > td > .cp-det-pe {
    position: sticky; left: 0;
    width: min(100%, calc(100vw - 44px));
    box-sizing: border-box;
  }
  /* o cabeçalho do cartão tem três controles; sem isto o "Novo conteúdo"
     escapa para fora da borda em vez de descer uma linha */
  body.cp .card > .hd { flex-wrap: wrap; row-gap: var(--s-2); }
  body.cp .cp-hd-acoes { flex-wrap: wrap; }
  body.cp .cp-rodape { flex-wrap: wrap; row-gap: var(--s-2); }
}

/* --- 600px: uma coluna em tudo, e os campos curtos soltam o freio ------- */
@media (max-width: 600px) {
  body.cp .cp-cols,
  body.cp .cp-tres { grid-template-columns: 1fr; }

  /* O teto de largura existe para o campo curto não ficar deitado ao lado de
     um campo longo na mesma linha. Em coluna única não há vizinho, e manter o
     teto deixaria a data e o valor espremidos num canto da tela. */
  body.cp .cp-curto .cp-campo,
  body.cp .cp-par .cp-campo { max-width: none; }

  body.cp .cp-acoes { flex-wrap: wrap; row-gap: var(--s-2); }
  body.cp .cp-acoes .cp-limpar { flex: 1 0 100%; }

  /* os chips do filtro salvo e das pílulas roem a linha em vez de estourar */
  body.cp .cp-salvos, body.cp .cp-lote { row-gap: var(--s-2); }
}

/* --- 400px: as duas datas param de dividir a linha ---------------------- */
@media (max-width: 400px) {
  body.cp .cp-par { flex-direction: column; }
  body.cp .cp-datas { flex-direction: column; gap: var(--s-3); }
}

/* Conteúdos Pagos — a segunda linha do "novo conteúdo" (chamada e copy) e os
   dois campos que só o encerramento usa. A segunda linha NÃO ganha regra de
   mostrar/esconder própria: ela veste a classe `cp-nova`, e a regra que já
   existe (`body.cp:has(.cp-mais:checked) .cp-nova`, 16/09/2026 — a caixa saiu
   do `.card` da tabela para o topo da tela) alcança as duas. Uma segunda
   regra para o mesmo estado é o defeito que esta casa já pagou. */
body.cp .cp-nova-texto { padding-top: 0; }
body.cp .cp-nova-texto .cp-campo { width: 100%; }
body.cp .cp-nova-texto .cp-campo + .cp-campo { margin-top: 4px; }
body.cp .cp-lote-fim { display: inline-flex; gap: 6px; align-items: center; }
body.cp .cp-lote-fim[hidden] { display: none; }
body.cp .cp-f-larga { grid-column: 1 / -1; }

/* ========================================================================
   Calendário Central — decisão do escritório em 14/09/2026, embutido na
   Inicial (`/dashboard`) abaixo dos widgets; a tela própria foi revogada
   em 15/09/2026 (decisão 8, "uma tela só").
   Camadas num pop não bloqueador (`.ag-pop`) aberto pelo botão da barra —
   a coluna lateral saiu em 14/09/2026; o calendário ocupa a largura toda.
   Corpo com Mês/Semana/Lista/Hoje. Reaproveita `.cal`/`.cal .cell`/`.cal .dow`
   da grade do Operacional (`agenda.html`) — só o essencial é novo aqui.
   ======================================================================== */
.cc{display:block}
.cc-visoes{display:flex;gap:6px;flex-wrap:wrap}
.cc-camadas{position:relative;margin-left:auto;order:9}
.cc-pop-camadas{right:0;width:260px}
.cc-pop-camadas .ag-pop-corpo{max-height:50vh}
.cc-grupo{margin-bottom:12px}
.cc-grupo:last-child{margin-bottom:0}
.cc-grupo-nome{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  color:var(--ink);margin-bottom:4px}
.cc-grupo-nome i{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.cc-cal{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);
  padding:3px 0 3px 14px;cursor:pointer}
.cc-cal input{cursor:pointer}
.cc-vazio-lateral{font-size:12px;color:var(--muted)}
.cc-corpo{min-width:0}
.cc-barra{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-bottom:10px}
.cc-nav{display:flex;align-items:center;gap:6px}
.cc-foco{font-size:13px;font-weight:700;color:var(--ink);margin-left:4px}
.cc-cal-grade .cell{min-height:88px}
.cc-ev{display:block;font-size:10px;padding:2px 6px;border-radius:6px;color:#fff;
  font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-decoration:none;margin-bottom:2px}
.cc-ev.sem-link{cursor:default}
a.cc-ev:hover{filter:brightness(1.08)}
.cc-ev.riscado{text-decoration:line-through;opacity:.6}
a.cc-ev.riscado:hover{text-decoration:line-through}
.cc-dia-unico{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:12px;display:flex;flex-direction:column;gap:4px}
.cc-vazio{font-size:13px;color:var(--muted);padding:10px 0}
.cc-lista{display:flex;flex-direction:column;gap:14px}
.cc-lista-dia{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:10px 14px}
.cc-lista-data{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--muted);
  margin-bottom:6px}
.cc-linha{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13px}
.cc-linha-cor{width:8px;height:8px;border-radius:50%;flex:none}
.cc-linha-hora{color:var(--muted);font-size:12px;width:44px;flex:none}
.cc-linha-titulo{color:var(--ink);text-decoration:none;flex:1}
a.cc-linha-titulo:hover{text-decoration:underline}
.cc-linha-titulo.riscado{text-decoration:line-through;opacity:.6}

/* ---------------------------------------------------------- Visão Semana
   Grade de horas 07h–20h (13 linhas), eventos posicionados por %. */
.cc-semana{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.cc-semana-cab{display:grid;grid-template-columns:52px repeat(7,1fr);border-bottom:1px solid var(--line)}
.cc-semana-cab-vazia{border-right:1px solid var(--line)}
.cc-semana-dia-cab{padding:8px 6px;text-align:center;border-right:1px solid var(--line)}
.cc-semana-dia-cab:last-child{border-right:0}
.cc-semana-dia-cab .dow{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;font-weight:700}
.cc-semana-dia-cab .dn{display:block;font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.cc-semana-dia-cab.today .dn{color:var(--cyan-600)}
.cc-semana-diainteiro{display:grid;grid-template-columns:52px repeat(7,1fr);border-bottom:1px solid var(--line);background:#fafaf7}
.cc-semana-col-diainteiro{padding:4px 4px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.cc-semana-col-diainteiro:last-child{border-right:0}
.cc-semana-grade{display:grid;grid-template-columns:52px repeat(7,1fr);position:relative}
.cc-semana-horas{display:flex;flex-direction:column}
.cc-semana-hora{height:42px;font-size:10px;color:var(--muted);text-align:right;padding-right:6px;
  border-top:1px solid var(--line);font-variant-numeric:tabular-nums;transform:translateY(-6px)}
.cc-semana-hora:first-child{border-top:0}
.cc-semana-col{position:relative;border-right:1px solid var(--line);border-top:1px solid transparent}
.cc-semana-col:last-child{border-right:0}
.cc-semana-linha-hora{height:42px;border-top:1px solid var(--line)}
.cc-semana-linha-hora:first-child{border-top:0}
.cc-semana-ev{position:absolute;left:3px;right:3px;border-radius:6px;color:#fff;font-size:10px;
  padding:2px 5px;overflow:hidden;text-decoration:none;display:block;line-height:1.3;box-shadow:var(--shadow)}
.cc-semana-ev-hora{display:block;font-weight:700;font-variant-numeric:tabular-nums}
.cc-semana-ev.sem-link{cursor:default}
a.cc-semana-ev:hover{filter:brightness(1.08)}
.cc-semana-ev.riscado{text-decoration:line-through;opacity:.6}
.cc-semana-agora{position:absolute;left:0;right:0;height:0;border-top:2px solid var(--red);z-index:2}
.cc-semana-agora::before{content:"";position:absolute;left:-4px;top:-4px;width:8px;height:8px;
  border-radius:50%;background:var(--red)}
@media(max-width:760px){
  .cc-semana-cab,.cc-semana-diainteiro,.cc-semana-grade{grid-template-columns:40px repeat(7,minmax(64px,1fr))}
  .cc-semana{overflow-x:auto}
}
html.escuro .cc-semana,html.escuro .cc-semana-diainteiro,html.escuro .cc-semana-col{
  background:#1a2338;border-color:#2a3550}
html.escuro .cc-semana-cab{border-color:#2a3550}
html.escuro .cc-semana-dia-cab,.html.escuro .cc-semana-col-diainteiro{border-color:#2a3550}
a.cc-linha-titulo.riscado:hover{text-decoration:line-through}
.cc-linha-modulo{color:var(--muted);font-size:11px}
@media (max-width: 720px) {
  .cc-camadas{margin-left:0}
  .cc-pop-camadas{right:auto;left:0}
}
html.escuro .cc-dia-unico,html.escuro .cc-lista-dia{
  background:var(--card)}

/* ---------------------------------------------------------------------
   Estrutura padrão do Tráfego Pago — `_painel_trafego.html`.
   Prefixo `tpe-` só para o que não existia: pílula, bloco, tabela e seletor
   continuam os de sempre (`.pilula`, `.cp-bloco`, `.cp-tab`, `.cp-sel`).
   --------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
   Topo de tela -- padrao aprovado pelo escritorio em 16/09/2026 (TELA-01 do
   catalogo, Padrao-Visual/design-system.md), revoga "nenhuma tela tem titulo". Titulo
   a esquerda (22px/700, mesmos numeros do `.tpe-titulo` do Trafego Pago),
   subtitulo opcional embaixo, acoes obrigatorias a direita na mesma linha,
   descendo para baixo do titulo no celular. Macro: `m.topo` em _macros.html.
   --------------------------------------------------------------------- */
.topo{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.topo-titulo{font-size:22px;font-weight:700;color:var(--navy);line-height:1.15;margin:0}
.topo-sub{font-size:12px;color:var(--muted);margin:4px 0 0}
.topo-acoes{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.topo-acoes form{margin:0}
@media(max-width:600px){.topo-acoes{width:100%}}

.tpe{display:flex;flex-direction:column;gap:18px}
.tpe-cabecalho{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.tpe-titulo{font-size:22px;font-weight:700;color:var(--navy);margin:0}
.tpe-atualizado{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);margin-top:6px}
.tpe-ponto{width:8px;height:8px;border-radius:50%;background:var(--green)}
.tpe-ponto.vazio{background:var(--cinza)}
.tpe-cabecalho-acoes{display:flex;gap:8px;align-items:center}
.tpe-cabecalho-acoes form{margin:0}
.tpe-plataformas{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.topo + .tpe-plataformas{margin-bottom:18px}
.tpe-plataforma{padding:9px 16px;font-size:14px;font-weight:600;color:var(--muted);flex-shrink:0;white-space:nowrap;
  border-bottom:var(--barra-acento) solid transparent;margin-bottom:-1px;text-decoration:none}
.tpe-plataforma:hover{color:var(--ink)}
.tpe-plataforma.on{color:var(--navy);border-bottom-color:var(--cobre)}
.tpe + .ph{margin-top:18px}
.tpe-filtros{display:flex;flex-direction:column;gap:10px}
.tpe-painel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg)}
.tpe-painel[open]{box-shadow:var(--shadow)}
.tpe-barra{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;
  list-style:none;cursor:pointer}
.tpe-barra::-webkit-details-marker{display:none}
.tpe-botao-filtros{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--r-md);
  font-size:12px;font-weight:600;color:var(--navy);border:1px solid var(--line)}
.tpe-painel[open] .tpe-botao-filtros{background:var(--cobre);color:#fff;border-color:var(--cobre)}
.tpe-contador{min-width:18px;height:18px;border-radius:9px;background:var(--cobre);color:#fff;font-size:11px;
  display:inline-grid;place-items:center;padding:0 5px}
.tpe-painel[open] .tpe-contador{background:#fff;color:var(--cobre)}
.tpe-grupos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0;border-top:1px solid var(--line)}
.tpe-grupo{border:0;margin:0;padding:14px 16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.tpe-grupo+.tpe-grupo{border-left:1px solid var(--line)}
.tpe-grupo legend{float:left;width:100%;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding:0;margin-bottom:10px}
.tpe-nota{font-size:12px;color:var(--muted);margin:0}
.tpe-rodape{display:flex;justify-content:flex-end;gap:8px;padding:10px 16px;border-top:1px solid var(--line)}
.tpe-rapidos{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tpe-segmento{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:2px}
.tpe-segmento a{padding:5px 11px;border-radius:7px;font-size:12px;font-weight:600;color:var(--muted);text-decoration:none}
.tpe-segmento a.on{background:var(--cobre);color:#fff}
.tpe-agrupar{margin-left:auto}
.tpe-etiqueta{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:20px;font-size:12px;
  background:var(--card);border:1px solid var(--line);color:var(--ink);text-decoration:none}
.tpe-etiqueta span{color:var(--muted)}
.tpe-etiqueta:hover{border-color:var(--cobre)}
.tpe-alerta.on{border-color:var(--orange);color:var(--orange)}
@media (max-width:760px){.tpe-grupo+.tpe-grupo{border-left:0;border-top:1px solid var(--line)}}
.tpe-kpi-detalhe{color:var(--muted)}
.tpe-tab th a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.tpe-tab td .tag{margin-left:6px}
.tpe-sub{color:var(--muted);font-size:12px}
/* alertas por gravidade na Geral */
.tpe-alertas{min-width:160px;max-width:280px}

/* Comparar períodos do Tráfego Pago — `_comparar_periodos.html`, no desenho do Resumo do Financeiro */
.cpr-bloco{--cpr-p1:#2f6d4f;--cpr-p2:#b3762a;--cpr-p3:#6b519a;--cpr-p4:#3d7a8c;
  --cpr-k1:#2f6d4f;--cpr-k2:#b3762a;--cpr-k3:#6b519a;--cpr-k4:#3d7a8c;--cpr-k5:#b3402f;--cpr-k6:#8a8f55;--cpr-k7:#7a6949;--cpr-k8:#c28aa0;--cpr-k9:#5d6b78;
  background:var(--card);border:1px solid var(--line);border-radius:14px}
.cpr-cab{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line)}
.cpr-cab h3{margin:0;font-size:15px}
.cpr-agora{margin:0;padding:10px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.cpr-cab-grafico{justify-content:space-between}
.cpr-corpo{padding:14px 16px}
.cpr-ajustes{border-bottom:1px solid var(--line)}
.cpr-resumo{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;padding:12px 16px;cursor:pointer;list-style:none}
.cpr-resumo::-webkit-details-marker{display:none}
.cpr-resumo h3{margin:0;font-size:15px}
.cpr-pilulas{display:flex;flex-wrap:wrap;gap:6px}
.cpr-pilula{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12px;background:var(--bg)}
.cpr-pilula i{width:9px;height:9px;border-radius:50%}
.cpr-pilula b{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.cpr-estado{font-size:12px;color:var(--muted)}
.cpr-botao{margin-left:auto;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:9px;padding:5px 10px;font-size:12px;font-weight:600}
.cpr-ajustes[open] .cpr-botao{background:var(--acao);color:var(--acao-texto);border-color:var(--acao)}
.cpr-ctls{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:flex-start;padding:4px 16px 14px}
.cpr-ctl{margin:0}
.cpr-ctl-largo{flex:1 1 360px}
form.cpr-ctl-largo{flex:0 1 auto}
.cpr-rot{display:block;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.cpr-periodos{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cpr-per{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:10px;padding:4px 6px 4px 8px;background:var(--bg);font-size:12px}
.cpr-per select{border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--ink);font:inherit;font-size:12px;padding:3px 6px}
.cpr-bola{width:10px;height:10px;border-radius:50%;flex:none}
.cpr-x{color:var(--muted);font-size:15px;line-height:1;padding:0 3px;text-decoration:none}
.cpr-mais{border:1px dashed var(--cyan);color:var(--cyan);border-radius:10px;padding:6px 12px;font-size:12px;text-decoration:none}
.cpr-atalhos{display:flex;flex-wrap:wrap;gap:6px}
.cpr-atalho{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:4px 10px;font-size:11px;text-decoration:none}
.cpr-atalho:hover{border-color:var(--cyan)}
.cpr-atalho.on{background:var(--acao);color:var(--acao-texto);border-color:var(--acao)}
.cpr-seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.cpr-seg a{background:var(--card);padding:5px 11px;font-size:12px;color:var(--muted);border-right:1px solid var(--line);text-decoration:none}
.cpr-seg a:last-child{border-right:0}
.cpr-seg a.on{background:var(--acao);color:var(--acao-texto)}
.cpr-cartoes{display:grid;grid-template-columns:repeat(var(--n,1),minmax(0,1fr));gap:10px;padding:14px 16px}
@media(max-width:900px){.cpr-cartoes{grid-template-columns:minmax(0,1fr)}}
.cpr-cartao{border:1px solid var(--line);border-radius:12px;padding:10px 12px;border-top:4px solid var(--c)}
.cpr-cartao h4{margin:0 0 6px;font-size:12px;display:flex;justify-content:space-between;gap:6px}
.cpr-cartao h4 span{font-weight:400;color:var(--muted)}
.cpr-linhas{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:6px 12px}
.cpr-l{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;font-variant-numeric:tabular-nums;border-top:1px solid var(--line);padding-top:5px}
.cpr-l span:first-child{flex-basis:100%;font-size:10px;color:var(--muted)}
.cpr-l b{font-size:14px}
.cpr-dl{font-size:11px;font-weight:600}
.cpr-dl.up{color:var(--green)}.cpr-dl.down{color:var(--red)}.cpr-dl.neu{color:var(--muted)}
.cpr-leg{display:flex;flex-wrap:wrap;gap:12px;font-size:11px;color:var(--muted)}
.cpr-leg i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.cpr-leg i.cpr-leg-linha{width:16px;height:0;border-radius:0;border-top:3px solid currentColor;vertical-align:3px}
.cpr-leg i.cpr-leg-linha.tracejado{border-top:2px dashed currentColor}
.cpr-svg{display:block;width:100%;height:auto;overflow:visible}
/* Gráfico mensal do Tráfego Pago: 12, 18 ou 24 meses conforme a largura do
   bloco — a tela larga ganha meses, e o gráfico não cresce em altura. */
.cpr-graficos{container-type:inline-size}
.cpr-meses-12,.cpr-meses-18,.cpr-meses-24{display:none}
@container (min-width:600px){.cpr-meses-6{display:none}.cpr-meses-12{display:block}}
@container (min-width:1100px){.cpr-meses-12{display:none}.cpr-meses-18{display:block}}
@container (min-width:1500px){.cpr-meses-18{display:none}.cpr-meses-24{display:block}}
.cpr-svg text{font-family:inherit;fill:var(--muted);font-size:10px}
.cpr-svg .forte{fill:var(--ink);font-weight:600}
.cpr-grade{stroke:var(--line)}
.cpr-media{stroke:var(--ink);stroke-dasharray:4 3}
.cpr-svg .cpr-media-rot{paint-order:stroke;stroke:var(--card);stroke-width:4px;stroke-linejoin:round}
.cpr-destaque{fill:none;stroke:var(--ink);stroke-dasharray:2 2}
.cpr-vazio{color:var(--muted);font-size:12px;margin:0}
.tpe-tab td.tpe-alertas .tag{margin:0 4px 4px 0;white-space:normal;text-align:left}
.tpe-tab tr.sev-critico td:first-child{box-shadow:inset 3px 0 0 var(--red)}
.tpe-tab tr.sev-atencao td:first-child{box-shadow:inset 3px 0 0 var(--orange)}
.tpe-paginacao{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 18px;font-size:12px;color:var(--muted)}
.tpe-paginas{display:flex;gap:4px;align-items:center}
.tpe-pagina{min-width:28px;text-align:center;padding:5px 8px;border-radius:var(--r-sm);color:var(--ink);text-decoration:none}
.tpe-pagina.on{background:var(--cobre);color:#fff}
.tpe-pagina.gap{color:var(--muted)}
.tpe-recortes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.tpe-recorte ul{list-style:none;margin:0;padding:12px 18px 16px;display:flex;flex-direction:column;gap:9px}
.tpe-recorte li{display:grid;grid-template-columns:minmax(90px,1fr) 2fr 52px;align-items:center;gap:10px;font-size:12px}
.tpe-recorte-nome{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tpe-recorte-barra{height:8px;border-radius:4px;background:var(--bg);overflow:hidden}
.tpe-recorte-barra i{display:block;height:100%;background:var(--cobre);border-radius:4px}
.tpe-recorte-pct{text-align:right;font-family:'IBM Plex Mono',ui-monospace,monospace;color:var(--muted)}
.tpe-catalogo h3{font-size:14px;font-weight:700;color:var(--navy);margin:0 0 10px}
.tpe-catalogo-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.tpe-termo{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 14px}
.tpe-termo-nome{font-weight:700;color:var(--navy);font-size:12px}
.tpe-termo-formula{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;color:var(--cyan-600);margin-top:6px}
.tpe-termo p{font-size:12px;color:var(--muted);margin:6px 0 0;line-height:1.45}

/* ============================================================================
   RECORTE DE FOTO — overlay próprio, decisão do escritório, 15/09/2026 (tarde)
   ----------------------------------------------------------------------------
   NÃO usa o modal genérico (`.ov`/`.modal`): o recorte da Equipe abre de
   DENTRO do modal "Configurar acesso" (`tpl-config`), que já ocupa aquele
   único modal — reaproveitá-lo apagaria o modal de baixo. É construído em JS
   (`app.js`), uma vez, escondido por padrão. Mesmo verniz visual do `.modal`
   (cartão sólido — aqui NÃO é vidro, porque cobre outro modal por cima e
   precisa de contraste máximo, regra 7 do design-system: dado/controle
   sensível = superfície sólida). */
.recorte-ov{position:fixed;inset:0;background:rgba(10,20,45,.55);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:16px}
.recorte-ov[hidden]{display:none}
.recorte-modal{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg,14px);
  box-shadow:0 12px 32px rgba(15,23,42,.28);width:360px;max-width:100%;padding:18px}
/* d2: fundo saiu -- a base (.recorte-modal) já é var(--card); o hex por
   cima pintava azul antigo sem ganhar nada. A borda clara (vidro sobre
   outro modal) não é da paleta antiga e fica. */
html.escuro .recorte-modal{border-color:rgba(255,255,255,.10)}
.recorte-modal h3{color:var(--navy);font-size:14px;margin-bottom:6px}
html.escuro .recorte-modal h3{color:#fff}
.recorte-modal .aj{font-size:12px;color:var(--muted);margin-bottom:12px}
.recorte-area{display:flex;justify-content:center;margin-bottom:12px}
/* Prévia CIRCULAR: o canvas é quadrado (a área de recorte de verdade); o
   círculo é só a moldura visual — mesmo truque do `.avatar` (border-radius
   50% + overflow hidden), pedido explícito do escritório ("prévia circular").
   O JPEG exportado continua QUADRADO — quem recorta em círculo na tela é o
   `.avatar` de sempre, em todo lugar que mostra a foto. */
#recorte-canvas{width:280px;height:280px;border-radius:50%;cursor:grab;
  touch-action:none;border:2px solid var(--line);background:var(--bg)}
#recorte-canvas:active{cursor:grabbing}
#recorte-canvas:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.recorte-zoom{display:flex;align-items:center;gap:10px;margin-bottom:16px;
  color:var(--muted);font-size:14px}
.recorte-zoom input[type=range]{flex:1}
@media(prefers-reduced-motion:no-preference){
  .recorte-ov{animation:recorte-entra .15s ease}
}
@keyframes recorte-entra{from{opacity:0}to{opacity:1}}

/* ==========================================================================
   PEÇAS DE LEIAUTE (padronizar-templates, 16/09/2026 — Padrao-Visual/design-system.md)
   Substituem o estilo escrito à mão em `style=` nas telas. Classe com nome,
   medida da escala ESP-01 (tema.css --s-*), nada de número solto.
   ========================================================================== */
/* ESP-04 — espaço entre blocos empilhados: sempre 16px, posto pelo pai. */
.pilha > * + *{margin-top:var(--s-4)}
/* ESP-05 — itens lado a lado (botões, etiquetas, campos curtos): 8px, quebra
   a linha quando não cabe. `.grow` é o item que ocupa o que sobra — o mesmo
   nome que `.row .grow` já usava. Os modificadores de alinhamento são `cima`
   e `baixo`, e NÃO `topo`: `.topo` já é o cabeçalho de tela (margin-bottom 18px,
   logo abaixo) e vazava nessa linha — medido na tarefa c3 em 16/09/2026. */
.linha{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-2)}
.linha.cima{align-items:flex-start}
.linha.baixo{align-items:flex-end}
.linha.entre{justify-content:space-between}
.linha.fim{justify-content:flex-end}
.linha > .grow{flex:1;min-width:0}
/* COR-07 — texto de apoio: a legenda cinza pequena ("Atualizado em…"). */
.texto-apoio{color:var(--muted);font-size:12px}
/* Peça de gráfico SVG (viewBox, sem preserveAspectRatio) — juntada em
   17/09/2026 (tarefa d6) das três cópias idênticas que a padronização tinha
   deixado: `.fin-grafico-*` (financeiro.css, tarefa financeiro), `.mkt-svg`/
   `.mkt-grafico-*` (app.css, tarefa x4) e `.mac-svg`/`.mac-grafico-*` (app.css,
   tarefa m1). As três eram declaração por declaração iguais. */
.grafico-svg{width:100%;height:auto;display:block}
.graf-larguras{container-type:inline-size}
.graf-larguras .grafico-svg{overflow:visible}
.graf-l-2,.graf-l-3,.graf-l-4{display:none}
@container (min-width:520px){.graf-l-1{display:none}.graf-l-2{display:block}}
@container (min-width:1000px){.graf-larguras:has(.graf-l-3) .graf-l-2{display:none}.graf-l-3{display:block}}
@container (min-width:1400px){.graf-larguras:has(.graf-l-4) .graf-l-3{display:none}.graf-l-4{display:block}}
.grafico-grade{stroke:var(--line)}
.grafico-eixo{fill:var(--muted)}
.grafico-rosca{width:150px;height:150px;display:block}
.grafico-rosca-centro{font-family:var(--fonte-mono);font-size:22px;font-weight:700;fill:var(--ink)}
.grafico-rosca-sub{font-size:11px;fill:var(--muted)}
/* AVISO-03 apagada (17/09/2026, tarefa e2): as três telas que usavam
   `.banner-ok` (a tela de Drive do cliente, hoje apagada, campanhas_credenciais.html e minha_senha.html)
   passaram a usar `m.aviso(ok=)` / `.flash` (AVISO-02), a peça do catálogo.
   A classe deixou de existir — ver Padrao-Visual/design-system.md. */
/* Chats do CRM e do SAC ficam fora de mudança geral (regra do escritório): na tela
   que tem `.chat-tela` — abas de cima inclusive — o secundário segue o de antes da
   COR-07. Só no claro: o --muted do escuro não mudou. Sai quando o escritório mandar
   os chats para o padrão. */
html:not(.escuro) .main:has(.chat-tela){--muted:#6d7370}
/* org6 (17/09/2026): TAB-03/ETQ-01/BTN-03 viram regra do sistema, mas os chats do
   CRM e do SAC ficam de fora (regra do escritório) — :where() dá a cada linha a
   MESMA especificidade da regra base que ela devolve, pra não atropelar as regras
   próprias dos chats (.chat-item-cab .tag é 600 e continua vencendo, por ter mais
   classe). A última linha mira só o :hover escuro do .btn.danger.sm (item 6 acima),
   que é html.escuro + 4 classes — por isso repete o html.escuro aqui também. */
:where(.main:has(.chat-tela)) th{font-size:12px;background:transparent}
:where(.main:has(.chat-tela)) .tag{font-size:10px;font-weight:700}
:where(.main:has(.chat-tela)) .btn.danger.sm{background:var(--red);color:var(--acao-texto);border-color:transparent}
html.escuro :where(.main:has(.chat-tela)) .btn.danger.sm:hover{background:var(--red)}

/* ==========================================================================
   CLASSES QUE SAÍRAM DO style= DAS TELAS (padronizar-templates, 16/09/2026).
   Uma seção por tarefa; cada tarefa escreve SÓ dentro da sua.
   ========================================================================== */

/* --- tarefa c1: início --- */

/* --- tarefa c1: fim --- */

/* --- tarefa c2: início --- */

/* --- tarefa c2: fim --- */

/* --- tarefa c3: início --- */

/* --- tarefa c3: fim --- */

/* --- tarefa c4: início --- */

/* --- tarefa c4: fim --- */

/* --- tarefa c5: início --- */

/* --- tarefa c5: fim --- */

/* --- tarefa f1: início --- */

/* --- tarefa f1: fim --- */

/* --- tarefa f2: início --- */

/* --- tarefa f2: fim --- */

/* --- tarefa f3: início --- */

/* --- tarefa f3: fim --- */

/* --- tarefa o1: início --- */

/* _aviso_sem_tipo_prazo.html é incluído só por agenda.html, que não carrega
   operacional.css (só app.css/tema.css/celular.css) — por isso a classe fica
   aqui, e não na folha de área. Reclassificado de `flash erro` para `banner`
   na conferência da líder de 16/09/2026 (aviso 3): "nenhum tipo marcado como
   prazo fatal" é config ausente (estado permanente, só some quando alguém
   marca em Configurações), não resultado de uma ação — critério do AVISO-01
   vs AVISO-02. Estrutura ajustada para o padrão já usado em .banner (ícone e
   texto em spans separados, ver config_equipe.html/config_inicio.html). */
.op-aviso-link{color:inherit;text-decoration:underline}

/* --- tarefa o1: fim --- */

/* --- tarefa o3: início --- */

/* Link de destaque dentro de `.dica` (cor global de link é `inherit`,
   app.css:27) -- publicacoes_config_ia.html. Esta tela NÃO carrega
   operacional.css: `config_modulo_base.html` só usa o `folhas` desta
   página quando ela sobrescreve o bloco, e publicacoes_config_ia.html não
   sobrescreve -- herda o `{% if quadros_config(rota) %}` do base, que aqui
   é verdadeiro (Publicações declara `grupo`) e carrega config_modulo.css,
   não operacional.css. Por isso a classe fica aqui (regra 7). */
.op-link-cyan{color:var(--cyan)}

/* --- tarefa o3: fim --- */

/* --- tarefa o4: início --- */
/* classes que nasceram no Painel e hoje servem a outras telas que não carregam
   operacional.css (agenda.html, crm_agente.html, crm_conciliacao_anuncios.html) */
.op-cor-vermelho{color:var(--red)}
.op-erro-sem-prazo{font-size:12px;color:var(--red)}
.row .t.op-titulo-dia{font-size:12px}
/* --- tarefa o4: fim --- */

/* --- tarefa o5: início --- */
/* config_tipos.html — classes que saíram do style= (16/09/2026). config_tipos
   NÃO carrega operacional.css (não sobrescreve {% block folhas %}, e
   quadros_config('/operacional/configuracoes/categorias') não existe — só
   carrega config_modulo.css quando há agrupamento por quadros, que este
   módulo não usa) — por isso a seção da tarefa é aqui, não em operacional.css
   (regra do pedido: "só se a tela carrega operacional.css; senão, app.css").
   Nomes: prefixo op- + o que é. */

/* Os 2 avisos permanentes desta tela (flash erro, sem cor à mão) e as 2
   `.dica` de introdução ganham 14px de espaço abaixo — igual ao valor
   original, sem arredondar para ESP-04 (16px): cada um é um elemento em
   meio a uma sequência de blocos condicionais (nem sempre há 2+ juntos
   para virar `.pilha` no `.cfg-secao` pai). Precedente: `.fin-mb-14`
   (financeiro.css, tarefa f1) faz o mesmo — valor exato, não a peça. */
.op-espaco-baixo{margin-bottom:14px}
/* `.grid2` (app.css) já nasce com gap:12px — igual ao original; só o
   display (grid -> flex) e o flex-direction mudam para empilhar os cartões
   de categoria em vez de duas colunas. */
.op-tipos-coluna{display:flex;flex-direction:column}
/* `.card .hd` já é flex/center/space-between por padrão (app.css) — só o
   gap entre o título (h3) e as ações à direita sobra. */
.op-cab-gap{gap:10px}
/* font-size isolado (sem cor — não é `.texto-apoio`): nome da subcategoria
   dentro do `.grow` de `.row`. Fica aqui (não em operacional.css) porque
   config_tipos.html não sobrescreve `folhas` — não carrega operacional.css
   (regra 7 do plano de padronização); operacional.css tinha a mesma regra
   duplicada, apagada por ser a que não valia para quem não carrega essa folha (d1, 17/09). */
.op-texto-12{font-size:12px}
/* `.row` (app.css) nasce com padding:12px 0 — a linha de subcategoria usa
   7px 0 (mais compacta, várias por card). */
.op-row-compacta{padding:7px 0}
/* Espaço acima do formulário "+ Nova subcategoria", depois da lista — 10px,
   elemento único (não é grupo de vários irmãos), valor exato mantido. */
.op-form-espaco{margin-top:10px}
/* Campo de texto da linha "+ Nova subcategoria" — mesmo conjunto de
   border/raio/padding/fonte usado em outros campos soltos da tela (fora de
   `.fld`, que tem raio/padding diferentes: 9px/10px 12px). */
.op-campo-inline{border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:12px;outline:0}
/* Estado vazio "Nenhuma categoria ativa" — padding maior (30px) que o de
   OABs (28px, operacional.css): valores diferentes, classes separadas. */
.op-vazio-grande{text-align:center;color:var(--muted);padding:30px}
/* --- tarefa o5: fim --- */

/* --- tarefa o6: início --- */
/* agenda.html / agenda_tempo.html — nenhuma das duas carrega operacional.css,
   por isso a seção fica aqui. */
.op-ponteiro{cursor:pointer}                 /* select/label sem cursor de link/botão */
.cal-legenda > .grow{flex:1;min-width:0}     /* ESP-05: espaçador do fim da fileira de chips */
.op-mb-14{margin-bottom:14px}
.op-mt-14{margin-top:14px}
.swatch.op-prazo-confirmar{background:#fff;border:1.5px dashed var(--red)}
.op-rotulo-dia{font-size:12px;font-weight:700;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.row.op-linha-prox7{padding:7px 0}
.card.op-card-rolavel{padding:0;overflow:auto}
/* .ag-mes: evento branco + hoje em quadrado verde, só no Mês (ver comentário em
   agenda.html) — bloco <style> do próprio template, movido pra cá (item 8). */
.card.ag-mes{padding:14px}
.ag-mes .ev{background:#fff !important;color:var(--ink);border:1px solid var(--line);display:flex;align-items:center;gap:5px}
.ag-mes .cell.today .dn{background:var(--green,#2f6d4f);color:#fff;border-radius:4px;width:24px;height:24px;display:flex;align-items:center;justify-content:center}
/* --- tarefa o6: fim --- */

/* --- tarefa k1: início --- */
/* crm_agente.html, crm_agentes.html, crm_modelos.html, crm_feedback.html —
   nenhuma das quatro carrega crm.css (as duas primeiras estendem base.html
   direto; agentes/modelos passam por config_modulo_base, que só carrega
   config_modulo.css), por isso a seção fica aqui, não em crm.css. */
.crm-encolhe{min-width:0}                    /* min-width:0 solto — cabe num .linha ou numa grade sem estourar */
.crm-grow{flex:1;min-width:0}                /* como .grow (app.css), mas fora de .linha (filho de .etapa-cfg) */
.crm-flex1{flex:1}                           /* só flex:1 — etapa-check não tinha min-width:0 */
.crm-fs-12{font-size:12px}
.crm-dica-corte{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.funil-nome.crm-nome-titulo{font-size:20px}  /* nome do agente, mesmo corpo do <h1> do .ph */
.grid2.crm-grid-modelos{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.crm-mt-6{margin:6px 0 0}
.crm-mt-10{margin-top:10px}
.crm-mt-12{margin-top:12px}
.crm-mt-14{margin-top:14px}
.crm-mb-7{margin-bottom:7px}
.crm-mb-10{margin-bottom:10px}
.crm-mb-16{margin-bottom:var(--s-4)}         /* 16px = ESP-04, mas os irmãos não são todos .card (não dá pra usar .pilha) */
.crm-mb-18{margin-bottom:18px}
.crm-recuo-22{margin-left:22px}
.crm-cfg-nota{margin:5px 0 0 22px}           /* nota sob o checkbox de config (2x: responder_sozinha/usa_ferramentas) */
.crm-cfg-ferramenta{margin:6px 0 0 22px}     /* uma linha de ferramenta da IA, na lista de "usa_ferramentas" */
.crm-cfg-nota-fim{margin:8px 0 0 22px}
.crm-caixa-cfg{border:1px solid var(--line);border-radius:10px;padding:11px;margin-bottom:14px}
.crm-check-titulo{font-size:14px;font-weight:600}  /* mini-check maior, título das duas caixas de config acima */
.crm-desemp-caixa{padding:0 16px 12px}       /* companion de .texto-apoio no resumo de desempenho da simulação */
.crm-desemp-rodape{padding:0 16px 14px}
/* .crm-vazio-pad{padding:20px} apagada (d1, 17/09): morta desde que nasceu —
   os dois usos reais (crm_agentes.html, whatsapp_config.html) sempre trazem
   `dica crm-vazio-pad` juntas, e `.dica.crm-vazio-pad{padding:16px}` (tarefa
   k2, mais específica) sempre venceu; 20px nunca chegou à tela. */
/* --- tarefa k1: fim --- */

/* --- tarefa k2: início --- */
/* crm_config_ia.html, crm_config_integracoes.html, crm_config_listas.html,
   crm_config_respostas.html, whatsapp_config.html (padronizar-templates,
   16/09/2026) -- nenhuma sobrescreve `folhas` em config_modulo_base.html,
   então nenhuma carrega crm.css (regra 7): a seção fica aqui. */

/* grades com colunas/alinhamento próprios (regra 6) */
.grid2.crm-grid-igual{grid-template-columns:1fr 1fr;align-items:start}                                 /* crm_config_ia.html, crm_config_respostas.html */
.grid2.crm-grid-canais{grid-template-columns:repeat(auto-fill,minmax(400px,1fr));align-items:start}    /* crm_config_integracoes.html */
.grid2.crm-grid-listas{grid-template-columns:repeat(auto-fill,minmax(330px,1fr));align-items:start}    /* crm_config_listas.html */

/* ESP-04: 10-20px de margem empilhada normaliza para var(--s-4). O pai não é
   100% "irmãos empilhados" (mistura com nota de 7px e dica sem margin-top),
   por isso cada item leva a classe em vez de `.pilha` no pai (regra 4). */
.crm-esp-cima{margin-top:var(--s-4)}      /* crm_config_ia.html (.fld x6, .mini-check, .btn -- eram 10/12px); crm_config_integracoes.html (.card x2 -- já eram 16px) */
.crm-esp-baixo{margin-bottom:var(--s-4)}  /* crm_config_ia.html .mini-check (era 10px); crm_config_integracoes.html .fld (era 10px); whatsapp_config.html .card (era 14px) */

.crm-caixa-regra{border:1px solid var(--line);border-radius:10px;padding:11px}   /* crm_config_ia.html -- duas caixas idênticas; margem em crm-esp-baixo */
.mini-check.crm-check-forte{font-size:14px;font-weight:600}   /* crm_config_ia.html -- os dois checkboxes-título */
.mini-check.crm-check-lista{margin-bottom:7px}                /* crm_config_ia.html -- checkbox de cada verificação (7px: não é ESP-04) */
.crm-conhec-titulo{font-size:12px}          /* crm_config_ia.html -- título do texto de conhecimento */
.crm-cresce{flex:1;min-width:0}             /* crm_config_ia.html -- corpo do item de conhecimento, ao lado dos botões */
.dica.crm-truncar{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}   /* crm_config_ia.html -- recorte de uma linha do texto */

/* notas pequenas indentadas sob checkbox -- cada valor é exato e < 10px de
   topo, por isso não é ESP-04 (regra 4, último item); ficam em crm_config_ia.html */
.dica.crm-nota-check{margin:5px 0 0 22px}   /* sob "responde sozinha" e sob "consulta os dados" */
.dica.crm-nota-item{margin:6px 0 0 22px}    /* sob cada ferramenta listada */
.dica.crm-nota-fecho{margin:8px 0 0 22px}   /* "Nunca escreve nada..." */
.dica.crm-nota-recuo{margin-left:22px}      /* sob "marcar a reunião" -- mantém o margin-bottom:12px padrão de .dica */

.crm-canal-desc{font-size:12px;line-height:1.6}      /* crm_config_integracoes.html -- descrição do canal */
.dica.crm-nota-topo{margin:6px 0 0}                  /* crm_config_integracoes.html -- nota sob a resposta automática */
.bd.crm-bd-pequeno{font-size:12px}                   /* crm_config_integracoes.html -- corpo do card de webhook */
.bd.crm-bd-compacto{font-size:12px;line-height:1.85} /* crm_config_integracoes.html -- corpo do card "como apontar um canal" */

.btn.crm-botao-esp{margin-top:8px}   /* crm_config_listas.html -- 8px: não é ESP-04 */

.crm-icone-linha{display:inline-flex;align-items:center;vertical-align:middle}   /* crm_config_respostas.html -- ícone no meio do texto */
.crm-texto-pre{white-space:pre-wrap}                                             /* crm_config_respostas.html -- prévia preserva quebras de linha */

.dica.crm-nota-colada{margin:0}     /* whatsapp_config.html -- primeiro parágrafo colado no título */
.dica.crm-vazio-pad{padding:16px}   /* whatsapp_config.html -- aviso de lista vazia */
/* --- tarefa k2: fim --- */

/* --- tarefa k3: início --- */

/* crm_config_campos.html -- bloco <style> que saiu do template (era idêntico). */
.arrasta{cursor:grab;color:var(--muted);font-size:15px;padding:0 4px;user-select:none;
         display:inline-flex;align-items:center}
.arrasta:active{cursor:grabbing}
.campo-cfg.arrastando,.cfg-grupo.arrastando{opacity:.45;background:#eef4ff}

/* crm_config_campos.html -- `.aba-fixa`/`.aba-fixa-campos` já eram classes do
   template, sem regra nenhuma em folha; o desenho inteiro estava em style=. */
.aba-fixa{display:block}
.aba-fixa summary{font-size:12px;cursor:pointer}
.aba-fixa-campos{padding:6px 0 4px}
.aba-fixa-campos > .dica{margin:8px 0 4px}

.crm-alca-rotulo{display:inline-flex;align-items:center;gap:3px}   /* crm_config_campos.html -- "alça" + ícone, nas duas listas (abas e campos) */

/* crm_config_campos.html + crm_config_categorias.html: nenhuma das duas carrega
   crm.css (regra 7 do plano — config_modulo_base.html não sobrescreve `folhas`
   com ela), então a seção fica aqui. */
.crm-invisivel{visibility:hidden}   /* alça da linha "+ Nova aba"/"+ Nova categoria": mantém o espaço, sem aparecer nem arrastar */
.crm-anuncio-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}   /* aria-live só para leitor de tela (3 usos: anuncio-abas, anuncio-campos, anuncio-categorias) */
.crm-linha-cfg{display:flex;gap:var(--s-2);align-items:center}   /* junto com .crm-grow (flex:1;min-width:0) -- formulário inline das listas de categoria/aba */
.crm-select-150{width:150px}   /* crm_config_campos.html -- select "Vale para" da linha "+ Nova aba" */
.crm-checks-linha{display:flex;gap:18px;flex-wrap:wrap}   /* crm_config_campos.html -- os dois checkboxes do modal "Novo campo" (18px: não é ESP-04) */
.dica.crm-cfg-erro{color:var(--erro-texto)}   /* crm_config_categorias.html -- aviso "categoria em uso"; token nomeado em 17/09/2026 (tarefa d4), valor preservado igual */

/* crm_config_categorias.html -- bloco <style> que saiu do template (era idêntico). */
.cor-bolha{position:relative;display:inline-flex;flex:0 0 auto}
.cor-bola{width:16px;height:16px;border-radius:50%;border:1px solid rgba(0,0,0,.15);
  padding:0;cursor:pointer;flex:0 0 auto}
.cor-bola:focus-visible{outline:2px solid var(--cyan,#2F6D4F);outline-offset:2px}
.cor-pop{position:absolute;top:22px;left:0;z-index:40;display:grid;
  grid-template-columns:repeat(4,18px);gap:8px;padding:10px;
  background:#FFFFFF;border:1px solid var(--line,#E3DDD0);border-radius:8px;
  box-shadow:0 4px 14px rgba(27,32,29,.12)}
.cor-sw{width:18px;height:18px;border-radius:50%;border:2px solid transparent;
  padding:0;cursor:pointer}
.cor-sw.on{border-color:var(--ink,#1B201D)}
.cor-sw:focus-visible{outline:2px solid var(--cyan,#2F6D4F);outline-offset:2px}
.campo-novo .arrasta{cursor:default}

/* --- tarefa k3: fim --- */

/* --- tarefa k4: início --- */
/* crm_conciliacao.html, crm_conciliacao_anuncios.html, crm_fundir.html,
   crm_ia.html (padronizar-templates, 17/09/2026) -- nenhuma sobrescreve
   `folhas` (nem herda de base que carregue crm.css), então a seção fica
   aqui (regra 7). */

.crm-col-96{width:96px}                        /* crm_conciliacao.html -- coluna "Chegou" da fila */
.crm-fs-12-nowrap{font-size:12px;white-space:nowrap}  /* crm_conciliacao.html -- data e telefone da fila */
.crm-col-mensagem{font-size:12px;max-width:320px}     /* crm_conciliacao.html -- coluna "Primeira mensagem" */

.crm-grade-cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:var(--s-3);margin-bottom:var(--s-3)}      /* crm_conciliacao_anuncios.html -- 5 cartões da reconciliação, .grid4 não serve (regra 6) */
.crm-borda-colisao{border-left:var(--barra-acento) solid var(--red)}  /* crm_conciliacao_anuncios.html -- linha marcada (reconciliação e frases) */
.crm-celula-250{max-width:250px;white-space:normal;font-size:12px}    /* crm_conciliacao_anuncios.html -- frase planejada/ao vivo */
.crm-celula-240{max-width:240px;white-space:normal;font-size:12px}    /* crm_conciliacao_anuncios.html -- chamada A/B da aba frases */

.crm-fundir-cab{display:flex;align-items:center;gap:10px;min-width:0}          /* crm_fundir.html -- cabeçalho TELA-05/06 */
.crm-fs-20{font-size:20px}                                                     /* crm_fundir.html -- nome do registro (TELA-05) */
.crm-fundir-subtitulo{margin:2px 0 0}                                          /* crm_fundir.html -- dica colada sob o nome */
.crm-col-22pc{width:22%}                                                       /* crm_fundir.html -- coluna "Campo" da comparação */
.crm-fw-apoio{font-weight:400;color:var(--muted)}                              /* crm_fundir.html -- data de criação sob cada nome */
.crm-fundir-opcao{display:flex;gap:var(--s-2);align-items:flex-start;cursor:pointer}  /* crm_fundir.html -- rótulo do radio de cada lado */
.crm-fundir-rodape{border-top:1px solid var(--line);display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:var(--s-2)}                 /* crm_fundir.html -- rodapé com os dois botões */

.crm-ia-cab{flex-wrap:wrap;gap:9px}                          /* crm_ia.html -- cabeçalho do card de execução */
.crm-mb-11{margin-bottom:11px}                                /* crm_ia.html -- flash de bloqueio */
.crm-mt-5{margin-top:5px}                                     /* crm_ia.html -- dica sob o flash de bloqueio */
.crm-mb-9{margin-bottom:9px}                                  /* crm_ia.html -- dica das ferramentas usadas */
.crm-ia-acoes{display:flex;gap:var(--s-2);margin-top:10px;flex-wrap:wrap}  /* crm_ia.html -- botões aprovar/descartar */
.crm-inline-4{display:inline-flex;align-items:center;gap:var(--s-1)}       /* crm_ia.html -- ícone colado ao texto "Automatize" */
/* --- tarefa k4: fim --- */

/* --- tarefa k5: início --- */
/* crm_treino.html */
.crm-mb-14{margin-bottom:14px}                                    /* card do par (era 14px) */
.crm-hd-quebra{flex-wrap:wrap;gap:var(--s-2)}                      /* .hd do card -- quebra linha com o rótulo */
.crm-titulo-par{font-size:14px}                                    /* título do par (contexto ou "Conversa importada") */
.dica.crm-rotulo{margin:0 0 4px}                                   /* "O cliente perguntou" / "O escritório respondeu" */
.crm-citacao{margin:0;padding:9px 11px;background:var(--bg);border-radius:8px;white-space:pre-wrap}   /* citação da pergunta/resposta */
.crm-citacao.crm-citacao-mb{margin:0 0 12px}                       /* citação com o form de aproveitar/descartar abaixo */
.fld.crm-mt-9{margin-top:9px}                                      /* campo empilhado no form de aproveitar */
.crm-form-acoes{display:flex;gap:var(--s-2);margin-top:11px}       /* Aproveitar / Descartar lado a lado */
.crm-vazio-card{text-align:center;color:var(--muted);padding:28px} /* corpo do card quando não há pares */

/* crm_relatorios.html -- as barras, o seletor e a nota "conta:" são as do painel da Agenda (operacional.css) */
.crm-rel-topo{display:flex;align-items:center;gap:10px;margin-bottom:var(--s-5)}
.crm-rel-topo .crm-rel-seg{flex:0 0 auto}
.crm-rel-topo .barra-filtros{flex:1 1 auto;min-width:0;margin:0;background:transparent;border:0;box-shadow:none;padding:0}
.crm-rel-topo .barra-filtros>.bd{padding:0;gap:6px;flex-wrap:nowrap;align-items:center;justify-content:flex-start}
.crm-rel-topo .barra-filtros .fld{flex:0 0 auto}
.crm-rel-topo .barra-filtros input[type=date]{width:128px}
.crm-rel-topo .barra-filtros select[name=f]{width:140px}
.crm-rel-topo .barra-filtros select[name=resp]{width:150px}
.crm-rel-topo .barra-filtros select[name=o]{width:130px}
.crm-rel-topo .barra-filtros .btn{flex:0 0 auto}
.crm-rel-ate{font-size:12px;color:var(--muted)}
.crm-rel-seg a{padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--muted)}
.crm-rel-seg a.on{background:var(--green);color:#fff}
@media (max-width:1200px){
  .crm-rel-seg a{padding:6px 8px;font-size:12px}
  .crm-rel-topo .barra-filtros input,.crm-rel-topo .barra-filtros select,.crm-rel-topo .barra-filtros .btn{font-size:12px}
  .crm-rel-topo .barra-filtros input[type=date]{width:112px}
  .crm-rel-topo .barra-filtros select[name=f]{width:108px}
  .crm-rel-topo .barra-filtros select[name=resp]{width:108px}
  .crm-rel-topo .barra-filtros select[name=o]{width:92px}
}
.crm-rel-cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:var(--s-5)}
.crm-rel-cartoes .stat .num{font-variant-numeric:tabular-nums}
.crm-rel-grade{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px;margin-bottom:12px;align-items:start}
.crm-rel-grade.crm-rel-meio{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.crm-rel-grade.crm-rel-inteira{grid-template-columns:minmax(0,1fr)}
.crm-rel-grade .card{margin:0}
.crm-rel-grade .op-pn-fn{grid-template-columns:120px minmax(0,1fr) 130px}
.crm-rel-rosca{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:center}
.crm-rel-leg{display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.crm-rel-leg summary{display:grid;grid-template-columns:10px minmax(0,1fr) auto 44px;gap:8px;align-items:center;cursor:pointer;list-style:none}
.crm-rel-leg summary::-webkit-details-marker{display:none}
.crm-rel-leg i{width:10px;height:10px;border-radius:3px;display:block}
.crm-rel-leg b{font-family:var(--fonte-mono);text-align:right}
.crm-rel-leg .pc{color:var(--muted);text-align:right;font-size:11.5px}
.crm-rel-leg .sub{display:grid;grid-template-columns:minmax(0,1fr) auto 44px;gap:8px;padding:3px 0 3px 18px;font-size:12px;color:var(--muted)}
.crm-rel-falta .op-pn-fn-barra i{background:var(--orange)}
.crm-rel-tab td .op-pn-barra{margin:0;width:100%;min-width:60px;height:8px}
.crm-rel-tab th,.crm-rel-tab td{padding-left:8px;padding-right:8px}
.crm-rel-tab th{white-space:normal;line-height:1.25}
.crm-rel-ganho{background:var(--green)}
.crm-rel-perdido{background:var(--red)}
.crm-rel-aberto{flex:1;background:var(--line)}
@media (max-width:900px){.crm-rel-grade,.crm-rel-grade.crm-rel-meio{grid-template-columns:1fr}}

@media (max-width:1000px){
  .crm-rel-topo{flex-wrap:wrap}
  .crm-rel-topo .barra-filtros{flex:1 1 100%}
  .crm-rel-topo .barra-filtros>.bd{flex-wrap:wrap}
  .crm-rel-topo .crm-rel-seg{margin-left:auto}
}
@media (max-width:700px){
  .crm-rel-topo{flex-direction:column;align-items:stretch}
  .crm-rel-topo .barra-filtros>.bd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .crm-rel-topo .barra-filtros .fld,.crm-rel-topo .barra-filtros input[type=date],.crm-rel-topo .barra-filtros select[name]{width:100%}
  .crm-rel-topo .barra-filtros .fld:first-child,.crm-rel-topo .barra-filtros .btn{grid-column:1/-1}
  .crm-rel-ate{display:none}
  .crm-rel-topo .crm-rel-seg{display:flex}
  .crm-rel-topo .crm-rel-seg a{flex:1;text-align:center}
  .crm-rel-grade .op-pn-fn{grid-template-columns:minmax(0,1fr) auto}
  .crm-rel-grade .op-pn-fn-barra{grid-column:1/-1;grid-row:2}
  .crm-rel-grade .op-pn-fn-taxa{white-space:nowrap}
  .crm-rel-rosca{grid-template-columns:1fr;justify-items:center}
  .crm-rel-leg{width:100%}
}

/* crm_salesbot.html */
.crm-topo-voltar{display:flex;align-items:flex-start;gap:var(--s-2);min-width:0}  /* seta de voltar + texto da etapa, no .ph */
.crm-rodape-fluxo{border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:var(--s-2)}  /* rodapé com "Salvar fluxo" */

/* crm_salesbot.html -- bloco <style> que estava na tela (editor visual do fluxo, classes sb-* exclusivas dela) */
.sb-no{border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;margin:6px 0;cursor:pointer;
       background:var(--card);max-width:430px;position:relative}
.sb-no:hover{border-color:var(--cyan)}
.sb-no .t{font-weight:700;font-size:12px}
.sb-no .s{font-size:12px;color:var(--muted);margin-top:2px;white-space:pre-wrap}
.sb-no.acao{border-left:5px solid #22a86a}
.sb-no.condicao{border-left:5px solid #B3762A}
.sb-no.espera{border-left:5px solid #94a3b8}
.sb-ramos{display:flex;gap:22px;align-items:flex-start}
.sb-ramo{flex:1;min-width:230px;border-left:2px dashed var(--line);padding-left:14px;margin-top:4px}
.sb-ramo>.rotulo{font-size:10px;font-weight:800;letter-spacing:.05em;margin-bottom:2px}
.sb-add{font-size:12px;padding:4px 10px}
.sb-x{position:absolute;top:6px;right:8px;color:var(--muted);font-weight:700}
.sb-linha{width:2px;height:14px;background:var(--line);margin-left:24px}
/* --- tarefa k5: fim --- */

/* --- tarefa x1: início --- */
/* ferramentas.html, governanca.html, governanca_documento.html — módulo Ferramentas. */

/* usadas nas três telas */
.ferr-cor-apoio{color:var(--muted)}                     /* nome fantasia do CNPJ; <b> de documento não encontrado */
.ferr-legenda{font-size:12px;color:var(--muted)}        /* resumo do documento; contagem de itens; dica; vazio */

/* ferramentas.html */
.ferr-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.ferr-cartao-link{display:block;text-decoration:none;color:inherit}   /* o <a class="card ferramenta"> */
.ferr-desc{margin:0 0 12px;color:var(--muted);font-size:14px;line-height:1.45}   /* descrição do cartão */
.ferr-acoes{display:flex;align-items:center;gap:6px}    /* editar/excluir do atalho, ao lado do título */
.ferr-form-fim{align-items:flex-end}                    /* form-linha das buscas de CNPJ/CEP */
.ferr-erro-busca{color:var(--red);font-size:12px;margin:10px 0 0}
.ferr-resultado{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:14px;line-height:1.6}
.ferr-m0{margin:0}                                      /* primeira linha do resultado (razão social/CEP) */
.ferr-situacao-inativa{color:var(--red)}                /* situação cadastral quando não é ATIVA */
.ferr-linha6{margin:6px 0 0}
.ferr-linha2{margin:2px 0 0}
.ferr-linha-socios{margin:10px 0 4px}                   /* título "Quadro de sócios (QSA)" */
.ferr-lista-qsa{margin:0;padding-left:18px}
.ferr-mt-12{margin-top:12px}                            /* link de baixar cartão CNPJ / abrir Correios */
.ferr-rodape-nota{margin-top:16px;color:var(--muted);font-size:12px}   /* "Ferramenta desligada?..." */
/* bloco <style> do próprio template, movido pra cá (regras 3 e 8). */
.busca-acao{flex:0 0 auto;min-width:0;display:flex;gap:8px}   /* par Buscar/Limpar das duas consultas */
.busca-ferramenta .fld{min-width:130px}
.ferramenta .tag[data-status]{color:var(--muted)}
.ferramenta .tag.ok{color:var(--green);border-color:var(--green)}
.ferramenta .tag.off{color:var(--red);border-color:var(--red)}

/* governanca.html */
.ferr-card-mb14{margin-bottom:14px}                     /* card de Documentos, acima do de Vocabulários */
.ferr-doc-lista{display:grid;gap:10px}
.ferr-doc-linha{display:flex;gap:14px;align-items:start;padding:10px 0;border-top:1px solid var(--line)}
.ferr-doc-corpo{flex:1;min-width:0}
.ferr-doc-faltando{font-size:12px;color:#8a2333;margin-top:4px}   /* documento não está no servidor */
.ferr-doc-suspeito{font-size:12px;color:#8a5a23;margin-top:4px}   /* espelho de N dias atrás */
.ferr-doc-data{font-size:12px;color:var(--muted);white-space:nowrap;text-align:right}
.ferr-doc-espelho{font-size:10px}                       /* selo "espelho" sob a data */
.ferr-legenda-m0{font-size:12px;color:var(--muted);margin:0}   /* legenda do card de Vocabulários */
.ferr-voc-lista{display:grid;gap:14px}
.ferr-voc-item{padding-top:10px;border-top:1px solid var(--line)}
.ferr-voc-cab{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.ferr-voc-editar{font-size:12px;margin-left:auto}
.ferr-voc-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}

/* governanca_documento.html */
.ferr-abas{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.ferr-aviso-espelho{background:#fdf4e8;border-color:#f0d7ae;color:#8a5a23}   /* cópia sincronizada no deploy */
.ferr-nota-rodape{font-size:12px;color:var(--muted);margin-top:10px}
/* --- tarefa x1: fim --- */

/* --- tarefa x2: início --- */
/* minha_senha.html não carrega configuracoes.css (extends base.html direto),
   por isso as classes desta tela ficam aqui, com o prefixo cfg- (17/09/2026).
   O banner de sucesso da troca de senha passou a usar m.aviso(ok=)/.flash,
   AVISO-02 (17/09/2026, tarefa e2) -- a cópia em `.banner-ok` não existe mais. */
.cfg-card-larga{max-width:520px}
.cfg-titulo-colado{margin-top:0}
.cfg-linha-foto{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.cfg-avatar-grande{width:56px;height:56px;font-size:18px}
.cfg-esp-6{margin-top:6px}
.cfg-esp-baixo-16{margin-bottom:var(--s-4)}
.cfg-esp-12{margin-top:var(--s-3)}
.cfg-esp-10{margin-top:10px}
.cfg-esp-14{margin-top:14px}

/* metricas.html e metricas_relatorio.html também não carregam configuracoes.css
   (extends base.html direto) — prefixo mkt-, área Métricas. */
.mkt-legenda{font-size:12px;color:var(--muted);margin:0}
.mkt-justificado{text-align:justify;hyphens:auto}
.mkt-esp-8{margin-top:var(--s-2)}
.mkt-larg-70ch{max-width:70ch}
.mkt-linha-cartoes{display:flex;gap:14px;flex-wrap:wrap}
.mkt-cartao-flex{flex:1;min-width:220px}
.mkt-rolar{overflow:auto}
.mkt-cor-apoio{color:var(--muted)}
.mkt-larg-min-180{min-width:180px}
.mkt-texto-pre{white-space:pre-wrap;font-size:12px;line-height:1.5;margin:0}
.mkt-lista-limpa{margin:0;padding-left:18px}
/* --- tarefa x2: fim --- */

/* --- tarefa x3: início --- */
.cp-mb-10{margin-bottom:10px}
.cp-mb-6{margin-bottom:6px}
.cp-mb-4{margin-bottom:4px}
.cp-mt-10{margin-top:10px}
.cp-mt-14{margin-top:14px}
.cp-fieldset-limpo{border:0;padding:0;margin:0}
.cp-pb-0{padding-bottom:0}
.cp-dica-topo{margin:4px 0 0 0}
.cp-dica-fundo{margin:0 0 10px 0}
.cp-vao{flex:1}                              /* espaçador do rodapé de paginação, antes de .cp-pag */
/* --- tarefa x3: fim --- */

/* --- tarefa x4: início --- */
/* Campanhas/Puma/envios: contagem medida em 17/09/2026 (28 fixos), plano
   documentos/temporarios/2026-09-17-plano-terminar-padronizacao.md, tarefa x4. */

/* _painel_trafego.html: SVG do gráfico combinado — juntado em 17/09/2026
   (tarefa d6) na peça comum `.grafico-svg`/`.grafico-grade`/`.grafico-eixo`
   (app.css, seção "PEÇAS DE LEIAUTE"), que também cobria `.fin-grafico-*`
   (financeiro.css) e `.mac-svg`/`.mac-grafico-*` (macro grafico_linhas(),
   mais abaixo nesta folha, antes de virar a peça comum). */

/* campanhas_credenciais.html -- o banner de sucesso passou a usar
   m.aviso(ok=)/.flash, AVISO-02 (17/09/2026, tarefa e2) -- a cópia em
   `.banner-ok` não existe mais. */
.mkt-conta-linha{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.mkt-conta-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.mkt-plataforma .hd{gap:var(--s-3)}
.mkt-plataforma .hd .btn{white-space:nowrap;flex-shrink:0}
.mkt-plataforma .hd .s{margin-top:2px;font-size:12px;color:var(--muted)}
.mkt-plataforma .bd > .mkt-conta-linha:last-of-type{border-bottom:0}
.mkt-form-conta{margin:var(--s-2) 0 var(--s-3);padding:var(--s-3);border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.grid2.mkt-campos{grid-template-columns:1fr 1fr}

/* utilitários de espaçamento repetidos nesta tarefa (mesmo padrão de
   `.crm-mt-10`/`.cont-mt-8`, mais abaixo nesta folha) */
.mkt-mt-12{margin-top:var(--s-3)}

/* campanhas_resultado.html */
.mkt-fld-150{min-width:150px}

/* puma.html, puma_conversa.html, puma_insights.html */
.mkt-lista-pilha{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--s-2)}
.mkt-lista-pilha-10{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.mkt-conversa-pilha{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.mkt-insight-item{border:1px solid var(--line);border-radius:8px;padding:10px}   /* --borda vale 1px (largura, tema.css:115), nunca foi cor -- corrigido em 17/09/2026 (tarefa d4) */
.mkt-form-inline{display:inline}

/* dashboard: _compromisso_pop.html */
.sis-chip-fim{align-self:end}
/* --- tarefa x4: fim --- */

/* --- tarefa x5: início --- */
/* Cor de apoio isolada (sem font-size junto) -- usada em _fila_envios.html
   onde só a cor muda, não o tamanho da fonte. */
.sis-cor-muted{color:var(--muted)}
/* _fila_envios.html -- legenda pequena sob o endereço público da mídia. */
.sis-fila-legenda{color:var(--muted);font-size:11px;margin:4px 0}
.cred-wrap.sis-cred-largura{max-width:260px}
.sis-pre-erro{white-space:pre-wrap;word-break:break-word;margin:0}
/* base.html -- form do botão "Sair" dentro do flyout do canto; `*{margin:0}`
   (app.css:14) já zera, esta classe só documenta e dá nome ao seletor
   (a regra da tarefa proíbe seletor de elemento solto tipo `form{}`). */
.sis-flyout-form{margin:0}
/* config_modulo_base.html -- contagem entre parênteses ao lado da aba. */
.sis-cfg-contagem{font-size:10px;color:var(--muted)}
/* widgets/_aniversariantes.html -- cor da barrinha lateral do `.row` deste
   cartão (fica escondida por `.dash-aniversariantes .bar{display:none}` em
   dashboard.css quando esse widget é usado no dashboard, mas a classe
   preserva o valor original para qualquer outro contexto). */
.sis-bar-purple{background:var(--purple)}
/* --- tarefa x5: fim --- */

/* --- tarefa m1: início --- */
/* `_macros.html`: 20 fixos medidos em 17/09/2026, plano
   documentos/temporarios/2026-09-17-plano-terminar-padronizacao.md, tarefa m1.
   Este arquivo é a caixa de peças -- chamado por dezenas de telas, inclusive
   fora desta rodada -- então nenhuma classe compõe com `.linha`/`.pilha` onde o
   valor não é IDÊNTICO ao que a peça aprovada já declara; ver relatório da
   tarefa para a lista macro a macro. */

/* macro caixas(): o <label> de cada opção e a caixa nativa dentro dele.
   Não é `.linha` (ESP-05): falta o `flex-wrap:wrap` que `.linha` sempre tem,
   e por composição isso mudaria o dado (label comprido deixaria de quebrar). */
.mac-caixa-linha{display:flex;align-items:center;gap:8px;font-weight:400;margin-bottom:4px}
.mac-caixa-input{width:auto;margin:0}

/* macro regra() -- o "porquê" permanente do cartão. */
.mac-regra-corpo{line-height:1.6}                 /* composta com `.texto-apoio` */
.mac-p-mb-8{margin:0 0 8px 0}

/* macro grafico_linhas() -- SVG: juntou com as outras duas cópias idênticas
   (`.fin-grafico-*` em financeiro.css, `.mkt-svg`/`.mkt-grafico-*` em
   app.css/x4) na peça comum `.grafico-svg`/`.grafico-grade`/`.grafico-eixo`
   (app.css, seção "PEÇAS DE LEIAUTE", 17/09/2026, tarefa d6). */
/* --- tarefa m1: fim --- */

/* --- conteúdos orgânicos, classes comuns às tarefas org1–org4 (líder, 17/09/2026): início ---
   Espaço interno pequeno (rótulo, legenda, linha de dentro do cartão) copiado do style= que
   saiu; o vão entre blocos empilhados é o .pilha (ESP-04), não estas. */
.cont-mt-6{margin-top:6px}
.cont-mt-8{margin-top:var(--s-2)}
.cont-mt-10{margin-top:10px}
.cont-mt-12{margin-top:var(--s-3)}
.cont-mb-6{margin-bottom:6px}
.cont-mb-8{margin-bottom:var(--s-2)}
.cont-mb-10{margin-bottom:10px}
.cont-mb-12{margin-bottom:var(--s-3)}
.cont-erro{color:var(--red)}
.cont-nowrap{white-space:nowrap}
.cont-acoes{text-align:right;white-space:nowrap}
/* --- conteúdos orgânicos, classes comuns: fim --- */

/* --- Orgânico (Pauta, Banco de assuntos, Configurações): início --- */
.pauta-ficha{display:grid;gap:12px}
.pauta-ficha .linha-dado{display:grid;grid-template-columns:130px 1fr;gap:10px;font-size:13px;border-top:1px solid var(--line);padding-top:10px}
.pauta-ficha .linha-dado>span:first-child{color:var(--muted)}
.pauta-ficha .linha-dado>span:last-child{white-space:pre-line}
.pauta-legendas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pauta-legendas .card .bd{font-size:13px;white-space:pre-line}
.pauta-oab ul{margin:0;padding:0;display:grid;gap:4px}
.pauta-oab li{list-style:none;display:flex;gap:6px;align-items:baseline;font-size:13px}
.pauta-fonte{font-size:12px;color:var(--muted)}
.pauta-redes{display:flex;gap:6px;flex-wrap:wrap}
.pauta-rede{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;border:1px solid var(--line);color:var(--muted);background:var(--card)}
.pauta-rede i{width:7px;height:7px;border-radius:50%;background:var(--muted);display:inline-block}
.pauta-rede.publicado{color:var(--green);border-color:currentColor}.pauta-rede.publicado i{background:var(--green)}
.pauta-rede.aguardando{color:var(--orange);border-color:currentColor}.pauta-rede.aguardando i{background:var(--orange)}
.pauta-rede.erro{color:var(--red);border-color:currentColor}.pauta-rede.erro i{background:var(--red)}
.pauta-envios{display:grid;gap:8px}
.pauta-envio{display:grid;grid-template-columns:110px 1fr auto;gap:10px;align-items:center;font-size:13px;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.pauta-envio .onde{font-weight:700}
.pauta-envio .det{display:block;margin-top:4px;color:var(--muted);font-size:12px}
.pauta-acoes{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.pauta-acoes form{display:inline}
@media (max-width:640px){.pauta-envio{grid-template-columns:1fr}.pauta-legendas{grid-template-columns:1fr}.pauta-ficha .linha-dado{grid-template-columns:1fr;gap:2px}}
.org-semana{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tab-resp tr.org-dia td{background:var(--bg);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:6px;padding-bottom:6px}
.tab-resp tr.org-checklist td{padding-top:0}
.org-filtros-cel{display:none;position:relative}
.org-filtros-cel>summary{list-style:none}
.org-filtros-cel>summary::-webkit-details-marker{display:none}
.org-filtros-cel .org-filtros-pop{max-height:none}
@media (max-width:600px){.org-filtros-cel{display:block}.org-filtros-cel[open]{flex-basis:100%}.org-filtros-cel .org-filtros-pop{position:static;margin-top:6px;max-width:none;box-shadow:none}.tab-resp tr.org-dia{padding:0;background:var(--bg)}.tab-resp tr.org-dia td{flex-basis:100%;padding:6px 14px}}
/* --- Orgânico (Pauta, Banco de assuntos, Configurações): fim --- */

/* --- tarefa org3: início --- */
/* --- tarefa org3: fim --- */

/* --- tarefa org4: início --- */
/* --- tarefa org4: fim --- */

/* --- tarefa org5: início --- */
/* --- tarefa org5: fim --- */

/* --- tarefa org6: início --- */
/* --- tarefa org6: fim --- */
.chat-tela.crm .lp-topo-conversa{display:flex;align-items:center;gap:9px;
  padding:9px 14px;border-bottom:1px solid var(--line);flex:0 0 auto}
.chat-tela.crm .lp-topo-conversa .lp-topo{flex:1;min-width:0;margin-bottom:0}
.chat-tela.crm .lp-topo-conversa .o3-busca-caixa{margin-left:auto}
.chat-tela.crm .lp-foto-link{flex:0 0 auto;display:flex;border-radius:50%;border:0;background:none;padding:0;cursor:pointer}
.chat-tela.crm .lp-foto-link:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.chat-tela.crm .lp-voltar-chats{display:none;flex:0 0 auto}
.chat-tela.crm .lp-topo-painel-mobile{display:none}
@media (max-width:900px){
  .main.altura-janela:has(> .chat-tela.crm.lead){height:100vh;display:flex;flex-direction:column}
  .main.altura-janela > .chat-tela.crm.lead{flex:1 1 auto;height:auto;min-height:0}
  .chat-tela.crm.com-aberta.lead{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr)}
  .chat-tela.crm.com-aberta.lead .chat-lista,
  .chat-tela.crm.com-aberta.lead .chat-painel{display:none}
  .chat-tela.crm.com-aberta.lead .chat-conversa{min-height:0;height:100%}
  .chat-tela.crm.com-aberta.lead.ficha-aberta .chat-conversa{display:none}
  .chat-tela.crm.com-aberta.lead.ficha-aberta .chat-painel{display:flex;height:100%;min-height:0}
  .chat-tela.crm .lp-voltar-chats{display:inline-flex}
  .chat-tela.crm .lp-topo-painel-mobile{display:flex}
  .chat-tela.crm .lp-topo-conversa{flex-wrap:nowrap}
}

/* DICA-01 — dica ao passar o mouse, só em ícone sem texto (Padrao-Visual/design-system.md) */
[data-dica]{position:relative}
[data-dica]::after{content:attr(data-dica);position:absolute;bottom:calc(100% + 6px);left:50%;
  transform:translateX(-50%);background:var(--ink);color:var(--card);padding:4px 8px;
  border-radius:var(--r-sm);font-size:11px;font-weight:500;line-height:1.3;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .12s;z-index:300}
[data-dica]:hover::after,[data-dica]:focus-visible::after{opacity:1;transition-delay:400ms}
.chat-tela .o3-so-ic[data-dica]::after{bottom:auto;top:calc(100% + 6px);left:auto;right:0;transform:none}

/* Áudio no jeito do WhatsApp: play redondo, barra fina, duração e velocidade */
.audio-zap{display:flex;align-items:center;gap:8px;width:260px;max-width:100%}
.audio-play{width:32px;height:32px;border-radius:50%;border:0;background:var(--green);color:#fff;
  display:grid;place-items:center;cursor:pointer;flex:0 0 auto;padding:0}
.audio-play .ico{width:14px;height:14px;fill:currentColor}
.audio-barra{flex:1;min-width:0;height:3px;accent-color:var(--green);cursor:pointer}
.audio-tempo{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:30px}
.audio-vel{border:0;border-radius:10px;background:var(--line);color:var(--ink);font-size:10.5px;
  font-weight:700;padding:2px 7px;cursor:pointer;font-family:inherit;flex:0 0 auto}
.audio-zap audio{display:none}
.chat-anexo-pe.so-icone{gap:4px}
.chat-anexo-pe.so-icone .chat-baixar{margin-top:2px;padding:3px;border-radius:var(--r-sm);color:var(--muted)}
.chat-anexo-pe.so-icone .chat-baixar:hover{background:var(--bg);color:var(--ink);text-decoration:none}
.audio-transcricao{max-width:300px;margin-top:6px;font-size:12.5px;line-height:1.4;color:var(--muted)}
.audio-transcricao span{display:block;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:1px}
/* Seletor de várias opções da ficha: fechado mostra o que está marcado; aberto,
   caixas de marcar. O `<select multiple>` escondido é quem grava. */
.lp-multi{position:relative;min-width:0}
.lp-multi>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:12px;
  color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:5px 8px;background:var(--card)}
.lp-multi>summary::-webkit-details-marker{display:none}
.lp-multi-resumo{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-multi-pop{position:absolute;right:0;width:250px;top:calc(100% + 4px);z-index:20;background:var(--card);
  border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 28px rgba(27,32,29,.16);padding:6px 0}
.lp-multi .lp-multi-op{display:flex;align-items:flex-start;gap:8px;padding:6px 10px;font-size:12px;
  color:var(--ink);text-align:left;cursor:pointer}
.lp-multi-op:hover{background:var(--bg)}
.lp-multi-op input{margin:2px 0 0;flex:0 0 auto;width:auto}
.lp-multi-op small{display:block;color:var(--muted);font-size:10.5px;line-height:1.3}
.lp-multi-pe{font-size:10.5px;color:var(--muted);padding:6px 10px 2px;border-top:1px solid var(--line);margin-top:4px}
.lp-multi-valor{display:none}
/* Tarefa rápida na linha "Data e horário da tarefa" */
.lp-agenda{position:relative;min-width:0}
.lp-agenda-bt{display:inline-flex;align-items:center;gap:6px;border:1px dashed var(--line);border-radius:6px;
  padding:4px 8px;font-size:12px;color:var(--ink);background:none;cursor:pointer;font-family:inherit}
.lp-agenda-bt:hover{border-color:var(--navy)}
.lp-agenda-pop{position:absolute;right:0;top:calc(100% + 4px);z-index:20;width:250px;background:var(--card);
  border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px rgba(27,32,29,.18);padding:10px;
  display:flex;flex-direction:column;gap:8px}
.lp-agenda-pop[hidden]{display:none}
.lp-agenda-pop.acima{top:auto;bottom:calc(100% + 4px)}
.lp-agenda-quando{display:grid;grid-template-columns:1fr 84px;gap:8px}
.lp-agenda-pop input,.lp-agenda-pop select{width:100%;box-sizing:border-box}
.lp-agenda-acao{display:flex;justify-content:flex-end;gap:8px}
.chat-tela .o3-trava{color:var(--muted)}
.kb-col.fecho .kb-head{background:color-mix(in srgb,var(--cor-etapa) 12%,transparent)}
.kb-selo{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;flex:0 0 auto;
  color:var(--green);background:var(--sucesso-fundo);border:1px solid var(--sucesso-borda)}
.kb-selo .ico{width:13px;height:13px}
.kb-selo[data-dica]::after{bottom:auto;top:calc(100% + 6px);left:auto;right:0;transform:none}
/* "ⓘ" da ficha do lead: a frase é longa, então o balão quebra linha e abre para dentro da ficha. */
.lp-info[data-dica]::after{bottom:auto;top:calc(100% + 6px);left:0;transform:none;white-space:normal;width:200px}
/* O balão escondido não pode abrir rolagem para os lados na ficha. */
.chat-tela.crm .chat-painel{overflow-x:hidden}
/* Na chave da IA e das automações o "ⓘ" fica na coluna do valor: o balão abre para a esquerda. */
/* Dentro da ficha a caixa abre para baixo e com quebra de linha, presa ao
   lado de onde está: a coluna corta o que passa da borda. */
.chat-painel [data-dica]::after{bottom:auto;top:calc(100% + 6px);left:auto;right:0;transform:none;
  white-space:normal;width:200px}
.chat-painel .lp-linha>label [data-dica]::after,.chat-painel .lp-grupo [data-dica]::after{left:0;right:auto}
/* "Bate-papo com" recolhe antes do nome. */
.chat-tela.crm .chat-form-prefixo{display:flex;gap:3px}
.chat-tela.crm .chat-form-prefixo #chat-prefixo{flex:0 100000 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.chat-tela.crm .chat-form-prefixo b{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.o3-ia-info.ligada{color:var(--green)}
.o3-ia-info.alerta{color:var(--orange);animation:o3PiscaAlerta .9s ease 2}

/* ---- Números do dia e do período: linha dos últimos dias, comparação e listas (Início e Métricas) */
.ini-resumo{font-size:15px;line-height:1.55;color:var(--ink);max-width:72ch;margin:16px 0 24px}
.ini-resumo b{font-weight:600}
.ini-numeros{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:24px}
.ini-num{display:flex;flex-direction:column;gap:4px;padding:0 16px;border-left:1px solid var(--line);color:inherit;text-decoration:none}
.ini-num:first-child{border-left:0;padding-left:0}
.ini-rot{font-size:12px;font-weight:600;color:var(--muted)}
.ini-val{font-family:var(--fonte-mono);font-size:28px;font-weight:800;letter-spacing:-.5px;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.ini-num:hover .ini-val{color:var(--green)}
.ini-comp{font-size:11px;color:var(--muted)}
.ini-ruim .ini-val,.ini-ruim .ini-rot{color:var(--red)}
.ini-faisca{width:100%;max-width:120px;height:26px;display:block}
.ini-faisca polyline{stroke:var(--muted);stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:.6}
.ini-faisca circle{fill:var(--ink)}
.ini-colunas{display:grid;grid-template-columns:3fr 2fr;gap:12px;margin-bottom:12px;align-items:start}
.ini-cartao{border-radius:8px;box-shadow:0 1px 3px rgba(27,32,29,.08)}
.ini-lista,.ini-agenda{list-style:none;margin:0;padding:0 16px}
.ini-lista li,.ini-agenda li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.ini-lista li:last-child,.ini-agenda li:last-child{border-bottom:0}
.ini-marca{width:8px;height:8px;border-radius:50%;background:var(--line);flex-shrink:0}
.ini-marca.erro{background:var(--red)}
.ini-marca.atencao{background:var(--atencao-texto)}
.ini-o-que{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--ink);display:flex;flex-direction:column;gap:2px}
.ini-o-que small{font-size:12px;font-weight:400;color:var(--muted)}
.ini-lado{font-family:var(--fonte-mono);font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.ini-agenda time{font-family:var(--fonte-mono);font-size:12px;color:var(--muted);width:44px;flex-shrink:0;font-variant-numeric:tabular-nums}
.ini-tabela{width:100%;border-collapse:collapse;font-size:12px}
.ini-tabela th{text-align:left;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:var(--linha-cabecalho);padding:8px 16px}
.ini-tabela td{padding:9px 16px;border-top:1px solid var(--line);color:var(--ink)}
.ini-tabela td:first-child{font-weight:600}
.ini-rodape-card{font-size:12px;color:var(--muted);padding:10px 16px;border-top:1px solid var(--line);margin:0}
.ini-rodape-card a,.card .hd a.texto-apoio{color:var(--green);text-decoration:none}
.ini-mes{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0;padding:16px}
.ini-mes dt{font-size:12px;color:var(--muted)}
.ini-mes dd{margin:4px 0 0;font-family:var(--fonte-mono);font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.ini-progresso{padding:0 16px 16px}
.ini-progresso-rot{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:6px}
.ini-barra{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.ini-barra span{display:block;height:100%;background:var(--green)}
.ini-sistema{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin:16px 0}
.ini-faisca polyline{fill:none}
a.ini-o-que{text-decoration:none}
a.ini-o-que:hover{color:var(--green)}
.ini-tabela a{color:inherit;text-decoration:none}
.ini-tabela a:hover{color:var(--green)}
.ini-link{font-size:12px;color:var(--green);text-decoration:none}
.ini-link:hover,.ini-rodape-card a:hover{text-decoration:underline}
.ini-rolagem{overflow-x:auto}
.ini-mes dd.ini-negativo{color:var(--red)}
.ini-cartao .vazio-bloco{padding:16px}
.ini-sistema a{color:inherit;text-decoration:none}
.ini-sistema a:hover{text-decoration:underline}
.ini-sistema-amarelo{color:var(--atencao-texto)}
.ini-sistema-vermelho{color:var(--erro-texto)}
@media(max-width:900px){
  .ini-numeros{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:16px}
  .ini-num:nth-child(4){border-left:0;padding-left:0}
  .ini-colunas{grid-template-columns:1fr}
}
@media(max-width:600px){
  .ini-numeros{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ini-num{border-left:0;padding-left:0}
  .ini-num:nth-child(2n){border-left:1px solid var(--line);padding-left:16px}
  .ini-val{font-size:22px}
  .ini-col-origem{display:none}
}

.met-nota{padding:8px 16px 12px;margin:0}
.met-bom{color:var(--sucesso-texto);font-weight:600}
.met-mau{color:var(--erro-texto);font-weight:600}
.met-dir{text-align:right!important;font-variant-numeric:tabular-nums}
.met-regua>summary{cursor:pointer;list-style:none}
.met-regua>summary::-webkit-details-marker{display:none}
.met-regua>summary{display:block;margin-bottom:12px}
.met-regua>summary .hd{border-bottom:0}
.met-regua[open]>summary .hd{border-bottom:1px solid var(--line)}
.met-comparar{font-size:12px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);margin-left:6px}
.met-modulo{margin-bottom:20px;scroll-margin-top:16px}
.met-tab td,.met-tab th{padding:9px 14px}
.met-tab td.met-dir{font-family:var(--fonte-mono);white-space:nowrap}
.met-nome{color:inherit;text-decoration:none;border-bottom:1px dotted var(--muted)}
.met-agora{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:10px 14px 4px}
.met-borrado{filter:blur(5px);user-select:none;opacity:.7}
.met-breve{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:12px;background:var(--line);color:var(--muted);margin-left:8px;vertical-align:middle}
.met-cruzar-form{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;padding:14px 16px;border-bottom:1px solid var(--line)}
.met-cruzar-form label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)}
.met-cruzar-form label .met-comparar{margin-left:0}
.met-cruzar-jeito{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.met-total td{font-weight:700;border-top:1px solid var(--line)}
@media(max-width:600px){.met-so-largo{display:none}.met-modulo{overflow-x:auto}.card>table.met-tab{display:table;white-space:normal}.met-tab td,.met-tab th{padding:8px 10px}}
.met-comparador{margin:16px 0 20px}
.met-base{font-size:9px;padding:1px 6px;border-radius:10px;background:var(--line);margin-left:4px}

.crm-perda{border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:14px}
.crm-perda-cat{border-bottom:1px solid var(--line)}
.crm-perda-cat:last-of-type{border-bottom:0}
.crm-perda-cat.aberto{background:var(--bg)}
.crm-perda-abrir{display:flex;align-items:center;gap:8px;width:100%;min-height:36px;padding:0 10px;border:0;background:transparent;font:inherit;font-size:13px;color:inherit;text-align:left;cursor:pointer}
.crm-perda-abrir svg{color:var(--muted);transition:transform .15s;flex-shrink:0}
.crm-perda-cat.aberto .crm-perda-abrir svg{transform:rotate(180deg)}
.crm-perda-qtd{font-size:11px;color:var(--muted)}
.crm-perda-motivos{display:grid;gap:2px;padding:2px 10px 10px 31px}
.crm-perda-motivo{display:flex;align-items:center;gap:8px;min-height:28px;font-size:13px;cursor:pointer}
.crm-perda-motivo input{margin:0;flex-shrink:0;cursor:pointer}
.crm-perda-data{display:flex;align-items:center;gap:10px;padding:10px;border-top:1px solid var(--line);font-size:12px;font-weight:700}
.crm-perda-data[hidden]{display:none}
.crm-perda-data input{border:1px solid var(--line);border-radius:9px;padding:8px 10px;font:inherit;font-weight:400}
.crm-perda-nome{flex:1;min-width:0}

/* CARD-03 (Padrao-Visual/design-system.md): tabela `table.tab-resp`, cortes de TELA-03.
   Até 1200px sai `.cel-larga`; até 900px saem as `.cel-sec`; até 600px cada linha vira
   uma ficha — sem cabeçalho, o primeiro dado em cima, os outros lado a lado embaixo,
   com o rótulo de `data-rotulo` quando o número sozinho não diz de quê. */
@media (max-width:1200px){ .tab-resp .cel-larga{display:none} }
@media (max-width:900px){ .tab-resp .cel-sec{display:none} }
@media (max-width:600px){
  table.tab-resp, table.tab-resp tbody{display:block;min-width:0}
  table.tab-resp thead{display:none}
  table.tab-resp tbody tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
    padding:10px 14px;border-bottom:1px solid var(--line)}
  table.tab-resp tbody tr[hidden]{display:none}
  table.tab-resp tbody td{display:block;padding:0;border:0;white-space:normal}
  table.tab-resp tbody td:first-child{flex-basis:100%}
  table.tab-resp tbody td.col-num{text-align:left}
  table.tab-resp .cad-col-acao{margin-left:auto}
  table.tab-resp .cel-vazia{display:none}
  table.tab-resp tbody td[data-rotulo]::before{content:attr(data-rotulo);display:block;font-family:var(--fonte-ui);font-size:11px;font-weight:400;color:var(--muted)}
}