/* ============================================================
   Novo orçamento e Preview (studio-0.4.344) — porte do estudo 23 (docs/estudos/visao-geral-23-novo-orcamento-preview.html).
   Prefixo nv-; reaproveita as peças vp- da Visão geral (cartão, cabeçalho, ícone) e a moldura da peça (.pvframe/.pf).
   Cor de destaque só por --gold*.
   ============================================================ */
.nv { --gap: 16px; }
.nv .nv-sv { display: inline-grid; flex: none; }
.nv .nv-sv .vx-svg { width: 18px; height: 18px; }
.nv [hidden] { display: none !important; }
/* Celular: dois passos. Desktop: tudo numa página (canvas), com as ações na coluna lateral. */
@media (max-width: 720px) { .nv[data-passo="1"] .nv-so2, .nv[data-passo="2"] .nv-so1 { display: none; } }

/* cabeçalho: passos e menu */
.nv-steps { display: flex; gap: 4px; padding: 6px; border-radius: 999px; background: var(--surface); }
.nv-steps button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 8px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-weight: 600; font-size: 14px; color: var(--ink-3); white-space: nowrap; cursor: pointer; }
.nv-steps button i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: 600 13px var(--font); font-style: normal; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.nv-steps button[aria-current] { background: var(--gold); color: var(--on-gold); }
.nv-steps button[aria-current] i { background: var(--on-gold); color: var(--gold); box-shadow: none; }
.nv-steps button.is-feito:not([aria-current]) i { background: var(--bloco-medio); color: var(--on-medio); box-shadow: none; }
.nv-menuwrap { position: relative; }
.nv-iconbtn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.nv-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: min(280px, calc(100vw - 32px)); padding: 6px; border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong), 0 24px 48px -20px rgba(0, 0, 0, .5); display: grid; }
.nv-menu button { display: grid; text-align: left; min-height: 48px; padding: 10px 14px; border: 0; border-radius: 14px; background: transparent; font: inherit; font-weight: 500; color: var(--ink); cursor: pointer; }
.nv-menu button small { font-size: 13px; color: var(--ink-3); font-weight: 400; }
.nv-menu button:hover { background: var(--surface-2); }
.nv-menu button.nv-perigo { color: var(--danger-ink); }

