/**
 * Aba Curadoria — a fila de decisao humana do pipeline.
 *
 * Nao ha token novo aqui, e nao deve haver: DECISAO.md secao 6 registra que a
 * Curadoria "ja tem anatomia pronta, porque e feita dos mesmos tres componentes
 * que as telas atuais". Manchete em serifa, metadados em mono, carimbo de
 * sentimento com forma + palavra, acao de linha em `.btn-action`.
 *
 * A unica regra de cor obedecida a risca e a de DECISAO.md secao 3: "se algo
 * esta colorido, algo aconteceu". Nesta tela o unico croma permanente e o
 * ambar de `sem veiculo` — pendencia operacional real, que a arquitetura (§11)
 * manda apresentar em vez de resolver sozinha. O resto e fio e degrau de valor.
 */

/* ============================================================================
   A grade de sangria — a mesma das outras tres abas
   ========================================================================= */

/* `display: grid` e as colunas ficam aqui, no arquivo dono, e nao em main.css:
   declarar a grade la tambem faria uma folha carregada depois vencer por ordem
   com a mesma especificidade. O que main.css centraliza e so a REGRA DE COLUNA
   (`.cur-container > * { grid-column: 2 }`).

   `row-gap` e nao `gap` pelo mesmo motivo registrado em analitico.css: o
   shorthand seta tambem `column-gap`, que empurra a coluna do meio e faz a
   grade terminar alem da viewport em tela estreita. */
.cur-container {
  display: grid;
  grid-template-columns: 1fr min(var(--page-max), calc(100% - 2 * var(--page-gutter))) 1fr;
  row-gap: var(--space-4);
  padding-block: var(--space-6);
}

/* ============================================================================
   Cabecalho da aba
   ========================================================================= */

.cur-head {
  margin-bottom: 0;
}

.cur-head h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--ink);
  margin: 0 0 var(--space-1);
}

.cur-sub {
  color: var(--ink-2);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-3);
  max-width: 66ch;
}

/* O numero e apurado — mono com `tabular-nums`, como todo valor medido
   (DECISAO.md secao 5: "mono = medido"). */
.cur-resumo {
  font-family: var(--font-numbers);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  margin: 0;
}

.cur-resumo .cur-num {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--ink);
  margin-right: var(--space-1);
}

/* ============================================================================
   O selo de pendentes na aba da `nav`
   ========================================================================= */

/* Numero, nao bolinha: "12 esperando" e informacao; um ponto vermelho so diz
   "algo mudou". Fica em tinta, e nao em cor de alerta — a fila cheia e o
   estado NORMAL de um pipeline que coleta de hora em hora, e pintar de
   vermelho o funcionamento normal gasta o vermelho. */
.tab .cur-badge {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: var(--sunken);
  border: 1px solid var(--rule-2);
  color: var(--ink-2);
  font-family: var(--font-numbers);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-semibold);
  line-height: 1.4;
  vertical-align: 1px;
}

.tab.active .cur-badge {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}

/* ============================================================================
   A lista
   ========================================================================= */

.cur-lista {
  border-top: 1px solid var(--rule);
}

.cur-item {
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}

.cur-item.is-aberta {
  background: var(--surface-2);
}

.cur-linha {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-3);
}

.cur-corpo {
  flex: 1 1 auto;
  min-width: 0;
}

/* Serifa confinada a manchete: "texto que alguem publicou la fora" se
   distingue de "rotulo que o sistema escreveu" (DECISAO.md secao 2). */
.cur-titulo {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: 1.3;
  margin: 0 0 var(--space-2);
  color: var(--ink);
}

.cur-titulo a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.cur-titulo a:hover {
  border-bottom-color: var(--act);
  color: var(--act);
}

