* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden; /* só o mapa se move; a página em si não rola */
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg, #0F1216);
  color: var(--txt, #F2F5F7);
}

button {
  font-family: inherit;
}

.oculto {
  display: none !important;
}

/* =========================================================
   Mapa: único "fundo" da tela, estilo Google Maps. Tudo o
   resto flutua por cima, fixo, e não se move com o mapa.
   ========================================================= */

#mapa-viewport {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  /* Mais escuro que os botões flutuantes (#171B21) de propósito: no
     neumorfismo os botões têm a cor do fundo, então precisam de um
     fundo de mapa mais escuro pra "saltarem" com o relevo. */
  background: #191c22;
  touch-action: none;
  cursor: grab;
  z-index: 1;
}

#mapa-viewport.arrastando {
  cursor: grabbing;
}

svg#mapa-rj {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: center center;
}

/* Estado "não raspado" -> aparência de raspadinha (cinza fosco) */
.municipio {
  fill: #8E97A3;
  stroke: var(--bg, #0F1216);
  stroke-width: 2;
  cursor: pointer;
  transition: fill 0.35s ease, transform 0.15s ease;
}

/* ---- Divisas que AFINAM ao aproximar ----

   `stroke-width: 2` é em unidades do desenho, então ela era ampliada
   junto com o mapa: quanto mais perto, mais grossa a divisa na tela,
   até virar uma tarja preta que engolia os municípios pequenos.

   Dividir pelo `--zoom` (a mesma variável que os nomes já usam)
   mantém a espessura constante na tela. E `--traco-base`, que desce a
   cada faixa de aproximação, faz a linha ficar de fato mais FINA
   conforme se chega perto -- abrindo espaço pro detalhe que vier a ser
   desenhado por cima. De longe ela continua grossa, que é o que separa
   um município do outro na visão geral. */
svg#mapa-rj .municipio {
  stroke-width: calc(var(--traco-base, 2) * 3.5px / var(--zoom, 3.5));
}

svg#mapa-rj.zoom-n1 .municipio {
  --traco-base: 1.55;
}
svg#mapa-rj.zoom-n2 .municipio {
  --traco-base: 1.2;
}
svg#mapa-rj.zoom-n3 .municipio {
  --traco-base: 0.9;
}
svg#mapa-rj.zoom-n4 .municipio {
  --traco-base: 0.65;
}

.municipio:hover {
  fill: #A5ADB8;
}

/* Estado "raspado/visitado" -> cor viva */
.municipio.visitado {
  fill: #2BD576; /* verde vivo */
}

.municipio.visitado:hover {
  fill: #1FA85C;
}

/* Raspado, mas a geolocalizacao ainda nao confirmou a visita --
   azul em vez de verde (ver estaVerificado em js/script.js). Antes
   era vermelho, mas isso deixava alarmante quem só queria marcar sem
   verificar na hora; azul passa a mesma informação sem soar como erro. */
.municipio.nao-verificado {
  fill: #3FA9F5;
}

.municipio.nao-verificado:hover {
  fill: #2E8FD4;
}

/* Ainda cinza (não raspado), mas o GPS já confirmou presença aqui
   antes (ver verificarLocalizacaoAoAbrirApp/presencaConfirmadaEm em
   js/script.js) -- contorno tracejado ciano avisa que dá pra raspar
   sem precisar voltar no local. */
.municipio.presenca-pendente {
  stroke: #38C6E8;
  stroke-dasharray: 4 3;
}

/* Precisa repetir aqui porque a regra de cima usa #mapa-rj e venceria
   por especificidade, devolvendo a divisa tracejada à espessura
   comum. Ela é 1,5x mais grossa de propósito: é um aviso. */
svg#mapa-rj .municipio.presenca-pendente {
  stroke-width: calc(var(--traco-base, 2) * 1.5 * 3.5px / var(--zoom, 3.5));
}

/* Município com selo brilhante (ver aplicarEstadoNoSVG) -- dourado
   em vez de verde, pro brilho valer também no mapa, não só no popup */
.municipio.visitado.brilhante {
  fill: #E9B949;
}

.municipio.visitado.brilhante:hover {
  fill: #D4A63F;
}

/* Pequeno feedback visual ao clicar */
.municipio.clicando {
  transform: scale(0.97);
}

.rotulo-municipio {
  fill: #0F1216;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: middle;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 0.6px;
  user-select: none;
  pointer-events: none;
  /* só aparecem com o mapa suficientemente perto (ver script.js) */
  display: none;
}

svg#mapa-rj.mostrar-rotulos .rotulo-municipio {
  display: block;
}

/* ---- Nomes com tamanho FIXO NA TELA ----

   A base de cada nome vem do gerador em `--rotulo-base` (proporcional
   ao tamanho do município), e o app escreve o zoom atual em `--zoom` a
   cada movimento do mapa. Dividir um pelo outro faz a letra ficar do
   MESMO tamanho na tela em qualquer aproximação.

   Isso é o que faz os nomes pararem de brigar: antes o texto crescia
   junto com o mapa, então dois nomes colados continuavam colados em
   qualquer zoom. Agora, aproximar abre espaço de verdade entre eles.

   O contorno branco também precisa encolher junto, senão engorda e
   come a letra quando se aproxima.

   O 3.3 é o tamanho final na tela: `--rotulo-base` vale de 4.0 a 5.5,
   então o texto fica entre ~13px e ~18px, independente do zoom. TEM que
   ser igual ao FATOR_TELA de tools/geojson-to-svg.js -- é com ele que
   o gerador calcula em que zoom cada nome para de encostar no vizinho.
   Valores diferentes fariam nomes aparecerem antes de haver espaço. */
svg#mapa-rj .rotulo-municipio {
  font-size: calc(var(--rotulo-base, 4) * 3.3px / var(--zoom, 3.5));
  stroke-width: calc(0.6px * 3.3 / var(--zoom, 3.5));
}

/* Nomes que só aparecem mais perto. O gerador calcula, por município,
   o zoom em que o nome dele passa a caber sem encostar em ninguém, e
   grava em data-nivel (ver atribuirNiveis em tools/geojson-to-svg.js).
   Município minúsculo entra no último nível: lá o nome pode passar um
   pouco por cima da divisa, mas há espaço de tela pra ele. */
svg#mapa-rj:not(.zoom-n1) .rotulo-municipio[data-nivel="1"],
svg#mapa-rj:not(.zoom-n2) .rotulo-municipio[data-nivel="2"],
svg#mapa-rj:not(.zoom-n3) .rotulo-municipio[data-nivel="3"] {
  display: none;
}

/* ---- Pontos turísticos no mapa ----

   Escondidos por padrão: só aparecem a partir de ZOOM_DOS_PONTOS (30x,
   ver js/script.js), que é quando se está olhando UM município. De
   longe, 460 medalhões cobririam o mapa que deveriam enfeitar.

   O tamanho é FIXO NA TELA, pelo mesmo truque dos nomes: o medalhão é
   desenhado com raio 1 e a escala desfaz o zoom. Sem isso ele cresceria
   junto com o mapa e viraria um disco gigante em cima da cidade. */
.ponto-turistico {
  display: none;
  cursor: pointer;
}

/* Entram DESBOTANDO, em vez de piscar na tela de uma vez. Os dois
   limites do desbote (ZOOM_DOS_PONTOS e ZOOM_DOS_PONTOS_CHEIO) vivem em
   js/script.js, que escreve o resultado aqui já pronto. */
svg#mapa-rj.mostrar-pontos .ponto-turistico {
  display: block;
  opacity: var(--pontos-opacidade, 1);
}

svg#mapa-rj .ponto-turistico > * {
  /* O 7 é calibrado contra a ALTURA DOS NOMES, não contra pixels:
     quantos pixels isso vira depende da tela, exatamente como acontece
     com o texto do mapa. O 3.5 é o zoom de referência, o mesmo dos
     nomes. */
  transform: scale(calc(7 * 3.5 / var(--zoom, 3.5)));
  transform-box: fill-box;
  transform-origin: center;
}

/* O pino tem a PONTA na coordenada, então ele não pode ser escalado a
   partir do centro -- senão a ponta sai do lugar ao mudar o zoom. */
svg#mapa-rj .ponto-turistico > .ponto-pino,
svg#mapa-rj .ponto-turistico > .ponto-pino-miolo {
  transform-box: view-box;
  transform-origin: 0 0;
}

/* A arte não recebe evento: quem responde ao toque é o .ponto-alvo,
   por cima dela. Sem isto, acertar o Cristo exigiria mirar num braço
   de poucos pixels. */
.ponto-arte,
.ponto-pino,
.ponto-pino-miolo {
  pointer-events: none;
}

.ponto-pino {
  fill: var(--verde);
  stroke: #FFFFFF;
  stroke-width: 0.16;
  stroke-linejoin: round;
}

.ponto-pino-miolo {
  fill: #FFFFFF;
}

/* Invisível, mas clicável: `fill: transparent` continua recebendo
   evento (`fill: none` NÃO receberia). */
.ponto-alvo {
  fill: transparent;
}

.ponto-turistico:active {
  opacity: 0.65;
}

/* Modo regiões (mapa afastado): esconde as bordas de cada município
   (fica só o preenchimento contínuo por região) e mostra o contorno
   de cada região por cima (ver construirContornosDeRegiao em
   js/script.js) -- aproximação por fecho convexo, não o contorno
   exato/côncavo de cada região. */
svg#mapa-rj.modo-regioes .municipio {
  stroke: none;
}

/* Grupo de contornos: no RJ é #contornos-regioes (montado por JS), no SP
   é .contornos-regioes (embutido no SVG pelo tool). Escondido por padrão,
   aparece só no modo regiões de cada mapa. */
#contornos-regioes,
#estado-viewport svg .contornos-regioes {
  display: none;
}

svg#mapa-rj.modo-regioes #contornos-regioes,
#estado-viewport svg.modo-regioes .contornos-regioes {
  display: block;
}

.contorno-regiao-segmento {
  fill: none;
  stroke: var(--bg, #0F1216);
  stroke-width: 1.4;
  stroke-linecap: round;
  pointer-events: none;
}

/* =========================================================
   UI flutuante por cima do mapa
   ========================================================= */

#barra-topo {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none; /* deixa cliques passarem no espaço vazio entre os cartões */
}

#barra-topo > * {
  pointer-events: auto;
}

#cartao-progresso {
  background: var(--vidro, rgba(23, 27, 33, 0.9));
  backdrop-filter: blur(6px);
  border-radius: 12px;
  padding: 10px 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

#cartao-progresso h1 {
  font-size: 1.05rem;
  margin: 0;
}

.logo-desbrava {
  font-family: "Archivo Black", "Arial Black", Impact, sans-serif;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   Tela de carregamento (splash): preta, logo branco e uma barra
   fina de progresso indeterminado. Fica por cima de TUDO
   (z-index acima de qualquer modal) até o app terminar de
   inicializar -- ver esconderTelaCarregamento em js/script.js.
   ============================================================ */
#tela-carregamento {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  transition: opacity 0.4s ease;
}

#tela-carregamento h1 {
  color: #fff;
  font-size: 2rem;
  margin: 0;
}

#carregamento-barra {
  width: min(220px, 60vw);
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

/* Progresso "indeterminado": um trecho branco que desliza em loop
   (não dá pra saber % real do parse/scripts, então a barra só
   comunica "tá vivo, carregando"). */
#carregamento-barra-preenchida {
  width: 40%;
  height: 100%;
  background: #fff;
  border-radius: 999px;
  animation: carregamento-desliza 1.1s ease-in-out infinite;
}

@keyframes carregamento-desliza {
  0% {
    transform: translateX(-250%);
  }
  100% {
    transform: translateX(350%);
  }
}

/* Fade-out antes de remover de vez (ver esconderTelaCarregamento). */
#tela-carregamento.sumindo {
  opacity: 0;
  pointer-events: none;
}

#progresso {
  color: var(--fraco);
  font-size: 0.85rem;
  margin: 2px 0 0;
}

#botoes-topo {
  display: flex;
  /* Sem isso, numa tela estreita a fileira de botões (mais larga
     desde que o botão da Comunidade Desbrava entrou, agora são 5)
     estourava a largura da tela e o último botão (Configurações)
     ficava fora da área visível, escondido pelo overflow:hidden do
     body -- em vez de cortar, agora quebra pra uma segunda linha,
     alinhada à direita igual à primeira. */
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: 100%;
}

#botoes-topo button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--vidro, rgba(23, 27, 33, 0.9));
  backdrop-filter: blur(6px);
  color: var(--txt, #F2F5F7);
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

#botoes-topo button:hover {
  background: var(--surf2);
}

/* Botoes flutuantes na lateral esquerda: perfil, ranking, amigos,
   conquistas, check-in semanal e mapa do Brasil -- ficam fora da
   barra de topo pra nao lotar o cabecalho. So a setinha
   (#btn-toggle-lateral) fica sempre visivel; apertar ela abre/fecha
   o resto (#botoes-lateral-lista), ver alternarBotoesLaterais em
   js/script.js -- evita empilhar botoes demais na tela de uma vez. */
#botoes-lateral-esquerda {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 96px);
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#botoes-lateral-esquerda button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--vidro, rgba(23, 27, 33, 0.9));
  backdrop-filter: blur(6px);
  color: var(--txt, #F2F5F7);
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

#botoes-lateral-esquerda button:hover {
  background: var(--surf2);
}

#botoes-lateral-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#botoes-lateral-lista.recolhido {
  display: none;
}

/* A seta precisa se destacar das outras -- é o único botão sempre
   visível, e sem ele ninguém acha o resto (perfil/ranking/amigos/
   conquistas/check-in/mapa do Brasil). Maior, mais grossa e com cor
   de destaque em vez do cinza padrão dos outros botões. */
#botoes-lateral-esquerda button#btn-toggle-lateral {
  font-size: 1.7rem;
  font-weight: 900;
  background: #2BD576;
}

#botoes-lateral-esquerda button#btn-toggle-lateral:hover {
  background: #1FA85C;
}

#dica-mapa {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  color: var(--fraco, #C3CBD4);
  background: var(--vidro, rgba(23, 27, 33, 0.85));
  backdrop-filter: blur(6px);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  opacity: 1;
  transition: opacity 0.5s ease;
}

/* Some sozinha alguns segundos depois do mapa carregar -- só serve
   pra ensinar de primeira, não precisa poluir a tela pra sempre (ver
   configurarDicaMapa em js/script.js). */
#dica-mapa.dica-mapa-escondida {
  opacity: 0;
  pointer-events: none;
}

/* =========================================================
   Popups (selo/raspadinha, biblioteca, configurações)
   ========================================================= */

#modal-raspadinha,
#biblioteca-selos,
#modal-configuracoes,
#modal-admin,
#modal-brasil {
  position: fixed;
  inset: 0;
  background: var(--backdrop, rgba(15, 18, 22, 0.85));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}

#modal-conteudo,
#biblioteca-conteudo,
#configuracoes-conteudo,
#admin-conteudo,
#brasil-conteudo {
  position: relative;
  background: var(--surf);
  border-radius: 12px;
  padding: 24px;
  width: 100%;
  text-align: center;
}

#modal-conteudo,
#configuracoes-conteudo,
#admin-conteudo {
  max-width: 380px;
}

#modal-conteudo,
#admin-conteudo {
  max-height: 85vh;
  overflow-y: auto;
}

#brasil-conteudo {
  max-width: 720px;
  max-height: 85vh;
  overflow-y: auto;
}

/* Mapa do Brasil especificamente: modal maior pra os estados pequenos
   (ES, SE, AL, DF, RJ) ficarem visíveis o suficiente pra tocar. Em
   desktop chega perto de fullscreen (94vw). Em mobile aproveita a
   largura toda -- o padding do #modal-brasil já dá o respiro. */
#brasil-conteudo {
  max-width: min(94vw, 900px);
  max-height: 92vh;
}

#modal-conteudo h2,
#biblioteca-conteudo h2,
#configuracoes-conteudo h2,
#admin-conteudo h2,
#brasil-conteudo h2 {
  margin-top: 0;
  font-size: 1.1rem;
}

#btn-fechar-modal,
#btn-fechar-biblioteca,
#btn-fechar-configuracoes,
#btn-fechar-admin,
#btn-fechar-brasil {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--fraco);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 6px;
}

#btn-fechar-modal:hover,
#btn-fechar-biblioteca:hover,
#btn-fechar-configuracoes:hover,
#btn-fechar-admin:hover,
#btn-fechar-brasil:hover {
  color: var(--txt);
}

/* Mapa do Brasil (beta, opt-in em Configuracoes -> Experimental):
   contorno de cada estado, todos "em breve" (cinza + borrado) exceto
   o RJ (colorido, clicavel -- ja e o app principal). Ver
   abrirMapaBrasil/fecharMapaBrasil em js/script.js e
   tools/br-estados-to-svg.js pra como o SVG e gerado. */
#brasil-intro {
  color: var(--fraco);
  font-size: 0.85rem;
  margin: 0 0 12px;
}

/* O Brasil INTEIRO, sem arrastar.
   Havia aqui um `min-width: 520px` no SVG + `overflow-x: auto` no
   container: em celular isso obrigava a arrastar o mapa pros lados
   dentro de um modal, que é dos piores gestos possíveis. O motivo era
   real -- sem o zoom, RJ, SE, AL e DF viram alvos de 6 px, impossíveis
   de acertar com o dedo. A saída não é escolher um dos dois males: o
   mapa passa a ser SÓ leitura (cabe inteiro, situa a pessoa) e quem
   recebe o toque é a lista de cards embaixo, com alvos grandes. */
#brasil-mapa-container svg {
  width: 100%;
  height: auto;
  display: block;
  /* Teto de altura pra o mapa não empurrar a lista pra fora da tela em
     aparelho baixo -- é a lista que precisa estar à mão. */
  max-height: 42vh;
}

#brasil-mapa-container {
  border-radius: 12px;
  background: var(--bg);
  padding: 8px;
}

/* ---- Lista de estados (a navegação de verdade) ---- */
#brasil-grid {
  margin-top: 18px;
  text-align: left;
}

.brasil-grupo + .brasil-grupo {
  margin-top: 22px;
}

.brasil-grupo-titulo {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fraco);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Contagem discreta ao lado do título ("24") -- ajuda a entender que a
   lista longa lá embaixo é só "o resto do Brasil". */
.brasil-grupo-conta {
  font-weight: 600;
  letter-spacing: 0;
  opacity: 0.7;
}

.brasil-cards {
  display: grid;
  /* auto-fit + minmax: 1 coluna no celular estreito, 2 ou 3 conforme
     couber, sem media query. */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

/* Alvo grande de propósito: 52px de altura mínima passa folgado do
   mínimo recomendado de toque (44px), que é o problema que esta tela
   inteira existe pra resolver. */
#brasil-conteudo .brasil-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  background: var(--surf2) !important;
  border: 1px solid var(--linha) !important;
  color: var(--txt) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  text-align: left;
  width: 100% !important;
  margin: 0 !important;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.2s ease, background 0.2s ease;
}

#brasil-conteudo .brasil-card:active {
  transform: scale(0.98);
}

.brasil-card-ponto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.brasil-card-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.brasil-card-nome {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brasil-card-sub {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--fraco);
}

/* Liberado: verde, o único com brilho. */
#brasil-conteudo .brasil-card-liberado {
  border-color: rgba(43, 213, 118, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(43, 213, 118, 0.12), 0 4px 16px rgba(43, 213, 118, 0.1);
}

#brasil-conteudo .brasil-card-liberado .brasil-card-ponto {
  background: var(--verde);
}

#brasil-conteudo .brasil-card-liberado .brasil-card-sub {
  color: var(--verde);
}

/* Em desenvolvimento: âmbar. CLICÁVEL -- abre a prévia do mapa. */
#brasil-conteudo .brasil-card-dev {
  border-color: rgba(233, 185, 73, 0.45) !important;
}

#brasil-conteudo .brasil-card-dev .brasil-card-ponto {
  background: var(--ouro, #E9B949);
}

#brasil-conteudo .brasil-card-dev .brasil-card-sub {
  color: #E9B949;
}

/* Em breve: apagado, sem borda de cor. Continua tocável pra explicar
   por que não abre -- botão morto sem resposta deixa a pessoa achando
   que o app travou. */
#brasil-conteudo .brasil-card-breve {
  opacity: 0.5;
  background: transparent !important;
}

#brasil-conteudo .brasil-card-breve .brasil-card-ponto {
  background: var(--fraco);
}

#brasil-mapa-container .estado {
  stroke: var(--bg, #0F1216);
  stroke-width: 0.6;
}

#brasil-mapa-container .estado-bloqueado {
  fill: #262C35;
  filter: blur(2.5px);
  cursor: not-allowed;
}

#brasil-mapa-container .estado-liberado {
  fill: #2BD576;
  cursor: pointer;
  transition: fill 0.2s ease;
}

#brasil-mapa-container .estado-liberado:hover {
  fill: #1FA85C;
}

/* Estado em desenvolvimento (SP, no momento): visualmente distinto
   do liberado (verde) e do bloqueado (cinza borrado). Amarelo indica
   "chegou mas ainda cozinhando". Clicável -- abre o visualizador
   próprio do estado (ver abrirMapaSP em js/script.js). */
#brasil-mapa-container .estado-em-desenvolvimento {
  fill: #E9B949;
  cursor: pointer;
  transition: fill 0.2s ease;
}

#brasil-mapa-container .estado-em-desenvolvimento:hover {
  fill: #C99A2E;
}

/* Todos os estados são "clicáveis" agora (mesmo os bloqueados podem ser
   selecionados pra confirmar -- e aí sai o "chega em breve"). Isso
   melhora o alvo tátil dos estados pequenos, e o toque errado não abre
   nada por acidente porque o "Confirmar" é uma segunda etapa. */
#brasil-mapa-container .estado-bloqueado {
  cursor: pointer;
}

/* Estado selecionado no mapa (data-selecionado="true", ver
   selecionarEstadoNoMapaBrasil em js/script.js). Fica visualmente
   destacado com um contorno branco grosso e a mesma cor de fill do
   liberado, pra a pessoa ver claramente qual escolheu antes de
   apertar o "Confirmar". */
#brasil-mapa-container .estado[data-selecionado="true"] {
  stroke: #F2F5F7;
  stroke-width: 2;
  filter: none;
}

/* ============================================================
   Mapa estadual em TELA CHEIA (como o do RJ): pan/zoom próprio,
   nomes dos municípios aparecem ao dar zoom, mas é só visualização --
   tocar num município mostra um aviso, não abre raspadinha. Espelha o
   #mapa-viewport/#mapa-rj. Ver abrirMapaEstadoEmDesenvolvimento e
   inicializarPanZoomSP em js/script.js.
   ============================================================ */

/* Não é mais uma janela centralizada (foi tirado do grupo do
   #modal-brasil): agora é o próprio mapa ocupando a tela toda. */
#estado-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #191c22;
  touch-action: none;
  cursor: grab;
}

#estado-viewport.arrastando {
  cursor: grabbing;
}

#estado-viewport svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: center center;
}

/* Os municípios do SP herdam o cinza de ".municipio" (global), mas com
   a borda mais FINA e NÍTIDA: vector-effect não deixa a linha engrossar
   ao dar zoom (fica sempre ~0.5px na tela), então as divisas ficam
   precisas em qualquer aproximação -- diferente do RJ, onde a borda
   engrossa junto com o mapa. */
/* Convite de login no lugar da raspadinha (ver abrirModalRaspadinha).
   Quem não tem conta abre o município e lê tudo -- curiosidade, história
   completa e pontos turísticos --, mas raspar guarda progresso, e
   progresso sem conta se perderia. Ocupa o mesmo espaço do selo pra o
   popup não pular de tamanho ao entrar. */
.raspadinha-convite {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 190px;
  padding: 16px;
  border-radius: 16px;
  background: var(--surf2);
  border: 1px dashed var(--linha);
  text-align: center;
}

.raspadinha-convite-icone {
  font-size: 1.7rem;
  opacity: 0.75;
}

.raspadinha-convite p {
  margin: 0;
  max-width: 240px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--fraco);
}

.raspadinha-convite-btn {
  padding: 10px 22px;
  border: none;
  border-radius: 999px;
  background: var(--verde);
  color: var(--verde-tinta);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}

/* Aviso de "esta parte ainda não existe neste estado", usado por
   Conquistas, Rotas, Loja e Ranking (ver avisarConteudoEmDesenvolvimento
   em js/script.js). Um só componente pras quatro telas. */
.conteudo-em-dev {
  text-align: center;
  padding: 40px 24px;
  color: var(--fraco);
}

.conteudo-em-dev-icone {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 12px;
}

.conteudo-em-dev h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  color: var(--txt);
}

.conteudo-em-dev p {
  margin: 0 auto;
  max-width: 320px;
  font-size: 0.88rem;
  line-height: 1.5;
}

/* Qualificado e com !important pelo mesmo motivo dos outros componentes
   novos: a "CAMADA UI MODERNA" no fim deste arquivo força
   background: var(--surf2) em todo button de painel. */
#configuracoes-conteudo .conteudo-em-dev-btn,
.conteudo-em-dev-btn {
  margin-top: 18px;
  padding: 10px 20px !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--verde) !important;
  border: 1px solid var(--verde) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  width: auto !important;
}

/* ---- Estado ainda não publicado (MG, SP) ----
   O app INTEIRO continua na tela: barra de topo, menu, botões. Só o que
   depende de conteúdo que ainda não existe pro estado é que sai de
   cena. Ver aplicarLimitesDoEstado em js/script.js.

   Modos do mapa (hoje só o Modo Clima) some porque o clima é publicado
   município a município, e só os 92 do RJ têm (ver
   tools/apps-script-clima.gs). O Modo Viagem NÃO entra aqui de
   propósito: é GPS e odômetro, funciona em qualquer lugar do Brasil --
   e é justamente quem está viajando pra Minas que vai querer usar. */
body.estado-limitado #btn-modos {
  display: none;
}

/* A barra de progresso vira um traço apagado em vez de fingir 0 de 92
   -- o número do Rio não vale pra Minas. */
body.estado-limitado #topo-prog-preench {
  background: var(--linha);
}

/* ---- Nível de detalhe: só uma das duas camadas por vez ----
   O SVG traz o mesmo estado duas vezes (ver EPS_LONGE em
   tools/geojson-municipios-to-svg.js): #mun-simples, com 1/7 dos pontos,
   e #mun-detalhe, a malha cheia. De longe o detalhe não é visível --
   no zoom 1 um pixel vale ~1 unidade do desenho -- mas o navegador
   rasterizava os 356 mil pontos assim mesmo, e era o que travava a
   visão geral.

   `display: none` (e não opacity/visibility) de propósito: só ele faz o
   navegador PULAR a subárvore inteira. É o ponto do exercício. */
#estado-viewport svg #mun-detalhe {
  display: none;
}

#estado-viewport svg.detalhe-perto #mun-detalhe {
  display: block;
}

#estado-viewport svg.detalhe-perto #mun-simples {
  display: none;
}

/* ---- Divisas que AFINAM ao aproximar (igual ao RJ) ----

   Tinha `vector-effect: non-scaling-stroke` aqui, e era CÓDIGO MORTO:
   o non-scaling-stroke só compensa transform de DENTRO do sistema de
   coordenadas do SVG, e o zoom daqui é um `transform: scale()` do CSS
   aplicado no <svg> por fora -- ele amplia o desenho já rasterizado,
   traço junto. Resultado: no zoom fundo a divisa virava uma tarja
   grossa que engolia os municípios pequenos.

   A solução é a mesma que o RJ já usa: dividir pelo `--zoom`, que o
   aplicarTransform escreve a cada movimento. Como a espessura está em
   unidades do desenho, dividir pelo zoom faz o produto final ficar
   CONSTANTE na tela. E o `--traco-base`, que desce a cada faixa de
   aproximação, deixa a linha de fato mais FINA de perto -- abrindo
   espaço pro detalhe da divisa, que agora existe (qualidade máxima). */
#estado-viewport svg .municipio {
  stroke-width: calc(var(--traco-base, 3.2) * 1px / var(--zoom, 1));
}

#estado-viewport svg.zoom-n1 .municipio {
  --traco-base: 2.4;
}
#estado-viewport svg.zoom-n2 .municipio {
  --traco-base: 1.7;
}
#estado-viewport svg.zoom-n3 .municipio {
  --traco-base: 1.2;
}
#estado-viewport svg.zoom-n4 .municipio {
  --traco-base: 0.85;
}

/* Nome do município com tamanho FIXO NA TELA -- mesma conta do RJ. A
   base por município vem do gerador em `--rotulo-base` (proporcional ao
   tamanho dele); o zoom vem do JS. Sem isso a letra era ampliada junto
   com o mapa e um nome só tomava a tela inteira no zoom fundo.

   O `clamp` existe porque a base é proporcional ao TAMANHO do município
   (1.2 a 4): com a letra fixa na tela, os pequenos ficavam em 1,2 px,
   ilegíveis pra sempre. O clamp mantém a diferença entre grande e
   pequeno, mas dentro de uma faixa que dá pra ler (~8 a 13 px).

   Rótulo de região e contorno de região NÃO entram aqui de propósito:
   os dois só existem no modo afastado (zoom < 2.4), onde crescer com o
   mapa não incomoda -- e é assim que já estavam bons. */
#estado-viewport svg .rotulo-municipio {
  font-size: calc(clamp(2.4, var(--rotulo-base, 2.5), 9) * 7px / var(--zoom, 1));
  stroke-width: calc(0.6px * 7 / var(--zoom, 1));
}

/* ---- Cada nome aparece no zoom em que ELE cabe ----
   O nível vem do gerador (ver estiloDoRotulo em
   tools/geojson-municipios-to-svg.js): 0 é quem cabe já na visão geral,
   4 é quem só cabe bem de perto. Antes todos surgiam juntos no zoom 7,
   e 86,8% deles já caberiam antes disso -- Altamira, que cabe desde o
   zoom 0,45, ficava escondido por 15x mais zoom do que precisava.
   O nome fica escondido até o <svg> ganhar a classe do seu nível. */
#estado-viewport svg .rotulo-municipio {
  display: none;
}

#estado-viewport svg.rot-n0 .rotulo-municipio[data-nivel="0"],
#estado-viewport svg.rot-n1 .rotulo-municipio[data-nivel="1"],
#estado-viewport svg.rot-n2 .rotulo-municipio[data-nivel="2"],
#estado-viewport svg.rot-n3 .rotulo-municipio[data-nivel="3"],
#estado-viewport svg.rot-n4 .rotulo-municipio[data-nivel="4"] {
  display: block;
}

