/* Tudo que fica sobre o mapa do site: marcadores, controles, aviso do topo, rastro e chuva. */
/* marcadores (pílulas da 0.1) */
.bm-marker{background:none;border:0}
.bm-pill{position:relative;display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border:2px solid #fff;border-radius:999px;color:#fff;font:700 12px/1 var(--font);white-space:nowrap;box-shadow:0 4px 12px rgba(14,26,43,.25)}
.bm-pill-icon{display:inline-flex;width:24px;height:24px;border-radius:12px;align-items:center;justify-content:center;background:rgba(255,255,255,.22)}
.bm-pill.fade{opacity:.5}
.far-zoom .bm-pill{padding:3px;gap:0}.far-zoom .bm-pill .lbl{display:none}
.rec-badge{position:absolute;top:-9px;right:-10px;min-width:20px;height:18px;padding:0 5px;border-radius:9px;background:var(--brand);color:#fff;font:800 10.5px/18px var(--font);text-align:center;border:1.5px solid #fff}
.sub{font-size:16px;font-weight:800;margin:0}
.rec-box{display:flex;flex-direction:column;gap:10px;background:var(--brand-tint);border:1px solid var(--brand-line);border-radius:14px;padding:14px}
.timeline{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--line);display:flex;flex-direction:column}
.rec-box .timeline{border-left-color:var(--brand-line)}
.tl{display:flex;gap:12px;background:none;border:0;text-align:left;padding:8px 0;width:100%;position:relative;color:var(--ink)}
.tl::before{content:"";position:absolute;left:-21px;top:14px;width:12px;height:12px;border-radius:6px;background:var(--muted);border:2px solid #fff}
.tl.cur::before{background:var(--brand)}
.tl-date{font-size:12px;color:var(--muted);width:84px;line-height:1.3;flex:none;font-variant-numeric:tabular-nums;padding-top:1px;font-weight:600}
.tl-main{min-width:0;display:flex;flex-direction:column}
.tl-main strong{font-size:14px;font-weight:700}
.tl-main span{font-size:12.5px;color:var(--muted)}
.tl.cur strong{color:var(--brand-dark)}
.now{color:var(--grave-ink);font-weight:800}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stats div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column}
.stats b{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.stats span{font-size:12px;color:var(--muted);font-weight:600}
.rec-count{flex:none;color:#fff;border-radius:10px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font:800 14px var(--font)}
.warn{display:flex;flex-direction:column;gap:8px;border-radius:14px;padding:14px;background:var(--att-tint);color:var(--att-ink);border:1px solid var(--att-line)}
.warn.info{background:var(--brand-tint);color:var(--brand-dark);border-color:var(--brand-line)}
.warn b{font-weight:800}
.warn span{font-size:14px;font-weight:600}
.newpin{width:34px;height:42px}

.leaflet-container img.leaflet-tile{mix-blend-mode:normal} /* evita a falha do Leaflet 1.9 que deixa o mapa claro/bege em alguns celulares */
/* ---- controles por cima do mapa ---- */
.maptop{position:fixed;z-index:520;top:calc(env(safe-area-inset-top,0px) + 70px);left:max(12px,env(safe-area-inset-left,0px));right:58px;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.maptop > *{pointer-events:auto}
.mchips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px}
.mchip{flex:none;height:36px;padding:0 12px;border-radius:18px;border:1px solid var(--border);background:rgba(255,255,255,.97);font-size:13px;font-weight:700;color:var(--ink);box-shadow:0 2px 8px rgba(14,26,43,.12);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.mchip[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.modo{font-weight:600;color:var(--muted);font-size:.92em}
/* aviso no topo: "seja o primeiro" / "tem ocorrência acontecendo?" */
.aviso-topo{display:flex;align-items:center;gap:8px;padding:8px 4px 8px 10px;border-radius:16px;background:#fff;border:1px solid var(--brand-line);box-shadow:0 6px 18px rgba(14,26,43,.16);color:var(--ink);text-align:left;animation:avisoEntra .35s ease-out}
.aviso-topo .ic{flex:none;width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:19px;background:var(--brand-tint)}
.aviso-topo .tx{flex:1;min-width:0;cursor:pointer}
.aviso-topo b{display:block;font-size:14px;font-weight:800;line-height:1.2}
.aviso-topo small{display:block;font-size:12px;font-weight:600;color:var(--sub);line-height:1.3;margin-top:2px}
.aviso-topo .go{flex:none;height:34px;padding:0 11px;border:0;border-radius:12px;background:var(--brand);color:#fff;font-size:13px;font-weight:800;white-space:nowrap}
.aviso-topo .fx{flex:none;width:26px;height:28px;border:0;border-radius:14px;background:transparent;color:var(--muted);font-size:20px;line-height:1}
.aviso-topo.primeiro{background:linear-gradient(135deg,var(--brand) 0%,#3B8EEB 100%);border-color:transparent;color:#fff}
.aviso-topo.primeiro .ic{background:rgba(255,255,255,.18)}
.aviso-topo.primeiro small{color:rgba(255,255,255,.88)}
.aviso-topo.primeiro .go{background:#fff;color:var(--brand-dark)}
.aviso-topo.primeiro .fx{color:rgba(255,255,255,.8)}
.aviso-topo.agora .ic{background:#FDECEC;position:relative}
.aviso-topo.agora .ic::after{content:"";position:absolute;top:5px;right:5px;width:9px;height:9px;border-radius:5px;background:#E53935;box-shadow:0 0 0 0 rgba(229,57,53,.6);animation:avisoPulso 1.6s infinite}
@keyframes avisoEntra{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes avisoPulso{70%{box-shadow:0 0 0 8px rgba(229,57,53,0)}100%{box-shadow:0 0 0 0 rgba(229,57,53,0)}}
@media (prefers-reduced-motion:reduce){.aviso-topo,.aviso-topo.agora .ic::after{animation:none}}
@media (min-width:760px){.aviso-topo{max-width:460px}}
.mseg{display:inline-flex;gap:3px;padding:3px;background:rgba(255,255,255,.97);border-radius:12px;box-shadow:0 2px 8px rgba(14,26,43,.12);align-self:flex-start}
.mseg button{height:32px;border:0;border-radius:9px;background:transparent;padding:0 10px;font-size:12.5px;font-weight:700;color:var(--sub)}
.mseg button[aria-pressed=true]{background:var(--brand-tint);color:var(--brand-dark);font-weight:800}
.legend{position:fixed;z-index:510;left:max(12px,env(safe-area-inset-left,0px));bottom:calc(80px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.96);border-radius:12px;padding:8px 12px;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11.5px;font-weight:700;color:var(--sub);box-shadow:0 1px 3px rgba(14,26,43,.15);max-width:calc(100% - 170px);pointer-events:none}
.legend span{display:inline-flex;align-items:center;gap:6px}
.hist-cta{position:fixed;z-index:600;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(80px + env(safe-area-inset-bottom,0px));background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 14px;display:flex;align-items:center;gap:12px;box-shadow:0 10px 30px rgba(14,26,43,.18);text-align:left;color:var(--ink)}
.hist-cta b{display:block;font-size:15px;font-weight:800}
.hist-cta span{font-size:12.5px;color:var(--muted);font-weight:600}
.hist-cta .seta{margin-left:auto;font-size:22px;color:var(--brand)}
@media (min-width:760px){.hist-cta{right:auto;width:380px}}

/* marcadores de onde já aconteceu (estilo 0.1) */
.bm-past{position:relative;display:flex;width:26px;height:26px;border-radius:13px;align-items:center;justify-content:center;background:#fff;border:2.5px solid #4F5B6B;color:#4F5B6B;box-shadow:0 2px 6px rgba(14,26,43,.18)}
.bm-past.rec{border-color:var(--brand);color:var(--brand)}
.bm-past .n{position:absolute;top:-8px;right:-10px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#4F5B6B;color:#fff;font:800 10.5px/18px var(--font);text-align:center;border:1.5px solid #fff}
.bm-past.rec .n{background:var(--brand)}
.rec-badge.gray{background:#4F5B6B}

/* aviso de chuva */
.mchip.chuva{color:#1D4FB8;border-color:#BBD3FF}
.mchip.chuva.on{background:#1D72F3;color:#fff;border-color:#1D72F3}
.bm-chuva{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;background:#fff;color:#1D4FB8;border:2px solid #1D72F3;border-radius:14px;padding:3px 9px 3px 6px;font:800 12px/1.2 var(--font);box-shadow:0 2px 8px rgba(29,114,243,.25)}
.bm-chuva.temporal{background:#1D4FB8;color:#fff;border-color:#1D4FB8}
.far-zoom .bm-chuva .lbl{display:none}.far-zoom .bm-chuva{padding:3px 5px}
.chuva-go{width:100%;min-height:56px;border:0;border-radius:14px;background:#1D72F3;color:#fff;font-size:17px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 8px 20px rgba(29,114,243,.3)}
.chuva-go:disabled{opacity:.6}
.chuva-int{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.chuva-int button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border-radius:12px;background:#fff;border:1px solid var(--border);color:var(--ink);font-size:13px;font-weight:800;text-align:center}
.chuva-int button small{font-size:11px;font-weight:600;color:var(--muted);line-height:1.25}
.chuva-int button[aria-pressed=true]{border:2px solid #1D72F3;background:#EEF4FF;padding:9px 5px}
.chuva-int .ic{font-size:22px;line-height:1}
.crow{display:flex;gap:12px;align-items:center;width:100%;text-align:left;border:1px solid var(--line);background:#fff;border-radius:14px;padding:12px;color:var(--ink)}
.crow .ic{flex:none;width:40px;height:40px;border-radius:12px;background:#EEF4FF;display:flex;align-items:center;justify-content:center;font-size:20px}
.crow.temporal .ic{background:#DCE8FF}
.crow div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.crow strong{font-size:15px}.crow span{font-size:12.5px;color:var(--muted);font-weight:600}
.chuva-box{display:flex;gap:12px;align-items:center;border-radius:14px;padding:12px 14px;background:#EEF4FF;color:#1D4FB8}
.chuva-box .big{font-size:20px;font-weight:800;line-height:1.15}
.chuva-box small{display:block;font-size:12.5px;font-weight:700;opacity:.9}
.colab{display:flex;gap:8px;align-items:flex-start;background:#FFF7E0;color:#6B4A00;border:1px solid #F2DB9A;border-radius:12px;padding:10px 12px;font-size:13px;font-weight:600;line-height:1.4}
.colab b{font-weight:800}