/* seletor de formato (16:9 / 9:16) */
.nv .vp-seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--surface-2); flex: none; }
.nv .vp-seg button { min-height: 40px; min-width: 48px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.nv .vp-seg button[aria-pressed="true"] { background: var(--gold); color: var(--on-gold); }
.nv .vp-h { flex-wrap: wrap; }

/* ===== passo 1: formulário + coluna da peça ===== */
.nv-obra { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e3); align-items: start; }
.nv-lado { position: sticky; top: var(--e3); display: grid; gap: var(--e3); }
.nv-form { display: grid; gap: var(--e2); background: none; }
/* Direção C: cada passo é um cartão chapado (regras-ui 13.4) */
.nv-fs { display: grid; row-gap: var(--e3); padding: 28px; border-radius: var(--radius); background: var(--surface); }
.nv-fs__r { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; }
.nv-fs__r .nv-n { grid-row: span 2; font: 600 30px/1 var(--font-display); letter-spacing: -.05em; color: var(--ink); }
.nv-fs__r h2 { font: 500 20px/1.2 var(--font-display); letter-spacing: -.025em; }
.nv-fs__r p { grid-column: 2; font-size: 14px; color: var(--ink-3); text-wrap: pretty; }
.nv-tools { grid-column: 3; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.nv-tools .btn { gap: 8px; }
.nv-fg { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px var(--gap); align-content: start; }
.nv-c2 { grid-column: span 2; } .nv-c3 { grid-column: span 3; } .nv-c4 { grid-column: span 4; } .nv-c6 { grid-column: 1 / -1; }
.nv-f { display: grid; gap: 6px; align-content: start; min-width: 0; }
.nv-f > label, .nv-lab > label { display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.nv-f > label em { font-style: normal; font-weight: 400; color: var(--ink-3); font-size: 13px; }
.nv-in { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--campo-line); background: var(--campo); color: var(--ink); font: inherit; min-width: 0; }
.nv-in:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
textarea.nv-in { padding: 12px 14px; min-height: 72px; resize: vertical; line-height: 1.45; }
.nv-in.num { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.nv-in::placeholder { color: var(--ink-3); opacity: .8; }
.nv-in[readonly] { background: transparent; border-style: dashed; }
.nv-dur { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px; }
.nv-dur--dias { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.nv-hint { font-size: 13px; color: var(--ink-3); text-wrap: pretty; }
.nv-reuso { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--ink-2); }
.nv-reuso .nv-sv .vx-svg { width: 16px; height: 16px; color: var(--conv); }

/* itens: a mesma grade; valor na coluna da direita, alinhado ao total */
.nv-it__t { grid-column: span 4; } .nv-it__v { grid-column: span 2; align-content: end; }
.nv-it__d { grid-column: 1 / -1; margin-top: -8px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.nv-lab { display: flex; justify-content: space-between; align-items: baseline; }
.nv-it__rm { min-height: 32px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-3); cursor: pointer; }
.nv-it__rm:hover { color: var(--danger-ink); }
.nv-add { grid-column: 1 / -1; justify-self: start; gap: 8px; }

/* valor: soma, desconto, total */
.nv-soma { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.nv-soma > div { display: contents; }
.nv-soma span { grid-column: span 4; padding: 10px 0; font-size: 15px; color: var(--ink-2); text-align: right; border-top: 1px solid var(--line); align-self: center; }
.nv-soma b { grid-column: span 2; padding: 6px 0 6px 14px; text-align: right; font-weight: 600; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums lining-nums; }
.nv-tot span { font: 500 22px/1.2 var(--font-display); letter-spacing: -.02em; color: var(--ink); border-top-color: var(--line-strong); padding-top: 14px; }
.nv-tot b { border-top-color: var(--line-strong); padding-top: 12px; }
.nv-tot input { font: 500 20px var(--font-display); }
.nv-corrigido { grid-column: 1 / -1; }
.nv-corrigido:empty { display: none; }

/* sugestão de preço: uma frase e uma régua, sem caixa */
.nv-ref { grid-column: 1 / -1; display: grid; gap: 12px; }
.nv-ref:empty { display: none; }
.nv-ref__l { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.nv-ref__txt { font-size: 14px; color: var(--ink-2); text-wrap: pretty; max-width: 52ch; }
.nv-ref__txt b { color: var(--ink); font-weight: 600; }
.nv-regua { position: relative; height: 60px; }
.nv-regua__t { position: absolute; left: 0; right: 0; top: 26px; height: 8px; border-radius: 999px; background: var(--track); }
.nv-regua__f { position: absolute; top: 26px; height: 8px; border-radius: 999px; background: var(--neutral); }
.nv-regua__m { position: absolute; top: 18px; width: 2px; height: 24px; margin-left: -1px; border-radius: 2px; background: var(--ink); }
.nv-regua__v { position: absolute; top: 22px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--line-strong); transition: left .25s; }
.nv-regua small { position: absolute; top: 44px; font-size: 12px; color: var(--ink-3); white-space: nowrap; transform: translateX(-50%); }
.nv-regua small.l { transform: none; } .nv-regua small.r { transform: translateX(-100%); }
.nv-regua small.m { top: 0; color: var(--ink-2); font-weight: 600; }

/* agenda: quando cabe */
.nv-cabe { grid-column: 1 / -1; display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 20px; background: var(--bloco-medio); font-size: 14px; color: var(--on-medio); --ink: var(--on-medio); --ink-2: #3A352F; --ink-3: #4F4943; }
.nv-cabe b { color: var(--ink); font-weight: 600; }
.nv-cabe > span:nth-child(2) { flex: 1; min-width: 0; }
.nv-mais { grid-column: 1 / -1; }
.nv-mais > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.nv-mais > summary::-webkit-details-marker { display: none; }
.nv-mais > summary .vx-svg { transition: transform .2s; }
.nv-mais[open] > summary .vx-svg { transform: rotate(45deg); }
.nv-versao { display: flex; gap: 14px; align-items: flex-start; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.nv-versao input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--gold); flex: none; }
.nv-versao b { display: block; color: var(--ink); font-weight: 600; }
.nv-versao small { display: block; font-size: 13px; color: var(--ink-3); }

/* coluna da direita: peça e total */
.nv-peca { margin-top: var(--e3); }
.nv-peca[data-fmt="9:16"] { max-width: 62%; margin-inline: auto; }
.nv-pag { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; font-size: 13px; color: var(--ink-3); min-height: 32px; }
.nv-res { display: grid; gap: var(--e3); }
.nv-res__v { font: 600 clamp(44px, 4.4cqi, 60px)/1 var(--font-display); letter-spacing: -.055em; color: var(--gold); }
.nv-res__v small { font: 400 16px var(--font); letter-spacing: 0; color: var(--ink-3); margin-right: .35em; }
.nv-res dl { display: grid; }
.nv-res dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.nv-res dt { color: var(--ink-3); flex: none; }
.nv-res dd { color: var(--ink); font-weight: 500; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.nv-res dd.vazio { color: var(--danger-ink); font-weight: 600; }
.nv-btn-full { width: 100%; gap: 10px; }
.nv-salvo { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--ink-3); }
.nv-salvo .nv-sv .vx-svg { width: 16px; height: 16px; color: var(--conv); }
.nv-falta { font-size: 13px; color: var(--ink-2); text-align: center; font-weight: 600; }

/* ===== passo 2: revisar e enviar ===== */
.nv-rev { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--e3); align-items: start; }
.nv-rev .nv-peca[data-fmt="9:16"] { max-width: 40%; }
.nv-acoes { display: grid; gap: 10px; }

/* celular: a proposta é uma tarefa; a barra de baixo leva o total e o botão */
@container (max-width: 1180px) { .nv-rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
@container (max-width: 960px) {
  .nv-obra, .nv-rev { grid-template-columns: minmax(0, 1fr); }
  .nv-lado { position: static; }
  .nv-rev .nv-peca[data-fmt="9:16"] { max-width: 62%; }
}
@container (max-width: 720px) {
  .nv-fs { padding: 22px; border-radius: 30px; }
  .nv-fs__r { grid-template-columns: 36px minmax(0, 1fr); }
  .nv-tools { grid-column: 2; grid-row: auto; justify-content: flex-start; margin-top: 12px; }
  .nv-fg { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .nv-c2, .nv-c3, .nv-c4, .nv-it__t, .nv-it__v { grid-column: 1 / -1; }
  .nv-soma span, .nv-soma b { grid-column: span 1; }
  .nv-soma span { text-align: left; }
  .nv-cabe { flex-wrap: wrap; align-items: flex-start; }
  .nv-lado .nv-previa { display: none; }
  .nv-lado .nv-res .nv-salvo { display: none; }
  .nv-rev .nv-peca[data-fmt="9:16"] { max-width: 78%; }
}
/* o cabeçalho fica fora do container .vp: responde à janela */
@media (max-width: 720px) {
  .pghead__acoes:has(.nv-steps) { width: 100%; flex-wrap: nowrap; }
  .nv-steps { flex: 1 1 220px; min-width: 0; }
  /* o título sempre numa linha só dele: com subtítulo curto, o passo e o menu "…" eram espremidos ao lado */
  .pghead:has(.nv-steps) .pghead__row > div:first-child { flex: 1 1 100%; }
  .nv-steps button { flex: 1; min-width: 0; padding-right: 10px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
  .nv-steps .w { display: none; }
}
@media (prefers-reduced-motion: reduce) { .nv-regua__v { transition: none; } }

/* aviso de contatos na prévia (estudo 26) */
.nv-aviso { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 14px; align-items: center; margin-top: var(--e2); padding: 12px 16px; border-radius: 20px; background: var(--surface-2); font-size: 14px; color: var(--ink-2); }
.nv-aviso b { color: var(--ink); }
.nv-cts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: var(--s4); }
.nv-ct { display: grid; gap: 6px; }
@media (max-width: 640px) { .nv-aviso { grid-template-columns: 36px minmax(0,1fr); } .nv-aviso .btn { grid-column: 1 / -1; justify-self: start; } .nv-cts { grid-template-columns: minmax(0,1fr); } }

/* ============================================================
   Novo orçamento, direção C (canvas "Novo orçamento, desktop e celular"): uma página, quatro cartões, coluna lateral fixa.
   ============================================================ */
@media (min-width: 721px) {
  .nv .nv-so2, .nv-steps, .nv-menuwrap { display: none !important; }
  .pghead:has(.nv-voltar-sem) p { display: none; }
  .nv-res .nv-btn-full, .nv-res .nv-falta, .nv-res .nv-salvo { display: none; }
}
@media (max-width: 720px) { .nv-voltar-sem, .nv-rasc, .nv-lado .nv-acoesl { display: none; } }
.nv-rasc { font-size: 15px; opacity: .8; }
.nv-obra { grid-template-columns: minmax(0, 1fr) 440px; gap: 24px; }
@container (max-width: 1100px) { .nv-obra { grid-template-columns: minmax(0, 1fr); } }
.nv-form { display: grid; gap: 24px; min-width: 0; }
.nv-fs { padding: 28px; border-radius: var(--radius); gap: 0; row-gap: 0; }
.nv-fs__r { display: flex; align-items: center; gap: 16px; grid-template-columns: none; }
.nv-fs__r h2 { margin: 0; font: 600 26px/1.1 var(--font-display); letter-spacing: -.03em; }
.nv .nv-n { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 12px; background: var(--gold); color: var(--on-gold); font: 700 16px var(--font-display); letter-spacing: 0; }
.nv .nv-dica { margin: 6px 0 18px 50px; font-size: 15px; color: var(--ink-2); }
.nv-fg { margin-top: 0; }
.nv-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; grid-column: auto; grid-row: auto; justify-content: flex-start; }
.nv-itens__n { margin-left: auto; font-size: 13px; color: var(--ink-2); }
.nv-itens { display: block; }
.nv-it { display: flex; align-items: flex-start; gap: 16px; padding: 22px 0; border-top: 1.5px solid var(--campo-line); }
.nv-it .nv-n { width: 34px; height: 34px; font-size: 15px; }
.nv-it__c { flex: 1; min-width: 0; text-align: left; padding: 0; border: 0; background: none; color: inherit; font: inherit; display: block; }
button.nv-it__ver { cursor: text; }
.nv-it__ver h3 { margin: 0; font: 600 22px/1.15 var(--font-display); letter-spacing: -.03em; }
.nv-it__ver p { margin: 8px 0 0; font-size: 16px; line-height: 1.6; max-width: 72ch; }
.nv-it__vz { color: var(--ink-3); }
.nv-it__val { display: inline-block; margin-top: 8px; font-weight: 700; }
.nv-it__ti { font-weight: 700; font-size: 18px; height: 46px; border-color: var(--gold); }
.nv-it__tx { margin-top: 8px; font-size: 16px; border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 35%, transparent); }
.nv-it__v { margin-top: 12px; max-width: 260px; }
.nv-it__fim { display: flex; gap: 8px; margin-top: 10px; }
.nv-it__acoes { display: flex; flex: none; margin: -4px -6px 0 0; }
.nv-it__bt { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: transparent; color: var(--ink-2); cursor: pointer; }
.nv-it__bt:hover { background: var(--campo); color: var(--ink); }
.nv-it__bt svg { width: 20px; height: 20px; }
.nv-it__drag { cursor: grab; }
.nv-fg--valor { grid-template-columns: 1.2fr 1fr; align-items: end; }
.nv-fg--valor > .nv-f { grid-column: auto; }
.nv .nv-in.nv-in--valor { height: 68px; font: 600 30px var(--font-display); text-align: right; }
.nv-det { display: flex; align-items: center; gap: 16px; margin-top: 20px; padding: 16px 18px; border-radius: 20px; background: var(--campo); }
.nv-det b { display: block; }
.nv-sw { position: relative; flex: none; width: 58px; height: 34px; border: 0; border-radius: 17px; background: var(--campo-line); cursor: pointer; padding: 0; transition: background .15s; }
.nv-sw i { position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: var(--cartao); transition: transform .15s; }
.nv-sw.is-on { background: var(--gold); }
.nv-sw.is-on i { transform: translateX(24px); background: var(--on-gold); }
.nv-cabe { background: var(--bloco-medio); }
/* coluna lateral */
.nv-lado { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 24px; }
.nv-res { padding: 30px; display: flex; flex-direction: column; gap: 0; }
.nv-res__v { margin-top: 14px; font: 600 clamp(52px, 5.4vw, 72px)/1 var(--font-display); letter-spacing: -.06em; color: var(--gold); }
.nv-res__v small { font: 600 clamp(20px, 2vw, 28px) var(--font-display); letter-spacing: 0; margin-right: .3em; color: var(--gold); }
.vp .nv-res__d { margin-top: 10px; font-size: 15px; color: var(--ink-2); }
.nv-res .nv-ref { margin-top: 22px; }
.nv-res .nv-ref__txt { color: var(--ink); max-width: none; }
.nv-res .nv-regua__t { background: var(--ink-2); opacity: .35; }
.nv-res .nv-regua__f { background: var(--ink-2); opacity: .5; }
.nv-res .nv-regua__m { background: var(--ink); }
.nv-res .nv-regua__v { box-shadow: 0 0 0 3px var(--bloco-painel), 0 0 0 4px var(--line-strong); }
.nv-res .nv-regua small { color: var(--ink-2); }
.nv-res dl { margin-top: 18px; }
.nv-previa { padding: 28px; }
.nv-previa__t { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.nv-previa .vp-seg { background: var(--on-medio); }
.nv-previa .vp-seg button { background: transparent; color: var(--bloco-medio); min-height: 34px; font-size: 13px; }
.nv-previa .vp-seg button[aria-pressed="true"] { background: var(--bloco-medio); color: var(--on-medio); }
.nv-acoesl { display: flex; flex-direction: column; gap: 12px; }
.vp .nv-acoesl__n { margin: 4px 6px 0; font-size: 14px; line-height: 1.45; opacity: .85; }

.nv-menu .nv-so-cel { display: none; }
@media (max-width: 720px) { .nv-menu .nv-so-cel { display: grid; } }

/* ---- Novo job (canvas): Resumo do job, Plano e prévia do cartão ---- */
.nj .nj-col { display: grid; gap: var(--e3); }
.nj .nv-fs { gap: 20px; }
.nj .nv-fg .nv-c3 { grid-column: span 3; }
.nj-etapas { display: flex; flex-wrap: wrap; gap: 8px; }
.nj-pill { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: transparent; color: var(--ink); font: 600 15px var(--font); cursor: pointer; white-space: nowrap; }
.nj-pill[aria-checked="true"] { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.nj-plano { display: grid; }
.nj-t { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1.5px solid var(--campo-line); }
.nj-t i { flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-strong); }
.nj-t > span, .nj-t > .nv-in { flex: 1; min-width: 0; font-size: 16px; }
.nj-tools { display: flex; flex-wrap: wrap; gap: 10px; }
.nj-tx-c { display: none; }
.nj-colar { display: grid; gap: 10px; padding: 12px 0; border-top: 1.5px solid var(--campo-line); }
.nj-ta { min-height: 130px; padding: 12px 14px; line-height: 1.45; }
.nj-colar__a { display: flex; gap: 10px; flex-wrap: wrap; }
.nj-nota { margin: 0; font-size: 14px; line-height: 1.4; opacity: .8; }
.nj-quadro { display: grid; gap: 16px; }
.nj-previa .kb-card { margin: 0; cursor: default; }
.nj-acoes { display: grid; gap: 10px; }
@media (max-width: 720px) {
  .nj .nv-fg .nv-c3 { grid-column: 1 / -1; }
  .nj-etapas { flex-wrap: nowrap; overflow-x: auto; margin: 0 -28px; padding: 0 28px 4px; scrollbar-width: none; }
  .nj-etapas::-webkit-scrollbar { display: none; }
  .nj .nv-fs .nv-dica { display: none; }
  .nj-tx-d { display: none; } .nj-tx-c { display: inline; }
  .nj-acoes { grid-template-columns: 1fr 1fr; }
  .nj-acoes .nj-cancelar { order: 1; } .nj-acoes .nj-criar { order: 2; }
}
.nj-quadro { padding: 28px; border-radius: var(--radius); }
@media (max-width: 720px) { .nj-quadro { padding: 22px; } }

/* Revisar e enviar no celular (canvas NovoRevisarCelular): título "Revisar e enviar", abas Celular/Computador, prévia da proposta em HTML, envio e mensagem de aprovação. */
.nv-rev { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.nv-rev .nv-envio { display: block; }
.nv-vista { display: flex; padding: 4px; border-radius: 24px; background: var(--bloco-painel); }
.nv-vista button { flex: 1; min-height: 44px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 15px; font-weight: 600; color: var(--on-painel-2); cursor: pointer; }
.nv-vista button[aria-selected="true"] { background: var(--on-painel); color: var(--bloco-painel); }
.nv-vp { padding: 18px; }
.nv-vp__q { position: relative; overflow: hidden; border-radius: 26px; background: var(--surface); }
.nv-vp__f { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; pointer-events: none; background: #fff; }
.nv-envio .nv-acoes { margin-top: 14px; gap: 10px; }
.nv-nota { margin: 14px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.nv-nota--i { margin: 10px 0 0; }
.nv-bolha { margin-top: 14px; padding: 14px 16px; border-radius: 20px 20px 20px 6px; background: var(--bloco-medio); color: var(--on-medio); font-size: 15px; line-height: 1.4; }
@media (max-width: 720px) {
  .nv-p2 .nv-steps, .nv-p2 .nv-rasc, .nv-p2 .nv-menuwrap, .nv-p2 .pghead__row > div > p { display: none; }
  .nv-p2 .pghead__acoes { display: none; }
}

/* 0.4.326: acabamento do Novo orçamento (prints do celular) */
/* dica ao lado do rótulo: o rótulo não quebra; a dica desce para a linha de baixo quando não cabe */
.nv-f > label { flex-wrap: wrap; white-space: nowrap; }
.nv-f > label em { white-space: normal; }
/* resposta "faltando" sem tom de alarme */
.nv-res dd.vazio { color: var(--ink-3); font-weight: 500; }
/* campos de dinheiro: R$ na frente, número à esquerda */
.nv-moeda { position: relative; }
.nv-moeda::before { content: "R$"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font: 600 15px var(--font); color: var(--ink-3); pointer-events: none; }
.nv-moeda .nv-in { padding-left: 46px; text-align: left; }
.nv .nv-moeda .nv-in.nv-in--valor { padding-left: 56px; text-align: left; }
.nv-moeda:has(.nv-in--valor)::before { left: 16px; font-size: 18px; }
.nv-fg--valor .nv-in { height: 68px; font-size: 22px; }
.nv .nv-fg--valor .nv-in.nv-in--valor { font-size: 30px; }
/* duração e validade: números curtos, sem campo largo */
.nv-dur .nv-in.num { text-align: left; }
.nv-dur--dias { grid-template-columns: 110px auto; justify-content: start; }
/* "Detalhar por item": uma linha com o interruptor, sem cartão dentro do cartão */
.nv-det { background: none; padding: 16px 0 0; border-radius: 0; border-top: 1.5px solid var(--campo-line); }
/* item aberto: campos sem borda amarela de erro (o foco já usa o amarelo) */
.nv-it__ti { border-color: var(--campo-line); }
.nv-it__tx { border-color: var(--campo-line); box-shadow: none; }
@media (pointer: coarse) { textarea.nv-in { resize: none; } .nv-it__drag { display: none; } }
@container (max-width: 720px) {
  /* barra fixa: o fundo continua até o menu, sem fresta */
  /* numeração só no passo de cima; as seções ficam sem número */
  .nv-fs__r > .nv-n { display: none; }
  .nv .nv-dica { margin-left: 0; }
  /* ação principal em destaque, as outras duas dividem a linha de baixo */
  .nv-tools .nv-tools__p { flex: 1 1 100%; justify-content: center; }
  .nv-tools .btn--ghost { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; padding-inline: 8px; gap: 6px; }
  .nv-itens__n { margin-left: 0; }
  .nv-fg--valor { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; }
}

/* 0.4.326: ritmo de tons no formulário: branco, bege, amarelo (Valor), branco e o resumo escuro. Só tokens; campos sempre claros. */
.nv-fs[aria-labelledby="nv-f2"] { background: var(--bloco-medio); color: var(--on-medio); --ink: var(--on-medio); --ink-2: #3A352F; --ink-3: #4F4943;
  --campo: #FBF9F6; --campo-line: rgba(31, 28, 25, .18); --line: rgba(31, 28, 25, .2); --line-strong: rgba(31, 28, 25, .35); --danger-ink: #A6232C; }
.nv-fs[aria-labelledby="nv-f3"] { background: var(--gold); color: var(--on-gold); --ink: var(--on-gold); --ink-2: rgba(25, 25, 23, .8); --ink-3: rgba(25, 25, 23, .64);
  --campo: #FBF9F6; --campo-line: rgba(25, 25, 23, .18); --line: rgba(25, 25, 23, .24); --line-strong: rgba(25, 25, 23, .4); --danger-ink: #8F1D25; }
.nv-fs[aria-labelledby="nv-f3"] .nv-in { color: #191917; }
.nv-fs[aria-labelledby="nv-f3"] .nv-sw { background: rgba(25, 25, 23, .28); }
.nv-fs[aria-labelledby="nv-f3"] .nv-sw i { background: #FBF9F6; }
.nv-fs[aria-labelledby="nv-f3"] .nv-sw.is-on { background: #191917; }
.nv-fs[aria-labelledby="nv-f3"] .nv-sw.is-on i { background: var(--gold); }
.nv-fs[aria-labelledby="nv-f3"] .nv-n { background: #191917; color: var(--gold); }
.nv-fs[aria-labelledby="nv-f2"] .btn--ghost { color: var(--on-medio); }

/* 0.4.326: item da proposta (celular e desktop) */
/* botões de apoio no bege: preenchimento claro em vez de contorno fraco */
.nv-fs[aria-labelledby="nv-f2"] .btn--ghost { background: #FBF9F6; border-color: transparent; color: var(--on-medio); }
.nv-fs[aria-labelledby="nv-f2"] .btn--ghost:hover { background: #fff; }
/* Concluir: a ação principal do item aberto */
.nv .nv-it__ok { background: #191917; color: #F4EFE8; border: 0; gap: 8px; }
.nv .nv-it__ok:hover { background: #000; color: #fff; }
.nv-it__ok .nv-sv .vx-svg { width: 16px; height: 16px; }
/* aviso quando ainda não há item */
.nv-itens__vz { padding: 18px 0 2px; border-top: 1.5px solid var(--campo-line); }
.nv-itens__vz b { display: block; font-size: 16px; font-weight: 600; }
.nv-itens__vz p { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); }
@container (max-width: 720px) {
  /* item aberto: o selo e os botões numa linha, título e texto na largura toda */
  .nv-it.is-aberto { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 12px; align-items: center; }
  .nv-it.is-aberto > .nv-n { grid-column: 1; grid-row: 1; }
  .nv-it.is-aberto > .nv-it__acoes { grid-column: 3; grid-row: 1; margin: 0; }
  .nv-it.is-aberto > .nv-it__c { grid-column: 1 / -1; grid-row: 2; }
  .nv-it__ti { width: 100%; }
  /* menos respiro vertical */
  .nv-it { padding: 16px 0; border-top-width: 1px; }
  .nv-it__fim { margin-top: 12px; }
  .nv-it__fim .btn { width: 100%; justify-content: center; }
  .nv-tools { margin-bottom: 0; }
  .nv-itens__vz { padding-top: 14px; border-top-width: 1px; }
}

/* ---- Novo job: paleta, etapa em grade e prévia perto do formulário (pedido do dono, 2026-10-24) ----
   Resumo em creme (o formulário), Plano em bege (bloco médio), prévia no painel escuro e "Criar job" no amarelo: a mesma
   sequência de tons da Visão geral. As variáveis de tinta são trocadas como em `.vp-medio`, para o conteúdo herdar. */
.nj-plano.is-vazio { display: block; }
.nj-vazio { display: none; margin: 0; padding: 4px 0 2px; font-size: 15px; line-height: 1.45; color: var(--ink-2); } /* no desktop quem explica é a dica sob o título */
.nj-fs--plano { background: var(--bloco-medio); color: var(--on-medio); --ink: var(--on-medio); --ink-2: #3A352F; --ink-3: #4F4943; --line: rgba(31,28,25,.2); --line-strong: rgba(31,28,25,.35); --campo-line: rgba(31,28,25,.18); --danger-ink: #7A1820; }
.nj-fs--plano .btn--ghost { color: var(--on-medio); border-color: rgba(31,28,25,.35); }
.nj-fs--plano .btn--ghost:hover { background: rgba(31,28,25,.08); }
.nv-in[aria-invalid="true"] { border-color: var(--danger-ink); box-shadow: inset 0 0 0 1px var(--danger-ink); }
.nv-erro { font-size: 13px; font-weight: 600; color: var(--danger-ink); }
/* a prévia do cartão: texto de exemplo legível (antes ficava quase apagado) */
.nj-cartao { color: var(--on-cartao); --ink: var(--on-cartao); --ink-2: var(--on-cartao-2); --ink-3: var(--on-cartao-2); --panel-ink: var(--on-cartao); } /* o cartão tem a tinta de cartão, não a do painel escuro em volta */
.nj.vp { gap: 18px; }
@media (max-width: 720px) {
  .nj-vazio { display: block; }
  /* as seis etapas à vista (antes rolavam para o lado e "Revisão cliente" ficava cortada) */
  .nj-etapas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; gap: 8px; }
  .nj-pill { min-height: 48px; padding: 0 6px; font-size: 14px; line-height: 1.15; text-align: center; white-space: normal; }
  /* ordem no celular: resumo, prévia (reflete o que se digita), plano, botões */
  .nv-obra.nj-obra, .nj .nv-obra { display: flex; flex-direction: column; gap: 14px; }
  .nj .nj-col, .nj .nv-lado { display: contents; }
  .nj-fs--resumo { order: 1; } .nj-quadro { order: 2; } .nj-fs--plano { order: 3; } .nj-acoes { order: 4; }
  .nj-acoes { align-self: stretch; width: 100%; }
  /* botões do plano com a mesma largura, como em Arquivos e links */
  .nj-tools { display: grid; grid-template-columns: 1fr 1fr; }
  .nj-tools .btn { justify-content: center; }
}