/* ---- Modo regiões (mapa afastado) ----
   Com o mapa longe, em vez de 645 municípios cinza a gente mostra as 15
   mesorregiões, cada uma de uma cor, com o nome no meio. Some a borda de
   cada município (os da mesma região viram um bloco só) e aparece o nome
   da região. Ver atualizarModoDeVisualizacaoSP em js/script.js. */
/* No modo regiões do SP, esconde as bordas dos municípios (fica o
   preenchimento cinza contínuo) e deixa só os contornos de região por
   cima -- igual ao RJ. */
#estado-viewport svg.modo-regioes .municipio {
  stroke: none;
}

/* Rótulo de região (mesorregião no SP): escondido por padrão, aparece
   só no modo regiões (mapa afastado). Vale pro SP E pro RJ -- texto
   claro com contorninho escuro pra ler sobre o mapa. No RJ os rótulos
   são injetados por JS (ver renderizarRotulosRegioes), no SP vêm do SVG.
   Os municípios ficam CINZA (herdam ".municipio"); a cor no mapa é
   reservada pro progresso, então aqui não se pinta por região. */
#estado-viewport svg .rotulo-regiao,
svg#mapa-rj .rotulo-regiao {
  display: none;
  fill: #F2F5F7;
  font-weight: 700;
  font-size: 8px;
  text-anchor: middle;
  dominant-baseline: middle;
  paint-order: stroke;
  stroke: rgba(15, 18, 22, 0.8);
  stroke-width: 1.6px;
  user-select: none;
  pointer-events: none;
}

#estado-viewport svg.modo-regioes .rotulo-regiao,
svg#mapa-rj.modo-regioes .rotulo-regiao {
  display: block;
}

/* Aviso pequeno de "em desenvolvimento" no topo do mapa estadual. */
/* Abaixo da barra de topo, não por cima dela. Quando isto vivia dentro
   de um modal em tela cheia não havia barra nenhuma pra desviar; agora
   há, e o aviso nascia colado no topo, em cima do avatar e da busca. */
#estado-popup-dev {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 112px);
  left: 50%;
  transform: translateX(-50%);
  /* Acima da barra de topo (50) e da barra inferior (90), abaixo dos
     modais (100). Estava em 20 e sumia ATRAS da UI: quando isto vivia
     dentro de um modal em tela cheia nao havia UI nenhuma por cima. */
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(92vw, 420px);
  background: rgba(23, 27, 33, 0.95);
  color: #E9B949;
  border: 1px solid rgba(233, 185, 73, 0.5);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.82rem;
  line-height: 1.3;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

#estado-popup-dev strong {
  color: #F2C94C;
}

#btn-estado-popup-fechar {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--fraco);
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
  padding: 2px 4px;
}

#btn-estado-popup-fechar:hover {
  color: var(--txt);
}

/* Botão flutuante pra abrir o mapa do Brasil (trocar de estado / voltar
   pro RJ). Fica no canto, como um controle de mapa. */
/* Aviso flutuante ao tocar num município do SP. */
/* ---- Convite pra baixar o mapa do estado ----
   Aparece POR CIMA do viewport vazio quando o mapa ainda não está no
   aparelho. Cobre a tela toda de propósito: sem o mapa não há mais
   nada pra fazer aqui, e o 🇧🇷 continua acessível por cima (z-index
   maior). Ver abrirMapaEstadoEmDesenvolvimento em js/script.js. */
#estado-baixar {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
}

#estado-baixar.oculto {
  display: none;
}

#estado-baixar-caixa {
  max-width: 340px;
  text-align: center;
}

#estado-baixar-icone svg {
  width: 40px;
  height: 40px;
  color: var(--verde);
  margin-bottom: 14px;
}

#estado-baixar-titulo {
  margin: 0 0 8px;
  font-size: 1.15rem;
  color: var(--txt);
}

#estado-baixar-texto {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--fraco);
}

#estado-baixar-barra {
  height: 6px;
  border-radius: 999px;
  background: var(--linha);
  overflow: hidden;
  margin: 16px 0 0;
}

#estado-baixar-barra.oculto {
  display: none;
}

#estado-baixar-preench {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--verde);
  transition: width 0.2s ease;
}

/* Sem Content-Length não dá pra saber a fração -- a barra vira uma
   faixa que corre, em vez de uma porcentagem inventada. */
#estado-baixar-barra.indeterminada #estado-baixar-preench {
  width: 35%;
  transition: none;
  animation: correr-barra 1.1s ease-in-out infinite;
}

@keyframes correr-barra {
  0% { margin-left: -35%; }
  100% { margin-left: 100%; }
}

#btn-estado-baixar {
  margin-top: 18px;
  padding: 12px 28px;
  border: none;
  border-radius: 999px;
  background: var(--verde);
  color: var(--verde-tinta);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

#btn-estado-baixar[disabled] {
  opacity: 0.6;
  cursor: default;
}

#estado-toast {
  position: fixed;
  /* Pousa ACIMA do botao de Modo Viagem, nao em cima dele.
     Duas armadilhas aqui, nesta ordem: 24px punha o toast atras da
     barra inferior (~63px); 80px o tirava de la mas o jogava em cima
     do FAB verde do Modo Viagem, tapando a acao primaria do mapa.
     A conta sai do proprio FAB: ele fica a 78px do rodape e tem 62px
     de altura, entao o topo dele esta em 140px -- mexeu naqueles dois
     numeros, mexa neste. */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 152px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 95;
  max-width: min(88vw, 360px);
  background: rgba(23, 27, 33, 0.96);
  color: var(--txt);
  border: 1px solid rgba(233, 185, 73, 0.4);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.85rem;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  transition: opacity 0.2s ease;
}

#brasil-mapa-container .rotulo-estado {
  font-size: 11px;
  font-weight: 700;
  fill: #F2F5F7;
  text-anchor: middle;
  pointer-events: none;
}

#brasil-status {
  min-height: 1.2em;
  color: #E9B949;
  font-size: 0.85rem;
  margin: 10px 0 0;
}

/* Reaproveitável em qualquer tela com conteúdo "em breve" (ver
   abrirColaborar em js/script.js) -- reusa o mesmo PIX do botão
   "🤝 Colaborar" do feedback, só com um texto convidando a ajudar a
   acelerar o que ainda não chegou. */
.btn-colaborar-em-breve {
  display: block;
  width: 100%;
  background: rgba(233, 185, 73, 0.15);
  color: #E9B949;
  border: 1px solid rgba(233, 185, 73, 0.4);
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 14px 0 0;
}

.btn-colaborar-em-breve:hover {
  background: rgba(233, 185, 73, 0.25);
}

/* =========================================================
   Comunidade Desbrava (rede social): painel lateral DIREITO, ao
   contrário de todos os outros modais (centralizados) -- por isso
   usa justify-content:flex-end em vez do padrão dos outros popups.
   ========================================================= */
.icone-botao-topo {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: block;
}

#modal-social {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 22, 0.85);
  z-index: 100;
  display: flex;
  justify-content: flex-end;
}

#modal-social.oculto {
  display: none;
}

#social-conteudo {
  position: relative;
  background: var(--surf);
  width: 100%;
  max-width: 420px;
  height: 100%;
  overflow-y: auto;
  padding: 24px;
  text-align: left;
}

#social-conteudo h2 {
  margin: 0 0 12px;
  font-size: 1.1rem;
}

#btn-fechar-social {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--fraco);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 6px;
}

#btn-fechar-social:hover {
  color: var(--txt);
}

#social-filtro-municipio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 0.85rem;
}

#social-filtro-municipio.oculto {
  display: none;
}

#btn-limpar-filtro-municipio {
  background: transparent;
  border: none;
  color: #2BD576;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0;
}

/* Tabs minimalistas (estilo Threads/Instagram): sem fundo, texto
   cinza inativo, branco + risco verde embaixo quando ativo. */
#social-abas {
  display: flex;
  gap: 24px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.social-aba {
  flex: none;
  background: transparent;
  color: var(--fraco);
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 10px 2px;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 600;
}

.social-aba-ativa {
  background: transparent;
  color: var(--txt);
  border-bottom-color: var(--verde);
}

/* FAB (Floating Action Button): circular, fixo no canto inferior
   direito do painel -- substitui o antigo botão "Postar uma foto" em
   bloco cheio no topo do feed. */
#btn-abrir-criar-post {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 18px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  z-index: 10;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--verde);
  color: #0F1216;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(43, 213, 118, 0.4);
  margin-bottom: 0;
}

#btn-abrir-criar-post svg {
  width: 26px;
  height: 26px;
}

#btn-abrir-criar-post:hover {
  background: #1FA85C;
}

#btn-abrir-criar-post:active {
  transform: scale(0.94);
}







#social-marcar-pessoas {
  display: flex;
  gap: 6px;
}

#social-marcar-pessoas input {
  flex: 1;
}

#social-marcar-pessoas button {
  background: var(--surf2);
  color: var(--txt);
  border: none;
  border-radius: 8px;
  padding: 0 12px;
  cursor: pointer;
  font-size: 0.8rem;
  white-space: nowrap;
}

#lista-pessoas-marcadas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.chip-pessoa-marcada {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surf2);
  color: var(--txt);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.78rem;
}

.chip-pessoa-marcada button {
  background: transparent;
  border: none;
  color: var(--fraco);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0;
}

#btn-publicar-post {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: #2BD576;
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 14px;
}

#btn-publicar-post:hover {
  background: #1FA85C;
}

#btn-publicar-post:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Feed estilo Instagram/Threads: sem gap grande entre posts, a
   separação vira só a divisória fina de .post-card (border-bottom) --
   ver mais abaixo (#social-feed .post-card). */
#social-feed {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.post-card {
  overflow: hidden;
}

/* Cabeçalho estilo rede social: avatar + nome/local (empilhados) +
   data (extrema direita) + "⋯". Nome e localização ficam juntos em
   .post-ident (coluna); a data é irmã, não faz parte do bloco de
   identidade, por isso o flex:1 do .post-ident empurra ela sozinha
   pra ponta direita. */
.post-topo {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
}
.post-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
}
.post-ident {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.post-card-autor {
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  color: var(--txt);
}
.post-card-municipio {
  display: block;
  background: none;
  border: none;
  color: var(--fraco);
  padding: 0;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}
.post-tempo {
  flex: none;
  color: var(--fraco);
  font-size: 0.75rem;
  white-space: nowrap;
  padding-top: 2px;
}

/* ---- Foto do post: espaço reservado + carregando ----
   Enquanto `carregando` está na moldura, ela tem altura própria
   (4:5, proporção de foto de celular em pé) e segura o layout. Quando
   a foto chega, a classe sai, a altura passa a ser a da imagem real e
   ela entra com fade. Sem isso o feed pulava a cada foto que abria. */
.post-foto-wrap {
  position: relative;
  display: block;
  width: 100%;
  background: var(--surf2);
}

.post-foto-wrap.carregando {
  aspect-ratio: 4 / 5;
  max-height: 460px;
}

.post-card-foto {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  background: var(--surf2);
  display: block;
  opacity: 1;
  transition: opacity 0.35s ease;
}

.post-foto-wrap.carregando .post-card-foto {
  opacity: 0;
}

.post-foto-carregando {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  /* Um degradê diagonal em vez de cinza chapado: dá profundidade e
     combina com o resto do app sem chamar mais atenção que as fotos. */
  background: linear-gradient(135deg, var(--surf2) 0%, var(--surf) 55%, var(--surf2) 100%);
}

.post-foto-wrap:not(.carregando) .post-foto-carregando {
  display: none;
}

/* O brilho que atravessa a moldura -- é ele que diz "está vindo", em
   vez de parecer um buraco parado. */
.post-foto-brilho {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 35%,
    color-mix(in srgb, var(--txt) 8%, transparent) 50%,
    transparent 65%
  );
  transform: translateX(-100%);
  animation: post-foto-varredura 1.6s ease-in-out infinite;
}

@keyframes post-foto-varredura {
  to {
    transform: translateX(100%);
  }
}

.post-foto-marca {
  width: 54px;
  height: 54px;
  fill: none;
  stroke: var(--verde);
  stroke-width: 2;
  stroke-linejoin: round;
  opacity: 0.35;
  animation: post-foto-pulso 1.6s ease-in-out infinite;
}

.post-foto-marca polygon {
  fill: var(--verde);
  stroke: none;
}

@keyframes post-foto-pulso {
  0%,
  100% {
    opacity: 0.22;
    transform: scale(0.94);
  }
  50% {
    opacity: 0.5;
    transform: scale(1);
  }
}

/* Quem pediu menos movimento fica só com o degradê parado. */
@media (prefers-reduced-motion: reduce) {
  .post-foto-brilho,
  .post-foto-marca {
    animation: none;
  }
  .post-card-foto {
    transition: none;
  }
}

.post-card-acoes {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 11px 14px 6px;
}
.post-card-acoes button {
  background: transparent;
  border: none;
  color: var(--txt);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}
.post-card-curtir.curtido { color: var(--verde); }
.post-card-compartilhar { margin-left: auto; }

/* Ícones SVG dos botões da comunidade (curtir/comentar/compartilhar):
   contorno verde e vazio por padrão; o coração vira verde CHEIO ao
   curtir, com uma animação de "pop". Vale pros posts E pras sugestões.
   Ver ICONE_CORACAO em js/script.js. */
.ico-social {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  transition: transform 0.12s ease;
  overflow: visible;
}
.ico-social path,
.ico-social polyline,
.ico-social line {
  fill: none;
  stroke: var(--verde);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Contorno branco sutil pra o ícone se destacar no fundo escuro. */
.ico-social {
  filter: drop-shadow(0 0 0.7px rgba(255, 255, 255, 0.9));
}
/* Coração CHEIO (verde) quando curtido. */
.post-card-curtir.curtido .ico-coracao path,
.sugestao-card-curtir.curtido .ico-coracao path {
  fill: var(--verde);
}
/* "Pop" só no ato de curtir (classe .pop adicionada por JS, ver
   aoCurtirPost/aoCurtirSugestao) -- não toca ao só renderizar um post
   que já estava curtido. */
.ico-coracao.pop {
  animation: coracao-pop 0.42s ease;
}
@keyframes coracao-pop {
  0% { transform: scale(1); }
  30% { transform: scale(1.4); }
  55% { transform: scale(0.86); }
  100% { transform: scale(1); }
}
/* Leve "tap" ao apertar os outros botões sociais. */
.post-card-acoes button:active .ico-social,
.sugestao-card-acoes button:active .ico-social {
  transform: scale(0.85);
}

/* "⋯" no canto do cabeçalho (só do autor) */
.post-card-excluir {
  background: none !important;
  border: none !important;
  color: var(--fraco) !important;
  font-size: 1.3rem !important;
  padding: 0 4px !important;
  cursor: pointer;
  flex: none;
  align-self: flex-start;
}

.post-card-legenda {
  padding: 4px 14px 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--txt);
}
.post-card-legenda b { font-weight: 600; }
.post-card-legenda:empty { display: none; }

/* Menções "@algo" -- na legenda (texto livre, ver destacarMencoes em
   js/script.js) e nas pessoas marcadas (estruturado, com uid -- por
   isso é clicável e abre o perfil, ver renderizarCardPost). Mesmo
   visual pros dois casos, só a segunda é interativa de verdade. */
.post-mencao {
  color: var(--verde);
  font-weight: 500;
}
.post-mencao-clicavel {
  cursor: pointer;
}
.post-mencao-clicavel:hover {
  text-decoration: underline;
}

.post-card-marcados {
  padding: 4px 14px 0;
  font-size: 0.76rem;
  color: var(--fraco);
}

.post-ver-comentarios {
  display: block;
  background: none;
  border: none;
  color: var(--fraco);
  font-size: 0.78rem;
  padding: 6px 14px 0;
  cursor: pointer;
  text-align: left;
}

.post-card-comentarios {
  padding: 0 12px 12px;
  border-top: 1px solid var(--linha);
}

.post-card-comentarios.oculto {
  display: none;
}

.comentario-linha {
  font-size: 0.8rem;
  padding: 6px 0;
  color: #E4E9EE;
}

.comentario-linha b {
  color: var(--txt);
}

/* Ações do comentário (✕ do autor, 🚩 dos demais): discretas,
   encostadas à direita da linha, ganhando presença só no hover/foco.
   Nenhuma das duas pode competir com ler o comentário -- mesma lógica
   do ponto turístico. */
.comentario-acao {
  float: right;
  background: transparent;
  border: none;
  /* O botão vem ANTES do texto no DOM (ver adicionarAcaoDoComentario),
     então a margem que afasta do texto é a da esquerda. */
  margin-left: 8px;
  padding: 0;
  font-size: 0.72rem;
  line-height: 1.2;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.15s ease;
}
.comentario-acao:hover,
.comentario-acao:focus-visible {
  opacity: 0.95;
}
.comentario-acao:disabled {
  opacity: 0.2;
  cursor: default;
}
/* O ✕ é texto, não emoji: sem cor própria ele sairia com a cor do
   parágrafo e pareceria parte do comentário. */
.comentario-apagar {
  color: var(--fraco);
}

.post-card-novo-comentario {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.post-card-novo-comentario input {
  flex: 1;
  background: var(--surf);
  border: 1px solid var(--linha);
  color: var(--txt);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.8rem;
}

.post-card-novo-comentario button {
  background: #2BD576;
  color: white;
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 0.8rem;
}

#btn-social-carregar-mais {
  display: block;
  width: 100%;
  background: var(--surf2);
  color: var(--txt);
  border: none;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  margin-top: 12px;
}

#btn-social-carregar-mais.oculto {
  display: none;
}

/* Grade de ações do popup de município: Compartilhar / Filtro da
   Comunidade (antigo "@") / Sugestões -- 3 botões discretos, mesmo
   estilo, em vez de blocos verdes gigantes empilhados. */
#modal-acoes-grid {
  display: flex;
  gap: 8px;
  margin: 4px 0 14px;
}

.modal-acao-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--surf2);
  color: var(--fraco);
  border: none;
  border-radius: 12px;
  padding: 10px 4px;
  cursor: pointer;
  text-align: center;
}

.modal-acao-btn:hover {
  background: #262C36;
  color: var(--txt);
}

.modal-acao-icone {
  font-size: 1.15rem;
  line-height: 1;
}

.modal-acao-label {
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
}

/* ============================================================
   Sugestões da Comunidade -- mesmo painel deslizante da Comunidade
   Desbrava (#modal-social), só que com um seletor de município (dá
   pra trocar de "comunidade" sem fechar o modal) e filtro de
   categoria.
   ============================================================ */
#modal-sugestoes-comunidade {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 22, 0.85);
  z-index: 100;
  display: flex;
  justify-content: flex-end;
}

#modal-sugestoes-comunidade.oculto {
  display: none;
}

#sugestoes-comunidade-conteudo {
  position: relative;
  background: var(--surf);
  width: 100%;
  max-width: 420px;
  height: 100%;
  overflow-y: auto;
  padding: 24px;
  text-align: left;
}

#sugestoes-comunidade-conteudo h2 {
  margin: 0 0 12px;
  font-size: 1.1rem;
}

#btn-fechar-sugestoes-comunidade {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--fraco);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 6px;
}

#btn-fechar-sugestoes-comunidade:hover {
  color: var(--txt);
}

#sugestoes-comunidade-conteudo label {
  display: block;
  color: var(--fraco);
  font-size: 0.78rem;
  margin: 10px 0 4px;
}

#sugestoes-comunidade-conteudo > select,

#btn-abrir-nova-sugestao {
  display: block;
  width: 100%;
  background: #2BD576;
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 14px 0;
}

#btn-abrir-nova-sugestao:hover {
  background: #1FA85C;
}



#preview-foto-sugestao {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 8px;
  margin-top: 8px;
}

#preview-foto-sugestao.oculto {
  display: none;
}

#label-anonimo-sugestao {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin-top: 12px !important;
  cursor: pointer;
}

#sugestao-form-erro {
  color: #F08A94;
  font-size: 0.8rem;
  margin: 8px 0 0;
}

#btn-publicar-sugestao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: #2BD576;
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 14px;
}

#btn-publicar-sugestao:hover {
  background: #1FA85C;
}

#btn-publicar-sugestao:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

#sugestao-form-status {
  font-size: 0.8rem;
  color: var(--fraco);
  margin-top: 8px;
}

#sugestoes-lista {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.sugestao-card {
  background: var(--bg);
  border-radius: 10px;
  overflow: hidden;
  padding: 12px;
}

.sugestao-card-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.78rem;
  margin-bottom: 6px;
}

.sugestao-card-categoria {
  background: rgba(43, 213, 118, 0.2);
  color: #86E8B0;
  border-radius: 999px;
  padding: 3px 10px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sugestao-card-autor {
  color: var(--fraco);
  white-space: nowrap;
}

.sugestao-card-titulo {
  margin: 0 0 6px;
  font-size: 1rem;
}

.sugestao-card-foto {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 8px;
}

.sugestao-card-descricao {
  font-size: 0.85rem;
  color: #E4E9EE;
  margin: 0 0 8px;
}

.sugestao-card-maps {
  display: inline-block;
  color: #2BD576;
  font-size: 0.8rem;
  text-decoration: none;
  margin-bottom: 8px;
}

.sugestao-card-maps:hover {
  text-decoration: underline;
}

.sugestao-card-acoes {
  display: flex;
  gap: 14px;
  padding-top: 4px;
  border-top: 1px solid var(--linha);
}

.sugestao-card-acoes button {
  background: transparent;
  border: none;
  color: var(--fraco);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 8px 0 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.sugestao-card-acoes button:hover {
  color: var(--txt);
}

.sugestao-card-curtir.curtido {
  color: #F0616D;
}

.sugestao-card-excluir {
  margin-left: auto;
  color: #F0616D !important;
}

.sugestao-card-comentarios {
  padding-top: 8px;
}

.sugestao-card-comentarios.oculto {
  display: none;
}

.sugestao-card-novo-comentario {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.sugestao-card-novo-comentario input {
  flex: 1;
  background: var(--surf);
  border: 1px solid var(--linha);
  color: var(--txt);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.8rem;
}

.sugestao-card-novo-comentario button {
  background: #2BD576;
  color: white;
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 0.8rem;
}

#modal-instrucao {
  color: var(--fraco);
  font-size: 0.85rem;
  margin-bottom: 0;
}

/* Status do município: pill centralizado -- cinza neutro enquanto
   raspa/confirma, verde quando verificado, âmbar quando raspado mas
   ainda não verificado (ver definirStatusMunicipio em js/script.js). */
#modal-status {
  display: inline-block;
  color: var(--fraco);
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 999px;
  margin: -2px auto 12px;
}

#modal-status:empty {
  display: none;
  margin: 0;
}

#modal-status.modal-status-ok {
  color: var(--verde, #2BD576);
  background: rgba(43, 213, 118, 0.15);
}

#modal-status.modal-status-alerta {
  color: #F0C36D;
  background: rgba(240, 195, 109, 0.15);
}

#modal-selo-estatistica,
#regiao-selo-estatistica {
  color: var(--fraco);
  font-size: 0.78rem;
  margin: 0 0 10px;
}

/* ---- Busca de município/ponto turístico ---- */

#btn-buscar-local {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 16px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  z-index: 50;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(23, 27, 33, 0.9);
  backdrop-filter: blur(6px);
  color: var(--txt);
  font-size: 1.3rem;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

#btn-buscar-local:hover {
  background: var(--surf2);
}

/* ---- "Onde estou": marcador de localização atual ---- */

#btn-onde-estou {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 16px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
  z-index: 50;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(23, 27, 33, 0.9);
  backdrop-filter: blur(6px);
  color: var(--txt);
  font-size: 1.3rem;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

#btn-onde-estou:hover {
  background: var(--surf2);
}

#btn-onde-estou:disabled {
  opacity: 0.6;
  cursor: wait;
}

#btn-onde-estou.buscando {
  animation: girar-raios 1s linear infinite;
}

/* ---- Modo Viagem: FAB primário, acima da bússola -- é a ação
   principal do app, por isso fundo sólido verde + ícone branco +
   sombra própria, maior que os botões secundários (busca/bússola) e
   com mais respiro entre os dois pra não parecerem um botão só
   dividido ao meio. ---- */

/* O Modo Viagem DEIXOU de ser botão flutuante no canto direito: virou
   um FAB centrado logo acima da barra inferior (ver "BOTÕES FLUTUANTES
   DO MAPA" no fim deste arquivo). Aquele canto já tinha a bússola, o
   Modo Clima e a coluna lateral -- botão demais no mesmo lugar.

   (houve uma versão intermediária em que ele era uma "gota" recortada
   na própria barra; o desenho não ficou bom e foi substituído pelo FAB)

   Tudo que posicionava/desenhava o botão saiu daqui. O que ficou é só
   o estado escondido, que continua valendo em qualquer lugar.

   O :hover antigo aplicava `transform: scale(1.05)` puro; dentro da
   gota o botão usa translateX(-50%) pra centralizar, e um transform
   sem ele jogava o botão pra direita ao passar o mouse. */
#btn-modo-viagem.oculto {
  display: none;
}

/* ---- Confirmar Modo Viagem ---- */

#modal-confirmar-viagem {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: rgba(15, 18, 22, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#modal-confirmar-viagem.oculto {
  display: none;
}

#confirmar-viagem-conteudo {
  position: relative;
  width: 100%;
  max-width: 360px;
  background: var(--surf);
  border: 2px solid #2FBE6B;
  border-radius: 12px;
  padding: 24px;
  text-align: left;
}

#confirmar-viagem-conteudo h2 {
  margin: 0 0 10px;
  font-size: 1.1rem;
}

#confirmar-viagem-conteudo p {
  color: var(--fraco);
  font-size: 0.85rem;
  margin: 0 0 16px;
  line-height: 1.5;
}

#btn-fechar-confirmar-viagem {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--fraco);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 6px;
}

#btn-confirmar-iniciar-viagem {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #2FBE6B;
  color: #0F1216;
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
}

#btn-confirmar-iniciar-viagem:hover {
  background: #29A75E;
}

#btn-cancelar-iniciar-viagem {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: transparent;
  color: var(--fraco);
  border: none;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 0.85rem;
  margin-top: 6px;
}

#btn-cancelar-iniciar-viagem:hover {
  color: var(--txt);
}

/* ---- Lista de municípios pendentes de raspagem (Modo Viagem) ---- */

#modal-municipios-pendentes {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: rgba(15, 18, 22, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#modal-municipios-pendentes.oculto {
  display: none;
}

#municipios-pendentes-conteudo {
  position: relative;
  background: var(--surf);
  border-radius: 12px;
  padding: 24px;
  max-width: 440px;
  width: 100%;
  max-height: 75vh;
  overflow-y: auto;
  text-align: left;
}

#municipios-pendentes-conteudo h2 {
  margin: 0 0 10px;
  font-size: 1.1rem;
}

#municipios-pendentes-conteudo p {
  color: var(--fraco);
  font-size: 0.85rem;
  margin: 0 0 12px;
}

#btn-fechar-municipios-pendentes {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--fraco);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 6px;
}

#municipios-pendentes-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.municipio-pendente-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: none;
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--txt);
  font-size: 0.9rem;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.municipio-pendente-item:hover {
  background: var(--surf2);
}

/* ---- Resumo da viagem (Modo Viagem, recurso PRO) ---- */

#modal-resumo-viagem {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: rgba(15, 18, 22, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#modal-resumo-viagem.oculto {
  display: none;
}

#resumo-viagem-conteudo {
  position: relative;
  background: var(--surf);
  border: 2px solid #2FBE6B;
  border-radius: 12px;
  padding: 24px;
  max-width: 400px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  text-align: center;
}

#resumo-viagem-conteudo h2 {
  margin: 0 0 16px;
  font-size: 1.15rem;
}

#resumo-viagem-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.resumo-viagem-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg);
  border-radius: 10px;
  padding: 12px 6px;
}

.resumo-viagem-stat span {
  font-size: 1.15rem;
  font-weight: 700;
  color: #2FBE6B;
}

.resumo-viagem-stat small {
  color: var(--fraco);
  font-size: 0.7rem;
}

#resumo-viagem-odometro-aviso {
  color: var(--fraco);
  font-size: 0.8rem;
  margin: 0 0 14px;
}

#resumo-viagem-odometro-aviso.oculto {
  display: none;
}

#resumo-viagem-conteudo button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 11px 14px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 8px;
}

#btn-resumo-salvar-rota,
#btn-resumo-compartilhar {
  background: #2FBE6B;
  color: #0F1216;
}

#btn-resumo-salvar-rota:hover,
#btn-resumo-compartilhar:hover {
  background: #29A75E;
}

#btn-resumo-salvar-rota.oculto {
  display: none;
}

#btn-resumo-fechar-viagem {
  background: transparent;
  color: var(--fraco);
  font-weight: 500;
}

#btn-resumo-fechar-viagem:hover {
  color: var(--txt);
}

/* ---- Compartilhar viagem (imagem via canvas) ---- */

#modal-compartilhar-viagem {
  position: fixed;
  inset: 0;
  z-index: 230;
  background: rgba(15, 18, 22, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#modal-compartilhar-viagem.oculto {
  display: none;
}

#compartilhar-viagem-conteudo {
  position: relative;
  background: var(--surf);
  border-radius: 12px;
  padding: 24px;
  max-width: 420px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  text-align: center;
}

#compartilhar-viagem-conteudo h2 {
  margin: 0 0 14px;
  font-size: 1.1rem;
}

#compartilhar-viagem-opcoes {
  display: flex;
  gap: 6px;
  background: var(--bg);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 14px;
}

.cv-opcao {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--fraco);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.cv-opcao-ativa {
  background: #2FBE6B;
  color: #0F1216;
}

#canvas-compartilhar-viagem {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  background: var(--bg);
  margin-bottom: 12px;
}

#compartilhar-viagem-erro {
  color: #F08A94;
  font-size: 0.8rem;
  margin: 0 0 10px;
}

#compartilhar-viagem-erro.oculto {
  display: none;
}

#compartilhar-viagem-acoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#compartilhar-viagem-acoes button {
  border: none;
  border-radius: 8px;
  padding: 11px 14px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
}

#btn-cv-postar-comunidade {
  background: #2FBE6B;
  color: #0F1216;
}

#btn-cv-postar-comunidade:hover {
  background: #29A75E;
}

#btn-cv-compartilhar-externo {
  background: var(--bg);
  color: var(--txt);
  border: 1px solid var(--linha) !important;
}

