/* ════════════════════════════════════════════════════════════════════════
   Inventário e autoavaliação — folha de estilo

   A paleta, as fontes e o raio vêm de aradodeouro.org, resolvidos no
   navegador contra o site em produção. A estrutura de página (header,
   cartão, seção numerada) vem do repositório dashboard-estudio-arado,
   porque em aradodeouro.org só a tela de login é pública.

   Sem @import externo: os dois apps rodam offline.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ════════════════════════════════════════════════════════════════════
     Paleta lida de aradodeouro.org, não deduzida.

     Todo valor abaixo foi resolvido no navegador contra o site em produção,
     nos dois modos, em 12/ago/2026. Nenhum foi inventado. O que o site não
     define, esta folha também não define.

     A mudança de fundo: a versão anterior era creme (#f4ecdc) com ouro de
     acento — amarelo em cima de amarelo. O site é quase neutro, matiz 150 e
     croma 0.004. Papel é papel, e a cor fica por conta da função.

     Cuidado com o nome: os tokens daqui ainda se chamam --cream-* e --ink-*
     porque três folhas dependem desses nomes. Os VALORES agora são os do
     site: --cream-100 é a página, --cream-50 é a superfície de cartão,
     --cream-200 é a régua. De creme não têm mais nada.
     ════════════════════════════════════════════════════════════════════ */
  /* Modo noite fixo, decisão de 14/ago/2026. Os tokens abaixo continuam
     escritos em light-dark() porque é assim que o site em produção os
     define, e reescrever 40 valores à mão só para tirar metade de cada
     par abriria espaço para errar um. Com color-scheme: dark, todo
     light-dark() já resolve no segundo argumento. Uma linha decide. */
  color-scheme: dark;

  /* Superfícies — paper / paper-2 / paper-3 do site */
  --cream-100: oklch(1 0 0);
  --cream-100: light-dark(oklch(1 0 0), oklch(0.205 0.005 150));            /* página */
  --cream-50: oklch(0.976 0.004 150);
  --cream-50: light-dark(oklch(0.976 0.004 150), oklch(0.24 0.005 150));    /* cartão */
  --paper-3: oklch(0.905 0.005 150);
  --paper-3: light-dark(oklch(0.905 0.005 150), oklch(0.285 0.006 150));    /* rebaixado */

  /* Réguas — rule-soft para borda decorativa, rule para a que separa */
  --cream-200: oklch(0.93 0.005 150);
  --cream-200: light-dark(oklch(0.93 0.005 150), oklch(0.29 0.005 150));
  --regua: oklch(0.89 0.005 150);
  --regua: light-dark(oklch(0.89 0.005 150), oklch(0.34 0.006 150));

  /* Borda de controle: WCAG 1.4.11 pede 3:1 e a régua do site não chega lá.
     Em vez de inventar uma cor, uso ink-mute, que é token do site e passa. */
  --borda-controle: oklch(0.51 0.015 150);
  --borda-controle: light-dark(oklch(0.51 0.015 150), oklch(0.62 0.01 150));

  /* Tinta — ink / ink-soft / ink-mute. O site só tem três degraus, então
     --ink-300 repete ink-mute em vez de ganhar um quarto valor inventado. */
  --ink-900: oklch(0.23 0.005 150);
  --ink-900: light-dark(oklch(0.23 0.005 150), oklch(0.93 0.004 150));
  --ink-700: oklch(0.43 0.015 150);
  --ink-700: light-dark(oklch(0.43 0.015 150), oklch(0.78 0.008 150));
  --ink-500: oklch(0.51 0.015 150);
  --ink-500: light-dark(oklch(0.51 0.015 150), oklch(0.62 0.01 150));
  --ink-300: oklch(0.51 0.015 150);
  --ink-300: light-dark(oklch(0.51 0.015 150), oklch(0.62 0.01 150));

  /* Texto corrido e título são tinta, não azul. No site o corpo é ink. */
  --azul-tinta: var(--ink-900);
  --azul-tinta-dark: var(--ink-900);

  /* Funcionais, um por função. Todos do site. */
  --terracota: oklch(0.565 0.14 42);
  --terracota: light-dark(oklch(0.565 0.14 42), oklch(0.66 0.13 42));
  --vermelho-papoula: oklch(0.5 0.18 30);
  --vermelho-papoula: light-dark(oklch(0.5 0.18 30), oklch(0.62 0.15 30));
  --mostarda: oklch(0.72 0.14 82);
  --mostarda: light-dark(oklch(0.72 0.14 82), oklch(0.76 0.13 82));
  --verde-salvia: oklch(0.548 0.05 130);
  --verde-salvia: light-dark(oklch(0.548 0.05 130), oklch(0.66 0.05 130));

  /* Verde da resposta escolhida, decisão do Luis em 14/ago/2026.
     Croma acima da sálvia porque aqui ele precisa ler como verde de
     relance, e a sálvia do site é discreta demais para preencher caixa
     inteira — cheia, ela vira cinza esverdeado. Mesma matiz, 130.
     `--sobre-verde` é a tinta que vai POR CIMA do verde cheio. */
  --verde-resposta: light-dark(oklch(0.52 0.12 130), oklch(0.72 0.15 130));
  --sobre-verde: oklch(0.19 0.02 130);
  --azul-noite: oklch(0.36 0.06 250);
  --azul-noite: light-dark(oklch(0.36 0.06 250), oklch(0.62 0.08 250));
  --ocre: oklch(0.68 0.1 75);
  --ocre: light-dark(oklch(0.68 0.1 75), oklch(0.72 0.1 75));
  --marrom-cacau: oklch(0.35 0.04 55);
  --marrom-cacau: light-dark(oklch(0.35 0.04 55), oklch(0.72 0.04 55));

  /* O site tem oito acentos e as seis frentes precisam de seis distintos.
     Loja física fica com terracota e Comercial com mostarda: são os que
     sobram sem repetir. amarelo-galo e azul-bonfim não existem lá. */
  --azul-bonfim: var(--terracota);
  --amarelo-galo: var(--mostarda);

  /* ─────────────────────────────────────────────────────────────────────
     ACENTO DE INTERFACE — resolve a nota de conflito que ficou aberta.

     Era ouro, e ouro é a cor da Loja Online por função (§8.4). No site o
     acento de interface é a própria tinta: o botão de entrar é ink com
     texto paper, caixa alta, tracking 0.16em, canto reto. Copiado.

     --ouro continua existindo porque três folhas o usam, mas agora aponta
     para a tinta. Quem quer a cor da Loja Online usa --ocre, que é o nome
     certo para isso.
     ───────────────────────────────────────────────────────────────────── */
  --ouro: var(--ink-900);
  --sobre-ouro: var(--cream-50);
  --cta-fundo: var(--ink-900);
  --cta-texto: var(--cream-50);

  /* Canto reto. O site declara --radius: .625rem e não usa em lugar nenhum:
     botão, campo e cartão medem todos 0px. */
  --raio: 0px;

  /* ─── Tipografia (§3.1, §3.2) ─── */
  /* Cadeia igual à de aradodeouro.org. Nenhuma das três está instalada
     nesta máquina: instalando IBM Plex Sans, IBM Plex Mono e Lora, o site
     e o teste passam a render iguais sem tocar em código. */
  --serif: 'Lora', 'Source Serif 4', Georgia, serif;
  --sans: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.5rem;

  /* Profundidade editorial: a sombra é curta e seca, como papel sobre mesa. */
  --sombra-papel: 0 1px 0 color-mix(in srgb, var(--ink-900) 8%, transparent),
                  0 8px 24px color-mix(in srgb, var(--ink-900) 6%, transparent);
  --sombra-flutuante: 0 24px 64px color-mix(in srgb, #000 28%, transparent);

  /* ─── Spacing (§4) — usar os nomes, não os números ─── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px;

  --gutter-inline: var(--space-2);
  --gutter-table-row: var(--space-3);
  --gutter-table-col: var(--space-4);
  --gutter-card-inner: var(--space-6);
  --gutter-card-gap: var(--space-4);
  --gutter-section: var(--space-12);
  --gutter-page: var(--space-10);
  --gutter-form-row: var(--space-5);

  /* ─── Motion (§5.1) ─── */
  --motion-instant: 0ms;
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
}

