/* V77 — controles mais compactos + navegação inferior geometricamente fixa.
   Estado ativo muda só cor/fundo, nunca tamanho/posição. Legendas do mapa intocadas. */

.bottom-nav{
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  align-items:stretch !important;
}
.bottom-nav > button,
.bottom-nav > button.active{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  box-sizing:border-box !important;
  margin:0 !important;
  transform:none !important;
  scale:1 !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  align-content:center !important;
  justify-items:center !important;
  border-radius:0 !important;
}
.bottom-nav > button .nav-icon,
.bottom-nav > button.active .nav-icon{
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  scale:1 !important;
}
.bottom-nav > button b,
.bottom-nav > button.active b{
  display:block !important;
  width:100% !important;
  height:14px !important;
  min-height:14px !important;
  margin:0 !important;
  padding:0 !important;
  line-height:14px !important;
  text-align:center !important;
  white-space:nowrap !important;
  transform:none !important;
}

/* Navegador/mobile */
@media (max-width:720px){
  .app{
    grid-template-rows:132px minmax(0,1fr) calc(62px + env(safe-area-inset-bottom)) !important;
  }
  .topbar.halloween-topbar{
    height:132px !important;
    min-height:132px !important;
    grid-template-rows:72px 46px !important;
    padding:max(6px,env(safe-area-inset-top)) 7px 5px !important;
    gap:4px 7px !important;
  }
  .halloween-wordmark{
    height:72px !important;
  }
  .halloween-wordmark-img,
  .topbar .halloween-wordmark-img{
    width:min(238px,72vw) !important;
    height:68px !important;
  }

  .top-actions{
    height:72px !important;
    gap:6px !important;
  }
  .install-action,
  .refresh-action{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    border-radius:11px !important;
  }
  .refresh-action svg{
    width:20px !important;
    height:20px !important;
  }

  .headline-zone{
    height:46px !important;
  }
  .map-header-metrics{
    height:40px !important;
    min-height:40px !important;
    border-radius:10px !important;
  }
  .map-header-metrics > div{
    padding:3px 2px !important;
    gap:3px !important;
  }
  .map-header-metrics .metric-icon{
    width:20px !important;
    height:20px !important;
    font-size:.76rem !important;
    border-radius:6px !important;
  }
  .map-header-metrics .metric-check{
    width:20px !important;
    height:20px !important;
    font-size:.68rem !important;
  }
  .map-header-metrics b{
    font-size:.80rem !important;
  }

  .map-toolbar{
    height:50px !important;
    padding:5px 6px !important;
    gap:6px !important;
  }
  #screen-map #map{
    top:50px !important;
  }
  .map-filter-bar{
    gap:5px !important;
  }
  .map-filter-bar button{
    min-height:32px !important;
    height:32px !important;
    padding:0 9px !important;
    font-size:.69rem !important;
  }
  .map-style-switch button{
    min-height:31px !important;
    height:31px !important;
    padding:0 8px !important;
    font-size:.66rem !important;
  }

  .bottom-nav,
  .app:not(.map-screen-active) .bottom-nav{
    height:calc(62px + env(safe-area-inset-bottom)) !important;
    min-height:calc(62px + env(safe-area-inset-bottom)) !important;
    padding:0 0 env(safe-area-inset-bottom) !important;
  }
  .bottom-nav > button,
  .bottom-nav > button.active,
  .app:not(.map-screen-active) .bottom-nav > button,
  .app:not(.map-screen-active) .bottom-nav > button.active{
    height:62px !important;
    min-height:62px !important;
    max-height:62px !important;
    padding:5px 2px 4px !important;
    gap:2px !important;
    grid-template-rows:26px 14px !important;
  }
  .bottom-nav .nav-icon,
  .bottom-nav > button.active .nav-icon,
  .app:not(.map-screen-active) .nav-icon{
    width:26px !important;
    height:26px !important;
  }
  .bottom-nav .nav-icon svg,
  .bottom-nav > button.active .nav-icon svg,
  .app:not(.map-screen-active) .nav-icon svg{
    width:25px !important;
    height:25px !important;
  }
  .bottom-nav > button b,
  .bottom-nav > button.active b,
  .app:not(.map-screen-active) .bottom-nav > button b{
    font-size:.64rem !important;
    font-weight:750 !important;
  }

  .app:not(.map-screen-active){
    grid-template-rows:68px minmax(0,1fr) calc(62px + env(safe-area-inset-bottom)) !important;
  }
  .app:not(.map-screen-active) .topbar.halloween-topbar{
    height:68px !important;
    min-height:68px !important;
  }
}

