/* ════════════════════════════════════════════════════════════════════════
   Casca do painel — para o teste parecer uma tela do dashboard, e não
   um anexo que mora fora dele.

   Copiado do código real, não do brief:
     app/(dashboard)/layout.tsx      → main px-10 py-8, max-w-1440, mx-auto
     components/ui/header-global.tsx → header sticky, border-b cream-200,
                                       bg cream-50, px-10 py-3, baseline
     components/ui/card-editorial.tsx→ header interno (overline + h3),
                                       corpo px-6 pb-5, footer com borda topo
     app/(dashboard)/gente/page.tsx  → fundo --color-papel-instituto

   A escolha do papel não é gosto: /gente é a tela de RH do painel, e o
   teste é irmão dela. Mesmo papel, mesma casa.
   ════════════════════════════════════════════════════════════════════════ */

/* O site não tem papel por braço: a página é paper, e só. O creme
   #ede3d0 que estava aqui era o que deixava a tela amarela. */
body { background: var(--cream-100); }

/* ─────────────────── Header global (header-global.tsx) ────────────────── */

.painel-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--cream-50) 94%, transparent);
  border-bottom: 1px solid var(--regua);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  margin: 0 calc(-1 * var(--gutter-card-gap));
  padding: var(--gutter-table-row) var(--gutter-page);
}

.painel-header .miolo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--gutter-table-col); flex-wrap: wrap;
  max-width: 90rem; margin: 0 auto;
}

.painel-marca {
  font-family: var(--serif); font-size: var(--text-2xl); font-weight: 600;
  line-height: 1; letter-spacing: -0.025em; color: var(--azul-tinta);
}

.painel-marca .sufixo {
  font-weight: 400; font-size: var(--text-base); color: var(--azul-tinta-dark);
}

.painel-header .direita {
  display: flex; align-items: baseline; gap: var(--gutter-table-col);
  font-family: var(--sans); font-size: var(--text-sm); font-weight: 500;
  color: var(--azul-tinta-dark);
}

/* Pílula de papel: mono, caixa alta, borda fina. Igual à do header real. */
.painel-pill {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.16em; padding: 2px var(--space-1);
  border: 1px solid var(--azul-tinta-dark); border-radius: var(--raio);
}

.painel-header .sep { color: var(--ink-300); }

/* ────────────────────── Área de conteúdo (layout.tsx) ─────────────────── */

.painel-main {
  max-width: 90rem; margin: 0 auto; width: 100%;
  padding: var(--space-8) var(--gutter-page);
  display: flex; flex-direction: column; gap: var(--gutter-section);
}

/* Dentro da jornada o miolo respira menos largo: linha de leitura curta
   lê melhor que linha de dashboard. */
.painel-main.estreito { max-width: 56rem; }

/* ─────────────────── Card editorial (card-editorial.tsx) ──────────────── */

.card-editorial {
  display: flex; flex-direction: column;
  background: var(--cream-50); border: 1px solid var(--cream-200);
  border-radius: var(--raio); box-shadow: var(--sombra-papel);
}

.card-editorial > header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--gutter-table-col);
  padding: var(--gutter-card-inner) var(--gutter-card-inner) var(--gutter-table-row);
  border-top: 3px solid var(--ink-900);
}

.card-editorial > header .titulos {
  display: flex; flex-direction: column; gap: var(--space-1); min-width: 0;
}

.card-editorial .overline {
  font-family: var(--sans); font-size: var(--text-xs); font-weight: 700;
  line-height: 1; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-700);
}

.card-editorial > header h3 {
  font-family: var(--serif); font-size: var(--text-xl); font-weight: 600;
  line-height: 1.18; letter-spacing: -0.015em; color: var(--azul-tinta); margin: 0;
}

.card-editorial > .corpo { padding: 0 var(--gutter-card-inner) var(--space-5); flex: 1; min-width: 0; }

.card-editorial > footer {
  padding: var(--gutter-table-row) var(--gutter-card-inner);
  border-top: 1px solid var(--cream-200);
  font-size: var(--text-sm); color: var(--azul-tinta);
}

