/* Painel no celular: barra de abas embaixo (Ações, Mapa, Nova ação, Editar site),
   indicadores em uma faixa só e filtros recolhidos. Só vale até 700px de largura. */
#abas,#filtrosBtn{display:none}
@media(min-width:701px) and (max-width:1150px){
 header .site-link{display:inline-flex!important;align-items:center;white-space:nowrap}
}
@media(max-width:700px){
 :root{--aba:60px}
 body{box-sizing:border-box;height:100dvh;padding-bottom:calc(var(--aba) + env(safe-area-inset-bottom));grid-template-rows:auto auto auto minmax(0,1fr)!important}
 body>header{grid-row:1}body>.filters{grid-row:2}body>#metrics{grid-row:3}body>main{grid-row:4;min-height:0}

 /* cabeçalho enxuto: as ações foram para a barra de baixo */
 body>header{min-height:0;padding:6px 12px;gap:10px}
 header .brand{width:40px;height:42px}
 header .heading{flex:1;min-width:0}header .heading strong{font-size:17px;line-height:1.1}
 header #newAction,header #mobileMapToggle,header .site-link{display:none!important}

 /* indicadores: uma faixa que rola de lado */
 html body>#metrics{display:flex!important;flex-wrap:nowrap!important;grid-template-columns:none!important;gap:8px!important;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding:0 12px;padding:8px 12px!important;border-bottom:1px solid var(--linha,#dfe8eb);scrollbar-width:none}
 #metrics::-webkit-scrollbar{display:none}
 #metrics>div.figure,#metrics>div.figure:first-child{flex:0 0 auto;scroll-snap-align:start;padding:6px 12px!important;border:1px solid var(--linha,#dfe8eb)!important;border-radius:10px;background:#f6fafb;display:flex;flex-direction:column;gap:1px}
 #metrics .figure b{font-size:19px;line-height:1.1}
 #metrics .figure span{font-size:11.5px;white-space:nowrap}
 #metrics .hint-tip{left:auto;right:0;white-space:normal;width:220px}

 /* filtros: busca + botão; os três seletores abrem sob demanda */
 body>.filters{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:8px!important;padding:8px 12px!important}
 .filters input#search{grid-column:1/5!important;grid-row:1!important;height:44px!important;font-size:16px!important}
 .filters #filtrosBtn{grid-column:5/7!important;grid-row:1!important;height:44px!important;font-size:14px!important;display:flex!important;align-items:center;justify-content:center;gap:6px;border:1px solid #c9d8dd;background:#fff;color:var(--mar-fundo,#063b50);border-radius:8px;padding:0 8px}
 #filtrosBtn b{background:#d9821f;color:#fff;border-radius:99px;min-width:18px;height:18px;font-size:11px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
 #filtrosBtn b[hidden]{display:none}
 .filters select{height:44px!important;font-size:16px!important}
 .filters #year,.filters #type,.filters #city{display:none!important}
 html[data-filtros="1"] .filters #year,html[data-filtros="1"] .filters #type,html[data-filtros="1"] .filters #city{display:block!important}
 .filters #year{grid-column:1/4!important;grid-row:2!important}.filters #type{grid-column:4/7!important;grid-row:2!important}.filters #city{grid-column:1/7!important;grid-row:3!important}
 #activeFilters{grid-column:1/-1!important;grid-row:4!important}
 #clearFilters{grid-column:1/-1!important;grid-row:5!important;height:40px!important}

 /* lista e formulário aproveitam a tela toda */
 html[data-modo="form"] body>.filters,html[data-modo="form"] body>#metrics,
 html[data-modo="mapa"] body>.filters,html[data-modo="mapa"] body>#metrics{display:none!important}
 .list-footer{padding:8px 16px!important;position:static}
 .side-heading{padding:12px 16px}
 .map-heading{padding:10px 14px}
 .map-bottom{bottom:36px}
 #content{padding-bottom:16px}
 .leaflet-control-zoom a{width:40px;height:40px;line-height:40px}

 /* barra de abas */
 #abas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:1000;height:calc(var(--aba) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:#fff;border-top:1px solid #dfe8eb;box-shadow:0 -4px 16px #0f2f3a14}
 #abas>*{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:none;color:#4b6470;font-weight:600;font-size:12px;line-height:1.1;font-family:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;min-width:0;padding:0 2px;white-space:nowrap}
 #abas svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
 #abas>[aria-current="true"]{color:#075673;box-shadow:inset 0 3px 0 #075673}
 #abas>.aba-site{color:#fff;background:#075673;margin:6px 4px;border-radius:12px;box-shadow:none}
 #abas>.aba-site:active{background:#063b50}
 #toast{bottom:calc(var(--aba) + 12px + env(safe-area-inset-bottom))!important}
}