.calc{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:24px;align-items:start}
.calc .cab{justify-content:flex-start;gap:12px 20px}
.bonus{border-style:dashed;border-color:var(--borda-campo)}
.linha-peca{grid-template-columns:minmax(0,1fr) 150px}
.linha-taxa{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:12px}
.taxa-pct{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--tinta-2)}
.taxa-pct input{width:84px}
.linha-taxa .dica{flex:0 0 100%;margin:0}

.mao-obra{container-type:inline-size;display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;align-items:start}
.mao-obra .campo{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--tinta-2)}
.rotulo{font-weight:600}
.nivel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:5px}
/* Em tela média as 12 caixas ficariam espremidas numa linha só */
@container (max-width:745px){.nivel{grid-template-columns:repeat(6,1fr)}}
.nivel label{position:relative;cursor:pointer}
.nivel input{position:absolute;opacity:0}
.nivel span{display:block;border:1px solid var(--borda-campo);border-radius:12px;padding:8px 0;background:#fff;text-align:center;font-size:16px;font-weight:700;color:var(--tinta-2)}
.nivel span:hover{border-color:var(--marca)}
.nivel input:checked + span{border-color:var(--marca);background:var(--marca-claro);color:var(--marca-texto);box-shadow:inset 0 0 0 1px var(--marca)}
.nivel input:focus-visible + span{outline:2px solid var(--marca);outline-offset:2px}

.mats{display:flex;flex-direction:column;gap:10px}
.mats:empty{display:none}
.bloco > h2:has(+ .mats:empty:last-child){margin-bottom:0}
.mats + .vazio{margin-top:10px}
.mat{display:grid;grid-template-columns:minmax(150px,1fr) 70px 130px 80px 34px;gap:8px;align-items:center;padding:10px;border:1px solid var(--linha);border-radius:12px;background:var(--neutro-2)}
.mat.fio{grid-template-columns:minmax(150px,1fr) 70px 70px 80px 34px}
.mat.avulso{grid-template-columns:minmax(150px,1fr) 130px 70px 80px 34px}
.mat .unid{font-size:13px;color:var(--tinta-2);padding-left:2px}
.mat .custo{text-align:right;font-weight:600}
.mat .rodape-mat{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin-top:-2px}
.mat .rodape-mat:has(.info:empty):not(:has(select, .extra)){display:none}
.mat .dois{grid-column:span 2}
.mat select.pesagem{width:auto;height:28px;padding:0 30px 0 10px;background-position:right 10px center;border-radius:8px;font-size:13px;color:var(--tinta-2)}
.mat .info{font-size:12.5px;color:var(--tinta-3)}
.mat.excede :is([data-m="qtd"], [data-m="depois"]){border-color:var(--erro)}
.mat .extra{display:contents;font-size:13px}
.mat .extra .check{font-size:13px;color:var(--tinta-2)}
.mat .extra input[type=text]{width:140px;padding:5px 10px;font-size:13px}
.falta{color:var(--erro);font-weight:600}
.kit-total{color:var(--tinta-2)}
.obs{min-height:34px;max-height:160px;padding:6px 12px;font-size:14px;line-height:1.45;resize:none;field-sizing:content;overflow-wrap:anywhere}
.kit-total b{margin-left:6px;color:var(--tinta)}

/* A etiqueta imita a tag de papel pendurada nas bolsas da marca */
.lado{position:sticky;top:16px}
.fio-svg{display:block;margin:0 auto -6px;width:120px;height:44px}
.etiqueta{position:relative;background:var(--marca-forte);color:var(--sobre-marca,#fff);border-radius:24px 24px 20px 20px;padding:34px 24px 22px;box-shadow:0 12px 30px -14px rgba(42,130,119,.45)}
.etiqueta::before{content:"";position:absolute;inset:8px;border:1.5px dashed rgba(255,255,255,.45);border-radius:16px 16px 12px 12px;pointer-events:none}
.et-copiar{position:absolute;top:14px;right:14px;color:inherit}
.et-copiar:hover{color:var(--marca-escuro);background:#fff}
.et-zap{right:48px}
.furo{position:absolute;top:12px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--papel);box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.et-topo{text-align:center;font-family:var(--num);font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;opacity:.9;margin-top:6px}
.et-nome{text-align:center;font-size:17px;font-weight:700;margin-top:4px;min-height:1.4em;overflow-wrap:anywhere}
.et-preco{text-align:center;font-size:52px;font-weight:800;line-height:1.1;margin:8px 0 2px;font-variant-numeric:tabular-nums}
.et-preco small{font-size:22px;font-weight:700;vertical-align:.8em;margin-right:6px}
.et-sub{text-align:center;font-size:12.5px;opacity:.95;min-height:1.3em}
.et-linhas{margin:18px 0 0;padding:14px 0 0;border-top:1.5px dashed rgba(255,255,255,.35);display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:14px}
.et-linhas dt{font-weight:600}
.et-linhas dd{margin:0;font-weight:600;text-align:right;font-family:var(--num);font-variant-numeric:tabular-nums}
.et-linhas .forte{font-weight:700;opacity:1}
.et-linhas .div{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.2);margin:4px 0}
.et-voce{margin-top:14px;background:#fff;color:var(--marca-escuro);border-radius:14px;padding:10px 14px;display:flex;justify-content:space-between;align-items:baseline}
.et-voce span{font-size:13px;font-weight:700}
.et-voce b{font-family:var(--num);font-size:22px;font-weight:800}
.caixa-site{margin-top:14px;background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);padding:12px 16px;display:flex;flex-direction:column;gap:8px}
.cs-topo{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13.5px;color:var(--tinta-2)}
.cs-topo b{font-family:var(--num);font-size:16px;color:var(--tinta);white-space:nowrap}
.caixa-site .check{font-weight:700}
.caixa-site .dica{margin:0}
.caixa-site:has(.cs-simples){background:none;border:0;padding:0 4px}
.cs-simples{margin:0;text-align:center;font-size:13px;color:var(--tinta-2)}
.cs-caro{color:var(--erro-escuro);font-weight:700}
.cs-simples b{font-family:var(--num);color:var(--tinta)}
.acoes-et{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.acoes-et > .dica{text-align:center;margin:0}
.registrar{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.registrar .linha-botoes{margin-top:0}
.linha-checks{display:flex;flex-wrap:wrap;gap:10px 22px}
.reg-cat{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--tinta-2)}
.reg-cat > span{font-weight:600}
.reg-cats{display:flex;flex-wrap:wrap;gap:5px}
.reg-cats label{position:relative;cursor:pointer}
.reg-cats input{position:absolute;opacity:0;pointer-events:none}
.reg-cats .pill{padding:4px 10px;font-size:12.5px;opacity:.5}
.reg-cats input:checked + .pill{opacity:1;box-shadow:inset 0 0 0 1.5px currentColor}
.reg-cats input:focus-visible + .pill{outline:2px solid var(--marca);outline-offset:2px}

/* Precificações em andamento: etiquetas pequenas, para não competir com os campos da peça */
.tags-rasc{flex-wrap:wrap;justify-content:flex-end;gap:6px;min-width:0}
.rasc{display:inline-flex;align-items:center;max-width:220px;border-radius:999px;background:var(--neutro);color:var(--tinta-2);font-size:12px;font-weight:700}
.rasc.ativa{background:var(--marca-claro);color:var(--marca-texto)}
.rasc button{all:unset;cursor:pointer;padding:3px 0 3px 9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rasc .rasc-x{flex:none;padding:3px 8px 3px 5px;opacity:.55}
.rasc .rasc-x:hover{opacity:1}
.rasc-nova{all:unset;cursor:pointer;padding:3px 4px;font-size:12px;font-weight:700;color:var(--marca-texto);white-space:nowrap}
.rasc-nova.ativa{text-decoration:underline;text-underline-offset:3px}
.rasc button:focus-visible,.rasc-nova:focus-visible{outline:2px solid var(--marca);outline-offset:1px;border-radius:999px}

@media (prefers-reduced-motion:no-preference){
  .et-preco{transition:transform .18s ease}
  .et-preco.pulsa{transform:scale(1.04)}
}
/* Até aqui a etiqueta ao lado deixaria as linhas de material sem largura */
@media (max-width:1060px){
  .calc{grid-template-columns:1fr}
  .lado{position:static}
}
@media (max-width:620px){
  /* O título é comprido: a letra acompanha a largura da tela para ele caber numa linha só */
  .calc .cab h1{font-size:clamp(22px,7.6vw,34px)}
  .linha-peca{grid-template-columns:1fr}
  .mao-obra{grid-template-columns:1fr}
  .nivel{grid-template-columns:repeat(6,1fr)}
  .mat,.mat.fio,.mat.avulso{grid-template-columns:1fr 1fr}
  .mat select[data-m="itemId"],.mat input[data-m="avulsoNome"]{grid-column:1/-1}
  .mat .custo{text-align:left}
  .et-preco{font-size:48px}
}