/* ===========================================================================
   ERP · De Nadai & Marinho Construtora
   Cotações e fornecedores.

   O centro desta folha é a matriz de comparação: fornecedor nas colunas,
   material nas linhas. Ela é larga por natureza — cinco fornecedores viram
   sete colunas — então rola na horizontal dentro do próprio cartão, com as
   duas primeiras colunas fixas para o nome do material não sumir.
   =========================================================================== */

/* ── Matriz de comparação ────────────────────────────────────────────────── */

.matriz-caixa { overflow-x: auto; }

.matriz-cotacao { min-width: 560px; }

.matriz-cotacao th,
.matriz-cotacao td {
  text-align: right;
  white-space: nowrap;
  vertical-align: middle;
}

/* Material e quantidade ancoram a leitura: ficam à esquerda e não rolam. */
.matriz-cotacao th:first-child,
.matriz-cotacao td:first-child {
  text-align: left;
  white-space: normal;
  min-width: 168px;
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--cartao);
}
.matriz-cotacao th:nth-child(2),
.matriz-cotacao td:nth-child(2) { text-align: left; }

.matriz-cotacao thead th {
  vertical-align: bottom;
  padding-top: 12px;
  padding-bottom: 10px;
}

.col-fornecedor {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--texto);
  white-space: normal;
  max-width: 150px;
  margin-left: auto;
}
.col-origem { display: block; margin: 4px 0 3px; }
.col-prazo { display: block; font-size: var(--t-xs); font-weight: 400; color: var(--texto-3); }

/**
 * A coluna recomendada. O fundo verde é o único destaque forte da tabela —
 * ele responde "qual eu escolho?" antes de qualquer leitura de número.
 */
.matriz-cotacao [data-destaque] { background: var(--verde-suave); }
.matriz-cotacao thead [data-destaque] { box-shadow: inset 0 3px 0 var(--verde); }

.preco-unit { display: block; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.preco-total { display: block; font-size: var(--t-xs); color: var(--texto-3); font-variant-numeric: tabular-nums; }

/* O menor preço de cada linha: a leitura horizontal, material a material. */
.matriz-cotacao [data-menor] .preco-unit { font-weight: 600; color: var(--verde-escuro); }

.sem-item {
  font-size: var(--t-sm);
  color: var(--texto-3);
  font-style: italic;
}

.matriz-cotacao tfoot td {
  border-top: 1px solid var(--linha-forte);
  padding-top: 10px;
  padding-bottom: 10px;
}
.matriz-cotacao tfoot .linha-frete td { border-top: 1px solid var(--linha); font-size: var(--t-sm); color: var(--texto-2); }
.matriz-cotacao tfoot .linha-total td { font-size: var(--t-md); font-variant-numeric: tabular-nums; }
.matriz-cotacao tfoot .linha-total strong { font-weight: 600; }
.matriz-cotacao tfoot .linha-acao td { border-top: none; padding-top: 4px; }
.matriz-cotacao tfoot .linha-acao .btn { width: 100%; justify-content: center; }

.aviso-incompleto {
  display: block;
  margin-top: 2px;
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--ambar);
}

/* ── Fornecedores ────────────────────────────────────────────────────────── */

.lista-fornecedores { display: flex; flex-direction: column; }

.grupo-fornecedor {
  padding: 14px 2px 6px;
  font-size: var(--t-xs);
  color: var(--texto-3);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.grupo-fornecedor:first-child { padding-top: 0; }

.fornecedor-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  text-align: left;
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  background: var(--cartao);
  margin-bottom: 6px;
  transition: var(--transicao);
}
.fornecedor-linha:hover { border-color: var(--verde); background: var(--verde-suave); }
.fornecedor-linha[data-inativo] { opacity: .55; }

.fornecedor-corpo { flex: 1; min-width: 0; }
.fornecedor-nome { display: block; font-size: var(--t-md); font-weight: 500; color: var(--texto); }
.fornecedor-sub {
  display: block;
  font-size: var(--t-sm);
  color: var(--texto-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Caixa de marcação ───────────────────────────────────────────────────── */

.campo-check {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  background: var(--cartao-2);
  font-size: var(--t-md);
  cursor: pointer;
}
.campo-check input { width: 16px; height: 16px; accent-color: var(--verde); cursor: pointer; }

/* ── Celular ─────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  /* No celular a matriz continua sendo matriz — ela é o valor da tela. O que
     muda é a densidade: coluna mais estreita e o nome do material fixo. */
  .matriz-cotacao { min-width: 480px; font-size: var(--t-sm); }
  .matriz-cotacao th:first-child,
  .matriz-cotacao td:first-child { min-width: 130px; }
  .col-fornecedor { max-width: 110px; font-size: var(--t-sm); }
  .matriz-caixa::after {
    content: 'arraste para ver os outros fornecedores →';
    display: block;
    padding: 6px 12px 10px;
    font-size: var(--t-xs);
    color: var(--texto-3);
  }
}

/* ── Colar preços de uma página do fornecedor ────────────────────────────── */

/*
 * O bloco vem fechado: é atalho para quem cota por site, e a maioria das
 * cotações desta construtora ainda chega por telefone e balcão. Aberto por
 * padrão, seria ruído permanente para o caso mais comum.
 */
.colar-site {
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  padding: 10px 12px;
  background: var(--cartao-2);
}

.colar-site summary {
  cursor: pointer;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--texto-2);
}
.colar-site summary::marker { color: var(--texto-3); }

.colar-site .ajuda { margin: 9px 0; line-height: 1.5; }

.colar-site textarea {
  width: 100%;
  font: inherit;
  font-size: var(--t-sm);
  resize: vertical;
  padding: 8px 10px;
  border: 1px solid var(--linha);
  border-radius: var(--r-sm);
  background: var(--cartao);
  color: inherit;
}

.chips-preco { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 9px; }
.chips-preco .sub { width: 100%; margin-bottom: 2px; }

.chip-preco {
  font: inherit;
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  padding: 4px 11px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-pill);
  background: var(--cartao);
  color: inherit;
  cursor: pointer;
  transition: var(--transicao);
}
.chip-preco:hover { border-color: var(--navy); }
.chip-preco[data-ativo='1'] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* O campo que espera o valor escolhido pisca — senão o segundo clique é
   invisível e a pessoa acha que o sistema engoliu o número. */
.entrega-qtd[data-alvo='1'] {
  border-color: var(--navy);
  box-shadow: var(--anel-navy);
}