/* Painel Iguaçu — identidade inspirada na ANA (azuis do logotipo institucional; a confirmar no manual de marca) */
/* o atributo hidden sempre vence: sem isto, classes com display (ex.: .bloco) mostram seções que deviam sumir */
[hidden] { display: none !important; }
:root {
  --azul-escuro: #294086;
  --azul-medio: #0193DE;
  --azul-claro: #80B5E1;
  --marinho: #000080;
  --limite: #C0504D;
  --fsarh: #E08A1E;
  --ok: #2E8B57;
  --aviso: #D9A400;
  --off: #9CA3AF;
  --texto: #1F2937;
  --texto-suave: #6B7280;
  --fundo: #F6F8FB;
  --cartao: #FFFFFF;
  --borda: #E3E8F0;
  --fonte: "Questrial", "Century Gothic", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--fonte); color: var(--texto); background: var(--fundo); font-size: 15px; line-height: 1.45; }
a { color: var(--azul-medio); text-decoration: none; }
a:hover { text-decoration: underline; }

/* cabeçalho */
/* barra principal fixa no topo; --h-topo é medida em app.js e usada pelo índice e pelas âncoras */
.topo { background: var(--cartao); border-top: 5px solid var(--azul-escuro); border-bottom: 1px solid var(--borda);
        position: sticky; top: 0; z-index: 1100; }
