/* boralula — vocabulário do lambe-lambe e do adesivo de campanha.
   Uma família (Archivo, eixo de largura): condensada e pesada nos títulos,
   larga e regular no texto. Ousadia só na marca e no cartaz. */

@font-face {
  font-family: "Archivo";
  src: url("vendor/archivo-5.3.0/archivo-latin-wdth-normal.woff2") format("woff2-variations"),
       url("vendor/archivo-5.3.0/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  color-scheme: light;
  --vermelho: #D7261E;
  --vermelho-fundo: #B81D16;
  --vinho: #2A0E0C;
  --papel: #FFFFFF;
  --rosado: #FDE7E3;
  --amarelo: #FFD23F;
  --apagado: #6E5450;
  --linha: #EFCFC9;

  --fs-pequeno: 0.875rem;
  --fs-corpo: 1.0625rem;
  --fs-h3: 1.125rem;
  --fs-h2: 1.375rem;
  --fs-h1: clamp(2.1rem, 8vw, 3rem);
  --fs-cartaz: clamp(3.6rem, 19vw, 8.5rem);

  --raio: 10px;
  --largura: 42rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--vinho);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-corpo);
  font-stretch: 100%;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1; width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 16px 6rem; }
main:focus { outline: none; }

h1, h2, h3 { font-stretch: 72%; line-height: 1.05; margin: 1.6em 0 0.4em; letter-spacing: -0.005em; }
h1 { font-size: var(--fs-h1); font-weight: 850; margin-top: 0.8em; }
h2 { font-size: var(--fs-h2); font-weight: 800; }
h3 { font-size: var(--fs-h3); font-weight: 750; font-stretch: 85%; margin-top: 1.2em; }
h1:focus { outline: none; }
p { margin: 0.5em 0; max-width: 38em; }
a { color: var(--vermelho-fundo); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
a:hover { color: var(--vinho); }
strong { font-weight: 700; }

:focus-visible { outline: 3px solid var(--vinho); outline-offset: 2px; border-radius: 4px; }

.pular { position: absolute; left: -999px; top: 0; background: var(--amarelo); color: var(--vinho); padding: 0.6em 1em; z-index: 10; }
.pular:focus { left: 8px; top: 8px; }

/* Topo ------------------------------------------------------------------ */

.topo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: var(--largura); width: 100%; margin: 0 auto; padding: 14px 16px 10px;
  /* Na cor da faixa da página inicial, de ponta a ponta da tela (a marca não fica numa faixa branca) */
  background: var(--vinho); box-shadow: 0 0 0 100vmax var(--vinho); clip-path: inset(0 -100vmax);
}

/* A marca: o letreiro "Bora LULA" do logo da pessoa (8/10/2026), nas cores dele, num retângulo branco (o desenho
   tem fundo branco). Sem anel nem inclinação: o adesivo e o negativo não ficaram bons sobre o vinho. Na página
   inicial ela some: lá o logo inteiro está logo abaixo. */
.marca { display: inline-block; flex: none; line-height: 0; border-radius: 6px; text-decoration: none; }
.marca img { display: block; width: 96px; height: 52px; background: var(--papel); border-radius: 6px; }
body:has(.fotos-topo) .marca { visibility: hidden; }
.marca:hover, .marca:focus-visible { box-shadow: 0 0 0 3px var(--amarelo); }

