/* =========================================================================
   Sistema unificado Nova Macapá
   Identidade visual do CONTROLE OPERACIONAL (tráfego): lateral navy sólida,
   azul corporativo #1d4ed8, área de trabalho cinza-azulada com cartões
   brancos, tabelas densas de cabeçalho neutro.

   Escolha do usuário: das cinco caras dos sistemas de origem, a do tráfego é
   a que fica. Um sistema só tem de parecer um sistema só — quem abre o SESMT
   depois da farmácia não pode sentir que trocou de programa.

   O que veio do tráfego é a APARÊNCIA, não a tecnologia. Lá o visual estava
   montado sobre Bootstrap 5.3.2, bootstrap-icons e chart.js, todos por CDN.
   Aqui não entra CDN nenhum: o sistema roda em rede interna, e uma CDN fora
   do ar é a tela inteira sem estilo. As cores, o ritmo, os raios e as sombras
   foram lidos de `projeto_final/static/css/{main,dashboard}.css` e reescritos
   sobre o vocabulário de classes que as ~60 telas daqui já usam.

   Ao portar um módulo, use este vocabulário e não invente classe nova:
     .cartao .tabela .botao .etiqueta .indicador .filtros .formulario
     .grade .modal .paginacao .abas .mensagem .campo-grupo
   ========================================================================= */

/* ----------------------------------------------------------------- tokens */
:root {
  /* Azuis da marca — os do tráfego: #1d4ed8 com #1e40af no hover. */
  --azul-profundo: #1e3a8a;
  --azul-medio:    #1d4ed8;
  --azul-vivo:     #2563eb;
  --azul-busca:    #2563eb;
  --azul-link:     #1d4ed8;

  /* `--azul-solido` é o azul que recebe TEXTO BRANCO por cima: botão
     principal, aba ativa, página atual da paginação. Separado de
     `--azul-medio` porque no tema escuro o acento precisa clarear (para se ler
     sobre o cartão) e o fundo de botão precisa escurecer (para o branco se ler
     sobre ele) — um token só não atende os dois. */
  --azul-solido:   #1d4ed8;
  --azul-hover:    #1e40af;

  /* Acento laranja/âmbar — sobrou como cor de alerta e de ação de destaque.
     Deixou de ser o filete da lateral: o filete era a assinatura QORE, e a
     identidade do tráfego não tem laranja nenhum na moldura. */
  --laranja:       #ea580c;
  --laranja-forte: #c2410c;
  --laranja-escuro: #9a3412;

  --verde:         #15803d;
  --verde-forte:   #166534;

  /* Fundos de botão que recebem texto branco. Ficam de fora do tema escuro de
     propósito: quem tem de se ler ali é o branco por cima, e clarear o
     vermelho — como o texto de erro precisa clarear — apagaria o rótulo.
     Branco sobre eles: 6,5:1 · 8,3:1 · 5,2:1. */
  --erro-solido: #b91c1c;
  --erro-solido-forte: #991b1b;

  /* Superfícies */
  /* Navy chapado, sem gradiente: `--bg-sidebar` / `--bg-sidebar-2` do tráfego. */
  --lateral-fundo: #0c1a35;
  --lateral-fundo-rodape: #0a1730;
  --lateral-texto: #cbd5e1;
  --lateral-texto-fraco: #94a3b8;
  --lateral-hover: rgb(255 255 255 / 5%);
  --lateral-ativo: rgb(29 78 216 / 22%);
  --lateral-borda: rgb(255 255 255 / 6%);
  /* A lateral não segue o tema: o navy é escuro nos dois. Por isso todo token
     usado lá dentro fica FORA do bloco `[data-tema="escuro"]` — o azul do
     acento não pode clarear, senão o branco por cima dele deixa de se ler. */
  --lateral-acento: #1d4ed8;

  --superficie: #ffffff;
  --superficie-alt: #f8fafc;
  /* O fundo deixa de ser branco: cartão branco sobre campo cinza-azulado é o
     que dá o relevo da tela do tráfego. Com tudo branco, o cartão sumia. */
  --fundo: #f5f7fa;
  --borda: #e2e8f0;
  --borda-forte: #cbd5e1;

  /* Tinta */
  --tinta: #0f172a;
  --tinta-media: #475569;
  /* #94a3b8 (o "muted" do tráfego) dá 2,6:1 sobre branco e reprova na AA;
     este dá 5,1:1 sobre o cartão e 4,7:1 sobre o fundo da página. */
  --tinta-fraca: #61707f;

  /* Estados */
  /* A SELEÇÃO NUM FATIADOR — o amarelo do dashboard de horas extras da
     origem. Papel próprio, e por isso token próprio: não é "atenção" (que é
     aviso) nem "ativo" (que é o azul do botão principal). É "o item que você
     escolheu, no meio de uma coluna de irmãos azuis".

     Eu já tinha recusado este amarelo, com o argumento de que era a única
     peça daquele sistema com essa cor. O usuário apontou o certo: ele
     DESTACA mais, e num fatiador de onze itens saber onde se está é a função.

     Os mesmos valores nos dois temas — um amarelo forte funciona sobre claro
     e sobre escuro, e o texto grafite dá 10:1 nos dois. */
  --selecao: #fbbf24;
  --selecao-borda: #f59e0b;
  --selecao-texto: #1f2937;

  --sucesso: #15803d;
  --sucesso-fundo: #dcfce7;
  --atencao: #b45309;
  --atencao-fundo: #fef3c7;
  --erro: #b91c1c;
  --erro-fundo: #fee2e2;
  --info: #1e40af;
  --info-fundo: #dbeafe;

  /* Tabelas — cabeçalho neutro claro, sem zebra bege. O tráfego só marca a
     linha sob o cursor; a zebra fica quase imperceptível, só para o olho não
     perder a linha em tabela larga. */
  --tabela-cabecalho: #f8fafc;
  --tabela-cabecalho-texto: #61707f;
  --tabela-zebra: #fafbfd;
  --tabela-hover: #eff6ff;
  --tabela-linha: #f1f5f9;

  /* Raios do tráfego: 6 / 10 / 14. */
  --raio: 10px;
  --raio-pequeno: 6px;
  --raio-grande: 14px;
  --sombra: 0 1px 2px rgb(15 23 42 / 4%);
  --sombra-media: 0 4px 10px rgb(15 23 42 / 6%);
  --sombra-forte: 0 10px 24px rgb(15 23 42 / 12%);
  --sombra-lateral: 0 12px 28px rgb(15 23 42 / 20%);

  --lateral-largura: 236px;
  /* Cabe o ícone (18px) mais o respiro dos dois lados. Menos que
     isso e o alvo de clique fica menor que o dedo. */
  --lateral-largura-recolhida: 60px;
  --topo-altura: 54px;

  /* O tráfego usava Inter por CDN. Sem CDN, a pilha do sistema: no Windows do
     escritório isso é a Segoe UI Variable, que é a mais próxima em desenho e
     em métrica. Nenhum arquivo de fonte é baixado. */
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: "Cascadia Mono", Consolas, ui-monospace, monospace;

  --transicao: 150ms ease;
}

/* --------------------------------------------------------- tema escuro */
/* Só os tokens mudam. Nenhuma regra de componente sabe que o tema existe —
   é o que permite trocar sem reescrever as telas.
   A lateral fica como está: o navy #0c1a35 do tráfego já é escuro, é a âncora
   de identidade da tela, e escurecê-lo mais só tiraria a única cor da moldura.

   Os valores foram medidos contra o fundo em que cada um é usado, mirando o
   mínimo de 4,5:1 da WCAG AA para texto e 3:1 para o que é só decoração. A
   primeira versão do tema escuro foi feita no olho e ficou ilegível; esta
   passou pelo cálculo antes de entrar. Medições registradas ao lado. */
:root[data-tema="escuro"] {
  /* O cartão precisa se separar do fundo. No claro ele se lê pela borda
     sozinha; no escuro a borda some e é preciso somar elevação + borda.
     Medido: superfície 1,48:1 contra o fundo, borda 2,30:1 contra a superfície
     e borda-forte 2,93:1. O fundo é navy-preto de propósito, para conversar
     com o #0c1a35 da lateral em vez de brigar com ele. */
  --superficie: #243444;
  --superficie-alt: #1a2634;
  --fundo: #0a121e;
  --borda: #54698f;
  --borda-forte: #647aa0;

  --tinta: #eef3fa;         /* 11,4:1 no cartão — texto corrido */
  --tinta-media: #c4d1e2;   /*  8,2:1 no cartão — rótulo, texto de apoio */
  --tinta-fraca: #93a4bb;   /*  5,0:1 no cartão — legenda */

  --azul-link: #7fb2ff;     /*  5,9:1 no cartão */
  --azul-profundo: #cfe0ff; /*  9,6:1 — texto azul de destaque */
  --azul-medio: #6aa5ff;    /*  5,1:1 — número do indicador, barra, acento */
  --azul-vivo: #8bb9ff;
  /* Fundo de botão: aqui quem tem de se ler é o BRANCO por cima, e por isso
     ele escurece enquanto o acento clareia. 5,17:1 de branco sobre ele. */
  --azul-solido: #2563eb;
  --azul-hover: #1d4ed8;

  /* Estado: o texto sobe de tom junto com o fundo, senão verde-escuro sobre
     verde-escuro some. Medidos par a par: 7,8 / 8,1 / 5,6 / 7,9. */
  --sucesso: #4ade80;
  --sucesso-fundo: #123420;
  --atencao: #fbbf24;
  --atencao-fundo: #3d2c09;
  --erro: #f87171;
  --erro-fundo: #3d1a1a;
  --info: #93c5fd;
  --info-fundo: #152c47;

  --tabela-cabecalho: #1f2c3c;
  --tabela-cabecalho-texto: #c4d1e2;  /* 9,1:1 sobre o cabeçalho */
  --tabela-zebra: #20303f;            /* texto a 12,1:1 */
  --tabela-hover: #2c4058;            /* texto a  9,5:1 */
  --tabela-linha: #33445c;

  --sombra: 0 1px 3px rgb(0 0 0 / 45%);
  --sombra-media: 0 4px 10px rgb(0 0 0 / 50%);
  --sombra-forte: 0 10px 24px rgb(0 0 0 / 60%);

  color-scheme: dark;
}

/* O trilho da barra tem de aparecer sem competir com a barra. No claro ele é
   quase branco; no escuro, quase invisível se ficar igual à superfície. */
:root[data-tema="escuro"] .barras__trilho,
:root[data-tema="escuro"] .progresso,
:root[data-tema="escuro"] .faixa-empilhada { background: #3a4c64; }

/* Etiquetas neutras somem contra o cartão se herdarem a superfície. */
:root[data-tema="escuro"] .etiqueta--neutra,
:root[data-tema="escuro"] .etiqueta--status-cancelada,
:root[data-tema="escuro"] .etiqueta--situacao-pendente,
:root[data-tema="escuro"] .etiqueta--situacao-nao_aplicavel {
  background: #33455c;
  color: var(--tinta-media);   /* 6,0:1 */
}

/* Três etiquetas têm par de cor próprio, fora dos tokens de estado — e por
   isso ficavam com texto escuro sobre fundo claro no tema escuro, o inverso
   do que o resto da tela faz. Medidas: 8,8:1 · 8,7:1 · 8,7:1. */
:root[data-tema="escuro"] .etiqueta--status-em_execucao { background: #0d2b3d; color: #7dd3fc; }
:root[data-tema="escuro"] .etiqueta--avulsa             { background: #3a2410; color: #fdba74; }
:root[data-tema="escuro"] .etiqueta--criticidade-3      { background: #241a45; color: #c4b5fd; }

/* No claro o cabeçalho de tabela é quase branco e o cartão também: a faixa se
   lê pela borda. No escuro a mesma faixa precisa de mais separação, senão o
   cabeçalho vira parte do corpo da tabela. */
:root[data-tema="escuro"] .tabela__ordenavel a:hover { background: #2c4058; }

/* Campo de data e hora do navegador nasce com ícone preto sobre fundo
   escuro — invisível. */
:root[data-tema="escuro"] input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-tema="escuro"] input[type="month"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.7);
}

/* Mesmo desenho do `.btn-icon` do tráfego: quadrado de 34px com borda, para
   ficar do mesmo peso visual do relógio ao lado. */
.tema {
  background: var(--superficie);
  border: 1px solid var(--borda);
  color: var(--tinta-media);
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--raio-pequeno);
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.tema:hover { background: var(--fundo); border-color: var(--borda-forte); color: var(--tinta); }
.tema svg { width: 17px; height: 17px; }

/* Mostra o destino, não o estado: no claro aparece a lua ("ir para escuro"). */
.tema__sol { display: none; }
:root[data-tema="escuro"] .tema__sol { display: block; }
:root[data-tema="escuro"] .tema__lua { display: none; }

/* ============================================= atalhos do painel geral */
/* As telas de um sistema, em linha e não empilhadas. O SESMT tem catorze:
   em lista vertical o cartão dele sozinho passava de mil pixels de altura, e
   a tela de entrada deixava de caber num 14". */
.atalhos {
  display: grid;
  grid-template-columns: minmax(90px, auto) 1fr;
  align-items: baseline;
  gap: .3rem .8rem;
  margin: .5rem 0 0;
  font-size: .78rem;
}
.atalhos__secao {
  color: var(--tinta-fraca);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
.atalhos__itens {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Separador entre os links, desenhado em CSS para não entrar no texto. */
.atalhos__itens li + li::before {
  content: "·";
  color: var(--tinta-fraca);
  margin-right: .5rem;
}
.atalhos__itens li { display: flex; }

/* O cartão do painel geral: cabeçalho, números e atalhos, sem esticar. */
.cartao--sistema { margin-bottom: .8rem; }
.cartao--sistema .grade { margin-bottom: .5rem; }

/* Grade que se ajusta à quantidade — e que PREENCHE a largura.
 *
 * Aqui era `minmax(200px, max-content)`, e o usuário viu o efeito em duas
 * telas seguidas: os quatro cartões de "Avaliações práticas" paravam no meio
 * do monitor e a metade direita ficava vazia. `max-content` encolhe cada
 * coluna até o conteúdo, e conteúdo de KPI é um dígito.
 *
 * A razão original era outro defeito real — num `grade--4` com dois números,
 * metade da linha ficava vazia —, mas o remédio era pior que a doença: ele
 * troca "sobra numa linha específica" por "sobra em TODAS", e são 14 telas
 * usando esta regra.
 *
 * Com `1fr` a grade estica. O custo é o caso de dois cartões, que ficam
 * largos; é o que o dashboard do sistema de origem faz (três cartões ocupando
 * a tela inteira) e é o que o usuário pediu ao apontar a faixa morta. */
.grade--auto {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ================================================== alvo: notebook de 14" */
/* A máquina do escritório é um 14", que na prática dá 1366×768 com a barra do
   navegador comendo altura — sobra perto de 620px úteis. O desenho original
   veio de tela grande e gastava altura: o painel da farmácia empurrava o
   gráfico para baixo da dobra.

   O ajuste é só de ritmo vertical: nada encolhe de fonte a ponto de perder
   legibilidade (o corpo fica em 13px), e a largura máxima do conteúdo desce
   para não esticar demais em monitor grande.

   Medido pelo que tem de caber sem rolar: cabeçalho + quatro indicadores +
   filtro + o primeiro cartão. */
@media (max-height: 800px) {
  :root {
    --topo-altura: 46px;
  }

  /* O corpo volta aos 13px daqui. O tráfego era mais folgado porque rodava em
     monitor de mesa; nesta máquina o que cabe vale mais que o conforto. */
  body { font-size: 13px; }

  .conteudo { padding: .75rem 1rem 1.2rem; }

  .conteudo__cabecalho {
    padding-bottom: .55rem;
    margin-bottom: .7rem;
  }
  .conteudo__titulo { font-size: 1.15rem; }

  .cartao { padding: .75rem .85rem; }
  .cartao--tabela .cartao__cabecalho-tabela { padding: .5rem .85rem; }
  .grade { gap: .6rem; }

  /* O número do indicador é o que mais gasta altura, e é o que menos precisa
     de tamanho: já está isolado num cartão. */
  .indicador { padding: .55rem .75rem; }
  .indicador__valor { font-size: 1.4rem; }
  .indicador__rotulo { margin-bottom: .2rem; }

  .filtros { padding: .6rem .75rem; }
  .formulario { gap: .6rem; }
  .campo-grupo { margin-bottom: .55rem; }

  /* Controles voltam à altura antiga: são dezenas por tela de cadastro, e
     2px cada um já valem uma linha de tabela. */
  .campo,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="date"], input[type="datetime-local"],
  input[type="search"], select { height: 30px; line-height: 28px; }
  .botao { height: 29px; }
  .botao--largo { height: 33px; }

  /* A tabela é onde mais linhas cabendo faz diferença: cada 4px por linha
     rende uma linha inteira a mais a cada dez. */
  .tabela th,
  .tabela td { padding: .34rem .6rem; }
  .tabela__ordenavel a { padding: .34rem .6rem; }

  .lateral__item { height: 32px; }
  .lateral__itens .lateral__item { height: 29px; }
  .lateral__titulo { margin: .6rem 0 .2rem; }
  .lateral__secao-gatilho { height: 26px; margin-top: .35rem; }
}

/* O `@media (max-width: 1500px)` que existia aqui saiu junto com o teto de
   1500px: com `max-width: 2200px` e `width: 100%`, qualquer tela abaixo de
   2200px já preenche sozinha. A regra virou redundante no mesmo instante. */

/* ------------------------------------------------------------------ reset */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Barras de rolagem invisíveis em todo o sistema, como no QORE. A rolagem
   continua funcionando por roda, teclado e gesto — só o desenho da barra some,
   e com ele o pulo de layout que aparece quando a barra entra e sai. */
* {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* Edge legado */
}
*::-webkit-scrollbar {          /* Chrome, Edge, Safari */
  width: 0;
  height: 0;
  display: none;
}

/* 13,5px em vez de 13px: o tráfego respira um pouco mais que o desenho antigo
   (lá o `html` ia a 14px). Tudo o mais está em rem, então sobe junto. O bloco
   `@media (max-height: 800px)` devolve os 13px na máquina de 14" do escritório,
   onde a densidade vale mais que o conforto. */
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--fundo);
  /* Os dois do tráfego: sem eles a pilha do sistema fica pastosa ao lado do
     que a Inter entregava. */
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}

h1, h2, h3, h4 { margin: 0 0 .4rem; line-height: 1.3; font-weight: 600; }
h1 { font-size: 1.3rem; }
h2 { font-size: 1rem; }
h3 { font-size: .9rem; }
p { margin: 0 0 .7rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--azul-link); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--azul-vivo);
  outline-offset: 2px;
  border-radius: var(--raio-pequeno);
}

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--azul-solido);
  color: #fff;
  padding: .6rem 1rem;
  z-index: 200;
}
.pular-para-conteudo:focus { left: 0; }

