/* base.css — os TOKENS e o reset que valem no painel inteiro.
 *
 * POR QUE ESTE ARQUIVO EXISTE (Nuno, 23-AGO-2026 03:17):
 *   "sobre o design, tenta deixar o mais proximo possivel do painel MCL.
 *    Atualmente o design do html funciona bem, mas eu quero tentar manter o
 *    maximo de unidade visual possivel em todo o painel"
 *
 * Ate' aqui a paleta vivia DENTRO de prototype/template.html, e so' o painel a
 * tinha. A landing (painel/home.html) precisava das mesmas cores, e copiar os
 * valores para ela resolveria hoje e divergiria no primeiro ajuste de cor --
 * que e' exatamente o oposto do que ele pediu. Entao o bloco saiu do template
 * e virou ARQUIVO, com UMA fonte para as duas telas.
 *
 * QUEM CONSOME, E COMO:
 *   painel/home.html      por tag <link> apontando para este arquivo
 *   painel/painel.html    EMBUTIDO na geracao (painel/build_painel.py troca o
 *                         <link> do template por um <style> com este conteudo)
 *   prototype/canais_aquisicao.html   idem, por prototype/build_html.py
 *
 * O painel gerado continua AUTOCONTIDO de proposito: ele e' publicado por
 * copia de arquivos (vps/ciclo.sh), e uma folha de estilo que nao fosse junto
 * deixaria o painel inteiro sem cor nenhuma sem quebrar nada mais -- falha
 * muda, a pior especie. A home aceita o <link> porque ela e' nova e a
 * degradacao dela nao derruba o trabalho de ninguem.
 *
 * NAO ACRESCENTAR AQUI regra que so' uma tela usa. Aqui entram token e reset;
 * layout de cada tela mora na tela. `analysis/verifica_home.js` afirma que a
 * home nao declara UMA cor propria -- toda cor dela e' var() de um token
 * definido AQUI.
 */
/* ─────────────────────────────────────────────────────────────
   Painel de instrumentação. Identificadores de máquina em mono,
   nomes humanos em proporcional — a textura separa código de nome.
   ───────────────────────────────────────────────────────────── */
:root{
  --bg:#EEF1F5; --surface:#FFFFFF; --surface-2:#F7F9FB;
  --line:#D7DEE7; --line-soft:#E6EBF1;
  --ink:#0E1620; --ink-2:#4A5766; --ink-3:#7C8899;
  --p1:#3D6B8A; --p2:#7D6A9C; --p3:#4F7D68;
  --erro:#C0362B; --erro-bg:#FBEBE9;
  --falta:#B87503; --falta-bg:#FDF3E2;
  /* Pedido dele em 22-AGO: "unclassified" deixa de ser cinza. Cinza le'-se
     como "neutro, nada a fazer", e o que nao esta' classificado E' trabalho
     pendente. Laranja CLARO (nao o `--falta`, escuro demais para uma listra
     de 3px ao lado de um titulo): chama sem gritar. */
  --sem-classe:#E9A356;
  --diverg:#2B6CB8; --diverg-bg:#EAF1FA;
  /* ambiguidade — a fonte tem o dado, mas nao se sabe se e' deste canal.
     Cor propria: a acao e' confirmar/descartar, nao investigar nem escolher. */
  --amb:#7A4FA3; --amb-bg:#F2ECF8;
  --ok:#2A8055; --ok-bg:#E8F4EE;
  /* ASSOCIADO (080) — o terceiro estado do semáforo: existe trabalho ABERTO
     amarrado a este canal/MUX/saída, mas ele não trava nada nem venceu.
     GRAFITE, e a escolha é o ponto: `--erro` e `--falta` já falam por
     "bloqueado" e "atrasado", e reaproveitar qualquer um deles faria um
     vínculo parecer alarme — que é exatamente o oposto do que este estado
     diz. Também não é `--ink-3`: aquele é cor de TEXTO secundário, e usá-lo
     como fundo de faixa amarraria duas coisas que mudam por motivos
     diferentes. Escuro o bastante para `#fff` por cima (~7:1), que é como
     `.sema-topo` pinta os outros dois.
     SEM PAR `--assoc-bg`, e de proposito: todos os outros estados vem em
     dupla cor+fundo-pastel, e um `--assoc-bg` aqui seria um convite a pintar
     o selo da lista PREENCHIDO -- que e exatamente o que ele recusou ao
     escolher contorno ("quero que seja diferente do resto"). Quem precisar de
     um fundo um dia acrescenta junto com o uso, nao antes dele. */
  --assoc:#55606E;
  /* FUNDO DA LINHA POR TEMPERATURA -- Task Tracker, pedido dele em
     23-AGO-2026 19:19: "o critical em vermelho, o hot em laranja e regular sem
     nada - ambas cores bem suaves, apenas para diferenciar os itens".

     TOKENS PROPRIOS, e nao `--erro-bg`/`--falta-bg`, por duas razoes medidas:
     (1) `Hot` e' 49 das 96 tarefas ativas -- 51%. Na intensidade dos tokens de
         severidade, metade da tabela ficaria tingida e a cor pararia de
         diferenciar. Ele escolheu, vendo o numero: "os dois, com Hot bem mais
         fraco". Isso e' calibragem, e calibragem exige valor proprio.
     (2) temperatura NAO e' severidade. `--erro-bg` quer dizer "o MCL se
         contradiz"; aqui quer dizer "esta tarefa queima". Amarrar as duas
         faria um ajuste na paleta de alertas mexer no tracker sem ninguem
         pedir.
     Os dois sao mais claros que os `-bg` de severidade de proposito, e ambos
     mais quentes que `--surface-2` (hover, cinza-azulado) e que `--diverg-bg`
     (selecionada, azul) -- os tres estados tem de continuar distinguiveis
     empilhados. */
  --temp-critical:#FDF1EF; --temp-hot:#FDFAF4;
  --font-ui:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-display:"Segoe UI Variable Display","Segoe UI Semibold","Segoe UI",system-ui,sans-serif;
  --font-mono:"Cascadia Mono","Cascadia Code",Consolas,ui-monospace,"SF Mono",monospace;
  --row-h:30px; --fs-row:12.5px; --fs-name:13px; --pad-x:12px; --rail:3px;
  /* T6: altura real do cabecalho, medida em JS (kpis/eixos mudam de
     altura por filtro) -- 0 aqui e' so' o retrato antes da 1a medicao. */
  --topo-h:0px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font-ui);
  font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--diverg);outline-offset:2px;border-radius:3px}