/* Não há mais escolha de tema: noite sempre, inclusive para quem tem o
   sistema em claro. As duas regras ficam para o caso de sobrar
   `data-tema="dia"` gravado no navegador de quem usou a versão com chave. */
:root[data-tema="dia"],
:root[data-tema="noite"] { color-scheme: dark; }

* { box-sizing: border-box; }

/* ══════════════════════════════════════════════════════════════════════
   `.oculto` esconde. Parece óbvio, e até 14/ago/2026 não era: a classe
   aparecia em mais de trinta lugares nos três HTML, `mostrar()` a ligava
   e desligava a cada troca de tela, e NENHUMA folha a definia.

   O efeito colateral disfarçou o defeito por semanas. A página inteira
   sempre esteve renderizada de uma vez — 5.265 pixels de altura, cards de
   vaga, ficha, abertura, questionário e tela de fim empilhados —, e a
   última linha de `mostrar()` é `window.scrollTo(0, 0)`. Cada "troca de
   tela" era um pulo para o topo de um documento que nunca mudou. Quem
   conferia via o alto da página e ia embora convencido.

   Duas consequências que importavam de verdade: quem chegava pelo link
   rolava a jornada inteira antes de escolher a vaga, e leitor de tela
   anunciava as 50 afirmações do questionário para alguém que ainda estava
   lendo o card. `!important` porque isto é utilitário e precisa vencer o
   `display` que cada tela define para si.
   ══════════════════════════════════════════════════════════════════════ */
