/* ===== css/00-base.css ===== */
/* Estrutura e reset. NAO declara cor, fonte nem selo de marca: isso vem do
   tema (src/temas/<pele>.css), que o build injeta antes deste arquivo
   conforme o alvo. Trocar de pele e trocar de tema, nao editar aqui.
   Mexer neste arquivo muda a tela inteira: e compartilhado (WORKSTREAMS.md). */
:root{
  --head:58px; --kpi:66px; --side:264px; --ficha:380px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{background:var(--bg);color:var(--txt);font-family:var(--body);font-size:14px;-webkit-font-smoothing:antialiased}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select{font-family:inherit;color:inherit}

/* ---------- PREENCHIMENTO AUTOMATICO DO CHROME (14/09/2026) ----------
   Gabriel viu campo com "fundo branco e texto cinza... as vezes quando o
   campo e selecionado". E o autofill: o Chrome pinta o campo preenchido por
   ele com uma cor propria (clara, quase sempre) e NAO aceita `background`
   comum por cima -- so uma sombra `inset` do tamanho inteiro do campo cobre
   o que ele pintou, e so `-webkit-text-fill-color` muda a cor do texto que
   ele preencheu (`color` sozinho e ignorado ali). Nenhum arquivo deste
   projeto tinha essa regra: o campo caia sempre no branco do Chrome, com o
   texto claro do tema por cima -- baixo contraste em TODA pele escura, nao
   so na do comite.
   `var(--bg)` e a cor que a maioria dos campos deste projeto ja usa como
   fundo (`.lock input`, `.eqgrid input`, `.cadcampos input`, `.opform
   input`...): repetir a MESMA variavel aqui faz o campo autopreenchido nao
   destoar do campo vazio do lado. Nao e a cor exata de toda superficie do
   projeto (`.eqbusca` usa `--bg2`, o tema do comite usa uma superficie
   translucida) mas em todas elas e um fundo escuro sobre pele escura e claro
   sobre pele clara: nunca fica invertido, so um pouco menos combinando --
   o problema que Gabriel relatou (texto ilegivel) fica resolvido em qualquer
   uma. Cor de campo continua saindo do PAR --bg/--txt do tema, nunca
   escrita aqui: e o unico jeito de a mesma regra servir as 27 peles, claras
   e escuras.
   O `transition` bem longo evita o pisca branco que o Chrome mostra por uma
   fracao de segundo antes de aplicar a sombra -- truque padrao, nao gambiarra
   deste projeto. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--txt);
  caret-color:var(--txt);
  -webkit-box-shadow:0 0 0 1000px var(--bg) inset;
  box-shadow:0 0 0 1000px var(--bg) inset;
  transition:background-color 9999s ease-in-out 0s,color 9999s ease-in-out 0s;
}

/* ---------- A LISTA DO <select>, QUE O WINDOWS DESENHA SOZINHO (14/09/2026) ----------
   Mesmo relato do Gabriel: "o mesmo acontece com o menu/lista suspensa como
   'escolher supervisor', 'papel' etc". A CAIXA fechada do select ja herda
   `color:inherit` (linha acima) e o fundo que cada tela declara: ela fica
   legivel. A LISTA aberta e outra coisa -- nenhum <option> deste projeto
   tinha `background`/`color` proprios, entao quem desenhava a lista era o
   Windows, do jeito dele (fundo branco, texto preto), sem ligar pra pele da
   pagina. Herdar `color:var(--txt)` (claro, na pele escura) POR CIMA do
   branco do sistema e o pior caso possivel: texto claro sobre fundo claro,
   exatamente o "as vezes quando o campo e selecionado" que ele viu.
   Declarar os dois nao e gambiarra: o Chrome (desde a versao 99, 2022) honra
   `background-color` e `color` em <option>, e nenhum select deste projeto usa
   `appearance:none` que mudaria esse caminho de renderizacao. Uma regra so,
   em `option`, sem seletor de tela: pega toda lista suspensa do projeto de
   uma vez -- "escolher supervisor", "papel", o filtro de funcao, o select de
   origem do +1 Voto, o do cadastro, o da operacao. */
option{background-color:var(--bg);color:var(--txt)}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--bg3)}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:0}

/* ---------- WORDMARK DO PRODUTO ----------
   O nome do produto e uma etiqueta de ferramenta (ver 10-header.css). A marca
   aprovada em 20/08/2026 tira a ultima silaba "ai" do corpo da palavra e a
   coloca num bloco solido amarelo. Quem monta a estrutura e marcaProduto() em
   js/10-nucleo.js; aqui fica so a forma base. Cada pele ajusta o peso no seu
   tema, porque numa plataforma de candidato esta etiqueta NAO pode competir
   com o nome dele. */
.qg .ai{
  display:inline-block;
  background:var(--marca-ai-bg,#FFFF02);
  color:var(--marca-ai-tinta,#111114);
  padding:var(--marca-ai-pad,.16em .34em .2em);
  margin-left:var(--marca-ai-gap,.14em);
  border-radius:var(--marca-ai-raio,2px);
  font-weight:800;
  line-height:1;
  letter-spacing:inherit;
}

/* ===== css/07-confianca.css ===== */
/* ---------- O NÚMERO DA CONFIANÇA NAS FICHAS (25/09/2026) ----------
 * `confSelo()` (js/07-confianca.js) escreve o número de 1 a 10 com a cor dele,
 * na ficha do CRM e na ficha curta do Passaporte. A cor chega pelo atributo
 * `style` do próprio selo, que é a régua da temperatura; aqui fica só o corpo.
 *
 * Cor de texto medida sobre o grafite do comitê: o frio (`--dim`) dá 8,2:1, o
 * morno (`--acento2`) 6,77:1 e o quente (`--acento-texto`) 5,68:1, todos acima
 * dos 4,5:1 da regra. */
.conf-selo{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.conf-selo small{font-size:.78em;font-weight:600;color:var(--dim);margin-left:1px}
.conf-selo.conf-vazio{color:var(--dim);font-weight:600}

/* ===== css/07-temperatura.css ===== */
/* ---------- O CHIP DE TEMPERATURA E A CAIXA QUE ELE ABRE ----------
 * 14/09/2026.
 *
 * A GRAMÁTICA VEM DA PROPOSTA, e não é escolha desta folha. O 4º passo da
 * Máquina de Votos é "Filtro / Temperatura", e o `proposta/src/css.mjs` fixou em
 * 23/08/2026 como isso se desenha: quente é o acento CHEIO com tinta branca;
 * frio é a AUSÊNCIA do acento — contorno fino, tinta apagada, fundo do papel.
 * Nas palavras do arquivo, "o card perde a cor, não troca de cor".
 *
 * Daí saem as três decisões desta folha:
 *
 *   1. Não há semáforo. Verde-amarelo-vermelho seria a leitura preguiçosa, e
 *      vermelho na ficha de um eleitor lê como problema, não como calor.
 *   2. Não há AZUL, em hipótese nenhuma. Azul forte é uma das quatro cores
 *      proibidas em peça de campanha (lê como União ou PSDB), e um chip azul ao
 *      lado do nome de uma pessoa diz partido antes de dizer temperatura.
 *   3. Subir de faixa é GANHAR acento, e não trocar de cor: morno tem o contorno,
 *      quente tem o preenchimento, fervendo tem o preenchimento e o peso. Quem
 *      está em uma lista só não ganha chip nenhum.
 *
 * Arquivo próprio, e não uma regra dentro de `60-ficha.css` ou `96-cabo.css`,
 * porque o chip aparece em quatro telas — ficha, Minha lista do cabo, operação e
 * rede — e a mesma regra em quatro folhas diverge na primeira correção feita só
 * de um lado.
 */

.temp {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 99px;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  /* alvo de toque: o chip é pequeno por desenho, então a área clicável cresce
     por fora sem empurrar o vizinho — regra do celular, 44px */
  position: relative;
}
.temp::after {
  content: '';
  position: absolute;
  inset: -50% -8px;
  min-height: 44px;
}

/* MORNO — o contorno, sem preenchimento. É o "apareceu de novo" e ainda não
   grita: a cor está na tinta e na borda, o fundo continua sendo o do cartão. */
.temp-morno {
  background: transparent;
  color: var(--acento-texto, var(--gold));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acento-texto, var(--gold)) 45%, transparent);
}

/* QUENTE — o acento cheio, com a tinta que o tema declara para ir por cima dele.
   `--sobre-acento` existe em todas as 27 peles e já passou pelo auditor de
   contraste; usar branco fixo quebraria na pele de acento claro. */
.temp-quente {
  background: var(--acento-texto, var(--gold));
  color: var(--sobre-acento, #0E1011);
  font-weight: 700;
}

/* FERVENDO — o mesmo acento, com peso e um anel que o separa do fundo. Não é
   uma quarta cor: é a mesma, dita mais alto. */
.temp-fervendo {
  background: var(--acento-texto, var(--gold));
  color: var(--sobre-acento, #0E1011);
  font-weight: 800;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--acento-texto, var(--gold)) 28%, transparent);
}

.temp:focus-visible {
  outline: 2px solid var(--acento-texto, var(--gold));
  outline-offset: 2px;
}

/* ---------- a caixa que o chip abre ---------- */
.temp-dlg {
  border: 0;
  padding: 0;
  /* `dialog` com showModal centraliza sozinho pelo `margin:auto` do user-agent,
     e alguma folha deste bundle o zera — medido em producao: a caixa nasceu
     encostada no canto superior esquerdo. Declarar aqui devolve o centro sem
     mexer na folha alheia. */
  margin: auto;
  max-width: 460px;
  width: calc(100vw - 32px);
  border-radius: 14px;
  background: var(--bg2);
  color: var(--txt);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
}
.temp-dlg::backdrop { background: rgba(0, 0, 0, .6); }
.temp-dlg form { padding: 18px 18px 14px; }
.temp-dlg h3 {
  margin: 0 0 8px;
  font-family: var(--display, inherit);
  font-size: 17px;
  line-height: 1.25;
}
.temp-dlg-lead {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dim);
}
.temp-dlg-lead b { color: var(--txt); }

/* Com centenas de listas a caixa não pode crescer sem fim: o corpo rola por
   dentro e o cabeçalho, que traz a contagem, fica fora da rolagem. */
.temp-dlg-listas {
  max-height: 46vh;
  overflow-y: auto;
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}
.temp-lista {
  display: grid;
  gap: 2px;
  padding: 9px 11px;
  border-radius: 9px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
}
.temp-lista b { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.temp-lista span { font-size: 11.5px; color: var(--dim); font-family: var(--mono); }

.temp-dlg-pe { display: flex; justify-content: flex-end; }
.temp-dlg-pe .opbtn { min-height: 44px; }

@media (max-width: 480px) {
  .temp-dlg { width: calc(100vw - 20px); }
  .temp-dlg-listas { max-height: 40vh; }
}

/* ===== css/08-automacao.css ===== */
/* O selo de automação (24/09/2026, js/08-automacao.js).
   Vazado, para não se confundir com o badge de origem da Minha lista, que é
   cheio no acento: um diz de onde o número veio, o outro diz que ele já
   recebeu mensagem. A cor é `--acento-texto`, que cada tema já mede contra o
   fundo; sem ela, cai no texto do tema. */
/* `.cabo-it .nm span` (96-cabo.css) pinta todo span do item de cinza e 13px, e
   ganha de uma classe sozinha: o seletor longo e o que devolve a cor. */
.auto-selo,.cabo-it .nm span.auto-selo{display:inline-flex;align-items:center;gap:5px;justify-self:start;vertical-align:middle;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  line-height:1.2;padding:3px 8px;border:1.5px solid currentColor;
  color:var(--acento-texto,var(--txt));background:transparent;white-space:nowrap}
.auto-selo svg{width:13px;height:13px;flex:0 0 auto}
.auto-linha{display:block;margin:0 0 8px}
.oplinha .q .auto-selo{margin-top:4px}

/* ===== css/08b-plataforma.css ===== */
/* A escolha da plataforma e o selo (27/09/2026, js/08b-plataforma.js).
   A escolha são quatro botões grandes, nenhum marcado; o marcado fica cheio no
   acento, o mesmo gesto do chip de origem. O selo é tracejado para não se
   confundir com o de automação, que é contínuo: um diz que um robô já falou
   com o número, o outro diz que uma cópia foi para outro banco. */
.plat-sel{border:0;margin:0;padding:0;min-width:0;display:grid;gap:8px;grid-column:1/-1}
.plat-sel legend{padding:0;margin:0 0 6px;font-weight:700;font-size:15px;color:var(--txt)}
.plat-sel legend small{font-weight:400;color:var(--dim)}
.plat-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.plat-op{position:relative;display:block;min-width:0;margin:0}
.plat-op input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.plat-op span{display:flex;align-items:center;justify-content:center;min-height:48px;padding:8px 10px;
  border:1.5px solid var(--line2);border-radius:8px;background:var(--bg3);color:var(--txt);
  font-weight:700;font-size:16px;text-align:center;overflow-wrap:anywhere}
.plat-op input:checked + span{background:var(--amber);border-color:var(--amber);color:var(--sobre-acento,var(--tinta))}
.plat-op input:focus-visible + span{outline:2px solid var(--acento-texto,var(--txt));outline-offset:2px}
.plat-motivo{grid-column:1/-1;font-size:14px;color:var(--dim);margin:2px 0 0}
.plat-selo,.cabo-it .nm span.plat-selo{display:inline-flex;align-items:center;gap:5px;justify-self:start;vertical-align:middle;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;line-height:1.2;padding:3px 8px;
  border:1.5px dashed currentColor;color:var(--acento-texto,var(--txt));background:transparent;white-space:nowrap}
.plat-selo svg{width:13px;height:13px;flex:0 0 auto}
.oplinha .q .plat-selo{margin-top:4px}
.plat-situ{display:grid;gap:6px;margin-top:12px}
.plat-situ h4{margin:0;font-size:14px;color:var(--txt)}
.plat-situ-linha{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;font-family:var(--mono);font-size:12px;
  color:var(--txt);border-bottom:1px solid var(--line);padding-bottom:6px;font-variant-numeric:tabular-nums}
.plat-situ-linha span{text-align:right}
.plat-situ-linha .alerta{color:var(--acento-texto,var(--txt))}

/* ===== css/10-header.css ===== */
/* ---------- HEADER ---------- */
header{height:var(--head);border-bottom:2px solid var(--tinta);display:flex;align-items:center;
  padding:0 18px;gap:16px;background:var(--bg2);position:relative;z-index:40}
/* Lockup: o nome do PRODUTO (Multiplicai) e etiqueta de ferramenta, discreta.
   Quem carrega o peso tipografico do topo e o CLIENTE. Por isso a etiqueta vem
   em mono pequeno e cinza, separada por um filete, e a assinatura do candidato
   vem grande. Os dois nomes saem do config (src/marcas/<pele>.json). */
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.brand .qg{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.5px;
  color:var(--dim2);text-transform:uppercase;line-height:1;
  padding-right:11px;border-right:1.5px solid var(--line2);flex-shrink:0}
/* reproducao da assinatura "Diego Tavares" das pecas de campanha */
.brand .cand{font-family:var(--marca);font-style:var(--marca-estilo,italic);font-weight:700;font-size:20px;
  line-height:.92;color:var(--txt);display:flex;align-items:center;gap:9px}
.brand .cand span{display:block}
.brand:hover .qg{color:var(--amber)}
/* NÚMERO DE URNA (24/08/2026). Bloco cheio no acento, como manda a regra
   construtiva desta pele: massa, encaixe ortogonal, zero contorno e zero raio.
   É o mesmo par de cores do `.demo-tag` logo abaixo — `--gold` com
   `--sobre-acento` — e é por isso que ele passa no contraste sem medição nova:
   nas peles de candidato o `--gold` vira o acento dele e o `--sobre-acento` é
   calculado junto, no mesmo `tools/pele.mjs`.
   `font-variant-numeric:tabular-nums` porque o número tem largura fixa na urna
   e ficar dançando entre peles de 2 e de 5 dígitos parece defeito. */
.brand .urna{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.5px;
  font-variant-numeric:tabular-nums;font-style:normal;line-height:1;
  background:var(--gold);color:var(--sobre-gold,var(--sobre-acento));padding:5px 8px;flex-shrink:0}
.tabs{display:flex;gap:0;margin-left:auto;border:2px solid var(--tinta);background:var(--bg2)}
.tabs button{padding:7px 16px;font-size:12px;font-weight:700;letter-spacing:.6px;
  color:var(--txt);transition:.12s;border-right:2px solid var(--tinta)}
.tabs button:last-child{border-right:none}
.tabs button:hover{background:var(--bg3)}
.tabs button.on{background:var(--gold);color:var(--tinta)}
/* Etiqueta de demonstracao: e um BOTAO, leva para a plataforma real.
   Some sozinha quando o build e o da plataforma (ver config.js). */
.demo-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.5px;color:var(--tinta);
  background:var(--gold);padding:4px 9px;font-weight:700;border:1.5px solid var(--tinta);
  text-decoration:none;display:inline-flex;align-items:center;gap:7px;box-shadow:2px 2px 0 var(--tinta);
  transition:.12s;white-space:nowrap}
.demo-tag b{font-weight:700;border-left:1.5px solid var(--tinta);padding-left:7px}
.demo-tag:hover{background:var(--amber);color:var(--sobre-acento);transform:translate(-1px,-1px);
  box-shadow:3px 3px 0 var(--tinta)}
.demo-tag:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--tinta)}
/* O display acima vence o [hidden] do navegador: os dois pesam igual, e quem
   vem depois manda. Sem esta linha, o selo aparecia na tela de entrada da
   plataforma do Diego, que e a conta com gente de verdade, anunciando DEMO
   para a equipe inteira. */
.demo-tag[hidden]{display:none}

/* NOME EM CIMA, CARGO EMBAIXO (13/09/2026).
   A tag deixou de ser uma linha so. O cargo entra menor e em versalete, na mesma
   cor do nome -- e de proposito que ele nao seja mais claro: reduzir a cor do
   segundo andar e o jeito mais comum de matar o contraste de um texto que ja
   nasce em 8px. Os dois medem igual contra o fundo da tag. */
.demo-tag{flex-direction:column;align-items:flex-start;gap:1px;line-height:1.15}
.eu-nome{font-weight:700;font-size:10px;letter-spacing:.3px;
  max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eu-cargo{font-size:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  opacity:.82}

/* Canto direito do topo: so o sair. O logo da IAI saiu da barra em 13/09/2026
   (ele continua na porta e na gaveta do celular), entao nao ha mais pilha aqui. */
.canto{margin-left:auto;display:flex;align-items:center;
  padding-left:10px;flex:none}

/* O SAIR VIROU ICONE, E O ALVO FOI A 44px (13/09/2026).
   Antes eram 8px de texto num alvo de 20px de altura -- metade do minimo que a
   regra do celular exige, e este e o unico caminho de saida da plataforma.
   Agora o desenho tem 18px e o alvo tem 44x44, sem ocupar mais largura na barra
   do que o texto ocupava.

   Ele continua sendo o elemento mais discreto do topo, na cor secundaria: sair e
   caminho de saida, nao chamada para acao. Cor so no hover e no foco. */
.b-sair{color:var(--dim2);background:none;cursor:pointer;transition:color .12s;
  min-width:44px;min-height:44px;display:grid;place-items:center;padding:0;
  border:0;line-height:0}
.b-sair svg{width:18px;height:18px;display:block}
.b-sair[hidden]{display:none}
/* o segundo botao so existe no celular, dentro da gaveta de filtros, e ele
   continua sendo TEXTO -- ali ha largura sobrando e o rotulo por extenso ajuda.
   Por isso ele desfaz a grade de icone que a regra acima impoe. */
.b-sair-gaveta{display:none}
.b-sair-gaveta{font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;min-width:0;padding:6px 8px;line-height:1}
.b-sair:hover{color:var(--amber);text-decoration:underline;text-underline-offset:2px}
.b-sair:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* Assinatura da agencia. Dentro do app (header e gaveta) sobra so o logo, sem o
   texto "Realizacao: Grupo Malory": o topo ali e do candidato. O .por continua
   existindo porque a tela de LOGIN usa o mesmo componente, e la o credito cabe. */
.assina{display:flex;align-items:center;gap:9px;
  text-decoration:none;color:inherit;transition:.12s}
.assina img{height:30px;width:auto;display:block;filter:drop-shadow(1.5px 1.5px 0 var(--tinta))}
.assina .por{font-family:var(--mono);font-size:8.5px;letter-spacing:1.4px;color:var(--dim);
  text-transform:uppercase;text-align:right;line-height:1.55;font-weight:700}
.assina:hover{transform:translateY(-1px)}
.assina:hover .por{color:var(--amber)}

/* O BANNER DO SUPERVISOR, AO LADO DO BANNER DO NOME (chamado #56, 16/09/2026).

   Ate 15/09 o supervisor era uma terceira linha dentro do banner do nome, em 8px.
   O pedido do Gabriel e outro desenho: dois banners iguais, um ao lado do outro,
   o do cabo e o do supervisor dele. Por isso a classe herda `.demo-tag` inteira
   em vez de redefinir cor, borda e sombra -- dois desenhos que precisam ser
   iguais e vivem em dois blocos separados divergem no primeiro ajuste.

   O que muda: ele nao e botao. O banner do nome abre o perfil; este nao leva a
   lugar nenhum, entao desfaz o hover, o active e o cursor de link. Quem le por
   teclado tambem nao tropeca nele, porque o elemento e <span>, sem foco. */
.sup-tag{cursor:default}

/* A SEGUNDA COR DA MARCA, E NÃO A PRIMEIRA (17/09/2026, pedido do Gabriel).

   Os dois banners nasceram idênticos, e lado a lado eles liam como um bloco só
   de duas partes. O segundo passa a usar `--acento2`, que toda pele já declara
   junto com o `--sobre-acento2` medido pelo `tools/pele.mjs` para ter contraste
   sobre ele. No comitê isso dá o laranja #EF7316 do Mersinho com texto #0E1011,
   medido na tela: 6,48:1, contra os 4,5 que o AA da WCAG pede.

   O par de fallback importa: `diego` e `multiplicai` não declaram `--acento2`, e
   nelas a regra devolve o desenho de antes em vez de pintar um laranja que não é
   de ninguém. Escrever a cor aqui em hexadecimal faria as 27 peles receberem a
   cor do comitê, que é a família de erro que o CLAUDE.md chama de chapa em `.js`. */
:root header .demo-tag.sup-tag{
  background:var(--acento2,var(--gold));
  color:var(--sobre-acento2,var(--tinta));
  border-color:var(--sobre-acento2,var(--tinta));
}
:root header .demo-tag.sup-tag:hover{
  background:var(--acento2,var(--gold));
  color:var(--sobre-acento2,var(--tinta));
  transform:none;box-shadow:2px 2px 0 var(--tinta);
}
.sup-tag:active{transform:none;box-shadow:2px 2px 0 var(--tinta)}

/* ============================================================================
   O SAIR SAÍA DA TELA NA FAIXA DE LAPTOP (chamado #80, 18/09/2026).

   Relato do Gabriel a 1366x599: "BOTÃO SAIR ESTÁ DESPROPORCIONAL A ALGUMAS
   TELAS, DEIXANDO ELE MAIS À DIREITA SAINDO DO CAMPO DE VISÃO."

   Medido na pele do comitê, com o crachá de nível 50 (oito abas mais o +1 Voto,
   o banner do nome e o banner do supervisor): o topo pedia 1520px de largura e
   tinha 1366. O `.b-sair` começava em x=1483, ou seja 161px fora da tela — e
   `document.documentElement.scrollWidth` continuava 1366, então não havia barra
   de rolagem nenhuma para alcançá-lo. O único caminho de saída da plataforma
   ficava invisível e inatingível.

   A causa é a soma de três coisas que só se encontram nesta faixa de largura:
   o `header` é `display:flex` sem `flex-wrap`; `.brand`, `.demo-tag` e `.tabs`
   herdam `min-width:auto`, então nenhum deles encolhe abaixo do próprio
   conteúdo; e a rolagem interna das abas — que existe desde 11/09 e resolve
   exatamente isto — mora dentro de `@media(max-width:860px)`, no 95-mobile.css.
   Abaixo de 861px a barra rola e o SAIR fica; acima, o topo transborda calado.

   O conserto é deixar o topo QUEBRAR quando não couber, em vez de transbordar.
   Nada de largura mágica: quem decide é o conteúdo, então um cabo digital (que
   vê três abas) continua com uma linha só a 1366, e o monitoramento ganha a
   segunda linha. Medido depois, sempre com o crachá de nível 50:

     1920 · uma linha, topo de 58px, as oito abas inteiras
     1440 · duas linhas, 84px, abas inteiras, SAIR em x=1348
     1366 · duas linhas, 84px, abas inteiras, SAIR em x=1348
     1024 · duas linhas, 84px, abas inteiras
      900 · duas linhas, 94px, a barra de abas rolando 32px por dentro

   A rolagem interna continua existindo como rede de segurança: numa faixa
   estreita o que sobra é a barra rolar, nunca o botão sair do campo de visão.

   O QUE ISTO MUDA NAS PELES QUE NÃO SÃO O COMITÊ, e é honesto dizer que muda:
   o topo deixou de ter altura travada em 58px e passa a ter a altura do que
   está dentro dele. Na pele do Diego o lockup tem 63px (o nome sai em duas
   linhas), então o topo dele vai de 58 para 65px a 1920 — sete pixels que já
   existiam e que o `height:58px` escondia recortando o próprio lockup. O mesmo
   crachá de nível 50 na pele do Diego também tinha o SAIR fora da tela a
   1366px (medido: x=1520 num viewport de 1366), então o defeito nunca foi só
   do comitê.

   `--head` é a altura que o `30-layout.css` desconta do `main`, e ela deixou de
   ser constante aqui. Quem a mantém em dia é o `js/11-topo-altura.js`, com um
   ResizeObserver — e só acima de 861px, porque abaixo disso o topo tem altura
   fixa declarada e medir o que já é fixo só cria chance de travar num valor
   errado.
   ============================================================================ */
@media(min-width:861px){
  header{flex-wrap:wrap;height:auto;min-height:58px;align-content:center;row-gap:0}
  /* sem isto, item nenhum do topo encolhe: `min-width:auto` é o padrão de item
     flex, e é ele que empurrava o SAIR para fora em vez de apertar o resto */
  header .brand{min-width:0}
  header .brand .cand{min-width:0}
  header .demo-tag{min-width:0;flex:0 1 auto;overflow:hidden}
  header .demo-tag .eu-nome{max-width:100%}
  header .tabs{flex:0 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  header .tabs::-webkit-scrollbar{display:none}
  header .tabs button{flex-shrink:0;scroll-snap-align:start}
  /* o canto é o SAIR: ele não encolhe e não rola. É o último elemento a ceder
     espaço no topo, porque é o único caminho de saída da plataforma. */
  header .canto{flex:none}
}
/* QUANDO O TOPO QUEBRA, A BARRA DE ABAS FICA COM A LINHA DE BAIXO INTEIRA.
   A classe vem do `js/11-topo-altura.js`, que já mede o topo e olha a posição
   real dos filhos. Sem ela o wrap natural produzia um terceiro desenho: a
   1536x864, com oito abas, elas cabiam na primeira linha e o `.canto` descia
   sozinho — o SAIR virava um ícone solto numa faixa vazia de 36px, que é a
   mesma queixa de "desproporcional" que abriu o chamado. Com a classe, o topo
   quebrado tem sempre a mesma cara: identificação em cima com o SAIR à direita,
   abas embaixo. */
@media(min-width:861px){
  header.quebrou .tabs{order:10;flex:1 0 100%;margin-left:0}
}
/* Entre 861 e 1023 a barra de abas sozinha já é mais larga que a tela, e a
   quebra natural jogava o `.canto` para uma TERCEIRA linha (medido a 900px:
   topo de 128px). Aqui ela vai para o fim e ocupa a linha inteira, que é o
   mesmo desenho que a pele do comitê já usa no celular: o SAIR sobe para a
   primeira linha e o topo volta a ter duas. */
@media(min-width:861px) and (max-width:1023px){
  header .tabs{order:10;flex:1 0 100%;margin-left:0}
}

/* ===== css/15-carregamento.css ===== */
.load{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;
  align-items:center;justify-content:center;z-index:200;gap:16px;transition:opacity .5s}
/* A abertura e a assinatura do cliente, nao o nome do produto. */
.load .marca{display:flex;align-items:center;gap:18px}
.load .marca .nome{font-family:var(--marca);font-style:var(--marca-estilo,italic);font-weight:700;font-size:44px;
  line-height:.9;color:var(--txt);text-align:left}
.load .qg{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.5px;
  color:var(--dim2);text-transform:uppercase}
.load p{font-size:11.5px;color:var(--dim);letter-spacing:2.5px;text-transform:uppercase;font-weight:600}
.load .pb{width:200px;height:6px;background:var(--bg3);overflow:hidden;border:2px solid var(--tinta)}
.load .pb i{display:block;height:100%;width:36%;background:var(--amber);animation:sl 1.05s infinite ease-in-out}
@keyframes sl{0%{transform:translateX(-100%)}100%{transform:translateX(380%)}}

/* ===== css/20-kpis.css ===== */
/* ---------- KPIs ---------- */
.kpibar{height:var(--kpi);border-bottom:2px solid var(--tinta);display:flex;background:var(--bg3);
  position:relative;z-index:30;overflow-x:auto}
.kpi{padding:10px 20px;border-right:1.5px solid var(--line2);min-width:134px;flex-shrink:0;
  position:relative}
.kpi::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:transparent}
.kpi.a::before{background:var(--amber)} .kpi.c::before{background:var(--azul)}
.kpi.g::before{background:var(--green)} .kpi.r::before{background:var(--red)}
.kpi .lbl{font-size:9.5px;letter-spacing:1px;color:var(--dim);text-transform:uppercase;font-weight:700}
.kpi .val{font-family:var(--mono);font-size:22px;font-weight:700;line-height:1.25;margin-top:2px}
.kpi .val small{font-size:11px;color:var(--dim);font-weight:400}
.kpi.a .val{color:var(--amber)} .kpi.c .val{color:var(--cyan)}
.kpi.g .val{color:var(--green)} .kpi.r .val{color:var(--red)}

/* ===== css/30-layout.css ===== */
/* ---------- LAYOUT ---------- */
main{height:calc(100vh - var(--head) - var(--kpi));display:flex;position:relative}
.pane{display:none;width:100%;height:100%}
.pane.on{display:flex}

/* ===== css/40-sidebar.css ===== */
/* ---------- SIDEBAR ---------- */
aside{width:var(--side);border-right:2px solid var(--tinta);background:var(--bg2);overflow-y:auto;flex-shrink:0}
.fgrp{border-bottom:1.5px solid var(--line);padding:14px 16px}
.fgrp h3{font-size:9.5px;letter-spacing:1.2px;color:var(--dim);text-transform:uppercase;
  margin-bottom:9px;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{padding:4px 9px;border:1.5px solid var(--line2);font-size:11px;font-weight:500;
  color:var(--dim);transition:.12s;display:flex;align-items:center;gap:5px;background:var(--bg2)}
.chip:hover{border-color:var(--tinta);color:var(--txt)}
.chip.on{background:var(--gold);color:var(--tinta);border-color:var(--tinta);font-weight:700}
.chip .dot{width:7px;height:7px;border-radius:50%}
.rng{display:flex;align-items:center;gap:9px}
.rng input[type=range]{flex:1;accent-color:var(--amber);height:4px}
.rng .out{font-family:var(--mono);font-size:12px;color:var(--amber);min-width:26px;text-align:right}
.legend{padding:14px 16px;font-size:11px;color:var(--dim)}
.legend div{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.legend .sq{width:11px;height:11px;border-radius:50%;flex-shrink:0}
.btn-reset{width:100%;padding:9px;border:2px solid var(--tinta);font-size:11px;font-weight:700;
  color:var(--txt);letter-spacing:.5px;background:var(--bg2);box-shadow:var(--dura)}
.btn-reset:hover{background:var(--amber);color:var(--sobre-acento)}

/* ===== css/50-mapa.css ===== */
/* ---------- MAPA ---------- */
.mapwrap{flex:1;position:relative}
#map{position:absolute;inset:0}
.maptools{position:absolute;top:12px;left:12px;z-index:5;display:flex;flex-direction:column;gap:6px}
.mt{background:var(--bg2);border:2px solid var(--tinta);padding:7px 11px;font-weight:600;
  font-size:11px;color:var(--txt);letter-spacing:.4px;text-align:left;box-shadow:var(--dura)}
.mt:hover{background:var(--bg3)}
.mt.on{background:var(--gold);color:var(--tinta)}
.searchbox{position:absolute;top:12px;right:12px;z-index:5;width:230px}
/* 16px, e nao 12: abaixo de 16 o Safari do iPhone amplia a pagina sozinho quando
   o dedo entra no campo, e o mapa salta de lugar debaixo do dedo. */
.searchbox input{width:100%;background:var(--bg2);border:2px solid var(--tinta);
  padding:9px 12px;font-size:16px;box-shadow:var(--dura)}
.searchbox input:focus{outline:none;border-color:var(--amber);background:#fff}
.sugg{background:var(--bg2);border:2px solid var(--tinta);border-top:none;
  max-height:230px;overflow-y:auto;box-shadow:var(--dura)}
.sugg div{padding:8px 12px;font-size:12px;border-bottom:1px solid var(--line);cursor:pointer}
.sugg div:hover{background:var(--gold)}
.scale{position:absolute;bottom:22px;left:12px;z-index:5;background:var(--bg2);
  border:2px solid var(--tinta);padding:9px 12px;box-shadow:var(--dura)}
.scale .t{font-size:9.5px;letter-spacing:.8px;color:var(--dim);margin-bottom:6px;text-transform:uppercase;font-weight:700}
.scale .bar{height:9px;width:150px;border:1.5px solid var(--tinta);
  background:linear-gradient(90deg,#F3EEDC,#DCEFF7,#B7E4F5,#79DCF7,#F8DE4D,#F5B93C,#EB5F2A)}
.scale .lbls{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;color:var(--dim);margin-top:4px}
.mapbox-tip{background:var(--bg2)!important;border:1px solid var(--line2)!important;border-radius:8px!important;
  padding:0!important;font-family:var(--body)!important;box-shadow:0 8px 26px rgba(0,0,0,.6)!important}
.mapboxgl-popup-content{background:var(--bg2)!important;padding:12px 14px!important;border-radius:0!important;
  border:2px solid var(--tinta)!important;color:var(--txt)!important;font-family:var(--body)!important;
  box-shadow:var(--dura)!important}
.mapboxgl-popup-tip{border-top-color:var(--tinta)!important;border-bottom-color:var(--tinta)!important}
.mapboxgl-popup-close-button{color:var(--txt)!important;font-size:18px!important}
.pop h4{font-family:var(--display);font-size:17px;font-weight:800;font-stretch:88%;
  text-transform:uppercase;letter-spacing:-.2px;margin-bottom:3px}
.pop .sub{font-size:11px;color:var(--dim);margin-bottom:7px}
.pop table{font-size:11px;border-collapse:collapse;width:100%}
/* `--acento-texto` e nao `--amber` cru: aqui e letra de 11px sobre --bg2, e o
   acento de campanha nao nasce calibrado para virar texto pequeno (2.67:1 no
   pior caso das 27). Mesmo conserto que o .monpoplin b recebeu em 12/09. */
.pop td{padding:2px 0} .pop td:last-child{text-align:right;font-family:var(--mono);color:var(--acento-texto,var(--amber));font-weight:700}

/* ===== css/51-mapa-v2.css ===== */
/* ---------- O MAPA REARRANJADO (chamado #75, 17/09/2026) ----------
 * Tudo aqui vive sob `:root[data-mapa="v2"]`, que o 41-mapa-v2.js escreve
 * quando a pele declara `mapaV2` em src/plataformas.json. Sem o atributo,
 * nenhuma regra deste arquivo casa, e as outras vinte e oito telas continuam
 * byte a byte como estavam — o arquivo viaja no bundle delas e não pinta nada.
 *
 * A construção é a da casa: bloco chapado, vão de 2px em preto no lugar de
 * contorno, zero raio e zero sombra. Nada de gradiente e nada de vidro.
 */

/* ---------- a coluna de filtros vira gaveta, também no desktop ----------
 * A coluna de 264px saiu da tela porque o pedido mandou o filtro para um botão
 * na barra de KPIs. Ela continua sendo a MESMA `aside`, com a mesma classe
 * `.open` que o celular já usava desde que o celular existe: o botão de fechar
 * lá dentro ("VER O MAPA") continua funcionando sem uma linha nova. */
/* ELA ABRE PELA DIREITA (pedido do Gabriel, 17/09/2026), e é o lado do botão
   que a chama: o FILTROS fica no fim da barra de KPIs, encostado na direita, e
   gaveta que nasce do lado oposto ao clique faz o olho procurar. A largura vira
   `--gav`, porque os badges de camada precisam saber de quanto se afastar. */
:root[data-mapa="v2"]{--gav:min(92vw,300px)}
:root[data-mapa="v2"] aside{
  position:absolute;top:0;bottom:0;left:auto;right:0;z-index:40;width:var(--gav);
  transform:translateX(102%);transition:transform .2s ease;
  border-right:none;border-left:2px solid var(--tinta);
  box-shadow:-14px 0 34px rgba(0,0,0,.6)}
:root[data-mapa="v2"] aside.open{transform:translateX(0)}

/* OS BADGES SAEM DA FRENTE QUANDO ELA ABRE. Eles moram na direita desde o item
   4 do chamado, que é exatamente onde a gaveta passa a cobrir: sem este
   deslocamento, abrir o filtro esconde as quatro camadas e a busca.
   `aside.open ~ .mapwrap` funciona porque os dois são irmãos dentro do
   `#pane-mapa`, e a `aside` vem antes no HTML. */
:root[data-mapa="v2"] .maptools,
:root[data-mapa="v2"] .searchbox,
:root[data-mapa="v2"] #bug-btn{transition:right .2s ease}
:root[data-mapa="v2"] aside.open ~ .mapwrap .maptools{right:calc(var(--gav) + 12px)}
:root[data-mapa="v2"] aside.open ~ .mapwrap .searchbox{right:calc(var(--gav) + 12px)}
/* O BOTÃO DE REPORTAR ANDA JUNTO. Ele é `position:fixed` no canto inferior
   direito (98-bug.css) e filho do body, então nenhum seletor de irmão da
   `aside` o alcança — quem diz que a gaveta está aberta é o `data-gaveta` que o
   41-mapa-v2.js escreve no <html>. Sem isto, abrir o filtro enterra o botão
   embaixo da gaveta, e ele é o caminho de quem vai relatar justamente o que
   está vendo na tela. */
/* ELE TAMBÉM SOBE, POR CAUSA DO ZOOM DO MAPA (chamado #75, 17/09/2026). O
   controle de aproximar e afastar do Mapbox mora no canto inferior direito,
   colado no fundo, e ocupa 68px de altura por 39 de largura — medido a
   1366x599: ele vai de y=531 até o rodapé, e o botão de reportar ia de 535 a
   579, por cima dos dois sinais de mais e menos.
   68 do controle, 10 de vão e os 20 que o botão já tinha dão os 98px. Subir
   resolve em qualquer largura; afastar pela direita só resolveria enquanto
   ninguém abrisse a ficha. */
:root[data-mapa="v2"] #bug-btn{right:var(--bug-dir,16px);bottom:var(--bug-baixo,98px)}
:root[data-mapa="v2"][data-gaveta="aberta"]{--bug-dir:calc(var(--gav) + 16px)}
/* A ficha da pessoa (380px, `--ficha`) engole o botão pelo mesmo motivo. Com as
   duas abertas vale a mais larga: `max()` em vez de somar, porque elas se
   sobrepõem na tela em vez de ficar lado a lado. */
:root[data-mapa="v2"][data-ficha="aberta"]{--bug-dir:calc(var(--ficha) + 16px)}
:root[data-mapa="v2"][data-gaveta="aberta"][data-ficha="aberta"]{
  --bug-dir:calc(max(var(--gav), var(--ficha)) + 16px)}
:root[data-mapa="v2"] .asideclose{display:block;position:sticky;bottom:0;width:100%;
  padding:13px;background:var(--amber);color:var(--sobre-acento);font-weight:700;
  font-size:12px;letter-spacing:.8px;border:none;border-top:2px solid var(--tinta)}
/* A LEGENDA SAI DA GAVETA (pedido do Gabriel, 17/09/2026): as sete linhas de
   cor, a frase sobre o tamanho do círculo e o aviso de quantos estão no centro
   do município. A gaveta passa a ter só o que muda o recorte.

   `display:none`, e não remoção do DOM: o `10-nucleo.js` faz
   `el('aviso-demo').remove()` em toda conta que não é demonstração, e `el()`
   devolve null quando o elemento não existe — tirar a legenda do HTML derrubaria
   o boot ali. O `avisaLugar()` do 40-mapa.js também escreve dentro dela, e
   continua escrevendo num bloco que ninguém vê, o que custa nada. */
:root[data-mapa="v2"] aside .legend{display:none}

/* O `#mobtoggle` era o único jeito de abrir a gaveta no celular. Agora quem abre
   é o botão da barra de KPIs, nas duas larguras: dois botões para a mesma gaveta
   é uma escolha que ninguém precisa tomar. */
:root[data-mapa="v2"] .mobtoggle{display:none !important}

/* ---------- o botão FILTROS, no fim da barra de KPIs ---------- */
:root[data-mapa="v2"] .kpi-filtros{
  margin-left:auto;flex-shrink:0;display:flex;align-items:center;gap:8px;
  padding:0 20px;min-height:100%;background:var(--bg2);color:var(--txt);
  border:none;border-left:2px solid var(--tinta);
  font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:1px}
:root[data-mapa="v2"] .kpi-filtros svg{width:18px;height:18px;flex-shrink:0}
:root[data-mapa="v2"] .kpi-filtros:hover{background:var(--bg3)}
:root[data-mapa="v2"] .kpi-filtros[aria-expanded="true"]{background:var(--amber);color:var(--sobre-acento)}

/* ---------- o +1 Voto dentro da navbar ----------
 * Encostado nas abas, com o vão preto de 2px entre ele e a última aba, que é o
 * separador desta pele. A borda própria sai: dentro do bloco das abas ela viraria
 * contorno duplo. */
:root[data-mapa="v2"] .tabs{align-items:stretch}
/* A PELE DO COMITÊ ESCONDE O BOTÃO DO TOPO (`:root header .btn-voto` em
   comite.extra.css, decisão da V3 de 11/09: o caminho de cadastrar era o botão
   redondo do rodapé). O chamado #75 pede ele na navbar, então aqui a regra da
   pele é vencida — e só aqui, com a mesma especificidade de `:root` mais o
   atributo do mapa v2. */
/* O TAMANHO É O DA ETIQUETA DO NOME (pedido do Gabriel, 17/09/2026). Medido na
   barra: a etiqueta de quem está logado tem 33px de altura com fonte de 9,5px, e
   o botão tinha 44px com fonte de 12px, esticado pelo `align-items:stretch` das
   abas. `align-self:center` o tira do esticamento, e a altura passa a sair do
   próprio padding.

   Os 44px de alvo de toque não se perdem aqui: no celular este botão não existe
   — quem cadastra por lá é o redondo da barra do rodapé, que tem 82px. No
   desktop o ponteiro é o mouse, e a WCAG 2.2 pede 24px de alvo mínimo. */
:root[data-mapa="v2"] header .btn-voto-tab{
  display:flex;align-items:center;align-self:center;gap:5px;
  border:none;border-left:2px solid var(--tinta);margin:0;box-shadow:none;
  padding:4px 12px;min-height:33px;font-size:10px;font-weight:700;letter-spacing:.6px;
  background:var(--amber);color:var(--sobre-acento)}
:root[data-mapa="v2"] header .btn-voto-tab .raio{width:9px;height:11px;flex-shrink:0}
:root[data-mapa="v2"] header .btn-voto-tab .n{font-family:var(--mono);font-size:11px}
/* Com o botão na navbar, o redondo do rodapé vira um segundo caminho para a
   mesma folha, na mesma tela. No celular é o contrário: lá o redondo é o único,
   porque a navbar rola na horizontal. */
@media (min-width:721px){
  :root[data-mapa="v2"] .voto-barra{display:none}
}

/* ---------- as camadas, agora à direita ----------
 * Abaixo da busca, que já mora em `top:12px; right:12px` com 230px de largura.
 * `top:60px` é o 12 do topo mais os 40 de altura do campo mais 8 de vão. */
/* `width:max-content` na coluna faz ela medir o badge mais largo ("✓ Voto
   confirmado"), e `align-items:stretch` faz os outros três crescerem até lá.
   Assim a fileira tem uma borda esquerda só, em vez de quatro degraus — pedido
   do Gabriel, 17/09/2026. O texto continua alinhado à esquerda dentro de cada
   um, porque centralizar faria "● Contatos" flutuar no meio de uma caixa
   dimensionada por outro. */
:root[data-mapa="v2"] .maptools{
  left:auto;right:12px;top:60px;align-items:stretch;width:max-content}
:root[data-mapa="v2"] .maptools .mt{width:100%;justify-content:flex-start}

/* CONTRASTE DOS BADGES (item 4 do chamado). O fundo passa de `--bg2` (#16191B)
   para `--bg` (#08090A): sobre o mapa escuro o badge ganha massa, e o texto
   `--txt` (#E8EDEF) sai de 13,1:1 para 16,4:1. A altura passa a 40px, que é o
   alvo de toque que o celular já exigia e o desktop não tinha. */
:root[data-mapa="v2"] .mt{
  background:var(--bg);min-height:40px;display:flex;align-items:center;
  font-size:11.5px;padding:8px 13px}
:root[data-mapa="v2"] .mt:hover{background:var(--bg2)}
/* Preto puro sobre o acento, e não o `--sobre-acento` da pele: medido na pele do
   comitê, o framboesa #F90156 dá 4,69:1 com o #0E1011 e 5,11:1 com o preto. A
   diferença é pequena e o badge é texto de 11,5px em cima de um mapa, que é onde
   a margem some. */
:root[data-mapa="v2"] .mt.on{background:var(--gold);color:var(--tinta)}

/* ---------- o badge de VOTOS, à esquerda ---------- */
:root[data-mapa="v2"] .mapvotos{
  position:absolute;top:12px;left:12px;z-index:6;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  width:max-content;max-width:min(64vw,300px)}
:root[data-mapa="v2"] .mv-topo{
  display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px;
  background:var(--bg);border:2px solid var(--tinta);color:var(--txt);
  font-family:var(--body);text-align:left}
:root[data-mapa="v2"] .mv-topo:hover:not(:disabled){background:var(--bg2)}
:root[data-mapa="v2"] .mv-topo:disabled{cursor:default}
:root[data-mapa="v2"] .mv-lbl{
  font-size:9.5px;letter-spacing:1px;text-transform:uppercase;font-weight:700;color:var(--dim);
  line-height:1.2}
/* "Votos" em cima de "Validados" (28/09/2026): cada palavra numa linha. */
:root[data-mapa="v2"] .mv-lbl > span{display:block}
:root[data-mapa="v2"] .mv-val{font-family:var(--mono);font-size:20px;font-weight:700;line-height:1.1}
:root[data-mapa="v2"] .mv-val small{font-size:11px;color:var(--dim);font-weight:400}
:root[data-mapa="v2"] .mv-seta{font-size:11px;color:var(--dim);transition:transform .15s ease}
:root[data-mapa="v2"] .mv-topo[aria-expanded="true"] .mv-seta{transform:rotate(180deg)}
:root[data-mapa="v2"] .mv-topo:disabled .mv-seta{display:none}

/* `display:flex` de autor vence o `display:none` que o navegador dá ao atributo
   `hidden`, e o grupo nasce fechado justamente por `hidden`. Sem esta linha as
   três opções aparecem abertas desde o primeiro quadro e o botão que as abre
   não faz nada visível — foi o que a primeira medição em 800px mostrou. */
:root[data-mapa="v2"] .mapvotos [hidden]{display:none}
:root[data-mapa="v2"] .mv-opcoes{display:flex;flex-direction:column;gap:4px;width:100%}
:root[data-mapa="v2"] .mv-opcoes button{
  display:flex;align-items:center;gap:8px;width:100%;min-height:40px;padding:7px 12px;
  background:var(--bg);border:2px solid var(--tinta);color:var(--txt);
  font-family:var(--body);font-size:11.5px;font-weight:600;text-align:left}
:root[data-mapa="v2"] .mv-opcoes button:hover{background:var(--bg2)}
/* A cor do candidato entra como marca lateral e como bolinha, nunca no texto:
   o framboesa do Cícero dá 4,1:1 sobre o `--bg` e reprovaria no auditor de
   contraste. É a mesma regra que o painel aprendeu em 23/08 com o `--cand`. */
:root[data-mapa="v2"] .mv-opcoes button > i{
  width:11px;height:11px;flex-shrink:0;background:var(--chapa-cor,var(--dim));
  align-self:flex-start;margin-top:3px}
:root[data-mapa="v2"] .mv-opcoes button[aria-checked="true"]{
  background:var(--bg2);box-shadow:inset 4px 0 0 var(--chapa-cor,var(--amber))}
:root[data-mapa="v2"] .mv-op-t{flex:1;min-width:0}
:root[data-mapa="v2"] .mv-op-n{font-family:var(--mono);font-size:13px;font-weight:700;flex-shrink:0}
/* ---------- de quem e o numero grande (20/09/2026) ----------
 * O topo passou a seguir o candidato escolhido, e um numero que troca de valor
 * sem dizer de quem e troca um defeito por outro. A cor vem do registro da
 * chapa, pelo `--chapa-cor` que o JS escreve no proprio elemento. */
:root[data-mapa="v2"] .mv-quem{display:block;font-family:var(--mono);font-size:9px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--chapa-cor,var(--dim));
  margin-top:3px}

/* ---------- a barra de sobreposicao (20/09/2026) ----------
 * A conta de um candidato soma quem vota nele com quem vota nos dois, entao as
 * linhas nao somam o total. A barra mostra isso sem pedir leitura de texto: na
 * cor do candidato, quem vota so nele; em magenta, quem vota nos dois. As duas
 * barras usam a mesma regua, que e o total do recorte.
 *
 * A linha do candidato passa a ter duas alturas de texto, entao o ponto e o
 * numero sobem para o topo com `align-self` e a linha cresce de 40px para 54. */
:root[data-mapa="v2"] .mv-opcoes button[data-barra]{align-items:flex-start;min-height:54px}
/* `flex:1 1 auto` e nao `flex:1`, e sem `min-width:0`: o `.mapvotos` e
   `width:max-content`, e um item com base 0 nao contribui para o max-content do
   pai. Com `flex:1` a gaveta inteira mediu 0px de largura na primeira medicao
   local, e o badge sumia da tela. A base `auto` deixa o nome do candidato
   medir a coluna, como media antes da barra existir. */
:root[data-mapa="v2"] .mv-emp{flex:1 1 auto;display:flex;flex-direction:column;gap:5px}
:root[data-mapa="v2"] .mv-barra{display:flex;height:7px;width:100%;background:var(--bg3,#2B3033)}
/* `min-width` porque um candidato com 3 votos proprios numa regua de 861 daria
   0,9px e sumiria: um traco fino diz "quase nada", traco nenhum diz "nada". */
:root[data-mapa="v2"] .mv-barra .so{background:var(--chapa-cor);min-width:3px}
:root[data-mapa="v2"] .mv-barra .amb{background:var(--violet,#A11E8F)}
:root[data-mapa="v2"] .mv-op-n{align-self:flex-start}

:root[data-mapa="v2"] .mv-dica{
  max-width:280px;padding:7px 10px;background:var(--bg);border:2px solid var(--tinta);
  font-size:10.5px;line-height:1.5;color:var(--dim)}

/* ---------- celular ----------
 * Abaixo de 720px o mapa não comporta dois grupos de badges lado a lado. Os de
 * camada continuam na faixa horizontal rolável do topo, como já estavam; o de
 * VOTOS fica sozinho acima dela e empurra a faixa para baixo. */
@media (max-width:720px){
  /* O +1 Voto some da navbar e volta para a barra fixa do rodapé. Dentro da
     `.tabs`, que rola na horizontal com scroll-snap, o botão mais usado pelo
     cabo sairia da tela sem nada avisar. O seletor repete `header` porque a
     regra que o mostra no desktop também o tem: com um seletor mais curto aqui,
     a primeira medição em 375px mostrou o botão nos dois lugares ao mesmo
     tempo. */
  :root[data-mapa="v2"] header .btn-voto-tab{display:none}
  /* A barra de KPIs rola na horizontal no celular, e `margin-left:auto` põe o
     botão no fim do que rola: a 375px ele nascia fora da tela, e o único jeito
     de abrir os filtros era descobrir que a barra rolava. Grudado na direita,
     ele fica sempre visível. */
  :root[data-mapa="v2"] .kpi-filtros{
    padding:0 14px;min-width:0;position:sticky;right:0;
    box-shadow:-10px 0 18px rgba(0,0,0,.55)}
  /* 44px é o alvo de toque da WCAG 2.2, e é o que o 95-mobile.css já dava à
     fileira de camadas com 13px de padding. A regra do desktop aperta para 8px:
     aqui ela é desfeita. */
  :root[data-mapa="v2"] .mt{padding:13px 11px;min-height:44px}
  :root[data-mapa="v2"] .kpi-filtros span{display:none}
  :root[data-mapa="v2"] .kpi-filtros svg{width:20px;height:20px}

  :root[data-mapa="v2"] .mapvotos{top:10px;left:10px;right:auto;max-width:calc(100vw - 20px)}
  :root[data-mapa="v2"] .mv-opcoes{flex-direction:row;flex-wrap:wrap}
  :root[data-mapa="v2"] .mv-opcoes button{width:auto;min-width:0}
  :root[data-mapa="v2"] .mv-dica{max-width:calc(100vw - 20px)}
  /* A faixa de camadas desce para baixo do badge fechado (44px + 10 de vão), e
     desce mais quando ele abre. `--mv-alt` é escrito pelo 41-mapa-v2.js. */
  /* No celular a fileira é horizontal e ocupa a largura toda, então nem o
     `max-content` nem o afastamento da gaveta valem: ela cobre 92vw da tela e
     não há para onde desviar. */
  :root[data-mapa="v2"] .maptools{
    top:var(--mv-alt,64px);left:10px;right:10px;align-items:stretch;width:auto}
  :root[data-mapa="v2"] aside.open ~ .mapwrap .maptools{right:10px}
  :root[data-mapa="v2"] aside.open ~ .mapwrap .searchbox{right:10px}
  /* O botão de reportar também fica onde está: `calc(92vw + 16px)` em 375px daria
     361px de afastamento e o jogaria para fora da tela pela esquerda. */
  /* No celular o 98-bug.css já levanta o botão para 86px por causa da barra do
     +1 Voto, e isso já passa dos 78px do controle de zoom. */
  :root[data-mapa="v2"]{--bug-baixo:calc(86px + env(safe-area-inset-bottom))}
  :root[data-mapa="v2"][data-gaveta="aberta"]{--bug-dir:16px}
  :root[data-mapa="v2"][data-ficha="aberta"]{--bug-dir:16px}
  /* No celular a ficha é folha inferior de 74vh e a gaveta cobre 92vw: as duas
     tapam o botão inteiro, e não há canto para onde ele escapar. Ele sai da
     tela enquanto elas estão abertas — as duas têm o próprio fechar, e o botão
     volta assim que a pessoa fecha. */
  :root[data-mapa="v2"][data-ficha="aberta"] #bug-btn,
  :root[data-mapa="v2"][data-gaveta="aberta"] #bug-btn{display:none}
  :root[data-mapa="v2"] .maptools .mt{width:auto}
  :root[data-mapa="v2"] .searchbox{top:10px;right:10px;width:min(40vw,160px)}
}

/* ===== css/56-votos-malory.css ===== */
/* ---------- VOTOS MALORY (23/09/2026) ----------
   O filtro, o selo e o painel de identificar do js/56-votos-malory.js. Só
   aparecem na pele que declara `votosMalory`; nas outras nenhum destes seletores
   encontra elemento. O grafite do losango (#3A3A3A) é o mesmo do pin. */

/* os chips do filtro: o mesmo desenho do filtro do estado do contato
   (97-operacao.css), com classe própria porque `funilFiltroMarca` repinta toda
   `.estado-chips` da tela com o valor do filtro DELE */
.vm-chips{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.vm-chips button{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 12px;
  font:inherit;font-size:12px;font-weight:700;line-height:1.2;cursor:pointer;max-width:100%;
  border:2px solid var(--tinta);background:var(--bg);color:var(--txt)}
.vm-chips button[aria-checked="true"]{background:var(--amber);color:var(--sobre-acento);
  border-color:var(--amber)}
.vm-chips button:hover{transform:translate(-1px,-1px)}

/* o losango em SVG, no chip e no selo: herda a cor do texto */
.vm-glifo{width:12px;height:12px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linejoin:miter}

/* o selo da ficha. A validar = contorno tracejado; validado = cheio. O grafite
   do pin NÃO entra aqui: o mapa é claro (light-v11) e a ficha segue o tema da
   pele, que no comitê é quase preto — grafite sobre #16191B daria 1,4:1. As
   cores saem do tema, e a diferença entre os dois estados é de forma. */
.vm-badge{border:1.5px dashed var(--txt);color:var(--txt);background:transparent}
.vm-badge[data-vm="validado"]{border-style:solid;background:var(--txt);color:var(--bg)}

.vm-casa{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;
  margin:4px 0 10px;padding:10px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  border:2px dashed var(--dim);background:var(--bg);color:var(--txt)}
.vm-casa svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2}
.vm-casa:hover{border-style:solid}
.vm-dica{font-size:11px;line-height:1.5;color:var(--dim);margin:8px 0 0}
.vm-marcado{margin:-4px 0 10px;color:var(--txt);font-weight:700}

/* a faixa de mira: some a ficha, o mapa fica livre para arrastar e dar zoom */
.vm-mira{position:fixed;left:12px;right:12px;bottom:calc(16px + env(safe-area-inset-bottom,0px));
  z-index:60;display:flex;align-items:center;justify-content:space-between;gap:12px;
  max-width:560px;margin:0 auto;padding:10px 12px 10px 16px;font-size:13px;font-weight:700;
  background:var(--bg2);color:var(--txt);border:2px solid var(--tinta);box-shadow:3px 3px 0 var(--tinta)}
.vm-mira button{min-height:44px;padding:8px 14px;font:inherit;font-size:12px;font-weight:800;cursor:pointer;
  border:2px solid var(--tinta);background:var(--bg);color:var(--txt)}

/* ===== css/60-ficha.css ===== */
/* ---------- FICHA ---------- */
.ficha{width:var(--ficha);border-left:2px solid var(--tinta);background:var(--bg2);overflow-y:auto;
  flex-shrink:0;display:none}
.ficha.on{display:block}
.fh{padding:16px;border-bottom:2px solid var(--tinta);position:sticky;top:0;background:var(--bg3);z-index:2}
.fh .close{position:absolute;top:14px;right:14px;color:var(--dim);font-size:19px;line-height:1}
.fh .close:hover{color:var(--red)}
.fh h2{font-family:var(--display);font-size:25px;font-weight:800;font-stretch:88%;text-transform:uppercase;
  letter-spacing:-.3px;line-height:1.04;padding-right:26px}
.fh .role{font-size:11.5px;color:var(--cyan);margin-top:4px;letter-spacing:.4px;font-weight:600}
.fh .loc{font-size:11.5px;color:var(--dim);margin-top:2px}
.fsec{padding:14px 16px;border-bottom:1.5px solid var(--line)}
.fsec h3{font-size:9.5px;letter-spacing:1.2px;color:var(--dim2);text-transform:uppercase;
  margin-bottom:9px;font-weight:700}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{background:var(--bg);border:2px solid var(--tinta);padding:9px 11px}
.stat .l{font-size:9.5px;color:var(--dim);letter-spacing:.7px;text-transform:uppercase;font-weight:700}
.stat .v{font-family:var(--mono);font-size:19px;font-weight:700;margin-top:2px}
.meter{height:6px;background:var(--bg3);border:1px solid var(--line2);margin-top:6px;overflow:hidden}
.meter i{display:block;height:100%}
.kv{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.kv:last-child{border:none}
.kv span:first-child{color:var(--dim)}
.kv span:last-child{font-weight:500;text-align:right}
.tags{display:flex;flex-wrap:wrap;gap:5px}
.tag{font-size:10.5px;padding:3px 8px;background:var(--bg3);font-weight:600;
  border:1.5px solid var(--line2);color:var(--dim)}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;padding:3px 10px;font-weight:700;
  border:1.5px solid var(--tinta)}
.b-conf{background:#CFEEDD;color:#0F6B3F}
.b-prom{background:var(--gold);color:#6B4A00}
.b-entr{background:var(--azul);color:#0B4C60}
/* O ESTADO DO CONTATO no cabecalho da ficha (13/09/2026), ao lado do status de
   verificacao. Sao duas perguntas diferentes e por isso sao dois selos: o
   status diz se a promessa foi conferida, o estado diz em que ponto do funil a
   pessoa esta. Neutro por padrao, e com tom so nos tres que encerram o contato
   (`ok` e `off` do CATALOGO_FUNIL) — pintar os seis faria o cabecalho competir
   com o selo ao lado, que e o que decide a leitura. */
.b-fest{background:var(--bg3);color:var(--dim);border-color:var(--line2)}
/* `ok` ganha peso, e nao cor: o selo de status ao lado ja e verde, amarelo ou
   azul chapado, e dois selos coloridos lado a lado disputam a leitura. Verde
   aqui tambem nao serviria de sinal no comite, onde o tema declara
   `--green:#9AA7AD` por causa do alerta de cor politica. */
.b-fest[data-tom="ok"]{color:var(--txt);border-color:var(--txt);font-weight:800}
/* --dim2 e nao --dim daria 4.22:1 sobre --bg3 no tema do comite, medido a
   375px em 13/09: abaixo do 4.5 que a WCAG 2.2 pede para texto de 10.5px. O
   sinal de "encerrado" fica so na borda tracejada, que nao depende de contraste
   de cor nenhum. */
.b-fest[data-tom="off"]{color:var(--dim);border-style:dashed}
.tree{font-family:var(--mono);font-size:11.5px;line-height:1.85}
.tree .up{color:var(--dim)}
.tree .me{color:var(--amber);font-weight:700}
.tree .dn{color:var(--cyan);cursor:pointer}
.tree .dn:hover{text-decoration:underline}
.tree .ind{color:var(--dim2)}
.empty{color:var(--dim2);font-size:12px;font-style:italic}

/* ===== css/65-ficha-edicao.css ===== */
/* ---------- EDICAO NA FICHA (so na plataforma) ---------- */
.fedit label{display:block;font-size:9.5px;letter-spacing:1.1px;color:var(--dim);
  text-transform:uppercase;font-weight:700;margin:0 0 5px}
/* 16px NO CAMPO NÃO É TAMANHO DE LETRA, É CONSERTO DE CELULAR (13/09/2026).
   Mesmo desenho do 97-operacao.css (commit 7bb2152): o Safari do iPhone dá zoom
   sozinho ao focar um campo com fonte menor que 16px, e o zoom não volta quando
   a pessoa sai dele — a tela fica ampliada e o resto do formulário vira rolagem
   lateral. O `user-scalable=no` do index.html não segura: o iOS ignora aquilo
   desde a versão 10, de propósito, para não quebrar acessibilidade.
   Medido antes: os onze campos da ficha em 13px. O `min-height` de 44px não
   existia aqui — o alvo saía com 35px, abaixo do mínimo da casa. */
.fedit input,.fedit select,.fedit textarea{width:100%;padding:8px 10px;font-size:16px;
  min-height:44px;box-sizing:border-box;
  background:var(--bg);border:1.5px solid var(--line2);outline:none;margin-bottom:11px;
  font-family:inherit;color:var(--txt)}
.fedit input:focus,.fedit select:focus,.fedit textarea:focus{border-color:var(--amber)}
.fedit textarea{min-height:74px;resize:vertical;line-height:1.5}
.fedit .par{display:grid;grid-template-columns:1fr 1fr;gap:0 11px}
.fbtns{display:flex;gap:9px;margin-top:3px}
/* min-height de 44px: o `.fbtn` é o botão de salvar da ficha e o de várias
   telas irmãs, e sozinho ele saía com 36px de altura. Quem já declara mais
   (`.cadacoes .fbtn` em 46px) continua ganhando — isto é piso, não teto. */
.fbtn{flex:1;padding:10px;min-height:44px;font-family:var(--display);font-size:11.5px;font-weight:800;
  letter-spacing:1px;text-transform:uppercase;border:2px solid var(--tinta);
  box-shadow:2px 2px 0 var(--tinta);transition:.12s;background:var(--bg2)}
.fbtn:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--tinta)}
.fbtn:disabled{opacity:.5;cursor:wait}
.fbtn.pri{background:var(--amber);color:var(--sobre-acento)}
.fbtn.gh{background:var(--bg2);color:var(--dim)}
.fmsg{font-size:11.5px;padding:8px 10px;margin-bottom:10px;border:1.5px solid var(--tinta);line-height:1.45}
.fmsg[hidden]{display:none}
.fmsg.erro{background:#FBE3DE;color:#8E1F0B}
.fmsg.ok{background:#DFF3E7;color:#0E5C36}
/* somar origem: o mesmo desenho de etiqueta do +1 Voto, para quem ja usou um
   reconhecer o outro. Origem que a pessoa ja tem fica visivel e desligada. */
.somaorg{border-top:1.5px solid var(--line2);margin:2px 0 11px;padding-top:11px}
.somadica{font-size:11px;line-height:1.45;color:var(--dim);margin:0 0 8px}
.orgchips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px}
/* O chip de origem é alvo de dedo: saía com 27px de altura. */
.orgchips button{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;min-height:44px;font-size:11.5px;
  font-family:inherit;background:var(--bg);border:1.5px solid var(--line2);color:var(--txt);cursor:pointer}
.orgchips button i{width:8px;height:8px;border:1px solid var(--tinta);flex:none}
.orgchips button:hover:not(:disabled){border-color:var(--tinta)}
.orgchips button.on{border-color:var(--amber);box-shadow:2px 2px 0 var(--amber)}
.orgchips button.ja{opacity:.42;cursor:default;text-decoration:line-through}
.btn-nova{width:100%;padding:10px;min-height:44px;border:2px solid var(--tinta);font-size:11.5px;font-weight:800;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.9px;color:var(--sobre-acento);
  background:var(--amber);box-shadow:var(--dura);margin-bottom:9px}
.btn-nova:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--tinta)}

/* ===== css/70-rede.css ===== */
/* ---------- REDE: colmeia de origens ---------- */
.redewrap{flex:1;display:flex;min-height:0}
.redepalco{flex:1 1 auto;position:relative;min-width:0;background:var(--bg);overflow:hidden;
  touch-action:none}
/* touch-action no PROPRIO canvas, nao so no pai: o WKWebView do iOS decide o
   gesto pelo alvo do toque, e sem isto o Safari rouba a pinca (vira zoom de
   pagina) e o arrasto (vira scroll). Foi o "arrasta nao funciona" do app. */
#redecv{width:100%;height:100%;display:block;cursor:grab;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

.redetools{position:absolute;left:11px;top:11px;display:flex;gap:6px;flex-wrap:wrap;z-index:4;
  max-width:calc(100% - 22px)}
.redezoom{position:absolute;right:11px;bottom:11px;display:flex;gap:6px;z-index:4}
.redezoom button{font:inherit;font-size:15px;font-weight:800;width:34px;height:34px;cursor:pointer;
  border:2px solid var(--tinta);background:var(--bg2);color:var(--tinta);line-height:1;
  box-shadow:2px 2px 0 var(--tinta)}
.redepe{position:absolute;left:12px;bottom:12px;z-index:3;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.08em;color:var(--dim)}

/* coluna da direita: filtro de origem, correspondencias e ficha com log */
.redelado{flex:0 0 316px;border-left:2px solid var(--tinta);background:var(--bg2);
  overflow:auto;padding:13px}
.redelado h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-bottom:8px;display:flex;align-items:center;gap:7px}
.redelado h3+*{margin-top:0}
.redelado .rconta{font-size:10px;border:1.5px solid var(--line2);padding:1px 5px;color:var(--tinta)}
.redelado>*+h3{margin-top:16px}

.rchips{display:flex;flex-wrap:wrap;gap:6px}
.redelado .chip{font:inherit;font-size:11.5px;cursor:pointer;padding:5px 9px;
  border:2px solid var(--tinta);background:var(--bg);display:flex;align-items:center;gap:6px}
/* Escolhido = massa de acento com a frente MEDIDA, o mesmo par de
   74-cadastro.css e de comite.extra.css. A versao anterior era
   `background:var(--tinta);color:var(--bg)`, que na pele do comite pinta
   #08090A sobre #000000: contraste 1.05:1, ou seja o rotulo da origem
   escolhida sumia. O hover tinha o defeito irmao, e ninguem tinha medido:
   --txt sobre --gold da 3.44:1. Com --sobre-acento os dois vao a 4.69:1.
   A cor continua saindo do TEMA (--amber e o acento da pele), nunca escrita
   aqui: em cada pele ela e o acento da campanha daquele cliente. */
.redelado .chip:hover{background:var(--gold);color:var(--sobre-acento)}
.redelado .chip.on{background:var(--amber);color:var(--sobre-acento);border-color:var(--amber)}
.redelado .chip .pt{width:9px;height:9px;border:1px solid var(--tinta);flex:0 0 auto}
/* a bolinha da origem tem contorno de tinta, que some sobre o acento */
.redelado .chip.on .pt,.redelado .chip:hover .pt{border-color:var(--sobre-acento)}
.redelado .chip.fantasma{border-style:dashed;color:var(--dim)}

.rcartao{border:2px solid var(--tinta);background:var(--bg);box-shadow:3px 3px 0 var(--tinta);
  padding:11px;margin-bottom:11px}
.rcartao.clicavel{cursor:pointer}
.rcartao.clicavel:hover{box-shadow:3px 3px 0 var(--amber)}
.rnome{font-weight:800;font-size:14.5px;line-height:1.25}
.rnome.peq{font-size:13.5px}
.rmeta{font-size:11.5px;color:var(--dim);margin-top:2px}
.restrelas{color:var(--amber);letter-spacing:2px;font-size:13px}
.rtag{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;
  border:1.5px solid var(--tinta);padding:2px 5px;margin:3px 3px 0 0;background:var(--bg2)}
.rnota{font-size:11.5px;color:var(--dim);line-height:1.55;margin-bottom:9px}
.rbandeira{border:2px solid var(--amber);background:#FDEAE1;padding:9px 11px;font-size:12px;
  margin-bottom:11px}
.rbandeira b{color:var(--amber)}

.rlog{list-style:none;font-size:12px}
.rlog li{padding:7px 0 7px 11px;border-left:2px solid var(--line2);position:relative}
.rlog li::before{content:'';position:absolute;left:-5px;top:12px;width:8px;height:8px;
  background:var(--tinta);border-radius:50%}
.rlog time{font-family:var(--mono);font-size:10px;color:var(--dim);display:block}
.rlog .como{color:var(--dim)}

/* leva a lista para a vista sem depender de o dedo achar a borda do canvas */
.redeabaixo{position:absolute;left:50%;transform:translateX(-50%);bottom:11px;z-index:4;
  display:none;font-family:var(--mono);font-size:10px;letter-spacing:.1em;padding:8px 13px;
  border:2px solid var(--tinta);background:var(--gold);color:var(--tinta);
  box-shadow:2px 2px 0 var(--tinta)}

@media(max-width:860px){
  /* No celular a coluna vira continuacao da pagina, e a PAGINA rola.
     Antes o app inteiro era de altura fixa com overflow escondido: a lista
     existia embaixo do canvas e não havia como chegar nela. */
  .redewrap{flex-direction:column}
  .redepalco{flex:0 0 auto;height:56vh;height:56dvh}
  .redelado{flex:1 1 auto;border-left:0;border-top:2px solid var(--tinta);width:100%;
    overflow:visible}
  .redepe{display:none}
  .redeabaixo{display:block}
  .redetools{gap:5px}
  .redetools .mt{font-size:11px;padding:7px 9px}
  /* alvo de toque de verdade: 44px e o minimo que o dedo acerta */
  .redezoom button{width:44px;height:44px;font-size:19px}
}

/* ===== css/72-rede-obsidian.css ===== */
/* ---------- REDE: template Obsidian (beta) ----------
 * Vive em arquivo proprio pelo mesmo motivo do js/62: e um beta, e beta que se
 * mistura com o CSS da colmeia nao se apaga depois.
 *
 * Nenhuma cor escrita aqui. Todas saem do tema da pele, senao a pele nova
 * pinta o topo certo e deixa o palco com a cor da pele antiga.
 */

/* O canvas do beta e irmao do #redecv e ocupa o mesmo palco. So um dos dois
   fica visivel; quem troca e o js. */
#obscv{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#obscv[hidden]{display:none}
/* `hidden` precisa ganhar do display do componente. Sem isto os dois canvas
   ficam desenhando ao mesmo tempo, um por cima do outro: e o mesmo empate que
   fazia o selo DEMO aparecer na tela de entrada da plataforma. */
#redecv[hidden]{display:none}

/* ---------- seletor de template ----------
   No alto a direita do palco: o canto livre (a barra de modos ocupa a esquerda
   e o zoom o pe direito). Etiqueta pequena de propósito, porque escolher
   template e coisa que se faz uma vez, nao a cada uso. */
.redetpl{position:absolute;right:11px;top:11px;z-index:5;display:flex;gap:0;
  border:2px solid var(--tinta);background:var(--bg2);box-shadow:var(--dura)}
.redetpl button{font:inherit;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;padding:7px 10px;min-height:34px;cursor:pointer;
  background:transparent;color:var(--dim);border:0;display:flex;align-items:center;gap:5px}
.redetpl button+button{border-left:2px solid var(--tinta)}
.redetpl button:hover{color:var(--txt)}
/* O ativo usa o mesmo par das abas do topo (amarelo com tinta por cima).
   Antes era tinta sobre bg: na pele do produto `--tinta` e preto puro e o
   fundo e grafite, entao o botao ligado ficava preto sobre preto e ninguem
   via qual template estava escolhido. */
.redetpl button.on{background:var(--gold);color:var(--tinta)}
.redetpl button.on i{opacity:.9}
.redetpl i{font-style:normal;font-size:8px;letter-spacing:.1em;padding:1px 4px;
  border:1px solid currentColor;opacity:.75}

/* ---------- barra de atalhos do celular ----------
   So existe no beta e so no celular. Motivo: neste template o desenho ocupa a
   tela inteira, entao o que estava em outros menus desce para a faixa do
   polegar em vez de sumir. No computador ela nao nasce, porque la o cadastro
   mora no topo e a lista esta sempre a vista na coluna da direita. */
.obsbarra{display:none}

/* ---------- o beta ligado ---------- */
/* o rodape de instrucao e o botao "ver a lista" sao da colmeia: aqui o proprio
   canvas escreve o rodape, e a lista tem botao proprio no celular */
.redewrap.obs .redepe,
.redewrap.obs .redeabaixo{display:none}

@media(max-width:860px){
  /* D4 (Gabriel, 19/08/2026): no celular o grafo e vertical e preenche a tela
     inteira. O acesso movel e grande e um desenho redondo dentro de 56vh
     desperdicava metade da altura. */
  .redewrap.obs .redepalco{flex:1 1 auto;height:calc(100dvh - var(--head));
    min-height:calc(100dvh - var(--head))}

  /* a lista da direita vira folha de baixo, que sobe pelo botao "Lista" */
  .redewrap.obs .redelado{position:fixed;left:0;right:0;bottom:0;z-index:70;
    max-height:72dvh;overflow:auto;border-top:2px solid var(--tinta);border-left:0;
    background:var(--bg2);transform:translateY(101%);transition:transform .22s ease;
    padding:13px 13px calc(74px + env(safe-area-inset-bottom))}
  .redewrap.obs .redelado.aberta{transform:none;box-shadow:0 -14px 34px rgba(0,0,0,.34)}

  /* a barra fixa de cadastro sai de cena: o mesmo botao esta na obsbarra, e
     duas barras empilhadas comiam 130px da tela que o desenho acabou de ganhar */
  body.obs-on[data-aba="rede"] .voto-barra{display:none}

  .obsbarra{display:flex;position:absolute;left:0;right:0;bottom:0;z-index:6;gap:7px;
    padding:9px 11px calc(9px + env(safe-area-inset-bottom));
    background:linear-gradient(to top,var(--bg) 62%,transparent)}
  .obsbarra button{flex:1;font:inherit;font-weight:700;font-size:12.5px;
    /* 44px e o alvo minimo que o dedo acerta sem errar (D3) */
    min-height:44px;padding:11px 8px;cursor:pointer;
    border:2px solid var(--tinta);background:var(--bg2);color:var(--txt);
    box-shadow:var(--dura)}
  .obsbarra button:active{transform:translate(2px,2px);box-shadow:none}
  .obsbarra .destaque{background:var(--amber);color:var(--sobre-acento);flex:1.25}

  /* o seletor de template desce do canto para nao brigar com o topo estreito,
     e vira etiqueta unica: no celular ninguem le duas palavras la em cima */
  .redewrap.obs .redetpl{top:auto;bottom:66px;right:11px;box-shadow:none}
  .redewrap.obs .redetpl button{min-height:34px;font-size:9.5px;padding:6px 9px}

  /* alvo de toque de verdade tambem no zoom, e acima da barra nova */
  .redewrap.obs .redezoom{bottom:66px;left:11px;right:auto}
  .redewrap.obs .redezoom button{width:44px;height:44px;font-size:19px}

  /* a barra de modos vira faixa recolhida, do mesmo jeito que a pele do
     produto ja fazia na colmeia: no palco cheio ela e resposta, nao ruido */
  .redewrap.obs .redetools{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    max-width:calc(100% - 22px)}
  .redewrap.obs .redetools::-webkit-scrollbar{display:none}
  .redewrap.obs .redetools .mt{flex:0 0 auto;min-height:36px;white-space:nowrap}
  .redewrap.obs .redetools:not(.aberta) .mt{display:none}
  .redewrap.obs .redetools:not(.aberta) .mt.on{display:flex;align-items:center}
  /* o "Filtros" do alto sai: quem abre a barra aqui e o botao da faixa do
     polegar, e dois botoes com o mesmo nome na mesma tela e so confusao */
  .redewrap.obs .redetools .abre-filtros{display:none}
}

/* ---------- computador ----------
   O palco ja ocupa toda a altura disponivel e a coluna da direita esta sempre
   a vista, entao aqui nao sobra espaco para preencher: o que muda e so o
   canvas. Mantido explicito para nao herdar a altura fixa do celular. */
@media(min-width:861px){
  .redewrap.obs .redepalco{height:100%}
  .redewrap.obs .redelado{transform:none}
}

/* ===== css/74-cadastro.css ===== */
/* ---------- ABA CADASTRO ----------
 * Duas metades: o formulario a esquerda e a base com busca a direita. No
 * celular vira uma coluna e a pagina rola, como as outras abas que nao sao o
 * mapa.
 *
 * Nenhuma cor escrita aqui: todas saem do tema da pele.
 */

/* A barra de KPIs e do MAPA. Nesta aba o espaco vale mais para o formulario,
   e a pagina precisa rolar porque o conteudo e mais alto que a tela. */
body[data-aba="cadastro"] .kpibar{display:none}
body[data-aba="cadastro"] main{height:calc(100dvh - var(--head))}

#pane-cadastro{overflow:auto}
.cadwrap{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:0;width:100%;
  align-items:start}

/* ---------- formulario ---------- */
.cadform{padding:16px 18px 34px;min-width:0}
.cadtopo{margin-bottom:14px}
.cadtopo h2{font-family:var(--display);font-size:21px;font-weight:800;letter-spacing:-.01em}
.cadtopo p{font-size:12px;color:var(--dim);margin-top:3px}

.cadform fieldset{border:2px solid var(--tinta);background:var(--bg2);
  padding:10px 13px 14px;margin-bottom:14px;box-shadow:var(--dura)}
/* Superficie neutra, nao `--tinta` sobre `--bg`: na pele do produto a tinta e
   preto puro e o fundo e grafite, entao a legenda saia preta sobre preta e as
   quatro secoes viravam quatro tarjas cegas. */
.cadform legend{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;background:var(--bg3);color:var(--txt);padding:3px 8px;
  border:1.5px solid var(--line2)}

.cadcampos{display:grid;grid-template-columns:repeat(12,1fr);gap:10px;margin-top:6px}
.cadcampos .c{display:flex;flex-direction:column;gap:3px;min-width:0}
/* O display acima empata com o [hidden] do navegador, e quem vem depois manda.
   Sem esta linha o campo de Causa fica na tela mesmo com a origem trocada, que
   e exatamente o empate que fazia o selo DEMO aparecer na plataforma. */
.cadcampos .c[hidden]{display:none}
.cadcampos .c.g3{grid-column:span 3}
.cadcampos .c.g4{grid-column:span 4}
.cadcampos .c.g6{grid-column:span 6}
.cadcampos .c.g12{grid-column:span 12}
.cadcampos label{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);font-weight:700}
.cadcampos label .ob{color:var(--amber)}
.cadcampos label .au{font-family:var(--mono);font-size:9px;letter-spacing:.06em;
  border:1px solid var(--line2);padding:0 4px;margin-left:4px;text-transform:none}
/* 16px NO CAMPO NÃO É TAMANHO DE LETRA, É CONSERTO DE CELULAR (13/09/2026).
   Mesmo desenho do 97-operacao.css (commit 7bb2152): o Safari do iPhone dá zoom
   sozinho ao focar um campo com fonte menor que 16px, e o zoom não volta quando
   a pessoa sai dele — a tela fica ampliada e o formulário vira rolagem lateral.
   O `user-scalable=no` do index.html não segura: o iOS ignora aquilo desde a
   versão 10, para não quebrar acessibilidade. Esta é a aba em que o cabo passa o
   dia, e são vinte campos: medido antes, todos em 13.5px.
   Os 38px de altura são do DESKTOP e continuam; abaixo de 860px o bloco no fim
   deste arquivo já leva tudo para 44px, que é a largura em que se usa o dedo. */
.cadcampos input,.cadcampos select,.cadcampos textarea{
  font:inherit;font-size:16px;padding:8px 9px;border:2px solid var(--tinta);
  background:var(--bg);color:var(--txt);width:100%;min-height:38px}
.cadcampos textarea{resize:vertical;min-height:58px}
.cadcampos input:focus,.cadcampos select:focus,.cadcampos textarea:focus{
  outline:none;box-shadow:2px 2px 0 var(--amber)}
.caddica{font-size:11.5px;color:var(--dim);line-height:1.5}

/* chips de origem: o mesmo objeto da folha de cadastro rapido, para quem
   aprendeu la nao reaprender aqui */
/* O SELETOR DO ESTADO dentro do grid de doze colunas (13/09/2026).
   O componente e declarado uma vez em 90-voto.css; aqui so o que muda por
   estar dentro de `.cadcampos`, que e um grid com `gap` proprio — a margem de
   baixo do componente somaria com o gap e abriria um buraco no meio do
   formulario. O rotulo casa com o dos outros campos da aba (10.5px), e nao
   com o da folha (10px): duas telas, duas escalas de tipografia ja aprovadas. */
.cadcampos .funil-campo{margin:0;gap:0}
.cadcampos .funil-campo>span{font-size:10.5px;letter-spacing:.06em;margin-bottom:6px}
.cadcampos .funil-chips button{font-size:12px}
.cadcampos .funil-dica{margin-top:7px}

.cadform .orgchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.cadform .orgchips button{display:flex;align-items:center;gap:6px;font:inherit;font-size:12px;
  padding:8px 10px;min-height:38px;cursor:pointer;border:2px solid var(--tinta);
  background:var(--bg);color:var(--txt)}
.cadform .orgchips button i{width:9px;height:9px;border:1px solid var(--tinta);flex:0 0 auto}
/* Escolhido = massa de acento, nao tinta sobre fundo. Tinta sobre fundo so
   funciona onde os dois contrastam, e na pele do produto eles nao contrastam:
   tinta e preto puro e o fundo e grafite. Amber com --sobre-acento le nas duas. */
.cadform .orgchips button.on{background:var(--amber);color:var(--sobre-acento);
  border-color:var(--amber)}

.cadacoes{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.caderro{font-size:12px;color:var(--red);font-weight:700}
#cad-feito{margin-top:11px}
#cad-feito .feito{border:2px solid var(--green);background:var(--bg2);padding:11px;
  font-size:12.5px;line-height:1.55}
#cad-feito .feito b{color:var(--green)}
#cad-feito .fbtn{margin-top:8px}
#cad-achado.achou{border:2px solid var(--amber);background:var(--bg3);padding:11px;
  font-size:12.5px;margin-top:10px;line-height:1.55}
#cad-achado[hidden]{display:none}

/* ---------- lista ---------- */
.cadlista{border-left:2px solid var(--tinta);background:var(--bg2);padding:13px;
  min-height:100%;min-width:0}
/* 44px e não 40: a busca da base é alvo de dedo como qualquer outro. */
.cadbusca input{width:100%;font:inherit;font-size:16px;padding:9px 10px;min-height:44px;
  border:2px solid var(--tinta);background:var(--bg);color:var(--txt)}
.cadbusca input:focus{outline:none;box-shadow:2px 2px 0 var(--amber)}
.cadlista .rchips{margin-top:9px}
/* O chip de filtro da base saía com 34px de altura, e é botão. */
.cadlista .chip{font:inherit;font-size:11.5px;cursor:pointer;padding:6px 9px;min-height:44px;
  border:2px solid var(--tinta);background:var(--bg);color:var(--txt);
  display:flex;align-items:center;gap:6px}
.cadlista .chip.on{background:var(--amber);color:var(--sobre-acento);border-color:var(--amber)}
.cadlista .chip .pt{width:9px;height:9px;border:1px solid var(--tinta);flex:0 0 auto}
.cadlista h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin:15px 0 8px;display:flex;align-items:center;gap:7px}
.cadlista .rconta{font-size:10px;border:1.5px solid var(--line2);padding:1px 5px;color:var(--txt)}

.cadlinha{display:flex;align-items:center;gap:9px;padding:9px 8px;cursor:pointer;
  border-bottom:1.5px solid var(--line);min-height:44px}
.cadlinha:hover{background:var(--bg3)}
.cadlinha .pt{width:10px;height:10px;border:1.5px solid var(--tinta);flex:0 0 auto}
.cadquem{flex:1;min-width:0}
.cadquem .rnome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cadquem .rmeta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cadnota{flex:0 0 auto;text-align:right;font-size:11px;display:flex;
  flex-direction:column;align-items:flex-end;gap:2px;max-width:96px}
#cad-mais{margin-top:11px;width:100%}

@media(max-width:1180px){ .cadwrap{grid-template-columns:minmax(0,1fr) 310px} }

@media(max-width:860px){
  /* uma coluna, e a PAGINA rola: a lista mora embaixo do formulario e sem
     soltar a rolagem nao havia como chegar nela, o mesmo que ja acontecia na
     aba Rede */
  body[data-aba="cadastro"] main{height:auto;min-height:calc(100dvh - var(--head))}
  body[data-aba="cadastro"] .pane.on{height:auto}
  body[data-aba="cadastro"] .cadlista{padding-bottom:84px}
  .cadwrap{grid-template-columns:1fr}
  .cadform{padding:13px 12px 18px}
  .cadlista{border-left:0;border-top:2px solid var(--tinta)}
  /* num palco de 390px, doze colunas viram tres campos ilegiveis por linha */
  .cadcampos .c.g3{grid-column:span 6}
  .cadcampos .c.g4{grid-column:span 6}
  .cadcampos .c.g6{grid-column:span 12}
  /* alvo de toque de verdade no que se aperta com o polegar */
  .cadcampos input,.cadcampos select{min-height:44px}
  .cadcampos textarea{min-height:66px}
  .cadform .orgchips button{min-height:44px}
  .cadacoes .fbtn{flex:1;min-height:46px}
}

/* ===== css/80-disputa.css ===== */
/* ---------- DISPUTA ---------- */
.disp{flex:1;overflow-y:auto;padding:22px}
.disp h2{font-family:var(--display);font-size:27px;font-weight:800;font-stretch:88%;
  text-transform:uppercase;letter-spacing:-.4px;margin-bottom:5px}
.disp .lead{font-size:12.5px;color:var(--dim);margin-bottom:20px;max-width:720px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:14px;margin-bottom:22px}
.card{background:var(--bg2);border:2px solid var(--tinta);padding:17px;box-shadow:var(--dura)}
.card h3{font-size:10px;letter-spacing:1.2px;color:var(--dim);text-transform:uppercase;
  margin-bottom:13px;font-weight:700}
.bar-row{display:flex;align-items:center;gap:9px;margin-bottom:9px;font-size:12px}
.bar-row .nm{width:104px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-row .bw{flex:1;height:17px;background:var(--bg3);border:1.5px solid var(--tinta);overflow:hidden}
.bar-row .bw i{display:block;height:100%}
.bar-row .pc{font-family:var(--mono);width:44px;text-align:right;font-size:12px}
.flag{display:flex;gap:11px;padding:12px 0;border-bottom:1.5px solid var(--line);font-size:12.5px}
.flag:last-child{border:none}
.flag .ic{width:22px;flex-shrink:0;text-align:center;font-size:15px}
.flag b{display:block;margin-bottom:2px;font-size:12.5px}
.flag p{color:var(--dim);font-size:11.5px;line-height:1.5}
.tbl{width:100%;border-collapse:collapse;font-size:12px}
.tbl th{text-align:left;font-size:9.5px;letter-spacing:1px;color:var(--dim);text-transform:uppercase;
  padding:8px 9px;border-bottom:2px solid var(--tinta);font-weight:700}
.tbl td{padding:8px 9px;border-bottom:1px solid var(--line)}
.tbl tr:hover td{background:var(--gold)}
.tbl .num{font-family:var(--mono);text-align:right;color:var(--amber);font-weight:700}
.note{font-size:11px;color:var(--dim);font-style:italic;margin-top:12px;line-height:1.6}

/* ---------- placar da vaga (a conta que decide a eleicao) ---------- */
.placar{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;
  margin-bottom:20px}
.pl{border:2px solid var(--tinta);background:var(--bg2);box-shadow:var(--dura);padding:13px 15px}
.pl.destaque{background:var(--tinta);color:var(--bg)}
.pl.destaque .rot,.pl.destaque .sub{color:var(--line2)}
.pl .rot{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim)}
.pl b{display:block;font-family:var(--mono);font-size:30px;font-weight:700;line-height:1.1;
  margin:5px 0 3px;letter-spacing:-.5px}
.pl b.verde{color:var(--green)}
.pl.destaque b{color:var(--gold)}
.pl .sub{display:block;font-size:11.5px;color:var(--dim);line-height:1.4}

/* 37 candidatos para 7 vagas: a conta que ninguem mostra ao candidato */
.dentro{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.dentro .dn{flex:1;text-align:center;border:2px dashed var(--line2);padding:11px 6px}
.dentro .dn b{display:block;font-family:var(--mono);font-size:27px;line-height:1}
.dentro .dn b.amber{color:var(--amber)}
.dentro .dn span{display:block;font-size:11px;color:var(--dim);line-height:1.35;margin-top:5px}
.dentro .seta{font-size:20px;color:var(--dim2)}

.bar-row .pos{width:19px;flex-shrink:0;font-family:var(--mono);font-size:11px;color:var(--dim)}
.bar-row .pos.dentro{color:var(--amber);font-weight:700}
.bar-row .cad{width:17px;text-align:right;font-family:var(--mono);font-size:11px;color:var(--dim2)}
.fontes{list-style:none;font-size:12px;line-height:1.6;color:var(--dim)}
.fontes li{padding-left:13px;position:relative;margin-bottom:7px}
.fontes li::before{content:'';position:absolute;left:0;top:7px;width:5px;height:5px;
  background:var(--line2)}
.fontes b{color:var(--txt)}
.fontes code{font-family:var(--mono);font-size:11px;background:var(--bg3);padding:1px 4px}

@media(max-width:860px){
  .disp{padding:15px}
  .placar{grid-template-columns:1fr 1fr;gap:9px}
  .pl b{font-size:24px}
}

/* nomes anunciados da chapa: lista parcial, e a tela diz isso em letra grande */
.nominata{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px}
.nm-chip{font-size:12px;padding:5px 9px;border:1.5px solid var(--line2);background:var(--bg)}
.nm-chip.dep{border-color:var(--cyan);color:var(--cyan)}
.nm-chip.eu{background:var(--amber);color:var(--sobre-acento);border-color:var(--tinta);font-weight:800;
  box-shadow:2px 2px 0 var(--tinta)}

/* --- 2026: o retrato que vem do Radar PB (sync diario do TSE) --------------
 * Sem cor propria: tudo sai dos tokens do tema, entao a secao nasce certa nas
 * duas peles e em qualquer pele futura. */
.e26-topo{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin:4px 0 14px}
.e26-topo .quando{font-family:var(--mono);font-size:10.5px;color:var(--dim2);letter-spacing:.04em}
.lk{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--txt);text-decoration:none;border:2px solid var(--tinta);background:var(--bg2);
  box-shadow:var(--dura);padding:8px 12px;transition:transform .12s}
.lk:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--tinta)}
.lk .ex{color:var(--dim2);margin-left:6px}
.pesq .bar-row .nm{width:120px}
.delta{font-family:var(--mono);font-size:10.5px;width:46px;text-align:right;flex-shrink:0}
.delta.sobe{color:var(--green)}
.delta.desce{color:var(--red)}
.delta.novo{color:var(--dim2)}
.selo-fonte{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  border:1.5px solid var(--line2);padding:3px 7px;margin-bottom:10px;color:var(--dim)}
/* O numero de urna vira parte do chip. `.eu` e `.dep` ja existem la em cima e
 * mandam na cor do chip: aqui so o numero herda o contraste certo de cada um. */
.nm-chip .num{font-family:var(--mono);font-size:10px;color:var(--dim2);margin-left:5px;
  font-style:normal}
.nm-chip.dep .num{color:var(--cyan)}
.nm-chip.eu .num{color:var(--sobre-acento);opacity:.85}
.alerta{display:flex;gap:10px;padding:10px 0;border-bottom:1.5px solid var(--line);font-size:12px}
.alerta:last-child{border:none}
.alerta .lv{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  border:1.5px solid var(--line2);padding:3px 6px;height:fit-content;flex-shrink:0;color:var(--dim)}
.alerta .lv.atencao{border-color:var(--amber);color:var(--amber)}
.alerta b{display:block;margin-bottom:3px;font-size:12px}
.alerta p{color:var(--dim);font-size:11.5px;line-height:1.5}
.cal{display:grid;gap:8px}
.cal-it{display:flex;align-items:baseline;gap:10px;font-size:12px}
.cal-it .dt{font-family:var(--mono);font-size:11px;color:var(--amber);width:52px;flex-shrink:0}
.cal-it.passou .dt{color:var(--dim2)}
.cal-it.passou{color:var(--dim2);text-decoration:line-through;text-decoration-thickness:1px}
.cal-it .falta{font-family:var(--mono);font-size:10px;color:var(--dim2);margin-left:auto}
/* Governo e Senado lado a lado dentro do mesmo card: numa tela larga, uma
 * coluna de 16 linhas deixa metade do card vazia. */
.maj{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
@media(max-width:760px){.maj{gap:14px}}
.alerta .lv.critico{border-color:var(--red);color:var(--red)}
/* Link dentro das fontes: o azul padrao do browser some no fundo escuro da pele
 * do produto. Herdar o acento do tema resolve nas duas de uma vez. */
.fontes a{color:var(--amber);text-decoration:none;border-bottom:1px solid currentColor}
.fontes a:hover{opacity:.75}

/* ---------- o que a imprensa da Paraiba divulgou ----------
 * Duas naturezas na mesma tela, e a diferenca precisa ser visivel antes de o
 * leitor chegar na nota de rodape: o card de cima traz o levantamento com
 * registro conferido no PesqEle, este traz o numero que o veiculo publicou. A
 * borda ambar a esquerda e a marca dessa fronteira. */
.e26-imp{border-left:3px solid var(--amber)}
.e26-pesq{padding:12px 0;border-bottom:1.5px solid var(--line)}
.e26-pesq:last-of-type{border-bottom:none}
.e26-pesq-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:9px}
.e26-pesq-cab b{font-size:12.5px}
.e26-pesq-cab span{font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.e26-susp{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  border:1.5px solid var(--red);color:var(--red);padding:2px 5px}
.e26-pesq-pe{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:8px;
  font-family:var(--mono);font-size:10px;color:var(--dim2)}
.e26-pesq-pe a{color:var(--amber);text-decoration:none;border-bottom:1px solid currentColor}
.e26-pesq-pe a:hover{opacity:.75}

.e26-giro{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1px;
  background:var(--line)}
.e26-not{display:block;padding:11px 13px;background:var(--bg2);text-decoration:none;color:inherit}
.e26-not:hover{background:var(--bg3)}
.e26-not b{display:block;font-size:12.5px;line-height:1.35;margin-bottom:5px}
.e26-not span{font-family:var(--mono);font-size:10px;color:var(--dim2)}

/* ===== css/85-lock.css ===== */
/* ---------- LOCK (login) ----------
   Mesma linguagem do resto: creme, contorno duro, sombra offset, zero blur.
   Fica acima de tudo e so sai quando o Supabase confirma a sessao. */
.lock{position:fixed;inset:0;background:var(--bg);z-index:300;display:flex;
  align-items:center;justify-content:center;padding:24px;overflow-y:auto}
.lock[hidden]{display:none}
/* ---------- O FUNDO: a Paraíba serigrafada ----------
   GERADO por tools/gera-fundo-lock.mjs. Não editar à mão.

   Substituiu, em 22/08/2026, as duas faixas chapadas (amarelo em 22%, azul em
   74%) que cortavam a tela atrás do cartão. Pedido do Gabriel: o mapa do estado
   com as conexões, serigrafado, e discreto o bastante para o olho não sair da
   janela de acesso.

   É MÁSCARA, não imagem: o desenho é um fotolito em tons de cinza e a tinta vem
   do tema, então as 24 peles herdam a cor delas sozinhas e nenhum hex mora aqui.

   A tinta é --txt, e NÃO --tinta. As peles vêm em duas famílias: a do Diego é
   creme com --tinta escuro, e as vinte de candidato são quase-pretas com
   --tinta:#000000 (nelas o "contorno" da marca é o vão, e o vão é preto). Preto
   sobre #08090A é um mapa invisível. --txt é a única variável que, por
   definição, contrasta com --bg nas duas famílias.

   A intensidade sai de --fundo-mapa e --fundo-polo, com padrão no próprio
   seletor: uma pele que precise de outra dosagem declara a variável no tema,
   sem tocar neste arquivo. Sem animação de propósito: movimento atrás de um campo
   de senha é exatamente o que tira o foco.

   Enquadramento: no desktop o estado cabe INTEIRO, porque é lá que a silhueta
   é legível. No celular ele cresce e sangra pelas laterais — cabendo inteiro num
   retrato de 390px sobraria uma faixa de 225px de altura, toda ela atrás do
   cartão, ou seja, nada. */
.lock::before,.lock::after{content:'';position:fixed;top:50%;left:50%;
  translate:-50% -50%;pointer-events:none;aspect-ratio:1000/578;
  width:min(94%,148vh);height:auto;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  /* o desenho passa por uma variável para o data-URI ser escrito UMA vez:
     repetir a versão com prefixo dobraria o peso do arquivo */
  -webkit-mask-image:var(--foto);mask-image:var(--foto)}
.lock::before{--foto:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 578'%3E%3Cdefs%3E%3Cpath id='u' d='M301 371L312 365L315 356L322 348L320 340L347 338L356 332L355 329L362 320L372 320L375 317L385 317L400 326L405 333L423 338L427 345L438 345L441 350L438 355L441 357L439 359L448 370L415 383L403 393L395 409L409 437L405 448L401 450L396 448L386 452L383 455L387 456L388 460L382 462L383 469L367 478L367 484L356 488L354 495L371 492L389 494L392 489L396 491L396 497L406 504L405 514L409 531L405 536L406 539L403 541L404 544L415 546L414 554L419 560L424 557L428 560L424 562L425 569L434 569L447 578L454 577L458 572L464 570L471 562L496 549L504 551L507 546L514 545L514 539L523 541L522 537L538 529L530 521L538 516L538 498L542 488L551 491L551 480L557 475L575 482L584 480L588 472L589 454L617 452L628 458L632 458L636 455L632 449L642 441L646 448L679 446L682 450L686 449L697 454L698 450L707 447L722 448L728 438L751 435L770 424L776 427L783 424L795 413L813 414L817 410L814 406L817 401L813 395L823 370L835 362L839 367L844 367L855 359L859 359L859 355L864 355L865 351L870 351L881 344L893 344L900 348L905 346L921 350L930 349L952 365L952 376L958 384L965 381L969 385L976 383L981 386L984 384L992 387L997 367L996 363L1000 332L997 309L1000 287L993 280L988 262L992 249L991 239L987 238L989 250L982 255L980 244L984 240L982 230L985 223L973 213L968 189L963 185L966 181L965 168L960 164L957 154L956 117L941 122L933 127L924 120L920 122L911 134L905 135L896 131L893 125L879 132L865 132L845 118L819 115L806 118L796 110L781 107L776 107L770 113L753 116L710 119L695 116L692 108L677 96L668 102L633 105L633 96L623 94L621 90L627 80L626 72L620 65L606 72L597 68L587 86L570 84L563 108L564 121L575 126L578 133L584 135L586 152L580 155L572 147L564 146L565 151L556 173L559 179L569 185L569 199L559 207L553 209L553 216L542 231L523 229L515 243L503 231L512 206L502 206L502 193L486 179L467 186L455 194L450 177L444 174L429 184L412 188L406 196L396 203L385 203L380 199L380 191L376 188L378 179L371 174L373 170L365 168L358 171L342 170L322 174L327 161L324 155L323 132L327 129L338 129L344 125L348 104L345 95L349 87L349 81L353 75L362 70L365 64L376 65L376 57L381 51L394 46L396 40L401 39L405 32L400 30L402 21L401 6L388 4L386 0L381 0L376 8L369 6L355 15L349 15L345 21L332 22L329 30L309 32L309 36L301 33L282 42L266 38L258 41L249 52L253 54L249 56L253 58L250 63L254 66L240 68L237 71L239 73L232 78L234 80L233 86L228 89L221 87L220 95L211 100L207 101L204 95L201 96L200 101L191 103L188 107L190 112L186 114L183 114L182 106L180 106L164 126L159 125L156 119L144 120L132 116L120 122L110 110L99 109L96 101L92 97L85 99L79 93L70 94L70 85L77 77L66 84L55 81L41 93L49 96L61 94L61 97L39 124L39 130L31 141L34 147L28 154L30 162L23 170L28 186L38 192L37 195L32 195L33 197L23 206L23 212L0 225L2 232L0 235L6 241L0 246L19 255L27 271L22 281L21 295L35 296L38 306L43 310L54 309L58 321L43 353L46 354L45 358L40 360L41 363L30 364L34 371L28 380L28 388L26 392L14 396L13 403L35 424L43 439L67 438L69 434L76 433L78 430L90 433L92 428L103 420L106 424L110 423L114 429L113 432L117 436L113 441L116 441L118 454L123 459L133 458L151 445L156 446L163 456L173 458L176 455L174 446L183 437L191 445L200 445L212 428L219 428L217 425L229 413L241 411L243 406L247 406L253 417L255 416L258 409L254 405L261 395L267 392L267 387L273 387L279 380L286 382L291 376ZM983 243L983 251L986 243Z'/%3E%3Cpattern id='t' width='7' height='7' patternUnits='userSpaceOnUse' patternTransform='rotate(24)'%3E%3Ccircle cx='1.4' cy='1.4' r='1.4' fill='%23fff'/%3E%3C/pattern%3E%3CclipPath id='c'%3E%3Cuse href='%23u'/%3E%3C/clipPath%3E%3C/defs%3E%3Cuse href='%23u' fill='%23fff' fill-opacity='0.26'/%3E%3Cg clip-path='url(%23c)' opacity='0.5'%3E%3Crect width='1000' height='578' fill='url(%23t)'/%3E%3C/g%3E%3Cuse href='%23u' fill='none' stroke='%23fff' stroke-opacity='0.8' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath fill='none' stroke='%23fff' stroke-opacity='0.42' stroke-width='1.2' d='M988 357L983 319M988 357L929 333M987 256L948 264M983 319L965 336M981 289L970 227M981 289L922 285M970 227L922 285M968 371L965 336M965 336L929 333M951 162L947 183M951 162L883 199M948 264L922 285M948 264L875 287M947 183L906 222M937 135L883 199M929 333L898 308M929 333L859 336M922 285L894 337M922 285L859 336M909 176L883 199M909 176L840 134M906 222L880 145M906 222L857 166M898 261L894 337M898 261L861 309M898 261L838 285M898 308L861 309M898 308L831 353M894 337L861 309M894 337L823 322M883 199L859 212M883 199L823 194M880 145L840 134M875 287L861 309M875 287L838 285M875 287L804 288M871 257L859 212M871 257L823 322M861 309L842 247M861 309L804 288M859 336L838 285M859 336L804 288M859 212L842 247M859 212L816 222M857 166L842 247M857 166L798 171M842 247L823 194M842 247L798 171M842 247L755 263M840 134L786 205M838 285L823 322M838 285L785 350M831 353L823 322M831 353L785 350M823 194L816 222M823 194L770 235M823 322L804 288M823 322L758 298M816 222L798 171M816 222L736 185M806 389L774 383M804 288L786 205M804 288L755 263M798 171L786 205M798 171L736 185M792 318L770 235M792 318L718 349M786 205L755 263M786 205L713 260M785 350L755 263M785 350L705 391M774 383L758 298M774 383L705 391M770 235L743 152M762 420L752 347M758 298L755 263M758 298L713 260M755 263L752 347M755 263L713 260M752 347L716 432M752 347L682 353M743 152L677 133M736 185L677 133M734 229L677 194M718 349L705 314M718 349L662 421M716 432L682 353M713 260L677 194M705 314L705 391M705 314L634 242M705 391L641 316M682 353L641 316M677 194L673 263M677 194L599 190M673 263L643 177M673 263L599 190M643 177L634 242M641 316L634 242M641 316L581 314M634 242L599 190M621 362L594 397M621 362L537 411M603 273L581 314M603 273L501 245M594 397L570 444M581 314L556 261M581 314L487 303M572 362L528 330M570 444L498 524M556 261L501 245M537 411L496 476M528 330L487 303M501 245L489 201M501 245L434 277M498 524L421 478M496 476L410 402M487 303L479 356M479 356L434 277M469 419L410 402M434 277L384 310M384 310L365 246M365 246L311 218M354 53L326 110M326 110L291 153M311 218L296 282M304 341L296 282M296 282L242 375M291 153L242 237M267 75L239 123M242 375L146 320M242 237L176 194M207 298L176 194M191 413L109 407M176 194L110 235M146 320L72 321M110 235L18 234M72 321L47 416'/%3E%3Cg fill='%23fff' fill-opacity='0.62'%3E%3Ccircle cx='988' cy='357' r='3.4'/%3E%3Ccircle cx='987' cy='256' r='3.4'/%3E%3Ccircle cx='983' cy='319' r='3.3'/%3E%3Ccircle cx='981' cy='289' r='3.3'/%3E%3Ccircle cx='970' cy='227' r='3.3'/%3E%3Ccircle cx='968' cy='371' r='3.2'/%3E%3Ccircle cx='965' cy='336' r='3.2'/%3E%3Ccircle cx='951' cy='162' r='3.2'/%3E%3Ccircle cx='948' cy='264' r='3.2'/%3E%3Ccircle cx='947' cy='183' r='3.1'/%3E%3Ccircle cx='937' cy='135' r='3.1'/%3E%3Ccircle cx='929' cy='333' r='3'/%3E%3Ccircle cx='922' cy='285' r='3'/%3E%3Ccircle cx='909' cy='176' r='2.9'/%3E%3Ccircle cx='906' cy='222' r='2.9'/%3E%3Ccircle cx='898' cy='261' r='2.9'/%3E%3Ccircle cx='898' cy='308' r='2.9'/%3E%3Ccircle cx='894' cy='337' r='2.9'/%3E%3Ccircle cx='883' cy='199' r='2.8'/%3E%3Ccircle cx='880' cy='145' r='2.8'/%3E%3Ccircle cx='875' cy='287' r='2.8'/%3E%3Ccircle cx='871' cy='257' r='2.8'/%3E%3Ccircle cx='861' cy='309' r='2.7'/%3E%3Ccircle cx='859' cy='336' r='2.7'/%3E%3Ccircle cx='859' cy='212' r='2.7'/%3E%3Ccircle cx='857' cy='166' r='2.7'/%3E%3Ccircle cx='842' cy='247' r='2.6'/%3E%3Ccircle cx='840' cy='134' r='2.6'/%3E%3Ccircle cx='838' cy='285' r='2.6'/%3E%3Ccircle cx='831' cy='353' r='2.6'/%3E%3Ccircle cx='823' cy='194' r='2.6'/%3E%3Ccircle cx='823' cy='322' r='2.6'/%3E%3Ccircle cx='816' cy='222' r='2.5'/%3E%3Ccircle cx='806' cy='389' r='2.5'/%3E%3Ccircle cx='804' cy='288' r='2.5'/%3E%3Ccircle cx='798' cy='171' r='2.5'/%3E%3Ccircle cx='792' cy='318' r='2.4'/%3E%3Ccircle cx='786' cy='205' r='2.4'/%3E%3Ccircle cx='785' cy='350' r='2.4'/%3E%3Ccircle cx='785' cy='131' r='2.4'/%3E%3Ccircle cx='774' cy='383' r='2.4'/%3E%3Ccircle cx='770' cy='235' r='2.4'/%3E%3Ccircle cx='762' cy='420' r='2.3'/%3E%3Ccircle cx='758' cy='298' r='2.3'/%3E%3Ccircle cx='755' cy='263' r='2.3'/%3E%3Ccircle cx='752' cy='347' r='2.3'/%3E%3Ccircle cx='743' cy='152' r='2.3'/%3E%3Ccircle cx='736' cy='185' r='2.2'/%3E%3Ccircle cx='734' cy='229' r='2.2'/%3E%3Ccircle cx='718' cy='349' r='2.2'/%3E%3Ccircle cx='716' cy='432' r='2.2'/%3E%3Ccircle cx='713' cy='260' r='2.2'/%3E%3Ccircle cx='705' cy='314' r='2.1'/%3E%3Ccircle cx='705' cy='391' r='2.1'/%3E%3Ccircle cx='682' cy='353' r='2.1'/%3E%3Ccircle cx='677' cy='194' r='2'/%3E%3Ccircle cx='677' cy='133' r='2'/%3E%3Ccircle cx='673' cy='263' r='2'/%3E%3Ccircle cx='662' cy='421' r='2'/%3E%3Ccircle cx='643' cy='177' r='2'/%3E%3Ccircle cx='641' cy='316' r='2'/%3E%3Ccircle cx='634' cy='242' r='1.9'/%3E%3Ccircle cx='621' cy='362' r='1.9'/%3E%3Ccircle cx='611' cy='119' r='1.9'/%3E%3Ccircle cx='603' cy='273' r='1.8'/%3E%3Ccircle cx='599' cy='190' r='1.8'/%3E%3Ccircle cx='594' cy='397' r='1.8'/%3E%3Ccircle cx='581' cy='314' r='1.8'/%3E%3Ccircle cx='572' cy='362' r='1.8'/%3E%3Ccircle cx='570' cy='444' r='1.8'/%3E%3Ccircle cx='556' cy='261' r='1.7'/%3E%3Ccircle cx='537' cy='411' r='1.7'/%3E%3C/g%3E%3C/svg%3E");
  background:var(--txt);opacity:var(--fundo-mapa,.115)}
.lock::after{--foto:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 578'%3E%3Ccircle cx='980.8' cy='289.3' r='20' fill='none' stroke='%23fff' stroke-opacity='.6' stroke-width='2'/%3E%3Ccircle cx='980.8' cy='289.3' r='7' fill='%23fff'/%3E%3Ccircle cx='704.8' cy='314.2' r='17' fill='none' stroke='%23fff' stroke-opacity='.6' stroke-width='2'/%3E%3Ccircle cx='704.8' cy='314.2' r='6' fill='%23fff'/%3E%3Ccircle cx='434' cy='277.3' r='13' fill='none' stroke='%23fff' stroke-opacity='.6' stroke-width='2'/%3E%3Ccircle cx='434' cy='277.3' r='4' fill='%23fff'/%3E%3C/svg%3E");
  background:var(--amber);opacity:var(--fundo-polo,.22)}
@media(max-width:760px){.lock::before,.lock::after{width:auto;height:112%}}
/* Máscara sem suporte pintaria dois retângulos chapados por cima da tela.
   Nesse navegador o fundo simplesmente não existe, que é o estado correto de
   um elemento decorativo. */
@supports not ((mask-image:url("#a")) or (-webkit-mask-image:url("#a"))){
  .lock::before,.lock::after{display:none}
}
/* ---------- fim do fundo gerado ---------- */
.lockcard{position:relative;width:min(100%,392px);background:var(--bg2);
  border:2px solid var(--tinta);box-shadow:7px 7px 0 var(--tinta);padding:30px 28px 24px}
.lockmarca{display:flex;flex-direction:column;gap:13px;margin-bottom:22px}
.lockmarca .qg{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.5px;
  color:var(--dim2);text-transform:uppercase}
/* `flex-wrap:wrap` (11/09/2026). A 375px o badge de urna e o nome nao cabem nos
   283.7px uteis da linha. Sem `wrap` ela nao tem para onde ceder, porque a
   `.urna` e `flex-shrink:0` de proposito: encolher um numero de urna o torna
   ilegivel. Com `wrap` o badge desce para a linha de baixo SO quando nao couber.

   QUANTAS PELES ISSO ATINGE, medido nas 28 a 375px depois de publicar -- e o
   numero corrige o que esta linha dizia antes, que era "so o comite". Das 14
   peles que mostram badge (as outras 14 usam logo capturada, e o build esvazia
   o marcador de urna quando ha logo), SETE nao cabiam e vazavam do cartao:
   comite, wallber, wilsonsantiago, caio, gilberto, romero e michel. As outras
   sete -- george, wilsonfilho, raniery, efraim, cilinha, larucia, wellington --
   ja cabiam, continuam numa linha so e nao mudam um pixel.

   O pior caso e o comite (`15 · 5555` com o nome mais longo): o badge ia ate
   x=377 numa viewport de 375 e vazava 25.8px. Depois do conserto ele fecha em
   x=325.9, com 21.8px de folga dentro do cartao.

   A licao, e ela nao e sobre CSS: o handoff dizia "e o unico elemento que vaza"
   porque a medicao foi feita numa pele so. Com 27 peles servidas pelo mesmo CSS,
   a pergunta certa e sempre QUANTAS, e a resposta se mede varrendo todas.

   `row-gap` menor que o `gap` porque, ja quebrado, 14px entre as duas linhas
   afasta o numero do nome de quem ele e. */
.lockmarca .linha{display:flex;align-items:center;gap:14px;flex-wrap:wrap;row-gap:8px}
.lockmarca .nome{font-family:var(--marca);font-style:var(--marca-estilo,italic);font-weight:700;font-size:31px;
  line-height:.9;color:var(--txt)}
/* O número de urna na PORTA (24/08/2026). Mesma peça do topo, um degrau maior:
   aqui ela aparece uma vez só, na primeira tela que o candidato vê, e é onde ele
   confere que a plataforma é dele antes de digitar qualquer coisa.
   `margin-left:auto` empurra para a direita da linha: o nome fica com o peso
   tipográfico e o número fecha a linha, sem disputar o mesmo eixo. */
.lockmarca .urna{font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.5px;
  font-variant-numeric:tabular-nums;font-style:normal;line-height:1;
  background:var(--gold);color:var(--sobre-gold,var(--sobre-acento));padding:6px 10px;
  margin-left:auto;flex-shrink:0}
.lock h2{font-family:var(--display);font-size:15px;font-weight:800;font-stretch:88%;
  text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.lock .sub{font-size:12px;color:var(--dim);line-height:1.55;margin-bottom:18px}
.lock label{display:block;font-size:9.5px;letter-spacing:1.2px;color:var(--dim);
  text-transform:uppercase;font-weight:700;margin-bottom:6px}
/* `.linha-rot` e `.lnk-linha` foram removidos em 24/08/2026 junto com o rotulo
   que eles alinhavam. Eram o passo anterior desta mesma ideia: o link saiu de
   bloco-depois-do-botao (20/08) para linha-do-rotulo (22/08) e agora para dentro
   do campo. Sem rotulo em tela, nao ha mais linha para dividir com ninguem. */
.lock input{width:100%;padding:11px 12px;font-size:16px;background:var(--bg);
  border:2px solid var(--tinta);outline:none;margin-bottom:14px}
/* "ESQUECI A SENHA" DENTRO DO CAMPO (24/08/2026). O rotulo foi para o placeholder
   e o link ficou boiando no meio da coluna sem dizer de qual campo era. Ancorado
   no proprio campo, resolve os dois: altura zero e relacao obvia.
   O `margin-bottom` sai do input e vai para o wrapper — senao o link, que e
   posicionado contra a caixa, fica centralizado sobre campo + margem e desce
   alguns pixels abaixo do meio do campo.
   `padding-right` reserva a faixa do link: sem ele uma senha longa corre por
   baixo do texto e os dois viram borrao. `pointer-events` no par garante que o
   clique na faixa pegue o link e nao o campo. */
.campo-senha{position:relative;margin-bottom:14px}
.campo-senha input{margin-bottom:0;padding-right:112px}
/* DUAS classes de propósito. A regra base `.lnk` vive mais abaixo neste mesmo
   arquivo e traz `display:block; width:100%; margin-top:13px` — com uma classe só
   ela venceria por ordem, e o link voltaria a ser um bloco de largura inteira,
   que é exatamente o que esta regra desfaz. */
.campo-senha .lnk-dentro{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  display:inline-block;width:auto;margin:0;font-size:10.5px;line-height:1;padding:4px 2px;
  background:none}
.lock input:focus{border-color:var(--amber);box-shadow:2px 2px 0 var(--amber)}
.btn-lock{width:100%;padding:12px;background:var(--amber);color:var(--sobre-acento);font-weight:800;
  font-size:12.5px;letter-spacing:1.2px;border:2px solid var(--tinta);
  box-shadow:3px 3px 0 var(--tinta);transition:.12s;font-family:var(--display);
  text-transform:uppercase}
.btn-lock:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--tinta)}
.btn-lock:active:not(:disabled){transform:translate(1px,1px);box-shadow:1px 1px 0 var(--tinta)}
.btn-lock:disabled{opacity:.55;cursor:wait}
/* Botao DEMO. Fica no TOPO do card, antes do titulo "Acesso": quem
   chega pelo link da proposta quer ver a tela, nao preencher formulario. Por
   isso a palavra DEMO vem no tamanho do titulo, e nao em letra de rodape.
   O ponto pisca; o botao inteiro, nao. Card de login inteiro piscando vira
   alarme e a pessoa desconfia em vez de clicar.
   Ele preenche os campos e para: ver src/js/00-acesso.js. */
/* BARRA NO TOPO desde 25/08/2026, e antes disto era um bloco dentro do cartão.
   Pedido dele, na letra: "fica mais acessível e o clique é mais garantido".
   Um alvo de clique que atravessa a tela inteira é mais difícil de errar que um
   de 392px no meio dela, e no celular ele encosta no polegar.

   O que NÃO mudou, e é o pedido: altura, cor, tipografia, o ponto que pisca e a
   seta. Mudou a largura, que virou a da tela, e o alinhamento, que virou
   centralizado.

   `position:fixed` e não `absolute`: o `.lock` tem `overflow-y:auto`, e em tela
   baixa o cartão rola. Barra absoluta rolaria junto e sumiria — que é justamente
   perder a acessibilidade que a mudança foi buscar.

   O contorno vira só a borda de baixo, e a sombra offset desce em vez de ir na
   diagonal. Contorno de 2px nos quatro lados de um elemento que encosta nas
   bordas da janela desenha uma moldura em volta da página, e sombra na diagonal
   projetaria para fora da tela do lado direito. A linguagem (contorno duro,
   sombra sem blur) fica; a direção é que acompanha a forma nova. */
/* A BARRA FICA COM A SEGUNDA COR DA CAMPANHA (25/08/2026).
   `--gold` e `--amber` sao a mesma cor nas peles de candidato, entao esta barra
   e o botao Entrar nasciam identicos. Com o acento2 medido da arte, a barra
   passa a ser a cor de apoio e o Entrar a principal: duas cores do candidato,
   com papeis separados. Marca monocromatica recebe acento2 igual ao acento e
   volta ao empate, que ali e o certo — a campanha dele so tem uma cor. */
.btn-demo{position:fixed;top:0;left:0;right:0;z-index:2;
  display:flex;align-items:center;justify-content:center;gap:11px;
  margin:0;padding:13px 15px;cursor:pointer;text-align:center;
  border:0;border-bottom:2px solid var(--tinta);
  background:var(--acento2,var(--gold));color:var(--sobre-acento2,var(--sobre-acento,var(--tinta)));
  box-shadow:0 3px 0 var(--tinta);transition:translate .12s,box-shadow .12s}
.btn-demo[hidden]{display:none}
/* O movimento é só vertical: uma barra que anda para a esquerda descola da borda
   da janela e mostra o fundo por baixo. */
.btn-demo:hover{translate:0 1px;box-shadow:0 5px 0 var(--tinta)}
.btn-demo:active{translate:0 2px;box-shadow:0 1px 0 var(--tinta)}
.btn-demo:focus-visible{outline:3px solid var(--amber);outline-offset:-4px}
/* `flex:none` no lugar de `flex:1`: esticado, o bloco de texto empurrava o ponto
   para a extrema esquerda e a seta para a extrema direita, e o conjunto deixava
   de ser um grupo centralizado para virar três coisas espalhadas. */
.btn-demo-txt{flex:none;min-width:0;display:flex;flex-direction:column;
  align-items:center;gap:3px}

/* O CARTÃO NÃO PODE NASCER POR BAIXO DA BARRA. O `.lock` centra o cartão na
   janela inteira, e a barra é fixa: em tela baixa os dois se sobrepõem. O
   respiro só existe quando a barra existe — pele sem conta demo declarada mantém
   o cartão centrado como sempre esteve.
   Sem suporte a `:has()` o cartão volta a centralizar e, em tela muito baixa,
   passa por baixo da barra; o `.lock` tem `overflow-y:auto`, então a rolagem
   ainda alcança tudo. */
.lock:has(> .btn-demo:not([hidden])){padding-top:86px}
.btn-demo-t{font-family:var(--display);font-size:16px;font-weight:800;line-height:1;
  letter-spacing:.15em;text-transform:uppercase}
.btn-demo-d{font-family:var(--mono);font-size:9.5px;font-weight:700;line-height:1.35;
  letter-spacing:.05em;text-transform:uppercase;opacity:.72}
.btn-demo-s{font-size:17px;font-weight:700}
.btn-demo-p{width:9px;height:9px;flex:none;border-radius:50%;background:var(--amber);
  box-shadow:0 0 0 3px rgba(235,95,42,.28)}
@media(prefers-reduced-motion:no-preference){
  .btn-demo-p{animation:demoPisca 1.25s steps(1,end) infinite}
  @keyframes demoPisca{0%,55%{opacity:1}56%,100%{opacity:.18}}
}

/* A MIRA: a seta que aponta para a barra do topo (29/08/2026).
   Ela mora no vão que o `.lock` já reservava — `padding-top:86px` quando a barra
   existe, contra os ~60px de altura dela — então a seta nasce num espaço que já
   estava lá e não empurra o cartão nem um pixel. Por isso ela é `fixed` e não
   entra no fluxo: fluxo somaria altura e o cartão desceria.

   COR: a segunda cor da campanha, a mesma da barra para onde ela aponta. Duas
   cores diferentes fariam parecer que apontam para coisas diferentes.
   `pointer-events:none` porque o alvo do clique é a barra, e uma seta clicável
   no meio do caminho roubaria o toque de quem mirou um pouco abaixo.

   O `translate` fica na propriedade própria e não em `transform`: a animação
   mexe nele, e escrever os dois no mesmo `transform` faria um sobrescrever o
   outro a cada quadro. */
.demo-mira{position:fixed;top:64px;left:50%;translate:-50% 0;z-index:2;
  width:30px;height:30px;pointer-events:none;color:var(--acento2,var(--gold));
  filter:drop-shadow(0 1px 0 var(--tinta))}
.demo-mira svg{display:block;width:100%;height:100%}
.demo-mira[hidden]{display:none}
/* Pisca subindo: opacidade sozinha some e volta no mesmo lugar, e o olho lê
   isso como um defeito de renderização. Com 5px de deslocamento vira gesto de
   apontar. Só `opacity` e `translate`, que é o budget de animação do projeto. */
@media(prefers-reduced-motion:no-preference){
  .demo-mira{animation:demoMira 1.25s ease-in-out infinite}
  @keyframes demoMira{
    0%,100%{opacity:1;translate:-50% 0}
    50%{opacity:.25;translate:-50% 5px}
  }
}

.lnk{display:block;width:100%;margin-top:13px;font-size:11.5px;color:var(--dim);
  text-decoration:underline;text-underline-offset:3px;background:none}
.lnk:hover{color:var(--amber)}

/* CADASTRE-SE (12/09/2026). Ele e o segundo caminho da porta: quem ja e da
   equipe digita usuario e senha, quem ainda nao e se cadastra. Menos destaque
   que o Entrar por pedido do Gabriel, e o "menos" e medido, nao achado: o
   Entrar e bloco cheio no acento da campanha, este e contorno sobre o proprio
   fundo do cartao. Mesma largura, mesma altura e mesmo peso de fonte, entao a
   hierarquia sai do preenchimento e nao do tamanho -- encolher o alvo de toque
   para parecer secundario quebraria os 44px da regra CELULAR PRIMEIRO, e quem
   abre isto abre no celular. */
.btn-cadastro{display:block;width:100%;padding:12px;margin-top:10px;
  min-height:44px;box-sizing:border-box;
  background:transparent;color:var(--acento2,var(--amber));font-weight:800;font-size:13px;
  font-family:inherit;letter-spacing:.3px;text-transform:uppercase;
  text-align:center;text-decoration:none;cursor:pointer;
  /* O contorno e o texto saem de `--acento2`, a cor SECUNDARIA da pele (no
     comite, o laranja #EF7316 do Mersinho). Pedido do Gabriel, e tambem o
     que mantem o botao white-label: candidato que ganhar um link de
     cadastro herda a propria segunda cor sem ninguem escrever hex aqui.
     O fallback para `--amber` existe porque nem todo tema declara
     `--acento2`, e borda com valor invalido simplesmente nao desenha.
     A sombra dura continua em `--tinta`: ela e o desenho do chassi, nao
     cor de marca. */
  border:2px solid var(--acento2,var(--amber));box-shadow:3px 3px 0 var(--tinta);
  transition:transform .12s,box-shadow .12s}
.btn-cadastro:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--tinta)}
.btn-cadastro:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--tinta)}
.lockmsg{font-size:12px;line-height:1.5;padding:10px 12px;margin-bottom:14px;
  border:1.5px solid var(--tinta)}
.lockmsg[hidden]{display:none}
.lockmsg.erro{background:#FBE3DE;color:#8E1F0B}
.lockmsg.ok{background:#DFF3E7;color:#0E5C36}
.lockpe{margin-top:22px;padding-top:16px;border-top:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.lockpe .lgpd{font-size:9.5px;color:var(--dim2);line-height:1.5;max-width:190px}
@media(max-width:520px){
  .lockcard{padding:24px 20px 20px;box-shadow:5px 5px 0 var(--tinta)}
  .lockmarca .nome{font-size:26px}
}


/* ==========================================================================
   ALVOS COM PONTE (.lockcard.ponte)  ·  22/08/2026
   A classe entra pelo JS quando `QG.ponte` e verdadeiro, e vem escrita no HTML
   da porta servida pelo middleware. Ela NAO alcanca `diego.iaiqg.com`, que e
   plataforma de cliente pagante, nao tem ponte e continua exatamente como era.

   Duas mudancas, e as duas sao do mesmo diagnostico: a tela tinha dois blocos
   de cor de acento disputando o mesmo olhar, e o de cima ganhava por posicao —
   o que fazia o caminho normal (entrar com credencial) parecer o secundario.

     1. A ordem inverte. Entrar primeiro, demonstracao logo abaixo, dizendo que
        da para entrar sem credencial nenhuma. Feito por `order`, e nao no HTML,
        porque o mesmo HTML serve a plataforma sem ponte.
     2. O botao Entrar fica BRANCO. O acento continua existindo uma vez na
        coluna, no bloco da demonstracao, e volta a significar alguma coisa.

   A REGRA 1 FOI APOSENTADA EM 25/08/2026, e o motivo e que ela deixou de ter o
   que ordenar: o botao da demonstracao saiu do formulario e virou a barra do
   topo. Nao ha mais dois blocos disputando a coluna, que era o problema que o
   `order` resolvia. A regra 2 fica, e ganhou forca — com o acento inteiro na
   barra, um Entrar tambem colorido seria a mesma disputa em outro lugar.
   ========================================================================== */
/* A REGRA 2 CAIU EM 25/08/2026, e o que a derrubou foi haver uma segunda cor.

   O Entrar era branco porque `--amber` e `--gold` eram a MESMA cor nas peles de
   candidato: dois blocos pintados dela viravam a mesma mancha duas vezes, e o
   branco desempatava. Desde hoje a pele carrega as DUAS cores que a campanha
   publica — a que salta e a que sustenta — entao o empate acabou e o desempate
   perdeu a funcao.

   Pedido literal dele: "a cor principal e sub principal no botao entrar e navbar
   demo". Entrar na principal, barra da demonstracao na segunda. Continuam sendo
   dois blocos de cor, e agora sao duas cores DIFERENTES, as duas do candidato —
   que e o oposto do problema que o branco resolvia.

   Quem tem marca monocromatica (Hervazio e Mersinho, cujos nomes sao brancos na
   arte) recebe `--acento2` igual ao acento, e ai a barra e o botao voltam a ser
   da mesma cor. Nesse caso a hierarquia quem faz e o peso, nao o matiz. */
.lockcard.ponte .btn-lock{background:var(--cor-entrar,var(--amber));color:var(--sobre-acento)}
.lockcard.ponte .btn-lock:hover:not(:disabled){
  background:color-mix(in srgb, var(--cor-entrar,var(--amber)) 86%, #FFFFFF)}
.lockcard.ponte .btn-lock:focus-visible{outline:3px solid var(--acento-texto);outline-offset:2px}

/* O ponto que pisca dentro do bloco de demonstração.
   Ele nasceu `var(--amber)` sobre `var(--gold)`, e na pele do Diego isso é
   laranja sobre dourado — duas cores. Nas peles de candidato `--amber` e
   `--gold` são a MESMA cor, a do candidato: o ponto ficava magenta sobre
   magenta, invisível, e o bloco perdia o sinal de que é o caminho rápido.
   Aqui ele passa a ser a cor do próprio texto do bloco, que é a única que já
   se sabe legível em cima dele. Só nos alvos com ponte: a tela do Diego não
   muda.

   O SELETOR SUBIU PARA O `.lock` em 25/08/2026. A classe `.ponte` continua no
   `.lockcard`, escrita pelo build e pelo script, e o ponto agora mora na barra
   do topo, que é irmã do cartão e não filha — `.lockcard.ponte .btn-demo-p`
   deixou de alcançar qualquer coisa. Mover a classe para o `.lock` seria mexer
   em dois JavaScripts e no recorte do build para não mexer num seletor. */
.lock:has(.lockcard.ponte) .btn-demo-p{background:var(--sobre-acento);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--sobre-acento) 26%, transparent)}

/* ===== css/86-logo-campanha.css ===== */
/* ==========================================================================
   A LOGO DE CAMPANHA DO CANDIDATO  ·  25/08/2026, refeita no mesmo dia

   Ela e uma CAPTURA do lockup que a campanha publicou no Instagram, com o fundo
   do post removido — so os elementos da marca chegam a tela, sobre transparencia.

   A PRIMEIRA VERSAO ENTREGOU RETANGULO, COM O FUNDO DA PECA DENTRO, e estava
   errada. A justificativa era a regra de "marca e captura, nunca criacao": como
   a remocao de fundo saiu com artefato nas duas primeiras tentativas, recuei
   para o recorte cru. O Gabriel corrigiu, e a leitura certa e outra —
   TRANSFORMAR a captura (recortar, isolar, tirar fundo, aparar, redimensionar)
   e trabalho de preparo; CRIAR (desenhar, recompor tipografia, gerar) e que e
   proibido. Um bloco azul do post em volta da marca nao e fidelidade, e sujeira.

   TAMANHO SE MEDE EM TINTA. As seis tem proporcoes muito diferentes: a do
   Hervazio e faixa larga e baixa, a do Dudu tem tres linhas empilhadas. Limitar
   por altura faz a larga dominar; limitar por largura faz a quadrada virar selo.
   Por isso a normalizacao acontece ANTES, no tools/logo-limpa.py, escalando cada
   uma para a mesma area de marca. Aqui os tetos so evitam extremos.
   ========================================================================== */

.logo-camp{
  display:block;
  height:auto;
  object-fit:contain;
  /* Sem fundo, sem moldura: nao ha superficie para separar do chassi. O filete
     e o raio da versao anterior existiam para o retangulo de cor nao parecer
     imagem quebrada, e agora desenhariam uma caixa em volta de letras soltas. */
}

/* --------------------------------------------------- na porta e no login
   CENTRALIZADA, e e pedido dele. Com fundo, a logo era um bloco e alinhava a
   esquerda como qualquer bloco. Sem fundo ela e uma marca solta no cartao, e
   marca solta encostada num canto parece deslocada. */
/* A LARGURA MANDA, E A ALTURA E QUE CEDE.
   Com teto so na altura, uma logo larga estoura o cartao: a do Mersinho tem
   proporcao 4.17, entao 130px de altura pedem 542px de largura — mais que os
   336px uteis do cartao. Ela saiu com o "5555" cortado pela borda direita.
   Limitando a largura primeiro e deixando a altura acompanhar, marca larga
   encolhe ate caber e marca alta continua batendo no teto de altura. */
.lockmarca .logo-camp.g{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:130px;
  margin:2px auto 0;
}
/* O bloco que a contem nao pode ser mais largo que o cartao, senao o
   `max-width:100%` da imagem mede a coisa errada. */
.lockmarca:has(.logo-camp) .linha{max-width:100%;overflow:hidden}
.lockmarca:has(.logo-camp) .linha{display:block;text-align:center}
/* A etiqueta do produto acompanha, senao ela fica sozinha na esquerda com a
   marca do candidato centralizada logo abaixo. */
.lockmarca:has(.logo-camp) .qg{text-align:center}

/* --------------------------------------------------- na tela de carga */
.load .marca .logo-camp.g{
  width:auto;
  max-width:min(80vw,340px);
  max-height:132px;
  margin:0 auto;
}
.load .marca:has(.logo-camp){gap:0;flex-direction:column;align-items:center}

/* --------------------------------------------------- no topo do app
   Aqui ela NAO centraliza: o topo e uma barra, e o lugar da marca numa barra e
   a esquerda, ao lado da etiqueta Multiplicai. O que ela substitui e o conjunto
   simbolo + nome + numero, como ele pediu. */
/* NA BARRA, A ALTURA E QUE CEDE — mesmo erro do cartao, cometido de novo aqui.
   Com `height` fixo, uma logo larga vira uma imagem larga e o `max-width` apenas
   CORTA o que sobra: no celular saiam "MERSIN" e "Hervazi" decepados. Com teto
   nos dois lados e altura livre, a marca encolhe ate caber inteira. */
.brand .cand .logo-camp.p{
  width:auto;
  height:auto;
  max-height:32px;
  max-width:210px;
}
.brand .cand:has(.logo-camp){display:flex;align-items:center;min-width:0}

/* O BLOCO DA MARCA NAO PODE ENCOLHER, e era isso que cortava a logo no celular.
   O header e flex e a barra de abas ocupa quase toda a largura util; sem trava,
   o navegador espreme justamente o primeiro item para caber o resto. Medido em
   375px: a imagem media 104px dentro de um `.brand` de 44px, e o que sobrava
   ficava fora — dai "MERSIN" e "Hervazi" decepados. `flex:none` faz a marca
   reservar a largura dela e o resto do header se acomodar em volta. */
.brand:has(.logo-camp){flex:none}

@media(max-width:860px){
  /* O teto de largura no celular e apertado porque a barra tem quatro abas mais
     o botao de sair depois dela. A do Mersinho tem proporcao 4.76 — a mais larga
     das seis — e com 124px empurrava "DISPUTA" para fora da tela. */
  .brand .cand .logo-camp.p{max-height:27px;max-width:96px}
  .lockmarca .logo-camp.g{max-height:100px}
}
@media(max-width:400px){
  .brand .cand .logo-camp.p{max-height:24px;max-width:84px}
  .lockmarca .logo-camp.g{max-height:88px}
}

/* --------------------------------------------------------------------------
   O NUMERO DE URNA AO LADO DA LOGO (04/09/2026)

   Pedido dele na pele do wellington: o lockup capturado dele traz cargo e nome
   e NAO traz o numero, porque na campanha o 5522 vive numa peca separada do
   carrossel. Sem isto o numero nao apareceria em lugar nenhum da plataforma.

   Ele pediu "de forma mais reduzida e ao lado da logo, mas que fique com um bom
   visual e nao demonstre que foi uma gambiarra amadora". Entao o numero nao e um
   item solto da linha: ele e uma etiqueta que pertence ao lockup. No cartao a
   logo esta centralizada, e uma etiqueta jogada a direita brigaria com esse eixo
   — por isso ela desce centralizada logo abaixo, encostada, lendo como a terceira
   linha da marca. Na barra do topo a logo alinha a esquerda, e ali a etiqueta fica
   ao lado mesmo, que e onde o olho ja procura o numero.

   A cor sai de `--gold`, que o tema da pele sobrescreve com o acento medido na
   arte de campanha — no wellington, o ouro #BB8D05 do proprio 5522. */

/* no cartao de acesso: terceira linha do lockup, centralizada sob a marca */
.lockmarca .urna.com-logo{
  display:inline-block;
  margin:6px auto 0;
  font-size:12px;
  padding:4px 9px;
  letter-spacing:1.5px;
}
.lockmarca:has(.logo-camp) .linha .urna.com-logo{display:block;width:max-content}

/* na barra do topo: colada a direita da logo, na mesma altura */
.brand .cand .urna.com-logo{
  margin-left:7px;
  font-size:10px;
  padding:3px 6px;
  letter-spacing:1px;
  align-self:center;
}

/* na tela de carga a marca ja empilha, e a etiqueta acompanha */
.load .marca .urna.com-logo{margin:6px auto 0;font-size:11px;padding:3px 8px}

/* NO CELULAR A ETIQUETA SAI DA BARRA, e o numero que mandou foi o auditor:
   com ela, `auditar-mobile.mjs` mediu a aba "DISPUTA" 37.9px FORA da tela a
   375px. E o mesmo modo de falha que a logo do Mersinho criou em 26/08 — item
   de largura fixa dentro de uma barra que precisa ceder — e ali a folga ja era
   de 6.6px, a mais apertada das sete. Encolher a etiqueta nao resolve: ela custa
   ~40px com margem, e a folga nao existe.

   O numero nao se perde: ele continua no cartao de acesso e na tela de carga,
   que sao as duas telas onde a pessoa para para olhar a marca. A barra do topo e
   navegacao, e navegacao que nao cabe deixa de ser navegacao. */
@media (max-width:400px){
  .brand .cand .urna.com-logo{display:none}
  .lockmarca .urna.com-logo{font-size:11px;padding:3px 8px}
}

/* ===== css/87-abertura.css ===== */
/* ---------------------------------------------------------------------------
   ABERTURA DA PECA DE DEMONSTRACAO (07/09/2026)

   O aviso que a plataforma mostra depois do login, e antes de qualquer tela,
   quando a pele declara `aberturaDemo` no marca.json. Hoje uma pele so: a do
   Fabiano Gomes, cuja candidatura e inventada e precisa dizer isso.

   Ele NAO entra na porta da ponte (o `vestirPorta()` do build lista os CSS um a
   um e este nao esta la), e e deliberado: o aviso e sobre o que a pessoa vai ver
   DEPOIS de entrar, e na porta ela ainda nao entrou.

   Construcao: a mesma do chassi. Bloco chapado, canto reto, zero sombra, e o
   acento da pele so na linha de cima e no botao — a cor dele diz de quem e a
   plataforma sem que o aviso vire peca de campanha.
   --------------------------------------------------------------------------- */
.abertura{
  border:0;padding:0;background:var(--bg2);color:var(--txt);
  width:min(430px,calc(100vw - 28px));   /* 390px de tela ainda sobra respiro */
  max-height:calc(100dvh - 40px);
  box-shadow:none;border-radius:0;overflow:auto;
  /* CENTRALIZAR E EXPLICITO, e a primeira versao nao tinha. O `margin:auto` que
     o navegador da a `<dialog>` centraliza enquanto a largura e `auto`; com
     `width` declarada, o `00-base.css` deste projeto zera a margem de tudo
     (`*{margin:0}`) e ganha do UA, entao a caixa encostava no topo esquerdo.
     Visto na tela em 07/09/2026, e nao no codigo: nao ha erro nenhum, o dialogo
     simplesmente aparece no canto. */
  margin:auto;
  /* a linha do acento e o unico enfeite, e ela e a assinatura da pele */
  border-top:4px solid var(--acento-texto,var(--amber));
}
.abertura::backdrop{background:rgba(4,5,6,.82)}

.abertura-topo{display:flex;align-items:center;gap:13px;padding:20px 20px 0}
.abertura-rosto{
  width:56px;height:56px;flex:0 0 auto;border-radius:50%;object-fit:cover;
  /* o retrato entra so quando a pele tem um; sem ele o titulo ocupa a linha */
  background:var(--bg3)}
.abertura h2{
  margin:0;font-family:var(--display);font-size:23px;line-height:1.12;
  letter-spacing:-.01em;font-weight:700}

.abertura-txt{
  padding:14px 20px 0;font-size:14.5px;line-height:1.62;color:var(--dim)}
.abertura-txt b{color:var(--txt);font-weight:700}

.abertura-ok{
  display:block;width:calc(100% - 40px);margin:20px;
  min-height:48px;                       /* alvo de toque, celular primeiro */
  border:0;border-radius:0;cursor:pointer;
  background:var(--acento-texto,var(--amber));color:var(--sobre-acento,#0E1011);
  font-family:var(--body);font-weight:700;font-size:14.5px;letter-spacing:.01em}
.abertura-ok:hover{filter:brightness(1.08)}
.abertura-ok:focus-visible{outline:2px solid var(--txt);outline-offset:2px}

@media(max-width:430px){
  .abertura-topo{padding:17px 16px 0;gap:11px}
  .abertura-rosto{width:46px;height:46px}
  .abertura h2{font-size:20px}
  .abertura-txt{padding:12px 16px 0;font-size:13.5px}
  .abertura-ok{width:calc(100% - 32px);margin:17px 16px}
}

/* ===== css/90-voto.css ===== */
/* ---------- ⚡ +1 VOTO: atalho de cadastro, presente em toda tela ----------
 * A barra de KPIs e do MAPA. Nas outras abas o espaco vale mais como atalho de
 * cadastrar do que como painel de numero que ninguem le duas vezes.
 */
body[data-aba="rede"] .kpibar,
body[data-aba="disputa"] .kpibar{display:none}

main{height:calc(100vh - var(--head) - var(--kpi))}
main{height:calc(100dvh - var(--head) - var(--kpi))}
body[data-aba="rede"] main,
body[data-aba="disputa"] main{height:calc(100dvh - var(--head))}

/* botao do topo (desktop) */
.btn-voto{display:flex;align-items:center;gap:7px;font-weight:800;font-size:12.5px;
  letter-spacing:.4px;padding:8px 14px;border:2px solid var(--tinta);background:var(--amber);
  color:var(--sobre-acento);box-shadow:var(--dura);white-space:nowrap}
.btn-voto:hover{background:#F2703D}
.btn-voto:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--tinta)}
.btn-voto .raio{width:13px;height:16px;flex-shrink:0}
.btn-voto .n{font-family:var(--mono);font-size:13px}

/* ---------- folha de cadastro rapido ---------- */
.voto-fundo{position:fixed;inset:0;background:rgba(20,24,31,.55);z-index:120;display:none}
.voto-fundo.on{display:block}
.voto{position:fixed;z-index:121;background:var(--bg2);border:2px solid var(--tinta);
  box-shadow:6px 6px 0 var(--tinta);width:min(430px,calc(100vw - 28px));
  top:50%;left:50%;transform:translate(-50%,-50%);max-height:88dvh;overflow:auto}
.voto .vtopo{height:auto;padding:13px 15px;border-bottom:2px solid var(--tinta);
  display:flex;align-items:center;gap:10px;background:var(--amber);color:var(--sobre-acento)}
.voto .vtopo h2{font-size:15px;font-weight:800;letter-spacing:.2px}
.voto .vtopo .fechar{margin-left:auto;font-size:20px;line-height:1;color:var(--sobre-acento);padding:0 4px}
.voto .corpo{padding:15px}
.voto label{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);font-weight:700;margin-bottom:4px}
.voto label .ob{color:var(--amber)}
/* 16px NO CAMPO NÃO É TAMANHO DE LETRA, É CONSERTO DE CELULAR (13/09/2026).
   Mesmo desenho do 97-operacao.css (commit 7bb2152): o Safari do iPhone dá zoom
   sozinho ao focar um campo com fonte menor que 16px, e o zoom não volta quando
   a pessoa sai dele. Esta folha é o caminho mais usado do app — o cabo abre o
   +1 Voto a cada pessoa que aborda na rua — e a folha fica colada no rodapé:
   com a tela ampliada, o botão SALVAR sai por baixo do que se vê.
   Medido antes: os oito campos em 14px. A caixa "já é voto" fica de fora: é
   checkbox de 22x22, não recebe texto, e o iOS não amplia por causa dele. */
.voto input,.voto select{width:100%;font:inherit;font-size:16px;padding:9px 10px;
  border:2px solid var(--tinta);background:var(--bg);color:var(--txt);margin-bottom:11px}
.voto input:focus,.voto select:focus{outline:none;background:#fff;box-shadow:2px 2px 0 var(--amber)}
.voto .dupla{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.voto .origens{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.voto .origens button{display:flex;align-items:center;gap:6px;font-size:12px;padding:6px 9px;
  border:2px solid var(--tinta);background:var(--bg)}
/* O CHIP ESCOLHIDO SOME EM 26 DAS 27 PELES, e sumia desde sempre (12/09/2026).
   `background:var(--tinta);color:var(--bg)` foi escrito para o tema do Diego,
   que e o unico claro: la e quase-preto sobre creme. Nas outras vinte e seis,
   `--tinta` e #000000 e `--bg` e #08090A, entao o chip selecionado media
   1,05:1 de texto e 1,19:1 contra a folha. Origem e campo obrigatorio do +1
   Voto, e nada na tela dizia qual estava marcada.

   O acento resolve os dois de uma vez, e nao e invencao: e o que a tela irma
   ja faz (`.cadform .orgchips button.on` em 74-cadastro.css). `--sobre-acento`
   existe justamente porque cada pele mede a cor que le sobre o proprio acento. */
.voto .origens button.on{background:var(--amber);color:var(--sobre-acento)}
.voto .origens button i{width:9px;height:9px;border:1px solid var(--tinta)}
.voto .salvar{width:100%;font-weight:800;font-size:14px;padding:12px;border:2px solid var(--tinta);
  background:var(--amber);color:var(--sobre-acento);box-shadow:var(--dura)}
.voto .salvar:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--tinta)}
.voto .salvar[disabled]{background:var(--bg3);color:var(--dim);box-shadow:none;cursor:not-allowed}
.voto .aviso{font-size:11.5px;color:var(--dim);line-height:1.5;margin-top:10px}
.voto .erro{font-size:12px;color:var(--red);margin-top:9px;font-weight:700}
.voto .feito{border:2px solid var(--green);background:#E6F5EC;padding:11px;font-size:12.5px;
  margin-bottom:12px}
.voto .feito b{color:var(--green)}
/* Telefone ja na base nao e sucesso nem erro: e uma escolha do operador.
   Ambar, igual ao bloco de correspondencia do prototipo de cadastro. */
.voto .achou{border:2px solid var(--amber);background:#FDEAE1;padding:11px;font-size:12.5px;
  margin-bottom:12px;line-height:1.5}
.voto .achou b{color:var(--amber)}
.votoesc{display:flex;gap:8px;margin-top:10px}
.votoesc .fbtn{flex:1;padding:9px 6px;font-size:11px}

/* ---------- O QUE ESTE CONTATO É: o seletor do funil (13/09/2026) ----------
   Classes próprias (.funil-*) e uma declaração só, aqui, para as três telas que
   o usam: o formulário da aba (74-cadastro.css), a folha (esta) e o diálogo da
   lista do cabo (96-cabo.css). A concatenação é alfabética e `90-` entra depois
   de `74-` e antes de `96-`, então quem precisar vencer usa seletor de contexto,
   que ganha por especificidade e não por ordem.

   A forma é a dos chips da chapa (93-chapa.css), de propósito: são duas
   perguntas de radiogroup lado a lado na mesma folha, e duas formas diferentes
   fariam a tela ter dois idiomas para o mesmo gesto.

   O escolhido usa `--amber` sobre `--sobre-acento` como os outros chips do app.
   Pintar "Descartar" de vermelho e "Já é voto" de verde seria mais bonito e
   custaria uma medição de contraste por pele, em vinte e sete — e foi
   exatamente isso que derrubou o chip de origem em 26 delas até 12/09.

   Alvo de toque de 44px em todo botão, aqui e não só no celular: este seletor
   nasce dentro de um diálogo e de uma folha que o cabo abre com o polegar. */
.funil-campo{margin:0 0 12px;min-width:0}
.funil-campo>span,.funil-campo>label{display:block;font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim);font-weight:700;margin-bottom:6px}
.funil-chips{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.funil-chips button{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:8px 12px;font:inherit;font-size:12px;font-weight:700;
  line-height:1.2;cursor:pointer;max-width:100%;flex:1 1 auto;
  border:2px solid var(--tinta);background:var(--bg);color:var(--txt)}
.funil-chips button[aria-checked="true"]{background:var(--amber);color:var(--sobre-acento);
  border-color:var(--amber)}
.funil-chips button:hover{transform:translate(-1px,-1px)}
.funil-dica{font-size:11px;color:var(--dim);line-height:1.5;margin:6px 0 0}
@media(prefers-reduced-motion:reduce){ .funil-chips button:hover{transform:none} }

/* ---------- A GAVETA "Mais dados" ----------
   Os dezesseis campos que só a aba CADASTRO tinha, dentro de um `<details>`
   fechado. Fechada, a folha continua sendo o que sempre foi; aberta, ela é o
   cadastro completo — que é o ponto da fusão de 13/09.

   O `summary` tem 44px de altura e marcador próprio, porque o triângulo padrão
   muda de desenho e de posição entre navegadores e some no Safari antigo. */
.voto .v-mais{margin:0 0 12px;border:2px solid var(--tinta);background:var(--bg)}
.voto .v-mais>summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;
  font-size:12.5px;font-weight:800;letter-spacing:.02em;cursor:pointer;list-style:none;
  color:var(--txt)}
.voto .v-mais>summary::-webkit-details-marker{display:none}
.voto .v-mais>summary::before{content:'+';font-family:var(--mono);font-size:15px;
  font-weight:700;color:var(--amber);width:14px;flex:0 0 auto;text-align:center}
.voto .v-mais[open]>summary::before{content:'−'}
.voto .v-mais>summary span{font-weight:600;font-size:11px;color:var(--dim);letter-spacing:0}
.voto .v-mais>summary:hover{background:var(--bg2)}
.voto .v-mais-corpo{padding:4px 12px 12px}
.voto .v-mais-tit{font-family:var(--display,inherit);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--amber);font-weight:800;margin:10px 0 7px}
.voto .v-mais-corpo>.v-mais-tit:first-child{margin-top:2px}
/* textarea nao entrava em `.voto input,.voto select`: sem esta linha ele saía
   com a fonte herdada do body, que e menor que 16px, e o Safari do iPhone da
   zoom sozinho ao focar campo abaixo de 16px — o mesmo defeito que o bloco de
   13/09 consertou nos outros oito campos desta folha. */
.voto textarea{width:100%;font:inherit;font-size:16px;padding:9px 10px;resize:vertical;
  border:2px solid var(--tinta);background:var(--bg);color:var(--txt);margin-bottom:11px}
.voto textarea:focus{outline:none;background:#fff;box-shadow:2px 2px 0 var(--amber)}
/* Na V3 o endereco sobe da gaveta para a folha (91-voto-v3.js). */
.voto .v3-endereco{min-width:0}

@media(max-width:860px){
  /* No celular a pagina rola nas abas que nao sao o mapa: a lista da colmeia
     mora embaixo do canvas e antes nao havia como chegar nela. */
  /* o `overflow:hidden` do html tambem prendia a pagina: sem soltar os dois,
     rolar o celular nao fazia nada e a lista ficava inalcancavel */
  html{height:auto;overflow:auto}
  body{height:auto;min-height:100%;overflow:auto}
  body[data-aba="mapa"]{height:100%;overflow:hidden}
  body[data-aba="rede"] main{height:auto;min-height:calc(100dvh - var(--head))}
  body[data-aba="rede"] .pane.on{height:auto}
  /* no celular o atalho mora no rodape, no alcance do polegar */
  header .btn-voto{display:none}
  .voto-barra{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:9px 12px
    calc(9px + env(safe-area-inset-bottom));background:var(--bg2);
    border-top:2px solid var(--tinta);display:flex}
  .voto-barra .btn-voto{flex:1;justify-content:center;font-size:14px;padding:12px}
  body[data-aba="rede"] .redelado{padding-bottom:76px}
  body[data-aba="disputa"] .disp{padding-bottom:76px}
  .voto{top:auto;bottom:0;left:0;transform:none;width:100%;max-height:92dvh;
    box-shadow:0 -4px 0 var(--tinta)}
  /* ALVO DE TOQUE DE 44px NO QUE SE APERTA COM O POLEGAR (12/09/2026).
     Medido a 375px com os CSS reais: os campos saiam com 40,1px, os chips de
     origem com 31,4px, os dois botoes da escolha com 43,9px e o X de fechar com
     20x21,7px. Esta e a folha que o cabo abre o dia inteiro no celular, e o
     minimo da casa e 44px.

     O bloco irmao ja existia para a tela de cadastro (74-cadastro.css, "alvo de
     toque de verdade no que se aperta com o polegar"): a folha do +1 Voto e que
     tinha ficado de fora, e ela e o caminho mais usado dos dois.

     So no celular, como no irmao: no desktop o ponteiro nao precisa de 44px, e
     campo de 44px numa folha de 430px vira formulario de quiosque. */
  .voto input,.voto select{min-height:44px}
  .voto .origens button{min-height:44px}
  .votoesc .fbtn{min-height:44px}
  .voto textarea{min-height:88px}
  /* O X cresce de 20x21,7 para 44x44 sem empurrar a barra: a margem negativa
     come o padding vertical dela, que o alvo de 44px agora garante sozinho.
     Medido: barra de 47,8px antes, 47,8px depois. Com -6px ela ia a 59,8px, e
     doze pixels no topo de uma folha que ja ocupa 92dvh saem do conteudo. */
  .voto .vtopo .fechar{min-width:44px;min-height:44px;display:flex;align-items:center;
    justify-content:center;margin:-12px -8px -12px auto;padding:0}
}
@media(min-width:861px){ .voto-barra{display:none} }
/* 10/09/2026: "ja e voto" e "cadastrar em nome de" */
.voto .v-ehvoto{display:flex;align-items:center;gap:9px;font-size:12.5px;margin:0 0 11px;min-height:44px;cursor:pointer}
.voto .v-ehvoto input{width:22px;height:22px;margin:0;accent-color:var(--amber)}
.voto .votoesc a.fbtn{text-decoration:none;display:flex;align-items:center;justify-content:center;min-height:44px}

/* O asterisco de obrigatorio nos rotulos que nao sao <label>: "Em quem vota" e
   "O que este contato e" viraram obrigatorios na V3 (15/09/2026). */
.voto .chapa-campo .ob,.voto .funil-campo .ob{color:var(--amber)}

/* ===== css/91-voto-origem.css ===== */
/* ---------- O "DE ONDE VEIO" TRAVADO ----------
 * 14/09/2026. Número que veio de lista do sistema chega com a origem já
 * definida, e o cabo não a reescreve. O contato externo — o que ele abordou na
 * hora, que não existe em lista nenhuma — continua com o campo livre.
 *
 * Arquivo próprio, e não uma regra dentro do `90-voto.css` ou do
 * `comite.extra.css`, porque as duas folhas estavam sendo mexidas por outra
 * sessão na mesma noite. Ele entra depois do tema na concatenação, então vence
 * o `.v-aux` do extra da pele sem precisar de `!important`.
 *
 * O campo travado precisa parecer PREENCHIDO, e não desligado: cinza sobre
 * cinza é o defeito que o Gabriel apontou nesta mesma rodada. O texto fica na
 * cor cheia (`--txt` sobre `--bg3` dá 13,3:1 na pele do comitê, muito acima dos
 * 4,5:1 da WCAG 1.4.3) e quem sinaliza a trava é a borda tracejada mais o
 * cadeado, não um apagamento do texto.
 */

#v-origem.travado {
  background: var(--bg3);
  color: var(--txt);
  border-style: dashed;
  border-color: var(--line2);
  cursor: default;
  /* o cadeado desenhado na própria folha: um <svg> ali exigiria mexer no JS que
     monta o campo, e o ícone não carrega informação que o texto já não dê */
  padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA7AD' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 15px 15px;
}

/* Foco continua visível: campo somente leitura ainda recebe Tab, e some o anel
   de foco só porque não se digita nele é tirar a pessoa do mapa da folha. */
#v-origem.travado:focus,
#v-origem.travado:focus-visible {
  outline: 2px solid var(--acento-texto, var(--gold));
  outline-offset: 1px;
}

.v-origem-travada {
  display: none;
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--dim);
}
.v-origem-travada.on { display: block; }

/* ===== css/91-voto-v3.css ===== */
/* ---------- A FOLHA CADASTRAR NA ORDEM DE 25/09/2026 (V3) ----------
 * Pedido do Rafael, no Cadastrar do cabo. As classes abaixo são escritas pelo
 * src/js/91-voto-v3.js, que só roda quando a pele declara `cadastroV3`: nas
 * outras peles nenhum destes elementos existe, e nada aqui muda a cara delas.
 *
 * Arquivo próprio, e não mais um bloco no comite.extra.css, porque a V3 é o
 * chassi que as outras peles vão receber quando forem atualizadas (o espelho é
 * o comitê, decisão de 12/09). Cor só por variável do tema.
 *
 * O tema (com o extra da pele) entra ANTES dos componentes no build: regra
 * daqui com a mesma especificidade vence por ordem, e o foco do campo de faixa
 * sobe um degrau para vencer o `:root .voto input:focus` do extra.
 */

/* ---------- as linhas lado a lado ----------
   `minmax(0, …)` e não `1fr` puro: filho de grid tem `min-width:auto`, e um
   e-mail comprido empurraria a coluna para fora da folha a 360px. */
.voto .v3-linha{display:grid;gap:10px;min-width:0}
.voto .v3-g2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
/* E-mail | Zona | Seção: zona e seção são três ou quatro dígitos, e o e-mail
   precisa do dobro. Três terços iguais dariam 105px ao e-mail a 375px. */
.voto .v3-g3{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}
.voto .v3-linha>div{min-width:0}
.voto .v3-ocultos{display:none}

/* A linha que diz o que o CEP achou (ou por que não achou). Ela fica colada no
   campo e é região `aria-live`: por isso ela NUNCA sai da página com
   `display:none`. Região que nasce escondida e aparece já com o texto não é
   anunciada pelo leitor de tela na primeira vez. Vazia, ela só perde a margem. */
.voto .v-cep-aux{margin:-6px 0 10px;font-size:11px;line-height:1.4;color:var(--dim)}
.voto .v-cep-aux:empty{margin:0}

/* ---------- OBSERVAÇÃO | PRINT DA CONVERSA (25/09/2026) ----------
   Duas colunas, dois terços e um terço (o Rafael pediu "1/4 ou 1/3": a 390px um
   quarto daria 85px, e "Print da Conversa" não caberia em duas linhas). O rótulo
   fica só em cima da observação; o campo e a caixa dividem a segunda linha e
   esticam juntos, então quem aumenta o campo aumenta a caixa. */
.voto .v3-obs{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);column-gap:10px;align-items:stretch}
.voto .v3-obs>label{grid-column:1;grid-row:1}
/* 96px: um pouco mais que a caixa vazia (ícone, título em duas linhas e o
   "(opcional)" somam 95 a 360px de largura). Com isso a linha não pula quando o
   print é escolhido e a caixa troca de conteúdo. */
.voto .v3-obs>textarea{grid-column:1;grid-row:2;min-height:96px}
.voto .v3-obs>.v-print{grid-column:2;grid-row:2}
.voto .v3-obs>.v-print-msg{grid-column:1 / -1;grid-row:3}

/* ---------- DEPUTADO ESTADUAL? (01/10/2026, migration 087) ----------
   Opcional, mas o Gabriel quer que o cabo note o campo novo e preencha: borda
   vermelha de alerta (`--zap-alerta`, #FF4D4D, 5,6:1 sobre --bg2) enquanto não
   há nome da lista, e a borda normal quando o nome bate. O vermelho é de
   ALERTA da interface, não cor de campanha: ele só contorna o campo e some
   quando a pergunta foi respondida. O rótulo vem em negrito e maior que os
   outros, para o campo se ler como pergunta. */
.voto .v3-dep{margin-bottom:4px}
.voto .v3-dep>label{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--txt)}
.voto .v3-dep>label small{font-size:10.5px;font-weight:500;letter-spacing:.04em;text-transform:none;color:var(--dim)}
:root .voto #v-dep{border:2px solid var(--zap-alerta,#FF4D4D);
  box-shadow:0 0 0 3px rgba(255,77,77,.18)}
:root .voto #v-dep:focus{outline:2px solid var(--zap-alerta,#FF4D4D);outline-offset:1px;box-shadow:0 0 0 4px rgba(255,77,77,.22)}
:root .voto #v-dep.ok{border-color:var(--dim2);box-shadow:none}
:root .voto #v-dep.ok:focus{outline-color:var(--amber)}
.voto .v-dep-aux{margin:6px 0 10px;font-size:11.5px;line-height:1.4;color:var(--dim)}
.voto .v3-dep:has(#v-dep.erro) .v-dep-aux{color:var(--zap-alerta,#FF4D4D)}
.voto #v-dep-sug button{min-height:44px}

.voto .v-print{position:relative;display:flex;min-width:0;margin-bottom:11px}
/* O campo de arquivo sai da vista sem sair do teclado: `display:none` tiraria o
   foco dele, e quem navega por tecla não chegaria à caixa. Quem recebe o toque é
   o rótulo, que é a caixa inteira. */
.voto .v-print-arq{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;opacity:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;min-height:0}
/* A caixa vazia. É um <label>, então desfaz o versalete e o tamanho de rótulo de
   campo que `.voto label` dá a todos. A borda tracejada em `--dim2` passa dos 3:1
   que a WCAG pede para a borda de um controle; em `--line2` ficaria em 1,9:1. */
.voto .v-print-alvo{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;min-height:96px;margin:0;padding:8px 6px;border:2px dashed var(--dim2);background:var(--bg);
  color:var(--txt);text-align:center;cursor:pointer;text-transform:none;letter-spacing:0;
  font-size:13px;font-weight:700;line-height:1.2}
.voto .v-print-alvo[hidden],.voto .v-print-pronto[hidden]{display:none}
.voto .v-print-arq:focus-visible+.v-print-alvo{outline:2px solid var(--amber);outline-offset:2px}
.voto .v-print-alvo[aria-busy="true"]{cursor:progress}
.voto .v-print-ic{width:24px;height:24px;flex:0 0 auto;fill:none;stroke:var(--acento-texto,var(--amber));
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.voto .v-print-tit{overflow-wrap:anywhere}
.voto .v-print-sub{font-size:11.5px;font-weight:600;color:var(--dim)}
/* A caixa com o print escolhido: a miniatura cobre a caixa (de cima, que é onde
   a conversa começa), o peso fica num canto e o X no outro, com 44px de alvo. */
.voto .v-print-pronto{position:relative;flex:1;display:flex;min-height:96px;overflow:hidden;
  border:2px solid var(--tinta);background:var(--bg3)}
/* A MINIATURA NÃO PODE DAR ALTURA À LINHA. Print de conversa é alto (720x1600):
   com a imagem no fluxo, a caixa crescia até a proporção dela e levava o campo da
   observação junto (medido na prévia: 217px a 360 de largura, 267px a 430). Posta
   por cima da caixa, ela só preenche o espaço que o campo já definiu. */
.voto .v-print-mini{position:relative;flex:1;display:block;min-height:0;margin:0;padding:0;border:0;
  background:none;cursor:zoom-in}
.voto .v-print-mini img{position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:cover;object-position:top}
.voto .v-print-kb{position:absolute;left:4px;bottom:4px;padding:1px 5px;font-size:11px;font-weight:700;
  line-height:1.4;background:var(--bg);color:var(--txt);pointer-events:none}
.voto .v-print-tira{position:absolute;top:0;right:0;width:44px;height:44px;min-height:44px;display:grid;
  place-items:center;margin:0;padding:0;border:0;background:transparent;cursor:pointer}
.voto .v-print-tira svg{width:24px;height:24px;padding:4px;border-radius:50%;background:var(--bg);
  border:1.5px solid var(--dim2);fill:none;stroke:var(--txt);stroke-width:2.6;stroke-linecap:round}
.voto .v-print-msg{margin:-6px 0 10px;font-size:11.5px;line-height:1.4;color:var(--dim)}
.voto .v-print-msg:empty{margin:0}
.voto .v-print-msg.erro{color:var(--acento-texto,var(--amber))}

/* ---------- O AVISO DA NOTA, embaixo do botão ----------
   O troféu vai na cor de apoio do tema, a mesma do meio da régua de confiança,
   que já foi medida contra o grafite desta folha. */
.voto .v-aviso-nota{display:flex;align-items:flex-start;gap:8px}
.voto .v-trofeu{width:18px;height:18px;flex:0 0 auto;margin-top:-1px;fill:none;
  stroke:var(--acento2-texto,var(--gold));stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- CONFIANÇA, de arrastar ----------
   A caixa tem a moldura das outras perguntas da folha (a gaveta, o "em quem
   vota"), e a cor vem de duas variáveis que o js escreve nela: `--conf-cor`, a
   cor do valor, e `--conf-pct`, quanto do trilho está cheio. */
.voto .v-conf-box{margin:0 0 14px;padding:10px 12px 6px;border:2px solid var(--tinta);background:var(--bg)}
.voto .v-conf-topo{display:flex;align-items:center;justify-content:space-between;gap:10px}
.voto .v-conf-topo label{margin:0}
.voto .v-conf-n{font-family:var(--display,inherit);font-weight:900;font-size:26px;line-height:1;
  min-width:2ch;text-align:right;font-variant-numeric:tabular-nums;color:var(--conf-cor,var(--dim))}
/* `pan-y`: o arrasto de lado é do controle, e o de cima para baixo continua
   rolando a folha. Com `none`, o dedo que começasse no trilho travava a rolagem. */
.voto .v-conf-pista{position:relative;height:44px;touch-action:pan-y}

/* O controle nativo, sem a moldura dos campos de texto da folha. */
.voto .v-conf-box input[type=range]{position:absolute;inset:0;width:100%;height:44px;min-height:44px;
  margin:0;padding:0;border:0;background:transparent;box-shadow:none;cursor:pointer;
  -webkit-appearance:none;appearance:none}
.voto .v-conf-box input[type=range]:focus{outline:none;background:transparent;box-shadow:none}
.voto .v-conf-box input[type=range]:focus-visible{outline:2px solid var(--conf-cor,var(--dim));outline-offset:2px}

/* O TRILHO CHEIO ATÉ O VALOR COM A RÉGUA INTEIRA POR BAIXO. Duas camadas: a de
   cima é transparente até o valor e cobre o resto; a de baixo é a régua de
   frio a quente (neutro, laranja no meio, acento no topo), que é a mesma conta
   do confCor no js. Assim o 7 mostra o caminho do 1 ao 7, e não uma cor chapada. */
/* O CONTORNO DE 1px em `--dim2` é o que faz a parte vazia existir: o `--line2`
   sozinho dá 1,92:1 contra o fundo da caixa (medido em 25/09), abaixo dos 3:1
   que a WCAG pede para a borda de um controle. Com o contorno, 5,31:1. */
.voto .v-conf-box input[type=range]::-webkit-slider-runnable-track{height:12px;border:0;
  box-shadow:inset 0 0 0 1px var(--dim2);
  background:linear-gradient(90deg,transparent 0 var(--conf-pct,44%),var(--line2) var(--conf-pct,44%) 100%),
    linear-gradient(90deg,var(--dim),var(--acento2,var(--gold)) 44.4%,var(--acento-texto,var(--amber)))}
.voto .v-conf-box input[type=range]::-moz-range-track{height:12px;border:0;
  box-shadow:inset 0 0 0 1px var(--dim2);
  background:linear-gradient(90deg,transparent 0 var(--conf-pct,44%),var(--line2) var(--conf-pct,44%) 100%),
    linear-gradient(90deg,var(--dim),var(--acento2,var(--gold)) 44.4%,var(--acento-texto,var(--amber)))}
/* O POLEGAR TEM 44x44, E O DESENHO DENTRO DELE TEM 34 (revisão de 25/09/2026).
   O Safari do iPhone só começa o arrasto quando o dedo cai DENTRO da caixa do
   polegar: tocar no trilho não muda o valor. Com o polegar de 30px, o alvo real
   no iOS era 30px, abaixo dos 44 da casa, mesmo com o controle inteiro tendo 44
   de altura. A caixa cresce e a bolinha visível é desenhada por dentro, em
   gradiente radial: disco na cor do valor, anel do fundo, anel na cor do valor. */
.voto .v-conf-box input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:44px;height:44px;margin-top:-16px;border:0;border-radius:50%;
  background:radial-gradient(circle,var(--conf-cor,var(--dim)) 0 12px,var(--bg) 12px 15px,
    var(--conf-cor,var(--dim)) 15px 17px,transparent 17.5px)}
.voto .v-conf-box input[type=range]::-moz-range-thumb{width:44px;height:44px;border:0;border-radius:50%;
  background:radial-gradient(circle,var(--conf-cor,var(--dim)) 0 12px,var(--bg) 12px 15px,
    var(--conf-cor,var(--dim)) 15px 17px,transparent 17.5px)}

/* AS MARCAS: 1, 5 e 10 escritos, os outros como traço. No trilho elas seguem o
   CENTRO do polegar, que anda de 22px a (largura - 22px): o recuo de 22px é
   metade dos 44px dele, e sem isso o 10 ficaria à direita de onde o polegar
   para. */
.voto .v-conf-marcas{display:flex;justify-content:space-between;padding:0 22px;height:18px;margin-top:-4px}
.voto .v-conf-marcas span{position:relative;width:0;display:flex;justify-content:center;white-space:nowrap;
  font-family:var(--mono);font-size:11px;line-height:18px;color:var(--dim)}
.voto .v-conf-marcas span.p::before{content:'';position:absolute;top:3px;width:2px;height:6px;background:var(--line2)}
.voto .v-conf-marcas span.g{font-weight:700}
.voto .v-conf-marcas span.on{color:var(--conf-cor,var(--txt))}
.voto .v-conf-marcas span.p.on::before{background:var(--conf-cor,var(--txt))}

/* ===== css/92-print-conversa.css ===== */
/* ---------- O PRINT DA CONVERSA: a linha da ficha e a janela de ver ----------
 * (25/09/2026, src/js/92-print-conversa.js). A caixa de escolher o print, na
 * folha Cadastrar, mora no 91-voto-v3.css com o resto da folha; aqui fica o que
 * aparece fora dela: a linha "Print da conversa" das duas fichas (Passaporte e
 * CRM) e o <dialog> que mostra a imagem. Só a pele V3 gera esses elementos.
 * Cor só por variável do tema.
 */

/* A linha nasce escondida e só aparece quando o banco diz que há print. As duas
   fichas declaram `display:grid` na linha (`.pp-kv`, `dl.cx-kv div`), e regra de
   autor ganha do [hidden] do navegador: sem esta, a linha vazia apareceria em
   toda ficha. Duas classes vencem as duas regras por especificidade. */
.print-linha[hidden]{display:none}

.print-ver-btn{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;margin:0;
  border:2px solid var(--dim2);background:transparent;color:var(--txt);font:inherit;font-size:13px;
  font-weight:700;cursor:pointer}
.print-ver-btn:hover{border-color:var(--txt)}
.print-ver-btn:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.print-ver-btn svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* A janela. Largura de celular primeiro: a tela inteira menos 8px de cada lado,
   até 720px, que é a largura máxima do print salvo (nada ali é ampliado além do
   que foi guardado). Print alto rola por dentro; o topo com o X fica preso. */
.print-ver{width:min(100vw - 16px, 720px);max-width:none;max-height:calc(100dvh - 16px);margin:auto;padding:0;
  border:2px solid var(--tinta);background:var(--bg2);color:var(--txt);overflow:auto;
  overscroll-behavior:contain}
.print-ver::backdrop{background:rgba(0,0,0,.72)}
.print-ver-topo{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:0 0 0 14px;background:var(--bg2);border-bottom:2px solid var(--tinta);
  font-size:14px;font-weight:800}
.print-ver-fecha{width:44px;height:44px;display:grid;place-items:center;margin:0;padding:0;border:0;
  background:transparent;color:var(--txt);cursor:pointer}
.print-ver-fecha svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.print-ver-fecha:focus-visible{outline:2px solid var(--amber);outline-offset:-4px}
.print-ver-corpo{padding:8px}
.print-ver-corpo img{display:block;width:100%;height:auto}
.print-ver-corpo img[hidden]{display:none}
.print-ver-msg{margin:10px 6px;font-size:14px;line-height:1.5;color:var(--dim)}
.print-ver-msg:empty{display:none}

/* ===== css/93-chapa.css ===== */
/* ---------- CHAPA: os chips de voto e o filtro por candidato ----------
   Arquivo proprio e classes proprias (.chapa-*), de proposito: a concatenacao
   e alfabetica e `93-` entra antes de `95-*` e `97-*`. Regra nova com a mesma
   especificidade de `.opbtn` ou `.orgchips button` perderia em silencio; com
   classe propria nao ha disputa.

   So variaveis do tema. A cor de cada candidato vem do DADO (window.MARCA.chapa)
   por uma custom property inline (--chapa-cor); nenhuma cor esta escrita aqui.

   Alvo de toque >= 44px em todo botao (celular primeiro). */
.chapa-campo{margin:0 0 12px;min-width:0}
.chapa-campo>span,.chapa-campo>label{display:block;font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim);font-weight:700;margin-bottom:6px}
.chapa-chips{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.chapa-chips button{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 12px;
  font:inherit;font-size:12px;font-weight:700;line-height:1.2;cursor:pointer;max-width:100%;
  border:2px solid var(--tinta);background:var(--bg);color:var(--txt)}
.chapa-chips button i{width:9px;height:9px;flex:0 0 auto;border:1px solid var(--tinta);
  background:var(--chapa-cor,transparent)}
/* Escolhido = massa de acento com a frente medida, como os chips de origem do
   Cadastro: tinta sobre fundo nao contrasta na pele do produto. */
.chapa-chips button[aria-checked="true"]{background:var(--amber);color:var(--sobre-acento);
  border-color:var(--amber)}
.chapa-chips button[aria-checked="true"] i{border-color:var(--sobre-acento)}
.chapa-chips button:hover{transform:translate(-1px,-1px)}

/* o filtro da operacao: chips e a legenda que diz o que a soma inclui */
.chapa-filtro{margin:0 0 12px;min-width:0}
.chapa-filtro .chapa-chips button{font-family:var(--display);text-transform:uppercase;
  letter-spacing:.04em;font-size:11px}
.chapa-dica{font-size:11px;color:var(--dim);line-height:1.5;margin:6px 0 0}

/* O +1 Voto e uma caixa estreita: os chips ocupam a linha inteira. */
.voto .chapa-campo{margin-bottom:12px}
.voto .chapa-chips button{flex:1 1 auto;justify-content:center}

@media(max-width:430px){
  .chapa-chips button{flex:1 1 auto;justify-content:center;padding:8px 10px}
}
@media(prefers-reduced-motion:reduce){
  .chapa-chips button:hover{transform:none}
}

/* ===== css/94-perfil.css ===== */
/* ---------- PERFIL E AJUSTES (sessão C, 13/09/2026) ----------
 * Só variáveis do tema: nenhum hex aqui. Cor e fonte saem de
 * src/temas/<pele>.css, que é o único lugar que sabe se a pele é clara ou
 * escura.
 *
 * ORDEM DA CONCATENAÇÃO: esta folha entra ANTES de 95-equipe.css e das 97-*.
 * Regra minha com a mesma especificidade de uma delas perde em silêncio, então
 * tudo aqui usa classe própria (`pf-`), inclusive o que decora um elemento que
 * nasce em outra folha — é o caso de `.pf-av`, que vive dentro do `.eqini` da
 * EQUIPE. É a mesma armadilha que o CLAUDE.md documentou com
 * 97-administrativo.css.
 *
 * Celular primeiro: medido a 375px, sem rolagem lateral, alvo de toque de 44px
 * em todo botão e campo, e 16px de fonte em todo campo de texto — abaixo disso
 * o Safari do iPhone amplia a tela sozinha ao focar, e a ampliação não volta.
 */

/* ---------- o avatar, onde quer que ele seja desenhado ---------- */
/* A foto é uma camada POR CIMA das iniciais, que continuam no HTML. Quando ela
   não carrega, o JS a remove e as iniciais reaparecem sem buraco e sem segundo
   pedido de rede.

   REDONDO, e não quadrado (pedido do Gabriel em 13/09/2026). O chassi desta casa
   é contorno duro e canto vivo, então o círculo é a exceção declarada: rosto de
   gente lê como pessoa, e o quadrado fazia o cartão da equipe parecer um crachá
   de patrimônio. A regra mora em `.pf-av`, que é a classe que o `htmlAvatar()`
   põe em TODO avatar — quem adotar o helper depois (a OPERAÇÃO e a tela do cabo
   ainda desenham iniciais por conta própria) herda o círculo sem tocar em CSS.

   `!important` porque esta folha é concatenada ANTES de 95-equipe.css e das
   97-*, e qualquer canto vivo declarado lá venceria por ordem. É a exceção que
   o comentário de ordem logo abaixo previa. */
.pf-av{position:relative;overflow:hidden;border-radius:50%!important}
.pf-avfoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  border-radius:50%}

/* ---------- o diálogo ---------- */
.pfdlg{
  border:2px solid var(--tinta);padding:0;border-radius:0;
  background:var(--bg2);color:var(--txt);
  width:min(430px,calc(100vw - 24px));
  max-height:calc(100dvh - 32px);
  box-shadow:var(--dura);overflow:auto;
  /* o reset zera margem de tudo; sem isto o diálogo encosta no canto */
  margin:auto}
.pfdlg::backdrop{background:rgba(4,5,6,.78)}
.pfcorpo{padding:18px}

.pfcap{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.pfcap h2{
  font-family:var(--display);font-size:21px;line-height:1.15;font-weight:700;
  letter-spacing:-.01em;flex:1;min-width:0}
.pffechar{
  flex-shrink:0;width:44px;height:44px;margin:-10px -8px -10px 0;
  background:none;border:none;color:var(--dim);
  font-size:17px;line-height:1;cursor:pointer;border-radius:0}
.pffechar:hover{color:var(--txt)}
.pffechar:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}

/* ---------- o retrato e os botões dele ---------- */
/* A 375px o retrato fica EM CIMA do texto, e não ao lado: um bloco de 104px
   mais três botões na mesma linha espremeria os botões a menos de 100px cada,
   e botão espremido quebra o rótulo no meio da palavra. */
.pfretratobloco{display:flex;flex-direction:column;align-items:center;gap:13px;
  padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line2)}
.pfretrato{
  width:104px;height:104px;flex-shrink:0;
  border:2px solid var(--tinta);background:var(--gold);color:var(--sobre-acento);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:30px;font-weight:700;letter-spacing:.04em}
.pfretratoacoes{width:100%;min-width:0}
.pfretratotxt{font-size:12.5px;line-height:1.5;color:var(--dim);margin-bottom:11px}
.pfbtns{display:flex;flex-wrap:wrap;gap:8px}

.pfbtn{
  flex:1 1 auto;min-width:132px;min-height:44px;padding:0 13px;cursor:pointer;
  border:2px solid var(--line2);background:var(--bg3);color:var(--txt);
  font-family:var(--body);font-weight:700;font-size:14px;border-radius:0}
.pfbtn:hover:not(:disabled){background:var(--bg);border-color:var(--tinta)}
.pfbtn:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.pfbtn:disabled{opacity:.55;cursor:wait}
.pfbtn-pri{background:var(--amber);color:var(--sobre-acento);border-color:var(--amber);
  width:100%;flex:none;margin-top:10px}
.pfbtn-pri:hover:not(:disabled){filter:brightness(1.08);background:var(--amber)}
/* "Remover" é destrutivo e não disputa o olhar com os outros dois. */
.pfbtn-some{flex:0 0 auto;min-width:96px;color:var(--dim);background:none}
.pfbtn-some:hover:not(:disabled){color:var(--red);border-color:var(--red);background:none}

/* ---------- campos ---------- */
.pfcampo{display:flex;flex-direction:column;gap:5px}
.pfrot{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);font-weight:700}
.pfcampo input{
  width:100%;font:inherit;font-size:16px;padding:9px 11px;min-height:44px;
  border:2px solid var(--tinta);background:var(--bg);color:var(--txt);border-radius:0}
.pfcampo input:focus{outline:none;box-shadow:2px 2px 0 var(--amber)}

/* O CAMPO TRAVADO PRECISA PARECER TRAVADO.
   `readonly` já impede digitar, então ninguém perde texto; o que falta é o
   olho saber disso antes de tentar. Fundo recuado, borda fraca, cursor de
   texto desligado e um cadeado desenhado com `::after` — sem imagem e sem
   fonte de ícone, porque isto é uma peça só. */
.pfcampo-off{position:relative}
.pfcampo-off input{
  background:var(--bg3);color:var(--dim);border-color:var(--line2);
  cursor:default;padding-right:34px}
.pfcampo-off input:focus{box-shadow:none}
.pfcampo-off::after{
  content:"";position:absolute;right:11px;bottom:13px;width:11px;height:9px;
  border:1.5px solid var(--dim2);border-radius:1px;
  box-shadow:0 -5px 0 -1.5px transparent, inset 0 0 0 0 transparent;
  background:
    linear-gradient(var(--dim2),var(--dim2)) 50% 45%/1.5px 3px no-repeat}
/* o arco do cadeado, desenhado em cima da caixinha */
.pfcampo-off::before{
  content:"";position:absolute;right:13.5px;bottom:20px;width:6px;height:6px;
  border:1.5px solid var(--dim2);border-bottom:none;
  border-radius:4px 4px 0 0}

/* A dica embaixo do campo, que diz o que aquele e-mail faz. Ela existe porque
   "e-mail" sozinho é ambíguo neste banco: um é onde a pessoa recebe, o outro é
   a credencial com que ela entra. */
.pfdica{font-size:11.5px;line-height:1.45;color:var(--dim2);margin:6px 0 0}

/* A GAVETA DO LOGIN é `<details>` nativo, sem uma linha de JavaScript — mesma
   regra da gaveta do painel: acordeão de JS aqui é regressão. Fechada por
   padrão porque trocar o login é raro e tem consequência (a pessoa fica sem
   entrar se errar o endereço), enquanto trocar o contato é rotina. */
.pflogin{margin-top:16px;border-top:1px solid var(--line2);padding-top:14px}
.pflogin>summary{
  cursor:pointer;list-style:none;min-height:44px;display:flex;align-items:center;
  font-size:12.5px;font-weight:700;color:var(--amber);text-decoration:underline}
.pflogin>summary::-webkit-details-marker{display:none}
.pflogin>summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.pflogin[open]>summary{margin-bottom:10px}
.pflogin .pfbtn{width:100%;margin-top:10px}

.pftrancado{margin-top:20px;padding-top:16px;border-top:1px solid var(--line2);
  display:flex;flex-direction:column;gap:11px}
.pftrancadocap{font-size:12px;line-height:1.5;color:var(--dim2);margin-bottom:2px}

.pfmsg{font-size:12.5px;line-height:1.45;font-weight:700;margin-top:10px;min-height:1px;
  overflow-wrap:anywhere}
.pfmsg.erro{color:var(--red)}
.pfmsg.ok{color:var(--green)}

/* A partir de 420px o retrato volta para o lado do texto: aí os três botões
   cabem lado a lado sem quebrar rótulo. */
@media(min-width:420px){
  .pfretratobloco{flex-direction:row;align-items:flex-start;gap:16px}
  .pfretratoacoes{flex:1}
}

/* ===== css/95-equipe.css ===== */
/* ---------- EQUIPE: quem tem acesso, e com que poder ----------
 * Aba visivel SO para papel admin. O banco ja garante o resto: as policies de
 * `perfis` deixam admin ler e escrever todos, e qualquer outro papel so a si.
 * A tela nao e a barreira de seguranca, e a conveniencia em cima dela.
 */
/* A barra de KPIs e do MAPA. Nesta aba ela ficava na tela mostrando contagem de
   liderancas em cima de uma lista de acessos, que nao tem relacao nenhuma. As
   outras abas ja faziam isso; a Equipe tinha ficado de fora da regra. */
body[data-aba="equipe"] .kpibar{display:none}
body[data-aba="equipe"] main{height:calc(100dvh - var(--head))}

.eqwrap{flex:1;overflow-y:auto;padding:22px}
.eqwrap h2{font-family:var(--display);font-size:27px;font-weight:800;font-stretch:88%;
  text-transform:uppercase;letter-spacing:-.4px;margin-bottom:5px}
.eqwrap .lead{font-size:12.5px;color:var(--dim);margin-bottom:20px;max-width:720px}

.eqbarra{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
/* 16px NO CAMPO NÃO É TAMANHO DE LETRA, É CONSERTO DE CELULAR (13/09/2026).
   Mesmo desenho do 97-operacao.css (commit 7bb2152): o Safari do iPhone dá zoom
   sozinho ao focar um campo com fonte menor que 16px, e o zoom não volta quando
   a pessoa sai dele — a tela fica ampliada, a barra de abas sai para fora e o
   resto do formulário vira rolagem lateral. O `user-scalable=no` do index.html
   não segura: o iOS ignora aquilo desde a versão 10, para não quebrar
   acessibilidade. Vale para todo campo desta folha; medido antes: busca 13.5px,
   papel e supervisor 13px, meta/dia 13px, criar acesso 14px, editar 13.5px.
   O interruptor de `.eqchave` fica de fora de propósito: é `appearance:none` com
   38x21 desenhados, não recebe texto, e o iOS não amplia por causa dele. */
.eqbusca{flex:1;min-width:200px;max-width:340px;font:inherit;font-size:16px;padding:9px 11px;
  min-height:44px;border:2px solid var(--tinta);background:var(--bg2);color:var(--txt)}
/* O foco NAO pinta o campo de branco. Media na pele mersinho a 390px: o
   `#fff` que estava aqui com `color:var(--txt)` (#E8EDEF) dava 1.18:1 — quem
   digitava nao via o que escrevia. A pele do comite escondia o defeito por
   acidente, porque o tema dela declara `background` para todo input com
   especificidade maior. Cor de campo sai do par --bg/--txt do tema, que e o
   unico lugar que sabe se a pele e clara ou escura. */
.eqbusca:focus{outline:none;background:var(--bg);box-shadow:2px 2px 0 var(--amber)}
/* O FILTRO POR FUNÇÃO, AO LADO DA BUSCA (13/09/2026).
   16px e 44px pelo mesmo motivo do campo de busca acima: abaixo disso o Safari
   do iPhone amplia a tela sozinha ao focar, e a ampliação não volta.
   `min-width` menor que o da busca de propósito — a `.eqbarra` tem `flex-wrap`,
   então em 375px os dois não cabem lado a lado e o seletor desce para a linha
   seguinte inteiro, em vez de espremer a busca até ela transbordar. */
.eqfiltro{flex:1;min-width:156px;max-width:230px;font:inherit;font-size:16px;padding:9px 10px;
  min-height:44px;border:2px solid var(--tinta);background:var(--bg2);color:var(--txt)}
.eqfiltro:focus{outline:none;background:var(--bg);box-shadow:2px 2px 0 var(--amber)}
.eqcontagem{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.06em}

.eqgrade{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:13px}
.eqcard{border:2px solid var(--tinta);background:var(--bg2);box-shadow:var(--dura);padding:14px}
.eqcard.inativo{opacity:.6;background:var(--bg3)}
.eqcard.eu{box-shadow:3px 3px 0 var(--amber)}
.eqtopo{display:flex;align-items:flex-start;gap:10px;margin-bottom:11px}
.eqini{width:38px;height:38px;flex-shrink:0;border:2px solid var(--tinta);background:var(--gold);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;
  font-weight:700}
.eqcard.inativo .eqini{background:var(--line2)}
.eqnome{font-weight:800;font-size:15px;line-height:1.2}
/* O nome vira botão do Passaporte (22/09/2026). `all:unset` tira o cromo
   padrão; `.eqnome` ao lado continua dando o peso e o tamanho. */
.eqnomebtn{all:unset;cursor:pointer}
.eqnomebtn:hover,.eqnomebtn:focus-visible{text-decoration:underline}
/* O nome social, abaixo do nome do contrato. Peso menor de proposito: nesta
   tela quem administra confere identidade, e o nome do contrato e o que casa
   com o CPF e com a folha. Esta linha diz como falar com a pessoa.
   Mesma gramatica do `.acsocial` da fila de aprovacao. */
.eqsocial{font-size:12.5px;color:var(--dim);line-height:1.3;margin-top:2px;overflow-wrap:anywhere}
/* CLASSE PROPRIA, e nao `<b>`, e a razao foi medida na previa: o tema do comite
   tem `.eqtopo b` na regra de TITULO (display condensada, caixa alta), e o nome
   social caiu la dentro -- "Kessia" saia "KESSIA" em Big Shoulders. Nome de
   gente nao vira titulo. Uma classe propria nao depende de eu adivinhar o CSS
   de cada uma das 27 peles, hoje e quando a proxima nascer. */
.eqsocial-n{color:var(--txt);font-weight:700;font-family:inherit;
  text-transform:none;letter-spacing:normal;line-height:inherit}
.eqmail{font-family:var(--mono);font-size:10.5px;color:var(--dim);word-break:break-all;margin-top:2px}
.eqselo{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  border:1.5px solid var(--amber);color:var(--amber);padding:2px 5px;white-space:nowrap}

/* `flex-wrap:wrap` e INCONDICIONAL desde 14/09/2026, e nao so abaixo de 860px
   de viewport (14/08 morava so na media query mais abaixo, por isso a colmeia
   de comentarios sobre "390px" ali). O defeito medido por Gabriel apareceu em
   DESKTOP: a `.eqgrade` e `repeat(auto-fill,minmax(320px,1fr))`, entao um
   monitor largo abre quatro ou cinco colunas e cada cartao fica tao estreito
   quanto um celular -- so que o gate de quebra so olhava o VIEWPORT, nunca a
   largura real do cartao. Com quatro colunas a 1440px o botao "editar dados"
   vazava 17,4px pela borda direita do cartao, sem rolagem lateral nenhuma pra
   avisar. Deixar a linha quebrar sempre custa zero quando ela cabe numa linha
   so (o `flex-wrap` so age quando o conteudo nao cabe) e fecha o buraco em
   qualquer largura de cartao. */
.eqlinha{display:flex;align-items:center;gap:9px;margin-top:9px;flex-wrap:wrap}
/* 70px, e nao 52 (13/09/2026). Medido na pele comite a 375px: "Supervisor"
   precisa de 69px e "Meta/dia" de 56, entao os dois vazavam por baixo do campo
   ao lado -- 48 rotulos cortados numa equipe de 47 pessoas. O rotulo nao tem
   overflow declarado, entao ele nao sumia com reticencias: escorria para
   debaixo do <select>, que e por isso que a tela mostrava "SUPERVISO".
   A largura fixa continua, e e ela que mantem os campos alinhados de uma linha
   para a outra; o que mudou foi o numero. */
.eqlinha label{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);
  font-weight:700;width:70px;flex-shrink:0}
/* `min-width:0` porque item de flex nao encolhe abaixo do proprio conteudo por
   padrao, e o <select> do supervisor carrega nomes longos ("Thaisy Holanda da
   Silva"). Com o rotulo em 70px, a linha deixou de caber a 375px e o campo
   descia sozinho para debaixo do rotulo -- so nessa linha, o que fazia PAPEL e
   META/DIA ficarem lado a lado e SUPERVISOR nao. Mesmo conserto que o
   `.eqchave span` daqui ja tinha precisado, pelo mesmo motivo. */
.eqlinha select{flex:1;min-width:0;font:inherit;font-size:16px;padding:7px 8px;min-height:44px;
  border:2px solid var(--tinta);background:var(--bg);color:var(--txt)}
.eqlinha select:disabled{background:var(--bg3);color:var(--dim);cursor:not-allowed}

/* `min-height:44px` no LABEL, e nao no interruptor: o desenho do interruptor e
   38x21, e crescer a caixa dele viraria um retangulo. Quem recebe o toque e o
   label, que embrulha o input — medido a 390px: o alvo tinha 28px de altura.
   `min-width:0` no label e no texto porque esta linha divide o espaco com dois
   botoes: sem isso o "Entra na plataforma" se recusava a encolher e vazava
   68.9px por cima de "nova senha". */
.eqchave{display:flex;align-items:center;gap:8px;font-size:12.5px;cursor:pointer;user-select:none;
  min-height:44px;flex:1 1 auto;min-width:0}
.eqchave span{min-width:0;overflow-wrap:anywhere;line-height:1.3}
.eqchave input{appearance:none;width:38px;height:21px;border:2px solid var(--tinta);
  background:var(--bg3);position:relative;cursor:pointer;flex-shrink:0}
.eqchave input::after{content:'';position:absolute;top:1px;left:1px;width:15px;height:15px;
  background:var(--tinta);transition:transform .12s}
.eqchave input:checked{background:var(--green)}
/* var(--bg) e nao um creme escrito aqui: em cima do verde ele contrasta na
   pele escura (#08090A) e na clara (#FCF6E0), e cor de componente mora no tema. */
.eqchave input:checked::after{transform:translateX(17px);background:var(--bg)}
.eqchave input:disabled{opacity:.45;cursor:not-allowed}

.eqpe{font-size:11px;color:var(--dim);margin-top:10px;line-height:1.45;
  border-top:1.5px dashed var(--line2);padding-top:8px}
.eqerro{font-size:11.5px;color:var(--red);font-weight:700;margin-top:7px}
.eqok{font-size:11.5px;color:var(--green);font-weight:700;margin-top:7px}

.eqconvite{border:2px solid var(--tinta);background:var(--bg2);box-shadow:var(--dura);
  padding:15px;margin-top:20px;max-width:640px}
.eqconvite h3{font-size:10.5px;letter-spacing:1.2px;color:var(--dim);text-transform:uppercase;
  margin-bottom:9px;font-weight:700}
.eqconvite p{font-size:12.5px;line-height:1.6;color:var(--txt);margin-bottom:9px}
.eqconvite a{color:var(--amber);font-weight:700}
.eqpasso{display:flex;gap:9px;font-size:12.5px;line-height:1.5;margin-bottom:6px}
.eqpasso b{font-family:var(--mono);color:var(--amber);flex-shrink:0}

@media(max-width:860px){
  /* 150px no fim da rolagem, e nao 80: o REPORTAR e fixo em `bottom:86px` e
     tem 44px de altura (98-bug.css), entao ele ocupa ate 130px do rodape e
     cobria o ultimo cartao de acesso. O tema do comite ja levava 150px para
     ca em 589535f; as outras 25 peles nao tem esse tema, e o defeito continuava
     nelas. O numero vem da medida, nao do gosto: 130 + 20 de folga. */
  .eqwrap{padding:15px 15px 150px}
  .eqgrade{grid-template-columns:1fr}
}

/* ---------- criar acesso e delegar (10/09/2026) ---------- */
.eqnovo{margin-top:0;margin-bottom:18px;max-width:none}
.eqgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.eqgrid label{display:flex;flex-direction:column;gap:4px;font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim);font-weight:700}
.eqgrid input,.eqgrid select{font:inherit;font-size:16px;text-transform:none;letter-spacing:0;
  padding:9px 10px;min-height:44px;border:2px solid var(--tinta);background:var(--bg);color:var(--txt)}
.eqgrid input:focus,.eqgrid select:focus{outline:none;box-shadow:2px 2px 0 var(--amber)}
.eqgrid small{font-size:10px;text-transform:none;letter-spacing:0;color:var(--dim2);word-break:break-all}
.eqgrid .mono{font-family:var(--mono)}
.eqacoes{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.eqacoes .fbtn{flex:none;min-height:44px;padding:0 18px}
.eqmsg{font-size:12.5px;font-weight:700}
.eqfixo{flex:1;font-size:13px;padding:7px 8px;border:2px solid var(--line2);color:var(--dim)}
.eqlinha input[type=number]{flex:1;font:inherit;font-size:16px;padding:7px 8px;min-height:44px;
  border:2px solid var(--tinta);background:var(--bg);color:var(--txt);max-width:110px}
/* `margin-left:0`, e nao mais `auto` (14/09/2026). O auto empurrava "nova
   senha" e "editar dados" para a borda direita quando a linha cabia inteira
   numa so -- e e exatamente essa borda direita que os dois furavam num
   cartao estreito, porque margin auto so evita ficar negativo, nunca evita
   estourar por cima do que ja nao cabia. Com a linha sempre podendo quebrar
   (ver `.eqlinha` acima), o botao que sobra desce e comeca pela esquerda,
   igual ao desenho que ja valia a 390px -- so que agora vale em qualquer
   largura de cartao, nao so no celular. */
.eqlnk{margin-left:0;font-size:11px;font-weight:700;color:var(--amber);text-decoration:underline;
  min-height:44px;padding:0 6px}
/* A entrada para a tela de perfil, no cartão de quem está logada. Mora fora da
   `.eqlinha` de ações, então o `margin-left:auto` do `.eqlnk` não se aplica:
   ela alinha à esquerda, embaixo do próprio nome. */
.eqperfil{display:inline-flex;align-items:center;margin:0 0 4px;padding:0;
  background:none;border:none;cursor:pointer;font-family:var(--body)}
.eqperfil:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* ---------- cabo sem supervisor: o que chegou e ainda não foi delegado ----------
 * Só aparece quando há alguém esperando (95-equipe.js). Conta desde que a
 * conta do cabo pode nascer de um autocadastro aprovado pelo administrativo,
 * e chegar aqui sem supervisor sem ninguém avisar.
 * Celular primeiro: coluna única a 390px, alvo de 44px, sem rolagem lateral. */
.eqpend{border:2px solid var(--amber);background:var(--bg3);box-shadow:var(--dura);
  padding:13px;margin-bottom:16px;min-width:0}
.eqpend h3{font-family:var(--display);font-size:15px;font-weight:800;line-height:1.25;
  margin:0 0 5px;color:var(--txt)}
.eqpendp{font-size:12.5px;color:var(--dim);line-height:1.5;margin:0 0 11px}
.eqpendlinha{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px;min-width:0}
.eqpendnm{flex:1 1 140px;min-width:0;font-size:14px;font-weight:800;color:var(--txt);
  overflow-wrap:anywhere;line-height:1.3}
.eqpendlinha select{flex:1 1 170px;min-width:0;min-height:44px;font:inherit;font-size:16px;
  padding:0 9px;border:2px solid var(--tinta);background:var(--bg);color:var(--txt)}
.eqpendlinha select:focus{outline:2px solid var(--amber);outline-offset:1px}

/* ---------- editar nome e WhatsApp no cartão, e o cartão recém-criado (12/09/2026) ---------- */
.eqeditar{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.eqeditar input{font:inherit;font-size:16px;min-height:44px;padding:6px 9px;border:2px solid var(--tinta);
  background:var(--bg);color:var(--txt);width:100%}
.eqeditar input:focus{outline:none;box-shadow:2px 2px 0 var(--amber)}
.eqeditar .eqacoes{margin-top:2px}
.eqeditar .fbtn{min-height:44px;padding:0 14px}
.eqcard.novo{outline:3px solid var(--amber);outline-offset:3px}

/* ---------- FICHA DO RH EM ABERTO: a red flag do cabo que entrou antes (12/09/2026) ----------
 * A conta aprovada por quem não é o administrativo nasce com
 * `perfis.ficha_pendente` (migration 019), e a marca aparece para o
 * administrativo, o coordenador e o supervisor dela. Ela INFORMA e não
 * bloqueia: nenhum controle do cartão é desligado por causa dela, porque a
 * pessoa chegou para trabalhar hoje.
 *
 * COR: medida, e não escolhida no olho. O acento (`--amber`) NÃO pinta texto
 * aqui — medido nos 29 temas, o pior caso é o roxo do Ruy a 2.40:1 sobre
 * `--bg3`, e nem AA nem os 3:1 de grafismo ele alcança como letra. O texto sai
 * em `--txt` (pior caso 13.42:1) e em `--dim` (pior 6.03:1), que passam AA em
 * TODAS as peles, clara e escura. O acento fica onde ele pode ficar: borda e
 * barra, que é grafismo e pede 3:1.
 *
 * `--acento-texto` é o mesmo matiz com a luminância já ajustada pelo pele.mjs
 * (pior caso medido: 4.51:1 sobre --bg3) e por isso ele é a primeira escolha da
 * borda. O fallback para `--amber` existe porque DOIS temas não o declaram
 * (diego e multiplicai) — e nos dois o amber cru passa os 3:1 de borda.
 *
 * Celular primeiro: a 390px o bloco é coluna única, o botão tem 44px de altura
 * e nada sai pela lateral.
 */
.eqcard.pendente{border-color:var(--acento-texto,var(--amber))}

/* A etiqueta ao lado do nome. Ela quebra para a linha de baixo em vez de
   espremer o nome: nome de gente não encolhe para caber num selo. */
.eqflag{display:inline-block;vertical-align:middle;font-family:var(--mono);font-size:9px;
  font-weight:800;letter-spacing:.1em;white-space:nowrap;padding:2px 5px;margin-left:6px;
  color:var(--txt);border:1.5px solid var(--acento-texto,var(--amber))}

.eqficha{border:2px solid var(--line2);border-left:4px solid var(--acento-texto,var(--amber));
  background:var(--bg3);padding:10px 11px;margin-top:11px;min-width:0}
.eqfichat{display:flex;flex-wrap:wrap;gap:4px 9px;align-items:baseline;min-width:0}
.eqfichat b{font-size:13px;font-weight:800;color:var(--txt);line-height:1.3;overflow-wrap:anywhere}
.eqfichad{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--dim);
  white-space:nowrap;font-weight:700}
.eqfichap{font-size:12.5px;color:var(--txt);line-height:1.5;margin:6px 0 0;overflow-wrap:anywhere}
.eqfichape{font-size:11.5px;color:var(--dim);line-height:1.5;margin:7px 0 0;overflow-wrap:anywhere}
/* O botão nasce fora de `.eqacoes`, então a altura de toque vem declarada aqui:
   medido a 390px, o `.fbtn` sozinho fica em 38px e o mínimo é 44. */
.eqficha .fbtn{flex:none;width:100%;min-height:44px;margin-top:10px;padding:0 14px}
.eqcontaflag{color:var(--txt);font-weight:800}

/* ---------- o hospedeiro da fila de cadastros, no pane da EQUIPE ----------
 * Ele é irmão do `.eqwrap` e não filho, porque `pintaEquipe()` reescreve o
 * `eqwrap` inteiro por innerHTML a cada busca digitada — uma seção lá dentro
 * seria apagada com os `onclick` dela, sem erro nenhum no console.
 *
 * SER IRMÃO COBRA UM PREÇO, E ELE ESTÁ PAGO AQUI: `.pane.on` é `display:flex`
 * em linha (30-layout.css), então dois filhos ficariam LADO A LADO, e o
 * `.eqwrap` é quem tem `flex:1` e `overflow-y:auto` — a seção nasceria numa
 * coluna à direita, fora da área que rola. Por isso o pane vira coluna e passa
 * a ser ele quem rola, e o wrap devolve a rolagem. A classe é posta pelo
 * 95-equipe.js só quando a seção é revelada: em 80 ela nunca é, e o pane da
 * EQUIPE continua exatamente como sempre foi. */
#pane-equipe.comcadastro{flex-direction:column;overflow-y:auto}
#pane-equipe.comcadastro .eqwrap{flex:0 0 auto;height:auto;overflow-y:visible}
/* Os números repetem os do `.eqwrap` de propósito: as duas metades da mesma
   aba têm que alinhar, e o rodapé de 150px é a folga do botão REPORTAR, que é
   fixo em `bottom:86px` com 44px de altura (98-bug.css). */
.eqcadastro{margin:0 22px 22px;min-width:0}
@media(max-width:860px){ .eqcadastro{margin:0 15px 150px} }

/* ---------- DESATIVAR E REATIVAR, e a gaveta de quem saiu (12/09/2026) ----------
   O interruptor virou botão com verbo. Duas razões, e nenhuma é estética: o
   interruptor mostrava o ESTADO e escondia a AÇÃO, e quem olha rápido não sabe se
   está lendo ou apertando; e a direção em que se arrasta não diz o que vai
   acontecer, enquanto a palavra diz.

   SEM COR DE ALARME, de propósito. Desativar não apaga nada e a pessoa volta com
   um clique — pintar de vermelho ensinaria a tratar como irreversível o que não é.
   Some a tentação de usar `--red`, que aliás não é vermelho em todo tema: no do
   comitê ele vale #C3CDD1, um cinza claro.

   Os 44px de altura são a regra CELULAR PRIMEIRO: o coordenador desativa gente
   pelo telefone, no meio da rua. */
.eqestado{font-size:12px;letter-spacing:.02em}
.eqestado.on{color:var(--dim)}
.eqestado.off{color:var(--dim);text-decoration:line-through;text-decoration-thickness:1px}

.eqbtn-desat{
  min-height:44px;padding:8px 14px;margin-left:auto;
  background:transparent;color:var(--txt);
  font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.03em;
  /* `--dim2` e nao `--line2`: o contorno de um CONTROLE precisa de 3:1 contra o
     fundo (WCAG 1.4.11), e `--line2` e cor de divisoria, calibrada para sumir --
     medido, pior caso 1.70:1 na pele do bito. `--dim2` passa nas 29, pior caso
     4.53:1 no diego. Divisoria e borda de botao nao sao a mesma coisa. */
  border:1.5px solid var(--dim2,var(--dim));cursor:pointer;
  box-sizing:border-box;transition:border-color .12s,color .12s}
.eqbtn-desat:hover:not(:disabled){border-color:var(--txt)}
.eqbtn-desat:disabled{opacity:.55;cursor:wait}
/* Reativar é a ação que devolve alguém ao time: ela ganha o contorno do acento,
   que é o único lugar onde o acento aparece nesta faixa. Como LETRA ele não
   entra — o acento de campanha reprova contraste em várias peles, medido. */
.eqbtn-desat.volta{border-color:var(--acento-texto,var(--amber))}

.eqdesat{margin:22px 0 0;border-top:1px solid var(--line)}
.eqdesat>summary{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:14px 2px;cursor:pointer;list-style:none;min-height:44px;box-sizing:border-box}
.eqdesat>summary::-webkit-details-marker{display:none}
/* A seta é desenhada no ::before para o alvo de toque ser a linha inteira, e não
   um triângulo de 10px. */
.eqdesat>summary::before{
  content:'';width:0;height:0;flex-shrink:0;
  border-left:5px solid var(--dim);border-top:4px solid transparent;
  border-bottom:4px solid transparent;transition:transform .15s}
.eqdesat[open]>summary::before{transform:rotate(90deg)}
.eqdesat>summary b{font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.eqdesat-n{
  font-family:var(--mono);font-size:12px;font-weight:600;
  background:var(--bg3);color:var(--txt);padding:2px 8px;
  font-variant-numeric:tabular-nums}
.eqdesat-d{font-size:12px;color:var(--dim)}
.eqdesat .eqgrade{padding-bottom:6px}
/* O cartão de quem saiu fica esmaecido, mas NÃO ilegível: ele continua sendo o
   registro, e registro que não se lê não é registro. 0.72 mantém o texto acima
   do mínimo nas 29 peles. */
.eqdesat .eqcard.inativo{opacity:.72}
.eqdesat .eqcard.inativo:hover,.eqdesat .eqcard.inativo:focus-within{opacity:1}
@media(max-width:860px){ .eqdesat>summary{padding:14px 0} }

/* ===== css/95-mobile.css ===== */
@media(max-width:1180px){:root{--side:218px;--ficha:322px}}

/* ---------- MOBILE ---------- */
.mobtoggle{display:none}
@media(max-width:860px){
  /* D3 (Gabriel, 19/08/2026): o alvo de toque e comigo.
     O topo tinha 50px e as abas 27px de altura util. Vinte e sete pixels e
     metade do dedo medio: a pessoa erra a aba e cai na outra, o que num app
     que se usa em pe na rua acontece o tempo todo. O topo passa para 58px e
     tudo que se toca la dentro ganha piso de altura. Custa 8px de conteudo e
     devolve a navegacao. */
  :root{--head:58px;--kpi:58px}
  header{padding:0 10px;gap:8px}
  .brand{min-height:44px}
  .tabs button{min-height:42px;display:flex;align-items:center;justify-content:center}
  .demo-tag{min-height:36px}
  /* Piso de 44px de largura: aqui embaixo mora o simbolo do aplicativo, e com
     quatro abas no topo ele era espremido ate 26px, ou seja abaixo do alvo de
     toque. `min-width` e nao `flex-shrink:0` de proposito: a marca continua
     podendo encolher ate o piso em vez de empurrar a navegacao para fora.
     Esta linha vem DEPOIS da de cima no mesmo arquivo, entao e ela que vale. */
  .brand{gap:7px;min-width:44px}
  .brand .qg{font-size:8.5px;letter-spacing:1.2px;padding-right:7px}
  .brand .cand{font-size:14px;white-space:nowrap;gap:6px}
  /* O número encolhe junto e NÃO some. Ele cabe porque na largura estreita o
     `.qg` do produto já saiu (regra de 860px escrita pelo tools/pele.mjs), e o
     que sobra no topo é a marca do candidato mais a navegação. Some no topo
     seria esconder o dado justamente no aparelho em que ele é consultado. */
  .brand .urna{font-size:10px;padding:4px 6px}
  .barras i{width:6px;height:14px}
  .barras.g i{width:12px;height:30px}
  .load .marca .nome{font-size:34px}
  /* o botao continua no topo (e o caminho para a plataforma real), so encolhe */
  .demo-tag{font-size:8.5px;padding:4px 7px;gap:5px}
  .demo-tag b{padding-left:5px}
  .demo-tag .longo{display:none}
  /* DOIS BANNERS NA MESMA BARRA (chamado #56, 16/09/2026).

     A pele do comite ja dava ao banner do nome `max-width:calc(100vw - 190px)`,
     medida de quando ele era o unico ocupante da barra. Dois banners com essa
     medida somam mais que a tela, e o segundo cai para uma terceira linha --
     que e o oposto do pedido, "um ao lado do outro".

     A classe `tem-sup` entra no <header> pelo js/10-nucleo.js, e so quando o
     nome do supervisor voltou de verdade. Quem nao tem supervisor continua com
     a barra de antes, sem uma linha de CSS mudada.

     O seletor repete `.demo-tag` de proposito: a regra do tema e
     `:root header .demo-tag`, e para vencê-la sem editar o arquivo da pele --
     que outra sessao esta regenerando -- a especificidade precisa ser maior. */
  /* O supervisor entra com o PRIMEIRO NOME so, e o banner dele nao encolhe:
     "Natan" inteiro diz a quem pedir numero; "Natan Hol..." nao diz mais que
     isso e come 40px do nome de quem esta logado. O sobrenome continua no
     desktop, no `title` e na aba Perfil. */
  .sup-resto{display:none}
  :root header .demo-tag.sup-tag{flex:0 0 auto;max-width:40vw;padding:5px 6px}
  /* Quem cede largura e o banner do nome, que ja vinha com reticencia: ele
     mantem o teto do tema e encolhe pelo flex quando os dois dividem a barra. */
  :root header.tem-sup .demo-tag{min-width:0}
  /* a assinatura da agencia migra para o rodape da gaveta: o topo e estreito demais.
     A do login fica: la sobra espaco e ela e a unica marca da agencia na tela.
     O SAIR nao migra: e caminho de saida e precisa existir onde a pessoa esta,
     entao ele fica no topo mesmo sem a logo em cima. */
  header .assina{display:none}
  header .canto{padding-left:8px}
  .b-sair-gaveta{display:block;width:100%;margin:0;padding:15px 16px;text-align:left;
    font-size:9px;min-height:44px;border-top:1.5px solid var(--line)}
  aside .assina{display:flex;margin:0;padding:16px;border-top:1.5px solid var(--line);
    justify-content:flex-start;gap:11px}
  /* SEIS ABAS NAO CABEM EM 390px (medido em 11/09/2026 com o monitoramento:
     MAPA REDE CADASTRO OPERACAO DISPUTA EQUIPE). Com flex-shrink:0 a barra
     empurrava o SAIR para fora da tela e as duas ultimas abas ficavam cortadas,
     inalcancaveis, sem barra de rolagem. Agora a barra encolhe e rola por
     dentro, com o dedo, e cada aba mantem a largura: e a aba que rola, nao a
     pagina (scrollWidth continua igual a innerWidth). */
  .tabs{margin-left:auto;flex:0 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{padding:6px 11px;font-size:10.5px;flex-shrink:0;scroll-snap-align:start}
  .kpi{padding:8px 14px;min-width:112px}
  .kpi .val{font-size:18px}

  /* sidebar vira gaveta */
  .mobtoggle{display:flex;align-items:center;gap:6px;position:absolute;top:10px;left:10px;z-index:12;
    background:var(--gold);border:2px solid var(--tinta);color:var(--tinta);
    padding:9px 13px;font-size:11.5px;font-weight:700;letter-spacing:.5px;box-shadow:var(--dura)}
  aside{position:absolute;top:0;bottom:0;left:0;z-index:20;width:min(85vw,300px);
    transform:translateX(-102%);transition:transform .22s ease;box-shadow:14px 0 34px rgba(0,0,0,.6)}
  aside.open{transform:translateX(0)}
  aside::after{content:'';display:block;height:60px}
  .asideclose{display:block;position:sticky;bottom:0;width:100%;padding:13px;background:var(--amber);
    color:#fff;font-weight:700;font-size:12px;letter-spacing:.8px;border:none;border-top:2px solid var(--tinta)}

  /* camadas em faixa horizontal: nao come a altura do mapa */
  .maptools{top:58px;left:10px;right:10px;flex-direction:row;overflow-x:auto;gap:6px;
    padding-bottom:3px;scrollbar-width:none}
  .maptools::-webkit-scrollbar{display:none}
  /* 13px em cima e embaixo dão 44px de altura com a fonte de 10,5 e a borda de
     2: é o alvo de toque mínimo da WCAG 2.2, e a fileira estava em 32px desde
     que nasceu. Medido no chamado #58, em 375px. */
  .mt{padding:13px 11px;font-size:10.5px;white-space:nowrap;flex-shrink:0}
  .searchbox{top:10px;right:10px;left:auto;width:min(46vw,190px)}
  /* a fonte NAO encolhe no celular: e justamente aqui que o zoom automatico do
     iPhone morde. So o padding aperta. */
  .searchbox input{padding:9px 10px;font-size:16px}
  .scale{display:none}

  /* ficha vira folha inferior */
  .ficha{position:absolute;left:0;right:0;bottom:0;top:auto;width:100%;height:74vh;z-index:30;
    border-left:none;border-top:3px solid var(--tinta);border-radius:16px 16px 0 0;
    box-shadow:0 -14px 38px rgba(20,24,31,.30)}
  .ficha.on{display:block;animation:up .24s ease}
  @keyframes up{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
  .fh{border-radius:16px 16px 0 0}
  .fh::before{content:'';position:absolute;top:7px;left:50%;transform:translateX(-50%);
    width:40px;height:5px;border-radius:3px;background:var(--line2)}
  .fh h2{font-size:22px;margin-top:5px}

  .redehead{padding:12px 14px}
  .redehead h2{font-size:19px} .redehead p{font-size:11px}
  .disp{padding:14px}
  .cards{grid-template-columns:1fr;gap:11px}
  .bar-row .nm{width:84px;font-size:11px}
  .tbl th,.tbl td{padding:6px 5px;font-size:11px}
}
.asideclose{display:none}

/* ---------- telas bem estreitas ----------
   Com a aba Cadastro sao QUATRO abas no topo, e em 390px elas somavam 270px.
   O que cedia era a marca: ela caia para 29px em 390 e sumia por completo em
   360, ou seja o aplicativo ficava sem identidade justamente no tamanho de tela
   mais comum em campo. Aqui a navegacao encolhe a letra, que continua legivel, e
   a marca ganha um piso. A altura de toque de 42px nao e tocada. */
@media(max-width:430px){
  .tabs button{padding:6px 7px;font-size:9.5px;letter-spacing:0}
  header{gap:6px;padding:0 8px}
}

/* ===== css/96-cabo.css ===== */
/* ---------- CABO DIGITAL: a tela simplificada (10/09/2026) ----------
 * Desenho da versao V1 Colmeia (v2/previews/v1-colmeia.html), escolhida pelo
 * Gabriel: massa sobre grafite, sem contorno, sem raio, sem sombra. O que
 * separa dois blocos e um vao de 2px onde o fundo aparece (--vao).
 *
 * Celular primeiro: 390px sem rolagem horizontal, alvo de toque de 44px,
 * texto de 13px para cima. No desktop a coluna para em 520px, centralizada.
 * So variaveis do tema; nenhum hex fora de rgba() para transparencia.
 */
body[data-aba="cabo"] .kpibar{display:none}
body[data-aba="cabo"] main{height:auto;min-height:calc(100dvh - var(--head));overflow:auto}
/* no desktop o body nao rola (00-base.css): a rolagem fica dentro do main */
@media(min-width:861px){
  body[data-aba="cabo"] main{height:calc(100dvh - var(--head));display:block}
}

.pane.cabo{display:block;height:auto;padding:var(--vao) 0 90px;overflow-y:auto;--vao:2px;
  width:100%;max-width:100%;font-family:var(--body);color:var(--txt)}
.pane.cabo *{min-width:0}

/* ---------- cabecalho ---------- */
.cabo-ola{background:var(--bg2);padding:18px 16px;display:grid;gap:6px}
.cabo-ola .etq{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber);font-weight:700}
.cabo-ola .n{font-family:var(--display);font-size:30px;font-weight:800;text-transform:uppercase;
  line-height:1;letter-spacing:-.01em;overflow-wrap:anywhere}
.cabo-ola .s{color:var(--dim);font-size:13px;line-height:1.45}

/* ---------- meta do dia ---------- */
.cabo-meta{background:var(--bg2);padding:14px 16px;display:grid;gap:8px;margin-top:var(--vao)}
.cabo-meta .t{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.cabo-meta .t b{font-family:var(--display);font-size:26px;font-weight:800;line-height:1}
.cabo-meta .t b.peq{font-size:18px}
.cabo-meta .t span{color:var(--dim);font-size:13px}
.cabo-meta .barra{height:10px;background:var(--bg3);position:relative;overflow:hidden}
.cabo-meta .barra i{position:absolute;inset:0;background:var(--amber);
  transform-origin:left center;transform:scaleX(var(--p,0));transition:transform .35s}
@media(prefers-reduced-motion:reduce){ .cabo-meta .barra i{transition:none} }

/* ---------- erro ---------- */
.cabo-erro{background:var(--bg2);color:var(--red);font-size:13px;font-weight:700;line-height:1.45;
  padding:11px 16px;margin-top:var(--vao);border-left:4px solid var(--red)}
.cabo-erro[hidden]{display:none}

/* ---------- as quatro acoes ---------- */
.cabo-acoes{display:grid;gap:var(--vao);margin-top:var(--vao)}
.cabo-acoes button{background:var(--bg2);color:var(--txt);min-height:84px;width:100%;
  display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:12px;
  padding:12px 16px;text-align:left;border:0;border-radius:0}
.cabo-acoes button .ic{width:52px;height:52px;background:var(--bg3);display:grid;place-items:center}
.cabo-acoes button .ic svg{width:26px;height:26px}
.cabo-acoes button .tx{display:grid;gap:4px}
.cabo-acoes button b{font-family:var(--display);font-size:22px;font-weight:800;text-transform:uppercase;
  display:block;line-height:1}
.cabo-acoes button .tx span{font-size:13px;color:var(--dim);line-height:1.35}
.cabo-acoes button .seta{font-family:var(--display);font-size:26px;color:var(--dim2)}
.cabo-acoes button:active{background:var(--bg3)}
.cabo-acoes button:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
/* CADASTRAR e o bloco de acento: a unica massa de cor da tela */
.cabo-acoes button.mer{background:var(--amber);color:var(--sobre-acento)}
.cabo-acoes button.mer .ic{background:rgba(0,0,0,.18)}
.cabo-acoes button.mer .tx span,.cabo-acoes button.mer .seta{color:var(--sobre-acento);opacity:.78}
.cabo-acoes button.mer:active{filter:brightness(.92)}
/* acao ainda desligada (nenhuma esta, desde que MEU LINK E QR abriu em 11/09) */
.cabo-acoes button[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- sub-telas ---------- */
.cabo-sub{margin-top:var(--vao);display:grid;gap:var(--vao)}
.cabo-sub:empty{display:none}
.cabo-voltar{background:var(--bg3);color:var(--txt);min-height:48px;width:100%;padding:0 14px;
  font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:13px;
  display:flex;align-items:center;gap:8px;border:0;border-radius:0;text-align:left}
.cabo-voltar:active{background:var(--line)}
.cabo-lead{background:var(--bg2);color:var(--dim);font-size:13px;line-height:1.5;padding:16px}
.cabo-lista{display:grid;gap:var(--vao)}
.cabo-cab{background:var(--bg2);padding:12px 16px;display:flex;justify-content:space-between;
  align-items:baseline;gap:10px}
.cabo-cab b{font-family:var(--display);font-size:18px;font-weight:800;text-transform:uppercase;line-height:1}
.cabo-cab span{font-family:var(--mono);font-size:13px;color:var(--dim)}
.cabo-cab.feito b{color:var(--dim)}
/* Meus multiplicadores (20/09/2026): o bloco ganha o acento no titulo, que e o que
   o separa da fila de cima sem inventar cor nova. */
.cabo-cab.mult b{color:var(--acento-texto,var(--amber))}
/* O Validar travado continua no lugar e com o mesmo texto: decisao do Gabriel. O
   `disabled` e de verdade; aqui ele so para de parecer clicavel. */
.cabo-btn:disabled{opacity:.42;cursor:not-allowed}

/* 16px NO CAMPO NÃO É TAMANHO DE LETRA, É CONSERTO DE CELULAR (13/09/2026).
   Mesmo desenho do 97-operacao.css (commit 7bb2152): o Safari do iPhone dá zoom
   sozinho ao focar um campo com fonte menor que 16px, e o zoom não volta quando
   a pessoa sai dele. Esta é a tela do cabo, que é telefone o dia inteiro: um
   pixel faltando (15 em vez de 16) bastava para a lista saltar a cada busca.
   Vale para os três campos da folha: busca, diálogo e formulário do link. */
.cabo-busca{width:100%;min-height:44px;font:inherit;font-size:16px;padding:10px 14px;
  background:var(--bg2);color:var(--txt);border:0;border-radius:0}
.cabo-busca::placeholder{color:var(--dim2)}
.cabo-busca:focus{outline:2px solid var(--amber);outline-offset:-2px}

/* A LUPA DA MINHA LISTA (24/09/2026). O icone fica por cima do campo e nao pega
   toque (o toque cai no campo, que e o alvo grande); o X de limpar tem 48px de
   largura e a altura do campo. O X nativo do type=search sai: no Chrome ele tem
   14px, no Safari tem outra cara, e o cabo ganharia dois botoes de limpar. */
.cabo-lupa{position:relative}
.cabo-lupa[hidden]{display:none}
.cabo-lupa .ic{position:absolute;left:14px;top:50%;width:20px;height:20px;margin-top:-10px;
  color:var(--dim);pointer-events:none;display:grid}
.cabo-lupa .ic svg{width:20px;height:20px}
.cabo-lupa .cabo-busca{padding-left:46px;padding-right:48px;-webkit-appearance:none;appearance:none}
.cabo-lupa .cabo-busca::-webkit-search-cancel-button,
.cabo-lupa .cabo-busca::-webkit-search-decoration{-webkit-appearance:none;display:none}
.cabo-lupa-x{position:absolute;top:0;right:0;bottom:0;width:48px;padding:0;display:grid;place-items:center;
  background:transparent;color:var(--dim);border:0;border-radius:0;cursor:pointer}
.cabo-lupa-x[hidden]{display:none}
.cabo-lupa-x svg{width:18px;height:18px}
.cabo-lupa-x:active{color:var(--txt)}
.cabo-lupa-x:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}

/* um contato ou um numero da lista */
.cabo-it{background:var(--bg2);padding:14px 16px;display:grid;grid-template-columns:1fr;gap:10px 12px;
  align-items:center}
.cabo-it.ct{grid-template-columns:40px 1fr}
.cabo-it .ini{width:40px;height:40px;background:var(--bg3);color:var(--txt);display:grid;place-items:center;
  font-family:var(--mono);font-size:13px;font-weight:700}
.cabo-it .nm{display:grid;gap:3px}
.cabo-it .nm b{font-size:15px;font-weight:800;line-height:1.25;overflow-wrap:anywhere}
.cabo-it .nm span{font-size:13px;color:var(--dim);line-height:1.35;overflow-wrap:anywhere}
.cabo-it .nm .crm{font-family:var(--mono);font-size:13px;color:var(--dim2)}
.cabo-it-acoes{grid-column:1/-1;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--vao)}
.cabo-it.feito{opacity:.62}
.cabo-it.feito .cabo-tag{grid-column:1/-1}

/* botoes de 44px, um do lado do outro, massa e vao */
.cabo-btn{min-height:44px;display:flex;align-items:center;justify-content:center;padding:0 10px;
  background:var(--bg3);color:var(--txt);font-weight:800;font-size:13px;letter-spacing:.04em;
  text-transform:uppercase;text-decoration:none;border:0;border-radius:0;cursor:pointer;text-align:center}
.cabo-btn:active{background:var(--line)}
.cabo-btn:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.cabo-btn.ok{background:var(--amber);color:var(--sobre-acento)}
.cabo-btn.ok:active{filter:brightness(.92)}
.cabo-btn.zap{background:var(--line)}
.cabo-btn.off{background:var(--bg3);color:var(--dim2);cursor:default;text-transform:none;font-weight:600}
.cabo-btn[disabled]{opacity:.55;cursor:wait}
/* O ESTADO DO CONTATO virou botao (13/09/2026), e botao de estado nao le como
   acao: ele diz o que a pessoa E, e abre o seletor quando tocado. Caixa baixa
   e 12px porque "voto registrado" em versalete de 13px quebra em duas linhas
   dentro de uma coluna de metade de 375px, e uma linha de acoes com alturas
   diferentes desalinha a lista inteira. */
.cabo-btn.est{text-transform:none;font-size:12px;font-weight:700;letter-spacing:0}
/* ---------- A SEGUNDA LINHA: ONDE A PESSOA MORA (22/09/2026) ----------
   Modelo C, escolhido entre tres previas. O botao ocupa a largura toda embaixo
   de Zap e estado, com o lugar escrito dentro.

   O :root NA FRENTE NAO E ENFEITE: o comite.extra.css redeclara .cabo-btn com
   Martian Mono, 11px e caixa alta num seletor que ja tem :root, e uma classe
   sozinha perde para ele. Medido antes: o endereco preenchido saia em versalete
   de 11px e quebrava em duas linhas dentro de um botao de 44px, o que desalinha
   a lista inteira. */
.cabo-onde-l{margin-top:var(--vao)}
:root .cabo-btn.onde{
  display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:0 12px;
  font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--dim);background:var(--bg3)}
.cabo-btn.onde .ic{display:flex;flex:0 0 auto}
.cabo-btn.onde .ic svg{width:17px;height:17px}
/* o endereco inteiro nao cabe em 343px: corta com reticencias, e o texto inteiro
   esta no dialogo que o toque abre */
.cabo-btn.onde .tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* FALTA ALGUMA COISA: acende no acento da campanha, preenchido e nunca
   contornado, que e a regra desta pele. E o unico jeito de o cabo ver de quem
   falta endereco varrendo a lista, sem abrir ninguem. */
:root .cabo-btn.onde.falta{
  background:var(--amber);color:var(--sobre-acento);
  font-family:var(--mono);font-size:12px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase}
.cabo-btn.onde:active{filter:brightness(.92)}

.cabo-tag{min-height:44px;display:flex;align-items:center;padding:0 10px;font-family:var(--mono);
  font-size:13px;color:var(--dim);background:var(--bg3)}
.cabo-tag.ok{color:var(--txt)}

/* ---------- dialogo de descarte (nativo) ---------- */
.cabo-dlg{border:0;padding:0;background:var(--bg2);color:var(--txt);border-radius:0;box-shadow:none;
  width:min(400px,calc(100vw - 28px));max-height:calc(100dvh - 40px);overflow:auto;
  margin:auto;border-top:4px solid var(--amber)}
.cabo-dlg::backdrop{background:rgba(4,5,6,.82)}
.cabo-dlg form{display:grid;gap:10px;padding:18px 16px 16px}
.cabo-dlg h3{font-family:var(--display);font-size:20px;font-weight:800;text-transform:uppercase;line-height:1;margin:0}
.cabo-dlg .quem{font-size:13px;color:var(--dim);margin:0;overflow-wrap:anywhere}
.cabo-dlg label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);font-weight:700}
.cabo-dlg select,.cabo-dlg input{width:100%;min-height:44px;font:inherit;font-size:16px;padding:9px 12px;
  background:var(--bg3);color:var(--txt);border:0;border-radius:0}
.cabo-dlg select:focus,.cabo-dlg input:focus{outline:2px solid var(--amber);outline-offset:-2px}

/* ---- o motivo da LGPD em vermelho (23/09/2026) ----
   `--red` do tema do comitê é cinza de propósito (nenhuma tela de campanha deve
   ler como semáforo), então o vermelho aqui é token próprio e só vale dentro
   deste diálogo, que é tela de operação do cabo e nunca aparece para eleitor.

   #FF5A5F medido: 5.19:1 sobre o campo (#1F2325), 5.79:1 sobre o fundo do
   diálogo (#16191B) e 4.64:1 sobre o cinza do popup escuro do Chrome — os três
   acima do AA da WCAG 2.2.

   `color-scheme:dark` existe por causa do popup: sem ele o Windows desenha a
   lista do <select> em branco, onde o mesmo vermelho cai para 3.05:1. O
   `background` da <option> é a segunda defesa, para o navegador que ignora o
   color-scheme e respeita a cor de fundo. */
.cabo-dlg{--lgpd:#FF5A5F}
.cabo-dlg select{color-scheme:dark}
.cabo-dlg select option.lgpd{color:var(--lgpd);background:var(--bg3);font-weight:700}
.cabo-dlg select.lgpd{color:var(--lgpd);font-weight:700}
.cabo-dlg .cabo-erro{margin:0;padding:10px 12px}
/* Os chips do estado dentro do dialogo. O `form` ja e um grid com gap de 10px,
   entao a margem propria do componente sai. */
.cabo-dlg .funil-chips{margin:0}
.cabo-dlg .funil-dica{margin:0}
.cabo-dlg .b{display:grid;grid-template-columns:1fr 1fr;gap:var(--vao,2px);margin-top:4px}
.cabo-dlg .b button,.cabo-dlg .b a{min-height:48px;background:var(--bg3);color:var(--txt);font-weight:800;font-size:13px;
  letter-spacing:.04em;text-transform:uppercase;border:0;border-radius:0}
.cabo-dlg .b .pri{background:var(--amber);color:var(--sobre-acento)}
.cabo-dlg .b button[disabled]{opacity:.55;cursor:wait}
/* O "Sim" e um <a> e nao um <button> (ver caboMontaZapDlg, 66-cabo.js): sem
   estas quatro linhas ele nasceria alinhado a esquerda e sublinhado. */
.cabo-dlg .b a{display:flex;align-items:center;justify-content:center;text-decoration:none;
  font-family:inherit;cursor:pointer}

/* ---------- O X DE FECHAR (23/09/2026) ----------
   So o dialogo do Zap tem. Os outros tres (descartar, funil e endereco) fecham
   pelo "Cancelar"; aqui os DOIS botoes sao resposta, e "Ainda nao" tem de
   deixar o aviso na tela em vez de fechar. Alvo de 44px como manda a tela do
   cabo, e posicionado sem tirar o titulo do lugar. */
.cabo-dlg .cabo-dlg-x{position:absolute;top:0;right:0;width:44px;height:44px;
  background:transparent;border:0;color:var(--dim);font-size:24px;line-height:1;cursor:pointer}
.cabo-dlg .cabo-dlg-x:active{color:var(--txt)}
.cabo-dlg .cabo-dlg-x:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.cabo-dlg.zap form{position:relative;padding-right:52px}
/* O AVISO DE "AINDA NAO" SAI EM VERMELHO, e por isso ele tem token proprio.
   `--red` nao serve: o tema base (multiplicai.css) neutraliza as cores
   semanticas de proposito — ele vale #C3CDD1, que e CINZA — para nenhuma tela
   de campanha ler como semaforo, e isso vale em 28 dos 30 alvos. A regra
   continua de pe em toda parte; a excecao e este dialogo, porque o que ele
   avisa nao e o estado de um eleitor: e que o cabo vai abordar um numero que
   nao esta na agenda dele.

   `--zap-alerta` e declarado no multiplicai.css, de onde as 28 peles derivam, e
   vale #FF4D4D (5,40:1 sobre o --bg2 daquela familia). A pele do Diego tem tema
   proprio e cai no fallback, que la ja e vermelho de verdade: #D6371C, 4,59:1
   sobre o fundo claro dela. Medido nos 30 alvos do build, nenhum abaixo do AA.

   NAO existe um vermelho unico para as duas familias: #FF4D4D sobre o fundo
   claro do Diego da 3,16:1, e o #D6371C dele sobre o grafite da outra familia
   nao chega la. Por isso o token, e nao uma cor escrita no seletor. */
#cabo-zdlg .cabo-erro{color:var(--zap-alerta,var(--red));border-left-color:var(--zap-alerta,var(--red))}

/* ---------- MEU LINK E QR (11/09/2026) ----------
 * Mesma linguagem das outras sub-telas: massa sobre grafite, sem raio, sem
 * sombra, vao de 2px entre blocos. Nada aqui sai de 390px, e todo alvo de
 * toque tem 44px ou mais.
 */
.cabo-link{display:grid;gap:var(--vao)}
/* dentro da sub-tela quem separa os blocos e o gap do grid, nao a margem */
.cabo-sub .cabo-erro{margin-top:0}

/* O QR */
.cabo-qr{background:var(--bg2);padding:16px;display:grid;justify-items:center;gap:12px}
/* ESTE #fff e a unica cor fora do tema no arquivo, e ela e funcional: leitor
   de QR precisa de fundo branco atras dos modulos. Sobre o grafite do chassi o
   codigo simplesmente nao le. */
.cabo-qr .cx{background:#fff;padding:10px;width:min(260px,100%)}
.cabo-qr .cx svg{display:block;width:100%;height:auto}
.cabo-url{width:100%;background:var(--bg3);color:var(--txt);padding:12px 14px;
  font-family:var(--mono);font-size:13px;line-height:1.5;overflow-wrap:anywhere;
  word-break:break-word;user-select:all}

/* Copiar, compartilhar, testar. Flex com quebra: a 390px os tres nao cabem na
   mesma linha, e o terceiro desce inteiro em vez de espremer o rotulo. */
.cabo-linkbtns{display:flex;flex-wrap:wrap;gap:var(--vao)}
.cabo-linkbtns .cabo-btn{flex:1 1 150px;transition:background .18s ease,color .18s ease}
@media(prefers-reduced-motion:reduce){ .cabo-linkbtns .cabo-btn{transition:none} }
/* a confirmacao de "Copiado", que dura 2s e volta sozinha */
.cabo-btn.feito{background:var(--line2);color:var(--txt)}

/* Hoje, 7 dias, total */
.cabo-nums{background:var(--bg2);padding:14px 16px;display:grid;
  grid-template-columns:repeat(3,1fr);gap:10px}
.cabo-nums div{display:grid;gap:3px}
.cabo-nums b{font-family:var(--display);font-size:24px;font-weight:800;line-height:1}
.cabo-nums span{font-size:13px;color:var(--dim);line-height:1.3}

/* O formulario: numero do WhatsApp e a mensagem que o eleitor envia */
.cabo-form{background:var(--bg2);padding:16px;display:grid;gap:10px}
.cabo-form label{font-family:var(--mono);font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim);font-weight:700;line-height:1.3}
.cabo-form input,.cabo-form textarea{width:100%;min-height:44px;font:inherit;font-size:16px;
  font-family:var(--body);padding:11px 14px;background:var(--bg3);color:var(--txt);
  border:0;border-radius:0;line-height:1.45}
.cabo-form textarea{min-height:92px;resize:vertical}
/* --dim2 sobre --bg3 mede 4,20:1, abaixo dos 4,5:1 do celular; --dim da 8,0:1 */
.cabo-form input::placeholder,.cabo-form textarea::placeholder{color:var(--dim)}
.cabo-form input:focus,.cabo-form textarea:focus{outline:2px solid var(--amber);outline-offset:-2px}
.cabo-form .conta{justify-self:end;font-family:var(--mono);font-size:13px;color:var(--dim2)}
.cabo-form .conta.cheio{color:var(--amber)}
.cabo-form .dica{font-size:13px;color:var(--dim);line-height:1.45}
.cabo-form .cabo-btn{min-height:48px;margin-top:4px}

/* ---------- desktop: uma coluna centralizada ---------- */
@media(min-width:900px){
  .pane.cabo{max-width:520px;margin:0 auto;padding-top:16px}
}
/* O header declara .tabs{display:flex}, que ganha do atributo hidden: sem esta
   linha as abas continuavam na tela do cabo (medido em 10/09/2026 a 390px). */
.tabs[hidden]{display:none!important}

/* O BADGE DA ORIGEM na linha da Minha lista (15/09/2026): o rotulo que quem
   importou escolheu, em massa de acento. E o mesmo que chega travado no
   "de onde veio" quando o cabo toca em Validar. */
.cabo-it .cabo-origem{display:inline-block;justify-self:start;font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;font-weight:700;padding:3px 8px;
  background:var(--amber);color:var(--sobre-acento)}

/* ===== css/96c-autenticar.css ===== */
/* ---------- AUTENTICAR (29/09/2026, migration 084) ----------
 * O quinto botão da tela do cabo e a sub-tela dele. Mesma gramática do
 * 96-cabo.css: massa sobre grafite, sem raio, alvo de 44px, campo de 16px
 * (o Safari do iPhone dá zoom em campo menor). Só variáveis do tema.
 *
 * Na V3 (pele que declara `cadastroV3`) os quatro blocos são cartões de cor
 * cheia da chapa; o quinto NÃO ganha uma quinta cor: é uma faixa larga com
 * contorno no acento, embaixo da grade, porque ele não é ação do dia de todo
 * cabo, só de quem trabalha também numa plataforma parceira.
 * Na tela clássica ele herda `.cabo-acoes button` inteiro.
 */
.cv3-aut{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:12px;
  width:calc(100% - 24px);margin:6px 12px 0;min-height:64px;padding:12px 14px;
  background:var(--bg2);color:var(--txt);border:2px solid var(--acento-texto,var(--amber));
  border-radius:0;cursor:pointer;text-align:left;font:inherit}
.cv3-aut svg{width:28px;height:28px}
.cv3-aut .cv3-tx{min-width:0}
.cv3-aut .cv3-tx b{display:block;font-family:var(--display);font-weight:900;font-size:20px;
  text-transform:uppercase;line-height:1}
.cv3-aut .cv3-tx span{display:block;font-size:13.5px;line-height:1.3;color:var(--dim);margin-top:5px}
.cv3-aut .seta{font-family:var(--display);font-size:26px;color:var(--dim2)}
.cv3-aut:active{background:var(--bg3)}
.cv3-aut:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* ---------- a sub-tela ---------- */
.aut-form{background:var(--bg2);padding:14px 16px;display:grid;gap:10px}
.aut-rot{font-size:13px;color:var(--dim);line-height:1.4}
.aut-form .cabo-busca{background:var(--bg3)}
.aut-form .aut-ir{min-height:48px;font-size:14px}
.aut-recado{background:var(--bg2);color:var(--txt);font-size:14px;line-height:1.45;padding:14px 16px;margin:0}
.aut-recado[hidden]{display:none}
/* O alerta não depende só de cor: o tema do comitê neutraliza as cores
   semânticas (--red é cinza), a mesma regra do .opdest.alerta. */
.aut-recado.erro{color:var(--acento-texto,var(--amber));font-weight:700}
.aut-recado.erro::before{content:"\26A0\FE0E  "}

/* ===== css/97-administrativo.css ===== */
/* ---------- ADMINISTRATIVO: o caixa e a equipe do comitê ----------
 * Irmã da OPERAÇÃO (97-operacao.css), e de propósito: o chassi, os botões,
 * as seções, os KPIs e as linhas são as mesmas classes de lá. Aqui só entra
 * o que a OPERAÇÃO não tem: o cartão de despesa, as barras do resumo, o
 * eixo de meses, os chips de evento, o bloco do RH e o diálogo de exclusão.
 *
 * Só variáveis do tema: nenhuma cor escrita aqui fora de rgba(), para a pele
 * do produto e a de cada candidato pintarem a mesma tela com a própria
 * paleta.
 *
 * Celular primeiro: 390px sem rolagem horizontal, alvo de toque de 44px,
 * texto de 13px para cima no que se lê, grade que vira coluna única abaixo
 * de 720px. Nada de tabela: tabela corta coluna no celular e some com texto.
 */

/* A barra de KPIs do topo é do MAPA. Aqui os números são outros e moram
   dentro da própria aba, como na OPERAÇÃO e na fila de bugs. */
body[data-aba="administrativo"] .kpibar{display:none}
body[data-aba="administrativo"] main{height:calc(100dvh - var(--head))}

/* `.admwrap` anda junto com `.opwrap`: o padding, a rolagem e o h2 vêm de lá. */
.admwrap .opkpi.admdin .v{font-size:24px;overflow-wrap:anywhere}
.admfalta{border:2px solid var(--line2);background:var(--bg3);padding:10px 12px;margin:12px 0}

/* ---- o formulário: a caixa de "pago" precisa de 44px como qualquer alvo ---- */
.admform .admcheck{display:flex;flex-direction:row;align-items:center;gap:10px;min-height:44px;
  border:2px solid var(--tinta);background:var(--bg);padding:0 12px;cursor:pointer;
  text-transform:none;letter-spacing:0;font-size:13.5px;color:var(--txt);font-weight:400}
.admform .admcheck input[type=checkbox]{width:24px;height:24px;flex-shrink:0;margin:0;
  accent-color:var(--amber);cursor:pointer}
.admform .admcheck span{min-width:0}
/* 16px NO CAMPO NÃO É TAMANHO DE LETRA, É CONSERTO DE CELULAR (13/09/2026).
   Mesmo desenho do 97-operacao.css (commit 7bb2152): o Safari do iPhone dá zoom
   sozinho ao focar um campo com fonte menor que 16px, e não desfaz o zoom quando
   a pessoa sai dele. Este é o único campo próprio desta folha — os outros são
   `.opform input/select` e `.opblk textarea`, que vivem no 97-operacao.css e já
   foram para 16px lá. A caixa "pago" (`.admcheck`) fica de fora: checkbox não
   recebe texto e o iOS não amplia por causa dele; os 13.5px ali são o rótulo.
   A regra continua com DUAS classes na frente do elemento (0,2,1) e por isso
   ganha do `.opblk textarea` (0,1,1) — a ordem alfabética do build põe esta
   folha ANTES da operação, e empate de especificidade perderia em silêncio. */
.admwrap .admobs-campo textarea{font-family:inherit;font-size:16px;line-height:1.5;min-height:56px;
  resize:vertical}
.opform.admfiltro{margin-bottom:6px}

/* ---- o cartão de uma despesa: o valor à direita, as ações embaixo ---- */
.admcard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:start;
  border:2px solid var(--tinta);background:var(--bg3);box-shadow:var(--dura);
  padding:12px;margin-bottom:10px;min-width:0}
.admcard.aberto{border-left-width:5px}
.admcard-q{min-width:0}
.admcard-t{display:flex;flex-wrap:wrap;gap:5px 8px;align-items:center;margin-bottom:5px}
.admdata{font-family:var(--mono);font-size:12px;color:var(--dim);font-weight:700}
.admtag{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  border:1.5px solid var(--line2);color:var(--dim);padding:2px 6px;white-space:nowrap}
.admestado{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  border:1.5px solid var(--amber);color:var(--amber);padding:2px 6px;white-space:nowrap;font-weight:700}
.admestado.ok{border-color:var(--green);color:var(--green)}
.admdesc{font-weight:800;font-size:14px;line-height:1.35;overflow-wrap:anywhere}
.admforn{font-size:12.5px;color:var(--dim);margin-top:2px;overflow-wrap:anywhere}
.admobs{font-size:12.5px;color:var(--dim);margin-top:4px;line-height:1.45;
  white-space:pre-wrap;overflow-wrap:anywhere}
.admcomp{font-family:var(--mono);font-size:11px;color:var(--dim2);margin-top:4px;overflow-wrap:anywhere}
.admvalor{font-family:var(--display);font-size:21px;font-weight:800;line-height:1.1;
  text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--txt)}
.admcard .admacoes{grid-column:1 / -1;margin-top:4px}
.admcard .admacoes .opbtn{flex:1 1 auto}
.opbtn.gh.admdel{color:var(--red);border-color:var(--red)}

/* ---- resumo por categoria: barra horizontal, sem tabela ---- */
.admlin{padding:8px 0;border-top:1.5px dashed var(--line2);min-width:0}
.admlin:first-child{border-top:0}
.admlin-t{display:flex;flex-wrap:wrap;gap:3px 10px;align-items:baseline;margin-bottom:5px}
.admlin-n{font-weight:800;font-size:13px;flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.admlin-v{font-family:var(--mono);font-size:13px;color:var(--txt);font-variant-numeric:tabular-nums}
.admlin-p{font-family:var(--mono);font-size:11px;color:var(--dim);min-width:38px;text-align:right}
.admbarra{height:10px;background:var(--bg);border:1.5px solid var(--line);position:relative;overflow:hidden}
.admbarra i{position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--p,0));
  background:var(--amber);transition:transform .5s cubic-bezier(.2,.8,.2,1)}

/* ---- resumo por mês: colunas em SVG, eixo em HTML ----
   O SVG estica em largura (preserveAspectRatio="none") para ocupar a tela do
   celular sem faixa vazia dos lados; texto dentro dele sairia esticado, e por
   isso o eixo é HTML numa grade com o mesmo número de colunas. */
.admgraf{margin-top:6px}
.admsvg{display:block;width:100%;height:116px;border-bottom:1.5px solid var(--line2)}
.admeixo{display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr));gap:0;margin-top:6px}
.admeixo-c{display:grid;gap:2px;justify-items:center;text-align:center;min-width:0}
.admeixo-c b{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--txt);
  text-transform:uppercase;letter-spacing:.04em}
.admeixo-c span{font-size:9.5px;color:var(--dim);overflow-wrap:anywhere;line-height:1.25}
.admlegenda{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px}
.admleg{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--dim)}
.admleg::before{content:'';width:12px;height:12px;border:1.5px solid var(--tinta);flex-shrink:0}
.admleg.pago::before{background:var(--amber)}
.admleg.aberto::before{background:var(--dim2)}

/* ---- escritório ---- */
.admnums{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--dim);
  border-top:1.5px dashed var(--line2);border-bottom:1.5px dashed var(--line2);padding:9px 0}
.admnums b{color:var(--txt);font-family:var(--mono);font-size:13px}
.admparados{font-size:13px;color:var(--txt)}
.admparados b{font-family:var(--mono);color:var(--amber)}
.admnomes{font-size:12.5px;color:var(--dim);line-height:1.5;margin-top:3px;overflow-wrap:anywhere}
.admchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.admchip{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 12px;
  border:2px solid var(--line2);background:var(--bg3);color:var(--txt);font-size:12.5px;font-weight:700}
.admchip b{font-family:var(--mono);font-size:11px;color:var(--dim);
  border:1.5px solid var(--line2);padding:1px 6px;min-width:24px;text-align:center}


/* ---- o diálogo de exclusão (padrão do 98-bug.js) ---- */
.admdlg{border:2px solid var(--tinta);padding:0;background:var(--bg2);color:var(--txt);
  width:min(440px,calc(100vw - 28px));max-height:calc(100dvh - 40px);
  box-shadow:var(--dura);border-radius:0;overflow:auto;margin:auto}
.admdlg::backdrop{background:rgba(4,5,6,.78)}
.admdlgbox{padding:20px}
.admdlg h2{font-family:var(--display);font-size:21px;line-height:1.15;font-weight:800;
  text-transform:uppercase;letter-spacing:-.01em;margin-bottom:6px}
.admdlgsub{font-size:13px;line-height:1.55;color:var(--dim);margin-bottom:12px}
.admdlgalvo{display:grid;gap:4px;border:2px solid var(--line2);background:var(--bg3);padding:10px 12px}
.admdlgalvo b{font-size:14px;font-weight:800;overflow-wrap:anywhere}
.admdlgalvo span{font-family:var(--mono);font-size:15px;color:var(--txt);font-variant-numeric:tabular-nums}
.admdlgacoes{display:flex;gap:10px;margin-top:16px}
.admdlgacoes .opbtn{flex:1}
.opbtn.admdlgexcluir{background:transparent;color:var(--red);border-color:var(--red)}

/* ---- COLABORADORES ----
   Substituiu o bloco de RH, que era um link para fora. Toda regra daqui usa
   classe propria com prefixo `adm`: este arquivo entra ANTES do 97-operacao.css
   na concatenacao alfabetica, entao regra com a mesma especificidade de `.opbtn`
   perderia em silencio. */
.admsr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.admp-filtros{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}
.admp-busca{flex:1 1 200px;min-width:0;display:block}
.admp-sitfil{flex:0 1 200px;min-width:0;display:block}
.admp-filtros input[type=search],
.admp-filtros select{width:100%;min-height:44px;font-size:16px;font-family:inherit;
  border:2px solid var(--line2);background:var(--bg3);color:var(--txt);padding:0 10px}
.admp-filtros input[type=search]:focus-visible,
.admp-filtros select:focus-visible{outline:2px solid var(--amber);outline-offset:1px}

.admp-conta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--dim);
  font-family:var(--mono);border-bottom:1.5px dashed var(--line2);padding-bottom:8px;margin-bottom:6px}
.admp-conta:empty{display:none}
.admp-cq{color:var(--dim2)}

/* a linha da pessoa */
.admp{border-bottom:1.5px dashed var(--line2)}
.admp[open]{border:2px solid var(--tinta);background:var(--bg3);box-shadow:var(--dura);
  margin:8px 0;padding-bottom:4px}
.admp-cab{display:flex;align-items:center;gap:10px;min-height:56px;padding:6px 8px;
  cursor:pointer;list-style:none;min-width:0}
.admp-cab::-webkit-details-marker{display:none}
.admp-cab:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.admp-av{flex:0 0 auto;width:38px;height:38px;border:2px solid var(--line2);background:var(--bg);
  display:grid;place-items:center;font-family:var(--mono);font-size:12.5px;font-weight:700;
  color:var(--dim);background-size:cover;background-position:center}
.admp-av.comfoto{color:transparent;border-color:var(--tinta)}
.admp-id{flex:1 1 auto;min-width:0;display:grid;gap:1px}
.admp-nome{font-size:14px;font-weight:800;line-height:1.25;overflow-wrap:anywhere}
.admp-fun{font-size:12px;color:var(--dim);line-height:1.3}
.admp[data-inativo] .admp-nome{color:var(--dim)}
/* O nome vira botão do Passaporte (22/09/2026) só quando a pessoa tem conta.
   `all:unset` tira o cromo padrão de botão; `.admp-nome` ao lado continua
   dando o tamanho e o peso, porque as duas classes não disputam propriedade. */
.admp-nomebtn{all:unset;cursor:pointer;display:inline}
.admp-nomebtn:hover,.admp-nomebtn:focus-visible{text-decoration:underline}
.admp-sit{flex:0 0 auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;border:1.5px solid var(--line2);color:var(--dim);padding:2px 6px;
  text-align:center;max-width:112px;line-height:1.3}
.admp.s-vinculada .admp-sit{border-color:var(--green);color:var(--green)}
.admp.s-so_folha .admp-sit{border-color:var(--amber);color:var(--amber)}

/* o corpo da ficha */
.admp-corpo{padding:0 8px}
.admp-ab,.admp-res{display:grid;gap:2px;padding:8px 0}
.admp-res{border-top:1.5px dashed var(--line2);margin-top:6px}
.admp-res h5,.admdocs h6,.admcas-col h6{font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim);margin:2px 0 6px}
.admp-c{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;
  border-bottom:1px dashed var(--line2);padding:5px 0;min-width:0}
.admp-c>span{flex:0 0 108px;font-size:11.5px;color:var(--dim)}
.admp-c>b{flex:1 1 auto;min-width:0;font-size:13.5px;font-weight:700;overflow-wrap:anywhere}
.admp-trabq{display:flex;flex-wrap:wrap;gap:5px 14px;font-size:12px;color:var(--dim);
  padding:8px 0 2px}
.admp-trabq b{font-family:var(--mono);font-size:13px;color:var(--txt)}
.admp-semficha .opdica{margin-bottom:8px}
.admp-acoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.admp-acoes .opbtn.admbtn{flex:1 1 auto;min-height:44px}

/* as sugestões de casamento */
.admsug{border:2px solid var(--amber);background:var(--bg3);padding:12px;margin:10px 0}
.admsug>b{font-size:14px;font-weight:800;display:block}
.admsug ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.admsug li{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;
  border-top:1.5px dashed var(--line2);padding-top:8px;min-width:0}
.admsug-n{font-weight:800;font-size:13.5px;flex:1 1 140px;min-width:0;overflow-wrap:anywhere}
.admsug-p{font-size:12px;color:var(--dim);flex:1 1 180px;min-width:0}
.admsug .opbtn.admbtn{flex:0 0 auto;min-height:44px}

/* as duas linhas lado a lado, antes de casar */
.admcas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.admcas-col{min-width:0;border:1.5px solid var(--line2);background:var(--bg3);padding:8px 10px}
.admcas-col .admp-c>span{flex:0 0 100%}
.admcas-por{margin-top:10px}

/* documentos da ficha */
.admdocs{border-top:1.5px dashed var(--line2);margin-top:10px;padding-top:8px}
.admdocs ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.admdocs li{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;min-width:0;
  border-bottom:1px dashed var(--line2);padding-bottom:6px}
.admdoc-t{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  border:1.5px solid var(--line2);color:var(--dim);padding:2px 6px}
.admdoc-n{flex:1 1 130px;min-width:0;font-size:13px;font-weight:700;overflow-wrap:anywhere}
.admdoc-d{font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.admdocs .opbtn.admbtn{min-height:44px;flex:0 0 auto}
.admdoc-sobe{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:center}
.admdoc-sobe select,.admdoc-sobe input[type=file]{min-height:44px;font-size:16px;font-family:inherit;
  border:2px solid var(--line2);background:var(--bg3);color:var(--txt);padding:0 10px;
  flex:1 1 160px;min-width:0}
.admdoc-sobe input[type=file]{padding:9px 10px}

/* a folha prevista */
.admfo{display:grid;gap:2px}
.admfo-l{display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline;
  border-bottom:1.5px dashed var(--line2);padding:8px 0;min-width:0}
.admfo-l>span:first-child{flex:1 1 160px;min-width:0;font-size:12.5px;color:var(--dim)}
.admfo-l>b{font-family:var(--mono);font-size:16px;font-weight:800;
  font-variant-numeric:tabular-nums;color:var(--txt)}
.admfo-q{font-family:var(--mono);font-size:11.5px;color:var(--dim2);flex:0 0 auto}
.admfo-dif>b{color:var(--amber)}
.admfo-alerta{border-left:4px solid var(--amber);padding-left:10px;margin:10px 0}
.admfo-set{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:5px}
.admfo-set li{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;min-width:0;
  border-top:1px dashed var(--line2);padding-top:5px}
.admfo-set li>span:first-child{flex:1 1 120px;min-width:0;font-size:12.5px;overflow-wrap:anywhere}
.admfo-set li>b{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}

/* o diálogo das ações de pessoa. Classe própria e estilo próprio: `.opdlg` mora
   no 97-operacao.css, que é concatenado DEPOIS deste arquivo, e herdar dele
   deixaria o visual daqui refém de uma mudança lá. */
.admpdlg{border:2px solid var(--tinta);padding:0;background:var(--bg2);color:var(--txt);
  width:min(520px,calc(100vw - 24px));max-height:calc(100dvh - 36px);
  box-shadow:var(--dura);border-radius:0;overflow:auto;margin:auto}
.admpdlg::backdrop{background:rgba(4,5,6,.78)}
.admpdlg-in{padding:18px;display:grid;gap:10px}
.admpdlg h4{font-family:var(--display);font-size:19px;line-height:1.15;font-weight:800;
  text-transform:uppercase;letter-spacing:-.01em;overflow-wrap:anywhere}
.admpdlg-bt{display:flex;gap:10px;margin-top:6px}
.admpdlg-bt .opbtn{flex:1;min-height:44px}
.admf-l{display:grid;gap:4px;font-size:12px;color:var(--dim)}
.admf-l input,.admf-l select{width:100%;min-height:44px;font-size:16px;font-family:inherit;
  border:2px solid var(--line2);background:var(--bg3);color:var(--txt);padding:0 10px}
.admf-l input:focus-visible,.admf-l select:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
.admf-ob{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--amber)}

@media(prefers-reduced-motion:reduce){
  .admbarra i{transition:none}
}

/* ---- celular ---- */
@media(max-width:720px){
  .admform{grid-template-columns:1fr}
  .admcas{grid-template-columns:minmax(0,1fr)}
  .admcard{grid-template-columns:minmax(0,1fr)}
  .admvalor{text-align:left;font-size:20px}
  .admeixo-c span{font-size:9px}
}
@media(max-width:430px){
  .admwrap .opkpi.admdin .v{font-size:20px}
  /* A etiqueta de situacao desce para baixo do nome: em 390px ela e o terceiro
     bloco de uma linha que ja tem avatar e nome, e comprimir os tres corta o
     nome no meio. */
  .admp-cab{flex-wrap:wrap}
  .admp-sit{max-width:none;margin-left:48px}
  .admp-c>span{flex:0 0 92px}
  .admsug .opbtn.admbtn,.admdocs .opbtn.admbtn{flex:1 1 100%}
  .admpdlg-in{padding:14px}
  .admcard .admacoes .opbtn{flex:1 1 100%}
  .admdlgbox{padding:16px}
  .admdlg h2{font-size:19px}
  .admchip{padding:0 10px;font-size:12px}
  .admeixo-c span{display:none}
}

/* ===== css/97-autocadastro.css ===== */
/* ---------- CADASTROS PELO LINK: a fila do administrativo ----------
 * Irmã de 97-administrativo.css, e pelo mesmo motivo: o chassi, os botões e
 * as seções são as classes da OPERAÇÃO. Aqui só entra o que aquelas não têm:
 * a caixa do link, o cartão de um pré-cadastro, o selo do veredito e o bloco
 * que mostra a senha uma vez.
 *
 * Só variáveis do tema: nenhuma cor escrita fora de rgba(), para as 28 peles
 * pintarem a mesma tela com a própria paleta.
 *
 * Celular primeiro: 390px sem rolagem horizontal, alvo de toque de 44px.
 *
 * ORDEM: o bundle concatena o CSS em ordem alfabética, e este arquivo entra
 * ANTES de 97-monitoramento.css e de 97-operacao.css. Regra com a mesma
 * especificidade que uma de lá perde em silêncio, então tudo aqui usa classe
 * própria (`.ac…`), e o que precisa vencer um `.opbtn` vem como `.opbtn.ac…`.
 */

/* ---- a caixa do link ---- */
.accaixa{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between;
  border:2px solid var(--tinta);background:var(--bg3);box-shadow:var(--dura);
  padding:12px;margin-bottom:14px;min-width:0}
.accaixa .acq{min-width:0;flex:1 1 240px;display:flex;flex-direction:column;gap:4px}
.accaixa .acq b{font-size:14px;font-weight:800;line-height:1.3}
.accaixa .acq span{font-size:12.5px;color:var(--dim);line-height:1.45}
.acurl{font-size:12px;color:var(--txt);overflow-wrap:anywhere;word-break:break-all;
  border:1.5px solid var(--line2);background:var(--bg);padding:7px 9px;line-height:1.45}
.acpe{font-size:12px;color:var(--dim2);line-height:1.45}
.acacoes{flex:0 0 auto;margin:0}
.accaixa .acacoes .opbtn{min-height:44px}

/* ---- o cartão de um pré-cadastro ---- */
.accard{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;
  border:2px solid var(--tinta);border-left-width:5px;background:var(--bg3);box-shadow:var(--dura);
  padding:12px;margin-bottom:10px;min-width:0}
.accard.ligado{border-left-color:var(--green)}
.accard-q{min-width:0}
.accard-t{display:flex;flex-wrap:wrap;gap:5px 8px;align-items:center;margin-bottom:6px}
.acnome{font-weight:800;font-size:15px;line-height:1.3;overflow-wrap:anywhere}
/* O nome social, ao lado do nome do documento. Peso menor de proposito: quem
   aprova esta conferindo identidade, e o nome do documento e o que casa com o
   CPF. Este aqui diz como falar com a pessoa. */
.acsocial{font-size:12.5px;color:var(--dim);line-height:1.3;overflow-wrap:anywhere}
.acsocial b{color:var(--txt);font-weight:700}
.admdlgalvo .acsocial{display:block}
.acselo{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  border:1.5px solid var(--line2);color:var(--dim);padding:2px 6px;white-space:nowrap;font-weight:700}
.acselo.no_rh{border-color:var(--green);color:var(--green)}
.acselo.telefone_outro_nome{border-color:var(--amber);color:var(--amber)}
.acdados{display:flex;flex-wrap:wrap;gap:3px 12px;font-size:12.5px;color:var(--dim);line-height:1.5}
.acdados .mono{font-family:var(--mono);color:var(--txt);font-weight:700}
.acrh{font-size:12.5px;color:var(--txt);line-height:1.45;margin-top:6px;
  border-left:3px solid var(--amber);padding-left:9px;overflow-wrap:anywhere}
.accard .acacoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.accard .acacoes .opbtn{flex:1 1 auto;min-height:44px}
.opbtn.acaprova{border-color:var(--green);color:var(--green)}
.opbtn.gh.acrecusa{border-color:var(--red);color:var(--red)}

/* ---- o que está esperando o RH ---- */
.acesperando{font-size:13px;line-height:1.5;margin-top:10px;color:var(--txt)}
.acnomes{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}

/* ---- os dois diálogos ---- */
.acform{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.acform label{display:flex;flex-direction:column;gap:5px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:700;min-width:0}
.acform input,.acform select{min-height:44px;border:2px solid var(--tinta);background:var(--bg);
  color:var(--txt);font-family:inherit;font-size:14px;padding:0 11px;text-transform:none;
  letter-spacing:0;font-weight:400;width:100%;box-sizing:border-box;min-width:0}
.acform input:focus,.acform select:focus{outline:2px solid var(--amber);outline-offset:1px}
/* `hidden` NAO ESCONDE NADA AQUI DENTRO, e isto custou uma volta de previa em
   21/09/2026. O atributo vale `display:none` na folha do NAVEGADOR, e a regra
   acima declara `display:flex` na folha do AUTOR: autor ganha de navegador,
   sempre. Dois efeitos, os dois vistos na tela:

     o campo "E-mail de acesso" continuava visivel, vazio, embaixo do bloco que
     o substitui quando quem manda no e-mail e a pessoa que se cadastrou;

     o formulario inteiro continuava visivel DEPOIS de a conta nascer -- e esse
     e anterior a 21/09: `el('ac-dlg-a-form').hidden = true` esta no codigo
     desde que o dialogo existe e nunca escondeu coisa nenhuma. Quem aprovava
     lia a senha provisoria duas vezes, uma no campo e outra no bloco da
     credencial, com um botao "Criar a conta" sumido no meio.

   E a mesma armadilha de `.voto .origens{display:flex}`, que em 11/09 deixou os
   chips de origem visiveis com `hidden` ligado. */
.acform[hidden],.acform label[hidden],.acform [hidden]{display:none}

/* A senha aparece UMA vez, e é isto que a pessoa vai copiar e ditar: fonte
   monoespaçada e tamanho grande, para não confundir caractere no celular. */
.acpronto{margin:12px 0}
.accred{display:flex;flex-direction:column;gap:9px;margin:10px 0;
  border:2px solid var(--amber);background:var(--bg);padding:11px}
.accred>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.accred span{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);font-weight:700}
.accred b{font-family:var(--mono);font-size:16px;font-weight:800;color:var(--txt);
  overflow-wrap:anywhere;word-break:break-all;line-height:1.35;
  -webkit-user-select:all;user-select:all}
.acpronto .opbtn{min-height:44px;width:100%}

/* Da largura de tablet para cima o cartão respira: as ações saem de baixo do
   texto e ficam à direita, como no cartão de despesa. */
@media (min-width:720px){
  .accard{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px 14px}
  .accard .acacoes{flex:0 0 auto;flex-direction:column;align-items:stretch;min-width:190px}
  .accard .acacoes .opbtn{flex:0 0 auto}
  .accred{flex-direction:row;flex-wrap:wrap;gap:9px 26px}
  .accred>div{flex:1 1 180px}
}

/* ---------- A CONTA VAI NASCER COM A FICHA DO RH EM ABERTO (12/09/2026) ----------
 * Aparece só para quem aprova abaixo do nível 80 — o coordenador que põe o cabo
 * para trabalhar hoje. Em dois lugares, e os dois são necessários: no cartão,
 * porque quem varre uma fila de treze decide ANTES de clicar; e no diálogo,
 * porque é ali que a conta nasce de fato.
 *
 * COR MEDIDA, nos 29 temas: `--amber` não pinta letra aqui. O pior caso é o
 * roxo do Ruy a 2.40:1 sobre `--bg3` — abaixo até dos 3:1 de grafismo. Texto
 * sai em `--txt` (pior 13.42:1) e `--dim` (pior 6.03:1), que passam AA em toda
 * pele, clara e escura; o acento fica na borda, que é grafismo.
 *
 * `--acento-texto` é o acento com a luminância já ajustada pelo pele.mjs (pior
 * caso 4.51:1 sobre --bg3). O fallback para `--amber` existe porque `diego` e
 * `multiplicai` não declaram o token, e nos dois o amber cru passa os 3:1 da
 * borda.
 */
.acpend{font-size:12px;line-height:1.5;color:var(--txt);margin-top:8px;
  border-left:3px solid var(--acento-texto,var(--amber));padding-left:9px;overflow-wrap:anywhere}
.acpend b{font-weight:800}

.acpendbox{display:flex;flex-direction:column;gap:5px;margin:12px 0 0;padding:11px;
  border:2px solid var(--line2);border-left:4px solid var(--acento-texto,var(--amber));
  background:var(--bg3);min-width:0}
.acpendbox b{font-size:13px;font-weight:800;color:var(--txt);line-height:1.35;overflow-wrap:anywhere}
.acpendbox span{font-size:12px;color:var(--txt);line-height:1.5;overflow-wrap:anywhere}
.acpendbox .acpe{color:var(--dim)}
/* Dentro do `.acpronto` ele já vem depois do "Conta criada": margem só em cima,
   para não dobrar o vão antes do bloco da senha. */
.acpronto .acpend{margin:9px 0 0}

/* A SEÇÃO QUE NÃO FOI ESCOLHIDA NÃO DEIXA BURACO. Desde que o hospedeiro é
   duplo (12/09/2026), o `<section id="adm-sec-cadastro">` continua nascendo no
   esqueleto da aba ADMINISTRATIVO mesmo para o nível 40 — e para esse nível
   quem recebe o miolo é o pane da EQUIPE. Sem esta regra, a aba ADM do
   coordenador mostraria um retângulo com borda, sombra e 14px de padding em
   volta de nada, que é o `.opsec` desenhando o vazio.

   `:empty` e não uma classe: o vazio é o próprio estado, e assim a regra vale
   antes de qualquer JS rodar e volta a valer sozinha se o miolo sair. O id dá
   especificidade 1,1,0 e vence o `.opsec` de 97-operacao.css, que é
   concatenado DEPOIS deste arquivo. */
#adm-sec-cadastro:empty,#eq-sec-cadastro:empty{display:none}

/* ---------- QUEM MANDA NO E-MAIL É QUEM SE CADASTROU (21/09/2026) ----------
 * O campo "E-mail de acesso" sai da tela quando o pré-cadastro traz e-mail, e
 * este bloco entra no lugar. Ele é leitura, não controle: mostra o endereço que
 * a pessoa escreveu (ou diz que o servidor vai usar o dela, quando a fila ainda
 * não entrega o endereço), e é isso que a `aprovar_pre_cadastro` obedece desde
 * a migration 020.
 *
 * O rótulo repete a gramática do `.accred` de propósito — mono, versalete,
 * `--dim` — porque é o mesmo dado, antes e depois de a conta nascer. Cor de
 * texto sai de `--txt` e `--dim`, nunca de `--amber`: a nota de contraste
 * medida nos 29 temas está logo acima, e o pior caso (o roxo do Ruy) dá 2.40:1.
 */
.acmail{display:flex;flex-direction:column;gap:4px;padding:11px;min-width:0;
  border:2px solid var(--tinta);background:var(--bg3)}
.acmail-r{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);font-weight:700}
.acmail-e{font-size:15px;font-weight:800;color:var(--txt);line-height:1.35;
  overflow-wrap:anywhere;word-break:break-word;-webkit-user-select:all;user-select:all}
/* `.acpe` e `--dim2`, que sobre o `--bg3` desta caixa deu 4.22:1 no tema do
   comite -- abaixo do 4.5:1 do AA. Sobe para `--dim`, que e o que o
   `.acpendbox` ja faz logo abaixo, pelo mesmo motivo e sobre o mesmo fundo. */
.acmail .acpe{color:var(--dim)}

/* As três formas de entregar a credencial, empilhadas no celular. `.acpronto
   .opbtn` já força 44px de altura e largura cheia; aqui só o vão e a ordem. */
.acentrega{display:flex;flex-direction:column;gap:8px;margin-top:10px}
@media (min-width:720px){
  .acentrega{flex-direction:row;flex-wrap:wrap}
  .acpronto .acentrega .opbtn{width:auto;flex:1 1 160px}
}

/* ===== css/97-monitoramento.css ===== */
/* ---------- MONITORAMENTO: mapa da operação, funil e evolução ----------
 * Duas seções que o js/68 pendura dentro da aba OPERAÇÃO, logo abaixo dos
 * KPIs. Segue a linguagem do 97-operacao.css e reaproveita as classes de lá
 * (.opsec, .optopo, .opdica, .opnada, .operro, .opbtn): aqui só entra o que
 * não existia.
 *
 * Nenhuma cor escrita: só variáveis do tema, para a pele do produto e a de
 * cada candidato pintarem a mesma tela com a própria paleta.
 *
 * Celular primeiro: 390px sem rolagem horizontal, alvo de toque de 44px
 * (herdado do .opbtn), listas empilhadas em vez de tabela, e o gráfico em SVG
 * que o js redesenha no tamanho real do container.
 */

/* ---- alternadores (métrica do mapa, agrupamento das pessoas) ---- */
.monsel{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;min-width:0}
/* .opbtn.gh é transparente com borda; ligado, vira massa de acento. O seletor
   com o pai ganha do .opbtn.gh mesmo este arquivo vindo antes na concatenação. */
.monsel .opbtn.on{background:var(--amber);color:var(--sobre-acento);border-color:var(--tinta)}

/* ---- o mapa ---- */
.monmapa{height:320px;width:100%;min-width:0;border:2px solid var(--tinta);
  background:var(--bg3);box-shadow:var(--dura)}
/* sem Mapbox a caixa deixa de ser mapa e vira o recado, com a altura do texto */
.monmapa.vazio{height:auto;display:flex;align-items:center;justify-content:center;padding:16px}
@media(min-width:861px){.monmapa{height:420px}}

/* o popup usa .mapbox-tip e .pop de 50-mapa.css; aqui só as linhas, que em vez
   de tabela (tabela corta coluna no celular) são flex com o número à direita */
.monpoplin{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-size:13px;padding:3px 0}
/* o token de LETRA, não o de bloco: o popup tem fundo --bg2 e o acento cru
   reprova ali em 9 peles (pior caso 2.67:1, ruy). Continua abaixo de 4.5 em
   algumas porque o --acento-texto é calibrado contra --bg e o popup é --bg2 —
   está no relato da sessão A, e o conserto de raiz é no gerador da pele. */
.monpoplin b{font-family:var(--mono);color:var(--acento-texto,var(--amber));font-weight:700}
/* --dim nos dois rótulos de 10px, pelo mesmo motivo do .opkpi .l: o --dim2 fica
   em 3.77:1 na pele clara do Diego. O que é desenho (a barra de contatos, o
   quadrado da legenda) continua em --dim2: forma gráfica pede 3:1, não 4.5. */
.monpopt{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  font-weight:800;margin-top:8px;padding-top:7px;border-top:1.5px dashed var(--line2)}

/* ---- funil: barras horizontais em div, nunca gráfico de biblioteca ---- */
.monfunil{display:grid;gap:10px;margin-bottom:8px;min-width:0}
.monfx{min-width:0}
.monfr{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:2px 10px;margin-bottom:4px}
.monfn{font-family:var(--display);font-size:14px;font-weight:800;text-transform:uppercase;
  letter-spacing:.02em}
.monfv{font-family:var(--mono);font-size:13px;color:var(--dim)}
.monfv b{color:var(--txt);font-weight:700}
.monfb{height:14px;background:var(--bg);border:1.5px solid var(--line);position:relative;overflow:hidden}
.monfb i{position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--p,0));
  background:var(--amber);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
/* o último degrau é o que conta de verdade: voto validado */
.monfx.fim .monfb i{background:var(--green)}

/* A "produção por pessoa" que morava aqui virou o card da EQUIPE (js/67,
   `.opeq` em 97-operacao.css) em 15/09/2026. O que ficou do monitoramento
   dentro do card é a evolução em miniatura (`.monevo.mini`), abaixo. */

/* ---- evolução: SVG puro, desenhado pelo js no tamanho real do container ---- */
.monevo{display:block;width:100%;max-width:100%}
.monevo .sc{fill:var(--dim2)}
.monevo .sv{fill:var(--amber)}
.monevo .nv{fill:var(--dim);font-family:var(--mono);font-size:9px}
.monevo .dt{fill:var(--dim);font-family:var(--mono);font-size:10px}
.monevo .eixo{stroke:var(--line2);stroke-width:1}
.monlegenda{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px;color:var(--dim);margin-top:6px}
.monlegenda i{display:inline-block;width:11px;height:11px;margin-right:6px;vertical-align:-1px}
.monlegenda .c{background:var(--dim2)}
.monlegenda .v{background:var(--amber)}
.montotal{font-size:13px;color:var(--dim);line-height:1.5;margin-top:7px}
.montotal b{color:var(--txt);font-family:var(--mono);font-weight:700}

@media(prefers-reduced-motion:reduce){
  .monfb i{transition:none}
}

/* ---- celular ---- */
@media(max-width:720px){
  .monsel .opbtn{flex:1 1 auto}
  .monmapa{height:300px}
}
@media(max-width:430px){
  .monfn{font-size:13px}
  .montotal,.monlegenda,.monfv{font-size:13px}
}

/* ===== css/97-operacao.css ===== */
/* ---------- OPERAÇÃO: o comitê por dentro ----------
 * Aba do supervisor (nível 30+) e do monitoramento (50+). Só variáveis do
 * tema: nenhuma cor escrita aqui, para a pele do produto e a de cada
 * candidato pintarem a mesma tela com a própria paleta.
 *
 * Celular primeiro: 390px sem rolagem horizontal, alvo de toque de 44px,
 * cartões em grade que vira coluna única, linhas em flex que empilham. Nada
 * de tabela: tabela corta coluna no celular e some com texto.
 */
/* A barra de KPIs do topo é do MAPA. Aqui os números do dia são outros e
   moram dentro da própria aba, como no Cadastro e na Equipe. */
body[data-aba="operacao"] .kpibar{display:none}
body[data-aba="operacao"] main{height:calc(100dvh - var(--head))}

.opwrap{flex:1;overflow-y:auto;padding:16px;min-width:0}
.optopo{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.opwrap h2{font-family:var(--display);font-size:27px;font-weight:800;font-stretch:88%;
  text-transform:uppercase;letter-spacing:-.4px}
.opwrap .lead{font-size:12.5px;color:var(--dim);margin-bottom:16px;max-width:720px;line-height:1.5}

/* ---- KPIs do dia: bloco de massa, número grande ---- */
.opkpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.opkpi{border:2px solid var(--tinta);background:var(--bg2);box-shadow:var(--dura);padding:12px 12px 10px;
  display:grid;gap:5px;min-width:0}
/* --dim, e não --dim2 (12/09/2026): a 10px o rótulo precisa de 4.5:1, e o --dim2
   dá 3.77:1 na pele do Diego, que é a única clara. Com --dim são 6.93 lá e 7.15
   nas outras 28. --dim2 continua servindo o que é gráfico, que pede só 3:1. */
.opkpi .l{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:800}
.opkpi .v{font-family:var(--display);font-size:34px;font-weight:800;line-height:1;color:var(--txt);
  font-variant-numeric:tabular-nums}
/* --acento-texto é o mesmo matiz com a luminância ajustada pelo tools/pele.mjs
   para servir de LETRA; --amber é a cor de bloco. Aqui o número é grande (28px
   ou mais, peso 800), então o mínimo é 3:1 — com o acento cru o pior caso era
   2.67:1 (ruy) e com o token de texto passa a 3.27:1 (diego), o pior dos 29. */
.opkpi.aguarda .v{color:var(--acento-texto,var(--amber))}

/* ---- seção ---- */
.opsec{border:2px solid var(--tinta);background:var(--bg2);box-shadow:var(--dura);padding:14px;
  margin-bottom:14px;min-width:0}
.opsec h3{font-family:var(--display);font-size:17px;font-weight:800;text-transform:uppercase;
  letter-spacing:.02em;margin-bottom:4px}
.opsec h4{font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--dim);font-weight:700;
  margin:20px 0 6px}
.opdica{font-size:11.5px;color:var(--dim);line-height:1.5;margin-bottom:10px}
.opnada{font-size:12.5px;color:var(--dim);padding:8px 0}
.operro{font-size:12px;color:var(--red);font-weight:700;margin:8px 0;line-height:1.45}
.opok{font-size:12px;color:var(--green);font-weight:700;margin:8px 0;line-height:1.45}

/* ---- botões: 44px de altura em todos, e o secundário com contraste medido
   (fundo no tom do texto, texto no tom do fundo) em vez de cinza sobre cinza ---- */
.opbtn{min-height:44px;padding:9px 14px;font-family:var(--display);font-size:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;border:2px solid var(--tinta);cursor:pointer;
  background:var(--txt);color:var(--bg);box-shadow:var(--dura);white-space:nowrap}
.opbtn.pri{background:var(--amber);color:var(--sobre-acento)}
.opbtn.gh{background:transparent;color:var(--txt);border-color:var(--line2)}
.opbtn.peq{padding:6px 11px;font-size:11px}
.opbtn:hover:not(:disabled){transform:translate(-1px,-1px)}
.opbtn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.opacoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* ---- as peças do card de pessoa (o card em si, `.opeq`, está no fim do arquivo) ---- */
/* O par medido é (--amber, --sobre-acento): é esse que o tools/pele.mjs calcula
   e escreve no cabeçalho do tema. Com --gold as duas cores andam soltas, e na
   pele do Diego (a única clara) o creme sobre o amarelo das artes dava 1.32:1 —
   as iniciais do cabo sumiam dentro do disco. Nas outras 28 peles gold e amber
   são a mesma cor, então ali nada muda. A pele do Diego passa de 1.32 para 3.30,
   que ainda é pouco: o conserto de raiz é o --sobre-acento daquele tema, e está
   no relato da sessão A (com #14181F ele iria a 5.26). */
.opini{width:38px;height:38px;flex-shrink:0;border:2px solid var(--tinta);background:var(--amber);
  color:var(--sobre-acento);display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:13px;font-weight:700}
.opnome{font-weight:800;font-size:15px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oppapel{font-size:11px;color:var(--dim);margin-top:2px}
.opselo{font-family:var(--mono);font-size:9px;letter-spacing:.1em;border:1.5px solid var(--amber);
  /* O ACENTO FICA NA BORDA, E O TEXTO NA COR DE TEXTO (12/09/2026). A 9px, o
     acento como cor de letra reprova no AA em 9 das 29 peles medidas contra o
     fundo do cartão (--bg3): ruy 2.40:1, felipe 2.64, diego 2.85, larúcia 3.04,
     comitê 3.90 — e o mínimo para letra pequena é 4.5. A borda continua dizendo
     de quem é a plataforma, sem pôr a identidade no caminho da leitura. */
  color:var(--txt);padding:1px 5px;vertical-align:middle;margin-left:4px}

.opbarra{height:10px;background:var(--bg);border:1.5px solid var(--line);position:relative;overflow:hidden}
.opbarra i{position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--p,0));
  background:var(--amber);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.opeq.bateu>.opeq-s .opbarra i{background:var(--green)}
@media(prefers-reduced-motion:reduce){.opbarra i{transition:none}.opbtn:hover:not(:disabled){transform:none}}

.opnums{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11.5px;color:var(--dim);
  border-top:1.5px dashed var(--line2);padding-top:8px}
.opnums b{color:var(--txt);font-family:var(--mono);font-size:12px}
.opeq-c .opacoes .opbtn{flex:1 1 auto;padding-left:8px;padding-right:8px;font-size:11px}

/* ---- formulário do lote e da importação ---- */
.opform{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;align-items:end;margin-bottom:10px}
.opform label,.opblk{display:grid;gap:4px;font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);font-weight:700;min-width:0}
.opblk{margin-bottom:10px}
/* 16px NO CAMPO NÃO É TAMANHO DE LETRA, É CONSERTO DE CELULAR (12/09/2026).
   O Safari do iPhone dá zoom sozinho ao focar um campo com fonte menor que
   16px, e o zoom não volta quando a pessoa sai dele: a tela fica ampliada, a
   barra de abas sai do lado de fora e o resto do formulário vira rolagem
   lateral. O `user-scalable=no` do index.html não segura — o iOS ignora aquilo
   desde a versão 10, de propósito, para não quebrar acessibilidade.
   Medido antes: seleção de lista, de cabo e quantidade em 13.5px, e o campo do
   CSV em 12.5px. O `min-height` de 44px já estava certo e continua mandando. */
.opform select,.opform input,.opblk textarea{font:inherit;font-size:16px;min-height:44px;padding:9px 10px;
  border:2px solid var(--tinta);background:var(--bg);color:var(--txt);width:100%;min-width:0;
  text-transform:none;letter-spacing:0;font-weight:400}
.opform select:disabled{background:var(--bg3);color:var(--dim);cursor:not-allowed}
.opform select:focus,.opform input:focus,.opblk textarea:focus{outline:none;box-shadow:2px 2px 0 var(--amber)}
.opblk textarea{font-family:var(--mono);font-size:16px;line-height:1.5;resize:vertical;min-height:160px}
/* Um campo sozinho dentro de `.opform` esticaria por toda a largura do cartão,
   e um seletor de 900px para escolher um nome fica estranho ao lado do
   formulário de lote, que tem quatro campos dividindo o mesmo espaço. Uma
   classe só, como `.opform`, mas declarada depois: em telas estreitas a regra
   `.opform{grid-template-columns:1fr}` da media query abaixo volta a mandar. */
.opfiltro{grid-template-columns:minmax(190px,320px)}

/* ---- O FORMULÁRIO DO LOTE ALINHA PELO TOPO (22/09/2026) ----
 * `.opform` alinha pela BASE (`align-items:end`), e é o certo no formulário da
 * importação e no do administrativo, onde a caixa de marcar "Já está pago" não
 * tem rótulo em cima e precisa encostar na linha dos campos.
 *
 * Aqui ele produzia o defeito que o Gabriel apontou: os campos LISTA e QUANTOS
 * DESCIAM sempre que a linha de informação embaixo do seletor de destino tinha
 * texto. Medido a 1366px, com "Fulano responde a Beltrano" (duas linhas): o
 * campo de destino media 98px e os outros dois 64px, e a base comum jogava os
 * dois para baixo — três campos lado a lado com os três seletores em alturas
 * diferentes.
 *
 * Alinhar pelo topo resolve porque a linha de informação passa a PENDER do
 * campo dela em vez de empurrar os vizinhos. Quem não tem rótulo (os atalhos de
 * quantidade e o botão) desce a altura de um rótulo, senão nasceria colado no
 * topo, na régua dos rótulos e não na dos campos. Os 16px são medidos: o rótulo
 * é uma linha de 10px (12px de caixa) mais o `gap:4px` da própria `label`.
 *
 * E o `input[type=number]` renderiza 44px onde o `<select>` renderiza 48 no
 * Chrome: alinhados pela base isso não aparecia, alinhados pelo topo o QUANTOS
 * terminaria 4px acima dos outros dois. O piso de 48px vale só aqui, e continua
 * acima dos 44px de alvo de toque.
 *
 * Abaixo de 430px a grade é de uma coluna (media query no fim deste bloco) e
 * não há nada a alinhar: o recuo sai, senão viraria um vão morto entre o último
 * campo e os botões. */
.oplote{align-items:start}
.oplote>.opatalhos,.oplote>.opbtn{margin-top:16px}
.oplote select,.oplote input,.oplote .opatalhos button{min-height:48px}
/* `.opform.oplote` e não `.oplote` no botão: o tema do comitê declara
   `:root .opbtn{min-height:44px}`, que empata em especificidade com
   `.oplote>.opbtn` e vence por vir depois na concatenação. Medido: o botão
   ficava 44px enquanto os três campos ao lado mediam 48. */
.opform.oplote>.opbtn{min-height:48px}

.opatalhos{display:flex;gap:6px;flex-wrap:wrap}
.opatalhos button{min-width:44px;min-height:44px;padding:0 10px;font-family:var(--mono);font-size:13px;font-weight:700;
  border:2px solid var(--line2);background:transparent;color:var(--txt);cursor:pointer}
.opatalhos button.on{background:var(--txt);color:var(--bg);border-color:var(--tinta)}

/* ---- linhas: flex que empilha, nunca tabela ---- */
.oplinha{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;padding:9px 0;
  border-top:1.5px dashed var(--line2);min-width:0}
.oplinha:first-child{border-top:0}
.oplinha .q{flex:1 1 200px;min-width:0;display:grid;gap:2px}
.oplinha .nm{font-weight:800;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oplinha .opmt{font-family:var(--mono);font-size:11px;color:var(--dim);overflow-wrap:anywhere}
.oplinha .opmt .ruim{color:var(--red);font-weight:700}
.oplinha .dono{font-size:12px;color:var(--dim);flex:0 1 auto}
.oplinha .dono b{color:var(--txt)}
.oplinha .dono small{font-family:var(--mono);font-size:10.5px;margin-left:4px}
.oplinha .ac{display:flex;gap:6px;flex-shrink:0;margin-left:auto}
.oplinha.marca{cursor:pointer;min-height:44px}
.oplinha.marca input[type=checkbox]{width:24px;height:24px;flex-shrink:0;accent-color:var(--amber);cursor:pointer;margin:0}

/* ---- red flags ---- */
.opflag{border:2px solid var(--tinta);background:var(--bg3);box-shadow:var(--dura);padding:12px;margin-bottom:10px;min-width:0}
.opflag-q{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:14px;margin-bottom:8px}
.opflag-q b{font-weight:800}
.opflag-outro{color:var(--dim);font-size:12.5px}
.optag{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  border:1.5px solid var(--red);color:var(--red);padding:2px 6px}
.opflag-tel{display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--mono);font-size:12.5px}
.opflag-tel i{font-style:normal;font-weight:800;color:var(--sobre-acento);background:var(--amber);
  padding:1px 6px;margin-right:6px}
.opflag-tel small{color:var(--dim);font-size:10.5px;margin-left:4px}
.opflag .opacoes .opbtn{flex:1 1 auto}

/* ---- histórico curto ---- */
.ophist{list-style:none;margin:0;padding:0}
.ophist li{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;padding:7px 0;
  border-top:1.5px dashed var(--line2);font-size:12px}
.ophist li:first-child{border-top:0}
.ophist li.visto{color:var(--dim)}
.ophist .t{font-family:var(--mono);font-size:10.5px;color:var(--dim);flex-shrink:0;min-width:44px}
.ophist .k{font-weight:800;flex-shrink:0}
.ophist .d{flex:1 1 160px;min-width:0;overflow-wrap:anywhere}
.ophist .d small{color:var(--dim)}

/* ---- prévia e resumo da importação ---- */
.opprevia{border:2px solid var(--tinta);background:var(--bg3);padding:10px 12px;margin-top:10px}
.opprevia-t{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin-bottom:6px}
.opprevia-t b{font-family:var(--display);font-size:16px;font-weight:800}
.opprevia-t span{font-size:11.5px;color:var(--dim)}
.opresumo{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;border:2px solid var(--green);padding:10px 12px}
.opresumo b{font-size:15px}
.opresumo span{font-weight:400;color:var(--txt);font-size:12px}

/* ---- celular ---- */
@media(max-width:860px){
  /* 150px e nao 90px (12/09/2026, achado da sessao C). O botao REPORTAR e
   `position:fixed` em `bottom:86px` com 44px de altura: ele ocupa os 130px de
   baixo da tela. Com 90px de respiro, o ultimo cartao da OPERACAO e a ultima
   despesa do ADMINISTRATIVO ficavam DEBAIXO dele, e sem barra para arrastar --
   conteudo inalcancavel, que e o que a regra CELULAR PRIMEIRO chama de estouro
   escondido. Medido em Chrome a 390px: #admwrap computava 90px nas 25 peles sem
   tema proprio e 150px na do comite, que ja tinha o conserto no tema dela. */
.opwrap{padding:14px 14px 150px}
  .opkpi .v{font-size:28px}
  .opacoes .opbtn{flex:1 1 auto}
  .oplinha .ac{margin-left:0;flex:1 1 100%}
  .oplinha .ac .opbtn{flex:1 1 auto}
}
@media(max-width:430px){
  .opform{grid-template-columns:1fr}
  /* uma coluna: não há campo ao lado para alinhar, e o recuo viraria vão morto */
  .oplote>.opatalhos,.oplote>.opbtn{margin-top:0}
  .opkpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .opwrap h2{font-size:23px}
  .opeq-c .opacoes{flex-direction:column}
}

/* ---------- o diálogo de uma pergunta (12/09/2026) ----------
   Substitui o `prompt()` do navegador na meta do dia e na recusa de voto. Mesmo
   chassi das seções: bloco chapado, canto reto, borda de 2px e a sombra dura.
   O campo herda a medida dos formulários da aba (44px de altura), porque quem
   digita aqui digita com o polegar. */
.opdlg{border:2px solid var(--tinta);padding:0;background:var(--bg2);color:var(--txt);
  width:min(430px,calc(100vw - 28px));max-height:calc(100dvh - 40px);
  box-shadow:var(--dura);border-radius:0;overflow:auto;
  /* `margin:auto` explícito: o `*{margin:0}` do 00-base.css ganha da regra do
     navegador e a caixa encostaria no topo esquerdo (a mesma pedra do 87-abertura.css) */
  margin:auto}
.opdlg::backdrop{background:rgba(4,5,6,.78)}
.opdlgbox{padding:20px;display:grid;gap:0}
.opdlg h2{font-family:var(--display);font-size:21px;line-height:1.15;font-weight:800;
  text-transform:uppercase;letter-spacing:-.01em;margin-bottom:6px}
.opdlgsub{font-size:13px;line-height:1.55;color:var(--dim);margin-bottom:14px;overflow-wrap:anywhere}
.opdlgsub[hidden]{display:none}
.opdlgcampo{display:grid;gap:5px;font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);font-weight:700}
.opdlgcampo input{font:inherit;font-size:16px;min-height:48px;padding:10px 12px;
  border:2px solid var(--tinta);background:var(--bg);color:var(--txt);width:100%;min-width:0;
  text-transform:none;letter-spacing:0;font-weight:400}
/* 16px no campo é medida de celular, não de gosto: abaixo disso o Safari do
   iPhone dá zoom sozinho ao focar, e a caixa sai da tela. */
.opdlgcampo input:focus{outline:none;box-shadow:2px 2px 0 var(--amber)}
.opdlgerro{font-size:12px;color:var(--red);font-weight:700;margin-top:8px;line-height:1.45}
.opdlgerro[hidden]{display:none}
.opdlgacoes{display:flex;gap:10px;margin-top:18px}
.opdlgacoes .opbtn{flex:1}

@media(max-width:430px){
  .opdlgbox{padding:16px}
  .opdlg h2{font-size:19px}
  /* empilhado em 390px: dois botões lado a lado deixam ~170px cada e o rótulo
     "Recusar voto" fica no limite com a fonte grande do sistema. Empilha na
     ordem do DOM (cancelar em cima, ação principal embaixo, onde o polegar
     está) — `column-reverse` deixaria a ordem do olho diferente da do Tab. */
  .opdlgacoes{flex-direction:column;gap:8px}
}


/* ---------- O FILTRO DO ESTADO DO CONTATO (13/09/2026) ----------
   Os chips que recortam a tela por `liderancas.funil`. O JS esta em
   20-filtros.js; aqui e so a aparencia.

   CLASSE PROPRIA `.estado-*`, de proposito, e por dois motivos que se somam:
   `.funil-chips` ja e dos tres chips do cadastro do cabo (05-origens.js), que
   sao outra coisa (tres valores, tom de acao, dica embaixo); e `97-` entra
   depois de `93-chapa.css` na concatenacao alfabetica, entao reaproveitar
   `.chapa-chips` faria uma regra minha vencer a da chapa em silencio no dia em
   que alguem mexesse numa so.

   A APARENCIA e a mesma dos chips da chapa, e isso e o pedido: mesma altura de
   toque, mesma borda dura, mesmo escolhido em massa de acento. Duas familias de
   chip com desenhos diferentes fariam a mesma tela ter dois idiomas para a
   mesma acao. So variaveis do tema: nenhuma cor escrita aqui.

   Alvo de toque >= 44px em todo botao (celular primeiro). */
.estado-chips{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.estado-chips button{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 12px;
  font:inherit;font-size:12px;font-weight:700;line-height:1.2;cursor:pointer;max-width:100%;
  border:2px solid var(--tinta);background:var(--bg);color:var(--txt)}
.estado-chips button[aria-checked="true"]{background:var(--amber);color:var(--sobre-acento);
  border-color:var(--amber)}
.estado-chips button:hover{transform:translate(-1px,-1px)}
/* O tom vem do CATALOGO_FUNIL e marca os tres estados que ENCERRAM o contato:
   `ok` (voto, multiplicador) e `off` (descartado). E um ponto ao lado do rotulo,
   e nao a cor do botao inteiro: o escolhido ja usa a massa de acento, e pintar o
   fundo por tom faria dois significados disputarem o mesmo pixel.

   A diferenca entre `ok` e `off` e de FORMA (cheio x vazado), e nao de cor. O
   caminho obvio seria verde e cinza, e ele nao funciona aqui: o tema do comite
   declara `--green:#9AA7AD`, que e cinza, porque o alerta de cor politica do
   projeto neutraliza verde e vermelho. Os dois pontos sairiam identicos e o tom
   nao diria nada. Cheio contra vazado sobrevive a qualquer tema, e ainda se le
   sem enxergar cor. */
.estado-chips button[data-tom]::before{content:"";width:8px;height:8px;flex:0 0 auto;
  border:1.5px solid currentColor;background:transparent}
.estado-chips button[data-tom="ok"]::before{background:currentColor}
.estado-dica{font-size:11px;color:var(--dim);line-height:1.5;margin:6px 0 0}

/* Os dois filtros do topo da OPERACAO, empilhados, com UMA legenda no fim. Uma
   legenda por grupo faria a pessoa ler cada recorte sozinho e somar errado; a
   frase combinada esta em `opLegendaFiltros` (67-operacao.js). */
.opfiltros{margin:0 0 14px;min-width:0;display:grid;gap:8px}
.opfiltros .chapa-filtro{margin:0}
.opfiltros .chapa-dica{display:none}
.opfiltros .estado-chips button{font-family:var(--display);text-transform:uppercase;
  letter-spacing:.04em;font-size:11px}
.opfiltros-dica{font-size:11px;color:var(--dim);line-height:1.5;margin:0}

/* A etiqueta do KPI que NAO e recorte: "Numeros livres" conta telefone de lista
   e "Aguardando validacao" conta evento, e nenhum dos dois tem estado de funil.
   Ela so existe com o filtro ligado, e mora DENTRO do rotulo porque quem le um
   numero olha o numero, nao a legenda do topo da tela. */
.opkpi-todos{display:inline-block;margin-left:6px;padding:1px 5px;font-size:9px;font-weight:800;
  letter-spacing:.08em;border:1px solid var(--line2);color:var(--dim2);vertical-align:middle}

@media(max-width:430px){
  .estado-chips button{flex:1 1 auto;justify-content:center;padding:8px 10px}
}
@media(prefers-reduced-motion:reduce){
  .estado-chips button:hover{transform:none}
}


/* ---------- MINHAS LISTAS: a entrega ao coordenador (14/09/2026) ----------
 * A linha da lista reaproveita `.oplinha.marca`, que e a mesma do numero solto,
 * porque as duas sao "marque e aja num lote". O que muda e o terceiro rotulo: ele
 * diz o ESTADO da lista, e nao um dado dela.
 *
 * A lista entregue ganha uma barra no acento a esquerda, e nao um fundo colorido.
 * A razao e a mesma do chip de temperatura: fundo cheio numa linha de lista puxa
 * o olho para o estado e afasta do nome, que e o que a pessoa esta procurando. */
.oplinha.lista .crm{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim2)}
.oplinha.lista.entregue{box-shadow:inset 3px 0 0 var(--acento-texto,var(--gold))}
.oplinha.lista.entregue .crm{color:var(--acento-texto,var(--gold))}


/* ---------- A ABA COMPACTA (15/09/2026): as gavetas e o card da equipe ----------
 * Pedido do Rafael: menos bloco aberto, lista grande só no clique, e um card
 * só por colaborador com o cargo escrito. O JS está no 67 (`opGaveta`,
 * `opCartaoPessoa`, `opCartaoGrupo`); aqui é só a aparência.
 *
 * <details>/<summary> nativo. O marcador do navegador sai e entra uma seta
 * própria, porque o triângulo padrão muda de tamanho e de lugar entre Safari
 * e Chrome e não obedece ao alvo de 44px. O `summary` inteiro é o alvo.
 *
 * Só variáveis do tema: nenhuma cor escrita. Alvo de toque >= 44px em todo
 * resumo e em todo botão. */

/* ---- a gaveta que É a seção (.opgav) e a que mora dentro de uma (.opsub) ---- */
.opgav{padding:0}
.opgav>summary,.opsub>summary,.opeq>summary{list-style:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.opgav>summary::-webkit-details-marker,.opsub>summary::-webkit-details-marker,
.opeq>summary::-webkit-details-marker{display:none}
.opgav>summary:focus-visible,.opsub>summary:focus-visible,.opeq>summary:focus-visible{
  outline:2px solid var(--amber);outline-offset:-2px}
.opgav-s{display:flex;align-items:center;gap:10px;min-height:44px}
.opgav>.opgav-s{padding:12px 14px}
.opgav>.opgav-s h3,.opsub>.opgav-s h4{margin:0;flex:1 1 auto;min-width:0}
.opgav>.opgav-c{padding:0 14px 14px}
/* o contador: quanto tem dentro, antes de abrir. Vazio quando é zero (o JS não
   escreve), porque "0" ao lado de um título fechado convida a abrir para ver zero */
.opgav-n{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--txt);
  border:1.5px solid var(--line2);padding:2px 7px;flex-shrink:0;min-width:28px;text-align:center;
  font-variant-numeric:tabular-nums}
.opgav-n:empty{display:none}
.opgav-seta{width:0;height:0;flex-shrink:0;border-left:5px solid transparent;
  border-right:5px solid transparent;border-top:6px solid var(--dim);transition:transform .2s ease}
.opgav[open]>.opgav-s .opgav-seta,.opsub[open]>.opgav-s .opgav-seta,
.opeq[open]>.opeq-s .opgav-seta{transform:rotate(180deg)}
.opsub{border-top:1.5px dashed var(--line2);margin-top:12px;min-width:0}
.opgav-s>h3{overflow-wrap:anywhere}
/* Chamado #87: o <summary> da gaveta EQUIPE carrega o botao "Abrir todos".
   Em 390 px titulo + contador + botao + seta nao cabem na mesma linha, e o
   titulo passava por cima do contador. O botao desce para uma linha propria,
   com os 44 px de alvo de toque. */
.opgav-s.tem-acao{flex-wrap:wrap}
@media(max-width:560px){
  .opgav-s.tem-acao>.opgav-seta{order:3}
  .opgav-s.tem-acao>.opbtn{order:4;flex:1 1 100%;min-height:44px}
}
.opsub>.opgav-s{padding:10px 0}
.opsub>.opgav-s h4{margin:0}
.opsub>.opgav-c{padding-bottom:4px}
@media(prefers-reduced-motion:reduce){.opgav-seta{transition:none}}

/* ---- o card da equipe (.opeq) ----
   Fechado: iniciais, nome, cargo, "hoje X de Y", percentual e a barra. Tudo
   isso mora no <summary>, num grid de duas linhas: a barra ocupa a segunda
   inteira. O nome encurta com reticências; o percentual e a seta não encolhem. */
.opequipe{display:grid;gap:10px;min-width:0}
.opeq{border:2px solid var(--tinta);background:var(--bg3);box-shadow:var(--dura);min-width:0}
.opeq.bateu{box-shadow:3px 3px 0 var(--amber)}
.opeq.solto{border-style:dashed}
.opeq-s{display:grid;grid-template-columns:38px minmax(0,1fr) auto 12px;
  grid-template-areas:"ini quem pct seta" "barra barra barra barra";
  align-items:center;column-gap:10px;row-gap:9px;padding:11px 12px;min-height:44px}
.opeq-s .opini{grid-area:ini}
.opeq-q{grid-area:quem;min-width:0;display:grid;gap:3px}
.opeq-s .oppapel{margin:0;display:flex;flex-wrap:wrap;gap:3px 6px;align-items:center;line-height:1.35}
.opeq-s .oppapel b{color:var(--txt);font-family:var(--mono);font-size:12px}
/* "hoje 76 de 110" não quebra no meio: quebrar entre o número e a meta deixa
   "de 110" sozinho na linha de baixo, lendo como outra coisa */
.opeq-hoje{white-space:nowrap}
/* O CARGO, escrito em todo card. Etiqueta em mono, versalete, borda fina: a
   distinção entre cabo e supervisor não pode depender de onde o card está. */
.opcargo{font-style:normal;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--txt);border:1.5px solid var(--line2);padding:1px 5px;line-height:1.4}
.opeq.grupo>.opeq-s .opcargo{border-color:var(--amber)}
.opeq-pct{grid-area:pct;font-family:var(--mono);font-size:12px;color:var(--dim);text-align:right;
  font-variant-numeric:tabular-nums}
/* "meta" é o único texto do card que existe para ser notado, e por isso vira
   BLOCO: (--amber, --sobre-acento) é o par que o tools/pele.mjs mede. */
.opeq-pct.ok{background:var(--amber);color:var(--sobre-acento);font-weight:700;padding:2px 6px;
  text-transform:uppercase;font-size:10px;letter-spacing:.08em}
.opeq-s .opgav-seta{grid-area:seta;justify-self:end}
.opeq-s .opbarra{grid-area:barra;display:block;margin:0}
.opeq-c{padding:0 12px 12px;display:grid;gap:10px;min-width:0}
.opeq-c .opnums{border-top:0;padding-top:0}
.opeq-c .opacoes{margin-top:0}
.opeq-eu{font-size:12px;color:var(--dim);line-height:1.55;border-top:1.5px dashed var(--line2);
  padding-top:8px;overflow-wrap:anywhere}
.opeq-eu b{color:var(--txt)}
/* os cabos do supervisor, dentro do card dele: fundo da página, borda fina,
   sem sombra, para o olho ler a hierarquia sem precisar de recuo */
.opeq-filhos{display:grid;gap:8px;border-top:1.5px dashed var(--line2);padding-top:10px;min-width:0}
.opeq.filho{background:var(--bg);border-width:1.5px;border-color:var(--line2);box-shadow:none}
.opeq.filho.bateu{border-color:var(--amber)}
.opeq.filho>.opeq-s{grid-template-columns:32px minmax(0,1fr) auto 12px}
.opeq.filho>.opeq-s .opini{width:32px;height:32px;font-size:12px}
/* a evolução de 14 dias, em miniatura (js/68) */
.opeq-evo{min-width:0}
.opeq-evo-t{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;
  font-size:11.5px;color:var(--dim);margin-bottom:4px}
.opeq-evo-t b{font-family:var(--mono);color:var(--txt);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em}
.monevo.mini{height:44px;border-bottom:1.5px solid var(--line2)}
.opeq-perc{margin-top:0}

/* ---- o aviso de manutenção do importar ---- */
.opmanut{border:2px solid var(--amber);padding:12px 14px;display:grid;gap:6px;font-size:13px;line-height:1.5}
.opmanut b{font-family:var(--display);text-transform:uppercase;font-size:15px;letter-spacing:.02em}
.opmanut p{color:var(--dim);margin:0}

@media(max-width:430px){
  .opeq-s{column-gap:8px;padding:10px}
  .opeq-c{padding:0 10px 10px}
  .opgav>.opgav-s{padding:12px}
  .opgav>.opgav-c{padding:0 12px 12px}
}

/* ---- a cadeia SINALIZADA no seletor de lote (16/09/2026, chamado #53) ----
   O coordenador alcança supervisor e cabo no mesmo campo. Como o `<label>` do
   formulário é versalete de 10px, a linha de informação precisa sair dessa
   régua para ser lida como frase.

   A cor do alerta é `--acento-texto`, o par de texto do acento da pele, e não
   `--red`: o tema do comitê neutraliza as cores semânticas de propósito
   (`--red:#C3CDD1`, cinza) para nenhuma tela de campanha ler como semáforo. O
   símbolo carrega o aviso junto com a cor, para quem não distingue as duas. */
.opdestlinha{display:block;text-transform:none;letter-spacing:0;font-size:11.5px;
  line-height:1.45;color:var(--dim);font-weight:400}
.opdestlinha:empty{display:none}
.opdest{display:block;padding-left:8px;border-left:2px solid var(--line2)}
.opdest b{color:var(--txt);font-weight:700}
.opdest.alerta{color:var(--acento-texto,var(--amber));font-weight:700;border-left-color:var(--acento-texto,var(--amber))}
.opdest.alerta::before{content:"⚠ "}

/* o selo de quem liberou por cima do supervisor, na gaveta "em andamento" */
.opselo-coord{display:inline-block;margin-left:6px;padding:1px 6px;
  border:1.5px solid var(--line2);font-family:var(--mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--dim);white-space:nowrap}

/* ---- as listas recebidas no cartão da equipe (chamado #59, 16/09/2026) ----
   Uma etiqueta por lista, com quanto veio de cada. Elas quebram em vez de
   rolar: o cartão já vive dentro de uma gaveta, e barra de rolagem dentro de
   gaveta no celular disputa o gesto com a rolagem da página. */
.oplistas{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:6px 0 0;
  font-size:11.5px;line-height:1.5;color:var(--dim)}
.oplistas>b{flex:0 0 100%;color:var(--txt);font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.06em}
.oplista{display:inline-block;padding:1px 6px;border:1.5px solid var(--line2);
  max-width:100%;overflow-wrap:anywhere}
.oplista b{color:var(--txt);font-family:var(--mono);font-size:12px}
.oplista.mais{border-style:dashed}
.oplistas.vazia{font-style:italic}

/* ---- a busca por cabo em "Votos a validar" (chamado #86, 18/09/2026) ----
   O campo, as sugestões, a etiqueta do cabo escolhido e as duas abas. Nenhuma
   cor escrita: tudo sai do tema, como o resto do arquivo. O alvo de toque é
   44px no campo, em cada sugestão (52px) e em cada aba. A lupa é desenhada em
   CSS — um ícone em imagem custaria requisição numa tela que já faz consulta
   demais, e em SVG inline custaria o mesmo peso em cada repintura. */
.opbusca{position:relative;margin-bottom:10px;min-width:0}
.opbusca input{font:inherit;font-size:16px;min-height:44px;padding:9px 40px;
  border:2px solid var(--tinta);background:var(--bg);color:var(--txt);width:100%;min-width:0}
.opbusca input:focus{outline:none;box-shadow:2px 2px 0 var(--amber)}
.opbusca input::-webkit-search-cancel-button{display:none}
.opbusca-lupa{position:absolute;left:14px;top:50%;width:11px;height:11px;margin-top:-7px;
  border:2px solid var(--dim);border-radius:50%;pointer-events:none}
.opbusca-lupa::after{content:'';position:absolute;right:-5px;bottom:-4px;width:6px;height:2px;
  background:var(--dim);transform:rotate(45deg)}
.opbusca-x{position:absolute;right:2px;top:2px;bottom:2px;width:40px;color:var(--dim);
  font-size:18px;line-height:1;display:none}
.opbusca.tem .opbusca-x{display:block}

/* as sugestões: um cabo por linha, com quantos votos dele estão parados */
.opsug{border:2px solid var(--line2);border-top:0;background:var(--bg3);max-height:280px;overflow:auto}
.opsug button{display:flex;width:100%;gap:10px;align-items:center;min-height:52px;padding:8px 12px;
  text-align:left;border-bottom:1.5px dashed var(--line2)}
.opsug button:last-child{border-bottom:0}
.opsug button:hover,.opsug button:focus-visible{background:var(--acento-fundo);outline:none}
.opsug .ini{width:30px;height:30px;flex-shrink:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:11px;font-weight:700;background:var(--bg);
  border:1.5px solid var(--line2)}
.opsug .qn{flex:1 1 auto;min-width:0;display:grid;gap:2px}
.opsug .qn b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opsug .qn span{font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.opsug-n{font-family:var(--mono);font-size:12px;font-weight:700;flex-shrink:0;padding:2px 7px;
  border:1.5px solid var(--acento-texto,var(--amber));color:var(--acento-texto,var(--amber));
  font-variant-numeric:tabular-nums}
.opsug-n.zero{border-color:var(--line2);color:var(--dim)}

/* o cabo escolhido, e o X que devolve a fila inteira */
.opescolhido{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;min-width:0;
  border:2px solid var(--amber);background:var(--acento-fundo);padding:8px 10px;margin-bottom:10px}
.opescolhido .nome{font-family:var(--display);font-size:17px;font-weight:800;text-transform:uppercase;
  flex:1 1 140px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.1}
.opescolhido .mini{flex:1 0 100%;font-family:var(--mono);font-size:10.5px;color:var(--dim);
  overflow-wrap:anywhere}
.opescolhido .sai{min-height:44px;min-width:44px;flex-shrink:0;font-size:18px;color:var(--txt)}

/* as duas abas do cabo escolhido */
.opabas{display:flex;flex-wrap:wrap;margin:2px 0 10px;border-bottom:2px solid var(--line2)}
.opabas button{min-height:44px;padding:8px 12px;font-family:var(--display);font-size:13px;
  font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--dim);
  border-bottom:3px solid transparent;margin-bottom:-2px}
.opabas button.on{color:var(--txt);border-bottom-color:var(--amber)}
.opabas button:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.opabas .n{font-family:var(--mono);font-size:11px;margin-left:6px;color:var(--dim);
  font-variant-numeric:tabular-nums}
.opabas button.on .n{color:var(--acento-texto,var(--amber))}

/* o estado do contato na lista "todos os contatos" */
.optag{font-family:var(--mono);font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;border:1.5px solid var(--line2);color:var(--dim);padding:2px 6px;
  flex-shrink:0;white-space:nowrap}
.optag.voto{border-color:var(--acento-texto,var(--amber));color:var(--acento-texto,var(--amber))}
.optag.val{border-color:var(--txt);color:var(--txt)}

/* ===== css/97-ranking.css ===== */
/* ---------- RANKING DOS CABOS (20/09/2026) ----------
   A aba criada por js/72-ranking.js. Pele do comitê (V3): massa e bloco, sem
   raio, sem sombra, sem contorno. Celular primeiro; movimento só em transform
   e opacity, e `prefers-reduced-motion` desliga tudo.

   As cores saem dos tokens da pele. `--violet` só existe no comitê, então todo
   uso dele traz o valor de reserva — as outras 28 peles carregam este arquivo
   igual. */

/* ---------- o chassi (21/09/2026) ----------
 * TRÊS LARGURAS, TRÊS DESENHOS, e o terceiro existe por um pedido: esta tela
 * vai ficar espelhada num PC ligado a uma TV na operação, rodando o dia todo.
 * Isso muda o que "responsivo" quer dizer aqui — numa TV ninguém rola, então o
 * que não couber na primeira tela não existe.
 *
 *   até 899px   uma coluna. A FILA vem antes do feed (`order`), porque no
 *               celular o que se abre a tela para ver é quem está na frente.
 *   900-1299px  a régua vira faixa de quatro e o pódio fica lado a lado.
 *   1300px+     duas colunas: a fila ocupa a coluna alta à esquerda e rola por
 *               dentro; feed e escada ficam à direita, sem empurrar ninguém.
 *
 * ATÉ 21/09 A LARGURA PARAVA EM 1000px. Medido a 1920×1080: 920px de tela
 * vazia (48%), conteúdo de 1572px numa altura de 1080 — a escada inteira e
 * metade da fila ficavam fora, e a fila mostrava 6 nomes de 8. Numa operação
 * de 47 cabos, 41 deles nunca apareceriam. */
/* A BARRA DE KPIs DO TOPO É DO MAPA, e some aqui pela mesma razão que some na
   OPERAÇÃO: os números desta aba são outros e moram dentro dela. Numa tela que
   vai ficar espelhada o dia todo, ela custaria 70px de altura para repetir o
   que a régua já diz.

   `main` com altura de janela e `.rkwrap` com `flex:1;overflow-y:auto` é o
   mesmo chassi do `.opwrap` (97-operacao.css). Vale a pena copiá-lo em vez de
   chutar um `calc`: a altura passa a vir do app, e não de um número escrito
   aqui que erra no dia em que o cabeçalho mudar de tamanho. */
body[data-aba="ranking"] .kpibar{display:none}
body[data-aba="ranking"] main{height:calc(100dvh - var(--head))}
.rkwrap{flex:1;overflow-y:auto;min-width:0;
  padding:14px 14px 40px;max-width:1100px;margin:0 auto}

.rk-topo{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:12px}
.rk-topo h2{margin:0;font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(24px,6.5vw,38px);line-height:.95}
.rk-viva{display:flex;align-items:center;gap:6px;margin:0;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.rk-viva .sep{color:var(--line2,#3A4145)}
.rk-viva .pulso{width:7px;height:7px;flex:none;background:#4ADE80}
/* O PONTO SÓ BATE QUANDO O CANAL ESTÁ DE PÉ. Verde parado com o socket caído é
   a tela dizendo "ao vivo" sem ser, e ela vai ficar espelhada numa TV o dia
   todo. Cinza e sem batida = o conteúdo vem do relógio de 60s, que é o que de
   fato está acontecendo. A cor não é a única marca: o rótulo ao lado troca de
   palavra junto, pela mesma razão do ⚠ no alerta da OPERAÇÃO. */
.rk-viva.viva-off .pulso{background:var(--line2,#3A4145)}
.rk-viva.viva-indo .pulso{background:var(--acento2,var(--gold))}
@media(prefers-reduced-motion:no-preference){
  .rk-viva.viva-ok .pulso{animation:rk-bate 1.6s ease-in-out infinite}
  .rk-viva.viva-indo .pulso{animation:rk-bate 1s ease-in-out infinite}
}
@keyframes rk-bate{0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.72)}}

/* ---------- ATUALIZAR AGORA (22/09/2026) ----------
   O desenho é o mesmo do interruptor de TV (98-ranking-tv.css), e isso é
   deliberado: os dois moram no mesmo cabeçalho, e um botão com gramática
   própria ali leria como enfeite de outra tela. O `margin-left:auto` empurra a
   dupla para a direita — o do TV, que entra depois, já não acha espaço para
   empurrar e os dois ficam colados.

   Enquanto a leitura corre, só o ícone gira, em `transform`, como manda o
   DESIGN-DNA da pele. Abaixo de 900px o alvo vai a 44px, que é onde há dedo. */
.rk-att{margin-left:auto;align-self:center;display:inline-flex;align-items:center;
  gap:7px;min-height:34px;padding:7px 11px;background:var(--bg2);border:0;
  color:var(--dim);font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;line-height:1;cursor:pointer}
.rk-att svg{width:15px;height:15px;flex:none}
/* OS DOIS BOTÕES ANDAM JUNTOS. O do TV também tem `margin-left:auto` (ele nasceu
   sozinho no cabeçalho), e dois autos na mesma linha repartem a sobra: medido a
   1366px, o de atualizar parava em x=821 e o de TV em x=1262, um em cada canto
   do vazio. Quem empurra a dupla é o primeiro; o segundo só precisa do vão. */
.rk-att + .rk-tv-btn{margin-left:8px}
.rk-att:hover{background:var(--bg3);color:var(--txt)}
.rk-att:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.rk-att[disabled]{cursor:default;color:var(--dim2,#78868D)}
@media (max-width:899px){ .rk-att{min-height:44px;padding:11px 13px} }
/* NO CELULAR ELE FICA SÓ COM O ÍCONE, e a palavra continua existindo para quem
   usa leitor de tela (o `aria-label` e o `title` não mudam). Medido a 375px: com
   o texto, o interruptor de TV era empurrado para uma segunda linha e o
   cabeçalho crescia 44px — altura que, numa tela onde a fila é o assunto, vale
   mais que a palavra escrita ao lado de uma seta que todo mundo reconhece. */
@media (max-width:480px){ .rk-att span{display:none} .rk-att{padding:11px;min-width:44px;justify-content:center} }
@media (prefers-reduced-motion:no-preference){
  .rk-att.girando svg{animation:rk-gira .9s linear infinite}
}
@keyframes rk-gira{to{transform:rotate(360deg)}}
/* Na parede ele fica apagado junto com o interruptor de TV, pela mesma razão:
   ninguém atualiza à mão uma tela em que ninguém toca, e dois botões acesos num
   canto viram sujeira numa imagem que fica horas no ar. */
body.tv .rk-att{opacity:.22}
body.tv .rk-att:hover,
body.tv .rk-att:focus-visible{opacity:1}

/* ---------- a barra de recorte ---------- */
.rk-barra{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.rk-grupo{display:flex;gap:2px;flex:1 1 100%}
.rk-barra .chapa-chips{flex:1 1 100%}
.rk-grupo button{flex:1;min-height:44px;padding:8px 10px;background:var(--bg2);border:0;
  color:var(--dim);font-family:var(--body);font-size:12.5px;font-weight:700;cursor:pointer;
  white-space:nowrap}
.rk-grupo button[aria-checked="true"]{background:var(--bg3);color:var(--txt);
  box-shadow:inset 0 -3px 0 var(--amber)}

.rk-aviso{margin:0 0 12px;padding:8px 11px;background:var(--bg2);
  border-left:4px solid var(--acento2,var(--gold));font-size:12px;line-height:1.5;color:var(--dim)}
.rk-aviso[hidden]{display:none}
.rk-erro{margin:0 0 12px;padding:10px 13px;background:var(--bg3);
  border-left:4px solid var(--red);color:var(--red);font-size:13px;font-weight:700}
.rk-erro[hidden]{display:none}

/* ---------- o avatar, com o anel de nível ---------- */
/* O anel fica POR FORA da foto: recortar o rosto de alguém para caber num aro
   é a primeira coisa que a pessoa nota, e nunca para bem. A cor do anel é o
   nível, e é a única coisa que a cor quer dizer aqui. */
.rk-av{position:relative;display:grid;place-items:stretch;flex:none;
  width:var(--tam);height:var(--tam);background:var(--anel);padding:2px}
/* A FOTO E AS INICIAIS OCUPAM A MESMA CÉLULA DO GRID, a foto por cima. Quando
   o link vence ou o arquivo some, o 72-ranking.js remove a <img> e as iniciais
   que já estavam embaixo reaparecem. `grid-area:1/1` e não `position:absolute`:
   a <img> carrega `width`/`height` em atributo, e absoluto com esses dois
   valores faria o rosto sair do tamanho do anel. */
.rk-av .ini,.rk-av .rk-foto{grid-area:1/1;width:100%;height:100%;min-width:0;min-height:0}
.rk-av .ini{display:grid;place-items:center;
  background:#2B3033;font-family:var(--display);font-weight:900;color:#fff;
  font-size:calc(var(--tam) * .42);line-height:1}
.rk-av .rk-foto{display:block;object-fit:cover;object-position:center 28%}
.rk-av .selo{position:absolute;right:-4px;bottom:-4px;min-width:17px;height:17px;
  display:grid;place-items:center;padding:0 3px;background:var(--anel);color:#0E1011;
  font-family:var(--mono);font-size:9px;font-weight:700;line-height:1}

/* ---------- pódio ---------- */
.rk-podio{list-style:none;margin:0 0 2px;padding:0;display:grid;gap:2px}
.rk-podio li{display:grid;justify-items:center;gap:4px;padding:16px 10px 14px;
  background:var(--bg2)}
.rk-podio .coroa{height:16px;font-size:15px;line-height:1;color:var(--amber)}
.rk-podio .lug{margin-top:4px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  color:var(--dim)}
.rk-podio .nom{font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:19px;line-height:1;text-align:center}
.rk-podio .pts{font-family:var(--mono);font-size:17px;font-weight:700;
  font-variant-numeric:tabular-nums}
.rk-podio .pts small{margin-left:3px;font-size:9px;color:var(--dim)}
.rk-podio .niv{font-size:11px;color:var(--dim)}
.rk-podio .p1{background:var(--bg3);box-shadow:inset 0 -4px 0 var(--anel)}

/* ---------- a régua ---------- */
.rk-regua{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-bottom:2px}
.rk-regua div{background:var(--bg2);padding:13px 14px}
.rk-regua b{display:block;font-family:var(--mono);font-size:24px;font-weight:700;
  line-height:1.05;font-variant-numeric:tabular-nums}
.rk-regua span{display:block;margin-top:3px;font-size:11px;color:var(--dim)}

.rk-sec{padding-top:22px}
.rk-sec h3{display:flex;align-items:baseline;gap:9px;margin:0 0 10px;
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:20px;line-height:1}
.rk-sec .cont{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim2,var(--dim));font-weight:400}
.rk-exp{margin:0 0 10px;font-size:13px;line-height:1.55;color:var(--dim);max-width:66ch}
.rk-exp b{color:var(--txt)}

/* ---------- feed ---------- */
.rk-feed{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.rk-feed li{display:flex;align-items:center;gap:9px;background:var(--bg2);
  padding:10px 13px;font-size:13px}
.rk-feed .hora{flex:none;font-family:var(--mono);font-size:10px;color:var(--dim2,var(--dim))}
.rk-feed .oq{flex:1;min-width:0;color:var(--dim)}
.rk-feed .vazio{font-size:12.5px;color:var(--dim2,var(--dim))}
/* A LINHA QUE SOMA O RESTO DA RAJADA não tem nome e não é de ninguém: ela conta
   quantas pessoas ficaram de fora quando muita coisa entra de uma vez. Fica um
   tom abaixo para não competir com as linhas de gente. */
.rk-feed li.juntos .oq{color:var(--dim2,var(--dim));font-style:italic}

/* ---------- a lista ---------- */
.rk-lista{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.rk-lista li{display:flex;align-items:center;gap:10px;background:var(--bg2);padding:10px 12px;cursor:pointer}
/* a própria linha marcada: numa lista de 47 nomes, achar o seu é o primeiro
   uso da tela */
.rk-lista li.eu{background:var(--bg3);box-shadow:inset 4px 0 0 var(--amber)}
.rk-lista .pos{flex:none;min-width:22px;text-align:right;font-family:var(--mono);
  font-size:12px;font-weight:700;color:var(--dim);font-variant-numeric:tabular-nums}
.rk-lista .corpo{flex:1;min-width:0;display:grid;gap:4px}
.rk-lista .l1{display:flex;align-items:center;gap:7px;min-width:0}
.rk-lista .nome{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.rk-lista .l2{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:10.5px;
  color:var(--dim2,var(--dim))}
.rk-lista .nv{position:relative;padding-left:11px;color:var(--dim)}
.rk-lista .nv::before{content:'';position:absolute;left:0;top:50%;margin-top:-3.5px;
  width:7px;height:7px;background:var(--anel)}
.rk-lista .tag{flex:none;padding:3px 5px;background:var(--bg3);color:var(--dim);
  font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase}
.rk-lista .barras{display:grid;gap:2px}
.rk-lista .bar{display:block;height:5px;background:#23282B}
.rk-lista .bar i{display:block;height:100%}
.rk-lista .bar.meta{height:3px}
.rk-lista .bar.meta i{background:var(--line2,#3A4145)}
.rk-lista .num{flex:none;display:grid;gap:1px;text-align:right}
.rk-lista .num b{font-family:var(--mono);font-size:15px;font-weight:700;
  font-variant-numeric:tabular-nums}
.rk-lista .num small{margin-left:2px;font-size:8.5px;color:var(--dim2,var(--dim))}
.rk-lista .mini{white-space:nowrap;font-size:9.5px;color:var(--dim2,var(--dim))}
.rk-lista .d{flex:none;min-width:26px;text-align:right;font-family:var(--mono);
  font-size:10px;font-weight:700}
.rk-lista .d.sobe{color:#4ADE80}
.rk-lista .d.desce{color:var(--acento2,var(--gold))}
.rk-lista .d.igual{color:var(--line2,#3A4145)}

/* ---------- a escada ---------- */
.rk-escada{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.rk-escada li{display:flex;align-items:center;gap:11px;padding:10px 13px;
  background:var(--bg2);border-left:4px solid var(--anel)}
.rk-escada .n{flex:none;min-width:14px;font-family:var(--mono);font-size:13px;
  font-weight:700;color:var(--anel)}
.rk-escada .t{flex:1;min-width:0;font-family:var(--display);font-weight:900;
  text-transform:uppercase;font-size:17px;line-height:1}
.rk-escada .f{flex:none;font-family:var(--mono);font-size:10px;color:var(--dim)}
.rk-escada .q{flex:none;min-width:22px;text-align:right;font-family:var(--mono);
  font-size:12px;font-weight:700;color:var(--dim)}

/* ---------- telas estreitas ----------
 * Medido a 320 e 360px: o resumo "25 contatos · 9 votos" tem `nowrap` e
 * empurrava a linha para fora. Os pontos, que são o que ordena, ficam. */
@media (max-width:409px){
  .rkwrap{padding-left:10px;padding-right:10px}
  .rk-lista .mini{display:none}
  .rk-lista li{gap:8px;padding:10px}
  .rk-lista .nome{font-size:13.5px}
}

/* ---------- a ordem no celular ----------
 * A FILA SOBE E O FEED DESCE. Medido a 375×812 antes de mexer: a fila começava
 * em 936px, ou seja, uma tela e meia abaixo da dobra — quem abria o ranking no
 * telefone via pódio, régua e o feed, e precisava rolar para chegar em quem
 * está na frente, que é a pergunta que traz a pessoa aqui. O feed é olhar de
 * canto de olho, não é o motivo da visita.
 *
 * `order` e não troca no HTML: a ordem do DOM é a de leitura correta (o que
 * acabou de acontecer, depois a fila, depois a regra), e um leitor de tela
 * segue o DOM. */
.rkwrap{display:flex;flex-direction:column}
.rk-topo{order:1} .rk-barra{order:2} .rk-aviso{order:3} .rk-erro{order:4}
.rk-podio{order:5} .rk-regua{order:6}
.rk-sec.s-fila{order:7} .rk-sec.s-feed{order:8} .rk-sec.s-escada{order:9}

@media (min-width:640px){
  .rk-podio{grid-template-columns:1fr 1.15fr 1fr;align-items:end}
  /* 2 · 1 · 3 na tela, 1 · 2 · 3 na ordem de leitura */
  .rk-podio .p1{order:2;padding-top:26px;padding-bottom:22px}
  .rk-podio .p2{order:1}
  .rk-podio .p3{order:3}
  .rk-regua{grid-template-columns:repeat(4,1fr)}
  .rk-grupo{flex:0 1 auto}
  .rk-barra .chapa-chips{flex:1 1 auto}
}
@media (min-width:900px){ .rkwrap{padding:22px 22px 56px} }

/* ---------- 1300px+: duas colunas, e a fila rola por dentro ----------
 * A partir daqui a tela é de sala, não de mão: monitor da coordenação ou a TV
 * espelhada. A fila ganha a coluna alta e rola DENTRO dela, então o cabeçalho,
 * os filtros, o pódio e a régua ficam parados — numa tela que fica ligada o dia
 * todo, o número que importa não pode sair de vista quando alguém rola.
 *
 * `minmax(0,...)` nas duas colunas porque filho de grid tem `min-width:auto`: um
 * nome longo na fila empurraria a coluna e devolveria rolagem lateral. Mesma
 * armadilha que o `.mapvotos` pagou no badge de votos. */
@media (min-width:1300px){
  .rkwrap{max-width:1760px;padding:22px 26px 26px;
    display:grid;gap:0 22px;align-content:start;overflow:hidden;
    grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
    /* A FILA ATRAVESSA AS DUAS LINHAS DE BAIXO e o feed fica só na primeira:
       assim a escada encosta embaixo sem um buraco no meio da coluna, e o
       último item da fila fica na mesma linha de base do último da escada. */
    grid-template-rows:auto auto auto auto auto auto minmax(0,1fr);
    /* O PÓDIO E A RÉGUA DIVIDEM A LINHA, e isso é o conserto do print de
       21/09/2026. Ocupando a largura inteira, cada card do pódio media 541 a
       622px para conter um nome e um número: o nome ficava num canto, o número
       a meia tela de distância, e aquilo lia como tabela, não como pódio. Lado a
       lado com a régua, o card cai para perto de 350px e o conteúdo se junta.

       A régua vai para a direita porque ela é soma da equipe — e a coluna da
       direita é onde já moram as outras leituras do conjunto (o feed e a
       escada). À esquerda fica a pessoa: o pódio e a fila, na mesma coluna e na
       mesma largura, então o 1º do pódio cai exatamente sobre o 1º da fila. */
    grid-template-areas:
      "topo  topo"
      "barra barra"
      "aviso aviso"
      "erro  erro"
      "podio regua"
      "fila  feed"
      "fila  escada"}
  .rk-topo{grid-area:topo} .rk-barra{grid-area:barra}
  .rk-aviso{grid-area:aviso} .rk-erro{grid-area:erro}
  .rk-podio{grid-area:podio} .rk-regua{grid-area:regua;align-content:start}
  /* quatro números numa coluna de ~640px: duas linhas de dois, que é o que
     mantém o algarismo grande o bastante para ler de longe */
  .rk-regua{grid-template-columns:1fr 1fr}
  .rk-sec.s-fila{grid-area:fila}
  .rk-sec.s-feed{grid-area:feed}
  .rk-sec.s-escada{grid-area:escada}
  .rk-sec{min-width:0;min-height:0;display:flex;flex-direction:column}
  /* AS DUAS LISTAS ALTAS ROLAM POR DENTRO. Sem isso a página inteira rolaria e
     levaria junto o pódio e a régua, que são o que precisa ficar parado numa
     tela que fica ligada o dia todo. A barra de rolagem some da vista: numa TV
     ela é sujeira, e no monitor a roda do mouse faz o trabalho. */
  .rk-lista,.rk-escada{overflow-y:auto;min-height:0;scrollbar-width:none}
  .rk-lista::-webkit-scrollbar,.rk-escada::-webkit-scrollbar{display:none}

  /* A LINHA DA FILA ENCOLHE, e o número que justifica é quantos nomes cabem.
     A 1920×1080 a linha media 83px e a coluna 591: seis pessoas na tela. Numa
     operação de 47 cabos, quarenta e uma nunca apareceriam sem alguém rolar —
     e ninguém rola uma TV. Com as duas barras lado a lado do resumo, a linha
     cai para perto de 60px e passam dez. */
  .rk-lista li{padding:8px 14px;gap:12px}
  /* de três linhas para duas: o nível e as barras dividem a segunda */
  .rk-lista .corpo{grid-template-columns:minmax(0,1fr) minmax(110px,230px);
    align-items:center;gap:3px 14px}
  .rk-lista .l1{grid-column:1/-1}
  .rk-lista .l2{grid-column:1;flex-wrap:nowrap;overflow:hidden}
  .rk-lista .barras{grid-column:2}
}

/* ---------- O PÓDIO DEITADO, nas duas pontas ----------
 * Ele serve ao celular e à tela de sala pelo MESMO motivo, que é altura, e por
 * isso é uma regra só em vez de duas parecidas que divergem no primeiro
 * conserto feito de um lado.
 *
 * Medido empilhado: 645px no celular (três caixas de ~215) e 229px a 1920. A
 * fila começava em 903px a 375×812 — uma tela e meia abaixo da dobra, para
 * mostrar as mesmas três pessoas que abrem a fila logo em seguida. Deitado, o
 * card cai para ~70px e a fila sobe para perto da primeira dobra.
 *
 * ENTRE 640 e 1299px o pódio continua em três colunas, porque ali a largura
 * paga por ele: são três caixas lado a lado, e a altura total é a de uma só. */
@media (max-width:639px),(min-width:1300px){
  /* DUAS COLUNAS DE CONTEÚDO, e a segunda é o que conserta a tela larga: o nome
     à esquerda, o número à direita, e a barra da meta atravessando embaixo. Antes
     o card media 541 a 622px para um texto de ~100px, e o resto era vazio — três
     caixas esticadas para caber três nomes. */
  .rk-podio li{grid-template-columns:auto minmax(0,1fr) auto;justify-items:start;
    align-items:center;gap:2px 14px;padding:12px 18px}
  .rk-podio .coroa{grid-column:2;height:auto;font-size:13px}
  .rk-podio .rk-av{grid-row:1/span 5;grid-column:1}
  .rk-podio .lug{grid-column:2;margin-top:0}
  .rk-podio .nom{grid-column:2;text-align:left}
  /* o número sobe para a direita da primeira linha, alinhado pela base do nome */
  .rk-podio .pts{grid-column:3;grid-row:2/span 2;align-self:center;justify-self:end;
    white-space:nowrap}
  .rk-podio .pbar{grid-column:2/-1}
  .rk-podio .niv{grid-column:2/-1}
  .rk-podio .p1{padding-top:14px;padding-bottom:14px}
}

/* ---------- a barra da meta no pódio ----------
 * Mesma gramática da fila: trilho apagado, preenchimento na cor do nível. Ela
 * só é desenhada quando existe meta (o JS não a emite no recorte TOTAL), então
 * não há barra sem régua. */
.rk-podio .pbar{display:block;width:100%;height:8px;background:#2E3438;margin-top:5px}
.rk-podio .pbar i{display:block;height:100%;min-width:3px}
.rk-podio .p1 .pbar{height:10px}
/* O TRILHO É MAIS CLARO QUE O DA FILA (#2E3438 contra #23282B), e a diferença
   tem motivo: na fila a barra é detalhe de linha, aqui ela é o desenho do card.
   Medido no print de 21/09: com o trilho da fila, a fatia roxa do nível 3 (o 2º
   e o 3º lugar) sumia no fundo e só a do 1º, laranja, aparecia — o pódio
   mostrava uma barra de três. */

/* ---------- ler de longe ----------
 * A TV fica a três ou quatro metros. O que cresce é o que decide: a posição, o
 * nome e o número. O "de 80" subiu de 9 para 12px porque ele é a régua do
 * número ao lado — sem ele, "24" não quer dizer nada. */
.rk-podio .lug{font-size:12px}
.rk-podio .pts small{font-size:12px;margin-left:4px}
.rk-podio .niv{font-size:12.5px}
/* No celular o 1º lugar continua sendo o 1º lugar: ele é o único com o fundo
   claro e a barra embaixo, e o avatar dele é o maior da lista. Deitar não pode
   custar a diferença entre quem está na frente e quem está atrás. */
@media (max-width:639px){
  .rk-podio .p1{box-shadow:inset 0 -4px 0 var(--anel),inset 4px 0 0 var(--anel)}
  .rk-podio .p1 .nom{font-size:22px}
  /* o avatar de 76/60 foi desenhado para o card empilhado, onde ele era o
     centro; deitado, quem carrega o card é o nome */
  .rk-podio .p1 .rk-av{width:62px;height:62px}
  .rk-podio .p2 .rk-av,.rk-podio .p3 .rk-av{width:48px;height:48px}
  .rk-regua div{padding:11px 13px}
  .rk-regua b{font-size:22px}
}

/* ---------- larga e BAIXA: o notebook da coordenação (1366×768) ----------
 * Largura de duas colunas com altura de 768 é a combinação mais apertada que
 * existe aqui, e ela é comum: é o notebook. Medido antes deste bloco: a linha
 * já cabia em 57px e mesmo assim só quatro pessoas apareciam, porque o pódio e
 * a régua comiam 190px do topo.
 *
 * O que encolhe é o pódio, e ele é o candidato certo: as três pessoas dele são
 * as três primeiras linhas da fila logo abaixo — em tela baixa ele repete o
 * que já está na tela, enquanto a quinta e a sexta posição não cabem. */
@media (min-width:1300px) and (max-height:900px){
  /* o tamanho do avatar é inline (`--tam`, do rkAvatar); aqui a medida é
     sobrescrita direto, sem `!important` e sem mexer no JS */
  .rk-podio .rk-av{width:52px;height:52px}
  .rk-podio .p1 .rk-av{width:62px;height:62px}
  .rk-podio li{padding:10px 16px}
  .rk-podio .nom{font-size:19px}
  .rk-podio .pts{font-size:17px}
  /* `.niv` NÃO SOME AQUI, e isso foi defeito por um dia: este bloco nasceu
     quando `.niv` era o nome do nível ("Rodando"), enfeite. Depois que o rank
     passou a medir meta, ele virou o "% da meta" -- o dado principal da tela --
     e a tela larga e baixa era justamente a da TV, onde ele mais importa.
     Medido a 1990x860: o pódio aparecia sem o percentual e sem a estrela do
     primeiro. Quem economiza altura agora é o `line-height` do bloco. */
  .rk-podio .niv{font-size:12px;line-height:1.1}
  .rk-podio .coroa{height:auto;line-height:1}
  .rk-regua div{padding:9px 14px}
  .rk-regua b{font-size:21px}
}

/* ---------- 1600px+: a tela de sala fica legível de longe ----------
 * A TV da operação é vista de três ou quatro metros, não de cinquenta
 * centímetros. O que cresce é o que se lê a distância — nome, pontos e posição;
 * o resto fica do mesmo tamanho de propósito, senão a tela vira cartaz e perde
 * a lista, que é o conteúdo. */
@media (min-width:1600px){
  .rk-topo h2{font-size:44px}
  .rk-regua b{font-size:30px}
  .rk-regua span{font-size:12.5px}
  .rk-lista li{padding:13px 16px}
  .rk-lista .nome{font-size:17px}
  .rk-lista .pos{min-width:30px;font-size:15px}
  .rk-lista .num b{font-size:19px}
  .rk-lista .l2{font-size:12px}
  .rk-podio .nom{font-size:23px}
  .rk-podio .pts{font-size:21px}
}

@media (prefers-reduced-motion:reduce){
  .rk-viva .pulso{animation:none}
}

/* ===== css/97b-crm.css ===== */
/* ---------- CRM (beta): os contatos do comitê ----------
 * Irmã da OPERAÇÃO (97-operacao.css) e do ADMINISTRATIVO: o chassi da aba
 * (`.opwrap`, `.optopo`, `.opkpis`, `.opkpi`, `.opsec`) vem de lá, e aqui
 * só entra o que aquelas duas não têm — os carimbos de qualificação, as
 * linhas de contato, a folha de filtros, a tabela e o painel da ficha.
 *
 * PREFIXO `cx-` EM TUDO, e isto é regra, não gosto: a classe `.crm` JÁ
 * EXISTE neste projeto com outro sentido (os campos extras da planilha, em
 * 96-cabo.css:108 e 97-operacao.css:307), e o bundle é um arquivo só. Duas
 * coisas diferentes com o mesmo nome de classe é um defeito esperando o dia
 * em que alguém mexer numa das duas.
 *
 * Só variáveis do tema: nenhuma cor escrita aqui fora de rgba(), para as 27
 * peles pintarem a mesma tela com a própria paleta. Onde o token de acento
 * pode não existir na pele, a queda é declarada na própria linha.
 *
 * O NOME DO ARQUIVO É `97b-`, E ISSO É COMPORTAMENTO, NÃO ARRUMAÇÃO. O
 * `juntar()` do tools/build.mjs cola os CSS em ordem alfabética de nome num
 * bundle só. Enquanto este arquivo se chamou `96-crm.css` ele entrava ANTES
 * de `97-operacao.css`, e em todo elemento que carrega as duas classes a
 * especificidade empata (0,1,0) — quem vence é a última declaração, isto é,
 * o chassi. Medido no Chrome com o CSS do build: `.cx-cab{align-items:
 * flex-end}` saía `center` (de `.optopo`) e `.cx-fila-b{margin-bottom:2px}`
 * saía `14px` (de `.opsec`). Duas regras escritas de propósito, mortas sem
 * um aviso. Com `97b-` o arquivo entra depois de `97-operacao.css` e antes
 * de `98-bug.css`, e toda regra daqui que reusa o chassi passa a valer.
 * Renumerar vizinho, não: o cabeçalho do build pede número intermediário.
 *
 * Celular primeiro: 360, 390 e 430px sem rolagem lateral, alvo de toque de
 * 44px, e TODA tabela daqui dentro de um contêiner com `overflow-x:auto`
 * declarado, nunca solta — a de contatos em `.cx-tbl`, as miúdas em
 * `.cx-rola`. A diferença entre as duas é só a borda.
 */

/* A barra de KPIs do topo é do MAPA. Aqui os números são outros e moram
   dentro da própria aba, como na OPERAÇÃO e no ADMINISTRATIVO. */
body[data-aba="crm"] .kpibar{display:none}
body[data-aba="crm"] main{height:calc(100dvh - var(--head))}

/* `.cx-wrap` anda junto com `.opwrap`: o padding, a rolagem e o h2 vêm de lá.
   O `position:relative` NÃO contém o painel da ficha nem a folha de filtros
   (o comentário anterior dizia isso e estava errado): os dois são
   `position:fixed`, resolvem contra a viewport, ignoram ancestral
   posicionado, e a raiz deles pendura em `#pane-crm`, não aqui. Eles cobrem
   o app inteiro de propósito, inclusive o header — ver `.cx-folha,.cx-painel`
   lá embaixo. O que `relative` faz aqui é ser o bloco de referência de
   qualquer `position:absolute` DENTRO da aba, que hoje é só o `.cx-sr`. */
.cx-wrap{position:relative}
.cx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cx-dim{color:var(--dim)}
.cx-num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.cx-rot{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:700}
.cx-nota{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);line-height:1.5}
.cx-ctx{font-family:var(--mono);font-size:11px;line-height:1.6;letter-spacing:.04em;color:var(--dim);margin-bottom:14px}
.cx-ctx b{color:var(--txt);font-weight:700}
.cx-mk{background:var(--acento-fundo,var(--bg3));color:var(--acento-texto,var(--txt));padding:0 1px}

/* ---- sub-navegação da aba ---- */
.cx-nav{display:flex;gap:2px;overflow-x:auto;margin:0 0 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cx-nav::-webkit-scrollbar{display:none}
.cx-nav button{flex:0 0 auto;min-height:44px;padding:0 14px;border:2px solid var(--tinta);background:var(--bg2);
  color:var(--dim);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:6px}
.cx-nav button[aria-selected="true"]{background:var(--amber);color:var(--sobre-acento,var(--tinta))}
.cx-nav .cx-ct{font-weight:500;font-variant-numeric:tabular-nums}

/* ---- cabeçalho da seção, com o selo beta ---- */
.cx-cab{align-items:flex-end}
.cx-tit{display:flex;align-items:center;gap:8px;min-width:0}
.cx-beta{flex:none;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:var(--acento2,var(--amber));color:var(--sobre-acento2,var(--tinta));padding:3px 5px}
.cx-acoes-cab{display:flex;flex-wrap:wrap;gap:4px;align-items:center}

/* ---- controles ---- */
.cx-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 14px;
  border:2px solid var(--line2);background:var(--bg2);color:var(--txt);
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.cx-btn:hover{background:var(--bg3)}
.cx-btn.cx-pri{background:var(--amber);color:var(--sobre-acento,var(--tinta));border-color:var(--amber)}
.cx-btn[disabled]{color:var(--dim);cursor:not-allowed}
.cx-mais{width:100%;margin-top:2px}
.cx-lk{min-height:44px;display:inline-flex;align-items:center;padding:0 2px;color:var(--acento-texto,var(--txt));
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:underline;text-underline-offset:3px}
.cx-seg{display:inline-flex;gap:2px}
.cx-seg button{min-height:44px;padding:0 12px;border:2px solid var(--line2);background:var(--bg2);color:var(--txt);
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.cx-seg button[aria-pressed="true"]{background:var(--txt);color:var(--bg)}
.cx-gp{display:flex;align-items:center;gap:8px;padding-left:10px;border:2px solid var(--line2);background:var(--bg2)}
.cx-gp select{min-height:44px;border:0;background:var(--bg);color:var(--txt);font-size:16px;padding:0 8px;max-width:150px}
/* O PLACEHOLDER É DECLARADO, e não herdado. Medido em 20/09 na pele do
   comitê: sem esta linha ele sai no cinza padrão do Chrome (#757575) sobre a
   superfície translúcida do tema e dá 4.33:1 — abaixo do AA por pouco, e é
   ele que diz o que se digita ali. `opacity:1` porque o Firefox apaga o
   placeholder por conta própria. */
.cx-in::placeholder{color:var(--dim);opacity:1}
.cx-in{width:100%;min-height:48px;border:2px solid var(--line2);background:var(--bg);color:var(--txt);
  font-size:16px;font-family:var(--body);padding:0 14px}
.cx-busca{display:block;margin-bottom:10px}
.cx-chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px}
.cx-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:0;
  background:var(--acento-fundo,var(--bg3));color:var(--txt);font-size:13.5px}
.cx-chip .cx-x{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--acento-texto,var(--dim))}
.cx-chip.cx-limpa,.cx-chip.cx-cruz{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.cx-chip.cx-limpa{background:transparent;border:2px solid var(--line2)}
.cx-chip.cx-cruz{background:var(--txt);color:var(--bg)}
.cx-selo-txt{align-self:center;padding-left:6px}

/* ---- carimbos: ação, etapa, nota e temperatura ---- */
.cx-bd{display:inline-flex;align-items:center;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:5px 7px;white-space:nowrap;border:1px solid var(--line2);color:var(--dim)}
.cx-bd.cx-q{border-color:var(--acento2-texto,var(--acento2,var(--line2)));color:var(--acento2-texto,var(--acento2,var(--txt)))}
.cx-bd.cx-v{background:var(--acento-fundo,var(--bg3));color:var(--acento-texto,var(--txt));border-color:transparent}
.cx-bd.cx-m{background:var(--acento2,var(--amber));color:var(--sobre-acento2,var(--tinta));border-color:transparent}
.cx-bd.cx-f{background:var(--txt);color:var(--bg);border-color:transparent}
.cx-bd.cx-x{text-decoration:line-through}
.cx-bd.cx-cas{background:var(--bg3);color:var(--txt);border-color:transparent}
.cx-bd.cx-ac{background:var(--txt);color:var(--bg);border-color:transparent}
.cx-bd.cx-tquente{border-color:var(--acento2-texto,var(--acento2,var(--line2)));color:var(--acento2-texto,var(--acento2,var(--txt)))}
.cx-bd.cx-tmorno{color:var(--txt)}
/* ---- o score (076): medidor dentro, SCORE em cima, valor embaixo ----
   `--c` vem do JS (crmScoreCor), do vermelho em 0 ao verde em 1000. O fundo
   declarado antes do color-mix é o degrau de quem não tem color-mix: o selo
   continua legível, só sem a tinta de fundo. */
.cx-score{display:inline-grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:6px;align-items:center;
  min-height:44px;min-width:78px;padding:5px 9px 5px 7px;border:1px solid var(--c,var(--line2));
  background:var(--bg3);background:color-mix(in oklab,var(--c,var(--bg3)) 16%,var(--bg2));flex-shrink:0;vertical-align:middle;text-align:left}
.cx-score svg{grid-row:1 / span 2;width:22px;height:22px;display:block}
.cx-sc-arco{fill:none;stroke:var(--c,var(--dim));stroke-width:2.2;stroke-linecap:round}
.cx-sc-ag{transform-origin:12px 15px}
.cx-sc-ag line{stroke:var(--txt);stroke-width:2;stroke-linecap:round}
.cx-sc-ag circle{fill:var(--txt)}
.cx-sc-r{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);line-height:1}
.cx-sc-v{font-family:var(--display);font-size:22px;font-weight:800;line-height:1;letter-spacing:.02em;color:var(--c,var(--txt))}
/* o zero: cheio de alerta, diferente de todos os outros */
.cx-score.cx-zero{background:var(--zap-alerta,#FF4D4D);border-color:var(--zap-alerta,#FF4D4D)}
.cx-score.cx-zero .cx-sc-r,.cx-score.cx-zero .cx-sc-v{color:var(--tinta,#0E1011)}
.cx-score.cx-zero .cx-sc-arco,.cx-score.cx-zero .cx-sc-ag line{stroke:var(--tinta,#0E1011)}
.cx-score.cx-zero .cx-sc-ag circle{fill:var(--tinta,#0E1011)}
.cx-sc-partes{display:block;margin-top:4px;color:var(--dim);font-size:13px;line-height:1.35}
.cx-bdz{display:flex;flex-wrap:wrap;gap:4px;align-items:center}

/* ---- fila do dia e os números de cima ---- */
.cx-fila-b{margin-bottom:2px}
.cx-fila{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.cx-fx{background:var(--bg);padding:12px;display:grid;gap:4px;align-content:space-between;min-height:84px;min-width:0;text-align:left}
.cx-fx:hover{background:var(--bg3)}
.cx-fx .cx-l{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);line-height:1.3}
.cx-fx .cx-v{font-family:var(--display);font-size:32px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:var(--txt)}
.cx-fx:first-child .cx-v{color:var(--acento-texto,var(--amber))}
.cx-numeros{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;margin:2px 0 14px}
.cx-nmx{background:var(--bg2);border:2px solid var(--tinta);padding:12px;display:grid;gap:3px;min-height:64px;align-content:center;min-width:0;text-align:left}
.cx-nmx:hover{background:var(--bg3)}
.cx-nmx.cx-fixo{cursor:default}
.cx-nmx b{font-family:var(--display);font-size:26px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}

/* ---- blocos e barras ---- */
.cx-grade2{display:grid;grid-template-columns:minmax(0,1fr);gap:2px}
.cx-bloco-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.cx-barras{display:grid;gap:12px}
.cx-barra{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:baseline}
.cx-barra .cx-t{font-size:13.5px;min-width:0;overflow-wrap:anywhere}
.cx-barra .cx-n{font-family:var(--mono);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.cx-barra .cx-tr{grid-column:1/-1;height:10px;background:var(--bg3)}
.cx-barra .cx-tr i{display:block;height:100%;background:var(--dim2)}
.cx-barra.cx-par{padding-top:10px;border-top:1px dashed var(--line2)}
.cx-barra.cx-par .cx-tr i{background:var(--acento2,var(--amber))}
.cx-ritmo{display:none}
.cx-cols7{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;align-items:end;height:92px}
.cx-cols7 div{display:grid;align-content:end;gap:2px;height:100%;min-width:0}
.cx-cols7 i{display:block;background:var(--dim2);min-height:2px}
.cx-cols7 span{font-family:var(--mono);font-size:10px;text-align:center;font-variant-numeric:tabular-nums}
.cx-cols7-d{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.cx-cols7-d span{font-family:var(--mono);font-size:9.5px;color:var(--dim);text-align:center}
.cx-serie{display:grid;gap:8px;min-width:0}
.cx-mini{width:100%;border-collapse:collapse;font-size:13.5px}
.cx-mini th{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
  text-align:right;padding:6px 4px;border-bottom:1px solid var(--line)}
.cx-mini th:first-child,.cx-mini td:first-child{text-align:left}
.cx-mini td{padding:6px 4px;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* O ALVO DE TOQUE DO NOME É 44px, E O NOME QUEBRA. Ele nasceu com
   `white-space:nowrap`, e nome de cabo é livre: com 35 caracteres
   ("MARIA DAS GRAÇAS DE OLIVEIRA SANTOS") a largura mínima da tabela virava
   442px contra 329px úteis a 360px de viewport, e estourava também a 390 e a
   430. Com 20 caracteres já estourava a 360. `overflow-wrap:anywhere` deixa o
   nome se partir; o `.cx-rola` embaixo é o cinto de segurança para o resto. */
.cx-mini td .cx-lk{min-width:44px;overflow-wrap:anywhere}
/* O CONTÊINER DE TODA TABELA MIÚDA. Irmão do `.cx-tbl`, sem a borda: a tabela
   de contatos é um bloco com moldura, estas moram DENTRO de um `.opsec` que
   já tem a sua. Tabela solta é tabela que corta coluna no celular. */
.cx-rola{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}

/* ---- linhas de contato ---- */
.cx-grupo{margin-bottom:18px}
/* A CHAVE DE ORIGEM (01/10/2026): Todos / Com ficha / Só número, no lugar
   das duas colunas Fichas e Números. Número grande em cima, rótulo embaixo;
   o apertado é o bloco cheio, como o .cx-seg. 52 px de alvo de toque. */
.cx-orig{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin-bottom:6px}
.cx-orig button{min-height:52px;padding:6px 10px;border:2px solid var(--line2);background:var(--bg2);color:var(--txt);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:3px;min-width:0;text-align:left}
.cx-orig button b{font-family:var(--display);font-size:19px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.cx-orig button span{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cx-orig button[aria-pressed="true"]{background:var(--txt);color:var(--bg);border-color:var(--txt)}
.cx-orig-pe{min-height:8px;margin-bottom:4px}
/* o selo da linha de número na lista única: tracejado, para não ser lido
   como mais uma ação nem como situação */
.cx-bd.cx-num{border-style:dashed;border-color:var(--txt);color:var(--txt)}
.cx-lista{display:grid;gap:2px}
.cx-it{width:100%;text-align:left;background:var(--bg2);border:2px solid var(--tinta);padding:10px 12px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;min-height:64px;align-items:center;min-width:0}
.cx-it:hover{background:var(--bg3)}
.cx-it .cx-nm{font-weight:700;font-size:14.5px;min-width:0;overflow-wrap:anywhere;color:var(--txt)}
.cx-it .cx-mt{grid-column:1/-1;font-size:12.5px;color:var(--dim);min-width:0;overflow-wrap:anywhere}
.cx-it .cx-dir{justify-self:end;text-align:right}
/* [076] com a caixa de marcar da barra de seleção (65b) a linha tinha três
   filhos numa grade de duas colunas, e o score descia para uma linha própria.
   Com o selo maior isso ficou à vista: caixa, nome e score na mesma linha. */
.cx-it:has(> .cxa-pick){grid-template-columns:auto minmax(0,1fr) auto}
.cx-it:has(> .cxa-pick) .cx-nm{text-align:left}
.cx-it .cx-bdz{grid-column:1/-1}
.cx-tempo{font-family:var(--mono);font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.cx-mtd{font-family:var(--mono);font-size:11.5px;line-height:1.6;letter-spacing:.02em;color:var(--dim);font-variant-numeric:tabular-nums}
.cx-vazio-l{padding:12px 0;font-size:13px}
.cx-esq{background:var(--bg2);height:64px;border:2px solid var(--tinta)}
.cx-esq-k{height:78px}
.cx-estado{background:var(--bg2);border:2px solid var(--tinta);padding:22px 14px;display:grid;gap:10px;justify-items:start}
.cx-estado h3{font-family:var(--display);font-size:20px;font-weight:800;text-transform:uppercase}
.cx-estado p{font-size:13.5px;line-height:1.5;color:var(--dim)}
.cx-erro{border-left:4px solid var(--acento2,var(--amber))}
.cx-aviso{position:fixed;left:12px;right:12px;bottom:14px;z-index:60;max-width:520px;margin:0 auto;
  background:var(--txt);color:var(--bg);padding:12px 14px;font-size:13.5px;font-weight:600;line-height:1.45}

/* ---- abas de Atenção e da ficha ---- */
.cx-abas{display:flex;gap:2px;overflow-x:auto;border-bottom:2px solid var(--bg2);margin-bottom:12px;scrollbar-width:none}
.cx-abas::-webkit-scrollbar{display:none}
.cx-abas button{flex:0 0 auto;min-height:44px;padding:0 10px;background:transparent;color:var(--dim);
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:6px;box-shadow:inset 0 -3px 0 transparent}
.cx-abas button[aria-selected="true"]{color:var(--txt);box-shadow:inset 0 -3px 0 var(--amber)}
.cx-abas .cx-ct{font-weight:500;font-variant-numeric:tabular-nums}

/* ---- listas ---- */
.cx-lst-l{background:var(--bg2);border:2px solid var(--tinta);padding:14px;display:grid;gap:10px;min-width:0}
.cx-lst-l .cx-lcab{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
.cx-lst-l h3{font-family:var(--display);font-size:19px;font-weight:800;text-transform:uppercase;min-width:0;overflow-wrap:anywhere}
.cx-lst-l .cx-tot{margin-left:auto;font-family:var(--display);font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}
.cx-lst-q{font-size:12.5px}
.cx-pilha{display:flex;height:12px;background:var(--bg3);gap:2px}
.cx-pilha i{display:block;height:100%}
.cx-p-livre{background:var(--line2)}
.cx-p-rep{background:var(--dim)}
.cx-p-cabo{background:var(--acento2,var(--amber))}
.cx-p-ficha{background:var(--acento-texto,var(--amber))}
.cx-p-desc{background:transparent;border:1px solid var(--line2)}
.cx-leg{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--dim)}
.cx-leg span{display:inline-flex;align-items:center;gap:6px}
.cx-leg i{width:12px;height:12px;display:inline-block;flex:none}
.cx-leg b{color:var(--txt);font-variant-numeric:tabular-nums}
.cx-fr-g{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.cx-fr-c{min-width:0;display:grid;gap:6px;align-content:start}

/* ---- níveis ---- */
.cx-cadeia-d{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;list-style:none}
.cx-degrau{background:var(--bg);border:2px solid var(--tinta);padding:10px 12px;display:grid;gap:3px;min-width:0}
.cx-degrau .cx-l{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.cx-degrau .cx-v{font-family:var(--display);font-size:30px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.cx-degrau .cx-d{font-size:12px;color:var(--dim)}
.cx-degrau[aria-current="step"]{background:var(--acento-fundo,var(--bg3))}
.cx-degrau[aria-current="step"] .cx-l{color:var(--acento-texto,var(--txt))}
.cx-base-l{margin-top:10px;font-size:13px;color:var(--dim)}
.cx-base-l b{color:var(--txt);font-variant-numeric:tabular-nums}
.cx-sec-h3{font-family:var(--display);font-size:17px;font-weight:800;text-transform:uppercase;margin:18px 0 8px;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
/* A PESSOA VIROU GAVETA (22/09/2026). Fechada, ela mostra nome, de quem
   depende e as tres contas que decidem se vale abrir. Aberta, os oito KPIs e
   a tabela dos cabos. `<details>` nativo, sem uma linha de JS -- e por isso o
   marcador padrao do navegador some e o sinal de aberto/fechado e escrito
   aqui, para nao depender do triangulo de cada motor. */
.cx-pessoa{margin-bottom:2px}
.cx-pessoa-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;min-height:44px;
  padding:4px 0 4px 22px;position:relative;cursor:pointer;list-style:none}
.cx-pessoa-cab::-webkit-details-marker{display:none}
/* O SINAL DE ABRIR E DESENHO, NAO GLIFO. A primeira volta usou o menos
   tipografico (U+2212) e a fonte mono da pele nao tem o desenho dele: saiu
   um retangulo vazio na tela. Duas barras em CSS puro nao dependem de
   fonte nenhuma, e valem igual nas 27 peles. */
.cx-pessoa-cab::before,.cx-pessoa-cab::after{content:"";position:absolute;background:var(--dim)}
.cx-pessoa-cab::before{left:1px;top:17px;width:13px;height:2px}
.cx-pessoa-cab::after{left:6.5px;top:11.5px;width:2px;height:13px}
.cx-pessoa[open]>.cx-pessoa-cab::after{display:none}
.cx-pessoa[open]>.cx-pessoa-cab{margin-bottom:10px}
.cx-pessoa-nm{font-family:var(--display);font-size:20px;font-weight:800;text-transform:uppercase;line-height:1.15}
.cx-rel{font-size:12.5px;color:var(--dim)}
.cx-pessoa .cx-btn{margin-top:10px}
/* as tres contas da linha fechada: o numero manda, o rotulo explica */
.cx-pr{display:flex;flex-wrap:wrap;gap:4px 12px;width:100%;font-size:12.5px;color:var(--dim)}
.cx-pr-n b{font-family:var(--display);font-size:16px;font-weight:800;color:var(--txt);
  font-variant-numeric:tabular-nums;margin-right:3px}
.cx-pr-al b{color:var(--acento2-texto,var(--acento2,var(--txt)))}
/* o numero de hoje do operador puxa o acento da pele: e a conta que a pessoa
   olha de manha, e ela precisa saltar das outras duas da mesma linha */
.cx-pr-ok b{color:var(--acento-texto,var(--txt))}
.cx-op-cab{margin:14px 0 8px}
.cx-op-cab h4{font-family:var(--display);font-size:15px;font-weight:800;text-transform:uppercase}
.cx-op-falta{border-left:3px solid var(--line2);padding:10px 12px;background:var(--bg);font-size:13.5px}

/* ---- as gavetas de panorama da HOJE ---- */
.cx-gav{margin-bottom:2px}
.cx-gav>summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;min-height:44px;
  padding:4px 0 4px 22px;position:relative;cursor:pointer;list-style:none}
.cx-gav>summary::-webkit-details-marker{display:none}
.cx-gav>summary::before,.cx-gav>summary::after{content:"";position:absolute;background:var(--dim)}
.cx-gav>summary::before{left:1px;top:17px;width:13px;height:2px}
.cx-gav>summary::after{left:6.5px;top:11.5px;width:2px;height:13px}
.cx-gav[open]>summary::after{display:none}
.cx-gav-t{font-family:var(--display);font-size:17px;font-weight:800;text-transform:uppercase}
.cx-gav-c{margin-top:12px}
/* dentro da gaveta o bloco nao repete a moldura da gaveta */
.cx-gav-c .opsec{border:0;padding:0;margin-bottom:16px;background:none}
.cx-gav-c .opsec:last-child{margin-bottom:0}

/* a composicao da base, no cabecalho de Contatos */
.cx-ctx-g{display:inline-block}
/* 44px: e um alvo de toque como qualquer outro, e a regra de celular deste
   produto nao abre excecao para controle pequeno de cabecalho. */
.cx-ctx-g>summary{display:inline-flex;align-items:center;min-height:44px;padding-right:4px;cursor:pointer;list-style:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:700}
.cx-ctx-g>summary::-webkit-details-marker{display:none}
.cx-ctx-g>summary::after{content:" +";font-weight:700}
.cx-ctx-g[open]>summary::after{content:" -";font-weight:700}

/* ---- o percurso do contato, no resumo da ficha ---- */
.cx-perc h4{font-family:var(--display);font-size:15px;font-weight:800;text-transform:uppercase}
.cx-pc{list-style:none;display:grid;gap:2px;margin-top:2px}
.cx-pc-l{background:var(--bg);border-left:3px solid var(--line2);padding:7px 10px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:2px 8px}
.cx-pc-l .cx-rot{grid-column:1/-1}
.cx-pc-l b{font-size:14px;font-weight:700;overflow-wrap:anywhere;min-width:0}
.cx-pc-d{font-family:var(--mono);font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.cx-pc-ini{border-left-color:var(--txt)}
.cx-pc-f{border-left-color:var(--txt)}
.cx-pc-q{border-left-color:var(--acento2-texto,var(--acento2,var(--line2)))}
.cx-pc-v{background:var(--acento-fundo,var(--bg3));border-left-color:var(--acento-texto,var(--txt))}
.cx-pc-v b{color:var(--acento-texto,var(--txt))}
.cx-pc-m{background:var(--acento2,var(--amber));border-left-color:var(--tinta)}
.cx-pc-m b{color:var(--sobre-acento2,var(--tinta))}
.cx-pc-x b{color:var(--dim)}
/* onde a pessoa esta AGORA fecha a lista, e e o degrau que decide a acao */
.cx-pc-ag{border-left-width:3px;border-left-color:var(--txt);background:var(--bg3)}

/* ---- a tabela, e ela NUNCA fica solta ---- */
.cx-tb-barra{display:flex;flex-wrap:wrap;gap:4px;align-items:stretch;margin:10px 0 6px}
.cx-n-tab{align-self:center;margin-left:auto;margin-bottom:0}
.cx-cols>summary{list-style:none;display:inline-flex}
.cx-cols>summary::-webkit-details-marker{display:none}
.cx-cols[open]{flex-basis:100%;order:3}
.cx-cols-p{margin-top:2px;background:var(--bg2);border:2px solid var(--tinta);padding:6px 10px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:0 12px}
.cx-cols-p label{display:flex;align-items:center;gap:10px;min-height:44px;font-size:13.5px;cursor:pointer}
.cx-cols-p input{width:18px;height:18px;flex:none;accent-color:var(--amber)}
/* `overflow-x:auto` DECLARADO: tabela solta corta coluna e some com texto no
   celular, e `overflow-x:hidden` no body esconderia o estouro sem devolver o
   conteúdo. */
.cx-tbl{overflow-x:auto;max-width:100%;border:2px solid var(--tinta);-webkit-overflow-scrolling:touch}
table.cx-grade{border-collapse:collapse;width:100%;font-size:13.5px}
.cx-grade th{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);
  text-align:left;background:var(--bg2);white-space:nowrap;padding:0}
.cx-grade th button{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;width:100%;
  font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit}
.cx-grade th[aria-sort="ascending"] button::after{content:'\25B2';font-size:8px;color:var(--acento-texto,var(--txt))}
.cx-grade th[aria-sort="descending"] button::after{content:'\25BC';font-size:8px;color:var(--acento-texto,var(--txt))}
.cx-th-fixo{display:flex;min-height:44px;align-items:center;padding:0 10px}
.cx-grade td{padding:6px 10px;border-top:1px solid var(--line);white-space:nowrap}
.cx-grade td.cx-n,.cx-grade th.cx-n{text-align:right;font-variant-numeric:tabular-nums}
.cx-grade .cx-c1{position:sticky;left:0;z-index:1;background:var(--bg);min-width:160px;max-width:210px;white-space:normal;
  box-shadow:inset -1px 0 0 var(--line)}
.cx-grade th.cx-c1{background:var(--bg2);z-index:2}
.cx-grade td.cx-c1 button{display:flex;align-items:center;min-height:44px;font-weight:700;color:var(--txt);
  text-decoration:underline;text-underline-offset:4px;text-align:left}
.cx-grade tr.cx-g td{background:var(--bg3);font-family:var(--display);font-size:15px;font-weight:800;text-transform:uppercase;padding:9px 10px}

/* ---- folha de filtros e painel da ficha: os dois cobrem a ABA ---- */
.cx-scrim{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.62)}
.cx-folha,.cx-painel{position:fixed;top:0;right:0;bottom:0;z-index:45;width:100%;background:var(--bg);
  display:flex;flex-direction:column;border-left:2px solid var(--bg2)}
.cx-folha{z-index:55}
.cx-folha-cab,.cx-painel-cab{padding:calc(12px + env(safe-area-inset-top,0px)) 14px 12px;border-bottom:2px solid var(--bg2)}
.cx-folha-cab{display:flex;align-items:center;gap:10px}
.cx-folha-cab h3,.cx-painel-cab h3{font-family:var(--display);font-size:24px;font-weight:800;text-transform:uppercase;
  line-height:1.05;overflow-wrap:anywhere}
.cx-folha-cab h3{flex:1;font-size:20px}
.cx-folha-miolo,.cx-painel-miolo{flex:1;overflow-y:auto;padding:12px 14px calc(28px + env(safe-area-inset-bottom,0px));
  display:grid;gap:2px;align-content:start}
.cx-folha-pe{display:flex;gap:2px;padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));border-top:2px solid var(--bg2)}
.cx-folha-pe .cx-btn{flex:1}
/* O pé da ficha: de volta para a aba de onde a pessoa veio (22/09/2026).
   GRADE DE DUAS COLUNAS, e não `flex` como o da folha: são quatro destinos,
   e quatro botões de 44 px lado a lado em 390 px dariam 80 px cada com o
   rótulo cortado no meio. `minmax(0,1fr)` porque item de grid nasce com
   `min-width:auto` e "Ver na rede" empurrava a folha para fora da tela. */
.cx-painel-pe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));border-top:2px solid var(--bg2)}
.cx-painel-pe .cx-btn{width:100%}
.cx-faceta{background:var(--bg2);border:2px solid var(--tinta)}
.cx-faceta>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:48px;padding:0 14px;font-weight:700;font-size:14px}
.cx-faceta>summary::-webkit-details-marker{display:none}
.cx-faceta>summary .cx-ct{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--acento-texto,var(--txt))}
.cx-ops{padding:0 14px 10px;display:grid}
.cx-ops label{display:flex;align-items:center;gap:10px;min-height:44px;font-size:13.5px;cursor:pointer;
  border-top:1px solid var(--line);min-width:0;overflow-wrap:anywhere}
.cx-ops label input{width:18px;height:18px;flex:none;accent-color:var(--amber)}
.cx-ops label .cx-n{margin-left:auto;padding-left:8px;font-family:var(--mono);font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
.cx-aviso-f,.cx-aviso.cx-aviso-f{position:static}
.cx-faceta .cx-aviso{position:static;background:transparent;color:var(--dim);font-size:12.5px;padding:8px 0;margin:0}
.cx-chave{margin:8px 0}
.cx-chave button{min-width:64px}
/* A FOLHA DE FILTROS EM DUAS COLUNAS (24/09/2026). Pedido do Rafael: as
   dezesseis gavetas saíam uma por linha e a folha virava uma lista longa.
   Fechadas, elas vão duas por linha; ABERTA, a gaveta toma a linha inteira,
   porque nome de lista, de bairro e de cabo não cabe nos ~160 px de meia
   coluna em 360 px. Só o `.cx-folha-miolo`: o `.cx-painel-miolo` divide a
   regra de cima e é a ficha, que continua em uma coluna. O que não é gaveta
   (a nota do topo, o erro da contagem) também ocupa a linha inteira.
   FLEX COM QUEBRA, e não a grade de duas colunas: medido na prévia, com a
   grade a gaveta da direita que abria descia para a linha de baixo e
   deixava a da esquerda sozinha, com meia linha vazia do lado. No flex a que
   sobra sozinha numa linha cresce até a largura inteira, e a ordem das
   gavetas na tela continua sendo a do HTML, que é a ordem do Tab.
   `calc(50% - 2px)`, e não `- 1px`: com as duas metades mais o vão de 2 px
   fechando 100% exatos, meio pixel de arredondamento já quebra a linha e cada
   gaveta volta a ocupar uma linha sozinha. A sobra de 2 px o `flex-grow` divide.
   `align-items:flex-start` para a gaveta vizinha não esticar junto com a
   aberta. O título sai em maiúsculas; o contador `.cx-ct` não, porque na
   Visão ele carrega o nome da visão escolhida.
   A VISÃO FECHADA COM CONTADOR também toma a linha inteira: o nome da visão
   ("Multiplicadores", "Já eram contato") mede até 115 px em Martian Mono 11px,
   e com o "VISÃO" do lado não cabe nos 132 px úteis de meia coluna a 360 px.
   Medido na revisão: a gaveta fechada saía "VISÃ / O" e "Multiplicad / ores".
   O título não quebra no meio da palavra (sem `overflow-wrap:anywhere`), e o
   contador encolhe com reticências se ainda faltar espaço. Abaixo de 340 px a
   meia coluna não comporta "COMPROMISSO" (110 px), e a folha volta a uma
   coluna. */
.cx-folha-miolo{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:flex-start}
.cx-folha-miolo>*{flex:1 1 100%;min-width:0}
.cx-folha-miolo>.cx-faceta{flex-basis:calc(50% - 2px)}
.cx-folha-miolo>.cx-faceta[open],
.cx-folha-miolo>.cx-faceta[data-k="visao"]:has(>summary>.cx-ct){flex-basis:100%}
.cx-faceta>summary{text-transform:uppercase}
.cx-faceta>summary .cx-ct{text-transform:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:339px){.cx-folha-miolo>.cx-faceta{flex-basis:100%}}

.cx-painel-cab .cx-topo{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.cx-painel-cab .cx-topo .cx-rot{flex:1;min-width:0}
.cx-painel-cab .cx-bdz{margin-top:8px}
.cx-painel-sub{margin-top:8px}
.cx-painel-cab .cx-abas{margin:10px -14px -12px;padding:0 14px;border-bottom:0}
.cx-passo{background:var(--acento-fundo,var(--bg3));border-left:4px solid var(--amber);padding:10px 14px;display:grid;gap:4px}
.cx-passo b{font-size:14.5px}
.cx-cx{background:var(--bg2);border:2px solid var(--tinta);padding:14px;display:grid;gap:10px}
dl.cx-kv{display:grid;gap:8px}
dl.cx-kv div{display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr);gap:10px;align-items:baseline}
dl.cx-kv dt{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
dl.cx-kv dd{font-size:13.5px;overflow-wrap:anywhere}
.cx-fase2{font-size:12.5px;line-height:1.5;color:var(--dim);padding:10px 2px}
.cx-tl-dia{display:grid;gap:6px}
.cx-tl-dia+.cx-tl-dia{margin-top:10px}
.cx-tl-dia h4{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--dim)}
.cx-tl{display:grid;gap:2px;list-style:none}
.cx-tl li{background:var(--bg);padding:8px 10px;display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;font-size:13.5px}
.cx-tl li .cx-h{font-family:var(--mono);font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
.cx-tl li.cx-pass{border-left:3px solid var(--acento2,var(--amber))}
.cx-tl li small{display:block;color:var(--dim);font-size:11.5px}
.cx-cadeia{display:grid;gap:2px;list-style:none}
.cx-cadeia li{background:var(--bg);padding:10px;display:grid;gap:3px;font-size:13.5px;border-left:3px solid var(--line2)}
.cx-sens-l{display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr);gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.cx-sens-l:first-child{border-top:0}
.cx-sens-l dt{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.cx-sens-l dd{font-family:var(--mono);font-size:12.5px;overflow-wrap:anywhere}
.cx-trava{background:var(--bg);border:2px solid var(--line2);padding:12px 14px;display:grid;gap:8px}
.cx-trava b{font-family:var(--display);font-size:18px;font-weight:800;text-transform:uppercase}

/* ---------- telas maiores ---------- */
@media (min-width:600px){
  .cx-fila{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cx-numeros{grid-template-columns:repeat(5,minmax(0,1fr))}
  .cx-fr-g{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cx-cadeia-d{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:900px){
  .cx-fila{grid-template-columns:repeat(8,minmax(0,1fr))}
  .cx-grade2{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .cx-ritmo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .cx-ritmo-t{display:none}
  .cx-folha,.cx-painel{width:460px}
}

/* ---- A FAIXA DE IDADE, dentro da folha de filtros (22/09/2026) ----
   Ela mora numa faceta como as outras, e por isso herda `.cx-faceta` e
   `.cx-ops`. O que muda e o miolo: dois campos numericos em linha, os quatro
   atalhos embaixo e a nota. Nenhuma cor escrita aqui — as 27 peles pintam
   esta tela com a paleta delas. */
.cx-idade{gap:10px;padding-top:4px}
.cx-idade-par{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cx-idade-par label{display:flex;align-items:center;gap:7px;min-height:44px;font-size:13.5px;color:var(--dim)}
/* 72px, e nao a largura cheia que .cx-in pede: sao tres digitos no maximo, e
   um campo de 100% ao lado de outro empurraria o "ate" para a linha de baixo
   em 375px. O tamanho da fonte fica em 16px porque abaixo disso o iOS da zoom
   sozinho ao focar, e a folha sai do lugar. */
.cx-idade-par .cx-in{width:72px;min-height:44px;padding:0 8px;text-align:center;
  font-family:var(--mono);font-size:16px;font-weight:700}
.cx-idade-atalhos{display:flex;flex-wrap:wrap;gap:6px}
.cx-idade-atalhos .cx-btn{min-height:44px}
/* O atalho aceso usa a mesma gramatica do resto do CRM: fundo do acento com
   o token de texto sobre acento. */
.cx-idade-atalhos .cx-btn[aria-pressed="true"]{background:var(--amber);
  color:var(--sobre-acento,var(--tinta));border-color:var(--amber)}
.cx-btn.cx-peq{padding:0 11px;font-size:12px}
.cx-idade .cx-nota{margin-top:2px}

/* ===== css/97c-passaporte.css ===== */
/* ---------- 97c-passaporte.css · a ficha curta (22/09/2026) ----------
 *
 * O painel inteiro do contato é do CRM e mora no `97b-crm.css`. Esta folha
 * veste só a FICHA CURTA, que é o que o cabo digital vê e o que aparece
 * enquanto uma zona ainda não entregou a tela dela.
 *
 * Ela nasce colada ao vocabulário do CRM de propósito (mesmo `position:fixed`
 * vindo da direita, mesmo `min-height:44px` no botão, mesmo cabeçalho em
 * versalete): quem opera vê uma ficha só, e duas gramáticas visuais para a
 * mesma coisa é o problema que o Passaporte existe para fechar.
 *
 * `z-index` 40 e 45, os mesmos do CRM: a curta e o painel nunca aparecem
 * juntos, porque quem vê um não vê o outro.
 * ------------------------------------------------------------------ */

.pp-scrim{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.62)}
.pp-folha{position:fixed;top:0;right:0;bottom:0;z-index:45;width:100%;max-width:520px;background:var(--bg);
  display:flex;flex-direction:column;border-left:2px solid var(--bg2)}
.pp-cab{padding:calc(12px + env(safe-area-inset-top,0px)) 14px 12px;border-bottom:2px solid var(--bg2)}
.pp-topo{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.pp-rot{flex:1;min-width:0;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim)}
.pp-cab h3{font-family:var(--display);font-size:24px;font-weight:800;text-transform:uppercase;
  line-height:1.05;overflow-wrap:anywhere}
.pp-sub{margin-top:8px;font-size:13px;color:var(--dim)}
.pp-miolo{flex:1;overflow-y:auto;padding:12px 14px calc(28px + env(safe-area-inset-bottom,0px));
  display:grid;gap:10px;align-content:start}
.pp-pe{display:flex;gap:2px;padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));border-top:2px solid var(--bg2)}
.pp-pe .pp-btn{flex:1}

.pp-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 14px;
  border:2px solid var(--line2);background:var(--bg2);color:var(--txt);cursor:pointer;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.pp-btn:hover{background:var(--bg3)}
.pp-forte{background:var(--amber);color:var(--sobre-acento,var(--tinta));border-color:var(--amber)}

/* `minmax(0,1fr)` na coluna do valor, e não `1fr`: item de grid nasce com
   `min-width:auto`, e um telefone longo empurrava a folha inteira para fora
   da tela em 360 px. Mesma lição do `.lock` do comitê em 13/09 e da demo do
   passaporte em 20/09. */
.pp-lista{background:var(--bg2);border:2px solid var(--tinta);padding:14px;display:grid;gap:10px}
.pp-kv{display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr);gap:10px;align-items:baseline}
.pp-kv dt{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.pp-kv dd{font-size:14px;overflow-wrap:anywhere}
.pp-dim{color:var(--dim)}
.pp-nota{font-size:12.5px;color:var(--dim);line-height:1.45}

@media (min-width:861px){
  .pp-folha{border-left:2px solid var(--line2)}
}
@media (prefers-reduced-motion:no-preference){
  .pp-folha{animation:pp-entra .18s ease-out}
}
@keyframes pp-entra{from{transform:translateX(6%);opacity:.6}to{transform:none;opacity:1}}

/* A FOLHA ABERTA ESCONDE O BOTÃO FLUTUANTE DO +1 VOTO (22/09/2026).
   `.voto-barra` é `position:fixed` no rodapé com `z-index:60`, e a folha do
   passaporte vive em 45 — o círculo do +1 Voto cobria o meio do pé da ficha,
   onde ficam os botões. Medido a 375px, com a ficha curta aberta: a barra ocupa
   de 720 a 812 e o pé começa em 742.

   Esconder a barra, e não subir a folha, porque `z-index` maior que 60 a poria
   na frente de qualquer coisa fixa que a página ganhe depois. E a folha é modal
   (tem scrim): cadastrar um voto novo por trás dela não é um caminho que exista.
   A classe sai no `passaporteFecha()`. */
body.pp-aberta .voto-barra { display: none }

/* ===== css/97d-crm-acoes.css ===== */
/* =====================================================================
 * 97d-crm-acoes.css · a barra de ação do CRM (23/09/2026, chamado #144)
 *
 * Ele entra DEPOIS do `97b-crm.css` na concatenação alfabética, que é o que
 * deixa as regras daqui vencerem sem precisar de `!important`.
 *
 * NENHUMA COR LITERAL. Tudo sai das variáveis do tema, porque a mesma tela
 * serve 27 peles e cor escrita aqui é cor errada em 26 delas.
 * ===================================================================== */

/* ---------- a caixa de seleção, dentro da linha ----------
 * Ela mora dentro de um `<button>` que ocupa a linha inteira, então precisa de
 * área de toque própria. 44px é a regra da casa, e aqui ela é ainda mais dura:
 * errar o alvo seleciona a pessoa errada e o lote sai errado. */
.cxa-pick {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  min-width: 22px;
  margin: 0 10px 0 0;
  border: 2px solid var(--dim2, #6b7280);
  border-radius: 6px;
  background: transparent;
  display: inline-block;
  position: relative;
  cursor: pointer;
}
/* o alvo de toque cresce sem a caixa crescer: 44px de área sobre 22px de
   desenho, que é o jeito de caber numa linha de lista sem engordar a linha */
.cxa-pick::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}
.cxa-pick[aria-checked="true"] {
  background: var(--acento, #EB5F2A);
  border-color: var(--acento, #EB5F2A);
}
.cxa-pick[aria-checked="true"]::before {
  content: '';
  position: absolute;
  left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid var(--bg, #0A0908);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.cxa-pick:focus-visible {
  outline: 2px solid var(--acento, #EB5F2A);
  outline-offset: 2px;
}

/* ---------- a barra ----------
 * Ela é `fixed` no rodapé porque a lista rola: uma barra que sobe junto com o
 * scroll desaparece justamente quando a pessoa terminou de escolher. */
#cxa-barra-raiz .cxa-barra {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--bg2, #14181F);
  border-top: 1px solid var(--linha, #2a2f3a);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .35);
}
.cxa-n { font: 700 15px/1.2 var(--ui, system-ui); color: var(--tinta, #E8EDEF); }

/* O SELO BETA FICA ENQUANTO A ABA OPERAÇÃO EXISTIR. Quem usa precisa saber que
   está num caminho novo com o caminho velho ao lado. */
.cxa-beta {
  font: 700 11px/1 var(--ui, system-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 7px;
  border-radius: 999px;
  border: 1px solid var(--acento-texto, #EB5F2A);
  color: var(--acento-texto, #EB5F2A);
}

.cxa-b {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--linha, #2a2f3a);
  background: var(--bg3, #1d222b);
  color: var(--tinta, #E8EDEF);
  font: 600 15px/1 var(--ui, system-ui);
  cursor: pointer;
}
.cxa-b:hover { border-color: var(--acento, #EB5F2A); }
.cxa-b:focus-visible { outline: 2px solid var(--acento, #EB5F2A); outline-offset: 2px; }
.cxa-b.cxa-ok { background: var(--acento, #EB5F2A); border-color: var(--acento, #EB5F2A); color: var(--bg, #0A0908); }
.cxa-b.cxa-x { background: transparent; }

/* ---------- o diálogo ---------- */
.cxa-dlg {
  border: 1px solid var(--linha, #2a2f3a);
  border-radius: 14px;
  background: var(--bg2, #14181F);
  color: var(--tinta, #E8EDEF);
  padding: 18px;
  width: min(92vw, 420px);
}
.cxa-dlg::backdrop { background: rgba(0, 0, 0, .55); }
.cxa-h { margin: 0 0 12px; font: 700 18px/1.2 var(--ui, system-ui); }
.cxa-lb { display: block; margin: 0 0 6px; font: 600 14px/1.2 var(--ui, system-ui); color: var(--dim, #9aa3ad); }
.cxa-sel {
  width: 100%;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--linha, #2a2f3a);
  background: var(--bg3, #1d222b);
  color: var(--tinta, #E8EDEF);
  font: 400 16px/1.2 var(--ui, system-ui);   /* 16px: abaixo disso o iOS dá zoom */
}
/* A FRASE É O CONTROLE DE VERDADE desta tela: ela diz quantos e para quem
   antes de qualquer coisa acontecer. Por isso ela tem peso de título, e não
   de legenda. */
.cxa-frase { margin: 14px 0 0; font: 600 16px/1.45 var(--ui, system-ui); }
.cxa-pe { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* ---------- o aviso do resultado ---------- */
#cxa-aviso {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  z-index: 41;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--linha, #2a2f3a);
  background: var(--bg3, #1d222b);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
#cxa-aviso[hidden] { display: none; }
.cxa-av-t { flex: 1 1 auto; font: 500 15px/1.4 var(--ui, system-ui); color: var(--tinta, #E8EDEF); }
.cxa-b.cxa-undo { min-height: 36px; padding: 0 12px; font-size: 14px; }

@media (max-width: 480px) {
  /* Em 390px os três botões não cabem na linha do contador. A barra quebra, e
     o contador fica sozinho em cima -- que é a informação que decide se a
     pessoa aperta ou não. */
  #cxa-barra-raiz .cxa-barra { gap: 6px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .cxa-n { flex: 1 0 100%; }
  .cxa-b { padding: 0 10px; font-size: 14px; }
}

/* ===== css/97e-crm-livres.css ===== */
/* =====================================================================
 * 97e-crm-livres.css · Contatos LIVRES e o Liberar lote do CRM (24/09/2026)
 *
 * Entra depois do 97b-crm.css e do 97d-crm-acoes.css na ordem alfabética, e
 * reaproveita o chassi deles (.cx-btn, .cx-in, .cx-faceta, .cxa-dlg). Nenhuma
 * cor literal: a mesma tela serve todas as peles.
 * ===================================================================== */

/* ---- a chave na folha de filtros ---- */
.cxl-tg-caixa{margin:0 0 12px;padding:2px 14px 10px;background:var(--bg2);border:2px solid var(--tinta)}
.cxl-tg{display:flex;align-items:flex-start;gap:12px;min-height:56px;padding-top:12px;cursor:pointer}
.cxl-tg input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--amber)}
.cxl-tg-t{display:grid;gap:3px;flex:1;min-width:0}
.cxl-tg-t b{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.cxl-tg-d{font-size:13px;line-height:1.4;color:var(--dim)}
.cxl-tg .cx-n{flex:none;padding-left:8px;font-family:var(--mono);font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.cxl-tg-nota{margin:8px 0 0;font-size:12.5px;line-height:1.45;color:var(--dim)}

/* Com LIVRES ligado só ficam as facetas que valem para número de lista. As
   outras continuam no HTML (a folha é refeita inteira a cada pintura) e só
   saem da vista: visão, idade, ação, nota, tipo, situação, voto, compromisso,
   origem, com quem e nível descrevem quem já saiu do estoque. */
.cx-folha.cxl-on .cx-faceta:not([data-k="temp"]):not([data-k="sexo"]):not([data-k="mun"]):not([data-k="bairro"]):not([data-k="lista"]){display:none}

.cx-chip.cxl-chip{background:var(--txt);color:var(--bg);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.cx-chip.cxl-chip .cx-x{color:var(--bg)}

/* ---- o painel do lote ---- */
.cxl-lote{display:grid;gap:10px;margin:0 0 14px;padding:12px 14px 14px;background:var(--bg2);border:2px solid var(--tinta)}
.cxl-lote-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.cxl-lote-cab h3{font-family:var(--display);font-size:17px;font-weight:800;text-transform:uppercase}
.cxl-linha{display:grid;gap:8px}
.cxl-q,.cxl-dest{display:grid;gap:6px;min-width:0}
.cxl-q .cx-in{max-width:140px}
.cxl-atalhos{display:flex;flex-wrap:wrap;gap:4px}
.cxl-atalhos .cx-btn{min-width:52px;padding:0 10px}
.cxl-atalhos .cx-btn[aria-pressed="true"]{background:var(--txt);color:var(--bg);border-color:var(--txt)}
.cxl-dest select.cx-in{padding:0 10px}
.cxl-ir{width:100%;min-height:48px;font-size:12px;white-space:normal;line-height:1.3;text-align:center}
.cxl-ir[disabled]{background:var(--bg2);border-color:var(--line2);color:var(--dim)}
.cxl-info{margin:0;font-size:13px;line-height:1.4;color:var(--dim)}
/* O ALERTA NÃO É VERMELHO. O tema do comitê neutraliza as cores semânticas de
   propósito, e o aviso da Operação para cabo sem supervisor já usa o acento
   com o símbolo por `::before` (chamado #53). O mesmo aqui. */
.cxl-info.cxl-alerta{color:var(--acento-texto,var(--txt))}
.cxl-info.cxl-alerta::before{content:'⚠ ';}

/* ---- a barra e os diálogos ---- */
/* O TEXTO DA BARRA E DO DIÁLOGO É --txt, E NÃO --tinta. O 97d escreve
   `color: var(--tinta, #E8EDEF)`, e no tema do comitê --tinta é #000: é a cor
   do contorno duro que o 97b desenha em volta de faceta e painel. Medido na
   prévia em 24/09/2026, com o tema de verdade: contador, título, frase,
   Cancelar e Limpar saíam pretos sobre #16191B, 1.19:1. O botão de confirmar
   (.cxa-ok) tem regra mais específica no 97d e continua como está (5.89:1). */
#cxa-barra-raiz .cxa-barra,.cxa-dlg,#cxa-aviso{color:var(--txt,#E8EDEF)}
.cxa-n,.cxa-h,.cxa-frase,.cxa-av-t,.cxa-b,.cxa-sel{color:var(--txt,#E8EDEF)}

.cxl-barra-nota{flex:1 0 100%;font-size:12.5px;line-height:1.35;color:var(--dim,#9aa3ad)}
.cxl-dlg-sub{margin:10px 0 0;font-size:14px;line-height:1.45;color:var(--dim,#9aa3ad)}
.cxa-b[disabled]{opacity:.55;cursor:not-allowed}

/* a linha do estoque frio não abre ficha: o cursor diz isso antes do clique */
.cx-it[data-cxlfrio]{cursor:default}

@media (min-width:720px){
  .cxl-linha{grid-template-columns:auto 1fr;align-items:end}
  .cxl-ir{width:auto;justify-self:start;padding:0 22px}
}

/* ===== css/97f-ponto.css ===== */
/* ---------- PONTO (js/75-ponto.js, migration 078) — 25/09/2026 ----------
   Portado do ponto do WowLog. Só tokens do tema: nenhuma cor escrita aqui.
   As cores de estado do WowLog (verde, âmbar, laranja piscando) viram as do
   comitê: "trabalhando" é o acento da pele (o rosa do Cícero), "pausa" e
   "bater ponto" são a segunda cor (o laranja do Mersinho), o resto é o cinza
   do texto secundário. Verde e vermelho ficam de fora pela regra de cor em
   política, a mesma que neutralizou `--green` e `--red` no tema do comitê.

   A folha copia o desenho da do +1 Voto (90-voto.css): bloco no centro no
   computador, folha que sobe de baixo no celular, faixa do acento no topo.

   CAMADAS: trava 150, folha 160/161. Acima do +1 Voto (120/121) e dos
   diálogos do app (125/126), abaixo da tela de carga (200) e da porta de
   login (300): a trava não pode cobrir o login de quem ainda não entrou. */

/* ------------------------------------------------ o botão na barra */
.pt-botao{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 11px;
  margin-right:6px;background:var(--bg3);color:var(--txt);border:0;border-radius:0;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;
  white-space:nowrap;cursor:pointer;transition:background .12s;position:relative}
.pt-botao:hover{background:var(--line)}
.pt-botao:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.pt-rel{font-variant-numeric:tabular-nums;font-size:12.5px}
.pt-rot{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.pt-rot:empty{display:none}
/* "Bater ponto": o estado que pede ação. Bloco na segunda cor, piscando. */
.pt-botao[data-estado="bater"]{background:var(--acento2,var(--amber));color:var(--sobre-acento2,var(--sobre-acento))}
.pt-botao[data-estado="bater"] .pt-luz{background:currentColor}
.pt-alerta-ic{display:inline-grid;place-items:center;width:15px;height:15px;font-size:10px;
  background:var(--acento2,var(--amber));color:var(--sobre-acento2,var(--sobre-acento))}
.pt-alerta-ic[hidden]{display:none}
.pt-botao[data-estado="bater"] .pt-alerta-ic{background:var(--sobre-acento2,var(--tinta));color:var(--acento2,var(--amber))}

/* A luz é um bloco, e não um círculo: nesta pele nada tem raio. */
.pt-luz{display:inline-block;width:8px;height:8px;flex-shrink:0;background:var(--dim2)}
[data-estado="trabalhando"] .pt-luz{background:var(--amber)}
[data-estado="pausa"] .pt-luz{background:var(--acento2,var(--dim))}
[data-estado="fechado"] .pt-luz{background:var(--line2)}
@media(prefers-reduced-motion:no-preference){
  .pt-botao[data-estado="trabalhando"] .pt-luz{animation:pt-pisca 2.4s ease-in-out infinite}
  .pt-botao[data-estado="bater"]{animation:pt-chama 1.6s ease-in-out infinite}
  @keyframes pt-pisca{0%,100%{opacity:1}50%{opacity:.35}}
  @keyframes pt-chama{0%,100%{opacity:1}50%{opacity:.7}}
}

/* ------------------------------------------------------------ a trava */
.pt-trava{position:fixed;inset:0;z-index:150;background:var(--bg);display:flex;
  align-items:center;justify-content:center;padding:16px;overflow:auto}
.pt-trava-card{width:min(420px,100%);background:var(--bg2);padding:28px 20px 18px;
  display:flex;flex-direction:column;align-items:stretch;gap:12px;text-align:center}
.pt-trava-ic{width:56px;height:56px;margin:0 auto 4px;display:grid;place-items:center;
  background:var(--bg3);color:var(--acento2,var(--amber))}
.pt-trava-ic svg{width:28px;height:28px}
.pt-trava h1{font-family:var(--display);font-size:26px;font-weight:800;line-height:1.1;color:var(--txt)}
.pt-trava-s{font-size:13.5px;color:var(--dim);line-height:1.45}
.pt-trava-pend{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 12px;
  background:var(--bg3);border-left:3px solid var(--acento2,var(--amber));text-align:left;
  font-size:13px;line-height:1.4;color:var(--txt);cursor:pointer}
.pt-trava-pend span{display:grid;place-items:center;width:18px;height:18px;flex-shrink:0;font-weight:800;
  background:var(--acento2,var(--amber));color:var(--sobre-acento2,var(--sobre-acento))}
.pt-trava-bt{min-height:54px;font-size:14px}
.pt-trava-pe{display:flex;justify-content:center;gap:4px 22px;flex-wrap:wrap}
body.pt-travado .voto-barra{display:none}

/* ------------------------------------------------------------ a folha */
.pt-fundo{position:fixed;inset:0;background:rgba(20,24,31,.55);z-index:160}
.pt-fundo[hidden]{display:none}
.pt-folha{position:fixed;z-index:161;background:var(--bg2);border:2px solid var(--tinta);
  box-shadow:6px 6px 0 var(--tinta);width:min(520px,calc(100vw - 28px));
  top:50%;left:50%;transform:translate(-50%,-50%);max-height:88dvh;overflow:auto;
  overscroll-behavior:contain}
.pt-folha[hidden]{display:none}

.pt-topo{display:flex;align-items:center;gap:6px;padding:8px 6px 8px 15px;
  border-bottom:2px solid var(--tinta);background:var(--amber);color:var(--sobre-acento);
  position:sticky;top:0;z-index:2}
.pt-voltar{min-width:44px;min-height:44px;margin-left:-11px;font-size:24px;line-height:1;
  color:var(--sobre-acento);display:grid;place-items:center;flex-shrink:0}
.pt-topo-t{min-width:0;display:flex;flex-direction:column;gap:2px}
.pt-topo h2{font-size:15px;font-weight:800;letter-spacing:.2px;line-height:1.15;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-topo-t span{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-fechar{margin-left:auto;min-width:44px;min-height:44px;font-size:22px;line-height:1;
  color:var(--sobre-acento);display:grid;place-items:center;flex-shrink:0}
.pt-corpo{padding:15px}

/* o placar do dia */
.pt-placar{background:var(--bg3);padding:14px 15px 13px;display:flex;flex-direction:column;gap:4px}
.pt-placar-e{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:8px}
.pt-grande{font-family:var(--display);font-size:48px;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:.01em;color:var(--txt)}
.pt-placar-s{font-size:12.5px;color:var(--dim)}
.pt-hoje{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:2px}
.pt-hoje div{background:var(--bg3);padding:9px 10px}
.pt-hoje span{display:block;font-size:10.5px;color:var(--dim);margin-bottom:3px}
.pt-hoje b{font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums}

.pt-acoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-top:10px}
.pt-acoes-3{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
.pt-bt{min-height:48px;padding:0 14px;background:var(--bg3);color:var(--txt);border:0;border-radius:0;
  font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  transition:background .12s}
.pt-bt:hover{background:var(--line)}
.pt-bt-p{background:var(--amber);color:var(--sobre-acento)}
.pt-bt-p:hover{background:var(--amber);filter:brightness(1.08)}
.pt-bt:disabled{opacity:.55;cursor:wait}
.pt-bt:focus-visible,.pt-lnk:focus-visible,.pt-fechar:focus-visible,.pt-voltar:focus-visible,
.pt-lapis:focus-visible,.pt-chip:focus-visible,.pt-trava-pend:focus-visible{outline:2px solid var(--txt);outline-offset:2px}

.pt-h3{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);margin:20px 0 8px}
.pt-vazio{font-size:13px;color:var(--dim)}
.pt-nota{font-size:12.5px;color:var(--dim);margin-top:10px;line-height:1.5}
.pt-nota-1{margin-top:0;margin-bottom:12px;color:var(--txt)}
.pt-ajuda{font-size:11.5px;color:var(--dim);line-height:1.45}
.pt-alerta{font-size:12.5px;line-height:1.5;margin-top:12px;padding:10px 11px;background:var(--bg3);
  border-left:3px solid var(--acento2,var(--amber));display:flex;flex-direction:column;gap:3px}
.pt-alerta span{color:var(--dim)}
.pt-alerta-dias{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.pt-chip{min-height:44px;padding:0 12px;background:var(--bg2);color:var(--txt);
  font-family:var(--mono);font-size:11.5px;font-weight:700;border:1.5px solid var(--acento2,var(--amber))}
.pt-chip:disabled{border-color:var(--line2);color:var(--dim);cursor:default}
.pt-erro{font-size:13px;line-height:1.45;margin-top:10px;color:var(--acento-texto,var(--amber));font-weight:700}
.pt-ok{font-size:13px;line-height:1.45;margin-top:10px;padding:8px 11px;background:var(--bg3);
  border-left:3px solid var(--amber)}
.pt-erro[hidden],.pt-ok[hidden]{display:none}
.pt-lgpd{font-size:11.5px;line-height:1.5;color:var(--dim);margin-top:16px;padding-top:12px;
  border-top:1.5px solid var(--line)}
.pt-recusa{padding:10px 12px;margin-bottom:12px;background:var(--bg3);border-left:3px solid var(--acento-texto,var(--amber));
  font-size:13px;line-height:1.5}
.pt-recusa b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--acento-texto,var(--amber));margin-bottom:3px}

.pt-pe{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:10px}
.pt-lnk{min-height:44px;padding:0;font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--acento-texto,var(--amber));
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;background:none;border:0}
.pt-lnk:disabled{color:var(--dim2);text-decoration:none;cursor:default}

/* --------------------------------------------- o mês de uma pessoa */
.pt-mesnav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:-6px 0 8px}
.pt-mesnav b{font-size:13px;text-align:center}
.pt-mesnav .pt-lnk{font-size:10px}
.pt-numeros{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.pt-numeros div{background:var(--bg3);padding:11px 12px}
.pt-numeros b{display:block;font-family:var(--mono);font-size:19px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;margin-bottom:5px}
.pt-numeros span{font-size:11px;color:var(--dim);line-height:1.3;display:block}
.pt-numeros .pt-dif b{color:var(--acento2-texto,var(--acento2,var(--amber)))}

.pt-mat{margin-top:12px;background:var(--bg3);padding:12px;display:flex;flex-wrap:wrap;
  align-items:flex-end;gap:10px 12px}
.pt-mat p{font-size:12.5px;line-height:1.5;color:var(--dim);flex:1 1 100%}
.pt-mat-l{display:flex;flex-direction:column;gap:4px;flex:1 1 150px}
.pt-mat label,.pt-mat-abrir label{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim)}
.pt-mat select,.pt-mat-abrir input{min-height:44px;padding:0 10px;background:var(--bg);color:var(--txt);
  border:1.5px solid var(--line2);border-radius:0;font-size:16px;width:100%}
.pt-mat .pt-mat-trava{flex:1 1 100%;display:flex;align-items:center;gap:10px;min-height:44px;
  font-family:var(--body);font-size:13px;letter-spacing:0;text-transform:none;color:var(--txt);cursor:pointer}
.pt-mat-trava input{width:20px;height:20px;accent-color:var(--amber);flex-shrink:0}
.pt-mat-bts{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 100%}
.pt-mat-bts .pt-bt{flex:1 1 150px}
.pt-mat-abrir{flex:1 1 100%;display:flex;flex-direction:column;gap:6px}

.pt-dias{list-style:none}
.pt-dias li{display:grid;grid-template-columns:1fr auto;gap:3px 12px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:12.5px;position:relative;padding-right:48px}
.pt-dias li:last-child{border-bottom:0}
.pt-dias li.pt-apagado{opacity:.55}
.pt-dias b{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.pt-h,.pt-p{font-family:var(--mono);font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.pt-p{text-align:right}
.pt-tags{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:4px}
.pt-tags:empty{display:none}
.pt-tags em,.pt-selo{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 6px;background:var(--bg3);
  color:var(--acento2-texto,var(--acento2,var(--amber)))}
.pt-ver[data-v="bate"]{color:var(--txt)}
.pt-ver[data-v="sem_dados"]{color:var(--dim)}
.pt-ver[data-v="ponto_maior"],.pt-ver[data-v="plataforma_maior"]{color:var(--acento-texto,var(--amber))}
.pt-lapis{position:absolute;right:0;top:50%;transform:translateY(-50%);width:44px;height:44px;
  display:grid;place-items:center;font-size:17px;color:var(--acento-texto,var(--amber));background:none;border:0;cursor:pointer}

.pt-pedidos{list-style:none;display:flex;flex-direction:column;gap:8px}
.pt-ped{background:var(--bg3);padding:11px 12px;display:flex;flex-direction:column;gap:5px;font-size:12.5px}
.pt-ped-t{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.pt-ped-t span{color:var(--dim)}
.pt-selo{background:var(--bg2)}
.pt-selo[data-estado="aprovado"]{color:var(--txt)}
.pt-selo[data-estado="recusado"]{color:var(--acento-texto,var(--amber))}
.pt-selo[data-estado="substituido"]{color:var(--dim)}
.pt-ped-c{font-family:var(--mono);font-size:11px;color:var(--dim);line-height:1.5}
.pt-ped-c b{color:var(--txt);font-weight:700}
.pt-ped q{color:var(--txt);font-style:italic;quotes:'“' '”'}
.pt-ped-n{font-size:12px;color:var(--dim)}
.pt-ped > .pt-bt{align-self:flex-start;margin-top:4px}
.pt-analise{margin-top:8px;padding-top:10px;border-top:1.5px solid var(--line)}

.pt-gav{margin-top:14px;border-top:1.5px solid var(--line)}
.pt-gav summary{min-height:44px;display:flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  list-style:none}
.pt-gav summary::-webkit-details-marker{display:none}
.pt-gav summary::after{content:'+';margin-left:auto;font-size:16px;color:var(--dim)}
.pt-gav[open] summary::after{content:'–'}
.pt-gav summary span{color:var(--dim);font-weight:400}
.pt-log{list-style:none;display:flex;flex-direction:column;gap:8px;padding-bottom:6px}
.pt-log li{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:12.5px}
.pt-log time{font-family:var(--mono);font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
.pt-log small{flex:1 1 100%;font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.pt-log q{flex:1 1 100%;color:var(--dim);font-style:italic;quotes:'“' '”'}
.pt-log-ok{color:var(--txt);font-weight:700}
.pt-log-no{color:var(--acento-texto,var(--amber));font-weight:700}

.pt-form{display:flex;flex-direction:column;gap:6px;padding-bottom:4px}
.pt-form label{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);margin-top:6px}
/* 16px nos campos: abaixo disso o Safari do iPhone dá zoom na tela ao focar */
.pt-form input,.pt-form textarea{width:100%;min-height:44px;padding:0 10px;background:var(--bg);color:var(--txt);
  border:1.5px solid var(--line2);border-radius:0;font-size:16px;font-family:var(--body)}
.pt-form textarea{padding:10px;min-height:76px;resize:vertical;line-height:1.4}
.pt-form input:disabled{opacity:.7}
.pt-form input:focus,.pt-form textarea:focus{outline:2px solid var(--amber);outline-offset:0}
.pt-form-g{display:grid;grid-template-columns:1fr 1fr;gap:0 8px}
.pt-previa{font-size:13px;color:var(--txt);min-height:1.2em}
.pt-previa-erro{color:var(--acento-texto,var(--amber));font-weight:700}

/* ------------------------------------------------ a EQUIPE, para o 80+ */
.pt-eq-st{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 7px;font-family:var(--mono);font-size:11px;
  color:var(--txt)}
.pt-eq-st[data-estado="off"]{color:var(--dim)}
.pt-eq-st b{color:var(--acento2-texto,var(--acento2,var(--amber)))}
.pt-eq .pt-eq-bt{min-height:44px;margin-left:auto}
.pt-eq-fila{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;margin:12px 0 4px;
  padding:10px 14px;background:var(--bg3);border-left:4px solid var(--acento2,var(--amber));
  text-align:left;color:var(--txt);cursor:pointer}
.pt-eq-fila b{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--acento2-texto,var(--acento2,var(--amber)))}
.pt-eq-fila span{font-size:13.5px;font-weight:700}
.pt-eq-fila i{margin-left:auto;font-style:normal;font-size:22px;color:var(--dim)}
.pt-eq-fila:focus-visible{outline:2px solid var(--txt);outline-offset:2px}

/* ------------------------------------------ o raio e a localização */
.pt-trava-espera{display:flex;flex-direction:column;gap:3px;text-align:left;padding:10px 12px;background:var(--bg3);
  border-left:3px solid var(--acento2,var(--amber));font-size:13px;line-height:1.45}
.pt-trava-espera span{color:var(--dim)}
.pt-alerta-neg{text-align:left;font-size:13px;line-height:1.5;padding:10px 12px;background:var(--bg3);
  border-left:3px solid var(--acento-texto,var(--amber))}
.pt-trava-local{font-size:12px;line-height:1.5;color:var(--dim)}
.pt-trava-perm{font-size:12.5px;line-height:1.5;color:var(--acento-texto,var(--amber));font-weight:700;text-align:left}
.pt-trava-perm[hidden]{display:none}
.pt-selo-marca{background:var(--acento2,var(--amber));color:var(--sobre-acento2,var(--sobre-acento))}
.pt-ped > .pt-lnk{align-self:flex-start}
/* sobre o cartão (--bg3) o acento dava 4,51:1, no limite; o link do mapa vai na cor do texto */
.pt-ped .pt-lnk{color:var(--txt)}

/* ------------------------------------------------ o ponto no perfil */
/* Retraído: fechado ele é uma linha do cartão, no mesmo peso do resto. */
.pt-perfil{margin-top:10px;border-top:1.5px dashed var(--line2)}
.pt-perfil summary{min-height:44px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:6px 0;
  cursor:pointer;list-style:none}
.pt-perfil summary::-webkit-details-marker{display:none}
.pt-perfil summary::after{content:'+';margin-left:auto;font-family:var(--mono);font-size:16px;color:var(--dim)}
.pt-perfil[open] summary::after{content:'–'}
.pt-perfil summary:focus-visible{outline:2px solid var(--txt);outline-offset:2px}
.pt-pf-t{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.pt-pf-corpo{display:flex;flex-direction:column;gap:10px;padding:4px 0 10px}
.pt-pf-g{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.pt-pf-g h6{grid-column:1 / -1;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);margin:2px 0 4px}
.pt-pf-g .pt-nota{grid-column:1 / -1;margin-top:0}
.pt-pf-c{background:var(--bg3);padding:7px 9px;display:flex;flex-direction:column;gap:2px;min-width:0}
.pt-pf-c span{font-size:10.5px;color:var(--dim)}
.pt-pf-c b{font-size:12.5px;font-weight:700;overflow-wrap:anywhere}
.pt-pf-bts{display:flex;flex-wrap:wrap;gap:8px}
.pt-pf-bts .pt-bt{flex:1 1 150px}

/* ------------------------------------------------------------ celular */
@media(max-width:860px){
  /* Sem o ponto a barra já ocupava 356 dos 360px (medido). O botão vira um
     quadrado de 44px, luz em cima e hora embaixo, e a 390px o nome perde 4px
     em vez de 60. Quem cede o que falta é o banner do NOME, que já nasceu com
     reticência: `flex-basis` zero faz a barra não quebrar linha, e ele cresce
     até o tamanho natural. Só vale com o ponto na barra (`.tem-ponto`). */
  .pt-botao{flex-direction:column;justify-content:center;gap:4px;min-width:44px;
    padding:0 4px;margin-right:0;letter-spacing:0}
  .pt-rel{font-size:10px;line-height:1}
  .pt-rot{display:none}
  .pt-alerta-ic{position:absolute;top:2px;right:2px;width:12px;height:12px;font-size:9px}
  :root header.tem-ponto .demo-tag:not(.sup-tag){flex:1 1 0;min-width:0;max-width:max-content}
  /* O `max-content` acima só funciona com o nome sem `max-width:100%`: no
     cálculo do tamanho natural o Chrome resolve esse percentual contra zero, e
     o banner media 20px (medido a 360px). `width:100%` mantém a reticência. */
  :root header.tem-ponto .demo-tag:not(.sup-tag) .eu-nome{max-width:none;width:100%}
  :root header.tem-ponto .canto{padding-left:2px}
  .pt-folha{top:auto;bottom:0;left:0;transform:none;width:100%;max-height:92dvh;
    border-left:0;border-right:0;border-bottom:0;box-shadow:none}
  .pt-grande{font-size:44px}
  .pt-hoje{grid-template-columns:1fr 1fr}
}
@media(min-width:560px){
  .pt-numeros{grid-template-columns:repeat(auto-fit,minmax(90px,1fr))}
}

/* ===== css/97g-crm-obs.css ===== */
/* ---------- A OBSERVAÇÃO COM REGISTRO (01/10/2026, migration 087) ----------
 * As classes são escritas por src/js/65e-crm-obs.js: a última linha da ficha
 * do CRM (observação, Editar, registro) e o registro embaixo da observação da
 * ficha do mapa. Cor só por variável do tema; alvos de toque de 44px.
 */
/* `dl.cx-kv div{display:grid}` ganha do [hidden] do navegador: sem esta, a
   linha "Deputado estadual" aparecia vazia em todo contato sem deputado (visto
   em produção, 01/10/2026). O print da conversa tem a mesma regra (92). */
dl.cx-kv .obs-dep[hidden],dl.cx-kv .obs-linha[hidden],.obs-so-log[hidden]{display:none}
dl.cx-kv .obs-linha dd{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.obs-txt{white-space:pre-wrap;overflow-wrap:anywhere}
.obs-editar{min-height:44px}
.obs-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.obs-cx{width:100%;min-height:110px;padding:9px 10px;font:inherit;font-size:16px;line-height:1.45;resize:vertical;
  background:var(--bg);color:var(--txt);border:1px solid var(--dim2)}
.obs-cx:focus{outline:2px solid var(--amber);outline-offset:-2px;background:var(--bg3)}
.obs-acoes{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.obs-acoes .cx-btn{flex:1 1 120px;min-height:44px}
.obs-msg{margin:0;font-size:12px;line-height:1.4;color:var(--zap-alerta,#FF4D4D)}
.obs-msg:empty{display:none}

.obs-hist{width:100%;font-size:12.5px}
.obs-hist summary{display:flex;align-items:center;min-height:44px;cursor:pointer;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.obs-hist summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.obs-hist ol{list-style:none;margin:0;padding:0;display:grid;gap:10px;border-left:2px solid var(--line2);padding-left:12px}
.obs-hist li{display:grid;gap:3px;min-width:0}
.obs-h-cab{font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.obs-h-txt{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--txt)}
.obs-hist p{margin:8px 0 0;font-size:11px}

/* no celular o rótulo sobe e o texto ganha a largura inteira: 96px de rótulo ao
   lado deixavam a caixa de escrever com metade da tela */
@media (max-width:520px){
  dl.cx-kv div.obs-linha{grid-template-columns:minmax(0,1fr);gap:6px}
}

/* na ficha do mapa o registro fica embaixo do texto da observação */
.obs-so-log{margin-top:10px}

/* ===== css/98-bug.css ===== */
/* ---------- BUG: o botão global de reportar, e a fila da Tecnologia ----------
 * Só variáveis do tema: nenhum hex aqui. Cor e fonte vêm de src/temas/<pele>.css.
 * Celular primeiro: tudo cabe em 390px sem rolagem lateral, alvo de toque de
 * 44px em botão, chip, select e textarea.
 */

/* A barra de KPIs é do MAPA; na fila de bugs ela não diz nada. */
body[data-aba="tecnologia"] .kpibar{display:none}
body[data-aba="tecnologia"] main{height:calc(100dvh - var(--head))}

/* ---------- o botão flutuante ---------- */
#bug-btn{
  position:fixed;right:16px;bottom:20px;z-index:70;
  height:44px;min-width:44px;padding:0 14px;
  display:inline-flex;align-items:center;gap:7px;
  background:var(--bg2);color:var(--txt);
  border:2px solid var(--tinta);box-shadow:var(--dura);
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;cursor:pointer}
#bug-btn svg{width:18px;height:18px;flex-shrink:0}
#bug-btn:hover{background:var(--bg3)}
#bug-btn:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* ---------- o diálogo ---------- */
.bugdlg{
  border:2px solid var(--tinta);padding:0;
  background:var(--bg2);color:var(--txt);
  width:min(480px,calc(100vw - 28px));
  max-height:calc(100dvh - 40px);
  box-shadow:var(--dura);border-radius:0;overflow:auto;
  /* o reset zera margem de tudo; sem isto o dialog encosta no canto */
  margin:auto}
.bugdlg::backdrop{background:rgba(4,5,6,.78)}

.bugform,.bugfeito{padding:20px}
.bugdlg h2{
  font-family:var(--display);font-size:22px;line-height:1.15;font-weight:700;
  letter-spacing:-.01em;margin-bottom:6px}
.bugsub{font-size:13px;line-height:1.55;color:var(--dim);margin-bottom:14px}
#bug-texto{
  display:block;width:100%;min-height:132px;resize:vertical;
  font:inherit;font-size:15px;line-height:1.5;padding:10px 12px;
  border:2px solid var(--tinta);background:var(--bg);color:var(--txt);border-radius:0}
#bug-texto:focus{outline:none;box-shadow:2px 2px 0 var(--amber)}
.bugctx{
  font-family:var(--mono);font-size:11px;color:var(--dim2);letter-spacing:.03em;
  margin-top:8px;overflow-wrap:anywhere}
.bugerro{font-size:12.5px;color:var(--red);font-weight:700;margin-top:8px;line-height:1.45}
.bugok{font-size:12.5px;color:var(--green);font-weight:700;margin-top:8px;line-height:1.45}

.bugacoes{display:flex;gap:10px;margin-top:16px}
.bugacoes button{
  flex:1;min-height:44px;padding:0 14px;cursor:pointer;
  font-family:var(--body);font-weight:700;font-size:14px;border-radius:0}
.bugcancel{background:var(--bg3);color:var(--txt);border:2px solid var(--line2)}
.bugcancel:hover{background:var(--bg);border-color:var(--tinta)}
.bugenviar{background:var(--amber);color:var(--sobre-acento);border:2px solid var(--amber)}
.bugenviar:hover{filter:brightness(1.08)}
.bugenviar:disabled{opacity:.6;cursor:wait}
.bugacoes button:focus-visible{outline:2px solid var(--txt);outline-offset:2px}

.bugfeito p{
  font-family:var(--display);font-size:19px;font-weight:700;color:var(--green);
  text-align:center;padding:14px 0}

/* ---------- a aba TECNOLOGIA ---------- */
.bugwrap{flex:1;overflow-y:auto;padding:16px}
.bugwrap h2{
  font-family:var(--display);font-size:27px;font-weight:800;font-stretch:88%;
  text-transform:uppercase;letter-spacing:-.4px;margin-bottom:5px}
.bugwrap .lead{font-size:12.5px;color:var(--dim);margin-bottom:16px;max-width:720px;line-height:1.5}

/* ---------- a barra "Abrir chamado" ----------
 * Ela era um cartão com título e um parágrafo de quatro linhas explicando a
 * diferença entre este botão e o "Reportar" de quem não é da área. Quem abre
 * esta aba é nível 70 e já sabe a diferença: em 20/09/2026 sobraram os dois
 * botões. O amarelo continua sendo o do .bugenviar do formulário leigo, porque
 * aqui também é ação e não é status. */
.tecabrir{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  max-width:860px;margin-bottom:14px}
.tecabrirbtn{
  flex:0 0 auto;min-height:44px;padding:0 18px;cursor:pointer;
  font-family:var(--body);font-weight:700;font-size:13.5px;border-radius:0;
  background:var(--amber);color:var(--sobre-acento);border:2px solid var(--amber)}
.tecabrirbtn:hover{filter:brightness(1.08)}
.tecabrirbtn:focus-visible{outline:2px solid var(--txt);outline-offset:2px}

/* ---------- as cinco cores de grupo (20/09/2026) ----------
 * Escolha do Gabriel: precisa de você vermelho, na fila amarelo, em correção
 * framboesa, resolvidos verde, fechados preto.
 *
 * VARIÁVEIS PRÓPRIAS, E NÃO `--red`/`--green` DO TEMA. Naqueles dois a pele do
 * comitê guarda cinza de propósito, pela regra de cor partidária: vermelho de
 * destaque lê como PT e amarelo com verde lê como bolsonarista, e as 27 peles
 * herdam o mesmo arquivo. Redefini-los aqui pintaria a plataforma inteira para
 * resolver a cor de uma aba interna.
 *
 * Medido a 390px contra o fundo #08090A da pele: vermelho 6,04:1, amarelo
 * 18,56:1, framboesa 5,91:1, verde 11,51:1, cinza dos fechados 4,17:1 (barra,
 * que é elemento de interface e pede 3:1). O piso de texto é 4,5:1. */
.bugwrap{
  --g-decidir:#FF4B4B; --g-fila:#FFFF02; --g-andando:#FF3D7F;
  --g-feito:#3BE07A;   --g-fechado:#6B7478;
  --g-sobre:#0E1011;
}

.bugchips{display:flex;gap:6px;margin-bottom:14px;overflow-x:auto;padding-bottom:6px;
  scrollbar-width:none}
.bugchips::-webkit-scrollbar{display:none}
.bugchip{
  flex:0 0 auto;min-height:44px;padding:0 13px;display:inline-flex;align-items:center;gap:7px;
  border:2px solid var(--line);background:var(--bg2);color:var(--dim);
  font-size:12.5px;font-weight:700;cursor:pointer;border-radius:0;white-space:nowrap}
.bugchip b{font-family:var(--mono);font-size:12px;font-weight:700}
.bugchip:hover{border-color:var(--line2);color:var(--txt)}
/* Ligado, o chip veste a cor do grupo. Desligado fica cinza: cinco cores
   acesas ao mesmo tempo não dizem qual delas é a de agora. */
.bugchip.on{background:var(--bg3)}
.bugchip.g-decidir.on{border-color:var(--g-decidir);color:var(--g-decidir)}
.bugchip.g-fila.on   {border-color:var(--g-fila);color:var(--g-fila)}
.bugchip.g-andando.on{border-color:var(--g-andando);color:var(--g-andando)}
.bugchip.g-feito.on  {border-color:var(--g-feito);color:var(--g-feito)}
.bugchip.g-fechado.on{border-color:var(--g-fechado);color:var(--txt);background:#000}
.bugatualiza{color:var(--dim)}
.bugchip:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

.buglista{display:flex;flex-direction:column;gap:8px;max-width:860px}

/* ---------- a linha seca de um chamado ---------- */
.bugcard{
  display:grid;grid-template-columns:5px 1fr;
  border:1px solid var(--line);background:var(--bg2);min-width:0}
.bugbarra{background:var(--line2)}
.bugcard.g-decidir .bugbarra{background:var(--g-decidir)}
.bugcard.g-fila    .bugbarra{background:var(--g-fila)}
.bugcard.g-andando .bugbarra{background:var(--g-andando)}
.bugcard.g-feito   .bugbarra{background:var(--g-feito)}
.bugcard.g-fechado .bugbarra{background:var(--g-fechado)}
.bugcorpo{padding:11px 13px;min-width:0}
.bugtopo{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 9px;margin-bottom:5px}
.bugid{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--dim2)}
.bugest{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--dim)}
.bugcard.g-decidir .bugest{color:var(--g-decidir)}
.bugcard.g-fila    .bugest{color:var(--g-fila)}
.bugcard.g-andando .bugest{color:var(--g-andando)}
.bugcard.g-feito   .bugest{color:var(--g-feito)}
.bugcard.g-fechado .bugest{color:var(--g-fechado)}
/* A única etiqueta que sobrou do cabeçalho antigo: ela muda a ordem da fila e
   muda o que a pessoa abre primeiro. */
.bugparou{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;background:var(--g-decidir);color:var(--g-sobre);padding:2px 6px}
.bugquem{font-size:12.5px;color:var(--dim2);margin:5px 0 0;overflow-wrap:anywhere}
/* Quem reportou vira botão do Passaporte (22/09/2026); `all:unset` tira o
   cromo padrão e herda o texto de `.bugquem` ao redor. */
.bugquem-nome{all:unset;cursor:pointer;font:inherit;color:inherit}
.bugquem-nome:hover,.bugquem-nome:focus-visible{text-decoration:underline}
.bugquando{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--dim2);white-space:nowrap}
.bugtexto{
  white-space:pre-wrap;overflow-wrap:anywhere;
  font-size:14.5px;line-height:1.5;color:var(--txt);margin:0}
/* A gaveta de um chamado fechado guarda tudo o que o aberto guarda; o que muda
   é que ninguém precisa dela para decidir nada. */
.bugcard.g-fechado .bugtexto{color:var(--dim)}

/* o contexto técnico, em gaveta nativa */
.bugctxd{border-top:1.5px dashed var(--line2);margin-bottom:10px}
.bugctxd summary{
  min-height:44px;display:flex;align-items:center;cursor:pointer;list-style:none;
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);font-weight:700}
.bugctxd summary::-webkit-details-marker{display:none}
.bugctxd summary::before{content:'+';font-family:var(--mono);margin-right:8px;color:var(--amber)}
.bugctxd[open] summary::before{content:'-'}
.bugctxd dl{
  display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 12px;
  padding:0 0 10px;font-size:11.5px;line-height:1.5}
.bugctxd dt{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim2)}
.bugctxd dd{min-width:0;overflow-wrap:anywhere;color:var(--dim)}
.bugurl{font-family:var(--mono);font-size:11px;word-break:break-all}
.bugconsole{
  margin:0;padding-left:18px;font-family:var(--mono);font-size:11px;line-height:1.5;
  color:var(--txt)}
.bugconsole li{white-space:pre-wrap;overflow-wrap:anywhere;margin-bottom:3px}
.bugvazio{color:var(--dim2)}

/* a resolução */
.bugres{border-top:1.5px dashed var(--line2);padding-top:10px}
.bugres label{
  display:block;font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);font-weight:700;margin:8px 0 4px}
.bugres select{
  display:block;width:100%;min-height:44px;font:inherit;font-size:13.5px;padding:8px 10px;
  border:2px solid var(--tinta);background:var(--bg);color:var(--txt);border-radius:0}
.bugres textarea{
  display:block;width:100%;min-height:44px;resize:vertical;
  font:inherit;font-size:13.5px;line-height:1.5;padding:8px 10px;
  border:2px solid var(--tinta);background:var(--bg);color:var(--txt);border-radius:0}
.bugres select:focus,.bugres textarea:focus{outline:none;box-shadow:2px 2px 0 var(--amber)}
.bugpe{font-size:11px;color:var(--dim);margin-top:6px}

.bugbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.bugbtns button{
  flex:1;min-width:140px;min-height:44px;padding:0 12px;cursor:pointer;
  font-family:var(--body);font-weight:700;font-size:13px;border-radius:0}
/* Na linha seca os botoes NAO esticam. Tres blocos de ponta a ponta sao tres
   decisoes do mesmo tamanho, e so a primeira e a principal: o segundo clique
   mais provavel de um chamado em "precisa de voce" e Autorizar, nao Recusar. */
.bugcorpo .bugbtns button{flex:0 1 auto;min-width:0;padding:0 16px}
.bugsalvar{background:var(--amber);color:var(--sobre-acento);border:2px solid var(--amber)}
.bugsalvar:hover{filter:brightness(1.08)}
.bugcopiar{background:var(--bg3);color:var(--txt);border:2px solid var(--line2)}
.bugcopiar:hover{border-color:var(--tinta);background:var(--bg)}
.bugbtns button:focus-visible{outline:2px solid var(--txt);outline-offset:2px}

/* ---------- celular ---------- */
@media(max-width:860px){
  /* acima da barra fixa do +1 Voto (90-voto.css), que mora no rodapé */
  #bug-btn{right:12px;bottom:calc(86px + env(safe-area-inset-bottom))}
  /* 150px pelo mesmo motivo do .eqwrap (95-equipe.css): o proprio REPORTAR
     desta tela e fixo em bottom:86px com 44px de altura, e 110px deixavam o
     ultimo relato debaixo dele. A pele do comite recebeu 150px em 589535f pelo
     tema; as outras 25 estavam sem. */
  .bugwrap{padding:14px 12px 150px}
  .tecabrirbtn{flex:0 1 auto;padding:0 14px}
  .bugchip{padding:0 11px;font-size:12px}
  .bugcorpo{padding:10px 11px}
  .bugctxd dl{grid-template-columns:1fr;gap:2px 0}
  .bugctxd dt{margin-top:6px}
  .bugbtns button{min-width:100%}
  .bugcorpo .bugbtns button{min-width:0}
}
@media(max-width:430px){
  .bugform,.bugfeito{padding:16px}
  .bugdlg h2{font-size:20px}
}

/* ---------- 037 (19/09/2026): dono, branch e o degrau da homologação ----------
   ISTO MUDOU EM 20/09/2026. Cor por ESTADO virou cor por GRUPO, e a regra que
   sobrou está lá em cima, em `.bugcard.g-*`. Onze estados davam onze leituras;
   os cinco grupos são o que a pessoa de fato usa para decidir onde clicar. As
   variáveis são próprias (`--g-*`) e não tocam `--red`/`--green` do tema, que
   a pele do comitê neutraliza de propósito. */
.bugcard.estado-duplicado{opacity:.75}

/* a linha da correção: branch, PR e commit no mesmo lugar, porque é isso que
   quem homologa lê antes de clicar */
.bugcorr{
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;
  font-family:var(--mono);font-size:11px;color:var(--dim);
  border-left:3px solid var(--acento-texto,var(--amber));
  padding:6px 0 6px 10px;margin:8px 0}
.bugcorr code{font-family:var(--mono);color:var(--txt);overflow-wrap:anywhere}
/* 44px de alvo, medido a 390px em 19/09: o link nasceu com 24 e e o unico
   destino clicavel desta linha. Mesmo conserto do #lnk-esqueci em 13/09 —
   a caixa cresce, o texto nao muda de tamanho nem de lugar. */
.bugcorr a{color:var(--acento-texto,var(--amber));text-decoration:underline;
  min-height:44px;display:inline-flex;align-items:center}
.bugespera{color:var(--dim);font-style:normal}

/* o seletor de dono, na mesma linha dos botões */
.bugdono{display:inline-flex;align-items:center;gap:7px;min-height:44px}
.bugdonor{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
/* 16px e as duas cores declaradas: abaixo disso o iOS amplia a página ao focar,
   e sem background/color o Windows desenha a lista do select sem herdar nada
   da página (as duas lições são de 13 e 14/09/2026) */
/* O fundo e a borda aqui servem as peles SEM extra.css. No comite, a regra
   `:root main select` do tema vence as duas por especificidade e desenha o
   campo com a linguagem dela — medido, e e o certo: campo do painel tem que
   parecer campo do resto do app. O que nao se abre mao e do font-size, que o
   tema nao declara: abaixo de 16px o iOS amplia a pagina ao focar. */
.bugdono select{
  font-family:inherit;font-size:16px;min-height:44px;padding:6px 8px;
  background:var(--bg3);color:var(--txt);border:1.5px solid var(--line2);max-width:190px}
.bugdono select option{background:var(--bg3);color:var(--txt)}
.bugdono select:focus-visible{outline:2px solid var(--acento-texto,var(--amber));outline-offset:2px}

/* os campos do diálogo da branch seguem o mesmo 16px dos textareas de cima */
#rel-branch input{
  width:100%;font-family:var(--mono);font-size:16px;min-height:44px;padding:8px 10px;
  background:var(--bg3);color:var(--txt);border:1.5px solid var(--line2);margin-bottom:10px}
#rel-branch input:focus-visible{outline:2px solid var(--acento-texto,var(--amber));outline-offset:2px}
#tec-dono{
  width:100%;font-family:inherit;font-size:16px;min-height:44px;padding:8px 10px;
  background:var(--bg3);color:var(--txt);border:1.5px solid var(--line2);margin-bottom:10px}
#tec-dono option{background:var(--bg3);color:var(--txt)}

@media (max-width:560px){
  .bugdono{width:100%}
  .bugdono select{max-width:none;flex:1}
}

/* ===== css/98-contrato.css ===== */
/* 98-contrato.css — a folha do contrato, na tela e no papel (chamado #95).
 *
 * A FOLHA E BRANCA COM TINTA PRETA, e ela e a unica coisa deste projeto que
 * ignora o tema. Um contrato e um documento que sai na impressora: desenha-lo
 * no grafite da plataforma faria a pessoa imprimir uma pagina preta, ou o
 * navegador descartar o fundo e deixar texto claro sobre branco. As variaveis
 * do tema continuam mandando em tudo o que e MOLDURA (a barra de cima).
 *
 * A IMPRESSAO ESCONDE O RESTO DO APP, e nao ha iframe: o build serve
 * `X-Frame-Options: DENY` e `frame-ancestors 'none'`, entao nem um iframe do
 * mesmo dominio carrega. Tambem nao ha `<dialog>`: navegador com dialog modal
 * aberto imprime a pagina de tras, e `body > *{display:none}` teria de abrir
 * excecao para ele.
 *
 * Entra DEPOIS de 97-*.css na concatenacao alfabetica, entao empate de
 * especificidade com `.opbtn` e resolvido a favor daqui.
 */

.ctrtela{
  position:fixed; inset:0; z-index:90;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--bg2, #14181F);
  padding:0 0 40px;
}
.ctrtela[hidden]{display:none}
/* O app atras nao rola junto enquanto a folha esta aberta. */
body.ctr-aberto{overflow:hidden}

.ctrbar{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 14px;
  background:var(--bg3, #1C222B);
  border-bottom:1px solid var(--linha, rgba(255,255,255,.12));
}
.ctrbar-q{
  flex:1 1 140px; min-width:0;
  font-size:14px; font-weight:600; color:var(--texto, #E8EDEF);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* 44px de alvo, que e a regra de celular deste projeto. */
.ctrbar .opbtn{min-height:44px}

.ctrfolha{
  box-sizing:border-box;
  max-width:21cm; margin:18px auto; padding:26px 22px;
  background:#FFFFFF; color:#101010;
  font-family:Georgia, "Times New Roman", serif;
  font-size:16px; line-height:1.55;
  text-align:justify;
  box-shadow:0 2px 24px rgba(0,0,0,.45);
}
.ctrfolha h1{
  margin:0 0 20px; padding:0;
  font-size:19px; line-height:1.35; font-weight:700;
  text-align:center; text-transform:uppercase; letter-spacing:.02em;
  color:#101010;
}
.ctrfolha h2{
  margin:22px 0 8px; padding:0;
  font-size:16px; font-weight:700; text-align:left; color:#101010;
  break-after:avoid; page-break-after:avoid;
}
.ctrfolha p{
  margin:0 0 9px;
  break-inside:avoid; page-break-inside:avoid;
}
.ctrfolha b{font-weight:700}

/* O BOTAO NA LINHA DA PESSOA, ao lado da etiqueta de situacao (19/09/2026).
 * Ele vive dentro do <summary>, que e uma flex row com avatar, nome e etiqueta.
 * `flex:0 0 auto` para nao roubar largura do nome, que e o que a pessoa le
 * primeiro; 44px de alvo, que e a regra de celular deste projeto.
 *
 * `cursor:pointer` vem do <summary> e esta certo aqui tambem. O que NAO pode
 * herdar e o clique: a alternancia da gaveta e a acao padrao do <summary>, e
 * quem a impede e o `ev.preventDefault()` do `admCliquePessoas` -- em JS, e nao
 * em CSS, porque `pointer-events` mataria o botao junto.
 */
.opbtn.ctrlinha{
  flex:0 0 auto; min-height:44px; padding:0 12px;
  font-family:var(--mono, monospace); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; white-space:nowrap;
}

/* NO CELULAR O BOTAO SOBE PARA A LINHA DO NOME, e a etiqueta e que desce.
 *
 * A 430px o `97-administrativo.css` ja poe `flex-wrap` na linha e manda a
 * etiqueta para baixo do nome com recuo de 48px. Com o botao no fim, a linha
 * passava a ter TRES niveis (nome / etiqueta / botao) e o cartao ia de 81px
 * para 135px -- medido a 375px em 19/09/2026. Com quarenta e quatro pessoas na
 * lista, isso e mais de dois mil pixels de rolagem a mais.
 *
 * Invertendo a ordem, o botao entra ao lado do nome (que encolhe e quebra em
 * duas linhas, sem cortar) e a etiqueta fica sozinha embaixo: 94px. Medido:
 * 135 -> 94, sem rolagem lateral, nome nao truncado, alvo de 44px.
 *
 * Os TRES seletores levam `:has(.ctrlinha)` porque `.admp-id{flex:1 1 0}` muda
 * como o nome se comporta: aplicado sem a condicao, ele mexeria em TODA linha
 * de TODA pele, inclusive nas vinte e oito que nao tem contrato nenhum. Navegador
 * sem `:has` simplesmente cai no empilhamento de tres niveis, que funciona --
 * e mais alto, nao quebrado.
 *
 * No desktop nada disto vale: la o botao fica ao lado da etiqueta, que e onde
 * o Gabriel pediu.
 */
@media (max-width:430px){
  .admp-cab:has(.ctrlinha) .admp-id{flex:1 1 0}
  .admp-cab:has(.ctrlinha) .opbtn.ctrlinha{order:2; margin-left:0}
  .admp-cab:has(.ctrlinha) .admp-sit{order:3; margin-left:48px}
}

/* O campo do valor no dialogo. 16px porque abaixo disso o iOS da zoom no foco,
   e a regra dos 16px e de 13/09/2026. */
.ctrcampo{display:block; margin:10px 0 4px; font-size:13px; color:var(--texto2, #A8B3B8)}
.ctrcampo input{
  display:block; width:100%; box-sizing:border-box; margin-top:5px;
  min-height:44px; padding:10px 12px; font-size:16px;
  background:var(--bg3, #1C222B); color:var(--texto, #E8EDEF);
  border:1px solid var(--linha, rgba(255,255,255,.18)); border-radius:8px;
}
/* O aviso de ficha incompleta usa o acento do tema, nunca `--red`: o tema do
   comite neutraliza as cores semanticas de proposito (`--red` la e cinza) para
   nenhuma tela de campanha ler como semaforo. O simbolo entra por ::before
   para o aviso nao depender so de cor. */
.ctrfalta{
  margin:0 0 10px; padding:9px 11px; font-size:14px; line-height:1.45;
  color:var(--acento-texto, #F0C36A);
  border:1px solid currentColor; border-radius:8px;
}
.ctrfalta::before{content:"\26A0 "; }

@media (max-width:520px){
  .ctrfolha{margin:10px 8px; padding:18px 15px; font-size:15px; text-align:left}
  .ctrfolha h1{font-size:17px}
}

/* A LINHA PARA ASSINAR, no fim da folha (chamado #131, 22/09/2026).
 *
 * O modelo termina qualificando as duas partes e nao deixa onde riscar a
 * caneta. O bloco e desenhado pela tela (`ctrAssinaturas`), com o espaco em
 * branco POR CIMA da linha: e nele que a assinatura cabe, e por isso ele e
 * medido em milimetros no papel e em pixels na tela.
 *
 * `break-inside:avoid` e o que mantem as duas assinaturas juntas e na mesma
 * folha. Sem ele o navegador quebra a pagina no meio do par e sobra uma linha
 * orfa na folha seguinte -- que e uma versao mais silenciosa do defeito
 * original, porque o papel sai com aparencia de pronto.
 */
.ctrass{
  display:flex; gap:26px; flex-wrap:wrap;
  margin:38px 0 4px;
  break-inside:avoid; page-break-inside:avoid;
}
.ctrass-um{
  flex:1 1 220px; min-width:0;
  padding-top:52px;
  text-align:center;
}
.ctrass-linha{
  display:block;
  border-top:1px solid #101010;
  margin:0 0 6px;
}
.ctrass-rot{
  display:block;
  font-size:13px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:#101010;
}

@media (max-width:520px){
  .ctrass{gap:14px; margin-top:28px}
  .ctrass-um{flex:1 1 100%; padding-top:44px}
}

/* ------------------------------------------------------------------ papel */
@page{ size:A4; margin:20mm 18mm; }

@media print{
  html, body{height:auto; overflow:visible; background:#fff}
  /* Some com o app inteiro; a folha e o unico filho de <body> que fica. */
  body > *{display:none !important}
  body > .ctrtela{
    display:block !important;
    position:static; inset:auto; overflow:visible;
    background:#fff; padding:0;
  }
  .ctrtela[hidden]{display:none !important}
  .ctrbar{display:none !important}
  .ctrfolha{
    max-width:none; width:auto; margin:0; padding:0;
    box-shadow:none; font-size:11.5pt; line-height:1.45;
    background:#fff; color:#000;
  }
  .ctrfolha h1{font-size:13pt; margin-bottom:16pt}
  .ctrfolha h2{font-size:11.5pt; margin:13pt 0 5pt}
  .ctrfolha p{margin:0 0 6pt}
  /* No papel o espaco da caneta e medido em milimetros, e o par de assinaturas
     nao se separa: `break-inside:avoid` ja esta na regra de cima. */
  .ctrass{margin:14mm 0 0; gap:12mm}
  .ctrass-um{padding-top:16mm}
  .ctrass-rot{font-size:10pt}
}

/* ===== css/98-ranking-tv.css ===== */
/* ---------- RANKING EM MODO TV (21/09/2026) ----------
   O placar espelhado na TV da operação. Pedido do Gabriel: tela cheia, sem
   navbar e sem o botão de reportar, e o que sobra em tamanho de ler de longe.

   QUEM LIGA É O `js/73-ranking-tv.js`, pondo `tv` no `body`. Tudo aqui é
   prefixado por `body.tv` e este arquivo entra DEPOIS do `97-ranking.css` na
   ordem do bundle, então mesma especificidade já ganha -- e por isso quase
   nada precisa de peso extra. Onde o peso aparece, o comentário diz contra
   qual regra ele está disputando.

   ESTE ARQUIVO NÃO ESCONDE NADA FORA DO MODO TV. A barra de abas é a navegação
   de todo mundo: uma regra sem o `body.tv` na frente tiraria a navegação do
   app inteiro.

   As 29 peles carregam este arquivo igual, e por isso todo token que só existe
   no comitê (`--violet`, `--dim2`, `--line2`) vem com valor de reserva. */

/* ---------- 1. o cromo some ----------
   Os quatro são os que o pedido nomeia. `.tabs` mora dentro do `header` hoje,
   e está na lista mesmo assim: o dia em que ela sair dali (no celular ela já
   quebra para a própria linha) a regra continua valendo sem ninguém lembrar
   de voltar aqui.

   O `>` NÃO É ENFEITE, e ele custou uma medição: o cabeçalho da própria aba é
   `<header class="rk-topo">`, dentro do `.rkwrap`. Um `body.tv header` seco
   apagava o título do placar e, junto com ele, o selo que diz se o canal está
   vivo -- que é justamente o que não pode sumir de uma tela que fica ligada o
   dia todo. Filho direto do `body` é só o cabeçalho do app.

   `#bug-btn` é criado pelo `98-bug.js` e fica `position:fixed` sobre o
   conteúdo. Ele some pelo CSS, e não por `remove()`: o módulo dele remonta o
   botão quando não o encontra, então apagar do DOM seria um jogo de gato e
   rato que a tela perde. */
body.tv > header,
body.tv .tabs,
body.tv .kpibar,
body.tv #bug-btn{display:none}

/* ---------- 2. a janela inteira, e nada rola ----------
   `body[data-aba="ranking"] main` (97-ranking.css) desconta a altura do
   cabeçalho, que no modo TV não existe mais: sem esta regra sobrariam 58px de
   faixa morta embaixo do placar. A rolagem da PÁGINA some por decisão, não por
   efeito colateral -- numa parede ninguém rola, e o que rola por dentro (a
   fila e a escada, a partir de 1300px) continua rolando. */
body.tv{overflow:hidden}
body.tv main,
body.tv[data-aba="ranking"] main{height:100dvh}

/* ---------- 3. o interruptor ----------
   Ele vive no cabeçalho da aba, ao lado do selo do canal, e CONTINUA VISÍVEL
   dentro do modo TV, apagado. Um modo que só se desfaz pelo Esc prende quem
   está no PC da parede sem teclado à mão; o custo de manter o botão é uma
   sombra num canto da tela. */
.rk-tv-btn{margin-left:auto;align-self:center;display:inline-flex;align-items:center;
  gap:7px;min-height:34px;padding:7px 11px;background:var(--bg2);border:0;
  color:var(--dim);font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;line-height:1;cursor:pointer}
.rk-tv-btn svg{width:15px;height:15px;flex:none}
.rk-tv-btn:hover{background:var(--bg3);color:var(--txt)}
.rk-tv-btn:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.rk-tv-btn[aria-pressed="true"]{background:var(--bg3);color:var(--txt);
  box-shadow:inset 0 -3px 0 var(--amber)}
/* alvo de toque: onde há dedo, 44px (WCAG 2.2). Acima de 900px é mouse e
   controle remoto, e o botão volta a ser discreto. */
@media (max-width:899px){ .rk-tv-btn{min-height:44px;padding:11px 13px} }

body.tv .rk-tv-btn{opacity:.22}
body.tv .rk-tv-btn:hover,
body.tv .rk-tv-btn:focus-visible{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .rk-tv-btn{transition:opacity .18s ease}
}

/* ================================================================
   4. TIPOGRAFIA DE PAREDE -- só a partir de 1300px
   ================================================================
   Daqui para cima é o desenho de duas colunas do 97-ranking.css, que é o da
   TV e o do monitor da coordenação. Abaixo disso o modo TV entrega tela cheia
   e nada mais: num celular já não há navbar sobrando para esconder, e inflar a
   fonte ali quebraria a tela que a equipe usa na rua.

   O QUE CRESCE É O QUE DECIDE -- a posição, o nome e o número da fila, o nome
   e o percentual do pódio, os quatro números da régua. O QUE ENCOLHE É O QUE
   SE CONSULTA: o rótulo do nível, o "faltam N para o 4", o resumo de contatos
   e votos, a escada inteira. A três ou quatro metros ninguém lê uma faixa de
   pontos; a pessoa lê quem está na frente.

   A CONTA DA ALTURA, medida a 1920x1080: 1080 menos o padding do wrap deixa
   ~1046px. O topo come ~56, a barra de recorte ~38, o pódio e a régua ~250, e
   sobram ~700 para a fila -- que a 76px de linha mostra nove pessoas. Nome
   maior é gente a menos na tela, e essa é a troca que o pedido escolhe: numa
   parede de 4 metros, um nome de 17px não se lê, e uma fila de vinte nomes
   ilegíveis vale menos que nove legíveis. */
@media (min-width:1300px){
  /* a tela inteira, e não os 1760px do desenho de monitor: numa TV a moldura
     preta dos dois lados é espaço que ninguém está usando */
  body.tv .rkwrap{max-width:none;padding:16px 26px 18px;gap:0 26px}

  body.tv .rk-topo{margin-bottom:8px}
  body.tv .rk-topo h2{font-size:40px}
  body.tv .rk-viva{font-size:12px}

  /* o recorte é escolhido uma vez, quando alguém arruma a TV de manhã, e
     depois fica parado o dia inteiro: ele encolhe e sai da frente */
  body.tv .rk-barra{margin-bottom:8px}
  body.tv .rk-grupo button{min-height:32px;padding:6px 12px;font-size:11px}

  /* ---------- o pódio ----------
     ELE ESTICA ATÉ A ALTURA DA RÉGUA, e isso é o conserto de um buraco medido
     na captura de 1920x1080: pódio e régua dividem a mesma linha do grid, a
     régua é mais alta (dois números de 46px em duas fileiras), e o
     `align-items:end` do 97-ranking.css colava os três cards no rodapé da
     linha. Sobravam ~75px de ar entre a barra de recorte e o pódio — numa tela
     em que o que não couber não existe, isso é uma pessoa a menos na fila paga
     em espaço vazio. Esticado, o card ganha respiro e os dois blocos terminam
     na mesma linha de base. */
  body.tv .rk-podio{align-items:stretch}
  body.tv .rk-podio li{padding:11px 18px;gap:2px 16px;align-content:center}
  body.tv .rk-podio .rk-av{width:58px;height:58px}
  body.tv .rk-podio .p1 .rk-av{width:70px;height:70px}
  body.tv .rk-podio .nom{font-size:32px}
  body.tv .rk-podio .p1 .nom{font-size:38px}
  body.tv .rk-podio .pts{font-size:30px}
  body.tv .rk-podio .pts small{font-size:15px}
  /* o percentual da meta é o dado do card, e não o enfeite: ele cresce junto */
  body.tv .rk-podio .niv{font-size:16px;line-height:1.15}
  body.tv .rk-podio .lug{font-size:14px}
  body.tv .rk-podio .coroa{font-size:17px;line-height:1}
  body.tv .rk-podio .pbar{height:10px}
  body.tv .rk-podio .p1 .pbar{height:13px}

  /* ---------- a régua ---------- */
  body.tv .rk-regua div{padding:14px 18px}
  body.tv .rk-regua b{font-size:40px}
  body.tv .rk-regua span{font-size:14px}

  /* ---------- os títulos das seções ---------- */
  body.tv .rk-sec{padding-top:14px}
  body.tv .rk-sec h3{font-size:22px;margin-bottom:8px}
  body.tv .rk-sec .cont{font-size:12px}

  /* ---------- A FILA, que é o conteúdo ----------
     A POSIÇÃO em tamanho de número de camisa: numa TV é por ela que a pessoa
     se acha na lista antes de ler o próprio nome. */
  body.tv .rk-lista li{padding:7px 18px;gap:16px}
  body.tv .rk-lista .pos{min-width:46px;font-size:27px;line-height:1}
  body.tv .rk-lista .nome{font-size:30px;line-height:1.05}
  body.tv .rk-lista .num b{font-size:30px;line-height:1}
  body.tv .rk-lista .num small{font-size:13px;line-height:1.1}
  /* O `line-height` É O QUE PAGA A FONTE GRANDE, e a conta está medida: a
     34px, o `normal` do navegador dá 40px de caixa para 34 de letra, e a
     linha da fila inteira somava 88px -- sete pessoas na tela de 1080. Com a
     entrelinha colada (1 no número, 1,05 no nome) a linha cai para 73px e
     passam nove. Duas pessoas a mais por causa de espaço em branco que
     ninguém lê a quatro metros. */
  body.tv .rk-lista .rk-av{width:46px;height:46px}
  body.tv .rk-lista .d{min-width:40px;font-size:16px}
  /* o que é consulta encolhe e fica de canto */
  body.tv .rk-lista .l2{font-size:11px}
  body.tv .rk-lista .mini{font-size:11px}
  body.tv .rk-lista .tag{font-size:8px}
  /* "faltam 214 para o 4" é planejamento de quem senta na frente do monitor, e
     de longe ele vira ruído na mesma linha do nome */
  body.tv .rk-lista .falta{display:none}
  body.tv .rk-lista .corpo{grid-template-columns:minmax(0,1fr) minmax(130px,260px);
    gap:2px 16px}

  /* ---------- o mural ---------- */
  body.tv .rk-feed li{padding:10px 15px;font-size:16px}
  body.tv .rk-feed .hora{font-size:12px}

  /* ---------- a escada é consulta pura ----------
     Ela responde "como o nível sobe", que é pergunta de quem está estudando o
     jogo, não de quem passa na frente da TV. Encolhida, ela continua no ar
     para quem chegar perto, e devolve altura para a fila. */
  body.tv .rk-escada li{padding:6px 13px;gap:9px}
  body.tv .rk-escada .t{font-size:13px}
  body.tv .rk-escada .n{font-size:11px}
  body.tv .rk-escada .f{font-size:9.5px}
  body.tv .rk-escada .q{font-size:11px}
  body.tv .rk-exp{font-size:11.5px;line-height:1.45;margin-bottom:7px}
}

/* ---------- 5. a TV de verdade: 1600px+ ----------
   Aqui a distância é de três a quatro metros, e o que decide cresce mais uma
   vez. O resto NÃO cresce junto de propósito: a tela vira cartaz e perde a
   lista, que é o conteúdo. */
@media (min-width:1600px){
  body.tv .rk-topo h2{font-size:46px}
  body.tv .rk-lista .nome{font-size:34px}
  body.tv .rk-lista .pos{min-width:52px;font-size:30px}
  body.tv .rk-lista .num b{font-size:33px}
  body.tv .rk-podio .nom{font-size:35px}
  body.tv .rk-podio .p1 .nom{font-size:42px}
  body.tv .rk-podio .pts{font-size:33px}
  body.tv .rk-regua b{font-size:46px}
}

/* ---------- 6. larga e BAIXA: o notebook ligado à TV ----------
   1366x768 e 1920x900 são as alturas que aparecem quando a TV é espelhada de
   um notebook. O `97-ranking.css` já encolhe o pódio abaixo de 900px de
   altura; aqui o mesmo raciocínio vale para a fonte de parede, senão cabem
   quatro nomes e o resto fica fora da tela -- e ninguém rola uma TV.

   O NOME NÃO DESCE DE 28px, que é o piso de leitura de longe desta rodada. O
   que cede é a altura em volta dele. */
@media (min-width:1300px) and (max-height:900px){
  body.tv .rkwrap{padding:12px 22px 14px}
  body.tv .rk-topo h2{font-size:32px}
  body.tv .rk-podio li{padding:8px 16px}
  body.tv .rk-podio .rk-av{width:48px;height:48px}
  body.tv .rk-podio .p1 .rk-av{width:56px;height:56px}
  body.tv .rk-podio .nom,body.tv .rk-podio .p1 .nom{font-size:27px}
  body.tv .rk-podio .pts{font-size:25px}
  body.tv .rk-podio .niv{font-size:14px}
  body.tv .rk-regua div{padding:10px 16px}
  body.tv .rk-regua b{font-size:32px}
  body.tv .rk-lista li{padding:7px 16px}
  body.tv .rk-lista .nome{font-size:28px}
  body.tv .rk-lista .pos{min-width:42px;font-size:25px}
  body.tv .rk-lista .num b{font-size:27px}
  body.tv .rk-feed li{padding:8px 14px;font-size:14px}
  body.tv .rk-sec{padding-top:10px}
  body.tv .rk-sec h3{font-size:19px;margin-bottom:6px}
}

/* ---------- 7. celular ----------
   O modo TV não é para o celular, e mesmo assim ele precisa não quebrar lá: o
   atalho `?tv=1` vai ser mandado no WhatsApp e alguém vai abrir no telefone.
   O que ele faz aqui é o que faz em qualquer lugar -- tirar o cromo e ocupar a
   janela. A fila continua rolando por dentro do wrap, e nenhuma fonte cresce:
   um nome de 30px num aparelho de 390px estoura a linha para fora da tela. */
@media (max-width:1299px){
  body.tv .rkwrap{padding-top:14px}
}

/* ===== css/98-relatos.css ===== */
/* ---------- RELATOS: o formulário leigo, o painel, o percurso e o chamado
 * da própria tecnologia ----------
 * Complementa o 98-bug.css, que continua com o botão flutuante, o diálogo, a
 * lista da aba TECNOLOGIA e o bloco "Abrir chamado" (.tecabrir). Este arquivo
 * entra DEPOIS dele na concatenação alfabética (98-bug < 98-relatos), então
 * regra com a mesma especificidade daqui ganha — é a lição do 97-operacao.css,
 * escrita no CLAUDE.md.
 *
 * Só variáveis do tema: nenhum hex aqui. Cor e fonte vêm de src/temas/<pele>.css,
 * e é o que faz as 26 peles usarem esta tela sem uma linha por candidato.
 *
 * CELULAR PRIMEIRO. Tudo cabe em 390px sem rolagem lateral, alvo de toque de
 * 44px em botão, chip, select e textarea, e nenhuma tabela: a fila é de
 * cartões empilhados, que é o que sobrevive à largura de um telefone.
 */

/* ---------- 1. o formulário em três perguntas ---------- */
.relgrupo{border:0;padding:0;margin:0 0 14px}
.relgrupo legend{
  display:block;padding:0;margin-bottom:7px;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--dim)}

.rellabel{
  display:block;margin:0 0 7px;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--dim)}

/* O textarea de "o que aconteceu" já tem regra no 98-bug.css (#bug-texto).
   O de "o que você estava tentando fazer" copia a forma e é mais baixo: a
   resposta ali é uma linha, e uma caixa alta pede um texto que não existe. */
#rel-tentativa{
  display:block;width:100%;min-height:60px;resize:vertical;
  font:inherit;font-size:15px;line-height:1.5;padding:10px 12px;margin-bottom:14px;
  border:2px solid var(--tinta);background:var(--bg);color:var(--txt);border-radius:0;
  box-sizing:border-box}
#rel-tentativa:focus{outline:none;box-shadow:2px 2px 0 var(--amber)}
#bug-texto{min-height:104px;margin-bottom:14px;box-sizing:border-box}

/* "Como reproduzir, passo a passo?" no diálogo do LEIGO, pedido do Gabriel
   em 19/09/2026. Mesma forma dos dois de cima e a mesma altura do #tec-repro,
   porque a resposta ali é uma lista de passos e não uma frase. 16px, e não
   os 15px dos dois campos de cima: campo NOVO nasce na régua de 16, que é
   onde o iOS para de dar zoom sozinho ao tocar. É a mesma razão escrita no
   bloco do #tec-repro, logo abaixo. Ele é
   OPCIONAL: no chamado da tecnologia o passo a passo é obrigatório, porque
   quem abre sabe reproduzir; cobrar isso de um cabo digital na rua faria ele
   deixar de reportar, que é o contrário do que o botão existe para fazer. */
#rel-repro{
  display:block;width:100%;min-height:104px;resize:vertical;
  font:inherit;font-size:16px;line-height:1.5;padding:10px 12px;margin-bottom:14px;
  border:2px solid var(--tinta);background:var(--bg);color:var(--txt);border-radius:0;
  box-sizing:border-box}
#rel-repro:focus{outline:none;box-shadow:2px 2px 0 var(--amber)}

/* Os três campos do chamado da tecnologia (98-bug.js, seção 4b): mesma forma
   dos dois de cima, altura diferente para cada um porque cada resposta pede
   um tamanho diferente — "o que esperava" é uma linha, "como reproduzir" é
   uma lista de passos. Fonte em 16px, não 15 como os dois de cima: campo
   novo já nasce na régua de "abaixo disso o iOS dá zoom sozinho". */
#tec-esperava,#tec-aconteceu,#tec-repro{
  display:block;width:100%;resize:vertical;
  font:inherit;font-size:16px;line-height:1.5;padding:10px 12px;margin-bottom:14px;
  border:2px solid var(--tinta);background:var(--bg);color:var(--txt);border-radius:0;
  box-sizing:border-box}
#tec-esperava:focus,#tec-aconteceu:focus,#tec-repro:focus{outline:none;box-shadow:2px 2px 0 var(--amber)}
#tec-esperava{min-height:56px}
#tec-aconteceu{min-height:80px}
#tec-repro{min-height:104px}

/* "O que é" é um select nativo desde o chamado #78: três cartões empilhados
   com descrição comiam a altura da tela aberta, e a resposta cabe numa linha.
   16px porque abaixo disso o iOS dá zoom sozinho ao tocar no campo, e 44px de
   altura pela regra de alvo de toque. A descrição de cada tipo viaja dentro
   do texto da <option>, então quem não sabe qual escolher continua lendo. */
.relsel{
  display:block;width:100%;min-height:44px;margin-bottom:14px;
  font:inherit;font-size:16px;line-height:1.5;padding:10px 12px;
  border:2px solid var(--tinta);background:var(--bg);color:var(--txt);border-radius:0;
  box-sizing:border-box}
.relsel:focus{outline:none;box-shadow:2px 2px 0 var(--amber)}
.relsel option{background:var(--bg);color:var(--txt)}

/* As opções empilham no celular e viram coluna no desktop. Empilhadas
   porque a descrição de cada uma é o que faz a pessoa escolher a certa, e
   três colunas de 120px cortam a descrição fora. */
.relopcoes{display:grid;grid-template-columns:1fr;gap:8px}
.relop{
  display:block;width:100%;text-align:left;cursor:pointer;
  min-height:44px;padding:9px 12px;
  background:var(--bg);color:var(--txt);
  border:2px solid var(--line2);border-radius:0}
.relop b{display:block;font-family:var(--body);font-size:14px;font-weight:700;line-height:1.3}
.relop span{display:block;font-size:12px;line-height:1.4;color:var(--dim);margin-top:2px}
.relop:hover{border-color:var(--tinta);background:var(--bg3)}
.relop.on{border-color:var(--amber);background:var(--bg3);box-shadow:2px 2px 0 var(--amber)}
.relop.on b{color:var(--amber)}
.relop:focus-visible{outline:2px solid var(--txt);outline-offset:2px}

/* O impacto tem rótulo curto e nenhuma descrição: cabe em três colunas
   mesmo a 360px, e as três lado a lado mostram que é uma escala. */
.relimp{grid-template-columns:repeat(3,1fr);gap:6px}
.relimp .relop{padding:8px 6px;text-align:center;display:flex;align-items:center;justify-content:center}
.relimp .relop b{font-size:12px;line-height:1.25}

.bugfeitosub{
  font-family:var(--body)!important;font-size:13px!important;font-weight:400!important;
  color:var(--dim)!important;line-height:1.5;padding:0 6px 10px!important}

/* ---------- 2. o cartão do painel ---------- */
/* As etiquetas do topo. Elas respondem, em ordem, o que decide se a pessoa
   para neste cartão: em que pé está, o que é, e o quanto atrapalhou. */
.relpill{
  display:inline-flex;align-items:center;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:3px 7px;border:1px solid var(--line2);
  color:var(--dim);white-space:nowrap}
.reltipo{color:var(--txt);border-color:var(--line)}
.relrelev{color:var(--azul);border-color:var(--azul)}

/* A BORDA ESQUERDA DEIXOU DE SER DO IMPACTO EM 20/09/2026. Ela virou a barra
   de cor do grupo (`.bugbarra`, em 98-bug.css), e duas coisas disputando a
   mesma faixa de 4px é como uma delas para de ser lida. O impacto continua na
   gaveta, e "parou" ganhou etiqueta própria no topo da linha, porque é o único
   valor dos três que muda o que a pessoa abre primeiro. */
.relimpacto{color:var(--dim)}
.bugcard.emfoco{box-shadow:0 0 0 3px var(--amber)}

.reltent{
  font-size:13.5px;line-height:1.5;color:var(--dim);margin:8px 0 0;
  overflow-wrap:anywhere}
.reltent b{color:var(--txt)}

/* O bloco da triagem. Ele é visualmente separado do texto da pessoa de
   propósito: confundir "o que ela escreveu" com "o que a máquina entendeu"
   é o jeito mais rápido de aprovar a correção do problema errado. */
.relia{
  margin:10px 0 0;padding:10px 12px;
  background:var(--bg3);border-left:3px solid var(--azul)}
.reliatit{
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--azul);margin-bottom:3px}
.relia p{font-size:13.5px;line-height:1.55;margin:0 0 8px;overflow-wrap:anywhere}
.relia p:last-child{margin-bottom:0}
.relsemia{
  font-family:var(--mono);font-size:11px;color:var(--dim2);
  margin:10px 0 0;letter-spacing:.03em}

.relrecusa{color:var(--dim)}
.relflag{
  margin:10px 0 0;padding:8px 10px;
  background:var(--bg3);border-left:3px solid var(--red);
  font-size:13px;line-height:1.45;font-weight:700;color:var(--red)}

/* Os botões de ação. Empilham em duas colunas no celular; "Aprovar" ocupa a
   linha inteira porque é a decisão que a tela existe para receber. */
.bugbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.bugbtns button{
  min-height:44px;padding:0 14px;cursor:pointer;border-radius:0;
  font-family:var(--body);font-size:13.5px;font-weight:700;flex:1 1 140px}
.bugbtns button:focus-visible{outline:2px solid var(--txt);outline-offset:2px}
.relsim{
  flex-basis:100%;
  background:var(--green);color:var(--sobre-acento);border:2px solid var(--green)}
.relsim:hover{filter:brightness(1.08)}
.relnao{background:var(--bg);color:var(--red);border:2px solid var(--red)}
.relnao:hover{background:var(--bg3)}

/* ---------- 3. o percurso, dentro do cartão e na OPERAÇÃO ---------- */
.relpercurso{margin:8px 0}
.perclista{list-style:none;margin:6px 0 0;padding:0}
.perclista li{
  display:flex;gap:8px;align-items:baseline;
  font-size:13px;line-height:1.6;padding:3px 0;
  border-bottom:1px solid var(--line2);overflow-wrap:anywhere}
.perclista li:last-child{border-bottom:0}
.perchora{
  font-family:var(--mono);font-size:11px;color:var(--dim2);
  flex-shrink:0;min-width:44px}
.percic{
  font-family:var(--mono);font-weight:700;color:var(--amber);
  flex-shrink:0;min-width:12px}
.percdet{font-family:var(--mono);font-size:11px;color:var(--dim2)}

#op-sec-percurso .perctopo{margin-bottom:10px}
#op-sec-percurso h3{
  font-family:var(--display);font-size:17px;font-weight:800;
  text-transform:uppercase;letter-spacing:-.2px;margin:0 0 3px}
.percsub{font-size:12.5px;line-height:1.5;color:var(--dim);margin:0}

.percbarra{
  display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-bottom:10px}
.percfiltro{
  display:flex;flex-direction:column;gap:4px;flex:1 1 180px;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--dim)}
.percfiltro select{
  min-height:44px;width:100%;padding:0 10px;font:inherit;font-size:14px;
  font-family:var(--body);font-weight:400;text-transform:none;letter-spacing:0;
  background:var(--bg);color:var(--txt);border:2px solid var(--line2);border-radius:0}
.percfiltro select:focus{outline:none;box-shadow:2px 2px 0 var(--amber)}
#perc-recarrega{flex:0 0 auto;min-height:44px}

.percpessoa{
  border:1px solid var(--line2);margin-bottom:6px;background:var(--bg)}
.percpessoa>summary{
  cursor:pointer;padding:10px 12px;min-height:44px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:14px;overflow-wrap:anywhere}
.percpessoa>summary span{
  font-family:var(--mono);font-size:11px;color:var(--dim2);
  text-align:right;flex-shrink:0}
.percpessoa>summary:hover{background:var(--bg3)}
.percpessoa[open]>summary{border-bottom:1px solid var(--line2)}
.percpessoa .perclista{padding:6px 12px 10px}

/* ---------- 4. celular ---------- */
/* A 390px o cartão perde o respiro lateral e as etiquetas do topo quebram em
   linha em vez de empurrarem a largura para fora. Nada aqui esconde nada: o
   que sai da tela por overflow não volta, e é o defeito de 06/09 que o
   CLAUDE.md manda não repetir. */
@media (max-width:430px){
  .bugtopo{flex-wrap:wrap;row-gap:4px}
  .relpill{font-size:9.5px;padding:2px 5px}
  .bugbtns button{flex:1 1 100%}
  .relia{padding:9px 10px}
  .percfiltro{flex:1 1 100%}
  #perc-recarrega{width:100%}
  .perchora{min-width:40px}
}

/* ===== css/98b-ranking-festa.css ===== */
/* ---------- A FESTA DO RANKING NA TV (22/09/2026) ----------
   Par do `src/js/74-ranking-festa.js`. Escolha do Gabriel entre as tres
   previas do chamado #121: a versao C, com os quatro elementos.

   O NOME TEM UM `b` DE PROPOSITO: este arquivo precisa entrar depois do
   `98-ranking-tv.css` na ordem alfabetica do bundle, e com a mesma
   especificidade quem vem depois ganha. Entre `98-` e `98b-`, o hifen (45)
   vem antes do `b` (98), entao todo `98-*.css` e lido primeiro.

   Só `transform` e `opacity`, como manda o DESIGN-DNA da pele comite. As cores
   saem dos tokens do tema, nunca escritas aqui: `--violet` e `--acento2` só
   existem no comitê, então todo uso traz valor de reserva.

   Radius 0 e sombra nenhuma, que é o chassi: o "contorno" desta casa é o vão
   de 2px onde o fundo aparece. */

/* ---------- a linha que subiu ----------
   O realce é um pseudo-elemento por cima da linha, e quem o acende é a
   variável `--festa-acende`, que o GSAP anima de 1 a 0. Animar a variável em
   vez do `background` da linha mantém a promessa: o que muda é a `opacity` de
   uma camada, e o navegador não repinta a linha inteira.

   `@property` é o que permite o GSAP interpolar a variável como número em vez
   de trocá-la de uma vez. Navegador que não o conhece ignora o bloco, e aí o
   realce simplesmente não aparece -- a fila continua deslizando. */
@property --festa-acende {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}

#rk-lista li{position:relative}
#rk-lista li::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:var(--amber);
  opacity:calc(var(--festa-acende, 0) * 0.16);
}
/* a barra da esquerda é o que se lê de longe: ela aparece inteira e some com
   o resto, e é a mesma gramática do `li.eu` que o 97-ranking.css já usa */
#rk-lista li.festa-subiu{
  box-shadow:inset 4px 0 0 var(--amber);
}

/* ---------- o flash da tela inteira (B e C) ----------
   Uma camada só, por cima de tudo menos do cursor. O branco é o que vira
   "clarão" numa TV: a tela do comitê é grafite #08090A o dia inteiro, e um
   flash na cor da campanha sobre ela lê como mancha, não como aviso.

   `will-change:opacity` promove a camada para o compositor uma vez, em vez de
   o navegador decidir isso no primeiro quadro de cada flash. */
.festa-flash{
  position:fixed;inset:0;z-index:90;pointer-events:none;
  background:#fff;opacity:0;will-change:opacity;
}

/* ---------- a faixa com o nome (B e C) ----------
   ELA É BAIXA DE PROPÓSITO, e a primeira versão não era: medida na captura de
   1920x1080, a faixa de 160px tapava a fila inteira e a escada por dois
   segundos. Numa parede, o aviso que apaga o placar tira do ar justamente o
   que ele está comemorando. Agora ela ocupa ~86px, cruza na altura da primeira
   dobra da fila, e o que fica coberto é uma linha e meia. */
.festa-faixa{
  position:fixed;left:0;right:0;top:44%;z-index:92;pointer-events:none;
  display:flex;align-items:baseline;justify-content:center;gap:16px;
  padding:11px 26px;background:var(--amber);color:#fff;opacity:0;
  will-change:transform,opacity;
}
.festa-faixa-nome{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(28px,4.4vw,68px);line-height:1;letter-spacing:-.01em;
}
.festa-faixa-oq{
  font-family:var(--mono);font-size:clamp(11px,1.2vw,20px);
  letter-spacing:.22em;text-transform:uppercase;opacity:.92;
}

/* ---------- o papel picado (C) ----------
   O canvas nasce no disparo e é removido no fim: ele não mora no DOM. */
/* ELE É DESENHADO EM METADE DA RESOLUÇÃO e esticado aqui. Medido a 1920x1080:
   o canvas em tamanho cheio aloca ~8 MB e custava DOIS quadros de 33,5 ms no
   arranque, que era o único engasgo da festa inteira; a 960x540 sobra um. Papel
   picado a quatro metros não tem detalhe que meia resolução perca, e a TV do
   comitê é 1920x1080 sem retina.

   `image-rendering` fica no padrão de propósito: é a suavização da borda que
   esconde a meia resolução, e `pixelated` faria o contrário. */
.festa-papel{
  position:fixed;inset:0;width:100%;height:100%;z-index:91;pointer-events:none;
}

/* ---------- o Mersinho correndo (C) ----------
   Ele corre rente ao rodapé, POR BAIXO do flash e da faixa e POR CIMA do fim
   da fila. Medido na captura de 1920x1080: ele cruza as duas últimas linhas,
   que são as do 7º e 8º lugares, e some em 2,6 s. Pôr o corredor atrás do
   conteúdo foi a primeira ideia e não funciona numa parede -- o fundo da tela
   é grafite chapado e o boneco simplesmente não aparece. As duas linhas que
   ele cobre são as do fim da fila de propósito: quem a festa está comemorando
   está no topo. */
.festa-corrida{
  position:fixed;left:0;right:0;bottom:0;height:42vh;z-index:88;
  pointer-events:none;overflow:hidden;
}
/* A ARTE VEM DO TEMA (`--festa-corredor`, declarada no `<pele>.extra.css`),
   nunca de um caminho escrito no `.js`: peça de candidato em código quebra o
   white-label, e pele sem a arte não pode pedir um arquivo que não existe. Sem
   o token, o JS nem cria o elemento. */
/* 42vh a 1080 sao ~450px de altura: medido na captura, a 34vh ele passava
   pequeno demais para ser lido a quatro metros, que e a distancia da TV. */
.festa-corredor{
  position:absolute;left:0;bottom:0;height:42vh;width:22vh;display:block;
  background:var(--festa-corredor,none) center bottom/contain no-repeat;
  transform-origin:50% 100%;will-change:transform;
}
/* a fumaça: seis bolotas cinza que crescem e somem atrás dos pés */
.festa-fumaca{
  position:absolute;left:0;bottom:2vh;width:26px;height:26px;
  background:radial-gradient(circle,rgba(232,237,239,.55),rgba(232,237,239,0) 70%);
  opacity:0;will-change:transform,opacity;
}

/* ---------- a régua que desliga tudo ----------
   Uma tela que fica ligada o dia todo na frente de gente que trabalha ali
   precisa disto funcionando, e não como intenção: o JS já não dispara, e o CSS
   também não deixa sobra de camada acesa. */
/* O CINTO, e ele precisa de uma saída declarada. Quando o sistema pede menos
   movimento, o JS já não cria o flash, o papel nem a corrida -- estas linhas
   seguram o caso em que alguém liga com `respeitaSistema:false` e esquece.

   `body:not(.festa-livre)` é a saída, e sem ela a PRÉVIA não serve: o PC do
   comitê está com as animações do Windows desligadas, então o media query vale
   nele sempre, e um `display:none` seco apagaria a faixa e o papel picado
   exatamente na tela onde o Gabriel precisa vê-los para escolher. A classe é
   posta pelo JS só quando o freio do sistema está deliberadamente ignorado.

   O REALCE NÃO ESTÁ NA LISTA, de propósito: cor parada é informação e não é
   movimento, e `.festa-parado` entra e sai sem um quadro interpolado. */
@media (prefers-reduced-motion:reduce){
  body:not(.festa-livre) .festa-faixa,
  body:not(.festa-livre) .festa-papel,
  body:not(.festa-livre) .festa-corrida{display:none}
}
#rk-lista li.festa-parado::after{opacity:.16}

/* ===== css/99-festa-botao.css ===== */
/* ---------- O BOTÃO DA FESTA, ao lado do TV (22/09/2026) ----------
   Ele usa `.rk-tv-btn` do `98-ranking-tv.css` e este arquivo só declara o que
   DIFERE. Copiar a aparência inteira faria as duas divergirem no primeiro
   ajuste feito de um lado só, e eles são o mesmo controle na mesma barra.

   Este arquivo entra DEPOIS do 98 na ordem alfabética do bundle, então com a
   mesma especificidade ele vence -- que é o mecanismo de que o `margin-left`
   abaixo depende. */

/* O `margin-left:auto` do `.rk-tv-btn` empurra o botão para a direita da
   barra. Com DOIS botões carregando a mesma regra, o navegador distribui a
   sobra ENTRE eles: os dois vão para a direita, com um buraco de largura
   variável no meio. O primeiro empurra os dois; o segundo zera a margem e
   encosta no primeiro.

   O VÃO ENTRE ELES É O `gap:12px` QUE O `.rk-topo` JÁ TEM, e não uma margem
   escrita aqui. A primeira versão somava 6px por cima e media 18px na tela:
   dois controles irmãos mais afastados entre si do que do resto da barra. */
.rk-topo .rk-festa-btn{margin-left:auto}
.rk-topo .rk-festa-btn + .rk-tv-btn{margin-left:0}

/* NO MODO TV ELE APAGA JUNTO com o botão TV (o 98 já faz isso por
   `.rk-tv-btn`), e volta inteiro no toque. Numa parede, controle aceso o dia
   todo é sujeira no canto da tela. */

/* ---------- a confirmação do aperto ----------
   O clarão começa em 95 ms e quem apertou está olhando o dedo. A marca diz que
   o aperto pegou, e ela some sozinha em 900 ms (o JS tira a classe).

   `fez` acende no acento; `nao-fez` é o caso de aba escondida ou de motor
   ausente, e ele NÃO é vermelho: o tema do comitê neutraliza as cores
   semânticas de propósito, para nenhuma tela de campanha ler como semáforo.
   Ele fica apagado, que é a ausência do acento -- a mesma gramática do
   termômetro (quente ganha acento, frio perde). */
.rk-topo .rk-festa-btn.fez{background:var(--bg3);color:var(--txt);
  box-shadow:inset 0 -3px 0 var(--amber)}
.rk-topo .rk-festa-btn.nao-fez{opacity:.45}

@media (prefers-reduced-motion:no-preference){
  .rk-topo .rk-festa-btn{transition:background .18s ease,color .18s ease,opacity .18s ease}
}

/* ---------- celular ----------
   O 98 já dá 44px de alvo abaixo de 900px para `.rk-tv-btn`, e isso alcança
   este botão pela classe compartilhada. O que falta é a barra caber: com dois
   botões, o título do cabeçalho e o selo do tempo real na mesma linha, a
   largura estoura a 360px. Aqui os dois descem para uma linha própria, como o
   `97-operacao.css` já faz com o "Abrir todos" da EQUIPE. */
@media (max-width:560px){
  .rk-topo{row-gap:8px}
  .rk-topo .rk-festa-btn{margin-left:0}
  .rk-topo .rk-festa-btn,
  .rk-topo .rk-festa-btn + .rk-tv-btn{flex:1 1 auto;justify-content:center}
}