/* ==========================================================================
   PESQUISA — folha única, CSS puro, sem build.
   Direção "Câmara de Compensação": fio de 1px, grade de lacunas, âmbar de
   fósforo. Sem sombra decorativa, sem gradiente, raio máximo 3px.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Superfícies — neutro morno com viés oliva (hue 140, croma quase nulo) */
  --bg-void:     oklch(0.145 0.006 140);
  --bg-base:     oklch(0.178 0.007 140);
  --bg-panel:    oklch(0.212 0.008 140);
  --bg-raised:   oklch(0.245 0.009 140);
  --bg-inset:    oklch(0.158 0.006 140);

  /* Fios — a estrutura inteira é feita deles */
  --line-hair:   oklch(0.285 0.008 140);
  --line:        oklch(0.335 0.010 140);
  --line-strong: oklch(0.450 0.012 140);

  /* Tinta: L calibrado para AA sobre --bg-base; ink-4 é o piso legível */
  --ink:         oklch(0.945 0.008 100);
  --ink-2:       oklch(0.800 0.010 110);
  --ink-3:       oklch(0.665 0.012 115);
  --ink-4:       oklch(0.600 0.012 120);
  --ink-desab:   oklch(0.470 0.010 120);

  /* Acento único: âmbar de fósforo (~10:1 sobre o fundo) */
  --acento:      oklch(0.800 0.155 78);
  --acento-fraco:oklch(0.620 0.120 78);
  --acento-tinta:oklch(0.180 0.030 78);

  --ok:          oklch(0.780 0.150 155);
  --aviso:       oklch(0.830 0.160 92);
  --erro:        oklch(0.700 0.190 25);
  --info:        oklch(0.760 0.110 230);

  --f-sans: "Archivo", "Helvetica Neue", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --t-micro: 10.5px; --t-meta: 11px;  --t-tab: 12.5px; --t-ui: 13px;
  --t-val: 13.5px;   --t-h3: 13px;    --t-h2: 16px;    --t-h1: 22px;

  --s1: 2px;  --s2: 4px;  --s3: 6px;  --s4: 8px;  --s5: 12px;
  --s6: 16px; --s7: 20px; --s8: 24px; --s9: 32px; --s10: 40px; --s11: 56px;

  --r1: 2px; --r2: 3px;   /* teto de 3px, por decisão */

  --h-control: 40px; --h-busca: 44px; --h-linha: 32px;
  --largura-max: 1560px;
}

@supports not (color: oklch(0 0 0)) {
  :root {
    --bg-void:#101210; --bg-base:#141613; --bg-panel:#1a1d19;
    --bg-raised:#212520; --bg-inset:#161915;
    --line-hair:#272b26; --line:#32372f; --line-strong:#474d43;
    --ink:#eceee7; --ink-2:#c3c7bd; --ink-3:#9aa094; --ink-4:#868d80;
    --ink-desab:#6a7065;
    --acento:#e2a13c; --acento-fraco:#a8752a; --acento-tinta:#1d1509;
    --ok:#4fc98a; --aviso:#e6bb45; --erro:#f0705f; --info:#79b0e8;
  }
}

*, *::before, *::after { box-sizing: border-box; }
/* O atributo hidden precisa vencer qualquer display de autor declarado abaixo. */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg-base); color: var(--ink);
  font: 400 var(--t-ui)/1.45 var(--f-sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,p,figure,ul,ol { margin: 0; padding: 0; }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
::selection { background: var(--acento-fraco); color: var(--acento-tinta); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: var(--r1); }

* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--bg-inset); }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border: 3px solid var(--bg-inset); }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

.ico {
  width: 16px; height: 16px; flex: 0 0 auto; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

/* --- utilitários tipográficos ------------------------------------------- */
/* .num é central: CPF, CNPJ, valores e datas alinham em coluna por construção */
.num, .campo .num {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: -.01em;
}
.meta { font: 500 var(--t-meta)/1.3 var(--f-mono); letter-spacing: .04em; color: var(--ink-3); }
.status { color: var(--ink-3); font-size: var(--t-ui); margin: var(--s4) 0; min-height: 18px; }
.erro { color: var(--erro); font: 500 var(--t-meta)/1.4 var(--f-mono); margin: 0; }

.secao {
  display: flex; align-items: center; gap: var(--s5);
  font: 600 var(--t-h3)/1 var(--f-sans);
  text-transform: uppercase; letter-spacing: .11em; color: var(--ink-2);
  padding-block: var(--s7) var(--s4);
}
.secao::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }

