/* =============================================================================
   Sistema de design — Analisador de Contratos
   =============================================================================

   O leitor é um advogado ou analista de contratos em triagem. Ele não quer um
   painel: quer decidir, em segundos, se precisa ler o documento — e depois
   conseguir justificar essa decisão a outra pessoa. Tudo abaixo deriva disso.

   TIPOGRAFIA EM DOIS PAPÉIS. A interface é sem serifa; o texto CITADO DO
   CONTRATO é com serifa. Não é enfeite: é o sinal que separa "o que o sistema
   diz" de "o que o contrato diz". Num laudo onde a citação literal é a prova, a
   fronteira entre voz do software e voz do documento tem que ser visível sem
   ler.

   RISCO NUNCA SÓ EM COR. Cada nível carrega cor, peso tipográfico, rótulo em
   texto e posição num medidor. Daltonismo é comum; laudo jurídico é impresso em
   preto e branco; e cor sozinha não sobrevive a fotocópia.

   DENSIDADE DUPLA. Controles em densidade compacta, prosa e citação em medida
   confortável (65-72 caracteres). Texto jurídico longo em linha larga é o erro
   clássico de dashboard aplicado a documento.

   IMPRESSÃO É REQUISITO. O laudo vai para o processo, para o e-mail, para a
   pasta do caso. A folha de estilo de impressão está no fim deste arquivo e não
   é um bônus: sem ela, entregar isso ao jurídico seria entregar meio produto.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Tokens
   Um valor, um nome, um lugar. Cor nomeada pelo PAPEL (--superficie-elevada) e
   não pelo tom (--cinza-100): trocar o tema não deve exigir renomear nada.
   -------------------------------------------------------------------------- */
:root {
  /* Escala de espaço em múltiplos de 4px. Sem valor solto no resto do arquivo. */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 64px;

  --raio-p: 6px;
  --raio-m: 10px;
  --raio-g: 14px;
  --raio-pilula: 999px;

  --fonte-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  /* Serifa para texto do contrato. A pilha termina em Georgia, presente em
     Windows e macOS, para o papel tipográfico não depender de download. */
  --fonte-documento: "Source Serif 4", "Iowan Old Style", "Palatino Linotype",
    Georgia, "Times New Roman", serif;
  --fonte-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas,
    monospace;

  /* Escala tipográfica, razão ~1.2. */
  --t-micro: 11px;
  --t-menor: 12px;
  --t-peq: 13px;
  --t-base: 14px;
  --t-med: 16px;
  --t-gr: 20px;
  --t-tit: 26px;
  --t-nota: 40px;

  /* Superfícies em três níveis: fundo da página, cartão, e realce interno. */
  --fundo: #f6f6f4;
  --superficie: #ffffff;
  --superficie-afundada: #f1f1ee;
  --borda: #e2e0da;
  --borda-forte: #cfccc4;

  --texto: #1b1a17;
  --texto-medio: #5d5a53;
  --texto-fraco: #8b877e;

  --acento: #1f5c46;
  --acento-fraco: #e7f0ec;

  /* Risco. Cada nível tem tom para texto e tom para preenchimento, porque o
     mesmo verde que lê bem em 26px falha em barra de 6px. */
  --baixo: #1f6b4a;
  --baixo-fundo: #dff0e7;
  --medio: #8a5b09;
  --medio-fundo: #fbeed3;
  --alto: #9b2c2c;
  --alto-fundo: #fadedd;

  --atencao: #8a5b09;
  --atencao-fundo: #fbeed3;

  --sombra-1: 0 1px 2px rgba(24, 22, 18, 0.05);
  --sombra-2: 0 2px 4px rgba(24, 22, 18, 0.06), 0 8px 20px rgba(24, 22, 18, 0.05);

  --foco: 0 0 0 2px var(--superficie), 0 0 0 4px var(--acento);
  --transicao: 140ms cubic-bezier(0.2, 0, 0.2, 1);

  --largura-leitura: 68ch;

  /* Altura reservada para a barra fixa. Ela aparece em três contas — o `top` da
     coluna lateral, a margem de rolagem das âncoras e o recorte do observador de
     interseção — e as três estavam com o valor repetido à mão. */
  --altura-barra: 76px;
}

