/* ATENÇÃO: arquivo GERADO. Fonte: src/plataformas.json + src/temas/multiplicai.css.
   Regenerar com: node tools/pele.mjs mersinho5555
   Editar aqui é perder a alteração na próxima geração. */
/* TEMA: Multiplicai (o PRODUTO, base clonavel).
   Pele C, "massa e bloco", escolhida pelo Gabriel em 18/08/2026 entre os tres
   previews de design-dna/. Tokens extraidos do proto-c-massa-e-bloco.html.

   Regra construtiva desta pele: constroi-se com MASSA, nao com linha. Bloco
   solido chapado, encaixe ortogonal, zero contorno visivel, zero sombra, zero
   raio. O que separa duas superficies e um vao de 2px onde o fundo aparece.
   Por isso --tinta e preto puro: sobre grafite ele nao vira moldura, vira vao.

   E o oposto construtivo da pele do Diego, que separa por contorno de 2 a 4px
   mais sombra deslocada. Nao trazer nada de la.

   Cor: amarelo IAI em area cheia, grafite em 7 degraus, neutro frio no texto
   secundario. Nada de verde, azul saturado nem vermelho: em tela de campanha
   essas combinacoes sao lidas como partido. */
:root{
  /* grafite: vao, fundo, superficie, campo */
  --bg:#08090A; --bg2:#16191B; --bg3:#1F2325; --line:#2B3033; --line2:#3A4145;
  --txt:#E8EDEF; --dim:#9AA7AD; --dim2:#78868D;
  --amber:#FFFF02;   /* amarelo IAI: preenche bloco, nunca contorna */
  --gold:#FFFF02;
  --cyan:#78868D;    /* neutro frio no lugar do azul de campanha */
  --azul:#525B60;
  --green:#9AA7AD; --red:#C3CDD1; --violet:#78868D;
  --tinta:#000000;   /* o "contorno" desta pele e o vao, e o vao e preto */
  --display:'Clash Display',ui-sans-serif,system-ui,sans-serif;
  --marca:'Clash Display',ui-sans-serif,system-ui,sans-serif;
  --body:'Satoshi',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  /* sem sombra: massa nao projeta, massa encaixa */
  --dura:none;
  --sobre-acento:#0E1011;
  --marca-estilo:normal;
  /* palco da rede: bloco, com o candidato no centro e raio ate cada origem.
     E a leitura de rede da pele A trazida para a construcao desta: massa
     ortogonal, sem contorno e sem sombra. */
  --rede-forma:bloco;
  --rede-offset:0;
}
/* SELO: bloco amarelo cheio com o X vazado em grafite. Sem contorno. */
.selo{display:block;flex-shrink:0}
.barras.g .selo,.brand .selo{width:34px;height:34px}
.load .selo{width:64px;height:64px}
/* O nome do cliente nesta pele e massa tipografica, nao assinatura manuscrita */
.brand .cand,.load .marca .nome,.lockmarca .nome{
  font-weight:700;letter-spacing:-.02em;text-transform:uppercase}
.load .marca .nome{font-size:38px;line-height:.94}
.lockmarca .nome{font-size:27px;line-height:.96}
/* Massa em vez de moldura: o card e uma superficie, nao uma caixa desenhada */
.lockcard{border:none;box-shadow:none}
.lock::before{opacity:.14}
.tabs,.tabs button,.lock input,.btn-demo,.btn-lock,.demo-tag{border-radius:0}

/* ESCOLHIDO nesta pele e massa amarela, nao `--tinta` sobre `--bg`.
   Os componentes escrevem `background:var(--tinta);color:var(--bg)` para dizer
   "este esta ligado", o que funciona na pele do Diego (grafite escuro sobre
   creme). Aqui `--tinta` e preto puro e `--bg` e grafite quase preto: o item
   escolhido ficava preto sobre preto e ninguem via o que estava selecionado.
   Um lugar so, para nao repetir a correcao em cada componente novo. */
   O `:root` na frente nao e enfeite: o tema e injetado ANTES do CSS dos
   componentes e estes seletores empatam com os de la, entao sem um peso a mais
   ganharia o componente, que e justamente a regra errada. */
:root .redelado .chip.on,
:root .voto .origens button.on{background:var(--amber);color:var(--sobre-acento);
  border-color:var(--amber)}

