/* Página inicial nova (inicio-novo.js; desenho de 9/10/2026). Tudo aqui vale só nela. Em cima, a faixa de sempre
   (estilo.css; pedido da pessoa em 9/10); embaixo, o mapa com as pílulas e a folha. */
.inicio-novo { --folha-espiada: 132px; }
body:has(.inicio-novo) #rodape { display: none; }                         /* o rodapé vai para o fim da folha */
body:has(.inicio-novo) main { padding: 0; }
/* As sugestões da busca por cima do mapa e da folha; o menu do site (no topo, por cima das fotos) acima da faixa */
.inicio-novo .faixa-inicio { flex: none; z-index: 5; }
body:has(.inicio-novo) .topo { z-index: 6; }
/* Computador: a página não rola; a faixa em cima e o mapa com a folha no resto da tela (a faixa do modo
   demonstração, se houver, fica em cima) */
@media (min-width: 60rem) {
  body:has(.inicio-novo) { height: 100dvh; min-height: 0; }
  body:has(.inicio-novo) main { display: flex; flex-direction: column; min-height: 0; }
  .inicio-novo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
}
/* Celular: a página rola; abaixo da faixa, o mapa e a folha ocupam a tela */
@media (max-width: 59.99rem) {
  .inicio-novo .palco-novo { height: 100svh; }
  .inicio-novo .maplibregl-ctrl-bottom-right { top: 44px; bottom: auto; }   /* o zoom embaixo ficaria sob a folha */
}

.inicio-novo .palco-novo { position: relative; flex: 1; min-height: 0; }
.inicio-novo .palco-mapa { position: absolute; inset: 0; }
.inicio-novo .mapa-inicio { position: absolute; inset: 0; height: auto; min-height: 0; }
.inicio-novo .palco-mapa .credito-mapa { bottom: auto; top: 0; }

