/* ============================================================ Carga · NEWAVE (pages/carga_newave.py) A carga mensal de um deck do PMO, o verificado do ONS por cima, a matriz de revisões e o mês aberto em patamares. Mesma gramática das páginas do grupo DESSEM e das de Hidrologia — filtro único em linha, avisos ACIMA das seções, cards com cabeçalho de contexto, KPIs em grade. Só seletores `.carga-nw-*` / `#carga-nw-*`, e nenhuma cor fora das variáveis do tema. ============================================================ */ /* ---- filtro global ------------------------------------------------------- Quatro controles e dois botões numa linha só. O ``. */ .carga-nw-acoes { margin-left: auto; } /* Filtros que servem a UMA seção (a grandeza do mapa, os dois meses) moram dentro dela, não no card do topo: um seletor de mês no filtro global sugeriria que ele recorta a página inteira, e ele não recorta. */ .carga-nw-secao-filtros { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-3); } .carga-nw-secao-filtros .carga-nw-campo { flex: 0 1 220px; } .carga-nw-secao-filtros .carga-nw-campo:first-child { flex: 0 1 220px; max-width: none; } /* ---- chips do `dbc.Checklist` (components/page_ui.chips) ----------------- O input nativo sai do fluxo (não some: continua focável e visível ao leitor de tela) e quem carrega o estado é o rótulo, via `label_checked_class_name` — a marcação do dbc põe input e label como IRMÃOS, não aninhados, então o `:has()` do CSS não é necessário. Mesmo arranjo de `.dessem-renov-chip*`. */ .carga-nw-chips { display: flex; flex-wrap: wrap; gap: 6px; } .carga-nw-chips .form-check { display: inline-flex; margin: 0; padding: 0; min-height: 0; } .carga-nw-chip-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .carga-nw-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(--well); 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); } .carga-nw-chip:hover { color: var(--text); border-color: var(--border); } /* O anel interno dobra a espessura da borda: no tema CLARO o `--accent-mid` é um tingimento leve sobre branco, e sozinho quase não distingue o chip marcado. */ .carga-nw-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); } /* Foco de teclado: sem isto o chip fica invisível para quem navega por TAB, porque o contorno nativo mora no input, que está fora do fluxo. */ .carga-nw-chip-input:focus-visible + .carga-nw-chip { outline: 2px solid var(--accent-edge); outline-offset: 2px; } /* ---- linha de estado e avisos ------------------------------------------- O estado dos filtros diz o que está desenhado (o nome do estudo, as fontes na pilha, o cadastro que sustenta GHmin e GTmin); os avisos dizem por que um número está faltando ou mede outra coisa. Os dois ficam ACIMA das seções — embaixo do gráfico ninguém os leria antes de estranhar o buraco. */ .carga-nw-filtros-estado { flex-basis: 100%; color: var(--quiet); font-size: var(--fs-xs); line-height: var(--lh-normal); } .carga-nw-filtros-estado:empty { display: none; } .carga-nw-avisos:empty { display: none; } .carga-nw-aviso-lista { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); } .carga-nw-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); } /* ---- cards --------------------------------------------------------------- O cabeçalho de contexto é longo de propósito (é ele que carrega a definição de carga líquida e a ressalva da MMGD), então quebra em várias linhas e nunca corta palavra no meio. */ .carga-nw-card { min-width: 0; background: var(--card); } .carga-nw-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; } .carga-nw-card-cabecalho strong { color: var(--text); font-size: var(--fs-sm); } .carga-nw-card .card-body { padding: var(--sp-2); min-width: 0; } /* ---- KPIs ---------------------------------------------------------------- São sete tiles (previsto global, previsto líquida, verificado, desvio, média do horizonte, erro típico e frescor). `auto-fit` com piso de 200 px cabe quatro por linha a 1.440 px e dois a 900 px, sem uma regra por largura. */ .carga-nw-kpis { margin-bottom: var(--sp-4); } /* Quatro colunas, não `auto-fit`: com piso de 200 px cabiam seis por linha a 1.440 px, o sétimo tile ficava órfão numa segunda linha vazia e o rodapé de cada um — que é onde mora o denominador («6,9 de 30 dias medidos», «32 meses fechados») — quebrava em cinco linhas. */ .carga-nw-kpis .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* ---- grades das seções --------------------------------------------------- 02 é uma coluna: a tabela tem treze colunas (global, MMGD, as sete fontes, líquida, verificado e os dois desvios) e pede a largura inteira; espremida ao lado do gráfico ela nasceria com rolagem horizontal. */ .carga-nw-mensal-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--density-gap); } /* 03: o heatmap tem treze colunas de números de cinco dígitos e é quem precisa de largura; a evolução é uma linha só. */ /* `align-items: start` nas três grades de duas colunas: o heatmap cresce com o número de meses (118 + 34 px por linha) e a figura ao lado tem altura fixa — esticada, ela virava um card com 200 px de vazio embaixo do gráfico. */ .carga-nw-decks-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--density-gap); align-items: start; } /* 04 e 05: a tabela é estreita (cinco colunas) e o gráfico é quem ganha espaço em 04; em 05 é o contrário — oito colunas contra três barras agrupadas. O PISO em pixels na coluna da TABELA (a 1ª em 04, a 2ª em 05) não é chute: a 1.280 px as duas frações ficavam abaixo do conteúdo (medido: 468 px de coluna para 490 de tabela em 04; 712 para 773 em 05) e as duas cortavam a última coluna — a de «Meses», que é o denominador, e a de «MMGD», que é a coluna à parte que o cabeçalho explica. Com o piso, quem encolhe é o GRÁFICO, que escala sem perder informação; a tabela só rola quando nem o piso cabe. */ .carga-nw-acerto-grid { display: grid; grid-template-columns: minmax(510px, 2fr) minmax(0, 3fr); gap: var(--density-gap); align-items: start; } .carga-nw-patamar-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(800px, 3fr); gap: var(--density-gap); align-items: start; } /* Âncoras da subnav: a navbar é sticky e cobriria o título da seção. */ #carga-nw-panorama-secao, #carga-nw-mensal-secao, #carga-nw-decks-secao, #carga-nw-acerto-secao, #carga-nw-patamares-secao { scroll-margin-top: 112px; } @media (max-width: 1400px) { .carga-nw-kpis .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1200px) { .carga-nw-decks-grid, .carga-nw-acerto-grid, .carga-nw-patamar-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 900px) { .carga-nw-kpis .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .carga-nw-campo, .carga-nw-campo:first-child { flex: 1 1 100%; max-width: none; } .carga-nw-acoes { margin-left: 0; } } @media (max-width: 480px) { .carga-nw-kpis .kpi-grid { grid-template-columns: minmax(0, 1fr); } }