/* cockgit — nova-propostas.css
   vista /nova · tela PROPOSTAS: uma LINHA por proposta comercial. O porquê do
   desenho (e de a verdade morar no Piracema) está no cabeçalho de
   js/app-nova-propostas.js.

   Arquivo próprio pelo teto POR ARQUIVO de 48KB (docs/FRONTEND.md). LINHA, NÃO
   CARD: o dono compara propostas entre si — valor contra valor, prazo contra
   prazo — e isso pede colunas alinhadas no desktop. No celular a linha vira
   bloco, com os mesmos pedaços na ordem de decisão: quem, quanto, em que pé,
   o que fazer, os botões. */

#nv:not([data-tela="propostas"]) #nv-propostas{display:none}
#nv-propostas{padding:0 16px 20px}
#nv-propostas .nv-cap{margin:14px 0 10px}

.nv-pp-barra{display:flex;gap:8px 12px;align-items:center;flex-wrap:wrap;margin:0 0 8px}
.nv-pp-barra button{min-height:44px;padding:6px 14px;font-size:var(--t-dat)}
.nv-pp-conta{font-size:var(--t-cap);color:var(--p3)}
.nv-pp-msg{min-height:1.3em;font-size:var(--t-cap);color:var(--p3);margin:4px 0 8px;
  word-break:break-word}
.nv-pp-msg.ok{color:var(--accent2)}
.nv-pp-msg.bad{color:var(--p0)}

/* A LINHA: cinco colunas no desktop — quem · valor · estado · próxima ação · botões.
   A régua é --ruleS (3:1) porque é o único delimitador entre uma proposta e a
   outra; a cor da borda esquerda repete o status, para quem bate o olho. */
.nv-pp-linhas{display:flex;flex-direction:column;gap:10px}
.nv-pp-linha{display:grid;gap:8px 16px;align-items:start;min-width:0;overflow:hidden;
  grid-template-columns:minmax(160px,1.3fr) minmax(120px,.8fr) minmax(170px,1.2fr) minmax(150px,1fr) auto;
  border:1px solid var(--ruleS);border-left:4px solid var(--p3);
  background:var(--surface);padding:12px 14px}
.nv-pp-linha.aberta,.nv-pp-linha.negociando{border-left-color:var(--accent)}
.nv-pp-linha.aceita{border-left-color:var(--accent2)}
.nv-pp-linha.recusada,.nv-pp-linha.rascunho{border-left-style:dashed;background:transparent}
.nv-pp-linha.vencida{border-left-color:var(--p1)}
/* VENCIDA SEM RESPOSTA é o destaque que o dono pediu: espessura e laranja-aviso,
   nunca vermelho (--p0 é da corda puxada, do portão e do CI — DESIGN.md §9). */
.nv-pp-linha.urg{border-color:var(--p1);border-left-width:8px;
  background:color-mix(in oklab,var(--p1) 7%,var(--surface))}

.nv-pp-quem{min-width:0}
.nv-pp-quem h3{font-family:var(--display);font-size:var(--t-sec);font-weight:400;margin:0;
  color:var(--text);overflow-wrap:anywhere}
.nv-pp-quem h3 small{font-family:var(--mono);font-size:var(--t-cap);color:var(--muted)}
.nv-pp-proj{margin:2px 0 0;font-size:var(--t-cap);color:var(--muted);overflow-wrap:anywhere}

/* os dois números, um em cima do outro, com o rótulo em caixa alta pequena */
.nv-pp-valor{display:grid;grid-template-columns:auto auto;gap:0 8px;align-items:baseline;
  font-variant-numeric:tabular-nums}
.nv-pp-valor .n{font-size:var(--t-bod);color:var(--text);white-space:nowrap}
.nv-pp-valor .n small{font-size:var(--t-cap);color:var(--muted)}
.nv-pp-valor .r,.nv-pp-prox .r{font-size:var(--t-cap);letter-spacing:.1em;text-transform:uppercase;
  color:var(--p3)}

.nv-pp-estado{display:flex;flex-direction:column;gap:4px;font-size:var(--t-cap);color:var(--muted);
  min-width:0}
/* o SELO de status: a métrica dos chips (11px/600, canto vivo) — só a cor muda */
.nv-pp-st{align-self:flex-start;font-size:var(--t-cap);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;border:1px solid var(--p3);color:var(--p3);padding:1px 8px;
  white-space:nowrap;cursor:help}
.nv-pp-st.ok{border-color:var(--accent);color:var(--accent);
  background:color-mix(in oklab,var(--accent) 10%,transparent)}
.nv-pp-st.warn{border-color:var(--p2);color:var(--p2)}
.nv-pp-st.viva{border-color:var(--accent2);color:var(--accent2);
  background:color-mix(in oklab,var(--accent2) 12%,transparent)}
.nv-pp-st.urg{border-color:var(--p1);color:var(--p1);font-weight:700}
.nv-pp-st.fora,.nv-pp-st.dim{border-style:dashed}
.nv-pp-ab.sim{color:var(--accent)}
.nv-pp-vence{font-weight:600;color:var(--text)}
.nv-pp-vence.warn{color:var(--p2)}
.nv-pp-vence.urg{color:var(--p1);font-weight:700}
.nv-pp-vence.dim{font-weight:400;color:var(--p3)}
.nv-pp-resp{color:var(--accent)}
.nv-pp-ct{color:var(--p3)}

.nv-pp-prox{display:flex;flex-direction:column;gap:2px;font-size:var(--t-dat);color:var(--text);
  min-width:0;overflow-wrap:anywhere}
.nv-pp-vazio{font-size:var(--t-cap);color:var(--p3);font-style:italic}
.nv-pp-linha.urg .nv-pp-vazio{color:var(--p1);font-style:normal;font-weight:600}

/* os botões: 44px de alvo, em coluna no desktop (a coluna estreita não pede largura)
   e em linha que quebra no celular */
.nv-pp-acoes{display:flex;flex-direction:column;gap:6px}
.nv-pp-acoes button{min-height:44px;padding:4px 12px;font-size:var(--t-cap);white-space:nowrap}
.nv-pp-nada{border:1px dashed var(--ruleS);padding:16px;color:var(--p3);
  font-size:var(--t-dat);line-height:1.5}

.nv-pp-modal-p{font-size:var(--t-dat);color:var(--muted);line-height:1.5}
.nv-pp-modal-l{display:flex;flex-direction:column;gap:4px;font-size:var(--t-cap);color:var(--p3);
  margin:10px 0}
.nv-pp-modal-l textarea,.nv-pp-modal-l input{font-size:var(--t-dat);min-height:44px;
  background:var(--surface2);width:100%;box-sizing:border-box}
.nv-pp-modal-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.nv-pp-modal-acoes button{min-height:44px;flex:1 1 auto}

/* CELULAR (390px): a linha vira bloco. As colunas somem, os pedaços empilham na
   ordem de decisão e os botões viram uma fileira que quebra — cada um com o alvo
   de 44px e largura para o polegar. */
@media (max-width:820px){
  #nv-propostas{padding:0 12px 20px}
  /* minmax(0,1fr), não 1fr: o mínimo automático de um track é o min-content, e o
     nome do projeto ou a próxima ação empurrariam a linha para fora da tela */
  .nv-pp-linha{grid-template-columns:minmax(0,1fr);gap:8px;padding:12px}
  .nv-pp-valor{grid-template-columns:auto minmax(0,1fr);gap:0 8px}
  .nv-pp-acoes{flex-direction:row;flex-wrap:wrap}
  .nv-pp-acoes button{flex:1 1 40%;white-space:normal}
}