/* Página do mapa. As cores, o cabeçalho e o menu vêm de site.css. */
html,body{height:100%}
body{display:flex;flex-direction:column;height:100dvh;overflow:hidden;font:16px/1.45 Inter,system-ui,-apple-system,Segoe UI,sans-serif}
.cab{flex:none}
#app{flex:1;min-height:0;display:flex}
#side{width:340px;flex:none;background:var(--bg);border-right:1px solid var(--line);overflow:auto;padding:16px}
#mapa{flex:1;min-width:0;min-height:0;position:relative}
#map{position:absolute;inset:0}
#map:not(.pronto) .maplibregl-ctrl-attrib{visibility:hidden}
#side h1{font-size:21px;line-height:1.25;font-weight:800;margin:0;color:var(--acc)}#side h1+p{margin:2px 0 14px;color:var(--mut);font-size:15px}
#side h3,#side .tit{display:block;font-size:15px;font-weight:700;color:var(--ink);margin:18px 0 6px}
select{width:100%;padding:8px;border:1px solid #9fadcb;border-radius:8px;background:#fff;font:inherit;color:inherit}
label.ck{display:flex;align-items:center;gap:8px;padding:3px 0;cursor:pointer}
label.ck .n{margin-left:auto;padding-left:8px;color:var(--mut);font-size:14px;font-variant-numeric:tabular-nums}
label.ck:has(input:not(:checked)){color:var(--mut)}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}.dot.sq{border-radius:2px;outline:1px solid #0002}.dot.qd{border-radius:2px}
.bloco{margin-top:20px;padding-top:14px;border-top:1px solid var(--line)}
.bloco h2{font-size:17px;font-weight:800;line-height:1.25;margin:0 0 8px;color:var(--ink)}
.mestre{display:flex;align-items:flex-start;gap:8px;cursor:pointer}.mestre input{width:17px;height:17px;margin:3px 0 0;flex:none;accent-color:var(--acc)}
.so{margin-left:auto;padding:1px 7px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--acc);font:inherit;font-size:12px;cursor:pointer;opacity:0}
label.ck:hover .so,label.ck:focus-within .so{opacity:1}.so:hover{background:var(--suave)}label.ck .so+.n{margin-left:0}
@media(hover:none){.so{display:none}}
.extra{margin:6px 0 0;font-size:14px;color:var(--mut)}
#fMod,#fET{margin-top:8px}
.bloco.off .stats{opacity:.45}.bloco.fora{opacity:.45}
.seg{display:flex;border:1px solid var(--acc);border-radius:8px;overflow:hidden}
.seg button{flex:1;padding:7px;border:0;background:#fff;color:inherit;font:inherit;cursor:pointer}
.seg button:hover{background:var(--suave)}.seg button.on{background:var(--acc);color:#fff}
.seg button:focus-visible{outline-offset:-3px;outline-color:#f59e0b}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stat{background:var(--suave);border-radius:12px;padding:10px}
.stat b{display:block;font-size:23px;font-weight:800;font-variant-numeric:tabular-nums}.stat span{font-size:14px;line-height:1.25;display:block;color:var(--mut)}
.note{font-size:14px;color:var(--mut);margin-top:16px;border-top:1px solid var(--line);padding-top:10px}
.note a{display:inline-block;margin-top:8px;padding:4px 0;color:var(--acc);font-weight:600}
.pop b{font-size:16px;padding-right:12px;display:block}.pop div{margin-top:3px;font-size:14px}.pop .m{color:var(--mut)}
#leg{position:absolute;right:10px;bottom:30px;background:#fffffff2;padding:7px 10px;border-radius:6px;font-size:14px;box-shadow:0 1px 4px #0002}
#leg div{display:flex;align-items:center;gap:6px;line-height:1.55}#leg b{display:block;margin-bottom:2px}#leg b.sep{margin-top:6px}
#map.pronto~#carrega{display:none}
#carrega{top:45%;padding:10px 16px;color:var(--mut);animation:pulsa 1.4s ease-in-out infinite alternate}
@keyframes pulsa{from{opacity:1}to{opacity:.55}}
@media(prefers-reduced-motion:reduce){#carrega{animation:none}}
#dica,#vazio,#carrega{position:absolute;left:50%;transform:translateX(-50%);background:#fffffff2;border-radius:16px;box-shadow:0 1px 4px #0003;font-size:14px}
#dica{top:10px;padding:5px 12px;max-width:calc(100% - 90px);text-align:center;color:var(--mut)}
#vazio{top:45%;padding:10px 16px;max-width:calc(100% - 32px);text-align:center;font-weight:600}
button.fs{margin-top:10px;width:100%;padding:9px;border:1px solid var(--acc);color:#fff;background:var(--acc);border-radius:8px;cursor:pointer;font:inherit;font-weight:600}
button.fs:hover{background:#142b6b}
button.fs.sec{background:#fff;color:var(--acc)}button.fs.sec:hover{background:var(--suave)}button.fs:disabled{opacity:.5;cursor:default;background:#fff}
#painel{display:none;position:absolute;left:10px;top:10px;width:auto;margin:0;padding:6px 12px;box-shadow:0 1px 4px #0003}
/* ecrã inteiro: só fica o mapa, sem cabeçalho nem painel */
body.full .cab,body.full #side{display:none}body.full #painel{display:block}
body:not(.full) #leg.pontos:not(.ver){display:none}
#leg.ver{cursor:pointer}
#bLeg{display:none;position:absolute;left:10px;top:10px;padding:6px 12px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 1px 4px #0003;font:inherit;font-size:14px;font-weight:600;color:var(--acc);cursor:pointer}
#bLeg[aria-expanded=true]{background:var(--acc);color:#fff;border-color:var(--acc)}
body:not(.full) #mapa:has(#leg.pontos) #bLeg{display:block}
@media(max-width:700px){
#app{flex-direction:column-reverse}#side{width:100%;height:48%;flex:none;border:0;border-top:1px solid var(--line);padding:12px 12px calc(12px + env(safe-area-inset-bottom))}
/* no telemóvel o nome do site já está no cabeçalho: o título fica só para leitores de ecrã */
#side h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}#side h1+p{display:none}
.topo{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;grid-auto-flow:column;column-gap:8px}#side .topo>.tit,#side .topo>h3{margin-top:0}
#mapa:has(#leg.pontos) #bLeg{display:block}body.full #bLeg{top:56px}
.stats{gap:6px}.stat{padding:6px 8px}.stat b{font-size:20px}.stat span{font-size:13px}
.seg button,button.fs{padding:11px}select{padding:11px 8px}label.ck{padding:9px 0}
#leg.pontos:not(.ver){display:none}#leg{bottom:24px;font-size:13px}
#dica{font-size:13px;border-radius:12px;padding:4px 10px;left:auto;right:50px;transform:none;max-width:calc(100% - 150px)}
}