/* Identidade sóbria, próxima da do documento impresso: cinza, serifa nos textos longos,
   sem cor decorativa. A cor aparece só onde comunica estado. */

:root {
  --tinta: #1c1c1c;
  --tinta-fraca: #5c5c5c;
  --linha: #d4d4d4;
  --fundo: #f6f6f4;
  --papel: #ffffff;
  --realce: #fff3b0;
  --acao: #15559b;   /* ver nota sobre contraste no fim do arquivo */
  --acao-clara: #eaeff6;
  --ok: #1d6b3f;
  --alerta: #8a5300;
  --erro: #9b2226;
  --raio: 6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--fundo);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------------------------------------------------------------- estrutura */

.topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .85rem 1.5rem;
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
  /* Filete escuro no alto, como a régua do timbre do documento. */
  box-shadow: inset 0 3px 0 var(--acao);
}
.marca { display: flex; align-items: baseline; gap: .6rem; text-decoration: none; color: inherit; }
.marca strong { font-size: 1.2rem; letter-spacing: .1em; }
.marca span { color: var(--tinta-fraca); font-size: .85rem; }
.topo nav { display: flex; align-items: center; gap: 1rem; }
.topo nav a { color: var(--acao); text-decoration: none; font-size: .9rem; }
.topo nav a:hover { text-decoration: underline; }
.quem { color: var(--tinta-fraca); font-size: .85rem; }
@media (max-width: 620px) {
  .topo { flex-wrap: wrap; gap: .4rem; }
  .quem { width: 100%; order: 3; }
}

main { flex: 1; width: 100%; padding: 1.75rem 1.5rem 3rem; }
.conteudo { max-width: 880px; margin: 0 auto; }
.largo { max-width: 1180px; margin: 0 auto; }
.estreito { max-width: 420px; margin: 0 auto; }

.rodape {
  padding: 1rem 1.5rem; border-top: 1px solid var(--linha);
  color: var(--tinta-fraca); font-size: .8rem; text-align: center; background: var(--papel);
}

h1 { font-size: 1.5rem; margin: 0 0 .3rem; }
h2 { font-size: 1.05rem; margin: 1.8rem 0 .6rem; }
.legenda { color: var(--tinta-fraca); margin: 0 0 1.5rem; }

/* ---------------------------------------------------------------- cartões e listas */

.cartao {
  background: var(--papel); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 1.1rem 1.25rem; margin-bottom: .8rem;
}
.cartao-destaque { border-left: 3px solid var(--alerta); }

.item-lista { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
/* `:not(.botao)` é obrigatório: esta regra é para o título do DFD na linha da lista, mas o
   botão de ação divide o mesmo contêiner. Sem a exclusão, `.item-lista a` (0,1,1) vence
   `.botao` (0,1,0) e o rótulo do botão sai quase preto sobre azul-marinho — 1,48:1. */
.item-lista a:not(.botao) { color: var(--tinta); text-decoration: none; font-weight: 600; }
.item-lista a:not(.botao):hover { text-decoration: underline; }
.meta { color: var(--tinta-fraca); font-size: .82rem; margin-top: .2rem; }

.selo {
  display: inline-block; padding: .2rem .6rem; border-radius: 999px;
  font-size: .76rem; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--linha);
  background: var(--fundo); color: var(--tinta-fraca);
}
/* O estado precisa ser lido de relance, num painel com muitas linhas. */
.selo-aguardando { border-color: var(--alerta); color: var(--alerta); background: #fff8ec; }
.selo-aprovado { border-color: var(--ok); color: var(--ok); background: #edf7f0; }
.selo-devolvido { border-color: var(--erro); color: var(--erro); background: #fdeff0; }

.vazio { color: var(--tinta-fraca); text-align: center; padding: 3rem 1rem; }

/* ---------------------------------------------------------------- formulários */

/* Rótulo colado no seu campo e afastado do par seguinte: sem isso a leitura embaralha
   qual rótulo pertence a qual caixa. */
label { display: block; font-weight: 600; margin: 1.1rem 0 .25rem; font-size: .9rem; }
label .dica { display: block; font-weight: 400; color: var(--tinta-fraca); font-size: .82rem;
              margin-top: .1rem; }

/* `input:not([type])` é indispensável: um <input> sem atributo type é campo de texto para o
   navegador, mas NÃO casa com `input[type=text]` — foi o que deixou os campos do cartão de
   item com largura de conteúdo em vez de 100%. */
input:not([type]), input[type=text], input[type=email], input[type=password],
textarea, select {
  width: 100%; padding: .55rem .7rem; font: inherit; color: inherit;
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel);
}
textarea { resize: vertical; min-height: 2.75rem; }
textarea.cresce { overflow: hidden; }   /* a altura é ajustada por JS conforme o conteúdo */

input:focus, textarea:focus, select:focus, button:focus-visible, .botao:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--acao); outline-offset: 1px; border-color: var(--acao);
}
input:focus, textarea:focus, select:focus { outline-offset: -1px; }

