/* ═════════════════════════ cotações do item do pedido ═════════════════════════

   Uma cotação por linha (CEO, 18/10/2026). Antes os doze campos das três
   cotações corriam na mesma grade de unidade e quantidade e quebravam onde a
   largura mandasse. No computador: tabela, com o título de cada coluna uma vez
   no cabeçalho. Em espaço estreito: cada cotação vira um cartão e o rótulo de
   cada campo volta. O corte é pela largura do BLOCO (`@container`), não da
   janela: o pedido abre dentro do painel da obra, que é mais estreito que ela.
   Só tokens — o tema claro redefine as cores sem regra própria aqui. Nada
   inline: a CSP `style-src 'self'` bloqueia em silêncio. */

/* O item inteiro: espaço entre as faixas, e campo que não estica — sem o
   `align-content` a "Unidade" crescia até a altura da "Quantidade", que tem dica
   embaixo, e a "Origem" até a do "Item do catálogo". */
.pedido-item { display: grid; gap: 12px; }
.pedido-item .campo { align-content: start; }
.pedido-item > .pedido-item-remover { justify-self: start; margin-top: 0; }

.pedido-cotacoes {
  container-type: inline-size;
  display: grid; gap: 8px;
  margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--borda-2);
}
.pedido-cotacoes-titulo { margin: 0; font-weight: 640; letter-spacing: -.01em; }

.pedido-cotacao {
  display: grid; align-items: start; gap: 10px;
  grid-template-columns: 96px minmax(180px, 2.2fr) minmax(104px, 1fr) minmax(84px, .7fr) minmax(148px, 1fr);
}
.pedido-cotacoes-cabeca { align-items: end; margin-top: 4px; }
.pedido-cotacao .campo { min-width: 0; }
.pedido-cotacao-nome { padding-top: 9px; font-weight: 600; font-size: 13.5px; }
.pedido-cotacao-nome .dica { display: block; font-weight: 400; font-size: 11.5px; }

/* No computador o título da coluna faz as vezes do rótulo; ele continua no DOM
   para o leitor de tela. */
.pedido-cotacao .campo > .rotulo {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* A 2ª e a 3ª sem fornecedor não vão no pedido: a linha apaga, menos a escolha
   do fornecedor, que é por onde ela volta. */
.pedido-cotacao.vazia .campo + .campo { opacity: .45; }

.pedido-cotacoes .pedido-item-estimativa { margin-top: 2px; }

@container (max-width: 680px) {
  .pedido-cotacoes-cabeca { display: none; }
  .pedido-cotacao {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding-top: 10px; border-top: 1px solid var(--borda);
  }
  .pedido-cotacao-nome { padding-top: 0; }
  .pedido-cotacao-nome .dica { display: inline; margin-left: 6px; }
  .pedido-cotacao-nome, .pedido-cotacao > div:first-of-type, .pedido-cotacao > div:last-of-type { grid-column: 1 / -1; }
  .pedido-cotacao .campo > .rotulo {
    position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal;
  }
}

/* O pedido como documento (E2, 0075): uma folha que imprime sozinha. */
.documento-pedido { background: var(--fundo, #fff); border: 1px solid var(--linha, #d8d6cf); border-radius: 6px;
  padding: 24px; margin: 12px 0; max-width: 210mm; }
.documento-cabeca { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-bottom: 2px solid currentColor; padding-bottom: 12px; margin-bottom: 12px; }
.documento-cabeca > div { display: flex; flex-direction: column; gap: 2px; }
.documento-numero { text-align: right; }
.documento-numero strong { font-size: 1.4em; }
.documento-partes { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0 0 12px; }
.documento-partes dt { font-weight: 600; }
.documento-partes dd { margin: 0; }
.documento-linhas { width: 100%; border-collapse: collapse; margin: 8px 0; }
.documento-linhas th, .documento-linhas td { border-bottom: 1px solid var(--linha, #d8d6cf); padding: 4px 6px; }
.documento-total { display: flex; justify-content: flex-end; gap: 16px; font-size: 1.1em; }
.documento-rodape { margin-top: 24px; font-size: .85em; }
.documento-cancelado { border: 2px solid var(--vermelho, #A62B22); color: var(--vermelho, #A62B22);
  font-weight: 700; text-align: center; padding: 8px; margin: 0 0 12px; letter-spacing: .04em; }
.documento-envios { margin: 12px 0; }
@media (max-width: 600px) {
  .documento-pedido { padding: 12px; }
  .documento-numero { text-align: left; }
  .documento-linhas { font-size: .85em; }
}
@media print {
  @page { size: A4; margin: 15mm; }
  body.imprimindo-pedido * { visibility: hidden; }
  body.imprimindo-pedido .documento-pedido, body.imprimindo-pedido .documento-pedido * { visibility: visible; }
  body.imprimindo-pedido .documento-pedido { position: absolute; left: 0; top: 0; width: 100%; max-width: none;
    border: 0; padding: 0; margin: 0; background: #fff; color: #000; }
}