/* ==========================================================================
   tradehub GPS Vision — camada de tokens
   Extraído do handoff (aaaa.pdf).

   PROCEDÊNCIA DE CADA VALOR
   [exato]  lido do preenchimento vetorial do PDF ou do texto do documento
   [medido] estimado da geometria/imagem do handoff — confirmar com a fonte
   ========================================================================== */

:root {
  /* --- NAVY: "navy carrega" -------------------------------- [exato] ----- */
  --navy-900: #071925;   /* fundo mais profundo */
  --navy-800: #0B2535;   /* base — fundo da aplicação */
  --navy-700: #12303F;   /* card */
  --navy-600: #1A3F52;   /* elevação / hover */
  --navy-500: #245068;   /* borda */

  /* --- TEXTO ---------------------------------------------- [exato] ----- */
  --texto: #E8EFF4;      /* primário */
  --texto-nav: #CFD8E0;  /* item de navegação em repouso ------ [derivado] */
  --texto-2: #93AAB9;    /* secundário — o mais usado no handoff */
  --texto-4: #6B8494;    /* rótulo de grupo ------------------ [derivado] */
  --texto-3: #3F5C6B;    /* desabilitado / marca d'água */
  /* Os dois [derivado] fecham degraus que faltavam na escala. O handoff
     da sidebar usa cinco níveis de texto; o app tinha três, e sem eles o
     item em repouso ficaria tão aceso quanto o ativo, e o rótulo de grupo
     tão forte quanto o texto secundário. Saem da rampa navy do app, não do
     design system de origem — que é lilás e destoaria ao lado do resto.
     Equivalem a --color-neutral-300 e --color-neutral-600 do Nocturne. */

  /* --- MAGENTA: "magenta decide" -------------------------- [exato] -----
     Regra do handoff: magenta SÓ em ação primária, item ativo, seleção,
     caixas da IA, série principal de gráfico e foco. Nada mais. */
  --magenta: #B400FF;
  --magenta-400: #D46BFF;   /* texto em magenta sobre navy (>=14px) */
  --magenta-600: #8A00C4;
  --magenta-800: #5C0083;
  --magenta-pilula: #5C0083;  /* fundo de contador e avatar --- [derivado]
     Par fixo com --magenta-claro: os dois viram juntos quando o tema muda.
     Não usa --magenta-800 porque aquele é o magenta de AÇÃO (botão primário
     pressionado) — clareá-lo no tema claro faria o botão acender ao ser
     apertado, em vez de escurecer. */
  --magenta-900: #2E1440;
  --magenta-veu: #2B0040;   /* fundo de área selecionada */
  --magenta-claro: #E6C8F7; /* texto sobre magenta sólido */

  /* --- ESTADO DA AUDITORIA -------------------------------- [exato] ----- */
  --aprovada: #3ED9A4;   /* foto válida, critérios atendidos */
  --reprovada: #FF5A6E;  /* foto nula, borrada ou fora de critério */
  --revisar: #FFC24B;    /* IA em dúvida, decisão humana obrigatória */
  --pendente: #93AAB9;   /* na fila, ainda não auditada */

  --aprovada-veu: #04231A;

  /* --- TIPOGRAFIA ----------------------------------------- [exato] -----
     Inter em quatro pesos. Hierarquia por tamanho e espaço, não por peso.
     Peso 600 é reservado a números; texto para em 500. */
  --fonte: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --t-display: 40px;  --p-display: 500;
  --t-titulo:  26px;  --p-titulo:  500;
  --t-secao:   19px;  --p-secao:   500;
  --t-corpo:   15px;  --p-corpo:   400;
  --t-apoio:   13px;  --p-apoio:   400;   /* piso do texto de leitura */
  --t-rotulo:  11px;  --p-rotulo:  500;   /* caixa alta, até 3 palavras */
  --t-numero:  74px;  --p-numero:  600;

  /* --- ALVOS DE TOQUE ------------------------------------- [exato] ----- */
  --botao-icone: 38px;   /* "ícone-botão 38px" */
  --alvo-minimo: 44px;   /* "alvo mínimo 44px com padding" */

  /* --- LAYOUT --------------------------------------------- [medido] ----
     Largura da coluna de navegação. Fechada cabe o ícone e o alvo de toque. */
  --lateral: 244px;          /* handoff do menu lateral */
  --lateral-fechada: 60px;   /* botão de 38px + respiro (etapa 2) */
  /* Teto da coluna de conteudo. Tabela e grafico ganham com largura; texto
     corrido nao - por isso quem segura a linha de leitura e o `max-width` em
     ch de cada paragrafo, e nao a caixa inteira. */
  --largura-conteudo: 1560px;

  /* --- RAIOS ---------------------------------------------- [medido] ---- */
  --raio-pill: 999px;    /* botões e tags: pílula */
  --raio-campo: 10px;    /* input, segmented, card de foto */
  --raio-card: 14px;     /* painel / card de conteúdo */

  /* --- ESPAÇAMENTO ---------------------------------------- [medido] ---- */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px;

  /* --- SOMBRA --------------------------------------------- [medido] ----
     O handoff usa elevação por cor (navy-700 sobre navy-800), não por sombra.
     A única sombra visível é o brilho de foco/seleção em magenta. */
  --sombra-card: none;
  --sombra-magenta: 0 0 0 1px var(--magenta), 0 4px 20px -6px rgba(180, 0, 255, .55);

  /* --- FOCO ----------------------------------------------- [exato] ----- */
  --anel-foco: 2px solid #B400FF;
}

/* ==========================================================================
   BASE
   ========================================================================== */
* { box-sizing: border-box; }

/* O atributo `hidden` vale menos que qualquer `display` declarado aqui - por
   isso ele precisa desta linha para continuar significando "nao mostre". */
[hidden] { display: none !important; }