/* ----------------------------------------------------------------- layout */
/* Lateral ocupa a altura toda, como no QORE; o topo vive dentro da área de
   trabalho, não atravessando a tela. */
.app {
  display: grid;
  grid-template-columns: var(--lateral-largura) minmax(0, 1fr);
  grid-template-areas: "lateral area";
  min-height: 100vh;
}

/* ---- lateral recolhida -------------------------------------------------- */
/* Pedido do usuário: "o menu lateral deve fechar e ter a opção de travar se
   quiser", apontando o sistema de chamados de origem. Lá a lateral é SEMPRE
   uma faixa de 68px e abre inteira no hover; aqui é isso mais o pino, que
   trava aberta quem preferir.

   ## `position: fixed`, e é o detalhe que faz funcionar

   A primeira tentativa deixou a lateral no fluxo do grid e só mudou a largura
   dela no hover. O resultado foi o que o usuário viu: o conteúdo ao lado
   aparecia cortado pela metade, porque a lateral crescia empurrando e
   cobrindo o que estava embaixo.

   Tirando-a do fluxo, ela flutua sobre a página e **nada mais se mexe** — a
   coluna do grid continua com os 60px reservados, e o conteúdo fica onde
   estava. É exatamente o que a origem faz com `margin-left` fixo no
   `.main-content`. */
.recolher-lateral .app { grid-template-columns: var(--lateral-largura-recolhida) minmax(0, 1fr); }

.recolher-lateral .lateral {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--lateral-largura-recolhida);
}
.recolher-lateral .lateral:hover,
.recolher-lateral .lateral:focus-within {
  width: var(--lateral-largura);
  box-shadow: 12px 0 28px rgb(15 23 42 / 22%);
}

/* Os textos somem por OPACIDADE e não por `display: none`: com display, o
   ícone salta de posição a cada abertura, porque o rótulo entra empurrando.
   `pointer-events: none` para o texto invisível não capturar clique. */
.recolher-lateral .lateral :is(
  .lateral__marca-texto, .lateral__titulo, .lateral__item > span,
  .lateral__seta, .lateral__secoes, .menu-usuario__nome, .menu-usuario__seta
) {
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .15s ease;
}
.recolher-lateral .lateral:hover :is(
  .lateral__marca-texto, .lateral__titulo, .lateral__item > span,
  .lateral__seta, .lateral__secoes, .menu-usuario__nome, .menu-usuario__seta
),
.recolher-lateral .lateral:focus-within :is(
  .lateral__marca-texto, .lateral__titulo, .lateral__item > span,
  .lateral__seta, .lateral__secoes, .menu-usuario__nome, .menu-usuario__seta
) {
  opacity: 1;
  pointer-events: auto;
  transition-delay: .05s;
}

/* O menu do usuário fica fechado enquanto ela está estreita: aberto, ele
   escapa da faixa de 60px e flutua solto sobre o conteúdo. */
.recolher-lateral .lateral:not(:hover):not(:focus-within) .menu-usuario__lista {
  display: none;
}

/* O pino ------------------------------------------------------------------ */
/* Trava a lateral aberta. A origem não tinha isso — lá ela é sempre estreita e
   só abre no hover —, e é o que o usuário pediu a mais: quem trabalha o dia
   inteiro numa tela só não quer a lateral abrindo a cada passagem de mouse.

   Ancorado na `.lateral` (que é `sticky`/`fixed`, logo posicionada) e não na
   marca: o pino é IRMÃO dela no HTML, porque botão dentro de âncora é
   inválido. */
.lateral__pino {
  position: absolute;
  top: calc(var(--topo-altura) / 2);
  right: 8px;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgb(255 255 255 / 55%);
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao),
              opacity var(--transicao);
}
.lateral__pino svg { width: 15px; height: 15px; }
.lateral__pino:hover { background: rgb(255 255 255 / 12%); color: #fff; }
/* Travada, o pino fica cravado; solto, deitado — a metáfora do alfinete de
   mural, que dispensa legenda. */
.lateral__pino[aria-pressed="false"] svg { transform: rotate(45deg); }

/* Estreita, ele só aparece quando a lateral abre: em 60px ele cobriria a
   sigla, que é a âncora de identidade da tela. O caminho de volta continua
   existindo — basta passar o mouse, que é como a lateral abre. */
.recolher-lateral .lateral:not(:hover):not(:focus-within) .lateral__pino {
  opacity: 0;
  pointer-events: none;
}

/* Texto que só o leitor de tela precisa. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.area {
  grid-area: area;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--fundo);
}

/* lateral --------------------------------------------------------------- */
/* Navy chapado com filete claríssimo, como a `.sidebar` do tráfego. O filete
   laranja de 3px que existia aqui era a assinatura QORE e saiu junto com o
   gradiente. */
/* `transition` na largura, e só nela: recolher é uma escolha do usuário e
   merece o movimento que explica o que aconteceu. Animar a coluna do grid
   junto faria o conteúdo refluir quadro a quadro — caro e feio. */
.lateral {
  grid-area: lateral;
  transition: width var(--transicao);
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--lateral-fundo);
  border-right: 1px solid var(--lateral-borda);
  box-shadow: var(--sombra-lateral);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 100;
}

.lateral__marca {
  position: relative;
  display: flex;
  align-items: center;
  gap: .625rem;
  height: var(--topo-altura);
  padding: 0 1rem;
  flex: none;
  border-bottom: 1px solid var(--lateral-borda);
  color: #fff;
}
.lateral__marca:hover { text-decoration: none; }

/* O quadrado azul da marca é o único ponto de cor cheia sobre o navy — é o
   `.brand-icon` do tráfego. Antes era um branco translúcido que se perdia. */
.lateral__sigla {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--lateral-acento);
  color: #fff;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .4px;
  flex: none;
  box-shadow: 0 1px 3px rgb(29 78 216 / 35%);
}

.lateral__marca-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.lateral__marca-texto strong {
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lateral__marca-texto small {
  font-size: .64rem;
  color: var(--lateral-texto-fraco);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 500;
}

/* Só a lista de módulos rola; marca e rodapé ficam fixos. O `min-height: 0` é
   o que permite este bloco encolher — sem ele o flex recusa a redução e o
   rodapé sai para fora da tela. */
.lateral__modulos {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: .6rem .55rem;
  overscroll-behavior: contain;
}

.lateral__titulo {
  margin: .85rem 0 .25rem;
  padding: 0 .7rem;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--lateral-texto-fraco);
  font-weight: 700;
}

.lateral__itens { list-style: none; margin: 0; padding: 0; }

/* Item arredondado dentro de uma calha, como a `.nav-link` do tráfego: a
   marca do item ativo é o azul do fundo, e o filete azul à esquerda encosta
   na borda da calha. */