/* --- casca: faixa + cabeçalho + abas ------------------------------------ */
.faixa {
  display: flex; align-items: center; gap: var(--s6);
  height: 24px; padding: 0 var(--s6);
  background: var(--bg-void); border-bottom: 1px solid var(--line-hair);
  font: 500 var(--t-meta)/1 var(--f-mono); letter-spacing: .06em;
  color: var(--ink-4); text-transform: uppercase;
}
.faixa__ponto { width: 6px; height: 6px; background: var(--ok); border-radius: 1px; }
.faixa__dir { margin-left: auto; display: flex; gap: var(--s6); }

header {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg-void); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--s7);
  padding: 0 var(--s6); height: 52px;
}
.marca { display: flex; align-items: baseline; gap: var(--s3); user-select: none; }
.marca__tick { color: var(--acento); font: 600 var(--t-h2) var(--f-mono); line-height: 1; }
.marca__nome {
  font: 600 15px/1 var(--f-sans); font-stretch: 92%;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}

nav { display: flex; gap: var(--s1); margin-left: var(--s8); align-self: stretch; }
nav button {
  position: relative; display: inline-flex; align-items: center; gap: var(--s4);
  height: 100%; min-height: var(--h-control); padding: 0 var(--s5);
  border: 0; background: none; cursor: pointer;
  font: 500 var(--t-ui)/1 var(--f-sans); letter-spacing: .02em; color: var(--ink-3);
}
nav button:hover { color: var(--ink); background: var(--bg-base); }
nav button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: transparent;
}
nav button.ativo { color: var(--ink); }
nav button.ativo::after { background: var(--acento); }

.usuario { margin-left: auto; display: flex; align-items: center; gap: var(--s5); font: 500 var(--t-tab) var(--f-sans); color: var(--ink-2); }
.usuario a { font: 500 var(--t-meta) var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }

main { width: 100%; max-width: var(--largura-max); margin: 0 auto; padding: var(--s6) var(--s6) var(--s11); }

/* --- controles ----------------------------------------------------------- */
input, select {
  height: var(--h-control); padding: 0 var(--s5);
  background: var(--bg-inset); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r1);
  font: 400 var(--t-ui)/1 var(--f-sans);
}
input::placeholder { color: var(--ink-desab); }
input:hover, select:hover { border-color: var(--line-strong); }
input:focus-visible, select:focus-visible { border-color: var(--acento); }
select {
  appearance: none; padding-right: var(--s9); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%239aa094' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5l4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--s5) center;
}
button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s4);
  height: var(--h-control); min-width: var(--h-control); padding: 0 var(--s6);
  border: 1px solid var(--acento); border-radius: var(--r2);
  background: var(--acento); color: var(--acento-tinta);
  font: 600 var(--t-ui)/1 var(--f-sans); letter-spacing: .02em;
  cursor: pointer; white-space: nowrap;
  transition: background 90ms linear, border-color 90ms linear;
}
button:hover { background: color-mix(in oklab, var(--acento), white 12%); }
button:active { transform: translateY(1px); }

/* --- busca: peça-assinatura, unidade soldada de 44px --------------------- */
.busca {
  display: flex; align-items: stretch; margin-bottom: var(--s6);
  border: 1px solid var(--line-strong); border-radius: var(--r2);
  background: var(--bg-inset); overflow: hidden;
}
.busca:focus-within { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); }
.busca select {
  height: var(--h-busca); border: 0; border-right: 1px solid var(--line);
  border-radius: 0; background-color: var(--bg-panel);
  font: 600 var(--t-tab)/1 var(--f-sans); text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-2); min-width: 200px; order: 1;
}
.busca input {
  flex: 1 1 auto; min-width: 0; height: var(--h-busca); order: 2;
  border: 0; background: transparent; color: var(--ink);
  padding: 0 var(--s5); border-radius: 0;
  font: 500 15px/1 var(--f-mono); letter-spacing: .02em;
}
.busca input::placeholder { font-family: var(--f-sans); font-weight: 400; letter-spacing: 0; }
.busca input:focus-visible { outline: none; }
.busca button {
  height: var(--h-busca); border-radius: 0; border: 0;
  border-left: 1px solid var(--acento-fraco); padding: 0 var(--s7); order: 3;
}

