/* Proposta de pedido do ERP dentro do painel de decisão (E4-14 · UX-001 S03).

   Quarta folha, pelo mesmo critério das outras três: um arquivo, um assunto, e
   nenhuma passando do teto de 300 linhas da casa. `tabela.css` já está em 255 e
   fala da LISTA de ocorrências; este fala de uma leitura ao vivo do ERP.

   Nenhum hex solto: todos os valores são tokens do DE-001, que vivem só em
   `painel.css`. E nenhuma cor de MARCA (verde) aqui — verde no painel significa
   "marca/navegação", nunca "este dado está bem", e um pedido lido do ERP é
   justamente o dado que ainda não foi confirmado por ninguém. */

/* O bloco mantém a caixa mesmo no painel focado (que achata os `.rb` em linha):
   é leitura, não um campo do formulário ao lado dos outros — a mesma decisão da
   régua parcial. */
.rb-proposta { background: var(--cor-superficie); }
.painel-foco .rb-proposta { flex-direction: column; align-items: stretch; gap: var(--esp-2);
                            border: 1px solid var(--cor-borda); border-radius: var(--raio-m);
                            padding: var(--esp-2) var(--esp-3); }
.rb-proposta p { margin: 0 0 var(--esp-1); max-width: 780px; line-height: var(--altura-linha); }

/* "Não consegui perguntar" (CA-04/CA-13) usa os tokens de ERRO, e os vazios
   honestos (CA-05, CA-15) usam os de AVISO. A diferença entre uma falha e uma
   resposta vazia é lida antes do texto — e nunca só pela cor: os data-testid,
   o `role="alert"` e as próprias frases são canais distintos. */
.proposta-falha { background: var(--cor-erro-fundo); color: var(--cor-erro-texto);
                  border-radius: var(--raio-m); padding: var(--esp-2) var(--esp-3); }
.proposta-vazio { background: var(--cor-aviso-fundo); color: var(--cor-aviso-texto);
                  border-radius: var(--raio-m); padding: var(--esp-2) var(--esp-3); }
/* A chave com que se procurou fica colada no vazio, e não num rodapé: separada,
   ela vira nota de rodapé de uma frase que a pessoa já decidiu que é um "não". */
.proposta-ancora { margin-top: 0; padding-left: var(--esp-3);
                   border-left: 2px solid var(--cor-borda); }
.proposta-saida { display: flex; gap: var(--esp-2); align-items: center;
                  flex-wrap: wrap; margin-top: var(--esp-2); }
.proposta-clientes { margin: var(--esp-1) 0 0; padding-left: var(--esp-5);
                     font-size: var(--tipo-corpo-s); }

/* Um cartão por candidato: dois pedidos lado a lado precisam ser lidos como
   duas coisas, senão os itens de um parecem do outro (RN-P1-07, CA-14). */
/* Os candidatos lado a lado (PO, 2026-09-25): comparar dois pedidos é olhar
   um ao lado do outro. O botão desce para o pé do cartão, alinhado entre eles. */
.proposta-lista, .proposta-sem-item, .proposta-chave { align-self: stretch; }
/* Flex e não grid: dentro da célula da tabela, o grid media a linha pela
   largura mínima da célula e os cartões nasciam com o dobro da altura. */
.proposta-lista { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-2); }
.proposta-pedido { border: 1px solid var(--cor-borda); border-radius: var(--raio-m);
                   padding: var(--esp-2) var(--esp-3); background: var(--cor-superficie);
                   display: flex; flex-direction: column; flex: 1 1 300px; max-width: 420px; }
.proposta-pedido > .proposta-saida, .proposta-pedido > .proposta-registrado { margin-top: auto; }
.proposta-escolhido { border: 2px solid var(--cor-marca-700); }
.proposta-sem-item { margin-top: var(--esp-2); }
.proposta-sem-item summary, .proposta-chave summary { cursor: pointer; }
.proposta-cabeca { font-size: var(--tipo-corpo); }
/* O carimbo da leitura mora no MESMO cartão do número do pedido (CA-02) — e por
   isso não recebe estilo que o afaste dele. */
.proposta-lido { margin-bottom: var(--esp-1); }
.proposta-item { font-size: var(--tipo-corpo); }
.proposta-item-vazio { background: var(--cor-estado-pendente-fundo);
                       color: var(--cor-estado-pendente-texto);
                       border-radius: var(--raio-s); padding: 2px var(--esp-2);
                       font-size: var(--tipo-corpo-s); }
.proposta-escolher { background: var(--cor-estado-revisao-fundo);
                     color: var(--cor-estado-revisao-texto);
                     border-radius: var(--raio-m); padding: var(--esp-2) var(--esp-3); }

/* O pedido já registrado na ocorrência (E4-15). Usa os tokens da MARCA porque
   aqui verde significa exatamente o que ele significa no resto do painel — este
   item está resolvido do lado de cá —, e não "o ERP confirmou": nada foi
   enviado ao ERP, e nenhum texto deste bloco sugere isso. */
.proposta-registrado { background: var(--cor-marca-claro-100); color: var(--cor-marca-900);
                       border-radius: var(--raio-m); padding: var(--esp-2) var(--esp-3);
                       font-size: var(--tipo-corpo-s); }

/* E4-18 — o caminho para corrigir a chave. Fica visualmente ABAIXO e mais leve
   que o resultado: ele é a saída do beco, não a atração principal da tela. */
.proposta-chave { margin-top: var(--esp-3); padding-top: var(--esp-2);
                  border-top: 1px dashed var(--cor-borda); }
/* `flex-start`, e não `flex-end`: os três campos não têm a mesma altura (só
   dois carregam hint), e alinhá-los pela base empurrava um rótulo para cima do
   outro. Alinhados pelo topo, os rótulos ficam na mesma linha de leitura. */
.proposta-campos { display: flex; flex-wrap: wrap; gap: var(--esp-3);
                   align-items: flex-start; margin: var(--esp-2) 0; }
.proposta-campos label { display: flex; flex-direction: column; gap: 2px;
                         font-size: var(--tipo-corpo-s); }
.proposta-campos input[type="text"] { width: 260px; max-width: 100%; }
.proposta-campos input[type="date"] { width: 165px; }
.proposta-campos .hint { font-size: var(--tipo-caption); color: var(--cor-texto-suave); }
/* C20 — link. `.botao-link` só tira a aparência de botão; a COR do texto vem do
   contexto, e no cabeçalho ela é branca. Dentro do cartão isso ficaria invisível
   sobre o branco, então a cor de link é declarada aqui — como `.hist-abrir` já
   faz na lista. */
.proposta-usar { margin-left: var(--esp-2); color: var(--cor-marca-700);
                 font-size: var(--tipo-caption); text-decoration: underline; }

/* As linhas do pedido: a lista existe para a pessoa VER por que o item não
   casou. Rola dentro do próprio bloco — um pedido grande não pode empurrar a
   decisão para fora da tela. */
/* O respiro vertical não é estética: sem ele, uma linha só já sobra 1px sobre a
   caixa e o navegador desenha uma barra de rolagem para nada. */
.proposta-itens { margin: var(--esp-1) 0 0; padding: 2px 0 2px var(--esp-5);
                  max-height: 190px; overflow-y: auto;
                  font-size: var(--tipo-corpo-s); color: var(--cor-texto);
                  line-height: var(--altura-linha); }
/* A linha casada é marcada por PESO e marcador, nunca só por cor. */
.proposta-itens .item-casado { font-weight: var(--tipo-peso-medio); }
.proposta-itens .item-casado::marker { content: "▸ "; }