/* Clima Aberto · VERA CRUZ — mapa em primeiro lugar (vidro, verde; tema escuro = identidade, claro = opção do visitante) */
/* ---------- TEMAS: <html data-theme="dark|light"> decidido ANTES do 1º paint (boot no <head> do index.html) ---------- */
:root,
[data-theme="dark"]{
  --accent:#34d27a; --accent-2:#2bb3a6;
  --bg:#09100b; --bg-2:#0b140d;
  --ink:#eaf5ee; --ink-dim:#a9c2b3; --muted:#7f998b;
  --energy:#eaa23c; --ok:#56c57d; --warn:#edb531; --crit:#e5564d; --water:#4a9fd4; --you:#4ea3ff;
  --vidro:rgba(9,16,11,.66);
  --vidro-forte:rgba(9,16,11,.82);
  --vidro-br:rgba(255,255,255,.16);
  --vidro-sh:0 10px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.03);
  --r:18px;
  --topo:calc(56px + env(safe-area-inset-top));
  --peek:178px;

  /* novo · vidro e superfícies (hoje rgba fixos espalhados no CSS) */
  --vidro-brilho:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,0) 40%);
  --tint-1:rgba(255,255,255,.04); --tint-2:rgba(255,255,255,.07); --code-bg:rgba(0,0,0,.3);
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.18); --line-3:rgba(255,255,255,.4);
  --sel-bg:rgba(52,210,122,.1); --sel-br:rgba(52,210,122,.45);
  --scrim:rgba(4,10,6,.62);
  /* novo · botões e selos: o verde vivo é o MESMO nos dois temas, sempre com texto escuro (9,4:1) */
  --accent-fill:#34d27a; --accent-fill-2:#2bb3a6; --on-accent:#04170c;
  --accent-glow:0 6px 18px -6px rgba(52,210,122,.75);
  --logo-glow:drop-shadow(0 0 8px rgba(52,210,122,.55));
  /* novo · etiquetas e textos que eram cor fixa */
  --tag-com-ink:#34d27a; --tag-com-bg:rgba(52,210,122,.12);
  --tag-ofi-ink:#cfe5ff; --tag-ofi-bg:rgba(78,163,255,.16);
  --tag-ana-ink:#9fd6ff; --tag-ana-bg:rgba(74,159,212,.16);
  --gps-ink:#cfe5ff; --gps-bg:rgba(78,163,255,.12); --gps-br:rgba(78,163,255,.45);
  --tend-up:#ff9a6b; --tend-down:#7cc4f0;
  /* novo · verde de TEXTO sobre tinta verde (--sel-bg/--tag-com-bg: chave, etiqueta COMUNIDADE, "copiar", sensores) */
  --accent-on-tint:#34d27a;
  /* novo · séries do gráfico do detalhe (legenda = texto; linha = gráfico) e interruptor do painel */
  --serie-temp:#ef8f2b; --serie-umid:#3d9be0; --serie-bat:#eaa23c;
  /* novo · gráfico do detalhe: faixa de incerteza da tendência, região "+6 h", grade das horas, linha "agora", chuva prevista */
  --serie-temp-faixa:rgba(239,143,43,.2); --graf-futuro:rgba(255,255,255,.04); --graf-grade:rgba(255,255,255,.07);
  --graf-agora:rgba(234,245,238,.55); --chuva-barra:#5aa9f0; --graf-rotulo-bg:rgba(9,16,11,.78);
  --sw-borda:rgba(255,255,255,.4); --sw-on:#34d27a;
  --cad-verde:#34c759; --cad-amarelo:#ffcc00;
  /* novo · SINAL = cor de PREENCHIMENTO (pontos, barras, placas). O --ok/--warn/--crit acima é cor de TEXTO. */
  --sinal-ok:#56c57d; --sinal-agua:#4a9fd4; --sinal-atencao:#edb531; --sinal-alerta:#f0832a; --sinal-inundacao:#e5564d;
  --aro-atencao:#fff6dc; --aro-alerta:#fff0e2; --aro-inundacao:#ffffff;
  /* novo · anel por categoria das bolhas/grupos (a contagem por categoria também vai no nome acessível) */
  --cat-com_aberta:#d77ad0; --cat-estacao:#5b9dff; --cat-aeroporto:#e8b53a; --cat-pluviometro:#3cc6e6; --cat-regua:#2fbf8f; --cat-mare:#9a86ff;
  /* novo · mapa-base e mancha */
  --map-bg:#0a120d;
  --map-tiles:invert(1) hue-rotate(180deg) brightness(.9) contrast(.92) saturate(.75);
  --campo-blend:normal;
  --campo-alfa:.55;          /* lido pelo CampoLayer (hoje 0.55 fixo no app.js) */
  /* novo · marcadores */
  --mk-bg:#0d1610; --mk-ink:#eaf5ee; --mk-ring:#a9c2b3; --mk-halo:rgba(0,0,0,.55);
  --mk-sh:0 2px 8px rgba(0,0,0,.55); --bolha-contorno:rgba(0,0,0,.45);
  --mesh:#34d27a; --mesh-ink:#04170c; --mesh-edge:#eafff2; --mesh-halo:rgba(0,0,0,.5); --mesh-off:#8fb9a0;
  --mesh-glow:drop-shadow(0 0 6px rgba(52,210,122,.5)) drop-shadow(0 2px 3px rgba(0,0,0,.4));
  --sua-bg:#34d27a; --sua-ink:#04170c; --sua-anel:#34d27a;
  /* novo · preparo e avisos (os mesmos nomes e valores no preparo.html): emergência, fundos de perigo/calmo/neutro */
  --sos-fill:#c93b33; --on-sos:#ffffff;
  --aviso-perigo-bg:rgba(229,86,77,.12); --aviso-perigo-br:rgba(229,86,77,.45);
  --aviso-calmo-bg:rgba(86,197,125,.08); --aviso-calmo-br:rgba(86,197,125,.3);
  --aviso-neutro-bg:rgba(237,181,49,.08); --aviso-neutro-br:rgba(237,181,49,.32);
  /* novo · zonas publicadas (preenchem com --sinal-*), pino de apoio e linha da rota que desvia */
  --zona-alfa:.30; --zona-alfa-obs:.14;
  --zona-inundacao-traco:#e5564d; --zona-forte-traco:#f0832a; --zona-alag-traco:#edb531; --zona-agua-traco:#4a9fd4;
  --pino-bg:#eaf5ee; --pino-ink:#0d1610; --pino-halo:rgba(0,0,0,.55);
  --rota-ok:#56c57d; --rota-cruza:#e5564d; --rota-halo:rgba(0,0,0,.6);
  color-scheme:dark;
}

