/* ===== 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-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/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)}
/* O SÍMBOLO E O RÓTULO, LADO A LADO (20/09/2026, quando os cinco caracteres
   viraram SVG — ver o comentário no index.html).
   `flex` e `gap` em vez do espaço que havia no texto: com `letter-spacing`
   ligado, um espaço comum herda o tracking e o vão passa a mudar de tamanho a
   cada pele. O vão aqui é uma medida, não um caractere.
   O ÍCONE MEDE EM `em`, e não em pixel: ele acompanha o corpo do rótulo, que vai
   de 11px no desktop a 16 no celular em algumas peles. Em pixel fixo, ele
   encolheria em relação ao texto justamente na tela menor. */
.mt{display:flex;align-items:center;gap:.62em}
.mtico{width:1.18em;height:1.18em;flex:0 0 auto;display:block}
.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)}
: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))}
: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}
: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/52-mapa-v3.css ===== */
/* ---------- O MAPA V3 (20/09/2026) ----------
 * Tudo aqui vive sob `:root[data-mapa3="v3"]`, que o 42-mapa-v3.js escreve
 * quando a pele declara `mapaV3` em src/plataformas.json. Sem o atributo,
 * nenhuma regra deste arquivo casa: ele viaja no bundle das trinta peles e não
 * pinta um pixel em vinte e nove delas.
 *
 * ATRIBUTO PRÓPRIO, e não um segundo valor de `data-mapa`: o 51-mapa-v2.css
 * inteiro depende de `[data-mapa="v2"]`, e o v3 é uma camada SOBRE o v2, não uma
 * troca. Quem declara `mapaV3` declara `mapaV2` junto, e os dois atributos
 * convivem no <html>.
 *
 * A CONSTRUÇÃO CONTINUA SENDO A DA CASA: bloco chapado, vão de 2px em preto no
 * lugar de contorno, zero raio, zero sombra, nada de vidro e nada de gradiente.
 * O "moderno" que o pedido pede está no MAPA — base escura, contorno aceso,
 * brilho embaixo do dado —, e não na moldura em volta dele. Trocar os blocos da
 * casa por cartões de vidro arredondados seria refazer a identidade de trinta
 * plataformas para atender a uma.
 */

/* O FUNDO DEBAIXO DO CANVAS. Enquanto os quadrantes da Mapbox não chegam, o
   `#map` mostra o que estiver atrás dele — que era branco. Numa tela escura isso
   é um flash branco de tela cheia a cada carga, e ele aparecia justamente na
   pior hora: a primeira vez que a pessoa abre a plataforma. */
:root[data-mapa3="v3"] #map{background:#08090A}
:root[data-mapa3="v3"] #map canvas{outline:none}

/* ---------- os controles da Mapbox ----------
 * O `NavigationControl` (mais e menos, canto inferior direito) nasce branco,
 * arredondado e com sombra suave: as três coisas que esta casa não faz. Numa
 * base escura ele também vira a peça mais clara da tela inteira, disputando o
 * olho com o dado.
 *
 * `!important` porque a folha da Mapbox vem depois da nossa no documento — é o
 * mesmo motivo pelo qual o `.mapbox-tip` do 50-mapa.css já usa. */
:root[data-mapa3="v3"] .mapboxgl-ctrl-group{
  background:var(--bg2)!important;border:2px solid var(--tinta)!important;
  border-radius:0!important;box-shadow:none!important;overflow:hidden}
:root[data-mapa3="v3"] .mapboxgl-ctrl-group button{
  width:32px;height:32px;background:var(--bg2)!important;border-radius:0!important}
:root[data-mapa3="v3"] .mapboxgl-ctrl-group button+button{
  border-top:2px solid var(--tinta)!important}
:root[data-mapa3="v3"] .mapboxgl-ctrl-group button:hover{background:var(--bg3)!important}
/* Os ícones da Mapbox são SVG embutidos e pretos. Sobre `--bg2` escuro eles
   somem; `invert` é o único caminho que não depende de reescrever o `data:` URI
   de cada botão, que mudaria na próxima versão da biblioteca. */