.lateral__item {
  display: flex;
  align-items: center;
  gap: .6rem;
  height: 36px;
  padding: 0 .75rem;
  margin-bottom: 2px;
  border-radius: 7px;
  color: var(--lateral-texto);
  font-size: .84rem;
  font-weight: 500;
  position: relative;
  transition: background var(--transicao), color var(--transicao);
}
.lateral__item:hover { background: var(--lateral-hover); color: #fff; text-decoration: none; }
.lateral__item--ativo {
  background: var(--lateral-ativo);
  color: #fff;
  font-weight: 600;
}
.lateral__item--ativo .icone { color: #93c5fd; }
.lateral__item--ativo::before {
  content: "";
  position: absolute;
  left: -.55rem;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--lateral-acento);
}

/* hierarquia: sistema > módulo interno > tela ---------------------------- */
/* O sistema fica na margem; as telas dele recuam. Sem o recuo, "Compras" e
   "Controle Farmácia" ficam no mesmo nível e a hierarquia some — foi como
   apareceu na primeira versão. */


/* O nome do sistema é um GATILHO, não um link: abre e fecha o bloco dele, e
   fica marcado enquanto está aberto. Ver a nota no `base.html`.

   Herda `.lateral__item` para ficar idêntico aos vizinhos, e desfaz o que o
   navegador impõe a um `<button>` — largura própria, fonte própria, texto
   centrado e a borda de foco padrão. Sem isso ele salta da coluna. */
.lateral__sistema {
  width: 100%;
  background: transparent;
  border: 0;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

/* DOIS estados, e são coisas diferentes:

     aria-expanded="true"   o bloco está aberto — o que você clicou
     aria-current="true"    a tela em que você está

   Mais de um bloco pode estar aberto ao mesmo tempo (abrir um não fecha os
   outros, de propósito: comparar dois sistemas é um caso real). Com o realce
   saindo só do `aria-expanded`, dois sistemas ficariam pintados como se a
   pessoa estivesse nos dois.

   Por isso o aberto ganha FUNDO e o atual ganha o FILETE — o mesmo filete do
   item ativo, que já significa "aqui" na coluna. Os dois se somam quando são
   o mesmo sistema, que é o caso comum.

   Os dois saem de atributo e não de classe: o `app.js` já alterna
   `aria-expanded` para abrir e fechar, e derivar o visual dele é o que
   impede a cor de ficar para trás quando o bloco abre sem recarregar. */
.lateral__sistema[aria-expanded="true"] {
  color: #fff;
  background: var(--lateral-hover);
}
/* O mesmo azul claro do ícone do item ativo. A lateral não segue o tema, e
   por isso o valor é literal, como os outros `--lateral-*`. */
.lateral__sistema[aria-expanded="true"] .icone { color: #93c5fd; }

.lateral__sistema[aria-current="true"] { color: #fff; }
.lateral__sistema[aria-current="true"]::before {
  content: "";
  position: absolute;
  left: -.55rem;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--lateral-acento);
}


/* As seções do sistema aberto recuam sob ele, com um filete que amarra o
   bloco ao nome — sem isso, dentro do controle operacional não se lê de qual
   sistema são as sete seções. */
.lateral__secoes {
  margin: .1rem 0 .5rem .95rem;
  padding-left: .45rem;
  border-left: 1px solid var(--lateral-borda);
}
/* O `hidden` declarado, e não deixado para o navegador — a mesma convenção
   defensiva de `.lateral-fundo[hidden]` e `.menu-usuario__lista[hidden]`.

   O `display: none` de `[hidden]` vem da folha do navegador, e QUALQUER
   `display` escrito aqui ganha dele. Agora que o bloco de todos os sistemas
   está no DOM, um `display: flex` acrescentado um dia para arrumar um
   espaçamento traria ~40 links de sistemas fechados de volta à ordem de foco:
   invisíveis na tela e alcançáveis pelo Tab, sem erro em lugar nenhum. */
.lateral__secoes[hidden],
.lateral__itens[hidden] { display: none; }
.lateral__sistema span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Na raiz do sistema (a seção sem título) as telas não recuam: não há título
   acima delas de que recuar. */
.lateral__itens--raiz .lateral__item { padding-left: .75rem; }

/* A seção também recolhe, e pelo mesmo mecanismo. Ela é o TÍTULO que antes
   era um `<p class="lateral__titulo">`: mantém o versalete e o tom fraco para
   continuar lendo como título, mas é um botão — o controle operacional tem
   sete seções e vinte itens, e despejá-los todos de uma vez não cabe num 14".
   Recuo intermediário: o sistema fica na margem, a seção recua um pouco, a
   tela recua o dobro. */
.lateral__secao-gatilho {
  width: 100%;
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  height: 30px;
  margin-top: .5rem;
  padding-left: 1.35rem;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--lateral-texto-fraco);
}
.lateral__secao-gatilho span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lateral__secao-gatilho:hover { color: #fff; }
.lateral__secao-gatilho .lateral__seta { width: 13px; height: 13px; }

.lateral__seta {
  flex: none;
  width: 15px;
  height: 15px;
  opacity: .7;
  transition: transform var(--transicao);
}
/* Seta para baixo = aberto; para a esquerda = recolhido.

   Esta regra quase se perdeu: ela dividia o seletor com
   `.lateral__modulo-gatilho`, que é classe morta, e uma limpeza por padrão de
   texto levou as duas juntas — a seta da seção parou de girar e o `transition:
   transform` acima ficou sem efeito, sem nada quebrar nem nenhum teste falhar.

   É o defeito que a revisão adversarial da mudança pegou, e a lição vale:
   apagar CSS por regex leva o vizinho quando o seletor é uma lista. */
.lateral__secao-gatilho[aria-expanded="false"] .lateral__seta {
  transform: rotate(-90deg);
}

/* As telas de dentro de um módulo recuam e ficam um pouco menores. */
.lateral__itens .lateral__item {
  padding-left: 2.1rem;
  height: 32px;
  font-size: .8rem;
}

/* rodapé da lateral: identificação de quem está operando o sistema ------- */
/* Tom um pouco mais fundo que o corpo da lateral — é o `--bg-sidebar-2` do
   tráfego, que separa o rodapé da lista sem precisar de mais um filete. */
.lateral__rodape {
  flex: none;
  border-top: 1px solid var(--lateral-borda);
  background: var(--lateral-fundo-rodape);
  padding: .55rem .6rem .4rem;
}


.icone { width: 18px; height: 18px; flex: none; stroke-width: 1.7; }

.lateral-fundo {
  position: fixed;
  inset: 0;
  background: rgb(15 23 42 / 45%);
  z-index: 90;
}
.lateral-fundo[hidden] { display: none; }

/* topo ------------------------------------------------------------------ */
/* Barra branca sobre o campo cinza do conteúdo — a `.top-header` do tráfego. */
.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: .75rem;
  height: var(--topo-altura);
  padding: 0 1.25rem;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  flex: none;
}

.topo__menu {
  display: none;
  background: transparent;
  border: 0;
  padding: .45rem;
  cursor: pointer;
  color: var(--tinta-media);
}

.hamburguer,
.hamburguer::before,
.hamburguer::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  content: "";
}
.hamburguer { position: relative; }
.hamburguer::before { position: absolute; top: -6px; }
.hamburguer::after { position: absolute; top: 6px; }

.topo__contexto { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.topo__contexto strong {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topo__contexto small {
  font-size: .7rem;
  color: var(--tinta-media);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topo__acoes { margin-left: auto; display: flex; align-items: center; gap: .6rem; }

/* relógio da operação ---------------------------------------------------- */
/* A `.datetime-display` do tráfego: pastilha do tom do fundo da página, com
   borda, dentro da barra branca. */
.relogio {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .75rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  background: var(--fundo);
  color: var(--tinta-media);
}
.relogio__icone { width: 17px; height: 17px; flex: none; color: var(--azul-medio); }
.relogio__texto { display: flex; flex-direction: column; line-height: 1.15; }
.relogio__texto strong {
  font-size: .84rem;
  font-weight: 700;
  color: var(--tinta);
  /* Largura fixa por dígito: sem isso o texto treme a cada segundo. */
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
/* Sem `text-transform: capitalize`: em pt-BR isso viraria "27 De Julho De
   2026". Só a primeira letra sobe, e isso é feito no servidor e no JS. */
.relogio__texto small {
  font-size: .64rem;
  color: var(--tinta-fraca);
  white-space: nowrap;
}

/* menu do usuário — vive no rodapé da lateral, sobre o gradiente --------- */
.menu-usuario { position: relative; }

.menu-usuario__gatilho {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--raio-pequeno);
  padding: .4rem .5rem;
  color: var(--lateral-texto);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background var(--transicao);
}
.menu-usuario__gatilho:hover { background: var(--lateral-hover); color: #fff; }

.menu-usuario__nome {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.25;
  min-width: 0;
  flex: 1;
}
.menu-usuario__nome strong {
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.menu-usuario__nome small { font-size: .66rem; color: var(--lateral-texto-fraco); }

.menu-usuario__seta {
  width: 15px;
  height: 15px;
  flex: none;
  opacity: .65;
  transition: transform var(--transicao);
}
.menu-usuario__gatilho[aria-expanded="true"] .menu-usuario__seta { transform: rotate(180deg); }

/* Abre para cima: o gatilho está colado no rodapé da tela. */
.menu-usuario__lista {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + .35rem);
  min-width: 180px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-forte);
  padding: .3rem;
  z-index: 60;
}
.menu-usuario__lista[hidden] { display: none; }
.menu-usuario__lista a,
.menu-usuario__sair {
  display: block;
  width: 100%;
  text-align: left;
  padding: .45rem .6rem;
  border: 0;
  background: transparent;
  border-radius: var(--raio-pequeno);
  color: var(--tinta-media);
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
}
.menu-usuario__lista a:hover,
.menu-usuario__sair:hover { background: var(--superficie-alt); text-decoration: none; }
.menu-usuario__sair { color: var(--erro); }

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--azul-solido);
  flex: none;
}
.avatar--iniciais {
  display: grid;
  place-items: center;
  font-size: .68rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .3px;
}
.avatar--grande { width: 72px; height: 72px; font-size: 1.3rem; }

/* Sobre o navy o azul cheio se lê bem — é o `.user-avatar` do tráfego. (Antes
   a lateral era um gradiente que ia do navy ao azul vivo, e o avatar azul
   sumia num dos extremos; por isso ele era translúcido.) */
.lateral .avatar { background: var(--lateral-acento); }
.lateral .avatar--iniciais { color: #fff; }

/* conteúdo -------------------------------------------------------------- */
/* A FAIXA VAZIA DO LADO DIREITO, e por que ela existia.
 *
 * Aqui havia `max-width: 1500px` sem `margin: 0 auto`. Numa tela de 1860px
 * sobravam 360px, e como nada centralizava a coluna, a sobra caía INTEIRA à
 * direita — uma faixa morta em todas as telas do sistema. O usuário viu e
 * perguntou o que era.
 *
 * A razão original está certa e continua valendo, mas só para o que ela
 * descrevia: "em 14 polegadas o olho perde a linha varrendo uma tabela larga
 * demais". Isso é sobre TEXTO e LINHA DE TABELA, não sobre a tela toda — e o
 * preço estava sendo pago por painel, grade de cartões e gráfico, que só têm
 * a ganhar com a largura (mais colunas de cartão, mais meses no eixo).
 *
 * Então o teto sobe muito e passa a CENTRALIZAR. Em qualquer monitor de
 * trabalho (até 2200px) o conteúdo preenche a tela e a faixa some; num
 * ultrawide de 3440px ele para de esticar e centraliza, que é o que evita uma
 * linha de tabela de três metros. Quem cuida da leitura do texto agora é o
 * teto por bloco, logo abaixo — a régua fica onde o problema está. */
.conteudo {
  flex: 1;
  padding: 1rem 1.25rem 2rem;
  max-width: 2200px;
  margin: 0 auto;
  width: 100%;
}

/* O teto de LEITURA, aplicado onde ele importa: linha de texto corrido.
 * Cerca de 90 caracteres — acima disso o olho erra a volta da linha. Cartão,
 * tabela, grade e gráfico não têm teto: são varridos, não lidos em linha. */
.conteudo__subtitulo,
.cartao__subtitulo,
.cartao__nota,
.texto-vazio { max-width: 90ch; }

.conteudo__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: .9rem;
  padding-bottom: .75rem;
  margin-bottom: .9rem;
  border-bottom: 1px solid var(--borda);
}

.conteudo__titulo { margin: 0; color: var(--tinta); letter-spacing: -.015em; }
.conteudo__subtitulo { color: var(--tinta-media); font-size: .8rem; margin: .2rem 0 0; }
.conteudo__subtitulo--alerta { color: var(--laranja-forte); }
.conteudo__acoes { display: flex; gap: .45rem; flex-wrap: wrap; }

.trilha { font-size: .72rem; color: var(--tinta-fraca); margin: 0 0 .15rem; }
.trilha a { color: var(--tinta-fraca); }
.trilha a:hover { color: var(--azul-link); }

/* ------------------------------------------------------------ componentes */
/* Cartão branco de raio 10 sobre o campo cinza, com a sombra rasa do tráfego:
   é ela que separa, não a borda. */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: .95rem 1.1rem;
}
.cartao + .cartao { margin-top: .8rem; }
.cartao--estreito { max-width: 540px; }
/* Flex porque vários títulos trazem um ícone, um ponto de cor ou um contador
   ao lado do texto — no fluxo normal cada um alinhava pela linha de base de um
   jeito. `wrap` para o par não estourar a largura do cartão. */
.cartao__titulo {
  margin-bottom: .3rem;
  color: var(--tinta);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}
.cartao__titulo .icone { color: var(--azul-medio); }
.cartao__subtitulo { color: var(--tinta-media); font-size: .8rem; margin-bottom: .9rem; }
.cartao__nota { margin-top: 1.1rem; font-size: .76rem; color: var(--tinta-fraca); text-align: center; }

.cartao--erro { max-width: 460px; text-align: center; margin: 0 auto; }
.erro__codigo { font-size: 2.8rem; font-weight: 800; color: var(--borda-forte); margin: 0; line-height: 1; }
.cartao--erro .botao { margin-top: 1rem; }

/* indicadores ------------------------------------------------------------ */
.grade--cartoes { margin-bottom: 1.1rem; }

/* O `.stat-card` do tráfego: cartão branco com filete colorido em CIMA, rótulo
   pequeno em versalete e o número grande na cor do filete.

   O HTML das ~60 telas traz o valor antes do rótulo, e não se reescreve tela
   para mudar visual — `order` no rótulo inverte a leitura sem tocar em uma
   linha de template. */
.indicador {
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-top: 3px solid var(--azul-medio);
  border-radius: var(--raio);
  padding: .75rem .9rem;
  box-shadow: var(--sombra);
  transition: box-shadow var(--transicao), transform var(--transicao);
}
.indicador:hover { transform: translateY(-1px); box-shadow: var(--sombra-media); }
.indicador__valor {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--azul-medio);
}
.indicador__valor a { color: inherit; }
/* `flex` com `space-between` para o ícone do canto direito — ver
   `.indicador__marca` logo abaixo. Num cartão sem ícone o flex não muda
   nada: um filho só, alinhado à esquerda. */
.indicador__rotulo {
  order: -1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
  font-weight: 700;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tinta-fraca);
  margin: 0 0 .3rem;
}

/* O ícone no canto superior direito — o `.stat-icon` do dashboard de origem
   do controle operacional. Fica DENTRO da linha do rótulo e empurrado para a
   direita, e não numa linha própria: numa linha própria ele roubaria altura
   de um cartão que tem só três linhas.

   Na cor do filete, para o cartão se ler de longe pela cor antes de se ler o
   rótulo. */
.indicador__marca {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--indicador-acento, var(--azul-medio));
  opacity: .9;
}

/* ---- Acento por SÉRIE, e não por tom ----------------------------------- */
/* `.indicador--sucesso/--erro/--info` dizem se o número é BOM ou RUIM. Estes
   dizem QUAL MÉTRICA é — que é o que o dashboard do controle operacional faz:
   Recolhimentos azul, Socorros laranja, Acidentes vermelho, Otimizações
   verde, sempre, independentemente de o número ter subido ou descido.
   (A leitura de "subiu é pior" está na seta da variação, que é onde ela deve
   estar: num cartão só, e não na identidade da métrica.)

   Os tokens são os das SÉRIES DE GRÁFICO, e é o ponto: a fatia da rosca de
   "Acidentes" usa `--serie-2`, e este cartão também. O olho liga os dois
   porque são a mesma cor por construção — na origem eram dois hex escritos à
   mão, um no CSS e outro dentro do JavaScript. */
.indicador--serie-1 { --indicador-acento: var(--serie-1); }
.indicador--serie-2 { --indicador-acento: var(--serie-2); }
.indicador--serie-3 { --indicador-acento: var(--serie-3); }
.indicador--serie-4 { --indicador-acento: var(--serie-4); }
.indicador--serie-5 { --indicador-acento: var(--serie-5); }
.indicador--serie-6 { --indicador-acento: var(--serie-6); }

.indicador[class*="indicador--serie-"] { border-top-color: var(--indicador-acento); }
.indicador[class*="indicador--serie-"] .indicador__valor { color: var(--indicador-acento); }

/* O termo de comparação por extenso, ao lado da seta: "vs ontem (8)". Ele é
   o que torna o percentual conferível — sozinho, "-65,1%" não diz de quanto
   para quanto. Peso normal para o número da variação continuar sendo o que se
   lê primeiro. */
.indicador__variacao span {
  font-weight: 400;
  color: var(--tinta-fraca);
}
.indicador__ajuda { font-size: .7rem; color: var(--tinta-fraca); margin: .35rem 0 0; }
/* O `<small>` da unidade e do prefixo: "R$" e "h" não competem com o número. */
.indicador__valor small { font-size: .85rem; font-weight: 500; color: var(--tinta-fraca); }

/* A variação contra o mês anterior, do dashboard geral do RH.

   A cor é fixa por SENTIDO e não por indicador: nos quatro que a usam, subir
   é pior. Um painel em que a seta para cima é verde num cartão e vermelha no
   outro obriga a ler o rótulo antes de cada número, que é o oposto do que um
   painel serve para fazer. */
.indicador__variacao {
  margin: .45rem 0 0;
  font-size: .72rem;
  font-weight: 700;
  color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums;
}
.indicador__variacao span { font-weight: 400; }
.indicador__variacao--piorou { color: var(--erro); }
.indicador__variacao--melhorou { color: var(--sucesso); }

/* O selo de meta no rodapé do cartão — a faixa larga do dashboard de origem.
   Fundo tingido e não texto solto: é o veredicto, e precisa ser lido antes do
   resto da ajuda. `margin-top: auto` cola no rodapé para os selos de quatro
   cartões de alturas diferentes ficarem alinhados entre si. */
.indicador__selo {
  margin: .55rem 0 0;
  margin-top: auto;
  padding: .3rem .45rem;
  border-radius: var(--raio-pequeno);
  font-size: .68rem;
  font-weight: 700;
  text-align: center;
}
.indicador__selo--sucesso { background: var(--sucesso-fundo); color: var(--sucesso); }
.indicador__selo--erro { background: var(--erro-fundo); color: var(--erro); }

/* formulários ----------------------------------------------------------- */
.formulario { display: grid; gap: .9rem; }

/* `align-content: start` empilha as linhas no topo. Sem isso, um campo sem
   texto de ajuda distribui o espaço sobrando e sai desalinhado dos vizinhos
   que têm ajuda — dentro de .grade todas as células têm a mesma altura. */
.campo-grupo { display: grid; gap: .25rem; align-content: start; }
.campo-rotulo {
  font-size: .76rem;
  font-weight: 600;
  color: var(--tinta);
  /* Rótulo de uma linha em todas as colunas: se um quebrar em duas, os
     campos abaixo dele descem e a linha inteira perde o alinhamento. */
  min-height: 1.15em;
}
.obrigatorio { color: var(--erro); }

.campo,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="search"],
select,
textarea {
  width: 100%;
  /* Altura fixa em vez de só padding: o navegador desenha input e select com
     métricas diferentes, e lado a lado a diferença aparece. */
  height: 34px;
  padding: 0 .75rem;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  background: var(--superficie);
  font: inherit;
  font-size: .83rem;
  line-height: 32px;
  color: inherit;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

select { padding-right: .35rem; }
input[type="file"] { height: auto; padding: .4rem .6rem; line-height: 1.4; }
textarea { height: auto; padding: .48rem .75rem; line-height: 1.45; }
/* O halo do tráfego: 3px de azul a 10%. */
.campo:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--azul-medio);
  box-shadow: 0 0 0 3px rgb(29 78 216 / 12%);
}
input:disabled, select:disabled, textarea:disabled { background: var(--superficie-alt); }

textarea { min-height: 88px; resize: vertical; }

/* Ajuda e erro ocupam a mesma faixa: com alturas diferentes, uma coluna com
   ajuda e outra sem empurrariam os campos da linha seguinte de forma desigual. */
.campo-ajuda, .campo-erro { min-height: 1em; }

.campo-caixa { display: flex; align-items: center; gap: .45rem; font-size: .82rem; cursor: pointer; }
.campo-caixa input { width: auto; }

.campo-ajuda { margin: 0; font-size: .72rem; color: var(--tinta-fraca); }
.campo-erro { margin: 0; font-size: .74rem; color: var(--erro); font-weight: 500; }
.campo-grupo--erro .campo,
.campo-grupo--erro input,
.campo-grupo--erro select,
.campo-grupo--erro textarea { border-color: var(--erro); }

.formulario__acoes { display: flex; gap: .5rem; flex-wrap: wrap; }

.aviso-tentativas {
  margin: 0;
  font-size: .78rem;
  color: var(--atencao);
  background: var(--atencao-fundo);
  border-left: 4px solid var(--atencao);
  padding: .55rem .75rem;
  border-radius: var(--raio-pequeno);
}

/* botões ---------------------------------------------------------------- */
/* `.btn-primary-custom` / `.btn-outline-custom` do tráfego: raio 6, peso 600,
   um pouco mais altos que o desenho antigo. */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  height: 32px;
  padding: 0 1rem;
  border: 1px solid transparent;
  border-radius: var(--raio-pequeno);
  font: inherit;
  font-weight: 600;
  font-size: .8rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transicao), border-color var(--transicao),
              color var(--transicao), opacity var(--transicao);
}
.botao:hover { text-decoration: none; }
.botao:disabled { opacity: .55; cursor: not-allowed; }
.botao--largo { width: 100%; height: 36px; }
.botao--pequeno { height: 26px; padding: 0 .65rem; font-size: .73rem; }