/* Tema escuro. Só os tokens mudam; nenhuma regra abaixo sabe qual tema está
   ativo. `:root:not([data-tema="claro"])` deixa a escolha manual vencer. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #14140f;
    --superficie: #1c1c16;
    --superficie-afundada: #23231c;
    --borda: #32322a;
    --borda-forte: #474639;

    --texto: #edebe4;
    --texto-medio: #a9a49a;
    --texto-fraco: #726d63;

    --acento: #6cba93;
    --acento-fraco: #1d2a24;

    --baixo: #6cba93;
    --baixo-fundo: #16281f;
    --medio: #dcaa4c;
    --medio-fundo: #2c2314;
    --alto: #e58a86;
    --alto-fundo: #2e1a19;

    --atencao: #dcaa4c;
    --atencao-fundo: #2c2314;

    --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sombra-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}
:root[data-tema="escuro"] {
  --fundo: #14140f;
  --superficie: #1c1c16;
  --superficie-afundada: #23231c;
  --borda: #32322a;
  --borda-forte: #474639;
  --texto: #edebe4;
  --texto-medio: #a9a49a;
  --texto-fraco: #726d63;
  --acento: #6cba93;
  --acento-fraco: #1d2a24;
  --baixo: #6cba93;
  --baixo-fundo: #16281f;
  --medio: #dcaa4c;
  --medio-fundo: #2c2314;
  --alto: #e58a86;
  --alto-fundo: #2e1a19;
  --atencao: #dcaa4c;
  --atencao-fundo: #2c2314;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* -----------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Rolagem suave só faz sentido com âncora: mostra que a página se moveu, e
     para onde. Desligada no bloco de movimento reduzido, mais abaixo. */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-ui);
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.011em;
  line-height: 1.25;
}

p {
  margin: 0;
}

a {
  color: var(--acento);
}

/* Foco visível e consistente. Nunca `outline: none` sem substituto: teclado é o
   único caminho para quem não usa mouse, e leitor de tela depende dele. */
:focus-visible {
  outline: none;
  box-shadow: var(--foco);
  border-radius: var(--raio-p);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* `hidden` tem que vencer o `display` da classe.

   `[hidden]` vale `display: none` na folha do NAVEGADOR, com especificidade zero:
   qualquer regra de classe que declare `display` ganha dela. Este arquivo declara
   `display` em quase toda classe estrutural, então `elemento.hidden = true` não
   escondia nada — e não escondia em silêncio, que é o pior modo de falhar.

   Foi encontrado pela navegação entre vistas (`.painel` declara `grid`, e as duas
   vistas ficavam na tela ao mesmo tempo), mas o caso grave era outro:
   `.faixa-revisao` declara `flex`, então a faixa "este laudo exige conferência
   humana" aparecia em laudo que NÃO exige — dizendo o contrário do que o laudo
   dizia, na parte que mais importa.

   `!important` aqui é a exceção que a regra pede: é uma declaração de intenção
   sobre um atributo, não sobre aparência. A folha de impressão sobrescreve para
   as abas do laudo com `[role="tabpanel"][hidden]`, que vence por
   especificidade. */
[hidden] {
  display: none !important;
}

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

/* -----------------------------------------------------------------------------
   3. Estrutura: barra fixa + duas colunas
   Padrão caixa-de-entrada e detalhe. Triagem é trabalho de fila: quem analisa
   um contrato vai analisar o próximo, e comparar com o anterior.
   -------------------------------------------------------------------------- */
.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-3) var(--e-5);
  background: color-mix(in srgb, var(--superficie) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borda);
}

.marca {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  min-width: 0;
}
.marca h1 {
  font-size: var(--t-med);
  white-space: nowrap;
}
.marca .versao {
  font-size: var(--t-micro);
  color: var(--texto-fraco);
  font-family: var(--fonte-mono);
  white-space: nowrap;
}

.barra .empurra {
  margin-left: auto;
}

.painel {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--e-5);
  align-items: start;
  max-width: 1360px;
  margin: 0 auto;
  padding: var(--e-5);
}

.coluna-lateral {
  position: sticky;
  top: var(--altura-barra);
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding-right: var(--e-1);
}

@media (max-width: 900px) {
  .painel {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--e-4);
  }
  .coluna-lateral {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* -----------------------------------------------------------------------------
   3b. Navegação entre vistas
   Duas vistas, não duas páginas: a fila de análises da sessão vive em memória do
   navegador, e recarregar para ler a explicação apagaria o trabalho de quem
   estava no meio de uma triagem.

   Botão e não link porque não há navegação de documento acontecendo. O estado
   ativo é `aria-current="page"`, que o leitor de tela anuncia — sublinhado só
   não bastaria.
   -------------------------------------------------------------------------- */
.navegacao {
  display: flex;
  gap: var(--e-1);
  padding: 3px;
  border-radius: var(--raio-pilula);
  background: var(--superficie-afundada);
  border: 1px solid var(--borda);
}
.aba-nav {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--texto-medio);
  font: inherit;
  font-size: var(--t-peq);
  font-weight: 550;
  padding: 5px var(--e-4);
  border-radius: var(--raio-pilula);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transicao), color var(--transicao);
}
.aba-nav:hover {
  color: var(--texto);
}
.aba-nav[aria-current="page"] {
  background: var(--superficie);
  color: var(--texto);
  box-shadow: var(--sombra-1);
}

