` + `
` irmaos no fim do , e
a classe `open` nos dois para mostrar. Largura em `min()` para sobrar em tela pequena. */
.p-drawer-overlay, .hub-panel-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 200;
opacity: 0; pointer-events: none; transition: opacity .22s;
}
.p-drawer-overlay.open, .hub-panel-overlay.open { opacity: 1; pointer-events: auto; }
.p-drawer, .hub-panel {
position: fixed; top: 0; right: 0; bottom: 0; width: min(1120px, 97vw);
background: var(--surface); border-left: 1px solid var(--border); z-index: 201;
display: flex; flex-direction: column; transform: translateX(100%);
transition: transform .24s cubic-bezier(.4,0,.2,1); box-shadow: var(--shadow-lg);
}
.p-drawer.open, .hub-panel.open { transform: translateX(0); }
.p-drawer:focus-visible, .hub-panel:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.p-drawer-header, .hub-panel-header {
display: flex; align-items: center; gap: 10px; padding: 14px 18px;
border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.p-drawer-body, .hub-panel-body {
flex: 1; min-width: 0; overflow-y: auto; padding: 16px 18px;
display: flex; flex-direction: column; gap: 14px;
}
.p-drawer-footer, .hub-panel-footer {
padding: 12px 18px; border-top: 1px solid var(--border);
display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0;
}
@media (max-width: 768px) { .p-drawer, .hub-panel { width: 100%; } }
/* `.estreita`: formulario curto, ficha ou lista de apoio -- nao um registro inteiro. Era a gaveta
que cada tela desenhava por conta propria (400, 440, 500 e 520px); ficou uma largura so. */
.p-drawer.estreita, .hub-panel.estreita { width: min(520px, 100vw); }
.p-railnav, .hub-rail {
background: var(--surface-3); border-left: 1px solid var(--border-2);
padding: 10px 8px; display: flex; flex-direction: column; gap: 2px;
}
.p-railnav-i, .hub-rail-i {
display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 9px;
border: none; background: none; border-radius: 7px; font: inherit; font-size: 12.5px;
font-weight: 500; color: var(--text-3); text-align: left; cursor: pointer;
}
.p-railnav-i:hover, .hub-rail-i:hover { background: var(--surface); color: var(--text); }
.p-railnav-i.active, .hub-rail-i.active { background: var(--brand-dim); color: var(--brand-dark); font-weight: 700; }
html.dark .p-railnav-i.active, html.dark .hub-rail-i.active { color: var(--brand); }
.p-railnav-i svg, .hub-rail-i svg { width: 14px; height: 14px; flex-shrink: 0; }
.p-railnav-n, .hub-rail-n {
margin-left: auto; flex-shrink: 0; font-size: 10px; font-weight: 700; padding: 1px 6px;
border-radius: 999px; background: var(--border-2); color: var(--text-2);
font-variant-numeric: tabular-nums;
}
.p-railnav-i.active .p-railnav-n, .hub-rail-i.active .hub-rail-n { background: var(--brand); color: #fff; }
/* Grid */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
/* Grid que decide o nº de colunas pelo espaço, não por um número fixo: cabem 2, viram 2; cabe 1,
vira 1. Os `.grid-N` acima têm contagem CRAVADA e só colapsam nos breakpoints — então um card
que precise de 340px pra não quebrar o rótulo é apertado em 1199px e nada na tela avisa.
A largura mínima da coluna é `--col-min` (default 320px), definida inline por quem usa. */
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--col-min, 320px), 1fr)); gap: 14px; }
.grid-auto > * { min-width: 0; }
/* Filho que ocupa a linha inteira do grid. Serve ao caso do nº ÍMPAR de itens num grid par: sem
isso o último fica com meia largura e o resto da faixa some em branco, o que a tela não explica.
Em 1 coluna (mobile) é inócuo, porque `1 / -1` já é a única coluna. */
.grid-full { grid-column: 1 / -1; }
/* Pilha vertical — o container de "vários blocos um embaixo do outro", com 14px, o MESMO gap dos
`.grid-*` acima, pra pilha e grid na mesma tela não terem dois respiros diferentes.
🚫 Não usar margin no filho: margem colapsa e duplica conforme o vizinho. */
.stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* Layout de 2 colunas com colapso responsivo */
.col-layout-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
/* Caixa de gráfico — ALTURA FIXA, obrigatória em todo canvas do Chart.js.
Com responsive:true (e maintainAspectRatio no default) o Chart.js usa width/height
do