.longo { min-height: 9rem; font-family: Georgia, "Times New Roman", serif; line-height: 1.6; }

/* `a.botao` em vez de `.botao`: sobe a especificidade para 0,1,1 e empata com qualquer
   regra de contêiner do tipo `.algo a`, ganhando por vir depois. É a proteção geral contra
   a classe de bug acima — já aconteceu três vezes neste arquivo. */
button, a.botao, .botao {
  display: inline-block; padding: .6rem 1.2rem; font: inherit; font-weight: 600;
  /* Alvo confortável de toque: o servidor pode abrir isto no telefone. */
  min-height: 44px; line-height: 1.5;
  border-radius: var(--raio); border: 1px solid var(--acao);
  background: var(--acao); color: #fff; cursor: pointer; text-decoration: none;
}
button:hover, .botao:hover { filter: brightness(1.15); }
button:disabled { opacity: .5; cursor: not-allowed; filter: none; }
a.secundario, .secundario { background: var(--papel); color: var(--acao); }
a.perigo, .perigo { background: var(--papel); color: var(--erro); border-color: var(--erro); }
/* Botões que se comportam como link não herdam a altura mínima de alvo de toque —
   senão o cabeçalho e as linhas de texto ficariam desproporcionais. */
.link, .item .remover {
  background: none; border: none; color: var(--acao); padding: 0;
  min-height: 0; font: inherit; font-size: .9rem; cursor: pointer; text-decoration: underline;
}
.acoes { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: 1.5rem; }
/* Devolver pede um motivo: campo e botão andam juntos, na mesma linha dos demais botões da
   peça. Escrito aqui, junto do `.acoes`, e não no fim do arquivo: redeclarar o seletor em dois
   lugares é como nasceram os três bugs de especificidade comentados acima. */
.acoes form.devolver { display: flex; gap: .4rem; align-items: center; flex: 1 1 22rem; }
.acoes form.devolver input { flex: 1; }

/* Busca solta na página. Precisa de regra própria: a do `.devolver` é escopada em `.acoes`,
   e reaproveitá-la fora dali deixava o botão caindo para a linha de baixo. */
form.busca { display: flex; gap: .4rem; align-items: center; margin-bottom: 1.2rem; }
form.busca input { flex: 1; }