#btn-cv-compartilhar-externo:hover {
  background: var(--surf2);
}

/* ---- Garagem Virtual (recurso PRO) ---- */

#modal-garagem {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: rgba(15, 18, 22, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#modal-garagem.oculto {
  display: none;
}

#garagem-conteudo {
  position: relative;
  background: var(--surf);
  border-radius: 12px;
  padding: 24px;
  max-width: 380px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  text-align: left;
}

#garagem-conteudo h2 {
  margin: 0 0 10px;
  font-size: 1.1rem;
}

#garagem-conteudo label {
  display: block;
  font-size: 0.8rem;
  color: var(--fraco);
  margin: 12px 0 4px;
}

#garagem-conteudo select,
#garagem-conteudo input {
  width: 100%;
  padding: 10px 12px;
  font-size: 0.9rem;
  box-sizing: border-box;
}

#garagem-aviso-privacidade {
  color: var(--fraco);
  font-size: 0.8rem;
  margin: 0;
  line-height: 1.4;
}

/* Odômetro: o "herói" do dashboard -- número grande e verde,
   centralizado, com a legenda menor embaixo. */
#garagem-odometro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: radial-gradient(circle at 50% 0%, rgba(43, 213, 118, 0.1) 0%, var(--bg, #0F1216) 70%);
  border: 1px solid rgba(43, 213, 118, 0.15);
  border-radius: 14px;
  padding: 22px 14px;
  margin-top: 4px;
  text-align: center;
}

#garagem-odometro span {
  color: var(--fraco);
  font-size: 0.78rem;
  font-weight: 600;
}

#garagem-odometro strong {
  color: #2FBE6B;
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

#garagem-criar-erro,
#garagem-editar-erro {
  color: #F08A94;
  font-size: 0.8rem;
  margin: 10px 0 0;
}

#garagem-criar-erro.oculto,
#garagem-editar-erro.oculto {
  display: none;
}

/* ---- Abas da Garagem: segmented control (estilo iOS) -- uma
   trilha contínua, só a aba ativa ganha destaque (pill clara),
   em vez de 3 botões soltos. ---- */

#garagem-abas {
  display: flex;
  gap: 2px;
  background: var(--bg);
  border-radius: 10px;
  padding: 3px;
  margin: 14px 0;
}

.garagem-aba {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 8px 6px;
  color: var(--fraco);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.garagem-aba-ativa {
  background: #2A313C;
  color: var(--txt);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.garagem-painel.oculto {
  display: none;
}

#garagem-painel-criar button,
#garagem-painel-editar button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 11px 14px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 10px;
}

#btn-criar-moto,
#btn-salvar-edicao-moto {
  background: #2FBE6B;
  color: #0F1216;
}

#btn-criar-moto:hover,
#btn-salvar-edicao-moto:hover {
  background: #29A75E;
}

#btn-definir-moto-ativa {
  background: var(--bg);
  color: var(--txt);
  border: 1px solid var(--linha) !important;
}

#btn-definir-moto-ativa:hover {
  background: var(--surf2);
}

#btn-definir-moto-ativa.oculto {
  display: none;
}

/* Ghost: sem contorno, só texto vermelho -- não deve competir
   visualmente com "Salvar alterações" (ação principal). */
#btn-excluir-moto {
  background: transparent;
  color: #F08A94;
  border: none !important;
  margin-top: 2px;
  font-weight: 600;
}

#btn-excluir-moto:hover {
  background: rgba(240, 97, 109, 0.1);
}

#garagem-limite-aviso {
  color: var(--fraco);
  font-size: 0.8rem;
  margin: 10px 0 0;
  line-height: 1.4;
}

#garagem-limite-aviso.oculto {
  display: none;
}

/* ---- Card Seletor (abas Editar/Estatísticas): mostra só a moto
   atual (com estrela dourada se for a ativa) -- sem repetir o nome
   dela de novo no formulário/painel logo abaixo. Setas só aparecem
   com 2+ motos cadastradas (ver renderizarSeletorGaragem). ---- */

.garagem-seletor {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #1B2027 0%, #12151A 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 16px;
}

.garagem-seletor.oculto {
  display: none;
}

.garagem-seletor-seta {
  flex: none;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 8px;
  color: var(--fraco);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.garagem-seletor-seta:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--txt);
}

.garagem-seletor-seta.oculto {
  visibility: hidden;
}

/* #garagem-painel-editar button (mais específico, id+tag) senão
   forçaria as setas a width:100%/margin-top como os botões do
   formulário -- essa regra recupera o tamanho compacto delas. */
#garagem-painel-editar .garagem-seletor-seta {
  width: 30px;
  height: 30px;
  padding: 0;
  margin-top: 0;
}

.garagem-seletor-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.garagem-seletor-nome {
  max-width: 100%;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.garagem-seletor-ativa-tag {
  color: var(--ouro, #E9B949);
  font-size: 0.7rem;
  font-weight: 700;
}

.garagem-seletor-ativa-tag.oculto {
  display: none;
}

.garagem-vazio {
  color: var(--fraco);
  font-size: 0.85rem;
  text-align: center;
  padding: 10px 0;
}

.garagem-vazio.oculto {
  display: none;
}

#garagem-editar-form.oculto,
#garagem-stats-conteudo.oculto {
  display: none;
}

/* ---- Dashboard de telemetria (aba Estatísticas): odômetro como
   herói, viagens/última viagem num grid 2 colunas abaixo. ---- */

#garagem-stats-grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.garagem-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--bg);
  border-radius: 10px;
  padding: 14px 6px;
  text-align: center;
}

.garagem-stat-icone {
  font-size: 1.1rem;
  margin-bottom: 2px;
}

.garagem-stat strong {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--txt);
}

.garagem-stat small {
  color: var(--fraco);
  font-size: 0.7rem;
}

/* ============================================================
   LOJA DESBRAVA -- painel de admin
   ============================================================ */

#secao-loja-admin h3 {
  margin: 0 0 10px;
}

#secao-loja-admin h4 {
  margin: 16px 0 8px;
  font-size: 0.9rem;
  color: var(--fraco);
}

#secao-loja-admin select,
#secao-loja-admin input,
#secao-loja-admin textarea {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 8px;
}

#label-loja-admin-municipios {
  display: block;
  font-size: 0.8rem;
  color: var(--fraco);
  margin: 10px 0 6px;
}

#loja-admin-contador-municipios {
  font-size: 0.8rem;
  color: var(--fraco);
  margin: 0 0 6px;
}

#btn-popular-produtos-exemplo {
  width: 100%;
  background: var(--surf2);
  color: var(--txt);
  border: 1px dashed var(--linha);
  border-radius: 10px;
  padding: 10px;
  font-size: 0.82rem;
  cursor: pointer;
  margin-bottom: 12px;
}

#loja-admin-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
}

.loja-admin-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--bg);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.85rem;
  cursor: pointer;
}

.loja-admin-item:hover {
  background: var(--surf2);
}

.loja-admin-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.loja-admin-item-nome {
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.loja-admin-item-status {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
}

.loja-admin-item-status-ativo {
  background: var(--verde-esc);
  color: var(--verde);
}

.loja-admin-item-status-em_breve {
  background: rgba(230, 184, 60, 0.15);
  color: #E6B83C;
}

.loja-admin-item-status-oculto {
  background: rgba(142, 151, 163, 0.15);
  color: var(--fraco);
}

#loja-admin-erro {
  color: #F08A94;
  font-size: 0.8rem;
  margin: 4px 0;
}

#loja-admin-erro.oculto {
  display: none;
}

#btn-salvar-produto-admin,
#btn-cancelar-edicao-produto-admin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 11px 14px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 6px;
}

#btn-salvar-produto-admin {
  background: #2FBE6B;
  color: #0F1216;
}

#btn-salvar-produto-admin:hover {
  background: #29A75E;
}

#btn-cancelar-edicao-produto-admin {
  background: transparent;
  color: var(--fraco);
  border: 1px solid var(--linha) !important;
}

#btn-cancelar-edicao-produto-admin.oculto {
  display: none;
}

/* ============================================================
   LOJA DESBRAVA -- vitrine pública
   ============================================================ */

#btn-abrir-loja.oculto {
  display: none;
}

#modal-loja {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(15, 18, 22, 0.85);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
}

#modal-loja.oculto {
  display: none;
}

#loja-conteudo {
  position: relative;
  background: var(--surf);
  border-radius: 12px;
  padding: 24px;
  max-width: 640px;
  width: 100%;
  margin-top: 5vh;
  max-height: 88vh;
  overflow-y: auto;
  text-align: left;
}

#loja-conteudo h2 {
  margin: 0 0 14px;
  font-size: 1.15rem;
}

#loja-voucher-banner {
  background: linear-gradient(135deg, #2FBE6B, #1FA85C);
  color: #0F1216;
  font-weight: 700;
  font-size: 0.88rem;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

#loja-voucher-banner.oculto {
  display: none;
}

#loja-abas {
  display: flex;
  gap: 6px;
  background: var(--bg);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 16px;
}

.loja-aba {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 9px 10px;
  color: var(--fraco);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.loja-aba-ativa {
  background: #2FBE6B;
  color: #0F1216;
}

#loja-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

#loja-vazio {
  color: var(--fraco);
  font-size: 0.85rem;
  text-align: center;
  padding: 20px 0;
}

#loja-vazio.oculto {
  display: none;
}

.loja-card {
  background: var(--bg);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.loja-card-imagem-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--surf2);
}

.loja-card-imagem {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Efeito silhueta: produto ATIVO mas com município da
   regraDesbloqueio ainda não raspado -- filtro escuro + cadeado por
   cima, texto avisando o que falta desbravar. */
.loja-card-imagem.loja-card-bloqueado {
  filter: brightness(0);
}

.loja-card-cadeado {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--txt);
  font-size: 2rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.loja-card.loja-card-tem-bloqueio .loja-card-cadeado {
  display: flex;
}

.loja-card-selo-em-breve {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(230, 184, 60, 0.92);
  color: #1a1400;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 99px;
}

.loja-card-corpo {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.loja-card-nome {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--txt);
  line-height: 1.3;
}

.loja-card-preco {
  font-size: 0.9rem;
  font-weight: 700;
  color: #2FBE6B;
}

.loja-card-desbloqueio-texto {
  font-size: 0.72rem;
  color: var(--fraco);
  line-height: 1.35;
}

.loja-card-btn-comprar {
  margin-top: auto;
  background: #2FBE6B;
  color: #0F1216;
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.loja-card-btn-comprar:hover {
  background: #29A75E;
}

.loja-card-btn-comprar:disabled {
  background: var(--surf2);
  color: var(--fraco);
  cursor: not-allowed;
}

/* ============================================================
   LOJA DESBRAVA -- checkout (pseudo-compra, sem gateway real)
   ============================================================ */

#modal-checkout-loja {
  position: fixed;
  inset: 0;
  z-index: 230;
  background: rgba(15, 18, 22, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#modal-checkout-loja.oculto {
  display: none;
}

#checkout-loja-conteudo {
  position: relative;
  background: var(--surf);
  border-radius: 12px;
  padding: 24px;
  max-width: 400px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  text-align: left;
}

#checkout-loja-conteudo h2 {
  margin: 0 0 16px;
  font-size: 1.05rem;
}

#checkout-loja-cep-bloco label {
  display: block;
  font-size: 0.8rem;
  color: var(--fraco);
  margin-bottom: 4px;
}

#checkout-loja-cep-bloco {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
}

#input-checkout-cep {
  width: 100%;
  box-sizing: border-box;
}

#btn-calcular-frete {
  background: var(--surf2);
  color: var(--txt);
  border: 1px solid var(--linha) !important;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.82rem;
  cursor: pointer;
}

#checkout-loja-frete-status {
  font-size: 0.78rem;
  color: var(--fraco);
  margin: 4px 0 10px;
}

#checkout-loja-frete-status.oculto {
  display: none;
}

#label-checkout-voucher {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(47, 190, 107, 0.1);
  border: 1px solid rgba(47, 190, 107, 0.3);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.82rem;
  margin: 10px 0;
  cursor: pointer;
}

#label-checkout-voucher.oculto {
  display: none;
}

#checkout-loja-resumo {
  background: var(--bg);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 12px 0;
}

.checkout-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--fraco);
  padding: 4px 0;
}

.checkout-linha.oculto {
  display: none;
}

#checkout-linha-voucher span:last-child {
  color: #2FBE6B;
}

.checkout-linha-total {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 4px;
  padding-top: 8px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--txt) !important;
}

.checkout-linha-total span {
  color: var(--txt);
}

#checkout-loja-aviso {
  font-size: 0.72rem;
  color: var(--fraco);
  line-height: 1.4;
  margin: 0 0 12px;
}

#checkout-loja-erro {
  color: #F08A94;
  font-size: 0.8rem;
  margin: 0 0 10px;
}

#checkout-loja-erro.oculto {
  display: none;
}

#btn-confirmar-pedido-loja {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #2FBE6B;
  color: #0F1216;
  border: none;
  border-radius: 8px;
  padding: 11px 14px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
}

#btn-confirmar-pedido-loja:hover {
  background: #29A75E;
}

#btn-confirmar-pedido-loja:disabled {
  background: var(--surf2);
  color: var(--fraco);
  cursor: not-allowed;
}

#btn-fechar-loja,
#btn-fechar-checkout-loja {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--fraco);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 6px;
}

#btn-fechar-resumo-viagem,
#btn-fechar-compartilhar-viagem,
#btn-fechar-garagem {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--fraco);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 6px;
}

#menu-abrir-garagem.oculto {
  display: none;
}

#toast-onde-estou {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 96px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 390;
  background: rgba(23, 27, 33, 0.95);
  border: 1px solid #2BD576;
  border-radius: 16px;
  padding: 8px 16px;
  font-size: 0.8rem;
  max-width: min(90vw, 320px);
  text-align: center;
  box-shadow: 0 0 14px 2px rgba(43, 213, 118, 0.35);
  animation: entrar-toast 0.25s ease;
}

#toast-onde-estou.oculto {
  display: none;
}

/* ---- Aviso flutuante: município detectado ao abrir/reabrir o app ---- */

#aviso-municipio-detectado {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 96px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 390;
  background: rgba(23, 27, 33, 0.95);
  border: 1px solid #2BD576;
  border-radius: 16px;
  padding: 10px 16px;
  font-size: 0.8rem;
  max-width: min(90vw, 320px);
  text-align: center;
  box-shadow: 0 0 14px 2px rgba(43, 213, 118, 0.35);
  animation: entrar-toast 0.25s ease;
}

#aviso-municipio-detectado.oculto {
  display: none;
}

#btn-aviso-municipio-detectado-acao {
  display: block;
  margin: 8px auto 0;
  background: #1FA85C;
  color: #0F1216;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
}

#btn-aviso-municipio-detectado-acao.oculto {
  display: none;
}

#marcador-local-atual {
  pointer-events: none;
}

/* TAMANHO FIXO NA TELA, como os nomes e os pontos turísticos: os dois
   círculos são desenhados com raio 1 e a escala desfaz o zoom. Antes o
   raio era fixo em unidades do DESENHO, então de perto o marcador
   virava um disco cobrindo meia cidade. O 3.5 é o zoom de referência,
   o mesmo usado no resto do mapa. */
#marcador-local-atual .marcador-anel,
#marcador-local-atual .marcador-ponto {
  transform-box: fill-box;
  transform-origin: center;
}

#marcador-local-atual .marcador-ponto {
  fill: #1FA85C;
  stroke: #F2F5F7;
  stroke-width: 0.34;
  transform: scale(calc(4.4 * 3.5 / var(--zoom, 3.5)));
}

/* O anel pulsa, então a escala do zoom entra na própria animação --
   duas regras de `transform` no mesmo elemento, uma sobrescreveria a
   outra e o pulso venceria, devolvendo o disco gigante. */
#marcador-local-atual .marcador-anel {
  fill: none;
  stroke: #2BD576;
  stroke-width: 0.5;
  animation: pulsar-marcador-local 1.8s ease-out infinite;
}

/* Os fatores multiplicam a MESMA base do ponto (4.4), pra o anel nascer
   junto dele e terminar bem maior -- e a divisão pelo zoom vai junto,
   senão o pulso ignoraria a aproximação. */
@keyframes pulsar-marcador-local {
  0% {
    transform: scale(calc(3 * 3.5 / var(--zoom, 3.5)));
    opacity: 0.9;
  }
  100% {
    transform: scale(calc(13 * 3.5 / var(--zoom, 3.5)));
    opacity: 0;
  }
}

#modal-busca-local {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15, 18, 22, 0.85);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
}

#modal-busca-local.oculto {
  display: none;
}

#busca-local-conteudo {
  position: relative;
  background: var(--surf);
  border-radius: 12px;
  padding: 24px;
  max-width: 440px;
  width: 100%;
  margin-top: 10vh;
  max-height: 75vh;
  overflow-y: auto;
}

#busca-local-conteudo h2 {
  margin: 0 0 12px;
  font-size: 1.1rem;
  text-align: center;
}

#btn-fechar-busca-local {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--fraco);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 6px;
}

#btn-fechar-busca-local:hover {
  color: var(--txt);
}

#input-busca-local {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--linha);
  background: var(--bg);
  color: var(--txt);
  font-size: 0.9rem;
}

#busca-local-resultados {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.busca-local-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  border: none;
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--txt);
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}

.busca-local-item:hover {
  background: var(--surf2);
}

.busca-local-sub {
  color: var(--fraco);
  font-size: 0.75rem;
  margin-left: auto;
}

.selo-revelado {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 50%;
}

/* Menu "⋮" com a opção de desmarcar, escondido por padrão */
#btn-menu-modal {
  position: absolute;
  top: 8px;
  left: 8px;
  background: transparent;
  border: none;
  color: var(--fraco);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 6px 10px;
}

#btn-menu-modal:hover {
  color: var(--txt);
}

#modal-menu {
  position: absolute;
  top: 40px;
  left: 8px;
  background: var(--surf2);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  z-index: 1;
}

#modal-menu button {
  background: transparent;
  border: none;
  color: var(--txt);
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  white-space: nowrap;
}

#modal-menu button:hover {
  background: #F0616D;
}

#modal-destinos {
  text-align: left;
  margin-top: 14px;
}

#modal-destinos h3 {
  font-size: 0.85rem;
  color: var(--fraco);
  margin: 0 0 6px;
}

#modal-destinos ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#modal-destinos li {
  background: var(--bg);
  border-radius: 8px;
  overflow: hidden;
}

.destino-item {
  width: 100%;
  background: none;
  border: none;
  color: var(--txt);
  text-align: left;
  font-size: 0.85rem;
  padding: 8px 10px;
  cursor: pointer;
}

.destino-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.destino-item strong {
  display: block;
  margin-bottom: 2px;
}

.destino-detalhe {
  padding: 0 10px 10px;
  border-top: 1px solid var(--linha);
}

.destino-detalhe.oculto {
  display: none;
}

.destino-texto-completo {
  color: var(--fraco);
  font-size: 0.8rem;
  margin: 8px 0;
}

/* "Abrir no Maps": link de texto discreto no rodapé do destino (era
   um bloco verde grande antes -- destoava do resto do card). */
.destino-btn-maps {
  display: block;
  width: 100%;
  text-align: right;
  background: none;
  color: var(--verde, #2BD576);
  border: none;
  padding: 4px 0;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
}

.destino-btn-maps:hover {
  text-decoration: underline;
}

.destino-btn-maps:disabled {
  color: var(--fraco);
  cursor: not-allowed;
}

/* Botões de ação dentro dos popups (resetar, desmarcar) */
#btn-reset-tudo,
#modal-menu #btn-reset-um {
  background: #F0616D;
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
}

#btn-reset-tudo:hover {
  background: #D94E5A;
}

/* Biblioteca de selos */
#biblioteca-conteudo {
  max-width: 720px;
  max-height: 85vh;
  overflow-y: auto;
}

#biblioteca-contador {
  color: var(--fraco);
  font-size: 0.85rem;
  margin: 4px 0 8px;
}

#biblioteca-barra {
  height: 8px;
  border-radius: 999px;
  background: var(--surf2);
  overflow: hidden;
}

#biblioteca-barra-preenchida {
  height: 100%;
  width: 0%;
  background: #2BD576;
  transition: width 0.3s ease;
}

/* ---- Abas de categoria (Municípios/Regiões/Rotas) -- mesmo padrão
   minimalista de #social-abas/#ranking-abas: sem fundo, texto cinza
   inativo, branco + risco verde embaixo quando ativo. Base aqui,
   override com !important escopado mais abaixo no arquivo (perto de
   #social-abas/#ranking-abas). ---- */
#biblioteca-abas {
  display: flex;
  gap: 20px;
  margin: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.biblioteca-aba {
  flex: none;
  padding: 10px 2px;
  margin-bottom: -1px;
  cursor: pointer;
  font-size: 0.86rem;
}

.biblioteca-painel.oculto {
  display: none;
}

/* ---- Filtro de status: pílulas roláveis horizontalmente ---- */
#biblioteca-filtros {
  display: flex;
  gap: 8px;
  margin: 12px 0 4px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}

#biblioteca-filtros::-webkit-scrollbar {
  display: none;
}

.biblioteca-filtro {
  flex: none;
  background: var(--surf2);
  color: var(--fraco);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.biblioteca-filtro-ativo {
  background: var(--verde-esc);
  color: var(--verde);
  border-color: rgba(43, 213, 118, 0.4);
}

/* ---- Grids: municípios em 3 colunas, regiões/rotas em 2 (títulos
   longos precisam de mais espaço horizontal por item, ver ponto 5). ---- */
.biblioteca-grade {
  display: grid;
  gap: 16px 10px;
  margin-top: 14px;
}

.biblioteca-grade-3 {
  grid-template-columns: repeat(3, 1fr);
}

.biblioteca-grade-2 {
  grid-template-columns: 1fr 1fr;
}

/* Item escondido pelo filtro de status (ver aplicarFiltroBiblioteca
   em js/script.js) -- display:none direto, não anima (lista pode ter
   90+ itens, não vale a pena). */
.selo-item-oculto-filtro {
  display: none !important;
}

.selo-item {
  background: none;
  border: none;
  color: var(--txt);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 2px;
  font-size: 0.68rem;
}

.selo-item img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surf2);
  border: 2px solid var(--linha);
}

.selo-item img.selo-cinza {
  filter: grayscale(1);
  opacity: 0.6;
}

/* ============================================================
   PLACEHOLDER genérico pra selo/medalha SEM ARTE AINDA -- CSS puro,
   não depende de canvas nem de nenhum JS. Cobre o caso de uma <img>
   sem "src" (ou com "src" vazio): em vez de um buraco/ícone de
   imagem quebrada, mostra um círculo com gradiente escuro + um emoji
   centralizado (via ::after no container, nunca no próprio <img>).

   Uso: envolva a <img> num container com esta classe --
     <div class="selo-placeholder-box">
       <img class="selo-placeholder-img" alt="Nome do selo">
     </div>
   Assim que a <img> ganhar um "src" de verdade (a arte final), ela
   cobre o placeholder pixel a pixel (mesmo tamanho/raio,
   position:absolute por cima) -- não precisa trocar classe nem
   remover nada na hora de colocar a imagem definitiva.

   Observação honesta: CSS sozinho só detecta "sem src"/"src vazio"
   (seletor abaixo) -- ele NÃO detecta uma imagem que tenta carregar e
   falha (404 etc), isso exigiria um pingo de JS (ex: atributo
   onerror="this.removeAttribute('src')"). Não usado, então, se um dia
   quiser cobrir link quebrado também, é só isso.
   ============================================================ */
.selo-placeholder-box {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  background: radial-gradient(circle at 32% 28%, #3a3f47 0%, #1a1d22 72%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.06), 0 2px 6px rgba(0, 0, 0, 0.4);
}

.selo-placeholder-box::after {
  content: "🏆";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  opacity: 0.55;
}

/* Variantes de cor/emoji -- mesma paleta escura, só muda o tom
   (metálico cinza / dourado escuro / verde do app) e o símbolo. */
.selo-placeholder-box.selo-placeholder-dourado {
  background: radial-gradient(circle at 32% 28%, #4a3a18 0%, #241b09 72%);
}
.selo-placeholder-box.selo-placeholder-dourado::after {
  content: "🏆";
}

.selo-placeholder-box.selo-placeholder-verde {
  background: radial-gradient(circle at 32% 28%, #1c3a2a 0%, #0f1216 72%);
}
.selo-placeholder-box.selo-placeholder-verde::after {
  content: "📍";
}

.selo-placeholder-box.selo-placeholder-bloqueado {
  background: radial-gradient(circle at 32% 28%, #1c1e22 0%, #0b0c0e 72%);
}
.selo-placeholder-box.selo-placeholder-bloqueado::after {
  content: "🔒";
  font-size: 1.1rem;
  opacity: 0.5;
}

.selo-placeholder-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Sem src (ou src vazio): a <img> fica invisível -- o ::after do
   container já preenche o espaço. Some sozinha assim que o src chegar. */
.selo-placeholder-img:not([src]),
.selo-placeholder-img[src=""] {
  visibility: hidden;
}

/* Lightbox: clicar num selo da biblioteca abre a imagem grande aqui
   (em vez de navegar pro popup completo), com um botão de voltar que
   só fecha o lightbox -- ver abrirSeloLightbox em js/script.js. */
#modal-selo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(15, 18, 22, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#modal-selo-lightbox.oculto {
  display: none;
}

#selo-lightbox-conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 360px;
  width: 100%;
}

#selo-lightbox-imagem {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  background: var(--surf2);
  border: 3px solid var(--linha);
}

#selo-lightbox-legenda {
  color: var(--txt);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  margin: 0;
}

#btn-voltar-lightbox {
  background: var(--surf2);
  color: var(--txt);
  border: none;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
}

#btn-voltar-lightbox:hover {
  background: #262C35;
}

.selo-item img.selo-colorido {
  border-color: #2BD576;
}

.selo-item span {
  line-height: 1.2;
  text-align: center;
  font-size: 0.75rem;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

/* ============================================================
   ESTADO BLOQUEADO/DESBLOQUEADO -- padrão único nos 3 grids da
   Biblioteca (Municípios/Regiões/Rotas), ver .locked/.unlocked
   aplicadas em js/script.js.
   ============================================================ */

/* Bloqueado: filtro escuro direto na imagem (real ou o placeholder
   canvas gerado por gerarSeloPlaceholder -- na prática É o caminho
   mais comum, já que quase todo selo ainda usa esse placeholder em
   vez de arte final) -- nada de cadeado amarelo solto no texto. */
.selo-item.locked img {
  filter: brightness(0.2) grayscale(100%);
  border-color: var(--linha);
  box-shadow: none;
}

.selo-item.locked span {
  color: #777;
  font-weight: 400;
}

/* Sem imagem NENHUMA ainda (nem o placeholder canvas chegou) --
   reaproveita o placeholder de CSS puro (.selo-placeholder-box),
   variante bloqueada: círculo bem escuro + cadeado cinza centralizado. */
.selo-item.locked .selo-placeholder-box {
  background: radial-gradient(circle at 32% 28%, #1c1e22 0%, #0b0c0e 72%);
}
.selo-item.locked .selo-placeholder-box::after {
  content: "🔒";
  font-size: 1rem;
  opacity: 0.45;
}

/* Desbloqueado: sem borda sólida pesada -- só um brilho de fundo
   (box-shadow leve) pra dar profundidade. .selo-item-brilhante
   (dourado) fica de fora de propósito, tem o próprio box-shadow
   dourado mais abaixo no arquivo e não pode ser sobrescrito por isso. */
.selo-item.unlocked:not(.selo-item-brilhante) img {
  border-color: transparent;
  box-shadow: 0 0 8px 1px rgba(43, 213, 118, 0.35);
}

.selo-item.unlocked span {
  color: var(--txt);
  font-weight: 500;
}

/* Configurações */
#configuracoes-conteudo {
  text-align: left;
  max-height: 85vh;
  overflow-y: auto;
}

#configuracoes-conteudo h2 {
  text-align: center;
}

/* Cada seção de Configurações vira um "cartão" visualmente separado
   (fundo levemente destacado + borda + espaçamento), em vez de todos
   os botões ficarem soltos e misturados numa lista só. */
.settings-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
}

.settings-card-titulo {
  margin: 0 0 12px;
  font-size: 0.9rem;
  color: var(--fraco);
  font-weight: 700;
}

.settings-campo-label {
  display: block;
  font-size: 0.8rem;
  color: var(--fraco);
  margin: 4px 0 6px;
}

/* Texto explicativo curto no topo de um card, antes do conteúdo. */
.settings-card-nota {
  margin: -6px 0 12px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--fraco);
}

/* ---- Card 3: mapas dos estados ----
   Uma linha por estado: sigla+nome à esquerda, peso e situação embaixo,
   e a ação à direita. Grid (e não flex) pra a barra de progresso poder
   ocupar a largura toda numa terceira linha sem empurrar a ação. */
.mapa-estado-linha {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linha);
}

.mapa-estado-linha:last-of-type {
  border-bottom: none;
}

.mapa-estado-nome {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--txt);
}

.mapa-estado-sub {
  grid-column: 1;
  font-size: 0.76rem;
  color: var(--fraco);
}

/* Verde quando já está no aparelho -- é a única informação da linha que
   a pessoa procura de relance. */
.mapa-estado-sub.baixado {
  color: var(--verde);
}

/* Botão pequeno da linha. Precisa de #configuracoes-conteudo +
   !important pelo mesmo motivo dos outros componentes deste painel: a
   "CAMADA UI MODERNA" no fim deste arquivo força
   background: var(--surf2) em TODO button daqui. */
#configuracoes-conteudo .mapa-estado-acao {
  grid-row: 1 / span 2;
  grid-column: 2;
  padding: 7px 14px !important;
  font-size: 0.8rem !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--verde) !important;
  border: 1px solid var(--verde) !important;
  font-weight: 600 !important;
  white-space: nowrap;
  width: auto !important;
  margin: 0 !important;
}

#configuracoes-conteudo .mapa-estado-acao[disabled] {
  opacity: 0.55;
  color: var(--fraco) !important;
  border-color: var(--linha) !important;
}

/* Apagar é destrutivo, mas de baixo risco (dá pra baixar de novo): fica
   discreto, sem contorno, pra não competir com "Baixar". */
#configuracoes-conteudo .mapa-estado-acao.remover {
  color: var(--fraco) !important;
  border-color: transparent !important;
}