:root[data-mapa3="v3"] .mapboxgl-ctrl-group button .mapboxgl-ctrl-icon{
  filter:invert(1) brightness(1.15)}
:root[data-mapa3="v3"] .mapboxgl-ctrl-group button:focus-visible{
  outline:2px solid var(--amber);outline-offset:-2px}

/* O logo da Mapbox FICA: é exigência da licença do mapa, não escolha de
   desenho. O que ele ganha aqui é opacidade menor, para parar de brigar com o
   dado sem deixar de estar na tela. */
:root[data-mapa3="v3"] .mapboxgl-ctrl-logo{opacity:.38}
:root[data-mapa3="v3"] .mapboxgl-ctrl-logo:hover{opacity:.75}

/* ---------- o ponto escolhido ----------
 * Clicar numa pessoa abre a ficha e o ponto dela continuava igual aos outros
 * trezentos: a tela mostrava a ficha de alguém sem dizer onde esse alguém está.
 * O anel pulsante resolve sem mexer no desenho dos pontos (que é do 40-mapa.js e
 * vale para as trinta peles) — ele é um elemento à parte, posicionado pelo
 * Mapbox como marcador.
 *
 * `prefers-reduced-motion` desliga a pulsação e deixa o anel parado: o anel é a
 * informação, o pulso é só o que chama o olho até ele. */
:root[data-mapa3="v3"] .v3-mira{
  width:34px;height:34px;border:2px solid var(--amber);border-radius:50%;
  pointer-events:none;animation:v3pulso 1.8s ease-out infinite}
