/* v271r1 — mapa desktop/web com mais área útil.
   Aplica apenas em telas largas com apontador preciso; mobile/PWA estreito permanece intacto. */
@media (min-width:1100px) and (pointer:fine){
  /* Cabeçalho do mapa mais baixo no desktop. */
  .app.map-screen-active > .topbar.halloween-topbar{
    grid-template-columns:minmax(180px,270px) minmax(360px,1fr) auto!important;
    gap:8px!important;
    padding:3px 8px 3px 0!important;
  }
  .app.map-screen-active > .topbar.halloween-topbar .halloween-wordmark{
    height:64px!important;
    min-height:64px!important;
  }
  .app.map-screen-active > .topbar.halloween-topbar .halloween-wordmark-img{
    width:min(100%,250px)!important;
    height:60px!important;
    max-height:60px!important;
  }
  .app.map-screen-active > .topbar.halloween-topbar .map-header-metrics{
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
  }
  .app.map-screen-active > .topbar.halloween-topbar .map-header-metrics > div{
    grid-template-columns:24px minmax(0,auto)!important;
    column-gap:5px!important;
    padding:2px 9px!important;
  }
  .app.map-screen-active > .topbar.halloween-topbar .map-header-metrics .metric-icon,
  .app.map-screen-active > .topbar.halloween-topbar .map-header-metrics .metric-check{
    width:24px!important;
    height:24px!important;
    font-size:.88rem!important;
    border-radius:8px!important;
  }
  .app.map-screen-active > .topbar.halloween-topbar .map-header-metrics b{
    font-size:.86rem!important;
  }
  .app.map-screen-active > .topbar.halloween-topbar .map-header-metrics small{
    font-size:.40rem!important;
  }
  .app.map-screen-active > .topbar.halloween-topbar .top-actions{
    gap:5px!important;
  }
  .app.map-screen-active > .topbar.halloween-topbar .refresh-action,
  .app.map-screen-active > .topbar.halloween-topbar .important-alert-btn{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
  }
  .app.map-screen-active > .topbar.halloween-topbar .header-profile{
    min-height:40px!important;
    padding:3px 8px 3px 4px!important;
    gap:6px!important;
  }
  .app.map-screen-active > .topbar.halloween-topbar .header-profile img{
    width:34px!important;
    height:34px!important;
  }
  .app.map-screen-active > .topbar.halloween-topbar .header-profile span{
    font-size:.62rem!important;
    max-width:125px!important;
  }
  .app.map-screen-active > .topbar.halloween-topbar .header-profile b{
    font-size:.72rem!important;
  }

  /* A tela usa apenas toolbar + mapa. A legenda vira overlay e não rouba altura. */
  .app.map-screen-active > #screen-map.active{
    position:relative!important;
    grid-template-rows:40px minmax(0,1fr)!important;
  }
  .app.map-screen-active > #screen-map.active > .map-toolbar{
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
    padding:3px 7px!important;
    gap:6px!important;
  }
  .app.map-screen-active > #screen-map.active > .map-toolbar .map-filter-bar{
    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;
    gap:5px!important;
  }
  .app.map-screen-active > #screen-map.active > .map-toolbar .map-filter-bar button{
    height:30px!important;
    min-height:30px!important;
    padding:0 12px!important;
    font-size:.67rem!important;
  }
  .app.map-screen-active > #screen-map.active > .map-toolbar .map-style-switch{
    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;
  }
  .app.map-screen-active > #screen-map.active > .map-toolbar .map-style-switch button{
    height:28px!important;
    min-height:28px!important;
    padding:0 10px!important;
    font-size:.66rem!important;
  }
  .app.map-screen-active > #screen-map.active > .map-wrap{
    grid-row:2!important;
    padding-bottom:0!important;
  }

  /* HUD horizontal: deixa de cobrir três faixas verticais do mapa. */
  .app.map-screen-active .map-distribution-hud{
    top:7px!important;
    left:8px!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    gap:5px!important;
    width:auto!important;
    max-width:min(760px,calc(100% - 150px))!important;
  }
  .app.map-screen-active .map-distribution-hud .distribution-group{
    min-width:0!important;
    padding:4px 7px!important;
    border-radius:9px!important;
  }
  .app.map-screen-active .map-distribution-hud .event-distribution{
    flex:0 1 220px!important;
    min-width:180px!important;
  }
  .app.map-screen-active .map-distribution-hud .villa-distribution,
  .app.map-screen-active .map-distribution-hud .family-distribution{
    flex:1 1 220px!important;
    min-width:190px!important;
  }
  .app.map-screen-active .map-distribution-hud .distribution-title{
    margin-bottom:3px!important;
    font-size:.40rem!important;
  }
  .app.map-screen-active .map-distribution-hud .distribution-values{
    gap:5px!important;
  }
  .app.map-screen-active .map-distribution-hud .distribution-values > span{
    grid-template-columns:21px auto!important;
    column-gap:3px!important;
  }
  .app.map-screen-active .map-distribution-hud .distribution-values img{
    width:21px!important;
    height:21px!important;
  }
  .app.map-screen-active .map-distribution-hud .distribution-values b{
    font-size:.70rem!important;
  }
  .app.map-screen-active .map-distribution-hud .distribution-values em{
    font-size:.35rem!important;
  }
  .app.map-screen-active .map-distribution-hud .event-distribution-values strong{
    font-size:.61rem!important;
  }
  .app.map-screen-active .map-distribution-hud .event-distribution-values em{
    font-size:.40rem!important;
  }

  /* Legenda mantém toda a informação, mas flutua na base do mapa. */
  .app.map-screen-active > #screen-map.active > .map-legend-strip{
    position:absolute!important;
    z-index:690!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    grid-row:auto!important;
    width:100%!important;
    height:34px!important;
    min-height:34px!important;
    padding:3px 10px!important;
    gap:15px!important;
    justify-content:center!important;
    background:rgba(5,17,28,.88)!important;
    border-top:1px solid rgba(255,255,255,.15)!important;
    border-bottom:0!important;
    backdrop-filter:blur(8px)!important;
  }
  .app.map-screen-active > #screen-map.active > .map-legend-strip > div{
    font-size:.57rem!important;
    gap:5px!important;
  }
  .app.map-screen-active > #screen-map.active > .map-legend-strip img{
    width:21px!important;
    height:21px!important;
  }
  .app.map-screen-active .legend-low,
  .app.map-screen-active .legend-visited,
  .app.map-screen-active .legend-unvisited{
    width:21px!important;
    height:21px!important;
    min-width:21px!important;
  }
  .app.map-screen-active .legend-candy{font-size:1rem!important}
  .app.map-screen-active .legend-sold{font-size:.48rem!important;padding:2px 4px!important}

  /* Ações ficam acima da legenda flutuante. */
  .app.map-screen-active .map-float.bottom{
    bottom:40px!important;
    padding:4px!important;
    gap:5px!important;
  }
  .app.map-screen-active .map-float.bottom .btn{
    padding:7px 10px!important;
    font-size:.66rem!important;
  }

  /* Menu inferior mais baixo no desktop. */
  .app.map-screen-active > .bottom-nav{
    flex:0 0 56px!important;
    height:56px!important;
    min-height:56px!important;
    max-height:56px!important;
  }
  .app.map-screen-active > .bottom-nav > button{
    height:56px!important;
    min-height:56px!important;
    max-height:56px!important;
    padding:3px 4px!important;
    gap:2px!important;
  }
  .app.map-screen-active > .bottom-nav .nav-icon{
    width:26px!important;
    height:26px!important;
  }
  .app.map-screen-active > .bottom-nav .nav-icon svg{
    width:25px!important;
    height:25px!important;
  }
  .app.map-screen-active > .bottom-nav > button b{
    font-size:.64rem!important;
    line-height:1!important;
  }
}

