/* Extraido de preview.html — o visual aprovado, sem retoque.
Editar aqui e no preview ao mesmo tempo, ou o preview deixa de
valer como referencia. */
/* ===========================================================================
QPRP STAFF PANEL — PREVIEW VISUAL
Arquivo único, sem backend, sem build. Abre com duplo clique.
A paleta NÃO foi inventada: são os tokens do HUD do próprio servidor
(resources/[scripts]/hud/web-side/hud.css). O painel herda a identidade do
QPRP em vez de trazer a cara de um template.
Os degraus de texto foram recalculados por contraste medido, não a olho:
todo texto de rótulo passa de 4.5:1 contra a superfície onde vive. Antes,
--txt-4 estava em 2.3:1 — ou seja, cabeçalho de coluna e rótulo de métrica,
que são o vocabulário do painel inteiro, ficavam abaixo do mínimo legível.
=========================================================================== */
:root{
/* --- superfícies: quase-preto levemente frio, degraus curtos --- */
--bg: #0b0c0e;
--bg-2: #0f1013;
--panel: #121317;
--panel-2: #16171c;
--hover: #1b1d22;
/* --- traços ---
--line separa caixa (o degrau de superfície já delimita, então ele pode
ser discreto). --line-strong é o limite de CONTROLE — campo, botão,
seleção. Esse precisa de contraste de verdade: some a fronteira, some o
alvo clicável. */
--line: #2f333c;
--line-soft: #23262d;
--line-strong: #5e6470;
/* --- texto: cada degrau medido contra --panel --- */
--txt: #edeef1; /* 16.0:1 */
--txt-2: #b6bcc7; /* 9.7:1 */
--txt-3: #8c939f; /* 6.0:1 */
--txt-4: #79808c; /* 4.7:1 — o piso; nenhum texto abaixo daqui */
/* --- cor: os tokens do HUD do servidor --- */
--acc: #7589d5; /* qp-azul — preenchimento e traço */
--acc-2: #93a4e3; /* qp-azul-claro — acento em TEXTO (7.7:1) */
--acc-dim: #4b5788;
--acc-line: #55628f;
--danger: #e0453f; /* qp-perigo */
--danger-solid:#c0332e; /* fundo do botão destrutivo: branco em cima dá 5.6:1 */
--danger-txt:#f0827c;
--warn: #d9a441; /* qp-atencao */
--ok: #5fb07e; /* qp-grana */
--info: #93a4e3; /* qp-azul-claro */
--focus: #93a4e3;
/* --- espaçamento: escala de 4pt, sete degraus, nada fora deles ---------
Antes havia 21 valores de padding e 13 de gap no arquivo: cada componente
inventava o próprio ritmo, e era daí que vinha o desalinho que nenhum
ajuste pontual resolvia. */
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
--s5: 20px; --s6: 24px; --s7: 32px; --s8: 48px;
/* --- raio --- */
--radius: 6px;
--radius-sm: 4px;
--radius-lg: 10px;
--radius-pill: 999px;
/* --- tipografia: rampa de 7 degraus inteiros --------------------------
Sem meio-pixel: 9.5/10.5/11.5/12.5px arredondavam de formas diferentes
em tela 1x e borravam. */
--fs-nano: 10px; /* etiqueta acessória: badge, sub-marca */
--fs-micro: 11px; /* rótulo caixa-alta, contador */
--fs-meta: 12px; /* metadado, texto secundário */
--fs-body: 13px; /* corpo */
--fs-title: 14px; /* título de painel, título de diálogo */
--fs-page: 20px; /* título de página */
--fs-metric: 24px; /* número de métrica */
--lh-tight: 1.25;
--lh: 1.5;
--lh-loose: 1.6;
/* --- densidade: alternada pelo controle no menu da conta --- */
--row-h: 36px;
--pad-y: 8px;
--fs: var(--fs-body);
/* --- métrica de controle: botão, campo e linha de tabela precisam bater
a mesma altura para alinharem sem gambiarra --- */
--h-ctl: 32px;
--h-ctl-sm: 26px;
--tap: 32px; /* alvo mínimo; vira 44px no toque, mais abaixo */
--sidebar-w: 240px;
--topbar-h: 48px;
--page-max: 1680px;
/* --- camadas: escala declarada, sem número mágico ---
Antes: 1, 40, 60, 61, 61, 61, 65, 70 — com a sidebar (65) acima dos
diálogos (61), o que punha o menu lateral por cima de um modal aberto. */
--z-sticky: 10;
--z-menu: 20;
--z-scrim: 30;
--z-drawer: 40;
--z-dialog: 50;
--z-toast: 60;
--dur-fast: .1s;
--dur: .16s;
--ease: cubic-bezier(.2,0,.2,1);
--mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
--sans: "Inter", -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, system-ui, sans-serif;
}
[data-density="compact"]{ --row-h:30px; --pad-y:5px; --fs:var(--fs-meta); --h-ctl:28px; --h-ctl-sm:24px; }
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
margin:0;
background:var(--bg);
color:var(--txt);
font-family:var(--sans);
font-size:var(--fs);
line-height:var(--lh);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
font-feature-settings:"cv05" 1,"ss01" 1;
}
body.no-scroll{ overflow:hidden; }
::selection{ background:rgba(117,137,213,.3); }
/* barra de rolagem discreta — a padrão do Windows corta o visual escuro */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:#333741; border-radius:var(--radius-pill); border:2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover{ background:#454a56; }
*{ scrollbar-width:thin; scrollbar-color:#333741 transparent; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
/* --------------------------------------------------------------------------
FOCO
Uma regra só, no topo, valendo para tudo. Antes o único sinal de foco era
uma troca de borda para --acc-dim, que mede 2.7:1 — quem navega por teclado
ficava adivinhando onde está. :focus-visible não dispara no clique de
mouse, então isso não custa nada a quem usa ponteiro.
-------------------------------------------------------------------------- */
:focus{ outline:none; }
:focus-visible{
outline:2px solid var(--focus);
outline-offset:2px;
border-radius:var(--radius-sm);
}
.tbl tbody tr:focus-visible, .tbl tbody a:focus-visible{ outline-offset:-2px; }
.sr-only{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip-link{
position:fixed; z-index:var(--z-toast); top:var(--s2); left:var(--s2);
padding:var(--s2) var(--s3); border-radius:var(--radius);
background:var(--acc); color:#0a0b0d; font-size:var(--fs-meta); font-weight:600;
transform:translateY(-250%);
}
.skip-link:focus{ transform:none; }
/* Lucide é desenhado em grade de 24 com traço 2. Ao encolher para 16px, um
stroke-width de 1.75 vira 1.17px de traço real — mais fino que o peso do
texto ao lado, e é isso que dava a todos os ícones aquele ar lavado.
Os valores abaixo mantêm o traço perto de 1.3–1.5px em qualquer tamanho. */
.ico{ width:16px; height:16px; flex:none; stroke-width:2; }
.ico-sm{ width:14px; height:14px; stroke-width:2.25; }
.ico-lg{ width:20px; height:20px; stroke-width:1.75; }
.mono{ font-family:var(--mono); font-size:.92em; letter-spacing:-.01em; }
.num{ font-variant-numeric:tabular-nums; }
.muted{ color:var(--txt-3); }
.dim{ color:var(--txt-4); }
.meta{ font-size:var(--fs-meta); color:var(--txt-3); }
.nowrap{ white-space:nowrap; }
/* rótulo caixa-alta — UM lugar define o maneirismo, em vez de sete variações
de letter-spacing espalhadas pelo arquivo */
.lbl-k{
font-size:var(--fs-micro); font-weight:600; letter-spacing:.08em;
text-transform:uppercase; color:var(--txt-4);
}
/* ============================ SHELL ==================================== */
.app{ display:grid; grid-template-columns:var(--sidebar-w) 1fr; height:100vh; height:100dvh; }
/* ---------------------------- SIDEBAR ---------------------------------- */
.sidebar{
background:var(--bg-2);
border-right:1px solid var(--line);
display:flex; flex-direction:column;
min-height:0;
}
.brand{
height:var(--topbar-h); flex:none;
display:flex; align-items:center; gap:var(--s2);
padding:0 var(--s4);
border-bottom:1px solid var(--line);
}
.brand-mark{
width:24px; height:24px; border-radius:var(--radius-sm); flex:none;
background:var(--acc);
display:grid; place-items:center;
color:#0a0b0d; font-weight:700; font-size:var(--fs-meta); letter-spacing:-.03em;
}
.brand-name{ font-weight:600; font-size:var(--fs-body); letter-spacing:-.01em; line-height:1.2; }
.brand-sub{ font-size:var(--fs-nano); color:var(--txt-4); letter-spacing:.06em; line-height:1.2; }
.nav{ flex:1; overflow-y:auto; padding:var(--s3) var(--s2) var(--s2); min-height:0; }
.nav-group{ margin-bottom:var(--s1); }
.nav-label{
font-size:var(--fs-micro); font-weight:600; letter-spacing:.08em; text-transform:uppercase;
color:var(--txt-4); padding:var(--s3) var(--s2) var(--s1);
}
.nav-item{
display:flex; align-items:center; gap:var(--s2);
width:100%; min-height:var(--tap); padding:var(--s1) var(--s2); border-radius:var(--radius);
color:var(--txt-2); position:relative; font-size:var(--fs-body); text-align:left;
transition:background var(--dur-fast), color var(--dur-fast);
}
.nav-item:hover{ background:var(--hover); color:var(--txt); }
.nav-item.active{ background:var(--panel-2); color:var(--txt); font-weight:500; }
.nav-item.active::before{
content:""; position:absolute; left:calc(var(--s2) * -1); top:50%; transform:translateY(-50%);
width:3px; height:16px; background:var(--acc); border-radius:0 2px 2px 0;
}
.nav-item .ico{ color:var(--txt-3); }
.nav-item.active .ico{ color:var(--acc-2); }
.nav-badge{
margin-left:auto; font-size:var(--fs-nano); font-weight:600;
min-width:18px; height:17px; padding:0 6px; border-radius:var(--radius-pill);
display:grid; place-items:center;
background:#2a2d35; color:var(--txt-2);
}
.nav-badge.alert{ background:rgba(224,69,63,.18); color:var(--danger-txt); }
.nav-badge.soft{ background:transparent; border:1px solid var(--line); color:var(--txt-4); font-weight:500; }
/* rodapé da sidebar do PRODUTO — antes esta área reusava a classe .previewbar,
com borda tracejada e tudo, e corrigia com style inline. Andaime de
protótipo tinha virado estrutura. */
.sidebar-foot{
flex:none; border-top:1px solid var(--line);
padding:var(--s2); display:flex; flex-direction:column; gap:2px;
}
.sidebar-note{ font-size:var(--fs-nano); color:var(--txt-4); padding:var(--s1) var(--s2) 0; line-height:1.4; }
/* faixa de controles do PREVIEW — deliberadamente destacada do produto */
.previewbar{
flex:none; border-top:1px dashed #3a3e48; background:#0d0e11;
padding:var(--s3);
}
.previewbar-title{
font-size:var(--fs-nano); font-weight:600; letter-spacing:.12em; text-transform:uppercase;
color:var(--txt-4); display:flex; align-items:center; gap:var(--s2); margin-bottom:var(--s2);
}
.pv-field{ margin-bottom:var(--s2); }
.pv-field label{ display:block; font-size:var(--fs-micro); color:var(--txt-3); margin-bottom:var(--s1); }
.pv-select{
width:100%; background:var(--panel); border:1px solid var(--line-strong);
border-radius:var(--radius-sm); padding:var(--s1) var(--s2); font-size:var(--fs-meta); color:var(--txt);
}
.pv-toggle{ display:flex; gap:var(--s1); }
.pv-toggle button{
flex:1; font-size:var(--fs-micro); padding:var(--s1) 0; border-radius:var(--radius-sm);
background:var(--panel); border:1px solid var(--line); color:var(--txt-3);
}
.pv-toggle button.on{ background:var(--panel-2); color:var(--txt); border-color:var(--acc-line); }
/* ---------------------------- TOPBAR ----------------------------------- */
.main{ display:flex; flex-direction:column; min-width:0; min-height:0; }
.topbar{
height:var(--topbar-h); flex:none;
display:flex; align-items:center; gap:var(--s3);
padding:0 var(--s6); /* = padding da .page: a trilha e o