.botao--principal { background: var(--azul-solido); color: #fff; }
.botao--principal:hover:not(:disabled) { background: var(--azul-hover); color: #fff; }

/* O outline do tráfego fica neutro em repouso e azula no hover — é o que
   diferencia "cancelar" de "ação secundária de verdade". */
.botao--neutro {
  background: var(--superficie);
  color: var(--tinta);
  border-color: var(--borda-forte);
  font-weight: 500;
}
.botao--neutro:hover:not(:disabled) {
  background: var(--fundo);
  border-color: var(--azul-medio);
  color: var(--azul-medio);
}

.botao--perigo { background: var(--erro-solido); color: #fff; }
.botao--perigo:hover:not(:disabled) { background: var(--erro-solido-forte); color: #fff; }

.botao--exportar { background: var(--verde); color: #fff; }
.botao--exportar:hover:not(:disabled) { background: var(--verde-forte); color: #fff; }

/* `--laranja` puro dá 3,6:1 com branco por cima e reprova; o tom forte dá 5,2. */
.botao--destaque { background: var(--laranja-forte); color: #fff; }
.botao--destaque:hover:not(:disabled) { background: var(--laranja-escuro); color: #fff; }

/* mensagens ------------------------------------------------------------- */
.mensagens { display: grid; gap: .45rem; margin-bottom: 1.1rem; }

/* O `.alert` do tráfego: fundo tingido, filete de 4px à esquerda, sem borda em
   volta. */
.mensagem {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .6rem .9rem;
  border-radius: var(--raio-pequeno);
  border-left: 4px solid;
  font-size: .82rem;
}
.mensagem__texto { flex: 1; }
.mensagem__fechar {
  background: transparent;
  border: 0;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  opacity: .55;
}
.mensagem__fechar:hover { opacity: 1; }

/* O texto de cada estado usa o MESMO token da cor do filete, e não um hex
   escuro fixo: no tema escuro o fundo tingido também escurece, e um verde
   #14532d sobre um verde #123420 é uma mancha só. Era assim aqui — o tema
   escuro tinha as mensagens ilegíveis. Cada par foi medido: 4,6 / 5,3 / 4,5 /
   7,2 no claro e 7,8 / 5,6 / 8,1 / 7,9 no escuro. */
.mensagem--sucesso { background: var(--sucesso-fundo); border-color: var(--sucesso); color: var(--sucesso); }
.mensagem--erro    { background: var(--erro-fundo);    border-color: var(--erro);    color: var(--erro); }
.mensagem--atencao { background: var(--atencao-fundo); border-color: var(--atencao); color: var(--atencao); }
.mensagem--info,
.mensagem--depuracao { background: var(--info-fundo); border-color: var(--info); color: var(--info); }

/* tabelas ---------------------------------------------------------------- */
.cartao--tabela { padding: 0; overflow: hidden; }
.tabela-rolagem { overflow-x: auto; }

.tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .8rem; }
.tabela th,
.tabela td { padding: .5rem .8rem; text-align: left; vertical-align: middle; }

/* Cabeçalho quase branco com o rótulo em versalete cinza — o do tráfego. Aqui
   ele era cinza-médio chapado, que puxava demais o olho para a moldura. */
.tabela thead th {
  position: sticky;
  top: 0;
  background: var(--tabela-cabecalho);
  color: var(--tabela-cabecalho-texto);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
  z-index: 2;
}

.tabela tbody td { border-bottom: 1px solid var(--tabela-linha); }
/* A zebra bege era a assinatura QORE. O tráfego marca só a linha sob o cursor;
   a zebra fica quase imperceptível, só o bastante para o olho não perder a
   linha numa tabela larga, e o hover (azul-claro) ganha dela sem esforço. */
.tabela tbody tr:nth-child(even) { background: var(--tabela-zebra); }
.tabela tbody tr { transition: background .12s ease; }
.tabela tbody tr:hover { background: var(--tabela-hover); }
.tabela small { color: var(--tinta-fraca); font-size: .73rem; }
.tabela code {
  font-family: var(--fonte-mono);
  font-size: .72rem;
  background: var(--superficie-alt);
  padding: .05rem .3rem;
  border-radius: 3px;
}
.tabela__acoes-coluna { width: 1%; }
.tabela__acoes { white-space: nowrap; display: flex; gap: .3rem; }
.tabela__vazia { text-align: center; color: var(--tinta-fraca); padding: 2.2rem 1rem; font-style: italic; }
/* Data e hora numa coluna só: sem o `nowrap` "11/08/2026 10:10" quebra em
   duas linhas numa tabela larga e a linha inteira fica com o dobro da altura.
   `tabular-nums` para a coluna de datas descer alinhada. */
.tabela__data { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* A linha de subtotal de um grupo dentro da tabela — a folha do convênio a
   usa por colaborador com mais de uma parcela no mês.

   Fundo tingido no tom do CABEÇALHO, e não numa cor própria: assim o olho
   pula de subtotal em subtotal sem ler o resto, e a linha não se confunde com
   a do cursor (que é azul-claro). A regra vence a zebra, senão o subtotal em
   linha par ficaria igual às outras. */
.tabela tbody tr.tabela__subtotal,
.tabela tbody tr.tabela__subtotal:nth-child(even) {
  background: var(--tabela-cabecalho);
}
.tabela tbody tr.tabela__subtotal:hover { background: var(--tabela-cabecalho); }
.tabela__subtotal td { border-top: 1px solid var(--borda); }

/* O bloco de um colaborador com mais de uma parcela na folha do convênio.
   O filete à esquerda é o que impede duas linhas de mesmo nome de se lerem
   como registro duplicado: ele diz "isto é um grupo" antes de o olho chegar
   às colunas que diferenciam as linhas, que estão a seis colunas dali. */
.folha__agrupada > td:first-child {
  border-left: 3px solid var(--azul-medio);
}
.folha__fecha-grupo > td:first-child,
.folha__fecha-grupo > td:last-child {
  border-bottom: 2px solid var(--borda-forte);
}

/* A linha de continuação do mesmo colaborador: nome sem negrito e recuado.
   O negrito repetido, idêntico, na linha de baixo é o que fazia duas parcelas
   da mesma pessoa parecerem o mesmo registro lançado duas vezes. */
.folha__continuacao {
  padding-left: 1.4rem !important;
  color: var(--tinta-media);
}
.tabela--compacta { font-size: .76rem; margin-top: .4rem; }
.tabela--compacta th, .tabela--compacta td { padding: .3rem .5rem; }

.celula-usuario { display: flex; align-items: center; gap: .55rem; }
.celula-usuario div { display: flex; flex-direction: column; line-height: 1.25; }
.celula-usuario a { color: var(--tinta); }
.celula-usuario a:hover { color: var(--azul-link); }

/* filtros ---------------------------------------------------------------- */
/* A `.dash-filter` do tráfego é um cartão branco como os outros, não uma faixa
   cinza: sobre o campo cinza da página a faixa cinza sumia. */
.filtros {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: .7rem .9rem;
  margin-bottom: .8rem;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: flex-end;
}
.filtros__campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .7rem;
  flex: 1;
  min-width: 230px;
}
.filtros__campo { display: grid; gap: .25rem; }
.filtros__acoes { display: flex; gap: .45rem; }

/* ═══════════════════════════════════════════════════════════════════════
   PAINEL — o gabarito dos painéis do sistema
   ═══════════════════════════════════════════════════════════════════════

   Ordem de leitura, e ela vale para o painel geral e para o de cada módulo:

       .alertas      o que cobra alguém, primeiro e sempre
       .sistema      UM cartão por sistema: nome, os números dele, os atalhos

   Eram tres partes, e a do meio era um segundo bloco com o nome e o icone de
   cada sistema repetidos -- dez sistemas, vinte cartoes. Fundiu-se no cartao.

   O painel já foi um segundo menu: listava toda seção de todo sistema, com
   todos os itens — 81 pastilhas e 35 subtítulos para quem enxerga os dez
   módulos. A lateral já faz navegação; aqui é o quadro da empresa.

   Tudo em token: a lateral é a única parte do sistema que não segue o tema,
   e este bloco não usa nenhum valor fixo. Números em `tabular-nums` — sem
   isso a coluna de valores dança a cada atualização, que é o que faz um
   painel parecer amador. */

/* 1. alertas -------------------------------------------------------------- */
/* Faixa fina, não cartão: alerta é uma linha para ler e agir, e um cartão por
   alerta empurraria os números para fora da primeira dobra. */
.alertas { display: grid; gap: .35rem; margin-bottom: 1rem; }
.alertas:empty { display: none; }

.alerta {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .5rem .8rem;
  border-radius: var(--raio-pequeno);
  border-left: 3px solid currentColor;
  background: var(--superficie);
  font-size: .82rem;
}
.alerta__sistema {
  flex: none;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .85;
}
.alerta__texto { color: var(--tinta); }
.alerta__texto a { font-weight: 600; }

.alerta--erro    { color: var(--erro);    background: var(--erro-fundo); }
.alerta--atencao { color: var(--atencao); background: var(--atencao-fundo); }
.alerta--info    { color: var(--info);    background: var(--info-fundo); }
.alerta--sucesso { color: var(--sucesso); background: var(--sucesso-fundo); }

/* 2. números -------------------------------------------------------------- */
/* Os numeros de um sistema, DENTRO do cartao dele.

   TERCEIRA passada nesta tela. As duas anteriores: 81 pastilhas viraram 27, e
   os quadradinhos de numero viraram LINHAS -- o que acabou com o serrilhado
   DENTRO de cada cartao.

   O que sobrava era estrutural, e so se ve olhando a tela inteira: cada
   sistema aparecia DUAS VEZES, uma no bloco de numeros e outra no cartao de
   baixo, com o mesmo icone e o mesmo nome. Dez sistemas desenhavam vinte
   cartoes. E o bloco de numeros usava `columns`, escolhido por um bom motivo
   (cartoes de uma a tres linhas deixam buraco numa grade) que trazia um
   defeito proprio: as colunas fechavam em alturas diferentes, e a ultima
   terminava 175px acima das outras -- um recorte irregular no meio da tela.

   Fundidos, o problema some por construcao: o cartao tem cabecalho, numeros e
   atalhos, os atalhos sao empurrados para o fundo (`margin-top: auto`) e os
   cartoes da mesma fileira esticam juntos. Grade reta, sem masonry, e a ordem
   de leitura volta a ser da esquerda para a direita.

   Em linha e nao em quadradinho, porque o rotulo tem de 10 a 24 caracteres e
   a ajuda de 0 a 44: em quadrinho cada um fechava numa altura diferente. Em
   linha a altura e a mesma por construcao, e o valor numa coluna de largura
   fixa da ao olho uma coluna de numeros para descer. */
.kpis { list-style: none; margin: 0; padding: 0; }

/* A linha. `grid` com a primeira coluna alinhando os valores entre si — o
   mesmo motivo do `tabular-nums`.
 *
 * `minmax(4.6rem, auto)` e não `4.6rem` fixo: com a largura travada,
 * "R$ 14.049,04" não cabia e saía truncado como "R$ 14...." no cartão da
 * farmácia. Número que não se pode ler é pior que número nenhum — e era
 * justamente o número de entrada do módulo.
 *
 * O `minmax` mantém o piso, então uma coluna de "0" e "178" continua
 * alinhada; o teto passa a ser o conteúdo. */
.kpi {
  display: grid;
  grid-template-columns: minmax(4.6rem, auto) 1fr;
  align-items: baseline;
  gap: .5rem;
  padding: .38rem 0;
  border-top: 1px solid var(--borda);
}
.kpi:first-child { border-top: 0; }

.kpi__valor {
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  /* Sem `overflow: hidden` nem `text-overflow: ellipsis`: eram eles que
     cortavam "R$ 14.049,04" em "R$ 14....". Com a coluna crescendo pelo
     conteúdo (ver `.kpi` acima) não há mais o que esconder — e esconder
     dígito de dinheiro nunca foi o certo. */
  white-space: nowrap;
}
.kpi__valor a { color: inherit; text-decoration: none; }
.kpi__valor a:hover { color: var(--azul-link); text-decoration: underline; }

/* O tom pinta o VALOR, e não mais um filete no topo do cartão: sem cartão,
   não há topo. É a informação que interessa de longe — se o número é bom ou
   ruim —, e ela fica onde o olho já está. */
.kpi--sucesso .kpi__valor { color: var(--sucesso); }
.kpi--erro    .kpi__valor { color: var(--erro); }
.kpi--atencao .kpi__valor { color: var(--atencao); }

.kpi__texto { min-width: 0; display: grid; }
.kpi__rotulo {
  font-size: .76rem;
  font-weight: 600;
  color: var(--tinta-media);
  line-height: 1.25;
}
/* Uma linha só, com o texto inteiro no `title`. "Recolhimento, socorro,
   acidente e otimização" tem 44 caracteres e quebrava em três linhas,
   esticando só aquele cartão — que era a origem do serrilhado. */
.kpi__ajuda {
  font-size: .68rem;
  color: var(--tinta-fraca);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 3. sistemas ------------------------------------------------------------- */
/* Grade de duas a quatro colunas em vez de um cartão por linha: com dez
   sistemas empilhados, o de baixo ficava a três rolagens de distância.

   `minmax(240px)` e não 330px: o cartão encolheu — perdeu a lista de seções e
   ficou com marca, nome e até três atalhos —, e manter a largura antiga
   deixaria metade dele vazia. */
/* SEM `align-items: start`: os cartoes tem de zero a tres numeros e de duas a
   tres pastilhas -- com `start`, cada um fecharia na altura do proprio
   conteudo e a fileira sairia serrilhada. Esticados, os cartoes da mesma linha
   terminam juntos, e e isso que faz a grade ter borda de baixo reta.

   `272px` e nao os 238px de antes: o cartao ganhou os numeros, e "R$ 41,66"
   ao lado de "A descontar em 09/2026" nao cabia na largura antiga. */
/* A GRADE USA A TELA INTEIRA — pedido do usuário.
 *
 * Terceira forma desta regra, e as três estão aqui porque cada uma corrigiu a
 * anterior:
 *
 *   1. `auto-fill` com `1fr` — mantinha as colunas VAZIAS reservadas, e dois
 *      cartões ficavam encostados à esquerda com dois terços da tela em
 *      branco. Foi o "simples demais" do usuário.
 *   2. `auto-fit` com teto de 560px e sobra centralizada — acabou com o
 *      encosto, mas continuava deixando margem dos dois lados.
 *   3. `auto-fit` com `1fr`: os cartões ESTICAM e ocupam a largura toda.
 *
 * O medo que motivou o teto era o cartão solitário virando uma faixa de tela
 * inteira. Ele continua válido, e a resposta agora é cirúrgica: só o cartão
 * ÚNICO ganha teto (`:only-of-type`, logo abaixo).
 *
 * `auto-fit` com `minmax` é também o que torna isto responsivo SEM media
 * query: em 1650px dá cinco colunas, num tablet dá duas, no celular uma — o
 * navegador conta sozinho. */

/* A faixa de alertas ocupa a fileira inteira da grade — ver a nota no
   `inicio.html`. `1 / -1` e não um número: a quantidade de colunas muda com a
   largura da tela e com quantos sistemas a pessoa alcança. */
.painel-geral__alertas { grid-column: 1 / -1; }
.painel-geral__alertas .alertas { margin-bottom: 0; }

.painel-geral__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: .7rem;
}

/* O cartão sozinho não vira uma faixa de 1650px: um cabeçalho, três números e
   três pastilhas espalhados por um metro de tela leem-se pior do que num
   cartão do tamanho de um cartão.

   `:only-of-type` e não `:only-child` porque a faixa de alertas também é
   filha da grade — ela é `<div>`, e os cartões são `<article>`. */
.painel-geral__grade > .sistema:only-of-type { max-width: 560px; }

/* O cartão SEM NÚMEROS não estica junto com os outros.
 *
 * Os cartões de uma fileira se esticam para a linha de pastilhas alinhar — e
 * "Acessos", que não declara resumo, ficava com a altura do vizinho e um vão
 * branco no meio, entre o cabeçalho e as pastilhas coladas no rodapé. Um
 * cartão assim não se lê como "este sistema não tem número", se lê como tela
 * quebrada.
 *
 * `align-self: start` o deixa fechar na própria altura. A fileira perde o
 * alinhamento das pastilhas NAQUELE cartão — e é o preço certo: o
 * desalinhamento se nota menos que um vão de cem pixels. */
.painel-geral__grade > .sistema:not(:has(.kpis)) { align-self: start; }
.painel-geral__grade > .sistema:not(:has(.kpis)) .pastilhas { margin-top: 0; }

.sistema {
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: .7rem .8rem .75rem;
}
/* As pastilhas encostam no fundo do cartão: assim a linha delas fica na mesma
   altura em todos os cartões da fileira, mesmo quando um tem duas e o vizinho
   tem três. */
.sistema .kpis { margin-bottom: .5rem; }
/* As pastilhas encostam no fundo: a linha delas fica na mesma altura em todos
   os cartoes da fileira, mesmo com um tendo tres numeros e o vizinho nenhum.
   O filete acima separa "o que esta acontecendo" de "o que voce pode fazer". */
.sistema .pastilhas {
  margin-top: auto;
  padding-top: .55rem;
  border-top: 1px solid var(--borda);
}
/* Sem numeros, o filete ficaria colado no cabecalho, que ja tem o dele. */
.sistema .sistema__cabecalho + .pastilhas { border-top: 0; padding-top: 0; }

/* O cartao inteiro sobe no hover, como `.indicador`. E o que diz que ele e uma
   peca so, e nao um titulo com coisas soltas embaixo. */
.sistema { transition: box-shadow var(--transicao), transform var(--transicao); }
.sistema:hover { transform: translateY(-1px); box-shadow: var(--sombra-media); }

/* ---- a evolução: o sparkline do cartão ---------------------------------- */
/* Seis meses em 120x28, desenhados no servidor. Ver a nota no `inicio.html`:
   não é gráfico, é forma — e por isso não carrega biblioteca nenhuma.

   `flex: 1` para o gráfico ABSORVER a sobra de altura do cartão. Os cartões
   de uma fileira se esticam juntos (é o que alinha a linha de pastilhas), e o
   mais curto ficava com um buraco branco no meio — visível na tela de quem
   acessa dois sistemas, e metade do "está simples ainda" do usuário. Com o
   gráfico crescendo, o vazio vira desenho: o cartão fica cheio e a linha,
   mais legível.

   `margin-top: auto` NÃO entra: quem cola no fundo do cartão são as
   pastilhas, e duas coisas disputando o rodapé deixariam uma delas flutuando
   no meio. */
.evolucao {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: flex-end;
  gap: .25rem;
  margin: .55rem 0 .2rem;
}
.evolucao__linha {
  width: 100%;
  flex: 1;
  min-height: 28px;
  /* Teto: sem ele, o cartão de um sistema sozinho numa fileira alta viraria
     um gráfico de meia tela — e um sparkline de seis pontos não tem detalhe
     que justifique esse tamanho. */
  max-height: 110px;
  /* A cor vem do token e não de um hex: é a mesma linha no claro e no escuro,
     e `currentColor` no `<polyline>` a lê daqui. */
  color: var(--azul-medio);
  opacity: .75;
}
.evolucao__texto {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  font-size: .68rem;
  color: var(--tinta-fraca);
}
/* O tom é por MÉTRICA, não pelo sinal: em absenteísmo subir é pior, em
   higienização concluída subir é melhor. Quem decide é `Evolucao.inverte` —
   sem ele a mesma seta verde significaria coisas opostas em dois cartões
   vizinhos, e o leitor teria de conferir o rótulo antes de cada uma. */
.evolucao__variacao {
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-media);
}
.evolucao__variacao--piorou { color: var(--erro); }
.evolucao__variacao--melhorou { color: var(--sucesso); }

/* Resumo que estourou. Discreto de propósito: é falha de software e as telas
   do sistema continuam abrindo — alarmar aqui competiria com o que cobra
   trabalho de verdade, que agora mora no painel de cada módulo. */
.sistema__falha {
  margin: 0 0 .5rem;
  font-size: .72rem;
  line-height: 1.35;
  color: var(--tinta-fraca);
  font-style: italic;
}

/* O cabeçalho inteiro é o link do sistema, e não só o texto do nome: num
   cartão pequeno, o alvo de toque tem de ser a faixa toda. */
.sistema__cabecalho {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding-bottom: .6rem;
  margin-bottom: .55rem;
  border-bottom: 1px solid var(--borda);
  text-decoration: none;
}
.sistema__cabecalho:hover { text-decoration: none; }
.sistema__cabecalho:hover .sistema__nome { color: var(--azul-link); }
.sistema__cabecalho:hover .sistema__marca {
  background: var(--azul-medio);
  color: var(--superficie);
}
.sistema__marca { transition: background var(--transicao), color var(--transicao); }
/* Quadrado tingido com o ícone dentro — o mesmo desenho da sigla na lateral,
   que é a assinatura da identidade do tráfego. */
.sistema__marca {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--info-fundo);
  color: var(--azul-profundo);
}
.sistema__marca .icone { width: 17px; height: 17px; }
.sistema__nome {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: .92rem;
  font-weight: 700;
  color: var(--tinta);
  transition: color var(--transicao);
}

/* Pastilha em vez de link em texto corrido: com quatorze telas numa linha só,
   separadas por ponto, nada era clicável com o dedo e nada tinha alvo. */
.pastilhas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.pastilha {
  display: inline-block;
  padding: .2rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--borda);
  background: var(--superficie-alt);
  color: var(--tinta-media);
  font-size: .74rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--transicao), color var(--transicao),
              border-color var(--transicao);
}
.pastilha:hover {
  background: var(--info-fundo);
  border-color: var(--azul-medio);
  color: var(--azul-profundo);
  text-decoration: none;
}

/* ---- KPI com ícone: o cartão de topo do dashboard de chamados ---------- */

/* O `.kpi-clean` do sistema de chamados de origem: filete colorido em cima,
   quadrado tingido com o ícone à esquerda, número grande e rótulo miúdo.

   É MODIFICADOR de `.indicador` e não componente novo, e a razão é o tom: os
   dois já resolvem a mesma coisa — cartão branco, filete no topo, número na
   cor do filete —, e `.indicador--sucesso/--erro/--info/--atencao` já existe,
   já está medido no tema escuro e já é usado por ~60 telas. Um componente
   paralelo obrigaria a manter duas tabelas de tom, e elas divergem na
   primeira correção.

   O que o modificador acrescenta é o LAYOUT (o número deixa de ficar embaixo
   do rótulo e passa a ficar ao lado do ícone) e o quadrado tingido. */
.indicador--kpi {
  flex-direction: row;
  align-items: center;
  gap: .7rem;
}
.indicador--kpi .indicador__icone {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--raio);
  /* O tom neutro. Cada modificador de tom sobrescreve os dois logo abaixo. */
  background: var(--info-fundo);
  color: var(--info);
}
.indicador--kpi .indicador__icone svg { width: 21px; height: 21px; }
/* `min-width: 0` para o texto poder encolher: sem ele, um valor longo
   ("2d 19h 21min") estica o cartão e desalinha a fileira inteira. */
.indicador--kpi .indicador__corpo { min-width: 0; }
.indicador--kpi .indicador__rotulo { margin-bottom: .12rem; }
.indicador--kpi .indicador__valor { font-size: 1.55rem; }

.indicador--kpi.indicador--sucesso .indicador__icone {
  background: var(--sucesso-fundo);
  color: var(--sucesso);
}
.indicador--kpi.indicador--erro .indicador__icone {
  background: var(--erro-fundo);
  color: var(--erro);
}
.indicador--kpi.indicador--atencao .indicador__icone {
  background: var(--atencao-fundo);
  color: var(--atencao);
}

/* ---- Situações: a fileira de contagens por estado ---------------------- */

/* As quatro faixas do dashboard de origem — abertos, em andamento,
   resolvidos, atrasados. O número vai DENTRO de uma marca tingida, e não ao
   lado como em `.barras`: aqui não há proporção nenhuma a desenhar (são
   quatro contagens independentes, não partes de um todo), então uma barra de
   comprimento variável mentiria — ela sugere "quanto do total", e não é isso.

   A marca é de largura fixa e o que ela carrega é a COR do estado. */
.situacoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .5rem;
  margin-bottom: .9rem;
}
.situacao {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--azul-medio);
  border-radius: var(--raio-pequeno);
  padding: .5rem .7rem;
  text-decoration: none;
}
.situacao:hover { box-shadow: var(--sombra-media); text-decoration: none; }
.situacao__icone {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  color: var(--azul-medio);
}
.situacao__corpo { flex: 1; min-width: 0; }
.situacao__marca {
  display: block;
  border-radius: 999px;
  padding: .12rem .5rem;
  text-align: center;
  font-size: .82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--info-fundo);
  color: var(--info);
}
.situacao__rotulo {
  margin: .2rem 0 0;
  font-size: .72rem;
  font-weight: 500;
  color: var(--tinta-fraca);
}

