/* ===========================================================================
   Tema GRAFITE, com navy e laranja como as DUAS assinaturas (11/08/2026).

   O campo de trabalho é cinza. As cores das duas empresas não forram a tela:
   elas aparecem onde significam alguma coisa — o navy `#0F2351` da Netflex na
   barra do topo e nos cartões de autenticação, o laranja `#E85C04` da Atuamax
   em tudo que se clica. Uma marca que cobre 100% do pixel não assina nada; ela
   vira papel de parede, e foi exatamente esse o defeito que esta versão corrige.

   O DIAGNÓSTICO QUE LEVOU AQUI: até esta versão as cinco superfícies eram o
   MESMO matiz (222°) com **78 a 82% de saturação**, a borda com 70% e até o
   texto secundário tingido a 22%. Não era um navy: eram cinco navies cobrindo a
   tela inteira. O olho não tinha onde descansar, e o único acento existente
   disputava com o fundo em vez de saltar dele.

   A CORREÇÃO NÃO CUSTOU CONTRASTE, e isso não é sorte: cada degrau novo é o
   antigo com o croma cortado a 15% e o **L\* preservado ao decimal** — mesma
   luminância, outro pigmento. Todas as razões da tela seguem as de antes, com
   diferença na segunda casa. Quem quiser refazer a conta: `--painel` mede
   3,19:1 contra a barra azul da Netflex hoje e media 3,19:1 antes.

   O QUE O CINZA AINDA GANHOU DE QUEBRA: a barra azul da Netflex (`#4A5AD8`)
   deixou de ser azul sobre azul. A razão era a mesma, mas o olho separa por
   matiz antes de separar por luminância — e é por isso que ela estava difícil
   de ler com 3,19:1, e agora não está.

   O laranja da marca: é a primária da Atuamax, a ÚNICA cor rotulada no PDF
   dela. Substituiu o âmbar `#FFBA07`, que estava a **ΔE 2,3** do amarelo de
   atenção — a mesma cor para o olho. O laranja fica a **27,2** do amarelo e a
   **16,8** do vermelho de erro. ⚠️ Em troca é bem mais escuro (4,3:1 sobre
   `--superficie` contra 8,9:1), e por isso o texto do botão primário é o degrau
   mais fundo da rampa e o hover da dashboard AFUNDA em vez de subir — as duas
   coisas marcadas ⚠️ lá embaixo, nenhuma delas estética.

   Contrastes medidos sobre `--superficie` `#25252C`: texto 13,3:1 · fraco
   6,8:1 · laranja 4,3:1 · `#0E0F12` sobre laranja (botão primário) 5,4:1.
   =========================================================================== */
