/* Rio Canoas Agora
   Estilo "Accessible & Ethical" (ui-ux-pro-max): alto contraste, fonte Outfit, ícones Phosphor,
   ícones SVG, foco visível, alvos de toque de 44px. Modo diurno e noturno. */

:root {
  /* diurno */
  --bg: #f1f5f9;
  --card: #ffffff;
  --surface-2: #f1f5f9;
  --text: #020617;
  --text-2: #334155;
  --muted: #475569;
  --border: #e2e8f0;
  --grid: #e2e8f0;
  --axis: #cbd5e1;
  --primary: #0f172a;
  --on-primary: #ffffff;
  --accent: #0369a1;
  --accent-soft: #e0f2fe;
  --agua: #0369a1;
  --agua-fill: rgba(3, 105, 161, 0.12);
  --chuva: #0284c7;
  --ring: #0369a1;

  /* faixas: cor da marca (fixa) + tinta de texto e fundo por modo */
  --ok: #0ca30c;          --ok-ink: #065f06;          --ok-bg: #e7f6e7;
  --atencao: #fab219;     --atencao-ink: #7a4f00;     --atencao-bg: #fff4d6;
  --alerta: #ec835a;      --alerta-ink: #8a3412;      --alerta-bg: #fdebe2;
  --emergencia: #d03b3b;  --emergencia-ink: #991b1b;  --emergencia-bg: #fde4e4;
  --cinza: #64748b;       --cinza-ink: #334155;       --cinza-bg: #eef2f6;

  --radius: 16px;
  --radius-s: 12px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 20px rgba(15, 23, 42, .05);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1220; --card: #111a2e; --surface-2: #18233a; --text: #f1f5f9; --text-2: #cbd5e1; --muted: #a3b1c6;
    --border: rgba(148, 163, 184, .18); --grid: #223049; --axis: #33435f;
    --primary: #0b1220; --on-primary: #f1f5f9; --accent: #38bdf8; --accent-soft: rgba(56, 189, 248, .14);
    --agua: #38bdf8; --agua-fill: rgba(56, 189, 248, .16); --chuva: #38bdf8; --ring: #7dd3fc;
    --ok-ink: #86efac; --ok-bg: rgba(12, 163, 12, .16);
    --atencao-ink: #fcd34d; --atencao-bg: rgba(250, 178, 25, .14);
    --alerta-ink: #fdba95; --alerta-bg: rgba(236, 131, 90, .16);
    --emergencia-ink: #fca5a5; --emergencia-bg: rgba(208, 59, 59, .2);
    --cinza: #94a3b8; --cinza-ink: #cbd5e1; --cinza-bg: rgba(148, 163, 184, .12);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b1220; --card: #111a2e; --surface-2: #18233a; --text: #f1f5f9; --text-2: #cbd5e1; --muted: #a3b1c6;
  --border: rgba(148, 163, 184, .18); --grid: #223049; --axis: #33435f;
  --primary: #0b1220; --on-primary: #f1f5f9; --accent: #38bdf8; --accent-soft: rgba(56, 189, 248, .14);
  --agua: #38bdf8; --agua-fill: rgba(56, 189, 248, .16); --chuva: #38bdf8; --ring: #7dd3fc;
  --ok-ink: #86efac; --ok-bg: rgba(12, 163, 12, .16);
  --atencao-ink: #fcd34d; --atencao-bg: rgba(250, 178, 25, .14);
  --alerta-ink: #fdba95; --alerta-bg: rgba(236, 131, 90, .16);
  --emergencia-ink: #fca5a5; --emergencia-bg: rgba(208, 59, 59, .2);
  --cinza: #94a3b8; --cinza-ink: #cbd5e1; --cinza-bg: rgba(148, 163, 184, .12);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
  color-scheme: dark;
}