/* Código de seção em mono, como no painel. */
.codigo-secao {
  font-family: var(--mono); font-size: var(--text-xs);
  letter-spacing: 0.05em; color: var(--ink-500); font-weight: 500;
}

/* ───────────────────────────── Telas estreitas ───────────────────────── */

@media (max-width: 40rem) {
  .painel-header { padding: var(--gutter-table-row) var(--gutter-table-col); }
  .painel-main { padding: var(--gutter-card-inner) var(--gutter-table-col); }
  .painel-marca { font-size: var(--text-xl); }
  .painel-header .direita { font-size: var(--text-xs); gap: var(--gutter-inline); }
  /* Cabe pílula e chave. Área e data saem: quem está no celular já sabe
     em que tela está, e a data está no carimbo do resultado. */
  .painel-header .direita > span:not(.painel-pill):not(.sep) { display: none; }
  .painel-header .direita > .sep { display: none; }
  .card-editorial > header,
  .card-editorial > .corpo { padding-left: var(--gutter-table-col); padding-right: var(--gutter-table-col); }
}

@media print {
  .painel-header { display: none !important; }
  .painel-main { padding: 0; max-width: none; }
  .card-editorial { break-inside: avoid; }
}

/* ════════════════════════════════════════════════════════════════════════
   ONDA 4 · TOWNHOUSE — o padrão atual de tela do painel

   globals.css, sobre .text-townhouse-h1: "PADRÃO Onda 4.4 (Luis 2026-06-05)
   [...] Aplicado em TODA tela de dashboard." As duas telas daqui usavam o
   padrão anterior (h1 serifa grande). Isto corrige.

   Fontes: Archivo, Cormorant Garamond e EB Garamond estão instaladas nesta
   máquina e são usadas de verdade. Source Serif, Geist e JetBrains Mono NÃO
   estão — caem em Georgia, system-ui e Menlo. Sem @import porque os dois
   apps rodam offline; para fidelidade total, instalar as três que faltam.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --townhouse-sans: var(--sans);
  --townhouse-serif: var(--serif);
}

/* Rótulo de página: discreto de propósito. O peso visual é o display. */
.text-townhouse-h1 {
  font-family: var(--townhouse-sans); font-size: 1rem; font-weight: 700;
  line-height: 1.15; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--azul-tinta); margin: 0;
}

/* Display de página: mono bold. Decisão de 05/jun/2026 — menos romântico,
   mais ar de código de catálogo. */
.text-townhouse-display {
  font-family: var(--serif); font-size: clamp(2.15rem, 5vw, 3.4rem); font-weight: 600;
  line-height: 1.04; letter-spacing: -0.035em; color: var(--ink-900);
  font-feature-settings: 'lnum'; margin: 0;
  text-wrap: balance;
}
.text-townhouse-display.minuscula { text-transform: lowercase; }

.codigo-tinta {
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.05em;
  color: var(--azul-tinta); font-weight: 500; margin: 0;
}

.titulo-tinta {
  font-family: var(--townhouse-sans); font-size: 1.125rem; letter-spacing: 0.06em;
  color: var(--azul-tinta); font-weight: 700; line-height: 1.2;
  text-transform: uppercase; margin: 0;
}

/* Régua dupla Bauhaus: grossa + fina. Abre cada seção. */
.regua-bauhaus {
  position: relative; padding-top: var(--space-2);
  border-top: 3px solid var(--azul-tinta);
  margin-bottom: var(--gutter-card-inner);
}
.regua-bauhaus::after {
  content: ""; position: absolute; left: 0; right: 0; top: 6px;
  height: 1px; background: var(--azul-tinta);
}