.cur-meta {
  font-family: var(--font-numbers);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.cur-sep {
  color: var(--rule-2);
}

.cur-veic {
  font-family: var(--font-primary);
  font-weight: var(--font-medium);
  color: var(--ink-2);
}

/* Dominio sem veiculo no cadastro: 64 das 113 ocorrencias em 2026-08-29. E
   pendencia, nao defeito — e por isso ambar de atencao, e nao vermelho. */
.cur-veic-pendente {
  color: var(--warn-ink);
  background: var(--warn-soft);
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
}

.cur-acoes {
  display: flex;
  gap: var(--space-2);
  flex: 0 0 auto;
}

.cur-vazio {
  padding: var(--space-10) var(--space-4);
  text-align: center;
  color: var(--ink-3);
  font-size: var(--text-sm);
  max-width: 60ch;
  margin: 0 auto;
}

.cur-vazio.cur-erro {
  color: var(--neg-ink);
}

/* ============================================================================
   O formulario de aprovacao
   ========================================================================= */

.cur-form {
  padding: 0 var(--space-3) var(--space-5);
  display: grid;
  gap: var(--space-4);
  border-top: 1px dashed var(--rule);
  margin-top: 0;
  padding-top: var(--space-4);
}

.cur-campo {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.cur-campo legend {
  padding: 0;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  margin-bottom: var(--space-2);
}

.cur-campo legend abbr {
  color: var(--neg-ink);
  text-decoration: none;
}

.cur-radios {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Forma + palavra, nunca cor sozinha (DECISAO.md secao 4). A forma aparece
   sempre; o croma so entra quando a opcao esta escolhida — antes disso nada
   aconteceu ainda. */
.cur-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  font-size: var(--text-sm);
  color: var(--ink-2);
  cursor: pointer;
}

.cur-radio input {
  margin: 0;
  accent-color: var(--act);
}

.cur-forma {
  font-size: 11px;
  line-height: 1;
  color: var(--neu);
}

.cur-radio-positivo:has(input:checked) {
  border-color: var(--pos);
  background: var(--pos-soft);
  color: var(--pos-ink);
}

.cur-radio-positivo:has(input:checked) .cur-forma { color: var(--pos); }

.cur-radio-neutro:has(input:checked) {
  border-color: var(--neu);
  background: var(--neu-soft);
  color: var(--ink);
}

.cur-radio-negativo:has(input:checked) {
  border-color: var(--neg);
  background: var(--neg-soft);
  color: var(--neg-ink);
}

.cur-radio-negativo:has(input:checked) .cur-forma { color: var(--neg); }

/* 31 unidades: grade de colunas automaticas em vez de lista de 31 linhas, que
   empurraria o botao de publicar para fora da tela em toda aprovacao. */
.cur-checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--space-1) var(--space-3);
  max-height: 220px;
  overflow-y: auto;
  padding: var(--space-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

/* 9 temas cabem numa fita — grade com rolagem ali seria cromo sem conteudo. */
.cur-checks-linha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  max-height: none;
  overflow: visible;
}

.cur-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-2);
  cursor: pointer;
  min-width: 0;
}

.cur-check input {
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--act);
}

.cur-check span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cur-check:has(input:checked) {
  color: var(--ink);
  font-weight: var(--font-medium);
}

.cur-campo-duplo {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-4);
  /* `start`, e nao o `stretch` que a grade faz por padrao. Sem isto o
     `<select>` de Estado ESTICA para a altura da celula vizinha -- que cresce
     quando o bloco ambar do veiculo novo aparece --, e o campo vira uma caixa
     de 105 px de altura contra os 38 px do input ao lado. Medido em
     2026-09-02, depois de o dono apontar "o dropdown de Estado esta
     estourado, ocupando uma area enorme". */
  align-items: start;
}

.cur-rotulo {
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  min-width: 0;
}

.cur-form-msg {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-3);
  min-height: 0;
}

.cur-form-msg:empty {
  display: none;
}

.cur-form-msg.is-erro {
  color: var(--neg-ink);
  background: var(--neg-soft);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
}

.cur-form-acoes {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* A nota empurra os botoes para a direita e diz, no lugar onde a duvida
   aparece, por que nao ha campo de titulo neste formulario. */
.cur-nota {
  flex: 1 1 auto;
  font-size: var(--text-xs);
  color: var(--ink-3);
  min-width: 220px;
}

/* ============================================================================
   Paginacao
   ========================================================================= */

.cur-paginacao {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3);
}

.cur-paginacao:empty {
  display: none;
}