.mapa-estado-barra {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 999px;
  background: var(--linha);
  overflow: hidden;
  margin-top: 4px;
}

.mapa-estado-barra > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--verde);
  transition: width 0.2s ease;
}

/* Card 4 (Conta): "Sair" fica neutro no topo, a Zona de Risco de
   verdade (destrutivo/irreversível) fica destacada por baixo, só ela
   com o tom avermelhado -- sair da conta não é perigoso, não precisa
   competir visualmente com resetar/excluir. */
.settings-zona-risco {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(240, 97, 109, 0.2);
}

.settings-zona-risco-titulo {
  margin: 0 0 10px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #F0616D;
}

.settings-zona-risco p {
  color: var(--fraco);
  font-size: 0.8rem;
  margin: 10px 0 8px;
}

/* ---- Toggle/switch (substitui os <input type="checkbox"> nativos de
   Perfil público, Efeitos sonoros e Notificações) ---- */
.settings-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  cursor: pointer;
}

.settings-card .settings-toggle + .settings-toggle {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.settings-toggle-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.settings-toggle-titulo {
  font-size: 0.88rem;
  color: var(--txt);
  font-weight: 600;
}

.settings-toggle-desc {
  font-size: 0.76rem;
  color: var(--fraco);
  line-height: 1.35;
}

.settings-toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
}

.settings-toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.settings-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--surf2);
  border: 1px solid #2A303A;
  border-radius: 999px;
  transition: background 0.2s, border-color 0.2s;
  pointer-events: none;
}

.settings-toggle-slider::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 2px;
  top: 2px;
  background: #F2F5F7;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.settings-toggle-switch input:checked + .settings-toggle-slider {
  background: var(--verde);
  border-color: var(--verde);
}

.settings-toggle-switch input:checked + .settings-toggle-slider::before {
  transform: translateX(18px);
}

.settings-toggle-switch input:focus-visible + .settings-toggle-slider {
  outline: 2px solid var(--verde);
  outline-offset: 2px;
}

/* ---- Rodapé de Configurações (versão do app) -- discreto de
   propósito, sem o peso visual de um .settings-card. ---- */
.settings-footer {
  margin-top: 4px;
  text-align: center;
}

#configuracoes-conteudo button {
  display: block;
  width: 100%;
  background: var(--surf2);
  color: var(--txt);
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  margin-top: 6px;
}

#configuracoes-conteudo button:hover {
  background: #262C35;
}

#configuracoes-conteudo button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

#configuracoes-conteudo #btn-reset-tudo {
  background: #F0616D;
}

#configuracoes-conteudo #btn-reset-tudo:hover {
  background: #D94E5A;
}

/* Painel de Admin (só a conta dona vê o botão que abre isso) */
#btn-abrir-admin {
  background: #a16207 !important;
  color: #FAF3D8 !important;
  font-weight: 600;
}

#btn-abrir-admin:hover {
  background: #854d0e !important;
}

#admin-conteudo {
  text-align: left;
}

#admin-conteudo h2 {
  text-align: center;
}

#admin-conteudo h3 {
  font-size: 0.9rem;
  color: var(--fraco);
  margin: 20px 0 8px;
}

#admin-conteudo h3:first-of-type {
  margin-top: 0;
}

#label-anuncios-ativados,
#label-anuncios-para-mim {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  margin-bottom: 8px;
}

#anuncios-admin-status {
  color: var(--fraco);
  font-size: 0.8rem;
  margin: 8px 0 0;
}

#secao-anuncio {
  margin-top: 20px;
  text-align: center;
}

#conta-status {
  color: var(--fraco);
  font-size: 0.85rem;
  margin: 0 0 8px;
}

#dados-email {
  color: var(--fraco);
  font-size: 0.85rem;
  margin: 0 0 10px;
}

#secao-dados-pessoais label {
  display: block;
  font-size: 0.8rem;
  color: var(--fraco);
  margin-bottom: 4px;
}

#configuracoes-conteudo #input-apelido-config {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--linha);
  background: var(--bg);
  color: var(--txt);
  font-size: 0.9rem;
}

#erro-apelido-config {
  color: #F08A94;
  font-size: 0.8rem;
  margin: 6px 0 0;
}

#configuracoes-conteudo #btn-salvar-apelido-config {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #2BD576;
  color: #0F1216;
  font-weight: 600;
}

#configuracoes-conteudo #btn-salvar-apelido-config:hover {
  background: #1FA85C;
}

#configuracoes-conteudo #btn-salvar-apelido-config .spinner {
  border-color: rgba(15, 18, 22, 0.3);
  border-top-color: #0F1216;
}

#moderacao-busca {
  display: flex;
  gap: 6px;
}

#moderacao-busca input {
  flex: 1;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--linha);
  background: var(--bg);
  color: var(--txt);
  font-size: 0.9rem;
}

#admin-conteudo button {
  display: block;
  width: 100%;
  background: var(--surf2);
  color: var(--txt);
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  margin-top: 6px;
}

#admin-conteudo button:hover {
  background: #262C35;
}

#admin-conteudo #btn-buscar-moderacao {
  width: auto;
  white-space: nowrap;
}

/* ---- Chave PIX no painel de Admin ---- */
.admin-dica {
  font-size: 0.8rem;
  color: var(--fraco);
  margin: 0 0 10px;
}

#input-chave-pix-admin {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg);
  color: var(--txt);
  border: 1px solid #2A303A;
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 0.92rem;
  margin-bottom: 10px;
}

#input-chave-pix-admin:focus {
  outline: none;
  border-color: var(--verde);
}

#admin-conteudo #btn-salvar-chave-pix {
  background: var(--verde);
  color: var(--verde-tinta);
  font-weight: 700;
}

#admin-conteudo #btn-salvar-chave-pix:hover {
  filter: brightness(1.06);
}

#pix-admin-status {
  margin-top: 10px;
  font-size: 0.85rem;
}

/* ---- Sobre / versão em Configurações ---- */
#secao-sobre .sobre-linha {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}

#secao-sobre .logo-desbrava {
  font-size: 1.05rem;
  color: var(--txt);
}

#versao-app-texto {
  font-size: 0.85rem;
  color: var(--fraco);
}

#moderacao-resultado {
  margin-top: 10px;
}

.moderacao-item {
  background: var(--bg);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.85rem;
}

.moderacao-item-nome {
  font-weight: 600;
  margin-bottom: 2px;
}

.moderacao-item-email,
.moderacao-item-status {
  color: var(--fraco);
  font-size: 0.78rem;
}

.moderacao-item-acoes {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.moderacao-item-acoes button {
  flex: 1;
  margin-top: 0;
  font-size: 0.78rem;
  padding: 8px;
}

.moderacao-item-acoes button.status-ativa {
  background: #2BD576;
}

.moderacao-item-anuncio {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--linha);
  font-size: 0.78rem;
  color: var(--fraco);
  cursor: pointer;
}

.btn-excluir-conta {
  background: transparent !important;
  border: 1px solid #F0616D !important;
  color: #F0616D !important;
}

.btn-excluir-conta:hover {
  background: rgba(240, 97, 109, 0.15) !important;
}

#modal-confirmar-exclusao {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: rgba(15, 18, 22, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#modal-confirmar-exclusao.oculto {
  display: none;
}

#confirmar-exclusao-conteudo {
  position: relative;
  width: 100%;
  max-width: 340px;
  background: var(--surf);
  border: 2px solid #F0616D;
  border-radius: 12px;
  padding: 24px;
  text-align: left;
}

#btn-fechar-confirmar-exclusao {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--fraco);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 6px;
}

#confirmar-exclusao-conteudo h2 {
  margin: 0 0 10px;
  font-size: 1.1rem;
}

#confirmar-exclusao-conteudo p {
  color: var(--fraco);
  font-size: 0.85rem;
  margin: 0 0 14px;
}

#input-confirmar-exclusao {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--linha);
  background: var(--bg);
  color: var(--txt);
  font-size: 0.9rem;
}

#exclusao-erro {
  color: #F08A94;
  font-size: 0.8rem;
  margin: 6px 0 0;
}

#btn-excluir-de-vez {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: #F0616D;
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 14px;
}

#btn-excluir-de-vez:hover {
  background: #D94E5A;
}

#btn-excluir-de-vez:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#modal-cartao-progresso {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(15, 18, 22, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#modal-cartao-progresso.oculto {
  display: none;
}

#cartao-progresso-conteudo {
  position: relative;
  background: var(--surf);
  border-radius: 12px;
  padding: 24px;
  max-width: 360px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  text-align: center;
}

#cartao-progresso-conteudo h2 {
  margin-top: 0;
  font-size: 1.1rem;
}

#btn-fechar-cartao-progresso {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--fraco);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 6px;
}

#btn-fechar-cartao-progresso:hover {
  color: var(--txt);
}

#cartao-progresso-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  margin-bottom: 16px;
}

#cartao-progresso-preview img {
  width: 100%;
  border-radius: 8px;
}

#cartao-progresso-acoes {
  display: flex;
  gap: 8px;
}

#cartao-progresso-acoes button {
  flex: 1;
  background: #2BD576;
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
}

#cartao-progresso-acoes button:hover {
  background: #1FA85C;
}

#btn-baixar-cartao {
  background: var(--surf2) !important;
}

#btn-baixar-cartao:hover {
  background: #262C35 !important;
}

/* Popup de login: aparece só quando uma ação exige estar logado */
#tela-login {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(15, 18, 22, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}

#tela-login.oculto {
  display: none !important;
}

#tela-login-conteudo {
  position: relative;
  width: 100%;
  max-width: 320px;
  background: var(--surf);
  border-radius: 12px;
  padding: 24px;
}

#btn-fechar-tela-login {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--fraco);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 6px;
}

#btn-fechar-tela-login:hover {
  color: var(--txt);
}

#tela-login-conteudo h1 {
  font-size: 1.6rem;
  margin-bottom: 8px;
}

#tela-login-conteudo p {
  color: var(--fraco);
  margin-bottom: 20px;
}

#tela-conta-bloqueada {
  position: fixed;
  inset: 0;
  z-index: 310;
  background: rgba(15, 18, 22, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}

#tela-conta-bloqueada.oculto {
  display: none !important;
}

#tela-conta-bloqueada-conteudo {
  width: 100%;
  max-width: 340px;
  background: var(--surf);
  border: 2px solid #F0616D;
  border-radius: 12px;
  padding: 24px;
}

#tela-conta-bloqueada-conteudo h1 {
  font-size: 1.6rem;
  margin-bottom: 12px;
}

#conta-bloqueada-texto {
  color: var(--txt);
  margin-bottom: 20px;
  white-space: pre-line;
}

#btn-fechar-conta-bloqueada {
  width: 100%;
  background: #F0616D;
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
}

#btn-fechar-conta-bloqueada:hover {
  background: #D94E5A;
}

#form-login {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#form-login input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--linha);
  background: var(--surf);
  color: var(--txt);
  font-size: 0.95rem;
}

#erro-login {
  color: #F08A94;
  font-size: 0.82rem;
  margin: 0;
  text-align: left;
}

#erro-login.oculto {
  display: none;
}

#btn-entrar-email {
  background: #2BD576;
  color: #0F1216;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#btn-entrar-email:hover {
  background: #1FA85C;
}

#btn-entrar-email:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}

/* Spinner de carregamento (verde, combina com o tema/logo) */
.spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(15, 18, 22, 0.3);
  border-top-color: #0F1216;
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
  flex-shrink: 0;
}

.spinner.spinner-grande {
  width: 40px;
  height: 40px;
  border-width: 4px;
  border-color: rgba(43, 213, 118, 0.25);
  border-top-color: #2BD576;
  margin: 30px auto;
}

.spinner.oculto {
  display: none;
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

#btn-alternar-modo,
#btn-esqueci-senha {
  background: none;
  border: none;
  color: var(--fraco);
  cursor: pointer;
  font-size: 0.85rem;
  margin-top: 16px;
  text-decoration: underline;
}

#btn-esqueci-senha {
  display: block;
  margin: 12px auto 0;
  font-size: 0.8rem;
}

#btn-alternar-modo:hover,
#btn-esqueci-senha:hover {
  color: var(--txt);
}

/* Popup de escolher apelido no primeiro login */
#modal-apelido {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(15, 18, 22, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#apelido-conteudo {
  background: var(--surf);
  border-radius: 12px;
  padding: 24px;
  max-width: 340px;
  width: 100%;
  text-align: center;
}

#apelido-conteudo h2 {
  margin-top: 0;
  font-size: 1.1rem;
}

#apelido-conteudo p {
  color: var(--fraco);
  font-size: 0.85rem;
  margin-bottom: 16px;
}

#input-apelido {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--linha);
  background: var(--bg);
  color: var(--txt);
  font-size: 0.95rem;
  margin-bottom: 12px;
}

#btn-confirmar-apelido {
  width: 100%;
  background: #2BD576;
  color: #0F1216;
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
}

#btn-confirmar-apelido:hover {
  background: #1FA85C;
}

/* Popup de região (mega-selo) */
#modal-regiao {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(15, 18, 22, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#regiao-conteudo {
  position: relative;
  background: var(--surf);
  border-radius: 12px;
  padding: 24px;
  max-width: 420px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  text-align: center;
}

#regiao-conteudo h2 {
  margin-top: 0;
  font-size: 1.15rem;
}

#btn-fechar-regiao {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--fraco);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 6px;
}

#btn-fechar-regiao:hover {
  color: var(--txt);
}

#regiao-status {
  color: var(--fraco);
  font-size: 0.85rem;
  margin: 0 0 8px;
}

#regiao-barra {
  height: 8px;
  border-radius: 999px;
  background: var(--surf2);
  overflow: hidden;
  margin-bottom: 16px;
}

#regiao-barra-preenchida {
  height: 100%;
  width: 0%;
  background: #2BD576;
  transition: width 0.3s ease;
}

#regiao-instrucao {
  color: var(--fraco);
  font-size: 0.85rem;
}

#regiao-resumo:not(:empty) {
  text-align: left;
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--fraco);
  background: var(--bg);
  border-radius: 8px;
  padding: 10px 12px;
}

.selo-bloqueado {
  width: 200px;
  height: 200px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  opacity: 0.6;
}

/* Rotas temáticas: lista + detalhe da rota (mesmo padrão visual do
   popup de região). */
#modal-rotas,
#modal-rota-detalhe {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(15, 18, 22, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#modal-rotas.oculto,
#modal-rota-detalhe.oculto {
  display: none;
}

#rotas-conteudo,
#rota-detalhe-conteudo {
  position: relative;
  background: var(--surf);
  border-radius: 12px;
  padding: 24px;
  max-width: 420px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  text-align: center;
}

#rotas-conteudo h2,
#rota-detalhe-conteudo h2 {
  margin-top: 0;
  font-size: 1.15rem;
}

#btn-fechar-rotas,
#btn-fechar-rota-detalhe {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--fraco);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 6px;
}

#btn-fechar-rotas:hover,
#btn-fechar-rota-detalhe:hover {
  color: var(--txt);
}

/* ---- Abas Oficiais/Personalizadas -- mesmo padrão minimalista de
   #social-abas (texto cinza inativo, branco + risco verde ativo). ---- */
#rotas-abas {
  display: flex;
  gap: 20px;
  margin: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.rotas-aba {
  flex: none;
  padding: 10px 2px;
  margin-bottom: -1px;
  cursor: pointer;
  font-size: 0.86rem;
}

.rotas-painel.oculto {
  display: none;
}

/* ---- Lista de rotas oficiais: cards horizontais (abandona o grid
   circular da Biblioteca -- nomes longos de rota precisam de linha
   inteira, não de coluna espremida). ---- */
#rotas-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
  text-align: left;
}

.rota-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--bg);
  border: none;
  border-radius: 14px;
  padding: 10px;
  cursor: pointer;
  text-align: left;
}

.rota-card-thumb {
  flex: none;
  width: 60px;
  height: 60px;
}

/* .selo-placeholder-box (ver bloco de placeholder genérico mais
   acima no arquivo) é circular por padrão -- aqui vira quadrado com
   cantos arredondados, combinando com o card. */
.rota-card-thumb.selo-placeholder-box,
.rota-card-thumb .selo-placeholder-img {
  border-radius: 14px;
}

.rota-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rota-card-titulo {
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  line-height: 1.3;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.rota-card-progresso-linha {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rota-card-barra {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--surf2);
  overflow: hidden;
}

.rota-card-barra-preenchida {
  height: 100%;
  background: var(--verde);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.rota-card-contador {
  flex: none;
  font-size: 0.7rem;
  color: var(--fraco);
  font-weight: 600;
}

.rota-card-chevron {
  flex: none;
  color: #4A515C;
  font-size: 1.4rem;
  line-height: 1;
}

/* Rota não iniciada (0/X): thumbnail escurecida + título opaco.
   Assim que tiver 1 município sequer, já conta como "em progresso"
   e ganha a cor normal (ver critério em abrirRotas). Sem cadeado
   amarelo em lugar nenhum. */
.rota-card-bloqueada .rota-card-thumb img,
.rota-card-bloqueada .selo-placeholder-img {
  filter: grayscale(1) brightness(0.3);
}

.rota-card-bloqueada .rota-card-titulo {
  color: #6B7480;
  font-weight: 500;
}

/* Rota dourada (brilhante): glow sutil no thumbnail em vez do sweep
   circular completo (esse era desenhado pro .selo-item redondo da
   Biblioteca, não encaixa num card retangular). */
.rota-card-brilhante .rota-card-thumb {
  box-shadow: 0 0 10px 1px rgba(233, 185, 73, 0.6);
}

#rota-detalhe-descricao {
  color: var(--fraco);
  font-size: 0.85rem;
  margin: 0 0 12px;
}

/* ---- Aba "Personalizadas" ---- */
.btn-criar-rota {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: rgba(43, 213, 118, 0.15);
  color: var(--verde);
  border: 1px solid rgba(43, 213, 118, 0.45);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  margin: 14px 0 10px;
}

.btn-criar-rota:hover {
  background: rgba(43, 213, 118, 0.25);
}

#minhas-rotas-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.rota-personalizada-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  background: #1E242C;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  color: var(--txt);
  font-size: 0.85rem;
  font-weight: 600;
}

.rota-personalizada-item:hover {
  background: #262D37;
}

.rota-personalizada-item span {
  color: var(--fraco);
  font-size: 0.78rem;
  font-weight: 400;
}

#minhas-rotas-vazio {
  color: var(--fraco);
  font-size: 0.82rem;
  margin: 8px 0 0;
}

/* Modal "Criar rota personalizada" e detalhe de rota personalizada --
   mesmo padrão auto-contido do #modal-rotas/#modal-rota-detalhe (ver
   acima), pra não depender de grupos de estilo distantes. */
#modal-criar-rota,
#modal-rota-personalizada-detalhe {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(15, 18, 22, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#modal-criar-rota.oculto,
#modal-rota-personalizada-detalhe.oculto {
  display: none;
}

#criar-rota-conteudo,
#rota-personalizada-detalhe-conteudo {
  position: relative;
  background: var(--surf);
  border-radius: 12px;
  padding: 24px;
  max-width: 420px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  text-align: left;
}

#criar-rota-conteudo h2,
#rota-personalizada-detalhe-conteudo h2 {
  margin-top: 0;
  font-size: 1.15rem;
  text-align: center;
}

#btn-fechar-criar-rota,
#btn-fechar-rota-personalizada-detalhe {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--fraco);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 6px;
}

#btn-fechar-criar-rota:hover,
#btn-fechar-rota-personalizada-detalhe:hover {
  color: var(--txt);
}

#input-nome-rota,
#input-descricao-rota,
#input-filtro-municipios-rota {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--txt);
  font-size: 0.88rem;
  margin-bottom: 10px;
  font-family: inherit;
}

#input-descricao-rota {
  resize: vertical;
}

#criar-rota-contador {
  color: var(--fraco);
  font-size: 0.8rem;
  margin: 0 0 6px;
}

#criar-rota-lista-municipios,
#loja-admin-lista-municipios {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 14px;
}

.criar-rota-municipio-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.criar-rota-municipio-item:last-child {
  border-bottom: none;
}

#criar-rota-erro {
  color: #EF4444;
  font-size: 0.82rem;
  margin: 0 0 10px;
}

#btn-salvar-rota-personalizada,
#btn-ver-rota-personalizada-no-mapa,
#btn-compartilhar-rota-personalizada,
#btn-excluir-rota-personalizada {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
  border: none;
  margin: 0 0 10px;
}

#btn-salvar-rota-personalizada,
#btn-ver-rota-personalizada-no-mapa {
  background: var(--verde);
  color: #0F1216;
}

#btn-compartilhar-rota-personalizada {
  background: rgba(43, 213, 118, 0.15);
  color: var(--verde);
  border: 1px solid rgba(43, 213, 118, 0.45);
}

#btn-excluir-rota-personalizada {
  background: rgba(239, 68, 68, 0.12);
  color: #EF4444;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

#rota-personalizada-autor {
  text-align: center;
  color: var(--fraco);
  font-size: 0.8rem;
  margin: -6px 0 12px;
}

#rota-personalizada-descricao {
  color: var(--fraco);
  font-size: 0.85rem;
  margin: 0 0 12px;
}

#rota-personalizada-status {
  color: var(--fraco);
  font-size: 0.85rem;
  margin: 0 0 6px;
}

#rota-personalizada-barra {
  height: 6px;
  background: #262C35;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 16px;
}

#rota-personalizada-barra-preenchida {
  height: 100%;
  background: var(--verde);
  width: 0%;
  transition: width 0.3s ease;
}

/* Menu de opções ao compartilhar rota (link / comunidade / cancelar) --
   auto-contido, mesmo padrão dos outros modais desta seção. */
#modal-compartilhar-rota {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15, 18, 22, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#modal-compartilhar-rota.oculto {
  display: none;
}

#compartilhar-rota-conteudo {
  position: relative;
  background: var(--surf);
  border-radius: 12px;
  padding: 24px;
  max-width: 360px;
  width: 100%;
  text-align: center;
}

#compartilhar-rota-conteudo h2 {
  margin-top: 0;
  font-size: 1.1rem;
}

#btn-fechar-compartilhar-rota {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--fraco);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 6px;
}

#btn-fechar-compartilhar-rota:hover {
  color: var(--txt);
}

.btn-opcao-compartilhar {
  display: block;
  width: 100%;
  background: rgba(43, 213, 118, 0.12);
  color: var(--txt);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 14px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  margin-bottom: 10px;
}

.btn-opcao-compartilhar:hover {
  background: rgba(43, 213, 118, 0.2);
}

.btn-opcao-cancelar {
  display: block;
  width: 100%;
  background: transparent;
  color: var(--fraco);
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 0.88rem;
  margin-top: 4px;
}

.btn-opcao-cancelar:hover {
  color: var(--txt);
}

#rota-detalhe-status {
  color: var(--fraco);
  font-size: 0.85rem;
  margin: 0 0 8px;
}

#rota-detalhe-barra {
  height: 8px;
  border-radius: 999px;
  background: var(--surf2);
  overflow: hidden;
  margin-bottom: 16px;
}

#rota-detalhe-barra-preenchida {
  height: 100%;
  width: 0%;
  background: #2BD576;
  transition: width 0.3s ease;
}

#btn-ver-rota-no-mapa {
  display: block;
  width: 100%;
  background: var(--surf2);
  color: var(--txt);
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  margin-bottom: 16px;
}

#btn-ver-rota-no-mapa:hover {
  background: #262C35;
}

#rota-detalhe-instrucao {
  color: var(--fraco);
  font-size: 0.85rem;
}

#rota-detalhe-historia:not(:empty) {
  text-align: left;
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--fraco);
  background: var(--bg);
  border-radius: 8px;
  padding: 10px 12px;
  white-space: pre-line;
}

/* Visão de rota no mapa: destaca os municípios da rota, esmaece o
   resto, e esconde toda a UI flutuante (ver entrarModoRota/
   sairModoRota em js/script.js) exceto o botão de sair. */
.municipio-da-rota {
  stroke: #2BD576;
  stroke-width: 4;
}

.municipio-fora-da-rota {
  opacity: 0.25;
}

#btn-sair-rota {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  background: #2BD576;
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

#btn-sair-rota.oculto {
  display: none;
}

#btn-sair-rota:hover {
  background: #1FA85C;
}

body.modo-rota-ativo #barra-topo,
body.modo-rota-ativo #botoes-lateral-esquerda,
body.modo-rota-ativo #btn-buscar-local,
body.modo-rota-ativo #btn-onde-estou,
body.modo-rota-ativo #btn-modo-viagem,
body.modo-rota-ativo #aviso-instalar-pwa,
body.modo-rota-ativo #aviso-brilhante-pendente,
body.modo-rota-ativo #aviso-municipio-detectado,
body.modo-rota-ativo #toast-login,
body.modo-rota-ativo #toast-onde-estou {
  display: none !important;
}

/* Comemoração ao terminar de raspar: o selo "pula" pra frente e
   volta, e sai confete (ver celebrarConclusao/dispararConfete em
   js/scratch-card.js). */
@keyframes pulo-selo {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.18);
  }
  75% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

.selo-completo {
  animation: pulo-selo 0.55s ease;
}

.confete {
  position: fixed;
  top: 0;
  left: 0;
  width: 9px;
  height: 9px;
  pointer-events: none;
  z-index: 500;
  opacity: 1;
  animation: cair-confete 1.1s ease-out forwards;
}

@keyframes cair-confete {
  to {
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot));
    opacity: 0;
  }
}

/* Raspadinha brilhante (5% de chance na 1a raspagem de cada
   município, ver decidirBrilhante em js/script.js): luz irradiando
   do selo pra fora, tipo um sol -- raios girando devagar (::before)
   por trás de um brilho pulsante (::after), tudo via CSS puro (sem
   nenhuma partícula criada por JS). */
/* Selo dourado: efeito "light sweep" -- uma faixa de luz diagonal que
   varre o selo de tempos em tempos (tipo reflexo em cartão holográfico),
   recortada num círculo pra seguir o formato do selo. Substitui os
   antigos raios girantes (removidos). */
.selo-brilhante {
  position: relative;
  /* isolation: cria um contexto de empilhamento próprio -- sem isso,
     os raios do ::before/::after (z-index negativo) escapavam pro
     contexto do modal (#modal-raspadinha, que tem z-index:100) e
     eram pintados ATRÁS do fundo opaco de #modal-conteudo, ficando
     escondidos mesmo com a animação rodando normalmente. */
  isolation: isolate;
  /* O border-radius é o que faltava: com overflow:hidden num elemento
     SEM raio, o recorte era um retângulo, e os quatro cantos do
     "quadrado invisível" apareciam por trás do selo redondo sempre que
     a luz passava por eles. O aspect-ratio garante que 50% seja
     círculo de verdade, e não elipse, se a altura vier do conteúdo. */
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.selo-brilhante::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Raio menor que o círculo real do selo (~48%) pra garantir que a luz
     NUNCA vaze pra fora da imagem, nem na moldura/margem transparente
     do webp. */
  clip-path: circle(42% at 50% 50%);
  background: linear-gradient(
    115deg,
    transparent 42%,
    rgba(255, 255, 255, 0.3) 48%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(255, 255, 255, 0.3) 52%,
    transparent 58%
  );
  transform: translateX(-100%);
  animation: sweep-dourado 5s ease-in-out infinite;
  animation-delay: 0.8s;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 2;
}

/* Na grade da biblioteca/perfil: o sweep vai por cima da imagem do selo
   (que é circular), recortado no mesmo círculo. */
.selo-item-brilhante {
  overflow: hidden;
  border-radius: 12px;
}

.selo-item-brilhante::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 1 / 1;
  clip-path: circle(40% at 50% 50%);
  background: linear-gradient(
    115deg,
    transparent 42%,
    rgba(255, 255, 255, 0.35) 48%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0.35) 52%,
    transparent 58%
  );
  transform: translateX(-100%);
  animation: sweep-dourado 5s ease-in-out infinite;
  animation-delay: 1.4s;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 2;
}

/* Movimento suave e lento: atravessa o selo devagar (60% do ciclo,
   ~3s) e descansa o resto do tempo. -100%/100% (não 130%) porque agora
   o clip-path já é bem menor que a caixa (40-42%), então não precisa de
   folga extra pra "entrar" varrendo desde fora do círculo. */
@keyframes sweep-dourado {
  0% {
    transform: translateX(-100%);
  }
  60%,
  100% {
    transform: translateX(100%);
  }
}

@keyframes pulsar-brilho {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes girar-raios {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes respirar-raios {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

/* Aviso flutuante de login em segundo plano (nao trava a tela) */
#toast-login {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 16px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  z-index: 400;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(23, 27, 33, 0.95);
  backdrop-filter: blur(6px);
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  font-size: 0.85rem;
  max-width: 260px;
  cursor: default;
  animation: entrar-toast 0.25s ease;
}

#toast-login.oculto {
  display: none;
}

#toast-login.toast-sucesso {
  border: 1px solid #2BD576;
}

#toast-login.toast-erro {
  border: 1px solid #F0616D;
  cursor: pointer;
}

#toast-login .spinner {
  flex-shrink: 0;
}

#toast-login.toast-sucesso .spinner,
#toast-login.toast-erro .spinner {
  display: none;
}

@keyframes entrar-toast {
  from {
    transform: translateY(12px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Aviso flutuante sugerindo instalar o app (PWA) */
#aviso-instalar-pwa {
  position: fixed;
  left: calc(env(safe-area-inset-left, 0px) + 16px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  z-index: 395;
  background: rgba(23, 27, 33, 0.95);
  backdrop-filter: blur(6px);
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  font-size: 0.85rem;
  max-width: 300px;
  animation: entrar-toast 0.25s ease;
}

#aviso-instalar-pwa.oculto {
  display: none;
}

#aviso-instalar-linha {
  display: flex;
  align-items: center;
  gap: 10px;
}

.aviso-instalar-icone {
  font-size: 1.3rem;
  flex-shrink: 0;
}

#aviso-instalar-texto {
  flex: 1;
}

#btn-fechar-aviso-pwa {
  flex-shrink: 0;
  background: none;
  border: none;
  color: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 2px 4px;
  opacity: 0.7;
}

#btn-fechar-aviso-pwa:hover {
  opacity: 1;
}

#aviso-instalar-instrucoes {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  line-height: 1.4;
}

#aviso-instalar-instrucoes.oculto {
  display: none;
}

#aviso-instalar-acoes {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

#aviso-instalar-acoes button.oculto {
  display: none;
}

#btn-instalar-pwa,
#btn-como-instalar-pwa {
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.8rem;
  cursor: pointer;
}

