/* Caixa "Preço e lucro": faixas uma embaixo da outra, cada uma na largura toda */
.compacto input[type=text],.compacto textarea{width:100%;padding:5px 10px;font-size:14px}
.compacto select{padding:5px 32px 5px 10px;font-size:14px}
.compacto .grade{display:grid;gap:10px 12px}
.compacto label.campo small{display:block;font-weight:400}
.compacto h3.sub{margin:16px 0 6px}
.precos-topo{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:0 56px;align-items:start}
.precos-topo h3.sub{margin-top:0}
.linha-cfg{display:grid;gap:10px 20px;align-items:start}
.linha-cfg.dois{grid-template-columns:1fr 1fr}
.linha-cfg.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
.compacto .campo.desligado{opacity:.5}
/* Cada caixinha fica logo embaixo do campo que ela liga */
.linha-cfg.tres > div{display:grid;gap:8px;align-content:start}
/* A largura vem do ajustes-precos.js: a da caixinha com o título ou o número mais comprido. Não cabendo na linha, as outras descem */
.compacto .grade-niveis{grid-template-columns:repeat(auto-fill,var(--larg-nivel,90px));gap:12px 10px}
.compacto .col-listas .grade{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 16px}

/* Mensagem do orçamento: o texto de um lado e, do outro, como ele chega no WhatsApp (as cores do balão são as de lá) */
.msg-duas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 40px;align-items:start}
.msg-cfg h3.sub{margin:0 0 8px}
.msg-cfg textarea{width:100%;font-size:14px;line-height:1.5}
.msg-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.msg-chips button{border:1px solid var(--linha);background:var(--neutro);border-radius:999px;padding:3px 10px;font:600 12.5px var(--sans);color:var(--tinta-2);cursor:pointer}
.msg-chips button:hover{border-color:var(--marca);color:var(--marca-texto)}
.msg-cfg .dica{margin:8px 0 0}
.msg-fundo{background:#ECE5DD;border-radius:12px;padding:10px}
.msg-balao{max-width:300px;margin-left:auto;padding:6px 8px;background:#D9FDD3;border-radius:10px 0 10px 10px;box-shadow:0 1px 1px rgba(0,0,0,.15);font:12px/1.4 system-ui,sans-serif;color:#111;white-space:pre-wrap;overflow-wrap:anywhere}
.msg-balao .cit{display:block;margin:1px 0;padding:1px 8px;border-left:3px solid #25A36F;background:rgba(0,0,0,.05)}
/* Fechada e nos modelos prontos o balão é só uma amostra, por isso pequeno; os modelos ficam lado a lado */
.msg-fechada{max-width:340px}
.msg-modelos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,340px));gap:12px 20px;margin-bottom:18px}
.msg-modelo-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px;margin-bottom:6px;font-size:14px}
.msg-modelo.atual .msg-fundo{outline:2px solid var(--marca)}
/* Até o tablet em pé as três colunas de dízimo, sinal e taxa não cabem lado a lado */
@media (max-width:900px){
  .precos-topo,.linha-cfg.tres,.msg-duas{grid-template-columns:1fr}
  .precos-topo{gap:16px}
}