/* Guti · produção — o que é só da COMPRA e da ENTRADA PELO DOCUMENTO (pedidos, um pedido, o que está para acabar, a nota do fornecedor, o de-para). Regras comuns ficam em ../producao.css; aqui entra o específico destas telas. Prefixo para classes novas: .compra- Escrito pela ÁREA A no ciclo 2. Antes de escrever uma regra aqui, veja se o componente já existe no sistema (docs/design/10-sistema.md §5): .bloco, .pauta, .linha-unica, .com-sufixo, .campo-arquivo, .tabela.lista, .pe-caixa. Estado novo NÃO se inventa em CSS de área: pede-se ao sistema (§4). Nenhuma cor nova entra aqui: as cinco naturezas, o verde da marca, o vermelho do negativo e o âmbar do contexto continuam sendo o vocabulário inteiro. O que estas cinco regras fazem é ARRUMAR ESPAÇO — e uma delas (a coluna «a conta») usa a SUPERFÍCIE, como a pauta do /fabrica/, porque no papel a superfície vira um fio e a hierarquia sobrevive em preto e branco. */ /* --- 1. A grade de blocos de /compra/sugestao/ ----------------------------- A tela é uma lista de varredura ("o que está para acabar"), não um texto: cada insumo é um .bloco e cabem dois ou três lado a lado num monitor. Não é .colunas porque o número de insumos varia e uma coluna vazia é pior do que duas cheias; auto-fill resolve sozinho, e no telefone vira um por linha sem media query nenhuma. `align-items: start` mantém cada bloco na sua altura natural. */ /* o `min(24rem, 100%)` é o que impede a tela de vazar no telefone: sem ele a pista mínima é 384 px e a página fica 396 px de largura dentro de 360 — medido. */ /* a grade `.compra-blocos` saiu em 2026-09-08: nenhum template a usava, e o ritmo antes/depois de uma grade passou a ser do sistema (producao.css, ao lado de `.colunas + .caixa`). */ /* A tabela «o que falta / o que destrava» é a única do produto cujas DUAS células são prosa, não número. Na tabela-lista do telefone o valor vai alinhado à direita — o que é certo para um número e errado para uma frase de duas linhas. Aqui o rótulo sobe para a linha de cima e a frase fica à esquerda; o componente do sistema continua o mesmo, muda só o alinhamento. */ @media screen and (max-width: 700px) { .compra-motivos.lista tbody td[data-rotulo] { text-align: left; } .compra-motivos.lista tbody td[data-rotulo]::before { float: none; display: block; max-width: none; margin: 0 0 2px; } } /* (`.kv .sub` subiu para producao.css: era regra de SISTEMA — `.sub` num container do sistema, sem prefixo de área — escrita no arquivo de uma área, que é o que o mandato 1 proíbe.) */ /* A grade de /compra/: a LISTA precisa de mais largura que o formulário. Com a coluna `previsto` (crítica 1, achado 6) a tabela media 548 px dentro de 526 e o chip de estado ficava cortado — rolava, mas rolar para ver o estado de um pedido não é leitura. 3fr/2fr resolve sem tocar em `.colunas`, que serve o app inteiro. O corte de 1000 px é o mesmo do sistema, repetido aqui porque este arquivo carrega DEPOIS de producao.css e venceria a regra de lá. */ /* A LISTA DEIXOU DE DIVIDIR A LARGURA COM O FORMULÁRIO (2026-09-08). Lado a lado foi desenhado quando a tabela tinha sete colunas; com «chegou em» separada do prazo são oito, e em 60% da página o nome do fornecedor quebrava em duas linhas em TODAS as linhas, «1 item» também, e o rótulo «prazo medido» numa terceira. Aumentar a fração não resolveu: a 5fr/3fr ainda quebrava. Empilhar resolve porque a página se chama *Pedidos*: a lista é o assunto e fica inteira; o formulário é a ação, tem campos curtos e não fica melhor largo. Quem chega da necessidade de compra vai direto ao formulário pela âncora `#novo-pedido`, que o botão de lá já carrega. */ .colunas.compra-pedidos-grade { grid-template-columns: minmax(0, 1fr); } .colunas.compra-pedidos-grade > * + * { margin-top: var(--e6); } /* --- 2. Os itens do formulário de /compra/ --------------------------------- Cinco pares insumo+quanto, cada um numa .linha-unica do sistema (que já vira coluna a ≤ 700 px). Só falta o ritmo entre eles: .linha-unica nasce com margin 0 porque vive dentro de . */ .compra-item + .compra-item { margin-top: var(--e3); } .compra-item > .campo > span { white-space: nowrap; } /* --- 3. A coluna «a conta» de /mesa/nota// ------------------------------- É a razão da tela: as duas quantidades ficam visíveis porque a conversão é onde o erro se esconde (PR-81). Estava em .pequeno.apagado — o recurso mais fraco do sistema para o dado mais importante da linha. Ganha a superfície do sistema, tinta cheia e o mono (é uma conta, não prosa). */ .tabela td.compra-conta { background: var(--superficie-2); color: var(--tinta); font-size: var(--t2); white-space: nowrap; } .compra-conta .mono { font-size: var(--t1); } .tabela .compra-conta { border-left: 1px solid var(--linha); } /* a faixa é uma COLUNA: começa no cabeçalho */ .tabela thead th.compra-conta { background: var(--superficie-2); } .tabela tbody tr:hover td.compra-conta { background: var(--superficie-3); } /* o ritmo do formulário de /mesa/nota/: a regra, o campo, e só então o botão — nunca colados */ #regra-do-arquivo { margin-bottom: var(--e3); } .campo-arquivo + .acoes-form { margin-top: var(--e4); } /* o alvo da caixa de marcar: 44 px de dedo, com a palavra escondida para quem lê por leitor de tela. O