#btn-instalar-pwa {
  background: #2BD576;
  color: #0F1216;
  font-weight: 600;
}

#btn-como-instalar-pwa {
  background: rgba(255, 255, 255, 0.12);
  color: inherit;
}

/* =========================================================
   Gamificação: Ranking, Conquistas, Amigos, Check-in mensal,
   raspadinha brilhante e curiosidade do município.
   ========================================================= */

#apelido-conteudo {
  position: relative;
}

#btn-fechar-apelido {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--fraco);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 6px;
}

#btn-fechar-apelido:hover {
  color: var(--txt);
}

/* Container comum (mesmo visual do popup de região) reaproveitado
   pelos modais de Ranking/Conquistas/Amigos/Check-in */
#modal-ranking,
#modal-conquistas,
#modal-amigos,
#modal-compartilhar,
#modal-perfil,
#modal-historia-municipio,
#modal-feedback {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(15, 18, 22, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#ranking-conteudo,
#conquistas-conteudo,
#amigos-conteudo,
#compartilhar-conteudo,
#perfil-conteudo,
#historia-municipio-conteudo,
#F7E4B8ck-conteudo {
  position: relative;
  background: var(--surf);
  border-radius: 12px;
  padding: 24px;
  max-width: 440px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  text-align: center;
}

#ranking-conteudo h2,
#conquistas-conteudo h2,
#amigos-conteudo h2,
#compartilhar-conteudo h2,
#perfil-conteudo h2,
#historia-municipio-conteudo h2,
#F7E4B8ck-conteudo h2 {
  margin-top: 0;
  font-size: 1.15rem;
}

#btn-fechar-ranking,
#btn-fechar-conquistas,
#btn-fechar-amigos,
#btn-fechar-compartilhar,
#btn-fechar-perfil,
#btn-fechar-historia-municipio,
#btn-fechar-feedback {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--fraco);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 6px;
}

#btn-fechar-ranking:hover,
#btn-fechar-conquistas:hover,
#btn-fechar-amigos:hover,
#btn-fechar-compartilhar:hover,
#btn-fechar-perfil:hover,
#btn-fechar-historia-municipio:hover,
#btn-fechar-feedback:hover {
  color: var(--txt);
}

/* ---- Feedback e colaboração ---- */

#F7E4B8ck-intro {
  color: var(--fraco);
  font-size: 0.85rem;
  margin: 0 0 16px;
}

#F7E4B8ck-opcoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}

.feedback-opcao {
  background: var(--bg);
  border: 1px solid var(--linha);
  color: var(--txt);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}

.feedback-opcao:hover {
  background: var(--surf);
  border-color: #262C35;
}

.feedback-opcao.feedback-opcao-ativa {
  border-color: #2BD576;
  background: var(--bg);
}

.feedback-painel {
  text-align: left;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--linha);
}

.feedback-painel h3 {
  font-size: 0.95rem;
  margin: 0 0 8px;
}

.feedback-painel p {
  color: var(--fraco);
  font-size: 0.82rem;
  margin: 0 0 10px;
}

.feedback-painel textarea,
.feedback-painel input[type="text"] {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--linha);
  color: var(--txt);
  border-radius: 8px;
  padding: 10px;
  font-size: 0.85rem;
  font-family: inherit;
  margin-bottom: 10px;
}

.feedback-painel textarea {
  resize: vertical;
}

.feedback-painel button[id^="btn-enviar-feedback"] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: #2BD576;
  color: #0F1216;
  border: none;
  border-radius: 8px;
  padding: 10px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

.feedback-status {
  font-size: 0.8rem;
  margin: 8px 0 0;
}

.feedback-status.status-sucesso {
  color: #86E8B0;
}

.feedback-status.status-erro {
  color: #F08A94;
}

#pix-chave-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 10px 12px;
}

#pix-chave-texto {
  flex: 1;
  font-size: 0.85rem;
  word-break: break-all;
  color: var(--txt);
}

#btn-copiar-pix {
  background: #2BD576;
  color: #0F1216;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  flex-shrink: 0;
}

/* ---- Boas-vindas / tutorial (1a vez) ---- */

#modal-boas-vindas {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(15, 18, 22, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#boas-vindas-conteudo {
  background: var(--surf);
  border: 1px solid #2BD576;
  border-radius: 12px;
  padding: 26px 22px;
  max-width: 460px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  text-align: center;
}

#boas-vindas-conteudo h2 {
  margin-top: 0;
}

#boas-vindas-conteudo > p {
  color: var(--fraco);
  font-size: 0.88rem;
  line-height: 1.5;
  text-align: left;
  margin-bottom: 18px;
}

.boas-vindas-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  background: var(--bg);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
}

.boas-vindas-icone {
  font-size: 1.4rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}

.boas-vindas-item h3 {
  margin: 0 0 4px;
  font-size: 0.9rem;
}

.boas-vindas-item p {
  margin: 0;
  color: var(--fraco);
  font-size: 0.8rem;
  line-height: 1.4;
}

#btn-fechar-boas-vindas {
  width: 100%;
  background: #2BD576;
  color: #0F1216;
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  margin-top: 8px;
}

/* ---- Aviso: app em desenvolvimento ---- */

#modal-aviso-desenvolvimento {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(15, 18, 22, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#aviso-desenvolvimento-conteudo {
  background: var(--surf);
  border: 1px solid #2BD576;
  border-radius: 12px;
  padding: 26px 22px;
  max-width: 420px;
  width: 100%;
  text-align: center;
}

#aviso-desenvolvimento-conteudo h2 {
  margin-top: 0;
}

#aviso-desenvolvimento-conteudo p {
  color: var(--fraco);
  font-size: 0.88rem;
  line-height: 1.5;
  text-align: left;
}

#btn-fechar-aviso-desenvolvimento {
  width: 100%;
  background: #2BD576;
  color: #0F1216;
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  margin-top: 8px;
}

/* Corpo da historia completa do municipio: paragrafos alinhados a
   esquerda pra ficar legivel (o container comum acima e centralizado,
   bom pro titulo mas ruim pra texto corrido) */
#historia-municipio-corpo {
  text-align: left;
}

#historia-municipio-corpo p {
  color: var(--fraco);
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 0 0 16px;
}

#historia-municipio-corpo p:last-child {
  margin-bottom: 0;
}

/* ---- Notificações ---- */

#notificacoes-status {
  font-size: 0.78rem;
  color: #F08A94;
  margin: 0 0 6px;
}

/* ---- Aparência: segmented control (4 opções) ----
   Mesmo padrão das abas da Garagem (#garagem-abas): uma trilha
   contínua em var(--bg) com os botões transparentes por cima, então
   os inativos "afundam" no recesso escuro sem precisar de um
   rgba() fixo -- que inverteria errado no tema Claro. Só o ativo
   ganha pill, aqui no verde do app em vez do cinza da Garagem,
   porque tema é uma escolha ligada/desligada, não navegação. */
/* Tudo aqui é escopado em #configuracoes-conteudo e com !important de
   propósito: a "CAMADA UI MODERNA" (fim deste arquivo) força
   background/color/border/box-shadow em TODO #configuracoes-conteudo
   button, e ela vence por especificidade + !important. Sem isso, o
   botão ativo sai cinza (var(--surf2)) em vez de verde. */
#configuracoes-conteudo #aparencia-opcoes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--bg);
  border: 1px solid var(--linha);
  border-radius: 12px;
  padding: 3px;
  margin: 2px 0 0;
}

#configuracoes-conteudo .aparencia-opcao {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: auto;
  margin: 0;
  padding: 7px 2px;
  background: transparent !important;
  color: var(--fraco) !important;
  border: none !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.aparencia-opcao-icone {
  font-size: 0.95rem;
  line-height: 1;
}

/* var(--verde-tinta) (e não #FFF) é o texto sobre o verde vibrante:
   fica legível nos dois temas, já que o verde não muda. */
#configuracoes-conteudo .aparencia-opcao.active {
  background: var(--verde) !important;
  color: var(--verde-tinta) !important;
  box-shadow: 0 1px 5px rgba(43, 213, 118, 0.3) !important;
}

#configuracoes-conteudo .aparencia-opcao:active {
  transform: scale(0.96);
}


/* ---- Perfil no estilo do app (cabeçalho + dashboard + minimapa +
   últimos conquistados) ---- */
.perfil-cabecalho {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 4px 0 18px;
}

.perfil-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 0.5px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  margin-bottom: 12px;
}

.perfil-nome {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--txt);
  line-height: 1.2;
}

/* Pílula logo abaixo do apelido -- dourada pra membro do Motoclube
   (souMembroMotoclube), cinza neutra pra quem ainda não é. */
.perfil-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.perfil-badge-pro {
  background: rgba(233, 185, 73, 0.15);
  color: var(--ouro);
  border: 1px solid rgba(233, 185, 73, 0.4);
}

.perfil-badge-free {
  background: var(--surf2);
  color: var(--fraco);
  border: 1px solid var(--linha);
}

/* Dashboard 2x2: Municípios, Selos Dourados, Rotas Concluídas, Regiões. */
.perfil-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.perfil-stat {
  background: var(--surf2);
  border-radius: 14px;
  padding: 16px 6px;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.perfil-stat-num {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--verde);
  line-height: 1;
}

.perfil-stat-num small {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fraco);
}

.perfil-stat-num.perfil-stat-ouro {
  color: var(--ouro);
}

.perfil-stat-rot {
  font-size: 0.72rem;
  color: var(--fraco);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: center;
}

.perfil-secao-titulo {
  font-size: 0.9rem;
  color: var(--fraco);
  margin: 4px 0 10px;
  font-weight: 700;
  text-align: left;
}

/* Minimapa: encaixado com elegância -- cantos arredondados, borda bem
   sutil, e o fundo do CONTAINER igual ao card do app (não dá pra
   remover via CSS a cor de fundo já "assada" dentro do PNG salvo,
   ver gerarSnapshotMapaComoDataUrl -- isso deixa as bordas
   sobrando/letterbox se misturarem em vez de aparecer um retângulo
   azul marinho destacado). */
#perfil-mapa-mini {
  margin: 0 0 16px;
  height: 160px;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--surf);
}

#perfil-mapa-mini .mini-mapa-imagem {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#perfil-mapa-mini .mini-mapa-vazio {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  color: var(--fraco);
  font-size: 0.8rem;
  text-align: center;
  padding: 0 12px;
}

/* "Últimos conquistados": só 4 selos numa linha só (ver
   renderizarUltimosConquistadosPerfil) -- fim da rolagem infinita que
   repetia a Biblioteca inteira aqui. */
#perfil-ultimos-conquistados {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 14px;
}

#perfil-ultimos-conquistados .selo-item {
  pointer-events: none;
}

#perfil-ultimos-conquistados .selo-item .selo-placeholder-box,
#perfil-ultimos-conquistados .selo-item img {
  width: 56px;
  height: 56px;
}

.perfil-ultimos-vazio {
  color: #6B7480;
  font-size: 0.82rem;
  text-align: center;
  padding: 12px 0;
}

/* Botão outline, longo -- fecha o Perfil e abre a Biblioteca cheia
   (só aparece no próprio perfil, ver ehOProprioPerfil em abrirPerfil). */
#btn-perfil-ver-biblioteca {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: transparent;
  color: var(--verde);
  border: 1px solid rgba(43, 213, 118, 0.4);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 4px;
}

#btn-perfil-ver-biblioteca:hover {
  background: var(--verde-esc);
}

#compartilhar-conteudo p {
  color: var(--fraco);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 8px 0 18px;
}

#btn-compartilhar-de-fato {
  width: 100%;
  background: #2BD576;
  color: #0F1216;
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
}

#btn-compartilhar-de-fato:hover {
  background: #1FA85C;
}

/* ---- Ranking ---- */

/* Tabs minimalistas: mesmo padrão de #social-abas, ver override
   escopado (#ranking-abas .ranking-aba) mais abaixo no arquivo, que é
   quem realmente define a cor/risco -- isso aqui é só a base/layout. */
#ranking-abas {
  display: flex;
  gap: 24px;
  margin: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.ranking-aba {
  flex: none;
  padding: 10px 2px;
  margin-bottom: -1px;
  cursor: pointer;
  font-size: 0.86rem;
}

/* Lista com altura própria e rolagem própria: é o que dá pra
   .ranking-me-fixa grudar (position: sticky) no rodapé de forma
   previsível, sem depender de quanto o resto do modal ocupa. */
#ranking-lista {
  display: flex;
  flex-direction: column;
  max-height: 54vh;
  overflow-y: auto;
  text-align: left;
  margin-top: 6px;
}

/* Linha "chapada": sem cartão fechado, só uma divisória fina embaixo
   -- mesmo espírito do feed da Comunidade. */
.ranking-linha {
  display: grid;
  grid-template-columns: 2.2em 34px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 4px;
  font-size: 0.85rem;
  border-bottom: 1px solid #1A1E24;
  cursor: pointer;
}

.ranking-posicao {
  color: var(--fraco);
  font-weight: 600;
  text-align: center;
}

/* Pódio: 1º/2º/3º viram medalha, sem precisar de número -- o próprio
   emoji já "é" a cor metálica (dourado/prata/bronze). */
.ranking-medalha {
  font-size: 1.15rem;
  font-weight: normal;
}

.ranking-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
}

.ranking-apelido {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-pontos {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  line-height: 1.1;
}

.ranking-count {
  color: var(--verde);
  font-weight: 700;
  font-size: 0.95rem;
}

.ranking-selos-label {
  color: #6B7480;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Linha do próprio usuário: fundo verde bem translúcido + borda,
   pra destacar sem virar um cartão pesado. */
.ranking-me {
  background: rgba(43, 213, 118, 0.1);
  border-bottom-color: rgba(43, 213, 118, 0.3);
  border-radius: 10px;
  padding-left: 8px;
  padding-right: 8px;
}

/* Só quando o usuário NÃO está no top 50 renderizado: a linha dele é
   anexada no fim e fica "presa" no rodapé da lista (que tem scroll
   próprio, ver #ranking-lista) -- nunca some, mesmo na posição #45. */
.ranking-me-fixa {
  position: sticky;
  bottom: 0;
  margin-top: 4px;
  background: var(--surf);
  box-shadow: 0 -8px 12px -4px rgba(0, 0, 0, 0.5);
  border-bottom: none;
}
.ranking-me-fixa.ranking-me {
  background: rgba(23, 27, 33, 0.97);
}

.badge-pro {
  display: inline-block;
  margin-left: 6px;
  background: #E9B949;
  color: #422006;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  border-radius: 5px;
  padding: 1px 5px;
  vertical-align: middle;
}

/* ---- Conquistas: lista horizontal (medalha 76px + coluna de
   info), em vez do card vertical gigante de antes -- cabe muito
   mais conquista por tela. ---- */

#conquistas-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.conquista-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px;
  text-align: left;
}

.conquista-medalha {
  flex: none;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* O selo-revelado padrão é 300px -- aqui precisa caber nos 76px do
   medalhão (mesma ideia do modificador -pequeno/-grande já usados
   pro selo de município). */
.conquista-medalha .selo-revelado-wrapper {
  width: 76px;
}
.selo-revelado.selo-revelado-conquista {
  width: 76px;
}

.conquista-medalha-lock {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #23262c 0%, #101215 72%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4A515C;
}

.conquista-medalha .spinner.spinner-grande {
  width: 24px;
  height: 24px;
  border-width: 3px;
  margin: 0;
}

.conquista-info {
  flex: 1;
  min-width: 0;
}

.conquista-cabecalho {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.conquista-item h3 {
  margin: 0;
  font-size: 0.9rem;
  color: var(--txt);
}

.conquista-raridade {
  display: inline-block;
  flex: none;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--txt);
}

/* Cores por raridade: comum (cinza translúcido), incomum (verde),
   raro/muito-raro (roxo-azulado), lendário (dourado) -- farmador é
   um tier extra à parte, mantém o tom vermelho próprio. */
.conquista-raridade.raridade-incomum {
  background: rgba(43, 213, 118, 0.18);
  color: #6FE3A0;
}

.conquista-raridade.raridade-raro,
.conquista-raridade.raridade-muito-raro {
  background: rgba(139, 124, 246, 0.2);
  color: #B7A8FF;
}

.conquista-raridade.raridade-lendario {
  background: rgba(233, 185, 73, 0.2);
  color: #E9B949;
}

.conquista-raridade.raridade-farmador {
  background: rgba(240, 97, 109, 0.25);
  color: #F08A94;
}

.conquista-descricao {
  color: var(--fraco);
  font-size: 0.8rem;
  margin: 4px 0 0;
}

.conquista-instrucao {
  color: var(--fraco);
  font-size: 0.75rem;
  margin: 4px 0 0;
}

.conquista-instrucao:empty {
  display: none;
}

.conquista-progresso-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.conquista-progresso-linha .conquista-barra {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: var(--surf2);
  overflow: hidden;
}

.conquista-barra-preenchida {
  height: 100%;
  background: #2BD576;
  transition: width 0.3s ease;
}

.conquista-progresso-texto {
  flex: none;
  color: var(--fraco);
  font-size: 0.72rem;
  font-weight: 700;
}

.selo-revelado-pequeno {
  width: 200px;
}

/* Quadrado explícito: a imagem já é 1/1, mas o wrapper tirava a altura
   do conteúdo. Sem isso, o border-radius:50% do .selo-brilhante virava
   elipse enquanto a imagem não tivesse carregado, e o anel de "não
   verificado" (::before, inset:-6px) ficava ovalado junto. */
.selo-revelado-wrapper {
  position: relative;
  width: 300px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

.selo-revelado-wrapper .selo-revelado {
  margin: 0;
}

.selo-revelado.selo-revelado-grande {
  width: 400px;
}

.selo-revelado-wrapper:has(.selo-revelado-grande) {
  width: 400px;
}

.selo-revelado-wrapper:has(.selo-revelado-pequeno) {
  width: 200px;
}

/* ---- Amigos ---- */

/* Barra de busca (input com lupa interna) + botão quadrado do link
   "me adicione" ao lado -- substitui o bloco gigante antigo. */
#amigos-busca {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

#amigos-busca-campo {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--linha);
  background: var(--bg);
  color: var(--fraco);
}

#amigos-busca-campo .ico-svg {
  flex-shrink: 0;
}

#input-busca-amigo {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 11px 0;
  color: var(--txt);
  font-size: 0.9rem;
}

#input-busca-amigo:focus {
  outline: none;
}

/* Botão "Me adicione como amigo(a)": virou um quadrado de ícone ao
   lado da busca, mesmo id/handler (compartilharLinkAmigo). */
.btn-link-amigo {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(43, 213, 118, 0.15);
  color: var(--verde);
  border: 1px solid rgba(43, 213, 118, 0.45);
  border-radius: 10px;
  cursor: pointer;
}

.btn-link-amigo:hover {
  background: rgba(43, 213, 118, 0.25);
}

#amigos-resultado-busca:not(:empty) {
  margin-bottom: 14px;
}

.amigo-resultado-item,
.amigo-pedido-item,
.amigo-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border-radius: 10px;
  padding: 9px 10px;
  font-size: 0.85rem;
  margin-bottom: 6px;
  text-align: left;
}

/* Avatar circular (foto ou, na falta dela, iniciais sobre um
   gradiente determinístico -- mesmo padrão de .post-avatar na
   Comunidade, ver corAvatar/iniciaisApelido em js/script.js). */
.amigo-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
}

.amigo-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.amigo-apelido {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--txt);
  cursor: pointer;
}

.amigo-count {
  color: var(--fraco);
  font-size: 0.78rem;
}

.btn-adicionar-amigo,
.btn-aceitar-pedido {
  background: #2BD576;
  color: #0F1216;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.btn-adicionar-amigo:disabled {
  background: var(--surf2);
  color: var(--fraco);
  cursor: not-allowed;
}

.btn-recusar-pedido {
  background: transparent;
  color: var(--fraco);
  border: 1px solid var(--linha);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.amigo-pedido-acoes {
  display: flex;
  gap: 6px;
  flex: none;
}

/* "⋮" no lugar do antigo botão vermelho "Remover" -- abre um
   dropdown pequeno em vez de expor a ação destrutiva direto na
   linha. */
.amigo-btn-menu {
  flex: none;
  background: transparent;
  border: none;
  color: var(--fraco);
  font-size: 1.2rem;
  line-height: 1;
  padding: 6px 8px;
  cursor: pointer;
}

.amigo-btn-menu:hover {
  color: var(--txt);
}

.amigo-menu {
  position: absolute;
  top: calc(100% + 2px);
  right: 6px;
  z-index: 5;
  background: var(--surf2);
  border: 1px solid #2A303A;
  border-radius: 12px;
  padding: 4px;
  min-width: 230px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.amigo-menu.oculto {
  display: none;
}

.amigo-menu-op {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--txt);
  font-size: 0.85rem;
  cursor: pointer;
}

.amigo-menu-op:hover {
  background: rgba(255, 255, 255, 0.06);
}

.amigo-menu-desfazer {
  color: #F0616D;
}

#amigos-pedidos h3,
#amigos-lista-secao h3 {
  font-size: 0.85rem;
  color: var(--fraco);
  margin: 16px 0 8px;
  text-align: left;
}

/* Empty state elegante: nada de texto solto -- ícone sutil + frase
   curta, centralizados, num cinza mais discreto que o texto normal. */
.amigos-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 12px;
  color: #6B7480;
  font-size: 0.82rem;
  text-align: center;
}

.amigos-vazio .ico-svg {
  width: 28px;
  height: 28px;
  opacity: 0.55;
}

/* ---- Marca de selo brilhante na biblioteca/perfil ---- */

.selo-item-brilhante img {
  border-color: #E9B949;
  box-shadow: 0 0 10px 1px rgba(233, 185, 73, 0.6);
}

/* Mesmo efeito de sol (raios girando) do popup principal
   (.selo-brilhante em css/styles.css), só que com um raio menor pra
   caber numa grade com vários selos lado a lado sem invadir o
   vizinho -- reaproveita as mesmas @keyframes girar-raios/
   respirar-raios. Persiste sempre, não só na hora de raspar. */
.selo-item-brilhante {
  /* mesmo motivo do .selo-brilhante acima: sem isolar o contexto de
     empilhamento, o ::before de z-index negativo escapava pro fundo
     opaco do card/modal ancestral e ficava escondido. */
  isolation: isolate;
}

/* (raios girantes do selo dourado na grade removidos -- ver acima) */

.selo-item {
  position: relative;
}

.selo-marca-brilhante {
  position: absolute;
  top: 2px;
  right: 6px;
  font-size: 0.9rem;
}

/* ---- Curiosidade do município (só depois de raspar) ---- */

#modal-curiosidade:not(:empty) {
  text-align: left;
  margin-top: 14px;
  background: var(--bg);
  border-radius: 8px;
  padding: 10px 12px;
}

#modal-curiosidade h3 {
  font-size: 0.85rem;
  color: var(--fraco);
  margin: 0 0 6px;
}

#modal-curiosidade p {
  font-size: 0.85rem;
  color: var(--fraco);
  margin: 0;
}

#modal-curiosidade .curiosidade-vazia {
  color: var(--fraco);
  font-style: italic;
}

.btn-saiba-mais-municipio {
  display: block;
  margin: 10px 0 0;
  background: transparent;
  border: 1px solid var(--linha);
  color: #86E8B0;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.8rem;
  cursor: pointer;
}

.btn-saiba-mais-municipio:hover {
  background: var(--surf);
  border-color: #262C35;
}

/* ---- Aviso flutuante: raspadinha brilhante garantida pendente ---- */

#aviso-brilhante-pendente {
  position: fixed;
  /* Fica acima da barra inferior, não mais no topo (onde encostava na
     barra superior nova). E NUNCA bloqueia toque -- é só um aviso. */
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  pointer-events: none;
  background: rgba(23, 27, 33, 0.95);
  border: 1px solid #E9B949;
  border-radius: 16px;
  padding: 8px 16px;
  font-size: 0.8rem;
  max-width: min(90vw, 320px);
  text-align: center;
  box-shadow: 0 0 14px 2px rgba(233, 185, 73, 0.4);
  animation: pulsar-brilho 1.8s ease-in-out infinite, entrar-toast 0.25s ease;
}

#aviso-brilhante-pendente.oculto {
  display: none;
}

/* ---- Verificação por localização (GPS) ---- */

#btn-verificar-local {
  display: block;
  width: 100%;
  background: #2BD576;
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0 0 12px;
}

#btn-verificar-local:hover {
  background: #1FA85C;
}

#btn-verificar-local:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

#btn-verificar-local.oculto {
  display: none;
}

.selo-revelado-wrapper.selo-nao-verificado-wrapper::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 3px solid #2BD576;
  pointer-events: none;
}

.selo-item img.selo-nao-verificado {
  border-color: #2BD576;
  opacity: 0.85;
}

.selo-item-nao-verificado img {
  box-shadow: 0 0 10px 1px rgba(43, 213, 118, 0.6);
}

.selo-marca-alerta {
  position: absolute;
  top: 2px;
  right: 6px;
  font-size: 0.9rem;
}

/* =========================================================
   CAMADA UI MODERNA
   Aplicada por cima do resto pra dar o acabamento aprovado:
   superfícies planas com cantos suaves, uma cor de destaque
   com significado (verde = visitado/conquistado, igual ao
   mapa), dourado reservado ao selo raro, e nada de realce de
   toque azul do Android.
   ========================================================= */
:root {
  --bg: #0F1216;
  --surf: #171B21;
  --surf2: #1E232B;
  --linha: rgba(255, 255, 255, 0.07);
  --txt: #F2F5F7;
  --fraco: #8E97A3;
  --verde: #2BD576;
  --verde-esc: #12351F;
  --verde-tinta: #06210F;
  --ouro: #E9B949;
  --erro: #F0616D;
  --raio: 14px;
  /* Superfícies "de vidro" flutuantes por cima do mapa (topbar,
     botões redondos, dica) e o véu escurecido atrás de modais/menus. */
  --vidro: rgba(23, 27, 33, 0.9);
  --backdrop: rgba(15, 18, 22, 0.85);
}

/* =========================================================
   TEMA CLARO -- mesmas variáveis, valores invertidos. Aplicado via
   [data-theme="light"] no <html> (ver definirTema/aplicarDataTheme em
   js/script.js). Sem o atributo, ou com [data-theme="dark"], continua
   no escuro de sempre (era o único tema até aqui). O verde/dourado/
   erro do app permanecem os mesmos nos dois temas -- são cor de
   estado (visitado/raro/perigo), não decoração.
   ========================================================= */
:root[data-theme="light"] {
  --bg: #F4F6F8;
  --surf: #FFFFFF;
  --surf2: #ECEFF2;
  --linha: rgba(15, 18, 22, 0.1);
  --txt: #12151A;
  --fraco: #5B6470;
  --verde-esc: #DDF5E6;
  /* --verde-tinta fica igual nos dois temas: é o texto ESCURO sobre o
     botão verde vibrante, não muda com o tema geral da página. */
  --vidro: rgba(255, 255, 255, 0.85);
  --backdrop: rgba(20, 24, 30, 0.5);
}

/* Modo "Sistema" (nenhum data-theme fixado, ver aplicarDataTheme em
   js/script.js): segue o SO via prefers-color-scheme. Só entra em
   ação quando NÃO há data-theme="dark" explícito (Claro já é coberto
   pela regra de atributo acima, que vale sempre, com ou sem essa
   media query). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F4F6F8;
    --surf: #FFFFFF;
    --surf2: #ECEFF2;
    --linha: rgba(15, 18, 22, 0.1);
    --txt: #12151A;
    --fraco: #5B6470;
    --verde-esc: #DDF5E6;
    --vidro: rgba(255, 255, 255, 0.85);
    --backdrop: rgba(20, 24, 30, 0.5);
  }
}

/* ---- Fim do quadrado azul: o realce de toque do Android
        aparecia em cima dos municípios do SVG e dos botões. ---- */
html {
  -webkit-tap-highlight-color: transparent;
}
* {
  -webkit-tap-highlight-color: transparent;
}
#mapa-rj .municipio,
button,
a {
  -webkit-touch-callout: none;
}
/* O contorno de foco continua existindo pra quem navega por
   teclado -- só deixa de ser o retângulo azul padrão. */
:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* ---- Superfícies: modais e cartões ---- */
[id$="-conteudo"],
.post-card,
.sugestao-card,
.conquista-item {
  background: var(--surf) !important;
  border: 1px solid var(--linha) !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5) !important;
}

/* ---- Botões flutuantes do mapa: cantos suaves, vidro ---- */
#botoes-topo button,
#botoes-lateral-esquerda button,
#btn-buscar-local,
#btn-onde-estou {
  background: var(--vidro) !important;
  border: 1px solid var(--linha) !important;
  border-radius: 14px !important;
  color: var(--txt) !important;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
#botoes-topo button:active,
#botoes-lateral-esquerda button:active,
#btn-buscar-local:active,
#btn-onde-estou:active {
  transform: scale(0.94);
  color: var(--verde) !important;
}

/* ---- Botões de ação: sólidos, sem gradiente ---- */
#btn-verificar-local,
#btn-publicar-post,
#btn-publicar-sugestao,
#btn-entrar-email,
#btn-confirmar-apelido,
#btn-salvar-apelido-config,
#btn-abrir-nova-sugestao,
#btn-compartilhar-de-fato,
#btn-fechar-boas-vindas,
#btn-instalar-pwa,
#btn-sair-rota,
#btn-copiar-pix,
#btn-fechar-aviso-desenvolvimento,
#cartao-progresso-acoes button,
.post-card-novo-comentario button,
.sugestao-card-novo-comentario button {
  background: var(--verde) !important;
  color: var(--verde-tinta) !important;
  border: none !important;
  border-radius: 13px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transition: transform 0.1s, filter 0.15s;
}
#btn-verificar-local:active,
#btn-publicar-post:active,
#btn-publicar-sugestao:active {
  transform: scale(0.98);
  filter: brightness(0.92);
}

/* ---- Botões neutros ---- */
#configuracoes-conteudo button,
#admin-conteudo button,
.btn,
#btn-baixar-offline,
#btn-social-carregar-mais,
#btn-marcar-pessoa {
  background: var(--surf2) !important;
  color: var(--txt) !important;
  border: 1px solid var(--linha) !important;
  border-radius: 13px !important;
  box-shadow: none !important;
}

