/* ============================================================
IDENTIDADE VISUAL
------------------------------------------------------------
As cores da marca estao declaradas aqui, num lugar so. Para adotar
a identidade oficial do mandato, ou instalar em outro mandato,
basta trocar estes valores.
Restam algumas cores escritas direto no codigo, em avisos e selos
de estado (temperatura do contato, modo teste, aprovacao). Sao
sinais de significado fixo, nao identidade: verde e confirmado em
qualquer mandato. Se um dia incomodarem, o caminho e trazer para
ca como variaveis.
============================================================ */
/* ============================================================
TOKENS DO SISTEMA DE DESIGN
============================================================
Vem do sistema criado no Claude Design em 8 de agosto de 2026.
O bloco tem duas partes, e a segunda é a que impede o app de
quebrar.
PARTE 1, os tokens novos. Seis tamanhos de texto, seis espaçamentos,
três raios, duas sombras. É o que resolve o problema real: o app
tinha doze tamanhos de fonte e espaçamento decidido caso a caso.
PARTE 2, as pontes. O sistema veio com nomes novos, e o app usa os
antigos em 193 lugares. Renomear tudo seria caçar nome em 7.344
linhas, com chance alta de errar um. Em vez disso, cada nome antigo
passa a apontar para o novo.
Assim o app continua funcionando exatamente como está, e o código
novo já nasce com o vocabulário certo. As pontes saem sozinhas
conforme os estilos avulsos forem sendo trocados por classes.
CONTRASTE, conferido linha por linha
tinta-forte sobre papel 17,9 passa
tinta-media sobre papel 6,4 passa
tinta-fraca sobre papel 5,1 passa (era 3,2 e reprovava)
branco sobre marca 7,8 passa
branco sobre envio 3,5 REPROVA em texto normal
branco sobre envio-forte 5,4 passa
atencao-forte sobre suave 6,6 passa
branco sobre teste 9,4 passa
Por isso existem os pares: --cor-envio pinta marcador e
preenchimento, --cor-envio-forte é para texto e botão. O mesmo vale
para --cor-atencao, que pinta fundo e botão, e --cor-atencao-forte,
que é a versão de texto.
A --tinta-fraca era #8d9099 e reprovava em qualquer texto, o que a
deixava sem uso legítimo: ela aparecia em 37 lugares e nos 37 como
cor de letra. Em 9 de agosto de 2026 escureceu para #6b6d74, que
passa sobre papel, sobre o fundo da página e sobre os selos cinza,
e continua visivelmente mais clara que --tinta-media. Segue sendo
ferramenta de legenda curta, não de texto corrido — agora por
decisão de hierarquia, e não por dívida de contraste.
============================================================ */
:root {
/* ---------- cor, identidade ---------- */
--cor-marca: #3d4753;
--cor-marca-pressionada:#2e363f;
--cor-marca-suave: #f1f2f3;
--cor-azul: #1b4a80;
/* ---------- cor, produto Urdume ----------
A organizacao colore a operacao. Estes tons identificam o produto
no launcher, no favicon e na assinatura discreta da entrada. */
--produto-petroleo: #0f5150;
--produto-petroleo-escuro:#0b3e3d;
--produto-nevoa: #e7efee;
--produto-papel: #faf9f7;
--produto-barro: #8a3a22;
/* ---------- cor, sinalização ---------- */
--cor-envio: #1f9d55; /* marcador, preenchimento */
--cor-envio-forte: #157a41; /* texto e botão, passa AA */
--cor-envio-suave: #eaf6ef;
--cor-atencao: #a06a00;
--cor-atencao-forte: #7a5100;
--cor-atencao-suave: #fff8e6;
--cor-teste: #6b2585;
--cor-teste-suave: #f6edfa;
--cor-info-suave: #eef3f9;
/* ---------- cor, PERIGO ----------
Erro, campo invalido e acao destrutiva. A familia que faltava.
Ate 29/08/2026 estes sete usos liam --cor-marca, que e a cor do
CLIENTE. No mandato de origem a marca e vermelha, entao ninguem
percebeu: erro vermelho, botao de apagar vermelho, tudo certo por
coincidencia.
Num mandato de cor verde, campo invalido fica verde e o botao de
apagar fica verde. Nao e vazamento de identidade — e defeito de
compreensao e de acessibilidade, e some com a unica pista visual
que diz "isto vai dar errado".
O resto do sistema ja fazia certo: --cor-envio, --cor-atencao e
--cor-teste nunca seguiram a marca, e o cabecalho deste arquivo ja
dizia por que ("sinais de significado fixo, nao identidade").
Vermelho era a unica excecao.
Os valores sao EXATAMENTE os que estavam renderizando antes, para
o app do mandato de origem nao mudar um pixel. O que muda e de
onde eles vem. */
--cor-marca-tenue: #dcdee0; /* preenchimento de barra e grafico */
--perigo: #a51010; /* borda, icone, preenchimento */
--perigo-pressionada: #7d0b0b; /* botao destrutivo */
--perigo-forte: #8a1f16; /* texto sobre suave, passa AA */
--perigo-suave: #fdecec;
--perigo-linha: #f3c9c9;
/* ---------- as familias, pelos nomes que valem daqui em diante ----------
O produto e de um jeito, o cliente e de outro, e o significado nao
e de ninguem. Sao apelidos das cores acima, e nao cores novas:
renomear 40 usos de uma vez seria mudanca grande com risco de
esquecer um. Codigo novo usa estes nomes; o antigo continua
funcionando ate ser tocado por outro motivo. */
--marca-cliente: var(--cor-marca);
--marca-cliente-pressionada: var(--cor-marca-pressionada);
--marca-cliente-suave: var(--cor-marca-suave);
--sucesso: var(--cor-envio-forte);
--sucesso-suave: var(--cor-envio-suave);
--atencao: var(--cor-atencao);
--atencao-forte: var(--cor-atencao-forte);
--atencao-suave: var(--cor-atencao-suave);
--teste: var(--cor-teste);
--teste-suave: var(--cor-teste-suave);
/* ---------- cor, tinta, linha, papel ---------- */
--tinta-forte: #16171a;
--tinta-media: #5c5f66;
--tinta-fraca: #6b6d74; /* legenda curta; passa AA desde 9/8 */
--linha: #e4e6ea;
--linha-forte: #c9ccd2;
--papel: #ffffff;
--fundo: #f4f5f7;
/* ---------- tipografia, seis tamanhos ---------- */
--fonte: 'IBM Plex Sans', system-ui, -apple-system,
'Segoe UI', Roboto, sans-serif;
--fonte-mono: 'IBM Plex Mono', ui-monospace, monospace;
--texto-titulo: 700 24px/1.25 var(--fonte);
--texto-secao: 600 20px/1.3 var(--fonte);
--texto-grande: 400 17px/1.5 var(--fonte);
--texto-corpo: 400 15px/1.5 var(--fonte);
--texto-apoio: 400 13px/1.4 var(--fonte);
--texto-etiqueta: 600 11px/1.2 var(--fonte);
--etiqueta-espacamento: 0.06em;
/* ---------- espaçamento, seis valores ---------- */
--espaco-1: 4px;
--espaco-2: 8px;
--espaco-3: 12px;
--espaco-4: 16px;
--espaco-5: 24px;
--espaco-6: 40px;
/* ---------- raio, três ---------- */
--raio-1: 4px; /* campo, etiqueta */
--raio-2: 8px; /* botão, cartão */
--raio-3: 999px; /* contador, avatar */
/* ---------- elevação, duas ---------- */
--sombra-1: 0 1px 2px rgba(22,23,26,0.08);
--sombra-2: 0 8px 24px rgba(22,23,26,0.16);
/* ---------- toque e foco ---------- */
--alvo-toque: 44px;
--alvo-toque-celular: 48px;
--anel-foco: 0 0 0 2px var(--papel), 0 0 0 4px var(--cor-azul);
/* ============================================================
PONTES PARA OS NOMES ANTIGOS
------------------------------------------------------------
Não apague nenhuma enquanto houver uso no app. O número ao lado
é quantas vezes cada uma aparecia no index.html em 8 de agosto.
Quando chegar a zero, a ponte pode sair.
============================================================ */
--vermelho: var(--cor-marca); /* 17 usos */
--vermelho-esc: var(--cor-marca-pressionada); /* 1 uso */
--vermelho-claro: var(--cor-marca-suave); /* 4 usos */
--tinta: var(--tinta-forte); /* 6 usos */
--linha: #e4e6ea; /* 29 usos, mesmo nome */
--papel: #ffffff; /* 14 usos, mesmo nome */
--fundo: #f4f5f7; /* 10 usos, mesmo nome */
--verde-zap: var(--cor-envio-forte); /* 2 usos */
--verde-zap-esc: #0f5c31; /* 2 usos */
--ambar: var(--cor-atencao); /* 7 usos */
--ambar-fundo: var(--cor-atencao-suave); /* 5 usos */
--azul: var(--cor-azul); /* 11 usos */
--roxo: var(--cor-teste); /* 2 usos */
--raio: var(--raio-2); /* 5 usos */
--sombra: var(--sombra-1); /* 6 usos */
/* --tinta-media e --tinta-fraca já têm o mesmo nome nos dois lados */
}
/* ------------------------------------------------------------
A fonte do sistema é a IBM Plex Sans. Se ela não for carregada,
o navegador cai para a fonte do próprio aparelho e nada quebra,
só muda o desenho das letras.
Carregue no do index.html, antes do estilo.css:
Uma ressalva de operação: isso é um pedido a um servidor de fora,
em toda abertura. A colaboradora trabalha no celular, às vezes com
sinal ruim. O display=swap garante que o texto aparece na hora com
a fonte do aparelho e troca depois, sem tela em branco.
Se preferir não depender de servidor de terceiro, apague as três
linhas: a --fonte já cai em system-ui sozinha.
------------------------------------------------------------ */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* Isto precisa vir antes de tudo e com peso maximo.
A regra de tela grande usa #v_fila{display:grid}, e seletor de id
ganha do display:none que o navegador aplica ao atributo hidden. O
resultado era a Fila continuar desenhada por baixo das outras abas,
no computador. No celular nada disso acontecia, porque a regra de
grade nem chega a valer. */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{font-family:var(--fonte);
background:var(--fundo);color:var(--tinta);max-width:620px;margin:0 auto;
font-size:16px;line-height:1.45;
padding-bottom:calc(40px + env(safe-area-inset-bottom));
-webkit-font-smoothing:antialiased}
/* ---------- marca ---------- */
.sigla{display:flex;align-items:center;justify-content:center;
background:var(--papel);color:var(--cor-marca);
font-weight:800;letter-spacing:-.5px;flex:none}
.marca{display:flex;align-items:center;gap:10px}
.marca .sigla{width:34px;height:34px;border-radius:9px;font-size:15px}
.marca .txt{min-width:0}
.marca .txt b{display:block;font-size:14.5px;font-weight:700;line-height:1.2;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marca .txt span{display:block;font-size:11px;opacity:.75;letter-spacing:.4px;
text-transform:uppercase;margin-top:1px}
/* ---------- cabecalho ---------- */
header{background:var(--vermelho);color:#fff;
padding:calc(14px + env(safe-area-inset-top)) 16px 0;
position:sticky;top:0;z-index:10;
box-shadow:0 1px 0 rgba(0,0,0,.12)}
header h1{font-size:15px;margin:0;font-weight:700}
.prog{display:flex;align-items:baseline;gap:8px;font-size:13px;opacity:.95;flex-wrap:wrap;margin-top:14px}
.prog b{font-size:26px;font-weight:800;letter-spacing:-.5px}
.bar{height:6px;background:rgba(255,255,255,.25);border-radius:4px;overflow:hidden;margin-top:8px}
.bar>div{height:100%;background:#fff;width:0;transition:width .35s ease}
/* Quatro pastilhas mais o nome de quem entrou nao cabem numa linha de
360px. Sem quebrar, a linha estica o cabecalho para fora da tela e
leva "sair" junto. Quebrando, o cabecalho ganha uma linha e ninguem
perde botao. */
.sino{display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-size:12px;
color:rgba(255,255,255,.88);margin-top:8px}
.sino #quem{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Em tela estreita o nome da campanha fica com a linha inteira so para
ele, e as pastilhas descem. Nome de campanha costuma ser longo, e
cortar um titulo de oito palavras em 40% da tela nao diz nada a
ninguem. */
@media (max-width: 560px){
.sino #quem{flex:1 1 100%;order:-1}
.sino #versao{margin-left:0 !important}
}
.dot{width:7px;height:7px;border-radius:50%;background:#7ee08a;flex:none}
.dot.off{background:#ffc857}
/* Sair morava so no pe da Fila. Quem dirige nao tem Fila, entao para
essa pessoa o botao simplesmente nao existia. No cabecalho ele
serve a todo mundo, e fica sempre na tela. */
/* O modo teste ocupava um bloco inteiro no meio da Fila, empurrando o
cartao para baixo. Quem opera precisa do polegar perto dos botoes de
envio, nao rolando a tela. Aqui ele vira uma pastilha no cabecalho,
que e fixo, e fica bem visivel quando esta ligado. */
/* Sino de contato novo. Discreto de proposito: quem esta no meio de
um lote nao pode ser interrompido, e um aviso que atrapalha e um
aviso que a equipe desliga na primeira semana. */
.sinopill{background:#fff8e6;border:0;color:#7a5a10;font-family:inherit;
font-size:11.5px;font-weight:800;padding:5px 12px;border-radius:20px;
cursor:pointer;letter-spacing:.2px;margin-right:6px}
.sinopill::before{content:'🔔 ';display:inline-block;transform-origin:50% 0}
.sinopill.pisca{animation:sininho 1.1s ease-out 3}
.sinopill.pisca::before{animation:balancoSino .5s ease-in-out 3}
@keyframes sininho{0%,100%{box-shadow:0 0 0 0 rgba(160,106,0,0)}
40%{box-shadow:0 0 0 6px rgba(160,106,0,.28)}}
/* Balanco do sino (tipo "alguem bateu na porta"), sobre o emoji so;
o pulso do box-shadow acima continua avisando quem preferir olhar
so o contorno do botao, sem precisar reparar no icone. */
@keyframes balancoSino{0%,100%{transform:rotate(0)}
20%{transform:rotate(-18deg)}
40%{transform:rotate(14deg)}
60%{transform:rotate(-10deg)}
80%{transform:rotate(6deg)}}
@media (prefers-reduced-motion: reduce){.sinopill.pisca{animation:none}
.sinopill.pisca::before{animation:none}}
.novopill{background:#fff;border:0;color:var(--vermelho);font-family:inherit;
font-size:11.5px;font-weight:800;padding:5px 12px;border-radius:20px;
cursor:pointer;letter-spacing:.2px;margin-right:6px}
.novopill:active{transform:translateY(1px)}
/* Janela de cadastro. Fica por cima de qualquer painel, entao o botao
no cabecalho serve a Fila, a Coordenacao e a Direcao sem repetir
formulario em lugar nenhum. */
.modal{position:fixed;inset:0;z-index:80;background:rgba(20,22,26,.55);
display:flex;align-items:flex-end;justify-content:center;padding:0}
.modal .cx{background:var(--papel);width:100%;max-width:520px;border-radius:16px 16px 0 0;
padding:18px 16px calc(18px + env(safe-area-inset-bottom));
max-height:92vh;overflow:auto}
.modal h3{margin:0 0 3px;font-size:17px}
.modal .exp{margin:0 0 14px;font-size:12.5px;color:var(--tinta-fraca);line-height:1.5}
.modal .botao--neutro{margin-top:var(--espaco-1)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.chip{background:var(--vermelho-claro);color:var(--vermelho);border:0;border-radius:20px;
padding:6px 11px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}
.chip.sug{background:var(--fundo);color:var(--tinta-media)}
.chip .x{margin-left:6px;opacity:.6}
.chip .qtd{margin-left:7px;opacity:.55;font-weight:400;font-size:12px}
@media (min-width: 900px){
.modal{align-items:center}
.modal .cx{border-radius:16px}
}
header.emteste{background:var(--roxo)}
header.emteste .abas button.on{border-bottom-color:#fff}
.testepill{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
color:#fff;font-family:inherit;font-size:11.5px;font-weight:600;
padding:4px 11px;border-radius:20px;cursor:pointer;letter-spacing:.2px;
margin-right:6px}
.testepill.on{background:#fff;color:var(--roxo);border-color:#fff;
box-shadow:0 0 0 3px rgba(255,255,255,.25);font-weight:800}
.testepill.on::before{content:'● '}
.abas{display:flex;gap:2px;margin-top:14px}
.abas button{flex:1;background:transparent;border:0;border-bottom:3px solid transparent;
color:rgba(255,255,255,.72);padding:12px 6px;font-size:14px;font-family:inherit;
font-weight:600;cursor:pointer;letter-spacing:.2px}
.abas button.on{color:#fff;border-bottom-color:#fff}
main{padding:16px 14px}
/* ---------- tela grande ----------
O cartao da fila continua do tamanho que esta. Ele e superficie de
foco, um contato por vez, e linha de texto longa demais cansa a
leitura. O espaco que sobra no computador vira coluna de apoio, com
o que a pessoa precisa olhar sem sair do lugar.
Tudo aqui dentro so vale a partir de 900px. No celular nada muda,
e a equipe alterna entre os dois o dia inteiro. */
.lado{display:none}
@media (min-width: 900px){
body{max-width:1180px}
main{padding:20px 18px 40px}
#v_fila{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);
gap:18px;align-items:start}
.lado{display:block;position:sticky;top:calc(var(--h-topo,120px) + 18px)}
.lado .painel{margin-bottom:12px}
.lado .msg{white-space:pre-wrap;font-size:14px;line-height:1.6;color:var(--tinta-media);
max-height:340px;overflow:auto}
.lado .prox{display:flex;flex-direction:column;gap:2px}
.lado .prox .p{display:flex;align-items:baseline;gap:8px;padding:8px 0;
border-top:1px solid var(--linha);font-size:14px}
.lado .prox .p:first-child{border-top:0}
.lado .prox .n{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lado .prox .o{color:var(--tinta-fraca);font-size:12px;font-variant-numeric:tabular-nums}
.grade{display:grid;grid-template-columns:1fr 1fr;gap:11px;align-items:start}
/* Duas colunas com destino certo: ranking de bairros a esquerda,
os outros paineis a direita. O buraco que sobrava embaixo do
ranking e resolvido no JS, em encherBairros, que mede a coluna
vizinha e mostra quantos bairros couberem. Mapa e ritmo ficam
fora das colunas, atravessando a tela. */
/* Duas colunas com destino certo: ranking de bairros a esquerda,
resposta e sinais a direita. Cada uma tem a altura do proprio
conteudo.
Quem fecha o vao ate o painel de largura inteira que vem depois
e encherBairros(): o ranking e a peca elastica, e ele mostra
tantos bairros quantos couberem na altura da coluna vizinha.
Ja tentei esticar o ultimo painel para ocupar a sobra. Fica pior:
um cartao branco alto e vazio chama mais atencao que o vao. */
.duplas{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.duplas > div > .painel:last-child{margin-bottom:0}
.kpis{grid-template-columns:repeat(6,1fr)}
.tab{font-size:13.5px}
}
/* ---------- cartoes ---------- */
.card{background:var(--papel);border-radius:var(--raio);padding:20px 18px;
box-shadow:var(--sombra);margin-bottom:14px}
.card.c{text-align:center}
.card h3{font-size:16.5px;font-weight:700;letter-spacing:-.2px}
.pos{color:var(--tinta-fraca);font-size:12.5px;letter-spacing:.3px;text-transform:uppercase;font-weight:600}
.nome{font-size:31px;font-weight:800;line-height:1.1;margin:6px 0 4px;
word-break:break-word;letter-spacing:-.8px}
.tel{color:var(--tinta-media);font-size:14px;margin-bottom:16px;font-variant-numeric:tabular-nums}
/* ---------- botoes ---------- */
.enviar{display:block;background:var(--verde-zap);color:#fff;text-decoration:none;font-size:18px;
font-weight:700;padding:18px 14px;border-radius:var(--raio);border:0;width:100%;
cursor:pointer;box-shadow:0 3px 0 var(--verde-zap-esc);font-family:inherit;
letter-spacing:.2px;transition:transform .06s}
.enviar:active{transform:translateY(2px);box-shadow:0 1px 0 var(--verde-zap-esc)}
.enviar + .enviar{margin-top:10px}
/* A caixinha some quando a etapa e feita e da lugar ao visto, para o
cartao mostrar de longe o que ja saiu e o que falta. */
.enviar .cx{display:inline-block;width:19px;height:19px;border-radius:6px;
border:2px solid rgba(255,255,255,.65);margin-right:9px;
vertical-align:-3px;font-size:14px;line-height:16px;text-align:center;
font-weight:700}
.enviar.feito{opacity:.5;box-shadow:none}
.enviar.feito .cx{background:#fff;color:#17703c;border-color:#fff}
.linha{display:flex;gap:9px;margin-top:10px}
.linha button{flex:1;padding:13px 8px;border-radius:11px;border:1.5px solid var(--linha);
background:var(--papel);font-size:14px;font-family:inherit;color:var(--tinta-media);
cursor:pointer;font-weight:600}
/* ---------- previa da mensagem ---------- */
.previa{margin-top:14px;text-align:left;background:var(--fundo);border:1px solid var(--linha);
border-radius:12px;padding:13px 14px;font-size:13.5px;line-height:1.55;white-space:pre-wrap;
color:var(--tinta-media);max-height:110px;overflow:hidden}
.previa.aberta{max-height:none}
.chipbadge{display:inline-block;background:#eef3fb;color:var(--azul);border-radius:20px;
padding:4px 12px;font-size:12px;font-weight:700;margin:0 3px 12px;letter-spacing:.2px}
.vnum{display:inline-block;background:#e8e9ec;color:var(--tinta-media);border-radius:5px;
padding:2px 7px;font-size:11px;margin-bottom:7px;font-weight:600;letter-spacing:.3px}
/* ---------- avisos ---------- */
.aviso{background:var(--ambar-fundo);border:1px solid #f0dca8;color:#6b4a08;border-radius:12px;
padding:13px 15px;font-size:13.5px;line-height:1.55;margin-bottom:14px}
.erro{background:var(--perigo-suave);border:1px solid var(--perigo-linha);color:var(--perigo-forte);border-radius:12px;
padding:13px 15px;font-size:13.5px;margin-bottom:14px;line-height:1.55}
.retomar-contato{margin:0 0 var(--espaco-3);padding:var(--espaco-3);
border:1px solid var(--linha-forte);border-radius:var(--raio-2);
background:var(--cor-info-suave);box-shadow:var(--sombra-1)}
.retomar-contato b{display:block;color:var(--tinta-forte);font:var(--texto-corpo);font-weight:600}
.retomar-contato p{margin:var(--espaco-1) 0 0;color:var(--tinta-media);font:var(--texto-apoio)}
.retomar-contato__acoes{display:flex;gap:var(--espaco-2);margin-top:var(--espaco-2)}
.fim{text-align:center;padding:40px 16px}
.fim .ok{font-size:46px}
/* ---------- campos ----------
Dica e erro são texto, não só cor. O estado inválido deve apontar para
uma .campo__erro por aria-describedby/aria-errormessage. Carregamento
usa aria-busy e textura, para continuar perceptível sem depender da cor. */
.campo__rotulo{display:block;margin:var(--espaco-4) 0 var(--espaco-1);
color:var(--tinta-media);font:var(--texto-apoio);font-weight:600}
.campo.campo{width:100%;min-height:var(--alvo-toque);padding:var(--espaco-3);
border:1px solid var(--linha-forte);border-radius:var(--raio-1);
background-color:var(--papel);color:var(--tinta-forte);
font:var(--texto-grande);font-family:var(--fonte);
transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease}
.campo.campo:focus{outline:none;border-color:var(--cor-azul)}
.campo.campo:focus-visible{box-shadow:var(--anel-foco)}
.campo.campo:active:not(:disabled):not([aria-disabled="true"]){
border-color:var(--linha-forte);box-shadow:inset var(--sombra-1)}
.campo.campo:disabled,.campo.campo[aria-disabled="true"]{
background-color:var(--fundo);color:var(--tinta-media);cursor:not-allowed;opacity:.65}
.campo.campo[aria-invalid="true"]{border-color:var(--perigo);border-width:2px}
.campo.campo--carregando,.campo.campo[aria-busy="true"]{
cursor:progress;background-image:repeating-linear-gradient(135deg,transparent 0,
transparent var(--espaco-2),var(--cor-info-suave) var(--espaco-2),
var(--cor-info-suave) var(--espaco-4));background-size:200% 100%;
animation:campo-carregando 1.2s linear infinite}
.campo--texto-longo{min-height:calc(var(--espaco-6) * 4);resize:vertical}
.campo--separado{margin:var(--espaco-2) 0}
.campo--arquivo{padding:var(--espaco-2)}
.campo--arquivo::file-selector-button{min-height:var(--alvo-toque);margin-right:var(--espaco-3);
padding:var(--espaco-2) var(--espaco-3);border:1px solid var(--linha-forte);
border-radius:var(--raio-1);background:var(--fundo);color:var(--tinta-forte);
font:var(--texto-apoio);font-weight:600;cursor:pointer}
.campo--arquivo::file-selector-button:active{transform:translateY(1px);background:var(--linha)}
.campo--arquivo:disabled::file-selector-button{cursor:not-allowed}
/* .ajuda e o nome antigo da mesma coisa. A regra anterior era
`.passo .ajuda` e saiu na troca por .campo__dica, mas 18 usos
continuam na marcacao e ficaram sem estilo nenhum. Alias em vez de
regra duplicada: um lugar so para mudar. Pode sair quando os 18
virarem campo__dica. */
.campo__dica,
.ajuda{margin:var(--espaco-1) 0 var(--espaco-3);color:var(--tinta-media);
font:var(--texto-apoio)}
.campo__erro{display:flex;gap:var(--espaco-2);align-items:flex-start;
margin:var(--espaco-1) 0 var(--espaco-3);padding:var(--espaco-2);
border:1px solid var(--perigo);border-radius:var(--raio-1);
background:var(--perigo-suave);color:var(--perigo-pressionada);
font:var(--texto-apoio);font-weight:600}
.campo__erro::before{content:"⚠";flex:none;font-weight:700}
.campo-check{display:flex;align-items:flex-start;gap:var(--espaco-2);
min-height:var(--alvo-toque);margin:var(--espaco-4) 0 var(--espaco-1);
padding:var(--espaco-2);border-radius:var(--raio-1);
color:var(--tinta-forte);font:var(--texto-corpo);cursor:pointer}
.campo-check:focus-within{box-shadow:var(--anel-foco)}
.campo-check:active:not([aria-disabled="true"]){background:var(--fundo)}
.campo-check[aria-disabled="true"]{color:var(--tinta-media);cursor:not-allowed;opacity:.65}
.campo-check--carregando,.campo-check[aria-busy="true"]{cursor:progress;
background:repeating-linear-gradient(135deg,transparent 0,transparent var(--espaco-2),
var(--cor-info-suave) var(--espaco-2),var(--cor-info-suave) var(--espaco-4))}
.campo-check__controle{flex:none;width:20px;height:20px;margin:1px 0 0;
accent-color:var(--cor-marca);cursor:pointer}
.campo-check__controle:focus-visible{outline:none}
.campo-check__controle:active:not(:disabled){transform:scale(.94)}
.campo-check__controle:disabled{cursor:not-allowed;opacity:.65}
.campo-check:has(.campo-check__controle:disabled){cursor:not-allowed;opacity:.65}
@media (max-width:619px){
.campo.campo,.campo-check{min-height:var(--alvo-toque-celular)}
.campo--arquivo::file-selector-button{min-height:var(--alvo-toque-celular)}
}
@media (prefers-reduced-motion:reduce){
.campo.campo--carregando,.campo.campo[aria-busy="true"]{animation:none}
}
@keyframes campo-carregando{to{background-position:-200% 0}}
.dupla{display:flex;gap:10px}.dupla>div{flex:1}
/* ---------- entrada ---------- */
#login{padding:0;max-width:420px;margin:0 auto}
.login-topo{background:var(--vermelho);color:#fff;
padding:calc(34px + env(safe-area-inset-top)) 24px 30px;text-align:center;
border-radius:0 0 22px 22px}
.login-topo .sigla{width:56px;height:56px;border-radius:15px;margin:0 auto 14px;font-size:24px}
/* Logo do mandato: placa clara, porque o logo pode ter qualquer cor e o
topo tem a cor da marca; e largura livre, porque logo raramente e
quadrado. A altura segue a do selo de letras. */
.sigla--logo{background:#fff;width:auto;max-width:100%;padding:4px 8px}
.sigla--logo img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain}
.marca .sigla--logo{width:auto;max-width:96px;padding:3px 6px}
.login-topo .sigla--logo{width:fit-content;height:84px;max-width:240px;padding:10px 16px}
.login-topo h2{font-size:22px;margin:0;font-weight:800;letter-spacing:-.4px}
.login-topo p{margin:6px 0 0;font-size:13.5px;opacity:.85;line-height:1.5}
.login-corpo{padding:24px}
/* ---------- campanhas ---------- */
.campanha{background:var(--papel);border-radius:var(--raio);padding:16px;margin-bottom:11px;
box-shadow:var(--sombra);cursor:pointer;border-left:4px solid transparent}
.campanha:active{background:var(--fundo)}
.campanha h3{margin:0 0 4px;font-size:16.5px;font-weight:700}
.campanha .meta{color:var(--tinta-media);font-size:12.5px;line-height:1.65}
.selo{display:inline-block;border-radius:20px;padding:3px 10px;font-size:11px;font-weight:700;
margin-left:7px;letter-spacing:.3px;text-transform:uppercase}
.s-ativa{background:#dcf3d4;color:#256320}
.s-rascunho{background:#ececf0;color:var(--tinta-media)}
.s-encerrada{background:var(--perigo-suave);color:var(--perigo-forte)}
/* Arquivada e um estado calado: cinza, sem chamar atencao. */
.s-arquivada{background:#ececf0;color:var(--tinta-media)}
.s-aprovada{background:#dcf3d4;color:#256320}
.s-em_aprovacao{background:var(--ambar-fundo);color:var(--cor-atencao-forte)}
.s-recusada{background:var(--perigo-suave);color:var(--perigo-forte)}
.varbox{border:1px solid var(--linha);border-radius:12px;padding:14px;margin-bottom:11px;
background:#fbfbfc}
.vartxt{white-space:pre-wrap;font-size:13.5px;line-height:1.55;color:var(--tinta-media);margin:9px 0}
.obs{background:var(--ambar-fundo);border-radius:9px;padding:9px 11px;font-size:12.5px;
color:var(--cor-atencao-forte);margin-top:7px;line-height:1.5}
.midia{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--linha);
font-size:14px}
.midia:last-child{border-bottom:0}
.midia .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
/* ---------- Equipe ----------
Três peças: a faixa da campanha, que gruda no topo; a saúde dos
chips, calada quando não há o que dizer; e uma linha por pessoa,
que abre para dentro quando a coordenação vai distribuir.
A linha de pessoa carrega muito mais que uma linha de mídia: nome,
cargo, papel de acesso, aparelho na mão, lote por chip, cadastro e
até cinco botões. Ela deixou de ser .midia por isso — numa faixa
só, no celular, os botões roubavam a largura e o overflow:hidden
cortava o resto ("COLA" no lugar de "COLABORADORA"). */
/* A campanha manda em tudo que vem abaixo e precisa continuar visível
enquanto a coordenação rola até a quinta pessoa. Ela gruda embaixo
das subabas, que já grudam embaixo do topo. */
.eq-faixa{position:sticky;top:calc(var(--h-topo,120px) + var(--h-subabas,0px));z-index:8;
display:flex;align-items:center;gap:var(--espaco-3);flex-wrap:wrap;
background:var(--fundo);padding:var(--espaco-2) 0 var(--espaco-3);
margin:0 0 var(--espaco-3);border-bottom:1px solid var(--linha)}
.eq-faixa__rotulo{flex:0 0 auto;font:var(--texto-etiqueta);
letter-spacing:var(--etiqueta-espacamento);text-transform:uppercase;
color:var(--tinta-fraca)}
.eq-faixa__nome{flex:1 1 auto;min-width:0;font:var(--texto-corpo);font-weight:700;
color:var(--tinta-forte)}
.eq-faixa__unica{flex:0 0 auto;font:var(--texto-etiqueta);color:var(--tinta-fraca)}
.eq-faixa .campo.campo{flex:1 1 240px;width:auto;min-width:0;margin:0}
/* Tudo em ordem: uma linha, e não um cartão na frente da lista. */
.saude-calma{display:flex;align-items:center;gap:var(--espaco-2);flex-wrap:wrap;
background:var(--papel);border-radius:var(--raio-2);box-shadow:var(--sombra-1);
padding:var(--espaco-2) var(--espaco-4);margin:0 0 var(--espaco-3);
font:var(--texto-apoio);color:var(--tinta-media)}
.saude-calma__ok{color:var(--cor-envio-forte);font-size:15px;line-height:1}
.saude-calma__grupo{margin-left:auto;display:flex;gap:var(--espaco-2);flex-wrap:wrap}
.saude-calma .botao.botao{width:auto;margin:0}
.eq-pessoa{border-top:1px solid var(--linha);padding:var(--espaco-4) 0}
.eq-pessoa:first-child{border-top:0;padding-top:var(--espaco-1)}
/* A pessoa aberta sai do papel branco do cartão e ganha a borda azul
da distribuição — a mesma cor do resumo e do botão que fecham o
gesto. Diz "é aqui que você está mexendo" sem precisar de rótulo. */
.eq-pessoa--aberta{background:var(--fundo);border-top-color:transparent;
border-left:3px solid var(--cor-azul);border-radius:var(--raio-2);
padding:var(--espaco-4) var(--espaco-4);
margin:var(--espaco-3) calc(var(--espaco-4) * -1)}
.eq-pessoa__quem{display:flex;align-items:baseline;gap:var(--espaco-1);flex-wrap:wrap}
.eq-pessoa__quem b{font:var(--texto-grande);font-weight:700;color:var(--tinta-forte)}
.eq-acesso{font:var(--texto-etiqueta);color:var(--tinta-fraca)}
/* O aparelho na mão é a informação que evita o pior erro do sistema.
Peso 700 e cor do próprio chip: nunca vira legenda. */
.eq-mao{font:var(--texto-apoio);font-weight:700;margin-top:var(--espaco-1)}
.eq-mao--sem{color:var(--perigo)}
.eq-desde{color:var(--tinta-fraca);font-weight:400}
.eq-lote{font:var(--texto-apoio);color:var(--tinta-fraca);margin-top:2px;
font-variant-numeric:tabular-nums}
.eq-lote b{color:var(--tinta-media)}
.eq-acoes{display:flex;align-items:center;flex-wrap:wrap;gap:var(--espaco-2);
margin-top:var(--espaco-3)}
.eq-acoes .botao.botao{width:auto;margin:0}
.eq-distribuir.eq-distribuir{background:var(--cor-azul)}
.eq-abre{margin-top:var(--espaco-4);padding-top:var(--espaco-4);
border-top:1px solid var(--linha-forte)}
/* O botão diz para quem, por qual aparelho e em qual campanha. Duas
linhas, porque a campanha é a que não pode ser cortada. */
.botao.eq-go{flex-direction:column;gap:2px;line-height:1.3;
padding-top:var(--espaco-3);padding-bottom:var(--espaco-3)}
.eq-go small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
font-size:12px;font-weight:600;opacity:.9}
/* ---------- editor de texto com variaveis ----------
Os marcadores entre chaves ({primeiro_nome}, {bairro}, {data_evento})
sao trocados pelo banco na hora de montar a fila, pela migracao 89.
Aqui a tela so ajuda a escrever e mostra como vai sair. */
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.tagbtn{background:#eef3fb;color:var(--azul);border:1px solid #cddcf0;border-radius:8px;
padding:6px 10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:12.5px;font-weight:600;cursor:pointer;letter-spacing:-.2px}
.tagbtn:active{background:#dbe7f6}
.tagbtn.extra{background:var(--ambar-fundo);color:var(--cor-atencao-forte);border-color:#f0dca8}
/* A previa imita a bolha do WhatsApp de proposito. Quem escreve precisa
ver a mensagem no formato em que ela vai ser lida, nao num campo de
formulario: linha quebrada, emoji, tamanho real do texto. */
.zapwrap{margin-top:14px;border:1px solid var(--linha);border-radius:12px;overflow:hidden}
.zaphead{background:#f4f5f7;color:var(--tinta-fraca);font-size:11.5px;font-weight:700;
letter-spacing:.4px;text-transform:uppercase;padding:8px 12px;
border-bottom:1px solid var(--linha)}
.zapfundo{background:#e7ded3;padding:14px 12px;display:flex;justify-content:flex-end}
.zapbolha{background:#d9fdd3;color:#111b21;border-radius:12px 2px 12px 12px;
padding:9px 11px 7px;max-width:88%;font-size:14.5px;line-height:1.5;
white-space:pre-wrap;word-break:break-word;box-shadow:0 1px 1px rgba(11,20,26,.13);
position:relative}
.zapbolha.vazio{background:#fff;color:var(--tinta-fraca);font-style:italic}
.zapbolha .hora{display:block;text-align:right;font-size:10.5px;color:#5b6b74;margin-top:3px}
.zappe{font-size:12px;color:var(--tinta-fraca);padding:9px 12px;line-height:1.5;
border-top:1px solid var(--linha);background:var(--papel)}
/* Valores fixos da campanha: {data_evento}, {hora}, o que a coordenacao
inventar no texto. A tela le o texto e cria o campo sozinha. */
.varlinha{display:flex;gap:8px;align-items:center;margin-top:8px}
.varlinha .k{flex:none;min-width:120px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:12.5px;color:var(--azul);font-weight:600}
.varlinha .campo{margin:0}
/* ---------- anexo do comunicado, na fila ---------- */
.anexo{background:var(--fundo);border:1px solid var(--linha);border-radius:12px;
padding:12px;margin:14px 0 10px;text-align:center}
.anexo img{width:100%;max-height:190px;object-fit:contain;border-radius:9px;
background:#fff;display:block}
.anexo .semimg{padding:26px 0;font-size:20px;color:var(--tinta-media)}
.anexo .diz{font-size:12.5px;color:var(--tinta-media);line-height:1.5;margin:9px 0 0;text-align:left}
.anexo .botao--secundario{margin-top:var(--espaco-3)}
/* ---------- disparo de urgencia ---------- */
.urgtrilha{display:flex;gap:6px;margin:0 0 16px}
.urgtrilha .p{flex:1;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
color:var(--tinta-fraca);border-top:3px solid var(--linha);padding-top:7px;
line-height:1.3}
.urgtrilha .p.on{color:var(--vermelho);border-top-color:var(--vermelho)}
.urgtrilha .p.feito{color:#256320;border-top-color:#7ac47f}
/* ---------- passos e filtros ---------- */
.passo{border-top:1px solid var(--linha);margin-top:20px;padding-top:18px}
.passo:first-of-type{border-top:0;margin-top:0;padding-top:0}
.passo h4{margin:0 0 3px;font-size:15px;font-weight:700}
.opts{display:flex;gap:8px;flex-wrap:wrap}
.opt{display:inline-flex;align-items:center;gap:7px;background:var(--papel);
border:1.5px solid var(--linha);border-radius:11px;padding:10px 13px;font-size:14.5px;
font-family:inherit;color:var(--tinta-media);cursor:pointer;font-weight:600}
.opt .qt{background:#eceef1;color:var(--tinta-media);border-radius:20px;padding:2px 9px;
font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.opt.sel{background:var(--azul);border-color:var(--azul);color:#fff}
.opt.sel .qt{background:rgba(255,255,255,.25);color:#fff}
/* "não é": exclusão. Vermelho e riscado porque ela subtrai da
audiência, ao contrário de todo o resto desta tela, que soma. */
.opt.nao{background:var(--perigo-forte);border-color:var(--perigo-forte);color:#fff;text-decoration:line-through}
.opt.nao .qt{background:rgba(255,255,255,.25);color:#fff;text-decoration:none}
.opt.vazio{opacity:.4}
.opt:disabled{cursor:not-allowed}
/* O bloco de filtros opcionais, fechado por padrão. */
.maisf{width:100%;text-align:left;background:var(--papel);border:1.5px dashed var(--linha);
border-radius:11px;padding:11px 13px;font-size:14px;font-family:inherit;
font-weight:600;color:var(--tinta-media);cursor:pointer;margin-bottom:14px}
.maisf b{color:var(--azul)}
.lista-filtros{max-height:280px;overflow:auto;padding:2px 3px 3px 0}
/* O que acabou de chegar. Cada linha e um sinal: quem, o que fez, em
qual campanha caiu e quando. A campanha e a coluna que ninguem
conseguia ver e que resolve o "sumiu meu registro". */
/* O filtro do painel da direcao.
Era uma fileira de baloes que ocupava tres linhas para dizer uma
coisa so. Agora e uma barra de selecao: mesma escolha, uma linha,
colada na tabela que ela governa. */
.dirfiltro{margin:0 0 12px}
.dirfiltro .campo{width:auto;min-width:220px;max-width:100%;padding:var(--espaco-2) var(--espaco-3);
font:var(--texto-apoio);font-weight:600}
.sinais{max-height:340px;overflow:auto;margin:0 -2px}
.sinal{display:grid;grid-template-columns:1fr auto;gap:1px 10px;
padding:9px 2px;border-bottom:1px solid var(--linha)}
.sinal:last-child{border-bottom:0}
.sinal .q{font-size:13.5px;font-weight:700}
.sinal .h{font-size:12px;color:var(--tinta-fraca);text-align:right;
font-variant-numeric:tabular-nums;grid-row:1}
.sinal .p{font-size:12.5px;color:var(--tinta-media)}
.sinal .c{font-size:12px;color:var(--tinta-fraca);grid-column:1/-1;line-height:1.35}
/* Cartao de campanha anterior. Cada campanha e um bloco; os publicos
dela (confirmou / recebeu / entrou no lote) sao botoes dentro dele.
Antes eram tres linhas soltas com o mesmo nome e numeros diferentes,
o que so dava para entender clicando. */
.pubcard{border:1.5px solid var(--linha);border-radius:12px;padding:12px 13px;
margin-bottom:9px;background:var(--papel)}
.pubcard.ativo{border-color:var(--azul);background:#f6f9ff}
.pubcard h5{margin:0;font-size:14.5px;font-weight:700;line-height:1.35;color:var(--tinta)}
.pubcard .meta{margin:3px 0 9px;font-size:12px;color:var(--tinta-fraca)}
.pubcard .opts{gap:6px}
.pubcard .opt{padding:7px 11px;font-size:13.5px;border-radius:9px}
.pubcard .opt .qt{padding:2px 8px;font-size:12px}
.pubcard .erro{margin:10px 0 0;font-size:13px}
.resumo{background:#eef3fb;border:1px solid #cddcf0;border-radius:12px;padding:16px;margin-top:18px}
.resumo .n{font-size:28px;font-weight:800;color:var(--azul);line-height:1.05;letter-spacing:-.6px}
.resumo .d{font-size:13px;color:#3d5f88;margin-top:5px;line-height:1.5}
.resumo.zero{background:var(--perigo-suave);border-color:var(--perigo-linha)}
.resumo.zero .n,.resumo.zero .d{color:var(--perigo-forte)}
.buscabairro{margin-bottom:10px}
.limpar{background:none;border:0;color:var(--azul);font-size:13px;text-decoration:underline;
cursor:pointer;font-family:inherit;padding:5px 0;font-weight:600}
/* ---------- modo teste ---------- */
/* O voltar rolava junto com a pagina. Nas telas longas, campanha e
equipe, a pessoa tinha que subir tudo de novo para sair. Agora ele
gruda logo abaixo do cabecalho, que tambem e fixo: a altura do
cabecalho e medida no navegador e guardada em --h-topo, senao um
ficaria por cima do outro. */
/* ---------- o chip, que nunca pode ser confundido ----------
Disparar pelo aparelho errado queima o chip e entrega mensagem em
nome de um numero que a pessoa nao conhece. Por isso o chip aparece
em faixa fixa, com cor propria, no botao de enviar, e com uma parada
obrigatoria toda vez que a fila troca de aparelho. */
.faixachip{position:sticky;top:var(--h-topo,120px);z-index:9;
display:flex;align-items:center;gap:10px;
padding:11px 14px;border-radius:12px;margin-bottom:12px;
color:#fff;font-weight:800;letter-spacing:.3px;
box-shadow:0 2px 10px rgba(20,22,26,.14)}
.faixachip .qual{font-size:19px;line-height:1.1}
.faixachip .diz{font-size:12px;font-weight:600;opacity:.9;line-height:1.3}
.faixachip .quantos{margin-left:auto;font-size:12px;font-weight:600;opacity:.9;
text-align:right;white-space:nowrap}
.trocachip{background:var(--papel);border-radius:var(--raio);padding:26px 20px;
text-align:center;box-shadow:var(--sombra)}
.trocachip .de{font-size:13.5px;color:var(--tinta-fraca)}
.trocachip .para{font-size:30px;font-weight:800;letter-spacing:-.5px;margin:8px 0 2px}
.trocachip p{font-size:14.5px;color:var(--tinta-media);line-height:1.55;margin:12px 0 0}
.trocachip .botao--primario{margin-top:var(--espaco-4)}
/* Onde ela diz qual aparelho esta na mao quando a fila esta vazia.
Sem isto, quem ainda nao tem lote nao tem como confirmar o chip - e
sem chip confirmado a coordenacao nao consegue mandar lote (101). */
.declarachip{border-top:1px solid var(--linha);margin-top:22px;padding-top:18px;text-align:left}
.declarachip h4{margin:0 0 4px;font-size:15px}
.declarachip p{font-size:13px;color:var(--tinta-fraca);margin:0 0 11px;line-height:1.5}
.declarachip .opts{justify-content:flex-start}
.chipgrande{display:inline-flex;align-items:center;gap:7px;color:#fff;
border-radius:20px;padding:6px 14px;font-size:14px;font-weight:800;
letter-spacing:.3px;margin:2px 0 10px}
/* ---------- painéis da direção ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px;margin-bottom:14px}
.kpi{background:var(--papel);border-radius:12px;padding:13px 14px;box-shadow:var(--sombra)}
.kpi b{display:block;font-size:25px;letter-spacing:-.6px;line-height:1.15}
.kpi span{display:block;font-size:12.5px;color:var(--tinta-fraca);margin-top:2px;line-height:1.35}
.kpi small{display:block;font-size:12px;color:var(--tinta-media);margin-top:5px}
.painel{background:var(--papel);border-radius:var(--raio);padding:16px;
margin-bottom:12px;box-shadow:var(--sombra)}
.painel h3{margin:0 0 3px;font-size:15.5px;font-weight:700}
.painel .exp{margin:0 0 12px;font-size:12.5px;color:var(--tinta-fraca);line-height:1.5}
.mapa svg{width:100%;height:auto;display:block}
/* O MAPA CABE NA TELA (12/09/2026).
No celular a coluna e estreita e o mapa sempre coube -- e por isso que
o defeito passou. Na tela larga o painel tem 1180px, e a altura do
desenho e consequencia do formato do territorio: Minas, quase
quadrada, passava dos 900px; Belo Horizonte, comprida de norte a sul,
passaria dos 1600. Mais que a janela de qualquer notebook, e ai o mapa
so podia ser visto pela metade.
O limite e de LARGURA, calculado da proporcao do desenho, e nao de
altura: assim o mapa e a legenda -- que moram na mesma caixa --
encolhem juntos, em vez de o desenho sobrar dentro de uma caixa larga.
A proporcao chega em --mapa-proporcao, posta por pintarPoligonos().
O 99 do fallback e a caixa que ainda nao desenhou (ou que desenhou uma
mensagem de erro): sem proporcao conhecida ela nao deve encolher. */
@media (min-width: 900px){
.mapa{max-width:calc(var(--mapa-proporcao, 99) * 62vh);margin-inline:auto}
}
.mapa path{stroke:#fff;stroke-width:.6;cursor:pointer}
.mapa path:hover{stroke:#16171a;stroke-width:1.4}
.legenda{display:flex;align-items:center;gap:7px;font-size:11.5px;
color:var(--tinta-fraca);margin-top:9px}
.legenda i{width:22px;height:11px;border-radius:2px;display:inline-block}
.detalhe{background:var(--vermelho-claro);border-radius:10px;padding:11px 13px;
font-size:13.5px;line-height:1.55;margin-top:10px;
color:var(--cor-marca-pressionada);min-height:20px}
/* A CAPITAL, SEMPRE EM DESTAQUE (pedido de 11/09/2026). Num estado de 853
municipios ela virava um poligono pequeno entre outros, e podia ficar
fora do ranking. No mapa: contorno escuro, desenhada por ultimo para o
vizinho nao cobrir a borda, e ponto e nome que nao roubam o toque. No
painel: linha propria, e a linha do ranking marcada. */
.mapa path.capital{stroke:#16171a;stroke-width:2.4}
.mapa .capital-ponto{fill:var(--cor-marca-pressionada);stroke:#fff;stroke-width:2.5;
pointer-events:none}
.mapa .capital-rotulo{font-size:22px;font-weight:700;fill:var(--cor-marca-pressionada);
paint-order:stroke;stroke:#fff;stroke-width:6px;stroke-linejoin:round;
pointer-events:none}
.legenda .capital-legenda{display:inline-flex;align-items:center;gap:5px;font-weight:600;
color:var(--cor-marca-pressionada)}
.legenda .capital-legenda i{width:10px;height:10px;border-radius:50%;
background:var(--cor-marca-pressionada)}
.capital-destaque{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;
margin:10px 0 4px;padding:9px 12px;border-radius:10px;
background:var(--cor-marca-tenue);border-left:4px solid var(--cor-marca);
font-size:14.5px;line-height:1.4}
.capital-destaque__rotulo{font-size:11px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;color:var(--cor-marca-pressionada)}
.capital-destaque__dado{font-size:13px;color:var(--tinta-media)}
.barras .b--destaque .n{font-weight:700}
.barras .b--destaque .t{box-shadow:inset 3px 0 0 var(--cor-marca)}
.barras{display:flex;flex-direction:column;gap:7px}
.barras .b{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;
font-size:13.5px;line-height:1.3}
.barras .t{position:relative;background:var(--fundo);border-radius:6px;overflow:hidden;
padding:6px 8px;min-width:0}
/* O preenchimento da barra e DADO na cor do cliente, e nao alerta.
Estava cravado em #f6d3d3, um rosa que so fazia sentido enquanto a
marca era vermelha. Num mandato verde as barras saiam rosa, e o
TESTAR-CORES nao via, porque literal nao e token. */
.barras .f{position:absolute;left:0;top:0;bottom:0;background:var(--cor-marca-tenue)}
.barras .n{position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barras .q{font-variant-numeric:tabular-nums;color:var(--tinta-media);font-size:13px}
/* Tabela larga no celular: rola dentro da propria caixa, sem levar a
pagina junto. A borda pontilhada avisa que ainda tem coluna do lado;
sem ela a pessoa acha que a tabela acabou no "Vão". */
.tabwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
.tabwrap .tab{min-width:520px}
@media (min-width: 620px){ .tabwrap .tab{min-width:0} }
.tab{width:100%;border-collapse:collapse;font-size:13px}
.tab th{text-align:left;font-weight:600;color:var(--tinta-fraca);font-size:11.5px;
text-transform:uppercase;letter-spacing:.4px;padding:0 6px 7px 0;white-space:nowrap}
.tab td{padding:9px 6px 9px 0;border-top:1px solid var(--linha);
font-variant-numeric:tabular-nums;vertical-align:top}
.tab td:first-child{font-weight:600;color:var(--tinta);min-width:120px}
/* Coluna de número em tabela densa. Alinhada à direita e sem quebra,
para a comparação entre linhas acontecer pelo último dígito. */
.tab th.n,.tab td.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.prg{height:5px;background:var(--fundo);border-radius:3px;overflow:hidden;margin:5px 0 3px}
.prg>div{height:100%;background:var(--vermelho);border-radius:3px}
/* Tira de escolha: uma linha, sem cartao em volta. */
.tira{display:flex;align-items:center;gap:9px;background:var(--papel);
border:1.5px solid var(--vermelho);border-radius:11px;padding:7px 9px 7px 12px;
margin-bottom:12px;box-shadow:var(--sombra)}
.tira .rot{font-size:11px;letter-spacing:.5px;text-transform:uppercase;
color:var(--vermelho);font-weight:700;flex:none}
.tira .campo--integrado{flex:1;min-width:0;border:0;background:transparent;
font:var(--texto-corpo);font-weight:700;color:var(--tinta);
padding:var(--espaco-1) 2px;cursor:pointer;-webkit-appearance:menulist}
/* Campanha escolhida sem lote para a pessoa e o momento em que ela
mais precisa notar a barra: e daqui que ela sai do lugar errado. */
.tira.alerta{background:var(--ambar-fundo);border-color:#e8bf6a}
.tira.alerta .rot{color:var(--cor-atencao-forte)}
.tira.alerta .campo--integrado{color:#6b4a00}
.tira .ir{flex:none;background:var(--ambar);color:#fff;border:0;border-radius:9px;
padding:8px 12px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer}
/* ---------- os quatro destinos da coordenação ----------
Fileira única, sempre visível, grudada logo abaixo do cabeçalho. A
altura é fixa por decisão, e não medida no navegador: é dela que sai
o deslocamento do "voltar" nas telas longas, e um número que muda
sozinho faria os dois se sobreporem no meio da rolagem.
Fora do cabeçalho de propósito. O cabeçalho é o que muda de cor
inteiro no modo teste; deixar esta fileira lá dentro seria mais uma
peça para lembrar de repintar, e no celular ele já tem cinco linhas. */
#v_coord{--h-subabas:52px}
.subabas{position:sticky;top:var(--h-topo,120px);z-index:9;
display:flex;gap:var(--espaco-1);overflow-x:auto;
background:var(--fundo);padding:0 0 var(--espaco-2);
margin:0 0 var(--espaco-3)}
.subabas button{flex:1 0 auto;min-height:var(--alvo-toque);
background:var(--papel);border:1px solid var(--linha);
border-radius:var(--raio-3);color:var(--tinta-media);
font:var(--texto-apoio);font-family:inherit;font-weight:600;
padding:var(--espaco-2) var(--espaco-3);cursor:pointer;
white-space:nowrap}
.subabas button:focus-visible{outline:none;box-shadow:var(--anel-foco)}
.subabas button:active{background:var(--fundo)}
.subabas button.on{background:var(--cor-marca);border-color:var(--cor-marca);
color:var(--papel);font-weight:700}
/* ---------- as três etapas de uma campanha ----------
Escrever, escolher quem recebe, ver o que deu. Sublinhado, e não
pastilha: a fileira dos quatro destinos fica logo acima, e duas
fileiras de pastilha empilhadas não diriam qual manda em qual.
As etapas fechadas continuam no documento, com hidden. É isso que
permite carregarVariacoes, carregarMidias e as outras escreverem em
id fixo sem saber que existe gaveta. */
.etapas{display:flex;overflow-x:auto;margin:0 0 var(--espaco-4);
border-bottom:1px solid var(--linha)}
.etapas button{flex:1 0 auto;min-height:var(--alvo-toque);
background:none;border:0;border-bottom:3px solid transparent;
margin-bottom:-1px;color:var(--tinta-media);
font:var(--texto-corpo);font-family:inherit;font-weight:600;
padding:var(--espaco-2) var(--espaco-3);cursor:pointer;
white-space:nowrap}
.etapas button:focus-visible{outline:none;box-shadow:var(--anel-foco)}
.etapas button:active{color:var(--tinta-forte)}
.etapas button.on{color:var(--cor-marca);border-bottom-color:var(--cor-marca)}
/* ---------- Hoje ----------
Uma linha por campanha no ar e uma lista de pendências. Nada se
resolve só aqui: cada bloco leva ao lugar onde o trabalho é feito. */
.hoje-intro{font:var(--texto-apoio);color:var(--tinta-media);
margin:0 0 var(--espaco-3)}
.camp-linha{display:block;width:100%;text-align:left;background:var(--papel);
border:1px solid var(--linha);border-radius:var(--raio-2);
padding:var(--espaco-3);margin-bottom:var(--espaco-2);
min-height:var(--alvo-toque);font:var(--texto-corpo);
color:var(--tinta-forte);cursor:pointer}
.camp-linha:focus-visible{outline:none;box-shadow:var(--anel-foco)}
/* Na Operação a mesma linha é retrato, não porta: a colaboradora lê
o andamento, mas abrir a campanha é da coordenação. Sem cursor de
mãozinha e sem resposta ao toque, para não prometer clique. */
.camp-linha--parado{cursor:default}
.camp-linha--parado:active{background:var(--papel)}
.camp-linha:active{background:var(--fundo)}
.camp-linha__topo{display:flex;align-items:center;gap:var(--espaco-2);flex-wrap:wrap}
.camp-linha__nome{font:var(--texto-corpo);font-weight:700;flex:1;min-width:0}
.camp-linha__conta{display:block;font:var(--texto-apoio);color:var(--tinta-media)}
.barra-alcance{display:block;height:5px;background:var(--fundo);border-radius:var(--raio-1);
overflow:hidden;margin:var(--espaco-2) 0 var(--espaco-1)}
.barra-alcance i{display:block;height:100%;background:var(--cor-marca);
border-radius:var(--raio-1)}
/* Pendência. A gravidade vem escrita em palavra, não só na cor: quem
não distingue vermelho de âmbar precisa ler a mesma coisa. */
.pend{display:flex;gap:var(--espaco-3);align-items:flex-start;
border-top:1px solid var(--linha);padding:var(--espaco-3) 0}
.pend:first-of-type{border-top:0;padding-top:0}
.pend:last-of-type{padding-bottom:0}
.pend__sinal{flex:none;font:var(--texto-etiqueta);letter-spacing:var(--etiqueta-espacamento);
text-transform:uppercase;border-radius:var(--raio-3);
padding:var(--espaco-1) var(--espaco-2);margin-top:2px}
.pend--erro .pend__sinal{background:var(--perigo-suave);color:var(--perigo)}
.pend--atencao .pend__sinal{background:var(--cor-atencao-suave);color:var(--cor-atencao-forte)}
.pend__corpo{flex:1;min-width:0}
.pend__titulo{display:block;font:var(--texto-corpo);font-weight:600;color:var(--tinta-forte)}
.pend__detalhe{display:block;font:var(--texto-apoio);color:var(--tinta-media);
margin-top:var(--espaco-1)}
.pend__corpo .botao.botao{width:auto;margin-top:var(--espaco-2)}
.hoje-limpo{font:var(--texto-corpo);color:var(--cor-envio-forte);margin:0;font-weight:600}
.voltar{background:var(--fundo);border:0;color:var(--vermelho);font-size:15px;
font-family:inherit;cursor:pointer;font-weight:600;
position:sticky;top:calc(var(--h-topo,120px) + var(--h-subabas,0px));z-index:8;
display:block;width:100%;text-align:left;
margin:0 0 10px;padding:12px 0 11px;
border-bottom:1px solid var(--linha)}
.voltar:active{opacity:.6}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#16171a;color:#fff;
padding:13px 20px;border-radius:24px;font-size:14px;opacity:0;transition:.2s;
pointer-events:none;z-index:60;max-width:88%;text-align:center;line-height:1.45;
box-shadow:0 6px 20px rgba(0,0,0,.25)}
#toast.on{opacity:1}
/* ---------- botões ----------
A mesma base serve a botão e link com papel de botão. Estados de foco,
indisponibilidade e carregamento são explícitos: não dependem de cor para
comunicar o que está acontecendo. */
.botao.botao{appearance:none;display:inline-flex;align-items:center;justify-content:center;
gap:var(--espaco-2);min-height:var(--alvo-toque);box-sizing:border-box;
padding:var(--espaco-3) var(--espaco-4);border-radius:var(--raio-2);
border:1px solid transparent;font:var(--texto-corpo);font-weight:600;
line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;
transition:transform .12s ease,background .12s ease,box-shadow .12s ease,opacity .12s ease}
.botao.botao:focus-visible{outline:none;box-shadow:var(--anel-foco)}
.botao.botao:active:not(:disabled):not([aria-disabled="true"]){transform:translateY(1px)}
.botao.botao:disabled,.botao.botao[aria-disabled="true"]{opacity:.55;cursor:not-allowed;pointer-events:none}
.botao.botao--carregando,.botao.botao[aria-busy="true"]{cursor:progress}
.botao.botao--carregando::after,.botao.botao[aria-busy="true"]::after{content:"";width:1em;height:1em;
flex:none;border:2px solid currentColor;border-right-color:transparent;border-radius:var(--raio-3);
animation:botao-girar .7s linear infinite}
.botao.botao--primario{width:100%;margin-top:var(--espaco-3);background:var(--cor-marca);color:var(--papel);
box-shadow:var(--sombra-1)}
.botao.botao--primario:active:not(:disabled):not([aria-disabled="true"]){background:var(--cor-marca-pressionada);box-shadow:none}
.botao.botao--secundario{width:100%;margin-top:var(--espaco-3);background:var(--papel);border-color:var(--linha-forte);color:var(--tinta-forte)}
.botao.botao--secundario:active:not(:disabled):not([aria-disabled="true"]){background:var(--fundo)}
.botao.botao--escolha{flex-direction:column;align-items:flex-start;text-align:left}
.botao.botao--selecionado{background:var(--cor-envio-suave);border-color:var(--cor-envio-forte);color:var(--cor-envio-forte)}
.botao.botao--discreto{padding:var(--espaco-2);background:transparent;color:var(--cor-marca);text-decoration:underline}
.botao.botao--discreto:active:not(:disabled):not([aria-disabled="true"]){background:var(--cor-marca-suave)}
.botao.botao--destrutivo{width:100%;margin-top:var(--espaco-3);background:var(--perigo-pressionada);color:var(--papel)}
.botao.botao--destrutivo:active:not(:disabled):not([aria-disabled="true"]){background:var(--perigo)}
.botao.botao--destrutivo.botao--discreto{width:auto;margin-top:0;background:transparent;color:var(--perigo-pressionada)}
.botao.botao--neutro{width:100%;color:var(--tinta-media);text-decoration:none}
.botao.botao--bloco{width:100%}
.botao.botao--inverso{min-height:var(--alvo-toque);padding:var(--espaco-2) var(--espaco-3);border-color:rgba(255,255,255,.3);
border-radius:var(--raio-3);color:var(--papel);background:rgba(255,255,255,.14);text-decoration:none}
.botao.botao--inverso:active:not(:disabled):not([aria-disabled="true"]){background:rgba(255,255,255,.28)}
.retomar-contato__acoes .botao.botao{width:auto;margin-top:0;flex:1}
.link-pendente{display:flex;align-items:center;gap:var(--espaco-2);flex-wrap:wrap;
padding:var(--espaco-2) 0;border-top:1px solid var(--linha)}
.link-pendente__nome{flex:1;min-width:8rem}
.link-pendente__acoes{display:flex;justify-content:flex-end;gap:var(--espaco-2);flex-wrap:wrap}
.link-pendente__acoes .botao.botao{width:auto;margin-top:0}
@media (max-width:619px){.botao.botao{min-height:var(--alvo-toque-celular)}}
@keyframes botao-girar{to{transform:rotate(360deg)}}
/* Utilitários de espaçamento para marcação produzida pelo app. A classe
duplicada dá a mesma precedência que o estilo inline que ela substitui,
inclusive dentro dos modais. */
.u-mt-0.u-mt-0{margin-top:0}
.u-mb-1.u-mb-1{margin:0 0 var(--espaco-1)}
.u-m-0.u-m-0{margin:0}
.u-mt-3.u-mt-3{margin-top:var(--espaco-3)}
.u-mt-3-reset.u-mt-3-reset{margin:var(--espaco-3) 0 0}
.u-mt-4.u-mt-4{margin-top:var(--espaco-4)}
.u-mt-2.u-mt-2{margin-top:var(--espaco-2)}
.u-mt-2-reset.u-mt-2-reset{margin:var(--espaco-2) 0 0}
.u-mb-2.u-mb-2{margin:0 0 var(--espaco-2)}
.u-mb-3.u-mb-3{margin:0 0 var(--espaco-3)}
.u-mb-4.u-mb-4{margin:0 0 var(--espaco-4)}
.u-secao-topo.u-secao-topo{border-top:1px solid var(--linha);margin-top:var(--espaco-4);padding-top:var(--espaco-4)}
.u-secao-topo-compacta.u-secao-topo-compacta{border-top:1px solid var(--linha);margin-top:var(--espaco-2);padding-top:var(--espaco-3)}
.u-secao-topo-simples.u-secao-topo-simples{border-top:1px solid var(--linha);padding:var(--espaco-3) 0}
.u-fundo-azul.u-fundo-azul{background:var(--cor-azul)}
.u-fundo-azul-largura.u-fundo-azul-largura{background:var(--cor-azul);width:100%}
.u-fundo-teste.u-fundo-teste{background:var(--cor-teste)}
.u-fundo-envio.u-fundo-envio{background:var(--cor-envio-forte)}
.u-fundo-tinta-media.u-fundo-tinta-media{background:var(--tinta-media)}
.u-fundo-marca.u-fundo-marca{background:var(--cor-marca)}
.u-borda-marca-esquerda.u-borda-marca-esquerda{border-left:var(--espaco-1) solid var(--cor-marca)}
.u-flex-1.u-flex-1{flex:1}
.u-flex-1-min0.u-flex-1-min0{flex:1;min-width:0}
.u-ml-auto.u-ml-auto{margin-left:auto}
.u-opacidade-75.u-opacidade-75{opacity:.75}
.u-centro.u-centro{text-align:center}
.u-midia-bloco.u-midia-bloco{width:100%;height:auto;display:block}
.u-linha-flex-2.u-linha-flex-2{display:flex;gap:var(--espaco-2)}
.u-linha-flex-2-quebra.u-linha-flex-2-quebra{display:flex;align-items:center;gap:var(--espaco-2);flex-wrap:wrap}
.u-linha-flex-3.u-linha-flex-3{display:flex;align-items:center;gap:var(--espaco-3)}
.u-linha-flex-3-clicavel.u-linha-flex-3-clicavel{display:flex;gap:var(--espaco-3);align-items:flex-start;margin-top:var(--espaco-4);cursor:pointer}
.u-apoio.u-apoio{font:var(--texto-apoio);color:var(--tinta-media)}
.u-apoio-m0.u-apoio-m0{font:var(--texto-apoio);color:var(--tinta-media);margin:0}
.u-apoio-mt-2.u-apoio-mt-2{font:var(--texto-apoio);color:var(--tinta-media);margin:var(--espaco-2) 0 0}
.u-apoio-mb-3.u-apoio-mb-3{font:var(--texto-apoio);color:var(--tinta-media);margin:0 0 var(--espaco-3)}
.u-apoio-mb-2.u-apoio-mb-2{font:var(--texto-apoio);color:var(--tinta-media);margin:0 0 var(--espaco-2)}
.u-apoio-regular.u-apoio-regular{font-weight:400;color:var(--tinta-media)}
.u-apoio-nota.u-apoio-nota{font:var(--texto-apoio);color:var(--tinta-media);text-align:center;margin:var(--espaco-2) 0 0}
.u-tinta-media.u-tinta-media{color:var(--tinta-media)}
.u-envio-forte.u-envio-forte{color:var(--cor-envio-forte)}
.u-atencao-forte.u-atencao-forte{color:var(--cor-atencao-forte)}
.u-azul.u-azul{color:var(--cor-azul)}
.u-marca-escura.u-marca-escura{color:var(--cor-marca-pressionada)}
.u-link-apoio.u-link-apoio{display:inline-block;text-decoration:none;font:var(--texto-apoio)}
.u-peso-secao.u-peso-secao{font-weight:600}
.u-separador-y4.u-separador-y4{border:0;border-top:1px solid var(--linha);margin:var(--espaco-4) 0}
/* ============================================================
A FAIXA DE DEMONSTRACAO E A ASSINATURA DO PRODUTO
------------------------------------------------------------
As duas nascem desligadas. O mandato de origem nao ve nenhuma.
A faixa usa --atencao, e nao --perigo nem a marca do cliente: nao e
erro, e nao e identidade. E um aviso permanente de contexto, que e
exatamente para o que a familia de atencao existe.
============================================================ */
.faixa-demo{position:sticky;top:0;z-index:60;
background:var(--cor-atencao);color:#fff;
font:600 12px/1 var(--fonte);letter-spacing:.09em;
text-align:center;padding:7px 10px}
.assinatura-produto{display:flex;align-items:center;justify-content:center;
gap:var(--espaco-2);margin:var(--espaco-4) 0 0;
color:var(--produto-petroleo);font:600 12px/1.4 var(--fonte);
letter-spacing:.06em;text-transform:lowercase}
.assinatura-produto::before{content:'';width:20px;height:20px;flex:none;
border-radius:5px;background:url('favicon.svg') center/contain no-repeat}
/* ============================================================
CONVITE DE ACESSO, CADASTRAR A EQUIPE E GUIAS (v153)
============================================================ */
.acesso-ola{font-size:15.5px;line-height:1.5;margin:0 0 14px;color:var(--tinta-forte,#16171a)}
.acesso-nota{font-size:12.5px;color:var(--tinta-fraca,#8d9099);text-align:center;margin:16px 0 0;line-height:1.55}
#acessovoltar{margin-top:10px;width:100%}
.convite-link{display:block;width:100%;font:500 12.5px/1.45 var(--fonte-mono,ui-monospace,monospace);
background:var(--cor-info-suave,#eef3f9);border:1px solid var(--linha,#e4e6ea);border-radius:8px;
padding:10px 12px;word-break:break-all;margin:10px 0;color:var(--tinta-forte,#16171a)}
.convite-acoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.convite-acoes .botao{flex:1 1 160px;text-align:center;text-decoration:none}
.convites-lista{list-style:none;margin:12px 0 0;padding:0}
.convites-lista li{display:flex;align-items:center;gap:10px;padding:10px 0;
border-top:1px solid var(--linha,#e4e6ea);font-size:14px}
.convites-lista li:first-child{border-top:0}
.convite-sit{font:600 11px/1 var(--fonte,system-ui);letter-spacing:.04em;padding:5px 9px;border-radius:999px;
background:var(--fundo,#f4f5f7);color:var(--tinta-media,#5c5f66);white-space:nowrap}
.convite-sit--aguardando{background:var(--cor-atencao-suave,#fff8e6);color:var(--cor-atencao-forte,#7a5100)}
.convite-sit--usado{background:var(--cor-envio-suave,#eaf6ef);color:var(--cor-envio-forte,#157a41)}
.passos{list-style:none;margin:12px 0 0;padding:0}
.passos li{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:10px 0;
border-top:1px solid var(--linha,#e4e6ea)}
.passos li:first-child{border-top:0}
.passos .passo-n{width:26px;height:26px;border-radius:999px;display:flex;align-items:center;justify-content:center;
font:700 12px/1 var(--fonte,system-ui);background:var(--fundo,#f4f5f7);color:var(--tinta-media,#5c5f66)}
.passos li.feito .passo-n{background:var(--cor-envio-forte,#157a41);color:#fff}
.passos .passo-txt b{display:block;font-size:14.5px}
.passos .passo-txt span{display:block;font-size:12.5px;color:var(--tinta-fraca,#8d9099);line-height:1.45}
.passos li.feito .passo-txt b{color:var(--tinta-media,#5c5f66)}
.guia-veu{position:fixed;inset:0;z-index:90;background:rgba(20,22,26,.55)}
.guia-foco{position:fixed;z-index:91;border-radius:10px;pointer-events:none;
box-shadow:0 0 0 3px var(--papel,#fff),0 0 0 9999px rgba(20,22,26,.55);transition:all .25s ease}
.guia-cartao{position:fixed;z-index:92;left:50%;transform:translateX(-50%);
width:min(420px,calc(100vw - 24px));background:var(--papel,#fff);color:var(--tinta-forte,#16171a);
border-radius:14px;padding:18px 18px 14px;box-shadow:0 12px 36px rgba(20,22,26,.28)}
.guia-cartao h3{margin:0 0 6px;font-size:16.5px}
.guia-cartao p{margin:0;font-size:14.5px;line-height:1.55;color:var(--tinta-media,#5c5f66)}
.guia-rodape{display:flex;align-items:center;gap:8px;margin-top:14px}
.guia-conta{font-size:12px;color:var(--tinta-fraca,#8d9099);margin-right:auto}
@media (prefers-reduced-motion: reduce){.guia-foco{transition:none}}
/* ============================================================
FICHA DE CADASTRO DO MANDATO (v154)
Tela da Urdume, e nao do mandato: o petroleo e o do produto.
============================================================ */
#cadastroview{min-height:100vh;background:var(--fundo,#f4f5f7)}
.cad{max-width:760px;margin:0 auto;padding:24px 16px 56px}
.cad-topo{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.cad-topo svg{width:38px;height:38px;border-radius:9px;flex:none}
.cad-topo b{font-size:17px;color:#0f5150}
.cad-topo span{display:block;font-size:12.5px;color:var(--tinta-fraca,#8d9099)}
.cad h1{font-size:27px;line-height:1.2;margin:0 0 10px;text-wrap:balance}
.cad-intro{color:var(--tinta-media,#5c5f66);font-size:15.5px;line-height:1.55;margin:0 0 18px;max-width:62ch}
.cad .card{margin-bottom:14px}
.cad-rotulo{font:600 11px/1 var(--fonte-mono,ui-monospace,monospace);letter-spacing:.1em;text-transform:uppercase;
color:#0f5150;margin-bottom:8px}
.cad-sub{font-size:14px;margin:16px 0 2px}
.cad-linha{display:grid;grid-template-columns:1.2fr 1.4fr minmax(140px,1fr) auto;gap:8px;align-items:end;
padding:8px 0;border-top:1px solid var(--linha,#e4e6ea)}
.cad-linha:first-child{border-top:0}
.cad-linha--2{grid-template-columns:1.2fr 1.4fr auto}
/* O "tirar" so existe na ultima linha; com a coluna dele em largura fixa,
as colunas de todas as linhas alinham. */
.cad-linha--ap{grid-template-columns:1.3fr 1fr 84px 56px}
/* No celular, os pares lado a lado (sigla e cor, e-mail e celular) vao um
embaixo do outro: lado a lado, o codigo da cor e o e-mail ficavam cortados. */
@media (max-width:640px){.cad-linha,.cad-linha--2,.cad-linha--ap{grid-template-columns:1fr}
.cad .dupla{flex-direction:column;gap:0}}
.cad-chip{font:500 12px/1 var(--fonte-mono,ui-monospace,monospace);background:var(--cor-info-suave,#eef3f9);
border-radius:6px;padding:0 10px;height:var(--alvo-toque,44px);display:flex;align-items:center;justify-content:center}
.cad-cor{display:flex;align-items:center;gap:8px}
.cad-cor .campo{flex:1;min-width:0}
.cad-cor input[type=color]{width:52px;height:44px;padding:0;border:1px solid var(--linha-forte,#c9ccd2);
border-radius:8px;background:none;flex:none;cursor:pointer}
.cad-amostra{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;
color:#fff;font-weight:700;font-size:15px;flex:none;overflow:hidden}
.cad-amostra img{width:100%;height:100%;object-fit:contain;background:#fff}
.cad-alerta{color:var(--perigo,#a51010)}
.cad-marcas{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.cad-marca{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--linha-forte,#c9ccd2);
border-radius:999px;padding:8px 14px;font-size:14px;cursor:pointer;background:var(--papel,#fff)}
.cad-rolagem{overflow-x:auto}
.cad-contas{width:100%;border-collapse:collapse;font-size:13.5px}
.cad-contas th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
color:var(--tinta-fraca,#8d9099);padding:6px 10px 6px 0;border-bottom:1px solid var(--linha,#e4e6ea)}
.cad-contas td{padding:8px 10px 8px 0;border-bottom:1px solid var(--linha,#e4e6ea);vertical-align:top;
word-break:break-word}
.cad-problemas{margin:10px 0 0;padding-left:18px;font-size:14px;line-height:1.5}
.cad-enviado{background:var(--cor-envio-suave,#eaf6ef);border:1px solid #b9e0c8;border-radius:12px;
padding:14px 16px;margin-bottom:14px;line-height:1.5}
/* O AVISO DE RASCUNHO (13/09/2026).
Irmao do .cad-enviado logo acima, e de proposito com outra cor: os
dois aparecem no mesmo lugar da ficha e dizem coisas opostas. Verde e
"chegou ao servidor"; este e "ainda nao saiu daqui".
Ambar, e nao vermelho: nada deu errado. O que ha e um preenchimento
que a pessoa talvez nao reconheca como dela -- ver o comentario em
pintarCadastro(). */
.cad-rascunho{background:#fdf6e3;border:1px solid #e6d9a8;border-radius:12px;
padding:14px 16px;margin-bottom:14px;line-height:1.5;color:#5c4a12}
.cad-rascunho b{color:#3f3208}
.cad-rascunho .botao{display:block}
/* "Enviar cadastro" na tela de entrada (v156) */
.cadastro-porta{margin-top:18px;padding-top:16px;border-top:1px solid var(--linha,#e4e6ea);text-align:center}
.cadastro-porta p{font-size:13.5px;color:var(--tinta-media,#5c5f66);margin:0 0 10px;line-height:1.5}
/* A fila é do chip (v166, migração 144): os chips de quem opera */
.barra-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px}
.barra-chips__rotulo{font-size:12.5px;color:var(--tinta-fraca)}
.barra-chips .botao{width:auto;margin:0}
.chip-pilula{border:0;border-radius:20px;padding:5px 12px;color:#fff;font-weight:700;font-size:13px;cursor:pointer}
.chips-lista{display:flex;flex-direction:column;gap:8px;margin:10px 0;text-align:left}
.chip-linha{display:flex;align-items:center;justify-content:space-between;gap:10px;
border:1px solid var(--linha);border-left:5px solid var(--linha);border-radius:10px;
padding:9px 11px;background:var(--papel)}
.chip-linha--minha{background:var(--fundo)}
.chip-linha__quem{min-width:0;flex:1;line-height:1.4}
.chip-linha .botao{flex:none;width:auto;margin:0}
.faixachip[role="button"]{cursor:pointer}
.eq-pessoa--inativa{opacity:.55}
/* Novidades (v167). O numero da versao no topo e a porta: discreto como
era, e aceso enquanto houver novidade que a pessoa nao leu. */
/* Lido, ocupa a largura do texto, como o numero ocupava antes: com
enchimento dos lados, "sair" descia para uma segunda linha em tela de
360px e o cabecalho, que ja e alto, ficava mais alto para sempre. Aceso,
o botao cresce, e a linha a mais dura so ate a pessoa ler. */
.botao.versaopill{margin-left:auto;padding-left:0;padding-right:0;background:transparent;
border-color:transparent;font:var(--texto-etiqueta);opacity:.7}
.botao.versaopill--nova{opacity:1;padding-left:var(--espaco-3);padding-right:var(--espaco-3);
background:var(--papel);border-color:var(--papel);color:var(--cor-marca);
font-weight:700}
.versaopill__ponto{width:7px;height:7px;border-radius:var(--raio-3);background:var(--cor-marca);flex:none}
/* Sublinhado pontilhado: diz "da para tocar" sem ocupar largura. */
.botao.versaopill:not(.versaopill--nova){text-decoration:underline dotted;text-underline-offset:3px}
/* Depois que a pagina abriu sozinha e foi fechada: o numero pisca junto
com o recado que diz onde ela mora. */
.botao.versaopill--mostra{opacity:1;animation:versaoMostra 1.2s ease-out 5}
@keyframes versaoMostra{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
40%{box-shadow:0 0 0 6px rgba(255,255,255,.55)}}
@media (prefers-reduced-motion: reduce){
.botao.versaopill--mostra{animation:none;outline:2px solid var(--papel);outline-offset:2px}
}
body.com-pagina{overflow:hidden}
.novidades{position:fixed;inset:0;z-index:85;background:var(--fundo);overflow-y:auto;
overscroll-behavior:contain}
.novidades__topo{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:var(--espaco-3);
background:var(--cor-marca);color:#fff;
padding:calc(var(--espaco-2) + env(safe-area-inset-top)) var(--espaco-4) var(--espaco-2)}
.novidades__topo h2{margin:0;font:var(--texto-grande);font-weight:700}
.novidades__topo .botao.botao{width:auto;margin:0}
.novidades__corpo{max-width:620px;margin:0 auto;box-sizing:border-box;
padding:var(--espaco-4) var(--espaco-4) calc(var(--espaco-6) + env(safe-area-inset-bottom))}
.novidades__intro{font:var(--texto-apoio);color:var(--tinta-media);margin:0 0 var(--espaco-5)}
.novidades__onde{font:var(--texto-corpo);color:var(--tinta-media);margin:var(--espaco-5) 0 0}
.nov-entrada{margin:0 0 var(--espaco-5)}
.nov-entrada h3{margin:0;font:var(--texto-grande);font-weight:700}
.nov-entrada__versao{margin:0;font:var(--texto-etiqueta);color:var(--tinta-fraca);
text-transform:uppercase;letter-spacing:.4px}
.nov-entrada__resumo{margin:var(--espaco-2) 0 var(--espaco-4);font:var(--texto-corpo);color:var(--tinta-media)}
.nov-grupo{margin:var(--espaco-5) 0 var(--espaco-2);font:var(--texto-etiqueta);color:var(--tinta-fraca);
text-transform:uppercase;letter-spacing:.4px}
.nov-item h4{margin:0 0 var(--espaco-2);font:var(--texto-grande);font-weight:700;color:var(--tinta-forte)}
.nov-item p{margin:0;font:var(--texto-corpo);color:var(--tinta-media)}
.nov-item .nov-item__como{margin:var(--espaco-4) 0 var(--espaco-1);font:var(--texto-etiqueta);
color:var(--tinta-fraca);text-transform:uppercase;letter-spacing:.4px}
.nov-item .nov-item__nota{margin-top:var(--espaco-3);font:var(--texto-apoio)}
.nov-passos{margin:0;padding-left:var(--espaco-5);font:var(--texto-corpo);color:var(--tinta-media)}
.nov-passos li{margin:0 0 var(--espaco-2)}
.nov-botao{color:var(--tinta-forte);background:var(--fundo);border:1px solid var(--linha);
border-radius:var(--raio-1);padding:0 var(--espaco-1);
-webkit-box-decoration-break:clone;box-decoration-break:clone}
.nov-exemplo{margin:var(--espaco-3) 0 0;padding:var(--espaco-3);background:var(--fundo);
border-radius:var(--raio-1);font:400 13px/1.5 var(--fonte-mono);color:var(--tinta-forte);
white-space:pre-wrap;word-break:break-word}