/* ---------- celular ----------
   Clash Display 700 em caixa alta e bem mais largo que a assinatura italica da
   pele do Diego, e o topo de 390px nao aguenta os mesmos elementos. Aqui o
   header encolhe na ordem certa: primeiro some o que se repete (a etiqueta do
   produto, que o selo ja diz), depois encolhe o que da para ler menor. */
@media(max-width:860px){
  header{gap:6px}
  /* o selo amarelo ja e a marca do produto: a etiqueta escrita vira redundancia */
  .brand .qg{display:none}
  .brand{gap:8px;min-width:0;flex-shrink:1;overflow:hidden}
  .brand .selo{width:26px;height:26px}
  .brand .cand{font-size:11.5px;line-height:1.02;letter-spacing:-.01em;
    white-space:normal;gap:8px;min-width:0}
  .brand .cand>span{display:block;overflow:hidden;text-overflow:ellipsis}
  .tabs button{padding:6px 9px;font-size:10.5px;letter-spacing:.2px;min-height:42px}
  .demo-tag{font-size:8px;padding:3px 5px;min-height:36px}
  .btn-voto{font-size:11px;padding:6px 10px}
  .load .marca .nome{font-size:26px}
  .lockmarca .nome{font-size:22px}
}
/* telas bem estreitas: o nome do candidato cede o lugar para a navegacao,
   porque quem esta usando ja sabe de quem e a campanha */
/* O SELO mora dentro de `.cand` no index.html, entao esconder `.cand` inteira
   apagava tambem o simbolo e o topo ficava sem marca nenhuma em 390px. Some so
   o texto do nome; o simbolo fica, que e o que identifica o aplicativo.
   `:root` na frente porque 10-header.css declara `.brand .cand{display:flex}`
   com a mesma especificidade e vem DEPOIS do tema. */
@media(max-width:430px){
  :root .brand .cand>span:last-child{display:none}
  .demo-tag .longo{display:none}
}

/* A barra de filtros do palco quebrava em duas linhas no celular e comia um
   terco da rede. Vira uma faixa unica que rola de lado. */
/* Seletor com o pai de proposito: o tema e injetado ANTES do CSS dos
   componentes, e 70-rede.css tem `.redetools{flex-wrap:wrap}` com a mesma
   especificidade. Empatou, ganha quem vem depois, que la e o componente. */
@media(max-width:860px){
  /* Revelacao progressiva: no celular os filtros nascem recolhidos num botao
     e so ocupam a tela quando alguem pede. O palco fica para a rede. */
  .redepalco .redetools{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    max-width:calc(100% - 22px);padding-bottom:2px}
  .redepalco .redetools::-webkit-scrollbar{display:none}
  .redepalco .redetools .mt{flex:0 0 auto;font-size:10.5px;padding:6px 9px;white-space:nowrap}
  .redepalco .redetools:not(.aberta) .mt{display:none}
  .redepalco .redetools:not(.aberta) .mt.on{display:block}   /* o ativo vira o resumo */
  .redepalco .redetools .abre-filtros{display:block;flex:0 0 auto;font-size:10.5px;
    padding:6px 9px;white-space:nowrap;background:var(--bg3);color:var(--dim);
    font-weight:700}
  .redepalco .redetools.aberta .abre-filtros{background:var(--amber);color:var(--sobre-acento)}
  .redepalco .redepe{display:none}
  .redepalco .redezoom button{width:30px;height:30px;font-size:14px}
}
/* fora do celular o botao de abrir nao existe */
.redetools .abre-filtros{display:none}

/* Etiqueta "aí" do wordmark do produto. Aqui o Multiplicai E a marca principal,
   entao o bloco amarelo tem presenca: respiro maior e canto reto, seguindo a
   regra construtiva desta pele (massa chapada, zero raio, zero contorno). */
:root{
  --marca-ai-pad:.2em .4em .24em;
  --marca-ai-gap:.16em;
  --marca-ai-raio:0;
}
/* no header a etiqueta amarela ja marca; o corpo da palavra pode clarear um
   grau para o bloco ganhar o contraste */
.brand .qg,.lockmarca .qg,.load .qg{color:var(--dim)}