@keyframes v3pulso{
  0%{transform:scale(.55);opacity:1}
  100%{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){
  :root[data-mapa3="v3"] .v3-mira{animation:none;transform:scale(1);opacity:.8}}

/* ---------- a busca e as camadas ----------
 * AQUI HAVIA UMA REGRA QUE ENGROSSAVA A BORDA DELES, e ela saiu em 20/09/2026
 * sem trocar um pixel na tela — o que prova que já não fazia nada.
 *
 * Ela nasceu quando esta pele ainda usava o chassi antigo, onde `.mt` e o campo
 * de busca tinham contorno: sobre a base escura, com o halo do contorno do
 * estado passando atrás, 2px de tinta separavam o bloco do mapa. No mesmo dia a
 * pele passou a carregar o chassi V3 do comitê, e lá a gramática é outra: o
 * "contorno" é o VÃO onde o fundo aparece, e os blocos declaram `border:0`.
 *
 * `border:0` é atalho e zera também o `border-style`. Uma regra posterior que
 * declare só `border-width:2px` fica com estilo `none` e computa 0px — ela
 * continuava no arquivo, parecendo governar a borda, e não governava nada.
 * Medido: `border-top-width` 0px nas duas peles, com a regra e sem ela.
 *
 * Quem decide a borda destes blocos é o tema da pele, e é o lugar certo: é o
 * tema que sabe se aquela pele desenha com contorno ou com vão. */
:root[data-mapa3="v3"] .mt.on{background:var(--amber);color:var(--sobre-acento,#0E1011)}

/* ===== 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/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}
.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}

/* 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}
.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}
.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{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 button.pri{background:var(--amber);color:var(--sobre-acento)}
.cabo-dlg .b button[disabled]{opacity:.55;cursor:wait}

/* ---------- 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/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)}
.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}
.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}

/* 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}

/* ===== 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)}
.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}
  .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/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}

/* ---------- o bloco "Abrir chamado" ----------
 * Separado do painel de aprovação de propósito: um é "decidir sobre o que a
 * equipe reportou", o outro é "eu, da tecnologia, já sei o que houve e vou
 * abrir a tarefa direto". Confundir os dois visualmente faria o botão de
 * abrir sumir no meio da fila de cartões. A borda em --amber é a mesma cor
 * do botão de enviar do formulário leigo (.bugenviar): aqui também é ação,
 * não é status. */
.tecabrir{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  max-width:860px;margin-bottom:18px;padding:14px 16px;
  background:var(--bg2);border:2px solid var(--tinta);border-left:4px solid var(--amber);
  box-shadow:var(--dura)}
.tecabrirtxt{flex:1 1 240px;min-width:0}
.tecabrirtxt strong{
  display:block;font-family:var(--display);font-size:16px;font-weight:800;
  text-transform:uppercase;letter-spacing:-.2px;margin-bottom:3px}
.tecabrirtxt p{font-size:12.5px;line-height:1.5;color:var(--dim);margin:0}
.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}

.bugchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.bugchip{
  min-height:44px;padding:0 14px;display:inline-flex;align-items:center;gap:7px;
  border:2px solid var(--line2);background:var(--bg2);color:var(--txt);
  font-size:12.5px;font-weight:700;cursor:pointer;border-radius:0}
.bugchip b{
  font-family:var(--mono);font-size:11px;font-weight:700;color:var(--dim);
  border:1.5px solid var(--line2);padding:1px 6px;min-width:22px;text-align:center}
.bugchip:hover{border-color:var(--tinta)}
.bugchip.on{background:var(--gold);color:var(--tinta);border-color:var(--tinta)}
.bugchip.on b{color:var(--tinta);border-color:var(--tinta)}
.bugatualiza{margin-left:auto;color:var(--dim)}
.bugchip:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

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

/* ---------- o cartão de um report ---------- */
.bugcard{
  border:2px solid var(--tinta);background:var(--bg2);box-shadow:var(--dura);
  padding:14px;min-width:0}
.bugtopo{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-bottom:8px}
.bugbadge{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;padding:3px 7px;border:1.5px solid var(--line2);color:var(--dim);white-space:nowrap}
.bugcard.estado-aberto .bugbadge{border-color:var(--amber);color:var(--amber)}
.bugcard.estado-em_andamento .bugbadge{border-color:var(--gold);color:var(--gold)}
.bugcard.estado-resolvido .bugbadge{border-color:var(--green);color:var(--green)}
.bugcard.estado-descartado{opacity:.75}
.bugquem{font-weight:800;font-size:13.5px;overflow-wrap:anywhere}
.bugquando{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--dim);white-space:nowrap}
.bugtela{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.03em;margin-bottom:8px}
.bugtela b{color:var(--txt);font-weight:700}
.bugtexto{
  white-space:pre-wrap;overflow-wrap:anywhere;
  font-size:14px;line-height:1.55;color:var(--txt);margin-bottom:10px}

/* 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}
.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}
  .tecabrir{flex-direction:column;align-items:stretch;padding:12px 14px}
  /* ANTERIOR A 19/09 E ACHADO MEDINDO: em coluna, o `flex-basis:240px` de
     .tecabrirtxt deixa de ser largura e vira ALTURA, e o bloco ficava com
     326px para um conteudo de 100 — uns 140px de vazio entre o texto e o
     botao, em toda tela abaixo de 860px. `auto` devolve a altura ao conteudo. */
  .tecabrirtxt{flex:1 1 auto}
  .tecabrirbtn{width:100%}
  .bugchips{gap:6px}
  .bugchip{padding:0 11px;font-size:12px}
  .bugatualiza{margin-left:0}
  .bugcard{padding:12px}
  .bugquando{margin-left:0;width:100%}
  .bugctxd dl{grid-template-columns:1fr;gap:2px 0}
  .bugctxd dt{margin-top:6px}
  .bugbtns button{min-width:100%}
}
@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 ----------
   COR SEMÂNTICA NÃO SERVE AQUI. O tema do comitê neutraliza --green e --red de
   propósito (os dois saem cinza), para nenhuma tela de campanha ler como
   semáforo. Quem marca "isto espera você" é --acento-texto, que é o acento com
   a luminância ajustada pelo tools/pele.mjs e tem contraste medido; o fallback
   para --amber cobre a pele que não declarar a variável. */
.bugcard.estado-triado .bugbadge{border-color:var(--line2);color:var(--txt)}
.bugcard.estado-aguardando_aprovacao .bugbadge,
.bugcard.estado-reaberto .bugbadge,
.bugcard.estado-em_correcao .bugbadge{
  border-color:var(--acento-texto,var(--amber));color:var(--acento-texto,var(--amber))}