:root {
  /* Cinco degraus de GRAFITE, do mais fundo ao mais alto. A ordem NAO e
     estetica: o interior do painel e o degrau mais ESCURO porque e ali que moram
     as cores de dado. Painel afunda, casca sobe — quem decide e o contraste do
     dado, nao a profundidade.

     Cada um destes hexes e o navy que estava aqui antes com o CROMA cortado a
     15% e o **L\* preservado ao decimal**. Por isso a troca nao mexeu em nenhum
     contraste da tela: texto 13,3:1, laranja 4,3:1, barra azul da Netflex
     3,19:1 sobre o painel — os mesmos numeros de antes, medidos de novo. */
  --fundo: #0E0F12;
  --painel: #17171B;
  --superficie: #25252C;
  --superficie-2: #32333C;
  --borda: #454750;
  --hover: #40404B;         /* botao secundario sob o cursor */
  --texto: #F0F1F2;
  --fraco: #B2B4B9;

  --marca: #E85C04;
  /* ⚠️ O texto do botão primário é o navy MAIS FUNDO, não o do manual: sobre o
     laranja, `#0F2351` dá 4,32:1 — abaixo de 4,5 para texto normal, e o rótulo
     do botão tem 15 px. `#060E22` dá 5,45:1 e continua sendo navy. Branco não
     serve (3,52:1); com o âmbar era o contrário, e quem inverteu foi a troca. */
  --marca-texto: #0E0F12;   /* o degrau mais fundo sobre laranja: 5,4:1 */

  /* O NAVY DA NETFLEX, agora escopado. Estes quatro sao, hexe por hexe, as
     superficies que a tela inteira usava ate 11/08/2026 — nao foram trocadas,
     foram REALOCADAS para as duas zonas onde a marca fala (ver `.topo` e os
     cartoes de autenticacao, mais abaixo). Dentro dessas zonas nada mudou de
     aparencia nem de contraste; fora delas, o navy sumiu. */
  --navy: #0F2351;
  --navy-2: #17306B;
  --navy-borda: #274582;
  --navy-hover: #1E3C86;
  --navy-fraco: #A6B4D6;    /* texto secundario tingido do proprio navy */

  /* Escala de estado da CASCA, reservada. Não é decoração: recolorir um estado
     com a cor da marca trocaria significado por estética — e agora que a marca
     é laranja, o amarelo daqui está a ΔE 27,2 dela e o vermelho a 16,8: são
     cores diferentes para o olho, coisa que com o âmbar não eram. Verde e vermelho
     foram clareados para o navy — `#0ca30c` e `#d03b3b` davam 4,5:1 e 3,2:1
     sobre ele, e o vermelho reprovava para texto. A escala dos PAINÉIS é outra
     e mora no servidor. */
  --ok: #3BC24A;            /* 6,5:1 */
  --atencao: #fab219;       /* 8,3:1 */
  --erro: #E8635E;          /* 4,6:1 */

  /* ---------------------------------------------------- a tinta da dashboard
     Painel de gráfico e de tabela não tem mais fundo nem moldura (12/08/2026):
     é tinta direto sobre `--fundo`. Some a caixa, e some com ela o problema de
     a moldura ter mais contraste que o dado que ela cerca — `--borda` media
     2,6:1 contra o painel, e a barra azul da Netflex media 3,2:1. A linha que
     não é dado nunca deve competir com a que é.

     Por isso trilho e separador são BRANCO COM ALFA, e não um degrau de cinza:
     assim a mesma regra serve sobre a página e sobre qualquer bloco de cor, e
     não há um segundo cinza para manter alinhado com o primeiro. */
  --trilho: #ffffff17;      /* fundo de barra e de medidor — 1,25:1 da página */
  --linha:  #ffffff12;      /* separador de linha de tabela — 1,18:1 */

  /* O bloco de número é mais arredondado que o resto da tela de propósito: ele
     é a única peça sólida que sobrou, e o raio é o que o afasta de "retângulo
     colorido". */
  --raio-bloco: 12px;
  /* Luz de cima no bloco de cor. 6% de branco: é o que dá matéria ao bloco sem
     virar verniz, e mede-se no contraste. Dos oito fundos de card que existem,
     o brilho não derruba nenhum abaixo de 4,5 — ⚠️ com uma exceção que já era
     exceção sem ele: o `#d03b3b` de crítico, 4,80:1 cru e 4,41:1 sob o brilho.
     Esse é cor de ESTADO, não de marca; nenhuma troca de paleta o alcança, e
     desde 14/08/2026 ele é o pior contraste de card da tela — o `#D00000` que
     ocupava esse posto saiu junto com o marrom da Atuamax. */
  --brilho-bloco: linear-gradient(180deg, #ffffff10, #ffffff00 60%);

  --raio: 10px;

  /* Altura da barra do topo. Este valor é só o palpite inicial: quem manda é o
     `ResizeObserver` de `interface.js`, que mede a barra de verdade e reescreve
     a variável. Tinha de ser medido — a barra quebra em duas linhas em tela
     estreita, e o número cravado que existia aqui antes (49px) já estava ~11px
     menor que a barra real, o que enfiava a barra de filtros por baixo dela. */
  --topo-altura: 60px;
}

/* ===========================================================================
   AS DUAS ZONAS NAVY.

   A barra do topo e os cartões de entrar/trocar senha. Não é decoração
   distribuída: são os dois lugares onde a pessoa não está trabalhando ainda —
   ou está chegando, ou está olhando para cima para saber onde está. Ali a marca
   da Netflex tem o que dizer; no meio de uma dashboard, não tem.

   A zona redefine os TOKENS em vez de reescrever as regras. Cada filho continua
   pedindo `var(--superficie)` e `var(--borda)` sem saber em que zona está, e é
   por isso que entrar nesta lista custa uma linha em vez de um bloco novo — e é
   por isso também que a tela de entrar saiu desta mudança pixel por pixel igual
   à de ontem. Ela sempre foi navy; o que mudou é que agora isso é uma escolha.

   `--fraco` também troca: cinza neutro sobre navy é texto que esqueceram de
   tingir. Sobre o navy o secundário sai do próprio navy (7,3:1).
   =========================================================================== */
.topo,
#tela-entrar .cartao,
#tela-senha .cartao {
  --superficie: var(--navy);
  --superficie-2: var(--navy-2);
  --borda: var(--navy-borda);
  --hover: var(--navy-hover);
  --fraco: var(--navy-fraco);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Manrope é a tipografia do manual, mas exigiria baixar fonte de fora — e
     esta máquina serve só a LAN. Pilha do sistema, sem requisição externa. */
}

h1 { font-size: 1.35rem; margin: .2rem 0 .4rem; }
h2 { font-size: 1.05rem; margin: 0 0 .8rem; letter-spacing: .01em; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

.oculto { display: none !important; }
.fraco  { color: var(--fraco); font-size: .875rem; }
.espaco { flex: 1; }

.centro {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}

/* ------------------------------------------------------------------ cartões */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1.25rem;
}
.estreito { width: 100%; max-width: 360px; }
.marca { width: 56px; height: 56px; display: block; margin: 0 auto .75rem; }
/* O nome no topo: altura fixa e largura pela proporção (900×151), senão o
   logotipo estica. 20 px é a altura em que ele fica do tamanho do rótulo das
   abas ao lado — o nome do sistema não compete com a navegação, acompanha.
   `flex: none` porque a barra é flex e o logotipo é a única peça que não pode
   encolher: espremido, o `m` e o `a` fecham as contra-formas. */