/* ======================================================================
   PELE DE CANDIDATO: Mersinho Lucena
   GERADO por tools/pele.mjs — não editar à mão, a próxima geração apaga.
   Para mudar: src/plataformas.json, depois `node tools/pele.mjs mersinho5555`.

   Acento: #EF7316 (já passava, não foi mexido)
   Origem: O laranja do Mersinho medido na arte digital da própria campanha, a mesma contagem de pixels que fixou a paleta do comitê em 11/09/2026: no `juventude mersinho.png` os laranjas #FC6C00 (18,7%), #FC6000 (5,1%) e #FC7800 (2,8%) somam 26,6% da tinta. O sub é o azul #3014E7 da mesma paleta. Escolhido por cima do #FC5A00 da entrada `mersinho`, que veio de material impresso fotografado (confiança MÉDIA); esta é arte digital nativa.
   Contraste sobre o grafite #08090A: bloco 6.77:1, texto 6.77:1
   Segundo acento: #3014E7 ajustado para #5139EE, 3.01:1
   Ambos passam no AA da WCAG.
   ====================================================================== */

/* O acento troca de dono: era o amarelo do produto, passa a ser a cor dele. */
:root{
  --amber:#EF7316;
  --gold:#EF7316;
  --acento-texto:#EF7316;
  --acento-fundo:#2D1A0C;
  --sobre-acento:#0E1011;
  /* a segunda cor da campanha. Sem ela declarada, vira o proprio acento: melhor
     repetir a cor dele do que inventar uma que a campanha nao usa. */
  /* A barra da demonstracao le o token acento2. Invertendo, ela passa a receber
     o acento principal, e o botao Entrar recebe o apoio — ver a nota em paleta().
     Sem crase neste comentario: ele vive dentro de um template literal, e uma
     crase aqui fecha a string. Quarta vez que esta armadilha morde no projeto. */
  --acento2:#5139EE;
  --acento2-texto:#7663F1;
  /* A FRENTE do acento2, e ela espelha a linha do --acento2 acima porque tem de
     falar da MESMA cor: quem inverte recebe o acento principal na barra, e a
     frente tem de ser a frente dele. Sem este espelho, inverter trocaria o fundo
     e deixaria o texto do outro. Nao confundir com --acento2-texto, que e o
     proprio acento ajustado para virar texto SOBRE O GRAFITE — o nome parece o
     mesmo e o papel e o oposto, e foi essa confusao que a barra pagou. */
  --sobre-acento2:#FFFFFF;
  --cor-entrar:#EF7316;
}

/* --------------------------------------------------- a marca do candidato
   O nome dele é o que a tela diz primeiro. Massa, caixa alta, sem itálico:
   a mesma construção do chassi, aplicada a outro nome. */
.brand .cand,.load .marca .nome,.lockmarca .nome{
  font-weight:700;letter-spacing:-.02em;text-transform:uppercase}
.load .marca .nome{font-size:38px;line-height:.94}
.lockmarca .nome{font-size:27px;line-height:.96}

/* --------------------------------------------------- o produto, discreto
   Etiqueta em versalete cinza. Continua legível e continua dizendo de quem é a
   ferramenta, sem disputar a tela com o nome do candidato. */
:root .brand .qg,:root .lockmarca .qg,:root .load .qg{
  color:var(--dim2);
  font-family:var(--body);
  font-weight:600;
  font-size:9.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:.72}
/* A etiqueta "aí" do wordmark perde a massa amarela: na pele do produto ela é a
   marca, aqui seria um bloco de cor competindo com o nome dele. Vira sublinhado
   de peso, que preserva o corte da palavra sem gritar. */
:root{
  --marca-ai-pad:0;
  --marca-ai-gap:0;
  --marca-ai-raio:0;
}
:root .brand .qg .ai,:root .lockmarca .qg .ai,:root .load .qg .ai{
  background:none;color:var(--dim);
  box-shadow:inset 0 -.14em 0 var(--acento-texto)}

/* No celular o produto sai do topo antes de qualquer outra coisa: 390px de
   largura não comportam duas marcas, e a que precisa ficar é a dele. */
@media(max-width:860px){
  .brand .qg{display:none}
}



/* ===== EXTRA DA PELE: src/temas/mersinho5555.extra.css (FONTE, escrito a mao; o gerado acima nao) ===== */
/* ---------- EXTRA DA PELE: Mersinho 5555 (20/09/2026) ----------
 * FONTE, escrito à mão. O tools/pele.mjs anexa este arquivo ao fim do
 * src/temas/mersinho5555.css gerado, depois dos tokens de acento — que é o que
 * permite sobrescrevê-los daqui. O arquivo gerado NÃO se edita; este sim.
 *
 * O que mora aqui é o que um gerador não teria como saber: a tipografia da
 * campanha dele e a decoração das duas telas que não são o app (a porta e a
 * carga). Nada de layout: o chassi é o mesmo das outras vinte e nove.
 *
 * A pele nasce irmã da do comitê e reusa as escolhas que já foram aprovadas lá
 * em 11/09/2026 — o que muda é a paleta, que aqui é só a dele: o framboesa do
 * Cícero não aparece em lugar nenhum desta tela.
 */

