@import url("vendor/select2/select2.min.css");
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-base); color: var(--text-body); background: var(--surface-page); -webkit-font-smoothing: antialiased; }
a { color: var(--accent-regulatorio); text-decoration: none; }
a:hover { color: var(--accent-regulatorio-strong); text-decoration: underline; }
.shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.sidebar { background: var(--surface-sidebar); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; overflow: auto; }
.sidebar__brand { padding: var(--space-10) var(--space-9) var(--space-8); border-bottom: 1px solid var(--surface-sidebar-border); display: flex; align-items: center; gap: var(--space-5); }
/* Item 1 do relatório (2026-08-25), REVISTO no retoque de 2026-08-25: a
suposição acima ("a marca de verdade já resolve o próprio contraste")
estava errada. logo-cervam-completo.png é desenhada para fundo CLARO —
traço preto/cinza-escuro, teal escuro e vermelho, fundo transparente
(confirmado por amostragem de pixel com PIL: nenhuma cor clara no
próprio arquivo). Sobre --surface-sidebar (#101b57, quase preto-azulado)
o traço escuro se funde no fundo — mancha ilegível, pior ainda recolhida
a 40px. O cabeçalho público (app/templates/publico/cabecalho.php) nunca
teve esse problema porque está sobre --surface-card (branco); aqui a cor
de fundo é o problema, não o tratamento do .
Reintroduzido o chip: um fundo --surface-card (branco, mesmo token do
cabeçalho público) por trás da marca, só que agora deliberado — devolve
à marca o "chão claro" para o qual foi desenhada, em vez de reinventar
um segundo tratamento da marca em si. Mesmo --radius-sm dos outros
controles da barra (.sidebar__toggle) e --shadow-card (o token que já
nomeia esse par com --surface-card) — nenhum token novo.
Dimensão do reduzida de 40px para 36px (proporção 275:200
preservada, 36×26) para que o chip inteiro — imagem + padding — caiba
nos 48px disponíveis na trilha recolhida (64px de --shell--colapsada
menos os 2×--space-3 de padding de .sidebar--colapsada .sidebar__brand)
sem estourar a largura da trilha; 48px é também o min-width que
.sidebar__toggle já usa recolhido, então os dois elementos da coluna de
ícones alinham na mesma largura.
flex:none aqui é sobre o próprio , não sobre o — mantém o
invólucro fora do cálculo de flex-grow da linha (mark | brandtext) sem
depender de largura fixa. */
.sidebar__mark { display: flex; align-items: center; justify-content: center; flex: none; background: var(--surface-card); border-radius: var(--radius-sm); padding: var(--space-2); box-shadow: var(--shadow-card); }
.sidebar__mark img { display: block; width: 36px; height: auto; }
.sidebar__brandtext { min-width: 0; }
.sidebar__title { display: block; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--text-on-dark); letter-spacing: var(--ls-wider); line-height: var(--lh-tight); }
.sidebar__subtitle { display: block; font-size: var(--fs-2xs); color: var(--accent-mint); letter-spacing: .1em; text-transform: uppercase; font-weight: var(--fw-semibold); }
.nav { padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: 3px; }
.nav__label { font-size: var(--fs-3xs); font-weight: var(--fw-bold); color: var(--text-on-dark-faint); letter-spacing: .14em; text-transform: uppercase; padding: var(--space-2) var(--space-4) var(--space-3); margin: 0; }
.nav__item { display: flex; align-items: center; gap: var(--space-4); width: 100%; padding: 11px var(--space-5); border: none; border-left: 3px solid transparent; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: transparent; color: var(--text-on-dark-muted); font-family: var(--font-sans); font-size: var(--fs-base); font-weight: var(--fw-semibold); text-align: left; text-decoration: none; cursor: pointer; }
.nav__item:hover { background: var(--surface-sidebar-hover); color: var(--text-on-dark); text-decoration: none; }
.nav__item[aria-current="page"] { background: var(--surface-sidebar-active); border-left-color: var(--accent-mint); color: var(--text-on-dark); }
.nav__item svg { width: 17px; height: 17px; flex: none; }
.nav__item span { flex: 1; min-width: 0; }
/* Item 2 do relatório (2026-08-25): reproduzido no navegador antes de
mexer — "Histórico mensal" e "Conjuntos elétricos" quebravam em duas
linhas e o contador virava um chip esticado. Não era falta de espaço
(238px de sobra dava para o texto inteiro numa linha só, medido via
getBoundingClientRect() depois do reparo abaixo) nem o badge "grande
demais": era uma colisão de especificidade CSS. ".nav__badge" é um
span, então ".nav__item span" (0,1,1 — uma classe MAIS um tipo) bate
".nav__badge" (0,1,0 — só uma classe) na cascata, não importa a ordem
das regras no arquivo: o "flex: none" abaixo nunca vencia, o badge
herdava "flex: 1" do rótulo e brigava por espaço com ele — encolhendo
o rótulo até quebrar linha, e esticando o próprio badge (confirmado via
getComputedStyle: "flex: 1 1 0%" no badge, contra o "flex: none" que o
código já pedia). ".nav__item .nav__badge" (0,2,0 — duas classes) é a
correção mínima: mais específico que ".nav__item span" só nisto, sem
tocar a regra genérica nem duplicar as outras propriedades do badge. */
.nav__badge { background: #2b3a86; color: #c3cbe9; font-size: var(--fs-2xs); font-weight: var(--fw-bold); font-style: normal; border-radius: var(--radius-pill); padding: 2px var(--space-3); flex: none; }
.nav__item .nav__badge { flex: none; }
.nav__item[aria-current="page"] .nav__badge { background: var(--accent-mint); color: #0d1740; }
/* Item 5 do relatório: botão de recolher/expandir, em linha própria entre
a marca e a navegação (ver o comentário do template — dividir a largura
com "CERVAM ENERGIA" quebrava o título em duas linhas). width:100% +
min-height em --space-14 (48px) para o alvo mínimo de 44×44 (mesmo
token que .btn-repetir já usa pelo mesmo motivo, mais abaixo) — um
controle novo não pode nascer abaixo do mínimo que o resto desta
revisão está corrigindo em outros lugares (item 6). */
.sidebar__toggle-row { padding: var(--space-5) var(--space-9) 0; }
.sidebar__toggle { display: flex; align-items: center; gap: var(--space-4); width: 100%; min-height: var(--space-14); background: transparent; border: 1px solid var(--surface-sidebar-border); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-5); color: var(--text-on-dark-muted); font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer; }
.sidebar__toggle:hover { background: var(--surface-sidebar-hover); color: var(--text-on-dark); }
.sidebar__toggle:focus-visible { outline: 2px solid var(--accent-mint); outline-offset: 1px; }
.sidebar__toggle svg { width: 16px; height: 16px; flex: none; }
.sidebar__foot { margin-top: auto; padding: var(--space-7) var(--space-8); border-top: 1px solid var(--surface-sidebar-border); display: flex; flex-direction: column; gap: var(--space-5); }
.btn-ghost-mint { background: transparent; color: var(--accent-mint); border: 1px solid #2f7a52; border-radius: var(--radius-sm); padding: var(--space-2) var(--space-5); font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer; text-align: left; text-decoration: none; }
.btn-ghost-mint:hover { background: var(--accent-sem-expurgo-dark); color: var(--text-on-dark); text-decoration: none; }
.user { display: flex; align-items: center; gap: var(--space-4); }
.user__avatar { width: 32px; height: 32px; border-radius: 50%; background: #2b3a86; color: var(--text-on-dark); display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: var(--fw-bold); flex: none; }
.user__name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-on-dark); }
.user__logout { background: none; border: none; padding: 0; font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: #8b97c9; cursor: pointer; }
.user__logout:hover { color: var(--text-on-dark); }
/* ------------------------------------------------------------------
Item 5 do relatório (2026-08-25): barra lateral recolhível, server-side.
$colapsada (painel/app/bootstrap.php: sidebarColapsada(), cookie
PAINEL_SIDEBAR) decide, no PHP, se ".shell" e ".sidebar" nascem com o
modificador "--colapsada" — nenhuma das regras abaixo depende de
JavaScript nem do truque do checkbox (a barra some/volta ao trocar de
página exatamente como antes, porque a marcação já nasce no estado
certo a cada carregamento, não é escondida depois por CSS puro).
64px é o mesmo raciocínio de table.grid--historico (min-width medido,
não chutado, ver o comentário lá): com a barra recolhida a 64px, main
ganha ~174px a mais (238px − 64px) do que a barra expandida — o
suficiente, numa tela de 1536px ou mais, para a tabela de histórico
(min-width: 1366px) caber sem rolagem horizontal; numa tela de 1440px
ainda falta espaço. Retoque de 2026-08-25: o padding horizontal de main
NÃO é mais fixo neste estado — ver a regra ".shell--colapsada main"
logo abaixo, que já aperta esse respiro; mesmo com ela, 1440px
colapsada continua exigindo rolagem (ver o comentário daquela regra e o
relatório para a medição completa nas larguras testadas).
Todo texto escondido abaixo usa clip/1px (mesma técnica de .sr-only,
não display:none): continua no DOM e na árvore de acessibilidade — só
some da tela. O nome acessível de cada destino (ícone + rótulo) não
muda entre os dois estados; só a apresentação visual muda. */
.shell--colapsada { grid-template-columns: 64px minmax(0, 1fr); }
/* Item 2 do retoque de 2026-08-25 (painel-dec-fec): a 1440px — a largura de
laptop mais comum — mesmo com a barra recolhida (64px) ainda faltava
espaço para table.grid--historico (min-width: 1366px) caber sem rolagem
horizontal, como o comentário acima já expunha (1366 + 60px de padding
fixo de main, --admin-gutter × 2, somam 1426px; só 14px sobram — não dá
nem para reduzir o próprio min-width, ver abaixo). Medido de novo no
navegador (getBoundingClientRect(), 1440px, barra recolhida): main tem
1361px de clientWidth (1440 − 64 do trilho − ~15px de barra de rolagem
vertical desta página) e o table-wrap disponível fica em ~1299px — a
tabela nativa (1366px) ainda excede isso em quase 70px.
Recolher é o operador trocando deliberadamente cromo por conteúdo — o
mesmo raciocínio já usado para o próprio trilho de 64px acima —, então
apertar o respiro horizontal de main E do .topbar (ambos usam
--admin-gutter, 30px de cada lado) só neste estado seleciona o MESMO
valor que a media query de celular já usa para os dois
(@media max-width:900px, mais abaixo neste arquivo: main vira
var(--space-9) var(--space-7) var(--space-14), .topbar vira
var(--space-5) var(--space-7)) — var(--space-7) = 16px, não um valor
novo, é o mesmo token reaproveitado para o mesmo problema (menos espaço
disponível) num contexto diferente. padding-left/right em vez do
shorthand: preserva o padding vertical de cada regra, só o horizontal
muda. Como o valor é IDÊNTICO ao que a media query de celular já aplica
nos dois seletores, esta regra não conflita com aquela abaixo de 900px
(mesmo resultado computado, não precisa de uma segunda guarda de
@media) — só passa a valer também acima de 900px, que é o ganho novo.
Resultado, honesto: 60px → 32px de padding libera 28px. Mesmo assim,
1440px colapsada AINDA não fecha sem rolagem — ver o relatório para a
medição completa e por que fechar de vez é matematicamente inviável
aqui (mesmo com padding zero, 1440 − 64 = 1376px, menos que o mínimo
real da tabela com dois ou mais conjuntos elétricos, ~1385px medido).
Reduz a rolagem, não a elimina; documentando os números em vez de
forçar um encaixe que não fecha. */
.shell--colapsada .topbar,
.shell--colapsada main { padding-left: var(--space-7); padding-right: var(--space-7); }
.sidebar--colapsada .sidebar__brand { justify-content: center; padding: var(--space-6) var(--space-3); }
.sidebar--colapsada .sidebar__toggle-row { padding: var(--space-3) var(--space-3) 0; }
.sidebar--colapsada .sidebar__toggle { width: auto; min-width: var(--space-14); justify-content: center; padding: var(--space-3); margin: 0 auto; }
.sidebar--colapsada .sidebar__toggle svg { transform: scaleX(-1); }
.sidebar--colapsada .sidebar__brandtext,
.sidebar--colapsada .sidebar__toggle span,
.sidebar--colapsada .nav__item > span,
.sidebar--colapsada .sidebar__link-label,
.sidebar--colapsada .user__name { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.sidebar--colapsada .nav__item { justify-content: center; padding: 11px var(--space-3); }
.sidebar--colapsada .nav__label { display: none; }
.sidebar--colapsada .sidebar__foot { padding: var(--space-7) var(--space-3); align-items: center; }
.sidebar--colapsada .btn-ghost-mint { text-align: center; padding: var(--space-2) var(--space-3); }
.sidebar--colapsada .user { justify-content: center; }
.sidebar--colapsada .user br { display: none; }
.content { min-width: 0; display: flex; flex-direction: column; }
.topbar { background: var(--surface-card); border-bottom: 1px solid var(--border-default); padding: var(--space-6) var(--admin-gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; position: sticky; top: 0; z-index: 20; box-shadow: var(--shadow-topbar); }
.status { display: flex; align-items: center; gap: var(--space-4); font-size: var(--fs-sm); color: var(--text-secondary); margin: 0; }
.status__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.status__dot--rascunho { background: var(--state-warning); }
.status__dot--publicado { background: var(--state-success); }
.status strong { color: var(--text-primary); font-weight: var(--fw-semibold); }
.actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.btn { border-radius: var(--radius-sm); font-family: var(--font-sans); cursor: pointer; }
.btn--secondary { background: var(--surface-card); color: var(--accent-regulatorio); border: 1px solid var(--border-dashed); padding: var(--space-4) var(--space-8); font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.btn--secondary:hover { background: var(--surface-accent-soft); }
.btn--primary { background: var(--accent-sem-expurgo); color: var(--text-on-dark); border: none; padding: var(--space-4) var(--space-10); font-size: var(--fs-base); font-weight: var(--fw-bold); box-shadow: 0 1px 2px rgba(25,107,58,.3); }
.btn--primary:hover { background: var(--accent-sem-expurgo-hover); }
.btn--navy { background: var(--surface-sidebar); color: var(--text-on-dark); border: none; padding: var(--space-4) var(--space-8); font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.btn--navy:hover { background: var(--accent-regulatorio); }
.btn[disabled] { background: var(--state-disabled-bg); color: var(--state-disabled-text); border-color: var(--border-default); box-shadow: none; cursor: progress; }
main { flex: 1; min-width: 0; width: 100%; overflow-x: hidden; padding: var(--space-11) var(--admin-gutter) var(--space-15); }
.stack { display: flex; flex-direction: column; gap: var(--space-9); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-11); flex-wrap: wrap; }
.page-head h1 { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--text-primary); margin: 0 0 var(--space-1); }
.page-head p { margin: 0; font-size: var(--fs-base); color: var(--text-secondary); max-width: 680px; text-wrap: pretty; }
.card { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-2xl); padding: var(--space-10) var(--space-11) var(--space-11); }
.card__head { display: flex; align-items: center; gap: var(--space-5); margin-bottom: var(--space-8); }
.card__icon { width: 38px; height: 38px; border-radius: var(--radius-md); border: 2px solid currentColor; display: flex; align-items: center; justify-content: center; flex: none; }
.card__icon svg { width: 19px; height: 19px; }
.card__title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); line-height: var(--lh-snug); }
.card__title small { color: #8b93b0; font-size: inherit; font-weight: inherit; }
.card--regulatorio .card__icon, .card--regulatorio .card__title { color: var(--accent-regulatorio); }
.card--limpo .card__icon, .card--limpo .card__title { color: var(--accent-sem-expurgo); }
.section-title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text-primary); letter-spacing: var(--ls-wide); margin: 0 0 var(--space-2); }
.section-note { margin: 0 0 var(--space-8); font-size: var(--fs-base); color: var(--text-secondary); }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-9); }
.grid-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-7); }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-7); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-7); }
/* Task 6 (delta 2026-08-25): a tela de Médias anuais perde os quatro
campos — os indicadores viram somente-leitura, calculados a partir do
histórico mensal (HistoricoRepo::totaisAnuais()), nunca mais digitados
nem gravados aqui. .resumo-item usa
/
(par termo/definição), não
: um campo desabilitado ainda parece um campo de
formulário (mesma borda, mesmo fundo) e sugere "isto poderia ser editado
se algo mudasse" — nada aqui pode ser editado nesta tela, em lugar
nenhum, e a marcação precisa dizer isso tanto visual quanto
semanticamente (revisão de UX, regra read-only-distinction). Tipografia
igual à dos KPIs do painel público (painel/assets/publico.css:
.kpi__label/.kpi__value) — mesmos tokens já definidos em tokens.css
(--font-display, --fs-4xl — documentado lá como "numero do card
publico" —, --fw-bold, --ls-wider), sem importar publico.css (não
carregado no admin) nem tocar tokens.css. font-variant-numeric:
tabular-nums alinha os dígitos entre os quatro valores (revisão de UX,
regra number-tabular) — nenhuma tela do admin usava essa propriedade
antes. dl.grid-pair reseta a margem padrão do navegador para