.oculto { display: none !important; }

/* ───────────────────────── Miolo da página ─────────────────────────────
   `.wrap` embrulha as três páginas do kit e, até 14/ago/2026, não tinha
   regra nenhuma: o conteúdo colava nas bordas da janela, e a etiqueta
   vertical, que é `position: fixed` na lateral, caía por cima do texto em
   qualquer tela larga. Era o pior tipo de bug de layout — só aparece na
   tela de quem tem monitor grande, e some na de quem está conferindo.

   Largura máxima em 76rem, um passo abaixo das 90rem do dashboard: aqui a
   pessoa lê descrição de vaga e responde questionário, e linha comprida
   demais cansa. O respiro lateral cresce com a tela, do aperto do celular
   até a folga que a etiqueta precisa. */
.wrap {
  width: 100%; max-width: 76rem; margin-inline: auto;
  padding: var(--space-6) clamp(var(--space-4), 4vw, var(--gutter-page));
}

/* A margem de 8px que o navegador dá ao body por padrão nunca foi zerada, e
   a barra do topo pagava a conta: `.painel-header` vaza para fora do
   container com margem negativa, o que está certo dentro do dashboard, onde
   o pai tem respiro. Aqui ela é filha direta do body, então a margem
   negativa só empurrava a barra 8px além da janela — 1296px de conteúdo em
   1280px de tela, e uma rolagem horizontal de 8px em toda página do painel.
   Rolagem lateral de poucos pixels é das piores: no celular ela transforma
   qualquer arrastar na diagonal em tela tremendo. */
body { margin: 0; }
body > .painel-header { margin-inline: 0; }

/* §5.2.3 — respeitado sempre, sem exceção. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─────────────────── Papéis tipográficos (§3.3) ─────────────────────── */