.cur-pag-info {
  font-family: var(--font-numbers);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

/* ============================================================================
   Estreito
   ========================================================================= */

@media (max-width: 768px) {
  .cur-linha {
    flex-direction: column;
    gap: var(--space-3);
  }

  .cur-acoes {
    width: 100%;
  }

  .cur-acoes .btn-action {
    flex: 1 1 0;
  }

  .cur-campo-duplo {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   O motivo: por que esta matéria está na fila
   ========================================================================= */

/* Pedido do dono ao usar a fila pela primeira vez: "um highlight do motivo
   pelo qual ela foi filtrada". Fica em degrau de valor e fio, e NAO em cor:
   toda linha da fila tem um motivo, e croma que aparece em 100% das linhas
   nao destaca nada — gasta a regra "se algo esta colorido, algo aconteceu"
   (DECISAO.md secao 3) sem comprar distincao nenhuma. */
.cur-motivo {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  padding: 2px var(--space-2);
  background: var(--sunken);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  max-width: 100%;
}

/* Rotulo condensado, alvo em largura normal: o eixo `wdth` da Archivo como
   dimensao de hierarquia (DECISAO.md secao 5). */
.cur-motivo-rot {
  font-stretch: 78%;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  flex: 0 0 auto;
}

.cur-motivo-alvo {
  color: var(--ink);
  font-weight: var(--font-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================================
   Legendas do formulário e a unidade proposta
   ========================================================================= */

/* A legenda vive na `legend` do fieldset, ao lado do rotulo: e ali que a
   duvida nasce ("por que isto ja veio marcado?"), e resposta longe da duvida
   nao e resposta. */
.cur-legenda {
  display: inline;
  margin-left: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-regular);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-3);
}

/* Unidade marcada pela busca. O fio a esquerda diz "isto nao foi voce quem
   marcou" sem dizer que esta certo — a confirmacao continua sendo humana. */
.cur-check.is-proposta {
  color: var(--ink);
  font-weight: var(--font-medium);
  border-left: 2px solid var(--act-3);
  padding-left: var(--space-2);
  margin-left: -2px;
}

/* ============================================================================
   A prova capturada
   ========================================================================= */

.cur-prova {
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--sunken);
  padding: var(--space-3);
}

.cur-prova-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
}

.cur-prova-tit {
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  margin-right: auto;
}

/* Link e escolha do usuario — aqui o azul de interacao e o uso certo dele. */
.cur-prova-link {
  color: var(--act);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.cur-prova-link:hover {
  color: var(--act-2);
}

.cur-prova-custodia {
  font-family: var(--font-numbers);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  cursor: help;
}

/* Serifa: e texto publicado la fora, como a manchete. `tabindex` no elemento
   torna a caixa rolavel alcancavel pelo teclado — bloco com rolagem propria
   que so o mouse alcanca e armadilha de acessibilidade. */
.cur-prova-texto {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink-2);
  max-height: 168px;
  overflow-y: auto;
  white-space: pre-wrap;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

.cur-prova-texto:focus-visible {
  outline: 2px solid var(--act);
  outline-offset: 1px;
}

.cur-prova-vazia {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-3);
}

/* ============================================================================
   Cadastrar o veículo sem sair da fila
   ========================================================================= */

/* Ambar, e o mesmo do `sem veiculo` da linha: e a MESMA pendencia, vista de
   perto. Cor diferente aqui faria parecer outro assunto. */
.cur-veic-novo {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-left: 2px solid var(--warn);
  background: var(--warn-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  display: grid;
  gap: var(--space-2);
}

.cur-veic-novo .cur-legenda {
  margin: 0;
  color: var(--warn-ink);
  display: block;
}

.cur-veic-novo-linha {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.cur-veic-novo-linha .form-select {
  flex: 0 1 190px;
}

.cur-veic-novo-msg {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--ink-3);
}

.cur-veic-novo-msg:empty {
  display: none;
}

.cur-veic-novo-msg.is-erro {
  color: var(--neg-ink);
  font-weight: var(--font-medium);
}

/* Endereço que o cadastro JÁ conhece: não é pendência de cadastro, é
   informação — some o âmbar. Um só veículo é caminho livre (verde de
   estável); mais de um é a disputa do Q5, e aí o âmbar volta porque há
   escolha a fazer. */
.cur-veic-novo.is-resolvido {
  border-left-color: var(--pos);
  background: var(--pos-soft);
}

.cur-veic-novo.is-resolvido .cur-legenda {
  color: var(--pos-ink);
}

.cur-veic-lista {
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--text-xs);
  color: var(--warn-ink);
}

.cur-veic-lista li {
  margin: 2px 0;
}

/* O bloco do veículo mora dentro de `<label class="cur-rotulo">`, que é
   CAIXA ALTA. Nome de veículo não é rótulo de campo: "G1 Alagoas" virava
   "G1 ALAGOAS" e parecia grito. */
.cur-veic-novo,
.cur-veic-novo * {
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--font-regular);
}