body {
  margin: 0;
  background-color: var(--navy-800);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: var(--t-corpo);
  font-weight: var(--p-corpo);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Alinhamento sempre à esquerda; centralizado apenas em estado vazio. */
body, td, th, p, h1, h2, h3 { text-align: left; }
.vazio { text-align: center; }

a { color: var(--magenta-400); }          /* nunca magenta puro em texto */
a:hover { color: var(--texto); }

/* Foco visível e único em toda a interface. */
:focus-visible {
  outline: var(--anel-foco);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==========================================================================
   TIPOGRAFIA
   ========================================================================== */
.display { font-size: var(--t-display); font-weight: var(--p-display); line-height: 1.15; letter-spacing: -.02em; margin: 0; }
.titulo  { font-size: var(--t-titulo);  font-weight: var(--p-titulo);  line-height: 1.25; letter-spacing: -.01em; margin: 0; }
.secao   { font-size: var(--t-secao);   font-weight: var(--p-secao);   line-height: 1.35; margin: 0; }
.corpo   { font-size: var(--t-corpo);   font-weight: var(--p-corpo); }
.apoio   { font-size: var(--t-apoio);   font-weight: var(--p-apoio);   color: var(--texto-2); }

.rotulo {
  font-size: var(--t-rotulo);
  font-weight: var(--p-rotulo);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--texto-2);
}

/* Peso 600 é exclusivo de número. Todo número tabular. */
.numero {
  font-size: var(--t-numero);
  font-weight: var(--p-numero);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -.03em;
}
.num, td.num, th.num, .tabular { font-variant-numeric: tabular-nums; }
td.num, th.num { text-align: center; }

/* ==========================================================================
   MARCA — símbolo + wordmark + Vision
   Vetorial de propósito: o lockup precisa ficar nítido em qualquer tamanho e
   em qualquer densidade de tela, e o símbolo vira o ícone da aba sem retrabalho.
   O magenta aqui é a marca — é o sétimo uso permitido, além dos seis da
   interface, e vale só dentro de `.marca`.
   ========================================================================== */
.marca { display: inline-flex; align-items: center; gap: var(--e-3); text-decoration: none; }

.marca-simbolo { width: 36px; height: 36px; flex: none; display: block; }
.marca-simbolo rect { fill: var(--magenta); }
.marca-simbolo text { fill: #fff; }

.marca-texto { display: flex; flex-direction: column; gap: 1px; }

.marca-wordmark {
  font-size: 22px; font-weight: 700; line-height: 1;
  letter-spacing: -.025em; color: var(--texto);
}
.marca-wordmark b { font-weight: 700; color: var(--magenta); }

.marca-vision {
  font-size: 11px; font-weight: 500; line-height: 1;
  letter-spacing: .42em; color: var(--texto-2);
  text-transform: uppercase;
}

/* Compacto: só o símbolo, quando não há largura para o lockup inteiro. */
@media (max-width: 420px) {
  .marca-texto { display: none; }
}


/* ==========================================================================
   APLICAÇÃO — MENU LATERAL
   A navegação sai do topo e vira coluna fixa: a auditoria aberta, as recentes
   e a administração ficam a um clique de qualquer tela, sem voltar para casa.

   Três estados, e o de celular é outro componente, não o mesmo apertado:
   . aberta   — 248px, ícone + rótulo
   . fechada  — 76px, só ícone (guardado entre sessões; só no desktop)
   . gaveta   — até 900px, sai por cima do conteúdo com véu
   O estado mora no <html> para ser aplicado antes do primeiro pixel: escrito
   no .app depois da pintura, a coluna nasceria larga e pularia para estreita.
   ========================================================================== */
.app {
  display: grid;
  grid-template-columns: var(--lateral) minmax(0, 1fr);
  min-height: 100vh;
}

.lateral {
  position: sticky; top: 0; align-self: start;
  height: 100vh; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column;
  padding: 16px 12px 12px;
  /* Gradiente em vez de chapado: dá profundidade à coluna sem precisar de
     sombra, que em fundo escuro vira borrão. */
  background: linear-gradient(180deg, var(--navy-700) 0%, var(--navy-800) 60%);
  border-right: 1px solid var(--navy-600);
}

.lateral .marca { padding: 0 4px 16px; }
.lateral nav { display: flex; flex-direction: column; gap: 2px; }

/* Régua que desvanece nas pontas. É regra do design system: borda sólida
   corta a coluna em duas, o gradiente separa sem interromper. */
.lateral .regua {
  height: 1px; margin: 0 4px 14px; border: 0; flex: none;
  background: linear-gradient(90deg, transparent, var(--navy-500) 48px,
                              var(--navy-500) calc(100% - 48px), transparent);
}

/* Quem rola é a lista, não a coluna: sair e tema não podem cair abaixo da
   dobra só porque existem muitas auditorias recentes. */
.lateral { overflow: hidden; }
.navegacao {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--e-5);
}

/* Rótulo de grupo: não é item nem acordeão — é só rótulo. A régua ocupa o
   resto da linha, o que separa os grupos sem gastar altura com um divisor. */
.lateral .grupo {
  display: flex; align-items: center; gap: 8px;
  padding: 22px 10px 8px;
  /* O handoff pede 10px; o sistema do app não desce de 11px em tela, e
     `--t-rotulo` existe exatamente para rótulo em caixa alta. 1px não vale
     furar a regra de acessibilidade da própria casa. */
  font-size: var(--t-rotulo); font-weight: var(--p-rotulo);
  text-transform: uppercase; letter-spacing: .16em; color: var(--texto-4);
}
.lateral .grupo::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--navy-500), transparent);
}
/* O primeiro grupo da coluna não leva o respiro de 22px: ele já vem logo
   abaixo da régua da marca. */
.navegacao > nav:first-child .grupo { padding-top: 0; }

/* --------------------------------------------------------------------------
   Item de navegação — seis estados.

   O ativo NÃO é mais magenta sólido. Fundo cheio na cor de ação faz o item
   parecer um botão que executa algo; ele só diz onde você está. A tinta em
   gradiente mais a barra de accent dizem a mesma coisa sem gritar, e liberam
   o magenta sólido para o que de fato age.
   -------------------------------------------------------------------------- */
.lateral nav a {
  position: relative;                       /* âncora da barra do ativo */
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--texto-nav); text-decoration: none;
  font-size: 13.5px; font-weight: 400; line-height: 1.3;
  transition: background-color 120ms ease, color 120ms ease;
}
.lateral nav a i { font-size: 18px; flex: none; color: var(--texto-2); }

.lateral nav a:hover { background: var(--navy-600); color: var(--texto); }
.lateral nav a:hover i { color: var(--texto-nav); }

/* Item ativo: tinta que desvanece para a direita + barra de accent à esquerda.
   Hover em item já ativo mantém o tratamento de ativo — sobrepor o cinza
   apagaria a única marca de "você está aqui". */
.lateral nav a.ativo,
.lateral nav a.ativo:hover {
  background: linear-gradient(90deg, var(--magenta-veu), transparent);
  color: var(--magenta-claro); font-weight: 500;
}
.lateral nav a.ativo i,
.lateral nav a.ativo:hover i { color: var(--magenta); }
.lateral nav a.ativo::before {
  content: ""; position: absolute; left: 0; top: 7px; bottom: 7px;
  width: 2px; border-radius: 2px; background: var(--magenta);
}

/* Foco de teclado: sempre o anel do sistema, nunca o do navegador — que em
   fundo escuro some. `:focus-visible` para o clique de mouse não acender. */
.lateral nav a:focus-visible {
  background: var(--navy-600); color: var(--texto);
  outline: 2px solid var(--magenta); outline-offset: 2px;
}
.lateral nav a:focus-visible i { color: var(--texto-nav); }

.lateral nav a:active,
.lateral nav a.ativo:active {
  background: var(--magenta-veu); color: var(--magenta-400);
}
.lateral nav a:active i { color: var(--magenta-400); }

/* Sem permissão: a área existe, você não alcança. Hoje o app esconde esses
   itens (ver base.html) e o handoff aceita as duas leituras; o estado fica
   pronto para quando o produto quiser sinalizar em vez de omitir. */
.lateral nav a[aria-disabled="true"] {
  opacity: .45; pointer-events: none;
}
.lateral nav a[aria-disabled="true"] .cadeado {
  margin-left: auto; font-size: 14px; color: var(--texto-2);
}

/* Contador no item — só aparece quando há o que contar. Zero não é notícia. */
.lateral nav .contador {
  margin-left: auto; flex: none;
  padding: 1px 7px; border-radius: var(--raio-pill);
  background: var(--magenta-pilula); color: var(--magenta-claro);
  font-size: 10.5px; font-weight: 500; line-height: 1.5;
}