h1 {
  font-family: var(--serif); font-size: clamp(2.35rem, 5vw, 3.5rem); font-weight: 600;
  line-height: 1.04; letter-spacing: -0.035em; margin: 0 0 var(--space-3);
  color: var(--azul-tinta-dark); font-feature-settings: 'lnum';
  text-wrap: balance;
}
h2 {
  font-family: var(--serif); font-size: clamp(1.65rem, 3vw, 2.15rem); font-weight: 600;
  line-height: 1.12; letter-spacing: -0.02em;
  margin: var(--gutter-section) 0 var(--space-4);
  color: var(--azul-tinta-dark);
  text-wrap: balance;
}
h3 {
  font-family: var(--serif); font-size: var(--text-xl); font-weight: 600;
  line-height: 1.18; letter-spacing: -0.012em; margin: var(--space-6) 0 var(--space-2);
  color: var(--azul-tinta-dark);
}

.sobretitulo {
  font-family: var(--sans); font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--ink-700);
  margin: 0 0 var(--space-2);
}
.legenda { font-family: var(--sans); font-size: var(--text-sm); color: var(--ink-500);
           line-height: 1.55; margin: 0 0 var(--space-6); }
.prosa { font-family: var(--sans); font-size: 1.025rem; line-height: 1.7; color: var(--ink-700); }
.prosa strong { color: var(--azul-tinta-dark); font-weight: 700; }
a { color: var(--ouro); }
a:focus-visible, button:focus-visible, input:focus-visible, label:focus-within {
  outline: 2px solid var(--ouro); outline-offset: 2px;
}

/* ─────────────────────── Card editorial (§6.1) ──────────────────────── */
/* Borda 1px cream-200, raio 6px, sem sombra, padding 24px. */

.cartao {
  background: var(--cream-50);
  border: 1px solid var(--cream-200);
  border-radius: var(--raio);
  padding: var(--gutter-card-inner);
  margin: 0 0 var(--gutter-card-gap);
  box-shadow: var(--sombra-papel);
}
.cartao-marcado { border-left: 3px solid var(--ouro); }

/* ─────────────────────────── Abertura ───────────────────────────────── */

.capa { padding: var(--space-12) 0 var(--space-4); }

.passos { list-style: none; counter-reset: passo; padding: 0; margin: var(--space-4) 0 0; }
.passos li {
  counter-increment: passo; position: relative;
  padding: var(--gutter-table-row) 0 var(--gutter-table-row) var(--space-10);
  border-bottom: 1px solid var(--cream-200); font-size: var(--text-base); color: var(--ink-700);
}
.passos li:last-child { border-bottom: 0; }
.passos li::before {
  content: counter(passo); position: absolute; left: 0; top: var(--gutter-table-row);
  width: var(--space-6); height: var(--space-6); border-radius: 50%;
  background: color-mix(in srgb, var(--ouro) 18%, var(--cream-200));
  color: var(--azul-tinta-dark); font-family: var(--mono); font-size: var(--text-xs);
  display: grid; place-items: center;
}

.escala-guia { margin: var(--space-4) 0 0; border-top: 1px solid var(--cream-200); }
.escala-guia .linha {
  display: grid; grid-template-columns: var(--space-8) 9.5rem 1fr; gap: var(--gutter-table-col);
  align-items: baseline; padding: var(--gutter-table-row) 0;
  border-bottom: 1px solid var(--cream-200);
}
@media (max-width: 34rem) {
  .escala-guia .linha { grid-template-columns: var(--space-8) 1fr; }
  .escala-guia .exp { grid-column: 2 / -1; }
}
.escala-guia .n { font-family: var(--mono); font-size: var(--text-lg); font-weight: 700;
                  color: var(--ouro); text-align: center; }
.escala-guia .rot { font-family: var(--sans); font-size: var(--text-sm); font-weight: 600;
                    color: var(--azul-tinta-dark); }