/* -----------------------------------------------------------------------------
   3c. Papéis que estavam em atributo `style`
   Não são utilitários genéricos: são os seis lugares onde havia declaração solta
   na marcação. Saíram de lá porque a instância pública serve um
   `Content-Security-Policy` sem `unsafe-inline`, e atributo `style` simplesmente
   não aplica sob ele — a página quebraria só em produção, que é o pior lugar para
   descobrir. Ver `Caddyfile` e o teste que proíbe a volta deles.
   -------------------------------------------------------------------------- */
.espaco-2 {
  height: var(--e-2);
}
.espaco-4 {
  height: var(--e-4);
}

/* Texto de apoio dentro de um cartão: menor, mais fraco, empilhado. */
.corpo.auxiliar {
  display: grid;
  gap: var(--e-3);
  font-size: var(--t-menor);
  color: var(--texto-medio);
}

/* Aviso que abre uma seção, antes do conteúdo dela. */
.preambulo {
  margin-bottom: var(--e-5);
}

/* Coluna de selos e botões do veredito, alinhada ao topo. */
.acoes-do-veredito {
  display: grid;
  gap: var(--e-3);
  align-content: start;
}

/* -----------------------------------------------------------------------------
   4. Cartão
   -------------------------------------------------------------------------- */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-1);
}
.cartao > header {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-5);
  border-bottom: 1px solid var(--borda);
}
.cartao > header h2 {
  font-size: var(--t-menor);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--texto-fraco);
  font-weight: 600;
}
.cartao .corpo {
  padding: var(--e-5);
}
.cartao .corpo.rente {
  padding: 0;
}

/* -----------------------------------------------------------------------------
   5. Formulário
   -------------------------------------------------------------------------- */
.campo {
  display: block;
  margin-bottom: var(--e-4);
}
.campo > .rotulo {
  display: block;
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-fraco);
  margin-bottom: var(--e-2);
}
.campo .ajuda {
  display: block;
  margin-top: var(--e-2);
  font-size: var(--t-menor);
  color: var(--texto-fraco);
  line-height: 1.45;
}

select,
input[type="text"] {
  width: 100%;
  padding: var(--e-2) var(--e-3);
  font: inherit;
  font-size: var(--t-peq);
  color: var(--texto);
  background: var(--superficie-afundada);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-p);
  transition: border-color var(--transicao);
}
select:hover,
input[type="text"]:hover {
  border-color: var(--texto-fraco);
}

/* Zona de arrastar. O input nativo de arquivo é escondido e substituído por um
   alvo grande, porque "arraste o PDF aqui" é o gesto que quem recebe contrato
   por e-mail já faz. O input continua no DOM e continua sendo o que o teclado e
   o leitor de tela alcançam — a área é um rótulo, não um botão falso. */
.zona-arquivo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-5) var(--e-4);
  text-align: center;
  background: var(--superficie-afundada);
  border: 1.5px dashed var(--borda-forte);
  border-radius: var(--raio-m);
  cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao);
}
.zona-arquivo:hover,
.zona-arquivo.sobre {
  border-color: var(--acento);
  background: var(--acento-fraco);
}
.zona-arquivo input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.zona-arquivo .icone {
  font-size: var(--t-gr);
  line-height: 1;
  color: var(--texto-fraco);
}
.zona-arquivo .principal {
  font-size: var(--t-peq);
  font-weight: 550;
}
.zona-arquivo .secundario {
  font-size: var(--t-micro);
  color: var(--texto-fraco);
}
.zona-arquivo.preenchida {
  border-style: solid;
  border-color: var(--acento);
  background: var(--acento-fraco);
}
.zona-arquivo .nome-do-arquivo {
  font-family: var(--fonte-mono);
  font-size: var(--t-menor);
  word-break: break-all;
}

/* -----------------------------------------------------------------------------
   6. Botões
   -------------------------------------------------------------------------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-4);
  font: inherit;
  font-size: var(--t-peq);
  font-weight: 600;
  color: var(--superficie);
  background: var(--texto);
  border: 1px solid transparent;
  border-radius: var(--raio-p);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--transicao), background var(--transicao);
}
.botao:hover:not(:disabled) {
  opacity: 0.86;
}
.botao:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.botao.largo {
  width: 100%;
  padding: var(--e-3) var(--e-4);
  font-size: var(--t-base);
}
.botao.secundario {
  color: var(--texto);
  background: transparent;
  border-color: var(--borda-forte);
  font-weight: 500;
}
.botao.secundario:hover:not(:disabled) {
  background: var(--superficie-afundada);
  opacity: 1;
}
.botao.discreto {
  color: var(--texto-medio);
  background: transparent;
  border-color: transparent;
  padding: var(--e-1) var(--e-2);
  font-size: var(--t-menor);
  font-weight: 500;
}
.botao.discreto:hover:not(:disabled) {
  background: var(--superficie-afundada);
  color: var(--texto);
  opacity: 1;
}

/* -----------------------------------------------------------------------------
   7. Selo de risco e medidor
   O medidor mostra a nota DENTRO das faixas, com os limites marcados. Um número
   sozinho não informa: 45 só significa algo ao lado do 30 e do 60.
   -------------------------------------------------------------------------- */