/* PWA instalado */
@media (display-mode:standalone) and (max-width:720px){
  .app{
    grid-template-rows:148px minmax(0,1fr) calc(72px + env(safe-area-inset-bottom)) !important;
  }
  .topbar.halloween-topbar{
    height:148px !important;
    min-height:148px !important;
    grid-template-rows:74px 58px !important;
    padding:max(7px,env(safe-area-inset-top)) 8px 5px !important;
    gap:5px 8px !important;
  }
  .halloween-wordmark{
    height:74px !important;
  }
  .halloween-wordmark-img,
  .topbar .halloween-wordmark-img{
    width:min(258px,72vw) !important;
    height:70px !important;
  }

  .top-actions{
    height:74px !important;
  }
  .install-action,
  .refresh-action{
    width:50px !important;
    height:50px !important;
    min-width:50px !important;
    min-height:50px !important;
    border-radius:14px !important;
  }
  .refresh-action svg{
    width:22px !important;
    height:22px !important;
  }

  .headline-zone{
    height:58px !important;
  }
  .map-header-metrics{
    height:38px !important;
    min-height:38px !important;
    border-radius:10px !important;
  }
  .map-header-metrics > div{
    padding:3px !important;
    gap:4px !important;
  }
  .map-header-metrics .metric-icon{
    width:22px !important;
    height:22px !important;
    font-size:.80rem !important;
  }
  .map-header-metrics .metric-check{
    width:22px !important;
    height:22px !important;
    font-size:.72rem !important;
  }
  .map-header-metrics b{
    font-size:.84rem !important;
  }
  .map-header-metrics small{
    font-size:.46rem !important;
  }

  .map-toolbar{
    height:78px !important;
    grid-template-rows:38px 32px !important;
    padding:5px 7px !important;
    gap:3px !important;
  }
  #screen-map #map{
    top:78px !important;
  }
  .map-filter-bar button{
    min-height:36px !important;
    height:36px !important;
    padding:0 11px !important;
    font-size:.72rem !important;
  }
  .map-style-switch button{
    min-height:31px !important;
    height:31px !important;
    padding:0 9px !important;
    font-size:.68rem !important;
  }

  .bottom-nav,
  .app:not(.map-screen-active) .bottom-nav{
    height:calc(72px + env(safe-area-inset-bottom)) !important;
    min-height:calc(72px + env(safe-area-inset-bottom)) !important;
  }
  .bottom-nav > button,
  .bottom-nav > button.active,
  .app:not(.map-screen-active) .bottom-nav > button,
  .app:not(.map-screen-active) .bottom-nav > button.active{
    height:72px !important;
    min-height:72px !important;
    max-height:72px !important;
    padding:6px 3px 4px !important;
    gap:3px !important;
    grid-template-rows:29px 14px !important;
  }
  .bottom-nav .nav-icon,
  .bottom-nav > button.active .nav-icon,
  .app:not(.map-screen-active) .nav-icon{
    width:29px !important;
    height:29px !important;
  }
  .bottom-nav .nav-icon svg,
  .bottom-nav > button.active .nav-icon svg,
  .app:not(.map-screen-active) .nav-icon svg{
    width:28px !important;
    height:28px !important;
  }
  .bottom-nav > button b,
  .bottom-nav > button.active b,
  .app:not(.map-screen-active) .bottom-nav > button b{
    font-size:.68rem !important;
  }

  .app:not(.map-screen-active){
    grid-template-rows:76px minmax(0,1fr) calc(72px + env(safe-area-inset-bottom)) !important;
  }
  .app:not(.map-screen-active) .topbar.halloween-topbar{
    height:76px !important;
    min-height:76px !important;
  }
}

@media (display-mode:standalone) and (max-width:390px){
  .bottom-nav,
  .app:not(.map-screen-active) .bottom-nav{
    height:calc(68px + env(safe-area-inset-bottom)) !important;
    min-height:calc(68px + env(safe-area-inset-bottom)) !important;
  }
  .bottom-nav > button,
  .bottom-nav > button.active,
  .app:not(.map-screen-active) .bottom-nav > button,
  .app:not(.map-screen-active) .bottom-nav > button.active{
    height:68px !important;
    min-height:68px !important;
    max-height:68px !important;
    grid-template-rows:27px 14px !important;
  }
  .bottom-nav .nav-icon,
  .bottom-nav > button.active .nav-icon,
  .app:not(.map-screen-active) .nav-icon{
    width:27px !important;
    height:27px !important;
  }
  .bottom-nav .nav-icon svg,
  .bottom-nav > button.active .nav-icon svg,
  .app:not(.map-screen-active) .nav-icon svg{
    width:26px !important;
    height:26px !important;
  }
  .app:not(.map-screen-active){
    grid-template-rows:74px minmax(0,1fr) calc(68px + env(safe-area-inset-bottom)) !important;
  }
}


