@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400&display=swap');

/* ---------- Identidade Unicap ----------
   Azul escuro  #191f6c   |  Azul claro  #56b3e4   |  Verde  #94c83d
   Tipografia: Rubik (Light/Regular/Medium/Bold/Black, com itálico)
   Grafismo: faixas diagonais inspiradas em banda de rodagem de pneu
------------------------------------------ */

:root {
  --bg: #0d1030;
  --surface: #151a45;
  --surface2: #1c2154;
  --border: #2c3277;
  --text: #eef1fa;
  --dim: #a7acd9;
  --azul-escuro: #191f6c;
  --azul-claro: #56b3e4;
  --verde: #94c83d;
  --red: #c1573f;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Rubik', system-ui, sans-serif; font-size: 14px; line-height: 1.5; font-variant-numeric: tabular-nums; }
a { color: inherit; }
code { background: var(--surface2); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
h1, h2, .marca-nome, .modelo-nome, .cartao-titulo { font-weight: 700; }

/* Faixa diagonal — grafismo de banda de rodagem, usado como assinatura sutil */
.faixa-grafismo {
  height: 4px;
  background: repeating-linear-gradient(115deg, var(--azul-claro) 0 10px, var(--verde) 10px 20px);
  opacity: .8;
}

/* Layout */
.app { display: flex; min-height: 100vh; }
.barra { width: 230px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); padding: 20px 16px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
/* Marca — versão negativa sobre fundo escuro, conforme o manual.
   A área de respiro segue a medida X do diagrama: margem lateral e
   inferior proporcionais à altura da marca. */
.marca { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.marca-logo { width: 100%; max-width: 186px; height: auto; display: block; }
.marca-logo.grande { max-width: 200px; margin: 0 auto 18px; }
.marca-nome { font-size: 13px; line-height: 1.2; color: var(--dim); font-weight: 500; letter-spacing: .3px; padding-top: 10px; border-top: 1px solid var(--border); width: 100%; }
nav { margin-top: 28px; display: flex; flex-direction: column; gap: 2px; }
.nav-item { padding: 9px 12px; color: var(--dim); text-decoration: none; border-left: 2px solid transparent; border-radius: 0 6px 6px 0; font-weight: 500; }
.nav-item:hover { color: var(--text); background: var(--surface2); }
.nav-item.ativo { color: var(--text); background: var(--surface2); border-left-color: var(--azul-claro); }
.barra-rodape { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--border); }
.usuario-nome { font-size: 13px; font-weight: 500; }
.usuario-papel { font-size: 11px; color: var(--dim); }
.link-sair { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--dim); }
.conteudo { flex: 1; padding: 30px 34px; overflow-x: auto; }

/* Cabeçalho */
.cabecalho { margin-bottom: 22px; }
.sobretitulo { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; color: var(--azul-claro); text-transform: uppercase; margin-bottom: 6px; }
.cabecalho h1 { font-size: 26px; margin: 0; font-weight: 700; }
.subtitulo { color: var(--dim); margin: 8px 0 0; max-width: 620px; }
.voltar { color: var(--dim); text-decoration: none; font-size: 13px; display: inline-block; margin-bottom: 10px; }

/* Avisos */
.aviso { border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; font-size: 13px; }
.aviso.alerta { border-color: var(--red); background: rgba(193,87,63,.12); }
.aviso.sucesso { border-color: var(--verde); background: rgba(148,200,61,.12); }
.alerta-texto { color: var(--red); margin-top: 4px; }
.dica { color: var(--dim); font-size: 12.5px; margin: 8px 0; }
.vazio { border: 1px dashed var(--border); border-radius: 10px; padding: 34px; text-align: center; color: var(--dim); }

/* Destaque de pendências */
.destaque { background: var(--surface); border: 1px solid var(--azul-claro); border-radius: 10px; padding: 14px 16px; margin-bottom: 18px; }
.destaque-titulo { font-size: 11px; font-weight: 700; color: var(--azul-claro); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; }
.lista-pendencias { display: flex; flex-direction: column; gap: 6px; }
.pendencia { display: flex; gap: 12px; align-items: center; padding: 8px 10px; background: var(--surface2); border-radius: 6px; text-decoration: none; font-size: 13px; }
.pendencia:hover { background: #232a63; }
.pendencia .valor { margin-left: auto; color: var(--azul-claro); font-weight: 500; }

/* Filtros */
.filtros { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.rotulo-filtro { font-size: 11px; font-weight: 700; color: var(--dim); text-transform: uppercase; }
.chip { border: 1px solid var(--border); border-radius: 20px; padding: 5px 13px; font-size: 12px; text-decoration: none; color: var(--dim); }
.chip.ativo { background: var(--azul-claro); color: #0d1030; font-weight: 600; border-color: var(--azul-claro); }

/* Painel kanban */
.painel { display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); gap: 9px; }
.coluna { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px; min-height: 120px; }
.coluna-cabecalho { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
.coluna-nome { font-size: 9.5px; font-weight: 700; text-transform: uppercase; color: var(--azul-claro); line-height: 1.2; }
.coluna-nome.aprovado, .coluna-nome.pedido_emitido { color: var(--verde); }
.coluna-nome.nota_lancada { color: var(--dim); }
.coluna-contador { font-size: 11px; color: var(--dim); }
.cartao-pedido { display: block; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 7px 8px; margin-bottom: 6px; text-decoration: none; }
.cartao-pedido:hover { border-color: var(--azul-claro); }
.linha-topo { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.numero { font-size: 10px; color: var(--dim); }
/* Descrição limitada a 2 linhas — evita cartão gigante por texto longo */
.cartao-titulo { font-size: 12.5px; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cartao-rodape { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.cartao-sigla { font-size: 9.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .3px; }
/* Tipo vira um ponto colorido em vez de etiqueta com texto */
.ponto-tipo { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--dim); }
.ponto-tipo.recorrente { background: #97a3ef; }
.ponto-tipo.eventual { background: var(--azul-claro); }
.ponto-tipo.urgente { background: var(--red); }
.cartao-meta { font-size: 11.5px; color: var(--dim); margin-top: 3px; }  /* usado nos modelos */
.cartao-valor { font-size: 12px; font-weight: 600; color: var(--azul-claro); }
.etiqueta { font-size: 9.5px; font-weight: 600; border-radius: 20px; padding: 2px 7px; border: 1px solid var(--dim); color: var(--dim); }
.etiqueta.recorrente { border-color: var(--azul-escuro); color: #97a3ef; }
.etiqueta.eventual { border-color: var(--azul-claro); color: var(--azul-claro); }
.etiqueta.urgente { border-color: var(--red); color: var(--red); }

/* Escada de alçadas */
.escada { display: flex; gap: 2px; align-items: flex-end; margin-left: auto; }
.degrau { width: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 2px; display: block; }
.escada.compacta .degrau { width: 5px; }
.degrau.aprovado { background: var(--verde); }
.degrau.reprovado { background: var(--red); }

/* Indicadores */
.indicadores { display: flex; gap: 28px; flex-wrap: wrap; margin: 14px 0; }
.ind-rotulo { display: block; font-size: 10.5px; font-weight: 700; color: var(--dim); text-transform: uppercase; }
.ind-valor { font-size: 17px; font-weight: 600; }
.ind-valor.pequeno { font-size: 13px; font-weight: 400; }
/* Valor ainda não definido: mesmo tamanho dos outros, mas apagado, para a
   linha de indicadores não ficar com alturas diferentes. */
.ind-pendente { font-size: 13px; font-weight: 400; color: var(--dim); font-style: italic; }

/* Seções */
.secao { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); }
.secao h2 { font-size: 11.5px; font-weight: 700; color: var(--azul-claro); text-transform: uppercase; letter-spacing: .6px; margin: 0 0 10px; }

/* Tabelas */
.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th { text-align: left; font-weight: 700; font-size: 10.5px; color: var(--dim); text-transform: uppercase; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.tabela td { padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.tabela tr.escolhida { background: rgba(148,200,61,.1); }
.tabela tr.estourado { background: rgba(193,87,63,.08); }
.tabela tr.atencao { background: rgba(86,179,228,.08); }
.mono { font-variant-numeric: tabular-nums; }
.mono.melhor { color: var(--verde); font-weight: 600; }
.ok { color: var(--verde); font-size: 12px; }
.pequeno { font-size: 11.5px; color: var(--dim); }
.barra-progresso { display: inline-block; width: 70px; height: 6px; background: var(--surface2); border-radius: 3px; overflow: hidden; vertical-align: middle; }
.barra-progresso span { display: block; height: 100%; background: var(--azul-claro); }

/* Quadro comparativo de cotações */
.ref-anterior { font-size: 10.5px; color: var(--dim); margin-top: 3px; line-height: 1.35; }
.ref-anterior .variacao { margin-left: 4px; }
.badge-difal { display: inline-block; margin-left: 6px; font-size: 9.5px; font-weight: 600; border: 1px solid var(--azul-claro); color: var(--azul-claro); border-radius: 10px; padding: 0 6px; }

/* Painel de análise do quadro */
.painel-analise { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.analise-item { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; flex-wrap: wrap; }
.analise-rotulo { font-size: 12px; color: var(--dim); }
.analise-valor { font-size: 14px; font-weight: 600; }
.analise-valor.destaque { color: var(--azul-claro); }
.analise-item.economia { border-top: 1px solid var(--border); padding-top: 8px; }
.analise-item.economia .analise-rotulo, .analise-item.economia .analise-valor { color: var(--verde); }
.analise-acao { margin-top: 4px; }

/* Cadastros — painel de edição e estados de linha */
.destaque-edicao { border: 1px solid var(--azul-claro); border-radius: 10px; padding: 16px; background: var(--surface); border-top: 1px solid var(--azul-claro); }
.linha-inativa { opacity: .45; }
.checkbox-linha { flex-direction: row; align-items: center; gap: 8px; text-transform: none; font-weight: 400; font-size: 13px; color: var(--text); }
.checkbox-linha input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--verde); }
.coluna-nome.aguardando_recebimento { color: var(--verde); }
.coluna-nome.suspenso { color: var(--dim); }

/* Barra de filtros do painel */
.barra-filtros { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.filtros-linha { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-top: 10px; }
.filtro-campo { font-size: 10.5px; gap: 4px; min-width: 130px; }
.filtro-campo select, .filtro-campo input { padding: 7px 9px; font-size: 13px; }
.filtro-campo.busca { min-width: 200px; flex: 1; }
.chip-radio { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 20px; padding: 5px 13px; font-size: 12px; color: var(--dim); cursor: pointer; text-transform: none; font-weight: 400; letter-spacing: 0; flex-direction: row; }
.chip-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip-radio.ativo { background: var(--azul-claro); color: #0d1030; font-weight: 600; border-color: var(--azul-claro); }
.chip-check { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 20px; padding: 7px 13px; font-size: 12.5px; color: var(--dim); cursor: pointer; text-transform: none; font-weight: 400; letter-spacing: 0; flex-direction: row; }
.chip-check.ativo { border-color: var(--verde); color: var(--verde); }
.chip-check input { width: 15px; height: 15px; accent-color: var(--verde); }
.resumo-filtro { font-size: 13px; color: var(--dim); margin-bottom: 16px; padding-left: 2px; }
.resumo-filtro b { color: var(--text); }

/* Ações do pedido (suspender / cancelar / excluir) */
.acoes-pedido { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.acoes-pedido .formulario { max-width: 320px; }
.acoes-pedido form { padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }


/* ---------- Quadro de concorrência ----------
   Cada fornecedor é uma coluna; cada célula é uma decisão de compra.
   A coluna do item fica fixa para não se perder na rolagem lateral. */

.rolagem-quadro { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.quadro { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }

/* Cabeçalho dos fornecedores */
.quadro thead th { position: sticky; top: 0; z-index: 3; background: var(--surface2); border-bottom: 1px solid var(--border); padding: 10px; text-align: left; vertical-align: bottom; }
.col-forn { min-width: 152px; border-left: 1px solid var(--border); }
.col-forn.tem-escolha { box-shadow: inset 0 3px 0 var(--verde); }
.forn-letra { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; background: var(--azul-claro); color: #0d1030; font-size: 10.5px; font-weight: 700; margin-bottom: 5px; }
.forn-nome { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.25; text-transform: none; letter-spacing: 0; }
.forn-uf { display: block; font-size: 10px; color: var(--dim); font-weight: 400; text-transform: none; letter-spacing: 0; margin-top: 2px; }
.forn-conta { display: inline-block; margin-top: 5px; font-size: 9.5px; font-weight: 600; color: var(--verde); text-transform: none; letter-spacing: 0; }

/* Coluna do item, fixa à esquerda */
.col-item { position: sticky; left: 0; z-index: 2; background: var(--surface); border-right: 1px solid var(--border); padding: 10px; text-align: left; font-weight: 400; min-width: 178px; max-width: 230px; vertical-align: top; }
.quadro thead .col-item { z-index: 4; background: var(--surface2); }
.cabecalho-canto { font-size: 10px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: .6px; }
.item-nome { display: block; font-size: 12.5px; font-weight: 500; color: var(--text); line-height: 1.3; }
.item-qtd { display: block; font-size: 10.5px; color: var(--dim); margin-top: 2px; }

/* Referência do mês anterior */
.ref-anterior { display: block; font-size: 10px; color: var(--dim); margin-top: 5px; padding-top: 4px; border-top: 1px dashed var(--border); }
.ref-anterior .variacao { margin-left: 3px; font-weight: 600; }

/* Célula de cada fornecedor */
.cel-forn { border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 8px; vertical-align: top; }
.quadro tbody tr:hover .cel-forn { background: rgba(86,179,228,.03); }
.cel-forn.melhor { background: rgba(148,200,61,.06); }
.cel-forn.escolhido { background: rgba(148,200,61,.14); box-shadow: inset 3px 0 0 var(--verde); }

.cel-entrada { display: flex; align-items: center; gap: 4px; background: var(--surface2); border: 1px solid var(--border); border-radius: 5px; padding: 0 7px; }
.cel-entrada:focus-within { border-color: var(--azul-claro); }
.cel-cifrao { font-size: 10.5px; color: var(--dim); flex-shrink: 0; }
.campo-preco { width: 100%; min-width: 0; background: transparent; border: none; padding: 6px 0; font-size: 13px; font-weight: 500; }
.campo-preco:focus { outline: none; }

.cel-calc { margin-top: 5px; font-size: 10.5px; color: var(--dim); line-height: 1.4; }
.cel-calc.vazia { color: #5a6291; font-style: italic; }
.linha-difal { display: block; color: var(--azul-claro); }
.cel-total { font-size: 13px; font-weight: 700; color: var(--text); display: inline-block; }
.cel-unit { display: block; font-size: 10px; color: var(--dim); }
.selo-melhor { display: inline-block; margin-left: 5px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--verde); border: 1px solid var(--verde); border-radius: 8px; padding: 0 5px; vertical-align: middle; }
.selo-comprado { display: block; margin-top: 3px; font-size: 9.5px; font-weight: 700; color: var(--verde); }

/* Botão de escolher: a célula inteira vira a decisão */
.cel-escolher { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 7px; padding: 5px; border: 1px solid var(--border); border-radius: 5px; font-size: 10.5px; font-weight: 600; color: var(--dim); cursor: pointer; text-transform: none; letter-spacing: 0; flex-direction: row; user-select: none; }
.cel-escolher:hover { border-color: var(--verde); color: var(--verde); }
.cel-escolher input { position: absolute; opacity: 0; width: 0; height: 0; }
.cel-escolher.ativo { background: var(--verde); border-color: var(--verde); color: #0d1030; }
.cel-escolher input:focus-visible + span { outline: 2px solid var(--azul-claro); outline-offset: 3px; border-radius: 3px; }
.cel-escolher:has(input:disabled) { opacity: .35; cursor: not-allowed; }

/* Linha de totais */
.linha-total .col-item, .linha-total .cel-forn { border-top: 2px solid var(--border); background: var(--surface2); }
.linha-total .cel-forn { text-align: left; }
.total-forn { font-size: 14px; font-weight: 700; color: var(--text); }
.total-forn.parcial { color: var(--dim); }
.aviso-parcial { display: block; font-size: 9.5px; color: var(--dim); margin-top: 2px; }

.acoes-quadro { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.acoes-quadro .dica { margin: 0; }

@media (max-width: 700px) {
  .col-item { min-width: 140px; }
  .col-forn { min-width: 132px; }
}


/* Trilha de aprovação — página do pedido */
.trilha { list-style: none; display: flex; gap: 0; padding: 0; margin: 16px 0 0; flex-wrap: wrap; }
.passo { display: flex; align-items: center; gap: 7px; padding: 8px 16px 8px 13px; background: var(--surface); border: 1px solid var(--border); border-right: none; }
.passo:first-child { border-radius: 8px 0 0 8px; }
.passo:last-child { border-right: 1px solid var(--border); border-radius: 0 8px 8px 0; }
.passo-marca { font-size: 12px; color: var(--dim); line-height: 1; }
.passo-nome { font-size: 12.5px; font-weight: 600; color: var(--text); }
.passo-estado { font-size: 10.5px; color: var(--dim); }
.passo.aprovado { background: rgba(148,200,61,.1); border-color: rgba(148,200,61,.3); }
.passo.aprovado .passo-marca, .passo.aprovado .passo-estado { color: var(--verde); }
.passo.reprovado { background: rgba(193,87,63,.1); border-color: rgba(193,87,63,.35); }
.passo.reprovado .passo-marca, .passo.reprovado .passo-estado { color: var(--red); }
.passo.atual { background: var(--surface2); border-color: var(--azul-claro); }
.passo.atual .passo-marca, .passo.atual .passo-estado { color: var(--azul-claro); }
@media (max-width: 560px) {
  .trilha { flex-direction: column; }
  .passo, .passo:first-child, .passo:last-child { border-radius: 0; border-right: 1px solid var(--border); border-bottom: none; }
  .passo:first-child { border-radius: 8px 8px 0 0; }
  .passo:last-child { border-radius: 0 0 8px 8px; border-bottom: 1px solid var(--border); }
}


/* ---------- Entregas e notas fiscais ----------
   Uma entrega por fornecedor. A faixa colorida à esquerda diz o estado:
   cinza aguardando, azul recebida (falta lançar), verde concluída. */
.lista-entregas { display: flex; flex-direction: column; gap: 10px; }
.entrega { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 8px; padding: 13px 15px; }
.entrega.recebida { border-left-color: var(--azul-claro); }
.entrega.lancada { border-left-color: var(--verde); }
.entrega-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.entrega-forn { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.entrega-meta { display: block; font-size: 11px; color: var(--dim); margin-top: 2px; }
.entrega-direita { text-align: right; }
.entrega-valor { display: block; font-size: 15px; font-weight: 700; color: var(--text); }
.entrega-estado { display: block; font-size: 10.5px; font-weight: 600; color: var(--dim); margin-top: 2px; }
.entrega.recebida .entrega-estado { color: var(--azul-claro); }
.entrega.lancada .entrega-estado { color: var(--verde); }
.entrega-nf { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nf-rotulo { font-size: 9.5px; font-weight: 700; letter-spacing: .5px; color: #0d1030; background: var(--azul-claro); border-radius: 3px; padding: 2px 6px; }
.nf-numero { font-size: 14px; font-weight: 700; color: var(--text); }
.entrega-nf .entrega-meta { margin: 0; }
.entrega-obs { width: 100%; font-size: 11.5px; color: var(--red); margin-top: 4px; }
.entrega-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--border); }
.entrega-form label { font-size: 10.5px; gap: 4px; }
.entrega-form input { padding: 7px 9px; font-size: 13px; min-width: 170px; }
.entrega form { margin-top: 10px; }
.resumo-fiscal { margin-top: 12px; }
.resumo-fiscal summary { font-size: 12px; color: var(--dim); cursor: pointer; padding: 6px 0; }
.resumo-fiscal summary:hover { color: var(--azul-claro); }


.destaque-dica { background: rgba(86,179,228,.08); border: 1px solid rgba(86,179,228,.3); border-radius: 8px; padding: 10px 13px; margin: 0 0 18px; color: var(--text); font-size: 12.5px; }
.destaque-dica a { color: var(--azul-claro); font-weight: 600; }

/* Tabela de meses do orçamento */
.formulario.larga { max-width: 620px; }
.tabela-meses th { text-align: left; }
.tabela-meses td { padding: 5px 8px; }
.tabela-meses input { width: 100%; min-width: 120px; padding: 6px 9px; font-size: 13px; }
.tabela-meses tfoot th, .tabela-meses tfoot td { border-top: 2px solid var(--border); padding-top: 10px; }
.mes-nome { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.mes-nome .pequeno { display: block; font-weight: 400; font-size: 9.5px; }
.mes-passado { background: rgba(86,179,228,.04); }

/* Painel de fornecedores da cotação */
.painel-fornecedores { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 13px 15px; margin-bottom: 14px; }
.contagem-fornecedores { font-size: 12.5px; color: var(--text); font-weight: 500; }
.falta-cotacao { color: var(--azul-claro); font-weight: 600; }
.painel-fornecedores .linha-formulario { margin-top: 8px; }
.painel-fornecedores select[name=fornecedor_id] { max-width: 260px; min-width: 220px; }
.novo-fornecedor { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.novo-fornecedor summary { font-size: 12.5px; color: var(--azul-claro); cursor: pointer; padding: 3px 0; font-weight: 500; }
.novo-fornecedor summary:hover { text-decoration: underline; }
.novo-fornecedor input { max-width: 150px; }

/* Botão de tirar fornecedor do quadro */
.remover-forn { display: block; margin-top: 6px; background: transparent; border: 1px solid var(--border); color: var(--dim); border-radius: 4px; padding: 2px 7px; font-size: 9.5px; cursor: pointer; font-family: 'Rubik', sans-serif; text-transform: none; letter-spacing: 0; font-weight: 400; }
.remover-forn:hover { border-color: var(--red); color: var(--red); }

/* Botão de coluna: marca o fornecedor em tudo o que ele cotou. */
.btn-coluna { display: block; margin-top: 6px; background: transparent; border: 1px solid var(--border); color: var(--dim); border-radius: 4px; padding: 2px 7px; font-size: 9.5px; cursor: pointer; font-family: 'Rubik', sans-serif; text-transform: none; letter-spacing: 0; font-weight: 400; }
.btn-coluna:hover { border-color: var(--azul-claro); color: var(--azul-claro); }

/* Aviso do salvamento automático, dentro da própria célula. Ocupa lugar fixo
   para o quadro não pular de altura a cada gravação. */
.cel-estado { min-width: 46px; font-size: 9px; text-align: right; color: var(--dim); white-space: nowrap; }
.cel-estado.indo { color: var(--dim); }
.cel-estado.ok { color: var(--verde); }
.cel-estado.erro { color: var(--red); font-weight: 600; }

/* Fornecedores indicados pelo solicitante, antes de virarem coluna do quadro. */
.lista-sugeridos { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.lista-sugeridos li { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 7px 11px; font-size: 13px; }

/* Modelo fora do ciclo: o motivo primeiro, o escape depois. */
.fora-do-ciclo { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.fora-do-ciclo .pequeno { color: var(--dim); line-height: 1.35; }

.resumo-cobertura { background: rgba(148,200,61,.08); border: 1px solid rgba(148,200,61,.3); border-radius: 8px; padding: 9px 13px; font-size: 12.5px; color: var(--text); margin-bottom: 12px; }

/* Busca de produto com sugestões */
.form-produto { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 10px; }
.campo-busca-produto { position: relative; flex: 1; min-width: 280px; }
.rotulo-busca { font-size: 10.5px; gap: 4px; }
.rotulo-busca.curto { width: 96px; flex: 0 0 auto; }
.entrada-produto { width: 100%; padding: 8px 10px; font-size: 13.5px; }
.sugestoes { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; margin-top: 3px; background: var(--surface2); border: 1px solid var(--azul-claro); border-radius: 7px; box-shadow: 0 10px 30px rgba(0,0,0,.55); overflow: hidden; }
/* A lista rola por dentro, com altura limitada pela tela — antes ela era
   cortada e não dava para ver os últimos resultados. */
.sugestoes-rolagem { max-height: min(52vh, 380px); overflow-y: auto; overscroll-behavior: contain; }
.sugestoes-rodape { border-top: 1px solid var(--border); background: var(--surface); }
.sugestoes-contagem { padding: 6px 11px; font-size: 10.5px; color: var(--dim); border-bottom: 1px solid var(--border); background: var(--surface); }
.sugestoes-rolagem::-webkit-scrollbar { width: 9px; }
.sugestoes-rolagem::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
.sugestoes-rolagem::-webkit-scrollbar-thumb:hover { background: var(--azul-claro); }
.sugestao { display: flex; gap: 9px; align-items: baseline; width: 100%; text-align: left; background: transparent; border: none; border-bottom: 1px solid var(--border); padding: 8px 11px; cursor: pointer; color: var(--text); font-family: 'Rubik', sans-serif; font-size: 12.5px; }
.sugestao:last-child { border-bottom: none; }
.sugestao:hover, .sugestao:focus { background: rgba(86,179,228,.16); outline: none; }
.sug-cod { color: var(--azul-claro); font-weight: 600; min-width: 46px; flex-shrink: 0; }
.sug-desc { flex: 1; }
.sug-un { color: var(--dim); font-size: 10.5px; flex-shrink: 0; }
.sugestao.fora-catalogo { color: var(--verde); background: rgba(148,200,61,.06); }
.produto-escolhido { margin-top: 6px; font-size: 12px; color: var(--text); background: rgba(148,200,61,.1); border: 1px solid rgba(148,200,61,.3); border-radius: 6px; padding: 6px 10px; }
.un-produto { color: var(--dim); font-size: 10.5px; }
.marca-avulso { display: inline-block; font-size: 9px; font-weight: 700; color: var(--verde); border: 1px solid var(--verde); border-radius: 8px; padding: 0 5px; margin-left: 5px; text-transform: uppercase; }

.rodape-lista { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.paginacao { display: flex; gap: 6px; }

.grade-empresas { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

.area-orcamento { margin-top: 22px; }
.area-topo { display: flex; align-items: baseline; gap: 12px; padding-bottom: 7px; border-bottom: 2px solid var(--azul-claro); margin-bottom: 12px; }
.area-topo h2 { font-size: 15px; font-weight: 700; color: var(--text); margin: 0; text-transform: none; letter-spacing: 0; }
.area-contagem { font-size: 11px; color: var(--dim); }
.area-total { font-size: 14px; font-weight: 700; color: var(--azul-claro); margin-left: auto; }
.grupo-orcamento { margin-bottom: 16px; }
.grupo-titulo { font-size: 11px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 5px; }
.acoes-linha { display: flex; gap: 5px; white-space: nowrap; }

/* Abas entre as telas de cadastro */
.abas { display: flex; gap: 2px; margin-bottom: 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.aba { padding: 9px 16px; font-size: 13px; color: var(--dim); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.aba:hover { color: var(--text); }
.aba.ativa { color: var(--azul-claro); border-bottom-color: var(--azul-claro); font-weight: 600; }

/* Caixa do grupo orçamentário */
.caixa-grupo { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 15px 17px; margin-bottom: 18px; }
.grupo-nome { display: block; font-size: 17px; font-weight: 700; color: var(--text); margin-top: 2px; }
.grupo-nota { display: block; font-size: 11.5px; color: var(--dim); margin-top: 4px; max-width: 460px; }
.grupo-totais { display: flex; gap: 26px; flex-wrap: wrap; }
.grupo-totais .ind-valor { font-size: 16px; }
.ind-valor.negativo { color: var(--red); }
.marca-sem-orcamento { color: var(--dim); font-style: italic; }

/* Formulários */
.formulario { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.formulario.compacto { max-width: 480px; margin-top: 10px; }
.linha-campos { display: flex; gap: 12px; flex-wrap: wrap; }
.linha-campos label { flex: 1; min-width: 150px; }
label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: .3px; }
input, select, textarea { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 9px 10px; color: var(--text); font-family: 'Rubik', sans-serif; font-size: 13.5px; text-transform: none; font-weight: 400; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 2px; }
textarea { resize: vertical; }
.campo-mini { width: 90px; padding: 5px 8px; }
.linha-formulario { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.linha-formulario input, .linha-formulario select { max-width: 180px; }
.inline { display: inline; }
.btn { background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: 7px; padding: 9px 15px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: 'Rubik', sans-serif; text-decoration: none; display: inline-block; }
.btn:hover { border-color: var(--azul-claro); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.principal { background: var(--azul-claro); color: #0d1030; border-color: var(--azul-claro); font-weight: 700; }
.btn.principal:hover { background: #6bc0ea; }
.btn.pequeno { padding: 5px 10px; font-size: 12px; }
.btn.aprovar { background: var(--verde); color: #0d1030; border-color: var(--verde); font-weight: 700; }
.btn.reprovar { background: transparent; color: var(--red); border-color: var(--red); font-weight: 700; }
.botoes { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }

/* Grade de meses (orçamento) */
.grade-meses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.grade-meses label { text-transform: none; }

/* Modelos */
.grade-modelos { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; margin-top: 16px; }
.cartao-modelo { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 15px; }
.modelo-nome { font-size: 16px; }
.modelo-historico { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.destaque-valor { color: var(--azul-claro); font-size: 15px; font-weight: 600; }
.variacao { font-size: 11.5px; font-weight: 600; }
.variacao.sobe { color: var(--red); }
.variacao.desce { color: var(--verde); }
.fichas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.ficha { display: inline-flex; align-items: center; gap: 4px; background: var(--surface2); border: 1px solid var(--border); border-radius: 20px; padding: 4px 6px 4px 12px; font-size: 12.5px; }
.ficha-x { background: none; border: none; color: var(--dim); cursor: pointer; font-size: 15px; padding: 0 4px; }

/* Rota visual */
.rota-visual { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; max-width: 460px; }
.rota-nivel { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; }
.rota-num { color: var(--azul-claro); font-weight: 700; font-size: 12px; }

/* Outros */
.caixa-saldo { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 13px; font-size: 13px; color: var(--dim); }
.caixa-saldo.estourado { border-color: var(--red); }
.caixa-saldo b { color: var(--text); }
.resumo { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 13px; font-size: 12px; white-space: pre-wrap; color: var(--dim); overflow-x: auto; }
.historico { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }
.historico li { font-size: 12px; color: var(--dim); }
.lista-simples { padding-left: 18px; color: var(--dim); font-size: 13px; }

/* Tela de login */
.tela-simples { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; background: var(--bg); }
.cartao-login, .cartao-simples { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 32px; width: 100%; max-width: 380px; text-align: center; position: relative; overflow: hidden; }
.cartao-login::before, .cartao-simples::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: repeating-linear-gradient(115deg, var(--azul-claro) 0 10px, var(--verde) 10px 20px);
}
.cartao-login h1 { font-size: 19px; margin: 0 0 8px; font-weight: 500; color: var(--dim); }
.cartao-login form { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; text-align: left; }

/* Responsivo */
@media (max-width: 900px) {
  .app { flex-direction: column; }
  .barra { width: 100%; height: auto; position: static; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 12px 14px; }
  .marca { flex-direction: row; align-items: center; gap: 10px; width: auto; flex: 1; }
  .marca-logo { max-width: 108px; }
  .marca-nome { display: none; }
  nav { width: 100%; order: 3; gap: 4px; }
  .nav-item { padding: 6px 10px; font-size: 13px; }
  .barra-rodape { margin: 0 0 0 auto; padding: 0; border: none; text-align: right; }
  .usuario-nome { font-size: 12px; }
  .usuario-papel { font-size: 10px; }
  .link-sair { margin-top: 2px; }
  nav { margin-top: 0; flex-direction: row; flex-wrap: wrap; }
  .nav-item { border-left: none; border-bottom: 2px solid transparent; border-radius: 6px; }
  .nav-item.ativo { border-left: none; border-bottom-color: var(--azul-claro); }
  .barra-rodape { margin-top: 0; margin-left: auto; padding-top: 0; border-top: none; }
  .conteudo { padding: 20px 16px; }
  .painel { grid-template-columns: 1fr; }
  .coluna { min-height: auto; }
  .grade-meses { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Condição de pagamento e prazo, no cabeçalho de cada fornecedor do quadro.
   Ficam abaixo da UF, em corpo menor: influenciam a decisão de compra, mas
   não competem com o nome e o preço. */
.forn-condicoes {
  display: block;
  margin-top: 2px;
  opacity: .75;
  font-weight: 400;
  line-height: 1.3;
}

/* Agrupamento de opções num formulário (ex: movimenta estoque). */
.campo-grupo {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px 12px;
  margin: 0;
}
.campo-grupo legend {
  padding: 0 6px;
  color: var(--text);
  font-weight: 600;
  font-size: .92rem;
}
.campo-grupo .dica { margin: 2px 0 8px; }

/* Condições editáveis no cabeçalho do fornecedor, enquanto o quadro está
   aberto. Campos estreitos: são complemento, não protagonistas da coluna. */
.forn-condicoes-edit {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
}
.forn-condicoes-edit input {
  width: 100%;
  padding: 3px 6px;
  font-size: .72rem;
  font-weight: 400;
}
.forn-condicoes .sem-condicao,
.sem-condicao { font-style: italic; opacity: .6; }

/* Devolver ao comprador: separado dos botões de decisão por uma linha, para
   não parecer um terceiro voto ao lado de Aprovar e Reprovar. É outra ação. */
.formulario.devolver {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* Fila do setor de compras -------------------------------------------------
   Números grandes em cima, lista embaixo. Sem gráfico: a pergunta aqui é
   "o que está parado e há quanto tempo", e isso se lê melhor em texto. */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 16px; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.tile.alerta { border-color: var(--red); }
.tile-rotulo { font-size: 10.5px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: .6px; }
.tile-numero { font-size: 30px; font-weight: 700; line-height: 1.05; margin-top: 6px; font-variant-numeric: tabular-nums; }
.tile-numero.parado { color: var(--red); }
.tile-nota { font-size: 11.5px; color: var(--dim); margin-top: 5px; }
.tile-acao { font-size: 11px; color: var(--dim); margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--border); }
.dias-parado { font-weight: 600; }
.dias-parado.alerta { color: var(--red); }