/* Copiloto de Cotação — Plenus Peças
   Identidade aprovada (spec §7.1): branco/clássico, navy só na ação primária,
   dourado como filete de acento; serif nos títulos, sans nos controles, mono
   em código/PN/preço. Zero JS — toda a interação de tema é via prefers-color-scheme. */

:root {
  /* marca — cores oficiais (site/assets, export Corel) */
  --navy: #3E4095;
  --navy-escuro: #2C3572;
  --dourado: #F7BB2F;
  --dourado-escuro: #C98F12;

  /* claro (padrão) — fundo branco, estética de "planilha de trabalho" */
  --papel: #FFFFFF;
  --painel: #FCFBF8;
  --linha: #E4E1D6;
  --tinta: #1E2340;
  --texto: #3A3F55;
  --texto-suave: #6E7290;
  --erro: #B3261E;
  --erro-fundo: #FBEAE9;
  --erro-linha: #E7B4AF;

  /* tipografia — 3 papéis, fontes de sistema (sem self-hosting) */
  --serif: "Palatino Linotype", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Cascadia Code", Consolas, "Courier New", monospace;

  --raio: 4px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel: #10132B;
    --painel: #171A3D;
    --linha: #2E3363;
    --tinta: #F1F1F7;
    --texto: #C9CEE9;
    --texto-suave: #8E96BF;
    --erro: #F2B8B5;
    --erro-fundo: #3A1414;
    --erro-linha: #6B2825;
  }
}

/* reset/base */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  color: var(--tinta);
  font-weight: 700;
  line-height: 1.25;
}

code, .mono { font-family: var(--mono); }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--navy-escuro); }

@media (prefers-color-scheme: dark) {
  a { color: var(--dourado); }
}

:focus-visible {
  outline: 2px solid var(--dourado);
  outline-offset: 2px;
}

/* cabeçalho — marca + conta (Item 2, polish pré-merge), filete fino no
   lugar de sombra. Flex row pra caber os dois lados; no login (sem
   .cabecalho-conta — usuario não existe nessa view) sobra só a marca,
   mesma aparência de sempre. wrap pro celular: nome+Config+Sair descem pra
   uma 2ª linha em vez de estourar a largura, em vez de um menu hambúrguer
   (nav pequena demais pra justificar JS). */
.cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  border-bottom: 1px solid var(--linha);
  padding: 0.9rem 1.5rem;
}

.marca { display: inline-flex; }

.marca-img { height: 28px; width: auto; }

.marca-escura { display: none; }

@media (prefers-color-scheme: dark) {
  .marca-clara { display: none; }
  .marca-escura { display: block; }
}

/* .cabecalho-conta — nome do usuário + Config (só sócio) + Sair. Sem borda
   nem fundo (barra "slim"); .conta-link cobre tanto o <a> do Config quanto
   o <button> do form Sair, pro par ficar visualmente idêntico (o <button>
   não herda a cor/estilo de link que o `a{}` global já dá de graça). */
.cabecalho-conta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.8125rem;
}

.conta-nome {
  color: var(--texto-suave);
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conta-link {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy-escuro);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.conta-link:hover { text-decoration: underline; }

@media (prefers-color-scheme: dark) {
  .conta-link { color: var(--dourado); }
}

/* conteúdo — centraliza a tela de login; telas futuras (fila/detalhe)
   redefinem esta área na Task 8 */
.conteudo {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
}

/* tela de login + tela Config (Task 13) — mesmo cartão branco/clássico,
   larguras diferentes (Config precisa caber form + tabela de usuários). */
.cartao-login, .cartao-config {
  width: 100%;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-top: 3px solid var(--dourado);
  border-radius: var(--raio);
  padding: 2rem 1.75rem;
}

.cartao-login { max-width: 22rem; }

.cartao-config { max-width: 38rem; }

.cartao-login h1, .cartao-config h1 {
  font-size: 1.5rem;
  text-align: center;
}

.subtitulo {
  text-align: center;
  color: var(--texto-suave);
  font-size: 0.875rem;
  margin-top: 0.35rem;
  margin-bottom: 1.5rem;
}

.alerta {
  background: var(--erro-fundo);
  border: 1px solid var(--erro-linha);
  color: var(--erro);
  border-radius: var(--raio);
  padding: 0.6rem 0.85rem;
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
}

/* .aviso (Task 13, reprocessar): mesma caixa do .alerta, mas em tom de marca
   (navy) em vez de vermelho — o ganho do reprocessamento é uma BOA notícia
   ("mostra o número subir", spec §8), não um bloqueio; usar a cor de erro
   aqui confundiria o sócio. */
.aviso {
  background: var(--painel);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--navy);
  color: var(--texto);
  border-radius: var(--raio);
  padding: 0.6rem 0.85rem;
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
}

.form-login .campo {
  margin-bottom: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.form-login label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--texto);
}

.form-login input {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 0.55rem 0.7rem;
}

.form-login input:focus-visible {
  border-color: var(--navy);
}