.escala-guia .exp { font-size: var(--text-sm); color: var(--ink-500); }

.aviso-caixa {
  border-left: 3px solid var(--mostarda);
  background: color-mix(in srgb, var(--mostarda) 8%, transparent);
  padding: var(--gutter-table-col) var(--space-5); margin: var(--space-5) 0 0;
  font-size: var(--text-sm); color: var(--ink-700);
}
.aviso-caixa p { margin: var(--space-2) 0; }
.aviso-caixa p:first-child { margin-top: 0; }
.aviso-caixa p:last-child { margin-bottom: 0; }

label.identificacao { display: block; margin: var(--gutter-form-row) 0 0;
                      font-family: var(--sans); font-size: var(--text-sm); color: var(--ink-500); }
label.identificacao input {
  display: block; width: 100%; max-width: 28rem; margin-top: var(--space-1);
  padding: var(--space-2) var(--gutter-table-row);
  font-family: var(--sans); font-size: var(--text-base); color: var(--azul-tinta-dark);
  background: var(--cream-50); border: 1px solid var(--cream-200); border-radius: var(--raio);
}

/* ────────────────────────── Botões e barra ──────────────────────────── */
/* §2.5: CTA primário usa --ink-900 ou --azul-noite. Nunca verde-sálvia. */

/* Botão copiado do site: caixa alta, 0.68rem, peso 600, tracking 0.16em,
   canto reto, fundo tinta e texto papel. */
button {
  min-height: 2.75rem;
  font-family: var(--sans); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: var(--gutter-inline) var(--space-5); border-radius: var(--raio); cursor: pointer;
  background: var(--cta-fundo); color: var(--cta-texto); border: 1px solid var(--cta-fundo);
  transition: background var(--motion-fast) var(--ease-in-out),
              border-color var(--motion-fast) var(--ease-in-out),
              color var(--motion-fast) var(--ease-in-out);
}
button:hover:not(:disabled) { background: var(--ouro); border-color: var(--ouro); color: var(--sobre-ouro); }
button.fantasma { background: transparent; color: var(--azul-tinta); }
button.fantasma:hover { background: color-mix(in srgb, var(--ouro) 16%, transparent);
                        border-color: var(--ouro); color: var(--azul-tinta-dark); }
button:disabled { opacity: .35; cursor: not-allowed; }
button.grande { font-size: var(--text-sm); padding: var(--gutter-table-col) var(--space-8); }

.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  padding: var(--gutter-table-row) var(--gutter-table-col);
  background: var(--cream-50); border-top: 1px solid var(--cream-200);
  display: flex; gap: var(--gutter-table-col); align-items: center;
  justify-content: center; flex-wrap: wrap;
}
.contador { font-family: var(--mono); font-size: var(--text-xs); color: var(--ink-500); }

/* §2.5: cor chapada, sem gradiente. */
.progresso { position: fixed; top: 0; left: 0; right: 0; height: 3px;
             background: var(--cream-200); z-index: 11; }
.progresso i { display: block; height: 100%; width: 0; background: var(--ouro);
               transition: width var(--motion-base) var(--ease-out); }

/* ───────────────────────── Questionário ─────────────────────────────── */

.regua-fixa {
  position: sticky; top: 0; z-index: 5;
  background: var(--cream-100); border-bottom: 1px solid var(--cream-200);
  padding: var(--space-2) 0; margin-bottom: var(--space-2);
  font-family: var(--sans); font-size: var(--text-xs); color: var(--ink-500);
  display: flex; gap: var(--space-5); flex-wrap: wrap; justify-content: center;
}
.regua-fixa b { color: var(--ouro); font-family: var(--mono); }

.item { padding: var(--gutter-table-col) 0; border-bottom: 1px solid var(--cream-200); }
.item.pendente { background: color-mix(in srgb, var(--vermelho-papoula) 8%, transparent); }
.item .enunciado { display: flex; gap: var(--gutter-table-row); align-items: baseline;
                   margin-bottom: var(--space-2); }