.veredito {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--e-5);
  padding: var(--e-5);
  border-bottom: 1px solid var(--borda);
}

.nota {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  min-width: 190px;
}
.nota .nivel {
  font-size: var(--t-nota);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.nota .escala {
  font-family: var(--fonte-mono);
  font-size: var(--t-menor);
  color: var(--texto-medio);
}
.nivel-BAIXO {
  color: var(--baixo);
}
.nivel-MEDIO {
  color: var(--medio);
}
.nivel-ALTO {
  color: var(--alto);
}

.medidor {
  flex: 1 1 260px;
  min-width: 240px;
}
.medidor .trilha {
  position: relative;
  height: 10px;
  border-radius: var(--raio-pilula);
  overflow: hidden;
  background: var(--superficie-afundada);
  border: 1px solid var(--borda);
}
.medidor .segmento {
  position: absolute;
  top: 0;
  bottom: 0;
}
.medidor .segmento.s-BAIXO {
  background: var(--baixo-fundo);
}
.medidor .segmento.s-MEDIO {
  background: var(--medio-fundo);
}
.medidor .segmento.s-ALTO {
  background: var(--alto-fundo);
}
.medidor .agulha {
  /* Posição inicial. Estava em atributo `style` na marcação; o JavaScript
     sobrescreve com a nota real ao desenhar o laudo. */
  left: 0;
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 3px;
  border-radius: var(--raio-pilula);
  background: var(--texto);
  box-shadow: 0 0 0 2px var(--superficie);
  transition: left var(--transicao);
}
.medidor .legenda {
  display: flex;
  justify-content: space-between;
  margin-top: var(--e-2);
  font-family: var(--fonte-mono);
  font-size: var(--t-micro);
  color: var(--texto-fraco);
}

.selos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  align-items: center;
}
.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: 3px var(--e-3);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pilula);
  color: var(--texto-medio);
  background: var(--superficie-afundada);
}
.selo.origem-LLM {
  color: var(--acento);
  border-color: var(--acento);
  background: var(--acento-fraco);
}
.selo.origem-FALLBACK,
.selo.aviso {
  color: var(--atencao);
  border-color: var(--atencao);
  background: var(--atencao-fundo);
}

/* Aviso de conferência humana. É a informação de maior consequência jurídica da
   tela: um laudo de fallback não conferido virando decisão é o pior desfecho
   possível deste sistema. Por isso ele é faixa, não etiqueta. */
.faixa-revisao {
  display: flex;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-5);
  background: var(--atencao-fundo);
  border-bottom: 1px solid var(--borda);
  font-size: var(--t-peq);
  color: var(--texto);
}
.faixa-revisao strong {
  font-weight: 650;
}

/* -----------------------------------------------------------------------------
   8. Abas
   Um laudo tem quatro leituras diferentes e ninguém precisa das quatro ao mesmo
   tempo. Rolagem infinita esconde o que importa no meio do que não importa.
   -------------------------------------------------------------------------- */
[role="tablist"] {
  display: flex;
  gap: var(--e-1);
  padding: 0 var(--e-5);
  border-bottom: 1px solid var(--borda);
  overflow-x: auto;
  scrollbar-width: none;
}
[role="tablist"]::-webkit-scrollbar {
  display: none;
}
[role="tab"] {
  position: relative;
  padding: var(--e-3) var(--e-3);
  font: inherit;
  font-size: var(--t-peq);
  font-weight: 550;
  color: var(--texto-fraco);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transicao);
}
[role="tab"]:hover {
  color: var(--texto);
}
[role="tab"][aria-selected="true"] {
  color: var(--texto);
  border-bottom-color: var(--acento);
}
[role="tab"] .contagem {
  margin-left: var(--e-1);
  font-family: var(--fonte-mono);
  font-size: var(--t-micro);
  color: var(--texto-fraco);
}
[role="tabpanel"] {
  padding: var(--e-5);
}

/* -----------------------------------------------------------------------------
   9. Achado — a unidade de informação do laudo
   -------------------------------------------------------------------------- */
.resumo-executivo {
  max-width: var(--largura-leitura);
  font-size: var(--t-med);
  line-height: 1.6;
  color: var(--texto-medio);
  margin-bottom: var(--e-5);
}