/* ---------- a tipografia da campanha ----------
   As três já viajam em src/assets/vendor/fontes/ (baixadas por
   tools/baixa-fontes.mjs) porque o comitê as usa. Declarar aqui não custa uma
   requisição a mais: é o mesmo arquivo de fontes servido do próprio domínio. */
:root{
  --display:'Big Shoulders Display',Impact,ui-sans-serif,system-ui,sans-serif;
  --marca:'Big Shoulders Display',Impact,ui-sans-serif,system-ui,sans-serif;
  --body:'Public Sans',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  --mono:'Martian Mono',ui-monospace,Consolas,monospace;
}

/* ---------- as duas cores que o tema gerado não carrega ----------
   O `pele.mjs` escreve `--amber` (o laranja) e `--acento2` (o azul, clareado
   para passar no contraste). O Design DNA dele tem mais duas, e elas são o
   mesmo par que o comitê declara: o azul cobalto puro e o magenta.

   Elas não pintam interface — não há terceiro nem quarto papel de cor na tela.
   Entram como LUZ: o brilho da porta logo abaixo, e o degrau do meio da rampa
   de calor do mapa v3 (`mapaV3Rampa()` em src/js/42-mapa-v3.js, que lê
   `--violet`). Sem esta declaração o mapa cairia no valor escrito no .js, e
   cor de campanha que mora em código é a família de erro que este projeto já
   pagou caro. */
:root{
  --azul:#3014E7;
  --violet:#A11E8F;
}

/* ---------- PORTA: o brilho da paleta dele atrás do cartão ----------
   Só gradiente: zero imagem, zero requisição. As três manchas são o laranja
   #EF7316 (o acento), o azul #3014E7 (o sub) e o magenta #A11E8F, que é a
   terceira cor do Design DNA dele e que não tem lugar na interface — aqui ela
   entra como luz, que é o único jeito de uma cor participar sem virar regra.

   O mapa serigrafado (::before) e os polos (::after) do chassi continuam por
   cima, como em todas as peles. */
:root .lock{
  background:
    radial-gradient(58% 46% at 50% 38%, rgba(239,115,22,.22), transparent 72%),
    radial-gradient(46% 40% at 12% 92%, rgba(48,20,231,.20), transparent 70%),
    radial-gradient(38% 34% at 90% 8%, rgba(161,30,143,.18), transparent 70%),
    var(--bg);
}

/* ---------- CARGA: o Mersinho correndo ----------
   `.load` é position:fixed, então o ::after ancora nele. WebP com alfa, 49 KB,
   aparece só nesta tela e some com ela. Só transform, e respeitando quem pediu
   menos movimento — a mesma peça e a mesma regra do comitê. */
:root .load{overflow:hidden}
.load::after{
  content:'';position:absolute;right:max(2vw,8px);bottom:-10px;
  width:min(30vw,180px);aspect-ratio:380/739;
  background:url(assets/correndo.webp) center bottom/contain no-repeat;
  pointer-events:none;
}
@media(prefers-reduced-motion:no-preference){
  .load::after{animation:m5555-corre 1.15s ease-in-out infinite alternate}
  @keyframes m5555-corre{from{transform:translateY(0)}to{transform:translateY(-7px)}}
}

/* ---------- AS PEÇAS QUE A CHAPA TRAZ JUNTO (20/09/2026) ----------
 * Entraram com o `chapa` no registro, clonadas da pele do comitê. Elas não são
 * decoração: sem estes blocos, o chip "Cícero e Mersinho" do cadastro e o badge
 * "Chapa inteira" do mapa ficariam como texto solto, do mesmo tamanho dos
 * outros dois — e o pedido de 15 e 17/09 no comitê foi exatamente o contrário.
 *
 * O CAMINHO DA IMAGEM MORA AQUI, e é a razão de este bloco ser da pele e não do
 * CSS compartilhado: `assets/cabecas.webp` existe nesta pele e na do comitê, e
 * em mais nenhuma das outras vinte e oito. Escrever o caminho no .js de todo
 * mundo pediria um arquivo que só duas peles têm.
 */