#nav { display: flex; gap: 4px 12px; flex-wrap: wrap; justify-content: flex-end; }
#nav a {
  color: var(--papel); text-decoration: none; font-weight: 700; font-stretch: 75%; font-size: 1.05rem;
  padding: 8px 0; border-bottom: 3px solid transparent; white-space: nowrap;
}
@media (max-width: 29.99rem) { .marca img { width: 81px; height: 44px; } #nav { gap: 4px 10px; } }
/* Com 3 itens ou mais (logado), no celular o menu ganha uma linha inteira abaixo da marca. */
@media (max-width: 29.99rem) {
  .topo:has(#nav a:nth-child(3)) { flex-wrap: wrap; row-gap: 6px; }
  .topo:has(#nav a:nth-child(3)) #nav { width: 100%; justify-content: space-between; }
}
@media (min-width: 30rem) { #nav { gap: 4px 18px; } #nav a { font-stretch: 85%; } }
#nav a[aria-current="page"] { border-bottom-color: var(--amarelo); }
#nav a:hover { color: var(--amarelo); }
.contador {
  display: inline-block; min-width: 1.4em; margin-left: 4px; padding: 0 0.35em;
  background: var(--vermelho); color: var(--papel); border-radius: 999px;
  font-size: 0.8rem; text-align: center; line-height: 1.4em; vertical-align: 0.1em;
}

.faixa-demo {
  margin: 0; max-width: none; padding: 6px 16px; text-align: center;
  background: var(--vinho); color: var(--papel); font-size: var(--fs-pequeno);
}

/* Cartaz da página inicial --------------------------------------------- */

.cartaz {
  background: var(--vermelho);
  color: var(--papel);
  margin: 12px -16px 0;
  padding: 28px 16px 30px;
}
.cartaz h1 {
  font-size: var(--fs-cartaz);
  font-weight: 900;
  font-stretch: 62%;
  line-height: 0.86;
  letter-spacing: -0.015em;
  margin: 0 0 0.25em;
}
.cartaz p { font-size: 1.25rem; line-height: 1.35; font-stretch: 92%; max-width: 24em; margin: 0; }
@media (min-width: 44rem) { .cartaz { margin: 12px 0 0; padding: 40px 36px 42px; border-radius: 4px; } }

.folha { padding-top: 4px; }
.estreita { max-width: 30rem; }

.passos ol { list-style: none; counter-reset: passo; padding: 0; margin: 0; }
.passos li { counter-increment: passo; position: relative; padding: 0.55em 0 0.55em 2.6em; border-top: 1px solid var(--linha); }
.passos li::before {
  content: counter(passo);
  position: absolute; left: 0; top: 0.35em;
  font-weight: 900; font-stretch: 62%; font-size: 1.9rem; line-height: 1; color: var(--vermelho);
}

/* Contadores: os números sobem até o total. */
.contadores {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px;
  margin: 2em 0 0.5em; padding-top: 16px; border-top: 3px solid var(--vinho);
}
@media (min-width: 40rem) { .contadores { grid-template-columns: repeat(4, 1fr); } }
.contador-item { display: flex; flex-direction: column; margin: 0; }
.contador-item .numero {
  font-weight: 900; font-stretch: 62%; font-size: clamp(2.6rem, 12vw, 3.6rem); line-height: 0.95;
  color: var(--vermelho); font-variant-numeric: tabular-nums;
}
.contador-item .rotulo { font-size: var(--fs-pequeno); font-weight: 650; margin-top: 4px; }
.chamada-mapa { border-left: 6px solid var(--vermelho); padding-left: 14px; margin-top: 2em; }
.chamada-mapa h2 { margin-top: 0.3em; }

/* Formulários ------------------------------------------------------------ */

label { display: block; font-weight: 650; margin: 1em 0 0.3em; }
.rotulo-grande { font-size: var(--fs-h2); font-weight: 800; font-stretch: 72%; line-height: 1.1; margin-top: 1.4em; }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  width: 100%; font: inherit; color: var(--vinho); background: var(--papel);
  border: 2px solid var(--linha); border-radius: var(--raio); padding: 0.6em 0.75em; min-height: 48px;
}
textarea { min-height: 5.5em; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--vinho); outline: none; box-shadow: 0 0 0 3px var(--amarelo); }
input.codigo { font-size: 1.6rem; letter-spacing: 0.3em; font-stretch: 85%; max-width: 12rem; }
input[readonly] { background: var(--rosado); }

fieldset { border: 0; border-top: 3px solid var(--vinho); padding: 0.4em 0 0.6em; margin: 2em 0 0; min-width: 0; }
legend { font-weight: 800; font-stretch: 72%; font-size: var(--fs-h2); padding: 0 0.3em 0 0; line-height: 1.1; }

.marcar { display: flex; gap: 0.6em; align-items: flex-start; margin: 0.6em 0; }
.marcar input { width: 1.3em; height: 1.3em; margin: 0.15em 0 0; flex: none; accent-color: var(--vermelho); }
.marcar label { font-weight: 400; margin: 0; }

.dica { color: var(--apagado); font-size: var(--fs-pequeno); margin: 0.2em 0 0.4em; }
.pergunta { font-weight: 650; margin: 1.2em 0 0.4em; }
.erro { color: var(--vermelho-fundo); font-weight: 650; }
.lado-a-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Opções em linha (rádio e temas) */
.opcoes, .temas { display: flex; flex-wrap: wrap; gap: 8px; }
.opcoes input, .temas input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcoes label, .temas label {
  margin: 0; font-weight: 500; cursor: pointer; padding: 0.45em 0.9em; min-height: 44px;
  display: inline-flex; align-items: center;
  border: 2px solid var(--linha); border-radius: 999px; background: var(--papel);
}
.opcoes input:checked + label, .temas input:checked + label { background: var(--vinho); border-color: var(--vinho); color: var(--papel); }
.opcoes input:focus-visible + label, .temas input:focus-visible + label { outline: 3px solid var(--vinho); outline-offset: 2px; }

/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
  min-height: 48px; padding: 0.6em 1.25em; margin: 1em 0.5em 0 0;
  background: var(--vermelho); color: var(--papel); border: 2px solid var(--vermelho);
  border-radius: var(--raio); font: inherit; font-weight: 750; font-stretch: 85%;
  text-decoration: none; cursor: pointer;
}
.botao:hover { background: var(--vermelho-fundo); border-color: var(--vermelho-fundo); color: var(--papel); }
.botao:disabled { opacity: 0.6; cursor: progress; }
.botao.secundario { background: var(--papel); color: var(--vinho); border-color: var(--vinho); }
.botao.secundario:hover { background: var(--rosado); }
.botao.perigo { background: var(--vinho); border-color: var(--vinho); }
.botao.pequeno { min-height: 40px; padding: 0.35em 0.9em; margin-top: 0.4em; }
.link {
  background: none; border: 0; padding: 0.3em 0; font: inherit; color: var(--vermelho-fundo);
  text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer;
}
.link.perigo { color: var(--vinho); }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.acoes .botao { margin-right: 0; }

/* Seletor de região */
.sugestoes { list-style: none; padding: 0; margin: 4px 0 0; }
.sugestoes button {
  width: 100%; text-align: left; font: inherit; color: var(--vinho); background: var(--papel);
  border: 0; border-bottom: 1px solid var(--linha); padding: 0.7em 0.2em; min-height: 44px; cursor: pointer;
}
.sugestoes button:hover, .sugestoes button:focus-visible { background: var(--rosado); }
.sugestoes .uf { color: var(--apagado); font-size: var(--fs-pequeno); }
.escolhido { font-size: 1.15rem; margin-top: 1em; }

/* Agenda ------------------------------------------------------------------ */


.agenda { list-style: none; padding: 0; margin: 1em 0 0; }
.agenda li + li { border-top: 1px dashed var(--linha); }
.linha-atividade {
  display: grid; grid-template-columns: 4.2rem 1fr; gap: 14px;
  padding: 14px 0; color: inherit; text-decoration: none;
}
.linha-atividade:hover .titulo { text-decoration: underline; text-underline-offset: 0.15em; }
.data {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 3px solid var(--vinho); border-radius: 8px; padding: 6px 0 4px; height: fit-content;
  font-stretch: 70%; line-height: 1;
}
.data .semana, .data .mes { font-size: 0.8rem; font-weight: 700; }
.data .dia { font-size: 2rem; font-weight: 900; margin: 2px 0; }
.corpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.corpo .titulo { font-weight: 800; font-stretch: 80%; font-size: 1.25rem; line-height: 1.15; }
.corpo .onde, .corpo .numeros { font-size: var(--fs-pequeno); color: var(--apagado); }

.pilulas { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; }
.pilula { font-size: 0.8rem; font-weight: 650; padding: 0.15em 0.6em; border-radius: 999px; white-space: nowrap; }
.pilula.confirmado { background: var(--amarelo); color: var(--vinho); }
.pilula.combinando { background: var(--rosado); color: var(--vinho); }
.pilula.parada { background: var(--vinho); color: var(--papel); }
.pilula.neutra { border: 1px solid var(--linha); color: var(--apagado); }
.pilula.revisao { border: 1px dashed var(--vinho); color: var(--vinho); }
.pilula.minha { background: var(--vermelho); color: var(--papel); }

.vazio { border-left: 6px solid var(--amarelo); padding: 4px 0 8px 16px; margin: 1.5em 0; }
.vazio-titulo { font-weight: 800; font-stretch: 80%; font-size: 1.3rem; margin-top: 0; }


/* Mapas pequenos (evento, marcar o lugar), alternar e créditos -------------- */

main[data-largura="larga"], body[data-largura="larga"] .topo, body[data-largura="larga"] .rodape { max-width: 72rem; }
.mapa {
  height: min(56vh, 460px); min-height: 280px; margin-top: 10px;
  border: 2px solid var(--vinho); border-radius: var(--raio); overflow: hidden; background: #f6f1ef;
}
.alternar { display: inline-flex; flex-wrap: wrap; border: 2px solid var(--vinho); border-radius: 999px; overflow: hidden; margin: 4px 0 6px; }
.alternar button {
  font: inherit; font-weight: 650; font-stretch: 85%; padding: 0.4em 0.95em; min-height: 40px;
  border: 0; background: var(--papel); color: var(--vinho); cursor: pointer;
}
.alternar button[aria-pressed="true"] { background: var(--vinho); color: var(--papel); }
.amostras { display: inline-flex; gap: 2px; vertical-align: -1px; }
.amostra { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 0.75px solid rgba(42, 14, 12, 0.55); }
.credito-mapa { font-size: 0.75rem; color: var(--apagado); margin-top: 0.2em; }
.credito-mapa a { color: var(--apagado); }

.maplibregl-popup-content { font-family: "Archivo", system-ui, sans-serif; color: var(--vinho); border-radius: 10px; padding: 10px 30px 10px 12px; }
.maplibregl-popup-close-button { font-size: 20px; width: 28px; height: 28px; }
.balao p { margin: 0.15em 0; }
.balao-nome { font-weight: 750; font-stretch: 85%; }

/* Atividade --------------------------------------------------------------- */

.cabeca-atividade { border-bottom: 3px solid var(--vinho); padding-bottom: 12px; margin-top: 1em; }
.quando-grande { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.quando-grande .dia { font-size: 3.6rem; font-weight: 900; font-stretch: 62%; line-height: 0.9; color: var(--vermelho); }
.quando-grande .resto { font-weight: 650; font-stretch: 88%; }
.cabeca-atividade h1 { margin: 0.2em 0 0.15em; }
.cabeca-atividade .onde { color: var(--apagado); margin: 0; }

.bloco { margin: 1.4em 0; }
.bloco > h2:first-child { margin-top: 0.4em; }
.destaque { background: var(--rosado); border-radius: var(--raio); padding: 4px 16px 16px; }
.nota { background: var(--rosado); border-radius: var(--raio); padding: 10px 14px; }
.nota.forte { background: var(--vinho); color: var(--papel); }
.texto-livre { white-space: pre-line; overflow-wrap: anywhere; }

/* Marca-texto: o que foi liberado para quem foi aceito. */
.dentro { background: var(--amarelo); border-radius: var(--raio); padding: 6px 16px 16px; margin: 1.4em 0; }
.dentro h2 { font-size: 2rem; font-weight: 900; font-stretch: 65%; margin-top: 0.3em; }
.dentro h3 { margin-top: 1em; }
.dentro .botao { margin-top: 0.3em; }
.dentro a, .dentro .link { color: var(--vinho); }
.dentro .dica { color: var(--vinho); }
.avisos { list-style: none; padding: 0; margin: 0; }
.avisos li { padding: 6px 0; border-top: 1px solid rgba(42, 14, 12, 0.18); }
.avisos time { font-weight: 700; font-size: var(--fs-pequeno); }

.painel { border-top: 6px solid var(--vermelho); margin-top: 2.4em; padding-top: 2px; }
.pedidos, .equipe, .fila, .notificacoes, .relatos { list-style: none; padding: 0; margin: 0.4em 0; }
.pedidos li, .fila li, .relatos li { border-top: 1px solid var(--linha); padding: 10px 0; }
.pedidos li.pendente { border-left: 4px solid var(--amarelo); padding-left: 12px; }
.pedidos p, .fila p, .relatos p { margin: 0.2em 0; }
.equipe li { padding: 4px 0; }
.encerrar { margin-top: 1.6em; }
.encerrar fieldset { margin-top: 1em; border-top-width: 1px; }
.encerrar legend { font-size: var(--fs-h3); }
.relatar { margin-top: 2.5em; font-size: var(--fs-pequeno); }

/* Minha área */
.notificacoes li { padding: 8px 0; border-top: 1px solid var(--linha); }
.notificacoes li.nova a { font-weight: 750; }
.notificacoes time { color: var(--apagado); font-size: var(--fs-pequeno); }

/* Consentimento */
.consentimento { border: 3px solid var(--vinho); border-radius: var(--raio); padding: 4px 16px 12px; margin: 1.6em 0 0.6em; }
.consentimento h2 { margin-top: 0.5em; }

/* Aprendizados ------------------------------------------------------------ */

.escopo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 1em 0; }
.escopo label { margin: 0; }
.escopo select { width: auto; min-width: 9rem; }
.base { font-weight: 650; }
.barras { list-style: none; padding: 0; margin: 0.6em 0; }
.barras li {
  display: grid; grid-template-columns: minmax(8rem, 13rem) 1fr auto; align-items: center; gap: 10px;
  padding: 5px 0;
}
.barras .rotulo { font-size: var(--fs-pequeno); }
.barras .trilho { height: 14px; }
.barras .barra { display: block; height: 100%; background: var(--vermelho); border-radius: 0 4px 4px 0; }
.barras .valor { font-size: var(--fs-pequeno); color: var(--apagado); white-space: nowrap; }
@media (max-width: 30rem) {
  .barras li { grid-template-columns: 1fr auto; }
  .barras .trilho { grid-column: 1 / -1; grid-row: 2; }
}
.por-municipio { list-style: none; padding: 0; margin: 0.6em 0; }
.por-municipio li { border-top: 1px solid var(--linha); padding: 8px 0; }
.por-municipio p { margin: 0.15em 0; }
.por-municipio .nome { font-weight: 750; font-stretch: 85%; }
.relatos .origem { font-weight: 750; font-stretch: 85%; }

/* Rodapé, caixas, avisos -------------------------------------------------- */

.rodape {
  border-top: 3px solid var(--vinho); margin-top: 2rem; padding: 16px 16px 90px;
  font-size: var(--fs-pequeno); max-width: var(--largura); width: 100%; margin-left: auto; margin-right: auto;
}
.rodape .links { display: flex; gap: 8px 18px; flex-wrap: wrap; }
.rodape .lema {
  margin: 0 0 14px; max-width: 34rem; font-size: 1.2rem; line-height: 1.2; font-weight: 850; font-stretch: 75%; color: var(--vinho);
}
.rodape .lema strong { color: var(--vermelho); font-weight: 900; }
.carregando { color: var(--apagado); margin-top: 2em; }

dialog.caixa {
  border: 0; border-radius: 14px; padding: 8px 20px 18px; max-width: min(28rem, calc(100vw - 32px));
  color: var(--vinho); box-shadow: 4px 6px 0 var(--vinho);
}
dialog.caixa::backdrop { background: rgba(42, 14, 12, 0.55); }
dialog.caixa h2 { margin-top: 0.6em; }

.toast {
  position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 20px); opacity: 0;
  background: var(--vinho); color: var(--papel); padding: 10px 18px; border-radius: 999px;
  max-width: calc(100vw - 32px); z-index: 20; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.toast.visivel { opacity: 1; transform: translate(-50%, 0); }
.toast[data-tipo="erro"] { background: var(--vermelho-fundo); }

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}

