/* =====================================================================
IDENTIDADE VISUAL DO SYNK PAINEL v1.6.0 · 2026-07-30
-----------------------------------------------------------------------
Mesma linguagem já aplicada em Synk RH / Synk Frota / login / central:
neutro carrega a interface, o acento aponta estado; superfícies chapadas,
fio de cabelo no lugar de caixas, números tabulares, micro-rótulos em
caixa alta. Aqui a mudança maior é o TEXTO: o painel usava o azul da marca
(#163A9E) como cor de texto — agora o azul é só acento e o texto é grafite.
COMO É APLICADO (e como reverter):
- carrega DEPOIS de style.css e synk-v17.css;
- todo seletor começa em `body[data-painel]` (atributo que existe só no
index.html do painel), então NADA vaza para login, RH, Frota ou central;
- reverter = tirar o desta folha e o data-painel do .
REGRAS DE SEGURANÇA que segui (aprendidas quebrando coisa nesta base):
- NÃO mexo em `display` (o JS liga/desliga tela e permissão com .hidden);
- NÃO mexo em `position`/`overflow`/geometria do cabeçalho fixo
(`.global-panel-header` é fixed e o espaço reservado no `.main` é fixo em
112px — mudar a altura do cabeçalho sobrepõe conteúdo);
- NÃO mexo em `width`/`height` de estrutura, só em cor, borda, raio,
sombra, tipografia e espaçamento interno;
- a maior parte do trabalho é feita REDEFININDO OS TOKENS que centenas de
regras já consomem (--text, --line, --muted, --v17-*), em vez de brigar
com as 154 regras de ID do painel uma por uma.
===================================================================== */
/* ---------------- tokens (tema claro) ---------------- */
body[data-painel] {
--bg:#F6F7F9; --surface:#FFFFFF; --surface-2:#F1F3F6; --line:#E3E6EA;
--text:#1A1F26; /* era #163A9E: azul da marca como texto */
--muted:#5B6672;
--brand:#163A9E; --brand-2:#163A9E;
--success:#0F7B3F; /* era #163A9E — verde de verdade */
--warning:#8A5300; --danger:#B3261E;
--radius:0; --shadow-sm:none; --shadow-md:none;
--v17-bg:#F6F7F9; --v17-panel:#FFFFFF; --v17-panel-soft:#F1F3F6;
--v17-ink:#1A1F26; --v17-muted:#5B6672; --v17-line:#E3E6EA;
--v17-primary:#163A9E; --v17-primary-strong:#12327F; --v17-accent:#163A9E;
--v17-danger:#B3261E; --v17-warning:#8A5300; --v17-shadow:none;
/* meus: chrome escuro e controles */
--pn-chrome:#14181D; --pn-chrome-2:#1D232A; --pn-chrome-fio:#2A323B;
--pn-line-forte:#CDD3DA; --pn-controle:#7D949C; /* borda de campo = 3,19:1 */
--pn-acc:#1B4FCC; /* acento de foco/estado */
--pn-controle-forte:#74898F; /* borda de controle sobre o fundo da página: 3,43:1 */
--pn-acc-chrome:#6FA8FF; /* acento sobre o chrome escuro: 6,58:1 (o azul da marca dá 2,29:1) */
}
/* ---------------- tokens (tema escuro) ----------------
especificidade maior que body[data-theme="dark"] do style.css, senão o
escuro herdaria os valores claros daqui. */
body[data-painel][data-theme="dark"] {
--bg:#0E1116; --surface:#161A20; --surface-2:#1C2129; --line:#242A32;
--text:#E9EDF2; --muted:#9AA5B1;
--success:#4EDE93; --warning:#FFC163; --danger:#FF8B83;
--v17-bg:#0E1116; --v17-panel:#161A20; --v17-panel-soft:#1C2129;
--v17-ink:#E9EDF2; --v17-muted:#9AA5B1; --v17-line:#242A32;
--pn-line-forte:#333B45; --pn-controle:#55707D; --pn-controle-forte:#6B8894; --pn-acc:#6FA8FF; --pn-acc-chrome:#6FA8FF;
}
/* ---------------- base ---------------- */
body[data-painel] {
background: var(--bg) !important;
color: var(--text) !important;
font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, system-ui, sans-serif !important;
-webkit-font-smoothing: antialiased;
}
body[data-painel] h1, body[data-painel] h2, body[data-painel] h3 { letter-spacing: -.02em !important; }
body[data-painel] .muted, body[data-painel] .tiny { color: var(--muted) !important; }
/* chapado: sem canto redondo e sem sombra em nenhuma superfície */
body[data-painel] .section, body[data-painel] .card, body[data-painel] .table-wrap,
body[data-painel] .topbar, body[data-painel] article, body[data-painel] .modal-card,
body[data-painel] input, body[data-painel] select, body[data-painel] textarea, body[data-painel] button,
body[data-painel] .cliente-card, body[data-painel] .notice, body[data-painel] .badge {
border-radius: 0 !important;
box-shadow: none !important;
}
body[data-painel] .section, body[data-painel] .card, body[data-painel] .cliente-card {
background: var(--surface) !important;
border: 1px solid var(--line) !important;
}
/* ---------------- cabeçalho fixo (só cor; geometria intocada) ---------------- */
body[data-painel] .global-panel-header {
background: var(--pn-chrome) !important;
border: none !important;
border-bottom: 1px solid var(--pn-chrome-fio) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
body[data-painel] .global-panel-header .dashboard-brand-kicker { color: #8A95A1 !important; letter-spacing: .16em !important; font-size: 9.5px !important; }
body[data-painel] .global-panel-header h1 { color: #fff !important; font-size: 15px !important; font-weight: 650 !important; }
body[data-painel] .global-panel-header p { color: #8A95A1 !important; font-size: 12px !important; }
body[data-painel] .global-panel-header .dashboard-empresa-logo { border-radius: 0 !important; background: transparent !important; }
body[data-painel] .global-panel-header .compact-menu button {
border-radius: 0 !important;
border: 1px solid var(--pn-chrome-fio) !important;
background: transparent !important;
color: #C6CED7 !important;
font-size: 12.5px !important; font-weight: 600 !important;
}
body[data-painel] .global-panel-header .compact-menu button:hover { background: var(--pn-chrome-2) !important; color: #fff !important; }
body[data-painel] .global-panel-header .compact-menu button.secondary { color: #A8B2BD !important; }
/* ---------------- cabeçalho de cada tela (era degradê colorido) ----------------
#sec-x > .topbar tem ID (1,1,1); aqui vai (1,2,1) para vencer. */
body[data-painel] #sec-dashboard > .topbar, body[data-painel] #sec-os > .topbar,
body[data-painel] #sec-os-tecnico > .topbar, body[data-painel] #sec-tecnicos > .topbar,
body[data-painel] #sec-mapa > .topbar, body[data-painel] #sec-cliente > .topbar,
body[data-painel] #sec-aprovacao > .topbar, body[data-painel] #sec-relatorio > .topbar,
body[data-painel] #sec-config > .topbar, body[data-painel] #sec-acessos > .topbar {
background: transparent !important;
border: none !important;
border-bottom: 1px solid var(--line) !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 4px 0 14px !important;
margin-bottom: 18px !important;
}
body[data-painel] .topbar .title h1 { color: var(--text) !important; font-size: 20px !important; font-weight: 680 !important; }
body[data-painel] .topbar .title p { color: var(--muted) !important; font-size: 13px !important; }
body[data-painel] .topbar .actions button { min-height: 44px !important; }
/* ---------------- dashboard ---------------- */
body[data-painel] #sec-dashboard .dashboard-title-row {
background: transparent !important;
border: none !important; border-bottom: 1px solid var(--line) !important;
border-radius: 0 !important; box-shadow: none !important;
padding: 4px 0 14px !important; margin-bottom: 18px !important;
}
body[data-painel] #sec-dashboard .dashboard-title-row .title h1 { color: var(--text) !important; font-size: 20px !important; }
body[data-painel] #sec-dashboard .dashboard-title-row .title p { color: var(--muted) !important; }
body[data-painel] #sec-dashboard .dashboard-overview-block {
background: var(--surface) !important; border: 1px solid var(--line) !important;
border-radius: 0 !important; box-shadow: none !important;
}
body[data-painel] #sec-dashboard .dashboard-block-heading span { color: var(--muted) !important; letter-spacing: .16em !important; }
body[data-painel] #sec-dashboard .dashboard-block-heading p { color: var(--muted) !important; }
/* faixa de indicadores: um bloco dividido por fios (era cartão com barra colorida) */
body[data-painel] #sec-dashboard #dashboardCards .dashboard-kpi,
body[data-painel] #sec-dashboard #dashboardExtra .dashboard-resource {
background: var(--surface) !important;
border: 1px solid var(--line) !important;
border-left: 1px solid var(--line) !important;
border-radius: 0 !important; box-shadow: none !important;
}
body[data-painel] #sec-dashboard .dashboard-kpi .kpi-icon {
background: var(--surface-2) !important; color: var(--muted) !important;
border-radius: 0 !important; font-weight: 700 !important;
}
body[data-painel] #sec-dashboard .dashboard-kpi .value,
body[data-painel] .card .value, body[data-painel] .dashboard-resource .value {
color: var(--text) !important; font-variant-numeric: tabular-nums !important;
letter-spacing: -.03em !important; font-weight: 650 !important;
}
body[data-painel] #sec-dashboard .dashboard-kpi .label,
body[data-painel] .card .label, body[data-painel] .dashboard-resource .label {
color: var(--muted) !important; font-size: 9.5px !important; font-weight: 800 !important;
letter-spacing: .14em !important; text-transform: uppercase !important;
}
body[data-painel] #sec-dashboard .dashboard-kpi small { color: var(--muted) !important; }
body[data-painel] #sec-dashboard > .section, body[data-painel] #sec-dashboard > .section > .dashboard-half,
body[data-painel] #sec-dashboard > .section > .dashboard-wide {
background: var(--surface) !important; border-radius: 0 !important;
}
/* ---------------- títulos de bloco ---------------- */
body[data-painel] .section-head { border-bottom: 1px solid var(--line) !important; padding-bottom: 12px !important; margin-bottom: 14px !important; }
body[data-painel] .section-head h2 { color: var(--text) !important; font-size: 15px !important; font-weight: 650 !important; }
body[data-painel] .section-head p, body[data-painel] .section-head small { color: var(--muted) !important; }
/* ---------------- tabelas ---------------- */
body[data-painel] .table-wrap { background: var(--surface) !important; border: 1px solid var(--line) !important; }
body[data-painel] table { background: var(--surface) !important; font-size: 13px !important; }
body[data-painel] thead th {
background: var(--surface-2) !important; color: var(--muted) !important;
font-size: 9.5px !important; font-weight: 800 !important; letter-spacing: .14em !important;
text-transform: uppercase !important; padding: 10px 12px !important;
border-bottom: 1px solid var(--line) !important;
}
body[data-painel] tbody td { padding: 10px 12px !important; color: var(--text) !important; border-bottom: 1px solid var(--line) !important; }
body[data-painel] tbody tr:hover td { background: var(--surface-2) !important; }
/* ---------------- campos e filtros ---------------- */
body[data-painel] input, body[data-painel] select, body[data-painel] textarea {
border: 1px solid var(--pn-controle) !important; /* era #cfdfe2 = 1,4:1 */
background: var(--surface) !important; color: var(--text) !important;
min-height: 42px !important; font-size: 13.5px !important;
}
body[data-painel] input:focus, body[data-painel] select:focus, body[data-painel] textarea:focus {
border-color: var(--pn-acc) !important; box-shadow: none !important;
}
body[data-painel] input::placeholder, body[data-painel] textarea::placeholder { color: var(--muted) !important; }
/* ---------------- botões ---------------- */
body[data-painel] button, body[data-painel] .btn {
border-radius: 0 !important; box-shadow: none !important;
font-weight: 600 !important; letter-spacing: 0 !important;
}
body[data-painel] .section button, body[data-painel] .topbar button, body[data-painel] .filters button,
body[data-painel] .actions button { min-height: 42px !important; padding: 0 14px !important; font-size: 13px !important; }
body[data-painel] button.primary, body[data-painel] .btn.primary {
background: var(--brand) !important; color: #fff !important; border: 1px solid var(--brand) !important;
}
body[data-painel] button.secondary, body[data-painel] .btn.secondary {
background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--pn-line-forte) !important;
}
body[data-painel] button.secondary:hover { background: var(--surface-2) !important; }
body[data-painel] button.success { background: var(--success) !important; border: 1px solid var(--success) !important; color: #fff !important; }
body[data-painel] button.danger { background: var(--danger) !important; border: 1px solid var(--danger) !important; color: #fff !important; }
body[data-painel] button.linklike, body[data-painel] .linklike {
background: transparent !important; border: none !important; color: var(--brand) !important;
font-weight: 650 !important; min-height: 0 !important; padding: 0 !important;
}
body[data-painel] button.tiny, body[data-painel] .tiny button { min-height: 34px !important; padding: 0 10px !important; font-size: 12px !important; }
/* ---------------- abas e navegação interna ---------------- */
body[data-painel] #sec-os .os-tabs, body[data-painel] #sec-config .config-quick-nav {
background: var(--surface) !important; border: 1px solid var(--line) !important;
border-radius: 0 !important; box-shadow: none !important;
}
body[data-painel] #sec-os .os-tabs button, body[data-painel] #sec-config .config-quick-nav button,
body[data-painel] #sec-config .config-tabs button {
background: transparent !important; border: 1px solid transparent !important;
border-radius: 0 !important; color: var(--muted) !important; min-height: 40px !important;
font-weight: 650 !important;
}
body[data-painel] #sec-os .os-tabs button.active, body[data-painel] #sec-config .config-tabs button.active {
background: var(--surface-2) !important; color: var(--text) !important;
border-color: var(--line) !important; border-bottom: 2px solid var(--brand) !important;
box-shadow: none !important;
}
body[data-painel] #sec-config .config-group-title { color: var(--text) !important; border-bottom: 1px solid var(--line) !important; }
/* ---------------- etiquetas, avisos e medidores ---------------- */
body[data-painel] .badge, body[data-painel] .cliente-os-status {
border-radius: 0 !important; border: 1px solid currentColor !important; background: transparent !important;
font-size: 9.5px !important; font-weight: 800 !important; letter-spacing: .1em !important;
text-transform: uppercase !important; padding: 3px 7px !important;
}
body[data-painel] .notice {
border-radius: 0 !important; border: 1px solid var(--line) !important;
border-left: 2px solid var(--brand) !important;
background: var(--surface-2) !important; color: var(--text) !important;
}
body[data-painel] .server-meter, body[data-painel] .server-meter > * { border-radius: 0 !important; }
body[data-painel] .cliente-label { color: var(--muted) !important; font-size: 9.5px !important; font-weight: 800 !important; letter-spacing: .14em !important; text-transform: uppercase !important; }
body[data-painel] .cliente-value { color: var(--text) !important; }
/* ---------------- janelas ---------------- */
body[data-painel] .modal { background: rgba(10,14,18,.70) !important; backdrop-filter: none !important; }
body[data-painel] .modal-card, body[data-painel] .modal > div {
border-radius: 0 !important; border: 1px solid var(--pn-line-forte) !important;
background: var(--surface) !important; color: var(--text) !important; box-shadow: none !important;
}
/* ---------------- foco visível (WCAG 2.4.7) ----------------
o painel usa outline rgba(13,148,136,.26) = 1,37:1 contra branco: invisível.
Aqui vira sólido no acento (>= 4,5:1 nos dois temas). */
body[data-painel] :is(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--pn-acc) !important;
outline-offset: 2px !important;
}
/* =====================================================================
TELAS DE OS E APROVAÇÃO (v1.1.0)
Aqui a folha v1.0 não pegava: essas duas telas têm regras com ID e cores
literais que venciam por especificidade (mesma família do que aconteceu na
Frota). Levantado comparando especificidade, não por tentativa:
OS
1. `#sec-os .section, #sec-os .card` (1,1,0) e `#sec-os .table-wrap` venciam
minha (0,2,0) -> canto redondo e borda antiga sobreviviam SÓ nesta tela.
2. `#sec-os input/select/textarea` (1,0,1) vencia minha (0,1,1) -> os campos
da tela de OS ficavam com a borda de 1,4:1 de contraste.
3. `#osDetailModal .modal-head` tinha sombra própria (o sticky dele é
intencional e NÃO foi tocado).
4. `.nova-os-cliente-transferido` e `.os-anexo-card img`: caixa verde com
raio e miniatura arredondada.
APROVAÇÃO
5. `.aprovacao-kpi` com barra de 5px e `.approval-badge` / `.badge.aprovacao`
como pílulas de fundo tingido (#fef3c7/#dcfce7/#fee2e2).
6. `.approval-report-banner` com fundo tingido (#fffbeb/#f0fdf4/#fef2f2).
7. `.approval-ativa-contrato` (banner "vai ativar contrato") usa estilo
INLINE no app.js — CSS só vence com !important, que é o caso aqui.
Assim não preciso editar o app.js.
===================================================================== */
/* ---- OS ---- */
body[data-painel] #sec-os .section, body[data-painel] #sec-os .card,
body[data-painel] #sec-os .table-wrap, body[data-painel] #sec-os table {
border-radius: 0 !important; box-shadow: none !important;
border-color: var(--line) !important;
}
body[data-painel] #sec-os .section, body[data-painel] #sec-os .card { background: var(--surface) !important; }
body[data-painel] #sec-os input, body[data-painel] #sec-os select, body[data-painel] #sec-os textarea {
border: 1px solid var(--pn-controle) !important; /* era #cfdfe2 = 1,4:1 */
background: var(--surface) !important; color: var(--text) !important;
border-radius: 0 !important;
}
body[data-painel] #sec-os input:focus, body[data-painel] #sec-os select:focus, body[data-painel] #sec-os textarea:focus {
border-color: var(--pn-acc) !important; box-shadow: none !important;
}
body[data-painel] #sec-os .section > .section-head { border-bottom: 1px solid var(--line) !important; }
body[data-painel] #osDetailModal .modal-head {
background: var(--surface) !important;
border-bottom: 1px solid var(--line) !important;
box-shadow: none !important;
}
body[data-painel] .nova-os-cliente-transferido {
border-radius: 0 !important;
background: var(--surface-2) !important;
border: 1px solid var(--line) !important;
border-left: 2px solid var(--success) !important;
color: var(--text) !important;
}
body[data-painel] .nova-os-cliente-transferido span { border-radius: 0 !important; background: var(--surface) !important; color: var(--text) !important; }
body[data-painel] .os-anexo-card, body[data-painel] .os-anexo-card img { border-radius: 0 !important; }
body[data-painel] .os-anexo-card { background: var(--surface) !important; border-color: var(--line) !important; color: var(--text) !important; }
body[data-painel] .os-anexo-card small { color: var(--muted) !important; }
body[data-painel] .os-relatorio-webapp { border-top: 1px solid var(--line) !important; }
body[data-painel] .tabela-pag-controls button { min-height: 36px !important; padding: 0 10px !important; }
body[data-painel][data-theme="dark"] #sec-os .os-tabs { background: var(--surface) !important; }
/* ---- APROVAÇÃO ---- */
body[data-painel] .aprovacao-kpi {
padding: 14px 16px !important;
border: 1px solid var(--line) !important;
border-left: 2px solid var(--line) !important;
background: var(--surface) !important;
border-radius: 0 !important; box-shadow: none !important;
}
body[data-painel] .aprovacao-kpi.aguardando { border-left-color: var(--warning) !important; }
body[data-painel] .aprovacao-kpi.aprovado { border-left-color: var(--success) !important; }
body[data-painel] .aprovacao-kpi.reprovado { border-left-color: var(--danger) !important; }
body[data-painel] .aprovacao-kpi span {
color: var(--muted) !important; font-size: 9.5px !important; font-weight: 800 !important;
letter-spacing: .14em !important; text-transform: uppercase !important;
}
body[data-painel] .aprovacao-kpi strong {
color: var(--text) !important; font-size: 25px !important; font-weight: 650 !important;
font-variant-numeric: tabular-nums !important; letter-spacing: -.03em !important;
}
body[data-painel] .aprovacao-kpi small { color: var(--muted) !important; }
/* etiquetas: contorno na cor do estado, sem pílula tingida */
body[data-painel] .approval-badge, body[data-painel] .badge.aprovacao, body[data-painel] .badge.agendada {
border-radius: 0 !important; background: transparent !important;
border: 1px solid currentColor !important;
font-size: 9.5px !important; font-weight: 800 !important; letter-spacing: .1em !important;
text-transform: uppercase !important; padding: 3px 7px !important;
}
body[data-painel] .approval-badge.aguardando, body[data-painel] .badge.aprovacao { color: var(--warning) !important; }
body[data-painel] .approval-badge.aprovado { color: var(--success) !important; }
body[data-painel] .approval-badge.reprovado { color: var(--danger) !important; }
body[data-painel] .badge.agendada { color: var(--muted) !important; }
/* faixa de resultado do relatório: superfície neutra + barra do estado */
body[data-painel] .approval-report-banner,
body[data-painel] .approval-report-banner.aprovado,
body[data-painel] .approval-report-banner.reprovado {
border-radius: 0 !important;
background: var(--surface-2) !important;
border: 1px solid var(--line) !important;
color: var(--text) !important;
}
body[data-painel] .approval-report-banner { border-left: 2px solid var(--warning) !important; }
body[data-painel] .approval-report-banner.aprovado { border-left: 2px solid var(--success) !important; }
body[data-painel] .approval-report-banner.reprovado { border-left: 2px solid var(--danger) !important; }
body[data-painel] .approval-report-banner > div:first-child span {
color: var(--muted) !important; letter-spacing: .14em !important; font-size: 9.5px !important;
}
body[data-painel] .approval-report-actions button { min-height: 42px !important; }
/* banner "ao aprovar, ativa o contrato no IXC" — tem estilo inline no app.js;
!important em folha vence estilo inline, então não preciso editar o JS. */
body[data-painel] .approval-ativa-contrato {
border-radius: 0 !important;
background: var(--surface-2) !important;
border: 1px solid var(--line) !important;
border-left: 2px solid var(--brand) !important;
color: var(--text) !important;
}
/* =====================================================================
TELAS DE CLIENTE E CONFIGURAÇÃO (v1.2.0)
O que escapava (levantado por especificidade, igual nas outras telas):
CLIENTE
1. `#sec-cliente .cliente-tabs` (1,1,0) — as abas do cliente ficaram de fora
da v1.1 (eu só tinha coberto as abas de OS).
2. `.cliente-hero` com fundo cinza translúcido e raio 18px.
3. `.cliente-pill` é pílula (raio 999px) com fundo tingido nas 4 variantes.
4. `.cliente-pppoe-field` e `.cliente-ip-atual`: campos com raio e fundo próprio.
CONFIGURAÇÃO
5. `.permission-check` / `.permission-group-card` / `.permission-summary` com
raio 9-14px, fundo `rgba(22,58,158,.09)` e sombra interna azul.
6. `.server-monitor-card` / `.server-meter`, `.backup-cloud-grid`,
`.synkia-age-alert` e `select.acoes-usuario` com cores próprias.
===================================================================== */
/* ---- CLIENTE ---- */
body[data-painel] #sec-cliente .cliente-tabs {
background: var(--surface) !important; border: 1px solid var(--line) !important;
border-radius: 0 !important; box-shadow: none !important;
}
body[data-painel] #sec-cliente .cliente-tabs button {
background: transparent !important; border: 1px solid transparent !important;
border-radius: 0 !important; color: var(--muted) !important;
min-height: 40px !important; font-weight: 650 !important;
}
body[data-painel] #sec-cliente .cliente-tabs button.active {
background: var(--surface-2) !important; color: var(--text) !important;
border-color: var(--line) !important; border-bottom: 2px solid var(--brand) !important;
box-shadow: none !important;
}
body[data-painel][data-theme="dark"] #sec-cliente .cliente-tabs { background: var(--surface) !important; }
body[data-painel] .cliente-hero {
background: var(--surface) !important; border: 1px solid var(--line) !important;
border-radius: 0 !important; box-shadow: none !important;
}
body[data-painel] .cliente-nome { color: var(--text) !important; font-size: 18px !important; font-weight: 680 !important; }
body[data-painel] .cliente-sub { color: var(--muted) !important; }
/* pílulas de situação -> etiqueta de contorno, cor pelo estado */
body[data-painel] .cliente-pill {
border-radius: 0 !important; background: transparent !important;
border: 1px solid currentColor !important;
font-size: 9.5px !important; font-weight: 800 !important; letter-spacing: .1em !important;
text-transform: uppercase !important; padding: 3px 7px !important;
}
body[data-painel] .cliente-pill.verde { color: var(--success) !important; }
body[data-painel] .cliente-pill.vermelho { color: var(--danger) !important; }
body[data-painel] .cliente-pill.amarelo { color: var(--warning) !important; }
body[data-painel] .cliente-pill.neutro { color: var(--muted) !important; }
body[data-painel] .cliente-pppoe-field, body[data-painel] .cliente-ip-atual {
border-radius: 0 !important; background: var(--surface-2) !important;
color: var(--text) !important; border-color: var(--line) !important;
}
body[data-painel] .cliente-pppoe-field:not(:read-only) {
background: var(--surface) !important; border-color: var(--pn-controle) !important;
}
body[data-painel] .cliente-cadastro-modelo .nova-os-etapa-title span { color: var(--brand) !important; }
/* ---- CONFIGURAÇÃO ---- */
body[data-painel] .permission-group-card, body[data-painel] .permission-editor-card {
border-radius: 0 !important; border: 1px solid var(--line) !important;
background: var(--surface) !important; box-shadow: none !important;
}
body[data-painel] .permission-check {
border-radius: 0 !important; border: 1px solid var(--line) !important;
background: var(--surface) !important; color: var(--text) !important;
box-shadow: none !important;
}
body[data-painel] .permission-check.selected {
border-color: var(--brand) !important;
background: var(--surface-2) !important;
box-shadow: inset 2px 0 var(--brand) !important; /* marca o item ativo sem tingir tudo */
}
body[data-painel] .permission-check strong { color: var(--text) !important; }
body[data-painel] .permission-check small { color: var(--muted) !important; }
body[data-painel] .permission-summary span, body[data-painel] .permission-summary b {
border-radius: 0 !important; background: transparent !important;
border: 1px solid currentColor !important; color: var(--brand) !important;
font-size: 9px !important; font-weight: 800 !important; letter-spacing: .08em !important;
}
body[data-painel] .permission-summary b { color: var(--muted) !important; }
body[data-painel] .server-monitor-card {
border-radius: 0 !important; border: 1px solid var(--line) !important;
background: var(--surface) !important; box-shadow: none !important;
}
body[data-painel] .server-monitor-card .label { color: var(--muted) !important; letter-spacing: .14em !important; text-transform: uppercase !important; }
body[data-painel] .server-monitor-card .value { color: var(--text) !important; font-variant-numeric: tabular-nums !important; }
body[data-painel] .server-meter { background: var(--surface-2) !important; border: 1px solid var(--line) !important; }
body[data-painel] .server-meter > * { background: var(--brand) !important; }
body[data-painel] .backup-cloud-grid label, body[data-painel] .backup-provider-fields label { color: var(--muted) !important; }
body[data-painel] .synkia-age-alert {
border-radius: 0 !important; background: var(--surface-2) !important;
border: 1px solid var(--line) !important; border-left: 2px solid var(--warning) !important;
color: var(--text) !important;
}
body[data-painel] select.acoes-usuario {
border-radius: 0 !important; background: var(--surface) !important;
color: var(--text) !important; border: 1px solid var(--pn-controle) !important;
}
body[data-painel] .config-quick-nav button.active, body[data-painel] .config-quick-nav button:hover {
border-color: var(--line) !important; color: var(--text) !important; background: var(--surface-2) !important;
}
/* =====================================================================
TELAS DE TÉCNICOS E MAPA (v1.3.0)
⚠️ Aqui havia um estrago CAUSADO POR MIM: os controles do Mapa foram feitos
para ficar SOBRE a barra colorida (texto branco, fundo translúcido branco).
Quando a v1.0 deixou a barra transparente sobre fundo claro, eles ficaram
BRANCO SOBRE CLARO = invisíveis:
.mapa-toggle{color:#fff} -> rótulo "Só online" sumia
#mapaTecnicosInfo{color:#fff;background:rgba(255,255,255,.16)} -> sumia
.mapa-camadas button{background:rgba(255,255,255,.14);color:#fff} -> Mapa/Satélite sumiam
.mapa-camadas{border:1px solid rgba(255,255,255,.45)} -> borda invisível
Todos recolocados na paleta neutra, com contraste conferido.
NÃO toco em nada do Leaflet (.leaflet-*) nem nos pinos do mapa: o texto
branco com sombra do pino é correto sobre as fotos de satélite.
===================================================================== */
/* ---- MAPA: barra de controles ---- */
body[data-painel] #sec-mapa .mapa-toggle { color: var(--text) !important; font-weight: 600 !important; }
body[data-painel] #sec-mapa #mapaTecnicosInfo {
color: var(--text) !important;
background: var(--surface-2) !important;
border: 1px solid var(--line) !important;
font-weight: 700 !important;
}
body[data-painel] #sec-mapa .topbar select, body[data-painel] #sec-mapa .topbar button {
min-height: 40px !important;
border: 1px solid var(--pn-controle-forte) !important; /* sobre o fundo da página: 3,43:1 */
box-shadow: none !important; border-radius: 0 !important;
}
body[data-painel] #sec-mapa .topbar select { background: var(--surface) !important; color: var(--text) !important; }
body[data-painel] #sec-mapa .topbar button { background: var(--surface) !important; color: var(--text) !important; font-weight: 650 !important; }
body[data-painel] #sec-mapa .topbar button:hover { background: var(--surface-2) !important; color: var(--text) !important; }
/* segmentado Mapa / Satélite */
body[data-painel] #sec-mapa .mapa-camadas { border: 1px solid var(--pn-controle-forte) !important; border-radius: 0 !important; }
body[data-painel] #sec-mapa .mapa-camadas button {
background: var(--surface) !important; color: var(--muted) !important;
min-height: 40px !important; font-weight: 650 !important; border: 0 !important;
}
body[data-painel] #sec-mapa .mapa-camadas button + button { border-left: 1px solid var(--line) !important; }
body[data-painel] #sec-mapa .mapa-camadas button.ativo,
body[data-painel] #sec-mapa .mapa-camadas button.ativo:hover {
background: var(--brand) !important; color: #fff !important; /* 9,85:1 */
}
body[data-painel] #sec-mapa .mapa-camadas button:hover { background: var(--surface-2) !important; color: var(--text) !important; }
/* ---- TÉCNICOS ---- */
body[data-painel] #sec-tecnicos .technician-kpis .card { background: var(--surface) !important; border: 1px solid var(--line) !important; }
body[data-painel] .nivel-tecnico strong { color: var(--text) !important; font-size: 15px !important; font-variant-numeric: tabular-nums !important; }
body[data-painel] .nivel-tecnico .nivel-estrelas { color: var(--warning) !important; letter-spacing: 1px !important; }
/* situação online/offline: contorno na cor do estado, como nas outras telas */
body[data-painel] .kpi-icon.online, body[data-painel] .kpi-icon.success {
background: var(--surface-2) !important; color: var(--success) !important; border-radius: 0 !important;
}
body[data-painel] .os-tecnico-group td { background: var(--surface-2) !important; color: var(--text) !important; font-weight: 700 !important; }
body[data-painel] .os-tecnico-status-filters label { color: var(--muted) !important; }
body[data-painel] .os-mapa-link { border-radius: 0 !important; }
/* =====================================================================
RELATÓRIOS E ACESSOS WEBAPP (v1.4.0)
Boa notícia: quase tudo nessas duas telas já usa os TOKENS (var(--line),
var(--surface), var(--muted)), então seguiu a paleta nova sozinho. Sobrou:
- `.os-relatorio-destaque` com sombra;
- blocos do relatório com raio herdado de valores fixos;
- `.webapp-map-frame-wrap` (moldura do mapa do técnico) e a borda do iframe;
- `.webapp-lock-note` / `.webapp-user`, que herdavam o azul de texto antigo.
ÁREA DE IMPRESSÃO INTOCADA de propósito: `.print-card`/`.print-table`/
`#printRelatorioArea` usam #fff e #ccc porque são para PAPEL — trocar por
tokens de tela pioraria o impresso.
Verificação global feita nesta rodada: varri TODAS as regras de barra/ações
com `#fff` ou `rgba(255,255,255,…)` para achar outro caso "controle branco
em barra clara" como o do Mapa. Os que restaram são legítimos (texto branco
sobre fundo colorido: hover do menu do dashboard sobre var(--brand) = 9,85:1,
e abas ativas, que a folha já repinta com contraste conferido).
===================================================================== */
/* ---- RELATÓRIOS / relatório do técnico dentro da OS e da aprovação ---- */
body[data-painel] .os-relatorio-box,
body[data-painel] .os-relatorio-resumo > div,
body[data-painel] .os-relatorio-kv > div,
body[data-painel] .os-relatorio-localizacao {
border-radius: 0 !important; box-shadow: none !important;
border: 1px solid var(--line) !important;
}
body[data-painel] .os-relatorio-box { background: var(--surface-2) !important; }
body[data-painel] .os-relatorio-resumo > div,
body[data-painel] .os-relatorio-kv > div,
body[data-painel] .os-relatorio-localizacao { background: var(--surface) !important; }
body[data-painel] .os-relatorio-resumo strong, body[data-painel] .os-relatorio-kv strong,
body[data-painel] .os-relatorio-subtitle {
color: var(--muted) !important; letter-spacing: .14em !important;
text-transform: uppercase !important; font-size: 9.5px !important; font-weight: 800 !important;
}
body[data-painel] .os-relatorio-localizacao span { color: var(--text) !important; }
body[data-painel] .os-relatorio-destaque { box-shadow: none !important; border-radius: 0 !important; }
body[data-painel] .os-anexos-grid .os-anexo-card { background: var(--surface) !important; }
/* ---- ACESSOS WEBAPP ---- */
body[data-painel] .webapp-map-frame-wrap {
border-radius: 0 !important; border: 1px solid var(--line) !important;
background: var(--surface-2) !important; box-shadow: none !important;
}
body[data-painel] .webapp-map-frame-wrap iframe { border: 0 !important; background: var(--surface-2) !important; }
body[data-painel] .webapp-lock-note { color: var(--muted) !important; }
body[data-painel] .webapp-user { color: var(--text) !important; font-weight: 650 !important; }
body[data-painel] #sec-acessos .badge { letter-spacing: .1em !important; }
/* =====================================================================
REPARO DO TOPO FIXO + BARRA LATERAL (v1.5.0)
⚠️ ERRO MEU, apontado por print do usuário: "todas as outras estão com o
top transparente". A causa é a MESMA do hero do RH, agora no painel:
body:not(.login-page) [data-section] > .topbar {
position: fixed !important; top:0; left:244px; right:0; z-index:800; }
Ou seja: o cabeçalho de CADA tela do painel é uma BARRA FIXA, que só
funcionava porque tinha fundo opaco (o degradê colorido). Quando a v1.0
deixou o fundo transparente, a barra passou a flutuar sobre o conteúdo —
o título ficava cortado por baixo do bloco branco.
Correção: manter a barra FIXA (é o desenho da casa e o `.main` já reserva
espaço), mas com FUNDO OPACO e fio embaixo. Não mexo em position/top/left.
Duas coisas que descobri e corrigem suposições anteriores minhas:
- `.global-panel-header` também é `display:none` NO PAINEL (synk-v17:1367);
as regras que escrevi para ele são inertes (deixadas por consistência).
- A BARRA LATERAL é a navegação real: `display:flex!important; position:fixed;
width:244px; z-index:950` com degradê azul. Precisa entrar na identidade —
era o último pedaço colorido fora do padrão.
===================================================================== */
/* ---- topo de cada tela: FIXED -> STICKY (v1.6.0) ----
Por que trocar: com `position:fixed` a barra sai do fluxo e o `.main` reserva
só `padding-top:22px`, enquanto a barra tem `min-height:112px` — ou seja, ela
SEMPRE cobre os primeiros ~90px do conteúdo. Com o degradê opaco isso passava
(a barra "era" o cabeçalho), mas o título continuava sendo cortado quando a
página rolava e o conteúdo passava por cima/por baixo dela.
`sticky` resolve a classe inteira do problema: a barra fica NO FLUXO (reserva
o próprio espaço, nada de sobreposição) e ainda cola no topo ao rolar — foi
exatamente o que resolveu no RH e na Frota. Requisito conferido: nenhum
ancestral (html/body/.app/.main/#sec-*) tem `overflow`.
Estas 5 propriedades estruturais são a EXCEÇÃO consciente desta folha. */
body[data-painel]:not(.login-page) [data-section] > .topbar {
position: sticky !important;
top: 0 !important;
left: auto !important;
right: auto !important;
min-height: 0 !important; /* era 112px fixo, cortava conteúdo mais alto */
overflow: visible !important; /* era hidden, clipava o que passasse de 112px */
background: var(--bg) !important;
border: none !important;
border-bottom: 1px solid var(--line) !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 16px 0 14px !important;
margin: 0 0 18px !important;
z-index: 700 !important;
}
body[data-painel] #sec-dashboard .dashboard-title-row {
background: var(--bg) !important;
border-bottom: 1px solid var(--line) !important;
box-shadow: none !important;
padding: 4px 0 14px !important;
margin-bottom: 18px !important;
}
/* a bolha decorativa gigante da barra (290px, right:-62px) não faz sentido no
visual chapado — anulada pelo content, sem tocar em display/position. */
body[data-painel]:not(.login-page) [data-section] > .topbar::after { content: none !important; }
/* a sobrancelha "SYNK PAINEL" é conteúdo do ::before — mantida, só recolorida */
body[data-painel]:not(.login-page) [data-section] > .topbar .title::before {
color: var(--muted) !important; letter-spacing: .18em !important;
}
/* ---- barra lateral: chrome grafite, como nos sistemas ---- */
body[data-painel]:not(.login-page) .sidebar {
background: var(--pn-chrome) !important;
border-right: 1px solid var(--pn-chrome-fio) !important;
box-shadow: none !important;
}
body[data-painel]:not(.login-page) .sidebar .brand {
border-bottom: 1px solid var(--pn-chrome-fio) !important;
padding-bottom: 12px !important;
}
body[data-painel]:not(.login-page) .sidebar .brand-text { color: var(--pn-chrome-txt) !important; font-size: 14px !important; font-weight: 700 !important; }
body[data-painel]:not(.login-page) .sidebar .brand .brand-text small { color: var(--pn-chrome-txt-3) !important; }
body[data-painel]:not(.login-page) .sidebar .brand .brand-logo { border-radius: 0 !important; background: transparent !important; }
body[data-painel]:not(.login-page) .sidebar .nav button {
border-radius: 0 !important;
border: none !important;
border-left: 2px solid transparent !important;
background: transparent !important;
color: var(--pn-chrome-txt-2) !important;
font-size: 13.5px !important; font-weight: 600 !important;
}
body[data-painel]:not(.login-page) .sidebar .nav button:hover { background: var(--pn-chrome-2) !important; color: var(--pn-chrome-txt) !important; }
body[data-painel]:not(.login-page) .sidebar .nav button.active,
body[data-painel]:not(.login-page) .sidebar .nav button[aria-current] {
background: var(--pn-chrome-2) !important;
border-left-color: var(--pn-acc-chrome) !important; /* 6,58:1 no escuro */
color: var(--pn-chrome-txt) !important;
}
body[data-painel]:not(.login-page) .sidebar .nav-sep { background: var(--pn-chrome-fio) !important; }
body[data-painel]:not(.login-page) .sidebar #topUserInfo { color: var(--pn-chrome-txt-3) !important; font-size: 11.5px !important; }
body[data-painel]:not(.login-page) .sidebar #btnLogout,
body[data-painel]:not(.login-page) .sidebar #btnLogoutSidebar {
border-radius: 0 !important;
border: 1px solid var(--pn-chrome-fio) !important;
background: transparent !important;
color: var(--pn-chrome-txt-2) !important;
}
body[data-painel]:not(.login-page) .sidebar #btnLogout:hover,
body[data-painel]:not(.login-page) .sidebar #btnLogoutSidebar:hover { background: var(--pn-chrome-2) !important; color: var(--pn-chrome-txt) !important; }
/* ---- OS POR TÉCNICO (tela pedida) ---- */
body[data-painel] #sec-os-tecnico .section, body[data-painel] #sec-os-tecnico .card,
body[data-painel] #sec-os-tecnico .table-wrap {
border-radius: 0 !important; box-shadow: none !important;
background: var(--surface) !important; border: 1px solid var(--line) !important;
}
body[data-painel] #sec-os-tecnico input, body[data-painel] #sec-os-tecnico select {
border: 1px solid var(--pn-controle) !important; border-radius: 0 !important;
background: var(--surface) !important; color: var(--text) !important;
}
body[data-painel] #sec-os-tecnico .os-tecnico-group td {
background: var(--surface-2) !important; color: var(--text) !important;
font-weight: 700 !important; letter-spacing: .04em !important;
}
body[data-painel] #sec-os-tecnico .os-tecnico-status-filters label { color: var(--muted) !important; }
body[data-painel] #sec-os-tecnico .badge { letter-spacing: .1em !important; }
/* =====================================================================
TOPO GRAFITE + FIM DA RESERVA MORTA DE 112px (v1.6.4)
-----------------------------------------------------------------------
Duas coisas nesta rodada.
(A) O VÃO NO ALTO DE TODA TELA. Causa em synk-v17.css:133:
body:not(.login-page) .main { padding: 112px 0 48px !important }
Esses 112px reservavam espaço para o `.global-panel-header`, que é
`position:fixed` — só que ele é `display:none` no painel desde a
synk-v17.css:1367. Ou seja: reserva para um cabeçalho que não existe.
A style.css:1972 até pede `padding:22px 0 34px`, mas carrega ANTES,
então perdia o desempate. Aqui zero só o topo (o rodapé de 48px fica).
(B) A FAIXA DO TOPO passa a ser o MESMO grafite do menu (--pn-chrome),
a pedido do usuário. Com isso o título volta a ser BRANCO — que é o
que ele sempre foi nesta base (ver nota de especificidade abaixo) —
e o topo lê como uma peça só com a barra lateral.
NOTA DE ESPECIFICIDADE (o que me derrubou na v1.6.1): o texto do topo é
pintado de branco em DOIS lugares que vencem `body[data-painel] .topbar
.title h1` (0,3,2):
- synk-v17.css:1691, do tema Synk (o ativo):
body[data-theme="synk_teal"]:not(.login-page) [data-section] > .topbar
h1, ...p { color:#f2fbfa !important } -> (0,4,2)
- index.html tinha style="color:#fff !important" INLINE no h1 da
Dashboard — inline+!important nenhuma folha vence; removido no HTML.
Por isso os seletores daqui vão a (0,5,2), e o fundo repete a lista de
IDs da linha 109 para bater os (1,2,1) que já existem nesta folha.
===================================================================== */
/* (A) ---- fim dos 112px de reserva morta ---- */
body[data-painel]:not(.login-page) .main {
padding-top: 0 !important;
}
/* (B) ---- a faixa do topo, no grafite do menu ----
Repete a lista de IDs da linha 109 (1,2,1) e vem depois dela, senão o
`background: transparent` daquele bloco continuaria valendo. */
body[data-painel] #sec-dashboard > .topbar, body[data-painel] #sec-os > .topbar,
body[data-painel] #sec-os-tecnico > .topbar, body[data-painel] #sec-tecnicos > .topbar,
body[data-painel] #sec-mapa > .topbar, body[data-painel] #sec-cliente > .topbar,
body[data-painel] #sec-aprovacao > .topbar, body[data-painel] #sec-relatorio > .topbar,
body[data-painel] #sec-config > .topbar, body[data-painel] #sec-acessos > .topbar,
body[data-painel] #sec-dashboard .dashboard-title-row {
background: var(--pn-chrome) !important;
border: none !important;
border-bottom: 1px solid var(--pn-chrome-fio) !important;
border-radius: 0 !important;
box-shadow: none !important;
/* recuo = o do TEXTO dentro do card, não o da borda dele: `.section` usa
var(--section-pad) + 1px de borda. Acompanha o clamp ao redimensionar. */
padding: 18px calc(var(--section-pad) + 1px) !important;
margin: 0 0 18px !important;
}
/* ---- texto sobre o grafite: mesma escala de tons da barra lateral ---- */
body[data-painel]:not(.login-page) [data-section] > .topbar .title h1,
body[data-painel] #sec-dashboard .dashboard-title-row .title h1 {
color: var(--pn-chrome-txt) !important;
}
body[data-painel]:not(.login-page) [data-section] > .topbar .title p,
body[data-painel] #sec-dashboard .dashboard-title-row .title p {
color: var(--pn-chrome-txt-2) !important;
}
/* sobrancelhas: o ::before ("SYNK PAINEL") e a do módulo ("OPERAÇÃO DE CAMPO") */
body[data-painel]:not(.login-page) [data-section] > .topbar .title::before,
body[data-painel]:not(.login-page) [data-section] > .topbar .title .module-eyebrow {
color: var(--pn-chrome-txt-3) !important; letter-spacing: .18em !important;
}
/* a Dashboard não usa `.section`: o bloco de baixo é `.dashboard-overview-block`,
com padding:18px + 1px de borda = 19px. Mesma especificidade (1,2,1) do bloco
acima, mas vem depois, então ganha. */
body[data-painel] #sec-dashboard .dashboard-title-row {
padding: 18px 19px !important;
}
/* =====================================================================
O VÃO NO ALTO DE TODA TELA — a causa real era JS, não CSS (v1.6.5)
-----------------------------------------------------------------------
Print do usuário marcando a faixa branca acima da barra. Eu tinha culpado
os 112px de `.main` (synk-v17.css:133) na v1.6.2 — ERRADO: aquela regra já
era anulada por outra do PRÓPRIO synk-v17.css, de mesma especificidade e
mais abaixo (linha ~1391, `padding: 22px 24px 48px`). Levantei isso
listando todas as regras que casam com `.main` e comparando especificidade,
em vez de ler de cima para baixo.
A causa real está em app.js (~5335), `ajustarTopbarFixo()`:
sec.style.paddingTop = (altura_da_topbar + 14) + 'px'
Ou seja: o JS mede a barra e injeta o espaço INLINE na seção. Isso existia
porque a barra era `position:fixed` (o comentário do app.js ainda diz isso)
e portanto fora do fluxo. Desde que a v1.6.0 trocou para `sticky`, a barra
reserva o próprio espaço — o espaçador virou vão morto de ~126px.
Resolvo aqui e NÃO no app.js: `!important` de folha vence estilo inline sem
`!important` (mesma manobra já usada nesta base para o banner de aprovação).
Assim o app.js segue com md5 intocado e reverter continua sendo tirar o
. Se um dia a barra voltar a ser `fixed`, esta regra tem de sair junto.
===================================================================== */
body[data-painel]:not(.login-page) [data-section] {
padding-top: 0 !important;
}
/* =====================================================================
CHROME QUE SEGUE O TEMA + ÍCONES COLORIDOS (v1.7.0)
-----------------------------------------------------------------------
Até aqui o menu e a faixa do topo eram grafite FIXO, em qualquer tema —
o texto branco lá dentro podia ser hardcoded sem risco. A pedido do
usuário eles passam a acompanhar o tema:
data-theme=light -> chrome claro (#ECEFF3), texto ESCURO
data-theme=dark -> chrome grafite(#14181D), texto claro
data-theme=synk_teal -> azul petróleo (#124C59), texto claro
⚠️ É exatamente por isso que as 11 cores fixas do menu e do topo viraram
os tokens --pn-chrome-txt / -txt-2 / -txt-3 logo acima: se o fundo clareia
e o texto continua branco, o tema Claro reproduz o bug de branco-no-branco
que custou as v1.6.1-1.6.4. Nenhuma cor de chrome pode voltar a ser hex.
CONTRASTE — calculado para os pares que EXISTEM na tela, nos 3 temas
(o par "sobrancelha sobre fundo de hover" foi descartado por não existir:
--pn-chrome-2 só é fundo de botão do menu, e ali o texto é o rótulo):
claro 14,36 / 6,60 / 5,42 / 13,34 / 7,93
escuro 17,82 / 8,29 / 5,85 / 15,84 / 6,58
synk 9,53 / 6,16 / 5,40 / 7,77 / 5,01
Ícones (sobre --surface-2), claro e synk: 8,86 / 5,69 / 5,88 / 4,81;
escuro: 6,71 / 10,05 / 7,14 / 9,39. Todos ≥ 4,5 (texto) e ≥ 3,0 (marcador).
===================================================================== */
/* ---- tema CLARO (também é o padrão antes do app.js resolver o tema) ---- */
body[data-painel] {
--pn-chrome:#ECEFF3; --pn-chrome-2:#E3E7ED; --pn-chrome-fio:#D5DBE2;
--pn-chrome-txt:#1A1F26; --pn-chrome-txt-2:#4A5560; --pn-chrome-txt-3:#586170;
--pn-acc-chrome:#163A9E;
--pn-ico-info:#163A9E; --pn-ico-warn:#8A5300;
--pn-ico-danger:#B3261E; --pn-ico-ok:#0F7B3F;
}
/* ---- tema ESCURO: o grafite de sempre ---- */
body[data-painel][data-theme="dark"] {
--pn-chrome:#14181D; --pn-chrome-2:#1D232A; --pn-chrome-fio:#2A323B;
--pn-chrome-txt:#FFFFFF; --pn-chrome-txt-2:#A8B2BD; --pn-chrome-txt-3:#8A95A1;
--pn-acc-chrome:#6FA8FF;
--pn-ico-info:#6FA8FF; --pn-ico-warn:#FFC163;
--pn-ico-danger:#FF8B83; --pn-ico-ok:#4EDE93;
}
/* ---- tema SYNK: azul petróleo ---- */
body[data-painel][data-theme="synk_teal"] {
--pn-chrome:#124C59; --pn-chrome-2:#175A69; --pn-chrome-fio:#215F6D;
--pn-chrome-txt:#FFFFFF; --pn-chrome-txt-2:#BCD4DA; --pn-chrome-txt-3:#ABC8D0;
--pn-acc-chrome:#8ADCEC;
}
/* ---- ícones dos cards: cor por SIGNIFICADO, não decoração ----
O `.kpi-icon` é uma etiqueta de texto (OS, ●, A, ▶, !, ✓) gerada pelo
app.js; a classe semântica fica no CARD (.dashboard-kpi.abertas etc).
O fundo tingido usa color-mix; a declaração neutra vem ANTES, então
navegador sem suporte fica com o fundo cinza e só o glifo colorido. */
body[data-painel] #sec-dashboard .dashboard-kpi .kpi-icon {
background: var(--surface-2) !important;
font-weight: 700 !important;
}
body[data-painel] #sec-dashboard .dashboard-kpi.mes .kpi-icon,
body[data-painel] #sec-dashboard .dashboard-kpi.total .kpi-icon,
body[data-painel] #sec-dashboard .dashboard-kpi.ativas .kpi-icon,
body[data-painel] #sec-dashboard .dashboard-kpi.abertas .kpi-icon {
color: var(--pn-ico-info) !important;
background: color-mix(in srgb, var(--pn-ico-info) 12%, var(--surface)) !important;
}
body[data-painel] #sec-dashboard .dashboard-kpi.andamento .kpi-icon {
color: var(--pn-ico-warn) !important;
background: color-mix(in srgb, var(--pn-ico-warn) 12%, var(--surface)) !important;
}
body[data-painel] #sec-dashboard .dashboard-kpi.pendentes .kpi-icon {
color: var(--pn-ico-danger) !important;
background: color-mix(in srgb, var(--pn-ico-danger) 12%, var(--surface)) !important;
}
body[data-painel] #sec-dashboard .dashboard-kpi.aprovacao .kpi-icon {
color: var(--pn-ico-ok) !important;
background: color-mix(in srgb, var(--pn-ico-ok) 12%, var(--surface)) !important;
}
/* os KPIs de Técnicos usam classe no PRÓPRIO ícone */
body[data-painel] .kpi-icon.success { color: var(--pn-ico-ok) !important;
background: color-mix(in srgb, var(--pn-ico-ok) 12%, var(--surface)) !important; }
body[data-painel] .kpi-icon.online { color: var(--pn-ico-ok) !important;
background: color-mix(in srgb, var(--pn-ico-ok) 12%, var(--surface)) !important; }
body[data-painel] .kpi-icon.workload { color: var(--pn-ico-info) !important;
background: color-mix(in srgb, var(--pn-ico-info) 12%, var(--surface)) !important; }
/* =====================================================================
ÍCONE NO TOPO DE CADA TELA (v1.7.1)
-----------------------------------------------------------------------
Pendurado no `h1::before` (inline), NÃO na `.topbar::before`: a `.topbar`
é `display:flex; justify-content:space-between`, então um pseudo nela
viraria um terceiro item e empurraria o título para o centro.
Uso os MESMOS emoji do menu lateral — o item de menu correspondente está
a poucos centímetros com o mesmo símbolo, e repetir amarra as duas peças.
(Em RH/Frota é diferente: lá o chrome já tinha sido convertido de emoji
para ícone de traço, então a v3.5.1 usa SVG por `mask`.)
Emoji não depende de cor de tema — é colorido em claro, escuro e petróleo.
===================================================================== */
body[data-painel] [data-section] > .topbar .title h1::before,
body[data-painel] #sec-dashboard .dashboard-title-row .title h1::before {
margin-right: 9px !important;
font-size: .95em !important;
-webkit-font-smoothing: auto;
}
body[data-painel] #sec-dashboard .title h1::before { content: "🏠"; }
body[data-painel] #sec-os .title h1::before { content: "📋"; }
body[data-painel] #sec-os-tecnico .title h1::before { content: "🧰"; }
body[data-painel] #sec-tecnicos .title h1::before { content: "👥"; }
body[data-painel] #sec-mapa .title h1::before { content: "🗺️"; }
body[data-painel] #sec-cliente .title h1::before { content: "👤"; }
body[data-painel] #sec-aprovacao .title h1::before { content: "✅"; }
body[data-painel] #sec-relatorio .title h1::before { content: "📊"; }
body[data-painel] #sec-config .title h1::before { content: "⚙️"; }
body[data-painel] #sec-acessos .title h1::before { content: "🔐"; }