.situacao--atencao { border-left-color: var(--atencao); }
.situacao--atencao .situacao__icone { color: var(--atencao); }
.situacao--atencao .situacao__marca {
  background: var(--atencao-fundo);
  color: var(--atencao);
}
.situacao--sucesso { border-left-color: var(--sucesso); }
.situacao--sucesso .situacao__icone { color: var(--sucesso); }
.situacao--sucesso .situacao__marca {
  background: var(--sucesso-fundo);
  color: var(--sucesso);
}
.situacao--erro { border-left-color: var(--erro); }
.situacao--erro .situacao__icone { color: var(--erro); }
.situacao--erro .situacao__marca {
  background: var(--erro-fundo);
  color: var(--erro);
}

/* ---- Painel de um vizinho: o bloco compacto com três números ----------- */

/* O `.modulo-mini` da origem — o quadro de Equipamentos ao lado da fila.
   Cabeçalho com o nome e o link "Ver todos", corpo com os números em linha. */
.quadro-vizinho {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  margin-bottom: .9rem;
}
.quadro-vizinho__topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  padding: .5rem .85rem;
  background: var(--tabela-cabecalho);
  border-bottom: 1px solid var(--borda);
  font-size: .78rem;
  font-weight: 700;
  color: var(--tinta);
}
.quadro-vizinho__topo svg { width: 15px; height: 15px; vertical-align: -2px; }
.quadro-vizinho__topo a { font-size: .72rem; font-weight: 500; }
.quadro-vizinho__corpo {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  padding: .6rem .85rem;
}
.quadro-vizinho__numero {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 60px;
}
.quadro-vizinho__numero strong {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.quadro-vizinho__numero span {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tinta-fraca);
}
.quadro-vizinho__numero--atencao strong { color: var(--atencao); }
.quadro-vizinho__numero--sucesso strong { color: var(--sucesso); }

/* etiquetas -------------------------------------------------------------- */
/* O `.badge-status` do tráfego é um retângulo de canto 4px, não uma pílula:
   com o raio pequeno o rótulo cabe mais apertado e a coluna de status fica
   mais estreita na tabela. */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.25;
  white-space: nowrap;
}
.etiqueta--perfil  { background: var(--info-fundo); color: var(--info); }
.etiqueta--sucesso { background: var(--sucesso-fundo); color: var(--sucesso); }
.etiqueta--erro    { background: var(--erro-fundo);    color: var(--erro); }
.etiqueta--atencao { background: var(--atencao-fundo); color: var(--atencao); }
.etiqueta--neutra  { background: var(--superficie-alt); color: var(--tinta-fraca); }
.etiqueta--acao    { background: var(--info-fundo); color: var(--azul-profundo); }

/* paginação -------------------------------------------------------------- */
.paginacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  padding: .7rem .9rem;
  border-top: 1px solid var(--borda);
  background: var(--superficie-alt);
}
.paginacao__resumo { margin: 0; font-size: .74rem; color: var(--tinta-fraca); }
.paginacao__itens { display: flex; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.paginacao__item {
  display: inline-block;
  padding: .25rem .6rem;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  font-size: .74rem;
  background: var(--superficie);
  color: var(--tinta-media);
}
.paginacao__item:hover { background: var(--superficie-alt); text-decoration: none; }
.paginacao__item--atual { background: var(--azul-solido); border-color: var(--azul-solido); color: #fff; font-weight: 600; }

/* grades ---------------------------------------------------------------- */
.grade { display: grid; gap: .9rem; }
.grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Gráfico largo com um painel estreito ao lado — o "evolução + status" do
   dashboard do RH. Frações e não `2fr 1fr` em pixels: o gráfico precisa
   encolher junto, e uma coluna fixa deixaria o canvas espremido no 14".

   `align-items: start` é o que impede o cartão da direita de esticar até a
   altura do gráfico: ele tem cinco linhas de conteúdo, e esticado desenhava um
   retângulo branco com metade vazia embaixo — a sobra que o usuário apontou.
   Cartão do tamanho do que ele diz. */
.grade--2-1 {
  grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
  align-items: start;
}
@media (max-width: 1100px) { .grade--2-1 { grid-template-columns: 1fr; } }

.perfil__foto { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.perfil__foto-campo { flex: 1; min-width: 210px; }

/* listas auxiliares ------------------------------------------------------ */
.definicoes { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .25rem .85rem; font-size: .8rem; }
.definicoes dt { color: var(--tinta-fraca); font-size: .72rem; }
.definicoes dd { margin: 0; }

.lista-descricoes { margin: .65rem 0 0; padding-left: 1rem; font-size: .74rem; color: var(--tinta-fraca); }
.lista-descricoes li + li { margin-top: .25rem; }

/* O medidor de consumo da meta — o "Status Operacional" do dashboard do RH.

   Diferente da `.barras`: lá a barra compara meses entre si, aqui ela compara
   UM valor contra o teto dele. Por isso o trilho é o 100% da meta e não o
   maior valor da série. */
.medidor { margin-bottom: 1rem; }
.medidor__topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  font-size: .74rem;
  color: var(--tinta-fraca);
  margin-bottom: .4rem;
}
.medidor__estado--sucesso { color: var(--sucesso); }
.medidor__estado--erro { color: var(--erro); }
.medidor__trilho {
  height: 7px;
  background: var(--superficie-alt);
  border-radius: 999px;
  overflow: hidden;
}
.medidor__marca {
  height: 100%;
  background: var(--sucesso);
  border-radius: 999px;
  min-width: 3px;
}
.medidor__marca--erro { background: var(--erro); }
.medidor__nota {
  margin: .4rem 0 0;
  font-size: .72rem;
  color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums;
}

/* A lista de contagens ao lado do medidor: quantos lançamentos alimentaram
   cada número. Cada linha navega para a lista do indicador — a pergunta que
   ela levanta ("só isso?") se responde abrindo os lançamentos. */
.lista-contagem { list-style: none; margin: 0; padding: 0; }
.lista-contagem li + li { border-top: 1px solid var(--tabela-linha); }
.lista-contagem a {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .1rem;
  font-size: .78rem;
  color: var(--tinta);
}
.lista-contagem a:hover { text-decoration: none; color: var(--azul-link); }
.lista-contagem span { flex: 1; }
.lista-contagem strong { font-variant-numeric: tabular-nums; }
.lista-contagem .icone { width: 16px; height: 16px; color: var(--azul-medio); }

/* A posição no ranking de setores. Círculo e não só o número: numa tabela de
   cinco linhas, a coluna "#" some ao lado do nome do setor. */
.posicao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--info-fundo);
  color: var(--azul-profundo);
  font-size: .7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.lista-simples { list-style: none; margin: 0; padding: 0; font-size: .76rem; display: grid; gap: .3rem; }

.lista-codigos { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; max-height: 250px; overflow-y: auto; }
.lista-codigos code { font-family: var(--fonte-mono); font-size: .7rem; color: var(--tinta-media); }

.secao-titulo {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tinta-fraca);
  margin: 1rem 0 .45rem;
}
.texto-vazio { color: var(--tinta-fraca); font-size: .78rem; font-style: italic; }

.aviso {
  background: var(--info-fundo);
  color: var(--azul-profundo);
  border-left: 3px solid var(--azul-medio);
  border-radius: var(--raio-pequeno);
  padding: .6rem .75rem;
  font-size: .76rem;
  margin-top: .9rem;
}

/* situação do acesso ----------------------------------------------------- */
.situacao-linhas { display: grid; gap: .5rem; }
.situacao-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
  padding: .6rem .75rem;
  background: var(--superficie-alt);
  border-radius: var(--raio-pequeno);
}
.situacao-linha strong { display: block; font-size: .8rem; }
.situacao-linha small { color: var(--tinta-fraca); font-size: .72rem; }