.aviso {
  padding: .7rem .9rem; border-radius: var(--raio); margin-bottom: 1rem; font-size: .9rem;
  border: 1px solid var(--linha); background: var(--papel);
}
.aviso-erro { border-color: var(--erro); color: var(--erro); background: #fdeff0; }
.aviso-ok { border-color: var(--ok); color: var(--ok); background: #edf7f0; }
.aviso-atencao { border-color: var(--alerta); color: var(--alerta); background: #fff8ec; }

/* ---------------------------------------------------------------- entrevista */

.entrevista { display: grid; grid-template-columns: 1fr 240px; gap: 1.5rem; align-items: start; }
@media (max-width: 800px) { .entrevista { grid-template-columns: 1fr; } }

.conversa {
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 1.25rem; min-height: 320px;
}
.fala { margin-bottom: 1.1rem; }
.fala .autor {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-fraca); margin-bottom: .2rem;
}
.fala p { margin: 0; white-space: pre-wrap; }
.fala-assistant p { font-family: Georgia, "Times New Roman", serif; font-size: 1.02rem; }
.fala-user p {
  background: var(--acao-clara); padding: .55rem .8rem; border-radius: var(--raio);
}
/* O ponto de partida de uma fase seguinte: não é fala de ninguém que está na conversa, então
   não usa o balão de "você". Borda em vez de fundo, para não competir com o diálogo. */
.fala-contexto p {
  border-left: 3px solid var(--linha); padding: .3rem 0 .3rem .7rem;
  color: var(--tinta-fraca);
}

.pensando { color: var(--tinta-fraca); font-style: italic; }

.painel { background: var(--papel); border: 1px solid var(--linha);
          border-radius: var(--raio); padding: 1rem; font-size: .85rem; position: sticky; top: 1rem; }
.painel h3 { margin: 0 0 .6rem; font-size: .78rem; text-transform: uppercase;
             letter-spacing: .06em; color: var(--tinta-fraca); }
.painel li { list-style: none; padding: .18rem 0; color: var(--tinta-fraca); }
.painel li.ok { color: var(--ok); font-weight: 600; }
.painel ul { margin: 0; padding: 0; }
.painel h3 + .meta { margin-bottom: .6rem; }

/* Os anexos dividem o painel com o progresso, então precisam de separação visível: sem a
   linha e o respiro, a lista de arquivos lê como continuação dos tópicos cobertos. */
.painel h3:not(:first-of-type) { margin-top: 1.4rem; padding-top: 1rem;
                                 border-top: 1px solid var(--linha); }
.anexos li { padding: .5rem 0; border-bottom: 1px solid var(--linha);
             display: flex; flex-direction: column; gap: .1rem; }
.anexos li:last-child { border-bottom: none; }
.anexos .nome { color: var(--tinta); font-weight: 600; word-break: break-word; }
.anexos .alerta { color: var(--alerta); }
.anexos form { margin: .2rem 0 0; }
.enviar-anexo { margin-top: .8rem; display: flex; flex-direction: column; gap: .5rem; }
.enviar-anexo input[type=file] { font-size: .8rem; color: var(--tinta-fraca); max-width: 100%; }

/* Botão que age como link: usado no "remover" de um anexo, onde um botão cheio pesaria mais
   que a própria informação da lista. */
.ligacao { background: none; border: none; padding: 0; color: var(--tinta-fraca);
           font-size: .82rem; text-decoration: underline; cursor: pointer; }
.ligacao:hover { color: var(--tinta); }

.responder { display: flex; gap: .6rem; margin-top: 1rem; align-items: flex-end; }
.responder textarea { min-height: 3.2rem; }

/* ---------------------------------------------------------------- revisão */

.secao-doc { border-top: 1px solid var(--linha); padding-top: 1.6rem; margin-top: 2.4rem; }
.secao-doc:first-of-type { border-top: none; margin-top: 0; }
.secao-doc h2 { font-size: 1.15rem; margin: 0 0 .2rem; }
.secao-doc > .meta:first-of-type { margin-top: 0; }
.numero-secao { color: var(--tinta-fraca); font-variant-numeric: tabular-nums;
                font-weight: 400; }

/* Um cartão por item. A especificação preliminar tem três ou quatro linhas de texto — numa
   célula de tabela com <input> ela ficava cortada e o servidor revisava só o começo. */
.item {
  position: relative;
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--papel);
  padding: .4rem 1rem 1.1rem; margin: 0 0 .8rem;
}
.item legend {
  padding: 0 .45rem; margin-left: .3rem;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-fraca); font-weight: 600;
}
.item label:first-of-type { margin-top: .2rem; }
.item .remover {
  position: absolute; top: .55rem; right: .7rem;
  background: none; border: none; color: var(--erro);
  font-size: .8rem; font-weight: 600; padding: .2rem .4rem; text-decoration: underline;
}
.qtd-unid { display: grid; grid-template-columns: 11rem 1fr; gap: 0 1rem; }
@media (max-width: 520px) { .qtd-unid { grid-template-columns: 1fr; } }