.achado {
  padding: var(--e-5) 0;
  border-top: 1px solid var(--borda);
}
.achado:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.achado > header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-3);
  margin-bottom: var(--e-3);
}
.achado h3 {
  font-size: var(--t-med);
  font-weight: 600;
}
.achado .peso {
  margin-left: auto;
  font-family: var(--fonte-mono);
  font-size: var(--t-menor);
  color: var(--texto-fraco);
  white-space: nowrap;
}
.ancora {
  font-family: var(--fonte-mono);
  font-size: var(--t-micro);
  color: var(--texto-fraco);
  padding: 2px var(--e-2);
  background: var(--superficie-afundada);
  border-radius: var(--raio-p);
  white-space: nowrap;
}

/* A citação. Serifa, medida de leitura, régua à esquerda: o vocabulário visual
   de documento. A régua ganha a cor do risco para o olho ligar a citação ao
   nível sem precisar de outro rótulo. */
.citacao {
  position: relative;
  max-width: var(--largura-leitura);
  margin: 0 0 var(--e-3);
  padding: var(--e-3) var(--e-4);
  font-family: var(--fonte-documento);
  font-size: var(--t-med);
  line-height: 1.6;
  background: var(--superficie-afundada);
  border-left: 3px solid var(--borda-forte);
  border-radius: 0 var(--raio-p) var(--raio-p) 0;
}
.citacao.r-BAIXO {
  border-left-color: var(--baixo);
}
.citacao.r-MEDIO {
  border-left-color: var(--medio);
}
.citacao.r-ALTO {
  border-left-color: var(--alto);
}
.citacao .marca-valor {
  font-weight: 700;
  color: var(--alto);
  background: transparent;
}

.justificativa {
  max-width: var(--largura-leitura);
  font-size: var(--t-base);
  color: var(--texto-medio);
  margin-bottom: var(--e-3);
}

.meta-achado {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  font-size: var(--t-menor);
}
.meta-achado dt {
  font-weight: 600;
  color: var(--texto-fraco);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--t-micro);
  margin-bottom: 2px;
}
.meta-achado dd {
  margin: 0;
  color: var(--texto-medio);
}
.fichas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
}
.ficha {
  font-family: var(--fonte-mono);
  font-size: var(--t-micro);
  padding: 2px var(--e-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  color: var(--texto-medio);
  background: var(--superficie);
}
.ficha.interna {
  color: var(--texto-fraco);
  border-style: dashed;
}

/* -----------------------------------------------------------------------------
   10. Tabelas (pontuação e inspetor de RAG)
   -------------------------------------------------------------------------- */
.rolagem {
  overflow-x: auto;
  border: 1px solid var(--borda);
  border-radius: var(--raio-m);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-peq);
}
thead th {
  position: sticky;
  top: 0;
  text-align: left;
  padding: var(--e-2) var(--e-3);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-fraco);
  background: var(--superficie-afundada);
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}
tbody td {
  padding: var(--e-2) var(--e-3);
  border-bottom: 1px solid var(--borda);
  vertical-align: baseline;
}
tbody tr:last-child td {
  border-bottom: 0;
}
tfoot td {
  padding: var(--e-3);
  font-weight: 650;
  border-top: 2px solid var(--borda-forte);
  background: var(--superficie-afundada);
}
td.num,
th.num {
  text-align: right;
  font-family: var(--fonte-mono);
  white-space: nowrap;
}
td.chave {
  font-family: var(--fonte-mono);
  font-size: var(--t-menor);
}

tr.abaixo-do-piso td {
  color: var(--texto-fraco);
}
tr.garantido td {
  color: var(--texto);
}
tr.garantido td.chave {
  color: var(--acento);
}
tr.linha-do-piso td {
  border-top: 2px dashed var(--atencao);
}
.porta {
  display: inline-block;
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px var(--e-2);
  border-radius: var(--raio-p);
}
.porta.p-piso {
  color: var(--texto-medio);
  background: var(--superficie-afundada);
}
.porta.p-categoria {
  color: var(--acento);
  background: var(--acento-fraco);
}
.porta.p-fora {
  color: var(--texto-fraco);
}

/* -----------------------------------------------------------------------------
   11. Fila de análises
   -------------------------------------------------------------------------- */