/* ── cabeçalho ─────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:40;background:var(--surface);border-bottom:1px solid var(--line)}
.topbar{display:flex;align-items:baseline;gap:14px;padding:11px 18px 7px}
.brand{font-family:var(--font-display);font-size:16px;font-weight:650;letter-spacing:-.015em}
.brand span{color:var(--ink-3);font-weight:400}
.snap{font-family:var(--font-mono);font-size:11px;color:var(--ink-2);background:var(--surface-2);
  border:1px solid var(--line-soft);padding:2px 7px;border-radius:3px}
.spacer{margin-left:auto}

/* ── A MARCA DA CIS GROUP ─────────────────────────────────────────────────
   Pedido dele, 04-SET-2026 14:17: a logo em TODOS os paineis do NMCL,
   *"objetivamente deve ser pequeno e ter transparencia na casa de 50%"*.

   ONDE ELA ENTRA, com as palavras dele:
     home            ao lado do nome do usuario
     Master Channel  na mesma linha do "View by", na extrema direita
     Task Tracker    extrema direita, depois de "<N> tasks" (e o nome "TATA" SAI)
     Project Plan    extrema direita, ao lado de "back to the home page"

   ⚠️ DATA URI, e nao arquivo: `vps/ciclo.sh:675` copia so'
   `painel/*.js painel/*.html painel/base.css painel/campos.json`. Um `.png`
   solto nao chegaria a producao, e as quatro telas mostrariam um retangulo
   quebrado sem nenhum erro no log. Aqui ela viaja dentro do proprio CSS.

   ⚠️ `order:99` alem do `margin-left:auto`: na linha do "View by" os botoes
   de eixo sao ANEXADOS por `montarEixos()` depois deste elemento. Sem o
   `order`, a marca ficaria no meio da fila em vez da ponta.

   A opacidade de .5 e' o pedido dele. O `filter` de contraste nao entra: a
   marca tem a palavra GROUP em branco VAZADA DENTRO do triangulo azul, entao
   ela se le sobre qualquer fundo -- nao depende do `--bg` da pagina.

   NENHUMA COR NOVA: a cor mora nos pixels do PNG, que e' ativo de marca e nao
   entra na paleta de tokens. */
.cis-logo{
  display:inline-block;
  width:20px; height:22px;
  flex:none; align-self:center;
  background:url("data:image/png;base64,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") center/contain no-repeat;
  opacity:.5;
}
.cis-logo.ponta{margin-left:auto; order:99}
.cis-logo.direita{margin-left:auto}