/* Você está na tela da conta. Anel em vez de fundo cheio: o cartão já tem
   fundo próprio, e magenta sólido aqui competiria com o item ativo da
   navegação. O seletor antigo (.usuario.ativo) era código morto — a classe
   no template é `bloco-usuario`, que `.usuario` não casa. */
.bloco-usuario.ativo { box-shadow: 0 0 0 1px var(--magenta); }

/* Seleção — a auditoria aberta na lista. Sólido nos dois seria dizer duas
   vezes "você está aqui", em lugares diferentes. */
.lateral nav a.aberta { background: var(--magenta-veu); color: var(--texto); }

/* Rótulo de uma linha: nome de planilha é longo e não pode empurrar a coluna. */
.rotulo-nav { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Item de duas linhas: nome em cima, quando e quanto embaixo. */
.lateral .duas-linhas { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.lateral .duas-linhas > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral .duas-linhas .rotulo { color: var(--texto-2); letter-spacing: .03em; }
.lateral nav a:has(.duas-linhas) { padding-top: var(--e-2); padding-bottom: var(--e-2); }
.lateral nav a.ativo .duas-linhas .rotulo { color: rgba(255, 255, 255, .78); }
/* Sobre o véu do tema claro o secundário cai para 4,37:1 — abaixo de AA. */
.lateral nav a.aberta .duas-linhas .rotulo { color: var(--texto); }

/* Auditoria na lista: o ponto de estado vale mais que o ícone repetido. */
.lateral .ponto {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--pendente);
}
.lateral .ponto--concluido { background: var(--aprovada); }
.lateral .ponto--rodando   { background: var(--revisar); }
.lateral .ponto--erro      { background: var(--reprovada); }
.lateral nav a.ativo .ponto { background: #fff; }

/* Bloco de quem está logado: avatar, nome, papel e a saída à direita. Fica
   num cartão próprio para não se confundir com item de navegação — clicar ali
   abre a conta, não muda de tela. */
.rodape-lateral { margin-top: auto; padding-top: 12px; }

/* Cartão em vez de bloco com borda em cima: a aresta de 1px por sombra separa
   sem gastar uma linha inteira da coluna, e o cartão diz que aquilo não é
   navegação — clicar ali abre a conta, não muda de tela. */
.bloco-usuario {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: 8px;
  background: var(--navy-700);
  box-shadow: 0 0 0 1px var(--navy-500);
}
.bloco-usuario:hover { box-shadow: 0 0 0 1px var(--magenta-600); }
.bloco-usuario .avatar {
  background: var(--magenta-pilula); color: var(--magenta-claro);
}
/* Em 'Minha conta' o bloco fica aceso — sem isso a tela era a unica
   sem nada indicando onde se esta. Elevacao em vez de magenta: o
   rodape nao e item de navegacao. */
.bloco-usuario.ativo { background: var(--navy-600); }
.bloco-usuario .avatar {
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  /* Inicial não é ação primária nem item ativo: fora dos usos do magenta.
     Peso 500 porque é letra, não número. */
  background: var(--navy-500); color: var(--texto);
  font-size: var(--t-corpo); font-weight: 500; text-transform: uppercase;
}
.bloco-usuario .quem { min-width: 0; flex: 1; }
.bloco-usuario .quem b { display: block; color: var(--texto); font-weight: 500;
                         overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bloco-usuario .quem span { display: block; color: var(--texto-2);
                            font-size: var(--t-apoio); }
.bloco-usuario > a { display: flex; align-items: center; gap: var(--e-3);
                     flex: 1; min-width: 0; text-decoration: none; }
.bloco-usuario form { display: flex; }
.rodape-lateral .usuario {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: var(--alvo-minimo); padding: 0 var(--e-3);
  border-radius: var(--raio-campo);
  color: var(--texto-2); text-decoration: none; font-size: var(--t-apoio);
}
.rodape-lateral .usuario:hover { background: var(--navy-600); color: var(--texto); }
.rodape-lateral form { display: block; }
.rodape-lateral .botao { width: 100%; justify-content: center; }

/* --- coluna do conteúdo ------------------------------------------------- */
.conteudo { min-width: 0; display: flex; flex-direction: column; }

.barra-topo {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--e-3);
  min-height: 56px; padding: var(--e-2) var(--e-5);
  background: var(--navy-800); border-bottom: 1px solid var(--navy-500);
}
.barra-topo .direita { margin-left: auto; display: flex; align-items: center; gap: var(--e-3); }

.wrap { width: 100%; max-width: var(--largura-conteudo); margin: 0 auto;
        padding: var(--e-6) var(--e-6) var(--e-8); }

/* --- fechada: só ícone. Não existe no celular, onde a lateral é gaveta. -- */
@media (min-width: 901px) {
  :root[data-lateral="fechada"] .app { --lateral: var(--lateral-fechada); }
  :root[data-lateral="fechada"] .lateral { padding-left: var(--e-2); padding-right: var(--e-2); }
  :root[data-lateral="fechada"] .lateral .grupo,
  :root[data-lateral="fechada"] .lateral .marca-texto,
  :root[data-lateral="fechada"] .rotulo-nav,
  :root[data-lateral="fechada"] .duas-linhas,
  :root[data-lateral="fechada"] .rodape-lateral .botao span { display: none; }
  /* Some o nome, fica o ponto: sem ele a auditoria vira um quadrado vazio. */
  :root[data-lateral="fechada"] .lateral .ponto { width: 10px; height: 10px; }
  :root[data-lateral="fechada"] .lateral nav a,
  :root[data-lateral="fechada"] .rodape-lateral .usuario,
  :root[data-lateral="fechada"] .bloco-usuario { justify-content: center; padding: 0; }
  :root[data-lateral="fechada"] .bloco-usuario .quem,
  :root[data-lateral="fechada"] .bloco-usuario form { display: none; }
  :root[data-lateral="fechada"] .lateral nav { gap: var(--e-1); }
}

/* --- gaveta ------------------------------------------------------------- */
.veu-lateral { display: none; }

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    width: min(300px, 86vw); height: 100dvh;
    transform: translateX(-100%);
    transition: transform .22s ease;
  }
  :root[data-gaveta="aberta"] .lateral { transform: none; }
  :root[data-gaveta="aberta"] .veu-lateral {
    display: block; position: fixed; inset: 0; z-index: 50;
    background: rgba(7, 25, 37, .55); border: 0; padding: 0;
  }
  .wrap { padding: var(--e-5) var(--e-4) var(--e-7); }
}

/* ==========================================================================
   GRÁFICOS
   Barra fina, ponta arredondada só na ponta dos dados, valor na ponta, e a
   separação entre segmentos feita por respiro na cor do fundo — nunca por
   contorno, que adiciona tinta sem adicionar dado.

   A série é magenta, mas não o mesmo magenta nos dois temas: sobre o navy do
   card o #B400FF dá 2,9:1 e o passo claro (#D46BFF) dá 4,8:1. Tema escuro é
   escolhido, não invertido.
   ========================================================================== */
:root {
  --serie: var(--magenta-400);   /* 4,8:1 sobre o card navy */
  --trilho: var(--navy-600);
  --sobre-estado: #071925;       /* texto por cima de uma cor de estado */
  --barra-altura: 14px;

  /* Fatias da rosca. Identidade de categoria, nunca gravidade: cor de estado
     fica reservada para estado. Os tres passos passam nos seis testes de
     paleta sobre o card navy (pior dE 21,6). */
  --fatia-1: var(--magenta-400);
  --fatia-2: var(--texto);
  --fatia-3: var(--texto-2);
}
:root[data-tema="claro"] {
  --serie: var(--magenta);       /* 4,8:1 sobre o card branco */
  --sobre-estado: #FFFFFF;
  --fatia-1: var(--magenta);
  --fatia-2: var(--texto);
  --fatia-3: var(--texto-2);
}