/* ------------------------------------------------------------- base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.55 "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  transition: background-color .2s ease, color .2s ease;
}
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 6px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }
.ico-p { width: .95em; height: .95em; margin-left: 6px; }
.ico-grande { width: 48px; height: 48px; stroke-width: 1.5; }

.pular { position: absolute; left: -9999px; top: 8px; background: var(--card); color: var(--text); padding: 10px 14px; border-radius: 8px; z-index: 50; }
.pular:focus { left: 16px; }

h2 { display: flex; align-items: center; gap: 10px; font-size: 1.22rem; margin: 0 0 16px; line-height: 1.25; }
h2 .ico { color: var(--accent); }
h3.sub { font-size: 1rem; color: var(--text-2); margin: 20px 0 4px; }
.nota { margin: 12px 0 0; color: var(--muted); font-size: .9rem; }

/* ------------------------------------------------------------- topo */
.topo { position: sticky; top: 0; z-index: 20; background: var(--primary); color: var(--on-primary); border-bottom: 1px solid rgba(255,255,255,.08); }
.topo-in { display: flex; align-items: center; gap: 16px; min-height: 68px; }
.marca { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; margin-right: auto; }
.marca-txt { display: flex; flex-direction: column; line-height: 1.15; }
.marca strong { font-size: 1.15rem; }
.marca small { opacity: .8; font-size: .85rem; }
.menu { display: none; gap: 4px; }
.menu a { color: inherit; text-decoration: none; padding: 10px 12px; border-radius: 8px; font-size: .95rem; opacity: .9; }
.menu a:hover { background: rgba(255,255,255,.1); opacity: 1; }
.topo-acoes { display: flex; align-items: center; gap: 12px; }
.atualizado { font-size: .85rem; opacity: .85; text-align: right; }
.tema-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 14px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: inherit;
  font: inherit; font-size: .9rem; cursor: pointer; transition: background-color .15s ease;
}
.tema-btn:hover { background: rgba(255,255,255,.14); }
.tema-btn .ico-sol { display: none; }
.escuro .tema-btn .ico-sol { display: inline; }
.escuro .tema-btn .ico-lua { display: none; }

.faixa-independente { background: var(--accent-soft); color: var(--text); font-size: .9rem; border-bottom: 1px solid var(--border); }
.faixa-independente .wrap { display: flex; gap: 10px; align-items: flex-start; padding-top: 10px; padding-bottom: 10px; }
.faixa-independente .ico { color: var(--accent); margin-top: 2px; }
.faixa-demo { background: var(--atencao-bg); color: var(--atencao-ink); text-align: center; font-size: .92rem; }
.faixa-demo .wrap { padding-top: 8px; padding-bottom: 8px; }

/* ------------------------------------------------------------- grade */
.painel { display: grid; grid-template-columns: 1fr; gap: 16px; padding-top: 16px; padding-bottom: 24px; }
.card { background: var(--card); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); border: 1px solid var(--border); min-width: 0; }

@media (min-width: 768px) {
  .painel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .situacao, .chuva-card, .previsao-card, .graficos-card, .chuva30-card, .mapa-card, .camera-card, .faixas-card, .apoio { grid-column: 1 / -1; }
  .card { padding: 24px; }
}
@media (min-width: 1100px) {
  .painel { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding-top: 24px; }
  .situacao { grid-column: 1 / span 7; }
  .chuva-card { grid-column: 8 / span 5; }
  .previsao-card { grid-column: 1 / -1; }
  .graficos-card { grid-column: 1 / -1; }
  .chuva30-card { grid-column: 1 / -1; }
  .mapa-card { grid-column: 1 / -1; }
  .camera-card { grid-column: 1 / span 6; }
  .faixas-card { grid-column: 7 / span 6; grid-row: span 2; }
  .telefones-card { grid-column: 1 / span 6; }
  .fontes-card { grid-column: 1 / -1; }
  .apoio { grid-column: 1 / -1; }
  .menu { display: flex; }
}

/* ---------------------------------------------------------- situação */
.situacao { --c: var(--cinza); --cbg: var(--cinza-bg); --cink: var(--cinza-ink); border-top: 8px solid var(--c); display: flex; flex-direction: column; }
.situacao[data-sit="normal"]     { --c: var(--ok); --cbg: var(--ok-bg); --cink: var(--ok-ink); }
.situacao[data-sit="atencao"]    { --c: var(--atencao); --cbg: var(--atencao-bg); --cink: var(--atencao-ink); }
.situacao[data-sit="alerta"]     { --c: var(--alerta); --cbg: var(--alerta-bg); --cink: var(--alerta-ink); }
.situacao[data-sit="emergencia"] { --c: var(--emergencia); --cbg: var(--emergencia-bg); --cink: var(--emergencia-ink); }