.item .idx { font-family: var(--mono); font-size: var(--text-xs); color: var(--ink-300);
             min-width: var(--space-8); }
.item .txt { flex: 1; font-size: var(--text-base); color: var(--azul-tinta-dark); }

.escala { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-left: var(--space-10); }
.escala label {
  flex: 1; min-width: 3.6rem; text-align: center; padding: var(--space-2) var(--space-1);
  cursor: pointer; border: 1px solid var(--cream-200); border-radius: var(--raio);
  background: var(--cream-50); font-family: var(--sans); font-size: var(--text-xs);
  line-height: 1.25; color: var(--ink-500); user-select: none;
  transition: border-color var(--motion-fast) var(--ease-in-out);
}
.escala label:hover { border-color: var(--ouro); }
.escala input { position: absolute; opacity: 0; pointer-events: none; }
.escala label:has(input:checked) {
  border-color: var(--ouro); color: var(--azul-tinta-dark); font-weight: 600;
  background: color-mix(in srgb, var(--ouro) 16%, var(--cream-50));
}
.escala .v { display: block; font-family: var(--mono); font-size: var(--text-sm);
             font-weight: 700; margin-bottom: 2px; }

/* ───────────────────────── Painel de resultado ──────────────────────── */

.cabecalho-painel {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--gutter-table-col); flex-wrap: wrap;
  /* O topo abre mais que os outros lados: a chave dia/noite é fixa ali. */
  padding: var(--space-12) 0 var(--space-5);
  border-bottom: 2px solid var(--ouro);
}
.carimbo { font-family: var(--mono); font-size: var(--text-xs); color: var(--ink-500);
           text-align: right; line-height: 1.5; }

.painel-topo { display: grid; grid-template-columns: minmax(0, 19rem) 1fr;
               gap: var(--gutter-card-gap); align-items: start; }
@media (max-width: 46rem) { .painel-topo { grid-template-columns: 1fr; } }

.radar { width: 100%; height: auto; display: block; }
.radar .malha { fill: none; stroke: var(--cream-200); stroke-width: 1; }
.radar .eixo { stroke: var(--cream-200); stroke-width: 1; }
.radar .area { fill: color-mix(in srgb, var(--ouro) 26%, transparent);
               stroke: var(--ouro); stroke-width: 2; }
.radar .ponto { fill: var(--ouro); }
.radar .rotulo { font-family: var(--sans); font-size: 9px; fill: var(--ink-500); }
.radar .valor { font-family: var(--mono); font-size: 10px; font-weight: 700; fill: var(--azul-tinta-dark); }

.fator {
  display: grid; grid-template-columns: 11rem var(--space-8) 1fr 6.5rem;
  gap: var(--gutter-table-row); align-items: center;
  padding: var(--space-2) 0; border-bottom: 1px solid var(--cream-200); font-size: var(--text-sm);
}
@media (max-width: 34rem) {
  .fator { grid-template-columns: 1fr var(--space-8); }
  .fator .medidor, .fator .faixa { grid-column: 1 / -1; }
}
.fator .nome { color: var(--azul-tinta-dark); }
.fator .soma { font-family: var(--mono); font-weight: 700; text-align: right;
               color: var(--azul-tinta-dark); font-variant-numeric: tabular-nums; }
.medidor { position: relative; height: var(--space-2); background: var(--cream-200); border-radius: 99px; }
.medidor i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 99px; background: var(--ouro); }
.faixa { font-family: var(--sans); font-size: var(--text-xs); text-align: center;
         padding: 2px var(--space-2); border: 1px solid var(--cream-200);
         border-radius: 99px; color: var(--ink-500); }