/* V79 — controles superiores do mapa mais compactos.
   Prioridade: liberar área útil do mapa e reduzir rolagem horizontal.
   Não altera as legendas inferiores. */
@media (max-width:720px){
  #screen-map .map-toolbar{
    height:40px !important;
    min-height:40px !important;
    display:flex !important;
    grid-template-columns:none !important;
    grid-template-rows:none !important;
    align-items:center !important;
    padding:4px 5px !important;
    gap:4px !important;
  }
  #screen-map #map{
    top:40px !important;
  }

  #screen-map .map-filter-bar{
    flex:1 1 auto !important;
    min-width:0 !important;
    gap:2px !important;
    padding:2px !important;
    border-radius:10px !important;
  }
  #screen-map .map-filter-bar button{
    min-height:28px !important;
    height:28px !important;
    padding:0 6px !important;
    border-radius:8px !important;
    font-size:.60rem !important;
    line-height:1 !important;
  }

  #screen-map .map-style-switch{
    flex:0 0 auto !important;
    width:auto !important;
    max-width:42vw !important;
    gap:2px !important;
    padding:2px !important;
    border-radius:10px !important;
    margin-left:0 !important;
  }
  #screen-map .map-style-switch button{
    min-height:28px !important;
    height:28px !important;
    padding:0 7px !important;
    border-radius:8px !important;
    font-size:.60rem !important;
    line-height:1 !important;
  }

  #screen-map .map-wallet-hud{
    top:46px !important;
    left:6px !important;
    right:6px !important;
    gap:5px !important;
  }
  #screen-map .wallet-chip{
    min-height:32px !important;
    height:32px !important;
    gap:4px !important;
    padding:3px 6px 3px 4px !important;
    border-radius:9px !important;
  }
  #screen-map .wallet-chip img{
    width:22px !important;
    height:22px !important;
  }
  #screen-map .wallet-chip b{
    font-size:.72rem !important;
  }
  #screen-map .wallet-chip small{
    font-size:.40rem !important;
    margin-top:1px !important;
  }
}

@media (display-mode:standalone) and (max-width:720px){
  #screen-map .map-toolbar{
    height:42px !important;
    min-height:42px !important;
    display:flex !important;
    grid-template-columns:none !important;
    grid-template-rows:none !important;
    padding:4px 5px !important;
    gap:4px !important;
  }
  #screen-map #map{
    top:42px !important;
  }
  #screen-map .map-filter-bar{
    gap:2px !important;
    padding:2px !important;
  }
  #screen-map .map-filter-bar button{
    min-height:30px !important;
    height:30px !important;
    padding:0 7px !important;
    font-size:.62rem !important;
    border-radius:9px !important;
  }
  #screen-map .map-style-switch{
    max-width:41vw !important;
    padding:2px !important;
  }
  #screen-map .map-style-switch button{
    min-height:30px !important;
    height:30px !important;
    padding:0 8px !important;
    font-size:.62rem !important;
    border-radius:9px !important;
  }

  #screen-map .map-wallet-hud{
    top:48px !important;
    left:6px !important;
    right:6px !important;
    gap:5px !important;
  }
  #screen-map .wallet-chip{
    min-height:34px !important;
    height:34px !important;
    gap:4px !important;
    padding:3px 7px 3px 4px !important;
    border-radius:9px !important;
  }
  #screen-map .wallet-chip img{
    width:23px !important;
    height:23px !important;
  }
  #screen-map .wallet-chip b{
    font-size:.74rem !important;
  }
  #screen-map .wallet-chip small{
    font-size:.41rem !important;
    margin-top:1px !important;
  }
}

@media (display-mode:standalone) and (max-width:390px){
  #screen-map .map-filter-bar button{
    padding:0 5px !important;
    font-size:.58rem !important;
  }
  #screen-map .map-style-switch{
    max-width:43vw !important;
  }
  #screen-map .map-style-switch button{
    padding:0 6px !important;
    font-size:.58rem !important;
  }
  #screen-map .wallet-chip{
    padding-right:5px !important;
  }
}