/* --- painéis: sem sombra; primário ganha marcas de canto ----------------- */
.cartao {
  position: relative; background: var(--bg-panel);
  border: 1px solid var(--line); border-radius: var(--r2);
  margin-bottom: var(--s6);
}
.cartao h3 {
  display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap;
  padding: var(--s6) var(--s6) var(--s5);
  font: 600 var(--t-h1)/1.15 var(--f-sans); font-stretch: 96%;
  letter-spacing: -.015em; color: var(--ink);
  border-bottom: 1px solid var(--line-hair);
}
.cartao::before, .cartao::after {
  content: ""; position: absolute; width: 7px; height: 7px;
  border: 1px solid var(--acento); pointer-events: none;
}
.cartao::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.cartao::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.sub-secao {
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s6) var(--s6) var(--s4);
  font: 600 var(--t-h3)/1 var(--f-sans);
  text-transform: uppercase; letter-spacing: .11em; color: var(--ink-2);
}
.sub-secao::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line-hair); }
.contador {
  font: 500 var(--t-meta) var(--f-mono); color: var(--acento);
  border: 1px solid var(--acento-fraco); border-radius: var(--r1); padding: 2px 6px;
}

/* --- ficha rótulo/valor: grade de fios (gap 1px sobre fundo de linha) ---- */
.campos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 1px; background: var(--line-hair);
  border-block: 1px solid var(--line-hair);
}
.campo { background: var(--bg-panel); padding: var(--s5); min-width: 0; }
.campo .rot {
  display: block; margin-bottom: var(--s3);
  font: 600 var(--t-micro)/1 var(--f-sans);
  text-transform: uppercase; letter-spacing: .10em; color: var(--ink-3);
}
.campo .val {
  font: 500 var(--t-val)/1.35 var(--f-sans); color: var(--ink);
  overflow-wrap: anywhere;
}

/* --- tabelas densas: cabeçalho fixo, rolagem horizontal ------------------ */
.tabela-rolavel { overflow: auto; max-height: 60vh; overscroll-behavior: contain; }
table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font: 500 var(--t-tab)/1.35 var(--f-sans); font-variant-numeric: tabular-nums;
}
thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-inset); padding: var(--s4) var(--s5);
  text-align: left; white-space: nowrap;
  font: 600 var(--t-micro)/1 var(--f-sans); font-stretch: 84%;
  text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3);
  box-shadow: inset 0 -1px 0 var(--line-strong);
}
tbody tr { background: var(--bg-panel); }
tbody tr:nth-child(even) { background: color-mix(in oklab, var(--bg-panel), var(--bg-raised) 45%); }
tbody tr:hover { background: var(--bg-raised); }
td {
  height: var(--h-linha); padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--line-hair); color: var(--ink-2); white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }

/* --- chips: 20px de altura; 50+ tags precisam caber --------------------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0 var(--s6) var(--s6); }
.chip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 var(--s3);
  border: 1px solid var(--line); border-radius: var(--r1);
  background: var(--bg-inset); color: var(--ink-2);
  font: 500 var(--t-micro)/1 var(--f-sans); font-stretch: 92%;
  letter-spacing: .045em; white-space: nowrap; max-width: 240px;
  overflow: hidden; text-overflow: ellipsis; cursor: pointer; min-width: 0;
}
.chip:hover { color: var(--acento); border-color: var(--acento-fraco); background: var(--bg-raised); }

/* --- badges de status ---------------------------------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: var(--s3);
  height: 22px; padding: 0 var(--s4);
  border: 1px solid; border-radius: var(--r1);
  font: 600 var(--t-micro)/1 var(--f-sans);
  text-transform: uppercase; letter-spacing: .09em; white-space: nowrap;
}
.tag.ok { color: var(--ok); border-color: color-mix(in oklab, var(--ok) 45%, transparent); background: color-mix(in oklab, var(--ok) 12%, transparent); }
.tag.av { color: var(--aviso); border-color: color-mix(in oklab, var(--aviso) 45%, transparent); background: color-mix(in oklab, var(--aviso) 12%, transparent); }
.tag.off { color: var(--erro); border-color: color-mix(in oklab, var(--erro) 50%, transparent); background: color-mix(in oklab, var(--erro) 14%, transparent); }

/* --- formulários de linha (chaves, logs) -------------------------------- */
.linha-form { display: flex; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s6); }
.linha-form input, .linha-form select { flex: 1 1 160px; min-width: 0; }

.chave-nova {
  border: 1px solid var(--acento-fraco); border-radius: var(--r2);
  background: color-mix(in oklab, var(--acento) 8%, var(--bg-panel));
  padding: var(--s6); margin-bottom: var(--s6);
}
.chave-nova strong { font: 600 var(--t-ui) var(--f-sans); color: var(--acento); }
.chave-nova code {
  display: block; background: var(--bg-void); padding: var(--s5);
  border: 1px solid var(--line); border-radius: var(--r1);
  margin: var(--s4) 0; word-break: break-all;
  font: 500 var(--t-val) var(--f-mono); color: var(--ink);
}

.resumo { display: flex; gap: var(--s9); flex-wrap: wrap; margin-bottom: var(--s6); }
.resumo div { color: var(--ink-3); font: 500 var(--t-meta)/1.4 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; }
.resumo b {
  display: block; color: var(--ink); font: 600 26px/1.1 var(--f-mono);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin-bottom: var(--s2);
}

pre {
  background: var(--bg-void); border: 1px solid var(--line); border-radius: var(--r1);
  padding: var(--s5); margin: var(--s6); overflow-x: auto;
  font: 400 var(--t-tab)/1.5 var(--f-mono); color: var(--ink-2);
}

/* --- login: folha de rosto dividida, não cartão centralizado ------------- */
.tela-login {
  min-height: 100dvh; display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  background: var(--bg-void);
}
.tela-login::before {
  content: ""; padding: var(--s11) var(--s10);
  border-right: 1px solid var(--line);
  /* malha técnica de 40px: textura, não decoração */
  background-image:
    repeating-linear-gradient(0deg, var(--line-hair) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, var(--line-hair) 0 1px, transparent 1px 40px);
}
.cartao-login {
  align-self: center; justify-self: center;
  width: 100%; max-width: 340px; padding: var(--s10) var(--s8);
  display: flex; flex-direction: column; gap: var(--s6);
  background: none; border: 0;
}
.cartao-login h1 {
  font: 600 var(--t-h1)/1.1 var(--f-sans); font-stretch: 92%;
  letter-spacing: -.02em; color: var(--ink);
}
.cartao-login h1::before { content: "/ "; color: var(--acento); font-family: var(--f-mono); }
.cartao-login .sub {
  margin-top: calc(var(--s6) * -1);
  font: 500 var(--t-meta) var(--f-mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-4);
}
label { display: flex; flex-direction: column; gap: var(--s3); }
label {
  font: 600 var(--t-micro)/1 var(--f-sans);
  text-transform: uppercase; letter-spacing: .10em; color: var(--ink-3);
}
label input { width: 100%; font-size: var(--t-ui); }
.cartao-login button { width: 100%; }

@media (max-width: 860px) {
  .tela-login { grid-template-columns: 1fr; }
  .tela-login::before { display: none; }
}
@media (max-width: 720px) {
  header { height: auto; flex-wrap: wrap; padding-block: var(--s4); }
  nav { margin-left: 0; width: 100%; overflow-x: auto; }
  main { padding-inline: var(--s5); }
  .busca { flex-wrap: wrap; }
  .busca select { width: 100%; border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}