.grafico-barras { display: grid; gap: var(--e-3); }

.barra-linha {
  display: grid; align-items: center; gap: var(--e-3);
  grid-template-columns: minmax(90px, 28%) 1fr auto;
}
.barra-rotulo {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--t-apoio); color: var(--texto);
}
.barra-trilho {
  height: var(--barra-altura); border-radius: 2px;
  background: var(--trilho);
}
.barra-marca {
  display: block; height: 100%;
  background: var(--serie);
  border-radius: 0 4px 4px 0;      /* ponta dos dados; base fica quadrada */
}
.barra-valor {
  font-size: var(--t-apoio); font-weight: 600; color: var(--texto);
  font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right;
}
/* Uma segunda linha de contexto (volume, descrição) ocupa a faixa inteira. */
.barra-apoio { grid-column: 1 / -1; margin-top: calc(var(--e-1) * -1); }

/* --- barra empilhada 100% ------------------------------------------------ */
.grafico-empilhada {
  display: flex; gap: 2px;                  /* o respiro que separa as fatias */
  height: 28px; border-radius: 4px; overflow: hidden;
  background: var(--navy-700);
}
.fatia { display: flex; align-items: center; justify-content: center; min-width: 2px; }
.fatia-rotulo {
  font-size: var(--t-apoio); font-weight: 600; color: var(--sobre-estado);
  padding: 0 var(--e-2); white-space: nowrap;
}
.fatia--reprovada { background: var(--reprovada); }
.fatia--pendente  { background: var(--pendente); }
.fatia--revisar   { background: var(--revisar); }
.fatia--aprovada  { background: var(--aprovada); }

.legenda { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5);
           margin-top: var(--e-3); font-size: var(--t-apoio); color: var(--texto-2); }
.legenda-item { display: inline-flex; align-items: center; gap: var(--e-2); }
.legenda-item b { color: var(--texto); font-weight: 600; }
.legenda .marca { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.marca--reprovada { background: var(--reprovada); }
.marca--pendente  { background: var(--pendente); }
.marca--revisar   { background: var(--revisar); }
.marca--aprovada  { background: var(--aprovada); }

/* --- rosca --------------------------------------------------------------- */
.grafico-rosca { display: flex; align-items: center; gap: var(--e-5); flex-wrap: wrap; }
.grafico-rosca svg { width: 160px; height: 160px; flex: none; }
.arco { transition: stroke-width .12s ease; }
.arco--fatia-1 { stroke: var(--fatia-1); }
.arco--fatia-2 { stroke: var(--fatia-2); }
.arco--fatia-3 { stroke: var(--fatia-3); }
.grafico-rosca .arco:hover { stroke-width: 26; }
.rosca-total { font-size: 26px; font-weight: 600; fill: var(--texto); }
.rosca-rotulo { font-size: 13px; fill: var(--texto-2); }
.legenda--coluna { flex-direction: column; align-items: flex-start; gap: var(--e-2);
                   margin-top: 0; }
.marca--fatia-1 { background: var(--fatia-1); }
.marca--fatia-2 { background: var(--fatia-2); }
.marca--fatia-3 { background: var(--fatia-3); }

/* --- dica (tooltip) ------------------------------------------------------ */
/* Abre no hover e tambem no foco do teclado: dica que so responde ao mouse
   nao existe para quem navega por tab. */
.dica { position: relative; display: inline-flex; }
.linha-criterios { display: flex; align-items: center; gap: var(--e-2);
                   margin: 0 0 var(--e-4); }
.dica-balao {
  position: absolute; top: calc(100% + var(--e-2)); right: 0; z-index: 40;
  width: max-content; max-width: 320px;
  padding: var(--e-4); border-radius: var(--raio-card);
  background: var(--navy-700); border: 1px solid var(--navy-500);
  box-shadow: 0 12px 32px -12px rgba(7, 25, 37, .6);
  font-size: var(--t-apoio); color: var(--texto-2);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
/* Ancorado a esquerda quando o gatilho fica na borda esquerda do conteudo:
   ancorar sempre a direita jogaria o balao para fora da tela. */
.dica-balao--esquerda { right: auto; left: 0; }
.dica:hover .dica-balao,
.dica:focus-within .dica-balao { opacity: 1; visibility: visible; transform: none; }
.dica-balao strong { display: block; color: var(--texto); margin-bottom: var(--e-3); }

.lista-criterios { list-style: none; margin: 0; padding: 0;
                   display: grid; gap: var(--e-2); }
.lista-criterios li { display: flex; align-items: center; justify-content: space-between;
                      gap: var(--e-4); }

/* ==========================================================================
   LISTA DE PESSOAS
   Cabecalho com acao a direita, filtro por estado, busca e acoes em texto na
   propria linha. Editar abre a linha em vez de trocar de tela: quem administra
   compara pessoas na lista, e sair dela a cada ajuste faz perder o lugar.
   ========================================================================== */
.linha-titulo { display: flex; align-items: flex-end; justify-content: space-between;
                gap: var(--e-4); flex-wrap: wrap; }

.barra-lista { display: flex; align-items: center; justify-content: space-between;
               gap: var(--e-4); flex-wrap: wrap; margin-bottom: var(--e-4); }
.barra-lista .busca { flex: 1 1 260px; max-width: 380px; }
.barra-lista .busca i { position: absolute; left: var(--e-4); top: 50%;
                        transform: translateY(-50%); color: var(--texto-2);
                        pointer-events: none; }
.barra-lista .busca { position: relative; }
.barra-lista .busca input { padding-left: 44px; }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pessoa { display: inline-flex; align-items: center; gap: var(--e-3); text-align: left; }
.avatar--tabela { width: 30px; height: 30px; font-size: var(--t-apoio); }

/* Inativo continua legivel, so perde o destaque: apagar de vez esconderia
   justamente a linha que o admin foi conferir. */
.linha--inativa td { opacity: .55; }

.acoes-linha { display: inline-flex; align-items: center; gap: var(--e-4); }
.acoes-linha form { display: inline-flex; }
.acao {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: var(--t-apoio); font-weight: 500;
  color: var(--magenta-400); text-decoration: none;
}
.acao:hover { text-decoration: underline; }
.acao--remover { color: var(--reprovada); }

.painel-edicao { display: flex; flex-wrap: wrap; align-items: flex-end;
                 gap: var(--e-3); padding: var(--e-2) 0; }
.painel-edicao .senha-inline { display: flex; align-items: flex-end; gap: var(--e-2); }

/* --- taxa dentro da tabela ----------------------------------------------- */
/* Numero sozinho obriga a comparar de cabeca linha a linha; a barra ao lado
   deixa a ordem de grandeza visivel na varredura. */
.celula-taxa { display: inline-flex; align-items: center; gap: var(--e-3);
               justify-content: center; }
.celula-taxa .trilho { width: 72px; height: 8px; border-radius: 2px;
                       background: var(--trilho); flex: none; }
.celula-taxa .trilho i { display: block; height: 100%; border-radius: 0 2px 2px 0;
                         background: var(--serie); }

/* --- painel de gráfico --------------------------------------------------- */
.grade-graficos {
  display: grid; gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}
.grafico { display: flex; flex-direction: column; gap: var(--e-4); }
.grafico h3 { margin: 0; font-size: var(--t-secao); font-weight: var(--p-secao); }
.grafico .sub { margin: calc(var(--e-3) * -1) 0 0; color: var(--texto-2);
                font-size: var(--t-apoio); }

/* ==========================================================================
   FILTROS
   Uma linha acima dos gráficos. O recorte vive na URL: assim o link que o
   usuário manda para o colega abre exatamente a mesma tela.
   ========================================================================== */
.filtros {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-3);
  padding: var(--e-4); margin-bottom: var(--e-5);
  background: var(--navy-700); border: 1px solid var(--navy-500);
  border-radius: var(--raio-card);
}
.filtros .campo { margin: 0; min-width: 168px; flex: 1 1 168px; max-width: 260px; }
.filtros .acoes { display: flex; gap: var(--e-2); margin-left: auto; }
.filtros select { width: 100%; }

.recorte-ativo {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2);
  margin: calc(var(--e-3) * -1) 0 var(--e-5); font-size: var(--t-apoio);
  color: var(--texto-2);
}