.sit-topo { display: flex; align-items: center; gap: 16px; }
.sit-icone { flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--cbg); color: var(--cink); display: grid; place-items: center; }
.sit-icone .ico { width: 34px; height: 34px; }
.sit-rotulo { margin: 0; color: var(--text-2); font-size: .95rem; }
.sit-titulo { margin: 0; font-size: clamp(2rem, 5.5vw, 3rem); line-height: 1.05; color: var(--cink); letter-spacing: .5px; }
.sit-frase { font-size: .92rem; line-height: 1.45; margin: 14px 0 0; background: var(--cbg); color: var(--text-2); padding: 10px 14px; border-radius: var(--radius-s); border-left: 3px solid var(--c); }
.sit-frase p { margin: 0; }
.sgb-selo { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 4px; font-size: .78rem; font-weight: 700; letter-spacing: .02em; color: var(--text); background: color-mix(in srgb, var(--c) 22%, transparent); padding: 2px 9px 2px 6px; border-radius: 999px; }
.sgb-selo .ico { font-size: 15px; color: var(--c); }

.sit-corpo { display: grid; grid-template-columns: 210px 1fr; gap: 24px; align-items: stretch; margin-top: 16px; flex: 1; }
.regua-box { margin: 0; position: relative; min-height: 340px; }
.regua { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.regua text { font-family: inherit; }
.numeros { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.numeros div { background: var(--surface-2); border-radius: var(--radius-s); padding: 12px 14px; }
.numeros .num-destaque { grid-column: 1 / -1; }
.numeros dt { font-size: .85rem; color: var(--text-2); }
.numeros dd { margin: 4px 0 0; font-size: 1.15rem; font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.numeros .grande { font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1.1; font-variant-numeric: tabular-nums; }
.leitura { margin: 16px 0 0; color: var(--muted); font-size: .88rem; }
.leitura a { color: inherit; }
.situacao[data-sit="verificando"] .regua, .situacao[data-sit="verificando"] .numeros { opacity: .55; }

/* ------------------------------------------------------------- chuva */
.chuva-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 1100px) { .chuva-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chip { background: var(--surface-2); border-radius: var(--radius-s); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chip.destaque { box-shadow: inset 0 0 0 2px var(--accent); }
.chip-rot { font-size: .85rem; color: var(--text-2); }
.chip-val { font-size: 1.55rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.chip-txt { font-size: .9rem; color: var(--text-2); }
.explica { margin: 12px 0 0; font-size: .92rem; color: var(--text-2); }

/* ---------------------------------------------------------- previsão */
.previsao { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dia { background: var(--surface-2); border-radius: var(--radius-s); padding: 12px 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dia-nome { font-weight: 700; }
.dia .ico { width: 34px; height: 34px; color: var(--accent); margin: 4px 0; stroke-width: 1.75; }
.dia-mm { font-size: 1.15rem; font-weight: 700; }
.dia-txt { font-size: .85rem; color: var(--text-2); }
.dia-temp { font-size: .85rem; color: var(--muted); }

/* ---------------------------------------------------------- gráficos */
.grafico { position: relative; width: 100%; }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico text { fill: var(--muted); font-size: 12px; font-family: inherit; }
.grafico .lbl-limite { font-size: 12px; font-weight: 700; fill: var(--text-2); }
.tooltip {
  position: fixed; z-index: 30; pointer-events: none;
  background: var(--text); color: var(--card);
  padding: 8px 12px; border-radius: 8px; font-size: .9rem; line-height: 1.35;
  box-shadow: 0 6px 18px rgba(0,0,0,.25); white-space: nowrap;
}
.tabela-det { margin-top: 16px; }
.mais-chuva { margin-top: 8px; }
.dias-chuva { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.dias-chuva .dia { padding: 10px 6px; }
.chuva24 { overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.c24-linha { display: flex; gap: 10px; min-width: 836px; }
.c24-grupo { min-width: 0; }
.c24-dia { font-size: .8rem; font-weight: 700; color: var(--text); padding: 3px 8px; margin-bottom: 8px; background: var(--surface-2); border-radius: 999px; display: inline-block; }
.c24-cols { display: grid; align-items: end; }
.c24-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.c24-val { font-size: .78rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.c24-val.zero { color: var(--muted); font-weight: 400; }
.c24-barra { height: 90px; width: 100%; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--axis); }
.c24-barra i { display: block; width: 14px; background: var(--chuva); border-radius: 4px 4px 0 0; }
.c24-hora { font-size: .74rem; color: var(--muted); }
.mais-chuva summary { cursor: pointer; color: var(--accent); font-size: .95rem; min-height: 44px; display: flex; align-items: center; list-style: none; }
.mais-chuva summary::-webkit-details-marker { display: none; }
.mais-chuva .ver-menos, .mais-chuva[open] .ver-mais { display: none; }
.mais-chuva[open] .ver-menos { display: inline; }
.tabela-det summary { cursor: pointer; color: var(--accent); font-size: .95rem; min-height: 44px; display: flex; align-items: center; }
.tabela-det table { width: 100%; border-collapse: collapse; font-size: .92rem; font-variant-numeric: tabular-nums; }
.tabela-det th, .tabela-det td { padding: 6px 10px; border-bottom: 1px solid var(--grid); text-align: right; }
.tabela-det th:first-child, .tabela-det td:first-child { text-align: left; }
.tabela-det th { position: sticky; top: 0; background: var(--card); }
#tabela { max-height: 340px; overflow: auto; }

/* ------------------------------------------------------------ câmera */
.camera { aspect-ratio: 16 / 9; border-radius: var(--radius-s); overflow: hidden; background: var(--surface-2); }
.camera:has(.camera-vazia) { aspect-ratio: auto; min-height: 180px; display: grid; }
.camera iframe, .camera img { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
.camera-vazia { display: grid; place-content: center; justify-items: center; text-align: center; color: var(--text-2); padding: 24px; }
.camera-vazia .ico { color: var(--muted); }

/* ------------------------------------------------------------ faixas */
.niveis-lista { display: grid; gap: 10px; margin-top: 14px; }
.nivel-item { --c: var(--cinza); --cbg: var(--cinza-bg); --cink: var(--text); display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; padding: 12px 14px; border-radius: var(--radius-s); background: var(--surface-2); border-left: 6px solid var(--c); }
.nivel-item.atual { background: var(--cbg); }
.nivel-item[data-n="normal"] { --c: var(--ok); --cbg: var(--ok-bg); --cink: var(--ok-ink); }
.nivel-item[data-n="atencao"] { --c: var(--atencao); --cbg: var(--atencao-bg); --cink: var(--atencao-ink); }
.nivel-item[data-n="alerta"] { --c: var(--alerta); --cbg: var(--alerta-bg); --cink: var(--alerta-ink); }
.nivel-item[data-n="emergencia"] { --c: var(--emergencia); --cbg: var(--emergencia-bg); --cink: var(--emergencia-ink); }
.nivel-item .ico { width: 28px; height: 28px; color: var(--cink); margin-top: 2px; }
.nivel-item h3 { margin: 0; font-size: 1.02rem; }
.nivel-item .faixa { font-weight: 400; color: var(--text-2); }
.nivel-item p { margin: 2px 0 0; font-size: .93rem; color: var(--text-2); }
.agora-tag { display: inline-block; margin-left: 6px; font-size: .75rem; padding: 2px 9px; border-radius: 99px; background: var(--text); color: var(--card); vertical-align: 2px; }
.dicas { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.dicas h3 { display: flex; align-items: center; gap: 8px; font-size: 1rem; margin: 0 0 8px; }
.dicas h3 .ico { color: var(--accent); }
.dicas ul { margin: 0; padding-left: 20px; color: var(--text-2); font-size: .95rem; }
.dicas li { margin: 4px 0; }

/* --------------------------------------------------------- telefones */
.telefones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tel { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 88px; padding: 12px 8px; border-radius: var(--radius-s); background: var(--surface-2); text-decoration: none; color: var(--text); transition: box-shadow .15s ease; }
.tel strong { font-size: 1.6rem; color: var(--emergencia-ink); }
.tel span { font-size: .9rem; color: var(--text-2); }
.tel:hover { box-shadow: inset 0 0 0 2px var(--border); }

/* ------------------------------------------------------------ fontes */
.fontes-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fontes-lista a { display: block; padding: 10px 14px; border-radius: var(--radius-s); background: var(--surface-2); color: var(--text); text-decoration: none; min-height: 44px; }
.fontes-lista a:hover { box-shadow: inset 0 0 0 2px var(--border); }
.fontes-lista .ico { color: var(--accent); }
@media (min-width: 1100px) { .fontes-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------- cabeçalho com controles */
.card-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.card-cab h2 { margin: 0; }
.seletor { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 4px; }
.seletor button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font: inherit; font-size: .92rem; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.seletor button[aria-pressed="true"] { background: var(--card); color: var(--text); font-weight: 700; box-shadow: 0 1px 3px rgba(15, 23, 42, .15); }
.nota-borda { border-left: 3px solid var(--accent); padding-left: 10px; color: var(--text-2); }
.sw { display: inline-block; width: 14px; height: 10px; border-radius: 2px; vertical-align: 0; margin-right: 6px; }

/* ---------------------------------------- chuva por dia + previsão 48 h */
.duas-col { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 900px) { .duas-col { grid-template-columns: 1fr 1fr; gap: 32px; } }
.duas-col figure { margin: 0; min-width: 0; }
.duas-col figcaption { margin: 0 0 6px; }
:root { --previsto: #93c5fd; }
:root[data-theme="dark"] { --previsto: #1e4a73; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --previsto: #1e4a73; } }

/* ------------------------------------------------------------- mapa */
.radar-ctl { display: flex; align-items: center; gap: 10px; }
.radar-ctl button { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: .92rem; cursor: pointer; }
.radar-ctl button:hover { box-shadow: inset 0 0 0 2px var(--border); }
.radar-ctl span { font-size: .92rem; color: var(--text-2); font-variant-numeric: tabular-nums; min-width: 8ch; }
.mapa { height: 480px; border-radius: var(--radius-s); overflow: hidden; background: var(--surface-2); }
@media (max-width: 767px) { .mapa { height: 380px; } }
.mapa-rodape { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 12px; font-size: .9rem; color: var(--text-2); }
.sw-mun { border: 2px solid var(--accent); background: var(--accent-soft); }
.sw-est { width: 12px; height: 12px; border-radius: 50%; background: var(--alerta); border: 2px solid var(--text); }
.sw-radar { width: 28px; background: linear-gradient(90deg, #8ad4ff, #2c7fe0, #f7d23e, #e8412c); }
:root[data-theme="dark"] .mapa .base-tiles { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mapa .base-tiles { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9); } }
.leaflet-container { font-family: inherit; }
.rotulo-mapa { background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); font-weight: 700; font-size: .9rem; padding: 4px 10px; }
.rotulo-cidade { background: transparent; border: 0; box-shadow: none; color: var(--text); font-weight: 700; font-size: 1.05rem; text-shadow: 0 0 3px var(--card), 0 0 6px var(--card), 0 0 10px var(--card); }
.rotulo-cidade::before { display: none; }

/* ------------------------------------------------------------- apoio */
.apoio h2 { font-size: .9rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.apoio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.apoio-grid a { display: grid; place-items: center; min-height: 84px; padding: 10px; border-radius: var(--radius-s); background: var(--surface-2); text-decoration: none; color: var(--text-2); text-align: center; }
.apoio-grid img { max-width: 100%; max-height: 60px; }

/* ------------------------------------------------------------ rodapé */
.rodape { color: var(--text-2); font-size: .9rem; padding: 8px 0 40px; }
.rodape-in { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.rodape p { margin: 0; max-width: 820px; }
.rodape .credito { flex-basis: 100%; max-width: none; font-size: .85rem; border-top: 1px solid var(--border); padding-top: 12px; }

/* ------------------------------------------------------------ celular */
@media (max-width: 767px) {
  body { font-size: 16.5px; }
  .card { padding: 16px; }
  .chuva-grid, .previsao, .telefones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sit-corpo { grid-template-columns: 128px 1fr; gap: 12px; }
  .numeros { grid-template-columns: 1fr; gap: 8px; }
  .numeros div { padding: 10px 12px; }
  .sit-icone { width: 54px; height: 54px; }
  .sit-icone .ico { width: 28px; height: 28px; }
  .atualizado { display: none; }
  .tema-txt { display: none; }
  .tema-btn { padding: 0; justify-content: center; width: 44px; }
  .topo-in { min-height: 60px; }
}
@media (max-width: 340px) {
  .sit-corpo { grid-template-columns: 1fr; }
  .regua-box { max-width: 140px; margin: 0 auto; }
}

/* ------------------------------------------ régua interativa (termômetro) */
.regua .zona { cursor: pointer; }
.regua .zona-fundo { fill: transparent; transition: fill .15s ease; }
.regua .zona:hover .zona-fundo, .regua .zona:focus-visible .zona-fundo { fill: var(--surface-2); }
.regua .zona:focus-visible { outline: none; }
.regua .zona-nome { font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.regua .zona-faixa { font-size: 11px; fill: var(--muted); }
.regua .zona.atual .zona-fundo { fill: var(--cbg); }
/* sem animação de enchimento: a água nunca pode aparecer mais baixa do que está */

/* ------------------------------------------------- mini gráfico 24 h */
.num-24h { grid-column: 1 / -1; }
.num-24h dd { display: block !important; margin-top: 6px !important; }
.mini { position: relative; height: 96px; }
.mini svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mini text { font-size: 11px; fill: var(--muted); font-family: inherit; font-weight: 400; }
.mini-resumo { font-size: .88rem; font-weight: 400; color: var(--text-2); margin-top: 4px; }
@media (max-width: 767px) { .regua-box { min-height: 300px; } }
.mini-dica { font-size: .78rem; color: var(--muted); }

/* ------------------------------------------------ Google Maps + radar */
.mapa-moldura { position: relative; }
.radar-carimbo {
  position: absolute; left: 12px; bottom: 28px; z-index: 2; pointer-events: none;
  background: rgba(15, 23, 42, .82); color: #fff; padding: 6px 12px; border-radius: 8px;
  font-size: .9rem; font-variant-numeric: tabular-nums; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.radar-carimbo b { font-size: 1.15rem; margin-right: 4px; }
.radar-linha-box { margin-top: 12px; }
.radar-linha-box label { display: block; font-size: .88rem; color: var(--text-2); margin-bottom: 4px; }
.radar-linha-box input[type="range"] { width: 100%; accent-color: var(--accent); min-height: 32px; cursor: pointer; }
.radar-linha-rotulos { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); }
#mapa-box .rotulo-mapa, #mapa-box .rotulo-cidade { position: absolute; white-space: nowrap; pointer-events: none; }
#mapa-box .rotulo-mapa { transform: translate(-8px, -50%); display: flex; align-items: center; gap: 8px; }
#mapa-box .rotulo-mapa .pino { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--text); flex: none; margin-left: -8px; }
#mapa-box .rotulo-cidade { transform: translate(-50%, -150%); }

/* ------------------------------------------- comparação com 1 ano atrás */
:root { --ano: #64748b; }
:root[data-theme="dark"] { --ano: #a3b1c6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ano: #a3b1c6; } }
.graf-legenda { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; margin-top: 8px; font-size: .9rem; color: var(--text-2); }
.graf-legenda > span, .leg-ano { display: inline-flex; align-items: center; gap: 8px; }
.leg-ano { cursor: pointer; min-height: 40px; }
.leg-ano input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.leg-linha { display: inline-block; width: 26px; height: 0; border-top: 3px solid var(--agua); }
.leg-passado { border-top: 3px dotted var(--ano); }
.comparacao { margin: 10px 0 0; padding: 12px 14px; border-radius: var(--radius-s); background: var(--surface-2); color: var(--text); font-size: .95rem; }
.comparacao .fonte-ano { display: block; margin-top: 4px; color: var(--muted); font-size: .82rem; }

/* ----------------------------------- caixas do nível sem quebrar texto */
.numeros dd { flex-direction: column; align-items: flex-start; gap: 2px; white-space: nowrap; }
.numeros dd > span, .numeros dd > svg { display: inline-flex; }
#tendencia { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 6px; }
#tendencia .dd-sub { flex-basis: 100%; }
.numeros .dd-sub { font-size: .8rem; font-weight: 400; color: var(--text-2); white-space: nowrap; }
.numeros dt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* nível atual + mesmo período do ano passado, lado a lado */
.num-destaque dd { flex-direction: row !important; align-items: flex-end !important; justify-content: space-between; flex-wrap: wrap; gap: 6px 20px !important; }
.nivel-ano { display: flex; flex-direction: column; align-items: flex-end; text-align: right; padding: 6px 0 6px 16px; border-left: 2px dotted var(--ano); }
.nivel-ano[hidden] { display: none; }
.nivel-ano-rot { font-size: .8rem; font-weight: 400; color: var(--text-2); }
.nivel-ano-val { font-size: 1.5rem; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
@media (max-width: 767px) { .nivel-ano { align-items: flex-start; text-align: left; padding-left: 12px; } }

/* previsão enxuta */
.dia { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: default; }
.dia .ico { margin: 2px 0; }

/* previsão dentro do card de chuva */
.chuva-card { display: flex; flex-direction: column; }
.prev-titulo { margin: auto 0 8px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: baseline; color: var(--text); }
.prev-fonte { font-size: .78rem; font-weight: 400; color: var(--muted); }
.chuva-card .previsao { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.chuva-card .dia { padding: 10px 4px; }
.chuva-card .dia .ico { width: 28px; height: 28px; }
.chuva-card .dia-mm { font-size: 1.05rem; }
.chuva-card .dia-txt { font-size: .78rem; }
.numeros > div { min-width: 0; }
.num-24h dd, .mini-resumo { white-space: normal !important; }
.mini-dica { white-space: normal; }
.numeros .num-24h dt { white-space: normal; }

/* ===================================================== MARCA (logo) */
:root { --marca: #0d2a6b; --marca-2: #163f96; --ciano: #22b8f0; --sol: #fbbf24; --verm: #e11d2a; }

/* topo com as cores da logo */
.topo { background: linear-gradient(135deg, var(--marca), var(--marca-2)); border-bottom: 4px solid var(--ciano); }
.marca { gap: 12px; }
.marca-logo { height: 58px; width: auto; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.marca-txt { gap: 2px; }
.marca-txt small { font-size: .82rem; opacity: .9; }
.marca-txt small:first-child { font-weight: 600; opacity: 1; font-size: .9rem; }
.topo-in { min-height: 76px; }
@media (max-width: 767px) { .marca-logo { height: 48px; } .marca-txt small:first-child { display: none; } .topo-in { min-height: 64px; } }

/* ícones Phosphor (fonte de ícones) */
i.ico { display: inline-block; width: auto; height: auto; font-size: 1.3em; line-height: 1; vertical-align: -0.2em; stroke: none; fill: currentColor; }
.sit-icone i.ico { font-size: 34px; }
@media (max-width: 767px) { .sit-icone i.ico { font-size: 28px; } }
.dia i.ico { font-size: 32px; color: var(--ciano); margin: 4px 0; }
.chuva-card .dia i.ico { font-size: 28px; }
.dia i.ph-sun, .dia i.ph-cloud-sun { color: var(--sol); }
.dia i.ph-cloud-lightning { color: #a78bfa; }
.nivel-item i.ico { font-size: 28px; }
.camera-vazia i.ico-grande { font-size: 48px; }
.fontes-lista i.ico-p { font-size: .95em; margin-left: 6px; }
.faixa-independente i.ico { color: var(--accent); }
#tendencia i.ico { font-size: 1.1em; }

/* caixas com cabeçalho da marca */
.card { --pad: 20px; padding: var(--pad); }
@media (min-width: 768px) { .card { --pad: 24px; } }
@media (max-width: 767px) { .card { --pad: 16px; } }
.card > h2:first-child, .card > .card-cab:first-child {
  margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 18px;
  padding: 12px var(--pad);
  background: linear-gradient(135deg, var(--marca), var(--marca-2));
  color: #fff;
  border-bottom: 4px solid var(--ciano);
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
.card > .card-cab:first-child h2 { color: #fff; }
.card > h2:first-child i.ico, .card > .card-cab:first-child h2 i.ico { color: var(--ciano); }
.card > .card-cab:first-child .seletor { background: rgba(255,255,255,.12); }
.card > .card-cab:first-child .seletor button { color: #e6f0ff; }
.card > .card-cab:first-child .seletor button[aria-pressed="true"] { background: #fff; color: var(--marca); }
.card > .card-cab:first-child .radar-ctl button { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #fff; }
.card > .card-cab:first-child .radar-ctl span { color: #d6e8ff; }
.apoio > h2:first-child { color: #fff; }

/* faixa atual como a fita vermelha inclinada do "Agora" */
.sit-titulo {
  display: inline-block; padding: .04em .38em .08em; margin-top: 4px;
  background: var(--c); color: #111; border-radius: 10px;
  transform: skewX(-8deg); box-shadow: 0 3px 0 rgba(0,0,0,.18);
}
.situacao[data-sit="emergencia"] .sit-titulo { color: #fff; }
.situacao[data-sit="verificando"] .sit-titulo, .situacao[data-sit="sem-dados"] .sit-titulo { background: var(--cinza); color: #111; }

/* mini gráfico 24 h: maior, ocupa a caixa toda */
.mini { height: 190px; width: 100%; }
.mini svg { width: 100%; height: 100%; }
.mini text { font-size: 12px; }
.num-24h { display: flex; flex-direction: column; }
.num-24h dd { flex: 1; display: flex !important; flex-direction: column; }
.mini-resumo { margin-top: 8px !important; font-size: .95rem !important; color: var(--text) !important; }
@media (max-width: 767px) { .mini { height: 160px; } }
/* o estilo das caixas (.numeros div) não vale para as divs internas do mini gráfico */
.numeros .mini, .numeros .mini-resumo { padding: 0; background: none; border-radius: 0; }
/* celular: régua ao lado das 4 caixas e o gráfico de 24 h embaixo, na largura toda */
@media (max-width: 767px) {
  .sit-corpo { grid-template-columns: 128px 1fr; }
  .numeros { display: contents; }
  .regua-box { grid-column: 1; grid-row: 1 / span 4; }
  .numeros > div { grid-column: 2; }
  .numeros > .num-24h { grid-column: 1 / -1; grid-row: 5; }
}
@media (max-width: 767px) {
  .numeros > div:nth-child(1) { grid-row: 1; }
  .numeros > div:nth-child(2) { grid-row: 2; }
  .numeros > div:nth-child(3) { grid-row: 3; }
  .numeros > div:nth-child(4) { grid-row: 4; }
  .sit-corpo { row-gap: 8px; }
}
@media (max-width: 767px) { .numeros > div.num-destaque { grid-column: 2; } }

/* ---------------------------------------------- espaço publicitário */
.publicidade-card { grid-column: 1 / -1; padding-top: 12px; }
.pub-rotulo { margin: 0 0 8px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.pub-vazio { display: flex; align-items: center; gap: 14px; min-height: 96px; padding: 16px 18px; border: 2px dashed var(--border); border-radius: var(--radius-s); color: var(--text-2); }
.pub-vazio i.ico { font-size: 34px; color: var(--sol); }
.pub-vazio b { display: block; color: var(--text); }
.pub-item { display: grid; place-items: center; min-height: 96px; padding: 10px; border-radius: var(--radius-s); background: var(--surface-2); text-decoration: none; color: var(--text); }
.pub-item img { max-width: 100%; max-height: 110px; object-fit: contain; }

[hidden] { display: none !important; }

/* rio acima */
.montante-card { grid-column: 1 / -1; }
.mont-trilha { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 8px; }
@media (min-width: 900px) { .mont-trilha { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 10px; } .mont-seta { transform: rotate(-90deg); } }
.mont-seta { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 22px; }
.mont-est { background: var(--surface-2); border-radius: var(--radius-s); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mont-est.aqui { outline: 2px solid var(--ciano); outline-offset: -2px; }
.mont-est header b { display: block; font-size: 1.05rem; }
.mont-est header span { font-size: .82rem; color: var(--muted); }
.mont-nivel { font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.mont-var { font-size: .9rem; font-weight: 700; color: var(--text-2); display: flex; align-items: center; gap: 4px; }
.mont-var.sobe { color: var(--atencao); }
.mont-var.desce { color: var(--ok); }
.mont-linha { width: 100%; height: 34px; }
.mont-linha polyline { fill: none; stroke: var(--agua); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.mont-dados { display: flex; gap: 18px; margin: 0; }
.mont-dados dt { font-size: .76rem; color: var(--muted); }
.mont-dados dd { margin: 0; font-weight: 700; }
.mont-cota, .mont-sem { margin: 0; font-size: .8rem; color: var(--muted); }

/* máximo de 2 anos no gráfico do nível */
:root { --max2: #8b5cf6; }
.leg-max2 { border-top: 3px dotted var(--max2); }