[data-theme="light"]{
  --accent:#0e7f45; --accent-2:#0b766d;            /* verde DE TEXTO: 4,7:1 no vidro claro (o vivo fica em --accent-fill) */
  --bg:#eef3ef; --bg-2:#ffffff;
  --ink:#0f1f16; --ink-dim:#3b5245; --muted:#56695e;
  --energy:#9a5b06; --ok:#17793f; --warn:#8a5a00; --crit:#b8322a; --water:#1a65a3; --you:#1863d6;
  --vidro:rgba(248,252,249,.8);
  --vidro-forte:rgba(248,252,249,.93);
  --vidro-br:rgba(15,40,25,.14);
  --vidro-sh:0 10px 30px rgba(24,52,36,.16), 0 1px 2px rgba(24,52,36,.1), inset 0 1px 0 rgba(255,255,255,.9);

  --vidro-brilho:linear-gradient(160deg,rgba(255,255,255,.65),rgba(255,255,255,0) 45%);
  --tint-1:rgba(15,40,25,.04); --tint-2:rgba(15,40,25,.07); --code-bg:rgba(15,40,25,.06);
  --line:rgba(15,40,25,.1); --line-2:rgba(15,40,25,.24); --line-3:rgba(15,40,25,.42);
  --sel-bg:rgba(14,127,69,.08); --sel-br:rgba(14,127,69,.55);
  --scrim:rgba(20,35,26,.38);
  --accent-fill:#34d27a; --accent-fill-2:#2bb3a6; --on-accent:#04170c;
  --accent-glow:0 4px 12px -6px rgba(14,127,69,.55);
  --logo-glow:none;                                   /* o brilho verde fixo do logo vira halo sujo no vidro claro */
  --tag-com-ink:#0a6636; --tag-com-bg:rgba(14,127,69,.1);   /* 5,8:1 na tinta (o #0e7f45 dava 4,2) */
  --tag-ofi-ink:#1d4f86; --tag-ofi-bg:rgba(29,79,134,.1);
  --tag-ana-ink:#155f8f; --tag-ana-bg:rgba(21,95,143,.1);
  --gps-ink:#1a4f8f; --gps-bg:rgba(24,99,214,.08); --gps-br:rgba(24,99,214,.4);
  --tend-up:#9c4518; --tend-down:#1a65a3;            /* >= 5:1 também nas células com --tint-2 */
  --accent-on-tint:#0a6636;                          /* >= 5,3:1 sobre --sel-bg, inclusive com --code-bg por cima */
  --serie-temp:#a14a1a; --serie-umid:#1a65a3; --serie-bat:#9a5b06;   /* >= 4,7:1 no fundo do gráfico */
  --serie-temp-faixa:rgba(161,74,26,.14); --graf-futuro:rgba(15,40,25,.04); --graf-grade:rgba(15,40,25,.08);
  --graf-agora:rgba(15,31,22,.6); --chuva-barra:#2a6eb0;           /* linha "agora" e barras >= 3:1 (1.4.11) */
  --graf-rotulo-bg:rgba(248,252,249,.88);                            /* fundo dos rótulos: texto AA mesmo sobre a faixa */
  --sw-borda:#56695e; --sw-on:#0e7f45;               /* trilho desligado 5,5:1 e ligado 4,8:1 contra o painel */
  --cad-verde:#1e8e3e; --cad-amarelo:#9a6a00;
  --sinal-ok:#1f8a4c; --sinal-agua:#1a6fb0; --sinal-atencao:#edb531; --sinal-alerta:#e8711a; --sinal-inundacao:#d63d35;
  --aro-atencao:#6b4700; --aro-alerta:#6e2c00; --aro-inundacao:#7a1410;
  --cat-com_aberta:#a33e9d; --cat-estacao:#2763c9; --cat-aeroporto:#a87400; --cat-pluviometro:#0f7f9c; --cat-regua:#16805b; --cat-mare:#5b45d1;
  /* OSM SEM inverter: só tira saturação — o mapa vira papel e a cor fica para os dados */
  --map-bg:#e8eee9;
  --map-tiles:saturate(.42) brightness(1.03) contrast(.92);
  --campo-blend:multiply;    /* sobre papel a mancha tinge o mapa sem lavar ruas e nomes */
  --campo-alfa:.62;
  --mk-bg:#ffffff; --mk-ink:#12241a; --mk-ring:#56695e; --mk-halo:rgba(255,255,255,.92);
  --mk-sh:0 1px 4px rgba(20,40,28,.3); --bolha-contorno:rgba(15,31,22,.38);
  --mesh:#34d27a; --mesh-ink:#04170c; --mesh-edge:#0b4f2c; --mesh-halo:rgba(255,255,255,.95); --mesh-off:#3f7a58;
  --mesh-glow:drop-shadow(0 1px 3px rgba(11,79,44,.35));
  --sua-bg:#0e7f45; --sua-ink:#ffffff; --sua-anel:#0e7f45;
  --sos-fill:#c93b33; --on-sos:#ffffff;                               /* branco sobre o vermelho: 5,05:1 */
  --aviso-perigo-bg:rgba(184,50,42,.07); --aviso-perigo-br:rgba(184,50,42,.4);   /* --crit sobre ele >= 4,5:1 */
  --aviso-calmo-bg:rgba(23,121,63,.07); --aviso-calmo-br:rgba(23,121,63,.3);
  --aviso-neutro-bg:rgba(138,90,0,.07); --aviso-neutro-br:rgba(138,90,0,.35);
  --zona-alfa:.22; --zona-alfa-obs:.10;
  --zona-inundacao-traco:#b8322a; --zona-forte-traco:#b0520f; --zona-alag-traco:#9a6a00; --zona-agua-traco:#1a65a3;   /* >= 3:1 no papel */
  --pino-bg:#12241a; --pino-ink:#ffffff; --pino-halo:rgba(255,255,255,.92);
  --rota-ok:#17793f; --rota-cruza:#b8322a; --rota-halo:rgba(255,255,255,.95);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:15px;line-height:1.45;overflow:hidden;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit}
h1,h2,h3,strong{font-family:"Chakra Petch",sans-serif}
.mono,code{font-family:"IBM Plex Mono",monospace}
.muted{color:var(--muted)} .small{font-size:12.5px}
b{color:var(--ink)}

/* ---------- vidro ---------- */
.glass{
  background:var(--vidro-brilho),var(--vidro);
  border:1px solid var(--vidro-br); box-shadow:var(--vidro-sh);
  -webkit-backdrop-filter:blur(16px) saturate(1.5); backdrop-filter:blur(16px) saturate(1.5);
}

/* ---------- mapa ---------- */
#map{position:fixed;inset:0;background:var(--map-bg);z-index:0}
/* escuro: OSM invertido; claro: OSM "papel" (só dessatura). Trocar de tema NÃO recarrega tiles */
.leaflet-tile{filter:var(--map-tiles)}
.leaflet-container{background:var(--map-bg);font-family:inherit}
.leaflet-control-attribution{background:var(--vidro)!important;color:var(--muted)!important;font-size:10px}
.leaflet-control-attribution a{color:var(--ink-dim)!important}
.leaflet-control-zoom{border:1px solid var(--vidro-br)!important;border-radius:12px!important;overflow:hidden;box-shadow:var(--vidro-sh)!important}
.leaflet-control-zoom a{background:var(--vidro-forte)!important;color:var(--ink)!important;border-color:var(--vidro-br)!important;width:36px!important;height:36px!important;line-height:36px!important}
.campo-canvas{pointer-events:none}
/* a mancha (canvas) mora no overlayPane: o blend vai NO PANE (é ele que enxerga os tiles; no canvas não faz nada).
   O app não põe vetores neste pane. Escuro: normal; claro: multiply (tinge o papel sem lavar ruas e nomes) */
.leaflet-overlay-pane{mix-blend-mode:var(--campo-blend)}

/* ---------- barra superior ---------- */
.topbar{position:fixed;z-index:20;top:calc(8px + env(safe-area-inset-top));left:10px;right:10px;height:48px;border-radius:16px;
  display:flex;align-items:center;justify-content:space-between;padding:0 6px 0 12px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.mark{color:var(--accent);flex:0 0 auto;filter:var(--logo-glow)}
.brand-txt{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.brand-txt strong{font-size:16px;letter-spacing:.3px}
/* o status da rede pode quebrar em 2 linhas (cabe nos 48 px da barra): com o botão Preparo ao lado, numa linha só ele era cortado */
.brand-txt span{font-size:11.5px;color:var(--ink-dim);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.12}

/* ---------- botões ---------- */
.btn{font-weight:600;border-radius:12px;padding:9px 14px;cursor:pointer;border:1px solid var(--vidro-br);background:var(--tint-2);transition:.15s}
.btn:hover{border-color:var(--line-3)}
.btn.primary{background:linear-gradient(135deg,var(--accent-fill),var(--accent-fill-2));color:var(--on-accent);border-color:transparent;box-shadow:var(--accent-glow)}
.btn.block{width:100%;display:block;text-align:center}
.btn.ghost{background:transparent}
.btn.danger{color:var(--crit);border-color:rgba(229,86,77,.5)}
.btn.gps{background:var(--gps-bg);border-color:var(--gps-br);color:var(--gps-ink);margin-bottom:10px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.add{display:flex;align-items:center;gap:6px;padding:8px 12px;height:36px}
.btn.add span:first-child{font-size:17px;line-height:1}
.mini{font-size:12px;font-weight:600;padding:5px 10px;border-radius:9px;cursor:pointer;color:var(--accent-on-tint);background:var(--sel-bg);border:1px solid var(--sel-br)}

/* ---------- foco ---------- */
.fab:focus-visible,.btn:focus-visible,.alca:focus-visible{outline:2px solid var(--you);outline-offset:2px}

.demo-flag{position:fixed;z-index:19;top:calc(var(--topo) + 10px);left:50%;transform:translateX(-50%);font-size:10.5px;font-weight:700;letter-spacing:.4px;white-space:nowrap;
  color:#1b1300;background:var(--sinal-atencao);padding:3px 10px;border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.legenda .lg-nota{color:var(--muted);font-size:10px;margin-top:3px}

/* ---------- legenda ---------- */
.legenda{position:fixed;z-index:18;left:10px;bottom:calc(var(--peek) + 12px + env(safe-area-inset-bottom));border-radius:14px;padding:8px 11px;min-width:168px;max-width:62vw;font-size:11.5px}
.legenda .lg-tit{font-weight:600;color:var(--ink);font-size:12px;margin-bottom:5px;display:flex;justify-content:space-between;gap:8px}
.legenda .lg-bar{height:8px;border-radius:999px;margin:2px 0 4px}
.legenda .lg-esc{display:flex;justify-content:space-between;color:var(--ink-dim);font-family:"IBM Plex Mono",monospace;font-size:10.5px}
.legenda .lg-tipos{display:flex;gap:10px;margin-top:6px;color:var(--muted);font-size:10.5px}
.lg-sw{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.lg-sw span{display:flex;align-items:center;gap:5px;color:var(--ink-dim)}
.lg-sw i{width:10px;height:10px;border-radius:3px;display:inline-block}

/* ---------- FAB ---------- */
.fab-col{position:fixed;z-index:18;right:10px;bottom:calc(var(--peek) + 12px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px}
.fab{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;cursor:pointer;color:var(--you)}
.fab.on{color:#fff;background:linear-gradient(135deg,#3b8cff,#4ea3ff);border-color:transparent}

/* ---------- gaveta ---------- */
.gaveta{position:fixed;z-index:21;left:0;right:0;bottom:0;border-radius:22px 22px 0 0;border-bottom:0;
  height:min(78dvh,680px);transform:translateY(calc(100% - var(--peek) - env(safe-area-inset-bottom)));
  transition:transform .32s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom)}
.gaveta[data-estado="aberto"]{transform:translateY(0)}
.alca{flex:0 0 auto;display:grid;place-items:center;height:22px;border:0;background:transparent;cursor:grab;width:100%}
.alca span{width:42px;height:5px;border-radius:999px;background:var(--line-2)}
.gaveta-corpo{flex:1;overflow:auto;padding:0 14px 16px;overscroll-behavior:contain}

/* conteúdo da gaveta */
.g-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 8px}
.g-top h2{font-size:17px;margin:0}
.g-top .sub{font-size:12px;color:var(--muted)}
.g-hero{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:16px;background:var(--tint-1);border:1px solid var(--line)}
.g-hero .val{font-family:"Chakra Petch",sans-serif;font-size:40px;font-weight:600;line-height:1;letter-spacing:-.5px;color:var(--c,var(--ink))}
/* no claro a cor da escala (amarelo, verde-claro) vira tinta escura do mesmo tom */
[data-theme="light"] .g-hero .val{color:color-mix(in srgb,var(--c,var(--ink)) 55%,var(--ink))}
.g-hero .val small{font-size:18px;color:var(--ink-dim);margin-left:2px}
.g-hero .info{min-width:0}
.g-hero .info .l1{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-hero .info .l2{font-size:12.5px;color:var(--ink-dim)}
.g-hero .info .l3{font-size:11.5px;color:var(--muted);margin-top:2px}
.tend{font-weight:600;white-space:nowrap}
.tend.up{color:var(--tend-up)} .tend.down{color:var(--tend-down)} .tend.flat{color:var(--muted)}
.g-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.g-chip{display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:12px;background:var(--tint-1);border:1px solid var(--line);font-size:12.5px;cursor:pointer;text-align:left;color:var(--ink)}
.g-chip .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.g-chip b{font-family:"IBM Plex Mono",monospace;font-weight:600}
.g-acoes{display:flex;gap:8px;margin-top:12px}
.g-acoes .btn{flex:1;font-size:13.5px;padding:10px}
.g-cta{margin-top:12px;padding:12px 14px;border-radius:14px;border:1px dashed var(--sel-br);background:var(--sel-bg);font-size:13px;color:var(--ink-dim)}
.g-cta b{color:var(--accent-on-tint)}
.g-sec{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin:16px 0 6px}
.g-lista{display:flex;flex-direction:column;gap:6px}
.g-item{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:13px;background:var(--tint-1);border:1px solid var(--line);cursor:pointer;text-align:left;width:100%}
.g-item:hover{border-color:var(--line-2)}
.g-item .dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 2px var(--line)}
.g-item .nm{flex:1;min-width:0}
.g-item .nm .a{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-item .nm .b{font-size:11.5px;color:var(--muted)}
.g-item .vv{text-align:right;font-family:"IBM Plex Mono",monospace;font-size:14px;font-weight:600;white-space:nowrap}
.g-item .vv .d{display:block;font-size:10.5px;color:var(--muted);font-weight:500}
.tag{font-size:10px;font-weight:700;letter-spacing:.4px;padding:1px 6px;border-radius:999px;vertical-align:1px;margin-left:4px}
.tag.com{color:var(--tag-com-ink);background:var(--tag-com-bg)}
.tag.ofi{color:var(--tag-ofi-ink);background:var(--tag-ofi-bg)}
.tag.ana{color:var(--tag-ana-ink);background:var(--tag-ana-bg)}
.tag.sua{color:var(--sua-ink);background:var(--sua-bg)}
.g-voltar{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--ink-dim);cursor:pointer;min-height:44px;padding:0 12px 0 0;margin:-6px 0 0;font-size:13px}
.g-det-h h2{margin:0 0 2px;font-size:19px}
.g-det-h .sub{font-size:12.5px;color:var(--ink-dim)}
.g-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}
.g-cel{padding:10px 12px;border-radius:13px;background:var(--tint-1);border:1px solid var(--line)}
.g-cel .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.g-cel .v{font-family:"IBM Plex Mono",monospace;font-size:19px;font-weight:600;margin-top:2px}
.g-cel .t{font-size:11.5px;margin-top:1px}
.g-cel.vazio .v{color:var(--muted);font-size:15px}
.g-nota{font-size:11.5px;color:var(--muted);margin-top:10px}
.g-nota a{color:var(--ink-dim);text-decoration:underline;text-underline-offset:2px}
.g-nota a:hover{color:var(--accent)}
.g-alerta{padding:9px 11px;border-radius:12px;background:rgba(237,181,49,.08);border:1px solid rgba(237,181,49,.28);color:var(--ink-dim)}
/* "Levar ao rádio" (detalhe da estação): o boletim de previsão para colar no app do rádio; details/summary nativos */
.g-bol{margin-top:12px;border:1px solid var(--vidro-br);border-radius:14px;background:var(--tint-1)}
.g-bol[open]{border-color:var(--sel-br)}
.g-bol>summary{position:relative;display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 40px 10px 12px;cursor:pointer;list-style:none;border-radius:14px;font-weight:600;font-size:14px}
.g-bol>summary::-webkit-details-marker{display:none}
.g-bol>summary::after{content:"";position:absolute;right:17px;top:50%;width:8px;height:8px;border-right:2px solid var(--ink-dim);border-bottom:2px solid var(--ink-dim);transform:translateY(-70%) rotate(45deg);transition:transform .15s}
.g-bol[open]>summary::after{transform:translateY(-25%) rotate(225deg)}
.g-bol>summary:focus-visible{outline:2px solid var(--you);outline-offset:2px}
.g-bol>summary .ic{font-size:18px;color:var(--accent)}
.g-bol-c{padding:0 12px 12px}
.g-bol-t{margin:0 0 8px;font-size:14px;font-weight:600}
.g-bol-txt{margin:0;padding:10px 12px;border-radius:10px;background:var(--code-bg);border:1px solid var(--line);font-size:14px;line-height:1.5;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text}
.g-bol-n{margin:4px 0 0;font-size:11.5px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.g-bol-acoes{flex-wrap:wrap}
.g-bol-acoes .btn{flex:1 1 130px;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px}
.g-bol-acoes .btn .ic{font-size:17px}
.g-bol-st{margin:8px 0 0;font-size:12.5px;color:var(--ink-dim)}
.g-bol-st:empty{margin:0}
.g-bol [hidden]{display:none}
.g-rodape{margin-top:18px;padding-top:12px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 14px}
.g-rodape a{color:var(--ink-dim);text-decoration:none}
.g-rodape a:hover{color:var(--accent)}
.g-fontes{list-style:none;margin:10px 0 0;padding:0;font-size:12.5px}
.g-fontes li{padding:9px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.g-fontes a{color:var(--ink-dim);text-decoration:underline;text-underline-offset:2px}
.g-fontes .muted{font-size:11.5px}
.auton{margin-top:10px;padding:11px 12px;border-radius:13px;background:rgba(234,162,60,.08);border:1px solid rgba(234,162,60,.25)}
.auton .big{font-family:"IBM Plex Mono",monospace;font-size:21px;font-weight:600;color:var(--energy)}
.sens-wrap{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.sens-pill{font-size:11px;padding:3px 8px;border-radius:999px;background:var(--sel-bg);border:1px solid var(--sel-br);color:var(--accent-on-tint);font-family:"IBM Plex Mono",monospace}
.chart-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;margin:12px 0 5px;font-family:"IBM Plex Mono",monospace}
/* mini-gráfico do detalhe (grafico.js): o SVG estica (preserveAspectRatio none, 1 unidade = 1 px na vertical) e os
   textos ficam em HTML por cima, em % na horizontal — nada de letra esticada; cabe em 375 px */
.gf{margin:0}
.gf-caixa{position:relative;height:110px;background:var(--tint-1);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.gf-caixa svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.gf-r{position:absolute;font:600 10px/12px "IBM Plex Mono",monospace;white-space:nowrap;pointer-events:none;padding:0 2px;border-radius:3px;background:var(--graf-rotulo-bg)}
.gf-eixo{position:relative;height:13px;margin-top:3px;font:10px/13px "IBM Plex Mono",monospace;color:var(--muted)}
.gf-eixo span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.gf-eixo .e0{transform:none}
.gf-eixo .e1{transform:translateX(-100%)}
.gf-eixo .ag{color:var(--ink-dim);font-weight:600}
.gf-chuva{position:relative;height:40px;margin:4px 0 0;padding:0;list-style:none;font:10px/13px "IBM Plex Mono",monospace}
.gf-chuva li{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:0}
.gf-chuva .gf-chuva-rot{left:0;align-items:flex-end;padding-right:6px;color:var(--muted);text-align:right}
.gf-bar{display:flex;align-items:flex-end;justify-content:center;width:100%;height:13px;border-bottom:1px solid var(--line-2)}
.gf-bar i{display:block;width:calc(100% - 6px);max-width:20px;background:var(--chuva-barra);border-radius:2px 2px 0 0}
.gf-mm{color:var(--ink-dim);font-weight:600}
.gf-pr{color:var(--muted)}
.gf-cap{font-size:11px;color:var(--muted);margin:5px 0 0}
.gf-cap a{color:var(--ink-dim);text-decoration:underline;text-underline-offset:2px}
.gf-cap a:hover{color:var(--accent)}
/* pluviômetro: só a faixa da chuva prevista, com a hora de cada barra */
.gf-so .gf-chuva{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;height:auto}
.gf-so .gf-chuva li{position:static;padding:5px 0;border-radius:10px;background:var(--tint-1);border:1px solid var(--line)}
.gf-so .gf-bar{height:16px}
.gf-h{color:var(--muted);margin-bottom:2px}
/* bloco "Conectar o nó" (detalhe da estação SUA) */
.conecta{padding:12px;border-radius:14px;background:var(--sel-bg);border:1px solid var(--sel-br)}
.cx-intro{margin:0 0 8px;font-size:12.5px;color:var(--ink-dim)}
.cx-passos{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px;font-size:13px}
.cx-passos li::marker{color:var(--accent);font-weight:700}
.cx-cmd{display:flex;align-items:center;gap:8px;margin-top:5px;padding:7px 8px 7px 10px;border-radius:10px;background:var(--code-bg);border:1px solid var(--line)}
.cx-cmd code{flex:1;min-width:0;font-size:12px;color:var(--ink);overflow-wrap:anywhere}
/* argumento curto nunca quebra por dentro ("--set" não vira "-" + "-set"); só tokens longos (PSK) quebram em qualquer ponto */
.cx-cmd code .tk{white-space:nowrap}
.cx-cmd .mini{flex:0 0 auto}
.cx-link{color:var(--accent-on-tint);font-family:"IBM Plex Mono",monospace;font-weight:600}
.cx-dica{margin:8px 0 0;font-size:12px;color:var(--muted)}
.cx-dica code{font-size:11.5px;color:var(--ink-dim)}
.cx-chave{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.cx-chave .btn{flex:1 1 140px;font-size:13px;padding:9px 10px}
.cx-teste{margin:8px 0 0;font-size:12.5px;min-height:1em;color:var(--ink-dim)}
.cx-teste:empty{display:none}
.cx-teste.ok{color:var(--ok)} .cx-teste.nao,.cx-teste.sumiu{color:var(--crit)} .cx-teste.erro,.cx-teste.sem{color:var(--warn)}
/* status da chave: o ícone (check / x, os mesmos do sprite) diz o resultado sem depender só da cor e sem emoji no texto */
.cx-teste.ok::before,.cx-teste.nao::before{content:"";display:inline-block;width:1.1em;height:1.1em;margin-right:.35em;vertical-align:-.2em;background:currentColor;
  -webkit-mask:var(--cx-ic) center/contain no-repeat;mask:var(--cx-ic) center/contain no-repeat}
.cx-teste.ok{--cx-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.cx-teste.nao{--cx-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E")}
/* forma de conexão: cartões de rádio (cadastro e troca) */
.cx-fs{border:0;margin:0;padding:0;min-width:0}
.cx-fs legend{padding:0;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--ink-dim)}
.cx-opcoes{display:grid;gap:8px}
/* .cx-fs na frente: o ".field label/input" dos modais não pode virar o cartão em bloco nem o rádio em caixa de texto */
.cx-fs .cx-op{display:flex;gap:10px;align-items:flex-start;margin:0;padding:11px 12px;border-radius:13px;cursor:pointer;font-weight:400;color:var(--ink);background:var(--tint-1);border:1px solid var(--vidro-br);transition:.15s}
.cx-fs .cx-op:hover{border-color:var(--line-3)}
.cx-fs .cx-op.off{cursor:not-allowed;opacity:.62}
.cx-fs .cx-op.off:hover{border-color:var(--vidro-br)}
.cx-fs .cx-op:has(input:checked){border-color:var(--accent);background:var(--sel-bg)}
.cx-fs .cx-op:focus-within{outline:2px solid var(--you);outline-offset:2px}
.cx-fs .cx-op input[type=radio]{flex:0 0 auto;width:18px;height:18px;margin:2px 0 0;padding:0;border:0;background:none;accent-color:var(--accent)}
.cx-op-t{display:block;min-width:0;font-size:14px}
.cx-op-t b{font-family:"Chakra Petch",sans-serif;font-size:15px}
.cx-op-d{display:block;font-size:12.5px;color:var(--ink-dim);margin-top:1px}
.cx-op-d b{font-family:inherit;font-size:inherit}
.tag.rec{color:var(--sua-ink);background:var(--sua-bg)}
.cx-noid{margin-top:10px}
.cx-noid[hidden]{display:none}
.cx-noid label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--ink-dim)}
.cx-noid input{width:100%;font:inherit;font-family:"IBM Plex Mono",monospace;font-size:16px;color:var(--ink);padding:10px 12px;border-radius:11px;background:var(--tint-1);border:1px solid var(--vidro-br)}
.cx-noid input:focus{outline:none;border-color:var(--accent);background:var(--sel-bg)}
.cx-noid input[aria-invalid="true"]{border-color:var(--crit)}
.cx-ajuda{font-size:12px;color:var(--muted);margin:6px 0 0}
.cx-ajuda code,.cx-intro code,.ger-avisos code,.cx-dados code{font-size:11.5px;color:var(--ink-dim);overflow-wrap:anywhere}
.cx-erro{font-size:12.5px;color:var(--crit);margin:6px 0 0}
.cx-erro:empty{display:none}
.cx-wifi{margin-top:10px}
.cx-troca{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-dim)}
.cx-troca p{margin:0}
.cx-troca a,.chave-prox a,.conecta a:not(.btn){color:var(--accent-on-tint)}
/* estado do Wi-Fi direto (detalhe da estação) */
.cx-estado{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.cx-badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.3px;padding:2px 9px;border-radius:999px;background:var(--tint-2);color:var(--ink)}
.cx-badge.pendente{background:rgba(237,181,49,.18);color:var(--warn)}
.cx-badge.ativa{background:rgba(86,197,125,.18);color:var(--ok)}
.cx-badge.revogada{background:rgba(229,86,77,.18);color:var(--crit)}
.cx-dados{margin:8px 0 0;display:grid;gap:6px;font-size:12.5px}
.cx-dados div{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr);gap:8px}
.cx-dados dt{color:var(--muted)}
.cx-dados dd{margin:0;min-width:0;overflow-wrap:anywhere}
.diag{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:12.5px}
.diag li{display:flex;justify-content:space-between;gap:10px;padding:6px 9px;border-radius:9px;background:var(--tint-1)}
.diag li b{font-family:"IBM Plex Mono",monospace}
.diag-prob{color:var(--warn);background:rgba(237,181,49,.07)!important}
.diag-normal{color:var(--muted)}
.diag-ok{color:var(--ok)}
#av-rot-msg:empty{display:block;margin:0;min-height:0}   /* região viva fica na árvore de acessibilidade mesmo vazia */
.cx-confirma{margin-top:10px;padding:10px 12px;border-radius:12px;background:rgba(237,181,49,.08);border:1px solid rgba(237,181,49,.35);font-size:12.5px;color:var(--ink-dim)}
.cx-confirma p{margin:0}
.cx-confirma:focus{outline:2px solid var(--you);outline-offset:2px}
/* configuração do nó (mostrada 1x) + gerador */
.mq{margin:14px 0 6px;padding:12px;border-radius:14px;background:var(--sel-bg);border:1px solid var(--sel-br)}
.mq h3,.ger h3{margin:0 0 6px;font-size:16px}
.mq-estado{margin:0 0 8px;font-size:12.5px;color:var(--ink-dim)}
.mq-cred{margin:0;display:flex;flex-direction:column;gap:6px}
.mq-l{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;align-items:center;padding:8px 10px;border-radius:10px;background:var(--code-bg);border:1px solid var(--line)}
.mq-l dt{grid-column:1;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.mq-l dd{grid-column:1;margin:0;min-width:0}
.mq-l dd code{font-size:13px;color:var(--accent-on-tint);overflow-wrap:anywhere;word-break:break-all}
.mq-l .mini{grid-column:2;grid-row:1/span 2}
.mq-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.mq-acoes .btn{flex:1 1 140px;font-size:13px;padding:9px 10px}
.ger{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-2)}
.ger-sit{margin-top:8px}
.ger-sit .check{margin:4px 0;font-weight:400}
.ger .field{margin:10px 0}
.ger-nova[hidden]{display:none}
.ger-priv[hidden],.ger-ip[hidden],.ger-com[hidden]{display:none}
.ger-tipo{margin-top:10px}
.ger-tipo .check{margin:4px 0;font-weight:400}
.ger-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ger-2 .field{margin:0}
.ger-slot{margin:10px 0 0;font-size:12.5px;color:var(--ink-dim)}
.ger-slot:empty{display:none}
.ger-prob{margin:10px 0 0;padding-left:18px;font-size:12.5px}
.ger-prob .erro{color:var(--crit)} .ger-prob .aviso{color:var(--warn)}
.ger-cmds{margin:10px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:10px;font-size:13px}
.ger-cmds li::marker{color:var(--accent);font-weight:700}
.ger-cmds li.bloq{color:var(--muted)}
.ger-cmds li.bloq::marker{color:var(--crit)}
.ger-bloq{margin:4px 0 0;padding:7px 10px;border-radius:10px;font-size:12.5px;color:var(--crit);background:rgba(229,86,77,.08);border:1px solid rgba(229,86,77,.3)}
.ger-avisos{margin:12px 0 0;padding:10px 12px 10px 28px;border-radius:12px;background:rgba(237,181,49,.07);border:1px solid rgba(237,181,49,.28);font-size:12px;color:var(--ink-dim);display:flex;flex-direction:column;gap:4px}
.modal-card.wide{width:min(760px,100%)}
.modal-card h3{font-family:"Chakra Petch",sans-serif}
/* utilidades */
.linkbtn{border:0;background:none;padding:0;margin:0;color:var(--accent-on-tint);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.linkbtn:focus-visible{outline:2px solid var(--you);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.en{color:var(--muted);font-weight:400}
/* Editar: chave da estação + Configuração avançada (desabilitada até conferir) */
.dono{margin:6px 0 14px;padding:12px;border-radius:14px;background:var(--sel-bg);border:1px solid var(--sel-br)}
.dono .field{margin:0 0 4px}
.dono .field[hidden]{display:none}
.chave-linha{display:flex;gap:8px;align-items:stretch}
.chave-linha input{flex:1;min-width:0}
.chave-linha .btn{flex:0 0 auto}
.dono .cx-teste{margin:6px 0 8px}
.dono .g-alerta{margin:6px 0 10px;font-size:12.5px}
.dono .g-alerta[hidden]{display:none}
.btn.av-abre{margin-top:4px;font-size:14.5px;padding:11px 14px}
/* liberada = verde (igual ao botão principal): a diferença p/ a desabilitada não pode depender só da opacidade */
.btn.av-abre:not(:disabled){background:linear-gradient(135deg,var(--accent-fill),var(--accent-fill-2));color:var(--on-accent);border-color:transparent;box-shadow:var(--accent-glow)}
.dono .cx-ajuda{margin-top:6px}
/* Configuração avançada: seções recolhíveis (details/summary nativos) */
.av-sec{margin:10px 0;border:1px solid var(--vidro-br);border-radius:14px;background:var(--tint-1)}
.av-sec[open]{border-color:var(--sel-br)}
.av-sec>summary{position:relative;cursor:pointer;padding:12px 40px 12px 14px;list-style:none;border-radius:14px}
.av-sec>summary::-webkit-details-marker{display:none}
.av-sec>summary::after{content:"";position:absolute;right:17px;top:50%;width:8px;height:8px;border-right:2px solid var(--ink-dim);border-bottom:2px solid var(--ink-dim);transform:translateY(-70%) rotate(45deg);transition:transform .15s}
.av-sec[open]>summary::after{transform:translateY(-25%) rotate(225deg)}
.av-sec>summary:focus-visible{outline:2px solid var(--you);outline-offset:2px}
.av-t{display:block;font-family:"Chakra Petch",sans-serif;font-weight:600;font-size:15.5px;color:var(--ink)}
.av-s{display:block;font-size:12.5px;color:var(--muted)}
.av-c{padding:0 14px 14px}
.av-c .form-actions{margin-top:12px}
.av-int{margin-top:12px}
.av-int .check{margin:4px 0;font-weight:400;align-items:flex-start}
/* configuração do nó: passos, cadeados, checklist por tela do app */
.mq-passo{margin:12px 0 0;padding:12px;border-radius:13px;background:var(--code-bg);border:1px solid var(--line)}
.mq-passo h4{margin:0 0 6px;font-family:"Chakra Petch",sans-serif;font-size:15px;display:flex;align-items:center;gap:8px;color:var(--ink)}
.mq-n{display:inline-grid;place-items:center;flex:0 0 auto;width:24px;height:24px;border-radius:8px;font-size:13px;color:var(--on-accent);background:linear-gradient(135deg,var(--accent-fill),var(--accent-fill-2))}
.mq-guarda{border-color:rgba(237,181,49,.55);background:rgba(237,181,49,.07)}
.mq-guarda:focus{outline:2px solid var(--you);outline-offset:2px}
.mq-chk{margin:12px 0 2px;font-weight:600;color:var(--ink)}
.mq-chk input:disabled+span{opacity:.5}
.mq-guarda .g-alerta{margin-top:8px}
.mq-sit .check,.mq-tls .check,.mq-pub2{margin:5px 0;font-weight:400;align-items:flex-start}
.mq-sit input,.mq-tls input,.mq-pub2 input{flex:0 0 auto;margin-top:2px}
.mq-tipo{margin-top:12px}
.mq-tipo .cx-op-t b{font-size:14.5px}
.mq-tls{margin:10px 0 2px}
.mq-nova[hidden],.mq-priv[hidden],.mq-pub2[hidden],.ger-priv[hidden],.mq-velho[hidden]{display:none}
.mq-guarda .cx-ajuda.erro{color:var(--warn);font-weight:600}
.mq-velho{font-size:12.5px;color:var(--ink)}
.mq-tela i{font-style:italic;color:var(--ink)}
.tag.atual{color:var(--ink);background:var(--tint-2);border:1px solid var(--line-2)}
.chave-privada{margin:8px 0 2px;font-size:12px}
.cad{vertical-align:-3px;margin-right:3px}
.cad.verde{color:var(--cad-verde)} .cad.amarelo{color:var(--cad-amarelo)}
.mq-slot{margin:10px 0 0;padding:9px 11px;border-radius:11px;background:var(--sel-bg);border:1px solid var(--sel-br);font-size:13px;color:var(--ink-dim)}
.mq-slot:empty{display:none}
.mq-slot b{font-size:15px;color:var(--accent-on-tint)}
.mq-slot .erro{color:var(--crit)}
.mq-tela{margin-top:10px;padding:10px 11px;border-radius:12px;background:var(--tint-1);border:1px solid var(--line)}
.mq-tela h5{margin:0 0 6px;font-family:"Chakra Petch",sans-serif;font-size:14.5px;display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;color:var(--ink)}
.mq-tela h5 .muted{font-family:"IBM Plex Sans",sans-serif;font-size:12px;font-weight:400}
.mq-itens{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.mq-itens>li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;align-items:start}
.mq-itens>li>.check{grid-column:1;margin:0;align-items:flex-start;font-size:13px;color:var(--ink-dim);font-weight:400;cursor:pointer}
.mq-itens>li>.check input{flex:0 0 auto;margin-top:1px}
.mq-itens>li>.check:has(input:checked) span{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line-2)}
.mq-itens>li>.mini{grid-column:2;grid-row:1;align-self:start}
.mq-itens>li>.cx-ajuda{grid-column:1/-1;margin:0 0 0 27px;font-size:11.5px}
.mq-itens>li.mq-falta{display:block;font-size:12.5px;color:var(--warn)}
.mq-tela code{font-size:12.5px;color:var(--accent-on-tint);overflow-wrap:anywhere;word-break:break-all}
.mq-tela code.mq-big{font-size:17px;font-weight:700}
.blk{display:inline-block;margin-right:.45em}
.blk:last-child{margin-right:0}
.mq-mais,.mq-cli{margin-top:12px;border:1px solid var(--vidro-br);border-radius:12px;background:var(--tint-1)}
.mq-mais>summary,.mq-cli>summary{cursor:pointer;padding:10px 12px;font-weight:600;font-size:13.5px;color:var(--ink-dim)}
.mq-mais>summary:focus-visible,.mq-cli>summary:focus-visible{outline:2px solid var(--you);outline-offset:2px}
.mq-mais>div,.mq-cli>div{padding:0 12px 12px}
.mq-cli .ger{margin-top:0;padding-top:0;border-top:0}
.mq-seg{margin:0;display:grid;gap:6px;font-size:12.5px}
.mq-seg div{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr);gap:8px}
.mq-seg dt{color:var(--ink);font-weight:600}
.mq-seg dd{margin:0;color:var(--ink-dim)}
.fecha-falta{margin:4px 0 8px;color:var(--warn)}
.fecha-falta[hidden],#lbl-guardei[hidden]{display:none}
/* a barra é PREENCHIMENTO: usa os sinais (no claro o --ok/--warn/--crit de texto é escuro demais para barra) */
.regua-barra{--ok:var(--sinal-ok);--warn:var(--sinal-atencao);--crit:var(--sinal-inundacao);position:relative;height:12px;border-radius:999px;margin:14px 0 4px;background:linear-gradient(90deg,var(--ok) 0 63%,var(--warn) 63% 85%,var(--crit) 85% 100%);opacity:.85}
.regua-barra i{position:absolute;top:-4px;width:3px;height:20px;border-radius:2px;background:#fff;box-shadow:0 0 6px rgba(0,0,0,.6)}

/* ---------- "você" (os marcadores das estações estão no fim: MARCADORES) ---------- */
.voce{position:relative;width:18px;height:18px;transform:translate(-50%,-50%)}
.voce::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--you);border:3px solid #fff;box-shadow:0 0 0 2px rgba(0,0,0,.25)}
.voce::after{content:"";position:absolute;inset:-14px;border-radius:50%;background:rgba(78,163,255,.25);animation:onda 2.2s infinite}
@keyframes onda{from{transform:scale(.4);opacity:.9}to{transform:scale(1.4);opacity:0}}
.leaflet-div-icon{background:none;border:0}

/* ---------- modais (cadastro / chave) ---------- */
.modal[hidden]{display:none!important}
.modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:var(--scrim);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);padding:12px}
.modal-card{width:min(620px,100%);max-height:94dvh;overflow:auto;padding:22px 18px 18px;position:relative;border-radius:20px;background:var(--vidro-brilho),var(--vidro-forte)}
.modal-card.narrow{width:min(460px,100%)}
.modal-card h2{margin:0 0 4px;font-size:20px;padding-right:36px}
.x{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:9px;cursor:pointer;background:var(--tint-2);border:1px solid var(--vidro-br);display:grid;place-items:center;padding:0;color:var(--ink)}
.x .ic{width:18px;height:18px}
.field{margin:14px 0}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--ink-dim)}
.field input,.field select{width:100%;font:inherit;font-size:16px;color:var(--ink);padding:10px 12px;border-radius:11px;background:var(--tint-1);border:1px solid var(--vidro-br)}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent);background:var(--sel-bg)}
.field select option{background:var(--bg-2);color:var(--ink)}
.minimap{height:210px;border-radius:13px;overflow:hidden;border:1px solid var(--vidro-br);background:var(--map-bg)}
.pos-row{margin-top:6px} #pos-readout{font-size:12.5px;color:var(--ink-dim)}
.chips-groups{display:flex;flex-direction:column;gap:12px}
.cg-title{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin:0 0 7px}
.chip-row{display:flex;flex-wrap:wrap;gap:7px}
.schip{font-size:12.5px;cursor:pointer;padding:7px 11px;border-radius:999px;color:var(--ink-dim);background:var(--tint-1);border:1px solid var(--vidro-br);display:inline-flex;gap:6px;align-items:baseline}
.schip .g{font-size:10.5px;color:var(--muted)}
.schip.on{background:linear-gradient(135deg,var(--accent-fill),var(--accent-fill-2));color:var(--on-accent);border-color:transparent}
.schip.on .g{color:#063d20}
.form-actions{display:flex;align-items:center;gap:10px;margin-top:18px}
.form-actions .spacer{flex:1}
.form-msg{margin-top:10px;font-size:13px;min-height:18px}
.form-msg.err{color:var(--crit)} .form-msg.ok{color:var(--ok)}
.chave-box{display:flex;gap:8px;align-items:center;margin:14px 0 10px;padding:12px;border-radius:12px;background:var(--sel-bg);border:1px dashed var(--sel-br)}
#chave-val{flex:1;font-size:14px;word-break:break-all;color:var(--accent-on-tint)}
.check{display:flex;gap:9px;align-items:center;font-size:13.5px;color:var(--ink-dim);margin:8px 0 16px;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--accent)}