/* Etiqueta vertical na lateral. Some abaixo de lg, como no painel. */
.etiqueta-vertical {
  position: fixed; left: var(--space-3); top: 30vh; z-index: 5;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--sans); font-size: var(--text-xs); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--azul-tinta-dark); font-weight: 500;
  /* Em modo vertical, quebra de linha vira SEGUNDA COLUNA, e a coluna nova
     cai por cima da primeira porque a largura é de uma letra só. O resultado
     é o mesmo borrão de duas etiquetas sobrepostas, com uma etiqueta só.
     `nowrap` mata a quebra; o teto de altura corta o que não couber em vez
     de deixar o texto vazar pelo rodapé da janela. */
  white-space: nowrap;
  max-height: 62vh; overflow: hidden;
}
/* Só aparece quando sobra corredor de verdade ao lado do miolo. Em 74rem ela
   ainda cabia na conta e encostava no texto; o miolo vai até 76rem, então o
   corredor só existe acima disso. Com folga: 90rem.

   A altura também manda: em janela baixa a etiqueta não cabe de pé, e cortar
   enfeite pela metade é pior que não ter enfeite. */
@media (max-width: 90rem), (max-height: 34rem) {
  .etiqueta-vertical { display: none; }
}

/* Cada tela do kit traz a sua etiqueta, e as telas escondidas continuam no
   DOM. Sem isto, as três se empilham no mesmo ponto da lateral e o texto
   sai borrado de tanta sobreposição. */
.oculto .etiqueta-vertical { display: none; }

/* ─────────────────── Capa de página (padrão /gente) ──────────────────── */

.capa-painel {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--gutter-card-inner); flex-wrap: wrap;
  margin-bottom: var(--gutter-section);
  padding-bottom: var(--gutter-table-col);
  border-bottom: 2px solid var(--azul-tinta);
}
.capa-painel .esquerda { display: flex; flex-direction: column; gap: var(--gutter-table-row); flex: 1 1 24rem; min-width: 0; }
.capa-painel .direita { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-4); text-align: right; flex: 0 0 auto; }
.capa-painel .subtexto {
  font-family: var(--sans); font-size: var(--text-base); color: var(--ink-700);
  line-height: 1.65; margin: var(--space-2) 0 0; max-width: 39rem;
}

/* ───────────── Cabeçalho de seção (padrão /gente §07.1) ──────────────── */

.secao-topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--gutter-table-col); margin-bottom: var(--gutter-table-col);
}
.secao-topo .contagem { color: var(--azul-tinta-dark); }

/* ─────────── StatusPill (status-pill.tsx) — carimbo no esquadro ───────
   §6.4: status NUNCA é só cor, sempre acompanha rótulo. Borda 3px, mono
   bold, caixa alta, tracking .20em, sem rotação. */

/* A cor vive na borda; o rótulo é tinta. Medido: mostarda dá 2.36:1 como
   texto no modo dia e ocre 2.74:1 — reprovam. Como borda de 3px são sinal
   suficiente, e §6.4 já exige rótulo junto da cor de qualquer jeito, não
   se perde informação e o texto passa a ser legível nos dois modos. */
.status-pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--space-1) var(--space-3); border: 3px solid var(--ink-500);
  color: var(--ink-900);
  font-family: var(--mono); font-weight: 700; text-transform: uppercase;
  font-size: var(--text-xs); letter-spacing: 0.20em; white-space: nowrap;
}
.status-pill.saudavel { border-color: var(--verde-salvia); }
.status-pill.alerta   { border-color: var(--mostarda); }
.status-pill.critico  { border-color: var(--vermelho-papoula); }
.status-pill.neutro   { border-color: var(--ink-500); }

/* ───────── Números tabulares (globals.css .text-number) ──────────────── */

.text-number, .faixa-valor, .grade-numeros .val, .trilha-pct, .dist-marcas {
  font-feature-settings: 'tnum' on, 'zero' on, 'calt' off;
  font-variant-numeric: tabular-nums;
}

/* Divisor pontilhado editorial (Advance Copy / Three Uncles). */
.divisor-pontilhado {
  background-image: linear-gradient(to right,
    color-mix(in srgb, var(--azul-tinta) 50%, transparent) 50%, transparent 50%);
  background-size: 4px 1px; background-repeat: repeat-x; background-position: bottom;
  padding-bottom: var(--space-2);
}

@media (max-width: 40rem) {
  .text-townhouse-display { font-size: var(--text-xl); }
  .capa-painel { gap: var(--gutter-card-inner); }
  .capa-painel .direita { align-items: flex-start; text-align: left; }
}