/* O CHIP DE VOTO DO CADASTRO. As cabeças dobram de tamanho, o chip da chapa
   inteira ocupa a linha, e "só um" e "só o outro" ficam menores embaixo. Nada
   nasce marcado: a escolha é obrigatória na V3. */
#v-chapa.chapa-cabecas button[data-v="ambos"]{flex:1 0 100%;min-height:76px;padding:6px 12px;border:3px solid var(--amber)}
#v-chapa button[data-v="ambos"]::before{
  content:'';
  display:block;
  width:52px;height:30px;
  background:url(assets/cabecas.webp) center/contain no-repeat;
}
#v-chapa.chapa-cabecas button[data-v="ambos"]::before{width:112px;height:62px}
:root .voto .chapa-cabecas button:not([data-v="ambos"]){font-size:12px;min-height:44px;opacity:.92}

/* O BADGE DE VOTOS DO MAPA. Quem marca o botão é o 41-mapa-v2.js, com
   `data-cabecas`, e ele marca só.

   O TEXTO CONTINUA NO HTML, escondido da vista e não do acessível: quem usa
   leitor de tela ouve "Chapa inteira", e imagem de fundo não é anunciada. */
:root #mv-opcoes button[data-cabecas]{gap:10px}
:root #mv-opcoes button[data-cabecas]::before{
  content:'';
  display:block;
  width:58px;height:30px;flex-shrink:0;
  background:url(assets/cabecas.webp) center/contain no-repeat;
}
:root #mv-opcoes button[data-cabecas] .mv-op-t{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* O texto sai do fluxo, então o número precisa de alguém que o empurre para a
   direita: sem isto ele encostaria na imagem. */
:root #mv-opcoes button[data-cabecas] .mv-op-n{margin-left:auto}


/* ============================================================================
   O CHASSI V3 DAS TELAS DE DENTRO, COPIADO DO COMITÊ  ·  20/09/2026

   Pedido do Gabriel, na letra: "eu quero os ícones do mapa igual o da main".
   Medido antes de copiar, nos dois builds a 1440px, nos botões de camada do
   mapa (`.mt`):

     comitê      Martian Mono · CAIXA ALTA · tracking 1,035px · sem borda
     mersinho    Public Sans  · caixa mista · tracking 0,4px   · borda de 2px

   O GLIFO ERA O MESMO NOS DOIS (● ✓ ★ ⌕): a diferença não estava no ícone, e
   sim na LINGUAGEM em volta dele. Trocar só o `.mt` deixaria o botão de camada
   em versalete mono ao lado de uma barra de KPIs, um campo de busca e uma
   gaveta de filtros na tipografia antiga — na MESMA tela. Por isso o que entra
   é o bloco inteiro do chassi V3, que é a unidade em que ele foi escrito.

   É CÓPIA LITERAL das linhas 391-515 de src/temas/comite.extra.css, sem uma
   vírgula mudada, e isso é deliberado em vez de preguiça: a regra da casa
   (CLAUDE.md, 12/09/2026) diz que a referência do projeto é o comitê e que pele
   nova se copia dele. Uma versão "melhorada" aqui faria as duas divergirem no
   primeiro conserto feito de um lado só, e o espelho deixaria de ser espelho.

   ELE NÃO TOCA NA PORTA NEM NA CARGA. As seções de porta, arte e chapa do
   arquivo do comitê ficaram de fora: aquilo é identidade, e a identidade desta
   pele é a do Mersinho. O que se copiou foi a gramática das telas de dentro —
   as três abas que esta pele serve.

   A COR SAI DAQUI, NÃO DE LÁ. O bloco usa `var(--amber)`, que nesta pele é o
   laranja #EF7316. Nenhum valor de cor do comitê atravessa.
   ============================================================================ */

/* ============================================================================
   O CHASSI V3 NAS TELAS DE DENTRO  ·  11/09/2026

   A porta e a tela do cabo ja eram V3; o resto do aplicativo (mapa, rede,
   disputa, operacao, validar, funil, importar, equipe, administrativo, RH,
   tecnologia) continuava com o chassi antigo — botao de 12px, titulo em Clash,
   cartao com filete. Esta camada troca a LINGUAGEM dos componentes, sem tocar
   em nenhuma marcacao: os arquivos de tela continuam os mesmos para as outras
   26 peles, porque este arquivo so e anexado ao tema desta.

   A gramatica da V3, em quatro regras:
     1. titulo condensado, caixa alta, apertado (Big Shoulders 900);
     2. rotulo e carimbo em mono, 10-11px, versalete com tracking largo;
     3. superficie chapada, raio zero, sem sombra: o "contorno" e o vao onde o
        fundo aparece;
     4. cor cheia so em bloco de acao, uma vez por tela, nunca como fundo.
   ============================================================================ */