.inicio-novo .fileira-camadas {
  position: absolute; left: 0; right: 0; bottom: calc(var(--folha-espiada) + 8px); z-index: 3;
  display: flex; gap: 6px; overflow-x: auto; padding: 0 12px 4px; scrollbar-width: none;
}
.inicio-novo .palco-novo:has(.folha-sobe[data-altura="meia"]) .fileira-camadas { bottom: calc(50% + 8px); }
.inicio-novo .palco-novo:has(.folha-sobe[data-altura="cheia"]) .fileira-camadas { display: none; }
/* Pílulas de uma linha (pedido da pessoa em 9/10: os quadradinhos ficaram grandes no celular) */
.inicio-novo .quadradinho {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 5px;
  border: 2px solid transparent; border-radius: 999px; background: var(--papel); box-shadow: 0 1px 5px rgba(42, 14, 12, 0.28);
  color: var(--vinho); font: inherit; font-size: 0.8rem; font-weight: 750; line-height: 1; white-space: nowrap; cursor: pointer;
}
.inicio-novo .quadradinho[aria-pressed="true"] { border-color: var(--vermelho); }
.inicio-novo .q-eventos[aria-pressed="false"] { color: var(--apagado); }
.inicio-novo .q-eventos[aria-pressed="false"] .q-icone { opacity: 0.4; }
.inicio-novo .q-icone { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(42, 14, 12, 0.18); }
.inicio-novo .q-eventos .q-icone { background: linear-gradient(var(--vermelho) 0 30%, #fff 30%); }
.inicio-novo .q-venceu .q-icone { background: linear-gradient(135deg, #C8102E 50%, #2C3E9E 50%); }
.inicio-novo .q-candidato .q-icone { background: linear-gradient(to top, #8E0F1E, #F2B8BF); }
.inicio-novo .q-abstencao .q-icone { background: linear-gradient(to top, #4B4B4B, #DADADA); }
.inicio-novo .q-buscados .q-icone { background: linear-gradient(to top, #9A4A00, #FFD9A8); }
.inicio-novo .q-censo .q-icone { background: linear-gradient(to top, #3D2A6B, #D6CDEB); }
.inicio-novo .q-cadeado { font-size: 0.72rem; font-weight: 500; color: var(--apagado); }


.inicio-novo .folha-sobe {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; flex-direction: column; overflow: hidden;   /* espiada: o que não cabe não vaza */
  border-radius: 18px 18px 0 0; background: var(--papel); box-shadow: 0 -4px 18px rgba(42, 14, 12, 0.22); transition: height 0.2s ease;
}
.inicio-novo .folha-sobe[data-altura="espiada"] { height: var(--folha-espiada); }
.inicio-novo .folha-sobe[data-altura="meia"] { height: 50%; }
.inicio-novo .folha-sobe[data-altura="cheia"] { height: calc(100% - 48px); }
.inicio-novo .folha-sobe.arrastando { transition: none; }
.inicio-novo .folha-alca { flex: none; width: 44px; height: 5px; margin: 8px auto 4px; border-radius: 3px; background: var(--linha); touch-action: none; cursor: grab; }
.inicio-novo .folha-cabeca { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px; touch-action: none; }
.inicio-novo .folha-abas { display: flex; gap: 4px; flex: 1; min-width: 0; }
.inicio-novo .folha-abas [role="tab"] {
  border: 0; border-bottom: 3px solid transparent; background: none; padding: 6px 10px; color: var(--apagado);
  font: inherit; font-size: 1.05rem; font-weight: 800; font-stretch: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inicio-novo .folha-abas [aria-selected="true"] { color: var(--vinho); border-bottom-color: var(--vermelho); }
.inicio-novo .folha-altura { flex: none; width: 36px; height: 36px; border: 1px solid var(--linha); border-radius: 50%; background: var(--papel); color: var(--vinho); }
.inicio-novo .folha-altura::before { content: "▴"; }
.inicio-novo .folha-sobe[data-altura="cheia"] .folha-altura::before { content: "▾"; }
.inicio-novo .folha-legenda { flex: none; padding: 2px 12px 4px; font-size: 0.74rem; }
.inicio-novo .folha-legenda .lugar-legenda { position: static; max-width: none; }
.inicio-novo .folha-legenda .legenda-inicio { position: static; max-width: none; margin: 0; padding: 0; gap: 2px 10px; background: none; box-shadow: none; }
.inicio-novo .folha-legenda .legenda-inicio .dica { display: inline-flex; }   /* "cor mais forte = …": no celular também, aqui cabe */
.inicio-novo .folha-corpo { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 12px 24px; }
.inicio-novo .chaves-sobre { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 8px; font-size: 0.82rem; }
.inicio-novo .chave-sobre { border: 1px solid var(--linha); border-radius: 999px; background: var(--papel); padding: 4px 10px; font: inherit; }
.inicio-novo .chave-sobre[aria-pressed="true"] { border-color: var(--vinho); background: var(--rosado); }
.inicio-novo .aba-camada .filtros-barra .abrir-filtros,
.inicio-novo .aba-camada .campo-filtro:has(#filtro-mostrar),
.inicio-novo .aba-camada .camadas-mapa { display: none; }
/* Na camada, o cargo e o "Votos de" (onde se busca o candidato) vêm primeiro */
.inicio-novo .aba-camada .campos-filtros { display: flex; flex-direction: column; }
.inicio-novo .aba-camada .campo-filtro:has(> label[for="filtro-cargo"]) { order: -2; }
.inicio-novo .aba-camada .campo-filtro:has(> label[for="filtro-alvo"]) { order: -1; }
.inicio-novo .aba-camada .abas-painel, .inicio-novo .aba-camada .fechar-painel { display: none; }
.inicio-novo .aba-camada .vista-tabela { position: static; }   /* a tabela vem dentro da aba, não por cima do mapa */
.inicio-novo .aba-camada:has(> .aviso-camada:not([hidden])) > :not(.aviso-camada) { display: none; }   /* Censo sem login: só o aviso */
/* Em meia tela, o primeiro evento já aparece: a legenda da agenda repete a da folha (as estrelas se explicam no
   card) e o bloco da cidade (propor, entrar) vem depois da lista */
.inicio-novo .aba-agenda .agenda-legenda { display: none; }
.inicio-novo .quadro-agenda { display: flex; flex-direction: column; }
.inicio-novo .quadro-agenda > .cidade-agenda { order: 1; }
.inicio-novo .aba-agenda #titulo-agenda {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.inicio-novo .inicio-fim { margin-top: 24px; padding-top: 12px; border-top: 3px solid var(--vinho); }
.inicio-novo .inicio-fim .rodape { display: block; max-width: none; padding: 16px 0 24px; }

@media (min-width: 60rem) {
  .inicio-novo .palco-novo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(22rem, 28rem); grid-template-rows: minmax(0, 1fr); }
  .inicio-novo .palco-mapa { position: relative; inset: auto; grid-column: 1; grid-row: 1; min-height: 0; }
  .inicio-novo .folha-sobe {
    position: relative; grid-column: 2; grid-row: 1; min-height: 0; height: auto !important;
    border-radius: 0; box-shadow: -2px 0 10px rgba(42, 14, 12, 0.12);
  }
  .inicio-novo .folha-alca, .inicio-novo .folha-altura { display: none; }
  .inicio-novo .fileira-camadas,
  .inicio-novo .palco-novo:has(.folha-sobe[data-altura]) .fileira-camadas { display: flex; top: 44px; bottom: auto; right: auto; flex-wrap: wrap; max-width: calc(100% - 24px); }
}