/* === Tokens (26/09, F6: passada de design) ===
   Cores: o Deep Void da Gartner com superfícies num tom frio, o trio pastel e as cores de estado (22/09).
   Letra: 6 tamanhos de texto (12, 13, 14, 15, 17 e 22 px; 12 px é o mínimo) e 2 de número em destaque (28 px e o
   número principal da tela, que cresce com a janela). Nenhum font-size solto: o test_design.py conta os literais.
   Raio: 3 tamanhos (6, 10 e 14 px) e a pílula; 50% é círculo. Controles: 36 px de altura, 30 px no mini. */
:root{color-scheme:dark;
--void:#0e0e0e;--sup:#14151a;--sup2:#1b1c23;--linha:#262833;--linha2:#343747;
--texto:#f2f3f5;--suave:#a3a6b4;--apagado:#8b8e9c;--sobre-acento:#06161c;--vidro:color-mix(in srgb,var(--void) 90%,transparent);
--sunset:linear-gradient(90deg,#f4c587 9%,#d6d3e9 52%,#99d2ec 94%);
--ciano:#6fe2ff;--ambar:#ffba6a;--lavanda:#c9bfff;--menta:#7ee8b0;--coral:#ff8f8f;--rosa:#ff9fd0;--ardosia:#9aa6c1;--acento:var(--ciano);
--serie-volume:#169ccb;--serie-resposta:#d07c1c;--serie-site:#8f7dff;--serie-contato:#23a86f;
--sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"Geist Mono",ui-monospace,Consolas,monospace;
--t-xs:.75rem;--t-sm:.8125rem;--t-md:.875rem;--t-base:.9375rem;--t-lg:1.0625rem;--t-xl:1.375rem;
--t-num:1.75rem;--t-heroi:clamp(2.25rem,3.3vw,3.1rem);
--r-sm:6px;--r-md:10px;--r-lg:14px;--r-pilula:999px;
--controle:2.25rem;--controle-mini:1.875rem;
--brilho:inset 0 1px 0 rgba(255,255,255,.045);--sombra:0 1px 2px rgba(0,0,0,.35),0 16px 32px -20px rgba(0,0,0,.85);
--transicao:150ms cubic-bezier(.2,.6,.3,1)}
*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--c,var(--ciano)) 34%,var(--linha2)) transparent}
[hidden]{display:none!important}
body{margin:0;min-height:100vh;color:var(--texto);font:var(--t-base)/1.5 var(--sans);-webkit-font-smoothing:antialiased;background:var(--void)}
[data-etapa=fila]{--c:var(--ardosia)}
[data-etapa=aguardando]{--c:var(--ciano)}
[data-etapa=followup]{--c:var(--ambar)}
[data-etapa=respondeu]{--c:var(--lavanda)}
[data-etapa=negociacao]{--c:var(--rosa)}
[data-etapa=ganho]{--c:var(--menta)}
[data-etapa=perdido]{--c:var(--coral)}
[data-etapa=bloqueado]{--c:var(--apagado)}
a{color:var(--ciano);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}
/* foco: o mesmo anel de 2 px, na cor da seção, em todo controle (26/09, F6: select e textarea também) */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* === Mapa do arquivo (26/09, F6) ===
   1. Tokens (o :root acima) e a base: elementos, foco, rolagem.
   2. Componentes, logo abaixo: Cartão, campo (junto de input), tabela (junto de .tabela), Botão, Cápsulas e o cabeçalho
      de página (junto de .pagina-topo).
   3. As telas, na ordem em que nasceram (15/09 a 26/09): quadro, Início, Conversas, ficha, Configurações, Mensagens,
      Buscas, entrada, Site, Monitor, Agente, Instagram, Financeiro e Clientes; no fim, as frentes da simplificação de
      26/09 (lateral e Configurações, assistente, Conversas, atendimento, funil e Contatos).
   A ordem conta: mais abaixo vence mais acima, com o mesmo peso. Componente se muda no bloco dele, tela na seção dela;
   o test_design.py barra letra e raio fora dos tokens e a mesma regra escrita duas vezes. */
/* === Cartão (26/09, F6) ===
   A mesma superfície para todo bloco de conteúdo (eram 20 regras com o mesmo fundo, fio e raio escritos de novo, e 6
   respiros diferentes): fundo --sup, fio --linha, raio grande e o brilho de cima; no tema claro, a sombra. O respiro
   padrão é o do .painel-bloco; os cartões de número (status, kpi) e as listas mantêm o compacto deles. */