/* ---------- 1. titulos ---------- */
main h1, main h2, main h3,
.opsec > b, .optopo b, .admwrap h2, .admwrap h3, .eqtopo b, .monbar b{
  font-family:var(--display);
  font-weight:900;
  letter-spacing:.01em;
  text-transform:uppercase;
  line-height:.94;
}
main h2{font-size:clamp(26px,7.6vw,34px)}
main h3{font-size:clamp(19px,5.4vw,23px)}

/* ---------- 2. rotulos e carimbos ---------- */
aside .fgrp h3, .opkpi span, .admcard-t, .monlegenda, .eqselo, .optag, .admtag,
.scale .t, .legend, .redepe, .kpi span{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.15em;
  text-transform:uppercase;
}

/* ---------- 3. as abas do topo ---------- */
:root .tabs button{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.11em;
  text-transform:uppercase;
  min-height:44px;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:rgba(255,255,255,.06);
  color:var(--dim);
}
:root .tabs button.on{background:var(--amber);color:#fff}

/* ---------- 4. botoes e chips ---------- */
:root .mt, :root .opbtn, :root .admchip, :root .telabtn, :root .monsel,
:root .nm-chip, :root .relpill, :root .eqlnk, :root .btn-reset, :root .mobtoggle,
:root .asideclose, :root .cabo-btn, :root .fbtn{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
  min-height:44px;
  padding:0 14px;
  border-radius:0;
  border:0;
  box-shadow:none;
  background:rgba(255,255,255,.07);
  color:var(--txt);
}
:root .mt.on, :root .opbtn.on, :root .admchip.on, :root .monsel.on,
:root .nm-chip.on, :root .fbtn.pri{background:var(--amber);color:#fff}
:root .mt:active, :root .opbtn:active{transform:translateY(1px)}

/* ---------- 5. superficies: chapado, raio zero, sem sombra ---------- */
:root .card, :root .opcard, :root .opblk, :root .admcard, :root .eqcard,
:root .bugcard, :root .monitem, :root .oplinha, :root .admlin, :root .eqlinha,
:root .ficha, :root .disp > *, :root .redelado, :root .opwrap > *, :root .admwrap > *,
:root .opeq, :root .opgav, :root .opsub{
  border-radius:0;
  box-shadow:none;
}
:root .card, :root .opcard, :root .opblk, :root .admcard, :root .eqcard,
:root .bugcard, :root .monitem, :root .opeq{
  background:rgba(255,255,255,.045);
  border:0;
}
/* O card da EQUIPE (15/09/2026): o cabo dentro do card do supervisor fica no
   fundo da página, e é esse degrau de tom que diz "isto está dentro daquilo"
   sem borda nem sombra. O "meta batida" continua sendo o bloco de acento no
   canto e a barra cheia: com a sombra fora, é isso que sobra para ser notado. */
:root .opeq.filho{background:var(--bg)}
:root .opeq.filho.bateu{box-shadow:inset 0 0 0 1.5px var(--amber)}

/* ---------- 6. campos ---------- */
:root main input[type="text"], :root main input[type="search"], :root main input:not([type]),
:root main select, :root main textarea, :root .searchbox input, :root .eqbusca input{
  min-height:48px;
  border-radius:0;
  border:0;
  background:rgba(255,255,255,.07);
  color:var(--txt);
  font-family:var(--body);
}
:root main input:focus, :root main select:focus, :root main textarea:focus{
  outline:2px solid var(--amber);
  outline-offset:-2px;
  box-shadow:none;
}

/* ---------- 7. os numeros grandes ---------- */
:root .kpi b, :root .opnums b, :root .opkpi b, :root .admvalor, :root .placar b,
:root .montotal b, :root .opmeta-t b, :root .eqcontagem b{
  font-family:var(--display);
  font-weight:900;
  letter-spacing:.01em;
}

/* ---------- 8. a barra de KPIs vira a faixa de estatistica da V3 ---------- */
:root .kpibar{background:transparent;border:0;box-shadow:none;gap:6px}
:root .kpibar .kpi{background:rgba(255,255,255,.045);border:0;border-radius:0;padding:14px}

/* ---------- 9. a gaveta de filtros ---------- */
:root aside{border-radius:0}
:root aside .fgrp h3{color:var(--dim)}