/* opções de perfil ------------------------------------------------------- */
.opcoes-perfil { display: grid; gap: .45rem; }
.opcao-perfil {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .7rem .8rem;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao);
}
.opcao-perfil:hover { background: var(--superficie-alt); }
.opcao-perfil:has(input:checked) { border-color: var(--azul-medio); background: var(--info-fundo); }
.opcao-perfil input { margin-top: .2rem; }
.opcao-perfil__texto { display: flex; flex-direction: column; gap: .1rem; }
.opcao-perfil__texto strong { font-size: .82rem; }
.opcao-perfil__texto small { color: var(--tinta-fraca); font-size: .72rem; }

.opcoes-simples { display: grid; gap: .35rem; }
.opcao-simples { display: flex; align-items: center; gap: .45rem; font-size: .82rem; cursor: pointer; }

/* permissões ------------------------------------------------------------- */
.barra-ferramentas { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-bottom: .9rem; }
.campo--busca { max-width: 300px; }
.barra-ferramentas__nota { font-size: .72rem; color: var(--tinta-fraca); }

.permissoes { display: grid; gap: .7rem; }
.permissoes__grupo {
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  padding: .7rem .8rem;
  margin: 0;
}
.permissoes__grupo legend { display: flex; gap: .45rem; align-items: baseline; padding: 0 .35rem; font-size: .74rem; }
.permissoes__modulo { font-weight: 700; color: var(--azul-profundo); }
.permissoes__modelo { color: var(--tinta-fraca); }

.permissoes__itens { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.permissoes__item label {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  cursor: pointer;
  font-size: .81rem;
  padding: .32rem .35rem;
  border-radius: var(--raio-pequeno);
}
.permissoes__item label:hover { background: var(--superficie-alt); }
.permissoes__item input { margin-top: .18rem; }
.permissoes__texto { display: flex; flex-direction: column; gap: .1rem; }
.permissoes__nome { font-weight: 500; }
.permissoes__explicacao { font-size: .72rem; color: var(--tinta-fraca); line-height: 1.35; }
.permissoes__item--herdada label { cursor: not-allowed; opacity: .68; }
.permissoes__item--herdada label:hover { background: transparent; }
.permissoes__marca {
  font-size: .64rem;
  font-style: normal;
  background: var(--info-fundo);
  color: var(--azul-profundo);
  padding: .02rem .35rem;
  border-radius: 999px;
}

/* trilha de auditoria ---------------------------------------------------- */
.trilha-auditoria { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.trilha-auditoria__item {
  border-left: 3px solid var(--borda-forte);
  padding: .55rem .75rem;
  background: var(--superficie-alt);
  border-radius: 0 var(--raio-pequeno) var(--raio-pequeno) 0;
}
.trilha-auditoria__item--permissao,
.trilha-auditoria__item--perfil { border-left-color: var(--azul-medio); }
.trilha-auditoria__item--inativacao,
.trilha-auditoria__item--exclusao { border-left-color: var(--erro); }
.trilha-auditoria__item--criacao,
.trilha-auditoria__item--reativacao { border-left-color: var(--sucesso); }
.trilha-auditoria__item--senha { border-left-color: var(--laranja); }

.trilha-auditoria__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .72rem;
  color: var(--tinta-fraca);
}
.trilha-auditoria__autor { font-weight: 600; color: var(--tinta-media); }
.trilha-auditoria__descricao { margin: .3rem 0 0; font-size: .8rem; }
.trilha-auditoria__detalhes { margin-top: .35rem; font-size: .76rem; }
.trilha-auditoria__detalhes summary { cursor: pointer; color: var(--azul-link); }
.valor-antes { color: var(--erro); }
.valor-depois { color: var(--sucesso); }

/* ================================================== fluxo de higienização */

/* status da ordem — cada situação com cor própria, para leitura em lista */
.etiqueta--status-agendada             { background: var(--info-fundo);    color: var(--azul-profundo); }
.etiqueta--status-em_execucao          { background: #e0f2fe;              color: #075985; }
.etiqueta--status-aguardando_validacao { background: var(--atencao-fundo); color: var(--atencao); }
.etiqueta--status-aprovada             { background: var(--sucesso-fundo); color: var(--sucesso); }
.etiqueta--status-reprovada            { background: var(--erro-fundo);    color: var(--erro); }
.etiqueta--status-cancelada            { background: var(--superficie-alt); color: var(--tinta-fraca); }

.etiqueta--avulsa { background: #ffedd5; color: #9a3412; }

.etiqueta--situacao-pendente      { background: var(--superficie-alt); color: var(--tinta-fraca); }
.etiqueta--situacao-conforme      { background: var(--sucesso-fundo); color: var(--sucesso); }
.etiqueta--situacao-nao_conforme  { background: var(--erro-fundo);    color: var(--erro); }
.etiqueta--situacao-nao_aplicavel { background: var(--superficie-alt); color: var(--tinta-media); }

.etiqueta--veiculo-ativo      { background: var(--sucesso-fundo); color: var(--sucesso); }
.etiqueta--veiculo-manutencao { background: var(--atencao-fundo); color: var(--atencao); }
.etiqueta--veiculo-reserva    { background: var(--info-fundo);    color: var(--azul-profundo); }
.etiqueta--veiculo-baixado    { background: var(--erro-fundo);    color: var(--erro); }

/* criticidade da periodicidade */
.etiqueta--criticidade-0 { background: var(--sucesso-fundo); color: var(--sucesso); }
.etiqueta--criticidade-1 { background: var(--atencao-fundo); color: var(--atencao); }
.etiqueta--criticidade-2 { background: var(--erro-fundo);    color: var(--erro); }
.etiqueta--criticidade-3 { background: #ede9fe;              color: #5b21b6; }

.indicador--atencao { border-top-color: var(--laranja); }
.indicador--atencao .indicador__valor { color: var(--laranja-forte); }
.indicador--alerta { border-top-color: var(--atencao); }
.indicador--alerta .indicador__valor { color: var(--atencao); }

.ponto-cor {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: .3rem;
  vertical-align: baseline;
}

/* barra de progresso do checklist */
.progresso {
  width: 74px;
  height: 6px;
  background: var(--borda);
  border-radius: 999px;
  overflow: hidden;
}
.progresso__barra { height: 100%; background: var(--azul-medio); border-radius: 999px; }

.contador {
  font-size: .7rem;
  font-weight: 500;
  color: var(--tinta-fraca);
  margin-left: .4rem;
}

/* ficha da ordem: dados fixos + checklist longo ao lado */
.grade--ficha { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: start; }

/* checklist -------------------------------------------------------------- */
.checklist { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }

.checklist__item {
  border: 1px solid var(--borda);
  border-left: 3px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  padding: .7rem .8rem;
  background: var(--superficie);
}
.checklist__item--foto { border-left-color: var(--azul-medio); }

.checklist__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  font-size: .84rem;
}
.checklist__orientacao { margin: .3rem 0 0; font-size: .76rem; color: var(--tinta-fraca); }
.checklist__aviso { margin: .4rem 0 0; font-size: .74rem; color: var(--laranja-forte); }

.checklist__situacao { display: flex; flex-wrap: wrap; gap: .4rem; margin: .55rem 0 .45rem; }

.opcao-situacao {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
  font-size: .75rem;
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao);
}
.opcao-situacao input { width: auto; margin: 0; }
.opcao-situacao:hover { background: var(--superficie-alt); }
.opcao-situacao--conforme:has(input:checked)      { background: var(--sucesso-fundo); border-color: var(--sucesso); color: var(--sucesso); }
.opcao-situacao--nao_conforme:has(input:checked)  { background: var(--erro-fundo);    border-color: var(--erro);    color: var(--erro); }
.opcao-situacao--nao_aplicavel:has(input:checked) { background: var(--superficie-alt); border-color: var(--tinta-fraca); }
.opcao-situacao--pendente:has(input:checked)      { background: var(--superficie-alt); border-color: var(--borda-forte); }

.checklist--leitura { display: grid; gap: .5rem; }

.lista-pendencias { margin: .35rem 0 0; padding-left: 1.1rem; }
.lista-checklist { margin: 0; padding-left: 1.1rem; font-size: .8rem; display: grid; gap: .3rem; }
.lista-checklist .etiqueta { margin-left: .3rem; }

/* galeria de evidências --------------------------------------------------- */
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .6rem;
  margin-top: .6rem;
}
.galeria--compacta { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .4rem; }

.galeria__item {
  margin: 0;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  overflow: hidden;
  background: var(--superficie-alt);
}
.galeria__item img { width: 100%; height: 110px; object-fit: cover; display: block; }
.galeria--compacta .galeria__item img { height: 68px; }
.galeria__item figcaption {
  padding: .3rem .45rem;
  font-size: .66rem;
  color: var(--tinta-fraca);
  line-height: 1.35;
}
.galeria__item code { font-family: var(--fonte-mono); font-size: .62rem; }

/* formulários em linha (anexar evidência, registrar consumo) -------------- */
.linha-formulario {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: flex-end;
  padding-bottom: .9rem;
  margin-bottom: .3rem;
  border-bottom: 1px solid var(--borda);
}
.linha-formulario .campo-grupo { flex: 1; min-width: 165px; }

.cartao__cabecalho-tabela {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  padding: .9rem 1.1rem 0;
}
/* Dentro de um cartão de tabela ele vira a faixa de cabeçalho do tráfego
   (`.card-header`): tom do fundo da página, filete embaixo, encostada nas
   bordas. Fora dele continua sendo só um título com ação à direita — em
   `.cartao--sistema` a faixa cinza não faria sentido. */
.cartao--tabela .cartao__cabecalho-tabela {
  padding: .65rem 1.1rem;
  background: var(--superficie-alt);
  border-bottom: 1px solid var(--borda);
}
.cartao__cabecalho-tabela .cartao__titulo { margin: 0; font-size: .88rem; }

.cartao--conflito { border-left: 3px solid var(--laranja); margin-bottom: .9rem; }
.cartao--tipo { border-top: 3px solid var(--cor-tipo, var(--azul-medio)); }

.texto-quebrado { white-space: pre-line; font-size: .82rem; }

/* itens de checklist no cadastro do tipo ---------------------------------- */
.tabela--itens td { padding: .3rem .4rem; vertical-align: top; }
.tabela--itens .campo { font-size: .76rem; padding: .3rem .45rem; }
.campo--ordem { width: 60px; }
.campo--cor { padding: .15rem; height: 32px; cursor: pointer; }
.celula-central { text-align: center; }
.celula-central input { width: auto; }

/* diálogos ---------------------------------------------------------------- */
.dialogo {
  border: 1px solid var(--borda);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-forte);
  padding: 1.15rem 1.25rem;
  width: min(460px, calc(100vw - 2rem));
  color: var(--tinta);
  background: var(--superficie);
}
.dialogo::backdrop { background: rgb(15 23 42 / 45%); }

/* ============================================== painéis e visualizações */

/* Paleta dos gráficos — validada contra as checagens de daltonismo antes de
   entrar aqui. O par vermelho/âmbar da primeira tentativa foi reprovado
   (ΔE 2,8 sob deutan, mínimo 8); estes passam com ΔE 12,5.
   Cada faixa vem sempre acompanhada de rótulo e número: a cor reforça a
   leitura, nunca a carrega sozinha. */
:root {
  --grafico-em-dia:       #0d9488;
  --grafico-a-vencer:     #d97706;
  --grafico-vencida:      #991b1b;
  --grafico-sem-historico:#7c3aed;
  --grafico-agendada:     #1255cc;
  --grafico-avulsa:       #f97316;
}

/* Paleta das SÉRIES de gráfico — a do Chart.js (`static/js/graficos.js`).

   Separada da de cima porque responde outra pergunta: aquela dá cor a um
   ESTADO ("vencida", "em dia") e é escolhida pelo significado; esta dá cor a
   uma série qualquer e é escolhida por índice, para que duas séries vizinhas
   se distingam. Fundir as duas obrigaria "faltas" a ser vermelha por ser um
   estado ruim, e num gráfico de quatro séries sobrariam três cores.

   O Python manda `cor: 1..6` e nunca um hex — é o que faz o tema escuro valer
   nos gráficos sem uma segunda tabela de cores em JavaScript.

   ORDEM IMPORTA: 1 e 2 são as duas primeiras séries de todo gráfico e
   precisam ser o par mais separado (azul/vermelho, ΔE 14,1 sob deutan). O 3
   é o verde da meta e das linhas de referência. */
:root {
  --serie-1: #1d4ed8;
  --serie-2: #dc2626;
  --serie-3: #15803d;
  --serie-4: #ea580c;
  --serie-5: #7c3aed;
  --serie-6: #0891b2;

  --grafico-grade: rgb(100 116 139 / 16%);
  --grafico-tinta: #475569;   /* eixos, legenda e rótulo de valor */
}

/* No escuro as séries CLAREIAM: as do claro foram medidas sobre cartão
   branco e sobre o #243444 nenhuma delas chega a 3:1 (o mínimo de elemento
   gráfico). Estas ficam entre 5,2:1 e 7,4:1, e o par 1/2 mantém a separação
   sob deutan. A grade escurece pelo motivo oposto — no escuro ela some se
   for clara demais e vira listra se for clara de menos. */
:root[data-tema="escuro"] {
  --serie-1: #60a5fa;
  --serie-2: #f87171;
  --serie-3: #4ade80;
  --serie-4: #fb923c;
  --serie-5: #c4b5fd;
  --serie-6: #67e8f9;

  --grafico-grade: rgb(148 163 184 / 22%);
  --grafico-tinta: #c4d1e2;
}

/* moldura do gráfico ----------------------------------------------------- */

/* O canvas do Chart.js precisa de um pai com altura definida: com
   `maintainAspectRatio: false` e altura automática, ele cresce a cada quadro
   até travar a aba. Altura fixa aqui, largura pelo cartão. */
.grafico {
  position: relative;
  height: 320px;
  margin-top: .35rem;
}
.grafico--alto { height: 380px; }

@media (max-height: 800px) {
  /* O 14" do escritório: 320px de gráfico mais KPI mais filtro não deixam
     sobrar tabela nenhuma na primeira dobra. */
  .grafico { height: 260px; }
  .grafico--alto { height: 300px; }
}

/* fatiador (os botões que trocam a série do gráfico) --------------------- */

.fatiador {
  display: flex;
  flex-direction: column;
  gap: .28rem;
  max-height: 340px;
  overflow-y: auto;
  padding-right: .2rem;
}
/* AZUL CHEIO, e o escolhido em AMARELO — o desenho do dashboard de horas
   extras da origem, apontado pelo usuário: "azul e quando selecionado fica
   amarelo, fica bem mais destacado".

   Antes era o contrário: fundo neutro com o escolhido em azul. Funciona, e
   destaca menos — num fatiador de onze centros de custo, achar onde se está
   custava uma varredura. Com a coluna inteira azul, o amarelo salta.

   Eu tinha recusado este amarelo por ele ser "a única peça daquele sistema
   com essa cor". O argumento era fraco: cor única para papel único é
   exatamente o que faz o papel se ler. */
.fatiador__botao {
  /* `flex` com `align-items: center` para o texto ficar VERTICALMENTE no meio
     do azul, e `justify-content: flex-start` para todos alinharem à ESQUERDA
     — inclusive os que truncam. Pedido do usuário.

     Com `text-align` sozinho, o alinhamento vertical fica por conta do
     `line-height`, e um rótulo de duas palavras em versalete assenta um pouco
     alto dentro da caixa. Numa coluna de onze, esse desencontro de um ou dois
     pixels é o que faz a lista parecer torta sem que se saiba dizer por quê. */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 34px;
  text-align: left;
  padding: .5rem .65rem;
  border: 1px solid rgb(255 255 255 / 12%);
  background: var(--azul-solido);
  color: #fff;
  font: inherit;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  border-radius: var(--raio-pequeno);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--transicao), color var(--transicao),
              border-color var(--transicao);
}
.fatiador__botao:hover {
  background: var(--azul-hover);
  border-color: rgb(255 255 255 / 25%);
  color: #fff;
}
.fatiador__botao.esta-ativo,
.fatiador__botao.esta-ativo:hover {
  background: var(--selecao);
  border-color: var(--selecao-borda);
  color: var(--selecao-texto);
}
.fatiador__titulo {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tinta-fraca);
  font-weight: 700;
  margin: 0 0 .3rem;
}

.grade--fatiada {
  display: grid;
  grid-template-columns: minmax(150px, 200px) 1fr;
  gap: 1rem;
  align-items: start;
}
@media (max-width: 800px) {
  .grade--fatiada { grid-template-columns: 1fr; }
  .fatiador { flex-direction: row; flex-wrap: wrap; max-height: none; }
}