/* Em notebooks baixos, ganha ainda mais mapa sem retirar nenhuma função. */
@media (min-width:1100px) and (pointer:fine) and (max-height:760px){
  .app.map-screen-active > .topbar.halloween-topbar .halloween-wordmark{height:58px!important;min-height:58px!important}
  .app.map-screen-active > .topbar.halloween-topbar .halloween-wordmark-img{height:54px!important;max-height:54px!important}
  .app.map-screen-active > .topbar.halloween-topbar .map-header-metrics{height:40px!important;min-height:40px!important;max-height:40px!important}
  .app.map-screen-active > #screen-map.active{grid-template-rows:38px minmax(0,1fr)!important}
  .app.map-screen-active > #screen-map.active > .map-toolbar{height:38px!important;min-height:38px!important;max-height:38px!important}
  .app.map-screen-active > .bottom-nav{flex-basis:52px!important;height:52px!important;min-height:52px!important;max-height:52px!important}
  .app.map-screen-active > .bottom-nav > button{height:52px!important;min-height:52px!important;max-height:52px!important}
}

/* v272r1 — corrige a reserva da linha inteira, não apenas o tamanho dos filhos.
   Desktop com mouse: mesmo cabeçalho e mesma barra inferior em todas as telas.
   Não se aplica a celular, tablet estreito ou PWA mobile. */