/* Barra por braço: a cor vem da função (§8.4), não do acento da tela. */
.setor { display: grid; grid-template-columns: 12rem 1fr var(--space-10);
         gap: var(--gutter-table-row); align-items: center;
         padding: var(--gutter-table-row) 0; border-bottom: 1px solid var(--cream-200);
         font-size: var(--text-sm); }
@media (max-width: 34rem) {
  .setor { grid-template-columns: 1fr var(--space-10); }
  .setor .barra-setor { grid-column: 1 / -1; }
}
.barra-setor { position: relative; height: var(--space-5); background: var(--cream-200);
               border-radius: 3px; overflow: hidden; }
.barra-setor i { position: absolute; top: 0; bottom: 0; left: 0; }
.setor .pct { font-family: var(--mono); font-weight: 700; text-align: right;
              font-size: var(--text-xs); color: var(--azul-tinta-dark);
              font-variant-numeric: tabular-nums; }
.setor .rot { color: var(--azul-tinta-dark); }
.setor .rot small { display: block; font-family: var(--sans); font-size: var(--text-xs);
                    color: var(--ink-300); }

.destaque {
  border-left: 3px solid var(--verde-salvia);
  background: color-mix(in srgb, var(--verde-salvia) 7%, transparent);
  padding: var(--gutter-table-col) var(--space-5); margin: var(--gutter-card-gap) 0;
  border-radius: 0 6px 6px 0;
}
.risco {
  border-left: 3px solid var(--vermelho-papoula);
  background: color-mix(in srgb, var(--vermelho-papoula) 6%, transparent);
  padding: var(--gutter-table-col) var(--space-5); margin: var(--gutter-card-gap) 0;
  border-radius: 0 6px 6px 0;
}
.lista-limpa { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.lista-limpa li { margin: var(--space-2) 0; padding-left: var(--space-1); color: var(--ink-700); line-height: 1.58; }
.lista-limpa li::marker { color: var(--terracota); }

.ficha { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ficha th, .ficha td { text-align: left; padding: var(--gutter-table-row) var(--space-1);
                       border-bottom: 1px solid var(--cream-200); vertical-align: top; }
.ficha th { width: 9.5rem; font-family: var(--sans); font-size: var(--text-xs);
            text-transform: uppercase; letter-spacing: .07em; color: var(--ink-500);
            font-weight: 600; }

.rodape {
  margin-top: var(--gutter-section); padding-top: var(--gutter-table-col);
  border-top: 1px solid var(--cream-200);
  font-family: var(--sans); font-size: var(--text-xs); color: var(--ink-300); line-height: 1.6;
}

/* ─────────────── Qualidade da resposta (cartão do painel) ─────────────── */

.veredicto {
  font-family: var(--serif); font-size: var(--text-lg); font-weight: 500;
  margin: 0 0 var(--space-1); color: var(--ink-900);
  border-left: 3px solid var(--ink-500); padding-left: var(--gutter-table-col);
}
.veredicto.saudavel { border-left-color: var(--verde-salvia); }
.veredicto.alerta   { border-left-color: var(--mostarda); }
.veredicto.critico  { border-left-color: var(--vermelho-papoula); }

.dist-barra {
  display: flex; height: var(--space-6); border-radius: var(--raio); overflow: hidden;
  border: 1px solid var(--cream-200); background: var(--cream-100);
}

.dist-marcas {
  display: flex; margin-top: var(--space-2); gap: var(--gutter-table-col);
  font-family: var(--mono); font-size: var(--text-xs); color: var(--ink-500);
}

.dist-marcas b { color: var(--ouro); }

.grade-numeros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--gutter-card-gap); margin: var(--gutter-card-inner) 0 0;
  padding-top: var(--gutter-card-inner); border-top: 1px solid var(--cream-200);
}

.grade-numeros .rot {
  display: block; font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-500);
}

.grade-numeros .val {
  display: block; font-family: var(--mono); font-size: var(--text-lg);
  color: var(--azul-tinta-dark); font-variant-numeric: tabular-nums;
}