.nota-competencia {
  border-left: 2px solid var(--linha); padding-left: .8rem; margin-top: 1.2rem;
}

.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 640px) { .duas { grid-template-columns: 1fr; } }

/* O seletor precisa de `input`/`textarea` para vencer `input[type=text]` na especificidade —
   sem isso o destaque nunca aparecia e a legenda da tela prometia algo que não acontecia. */
input.vazio-marcado, input:not([type]).vazio-marcado, textarea.vazio-marcado {
  background: var(--realce);
  border-color: #e2c86a;
}

/* Barra de ações: fica ao alcance enquanto se rola o formulário longo, mas precisa ler como
   uma barra — antes ela passava por cima do texto sem nenhuma separação visível. */
.barra-fixa {
  position: sticky; bottom: 0; z-index: 5;
  background: var(--papel);
  border-top: 1px solid var(--linha);
  box-shadow: 0 -6px 16px -8px rgba(0, 0, 0, .25);
  padding: .8rem 0; margin-top: 2.5rem;
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: center;
}
/* Espaço para o último campo não terminar embaixo da barra. */
form { padding-bottom: .5rem; }

/* ---------------------------------------------------------------- nota sobre contraste

   O azul de ação (--acao) precisa de duas coisas ao mesmo tempo:

   1. contraste suficiente com o branco do rótulo — #15559b dá 7,49:1, acima do AAA (7:1);
   2. distância suficiente da cor do texto (--tinta) — senão o botão lê como mais um bloco
      escuro em vez de uma ação. O #1f3a5f anterior ficava a apenas 1,48× da tinta.

   Ao trocar esta cor, confira as duas medidas, não só a primeira.
*/

/* O texto de uma seção na tela de revisão: quebras preservadas, serifa como no documento, e
   recuado para se distinguir da caixa de pedido logo abaixo. */
.secao-texto {
  white-space: pre-wrap; font-family: Georgia, "Times New Roman", serif;
  border-left: 3px solid var(--linha); padding-left: .9rem; margin: 0 0 1rem;
}

/* ---------------------------------------------------------------- cotações

   A tela onde a transcrição se corrige. Duas coisas precisam ficar visíveis a um olhar: o que
   é campo e o que é resultado. Por isso `.apurado` tem fundo próprio e nenhum `input` dentro —
   ver o número mudar é o que dá confiança para gravar, editá-lo desfaria a etapa inteira que
   tirou a aritmética das mãos do modelo. */

table.cotacoes { width: 100%; border-collapse: collapse; margin: .6rem 0 .2rem; }
table.cotacoes th {
  text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tinta-fraca); font-weight: 600; padding: .2rem .35rem;
  border-bottom: 1px solid var(--linha);
}
table.cotacoes td { padding: .18rem .35rem; vertical-align: middle; }
table.cotacoes td input[type=text],
table.cotacoes td input:not([type]) { margin: 0; width: 100%; }
table.cotacoes td.centro { text-align: center; }
table.cotacoes td.numero { text-align: right; font-variant-numeric: tabular-nums; }
table.cotacoes tr.suspeita td { background: var(--realce); }

/* Colunas iguais cortavam "proposta comercial" e "pesquisa direta" dentro do campo — quem
   confere a transcrição precisa ler a fonte sem clicar nela. `table-layout: fixed` é o que faz
   as larguras valerem; sem ele o navegador redistribui pelo conteúdo e ignora as porcentagens.
   Só na tabela de edição: a do apurado tem duas linhas de rótulo e número. */
/* Seis colunas não cabem num telefone, e sem isto a tabela empurrava a **página** para o lado:
   o botão "Voltar ao processo" e a coluna de descarte saíam da tela, e o corpo inteiro rolava
   na horizontal. Quem rola é a tabela; a página fica quieta. */
