:root{color-scheme:dark;--bg:#071522;--panel:#0e2232;--line:#29465b;--text:#eef6fb;--muted:#a8bdcc;--accent:#42d8e8;--green:#63e6ad}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 50% -20%,#15364a 0,transparent 55%),var(--bg);color:var(--text);font:16px/1.55 system-ui,-apple-system,Segoe UI,sans-serif}
a{color:#7de9f3}
.topbar{min-height:68px;padding:12px max(20px,calc((100% - 1100px)/2));display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid var(--line);background:#081a28}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:850;text-decoration:none}
.topbar nav{display:flex;gap:18px;flex-wrap:wrap;font-size:.9rem}
.shell{width:min(100% - 32px,1000px);margin:0 auto;padding:34px 0 48px}
.hero{padding:12px 0 26px}
.eyebrow{margin:0 0 8px;color:var(--accent);font-size:.72rem;font-weight:850;letter-spacing:.13em}
h1{margin:0;font-size:clamp(2rem,6vw,3.5rem);line-height:1.05;letter-spacing:-.04em}
h2{margin:0;font-size:1.25rem}
.intro{max-width:720px;color:var(--muted);font-size:1.05rem}
.status-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;color:var(--muted);font-size:.83rem}
.status-dot{width:9px;height:9px;border-radius:50%;background:#f2b95e;box-shadow:0 0 0 4px #f2b95e22}
.notice,.station-card,.method{border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,#10283a,#0b1b29);padding:20px}
.notice{border-left:4px solid #f2b95e}
.notice p{margin:8px 0;color:#e6eef4}
.notice-small{font-size:.82rem!important;color:var(--muted)!important}
.section-heading{display:flex;justify-content:space-between;align-items:end;margin:30px 0 14px}
.count{padding:4px 10px;border:1px solid var(--line);border-radius:99px;color:var(--muted);font-size:.8rem}
.station-list{display:grid;gap:14px}
.station-card h3{margin:0;font-size:1.2rem}
.station-meta{color:var(--muted);font-size:.88rem}
.station-state{display:inline-block;margin:12px 0 4px;padding:5px 9px;border-radius:7px;background:#3b3020;color:#ffd58a;font-size:.78rem;font-weight:750}
.station-reading{margin:8px 0 14px;padding:14px;border-radius:12px;background:#081a28;border:1px solid #29465b}
.station-reading strong{display:block;font-size:1.1rem}
.source-list{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:12px}
.source-list a{font-size:.86rem;font-weight:650}
.station-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.station-actions a{display:inline-flex;min-height:42px;align-items:center;padding:8px 12px;border:1px solid #3d7188;border-radius:9px;text-decoration:none}
.method{margin-top:26px}
.method ul{padding-left:20px;color:var(--muted)}
.method li+li{margin-top:8px}
footer{display:flex;gap:18px;flex-wrap:wrap;margin-top:28px;padding-top:18px;border-top:1px solid var(--line);font-size:.84rem}
.loading{color:var(--muted)}
@media(max-width:620px){.topbar{align-items:flex-start;flex-direction:column}.topbar nav{gap:12px}.shell{width:min(100% - 24px,1000px);padding-top:22px}.notice,.station-card,.method{padding:16px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Fontes hidrológicas: estado operacional e escopo sempre explícitos. */
.source-heading{margin:18px 0 8px;font-size:.95rem}
.source-list{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;list-style:none;padding:0;margin:10px 0 0}
.source-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:3px 12px;padding:11px;border:1px solid var(--line);border-radius:10px;background:#081a28;min-width:0}
.source-item>a{font-weight:700;overflow-wrap:anywhere}
.source-status{font-size:.75rem;color:#8ce9c2;text-align:right}
.source-scope,.source-caveat{grid-column:1/-1;color:var(--muted);font-size:.76rem;line-height:1.45}
.source-caveat{color:#ffd58a}
.source-retired{border-style:dashed;opacity:.9}
@media(max-width:520px){.source-item{grid-template-columns:minmax(0,1fr)}.source-status{text-align:left}}

.location-panel{display:grid;grid-template-columns:1fr minmax(280px,420px);gap:22px;align-items:start;margin:20px 0;padding:20px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,#10283a,#0b1b29)}
.location-controls{display:grid;grid-template-columns:1fr 90px;gap:7px 10px}
.location-controls label{font-size:.8rem;color:var(--muted);font-weight:700}
.location-controls input,.location-controls select{width:100%;min-height:42px;padding:9px 11px;border:1px solid #3a5a70;border-radius:9px;background:#071522;color:var(--text);font:inherit}
.location-controls label[for=radiusInput],#radiusInput{grid-column:1/-1}
.location-actions{grid-column:1/-1;display:flex;gap:9px;flex-wrap:wrap}
.location-actions button{min-height:44px;padding:9px 13px;border:1px solid #42d8e8;border-radius:9px;background:#124052;color:#eefcff;font:inherit;font-weight:750;cursor:pointer}
.location-actions button.secondary{background:transparent;border-color:#52758a}
#locationStatus{grid-column:1/-1;margin:3px 0 0}
.station-tags{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.station-tags span{padding:4px 9px;border:1px solid #35566b;border-radius:99px;color:#bfeaf0;font-size:.76rem}
@media(max-width:680px){.location-panel{grid-template-columns:1fr;padding:16px}.location-controls{grid-template-columns:1fr 76px}}
@media(prefers-reduced-motion:reduce){.location-actions button{transition:none}}

/* Descoberta regional: campos empilhados, sem colunas comprimidas em telas móveis. */
.location-panel{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin:20px 0 26px;padding:clamp(18px,3vw,26px);border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,#10283a,#0b1b29);box-shadow:0 14px 34px #0002}
.location-intro h2{font-size:clamp(1.25rem,3vw,1.55rem);margin:0 0 10px}
.location-intro .station-meta{max-width:760px;line-height:1.6}
.location-status{margin:14px 0 0;padding:10px 12px;border-radius:10px;background:#071a28;border:1px solid #29465b;color:#b8d0df;font-size:.9rem}
.location-controls{display:grid;grid-template-columns:minmax(0,1fr) 104px;gap:13px 12px;align-items:end;min-width:0}
.location-field{display:grid;gap:6px;min-width:0}
.location-field label{color:var(--muted);font-size:.88rem;font-weight:750}
.location-field input,.location-field select{width:100%;min-width:0;min-height:50px;padding:11px 13px;border:1px solid #3a5a70;border-radius:12px;background:#071a28;color:var(--text);font:inherit}
.location-field input:focus-visible,.location-field select:focus-visible,.location-actions button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.location-field-uf{grid-column:2;grid-row:1}
.location-field-radius{grid-column:1/-1}
.location-actions{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:10px}
.location-actions button{min-height:50px;padding:10px 14px;border:1px solid var(--accent);border-radius:12px;background:#124052;color:#eefcff;font:inherit;font-weight:750;cursor:pointer}
.location-actions button.secondary{background:#19394b;border-color:#3b6075}
.location-actions button:disabled{opacity:.6;cursor:wait}
@media(min-width:760px){.location-panel{grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);align-items:start}.location-intro{padding:4px 12px 0 0}}
@media(max-width:420px){.location-controls{grid-template-columns:minmax(0,1fr) 76px}.location-actions{grid-template-columns:1fr}.location-actions button{width:100%}}

/* Consulta telemétrica por estação: valores sempre associados à origem e qualidade. */
.telemetry-query{display:inline-flex;min-height:42px;align-items:center;padding:8px 13px;border:1px solid var(--accent);border-radius:10px;background:#124052;color:#eefcff;font:inherit;font-weight:750;cursor:pointer}
.telemetry-query:disabled{opacity:.65;cursor:wait}
.telemetry-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:12px 0}
.telemetry-values>div{display:grid;gap:4px;min-width:0;padding:10px;border:1px solid var(--line);border-radius:10px;background:#10283a}
.telemetry-values span{color:var(--muted);font-size:.78rem;font-weight:750}
.telemetry-values b{font-size:.86rem;overflow-wrap:anywhere}
@media(max-width:520px){.telemetry-values{grid-template-columns:1fr}}

/* Ajustes de composição mobile para a página de rios. */
.location-panel{margin-bottom:18px}
.notice{margin:0}
.section-heading{margin:22px 0 12px;align-items:center;gap:12px}
.section-heading>div{min-width:0}
.section-heading h2{font-size:clamp(1.08rem,4.5vw,1.35rem);line-height:1.2}
.section-heading .eyebrow{margin-bottom:5px}
.count{flex:0 0 auto;white-space:nowrap}
.station-list{min-width:0}
.station-card{min-width:0;overflow-wrap:anywhere}
.station-card .station-meta{line-height:1.55}
.station-actions{align-items:stretch}
.station-actions a,.station-actions button{justify-content:center;text-align:center;max-width:100%;overflow-wrap:anywhere}
.station-actions .telemetry-query{flex:1 1 190px}
.station-actions a{flex:0 1 auto}
.loading{min-height:76px;display:flex;align-items:center;gap:10px}
.loading::before{content:"";width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px #42d8e822}
@media(max-width:520px){
  .shell{padding-bottom:32px}
  .location-panel{gap:16px;margin-top:14px;margin-bottom:16px}
  .notice{padding:16px}
  .notice h2{font-size:1.12rem}
  .notice p{line-height:1.5}
  .section-heading{margin-top:20px}
  .station-card{padding:16px}
  .station-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .station-actions .telemetry-query{grid-column:1/-1}
  .station-actions a{min-width:0}
  .method{margin-top:20px}
}
@media(max-width:360px){
  .station-actions{grid-template-columns:minmax(0,1fr)}
  .station-actions .telemetry-query{grid-column:auto}
}

/* Filtros e paginação progressiva do inventário regional. */
.station-filters{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr));gap:12px;margin:0 0 10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#0b1d2b}
.filter-field{display:grid;gap:6px;min-width:0}
.filter-field label{font-size:.78rem;font-weight:750;color:var(--muted)}
.filter-field input,.filter-field select{width:100%;min-width:0;min-height:44px;padding:9px 11px;border:1px solid #3a5a70;border-radius:9px;background:#071522;color:var(--text);font:inherit}
.station-result-summary{margin:8px 2px 12px;color:var(--muted);font-size:.82rem}
.load-more{width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--accent);border-radius:12px;background:#124052;color:#eefcff;font:inherit;font-weight:750;cursor:pointer}
@media(max-width:680px){.station-filters{grid-template-columns:minmax(0,1fr)}}

/* Hierarquia de agrupamento por rio e bacia, sem repetir metadados nos cartões. */
.station-group{min-width:0;display:grid;gap:10px}
.station-group+.station-group{margin-top:8px}
.station-group-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border:1px solid #29465b;border-radius:12px;background:#0b1d2b}
.station-group-header>div{min-width:0}
.station-group-header .eyebrow{margin:0 0 3px}
.station-group-header h3{margin:0;font-size:1rem;line-height:1.3;overflow-wrap:anywhere}
.station-group-count{flex:0 0 auto;padding:4px 8px;border:1px solid #35566b;border-radius:99px;color:var(--muted);font-size:.75rem;white-space:nowrap}
.station-group-cards{display:grid;gap:10px;padding-left:12px;border-left:2px solid #244357}
.station-group-cards .station-card{padding:16px}
.station-group-cards .station-card h3{font-size:1.05rem}
.station-group-cards .station-tags{margin:8px 0}
@media(max-width:420px){
  .station-group-header{align-items:flex-start;padding:10px}
  .station-group-count{font-size:.7rem}
  .station-group-cards{padding-left:8px}
}

.station-filters{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:860px){.station-filters{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.station-filters{grid-template-columns:minmax(0,1fr)}}
.station-group-cards .station-tags span{white-space:normal;overflow-wrap:anywhere}