/* ---- Campos ---- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="search"],
textarea,
select {
  background: var(--surf2) !important;
  color: var(--txt) !important;
  border: 1px solid var(--linha) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--verde) !important;
  outline: none;
}

/* Ranking migrou pro mesmo padrão minimalista de #social-abas (ver
   comentário lá): sem fundo em nenhum dos dois estados, só texto +
   risco embaixo quando ativo. */
#ranking-abas .ranking-aba {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: var(--fraco) !important;
  font-weight: 600 !important;
}
#ranking-abas .ranking-aba-ativa {
  color: var(--txt) !important;
  border-bottom-color: var(--verde) !important;
}

/* Biblioteca de selos: mesmo padrão minimalista. */
#biblioteca-abas .biblioteca-aba {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: var(--fraco) !important;
  font-weight: 600 !important;
}
#biblioteca-abas .biblioteca-aba-ativa {
  color: var(--txt) !important;
  border-bottom-color: var(--verde) !important;
}

/* Rotas Temáticas: mesmo padrão minimalista. */
#rotas-abas .rotas-aba {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: var(--fraco) !important;
  font-weight: 600 !important;
}
#rotas-abas .rotas-aba-ativa {
  color: var(--txt) !important;
  border-bottom-color: var(--verde) !important;
}

/* Tabs da Comunidade (#social-abas) são o único caso minimalista --
   sem fundo em nenhum dos dois estados, só texto + risco embaixo
   quando ativo. Qualificado com o container pra vencer qualquer
   regra genérica de botão (mesmo raciocínio de especificidade usado
   em Configurações, ver #configuracoes-conteudo .settings-btn-*). */
#social-abas .social-aba {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: var(--fraco) !important;
  font-weight: 600 !important;
}
#social-abas .social-aba-ativa {
  color: var(--txt) !important;
  border-bottom-color: var(--verde) !important;
}

/* ---- Chips ---- */
.sugestao-card-categoria,
.post-card-municipio,
.chip-pessoa-marcada {
  background: var(--verde-esc) !important;
  color: var(--verde) !important;
  border: none !important;
  border-radius: 99px !important;
  box-shadow: none !important;
  font-weight: 600;
}

/* ---- Barras de progresso ---- */
#biblioteca-barra,
#regiao-barra,
#rota-detalhe-barra,
.conquista-barra {
  background: var(--surf2) !important;
  border: none !important;
  border-radius: 99px !important;
  box-shadow: none !important;
  overflow: hidden;
}
#biblioteca-barra-preenchida,
#regiao-barra-preenchida,
#rota-detalhe-barra-preenchida,
.conquista-barra-preenchida {
  background: var(--verde) !important;
  box-shadow: none !important;
}

/* ---- Município selecionado no mapa: anel verde no lugar do
        antigo destaque. ---- */
#mapa-rj .municipio.selecionado {
  stroke: var(--verde) !important;
  stroke-width: 2.5 !important;
  paint-order: stroke;
}

/* Botões de ênfase que vivem DENTRO de Configurações/Admin precisam
   de especificidade maior que a regra dos botões neutros daquele
   container, senão saem cinzas. */
/* Hierarquia de cores de Configurações: só "Salvar apelido" é o
   botão primário (verde vibrante, cheio) -- é a única ação com valor
   de verdade nesse card. Os demais botões neutros/secundários usam
   .settings-btn-secundario (fundo transparente, borda verde). */
#configuracoes-conteudo #btn-salvar-apelido-config,
#admin-conteudo .moderacao-item-acoes button.status-ativa {
  background: var(--verde) !important;
  color: var(--verde-tinta) !important;
  border: none !important;
  font-weight: 700 !important;
}

/* Qualificado com #configuracoes-conteudo (mesma especificidade da
   regra "botões neutros" acima, ID + classe > ID + tipo) -- senão a
   regra genérica de botão neutro ganhava mesmo com !important dos
   dois lados. */
#configuracoes-conteudo .settings-btn-secundario {
  background: transparent !important;
  color: var(--verde) !important;
  border: 1px solid var(--verde) !important;
  font-weight: 600 !important;
}

#configuracoes-conteudo .settings-btn-secundario:hover {
  background: var(--verde-esc) !important;
}

/* Ações destrutivas continuam vermelhas -- a regra dos botões neutros
   de Configurações é mais específica, então precisam vir depois e com
   a mesma força. */
#configuracoes-conteudo .settings-btn-perigo,
#confirmar-exclusao-conteudo #btn-excluir-de-vez {
  background: var(--erro) !important;
  color: #2A0A0E !important;
  border: none !important;
  font-weight: 700 !important;
}

/* =========================================================
   NAVEGAÇÃO INFERIOR + MENU (etapa 2 da UI moderna)
   ========================================================= */

/* Esconde os agrupamentos flutuantes antigos -- suas funções agora
   vivem na barra de baixo e no Menu. Os botões continuam no DOM
   (escondidos) porque a barra os aciona via .click(). */
#botoes-lateral-esquerda { display: none !important; }
#botoes-topo #btn-social,
#botoes-topo #btn-feedback,
#botoes-topo #btn-compartilhar,
#botoes-topo #btn-biblioteca { display: none !important; }

/* Barra inferior */
#nav-inferior {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex;
  background: var(--vidro, rgba(15, 18, 22, 0.96));
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--linha);
  padding: 7px 4px calc(9px + env(safe-area-inset-bottom, 0px));
}
#nav-inferior .nav-item, #nav-inferior button {
  flex: 1;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fraco);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 0;
  transition: color 0.15s;
}
#nav-inferior .nav-ico { line-height: 0; }
#nav-inferior .nav-ico svg { width: 23px; height: 23px; display: block; }
#nav-inferior .nav-txt { font-size: 0.6rem; letter-spacing: 0.02em; }
#nav-inferior button.nav-ativa { color: var(--verde); }

/* Sobe os botões flutuantes de mapa (busca/onde estou) e a dica pra
   não ficarem atrás da barra nova. */
#btn-buscar-local { bottom: 82px !important; }
#btn-onde-estou { bottom: 138px !important; }
/* O #btn-modo-viagem saiu desta coluna -- virou a gota da barra
   inferior. A regra antiga tinha `bottom: 208px !important` e era ela
   que vencia o novo posicionamento, deixando o botão 198px acima da
   gota. */
#dica-mapa { bottom: 78px !important; }

/* Folha do Menu */
#menu-sheet {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(0, 0, 0, 0.5);
  display: flex; align-items: flex-end;
}
#menu-sheet-conteudo {
  width: 100%;
  background: var(--surf);
  border-radius: 22px 22px 0 0;
  border-top: 1px solid var(--linha);
  padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.5);
}
.menu-puxador {
  width: 38px; height: 4px; border-radius: 99px;
  background: #39404a; margin: 2px auto 12px;
}
#menu-sheet-conteudo h2 { margin: 0 0 14px; font-size: 1.05rem; }

/* Seções do Menu: "Minha Jornada"/"Explorar" em grade de blocos
   quadrados, "Sistema" em lista de linhas -- ver .menu-section-list
   mais abaixo. */
.menu-section {
  margin-bottom: 20px;
}
.menu-section:last-of-type {
  margin-bottom: 0;
}
.menu-section-titulo {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fraco);
}
.menu-section-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 10px;
}
.menu-op {
  background: var(--surf2);
  border: 1px solid var(--linha);
  border-radius: 14px;
  color: var(--txt);
  cursor: pointer;
  padding: 14px 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font-size: 0.68rem;
  transition: transform 0.1s, border-color 0.15s, background 0.15s;
}
.menu-section-grade .menu-op {
  aspect-ratio: 1;
}
.menu-op span { font-size: 1.35rem; line-height: 1; }
.menu-op:active { transform: scale(0.95); border-color: var(--verde); }

/* "Sistema": lista vertical de linhas (ícone pequeno + texto),
   separadas por uma borda sutil -- nada de blocos quadrados aqui, são
   ações utilitárias, não itens pra "explorar". */
.menu-section-list {
  margin-bottom: 0;
}
.menu-section-list .menu-op {
  width: 100%;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--linha);
  border-radius: 0;
  padding: 13px 2px;
  font-size: 0.9rem;
  text-align: left;
}
.menu-section-list .menu-op:last-child {
  border-bottom: none;
}
.menu-section-list .menu-op span {
  font-size: 1rem;
}
.menu-section-list .menu-op:active {
  transform: none;
  border-color: var(--linha);
  background: rgba(255, 255, 255, 0.04);
}

/* Ícones SVG outline (mesmo estilo dos ícones da barra inferior,
   ver .nav-ico svg) usados na barra de topo (buscar/configurações),
   nos botões flutuantes (buscar local/onde estou) e em todos os itens
   do Menu -- substituem os emojis antigos, mesma cor do texto ao redor
   (stroke="currentColor" no próprio SVG). */
.ico-svg {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
}

.menu-op span .ico-svg {
  width: 22px;
  height: 22px;
}

/* Modais e painéis precisam ficar ACIMA da barra inferior */
#modal-social, #modal-configuracoes, #modal-admin, #modal-brasil,
#modal-raspadinha, #biblioteca-selos, #modal-conquistas, #modal-ranking,
#modal-amigos, #modal-rotas, #modal-rota-detalhe,
#modal-perfil, #modal-sugestoes-comunidade, #modal-cartao-progresso,
#modal-selo-lightbox, #modal-busca-local {
  z-index: 100;
}

/* O mapa do Brasil fica acima de todo o resto porque é aberto POR CIMA
   do mapa pra trocar de estado. Vale desde quando o mapa estadual era um
   modal em z-index 100 e o cobria; o modal saiu, mas o 200 continua
   certo -- ele também precisa passar por cima dos avisos flutuantes do
   mapa estadual (#estado-popup-dev, #estado-baixar). */
#modal-brasil {
  z-index: 200;
}

/* =========================================================
   FOLHA DESLIZANTE (etapa 3) — os popups "sobre o mapa"
   (município, região, rota) sobem de baixo em vez de abrir
   uma janela centralizada, deixando o mapa visível em cima.
   ========================================================= */
#modal-raspadinha,
#modal-regiao,
#modal-rota-detalhe {
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 !important;
  /* fundo mais leve: dá pra ver o mapa através do topo */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.35) 40%,
    rgba(0, 0, 0, 0) 100%
  ) !important;
}

#modal-conteudo,
#regiao-conteudo,
#rota-detalhe-conteudo {
  width: 100% !important;
  max-width: 520px !important;
  border-radius: 22px 22px 0 0 !important;
  max-height: 82vh !important;
  overflow-y: auto !important;
  padding: 8px 20px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  box-shadow: 0 -16px 44px rgba(0, 0, 0, 0.55) !important;
}

/* Entrada deslizante: a animação vai no OVERLAY (que só existe no DOM
   renderizado quando .oculto sai), não no conteúdo -- animar o
   conteúdo, que fica sempre no DOM dentro de um pai display:none,
   deixava ele travado no primeiro frame em alguns navegadores. */
#modal-raspadinha:not(.oculto),
#modal-regiao:not(.oculto),
#modal-rota-detalhe:not(.oculto) {
  animation: surgir-folha 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes surgir-folha {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Puxador no topo da folha (aquela barrinha de "arraste pra fechar") */
#modal-conteudo::before,
#regiao-conteudo::before,
#rota-detalhe-conteudo::before {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  border-radius: 99px;
  background: #39404a;
  margin: 2px auto 10px;
}

@keyframes subir-folha {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* O botão de fechar (✕) fica flutuando no canto da folha */
#modal-conteudo #btn-fechar-modal,
#regiao-conteudo [id^="btn-fechar"],
#rota-detalhe-conteudo [id^="btn-fechar"] {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
}

/* Cards do feed com sombra suave (a herdada dos modais era pesada
   demais pra uma lista de posts) e espaçamento mais justo. */
/* Feed sem cartão pesado: fundo se mistura com o app, só uma
   divisória fina separa um post do outro (sem borda, sem sombra, sem
   cantos arredondados) -- reaproveita a especificidade (ID + classe)
   pra vencer a regra genérica de "cartão" (background/border/shadow)
   herdada de [id$="-conteudo"], .post-card. */
#social-feed .post-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid #1A1E24 !important;
  padding-bottom: 6px;
}
#social-feed .post-card:last-child {
  border-bottom: none !important;
}

/* O município do post vira texto cinza discreto embaixo do nome, não
   mais um chip colorido -- some sobrescreve a regra global de "chip
   verde" (.post-card-municipio, .sugestao-card-categoria etc). */
#social-feed .post-card-municipio {
  background: none !important;
  color: var(--fraco) !important;
  border-radius: 0 !important;
  font-weight: 400 !important;
}

/* =========================================================
   BARRA SUPERIOR MODERNA (avatar + título + busca + config
   + barra fina de progresso), igual ao protótipo aprovado.
   ========================================================= */
#barra-topo {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  pointer-events: auto !important;
  background: var(--vidro, rgba(15, 18, 22, 0.92));
  backdrop-filter: blur(10px);
  border: 1px solid var(--linha);
  border-radius: 16px;
  padding: 10px 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

#topo-linha {
  display: flex;
  align-items: center;
  gap: 10px;
}
.topo-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  flex: none;
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 700;
  color: #06210f;
  background: linear-gradient(135deg, var(--verde), #17a4d4);
}
#topo-titulo {
  flex: 1;
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
}
.topo-icone {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  border: 1px solid var(--linha);
  background: var(--surf2);
  color: var(--txt);
  cursor: pointer;
  font-size: 0.95rem;
  display: grid;
  place-items: center;
  transition: transform 0.1s, color 0.15s;
}
.topo-icone:active { transform: scale(0.92); color: var(--verde); }

#topo-progresso { display: flex; flex-direction: column; gap: 5px; }
#topo-prog-txt {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--fraco);
}
#topo-prog-txt b { color: var(--txt); font-weight: 700; }
#topo-prog-barra {
  height: 5px;
  border-radius: 99px;
  background: var(--surf2);
  overflow: hidden;
}
#topo-prog-preench {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: var(--verde);
  transition: width 0.5s ease;
}

/* Busca agora vive na barra de topo; a flutuante some. */
#btn-buscar-local { display: none !important; }

/* Atalho pras Sugestões dentro da Comunidade */
/* Virou um chip pequeno e discreto (não um bloco cheio) -- só um
   atalho a mais, não pode competir visualmente com o feed nem com o
   FAB de postar. */
#btn-atalho-sugestoes {
  display: inline-flex;
  width: auto;
  margin: 10px 0 16px;
  padding: 7px 12px;
  background: var(--verde-esc);
  color: var(--verde);
  border: 1px solid rgba(43, 213, 118, 0.3);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.1s;
}
#btn-atalho-sugestoes:active { transform: scale(0.96); }

/* =========================================================
   ANIMAÇÕES DE ABERTURA DAS JANELAS
   Deixa o app menos estático: toda janela entra com movimento.
   Cada regra é presa no estado :not(.oculto) do overlay -- assim
   a animação RE-dispara toda vez que a janela abre (a regra volta
   a valer quando a classe .oculto sai) e, fechada, nenhum
   transform fica preso no elemento (foi o que travava a folha
   fora da tela quando a animação ficava solta no conteúdo).
   Respeita quem pediu "menos movimento" no sistema.
   ========================================================= */
@keyframes janela-surge {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes janela-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes painel-desliza-dir {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
/* @keyframes subir-folha (translateY(100%) -> 0) já definido acima */

/* --- Backdrop das janelas centralizadas: fade suave --- */
#modal-configuracoes:not(.oculto),
#modal-admin:not(.oculto),
#modal-brasil:not(.oculto),
#biblioteca-selos:not(.oculto),
#modal-conquistas:not(.oculto),
#modal-ranking:not(.oculto),
#modal-amigos:not(.oculto),
#modal-rotas:not(.oculto),
#modal-perfil:not(.oculto),
#modal-sugestoes-comunidade:not(.oculto),
#modal-cartao-progresso:not(.oculto),
#modal-selo-lightbox:not(.oculto),
#modal-busca-local:not(.oculto),
#modal-feedback:not(.oculto),
#modal-apelido:not(.oculto),
#modal-confirmar-exclusao:not(.oculto),
#modal-historia-municipio:not(.oculto),
#modal-compartilhar:not(.oculto),
#modal-social:not(.oculto),
#modal-confirmar-viagem:not(.oculto),
#modal-municipios-pendentes:not(.oculto),
#modal-resumo-viagem:not(.oculto),
#modal-compartilhar-viagem:not(.oculto),
#modal-garagem:not(.oculto),
#modal-loja:not(.oculto),
#modal-checkout-loja:not(.oculto),
#menu-sheet:not(.oculto) {
  animation: janela-fade 0.2s ease;
}

/* --- Conteúdo das janelas centralizadas: sobe e aparece --- */
#modal-configuracoes:not(.oculto) #configuracoes-conteudo,
#modal-admin:not(.oculto) #admin-conteudo,
#modal-brasil:not(.oculto) #brasil-conteudo,
#biblioteca-selos:not(.oculto) #biblioteca-conteudo,
#modal-conquistas:not(.oculto) #conquistas-conteudo,
#modal-ranking:not(.oculto) #ranking-conteudo,
#modal-amigos:not(.oculto) #amigos-conteudo,
#modal-rotas:not(.oculto) #rotas-conteudo,
#modal-perfil:not(.oculto) #perfil-conteudo,
#modal-sugestoes-comunidade:not(.oculto) #sugestoes-comunidade-conteudo,
#modal-cartao-progresso:not(.oculto) #cartao-progresso-conteudo,
#modal-selo-lightbox:not(.oculto) #selo-lightbox-conteudo,
#modal-busca-local:not(.oculto) #busca-local-conteudo,
#modal-feedback:not(.oculto) #feedback-conteudo,
#modal-apelido:not(.oculto) #apelido-conteudo,
#modal-confirmar-exclusao:not(.oculto) #confirmar-exclusao-conteudo,
#modal-historia-municipio:not(.oculto) #historia-municipio-conteudo,
#modal-compartilhar:not(.oculto) #compartilhar-conteudo,
#modal-confirmar-viagem:not(.oculto) #confirmar-viagem-conteudo,
#modal-municipios-pendentes:not(.oculto) #municipios-pendentes-conteudo,
#modal-resumo-viagem:not(.oculto) #resumo-viagem-conteudo,
#modal-compartilhar-viagem:not(.oculto) #compartilhar-viagem-conteudo,
#modal-garagem:not(.oculto) #garagem-conteudo,
#modal-loja:not(.oculto) #loja-conteudo,
#modal-checkout-loja:not(.oculto) #checkout-loja-conteudo {
  animation: janela-surge 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Folhas de baixo (município, região, rota, menu): sobem --- */
#modal-raspadinha:not(.oculto) #modal-conteudo,
#modal-regiao:not(.oculto) #regiao-conteudo,
#modal-rota-detalhe:not(.oculto) #rota-detalhe-conteudo,
#menu-sheet:not(.oculto) #menu-sheet-conteudo {
  animation: subir-folha 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Rede social: painel desliza da direita --- */
#modal-social:not(.oculto) #social-conteudo {
  animation: painel-desliza-dir 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  #modal-configuracoes:not(.oculto), #modal-admin:not(.oculto), #modal-brasil:not(.oculto),
  #biblioteca-selos:not(.oculto), #modal-conquistas:not(.oculto), #modal-ranking:not(.oculto),
  #modal-amigos:not(.oculto), #modal-rotas:not(.oculto),
  #modal-perfil:not(.oculto), #modal-sugestoes-comunidade:not(.oculto),
  #modal-cartao-progresso:not(.oculto), #modal-selo-lightbox:not(.oculto),
  #modal-busca-local:not(.oculto), #modal-feedback:not(.oculto), #modal-apelido:not(.oculto),
  #modal-confirmar-exclusao:not(.oculto), #modal-historia-municipio:not(.oculto),
  #modal-compartilhar:not(.oculto), #modal-social:not(.oculto), #menu-sheet:not(.oculto),
  #modal-configuracoes:not(.oculto) #configuracoes-conteudo,
  #modal-admin:not(.oculto) #admin-conteudo,
  #modal-brasil:not(.oculto) #brasil-conteudo,
  #biblioteca-selos:not(.oculto) #biblioteca-conteudo,
  #modal-conquistas:not(.oculto) #conquistas-conteudo,
  #modal-ranking:not(.oculto) #ranking-conteudo,
  #modal-amigos:not(.oculto) #amigos-conteudo,
  #modal-rotas:not(.oculto) #rotas-conteudo,
  #modal-perfil:not(.oculto) #perfil-conteudo,
  #modal-sugestoes-comunidade:not(.oculto) #sugestoes-comunidade-conteudo,
  #modal-cartao-progresso:not(.oculto) #cartao-progresso-conteudo,
  #modal-selo-lightbox:not(.oculto) #selo-lightbox-conteudo,
  #modal-busca-local:not(.oculto) #busca-local-conteudo,
  #modal-feedback:not(.oculto) #feedback-conteudo,
  #modal-apelido:not(.oculto) #apelido-conteudo,
  #modal-confirmar-exclusao:not(.oculto) #confirmar-exclusao-conteudo,
  #modal-historia-municipio:not(.oculto) #historia-municipio-conteudo,
  #modal-compartilhar:not(.oculto) #compartilhar-conteudo,
  #modal-raspadinha:not(.oculto) #modal-conteudo,
  #modal-regiao:not(.oculto) #regiao-conteudo,
  #modal-rota-detalhe:not(.oculto) #rota-detalhe-conteudo,
  #menu-sheet:not(.oculto) #menu-sheet-conteudo,
  #modal-social:not(.oculto) #social-conteudo {
    animation: none !important;
  }
}

/* =========================================================
   FOTO DE PERFIL (avatar com imagem) + editor
   ========================================================= */
/* Imagem dentro de qualquer avatar (topo, perfil) */
.topo-avatar,
.perfil-avatar,
.post-avatar {
  overflow: hidden;
}
.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
/* Selo como avatar: mostra o carimbo inteiro (sem cortar as bordas) */
.avatar-img-selo {
  object-fit: contain;
  padding: 8%;
  box-sizing: border-box;
}

/* Botão de editar (📷) sobre o avatar do próprio perfil */
.perfil-avatar-wrap {
  position: relative;
  width: 76px;
  height: 76px;
  margin-bottom: 12px;
}
.perfil-avatar-wrap .perfil-avatar {
  margin-bottom: 0;
}
#btn-editar-avatar {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--surf);
  background: var(--verde);
  color: var(--verde-tinta);
  font-size: 0.82rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
#btn-editar-avatar:active {
  transform: scale(0.94);
}

/* Modal do editor de avatar */
#modal-editar-avatar {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 22, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 110;
  padding: 16px;
}
#modal-editar-avatar.oculto {
  display: none;
}
#editar-avatar-conteudo {
  position: relative;
  background: var(--surf);
  border-radius: 16px;
  padding: 24px;
  width: 100%;
  max-width: 420px;
  max-height: 85vh;
  overflow-y: auto;
  text-align: center;
}
#editar-avatar-conteudo h2 {
  margin: 0 0 16px;
  font-size: 1.15rem;
}
#btn-fechar-editar-avatar {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--fraco);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 6px;
  line-height: 1;
}
#avatar-editor-acoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#avatar-editor-acoes button {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: none;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}
#btn-avatar-enviar-foto {
  background: var(--verde);
  color: var(--verde-tinta);
}
#btn-avatar-usar-iniciais {
  background: var(--surf2);
  color: var(--txt);
}
#avatar-editor-acoes button:active {
  transform: scale(0.98);
}
.avatar-editor-subtitulo {
  font-size: 0.85rem;
  color: var(--fraco);
  font-weight: 600;
  margin: 20px 0 12px;
  text-align: left;
}
#avatar-selos-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 10px;
}
.avatar-vazio {
  grid-column: 1 / -1;
  font-size: 0.85rem;
  color: var(--fraco);
  text-align: left;
  margin: 0;
}
.avatar-selo-opcao {
  background: var(--bg);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 6px;
  cursor: pointer;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-selo-opcao img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.avatar-selo-opcao:hover {
  border-color: var(--verde);
}
.avatar-selo-dourado {
  border-color: var(--ouro);
  background: #12351F;
}
.avatar-selo-dourado:hover {
  border-color: var(--ouro);
}

/* Entrada animada do editor (mesmo padrão das outras janelas) */
#modal-editar-avatar:not(.oculto) {
  animation: janela-fade 0.2s ease;
}
#modal-editar-avatar:not(.oculto) #editar-avatar-conteudo {
  animation: janela-surge 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================================
   "O QUE MUDOU" (histórico de versões) + versão clicável
   ========================================================= */
#btn-ver-novidades.sobre-linha {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  background: transparent;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  text-align: left;
}
#btn-ver-novidades .sobre-seta {
  margin-left: auto;
  color: var(--verde);
  font-size: 0.82rem;
  font-weight: 600;
  align-self: center;
}
#btn-ver-novidades:active { opacity: 0.7; }

#modal-novidades {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 22, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 110;
  padding: 16px;
}
#modal-novidades.oculto { display: none; }
#novidades-conteudo {
  position: relative;
  background: var(--surf);
  border-radius: 16px;
  padding: 24px;
  width: 100%;
  max-width: 420px;
  max-height: 82vh;
  overflow-y: auto;
  text-align: left;
}
#novidades-conteudo h2 { margin: 0 0 16px; font-size: 1.15rem; text-align: center; }
#btn-fechar-novidades {
  position: absolute;
  top: 8px; right: 8px;
  background: transparent; border: none;
  color: var(--fraco); font-size: 1.2rem; cursor: pointer; padding: 6px; line-height: 1;
}
.novidade-item {
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.novidade-item:first-child { border-top: none; }
.novidade-versao {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--fraco);
  margin-bottom: 8px;
}
.novidade-atual .novidade-versao { color: var(--verde); }
.novidade-item ul { margin: 0; padding-left: 18px; }
.novidade-item li {
  font-size: 0.9rem;
  color: var(--txt);
  margin: 4px 0;
  line-height: 1.35;
}

#modal-novidades:not(.oculto) { animation: janela-fade 0.2s ease; }
#modal-novidades:not(.oculto) #novidades-conteudo {
  animation: janela-surge 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Item "Atualizar app" quando há versão nova publicada */
.menu-op.menu-op-destaque {
  color: var(--verde-tinta);
  background: var(--verde);
  font-weight: 700;
}
.menu-op.menu-op-destaque span { filter: none; }

/* =========================================================
   Login com Google (só no app nativo)
   ========================================================= */
#login-ou {
  text-align: center;
  color: var(--fraco);
  font-size: 0.8rem;
  margin: 14px 0 10px;
  position: relative;
}
#login-ou::before,
#login-ou::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 38%;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}
#login-ou::before { left: 0; }
#login-ou::after { right: 0; }

#btn-entrar-google {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  color: #1f2328;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
#btn-entrar-google:active { transform: scale(0.98); }
#btn-entrar-google .google-g {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: conic-gradient(from -45deg, #ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0);
  color: #fff;
  font-weight: 800;
  font-size: 0.8rem;
  line-height: 1;
}

/* ============================================================
   Motoclube Desbrava: dicas/lojas de peças e afins pra motociclistas,
   com filtro de marca/modelo. Gratuito por enquanto (ver
   souMembroMotoclube em js/script.js) -- #motoclube-aviso-gratis avisa
   isso com transparência, sem bloquear ninguém.
   ============================================================ */
#modal-motoclube,
#modal-motoclube-form {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(15, 18, 22, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#modal-motoclube.oculto,
#modal-motoclube-form.oculto {
  display: none;
}

#motoclube-conteudo,
#motoclube-form-conteudo {
  position: relative;
  background: var(--surf);
  border-radius: 12px;
  padding: 24px;
  max-width: 460px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  text-align: left;
}

#motoclube-conteudo h2,
#motoclube-form-conteudo h2 {
  margin-top: 0;
  font-size: 1.15rem;
  text-align: center;
}

#btn-fechar-motoclube,
#btn-fechar-motoclube-form {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--fraco);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 6px;
}

#btn-fechar-motoclube:hover,
#btn-fechar-motoclube-form:hover {
  color: var(--txt);
}

#motoclube-filtros {
  display: flex;
  gap: 8px;
  margin: 12px 0 16px;
}

#select-motoclube-marca,
#input-motoclube-modelo,
#select-motoclube-categoria,
#input-motoclube-nome,
#input-motoclube-modelos,
#input-motoclube-descricao,
#input-motoclube-linkmaps {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--txt);
  font-size: 0.85rem;
  margin-bottom: 10px;
  font-family: inherit;
}

#motoclube-filtros select,
#motoclube-filtros input {
  margin-bottom: 0;
  flex: 1;
}

#motoclube-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#motoclube-lista-vazio {
  color: var(--fraco);
  font-size: 0.85rem;
  text-align: center;
  margin: 20px 0;
}

.motoclube-card {
  background: #1E242C;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px 14px;
}

.motoclube-card-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.motoclube-card-nome {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--txt);
  margin: 0;
}

.motoclube-card-categoria {
  display: inline-block;
  background: rgba(43, 213, 118, 0.15);
  color: var(--verde);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 4px;
}

.motoclube-card-marcas {
  color: var(--fraco);
  font-size: 0.78rem;
  margin: 6px 0 0;
}

.motoclube-card-modelos {
  color: var(--fraco);
  font-size: 0.78rem;
  margin: 2px 0 0;
  font-style: italic;
}

.motoclube-card-descricao {
  color: var(--fraco);
  font-size: 0.85rem;
  margin: 8px 0 0;
}

.motoclube-card-foto {
  width: 100%;
  border-radius: 8px;
  margin-top: 8px;
  display: block;
  max-height: 220px;
  object-fit: cover;
}

.motoclube-card-maps {
  display: inline-block;
  margin-top: 8px;
  color: var(--verde);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}

.motoclube-card-maps:hover {
  text-decoration: underline;
}

.motoclube-card-acoes {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
}

.motoclube-card-acoes button {
  background: transparent;
  border: none;
  color: var(--txt);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.motoclube-card-curtir.curtido {
  color: var(--verde);
}

.motoclube-card-excluir {
  margin-left: auto;
  color: var(--fraco) !important;
}

.motoclube-form-label {
  font-size: 0.8rem;
  color: var(--fraco);
  margin: 0 0 6px;
}

#motoclube-form-marcas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.motoclube-marca-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.78rem;
  cursor: pointer;
}

.motoclube-marca-chip input {
  margin: 0;
}

#motoclube-form-label-foto {
  display: block;
  text-align: center;
  background: rgba(43, 213, 118, 0.1);
  color: var(--verde);
  border: 1px dashed rgba(43, 213, 118, 0.4);
  border-radius: 8px;
  padding: 10px;
  font-size: 0.85rem;
  cursor: pointer;
  margin-bottom: 12px;
}