.marca-topo { height: 20px; width: auto; flex: none; display: block; margin-right: .25rem; }

/* O logotipo "flexmax" é imagem porque é LETRA DESENHADA, não texto: as duas
   famílias (Manrope e NaurizRedKeds) são proprietárias e esta máquina não tem
   fonte instalada nenhuma. Largura em % do cartão para acompanhar telas
   estreitas; a altura vem da proporção, nunca fixa, senão o nome estica. */
.marca-nome { display: block; width: 72%; max-width: 240px; height: auto; margin: 0 auto; }
/* Sem o símbolo por cima, o nome é a única marca do cartão: ganha o respiro que
   era do arco, e um pouco de corpo. */
#tela-entrar h1 { margin: .35rem 0 .6rem; }

/* ------------------------------------------------------------------ formas */
label { display: block; margin: .85rem 0 .3rem; font-size: .8rem; color: var(--fraco); }
input, select {
  width: 100%; padding: .6rem .7rem;
  background: var(--superficie-2); color: var(--texto);
  border: 1px solid var(--borda); border-radius: 8px; font: inherit;
}
input:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--marca); outline-offset: 2px;
}

button {
  padding: .55rem .9rem; border-radius: 8px; font: inherit; cursor: pointer;
  background: var(--superficie-2); color: var(--texto);
  border: 1px solid var(--borda);
}
button:hover { background: var(--hover); }
button.primario {
  width: 100%; margin-top: 1.1rem;
  background: var(--marca); color: var(--marca-texto);
  border: none; font-weight: 600;
}
button.primario:hover { filter: brightness(1.08); }
/* `.primario` ocupa a linha inteira porque nasceu para o fim de um formulário.
   Dentro de uma barra, o mesmo peso precisa caber ao lado dos outros. */
button.acao {
  background: var(--marca); color: var(--marca-texto);
  border: none; font-weight: 600;
}
button.acao:hover { filter: brightness(1.08); }
button.acao:disabled { opacity: .5; cursor: not-allowed; filter: none; }
button.discreto { background: none; border: none; color: var(--fraco); }
button.discreto:hover { color: var(--texto); background: var(--superficie-2); }
button.perigo { color: var(--erro); }

.linha { display: flex; gap: .5rem; flex-wrap: wrap; }
.linha input { flex: 1; min-width: 8rem; }

.erro { color: var(--erro); font-size: .875rem; min-height: 1.2em; margin: .6rem 0 0; }

/* -------------------------------------------------------------------- topo */
.topo {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem 1rem; background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; z-index: 2;
}
.topo nav { display: flex; gap: .25rem; }
.aba { background: none; border: none; color: var(--fraco); }
.aba[aria-current="true"] {
  color: var(--texto); background: var(--superficie-2);
  box-shadow: inset 0 -2px 0 var(--marca);
}
main { padding: 1.25rem; max-width: 1100px; margin: 0 auto; }

/* ---------------------------------------------------------------- conteúdo */
.cartoes { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.colunas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-bottom: 1rem; }
.painel > * + * { margin-top: 1rem; }

/* ------------------------------------------------- empresa › setor › dash
   Três profundidades e nenhuma cor para separá-las: o fundo da página, o
   cartão da empresa e, mais claro de todos, a dashboard — que é a única coisa
   clicável da tela e por isso a que salta.

   O setor fica entre os dois com borda e nenhum preenchimento: mais um degrau
   de superfície aqui empataria com o cartão da dashboard, e o encaixe se
   perderia justamente no nível que separa uma equipe da outra.

   ⚠️ Empresa **não** ganha cor própria, e o motivo já mudou duas vezes. Era
   impossível quando as duas marcas eram laranja a ΔE 2,9, abaixo do piso de 15
   em que o olho separa duas cores. Depois virou possível e ainda assim errado,
   porque o navy era a superfície da tela inteira. Agora que ele está escopado,
   um cartão navy para a Netflex CABERIA — e segue não valendo a pena por outra
   razão: o navy do topo diz "este sistema", e repetir a mesma cor num cartão a
   faria dizer "esta empresa" duas telas abaixo. A Atuamax também não teria par,
   porque o laranja dela é o clique — uma empresa ficaria marcada e a outra não.
   Quem separa aqui continua sendo o nome — e a distinção que importa de fato
   (qual produção o painel consulta) é a que a R10 trava no banco. */
.empresas { display: grid; gap: 1rem; }

.empresa {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 1rem 1.1rem 1.15rem;
}
.empresa-topo {
  display: flex; align-items: baseline; gap: .6rem;
  padding-bottom: .6rem; margin-bottom: .9rem;
  border-bottom: 1px solid var(--borda);
}
.empresa-topo h2 { margin: 0; font-size: 1.1rem; }
/* Quadrado porque o gerador já entregou os dois assim: os símbolos têm
   proporções diferentes e foram igualados pela ÁREA DE TINTA dentro do mesmo
   quadrado, não pela caixa. `align-self` porque a linha alinha por linha de
   base, e imagem não tem uma. */
.marca-empresa { width: 28px; height: 28px; flex: none; align-self: center; }

