/* Rotas — pensado para o iPhone primeiro.
   Sem framework e sem build: é para você abrir e usar.

   Layout no celular: o mapa ocupa a tela inteira ao fundo, e o conteúdo mora
   numa folha arrastável embaixo. Motivo: no layout anterior o cabeçalho, as
   abas e um mapa de 42vh comiam ~500px dos 844 de um iPhone, e sobrava espaço
   para uns 2 resultados. Aqui você escolhe quanto quer de mapa e quanto quer
   de lista.

   As abas ficam DENTRO da folha, embaixo, ao alcance do polegar. */

:root {
  --fundo: #14161a;
  --fundo-2: #1c1f26;
  --fundo-3: #262a33;
  --borda: #333844;
  --texto: #e8eaed;
  --fraco: #9aa1ad;
  --realce: #4c9aff;
  --ok: #3ddc97;
  --atencao: #ffb454;
  --erro: #ff6b6b;
  --raio: 12px;

  /* Barras do iPhone (notch / indicador de home) */
  --seguro-topo: env(safe-area-inset-top, 0px);
  --seguro-baixo: env(safe-area-inset-bottom, 0px);
  --seguro-esq: env(safe-area-inset-left, 0px);
  --seguro-dir: env(safe-area-inset-right, 0px);

  /* Alvo mínimo de toque recomendado pela Apple. */
  --toque: 44px;

  /* Altura da folha de conteúdo. O JS sobrescreve durante o arraste. */
  --altura-folha: 58dvh;
}

* { box-sizing: border-box; }

/* O atributo `hidden` vale menos que qualquer `display` declarado numa classe.
 * Sem esta regra, `.painel-config { display: grid }` mantinha o painel de
 * configuração sempre visível — a engrenagem alternava o atributo e nada
 * acontecia. O mesmo valia para `.botao-link { display: inline-block }`.
 * Se você declarar `display` numa classe cujo elemento é escondido por JS,
 * é este `!important` que segura. */
[hidden] { display: none !important; }

html {
  /* dvh acompanha a barra do Safari que aparece e desaparece; vh não, e o
     conteúdo ficava cortado atrás dela. O vh fica como reserva para
     navegador antigo. */
  height: 100vh;
  height: 100dvh;
}

body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

/* ---------- mapa: fundo de tela cheia ---------- */

.mapa-wrap {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #0e1013;
}
#mapa { width: 100%; height: 100%; background: #0e1013; }
.leaflet-container { font: inherit; background: #0e1013; }

/* Empurra os controles do Leaflet para fora do notch e da folha. */
.leaflet-top { top: calc(var(--seguro-topo) + 56px); }
.leaflet-bottom { bottom: calc(var(--altura-folha) + 8px); }
.leaflet-right { right: calc(var(--seguro-dir) + 4px); }
.leaflet-left { left: calc(var(--seguro-esq) + 4px); }

.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--fundo-2);
  color: var(--texto);
}
.leaflet-popup-content { margin: 10px 12px; font-size: 14px; }
.leaflet-control-attribution {
  background: rgba(20, 22, 26, 0.85) !important;
  color: var(--fraco) !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a { color: var(--fraco) !important; }
.leaflet-bar a {
  background: var(--fundo-2) !important;
  color: var(--texto) !important;
  border-color: var(--borda) !important;
  width: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
}

/* Halo do ponto selecionado. Pulsa devagar só para o olho achar o ponto no
   meio de dezenas iguais; respeita prefers-reduced-motion no fim do arquivo. */
.halo-pulso { animation: pulso 1.8s ease-in-out infinite; transform-origin: center; }
@keyframes pulso {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 0.30; }
}

/* ---------- legenda recolhível ---------- */