/* ==========================================================================
   BARRA DE CIMA — nome da tela, acoes, sino e tema
   ========================================================================== */
.titulo-tela {
  margin: 0; font-size: var(--t-secao); font-weight: var(--p-secao);
  color: var(--texto);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ==========================================================================
   SINO DE PROCESSOS
   Auditoria de base grande leva minutos. Sem isto era preciso ficar na tela de
   progresso; agora o andamento acompanha a pessoa e a conclusao vira aviso.
   ========================================================================== */
.sino { position: relative; display: inline-flex; }
.sino-contador {
  position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: var(--raio-pill);
  background: var(--magenta); color: #fff;          /* item ativo: algo rodando */
  font-size: var(--t-rotulo); font-weight: var(--p-rotulo);
  display: grid; place-items: center;
}
.sino--ativo i { color: var(--texto); }

.sino-painel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  width: 380px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column;
  background: var(--navy-700); border-radius: var(--raio-card);
  box-shadow: 0 0 0 1px var(--navy-500), 0 18px 40px -18px rgba(0, 0, 0, .55);
  overflow: hidden;
}

.sino-cabecalho {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-4) var(--e-4) var(--e-3);
}
.sino-cabecalho strong { font-size: var(--t-corpo); }
.sino-cabecalho .acao { margin-left: auto; }

/* Pílula "3 novas". Some quando é zero — contador permanentemente zerado ao
   lado de um título vira ruído em vez de aviso. */
.sino-chip {
  padding: 1px 8px; border-radius: var(--raio-pill);
  background: var(--magenta-pilula); color: var(--magenta-claro);
  font-size: 11px; font-weight: 500;
}

.sino-abas {
  display: flex; gap: var(--e-2);
  padding: 0 var(--e-4) var(--e-3);
}
.sino-aba {
  padding: 4px 10px; border: 0; border-radius: var(--raio-pill);
  background: transparent; color: var(--texto-2);
  font: inherit; font-size: var(--t-apoio); cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.sino-aba:hover { background: var(--navy-600); color: var(--texto); }
.sino-aba.ativa { background: var(--magenta-veu); color: var(--magenta-claro); }
.sino-aba:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }

/* Quem rola é a lista, não o painel: cabeçalho, abas e o link do rodapé
   precisam ficar alcançáveis com o painel cheio. */
.sino-rolagem { flex: 1; min-height: 0; max-height: 420px; overflow-y: auto;
                overscroll-behavior: contain; }
.sino-lista { list-style: none; margin: 0; padding: 0; }

/* Faixa de tempo. Responde "o que mudou desde que eu olhei", que é a pergunta
   de quem abre o painel. */
.sino-faixa {
  padding: var(--e-3) var(--e-4) var(--e-2);
  font-size: var(--t-rotulo); font-weight: var(--p-rotulo);
  text-transform: uppercase; letter-spacing: .12em; color: var(--texto-4);
}

.sino-link {
  display: flex; gap: var(--e-3); align-items: flex-start;
  padding: var(--e-2) var(--e-4);
  color: var(--texto); text-decoration: none;
}
.sino-link:hover { background: var(--navy-600); }
.sino-link:focus-visible { outline: 2px solid var(--magenta); outline-offset: -2px; }

/* O ESTADO MORA NO ÍCONE. Uma tarja colorida por item faria o painel virar
   semáforo e sumiria com a hierarquia. */