.setores { display: grid; gap: .8rem; }
.setor { border: 1px solid var(--borda); border-radius: var(--raio); padding: .8rem .85rem .9rem; }
.setor-topo { display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem; }
.setor-topo h3 {
  margin: 0; font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; color: var(--fraco);
}
/* Dashboard cadastrada e ainda sem grupo: pendência de cadastro, não seção. */
.setor.sem-setor { border-style: dashed; }

.dash {
  text-align: left; width: 100%;
  display: flex; align-items: baseline; gap: .5rem;
  background: var(--superficie-2); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: .85rem .9rem;
}
/* ⚠️ O hover AFUNDA (era `#1C3878`, mais claro que o repouso). Com o âmbar
   tanto fazia; com o laranja não: o "abrir →" mede 12 px, e sobre `#1C3878` o
   laranja dá 3,16:1 — reprova para texto pequeno. Sobre `--painel` dá 5,07:1.
   É a mesma regra que já decide a ordem dos degraus lá em cima: quem manda na
   profundidade é o contraste do que está por cima, não a estética. E o destino
   é honesto — o cartão afunda para a cor do painel que ele vai abrir. */
.dash:hover { border-color: var(--marca); background: var(--painel); }
.dash b { flex: 1; font-size: .98rem; font-weight: 600; }
.dash-abrir { font-size: .75rem; color: var(--fraco); }
.dash:hover .dash-abrir { color: var(--marca); }   /* 5,07:1 sobre --painel */

