/* dx4-ui.js · Portal DX4 v1.00 · biblioteca comum dos painéis (NOC, Backup, ServiceDesk, Base) * Aditiva: só cria o que o painel ainda não tem. Tudo em window.DX4_UI. * - DX4_UI.tema(valor?) lê/aplica 'auto' | 'light' | 'dark' em , guarda em localStorage 'dx4:tema' e segue a sessão do Portal. * - DX4_UI.toast(msg, ms?) aviso curto no rodapé (usa o toast do painel se existir). * - DX4_UI.confirma(msg, ok?, perigo?) -> Promise janela própria (confirm() do navegador é bloqueado nos artifacts). * - DX4_UI.pede(titulo, label, valor?, tipo?) -> Promise * - DX4_UI.dicaToque() no celular, segurar o dedo em um botão com title mostra a dica (não existe "passar o mouse"). * - DX4_UI.semTitle() lista botões visíveis sem title (regra fixa da DX4: todo botão com explicação). * - DX4_UI.tokens cores do Design System DX4 (claro/escuro), iguais às dos quatro painéis. */ (function () { if (window.DX4_UI) return; // tema escuro é o padrão em todos os painéis (só vale enquanto a pessoa não escolheu outro) try { [['dx4:tema', '"dark"'], ['noc:tema', '"dark"'], ['sd:tema', '"dark"'], ['kb.tema', 'dark'], ['cockpit-backup:tema', 'dark']].forEach(([k, v]) => { if (localStorage.getItem(k) == null) localStorage.setItem(k, v); }); } catch (e) {} const T = { light: { paper: '#F4F6F5', card: '#FFFFFF', ink: '#101D24', muted: '#5C6B70', line: '#D9E0DF', line2: '#B9C4C4', teal: '#0E7C86', red: '#d93025', green: '#16a765', amber: '#C9822A', info: '#1F6FD1', purple: '#7B5CC9' }, dark: { paper: '#0F171B', card: '#16222A', ink: '#E6ECEA', muted: '#93A3A8', line: '#26343B', line2: '#3A4B53', teal: '#3FB2BC', red: '#E07A66', green: '#5FB77A', amber: '#E0A050', info: '#5B9BE6', purple: '#A68BE8' } }; const $ = s => document.querySelector(s); const esc = s => String(s == null ? '' : s).replace(/[&<>"']/g, c => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c])); function css() { if ($('#dx4ui-css')) return; const st = document.createElement('style'); st.id = 'dx4ui-css'; st.textContent = `.dx4ui-toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink,#101D24);color:var(--paper,#F4F6F5);padding:9px 14px;border-radius:10px;font-size:13.5px;z-index:4000;opacity:0;transition:opacity .2s;pointer-events:none;max-width:92vw}.dx4ui-toast.on{opacity:1} .dx4ui-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:3900;display:flex;align-items:center;justify-content:center;padding:16px}.dx4ui-dlg{background:var(--card,#fff);color:var(--ink,#101D24);border-radius:14px;padding:18px;width:min(460px,100%);max-height:88dvh;overflow:auto;font-family:inherit}.dx4ui-dlg h3{margin:0 0 8px;font-size:17px}.dx4ui-dlg p{font-size:13.5px;margin:0 0 10px}.dx4ui-dlg input{width:100%;border:1px solid var(--line2,#B9C4C4);border-radius:10px;padding:9px 11px;font:inherit;background:var(--card,#fff);color:inherit;margin:4px 0 8px}.dx4ui-acts{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}.dx4ui-btn{border:1px solid var(--line2,#B9C4C4);background:var(--card,#fff);color:inherit;border-radius:8px;padding:7px 12px;font:inherit;font-size:13px;cursor:pointer}.dx4ui-btn.pri{background:var(--ink,#101D24);color:var(--paper,#F4F6F5);border-color:var(--ink,#101D24)}.dx4ui-btn.danger{color:var(--red,#d93025);border-color:var(--red,#d93025)}`; document.head.appendChild(st); } function tema(v) { if (v !== undefined) { try { localStorage.setItem('dx4:tema', JSON.stringify(v)); } catch (e) {} } let t = v; if (t === undefined) { try { t = JSON.parse(localStorage.getItem('dx4:tema') || '"auto"'); } catch (e) { t = 'auto'; } } if (t === 'auto') document.documentElement.removeAttribute('data-theme'); else document.documentElement.setAttribute('data-theme', t); return t; } function toast(msg, ms) { if (typeof window.toast === 'function' && window.toast !== toast) { try { return window.toast(msg, ms); } catch (e) {} } css(); let t = $('.dx4ui-toast'); if (!t) { t = document.createElement('div'); t.className = 'dx4ui-toast'; document.body.appendChild(t); } t.textContent = msg; t.classList.add('on'); clearTimeout(t._t); t._t = setTimeout(() => t.classList.remove('on'), ms || 2600); } function janela(html) { css(); const bg = document.createElement('div'); bg.className = 'dx4ui-bg'; bg.innerHTML = ``; document.body.appendChild(bg); const f = bg.querySelector('input,button'); if (f) setTimeout(() => f.focus(), 30); return bg; } function confirma(msg, ok, perigo) { return new Promise(res => { const bg = janela(`

Confirmar

${msg}

`); bg.onclick = e => { const b = e.target.closest('[data-r]'); if (b) { bg.remove(); res(b.dataset.r === '1'); } else if (e.target === bg) { bg.remove(); res(false); } }; }); } function pede(titulo, label, valor, tipo) { return new Promise(res => { const bg = janela(`

${esc(titulo)}

${esc(label)}

`); const i = bg.querySelector('input'); i.onkeydown = e => { if (e.key === 'Enter') bg.querySelector('[data-r="1"]').click(); }; bg.onclick = e => { const b = e.target.closest('[data-r]'); if (b) { const v = i.value; bg.remove(); res(b.dataset.r === '1' ? v : null); } }; }); } let ligado = false; function dicaToque() { if (ligado) return; ligado = true; let lp = null; document.addEventListener('touchstart', e => { const b = e.target.closest('button[title],a[title],[role="button"][title]'); if (!b) return; lp = setTimeout(() => toast(b.getAttribute('title'), 3000), 550); }, { passive: true }); ['touchend', 'touchmove', 'touchcancel'].forEach(ev => document.addEventListener(ev, () => clearTimeout(lp), { passive: true })); document.addEventListener('contextmenu', e => { if (e.target.closest('button[title],a[title]') && matchMedia('(pointer:coarse)').matches) e.preventDefault(); }); } function semTitle() { return [...document.querySelectorAll('button')].filter(b => !b.title && b.offsetParent !== null && !b.closest('[data-sem-dica]')).map(b => (b.textContent || b.getAttribute('aria-label') || '').trim().slice(0, 30)); } // ---- Menu "Painéis DX4": o mesmo botão azul, no mesmo lugar, em todos os painéis (hub, outros painéis, tema) ---- const NOMES = { noc: 'Cockpit NOC', backup: 'Cockpit Backup', servicedesk: 'Cockpit ServiceDesk', base: 'Base de Conhecimento' }; function menuPaineis(onde) { const N = window.DX4_NUCLEO; if (!N || $('#dx4-pm')) return null; const sess = sessaoAtual(); const ORD = ['backup', 'servicedesk', 'noc', 'base']; const mods = ((sess && sess.modulos) || ORD).filter(m => !(sess && sess.perfil === 'cli' && m === 'base')).slice().sort((a, b) => ORD.indexOf(a) - ORD.indexOf(b)); const atual = (location.pathname.match(/\/(noc|backup|servicedesk|base)\//) || [])[1] || (document.title.match(/NOC|Backup|ServiceDesk|Conhecimento/) || [''])[0].toLowerCase().replace('conhecimento', 'base'); css(); const st = document.createElement('style'); st.textContent = `.dx4-pm{position:relative;display:inline-block;font-family:inherit}.dx4-pm>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;background:#1F6FD1;color:#fff;border:0;border-radius:9px;padding:7px 12px;font-weight:700;font-size:13px;white-space:nowrap;box-shadow:0 2px 8px rgba(31,111,209,.35)}.dx4-pm>summary::-webkit-details-marker{display:none}.dx4-pm>summary:hover{filter:brightness(1.08)}.dx4-pm-m{position:absolute;right:0;top:calc(100% + 6px);background:var(--card,#16222A);color:var(--ink,#E6ECEA);border:1px solid var(--line,#26343B);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.25);padding:6px;min-width:250px;z-index:3000;display:grid;gap:2px}.dx4-pm-m a,.dx4-pm-m button{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:8px;text-decoration:none;color:inherit;font:inherit;font-size:13.5px;background:transparent;border:0;cursor:pointer;text-align:left}.dx4-pm-m a:hover,.dx4-pm-m button:hover{background:var(--faint,rgba(127,127,127,.15))}.dx4-pm-m .sep{border-top:1px solid var(--line,#26343B);margin:4px 2px}.dx4-pm-m .tit{font-size:11px;font-weight:700;color:var(--muted,#93A3A8);padding:6px 10px 2px;text-transform:uppercase;letter-spacing:.04em}.dx4-pm-m .atual{opacity:.55;pointer-events:none}@media(max-width:640px){.dx4-pm>summary{padding:7px 10px;font-size:12px}.dx4-pm-m{position:fixed;left:8px;right:8px;top:auto;bottom:calc(76px + env(safe-area-inset-bottom,0px))}}`; document.head.appendChild(st); const d = document.createElement('details'); d.className = 'dx4-pm'; d.id = 'dx4-pm'; const ir = (m, r, p) => (N.ir ? N.ir(m, r, p) : (N.modulos && N.modulos[m]) || '#'); const ico = ''; const t = tema(); d.innerHTML = `

${ico} Painéis DX4

⌂ Portal DX4 · hub ${ORD.filter(m => mods.includes(m)).map(m => `${NOMES[m]}${m === atual ? ' · aqui' : ' ↗'}`).join('')}

Tema

${[['dark', 'Escuro'], ['light', 'Claro'], ['auto', 'Automático']].map(([v, l]) => ``).join('')}

`; d.addEventListener('click', e => { const b = e.target.closest('[data-tema]'); if (b) { tema(b.dataset.tema); ['noc:tema', 'sd:tema'].forEach(k => { try { localStorage.setItem(k, JSON.stringify(b.dataset.tema)); } catch (x) {} }); try { localStorage.setItem('kb.tema', b.dataset.tema); } catch (x) {} try { localStorage.setItem('cockpit-backup:tema', b.dataset.tema); } catch (x) {} location.reload(); } if (e.target.closest('[data-sair]')) { try { ['dx4:sessao', 'dx4:nucleo'].forEach(k => localStorage.removeItem(k)); Object.keys(localStorage).filter(k => k.startsWith('dx4:nucleo:cli:')).forEach(k => localStorage.removeItem(k)); } catch (x) {} if (location.pathname.match(/\/(noc|backup|servicedesk|base)\//)) fetch('/api/logout', { method: 'POST', credentials: 'same-origin' }).catch(() => {}).then(() => { location.href = N.portal || '/'; }); else location.href = N.portal || '#'; } }); document.addEventListener('click', e => { if (!d.contains(e.target)) d.open = false; }); const ht = $('.hdr-top'); if (ht) ht.appendChild(d); else { d.style.cssText = 'position:fixed;top:8px;right:8px;z-index:3000'; document.body.appendChild(d); } organizaCabecalho(); return d; } // ---- Padrão visual do Cockpit Backup para os outros painéis: botões com ícone e cor por função, faixas de seção, abas com ícone ---- const ICONES = {"lock": "", "antenna": "", "belloff": "", "copy": "", "alert": "", "briefcase": "", "external": "", "filter": "", "book": "", "pie": "", "bolt": "", "mute": "", "calendar": "", "clipboard": "", "trash": "", "user": "", "eye": "", "clock": "", "x": "", "check": "", "plus": "", "xcircle": "", "search": "", "sparkle": "", "shield": "", "download": "", "list": "", "inbox": "", "mail": "", "home": "", "pencil": "", "help": "", "users": "", "robot": "", "play": "", "save": "", "userplus": "", "grid": "", "database": "", "send": "", "undo": ""}; const BTN_ICONE = [[/^zerar contagem/i, 'undo', 'teal'], [/^assumir/i, 'user', 'teal'], [/^reconhecer/i, 'check', 'teal'], [/^anotar/i, 'pencil', 'blue'], [/^(ler agora|reler)/i, 'bolt', 'teal'], [/^(perguntar)/i, 'search', 'teal'], [/^(anexar)/i, 'clipboard', 'slate'], [/^(atender)/i, 'help', 'teal'], [/^(apontar|iniciar|parar o rel)/i, 'clock', 'purple'], [/^(responder|enviar ao cliente)/i, 'send', 'indigo'], [/^(escalar|encaminhar)/i, 'external', 'amber'], [/^(resolver|fechar chamado|marcar resolvido)/i, 'check', 'green'], [/^(como resolvemos|gravar na base)/i, 'book', 'teal'], [/^(sair)$/i, 'x', 'grey'],[/^salvar/i, 'save', 'green'], [/^(cancelar|fechar|parar)/i, 'x', 'grey'], [/^(remover|excluir|apagar|zerar)/i, 'trash', 'red'], [/^(editar|alterar)/i, 'pencil', 'blue'], [/^(gerar relatório|relatório|criar rascunho|gerar rascunho|gerar \d)/i, 'mail', 'indigo'], [/^(ficha|cadastro e desenho|abrir cadastro|editar cadastro|cadastro)/i, 'user', 'purple'], [/^(copiar)/i, 'copy', 'grey'], [/^(baixar|exportar|base completa|fazer backup|backup)/i, 'download', 'slate'], [/^(enviar)/i, 'send', 'indigo'], [/^(marcar como visto)/i, 'eye', 'teal'], [/^(voltar|restaurar|recolocar|parar de ignorar)/i, 'undo', 'teal'], [/^(abrir)/i, 'external', 'blue'], [/^(histórico)/i, 'clock', 'purple'], [/^(simular|rodar|ver o que)/i, 'play', 'teal'], [/^(\+|novo|adicionar|registrar|cadastrar|incluir)/i, 'plus', 'green'], [/^(guardar)/i, 'save', 'green'], [/^(encaixar)/i, 'grid', 'teal'], [/^(soltar)/i, 'external', 'teal'], [/^(entendi)/i, 'check', 'teal'], [/^(recusar|descartar|cancelar|fechar)/i, 'x', 'grey'], [/^(juntar)/i, 'copy', 'teal'], [/^(gravar|salvar)/i, 'save', 'teal'], [/^(sair)/i, 'external', 'grey'], [/^(pausar)/i, 'clock', 'grey'], [/^(continuar|retomar)/i, 'play', 'teal'], [/^(tentar de novo)/i, 'undo', 'teal'], [/^(enviar)/i, 'send', 'teal'], [/^(criar acesso)/i, 'userplus', 'teal'], [/^(ver como o cliente)/i, 'eye', 'blue'], [/^(limpar)/i, 'trash', 'amber'], [/^(atualizar|ler)/i, 'bolt', 'teal'], [/^(ir para)/i, 'filter', 'grey'], [/^analisar/i, 'robot', 'teal'], [/^(gerar|diagn)/i, 'mail', 'indigo'], [/^virar/i, 'userplus', 'purple'], [/^nota/i, 'pencil', 'blue'], [/^(ata)$/i, 'clipboard', 'purple'], [/^(marcar|selecionar)/i, 'check', 'teal'], [/^(toda a fila)/i, 'list', 'grey'], [/^(minha fila)/i, 'user', 'teal'], [/^(sem dono|sem analista)/i, 'belloff', 'grey'], [/^(ver|mostrar)/i, 'eye', 'grey'], [/^(ignorar)/i, 'mute', 'grey'], [/^(não é backup|remetente não)/i, 'xcircle', 'grey'], [/^(cliente não faz|voltar a cobrar)/i, 'shield', 'grey'], [/^(monitorar)/i, 'eye', 'teal'], [/./, 'bolt', 'grey']]; const ABA_ICONE = { inicio: 'home', 'início': 'home', chamados: 'list', fila: 'user', 'minha fila': 'user', dispositivos: 'database', equipamentos: 'database', mapa: 'grid', historico: 'clock', 'histórico': 'clock', alertas: 'alert', pausas: 'mute', relatorios: 'pie', 'relatórios': 'pie', clientes: 'users', regras: 'clipboard', acessos: 'users', base: 'book', atender: 'help', 'árvore': 'grid', arvore: 'grid', lacunas: 'help', mais: 'list', config: 'clipboard', 'configurações': 'clipboard' }; const icone = (n, sz) => ICONES[n] ? `` : ''; let padraoLigado = false; function padraoBackup(opts) { if (padraoLigado) return; padraoLigado = true; opts = opts || {}; const st = document.createElement('style'); st.id = 'dx4-padrao'; st.textContent = ` .bi svg,.modes button svg{vertical-align:-2px;margin-right:5px} .bi-green{border-color:var(--green)!important;color:var(--green)!important}.bi-red{border-color:var(--red)!important;color:var(--red)!important} .bi-blue{border-color:#2F6FE4!important;color:#2F6FE4!important}.bi-indigo{border-color:#5C6BC0!important;color:#5C6BC0!important} .bi-purple{border-color:var(--purple,#7C4DBF)!important;color:var(--purple,#7C4DBF)!important}.bi-teal{border-color:var(--teal)!important;color:var(--teal)!important} .bi-amber{border-color:var(--amber)!important;color:var(--amber)!important}.bi-slate{border-color:#78909C!important;color:#78909C!important}.bi-grey{color:var(--muted)!important} :root[data-theme="dark"] .bi-blue{color:#6EA8F2!important;border-color:#6EA8F2!important}:root[data-theme="dark"] .bi-indigo{color:#8C9EFF!important;border-color:#8C9EFF!important} .pri.bi,.btn.pri.bi{background:var(--ink)!important;color:var(--paper)!important;border-color:var(--ink)!important} .btn.teal.bi{background:#0E7C86!important;color:#fff!important;border-color:#0E7C86!important} .secl{background:color-mix(in srgb,var(--sc,var(--teal)) 9%,var(--card))!important;border:1px solid color-mix(in srgb,var(--sc,var(--teal)) 28%,var(--line))!important;border-left:6px solid var(--sc,var(--teal))!important;border-radius:12px;padding:10px 14px!important;margin:22px 0 12px!important;color:var(--sc,var(--teal))!important;font-family:var(--font-h,inherit);font-weight:700;letter-spacing:.02em} .secl small{display:block;font-weight:500;letter-spacing:0;text-transform:none;font-size:11.5px;color:var(--muted)!important;margin-top:1px} header.hdr h1{font-size:34px!important;font-weight:800!important;letter-spacing:-.02em;line-height:1} .secl{text-transform:uppercase;font-size:15px}.secl small{text-transform:none} .btn{font-size:13px;font-weight:500}.btn.pri,.btn.teal,.bi.pri{font-weight:600} @media(max-width:640px){header.hdr h1{font-size:22px!important}} ${(opts.ocultar || []).join(',')}${(opts.ocultar || []).length ? '{display:none!important}' : ''}`; document.head.appendChild(st); const pula = b => b.querySelector('svg') || b.dataset.dx4ic || b.closest('#dx4-pm,.dx4-pm,.dx4ui-dlg,.chips,.ct,.kpi') || /\b(ct|chip|tag|x|atl|lnk|dg)\b/.test(b.className || '') || b.id === 'sheet-x'; function aplicar(raiz) { (raiz || document).querySelectorAll('.modes button, nav.hdr-nav button').forEach(b => { if (b.querySelector('svg') || b.dataset.dx4ic) return; const t = (b.textContent || '').trim().toLowerCase().replace(/\d+$/, '').trim(); const n = ABA_ICONE[b.dataset.tab] || ABA_ICONE[t]; b.dataset.dx4ic = '1'; if (n) b.insertAdjacentHTML('afterbegin', icone(n, 14)); }); (raiz || document).querySelectorAll('button.btn, a.btn, .acts button, button[data-act], button[data-a]').forEach(b => { if (pula(b) || b.closest('.modes,nav.hdr-nav')) return; b.dataset.dx4ic = '1'; const t = (b.textContent || '').trim(); if (!t || (/^[^\p{L}+]/u.test(t))) return; for (const [re, n, cor] of BTN_ICONE) if (re.test(t)) { if (n !== 'bolt' || cor !== 'grey') { if (n === 'plus') { const tn = [...b.childNodes].find(x => x.nodeType === 3 && x.textContent.trim()); if (tn) tn.textContent = tn.textContent.replace(/^\s*\+\s*/, ''); } b.insertAdjacentHTML('afterbegin', icone(n, 14)); } b.classList.add('bi', 'bi-' + cor); break; } }); } aplicar(); const obs = new MutationObserver(ms => { obs.disconnect(); try { ms.forEach(m => m.addedNodes.forEach(n => { if (n.nodeType === 1) aplicar(n.parentElement || n); })); } finally { obs.observe(document.body, { childList: true, subtree: true }); } }); obs.observe(document.body, { childList: true, subtree: true }); } function grafBarras(L, titulo, sub) { const max = Math.max(1, ...L.map(x => x.val)); return `

${esc(titulo)}${sub ? `${esc(sub)}` : ''}

${L.length ? L.map(x => `

${esc(x.rot)}${x.val}

`).join('') : '

Nada para mostrar.

`; } function grafColunas(L, titulo, sub, legenda) { const max = Math.max(1, ...L.map(x => x.partes.reduce((s, p) => s + p.val, 0))); return `

${esc(titulo)}${sub ? `${esc(sub)}` : ''}${legenda ? `${legenda.map(([n, c]) => `${esc(n)}`).join(' ')}` : ''}

${L.map(x => { const tot = x.partes.reduce((s, p) => s + p.val, 0); return `

${tot || ''}

${x.partes.map(p => p.val ? `` : '').join('')}

${esc(x.rot)}

`; }).join('')}

`; } // ---- personagens em pixel art (perfil do analista DX4) ---- const PELE = { muitoEscura: '#4B2E1E', escura: '#7A4A2A', parda: '#A8693F', morenaClara: '#D49A6A', branca: '#F2CDAA' }; const CAB = { preto: '#161616', castanhoEscuro: '#3A2314', castanho: '#5A3418', castanhoClaro: '#8A5A2B', loiro: '#E3BE52', loiroEscuro: '#B98A2E' }; const ROUPA = { teal: ['#0E7C86', '#CDEBEE'], roxo: ['#5B3E99', '#E3DAF5'], ambar: ['#C9822A', '#F6E3C5'], azul: ['#1F6FD1', '#D6E5F8'], vermelho: ['#C0392B', '#F6D6D2'], verde: ['#11804E', '#D3EEDD'], cinza: ['#5C6B70', '#E2E7E8'] }; const AV = [ ['p01', 'Black power, pele bem escura', 'muitoEscura', 'preto', 'afro', 'm', 'teal', ''], ['p02', 'Careca de barba, gordinho', 'escura', 'preto', 'careca', 'g', 'roxo', 'barba'], ['p03', 'Cabelo curto preto', 'parda', 'preto', 'curto', 'm', 'ambar', ''], ['p04', 'Pouco cabelo, gordinho', 'morenaClara', 'castanho', 'pouco', 'g', 'azul', ''], ['p05', 'Cabelo comprido loiro', 'branca', 'loiro', 'longo', 'm', 'vermelho', ''], ['p06', 'Loiro de barba, gordinho', 'branca', 'loiro', 'curto', 'g', 'verde', 'barba'], ['p07', 'Careca de bigode', 'muitoEscura', 'preto', 'careca', 'm', 'cinza', 'bigode'], ['p08', 'Cabelo cacheado preto', 'escura', 'preto', 'cacheado', 'm', 'teal', ''], ['p09', 'Topete, gordinho', 'parda', 'preto', 'topete', 'g', 'vermelho', ''], ['p10', 'Franja castanha', 'morenaClara', 'castanho', 'franja', 'm', 'roxo', ''], ['p11', 'Barba cheia, gordinho', 'muitoEscura', 'preto', 'curto', 'g', 'ambar', 'barba'], ['p12', 'Pouco cabelo loiro', 'branca', 'loiroEscuro', 'pouco', 'm', 'azul', ''], ['p13', 'Cabelo comprido preto', 'parda', 'preto', 'longo', 'm', 'verde', ''], ['p14', 'Coque castanho, gordinha', 'morenaClara', 'castanho', 'coque', 'g', 'teal', ''], ['p15', 'Rabo de cavalo preto', 'escura', 'preto', 'rabo', 'm', 'vermelho', ''], ['p16', 'Careca de barba castanha, gordinho', 'branca', 'castanho', 'careca', 'g', 'cinza', 'barba'], ['p17', 'Topete loiro', 'morenaClara', 'loiro', 'topete', 'm', 'ambar', ''], ['p18', 'Black power, gordinho', 'escura', 'castanhoEscuro', 'afro', 'g', 'azul', ''], ['p19', 'Cabelo curto de bigode', 'branca', 'castanho', 'curto', 'm', 'roxo', 'bigode'], ['p20', 'Cabelo comprido castanho, gordinha', 'parda', 'castanho', 'longo', 'g', 'verde', ''], ['p21', 'Coque preto', 'muitoEscura', 'preto', 'coque', 'm', 'ambar', ''], ['p22', 'Pouco cabelo e barba', 'parda', 'preto', 'pouco', 'm', 'teal', 'barba'], ['p23', 'Franja loira, gordinha', 'branca', 'loiro', 'franja', 'g', 'vermelho', ''], ['p24', 'Cacheado castanho claro', 'morenaClara', 'castanhoClaro', 'cacheado', 'm', 'azul', ''], ['p25', 'Topete de bigode, gordinho', 'escura', 'preto', 'topete', 'g', 'roxo', 'bigode'] ]; const AVATARES = [{ id: 'fantasma', nome: 'Fantasminha DX4 (padrão)' }].concat(AV.map(a => ({ id: a[0], nome: a[1] }))); const escurece = (h, f) => { const n = parseInt(h.slice(1), 16); const c = s => Math.max(0, Math.min(255, Math.round(((n >> s) & 255) * f))); return '#' + [16, 8, 0].map(s => c(s).toString(16).padStart(2, '0')).join(''); }; function pixels(id) { const P = {}; const px = (x, y, c) => { if (x >= 0 && x < 16 && y >= 0 && y < 16) P[x + ',' + y] = c; }; const ret = (x0, y0, x1, y1, c) => { for (let y = y0; y <= y1; y++) for (let x = x0; x <= x1; x++) px(x, y, c); }; if (id === 'fantasma' || !AV.find(a => a[0] === id)) { // fantasminha com as barras verdes do logo DX4 na barriga const B = '#FFFFFF'; ret(6, 2, 9, 2, B); ret(4, 3, 11, 3, B); ret(3, 4, 12, 13, B); [3, 4, 7, 8, 11, 12].forEach(x => px(x, 14, B)); ret(5, 5, 6, 6, '#14232A'); ret(9, 5, 10, 6, '#14232A'); px(5, 5, '#5D6B70'); px(9, 5, '#5D6B70'); px(4, 7, '#F6B5C0'); px(11, 7, '#F6B5C0'); ret(6, 9, 9, 9, '#8DC63F'); ret(6, 11, 9, 11, '#4CAF50'); ret(6, 13, 9, 13, '#2E8B3E'); return { P, fundo: '#0E7C86' }; } const [, , pele, cab, est, corpo, roupa, rosto] = AV.find(a => a[0] === id); const S = PELE[pele], Ss = escurece(S, 0.82), H = CAB[cab], [R, fundo] = ROUPA[roupa]; const g = corpo === 'g'; const x0 = g ? 3 : 4, x1 = g ? 12 : 11, yb = g ? 11 : 10; if (est === 'afro') { ret(x0 - 2, 1, x1 + 2, 7, H); ret(x0, 0, x1, 0, H); delete P[(x0 - 2) + ',1']; delete P[(x1 + 2) + ',1']; ret(x0 - 1, 8, x0 - 1, 8, H); ret(x1 + 1, 8, x1 + 1, 8, H); } if (est === 'longo') { ret(x0 - 1, 3, x0, 13, H); ret(x1, 3, x1 + 1, 13, H); } if (est === 'rabo') { ret(x1 + 1, 4, x1 + 2, 10, H); } if (g) { ret(x0 - 1 + 0, 12, x1 + 1, 15, R); ret(1, 13, 14, 15, R); } else { ret(x0 - 1, 13, x1 + 1, 15, R); ret(x0 + 1, 12, x1 - 1, 12, R); } ret(6, yb + 1, 9, yb + 1, Ss); px(7, yb + 2, Ss); px(8, yb + 2, Ss); ret(x0, 3, x1, yb, S); [[x0, 3], [x1, 3], [x0, yb], [x1, yb]].forEach(([a, b]) => delete P[a + ',' + b]); if (g) { ret(x0 + 1, yb + 1, x1 - 1, yb + 1, S); ret(x0 + 2, yb + 1, x1 - 2, yb + 1, Ss); } px(x0 - 1, 6, Ss); px(x0 - 1, 7, Ss); px(x1 + 1, 6, Ss); px(x1 + 1, 7, Ss); px(5, 6, '#FFFFFF'); px(6, 6, '#1B1B1B'); px(10, 6, '#FFFFFF'); px(9, 6, '#1B1B1B'); ret(5, 5, 6, 5, cab.startsWith('loiro') ? Ss : H); ret(9, 5, 10, 5, cab.startsWith('loiro') ? Ss : H); if (rosto === 'barba') { ret(x0, 8, x0, yb, H); ret(x1, 8, x1, yb, H); ret(x0 + 1, 9, x1 - 1, yb, H); px(x0 + 1, yb, S); px(x1 - 1, yb, S); } if (rosto === 'bigode') ret(6, 8, 9, 8, H); const yb0 = rosto === 'bigode' ? 9 : 8; ret(7, yb0, 8, yb0, rosto === 'barba' ? '#E9A28F' : '#8A3B2E'); if (!rosto) { px(6, 8, escurece(S, 0.9)); px(9, 8, escurece(S, 0.9)); } px(7, 7, Ss); const topo = () => { ret(x0 + 1, 2, x1 - 1, 2, H); ret(x0, 3, x1, 3, H); px(x0, 4, H); px(x1, 4, H); }; if (est === 'careca') px(x0 + 2, 4, escurece(S, 1.18)); if (est === 'pouco') { ret(x0, 4, x0, 6, H); ret(x1, 4, x1, 6, H); px(x0 + 1, 4, H); px(x1 - 1, 4, H); px(x0 + 3, 4, escurece(S, 1.15)); } if (est === 'curto' || est === 'rabo' || est === 'coque') topo(); if (est === 'coque') ret(6, 0, 9, 1, H); if (est === 'topete') { topo(); ret(x0 + 2, 1, x1 - 1, 1, H); px(x1 - 2, 0, H); px(x1, 2, H); } if (est === 'franja') { topo(); ret(x0, 4, x1 - 3, 4, H); px(x0, 5, H); } if (est === 'longo') { topo(); ret(x0, 4, x0 + 1, 4, H); ret(x1 - 1, 4, x1, 4, H); } if (est === 'cacheado') { ret(x0, 1, x1, 3, H); ret(x0 - 1, 2, x1 + 1, 4, H); [x0 + 1, x0 + 4, x1 - 2].forEach(x => px(x, 0, H)); [5, 7].forEach(y => { px(x0 - 1, y, H); px(x1 + 1, y, H); }); px(x0, 4, H); px(x1, 4, H); px(x0 + 2, 2, escurece(H, 1.6)); px(x1 - 3, 3, escurece(H, 1.6)); } if (est === 'afro') { ret(x0, 3, x1, 3, H); px(x0, 4, H); px(x1, 4, H); } return { P, fundo }; } function avatar(id, tam) { const { P, fundo } = pixels(id || 'fantasma'); const linhas = {}; Object.entries(P).forEach(([k, c]) => { const [x, y] = k.split(',').map(Number); (linhas[y] = linhas[y] || []).push([x, c]); }); let r = ''; Object.keys(linhas).forEach(y => { const L = linhas[y].sort((a, b) => a[0] - b[0]); let i = 0; while (i < L.length) { let j = i; while (j + 1 < L.length && L[j + 1][0] === L[j][0] + 1 && L[j + 1][1] === L[i][1]) j++; r += ``; i = j + 1; } }); const n = (AVATARES.find(a => a.id === (id || 'fantasma')) || AVATARES[0]).nome; return ``; } // ---- "Meu perfil": o analista escolhe o próprio personagem (só analistas DX4) ---- function avatarAtual(x) { x = x || sessaoAtual(); let a = sessaoServ && x && sessaoServ.email === x.email && sessaoServ.avatar ? sessaoServ.avatar : (x && x.avatar); if (!a) { try { a = localStorage.getItem('dx4:avatar:' + ((x && x.email) || '')); } catch (e) {} } return AVATARES.find(v => v.id === a) ? a : 'fantasma'; } async function salvarAvatar(id) { const x = sessaoAtual(); let ok = false; try { const r = await fetch('/api/eu/avatar', { method: 'PUT', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ avatar: id }) }); ok = r.ok; } catch (e) {} try { localStorage.setItem('dx4:avatar:' + ((x && x.email) || ''), id); const s = JSON.parse(localStorage.getItem('dx4:sessao') || 'null'); if (s) { s.avatar = id; localStorage.setItem('dx4:sessao', JSON.stringify(s)); } } catch (e) {} if (sessaoServ) sessaoServ.avatar = id; if (window.DX4_NUCLEO && window.DX4_NUCLEO._sessao) window.DX4_NUCLEO._sessao.avatar = id; document.querySelectorAll('.dx4-av[data-meu]').forEach(b => { b.innerHTML = avatar(id, 34); }); return ok; } function escolherAvatar(aoSalvar) { cssAvatar(); const x = sessaoAtual(); if (!x || x.perfil !== 'op') return; const atual = avatarAtual(x); const ov = document.createElement('div'); ov.className = 'dx4-avov'; ov.innerHTML = ``; document.body.appendChild(ov); const fecha = () => ov.remove(); ov.addEventListener('click', e => { if (e.target === ov || e.target.closest('.dx4-avfe')) fecha(); }); ov.querySelectorAll('[data-av]').forEach(b => b.onclick = async () => { const id = b.dataset.av; ov.querySelectorAll('[data-av]').forEach(z => z.classList.toggle('on', z === b)); ov.querySelector('.dx4-avtop svg').outerHTML = avatar(id, 56); const ok = await salvarAvatar(id); toast(ok ? 'Personagem salvo.' : 'Personagem salvo neste aparelho.'); if (aoSalvar) aoSalvar(id); setTimeout(fecha, 350); }); } function cssAvatar() { if (document.getElementById('dx4-avcss')) return; const st = document.createElement('style'); st.id = 'dx4-avcss'; st.textContent = ".dx4-av{border:0;background:none;padding:0;width:36px;height:36px;border-radius:9px;cursor:pointer;flex:0 0 auto;line-height:0}.dx4-av svg{border-radius:8px}.dx4-av:hover{outline:2px solid var(--teal);outline-offset:1px}.dx4-avov{position:fixed;inset:0;z-index:99990;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:14px}.dx4-avbx{background:var(--card,#fff);color:var(--ink,#14232A);border-radius:14px;padding:16px;width:min(560px,96vw);max-height:90vh;overflow:auto}.dx4-avtop{display:flex;gap:12px;align-items:center;margin-bottom:12px}.dx4-avtop b{display:block;font-size:16px}.dx4-avtop span{font-size:13px;color:var(--muted,#55666C)}.dx4-avgr{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}.dx4-avgr button{border:2px solid transparent;background:none;border-radius:11px;padding:2px;cursor:pointer;line-height:0}.dx4-avgr button svg{width:100%;height:auto}.dx4-avgr button.on{border-color:var(--teal,#0E7C86)}.dx4-avgr button:hover{border-color:var(--line2,#9FB0B4)}.dx4-avac{display:flex;justify-content:flex-end;margin-top:12px}.dx4-avac button{border:1px solid var(--line,#DCE3E4);background:var(--card,#fff);color:inherit;border-radius:9px;padding:8px 14px;cursor:pointer;font:inherit}"; document.head.appendChild(st); } function botaoAvatar() { cssAvatar(); const x = sessaoAtual(); if (!x || x.perfil !== 'op') return null; const b = document.createElement('button'); b.type = 'button'; b.className = 'dx4-av'; b.dataset.meu = '1'; b.title = 'Meu perfil: escolha o seu personagem'; b.innerHTML = avatar(avatarAtual(x), 34); b.onclick = () => escolherAvatar(); return b; } window.DX4_UI = { versao: '1.22', sessao: sessaoAtual, cssAvatar, grafBarras, grafColunas, tokens: T, tema, toast, confirma, pede, dicaToque, semTitle, esc, menuPaineis, padraoBackup, icone, avatar, AVATARES, escolherAvatar, avatarAtual }; // liga sozinho o que não tem efeito colateral // ---- cabeçalho igual nos painéis: [Painéis DX4 azul] [nome] [Sair vermelho], à direita ---- // ---- cabeçalho igual em todos: [Você está operando como: Nome · Cargo] [Painéis DX4] [Sair], no fim da linha de cima ---- let sessaoServ = null, buscandoSessao = false; const noServidor = () => /\/(noc|backup|servicedesk|base)\//.test(location.pathname) || (window.DX4_NUCLEO && window.DX4_NUCLEO.origem === 'servidor'); async function buscaSessao() { if (buscandoSessao) return; buscandoSessao = true; try { const r = await fetch('/api/sessao', { credentials: 'same-origin' }); if (r.ok) { const j = await r.json(); sessaoServ = j.sessao || j; try { localStorage.setItem('dx4:sessao', JSON.stringify(sessaoServ)); } catch (e) {} document.querySelectorAll('.dx4-av[data-meu]').forEach(b => { b.innerHTML = avatar(avatarAtual(), 34); }); } } catch (e) {} buscandoSessao = false; } function sessaoAtual() { let x = null; try { x = JSON.parse(localStorage.getItem('dx4:sessao') || 'null'); } catch (e) {} if (x && x.ate && x.ate < Date.now()) x = null; const N = window.DX4_NUCLEO; if (!x && sessaoServ) x = sessaoServ; if (!x && N && N._sessao && !(N._sessao.ate < Date.now())) x = N._sessao; if (!x && window.SELF_HOSTED && window.SELF_HOSTED.me && window.SELF_HOSTED.me.email) x = Object.assign({ perfil: 'op' }, window.SELF_HOSTED.me); return x; } const cargoDe = x => !x ? '' : x.perfil === 'cli' ? 'Cliente' + (x.cliente && x.cliente.nome ? ' · ' + x.cliente.nome : '') : x.nivel === 'G' ? 'Gestor' : 'Analista'; function organizaCabecalho() { const ht = $('.hdr-top'); const pm = $('#dx4-pm'); if (!ht || !pm) return; let dir = $('.dx4-dir'); if (!dir) { dir = document.createElement('div'); dir.className = 'dx4-dir'; ht.appendChild(dir); } let op = $('#dx4-op'); if (!op) { op = document.createElement('span'); op.id = 'dx4-op'; op.title = 'Quem está usando este painel agora. Tudo que for feito fica registrado com este nome.'; } const x = sessaoAtual(); if (x) op.innerHTML = `Você está operando como: ${esc(x.nome || x.email)} · ${esc(cargoDe(x))}`; const sair = $('#btnsair') || $('#kbsair'); if (op.parentElement !== dir) dir.insertBefore(op, dir.firstChild); if (pm.parentElement !== dir || pm.previousElementSibling !== op) dir.insertBefore(pm, op.nextSibling); if (sair && (sair.parentElement !== dir || sair.previousElementSibling !== pm)) { sair.classList.add('dx4-sair'); dir.insertBefore(sair, pm.nextSibling); } const avx = dir.querySelector('.dx4-av[data-meu]'); if (!avx) { const av = botaoAvatar(); if (av) dir.appendChild(av); } else if (avx !== dir.lastElementChild) dir.appendChild(avx); document.body.classList.add('dx4-cab'); } // ---- situação dos outros painéis, no fim da barra de ferramentas (só no servidor) ---- async function statusPaineis() { const N = window.DX4_NUCLEO; if (!N || N.origem !== 'servidor') return; const x = sessaoAtual(); if (!x || x.perfil !== 'op') return; const barra = $('.sdtools') || $('.noctools') || $('.kbtools') || $('header .tools'); if (!barra) return; let el = $('#dx4-st'); if (!el) { el = document.createElement('div'); el.id = 'dx4-st'; barra.appendChild(el); } try { const [rr, rn] = await Promise.all([fetch('/api/resumo', { credentials: 'same-origin' }), fetch('/api/store/noc/estado/atual', { credentials: 'same-origin' }).catch(() => null)]); const R = rr.ok ? await rr.json() : null; const NE = rn && rn.ok ? (await rn.json()).data : null; const p1 = R ? R.chamados.filter(c => c.prioridade === 'P1').length : 0, bf = R ? (R.backups.contagens ? R.backups.contagens.falha : R.backups.falhando.length) : 0; let fora = NE ? ((NE.contagens || {}).fora || 0) : null; try { if (/NOC/i.test(document.title) && typeof window.problemas === 'function') fora = window.problemas().filter(x => x.st === 'down' || x.st === 'ack').length; } catch (e) {} const ir = (m, r) => (N.ir ? N.ir(m, r) : '#'); el.innerHTML = `${icone('antenna', 14)}NOC ${fora == null ? '–' : fora}${icone('alert', 14)}P1 ${p1}${icone('database', 14)}Backup ${bf}`; } catch (e) {} } // ---- minimizar em todo bloco (como no Backup) ---- const PAINEL = (document.title.match(/NOC|ServiceDesk|Backup|Conhecimento/i) || ['x'])[0].toLowerCase(); const chaveMin = t => 'dx4:min:' + PAINEL + ':' + String(t || '').toLowerCase().replace(/\s+/g, ' ').trim().slice(0, 40); const tituloSec = el => { const c = el.cloneNode(true); c.querySelectorAll('small,.act,button').forEach(x => x.remove()); return (c.textContent || '').trim(); }; function aplicaMin(el) { const t = tituloSec(el); if (!t) return; let fechado = false; try { fechado = localStorage.getItem(chaveMin(t)) === '1'; } catch (e) {} let n = el.nextElementSibling; while (n && !n.classList.contains('secl')) { n.style.display = fechado ? 'none' : ''; n = n.nextElementSibling; } const b = el.querySelector('.dx4-min'); if (b) { b.textContent = fechado ? '+ Mostrar' : '− Minimizar'; b.title = fechado ? 'Mostra este bloco de novo' : 'Recolhe este bloco; o painel lembra neste aparelho'; } } const COR_SEC = [[/agora|fora do ar|falha|estour|escalon|erro/i, 'var(--red)'], [/aguardando|aten[çc][ãa]o|sem dono|pend|lacuna|vence/i, 'var(--amber)'], [/minha fila|desde|pesquis|j[áa] sei/i, 'var(--teal)'], [/outros analistas|com outros|tend[êe]ncia|ponto|árvore|arvore/i, 'var(--purple,#9575CD)'], [/auditoria|hist[óo]rico|pausa/i, '#78909C'], [/resolvid|ok agora|sucesso/i, 'var(--green)'], [/fila/i, 'var(--orange,#E08A55)'], [/n[ãa]o sei/i, 'var(--info,#1F6FD1)']]; function prepCaixas(raiz) { (raiz || document).querySelectorAll('.purplebox > h2, .alarm > h2, section.wd > header').forEach(h => { const box = h.parentElement; if (!box || /Backup/i.test(document.title)) return; const hh = h.querySelector('h3,h2') || h; const t = (hh.textContent || '').replace(/[−+] (Minimizar|Mostrar)/, '').split('·')[0].trim(); if (!t) return; const k = chaveMin('caixa:' + t); if (!h.querySelector('.dx4-min')) { const b = document.createElement('button'); b.type = 'button'; b.className = 'dx4-min'; b.dataset.dx4ic = '1'; b.dataset.cx = k; h.style.display = 'flex'; h.style.alignItems = 'center'; h.style.gap = '10px'; h.style.flexWrap = 'wrap'; h.appendChild(b); } let f = false; try { f = localStorage.getItem(k) === '1'; } catch (e) {} [...box.children].forEach(c => { if (c !== h) c.style.display = f ? 'none' : ''; }); const b = h.querySelector('.dx4-min'); b.textContent = f ? '+ Mostrar' : '− Minimizar'; b.title = f ? 'Mostra este bloco de novo' : 'Recolhe este bloco; o painel lembra neste aparelho'; }); } const EMOJI = [['🔒', 'lock'], ['🙋', 'user'], ['👀', 'eye'], ['🔍', 'search'], ['🗑', 'trash'], ['🟢', 'ok'], ['🔴', 'erro']]; function trocaEmojis(raiz) { (raiz || document).querySelectorAll('button, a.btn, .tag, .micon, summary, .bt').forEach(el => { if (el.dataset.dx4em) return; const tn = [...el.childNodes].find(x => x.nodeType === 3 && x.textContent.trim()); if (!tn) return; const t = tn.textContent.replace(/^\s+/, ''); const m = EMOJI.find(([e]) => t.startsWith(e)); if (!m) return; el.dataset.dx4em = '1'; tn.textContent = t.slice(m[0].length).replace(/^\uFE0F?\s*/, ''); const ic = m[1] === 'ok' || m[1] === 'erro' ? `` : icone(m[1], 14); el.insertAdjacentHTML('afterbegin', ic); }); } function prepSecoes(raiz) { prepCaixas(raiz); trocaEmojis(raiz); (raiz || document).querySelectorAll('.secl').forEach(el => { if (/Backup/i.test(document.title)) return; const t = tituloSec(el); if (!t) return; if (!el.style.getPropertyValue('--sc')) { const c = COR_SEC.find(([re]) => re.test(t)); if (c) el.style.setProperty('--sc', c[1]); } if (!el.querySelector('.dx4-min')) { const b = document.createElement('button'); b.type = 'button'; b.className = 'dx4-min'; b.dataset.dx4ic = '1'; el.appendChild(b); } aplicaMin(el); }); } document.addEventListener('click', e => { const b = e.target.closest('.dx4-min'); if (!b) return; e.preventDefault(); e.stopPropagation(); if (b.dataset.cx) { try { localStorage.setItem(b.dataset.cx, localStorage.getItem(b.dataset.cx) === '1' ? '0' : '1'); } catch (x) {} prepCaixas(); return; } const el = b.closest('.secl'); const k = chaveMin(tituloSec(el)); try { localStorage.setItem(k, localStorage.getItem(k) === '1' ? '0' : '1'); } catch (x) {} aplicaMin(el); }, true); const COR_ABA = { inicio: 'var(--teal)', 'início': 'var(--teal)', chamados: 'var(--red)', fila: 'var(--orange,#E08A55)', 'minha fila': 'var(--orange,#E08A55)', dispositivos: 'var(--teal)', equipamentos: 'var(--teal)', mapa: '#1E9E62', historico: 'var(--purple,#9575CD)', 'histórico': 'var(--purple,#9575CD)', alertas: 'var(--red)', pausas: '#78909C', relatorios: 'var(--teal)', 'relatórios': 'var(--teal)', clientes: '#1E9E62', regras: 'var(--teal)', acessos: 'var(--teal)', base: 'var(--teal)', atender: 'var(--red)', 'atender erro': 'var(--red)', 'árvore': '#1E9E62', arvore: '#1E9E62', lacunas: 'var(--amber)', mais: '#78909C' }; function corAbas() { document.querySelectorAll('.modes button').forEach(b => { const t = (b.textContent || '').trim().toLowerCase().replace(/\s*\d+$/, ''); const c = COR_ABA[b.dataset.tab] || COR_ABA[t]; const sv = b.querySelector('svg'); if (c && sv && !b.classList.contains('on')) sv.style.color = c; else if (sv) sv.style.color = ''; }); } function estiloComum() { if ($('#dx4-comum')) return; const st = document.createElement('style'); st.id = 'dx4-comum'; st.textContent = `.dx4-dir{display:flex;align-items:center;gap:10px;margin-left:auto;flex:0 0 auto}#dx4-op{font-size:13px;color:var(--muted);white-space:nowrap}@media(min-width:900px){.hdr-top{flex-wrap:nowrap}.hdr-top .brand{min-width:0;flex:0 1 auto}} @media(max-width:1500px){#parceiro .parctxt{display:none}}@media(max-width:1250px){#parceiro{display:none!important}}#dx4-op b{color:var(--ink)} .dx4-cab #who,.dx4-cab .hdr-who,.dx4-cab #quem,.dx4-cab #opchip,.dx4-cab #kbop,.dx4-cab #opind{display:none!important} #dx4-st{margin-left:auto;display:flex;gap:6px;flex-wrap:nowrap}.dx4-sc{display:inline-flex;align-items:center;gap:5px;height:34px;box-sizing:border-box;padding:0 10px;border:1px solid var(--line2);border-radius:8px;background:var(--card);color:var(--muted);text-decoration:none;font-size:13px;font-weight:600;white-space:nowrap}.dx4-sc b{color:var(--ink);font-size:14px}.dx4-sc.ok{color:var(--green);border-color:color-mix(in srgb,var(--green) 45%,var(--line2))}.dx4-sc.ok b{color:var(--green)}.dx4-sc:hover{filter:brightness(1.15)}.dx4-sc.mau{border-color:var(--red);color:var(--red)}.dx4-sc.mau b{color:var(--red)}.dx4-sc.aviso{border-color:var(--amber);color:var(--amber)}.dx4-sc.aviso b{color:var(--amber)} .dx4-sair,#btnsair:not([hidden]),#kbsair{background:#C0392B!important;color:#fff!important;border:1px solid #C0392B!important;font-weight:700!important;height:34px} .dx4-sair svg,#btnsair svg{color:#fff!important}.dx4-sair,.dx4-dir #btnsair{display:inline-flex!important;align-items:center;gap:6px;white-space:nowrap;padding:0 12px!important;border-radius:8px}.dx4-dir #btnsair[hidden]{display:none!important}.dx4-dir .dx4-pm>summary{height:34px;box-sizing:border-box} .dx4-bk{order:99}.hubbtn{display:none!important}.tools .dxp{display:none!important} .modes button.on{background:#0E7C86!important;color:#fff!important}.modes button.on svg{color:#fff!important} [data-theme="light"]{--amber:#A0620F;--green:#11804E;--purple:#6A4BA8}@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--amber:#A0620F;--green:#11804E;--purple:#6A4BA8}} [data-theme="dark"]{--purple:#A88BE0}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--purple:#A88BE0}} /* contraste garantido (texto branco em fundo de cor, qualquer tema) */ .btn.teal,.btn.teal.bi,#nocchk .mn,.flx li.on .fn,.aprh .bt,.mapabtn,.cfgminbt,.ponte{background:#0E7C86!important;border-color:#0E7C86!important;color:#fff!important} .modes button .n,.pill.down,.prio.p1{background:#C0392B!important;color:#fff!important}.prio.p2{background:#B4501A!important;color:#fff!important}.prio.p3{background:#5C6B70!important;color:#fff!important}[data-mcsv],[data-oppcsv]{color:var(--ink)!important}.modes .mais>summary.on,.maisl button.on{background:#0E7C86!important;color:#fff!important}.seg3 button.on[data-ckv="sim"]{background:#11804E!important}.seg3 button.on[data-ckv="nao"]{background:#C0392B!important}.seg3 button.on[data-ckv="na"]{background:#5C6B70!important} .sdq kbd{white-space:nowrap}.sdtools,.noctools,.kbtools{justify-content:flex-start!important} @media(min-width:1000px){.sdtools .sdq,.noctools .sdq,.kbtools .sdq{flex:0 1 240px}.sdtools select.atalho,.noctools select.atalho,.kbtools select.atalho{max-width:155px}} .tools #tema{display:none!important} @media(max-width:640px){#btnnovo,#kbnova{flex:1 1 100%}} .dx4-min{margin-left:auto;background:#0E7C86;border:1px solid #0E7C86;color:#fff;border-radius:999px;font-weight:700;font-size:11.5px;padding:3px 10px;cursor:pointer;white-space:nowrap;text-transform:none;letter-spacing:0;font-family:var(--font-b,inherit)}.dx4-min:hover{background:#0B6870} .secl{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.secl>.act{margin-left:auto}.secl>.act+.dx4-min{margin-left:6px} #gm-ok,#gm-ok.bi{background:#0E7C86!important;color:#fff!important;border:1px solid #0E7C86!important}#gm-x,#gm-x.bi{background:transparent!important;color:var(--ink,#E6ECEA)!important;border:1px solid var(--line2,#3A4B53)!important} #gm-u,#gm-p{color:var(--ink,#E6ECEA)!important;background:var(--paper,#0F171B)!important} .dx4-grs{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:12px;margin:12px 0}.dx4-gr{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px} .dx4-gr-t{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}.dx4-gr-t b{font:800 16px var(--font-h,inherit)}.dx4-gr-t span{color:var(--muted);font-size:12.5px}.dx4-gr-t .lg{margin-left:auto}.dx4-gr-t .lg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin:0 4px 0 10px;vertical-align:-1px} .dx4-hb{display:grid;grid-template-columns:140px 1fr 40px;gap:8px;align-items:center;margin:5px 0;font-size:13.5px}.dx4-hb .r{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dx4-hb .b{height:14px;background:var(--faint,#1E2B32);border-radius:7px;overflow:hidden}.dx4-hb .b i{display:block;height:100%;border-radius:7px}.dx4-hb>b{text-align:right;font-size:15px} .dx4-cols{display:flex;align-items:flex-end;gap:4px;height:150px}.dx4-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;height:100%;min-width:0}.dx4-col .st{flex:1;width:100%;display:flex;flex-direction:column-reverse;background:var(--faint,#1E2B32);border-radius:5px;overflow:hidden}.dx4-col .st i{display:block;width:100%}.dx4-col>b{font-size:11.5px;color:var(--muted);min-height:14px}.dx4-col>span{font-size:11px;color:var(--muted);white-space:nowrap}.dx4-gr-v{color:var(--green);font-weight:600} @media(max-width:899px){.hdr-top{flex-wrap:wrap!important;row-gap:8px}.dx4-dir{flex-basis:100%;flex-wrap:wrap;justify-content:flex-start;margin-left:0}#dx4-op{flex-basis:100%;white-space:normal}#dx4-st{margin-left:0}}`; document.head.appendChild(st); } let tentativas = 0; async function tentarMenu() { if ($('#dx4-pm') || window.DX4_SEM_MENU) return; let s = sessaoAtual(); if (!s && noServidor()) { await buscaSessao(); s = sessaoAtual(); } if (s && (s.perfil === 'op' || s.perfil === 'cli')) { menuPaineis(); organizaCabecalho(); return; } if (++tentativas < 20) setTimeout(tentarMenu, 500); } const inicio = () => { dicaToque(); try { const s = JSON.parse(localStorage.getItem('dx4:sessao') || 'null'); if (s && s.tema && !localStorage.getItem('dx4:tema')) tema(s.tema); } catch (e) {} if (window.DX4_SEM_MENU) return; estiloComum(); tentarMenu(); if (!/Backup/i.test(document.title)) padraoBackup({ ocultar: ['body:has(#dx4-pm) #btnhub', 'body:has(#dx4-pm) #btnbase', 'body:has(#dx4-pm) #btn-portal'] }); prepSecoes(); corAbas(); setInterval(organizaCabecalho, 1500); setTimeout(statusPaineis, 2500); setInterval(statusPaineis, 60000); const obs = new MutationObserver(() => { obs.disconnect(); try { prepSecoes(); corAbas(); } finally { obs.observe(document.body, { childList: true, subtree: true }); } }); obs.observe(document.body, { childList: true, subtree: true }); }; if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', inicio); else inicio(); })();