/* ATENÇÃO: arquivo GERADO. Fonte: src/plataformas.json + src/temas/multiplicai.css.
Regenerar com: node tools/pele.mjs comite
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;
/* a unica excecao a neutralizacao acima: o aviso do dialogo do Zap
(#cabo-zdlg, em 96-cabo.css). 5,40:1 sobre o --bg2 desta familia. */
--zap-alerta:#FF4D4D;
--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: Cícero e 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 comite`.
Acento: #F90156 ajustado para #F90156
Origem: Paleta fixada pelo Gabriel em 11/09/2026 para o rebranding do comitê, e confirmada por contagem de pixels na arte oficial: no `15 cicero.PNG` o framboesa #F00054 é 95,4% da tinta colorida (100.534 px em 105.335); no `pronto é cicero, logo oficial.PNG`, 87,0% (22.294 px). O acento2 é o laranja #EF7316 do Mersinho: no `juventude mersinho.png` os laranjas #FC6C00 (18,7%), #FC6000 (5,1%) e #FC7800 (2,8%) somam 26,6% da tinta, e o azul #0000F0 (2,9%) é o starburst. A paleta completa dele tem ainda o azul #3014E7 e o magenta #A11E8F, que entram pelo comite.extra.css como --azul e --violet. Substitui a medição de 07/09 (#F32D63 / #FC5A00), feita sobre material impresso fotografado, confiança MÉDIA; esta é arte digital da própria campanha.
Contraste sobre o grafite #08090A: bloco 4.9:1, texto 5.68:1
Segundo acento: #EF7316 ajustado para #EF7316, 6.77: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:#F90156;
--gold:#F90156;
--acento-texto:#FE3479;
--acento-fundo:#2F0816;
--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:#EF7316;
--acento2-texto:#EF7316;
/* 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:#0E1011;
--cor-entrar:#F90156;
}
/* --------------------------------------------------- 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/comite.extra.css (FONTE, escrito a mao; o gerado acima nao) ===== */
/* ============================================================================
EXTRA DA PELE DO COMITÊ DA CHAPA 15 · 11/09/2026 (noite) · V3
Este arquivo é FONTE, escrito à mão. O tools/pele.mjs anexa ele ao fim de
src/temas/comite.css a cada rodada, DEPOIS dos tokens do candidato, para poder
sobrescrevê-los. As outras 26 peles não têm este arquivo e não ganham uma linha.
A V3 foi escolhida pelo Gabriel em 11/09/2026 à noite, com as modificações
dele. O protótipo que serve de especificação é paginas/doc-a7c39259/v3.html, e
o que a escolha significa está em design-dna/comite/DESIGN-DNA.md.
ESPECIFICIDADE: o tema é injetado ANTES do CSS dos componentes. Regra daqui
com a mesma especificidade da regra de lá perde. Por isso `:root` na frente
dos seletores que precisam vencer (85-lock.css e 86-logo-campanha.css).
Material oficial da campanha (pasta do Gabriel), não captura. Paleta fixada
por ele: azul #3014E7, laranja #EF7316, framboesa #F90156, magenta #A11E8F.
============================================================================ */
:root{
--azul:#3014E7;
--violet:#A11E8F;
/* TIPOGRAFIA DA V3. As três famílias moram no mesmo bundle local que as outras
peles usam (src/assets/vendor/fontes), porque a folha é uma só para as 27.
Quem não declara essas famílias não baixa um byte de woff2: só carrega o
@font-face que nunca casa. Big Shoulders é condensada de cartaz de rua, o
parente tipográfico do 5555; Public Sans foi testada para acessibilidade e
segura texto pequeno em tela suja de sol; Martian Mono desenha em blocos. */
--display:'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;
}
/* ---------- PORTA: brilho das cores da chapa atrás do cartão ----------
Só gradiente: zero imagem, zero requisição. O mapa serigrafado (::before) e os
polos (::after) continuam por cima, como nas outras peles. */
:root .lock{
background:
radial-gradient(60% 46% at 50% 40%, rgba(249,1,86,.20), transparent 72%),
radial-gradient(44% 38% at 14% 92%, rgba(239,115,22,.16), transparent 70%),
radial-gradient(40% 36% at 88% 6%, rgba(48,20,231,.22), transparent 70%),
var(--bg);
}
/* ---------- PORTA: a arte acima do cartão ----------
O anel (a "cabeça ícone mersinho") com o Dalee! 5555 encostado no alto à
direita, compostos num arquivo só em src/assets/marca/comite/porta-arte.webp.
Um arquivo e um pseudo-elemento em vez de dois: `.lock` já usa ::before e
::after para o mapa serigrafado e os polos, e o cartão só tem um de cada.
O coração e a Juventude SAÍRAM da porta por decisão dele: o nome do candidato
logo abaixo já carrega o 15 e o 5555 como peça. */
:root .lockcard{position:relative}
:root .lockcard::before{
content:'';
display:block;
width:min(62vw,250px);
aspect-ratio:665/613;
margin:0 auto 2px;
background:url(assets/porta-arte.webp) center/contain no-repeat;
transform-origin:50% 60%;
}
@media(max-width:400px){ :root .lockcard::before{width:min(56vw,200px)} }
/* O pulso constante que ele pediu: "a mesma da entrada, que diminui e pulsa de
forma mais leve, principalmente o ícone central". CSS puro, e não GSAP: uma
biblioteca de 45 KB para um respiro de escala seria peso sem troco, e o
orçamento do projeto conta cada KB do caminho crítico. Só transform. */
@media(prefers-reduced-motion:no-preference){
:root .lockcard::before{animation:comite-entra .9s cubic-bezier(.2,.9,.3,1) both, comite-pulsa 2.8s ease-in-out 1s infinite alternate}
}
@keyframes comite-entra{from{transform:scale(.86) rotate(-14deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
@keyframes comite-pulsa{from{transform:scale(1) rotate(0)}to{transform:scale(1.045) rotate(2.2deg)}}
/* ---------- PORTA: a etiqueta do produto vira a logo oficial do Multiplicaí ----
Pedido dele: a logo atualizada (o símbolo precedendo o wordmark) no lugar do
nome escrito, no mesmo tamanho e na mesma altura. O texto continua no HTML
para leitor de tela e busca; o que some é o desenho dele. */
:root .lockmarca .qg,
:root .load .qg{
font-size:0;
line-height:0;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
flex-wrap:wrap;
}
:root .lockmarca .qg::before,
:root .load .qg::before{
content:'';
width:96px;height:15px;
background:url(assets/multiplicai.svg) left center/contain no-repeat;
}
/* O ROTULO SAI DO CARTAO DE LOGIN E FICA NA TELA DE CARGA (12/09/2026).
O Gabriel pediu "Comitê digital" no lugar do "Acesso" do formulário, e o
formulário fica três linhas abaixo deste rótulo: atendido ao pé da letra, o
cartão passou a dizer a mesma coisa duas vezes, medido na tela em y=400 e
y=547.
Quem sai é este, e não o do formulário, porque foi o formulário que ele
nomeou. Na tela de CARGA o rótulo fica: lá não existe formulário nem h2, e
sem ele sobraria a logo do Multiplicaí sozinha, sem dizer de quem é a
plataforma. O `::before` com a logo continua nos dois lugares. */
:root .load .qg::after{
content:'Comitê digital';
font-family:var(--mono);
font-size:10px;
line-height:1.2;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--dim);
}
/* ---------- PORTA: o nome do candidato com as peças encaixadas ----------
`clienteHtml` no registro traz os dois dentro do nome, e é assim que o
"15" e o "5555" escritos viram as peças oficiais sem ninguém desenhar letra.
A altura das imagens sai em `em`, então elas acompanham o corpo da linha em
qualquer largura de tela — é isso que faz elas parecerem encaixadas. */
:root .lockmarca .selo,
:root .load .marca .selo{display:none}
:root .lockmarca .linha{display:block;text-align:center}
:root .lockmarca .nome,
:root .load .marca .nome{
font-family:var(--display);
font-weight:900;
font-size:clamp(30px,9vw,44px);
line-height:.92;
letter-spacing:.01em;
text-transform:uppercase;
display:block;
text-align:center;
}
:root .v3num{
display:inline-block;
width:auto;
vertical-align:-.12em;
}
:root .v3-15{height:1.02em}
:root .v3-5555{height:1.34em;vertical-align:-.3em}
/* A porta e a carga NÃO repetem o número: as peças já dizem 15 e 5555.
`.urna.com-logo` porque é essa a classe que o 86-logo-campanha.css usa, e
empatar em especificidade com ele é perder: o tema entra ANTES do CSS dos
componentes, então em empate quem vem depois ganha. */
:root .lockmarca .urna.com-logo,
:root .lockmarca:has(.logo-camp) .linha .urna.com-logo,
:root .load .marca .urna.com-logo{display:none}
/* ---------- 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. O movimento respeita
prefers-reduced-motion e é só transform. */
: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:comite-corre 1.15s ease-in-out infinite alternate}
@keyframes comite-corre{from{transform:translateY(0)}to{transform:translateY(-7px)}}
}
/* ---------- BARRA DO TOPO: o badge da chapa ----------
`logo-p.png` virou o badge composto: o coração 15 ao lado da faixa
55-cabeça-55, mesma altura, uma linha só (942x320, proporção 2,94). O link do
`.brand` já aponta para `./`, então clicar nele já leva para a home — que é
exatamente o que ele pediu.
O nome do candidato sai da barra: com `semLogoPorta`, `` passou
a ser preenchido em todos os lugares, e ao lado do badge ele repetiria o que o
badge já diz, com as duas peças de número no meio da barra. */
:root .brand .cand > span{display:none}
:root .brand .cand .urna{display:none}
:root .brand .cand .logo-camp.p{max-height:34px;max-width:132px}
@media(max-width:860px){ :root .brand .cand .logo-camp.p{max-height:30px;max-width:110px} }
@media(max-width:400px){ :root .brand .cand .logo-camp.p{max-height:26px;max-width:92px} }
/* ---------- REDE: o retrato do centro fica NA FRENTE do anel ----------
Ele estava dentro da borda do círculo e saía cortado. Agora o anel é um disco
atrás e o retrato aparece inteiro por cima. */
:root .redepalco .centro-rosto,
:root .rede-centro{z-index:3}
/* ---------- RODAPÉ DA PORTA: as duas marcas oficiais, na mesma linha ----------
`pronto é Cícero` e `Mersinho Lucena 5555`, uma ao lado da outra. Elas entram
na porta, que é a tela onde a equipe para para olhar; dentro do app não existe
rodapé que role, e inventar um fixo cobriria o mapa. */
:root .lockpe{flex-direction:column;align-items:center;gap:10px}
:root .lockpe::before{
content:'';
display:block;
width:100%;
height:38px;
background:url(assets/prontocicero.webp) left center/auto 100% no-repeat,
url(assets/logomersinho5555.webp) right center/auto 76% no-repeat;
}
@media(max-width:400px){ :root .lockpe::before{height:30px} }
/* ============================================================================
O CADASTRO DA V3 (+1 Voto)
As classes abaixo são escritas pelo src/js/91-voto-v3.js, que só roda quando a
pele declara `cadastroV3` — hoje, esta. Por isso o CSS mora aqui e não no
90-voto.css: nas outras vinte e seis peles esses elementos não existem.
============================================================================ */
.v-sugcx{position:relative}
.v-sug{
position:absolute;left:0;right:0;top:100%;z-index:9;
background:var(--bg2,#15151d);border-top:2px solid var(--gold);
max-height:216px;overflow:auto;display:none;
}
.v-sug.on{display:block}
.v-sug button{
display:flex;width:100%;justify-content:space-between;align-items:center;gap:10px;
min-height:48px;padding:0 12px;text-align:left;border:0;border-bottom:1px solid rgba(255,255,255,.07);
background:none;color:var(--txt);
}
.v-sug button b{font-size:13.5px;font-weight:600}
.v-sug button span{font-family:var(--mono);font-size:11px;color:var(--dim)}
.v-sug button:hover,.v-sug button:focus-visible{background:rgba(255,255,255,.06);outline:none}
.v-aux{font-size:11px;color:var(--dim);margin:4px 0 0;line-height:1.4}
.v-deorigem{display:none;margin:4px 0 0;font-size:11px;color:var(--gold2,var(--gold));line-height:1.4}
.v-deorigem.on{display:block}
.v-oculto{display:none!important}
/* Os dois botões: VOTO com o check manda para o monitoramento validar; "Apenas
cadastrar" guarda o contato sem afirmar voto. O segundo é de propósito menos
destacado — ele é a saída, não o caminho. */
.v-botao-voto{display:flex;align-items:center;justify-content:center;gap:10px}
.v-botao-voto svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.v-so-cadastrar{
background:none;border:1px solid var(--dim);color:var(--dim);
font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
min-height:46px;margin-top:8px;
}
.v-so-cadastrar:hover:not(:disabled){color:var(--txt);border-color:var(--txt)}
/* "Em quem vota": o chip de "os dois" carrega as duas cabeças, em pé e inteiras,
no lugar do texto. O nome continua no aria-label do grupo e no valor do botão,
então leitor de tela e teclado não perdem nada. */
#v-chapa button[data-v="ambos"]{
font-size:0;
line-height:0;
padding:4px 12px;
min-height:48px;
}
/* 15/09/2026: "o badge de Cícero e Mersinho (cabeças) precisa estar mais
destacado e maior do que os outros". As cabeças dobram de tamanho, o chip
ocupa a linha inteira com borda de 3px, e "só um" e "só o outro" ficam
embaixo, menores. O `.chapa-cabecas` é escrito pelo 06-chapa.js só 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}
/* ---------- O OLHO DA SENHA (91-voto-v3.js) ----------
Ele fica ANTES do "Esqueci a senha", os dois à direita do campo, e é pedido
dele nessa ordem. Com os dois ancorados por `position:absolute` a ordem visual
inverteria (quem tem `right:0` fica mais à direita), então a linha inteira vira
flex: o campo estica, o olho vem depois e o link fecha. O `padding-right` de
112px que existia para o link não correr por baixo da senha deixa de fazer
sentido aqui, porque agora o campo não passa por baixo de ninguém. */
:root .campo-senha{
display:flex;align-items:center;
/* a moldura passa do input para a linha inteira, senao o campo de senha fica
visivelmente mais curto que o de usuario logo acima */
background:var(--bg);border:2px solid var(--tinta);margin-bottom:14px;
}
:root .campo-senha:focus-within{border-color:var(--amber);box-shadow:2px 2px 0 var(--amber)}
:root .campo-senha input{flex:1;min-width:0;background:none;border:0;margin:0;padding:11px 12px}
:root .campo-senha input:focus{box-shadow:none;border:0}
:root .campo-senha .olho-senha{
position:static;translate:none;flex:none;
width:42px;min-height:44px;display:grid;place-items:center;
background:none;border:0;color:var(--dim);padding:0;
}
:root .campo-senha .olho-senha svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
:root .campo-senha .olho-senha .corte{display:none}
:root .campo-senha .olho-senha[aria-pressed="true"]{color:var(--gold)}
:root .campo-senha .olho-senha[aria-pressed="true"] .corte{display:block}
/* O alvo de toque vai a 44px sem o texto mudar de tamanho nem de lugar: o link
fica no centro vertical de uma caixa da altura do campo. Media antes: 19px de
altura clicavel, contra os 44 que a regra do celular exige. Ele divide a faixa
com o olho da senha, que ja tem 44. */
:root .campo-senha #lnk-esqueci{
position:static;transform:none;flex:none;padding-right:4px;white-space:nowrap;
min-height:44px;display:flex;align-items:center;
}
/* ============================================================================
A TELA DO CABO NA V3 (66b-cabo-v3.js)
Chassi da V3 na tela que o cabo abre o dia inteiro. As classes `cv3-*` só
existem nesta pele, e é por isso que o CSS mora aqui.
============================================================================ */
/* o botao redondo e fixo e tem 92px com a folga: sem este respiro ele cobre as
duas marcas do rodape quando a tela tem pouco conteudo. */
:root .cabo-v3{padding-bottom:160px}
/* o número do dia, o Mersinho correndo e o HOJE */
.cv3-hero{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:10px;padding:20px 16px 4px}
/* o tamanho mora no PAI: `small` é irmão do `b`, então um `.42em` ancorado no
`b` mediria o corpo herdado de 14px e o "/30" sairia com 6px. */
.cv3-conta{font-family:var(--display);font-weight:900;line-height:.82;letter-spacing:-.01em;
font-size:clamp(72px,24vw,112px);display:flex;align-items:baseline}
.cv3-conta b{font-size:1em;font-weight:900}
.cv3-conta small{font-size:.42em;color:var(--dim);letter-spacing:.02em;font-weight:900}
.cv3-hoje{display:flex;align-items:flex-end;justify-content:flex-end;gap:6px;padding-bottom:4px;min-width:0}
.cv3-hoje img{height:86px;width:auto;flex:none}
.cv3-hoje b{font-family:var(--display);font-weight:900;font-size:clamp(34px,11vw,52px);line-height:.78;
color:var(--acento2,var(--gold));text-transform:uppercase;letter-spacing:.01em}
@media(max-width:360px){ .cv3-hoje img{height:68px} }
.cv3-meta{margin:8px 16px 0;height:10px;background:rgba(255,255,255,.09);position:relative;overflow:hidden}
.cv3-meta i{position:absolute;inset:0;display:block;transform-origin:left;transform:scaleX(var(--p,0));
background:linear-gradient(90deg,var(--acento2,var(--gold)),var(--amber),var(--violet));transition:transform .5s ease-out}
.cv3-linha{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;margin:8px 16px 0;font-size:13px;color:var(--dim)}
.cv3-linha b{color:var(--txt);font-family:var(--display);font-size:17px;letter-spacing:.02em;font-weight:700}
.cv3-posicao{margin:8px 16px 0;font-size:12px;color:var(--dim);line-height:1.4}
/* as quatro ações, cor cheia, uma por cor da chapa */
.cv3-grade{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:18px 12px 0}
.cv3-bloco{aspect-ratio:1/1.02;padding:14px;display:flex;flex-direction:column;justify-content:space-between;
align-items:flex-start;text-align:left;color:#fff;position:relative;overflow:hidden;border:0;min-height:44px}
.cv3-bloco svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cv3-bloco .cv3-tx b{display:block;font-family:var(--display);font-weight:900;
font-size:clamp(26px,8.2vw,36px);line-height:.9;letter-spacing:.01em;text-transform:uppercase}
.cv3-bloco .cv3-tx span{display:block;font-size:13.5px;line-height:1.3;opacity:.92;margin-top:6px}
.cv3-num{position:absolute;right:10px;top:6px;font-family:var(--display);font-weight:900;font-size:62px;line-height:1;opacity:.18}
.cv3-bloco.b1{background:var(--amber)}
.cv3-bloco.b2{background:var(--acento2,#EF7316)}
.cv3-bloco.b3{background:var(--azul)}
.cv3-bloco.b4{background:var(--violet)}
.cv3-bloco:active{transform:translateY(1px)}
@media(min-width:860px){ .cv3-grade{grid-template-columns:repeat(4,1fr)} }
/* o feed do dia */
.cv3-feed{margin:22px 16px 0}
.cv3-up{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.cv3-ev{display:grid;grid-template-columns:54px 12px 1fr;gap:10px;align-items:start;padding:10px 0;position:relative}
.cv3-ev+.cv3-ev::before{content:'';position:absolute;left:58px;top:-10px;height:14px;border-left:2px dashed rgba(255,255,255,.14)}
.cv3-ev .h{font-family:var(--mono);font-size:10.5px;color:var(--dim);padding-top:3px}
.cv3-ev .p{width:12px;height:12px;border-radius:50%;margin-top:4px;
background:conic-gradient(from 210deg,var(--acento2,#EF7316),var(--amber) 35%,var(--violet) 62%,var(--azul) 82%,var(--acento2,#EF7316))}
.cv3-ev .t{font-size:14px;color:var(--dim)}
.cv3-ev .t b{color:var(--txt)}
/* as duas marcas oficiais fechando a tela */
.cv3-marcas{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;
margin:28px 16px 0;padding:20px 0 6px;border-top:1px solid rgba(255,255,255,.1)}
.cv3-marcas img{height:42px;width:auto}
@media(max-width:400px){ .cv3-marcas img{height:34px} .cv3-marcas{gap:14px} }
/* ---------- O +1 VOTO VIRA BOTÃO REDONDO, COM O ANEL EM VOLTA ----------
A barra do rodapé existe em todas as peles; aqui ela deixa de ser barra e
vira o botão da V3. O anel é a borda: o degradê cônico pinta o botão inteiro e
um disco do fundo do chassi cobre o miolo, deixando 4px de anel à mostra.
Alvo de toque de 82px, bem acima dos 44 do mínimo. */
:root .voto-barra{
background:none;border:0;box-shadow:none;padding:0 0 max(10px,env(safe-area-inset-bottom));
display:flex;justify-content:center;pointer-events:none;
}
:root .voto-barra .btn-voto{
position:relative;pointer-events:auto;flex:none;
width:82px;min-width:82px;height:82px;border-radius:50%;padding:0;
background:conic-gradient(from 210deg,var(--acento2,#EF7316),var(--amber) 35%,var(--violet) 62%,var(--azul) 82%,var(--acento2,#EF7316));
border:0;box-shadow:none;display:grid;place-items:center;gap:0;
font-family:var(--mono);font-weight:500;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
line-height:1.5;color:var(--dim);text-align:center;
}
:root .voto-barra .btn-voto::after{
content:'';position:absolute;inset:4px;border-radius:50%;background:var(--bg);z-index:0;
}
:root .voto-barra .btn-voto > *{position:relative;z-index:1}
:root .voto-barra .btn-voto .raio{display:none}
:root .voto-barra .btn-voto .n{
display:block;font-family:var(--display);font-weight:900;font-size:26px;
letter-spacing:.02em;color:#fff;line-height:1;margin-bottom:1px;
}
/* ============================================================================
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)}
/* ============================================================================
A PORTA EM DUAS METADES · o layout da V3, e não um cartão no meio da tela
Esta seção vem DEPOIS das regras de porta acima e as vence por ordem: mesma
especificidade, quem vem depois ganha. As de cima desenhavam a arte dentro do
cartão (`.lockcard::before`) e as duas marcas no rodapé dele; a V3 não tem
nem uma coisa nem outra. Ficam no arquivo porque descrevem o caminho andado,
e porque desfazer é mais barato que reescrever se ele quiser voltar.
O desenho da V3, medido no protótipo:
· metade de cima — `.arte`, 46svh (teto de 380px), a peça centralizada em
min(62vw,260px), com três brilhos radiais atrás e nada mais;
· metade de baixo — `.folha`, painel chapado colado no rodapé da tela, com
um filete de 4px em degradê no topo, e dentro: marca, nome, campos, botão;
· a partir de 900px as duas metades viram duas colunas.
============================================================================ */
:root .lock{
display:grid;
grid-template-rows:auto 1fr;
align-items:stretch;
justify-items:stretch;
padding:0;
gap:0;
}
.v3-arte{
position:relative;
height:min(46svh,380px);
display:grid;
place-items:center;
isolation:isolate;
overflow:hidden;
}
.v3-arte::before{
content:'';
position:absolute;
inset:-40% -30% auto;
height:140%;
z-index:-1;
background:
radial-gradient(50% 50% at 50% 60%, rgba(249,1,86,.35), transparent 70%),
radial-gradient(40% 40% at 20% 30%, rgba(48,20,231,.35), transparent 70%),
radial-gradient(40% 40% at 85% 30%, rgba(239,115,22,.30), transparent 70%);
}
.v3-arte img{
width:min(62vw,260px);
height:auto;
transform-origin:50% 60%;
}
@media(prefers-reduced-motion:no-preference){
.v3-arte img{animation:comite-entra .9s cubic-bezier(.2,.9,.3,1) both, comite-pulsa 2.8s ease-in-out 1s infinite alternate}
}
/* a arte saiu de dentro do cartão, e o cartão deixou de ser cartão */
:root .lockcard::before{content:none}
:root .lockcard{
width:100%;
max-width:none;
margin:0;
background:var(--bg2);
border:0;
border-radius:0;
box-shadow:none;
padding:26px 20px calc(22px + env(safe-area-inset-bottom));
align-self:stretch;
overflow:visible;
}
/* o filete de 4px em degradê no topo do painel */
:root .lockcard::after{
content:'';
position:absolute;
left:0;right:0;top:0;
height:4px;
background:linear-gradient(90deg,var(--azul),var(--acento2,#EF7316),var(--amber),var(--violet));
}
:root .lockmarca{gap:10px;margin-bottom:16px}
:root .lockmarca .qg,
:root .load .qg{justify-content:flex-start}
:root .lockmarca .linha{text-align:left}
:root .lockmarca .nome{
text-align:left;
font-size:clamp(40px,12.4vw,60px);
line-height:.88;
}
/* "Acesso" deixa de ser título e vira etiqueta, como na V3 */
:root .lockcard form h2{
font-family:var(--mono);
font-weight:500;
font-size:10px;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--dim);
margin:0 0 8px;
}
/* campos: 52px, superfície chapada, zero contorno.
16px NAO e escolha de gosto (13/09/2026): abaixo disso o Safari do iPhone
amplia a pagina sozinho quando o dedo toca o campo, e a tela salta. A sessao
que levou os formularios do app a 16px cobriu seis arquivos e nenhum deles era
a PORTA -- que e o primeiro campo que qualquer pessoa da equipe toca. */
:root .lock input{
height:52px;
padding:0 14px;
background:rgba(255,255,255,.07);
border:0;
border-radius:0;
margin-bottom:12px;
font-size:16px;
}
:root .lock input:focus{outline:2px solid var(--amber);outline-offset:-2px;box-shadow:none;border:0}
:root .campo-senha{background:rgba(255,255,255,.07);border:0;margin-bottom:12px}
:root .campo-senha:focus-within{outline:2px solid var(--amber);outline-offset:-2px;box-shadow:none;border:0}
:root .campo-senha input{height:52px;margin:0;background:none}
/* o Entrar é BRANCO na V3: o acento já aparece uma vez, no filete do topo, e
dois blocos de cor na mesma coluna brigariam pelo mesmo olhar */
:root .btn-lock{
height:54px;
padding:0 12px;
background:var(--txt);
color:var(--bg);
border:0;
border-radius:0;
box-shadow:none;
font-family:var(--display);
font-weight:900;
font-size:22px;
letter-spacing:.04em;
text-transform:uppercase;
margin-top:2px;
}
:root .btn-lock:hover:not(:disabled),
:root .btn-lock:active:not(:disabled){transform:none;box-shadow:none;background:#fff}
/* rodapé da porta: LGPD à esquerda, a assinatura à direita, e SEM as duas
marcas da campanha — na V3 elas vivem no rodapé do aplicativo, não aqui */
:root .lockpe::before{content:none}
:root .lockpe{
flex-direction:row;
align-items:flex-start;
justify-content:space-between;
gap:10px;
margin-top:14px;
}
:root .lockpe .lgpd{font-size:10.5px;color:var(--dim);line-height:1.35;text-align:left;margin:0}
:root .lockpe .assina{flex:none}
@media(min-width:900px){
:root .lock{grid-template-rows:1fr;grid-template-columns:1fr 1fr}
.v3-arte{height:100%;min-height:520px}
:root .lockcard{display:flex;flex-direction:column;justify-content:center;padding:40px 44px}
}
/* ============================================================================
AJUSTES DA PORTA — 12/09/2026, quatro pedidos do Gabriel na mesma mensagem.
============================================================================ */
/* 1. O CARTÃO NA FRENTE DOS POLOS.
`.lock::before` (o mapa serigrafado) e `.lock::after` (os três polos) são
pseudo-elementos DO PAI, position:fixed, e vêm depois dos filhos na ordem de
pintura. Com `.lockcard` em position:relative e z-index auto, os dois empatam
e quem vem depois ganha: um dos polos caía em cima do campo de usuário, com
cara de alvo vermelho sobreposto ao formulário. Um z-index no cartão desempata
sem mexer no fundo, que continua igual atrás dele. */
:root .lockcard{z-index:1}
/* 2. A FAIXA DE DEGRADÊ ATRAVESSA A PÁGINA INTEIRA.
Ela é `.lockcard::after`, então nascia com a largura do cartão — no desktop a
porta é de duas colunas e a faixa cobria só a da direita. Fixa e ancorada na
janela, ela passa a medir a tela toda. Só no desktop: no celular o cartão já
ocupa a largura inteira, e prender a faixa no topo da janela a tiraria do
lugar onde ela hoje separa a arte do cartão. */
@media(min-width:900px){
:root .lockcard::after{position:fixed;top:0;left:0;right:auto;width:100vw}
}
/* 3. A LOGO DO PRODUTO DESCE PARA O RODAPÉ.
Mesmo desenho e mesmo tamanho (96x15) de quando ela abria o cartão, agora
logo acima do aviso de uso: a logo diz de quem é a ferramenta, e isso é
informação de rodapé, não de cabeçalho.
O rótulo "Comitê digital" ficava aqui em cima e SAIU em 12/09/2026, quando
o h2 do formulário passou a dizer a mesma coisa três linhas abaixo. Com o
rótulo fora e a logo já no rodapé, o `.qg` do cartão ficou sem conteúdo e
colapsa para altura 0, que é o certo: ele não desenha mais nada. */
:root .lockmarca .qg::before{content:none}
:root .lockpe .lgpd::before{
content:'';
display:block;
width:96px;
height:15px;
margin:0 0 9px;
background:url(assets/multiplicai.svg) left center/contain no-repeat;
}
/* 4. O ENTRAR PREENCHIDO NA FRAMBOESA DA CHAPA.
Ele estava branco por herança da época da ponte, quando havia dois blocos de
cor na coluna e o de cima ganhava por posição. Sem a ponte, sobra um botão só,
e ele é a ação principal da tela. Texto em quase-preto, não branco: medido,
#0A0908 sobre #F90156 dá 5,16:1 e passa no AA para texto normal; branco daria
4,07:1 e só passaria como texto grande. */
:root .lockcard .btn-lock{background:#F90156;color:#0A0908}
:root .lockcard .btn-lock:hover:not(:disabled){background:#FF2A72}
/* ============================================================================
RODADA DE 12/09/2026 (madrugada): os relatos 10, 11 e 13 da equipe
============================================================================ */
/* RELATOS 10 E 11 — O BOTÃO REDONDO NO RODAPÉ, COM A PALAVRA "VOTO".
Dois defeitos no mesmo botão, e nenhum dos dois era do desenho: eram de
cascata.
1. No desktop ele aparecia NO TOPO, logo abaixo do cabeçalho. A regra da
base que esconde a barra acima de 860px (`.voto-barra{display:none}`)
tem especificidade 0,1,0; a regra desta pele que a desenha
(`:root .voto-barra{display:flex}`) tem 0,1,1 e vence em TODA largura.
Só que `position:fixed` da barra mora dentro da media query de celular
da base — então no desktop a barra ficava estática, no fluxo, colada no
cabeçalho. Aqui ela passa a ser fixa em todo tamanho de tela, no rodapé,
e o retângulo "+1 Voto" do cabeçalho sai nesta pele: são dois atalhos
para a mesma folha, e a V3 escolheu o redondo.
2. A palavra "Voto" estava lá e ninguém via. O disco que cobre o miolo do
anel é `::after` com position:absolute e z-index:0, e um elemento
posicionado pinta POR CIMA do conteúdo em fluxo do mesmo contexto. O
"+1" escapava porque `.n` ganhou position:relative e z-index:1; a
palavra "Voto" é um nó de texto solto, `> *` não a alcança, e ela ficou
embaixo do disco. Com `isolation:isolate` o botão vira contexto de
empilhamento, e o disco em z-index:-1 pinta acima do fundo do botão (o
anel) mas abaixo de todo o conteúdo — inclusive do texto solto. */
:root .voto-barra{position:fixed;left:0;right:0;bottom:0;z-index:60}
:root header .btn-voto{display:none}
:root .voto-barra .btn-voto{isolation:isolate;font-size:10px;font-weight:700;color:#fff}
:root .voto-barra .btn-voto::after{z-index:-1}
/* RELATO 13 — "NAVBAR SUMIU" (no celular a barra de abas tinha 100px).
No topo de 58px cabiam, a 390px: a marca (77px), a etiqueta com o nome de
quem entrou (145px), o SAIR (35px) — e sobravam 100px para SEIS abas. A
pessoa via MAPA e metade de REDE; as outras quatro existiam, mas rolando por
dentro de uma faixa de 100px que nada indica que rola. Na aba OPERAÇÃO a
faixa mostrava só OPERAÇÃO, e o resto da navegação tinha sumido de verdade.
A V3 (paginas/doc-a7c39259/v3.html, `.tabsrole`) desenha as abas numa
SEGUNDA LINHA, na largura toda, embaixo do topo. É isso que entra aqui, só
no celular: o cabeçalho quebra em duas linhas, 58px para marca + nome +
sair e 46px para as abas. `--head` sobe para 104px porque `main`, a barra
de KPIs e as gavetas medem a altura da tela a partir dessa variável — um
cabeçalho de 104px com `--head` em 58 empurraria o mapa 46px para fora da
tela por baixo.
Na tela do cabo digital as abas nem existem (66-cabo.js esconde), então
`--head` volta a 58 ali: segunda linha vazia seria 46px de nada. */
@media(max-width:860px){
/* `:root:root` porque o 95-mobile.css declara `:root{--head:58px}` na mesma
media query, DEPOIS do tema, com a mesma especificidade — e em empate quem
vem depois ganha. Dobrar o seletor é o jeito de vencer sem !important. */
:root:root{--head:104px}
:root body[data-aba="cabo"]{--head:58px}
:root header{
flex-wrap:wrap;
align-content:flex-start;
height:var(--head);
padding:0 8px 0 10px;
gap:0 8px;
}
:root header .brand{min-height:58px}
:root header .canto{min-height:58px;justify-content:center}
/* a etiqueta com o nome não pode empurrar o SAIR para fora: nome longo vira
reticências. `display:block` porque text-overflow não alcança o texto
solto dentro de um inline-flex; o [hidden] continua escondendo. */
/* DUAS LINHAS TAMBEM NO CELULAR (13/09/2026), e sem desfazer o que esta regra
veio consertar. Ela nasceu do relato 13 ("navbar sumiu") para impedir que um
nome longo empurrasse o SAIR para fora da tela, e o `max-width` continua
sendo quem garante isso.
O que muda e so o eixo: `block` virava uma linha so, e o cargo — que o
js/10-nucleo.js passou a escrever — ficava ao LADO do nome, empurrando a
reticencia para cima dele. Medido a 390px antes do conserto: o nome ocupava
de x=104 a 294 e o "ADM" comecava exatamente em 294, na mesma linha.
O corte por reticencia desceu do container para o `.eu-nome`: numa coluna
flex, `text-overflow` no pai nao alcanca o filho. */
:root header .demo-tag{
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:center;
gap:0;
min-width:0;
max-width:calc(100vw - 190px);
overflow:hidden;
white-space:nowrap;
line-height:1.2;
padding:5px 9px;
}
:root header .demo-tag .eu-nome{
max-width:100%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
:root header .demo-tag[hidden]{display:none}
:root header .tabs{
order:10;
flex:1 0 100%;
width:100%;
height:46px;
margin:0;
border:0;
background:transparent;
gap:4px;
align-items:center;
}
:root header .tabs button{flex:1 0 auto;min-height:40px;padding:0 8px;font-size:10px;letter-spacing:.06em}
:root header .tabs[hidden]{display:none}
/* a 390px as seis abas somavam 397px em 372 de faixa: encolhe a letra e o
respiro para caberem sem rolar (a faixa continua rolando se uma sétima
aba entrar) */
@media(max-width:430px){
:root header .tabs button{padding:0 5px;font-size:9.5px;letter-spacing:.03em}
}
/* O botão redondo (92px) e o REPORTAR (canto inferior direito) são fixos e
cobriam o fim das listas: o último cartão da OPERAÇÃO, o último acesso da
EQUIPE, o último relato. Cada rolagem interna ganha o respiro no fim. */
/* Os quatro respiros saíram daqui em 12/09/2026 e foram para o CSS dos
componentes: .eqwrap e .bugwrap pela sessão C, .opwrap (que o .admwrap
carrega junto, `class="opwrap admwrap"`) pela principal. Conserto de
celular dentro do tema de um candidato conserta UM candidato; as outras 25
ficavam com o último cartão debaixo do botão REPORTAR. Duas declarações do
mesmo respiro divergem no primeiro dia em que alguém mexer numa só, então
esta sai e a do componente manda.
A linha de baixo FICA: `redelado` e `disp` não têm respiro no componente. */
:root body[data-aba="rede"] .redelado, :root body[data-aba="disputa"] .disp{padding-bottom:150px}
}
/* AS CAIXAS DE RETORNO DA FOLHA +1 VOTO (achado em 12/09/2026, usando como
supervisor). "Fulano entrou na rede" saia em verde-claro de papel
(#E6F5EC, herdado da pele clara do Diego) com o texto em `--txt`, que aqui
e branco: a segunda linha ("Origem: WhatsApp. Voto: os dois. Marcado como
voto...") ficava invisivel. O mesmo vale para a caixa ambar de "esse numero
ja esta na base". Fundo translucido da cor do estado sobre o grafite, e o
texto continua sendo o do chassi. */
:root .voto .feito{background:rgba(30,158,99,.16);border-color:var(--green);color:var(--txt)}
:root .voto .achou{background:rgba(239,115,22,.16);border-color:var(--amber);color:var(--txt)}
/* ============================================================================
A PORTA CABE NA TELA DO CELULAR, E A ANIMACAO SE FAZ NOTAR · 13/09/2026
Quatro pedidos dele, os quatro olhando o celular:
"coloque tudo na mesma tela na versao mobile (ta sendo preciso rolar pouca
coisa)" · "o efeito de sombra gradiente atras do icone pulsando aumente mais
a largura, ocupe toda a pagina sem aparecer borda/margem lateral visivel" ·
"a animacao do icone mais constante e forte (ta tao devagar e pouca que nao
da pra perceber que e uma animacao)" · e, na tela de carga, "remova a logo de
multiplicai e o texto de comite digital".
MEDIDO ANTES, a 390x844: o conteudo somava 909px contra 844 de tela, entao
sobravam 65px para rolar. O que estourava nao era um bloco gordo, era a soma:
arte 380 + cartao 528. E a faixa escura que ele viu na lateral do print tem
causa propria, medida no mesmo lugar: os filhos do .lock tinham 381,4px numa
tela de 390 -- os 8,85px que faltavam eram a BARRA DE ROLAGEM, que so existe
porque o conteudo nao cabia.
Este bloco vai no fim do arquivo de proposito: mesma especificidade das regras
da V3 mais acima, e quem vem depois ganha. Nada e escondido para caber.
============================================================================ */
/* ---------- 1. a soma cabe em 844 ----------
-84px no total: 60 da altura da arte (o bloco tinha 137px de respiro em volta
de uma imagem de 243), 14 do padding do painel, 6 do vao da marca e 4 do pe.
A arte continua saindo de svh, entao ela encolhe junto em tela mais baixa em
vez de empurrar o rodape para fora. */
.v3-arte{height:min(38svh,320px)}
.v3-arte img{width:min(60vw,250px)}
:root .lockcard{padding:18px 20px calc(16px + env(safe-area-inset-bottom))}
:root .lockmarca{margin-bottom:10px}
:root .lockcard .lockpe{margin-top:10px}
/* Tela curta (iPhone SE e afins): mais um degrau, e ai os campos tambem cedem.
Abaixo disto a porta volta a rolar, e rolar e o certo -- esconder campo de
senha para caber seria quebrar a tela para ganhar uma metrica. */
@media (max-height:820px){
.v3-arte{height:min(34svh,280px)}
.v3-arte img{width:min(56vw,225px)}
:root .lockcard{padding:16px 20px calc(14px + env(safe-area-inset-bottom))}
}
@media (max-height:760px){
.v3-arte{height:min(30svh,240px)}
.v3-arte img{width:min(52vw,200px)}
:root .lock input{height:48px}
:root .lockcard{padding:14px 18px calc(14px + env(safe-area-inset-bottom))}
}
/* Aparelho pequeno (iPhone SE, 667 de altura): a arte cede de novo e o nome do
candidato desce um degrau de corpo. Medido: com 26svh a porta fecha em -7px,
ou seja, ainda cabe. Abaixo daqui ela volta a rolar, e rolar e o certo. */
@media (max-height:700px){
.v3-arte{height:min(26svh,190px)}
.v3-arte img{width:min(46vw,175px)}
:root .lock input{height:46px}
:root .lockmarca .nome{font-size:clamp(34px,10.6vw,48px)}
:root .lockmarca{margin-bottom:8px}
:root .lockcard .lockpe{margin-top:8px}
}
/* A COLUNA DO GRID PASSA A OCUPAR A LARGURA INTEIRA, e esta e a causa medida da
faixa lateral do print dele. O `.lock` e um grid de uma coluna que ninguem
declarou, entao o navegador resolvia a coluna em `375,344px` numa tela de
390 -- os 14,65px que faltavam eram o vao da barra de rolagem, reservado no
calculo do grid mesmo quando a barra nao aparece. A arte e o painel herdavam
essa largura, e o fundo do `.lock` (o mapa serigrafado) aparecia de fora
deles: e exatamente a moldura escura que ele fotografou.
`minmax(0,100%)` fixa a coluna na largura do container. O `minmax` com minimo
zero, e nao `100%` puro, porque filho de grid tem `min-width:auto`: uma peca
larga (o nome do candidato em 12,4vw, por exemplo) empurraria a coluna para
alem da tela e devolveria rolagem lateral. */
:root .lock{grid-template-columns:minmax(0,100%);justify-content:stretch}
.v3-arte,:root .lockcard{width:100%;max-width:none}
/* E ESTA LINHA, ESCRITA EM 13/09 PARA O CELULAR, DERRUBOU O DESKTOP EM SILENCIO.
A regra de duas colunas do desktop mora la em cima, na `@media(min-width:900px)`
da linha 656, e tem a MESMA especificidade desta (`:root .lock`). Como esta vem
depois no arquivo, ela ganhava em todas as larguras -- e o PC passou a abrir a
porta empilhada, como um celular gigante.
Medido em 13/09/2026, a 1440x900, antes do conserto:
grid-template-columns 1440.71px (uma coluna)
.lock rola por dentro 152px
.lockcard termina em 1052px (152 abaixo da dobra)
botao CADASTRE-SE em 957px (fora da tela)
html e body overflow-y:hidden (o documento nao rola)
O ultimo par e o que fazia o defeito ser pior do que parecia: o documento NAO
rolava, entao nao havia barra nenhuma e o cartao simplesmente terminava fora da
tela. Quem abrisse no PC via a arte e metade do login, sem sinal de que havia
mais coisa embaixo.
Depois, na mesma largura: duas colunas de 720px, rolagem interna 0, e o
CADASTRE-SE em 621px.
`minmax(0,1fr)` nas duas, e nao `1fr 1fr`, pelo mesmo motivo que a linha acima
usa minmax: filho de grid tem `min-width:auto`, e o nome do candidato em 12,4vw
empurraria a coluna. */
@media(min-width:900px){
:root .lock{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr}
:root .v3-arte{height:100%;min-height:0}
}
/* A barra de rolagem some da VISTA, e o scroll continua existindo. Ela e o que
comia 8,85px da largura e desenhava a faixa escura na lateral do print. Isto
nao e `overflow:hidden` disfarcado: em tela curta a porta continua rolando
normalmente, com o dedo, e nada fica inalcancavel. */
:root .lock{scrollbar-width:none}
:root .lock::-webkit-scrollbar{width:0;height:0}
/* ---------- 2. o brilho alcanca as duas bordas ----------
O glow anterior parava em `transparent 70%` a partir de um centro de 50% de
largura: nos cantos do bloco ja nao havia cor nenhuma, e o canto lia como
moldura preta. Agora o raio horizontal passa de 50% para 96% e as paradas vao
ate 100%, com um vinco horizontal por baixo que garante cor colada em x=0 e
em x=100%. O `inset` lateral abre de -30% para -46% pelo mesmo motivo.
Continua sendo so gradiente: zero imagem, zero requisicao. */
.v3-arte::before{
inset:-40% -46% auto;
background:
radial-gradient(96% 58% at 50% 58%, rgba(249,1,86,.42), rgba(249,1,86,.16) 62%, transparent 100%),
radial-gradient(70% 52% at 8% 34%, rgba(48,20,231,.42), transparent 92%),
radial-gradient(70% 52% at 92% 34%, rgba(239,115,22,.36), transparent 92%),
linear-gradient(90deg, rgba(48,20,231,.24), rgba(249,1,86,.14) 48%, rgba(239,115,22,.22));
}
/* ---------- 3. a animacao se faz notar ----------
Estava em 2,8s com 4,5% de escala: um respiro que a pessoa so percebe se
estiver olhando fixo, que foi exatamente a reclamacao. Vai para 1,6s com 9%
de escala e 3,4 graus, e o brilho pulsa JUNTO -- um fundo que respira com a
peca e o que faz o movimento ser lido como animacao, e nao como tremor.
Continua so transform e opacity (as duas propriedades que o navegador anima
sem refazer layout), e continua dentro do prefers-reduced-motion: quem pediu
menos movimento no sistema recebe a tela parada, como antes. */
@keyframes comite-pulsa-forte{
from{transform:scale(1) rotate(-1.2deg)}
to{transform:scale(1.09) rotate(3.4deg)}
}
@keyframes comite-brilho{
from{opacity:.72;transform:scale(.97)}
to{opacity:1;transform:scale(1.06)}
}
@media(prefers-reduced-motion:no-preference){
.v3-arte img{
animation:comite-entra .9s cubic-bezier(.2,.9,.3,1) both,
comite-pulsa-forte 1.6s ease-in-out .9s infinite alternate;
}
.v3-arte::before{
transform-origin:50% 58%;
animation:comite-brilho 1.6s ease-in-out .9s infinite alternate;
}
}
/* ---------- 4. a tela de carga perde a etiqueta ----------
Pedido dele, na letra: "na pagina de carregando territorio remova a logo de
multiplicai e o texto de comite digital". Sai o bloco inteiro do `.qg`, que e
quem carrega os dois (a logo pelo ::before, o rotulo pelo ::after declarados
la em cima neste arquivo). Fica a marca do comite e a frase de carga.
`display:none` e nao `content:none` nos pseudos porque o `.qg` tem
`font-size:0` e vira uma caixa vazia com gap -- some o elemento, some o vao.
A PORTA NAO MUDA: a logo do Multiplicai continua no cartao de login, que e
onde ele nao pediu para tirar. */
:root .load .qg{display:none}
/* ============================================================================
O GRADIENTE DA BARRA (13/09/2026)
Ele escolheu a opcao 2 de cinco, entre as que foram medidas na plataforma no
ar. As duas cores de partida sao as que o tema ja declara -- `--azul` #3014E7
e `--violet` #A11E8F -- entrando com LUMINOSIDADE BAIXA.
E o "baixa" e o ponto inteiro, e ele saiu de medicao, nao de gosto:
gradiente cheio da chapa (#F90156 -> #EF7316) pior contraste 1,24:1
azul eletrico cheio (#3014E7 -> #A11E8F) pior contraste 1,13:1
ESTE, escurecido pior contraste 4,56:1
a barra grafite de antes pior contraste 4,70:1
Os oito rotulos de aba sao cinza #8A939A, escolhido para o grafite. Sobre cor
saturada eles caem para 1,2 a 1,6, contra os 4,5 que texto precisa -- 8 dos 9
elementos medidos reprovavam. Para o gradiente cheio funcionar seria preciso
clarear os oito rotulos, e ai a barra deixa de ser a barra.
Medido depois de aplicado: 0 de 9 reprovando, pior caso 4,56:1.
============================================================================ */
:root header{
background:linear-gradient(100deg, #0A1030 0%, #141C52 60%, #2B0F3A 100%);
}
/* ============================================================================
15/09/2026: A FOLHA DO +1 VOTO E A MINHA LISTA, os pedidos do Gabriel
(js/90-voto.js, js/91-voto-v3.js, js/66-cabo.js, js/06-chapa.js)
============================================================================ */
/* FOCO LEGIVEL. O 90-voto.css pinta o campo focado de branco puro (#fff), e o
texto desta pele e claro (--txt #E8EDEF): o telefone com DDD, que recebe o
foco sozinho ao abrir a folha, e o "de onde veio" ficavam brancos sobre
branco -- e o Gabriel apontou os dois. Aqui o foco e o mesmo da tela
principal (--bg3 com o anel amarelo): --txt sobre --bg3 da 13,3:1. */
:root .voto input:focus,:root .voto select:focus,:root .voto textarea:focus{
background:var(--bg3);color:var(--txt);outline:2px solid var(--amber);outline-offset:-2px;box-shadow:none}
:root .voto input::placeholder,:root .voto textarea::placeholder{color:var(--dim2);opacity:1}
/* o