/* =====================================================================
PADRÃO VISUAL PCNET · CABEÇALHO DE TELA DE PLUGIN
O que faltava para "padronização" significar alguma coisa. Antes deste
arquivo, cada tela do parque inventava o próprio cabeçalho:
- 1 tela tinha logo (a variante CLARA, ilegível no tema claro);
- 1 tela tinha logo QUEBRADA (404, `![]()
` de largura zero);
- as demais telas com cabeçalho não tinham logo nenhuma;
- a faixa de luz no título existia em 1 tela de 65.
Sete cópias da mesma arte, em sete tamanhos (17 KB a 858 KB), em duas
variantes de cor que ninguém tratava como par. Isto aqui é o par, o
cabeçalho que o usa, e o efeito que era exclusivo de uma tela.
Este arquivo é do pcnetui, NÃO é cópia da skill — por isso pode crescer.
pcnet-tokens.css e pcnet-shell.css seguem intocados, com o md5 da skill
como contrato (ver CLAUDE.md deste plugin). Depende dos dois.
===================================================================== */
/* =====================================================================
1. AS DUAS VARIANTES DA LOGO
Trocar a logo com o tema não é enfeite: é legibilidade MEDIDA. Contraste
WCAG do lettering contra o fundo de cada tema —
variante fundo claro #eef1f6 fundo escuro #111a13
lettering escuro 13,01:1 ok 1,21:1 ILEGÍVEL
lettering claro 1,25:1 ILEGÍVEL 12,59:1 ok
Nenhuma das duas serve nos dois temas, e era exatamente isso que o parque
fazia: o portal servia só a escura, o painel do agendapcnet só a clara.
Quem trocasse de tema perdia a marca dentro da própria página — sem erro,
sem log, só uma mancha.
As duas viajam no HTML e o CSS revela uma. NÃO se troca por JS: neste GLPI
o JS de plugin é servido no RODAPÉ (page_footer.html.twig:33-35), então a
troca aconteceria depois do primeiro paint e a pessoa veria a logo errada
por um frame. O custo de carregar as duas é ~10 KB (o WebP oculto), contra
os 1,3 MB de cópias divergentes que havia no parque.
===================================================================== */
.pk-logo--fundo-escuro { display: none; }
[data-pcnet-tema="escuro"] .pk-logo--fundo-claro { display: none; }
[data-pcnet-tema="escuro"] .pk-logo--fundo-escuro { display: block; }
/* --- A MARCA SOZINHA, para cabeçalho que a tela já tem -------------------
Nem todo cabeçalho do parque pode ser substituído: vários montam o seu com
PHP no meio (condicionais de direito, KPIs, botão de voltar). Nesses entra
só isto, como primeiro filho. A régua à direita é o que separa a marca do
conteúdo — sem ela a logo cola no que vier a seguir e os dois grafismos leem
como um só. `z-index` porque vários desses cabeçalhos têm um ::before
decorativo em `inset: 0` que passaria por cima da logo. */
.pk-marca {
display: inline-flex;
align-items: center;
flex-shrink: 0;
padding-right: 14px;
border-right: 1px solid var(--pk-border);
position: relative;
z-index: 1;
}
/* 🔴 SEM `display` AQUI. `.pk-marca .pk-logo` vale (0,2,0) e venceria o
`display: none` do modificador `.pk-logo--fundo-escuro` (0,1,0) — as DUAS
variantes ficavam visíveis, uma sobre a outra, e a marca aparecia
duplicada. Quem decide a visibilidade é sempre o par de regras da secão 1;
aqui só se ajusta a medida. */
.pk-marca .pk-logo { height: 34px; width: auto; }
/* =====================================================================
2. CABEÇALHO EMBUTIDO
.pk-header (pcnet-shell.css) é `position: fixed`, o que é certo para tela
STANDALONE — portal, painel de TV — e ERRADO para tela de plugin dentro do
GLPI: ali já existe a barra fixa do core, e um segundo cabeçalho fixo se
sobrepõe a ela. Esta variante devolve o cabeçalho ao fluxo e o alinha com
a caixa do plugin, não com a viewport.
===================================================================== */
.pk-header--embutido {
position: static;
z-index: auto;
border: 1px solid var(--pk-border);
border-radius: var(--pk-radius);
margin-bottom: var(--pk-sp-4);
padding-top: 0;
/* 🔴 SUPERFÍCIE OPACA, e não o vidro da barra fixa. `.pk-header` é
`position: fixed` e usa `--pk-glass-bar` porque lá o conteúdo ROLA ATRÁS
dela — o vidro existe para deixar isso aparecer. Embutida no fluxo não há
nada atrás, e o vidro só compõe com o fundo da página.
Medido no tema escuro (2026-09-01): o cabeçalho compunha `rgb(18,28,21)`,
praticamente o fundo do app (`rgb(17,26,19)`), enquanto o painel logo
abaixo é `--pk-surface` = `rgb(26,39,29)`. Duas caixas do mesmo grupo com
materiais diferentes, uma quase invisível — e no tema claro as duas dão
branco, que é por que o defeito só aparecia no escuro.
O painel do launcher do portal (`portal.css:275`) também é superfície
opaca com sombra, não vidro. */
background: var(--pk-surface);
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: var(--pk-shadow-lg);
}
/* O padding é o MESMO do portal (10px), não um valor escolhido a olho: com
12px o cabeçalho do plugin ficava 66 px de altura contra os 61 px do portal,
e postos lado a lado a diferença lê como "outra tela". Medido nos dois. */
.pk-header--embutido .pk-header__inner { max-width: none; padding: 10px 20px; }
/* 🔴 NO CELULAR O CABEÇALHO EMBUTIDO PERDIA O TÍTULO E ESTOURAVA A PÁGINA
(2026-09-23). Duas regras do shell, feitas para a barra FIXA do portal (que
tem logo e nav e por isso pode esconder o nome da tela), alcançavam também o
cabeçalho de tela de plugin: `.pk-header__title { display: none }` abaixo de
600px e `.pk-header__right { flex-shrink: 0 }` sem quebra de linha. Medido a
390px no Dashboard Cliente do gestor: sobrava só o selo do ícone, e as ações
(dois formulários e um botão, 783px) levavam a página a 818px de largura.
No embutido o título fica, e as ações descem para uma linha própria e
quebram entre si. */
@media (max-width: 600px) {
.pk-header--embutido .pk-header__left { flex: 1 1 auto; min-width: 0; }
.pk-header--embutido .pk-header__title { display: flex; min-width: 0; }
.pk-header--embutido .pk-header__right {
flex: 1 1 100%;
flex-wrap: wrap;
min-width: 0;
}
.pk-header--embutido .pk-header__right > * { flex: 1 1 auto; min-width: 0; max-width: 100%; }
}
/* O bloco da direita (ação da tela + alternador) vai para a BORDA. No shell
quem o empurrava era a .pk-nav do portal, no meio; sem nav, `gap` cola os
três blocos à esquerda e o alternador aparece encostado no subtítulo, como
se fosse parte do título. Medido no navegador antes de escrever esta linha. */
.pk-header .pk-header__right { margin-left: auto; }
/* Selo do ícone da TELA — separado da logo por uma régua fina, que é o que
impede a leitura "logo composta". Sem a régua os dois grafismos colam e o
ícone parece parte da marca. */
.pk-header__selo {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; flex-shrink: 0;
border-radius: var(--pk-radius-sm);
background: var(--pk-green-soft);
color: var(--pk-green-dark);
border: 1px solid var(--pk-green-line);
margin-left: 4px;
}
.pk-header__selo svg, .pk-header__selo i { width: 18px; height: 18px; font-size: 16px; }
.pk-header__left > .pk-logo + .pk-header__selo,
.pk-header__left > picture + .pk-header__selo {
margin-left: 14px;
position: relative;
}
.pk-header__left > picture + .pk-header__selo::before {
content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
width: 1px; height: 26px; background: var(--pk-border);
}
/* 🔴 O SUBTÍTULO USA --pk-ink-2, NÃO --pk-ink-3. O shell dá -ink-3 ao
subtítulo, e o próprio pcnet-tokens.css documenta esse token como "3,06:1 no
branco — só meta, placeholder e ícone decorativo". Sobre os fundos reais do
parque ele cai para 2,70–2,98:1, e o subtítulo do cabeçalho NÃO é decorativo:
é a linha que diz o que a tela faz ("Projetos, board e entregas", "Métricas,
SLA e relatórios"). Medido em nove telas antes de mudar.
⚠️ O portal tem o mesmo caso no componente dele (.fw-header__title small,
também em -ink-3). Não foi tocado aqui: mexer nele muda a home de 1.512
pessoas e é decisão do dono, não efeito colateral de uma correção de plugin. */
.pk-header__title small { color: var(--pk-ink-2); }
/* O TAMANHO DO TÍTULO NÃO É REDEFINIDO AQUI, de propósito. A tentação é dar
ao da tela um corpo maior que o nome do produto no portal; medido lado
a lado, 23 px contra os 20,5 px do portal já lê como outra tela. Fica o
--pk-text-lg do shell, que é exatamente o do portal. */
/* =====================================================================
O TÍTULO É SÓLIDO — decisão do dono em 2026-09-22
=====================================================================
Até esta data a classe .pk-shine desenhava uma faixa de luz animada que
varria o título (texto em gradiente com background-clip: text). Ela nasceu
no painel de TV do agendapcnet e foi espalhada para 35 telas. Saiu de TODAS,
inclusive da TV, por três razões medidas:
- o portal, que é a origem do padrão, não tem esse efeito — era a única peça
do cabeçalho que não vinha dele;
- o detector do impeccable acusa texto em gradiente em 9 das 14 telas de
referência (é o "AI slop" mais reconhecível do levantamento);
- no instante da passagem a legibilidade caía para 3,27:1.
O DESIGN.md registra a regra: título é texto sólido, na Tinta, sem gradiente,
sem faixa de luz e sem sombra de texto.
A classe continua no markup de várias telas (título do flowpcnet, do
lansentineldevices, da TV…) e passa a significar só "isto é o título":
ela garante que nenhuma sombra de texto volte — o flowpcnet tinha uma
sombra 3D no .fp-pagetitle que o efeito anulava. O !important tem a mesma
razão estrutural de antes: a folha do host é registrada ANTES da do
consumidor, e num empate de especificidade o host perde por ordem. */
.pk-shine {
text-shadow: none !important;
}
/* =====================================================================
A LOGO NÃO SE REPETE DENTRO DO LAYOUT DO GLPI
=====================================================================
Nesta instalação os arquivos de logo do CORE já são a arte PCNet:
`public/pics/logos/logo-GLPI-100-white.png` e o par reduzido foram
substituídos (o md5 difere do backup em `logos_backup_pre_restore/`).
Ou seja, a sidebar do GLPI já desenha a marca a 100×55 sobre o verde,
e o cabeçalho do plugin desenhava a MESMA marca de novo logo abaixo.
Medido: 72 telas do parque desenham a logo do plugin; 62 delas rodam
dentro do layout do GLPI — duas marcas idênticas na mesma página. Uma
tem três (lansentineldevices/front/dashboard.php: sidebar + .pk-marca
+ a logo do modal de etiqueta QR).
As outras 10 são standalone (painel de TV, relatórios, telas de
métricas): lá não há sidebar nenhuma e a logo do plugin é a ÚNICA
marca da página. Por isso o gate é `.page-body`, que só existe dentro
do layout do GLPI — nada de detectar por PHP, que não tem bandeira
pronta para "já passei por Html::header()".
O cabeçalho mantém selo de ícone, título com faixa de luz e subtítulo:
o que faz a tela parecer nossa continua lá.
Especificidade: (0,3,0) na segunda regra, para vencer sem `!important`
a troca de variante por tema logo acima (`[data-pcnet-tema="escuro"]
.pk-logo--fundo-escuro`, que vale (0,2,0)).
Rollback: apagar este bloco. A logo volta nas 62.
===================================================================== */
.page-body .pk-marca { display: none; }
.page-body .pk-header__left .pk-logo { display: none; }
/* 🔴 E A RÉGUA QUE SEPARAVA A LOGO DO SELO TEM DE SAIR JUNTO.
Ela é `.pk-header__left > picture + .pk-header__selo::before` (logo acima),
e o combinador irmão `picture +` **não olha `display`**: o `` segue
no DOM com a `![]()
` oculta dentro, então a regra continuou casando. O
resultado, dentro do layout do GLPI, era uma barrinha vertical de 1px
flutuando antes do ícone — separando a logo de coisa nenhuma — mais os 14px
de margem que abriam espaço para ela.
Medido no pixel do print (2026-09-01): a linha estava em x=48 do cabeçalho,
em `rgb(47,70,52)`, exatamente a cor de `--pk-border` do tema escuro.
Esconder o `` inteiro NÃO resolveria: o combinador casa igual. */
.page-body .pk-header__left > picture + .pk-header__selo { margin-left: 0; }
.page-body .pk-header__left > picture + .pk-header__selo::before { content: none; }