/* ac-mapa.css: o visual do mapa do Brasil por estado, da legenda de candidatos e dos contornos (INTERFACES 9.2 e 9.3; criticas d e e). Pareia com assets/js/ac-mapa.js.
   Especificação visual: simples/prototipo/estilo.css (mesmas cores, mesmo contorno de tinta de 1 px, mesmos padrões de "sem dado", "empate" e "erro").

   REGRAS QUE ESTE ARQUIVO OBEDECE
   - NENHUMA transparência (opacidade de preenchimento ou de elemento), em lugar nenhum. O protótipo deixava o preenchimento do estado "poucas seções" a 55% e a sigla
     branca "AM" ficava sobre azul claro (2,1:1, reprovado, critica_simples/crop_mapa.png). Aqui "poucas seções" (`--ac-sfN`) e "apagada" (`--ac-saN`) são cores SÓLIDAS, a mistura da cor cheia com o branco do cartão
     (55% e 14%), e a cor do texto sobre cada uma é um token também (`--ac-sobreN`, `--ac-sobrefN`). Todo par texto/fundo >= 4,5:1; o teste que MEDE isso no navegador,
     inclusive o texto SVG sobre os padrões de hachura e pontos (contra as DUAS cores do padrão), é teste/fp2a/contraste_mapa.py.
   - Os 12 slots x 5 tokens abaixo têm os MESMOS nomes e valores que o INTERFACES 9.2 prevê para o ac-acompanhar.css (lista de candidatos). Repetir a declaração é inofensivo
     (valores idênticos); o teste fp2a/contraste_mapa.py confere os dois arquivos entre si quando os dois existem.
   - Sem fonte externa e sem imagem (CSP: só `self`). A família da sigla é a da página (`--ac-f-ui`), com reserva do sistema.
   - Sem transição: o mapa troca de cor de uma vez (quem tem `prefers-reduced-motion` não precisa de regra à parte, e padrões não transicionam mesmo). */

:root {
  /* 12 cores de candidato: cheia (--ac-sN), texto sobre ela (--ac-sobreN), "poucas seções" sólida (--ac-sfN), texto sobre ela (--ac-sobrefN), "apagada" sólida (--ac-saN).
     Fonte: provas/mapa/tokens.py (calcula e confere); cores cheias = as 12 do protótipo (ΔE76 >= 17 entre qualquer par, em visão normal, deuteranopia e protanopia). */
  --ac-s0: #4E79A7; --ac-sobre0: #FFFFFF; --ac-sf0: #9EB5CF; --ac-sobref0: #0A1E43; --ac-sa0: #E6ECF3;
  --ac-s1: #D55E00; --ac-sobre1: #000000; --ac-sf1: #E8A673; --ac-sobref1: #0A1E43; --ac-sa1: #F9E8DB;
  --ac-s2: #59A14F; --ac-sobre2: #0A1E43; --ac-sf2: #A4CB9E; --ac-sobref2: #0A1E43; --ac-sa2: #E8F2E6;
  --ac-s3: #6A3D9A; --ac-sobre3: #FFFFFF; --ac-sf3: #AD94C7; --ac-sobref3: #0A1E43; --ac-sa3: #EAE4F1;
  --ac-s4: #F0E442; --ac-sobre4: #0A1E43; --ac-sf4: #F7F097; --ac-sobref4: #0A1E43; --ac-sa4: #FDFBE5;
  --ac-s5: #264653; --ac-sobre5: #FFFFFF; --ac-sf5: #8899A0; --ac-sobref5: #0A1E43; --ac-sa5: #E1E5E7;
  --ac-s6: #009E73; --ac-sobre6: #0A1E43; --ac-sf6: #73CAB2; --ac-sobref6: #0A1E43; --ac-sa6: #DBF1EB;
  --ac-s7: #56B4E9; --ac-sobre7: #0A1E43; --ac-sf7: #A2D6F3; --ac-sobref7: #0A1E43; --ac-sa7: #E7F4FC;
  --ac-s8: #FF9DA7; --ac-sobre8: #0A1E43; --ac-sf8: #FFC9CF; --ac-sobref8: #0A1E43; --ac-sa8: #FFF1F3;
  --ac-s9: #E69F00; --ac-sobre9: #0A1E43; --ac-sf9: #F1CA73; --ac-sobref9: #0A1E43; --ac-sa9: #FCF2DB;
  --ac-s10: #E9C46A; --ac-sobre10: #0A1E43; --ac-sf10: #F3DFAD; --ac-sobref10: #0A1E43; --ac-sa10: #FCF7EA;
  --ac-s11: #A6CEE3; --ac-sobre11: #0A1E43; --ac-sf11: #CEE4F0; --ac-sobref11: #0A1E43; --ac-sa11: #F3F8FB;
}