#motoclube-form-erro {
  color: #EF4444;
  font-size: 0.82rem;
  margin: 0 0 10px;
}

#btn-salvar-motoclube {
  display: block;
  width: 100%;
  background: var(--verde);
  color: #0F1216;
  border: none;
  padding: 12px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
}

/* =========================================================
   BOTTOM SHEETS, CHIPS, DROPZONE E CAMPOS "MATERIAL"
   Componentes compartilhados que substituíram os formulários
   inline e os controles nativos (<select>, <input type=file>) das
   Sugestões da Comunidade e do Novo Post.

   Este bloco fica no FIM do arquivo de propósito: a "CAMADA UI
   MODERNA" acima força estilo em vários seletores genéricos
   (inclusive `[id$="-conteudo"]`), e é por isso que as folhas aqui
   NÃO usam ids terminados em "-conteudo" -- se usassem, herdariam
   `border-radius: 20px !important` nos quatro cantos e a folha
   deixaria de encostar no rodapé.
   ========================================================= */

/* ---- Casca da folha deslizante ---- */
.sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 200; /* acima do painel social (100) e do modal de sugestões */
  background: var(--backdrop);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: sheet-fade 0.2s ease;
}

.sheet-overlay.oculto {
  display: none;
}

.sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  /* Teto de 88vh: sempre sobra um naco do fundo visível, que é o que
     comunica "isso é uma folha por cima, dá pra fechar tocando fora". */
  max-height: 88vh;
  background: var(--surf);
  border: 1px solid var(--linha);
  border-bottom: none;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -12px 44px rgba(0, 0, 0, 0.55);
  animation: sheet-subir 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes sheet-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sheet-subir {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.sheet-cabecalho {
  position: relative;
  flex: none;
  padding: 16px 52px 12px 20px;
  border-bottom: 1px solid var(--linha);
}

/* Alcinha cinza do topo: só sinaliza "isto desliza". */
.sheet-alca {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 4px;
  border-radius: 2px;
  background: var(--linha);
}

.sheet-cabecalho h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--txt);
}

.sheet-fechar {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--surf2);
  color: var(--fraco);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}

.sheet-fechar:active {
  transform: scale(0.92);
}

/* O corpo é quem rola -- o cabeçalho fica preso no topo. */
.sheet-corpo {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px calc(env(safe-area-inset-bottom, 0px) + 22px);
  -webkit-overflow-scrolling: touch;
}

.sheet-btn-primario {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 18px;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: var(--verde);
  color: var(--verde-tinta);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}

.sheet-btn-primario:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.sheet-btn-primario:active:not(:disabled) {
  transform: scale(0.985);
}

/* ---- Campos "Material" escuro: sem caixa, só um traço embaixo ---- */
.campo-rotulo {
  display: block;
  margin: 16px 0 8px;
  color: var(--fraco);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Tag junto (input./textarea.) E !important, os dois de propósito: a
   camada "UI moderna" tem um `input[type="text"], ..., textarea,
   select` que pinta fundo e borda de CAIXA com !important. Sem a tag
   a classe perde por especificidade; sem o !important perde pra
   prioridade. É a mesma armadilha do segmented control de Aparência. */
input.campo-material,
textarea.campo-material {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 10px 2px;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--linha) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--txt) !important;
  font-family: inherit;
  font-size: 0.9rem;
  transition: border-color 0.15s ease;
}

input.campo-material::placeholder,
textarea.campo-material::placeholder {
  color: var(--fraco);
}

input.campo-material:focus,
textarea.campo-material:focus {
  outline: none;
  border-bottom-color: var(--verde) !important;
}

textarea.campo-material {
  resize: vertical;
  min-height: 68px;
  line-height: 1.45;
}

/* Botão que abre um seletor (município). Faz o papel do <select>
   nativo sem herdar o widget do sistema operacional. */
.campo-seletor {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--surf2);
  border: 1px solid var(--linha);
  border-radius: 12px;
  color: var(--txt);
  font-family: inherit;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
}

.campo-seletor-rotulo {
  flex: none;
  color: var(--fraco);
  font-size: 0.78rem;
}

.campo-seletor-valor {
  flex: 1;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

.campo-seletor-seta {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--fraco);
}

.campo-seletor:active {
  transform: scale(0.99);
}

/* ---- Chips roláveis (categorias) ---- */
.chip-barra {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-bottom: 6px;
  overflow-x: auto;
  /* Sem isso a barra vira uma pilha vertical no primeiro chip longo. */
  flex-wrap: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.chip-barra::-webkit-scrollbar {
  display: none;
}

.chip {
  flex: none;
  padding: 8px 14px;
  background: var(--surf2);
  border: 1px solid var(--linha);
  border-radius: 999px;
  color: var(--fraco);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.chip.chip-ativo {
  background: var(--verde);
  border-color: var(--verde);
  color: var(--verde-tinta);
}

.chip:active {
  transform: scale(0.96);
}

/* ---- Dropzone de foto ---- */
.input-arquivo-oculto {
  display: none;
}

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 160px;
  margin-top: 4px;
  padding: 20px;
  background: var(--surf2);
  border: 1.5px dashed var(--linha);
  border-radius: 16px;
  color: var(--fraco);
  text-align: center;
  cursor: pointer;
  /* Preenchidos por JS quando há foto escolhida (ver
     aoEscolherFotoPost / aoEscolherFotoSugestao). */
  background-size: cover;
  background-position: center;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.dropzone:hover {
  border-color: var(--verde);
}

.dropzone-icone {
  width: 34px;
  height: 34px;
}

.dropzone-texto {
  font-size: 0.82rem;
  line-height: 1.35;
}

/* Com foto: a imagem vira o fundo e o texto sai da frente, sobrando
   só uma faixa discreta pra trocar. */
.dropzone.dropzone-com-foto {
  border-style: solid;
  border-color: var(--verde);
  justify-content: flex-end;
  min-height: 200px;
}

.dropzone.dropzone-com-foto .dropzone-icone {
  display: none;
}

.dropzone.dropzone-com-foto .dropzone-texto {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(15, 18, 22, 0.72);
  color: #F2F5F7;
  font-size: 0.75rem;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

/* ---- Lista do seletor de município ---- */
#lista-escolher-municipio {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
}

.municipio-opcao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 13px 4px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--linha);
  color: var(--txt);
  font-family: inherit;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
}

.municipio-opcao:active {
  background: var(--surf2);
}

.municipio-opcao.municipio-opcao-ativa {
  color: var(--verde);
  font-weight: 700;
}

.municipio-opcao-vazio {
  padding: 20px 4px;
  color: var(--fraco);
  font-size: 0.85rem;
  text-align: center;
}

/* ---- Sugestões: grid de cards estilo guia de viagem ---- */
#sugestoes-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 18px;
}

/* A mensagem de "nenhuma sugestão" não pode virar uma coluna do grid. */
#sugestoes-lista > p {
  grid-column: 1 / -1;
  color: var(--fraco);
  font-size: 0.85rem;
  text-align: center;
  padding: 24px 0;
}

#sugestoes-lista > .spinner {
  grid-column: 1 / -1;
  justify-self: center;
}

.sugestao-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 172px;
  padding: 12px;
  border: 1px solid var(--linha);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surf2);
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

/* Véu escuro: garante contraste do título branco sobre QUALQUER foto,
   inclusive as claras. Fica no ::before pra não brigar com o
   background-image do card. */
.sugestao-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 12, 15, 0.92) 0%,
    rgba(10, 12, 15, 0.55) 45%,
    rgba(10, 12, 15, 0.12) 100%
  );
  pointer-events: none;
}

/* Sem foto: gradiente próprio, pra card vazio não virar um buraco. */
.sugestao-card.sugestao-card-sem-foto {
  background-image: radial-gradient(circle at 30% 20%, #2A313C 0%, #171B21 70%);
}

.sugestao-card > * {
  position: relative;
  z-index: 1;
}

.sugestao-card-categoria {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  max-width: calc(100% - 20px);
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(15, 18, 22, 0.7);
  color: #F2F5F7;
  font-size: 0.66rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: blur(4px);
}

.sugestao-card-titulo {
  margin: 0 0 4px;
  color: #FFFFFF;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;
  /* Título longo não pode empurrar as ações pra fora do card. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sugestao-card-autor {
  color: rgba(242, 245, 247, 0.72);
  font-size: 0.7rem;
}

.sugestao-card-rodape {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.sugestao-card-rodape button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  background: transparent;
  border: none;
  color: rgba(242, 245, 247, 0.85);
  font-family: inherit;
  font-size: 0.74rem;
  cursor: pointer;
}

.sugestao-card-rodape button svg {
  width: 15px;
  height: 15px;
}

.sugestao-card-curtir.curtido {
  color: #F0616D;
}

.sugestao-card-excluir {
  margin-left: auto;
  color: rgba(240, 97, 109, 0.9) !important;
}

/* ---- Detalhe da sugestão (abre ao tocar no card) ---- */
#sugestao-detalhe-foto {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 14px;
}

#sugestao-detalhe-foto.oculto {
  display: none;
}

#sugestao-detalhe-descricao {
  color: var(--txt);
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0 0 14px;
}

#sugestao-detalhe-maps {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--verde);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}

#sugestao-detalhe-maps.oculto {
  display: none;
}

/* ---- Marcar pessoas, no sheet do Novo Post ---- */
#social-marcar-pessoas {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

#social-marcar-pessoas .campo-material {
  flex: 1;
}

#btn-marcar-pessoa {
  flex: none;
  padding: 9px 14px;
  background: var(--surf2);
  border: 1px solid var(--linha);
  border-radius: 10px;
  color: var(--txt);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

/* ---- Ajustes no painel de Sugestões que hospeda tudo isso ---- */
#btn-abrir-nova-sugestao {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  background: var(--verde);
  border: none;
  border-radius: 12px;
  color: var(--verde-tinta);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}

/* =========================================================
   POLIMENTO: MICRO-INTERAÇÕES, SAÍDA DE JANELAS E SKELETON
   ---------------------------------------------------------
   O que já existia e NÃO foi refeito aqui: a animação de ENTRADA
   de modais (janela-surge/janela-fade) e de gavetas (sheet-subir),
   mais 21 regras :active pontuais. Este bloco cobre o que faltava:
   feedback tátil como padrão, animação de SAÍDA e skeleton.
   ========================================================= */

/* ---- 1. Feedback tátil ----
   Padrão pra qualquer botão, com escape (.sem-tatil) pros casos em
   que encolher fica estranho. Os :active específicos que já existiam
   continuam valendo -- vêm depois no arquivo ou são mais específicos,
   e quase todos usam a mesma escala. */
button,
.card-clicavel,
.sugestao-card,
.post-card-foto,
[role="button"] {
  transition: transform 0.1s ease, filter 0.15s ease, background-color 0.15s ease;
}

button:active,
.card-clicavel:active,
.sugestao-card:active,
[role="button"]:active {
  transform: scale(0.96);
}

/* Onde encolher atrapalha: trilhas de segmented control (o filho é
   que reage), toggles, o SVG do mapa e barras de largura total que
   ficam "pulando" ao toque. */
.sem-tatil:active,
#aparencia-opcoes:active,
.settings-toggle:active,
.settings-toggle-switch:active,
#mapa-rj button:active,
.chip-barra:active {
  transform: none;
}

/* :hover SÓ em quem tem mouse de verdade. Em touch, o hover "gruda"
   depois do toque e o botão fica aceso até você tocar em outro
   lugar -- é o efeito mais denunciador de "isto é um site". */
@media (hover: hover) and (pointer: fine) {
  button:hover:not(:disabled),
  .card-clicavel:hover,
  [role="button"]:hover {
    filter: brightness(1.12);
  }

  .sugestao-card:hover {
    filter: brightness(1.08);
  }
}

/* Estado desabilitado nunca reage ao toque. */
button:disabled:active {
  transform: none;
  filter: none;
}

/* ---- 2. Animação de SAÍDA ----
   O `.oculto` (display:none) corta a janela na hora. A classe
   .fechando roda a animação inversa ANTES do display sumir -- quem
   coordena isso é fecharComAnimacao() em js/script.js, que espera o
   animationend pra só então pôr o .oculto.
   Os tempos são um pouco menores que os de entrada: saída lenta dá
   sensação de travamento. */
@keyframes sheet-descer {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}

@keyframes sheet-sumir {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes janela-encolhe {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(10px) scale(0.97); }
}

/* Gavetas (.sheet-overlay > .sheet) */
.sheet-overlay.fechando {
  animation: sheet-sumir 0.22s ease forwards;
  pointer-events: none; /* não dá pra clicar em algo que está saindo */
}

.sheet-overlay.fechando .sheet {
  animation: sheet-descer 0.24s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* Janelas centralizadas: o backdrop some junto com o cartão. */
.janela-fechando {
  animation: sheet-sumir 0.18s ease forwards;
  pointer-events: none;
}

.janela-fechando > [id$="-conteudo"] {
  animation: janela-encolhe 0.18s ease forwards;
}

/* ---- 3. Skeleton loader ----
   Uso: enquanto o fetch não volta, coloque divs com .skeleton-pulse
   (+ .skeleton-linha ou .skeleton-bloco) no lugar do conteúdo.
   O pulso é em background-color, não em opacity: opacity faria o
   bloco inteiro piscar contra o fundo do card e cansa mais a vista. */
.skeleton-pulse {
  --sk-a: #1E232B; /* = var(--surf2) no escuro */
  --sk-b: #2A313C; /* um degrau acima, mesmo tom */
  background-color: var(--sk-a);
  animation: skeleton-pulsar 1.4s ease-in-out infinite;
  border-radius: 8px;
  /* Não deixa texto/filho aparecer por cima do placeholder. */
  color: transparent;
  user-select: none;
  pointer-events: none;
}

:root[data-theme="light"] .skeleton-pulse {
  --sk-a: #E4E8ED;
  --sk-b: #F1F4F7;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .skeleton-pulse {
    --sk-a: #E4E8ED;
    --sk-b: #F1F4F7;
  }
}

@keyframes skeleton-pulsar {
  0%, 100% { background-color: var(--sk-a); }
  50%      { background-color: var(--sk-b); }
}

/* Formas prontas, pra não precisar de style inline em cada uso. */
.skeleton-linha {
  height: 12px;
  margin-bottom: 8px;
}

.skeleton-linha.curta { width: 45%; }
.skeleton-linha.media { width: 70%; }

.skeleton-bloco {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
}

.skeleton-circulo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

/* ---- 4. Acessibilidade ----
   O bloco de prefers-reduced-motion que já existe cobre as janelas
   antigas por id. Estas são as peças novas: com movimento reduzido,
   nada de escala nem deslize -- e o skeleton para de pulsar, virando
   um bloco chapado (continua comunicando "carregando", sem piscar). */
@media (prefers-reduced-motion: reduce) {
  button:active,
  .card-clicavel:active,
  .sugestao-card:active,
  [role="button"]:active {
    transform: none;
  }

  .sheet-overlay.fechando,
  .sheet-overlay.fechando .sheet,
  .janela-fechando,
  .janela-fechando > [id$="-conteudo"] {
    animation-duration: 0.01ms;
  }

  .skeleton-pulse {
    animation: none;
  }
}

/* ---- Progresso do download offline (PRO) ---- */
#offline-progresso {
  margin-top: 10px;
}

#offline-progresso.oculto {
  display: none;
}

#offline-barra {
  height: 6px;
  border-radius: 999px;
  background: var(--bg);
  overflow: hidden;
}

#offline-barra-preenchida {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--verde);
  /* A barra anda de 6 em 6 arquivos; sem a transição ela pula em
     degraus visíveis em vez de correr. */
  transition: width 0.25s ease;
}

#offline-status {
  margin: 6px 0 0;
  color: var(--fraco);
  font-size: 0.76rem;
}

/* ---- Checkout Pix (modal-checkout) ---- */
#checkout-descricao {
  margin: 0 0 4px;
  color: var(--txt);
  font-size: 0.95rem;
  font-weight: 700;
}

#checkout-etapa-cpf.oculto,
#checkout-etapa-carregando.oculto,
#checkout-etapa-pix.oculto {
  display: none;
}

#checkout-erro {
  margin: 8px 0 0;
  color: var(--erro);
  font-size: 0.8rem;
}

#checkout-erro.oculto {
  display: none;
}

/* Skeleton no formato do QR: quadrado, pra tela não "pular" quando a
   imagem de verdade chegar. */
#checkout-skeleton-qr {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 14px;
  border-radius: 14px;
}

#checkout-carregando-texto {
  color: var(--fraco);
  font-size: 0.82rem;
  text-align: center;
}

/* O QR fica sempre sobre FUNDO BRANCO, mesmo no tema escuro: o
   leitor da câmera precisa do contraste original: pretos sobre
   branco. Invertido, muitos apps de banco não leem. */
#checkout-qr {
  display: block;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 14px;
  padding: 10px;
  background: #FFFFFF;
  border-radius: 14px;
}

#checkout-valor {
  margin: 0 0 4px;
  color: var(--txt);
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
}

/* O código Pix por extenso. `user-select: all` faz um toque longo
   selecionar tudo de uma vez -- selecionar 200 caracteres com o dedo,
   palavra por palavra, seria impraticável. */
#checkout-codigo-pix {
  display: block;
  max-height: 62px;
  overflow-y: auto;
  margin: 10px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: var(--surf2);
  color: var(--fraco);
  font-family: monospace;
  font-size: 0.66rem;
  line-height: 1.45;
  text-align: left;
  word-break: break-all;
  user-select: all;
  -webkit-user-select: all;
}

/* "Aguardando o pagamento..." com um ponto pulsando: sinaliza que o
   app está de fato escutando, e não parado. */
#checkout-esperando {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 0;
  color: var(--verde);
  font-size: 0.8rem;
  font-weight: 600;
}

.checkout-ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--verde);
  animation: checkout-pulsar 1.4s ease-in-out infinite;
}

@keyframes checkout-pulsar {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.7); }
}

@media (prefers-reduced-motion: reduce) {
  .checkout-ponto { animation: none; }
}

/* Foto que não abriu em nenhum dos formatos do Drive. Sumir por
   completo é melhor que deixar o navegador desenhar o ícone de imagem
   quebrada com o texto alternativo ao lado. */
.foto-indisponivel {
  display: none !important;
}

/* ---- Escolha entre pontos encavalados ---- */
#escolha-ponto-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.escolha-ponto-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--linha);
  border-radius: 14px;
  background: var(--surf2);
  color: var(--txt);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.escolha-ponto-item:active {
  transform: scale(0.985);
}

/* Fundo próprio pra arte recortada não flutuar solta sobre o cartão --
   mesmo papel que o degradê faz na capa do painel. */
.escolha-ponto-arte {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  background: linear-gradient(160deg, var(--surf), var(--bg));
  overflow: hidden;
}

.escolha-ponto-arte img {
  width: 100%;
  height: 100%;
  padding: 3px;
  box-sizing: border-box;
  object-fit: contain;
}

.escolha-ponto-arte svg {
  width: 22px;
  height: 22px;
  fill: var(--verde);
}

.escolha-ponto-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.escolha-ponto-texto strong {
  color: var(--txt);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
}

.escolha-ponto-texto small {
  color: var(--verde);
  font-size: 0.75rem;
  font-weight: 600;
}

/* ============================================================
   PONTO TURÍSTICO -- folha que abre ao tocar num ponto do mapa.

   Usa .sheet-overlay/.sheet do app, então herda de graça a subida, a
   descida em .fechando e o teto de 88vh. O id NÃO termina em
   "-conteudo" de propósito: aquele sufixo é capturado pela CAMADA UI
   MODERNA, que força border-radius nos QUATRO cantos com !important --
   e isso quebraria a capa sangrando no topo.
   ============================================================ */

/* ---- Capa ---- */
#ponto-capa {
  position: relative;
  flex: none;
  height: 168px;
  /* 21px, e não 22: a capa fica DENTRO da borda de 1px da folha, então
     o raio dela tem que ser o de fora menos a espessura da borda --
     senão os dois arcos não encaixam e sobra uma casquinha na curva. */
  border-radius: 21px 21px 0 0;
  overflow: hidden;
  /* A arte é PNG recortado (linha e cor sobre transparente), não uma
     foto de banco de imagem. Esticar pra preencher deixaria borrada e
     cortaria o desenho, então ela fica inteira e centrada sobre um
     fundo próprio -- o degradê é que faz o papel de "foto de capa". */
  background:
    radial-gradient(120% 130% at 50% 115%, color-mix(in srgb, var(--verde) 22%, transparent), transparent 62%),
    linear-gradient(160deg, var(--surf2), var(--bg));
}

#ponto-arte {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Respiro pra alça e pro botão de fechar não encostarem no desenho. */
  padding: 22px 20px 12px;
  box-sizing: border-box;
  display: block;
}

/* Sem arte, a faixa encolhe: um degradê alto e vazio seria só espaço
   perdido antes do título. */
#ponto-capa.sem-arte {
  height: 62px;
}

#ponto-capa.sem-arte #ponto-arte {
  display: none;
}

#ponto-capa .sheet-alca {
  /* Por cima da capa, então precisa de contraste próprio. */
  background: rgba(255, 255, 255, 0.55);
  z-index: 2;
}

#btn-fechar-ponto {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--backdrop);
  backdrop-filter: blur(6px);
  color: var(--txt);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}

/* ---- Corpo ---- */
#ponto-corpo {
  padding: 18px 20px 8px;
}

#ponto-titulo {
  margin: 0 0 10px;
  color: var(--txt);
  font-size: 1.42rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

/* Cidade como chip, não como texto verde solto. */
.ponto-chip-cidade {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--verde) 15%, transparent);
  color: var(--verde);
  font-size: 0.78rem;
  font-weight: 700;
}

.ponto-chip-cidade::before {
  content: "📍";
  font-size: 0.8rem;
}

#ponto-descricao {
  margin: 16px 0 0;
  color: var(--txt);
  font-size: 0.98rem;
  line-height: 1.55;
}

#ponto-texto {
  /* Respiro maior acima: os chips ficam ANTES dele, e a história longa
     precisa se descolar da fileira de botões. */
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--linha);
  color: var(--fraco);
  font-size: 0.9rem;
  /* Texto longo: o respiro entre linhas é o que decide se a pessoa lê
     até o fim ou desiste no terceiro parágrafo. */
  line-height: 1.65;
}

/* ---- Chips de ação ---- */
#ponto-acoes,
.destino-acoes {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.chip-acao {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 12px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--surf2);
  color: var(--txt);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.chip-acao svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--verde);
}

.chip-acao:active {
  transform: scale(0.97);
  background: color-mix(in srgb, var(--verde) 12%, var(--surf2));
}

/* ---- Rodapé grudado ---- */
#ponto-rodape {
  flex: none;
  padding: 14px 20px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linha);
  /* Um véu do mesmo tom da folha: o texto some por baixo do rodapé em
     vez de encostar nele de repente enquanto rola. */
  background: var(--surf);
}

#ponto-rodape .sheet-btn-primario {
  margin-top: 0;
  padding: 15px;
  border-radius: 14px;
  font-size: 0.98rem;
}

/* Os dois botões da lista de destinos na aba da cidade dividem a linha.
   O desenho deles continua sendo o antigo (.destino-btn-maps): quem
   ganhou os chips foi o painel do ponto no mapa. */
.destino-acoes .destino-btn-maps {
  flex: 1;
}

/* ---- Grupos do Motoclube ---- */
#motoclube-meu-grupo {
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--linha);
  border-radius: 14px;
  background: var(--surf);
}

.grupo-vazio-titulo {
  margin: 0 0 4px;
  color: var(--txt);
  font-size: 0.95rem;
  font-weight: 700;
}

.grupo-vazio-texto {
  margin: 0 0 12px;
  color: var(--fraco);
  font-size: 0.84rem;
}

.grupo-atual {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* O brasão deixou de ser quadrado quando ganhou asas (1020x560, ver
   tools/gerar-logos-motoclube.js). Todo lugar que o mostra dita a
   ALTURA e deixa a largura seguir a proporção: assim o disco continua
   do mesmo tamanho de antes em cada tela, e só o rastro das asas
   ocupa espaço a mais. Amarrar pela largura encolheria o disco e o
   crachá pequeno viraria uma bolinha ilegível. */
.grupo-brasao,
.perfil-grupo-brasao,
.post-grupo-brasao {
  width: auto;
  object-fit: contain;
}

.grupo-brasao {
  height: 58px;
  flex-shrink: 0;
}

.grupo-atual-nome {
  margin: 0;
  color: var(--txt);
  font-size: 1rem;
  font-weight: 700;
}

.grupo-atual-sub {
  margin: 2px 0 0;
  color: var(--fraco);
  font-size: 0.78rem;
}

.grupo-membros {
  margin: 4px 0 0;
  color: var(--verde);
  font-size: 0.78rem;
  font-weight: 700;
}

/* Número de membro. Monoespaçado de propósito: são 11 dígitos, e com
   fonte proporcional eles dançam a cada mudança de número. */
.grupo-numero,
.perfil-numero-motoclube {
  font-family: ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ouro);
}

.grupo-numero {
  margin: 3px 0 0;
}

.perfil-numero-motoclube {
  margin-top: 6px;
  padding: 3px 10px;
  border: 1px solid color-mix(in srgb, var(--ouro) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ouro) 12%, transparent);
}

.grupo-brasao-botao {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  line-height: 0;
}

/* ---- Brasão em tamanho grande ---- */
#modal-brasao {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--backdrop);
}

#brasao-conteudo {
  position: relative;
  width: 100%;
  max-width: 340px;
  padding: 20px;
  border-radius: 18px;
  background: var(--surf);
  text-align: center;
}

#brasao-grande {
  width: 100%;
  /* Mais largo desde que o brasão ganhou asas: com 260px o disco no
     meio ficava menor do que era antes das asas existirem. */
  max-width: 340px;
  height: auto;
}

#brasao-titulo {
  margin: 10px 0 16px;
  color: var(--txt);
  font-size: 1rem;
  font-weight: 700;
}

#btn-fechar-brasao {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: none;
  color: var(--fraco);
  font-size: 1.1rem;
  cursor: pointer;
}

.grupo-acoes {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.grupo-acoes button {
  flex: 1;
  padding: 9px 10px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: var(--surf2);
  color: var(--txt);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.grupo-acoes button:disabled {
  opacity: 0.45;
  cursor: default;
}

/* Aviso da carência de 30 dias. Âmbar, e não vermelho: é uma regra do
   jogo, não um erro que a pessoa cometeu. */
.grupo-aviso {
  margin: 10px 0 0;
  color: #E5A93C;
  font-size: 0.78rem;
  line-height: 1.35;
}

/* Crachá no perfil */
.perfil-grupo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 8px;
  color: var(--fraco);
  font-size: 0.8rem;
  font-weight: 600;
}

.perfil-grupo-brasao {
  height: 28px;
}

/* Crachá ao lado do nome na Comunidade. Pequeno de propósito: é
   assinatura, não protagonista do post. */
.post-grupo-brasao {
  height: 19px;
  vertical-align: middle;
  margin-left: 5px;
}

#secao-motoclube-admin {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--linha);
}

#label-motoclube-liberado {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  color: var(--txt);
  font-size: 0.88rem;
  line-height: 1.4;
  cursor: pointer;
}

#btn-paywall-ja-paguei {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  padding: 11px 14px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--fraco);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}

#btn-paywall-ja-paguei:disabled {
  opacity: 0.7;
  cursor: default;
}

#btn-ja-paguei-verificar {
  display: block;
  width: 100%;
  margin: 12px 0 0;
  padding: 11px 14px;
  border: 1px solid var(--verde);
  border-radius: 12px;
  background: transparent;
  color: var(--verde);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}

#btn-ja-paguei-verificar:disabled {
  opacity: 0.6;
  cursor: default;
}

#checkout-etapa-sucesso {
  padding: 12px 0 4px;
  text-align: center;
}

#checkout-sucesso-selo {
  margin: 0 auto 14px;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--verde);
  font-size: 2.4rem;
}

#checkout-sucesso-titulo {
  margin: 0 0 8px;
  color: var(--txt);
  font-size: 1.25rem;
}

#checkout-sucesso-texto {
  margin: 0 0 20px;
  color: var(--fraco);
  font-size: 0.86rem;
  line-height: 1.5;
}

#checkout-aviso {
  margin: 12px 0 0;
  color: var(--fraco);
  font-size: 0.76rem;
  line-height: 1.4;
  text-align: center;
}

#btn-ja-paguei {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  background: transparent;
  border: none;
  color: var(--fraco);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

#btn-assinar-pro {
  background: var(--verde) !important;
  color: var(--verde-tinta) !important;
  border: none !important;
  font-weight: 700;
}

#btn-assinar-pro.oculto {
  display: none;
}

/* ---- Paywall do Motoclube ---- */
#paywall-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 4px auto 14px;
  border-radius: 50%;
  /* Aro dourado sobre verde: o dourado no app é reservado ao que é
     raro (selo brilhante), e é exatamente essa leitura que a gente
     quer emprestar aqui. */
  background: radial-gradient(circle at 35% 28%, rgba(43, 213, 118, 0.28), rgba(43, 213, 118, 0.06));
  border: 1px solid rgba(233, 185, 73, 0.5);
  color: var(--verde);
}

#paywall-icone svg {
  width: 38px;
  height: 38px;
}

#paywall-titulo {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  color: var(--txt);
}

#paywall-subtitulo {
  margin: 0 0 18px;
  font-size: 0.88rem;
  line-height: 1.45;
  text-align: center;
  color: var(--fraco);
}

#paywall-beneficios {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

#paywall-beneficios li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--linha);
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--txt);
}

#paywall-beneficios li:last-child {
  border-bottom: none;
}

.paywall-check {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--verde);
  color: var(--verde-tinta);
  font-size: 0.7rem;
  font-weight: 900;
}

#paywall-preco {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  padding: 14px;
  border-radius: 14px;
  background: var(--surf2);
  border: 1px solid var(--linha);
}

#paywall-preco-valor {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--txt);
  line-height: 1;
}

#paywall-preco-periodo {
  font-size: 0.85rem;
  color: var(--fraco);
}

#paywall-rodape {
  margin: 12px 0 0;
  font-size: 0.74rem;
  line-height: 1.4;
  text-align: center;
  color: var(--fraco);
}