.cur-veic-novo strong {
  font-weight: var(--font-semibold);
}

/* ============================================================================
   O painel de descarte
   ========================================================================= */

/* Fio vermelho a esquerda: aqui algo ACONTECE — a matéria sai da fila. É um
   dos poucos lugares desta tela onde o croma de severidade se justifica
   (DECISAO.md secao 3), porque a acao e destrutiva do ponto de vista da fila,
   mesmo nao apagando nada. */
.cur-descarte {
  border-top: 1px dashed var(--rule);
  border-left: 3px solid var(--neg);
  padding: var(--space-4) var(--space-3) var(--space-5);
  display: grid;
  gap: var(--space-4);
}

.cur-motivos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-2);
}

.cur-motivo-opcao {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 var(--space-2);
  align-items: baseline;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  cursor: pointer;
}

.cur-motivo-opcao input {
  margin: 0;
  grid-row: span 2;
  align-self: center;
  accent-color: var(--act);
}

.cur-motivo-rotulo {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--ink);
}

/* O exemplo e o que decide a duvida entre dois motivos parecidos, entao ele
   fica NA opcao e nao num `title` que so o mouse alcanca. */
.cur-motivo-ex {
  grid-column: 2;
  font-size: var(--text-xs);
  color: var(--ink-3);
  line-height: 1.35;
}

.cur-motivo-opcao:has(input:checked) {
  border-color: var(--neg);
  background: var(--neg-soft);
}

.cur-motivo-opcao:has(input:checked) .cur-motivo-rotulo {
  color: var(--neg-ink);
  font-weight: var(--font-semibold);
}

.cur-descarte-nota {
  text-transform: none;
  letter-spacing: 0;
}

/* ============================================================================
   As duas vistas da aba
   ========================================================================= */

.cur-vistas {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-3);
  border-bottom: 1px solid var(--rule);
}

.cur-vista {
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--ink-3);
  cursor: pointer;
  margin-bottom: -1px;
}

.cur-vista:hover { color: var(--ink); }

.cur-vista.is-ativa {
  color: var(--ink);
  font-weight: var(--font-semibold);
  border-bottom-color: var(--ink);
}

.cur-vista-num {
  font-family: var(--font-numbers);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--ink-3);
  margin-left: var(--space-2);
}

/* ============================================================================
   A quarentena
   ========================================================================= */

.cur-prazo {
  font-family: var(--font-numbers);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--sunken);
  color: var(--ink-2);
}

/* O croma entra só quando a janela está fechando — antes disso nada
   aconteceu, e prazo em dia não é alerta (DECISAO.md secao 3). */
.cur-prazo.is-perto {
  background: var(--warn-soft);
  color: var(--warn-ink);
}

.cur-prazo.is-expurgada {
  background: var(--neu-soft);
  color: var(--ink-3);
}

.cur-motivo-selo {
  font-size: var(--text-xs);
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--neg-soft);
  color: var(--neg-ink);
}

.cur-nota-descarte {
  font-size: var(--text-xs);
  color: var(--ink-3);
  font-style: italic;
}

/* O tipo do veículo é campo do formulário, não ação — então tem rótulo, como
   os outros, e não fica solto ao lado de um botão que já não existe. */
.cur-veic-tipo-rotulo {
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--warn-ink);
  max-width: 220px;
}

/* A sugestão do título: um clique, e o nome vai para o campo. Botão com cara
   de link porque é escolha do usuário, não ação da tela — e o azul de
   interação é o uso certo do acento aqui. */
.cur-veic-sugestao {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--warn-ink);
}

.cur-sugestao-btn {
  border: 0;
  padding: 0;
  background: transparent;
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--act);
  border-bottom: 1px solid currentColor;
  cursor: pointer;
}

.cur-sugestao-btn:hover { color: var(--act-2); }