.legenda-caixa {
  position: absolute;
  left: calc(var(--seguro-esq) + 8px);
  bottom: calc(var(--altura-folha) + 12px);
  z-index: 500;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  transition: bottom 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.legenda-botao {
  width: var(--toque);
  height: var(--toque);
  padding: 0;
  border-radius: 50%;
  background: rgba(28, 31, 38, 0.92);
  border: 1px solid var(--borda);
  color: var(--fraco);
  font-size: 19px;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.legenda-botao[aria-expanded="true"] { color: var(--realce); border-color: var(--realce); }

.legenda {
  background: rgba(20, 22, 26, 0.94);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 11.5px;
  color: var(--fraco);
  display: grid;
  gap: 4px;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
.pt {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
.pt-campo { background: var(--realce); }
.pt-estimada { background: var(--atencao); }
.pt-verificado { background: var(--ok); }
.pt-eu { background: #ff5ec4; }
.pt-selecionado {
  background: var(--realce);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(76, 154, 255, 0.4);
  width: 11px;
  height: 11px;
}

/* ---------- botão flutuante de GPS ---------- */

.botao-flutuante {
  position: absolute;
  right: calc(var(--seguro-dir) + 10px);
  bottom: calc(var(--altura-folha) + 12px);
  z-index: 500;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  background: rgba(28, 31, 38, 0.94);
  border: 1px solid var(--borda);
  color: var(--realce);
  font-size: 22px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  transition: bottom 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.1s;
}
.botao-flutuante:active { transform: scale(0.93); }
.botao-flutuante.ocupado { color: var(--fraco); }

/* ---------- cabeçalho flutuante ---------- */

.topo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 700;
  padding: calc(var(--seguro-topo) + 8px) calc(var(--seguro-dir) + 12px) 8px
           calc(var(--seguro-esq) + 12px);
  background: linear-gradient(rgba(20, 22, 26, 0.95), rgba(20, 22, 26, 0.72));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(51, 56, 68, 0.6);
}
.topo-linha { display: flex; align-items: center; gap: 10px; }
.topo h1 { font-size: 17px; margin: 0; letter-spacing: -0.2px; }
.municipio {
  color: var(--fraco);
  font-size: 12.5px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.painel-config {
  margin-top: 10px;
  display: grid;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--borda);
}
.painel-config label { font-size: 12.5px; color: var(--fraco); }
.painel-config label + input { margin-bottom: 4px; }
.config-acoes { display: flex; gap: 8px; margin-top: 8px; }
.config-acoes button { flex: 1; }

.status-api { margin: 8px 0 0; font-size: 13px; }

/* Engrenagem ganha um ponto verde quando há chave guardada, para você saber
   sem abrir o painel. */
.icone.com-chave { color: var(--ok); }
.icone.com-chave::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ok);
  vertical-align: top;
  margin-left: -3px;
}
.icone[aria-expanded="true"] { color: var(--realce); }

/* ---------- folha de conteúdo ---------- */

.conteudo {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 600;
  height: var(--altura-folha);
  display: flex;
  flex-direction: column;
  background: var(--fundo-2);
  border-top: 1px solid var(--borda);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.55);
  transition: height 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Durante o arraste a transição atrapalha: o dedo tem de mandar direto. */
body.arrastando .conteudo,
body.arrastando .legenda-caixa,
body.arrastando .botao-flutuante { transition: none; }

/* As alturas de cada parada NÃO ficam aqui de propósito.
 *
 * Duplicar os valores em CSS e JS já causou divergência: as sobreposições de
 * paisagem no CSS discordavam das frações do JS, e a folha saltava para uma
 * altura diferente da que o dedo indicava. Agora `app.js` (FRACAO_SNAP) é a
 * única fonte de verdade e escreve `--altura-folha` inline no body.
 *
 * O valor em :root é só o estado antes do JS rodar. */

/* Alça: área de toque generosa, barrinha discreta. */
.alca {
  flex: 0 0 auto;
  height: 28px;
  display: grid;
  place-items: center;
  cursor: grab;
  touch-action: none;          /* o gesto é nosso, não do scroll da página */
  -webkit-tap-highlight-color: transparent;
}
.alca:active { cursor: grabbing; }
.alca-barra {
  width: 42px;
  height: 5px;
  border-radius: 3px;
  background: var(--borda);
  transition: background 0.15s;
}
.alca:hover .alca-barra, .alca:focus-visible .alca-barra { background: var(--realce); }

/* ---------- abas ---------- */

.abas {
  flex: 0 0 auto;
  display: flex;
  border-bottom: 1px solid var(--borda);
  padding: 0 4px;
}
.aba {
  flex: 1;
  min-width: 0;
  min-height: var(--toque);
  padding: 6px 2px 8px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--fraco);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  white-space: nowrap;
}
.aba-icone { font-size: 17px; line-height: 1.1; }
.aba.ativa { color: var(--realce); border-bottom-color: var(--realce); }

/* Contador de paradas na aba Rota. */
.contador {
  position: absolute;
  transform: translate(14px, -6px);
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--realce);
  color: #06121f;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}
.aba { position: relative; }

/* ---------- rota ---------- */

.rota-resumo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--fundo-3);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.rota-numero { text-align: center; }
.rota-numero b {
  display: block;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.rota-numero span { font-size: 11px; color: var(--fraco); }
.rota-numero.ganho b { color: var(--ok); }

.rota-opcoes { margin-bottom: 6px; }
.rota-opcoes .radio { min-height: 38px; font-size: 14px; }

/* Cartão de parada: bolinha numerada à esquerda, ações à direita. */
.item-rota {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 10px;
  align-items: center;
}
.rota-pos {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--realce);
  color: #06121f;
  font-size: 13px;
  font-weight: 700;
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}
.rota-acoes { display: flex; gap: 4px; }
.rota-acoes button {
  min-height: 34px;
  min-width: 34px;
  padding: 0 6px;
  font-size: 15px;
  background: var(--fundo-2);
  color: var(--fraco);
  border: 1px solid var(--borda);
}
.rota-acoes button:disabled { opacity: 0.3; }
.rota-acoes .navegar { color: var(--realce); border-color: var(--realce); }