@media (forced-colors: active) {
  .marca, .pilula, .botao { border: 2px solid CanvasText; }
  .barras .barra { background: CanvasText; }
}

/* Página inicial: mapa + agenda ------------------------------------------- */

.busca-cidade { position: relative; }
.busca-cidade .sugestoes {
  position: absolute; z-index: 8; left: 0; right: 0; margin: 0; background: var(--papel);
  box-shadow: 0 8px 20px rgba(42, 14, 12, 0.18); border-radius: 0 0 10px 10px;
}

/* Agenda */
.agenda-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.agenda-cabeca h2 { margin: 0.1em 0 0; }
.agenda-conta { color: var(--apagado); margin: 0; }
.agenda-controles { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin-top: 6px; }
.alternar.pequeno { margin: 0; }
.alternar.pequeno button { min-height: 34px; padding: 0.2em 0.85em; font-size: 0.9rem; }
.agenda-legenda { width: 100%; margin: 6px 0 0; font-size: var(--fs-pequeno); color: var(--apagado); }
.marca-tipo { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin: 0 4px 0 8px; }
.marca-tipo:first-child { margin-left: 0; }
.marca-tipo.publico { background: var(--vermelho); box-shadow: 0 0 0 2px var(--papel), 0 0 0 3px var(--vermelho); }
.marca-tipo.apoiadores { background: var(--amarelo); box-shadow: 0 0 0 2px var(--vinho); }
.dia-agenda {
  position: sticky; top: 0; z-index: 1; background: var(--papel);
  margin: 1em 0 0; padding: 8px 0 4px; border-bottom: 2px solid var(--vinho); font-size: 1.05rem;
}
.lista-agenda { list-style: none; margin: 0; padding: 0; }
.item-agenda a {
  display: grid; grid-template-columns: 3.4rem 1fr auto; gap: 12px; padding: 10px 4px 10px 10px;
  color: inherit; text-decoration: none; border-bottom: 1px solid var(--linha); border-left: 5px solid transparent;
}
.item-agenda.publico a { border-left-color: var(--vermelho); }
.item-agenda.apoiadores a { border-left-color: var(--amarelo); }
.item-agenda a:hover .item-titulo { text-decoration: underline; text-underline-offset: 0.15em; }
.item-hora { display: flex; flex-direction: column; font-weight: 850; font-stretch: 72%; font-size: 1.15rem; line-height: 1.1; }
.item-hora small { font-weight: 500; font-size: 0.85rem; color: var(--apagado); }
.item-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.item-titulo { font-weight: 750; font-stretch: 85%; }
.item-lugar, .item-selo { font-size: var(--fs-pequeno); color: var(--apagado); }
.item-agenda.cancelado .item-titulo { text-decoration: line-through; }

/* Semana, como num calendário */
.semana-rolagem { overflow-x: auto; margin-top: 12px; }
.semana { display: grid; grid-template-columns: 2.2rem repeat(7, minmax(3.6rem, 1fr)); min-width: 28rem; }
.semana-dia { text-align: center; padding: 2px 0 6px; border-bottom: 2px solid var(--vinho); font-size: 0.78rem; color: var(--apagado); }
.semana-dia strong { display: block; margin: 2px auto 0; width: 2rem; line-height: 2rem; border-radius: 50%;
  font-size: 1.2rem; font-stretch: 70%; font-weight: 850; color: var(--vinho); }