.sino-icone { font-size: 18px; flex: none; margin-top: 2px; color: var(--texto-2); }
.sino-item--concluido .sino-icone { color: var(--aprovada); }
.sino-item--erro .sino-icone { color: var(--reprovada); }
.sino-item--rodando .sino-icone { color: var(--pendente);
                                  animation: girar 1.6s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

.sino-corpo { min-width: 0; flex: 1; display: block; }
.sino-linha1 { display: flex; align-items: baseline; gap: var(--e-2); }
.sino-titulo {
  min-width: 0; flex: 1; font-weight: 400;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sino-hora { color: var(--texto-2); font-size: var(--t-apoio); flex: none; }
.sino-detalhe {
  display: block; color: var(--texto-2); font-size: var(--t-apoio);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* "Não lida" como marca discreta: ponto e peso do título. Fundo colorido faria
   metade do painel piscar depois de um fim de semana. */
/* Brilho, não cor: o handoff pede "marca discreta", e magenta aqui gritaria.
   A regra do sistema também reserva magenta para ação e item ativo. */
.sino-ponto {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--texto);
}
.sino-ponto--vazio { background: transparent; }
.sino-item--nova .sino-titulo { font-weight: 500; }
.sino-item--nova .sino-detalhe { color: var(--texto-nav); }

.sino-progresso { display: flex; align-items: center; gap: var(--e-2);
                  margin-top: 6px; }
.sino-barra { flex: 1; display: block; height: 3px; border-radius: 2px;
              background: var(--navy-500); overflow: hidden; }
.sino-barra i { display: block; height: 100%; background: var(--magenta);
                transition: width 300ms ease; }
.sino-pct { color: var(--texto-2); font-size: 11px; flex: none; }

/* Ações do item que falhou. Ficam fora do link porque botão dentro de link é
   ambíguo para teclado e leitor de tela. */
.sino-acoes { display: flex; gap: var(--e-2); padding: 0 var(--e-4) var(--e-3) 46px; }
.sino-acoes form { margin: 0; }
.sino-acao {
  padding: 3px 10px; border: 1px solid var(--navy-500);
  border-radius: var(--raio-pill); background: transparent;
  color: var(--texto-nav); font: inherit; font-size: var(--t-apoio);
  text-decoration: none; cursor: pointer;
}
.sino-acao:hover { border-color: var(--texto-2); color: var(--texto); }
.sino-acao:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }

.sino-vazio { padding: var(--e-6) var(--e-4); text-align: center; }
.sino-vazio i { font-size: 30px; color: var(--texto-3); }
.sino-vazio-titulo { margin: var(--e-3) 0 var(--e-2); font-weight: 500; }
.sino-vazio .apoio { max-width: 30ch; margin: 0 auto var(--e-4); }

.sino-rodape {
  display: block; padding: var(--e-3); text-align: center;
  border-top: 1px solid var(--navy-500);
  color: var(--texto-2); font-size: var(--t-apoio); text-decoration: none;
}
.sino-rodape:hover { background: var(--navy-600); color: var(--texto); }

/* --- avisos de conclusao ------------------------------------------------- */
.avisos {
  position: fixed; right: var(--e-5); bottom: var(--e-5); z-index: 70;
  display: grid; gap: var(--e-3); width: min(360px, calc(100vw - var(--e-6)));
}
.aviso {
  display: flex; align-items: flex-start; gap: var(--e-3);
  padding: var(--e-4); border-radius: var(--raio-card);
  background: var(--navy-700); border: 1px solid var(--navy-500);
  border-left: 3px solid var(--aprovada);
  box-shadow: 0 16px 40px -16px rgba(7, 25, 37, .7);
  font-size: var(--t-apoio); color: var(--texto);
}
.aviso--erro { border-left-color: var(--reprovada); }
.aviso i { font-size: 19px; color: var(--aprovada); flex: none; }
.aviso--erro i { color: var(--reprovada); }
.aviso span { flex: 1; min-width: 0; }
.aviso .botao-icone { margin: calc(var(--e-2) * -1) calc(var(--e-2) * -1) 0 0; }

/* ==========================================================================
   AREA DE ENVIO DA PLANILHA
   O input de arquivo do navegador e uma caixinha cinza que nao diz o que
   aceita nem o que fazer. Aqui o alvo e a area inteira, aceita arrastar, e o
   nome do arquivo escolhido aparece antes de enviar.
   ========================================================================== */
.envio { display: grid; gap: var(--e-4); }
.solta {
  position: relative; display: grid; place-items: center; gap: var(--e-3);
  padding: var(--e-7) var(--e-5); text-align: center;
  border: 2px dashed var(--navy-500); border-radius: var(--raio-card);
  background: var(--navy-800); cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease;
}
/* Passar o mouse ainda nao e escolher nada: so o arquivo sobre o alvo ganha
   magenta, que ali e selecao de verdade. */
.solta:hover { border-color: var(--navy-500); background: var(--navy-700); }
.solta.sobre { border-color: var(--magenta); background: var(--magenta-veu); }
.solta:focus-within { outline: var(--anel-foco); outline-offset: 2px; }
.solta input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.solta .icone-envio {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy-600); color: var(--texto-2); font-size: 26px;
}
.solta.sobre .icone-envio, .solta.tem-arquivo .icone-envio {
  background: var(--magenta-800); color: var(--texto);
}
.solta .chamada { font-size: var(--t-secao); font-weight: var(--p-secao); color: var(--texto); }
.solta .formatos { color: var(--texto-2); font-size: var(--t-apoio); }
.solta .escolhido { display: none; align-items: center; gap: var(--e-2);
                    color: var(--texto); font-size: var(--t-apoio); }
.solta.tem-arquivo .escolhido { display: inline-flex; }
.solta.tem-arquivo .chamada { display: none; }

/* ==========================================================================
   TEMA CLARO
   O sistema nasce escuro — "navy carrega, magenta decide". O claro é a mesma
   estrutura invertida, com duas correções que não são cosméticas:

   1. As cores de estado do tema escuro não sobrevivem no claro. #3ED9A4 sobre
      branco dá 1,8:1 — ilegível. Cada uma tem um par escurecido, e todos os
      pares medem >= 4,5:1 (AA) sobre o card branco.
   2. Magenta como TEXTO segue a mesma regra dos dois lados, espelhada: no
      escuro clareia (#D46BFF), no claro escurece (#8A00C4, 7,3:1). O magenta
      puro continua sendo só preenchimento de ação.
   ========================================================================== */
:root[data-tema="claro"] {
  --navy-900: #FFFFFF;   /* fundo de campo */
  --navy-800: #F2F6F9;   /* fundo da aplicação */
  --navy-700: #FFFFFF;   /* card */
  --navy-600: #E7EDF3;   /* hover / elevação */
  --navy-500: #D3DEE7;   /* borda */

  --texto: #071925;      /* 17,9:1 */
  --texto-nav: #2C4557;  /* item em repouso — 10,2:1 */
  --texto-2: #52708A;    /*  5,2:1 */
  --texto-4: #74909F;    /* rótulo de grupo — 3,4:1, decorativo pequeno */
  --texto-3: #93AAB9;    /* desabilitado, decorativo */

  --magenta-400: #8A00C4;  /* magenta como texto no claro — 7,3:1 */
  --magenta-veu: #F6E6FF;
  --magenta-claro: #5C0083;
  --magenta-pilula: #EBD3F8;  /* carrega --magenta-claro — 8,5:1 */

  --aprovada: #0B7D59;   /* 5,1:1 */
  --reprovada: #C42238;  /* 5,8:1 */
  --revisar: #9A6410;    /* 5,0:1 */
  --pendente: #52708A;

  --aprovada-veu: #E8F7F1;
  --sombra-card: 0 1px 2px rgba(7, 25, 37, .06), 0 8px 24px -16px rgba(7, 25, 37, .25);
}

