/* =========================================================
   ARTESÃ · CALCULAR PREÇO (/app/precificacao) — o jeito do modelo aprovado (app-aluna/precificacao.html)
   As peças (cartão, lista, item, grade-2, número, rótulo) vêm de componentes.css; aqui só o que é desta tela.
   ========================================================= */
.pre-formula { font-weight: 800; margin: 4px 0 0; }
.pre-conta { display: flex; flex-direction: column; gap: 14px; }
.pre-qtd { display: flex; align-items: center; gap: 6px; flex: none; }
.pre-qtd b { min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.pre-qtd .btn-topo { font-size: 20px; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; padding: 0; font-family: inherit; }   /* o quadradinho com borda do modelo (.btn-topo) */
.pre-vazio { padding: 6px 2px; }
.pre-lucro, .pre-bom { color: var(--sucesso); }
.pre-ruim { color: var(--perigo); }
.pre-comparar { margin: 10px 0 0; }
.pre-mercado { margin-top: 10px; }
.pre-salvar { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.pre-onde { margin: 0; text-align: center; }
#pre-resultado .valor, [data-r="preco"], [data-r="lucro"] { font-variant-numeric: tabular-nums; }

/* a folha "Adicionar material" (sobe de baixo, como no modelo) */
.pre-folha { border: 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); width: 100%; max-width: 560px; max-height: 85vh; overflow: auto;
  margin: auto auto 0; border-radius: var(--raio-g, 22px) var(--raio-g, 22px) 0 0; background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-forte); }
.pre-folha:not([open]) { display: none; }
.pre-folha[open]:not(:modal) { position: fixed; inset: auto 0 0 0; z-index: 50; }   /* aberta sem o script (?abrir=materiais) */
.pre-folha::backdrop { background: rgba(40, 10, 30, .45); }
.pre-folha-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.pre-folha-topo h2 { margin: 0; font-family: var(--f-titulo); font-weight: var(--peso-titulo, 600); font-size: 1.2rem; }
.pre-folha-topo .btn-topo { width: 40px; height: 40px; font-size: 26px; line-height: 1; display: grid; place-items: center; text-decoration: none; color: inherit; }
.pre-folha .lista .item { width: 100%; text-decoration: none; color: inherit; }
.pre-novo { margin-top: 12px; }