.painel-bloco,.ajuste-secao,.status,.kpi,.kpi-heroi,.faixa-kpis,.coluna,.conversas-app,.passos,.primeiros-passos,.etapa-seq,.editor-form,.funis-lista,.funil-escolhido,.whatsapp-tela,.ig-cartao,.monitor-lista,.barra-estado,.fin-principal,.monitor-geral{background:var(--sup);border:1px solid var(--linha);border-radius:var(--r-lg);box-shadow:var(--brilho)}
.painel-bloco,.ajuste-secao,.etapa-seq,.editor-form,.funil-escolhido,.whatsapp-tela,.ig-cartao,.fin-principal{padding:1rem 1.1rem}
:root[data-tema=claro] :is(.painel-bloco,.ajuste-secao,.status,.kpi,.kpi-heroi,.faixa-kpis,.coluna,.conversas-app,.passos,.primeiros-passos,.etapa-seq,.editor-form,.funis-lista,.funil-escolhido,.whatsapp-tela,.ig-cartao,.monitor-lista,.barra-estado,.fin-principal,.monitor-geral){box-shadow:var(--sombra)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{border:3px solid transparent;background:color-mix(in srgb,var(--c,var(--ciano)) 30%,var(--linha2));background-clip:padding-box;border-radius:var(--r-pilula)}
::-webkit-scrollbar-thumb:hover{border:2px solid transparent;background:color-mix(in srgb,var(--c,var(--ciano)) 62%,var(--linha2));background-clip:padding-box}
::-webkit-scrollbar-thumb:active{background:var(--c,var(--ciano));background-clip:padding-box}
.app{display:grid;grid-template-columns:15rem minmax(0,1fr);min-height:100vh}
.lateral{top:0;height:100vh;display:flex;flex-direction:column;border-right:1px solid var(--linha);position:sticky;gap:1rem;padding:1rem .75rem .85rem;background:var(--void);overflow:hidden}
.lateral .marca{color:var(--texto);padding:.15rem .35rem;gap:.6rem}
.lateral .marca:hover{text-decoration:none}
.lateral-topo{display:flex;align-items:center;justify-content:space-between;gap:.1rem}
.recolher{display:grid;place-items:center;min-width:2rem;min-height:2rem;padding:.4rem;border-radius:var(--r-md);background:none;border:1px solid transparent;color:var(--apagado);cursor:pointer}
.recolher:hover{color:var(--texto);background:var(--sup2);border-color:var(--linha);filter:none}
:root[data-lateral="1"] .app{grid-template-columns:4.4rem minmax(0,1fr)}
:root[data-lateral="1"] .lateral{padding:1.25rem .55rem;gap:1.1rem}
:root[data-lateral="1"] .lateral-topo{flex-direction:column;gap:.7rem}
:root[data-lateral="1"] .marca-texto,:root[data-lateral="1"] .nav-principal a span{display:none}
:root[data-lateral="1"] .marca{padding:.2rem}
:root[data-lateral="1"] .nav-principal a{justify-content:center;padding:.55rem}
:root[data-lateral="1"] .recolher .ico{transform:scaleX(-1)}
.area{min-width:0;display:flex;flex-direction:column;background:radial-gradient(70rem 18rem at 18% -7rem,color-mix(in srgb,var(--acento) 16%,transparent),transparent 72%),var(--void)}
.barra-pagina{top:0;z-index:5;display:flex;align-items:center;gap:1.25rem;padding:.65rem clamp(1rem,2.5vw,2rem);border-bottom:1px solid var(--linha);backdrop-filter:blur(8px);position:relative;background:var(--vidro)}
/* Com muitos funis a faixa rola, mas sem barra à mostra e com uma sombra na beirada avisando que há mais
   (17/09 à noite: o cadastro de funis deixou o número de abas variável). */
.abas{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none;min-width:0;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 1.5rem),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 1.5rem),transparent)}
.abas::-webkit-scrollbar{display:none}
.abas a{padding:.45rem .85rem;border-radius:var(--r-md);color:var(--suave);font-size:var(--t-md);white-space:nowrap;transition:background-color .15s ease,color .15s ease}
.abas a:hover{color:var(--texto);background:var(--sup);text-decoration:none}
.abas a.atual{color:var(--texto);background:var(--sup2);box-shadow:inset 0 0 0 1px var(--linha2)}
/* Índice do grupo (17/09): segundo nível, mais leve que as abas, separado por uma barra. */
.abas-dentro{display:flex;align-items:center;gap:.9rem;overflow-x:auto;padding-left:1rem;margin-left:.2rem;border-left:1px solid var(--linha2)}
.abas-dentro a{color:var(--apagado);font-size:var(--t-sm);white-space:nowrap}
.abas-dentro a:hover{color:var(--texto);text-decoration:none}
.abas-dentro a.atual{color:var(--texto);font-weight:500;box-shadow:0 1px 0 var(--ciano)}
.ico{flex:none}
.marca{display:flex;align-items:center;gap:.75rem}
.marca-texto{display:flex;flex-direction:row;align-items:center;gap:.45rem}
.olho,.rotulo{font:500 var(--t-xs)/1 var(--sans);color:var(--suave)}
.marca b{font-size:var(--t-lg);font-weight:600;letter-spacing:-.01em;line-height:1}
.nav-principal a{display:flex;align-items:center;font-weight:500;transition:background-color .15s ease,color .15s ease;position:relative;min-height:2.3rem;padding:.42rem .7rem;gap:.65rem;border-radius:var(--r-md);font-size:var(--t-md);color:var(--suave)}
.nav-principal a:hover{color:var(--texto);text-decoration:none;background:color-mix(in srgb,var(--s) 7%,var(--sup))}
main{padding:clamp(1rem,2.5vw,2rem)}
@media (max-width:900px){
.app{grid-template-columns:1fr}
.barra-pagina{position:static}
}
main.estreito{max-width:34rem;margin:0 auto;text-align:center}
main.estreito img{background:#fff;padding:12px;border-radius:var(--r-lg);margin-top:1rem;box-shadow:0 0 0 1px var(--linha),0 0 40px color-mix(in srgb,var(--ciano) 12%,transparent)}
h1{font-size:var(--t-xl);font-weight:600;letter-spacing:-.015em;margin:0 0 .75rem;text-wrap:balance}
p{color:var(--suave)}
.linha-status{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.75rem;margin-bottom:.75rem}
.status{--t:var(--ardosia);min-width:0;display:flex;flex-direction:column;gap:.35rem;padding:.95rem 1.05rem;border:1px solid color-mix(in srgb,var(--t) 24%,var(--linha))}
.status[data-tom=ok]{--t:var(--menta)}
.status[data-tom=alerta]{--t:var(--ambar)}
.status[data-tom=info]{--t:var(--ciano)}
.status strong{display:flex;align-items:center;gap:.55rem;font-size:var(--t-lg);font-weight:600;letter-spacing:-.01em}
.status[data-tom=ok] strong{color:var(--menta)}
.status[data-tom=alerta] strong{color:var(--ambar)}
.status .sub{color:var(--suave);font-size:var(--t-md);overflow-wrap:break-word}
.ponto{width:.55rem;height:.55rem;border-radius:50%;background:var(--c,var(--apagado));flex:none}
.status .ponto{background:var(--t);box-shadow:0 0 0 4px color-mix(in srgb,var(--t) 18%,transparent)}
.barra{height:5px;border-radius:var(--r-pilula);background:var(--linha);overflow:hidden;margin-top:.25rem}
.barra span{display:block;height:100%;border-radius:var(--r-pilula);background:linear-gradient(90deg,var(--ciano),var(--lavanda))}
.total{font:var(--t-sm) var(--sans);color:var(--suave);font-variant-numeric:tabular-nums}
.funil{display:flex;gap:3px;height:10px;border-radius:var(--r-pilula);overflow:hidden;background:var(--linha)}
.funil span{background:var(--c);min-width:8px}
.destaque{display:flex;align-items:baseline;gap:.4rem;white-space:nowrap}
.destaque b{font:500 var(--t-lg)/1 var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.legenda-linha{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .9rem;list-style:none;margin:0;padding:0}
.legenda-linha li{display:flex;align-items:center;gap:.35rem;min-width:0;white-space:nowrap;font-size:var(--t-xs);color:var(--suave)}
.legenda-linha li>span{overflow:hidden;text-overflow:ellipsis}
.legenda-linha b{font:500 var(--t-md)/1 var(--mono);color:var(--c);font-variant-numeric:tabular-nums}
.legenda-linha li[data-zero] b{color:var(--apagado)}
.legenda-linha li[data-zero] .ponto{opacity:.45}
.legenda-linha .total{font:var(--t-xs) var(--sans);color:var(--apagado)}
.funil-bloco{display:flex;flex-direction:column;gap:.55rem}
.funil-bloco .destaque b{font-size:var(--t-xl)}
.funil-bloco .funil{height:12px}
.funil-bloco .legenda-linha{display:grid;grid-template-columns:1fr;gap:0}
.funil-bloco .legenda-linha li{padding:.3rem 0;font-size:var(--t-md);border-bottom:1px solid color-mix(in srgb,var(--linha) 65%,transparent)}
.funil-bloco .legenda-linha b{margin-left:auto;font-size:var(--t-lg)}
.funil-bloco .legenda-linha .total{justify-content:flex-end;border-bottom:0;padding-top:.45rem}
.barra-ferramentas{display:flex;align-items:center;margin-bottom:.7rem;flex-wrap:nowrap;justify-content:flex-start;gap:.6rem}
.barra-ferramentas h1{margin:0;white-space:nowrap;font-size:var(--t-lg)}
.barra-ferramentas input{flex:1 1 14rem;width:min(24rem,100%)}
input{font:inherit;padding:.6rem .8rem;border-radius:var(--r-md);border:1px solid var(--linha);background:var(--sup);color:var(--texto)}
input:focus{border-color:color-mix(in srgb,var(--ciano) 55%,var(--linha))}
input::placeholder{color:var(--apagado)}
/* campo (26/09, F6): caixa de texto e seletor têm a altura do botão ao lado (36 px; eram 13 alturas, de 31 a 47 px), e
   30 px nos compactos (barra de lote, ficha, vencimento). Com :where a altura pesa zero: quem tem altura própria (a
   entrada, os campos embutidos) a mantém. O respiro de cima e de baixo some na altura fixa; o texto fica no meio. */
:where(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=hidden])),:where(select){height:var(--controle)}
.barra-lote select,.barra-lote input,.ficha-concluir select,.ficha-atendimento select,.dia-vencimento input,.cli-passo input[type=date],
.form-papel select{height:var(--controle-mini)}
.campo-moeda input,.comandos-campo input,.campo .cidades-campo input{height:auto}
.atualizado{font:var(--t-xs) var(--sans);color:var(--apagado)}
/* Filtros num botão só (17/09): a barra de ferramentas guarda contexto, busca e a ação principal. */
.filtros-menu{position:relative;flex:none}
.filtros-menu>summary{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .7rem;border-radius:var(--r-md);border:1px solid var(--linha2);background:var(--sup2);color:var(--suave);font-size:var(--t-sm);white-space:nowrap;cursor:pointer;list-style:none}
.filtros-menu>summary::-webkit-details-marker{display:none}
.filtros-menu>summary:hover{color:var(--texto);border-color:color-mix(in srgb,var(--ciano) 45%,var(--linha2))}
.filtros-menu[data-ativos]>summary{color:var(--texto);border-color:color-mix(in srgb,var(--ciano) 55%,var(--linha2))}
.filtros-menu[open]>summary .ico:last-child{transform:rotate(180deg)}
.filtros-conta{display:grid;place-items:center;min-width:1.15rem;height:1.15rem;padding:0 .25rem;border-radius:var(--r-pilula);background:var(--ciano);color:var(--void);font:600 var(--t-xs)/1 var(--sans)}
.filtros-painel{position:absolute;z-index:30;top:calc(100% + .35rem);left:0;display:flex;flex-direction:column;gap:.7rem;width:min(17rem,calc(100vw - 2rem));padding:.85rem;border-radius:var(--r-lg);border:1px solid var(--linha2);background:var(--sup);box-shadow:var(--sombra)}
.filtros-painel .campo{gap:.3rem}
.filtros-painel select{width:100%;max-width:none;padding:0 .55rem;cursor:pointer}
.filtros-aplicar{min-height:var(--controle-mini);padding:.4rem .75rem;font-size:var(--t-sm)}
.filtros-limpar{display:inline-flex;align-items:center;gap:.3rem;font-size:var(--t-xs);color:var(--suave)}
.filtros-limpar:hover{color:var(--texto)}
.quadro-rolagem{overflow-x:auto;padding-bottom:.35rem}
main.cheio .bloqueados{margin:0}
.quadro{grid-auto-flow:column;grid-auto-columns:minmax(11.5rem,1fr);display:flex;gap:.6rem;align-items:stretch}
/* 24/09: coluna com pelo menos ~210 px, para o nome da etapa não quebrar no meio da palavra ("Respond/eu") */
.coluna{overflow:hidden;flex:1 1 13.125rem;min-width:13.125rem}
.coluna header{display:flex;align-items:flex-start;background:color-mix(in srgb,var(--c) 10%,transparent);border-bottom:1px solid color-mix(in srgb,var(--c) 24%,var(--linha));gap:.45rem;padding:.55rem .4rem .55rem .7rem}
.coluna h2{font-size:var(--t-md);font-weight:600;margin:0;flex:1;line-height:1.25}
.coluna header .ponto{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent);margin-top:.38rem}
.contagem{font:500 var(--t-xs)/1 var(--sans);color:var(--c);background:color-mix(in srgb,var(--c) 15%,transparent);padding:.28rem .5rem;border-radius:var(--r-pilula);font-variant-numeric:tabular-nums}
.cards{display:flex;flex-direction:column;max-height:62vh;overflow-y:auto;gap:.4rem;padding:.5rem}
/* o texto para leitor de tela (.sr, absoluto) fica preso ao card; solto, esticava a rolagem da página inteira */
.card{display:flex;flex-direction:column;border-radius:var(--r-md);background:var(--sup2);border:1px solid var(--linha);color:var(--texto);position:relative;gap:.22rem;padding:.55rem .6rem .5rem}
.card:hover{text-decoration:none;border-color:color-mix(in srgb,var(--c) 50%,var(--linha));background:color-mix(in srgb,var(--c) 6%,var(--sup2))}
.avatar{flex:none;width:1.75rem;height:1.75rem;border-radius:50%;display:grid;place-items:center;font:600 var(--t-xs)/1 var(--sans);color:var(--c);background:color-mix(in srgb,var(--c) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 32%,transparent)}
.card-nome{min-width:0;-webkit-box-orient:vertical;font-size:var(--t-md);line-height:1.3;display:block;-webkit-line-clamp:unset;overflow:visible;overflow-wrap:anywhere;font-weight:500}
.selo{flex:none;border:1px solid}
.selo[data-envio=robo]{color:var(--ciano);border-color:color-mix(in srgb,var(--ciano) 20%,transparent);background:color-mix(in srgb,var(--ciano) 8%,transparent)}
.selo[data-envio=manual]{color:var(--ambar);border-color:color-mix(in srgb,var(--ambar) 20%,transparent);background:color-mix(in srgb,var(--ambar) 8%,transparent)}
.card-tel{font:var(--t-sm) var(--mono);font-variant-numeric:tabular-nums;color:var(--texto);white-space:nowrap}
.card-info{color:var(--suave);overflow-wrap:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--t-xs);line-height:1.35}
.coluna[data-etapa=respondeu] .card-info{color:var(--lavanda)}
.coluna[data-etapa=perdido] .card-nome,.coluna[data-etapa=perdido] .card-tel{color:var(--suave)}
.vazio{color:var(--apagado);font-size:var(--t-sm);margin:.4rem .3rem}
.card[draggable="true"]{cursor:grab}
.card.arrastando{opacity:.45;cursor:grabbing}
.coluna.alvo{border-color:color-mix(in srgb,var(--c) 70%,var(--linha));box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 35%,transparent)}
.opcoes-etapa{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.toast{position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%);z-index:20;max-width:calc(100% - 2rem);padding:.65rem 1rem;border-radius:var(--r-md);background:var(--sup2);color:var(--texto);font-size:var(--t-md);border:1px solid color-mix(in srgb,var(--menta) 45%,var(--linha))}
.toast[data-erro="1"]{border-color:color-mix(in srgb,var(--coral) 55%,var(--linha))}
.aviso-topo{border:1px solid color-mix(in srgb,var(--ambar) 38%,transparent);background:color-mix(in srgb,var(--ambar) 7%,transparent);color:var(--ambar);border-radius:var(--r-lg);padding:.75rem 1rem;margin-bottom:1.25rem}
details.bloqueados{margin-top:1.5rem;border-top:1px solid var(--linha);padding-top:1rem}
details.bloqueados summary{cursor:pointer;color:var(--suave)}
details.bloqueados ul{columns:18rem;padding-left:1rem;color:var(--suave);font-size:var(--t-md)}
.lista{list-style:none;padding:0;margin:0 0 1.5rem;text-align:left}
.lista li{padding:.55rem .8rem;border-radius:var(--r-md);margin:.4rem 0;background:var(--sup);border:1px solid var(--linha);display:flex;align-items:center;gap:.6rem;box-shadow:var(--brilho);font-size:var(--t-md)}
.lista li.ok{color:var(--menta);border-color:color-mix(in srgb,var(--menta) 28%,var(--linha));background:color-mix(in srgb,var(--menta) 6%,var(--sup))}
.lista li.falta{color:var(--ambar);border-color:color-mix(in srgb,var(--ambar) 28%,var(--linha));background:color-mix(in srgb,var(--ambar) 6%,var(--sup))}
.aviso{color:var(--menta)}
form{display:grid;gap:1rem;text-align:left}
label{display:grid;gap:.35rem;font-size:var(--t-md);color:var(--suave)}
.cabecalho-pagina{margin-bottom:1rem}
.cabecalho-pagina h1{margin-bottom:.25rem}
.cabecalho-pagina p{margin:0}
.painel-bloco{min-width:0}
.painel-bloco h2,.form-agenda h2{font-size:var(--t-base);font-weight:600;margin:1rem 0 .5rem}
.painel-bloco>h2:first-child{margin-top:0}
.duas-colunas{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(16rem,1fr);gap:1rem;align-items:start}
textarea,select{font:inherit;padding:.6rem .8rem;border-radius:var(--r-md);border:1px solid var(--linha);background:var(--sup2);color:var(--texto)}
textarea{min-height:3.2rem;resize:vertical}
select{padding-top:0;padding-bottom:0}
.form-agenda{display:grid;gap:.75rem;margin:0}
.problema{color:var(--ambar)}
.horarios{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;padding:0;margin:0}
.horarios li{font-size:var(--t-sm);padding:.35rem .65rem;border-radius:var(--r-pilula);color:var(--menta);background:color-mix(in srgb,var(--menta) 12%,transparent)}
.grade-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.75rem}
.dias{display:flex;flex-wrap:wrap;gap:.4rem}
.dias label{display:flex;align-items:center;gap:.35rem;padding:.4rem .7rem;border:1px solid var(--linha);border-radius:var(--r-pilula);color:var(--texto);background:var(--sup)}
.acoes{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.25rem 0 1rem}
.acoes form{margin:0}
.passos{padding:.8rem 1rem;margin:0}
.passos summary{cursor:pointer;font-weight:500}
.passos ol{padding-left:1.2rem;color:var(--suave)}
.passos li{margin:.45rem 0}
code{font:var(--t-sm) var(--mono);background:var(--sup2);padding:.1rem .35rem;border-radius:var(--r-sm);color:var(--texto);overflow-wrap:anywhere}
.dica{font-size:var(--t-sm);margin:0}
.pill{justify-self:start;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.pill[data-tom=ok]{--c:var(--menta)}
.pill[data-tom=instavel]{--c:var(--ambar)}
.pill[data-tom=falhou]{--c:var(--coral)}
.pill[data-tom=nada]{--c:var(--apagado)}
.tabela-rolagem{padding:0;overflow:auto}
.tabela{width:100%;border-collapse:collapse;font-size:var(--t-md)}
.tabela th{font:500 var(--t-xs)/1.2 var(--sans);color:var(--suave);text-align:left;padding:.9rem 1rem;border-bottom:1px solid var(--linha);white-space:nowrap}
.tabela td{padding:.8rem 1rem;border-bottom:1px solid var(--linha);vertical-align:middle}
.tabela tbody tr:last-child td{border-bottom:0}
.tabela tbody tr:hover{background:color-mix(in srgb,var(--ciano) 4%,transparent)}
.tabela .num,.tabela .tel{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
/* tabela (26/09, F6): número à direita em mono, mas o título da coluna em Geist como os outros; a célula de ações é
   célula (a classe .acoes, de barra, a fazia virar flex e os botões vazavam da linha); o cartão que abraça a tabela
   rente à borda dá respiro ao título dele */
.tabela th.num{font-family:var(--sans)}
.tabela td.acoes{display:table-cell;margin:0}
.painel-bloco.tabela-rolagem>.bloco-topo{margin:0;padding:.85rem 1.1rem .35rem}
.empresa{min-width:14rem}
.empresa b{display:block;font-weight:500;color:var(--texto)}
.empresa small{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;color:var(--suave);font-size:var(--t-xs);margin-top:.25rem}
.chip{font-size:var(--t-xs);background:var(--sup2);border:1px solid var(--linha);color:var(--suave)}
.sem-site{color:var(--menta);white-space:nowrap;display:inline-flex;align-items:center;gap:.25rem}
.estrela{color:var(--ambar)}
.score{font:600 var(--t-base)/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--suave)}
.score[data-t=Quente]{color:var(--menta)}
.score[data-t=Morno]{color:var(--ambar)}
.pill[data-t=Quente]{--c:var(--ambar)}
.pill[data-t=Morno]{--c:var(--lavanda)}
.pill[data-t=Frio]{--c:var(--ardosia)}
.pill[data-tom=info]{--c:var(--ciano)}
.acoes-linha{display:flex;gap:.3rem;justify-content:flex-end}
.tabela td.empresa{width:30%}
.tabela form{display:inline-block;margin:0}
.acoes-topo{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.acoes-topo form{display:flex;margin:0;flex-wrap:wrap;gap:.5rem}
.acoes-linha form{display:inline-block;margin:0}
form.form-linha{display:inline-block;margin:0 0 0 .6rem}
ul.excluidos{columns:auto;list-style:none;padding-left:0}
ul.excluidos li{margin:.4rem 0}
.tabela form.form-crm{display:inline-flex;gap:.3rem}
.dash-topo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem}
.dash-topo .cabecalho-pagina{margin:0}
.dash-topo .aviso-topo{flex-basis:100%;margin:0;padding:.5rem .8rem}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.7rem;margin:0}
.kpi{--c:var(--ciano);position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.1rem .85rem;padding:.85rem 1rem;color:var(--texto);transition:border-color var(--transicao),background-color var(--transicao)}
.kpi[data-cor=ambar]{--c:var(--ambar)}
.kpi[data-cor=rosa]{--c:var(--rosa)}
.kpi b{grid-row:1/3;font:500 var(--t-num)/1 var(--mono);letter-spacing:-.03em;color:var(--c);font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi .rotulo{grid-column:2;align-self:end;color:var(--texto);font:500 var(--t-md)/1.2 var(--sans);letter-spacing:0;text-transform:none}
.kpi .sub{grid-column:2;align-self:start;color:var(--suave);font-size:var(--t-xs)}
.kpi>.ico{grid-column:3;grid-row:1/3;color:var(--apagado)}
.kpi:hover>.ico{color:var(--c)}
/* Nada para fazer é uma boa notícia: o zero não grita. */
.kpi[data-zero]{background:none}
.kpi[data-zero] b{color:var(--apagado)}
/* Resultados (17/09 à noite): o dinheiro em primeiro plano, o funil como faixa de apoio. */
.kpi.dinheiro{grid-template-columns:1fr;gap:.2rem;align-items:start}
/* Os quatro números do dinheiro cabem numa linha no notebook do João (1265px): 4 × 12rem + espaços. */
.resultados>.kpis{grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
.kpi.dinheiro b{grid-row:auto;font-size:var(--t-num);letter-spacing:-.02em;display:flex;align-items:baseline;gap:.15rem}
.kpi.dinheiro b small{font:500 var(--t-xs)/1 var(--sans);color:var(--apagado);letter-spacing:0}
.kpi.dinheiro .rotulo{grid-column:auto;align-self:auto;color:var(--suave);font-size:var(--t-xs)}
.kpi.dinheiro .sub{grid-column:auto}
.faixa-conversao .conversao{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:.5rem 1.4rem}
.conversao-item{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.conversao-item .rotulo{font-size:var(--t-xs);color:var(--suave);letter-spacing:.04em}
.conversao-item b{font:500 var(--t-xl)/1.1 var(--mono);font-variant-numeric:tabular-nums}
.conversao-item .sub{font-size:var(--t-xs);color:var(--apagado)}
.faixa-conversao .dica{font-size:var(--t-xs);color:var(--apagado)}
/* Linha de estado (17/09): o que funciona fala baixo; o que precisa de você sai do tom e ganha o botão. */
.barra-estado{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem 1.4rem;padding:.55rem .9rem}
.estado-item{--t:var(--ardosia);display:flex;align-items:center;gap:.45rem;min-width:0;font-size:var(--t-sm);color:var(--suave);cursor:help}
.estado-item[data-tom=ok]{--t:var(--menta)}
.estado-item[data-tom=alerta]{--t:var(--ambar)}
.estado-item[data-tom=info]{--t:var(--ciano)}
.estado-item .ponto{flex:none;width:7px;height:7px;border-radius:50%;background:var(--t)}
.estado-item b{color:var(--texto);font-weight:500;white-space:nowrap}
.estado-rotulo{color:var(--apagado);white-space:nowrap}
.estado-barra{flex:none;width:3.5rem;height:4px;border-radius:var(--r-pilula);background:var(--linha2);overflow:hidden}
.estado-barra i{display:block;height:100%;border-radius:var(--r-pilula);background:var(--t)}
.estado-item[data-pede]{margin-right:auto;padding:.1rem .5rem .1rem .55rem;border-radius:var(--r-pilula);background:color-mix(in srgb,var(--t) 13%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t) 30%,transparent);cursor:default}
.estado-item[data-pede] b{color:var(--t)}
.estado-acao{display:inline-flex;align-items:center;gap:.15rem;min-height:2rem;margin:-.4rem -.3rem -.4rem 0;padding:0 .3rem 0 .45rem;border-radius:var(--r-pilula);font-weight:500;font-size:var(--t-sm);color:var(--t)}
@media (min-width:901px){
main{height:100vh;overflow-y:auto}
main.cheio{overflow:hidden;display:flex;flex-direction:column;gap:.7rem;padding:clamp(.8rem,1.7vw,1.3rem)}
}
main.cheio>.quadro-rolagem{flex:1;min-height:0;overflow-y:hidden}
main.cheio>.barra-ferramentas{margin:0}
main.cheio .quadro{height:100%;align-items:stretch}
main.cheio .coluna{display:flex;flex-direction:column;max-height:100%}
main.cheio .cards{flex:1;min-height:0;max-height:none}
.tela-dash{flex:1;display:grid;grid-template-rows:auto auto auto auto;align-content:start;gap:.7rem;min-height:0}
.dash-corpo .painel-bloco{align-self:start}
.tela-dash .linha-status,.tela-dash .barra-estado{margin:0}
.tela-dash .painel-bloco{display:flex;flex-direction:column;min-height:0;padding:.75rem .85rem}
.tela-dash .bloco-topo{margin-bottom:.5rem}
.tela-dash .lista-simples{min-height:0;overflow-y:auto;padding-right:.15rem}
.linha-status.compacta{grid-template-columns:1fr;gap:.45rem;margin:0}
.compacta .status{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:.1rem .6rem;padding:.5rem .7rem}
.compacta .status .rotulo{grid-column:1;grid-row:1}
.compacta .status strong{grid-column:2;grid-row:1;font-size:var(--t-base)}
.compacta .status .sub{grid-column:1/-1;font-size:var(--t-xs)}
.compacta .barra{grid-column:1/-1;margin:.15rem 0 0}
.bloco-topo{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.75rem}
.bloco-topo h1,.bloco-topo h2{margin:0!important}
/* 24/09: os links do canto dos blocos ("Ver as 6", "Abrir quadro") tinham 19 px de altura; a área de clique cresce
   para 32 px sem mudar o desenho (a margem negativa devolve o espaço). */
.bloco-topo a{display:inline-flex;align-items:center;min-height:2rem;padding:0 .5rem;margin:-.45rem -.5rem;border-radius:var(--r-md);font-size:var(--t-md)}
.bloco-topo a:hover{background:color-mix(in srgb,var(--acento,var(--ciano)) 10%,transparent);text-decoration:none}
.tela-dash .resumo{grid-template-columns:minmax(7rem,9.5rem) minmax(0,1fr);gap:.6rem;margin:0}
.lista-simples{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.lista-simples a{display:flex;align-items:center;gap:.7rem;padding:.55rem .45rem;border-radius:var(--r-md);color:var(--texto)}
.lista-simples a:hover{background:var(--sup2);text-decoration:none}
.lista-simples .avatar{width:2.1rem;height:2.1rem;font-size:var(--t-xs)}
.linha-dupla{display:flex;flex-direction:column;min-width:0}
.linha-dupla b{font-weight:500;font-size:var(--t-md)}
.linha-dupla small{color:var(--suave);font-size:var(--t-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lista-simples .meta{margin-left:auto;font:var(--t-xs) var(--sans);color:var(--apagado);white-space:nowrap}
@media (max-width:900px){
.tela-dash{height:auto}
}
.conversas-app{flex:1;display:grid;grid-template-columns:minmax(16rem,21rem) minmax(0,1fr);min-height:0;overflow:hidden;position:relative}
.conversas-lista{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--linha)}
.conversas-lista-topo{display:flex;flex-direction:column;border-bottom:1px solid var(--linha);gap:.5rem;padding:.6rem .65rem .55rem}
.conversas-lista-topo h1{font-size:var(--t-lg)}
.filtros{display:flex;gap:.3rem;flex-wrap:wrap}
.filtros button{padding:.32rem .75rem;font-size:var(--t-xs);font-weight:500;border-radius:var(--r-pilula);background:transparent;color:var(--suave);border:1px solid var(--linha);white-space:nowrap}
.filtros button[aria-pressed=true]{color:var(--texto);background:var(--sup2);border-color:var(--linha2)}
.conversas-itens{overflow-y:auto;flex:1}
.conversa-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;border-bottom:1px solid var(--linha);color:var(--texto);transition:background-color .15s ease;padding:.62rem .8rem;gap:.6rem}
.conversa-item:hover{background:var(--sup2);text-decoration:none}
.conversa-item.atual{background:color-mix(in srgb,var(--ciano) 7%,var(--sup2));box-shadow:inset 2px 0 0 var(--ciano)}
.conversa-item .avatar,.chat-topo .avatar{width:2.4rem;height:2.4rem;font-size:var(--t-xs)}
.conversa-texto{min-width:0}
.conversa-linha{display:flex;gap:.5rem;align-items:center;justify-content:flex-start}
.conversa-linha b{font-weight:500;font-size:var(--t-md);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.conversa-linha time{font:var(--t-xs) var(--sans);color:var(--apagado);flex:none}
.conversa-previa{display:block;font-size:var(--t-sm);color:var(--suave);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.selo-modo{color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.selo-modo[data-modo=joao]{--c:var(--ambar)}
.chat-coluna{display:flex;flex-direction:column;min-height:0;min-width:0}
.chat-topo{display:flex;align-items:center;border-bottom:1px solid var(--linha);flex-wrap:nowrap;gap:.7rem;min-height:3.75rem;padding:.55rem .8rem .55rem 1rem}
.chat-quem{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;gap:.1rem}
.chat-quem h2{margin:0;font-weight:600;font-size:var(--t-base);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-quem small{color:var(--suave);display:block;font-size:var(--t-xs);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.etiqueta{color:var(--c,var(--suave));background:color-mix(in srgb,var(--c,var(--suave)) 13%,transparent)}
.etiqueta .ponto{width:.4rem;height:.4rem}
.etiqueta[data-crm=auto]{--c:var(--ciano)}
.etiqueta[data-crm=manual]{--c:var(--ambar)}
.etiqueta[data-crm=bot]{--c:var(--lavanda)}
.chat-acoes select{padding:0 .7rem;font-size:var(--t-sm);cursor:pointer}
.chat-acoes{display:flex;align-items:center;flex:none;flex-wrap:nowrap;gap:.35rem}
.chat-acoes form{margin:0;display:block}
.chat-mensagens{flex:1;display:flex;flex-direction:column;gap:.35rem;overflow-y:auto;padding:1rem clamp(.75rem,2vw,1.5rem);background:var(--void)}
.dia{display:flex;justify-content:center;margin:.75rem 0 .35rem}
.dia span{font:500 var(--t-xs)/1 var(--sans);color:var(--suave);background:var(--sup);border:1px solid var(--linha);padding:.38rem .65rem;border-radius:var(--r-pilula)}
.msg{display:flex}
.msg.saida{justify-content:flex-end}
.balao{max-width:min(36rem,78%);padding:.5rem .7rem .35rem;border-radius:var(--r-lg);font-size:var(--t-md);line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
/* cauda do balão (26/09, F6): o canto de 4 px do lado de quem fala é forma, não tamanho; o mesmo nos balões do
   WhatsApp de Mensagens, do agente e das notas (test_design conta estes literais) */
.msg.entrada .balao{background:var(--sup2);border:1px solid var(--linha);border-top-left-radius:4px}
.msg.saida .balao{background:color-mix(in srgb,var(--ciano) 15%,var(--sup2));border:1px solid color-mix(in srgb,var(--ciano) 28%,var(--linha));border-top-right-radius:4px}
.balao time{display:block;text-align:right;font:var(--t-xs) var(--sans);color:var(--suave);margin-top:.15rem}
.msg.enviando .balao{opacity:.7}
.msg.falhou .balao{border-color:color-mix(in srgb,var(--coral) 60%,var(--linha))}
.msg.falhou time{color:var(--coral)}
.chat-vazio{margin:auto;text-align:center;color:var(--suave);max-width:24rem}
.chat-vazio b{color:var(--texto)}
form.compositor{display:block;border-top:1px solid var(--linha);background:var(--sup);position:relative;padding:.45rem .8rem .65rem}
.compositor-linha{display:flex;align-items:flex-end;gap:.4rem}
.compositor textarea{flex:1;min-height:2.6rem;max-height:10rem;resize:none;padding:.6rem .8rem;line-height:1.4}
button.botao-enviar{display:inline-grid;place-items:center;width:2.6rem;height:2.6rem;padding:0;border-radius:var(--r-md)}
.compositor[aria-busy=true] .botao-enviar{opacity:.6}
.compositor-extras{display:flex;flex-wrap:wrap;gap:.3rem;margin:0 0 .5rem;padding:.5rem;border:1px solid var(--linha);border-radius:var(--r-md);background:var(--sup2)}
.compositor-extras button{padding:.3rem .45rem;font-size:var(--t-xl);font-weight:400;line-height:1;background:transparent;color:var(--texto);border-radius:var(--r-md)}
.compositor-extras button:hover{background:var(--sup);filter:none}
.compositor-extras.rapidas button{font-size:var(--t-sm);padding:.42rem .75rem;border:1px solid var(--linha2);border-radius:var(--r-pilula);text-align:left}
.compositor-aviso{font-size:var(--t-xs);color:var(--suave);margin:0 0 .4rem}
.compositor-aviso[data-tom=alerta]{color:var(--ambar)}
@media (prefers-reduced-motion:reduce){
*{transition:none!important;animation:none!important}
}
@media (max-width:900px){
.duas-colunas{grid-template-columns:1fr}
}
@keyframes pulso{0%,100%{box-shadow:0 0 0 4px color-mix(in srgb,var(--t) 18%,transparent)}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--t) 6%,transparent)}}
@media (prefers-reduced-motion:no-preference){
.card{transition:border-color .15s ease,background-color .15s ease}
.status[data-tom=ok] .ponto{animation:pulso 2.6s ease-in-out infinite}
}
/* refino de 15/09: escala de tipo, profundidade, botões e estados */
/* === Botão (26/09, F6) ===
   Um componente só: 4 variantes (primário, secundário, perigo e texto) em 2 tamanhos (normal, 36 px; mini, 30 px), e
   <a>, <button> e <summary> saem iguais. Eram 12 classes em 5 alturas (de 26 a 42 px) e dois pesos de letra. As classes
   de sempre viraram apelidos, para não mexer no HTML de nenhuma tela:
   - primário: <button> sem classe, .botao, .botao-mini e .botao-principal (a ação de peso de uma barra, 17/09);
   - secundário: .botao-sec, .botao.sec, .botao-mini.sec, .botao-texto e .botao-icone (quadrado, só o ícone);
   - perigo: .perigo (com .botao-mini, o mini);
   - texto: .botao-discreto e .botao-link (sem fundo; o link fica na linha do texto, sem altura própria).
   O hover do primário usa :where para não passar por cima de quem tem fundo próprio (24/09). O foco é o anel do alto. */
button,.botao,.botao-sec,.botao-texto,.botao-mini,.botao-icone,.botao-discreto,.botao-link{display:inline-flex;align-items:center;
justify-content:center;gap:.45rem;padding:.5625rem .95rem;border:1px solid transparent;border-radius:var(--r-md);
font:600 var(--t-md)/1.15 var(--sans);color:var(--sobre-acento);background:var(--ciano);cursor:pointer;text-decoration:none;
transition:background-color var(--transicao),border-color var(--transicao),color var(--transicao),transform var(--transicao)}
.botao,.botao-sec,.botao-texto,.botao-principal,.perigo,.botao-discreto{min-height:var(--controle);white-space:nowrap}
:where(button,.botao,.botao-mini,.botao-principal):hover{background:color-mix(in srgb,var(--ciano) 86%,var(--texto))}
a:is(.botao,.botao-sec,.botao-texto,.botao-mini,.botao-icone):hover{text-decoration:none}
button:active,.botao:active,.botao-sec:active,.botao-texto:active,.botao-mini:active{transform:translateY(1px)}
button:disabled{opacity:.45;cursor:not-allowed}
.botao .ico,button .ico,.botao-sec .ico,.botao-texto .ico,.botao-mini .ico{flex:none}
.botao-sec,.botao.sec,.botao-mini.sec,.botao-texto,.botao-icone{background:var(--sup2);color:var(--texto);border-color:var(--linha2)}
.botao-sec:hover,.botao.sec:hover,.botao-mini.sec:hover,.botao-texto:hover,.botao-icone:hover{color:var(--texto);
background:color-mix(in srgb,var(--sup2) 82%,var(--texto));border-color:color-mix(in srgb,var(--acento) 45%,var(--linha2))}
.botao-principal{background:var(--ciano);color:var(--sobre-acento);border-color:transparent}
.botao-principal:hover{background:color-mix(in srgb,var(--ciano) 86%,var(--texto));color:var(--sobre-acento);border-color:transparent}
.perigo{background:color-mix(in srgb,var(--coral) 14%,var(--sup2));color:var(--coral);border-color:color-mix(in srgb,var(--coral) 38%,var(--linha2))}
.perigo:hover{background:color-mix(in srgb,var(--coral) 24%,var(--sup2));color:var(--coral)}
.botao-discreto,.botao-link{background:none;border-color:transparent;color:var(--suave)}
.botao-discreto{padding-left:.6rem;padding-right:.6rem;font-size:var(--t-sm)}
.botao-discreto:hover{background:none;color:var(--texto);text-decoration:underline}
.botao-link{padding:0;border:0;font:inherit;color:var(--ciano)}
.botao-link:hover{background:none;color:var(--ciano);text-decoration:underline}
.botao-mini{min-height:var(--controle-mini);padding:.4rem .75rem;gap:.35rem;font-size:var(--t-sm);white-space:nowrap}
.botao-icone{width:var(--controle);height:var(--controle);min-height:0;padding:0;color:var(--suave)}
.botao-icone[aria-expanded=true]{color:var(--ciano);border-color:color-mix(in srgb,var(--ciano) 40%,var(--linha))}
/* ícone discreto: as ações de uma linha de lista (editar, excluir, subir e descer), sem fundo até o hover */
.icone{display:grid;place-items:center;width:var(--controle-mini);height:var(--controle-mini);border-radius:var(--r-md);color:var(--suave);
border:1px solid transparent;font-size:var(--t-lg)}
button.icone{background:none;padding:0;font:inherit;font-size:var(--t-lg);line-height:1;color:var(--suave);cursor:pointer}
.icone:hover{color:var(--texto);background:var(--sup2);border-color:var(--linha);text-decoration:none}
button.icone:hover{background:var(--sup2)}
.icone.excluir:hover{color:var(--coral);border-color:color-mix(in srgb,var(--coral) 40%,var(--linha))}
.icone.wpp{color:var(--menta)}
/* === Cápsulas (26/09, F6) ===
   Duas formas, com a mesma letra (12 px, peso 500) e a mesma altura (20 px); eram 15 variações com alturas de 16 a 24 px.
   - cápsula de estado (pílula): como algo está (Ativo, Em teste, na fila, o caso do agente, onde o site mora), com a cor
     em --c, --o ou --h;
   - etiqueta (retângulo de raio pequeno): o que a pessoa marcou ou um dado curto (etiqueta do lead, selo do card, chip). */
.pill,.selo-modo,.selo-origem,.selo-visita,.ig-selo,.agente-caso,.etiqueta,.monitor-host{display:inline-flex;align-items:center;gap:.3rem;min-height:1.25rem;padding:0 .5rem;border-radius:var(--r-pilula);
font:500 var(--t-xs)/1 var(--sans);white-space:nowrap}
.selo,.etiqueta-lead,.chip,.ficha-chip,.card-site{display:inline-flex;align-items:center;gap:.25rem;min-height:1.25rem;padding:0 .4rem;border-radius:var(--r-sm);
font:500 var(--t-xs)/1 var(--sans);white-space:nowrap}
.pagina-topo{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.7rem 1.25rem;
padding-bottom:.75rem;margin-bottom:.85rem;border-bottom:1px solid var(--linha)}
/* cabeçalho de página (26/09, F6): o do Início (.dash-topo) e o das outras telas (.pagina-topo, de interface.cabecalho)
   têm o mesmo título, com a marca da cor da seção (mais abaixo, na "cor da seção") */
.pagina-topo h1,.dash-topo h1{margin:0;line-height:1.2;font-size:var(--t-xl);letter-spacing:-.02em}
.pagina-topo p{margin:.3rem 0 0;font-size:var(--t-md);max-width:74ch}
.pagina-titulo{min-width:0;display:flex;flex-direction:column;gap:.15rem}
.voltar{display:inline-flex;align-items:center;gap:.3rem;font-size:var(--t-sm);color:var(--suave)}
.voltar:hover{color:var(--ciano);text-decoration:none}
.pagina-rolagem{flex:1;min-height:0;overflow-y:auto;padding-right:.25rem}
main.cheio>.pagina-topo,main.cheio>.linha-status{flex:none}
main.cheio .tabela-rolagem{flex:1;min-height:0}
.tabela thead th{position:sticky;top:0;z-index:1;background:var(--sup);color:color-mix(in srgb,var(--acento) 55%,var(--suave))}
.tabela td.empresa b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tabela td.empresa small{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;margin-top:.2rem}
.estado-vazio{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;padding:2.2rem 1rem;text-align:center;color:var(--apagado)}
.estado-vazio .ico{color:var(--linha2)}
.estado-vazio b{color:var(--suave);font-weight:500;font-size:var(--t-base)}
.estado-vazio span{font-size:var(--t-sm);max-width:44ch}
.lista li .ico{flex:none}
.icone svg{pointer-events:none}
.duas-colunas.config,.duas-colunas.agenda{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.col-agenda{display:flex;flex-direction:column;gap:.75rem;min-width:0}
.col-agenda .linha-status{margin:0}
.form-agenda h2:first-child{margin-top:0}
.rodape-busca{flex:none;display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin-top:.6rem}
.rodape-busca details{margin:0;border-top:0;padding-top:0}
main.cheio>.duas-colunas{flex:1;min-height:0}
h2{font-size:var(--t-lg);font-weight:600;letter-spacing:-.01em;margin:0 0 .5rem}
summary{cursor:pointer}
.bloqueados>summary,.rodape-busca summary{display:inline-flex;align-items:center;gap:.4rem;list-style:none;font-size:var(--t-sm);color:var(--suave);padding:.42rem .8rem;border:1px solid var(--linha);border-radius:var(--r-pilula);background:var(--sup);transition:color var(--transicao),border-color var(--transicao)}
.bloqueados>summary::-webkit-details-marker,.rodape-busca summary::-webkit-details-marker{display:none}
.bloqueados>summary::after,.rodape-busca summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;
border-bottom:1.5px solid currentColor;transform:rotate(-45deg);margin-left:.15rem;opacity:.7}
.bloqueados[open]>summary::after,.rodape-busca details[open] summary::after{transform:rotate(45deg)}
.bloqueados>summary:hover,.rodape-busca summary:hover{color:var(--texto);border-color:var(--linha2)}
.col-agenda .painel-bloco h2{margin:0}
@media (max-width:1000px){
.duas-colunas.config,.duas-colunas.agenda{grid-template-columns:1fr}
}
/* revisão de 16/09: quadro mais denso no notebook (cerca de 1265×633), colunas recolhíveis, diálogos e telas baixas */
.busca-quadro{display:flex;gap:.4rem;flex:1 1 15rem;min-width:11rem}
.busca-quadro input{flex:1;min-width:6rem;width:auto;padding:.5rem .75rem}
.barra-ferramentas .atualizado{margin-left:auto;white-space:nowrap;cursor:help}
@media (max-width:1180px){
.barra-ferramentas{flex-wrap:wrap}
.barra-ferramentas .atualizado{margin-left:0}
}
@media (max-width:1600px){
.barra-ferramentas h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.barra-ferramentas .atualizado{font-size:var(--t-xs)}
}
main:not(.cheio) .quadro{align-items:flex-start}
.coluna header .contagem{margin-top:.08rem;flex:none}
/* alvo de 32 px sem aumentar o cabeçalho: a margem negativa come o respiro de cima e de baixo */
.coluna .recolher-coluna{display:grid;place-items:center;flex:none;width:2rem;height:2rem;margin:-.3rem -.1rem -.3rem 0;padding:0;border-radius:var(--r-md);background:none;color:var(--suave);border:0}
.coluna .recolher-coluna .ico{transform:rotate(180deg)}
.coluna .recolher-coluna:hover{background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--texto)}
.coluna.recolhida{flex:0 0 2.7rem;min-width:2.7rem;cursor:default}
.coluna.recolhida header{flex-direction:column-reverse;justify-content:flex-end;align-items:center;height:100%;padding:.55rem 0;border-bottom:0}
.coluna.recolhida h2{flex:none;writing-mode:vertical-rl;white-space:nowrap;font-size:var(--t-sm);display:block;-webkit-line-clamp:none;line-clamp:none}
.coluna.recolhida .recolher-coluna .ico{transform:none}
.coluna.recolhida .cards{display:none}
.selo[data-temp]{font-family:var(--sans);font-variant-numeric:tabular-nums;cursor:help}
.selo[data-temp=Quente]{color:var(--ambar);border-color:color-mix(in srgb,var(--ambar) 20%,transparent);background:color-mix(in srgb,var(--ambar) 8%,transparent)}
.selo[data-temp=Morno]{color:var(--lavanda);border-color:color-mix(in srgb,var(--lavanda) 20%,transparent);background:color-mix(in srgb,var(--lavanda) 8%,transparent)}
.selo[data-temp=Frio]{color:var(--apagado);border-color:var(--linha2);background:none}
.ficha-chip[data-temp=Quente]{color:var(--ambar)}
.ficha-chip[data-temp=Morno]{color:var(--lavanda)}
body.arrastando-card{user-select:none}
.dialogo{background:var(--sup);color:var(--texto);border:1px solid var(--linha2);border-radius:var(--r-lg);padding:1.1rem 1.2rem;width:min(26rem,calc(100% - 2rem));overscroll-behavior:contain;max-height:calc(100dvh - 2rem);overflow:auto}
.dialogo::backdrop{background:rgba(0,0,0,.55)}
.dialogo h2{font-size:var(--t-base);margin:0}
.dialogo form{gap:.8rem}
.dialogo-acoes{display:flex;align-items:center;gap:.5rem}
.dialogo-acoes .espaco{flex:1}
.dialogo-linha{display:grid;grid-template-columns:1fr 8rem;gap:.6rem}
.etiqueta[data-arquivada]{--c:var(--apagado)}
.lista-bloqueados{list-style:none;margin:0;padding:0;max-height:55vh;overflow-y:auto;display:flex;flex-direction:column;gap:.35rem}
.lista-bloqueados li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem;padding:.5rem .7rem;border-radius:var(--r-md);background:var(--sup2);border:1px solid var(--linha);font-size:var(--t-md)}
.lista-bloqueados small{flex-basis:100%;color:var(--suave);font-size:var(--t-xs)}
.dash-corpo .funil-bloco .legenda-linha{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.4rem}
.dash-corpo .funil-bloco .legenda-linha .total{grid-column:1/-1}
.selo-modo[data-modo=espera]{--c:var(--menta)}
input[type=date]{color-scheme:dark}
/* ficha do lead (Conversas) */
@media (min-width:1500px){
.conversas-app.com-ficha{grid-template-columns:minmax(15rem,19rem) minmax(0,1fr) minmax(17rem,21rem)}
}
.ficha{display:none;flex-direction:column;min-height:0;min-width:0;border-left:1px solid var(--linha);background:var(--sup)}
.conversas-app.com-ficha .ficha{display:flex}
/* 25/09 (revisão final): a mesma ficha, sozinha em /contatos/ficha (sem o quadro de Conversas ao lado) */
.contato-ficha-solo{max-width:36rem}
.contato-ficha-solo .ficha{display:flex;position:static;width:auto;border:1px solid var(--linha);border-radius:var(--r-lg);box-shadow:none}
.contato-ficha-solo .ficha-topo{display:none}
/* 26/09: Contatos — clicar na linha abre "Editar contato" aqui mesmo (não mais a conversa) */
#tabela-contatos tbody tr[data-contato]{cursor:pointer}
#tabela-contatos tbody tr[data-contato]:hover td{background:color-mix(in srgb,var(--ciano) 4%,transparent)}
.contato-editor-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}
.contato-editor-topo small{display:block;margin-top:.2rem;font:var(--t-xs) var(--mono);color:var(--apagado)}
.contato-editor-topo .botao-icone{width:2rem;height:2rem;flex:none}
.contato-editor form{gap:.65rem}
.contato-editor .ficha-form-linha{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.contato-editor-funil{display:grid;gap:.6rem;margin:0;padding:.55rem .75rem .75rem;border:1px solid var(--linha);border-radius:var(--r-md)}
.contato-editor-funil legend{padding:0 .35rem;font:500 var(--t-xs) var(--sans);color:var(--suave)}
.contato-editor .dialogo-acoes{flex-wrap:wrap;margin-top:.2rem}
.contato-editor [data-erro]{margin:0;padding:.5rem .7rem;border-radius:var(--r-md);font-size:var(--t-sm);background:color-mix(in srgb,var(--ambar) 12%,transparent)}
@media (max-width:1499px){
.conversas-app.com-ficha .ficha{position:absolute;top:0;right:0;bottom:0;width:min(22rem,92%);z-index:4;box-shadow:-24px 0 48px -24px rgba(0,0,0,.85)}
}
.ficha-topo{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.6rem .6rem .6rem .9rem;border-bottom:1px solid var(--linha)}
.ficha-topo h2{font-size:var(--t-base);margin:0}
.ficha-rolagem{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:.8rem .9rem 1rem;display:flex;flex-direction:column;gap:1rem}
.ficha-links{display:flex;flex-wrap:wrap;gap:.35rem}
.ficha-link{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .6rem;border-radius:var(--r-md);border:1px solid var(--linha2);background:var(--sup2);color:var(--texto);font-size:var(--t-sm)}
.ficha-link:hover{text-decoration:none;border-color:color-mix(in srgb,var(--ciano) 45%,var(--linha2))}
.ficha-link svg{width:15px;height:15px;flex:none}
.ficha-dados{margin:0;display:grid;gap:.45rem}
.ficha-dados div{display:grid;grid-template-columns:6.4rem minmax(0,1fr);gap:.5rem;align-items:baseline}
.ficha-dados dt{font:500 var(--t-xs)/1.6 var(--sans);color:var(--apagado)}
.ficha-dados dd{margin:0;font-size:var(--t-md);color:var(--texto);overflow-wrap:anywhere}
.ficha-secao h3{display:flex;align-items:center;gap:.4rem;font-size:var(--t-md);font-weight:600;margin:0 0 .5rem}
.ficha-secao h3 .ico{color:var(--suave)}
.ficha-lista{list-style:none;margin:0 0 .6rem;padding:0;display:flex;flex-direction:column;gap:.35rem}
.lembretes li{display:grid;grid-template-columns:3.4rem minmax(0,1fr) auto;align-items:center;gap:.5rem;padding:.35rem .4rem .35rem .6rem;border-radius:var(--r-md);background:var(--sup2);border:1px solid var(--linha);font-size:var(--t-sm)}
.lembretes time{font:500 var(--t-xs) var(--sans);color:var(--suave)}
.lembretes [data-situacao=vencido] time,.lembretes li[data-situacao=vencido] time{color:var(--coral)}
.lembretes li[data-situacao=hoje] time{color:var(--ambar)}
.lembretes li[data-situacao=feito]{opacity:.55}
.lembretes li[data-situacao=feito] span{text-decoration:line-through}
.ficha form{margin:0}
.lembretes form,.notas form,.lista-simples form{display:block}
.lembretes .icone,.notas .icone{width:1.7rem;height:1.7rem}
.notas li{padding:.5rem .6rem .35rem;border-radius:var(--r-md);background:var(--sup2);border:1px solid var(--linha)}
.notas p{margin:0;color:var(--texto);font-size:var(--t-sm);white-space:pre-wrap;overflow-wrap:anywhere}
.ficha-form{display:flex;flex-direction:column;gap:.45rem}
.ficha-form-linha{display:grid;grid-template-columns:8.8rem minmax(0,1fr);gap:.4rem}
.ficha-form input,.ficha-form textarea{padding:.45rem .6rem;font-size:var(--t-sm);background:var(--sup2);min-width:0}
.ficha-form textarea{min-height:3.6rem;resize:vertical}
.ficha-form>button{align-self:flex-start}
.atalhos-data{display:flex;flex-wrap:wrap;gap:.3rem}
.atalhos-data button{padding:.25rem .55rem;font-size:var(--t-xs);font-weight:500;border-radius:var(--r-pilula);background:transparent;color:var(--suave);border:1px solid var(--linha)}
.atalhos-data button:hover{background:var(--sup2);color:var(--texto)}
/* Pendências */
.pendencias-grade{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}
.pendencias-bloco{display:flex;flex-direction:column;min-height:0;padding:.75rem .85rem}
.pendencias-bloco .bloco-topo{margin-bottom:.4rem}
.bloco-topo h2{display:flex;align-items:center;gap:.45rem;font-size:var(--t-base)}
.bloco-topo h2 .ico{color:var(--suave)}
.bloco-rolagem{flex:1;min-height:0;overflow-y:auto}
.contagem-bloco{font:500 var(--t-xs)/1 var(--sans);color:var(--suave);background:var(--sup2);padding:.28rem .5rem;border-radius:var(--r-pilula);font-variant-numeric:tabular-nums}
.lista-simples li.com-acao{display:flex;align-items:center;gap:.2rem}
.lista-simples li.com-acao>a{flex:1;min-width:0}
.lista-simples .linha-dupla{flex:1}
.lista-simples li[data-situacao=vencido] .meta{color:var(--coral)}
.lista-simples li[data-situacao=hoje] .meta{color:var(--ambar)}
@media (max-width:1100px){
.pendencias-grade{grid-template-columns:1fr}
}
/* Resultados (as cores das séries são os tokens --serie-*, validados no fundo escuro e no claro) */
[data-serie=respostas]{--serie:#d07c1c}
.resultados{display:flex;flex-direction:column;gap:.7rem}
.periodos{display:flex;gap:.15rem;padding:.2rem;border:1px solid var(--linha);border-radius:var(--r-md);background:var(--sup)}
.periodos a{padding:.38rem .7rem;border-radius:var(--r-sm);color:var(--suave);font-size:var(--t-sm);white-space:nowrap}
.periodos a:hover{text-decoration:none;color:var(--texto)}
.periodos a.atual{background:var(--sup2);color:var(--texto);box-shadow:inset 0 0 0 1px var(--linha2)}
.kpi.estatico b{color:var(--texto)}
.kpi.estatico:hover{border-color:var(--linha);box-shadow:var(--brilho)}
.grafico-bloco{position:relative}
.legenda-grafico{display:flex;flex-wrap:wrap;gap:.3rem 1rem;list-style:none;margin:0;padding:0;font-size:var(--t-sm);color:var(--suave)}
.legenda-grafico li{display:flex;align-items:center;gap:.4rem}
/* amostra da cor na legenda: um quadradinho de 10 px com canto de 3 px (o --r-sm o faria redondo) */
.legenda-grafico li::before{content:"";width:.65rem;height:.65rem;border-radius:3px;background:var(--serie)}
.legenda-grafico b{color:var(--texto);font:500 var(--t-sm) var(--mono);font-variant-numeric:tabular-nums}
/* meia altura marcada no gráfico: uma referência de escala além do máximo */
.grafico{position:relative;display:flex;align-items:flex-end;gap:2px;height:9rem;padding-top:.2rem;border-top:1px solid color-mix(in srgb,var(--linha) 70%,transparent);border-bottom:1px solid var(--linha2);background:linear-gradient(to top,transparent calc(50% - .5px),color-mix(in srgb,var(--linha2) 70%,transparent) calc(50% - .5px),color-mix(in srgb,var(--linha2) 70%,transparent) calc(50% + .5px),transparent calc(50% + .5px))}
.grafico-max{position:absolute;top:-.55rem;right:0;font:var(--t-xs) var(--sans);color:var(--apagado);background:var(--sup);padding-left:.3rem}
.dia-grafico{flex:1;min-width:0;height:100%;display:flex;align-items:flex-end;justify-content:center;gap:2px;border-radius:var(--r-sm) var(--r-sm) 0 0}
.dia-grafico:hover,.dia-grafico:focus-visible{background:color-mix(in srgb,var(--texto) 5%,transparent)}
.dia-grafico:focus-visible{outline:2px solid var(--acento,var(--ciano));outline-offset:1px;background:color-mix(in srgb,var(--texto) 9%,transparent)}
.barra-grafico{flex:1;max-width:14px;background:var(--serie);border-radius:var(--r-sm) var(--r-sm) 0 0}
.grafico-eixo{display:flex;justify-content:space-between;margin-top:.35rem;font:var(--t-xs) var(--sans);color:var(--apagado)}
.dica-grafico{position:absolute;z-index:3;padding:.35rem .55rem;border-radius:var(--r-md);background:var(--sup2);border:1px solid var(--linha2);color:var(--texto);font-size:var(--t-xs);white-space:nowrap;pointer-events:none;box-shadow:var(--sombra)}
.resultados-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;align-items:start}
@media (max-width:1300px){
.resultados-grade{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.titulo-tabela{padding:.8rem .9rem .2rem;margin:0;font-size:var(--t-base)}
.tabela.compacta{font-size:var(--t-md)}
.tabela.compacta td.empresa{min-width:0;width:auto;max-width:12rem}
.tabela.compacta td.empresa b{-webkit-line-clamp:1}
.tabela.compacta th{padding:.55rem .7rem}
.tabela.compacta td{padding:.45rem .7rem}
.tabela .num small{color:var(--apagado);margin-left:.2rem}
.barra-tabela{display:inline-block;width:1.8rem;height:4px;border-radius:var(--r-pilula);background:var(--linha);vertical-align:middle;margin-right:.45rem;overflow:hidden}
.barra-tabela i{display:block;height:100%;background:#1a9cc4;border-radius:var(--r-pilula)}
.motivos{list-style:none;margin:0 0 .6rem;padding:0;display:flex;flex-direction:column;gap:.5rem}
.motivos li{display:grid;grid-template-columns:minmax(0,1fr) 4.5rem 1.8rem;align-items:center;gap:.5rem;font-size:var(--t-md)}
.motivos .barra-tabela{width:100%;margin:0}
.motivos b{font:500 var(--t-md) var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.motivo-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--suave)}
@media (max-width:1400px){
.tabela td,.tabela th{padding-left:.6rem;padding-right:.6rem}
.empresa{min-width:10.5rem}
.tabela td.empresa{width:auto}
.tabela form.form-crm{gap:.2rem}
button.botao-mini{padding-left:.55rem;padding-right:.55rem}
}
@media (max-height:760px) and (min-width:901px){
.barra-pagina{padding-top:.4rem;padding-bottom:.4rem}
.abas a{padding:.35rem .75rem}
.barra-pagina+main{height:calc(100vh - 2.55rem)}
main.cheio{gap:.5rem;padding:.7rem .9rem}
.kpi{padding:.5rem .8rem}
.kpi b{font-size:var(--t-num)}
.kpi .sub{font-size:var(--t-xs)}
.status{padding:.55rem .8rem;gap:.2rem}
.status strong{font-size:var(--t-base)}
.status .sub{font-size:var(--t-xs)}
.tela-dash{gap:.5rem}
.tela-dash .painel-bloco{padding:.55rem .75rem}
.funil-bloco{gap:.4rem}
.funil-bloco .legenda-linha li{padding:.2rem 0;font-size:var(--t-sm)}
.funil-bloco .legenda-linha b{font-size:var(--t-base)}
.pagina-topo{padding-bottom:.45rem;margin-bottom:.1rem}
.pagina-topo p{font-size:var(--t-sm)}
.tabela th{padding:.6rem .8rem}
.tabela td{padding:.5rem .8rem}
}
/* segunda revisão de 16/09: base local, atividades, etiquetas, valores, lista, arquivados e Ctrl+K */
[data-cor=ciano]{--c:var(--ciano)}
[data-cor=ambar]{--c:var(--ambar)}
[data-cor=lavanda]{--c:var(--lavanda)}
[data-cor=menta]{--c:var(--menta)}
[data-cor=rosa]{--c:var(--rosa)}
[data-cor=coral]{--c:var(--coral)}
.etiqueta-lead{max-width:100%;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 22%,transparent);overflow:hidden;text-overflow:ellipsis}
.card-etiquetas{flex-wrap:wrap;display:inline-flex;align-items:center;gap:3px;margin:0}
/* Financeiro do lead, na ficha (17/09 à noite): valor de entrada e mensalidade à mostra e editáveis. */
.ficha-dinheiro{display:grid;grid-template-columns:1fr 1fr;gap:.55rem .6rem;align-items:end}
.ficha-dinheiro>label{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.ficha-dinheiro .campo-rotulo{font-size:var(--t-xs);color:var(--suave)}
.campo-moeda{display:flex;align-items:center;gap:.3rem;padding:.4rem .55rem;border-radius:var(--r-md);border:1px solid var(--linha2);background:var(--sup2)}
.campo-moeda:focus-within{border-color:color-mix(in srgb,var(--ciano) 55%,var(--linha2))}
.campo-moeda:has(input:focus-visible){outline:2px solid var(--acento,var(--ciano));outline-offset:2px}
.campo-moeda i,.campo-moeda em{flex:none;font:500 var(--t-xs)/1 var(--sans);font-style:normal;color:var(--apagado)}
.campo-moeda input{flex:1;min-width:0;padding:0;border:0;background:none;color:var(--texto);font:500 var(--t-base)/1.2 var(--mono);font-variant-numeric:tabular-nums}
.campo-moeda input:focus{outline:none}
.ficha-dinheiro>button{grid-column:1/-1;justify-self:start}
.card-rodape{display:flex;align-items:center;flex-wrap:nowrap;gap:.35rem;margin-top:.12rem;min-width:0}
.card-proxima{display:inline-flex;align-items:center;font:500 var(--t-xs)/1 var(--sans);color:var(--suave);white-space:nowrap;gap:.28rem}
.card-proxima[data-situacao=vencido]{color:var(--coral)}
.card-proxima[data-situacao=hoje]{color:var(--ambar)}
.card-dias{font:500 var(--t-xs)/1 var(--sans);color:var(--apagado);white-space:nowrap;font-variant-numeric:tabular-nums}
.card-dias[data-parado]{color:var(--coral);padding:.18rem .35rem;border-radius:var(--r-sm);background:color-mix(in srgb,var(--coral) 12%,transparent)}
.card-valor{margin-left:auto;font:500 var(--t-xs)/1 var(--sans);color:var(--texto);white-space:nowrap;font-variant-numeric:tabular-nums}
.soma-coluna{font:500 var(--t-xs)/1 var(--sans);color:var(--suave);white-space:nowrap;font-variant-numeric:tabular-nums}
.coluna.recolhida .soma-coluna{display:none}
.barra-ferramentas .botao-texto .ico{flex:none}
/* busca global (Ctrl+K) */
.abrir-comandos{display:flex;align-items:center;gap:.55rem;width:100%;padding:.5rem .7rem;border-radius:var(--r-md);background:var(--sup2);color:var(--suave);border:1px solid var(--linha);font:500 var(--t-md)/1 var(--sans);cursor:pointer;justify-content:flex-start}
button.abrir-comandos:hover{background:var(--sup2);color:var(--texto);border-color:var(--linha2)}
.abrir-comandos span{flex:1;text-align:left}
kbd{font:500 var(--t-xs)/1 var(--sans);padding:.22rem .38rem;border-radius:var(--r-sm);border:1px solid var(--linha2);color:var(--apagado);background:var(--sup)}
:root[data-lateral="1"] .abrir-comandos{justify-content:center;padding:.55rem}
:root[data-lateral="1"] .abrir-comandos span,:root[data-lateral="1"] .abrir-comandos kbd{display:none}
dialog.comandos{width:min(38rem,calc(100% - 2rem));max-height:min(32rem,80vh);margin:12vh auto auto;padding:0;border-radius:var(--r-lg);border:1px solid var(--linha2);background:var(--sup);color:var(--texto);box-shadow:0 24px 64px -24px rgba(0,0,0,.9);overflow:hidden;overscroll-behavior:contain}
dialog.comandos[open]{display:flex;flex-direction:column}
dialog.comandos::backdrop{background:rgba(0,0,0,.5)}
.comandos-campo{display:flex;align-items:center;gap:.6rem;padding:.75rem .9rem;border-bottom:1px solid var(--linha);color:var(--suave)}
.comandos-campo input{flex:1;border:0;background:transparent;padding:.2rem 0;font-size:var(--t-base);outline:none}
.comandos-campo input:focus-visible{outline:none}
/* 24/09: o campo não tem contorno próprio (é a faixa inteira), então o foco aparece como um traço na base da faixa */
.comandos-campo:focus-within{box-shadow:inset 0 -2px 0 var(--acento,var(--ciano));color:var(--texto)}
#comandos-lista{list-style:none;margin:0;padding:.35rem;overflow-y:auto;flex:1;min-height:0}
#comandos-lista li[role=option]{display:flex;flex-direction:column;gap:.15rem;padding:.5rem .65rem;border-radius:var(--r-md);cursor:pointer}
#comandos-lista li[role=option] b{font-weight:500;font-size:var(--t-md)}
#comandos-lista li[role=option] small{font-size:var(--t-xs);color:var(--suave)}
#comandos-lista li[aria-selected=true]{background:color-mix(in srgb,var(--ciano) 10%,var(--sup2));box-shadow:inset 2px 0 0 var(--ciano)}
.comandos-grupo{font:500 var(--t-xs)/1 var(--sans);color:var(--apagado);padding:.6rem .65rem .3rem}
.comandos-vazio{padding:1rem .65rem;color:var(--suave);font-size:var(--t-sm)}
.comandos-dica{margin:0;padding:.5rem .9rem;border-top:1px solid var(--linha);font-size:var(--t-xs);color:var(--apagado)}
/* diálogo de novo lead */
.dialogo.largo{width:min(34rem,calc(100% - 2rem))}
.form-novo-lead label,.ficha-form label{display:grid;gap:.25rem;font-size:var(--t-xs);color:var(--suave)}
.form-novo-lead input,.form-novo-lead select{padding:0 .65rem;font-size:var(--t-md);background:var(--sup2);min-width:0}
.form-novo-lead .ficha-form-linha{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
/* ficha do lead (versão com atividades e edição) */
.ficha-titulo{min-width:0}
.ficha-titulo h2{font-size:var(--t-base);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ficha-titulo small{display:block;font-size:var(--t-xs);color:var(--suave);margin-top:.1rem}
.ficha-resumo{display:flex;flex-wrap:wrap;gap:.3rem}
.ficha-chip{background:var(--sup2);border:1px solid var(--linha);color:var(--suave);font-variant-numeric:tabular-nums}
.ficha-chip[data-tipo=valor]{color:var(--texto)}
.ficha-chip[data-parado]{color:var(--coral);border-color:color-mix(in srgb,var(--coral) 35%,var(--linha))}
.ficha-proxima{padding:.65rem .7rem;border-radius:var(--r-md);border:1px solid var(--linha);background:var(--sup2);display:flex;flex-direction:column;gap:.55rem}
.ficha-proxima[data-situacao=vencido]{border-color:color-mix(in srgb,var(--coral) 45%,var(--linha))}
.ficha-proxima[data-situacao=hoje]{border-color:color-mix(in srgb,var(--ambar) 45%,var(--linha))}
.ficha-proxima[data-situacao=sem]{border-style:dashed}
.ficha-proxima-topo{display:flex;align-items:flex-start;gap:.55rem}
.ficha-proxima-topo .ico{margin-top:.1rem;color:var(--suave)}
.ficha-proxima[data-situacao=vencido] .ficha-proxima-topo .ico{color:var(--coral)}
.ficha-proxima[data-situacao=hoje] .ficha-proxima-topo .ico{color:var(--ambar)}
.ficha-proxima-topo b{display:block;font-weight:500;font-size:var(--t-md)}
.ficha-proxima-topo small{display:block;font-size:var(--t-xs);color:var(--suave)}
.ficha-proxima[data-situacao=vencido] small{color:var(--coral)}
.ficha-concluir{display:grid;gap:.35rem;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) auto}
.ficha-concluir select{min-width:0;font-size:var(--t-xs);padding:0 .35rem}
.atividades li{display:grid;grid-template-columns:auto 3.6rem minmax(0,1fr) auto;align-items:center;gap:.45rem;padding:.3rem .35rem .3rem .5rem;border-radius:var(--r-md);background:var(--sup2);border:1px solid var(--linha);font-size:var(--t-sm)}
.atividades time{font:500 var(--t-xs) var(--sans);color:var(--suave);white-space:nowrap}
.atividades li[data-situacao=vencido] time{color:var(--coral)}
.atividades li[data-situacao=hoje] time{color:var(--ambar)}
.atividades li[data-situacao=feito]{opacity:.55}
.atividades li[data-situacao=feito] span:not(.tipo-atividade){text-decoration:line-through}
.tipo-atividade{display:grid;place-items:center;color:var(--suave)}
.acoes-atividade{display:flex;gap:.1rem}
.acoes-atividade form{margin:0;display:block}
.atividades .icone{width:1.6rem;height:1.6rem}
.ficha-form select{padding:0 .5rem;font-size:var(--t-sm);background:var(--sup2);min-width:0}
input[type=time]{color-scheme:dark}
.ficha-editar{border:1px solid var(--linha);border-radius:var(--r-md);background:var(--sup)}
.ficha-editar>summary{display:flex;align-items:center;gap:.45rem;padding:.55rem .7rem;font-size:var(--t-sm);color:var(--suave);list-style:none}
.ficha-editar>summary::-webkit-details-marker{display:none}
.ficha-editar>summary:hover{color:var(--texto)}
.ficha-editar[open]>summary{border-bottom:1px solid var(--linha);color:var(--texto)}
.ficha-editar>form{padding:.7rem}
.ficha-editar .dica{font-size:var(--t-xs);line-height:1.4}
/* Pendências com grupos */
.lista-simples .grupo-lista{font:500 var(--t-xs)/1 var(--sans);color:var(--apagado);padding:.7rem .45rem .35rem}
.lista-simples .grupo-lista[data-situacao=vencido]{color:var(--coral)}
.lista-simples .grupo-lista[data-situacao=hoje]{color:var(--ambar)}
.lista-simples .grupo-lista:first-child{padding-top:.2rem}
.lista-simples .tipo-atividade{width:2.1rem;height:2.1rem;flex:none;border-radius:50%;background:var(--sup2);border:1px solid var(--linha)}
.lista-simples li[data-situacao=vencido] .tipo-atividade{color:var(--coral)}
.lista-simples li[data-situacao=hoje] .tipo-atividade{color:var(--ambar)}
.lista-simples .meta[data-parado]{color:var(--coral)}
/* visão em lista */
.filtros-lista{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}
.filtros-lista input[type=search]{flex:1 1 16rem;min-width:10rem;padding:.5rem .75rem}
.filtros-lista>select{padding:0 .6rem;max-width:11rem;cursor:pointer}
.check-filtro{display:flex;align-items:center;gap:.35rem;font-size:var(--t-sm);color:var(--suave);white-space:nowrap;cursor:pointer}
.contador-lista{margin-left:auto;font:var(--t-xs) var(--sans);color:var(--apagado);white-space:nowrap}
.barra-lote{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;padding:.5rem .7rem;border-radius:var(--r-md);border:1px solid color-mix(in srgb,var(--ciano) 35%,var(--linha));background:color-mix(in srgb,var(--ciano) 6%,var(--sup));position:relative}
.barra-lote b{font-size:var(--t-sm);font-weight:600;white-space:nowrap}
.grupo-lote{display:flex;align-items:center;gap:.3rem}
.barra-lote select,.barra-lote input{padding:0 .5rem;font-size:var(--t-xs);max-width:10rem;background:var(--sup2)}
.lista-leads .tabela td.sel,.lista-leads .tabela th.sel{width:2.2rem;padding-right:0}
.lista-leads input[type=checkbox]{width:1rem;height:1rem;accent-color:var(--ciano);cursor:pointer}
.lista-leads .tabela td.empresa a{color:var(--texto)}
.lista-leads .tabela td.empresa a:hover{color:var(--ciano);text-decoration:none}
.lista-leads .tabela td.empresa small{display:block;font:var(--t-xs) var(--mono);color:var(--apagado);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lista-leads .tabela td{font-size:var(--t-sm)}
.lista-leads .tabela td.segmento{max-width:10rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.texto-proxima{display:block;font-size:var(--t-xs);color:var(--apagado);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lista-leads tr.marcada td{background:color-mix(in srgb,var(--ciano) 6%,transparent)}
.lista-leads td .etiqueta-lead{margin:.1rem .2rem .1rem 0}
button.ordenar{padding:0;background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:.25rem}
button.ordenar:hover{background:none;color:var(--texto)}
th[aria-sort=ascending] button.ordenar::after{content:"↑"}
th[aria-sort=descending] button.ordenar::after{content:"↓"}
.vazio-filtro{padding:1rem;margin:0;font-size:var(--t-sm)}
.apagado{color:var(--apagado)}
main.cheio>.filtros-lista,main.cheio>.barra-lote{margin:0}
/* ajustes da barra do quadro com etiquetas e Novo lead (notebook) */
.coluna-titulo{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
/* 21/09: nome de etapa com palavra comprida ("Desenvolvimento") vazava por cima do contador. Agora hifeniza em
   portugues, quebra se o navegador nao souber hifenizar e fica em duas linhas no maximo; o nome inteiro esta no title. */
/* 24/09: sem quebrar no meio da palavra (overflow-wrap normal); hifeniza só entre sílabas, pelo dicionário pt-BR do
   navegador (a página é lang="pt-BR"); o que não couber em duas linhas termina em reticências, com o nome no title
   (lateral.js). */
.coluna-titulo h2{flex:none;overflow-wrap:normal;overflow:hidden;word-break:normal;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:7 3 3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;text-overflow:ellipsis}
@media (max-width:1450px){
.barra-ferramentas .atualizado{display:none}
}
.ficha-form-linha.tipo-texto{grid-template-columns:7.2rem minmax(0,1fr)}
.ficha-form-linha.data-hora{grid-template-columns:minmax(0,1fr) 6rem}
.ficha-concluir button{min-height:var(--controle-mini);padding:.4rem .6rem;font-size:var(--t-sm)}
.data-atividade{font:500 var(--t-xs) var(--sans);color:var(--suave)}
li[data-situacao=vencido] .data-atividade{color:var(--coral)}
li[data-situacao=hoje] .data-atividade{color:var(--ambar)}
.lista-simples li.com-acao .linha-dupla b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lista-leads .tabela td.empresa{min-width:13rem;max-width:18rem}
.lista-leads .tabela td.empresa b{-webkit-line-clamp:1}
.lista-leads .tabela td.proxima{max-width:11rem}
.lista-leads .tabela th{padding-top:.55rem;padding-bottom:.55rem}
/* 16/09 noite: login, conta na lateral, Configurações, Mensagens, busca nova e modelos na conversa */
.status[data-tom=neutro] strong{color:var(--texto)}
/* conta na lateral */
.lateral-conta{display:flex;align-items:center;gap:.25rem;padding:.55rem .35rem 0;border-top:1px solid var(--linha);margin-top:0}
.lateral-conta .conta{flex:1;min-width:0;display:flex;align-items:center;gap:.6rem;padding:.35rem .4rem;border-radius:var(--r-md);color:var(--texto)}
.lateral-conta .conta:hover{background:var(--sup2);text-decoration:none}
.lateral-conta .avatar{width:2rem;height:2rem;font-size:var(--t-xs)}
.conta-texto{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.conta-texto b{font-weight:500;font-size:var(--t-md);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conta-texto small{font:var(--t-xs) var(--sans);color:var(--apagado);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-lateral="1"] .lateral-conta{flex-direction:column;padding:.55rem 0 0}
:root[data-lateral="1"] .conta-texto{display:none}
:root[data-lateral="1"] .lateral-conta .conta{justify-content:center;padding:.3rem}
/* entrada no painel */
body.publica{min-height:100vh;background:var(--void)}
main.entrar{min-height:100vh;height:auto;padding:0;overflow:visible;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(22rem,1fr)}
.entrar-marca{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:2rem;padding:clamp(1.5rem,4vw,3.2rem);border-right:1px solid var(--linha);background:radial-gradient(50rem 30rem at -10% -10%,color-mix(in srgb,#f4c587 9%,transparent),transparent 60%),radial-gradient(40rem 30rem at 110% 110%,color-mix(in srgb,#99d2ec 10%,transparent),transparent 60%),var(--void)}
.entrar-marca::after{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--linha) 1px,transparent 1px),linear-gradient(90deg,var(--linha) 1px,transparent 1px);background-size:44px 44px;opacity:.18;-webkit-mask-image:radial-gradient(ellipse at 30% 40%,#000 20%,transparent 70%);mask-image:radial-gradient(ellipse at 30% 40%,#000 20%,transparent 70%);pointer-events:none;display:none}
.entrar-marca>*{position:relative;z-index:1}
.entrar-marca-topo{display:flex;align-items:center;gap:.8rem}
.entrar-marca-logo{width:2.3rem;height:2.25rem;border-radius:var(--r-md);object-fit:cover;box-shadow:var(--brilho),inset 0 0 0 1px var(--linha2)}
.entrar-marca-inicial{flex:none;width:2.3rem;height:2.25rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font:600 var(--t-lg) var(--sans);color:var(--void)}
.entrar-frase{max-width:30rem}
/* títulos das páginas públicas (entrada e termos): crescem com a janela, fora da escala do painel */
.entrar-frase h2{font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1.15;letter-spacing:-.025em;font-weight:600;margin:0 0 1.4rem;text-wrap:balance}
.entrar-pontos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.entrar-pontos li{display:flex;align-items:center;gap:.7rem;color:var(--suave);font-size:var(--t-base)}
.entrar-pontos .ico{flex:none;width:2rem;height:2rem;padding:.45rem;border-radius:var(--r-md);color:var(--ciano);background:color-mix(in srgb,var(--ciano) 10%,var(--sup2));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ciano) 22%,transparent)}
.entrar-pontos li:nth-child(2) .ico{color:var(--ambar);background:color-mix(in srgb,var(--ambar) 10%,var(--sup2));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ambar) 22%,transparent)}
.entrar-pontos li:nth-child(3) .ico{color:var(--lavanda);background:color-mix(in srgb,var(--lavanda) 10%,var(--sup2));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lavanda) 22%,transparent)}
.entrar-rodape{margin:0;font:var(--t-xs) var(--sans);color:var(--apagado)}
.entrar-painel{display:grid;place-items:center;padding:2rem 1.25rem}
.entrar-caixa{width:min(24rem,100%);display:flex;flex-direction:column;gap:1.4rem}
.entrar-cabeca h1{font-size:var(--t-xl);margin:.9rem 0 .3rem}
.entrar-cabeca p{margin:0;font-size:var(--t-md)}
.entrar-cadeado{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:var(--r-lg);color:var(--ciano);background:var(--sup2);border:1px solid var(--linha2);box-shadow:var(--brilho)}
.entrar-form{gap:.95rem}
/* a entrada é pública e se usa no celular: o campo é maior que o do painel (44 px) */
.entrar-form input:not([type=checkbox]){width:100%;height:2.75rem;padding:0 .85rem;background:var(--sup)}
.senha-campo{position:relative;display:block}
.senha-campo input{padding-right:2.8rem!important}
button.ver-senha{position:absolute;right:.35rem;top:50%;transform:translateY(-50%);width:2.1rem;height:2.1rem;padding:0;border-radius:var(--r-md);background:none;color:var(--apagado);border:0}
button.ver-senha:hover,button.ver-senha.ativo{background:var(--sup2);color:var(--texto)}
button.ver-senha:active{transform:translateY(-50%)}
.lembrar{display:flex;align-items:center;gap:.55rem;font-size:var(--t-sm);color:var(--suave);cursor:pointer}
.lembrar input{width:1rem;height:1rem;accent-color:var(--ciano)}
button.entrar-botao{width:100%;padding:.8rem 1rem;font-size:var(--t-base);margin-top:.2rem}
.entrar-erro,.entrar-ok{display:flex;align-items:center;gap:.5rem;margin:0;padding:.6rem .75rem;border-radius:var(--r-md);font-size:var(--t-md)}
.entrar-erro{color:var(--coral);background:color-mix(in srgb,var(--coral) 9%,transparent);border:1px solid color-mix(in srgb,var(--coral) 30%,transparent)}
.entrar-ok{color:var(--menta);background:color-mix(in srgb,var(--menta) 8%,transparent);border:1px solid color-mix(in srgb,var(--menta) 26%,transparent)}
.entrar-aviso{display:flex;gap:.75rem;padding:.9rem 1rem;border-radius:var(--r-lg);border:1px solid color-mix(in srgb,var(--ambar) 35%,var(--linha));background:color-mix(in srgb,var(--ambar) 6%,var(--sup))}
.entrar-aviso .ico{color:var(--ambar);margin-top:.15rem}
.entrar-aviso b{display:block;margin-bottom:.3rem}
.entrar-aviso p{margin:.35rem 0;font-size:var(--t-md)}
.entrar-aviso code{display:block;padding:.5rem .6rem;margin:.4rem 0;font-size:var(--t-xs)}
@media (max-width:860px){
main.entrar{grid-template-columns:1fr}
.entrar-marca{display:none}
}
/* telas de ajustes */
.ajustes{display:flex;flex-direction:column;gap:.75rem;max-width:68rem}
.ajuste-secao{display:grid;grid-template-columns:minmax(0,1fr);gap:.85rem}
.ajuste-cabeca{display:flex;gap:.75rem;min-width:0;align-items:center}
.ajuste-cabeca h2{font-size:var(--t-base);margin:0}
.ajuste-cabeca p{margin:0;line-height:1.5;font-size:var(--t-sm);color:var(--suave)}
.ajuste-icone{display:grid;place-items:center;flex:none;width:2.15rem;height:2.15rem;border-radius:var(--r-md);border:1px solid var(--linha);color:var(--acento);background:color-mix(in srgb,var(--acento) 13%,var(--sup2));border-color:color-mix(in srgb,var(--acento) 26%,var(--linha))}
.ajuste-campos{min-width:0;flex-direction:column;display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:.9rem 1.1rem;align-items:start}
/* 17/09: bloco sem o texto lateral, para as telas em que a explicacao ao lado so ocupa espaco. */
.ajuste-secao.plena{grid-template-columns:minmax(0,1fr);gap:.9rem}
.grade-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.9rem 1rem}
.campo{display:flex;flex-direction:column;gap:.38rem;min-width:0;font-size:var(--t-md);color:var(--suave)}
.campo.largo{grid-column:1/-1}
.campo-rotulo{font-size:var(--t-sm);font-weight:500;color:var(--texto)}
.campo-dica{font-size:var(--t-xs);line-height:1.45;color:var(--apagado)}
.campo-dica code{font-size:var(--t-xs)}
.campo input:not([type=checkbox]):not([type=radio]),.campo select,.campo textarea{width:100%;padding:.55rem .7rem;background:var(--sup2);min-width:0}
.campo select{padding-top:0;padding-bottom:0;cursor:pointer}
/* 25/09 (achado do João, /admin › Nova empresa): sem a exceção acima, um `.check-filtro` dentro de um `.campo`
   (a lista de módulos) herdava o `width:100%` do campo de texto — a caixinha do checkbox esticava a linha toda
   e o texto ia parar na ponta direita. Cada `.check-filtro` continua uma linha própria (o `.campo` é coluna). */
/* 25/09 (módulos separados): um bloco por grupo (Atendimento, Vendas, Site...), com o nome pequeno em cima. No
   menu "Editar" da lista de clientes o painel alarga para caber duas colunas. */
.modulos-grupos{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:.8rem 1rem}
.modulos-grupo{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.modulos-titulo{font-size:var(--t-xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--apagado)}
.menu-acoes-painel:has(.modulos-grupos){width:min(24rem,calc(100vw - 2rem))}
.menu-acoes-painel .modulos-grupos{grid-template-columns:1fr 1fr;gap:.7rem .8rem}
.campo textarea{min-height:4.5rem;resize:vertical;line-height:1.45}
fieldset{border:0;margin:0;padding:0;min-width:0}
.par-campos{display:flex;align-items:center;gap:.5rem}
.par-campos input{flex:1;min-width:0}
.par-campos span{font-size:var(--t-sm);color:var(--apagado)}
.interruptor{position:relative;display:flex;align-items:flex-start;gap:.8rem;padding:.7rem .8rem;border-radius:var(--r-md);background:var(--sup2);border:1px solid var(--linha);cursor:pointer;color:var(--texto);transition:border-color var(--transicao),background-color var(--transicao)}
.interruptor:hover{border-color:var(--linha2)}
.interruptor input{position:absolute;opacity:0;width:1px;height:1px}
.interruptor .trilho{position:relative;flex:none;width:2.4rem;height:1.4rem;margin-top:.05rem;border-radius:var(--r-pilula);background:var(--linha2);transition:background-color var(--transicao)}
.interruptor .trilho i{position:absolute;top:.2rem;left:.2rem;width:1rem;height:1rem;border-radius:50%;background:var(--suave);box-shadow:0 1px 2px rgba(0,0,0,.4);transition:transform var(--transicao),background-color var(--transicao)}
.interruptor input:checked+.trilho{background:color-mix(in srgb,var(--menta) 55%,var(--linha2))}
.interruptor input:checked+.trilho i{transform:translateX(1rem);background:#fff}
.interruptor input:focus-visible+.trilho{outline:2px solid var(--ciano);outline-offset:2px}
.interruptor-texto{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.interruptor-texto b{font-weight:500;font-size:var(--t-md)}
.interruptor-texto small{font-size:var(--t-xs);line-height:1.45;color:var(--suave)}
.interruptor[data-tom=alerta]:has(input:checked){border-color:color-mix(in srgb,var(--menta) 38%,var(--linha));background:color-mix(in srgb,var(--menta) 5%,var(--sup2))}
.barra-salvar{position:sticky;bottom:0;z-index:3;display:flex;align-items:center;justify-content:flex-end;gap:.75rem;max-width:74rem;margin-top:.75rem;padding:.65rem .75rem .65rem 1rem;border-radius:var(--r-lg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--linha);background:color-mix(in srgb,var(--sup) 94%,transparent)}
.barra-salvar-dica{margin-right:auto;font-size:var(--t-xs);color:var(--apagado)}
.barra-salvar.pendente{border-color:color-mix(in srgb,var(--ambar) 45%,var(--linha))}
.barra-salvar.pendente .barra-salvar-dica{color:var(--ambar)}
.ajustes-form{display:block}
.faixas{display:flex;flex-direction:column;gap:.45rem;align-items:flex-start}
.linha-faixa{display:flex;align-items:center;gap:.5rem}
.linha-faixa input{width:7.2rem;padding:.45rem .6rem;background:var(--sup2)}
.linha-faixa span{font-size:var(--t-sm);color:var(--apagado)}
.faixas .botao-texto,.segmentos .botao-texto{margin-top:.15rem}
.opcoes-cartao{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.6rem}
.opcoes-cartao legend{margin-bottom:.45rem}
.opcao-cartao{position:relative;display:flex;gap:.65rem;padding:.8rem .9rem;border-radius:var(--r-md);border:1px solid var(--linha);background:var(--sup2);cursor:pointer;transition:border-color var(--transicao),background-color var(--transicao)}
.opcao-cartao:hover{border-color:var(--linha2)}
.opcao-cartao input{margin:.2rem 0 0;accent-color:var(--ciano)}
.opcao-cartao:has(input:checked){border-color:color-mix(in srgb,var(--ciano) 50%,var(--linha));background:color-mix(in srgb,var(--ciano) 6%,var(--sup2))}
.opcao-corpo{display:flex;flex-direction:column;gap:.2rem}
.opcao-corpo b{font-weight:500;font-size:var(--t-md);color:var(--texto)}
.opcao-corpo small{font-size:var(--t-xs);line-height:1.45;color:var(--suave)}
.segmentos{display:flex;flex-direction:column;gap:.4rem;align-items:stretch}
.linha-segmento{display:grid;grid-template-columns:minmax(10rem,.8fr) minmax(0,1.6fr) 2rem;gap:.45rem;align-items:center}
.linha-segmento input{padding:.45rem .6rem;background:var(--sup2);min-width:0;font-size:var(--t-sm)}
.linha-segmento.cabeca span{font:500 var(--t-xs)/1 var(--sans);color:var(--apagado);padding:.2rem 0}
.segmentos .botao-texto{align-self:flex-start}
.ajuste-detalhe{border:1px solid var(--linha);border-radius:var(--r-md);background:var(--sup2)}
.ajuste-detalhe>summary{display:flex;align-items:center;gap:.45rem;padding:.6rem .8rem;font-size:var(--t-sm);color:var(--suave);list-style:none}
.ajuste-detalhe>summary::-webkit-details-marker{display:none}
.ajuste-detalhe>summary:hover{color:var(--texto)}
.ajuste-detalhe[open]>summary{border-bottom:1px solid var(--linha);color:var(--texto)}
.ajuste-detalhe>form{padding:.85rem}
.ajuste-form{display:flex;flex-direction:column;gap:.9rem}
.acoes-form{display:flex;flex-wrap:wrap;gap:.5rem}
.conta-cartao{display:flex;align-items:center;gap:.8rem;padding-bottom:.2rem}
.conta-cartao b{display:block;font-weight:600}
.conta-cartao small{font-size:var(--t-sm);color:var(--suave)}
.avatar.grande{width:2.8rem;height:2.8rem;font-size:var(--t-md)}
.lista-sessoes,.lista-pessoas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.lista-sessoes li,.lista-pessoas li{display:flex;align-items:center;gap:.7rem;padding:.55rem .7rem;border-radius:var(--r-md);background:var(--sup2);border:1px solid var(--linha)}
.lista-sessoes li[data-atual]{border-color:color-mix(in srgb,var(--menta) 35%,var(--linha))}
.sessao-icone{display:grid;place-items:center;width:2rem;height:2rem;flex:none;border-radius:var(--r-md);color:var(--suave);background:var(--sup);border:1px solid var(--linha)}
.lista-sessoes .linha-dupla,.lista-pessoas .linha-dupla{flex:1}
.lista-pessoas form{margin:0 0 0 auto}
.lista.diagnostico{margin:0 0 .4rem}
.ajuste-campos>.botao{align-self:flex-start}
/* Mensagens: sequência automática */
.sequencia{display:flex;flex-direction:column;max-width:80rem}
.modo-atual{display:flex;align-items:center;gap:.6rem;padding:.65rem .85rem;margin-bottom:.9rem;border-radius:var(--r-md);background:var(--sup);border:1px solid var(--linha);font-size:var(--t-md);color:var(--suave)}
.modo-atual b{color:var(--texto);font-weight:500}
.modo-atual .ico{color:var(--ciano)}
.etapa-seq{position:relative}
.etapa-cabeca{display:flex;align-items:center;gap:.85rem;margin-bottom:.9rem}
.etapa-cabeca h2{font-size:var(--t-base);margin:0}
.etapa-cabeca p{margin:.15rem 0 0;font-size:var(--t-sm)}
.etapa-cabeca .botao{margin-left:auto;white-space:nowrap}
.etapa-numero{display:grid;place-items:center;flex:none;width:2.1rem;height:2.1rem;border-radius:50%;font:600 var(--t-md)/1 var(--sans);color:var(--ciano);background:color-mix(in srgb,var(--ciano) 12%,var(--sup2));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ciano) 30%,transparent)}
.ligacao{position:relative;display:flex;align-items:center;min-height:3rem;padding-left:2.1rem}
.ligacao::before{content:"";position:absolute;left:2.1rem;top:0;bottom:0;border-left:2px dashed var(--linha2)}
.ligacao span{position:relative;margin-left:1.1rem;font:500 var(--t-xs)/1.3 var(--sans);color:var(--suave);padding:.35rem .6rem;border-radius:var(--r-pilula);background:var(--void);border:1px solid var(--linha)}
.alerta-etapa{display:flex;align-items:center;gap:.45rem;margin:0 0 .75rem;padding:.5rem .7rem;border-radius:var(--r-md);font-size:var(--t-sm);color:var(--ambar);background:color-mix(in srgb,var(--ambar) 8%,transparent);border:1px solid color-mix(in srgb,var(--ambar) 28%,transparent)}
.modelos-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));gap:.7rem;align-items:start}
.modelo{display:flex;flex-direction:column;min-width:0;border-radius:var(--r-lg);background:var(--sup2);border:1px solid var(--linha);transition:border-color var(--transicao),opacity var(--transicao)}
.modelo:hover{border-color:var(--linha2)}
.modelo.pausado{opacity:.62}
.modelo.pausado:hover{opacity:.95}
.modelo-topo{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.6rem .75rem .45rem}
.modelo-titulo{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;min-width:0}
.modelo-titulo b{font-weight:500;font-size:var(--t-md)}
.modelo-ordem{display:flex;gap:.1rem}
.modelo-ordem form{margin:0;display:block}
.modelo-ordem .icone{width:1.6rem;height:1.6rem}
.modelo-previa{position:relative;padding:.35rem .75rem .75rem;max-height:15rem;overflow:hidden}
.modelo-previa::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2rem;background:linear-gradient(transparent,var(--sup2));pointer-events:none}
.balao-wpp{position:relative;max-width:100%;padding:.55rem .7rem;border-radius:var(--r-md);border-top-left-radius:4px;font-size:var(--t-sm);line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--texto);background:color-mix(in srgb,var(--menta) 9%,var(--sup));border:1px solid color-mix(in srgb,var(--menta) 18%,var(--linha))}
/* a bolha que sai é o verde escuro do WhatsApp nos dois temas; o texto é o claro dele (no tema claro herdava o --texto
   quase preto sobre o verde escuro, 1,9:1) */
.balao-wpp.saida{border-top-left-radius:var(--r-md);border-top-right-radius:4px;background:#144d37;border-color:#1c5e45;color:#e9edef}
.balao-wpp.saida .apagado{color:color-mix(in srgb,#e9edef 72%,transparent)}
.balao-wpp b{font-weight:600}
.balao-wpp code{font-size:var(--t-xs);background:rgba(0,0,0,.25)}
.modelo-rodape{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.3rem .5rem;margin-top:auto;padding:.45rem .5rem .5rem .75rem;border-top:1px solid var(--linha)}
.modelo-acoes{margin-left:auto;display:flex;align-items:center;gap:.15rem}
.modelo-acoes form{margin:0;display:block}
.modelo-acoes .icone{width:1.9rem;height:1.9rem}
.modelo-acoes .botao-texto{margin-right:.2rem;min-height:var(--controle-mini);padding:.4rem .6rem;font-size:var(--t-sm)}
.taxa{display:inline-flex;align-items:baseline;gap:.3rem;font-size:var(--t-xs);color:var(--suave);white-space:nowrap}
.taxa b{font:600 var(--t-base)/1 var(--mono);color:var(--texto);font-variant-numeric:tabular-nums}
.taxa small{font:var(--t-xs) var(--sans);color:var(--apagado)}
.taxa[data-tom=boa] b{color:var(--menta)}
.taxa[data-tom=fraca] b{color:var(--coral)}
.taxa[data-vazia]{color:var(--apagado);font-style:italic}
.reserva{margin-top:1.2rem;background:transparent}
.reserva-corpo{display:flex;flex-direction:column;gap:.7rem;padding:.85rem}
.reserva .etapa-seq{background:var(--sup2)}
.reserva .modelo{background:var(--sup)}
.rodape-seq{margin:1rem 0 .5rem;max-width:70ch}
.barra-modelos{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.barra-modelos input[type=search]{flex:0 1 20rem;padding:.5rem .75rem}
.modelos-grade.soltos{grid-template-columns:repeat(auto-fill,minmax(20rem,1fr))}
/* editor de mensagem */
.editor{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(19rem,.75fr);gap:1rem;align-items:start;max-width:80rem}
.editor-form{display:flex;flex-direction:column;gap:1rem}
.editor-form textarea{min-height:15rem;font-size:var(--t-base);border-top-left-radius:0;border-top-right-radius:0}
.editor-ferramentas{display:flex;align-items:center;gap:.2rem;padding:.3rem .4rem;border:1px solid var(--linha);border-bottom:0;border-radius:var(--r-md) var(--r-md) 0 0;background:var(--sup2)}
.editor-ferramentas button{width:2rem;height:1.9rem;padding:0;border-radius:var(--r-sm);background:none;color:var(--suave);font:600 var(--t-md) var(--sans);border:0}
.editor-ferramentas button:hover{background:var(--sup);color:var(--texto)}
.editor-ferramentas .separador{flex:1}
.editor .campo textarea{border-top-left-radius:0;border-top-right-radius:0}
.contador{font:var(--t-xs) var(--sans);color:var(--apagado);padding-right:.3rem}
.contador[data-longa="1"]{color:var(--ambar)}
#aviso-variavel{color:var(--coral)}
.variaveis{display:flex;flex-direction:column;gap:.45rem}
.fichas-variaveis{display:flex;flex-wrap:wrap;gap:.35rem}
button.ficha-variavel{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .55rem;border-radius:var(--r-md);background:var(--sup2);color:var(--suave);border:1px solid var(--linha);font:400 var(--t-xs)/1.2 var(--sans)}
button.ficha-variavel:hover{background:var(--sup);color:var(--texto);border-color:color-mix(in srgb,var(--ciano) 40%,var(--linha))}
.ficha-variavel code{background:none;padding:0;color:var(--ciano);font-size:var(--t-xs)}
.editor-form .barra-salvar{position:static;margin:0;padding:0;border:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.editor-previa{position:sticky;top:0;display:flex;flex-direction:column;gap:.6rem}
/* 26/09 (F6): o celular da prévia é o WhatsApp escuro também no tema claro: dentro dele as cores voltam às do escuro
   (o avatar e o texto apagado ficavam escuros sobre o fundo escuro). Os raios de 22 e 15 px são do desenho do aparelho. */
.celular{color-scheme:dark;--texto:#e9edef;--suave:#8696a0;--apagado:#8696a0;--menta:#7ee8b0;--ciano:#6fe2ff;--ambar:#ffba6a;
--lavanda:#c9bfff;--rosa:#ff9fd0;--coral:#ff8f8f;--ardosia:#9aa6c1;
border-radius:22px;padding:.5rem;background:#0b0b0c;border:1px solid var(--linha2);box-shadow:0 30px 60px -30px rgba(0,0,0,.9),var(--brilho)}
.celular-topo{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:15px 15px 0 0;background:#1f2c34}
.celular-topo b{display:block;font-weight:500;font-size:var(--t-md);color:#e9edef}
.celular-topo small{display:block;font-size:var(--t-xs);color:#8696a0}
.celular-conversa{display:flex;flex-direction:column;align-items:flex-end;min-height:22rem;max-height:60vh;overflow-y:auto;padding:1rem .8rem;border-radius:0 0 15px 15px;background:#0b141a radial-gradient(circle at 20% 20%,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/18px 18px}
.celular-conversa .balao-wpp{max-width:88%;font-size:var(--t-md);color:#e9edef}
@media (max-width:1100px){
.editor{grid-template-columns:1fr}
.editor-previa{position:static}
}
/* modelos na conversa */
.compositor-extras.rapidas{display:block;padding:0;overflow:hidden}
.modelos-topo{display:flex;align-items:center;gap:.6rem;padding:.45rem .5rem;border-bottom:1px solid var(--linha)}
.modelos-topo input{flex:1;padding:.42rem .65rem;font-size:var(--t-sm);background:var(--sup)}
.modelos-topo .botao-link{font-size:var(--t-xs);white-space:nowrap}
.modelos-lista{max-height:16rem;overflow-y:auto;padding:.3rem;display:flex;flex-direction:column;gap:.1rem}
.grupo-modelos{font:500 var(--t-xs)/1 var(--sans);color:var(--apagado);padding:.55rem .5rem .3rem}
.compositor-extras.rapidas button.item-modelo{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;width:100%;padding:.45rem .55rem;border:0;border-radius:var(--r-md);text-align:left;font-size:var(--t-sm);background:none}
.compositor-extras.rapidas button.item-modelo:hover,.compositor-extras.rapidas button.item-modelo:focus-visible{background:var(--sup)}
.item-modelo b{font-weight:500;color:var(--texto)}
.item-modelo span{font-weight:400;font-size:var(--t-xs);color:var(--suave);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
/* busca nova */
form.busca-nova{display:flex;flex-direction:column;gap:.7rem;flex:none;padding:.9rem 1rem}
.busca-campos{display:grid;grid-template-columns:minmax(12rem,.9fr) minmax(14rem,1.2fr) minmax(16rem,1.5fr) auto;gap:.8rem;align-items:start}
.busca-campos>button{margin-top:1.45rem;white-space:nowrap}
.cidades-campo{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;min-height:var(--controle);padding:.25rem .35rem;border-radius:var(--r-md);border:1px solid var(--linha);background:var(--sup2);cursor:text}
.cidades-campo:focus-within{border-color:color-mix(in srgb,var(--ciano) 55%,var(--linha))}
.chips-cidades{display:contents}
.campo .cidades-campo input{flex:1;width:auto;min-width:7rem;border:0;background:none;padding:.3rem .35rem;outline:none}
.ficha-cidade{display:inline-flex;align-items:center;gap:.2rem;padding:.2rem .2rem .2rem .55rem;border-radius:var(--r-pilula);font-size:var(--t-sm);color:var(--texto);background:color-mix(in srgb,var(--ciano) 12%,var(--sup));border:1px solid color-mix(in srgb,var(--ciano) 28%,var(--linha))}
.ficha-cidade button{width:1.25rem;height:1.25rem;padding:0;border-radius:50%;background:none;color:var(--suave);font:400 var(--t-base)/1 var(--sans);border:0}
.ficha-cidade button:hover{background:color-mix(in srgb,var(--coral) 20%,transparent);color:var(--texto)}
.busca-rodape{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:.5rem 1rem}
.estimativa{margin:0;font-size:var(--t-sm);color:var(--suave);padding-top:.3rem}
.fonte-busca{display:flex;flex-wrap:wrap;gap:.25rem;padding:.2rem;border-radius:var(--r-md);background:var(--sup2);border:1px solid var(--linha)}
.fonte-busca label{position:relative;cursor:pointer}
.fonte-busca input{position:absolute;opacity:0;width:1px;height:1px}
.fonte-busca span{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .65rem;border-radius:var(--r-md);font-size:var(--t-xs);color:var(--suave);white-space:nowrap}
.fonte-busca input:checked+span{background:var(--sup);color:var(--texto);box-shadow:inset 0 0 0 1px var(--linha2)}
.fonte-busca input:focus-visible+span{outline:2px solid var(--ciano);outline-offset:1px}
.estimativa .conhecidos{color:var(--menta)}
.estimativa[data-tom=erro]{color:var(--coral)}
.filtros-busca{position:relative}
.filtros-busca>summary{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--t-sm);color:var(--suave);padding:.35rem .7rem;border:1px solid var(--linha);border-radius:var(--r-pilula);list-style:none;background:var(--sup2)}
.filtros-busca>summary::-webkit-details-marker{display:none}
.filtros-busca>summary:hover,.filtros-busca[open]>summary{color:var(--texto);border-color:var(--linha2)}
.filtros-busca-corpo{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.6rem 1.1rem;margin-top:.6rem;padding:.7rem .8rem;border-radius:var(--r-md);border:1px solid var(--linha);background:var(--sup2)}
.filtros-busca-corpo .campo{flex:0 0 11rem}
.filtros-busca-corpo .check-filtro{padding-bottom:.55rem}
.filtros-busca-corpo .botao-link{font-size:var(--t-xs);padding-bottom:.6rem}
.tabela-buscas .cidades-celula{max-width:14rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabela-buscas td small{font-size:var(--t-xs)}
.tabela b.num{font:500 var(--t-base) var(--mono)}
.progresso-mini{display:flex;flex-direction:column;gap:.25rem;min-width:8rem}
.progresso-mini .barra{margin:0}
.progresso-mini small{font:var(--t-xs) var(--sans);color:var(--suave)}
.andamento{display:flex;flex-direction:column;gap:.8rem;max-width:52rem}
.andamento-topo{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem}
.andamento-topo b{font-weight:600}
.ponto-vivo{--t:var(--ciano);width:.6rem;height:.6rem;border-radius:50%;background:var(--ciano);box-shadow:0 0 0 4px color-mix(in srgb,var(--ciano) 20%,transparent)}
@media (prefers-reduced-motion:no-preference){
.ponto-vivo{animation:pulso 1.8s ease-in-out infinite}
}
.barra.grande{height:8px}
.andamento-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem}
.andamento-lista li{display:flex;justify-content:space-between;gap:1rem;padding:.45rem .65rem;border-radius:var(--r-md);background:var(--sup2);border:1px solid var(--linha);font-size:var(--t-md)}
.andamento-lista small{color:var(--apagado);font-size:var(--t-xs);text-align:right}
.tabela-resultados td.sel,.tabela-resultados th.sel{width:2.2rem;padding-right:0}
.tabela-resultados input[type=checkbox]{width:1rem;height:1rem;accent-color:var(--ciano);cursor:pointer}
.tabela-resultados tr.marcada td{background:color-mix(in srgb,var(--ciano) 6%,transparent)}
.chip[data-cache]{color:var(--lavanda);border-color:color-mix(in srgb,var(--lavanda) 30%,var(--linha))}
@media (max-width:1250px){
.busca-campos{grid-template-columns:1fr 1fr}
.busca-campos>button{margin-top:0;justify-self:start}
}
@media (max-width:700px){
.busca-campos{grid-template-columns:1fr}
}
.linha-dupla-celula{white-space:nowrap}
.linha-dupla-celula small{display:block;font-size:var(--t-xs);color:var(--apagado)}
.tabela-buscas td.empresa{width:auto;min-width:12rem;max-width:22rem}
.tabela-buscas td.empresa b{-webkit-line-clamp:1}
.tabela-buscas td.empresa small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:22rem}
.resumo-busca .status{padding:.55rem .8rem;gap:.15rem}
.resumo-busca .status strong{font-size:var(--t-base)}
.resumo-busca .status .sub{font-size:var(--t-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
main.cheio>.resumo-busca,main.cheio>.filtros-lista{flex:none;margin:0}
/* 17/09: quadro e lista escaláveis (busca no servidor, limite de cards e paginação) */
.mais-cards{display:flex;flex:none;align-items:center;justify-content:center;gap:.35rem;margin:.2rem 0 .1rem;padding:.5rem;border-radius:var(--r-md);border:1px dashed var(--linha2);color:var(--suave);font-size:var(--t-xs)}
.mais-cards:hover{text-decoration:none;color:var(--texto);border-color:color-mix(in srgb,var(--c) 50%,var(--linha2))}
form.busca-quadro{display:flex;align-items:center;gap:.4rem;margin:0}
.limpar-filtro{display:inline-flex;align-items:center;gap:.3rem;padding:.42rem .55rem;border-radius:var(--r-md);color:var(--suave);font-size:var(--t-xs);border:1px solid var(--linha);white-space:nowrap}
.limpar-filtro:hover{text-decoration:none;color:var(--texto);border-color:var(--linha2)}
form.filtros-lista{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin:0}
.paginacao{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:.5rem;font:var(--t-xs) var(--sans);color:var(--suave)}
.paginacao span{margin-right:auto}
#selecionar-filtro{font-size:var(--t-sm)}
/* 17/09: vários espaços, papéis, planos, administração e primeiros passos */
.ficha-lgpd{display:flex;flex-direction:column;gap:.35rem;margin-top:.8rem;padding-top:.7rem;border-top:1px dashed var(--linha2)}
.ficha-lgpd b{font-size:var(--t-xs);font-weight:500}
.ficha-lgpd form{margin:0}
.botao-assistido{color:#25d366}
.botao-assistido:hover{border-color:color-mix(in srgb,#25d366 45%,var(--linha))}
.compositor[data-modo=assistido] button.botao-enviar{background:#25d366;color:#04210f}
.pill[data-tom=erro]{--c:var(--coral)}
.pill[data-tom=alerta]{--c:var(--ambar)}
.menu-conta{position:relative;flex:1;min-width:0}
.menu-conta>summary{list-style:none;cursor:pointer}
.menu-conta>summary::-webkit-details-marker{display:none}
.menu-conta>summary>.ico{flex:none;margin-left:auto;color:var(--apagado);transition:transform var(--transicao)}
.menu-conta:not([open])>summary>.ico{transform:rotate(180deg)}
.menu-conta[open]>summary{background:var(--sup2)}
.menu-conta-painel{position:absolute;left:0;bottom:calc(100% + .5rem);z-index:40;width:16.5rem;display:flex;flex-direction:column;gap:.15rem;padding:.45rem;border-radius:var(--r-lg);background:var(--sup2);border:1px solid var(--linha2);box-shadow:var(--sombra)}
.menu-conta-painel .olho{padding:.35rem .5rem .2rem}
.menu-conta-painel>a,.menu-conta-painel>form>button{display:flex;align-items:center;justify-content:flex-start;gap:.6rem;width:100%;padding:.5rem .55rem;border-radius:var(--r-md);font:500 var(--t-sm) var(--sans);color:var(--texto);background:none;border:0;text-align:left}
.menu-conta-painel>a:hover,.menu-conta-painel>form>button:hover{background:var(--sup);text-decoration:none;filter:none}
.menu-conta-painel>a .ico,.menu-conta-painel>form>button .ico{color:var(--suave)}
.menu-conta-painel form{margin:0}
.menu-espacos{display:flex;flex-direction:column;gap:.1rem;max-height:14rem;overflow-y:auto;padding-bottom:.3rem;margin-bottom:.2rem;border-bottom:1px solid var(--linha)}
button.espaco-item{display:flex;align-items:center;justify-content:flex-start;gap:.55rem;width:100%;padding:.4rem .5rem;border-radius:var(--r-md);background:none;border:0;color:var(--texto);text-align:left;font-weight:400}
button.espaco-item:hover{background:var(--sup);filter:none}
button.espaco-item[aria-current=true]{background:color-mix(in srgb,var(--ciano) 8%,transparent)}
button.espaco-item .linha-dupla{flex:1}
button.espaco-item .linha-dupla b{font-size:var(--t-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
button.espaco-item .ico{color:var(--ciano)}
.menu-conta-nota{display:flex;align-items:center;gap:.4rem;margin:.1rem .5rem .35rem;font-size:var(--t-xs);color:var(--lavanda)}
:root[data-lateral="1"] .menu-conta>summary>.ico{display:none}
.faixa-espaco{--c:var(--ciano);flex:none;display:flex;align-items:center;gap:.55rem;padding:.42rem clamp(1rem,2.5vw,2rem);font-size:var(--t-sm);color:var(--texto);background:color-mix(in srgb,var(--c) 9%,var(--void));border-bottom:1px solid color-mix(in srgb,var(--c) 26%,var(--linha))}
.faixa-espaco[data-tom=ambar]{--c:var(--ambar)}
.faixa-espaco[data-tom=lavanda]{--c:var(--lavanda)}
.faixa-espaco .ico{flex:none;color:var(--c)}
.faixa-espaco span{min-width:0}
.faixa-espaco a{margin-left:auto;white-space:nowrap;color:var(--c);font-weight:500}
/* 25/09 (Gartner Desk): a faixa do suporte na instalação de clientes tem dois links, juntos à direita. */
.faixa-espaco .faixa-links{margin-left:auto;display:flex;gap:1rem;white-space:nowrap}
.faixa-espaco .faixa-links a{margin-left:0}
.area:has(>.faixa-espaco){height:100vh;overflow:hidden}
.area:has(>.faixa-espaco)>main{height:auto;flex:1;min-height:0}
.membro-acoes{display:flex;align-items:center;gap:.3rem;margin-left:auto}
.lista-pessoas .membro-acoes form{margin:0}
.form-papel select{padding:0 .55rem;font-size:var(--t-sm);background:var(--sup)}
.link-gerado{display:flex;flex-direction:column;gap:.35rem;padding:.9rem 1rem;border-radius:var(--r-lg);border:1px solid color-mix(in srgb,var(--menta) 35%,var(--linha));background:color-mix(in srgb,var(--menta) 6%,var(--sup))}
.copiar-linha{display:flex;gap:.45rem;margin-top:.2rem}
.copiar-linha input{flex:1;min-width:0;font:var(--t-sm) var(--mono);background:var(--sup2)}
.lista-papeis{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.5rem}
.lista-papeis li{display:flex;flex-direction:column;gap:.2rem;padding:.65rem .75rem;border-radius:var(--r-md);background:var(--sup2);border:1px solid var(--linha)}
.lista-papeis li span{font-size:var(--t-sm);color:var(--suave)}
.tabela-auditoria{max-height:20rem;border-radius:var(--r-md);border:1px solid var(--linha)}
.tabela-auditoria .tabela{font-size:var(--t-sm)}
.tabela-auditoria td{padding:.45rem .7rem;border-top:1px solid var(--linha);vertical-align:top}
.tabela-auditoria .mono{font:var(--t-xs) var(--mono);color:var(--apagado);white-space:nowrap}
.forca-senha{display:grid;grid-template-columns:repeat(4,1fr) auto;align-items:center;gap:.25rem;margin-top:.1rem}
.forca-senha i{height:.22rem;border-radius:var(--r-pilula);background:var(--linha2);transition:background-color var(--transicao)}
.forca-senha span{min-width:4.5rem;text-align:right;font:var(--t-xs) var(--sans);color:var(--apagado)}
.forca-senha[data-nivel="1"] i:nth-child(-n+1){background:var(--coral)}
.forca-senha[data-nivel="2"] i:nth-child(-n+2){background:var(--ambar)}
.forca-senha[data-nivel="3"] i:nth-child(-n+3){background:var(--ciano)}
.forca-senha[data-nivel="4"] i{background:var(--menta)}
.entrar-linha{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap}
.entrar-link{font-size:var(--t-sm)}
.botao-google{display:flex;align-items:center;justify-content:center;gap:.65rem;width:100%;padding:.72rem 1rem;border-radius:var(--r-md);background:#fff;color:#1f1f1f;font:500 var(--t-base) var(--sans);border:1px solid #dadce0;transition:background-color var(--transicao)}
.botao-google:hover{background:#f2f2f2;text-decoration:none}
.entrar-divisor{display:flex;align-items:center;gap:.7rem;margin:0;font:var(--t-xs) var(--sans);color:var(--apagado)}
.entrar-divisor::before,.entrar-divisor::after{content:"";flex:1;border-top:1px solid var(--linha)}
.entrar-rodape-form{margin:0;text-align:center;font-size:var(--t-sm);color:var(--suave)}
.primeiros-passos{flex:none;padding:.85rem 1rem}
.primeiros-passos header{display:flex;align-items:center;gap:1rem;margin-bottom:.7rem}
.primeiros-passos h2{margin:.15rem 0 0;font-size:var(--t-base)}
.primeiros-passos header form{margin:0}
.passos-barra{flex:0 1 12rem;margin-left:auto;height:.35rem;border-radius:var(--r-pilula);background:var(--linha);overflow:hidden}
.passos-barra i{display:block;height:100%;border-radius:inherit;background:var(--menta)}
.primeiros-passos ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.5rem}
.primeiros-passos li a{display:flex;align-items:center;gap:.55rem;height:100%;padding:.5rem .6rem;border-radius:var(--r-md);background:var(--sup2);border:1px solid var(--linha);color:var(--texto);transition:border-color var(--transicao)}
.primeiros-passos li a:hover{text-decoration:none;border-color:color-mix(in srgb,var(--ciano) 45%,var(--linha2))}
.primeiros-passos li a>.ico{flex:none;margin-left:auto;color:var(--apagado);display:none}
.primeiros-passos .linha-dupla b{font-size:var(--t-sm)}
.primeiros-passos .linha-dupla small{white-space:normal;font-size:var(--t-xs);line-height:1.35}
.passo-marca{display:grid;place-items:center;flex:none;width:1.7rem;height:1.7rem;border-radius:50%;font:600 var(--t-xs)/1 var(--sans);color:var(--ciano);background:color-mix(in srgb,var(--ciano) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ciano) 30%,transparent)}
.primeiros-passos li[data-feito] a{opacity:.6}
.primeiros-passos li[data-feito] .passo-marca{color:var(--menta);background:color-mix(in srgb,var(--menta) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--menta) 30%,transparent)}
.primeiros-passos li[data-feito] b{text-decoration:line-through;text-decoration-color:var(--apagado)}
.kpis-admin{grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr))}
.kpis-admin .kpi b{font:600 var(--t-xl)/1.2 var(--sans)}
.tabela-admin td:first-child{min-width:11rem}
.tabela-admin td:not(:first-child){white-space:nowrap}
/* 26/09: com os módulos separados (um por tela, 25/09) a lista deles e o ID longo, sem quebra, empurravam a tabela para
   fora do bloco e cortavam "Entrar como admin". Agora os dois quebram linha e os botões descem se faltar espaço. */
.tabela-admin .linha-dupla small{white-space:normal;overflow-wrap:anywhere}
.tabela-admin td.modulos{white-space:normal;min-width:9rem;max-width:22rem;line-height:1.45}
.tabela-admin td.acoes{width:1%}
.tabela-admin td.acoes .acoes-linha{flex-wrap:wrap}
.tabela-admin td.dominio a{display:inline-flex;align-items:center;gap:.3rem;color:var(--texto)}
.tabela-admin td.dominio a .ico{color:var(--apagado)}
.tabela-admin td.dominio a:hover{color:var(--ciano)}
.bloco-admin{display:flex;flex-direction:column;gap:.6rem;padding:.75rem .85rem}
.topo-admin{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem}
.topo-admin input{width:min(20rem,100%);padding:.45rem .7rem;font-size:var(--t-md)}
.bloco-admin .tabela td,.bloco-admin .tabela th{padding:.5rem .55rem}
.bloco-admin .tabela td{border-top:1px solid var(--linha);vertical-align:middle}
.bloco-admin .tabela-rolagem{overflow:visible}
.menu-acoes{position:relative}
.menu-acoes>summary{list-style:none;display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .65rem;border-radius:var(--r-md);font-size:var(--t-sm);cursor:pointer;border:1px solid var(--linha2)}
.menu-acoes>summary::-webkit-details-marker{display:none}
.menu-acoes-painel{position:absolute;right:0;top:calc(100% + .35rem);z-index:20;width:17rem;display:flex;flex-direction:column;gap:.6rem;padding:.8rem;border-radius:var(--r-lg);background:var(--sup2);border:1px solid var(--linha2);box-shadow:var(--sombra)}
.menu-acoes-painel input,.menu-acoes-painel select{background:var(--sup)}
.acoes-linha form button.botao-sec{min-height:var(--controle-mini);padding:.4rem .65rem;font-size:var(--t-sm);gap:.35rem}
main.legal{min-height:100vh;display:flex;justify-content:center;padding:clamp(1.5rem,5vw,4rem) 1rem}
main.legal article{width:min(44rem,100%)}
/* título dos termos e da privacidade: página pública, cresce com a janela como o da entrada */
main.legal h1{font-size:clamp(1.6rem,3vw,2.1rem);letter-spacing:-.02em;margin:.4rem 0 .6rem}
main.legal h2{font-size:var(--t-base);margin:1.6rem 0 .4rem}
main.legal p{color:var(--suave);line-height:1.65;margin:0}
main.legal .voltar{display:inline-block;margin-bottom:1.2rem;font-size:var(--t-md)}
.legal-rascunho{display:inline-block;padding:.35rem .6rem;border-radius:var(--r-md);font-size:var(--t-sm);color:var(--ambar)!important;background:color-mix(in srgb,var(--ambar) 8%,transparent);border:1px solid color-mix(in srgb,var(--ambar) 28%,transparent)}
.legal-rodape{margin-top:2.2rem!important;padding-top:1rem;border-top:1px solid var(--linha);font-size:var(--t-sm)}
/* 17/09: tela WhatsApp */
.whatsapp-tela{--c:var(--ciano);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem 2rem;border:1px solid color-mix(in srgb,var(--c) 28%,var(--linha))}
.whatsapp-tela[data-tom=ok]{--c:var(--menta)}
.whatsapp-tela[data-tom=erro]{--c:var(--coral)}
.whatsapp-estado{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem 1rem;align-items:start;flex:1 1 20rem}
.whatsapp-icone{grid-row:span 2;display:grid;place-items:center;width:3rem;height:3rem;border-radius:var(--r-lg);color:var(--c);background:color-mix(in srgb,var(--c) 12%,var(--sup2));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent)}
.whatsapp-estado h2{margin:.1rem 0 .15rem;font-size:var(--t-lg)}
.whatsapp-estado p{margin:0;font-size:var(--t-md)}
.whatsapp-passos{grid-column:2;margin:.7rem 0 0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.4rem;font-size:var(--t-md);color:var(--suave)}
.whatsapp-passos b{color:var(--texto);font-weight:500}
.whatsapp-qr{flex:none;border-radius:var(--r-lg);background:#fff;padding:.6rem;box-shadow:0 0 0 1px var(--linha2)}
.dicas-whatsapp li{line-height:1.5}

/* ================================================================ 22/09 — revisão Gartner
   Pedido do João: menos ícones soltos, sub-abas na lateral, a identidade da Gartner e mais cor.
   A lateral virou seções (Vendas, Site, Negócio), cada uma com a sua cor do trio pastel; as sub-abas abrem
   embaixo do item aberto; o G de três fitas e a faixa sunset do site assinam o sistema. */
::selection{background:var(--lavanda);color:var(--void)}
input,textarea,select{caret-color:var(--ciano)}
.lateral::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--sunset);opacity:.85}
.marca-g{width:1.85rem;height:1.8rem;flex:none}
/* 25/09 (Gartner Desk): a marca da lateral na instalação de clientes — o logo da clínica ou a inicial dela, no
   lugar do G, com o mesmo tamanho. */
.marca-logo{width:1.85rem;height:1.8rem;flex:none;border-radius:var(--r-md);object-fit:cover;box-shadow:var(--brilho),inset 0 0 0 1px var(--linha2)}
.marca-inicial{flex:none;width:1.85rem;height:1.8rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font:600 var(--t-base) var(--sans);color:var(--void)}
.marca-texto b{font-size:var(--t-lg);font-weight:600;letter-spacing:-.02em}
.marca-sub{font:600 var(--t-xs)/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--void);background:var(--sunset);padding:.26rem .42rem .22rem;border-radius:var(--r-pilula)}
.nav-principal{flex:1;min-height:0;gap:0;margin:0 -.3rem;padding:0 .3rem;scrollbar-width:none;display:flex;flex-direction:column;overflow:hidden}
.nav-principal::-webkit-scrollbar{display:none}
.nav-principal a .ico{color:color-mix(in srgb,var(--s) 55%,var(--apagado));transition:color var(--transicao)}
.nav-principal a:hover .ico{color:var(--s)}
.nav-principal a.atual{color:var(--texto);background:color-mix(in srgb,var(--s) 13%,var(--sup));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--s) 22%,transparent)}
.nav-principal a.atual .ico{color:var(--s)}
.nav-conta{margin-left:auto;min-width:1.35rem;padding:.2rem .38rem;border-radius:var(--r-pilula);font:600 var(--t-xs)/1 var(--sans);font-style:normal;text-align:center;color:var(--s);background:color-mix(in srgb,var(--s) 16%,transparent);font-variant-numeric:tabular-nums}
.nav-conta[data-vivo]{display:inline-flex;align-items:center;gap:.3rem;color:var(--menta);background:color-mix(in srgb,var(--menta) 14%,transparent)}
.nav-conta[data-vivo]::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--menta);animation:pulso-vivo 1.8s ease-out infinite}
.nav-sub{display:flex;flex-direction:column;gap:1px;margin:.15rem 0 .35rem 1.45rem;padding-left:.6rem;border-left:1px solid color-mix(in srgb,var(--s) 28%,var(--linha))}
.nav-principal .nav-sub a{min-height:1.95rem;padding:.3rem .6rem;font-size:var(--t-sm);font-weight:400;color:var(--apagado);background:none;box-shadow:none}
.nav-principal .nav-sub a:hover{color:var(--texto);background:color-mix(in srgb,var(--s) 6%,transparent)}
.nav-principal .nav-sub a.atual{color:var(--texto);font-weight:500;background:none;box-shadow:none}
.nav-principal .nav-sub a.atual::before{content:"";position:absolute;left:calc(-.6rem - 3px);top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--s)}
.nav-pe{margin-top:auto;padding-top:.6rem;border-top:1px solid var(--linha);flex:none}
.nav-pe a .ico{color:var(--suave)}
/* 24/09: era um segundo @keyframes pulso, que sobrescrevia o de cima (o anel do .status e do .ponto-vivo) */
@keyframes pulso-vivo{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--menta) 60%,transparent)}100%{box-shadow:0 0 0 7px transparent}}
@media (prefers-reduced-motion:reduce){.nav-conta[data-vivo]::before,.pulso,.aviso-visita{animation:none!important}}
/* recolhida: só ícones; seções viram um fio, sub-abas e títulos somem (as abas do alto assumem) */
:root[data-lateral="1"] .marca-texto,:root[data-lateral="1"] .nav-sub{display:none}
:root[data-lateral="1"] .nav-conta{position:absolute;top:.2rem;right:.2rem;min-width:0;padding:.12rem .25rem;font-size:var(--t-xs)}
:root[data-lateral="1"] .nav-conta[data-vivo]{width:.55rem;height:.55rem;padding:0;font-size:0;background:none}
:root[data-lateral="1"] .nav-conta[data-vivo]::before{width:.5rem;height:.5rem}
/* barra do alto: com a lateral aberta, as sub-abas já estão nela — aqui fica só o índice de Configurações */
.barra-pagina>.olho{display:none}
@media (min-width:901px){
:root:not([data-lateral="1"]) .barra-pagina:not(.com-dentro){display:none}
:root:not([data-lateral="1"]) .barra-pagina .abas{display:none}
:root:not([data-lateral="1"]) .barra-pagina .abas-dentro{padding-left:0;margin-left:0;border-left:0;gap:.3rem}
:root:not([data-lateral="1"]) .abas-dentro a{padding:.4rem .75rem;border-radius:var(--r-pilula);font-size:var(--t-sm)}
:root:not([data-lateral="1"]) .abas-dentro a.atual{background:var(--sup2);box-shadow:inset 0 0 0 1px var(--linha2)}
}
/* títulos de página sem sobretítulo: o título fala por si */
.pagina-topo .olho,.dash-topo .cabecalho-pagina>.olho{display:none}
/* 24/09 (kit genérico → identidade): cartão liso; a cor da seção vira uma borda fina em cima, no lugar do degradê */
.kpi::before,.kpi-heroi::before{content:"";position:absolute;top:-1px;left:.9rem;right:.9rem;height:2px;border-radius:0 0 var(--r-pilula) var(--r-pilula);background:var(--acento,var(--ciano));opacity:.85;pointer-events:none}
.app[data-secao=inicio] .kpi::before,.app[data-secao=inicio] .kpi-heroi::before{background:var(--sunset)}
.kpi:hover{border-color:color-mix(in srgb,var(--c) 45%,var(--linha));text-decoration:none;box-shadow:var(--brilho),var(--sombra);background:var(--sup2)}
.kpi[data-cor=menta]{--c:var(--menta)}
.kpi[data-cor=coral]{--c:var(--coral)}
.kpi[data-cor=ciano]{--c:var(--ciano)}

/* ---------------------------------------------------------------- tela Site (visitas) */
.tela-site{display:flex;flex-direction:column;gap:.75rem}
.site-topo{display:grid;grid-template-columns:minmax(17rem,24rem) minmax(0,1fr);gap:.75rem;align-items:stretch}
.kpi .sub em{margin-left:.4rem;font:600 var(--t-xs) var(--sans);font-style:normal;color:var(--menta)}
.kpi .sub em[data-sinal=menos]{color:var(--coral)}
.ao-vivo{--c:var(--menta);background:var(--sup);border-color:color-mix(in srgb,var(--menta) 24%,var(--linha));display:flex;flex-direction:column}
.ao-vivo h2{display:flex;align-items:center;gap:.55rem;margin:0}
.ao-vivo-numero{font:500 var(--t-heroi)/1 var(--mono);color:var(--menta);letter-spacing:-.03em}
.ao-vivo[data-vivos="0"] .ao-vivo-numero{color:var(--apagado);font-size:var(--t-xl)}
.ao-vivo[data-vivos="0"] h2 .pulso{background:var(--apagado);animation:none}
.pulso{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:var(--menta);flex:none;animation:pulso-vivo 1.8s ease-out infinite}
.ao-vivo-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem;overflow-y:auto;max-height:13rem}
.ao-vivo-lista li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.2rem .65rem;padding:.5rem .6rem;border-radius:var(--r-md);background:color-mix(in srgb,var(--void) 55%,transparent)}
.ao-vivo-lista li[data-lead]{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--menta) 35%,transparent)}
.ao-vivo-quem{display:flex;flex-direction:column;min-width:0}
.ao-vivo-quem b{font-size:var(--t-md);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ao-vivo-quem small,.visita-quem small{display:inline-flex;align-items:center;gap:.3rem;font-size:var(--t-xs);color:var(--apagado)}
.ao-vivo-lista code{grid-column:2;font:var(--t-xs) var(--mono);color:var(--lavanda);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ao-vivo-tempo{grid-row:1/3;grid-column:3;font:var(--t-xs) var(--sans);color:var(--suave)}
.site-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.barras-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.barras-lista li{--b:var(--ciano);display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"rotulo n" "trilho sub";gap:.25rem .7rem;align-items:center}
.barras-lista li[data-cor=lavanda]{--b:var(--lavanda)}
.barras-lista li[data-cor=ambar]{--b:var(--ambar)}
.barras-lista li[data-cor=menta]{--b:var(--menta)}
.barras-lista li[data-cor=rosa]{--b:var(--rosa)}
.barras-lista li[data-cor=ardosia]{--b:var(--ardosia)}
.barra-rotulo{grid-area:rotulo;display:flex;align-items:baseline;gap:.45rem;min-width:0;font-size:var(--t-md);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra-rotulo code{font:var(--t-xs) var(--mono);color:var(--apagado);overflow:hidden;text-overflow:ellipsis}
.barra-trilho{grid-area:trilho;height:6px;border-radius:var(--r-pilula);background:var(--linha);overflow:hidden}
.barra-trilho i{display:block;height:100%;border-radius:var(--r-pilula);background:var(--b)}
.barras-lista b{grid-area:n;font:500 var(--t-md) var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.barras-lista small{grid-area:sub;font:var(--t-xs) var(--sans);color:var(--apagado);text-align:right}
.visitas-bloco{display:flex;flex-direction:column;gap:.4rem}
.visita{border:1px solid var(--linha);border-radius:var(--r-lg);background:color-mix(in srgb,var(--void) 40%,transparent);transition:border-color var(--transicao)}
.visita[open]{border-color:var(--linha2)}
.visita[data-lead]{border-color:color-mix(in srgb,var(--menta) 30%,var(--linha))}
.visita>summary{display:grid;grid-template-columns:6.5rem minmax(0,1fr) auto auto auto 1rem;align-items:center;gap:.8rem;padding:.6rem .8rem;cursor:pointer;list-style:none}
.visita>summary::-webkit-details-marker{display:none}
.visita>summary>.ico{color:var(--apagado);transition:transform var(--transicao)}
.visita[open]>summary>.ico{transform:rotate(180deg)}
.visita-quando{font:var(--t-xs) var(--sans);color:var(--suave);white-space:nowrap}
.visita-quem{display:flex;flex-direction:column;min-width:0}
.visita-anonimo{font-size:var(--t-md);color:var(--suave)}
.visita-lead{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--t-md);font-weight:500;color:var(--menta)}
.visita-numeros{font:var(--t-xs) var(--sans);color:var(--suave);white-space:nowrap}
.visita-numeros b{color:var(--texto);font-weight:500}
.selo-origem,.selo-visita{--o:var(--lavanda);color:var(--o);background:color-mix(in srgb,var(--o) 13%,transparent)}
.selo-origem[data-cor=ciano]{--o:var(--ciano)}
.selo-origem[data-cor=menta],.selo-visita[data-cor=menta]{--o:var(--menta)}
.selo-origem[data-cor=rosa]{--o:var(--rosa)}
.selo-origem[data-cor=ambar]{--o:var(--ambar)}
.selo-origem[data-cor=ardosia]{--o:var(--ardosia)}
.visita-caminho{list-style:none;margin:0;padding:.2rem .9rem .8rem 7.9rem;display:flex;flex-direction:column;gap:.1rem}
.visita-caminho li{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem;padding:.3rem 0 .3rem 1.1rem;font-size:var(--t-sm)}
.visita-caminho li::before{content:"";position:absolute;left:0;top:.72rem;width:.45rem;height:.45rem;border-radius:50%;background:var(--lavanda)}
.visita-caminho li::after{content:"";position:absolute;left:calc(.225rem - .5px);top:1.2rem;bottom:-.55rem;width:1px;background:var(--linha2)}
.visita-caminho li:last-child::after{display:none}
.visita-caminho li[data-tipo=whatsapp]::before,.visita-caminho li[data-tipo=formulario]::before,.visita-caminho li[data-tipo=telefone]::before,.visita-caminho li[data-tipo=email]::before{background:var(--menta)}
.visita-caminho li[data-tipo=whatsapp] span,.visita-caminho li[data-tipo=formulario] span{color:var(--menta);font-weight:500}
.visita-caminho li[data-tipo=saida]::before{background:var(--apagado)}
.visita-caminho code{font:var(--t-xs) var(--mono);color:var(--apagado)}
.visita-caminho small{font:var(--t-xs) var(--sans);color:var(--suave)}
.visita-campanha{margin:0;padding:0 .9rem .8rem 7.9rem;font-size:var(--t-xs)}
.visitas-do-lead{display:flex;flex-direction:column;gap:.4rem}
.visitas-do-lead .visita>summary{grid-template-columns:minmax(0,1fr) auto 1rem;gap:.5rem}
.visitas-do-lead .visita-quem,.visitas-do-lead .visita-numeros,.visitas-do-lead .selo-visita{display:none}
.visitas-do-lead .visita-caminho,.visitas-do-lead .visita-campanha{padding-left:.9rem}
.filtro-site select{padding:0 .7rem;border-radius:var(--r-md)}
/* configurações › site */
/* 26/09 (F6): cada site é um cartão que abre e fecha (eram 11 formulários abertos, 7.000 px de rolagem); fechado, fica
   uma linha com o nome, os domínios e o que ele faz (contando visitas, no monitor) */
.site-cartao{border:1px solid var(--linha);border-radius:var(--r-lg);background:color-mix(in srgb,var(--void) 40%,transparent)}
.site-cartao+.site-cartao{margin-top:.5rem}
.site-cartao[data-inativo]>.site-resumo .site-resumo-nome{opacity:.7}
.site-resumo{display:flex;align-items:center;gap:.75rem;min-height:3.25rem;padding:.55rem .9rem;border-radius:inherit;cursor:pointer;list-style:none}
.site-resumo::-webkit-details-marker{display:none}
.site-resumo:hover{background:color-mix(in srgb,var(--acento) 5%,transparent)}
.site-resumo-nome{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.site-resumo-nome b{font-weight:500;font-size:var(--t-md)}
.site-resumo-nome small{color:var(--apagado);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-resumo-selos{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.3rem}
.site-resumo>.ico{flex:none;color:var(--apagado);transition:transform var(--transicao)}
.site-cartao[open]>.site-resumo{border-bottom:1px solid var(--linha);border-radius:var(--r-lg) var(--r-lg) 0 0}
.site-cartao[open]>.site-resumo>.ico{transform:rotate(180deg)}
.site-corpo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:1rem 1.5rem;padding:1rem}
.site-form{display:flex;flex-direction:column;gap:.7rem}
.site-ativo{display:flex;align-items:center;gap:.5rem;font-size:var(--t-md);color:var(--suave)}
.site-codigo{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.codigo-copiar{display:flex;align-items:flex-start;gap:.5rem;padding:.6rem .7rem;border-radius:var(--r-md);background:var(--void);border:1px solid var(--linha2)}
.codigo-copiar code{flex:1;min-width:0;font:var(--t-xs)/1.5 var(--mono);color:var(--lavanda);overflow-wrap:anywhere}
.site-excluir{grid-column:1/-1;justify-self:end}
.site-novo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:end;gap:.7rem}
/* aviso de visita nova, no canto de qualquer tela */
.aviso-visita{position:fixed;right:1.25rem;bottom:1.25rem;z-index:60;display:flex;align-items:center;gap:.7rem;max-width:22rem;padding:.75rem .95rem;border-radius:var(--r-lg);background:linear-gradient(160deg,color-mix(in srgb,var(--menta) 14%,transparent),transparent 60%),var(--sup2);border:1px solid color-mix(in srgb,var(--menta) 35%,var(--linha2));box-shadow:0 12px 32px -12px rgba(0,0,0,.8);color:var(--texto);font-size:var(--t-md);animation:entra-aviso .4s cubic-bezier(.16,1,.3,1)}
.aviso-visita b{color:var(--menta);font-weight:500}
.aviso-visita:hover{text-decoration:none;border-color:var(--menta)}
@keyframes entra-aviso{from{opacity:0;transform:translateY(12px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@media (max-width:1100px){.site-topo{grid-template-columns:1fr}.site-grade{grid-template-columns:1fr 1fr}}
@media (max-width:700px){
.site-grade,.site-corpo,.site-novo{grid-template-columns:1fr}
.visita>summary{grid-template-columns:minmax(0,1fr) auto 1rem}
.visita-quando,.visita-numeros,.selo-visita{display:none}
.visita-caminho,.visita-campanha{padding-left:.9rem}
}
/* telas baixas (o notebook do João a 150% tem ~633px úteis): a lateral inteira cabe sem rolar */
@media (min-width:901px) and (max-height:760px){
.lateral{gap:.6rem;padding-top:.8rem}
.nav-principal a{min-height:2rem;padding:.3rem .65rem}
.nav-principal .nav-sub a{min-height:1.7rem;padding:.2rem .55rem}
.nav-pe{padding-top:.35rem}
.abrir-comandos{padding:.4rem .65rem}
.lateral-conta{padding-top:.4rem}
}
/* Configurações: os grupos ficam no alto (a lateral só marca o item), com as telas do grupo ao lado */
@media (min-width:901px){
:root:not([data-lateral="1"]) .barra-pagina.config{display:flex}
:root:not([data-lateral="1"]) .barra-pagina.config .abas{display:flex}
:root:not([data-lateral="1"]) .barra-pagina.config .abas-dentro{padding-left:1rem;margin-left:.2rem;border-left:1px solid var(--linha2)}
}
.kpi[data-cor=lavanda]{--c:var(--lavanda)}
.estado-item[data-tom=ok] .ponto{background:var(--menta)}
.card-site{color:var(--menta);background:color-mix(in srgb,var(--menta) 12%,transparent)}
/* só as seções rolam; o pé (Configurações) fica sempre à vista */
.nav-rolagem{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;margin:0 -.3rem;padding:0 .3rem .9rem;
-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 1rem),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 1rem),transparent)}
.nav-rolagem::-webkit-scrollbar{display:none}
.ao-vivo-lista code,.visita-caminho code,.barra-rotulo code{background:none;padding:0;border:0}
.entrar-marca::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--sunset);z-index:2}
.entrar-marca-topo .marca-g{width:2.3rem;height:2.25rem}
.entrar-marca-topo .marca-texto{display:flex}
.entrar-marca>.entrar-g{position:absolute;z-index:0;right:-14%;bottom:-18%;width:min(34rem,62%);height:auto;opacity:.13;pointer-events:none}
.barra.grande span{transition:transform .6s cubic-bezier(.16,1,.3,1)}
/* ---------------------------------------------------------------- 22/09, noite: revisão dos dashboards (crítica A + B) */
[data-serie=envios]{--serie:var(--serie-volume)}
[data-serie=respostas],[data-serie=mrr]{--serie:var(--serie-resposta)}
/* séries do gráfico: tons validados pela skill de dataviz para o fundo escuro (a lavanda e a menta pastéis ficam claras demais como marca) */
[data-serie=visitas]{--serie:var(--serie-site)}
[data-serie=contatos]{--serie:var(--serie-contato)}
.h2-nota{display:block;margin-top:.15rem;font:400 var(--t-xs) var(--sans);color:var(--apagado)}
.kpi .sub em span{font-weight:400;color:var(--apagado)}
/* Início: a data sob a saudação, e a coluna "Agora" ao lado dos funis */
.dash-data{margin:.15rem 0 0;font-size:var(--t-sm);color:var(--suave)}
.dash-data::first-letter{text-transform:uppercase}
.dash-corpo{display:grid;grid-template-columns:minmax(18rem,26rem) minmax(0,1fr);gap:.7rem;align-items:start;min-height:0}
.dash-funis{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:.7rem;align-content:start}
.agora{display:flex;flex-direction:column;gap:.1rem}
.agora-segundo{margin-top:.8rem;padding-top:.7rem;border-top:1px solid var(--linha)}
.agora-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.agora-lista a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.65rem;padding:.45rem .5rem;border-radius:var(--r-md);color:var(--texto)}
.agora-lista a:hover{background:var(--sup2);text-decoration:none}
.agora-lista .avatar{width:1.9rem;height:1.9rem;font-size:var(--t-xs)}
.agora-texto{display:flex;flex-direction:column;min-width:0}
.agora-texto b{font-size:var(--t-md);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agora-texto small{font-size:var(--t-xs);color:var(--suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agora-lista time{font:var(--t-xs) var(--sans);color:var(--suave);white-space:nowrap}
.agora-icone{display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:var(--r-md);color:var(--ambar);background:color-mix(in srgb,var(--ambar) 12%,transparent)}
.agora-lista li[data-situacao=atrasada] time{color:var(--coral)}
.agora-lista li[data-situacao=atrasada] .agora-icone{color:var(--coral);background:color-mix(in srgb,var(--coral) 12%,transparent)}
.funil-fechados{margin:.35rem 0 0;font-size:var(--t-xs);color:var(--suave)}
.funil-fechados [data-etapa]{color:var(--c)}
.funil-vazio .vazio{margin:0}
@media (max-width:1000px){.dash-corpo{grid-template-columns:1fr}}
/* Site: o "agora" encolhe quando não há ninguém */
.site-topo:has(.ao-vivo[data-vivos="0"]){grid-template-columns:minmax(14rem,18rem) minmax(0,1fr)}
/* celular: Resultados em uma coluna (a lateral virou gaveta em 24/09, ver "celular" mais abaixo) */
@media (max-width:700px){.resultados-grade{grid-template-columns:1fr}}
/* tela muito baixa (o notebook do João, ~633 px): até 22/09 os títulos das seções sumiam aqui, e a cor por seção perdia
   a função. Desde 24/09 eles ficam, compactos, e quem cede altura são os itens: no Início a lateral inteira, até o
   Instagram, cabe sem rolar; com as sub-abas de um item abertas, ela rola até o item (lateral.js). */
@media (min-width:901px) and (max-height:680px){
.lateral{gap:.45rem;padding:.7rem .65rem .6rem}
.lateral .marca-g,.lateral .marca-logo,.lateral .marca-inicial{width:1.6rem;height:1.55rem}
.abrir-comandos{padding:.32rem .6rem}
.nav-principal a{min-height:1.72rem;padding:.2rem .65rem}
.nav-principal .nav-sub a{min-height:1.6rem;padding:.14rem .55rem}
.nav-sub{margin-top:.05rem;margin-bottom:.2rem}
.nav-rolagem{padding-bottom:.35rem;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - .5rem),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - .5rem),transparent)}
.nav-pe{padding-top:.3rem}
.lateral-conta{padding-top:.3rem}
.lateral-conta .conta{padding:.15rem .35rem}
.lateral-conta .avatar{width:1.8rem;height:1.8rem}
:root[data-lateral="1"] .lateral{gap:.45rem}
:root[data-lateral="1"] .lateral-topo{gap:.3rem}
:root[data-lateral="1"] .nav-principal a,:root[data-lateral="1"] .abrir-comandos{padding:.3rem}
:root[data-lateral="1"] .lateral-conta{gap:0}
}
/* ---------------------------------------------------------------- 22/09, noite: Configurações mais simples
   Título e uma linha de explicação em cima, campos em grade embaixo (antes: explicação numa coluna de 19rem ao lado). */
.ajuste-campos>:not(.campo),.ajuste-campos>.campo.largo{grid-column:1/-1}
.ajustes-recolhidos{border:1px dashed var(--linha2);border-radius:var(--r-lg);background:color-mix(in srgb,var(--sup) 50%,transparent)}
.ajustes-recolhidos>summary{display:flex;align-items:center;gap:.6rem;padding:.85rem 1.1rem;cursor:pointer;list-style:none;font-weight:500;font-size:var(--t-md);color:var(--suave)}
.ajustes-recolhidos>summary::-webkit-details-marker{display:none}
.ajustes-recolhidos>summary small{font-weight:400;font-size:var(--t-xs);color:var(--apagado)}
.ajustes-recolhidos>summary .ico{margin-left:auto;transition:transform var(--transicao)}
.ajustes-recolhidos[open]>summary .ico{transform:rotate(180deg)}
.ajustes-recolhidos[open]{display:flex;flex-direction:column;gap:.75rem;padding-bottom:.75rem}
.ajustes-recolhidos>.ajuste-secao{margin:0 .75rem}
.ficha-nunca{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:var(--t-sm);color:var(--suave);margin:.3rem 0 .5rem}
.ficha-nunca small{flex-basis:100%;padding-left:1.5rem;font-size:var(--t-xs);color:var(--apagado)}
.ficha-excluir{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;margin:.4rem 0 .7rem}
/* ---------------------------------------------------------------- 22/09, noite: paleta, tema claro e diálogo do painel
   Pedido do João: "vamos tirar o monocromático [...] usar uma paleta de cores, também uma versão clara".
   - Escuro: o Deep Void da Gartner com superfícies num tom frio (antes, cinza puro), e cada seção pinta a tela
     com a sua cor (Vendas ciano, Site lavanda, Negócio âmbar, Configurações ardósia, Início com o sunset).
   - Claro: papel quente, textos quase pretos e o trio pastel em tons profundos (todos com 4,5:1 ou mais).
   - O tema segue o do sistema até o João escolher; a escolha fica no navegador. */
:root[data-tema=claro]{color-scheme:light;--void:#f6f6f3;--sup:#ffffff;--sup2:#f1f1ee;--linha:#e4e4df;--linha2:#d3d3cd;
--texto:#16171c;--suave:#50525c;--apagado:#686a74;--ciano:#08739a;--ambar:#a8590a;--lavanda:#6250d6;--menta:#0f7652;
--coral:#c43d3d;--rosa:#b3357a;--ardosia:#57627c;--sobre-acento:#ffffff;--brilho:none;
--sombra:0 1px 2px rgba(20,20,30,.06),0 14px 30px -18px rgba(20,20,30,.28);
--serie-volume:#0f86b3;--serie-resposta:#c86f14;--serie-site:#7462e6;--serie-contato:#16925f}
:root[data-tema=claro] .lateral{background:var(--sup)}
:root[data-tema=claro] ::selection{background:color-mix(in srgb,var(--lavanda) 30%,transparent);color:var(--texto)}
:root[data-tema=claro] .marca-sub{color:#16171c}
:root[data-tema=claro] .aviso-visita{box-shadow:0 12px 32px -12px rgba(20,20,30,.3)}
:root[data-tema=claro] .entrar-marca{background:radial-gradient(50rem 30rem at -10% -10%,color-mix(in srgb,#f4c587 22%,transparent),transparent 60%),radial-gradient(40rem 30rem at 110% 110%,color-mix(in srgb,#99d2ec 26%,transparent),transparent 60%),var(--sup2)}
:root[data-tema=claro] .entrar-marca>.entrar-g{opacity:.22}
/* fundos que eram cinza-escuro fixo */
/* 24/09: o hover do botão principal não pode vencer o fundo de um botão secundário (os filtros de Conversas e de
   Modelos ficavam com texto cinza sobre ciano, 1,7:1). Com :where ele pesa só o :hover, e quem tem fundo próprio o mantém. */
.filtros button:hover{background:var(--sup2);color:var(--texto);border-color:var(--linha2)}
button.recolher,button.abrir-comandos{color:var(--suave)}
button.recolher:hover,button.abrir-comandos:hover{background:var(--sup2)}

/* cor da seção: a tela ganha um brilho da cor dela no alto e o título ganha a marca */
.app[data-secao=vendas]{--acento:var(--ciano)}
.app[data-secao=site]{--acento:var(--lavanda)}
.app[data-secao=negocio]{--acento:var(--ambar)}
.app[data-secao=config]{--acento:var(--ardosia)}
.app[data-secao=inicio]{--acento:var(--lavanda)}
:root[data-tema=claro] .area{background:radial-gradient(70rem 18rem at 18% -7rem,color-mix(in srgb,var(--acento) 9%,transparent),transparent 72%),var(--void)}
.app[data-secao=inicio] .area{background:radial-gradient(50rem 15rem at 8% -7rem,color-mix(in srgb,#f4c587 10%,transparent),transparent 70%),
radial-gradient(50rem 15rem at 60% -8rem,color-mix(in srgb,#99d2ec 10%,transparent),transparent 70%),var(--void)}
.pagina-topo h1,.dash-topo h1{display:flex;align-items:center;gap:.55rem}
.pagina-topo h1::before,.dash-topo h1::before{content:"";flex:none;width:.3rem;height:1.05em;border-radius:var(--r-pilula);background:var(--acento)}
.app[data-secao=inicio] .dash-topo h1::before{background:linear-gradient(180deg,#f4c587,#d6d3e9 50%,#99d2ec)}
.abas a.atual,.abas-dentro a.atual{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acento) 40%,var(--linha2));background:color-mix(in srgb,var(--acento) 12%,var(--sup2))}
input:focus,select:focus,textarea:focus{border-color:color-mix(in srgb,var(--acento) 60%,var(--linha))}

/* botão de tema, no pé da lateral */
.botao-tema{display:grid;place-items:center;min-width:2rem;min-height:2rem;padding:.4rem;border-radius:var(--r-md);background:none;border:1px solid transparent;color:var(--suave);cursor:pointer}
.botao-tema:hover{color:var(--texto);background:var(--sup2);border-color:var(--linha)}
.botao-tema>span{display:none}
:root[data-tema-escolha=claro] .botao-tema>.ico-claro,:root[data-tema-escolha=escuro] .botao-tema>.ico-escuro,
:root:not([data-tema-escolha=claro]):not([data-tema-escolha=escuro]) .botao-tema>.ico-sistema{display:grid}
:root[data-lateral="1"] .lateral-conta .botao-tema{order:3}

/* diálogo de confirmação do painel (no lugar do confirm() do navegador) */
dialog.confirmacao{width:min(26rem,calc(100vw - 2rem));padding:1.4rem 1.4rem 1.1rem;border-radius:var(--r-lg);border:1px solid var(--linha2);background:var(--sup);color:var(--texto);box-shadow:0 24px 60px -20px rgba(0,0,0,.7)}
dialog.confirmacao::backdrop{background:color-mix(in srgb,var(--void) 55%,transparent);backdrop-filter:blur(3px)}
dialog.confirmacao[open]{animation:entra-confirmacao .22s cubic-bezier(.16,1,.3,1)}
@keyframes entra-confirmacao{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.confirmacao-marca{display:block;width:2.4rem;height:.3rem;border-radius:var(--r-pilula);margin-bottom:1rem;background:var(--sunset)}
dialog.confirmacao[data-perigo="1"] .confirmacao-marca{background:var(--coral)}
dialog.confirmacao h2{margin:0 0 .45rem;font-size:var(--t-lg);font-weight:600;letter-spacing:-.01em;line-height:1.35;text-wrap:balance}
dialog.confirmacao p{margin:0;font-size:var(--t-md);line-height:1.5;color:var(--suave)}
.confirmacao-acoes{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1.3rem}
dialog.confirmacao[data-perigo="1"] .confirmacao-sim{background:var(--coral);color:var(--sobre-acento)}
dialog.confirmacao[data-perigo="1"] .confirmacao-sim:hover{background:color-mix(in srgb,var(--coral) 86%,var(--texto))}
@media (prefers-reduced-motion:reduce){dialog.confirmacao[open]{animation:none}}
/* ---------------------------------------------------------------- 22/09, noite: Monitor dos sites e da VM */
.nav-conta[data-alerta]{color:var(--coral);background:color-mix(in srgb,var(--coral) 16%,transparent)}
.tela-monitor{display:flex;flex-direction:column;gap:.75rem}
.monitor-geral{--t:var(--menta);display:flex;align-items:center;gap:.7rem;padding:.85rem 1.1rem;background:linear-gradient(100deg,color-mix(in srgb,var(--t) 14%,transparent),transparent 65%),var(--sup);border:1px solid color-mix(in srgb,var(--t) 30%,var(--linha));flex-wrap:wrap}
.monitor-geral[data-tom=coral]{--t:var(--coral)}
.monitor-geral[data-tom=ambar]{--t:var(--ambar)}
.monitor-geral .ico{color:var(--t)}
.monitor-geral b{font-size:var(--t-base)}
.monitor-geral span{font-size:var(--t-sm);color:var(--suave)}
.monitor-ponto{flex:none;width:.6rem;height:.6rem;border-radius:50%;background:var(--m);box-shadow:0 0 0 4px color-mix(in srgb,var(--m) 18%,transparent)}
@keyframes pulso-coral{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--coral) 60%,transparent)}100%{box-shadow:0 0 0 8px transparent}}
.monitor-nome{display:flex;flex-direction:column;min-width:0;flex:1}
.monitor-nome b{font-size:var(--t-base);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.monitor-nome a{font:var(--t-xs) var(--sans);color:var(--suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.monitor-host{--h:var(--ardosia);flex:none;color:var(--h);background:color-mix(in srgb,var(--h) 14%,transparent)}
.monitor-host[data-h=vm]{--h:var(--ciano)}
.monitor-host[data-h=pages]{--h:var(--ambar)}
.monitor-faixa{display:grid;grid-template-columns:repeat(48,minmax(0,1fr));gap:2px;height:1.4rem}
/* gomos da faixa de 24 h: 2 px, senão os 48 gomos viram contas redondas */
.monitor-faixa i{border-radius:2px;background:var(--linha2)}
.monitor-faixa i[data-s=ok]{background:color-mix(in srgb,var(--menta) 75%,var(--sup))}
.monitor-faixa i[data-s=parcial]{background:var(--ambar)}
.monitor-faixa i[data-s=falha]{background:var(--coral)}
.monitor-cloudflare{display:flex;align-items:center;gap:.5rem;margin:0;padding:.7rem 1rem;border-radius:var(--r-lg);border:1px dashed var(--linha2);font-size:var(--t-sm);color:var(--suave)}
.vm-medidores{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem}
.vm-medidor{--t:var(--ardosia);display:flex;flex-direction:column;gap:.3rem;padding:.75rem .85rem;border-radius:var(--r-lg);background:var(--sup2);border:1px solid var(--linha)}
.vm-medidor[data-tom=menta]{--t:var(--menta)}
.vm-medidor[data-tom=ambar]{--t:var(--ambar)}
.vm-medidor[data-tom=coral]{--t:var(--coral)}
.vm-medidor b{font:500 var(--t-xl)/1 var(--mono);letter-spacing:-.02em}
.vm-medidor small{font-size:var(--t-xs);color:var(--suave)}
.vm-barra{height:6px;border-radius:var(--r-pilula);background:var(--linha);overflow:hidden}
.vm-barra i{display:block;height:100%;border-radius:var(--r-pilula);background:var(--t)}
.vm-servicos{list-style:none;margin:.8rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:.4rem .9rem}
.vm-servicos li{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.05rem .5rem;padding:.45rem .1rem}
.vm-servicos li .ico{grid-row:1/3;color:var(--menta)}
.vm-servicos li[data-ok="0"] .ico{color:var(--coral)}
.vm-servicos b{font-size:var(--t-md);font-weight:500}
.vm-servicos small{font-size:var(--t-xs);color:var(--suave)}
.monitor-aberto{color:var(--coral);font-weight:500}
.site-monitor{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:.6rem .9rem;margin:.2rem 0 0;padding:.75rem .85rem;border-radius:var(--r-lg);border:1px solid var(--linha)}
.site-monitor legend{padding:0 .3rem}
.site-monitor .site-ativo{grid-column:1/-1}
.monitor-config{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:.8rem 1.1rem;align-items:start}
.monitor-config>:not(.campo){grid-column:1/-1}
.aviso-monitor[data-ruim]{background:linear-gradient(160deg,color-mix(in srgb,var(--coral) 16%,transparent),transparent 60%),var(--sup2);border-color:color-mix(in srgb,var(--coral) 45%,var(--linha2))}
.aviso-monitor[data-ruim] b{color:var(--coral)}
@media (max-width:900px){.vm-medidores{grid-template-columns:1fr 1fr}}
/* Monitor em lista (22/09, pedido do João) */
.monitor-lista{overflow-x:auto}
.monitor-linha{display:grid;grid-template-columns:minmax(13rem,1.6fr) 4.2rem minmax(8rem,1fr) 4.6rem 4.6rem 4.8rem minmax(9rem,1.1fr) 5.6rem minmax(7rem,.9fr);align-items:center;gap:.8rem;min-width:62rem;padding:.6rem 1rem;border-top:1px solid var(--linha);scroll-margin-block:5rem}
.monitor-linha:hover{background:color-mix(in srgb,var(--acento) 5%,transparent)}
.monitor-cabeca{border-top:0;padding-top:.7rem;padding-bottom:.55rem;font:500 var(--t-xs)/1 var(--sans);color:color-mix(in srgb,var(--acento) 55%,var(--suave))}
.monitor-cabeca:hover{background:none}
.monitor-linha[data-situacao=fora]{--m:var(--coral);background:color-mix(in srgb,var(--coral) 7%,transparent);box-shadow:inset 3px 0 0 var(--coral)}
.monitor-quem{display:flex;align-items:center;gap:.6rem;min-width:0}
.monitor-linha .monitor-ponto{--m:var(--menta)}
.monitor-linha .monitor-ponto[data-cor=coral]{--m:var(--coral);background:var(--coral)}
.monitor-linha .monitor-ponto[data-cor=ambar]{background:var(--ambar);box-shadow:0 0 0 4px color-mix(in srgb,var(--ambar) 18%,transparent)}
.monitor-linha .monitor-ponto[data-cor=ardosia]{background:var(--ardosia);box-shadow:0 0 0 4px color-mix(in srgb,var(--ardosia) 18%,transparent)}
.monitor-linha[data-situacao=fora] .monitor-ponto{animation:pulso-coral 1.6s ease-out infinite}
.monitor-estado{display:flex;flex-direction:column;min-width:0}
.monitor-estado b{font-size:var(--t-sm);font-weight:500;color:var(--menta)}
.monitor-estado[data-cor=coral] b{color:var(--coral)}
.monitor-estado[data-cor=ambar] b{color:var(--ambar)}
.monitor-estado[data-cor=ardosia] b{color:var(--suave)}
.monitor-estado small{font-size:var(--t-xs);color:var(--suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.monitor-num{font:500 var(--t-md) var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.monitor-cabeca .monitor-num{font:500 var(--t-xs)/1 var(--sans)}
.monitor-linha .monitor-faixa{height:1.1rem;gap:1px}
.monitor-ssl [data-tom=ambar],.monitor-deploy [data-tom=ambar]{color:var(--ambar)}
.monitor-ssl [data-tom=coral],.monitor-deploy [data-tom=coral]{color:var(--coral)}
.monitor-deploy{font-size:var(--t-xs);color:var(--suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tela-monitor>*{flex:none}
/* sem o token do Cloudflare não há deploy para mostrar: a coluna sai e a lista cabe no notebook */
.monitor-lista[data-sem-deploy] .monitor-linha{grid-template-columns:minmax(13rem,1.6fr) 4.2rem minmax(8rem,1fr) 4.4rem 4.6rem 4.8rem minmax(9rem,1.2fr) 5.4rem;min-width:52rem}
.monitor-lista[data-sem-deploy] .monitor-linha>:last-child{display:none}
/* 24/09: agente da primeira resposta (Vendas › Agente e Configurações › Agente) */
.tela-agente .painel-bloco+.painel-bloco{margin-top:.75rem}
.agente-lista{display:grid;gap:.7rem}
.agente-cartao{--c:var(--suave);border:1px solid var(--linha);border-left:3px solid var(--c);border-radius:var(--r-lg);background:var(--sup2);padding:.8rem .9rem;display:grid;gap:.7rem;box-shadow:var(--brilho)}
.agente-cartao[data-caso=pessoa],.agente-caso[data-caso=pessoa]{--c:var(--menta)}
.agente-cartao[data-caso=negativa],.agente-caso[data-caso=negativa]{--c:var(--coral)}
.agente-cartao[data-caso=saida],.agente-caso[data-caso=saida]{--c:var(--rosa)}
.agente-cartao[data-caso=automatica],.agente-caso[data-caso=automatica]{--c:var(--ardosia)}
.agente-cartao[data-caso=joao],.agente-caso[data-caso=joao]{--c:var(--ambar)}
.agente-cartao>header{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;min-width:0}
.agente-cartao>header a{color:var(--texto);text-decoration:none;font-size:var(--t-base)}
.agente-cartao>header a:hover{text-decoration:underline}
.agente-cartao>header small{color:var(--apagado);font:400 var(--t-xs)/1.3 var(--sans);font-variant-numeric:tabular-nums}
.agente-caso{--c:var(--suave);margin-left:auto;color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent)}
.tabela .agente-caso{margin-left:0}
.agente-corpo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:.9rem}
.agente-disse,.agente-sugere{display:grid;gap:.4rem;align-content:start;min-width:0}
/* balões do agente: a cauda de 4 px do lado de quem fala (ver a cauda do balão, em Conversas) */
.agente-msg{margin:0;justify-self:start;max-width:100%;padding:.45rem .7rem;border-radius:4px var(--r-lg) var(--r-lg) var(--r-lg);background:var(--sup);border:1px solid var(--linha);font-size:var(--t-md);line-height:1.4;overflow-wrap:anywhere}
.agente-porque{margin:0;display:grid;gap:.35rem;font-size:var(--t-md);color:var(--suave);line-height:1.45}
.agente-trava,.agente-conf{display:flex;gap:.35rem;align-items:flex-start;font-size:var(--t-sm);color:var(--apagado)}
.agente-trava{color:var(--ambar)}
.agente-trava .ico{flex:none;margin-top:.15rem}
.agente-previa summary{cursor:pointer;font-size:var(--t-sm);color:var(--ciano);list-style:none}
.agente-previa summary::-webkit-details-marker{display:none}
.agente-previa pre{margin:.5rem 0 0;white-space:pre-wrap;font:400 var(--t-sm)/1.5 var(--sans);background:color-mix(in srgb,var(--menta) 7%,var(--sup));border:1px solid var(--linha);border-radius:var(--r-lg) 4px var(--r-lg) var(--r-lg);padding:.6rem .75rem;max-height:14rem;overflow:auto}
.agente-acoes{display:flex;align-items:flex-end;gap:.5rem;flex-wrap:wrap;border-top:1px solid var(--linha);padding-top:.7rem}
.agente-acoes .campo{flex:1 1 18rem;margin:0}
.agente-acoes button{flex:none}
.agente-teste-resultado{--c:var(--suave);margin-top:.75rem;padding:.7rem .85rem;border-radius:var(--r-md);border:1px solid color-mix(in srgb,var(--c) 40%,var(--linha));background:color-mix(in srgb,var(--c) 7%,var(--sup));display:grid;gap:.35rem}
.agente-teste-resultado[data-caso=pessoa]{--c:var(--menta)}
.agente-teste-resultado[data-caso=negativa]{--c:var(--coral)}
.agente-teste-resultado[data-caso=saida]{--c:var(--rosa)}
.agente-teste-resultado[data-caso=automatica]{--c:var(--ardosia)}
.agente-teste-resultado[data-caso=joao]{--c:var(--ambar)}
.agente-teste-resultado>b{color:var(--c)}
.agente-teste-resultado p{margin:0}
.agente-teste-resultado small{color:var(--apagado);font-family:var(--sans);font-size:var(--t-xs)}
.agente-td-msg{max-width:26rem;color:var(--suave)}
.tabela td small{display:block;color:var(--apagado);font-size:var(--t-xs);margin-top:.15rem}
.selo[data-tom=ok]{color:var(--menta);border-color:color-mix(in srgb,var(--menta) 20%,transparent);background:color-mix(in srgb,var(--menta) 8%,transparent)}
.selo[data-tom=alerta]{color:var(--ambar);border-color:color-mix(in srgb,var(--ambar) 20%,transparent);background:color-mix(in srgb,var(--ambar) 8%,transparent)}
.selo[data-tom=erro]{color:var(--coral);border-color:color-mix(in srgb,var(--coral) 20%,transparent);background:color-mix(in srgb,var(--coral) 8%,transparent)}
.selo[data-tom=neutro]{color:var(--apagado);border-color:var(--linha2);background:none}
textarea.mono{font:400 var(--t-sm)/1.55 var(--mono);min-height:18rem}
.interruptor-dica{display:flex;gap:.45rem;align-items:center;font-size:var(--t-sm);color:var(--suave);margin-top:.5rem}
@media (max-width:860px){.agente-corpo{grid-template-columns:1fr}.agente-caso{margin-left:0}}
/* ================================================================ 24/09, noite — revisão de design: interface e navegação
   Da revisão completa de 24/09 (Estudos/2026-09-24 — Revisão completa do produto.md, seções 3 e 6). */
.conversa-item.atual .conversa-linha time{color:var(--suave)}
/* fundos com tom: o --apagado ficava abaixo de 4,5:1 (4,29 no "Cobranças" da linha de estado do Início) */
.estado-item[data-pede] .estado-rotulo{color:var(--suave)}
/* tema claro: texto colorido sobre o fundo da mesma cor (contadores, avatares, etiquetas) ficava entre 3,4 e 4,46:1.
   O texto desses selos escurece um pouco na direção do --texto e passa de 4,5:1, sem perder a cor. */
:root[data-tema=claro] .nav-conta{color:color-mix(in srgb,var(--s) 74%,var(--texto))}
:root[data-tema=claro] .nav-conta[data-vivo]{color:color-mix(in srgb,var(--menta) 74%,var(--texto))}
:root[data-tema=claro] .nav-conta[data-alerta]{color:color-mix(in srgb,var(--coral) 74%,var(--texto))}
:root[data-tema=claro] .avatar,:root[data-tema=claro] .etiqueta{color:color-mix(in srgb,var(--c,var(--suave)) 74%,var(--texto))}
:root[data-tema=claro] .selo-origem,:root[data-tema=claro] .selo-visita{color:color-mix(in srgb,var(--o) 74%,var(--texto))}
:root[data-tema=claro] .monitor-host{color:color-mix(in srgb,var(--h) 74%,var(--texto))}
:root[data-tema=claro] .estado-item[data-pede] b,:root[data-tema=claro] .estado-acao{color:color-mix(in srgb,var(--t) 74%,var(--texto))}
:root[data-tema=claro] :is(.contagem,.etiqueta-lead,.agente-caso,.pill,.ig-selo,.selo-modo){color:color-mix(in srgb,var(--c) 74%,var(--texto))}
:root[data-tema=claro] .card-dias[data-parado]{color:color-mix(in srgb,var(--coral) 74%,var(--texto))}
:root[data-tema=claro] .card-site,:root[data-tema=claro] .selo[data-tom=ok]{color:color-mix(in srgb,var(--menta) 74%,var(--texto))}
:root[data-tema=claro] :is(.selo[data-temp=Quente],.selo[data-envio=manual],.selo[data-tom=alerta]){color:color-mix(in srgb,var(--ambar) 74%,var(--texto))}
:root[data-tema=claro] .selo[data-temp=Morno]{color:color-mix(in srgb,var(--lavanda) 74%,var(--texto))}
:root[data-tema=claro] .selo[data-envio=robo]{color:color-mix(in srgb,var(--ciano) 74%,var(--texto))}
:root[data-tema=claro] .selo[data-tom=erro]{color:color-mix(in srgb,var(--coral) 74%,var(--texto))}
/* letra mínima de 12 px: o <small> sem tamanho próprio herdava o "smaller" do navegador (10,7 px em Metas) */
:where(small){font-size:max(var(--t-xs),.85em)}
/* rótulos .sr (posição absoluta) dentro de uma área que rola ficavam presos à página e davam rolagem ao documento
   inteiro (Etapas rolava 420 px além da tela); com um ancestral posicionado eles ficam dentro da área */
main,.pagina-rolagem,.tabela-rolagem{position:relative}
/* a barra de abas do alto tem altura variável (Configurações com o índice de dentro: 46 px, e não os 41 da conta fixa):
   a área vira coluna da altura da janela e o main ocupa o que sobra */
@media (min-width:901px){
.area{height:100vh}
.barra-pagina+main{height:auto;flex:1;min-height:0}
}

/* ---- hierarquia de números (interface.kpi_heroi, faixa_kpis e painel_kpis)
   Um número principal por tela, grande, e os outros numa faixa menor ao lado. Cartões lisos, com a cor da seção só na
   borda de cima; o número é neutro e só ganha cor com estado (data-tom: ok, alerta, erro, info). Zero fala baixo. */
.kpis-hierarquia{display:grid;grid-template-columns:minmax(13rem,.75fr) minmax(0,2.25fr);gap:.7rem;align-items:stretch;min-width:0}
.kpi-heroi{--t:var(--texto);position:relative;display:flex;flex-direction:column;justify-content:center;gap:.45rem;min-width:0;padding:1rem 1.15rem;color:var(--texto)}
a.kpi-heroi:hover{text-decoration:none;background:var(--sup2)}
.kpi-rotulo{font:500 var(--t-sm)/1.25 var(--sans);color:var(--suave)}
.kpi-valor{display:block;font:500 var(--t-xl)/1.05 var(--mono);letter-spacing:-.02em;color:var(--t);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-sub{font-size:var(--t-xs);line-height:1.4;color:var(--suave);min-width:0}
.kpi-heroi .kpi-rotulo{font-size:var(--t-md);font-weight:500;color:var(--texto)}
.kpi-heroi .kpi-valor{font-size:var(--t-heroi);letter-spacing:-.035em}
.kpi-heroi .kpi-sub{font-size:var(--t-sm)}
.faixa-kpis{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;min-width:0;overflow:hidden}
/* as linhas entre os itens são sombras de 1 px à esquerda e em cima; o overflow do cartão esconde as da borda */
.kpi-item{--t:var(--texto);position:relative;flex:1 1 8rem;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:.3rem;padding:.8rem .95rem;box-shadow:-1px 0 0 var(--linha),0 -1px 0 var(--linha)}
.kpi-item>a{display:flex;flex-direction:column;gap:.3rem;color:inherit}
.kpi-item>a::after{content:"";position:absolute;inset:0}
.kpi-item>a:hover{text-decoration:none}
.kpi-item:has(>a):hover{background:var(--sup2)}
.kpi-heroi[data-tom=ok],.kpi-item[data-tom=ok]{--t:var(--menta)}
.kpi-heroi[data-tom=alerta],.kpi-item[data-tom=alerta]{--t:var(--ambar)}
.kpi-heroi[data-tom=erro],.kpi-item[data-tom=erro]{--t:var(--coral)}
.kpi-heroi[data-tom=info],.kpi-item[data-tom=info]{--t:var(--ciano)}
.kpi-heroi[data-zero] .kpi-valor,.kpi-item[data-zero] .kpi-valor{color:var(--apagado)}
.kpi-sub .ig-barra{display:block;width:100%;max-width:7rem;margin:.1rem 0 .35rem}
.kpi-sub em{margin-left:.4rem;font-weight:600;font-style:normal;color:var(--menta)}
.kpi-sub em[data-sinal=menos]{color:var(--coral)}
.kpi-sub em span{font-weight:400;color:var(--suave)}
@media (max-width:1100px){.kpis-hierarquia{grid-template-columns:1fr}}
/* Site: ao lado do "Agora no site", o número principal em cima e a faixa embaixo */
.site-topo .kpis-hierarquia{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}

/* ---- barra de salvar de tabela editável (interface.barra_salvar(..., tabela=True) → .barra-salvar.tabela-salvar)
   O mesmo "Salvar alterações" de Configurações, no pé de uma tabela em que cada linha é editável (Etapas, por exemplo),
   no lugar de um botão Salvar por linha. Vai logo depois do </table>, dentro do mesmo <form data-ajustes>. */
.barra-salvar.tabela-salvar{position:sticky;bottom:0;max-width:none;margin:.6rem 0 0;padding:.55rem .6rem .55rem .9rem;border-radius:var(--r-lg)}
.tabela-rolagem>.tabela-salvar,.painel-bloco>.tabela-salvar{margin-top:.5rem}
.tabela input:not([type=checkbox]):not([type=radio]),.tabela select{padding:0 .55rem;font-size:var(--t-md);background:var(--sup2);min-width:0}

/* ---- Monitor: o aviso "fora do ar" leva à linha (lateral.js), e a linha fora do ar tem um fio vermelho à esquerda */
.monitor-linha[data-situacao=fora]:target,.monitor-linha.realce{animation:realce-linha 1.8s ease-out}
@keyframes realce-linha{0%,30%{background:color-mix(in srgb,var(--coral) 26%,transparent)}100%{background:color-mix(in srgb,var(--coral) 7%,transparent)}}
.monitor-ir{margin-left:auto;display:inline-flex;align-items:center;gap:.3rem;min-height:2rem;padding:0 .85rem;border-radius:var(--r-pilula);font-size:var(--t-sm);font-weight:500;color:var(--coral);border:1px solid color-mix(in srgb,var(--coral) 40%,var(--linha))}
.monitor-ir::after{content:"";width:.4rem;height:.4rem;margin-top:-.2rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.monitor-ir:hover{text-decoration:none;background:color-mix(in srgb,var(--coral) 12%,transparent)}
@media (prefers-reduced-motion:reduce){.monitor-linha.realce,.monitor-linha:target{animation:none}}

/* ---- Início no monitor (~1920×950): o corpo ocupa a altura que sobra, sem 40% de tela vazia embaixo.
   "Esperando você" e "Para hoje" ficam numa coluna inteira; os funis se empilham ao lado e dividem a altura. */
@media (min-width:1500px) and (min-height:820px){
/* 26/09 (F6): eram 4 trilhos para 5 filhos (topo, números, estado, Vendedor e corpo), e o 1fr caía na faixa do Vendedor
   (172 px para uma linha). Em coluna, só o corpo cresce, quantas faixas houver em cima. */
main.cheio>.tela-dash{display:flex;flex-direction:column}
main.cheio>.tela-dash>*{flex:none}
main.cheio>.tela-dash>.dash-corpo{flex:1 1 auto;min-height:0}
.tela-dash>.dash-corpo{grid-template-columns:minmax(26rem,1fr) minmax(0,1.35fr);align-items:stretch}
.tela-dash .dash-corpo>.painel-bloco{align-self:stretch;overflow-y:auto}
.tela-dash .dash-funis{grid-auto-rows:minmax(0,1fr);align-content:stretch;min-height:0}
.tela-dash .dash-corpo:is([data-funis="1"],[data-funis="2"]) .dash-funis{grid-template-columns:1fr}
.tela-dash .dash-funis>.painel-bloco{align-self:stretch;overflow-y:auto}
.tela-dash .dash-funis .funil-bloco{flex:1;justify-content:center}
}
/* Lateral no monitor: com altura sobrando, itens e seções respiram (antes ficava um vão entre o Instagram e o pé) */
@media (min-width:901px) and (min-height:860px){
.lateral{gap:1rem;padding-top:1.15rem}
.nav-principal a{min-height:2.4rem}
}

/* ---- celular e tablet em pé (até 900 px): barra de baixo com Início, Conversas, Agente, Atividades e "Mais", que abre
   a lateral inteira como gaveta. Antes a lateral virava uma faixa de 16 ícones sem nome, 9 fora da tela. */
.nav-celular,.gaveta-fundo,.chat-voltar{display:none}
@media (max-width:900px){
:root{--barra-celular:calc(3.7rem + env(safe-area-inset-bottom,0px))}
.lateral{position:fixed;top:0;bottom:0;left:0;z-index:80;width:min(19rem,86vw);height:100%;height:100dvh;flex-direction:column;align-items:stretch;gap:.8rem;
padding:1rem .8rem calc(1rem + env(safe-area-inset-bottom,0px));border-right:1px solid var(--linha2);border-bottom:0;overflow:hidden;
transform:translateX(-105%);visibility:hidden;transition:transform .28s cubic-bezier(.16,1,.3,1),visibility 0s linear .28s}
:root[data-gaveta="1"] .lateral{transform:none;visibility:visible;transition:transform .28s cubic-bezier(.16,1,.3,1);box-shadow:24px 0 60px -24px rgba(0,0,0,.75)}
.gaveta-fundo{position:fixed;inset:0;z-index:79;display:block;background:color-mix(in srgb,var(--void) 62%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.nav-principal a{min-height:2.75rem}
.nav-principal .nav-sub a{min-height:2.4rem}
.area{padding-bottom:var(--barra-celular)}
.nav-celular{position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:.15rem;
padding:.3rem .4rem calc(.3rem + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--sup) 92%,transparent);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--linha)}
.nav-celular>a,.nav-celular>button{--s:var(--acento,var(--ciano));position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.22rem;min-width:0;min-height:3.05rem;padding:.3rem .1rem;border:0;border-radius:var(--r-lg);background:none;color:var(--suave);font:500 var(--t-xs)/1.1 var(--sans);text-decoration:none}
.nav-celular>a:hover,.nav-celular>button:hover{background:var(--sup2);color:var(--texto);text-decoration:none}
.nav-celular>a.atual{color:var(--texto)}
.nav-celular>a.atual .ico{color:var(--acento,var(--ciano))}
.nav-celular>a.atual::before{content:"";position:absolute;top:-.3rem;left:32%;right:32%;height:2px;border-radius:0 0 var(--r-pilula) var(--r-pilula);background:var(--acento,var(--ciano))}
:root[data-gaveta="1"] .nav-mais{color:var(--texto);background:var(--sup2)}
.nav-celular .nav-conta{position:absolute;top:.15rem;left:calc(50% + .35rem);margin:0;min-width:1.15rem;padding:.12rem .3rem}
.toast{bottom:calc(var(--barra-celular) + .8rem);z-index:90}
.aviso-visita{left:.75rem;right:.75rem;bottom:calc(var(--barra-celular) + .75rem);max-width:none}
.barra-salvar{bottom:var(--barra-celular)}
/* Conversas em duas telas (lateral.js põe data-conversa na raiz): a lista, e o chat em tela cheia */
.conversas-app{grid-template-columns:1fr;height:auto}
.conversas-lista{border-right:0}
:root[data-conversa=lista] .conversas-app>.chat-coluna,:root[data-conversa=lista] .conversas-app>.ficha{display:none}
:root[data-conversa=lista] .conversas-itens{flex:none}
:root[data-conversa=chat] .conversas-lista{display:none}
:root[data-conversa=chat] .conversas-app{position:fixed;inset:0;z-index:65;height:100%;height:100dvh;border:0;border-radius:0}
:root[data-conversa=chat] .nav-celular{display:none}
:root[data-conversa=chat] .area{padding-bottom:0}
.chat-coluna{height:100%}
.chat-voltar{display:grid;place-items:center;flex:none;width:2.5rem;height:2.5rem;margin-left:-.3rem;border-radius:var(--r-md);color:var(--texto)}
.chat-voltar:hover{background:var(--sup2);text-decoration:none}
.chat-quem h2,.chat-quem small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-mensagens{min-height:0;padding:.75rem .7rem}
.balao{max-width:86%}
.compositor-aviso:not([data-tom]){display:none}
/* o teclado do celular já tem emojis: o botão sai e o campo de digitar ganha a largura */
.compositor-linha>[data-alternar=painel-emojis]{display:none}
.compositor textarea{min-width:0}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){.lateral{transition:none}}
/* 24/09: Instagram (seção Marketing, rosa). Fila em cartões com prévia, publicados em tabela, visão geral com metas. */
.app[data-secao=marketing]{--acento:var(--rosa)}
.tela-ig{display:flex;flex-direction:column;gap:1rem}
.ig-barra{display:inline-block;width:4.5rem;height:4px;border-radius:var(--r-pilula);background:var(--linha2);vertical-align:middle;margin-right:.4rem;overflow:hidden}
.ig-barra i{display:block;height:100%;background:var(--rosa);border-radius:inherit}
.ig-alertas{display:flex;flex-direction:column;gap:.4rem}
.ig-alerta{--c:var(--ambar);display:flex;align-items:center;gap:.55rem;padding:.6rem .85rem;border-radius:var(--r-md);color:var(--texto);font-size:var(--t-md);border:1px solid color-mix(in srgb,var(--c) 35%,var(--linha));background:color-mix(in srgb,var(--c) 7%,var(--sup))}
.ig-alerta .ico{color:var(--c);flex:none}
.ig-alerta:hover{text-decoration:none;background:color-mix(in srgb,var(--c) 12%,var(--sup))}
.ig-selo{--c:var(--ardosia);color:var(--c);border:1px solid color-mix(in srgb,var(--c) 22%,transparent);background:color-mix(in srgb,var(--c) 8%,transparent)}
/* 24/09: o --c do .ig-selo vinha depois do [data-cor=...] geral e deixava todo selo cinza */
.ig-selo[data-cor=ciano]{--c:var(--ciano)}.ig-selo[data-cor=ambar]{--c:var(--ambar)}.ig-selo[data-cor=lavanda]{--c:var(--lavanda)}
.ig-selo[data-cor=menta]{--c:var(--menta)}.ig-selo[data-cor=rosa]{--c:var(--rosa)}.ig-selo[data-cor=coral]{--c:var(--coral)}
.ig-proximos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ig-proximos li{display:grid;grid-template-columns:8.5rem auto minmax(0,1fr);align-items:center;gap:.75rem;padding:.55rem 0;border-top:1px solid var(--linha)}
.ig-proximos li:first-child{border-top:0}
.ig-quando{font:500 var(--t-sm)/1.3 var(--sans);color:var(--suave);font-variant-numeric:tabular-nums}
.ig-linha{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-serie{display:block;width:100%;height:6rem}
.ig-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(36rem,1fr));gap:1rem;align-items:start}
.ig-cartao{display:grid;grid-template-columns:minmax(8rem,11.5rem) minmax(0,1fr);gap:1.1rem}
.ig-midia{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.ig-cartao[data-estado=aprovado]{border-color:color-mix(in srgb,var(--ciano) 35%,var(--linha))}
.ig-cartao[data-estado=erro]{border-color:color-mix(in srgb,var(--coral) 45%,var(--linha))}
.ig-previa{position:relative;aspect-ratio:4/5;border-radius:var(--r-md);overflow:hidden;background:var(--sup2);border:1px solid var(--linha)}
.ig-previa img,.ig-previa video{width:100%;height:100%;object-fit:cover;display:block}
.ig-previa.mini{width:3.2rem;aspect-ratio:4/5;border-radius:var(--r-sm)}
.ig-previa.story{aspect-ratio:9/16}.ig-previa.mini.story{aspect-ratio:9/16;width:2.4rem}
.ig-previa.mini .ig-tipo{display:none}
.ig-tipo{position:absolute;left:.5rem;top:.5rem;padding:.12rem .5rem;border-radius:var(--r-pilula);font:500 var(--t-xs)/1.5 var(--sans);color:#fff;background:rgba(14,14,14,.72)}
.ig-slides{display:flex;gap:.35rem;overflow-x:auto;scrollbar-width:none}
.ig-slides img{width:2.6rem;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--linha);flex:none}
.ig-video summary{cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;font-size:var(--t-sm);color:var(--suave)}
.ig-video video{width:100%;max-height:28rem;border-radius:var(--r-md);margin-top:.5rem;background:#000}
.ig-form{display:flex;flex-direction:column;gap:.6rem}
.ig-form textarea{min-height:9rem;font:400 var(--t-sm)/1.55 var(--sans);resize:vertical}
.ig-topo{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.ig-topo .ig-quando{margin-left:auto}
.ig-erro{display:flex;gap:.4rem;align-items:flex-start;margin:0;color:var(--coral);font-size:var(--t-sm)}
.ig-tabela td{vertical-align:middle}
.ig-tabela td.ig-mini{width:3.6rem}
.ig-tabela form{display:inline}
.ig-metas{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.9rem 1rem}
.ig-metas .acoes-form{grid-column:1/-1}
.ig-metas .campo:has(textarea){grid-column:1/-1}
/* 24/09: metas do ciclo, marcos e relatórios do Claude */
.ig-metas-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ig-metas-lista li{display:grid;grid-template-columns:minmax(0,15rem) minmax(6rem,1fr) minmax(0,15rem) 6.5rem;align-items:center;gap:.9rem;padding:.6rem 0;border-top:1px solid var(--linha)}
.ig-metas-lista li:first-child{border-top:0}
.ig-meta-nome{font-size:var(--t-md)}
.ig-meta-num{font-variant-numeric:tabular-nums;color:var(--suave);font-size:var(--t-sm)}
.ig-meta-num b{color:var(--texto);font-size:var(--t-md)}
.ig-metas-lista .ig-selo{justify-self:start}
.ig-barra.larga{width:100%;height:6px;margin:0}
.ig-marcos{margin-top:1rem}
.ig-marcos td{vertical-align:middle}
.ig-editar summary{cursor:pointer;font-weight:500;color:var(--suave)}
.ig-editar[open] summary{margin-bottom:1rem}
.ig-rel-abas{display:flex;gap:.4rem;flex-wrap:wrap}
.ig-rel-aba{padding:.3rem .75rem;border-radius:var(--r-pilula);border:1px solid var(--linha);color:var(--suave);font:500 var(--t-sm)/1.4 var(--sans)}
.ig-rel-aba:hover{text-decoration:none;color:var(--texto);border-color:var(--linha2)}
.ig-rel-aba.ativo{color:var(--rosa);border-color:color-mix(in srgb,var(--rosa) 45%,var(--linha));background:color-mix(in srgb,var(--rosa) 9%,transparent)}
.ig-relatorio{max-width:60rem;line-height:1.65}
.ig-relatorio h2{font-size:var(--t-xl);margin:0 0 .6rem}
.ig-relatorio h3{font-size:var(--t-lg);margin:1.6rem 0 .5rem;color:var(--rosa)}
.ig-relatorio h4{font-size:var(--t-md);margin:1.1rem 0 .4rem}
.ig-relatorio p,.ig-relatorio ul{margin:.4rem 0 .8rem}
.ig-relatorio ul{padding-left:1.2rem}
.ig-relatorio li{margin:.2rem 0}
.ig-relatorio .tabela{margin:.6rem 0 1rem}
@media (max-width:640px){.ig-grade{grid-template-columns:1fr}.ig-cartao{grid-template-columns:1fr}.ig-proximos li{grid-template-columns:1fr;gap:.25rem}
  .ig-metas-lista li{grid-template-columns:1fr auto;gap:.35rem .75rem}.ig-metas-lista .ig-barra{grid-column:1/-1}}
.tela-ig .kpis{grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr))}
.tela-ig .kpi .sub{font-size:var(--t-xs)}
.ig-pedidos li{grid-template-columns:8.5rem auto minmax(0,1fr)}
.ig-falhou{color:var(--coral);font-weight:500}
/* 24/09: editar valor e vencimento da cobrança (abre na própria linha, sem ficar preso na rolagem da tabela) e o dia padrão */
.acoes-cobranca{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.35rem}
.editar-cobranca-form{display:grid;gap:.75rem}
.editar-cobranca-form h2{margin:0;font-size:var(--t-lg)}
.editar-cobranca-form .dica{margin:-.4rem 0 0;font-size:var(--t-sm);color:var(--apagado)}
.editar-cobranca-form .dialogo-acoes{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.25rem}
.dia-vencimento{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.75rem;font-size:var(--t-sm);color:var(--suave)}
.dia-vencimento label{display:inline-flex;align-items:center;gap:.45rem;font-size:var(--t-sm)}
.dia-vencimento input{width:4.5rem;padding:.35rem .5rem}
.dia-vencimento small{color:var(--apagado)}
/* 24/09: gráfico do MRR mês a mês (Financeiro › Visão do mês): começa no primeiro mês com cliente, com valor e mês */
.meses-grafico{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:.75rem;height:11rem;padding-top:.25rem;border-bottom:1px solid var(--linha2)}
.mes-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.3rem;min-width:0;height:100%;cursor:default}
.mes-barra{width:min(56px,72%);min-height:0;background:var(--serie-volume);border-radius:var(--r-sm) var(--r-sm) 0 0;opacity:.85;transition:opacity var(--transicao)}
.mes-col:hover .mes-barra,.mes-col[data-atual] .mes-barra{opacity:1}
.mes-valor{font:500 var(--t-xs)/1 var(--sans);color:var(--suave);white-space:nowrap}
.mes-nome{font:var(--t-xs)/1 var(--sans);color:var(--apagado);padding-bottom:.35rem}
.mes-col[data-atual] .mes-nome{color:var(--texto)}
/* frente B — Financeiro, Clientes e Resultados (revisão de 24/09) */
/* Visão do mês: um número principal (a sobra) e o resto numa faixa menor; cor só quando há estado */
.fin-destaque{display:grid;grid-template-columns:minmax(15rem,20rem) minmax(0,1fr);gap:.75rem;align-items:stretch}
.fin-principal{display:flex;flex-direction:column;justify-content:center;gap:.35rem}
.fin-principal b{font:500 var(--t-heroi)/1 var(--mono);letter-spacing:-.03em;color:var(--texto);font-variant-numeric:tabular-nums}
.fin-principal[data-tom=alerta] b{color:var(--coral)}
.fin-faixas{display:grid;gap:.6rem;align-content:start;min-width:0}
.fin-faixa{display:flex;flex-wrap:wrap;gap:1px;border:1px solid var(--linha);border-radius:var(--r-lg);overflow:hidden;background:var(--linha)}
.fin-item{flex:1 1 9.5rem;display:flex;flex-direction:column;gap:.2rem;padding:.7rem .85rem;background:var(--sup);color:var(--texto);min-width:0}
a.fin-item:hover{background:var(--sup2);text-decoration:none}
.fin-item b{font:500 var(--t-lg)/1.15 var(--mono);font-variant-numeric:tabular-nums;color:var(--texto)}
.fin-item b small{font:500 var(--t-xs)/1 var(--mono);color:var(--apagado)}
.fin-item[data-tom=alerta] b,.fin-item[data-tom=alerta] .fin-sub{color:var(--coral)}
.fin-rotulo{font-size:var(--t-xs);color:var(--suave)}
.fin-sub{font-size:var(--t-xs);color:var(--apagado);overflow-wrap:anywhere}
.fin-aviso{margin:0}
.fin-aviso a{margin-left:.35rem}
@media (max-width:760px){.fin-destaque{grid-template-columns:1fr}}
/* Cobranças: filtros do mês e, depois do separador, os de todos os meses */
.fin-abas{flex-wrap:wrap;align-self:flex-start}
.periodos-sep{width:1px;margin:.3rem .35rem;background:var(--linha2)}
.fin-abas a[data-tom=alerta]{color:var(--coral)}
/* formulários do financeiro e da ficha do cliente: grade que ocupa a largura do bloco */
.form-financeiro{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.75rem 1rem;align-items:end}
.form-financeiro .largo,.form-financeiro .interruptor{grid-column:1/-1}
.form-financeiro>button{justify-self:start}
.form-financeiro .campo-dica{font-size:var(--t-xs);color:var(--apagado)}
.fin-previa{padding:.75rem .9rem;border-radius:var(--r-md);border:1px dashed var(--linha2);background:var(--sup2)}
.fin-previa p{margin:.35rem 0 0;white-space:pre-line;font-size:var(--t-md);color:var(--texto)}
.fin-regua-historico{grid-column:1/-1;list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.25rem;font-size:var(--t-sm);color:var(--suave)}
.fin-regua-historico li{display:grid;grid-template-columns:8.5rem minmax(0,1fr) auto;gap:.6rem}
.fin-regua-historico b{font-weight:500;color:var(--texto)}
/* Clientes: onboarding, site e domínios vencendo */
.cli-progresso{display:inline-block;vertical-align:middle;width:4.5rem;height:6px;border-radius:var(--r-pilula);background:var(--linha2);overflow:hidden;margin-right:.4rem}
.cli-progresso i{display:block;height:100%;border-radius:inherit;background:var(--menta)}
.cli-onboarding small,.cli-onboarding-rodape small{font:500 var(--t-xs)/1 var(--mono);color:var(--suave)}
.cli-apagado{font-size:var(--t-sm);color:var(--apagado)}
.cli-avisos h2{margin:0 0 .5rem;font-size:var(--t-base)}
.cli-avisos ul{margin:0;padding:0;list-style:none;display:grid;gap:.35rem;font-size:var(--t-sm);color:var(--suave)}
.cli-avisos li{padding-left:.75rem;border-left:3px solid var(--ambar)}
.cli-avisos li[data-tom=alerta]{border-left-color:var(--coral)}
.cli-numeros{grid-column:1/-1;margin-bottom:.9rem}
.cli-onboarding-form{grid-column:1/-1;display:grid;gap:.6rem}
.cli-passos{margin:0;padding:0;list-style:none;display:grid;gap:.35rem}
.cli-passo{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.45rem .6rem;border-radius:var(--r-md);border:1px solid var(--linha)}
.cli-passo[data-feito]{border-color:color-mix(in srgb,var(--menta) 35%,var(--linha))}
.cli-passo .check-filtro{color:var(--texto);font-size:var(--t-md)}
.cli-passo input[type=date]{padding:.35rem .5rem;font-size:var(--t-sm)}
.cli-onboarding-rodape{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.cli-novo{grid-column:1/-1;margin-top:.5rem;border-top:1px solid var(--linha);padding-top:.6rem}
.cli-novo>summary{cursor:pointer;color:var(--suave);font-size:var(--t-sm);margin-bottom:.6rem}
.cli-novo>summary:hover{color:var(--texto)}
.cli-dialogo{width:min(40rem,calc(100% - 2rem))}
.cli-dialogo .form-financeiro h2{margin:0}
.cli-dialogo .dialogo-acoes{display:flex;justify-content:flex-end;gap:.5rem}
@media (max-width:640px){.cli-passo{flex-wrap:wrap}.fin-regua-historico li{grid-template-columns:1fr}}
/* a tabela dentro da rolagem da página não encolhe até sumir (main.cheio .tabela-rolagem tem flex:1 e min-height:0) */
main.cheio .pagina-rolagem>.fin-bloco{flex:none}

/* frente A — vendas e agente (24/09, revisão): só acrescentado, nenhuma regra acima mudou */
.agora-lista li[data-situacao=vencido] time{color:var(--coral)}
.agora-lista li[data-situacao=vencido] .agora-icone{color:var(--coral);background:color-mix(in srgb,var(--coral) 12%,transparent)}
.selo-vendedor{--c:var(--lavanda);color:var(--c);border-color:color-mix(in srgb,var(--c) 35%,transparent);background:color-mix(in srgb,var(--c) 10%,transparent)}
.selo-vendedor[data-ponto=ola]{--c:var(--ardosia)}
.selo-vendedor[data-ponto=apresentacao]{--c:var(--ciano)}
.selo-vendedor[data-ponto=oferta]{--c:var(--ambar)}
.selo-vendedor[data-ponto=followup]{--c:var(--rosa)}
.selo-vendedor[data-ponto=interesse]{--c:var(--coral)}
.selo-modo.selo-vendedor{text-transform:none;letter-spacing:0;font-family:var(--sans)}
.msg-autor{display:block;margin-bottom:.2rem;font:600 var(--t-xs)/1.2 var(--sans);font-size:var(--t-xs);color:color-mix(in srgb,var(--suave) 65%,var(--texto))}
.msg[data-autor=robo] .msg-autor{color:var(--ardosia)}
.msg[data-autor=agente] .msg-autor{color:var(--lavanda)}
.msg[data-autor=joao] .msg-autor{color:var(--ciano)}
.contagem-filtro{margin-left:.25rem;font-variant-numeric:tabular-nums;color:var(--apagado)}
.busca-conversas{margin:0}
.busca-conversas input{width:100%}
.form-devolver{margin:0}
.agente-conversa{display:grid;gap:.35rem;border:1px dashed var(--linha);border-radius:var(--r-md);padding:.5rem .65rem;background:var(--sup)}
.agente-conversa summary{cursor:pointer;font-size:var(--t-sm);color:var(--suave)}
.agente-conversa .agente-msg{font-size:var(--t-sm);margin-top:.3rem}
.agente-conversa .agente-msg[data-autor=robo],.agente-conversa .agente-msg[data-autor=agente],.agente-conversa .agente-msg[data-autor=joao]{justify-self:end;border-radius:var(--r-lg) 4px var(--r-lg) var(--r-lg);background:color-mix(in srgb,var(--ciano) 10%,var(--sup2))}
.agente-conversa .agente-msg b{font-weight:600;color:var(--suave)}
.barra-agente{margin-top:.6rem}
.barra-agente>a.estado-rotulo{display:inline-flex;align-items:center;gap:.35rem;text-decoration:none;color:var(--suave);font-weight:600}
.barra-agente>a.estado-rotulo:hover{color:var(--texto)}

/* frente D */
/* 24/09: faixa de chip desconectado (alertas.faixa_chip), no mesmo molde da faixa de suporte, e a lista de backups. */
.faixa-espaco[data-tom=coral]{--c:var(--coral)}
.faixa-chip b{font-weight:600}
.tabela-backups td:last-child{text-align:right;white-space:nowrap}
.monitor-lacos .vm-servicos{margin-top:.4rem}
/* 26/09: Configurações › Atendimento (filas e regras de quem atende as conversas) */
.fila-pessoas{display:flex;flex-wrap:wrap;gap:.35rem .5rem}
.tabela-filas td{vertical-align:top}
.tabela-filas td.empresa input{max-width:14rem}
.form-nova-fila{display:grid;gap:.7rem}
.form-regras-atendimento{display:grid;gap:1rem;max-width:44rem}
.grupo-regra{display:grid;gap:.45rem;margin:0;padding:0;border:0;min-width:0}
.grupo-regra legend{font:500 var(--t-sm) var(--sans);color:var(--suave);margin-bottom:.35rem;padding:0}
.opcao-regra{display:flex;align-items:flex-start;gap:.6rem;padding:.6rem .75rem;border:1px solid var(--linha);border-radius:var(--r-md);background:var(--sup);cursor:pointer;transition:border-color var(--transicao),background-color var(--transicao)}
.opcao-regra:has(input:checked){border-color:color-mix(in srgb,var(--ciano) 45%,var(--linha2));background:color-mix(in srgb,var(--ciano) 6%,var(--sup))}
.opcao-regra input{margin-top:.2rem;accent-color:var(--ciano)}
.opcao-regra span{display:grid;gap:.15rem}
.opcao-regra b{font-weight:500;color:var(--texto);font-size:var(--t-md)}
.opcao-regra small{color:var(--suave);font-size:var(--t-xs);line-height:1.4}
/* 26/09: Conversas com vários atendentes — o dono no item, o seletor de atendente e o selo "Na fila" */
.conversa-previa .dono-conversa{display:inline-block;margin-right:.35rem;font:500 var(--t-xs)/1 var(--sans);padding:.16rem .38rem;border-radius:var(--r-pilula);color:var(--suave);background:var(--sup2);border:1px solid var(--linha);vertical-align:1px}
.selo-modo[data-modo=fila]{--c:var(--lavanda)}
/* 26/09: "Ana atendeu", "Ana passou para Bruno" no meio das bolhas, e o Atender no cabeçalho */
.evento{display:flex;justify-content:center;margin:.45rem 0}
.evento span{display:inline-flex;align-items:center;gap:.35rem;max-width:80%;font:500 var(--t-xs)/1.35 var(--sans);color:color-mix(in srgb,var(--lavanda) 80%,var(--texto));background:color-mix(in srgb,var(--lavanda) 9%,var(--sup));border:1px dashed color-mix(in srgb,var(--lavanda) 40%,var(--linha));padding:.36rem .7rem;border-radius:var(--r-pilula);text-align:center}
.form-atender{margin:0}
#transferir-conversa textarea{resize:vertical;min-height:4.5rem}
.nova-fila-linha{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.6rem}
.nova-fila-linha label{flex:1 1 14rem;max-width:20rem}
.nova-fila-linha label:nth-child(2){flex:0 1 12rem}
.nova-fila-linha button{margin-bottom:.1rem}
/* 26/09: vários números por empresa — o número de cada conversa e a lista em Configurações › WhatsApp › Conexão */
.conversa-previa .chip-conversa{margin-right:.35rem;font:500 var(--t-xs)/1 var(--sans);padding:.16rem .38rem;border-radius:var(--r-pilula);color:color-mix(in srgb,var(--menta) 75%,var(--texto));background:color-mix(in srgb,var(--menta) 10%,transparent);border:1px solid color-mix(in srgb,var(--menta) 35%,var(--linha));vertical-align:1px;display:inline-flex;align-items:center;gap:.2rem}
.conversas-lista-topo select+select{margin-top:.4rem}
.tabela-numeros td{vertical-align:middle}
.tabela-numeros td.empresa input{max-width:14rem}
.tabela-numeros tr[data-atual] td{background:color-mix(in srgb,var(--ciano) 5%,transparent)}
.tabela-numeros select{min-width:11rem}
.subtitulo-numeros{font:500 var(--t-md) var(--sans);color:var(--suave);margin:1rem 0 .5rem}
/* 26/09 — revisão geral do Gartner Desk (crítica de design + medições no navegador) */
/* letra mínima de 12 px: dono, número e autor da mensagem estavam em 10,9 e 11,5 px */
.conversa-previa .dono-conversa,.conversa-previa .chip-conversa{font-size:var(--t-xs)}
/* a ação da faixa (Reconectar) tinha 4,19:1 e 19 px de altura */
.faixa-espaco>a,.faixa-espaco .faixa-links a{display:inline-flex;align-items:center;min-height:28px;padding:0 .7rem;border-radius:var(--r-md);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);color:color-mix(in srgb,var(--c) 62%,var(--texto));text-decoration:none}
.faixa-espaco>a:hover,.faixa-espaco .faixa-links a:hover{background:color-mix(in srgb,var(--c) 12%,transparent);text-decoration:none}
.faixa-espaco>small{margin-left:auto;white-space:nowrap;color:var(--suave);font-size:var(--t-xs)}
/* diálogo no notebook (633 px úteis): rola por dentro e o botão de salvar fica sempre à vista */
.dialogo .dialogo-acoes{position:sticky;bottom:-1.1rem;z-index:1;margin:0 -1.2rem -1.1rem;padding:.7rem 1.2rem 1.1rem;background:var(--sup);border-top:1px solid var(--linha)}
/* data e hora no tema claro: o seletor nativo seguia escuro */
:root[data-tema=claro] input[type=date],:root[data-tema=claro] input[type=time]{color-scheme:light}
@media (max-width:900px){
  /* sub-abas (WhatsApp, Atendimento, Mensagens prontas): a faixa tinha 160 px e cortava os nomes */
  .barra-pagina.com-dentro{flex-wrap:wrap}
  .barra-pagina .abas-dentro{flex:1 0 100%;min-width:0;margin-left:0;padding-left:0;border-left:0}
  .abas-dentro a{display:inline-flex;align-items:center;min-height:36px;padding:0 .75rem;border-radius:var(--r-pilula)}
  /* cabeçalho do chat: o seletor das ações ocupa o que sobrar da linha */
  .chat-acoes select{max-width:none;flex:1 1 8rem}
}
/* Início no notebook (633 px): com os primeiros passos, "Para hoje" ficava cortado e sem rolagem */
main.cheio>.tela-dash{overflow-y:auto;overscroll-behavior:contain}
/* 26/09 — mídia nas conversas: foto, áudio, vídeo e documento dentro da bolha */
.msg-midia{display:block;margin:.1rem 0 .35rem}
.msg-imagem img{display:block;max-width:min(260px,100%);max-height:320px;border-radius:var(--r-md);object-fit:cover;background:var(--sup2);transition:filter var(--transicao)}
.msg-video{display:block;max-width:min(300px,100%);max-height:320px;border-radius:var(--r-md);background:#000}
.msg-arquivo{display:flex;gap:.1rem;min-width:180px;max-width:280px;border-radius:var(--r-md);border:1px solid var(--linha2);background:color-mix(in srgb,var(--sup2) 70%,transparent);color:var(--texto);text-decoration:none;position:relative;flex-direction:column;justify-content:center;min-height:3.1rem;padding:.5rem .75rem .5rem 2.9rem}
.msg-arquivo:hover{text-decoration:none;border-color:color-mix(in srgb,var(--ciano) 45%,var(--linha2))}
.msg-arquivo-nome{font-weight:500;overflow-wrap:anywhere}
.msg-arquivo small{color:var(--suave);font-size:var(--t-xs)}
.msg-legenda{display:block;white-space:pre-wrap}

/* === Lateral em dois níveis e Configurações em coluna (26/09, frente F1 da simplificação) === */
/* A lateral em dois níveis: o item é a seção, com a cor dela (--s), e as sub-abas abrem embaixo do item aceso. Cabe em
   633 px de altura com um submenu aberto, sem rolar (medido no notebook do João, 1265×633). */
.app[data-secao=conversas]{--acento:var(--ciano)}
.app[data-secao=prospeccao]{--acento:var(--menta)}
.nav-grupo{--s:var(--texto);position:relative;display:flex;flex-direction:column;gap:1px}
.nav-grupo[data-cor=ciano]{--s:var(--ciano)}
.nav-grupo[data-cor=menta]{--s:var(--menta)}
.nav-grupo[data-cor=ambar]{--s:var(--ambar)}
.nav-grupo[data-cor=lavanda]{--s:var(--lavanda)}
.nav-grupo[data-cor=rosa]{--s:var(--rosa)}
.nav-grupo:not([data-cor])>a .ico{color:var(--suave)}
.nav-grupo:not([data-cor])>a.atual .ico{color:var(--texto)}
.nav-grupo+.nav-grupo{margin-top:2px}
/* a cor da seção aparece num fio à esquerda do ícone, mesmo com o item fechado */
.nav-grupo[data-cor]>a::before{content:"";position:absolute;left:0;top:28%;bottom:28%;width:2px;border-radius:var(--r-pilula);background:var(--s);opacity:.35;transition:opacity var(--transicao)}
.nav-grupo[data-cor]>a:hover::before,.nav-grupo[data-cor]>a.atual::before{opacity:1}
.nav-principal .nav-grupo>a{min-height:2.3rem;padding:.4rem .7rem}
.nav-grupo .nav-sub{margin:.1rem 0 .3rem 1.45rem}
.nav-principal .nav-grupo .nav-sub a{min-height:1.85rem;padding:.25rem .6rem}
.nav-sub a .nav-conta{margin-left:auto}
.nav-grupo.nav-pe{--s:var(--ardosia)}
.nav-grupo.nav-pe>a .ico{color:var(--suave)}
.nav-grupo.nav-pe>a.atual .ico{color:var(--ardosia)}
/* A busca (Ctrl+K) virou um ícone no topo, ao lado de recolher: a linha de 40 px saiu da conta da altura. Em 1920 a
   marca é maior; os dois botões e os espaços encolhem para o selo "CRM"/"DESK" não encostar na lupa. */
.lateral-topo .marca{flex:1;min-width:0;gap:.45rem}
.lateral-topo .marca-texto{gap:.35rem}
.lateral-topo .recolher{min-width:1.75rem;min-height:1.75rem;padding:.3rem}
.lateral-topo .abrir-comandos{width:auto;flex:none;min-width:1.75rem;min-height:1.75rem;padding:.3rem;justify-content:center;background:none;border:1px solid transparent;color:var(--apagado)}
.lateral-topo .abrir-comandos span,.lateral-topo .abrir-comandos kbd{display:none}
.lateral-topo .abrir-comandos:hover{color:var(--texto);background:var(--sup2);border-color:var(--linha)}
/* Recolhida (só ícones): o número de uma sub-aba fechada vira um ponto no canto do ícone da seção. */
:root[data-lateral="1"] .nav-grupo[data-cor]>a::before{left:-.15rem}
:root[data-lateral="1"] .nav-principal .nav-grupo>a{justify-content:center;padding:.5rem}
:root[data-lateral="1"] .nav-principal a[data-sinal]::after{content:"";position:absolute;top:.3rem;right:.3rem;width:.45rem;height:.45rem;border-radius:50%;background:var(--s);box-shadow:0 0 0 2px var(--void)}
:root[data-lateral="1"] .lateral-topo .abrir-comandos{order:2}
@media (min-width:901px) and (max-height:760px){
.nav-principal .nav-grupo>a{min-height:2.15rem;padding:.3rem .65rem}
.nav-principal .nav-grupo .nav-sub a{min-height:1.75rem;padding:.2rem .55rem}
.nav-grupo .nav-sub{margin:.05rem 0 .2rem 1.45rem}
}
@media (max-width:900px){
.nav-principal .nav-grupo>a{min-height:2.75rem}
.nav-principal .nav-grupo .nav-sub a{min-height:2.4rem}
}

/* Configurações: a árvore numa coluna à esquerda da página, no lugar das duas fileiras de abas do alto. */
.config-casca{flex:1;min-height:0;display:grid;grid-template-columns:13.25rem minmax(0,1fr);gap:clamp(1rem,2vw,1.75rem)}
.config-arvore{align-self:start;position:sticky;top:0;max-height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:.75rem;
padding:.15rem .35rem .75rem 0;border-right:1px solid var(--linha);scrollbar-width:none}
.config-arvore::-webkit-scrollbar{display:none}
.config-grupo{display:flex;flex-direction:column;gap:1px}
.config-grupo-titulo{padding:.15rem .6rem .3rem;font:600 var(--t-xs)/1.2 var(--sans);letter-spacing:.02em;color:var(--apagado)}
.config-arvore a{position:relative;display:flex;align-items:center;gap:.55rem;min-height:2rem;padding:.3rem .6rem;border-radius:var(--r-md);color:var(--suave);font-size:var(--t-md);line-height:1.2;transition:background-color var(--transicao),color var(--transicao)}
.config-arvore a>.ico:first-child{flex:none;color:var(--apagado)}
.config-arvore a:hover{color:var(--texto);background:var(--sup2);text-decoration:none}
.config-arvore a.atual{color:var(--texto);font-weight:500;background:color-mix(in srgb,var(--ardosia) 13%,var(--sup))}
.config-arvore a.atual::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:2px;border-radius:var(--r-pilula);background:var(--ardosia)}
.config-arvore a.atual>.ico:first-child{color:var(--ardosia)}
.config-arvore a[data-fora]>.ico:last-child{flex:none;margin-left:auto;color:var(--apagado);opacity:.7}
.config-conteudo{min-width:0;min-height:0;display:flex;flex-direction:column;gap:.7rem}
.config-conteudo>.pagina-topo,.config-conteudo>.linha-status,.config-conteudo>.barra-modelos{flex:none}
.config-conteudo>.pagina-rolagem{flex:1;min-height:0}
main:not(.cheio) .config-arvore{top:.5rem}
@media (min-width:901px) and (max-height:760px){
.config-arvore{gap:.5rem}
.config-grupo-titulo{padding:.1rem .6rem .2rem}
.config-arvore a{min-height:1.72rem;padding:.2rem .6rem}
}
@media (min-width:901px) and (max-width:1180px){
.config-casca{grid-template-columns:11.5rem minmax(0,1fr);gap:1rem}
}
@media (max-width:900px){
/* no celular, a árvore vira uma faixa de atalhos que rola de lado (o item aberto vem à vista, lateral.js) */
.config-casca{display:flex;flex-direction:column;gap:.6rem}
.config-arvore{position:static;align-self:stretch;max-width:100%;flex-direction:row;gap:.35rem;overflow-x:auto;overflow-y:hidden;max-height:none;padding:0 0 .5rem;border-right:0;border-bottom:1px solid var(--linha)}
.config-grupo{flex-direction:row;gap:.25rem;flex:none}
.config-grupo+.config-grupo{padding-left:.35rem;border-left:1px solid var(--linha)}
.config-grupo-titulo{display:none}
.config-arvore a{white-space:nowrap;min-height:2.25rem;border-radius:var(--r-pilula);padding:.3rem .75rem;background:var(--sup)}
.config-arvore a.atual::before{display:none}
.config-arvore a.atual{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ardosia) 45%,var(--linha2))}
}

/* Funis e etapas numa tela: os funis à esquerda, o funil escolhido e as etapas dele à direita, um "Salvar" só. */
/* Até 1500 px de largura os funis ficam numa faixa em cima (as setas viram esquerda/direita); com espaço, numa coluna
   à esquerda. A tabela de etapas precisa de ~720 px para o nome não espremer. */
.funis-grade{display:grid;grid-template-columns:1fr;gap:.8rem;align-items:start;max-width:74rem}
.funis-lista{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;padding:.6rem .7rem}
.funis-lista h2{margin:0 .2rem;font-size:var(--t-sm);font-weight:600;color:var(--suave)}
.funis-lista ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.funis-lista li{display:flex;align-items:center;gap:.3rem;padding:.2rem .6rem .2rem .25rem;border-radius:var(--r-md);border:1px solid var(--linha)}
.funis-lista .ordem-setas{flex-direction:row}
.funis-lista .ordem-setas .icone{width:1.05rem;height:1.5rem}
.funis-lista .ordem-setas .ico{transform:rotate(-90deg)}
.funis-lista .funis-novo{flex:1 1 18rem;margin:0;padding:0;border:0;justify-content:flex-end}
.funis-lista .funis-novo input{flex:0 1 11rem}
.funis-lista .funis-novo select{flex:0 1 9rem}
@media (min-width:1500px){
.funis-grade{grid-template-columns:15rem minmax(0,1fr);gap:1rem}
.funis-lista{display:block;padding:.8rem .7rem}
.funis-lista h2{margin:0 .3rem .5rem}
.funis-lista ul{flex-direction:column;flex-wrap:nowrap;gap:2px}
.funis-lista li{border:0;padding:.25rem .35rem .25rem .2rem}
.funis-lista .ordem-setas{flex-direction:column}
.funis-lista .ordem-setas .icone{width:1.5rem;height:1.05rem}
.funis-lista .ordem-setas .ico{transform:none}
.funis-lista .funis-novo{margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--linha);justify-content:flex-start}
.funis-lista .funis-novo input,.funis-lista .funis-novo select{flex:1 1 6rem}
}
.funis-lista li:hover{background:var(--sup2)}
.funis-lista li[aria-current]{background:color-mix(in srgb,var(--ardosia) 13%,var(--sup2));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ardosia) 30%,transparent)}
.funis-lista li a{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem;padding:.2rem 0;color:var(--texto);text-decoration:none}
.funis-lista li a b{font-weight:500;font-size:var(--t-md);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.funis-lista li a small{font-size:var(--t-xs);color:var(--apagado)}
.funis-lista li[data-desligado] a b{color:var(--apagado)}
.ordem-setas{display:inline-flex;flex-direction:column;flex:none}
.ordem-setas .icone{width:1.5rem;height:1.05rem;border-radius:var(--r-sm)}
.ordem-setas .icone:disabled{opacity:.25;cursor:default}
.funis-novo{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--linha)}
.funis-novo input{flex:1 1 7rem;min-width:0}
.funis-novo select{flex:1 1 6rem;min-width:0}
.funil-escolhido{min-width:0}
.funil-modelo .menu-acoes-painel{gap:.15rem;padding:.4rem;width:15rem}
.funil-modelo .menu-acoes-painel .botao-texto{justify-content:flex-start;width:100%;text-align:left}
.funil-dados{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:flex-end;padding-bottom:.9rem;margin-bottom:.8rem;border-bottom:1px solid var(--linha)}
.funil-dados>.campo:first-child{flex:1 1 14rem}
.funil-dados>.campo{flex:0 1 12rem;min-width:0}
.funil-dados>.interruptor{flex:0 0 auto;align-self:center;margin-bottom:.1rem}
.funil-acoes{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;margin-left:auto;align-self:center}
.funil-acoes .menu-acoes-painel{right:0}
.funil-escolhido h3{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .6rem;margin:0 0 .5rem;font-size:var(--t-md)}
.funil-escolhido h3 small{font-weight:400;font-size:var(--t-sm);color:var(--apagado)}
.tabela-etapas td.ordem{width:2rem;padding-right:0}
.tabela-etapas td.empresa{min-width:13rem}
.etapa-nome{display:flex;align-items:center;gap:.5rem}
.etapa-nome input{flex:1;min-width:0;width:100%}
.tabela-etapas td.empresa small{display:block;margin:.15rem 0 0 1.05rem;color:var(--apagado);font-size:var(--t-xs)}
.tabela-etapas input[type=number]{width:4.2rem}
.tabela-etapas td.acoes{width:2.4rem}
.etapas-nova{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.8rem}
.etapas-nova input[name=nome]{flex:1 1 12rem;min-width:0}
[data-linha].movida{animation:linha-movida .7s ease-out}
@keyframes linha-movida{from{background:color-mix(in srgb,var(--ardosia) 22%,transparent)}to{background:transparent}}
@media (prefers-reduced-motion:reduce){[data-linha].movida{animation:none}}

/* === Assistente (26/09, frente F5) === as abas do agente (agente_telas.py): Visão geral, Conhecimento, Jeito de conversar,
   Regras, Testar, Histórico e Avançado, num lugar só (/agente). Prefixos agt- (telas) e agd- (documentos). */
.agt-abas{flex:none;display:flex;gap:.2rem;overflow-x:auto;scrollbar-width:none;margin:-.2rem 0 .9rem;padding-bottom:.1rem;border-bottom:1px solid var(--linha)}
.agt-abas::-webkit-scrollbar{display:none}
.agt-abas a{position:relative;padding:.5rem .8rem .6rem;color:var(--suave);font-size:var(--t-md);white-space:nowrap;border-radius:var(--r-md) var(--r-md) 0 0;transition:color var(--transicao),background-color var(--transicao)}
.agt-abas a:hover{color:var(--texto);background:var(--sup);text-decoration:none}
.agt-abas a.atual{color:var(--texto);font-weight:500}
.agt-abas a.atual::after{content:"";position:absolute;left:.6rem;right:.6rem;bottom:-.15rem;height:2px;border-radius:var(--r-pilula);background:var(--acento,var(--ciano))}
.agt-tela{display:flex;flex-direction:column;gap:.75rem}
.agt-tela>.painel-bloco+.painel-bloco,.agt-tela .painel-bloco+.painel-bloco{margin-top:0}
.agt-tela>.linha-status{margin:0}
.agt-bloco .bloco-topo h2 .ico{color:var(--acento,var(--ciano))}
.agt-duas{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:.75rem;align-items:start}
.agt-form{display:flex;flex-direction:column;gap:.8rem}
/* formulários curtos: a barra fica no fim; o de Regras (longo) mantém a barra presa no pé da rolagem */
.agt-form:not(.ajustes-form) .barra-salvar{position:static;margin:0;max-width:none;background:none;border-color:var(--linha)}
.agt-form .ajustes{display:flex;flex-direction:column;gap:.75rem}
/* Saúde: uma linha por item, com o lugar onde se conserta */
.agt-saude{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.agt-saude-item{--t:var(--ardosia);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.65rem;padding:.5rem .15rem;border-bottom:1px solid var(--linha)}
.agt-saude-item:last-child{border-bottom:0}
.agt-saude-item[data-tom=ok]{--t:var(--menta)}
.agt-saude-item[data-tom=alerta]{--t:var(--ambar)}
.agt-saude-item[data-tom=erro]{--t:var(--coral)}
.agt-saude-item[data-tom=info]{--t:var(--ciano)}
.agt-saude-item .ponto{background:var(--t);box-shadow:0 0 0 3px color-mix(in srgb,var(--t) 18%,transparent)}
.agt-saude-item span{display:grid;gap:.1rem;min-width:0}
.agt-saude-item b{font-weight:500;font-size:var(--t-md)}
.agt-saude-item small{color:var(--apagado);font-size:var(--t-xs);line-height:1.35}
.agt-saude-item a{font-size:var(--t-sm);white-space:nowrap}
.agente-caso[data-caso=responder],.agente-cartao[data-caso=responder],.agente-teste-resultado[data-caso=responder]{--c:var(--ciano)}
.agente-caso[data-caso=oferta],.agente-cartao[data-caso=oferta],.agente-teste-resultado[data-caso=oferta]{--c:var(--lavanda)}
.agente-caso[data-caso=interesse],.agente-teste-resultado[data-caso=interesse]{--c:var(--rosa)}
.agente-caso[data-caso=followup]{--c:var(--ardosia)}
.agt-matriz td{vertical-align:top;line-height:1.4}
.agt-matriz td:first-child{color:var(--apagado);white-space:nowrap;font-size:var(--t-sm)}
.agt-dizer{display:grid;grid-template-columns:minmax(8rem,11rem) minmax(0,1fr);gap:.6rem 1rem;margin:0}
.agt-dizer dt{font-size:var(--t-sm);color:var(--suave);padding-top:.2rem}
.agt-dizer dd{margin:0;display:grid;gap:.3rem;font-size:var(--t-md);line-height:1.45}
.agt-dizer small{color:var(--apagado);font-size:var(--t-xs)}
.agt-chips{display:inline-flex;flex-wrap:wrap;gap:.3rem;vertical-align:middle}
.agt-chip{font:500 var(--t-xs)/1 var(--mono);padding:.28rem .45rem;border-radius:var(--r-sm);background:var(--sup2);border:1px solid var(--linha2);color:var(--texto);font-variant-numeric:tabular-nums}
.agt-vazio{color:var(--apagado);font-size:var(--t-sm)}
/* Regras: travas fixas para leitura */
.agt-travas{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:.75rem}
.agt-travas-grupo{padding:.75rem .85rem;border-radius:var(--r-md);background:var(--sup2);border:1px solid var(--linha)}
.agt-travas-grupo h3{margin:0 0 .45rem;font-size:var(--t-sm);font-weight:600;color:var(--texto)}
.agt-travas-grupo ul{margin:0;padding-left:1rem;display:grid;gap:.35rem;font-size:var(--t-sm);color:var(--suave);line-height:1.45}
.agt-travas-bloco .bloco-topo h2 .ico{color:var(--ambar)}
.agt-links{margin:0;padding-left:1rem;display:grid;gap:.4rem;font-size:var(--t-md);color:var(--suave);line-height:1.45}
/* Histórico */
.agt-filtros{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.6rem;margin-bottom:.8rem}
.agt-filtros .campo{flex:0 1 12rem;margin:0}
.agt-check{display:inline-flex;align-items:center;gap:.45rem;font-size:var(--t-sm);color:var(--suave);cursor:pointer;min-height:2.3rem}
.agt-check input{accent-color:var(--acento,var(--ciano))}
.agt-check small{color:var(--apagado)}
.agt-travou{color:var(--ambar)!important}
/* Documentos: lista à esquerda, editor à direita */
.agd-grade{display:grid;grid-template-columns:minmax(15rem,20rem) minmax(0,1fr);gap:.75rem;align-items:start}
.agd-lista-bloco{position:sticky;top:0;display:grid;gap:.7rem;padding:.8rem}
.agd-lista-bloco>.dica{color:var(--apagado);line-height:1.45}
.agd-lista{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.agd-item{display:grid;grid-template-columns:minmax(0,1fr);gap:.3rem;padding:.5rem .55rem;border-radius:var(--r-md);border:1px solid transparent;transition:background-color var(--transicao),border-color var(--transicao)}
.agd-item:hover{background:var(--sup2)}
.agd-item[aria-current=true]{background:color-mix(in srgb,var(--acento,var(--ciano)) 8%,var(--sup2));border-color:color-mix(in srgb,var(--acento,var(--ciano)) 35%,var(--linha))}
.agd-item[data-ativo="0"] .agd-item-link b{color:var(--apagado);text-decoration:line-through;text-decoration-color:var(--linha2)}
.agd-item-link{display:grid;gap:.15rem;color:var(--texto);min-width:0}
.agd-item-link:hover{text-decoration:none}
.agd-item-link b{font-weight:500;font-size:var(--t-md);overflow-wrap:anywhere}
.agd-item-link small{color:var(--apagado);font-size:var(--t-xs)}
.agd-selos{display:inline-flex;flex-wrap:wrap;gap:.25rem}
.agd-item-acoes{display:flex;align-items:center;gap:.25rem}
.agd-item-acoes .botao-mini{padding-left:.4rem;padding-right:.4rem}
.agd-liga{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .45rem;border-radius:var(--r-md);background:none;border:1px solid transparent;color:var(--suave);font:500 var(--t-xs)/1 var(--sans)}
.agd-liga:hover{background:var(--sup);border-color:var(--linha2)}
.agd-liga .trilho{position:relative;width:1.9rem;height:1.05rem;border-radius:var(--r-pilula);background:var(--linha2);transition:background-color var(--transicao)}
.agd-liga .trilho i{position:absolute;top:.15rem;left:.15rem;width:.75rem;height:.75rem;border-radius:50%;background:var(--texto);transition:transform var(--transicao)}
.agd-liga[aria-pressed=true]{color:var(--texto)}
.agd-liga[aria-pressed=true] .trilho{background:color-mix(in srgb,var(--menta) 70%,var(--linha2))}
.agd-liga[aria-pressed=true] .trilho i{transform:translateX(.85rem);background:#06161c}
.agd-novo summary{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;list-style:none;font-size:var(--t-sm);color:var(--acento,var(--ciano));padding:.35rem .2rem}
.agd-novo summary::-webkit-details-marker{display:none}
.agd-novo-form{display:grid;gap:.6rem;margin-top:.5rem;padding:.7rem;border-radius:var(--r-md);background:var(--sup2);border:1px solid var(--linha)}
.agd-editor{display:grid;gap:.8rem}
.agd-editor-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.agd-editor-topo h2{margin:0;font-size:var(--t-lg);font-weight:600}
.agd-editor-topo small{color:var(--apagado);font-size:var(--t-xs)}
.agd-form{display:grid;gap:.75rem}
.agd-form textarea.mono{min-height:20rem;font-size:var(--t-sm);line-height:1.6;tab-size:2}
.agd-contagem{display:inline-block;margin-left:.35rem;color:var(--apagado);font-variant-numeric:tabular-nums}
.agd-contagem[data-longo]{color:var(--ambar)}
.agd-botoes{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.agd-dica-botoes{margin-left:auto;font-size:var(--t-xs);color:var(--apagado)}
.agd-secundarias{display:flex;flex-wrap:wrap;gap:.4rem;margin:0}
.agd-secundarias button[data-perigo]{color:var(--coral)}
.agd-aviso{margin:0;padding:.6rem .75rem;border-radius:var(--r-md);font-size:var(--t-sm);line-height:1.45;color:var(--texto);background:color-mix(in srgb,var(--ambar) 9%,var(--sup2));border:1px solid color-mix(in srgb,var(--ambar) 32%,var(--linha))}
.agd-confirmar{display:grid;gap:.55rem;padding:.8rem .9rem;border-radius:var(--r-lg);background:color-mix(in srgb,var(--ambar) 10%,var(--sup2));border:1px solid color-mix(in srgb,var(--ambar) 45%,var(--linha))}
.agd-confirmar p{margin:0;font-size:var(--t-md);line-height:1.45}
.agd-confirmar-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.agd-mudanca summary,.agd-versoes summary,.agt-recebeu summary,.agt-consulta summary,.agd-fixos details summary,.agt-conversa summary{cursor:pointer;font-size:var(--t-sm);color:var(--suave);padding:.3rem 0}
.agd-mudanca summary:hover,.agd-versoes summary:hover,.agt-recebeu summary:hover,.agt-conversa summary:hover{color:var(--texto)}
.agd-dif,.agd-fixo{margin:.4rem 0 0;max-height:22rem;overflow:auto;padding:.6rem .7rem;border-radius:var(--r-md);background:var(--void);border:1px solid var(--linha);font:400 var(--t-xs)/1.6 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere}
.agd-dif span{display:block;padding:0 .3rem;border-radius:var(--r-sm)}
.agd-dif-mais{background:color-mix(in srgb,var(--menta) 14%,transparent);color:var(--texto)}
.agd-dif-menos{background:color-mix(in srgb,var(--coral) 14%,transparent);color:var(--texto)}
.agd-dif-trecho{color:var(--lavanda)}
.agd-dif-igual{color:var(--apagado)}
.agd-diferenca h3{margin:.2rem 0 0;font-size:var(--t-sm);font-weight:600}
.agd-versoes ol{list-style:none;margin:.3rem 0 0;padding:0;display:grid;gap:.1rem}
.agd-versoes li{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;padding:.4rem 0;border-bottom:1px solid var(--linha);font-size:var(--t-sm)}
.agd-versoes li:last-child{border-bottom:0}
.agd-versoes li>span{color:var(--apagado);flex:1 1 12rem}
.agd-versoes form{margin:0}
.agd-versoes .botao-texto{min-height:var(--controle-mini);padding:.4rem .6rem;font-size:var(--t-sm)}
.agd-liberados p{margin:0 0 .45rem;display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;font-size:var(--t-md)}
.agd-com-rascunho{color:var(--suave)}
.agd-totais{--t:var(--apagado);margin:0;display:flex;align-items:center;gap:.45rem;font-size:var(--t-sm);color:var(--suave)}
.agd-totais[data-tom=alerta]{color:var(--ambar)}
.agd-totais .ico{flex:none}
/* Testar */
.agt-testar{gap:.9rem}
.agt-situacoes{margin:0;border:0;padding:0}
.agt-conversa{border-radius:var(--r-md);border:1px solid var(--linha);padding:.3rem .7rem .6rem;background:var(--sup2)}
.agt-conversa .campo{margin-top:.4rem}
.agt-bolhas{display:grid;gap:.35rem;margin-top:.6rem;max-height:18rem;overflow:auto;padding:.2rem}
/* bolhas do Testar: a cauda de 4 px, como nos balões de Conversas */
.agt-bolha{margin:0;max-width:min(34rem,88%);padding:.45rem .65rem;border-radius:4px var(--r-lg) var(--r-lg) var(--r-lg);background:var(--sup);border:1px solid var(--linha);font-size:var(--t-sm);line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.agt-bolha b{display:block;font-size:var(--t-xs);font-weight:500;color:var(--apagado);margin-bottom:.1rem}
.agt-bolha[data-papel=nos]{justify-self:end;border-radius:var(--r-lg) 4px var(--r-lg) var(--r-lg);background:color-mix(in srgb,var(--menta) 8%,var(--sup))}
.agt-resultado{margin-top:0;padding:.9rem 1rem;gap:.5rem}
.agt-resultado>header{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem}
.agt-resultado>header .agente-caso{margin-left:0}
.agt-resultado>header b{font-weight:500;color:var(--texto)}
.agt-resultado>header small{color:var(--apagado)}
.agt-sairia{display:grid;gap:.35rem}
.agt-balao{margin:0;justify-self:start;max-width:min(38rem,100%);white-space:pre-wrap;font:400 var(--t-md)/1.5 var(--sans);background:color-mix(in srgb,var(--menta) 9%,var(--sup));border:1px solid color-mix(in srgb,var(--menta) 25%,var(--linha));border-radius:var(--r-lg) 4px var(--r-lg) var(--r-lg);padding:.6rem .8rem}
.agt-sem-envio{margin:0;font-size:var(--t-md);color:var(--suave)}
.agt-consulta{margin-top:.4rem;padding:.2rem .6rem .5rem;border-radius:var(--r-md);border:1px solid var(--linha);background:var(--sup2)}
.agt-consulta .campo-rotulo{display:block;margin-top:.5rem}
@media (max-width:1100px){
  .agt-duas,.agd-grade{grid-template-columns:minmax(0,1fr)}
  .agd-lista-bloco{position:static}
  .agd-editor{order:-1}  /* numa coluna só, o documento aberto vem antes da lista */
}
@media (max-width:640px){
  .agt-dizer{grid-template-columns:minmax(0,1fr);gap:.2rem}
  .agt-dizer dd{margin-bottom:.5rem}
  .agd-dica-botoes{margin-left:0;flex-basis:100%}
  .agt-filtros .campo{flex:1 1 100%}
  .agt-abas{margin-left:-.25rem;margin-right:-.25rem}
}
:root[data-tema=claro] .agd-dif,:root[data-tema=claro] .agd-fixo{background:var(--sup2)}
:root[data-tema=claro] .agd-liga[aria-pressed=true] .trilho i{background:#fff}
/* === Conversas: visões, cabeçalho do chat, nota interna e respostas pelo "/" (26/09, frente F2) === */
/* Plano de simplificação, frente F2: o topo da lista em duas linhas curtas (era 275 px de 633 no notebook), visões em
   controle segmentado, o cabeçalho do chat numa linha só, a nota interna amarela, as respostas prontas pelo "/" e a
   ficha que empurra o chat quando cabe. Tudo aqui embaixo, sobrescrevendo as regras antigas de Conversas. */
@media (min-width:901px){.conversas-app{grid-template-columns:minmax(17rem,21.5rem) minmax(0,1fr)}}
.conversas-busca{display:flex;align-items:center;gap:.35rem;min-width:0}
.conversas-busca .busca-conversas{position:relative;flex:1;min-width:0}
.conversas-busca .busca-conversas .ico{position:absolute;left:.6rem;top:50%;transform:translateY(-50%);color:var(--apagado);pointer-events:none}
.conversas-busca .busca-conversas input{padding:0 .55rem 0 1.95rem;font-size:var(--t-sm);border-radius:var(--r-md)}
.filtro-status{flex:none;max-width:7.4rem;padding:0 1.6rem 0 .55rem;font-size:var(--t-sm);border-radius:var(--r-md);cursor:pointer}
.conversas-busca .filtros-menu>summary{display:grid;place-items:center;position:relative;width:2.2rem;height:2.2rem;padding:0;border-radius:var(--r-md)}
.conversas-busca .filtros-menu>summary .filtros-conta{position:absolute;top:-.3rem;right:-.3rem;min-width:1.05rem;height:1.05rem;font-size:var(--t-xs)}
.conversas-busca .filtros-painel{left:auto;right:0;width:min(16.5rem,calc(100vw - 2rem))}
.conversas-busca .filtros-painel .campo{display:flex;flex-direction:column;gap:.3rem;font-size:var(--t-xs);color:var(--suave)}
.conversas-busca .filtros-limpar{align-self:flex-start;padding:0;background:none;border:0;font-weight:500;cursor:pointer}
.avisos-ligados{position:absolute;top:.35rem;right:.38rem;width:.45rem;height:.45rem;border-radius:50%;background:var(--menta);box-shadow:0 0 0 2px var(--sup2)}
.avisos-painel{gap:.55rem}
.avisos-painel>b{font-size:var(--t-sm)}
.avisos-painel .interruptor{padding:.55rem .6rem;gap:.6rem}
.avisos-painel .interruptor-texto b{font-size:var(--t-sm)}
.avisos-painel .interruptor-texto small{display:block;font-size:var(--t-xs);color:var(--suave);line-height:1.35}
.avisos-painel .dica{font-size:var(--t-xs);line-height:1.4;color:var(--apagado)}
/* visões: controle segmentado; a selecionada é preenchida (no escuro ela sumia: fundo quase igual ao da lista) */
.filtros.visoes{display:flex;flex-wrap:nowrap;gap:2px;padding:3px;border-radius:var(--r-md);background:var(--sup2);border:1px solid var(--linha);overflow-x:auto;scrollbar-width:none}
.filtros.visoes::-webkit-scrollbar{display:none}
.filtros.visoes button{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;min-height:1.85rem;padding:.2rem .6rem;border:0;border-radius:var(--r-sm);background:transparent;color:var(--suave);font:500 var(--t-xs)/1 var(--sans);white-space:nowrap}
.filtros.visoes button:hover{color:var(--texto);background:color-mix(in srgb,var(--texto) 5%,transparent);filter:none}
.filtros.visoes button[aria-pressed=true]{color:var(--texto);background:color-mix(in srgb,var(--acento,var(--ciano)) 16%,var(--sup));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acento,var(--ciano)) 38%,transparent)}
.filtros.visoes .contagem-filtro{min-width:1.1rem;padding:.12rem .32rem;border-radius:var(--r-pilula);font:600 var(--t-xs)/1 var(--mono);background:color-mix(in srgb,var(--texto) 9%,transparent);color:var(--texto)}
.filtros.visoes button[aria-pressed=true] .contagem-filtro{background:var(--acento,var(--ciano));color:var(--sobre-acento,#06161c)}
.conversas-sem-resultado{padding:1rem .9rem}
/* item da lista: quem espera tem ponto, nome em destaque e há quanto tempo espera no lugar da hora */
.conversa-item .avatar{width:2.25rem;height:2.25rem}
.conversa-item[data-espera] .conversa-linha b{font-weight:650;color:var(--texto)}
.ponto-espera{flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--menta);box-shadow:0 0 0 3px color-mix(in srgb,var(--menta) 18%,transparent)}
.conversa-item .conversa-linha time[data-espera]{font:600 var(--t-xs)/1 var(--mono);padding:.18rem .36rem;border-radius:var(--r-sm);color:var(--menta);background:color-mix(in srgb,var(--menta) 11%,transparent)}
.conversa-item .conversa-linha time[data-espera=demora]{color:var(--ambar);background:color-mix(in srgb,var(--ambar) 12%,transparent)}
.conversa-item .conversa-linha time[data-espera=atrasada]{color:var(--coral);background:color-mix(in srgb,var(--coral) 12%,transparent)}
.conversa-item[data-status=resolvida]{opacity:.78}
.conversa-item[data-status=resolvida]:hover,.conversa-item[data-status=resolvida].atual{opacity:1}
.marca-resolvida{display:inline-grid;place-items:center;flex:none;width:1rem;height:1rem;border-radius:50%;color:var(--menta);background:color-mix(in srgb,var(--menta) 14%,transparent)}
.conversa-previa .fila-conversa{display:inline-block;margin-right:.35rem;font:500 var(--t-xs)/1 var(--sans);padding:.16rem .4rem;border-radius:var(--r-pilula);color:color-mix(in srgb,var(--lavanda) 80%,var(--texto));background:color-mix(in srgb,var(--lavanda) 12%,transparent);border:1px solid color-mix(in srgb,var(--lavanda) 35%,var(--linha));vertical-align:1px}
/* cabeçalho do chat: uma linha (~60 px), uma ação principal, Transferir, ficha e "⋯" */
.chat-topo .avatar{width:2.3rem;height:2.3rem;flex:none}
.chat-quem .selo-vendedor{margin-left:.25rem;font-size:var(--t-xs);padding:.12rem .4rem;vertical-align:1px}
.chat-estado{font-weight:500;color:var(--texto)}
.chat-estado[data-estado=fila]{color:color-mix(in srgb,var(--lavanda) 82%,var(--texto))}
.chat-estado[data-estado=resolvida],.chat-estado[data-estado=aberta]{color:color-mix(in srgb,var(--menta) 82%,var(--texto))}
.chat-estado[data-estado=arquivada]{color:var(--apagado)}
.chat-acoes .botao-mini{height:var(--controle);padding:0 .8rem}
.acao-principal[data-acao=resolver]:hover{border-color:color-mix(in srgb,var(--menta) 55%,var(--linha2));color:var(--texto)}
.acao-principal[data-acao=resolver] .ico{color:var(--menta)}
.menu-mais{position:relative}
.menu-mais>summary{list-style:none;cursor:pointer;padding:0 .6rem;min-height:36px}
.menu-mais>summary::-webkit-details-marker{display:none}
.menu-mais[open]>summary{color:var(--texto);border-color:var(--linha2);background:var(--sup)}
.menu-mais-painel{position:absolute;top:calc(100% + .35rem);z-index:40;display:flex;flex-direction:column;min-width:15rem;border-radius:var(--r-lg);border:1px solid var(--linha2);background:var(--sup);box-shadow:var(--sombra);left:auto;right:0;width:min(15rem,calc(100vw - 2rem));padding:.35rem;gap:.1rem}
.menu-mais-painel form{margin:0}
.menu-mais-painel a,.menu-mais-painel button{display:flex;align-items:center;gap:.55rem;width:100%;padding:.55rem .65rem;border:0;border-radius:var(--r-md);background:none;color:var(--texto);font:500 var(--t-sm)/1.2 var(--sans);text-align:left;text-decoration:none;cursor:pointer}
.menu-mais-painel a:hover,.menu-mais-painel button:hover,.menu-mais-painel a:focus-visible,.menu-mais-painel button:focus-visible{background:var(--sup2);text-decoration:none;filter:none}
.menu-mais-painel .ico,.menu-mais-painel svg{flex:none;width:15px;height:15px;color:var(--suave)}
.so-celular{display:none!important}
/* compositor: abas Responder e Nota interna; a dica fixa saiu (vai no título do botão Enviar) */
.compositor-abas{display:flex;gap:.2rem;margin:0 0 .4rem}
.compositor-abas button{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .6rem;border:0;border-radius:var(--r-sm);background:none;color:var(--suave);font:500 var(--t-xs)/1 var(--sans)}
.compositor-abas button:hover{color:var(--texto);background:var(--sup2);filter:none}
.compositor-abas button[aria-selected=true]{color:var(--texto);background:var(--sup2);box-shadow:inset 0 0 0 1px var(--linha2)}
.compositor-abas button[data-aba=nota][aria-selected=true]{color:color-mix(in srgb,var(--ambar) 85%,var(--texto));
  background:color-mix(in srgb,var(--ambar) 13%,var(--sup));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ambar) 40%,transparent)}
.compositor-aviso[data-tom=info]{color:var(--suave)}
.compositor-aviso.some-na-nota{display:none}
form.compositor[data-aba=nota] .so-responder{display:none}
form.compositor[data-aba=nota] textarea{background:color-mix(in srgb,var(--ambar) 9%,var(--sup2));border-color:color-mix(in srgb,var(--ambar) 45%,var(--linha2))}
form.compositor[data-aba=nota] textarea:focus-visible{outline-color:var(--ambar)}
form.compositor[data-aba=nota] .botao-enviar{background:var(--ambar);color:#241400}
/* "/" e "@": a lista abre por cima do campo, com a prévia da resposta ao lado */
.sugestoes{position:absolute;left:.8rem;right:.8rem;bottom:calc(100% - .3rem);z-index:30;display:flex;flex-direction:column;max-height:min(19rem,50vh);border-radius:var(--r-lg);border:1px solid var(--linha2);background:var(--sup);box-shadow:var(--sombra);overflow:hidden}
.sugestoes-topo{padding:.5rem .7rem;border-bottom:1px solid var(--linha);font:500 var(--t-xs)/1.2 var(--sans);color:var(--apagado)}
.sugestoes-vazio{margin:0;padding:.7rem;font-size:var(--t-sm);color:var(--suave)}
.sugestoes-corpo{display:grid;grid-template-columns:minmax(0,1fr);min-height:0;flex:1}
.sugestoes-lista{overflow-y:auto;padding:.3rem;min-height:0}
.sugestao{display:flex;flex-direction:column;gap:.12rem;padding:.45rem .55rem;border-radius:var(--r-md);cursor:pointer}
.sugestao b{font-weight:550;font-size:var(--t-sm)}
.sugestao span{font-size:var(--t-xs);color:var(--suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sugestao[aria-selected=true]{background:color-mix(in srgb,var(--acento,var(--ciano)) 13%,var(--sup2))}
.sugestao-previa{display:none;padding:.7rem .8rem;border-left:1px solid var(--linha);font-size:var(--t-sm);line-height:1.5;white-space:pre-wrap;overflow-y:auto;color:var(--texto);background:var(--sup2)}
@media (min-width:1100px){
  .sugestoes-corpo:has(.sugestao-previa){grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
  .sugestao-previa{display:block}
}
/* nota interna no meio da conversa: amarela, do lado da equipe */
.msg.nota{justify-content:flex-end}
.msg.nota .balao{background:color-mix(in srgb,var(--ambar) 11%,var(--sup));border:1px dashed color-mix(in srgb,var(--ambar) 50%,var(--linha2));
  border-top-right-radius:4px}
.msg.nota .msg-autor{display:flex;align-items:center;gap:.3rem;color:color-mix(in srgb,var(--ambar) 85%,var(--texto))}
.mencao{font-weight:600;color:color-mix(in srgb,var(--ambar) 80%,var(--texto))}
.ficha-notas .notas-internas li{display:flex;flex-direction:column;gap:.15rem;padding:.45rem .55rem;border-radius:var(--r-md);font-size:var(--t-sm);background:color-mix(in srgb,var(--ambar) 8%,var(--sup2));border:1px dashed color-mix(in srgb,var(--ambar) 35%,var(--linha))}
.ficha-notas .notas-internas small{font-size:var(--t-xs);color:var(--suave)}
.ficha-atendimento .ficha-dados div{align-items:center}
.ficha-atendimento dd .ico{vertical-align:-2px;margin-right:.2rem;color:var(--suave)}
.ficha-atendimento select{width:100%;max-width:100%;padding:0 .5rem;font-size:var(--t-sm);cursor:pointer}
/* a ficha empurra o chat quando a área de Conversas tem espaço (lateral recolhida no notebook, monitor largo); sem
   espaço, continua por cima (regra de antes) */
main:has(>.conversas-app){container-type:inline-size}
@container (min-width:1060px){
  .conversas-app.com-ficha{grid-template-columns:minmax(16rem,20rem) minmax(0,1fr) minmax(17.5rem,20rem)}
  .conversas-app.com-ficha .ficha{position:static;width:auto;z-index:auto;box-shadow:none}
}
/* mídia: a foto abre grande num diálogo; áudio e documento alinhados dentro da bolha */
.msg-imagem{cursor:zoom-in}
.msg-imagem:hover img{filter:brightness(1.06)}
.msg-audio{display:block;width:min(270px,100%);height:38px;border-radius:var(--r-pilula)}
:root:not([data-tema=claro]) .msg-audio{color-scheme:dark}
.msg-arquivo::before{content:"";position:absolute;left:.65rem;top:50%;width:1.6rem;height:1.6rem;transform:translateY(-50%);border-radius:var(--r-sm);background:color-mix(in srgb,var(--acento,var(--ciano)) 16%,transparent)}
.msg-arquivo::after{content:"";position:absolute;left:1.05rem;top:50%;width:.8rem;height:.95rem;transform:translateY(-50%);border:1.6px solid var(--acento,var(--ciano));border-radius:var(--r-pilula) var(--r-sm) var(--r-pilula) var(--r-pilula)}
.visor-midia{max-width:min(92vw,1100px);max-height:92dvh;padding:0;border:1px solid var(--linha2);border-radius:var(--r-lg);background:var(--void);overflow:hidden}
.visor-midia::backdrop{background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.visor-midia[open]{display:flex;flex-direction:column}
.visor-topo{display:flex;align-items:center;justify-content:flex-end;gap:.4rem;padding:.5rem;border-bottom:1px solid var(--linha);background:var(--sup)}
.visor-midia img{display:block;max-width:100%;max-height:calc(92dvh - 3.4rem);margin:auto;object-fit:contain;cursor:zoom-out}
@media (max-width:900px){
  /* celular: o cabeçalho continua numa linha (voltar, nome, ação, ficha, "⋯"); Transferir vai para o "⋯" */
  .chat-topo{flex-wrap:nowrap;gap:.4rem;padding:.45rem .55rem}
  .chat-topo>.avatar{display:none}
  .chat-quem{flex:1 1 auto}
  .chat-acoes{flex:none;justify-content:flex-end}
  .chat-acoes .botao-transferir{display:none}
  .chat-acoes .botao-mini{padding:0 .6rem}
  .so-celular{display:flex!important}
  .conversas-lista-topo{padding:.55rem .6rem}
  .sugestoes{left:.5rem;right:.5rem}
  .compositor-aviso[data-tom=info]{display:none}  /* no celular, só o aviso que pede atenção */
}
@media (max-width:420px){
  .chat-acoes .acao-principal{font-size:0;gap:0;width:2.25rem;padding:0!important;justify-content:center}
  .chat-acoes .acao-principal .ico{width:16px;height:16px}
}
/* === Atendimento: rotas, horário, ausência, visita e relatório (26/09, frente F4) === */
/* Rotas: "Quando chegar mensagem em… vai para a fila…" numa tabela só, com a fila padrão em cima */
.tabela-rotas th[scope=row]{font:inherit;color:var(--texto);white-space:normal;vertical-align:top;padding-top:.7rem}
.tabela-rotas th[scope=row] b{display:inline-flex;align-items:center;gap:.4rem;font-weight:500}
.tabela-rotas th[scope=row] b .ico{color:var(--suave)}
.tabela-rotas th[scope=row] small{display:block;margin-top:.15rem;font-size:var(--t-xs);line-height:1.4;color:var(--apagado);max-width:26rem}
.tabela-rotas td{width:45%;vertical-align:top}
.tabela-rotas select{width:100%;max-width:22rem}
.tabela-rotas .rota-padrao th[scope=row],.tabela-rotas .rota-padrao td{background:color-mix(in srgb,var(--ciano) 5%,transparent)}
.rotas-dica{margin:.6rem 0 0}
.rotas-dica .ico{margin-right:.3rem;vertical-align:-2px;color:var(--suave)}
/* a linha de cabeçalho (th scope=row) da última linha ficava com a borda de baixo, e a td não (tabela, linha 230) */
.tabela-rotas tbody tr:last-child th,.tabela-horario tbody tr:last-child th,.tabela-relatorio tbody tr:last-child th{border-bottom:0}
/* Horário de atendimento e mensagem de ausência */
.form-horario{display:grid;gap:1rem;max-width:52rem}
.tabela-horario th[scope=row]{font:inherit;color:var(--texto);white-space:nowrap;width:9rem}
.tabela-horario td,.tabela-horario th[scope=row]{white-space:nowrap;padding-top:.35rem;padding-bottom:.35rem}
.tabela-horario input[type=time]{width:6.6rem}
.tabela-horario .hora-ate{margin:0 .4rem;color:var(--apagado);font-size:var(--t-sm)}
.tabela-horario tr:has(input[name^=aberto_]:not(:checked)) td{opacity:.45}
.feriados-fechado{align-self:start}
.ausencia-texto{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1rem;align-items:start}
.ausencia-texto textarea{width:100%;min-height:7rem;resize:vertical}
.variaveis-ausencia{display:flex;flex-wrap:wrap;gap:.25rem .9rem;margin:.1rem 0 0;padding:0;list-style:none;font-size:var(--t-xs);color:var(--apagado)}
.variaveis-ausencia code{font-size:var(--t-xs);color:var(--suave)}
.ausencia-previa{display:grid;gap:.45rem;padding:.8rem;border:1px solid var(--linha);border-radius:var(--r-lg);background:var(--sup2)}
.ausencia-previa .balao-wpp{justify-self:end;max-width:92%;color:#e9edef}
.ausencia-previa small{font-size:var(--t-xs);color:var(--apagado)}
:root[data-tema=claro] .ausencia-previa .balao-wpp.saida{background:#d9fdd3;border-color:#b9e7b0;color:#111b21}
@media (max-width:900px){
  .ausencia-texto{grid-template-columns:minmax(0,1fr)}
  .tabela-rotas td{width:auto}
  .tabela-horario th[scope=row]{width:auto}
  .tabela-horario input[type=time]{width:5.6rem}
  .tabela-horario .hora-ate{margin:0 .2rem}
}
/* Atividade "Visita" com endereço e o atalho do mapa */
.atividade-endereco{display:flex;align-items:center;flex-wrap:wrap;gap:.3rem;margin-top:.2rem;font-size:var(--t-xs);color:var(--suave)}
.atividade-endereco .ico{flex:none;color:var(--apagado)}
.atividade-endereco span{overflow-wrap:anywhere}
.atividade-endereco a{white-space:nowrap}
.ficha-form .campo-endereco{display:block;margin:.35rem 0}
.ficha-form .campo-endereco input,.dialogo .campo-endereco input{width:100%}
/* Relatório de atendimento */
.relatorio-filtros{display:flex;align-items:flex-end;flex-wrap:wrap;gap:.5rem .8rem}
.relatorio-filtros label{display:grid;gap:.2rem;font-size:var(--t-xs);color:var(--suave)}
.relatorio-atendimento{display:grid;gap:1rem;align-content:start}
.subtitulo-relatorio{margin:.4rem 0 0;font:500 var(--t-md)/1.3 var(--sans);color:var(--suave)}
.tabela-relatorio th[scope=row]{font:inherit;color:var(--texto);white-space:nowrap}
.tabela-relatorio thead th.num{white-space:normal}
.tabela-relatorio td.num small{display:block;margin:.1rem 0 0;font-family:var(--sans);font-size:var(--t-xs)}
.tabela-relatorio td[data-alerta]{color:var(--ambar);font-weight:600}
.tabela-relatorio .linha-sem-dono th[scope=row]{color:var(--suave)}
/* === Funil e Contatos: barra do quadro, card e a tabela única (26/09, frente F3) === */
/* Barra do quadro: título do funil à vista (e seletor quando há mais de um), Quadro | Lista, busca, filtros, exibir e
   a ação principal. Todos os controles com a mesma altura (36 px). */
.barra-quadro{flex-wrap:nowrap;gap:.5rem}
.barra-quadro .funil-seletor{position:relative;flex:none;min-width:0}
.barra-ferramentas .funil-seletor h1{position:static;width:auto;height:auto;overflow:hidden;clip:auto;margin:0;font-size:var(--t-lg);font-weight:600;
  line-height:1.2;white-space:nowrap;text-overflow:ellipsis;max-width:14rem}
.funil-menu>summary{display:flex;align-items:center;gap:.35rem;min-height:36px;padding:0 .55rem 0 .35rem;margin-left:-.35rem;border-radius:var(--r-md);cursor:pointer;list-style:none}
.funil-menu>summary::-webkit-details-marker{display:none}
.funil-menu>summary:hover{background:var(--sup2)}
.funil-menu>summary .ico{color:var(--suave);transition:transform var(--transicao)}
.funil-menu[open]>summary .ico{transform:rotate(180deg)}
.funil-menu-painel{position:absolute;z-index:40;top:calc(100% + .35rem);left:0;display:flex;flex-direction:column;gap:.1rem;min-width:15rem;max-width:min(22rem,calc(100vw - 2rem));padding:.35rem;border-radius:var(--r-lg);border:1px solid var(--linha2);background:var(--sup);box-shadow:var(--sombra)}
.funil-menu-painel a{display:flex;align-items:center;gap:.8rem;min-height:36px;padding:0 .65rem;border-radius:var(--r-md);color:var(--texto);font-size:var(--t-md)}
.funil-menu-painel a:hover{background:var(--sup2);text-decoration:none}
.funil-menu-painel a span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.funil-menu-painel a b{font:500 var(--t-xs)/1 var(--sans);color:var(--apagado);font-variant-numeric:tabular-nums}
.funil-menu-painel a[aria-current]{background:color-mix(in srgb,var(--acento,var(--ciano)) 12%,transparent)}
.funil-menu-painel a[aria-current] b{color:var(--texto)}
.funil-menu-painel .funil-menu-ajuste{margin-top:.2rem;border-top:1px solid var(--linha);border-radius:0 0 var(--r-md) var(--r-md);color:var(--suave);font-size:var(--t-sm);gap:.45rem}
.filtros-painel.a-direita,.funil-menu-painel.a-direita{left:auto;right:0}
/* Quadro | Lista: a mesma coisa vista de dois jeitos (a Lista é Contatos filtrado por este funil) */
.alternar-visao{display:inline-flex;flex:none;padding:2px;border-radius:var(--r-md);border:1px solid var(--linha2);background:var(--sup2)}
.alternar-visao a{display:inline-flex;align-items:center;gap:.35rem;min-height:30px;padding:0 .65rem;border-radius:var(--r-md);color:var(--suave);font:500 var(--t-sm)/1 var(--sans);white-space:nowrap}
.alternar-visao a:hover{color:var(--texto);text-decoration:none}
.alternar-visao a[aria-current]{background:var(--sup);color:var(--texto);box-shadow:0 1px 2px rgba(0,0,0,.25),inset 0 0 0 1px var(--linha2)}
.barra-quadro .busca-quadro{flex:0 1 30rem;min-width:9rem}
.barra-quadro .botao-principal{margin-left:auto}
.barra-quadro .filtros-menu>summary,.barra-quadro .limpar-filtro{min-height:var(--controle);padding-top:0;padding-bottom:0}
.exibir-menu>summary{padding:0 .6rem}
.exibir-menu .filtros-painel{width:min(16rem,calc(100vw - 2rem));gap:.55rem}
.exibir-menu .check-filtro{white-space:normal;color:var(--texto)}
.exibir-menu .campo-dica{color:var(--apagado);font-size:var(--t-xs)}
/* Cabeçalho da coluna: título e contagem numa linha; a soma embaixo, apagada (a mesma linha em toda coluna quando o
   funil usa valor); a seta de recolher aparece ao passar o mouse (sempre, no toque). */
.coluna-titulo .soma-coluna{min-height:1em;font-size:var(--t-xs);color:var(--suave)}  /* --apagado dava 4,3:1 no fundo da coluna (tema claro) */
@media (hover:hover){
  .coluna:not(.recolhida) .recolher-coluna{opacity:0;transition:opacity var(--transicao)}
  .coluna:not(.recolhida) header:hover .recolher-coluna,.coluna .recolher-coluna:focus-visible{opacity:1}
}
/* Card em três linhas: nome, contexto e rodapé. Nada de etapa repetida; a prévia da conversa em tom neutro. */
.card .card-info{display:block;-webkit-line-clamp:unset;color:var(--suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.coluna[data-etapa] .card-info{color:var(--suave)}
.card .card-info.citacao{font-style:italic}
.card-rodape>*{flex:none}
.card-fim{display:inline-flex;align-items:center;gap:.4rem;margin-left:auto;min-width:0}
.card-fim .card-valor{margin-left:0}
.card-proxima::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.card-proxima .ico{display:none}
.card-proxima[data-situacao=futuro]{color:var(--apagado)}
.card-etiquetas i{width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent)}
.card-dono{display:inline-grid;place-items:center;width:1.3rem;height:1.3rem;border-radius:50%;font:600 var(--t-xs)/1 var(--sans);color:var(--suave);background:var(--sup);box-shadow:inset 0 0 0 1px var(--linha2);letter-spacing:.02em}
.card-site .ico{margin:0}
/* Modo compacto (Exibir › Cards compactos): só o nome, para quadros com centenas de cards */
.quadro[data-compacto] .card{padding:.42rem .6rem}
.quadro[data-compacto] .card-info,.quadro[data-compacto] .card-rodape{display:none}
.quadro[data-compacto] .card-nome{font-size:var(--t-md)}
p.mais-cards{margin:.2rem 0 .1rem;border-style:dotted}
/* Diálogo Novo contato: a linha com Funil, Etapa e Origem */
.form-novo-lead .ficha-form-linha.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1180px){
  .barra-quadro{flex-wrap:wrap}
  .barra-quadro .busca-quadro{order:5;flex:1 1 100%}
}
/* Celular: uma etapa por vez, com as abas das etapas (e a contagem) no alto */
.quadro-abas{display:none}
@media (max-width:900px){
  /* uma linha com o funil, Quadro | Lista e o "+" (o nome do botão fica para o leitor de tela); a busca embaixo */
  .barra-quadro .atualizado,.barra-quadro .botao-discreto,.barra-quadro .exibir-menu{display:none}
  .barra-quadro .funil-seletor{flex:1 1 auto;min-width:0}
  .barra-quadro .botao-principal{width:40px;padding:0;justify-content:center}
  .barra-quadro .botao-principal .rotulo-botao{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .barra-quadro .busca-quadro{order:5;flex:1 1 100%}
  .quadro-abas{display:flex;flex:none;gap:.35rem;overflow-x:auto;padding:.1rem .1rem .45rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .quadro-abas::-webkit-scrollbar{display:none}
  .quadro-abas button{display:inline-flex;align-items:center;gap:.4rem;flex:none;min-height:40px;padding:0 .8rem;border-radius:var(--r-pilula);border:1px solid var(--linha2);background:var(--sup2);color:var(--suave);font:500 var(--t-sm)/1 var(--sans);white-space:nowrap}
  .quadro-abas button b{font-weight:600;color:var(--c);font-variant-numeric:tabular-nums}
  .quadro-abas button[aria-selected=true]{color:var(--texto);border-color:color-mix(in srgb,var(--c) 55%,var(--linha2));background:color-mix(in srgb,var(--c) 12%,var(--sup2))}
  .quadro-abas .ponto{width:7px;height:7px}
  .quadro[data-uma-etapa]{display:block}
  .quadro[data-uma-etapa] .coluna{display:none;min-width:0;max-height:none}
  .quadro[data-uma-etapa] .coluna.na-aba{display:flex;flex-direction:column}
  .quadro[data-uma-etapa] .coluna.na-aba.recolhida{flex:1 1 auto}
  .quadro[data-uma-etapa] .coluna.na-aba .cards{display:flex}
  .quadro[data-uma-etapa] .coluna header{display:none}
  .quadro[data-uma-etapa] .cards{max-height:none;overflow:visible;padding:.5rem}
  .quadro[data-uma-etapa] .card{padding:.7rem .75rem}
  .quadro-rolagem{overflow-x:hidden}
}
/* Contatos, a tabela única (era a Lista + Contatos): barra de filtros com Todos | Meus, a barra de lote ao selecionar,
   colunas que cabem em 1265 px e, no celular, um cartão por pessoa com o número que abre o WhatsApp num toque. */
.menu-mais-painel a{display:flex;align-items:center;gap:.5rem;min-height:36px;padding:0 .6rem;border-radius:var(--r-md);color:var(--texto);font-size:var(--t-md)}
.menu-mais-painel a:hover{background:var(--sup2);text-decoration:none}
.filtros-contatos .filtros-menu>summary{min-height:var(--controle)}
.filtros-contatos .alternar-visao a{min-height:30px}
.lista-contatos .tabela td{white-space:nowrap}
.lista-contatos .tabela td.empresa{white-space:normal;max-width:22rem;min-width:11rem}
/* a linha de baixo do nome (Ref, cidade, segmento) corta com reticências em vez de alargar a coluna */
.lista-contatos .tabela td.empresa small{font-family:var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:0;min-width:100%}
.lista-contatos .tabela td.etapa small{display:block;margin-top:.15rem;font-size:var(--t-xs);color:var(--apagado)}
.lista-contatos .tabela td.proxima{white-space:normal;min-width:7rem;max-width:9.5rem}
.lista-contatos .texto-proxima{display:block;margin-top:.15rem;font-size:var(--t-xs);color:var(--apagado);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lista-contatos .tabela td.data{font-variant-numeric:tabular-nums;color:var(--suave)}
.lista-contatos .tel{font:var(--t-sm)/1.2 var(--sans);font-variant-numeric:tabular-nums;color:var(--texto);white-space:nowrap}
.lista-contatos .tel-whatsapp{text-decoration:none}
.dono-linha{display:inline-flex;align-items:center;gap:.4rem;max-width:9rem;overflow:hidden;text-overflow:ellipsis}
.dono-avatar{display:inline-grid;place-items:center;flex:none;width:1.4rem;height:1.4rem;border-radius:50%;font:600 var(--t-xs)/1 var(--sans);color:var(--suave);background:var(--sup2);box-shadow:inset 0 0 0 1px var(--linha2)}
.lista-contatos .tabela td.etqs{white-space:normal;min-width:6rem}
.etq{display:inline-flex;align-items:center;gap:.3rem;margin:.1rem .5rem .1rem 0;font-size:var(--t-xs);color:var(--suave);white-space:nowrap}
.etq i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.etq-mais{font-size:var(--t-xs);color:var(--apagado)}
/* a célula inteira da seleção é o alvo (36 px), não só a caixinha de 16 px */
.lista-contatos .tabela td.sel,.lista-contatos .tabela th.sel{width:2.6rem;padding:0;text-align:center}
.lista-contatos .tabela td.sel input,.lista-contatos .tabela th.sel input{width:1.05rem;height:1.05rem;margin:.6rem}
.barra-lote #limpar-selecao{width:2rem;height:2rem;margin-left:auto}
@media (min-width:701px){
  /* no computador, clicar no número abre o editor como o resto da linha (a conversa é pelo painel) */
  .lista-contatos .tel-whatsapp{pointer-events:none;color:var(--texto)}
}
@media (max-width:1400px){
  .lista-contatos .tabela td,.lista-contatos .tabela th{padding-left:.5rem;padding-right:.5rem}
}
@media (max-width:900px){
  .filtros-contatos{gap:.4rem}
  .filtros-contatos input[type=search]{flex:1 1 100%}
  .filtros-contatos .contador-lista{margin-left:auto}
  /* "Novo contato" e o "⋯" numa linha só; nas outras telas as ações quebram linha (26/09, F6: com o botão sem quebrar
     o texto, o "Últimos 30 dias" de Resultados passava da tela no celular) */
  .pagina-topo .acoes-topo:has(.menu-mais){flex-wrap:nowrap}
}
@media (max-width:700px){
  /* um cartão por contato: nome e etapa em cima, o número (toque abre o WhatsApp), e o resto em linhas curtas */
  .lista-contatos{overflow:visible;background:none;border:0;box-shadow:none}
  .lista-contatos .tabela,.lista-contatos .tabela tbody{display:block}
  .lista-contatos .tabela thead{display:none}
  .lista-contatos .tabela tr{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.3rem .6rem;margin:0 0 .55rem;padding:.75rem .85rem;border:1px solid var(--linha);border-radius:var(--r-lg);background:var(--sup)}
  .lista-contatos .tabela tr.marcada{border-color:color-mix(in srgb,var(--ciano) 50%,var(--linha))}
  .lista-contatos .tabela td{display:block;padding:0;border:0;white-space:normal;max-width:none;min-width:0}
  .lista-contatos .tabela td.empresa{grid-column:1}
  .lista-contatos .tabela td.empresa b{font-size:var(--t-base)}
  .lista-contatos .tabela td.etapa{grid-column:2;grid-row:1;text-align:right}
  .lista-contatos .tabela td.whatsapp{grid-column:1/-1}
  .lista-contatos .tel-whatsapp{display:inline-flex;align-items:center;min-height:40px;padding:0 .8rem;border-radius:var(--r-pilula);color:var(--menta);background:color-mix(in srgb,var(--menta) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--menta) 30%,transparent)}
  .lista-contatos .tabela td[data-rotulo]:not(.whatsapp){grid-column:1/-1;display:flex;align-items:baseline;gap:.5rem;font-size:var(--t-sm)}
  .lista-contatos .tabela td[data-rotulo]:not(.whatsapp)::before{content:attr(data-rotulo);flex:none;min-width:6.5rem;color:var(--apagado);font-size:var(--t-xs);font-family:var(--sans)}
  .lista-contatos .tabela td.etqs{grid-column:1/-1}
  .lista-contatos .tabela td[data-rotulo][data-vazio]:not(.whatsapp),.lista-contatos .tabela td.etqs[data-vazio]{display:none}
  .lista-contatos .tabela td.sel{position:absolute;top:.35rem;right:.35rem;width:auto}
  .lista-contatos .tabela tr:has(td.sel) td.etapa{margin-right:2.2rem}
  .barra-lote{position:sticky;bottom:calc(var(--barra-celular,0px) + .5rem);z-index:5}
}
/* Contatos em 1265 px sem rolar de lado: os títulos de duas palavras quebram, a próxima atividade fica mais estreita,
   o responsável vira só o avatar (o nome no hover) e as etiquetas mostram o ponto e o nome curto. */
.lista-contatos .tabela th{white-space:normal;vertical-align:bottom;line-height:1.25}
.lista-contatos .etq{max-width:7rem;overflow:hidden;text-overflow:ellipsis}
.lista-contatos .tabela td.origem{color:var(--suave)}
@media (min-width:701px) and (max-width:1500px){
  .lista-contatos .dono-nome{display:none}
}
@media (min-width:701px){
  /* quando a página precisa de todas as colunas e passa da largura, o nome (e a seleção) ficam presos à esquerda */
  .lista-contatos .tabela td.empresa,.lista-contatos .tabela th:nth-child(1),.lista-contatos .tabela td.sel{position:sticky;left:0;z-index:1;background:var(--sup)}
  .lista-contatos .tabela:has(td.sel) td.empresa,.lista-contatos .tabela:has(th.sel) th:nth-child(2){position:sticky;left:2.6rem;z-index:1;background:var(--sup)}
  .lista-contatos .tabela thead th:nth-child(1),.lista-contatos .tabela:has(th.sel) thead th:nth-child(2){z-index:2}
  .lista-contatos tr.marcada td.empresa,.lista-contatos tr.marcada td.sel{background:color-mix(in srgb,var(--ciano) 6%,var(--sup))}
}
/* 27/09 — Disponível / Ausente no pé da lateral (distribuição pela carga) */
.presenca{margin:0 .5rem .35rem}
.presenca-botao{display:flex;align-items:center;gap:.45rem;width:100%;min-height:var(--controle-mini,30px);padding:0 .6rem;border-radius:var(--r-md,10px);border:1px solid var(--linha2);background:transparent;color:var(--suave);font:500 var(--t-xs)/1.2 var(--sans);cursor:pointer;justify-content:flex-start}
.presenca-botao:hover{background:var(--sup2);color:var(--texto)}
.presenca-ponto{width:8px;height:8px;border-radius:var(--r-pilula);background:var(--menta);box-shadow:0 0 0 3px color-mix(in srgb,var(--menta) 22%,transparent)}
.presenca-botao[data-disponivel="0"] .presenca-ponto{background:var(--apagado);box-shadow:none}
:root[data-lateral="1"] .presenca-botao span{display:none}
.limite-fila{display:flex;align-items:center;gap:.35rem;margin-top:.35rem;color:var(--suave);font-size:var(--t-xs)}
.limite-fila input{width:4.5rem}
.tabela-filas tr:not(:has(option[value="menos_ocupado"]:checked)) .limite-fila,.nova-fila-linha:not(:has(option[value="menos_ocupado"]:checked)) .limite-nova{display:none} /* o limite só vale na regra Menos ocupado */
/* === Gartner Imob: imóveis, fotos e o site da imobiliária (27/09, Tarefa 7) ===
   Lista de imóveis (tabela com a capa), editor em seções com as fotos em cartões que se arrastam, e a tela do site.
   Só os tokens da F6 (letra --t-*, raio --r-*, controle) e os componentes de sempre: cartão (.ajuste-secao), campo,
   botão, cápsula (.pill) e a barra de salvar. As cores do estado seguem a regra do painel: menta pronto, âmbar confira,
   coral erro. */
.imob-aviso-lista{display:flex;align-items:center;gap:.55rem;margin:0 0 .7rem;padding:.55rem .8rem;border:1px solid color-mix(in srgb,var(--ambar) 30%,transparent);border-radius:var(--r-md);background:color-mix(in srgb,var(--ambar) 7%,transparent);color:var(--suave);font-size:var(--t-sm)}
.imob-aviso-lista .ico{flex:none;color:var(--ambar)}
.imob-aviso-lista b{color:var(--texto);font-weight:600}
.imob-filtros{margin-bottom:.7rem}
.imob-lista .tabela td{white-space:nowrap}
.imob-lista .tabela tbody tr{cursor:pointer}
.imob-lista .tabela th small{display:block;font-weight:400;color:var(--apagado)}
.imob-lista .tabela .imob-td-capa{width:5.3rem;padding-right:0}
.imob-lista .tabela td.imob-codigo{font:500 var(--t-sm)/1.2 var(--mono);color:var(--suave)}
.imob-lista .tabela td.imob-titulo{white-space:normal;min-width:14rem;max-width:28rem}
.imob-titulo a{color:var(--texto)}
.imob-titulo a:hover{color:var(--acento);text-decoration:none}
.imob-titulo b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:600;line-height:1.3}
.imob-titulo small{display:block;margin-top:.2rem;font-size:var(--t-xs);color:var(--apagado);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.imob-preco{font-variant-numeric:tabular-nums}
.imob-preco span{display:block;font-weight:600}
.tabela td.imob-preco small{display:inline;margin:0 0 0 .1rem;font-weight:400;color:var(--apagado)}
.imob-preco .imob-preco-sob{font-weight:500;color:var(--suave)}
.imob-centro{text-align:center}
.imob-capa{display:grid;place-items:center;width:4.5rem;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-sm);border:1px solid var(--linha);background:var(--sup2);color:var(--apagado)}
.imob-capa img{display:block;width:100%;height:100%;object-fit:cover}
.imob-capa-vazia{border-style:dashed}
.imob-destaque{display:inline-grid;color:var(--ambar)}
.imob-destaque .ico{fill:color-mix(in srgb,var(--ambar) 40%,transparent)}
.imob-situacao[data-situacao=ativo]{--c:var(--menta)}
.imob-situacao[data-situacao=reservado]{--c:var(--ambar)}
.imob-situacao[data-situacao=rascunho]{--c:var(--ardosia)}
.imob-situacao[data-situacao=vendido],.imob-situacao[data-situacao=alugado]{--c:var(--lavanda)}
.imob-situacao[data-situacao=inativo]{--c:var(--apagado)}
.imob-situacao .ponto{width:.4rem;height:.4rem}
/* editor */
.imob-topo-linha{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.35rem .75rem;color:var(--apagado)}
.imob-topo-codigo{font:500 var(--t-sm)/1 var(--mono);color:var(--suave)}
.imob-editor{display:flex;flex-direction:column;gap:1rem;max-width:74rem}
.imob-indice{position:sticky;top:0;z-index:4;display:flex;gap:.2rem;overflow-x:auto;scrollbar-width:none;padding:.35rem;border:1px solid var(--linha);border-radius:var(--r-lg);background:color-mix(in srgb,var(--sup) 90%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.imob-indice::-webkit-scrollbar{display:none}
.imob-indice a{padding:.35rem .7rem;border-radius:var(--r-md);color:var(--suave);font-size:var(--t-sm);white-space:nowrap;transition:background-color var(--transicao),color var(--transicao)}
.imob-indice a:hover{background:var(--sup2);color:var(--texto);text-decoration:none}
.imob-form{display:grid;gap:1rem}
.imob-form .ajuste-secao,.imob-site .ajuste-secao{scroll-margin-top:4.5rem}
.imob-conferir{display:grid;gap:.5rem;padding:.8rem 1rem;border:1px solid var(--linha);border-radius:var(--r-lg);background:var(--sup)}
.imob-portais{display:flex;align-items:center;gap:.5rem;margin:0;font-size:var(--t-md);color:var(--texto)}
.imob-portais .ico{flex:none;color:var(--ambar)}
.imob-portais[data-pronto="1"] .ico{color:var(--menta)}
.imob-avisos{display:grid;gap:.3rem;margin:0;padding:0;list-style:none}
.imob-avisos li{position:relative;padding-left:1.45rem;font-size:var(--t-sm);color:var(--ambar)}
.imob-avisos li::before{content:"";position:absolute;left:.4rem;top:.55em;width:.35rem;height:.35rem;border-radius:var(--r-pilula);background:currentColor}
.imob-erros{margin:0 0 .9rem;padding:.8rem 1rem;border:1px solid color-mix(in srgb,var(--coral) 45%,var(--linha));border-radius:var(--r-lg);background:color-mix(in srgb,var(--coral) 8%,var(--sup))}
.imob-editor>.imob-erros{margin:0}
.imob-erros b{display:block;color:var(--coral);font-size:var(--t-md)}
.imob-erros ul{display:grid;gap:.2rem;margin:.45rem 0 0;padding-left:1.1rem;font-size:var(--t-sm)}
.imob-erros p{margin:.3rem 0 0;font-size:var(--t-sm)}
.imob-marcas{min-width:0;margin:0;padding:0;border:0}
.imob-marcas>legend{padding:0;margin-bottom:.45rem}
.imob-marcas-lista{display:flex;flex-wrap:wrap;gap:.4rem}
.imob-marca{position:relative;display:inline-flex;cursor:pointer}
.imob-marca input{position:absolute;opacity:0;width:1px;height:1px}
.imob-marca span{display:inline-flex;align-items:center;gap:.4rem;min-height:var(--controle-mini);padding:0 .75rem;border:1px solid var(--linha2);border-radius:var(--r-pilula);background:var(--sup2);color:var(--suave);font-size:var(--t-sm);transition:background-color var(--transicao),border-color var(--transicao),color var(--transicao)}
.imob-marca span::before{content:"";flex:none;width:.5rem;height:.5rem;border:1.5px solid currentColor;border-radius:var(--r-pilula);opacity:.55}
.imob-marca:hover span{color:var(--texto)}
.imob-marca input:checked+span{color:var(--texto);border-color:color-mix(in srgb,var(--acento) 55%,var(--linha2));background:color-mix(in srgb,var(--acento) 13%,var(--sup2))}
.imob-marca input:checked+span::before{border-color:var(--acento);background:var(--acento);opacity:1}
.imob-marca input:focus-visible+span{outline:2px solid var(--acento);outline-offset:2px}
.imob-finalidade span{min-height:var(--controle);padding:0 1rem;font-size:var(--t-md)}
.imob-contador{color:var(--apagado)}
.imob-form>.barra-salvar{max-width:none}
.imob-excluir{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem;padding:.8rem 1rem;border:1px dashed color-mix(in srgb,var(--coral) 30%,var(--linha));border-radius:var(--r-lg);color:var(--apagado);font-size:var(--t-sm)}
/* fotos: a área de soltar e os cartões (a primeira é a capa) */
.imob-fotos{display:grid;gap:.8rem;min-width:0}
.imob-soltar{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;padding:1.4rem 1rem;border:1.5px dashed var(--linha2);border-radius:var(--r-lg);background:color-mix(in srgb,var(--acento) 3%,var(--sup2));color:var(--suave);font-size:var(--t-sm);text-align:center;transition:border-color var(--transicao),background-color var(--transicao)}
.imob-soltar .ico{color:var(--acento)}
.imob-soltar b{color:var(--texto);font-size:var(--t-base);font-weight:600}
.imob-soltar[data-soltar]{cursor:pointer}
.imob-soltar.ativa{border-color:var(--acento);background:color-mix(in srgb,var(--acento) 11%,var(--sup2))}
.imob-soltar-inativa .ico{color:var(--apagado)}
.imob-fotos-status{margin:0;font-size:var(--t-sm);color:var(--suave)}
.imob-fotos-status:empty,.imob-fotos-lista:empty{display:none}
.imob-fotos-status[data-erro="1"]{color:var(--coral)}
.imob-fotos-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(12.5rem,1fr));align-items:start;gap:.8rem;margin:0;padding:0;list-style:none}
.imob-foto{display:grid;gap:.5rem;padding:.5rem;border:1px solid var(--linha);border-radius:var(--r-lg);background:var(--sup2);transition:border-color var(--transicao),opacity var(--transicao),transform var(--transicao)}
.imob-foto.e-capa{border-color:color-mix(in srgb,var(--acento) 50%,var(--linha))}
.imob-foto.arrastando{opacity:.4;transform:scale(.97)}
.imob-foto[aria-busy="true"]{opacity:.75}
.imob-foto.chegando .imob-foto-acoes,.imob-foto.chegando .imob-foto-campos{visibility:hidden}
.imob-foto-quadro{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-md);background:var(--void);cursor:grab}
.imob-foto-quadro[draggable="false"]{cursor:default}
.imob-foto-quadro:active{cursor:grabbing}
.imob-foto-quadro img{display:block;width:100%;height:100%;object-fit:cover}
.imob-foto-espera,.imob-foto-falha{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;padding:.7rem;color:var(--suave);font-size:var(--t-xs);text-align:center}
.imob-foto-falha{color:var(--coral);background:color-mix(in srgb,var(--coral) 9%,var(--void))}
.imob-giro{width:1.1rem;height:1.1rem;border:2px solid color-mix(in srgb,var(--acento) 25%,transparent);border-top-color:var(--acento);border-radius:var(--r-pilula);animation:imob-giro .8s linear infinite}
@keyframes imob-giro{to{transform:rotate(360deg)}}
.imob-foto-capa,.imob-foto-num,.imob-foto-pequena{position:absolute;display:inline-flex;align-items:center;gap:.25rem;min-height:1.35rem;padding:0 .45rem;border-radius:var(--r-pilula);font:600 var(--t-xs)/1 var(--sans)}
.imob-foto-num{top:.4rem;left:.4rem;min-width:1.35rem;justify-content:center;background:rgba(14,14,14,.72);color:#f2f3f5;font-variant-numeric:tabular-nums}
.imob-foto-capa{top:.4rem;right:.4rem;background:var(--acento);color:var(--sobre-acento)}
.imob-foto-pequena{bottom:.4rem;left:.4rem;background:rgba(14,14,14,.72);color:#ffba6a}
.imob-foto-barra{position:absolute;left:.7rem;right:.7rem;bottom:.7rem;height:.25rem;overflow:hidden;border-radius:var(--r-pilula);background:color-mix(in srgb,var(--texto) 14%,transparent)}
.imob-foto-barra i{display:block;height:100%;background:var(--acento);transform:scaleX(.02);transform-origin:left;transition:transform .2s ease}
.imob-foto-campos{display:grid;gap:.35rem}
.campo .imob-foto-campos select,.imob-foto-campos select,.imob-foto-campos input{width:100%;min-width:0;height:var(--controle-mini);padding:0 .55rem;border-radius:var(--r-sm);background:var(--sup);font-size:var(--t-sm)}
.imob-foto-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem}
.imob-foto-acoes .botao-icone{width:var(--controle-mini);height:var(--controle-mini)}
.imob-foto-acoes [data-excluir]{margin-left:auto}
.imob-foto-acoes [data-capa]{order:9;flex-basis:100%}
.imob-foto-excluir:hover{color:var(--coral);border-color:color-mix(in srgb,var(--coral) 40%,var(--linha2))}
/* tela do site */
.imob-site{display:grid;gap:1rem;max-width:74rem}
.imob-endereco{display:grid;gap:.5rem}
.imob-endereco-linha{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .9rem;padding:.6rem .8rem;border:1px solid var(--linha);border-radius:var(--r-md);background:var(--sup2);font-size:var(--t-md)}
.imob-endereco-linha>span{min-width:4.5rem;color:var(--apagado);font:600 var(--t-xs)/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.imob-endereco-linha a{font:500 var(--t-sm)/1.4 var(--mono);word-break:break-all}
.imob-endereco-linha em{color:var(--suave);font-size:var(--t-sm);font-style:normal}
.imob-endereco-linha small{flex-basis:100%;padding-left:5.4rem;color:var(--apagado);font-size:var(--t-xs)}
.imob-logo-linha{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.imob-logo-quadro{display:grid;place-items:center;flex:none;width:11rem;height:5.5rem;padding:.6rem;border:1px solid var(--linha2);border-radius:var(--r-md);background:#fff}
.imob-logo-quadro img{max-width:100%;max-height:100%;object-fit:contain}
.imob-logo-vazia{display:flex;flex-direction:column;align-items:center;gap:.3rem;color:#6b6e7c;font-size:var(--t-xs)}
.imob-logo-acoes{display:flex;flex:1;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:12rem}
.imob-logo-acoes .campo-dica{flex-basis:100%}
.imob-logo-acoes .campo-dica[data-erro="1"]{color:var(--coral)}
.imob-cor{display:flex;align-items:center;gap:.6rem}
.campo .imob-cor input[type=color]{flex:none;width:2.75rem;height:var(--controle);padding:.2rem;border:1px solid var(--linha2);border-radius:var(--r-md);background:var(--sup2);cursor:pointer}
.imob-cor input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.imob-cor input[type=color]::-webkit-color-swatch{border:0;border-radius:var(--r-sm)}
.imob-cor input[type=color]::-moz-color-swatch{border:0;border-radius:var(--r-sm)}
.imob-cor code{color:var(--suave);font:500 var(--t-sm)/1 var(--mono);text-transform:uppercase}
.imob-opcoes{min-width:0;margin:0;padding:0;border:0}
.imob-opcoes>legend{padding:0;margin-bottom:.45rem}
.imob-opcoes-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));gap:.5rem}
.imob-opcao{position:relative;display:block;cursor:pointer}
.imob-opcao input{position:absolute;opacity:0;width:1px;height:1px}
.imob-opcao span{display:grid;align-content:start;gap:.2rem;height:100%;padding:.6rem .75rem;border:1px solid var(--linha2);border-radius:var(--r-md);background:var(--sup2);transition:border-color var(--transicao),background-color var(--transicao)}
.imob-opcao b{color:var(--texto);font-size:var(--t-md);font-weight:600}
.imob-opcao small{color:var(--suave);font-size:var(--t-xs);line-height:1.4}
.imob-opcao input:checked+span{border-color:var(--acento);background:color-mix(in srgb,var(--acento) 11%,var(--sup2));box-shadow:inset 0 0 0 1px var(--acento)}
.imob-opcao input:focus-visible+span{outline:2px solid var(--acento);outline-offset:2px}
/* Tarefa 9: números por imóvel. O botão de copiar o link do relatório troca o rótulo quando o lateral.js marca .copiado;
   em Visitas, com o bloco "Imóveis mais vistos", a grade vira 2 por 2 */
.imob-relatorio-acoes{display:inline-flex;gap:.5rem}
.imob-copiar-relatorio .rotulo-copiado,.imob-copiar-relatorio.copiado .rotulo-copiar{display:none}
.imob-copiar-relatorio.copiado .rotulo-copiado{display:inline}
.imob-copiar-relatorio.copiado{border-color:var(--menta)}
.imoveis-mais-vistos .barra-rotulo code{flex:none}
.imoveis-mais-vistos .barra-rotulo a{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--texto)}
@media (min-width:1101px){.site-grade[data-blocos="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
:root[data-tema=claro] :is(.imob-avisos li,.imob-aviso-lista .ico){color:color-mix(in srgb,var(--ambar) 74%,var(--texto))}
:root[data-tema=claro] :is(.imob-erros b,.imob-fotos-status[data-erro="1"],.imob-foto-falha,.imob-logo-acoes .campo-dica[data-erro="1"]){color:color-mix(in srgb,var(--coral) 74%,var(--texto))}
@media (prefers-reduced-motion:reduce){
  .imob-giro{animation-duration:2.4s}
  .imob-foto,.imob-foto-barra i{transition:none}
}
@media (max-width:700px){
  /* a lista vira cartões: capa à esquerda, código e situação, o título e o preço */
  .imob-lista .tabela thead{display:none}
  .imob-lista .tabela,.imob-lista .tabela tbody{display:block}
  .imob-lista .tabela tr{display:grid;grid-template-columns:4.5rem minmax(0,1fr) auto;grid-template-areas:"capa codigo situacao" "capa titulo titulo" "capa preco preco" "capa vistos whatsapp";align-items:center;gap:.2rem .75rem;padding:.7rem .8rem;border-bottom:1px solid var(--linha)}
  .imob-lista .tabela td{display:block;padding:0;border:0}
  .imob-lista .tabela .imob-td-capa{grid-area:capa;align-self:start;width:auto}
  .imob-lista .tabela td.imob-codigo{grid-area:codigo}
  .imob-lista .tabela td.imob-td-situacao{grid-area:situacao}
  .imob-lista .tabela td.imob-titulo{grid-area:titulo;min-width:0;max-width:none}
  .imob-lista .tabela td.imob-preco{grid-area:preco}
  .imob-lista .tabela td.imob-centro{display:none}
  /* Tarefa 9: os números dos 30 dias numa linha só, embaixo do preço */
  .imob-lista .tabela td.num{color:var(--suave);font:var(--t-xs) var(--sans);text-align:left}
  .imob-lista .tabela td.num[data-rotulo=Vistos]{grid-area:vistos}
  .imob-lista .tabela td.num[data-rotulo=WhatsApp]{grid-area:whatsapp;text-align:right}
  .imob-lista .tabela td.num[data-rotulo=Vistos]::before{content:"Vistos em 30 dias: "}
  .imob-lista .tabela td.num[data-rotulo=WhatsApp]::before{content:"WhatsApp: "}
  .imob-preco span{display:inline;margin-right:.6rem}
  .imob-fotos-lista{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
  .imob-foto{padding:.4rem}
  .imob-endereco-linha small{padding-left:0}
  .imob-excluir .perigo{width:100%}
  .imob-form>.barra-salvar .barra-salvar-dica{display:none}
  .imob-form>.barra-salvar button{flex:1}
}