/* GUI - Fase 12.6B - base comum as duas versoes.
   Layout de tela cheia: cabecalho curto, mapa ocupando todo o resto.
   Nenhuma regra aqui pinta, contorna ou rotula area clicavel. */
:root{
  --tinta:#1d2129; --tinta-fraca:#5b6472; --tinta-clara:#8b93a1;
  --papel:#FBF7EE; --papel-2:#ffffff; --linha:#e9e2d4; --acento:#7B4FB0;
  --raio:18px;
  --topo-h:56px;
  --seguro-b:env(safe-area-inset-bottom, 0px);
  --seguro-t:env(safe-area-inset-top, 0px);
  --sombra:0 -8px 30px rgba(30,25,45,.16);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
/* O corpo mede em `rem` para que a preferencia de tamanho de texto, que vive no
   `font-size` da raiz, alcance o App inteiro. Com `16px` fixo aqui, a escolha do
   viajante nao chegava a nada que herdasse do body. */
html{font-size:16px}
body{
  background:var(--papel);color:var(--tinta);
  font:1rem/1.45 'Avenir Next','Segoe UI',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  overflow:hidden;                  /* a pagina nao rola: quem rola e o painel */
  overscroll-behavior:none;
}
.app{
  display:flex;flex-direction:column;
  height:100vh;height:100dvh;
  padding-top:var(--seguro-t);
}

/* ---- cabecalho: curto de proposito, para o mapa ficar com o resto ---- */
.topo{
  flex:0 0 auto;padding:8px 16px 6px;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.topo h1{margin:0;font-size:1.12rem;line-height:1.2;letter-spacing:-.01em}
.topo p{margin:0;color:var(--tinta-fraca);font-size:.8rem;line-height:1.25}

/* ---- palco do mapa: pega toda a altura que sobrar ---- */
/* O mapa e retrato 3:4 numa tela estreita e alta: ele e limitado pela LARGURA.
   Entao vale a largura inteira, sem margem lateral, colado no cabecalho. O espaco
   que sobra fica todo embaixo, num bloco so - e e la que o painel mora. */
.palco{
  flex:1 1 auto;min-height:0;position:relative;
  display:flex;align-items:flex-start;justify-content:center;
  padding:0;
}
.mapa{position:relative;max-width:100%;max-height:100%;line-height:0}
.mapa img{
  display:block;width:auto;height:auto;
  max-width:100%;max-height:100%;
  border-radius:0;
}
.mapa svg{position:absolute;inset:0;width:100%;height:100%}
/* a area e clicavel e invisivel: sem preenchimento, sem contorno, sem tooltip */
.mapa svg polygon{fill:transparent;stroke:none;cursor:pointer}
.mapa svg polygon:focus{outline:none}

.rodape-mapa{
  flex:0 0 auto;text-align:center;color:var(--tinta-clara);
  font-size:.7rem;padding:2px 16px 6px;
}

/* ---- convite discreto, so enquanto nada esta aberto ---- */
.convite{
  position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  background:rgba(255,255,255,.92);border:1px solid var(--linha);
  border-radius:999px;padding:7px 16px;font-size:.82rem;color:var(--tinta-fraca);
  box-shadow:0 3px 14px rgba(40,30,60,.10);pointer-events:none;
  transition:opacity .2s ease;white-space:nowrap;
}
.convite strong{color:var(--tinta);font-weight:600}
body.aberto .convite{opacity:0}

/* ---- conteudo do painel: igual nas duas versoes ---- */
.cab-reg{display:flex;align-items:center;gap:11px;margin:0 0 2px}
.pin{
  flex:0 0 auto;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:.95rem;
}
.cab-reg h2{margin:0;font-size:1.12rem;line-height:1.2}
.qtd{margin:0 0 .35em;font-size:.82rem;color:var(--tinta-clara)}
.desc{margin:0 0 .9em;font-size:.9rem;color:var(--tinta-fraca)}

.lista{list-style:none;padding:0;margin:0}
.lista li+li{border-top:1px solid var(--linha)}
.item{
  display:flex;width:100%;text-align:left;gap:10px;align-items:center;
  background:none;border:0;padding:12px 2px;font:inherit;cursor:pointer;
  color:var(--tinta);min-height:46px;
}
.item:active{background:#f7f3fb}
.item .nome{flex:1}
.item .seta{color:var(--tinta-clara);font-size:1.05rem}

.detalhe h3{margin:.1em 0 .8em;font-size:1.06rem}
.voltar{
  background:none;border:0;color:var(--acento);font:inherit;font-size:.9rem;
  cursor:pointer;padding:8px 0;min-height:40px;
}
.btn-ir{
  display:inline-flex;align-items:center;gap:8px;background:var(--acento);color:#fff;
  text-decoration:none;border-radius:12px;padding:14px 24px;font-weight:600;font-size:1rem;
  min-height:48px;
}
.btn-ir:active{filter:brightness(.94)}
.explica-ir{color:var(--tinta-fraca);font-size:.85rem;margin:.85em 0 0}

.fechar{
  background:none;border:0;color:var(--tinta-clara);font:inherit;font-size:.86rem;
  cursor:pointer;padding:8px;min-height:40px;min-width:40px;line-height:1;
}
.fechar:active{color:var(--tinta)}

.scrim{
  position:fixed;inset:0;background:rgba(28,24,40,.34);
  opacity:0;pointer-events:none;transition:opacity .22s ease;z-index:5;
}
.scrim.on{opacity:1;pointer-events:auto}

@media (min-width:900px){
  .topo{padding:14px 24px 8px}
  .topo h1{font-size:1.4rem}
  .topo p{font-size:.88rem}
  .palco{align-items:center;padding:0 16px 8px}
  .mapa img{border-radius:14px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}