/* Véus de estado precisam inverter junto: rgba clara some no fundo branco. */
:root[data-tema="claro"] .tag--aprovada  { background: #E8F7F1; border-color: #A7DCC9; }
:root[data-tema="claro"] .tag--reprovada { background: #FCE9EC; border-color: #F0B6BF; }
:root[data-tema="claro"] .tag--revisar   { background: #FBF1DE; border-color: #E3C68A; }
:root[data-tema="claro"] .card { box-shadow: var(--sombra-card); }
:root[data-tema="claro"] .botao--reprovar:hover { background: #FCE9EC; }

/* A troca de tema é animada, mas quem pediu menos movimento não recebe nenhum. */
body, .card, .botao, .tag, table, input, select, .nota {
  transition: background-color .28s ease, border-color .28s ease, color .28s ease;
}

/* ==========================================================================
   INTERRUPTOR DE TEMA
   ========================================================================== */
.tema {
  --trilho: var(--navy-600);
  --botao-tema: var(--navy-700);
  position: relative;
  width: 62px; height: 34px; flex: none;
  padding: 0; border: 1px solid var(--navy-500);
  border-radius: var(--raio-pill);
  background-color: var(--trilho);
  cursor: pointer;
  transition: background-color .32s ease, border-color .32s ease;
}
:root[data-tema="claro"] .tema { --trilho: #DCE3EA; --botao-tema: #FFFFFF; }

/* A bolinha desliza; a sombra viaja junto para dar peso ao movimento. */
.tema .bolinha {
  position: absolute; top: 3px; left: 3px;
  width: 26px; height: 26px; border-radius: 50%;
  background-color: var(--botao-tema);
  box-shadow: 0 2px 6px rgba(7, 25, 37, .35);
  display: grid; place-items: center;
  transition: transform .32s cubic-bezier(.4, 1.4, .5, 1), background-color .32s ease;
}
/* Escuro = bolinha à direita, como nas referências. */
:root:not([data-tema="claro"]) .tema .bolinha { transform: translateX(28px); }

.tema svg { position: absolute; width: 16px; height: 16px; }

/* Sol e lua ocupam o mesmo lugar e trocam por giro + escala: sem salto de
   layout e sem os dois aparecerem ao mesmo tempo. */
.tema .sol, .tema .lua { transition: opacity .26s ease, transform .32s ease; }
.tema .sol { color: #F5871F; }
.tema .lua { color: #F6D06B; }

:root[data-tema="claro"] .tema .sol { opacity: 1; transform: rotate(0) scale(1); }
:root[data-tema="claro"] .tema .lua { opacity: 0; transform: rotate(60deg) scale(.4); }
:root:not([data-tema="claro"]) .tema .sol { opacity: 0; transform: rotate(-60deg) scale(.4); }
:root:not([data-tema="claro"]) .tema .lua { opacity: 1; transform: rotate(0) scale(1); }

.tema:hover { border-color: var(--texto-3); }

@media (prefers-reduced-motion: reduce) {
  .tema .bolinha, .tema .sol, .tema .lua, .lateral,
  body, .card, .botao, .tag, table, input, select, .nota,
  .lateral nav a, .sino-aba, .sino-barra i { transition: none; }
  /* O giro do processo em andamento também para: quem pede menos movimento
     não deveria ganhar um ícone rodando no canto da tela o tempo todo. */
  .sino-item--rodando .sino-icone { animation: none; }
}

/* ==========================================================================
   BOTÕES
   ========================================================================== */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--alvo-minimo);
  padding: 0 var(--e-5);
  border: 1px solid transparent;
  border-radius: var(--raio-pill);
  font-family: inherit;
  font-size: var(--t-corpo);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s, border-color .12s, color .12s;
}

/* Primário — o único uso de magenta sólido em ação. */
.botao--primario { background-color: var(--magenta); color: #fff; }
.botao--primario:hover { background-color: var(--magenta-600); }
.botao--primario:active { background-color: var(--magenta-800); }

.botao--secundario { background: transparent; border-color: var(--navy-500); color: var(--texto); }
.botao--secundario:hover { background-color: var(--navy-600); border-color: var(--texto-2); }
.botao--secundario:active { background-color: var(--navy-700); }

/* Destrutivo. Nunca só com ícone — o rótulo é obrigatório. */
.botao--reprovar { background: transparent; border-color: var(--reprovada); color: var(--reprovada); }
.botao--reprovar:hover { background: rgba(255, 90, 110, .12); }
.botao--reprovar:active { background: rgba(255, 90, 110, .2); }

.botao--ghost { background: transparent; color: var(--texto-2); }
.botao--ghost:hover { color: var(--texto); background-color: var(--navy-700); }

.botao:disabled, .botao[aria-disabled="true"] {
  background-color: var(--magenta-800);
  border-color: transparent;
  color: rgba(232, 239, 244, .45);
  cursor: not-allowed;
}
.botao--secundario:disabled, .botao--ghost:disabled {
  background: transparent; color: var(--texto-3); border-color: var(--navy-700);
}

/* Botão de ícone: 38px de caixa, 44px de alvo via padding externo. */
.botao-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--botao-icone); height: var(--botao-icone);
  border: 1px solid var(--navy-500); border-radius: var(--raio-campo);
  background: transparent; color: var(--texto-2);
  cursor: pointer; font-size: 18px;
}
.botao-icone:hover { background-color: var(--navy-600); color: var(--texto); }
.botao-icone--ativo { background-color: var(--magenta); border-color: var(--magenta); color: #fff; }

/* ==========================================================================
   TAGS DE STATUS
   ========================================================================== */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  border-radius: var(--raio-pill);
  border: 1px solid transparent;
  font-size: var(--t-apoio);
  font-weight: 500;
  white-space: nowrap;
}
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.tag--aprovada  { color: var(--aprovada);  background: rgba(62, 217, 164, .12); border-color: rgba(62, 217, 164, .35); }
.tag--reprovada { color: var(--reprovada); background: rgba(255, 90, 110, .12); border-color: rgba(255, 90, 110, .35); }
.tag--revisar   { color: var(--revisar);   background: rgba(255, 194, 75, .12);  border-color: rgba(255, 194, 75, .35); }
.tag--pendente  { color: var(--texto-2);   background: transparent;              border-color: var(--navy-500); }
.tag--nova      { color: #fff;             background-color: var(--magenta);           border-color: var(--magenta); }
.tag--nova::before { background: #fff; }

/* ==========================================================================
   CAMPOS
   ========================================================================== */
.campo { display: block; margin-bottom: var(--e-4); }
.campo > .rotulo { display: block; margin-bottom: 6px; }

/* Sem enumerar tipos. Listar `[type="text"]` deixava password, email, number e
   date com a aparência crua do navegador — e o bug só aparecia quando alguém
   usava o tipo esquecido.
   Sem `:not()` também: cada um soma especificidade e passa a vencer regras de
   ajuste como a do campo com botão, que é o que a gente NÃO quer. Checkbox e
   radio não moram em `.campo` (vivem em `.check` e `.escolha`). */
.campo input, .campo select, .campo textarea {
  width: 100%;
  min-height: var(--alvo-minimo);
  padding: var(--e-3) var(--e-4);
  background-color: var(--navy-900);
  border: 1px solid var(--navy-500);
  border-radius: var(--raio-campo);
  color: var(--texto);
  font-family: inherit;
  font-size: var(--t-corpo);
}
.campo input::placeholder { color: var(--texto-3); }

/* O navegador injeta os próprios controles dentro de input[type=password]: o
   olho nativo do Edge e a chave do gerenciador de senhas do Chrome. Os dois
   caem em cima do nosso botão de olho, e o resultado é dois controles no mesmo
   canto fazendo coisas diferentes. */
.campo input::-ms-reveal,
.campo input::-ms-clear { display: none; }
.campo input::-webkit-credentials-auto-fill-button,
.campo input::-webkit-strong-password-auto-fill-button {
  visibility: hidden; pointer-events: none; width: 0; margin: 0;
}

/* Autofill do Chrome força fundo azul-claro e texto preto, ignorando
   background-color. box-shadow interno é o único jeito de repintar. */
.campo input:-webkit-autofill,
.campo input:-webkit-autofill:hover,
.campo input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--texto);
  -webkit-box-shadow: 0 0 0 1000px var(--navy-900) inset;
  box-shadow: 0 0 0 1000px var(--navy-900) inset;
  caret-color: var(--texto);
}
.campo input:hover, .campo select:hover { border-color: var(--texto-3); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--magenta); box-shadow: var(--sombra-magenta);
}
.campo:focus-within > .rotulo { color: var(--magenta-400); }
.campo input:disabled { color: var(--texto-3); background-color: var(--navy-800); cursor: not-allowed; }

/* Campo com ação embutida (olho da senha, limpar, buscar). O padding abre
   espaço para o botão; sem ele o texto passa por baixo. */
.campo-com-acao { position: relative; }
.campo-com-acao input { padding-right: 52px; }
.campo-com-acao .acao-campo {
  position: absolute; right: 6px; bottom: 3px;
  width: var(--botao-icone); height: var(--botao-icone);
  display: grid; place-items: center;
  background: transparent; border: 0; border-radius: var(--raio-campo);
  color: var(--texto-2); cursor: pointer; font-size: 20px;
}
.campo-com-acao .acao-campo:hover { color: var(--texto); background-color: var(--navy-600); }

/* Arquivo — área de soltar */
.campo-arquivo input[type="file"] {
  border-style: dashed; padding: var(--e-5); cursor: pointer;
}

/* Segmented — item ativo em magenta */
.segmented { display: inline-flex; padding: 4px; gap: 4px; background-color: var(--navy-900);
             border: 1px solid var(--navy-500); border-radius: var(--raio-campo); }
.segmented .botao-segmento {
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: var(--botao-icone); padding: 0 var(--e-5);
  border-radius: 8px; text-decoration: none;
  color: var(--texto-2); font-size: var(--t-apoio); font-weight: 500;
}
.segmented .botao-segmento:hover { color: var(--texto); }
.segmented button {
  min-height: var(--botao-icone); padding: 0 var(--e-5);
  border: 0; border-radius: 8px; background: transparent;
  color: var(--texto-2); font-family: inherit; font-size: var(--t-apoio);
  font-weight: 500; cursor: pointer;
}
.segmented button:hover { color: var(--texto); }
.segmented button[aria-selected="true"],
.segmented button[aria-pressed="true"],
.segmented .botao-segmento[aria-pressed="true"] {
  background-color: var(--magenta); color: #fff;
}

/* Toggle / radio — seleção em magenta */
.check { display: flex; gap: var(--e-3); align-items: flex-start;
         padding: var(--e-3) 0; font-size: var(--t-corpo); cursor: pointer; }
.check input { accent-color: var(--magenta); width: 18px; height: 18px; margin: 2px 0 0; flex: none; }

/* ==========================================================================
   SUPERFÍCIES
   ========================================================================== */
.card {
  background-color: var(--navy-700);
  border: 1px solid var(--navy-500);
  border-radius: var(--raio-card);
  padding: var(--e-5);
}
/* Cartao de numero: valor e rotulo centralizados no mesmo eixo. Encostados a
   esquerda, o rotulo curto ("CUSTO") e o valor largo ("US$ 0,00") ficavam com
   dois eixos diferentes dentro do mesmo cartao. */
.card--kpi { padding: var(--e-4) var(--e-5); text-align: center; }
.card--kpi .valor { font-size: 34px; font-weight: 600; font-variant-numeric: tabular-nums;
                    line-height: 1.1; text-align: center; }
.card--kpi .rotulo { display: block; text-align: center; }
/* Cliente: e nome, nao numero - cabe mais letra e menos corpo. */
.card--cliente .valor { font-size: var(--t-titulo); letter-spacing: .01em;
                        overflow-wrap: anywhere; }
.card--destaque { border-color: var(--magenta); background-color: var(--magenta-veu); }

.nota {
  background-color: var(--navy-700); border: 1px solid var(--navy-500);
  border-left: 3px solid var(--revisar);
  border-radius: 0 var(--raio-campo) var(--raio-campo) 0;
  padding: var(--e-4) var(--e-5); font-size: var(--t-apoio);
}
.nota--erro { border-left-color: var(--reprovada); }
.nota--ok { border-left-color: var(--aprovada); }

/* Card de foto */
.foto-card { border: 1px solid var(--navy-500); border-radius: var(--raio-campo);
             overflow: hidden; background-color: var(--navy-700); position: relative; }
.foto-card img { width: 100%; height: 175px; object-fit: cover; display: block; background-color: var(--navy-900); }
.foto-card .meta { padding: var(--e-3); font-size: var(--t-apoio); }
.foto-card--selecionada { border-color: var(--magenta); box-shadow: var(--sombra-magenta); }
.foto-card--reprovada .meta { color: var(--reprovada); }

/* ==========================================================================
   TABELA
   ========================================================================== */
table { width: 100%; border-collapse: collapse; font-size: var(--t-corpo); }
/* Título centralizado, e a coluna inteira acompanha: cabeçalho centralizado
   sobre número encostado na direita fica com os dois desalinhados. A exceção é
   a coluna de texto corrido, que continua à esquerda dos dois lados — texto
   longo centralizado perde a margem de leitura a cada linha. */
thead th {
  font-size: var(--t-rotulo); font-weight: var(--p-rotulo);
  text-transform: uppercase; letter-spacing: .12em; color: var(--texto-2);
  padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--navy-500);
  text-align: center;
}
tbody td { padding: var(--e-4); border-bottom: 1px solid var(--navy-600);
           text-align: center; }
th.texto, td.texto { text-align: left; }
tbody tr:hover { background-color: var(--navy-600); }
.rolagem { overflow-x: auto; }

/* ==========================================================================
   BARRA DE PROGRESSO — série principal em magenta
   ========================================================================== */
.progresso { height: 10px; background-color: var(--navy-900); border-radius: var(--raio-pill);
             overflow: hidden; border: 1px solid var(--navy-500); }
.progresso > i { display: block; height: 100%; background-color: var(--magenta);
                 transition: width .4s ease-out; }
.progresso--indeterminado > i { width: 35% !important; animation: desliza 1.4s ease-in-out infinite; }
@keyframes desliza { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
.barra { display: inline-block; height: 8px; border-radius: var(--raio-pill); background-color: var(--magenta); min-width: 2px; }

/* Cronômetro e contadores do processamento */
.cronometro { font-size: 34px; font-weight: 600; font-variant-numeric: tabular-nums;
              line-height: 1; letter-spacing: -.02em; }
.linha-progresso { display: flex; align-items: baseline; justify-content: space-between;
                   gap: var(--e-4); margin-bottom: var(--e-2); }

/* Etapas do processamento */
.etapas { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-4); padding: 0; list-style: none; }
.etapas li { display: flex; align-items: center; gap: 6px; padding: 4px 12px;
             border: 1px solid var(--navy-500); border-radius: var(--raio-pill);
             font-size: var(--t-apoio); color: var(--texto-3); }
.etapas li[data-estado="feita"] { color: var(--aprovada); border-color: rgba(62,217,164,.35); }
.etapas li[data-estado="agora"] { color: #fff; background-color: var(--magenta); border-color: var(--magenta); }

/* Listas longas: primeiras N visíveis, resto sob demanda */
.oculto { display: none; }
.mais {
  display: inline-flex; align-items: center; gap: var(--e-2);
  margin-top: var(--e-3); padding: var(--e-3) var(--e-4);
  background: transparent; border: 1px solid var(--navy-500);
  border-radius: var(--raio-pill); color: var(--texto);
  font-family: inherit; font-size: var(--t-apoio); font-weight: 500; cursor: pointer;
}
.mais:hover { background-color: var(--navy-600); }

/* Escolha do book */
.escolha { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.escolha label {
  display: flex; gap: var(--e-3); align-items: flex-start; cursor: pointer;
  padding: var(--e-4); background-color: var(--navy-900);
  border: 1px solid var(--navy-500); border-radius: var(--raio-campo);
}
.escolha label:hover { border-color: var(--texto-3); }
.escolha input { accent-color: var(--magenta); margin: 2px 0 0; flex: none; }
.escolha input:checked ~ span strong { color: var(--magenta-400); }
.escolha label:has(input:checked) { border-color: var(--magenta); background-color: var(--magenta-veu); }

dialog {
  background-color: var(--navy-700); color: var(--texto);
  border: 1px solid var(--navy-500); border-radius: var(--raio-card);
  padding: var(--e-5); max-width: 640px; width: calc(100% - 32px);
}
dialog::backdrop { background: rgba(7, 25, 37, .72); }