.bugcard.estado-aprovado .bugbadge,
.bugcard.estado-corrigido .bugbadge,
.bugcard.estado-aguardando_confirmacao .bugbadge{border-color:var(--gold);color:var(--gold)}
.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}
}

/* ------------------------------------------------------------------ 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}
}

/* ===== 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)}

/* O impacto é a única cor de alerta da fila, e ela vem do cartão, não da
   etiqueta: cor em etiqueta pequena some no celular com sol na tela. */
.relimpacto{color:var(--dim)}
.bugcard.imp-parou .relimpacto{color:var(--red);border-color:var(--red)}
.bugcard.imp-parou{border-left:4px solid var(--red)}
.bugcard.imp-medio{border-left:4px solid var(--gold)}
.bugcard.imp-leve{border-left:4px solid var(--line2)}
.bugcard.estado-reaberto{border-left:4px solid var(--red)}
.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/99-candidato.css ===== */
/* ---------- O PAINEL DO CANDIDATO (20/09/2026) ----------
 * Tudo aqui vive sob `:root[data-leitura="1"]`, que o src/js/43-candidato.js
 * escreve quando a pele declara `painelCandidato` em src/plataformas.json.
 * Sem o atributo, nenhuma regra deste arquivo casa: ele viaja no bundle das
 * trinta peles e não esconde um pixel em vinte e nove delas.
 *
 * POR QUE CSS E NÃO `remove()`, e isto custou uma rodada em 20/09/2026.
 *
 * A primeira versão arrancava os botões do DOM no `DOMContentLoaded`, com o
 * argumento de que botão escondido continua sendo alcançado por teclado. O
 * argumento estava errado duas vezes:
 *
 *   1. `display:none` TIRA do fluxo e da ordem de tabulação. O risco que eu
 *      quis evitar não existia.
 *   2. O boot do app CONTA com esses elementos. `initVoto()` (js/90) faz
 *      `el('b-voto').onclick = ...` sem conferir, e com o botão arrancado ele
 *      lançava `Cannot set properties of null` — dentro do `boot()`, que parava
 *      ali. As telas criadas DEPOIS dele nunca nasciam: foi assim que a aba
 *      ADMINISTRATIVO sumiu inteira de um painel que existe para mostrá-la.
 *
 * A lição que fica: numa tela que outro arquivo monta, esconder é de quem
 * desenha e arrancar é de quem construiu. O CSS esconde; quem de fato impede a
 * gravação é o `PODE_ESCREVER` (js/55) — e nem ele é permissão, que é da RLS.
 */

/* ---------- o que escreve dado de campanha ---------- */
/* O +1 Voto, nos dois lugares em que ele existe: a navbar (mapa v2) e a barra
   fixa do rodapé do celular. Esconder um e deixar o outro entregaria no
   telefone exatamente o botão que se quis tirar do computador. */
:root[data-leitura="1"] #b-voto,
:root[data-leitura="1"] #b-voto-mob,
:root[data-leitura="1"] .voto-barra{display:none}
/* "+ Nova liderança", na gaveta de filtros do mapa. Ele já nasce `hidden` e só
   aparece para quem pode escrever (js/10); a regra fica como segunda tranca. */
:root[data-leitura="1"] #nova{display:none}
/* O formulário de despesa do administrativo. */
:root[data-leitura="1"] #adm-form{display:none}

/* ---------- o administrativo fica nos quatro cartões ----------
   Pedido do Gabriel, na letra: "no administrativo eu só quero que apareça as
   informações gastos do mês, a pagar, pago no mês, contatos hoje".

   Saem as seções inteiras — Despesas, Resumo, Desempenho do escritório, a fila
   de cadastro e Colaboradores. Nenhuma delas é acompanhar o desempenho: são as
   telas de quem OPERA o comitê, e o pedido separou os dois papéis.

   `section.opsec` alcança todas de uma vez, inclusive uma sexta que nasça
   depois — o esqueleto do js/69 monta cada seção com essa mesma classe. Uma
   lista de ids envelheceria calada no dia em que alguém acrescentasse outra. */
:root[data-leitura="1"] #admwrap section.opsec{display:none}
/* O botão Atualizar fica: ele só relê, e é o caminho de quem quer o número de
   agora sem recarregar a página inteira. */