/* ============================== NAMÃO – styles.css (mobile-first) ============================== */ /* Reset & base */ *{ box-sizing:border-box } html,body{ height:100% } body{ margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,"Apple Color Emoji","Segoe UI Emoji"; color: var(--text); background: var(--bg); } /* Tema (claro por padrão) */ :root{ --bg:#ffffff; --text:#0f172a; --chip:#f3f4f6; --border:#e5e7eb; --panel:#ffffff; --panelText:#111827; --muted:#6b7280; --shadow: 0 8px 24px rgba(0,0,0,.10); --accent:#2563eb; } /* Escuro (ativar adicionando .theme-dark no ) */ .theme-dark{ --bg:#0b1220; --text:#e5e7eb; --chip:#111827; --border:#1f2937; --panel:#0f172a; --panelText:#e5e7eb; --muted:#9ca3af; --shadow: 0 10px 30px rgba(0,0,0,.45); --accent:#60a5fa; } /* Topbar */ .topbar{ position: sticky; top:0; z-index:50; display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 12px; border-bottom:1px solid var(--border); background:var(--bg); color:var(--text); } .topbar .brand{ font-weight:700 } .topbar .filters{ display:flex; gap:8px; flex-wrap:wrap } .topbar select{ height:32px; border-radius:8px; border:1px solid var(--border); background:var(--panel); color:var(--panelText); padding:0 10px; } .chip{ display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 10px; border-radius:16px; border:1px solid var(--border); background:var(--chip); color:var(--text); user-select:none; } /* Layout & mapa */ .layout{ position:relative; height:calc(100vh - 56px) } .mapwrap{ position:absolute; inset:0 } #map{ width:100%; height:100% } /* Geocoder flutuante – alinhado à esquerda */ .geocoder-float{ position:absolute; left:-25px; top:56px; z-index:28; max-width:min(560px,92vw) } .mapboxgl-ctrl-geocoder{ min-width:min(560px,92vw) } .mapboxgl-ctrl-geocoder .suggestions, .mapboxgl-ctrl-geocoder--button{display:none!important} /* Corrige padding/cores do input do geocoder */ .mapboxgl-ctrl-geocoder--input{ padding: 10px 36px 10px 34px !important; /* ícone à esquerda */ background: var(--panel) !important; color: var(--panelText) !important; border-color: var(--border) !important; border-radius: 10px !important; } .mapboxgl-ctrl-geocoder--input::placeholder{ color: var(--muted); opacity: .85; } /* Resultados da pesquisa – também à esquerda */ .search-panel{ position:absolute; left:12px; top:98px; z-index:30; width:min(560px,92vw); background:var(--panel); color:var(--panelText); border:1px solid var(--border); border-radius:10px; box-shadow: var(--shadow); /* não exceder a altura do ecrã (com margem de respiro) */ max-height: calc(100vh - 140px); overflow:auto; } .search-panel .result-row{ padding:10px 12px; border-bottom:1px solid var(--border); cursor:pointer; } .search-panel .result-row:last-child{ border-bottom:0 } .search-panel .result-row:hover{ background:var(--chip) } /* Popups */ .mapboxgl-popup-content{ background:var(--panel) !important; color:var(--panelText) !important; border:1px solid var(--border); border-radius:10px; } .popup-title{ font-weight:600; margin:0 0 4px } .popup-meta{ color:var(--muted) } .popup-actions{ display:flex; gap:8px; margin-top:8px } .icon-btn{ border:1px solid var(--border); background:var(--bg); color:var(--text); border-radius:8px; width:28px; height:28px; display:inline-grid; place-items:center; cursor:pointer; } /* Badges */ .badge-dot{ display:inline-block; width:8px; height:8px; border-radius:50% } .badge-online{ background:#22c55e } .badge-offline{ background:#ef4444 } /* Botão flutuante “Limpar rota” – bottom-right e escondido por padrão */ .fab{ position:absolute; right:12px; bottom:12px; z-index:29; display:none; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--border); background:var(--panel); color:var(--panelText); border-radius:10px; cursor:pointer; box-shadow:var(--shadow); } .fab.show{ display:flex } /* JS adiciona esta classe quando existir rota */ /* Mapbox controls & Directions com tema */ .mapboxgl-ctrl-group{ border-color:var(--border) !important; background:var(--panel) !important } .mapboxgl-ctrl-group > button{ background:var(--panel) !important; color:var(--panelText) !important } .mapboxgl-ctrl-group > button:hover{ background:var(--chip) !important } .mapboxgl-ctrl-directions, .mapbox-directions-instructions{ background:var(--panel) !important; color:var(--panelText) !important; border-color:var(--border) !important; } .mapbox-directions-component-keyline, .mapbox-directions-steps{ border-color:var(--border) !important } /* Branding (usa com atenção aos termos) */ .mapboxgl-ctrl-logo, .mapboxgl-ctrl-attrib, .mapbox-improve-map{ display:none !important } /* Responsivo */ @media (max-width:768px){ .topbar{ padding:8px; gap:8px } .layout{ height:calc(100vh - 54px) } .geocoder-float{ left:8px; top:54px; max-width:unset; width:calc(100vw - 16px) } .search-panel{margin-left: 40px; left:8px; top:94px; width:calc(100vw - 16px); max-height:calc(100vh - 130px) } .fab{ right:8px; bottom:8px } } /* Respeitar esquema escuro do SO se não usares .theme-dark */ @media (prefers-color-scheme: dark){ :root:not(.theme-dark){ --bg:#0b1220; --text:#e5e7eb; --chip:#111827; --border:#1f2937; --panel:#0f172a; --panelText:#e5e7eb; --muted:#9ca3af; --accent:#60a5fa; --shadow: 0 10px 30px rgba(0,0,0,.45); } }