.rolagem { overflow-x: auto; }
form table.cotacoes { table-layout: fixed; min-width: 46rem; }
form table.cotacoes th:nth-child(1), form table.cotacoes td:nth-child(1) { width: 23%; }
form table.cotacoes th:nth-child(2), form table.cotacoes td:nth-child(2) { width: 22%; }
form table.cotacoes th:nth-child(3), form table.cotacoes td:nth-child(3) { width: 14%; }
/* A data é curta e de tamanho fixo: 14% cabe "01/08/2026" inteiro. Com 13% saía "01/08/202",
   que é o mesmo defeito de largura que já apareceu três vezes nos PDFs desta base. */
form table.cotacoes th:nth-child(4), form table.cotacoes td:nth-child(4) { width: 15%; }
form table.cotacoes th:nth-child(5), form table.cotacoes td:nth-child(5) { width: 18%; }
form table.cotacoes th:nth-child(6), form table.cotacoes td:nth-child(6) { width: 8%; }
/* A do apurado volta a distribuir pelo conteúdo. */
.apurado table.cotacoes { table-layout: auto; }
.apurado table.cotacoes td { width: auto; }
table.cotacoes tr.nova td input { opacity: .75; }
table.cotacoes tr.nova td input:focus { opacity: 1; }

.apurado {
  margin-top: .8rem; padding: .7rem .9rem; border-radius: var(--raio);
  background: var(--fundo); border: 1px solid var(--linha); font-size: .9rem;
}
.apurado table.cotacoes { margin-bottom: 0; }
.apurado table.cotacoes td { border: 0; }
/* O total quebrava entre o "R$" e o número, e um valor partido em duas linhas se lê errado
   num relance — que é exatamente o uso desta caixa. */
.apurado table.cotacoes td.numero { white-space: nowrap; }

/* ---------------------------------------------------------------- fila de trabalho

   A caixa de entrada fica no topo da listagem e precisa se distinguir dela num relance: é o
   que espera VOCÊ, não o que existe. Daí a borda de destaque à esquerda, o mesmo recurso do
   `.cartao-destaque`, e o botão de ação vindo antes do texto — a coluna da esquerda é onde o
   olho procura o que fazer. */

.cartao.fila { border-left: 3px solid var(--acao); }
.cartao.fila .item-lista { align-items: baseline; margin-bottom: .6rem; }
.cartao.fila .item-lista .meta { display: flex; gap: .35rem; flex-wrap: wrap; }

ul.pendencias { list-style: none; margin: 0; padding: 0; }
ul.pendencias li {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .6rem 0; border-top: 1px solid var(--linha);
}
/* Largura fixa na coluna de ação: sem isto os botões ficam de tamanhos diferentes e a lista
   perde a régua vertical que faz uma caixa de entrada ser lida de cima a baixo. */
ul.pendencias li > .botao { flex: 0 0 11rem; text-align: center; }
@media (max-width: 560px) {
  ul.pendencias li { flex-direction: column; gap: .4rem; }
  ul.pendencias li > .botao { flex: none; width: 100%; }
}

/* O filtro reaproveita `form.busca`, mas com um select no meio: o campo de texto cresce e o
   select fica do tamanho do seu conteúdo. */
form.busca select { flex: 0 0 auto; width: auto; }

/* ---------------------------------------------------------------- trilha de auditoria

   Lida de cima para baixo, com a data numa coluna fixa: é assim que se procura "quando isso
   aconteceu" sem ler linha por linha. */

ul.trilha { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
ul.trilha li { display: flex; gap: .9rem; padding: .4rem 0; }
ul.trilha li + li { border-top: 1px solid var(--linha); }
ul.trilha .quando {
  flex: 0 0 9.5rem; color: var(--tinta-fraca); font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  ul.trilha li { flex-direction: column; gap: .1rem; }
  ul.trilha .quando { flex: none; }
}