/* * GeoFinance GPS — Mobile Patch Definitivo * Arquivo: gfm-mobile.css * Adicionar no do mapa.html APÓS gfm-nav.css: * */ /* ============================================================ VARIÁVEIS MOBILE ============================================================ */ :root { --nav-h: 44px; --ticker-h: 32px; --safe-bottom: env(safe-area-inset-bottom, 0px); } /* ============================================================ CORREÇÃO: remover CSS inline duplicado do nav no mapa.html O nav inline tem z-index: 1300, o gfm-nav.css tem 5000. Forçamos consistência aqui. ============================================================ */ .gfm-nav { z-index: 5000 !important; height: var(--nav-h) !important; } /* ============================================================ BODY: garantir que o padding-top considera nav + ticker ============================================================ */ body { padding-top: calc(var(--nav-h) + var(--ticker-h)) !important; } /* ============================================================ MOBILE ONLY (max-width: 768px) ============================================================ */ @media (max-width: 768px) { /* --- NAV -------------------------------------------------- */ .gfm-nav { padding: 0 8px 0 10px !important; gap: 4px !important; } .gfm-nav-logo { font-size: 11px !important; flex-shrink: 0; } .gfm-nav-links { justify-content: flex-start !important; gap: 3px !important; overflow-x: auto !important; overflow-y: hidden !important; } .gfm-nav-link[data-gfm-path="/overview"], .gfm-nav-link[data-gfm-path="/datascience"], .gfm-nav-link[data-gfm-path="/monitor"] { display: inline-flex !important; } .gfm-nav-link, .gfm-nav-drop-btn { font-size: 9px !important; padding: 4px 6px !important; flex-shrink: 0 !important; } /* Menu hambúrguer ABERTO: itens em tamanho cheio (a regra de 9px acima é só pra barra colapsada; com o menu aberto os itens precisam ser tocáveis). */ .gfm-nav.menu-open .gfm-nav-link, .gfm-nav.menu-open .gfm-nav-drop-btn { font-size: 13px !important; padding: 13px 12px !important; width: 100% !important; justify-content: space-between !important; } .gfm-nav.menu-open .gfm-nav-drop-item { font-size: 13px !important; padding: 12px 10px !important; } /* Dropdowns alinham à direita para não sair da tela */ .gfm-nav-drop-menu { left: auto !important; right: 0 !important; transform: translateY(4px) !important; min-width: 140px !important; } .gfm-nav-drop.is-open .gfm-nav-drop-menu { transform: translateY(0) !important; } /* --- TICKER / PRICES BAR ---------------------------------- */ .ticker-wrap, .prices-bar { top: var(--nav-h) !important; height: var(--ticker-h) !important; padding: 0 10px !important; gap: 10px !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .ticker-wrap::-webkit-scrollbar, .prices-bar::-webkit-scrollbar { display: none; } /* --- FILTER BAR (botões sobre o mapa) --------------------- */ /* Barra principal: relative, em fluxo, logo abaixo da nav (y≈76). O JS positionModeBar() põe a barra de Risco/Reservas logo abaixo dela (sem sobrepor). */ .map-filter-bar { position: relative !important; top: auto !important; left: auto !important; right: auto !important; transform: none !important; max-width: none !important; width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain !important; touch-action: pan-x !important; pointer-events: auto !important; scrollbar-width: none; flex-wrap: nowrap !important; padding: 6px 8px !important; gap: 4px !important; z-index: 600 !important; } /* Barra de Risco/Reservas: fica logo abaixo da principal (34px de altura → top 40px). CSS fixo com !important = não depende do JS e vence o top:8px que causava o overlap. */ .heatmap-mode-bar { top: 40px !important; left: 8px !important; right: 8px !important; transform: none !important; max-width: none !important; width: auto !important; justify-content: flex-start !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; z-index: 600 !important; } .heatmap-mode-bar::-webkit-scrollbar { display: none; } .map-filter-bar::-webkit-scrollbar { display: none; } /* Barras agora ficam em fluxo (acima do mapa), então o zoom não precisa de margem grande */ .leaflet-top.leaflet-left .leaflet-control-zoom { margin-top: 100px !important; margin-left: 8px !important; z-index: 550 !important; } .map-wrap.has-mineral-bar .leaflet-top.leaflet-left .leaflet-control-zoom { margin-top: 100px !important; } .fbtn { font-size: 9px !important; padding: 2px 5px !important; min-height: 24px !important; flex-shrink: 0 !important; } /* Esconder labels longos no mobile, mostrar só sigla */ .fbtn-label-full { display: none !important; } .fbtn-label-short { display: inline !important; } .mining-filter-bar { position: relative !important; top: auto !important; left: auto !important; right: auto !important; transform: none !important; max-width: none !important; width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; overscroll-behavior-x: contain !important; touch-action: pan-x !important; pointer-events: auto !important; flex-wrap: nowrap !important; } /* --- MAPA ------------------------------------------------- */ .map-wrap { /* Ocupa todo o espaço restante após nav+ticker */ flex: 1 !important; min-height: 0 !important; position: relative !important; } #map { width: 100% !important; height: 100% !important; } /* --- EVENT INTEL — desligado no mobile (aparecia toda hora e tampava tudo) --- */ #eventIntelPanel, #eiTriggerBtn { display: none !important; } /* Botão de ajuda do tutorial — acima da bottom nav */ .gfm-tutorial-help { bottom: calc(64px + var(--safe-bottom)) !important; } /* --- LAYER PANEL ------------------------------------------ */ #layerPanel { top: auto !important; bottom: calc(60px + var(--safe-bottom)) !important; left: 8px !important; right: 8px !important; width: auto !important; min-width: unset !important; max-height: 48vh !important; overflow-y: auto !important; } /* --- DROPDOWN PANEL (country detail) ---------------------- */ #ddPanel { left: 8px !important; right: 8px !important; width: auto !important; max-width: 100% !important; max-height: 60vh !important; overflow-y: auto !important; top: auto !important; bottom: calc(60px + var(--safe-bottom)) !important; border-radius: 10px !important; } /* --- SEARCH BAR ------------------------------------------- */ .gf-search-wrap { display: none !important; /* ocultar no mobile — usa o botão no mapa */ } /* --- TUTORIAL CARD ---------------------------------------- */ .gfm-tutorial-card { left: 12px !important; right: 12px !important; width: auto !important; max-width: 100% !important; bottom: calc(70px + var(--safe-bottom)) !important; top: auto !important; } /* --- FOOTER ----------------------------------------------- */ footer { display: none !important; /* footer não faz sentido na página de mapa em mobile */ } /* --- MAP HOVER LABEL -------------------------------------- */ #map-hover-label { display: none !important; /* hover não existe em touch */ } /* --- LOGO HEADER INTERNO (mapa.html tem header duplicado) -- */ header.map-page-header { display: none !important; } } /* ============================================================ VERY SMALL SCREENS (max-width: 380px) ============================================================ */ @media (max-width: 380px) { .gfm-nav-logo { font-size: 10px !important; } .gfm-nav-link, .gfm-nav-drop-btn { font-size: 8px !important; padding: 3px 5px !important; } #eventIntelPanel { max-height: 45vh !important; } .map-filter-bar { padding: 5px 6px !important; } .fbtn { font-size: 8px !important; padding: 2px 4px !important; } }