/* Variáveis do mapa. Escopo `.ac-mapa` e `.ac-mapa__legenda` (as únicas áreas onde o ac-mapa.js põe `ac-slot-N`): não mexe em nenhum outro elemento da página. */
.ac-mapa, .ac-mapa__legenda {
  --ac-mapa-tinta: #0A1E43;          /* contorno dos estados e texto sobre fundo claro: 16:1 sobre o cartão */
  --ac-mapa-tinta-2: #3C4B69;        /* texto sobre os estados "apagados": >= 6,8:1 sobre as 12 cores apagadas */
  --ac-mapa-verde: #12874F;          /* contorno de "seu estado": 4,9:1 sobre o cartão */
  --ac-mapa-azul: #1B4FA8;           /* anel de foco do teclado */
  --ac-mapa-neutra: #D5DEEE;         /* estado do mapa seletor (nenhum candidato) */
  --ac-mapa-escolhida-neutra: #BFD3F3;  /* estado escolhido no mapa seletor */
  --ac-mapa-cor: var(--ac-mapa-neutra);
}
.ac-mapa .ac-slot-0, .ac-mapa__legenda .ac-slot-0 { --ac-mapa-cor: var(--ac-s0); --ac-mapa-sobre: var(--ac-sobre0); --ac-mapa-fraca: var(--ac-sf0); --ac-mapa-apagada: var(--ac-sa0); }
.ac-mapa .ac-slot-1, .ac-mapa__legenda .ac-slot-1 { --ac-mapa-cor: var(--ac-s1); --ac-mapa-sobre: var(--ac-sobre1); --ac-mapa-fraca: var(--ac-sf1); --ac-mapa-apagada: var(--ac-sa1); }
.ac-mapa .ac-slot-2, .ac-mapa__legenda .ac-slot-2 { --ac-mapa-cor: var(--ac-s2); --ac-mapa-sobre: var(--ac-sobre2); --ac-mapa-fraca: var(--ac-sf2); --ac-mapa-apagada: var(--ac-sa2); }
.ac-mapa .ac-slot-3, .ac-mapa__legenda .ac-slot-3 { --ac-mapa-cor: var(--ac-s3); --ac-mapa-sobre: var(--ac-sobre3); --ac-mapa-fraca: var(--ac-sf3); --ac-mapa-apagada: var(--ac-sa3); }
.ac-mapa .ac-slot-4, .ac-mapa__legenda .ac-slot-4 { --ac-mapa-cor: var(--ac-s4); --ac-mapa-sobre: var(--ac-sobre4); --ac-mapa-fraca: var(--ac-sf4); --ac-mapa-apagada: var(--ac-sa4); }
.ac-mapa .ac-slot-5, .ac-mapa__legenda .ac-slot-5 { --ac-mapa-cor: var(--ac-s5); --ac-mapa-sobre: var(--ac-sobre5); --ac-mapa-fraca: var(--ac-sf5); --ac-mapa-apagada: var(--ac-sa5); }
.ac-mapa .ac-slot-6, .ac-mapa__legenda .ac-slot-6 { --ac-mapa-cor: var(--ac-s6); --ac-mapa-sobre: var(--ac-sobre6); --ac-mapa-fraca: var(--ac-sf6); --ac-mapa-apagada: var(--ac-sa6); }
.ac-mapa .ac-slot-7, .ac-mapa__legenda .ac-slot-7 { --ac-mapa-cor: var(--ac-s7); --ac-mapa-sobre: var(--ac-sobre7); --ac-mapa-fraca: var(--ac-sf7); --ac-mapa-apagada: var(--ac-sa7); }
.ac-mapa .ac-slot-8, .ac-mapa__legenda .ac-slot-8 { --ac-mapa-cor: var(--ac-s8); --ac-mapa-sobre: var(--ac-sobre8); --ac-mapa-fraca: var(--ac-sf8); --ac-mapa-apagada: var(--ac-sa8); }
.ac-mapa .ac-slot-9, .ac-mapa__legenda .ac-slot-9 { --ac-mapa-cor: var(--ac-s9); --ac-mapa-sobre: var(--ac-sobre9); --ac-mapa-fraca: var(--ac-sf9); --ac-mapa-apagada: var(--ac-sa9); }
.ac-mapa .ac-slot-10, .ac-mapa__legenda .ac-slot-10 { --ac-mapa-cor: var(--ac-s10); --ac-mapa-sobre: var(--ac-sobre10); --ac-mapa-fraca: var(--ac-sf10); --ac-mapa-apagada: var(--ac-sa10); }
.ac-mapa .ac-slot-11, .ac-mapa__legenda .ac-slot-11 { --ac-mapa-cor: var(--ac-s11); --ac-mapa-sobre: var(--ac-sobre11); --ac-mapa-fraca: var(--ac-sf11); --ac-mapa-apagada: var(--ac-sa11); }
/* sem cor válida (slot nulo ou acima de 11): cinza-azulado neutro; texto de tinta (5,6:1) */
.ac-mapa .ac-slot-nenhum, .ac-mapa__legenda .ac-slot-nenhum { --ac-mapa-cor: #8A97B1; --ac-mapa-sobre: #0A1E43; --ac-mapa-fraca: #BFC6D4; --ac-mapa-apagada: #EFF0F4; }

/* ---------------------------------------------------------------- o SVG de definições compartilhado (padrões e um <path> por UF)
   Fora do fluxo (`position:absolute`), nunca `display:none`: em alguns navegadores padrões e gradientes não resolvem de dentro de um <svg> com display:none.
   `vector-effect: non-scaling-stroke` (contorno com a mesma espessura em pixels em qualquer largura de mapa) é ATRIBUTO do <path> original, escrito pelo ac-mapa.js: no Chrome
   a regra de CSS não chega à cópia do <use> (medido), o atributo chega. A regra abaixo fica só como reserva para navegadores que aplicam o CSS à cópia. */
.ac-mapa-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
#ac-mapa-defs path { vector-effect: non-scaling-stroke; }
/* Máscara do contorno (ac-m-rotulos): um retângulo apagado em volta de cada sigla, para o contorno do estado escolhido, o fio de "seu estado" e o anel de foco não cobrirem letra
   nenhuma. PB, ES e RJ só têm sigla a partir de 720 px (.ac-rot--largo): o retângulo deles acompanha, senão o contorno ficaria aberto num lugar sem letra. */
.ac-mapa-defs .ac-mascara--largo { display: none; }
@media (min-width: 720px) { .ac-mapa-defs .ac-mascara--largo { display: inline; } }

/* ---------------------------------------------------------------- o mapa */
.ac-mapa { display: block; width: 100%; height: auto; max-height: 520px; overflow: visible; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }   /* manipulation: tocar num estado não espera o duplo toque do zoom */
.ac-mapa--enfeite { pointer-events: none; }
.ac-mapa .ac-uf { cursor: pointer; outline: none; }
.ac-mapa--enfeite .ac-uf { cursor: default; }

/* a forma do estado: cor cheia do líder; contorno de tinta de 1 px (>= 3:1 contra o cartão, WCAG 1.4.11) */
.ac-mapa .ac-uf__forma { fill: var(--ac-mapa-cor); stroke: var(--ac-mapa-tinta); stroke-width: 1px; stroke-linejoin: round; }
.ac-mapa .ac-uf.ac-fraca .ac-uf__forma { fill: var(--ac-mapa-fraca); }          /* poucas seções apuradas: a cor ainda pode mudar muito */
.ac-mapa .ac-uf.ac-apagada .ac-uf__forma { fill: var(--ac-mapa-apagada); }      /* foco em outro candidato (vem depois da `fraca`: vence quando as duas existem) */
/* Os três padrões levam uma cor de RESERVA depois do url(): se o navegador não resolver a referência do padrão (o <svg> de definições está noutro lugar do documento), o estado
   fica nessa cor lisa em vez de transparente (que pareceria "sem contorno de dado nenhum"); a tinta sobre elas passa de 9:1 (conferido em fp2a/contraste_mapa.py). */
.ac-mapa .ac-uf.ac-sem-dado .ac-uf__forma { fill: url(#ac-p-sem) #E4E9F2; }          /* hachura: "ainda não apurado" (não é zero voto) */
.ac-mapa .ac-uf.ac-empate .ac-uf__forma { fill: url(#ac-p-empate) #D5DBE8; }         /* pontos: empate no 1º lugar (nunca se escolhe um) */
.ac-mapa .ac-uf.ac-indeterminado .ac-uf__forma { fill: url(#ac-p-erro) #FFF3C9; }    /* hachura amarela: dados indisponíveis */
.ac-mapa .ac-uf.ac-neutra .ac-uf__forma { fill: var(--ac-mapa-neutra); }        /* mapa seletor e enfeite: nenhum candidato */
.ac-mapa .ac-uf.ac-neutra.ac-escolhida .ac-uf__forma { fill: var(--ac-mapa-escolhida-neutra); }

@media (hover: hover) {
  .ac-mapa:not(.ac-mapa--enfeite) .ac-uf:hover .ac-uf__forma { stroke-width: 2.4px; }
}
/* anel de foco do teclado, RESERVA (o de verdade é o da camada de contornos, por cima, aberto em volta das siglas; esta cobre o caso de o navegador não entregar `focusin` ao <g> e o JS
   não desenhá-lo). Com o anel desenhado o ac-mapa.js põe data-anel no <svg> e esta regra se cala: o traço dela fica SOB as siglas e sujaria o pé das letras dos estados pequenos. */
.ac-mapa:not([data-anel]) .ac-uf:focus-visible .ac-uf__forma { stroke: var(--ac-mapa-azul); stroke-width: 4px; }

/* ---------------------------------------------------------------- siglas (camada acima dos estados; contraste >= 4,5:1 medido em teste/fp2a/contraste_mapa.py)
   O tamanho da fonte é o atributo font-size do <text> (unidades do viewBox); não se declara font-size aqui, para a regra de CSS não vencer o atributo. */
.ac-mapa .ac-rotulos { pointer-events: none; }
.ac-mapa .ac-rot { fill: var(--ac-mapa-sobre, var(--ac-mapa-tinta)); font-family: var(--ac-f-ui, "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); font-weight: 800; letter-spacing: 0; text-anchor: middle; pointer-events: none; -webkit-user-select: none; user-select: none; }
.ac-mapa .ac-rot.ac-fraca { fill: var(--ac-mapa-tinta); }                         /* sobre a cor "poucas seções" o texto é sempre a tinta (>= 5,5:1 nas 12) */
.ac-mapa .ac-rot.ac-apagada { fill: var(--ac-mapa-tinta-2); }
.ac-mapa .ac-rot.ac-sem-dado, .ac-mapa .ac-rot.ac-empate, .ac-mapa .ac-rot.ac-indeterminado, .ac-mapa .ac-rot.ac-neutra { fill: var(--ac-mapa-tinta); }   /* contra as DUAS cores do padrão */
.ac-mapa .ac-rot--largo { display: none; }                                         /* PB, ES e RJ: menos de 8 px no celular; aparecem a partir de 720 px */
@media (min-width: 720px) { .ac-mapa .ac-rot--largo { display: inline; } }
.ac-mapa--enfeite .ac-rotulos { display: none; }                                   /* o mapa do gate é só enfeite: sem letras */

/* ---------------------------------------------------------------- alvos de toque (invisíveis): traço de comprimento zero com ponta redonda = círculo de 44 px em qualquer escala */
.ac-mapa .ac-toque__alvo { fill: none; stroke: transparent; stroke-width: 44px; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: stroke; cursor: pointer; }
.ac-mapa .ac-toque__alvo--df { stroke-width: 28px; }                               /* o DF fica POR CIMA do GO: menor, para não engolir o centro do GO */

/* ---------------------------------------------------------------- camada de contornos (por último; não recebe o ponteiro) */
.ac-mapa .ac-contorno use { fill: none; stroke-linejoin: round; }
.ac-mapa .ac-contorno__sel { stroke: var(--ac-mapa-tinta); stroke-width: 4px; }
.ac-mapa .ac-contorno__sua { stroke: var(--ac-mapa-verde); stroke-width: 2px; }       /* "seu estado": fio verde POR CIMA do contorno de tinta do escolhido (fica um fio verde dentro do contorno escuro) e sozinho quando o escolhido é outro */
.ac-mapa .ac-contorno__foco-fundo { stroke: #FFFFFF; stroke-width: 8px; }
.ac-mapa .ac-contorno__foco { stroke: var(--ac-mapa-azul); stroke-width: 4px; }

/* ---------------------------------------------------------------- legenda dos candidatos em destaque (o contêiner `.ac-mapa__legenda` é do HTML; os botões são do JS) */
.ac-mapa__legenda { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ac-mapa__legenda[hidden] { display: none; }
/* O NOME do candidato vem de nome_urna e o TSE admite ~30 letras ("MARIA APARECIDA DE OLIVEIRA SOUZA"): o botao NUNCA passa da largura do cartao (max-width: 100%, min-width: 0), o nome QUEBRA
   em vez de ser cortado (overflow-wrap) e a cor e a contagem "· N estados" ficam inteiras (flex: none). Antes era `nowrap` + `flex: 0 0 auto`: em 320 px estourava com 16 letras e a pagina
   ganhava rolagem horizontal (o corpo corta, e o leitor via "· 12 es"). Cada propriedade e' declarada aqui de proposito (flex, white-space no botao e no nome): a copia desta regra no
   ac-acompanhar.css (carregado ANTES, na mesma especificidade) continua valendo nas que nao repetimos e perde nas que repetimos. */
.ac-leg { flex: 0 1 auto; min-width: 0; max-width: 100%; white-space: normal; text-align: left; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px 6px 8px; border-radius: 12px; border: 1.5px solid #B9C6DE; background: #FFFFFF; color: #0A1E43; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.ac-leg[aria-pressed="true"] { border-color: #1B4FA8; background: #E7EFFC; }
.ac-leg:focus-visible { outline: 3px solid #1B4FA8; outline-offset: 2px; }
.ac-leg__cor { width: 18px; height: 18px; border-radius: 5px; background: var(--ac-mapa-cor); box-shadow: inset 0 0 0 1px rgba(10, 30, 67, .4); flex: none; }
.ac-leg__nome { min-width: 0; white-space: normal; word-break: break-word; overflow-wrap: anywhere; }   /* word-break: reserva dos navegadores sem `anywhere` */
.ac-leg__n { flex: none; white-space: nowrap; font-weight: 500; color: #56627D; font-size: 13px; }
.ac-leg__n:empty { display: none; }

@media (min-width: 960px) {
  .ac-mapa { max-height: 640px; }
}