.botao-primario {
  width: 100%;
  margin-top: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  color: #FFFFFF;
  text-decoration: none;
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: var(--raio);
  padding: 0.65rem 0.9rem;
  cursor: pointer;
}

.botao-primario:hover { background: var(--navy-escuro); border-color: var(--navy-escuro); }

/* ============================================================
   Fila / Detalhe (Task 8) — master-detail no PC, pilha no celular.
   Sem JS: cada rota já renderiza o "modo" certo (.tela-fila ou
   .tela-detalhe), então o CSS só decide o que mostrar por largura de tela.
   ============================================================ */

/* login usa .conteudo centralizado (regra já existente acima); fila/detalhe
   precisam da largura cheia para a grade master-detail. */
.conteudo:has(.mestre-detalhe) {
  display: block;
  padding: 0;
}

.mestre-detalhe {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .mestre-detalhe { grid-template-columns: 20rem 1fr; }
}

@media (max-width: 767.98px) {
  .tela-fila .coluna-conteudo { display: none; }
  .tela-detalhe .coluna-fila { display: none; }
}

/* ---- coluna esquerda: abas + lista de cotações ---- */

.coluna-fila { border-right: 1px solid var(--linha); padding: 1rem 0 2rem; }

@media (max-width: 767.98px) {
  .coluna-fila { border-right: none; padding: 1rem 1.25rem 2rem; }
}

.abas-fila {
  display: flex;
  gap: 0.25rem;
  padding: 0 1rem 0.75rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--linha);
  overflow-x: auto;
}

@media (max-width: 767.98px) {
  .abas-fila { padding: 0 0 0.75rem; }
}

.aba {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--texto-suave);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.4rem 0.7rem;
  border-radius: var(--raio);
}

.aba:hover { color: var(--tinta); background: var(--painel); }

.aba-ativa, .aba-ativa:hover { color: #FFFFFF; background: var(--navy); }

.aba-contagem { font-family: var(--mono); }

.lista-cotacoes { list-style: none; }

.lista-vazia { padding: 1.5rem 1rem; color: var(--texto-suave); font-size: 0.875rem; }

.linha-cotacao {
  display: block;
  padding: 0.7rem 1rem;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--linha);
  border-left: 3px solid transparent;
}

.linha-cotacao:hover { background: var(--painel); }

.linha-atual { background: var(--painel); border-left-color: var(--navy); }

.linha-topo {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--texto-suave);
  margin-bottom: 0.15rem;
}

.linha-numero { color: var(--tinta); font-weight: 600; }

.linha-titulo {
  display: block;
  overflow: hidden;
  font-size: 0.9375rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0.4rem;
}

progress.barra-identificado {
  display: block;
  width: 100%;
  height: 5px;
  margin-bottom: 0.3rem;
  border-radius: 3px;
  overflow: hidden;
  accent-color: var(--navy);
  border: none;
}

progress.barra-identificado::-webkit-progress-bar { background: var(--linha); }
progress.barra-identificado::-webkit-progress-value { background: var(--navy); }
progress.barra-identificado::-moz-progress-bar { background: var(--navy); }

.linha-pct { font-size: 0.75rem; color: var(--texto-suave); }

/* ---- coluna direita: conteúdo (vazio, ou o detalhe da cotação) ---- */

.coluna-conteudo { padding: 1.5rem 1.75rem 3rem; }

.vazio-conteudo { max-width: 30rem; margin: 3rem auto 0; text-align: center; }

.vazio-conteudo h1 { font-size: 1.375rem; margin-bottom: 0.5rem; }

.voltar { display: inline-block; font-size: 0.875rem; margin-bottom: 1rem; }

@media (min-width: 768px) {
  .voltar { display: none; }
}

.cabecalho-cotacao { margin-bottom: 1.25rem; }

.cabecalho-cotacao h1 { font-size: 1.375rem; margin-bottom: 0.2rem; }

.cotacao-numero { color: var(--texto-suave); font-size: 0.875rem; margin-bottom: 0.75rem; }

.cotacao-dados { display: flex; flex-wrap: wrap; gap: 1.5rem; }

