/* ============================================================ Meteorologia · Previsão de ENA (pages/meteorologia_previsao_ena.py) Quatro seções. A 01 (#meteo-ena-prevs-secao): filtros em três grupos (Rodada A e Rodada B, cada um com o seu «Baixar prevs», e ENA), avisos, «Como ler» e três cards com as mesmas colunas — as colunas Modelo/Região presas na rolagem moram no `style_cell_conditional` da própria tabela (a largura é uma constante da página). A 02 (#meteo-ena-chuva-secao): filtros nos mesmos fieldsets, pílulas por série no cabeçalho do gráfico, gráfico que rola dentro do card e tabela do componente components/chuva_bacias_ui.py. A 03 (#meteo-ena-historico-secao): os mesmos fieldsets, quatro gráficos numa grade e a tabela da revisão. A 04 (#meteo-ena-bacias-secao): os fieldsets dos dois prevs (o B some no modo «Um prevs», pelo atributo `hidden`) e três cards com a MESMA tabela HTML por bacia (`.meteo-ena-bacias-*`): a primeira coluna presa na rolagem, as duas do mês com o fundo do acento e, na diferença, uma rampa de quatro degraus por sinal (`.meteo-ena-bacias-calor-{neg,pos}-{1..4}`). Só seletores `.meteo-ena-*` / `#meteo-ena-*`; nenhuma cor hard-coded — as faixas da diferença e a rampa da 04 são os tokens `--dif-*` e as pílulas, os de status (`--ok-*`, `--warn-*`, `--neutral-*`, `--danger-*`) de 00_tokens.css, que existem nos dois temas. ============================================================ */ .forecast-filter-card .card-body.meteo-ena-filter-body { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3) var(--sp-4); } /* Cada conjunto de controles num fieldset: os controles quebram de linha JUNTOS — um «Dia» da rodada A ao lado de um «Tipo» da B confundiria qual controle muda qual tabela. */ .meteo-ena-grupo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2) var(--sp-3); min-width: 0; margin: 0; padding: var(--sp-1) var(--sp-3) var(--sp-3); border: 1px solid var(--border-soft); border-radius: var(--r-md); background: var(--well); } /* O Bootstrap estiliza como título grande e flutuante. */ .meteo-ena-grupo-titulo { float: none; width: auto; margin: 0; padding: 0 var(--sp-1); color: var(--quiet); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: var(--lh-normal); } /* Largura FIXA nos ` largo é o que vem antes dele — daí o `:has(+ ...)`. Navegador sem `:has()` só deixa o campo com os 170px da base: perde largura, não quebra a tela. */ .meteo-ena-grupo > .meteo-ena-campo:last-child:not(.meteo-ena-campo-chips), .meteo-ena-grupo > .meteo-ena-campo:not(.meteo-ena-campo-chips):has(+ .meteo-ena-baixar), .meteo-ena-grupo > .meteo-ena-campo:has(> select[id$="-bacias-a-rodada"]), .meteo-ena-grupo > .meteo-ena-campo:has(> select[id$="-bacias-b-rodada"]) { flex-basis: 230px; } /* Na 04 o último filho do grupo é a «Revisão» («OUT-RV1»), que cabe nos 170px da base; o `, «Definitivo» e «Preliminar» empilhavam um sobre o outro. */ .meteo-ena-grupo > .meteo-ena-campo-chips { flex: 0 0 auto; } /* «Baixar prevs»: botão e recado na base da linha do grupo, ao lado do seletor de rodada — é dela que sai o zip. O recado (nº de arquivos e tamanho, ou o motivo de não ter baixado) quebra para a linha de baixo em tela estreita. */ .meteo-ena-baixar { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); padding-bottom: 1px; /* `width: 0` + `min-width: 100%` = uma linha inteira do grupo que NÃO entra na largura intrínseca dele. Com `flex-basis: auto` o botão e o recado somavam ~100px à base do fieldset (e o lado que já baixou ficava mais largo que o outro, porque o recado tem texto): o grupo ENA caía de linha e as duas rodadas deixavam de ter o mesmo tamanho. */ width: 0; min-width: 100%; } .meteo-ena-baixar-estado { color: var(--quiet); font-size: var(--fs-xs); line-height: var(--lh-normal); overflow-wrap: anywhere; } /* Botão à direita da linha dos grupos. */ .meteo-ena-acoes { margin-left: auto; } /* Chips do `dbc.RadioItems`/`dbc.Checklist` (components/page_ui.escolha e .chips) — mesma gramática do `.carga-dc-chip*`. O input nativo sai do fluxo mas continua focável; quem carrega o estado é o rótulo, via `label_checked_class_name`. */ .meteo-ena-chips { display: flex; flex-wrap: wrap; gap: 6px; } .meteo-ena-chips .form-check { display: inline-flex; margin: 0; padding: 0; min-height: 0; } .meteo-ena-chip-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .meteo-ena-chip { display: inline-flex; align-items: center; margin: 0; padding: 5px 11px; border-radius: var(--r-md); border: 1px solid var(--border-soft); background: var(--card); color: var(--text-dim); font-size: var(--fs-sm); font-weight: 550; line-height: 1.3; cursor: pointer; transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .meteo-ena-chip:hover { color: var(--text); border-color: var(--border); } .meteo-ena-chip-on { color: var(--text-strong); background: var(--accent-mid); border-color: var(--accent-edge); box-shadow: inset 0 0 0 1px var(--accent-edge); } .meteo-ena-chip-input:focus-visible + .meteo-ena-chip { outline: 2px solid var(--accent-edge); outline-offset: 2px; } .meteo-ena-filtros-estado { flex-basis: 100%; color: var(--quiet); font-size: var(--fs-xs); line-height: var(--lh-normal); } .meteo-ena-filtros-estado:empty { display: none; } /* Avisos ACIMA dos cards: são a razão de uma coluna estar em branco. Dentro da seção o espaço entre os blocos é o `gap` do `.section`, sem margem própria. */ .meteo-ena-avisos:empty { display: none; } .meteo-ena-aviso-lista { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; } .meteo-ena-aviso { padding: 4px 10px; color: var(--text); background: var(--warn-bg); border: 1px solid var(--warn-edge); border-radius: var(--r-md); font-size: var(--fs-xs); } /* «Como ler»: fechado por padrão, uma linha só entre os avisos e as tabelas. */ .meteo-ena-como-ler { margin: 0; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-soft); border-radius: var(--r-md); background: var(--card); color: var(--text-dim); font-size: var(--fs-sm); line-height: var(--lh-normal); } .meteo-ena-como-ler > summary { cursor: pointer; color: var(--text); font-weight: 600; } .meteo-ena-como-ler > summary:focus-visible { outline: 2px solid var(--accent-edge); outline-offset: 2px; } .meteo-ena-como-ler ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); } .meteo-ena-como-ler li + li { margin-top: var(--sp-1); } /* Cards e cabeçalho de contexto (título dinâmico + legenda da rodada, ou as pílulas das séries na 02). Entre os cards, o `gap` do `.section`. */ .meteo-ena-card { min-width: 0; background: var(--card); } .meteo-ena-card-cabecalho { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-soft); color: var(--quiet); font-size: var(--fs-xs); line-height: var(--lh-normal); overflow-wrap: anywhere; } .meteo-ena-card-cabecalho strong { color: var(--text); font-size: var(--fs-sm); letter-spacing: 0.02em; } .meteo-ena-card-cabecalho > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); } .meteo-ena-card .card-body { padding: var(--sp-2); min-width: 0; } .meteo-ena-unidade { padding: 1px 8px; border-radius: var(--r-md); background: var(--bg-elevated); color: var(--text-dim); font-weight: 600; } .meteo-ena-alerta { padding: 1px 8px; color: var(--text); background: var(--warn-bg); border: 1px solid var(--warn-edge); border-radius: var(--r-md); font-weight: 600; } /* Legenda das faixas, no slot à direita do título da seção 01. */ .meteo-ena-faixas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); color: var(--text-dim); font-size: var(--fs-xs); } .meteo-ena-faixa { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .meteo-ena-faixa-amostra { display: inline-block; width: 14px; height: 14px; border-radius: var(--r-xs); border: 1px solid var(--border); } .meteo-ena-faixa-neg-forte { background: var(--dif-neg-forte); } .meteo-ena-faixa-neg { background: var(--dif-neg); } .meteo-ena-faixa-pos { background: var(--dif-pos); } .meteo-ena-faixa-pos-forte { background: var(--dif-pos-forte); } /* Âncoras da subnav: a navbar é sticky e cobriria o título da seção. */ #meteo-ena-prevs-secao, #meteo-ena-chuva-secao, #meteo-ena-historico-secao, #meteo-ena-bacias-secao { scroll-margin-top: 112px; } /* ------------------------------------------------------------ 02 Chuva observada × prevista — classes `meteo-ena-chuva-*` ------------------------------------------------------------ */ /* Período «De–Até»: os `` levam `.hourly-date-input` (a caixa de data do dash, com o reset do container do dcc.Input) e aqui só ganham largura; o atalho «hoje» alinha com as caixas, na coluna do rótulo. Não é `.meteo-ena-campo`, que teria a base de 230px do último campo do grupo. A «caixa dentro da caixa» do `` interno é desligada no bloco `.date-input-boxed` do 20_dash_specifics. */ .meteo-ena-chuva-periodo { display: flex; align-items: flex-end; gap: var(--sp-2); } .meteo-ena-chuva-periodo .meteo-ena-chuva-campo-data { flex: 0 0 auto; min-width: 0; } /* 124px, a largura do campo de emissão: com a data em fs-sm, 116px a encostava no ícone. */ .meteo-ena-chuva-periodo .meteo-ena-chuva-campo-data .dash-input-container { width: 124px; } .meteo-ena-chuva-campo-hoje { display: flex; align-items: center; padding-bottom: 1px; } .meteo-ena-chuva-hoje { padding: 3px 10px; border-radius: var(--r-md); border: 1px solid var(--border-soft); background: transparent; color: var(--text-dim); font-size: var(--fs-xs); line-height: 1.5; cursor: pointer; } .meteo-ena-chuva-hoje:hover { color: var(--text-strong); border-color: var(--accent-edge); background: var(--accent-soft); } .meteo-ena-chuva-hoje:focus-visible { outline: 2px solid var(--accent-edge); outline-offset: 2px; } /* No nível bacia o filtro de bacia não tem o que recortar: desligado tem de parecer desligado. */ #meteo-ena-chuva-bacia:disabled { opacity: 0.55; cursor: not-allowed; } /* Os nove modelos previstos não cabem numa linha em tela média: aqui os chips quebram (os da escolha única, acima, nunca quebram). */ .meteo-ena-chuva-grupo-previsao { flex: 1 1 480px; } .meteo-ena-chuva-grupo-previsao > .meteo-ena-campo-chips { flex: 1 1 300px; min-width: 0; } /* Pílula por série no cabeçalho do gráfico: «rótulo · estado · detalhe · hh:mm», com a cor do estado. `inline-block` e não flex: os « · » são texto corrido. */ .meteo-ena-chuva-pilula { display: inline-block; padding: 1px 8px; border-radius: var(--r-md); border: 1px solid var(--border-soft); background: var(--bg-elevated); color: var(--text-dim); font-size: var(--fs-xs); line-height: var(--lh-normal); } .meteo-ena-card-cabecalho .meteo-ena-chuva-pilula strong { color: var(--text); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0; } .meteo-ena-chuva-pilula--ok { border-color: var(--ok-edge); background: var(--ok-bg); } .meteo-ena-chuva-pilula--parcial { border-color: var(--warn-edge); background: var(--warn-bg); } .meteo-ena-chuva-pilula--pendente { border-color: var(--neutral-edge); background: var(--neutral-bg); } .meteo-ena-chuva-pilula--ausente { border-color: var(--neutral-edge); border-style: dashed; background: var(--neutral-bg); } .meteo-ena-chuva-pilula--recusado { border-color: var(--danger-edge); background: var(--danger-bg); } /* Muitas categorias (128 sub-bacias): a figura ganha largura própria e rola AQUI, dentro do card — a página nunca rola na horizontal (PADROES_UI §4.7). */ .meteo-ena-chuva-rolagem { overflow-x: auto; } /* A tabela do Comparativo quebra o cabeçalho e o nome da linha pelas props do DataTable (`chuva_bacias_ui.tabela(..., quebra=True)`), e não aqui: CSS nas classes internas do dash-table precisaria de `!important` e se desligaria em silêncio num upgrade que as renomeie. */ /* ------------------------------------------------------------ 03 Histórico da revisão — classes `meteo-ena-hist-*` ------------------------------------------------------------ */ /* A revisão escolhida e o período que ela mede, no slot à direita do título. */ .meteo-ena-hist-alvo { color: var(--text-dim); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; } /* Um gráfico por submercado, dois por linha — grade CSS com gráficos independentes, não subplots (PADROES_UI §4.6). */ .meteo-ena-hist-graficos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-3); } .meteo-ena-hist-graficos > * { min-width: 0; } /* A legenda única dos quatro gráficos, no cabeçalho do card. A cor da amostra vem da página (`COR_MODELO`, de SERIES_COLORS), inline. */ .meteo-ena-hist-legenda-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--text-dim); } .meteo-ena-hist-amostra { display: inline-block; width: 16px; height: 3px; border-radius: 2px; } /* ------------------------------------------------------------ 04 Prevs por bacia — classes `meteo-ena-bacias-*` ------------------------------------------------------------ */ /* Os cards B e diferença (e o fieldset do B) somem no modo «Um prevs» pelo atributo `hidden`. O invólucro do card é `display: contents`: o card continua filho direto da seção, com o `gap` dela, e o invólucro não ocupa espaço. A regra de `[hidden]` vem DEPOIS e é mais específica: sem ela o `display` de cima venceria o do navegador. */ .meteo-ena-bacias-lado { display: contents; } .meteo-ena-bacias-lado[hidden], .meteo-ena-grupo[hidden] { display: none; } /* Os fieldsets dos prevs A e B têm a MESMA largura e o mesmo alinhamento: cada um carrega cinco controles (~1000px numa linha só) e, sem isto, o A crescia ao lado do «Modo» e o B caía sozinho na linha de baixo, mais estreito. Largo, os dois dividem a linha (como as rodadas A e B da 01) e quebram os controles por dentro; estreito, um por linha, os dois com a largura toda. O «Modo» vem depois, ao lado do «Atualizar». */ .meteo-ena-grupo-prevs { flex: 1 1 100%; } @media (min-width: 1360px) { .meteo-ena-grupo-prevs { flex: 1 1 calc(50% - var(--sp-4) / 2); } } /* A tabela rola AQUI, dentro do card: a página nunca rola para o lado. O `overflow-y` fica `hidden` (e não o `auto` que o `overflow-x: auto` sozinho calcularia): o conteúdo passa 1px da altura por causa do arredondamento do `border-collapse: separate`, e o `auto` desenharia uma barra vertical dentro de cada card — e no PNG do «Baixar imagem». */ .meteo-ena-bacias-rolagem { max-width: 100%; overflow-x: auto; overflow-y: hidden; } .meteo-ena-bacias-tabela { width: 100%; border-collapse: separate; border-spacing: 0; color: var(--text); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; } .meteo-ena-bacias-tabela th, .meteo-ena-bacias-tabela td { padding: 4px 10px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; vertical-align: middle; } .meteo-ena-bacias-num { text-align: right; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; } /* A primeira coluna fica presa na rolagem: é ela que diz de que bacia é o número quando o mês, à direita, está na tela. O fundo é opaco, senão os números passariam por baixo. */ .meteo-ena-bacias-tabela .meteo-ena-bacias-nome { position: sticky; left: 0; z-index: 1; min-width: 190px; background: var(--card); color: var(--text); text-align: left; font-weight: 500; } /* Faixa de datas e cabeçalhos de bloco: o fundo do cabeçalho do kit, texto discreto. */ .meteo-ena-bacias-tabela .meteo-ena-bacias-datas, .meteo-ena-bacias-tabela .meteo-ena-bacias-cabecalho > th { background: var(--bg-elevated); color: var(--quiet); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .meteo-ena-bacias-tabela .meteo-ena-bacias-datas { border-bottom: none; padding-bottom: 0; } .meteo-ena-bacias-tabela .meteo-ena-bacias-cabecalho > th { border-bottom: 1px solid var(--border); } /* O nome do bloco («Base», «Sudeste»): o título da tabela, em destaque. */ .meteo-ena-bacias-tabela .meteo-ena-bacias-bloco { color: var(--text); font-size: var(--fs-xs); letter-spacing: 0.04em; } /* Entre os blocos, um traço mais forte: o cabeçalho de cada um diz onde recomeça. */ .meteo-ena-bacias-tabela tbody + tbody .meteo-ena-bacias-cabecalho > th { border-top: 2px solid var(--border); } /* As duas colunas do mês: o cabeçalho com o fundo do acento (no lugar do laranja da tabela do ONS — a cor de destaque do dash) e um traço à esquerda das duas. */ .meteo-ena-bacias-tabela .meteo-ena-bacias-mes.meteo-ena-bacias-datas, .meteo-ena-bacias-tabela .meteo-ena-bacias-cabecalho > .meteo-ena-bacias-mes { background: var(--accent-mid); color: var(--text-strong); } .meteo-ena-bacias-tabela .meteo-ena-bacias-mes-inicio { border-left: 1px solid var(--border); } .meteo-ena-bacias-tabela .meteo-ena-bacias-datas.meteo-ena-bacias-mes { text-align: center; } /* Itaipu: linha de memória (já está dentro de BAIXO PARANÁ) — separada e mais discreta. */ .meteo-ena-bacias-tabela .meteo-ena-bacias-usina > * { border-top: 1px dashed var(--border); color: var(--text-dim); font-style: italic; } /* E a célula sem dado dela é a mesma das outras linhas — surdina, peso e traço normais —, não o cinza e o itálico da linha: o «—» em itálico lê-se como um traço mais pesado. */ .meteo-ena-bacias-tabela .meteo-ena-bacias-usina > .meteo-ena-bacias-sem-dado, .meteo-ena-bacias-tabela .meteo-ena-bacias-usina > .meteo-ena-bacias-sem-mlt { color: var(--muted); font-style: normal; font-weight: 400; } /* Célula sem dado («—») e %MLT que não existe (a usina): em surdina, nunca zero. */ .meteo-ena-bacias-sem-dado { color: var(--muted); } .meteo-ena-bacias-sem-mlt { color: var(--muted); } /* Mapa de calor da diferença: o degrau (1 a 4) por sinal é um token de 00_tokens.css, nos dois temas. As mesmas classes pintam as amostras da legenda do título. */ .meteo-ena-bacias-calor-neg-1 { background: var(--dif-neg-1); } .meteo-ena-bacias-calor-neg-2 { background: var(--dif-neg-2); } .meteo-ena-bacias-calor-neg-3 { background: var(--dif-neg-3); } .meteo-ena-bacias-calor-neg-4 { background: var(--dif-neg-4); } .meteo-ena-bacias-calor-pos-1 { background: var(--dif-pos-1); } .meteo-ena-bacias-calor-pos-2 { background: var(--dif-pos-2); } .meteo-ena-bacias-calor-pos-3 { background: var(--dif-pos-3); } .meteo-ena-bacias-calor-pos-4 { background: var(--dif-pos-4); } /* A legenda do mapa de calor, no slot à direita do título da seção: as quatro amostras de cada sinal, coladas, com o texto ao lado. */ .meteo-ena-bacias-rampa { display: inline-flex; align-items: center; gap: 0; } .meteo-ena-bacias-rampa .meteo-ena-faixa-amostra { border-radius: 0; } .meteo-ena-bacias-rampa .meteo-ena-faixa-amostra + .meteo-ena-faixa-amostra { border-left: none; } @media (max-width: 600px) { /* A coluna de nomes presa media 190px de uma tela de 324px de rolagem: o número quase não aparecia ao lado dela. Com ~120px os nomes quebram de linha («PARAÍBA DO SUL*» em duas) e sobra largura para as semanas. */ .meteo-ena-bacias-tabela .meteo-ena-bacias-nome { width: 120px; min-width: 120px; max-width: 120px; padding-inline: 6px; white-space: normal; overflow-wrap: anywhere; line-height: var(--lh-snug); } } @media (max-width: 720px) { /* No celular, 30 bacias × 5 séries num gráfico de ~330 px eram tiques sobrepostos, e o título passava por baixo da barra de ferramentas: aqui ele ganha largura mínima e rola dentro do card, como as 128 sub-bacias. */ .meteo-ena-chuva-rolagem #meteo-ena-chuva-grafico { min-width: 760px; } .meteo-ena-grupo { flex: 1 1 100%; } .meteo-ena-campo, .meteo-ena-grupo > .meteo-ena-campo:last-child:not(.meteo-ena-campo-chips), .meteo-ena-grupo > .meteo-ena-campo:not(.meteo-ena-campo-chips):has(+ .meteo-ena-baixar) { flex: 1 1 150px; } /* Os chips que no desktop nunca quebram (`flex: 0 0 auto`) ENCOLHEM aqui até a largura do grupo e quebram de linha dentro dele: os três observados da 02 («Horária (prévia)», «Diária (MERGE)», «Shadow ONS») mediam ~350 px numa linha só e empurravam a página para o lado até 397 px. Só o `flex-shrink`: a base de cada campo continua a dele (a dos Modelos da 02 é 300px). */ .meteo-ena-grupo > .meteo-ena-campo-chips { flex-shrink: 1; min-width: 0; } .meteo-ena-acoes { margin-left: 0; } .meteo-ena-hist-graficos { grid-template-columns: minmax(0, 1fr); } .meteo-ena-hist-alvo { white-space: normal; } .meteo-ena-chuva-periodo { flex: 1 1 100%; } /* `width: auto` no wrapper não servia: o dentro dele tem 100% da largura do wrapper, e os dois encolhiam até ~14px. Os dois campos dividem a linha. */ .meteo-ena-chuva-periodo .meteo-ena-chuva-campo-data { flex: 1 1 0; } .meteo-ena-chuva-periodo .meteo-ena-chuva-campo-hoje { flex: 0 0 auto; } .meteo-ena-chuva-periodo .meteo-ena-chuva-campo-data .dash-input-container { width: 100%; } /* A ~115px por campo, o respiro padrão (6px e 4px antes do ícone) cortava o último dígito da data; com menos folga ela cabe inteira e «hoje» fica na linha. */ .meteo-ena-chuva-periodo { --date-input-respiro: 3px; --date-input-respiro-icone: 2px; } }