.fila {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fila li + li {
  border-top: 1px solid var(--borda);
}
.item-fila {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  padding: var(--e-3) var(--e-4);
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  transition: background var(--transicao);
}
.item-fila:hover {
  background: var(--superficie-afundada);
}
.item-fila[aria-current="true"] {
  background: var(--acento-fraco);
  box-shadow: inset 3px 0 0 var(--acento);
}
.item-fila .titulo {
  flex: 1;
  min-width: 0;
  font-size: var(--t-peq);
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item-fila .sub {
  font-size: var(--t-micro);
  color: var(--texto-fraco);
  font-family: var(--fonte-mono);
}
.pastilha {
  flex-shrink: 0;
  min-width: 52px;
  text-align: center;
  padding: 2px var(--e-2);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--raio-p);
}
.pastilha.n-BAIXO {
  color: var(--baixo);
  background: var(--baixo-fundo);
}
.pastilha.n-MEDIO {
  color: var(--medio);
  background: var(--medio-fundo);
}
.pastilha.n-ALTO {
  color: var(--alto);
  background: var(--alto-fundo);
}
.pastilha.n-processando {
  color: var(--texto-fraco);
  background: var(--superficie-afundada);
}

/* Texto auxiliar reutilizado fora da fila (colunas de comparacao, resumos de
   clausula). Definido no nivel de cima porque `.item-fila .sub` limitava a regra
   a um contexto e o mesmo papel visual aparece em tres lugares. */
.sub {
  font-size: var(--t-micro);
  color: var(--texto-fraco);
  font-family: var(--fonte-mono);
}

/* -----------------------------------------------------------------------------
   12. Estados: vazio, carregando, erro
   Estado de carregamento informativo, não decorativo: 80 segundos de espera
   sem nada acontecendo na tela é indistinguível de travamento.
   -------------------------------------------------------------------------- */
.vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-8) var(--e-5);
  text-align: center;
  color: var(--texto-fraco);
}
.vazio .icone {
  font-size: 34px;
  line-height: 1;
  opacity: 0.55;
}
.vazio h2 {
  font-size: var(--t-med);
  color: var(--texto);
  text-transform: none;
  letter-spacing: -0.01em;
}
.vazio p {
  max-width: 46ch;
  font-size: var(--t-peq);
}

.progresso {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  padding: var(--e-7) var(--e-5);
  align-items: center;
  text-align: center;
}
.progresso .etapa {
  font-size: var(--t-base);
  font-weight: 550;
}
.progresso .cronometro {
  font-family: var(--fonte-mono);
  font-size: var(--t-menor);
  color: var(--texto-fraco);
}
.progresso .barra {
  width: min(320px, 100%);
  height: 4px;
  border-radius: var(--raio-pilula);
  background: var(--superficie-afundada);
  overflow: hidden;
}
.progresso .barra::after {
  content: "";
  display: block;
  width: 40%;
  height: 100%;
  border-radius: var(--raio-pilula);
  background: var(--acento);
  animation: desliza 1.5s ease-in-out infinite;
}
@keyframes desliza {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(250%);
  }
}

.alerta {
  display: flex;
  gap: var(--e-3);
  padding: var(--e-4);
  border-radius: var(--raio-m);
  font-size: var(--t-peq);
  border: 1px solid;
}
.alerta.erro {
  color: var(--alto);
  background: var(--alto-fundo);
  border-color: var(--alto);
}
.alerta.aviso {
  color: var(--texto);
  background: var(--atencao-fundo);
  border-color: var(--atencao);
}
.alerta.informativo {
  color: var(--texto-medio);
  background: var(--superficie-afundada);
  border-color: var(--borda);
}
.alerta .titulo {
  font-weight: 650;
  display: block;
  margin-bottom: 2px;
  color: var(--texto);
}

/* -----------------------------------------------------------------------------
   13. Comparação de modos
   -------------------------------------------------------------------------- */