/* Botão de adicionar/remover da rota nos cartões de resultado. */
.item-com-acao { display: grid; grid-template-columns: 1fr auto; gap: 10px;
                 align-items: center; }
.btn-rota {
  min-height: 38px;
  min-width: 38px;
  padding: 0;
  font-size: 19px;
  font-weight: 400;
  background: var(--fundo-2);
  color: var(--realce);
  border: 1px solid var(--borda);
}
.btn-rota.dentro { background: var(--realce); color: #06121f; border-color: var(--realce); }

.pt-rota { background: var(--realce); border: 2px solid #fff; width: 11px; height: 11px; }

/* Marcador numerado no mapa (divIcon, sem imagem). */
.marcador-rota {
  background: var(--realce);
  color: #06121f;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font: 700 12px/20px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
}
.marcador-rota.partida { background: #ff5ec4; }

/* ---------- painéis ---------- */

main {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.painel {
  display: none;
  padding: 12px 14px calc(var(--seguro-baixo) + 16px);
}
.painel.ativo { display: block; }

/* ---------- formulários ---------- */

/* 16px é o mínimo para o Safari do iPhone não dar zoom ao focar o campo. */
input, select, button, textarea { font-size: 16px; font-family: inherit; }

input[type="search"], input[type="text"], input[type="password"], select {
  width: 100%;
  min-height: var(--toque);
  padding: 11px 12px;
  background: var(--fundo-3);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  color: var(--texto);
  -webkit-appearance: none;
  appearance: none;
}
input:focus, select:focus, button:focus-visible {
  outline: 2px solid var(--realce);
  outline-offset: 1px;
}

button, .botao-link {
  min-height: var(--toque);
  padding: 11px 16px;
  background: var(--realce);
  border: none;
  border-radius: var(--raio);
  color: #06121f;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
button:active { transform: scale(0.985); }
button:disabled { opacity: 0.45; cursor: default; transform: none; }
button.secundario {
  background: var(--fundo-3);
  color: var(--texto);
  border: 1px solid var(--borda);
}
button.icone {
  min-height: var(--toque);
  min-width: var(--toque);
  background: none;
  color: var(--fraco);
  padding: 0;
  font-size: 19px;
}

.busca { display: flex; gap: 8px; }
.busca button[type="submit"] { flex: 0 0 auto; width: var(--toque); font-size: 20px; }
.barra { display: flex; gap: 8px; margin-bottom: 10px; }
.barra button { flex: 1; }
.barra select { width: auto; flex: 0 0 auto; }
.coord-manual { display: flex; gap: 8px; margin-bottom: 10px; }
.coord-manual button { flex: 0 0 auto; }

.formulario { display: grid; gap: 5px; }
.formulario label { font-size: 13px; color: var(--fraco); margin-top: 8px; }
.formulario button[type="submit"] { margin-top: 16px; }

.coords {
  margin: 14px 0 0;
  padding: 8px 12px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.coords legend { font-size: 13px; color: var(--fraco); padding: 0 6px; }
.radio {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--toque);
  font-size: 15px;
  color: var(--texto);
  margin: 0;
}
.radio input { width: auto; min-height: 0; accent-color: var(--realce); transform: scale(1.2); }
.gps-info { font-size: 13px; min-height: 18px; }

/* ---------- ajuda recolhível ---------- */

/* As dicas viraram <details>. Antes eram parágrafos fixos e cada aba perdia
   ~40px de altura útil só com texto que você já leu uma vez. */
.ajuda { margin: 8px 0 12px; }
.ajuda summary {
  font-size: 12.5px;
  color: var(--fraco);
  cursor: pointer;
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 5px;
  list-style: none;
}
.ajuda summary::-webkit-details-marker { display: none; }
.ajuda summary::before { content: '?'; }
.ajuda[open] summary::before { content: '×'; }
.ajuda p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--fraco);
  background: var(--fundo-3);
  padding: 10px 12px;
  border-radius: 10px;
}

/* ---------- textos auxiliares ---------- */

.fraco { color: var(--fraco); font-weight: 400; font-size: 13px; }
code {
  background: var(--fundo-3);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 13px;
}
.aviso {
  background: #33240d;
  border: 1px solid var(--atencao);
  color: #ffdda8;
  padding: 10px 12px;
  border-radius: var(--raio);
  font-size: 13.5px;
  margin: 0 0 10px;
}
.aviso.erro { background: #331414; border-color: var(--erro); color: #ffc9c9; }

/* ---------- listas ---------- */

.lista { display: grid; gap: 8px; }

.item {
  padding: 11px 12px;
  min-height: var(--toque);
  background: var(--fundo-3);
  border: 1px solid var(--borda);
  border-left-width: 3px;
  border-radius: var(--raio);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s;
}
.item:active { transform: scale(0.99); }
.item-campo { border-left-color: var(--realce); }
.item-estimada { border-left-color: var(--atencao); }
.item-verificado { border-left-color: var(--ok); }

/* Item selecionado. Com centenas de endereços parecidos, sem isto você toca,
   olha o mapa e perde a referência de onde veio. */
.item.selecionado {
  background: #1d2b40;
  border-color: var(--realce);
  border-left-width: 5px;
  box-shadow: 0 0 0 1px var(--realce), 0 4px 16px rgba(76, 154, 255, 0.22);
}
.item.selecionado .item-titulo { color: #fff; }
.item.selecionado .item-titulo::before {
  content: '▸ ';
  color: var(--realce);
  font-weight: 700;
}
.item.selecionado .item-meta { color: #c3cede; }

.item-titulo { font-size: 15px; font-weight: 500; line-height: 1.35; }
.item-meta {
  color: var(--fraco);
  font-size: 12.5px;
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  align-items: center;
}

/* Números candidatos na aba Faltando: alvo de toque decente. Antes eram
   ~26px de altura, abaixo do mínimo de 44px da Apple. */
.numero-candidato {
  min-height: 38px;
  min-width: 54px;
  padding: 6px 12px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.selo {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  background: var(--fundo-2);
  color: var(--fraco);
}
.selo-alta { background: #14361f; color: var(--ok); }
.selo-baixa { background: #33240d; color: var(--atencao); }
.selo-verificado { background: #14361f; color: var(--ok); }

.vazio { color: var(--fraco); text-align: center; padding: 26px 10px; font-size: 14px; }

/* Esqueleto de carregamento: dá sensação de resposta imediata em vez de um
   texto "Carregando..." parado. */
.esqueleto {
  height: 62px;
  border-radius: var(--raio);
  background: linear-gradient(100deg, var(--fundo-3) 30%, #2f3440 50%, var(--fundo-3) 70%);
  background-size: 220% 100%;
  animation: brilho 1.1s linear infinite;
}
@keyframes brilho {
  from { background-position: 180% 0; }
  to   { background-position: -40% 0; }
}

/* ---------- navegação ---------- */

/* Fica sobre o mapa, no topo, como em navegador de carro: a manobra tem de ser
   legível de relance, sem procurar. */
.navegacao {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  padding: calc(var(--seguro-topo) + 10px) calc(var(--seguro-dir) + 12px) 10px
           calc(var(--seguro-esq) + 12px);
  background: linear-gradient(rgba(13, 32, 56, 0.98), rgba(13, 32, 56, 0.94));
  border-bottom: 2px solid var(--realce);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.nav-topo { display: flex; align-items: center; gap: 10px; }

.nav-seta {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--realce);
  color: #06121f;
  font-size: 25px;
  font-weight: 700;
  display: grid;
  place-items: center;
  line-height: 1;
}
.nav-seta.retorno { background: var(--atencao); }
.nav-seta.chegar { background: var(--ok); }

.nav-texto { flex: 1; min-width: 0; }
.nav-texto strong {
  display: block;
  font-size: 16px;
  line-height: 1.25;
  /* Duas linhas no máximo: instrução comprida em navegação é ruído. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nav-distancia {
  font-size: 21px;
  font-weight: 700;
  color: var(--realce);
  font-variant-numeric: tabular-nums;
}

.nav-rodape {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(76, 154, 255, 0.25);
  font-size: 12.5px;
  color: var(--fraco);
}
.nav-rodape span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-rodape span:last-child { flex: 0 0 auto; font-variant-numeric: tabular-nums; }

.nav-aviso {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: #ffdda8;
}

#btn-nav-voz[aria-pressed="true"] { color: var(--ok); }

/* Com a navegação aberta, o cabeçalho normal sai de cena para não competir. */
body.navegando .topo { display: none; }

/* A altura da folha durante a navegação NÃO é definida aqui: quem manda é
   `definirSnap('recolhida')` no JS. Se eu fixasse --altura-folha em .conteudo,
   a folha usaria um valor e a legenda, o botão de GPS e o toast usariam outro
   (eles leem a variável do body) — e ficariam desalinhados. */

/* ---------- folha de detalhe ---------- */

.folha {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1000;
  background: var(--fundo-2);
  border-top: 1px solid var(--realce);
  border-radius: 18px 18px 0 0;
  padding: 14px calc(var(--seguro-dir) + 16px) calc(var(--seguro-baixo) + 16px)
           calc(var(--seguro-esq) + 16px);
  box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.6);
  max-height: 62dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: sobe 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes sobe {
  from { transform: translateY(18px); opacity: 0.4; }
  to   { transform: translateY(0);    opacity: 1; }
}

.folha-cabeca { display: flex; align-items: flex-start; gap: 8px; }
.folha-cabeca strong { font-size: 16px; line-height: 1.3; flex: 1; padding-top: 8px; }

.folha-resumo {
  margin: 2px 0 12px;
  font-size: 13px;
  color: var(--fraco);
  font-variant-numeric: tabular-nums;
}

.folha-detalhes { margin-bottom: 14px; }
.folha-detalhes summary {
  font-size: 13px;
  color: var(--realce);
  cursor: pointer;
  min-height: 34px;
  display: flex;
  align-items: center;
  list-style: none;
}
.folha-detalhes summary::-webkit-details-marker { display: none; }
.folha-detalhes summary::after { content: ' ▾'; }
.folha-detalhes[open] summary::after { content: ' ▴'; }

.folha-dados {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 12px;
  margin: 8px 0 0;
  font-size: 13px;
}
.folha-dados dt { color: var(--fraco); }
.folha-dados dd { margin: 0; word-break: break-word; }

.folha-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.folha-acoes button, .folha-acoes .botao-link { flex: 1 1 45%; }
#f-ver-mapa { flex-basis: 100%; }

/* ---------- toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--altura-folha) + 16px);
  transform: translateX(-50%);
  z-index: 2000;
  background: rgba(38, 42, 51, 0.97);
  border: 1px solid var(--borda);
  color: var(--texto);
  padding: 11px 18px;
  border-radius: 22px;
  font-size: 14px;
  max-width: 88vw;
  text-align: center;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  animation: sobe 0.2s ease-out;
}
.toast.ok { border-color: var(--ok); }
.toast.erro { border-color: var(--erro); }

/* ---------- telas largas: painel à esquerda, mapa à direita ---------- */

@media (min-width: 900px) {
  /* !important porque o JS escreve --altura-folha inline no body para o
     arraste do celular, e aqui a folha não é arrastável. */
  body { --altura-folha: 0px !important; }

  .conteudo {
    top: 0;
    right: auto;
    width: 420px;
    height: 100dvh;
    border-radius: 0;
    border-top: none;
    border-right: 1px solid var(--borda);
    box-shadow: 6px 0 24px rgba(0, 0, 0, 0.4);
    padding-top: calc(var(--seguro-topo) + 58px);
    transition: none;
  }
  /* Sem folha arrastável aqui: a altura é fixa. */
  .alca { display: none; }

  .topo { left: 0; width: 420px; right: auto; border-right: 1px solid var(--borda); }
  .mapa-wrap { left: 420px; }

  .abas { order: -1; }
  .legenda-caixa, .botao-flutuante { bottom: 20px; }
  .legenda-caixa { left: 20px; }
  .leaflet-bottom { bottom: 8px; }
  .leaflet-top { top: 8px; }

  .folha {
    left: auto;
    right: 20px;
    bottom: 20px;
    width: 380px;
    border-radius: 14px;
    max-height: 70dvh;
  }
  /* Aqui a folha fica ao lado do mapa, não em cima: o botão não faz sentido. */
  #f-ver-mapa { display: none; }
  .toast { left: calc(420px + (100vw - 420px) / 2); bottom: 24px; }
}

/* ---------- paisagem em celular: pouca altura ---------- */

/* Em paisagem sobra pouca altura. As frações são ajustadas no JS
   (FRACAO_SNAP_PAISAGEM); aqui só o que é puramente visual. */
@media (max-height: 500px) and (orientation: landscape) {
  .topo { padding-top: calc(var(--seguro-topo) + 4px); padding-bottom: 4px; }
  .aba-icone { display: none; }
  .aba { padding: 4px 2px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}