/* =========================================================================== Dossie Eleitoral — folha unica. TEMA CLARO E ESCURO NAO SAO DOIS SITES. O padrao e' claro; o escuro entra por `prefers-color-scheme`, que e' a preferencia declarada pelo sistema de quem le'. Um celular no claro e um monitor no escuro mostram a MESMA pagina com paletas diferentes — isso e' o comportamento correto, nao divergencia entre versoes. As duas paletas usam os mesmos tokens e o mesmo layout; o que muda sao as cores, e as duas foram medidas contra a WCAG 2.2 AA. CONTRASTE MEDIDO, NAO ESTIMADO. Cada par texto/fundo abaixo foi calculado. Os tres que reprovavam no tema claro foram corrigidos por ajuste minimo de luminosidade, mantendo matiz e saturacao — a diferenca e' imperceptivel a olho e e' a diferenca entre passar e nao passar: nav ativo #0E7D8B -> #0D7380 3,97 -> 4,54:1 marca ausente #B45309 -> #AE5009 4,29 -> 4,54:1 marca ok #1F7A4D -> #1F784C 4,43 -> 4,54:1 O tema escuro ja' passava em todos. =========================================================================== */ :root{ --ground:#F6F8FB;--surface:#FFF;--surface-2:#F1F5FA; --ink:#0B1F3B;--ink-2:#43505F;--ink-3:#5A6577; --rule:#CDD9EA;--rule-2:#DCE7F5; /* Borda de CAMPO e' componente de interface, nao enfeite: a WCAG 1.4.11 pede 3:1 contra o que esta' ao lado. `--rule` tem 1,43:1 e serve para separar linhas de tabela, onde a regra nao se aplica. */ --rule-campo:#7596C5; --accent:#0E7D8B;--accent-soft:#CFEEF3;--accent-forte:#0D7380; --foco:#0B5563; --ausente:#AE5009;--ausente-soft:#FBEBD6;--na:#5A6577;--na-soft:#E4EAF3; --ok:#1F784C;--ok-soft:#D8F0E2;--nao:#A32B2B;--nao-soft:#F8DEDE; --font:Calibri,Carlito,"Segoe UI",Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,monospace; /* Medida de leitura. Linha longa demais faz o olho perder a proxima: a pagina de metodologia tinha 110 caracteres por linha no monitor largo. */ --medida:72ch; } @media(prefers-color-scheme:dark){:root:not([data-theme="light"]){ --ground:#07172C;--surface:#0B1F3B;--surface-2:#12294A; --ink:#EAF1FA;--ink-2:#AEBFD6;--ink-3:#9FB2CD; --rule:#1E3A5F;--rule-2:#16304F;--rule-campo:#376AAD; --accent:#19C3D6;--accent-soft:#0D3742;--accent-forte:#19C3D6; --foco:#19C3D6; --ausente:#E0A45C;--ausente-soft:#3A2A14;--na:#9FB2CD;--na-soft:#152C4A; --ok:#5FD39B;--ok-soft:#0E3324;--nao:#F09393;--nao-soft:#3A1717; }} *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font); font-size:16px;line-height:1.55} a{color:var(--accent)} /* ── FOCO VISIVEL (WCAG 2.4.7 e 2.4.11) ──────────────────────────────────── A versao anterior tinha `outline:none` no botao de ajuda e nada em lugar nenhum. Quem navega por teclado — e quem usa leitor de tela navega por teclado — nao tinha como saber onde estava. `:focus-visible` e nao `:focus`: o anel aparece para teclado e nao pisca a cada clique de mouse. O anel tem 3px e 2px de afastamento para sobreviver sobre fundo claro, escuro e sobre a propria cor de destaque. */ :focus-visible{outline:3px solid var(--foco);outline-offset:2px;border-radius:2px} /* ── PULAR PARA O CONTEUDO (WCAG 2.4.1) ──────────────────────────────────── Sao dez links de navegacao repetidos em toda pagina. Sem este atalho, chegar ao conteudo por teclado custa dez tabulacoes em CADA ficha. Fica escondido ate' receber foco — e ai' aparece, em vez de existir so' para o leitor de tela: quem navega por teclado enxergando tambem precisa ve-lo. */ .pular{position:absolute;left:8px;top:-60px;z-index:20;background:var(--surface); color:var(--ink);border:1px solid var(--rule-campo);border-radius:3px; padding:10px 14px;font-size:15px;text-decoration:none;transition:top .12s} .pular:focus{top:8px} @media(prefers-reduced-motion:reduce){.pular{transition:none}} .wrap{max-width:1120px;margin:0 auto;padding:24px 20px 64px} header.topo{border-bottom:1px solid var(--rule);background:var(--surface)} .topo .wrap{padding:14px 20px;display:flex;flex-wrap:wrap;gap:12px; align-items:center;justify-content:space-between} .marca{font-weight:700;font-size:18px;letter-spacing:.01em;text-decoration:none; color:var(--ink);display:inline-block;padding:4px 0} /* 12px e nao 10px: e' texto de marca, nao ornamento, e 10px em versalete espacado e' o tamanho em que a leitura para de ser leitura. */ .marca span{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.1em; text-transform:uppercase;color:var(--ink-3);font-weight:400;margin-top:2px} /* Alvo de toque: a WCAG 2.5.8 pede 24x24 CSS px. Com 8px de altura de padding e 13.5px de fonte, o link tinha 31px de altura e 6px de folga vertical entre um e outro no celular, onde a barra quebra em tres linhas. */ nav.cargos{display:flex;flex-wrap:wrap;gap:2px} nav.cargos a{font-size:14px;padding:8px 11px;min-height:36px;display:inline-flex; align-items:center;border-radius:3px;text-decoration:none;color:var(--ink-2)} nav.cargos a:hover{background:var(--surface-2);color:var(--ink)} nav.cargos a.on{background:var(--accent-soft);color:var(--accent-forte);font-weight:600} h1{font-size:clamp(24px,4vw,34px);line-height:1.15;margin:0 0 4px;text-wrap:balance} h2{font-size:19px;margin:0} .sub{color:var(--ink-2);margin:0 0 24px;max-width:var(--medida)} .grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px} .cartao{background:var(--surface);border:1px solid var(--rule);border-radius:3px;padding:12px; text-decoration:none;color:inherit;display:flex;gap:11px;align-items:flex-start} .cartao:hover{border-color:var(--accent);background:var(--surface-2)} .cartao img,.cartao .semfoto{width:52px;height:69px;object-fit:cover;border-radius:2px; background:var(--surface-2);border:1px solid var(--rule-2);flex:none} .cartao b{display:block;font-size:14.5px;line-height:1.2} .cartao small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:3px} .ficha{display:grid;grid-template-columns:212px 1fr;gap:24px;margin-top:20px} @media(max-width:760px){.ficha{grid-template-columns:1fr;gap:18px}} .retrato img,.retrato .semfoto{width:100%;aspect-ratio:3/4;object-fit:cover; border:1px solid var(--rule);border-radius:3px;background:var(--surface-2);display:block} /* No celular a coluna vira largura total e o retrato ocupava meia tela. */ @media(max-width:760px){.retrato img,.retrato .semfoto{max-width:180px}} .legenda{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-top:5px} @media(min-width:761px){.legenda{text-align:center}} .chips{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0 0} .chip{font-family:var(--mono);font-size:12px;padding:4px 8px;border-radius:2px; background:var(--surface-2);border:1px solid var(--rule);color:var(--ink-2)} .bloco{margin-bottom:26px} .bloco>h2{font-family:var(--mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase; color:var(--ink-3);border-bottom:1px solid var(--rule);padding-bottom:6px;margin-bottom:12px; font-weight:400} /* Paragrafo de texto corrido tem medida de leitura; tabela e grade nao tem. */ .bloco>p,.bloco>ul,.bloco>ol{max-width:var(--medida)} .campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:14px 18px;margin:0} .campos div{min-width:0} .campos dt{font-size:12.5px;color:var(--ink-3)} .campos dd{margin:0;font-size:15px} .marca-dado{display:inline-block;font-family:var(--mono);font-size:12px;padding:3px 8px; border-radius:2px} .m-ausente{background:var(--ausente-soft);color:var(--ausente)} .m-na{background:var(--na-soft);color:var(--na)} .m-ok{background:var(--ok-soft);color:var(--ok)} .m-nao{background:var(--nao-soft);color:var(--nao)} /* A COR NUNCA CARREGA A INFORMACAO SOZINHA. O rotulo esta' sempre escrito ao lado, e o `title` explica o que a situacao significa: cerca de 8% dos homens tem alguma forma de daltonismo, e verde e vermelho e' justamente o par que some. A cor reforca; quem informa e' o texto. */ .situacao{white-space:normal;line-height:1.35} /* ── TABELAS ─────────────────────────────────────────────────────────────── `.rolagem` e' uma regiao que rola. No HTML ela leva `tabindex="0"`: sem isso o Chrome nao da' foco a ela e o conteudo que passa da altura fica inacessivel por teclado (WCAG 2.1.1). A altura era 340px fixos — no monitor de 1080px isso e' um terco da tela para uma tabela de trinta linhas, e no celular deitado sobra menos que isso. Passa a acompanhar a janela, com teto para nao engolir a pagina. */ .rolagem{overflow:auto;max-height:min(62vh,560px); border:1px solid var(--rule-2);border-radius:3px;overscroll-behavior:contain} @media(max-width:760px){.rolagem{max-height:min(70vh,440px)}} table{border-collapse:collapse;width:100%;font-size:14.5px} thead th{position:sticky;top:0;z-index:1;background:var(--surface-2); font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase; color:var(--ink-3);text-align:left;font-weight:400;padding:9px 11px;white-space:nowrap; border-bottom:1px solid var(--rule)} td{padding:9px 11px;border-top:1px solid var(--rule-2)} td.num,th.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right} /* Faixa alternada: em tabela de trinta linhas o olho troca de linha ao correr para a direita. E' auxilio de leitura, nao decoracao — por isso a diferenca e' minima e nao carrega significado nenhum. */ tbody tr:nth-child(even){background:color-mix(in srgb,var(--surface-2) 45%,transparent)} tbody tr:hover{background:var(--surface-2)} .evento{display:grid;grid-template-columns:74px 1fr;gap:10px;font-size:14.5px;padding:5px 0} .evento time{font-family:var(--mono);font-size:12.5px;color:var(--ink-3)} .filtros{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px} .filtros select,.filtros input{font-family:var(--font);font-size:15px;padding:9px 10px; min-height:40px;border:1px solid var(--rule-campo);border-radius:3px; background:var(--surface);color:var(--ink)} .contagem{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);margin-bottom:10px} footer.rodape{border-top:1px solid var(--rule);margin-top:40px;padding:16px 20px 40px; font-size:13px;color:var(--ink-3);display:flex;flex-direction:column;gap:6px; max-width:1120px;margin-left:auto;margin-right:auto} footer.rodape span{max-width:var(--medida)} .aviso{background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--accent); border-radius:3px;padding:13px 15px;font-size:14.5px;color:var(--ink-2);margin:0 0 22px; max-width:var(--medida)} .urna{margin-top:12px;background:var(--surface-2);border:1px solid var(--rule); border-radius:3px;padding:8px 12px;display:flex;align-items:baseline;gap:9px} .urna b{font-family:var(--mono);font-size:27px;letter-spacing:.06em; font-variant-numeric:tabular-nums;line-height:1;color:var(--ink)} .urna small{font-size:12.5px;color:var(--ink-3)} /* rotulos abaixo do retrato — sem eles "BR" e "21 PCB" nao dizem nada */ dl.rotulado{margin:12px 0 0;display:flex;flex-direction:column;gap:10px} .rotulado>div{display:flex;flex-direction:column;gap:2px} .rotulado dt{font-size:12.5px;color:var(--ink-3)} .rotulado dd{margin:0;font-size:15px;color:var(--ink)} .rotulado .urna{margin-top:0} /* Tooltip do glossario: o nome tecnico do indicador nao explica nada sozinho. 24x24 e' o minimo de alvo da WCAG 2.5.8 — tinha 15x15. E o `outline:none` que estava aqui apagava o foco do teclado justamente no unico controle interativo da pagina. */ .ajuda{display:inline-flex;align-items:center;justify-content:center; width:24px;height:24px;margin-left:6px;border-radius:50%; border:1px solid var(--rule-campo);background:var(--surface-2); font-family:var(--mono);font-size:12px;color:var(--ink-2);cursor:help;vertical-align:middle} .ajuda:hover{border-color:var(--accent);color:var(--accent)} .nota-lei{font-size:13.5px;color:var(--ink-3);margin:0 0 22px;padding-left:11px; border-left:2px solid var(--rule);max-width:var(--medida)} .cartao[hidden]{display:none} /* Texto integral do plano: documento longo, entao leitura de documento. Coluna unica e centralizada. Duas colunas obrigam a descer e subir de novo — o texto tem 24 mil palavras, nao e' jornal. */ .plano{max-width:70ch;margin:30px auto 0} .plano p{margin:0 0 18px;font-size:17px;line-height:1.75;color:var(--ink-2); text-align:justify;hyphens:auto} .plano p:first-of-type{font-size:18.5px;line-height:1.7;color:var(--ink)} .plano h2{margin:38px 0 14px;font-size:17px;font-weight:700;color:var(--ink); letter-spacing:.01em;line-height:1.35;text-align:left; padding-bottom:7px;border-bottom:1px solid var(--rule)} .plano h2:first-child{margin-top:0} .plano .marcador{display:block;font-family:var(--mono);font-size:12px; letter-spacing:.12em;color:var(--ink-3);margin-bottom:4px;font-weight:400} @media(max-width:700px){.plano p{text-align:left;font-size:16px}} /* Glossario de indicadores (pagina de metodologia). Quatro colunas com texto corrido em duas delas: sem largura maxima a coluna de ressalvas domina e as outras viram tiras. */ .glossario td{vertical-align:top;padding-top:14px;padding-bottom:14px} .glossario td small{display:block;margin-top:4px;color:var(--ink-3);line-height:1.5} .glossario th:nth-child(2),.glossario td:nth-child(2){white-space:nowrap} .glossario td:nth-child(3){min-width:24ch;max-width:46ch} .glossario td:nth-child(4){min-width:16ch;max-width:26ch} /* Foto na LISTAGEM de proporcionais — nome proprio, e nao `.retrato`, que ja' e a foto da FICHA. Reusar aquele nome esmagou a coluna esquerda de todas as fichas: a regra daqui vem depois no arquivo e sobrescrevia o `width:100%` original, deixando a foto com 38px e o texto quebrando. */ .foto-lista{width:44px;padding-right:0} .foto-lista img{width:38px;height:38px;object-fit:cover;object-position:top center; border-radius:4px;display:block;background:var(--surface-2)} /* O numero da urna com a mesma cara da ficha: e' o que a pessoa digita. */ .urna-lista{font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:.5px; white-space:nowrap} /* Chapa: vice ou suplentes. Cartao horizontal, foto pequena — a funcao e' reconhecer quem concorre junto, nao contemplar o retrato. */ .chapa{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px} .parceiro{display:flex;gap:12px;align-items:center;padding:12px; border:1px solid var(--rule);border-radius:6px;background:var(--surface-2)} .parceiro img{width:52px;height:52px;object-fit:cover;object-position:top center; border-radius:4px;flex:0 0 auto} .parceiro small{display:block;color:var(--ink-3);font-size:13px;margin-top:2px} /* Visivel so' para leitor de tela. O campo de busca tem placeholder, que NAO e' rotulo: leitor de tela le' o placeholder como dica, nao como nome do campo, e alguns nem leem. O