/* ---------- desktop: gaveta vira painel lateral ---------- */
@media (min-width:900px){
  :root{--peek:0px}
  .topbar{left:12px;right:auto;width:380px}
  .demo-flag{top:calc(18px + env(safe-area-inset-top));left:calc(50% + 196px)}
  .gaveta{left:12px;right:auto;bottom:12px;top:calc(var(--topo) + 10px);width:380px;height:auto;border-radius:20px;border-bottom:1px solid var(--vidro-br);transform:none!important}
  .alca{display:none}
  .gaveta-corpo{padding-top:14px}
  .legenda{left:404px;bottom:16px}
  /* empilha ACIMA do zoom (+/−) do Leaflet, que fica no canto inferior direito sobre a atribuição */
  .fab-col{bottom:108px;right:10px}
  .add-txt{display:inline}
}
@media (max-width:899px){
  .leaflet-control-zoom{display:none}
  .add-txt{display:inline}
  /* atribuição do OSM (obrigatória) fica acima da gaveta, não escondida embaixo dela */
  .leaflet-bottom{bottom:calc(var(--peek) + env(safe-area-inset-bottom))}
  .legenda,.fab-col{bottom:calc(var(--peek) + 26px + env(safe-area-inset-bottom))}
}
@media (max-width:360px){ .add-txt{display:none} .brand-txt span{display:none} }
@media (max-width:420px){ .ger-2{grid-template-columns:1fr} .cx-dados div,.mq-seg div{grid-template-columns:1fr;gap:0} .av-c{padding:0 10px 12px} .mq-passo{padding:10px} .mq-tela{padding:9px} }
/* celular: comando longo ocupa a largura toda e o "copiar" desce para baixo dele */
@media (max-width:560px){
  .ger-cmds{padding-left:18px}
  .ger-cmds .cx-cmd{flex-direction:column;align-items:stretch;gap:6px}
  .ger-cmds .cx-cmd .mini{align-self:flex-end}
  .modal-card.wide{padding:18px 12px 14px}
  .mq{padding:10px}
}
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important} }