.cotacao-dados dt, .item-dados dt {
  font-size: 0.6875rem;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.cotacao-dados dd { font-size: 0.9375rem; }

.legenda-estados {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.6rem 0.9rem;
  margin-bottom: 1.25rem;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  font-size: 0.8125rem;
  color: var(--texto-suave);
}

.legenda-item { display: inline-flex; align-items: center; gap: 0.3rem; }

.lista-itens { list-style: none; }

.item-cotacao {
  border: 1px solid var(--linha);
  border-left: 3px solid transparent;
  border-radius: var(--raio);
  padding: 1rem 1.15rem;
  margin-bottom: 0.9rem;
}

.item-cotacao--confira { border-left-color: var(--dourado); }

.item-cotacao--piso { border-left-color: var(--erro); }

.item-cabeca {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.item-estado { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8125rem; font-weight: 600; }

.item-estado--sem_historico { color: var(--texto-suave); }

.item-estado--piso { color: var(--erro); }

.item-linha { font-size: 0.75rem; color: var(--texto-suave); }

.item-descricao { font-size: 0.9375rem; margin-bottom: 0.5rem; }

.item-dados { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 0.5rem; }

.item-dados dd { font-size: 0.875rem; }

.item-metodo { font-size: 0.8125rem; margin-bottom: 0.2rem; }

.item-evidencia { font-size: 0.8125rem; color: var(--texto-suave); }

.preco-sugerido { font-size: 0.8125rem; color: var(--texto-suave); margin-top: 0.6rem; }

/* ---- ação: editar preço (Task 9, R4) ---- */

.form-preco {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.85rem;
  margin-top: 0.6rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--linha);
}

.campo-preco { display: flex; flex-direction: column; gap: 0.25rem; }

.campo-preco label { font-size: 0.75rem; color: var(--texto-suave); }

.campo-preco input {
  font-family: var(--mono);
  font-size: 0.9375rem;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 0.4rem 0.6rem;
  width: 8rem;
}

.campo-preco input:focus-visible { border-color: var(--navy); }

.campo-override {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--texto-suave);
}

.botao-preco {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: #FFFFFF;
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: var(--raio);
  padding: 0.45rem 0.85rem;
  cursor: pointer;
}

.botao-preco:hover { background: var(--navy-escuro); border-color: var(--navy-escuro); }

/* ---- ações por item (Task 10): confirmar identificação (aprendizado),
   trocar peça (busca) e marcar não cotável ---- */

.acoes-item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--linha);
}

.acoes-item-botoes { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.form-inline { display: inline-flex; }

.botao-acao {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 0.4rem 0.7rem;
  cursor: pointer;
}

.botao-acao:hover { background: var(--painel); }

.botao-acao--confirmar {
  color: #FFFFFF;
  background: var(--navy);
  border-color: var(--navy);
}

.botao-acao--confirmar:hover { background: var(--navy-escuro); border-color: var(--navy-escuro); }

.botao-acao--perigo { color: var(--erro); border-color: var(--erro-linha); }

.botao-acao--perigo:hover { background: var(--erro-fundo); }

.form-buscar { display: flex; align-items: flex-end; gap: 0.6rem; flex-wrap: wrap; }

.campo-busca { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 16rem; }

.campo-busca label { font-size: 0.75rem; color: var(--texto-suave); }

.campo-busca input {
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 0.45rem 0.65rem;
  width: 100%;
}

.campo-busca input:focus-visible { border-color: var(--navy); }

.candidatos-peca { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; }

.candidato-peca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.65rem;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  font-size: 0.875rem;
}

.sem-candidato { font-size: 0.8125rem; color: var(--texto-suave); }

/* ---- rodapé: reprocessar (Task 13, esquerda) + aprovar/baixar (Task 12,
   direita) ---- */

.rodape-cotacao {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linha);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* .botao-primario já traz cor/fonte/raio (reusado, spec: nenhuma cor nova);
   aqui só troca a largura cheia (pensada pro cartão estreito do login) por
   largura de conteúdo — um botão do tamanho do texto, alinhado à direita. */
.botao-rodape { width: auto; margin-top: 0; padding: 0.65rem 1.25rem; }

/* ---- ícones (sprite em layout.ejs) ---- */

.sprite-oculto { position: absolute; width: 0; height: 0; overflow: hidden; }

.icone { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; }

/* ============================================================
   Config (Task 13) — .cartao-config já definido junto do login acima
   (mesma família visual). O form do fator reusa .form-buscar/.campo-preco/
   .botao-preco (já estilizados p/ o form de preço em detalhe.ejs) — só o
   que é realmente NOVO nesta tela ganha classe própria abaixo.
   ============================================================ */

.config-bloco {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--linha);
}

.config-bloco:first-of-type { margin-top: 1.5rem; padding-top: 0; border-top: none; }

.config-bloco h2 { font-size: 1.0625rem; margin-bottom: 0.5rem; }

.config-explicacao { font-size: 0.875rem; color: var(--texto-suave); margin-bottom: 0.85rem; }

.config-flags { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }

.config-flags li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.7rem;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  font-size: 0.875rem;
}

/* "liga no M3" — rótulo de estado, não um toggle (spec: flags só visíveis,
   desligadas; nada aqui é clicável). */
.config-flag-status {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 0.15rem 0.5rem;
}

.tabela-usuarios { width: 100%; border-collapse: collapse; font-size: 0.875rem; }

.tabela-usuarios th {
  text-align: left;
  font-size: 0.6875rem;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--linha);
}

.tabela-usuarios td { padding: 0.5rem; border-bottom: 1px solid var(--linha); }

/* Diferente de .voltar (fila/detalhe): NÃO some em telas largas — Config não
   tem a coluna da fila sempre visível ao lado (não usa .mestre-detalhe), é a
   única forma de voltar em qualquer largura de tela. */
.voltar-config { display: inline-block; font-size: 0.875rem; margin-top: 1.5rem; }