.semana-dia.hoje strong { background: var(--vermelho); color: var(--papel); }
.semana-horas { display: flex; flex-direction: column; }
.semana-horas span { height: 44px; padding-right: 6px; text-align: right; font-size: 0.7rem; color: var(--apagado); transform: translateY(-0.55em); }
.semana-coluna {
  position: relative; border-left: 1px solid var(--linha);
  background-image: repeating-linear-gradient(to bottom, var(--linha) 0, var(--linha) 1px, transparent 1px, transparent 44px);
}
.semana-coluna.hoje { background-color: #FFF8F6; }
.bloco-agenda {
  position: absolute; overflow: hidden; margin-left: 2px; padding: 2px 4px; border-radius: 6px;
  font-size: 0.72rem; line-height: 1.15; color: var(--vinho); text-decoration: none;
}
.bloco-agenda.publico { background: var(--rosado); border-left: 3px solid var(--vermelho); }
.bloco-agenda.apoiadores { background: #FFF3C4; border-left: 3px solid #B88A00; }
.bloco-agenda.cancelado { opacity: 0.55; text-decoration: line-through; }
.bloco-agenda:hover { z-index: 2; box-shadow: 0 2px 8px rgba(42, 14, 12, 0.25); }
.bloco-agenda:focus-visible { z-index: 3; }
.bloco-hora { display: block; font-weight: 800; }
.bloco-titulo { display: block; font-weight: 600; }

/* Estrela do momento: acesa e brilhando quando falta menos de 1 hora, piscando enquanto acontece,
   apagada (cinza, parada) quando terminou há pouco. Sem animação para quem pediu menos movimento. */
.estrela-momento { width: 1em; height: 1em; flex: none; fill: var(--vermelho); vertical-align: -0.14em; }
.estrela-momento.agora { animation: piscar-agora 1.1s ease-in-out infinite; }
.estrela-momento.breve { animation: brilhar 2.4s ease-in-out infinite; }
.estrela-momento.terminou { fill: #B5A29E; }
@keyframes piscar-agora { 50% { opacity: 0.25; } }
@keyframes brilhar { 50% { filter: drop-shadow(0 0 3px rgba(245, 170, 0, 0.95)); } }
.selo-momento { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-pequeno); font-weight: 800; color: var(--vermelho-fundo); }
.selo-momento.terminou { color: var(--apagado); font-weight: 650; }
.item-agenda.agora a { background: #FFF8F6; }
.chave-momento { white-space: nowrap; margin-left: 8px; color: var(--vermelho-fundo); font-weight: 700; }
.chave-momento.terminou { color: var(--apagado); font-weight: 500; }
.bloco-agenda.agora { box-shadow: inset 0 0 0 1.5px var(--vermelho); }
.bloco-agenda.breve { box-shadow: inset 0 0 0 1.5px #F5AA00; }
.bloco-hora .estrela-momento { margin-right: 2px; }
.pilula.momento { display: inline-flex; align-items: center; gap: 4px; border: 1.5px solid var(--vermelho); color: var(--vermelho-fundo); }
.pilula.momento.terminou { border-color: var(--linha); color: var(--apagado); }
.balao-lista .estrela-momento { margin-right: 4px; }
.bloco-mais.agora, .bloco-mais.breve, .bloco-mais.terminou { display: flex; align-items: center; justify-content: center; gap: 1px; }
.bloco-mais.agora, .bloco-mais.breve { border-style: solid; }
/* No mapa, a estrela vai num disco branco com borda escura, como o calendário dos eventos: a estrela
   vermelha some no mapa vermelho (onde Lula ficou na frente) sem trocar a cor de nenhum dos dois. A onda
   do "acontecendo agora" é escura, para aparecer no vermelho e no claro. */
.marcador-estrela {
  display: grid; place-items: center; width: 32px; height: 32px; box-sizing: border-box; pointer-events: none;
  border: 2px solid var(--vinho); border-radius: 50%; background: var(--papel); box-shadow: 0 1px 5px rgba(42, 14, 12, 0.45);
}
.marcador-estrela[hidden] { display: none; }
.marcador-estrela.agora::before {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 3px solid var(--vinho); opacity: 0;
  animation: onda-agora 1.6s ease-out infinite;
}
.marcador-estrela .estrela-momento { position: relative; width: 22px; height: 22px; }
.marcador-estrela .estrela-momento.agora { animation-name: piscar-mapa; }
.marcador-estrela .estrela-momento.breve { animation-name: brilhar-mapa; }
.marcador-estrela.terminou { width: 26px; height: 26px; }
.marcador-estrela.terminou .estrela-momento { width: 16px; height: 16px; }
@keyframes piscar-mapa { 50% { opacity: 0.45; transform: scale(0.85); } }
@keyframes brilhar-mapa { 50% { filter: drop-shadow(0 0 1.2px var(--vinho)) drop-shadow(0 0 6px #FFD23F); transform: scale(1.1); } }
@keyframes onda-agora { from { transform: scale(1); opacity: 0.7; } to { transform: scale(1.9); opacity: 0; } }
.maplibregl-popup { z-index: 2; }   /* o balão fica por cima das estrelas */
@media (prefers-reduced-motion: reduce) {
  .estrela-momento, .marcador-estrela::before { animation: none; }
}

/* Eventos públicos */
.pilula.publico { background: var(--vermelho); color: var(--papel); }
.mapa.mini { height: 260px; min-height: 0; }
.mapa.mini.marcar { height: 320px; cursor: crosshair; }
.balao-lista { list-style: none; margin: 0; padding: 0; }
.balao-lista li { padding: 4px 0; border-top: 1px solid var(--linha); }
.balao-lista li:first-child { border-top: 0; }

/* Página inicial: a faixa e, abaixo, o palco (mapa + painéis) ---------------- */

main[data-largura="tela"] { max-width: none; padding: 0 0 4rem; }
body[data-largura="tela"] .topo, body[data-largura="tela"] .rodape { max-width: none; padding-left: 20px; padding-right: 20px; }
.inicio-resto { max-width: 72rem; margin: 0 auto; padding: 0 16px; }
.inicio-resto .passos ol { display: grid; gap: 0 32px; }
@media (min-width: 48rem) { .inicio-resto .passos ol { grid-template-columns: 1fr 1fr; } }

.palco { display: block; position: relative; background: var(--papel); }

/* Barra acima do mapa: filtros à esquerda, painéis e tela cheia à direita */
.barra-palco {
  position: relative; z-index: 5; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 8px 12px; padding: 8px 12px; border-bottom: 1px solid var(--linha); background: var(--papel);
}
.lugar-filtros { position: relative; min-width: 0; flex: 1 1 30rem; }
.filtros-barra { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 10px; }
.campos-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 10px; }
.campo-filtro { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.campo-filtro[hidden] { display: none; }
.campo-filtro label { margin: 0; color: var(--apagado); font-size: 0.72rem; font-weight: 700; }
.campo-filtro select { width: auto; max-width: 19rem; min-height: 34px; margin: 0; padding: 2px 26px 2px 10px; font-size: 0.88rem; }
.campo-filtro select:disabled { opacity: 0.55; }
.nota-filtro { margin: 0 0 7px; color: var(--apagado); font-size: 0.78rem; }
.nota-filtro[hidden] { display: none; }
.camadas-mapa { position: relative; align-self: flex-end; }
.camadas-mapa > summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 2px 12px; border: 2px solid var(--vinho);
  border-radius: 999px; color: var(--vinho); font-size: 0.85rem; font-weight: 700; cursor: pointer; list-style: none;
}
.camadas-mapa > summary::-webkit-details-marker { display: none; }
.camadas-mapa > summary::after { content: "▾"; font-size: 0.75rem; }
.camadas-mapa[open] > summary { background: var(--vinho); color: var(--papel); }
.menu-camadas {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; display: grid; gap: 4px; width: max-content; max-width: 80vw;
  padding: 10px 14px; background: var(--papel); border-radius: 12px; box-shadow: 0 8px 28px rgba(42, 14, 12, 0.25);
}
.abrir-filtros {
  display: none; align-items: center; gap: 8px; max-width: 100%; min-height: 36px; padding: 4px 14px 4px 12px;
  border: 2px solid var(--vinho); border-radius: 999px; background: var(--papel); color: var(--vinho); font: inherit; font-size: 0.9rem; cursor: pointer;
}
.abrir-filtros::after { content: "▾"; font-size: 0.8rem; }
.filtros-barra.aberta .abrir-filtros { background: var(--vinho); color: var(--papel); }
.abrir-filtros .resumo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 59.99rem) {
  .abrir-filtros { display: inline-flex; }
  .campos-filtros { display: none; width: 100%; padding: 6px 0 2px; }
  .filtros-barra.aberta .campos-filtros { display: flex; }
  .campo-filtro { flex: 1 1 10rem; }
  .campo-filtro select { width: 100%; max-width: none; }
}
.filtros { margin: 0; }
.filtros > summary, .carregando-filtros {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 36px; margin: 0;
  padding: 4px 14px 4px 12px; border: 2px solid var(--vinho); border-radius: 999px;
  background: var(--papel); color: var(--vinho); font-size: 0.9rem; cursor: pointer; list-style: none;
}
.filtros > summary::-webkit-details-marker { display: none; }
.filtros > summary::after { content: "▾"; font-size: 0.8rem; }
.filtros[open] > summary { background: var(--vinho); color: var(--papel); }
.carregando-filtros { opacity: 0.5; cursor: default; }
.rotulo-filtros { font-weight: 800; font-stretch: 85%; }
.filtros .resumo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-filtros {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; width: min(25rem, calc(100vw - 24px));
  display: grid; gap: 6px; padding: 12px 16px 14px; background: var(--papel);
  border-radius: 12px; box-shadow: 0 8px 28px rgba(42, 14, 12, 0.25);
}
.menu-filtros label { margin: 0; }
.menu-filtros select { width: 100%; }
.menu-filtros fieldset { display: grid; gap: 4px; margin: 6px 0 0; padding: 0; border: 0; }
.menu-filtros legend { margin-bottom: 2px; padding: 0; font-weight: 750; }
.opcao-filtro { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.opcao-filtro input { width: auto; margin: 0; }
.menu-filtros .dica { margin: 4px 0 0; }
.menu-filtros .botao { justify-self: start; margin: 4px 0 0; }
.linha-filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.linha-filtros select { width: 100%; }
.menu-filtros select:disabled { opacity: 0.55; }
.filtro-por[hidden] { display: none; }

.controles-palco { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.vista-palco { display: inline-flex; }
.vista-palco button {
  min-height: 36px; padding: 4px 14px; border: 2px solid var(--vinho); background: var(--papel); color: var(--vinho);
  font: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer;
}
.vista-palco button + button { border-left-width: 0; }
.vista-palco button:first-child { border-radius: 999px 0 0 999px; }
.vista-palco button:last-child { border-radius: 0 999px 999px 0; }
.vista-palco button[aria-pressed="true"] { background: var(--vinho); color: var(--papel); }
.botao-cheia {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 4px 12px; border: 2px dashed var(--vinho); border-radius: 999px;
  background: var(--papel); color: var(--vinho); font: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer;
}
.botao-cheia[aria-pressed="true"] { background: var(--vinho); color: var(--papel); }
.icone-cheia { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* Mapa */
.palco-mapa { position: relative; }
.mapa-inicio { height: 62vh; min-height: 340px; background: #F6F1EF; }
.lugar-legenda { position: absolute; left: 10px; bottom: 26px; z-index: 3; max-width: calc(100% - 64px); pointer-events: none; }
.lugar-legenda > * { pointer-events: auto; }
.legenda-inicio {
  display: flex; flex-wrap: wrap; gap: 4px 12px; max-width: 30rem; padding: 6px 10px;
  background: rgba(255, 255, 255, 0.94); border-radius: 10px; box-shadow: 0 2px 10px rgba(42, 14, 12, 0.15);
  font-size: 0.8rem; color: var(--vinho);
}
.legenda-inicio:empty { display: none; }
.legenda-inicio .chave { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.legenda-inicio .dica { margin: 0; font-size: 0.75rem; }
.legenda-inicio .titulo-escala { font-weight: 700; white-space: normal; }
.escala-continua { display: inline-flex; flex-direction: column; gap: 2px; min-width: 12rem; }
.escala-continua .gradiente { display: block; height: 10px; border-radius: 3px; }
.escala-continua .marcas { display: flex; justify-content: space-between; gap: 8px; font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.amostras i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 1px; }
.marca-tipo.publico { border-radius: 2px; background: #FFFFFF; border: 1.5px solid var(--vinho); border-top: 4px solid var(--vermelho); box-shadow: none; }   /* o calendário do mapa */
.palco-mapa .credito-mapa {
  position: absolute; left: 0; bottom: 0; z-index: 3; max-width: calc(100% - 48px); margin: 0; padding: 2px 8px;
  background: rgba(255, 255, 255, 0.85); border-top-right-radius: 6px; font-size: 0.66rem; line-height: 1.3;
}

/* Tabela: cobre a área do mapa */
.vista-tabela { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; background: var(--papel); }
.vista-tabela[hidden] { display: none; }
/* Painel da área em foco (candidatos ou Censo), por cima do mapa e embaixo da tabela, no alto à direita (os
   botões de zoom ficam embaixo). Compacto: onde está e os 3 primeiros; "Ver tudo" mostra o resto (no celular,
   cobrindo o mapa). Pisca uma vez quando a área muda. */
.painel-area {
  position: absolute; z-index: 3; top: 10px; right: 10px; width: min(22rem, calc(100% - 20px)); max-height: calc(100% - 110px);
  display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.97); border: 2px solid var(--vinho);
  border-radius: 12px; box-shadow: 0 2px 12px rgba(42, 14, 12, 0.18);
}
.painel-area[hidden], .reabrir-painel[hidden] { display: none; }
.painel-area.mudou { animation: painel-mudou 1s ease-out; }
@keyframes painel-mudou { from { box-shadow: 0 0 0 5px var(--vermelho); } to { box-shadow: 0 2px 12px rgba(42, 14, 12, 0.18); } }
.painel-barra { display: flex; align-items: center; gap: 8px; padding: 6px 4px 0 10px; }
.abas-painel { display: inline-flex; }
.abas-painel button {
  min-height: 28px; padding: 2px 10px; border: 2px solid var(--vinho); background: var(--papel); color: var(--vinho);
  font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer;
}
.abas-painel button + button { border-left-width: 0; }
.abas-painel button:first-child { border-radius: 999px 0 0 999px; }
.abas-painel button:last-child { border-radius: 0 999px 999px 0; }
.abas-painel button[aria-pressed="true"] { background: var(--vinho); color: var(--papel); }
.painel-barra .ver-tudo { margin-left: auto; font-size: 0.82rem; }
.fechar-painel {
  flex: none; width: 32px; height: 32px; margin-left: auto; border: 0; background: none; color: var(--vinho);
  font: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.ver-tudo + .fechar-painel { margin-left: 0; }
.painel-corpo { min-height: 0; overflow-y: auto; padding: 0 12px 6px; }
.painel-corpo .quadro { padding: 6px 0 4px; border-bottom: 0; }
.painel-corpo .quadro-topo h2 { font-size: 1.05rem; }
.reabrir-painel {
  position: absolute; z-index: 3; top: 10px; right: 10px; min-height: 32px; padding: 2px 12px;
  border: 2px solid var(--vinho); border-radius: 999px; background: var(--papel); color: var(--vinho);
  font: inherit; font-size: 0.82rem; font-weight: 700; box-shadow: 0 2px 8px rgba(42, 14, 12, 0.18); cursor: pointer;
}
/* Compacto: onde está, os 3 primeiros numa linha cada (nome, barra, %) e as 3 primeiras linhas do Censo */
.painel-area:not(.aberto) .quadro-topo h2, .painel-area:not(.aberto) .recorte,
.painel-area:not(.aberto) .quadro-corpo > p.dica, .painel-area:not(.aberto) .quadro-corpo > table + .dica { display: none; }
.painel-area:not(.aberto) .resumo-metrica { margin: 2px 0 4px; padding: 4px 8px; font-size: 0.8rem; }
.painel-area:not(.aberto) .lista-cand { gap: 3px; margin: 4px 0 0; }
.painel-area:not(.aberto) .lista-cand li { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto; gap: 0 8px; align-items: center; font-size: 0.85rem; }
.painel-area:not(.aberto) .lista-cand li:nth-child(n+4) { display: none; }
.painel-area:not(.aberto) .cand-nome { grid-column: 1; grid-row: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.painel-area:not(.aberto) .cand-barra { grid-column: 2; grid-row: 1; height: 7px; }
.painel-area:not(.aberto) .cand-pct { grid-column: 3; grid-row: 1; }
.painel-area:not(.aberto) .tabela-censo { font-size: 0.82rem; }
.painel-area:not(.aberto) .tabela-censo tbody tr:nth-child(n+4) { display: none; }
.painel-area:not(.aberto) .tabela-censo th, .painel-area:not(.aberto) .tabela-censo td { padding: 2px 4px; }
@media (max-width: 59.99rem) {
  .painel-area { left: 8px; right: 8px; top: 8px; width: auto; max-height: calc(100% - 16px); }
  .reabrir-painel { top: 8px; right: 8px; }
  /* Aberto, no celular: cobre o mapa, como a tabela */
  .painel-area.aberto { inset: 0; z-index: 4; max-height: none; border: 0; border-radius: 0; box-shadow: none; animation: none; }
}
.tabela-barra { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 14px; padding: 8px 12px; border-bottom: 1px solid var(--linha); }
.tabela-cadeia { flex: 1 1 100%; }
.tabela-cadeia .cadeia { font-size: 0.9rem; }
.tabela-campos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 10px; }
/* (dois seletores de classe: vencem o estilo-base dos campos, de 48px) */
.tabela-campos .campo-filtro input { width: 11rem; height: 34px; min-height: 34px; margin: 0; padding: 2px 8px; font-size: 0.88rem; }
.tabela-campos .faixa-valor { display: inline-flex; align-items: center; gap: 4px; font-size: 0.85rem; }
.tabela-campos .faixa-valor input { width: 4.6rem; }
.tabela-campos .campo-filtro[hidden] { display: none; }
.tabela-campos .botao { margin: 0; min-height: 34px; }
.tabela-rolagem { flex: 1 1 auto; min-height: 0; overflow: auto; padding-bottom: 12px; }
.tabela-topo { position: sticky; left: 0; max-width: 60rem; padding: 6px 12px 6px; }
.tabela-conta { margin: 0; font-size: 0.85rem; font-weight: 650; }
.tabela-nota { margin: 2px 0 0; font-size: 0.78rem; }
.tabela-areas { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.86rem; }
.tabela-areas th, .tabela-areas td {
  padding: 5px 10px; border-bottom: 1px solid var(--linha); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.tabela-areas .txt { text-align: left; }
.tabela-areas thead th { position: sticky; top: 0; z-index: 2; min-width: 5rem; white-space: normal; vertical-align: bottom; background: var(--papel); box-shadow: inset 0 -2px 0 var(--vinho); }
.tabela-areas thead th:first-child { left: 0; z-index: 3; }
.tabela-areas thead th button {
  padding: 0; border: 0; background: none; color: var(--vinho); font: inherit; font-size: 0.78rem; font-weight: 700; text-align: inherit; cursor: pointer;
}
.tabela-areas tbody th { position: sticky; left: 0; z-index: 1; max-width: 15rem; overflow: hidden; text-overflow: ellipsis; background: var(--papel); font-weight: 400; }
.tabela-areas tbody th .link { font-size: inherit; font-weight: 650; text-align: left; }
.tabela-areas tbody tr:hover > * { background: #F6F1EF; }
.tabela-areas tr.atual > * { background: var(--rosado); }
.amostra { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; box-shadow: 0 0 0 1px rgba(42, 14, 12, 0.15); }
@media (max-width: 59.99rem) {
  .vista-palco button { min-height: 32px; padding: 2px 12px; font-size: 0.82rem; }
  .tabela-campos .campo-filtro { flex: 1 1 9rem; }
  .tabela-campos .campo-filtro input, .tabela-campos .campo-filtro select { width: 100%; }
  .tabela-campos .faixa-valor input { width: 4.6rem; }
  .tabela-areas tbody th { max-width: 10rem; }
  .palco.com-tabela .mapa-inicio { height: 82vh; }   /* a barra da tabela ocupa o alto; sobra espaço para as linhas */
}

/* Painéis */
.palco-lado { padding: 0 16px; }
.quadro { padding: 14px 0 12px; border-bottom: 1px solid var(--linha); }
.palco-lado > :last-child .quadro, .palco-lado > .quadro:last-child { border-bottom: 0; }
.quadro-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.quadro-topo h2 { margin: 0; font-size: 1.3rem; }
.cadeia { flex: 1 1 auto; margin: 0; font-size: 0.85rem; }
.cadeia .link { font-size: inherit; }
.cadeia .sep { color: var(--apagado); }
.quadro-topo .soltar { font-size: 0.8rem; }
.quadro .recorte { margin: 2px 0 8px; }
.resumo-metrica { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: #F6F1EF; font-size: 0.92rem; }
.lista-cand { display: grid; gap: 7px; margin: 0 0 6px; padding: 0; list-style: none; }
.lista-cand li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: baseline; }
.cand-nome { font-weight: 650; overflow-wrap: anywhere; }
.cand-nome .sigla { color: var(--apagado); font-size: 0.85em; font-weight: 400; }
.cand-pct { font-variant-numeric: tabular-nums; font-weight: 700; }
.cand-barra { grid-column: 1 / -1; height: 8px; overflow: hidden; border-radius: 4px; background: #F1ECEA; }
.cand-barra i { display: block; height: 100%; border-radius: 4px; }
.lista-cand .outros .cand-nome { color: var(--apagado); font-weight: 400; }
.tabela-censo { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tabela-censo th, .tabela-censo td { padding: 5px 4px; border-bottom: 1px solid var(--linha); text-align: right; vertical-align: top; }
.tabela-censo th[scope="row"] { font-weight: 400; text-align: left; }
.tabela-censo thead th { color: var(--apagado); font-size: 0.8rem; font-weight: 700; }
.tabela-censo td { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.tabela-censo td.pai { color: var(--apagado); font-weight: 400; }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cidade-agenda { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: var(--rosado); }
.cidade-agenda[hidden] { display: none; }
.cidade-agenda .cidade-nome { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0 0 6px; font-size: 1.05rem; }
.cidade-agenda .soltar { font-size: 0.82rem; }
.cidade-agenda .cidade-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; font-size: 0.9rem; }
.cidade-agenda .botao { margin: 0; }

@media (min-width: 60rem) {
  .palco {
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(26rem, 38vw, 44rem); grid-template-rows: auto minmax(0, 1fr);
    height: calc(100dvh - 78px); min-height: 560px; border-top: 1px solid var(--linha); border-bottom: 3px solid var(--vinho);
  }
  .barra-palco { grid-column: 1 / -1; grid-row: 1; }
  .palco-mapa { grid-column: 1; grid-row: 2; min-height: 0; }
  .mapa-inicio { height: 100%; min-height: 0; }
  .palco-lado { grid-column: 2; grid-row: 2; min-height: 0; overflow-y: auto; padding: 0 20px 20px; border-left: 1px solid var(--linha); }
  .legenda-inicio { max-width: 26rem; }
}

/* No celular, a barra, o mapa e, embaixo, a agenda (o mapa vem antes: é o que chama a atenção) */
@media (max-width: 59.99rem) {
  .palco { display: flex; flex-direction: column; }
  .palco-lado { padding-bottom: 6px; border-bottom: 3px solid var(--vinho); }
}

/* Tela cheia: o palco cobre a página (Esc ou o botão saem) */
.palco.tela-cheia { position: fixed; inset: 0; z-index: 80; height: 100dvh !important; min-height: 0; border: 0; }
body.com-tela-cheia { overflow: hidden; }
@media (max-width: 59.99rem) {
  .palco.tela-cheia { display: flex; flex-direction: column; }
  .palco.tela-cheia .palco-mapa { flex: 1 1 auto; min-height: 0; }
  .palco.tela-cheia .mapa-inicio { height: 100%; }
  .palco.tela-cheia .palco-lado { display: none; }
}

/* Contadores como faixa */
.contadores {
  max-width: none; margin: 0; padding: 22px 20px; border-top: 0;
  background: var(--vinho); color: var(--papel);
}
@media (min-width: 40rem) { .contadores { padding: 26px max(20px, calc((100vw - 72rem) / 2)); } }
.contador-item .numero { color: var(--amarelo); }
.contador-item .rotulo { color: var(--papel); opacity: 0.9; }

/* Caixa de escolha "Pôr na agenda" */
.escolha .opcao {
  display: flex; flex-direction: column; gap: 2px; margin: 10px 0; padding: 12px 14px;
  border: 2px solid var(--linha); border-radius: 12px; color: var(--vinho); text-decoration: none;
}
.escolha .opcao strong { font-stretch: 80%; font-size: 1.15rem; color: var(--vermelho); }
.escolha .opcao span { font-size: var(--fs-pequeno); }
.escolha .opcao:hover, .escolha .opcao:focus-visible { border-color: var(--vinho); background: var(--rosado); }
.balao-acoes { margin-top: 6px !important; font-weight: 650; }

@media (max-width: 59.99rem) {
  .legenda-inicio { font-size: 0.72rem; padding: 4px 8px; }
  .legenda-inicio .dica { display: none; }
  .botao-cheia { min-height: 32px; padding: 2px 9px; font-size: 0.82rem; }
  .botao-cheia .rotulo-cheia { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Grade de dias: só o que cabe, com setas */
.semana { min-width: 0; }
.semana-horas span { height: 46px; }
.semana-coluna { background-image: repeating-linear-gradient(to bottom, var(--linha) 0, var(--linha) 1px, transparent 1px, transparent 46px); }
.navegar-dias { display: inline-flex; align-items: center; gap: 6px; }
.navegar-dias .intervalo { font-weight: 700; font-stretch: 85%; min-width: 7.5rem; text-align: center; }
.navegar-dias .seta {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--vinho); background: var(--papel);
  color: var(--vinho); font: inherit; font-size: 1.2rem; font-weight: 800; line-height: 1; cursor: pointer;
}
.navegar-dias .seta:disabled { opacity: 0.3; cursor: default; }
.bloco-agenda { padding: 3px 6px; font-size: 0.78rem; box-shadow: 0 1px 2px rgba(42, 14, 12, 0.08); }
.bloco-titulo { font-weight: 650; overflow-wrap: anywhere; }
.bloco-lugar { display: block; font-size: 0.7rem; color: var(--apagado); margin-top: 1px; }
.bloco-agenda.estreito .bloco-lugar { display: none; }

.bloco-titulo { overflow-wrap: break-word; hyphens: auto; }
.bloco-mais {
  position: absolute; right: 2px; width: 34%; min-width: 2rem; height: 24px; padding: 0;
  border: 1.5px dashed var(--vermelho); border-radius: 6px; background: var(--papel);
  color: var(--vermelho); font: inherit; font-size: 0.75rem; font-weight: 800; cursor: pointer;
}
.bloco-mais:hover { background: var(--rosado); }
.bloco-agenda.estreito .bloco-titulo { overflow-wrap: normal; word-break: keep-all; hyphens: none; font-size: 0.72rem; }
.bloco-mais { width: 1.9rem; min-width: 0; }

.aviso-ponto { color: var(--vermelho-fundo); font-weight: 650; }
.nota-interna { border: 2px dashed var(--vinho); border-radius: var(--raio); padding: 4px 14px 10px; }
.nota-interna h2 { font-size: 1.1rem; }

/* Faixa do alto: contagem, busca e os números, acima do mapa */
.faixa-inicio {
  display: grid; gap: 14px 28px; padding: 16px 16px 18px;
  background: var(--vinho); color: var(--papel);
}
.faixa-chamada h1 {
  margin: 0; color: var(--amarelo); font-weight: 900; font-stretch: 62%; line-height: 0.9;
  font-size: clamp(2.6rem, 12vw, 3.4rem); letter-spacing: -0.01em;
}
.faixa-chamada .sub { margin: 0.35em 0 0; font-size: 1rem; line-height: 1.35; max-width: 26em; }
/* O logo inteiro ao lado da contagem, nas cores dele, num disco branco (a composição já é redonda, com o círculo
   vermelho atrás do Lula); sem anel nem inclinação (pedido da pessoa em 9/10/2026) */
.faixa-chamada { display: grid; grid-template-columns: auto 1fr; gap: 0 14px; align-items: center; }
.faixa-chamada .logo-inicio {
  grid-row: span 2; width: 120px; height: 120px; box-sizing: border-box; padding: 9px; border-radius: 50%;
  background: var(--papel); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
@media (min-width: 60rem) { .faixa-chamada .logo-inicio { width: 150px; height: 150px; } }
.faixa-busca label { color: var(--papel); margin-top: 0; }
.faixa-busca input { border-color: transparent; }
.faixa-busca .acoes { margin-top: 10px; gap: 8px; }
.faixa-busca .acoes .botao { margin: 0; }
.faixa-busca .botao.secundario { background: transparent; color: var(--papel); border-color: var(--papel); }
.faixa-busca .botao.secundario:hover { background: rgba(255, 255, 255, 0.12); }
.faixa-busca .sugestoes button { color: var(--vinho); }
/* Fotos no fundo da faixa (fotos-topo.js), todas passando devagar por trás da chamada, da busca e dos
   números. No celular cobrem só o alto da faixa e se apagam no vinho, sem nada
   escrito por cima: o lugar, a data e o crédito aparecem na legenda do pé da faixa, ao tocar numa foto. No
   computador, cada foto leva o lugar e a data em amarelo no pé dela, e a legenda fica no alto à direita. */
.faixa-inicio { position: relative; isolation: isolate; padding-top: calc(var(--altura-topo, 64px) + 40px); padding-bottom: 54px; }
.fotos-topo {
  position: absolute; inset: 0 0 auto; height: calc(var(--altura-topo, 64px) + 280px); z-index: -1; overflow: hidden; background: var(--vinho);
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); mask-image: linear-gradient(to bottom, #000 60%, transparent);
}
/* Na página inicial, a marca e o menu ficam por cima das fotos, sem tira própria: o topo devolve a própria
   altura com margem negativa (--altura-topo, medida em fotos-topo.js) e a faixa começa no alto da tela. */
body:has(.fotos-topo) .topo {
  position: relative; z-index: 5; background: transparent; box-shadow: none; clip-path: none;
  margin-bottom: calc(-1 * var(--altura-topo, 64px));
}
body:has(.fotos-topo) #nav a { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
/* O trilho tem camada própria, com ou sem animação. */
.fotos-trilho { position: relative; z-index: 0; display: flex; width: max-content; height: 100%; animation: fotos-passar 200s linear infinite; }
.foto-passa { position: relative; margin: 0; height: 100%; }
/* No celular, cada foto passa quase do tamanho da tela (4:3); no computador, 2:1 */
.foto-passa { flex: none; aspect-ratio: 4 / 3; margin-right: 3px; }
.foto-passa-primeira img { object-position: 72% 50%; }
.foto-passa img {
  display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s;
}
.fotos-topo img.carregada { opacity: 1; }
.foto-passa::after { content: ""; position: absolute; inset: 0; background: rgba(42, 14, 12, 0.68); }
.fotos-topo figcaption {
  position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 6px; display: none; flex-direction: column; gap: 1px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.foto-lugar, .foto-credito { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foto-lugar { color: var(--amarelo); font-weight: 800; font-stretch: 75%; font-size: 0.82rem; line-height: 1.15; }
.foto-credito { color: rgba(255, 255, 255, 0.78); font-size: 0.62rem; line-height: 1.2; }
@keyframes fotos-passar { to { transform: translateX(-50%); } }
.faixa-inicio:hover .fotos-trilho, .faixa-inicio:has(input:focus) .fotos-trilho,
.fotos-topo.pausado .fotos-trilho, .fotos-topo.fora .fotos-trilho { animation-play-state: paused; }
.faixa-chamada, .faixa-busca label, .perto-conta, .faixa-inicio .contadores { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); }
.fotos-legenda {
  position: absolute; left: 16px; right: 16px; bottom: 8px; z-index: 1; max-width: none; margin: 0;
  display: flex; align-items: center; gap: 4px 10px; font-size: 0.7rem; line-height: 1.3; color: rgba(255, 255, 255, 0.82);
}
.fotos-texto { flex: 1; }
.fotos-onde { color: var(--amarelo); font-weight: 800; }
.fotos-legenda a { color: inherit; }
.fotos-pausa {
  flex: none; min-height: 26px; padding: 2px 10px; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 999px;
  background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.fotos-pausa:hover { background: rgba(255, 255, 255, 0.12); }
@media (prefers-reduced-motion: reduce) {
  .fotos-trilho { animation: none; }
  .fotos-topo img { transition: none; }
  .fotos-pausa { display: none; }
}
.armadilha { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.perto-conta { margin: 12px 0 0; font-size: 1.02rem; line-height: 1.35; }
.perto-conta strong { color: var(--amarelo); font-size: 1.25rem; font-weight: 900; font-stretch: 75%; }
.aviso-local { margin: 8px 0 0; font-size: 0.9rem; line-height: 1.35; opacity: 0.92; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); }
.aviso-local[hidden] { display: none; }
.perto-conta .link { color: var(--papel); font-weight: 700; text-decoration: underline; }
.perto-conta .dica-perto { opacity: 0.85; }
/* "Votos de": campo com busca e lista de sugestões */
.escolha { position: relative; }
.campo-filtro .escolha input { width: 19rem; max-width: 100%; height: 34px; min-height: 34px; margin: 0; padding: 2px 10px; font-size: 0.88rem; }
.escolha-lista {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; width: max(100%, 20rem); max-width: 90vw; max-height: 19rem;
  overflow-y: auto; margin: 0; padding: 4px 0; list-style: none; background: var(--papel); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(42, 14, 12, 0.25);
}
.escolha-lista[hidden] { display: none; }
.escolha-lista li { padding: 6px 12px; font-size: 0.88rem; cursor: pointer; }
.escolha-lista li.ativo, .escolha-lista li[role="option"]:hover { background: var(--rosado); }
.escolha-lista .dica-escolha { color: var(--apagado); font-size: 0.78rem; cursor: default; }
@media (max-width: 59.99rem) { .campo-filtro .escolha input { width: 100%; } }
.faixa-inicio .contadores {
  margin: 0; padding: 0; background: none; border: 0; gap: 10px 18px; align-content: center;
  grid-template-columns: 1fr 1fr;
}
.faixa-inicio .contador-item .numero { font-size: clamp(2rem, 9vw, 2.6rem); }
.faixa-inicio .contador-item .rotulo { font-size: 0.8rem; margin-top: 2px; }
@media (min-width: 60rem) {
  .faixa-inicio {
    grid-template-columns: minmax(16rem, 1fr) minmax(20rem, 1.3fr) minmax(22rem, 1.2fr);
    align-items: center; padding: 18px 24px 20px;
  }
  .faixa-inicio { padding-top: calc(var(--altura-topo, 64px) - 18px); padding-bottom: 42px; }   /* a busca sobe para a linha da marca, que no meio é vazia */
  .fotos-topo { inset: 0; height: auto; -webkit-mask-image: none; mask-image: none; }
  .foto-passa { aspect-ratio: 2 / 1; }
  .foto-passa-primeira img { object-position: 50% 50%; }
  .foto-passa::after { background: rgba(42, 14, 12, 0.72); }
  .fotos-topo figcaption { display: flex; }
  .fotos-texto .fotos-onde, .fotos-texto .fotos-quem { display: none; }   /* já estão no pé da foto */
  .fotos-legenda { left: auto; right: 24px; top: calc(var(--altura-topo, 64px) + 2px); bottom: auto; max-width: 30%; }
  .fotos-texto { text-align: right; }
  .faixa-inicio .contadores { grid-template-columns: repeat(4, 1fr); }
  .palco { height: calc(100dvh - 200px); min-height: 520px; }
  body:has(.faixa-demo) .palco { height: calc(100dvh - 234px); }
}

/* O Brasil em movimento (movimento.js): números e gráficos do país, entre o topo e o mapa ------------ */
.movimento { padding: 14px 16px 16px; background: var(--rosado); border-bottom: 1px solid var(--linha); }
.mov-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; max-width: 80rem; margin: 0 auto 10px; }
.mov-cabeca h2 { margin: 0; font-size: 1.5rem; }
.mov-atualizado { margin: 0; color: var(--apagado); font-size: 0.78rem; }
.mov-grade { display: grid; gap: 12px; max-width: 80rem; margin: 0 auto; }
.mov-numeros { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 8px; align-content: start; }
.mov-num { display: flex; flex-direction: column; margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--papel); }
.mov-num strong { color: var(--vermelho); font-size: 2rem; font-weight: 900; font-stretch: 62%; line-height: 1; }
.mov-num span { color: var(--vinho); font-size: 0.8rem; font-weight: 650; line-height: 1.2; }
.mov-num.agora { background: var(--vinho); }
.mov-num.agora strong { color: var(--amarelo); }
.mov-num.agora span { color: var(--papel); }
.mov-ver { justify-self: start; align-self: center; font-weight: 700; }
.mov-card { min-width: 0; padding: 10px 12px 8px; border-radius: 12px; background: var(--papel); }
.mov-card h3 { margin: 0 0 6px; font-size: 1rem; }
.mov-sub { color: var(--apagado); font-size: 0.82rem; font-weight: 600; }
.mov-svg { overflow-x: auto; }
.mov-svg svg { display: block; height: auto; }
.mov-barras { width: max(100%, 22rem); max-height: 170px; }
.mov-barras rect { fill: var(--vermelho); }
.mov-barras .hoje rect { fill: var(--vinho); }
.mov-barras rect.zero { fill: var(--linha); }
.mov-barras text, .mov-ranking text { font-family: inherit; fill: var(--vinho); }
.mov-barras .valor, .mov-ranking .valor { font-size: 11px; font-weight: 800; }
.mov-barras .eixo { font-size: 10px; }
.mov-barras .eixo.sub { fill: var(--apagado); }
.mov-barras .hoje .eixo { font-weight: 900; }
.mov-ranking { width: 100%; max-width: 26rem; }
.mov-ranking rect { fill: var(--vermelho); }
.mov-ranking .eixo { font-size: 12px; }
.mov-ranking .forte { font-weight: 800; }
.mov-area { width: 100%; max-height: 130px; }
.mov-area .area { fill: var(--amarelo); opacity: 0.55; }
.mov-area .linha { fill: none; stroke: var(--vermelho); stroke-width: 3; stroke-linejoin: round; }
.mov-area circle { fill: var(--vermelho); }
.mov-destaque { margin: 0 0 4px; font-size: 0.95rem; }
.mov-destaque strong { color: var(--vermelho); font-size: 1.4rem; font-weight: 900; }
.mov-mais { color: var(--vinho); font-weight: 800; }
.mov-conf { color: var(--apagado); font-size: 0.85rem; }
@media (min-width: 60rem) {
  .mov-grade { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
}
@media (max-width: 59.99rem) {
  .mov-grade { grid-auto-flow: column; grid-auto-columns: minmax(17rem, 88%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .mov-grade > * { scroll-snap-align: start; }
}

/* Post ou reel da divulgação, carregado no clique (eventos.js) */
.previa-instagram iframe { display: block; width: 100%; max-width: 540px; height: 640px; border: 0; border-radius: 8px; background: #fff; }

/* "Preencher pelo post" (formulário) e a imagem do cartaz na página do evento (eventos.js) */
.previa-post { display: grid; gap: 12px; margin: 0.6em 0; }
.previa-post:empty { display: none; }
@media (min-width: 40rem) { .previa-post:has(img) { grid-template-columns: 200px 1fr; align-items: start; } }
.previa-post img, .cartaz { display: block; width: 100%; max-width: 280px; height: auto; border-radius: 8px; }
.previa-post ul { margin: 0.2em 0 0.6em; padding-left: 1.2em; }

/* Barra do alto: cidade, evento ou link (eventos.js, barraBusca) */
.sugestoes .grupo { padding: 8px 12px 2px; font-size: var(--fs-pequeno); color: var(--apagado); }
/* A faixa do alto é uma camada própria (isolation): a lista ocupa espaço e empurra o resto, em vez de flutuar
   por cima do mapa, que a cobriria */
.barra-busca .sugestoes { position: static; border-radius: 0 0 10px 10px; text-shadow: none; }

/* Fotos das ruas (fotos-ruas.js) -------------------------------------------------------------------- */
.form-foto .previa-foto img { width: 160px; height: 120px; object-fit: cover; border-radius: 8px; display: block; }
.form-foto .mapa.mini { height: 260px; }
.form-foto .mapa[hidden] { display: none; }
.fotos-evento .fotos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; }
.foto-rua { margin: 0; }
.foto-rua img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--rosado); }
.foto-rua figcaption { font-size: 0.8rem; line-height: 1.3; margin-top: 4px; }
.foto-rua .acoes { margin-top: 4px; gap: 6px; }
.foto-rua .denunciar-foto { display: grid; gap: 6px; margin-top: 6px; }
.balao-fotos { display: grid; grid-template-columns: repeat(3, 72px); gap: 4px; margin: 6px 0; }
.balao-fotos img { width: 72px; height: 54px; object-fit: cover; border-radius: 4px; display: block; }
.fila .foto-mini { width: 160px; height: 90px; object-fit: cover; border-radius: 6px; }
.marca-tipo.foto { background: #FFD23F; box-shadow: 0 0 0 2px #2A0E0C; border-radius: 3px; }
.pagina-foto .foto-rua img { aspect-ratio: auto; max-height: 75vh; object-fit: contain; background: #000; }

/* Entrar com Google (app.js, telaEntrar) */
.entrar-google { width: 100%; justify-content: center; }
.ou-separador { text-align: center; color: var(--apagado); margin: 1em 0 0.6em; font-size: var(--fs-pequeno); }

/* Quem chamou o ato (eventos.js blocoSelo, agenda.js marcaOrg, mapa-inicio.js balão; 8/10/2026): o selo verde
   da organização confirmada, a bandeira vermelha sem organização e o aviso forte do "não é nosso" */
.selo-org { margin: 0 0 1rem; padding: 12px 14px; border-radius: 10px; border: 2px solid; }
.selo-org p { margin: 0 0 4px; }
.selo-org .selo-titulo { font-weight: 800; font-size: 1.05rem; }
.selo-org .selo-relatar { margin-top: 6px; font-size: var(--fs-pequeno); }
.selo-org.ok { border-color: #1E7A45; background: #EAF6EE; color: #10391F; }
.selo-org.sem { border-color: var(--vermelho); background: var(--rosado); }
.selo-org.sem .selo-titulo { color: var(--vermelho-fundo); }
.selo-org.negado { border-color: var(--vermelho-fundo); background: var(--vermelho-fundo); color: #FFF; }
.selo-org.negado a { color: #FFF; }
.selo-org.negado .botao { background: #FFF; color: var(--vermelho-fundo); border-color: #FFF; }
.selo-org.negado .botao.secundario { background: transparent; color: #FFF; }
.selo-acoes { margin-top: 8px; }
.item-org { display: block; margin-top: 2px; font-size: 0.8rem; font-weight: 700; }
.item-org.ok { color: #1E7A45; }
.item-org.sem { color: var(--vermelho-fundo); }
.item-org.post { color: #2B4C7E; }
/* Marca leve: o post é de um perfil reconhecido, mas ninguém confirmou ainda (nem verde, nem bandeira) */
.selo-org.post { border-color: #2B4C7E; background: #EEF3FA; color: #1B2F4F; }
.item-org.negado { color: #FFF; background: var(--vermelho-fundo); border-radius: 4px; padding: 0 6px; display: inline-block; }
.balao-org { color: var(--vermelho-fundo); font-weight: 700; font-size: 0.8rem; }
.quem-chamou .acoes input, .quem-chamou .acoes select { width: auto; min-width: 12rem; margin: 0; }
.quem-chamou .representantes { margin: 4px 0; padding-left: 1.2em; }

/* Curtidas, cartaz e quem convoca (pedido da pessoa em 8/10/2026) -------------------------------------- */
.item-cartaz { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; align-self: start; }
.item-quem { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-pequeno); font-weight: 650; }
.monograma {
  flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
  background: var(--vinho); color: var(--papel); font-size: 0.6rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1;
}
.item-curtidas { color: var(--vinho); font-weight: 750; white-space: nowrap; }
.item-curtidas .sobe, .numeros-curtidas .sobe { color: #1C7A3C; font-weight: 700; }
/* Página do evento: o cartaz no alto e o cabeçalho numa faixa da cor dele (--cor-cartaz, de corDoCartaz) */
.heroi-cartaz { display: none; }
.heroi-evento.com-cartaz { margin-top: 1em; border-radius: 18px; overflow: hidden; background: var(--cor-cartaz, var(--vinho)); color: var(--papel); }
.heroi-evento.com-cartaz .heroi-cartaz { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.heroi-evento.com-cartaz .cabeca-atividade { margin: 0; padding: 14px 16px 16px; border-bottom: 0; }
.heroi-evento.com-cartaz h1, .heroi-evento.com-cartaz .onde, .heroi-evento.com-cartaz .resto { color: var(--papel); }
.heroi-evento.com-cartaz .quando-grande .dia { color: var(--amarelo); }
.heroi-evento.com-cartaz .pilula.neutra, .heroi-evento.com-cartaz .pilula.momento { border-color: rgba(255, 255, 255, 0.75); color: var(--papel); }
.heroi-evento.com-cartaz .pilula.momento .estrela-momento:not(.terminou) { fill: var(--amarelo); }
.heroi-evento.com-cartaz .pilula.publico { background: var(--papel); color: var(--vermelho-fundo); }   /* vermelho some no fundo da cor do cartaz */
@media (min-width: 44rem) {
  .heroi-evento.com-cartaz { display: grid; grid-template-columns: minmax(0, 320px) 1fr; align-items: end; }
}
/* O cartaz abre o post ou o vídeo ali mesmo, no quadro do Instagram */
.heroi-abrir { display: none; position: relative; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.heroi-evento.com-cartaz .heroi-abrir { display: block; }
.heroi-abrir .heroi-ver { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.66); color: #fff; font-size: var(--fs-pequeno); font-weight: 700; }
.heroi-abrir:focus-visible { outline: 3px solid var(--amarelo); outline-offset: -3px; }
.heroi-quadro { align-self: stretch; background: #fff; }
.heroi-quadro iframe { display: block; width: 100%; height: 640px; border: 0; background: #fff; }
/* Repercussão no Instagram */
.repercussao .numeros-curtidas { margin: 0.2em 0; }
.repercussao .grande { color: var(--vermelho); font-size: 2.3rem; font-weight: 900; font-stretch: 65%; line-height: 1; }
.curva-curtidas svg { display: block; width: 100%; height: 60px; margin: 6px 0; }
.curva-curtidas polyline { fill: none; stroke: var(--vermelho); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.posts-curtidas { list-style: none; margin: 6px 0 0; padding: 0; font-size: var(--fs-pequeno); }
.posts-curtidas li { display: flex; gap: 6px; padding: 5px 0; border-top: 1px solid var(--linha); }
.posts-curtidas strong { margin-left: auto; }
.juntar-post { margin-top: 10px; }
.juntar-post label { margin-top: 0; }
.juntar-linha { display: flex; flex-wrap: wrap; gap: 8px; }
.juntar-linha input { flex: 1 1 14rem; min-width: 0; }
.juntar-linha .botao { margin: 0; }
.aviso-parecido { grid-column: 1 / -1; margin-top: 10px; padding: 10px 12px; border: 2px solid var(--amarelo); border-radius: 10px; background: #FFF8DB; }
.aviso-parecido p, .aviso-parecido ul { margin: 0 0 6px; }
.aviso-parecido li { margin-bottom: 6px; }
.aviso-parecido .botao { margin: 6px 0 0; }

/* Aviso de instalar o app (instalar.js): uma tira no pé da tela do celular, por cima do mapa, até a pessoa
   instalar ou fechar. */
.aviso-app {
  position: fixed; z-index: 60; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  max-width: 34rem; margin: 0 auto; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px 12px;
  padding: 12px 40px 12px 12px; border-radius: 14px; background: var(--vinho); color: var(--papel);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); font-size: var(--fs-pequeno); line-height: 1.35;
}
.aviso-app img { border-radius: 10px; background: var(--papel); }
.aviso-app p { margin: 0; }
.aviso-app-texto p + p { margin-top: 2px; opacity: 0.9; }
.aviso-app-botoes .botao { margin: 0; white-space: nowrap; }
.aviso-app-fechar {
  position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: transparent; color: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.aviso-app-fechar:hover { background: rgba(255, 255, 255, 0.14); }
@media (max-width: 24rem) {   /* tela estreita: o botão desce para baixo do texto */
  .aviso-app { grid-template-columns: 44px 1fr; }
  .aviso-app-botoes { grid-column: 2; }
}
/* Repercussão no Instagram no mapa (mapa-inicio.js): o balão do clique e a legenda da bolha */
.balao-curtidas { display: block; margin-top: 2px; color: var(--vinho); font-size: 0.8rem; font-weight: 700; }
.balao-curtidas .sobe { color: #1C7A3C; }
.bolha-ref { display: inline-block; flex: none; border-radius: 50%; background: rgba(215, 38, 30, 0.16); border: 1px solid rgba(215, 38, 30, 0.55); }
.bolha-ref.g { width: 18px; height: 18px; }
.bolha-ref.p { width: 9px; height: 9px; }

/* Grande ato (várias chamadas no mesmo lugar e hora) */
.item-agenda.grande-ato { border-left: 4px solid var(--vermelho, #d32f2f); }
.chamadas-ato { margin: 0 0 .5rem 4.25rem; font-size: .9rem; }
.chamadas-ato summary { cursor: pointer; color: var(--vermelho, #d32f2f); }
.chamadas-ato ul { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; gap: .35rem; }

/* Buscas no Google: ranking da aba Buscas no painel da área (site/paineis.js, painelBuscas) */
.lista-buscas { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.lista-buscas > li.esfriou { opacity: 0.55; }
.lista-buscas summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; cursor: pointer; list-style: none; }
.lista-buscas summary::-webkit-details-marker { display: none; }
.busca-rotulo { font-weight: 700; overflow-wrap: anywhere; }
.busca-volume { font-variant-numeric: tabular-nums; }
.busca-tempo { grid-column: 1 / -1; font-size: var(--fs-pequeno); color: var(--apagado); }
.busca-termos { margin: 4px 0; padding-left: 1.1rem; font-size: var(--fs-pequeno); }
.lista-buscas details a { font-size: var(--fs-pequeno); }
.aviso-buscas { margin: 4px 0; padding: 4px 8px; border-radius: 6px; background: #FFF1C2; color: var(--vinho); font-weight: 600; }
.painel-area:not(.aberto) .lista-buscas > li:nth-child(n+4) { display: none; }
.painel-area:not(.aberto) .lista-buscas { gap: 3px; margin-top: 4px; }
.painel-area:not(.aberto) .busca-tempo { font-size: 0.78rem; }
.faixa-ato { margin: .5rem 0; padding: .5rem .75rem; border-radius: 8px; background: #fde8e8; font-weight: 600; }
.chamadas-ato-pagina li { display: flex; flex-wrap: wrap; gap: .35rem; align-items: baseline; }