/* Página /votacao (13/10): cartões de informação, transporte por cidade e perguntas do TSE no padrão da home. */

.btn-tinta,.btn-claro{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:48px;padding:0 1.15em;border:2.5px solid var(--tinta);border-radius:999px;font:800 1rem/1 var(--texto);font-stretch:86%;text-decoration:none;cursor:pointer;text-align:center}
.btn-tinta{background:var(--tinta);color:#fff}
.btn-claro{background:#fff;color:var(--tinta)}
.bloco[id]{scroll-margin-top:calc(var(--topo) + 8px)}

/* Data do 2º turno logo abaixo do título */
.vot-data{margin:0;padding:.4em .8em .34em;background:var(--amarelo);font:900 clamp(15px,1.6vw,20px)/1 var(--tit);text-transform:uppercase;letter-spacing:-.01em;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}

/* Cartões de onde e quando */
.vot-duas{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start;width:min(1000px,100%);margin-top:6px}
@media (min-width:700px){.vot-duas{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
.vot-cartao{display:grid;gap:12px;align-content:start;justify-items:start;padding:20px;border:2.5px solid var(--tinta);border-radius:var(--raio);background:#fff;box-shadow:4px 5px 0 var(--tinta)}
.vot-cartao h3{margin:0;font:900 clamp(20px,1.9vw,26px)/1.1 var(--tit);letter-spacing:-.02em;text-transform:uppercase}
.vot-cartao p{margin:0;font:500 16px/1.45 var(--texto)}
.vot-fonte{font:500 14px/1.45 var(--texto);color:var(--tinta-2);overflow-wrap:anywhere}
.vot-cartao .vot-fonte,.vot-cidade .vot-fonte{margin:0}
.vot-fonte a,.vot-confira{overflow-wrap:anywhere}
.vot-horas{display:grid;gap:10px;width:100%;margin:0;padding:0;list-style:none}
.vot-horas li{display:grid;gap:2px;padding:10px 12px;border-left:6px solid var(--verde);background:var(--cinza);font:500 15px/1.35 var(--texto)}
.vot-horas b{font-weight:800}

/* Faltou no 1º turno: links oficiais */
.vot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:4px}

/* Transporte: estado e grupo numa linha, cidades num trilho lateral */
.vot-filtro{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 16px;width:100%}
.vot-uf{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px}
.vot-uf label{font:800 15px/1.2 var(--texto)}
.vot-uf select{width:min(260px,100%);min-height:48px;padding:0 2.4em 0 1em;border:2.5px solid var(--tinta);border-radius:var(--raio);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right .8em center/18px no-repeat;color:var(--tinta);font:700 16px/1 var(--texto);appearance:none;-webkit-appearance:none;cursor:pointer}
.vot-uf select:focus-visible{outline:3px solid var(--azul);outline-offset:3px}
.vot-filtro .temas{flex-wrap:wrap;justify-content:center;width:auto;margin:0;padding:2px;overflow:visible;-webkit-mask-image:none;mask-image:none}
.vot-filtro .temas button:first-child,.vot-filtro .temas button:last-child{margin:0}
.vot-filtro .estado{flex-basis:100%;margin:0;text-align:center}
.vot-nota{max-width:60ch;margin:0;text-align:center;font:500 15px/1.4 var(--texto)}
.vot-nota[hidden]{display:none}
.vot-sub{margin:clamp(6px,1vw,14px) 0 0;text-align:center;font:900 clamp(18px,1.8vw,24px)/1.1 var(--tit);letter-spacing:-.02em;text-transform:uppercase}
.vot-cidades{display:grid;grid-auto-flow:column;grid-auto-columns:min(84%,320px);gap:14px;width:calc(100% + 2 * var(--margem));margin:4px calc(-1 * var(--margem)) 0;padding:4px var(--margem) 12px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--margem);overscroll-behavior-x:contain;scrollbar-width:none;align-items:start}
.vot-cidades::-webkit-scrollbar{display:none}
@media (min-width:700px){.vot-cidades{grid-auto-columns:clamp(260px,24vw,320px);gap:18px}}
.vot-cidade{scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;min-width:0;padding:14px 16px;border:2.5px solid var(--tinta);border-radius:var(--raio);background:#fff;box-shadow:3px 4px 0 var(--tinta)}
.vot-cidade[hidden]{display:none}
.vot-cidade p:last-child{margin-top:auto} /* a fonte fica no pé do cartão: os pés se alinham no trilho */
.vot-cidade p{margin:0;font:500 15px/1.4 var(--texto)}
.vot-cidade-nome{font-size:18px!important}
.vot-cidade-nome span{display:inline-block;padding:.15em .45em;background:var(--amarelo);font:900 12px/1 var(--tit);vertical-align:.12em}
.vot-confira{color:var(--vermelho-t);font-weight:700!important}
.vot-vazio{max-width:52ch}

.pg-acoes{grid-template-columns:minmax(0,1fr)} /* o texto longo não alarga a coluna */
/* Perguntas do TSE */
.vot-perguntas{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:10px;width:min(820px,100%);margin-top:6px}
@media (min-width:560px){.vot-perguntas{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:12px 16px}}
@media (min-width:880px){.vot-perguntas{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vot-perguntas details{padding:6px 18px;border:2.5px solid var(--tinta);border-radius:var(--raio);background:#fff;box-shadow:3px 4px 0 var(--tinta)}
.vot-perguntas summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;font:800 16px/1.3 var(--texto);cursor:pointer;list-style:none}
.vot-perguntas summary::-webkit-details-marker{display:none}
.vot-perguntas summary::after{content:'+';flex:none;font:900 24px/1 var(--texto)}
.vot-perguntas details[open] summary::after{content:'\2212'}
.vot-perguntas details p{margin:0 0 12px;font:500 16px/1.5 var(--texto)}
.vot-perguntas details .vot-fonte{font-size:14px}

/* Antes de o JS montar o conteúdo, cada bloco já ocupa a altura que terá (sem isso, a página pula quando ele chega).
   Valores medidos com os dados atuais em cada faixa de tela; só valem enquanto o bloco está vazio. */
.reserva{visibility:hidden}
[data-faltou-fonte]:empty,[data-transporte-fonte]:empty,[data-transporte-estado]:empty{display:block;min-height:20px}
[data-grupos]:empty{min-height:48px}
.vot-duas:has([data-horas]:empty){min-height:706px}
[data-links]:empty{min-height:164px}
[data-transporte-fonte]:empty{min-height:61px}
[data-cidades]:empty{min-height:263px}
[data-perguntas]:empty{min-height:1025px}
@media (min-width:700px){.vot-duas:has([data-horas]:empty){min-height:617px}[data-links]:empty{min-height:106px}[data-transporte-fonte]:empty{min-height:41px}[data-cidades]:empty{min-height:326px}[data-perguntas]:empty{min-height:569px}}
@media (min-width:820px){.vot-duas:has([data-horas]:empty){min-height:406px}}
@media (min-width:1000px){[data-links]:empty{min-height:46px}[data-cidades]:empty{min-height:240px}[data-perguntas]:empty{min-height:340px}}

/* Densidade pela altura útil (regra do Thiago de 13/10: cada seção cabe numa tela): cada medida escala com a altura útil --u
   (janela menos o topo fixo) e nunca passa do tamanho original. Só de 700px em diante. */
@media (min-width:700px){
  main>.bloco[id]{--u:calc(100svh - var(--topo));gap:clamp(6px,calc(var(--u) * .011),14px);padding-block:min(clamp(44px,5vw,72px),clamp(14px,calc(var(--u) * .034),72px))}
  main>.bloco[id] .titulo-caixa{font-size:min(clamp(30px,5.4vw,72px),clamp(26px,calc(var(--u) * .06),72px))}
  main>.bloco[id] .bloco-sub{max-width:min(100ch,100%);font-size:min(clamp(16px,1.5vw,19px),clamp(15px,calc(var(--u) * .03),19px))}
  .vot-cidades{margin-top:0;padding-bottom:10px}
  .vot-cidades{grid-auto-columns:clamp(260px,max(24vw,min(calc(var(--u) * .7),52vw)),380px)} /* janela baixa: cartão mais largo, texto em menos linhas */
  .vot-duas{gap:clamp(10px,calc(var(--u) * .03),24px)}
  @media (max-width:999.98px){.vot-duas{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}} /* meia tela: o cartão dos horários, mais cheio, ganha a coluna maior */
  .vot-cartao{gap:clamp(5px,calc(var(--u) * .017),12px);padding:clamp(10px,calc(var(--u) * .028),20px) clamp(14px,calc(var(--u) * .032),20px)}
  .vot-cartao h3{font-size:min(clamp(20px,1.9vw,26px),clamp(18px,calc(var(--u) * .04),26px))}
  .vot-cartao p{font-size:min(16px,clamp(14px,calc(var(--u) * .028),16px));line-height:1.4}
  .vot-fonte{font-size:clamp(13px,calc(var(--u) * .024),14px)}
  .vot-horas{gap:clamp(4px,calc(var(--u) * .014),10px)}
  .vot-horas li{padding:clamp(5px,calc(var(--u) * .014),10px) 12px;font-size:min(15px,clamp(13.5px,calc(var(--u) * .026),15px));line-height:1.3}
  .vot-uf{flex-wrap:nowrap}
  .vot-cartao .btn-tinta{min-height:clamp(40px,calc(var(--u) * .07),48px)}
  .vot-cidade{gap:clamp(3px,calc(var(--u) * .006),6px);padding:clamp(8px,calc(var(--u) * .018),14px) 14px}
  .vot-cidade p{font-size:clamp(14px,calc(var(--u) * .021),15px);line-height:1.35}
  .vot-cidade-nome{font-size:clamp(16px,calc(var(--u) * .026),18px)!important}
  .vot-perguntas{gap:clamp(6px,calc(var(--u) * .012),12px) 14px}
  .vot-perguntas details{padding:clamp(0px,calc(var(--u) * .003),2px) clamp(10px,calc(var(--u) * .02),14px)}
  .vot-perguntas summary{min-height:clamp(40px,calc(var(--u) * .06),52px);font-size:clamp(14px,calc(var(--u) * .022),16px)}
  #duvidas .pg-acoes .btn-vermelho{min-height:clamp(44px,calc(var(--u) * .075),58px)}
  #duvidas .pg-acoes{justify-self:center;align-self:center;width:min(390px,100%);margin-top:0} /* 390: "Entrar na corrente" a 28px não cabe em 320 */
}

/* Borda do trilho: onde ainda há cidades para rolar, a ponta esmaece sob a seta, em vez de a seta cobrir texto legível */
@media (min-width:700px){
  .vot-cidades{--mi:0px;--mf:0px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--mi),#000 calc(100% - var(--mf)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--mi),#000 calc(100% - var(--mf)),transparent)}
  .carrossel:has(.anterior:not([hidden],:disabled)) .vot-cidades{--mi:72px}
  .carrossel:has(.proxima:not([hidden],:disabled)) .vot-cidades{--mf:96px}
}
/* Dúvidas (21 perguntas), de 700 a 1299 px: trilho lateral de 3 linhas com setas (a grade de 4 colunas passava da tela em janela baixa).
   De 1300 px em diante: grade de 4 colunas, com o botão numa fileira própria. */
@media (min-width:700px) and (max-width:1299px){
  #duvidas .vot-perguntas{--mi:0px;--mf:0px;grid-template-columns:none;grid-template-rows:repeat(3,auto);grid-auto-flow:column;grid-auto-columns:clamp(240px,34vw,300px);gap:10px 14px;width:calc(100% + 2 * var(--margem));margin:4px calc(-1 * var(--margem)) 0;padding:4px var(--margem) 12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--margem);overscroll-behavior-x:contain;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--mi),#000 calc(100% - var(--mf)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--mi),#000 calc(100% - var(--mf)),transparent)}
  #duvidas .vot-perguntas::-webkit-scrollbar{display:none}
  #duvidas .vot-perguntas details{scroll-snap-align:start}
  #duvidas .carrossel:has(.anterior:not([hidden],:disabled)) .vot-perguntas{--mi:72px}
  #duvidas .carrossel:has(.proxima:not([hidden],:disabled)) .vot-perguntas{--mf:96px}
}
@media (min-width:1300px){.vot-perguntas{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Transporte em 700 a 739 px: estado e grupo cabem numa linha só (o select de 260 px empurrava o grupo para uma segunda linha) */
@media (min-width:700px) and (max-width:739px){.vot-filtro{column-gap:10px}.vot-uf select{width:160px}}