/* =========================================================
   Tela do mapa — PC: painel à esquerda · Celular: painel que sobe de baixo
   ========================================================= */
html, body.app-mapa { height: 100%; }
body.app-mapa { overflow: hidden; background: var(--verde-950); }

.app-topo { height: 60px; display: flex; align-items: center; gap: 18px; padding: 0 16px; background: var(--verde-950); color: #fff; border-bottom: 1px solid var(--linha-escura); position: relative; z-index: 30; }
.app-topo .menu { margin-left: 18px; }
.app-topo .menu a { font-size: .9rem; }
.app-topo-dir { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.app-topo .botao { min-height: 38px; padding: 0 14px; font-size: .86rem; }
.selo-acesso { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--linha-escura); color: rgba(255, 255, 255, .85); text-decoration: none; }
.selo-acesso i { width: 8px; height: 8px; border-radius: 50%; background: #9aa39e; }
.selo-acesso.ativo i { background: #4fd18b; box-shadow: 0 0 0 3px rgba(79, 209, 139, .2); }
@media (max-width: 980px) { .app-topo .menu { display: none; } }
@media (max-width: 560px) { .app-topo .marca-texto { display: none; } .app-topo .selo-acesso:not(.ativo) { display: none; } .app-topo .selo-acesso span { display: none; } }

.app { position: absolute; top: 60px; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 372px 1fr; }
.palco { position: relative; min-width: 0; }
#mapa { position: absolute; inset: 0; background: #e8ede9; }

/* ---------- Painel de camadas ---------- */
.painel { background: var(--verde-900); color: #fff; overflow-y: auto; overscroll-behavior: contain; border-right: 1px solid var(--linha-escura); display: flex; flex-direction: column; }
.painel-cabeca { padding: 20px 20px 12px; position: sticky; top: 0; background: var(--verde-900); z-index: 2; }
.painel-cabeca .selo { margin-bottom: 4px; }
.painel-cabeca h1 { font-size: 1.7rem; letter-spacing: -0.02em; }
.painel-alca, .painel-fechar { display: none; }
.painel-corpo { padding: 0 16px 24px; display: grid; gap: 12px; }

.cartao-acesso { border-radius: 14px; padding: 14px 16px; background: var(--verde-800); border: 1px solid var(--linha-escura); font-size: .88rem; color: rgba(255, 255, 255, .8); display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.cartao-acesso b { color: #fff; display: block; font-size: .95rem; }
.cartao-acesso .botao { min-height: 36px; padding: 0 12px; font-size: .82rem; }

.ferramentas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ferramenta { min-height: 42px; border-radius: 10px; border: 1px solid var(--linha-escura); background: var(--verde-850); color: #fff; font-weight: 600; font-size: .86rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ferramenta:hover { background: var(--verde-800); }
.transparencia { grid-column: 1 / -1; display: grid; gap: 4px; font-size: .8rem; color: rgba(255, 255, 255, .7); padding: 4px 2px; }
.transparencia div { display: flex; justify-content: space-between; }
.transparencia input { width: 100%; accent-color: var(--ouro-500); }

.grupo { border: 1px solid var(--linha-escura); border-radius: 14px; background: var(--verde-850); overflow: hidden; }
.grupo > summary { list-style: none; cursor: pointer; padding: 14px 16px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.grupo > summary::-webkit-details-marker { display: none; }
.grupo-icone { width: 38px; height: 38px; border-radius: 10px; background: rgba(227, 182, 70, .12); color: var(--ouro-400); display: grid; place-items: center; }
.grupo-titulo b { display: block; font-size: .98rem; }
.grupo-titulo small { color: rgba(255, 255, 255, .6); font-size: .8rem; line-height: 1.35; display: block; }
.grupo-contador { font-size: .72rem; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .7); white-space: nowrap; }
.grupo-contador.ativo { background: var(--ouro-500); color: var(--verde-950); }
.grupo[open] > summary { border-bottom: 1px solid var(--linha-escura); }
.grupo-itens { padding: 6px 8px 10px; }

.camada { padding: 10px 8px; border-radius: 10px; }
.camada + .camada { border-top: 1px solid rgba(255, 255, 255, .06); }
.camada-linha { display: grid; grid-template-columns: 14px 1fr auto; gap: 12px; align-items: center; }
.camada-cor { width: 14px; height: 14px; border-radius: 4px; }
.camada-cor.ponto { border-radius: 50%; border: 2px solid #fff; }
.camada-cor.linha { height: 4px; border-radius: 2px; }
.camada-nome { font-weight: 600; font-size: .93rem; line-height: 1.3; }
.camada-nome .etiqueta { margin-left: 6px; vertical-align: 1px; }
.camada-fonte { font-size: .78rem; color: rgba(255, 255, 255, .55); margin-top: 2px; line-height: 1.35; }
.camada-dica { font-size: .78rem; color: var(--ouro-300); margin-top: 4px; }
.camada.desligada .camada-nome, .camada.desligada .camada-cor { opacity: .55; }

.chave { position: relative; width: 46px; height: 28px; flex-shrink: 0; }
.chave input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.chave span { position: absolute; inset: 0; border-radius: 999px; background: rgba(255, 255, 255, .18); transition: background .15s; }
.chave span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.chave input:checked + span { background: var(--ouro-500); }
.chave input:checked + span::after { transform: translateX(18px); }
.chave input:focus-visible + span { outline: 3px solid var(--ouro-300); outline-offset: 2px; }
.chave input:disabled { cursor: not-allowed; }
.chave.travada span { background: rgba(255, 255, 255, .1); }
.chave.travada span::after { background: rgba(255, 255, 255, .5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e2319' stroke-width='2.6' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/12px no-repeat; }

.entenda { margin: 8px 0 0 26px; font-size: .82rem; }
.entenda summary { cursor: pointer; color: var(--ouro-400); font-weight: 700; list-style: none; }
.entenda summary::-webkit-details-marker { display: none; }
.entenda summary::before { content: "▸ "; }
.entenda[open] summary::before { content: "▾ "; }
.entenda p { margin: 6px 0 0; color: rgba(255, 255, 255, .72); line-height: 1.5; }

.filtros-extra { margin: 10px 0 0 26px; display: flex; flex-wrap: wrap; gap: 6px; }
.filtros-extra button { border: 1px solid var(--linha-escura); background: transparent; color: rgba(255, 255, 255, .85); border-radius: 999px; padding: 6px 11px; font-size: .78rem; font-weight: 600; cursor: pointer; }
.filtros-extra button[aria-pressed="true"] { background: var(--ouro-500); color: var(--verde-950); border-color: var(--ouro-500); }

.painel-rodape { font-size: .76rem; color: rgba(255, 255, 255, .5); padding: 4px 6px; line-height: 1.5; }
.painel-rodape a { color: var(--ouro-400); }

/* ---------- Sobre o mapa ---------- */
.busca { position: absolute; top: 14px; left: 14px; z-index: 5; display: flex; gap: 8px; width: min(560px, calc(100% - 28px - 52px)); }
.busca form { flex: 1; display: flex; background: var(--verde-900); border-radius: 14px; box-shadow: var(--sombra-forte); border: 1px solid var(--linha-escura); overflow: hidden; }
.busca input { flex: 1; min-width: 0; border: 0; background: transparent; color: #fff; padding: 0 12px 0 42px; min-height: 48px; font-size: .95rem; }
.busca input::placeholder { color: rgba(255, 255, 255, .5); }
.busca input:focus { outline: none; }
.busca .lupa { position: absolute; left: 14px; top: 14px; color: rgba(255, 255, 255, .55); pointer-events: none; }
.busca form button { border: 0; background: var(--ouro-500); color: var(--verde-950); font-weight: 700; padding: 0 16px; cursor: pointer; }
.botao-mapa { width: 48px; height: 48px; border-radius: 14px; border: 1px solid var(--linha-escura); background: var(--verde-900); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: var(--sombra-forte); flex-shrink: 0; }
.botao-mapa:hover { background: var(--verde-800); }
.botao-mapa .rotulo-texto { display: none; }
.resultados { position: absolute; top: 56px; left: 0; right: 56px; background: #fff; color: var(--tinta); border-radius: 12px; box-shadow: var(--sombra-forte); overflow: hidden; }
.resultados button { display: block; width: 100%; text-align: left; border: 0; background: #fff; padding: 12px 16px; cursor: pointer; font-size: .92rem; border-bottom: 1px solid var(--linha); }
.resultados button:hover, .resultados button:focus { background: var(--creme); }
.resultados small { color: var(--tinta-3); display: block; }

.legenda { position: absolute; left: 14px; bottom: 44px; z-index: 4; width: min(310px, calc(100% - 28px)); background: rgba(255, 255, 255, .96); border-radius: 14px; box-shadow: var(--sombra); font-size: .8rem; }
.legenda summary { list-style: none; cursor: pointer; padding: 10px 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.legenda summary::-webkit-details-marker { display: none; }
.legenda summary::after { content: "▾"; margin-left: auto; color: var(--tinta-3); }
.legenda:not([open]) summary::after { content: "▴"; }
.legenda-lista { padding: 0 14px 12px; display: grid; gap: 7px; max-height: 40vh; overflow-y: auto; }
.legenda-item { display: grid; grid-template-columns: 14px 1fr; gap: 8px; align-items: center; }
.legenda-item i { width: 14px; height: 14px; border-radius: 4px; }
.legenda-item i.ponto { border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.legenda-item small { color: var(--tinta-3); }
.legenda-idade { align-items: start; }
.legenda-idade i { margin-top: 3px; }
.legenda-idade b { font-weight: 700; }
.legenda-idade em { display: block; font-style: normal; color: var(--tinta-2); font-size: .74rem; line-height: 1.35; margin-top: 1px; }
.legenda-titulo { font-weight: 700; color: var(--tinta-2); margin-top: 4px; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }

.barra-status { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; gap: 16px; align-items: center; padding: 6px 14px; background: rgba(10, 27, 19, .88); color: rgba(255, 255, 255, .8); font-size: .74rem; font-weight: 600; letter-spacing: .03em; }
.barra-status span:first-child::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #4fd18b; margin-right: 7px; }
.barra-status .fontes-barra { margin-left: auto; }

.carregando-mapa { position: absolute; top: 76px; left: 50%; transform: translateX(-50%); z-index: 6; background: var(--verde-900); color: #fff; font-size: .82rem; font-weight: 600; padding: 8px 14px; border-radius: 999px; box-shadow: var(--sombra-forte); display: flex; gap: 8px; align-items: center; }

/* ---------- Ficha (clique no mapa) ---------- */
.ficha { position: absolute; top: 76px; right: 14px; z-index: 8; width: min(380px, calc(100% - 28px)); max-height: calc(100% - 130px); overflow-y: auto; background: var(--papel); color: var(--tinta); border-radius: 18px; box-shadow: var(--sombra-forte); border-top: 4px solid var(--ouro-500); padding: 20px 20px 18px; }
.ficha-fechar { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--linha); background: #fff; cursor: pointer; display: grid; place-items: center; }
.ficha .selo { margin-bottom: 6px; font-size: .7rem; }
.ficha h2 { font-size: 1.35rem; letter-spacing: -0.02em; padding-right: 40px; margin-bottom: 12px; line-height: 1.2; }
.ficha h3 { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); margin: 16px 0 6px; font-weight: 700; }
.ficha p { font-size: .9rem; color: var(--tinta-2); margin: 0 0 6px; }
.ficha-dados { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: .86rem; margin: 0; }
.ficha-dados dt { color: var(--tinta-3); }
.ficha-dados dd { margin: 0; font-weight: 600; word-break: break-word; }
.ficha-coord { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border: 1px solid var(--linha); border-radius: 12px; padding: 10px 12px; margin-top: 8px; }
.ficha-coord code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86rem; font-weight: 600; }
.ficha-coord small { display: block; color: var(--tinta-3); font-size: .74rem; }
.ficha-coord button { border: 0; background: none; color: var(--ouro-700); font-weight: 800; cursor: pointer; font-size: .82rem; }
.ficha-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.ficha-acoes a, .ficha-acoes button { min-height: 42px; border-radius: 10px; border: 1px solid var(--linha); background: #fff; font-weight: 700; font-size: .82rem; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; cursor: pointer; color: var(--tinta); }
.ficha-acoes .largo { grid-column: 1 / -1; }
.ficha-acoes .principal { background: #f7ecd0; border-color: #ead9ad; color: #5c410a; }
.ficha-acoes .oficial { background: var(--verde-900); color: #fff; border-color: var(--verde-900); }
.ficha-aviso { font-size: .76rem !important; color: var(--tinta-3) !important; background: var(--creme); border-radius: 10px; padding: 10px 12px; margin-top: 12px !important; }

/* ---------- Botões flutuantes do celular ---------- */
.botao-camadas { display: none; }

/* ---------- Celular ---------- */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .painel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: min(78dvh, 720px);
    border-radius: 22px 22px 0 0; border-right: 0; border-top: 1px solid var(--linha-escura);
    transform: translateY(105%); transition: transform .25s ease; box-shadow: 0 -12px 40px rgba(0, 0, 0, .35);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .painel.aberto { transform: none; }
  .painel-cabeca { padding: 10px 18px 12px; border-bottom: 1px solid var(--linha-escura); display: flex; align-items: center; justify-content: space-between; }
  .painel-cabeca h1 { font-size: 1.25rem; }
  .painel-cabeca .selo { display: none; }
  .painel-alca { display: block; position: absolute; top: 7px; left: 50%; width: 42px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .3); transform: translateX(-50%); }
  .painel-fechar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--linha-escura); background: transparent; color: #fff; cursor: pointer; }
  .painel-corpo { padding-top: 12px; }
  .fundo-painel { position: fixed; inset: 0; z-index: 19; background: rgba(5, 14, 10, .35); }

  .busca { top: 10px; left: 10px; width: calc(100% - 20px); }
  .busca input { min-height: 46px; font-size: 16px; }
  .busca form button { padding: 0 12px; }
  .resultados { right: 0; }

  .botao-camadas {
    display: inline-flex; position: absolute; z-index: 6; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom));
    align-items: center; gap: 8px; min-height: 50px; padding: 0 20px; border-radius: 999px; border: 0; cursor: pointer;
    background: var(--ouro-500); color: var(--verde-950); font-weight: 800; font-size: .95rem; box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
  }
  .botao-camadas b { background: var(--verde-950); color: #fff; border-radius: 999px; font-size: .75rem; padding: 2px 8px; }
  .legenda { bottom: calc(80px + env(safe-area-inset-bottom)); left: 10px; width: min(250px, calc(100% - 80px)); }
  .legenda-lista { max-height: 28vh; }
  .barra-status { display: none; }
  .maplibregl-ctrl-bottom-right { bottom: calc(76px + env(safe-area-inset-bottom)); }

  .ficha {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 72dvh; z-index: 25;
    border-radius: 22px 22px 0 0; border-top-width: 4px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); animation: subir .2s ease;
  }
}
@media (min-width: 861px) { .fundo-painel { display: none; } }

/* Controles do MapLibre no tema do site */
.maplibregl-ctrl-group { border-radius: 12px !important; overflow: hidden; box-shadow: var(--sombra) !important; }
.maplibregl-ctrl-group button { width: 40px !important; height: 40px !important; }
.marcador-ponto { width: 22px; height: 22px; border-radius: 50%; background: var(--ouro-500); border: 3px solid var(--verde-950); box-shadow: 0 0 0 4px rgba(227, 182, 70, .35); }