/* detalhamento recolhível ------------------------------------------------ */

/* `<details>` nativo, e não cabeçalho de tabela com `click` no JS como fazia
   a origem: o nativo abre pelo teclado, é anunciado pelo leitor de tela e não
   custa uma linha de script. */
.detalhamento {
  border-top: 1px solid var(--borda);
  margin-top: .9rem;
}
.detalhamento__resumo {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem .1rem;
  cursor: pointer;
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tinta-media);
  list-style: none;
}
.detalhamento__resumo::-webkit-details-marker { display: none; }
.detalhamento__resumo:hover { color: var(--azul-link); }
.detalhamento__resumo::before {
  content: "";
  width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .15s ease;
}
.detalhamento[open] > .detalhamento__resumo::before { transform: rotate(90deg); }
.detalhamento__resumo small {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tinta-fraca);
}

/* matriz mês a mês (indicador nas linhas, mês nas colunas) --------------- */

/* A única tabela transposta do sistema, e é de propósito: o RH lê turnover
   comparando o MESMO número ao longo do ano. Ver `matriz_turnover`. */
.matriz { width: 100%; border-collapse: collapse; font-size: .76rem; }
.matriz th, .matriz td {
  padding: .38rem .5rem;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--tabela-linha);
  font-variant-numeric: tabular-nums;
}
.matriz thead th {
  color: var(--tabela-cabecalho-texto);
  background: var(--tabela-cabecalho);
  font-weight: 600;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  position: sticky;
  top: 0;
}
.matriz__rotulo {
  text-align: left;
  font-weight: 600;
  color: var(--tinta);
  position: sticky;
  left: 0;
  background: var(--superficie);
}
.matriz__rotulo--recuado { padding-left: 1.3rem; font-weight: 400; color: var(--tinta-media); }
.matriz__media { background: var(--superficie-alt); font-weight: 700; }
.matriz tr.matriz__destaque td { background: var(--info-fundo); font-weight: 700; }
.matriz tr.matriz__destaque .matriz__rotulo { background: var(--info-fundo); }
.matriz tr.matriz__meta td { background: var(--atencao-fundo); color: var(--atencao); }
.matriz tr.matriz__meta .matriz__rotulo { background: var(--atencao-fundo); color: var(--atencao); }

/* barras horizontais ----------------------------------------------------- */
.barras { list-style: none; margin: 0; padding: 0; display: grid; gap: .42rem; }

.barras__linha {
  display: grid;
  grid-template-columns: minmax(90px, 34%) 1fr auto;
  align-items: center;
  gap: .6rem;
  font-size: .78rem;
}
.barras__rotulo {
  color: var(--tinta-media);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.barras__trilho {
  height: 9px;
  background: var(--superficie-alt);
  border-radius: 999px;
  overflow: hidden;
  min-width: 40px;
}
.barras__trilho--tabela { display: block; width: 100%; min-width: 60px; height: 7px; }
.barras__marca {
  display: block;
  height: 100%;
  background: var(--azul-medio);
  /* Ponta arredondada só do lado do valor: a base fica ancorada no zero. */
  border-radius: 0 999px 999px 0;
  min-width: 3px;
}
.barras__valor { font-weight: 600; color: var(--tinta); white-space: nowrap; font-variant-numeric: tabular-nums; }
.barras__valor small { font-weight: 400; color: var(--tinta-fraca); }

.barras__marca--aprovada { background: var(--grafico-em-dia); }
.barras__marca--reprovada { background: var(--grafico-vencida); }
.barras__marca--aguardando_validacao { background: var(--grafico-a-vencer); }
.barras__marca--cancelada { background: var(--tinta-fraca); }

/* faixa empilhada (parte do todo) ---------------------------------------- */
.faixa-empilhada {
  display: flex;
  height: 15px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--superficie-alt);
  /* Fresta entre segmentos: sem ela, duas faixas de tom próximo se fundem. */
  gap: 2px;
  margin: .5rem 0 .7rem;
}
.faixa-empilhada__parte { display: block; height: 100%; min-width: 2px; }
.faixa-empilhada__parte--vencida       { background: var(--grafico-vencida); }
.faixa-empilhada__parte--sem-historico { background: var(--grafico-sem-historico); }
.faixa-empilhada__parte--a-vencer      { background: var(--grafico-a-vencer); }
.faixa-empilhada__parte--em-dia        { background: var(--grafico-em-dia); }
.faixa-empilhada__parte--agendada      { background: var(--grafico-agendada); }
.faixa-empilhada__parte--avulsa        { background: var(--grafico-avulsa); }

/* legenda ---------------------------------------------------------------- */
.legenda {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
}
.legenda__item { display: flex; align-items: center; gap: .4rem; font-size: .76rem; }
.legenda__marca { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legenda__marca--vencida       { background: var(--grafico-vencida); }
.legenda__marca--sem-historico { background: var(--grafico-sem-historico); }
.legenda__marca--a-vencer      { background: var(--grafico-a-vencer); }
.legenda__marca--em-dia        { background: var(--grafico-em-dia); }
.legenda__marca--agendada      { background: var(--grafico-agendada); }
.legenda__marca--avulsa        { background: var(--grafico-avulsa); }
/* Texto em tinta, nunca na cor da série — a marca ao lado já dá a identidade. */
.legenda__texto { color: var(--tinta-media); }
.legenda__texto small { color: var(--tinta-fraca); margin-left: .15rem; }

/* indicadores por tom ---------------------------------------------------- */
.indicador--sucesso { border-top-color: var(--grafico-em-dia); }
.indicador--sucesso .indicador__valor { color: var(--grafico-em-dia); }
.indicador--erro { border-top-color: var(--grafico-vencida); }
.indicador--erro .indicador__valor { color: var(--grafico-vencida); }
.indicador--info { border-top-color: var(--azul-medio); }

/* abas ------------------------------------------------------------------- */
.abas {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-bottom: .9rem;
  border-bottom: 1px solid var(--borda);
  padding-bottom: .5rem;
}
.abas__item {
  padding: .3rem .8rem;
  border-radius: 999px;
  font-size: .78rem;
  color: var(--tinta-media);
  border: 1px solid var(--borda);
  background: var(--superficie);
}
.abas__item:hover { background: var(--superficie-alt); text-decoration: none; }
.abas__item--ativo {
  background: var(--azul-solido);
  border-color: var(--azul-solido);
  color: #fff;
  font-weight: 600;
}

.filtros--periodo .filtros__campos { grid-template-columns: repeat(auto-fit, minmax(150px, 200px)); }

/* ================================================ tabela ordenável e modal */

/* cabeçalho clicável ------------------------------------------------------ */
.tabela__ordenavel { padding: 0 !important; }
.tabela__ordenavel a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .35rem;
  padding: .5rem .8rem;
  color: var(--tabela-cabecalho-texto);
  white-space: nowrap;
}
.tabela__ordenavel a:hover { background: var(--tabela-hover); text-decoration: none; }
.tabela__ordenavel--ativa a { color: var(--azul-medio); }

.tabela__seta { font-size: .62rem; opacity: .45; }
.tabela__ordenavel--ativa .tabela__seta { opacity: 1; color: var(--azul-medio); }

/* linha clicável ---------------------------------------------------------- */
.tabela__linha-clicavel { cursor: pointer; }
.tabela__linha-clicavel:focus-visible {
  outline: 2px solid var(--azul-vivo);
  outline-offset: -2px;
}

/* modal ------------------------------------------------------------------- */
/* Continua sendo um <dialog> central com backdrop — pedido do usuário; o que
   mudou é só o raio e a cor da cortina. */
.modal {
  border: 1px solid var(--borda);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-forte);
  padding: 0;
  width: min(880px, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  color: var(--tinta);
  background: var(--superficie);
  overflow: hidden;
}
.modal::backdrop { background: rgb(15 23 42 / 45%); }
.modal__area { display: flex; flex-direction: column; max-height: calc(100vh - 3rem); }

.modal__cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1.2rem;
  background: var(--superficie-alt);
  border-bottom: 1px solid var(--borda);
  flex: none;
}
.modal__titulo { margin: 0; font-size: 1rem; font-weight: 700; color: var(--tinta); }
.modal__subtitulo { margin: .3rem 0 0; font-size: .8rem; }

.modal__fechar {
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--tinta-fraca);
  cursor: pointer;
  padding: 0 .25rem;
}
.modal__fechar:hover { color: var(--tinta); }

/* Só o corpo rola: cabeçalho e rodapé ficam sempre à vista, para o botão de
   fechar não exigir rolar até o fim numa ordem com muitos itens. */
.modal__corpo { padding: 1.1rem 1.2rem; overflow-y: auto; flex: 1; }

.modal__rodape {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  padding: .8rem 1.2rem;
  border-top: 1px solid var(--borda);
  background: var(--superficie-alt);
  flex: none;
}

.modal__carregando,
.modal__erro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: 3rem 1.5rem;
  color: var(--tinta-fraca);
  font-size: .88rem;
}

.girando {
  width: 18px;
  height: 18px;
  border: 2px solid var(--borda);
  border-top-color: var(--azul-medio);
  border-radius: 50%;
  animation: girar .7s linear infinite;
  display: inline-block;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ==================================================== lançamento em lote */

.grade--lancamento { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); align-items: start; }

.cartao--veiculos { position: sticky; top: calc(var(--topo-altura) + .8rem); }
.campo--busca-veiculos { margin: 0 0 .7rem; }

/* Colunas automáticas: numa frota de 71 veículos, uma lista de coluna única
   exigiria rolar muito para achar o prefixo. */
.seletor-veiculos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 2px;
  max-height: 46vh;
  overflow-y: auto;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  padding: .35rem;
}

.veiculo-opcao {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .5rem;
  border-radius: var(--raio-pequeno);
  cursor: pointer;
  font-size: .8rem;
}
.veiculo-opcao:hover { background: var(--superficie-alt); }
.veiculo-opcao input { width: auto; margin: 0; flex: none; }
.veiculo-opcao:has(input:checked) {
  background: var(--info-fundo);
  color: var(--azul-profundo);
  font-weight: 600;
}
.veiculo-opcao__texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A barra de ação acompanha a rolagem: com a lista longa, o botão de lançar
   ficaria fora da tela justamente quando o gestor termina de selecionar. */
.formulario__acoes--fixas {
  position: sticky;
  bottom: 0;
  background: var(--superficie);
  border-top: 1px solid var(--borda);
  padding: .8rem 0;
  margin-top: .5rem;
  z-index: 10;
}

.lista-vencidos { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .78rem; }
.lista-vencidos li {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .3rem .45rem;
  border-radius: var(--raio-pequeno);
  background: var(--superficie-alt);
}
.lista-vencidos strong { color: var(--azul-profundo); }
.lista-vencidos span { flex: 1; color: var(--tinta-media); }
.lista-vencidos small { color: var(--grafico-vencida); font-weight: 600; white-space: nowrap; }

@media (max-width: 1100px) {
  .grade--lancamento { grid-template-columns: 1fr; }
  .cartao--veiculos { position: static; }
}

/* ============================================ páginas públicas (o login) */
/* A imagem da empresa em tela cheia, com o cartão do formulário por cima.
 *
 * O desenho anterior era duas colunas — faixa navy de 420px com a marca à
 * esquerda, campo claro com o cartão à direita —, trazido da tela de entrada
 * do controle operacional. Saiu quando o usuário mandou o papel de parede:
 * a imagem tem o logo e o nome da empresa NO CENTRO, e cortada numa faixa de
 * 420px o logo sai pela metade. Manter as duas coisas duplicaria o nome.
 *
 * Esta tela não segue o tema escuro, e agora menos ainda: a imagem é escura
 * por natureza, e o cartão branco sobre ela é o contraste que se quer. */

.publica {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;   /* o celular, onde a barra do navegador come 100vh */
  display: flex;
  flex-direction: column;
  /* O NAVY EMBAIXO NÃO É RESERVA: é o que a tela mostra enquanto a imagem
     carrega, e é o que ela mostra para sempre se o arquivo faltar. Sem ele o
     primeiro quadro é branco, o cartão some no branco e a tela pisca. */
  background: var(--lateral-fundo);
}

/* ---- o fundo ----------------------------------------------------------- */
.publica__fundo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.publica__fundo img {
  width: 100%;
  height: 100%;
  /* `cover` e `center`: a composição tem o logo no meio, e é o meio que tem
     de sobreviver ao corte em qualquer proporção de tela. */
  object-fit: cover;
  object-position: center;

  /* O DESFOQUE — pedido do usuário, e é o que muda a natureza da imagem: com
     o logo ilegível ela deixa de ser CONTEÚDO e vira TEXTURA. Foi isso que
     liberou o cartão para voltar ao centro (ver `.publica__area`).

     `scale(1.08)` junto, e não é enfeite: `blur` amostra pixels de fora da
     borda, e sem a ampliação sobra uma faixa translúcida de ~10px em cada
     lado, por onde o navy de baixo aparece como uma moldura clara.

     10px numa imagem de 1672px é desfoque suficiente para o texto do papel de
     parede sumir e a composição (a frota, os chevrons, o azul) continuar
     reconhecível. Mais que isso vira mancha azul e a imagem perde a razão de
     estar ali. */
  filter: blur(10px);
  transform: scale(1.08);
}

/* O VÉU — "deixe a imagem esmaecida", pedido do usuário.
 *
 * Ele já foi um gradiente lateral: forte à direita, onde o cartão estava, e
 * leve à esquerda, para não apagar o logo. Virou UNIFORME quando o cartão foi
 * para o centro e a imagem ganhou desfoque — não há mais um lado a preservar,
 * e um gradiente lateral agora só escureceria uma borda sem motivo.
 *
 * O véu continua sendo necessário depois do desfoque: `blur` embaralha, mas
 * não escurece. Sem ele os brilhos azuis da imagem passam por baixo do cartão
 * branco e o contorno dele se perde. */
.publica__veu {
  position: absolute;
  inset: 0;
  background: rgb(8 18 38 / 62%);
}

/* ---- a marca, sobre a imagem ------------------------------------------- */
/* Ela saiu junto com a faixa navy e VOLTOU por causa do desfoque.
 *
 * O argumento da remoção era bom: texto dizendo "Nova Macapá" ao lado de uma
 * imagem que diz "NOVA MACAPÁ" em letras de um palmo é a mesma duplicação que
 * o painel geral tinha. Só que o `blur(10px)` logo acima apaga esse logo de
 * propósito — a imagem vira TEXTURA —, e a partir daí nada na página dizia de
 * quem era o sistema nem qual era.
 *
 * Cor FIXA e não token, como o resto deste bloco: esta tela não segue o tema
 * claro/escuro (a foto é escura nos dois), então branco sobre ela é o
 * contraste que se quer e não há segunda faixa a medir. */
.publica__marca {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: .35rem;
  /* A sombra não é enfeite: o véu escurece a média da foto, mas ela tem
     manchas claras, e sobre uma delas o branco puro perde a borda. Sombra
     baixa e difusa devolve o contorno sem virar relevo. */
  text-shadow: 0 1px 12px rgb(3 10 25 / 55%);
}
.publica__marca__selo {
  /* `width`/`height` também no HTML: sem eles o SVG chega depois do CSS e a
     linha inteira salta quando ele entra — na primeira tela do dia, com a
     imagem de fundo ainda carregando, o salto é o que mais se nota. */
  display: block;
  border-radius: 9px;
  box-shadow: 0 4px 14px rgb(3 10 25 / 45%);
}
.publica__marca__texto { display: flex; flex-direction: column; line-height: 1.2; }
.publica__marca__empresa {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  /* Não é branco puro: a empresa é a linha de apoio, e branco nos dois faria
     as duas competirem. O papel de parede já afirma o nome dela. */
  color: rgb(255 255 255 / 72%);
}
.publica__marca__sistema {
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff;
}

/* ---- a área do cartão -------------------------------------------------- */
/* AO CENTRO. Ele já esteve à direita, para não cobrir o logo da imagem — e a
   razão era boa enquanto o logo estava nítido. Com o desfoque ele some, a
   imagem vira fundo, e o centro volta a ser o lugar do formulário: é para
   onde o olho vai primeiro e onde o cursor já está. */