/* =====================================================================
   MARCADORES (web/marcadores.js) — forma = categoria; cor = dado
   ===================================================================== */

/* ---------- ícone do sprite na interface ---------- */
.ic{width:1em;height:1em;flex:0 0 auto;display:inline-block;vertical-align:-.14em;overflow:visible}

/* ---------- base (sem camada de dados) ---------- */
.mk{--s:26px;position:relative;width:var(--s);height:var(--s);transform:translate(-50%,-50%);cursor:pointer;transition:transform .15s ease}
.mk-svg{display:block;width:100%;height:100%;overflow:visible}
.mk-halo{fill:none;stroke:var(--mk-halo);stroke-width:5;stroke-linejoin:round}
.mk-plate{fill:var(--mk-bg);stroke:var(--mk-ring);stroke-width:1.8;stroke-linejoin:round}
.mk-gl{color:var(--mk-ink)}
/* alvo de toque/clique >= 32 px em TODO degrau de zoom (WCAG 2.5.8 pede 24). Span próprio: ::before é o anel
   de seleção e ::after o pulso do alerta. */
.mk-hit{position:absolute;left:50%;top:50%;width:max(100%,32px);height:max(100%,32px);transform:translate(-50%,-50%);border-radius:50%}

.c-inmet,.c-metar{--s:26px}
.c-cem{--s:22px}                       /* 142 pontos só-chuva: o mais discreto */
.c-ana{--s:28px}                       /* losango parece menor que o círculo na mesma caixa */
.c-abe{--s:24px}                       /* sensor cidadão (terceiros): um pouco menor que a estação oficial */
.c-ana.c-mare{--s:27px}                /* maré: a família da régua (status, alerta), placa triangular */