.comparacao {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.coluna-comparacao {
  border: 1px solid var(--borda);
  border-radius: var(--raio-m);
  padding: var(--e-4);
}
.coluna-comparacao h3 {
  font-size: var(--t-peq);
  font-family: var(--fonte-mono);
  margin-bottom: var(--e-3);
}
.coluna-comparacao .destaque {
  font-size: var(--t-gr);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.lista-simples {
  list-style: none;
  margin: var(--e-3) 0 0;
  padding: 0;
  font-size: var(--t-menor);
  color: var(--texto-medio);
}
.lista-simples li {
  padding: 2px 0;
}
.lista-simples li::before {
  content: "· ";
  color: var(--texto-fraco);
}

/* Detalhes recolhíveis */
details.bloco {
  border: 1px solid var(--borda);
  border-radius: var(--raio-m);
  margin-bottom: var(--e-3);
  overflow: hidden;
}
details.bloco > summary {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  font-size: var(--t-peq);
  cursor: pointer;
  background: var(--superficie-afundada);
}
details.bloco > summary:hover {
  color: var(--texto);
}
details.bloco[open] > summary {
  border-bottom: 1px solid var(--borda);
}
details.bloco .interior {
  padding: var(--e-4);
}
.texto-clausula {
  max-width: var(--largura-leitura);
  max-height: 180px;
  overflow-y: auto;
  padding: var(--e-3);
  margin-bottom: var(--e-4);
  font-family: var(--fonte-documento);
  font-size: var(--t-peq);
  line-height: 1.6;
  color: var(--texto-medio);
  background: var(--superficie-afundada);
  border-radius: var(--raio-p);
  white-space: pre-wrap;
}

dl.diagnostico {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--e-2) var(--e-5);
  margin: 0;
  font-size: var(--t-peq);
}
dl.diagnostico dt {
  color: var(--texto-fraco);
}
dl.diagnostico dd {
  margin: 0;
  font-family: var(--fonte-mono);
  font-size: var(--t-menor);
  word-break: break-word;
}
dl.diagnostico dd.prosa {
  font-family: var(--fonte-ui);
  font-size: var(--t-peq);
  color: var(--atencao);
}

.nota-de-pe {
  max-width: var(--largura-leitura);
  margin: var(--e-6) auto 0;
  padding: 0 var(--e-5) var(--e-7);
  font-size: var(--t-menor);
  color: var(--texto-fraco);
  text-align: center;
}

/* -----------------------------------------------------------------------------
   13b. Vista de explicação
   Aqui o leitor não está triando: está decidindo se vale a pena triar. Muda a
   densidade — medida de leitura confortável, hierarquia de título mais alta,
   respiro maior entre blocos. O sistema de design é o mesmo; o que muda é o
   ajuste, e é por isso que nenhuma cor nova aparece nesta seção.
   -------------------------------------------------------------------------- */
.painel.documento {
  grid-template-columns: 240px minmax(0, 1fr);
}

.prosa {
  display: grid;
  gap: var(--e-5);
  min-width: 0;
}
/* Sem isto o link do índice rola até a seção e a barra fixa cobre o título dela:
   a página se move e parece não ter ido a lugar nenhum. */
.prosa > section {
  scroll-margin-top: calc(var(--altura-barra) + var(--e-3));
}
.prosa .corpo {
  display: grid;
  gap: var(--e-4);
  max-width: var(--largura-leitura);
}
.prosa .corpo.rente {
  max-width: none;
  gap: 0;
}
.prosa p {
  color: var(--texto-medio);
  font-size: var(--t-med);
  line-height: 1.62;
}
.prosa .corpo > h2,
.prosa h3.chamada {
  color: var(--texto);
  font-size: var(--t-gr);
  letter-spacing: -0.015em;
  max-width: 34ch;
}
.prosa h4 {
  margin: 0;
  font-size: var(--t-base);
  font-weight: 650;
  color: var(--texto);
}
.prosa h4.sub-secao {
  margin-top: var(--e-4);
  padding-top: var(--e-4);
  border-top: 1px solid var(--borda);
}
.prosa .corpo-solto {
  padding: var(--e-5) var(--e-5) 0;
  max-width: var(--largura-leitura);
}
.prosa kbd {
  font-family: var(--fonte-mono);
  font-size: var(--t-menor);
  padding: 1px 5px;
  border: 1px solid var(--borda-forte);
  border-bottom-width: 2px;
  border-radius: var(--raio-p);
  background: var(--superficie-afundada);
  color: var(--texto);
}

/* Índice. Rola junto na coluna fixa e marca a seção visível por observador de
   interseção — não por posição calculada no rolamento, que erra sempre que a
   altura de um bloco muda. */
.lista-indice {
  list-style: none;
  margin: 0;
  padding: var(--e-2);
  display: grid;
  gap: 2px;
}
.lista-indice a {
  display: block;
  padding: 6px var(--e-3);
  border-radius: var(--raio-p);
  font-size: var(--t-peq);
  color: var(--texto-medio);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.lista-indice a:hover {
  background: var(--superficie-afundada);
  color: var(--texto);
}
.lista-indice a[aria-current="true"] {
  color: var(--acento);
  font-weight: 600;
  border-left-color: var(--acento);
  background: var(--acento-fraco);
}

.lista-marcada {
  margin: 0;
  padding-left: var(--e-5);
  display: grid;
  gap: var(--e-3);
  color: var(--texto-medio);
  font-size: var(--t-med);
  line-height: 1.6;
  max-width: var(--largura-leitura);
}
.lista-marcada strong {
  color: var(--texto);
}

.observacao {
  padding-left: var(--e-4);
  border-left: 2px solid var(--borda-forte);
  color: var(--texto-fraco) !important;
  font-size: var(--t-base) !important;
}

.destaque {
  display: grid;
  gap: var(--e-2);
  padding: var(--e-4) var(--e-5);
  border-radius: var(--raio-m);
  background: var(--acento-fraco);
  border: 1px solid color-mix(in srgb, var(--acento) 25%, transparent);
}
.destaque p {
  font-size: var(--t-base);
  color: var(--texto-medio);
}

/* Esteira de etapas. Numeração desenhada e não `list-style`, porque o número é
   um alvo de referência no texto ("a busca híbrida da etapa 3") e precisa ser
   legível de longe. */
.esteira {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e-5);
  counter-reset: etapa;
}
.esteira > li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--e-4);
  align-items: start;
  position: relative;
}
/* A linha que liga uma etapa à seguinte: transforma seis blocos numa sequência.
   Não aparece no último porque ela indica continuação, e não borda. */