.topo .interno { max-width: 1280px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.marca { display: flex; align-items: center; gap: 10px; color: var(--azul-escuro); font-size: 20px; letter-spacing: .3px; }
.marca:hover { text-decoration: none; }
.marca svg { width: 40px; height: 26px; }
.marca small { display: block; font-size: 11px; color: var(--texto-suave); letter-spacing: .5px; text-transform: uppercase; }
nav.menu { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
nav.menu a { padding: 8px 12px; border-radius: 6px; color: var(--azul-escuro); font-size: 14px; }
nav.menu a:hover { background: var(--fundo); text-decoration: none; }
nav.menu a.ativo { background: var(--azul-escuro); color: #fff; }
.carimbo { font-size: 12px; color: var(--texto-suave); width: 100%; display: flex; gap: 16px; flex-wrap: wrap; padding-top: 4px; }
.carimbo b { color: var(--texto); font-weight: normal; }

/* trilha de navegação */
.trilha { font-size: 13px; color: var(--texto-suave); margin: 0 0 10px; }
.trilha a { color: var(--azul-escuro); }
.trilha .sep { margin: 0 6px; color: var(--azul-claro); }

/* corpo */
main { max-width: 1280px; margin: 0 auto; padding: 20px; }
h1 { font-size: 24px; color: var(--azul-escuro); margin: 0 0 4px; font-weight: normal; }
h2 { font-size: 17px; color: var(--azul-escuro); margin: 28px 0 10px; font-weight: normal; border-bottom: 1px solid var(--borda); padding-bottom: 4px; }
h3 { font-size: 15px; margin: 16px 0 6px; font-weight: normal; color: var(--marinho); }
.sub { color: var(--texto-suave); margin: 0 0 18px; }
.grade { display: grid; gap: 14px; }
.grade.c2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grade.c3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grade.c4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; padding: 14px 16px; }
.cartao .rotulo { font-size: 12px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .4px; }
.cartao .valor { font-size: 26px; color: var(--azul-escuro); margin: 2px 0; }
.cartao .valor small { font-size: 13px; color: var(--texto-suave); }
.cartao .nota { font-size: 12px; color: var(--texto-suave); }
.grafico { width: 100%; min-height: 300px; }
.grafico.baixo { min-height: 220px; }

/* cascata */
.cascata { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.bloco { background: var(--cartao); border: 1px solid var(--borda); border-left: 5px solid var(--azul-medio); border-radius: 8px; padding: 10px 12px; color: inherit; display: block; position: relative; }
.bloco:hover { border-color: var(--azul-escuro); text-decoration: none; box-shadow: 0 2px 8px rgba(41,64,134,.12); }
.bloco.acumulacao { border-left-color: var(--azul-escuro); }
.bloco .nome { color: var(--azul-escuro); font-size: 15px; }
.bloco .tipo { font-size: 11px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .4px; }
.bloco .linha { display: flex; justify-content: space-between; font-size: 13px; margin-top: 4px; }
.bloco .linha b { font-weight: normal; color: var(--texto); }
.bloco .linha span { color: var(--texto-suave); }
.bloco .seta { position: absolute; right: -12px; top: 45%; color: var(--azul-claro); font-size: 18px; }
.tend { font-size: 12px; margin-left: 4px; }
.tend.sobe { color: var(--azul-medio); } .tend.desce { color: var(--limite); } .tend.igual { color: var(--texto-suave); }

/* frescor */
.ponto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.ponto.ok { background: var(--ok); } .ponto.aviso { background: var(--aviso); } .ponto.off { background: var(--off); }

/* avisos */
.aviso-item { border-left: 4px solid var(--aviso); background: #FFFBEA; padding: 8px 12px; border-radius: 6px; margin: 6px 0; font-size: 14px; }
.aviso-item.info { border-left-color: var(--azul-claro); background: #F0F7FD; }
.aviso-item.fonte { border-left-color: var(--off); background: #F5F6F8; }
.aviso-item .meta { font-size: 12px; color: var(--texto-suave); }

/* tabelas */
.tabela-wrap { overflow-x: auto; }
table.tab { border-collapse: collapse; width: 100%; font-size: 13.5px; background: var(--cartao); }
table.tab th, table.tab td { padding: 7px 9px; border-bottom: 1px solid var(--borda); text-align: left; white-space: normal; vertical-align: top; }
table.tab td.num, table.tab th.num, table.tab td.spark { white-space: nowrap; }
table.tab th { vertical-align: bottom; }
table.tab th { background: #EEF3FA; color: var(--azul-escuro); font-weight: normal; cursor: pointer; user-select: none; position: sticky; top: 0; }
table.tab th.num, table.tab td.num { text-align: right; }
table.tab tr:hover td { background: #F8FAFD; }
table.tab td.spark svg { vertical-align: middle; }

/* controles */
.controles { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0 16px; }
.controles button, .controles select, .controles input { font-family: inherit; font-size: 13px; padding: 6px 12px; border: 1px solid var(--borda); background: var(--cartao); border-radius: 6px; color: var(--azul-escuro); cursor: pointer; }
.controles button.ativo { background: var(--azul-escuro); color: #fff; border-color: var(--azul-escuro); }
.chip { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 10px; background: #EEF3FA; color: var(--azul-escuro); margin-left: 6px; }

/* mapa */
#mapa { height: 520px; border-radius: 10px; border: 1px solid var(--borda); }
/* o Leaflet dá z-index alto a controles e legendas; isolar o mapa mantém tudo abaixo da barra e do índice */
.leaflet-container { position: relative; z-index: 0; isolation: isolate; }
.legenda-mapa { background: #fff; padding: 8px 10px; border-radius: 6px; font-size: 12px; line-height: 1.6; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.legenda-mapa i { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: middle; border-radius: 2px; }
.legenda-mapa svg { vertical-align: middle; margin-right: 4px; }
.rotulo-usina { background: transparent; border: 0; box-shadow: none; font: 11.5px Questrial, "Century Gothic", sans-serif; color: #294086; padding: 0; }
.rotulo-usina:before { display: none; }

/* regras */
.regra { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; padding: 8px 0; border-bottom: 1px dashed var(--borda); font-size: 13.5px; }
.regra .v { color: var(--azul-escuro); font-size: 16px; }
.regra .f { color: var(--texto-suave); font-size: 12.5px; grid-column: 2; }

/* esquema longitudinal */
.esquema-wrap { overflow-x: auto; }
.esquema-wrap svg { display: block; }
.esquema-wrap a:hover circle, .esquema-wrap a:hover rect { filter: brightness(1.15); }
.legenda-esquema { display: grid; grid-template-columns: minmax(300px, 3fr) minmax(170px, 1fr) minmax(200px, 1.3fr); gap: 10px 28px; font-size: 12px; color: var(--texto); padding: 10px 10px 6px; border-top: 1px solid var(--borda); margin-top: 6px; }
.legenda-esquema .tit { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--texto-suave); margin-bottom: 4px; }
.legenda-esquema .li { display: flex; gap: 8px; align-items: flex-start; margin: 3px 0; line-height: 1.35; }
.legenda-esquema .ic { flex: 0 0 22px; display: flex; justify-content: center; padding-top: 2px; }
.legenda-esquema b { color: var(--azul-escuro); font-weight: normal; }
@media (max-width: 900px) { .legenda-esquema { grid-template-columns: 1fr; } }
.legenda-esquema i.lg { display: inline-block; width: 11px; height: 11px; margin-right: 4px; vertical-align: middle; border-radius: 50%; }
.legenda-esquema i.usina { background: var(--azul-escuro); border-radius: 3px; width: 16px; }
.legenda-esquema i.regua { background: var(--azul-medio); }
.legenda-esquema i.afl { background: transparent; border: 2px dashed var(--azul-claro); }
.legenda-esquema i.ok { background: var(--ok); } .legenda-esquema i.aviso { background: var(--aviso); } .legenda-esquema i.off { background: var(--off); }
.legenda-esquema i.alerta { background: var(--fsarh); }

/* pontos do trecho */
.ponto-trecho { display: block; background: var(--cartao); border: 1px solid var(--borda); border-left: 4px solid var(--azul-claro); border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; color: inherit; }
.ponto-trecho:hover { text-decoration: none; border-color: var(--azul-escuro); }
.ponto-trecho.usina { border-left-color: var(--azul-escuro); background: #F4F7FC; }
.ponto-trecho.afluente { border-left-style: dashed; margin-left: 24px; }
.ponto-trecho .papel { font-size: 11px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .4px; }
.ponto-trecho .nome { color: var(--azul-escuro); font-size: 15px; margin: 1px 0 4px; }
.ponto-trecho .nome small { color: var(--texto-suave); font-size: 11.5px; }
.ponto-trecho .valores { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; font-size: 13px; }
.ponto-trecho .valores b { font-size: 17px; font-weight: normal; color: var(--texto); }
.ponto-trecho .ref { font-size: 11.5px; color: var(--texto-suave); }
.ponto-trecho .spark { margin-left: auto; text-align: right; }

.ponto-trecho .valores > div { min-width: 120px; }
.ponto-trecho .var { font-size: 11px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .3px; }
.mapa-caixa { position: relative; }
.situacao { position: absolute; right: 8px; top: 8px; width: 176px; height: 96px; overflow: hidden; border: 1px solid var(--azul-escuro); border-radius: 4px; background: #fff; z-index: 800; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.situacao .leaflet-control-attribution { display: none; }

/* páginas em seções com índice fixo (trecho, estação, chuva, catálogo) */
.indice { position: sticky; top: var(--h-topo, 0px); z-index: 900; background: rgba(246,248,251,.96); backdrop-filter: blur(4px); border-bottom: 1px solid var(--borda); margin: 14px -20px 0; padding: 8px 20px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.indice a.sec { padding: 5px 11px; border-radius: 14px; font-size: 13px; color: var(--azul-escuro); background: #EEF3FA; }
.indice a.sec:hover { background: var(--azul-claro); color: #fff; text-decoration: none; }
.indice .janela { margin-left: auto; display: flex; gap: 4px; align-items: center; font-size: 12.5px; color: var(--texto-suave); }
.indice .janela button { font-family: inherit; font-size: 12.5px; padding: 4px 10px; border: 1px solid var(--borda); background: #fff; border-radius: 6px; color: var(--azul-escuro); cursor: pointer; }
.indice .janela button.ativo { background: var(--azul-escuro); color: #fff; border-color: var(--azul-escuro); }
section.bloco { margin-top: 34px; scroll-margin-top: calc(var(--h-topo, 0px) + 64px); }
section.bloco > h2 { font-size: 19px; border: 0; padding: 0; margin: 0 0 2px; }
section.bloco > h2 small { font-size: 12px; color: var(--texto-suave); letter-spacing: .5px; text-transform: uppercase; margin-right: 8px; }
section.bloco > p.sub { margin-bottom: 12px; }
section.bloco h3 { font-size: 15px; color: var(--azul-escuro); margin: 22px 0 2px; }
section.bloco p.explica { font-size: 13px; color: var(--texto-suave); margin: 0 0 6px; max-width: 900px; }
@media (max-width: 700px) { .indice { margin: 14px -14px 0; padding: 8px 14px; } }

.nota-tabela { font-size: 12.5px; color: var(--texto-suave); margin: 8px 2px 0; max-width: 1000px; line-height: 1.5; }

/* rodapé */
footer { border-top: 1px solid var(--borda); margin-top: 40px; background: var(--cartao); }
footer .interno { max-width: 1280px; margin: 0 auto; padding: 18px 20px; font-size: 12.5px; color: var(--texto-suave); }
footer p { margin: 4px 0; }
.alerta-fixo { background: #FFF7E6; border: 1px solid #F2D8A0; border-radius: 8px; padding: 10px 14px; font-size: 13px; margin: 14px 0; }

@media (max-width: 700px) {
  main { padding: 14px; }
  .cartao .valor { font-size: 22px; }
  .bloco .seta { display: none; }
  #mapa { height: 360px; }
  /* no celular a barra ocuparia mais de um terço da tela: fixo fica só o índice das seções */
  .topo { position: static; }
}