/* ---------- COMUNIDADE ---------- */
.mk.c-com{--s:34px;filter:var(--mesh-glow)}
.c-com .mk-halo{stroke:var(--mesh-halo);stroke-width:5.2}
.c-com .mk-plate{fill:var(--mesh);stroke:var(--mesh-edge);stroke-width:2.2}
.c-com .mk-gl{color:var(--mesh-ink)}
/* SUA: anel externo (forma) + etiqueta de TEXTO (não só cor) */
.mk-sua-h{fill:none;stroke:var(--mesh-halo);stroke-width:5}
.mk-sua-r{fill:none;stroke:var(--sua-anel);stroke-width:2.2;stroke-linejoin:round}
.mk-tag{position:absolute;z-index:2;left:calc(100% - 9px);top:-7px;font:700 9.5px/1 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:.6px;
  padding:3px 5px 2px;border-radius:999px;background:var(--sua-bg);color:var(--sua-ink);box-shadow:0 0 0 1.5px var(--mk-bg),0 1px 3px rgba(0,0,0,.35);pointer-events:none}
/* sem leitura recente: escudo vazado e tracejado (forma e desenho continuam = identidade), relógio no canto */
.c-com.off{filter:none}
.c-com.off .mk-plate{fill:var(--mk-bg);stroke:var(--mesh-off);stroke-width:2;stroke-dasharray:3.4 2.6}
.c-com.off .mk-gl{color:var(--mesh-off)}
.mk-rel{position:absolute;z-index:2;right:-5px;bottom:-4px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:11px;
  background:var(--mk-bg);color:var(--ink-dim);box-shadow:0 0 0 1.5px var(--muted);pointer-events:none}

/* ---------- RÉGUA (ANA): status sem depender só de cor: aro → cheio amarelo/vermelho + "!" + pulso ---------- */
.st-normal{--s-cor:var(--sinal-ok)} .st-sem_cota{--s-cor:var(--sinal-agua)} .st-sem_dado{--s-cor:var(--muted)}
.st-atencao{--s-cor:var(--sinal-atencao);--bdg:#6b4700} .st-alerta{--s-cor:var(--sinal-alerta);--bdg:#8a3a00} .st-inundacao{--s-cor:var(--sinal-inundacao);--bdg:#a3160f}
.c-ana .mk-plate{stroke:var(--s-cor,var(--sinal-agua));stroke-width:2.4}
.c-ana.st-sem_dado .mk-plate,.c-ana.desat .mk-plate{stroke-dasharray:3.2 2.6}
.c-ana.st-sem_dado .mk-gl{color:var(--muted)}
.c-ana.st-atencao .mk-plate{fill:var(--sinal-atencao);stroke:var(--aro-atencao);stroke-width:2}
.c-ana.st-atencao .mk-gl{color:#1b1300}
.c-ana.st-alerta .mk-plate{fill:var(--sinal-alerta);stroke:var(--aro-alerta);stroke-width:2}
.c-ana.st-alerta .mk-gl{color:#1f0d00}
.c-ana.st-inundacao .mk-plate{fill:var(--sinal-inundacao);stroke:var(--aro-inundacao);stroke-width:2}
.c-ana.st-inundacao .mk-gl{color:#ffffff}
.mk-bdg{position:absolute;z-index:2;right:-5px;top:-5px;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;font-size:11px;
  background:#ffffff;color:var(--bdg);box-shadow:0 0 0 1.5px var(--bdg),0 1px 3px rgba(0,0,0,.4);pointer-events:none}
/* inundação: anel pulsando; com "reduzir movimento" o anel fica PARADO (o alerta não some) */
.c-ana.st-inundacao::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--sinal-inundacao);pointer-events:none;
  animation:mk-pulsa 1.8s ease-out infinite}
@keyframes mk-pulsa{from{transform:scale(.75);opacity:1}to{transform:scale(1.35);opacity:0}}

/* ---------- selecionado (detalhe aberto) e foco do teclado: anel azul de "ação/você" ---------- */
.mk.sel{transform:translate(-50%,-50%) scale(1.14)}
.mk.sel::before,.leaflet-marker-icon:focus-visible .mk::before,
.mkv.sel .mk-b::before,.leaflet-marker-icon:focus-visible .mkv .mk-b::before{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2.5px solid var(--you);box-shadow:0 0 0 2px var(--mk-bg);pointer-events:none}
.leaflet-marker-icon:focus-visible{outline:none}
.leaflet-marker-icon:hover .mk:not(.sel){transform:translate(-50%,-50%) scale(1.08)}

/* =====================================================================
   COM CAMADA: selo da categoria NO PONTO + pílula de valor à direita.
   comunidade: selo verde SEMPRE + pílula pintada com a cor do valor (texto --t por contraste)
   oficiais:   selo pintado com a cor do valor (a forma continua dizendo a categoria) + pílula neutra
   ===================================================================== */
.mkv{--b:24px;--c:#34d27a;--t:#06140b;position:relative;display:inline-flex;align-items:center;white-space:nowrap;cursor:pointer;
  transform:translate(calc(var(--b) / -2),-50%);transform-origin:calc(var(--b) / 2) 50%;transition:transform .15s ease}
.mkv .mk-b{position:relative;flex:0 0 auto;width:var(--b);height:var(--b);z-index:1}
.mkv-t{display:inline-flex;align-items:center;gap:3px;height:22px;margin-left:calc(var(--b) * -.42);padding:0 9px 0 calc(var(--b) * .42 + 5px);
  border-radius:999px;font:600 12.5px/1 "IBM Plex Mono",ui-monospace,monospace;background:var(--mk-bg);color:var(--mk-ink);
  border:1.5px solid var(--mk-ring);box-shadow:0 0 0 1px var(--bolha-contorno),var(--mk-sh)}
.mkv-t i{font-style:normal;font-size:11px;opacity:.8}
.mkv-t .seta{display:inline-block;font-size:12px;line-height:1}
.mkv:not(.c-com):not(.c-ana) .mk-plate{fill:var(--c)}
.mkv:not(.c-com):not(.c-ana) .mk-gl{color:var(--t)}
.mkv.c-inmet,.mkv.c-metar{--b:22px} .mkv.c-cem{--b:20px} .mkv.c-ana{--b:26px} .mkv.c-abe{--b:20px}
.mkv.c-com{--b:30px;filter:var(--mesh-glow)}
.mkv.c-com .mkv-t{height:25px;font-size:13.5px;background:var(--c);color:var(--t);border:2px solid var(--mesh-edge);
  box-shadow:0 0 0 1px var(--bolha-contorno),0 3px 10px rgba(0,0,0,.3)}
/* comunidade sem essa variável: selo + travessão, compacta */
.mkv.c-com.sem{filter:none}
.mkv.c-com.sem .mkv-t{height:22px;font-size:12px;background:var(--mk-bg);color:var(--muted);border:1.5px solid var(--mk-ring)}
/* sem leitura recente: último valor esmaecido, tracejado, relógio — e FORA da mancha */
.mkv.off{filter:none}
.mkv.off .mkv-t,.mkv.c-com.off .mkv-t{background:var(--mk-bg);color:var(--muted);border:1.5px dashed var(--muted)}
.mkv .mk-tag{left:auto;right:-9px;top:-9px}
.mkv .mk-rel{right:-7px;bottom:-6px}
/* régua na camada Rio: aro/cheio de status no losango + pílula com borda de status */
.mkv.c-ana .mkv-t{border:2px solid var(--s-cor,var(--sinal-agua))}
.mkv.sel{transform:translate(calc(var(--b) / -2),-50%) scale(1.1)}
/* pílulas que se encobrem (MK.evitaColisao em marcadores.js): a de menor prioridade vai para a ESQUERDA do selo;
   se ainda bate, vira só o selo. O selo continua exatamente no ponto. */
.mkv.esq{flex-direction:row-reverse;transform:translate(calc(-100% + var(--b) / 2),-50%);transform-origin:calc(100% - var(--b) / 2) 50%}
.mkv.esq .mkv-t{margin-left:0;margin-right:calc(var(--b) * -.42);padding:0 calc(var(--b) * .42 + 5px) 0 9px}
.mkv.esq .mk-tag{right:auto;left:-9px}
.mkv.esq.sel{transform:translate(calc(-100% + var(--b) / 2),-50%) scale(1.1)}
.mkv.colide .mkv-t{display:none}

/* =====================================================================
   DEGRAUS DE ZOOM — classe no container do mapa (MK.degrau(map) no zoomend do app.js; zoomSnap 0.5):
     z >= 10  (nada)    · cheio: comunidade 34, oficiais 26, régua 28, pluviômetro 22   ← o mapa abre em 10
     8 – 9.5  .z-medio  · comunidade 28, oficiais 20, régua 22, pluviômetro 17 (glifo ainda visível)
     < 8      .z-longe  · comunidade 24 (glifo de mapa), oficiais = "pino" de 11 px só com a FORMA
   ===================================================================== */
.z-medio .mk{--s:20px} .z-medio .mk.c-com{--s:28px} .z-medio .mk.c-ana{--s:22px} .z-medio .mk.c-cem{--s:17px} .z-medio .mk.c-abe{--s:18px}
.z-medio .mk-tag{font-size:8.5px;padding:2px 4px 1.5px;top:-7px}
.z-longe .mk{--s:11px} .z-longe .mk.c-com{--s:24px} .z-longe .mk.c-ana{--s:14px} .z-longe .mk.c-cem{--s:9px}
.z-longe .mk:not(.c-com) .mk-gl{display:none}
.z-longe .mk:not(.c-com) .mk-plate{fill:var(--mk-ring);stroke:none}
.z-longe .mk:not(.c-com) .mk-halo{stroke-width:8}
.z-longe .mk.c-ana .mk-plate{fill:var(--s-cor,var(--sinal-agua))}
.z-longe .mk-tag,.z-longe .mk-rel{display:none}
.z-longe .mk-bdg{transform:scale(.8);right:-8px;top:-8px}
/* com camada */
.z-medio .mkv{--b:18px} .z-medio .mkv.c-com{--b:26px} .z-medio .mkv.c-ana{--b:22px}
.z-medio .mkv-t{height:19px;font-size:11px;padding-right:6px} .z-medio .mkv-t i{display:none}
.z-medio .mkv.c-com .mkv-t{height:21px;font-size:11.5px}
.z-longe .mkv{--b:12px} .z-longe .mkv.c-com{--b:22px} .z-longe .mkv.c-ana{--b:14px}
.z-longe .mkv:not(.c-com) .mkv-t{display:none}           /* oficiais viram pinos na cor do valor: a mancha conta o resto */
.z-longe .mkv:not(.c-com) .mk-gl{display:none}
.z-longe .mkv:not(.c-com) .mk-halo{stroke-width:7}
.z-longe .mkv.c-com .mkv-t{height:17px;font-size:10.5px;padding-right:5px} .z-longe .mkv-t i{display:none}

/* =====================================================================
   GRUPOS (agrupamento no cliente, > 350 na tela) e BOLHAS (grade do servidor, zoom < 8) — MK.grupo
   contagem no centro + anel por categoria (proporcional); com camada, pílula com a mediana pintada (como a .mkv).
   Alerta de rio/maré na célula: aro vermelho + "!" (a régua em alerta nunca entra em grupo; a bolha só no zoom de grade)
   ===================================================================== */
.mkg{--s:32px;position:relative;display:inline-flex;align-items:center;white-space:nowrap;cursor:pointer;
  transform:translate(calc(var(--s) / -2),-50%);transform-origin:calc(var(--s) / 2) 50%;transition:transform .15s ease}
.mkg.g1{--s:28px} .mkg.g2{--s:33px} .mkg.g3{--s:39px} .mkg.g4{--s:45px}
.mkg-b{position:relative;z-index:1;flex:0 0 auto;width:var(--s);height:var(--s);border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--anel));box-shadow:0 0 0 1.5px var(--mk-halo),var(--mk-sh)}
.mkg-b::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--mk-bg);box-shadow:inset 0 0 0 1px var(--bolha-contorno)}
.mkg-n{position:relative;font:600 11.5px/1 "IBM Plex Mono",ui-monospace,monospace;color:var(--mk-ink);letter-spacing:-.3px}
.mkg.g3 .mkg-n,.mkg.g4 .mkg-n{font-size:12.5px}
.mkg-t{display:inline-flex;align-items:center;height:22px;margin-left:calc(var(--s) * -.38);padding:0 9px 0 calc(var(--s) * .38 + 5px);
  border-radius:999px;font:600 12px/1 "IBM Plex Mono",ui-monospace,monospace;background:var(--c,var(--mk-bg));color:var(--t,var(--mk-ink));
  border:1.5px solid var(--mk-ring);box-shadow:0 0 0 1px var(--bolha-contorno),var(--mk-sh)}