.alertas { margin-top: var(--gutter-card-inner); display: grid; gap: var(--gutter-card-gap); }

.alerta {
  border-left: 3px solid var(--ink-300); padding-left: var(--gutter-table-col);
}

.alerta strong { display: block; color: var(--azul-tinta-dark); font-size: var(--text-sm); }
.alerta p { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--ink-700); }


/* ─────────────── Faixa esperada por vaga (vagas.js) ───────────────────── */

.faixas { display: grid; gap: var(--gutter-card-inner); }
.faixa-linha { display: grid; gap: var(--space-2); }

.faixa-topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--gutter-inline);
}

.faixa-nome { font-size: var(--text-sm); font-weight: 600; color: var(--azul-tinta-dark); }

.marca-critico {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--vermelho-papoula);
  border: 1px solid var(--vermelho-papoula); border-radius: var(--raio);
  padding: 1px var(--space-1); margin-left: var(--space-1);
}

.faixa-valor {
  font-family: var(--mono); font-size: var(--text-sm); color: var(--azul-tinta-dark);
  font-variant-numeric: tabular-nums;
}
.faixa-alvo-txt { color: var(--ink-500); font-size: var(--text-xs); }

/* Trilho de 10 a 50. A faixa esperada é a área clara; o ponto é a pessoa. */
.faixa-trilho {
  position: relative; height: var(--space-3);
  background: var(--cream-200); border-radius: var(--raio);
}

.faixa-alvo {
  position: absolute; top: 0; bottom: 0; border-radius: var(--raio);
  background: color-mix(in srgb, var(--verde-salvia) 22%, transparent);
}

.faixa-ponto {
  position: absolute; top: 50%; width: var(--space-3); height: var(--space-3);
  margin: calc(-1 * var(--space-3) / 2) 0 0 calc(-1 * var(--space-3) / 2);
  border-radius: 50%; background: var(--azul-tinta);
  border: 2px solid var(--cream-50);
}

.faixa-status {
  margin: 0; font-family: var(--mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-700);
}
/* Quadradinho na frente carrega a cor; o texto fica em tinta. */
.faixa-status::before {
  content: ''; display: inline-block; width: var(--space-2); height: var(--space-2);
  background: currentColor; margin-right: var(--gutter-inline);
}
.faixa-status.dentro::before { background: var(--verde-salvia); }
.faixa-status.fora::before   { background: var(--mostarda); }

.faixa-porque { margin: 0; font-size: var(--text-sm); color: var(--ink-700); }
.faixa-porque.herdada { color: var(--ink-300); font-size: var(--text-xs); }

/* Seletor de vaga na abertura. */
.escolha-vaga { display: grid; gap: var(--space-2); margin-top: var(--gutter-card-inner); }
.escolha-vaga select {
  font-family: var(--sans); font-size: var(--text-base);
  padding: var(--gutter-table-row) var(--gutter-table-col);
  border: 1px solid var(--borda-controle); border-radius: var(--raio);
  background: var(--cream-50); color: var(--azul-tinta-dark); width: 100%;
}

/* ──────────────────────── Print (§8.5) ──────────────────────────────── */
/* §2.5: nunca #000 nem #FFF. Papel é cream-50, tinta é ink-900. */

@media print {
  /* Papel é sempre claro. Sem forçar o esquema, imprimir no modo noite
     sairia com página preta e um cartucho a menos. */
  :root { color-scheme: light !important; }

  .barra, .progresso, .noprint { display: none !important; }
  body { padding: 0; background: var(--cream-50); color: var(--ink-900); }
  .cartao, .destaque, .risco, .setor, .fator { break-inside: avoid; }
  h2 { break-after: avoid; margin-top: var(--space-8); }
  a { color: var(--ink-900); text-decoration: underline; }
  .radar .area { fill: color-mix(in srgb, var(--ouro) 30%, transparent); }
}