.esteira > li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 30px;
  bottom: calc(-1 * var(--e-5));
  width: 1px;
  background: var(--borda);
}
.esteira .passo {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--superficie-afundada);
  border: 1px solid var(--borda);
  color: var(--texto-medio);
  font-family: var(--fonte-mono);
  font-size: var(--t-menor);
  font-weight: 600;
}
.esteira > li > div {
  display: grid;
  gap: var(--e-2);
}
.esteira p {
  font-size: var(--t-base);
}
.esteira.roteiro .passo {
  background: var(--acento-fraco);
  border-color: color-mix(in srgb, var(--acento) 35%, transparent);
  color: var(--acento);
}

.garantias {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  max-width: none;
}
.garantias article {
  display: grid;
  gap: var(--e-2);
  align-content: start;
  padding: var(--e-4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-m);
  background: var(--superficie-afundada);
}
.garantias p {
  font-size: var(--t-peq);
  line-height: 1.55;
}

/* Estimativa. Campo estreito e rótulo acima: o rótulo é uma frase, e frase ao
   lado de campo numérico quebra o alinhamento na primeira tradução. */
.estimativa {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  padding: var(--e-4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-m);
  background: var(--superficie-afundada);
  max-width: none;
}
.campo-inline {
  display: grid;
  gap: var(--e-1);
}
.campo-inline label {
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-fraco);
  line-height: 1.35;
}
.campo-inline input {
  width: 100%;
  padding: 7px var(--e-3);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-p);
  background: var(--superficie);
  color: var(--texto);
  font-family: var(--fonte-mono);
  font-size: var(--t-base);
}
.campo-inline input:focus-visible {
  outline: none;
  box-shadow: var(--foco);
}

/* Linha de saldo da estimativa: é a única linha que alguém procura de propósito
   na tabela, então ela sai do corpo e ganha peso. */
#tabela-estimativa tr.saldo td,
#tabela-estimativa tr.saldo th {
  border-top: 2px solid var(--borda-forte);
  font-weight: 650;
  color: var(--texto);
}
#tabela-estimativa td.num,
#tabela-estimativa th.num {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .painel.documento {
    grid-template-columns: minmax(0, 1fr);
  }
  .prosa p,
  .lista-marcada {
    font-size: var(--t-base);
  }
}

/* -----------------------------------------------------------------------------
   14. Impressão
   O laudo vai para o processo. Aqui ele deixa de ser interface e passa a ser
   documento: sem barra, sem fila, sem botão, tudo expandido, cor econômica e
   uma nota de rodapé dizendo o que ele é e o que não é.
   -------------------------------------------------------------------------- */
@media print {
  :root {
    --fundo: #fff;
    --superficie: #fff;
    --superficie-afundada: #fff;
    --borda: #c9c9c9;
    --borda-forte: #9a9a9a;
    --texto: #000;
    --texto-medio: #333;
    --texto-fraco: #555;
  }

  body {
    font-size: 10.5pt;
  }

  .barra,
  .coluna-lateral,
  [role="tablist"],
  .nao-imprimir {
    display: none !important;
  }


  .painel {
    display: block;
    max-width: none;
    padding: 0;
  }

  .cartao {
    border: 0;
    box-shadow: none;
  }

  /* Todas as abas de uma vez: no papel não existe clique. */
  [role="tabpanel"][hidden] {
    display: block !important;
    padding: 0;
    break-before: page;
  }
  [role="tabpanel"]::before {
    content: attr(data-titulo-impressao);
    display: block;
    margin: 0 0 12pt;
    padding-bottom: 4pt;
    font-size: 12pt;
    font-weight: 700;
    border-bottom: 1pt solid #000;
  }

  details.bloco {
    break-inside: avoid;
  }
  details.bloco > summary {
    list-style: none;
  }
  details:not([open]) > *:not(summary) {
    display: revert !important;
  }

  .achado {
    break-inside: avoid;
  }
  .citacao {
    background: #fff;
    border-left: 2pt solid #000;
  }

  .veredito {
    border-bottom: 1pt solid #000;
  }
  .medidor {
    display: none;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #555;
  }

  .rodape-impressao {
    display: block !important;
    margin-top: 18pt;
    padding-top: 8pt;
    border-top: 0.5pt solid #999;
    font-size: 8.5pt;
    color: #444;
  }

  @page {
    margin: 18mm 16mm;
  }
}

.rodape-impressao {
  display: none;
}