.etiqueta {
  display: inline-block; padding: .1rem .5rem; border-radius: 999px;
  font-size: .75rem; background: var(--superficie-2); color: var(--fraco);
  border: 1px solid var(--borda);
}
.etiqueta.viva { color: var(--ok); border-color: #1E5B33; }
.etiqueta.pendente { color: var(--atencao); border-color: #5E4A18; }
.etiqueta.morta { color: var(--erro); border-color: #6B2B2B; }

.lista { list-style: none; padding: 0; margin: .8rem 0 0; }
.lista li { padding: .4rem 0; border-top: 1px solid var(--borda); }

/* ===================================================== empresa › setor
   A administração passou a dizer a mesma coisa que a página inicial: **setor
   não existe fora de uma empresa**. Era uma fileira plana de botões com o nome
   do setor, e como "Operacional" existe nas duas empresas apareciam dois
   botões idênticos — quem concedia acesso escolhia no chute.

   A empresa entra como RÓTULO DE LINHA, com o símbolo dela, e os setores são as
   fichas à direita. Nenhuma cor separa as empresas (as duas marcas são laranja
   a ΔE 2,9); quem separa é o símbolo e a posição. */
.acesso { display: grid; gap: .4rem; }
.acesso-empresa { display: flex; align-items: center; gap: .4rem; }
.acesso-empresa > span:first-of-type,
.setores-admin .acesso-empresa span {
  flex: none; min-width: 5.5rem;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--fraco);
}
/* Aqui o símbolo é etiqueta de linha, não a marca do cartão: 16 px. */
.acesso-empresa .marca-empresa { width: 16px; height: 16px; }
.acesso-setores { display: flex; flex-wrap: wrap; gap: .3rem; }

/* Ficha de setor. O estado concedido usa o MESMO verde de `.etiqueta.viva` —
   inventar um segundo vocabulário de "ligado" na mesma tela é o que faz uma
   interface parecer duas. */
button.chip {
  padding: .15rem .6rem; border-radius: 999px; font-size: .78rem;
  background: var(--superficie-2); border: 1px solid var(--borda); color: var(--texto);
}
button.chip:hover { background: var(--hover); color: var(--texto); }
button.chip.concedido { color: var(--ok); border-color: #1E5B33; }

.setores-admin { display: grid; gap: .6rem; margin-top: .9rem; }
.setores-admin .lista { margin: .15rem 0 0 1.55rem; }
#form-grupo select { width: auto; flex: none; }

.tabela { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tabela th, .tabela td {
  text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--borda);
  vertical-align: top;
}
.tabela th { color: var(--fraco); font-weight: 500; }
.tabela td.detalhe { color: var(--fraco); max-width: 26rem; word-break: break-word; }
.rolagem { overflow-x: auto; }

/* A provisória: aparece uma vez, então tem de ser impossível não ver. */
.provisoria {
  margin-top: 1rem; padding: 1rem;
  background: #111116; border: 1px solid var(--marca); border-radius: var(--raio);
}
/* O formulário de edição. Mesma forma da provisória e borda DIFERENTE, de
   propósito: a moldura laranja ali em cima quer dizer "isto aparece uma vez e
   some para sempre". Corrigir um nome não é isso, e repetir o alarme gastaria o
   alarme. */
.edicao {
  margin-bottom: 1rem; padding: 1rem;
  background: #111116; border: 1px solid var(--borda); border-radius: var(--raio);
}
.edicao .linha { margin-top: .8rem; }

.provisoria code {
  display: inline-block; margin: .4rem .5rem .4rem 0; padding: .4rem .7rem;
  background: var(--superficie-2); border-radius: 6px;
  font-size: 1.1rem; letter-spacing: .05em;
}

/* ===========================================================================
   A dashboard aberta.

   A grade é a do Grafana: 24 colunas, linha de 30 px e 8 px de intervalo. Não é
   nostalgia — o layout das 8 dashboards foi organizado à mão pelo usuário e
   veio no catálogo em `gridPos`. Reinventar a proporção aqui faria a mesma
   dashboard ter duas caras enquanto as duas versões conviverem.

   `alt: 5` (o card do topo) dá 5×30 + 4×8 = 182 px, exatamente como lá.
   =========================================================================== */
/* A casca é estreita (1100 px) porque formulário largo é formulário ruim de
   ler. A dashboard é o oposto: 24 colunas em 1100 px dão 40 px por coluna, e o
   card de 3 colunas não caberia o próprio número.

   A VISTA TEM 1080p COMO TETO, nas duas direções (decidido em 11/08/2026,
   depois de soltar a largura por completo e não ficar bom). Ou seja: a grade
   cresce até a geometria de uma tela 1920×1080 e para ali. Num monitor maior
   ela não estica — fica centrada, com a mesma cara que tem no 1080p, que é a
   resolução em que estas 8 dashboards foram organizadas à mão.

   O motivo de existir teto: as 24 colunas são `fr` e esticam para sempre. Num
   ultrawide isso vira painel largo e raso — a proporção do `gridPos` se mantém
   no papel e se perde no olho, porque o que era um card quadrado de 3 colunas
   vira uma tarja.

   ABAIXO de 1080p nada é travado: o `min()` faz a janela mandar, e aí a grade
   se ajusta à tela menor em vez de estourar.

   A ALTURA É `height`, NÃO `min-height` — ou seja, limite dos dois lados. A
   vista inteira cabe numa tela e a PÁGINA não rola nunca: quem rola é a grade,
   dentro da própria caixa. Isso mantém a barra de filtros e o nome da dashboard
   parados na tela em vez de irem embora para cima, e é o que faz um monitor de
   parede funcionar. Dashboard que não cabe continua com a linha nos 30 px do
   `gridPos` e ganha rolagem interna — encolher a linha até tudo caber foi
   medido e não serve: a `analises-operacionais` tem 56 linhas, e só os vãos de
   8 px comem 440 dos ~907 px úteis. */
body.vista-aberta main {
  max-width: 1920px;
  display: flex; flex-direction: column;
  height: min(calc(100dvh - var(--topo-altura)), calc(1080px - var(--topo-altura)));
}
/* `min-height: 0` nos dois: item de flex não encolhe abaixo do próprio conteúdo
   por padrão, e sem isso a caixa da grade estouraria a altura em vez de rolar
   por dentro. */
body.vista-aberta #painel-vista {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
}

/* O parágrafo de erro reserva 1,2em para a tela não pular quando um erro chega.
   Vazio, na vista, essa reserva vira ~35 px tirados dos painéis toda hora. Aqui
   ele encolhe a zero — mas continua RENDERIZADO: `display: none` o tiraria da
   árvore de acessibilidade, e região `role="alert"` que nasce escondida não é
   anunciada quando o texto aparece. O pulo que ele evitava é de 35 px numa
   grade que se reajusta sozinha; o anúncio do erro não tem substituto. */
body.vista-aberta #erro-vista:empty { min-height: 0; margin: 0; }

.barra-vista {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .5rem .75rem; margin-bottom: .75rem;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio);
  position: sticky; top: var(--topo-altura); z-index: 1;
}
.barra-vista h1 { margin: 0; font-size: 1.1rem; }
.barra-vista select { width: auto; padding: .35rem .5rem; font-size: .85rem; }

.filtro-linha { display: flex; align-items: center; gap: .4rem; margin: 0; }
.filtro-nome {
  color: var(--fraco); font-size: .75rem; text-transform: uppercase;
  letter-spacing: .04em;
}
.filtros { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Filtro multivalor sem biblioteca: `<details>` é o menu que o navegador já
   sabe abrir, fechar e navegar pelo teclado. */
.filtro { position: relative; }
.filtro > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: .4rem;
  padding: .35rem .6rem; border-radius: 8px;
  background: var(--superficie-2); border: 1px solid var(--borda);
  font-size: .85rem;
}
.filtro > summary::-webkit-details-marker { display: none; }
.filtro > summary::after { content: '▾'; color: var(--fraco); }
.filtro-valor { color: var(--texto); }
.filtro-lista {
  position: absolute; z-index: 5; top: calc(100% + 4px); left: 0;
  min-width: 15rem; max-height: 22rem; overflow-y: auto;
  padding: .5rem; border-radius: 8px;
  background: var(--superficie-2); border: 1px solid var(--borda);
  box-shadow: 0 8px 28px #0009;
}
.filtro-lista label {
  display: flex; align-items: center; gap: .5rem;
  margin: 0; padding: .25rem .3rem; border-radius: 6px;
  color: var(--texto); font-size: .85rem;
}
.filtro-lista label:hover { background: var(--superficie); }
.filtro-lista input { width: auto; }

/* A linha vale NO MÍNIMO os 30 px do Grafana e, se sobrar janela, divide a
   sobra por igual. Todas as linhas crescem no mesmo passo, então o `gridPos`
   feito à mão continua valendo: o que a grade preserva é a PROPORÇÃO entre os
   painéis, não a altura em pixels — que no Grafana também nunca foi absoluta.

   Sem isso, uma dashboard de 12 linhas dava 456 px em qualquer monitor e o
   resto da tela era fundo. */
.grade-vista {
  flex: 1; min-height: 0; overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-auto-rows: minmax(30px, 1fr);
  gap: 8px;
}

/* ===========================================================================
   DUAS PEÇAS, E SÓ DUAS (12/08/2026).

   O painel deixou de ser uma caixa. O que existe na tela agora é:

   BLOCO  — o card de número. Cor de ponta a ponta, título dentro dela, sem
            moldura. É a única coisa sólida da tela, e é por isso que ele lidera
            sem precisar de tamanho nem de borda.
   TINTA  — gráfico e tabela, desenhados direto sobre o fundo da página. Sem
            fundo, sem contorno: o que separa um painel do vizinho é o
            alinhamento e o respiro da grade.

   O QUE ISSO CORRIGE: até aqui todo painel era uma caixa com fundo `--painel` e
   1 px de `--borda`, e dentro dos de número havia OUTRA caixa, colorida, com
   raio próprio. Caixa dentro de caixa, catorze vezes por tela — a moldura tinha
   mais peso visual que a barra que ela cercava (borda 2,6:1 contra o painel; a
   barra azul da Netflex, 3,2:1). Tirar a moldura devolve esse contraste ao
   dado, que é para onde o olho tem de ir.
   =========================================================================== */
.painel-caixa {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: none; border: 0; border-radius: var(--raio);
  /* Sem moldura, o padding horizontal é o que alinha (ou desalinha) um painel
     com o de baixo. Fica quase nulo: cada painel começa na coluna da grade, e a
     grade passa a ser a régua de tudo. */
  padding: .1rem .35rem .2rem;
}
/* `transparente` vem do catálogo (é o `transparent` do Grafana) e continua
   sendo aplicado para a tela não mentir sobre o que o catálogo diz — mas virou
   o padrão de todo painel, então não tem mais efeito próprio. */

.painel-caixa > header {
  display: flex; align-items: center; gap: .4rem; margin-bottom: .3rem;
}
.painel-caixa h3 {
  margin: 0; font-size: .72rem; font-weight: 600; color: var(--fraco);
  text-transform: uppercase; letter-spacing: .08em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ajuda {
  flex: none; width: 14px; height: 14px; border-radius: 50%; cursor: help;
  font-size: 10px; line-height: 14px; text-align: center;
  background: var(--superficie-2); color: var(--fraco); border: 1px solid var(--borda);
}
.etiqueta.agora { flex: none; padding: 0 .4rem; font-size: .65rem; cursor: help; }

.painel-corpo {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  transition: opacity .18s ease-out;
}
.painel-corpo.carregando { opacity: .35; }
.painel-rodape {
  margin: .25rem 0 0; text-align: right;
  font-size: .66rem; color: var(--fraco); opacity: .7;
}
.vazio { margin: auto; color: var(--fraco); font-size: .85rem; }

/* ---------------------------------------------------------- stat: o BLOCO */

/* A cor chega por `style` (é a marca da empresa, resolvida no servidor) e o
   resto do bloco vem daqui. Antes do primeiro dado o card já existe como forma,
   num branco de 3%: sem isso a tela abriria com buracos onde vão estar os
   números, e o bloco apareceria do nada. A transição é o único movimento da
   dashboard, e ele diz uma coisa só — o número chegou. */
.painel-caixa.tipo-stat {
  padding: .5rem .7rem .5rem;
  border-radius: var(--raio-bloco);
  background-color: #ffffff08;
  transition: background-color .22s ease-out;
}
.painel-caixa.pintado {
  background-image: var(--brilho-bloco);
  /* Sombra com deslocamento e desfoque — o bloco está sobre a página, e é a
     única coisa da tela que está. */
  box-shadow: 0 1px 2px #00000059, 0 10px 24px #0000002e;
}
/* Dentro do bloco, NADA é cinza: todo texto sai da cor que o contraste
   escolheu (branco ou o marrom escuro), com alfa em cima. Cinza sobre cor é
   texto que esqueceram de tingir — a mesma regra que o navy da casca já segue.
   O alfa do título é 0,90. Ele já foi um valor apertado: o `#D00000` da Atuamax
   caía de 4,60:1 para 4,27:1 no degrau seguinte e reprovava. Com o `#D00000`
   fora da paleta (14/08/2026), quem manda agora é o `#F46414` da Netflex, que a
   0,90 dá 5,35:1 e só cruza 4,5 lá por 0,79 — o 0,90 deixou de ser o limite e
   virou escolha. */
.painel-caixa.pintado h3 { color: currentColor; opacity: .9; }
.painel-caixa.pintado .painel-rodape { color: currentColor; opacity: .5; }
.painel-caixa.pintado .vazio { color: currentColor; opacity: .75; }
.painel-caixa.pintado .ajuda,
.painel-caixa.pintado .etiqueta.agora {
  background: #ffffff1f;
  background: color-mix(in srgb, currentColor 12%, transparent);
  color: currentColor; border-color: transparent;
}

.stats { flex: 1; display: flex; gap: .5rem; min-height: 0; }
/* `container-type: size` faz o card ser a régua do próprio número — ver
   `.stat-valor`. O card nunca é medido pelo conteúdo: a altura desce da linha
   da grade e a largura vem do `flex: 1`, então a contenção não tem o que
   colapsar. */
.stat {
  flex: 1; min-width: 0; border-radius: 8px; padding: .4rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--superficie-2);
  container-type: size;
}
/* Quando o BLOCO é o card, o `.stat` não é mais uma peça: é o miolo. Sem fundo,
   sem raio, sem padding — e o número desce para a base, à esquerda, alinhado
   com o título em cima. Número centrado no meio de um bloco é a composição do
   Grafana; ancorado no canto, o card lê como peça de interface. */
.painel-caixa.tipo-stat .stat {
  background: none; padding: 0; border-radius: 0;
  align-items: flex-start; justify-content: flex-end;
}
.stat-nome {
  font-size: .7rem; opacity: .85; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* O número acompanha a altura do CARD, e isso é `cqh`, não `vw`. Com `vw` quem
   mandava era a janela: o card de 3 colunas e o de 12 recebiam o mesmo corpo de
   fonte, e o número parava de crescer justo quando a grade passou a esticar. A
   largura entra como teto (`cqw`) para número comprido não estourar card
   estreito.

   O piso de 1,1rem é a rede: se um dia a cadeia de alturas ficar indefinida e a
   contenção zerar o `cqh`, o número cai exatamente no tamanho que tinha antes
   desta mudança, em vez de sumir.

   `tabular-nums` porque estes números trocam sozinhos a cada atualização: sem
   ele, `1.190` vira `1.201` e a largura dança. O `-.02em` é o que tira o ar que
   sobra entre dígitos grandes. */
.stat-valor {
  font-size: clamp(1.1rem, min(26cqh, 24cqw), 2.6rem);
  font-weight: 700; line-height: 1.05; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ------------------------------------------------------- table: a TINTA */
.rolagem-painel { flex: 1; min-height: 0; overflow: auto; }
table.grade { width: 100%; border-collapse: collapse; font-size: .78rem; }
table.grade th, table.grade td {
  padding: .25rem .4rem; border-bottom: 1px solid var(--linha);
  text-align: left; white-space: nowrap;
}
/* ⚠️ O cabeçalho gruda no topo e o painel não tem mais fundo — então o fundo
   OPACO tem de vir daqui, e tem de ser o da página. Com `--superficie` (o que
   estava aqui) ele viraria uma tarja cinza dentro de um painel sem caixa; sem
   fundo nenhum, as linhas rolariam visíveis por baixo do cabeçalho. */
table.grade th {
  position: sticky; top: 0; z-index: 1;
  background: var(--fundo); color: var(--fraco); font-weight: 500;
  letter-spacing: .03em;
}
table.grade td.numero { text-align: right; font-variant-numeric: tabular-nums; }
table.grade tbody tr:hover td { background: #ffffff0a; }

/* Medidor dentro da célula (`gauge` do Grafana): o valor fica POR CIMA da
   barra, e não ao lado — é o que cabe em coluna de 150 px. */
.medidor { position: relative; height: 18px; border-radius: 4px; background: var(--trilho); }
.medidor-preenche { height: 100%; border-radius: 4px; }
.medidor-valor {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: flex-end; padding-right: .35rem; font-size: .72rem;
}

/* --------------------------------------------------------------- barchart */
.barras-h { flex: 1; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
.barras-h .barra { display: grid; grid-template-columns: minmax(4rem, 34%) 1fr auto; gap: .5rem; align-items: center; }
/* ⚠️ SEM TRILHO no gráfico de barras — e é uma decisão de 12/08/2026, vista na
   maquete e não no código: com quinze linhas, quinze trilhos de ponta a ponta
   remontam exatamente o retângulo cinza que tirar a moldura tinha acabado de
   apagar. A barra já se mede contra a maior da lista, que é o que o Grafana
   também faz aqui. O trilho fica onde ele SIGNIFICA alguma coisa: no medidor,
   onde o vazio é a parte que falta para o todo. */
.barras-h .barra-trilho { height: 14px; border-radius: 3px; }
.barras-h .barra-preenche { height: 100%; border-radius: 3px; }

.barras-v { flex: 1; display: flex; align-items: stretch; gap: 4px; min-height: 0; }
.barras-v .barra { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.barras-v .barra-trilho { flex: 1; display: flex; align-items: flex-end; }
.barras-v .barra-preenche { width: 100%; border-radius: 3px 3px 0 0; }

.barra-rotulo {
  font-size: .72rem; color: var(--fraco);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.barras-v .barra-rotulo { text-align: center; }
.barra-valor { font-size: .75rem; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- bargauge */
.medidores { flex: 1; display: flex; flex-direction: column; gap: .35rem; justify-content: center; overflow-y: auto; }
.medidor-linha { display: grid; grid-template-columns: minmax(4rem, 32%) 1fr auto; gap: .5rem; align-items: center; }
.medidor-linha .barra-trilho { height: 20px; border-radius: 4px; background: var(--trilho); }
.medidor-linha .barra-preenche { height: 100%; border-radius: 4px; }

/* ------------------------------------------------------------- timeseries */
.serie { flex: 1; display: flex; align-items: stretch; gap: 2px; min-height: 0; }
.serie .barra { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.serie .barra-trilho { flex: 1; display: flex; align-items: flex-end; }
.serie .barra-preenche { width: 100%; border-radius: 2px 2px 0 0; min-height: 1px; }
.serie .barra-rotulo { font-size: .62rem; text-align: center; }

/* Abaixo de 1000 px a grade de 24 colunas vira uma coluna só: um painel de 3
   de 24 num celular seria um selo ilegível, e a ordem do `gridPos` já é a
   ordem de leitura. */
@media (max-width: 1000px) {
  /* No celular a altura travada não faz sentido: uma coluna de 14 painéis não
     cabe em tela nenhuma, e rolagem dentro de uma caixa que ocupa a tela toda é
     pior que a rolagem da página, que o polegar já sabe fazer. */
  body.vista-aberta main { height: auto; min-height: 0; }
  .grade-vista { grid-template-columns: 1fr; grid-auto-rows: auto; overflow-y: visible; }
  .grade-vista .painel-caixa {
    grid-column: 1 / -1 !important; grid-row: auto !important; min-height: 150px;
  }
  .barra-vista { position: static; }
}

/* A moldura inteira é da marca — era uma tarja de 3 px só na esquerda, que é
   enfeite fingindo severidade: o aviso não tem lado. */
/* =========================================================== modo de edição
   Arrastar para reorganizar (só superadmin). O que a tela precisa dizer é uma
   coisa só: **agora o painel se mexe**. Por isso o sinal é o cursor e a alça, e
   não uma moldura piscando em tudo — a dashboard continua mostrando os números,
   que é como se decide onde cada painel deve ficar. */
.alca-tamanho { display: none; }

body.editando .painel-caixa {
  /* `position` para a alça se ancorar; `touch-action` para o dedo arrastar o
     painel em vez de rolar a grade. */
  position: relative; touch-action: none;
}
/* Sem moldura, o painel de gráfico não tem limite visível — e quem está
   arrastando precisa saber exatamente que retângulo está movendo. O contorno
   tracejado aparece SÓ no modo de edição: fora dele, mostrar a caixa seria
   trazer de volta a moldura que esta versão tirou. */
body.editando .painel-caixa:not(.tipo-stat) {
  outline: 1px dashed #ffffff20; outline-offset: -1px; border-radius: var(--raio);
}
body.editando .painel-caixa > header { cursor: grab; }
body.editando .painel-caixa:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

body.editando .alca-tamanho {
  display: block; position: absolute; right: 2px; bottom: 2px;
  width: 14px; height: 14px; cursor: nwse-resize;
  /* Duas riscas na diagonal: é alça de canto em qualquer sistema, e desenhada
     em gradiente não entra fonte nem imagem. */
  background:
    linear-gradient(135deg, transparent 42%, var(--fraco) 42%, var(--fraco) 54%, transparent 54%),
    linear-gradient(135deg, transparent 68%, var(--fraco) 68%, var(--fraco) 80%, transparent 80%);
}
body.editando .alca-tamanho:hover { filter: brightness(1.6); }

/* O painel não tem mais borda para tingir: quem marca o que está na mão é o
   `outline`, que não ocupa espaço e por isso não empurra o conteúdo 1 px no
   instante em que o gesto começa. */
.painel-caixa.arrastando, .painel-caixa.redimensionando {
  z-index: 3; box-shadow: 0 12px 32px #000a;
  outline: 2px solid var(--marca); outline-offset: -1px;
}
.painel-caixa.arrastando { cursor: grabbing; opacity: .92; }
/* Enquanto arrasta, o conteúdo não recebe clique nem rolagem: soltar o painel
   em cima de uma tabela não pode virar clique na tabela. */
.painel-caixa.arrastando .painel-corpo, .painel-caixa.redimensionando .painel-corpo {
  pointer-events: none;
}

/* Onde o painel vai cair. Tracejado e sem preenchimento: é buraco anunciado,
   não caixa nova. */
.marcador-grade {
  border: 2px dashed var(--marca); border-radius: var(--raio);
  background: #E85C0418; pointer-events: none;
}

.aviso {
  position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%);
  background: var(--superficie-2); border: 1px solid var(--marca);
  padding: .6rem 1rem; border-radius: 8px; box-shadow: 0 6px 24px #0008;
}

/* As duas únicas transições da tela dizem "o número chegou" e "este painel está
   recarregando". Quem pediu menos movimento não perde informação nenhuma
   desligando as duas: o estado final é o mesmo, ele só aparece de uma vez. */
@media (prefers-reduced-motion: reduce) {
  .painel-caixa, .painel-corpo { transition: none; }
}