/* ============ AVISO DE VERSÃO (#modal-versao) ============
   Serve aos dois casos de avisarSobreVersao em js/script.js: "acabou
   de atualizar" e "tem versão nova". A diferença entre eles é só o
   botão de atualizar aparecer ou não.

   Estas regras ficam DEPOIS da CAMADA UI MODERNA de propósito. Aquela
   camada força `background: var(--surf2) !important` em todo `button`,
   e sem vir por último o botão principal sairia cinza em vez de verde
   -- a mesma armadilha do segmented control de Aparência. */
#modal-versao {
  position: fixed;
  inset: 0;
  background: var(--backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 120; /* acima do #modal-novidades (110) */
  padding: 16px;
  animation: janela-fade 0.2s ease;
}
#modal-versao.oculto { display: none; }

#versao-caixa {
  position: relative;
  background: var(--surf);
  border: 1px solid var(--linha);
  border-radius: 20px;
  padding: 28px 22px 20px;
  width: 100%;
  max-width: 400px;
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  text-align: center;
  animation: janela-surge 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

#btn-fechar-versao {
  position: absolute;
  top: 8px; right: 8px;
  background: transparent !important;
  border: none;
  color: var(--fraco);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 6px;
  line-height: 1;
}

#versao-emblema {
  font-size: 2.2rem;
  line-height: 1;
  display: block;
  margin-bottom: 10px;
}
#versao-titulo {
  margin: 0 0 6px;
  font-size: 1.2rem;
  color: var(--txt);
}
#versao-subtitulo {
  margin: 0 0 18px;
  font-size: 0.86rem;
  color: var(--fraco);
  line-height: 1.45;
}

/* O corpo é o único pedaço que rola: cabeçalho e botões ficam sempre
   visíveis, mesmo com changelog de várias versões acumuladas. */
#versao-lista {
  overflow-y: auto;
  text-align: left;
  margin-bottom: 18px;
}
.versao-bloco + .versao-bloco {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--linha);
}
.versao-bloco-titulo {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fraco);
  margin-bottom: 8px;
}
#versao-lista ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#versao-lista li {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--txt);
}
#versao-lista li::marker { color: var(--verde); }

#versao-acoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#versao-acoes button {
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  border: none;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
#btn-versao-atualizar {
  background: var(--verde) !important;
  color: var(--verde-tinta) !important;
}
#btn-versao-atualizar.oculto { display: none; }
#btn-versao-depois {
  background: transparent !important;
  color: var(--fraco) !important;
  font-weight: 500;
}

/* ============ COMENTÁRIOS DO PONTO TURÍSTICO ============
   Todo mundo lê; só comenta quem teve a presença confirmada por GPS
   no município (ver montarComentariosDoPonto em js/script.js).

   Depois da CAMADA UI MODERNA de propósito: ela força
   `background: var(--surf2) !important` em todo `button`, e sem vir
   por último o "Comentar" sairia cinza em vez de verde. */
#ponto-comentarios {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--linha);
}
#ponto-comentarios.oculto { display: none; }
#ponto-comentarios-titulo {
  margin: 0 0 12px;
  font-size: 0.95rem;
  color: var(--txt);
}

#ponto-comentarios-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ponto-comentario {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.ponto-comentario-avatar {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  /* O gradiente vem do corAvatar() no JS; este é só o fallback. */
  background: var(--surf2);
}
.ponto-comentario-corpo {
  flex: 1 1 auto;
  min-width: 0; /* deixa o texto quebrar em vez de esticar a linha */
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--txt);
  overflow-wrap: anywhere;
}
.ponto-comentario-corpo strong {
  display: block;
  font-size: 0.78rem;
  color: var(--fraco);
  margin-bottom: 2px;
}
.ponto-comentario-apagar {
  flex: 0 0 auto;
  background: transparent !important;
  border: none;
  color: var(--fraco);
  font-size: 0.85rem;
  line-height: 1;
  padding: 4px;
  cursor: pointer;
}

#ponto-comentarios-vazio,
#ponto-comentar-bloqueado {
  margin: 10px 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--fraco);
}
#ponto-comentarios-vazio.oculto,
#ponto-comentar-bloqueado.oculto,
#ponto-comentario-erro.oculto,
#ponto-comentar-area.oculto { display: none; }

#ponto-comentar-area {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#input-comentario-ponto {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--linha);
  background: var(--surf2);
  color: var(--txt);
  font-family: inherit;
  font-size: 0.88rem;
  line-height: 1.4;
}
#input-comentario-ponto::placeholder { color: var(--fraco); }
#btn-comentar-ponto {
  align-self: flex-end;
  padding: 9px 20px;
  border: none;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--verde) !important;
  color: var(--verde-tinta) !important;
}
#btn-comentar-ponto:disabled { opacity: 0.55; cursor: default; }

#ponto-comentario-erro {
  margin: 10px 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--erro);
}

/* ---- Curtidas e respostas dentro do comentário do ponto ----
   Ordenação por curtidas é feita no JS (renderizarComentariosDoPonto).
   RESPONDER é liberado pra qualquer pessoa logada, mesmo sem GPS: é
   onde quem tem dúvida pergunta a quem esteve lá. */
.ponto-comentario-bloco + .ponto-comentario-bloco { margin-top: 14px; }

.ponto-comentario-acoes {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 5px;
}
.ponto-comentario-curtir,
.ponto-comentario-responder {
  background: transparent !important;
  border: none;
  padding: 0;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--fraco) !important;
  cursor: pointer;
  line-height: 1;
}
.ponto-comentario-curtir.curtido { color: var(--erro) !important; }

/* Recuo alinhado ao avatar (30px) + o gap (10px) da linha de cima:
   a resposta fica visualmente pendurada no comentário que responde. */
.ponto-respostas {
  margin: 8px 0 0 40px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ponto-resposta {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--txt);
  overflow-wrap: anywhere;
}
.ponto-resposta strong {
  flex: 0 0 auto;
  color: var(--fraco);
  font-size: 0.78rem;
}
.ponto-resposta span { flex: 1 1 auto; min-width: 0; }

.ponto-resposta-form {
  display: flex;
  gap: 6px;
  margin: 8px 0 0 40px;
}
.ponto-resposta-form input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--linha);
  background: var(--surf2);
  color: var(--txt);
  font-family: inherit;
  font-size: 0.84rem;
}
.ponto-resposta-form input::placeholder { color: var(--fraco); }
.ponto-resposta-form button {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: none;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--verde) !important;
  color: var(--verde-tinta) !important;
}
.ponto-resposta-form button:disabled { opacity: 0.55; }

/* ============ NOTIFICAÇÕES ============
   Sino na barra de topo + folha com a lista. O contador some quando
   zera e vira "9+" acima de nove (ver atualizarBadgeNotificacoes). */
#btn-topo-notificacoes { position: relative; }
#badge-notificacoes {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  box-sizing: border-box;
  border-radius: 999px;
  /* Vermelho PRÓPRIO, mais escuro que o --erro do app.
     O --erro (#F0616D) é pensado pra TEXTO de erro sobre fundo escuro;
     usado como FUNDO com texto branco em cima ele dá 3,16:1, abaixo do
     mínimo de 4,5. Este dá 6,5:1. Não mexi no --erro pra não alterar
     todas as mensagens de erro do app por causa de um badge. */
  background: #b3261e;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  pointer-events: none;
}
#badge-notificacoes.oculto { display: none; }

#lista-notificacoes {
  display: flex;
  flex-direction: column;
}
.notificacao-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 12px 4px;
  border: none;
  border-bottom: 1px solid var(--linha);
  background: transparent !important;
  text-align: left;
  cursor: pointer;
}
/* Não lida ganha um ponto verde na esquerda em vez de fundo colorido:
   fundo brigaria com o tema claro e com a folha. */
.notificacao-nova { position: relative; padding-left: 14px; }
.notificacao-nova::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--verde);
}
.notificacao-avatar {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: var(--surf2);
}
.notificacao-corpo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.notificacao-corpo strong {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--txt);
}
.notificacao-corpo span {
  font-size: 0.8rem;
  color: var(--fraco);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
#notificacoes-vazio {
  margin: 24px 0;
  text-align: center;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--fraco);
}
#notificacoes-vazio.oculto { display: none; }

/* ==================== CLIMA ====================
   Pílula no modal do município, painel de instrumentos e chips do
   Modo Clima. Dados em js/clima.js; desenho em js/script.js.

   Estas regras ficam DEPOIS da CAMADA UI MODERNA de propósito: ela
   força `background: var(--surf2) !important` em todo `button`, e
   tanto a pílula quanto os chips SÃO <button>. Sem vir por último, o
   vidro viraria um retângulo cinza.

   O glassmorphism usa uma cor ESCURA fixa nos dois temas, não var(--surf):
   a pílula flutua sobre a arte do selo (imagem colorida e imprevisível),
   e vidro claro sobre arte clara some. Contraste do texto é garantido
   pelo próprio fundo escuro + a sombra abaixo. */

#scratch-hero {
  position: relative;
}

#clima-pilula {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  max-width: 46%;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(16, 20, 26, 0.55) !important;
  color: #fff !important;
  cursor: pointer;
  overflow: hidden;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  /* border-radius junto na transição: a pílula vira cartão ao expandir,
     e sem isso o canto "salta" de 999px pra 18px de uma vez. */
  transition: border-radius 0.34s cubic-bezier(0.22, 1, 0.36, 1),
              max-width 0.34s cubic-bezier(0.22, 1, 0.36, 1),
              padding 0.34s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.2s ease;
}
#clima-pilula.oculto { display: none; }
#clima-pilula:active { background: rgba(16, 20, 26, 0.72) !important; }

#clima-pilula-resumo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
#clima-pilula-icone svg { width: 18px; height: 18px; display: block; }

/* Fechada: altura 0 e sem opacidade. Animar grid-template-rows de 0fr
   pra 1fr é o truque que permite transição suave até uma altura que a
   gente não sabe de antemão -- `height: auto` não anima. */
#clima-pilula-previsao {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.34s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.2s ease,
              margin-top 0.34s ease;
  margin-top: 0;
}
#clima-pilula.expandida {
  max-width: 78%;
  border-radius: 18px;
  padding: 10px 12px 11px;
}
#clima-pilula.expandida #clima-pilula-previsao {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 9px;
}
/* O ÚNICO filho do grid precisa de min-height:0 e o pai de
   overflow:hidden pro colapso de 0fr realmente cortar o conteúdo.
   O wrapper .clima-previsao-interna existe exatamente por isso: com os
   dias soltos como filhos diretos, o 0fr zerava só a primeira linha e
   os demais caíam em linhas implícitas de altura automática. */
#clima-pilula-previsao { overflow: hidden; }
/* Largura fixa e conhecida, pra ela poder ir a ZERO quando fechada.
   Sem isso a previsão escondida continuava DITANDO a largura do pai
   (flex column mede pelo filho mais largo), e a pílula "fechada"
   nascia com 131px -- larga como se estivesse aberta, só que vazia. */
.clima-previsao-interna {
  min-height: 0;
  display: block;
  width: 148px;
}
#clima-pilula-previsao {
  width: 0;
  transition: grid-template-rows 0.34s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.2s ease,
              width 0.34s cubic-bezier(0.22, 1, 0.36, 1),
              margin-top 0.34s ease;
}
#clima-pilula.expandida #clima-pilula-previsao { width: 168px; }

.clima-dia {
  display: grid;
  /* Coluna do dia mais larga: agora leva a data junto ("qua 19"),
     nao so o nome da semana. */
  grid-template-columns: 3.4rem 1.1rem 1fr;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 0.76rem;
  line-height: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.clima-dia:first-child { border-top: none; }
.clima-dia-nome { text-transform: capitalize; opacity: 0.8; }
.clima-dia-icone svg { width: 15px; height: 15px; display: block; opacity: 0.9; }
.clima-dia-temp { text-align: right; font-weight: 600; white-space: nowrap; }
.clima-dia-temp i { font-style: normal; opacity: 0.55; margin-left: 4px; }

/* ---- Painel de instrumentos (altitude + pôr do sol) ---- */
#clima-instrumentos {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 10px 0 2px;
}
#clima-instrumentos.oculto { display: none; }
.instrumento {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  color: var(--fraco);
  white-space: nowrap;
}
.instrumento svg { width: 14px; height: 14px; flex: 0 0 14px; }

/* ---- Chips do Modo Clima no mapa ---- */
#camada-clima {
  position: absolute;
  inset: 0;
  z-index: 4;
  /* A camada não intercepta toque: quem recebe é cada chip. Assim
     arrastar o mapa continua funcionando por cima dela. */
  pointer-events: none;
  overflow: hidden;
}
#camada-clima.oculto { display: none; }

.clima-chip {
  position: absolute;
  /* left/top são o CENTRO do rótulo; o translate recentra o chip. */
  transform: translate(-50%, -50%);
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(16, 20, 26, 0.58) !important;
  color: #fff !important;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  animation: clima-chip-entra 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
.clima-chip-icone svg { width: 14px; height: 14px; display: block; }
.clima-chip:active { transform: translate(-50%, -50%) scale(0.94); }

@keyframes clima-chip-entra {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Botão do Modo Clima: mesma família visual da bússola/Modo Viagem. */
#btn-modo-clima.ativo {
  background: var(--verde) !important;
  color: var(--verde-tinta) !important;
}

/* Quem pediu menos movimento não recebe nem a expansão nem a entrada
   dos chips -- o conteúdo continua aparecendo, só que de uma vez. */
@media (prefers-reduced-motion: reduce) {
  #clima-pilula,
  #clima-pilula-previsao { transition: none; }
  .clima-chip { animation: none; }
}

/* Posição do botão Modo Clima: abaixo da bússola ("Onde estou"), que
   fica em bottom:138px na camada final. Mesma família visual dela --
   48px, vidro escuro -- porque é ação secundária, não primária como o
   Modo Viagem (58px, verde sólido). */
#btn-modo-clima {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 16px);
  bottom: 78px;
  z-index: 50;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(23, 27, 33, 0.9) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff !important;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}
#btn-modo-clima .ico-svg { width: 22px; height: 22px; }
#btn-modo-clima.ativo {
  background: var(--verde) !important;
  color: var(--verde-tinta) !important;
}

/* A dica do mapa dividia esse mesmo canto: sobe pra não ficar
   embaixo do botão novo. */
#dica-mapa { bottom: 134px !important; }

/* Aviso de "aproxime o mapa": aparece quando o Modo Clima é ligado com
   o mapa afastado demais pra caber qualquer chip. Sem ele o botão
   acendia e a tela não mudava -- parecia defeito. */
.clima-aviso-zoom {
  position: absolute;
  left: 50%;
  bottom: 22%;
  transform: translateX(-50%);
  margin: 0;
  padding: 9px 16px;
  max-width: 78%;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(16, 20, 26, 0.62);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.3;
  text-align: center;
  pointer-events: none;
  animation: clima-chip-entra 0.26s ease;
}


/* No Modo Clima os pontos turísticos somem.
   Nos mesmos zooms em que os chips de temperatura aparecem, os pinos de
   PT também estão na tela -- duas camadas de marcador disputando o
   mesmo espaço vira sopa de ícone. A transição de opacidade evita o
   corte seco ao ligar/desligar.
   `pointer-events: none` junto: sem isso o pino invisível continuaria
   roubando o toque destinado ao chip por cima dele. */
/* Some com os pontos turísticos enquanto o Modo Clima está ligado.

   QUEM ESCONDE É O JS (alternarModoClima, em js/script.js), com
   `display` direto no grupo. Aqui fica só o `pointer-events`, que é
   barato e ajuda caso o display volte por outro caminho.

   Por que não resolver tudo no CSS: o `opacity` dos itens vem da
   variável `--pontos-opacidade`, que o JS reescreve a CADA zoom. Uma
   regra de opacidade concorrendo com uma variável reescrita o tempo
   todo é frágil -- e, pior, não consegui verificar o efeito neste
   ambiente (opacity e visibility em <g> de SVG não são refletidos por
   getComputedStyle aqui, mesmo com a regra comprovadamente aplicada).
   `display` no elemento é observável e não disputa com nada. */
#mapa-rj.modo-clima #pontos-turisticos { pointer-events: none; }

/* ============ BOTÕES FLUTUANTES DO MAPA ============
   Hierarquia visual em três níveis, em vez de três botões iguais
   disputando o mesmo canto:

     PRIMÁRIO   Modo Viagem -- FAB centrado, verde neon, com glow.
                É a ação que o app quer que a pessoa faça: pilotar.
     SECUNDÁRIO Modos e GPS -- vidro escuro, menores, na lateral.
     (o Modo Clima virou uma linha DENTRO da folha de Modos)

   Antes eram três botões soltos empilhados à direita, todos do mesmo
   tamanho e peso -- nada dizia o que era importante, e cada modo novo
   ia empilhar mais um. */

/* ---- FAB do Modo Viagem ---- */
#btn-modo-viagem {
  position: fixed;
  left: 50%;
  /* Acima da barra inferior (~64px + área segura). */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 78px);
  transform: translateX(-50%);
  z-index: 60;
  width: 62px;
  height: 62px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: var(--verde, #2BD576) !important;
  color: var(--verde-tinta, #06210F) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* Glow: duas sombras verdes de raios diferentes + uma escura por
     baixo pra descolar do mapa. É o que dá o "neon" sem borda. */
  box-shadow:
    0 0 0 6px rgba(43, 213, 118, 0.14),
    0 6px 22px rgba(43, 213, 118, 0.5),
    0 3px 10px rgba(0, 0, 0, 0.4);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s ease;
}
#btn-modo-viagem.oculto { display: none; }
#btn-modo-viagem .ico-svg { width: 30px; height: 30px; stroke-width: 2.2; }
#btn-modo-viagem:active { transform: translateX(-50%) scale(0.93); }

/* Viagem em andamento: o glow pulsa devagar, pra se notar de relance
   que o rastreio está ligado mesmo sem olhar a notificação. */
#btn-modo-viagem.viagem-ativa { animation: viagem-pulsa 2.2s ease-in-out infinite; }
@keyframes viagem-pulsa {
  0%, 100% {
    box-shadow: 0 0 0 6px rgba(43,213,118,0.14),
                0 6px 22px rgba(43,213,118,0.5),
                0 3px 10px rgba(0,0,0,0.4);
  }
  50% {
    box-shadow: 0 0 0 14px rgba(43,213,118,0),
                0 6px 26px rgba(43,213,118,0.75),
                0 3px 10px rgba(0,0,0,0.4);
  }
}
@media (prefers-reduced-motion: reduce) {
  #btn-modo-viagem.viagem-ativa { animation: none; }
}

/* ---- Botões secundários da lateral (Modos e GPS) ---- */
#btn-modos {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 16px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 148px);
  z-index: 50;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(23, 27, 33, 0.9) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff !important;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}
#btn-modos .ico-svg { width: 21px; height: 21px; }
/* Com algum modo ligado o botão fica verde: é o único aviso visível
   quando a folha está fechada. */
#btn-modos.com-modo-ativo {
  background: var(--verde) !important;
  color: var(--verde-tinta) !important;
}
#modos-contador {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 999px;
  background: #b3261e;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  pointer-events: none;
}
#modos-contador.oculto { display: none; }

/* GPS: o menor dos três -- é o mais secundário. */
#btn-onde-estou {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 96px) !important;
  width: 42px !important;
  height: 42px !important;
}
#btn-onde-estou .ico-svg { width: 19px; height: 19px; }

/* A dica do mapa sobe pra não encostar no FAB. */
#dica-mapa { bottom: 152px !important; }

/* ---- Folha de Modos ---- */
#modos-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}
.modo-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--linha);
}
.modo-item:last-child { border-bottom: none; }
.modo-icone {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--surf2);
  color: var(--txt);
}
.modo-icone svg { width: 20px; height: 20px; }
.modo-texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.modo-texto strong { font-size: 0.92rem; font-weight: 600; color: var(--txt); }
.modo-texto small { font-size: 0.76rem; color: var(--fraco); line-height: 1.35; }

/* Modo ainda não implementado: apagado, mas visível -- mostra o que
   vem por aí sem prometer que já funciona. */
.modo-item-embreve { opacity: 0.45; }
.modo-item-embreve .modo-switch { cursor: default; }

/* Switch: input escondido + trilho desenhado, o mesmo padrão dos
   toggles de Configurações. */
.modo-switch { flex: 0 0 auto; position: relative; cursor: pointer; }
.modo-switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.modo-switch-trilho {
  display: block;
  width: 46px;
  height: 27px;
  border-radius: 999px;
  background: var(--surf2);
  border: 1px solid var(--linha);
  position: relative;
  transition: background-color 0.22s ease, border-color 0.22s ease;
}
.modo-switch-trilho::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--fraco);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.22s ease;
}
.modo-switch input:checked + .modo-switch-trilho {
  background: var(--verde);
  border-color: var(--verde);
}
.modo-switch input:checked + .modo-switch-trilho::after {
  transform: translateX(19px);
  background: var(--verde-tinta);
}
.modo-switch input:disabled + .modo-switch-trilho { opacity: 0.6; }
/* Foco visível pra quem navega por teclado -- o input é invisível, então
   o anel precisa aparecer no trilho. */
.modo-switch input:focus-visible + .modo-switch-trilho {
  outline: 2px solid var(--verde);
  outline-offset: 2px;
}

/* ============ BLOQUEADO x DESBLOQUEADO ============
   O status tem que ser óbvio de relance, numa lista longa, sem ler
   texto nenhum. Três sinais somados: opacidade, cor e o cadeado. */

/* ---- Conquistas ---- */
.conquista-item-bloqueada {
  opacity: 0.55;
}
/* A medalha NÃO herda a opacidade do card: ela já é escura e apagada
   por conta própria, e somar as duas coisas some com o cadeado. */
.conquista-item-bloqueada .conquista-medalha { opacity: 1; }
.conquista-item-bloqueada h3 { color: var(--fraco); font-weight: 600; }

/* Desbloqueada: anel dourado com glow em volta da medalha. É a
   recompensa visual -- o mesmo dourado da borda dos selos, pra a
   coleção inteira falar a mesma língua. */
.conquista-item-livre .conquista-medalha {
  position: relative;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px rgba(212, 175, 55, 0.85),
    0 0 14px rgba(212, 175, 55, 0.35);
}

/* ---- Cadeado sobre miniatura (rotas, e reaproveitável) ---- */
.cadeado-sobreposto {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* Véu escuro por baixo do ícone: sem ele o cadeado sumia em cima de
     miniatura clara, mesmo com a dessaturação. */
  background: rgba(10, 13, 17, 0.45);
  border-radius: inherit;
  color: #B9C2CE;
  pointer-events: none;
}
.cadeado-sobreposto svg { width: 40%; height: 40%; max-width: 26px; max-height: 26px; }


/* ---- Indicar selo ----
   Município sem arte própria: quem esteve lá manda uma foto candidata.
   Ver abrirIndicarSelo em js/script.js. */
#modal-indicar-selo {
  position: fixed;
  inset: 0;
  background: var(--backdrop, rgba(15, 18, 22, 0.85));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}

#modal-indicar-selo.oculto {
  display: none;
}

#indicar-selo-conteudo {
  position: relative;
  background: var(--surf);
  border-radius: 12px;
  padding: 24px;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  text-align: left;
}

#indicar-selo-conteudo h2 {
  margin: 0 0 4px;
  font-size: 1.1rem;
}

#indicar-selo-municipio {
  margin: 0 0 14px;
  color: var(--verde);
  font-weight: 600;
  font-size: 0.9rem;
}

.indicar-selo-texto {
  margin: 0 0 16px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--fraco);
}

/* As regras ficam num bloco separado e com peso visual: são elas que
   evitam foto que não dá pra usar, e reduzem retrabalho de moderação. */
.indicar-selo-regras {
  background: var(--surf2);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.indicar-selo-regras h3 {
  margin: 0 0 6px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fraco);
}

.indicar-selo-regras h3 + ul {
  margin: 0 0 12px;
}

.indicar-selo-regras ul {
  padding-left: 18px;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--txt);
}

.indicar-selo-regras li {
  margin-bottom: 4px;
}

.indicar-selo-aviso {
  margin: 4px 0 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--fraco);
}

#indicar-selo-previa {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

#indicar-selo-previa.oculto {
  display: none;
}

#indicar-selo-previa-img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--linha);
}

#indicar-selo-nome-arquivo {
  font-size: 0.78rem;
  color: var(--fraco);
  word-break: break-all;
}

#indicar-selo-status {
  margin: 12px 0 0;
  font-size: 0.84rem;
  line-height: 1.45;
}

#indicar-selo-status.oculto {
  display: none;
}

.indicar-selo-status-ok {
  color: var(--verde);
}

.indicar-selo-status-erro {
  color: var(--erro);
}

.indicar-selo-status-neutro {
  color: var(--fraco);
}

#btn-enviar-selo {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 12px 14px;
  border: none;
  border-radius: 10px;
  background: var(--verde);
  color: var(--verde-tinta);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

#btn-enviar-selo:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Não reusa .settings-btn-secundario: aquela classe só é estilizada
   dentro de #configuracoes-conteudo, então aqui fora sairia sem borda
   nenhuma. */
#btn-escolher-foto-selo {
  display: block;
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  background: transparent;
  color: var(--verde);
  border: 1px solid var(--verde);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

#btn-escolher-foto-selo:hover {
  background: var(--verde-esc, rgba(43, 213, 118, 0.12));
}

/* ---- Selos indicados (painel de Admin) ---- */
#selos-indicados-filtros {
  display: flex;
  gap: 8px;
  margin: 10px 0 12px;
  flex-wrap: wrap;
}

.selo-indicado-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linha);
}

.selo-indicado-foto {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--linha);
  flex: 0 0 auto;
}

.selo-indicado-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.82rem;
  min-width: 0;
  flex: 1;
}

.selo-indicado-info span {
  color: var(--fraco);
  font-size: 0.76rem;
}

.selo-indicado-info a {
  color: var(--verde);
  font-size: 0.76rem;
}

.selo-indicado-acoes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
}

#admin-conteudo .selo-indicado-acoes button {
  padding: 7px 12px !important;
  font-size: 0.78rem !important;
  border-radius: 8px !important;
  width: auto !important;
  margin: 0 !important;
}

/* Os filtros são chips, não botões de painel. Sem esta regra a
   "#admin-conteudo button" lá de cima os deixa block/100%, e os três
   viram uma pilha ocupando meia tela. Mesmo cuidado que os outros
   componentes novos do admin precisam ter. */
#admin-conteudo #selos-indicados-filtros .chip {
  display: inline-flex !important;
  width: auto !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  font-size: 0.8rem !important;
  background: var(--surf2) !important;
  border: 1px solid var(--linha) !important;
  color: var(--fraco) !important;
  margin: 0 !important;
}

#admin-conteudo #selos-indicados-filtros .chip-ativo {
  background: var(--verde) !important;
  color: var(--verde-tinta) !important;
  border-color: var(--verde) !important;
  font-weight: 700 !important;
}

/* ---- Denunciar conteúdo ---- */
#modal-denuncia {
  position: fixed;
  inset: 0;
  background: var(--backdrop, rgba(15, 18, 22, 0.85));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 120;
  padding: 16px;
}

#modal-denuncia.oculto {
  display: none;
}

#denuncia-conteudo {
  position: relative;
  background: var(--surf);
  border-radius: 12px;
  padding: 24px;
  width: 100%;
  max-width: 400px;
  max-height: 90vh;
  overflow-y: auto;
  text-align: left;
}

#denuncia-conteudo h2 {
  margin: 0 0 10px;
  font-size: 1.05rem;
}

/* O trecho denunciado fica citado: sem ele a pessoa não tem certeza de
   que está denunciando o conteúdo certo. */
#denuncia-alvo {
  margin: 0 0 16px;
  padding: 10px 12px;
  background: var(--surf2);
  border-left: 3px solid var(--linha);
  border-radius: 6px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--fraco);
  word-break: break-word;
}

.denuncia-titulo {
  display: block;
  margin: 0 0 8px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fraco);
  font-weight: 700;
}

#denuncia-motivos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.denuncia-motivo {
  text-align: left;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--surf2);
  border: 1px solid var(--linha);
  color: var(--txt);
  font-size: 0.86rem;
  cursor: pointer;
}

.denuncia-motivo.ativo {
  border-color: var(--erro);
  color: var(--erro);
  font-weight: 600;
}

#denuncia-detalhe {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surf2);
  border: 1px solid var(--linha);
  color: var(--txt);
  font-size: 0.88rem;
  font-family: inherit;
  resize: vertical;
}

#denuncia-status {
  margin: 12px 0 0;
  font-size: 0.84rem;
}

#denuncia-status.oculto {
  display: none;
}

.denuncia-status-ok { color: var(--verde); }
.denuncia-status-erro { color: var(--erro); }
.denuncia-status-neutro { color: var(--fraco); }

#btn-enviar-denuncia {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 12px 14px;
  border: none;
  border-radius: 10px;
  background: var(--erro);
  color: #2A0A0E;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

#btn-enviar-denuncia:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.denuncia-rodape {
  margin: 14px 0 0;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--fraco);
}

/* ---- Fila de denúncias (Admin) ---- */
#denuncias-filtros {
  display: flex;
  gap: 8px;
  margin: 10px 0 12px;
  flex-wrap: wrap;
}

#admin-conteudo #denuncias-filtros .chip {
  display: inline-flex !important;
  width: auto !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  font-size: 0.8rem !important;
  background: var(--surf2) !important;
  border: 1px solid var(--linha) !important;
  color: var(--fraco) !important;
  margin: 0 !important;
}

#admin-conteudo #denuncias-filtros .chip-ativo {
  background: var(--erro) !important;
  color: #2A0A0E !important;
  border-color: var(--erro) !important;
  font-weight: 700 !important;
}

.denuncia-card {
  padding: 12px 0;
  border-bottom: 1px solid var(--linha);
}

.denuncia-card-topo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 6px;
}

.denuncia-card-topo b {
  font-size: 0.86rem;
  color: var(--erro);
}

.denuncia-card-topo span {
  font-size: 0.74rem;
  color: var(--fraco);
}

.denuncia-card-detalhe {
  margin: 0 0 10px;
  padding: 8px 10px;
  background: var(--surf2);
  border-radius: 8px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--txt);
  word-break: break-word;
}

.denuncia-card-acoes {
  display: flex;
  gap: 8px;
}

#admin-conteudo .denuncia-card-acoes button {
  padding: 8px 14px !important;
  font-size: 0.8rem !important;
  border-radius: 8px !important;
  width: auto !important;
  margin: 0 !important;
}