.mkg.al .mkg-b{box-shadow:0 0 0 2.5px var(--sinal-inundacao),0 0 0 4px var(--mk-halo),var(--mk-sh)}
.mkg .mk-bdg{--bdg:#a3160f;right:-5px;top:-5px}
.mkg .mk-hit{width:max(100%,36px);height:max(100%,36px)}
.leaflet-marker-icon:hover .mkg{transform:translate(calc(var(--s) / -2),-50%) scale(1.06)}
.leaflet-marker-icon:focus-visible .mkg-b::after{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2.5px solid var(--you);box-shadow:0 0 0 2px var(--mk-bg);pointer-events:none}
.z-longe .mkg.g1{--s:24px} .z-longe .mkg.g2{--s:29px}
/* pílulas que se encobrem (MK.evitaColisao): como na .mkv — vai para a esquerda ou some (a contagem fica) */
.mkg.esq{flex-direction:row-reverse;transform:translate(calc(-100% + var(--s) / 2),-50%);transform-origin:calc(100% - var(--s) / 2) 50%}
.mkg.esq .mkg-t{margin-left:0;margin-right:calc(var(--s) * -.38);padding:0 calc(var(--s) * .38 + 5px) 0 9px}
.leaflet-marker-icon:hover .mkg.esq{transform:translate(calc(-100% + var(--s) / 2),-50%) scale(1.06)}
.mkg.colide .mkg-t{display:none}

/* ---------- "você" (inalterado, só tokens) ---------- */

@media (prefers-reduced-motion:reduce){
  .mk,.mkv,.mkg{transition:none}
  .c-ana.st-inundacao::after{animation:none;transform:none;opacity:1;box-shadow:0 0 0 2px var(--mk-halo)}
}

/* =====================================================================
   BOTÃO CAMADAS + PAINEL + LEGENDA + "Agora na rede" (web/painel-camadas.js)
   ===================================================================== */

/* ---------- coluna de botões: Camadas fica ACIMA de Minha localização ---------- */
.fab{position:relative}
.fab-camadas{color:var(--ink);font-size:21px}
.fab-camadas[aria-expanded="true"]{color:var(--on-accent);background:linear-gradient(135deg,var(--accent-fill),var(--accent-fill-2));border-color:transparent}
/* selo da camada ligada: o ÍCONE da camada (não só uma bolinha); o texto vai no aria-describedby */
.fab-ativa{position:absolute;right:-6px;top:-6px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:13px;
  background:linear-gradient(135deg,var(--accent-fill),var(--accent-fill-2));color:var(--on-accent);box-shadow:0 0 0 2px var(--bg)}
.fab-ativa[hidden]{display:none}

/* ---------- painel ---------- */
.pc{position:fixed;z-index:30;right:64px;bottom:12px;width:348px;max-height:calc(100dvh - 24px);display:flex;flex-direction:column;
  border-radius:20px;overflow:hidden;transform-origin:100% 100%;animation:pc-entra .16s ease-out}
.pc[hidden]{display:none}
@keyframes pc-entra{from{opacity:0;transform:translateX(6px) scale(.98)}}
.pc-alca{display:none}
.pc-cab{display:flex;align-items:center;gap:9px;padding:8px 8px 2px 16px;font-size:19px;color:var(--accent)}
.pc-cab h2{margin:0;flex:1;font:600 17px/1.2 "Chakra Petch",sans-serif;color:var(--ink)}
.pc-x{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:17px;cursor:pointer;color:var(--ink-dim);background:var(--tint-1);border:1px solid var(--line)}
.pc-x:hover{color:var(--ink);border-color:var(--line-2)}
.pc-corpo{overflow:auto;overscroll-behavior:contain;padding:2px 16px 2px}
.pc-sec{border:0;margin:0 0 10px;padding:0;min-width:0}
.pc-leg{display:block;padding:0;margin:0 0 5px;font:600 11px/1.3 "IBM Plex Sans",sans-serif;text-transform:uppercase;letter-spacing:.7px;color:var(--muted)}
.pc-ajuda{margin:6px 0 0;font-size:12px;line-height:1.4;color:var(--muted)}
.pc-ajuda b{color:var(--ink-dim);font-weight:600}
.pc-ajuda a{color:var(--ink-dim)}

/* (a) dado no mapa — grade 3×2 de cartões-rádio (rádio nativo: setas do teclado trocam) */
.pc-camadas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pc-cam{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:54px;padding:5px 4px 4px;border-radius:13px;cursor:pointer;
  text-align:center;line-height:1.15;color:var(--ink-dim);background:var(--tint-1);border:1px solid var(--line);transition:border-color .12s,background .12s}
.pc-cam>.ic{font-size:19px;margin-bottom:1px}
.pc-cam b{font:600 12.5px/1.15 "IBM Plex Sans",sans-serif;color:inherit}
.pc-cam small{font:500 10.5px/1.1 "IBM Plex Mono",monospace;color:var(--muted)}
.pc-cam input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pc-cam:hover{border-color:var(--line-2)}
.pc-cam:has(input:checked){color:var(--ink);background:var(--sel-bg);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.pc-cam:has(input:checked)>.ic{color:var(--accent)}
.pc-cam:has(input:checked) small{color:var(--ink-dim)}
/* "escolhido" que não é só cor: ponto no canto */
.pc-cam:has(input:checked)::after{content:"";position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.pc-cam:has(input:focus-visible){outline:2px solid var(--you);outline-offset:2px}

/* dica contextual (Chuva sem pluviômetros, Rio sem réguas) */
.pc-dica{display:flex;gap:9px;align-items:center;margin-top:7px;padding:7px 8px 7px 10px;border-radius:12px;font-size:12.5px;line-height:1.35;color:var(--ink-dim);
  background:var(--sel-bg);border:1px dashed var(--sel-br)}
.pc-dica[hidden]{display:none}
/* com dica na tela, a linha de ajuda sai (a dica já explica) — o painel cabe inteiro a partir de ~680 px de altura */
.pc-sec:has(.pc-dica:not([hidden])) .pc-ajuda{display:none}
.pc-dica>.ic{font-size:18px;color:var(--accent)}
.pc-dica p{margin:0;flex:1}
.pc-dica b{color:var(--ink)}
.pc-mini{flex:0 0 auto;font:600 12px/1.15 "IBM Plex Sans",sans-serif;padding:8px 11px;border-radius:9px;cursor:pointer;color:var(--on-accent);border:0;
  background:linear-gradient(135deg,var(--accent-fill),var(--accent-fill-2))}

/* (b) estações — cabeçalho com atalhos */
.pc-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:5px}
.pc-sec-h .pc-leg{margin:0}
.pc-atalhos{display:flex;align-items:baseline;gap:4px;font-size:11.5px;color:var(--muted)}
.pc-atalhos button{border:0;background:none;padding:3px 2px;margin:0;font:inherit;font-weight:600;color:var(--ink-dim);cursor:pointer;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:2px}
.pc-atalhos button:hover{color:var(--accent);text-decoration-color:currentColor}
.pc-est{display:flex;flex-direction:column;gap:1px}
.pc-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto 40px;align-items:center;gap:10px;min-height:40px;padding:3px 8px 3px 6px;border-radius:12px;cursor:pointer;border:1px solid transparent}
.pc-row:hover{background:var(--tint-1)}
.pc-row:has(input:focus-visible){outline:2px solid var(--you);outline-offset:1px}
.pc-row .nm{min-width:0;line-height:1.2}
.pc-row .nm b{display:block;font:600 14px/1.2 "Chakra Petch",sans-serif;color:var(--ink)}
.pc-row .nm>span{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-row .nm em{font-style:normal;color:var(--ink-dim)}
.pc-row.fixa .nm>span{white-space:normal}
.pc-row .qt{font:600 12px/1 "IBM Plex Mono",monospace;color:var(--ink-dim);padding:4px 7px;border-radius:999px;background:var(--tint-2);min-width:26px;text-align:center}
.pc-row.fora .qt{color:var(--muted)}
.pc-row .qt-t{font-weight:500;color:var(--muted)}
/* desligada: a amostra esmaece; o NOME só perde um tom (opacidade .5 derrubava o texto para 3,3:1 no claro) */
.pc-row:has(.pc-sw:not(:checked)) .pc-mk{opacity:.5}
.pc-row:has(.pc-sw:not(:checked)) .nm b{color:var(--ink-dim)}
/* interruptor: checkbox nativo com role="switch"; o check no botão deixa claro sem depender da cor */
.pc-sw{appearance:none;-webkit-appearance:none;position:relative;justify-self:end;width:40px;height:24px;margin:0;border-radius:999px;cursor:pointer;
  background:var(--tint-2);border:1.5px solid var(--sw-borda);transition:background .15s,border-color .15s}
/* botão desligado com contorno: sem ele o botão (fundo do marcador) some no trilho (1,2:1) e o estado não se lê */
.pc-sw::before{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:var(--mk-bg);box-shadow:0 0 0 1.5px var(--sw-borda),0 1px 2px rgba(0,0,0,.3);transition:transform .15s}
.pc-sw:checked{background:var(--sw-on);border-color:var(--sw-on)}
.pc-sw:checked::before{transform:translateX(16px);box-shadow:0 1px 2px rgba(0,0,0,.3);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7f45' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.pc-sw:focus-visible{outline:none}
/* linha fixa da comunidade: não é controle, é informação */
.pc-row.fixa{cursor:default;background:var(--sel-bg);border-color:var(--sel-br);grid-template-columns:30px minmax(0,1fr) auto auto}
.pc-row.fixa:hover{background:var(--sel-bg)}
.pc-fixa{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--accent-on-tint);white-space:nowrap}
.pc-fixa .ic{font-size:13px}
/* amostra = o marcador do mapa (o painel É a legenda) */
.pc-mk{position:relative;width:30px;height:30px;display:grid;place-items:center}
.pc-mk .mk{transform:none;cursor:inherit;transition:none}
.pc-mk .mk.c-com{--s:30px}
.pc-mk .mk-hit{display:none}
.pc-cont{margin:4px 0 0;font:500 11.5px "IBM Plex Mono",monospace;color:var(--muted)}

/* (c) tema — controle segmentado (3 rádios) */
.pc-tema{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:3px;border-radius:13px;background:var(--tint-1);border:1px solid var(--line)}
.pc-tema label{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;height:38px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:600;color:var(--ink-dim)}
.pc-tema label .ic{font-size:16px}
.pc-tema input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pc-tema label:has(input:checked){color:var(--ink);background:var(--mk-bg);box-shadow:0 1px 3px rgba(0,0,0,.22),inset 0 0 0 1px var(--line-2)}
.pc-tema label:has(input:checked) .ic{color:var(--accent)}
.pc-tema label:has(input:focus-visible){outline:2px solid var(--you);outline-offset:1px}

.pc-rodape{margin:0;padding:8px 16px 10px;font-size:11.5px;color:var(--muted);border-top:1px solid var(--line)}
.pc-fundo{position:fixed;inset:0;z-index:29;background:var(--scrim)}
.pc-fundo[hidden]{display:none}
.pc-x:focus-visible,.pc-mini:focus-visible,.pc-atalhos button:focus-visible,.lg-off:focus-visible,.g-mini:focus-visible{outline:2px solid var(--you);outline-offset:2px}

/* ---------- legenda (só existe com camada ligada) ---------- */
.legenda[hidden]{display:none}
.legenda .lg-tit{align-items:center}
.lg-tit .lg-nome{display:inline-flex;align-items:center;gap:6px}
.lg-tit .lg-nome .ic{font-size:14px;color:var(--accent)}
.lg-off{display:inline-grid;place-items:center;width:26px;height:26px;margin:-4px -6px -4px 2px;border-radius:8px;border:0;cursor:pointer;font-size:12px;color:var(--ink-dim);background:var(--tint-2)}
.lg-off:hover{color:var(--ink)}
.legenda .lg-tipos{align-items:center;flex-wrap:wrap;gap:6px 12px}
.lg-tipos .lg-ic{display:inline-flex;align-items:center;gap:5px}
.lg-tipos .mk{transform:none;cursor:default;transition:none}
.lg-tipos .mk-hit{display:none}
.lg-tipos .mk.c-com{--s:18px} .lg-tipos .mk:not(.c-com){--s:13px;margin-right:2px}
.lg-tipos .mkv{transform:none}
.lg-sw .lg-pl{width:13px;height:13px;flex:0 0 auto}

/* ---------- "Agora na rede" SEM camada: leituras da estação comunitária mais perto + atalhos que ligam a camada ---------- */
.g-est{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.g-est .mk{transform:none;--s:30px;cursor:default}
.g-est .mk-hit{display:none}
.g-est .nm{min-width:0;flex:1}
.g-est .a{font:600 15px/1.2 "Chakra Petch",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-est .b{font-size:12px;color:var(--muted)}
.g-leit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.g-mini{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;text-align:left;padding:9px 10px;border-radius:13px;cursor:pointer;
  color:var(--ink);background:var(--tint-1);border:1px solid var(--line);transition:border-color .12s,background .12s}
.g-mini:hover{border-color:var(--sel-br);background:var(--sel-bg)}
.g-mini .ic{grid-row:1/3;font-size:18px;color:var(--ink-dim)}
.g-mini .v{font:600 17px/1.1 "IBM Plex Mono",monospace}
.g-mini .k{font-size:11px;color:var(--muted)}
.g-mini.vazio .v{color:var(--muted);font-size:15px}
.g-dica{margin:7px 2px 0;font-size:11.5px;color:var(--muted)}
/* lista "Estações": o ícone da linha é o MESMO marcador do mapa (forma = categoria); o ponto colorido do valor vai para a direita */
.g-mk{position:relative;width:26px;height:26px;flex:0 0 auto;display:grid;place-items:center}
.g-mk .mk{transform:none;--s:22px;transition:none;cursor:inherit} .g-mk .mk.c-com{--s:26px} .g-mk .mk-hit{display:none}
/* o selo SUA do marcador vazava da caixa do ícone e cobria a 1ª letra do nome; na linha, a etiqueta de texto SUA basta */
.g-mk .mk-tag,.g-est-mk .mk-tag{display:none}
.g-item .vv .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:1px;box-shadow:none}
.g-oculta{margin:8px 2px 0;font-size:12px;color:var(--muted)}
.g-area{margin-top:8px}
.g-area .l1{white-space:normal}
.g-oculta button{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--ink-dim);text-decoration:underline;text-underline-offset:2px;cursor:pointer}

/* ---------- celular: folha inferior (modal) por cima da gaveta ---------- */
@media (max-width:899px){
  .pc{left:0;right:0;bottom:0;width:auto;max-height:88dvh;border-radius:22px 22px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom);
    transform-origin:50% 100%;animation:pc-sobe .22s cubic-bezier(.2,.8,.2,1)}
  @keyframes pc-sobe{from{transform:translateY(40%);opacity:.4}}
  .pc-alca{display:grid;place-items:center;height:16px;flex:0 0 auto}
  .pc-alca span{width:42px;height:5px;border-radius:999px;background:var(--line-2)}
  .pc-cab{padding-top:2px}
  .pc-cam{min-height:64px}
  .pc-row{min-height:52px}
}
/* desktop estreito (900–1121 px): a legenda (left 404 px, ~306 px de largura) e o popover (right 64 px, 348 px) se cruzam.
   O popover passa a nascer na altura do botão Camadas (bottom 160 = topo do "Minha localização" + 8), acima da legenda */
@media (min-width:900px) and (max-width:1121px){
  .pc{bottom:160px;max-height:calc(100dvh - 172px)}
}
@media (prefers-reduced-motion:reduce){ .pc{animation:none} .pc-sw,.pc-sw::before{transition:none} }

/* ---------- integração no app.js (gaveta com os ícones do sprite) ---------- */
/* "Agora na rede" sem camada: a linha da estação é um botão que abre o detalhe */
button.g-est{width:100%;padding:4px 2px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:12px}
button.g-est:hover .a{text-decoration:underline;text-underline-offset:2px}
.g-est .a,.g-est .b{display:block}
/* linhas da lista: título com reticências numa linha, subtítulo embaixo (eram spans inline: o nowrap/ellipsis não valia) */
.g-item .nm .a,.g-item .nm .b{display:block}
.g-item .nm .b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-est-mk{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px}
button.g-est .mk{cursor:pointer}
.g-leit.off .g-mini .v{color:var(--muted)}
.g-top .sub .ic{margin-right:3px;color:var(--accent)}
.g-chip .ic{font-size:15px;color:var(--ink-dim)}
.g-chip[data-acao="camada"]:hover{border-color:var(--sel-br);background:var(--sel-bg)}
button.g-est:focus-visible,.g-chip:focus-visible,.g-hero:focus-visible,.g-item:focus-visible,.g-cta:focus-visible,.g-voltar:focus-visible,.g-oculta button:focus-visible{outline:2px solid var(--you);outline-offset:2px}

/* =====================================================================
   PREPARO NO MAPA (web/rua.js): botão do topo, avisos (.rc-), rota que desvia (.ro-), quando a internet cai (.rd-),
   fichas e listas de apoio (.ap-), zonas (.zn-, .zona) e pino de apoio (.pino). Só tokens: nada de cor fixa aqui.
   ===================================================================== */
/* ---------- topo: "Preparo" (link para o preparo.html) + selo com o nº de avisos de perigo ---------- */
.top-acoes{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.top-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:36px;padding:0 10px;border-radius:12px;
  font-weight:600;font-size:13.5px;color:var(--ink);text-decoration:none;background:var(--tint-2);border:1px solid var(--vidro-br)}
.top-btn:hover{border-color:var(--line-3)}
.top-btn>.ic{font-size:19px;color:var(--crit)}
.top-selo{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;font:700 11.5px/20px "IBM Plex Sans",system-ui,sans-serif;
  text-align:center;color:var(--on-sos);background:var(--sos-fill);box-shadow:0 0 0 2px var(--bg)}
.top-selo[hidden]{display:none}
/* alvo de toque >= 44 px (ESPEC §6.8) sem engordar o desenho: a barra tem 48 px, o ::after cresce 5 px para cima e para baixo (46 px) */
.top-btn::after{content:"";position:absolute;left:0;right:0;top:-5px;bottom:-5px}
@media (max-width:419px){ .top-txt{display:none} .top-btn{padding:0} }
/* desktop: a barra tem a largura do painel (380 px); com o texto, o status da rede (#rede-status) ficava cortado */
@media (min-width:900px){ .top-txt{display:none} .top-btn{padding:0} }

/* ---------- cartão de perigo no topo de "Agora na rede" (cabe no peek com o .g-top) ---------- */
.rc-cartao{margin:0 0 10px;border-radius:14px;background:var(--aviso-perigo-bg);border:1px solid var(--aviso-perigo-br);border-left-width:4px;overflow:hidden}
.rc-banner{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:8px 10px;border:0;background:none;color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.rc-banner .rc-ic{font-size:22px;color:var(--crit)}
.rc-banner>.ic:last-child{color:var(--muted)}
.rc-banner .tx{flex:1;min-width:0;display:flex;flex-direction:column}
.rc-rot{font:700 11px/1.3 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:.5px;color:var(--crit)}
.rc-rot .rc-orig{font-weight:600;letter-spacing:0;color:var(--ink-dim)}
.rc-banner .rc-t{font:600 14.5px/1.25 "Chakra Petch",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-banner .rc-s{font-size:11.5px;color:var(--muted)}
.rc-acoes,.rc-sos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.rc-acoes{padding:0 10px 10px}
.rc-sos{margin-top:12px}
.rc-sos-b{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:8px 10px;border-radius:12px;font-weight:600;font-size:14px;text-decoration:none;
  color:var(--ink);background:var(--tint-2);border:1px solid var(--vidro-br)}
.rc-sos-b.sos{color:var(--on-sos);background:var(--sos-fill);border-color:transparent}
.rc-sos-b .ic{font-size:17px}
/* ligação direta na tela Avisos (a página Pedir ajuda não abre sem internet): 4 alvos lado a lado, >= 44 px, cabem em 375 px */
.rc-tel{margin-top:10px}
.rc-tel-t{margin:0 0 6px;font-size:12px;color:var(--ink-dim)}
.rc-tel-l{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.rc-tel-b{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;padding:6px 4px;border-radius:12px;text-align:center;
  text-decoration:none;color:var(--ink);background:var(--tint-2);border:1px solid var(--vidro-br)}
.rc-tel-b b{font:700 16px/1.1 "IBM Plex Mono",monospace}
.rc-tel-b span{font-size:11px;line-height:1.2;color:var(--ink-dim);overflow-wrap:anywhere}
.rc-sos-off{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;padding:10px 12px;border-radius:12px;font-size:13px;color:var(--ink);
  background:var(--aviso-neutro-bg);border:1px solid var(--aviso-neutro-br)}
.rc-sos-off>.ic{flex:0 0 auto;font-size:18px;color:var(--warn)}
.rc-falha{color:var(--ink-dim)}
/* entrada no fim do resumo */
.rc-entra{display:flex;align-items:center;gap:12px;min-height:60px;margin-top:12px;padding:10px 12px;border-radius:14px;color:var(--ink);text-decoration:none;
  background:var(--tint-1);border:1px solid var(--line)}
.rc-entra:hover{border-color:var(--line-2)}
.rc-entra-ic{display:grid;place-items:center;flex:0 0 auto;width:38px;height:38px;border-radius:11px;font-size:20px;color:var(--on-sos);background:var(--sos-fill)}
.rc-entra .tx{flex:1;min-width:0;display:flex;flex-direction:column}
.rc-entra .tx b{font-family:"Chakra Petch",sans-serif;font-size:15px}
.rc-entra .tx span{font-size:12px;color:var(--muted)}
.rc-entra>.ic,.ap-card>.ic{color:var(--muted)}

/* ---------- tela Avisos ---------- */
.rc-intro{margin:0 0 10px;font-size:12.5px;color:var(--ink-dim)}
.rc-lista{display:flex;flex-direction:column;gap:8px}
.rc-item{padding:10px 12px;border-radius:13px;background:var(--aviso-perigo-bg);border:1px solid var(--aviso-perigo-br);border-left-width:4px}
.rc-item.b-previsto{border-left-style:dashed}               /* previsão: não é medição (o selo diz em texto) */
.rc-cab{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:11px}
.rc-cab>.ic{font-size:16px;color:var(--crit)}
.rc-nivel{font-weight:700;letter-spacing:.5px;color:var(--crit)}
.rc-cab .rc-orig{padding:1px 7px;border-radius:999px;font-weight:600;color:var(--ink-dim);background:var(--tint-2)}
.rc-item .rc-t{margin:5px 0 2px;font-size:15px;line-height:1.25}
.rc-item .rc-s{margin:0;font-size:13px;color:var(--ink-dim)}
.rc-fonte{margin:6px 0 0;font-size:11.5px;color:var(--muted)}
.rc-vazio,.ro-res{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border-radius:13px;border:1px solid var(--line)}
.rc-vazio>.ic,.ro-res>.ic{font-size:20px;margin-top:1px}
.rc-vazio .tx,.ro-res .tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.rc-vazio b,.ro-res b{font-size:14px}
.rc-vazio span,.ro-res span{font-size:12.5px;color:var(--ink-dim)}
.rc-vazio .btn{align-self:flex-start;margin-top:8px;min-height:44px}
.rc-vazio.calmo,.ro-res.ok{background:var(--aviso-calmo-bg);border-color:var(--aviso-calmo-br)}
.rc-vazio.calmo>.ic,.ro-res.ok>.ic{color:var(--ok)}
.rc-vazio.neutro,.ro-res.neutro{background:var(--aviso-neutro-bg);border-color:var(--aviso-neutro-br)}
.rc-vazio.neutro>.ic,.ro-res.neutro>.ic{color:var(--warn)}
/* leituras que passaram do limite sem virar aviso: lista dentro do bloco neutro */
.rc-sinais ul{margin:4px 0 0;padding:0 0 0 16px;display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--ink-dim)}
.rc-sinais .linkbtn{font-size:12.5px}
.ro-res.perigo{background:var(--aviso-perigo-bg);border-color:var(--aviso-perigo-br)}
.ro-res.perigo>.ic{color:var(--crit)}
.rc-base{margin-top:12px;border:1px solid var(--line);border-radius:12px;background:var(--tint-1)}
.rc-base>summary{cursor:pointer;padding:12px;min-height:44px;font-weight:600;font-size:13px;color:var(--ink-dim);border-radius:12px}
#gaveta-corpo .btn.block{min-height:44px}   /* "Baixar a lista", "Escolher no mapa", "Checar o caminho": alvo de 44 px (ESPEC §6.8) */
.rc-base ul{margin:0;padding:0 14px 12px 30px;display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--ink-dim)}
.rc-miga{margin:12px 0 0;font-size:11.5px;color:var(--muted)}
.rc-nota{margin:6px 0 0;font-size:12px;color:var(--muted)}
.rc-vazio-txt{margin:8px 0;padding:10px 12px;border-radius:12px;font-size:12.5px;color:var(--ink-dim);background:var(--aviso-neutro-bg);border:1px solid var(--aviso-neutro-br)}
h3.g-sec{font-family:"IBM Plex Sans",system-ui,sans-serif;font-weight:600}

/* ---------- Rota que desvia ---------- */
.ro-res{margin:0 0 10px}
.ro-de{display:flex;align-items:center;flex-wrap:wrap;gap:4px 7px;margin:0;font-size:13px;color:var(--ink-dim)}
.ro-de .linkbtn{min-height:36px}
.ro-botoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ro-botoes .btn,.ro-mira-btn{min-height:44px;font-size:13px;padding:8px 10px}
.ro-mira-btn{margin-top:8px}
.ro-escolhido{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 12px;border-radius:13px;background:var(--sel-bg);border:1px solid var(--sel-br)}
.ro-escolhido>.ic{font-size:20px;color:var(--accent)}
.ro-escolhido .tx{flex:1;min-width:0;display:flex;flex-direction:column}
.ro-escolhido .tx span{font-size:12px;color:var(--muted)}
.ro-escolhido .linkbtn{min-height:44px;padding:0 4px}
/* mira: fixa no centro da área visível do mapa (acima do peek no celular; à direita do painel no desktop) */
.ro-mira{position:fixed;z-index:15;left:50%;top:calc((var(--topo) + 100dvh - var(--peek)) / 2);width:44px;height:44px;margin:-22px 0 0 -22px;display:grid;place-items:center;
  pointer-events:none;font-size:40px;color:var(--you);filter:drop-shadow(0 0 1.5px var(--rota-halo)) drop-shadow(0 0 1.5px var(--rota-halo))}
.ro-mira-barra{position:fixed;z-index:22;top:calc(var(--topo) + 8px);left:10px;right:10px;padding:10px 12px;border-radius:16px}
.ro-mira-barra p{margin:0 0 8px;font-weight:600;font-size:14px}
.ro-mira-tec{display:block;margin-top:2px;font-weight:400;font-size:12.5px;color:var(--ink-dim)}
@media (hover:none) and (pointer:coarse){ .ro-mira-tec{display:none} }   /* celular: sem setas; o anúncio ao ligar a mira diz o mesmo */
.ro-mira-acoes{display:flex;gap:8px}
.ro-mira-acoes .btn{flex:1;min-height:44px}
.ro-mira[hidden],.ro-mira-barra[hidden]{display:none}
@media (min-width:900px){
  .ro-mira{left:calc(50% + 196px);top:50%}
  .ro-mira-barra{left:404px;right:auto;top:calc(12px + env(safe-area-inset-top));width:min(440px,calc(100vw - 420px))}
}
/* linha reta (pane "ca-rota", sem eventos): halo + tracejado; a cor diz e o texto confirma */
.ro-halo{fill:none;stroke:var(--rota-halo);stroke-width:7;stroke-linecap:round}
.ro-linha{fill:none;stroke:var(--rota-ok);stroke-width:3.5;stroke-dasharray:2 7;stroke-linecap:round}
.ro-linha.cruza{stroke:var(--rota-cruza)}
/* neutro (nenhuma zona publicada, partida dentro de uma zona): nunca o verde do "não cruza" */
.ro-linha.neutra{stroke:var(--warn)}
/* partida no centro do mapa: não é o "você" (azul); o destino da mira é um pino (.pino.ro-dest) */
.ro-ponta{fill:var(--ink);fill-opacity:1;stroke:var(--rota-halo);stroke-width:3}
.pino.ro-dest{cursor:default}

/* ---------- Quando a internet cai ---------- */
.rd-status{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:0 0 10px;padding:10px 12px;border-radius:13px;background:var(--aviso-calmo-bg);border:1px solid var(--aviso-calmo-br)}
.rd-status.off{background:var(--aviso-neutro-bg);border-color:var(--aviso-neutro-br)}
.rd-bol{width:10px;height:10px;border-radius:50%;background:var(--sinal-ok)}
.rd-status.off .rd-bol{background:var(--sinal-atencao)}
.rd-status b{font-size:14px}
.rd-status>span:last-child{font-size:12px;color:var(--ink-dim)}
.rd-mesh{display:flex;gap:9px;align-items:flex-start;margin:0 0 6px;font-size:12.5px;color:var(--ink-dim)}
.rd-mesh>.ic{font-size:20px;color:var(--accent)}

/* ---------- listas e fichas de apoio ---------- */
.ap-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ap-lista+.btn{margin-top:10px}
.ap-card{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:8px 11px;border-radius:13px;font:inherit;text-align:left;cursor:pointer;
  color:var(--ink);text-decoration:none;background:var(--tint-1);border:1px solid var(--line)}
.ap-card:hover{border-color:var(--line-2)}
.ap-card .tx{flex:1;min-width:0;display:flex;flex-direction:column}
.ap-card .tx b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-card .tx span{font-size:11.5px;color:var(--muted)}
.ap-ic{display:grid;place-items:center;flex:0 0 auto;width:32px;height:32px;border-radius:10px;font-size:17px;color:var(--ink);background:var(--tint-2)}
.ap-ic.sos{color:var(--on-sos);background:var(--sos-fill)}
.ap-aviso{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;padding:10px 12px;border-radius:12px;font-size:13px;color:var(--ink);
  background:var(--aviso-perigo-bg);border:1px solid var(--aviso-perigo-br)}
.ap-aviso>.ic{font-size:18px;color:var(--crit)}
.ap-selo{display:inline-flex;align-items:center;gap:6px;margin:8px 0 0;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:600;color:var(--warn);
  background:var(--aviso-neutro-bg);border:1px solid var(--aviso-neutro-br)}
.ap-dados{margin:10px 0;display:grid;gap:6px;font-size:13px}
.ap-dados div{display:grid;grid-template-columns:minmax(0,7.5em) minmax(0,1fr);gap:8px}
.ap-dados dt{color:var(--muted)}
.ap-dados dd{margin:0;overflow-wrap:anywhere}
.tag.apo{color:var(--pino-ink);background:var(--pino-bg)}
.g-det-h .sub .zn-sw{margin-right:2px}

/* ---------- zonas: amostra/painel e polígonos no Leaflet (pane "ca-zonas", z 450, SEM mix-blend-mode) ---------- */
.zn-sw{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;border:2px solid var(--zona-agua-traco);background:var(--sinal-agua)}
.zn-sw.n-inundacao{border-color:var(--zona-inundacao-traco);background-color:var(--sinal-inundacao)}
.zn-sw.n-alagamento_forte{border-color:var(--zona-forte-traco);background-color:var(--sinal-alerta)}
.zn-sw.n-alagamento{border-color:var(--zona-alag-traco);background-color:var(--sinal-atencao)}
.zn-sw.obs{border-style:dashed;background:none}
.zn-sw.obs.n-inundacao,.zn-sw.obs.n-alagamento_forte,.zn-sw.obs.n-alagamento{background:none}
.zn-amostra{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;width:22px;height:22px;border-radius:5px;overflow:hidden}
.zn-amostra i{display:block}
.zn-amostra .n-inundacao{background:var(--sinal-inundacao)} .zn-amostra .n-alagamento_forte{background:var(--sinal-alerta)}
.zn-amostra .n-alagamento{background:var(--sinal-atencao)} .zn-amostra .n-agua_na_via{background:var(--sinal-agua)}
.leaflet-ca-zonas-pane path.zona{stroke-width:2.5;stroke-opacity:1;stroke-linejoin:round;fill-opacity:var(--zona-alfa)}
.leaflet-ca-zonas-pane path.zona.obs{fill-opacity:var(--zona-alfa-obs);stroke-dasharray:6 5}   /* observação: tracejada E escrita na ficha */
.zona.n-inundacao{fill:var(--sinal-inundacao);stroke:var(--zona-inundacao-traco)}
.zona.n-alagamento_forte{fill:var(--sinal-alerta);stroke:var(--zona-forte-traco)}
.zona.n-alagamento{fill:var(--sinal-atencao);stroke:var(--zona-alag-traco)}
.zona.n-agua_na_via{fill:var(--sinal-agua);stroke:var(--zona-agua-traco)}

/* ---------- pino de apoio: forma que nenhuma estação usa (gota com a ponta para baixo), sólido na cor da tinta ---------- */
.pino{--s:30px;position:relative;width:var(--s);height:var(--s);transform:translate(-50%,-97%);cursor:pointer}
.pino-svg{display:block;width:100%;height:100%;overflow:visible}
.pino-halo{fill:none;stroke:var(--pino-halo);stroke-width:4.5;stroke-linejoin:round}
.pino-corpo{fill:var(--pino-bg)}
.pino-gl{color:var(--pino-ink)}
.z-medio .pino{--s:26px}
.leaflet-marker-icon:hover .pino{transform:translate(-50%,-97%) scale(1.08)}
.leaflet-marker-icon:focus-visible .pino::before{content:"";position:absolute;left:50%;top:38%;width:calc(var(--s) + 10px);height:calc(var(--s) + 10px);
  transform:translate(-50%,-50%);border-radius:50%;border:2.5px solid var(--you);box-shadow:0 0 0 2px var(--mk-bg);pointer-events:none}
.pc-mk .pino{--s:24px;transform:none;cursor:inherit}
.pc-row.pc-apoio:has(.pc-sw:not(:checked)) .pc-mk{opacity:.5}

/* ---------- foco visível em tudo que é novo ---------- */
/* aviso curto do app (ex.: "Não consegui sua localização"): abaixo da barra do topo, acima da gaveta; some sem .on.
   Só a opacidade muda (o role=status fica na árvore de acessibilidade e anuncia o texto novo) */
#aviso{position:fixed;z-index:40;left:50%;top:calc(var(--topo) + 8px);transform:translateX(-50%);width:max-content;max-width:min(calc(100vw - 32px),420px);
  padding:10px 14px;border-radius:14px;font-size:13.5px;line-height:1.4;color:var(--ink);opacity:0;pointer-events:none;transition:opacity .2s}
#aviso.on{opacity:1}
@media (min-width:900px){ #aviso{left:calc(50% + 196px);max-width:min(440px,calc(100vw - 440px))} }
.rc-tel-b:focus-visible,
.top-btn:focus-visible,.rc-banner:focus-visible,.rc-sos-b:focus-visible,.rc-entra:focus-visible,.rc-base>summary:focus-visible,.ap-card:focus-visible,
.ro-mira-acoes .btn:focus-visible,#gav-tit:focus-visible,.rc-sos-off:focus-visible{outline:2px solid var(--you);outline-offset:2px}
#gav-tit:focus:not(:focus-visible),.rc-sos-off:focus:not(:focus-visible){outline:none}
@media (prefers-reduced-motion:reduce){ .leaflet-marker-icon:hover .pino{transform:translate(-50%,-97%)} }

/* ---------- Preparo numa janela de vidro sobre o mapa ----------
   O quadro (preparo.html?janela=1, fundo transparente) ocupa o cartão inteiro e rola por dentro; o X fica por cima. */
.modal-card.preparo-card{width:min(680px,100%);height:min(880px,94dvh);padding:0;overflow:hidden;display:flex}
.preparo-card iframe{flex:1;min-width:0;width:100%;height:100%;border:0;border-radius:inherit;background:transparent;visibility:hidden}
.preparo-card iframe.pronto{visibility:visible}
.preparo-card .x{z-index:2}
.preparo-carregando{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:var(--ink-dim);font-size:14px;pointer-events:none}
.preparo-card iframe.pronto~.preparo-carregando,.preparo-card.falhou .preparo-carregando{display:none}
/* o Preparo não abriu: recado honesto + os números da tela Avisos + "Tentar de novo" (rola por dentro em 375 px; o X fica por cima) */
.preparo-falhou{position:absolute;inset:0;z-index:1;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:56px 18px 20px}
.preparo-falhou[hidden]{display:none}
.pf-tit{margin:0;font-family:"Chakra Petch",sans-serif;font-size:19px;font-weight:600;color:var(--ink)}
.pf-txt{margin:0;font-size:14px;line-height:1.45;color:var(--ink)}
.preparo-falhou .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;align-self:flex-start;color:var(--ink)}
.preparo-falhou:focus-visible{outline:2px solid var(--you);outline-offset:-4px;border-radius:inherit}
.preparo-falhou:focus:not(:focus-visible){outline:none}

/* botão da mochila (em cima de Camadas): mesmo tamanho e cor do Camadas */
.fab-mochila{color:var(--ink);font-size:21px;text-decoration:none}
.fab-mochila:hover{color:var(--ink)}