.publica__area {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.1rem;
  padding: 2rem 1.5rem;
}

.cartao--acesso {
  width: 100%;
  max-width: 400px;
  padding: 2rem 1.9rem 1.75rem;
  border: 0;
  border-radius: var(--raio-grande);
  /* Sombra funda: o cartão precisa flutuar sobre a foto, e a sombra normal
     do sistema (feita para cartão sobre cinza-claro) some sobre azul-escuro. */
  box-shadow: 0 24px 60px rgb(3 10 25 / 45%), 0 2px 8px rgb(3 10 25 / 30%);
}
.cartao--acesso .cartao__titulo { font-size: 1.32rem; margin-bottom: .2rem; }
.cartao--acesso .cartao__subtitulo { margin-bottom: 1.35rem; }
.cartao--acesso .formulario { gap: 1rem; }
.cartao--acesso .formulario__acoes { margin-top: .35rem; }

/* campo com ícone dentro ------------------------------------------------- */
.campo-com-icone { position: relative; display: block; }
.campo-com-icone__icone {
  position: absolute;
  left: .7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--tinta-fraca);
  pointer-events: none;
}
.campo-com-icone .campo { padding-left: 2.1rem; }

/* o rodapé do cartão ----------------------------------------------------- */
.acesso__ajuda {
  margin: 1.3rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--borda);
  font-size: .78rem;
  color: var(--tinta-media);
  text-align: center;
}

.aviso-tentativas {
  margin: 0;
  font-size: .76rem;
  color: var(--atencao);
  font-weight: 600;
}

/* o rodapé da tela, sobre a imagem --------------------------------------- */
.publica__rodape {
  margin: 0;
  font-size: .7rem;
  letter-spacing: .04em;
  color: rgb(255 255 255 / 55%);
  text-align: center;
  width: 100%;
  max-width: 400px;
}

/* ---- telas estreitas ---------------------------------------------------- */
/* O véu aperta e o desfoque afrouxa. Os dois pelo mesmo motivo: num celular a
   imagem está muito mais recortada, sobra pouca composição para reconhecer, e
   o que ela precisa ser ali é fundo escuro e estável atrás do formulário. */
@media (max-width: 780px) {
  .publica__area { padding: 1.5rem 1.1rem; }
  .publica__marca__sistema { font-size: 1.08rem; }
  .publica__marca__selo { width: 40px; height: 40px; }
  .publica__veu { background: rgb(8 18 38 / 74%); }
  .publica__fundo img { filter: blur(6px); }
  .cartao--acesso { padding: 1.6rem 1.35rem 1.4rem; }
}

@media (max-height: 620px) {
  /* Celular deitado: centralizar deixaria o botão "Entrar" fora da tela. */
  .publica__area { justify-content: flex-start; }
}

/* ----------------------------------------------------------- responsivo */
/* O bloco que existia aqui escondia `.publica__painel` e achatava o cartão no
   celular. Saiu junto com o painel: hoje a tela de entrada é a imagem inteira
   com o cartão por cima, e o ajuste dela para tela estreita mora no bloco da
   própria tela, logo acima — perto do que ele ajusta. */

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; grid-template-areas: "area"; }

  .topo__menu { display: block; }

  .lateral {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--lateral-largura);
    transform: translateX(-100%);
    transition: transform var(--transicao);
    z-index: 95;
  }
  .lateral--aberta { transform: translateX(0); }

  .conteudo { padding: 1rem; }
  .grade--2, .grade--3, .grade--4, .grade--ficha { grid-template-columns: 1fr; }
  .conteudo__cabecalho { align-items: flex-start; }

  /* Em tela estreita sobra pouco espaço no topo: fica só a hora. */
  .relogio { padding: .2rem .5rem; }
  .relogio__texto small { display: none; }
}

@media (max-width: 420px) {
  .relogio__icone { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════
   ACESSOS
   ═══════════════════════════════════════════════════════════════════════ */

/* A legenda dos três níveis, no alto da tela. Antes eles eram só três
   cabeçalhos de coluna, e quem nunca ouviu a regra tinha de adivinhar onde
   estava a linha entre operar e gerir. Cartões baixos e sem sombra: é
   explicação, não conteúdo — não pode competir com as tabelas abaixo. */
.niveis-legenda { margin-bottom: 1.2rem; }
.niveis-legenda .cartao {
  padding: .7rem .85rem;
  box-shadow: none;
  background: var(--superficie-alt);
}
.niveis-legenda .cartao__titulo {
  margin: 0 0 .2rem;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-media);
}
.niveis-legenda .cartao__nota {
  margin: 0;
  text-align: left;
  font-size: .76rem;
  color: var(--tinta-fraca);
  line-height: 1.4;
}

/* Zero explícito, e não um traço. O "—" deixava em aberto se era ninguém ou
   se aquele nível não existia naquela área — e os três existem em todas.
   Apagado o bastante para a linha com gente saltar aos olhos. */
.contagem-zero {
  font-variant-numeric: tabular-nums;
  color: var(--tinta-fraca);
  opacity: .45;
}

/* A faixa que separa um sistema do outro na matriz de um usuário. Sem ela, as
   35 linhas de rádio viram um paredão em que ninguém acha a que procura. */
.linha-sistema th {
  padding-top: .85rem;
  background: var(--superficie-alt);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-media);
  text-align: left;
}
.linha-sistema th .icone {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-right: .3rem;
}
/* A frente de trabalho recuada: mostra que ela pertence ao sistema de cima. */
.celula-frente { padding-left: 1.6rem; }

/* O cabeçalho de cada sistema na tela de acessos: ícone e nome na mesma
   linha, com a contagem de pessoas embaixo. */
.cartao__cabecalho-tabela .cartao__titulo .icone {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  margin-right: .35rem;
}

/* Lista de caixas de seleção longa — a adesão em lote ao convênio tem 178
   linhas. Em colunas e com rolagem própria: numa coluna só, o botão de salvar
   ficaria a doze telas de distância. */
.lista-selecao {
  max-height: 22rem;
  overflow-y: auto;
  padding: .2rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  background: var(--superficie-alt);
}
.lista-selecao ul { list-style: none; margin: 0; padding: 0; columns: 260px 3; }
.lista-selecao li { break-inside: avoid; }
.lista-selecao label {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .25rem .4rem;
  border-radius: var(--raio-pequeno);
  font-size: .8rem;
  cursor: pointer;
}
.lista-selecao label:hover { background: var(--info-fundo); }
.lista-selecao input { flex: none; }

/* ═══════════════════════════════════════════════════════════════════════
   DOCUMENTO — o que sai impresso e a pessoa guarda
   ═══════════════════════════════════════════════════════════════════════

   O extrato do convênio é o primeiro, e o gabarito dos próximos (folha,
   ficha de EPI, ordem de higienização). A regra: o que está na tela é o que
   sai no papel — se a marca aparecesse só na impressão, o primeiro a notar a
   diferença seria quem imprimiu errado. */

.documento__cabecalho {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: .8rem;
  margin-bottom: 1.1rem;
  border-bottom: 2px solid var(--azul-medio);
}
.documento__marca { display: flex; align-items: center; gap: .6rem; }
/* `max-height` com `width: auto` aceita qualquer proporção — a logo atual é
   quase quadrada (253×240), e uma horizontal caberia sem tocar no CSS.
   Sem `border-radius`: o PNG tem fundo transparente, e arredondar cortaria o
   desenho em vez de emoldurá-lo. */
.documento__marca img {
  display: block;
  max-height: 42px;
  width: auto;
}
.documento__empresa { display: grid; line-height: 1.25; }
.documento__empresa strong { font-size: 1rem; color: var(--tinta); }
.documento__empresa small { font-size: .7rem; color: var(--tinta-fraca); }

.documento__identificacao { text-align: right; }
.documento__titulo {
  margin: 0;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-media);
}
.documento__data { margin: .15rem 0 0; font-size: .7rem; color: var(--tinta-fraca); }

/* Os dados da pessoa em blocos, e não numa linha de subtítulo: matrícula e
   setor são o que ela confere primeiro, e em texto corrido o olho tem de
   procurar. */
.documento__pessoa { margin-bottom: 1.1rem; }
.documento__nome {
  margin: 0 0 .55rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--tinta);
}
.documento__dados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .55rem .9rem;
  margin: 0;
}
.documento__dados dt {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
.documento__dados dd { margin: .1rem 0 0; font-size: .84rem; color: var(--tinta); }

.documento__secao {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  flex-wrap: wrap;
  margin: 1.4rem 0 .6rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-media);
}
.documento__secao-nota {
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta-fraca);
}

/* Assinatura: só no papel. Na tela seria uma linha em branco sem função. */
.documento__assinatura { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   IMPRESSÃO — o que sai no papel
   ═══════════════════════════════════════════════════════════════════════

   Seis telas imprimem: extrato e folha da farmácia, requisição e reembolso,
   relatórios do RH e folha de multas do tráfego. Todas passam por aqui — um
   bloco só, e não um por módulo, senão o extrato sai com uma margem e a folha
   com outra.

   **PDF é a tela impressa**, e não um gerador à parte. É a decisão do
   CLAUDE.md: `weasyprint` não entra, e "imprimir para PDF" do navegador dá o
   mesmo arquivo — com a vantagem de o relatório e o PDF nunca divergirem,
   porque são o mesmo HTML. O preço é que este bloco tem de ser levado a
   sério. */

@page {
  size: A4;
  /* 12mm dá margem de encadernação sem desperdiçar folha. O navegador
     acrescenta cabeçalho e rodapé próprios (URL e data) fora dela — quem
     imprime pode desligá-los em "Mais definições". */
  margin: 12mm 12mm 14mm;
}

@media print {
  /* ---- o que não vai para o papel --------------------------------------- */
  /* Navegação, botões e filtros: no papel são tinta que não vira informação,
     e pior, sugerem que dá para clicar. */
  .lateral,
  .lateral-fundo,
  .topo,
  .conteudo__acoes,
  .filtros,
  .barra-ferramentas,
  .paginacao,
  .pular-para-conteudo,
  .mensagem,
  .alertas,
  .tabela__acoes,
  .tabela__acoes-coluna { display: none !important; }

  /* O título da tela repete o que o cabeçalho do documento já diz — no
     extrato, o nome do colaborador saía duas vezes na mesma folha.

     `:has()` porque o cabeçalho é irmão ANTERIOR do documento, e CSS não
     seleciona para trás: o pai é o único caminho. Onde `:has()` não existir, a
     regra é ignorada e o título volta a aparecer — repetido, mas não quebrado,
     que é a degradação certa para uma regra de aparência. */
  .conteudo:has(.documento) .conteudo__cabecalho { display: none !important; }

  /* ---- a folha ---------------------------------------------------------- */
  .app { display: block; }
  .area { display: block; }
  .conteudo {
    max-width: none;
    padding: 0;
  }

  /* Fundo branco e tinta preta: o navegador não imprime cor de fundo por
     padrão, então um texto claro sobre fundo tingido sai claro sobre branco —
     ilegível. Fixar aqui é mais seguro que confiar no que o usuário marcou
     em "Gráficos de fundo". */
  body,
  .conteudo { background: #fff !important; color: #000 !important; }

  /* 10.5pt é o corpo de documento impresso. A tela usa 13px, que no papel
     fica grande e gasta folha. */
  body { font-size: 10.5pt; line-height: 1.35; }

  /* ---- cartões e tabelas ------------------------------------------------ */
  .cartao {
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    margin-bottom: .6rem;
  }
  .cartao--tabela { break-inside: avoid; }
  .tabela { font-size: 9.5pt; }
  .tabela thead th {
    background: #f1f1f1 !important;
    color: #000 !important;
    border-bottom: 1px solid #000;
  }
  .tabela td, .tabela th { padding: 4px 6px; }
  /* Cabeçalho de tabela se repete em cada página: sem isso, a segunda folha
     de uma tabela longa é uma grade de números sem nome de coluna. */
  thead { display: table-header-group; }
  tr, .indicador { break-inside: avoid; }

  /* A etiqueta perde o fundo tingido e fica com contorno: "Paga" em verde
     claro sobre branco some no papel. */
  .etiqueta {
    background: transparent !important;
    color: #000 !important;
    border: 1px solid #666;
  }

  /* AS GRADES VOLTAM A TER COLUNAS NO PAPEL.
   *
   * A folha A4 em retrato tem ~794px, então o `@media (max-width: 900px)` da
   * tela estreita DISPARA na impressão e achata `.grade--3` numa coluna só.
   * No extrato do convênio isso empilhava os três cartões (limite, em aberto,
   * saldo) um debaixo do outro e comia meia folha — foi o que o usuário viu:
   * "da forma que está ocupa muito espaço".
   *
   * A regra de celular está certa para celular; o que faltava era o papel
   * dizer que ele não é um celular. */
  .grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .grade { gap: .5rem !important; }

  .indicador {
    box-shadow: none !important;
    border: 1px solid #999 !important;
    padding: .4rem .5rem !important;
  }
  .indicador__valor { font-size: 1.05rem; color: #000 !important; }
  .indicador__rotulo { font-size: .62rem; margin-bottom: .15rem; }
  .indicador__ajuda { font-size: .58rem; margin-top: .15rem; }

  /* ---- documento -------------------------------------------------------- */
  .documento__cabecalho {
    border-bottom: 2px solid #000;
    padding-bottom: .35rem;
    margin-bottom: .6rem;
  }
  .documento__secao { break-after: avoid; }
  .documento__nome { font-size: 1.05rem; margin-bottom: .35rem; }

  /* O EXTRATO É ACHATADO de propósito: ele é uma folha que a pessoa confere,
     assina e guarda, e cada milímetro a mais vira uma segunda folha que
     ninguém precisava. O do convênio saía em duas para seis compras. */
  .documento__pessoa { margin-bottom: .6rem; }
  .documento__dados { gap: .2rem 1.6rem !important; font-size: .72rem; }
  .documento__secao { margin: .5rem 0 .35rem !important; font-size: .8rem; }

  /* A assinatura não vai sozinha para a última folha. `break-inside` a mantém
     inteira; a margem menor evita que ela empurre a si mesma para a página
     seguinte, que foi o que aconteceu no primeiro extrato impresso — duas
     folhas para meia página de conteúdo. */
  .documento__assinatura {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    margin-top: 2rem;
    padding-top: .5rem;
    break-inside: avoid;
    text-align: center;
  }
  .documento__linha {
    display: block;
    border-top: 1px solid #000;
    margin-bottom: .3rem;
  }
  .documento__assinatura p { margin: 0; font-size: .8rem; font-weight: 600; }
  .documento__assinatura small { font-size: .68rem; color: #444; }

  /* Link no papel é texto. Sublinhado e azul sugerem clique que não existe. */
  a { color: #000 !important; text-decoration: none !important; }

  /* ---- gráficos --------------------------------------------------------- */
  /* O canvas imprime como imagem, e o `beforeprint` do `graficos.js` chama
     `resize()` antes para ele não sair esticado na largura da folha. Aqui só
     a altura: 320px de tela viram um gráfico que ocupa meia página. */
  .grafico { height: 240px; break-inside: avoid; }
  .grafico--alto { height: 260px; }

  /* Os botões do fatiador não vão para o papel — quem lê a folha não troca de
     centro de custo. O nome do que está sendo mostrado fica (`[data-fatia-nome]`),
     senão a folha traz um gráfico sem dizer de quem ele é. */
  .fatiador { display: none !important; }
  .grade--fatiada { display: block; }

  /* O detalhamento sai ABERTO: o `app.js` abre todo `<details>` antes de
     imprimir e devolve ao estado anterior depois. Relatório que imprime só o
     que estava expandido chega ao gestor pela metade, e ninguém percebe que
     faltou — não há nada na folha dizendo que havia mais. */
  .detalhamento__resumo { font-size: 9pt; color: #000 !important; }
  .detalhamento__resumo::before { display: none; }

  .matriz { font-size: 8.5pt; }
  .matriz thead th { background: #f1f1f1 !important; color: #000 !important; }
  .matriz__rotulo, .matriz__media,
  .matriz tr.matriz__destaque td, .matriz tr.matriz__meta td {
    background: transparent !important;
    color: #000 !important;
  }
  .matriz tr.matriz__destaque td, .matriz tr.matriz__meta td { font-weight: 700; }
}