/* ============================================================ Meteorologia · Previsão de ENA (pages/meteorologia_previsao_ena.py) Duas seções. A 01 (#meteo-ena-prevs-secao): filtros em três grupos (Rodada A, Rodada B, 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. Só seletores `.meteo-ena-*` / `#meteo-ena-*`; nenhuma cor hard-coded — as faixas da diferença 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 ``, «Definitivo» e «Preliminar» empilhavam um sobre o outro. */ .meteo-ena-grupo > .meteo-ena-campo-chips { flex: 0 0 auto; } /* 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 { scroll-margin-top: 112px; } /* ------------------------------------------------------------ 02 Chuva observada × prevista — classes `meteo-ena-chuva-*` ------------------------------------------------------------ */ /* Dia: o `` leva `.hourly-date-input` (a caixa de data do dash, com o reset do container do dcc.Input) e aqui só ganha largura; o atalho «hoje» fica na mesma linha. Não é `.meteo-ena-campo`, que teria a base de 230px do último campo do grupo. */ .meteo-ena-chuva-campo-dia { flex: 0 0 auto; min-width: 0; } .meteo-ena-chuva-dia-linha { display: flex; align-items: center; gap: var(--sp-2); } .meteo-ena-chuva-dia-linha .meteo-ena-chuva-dia { width: 132px; } .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. */ @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) { flex: 1 1 150px; } .meteo-ena-acoes { margin-left: 0; } .meteo-ena-chuva-campo-dia { flex: 1 1 100%; } .meteo-ena-chuva-dia-linha .meteo-ena-chuva-dia { flex: 1 1 auto; width: auto; } }