@media (min-width:1100px) and (pointer:fine){
  .app.map-screen-active,
  .app:not(.map-screen-active){
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:68px minmax(0,1fr) 56px!important;
    height:100dvh!important;
    min-height:0!important;
    max-height:100dvh!important;
    padding:0!important;
    overflow:hidden!important;
  }

  /* Elimina explicitamente a antiga linha de 96/112/122px e os
     alinhamentos de duas linhas usados nas telas internas. */
  .app.map-screen-active > .topbar.halloween-topbar,
  .app:not(.map-screen-active) > .topbar.halloween-topbar{
    grid-column:1!important;
    grid-row:1!important;
    display:grid!important;
    grid-template-columns:minmax(180px,270px) minmax(0,1fr) auto!important;
    grid-template-rows:minmax(0,1fr)!important;
    align-items:center!important;
    column-gap:10px!important;
    row-gap:0!important;
    box-sizing:border-box!important;
    width:100%!important;
    height:68px!important;
    min-height:68px!important;
    max-height:68px!important;
    padding:3px 10px 3px 0!important;
    margin:0!important;
    overflow:hidden!important;
    flex:0 0 68px!important;
  }
  .app.map-screen-active > .topbar.halloween-topbar .halloween-wordmark,
  .app:not(.map-screen-active) > .topbar.halloween-topbar .halloween-wordmark{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    height:62px!important;
    min-height:0!important;
    max-height:62px!important;
    padding:0!important;
    margin:0!important;
    align-self:center!important;
    justify-content:center!important;
  }
  .app.map-screen-active > .topbar.halloween-topbar .halloween-wordmark-img,
  .app:not(.map-screen-active) > .topbar.halloween-topbar .halloween-wordmark-img{
    width:min(100%,250px)!important;
    height:58px!important;
    max-height:58px!important;
    padding:0!important;
    object-fit:contain!important;
    object-position:center center!important;
  }
  .app.map-screen-active > .topbar.halloween-topbar .headline-zone,
  .app:not(.map-screen-active) > .topbar.halloween-topbar .headline-zone{
    grid-column:2!important;
    grid-row:1!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
    min-width:0!important;
    width:100%!important;
    height:62px!important;
    min-height:0!important;
    max-height:62px!important;
    padding:0 6px!important;
    margin:0!important;
    overflow:hidden!important;
    align-self:center!important;
  }
  .app.map-screen-active > .topbar.halloween-topbar .top-actions,
  .app:not(.map-screen-active) > .topbar.halloween-topbar .top-actions{
    grid-column:3!important;
    grid-row:1!important;
    display:flex!important;
    align-items:center!important;
    align-self:center!important;
    justify-content:flex-end!important;
    box-sizing:border-box!important;
    height:62px!important;
    min-height:0!important;
    max-height:62px!important;
    gap:6px!important;
    padding:0!important;
    margin:0!important;
  }

  /* Mapa e telas internas compartilham o mesmo rodapé: 56px reais. */
  .app.map-screen-active > .bottom-nav,
  .app:not(.map-screen-active) > .bottom-nav{
    grid-row:3!important;
    grid-column:1!important;
    position:relative!important;
    box-sizing:border-box!important;
    flex:0 0 56px!important;
    width:100%!important;
    height:56px!important;
    min-height:56px!important;
    max-height:56px!important;
    padding:0!important;
    margin:0!important;
    align-self:stretch!important;
  }
  .app.map-screen-active > .bottom-nav > button,
  .app:not(.map-screen-active) > .bottom-nav > button{
    box-sizing:border-box!important;
    height:56px!important;
    min-height:56px!important;
    max-height:56px!important;
    padding:3px 4px!important;
    gap:2px!important;
  }
  .app.map-screen-active > .bottom-nav .nav-icon,
  .app:not(.map-screen-active) > .bottom-nav .nav-icon{
    width:26px!important;
    height:26px!important;
  }
  .app.map-screen-active > .bottom-nav .nav-icon svg,
  .app:not(.map-screen-active) > .bottom-nav .nav-icon svg{
    width:25px!important;
    height:25px!important;
  }
  .app.map-screen-active > .bottom-nav > button b,
  .app:not(.map-screen-active) > .bottom-nav > button b{
    font-size:.64rem!important;
    line-height:1!important;
  }

  /* Telas internas têm conteúdo rolável e título na mesma posição das métricas. */
  .app:not(.map-screen-active) > .screen.active{
    grid-column:1!important;
    grid-row:2!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    min-width:0!important;
    overflow-y:auto!important;
  }
  .app:not(.map-screen-active) > .topbar.halloween-topbar .headline-zone #screenTitle{
    display:block!important;
    width:100%!important;
    font-size:1.15rem!important;
    text-align:left!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .app.map-screen-active > #screen-map.active{
    grid-row:2!important;
    min-height:0!important;
    height:100%!important;
  }
  .app.map-screen-active > .topbar.halloween-topbar .map-header-metrics{
    width:100%!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
  }
}
@media (min-width:1100px) and (pointer:fine) and (max-height:760px){
  .app.map-screen-active,
  .app:not(.map-screen-active){
    grid-template-rows:62px minmax(0,1fr) 52px!important;
  }
  .app.map-screen-active > .topbar.halloween-topbar,
  .app:not(.map-screen-active) > .topbar.halloween-topbar{
    height:62px!important;
    min-height:62px!important;
    max-height:62px!important;
    flex:0 0 62px!important;
  }
  .app.map-screen-active > .topbar.halloween-topbar .halloween-wordmark,
  .app:not(.map-screen-active) > .topbar.halloween-topbar .halloween-wordmark,
  .app.map-screen-active > .topbar.halloween-topbar .headline-zone,
  .app:not(.map-screen-active) > .topbar.halloween-topbar .headline-zone,
  .app.map-screen-active > .topbar.halloween-topbar .top-actions,
  .app:not(.map-screen-active) > .topbar.halloween-topbar .top-actions{
    height:56px!important;
    max-height:56px!important;
  }
  .app.map-screen-active > .topbar.halloween-topbar .halloween-wordmark-img,
  .app:not(.map-screen-active) > .topbar.halloween-topbar .halloween-wordmark-img{
    height:53px!important;
    max-height:53px!important;
  }
  .app.map-screen-active > .bottom-nav,
  .app:not(.map-screen-active) > .bottom-nav,
  .app.map-screen-active > .bottom-nav > button,
  .app:not(.map-screen-active) > .bottom-nav > button{
    height:52px!important;
    min-height:52px!important;
    max-height:52px!important;
    flex-basis:52px!important;
  }
}