/* ============================================================
   proposta-editor.css — Proposal editor UI
   Form fields, repeatable blocks, presets, live PDF preview
   ============================================================ */

/* ---- Layout shell ----
   O editor ocupa exatamente a altura da área principal: o cabeçalho não
   rola e só os painéis internos rolam. Antes o corpo era fixo em
   calc(100vh - 56px) MAIS um cabeçalho de ~165px acima dele, o que
   estourava a viewport e criava duas barras de rolagem concorrentes. */
.pe-shell {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--vp-gray-50);
}

.pe {
  flex: 1;
  min-height: 0;
  display: grid;
  /* Coluna de preview mais generosa (era 360-440px): o zoom automático
     (.pe__preview-scaler) já cuida de encolher quando sobra pouco espaço,
     então dar mais largura de verdade deixa o conteúdo maior e legível
     em vez de ficar espremido num terço da tela. */
  grid-template-columns: minmax(0, 1fr) minmax(380px, 620px);
  gap: 0;
  position: relative;
  background: var(--vp-gray-50);
}
.pe--no-preview { grid-template-columns: minmax(0, 1fr); }

.pe__main {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  overflow: hidden;
  min-width: 0;
}

/* ---- Topbar ---- */
.pe-top {
  flex-shrink: 0;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.pe-top__crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px 0;
  font-size: 11.5px;
  color: var(--fg3);
}
.pe-top__back {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--fg2); cursor: pointer;
}
.pe-top__back:hover { color: var(--fg1); }
.pe-top__sep { color: var(--vp-gray-300); }
.pe-top__crumb-cur { color: var(--fg1); font-weight: 600; }
.pe-top__autosave {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; color: var(--fg3);
}
.pe-top__autosave .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--vp-success);
  animation: pulse-dot 2.5s ease-in-out infinite;
}

.pe-top__main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 24px 12px;
  flex-wrap: wrap;
}
.pe-top__id { min-width: 0; flex: 1; }
.pe-top__id h1 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.005em;
  line-height: 1.1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pe-top__chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pe-top__actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; flex-wrap: wrap; }
.pe-top__ghost {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 10px;
  background: none; border: 1px solid transparent;
  font-size: 12px; color: var(--fg2); cursor: pointer;
}
.pe-top__ghost:hover { color: var(--fg1); background: var(--vp-gray-50); border-color: var(--border); }

/* chips de contexto (Nº, Master ID, obra, total) */
.pe-chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 3px 8px;
  background: var(--vp-gray-50);
  border: 1px solid var(--border);
  max-width: 260px;
}
.pe-chip__k {
  font-size: 9px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg3); flex-shrink: 0;
}
.pe-chip__v {
  font-size: 12px; color: var(--fg1); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pe-chip--destaque { background: #000; border-color: #000; }
.pe-chip--destaque .pe-chip__k { color: rgba(255,255,255,.55); }
.pe-chip--destaque .pe-chip__v { color: var(--vp-yellow); }

/* status real da proposta */
.pe-top__status {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  background: var(--vp-gray-100); color: var(--fg2);
}
.pe-top__status.is-publicada { background: #EEF2FF; color: #4338CA; }
.pe-top__status.is-enviada { background: #E8F0FE; color: #1a4fa0; }
.pe-top__status.is-visualizada { background: var(--vp-warning-tint); color: var(--vp-warning-ink); }
.pe-top__status.is-aprovada { background: var(--vp-success-tint); color: var(--vp-success-ink); }
.pe-top__status.is-recusada,
.pe-top__status.is-expirada { background: #FDE8E8; color: #9f1239; }
.pe-top__status.is-revisao_solicitada { background: var(--vp-warning-tint); color: var(--vp-warning-ink); }

/* "Publicar" congelou uma versão oficial — sinal visual separado do status
   de envio/assinatura, porque são coisas diferentes (uma proposta pode
   estar "Enviada" e já ter 2 versões publicadas). */
.pe-top__publicado {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600; color: var(--vp-success-ink);
}

.pe-top__tabs { display: flex; gap: 0; padding: 0 24px; }

/* ---- Herança pelo Nº da Cotação ---- */
.pe-heranca { display: flex; gap: 8px; align-items: stretch; }
.pe-heranca .pe-input { max-width: 200px; }
.pe-heranca__btn {
  height: 36px; padding: 0 16px;
  background: #000; color: var(--vp-yellow);
  border: 0; cursor: pointer;
  font-family: var(--font-display); font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.pe-heranca__btn:hover:not(:disabled) { opacity: .85; }
.pe-heranca__btn:disabled { background: var(--vp-gray-200); color: var(--fg3); cursor: not-allowed; }
.pe-heranca__msg {
  margin-top: 8px; padding: 8px 10px;
  font-size: 12px; line-height: 1.45;
  border-left: 3px solid var(--vp-gray-300);
  background: var(--vp-gray-50); color: var(--fg2);
}
.pe-heranca__msg.is-ok { border-left-color: var(--vp-success); background: var(--vp-success-tint); color: var(--vp-success-ink); }
.pe-heranca__msg.is-aviso { border-left-color: var(--vp-warning); background: var(--vp-warning-tint); color: var(--vp-warning-ink); }
.pe-heranca__msg.is-erro { border-left-color: #9f1239; background: #FDE8E8; color: #9f1239; }

.pe__form-end {
  margin: 4px 0 0;
  padding: 14px 0 0;
  border-top: 1px dashed var(--border);
  font-size: 11px;
  color: var(--fg3);
  text-align: center;
}

/* ---- Overlay fullscreen do PDF (mesmo padrão da Ficha Técnica) ----
   A leitura de verdade e o "Salvar PDF"/"Imprimir" acontecem aqui, com a
   proposta em tamanho real — a coluna lateral (.pe__preview) é só um
   preview em miniatura com zoom automático (ver abaixo). */
.pe-pdf-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(14,14,14,.7);
  display: flex; flex-direction: column;
}
.pe-pdf-bar {
  flex-shrink: 0; height: 54px;
  background: #000;
  display: flex; align-items: center; gap: 14px;
  padding: 0 18px;
}
.pe-pdf-bar > span { color: #fff; font-size: 12.5px; font-weight: 600; }
.pe-pdf-actions { margin-left: auto; display: flex; gap: 10px; }
.pe-pdf-actions .btn--outline, .pe-pdf-actions .btn--ghost { color: #fff; border-color: rgba(255,255,255,.35); }
.pe-pdf-actions .btn--ghost:hover, .pe-pdf-actions .btn--outline:hover { background: rgba(255,255,255,.1); }
.pe-pdf-scroll {
  flex: 1; overflow: auto;
  padding: 24px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.pe-pdf-scroll .pe__preview-pages--overlay .pe__pdf { box-shadow: 0 16px 40px rgba(0,0,0,.4); }

/* ---- Impressão ----
   Sem isto, "PDF" chamava window.print() e saía a aplicação inteira
   (sidebar, menu, formulário). Agora imprime só as páginas da proposta —
   tanto pelo overlay quanto pela coluna lateral, se ela estiver visível.
   `body:has(.pe-pdf-overlay)` é obrigatório: este CSS também é carregado
   em assinar.html (página pública de assinatura), que reaproveita o
   preview da proposta mas nunca renderiza `.pe-pdf-overlay`. Sem o
   :has(), a regra escondia `#ci-sign-root` inteiro (único filho de
   body ali, e não bate com `.pe-pdf-overlay`) — incluindo o
   `.ci-print-doc` que o botão "Baixar (PDF)" da página pública precisa
   pra imprimir, o que gerava PDF em branco (achado 19/08). */
@media print {
  /* Sem isto o Chrome descarta background-image/background-color na
     impressão nativa por padrão (a menos que o usuário marque manualmente
     "Imprimir gráficos de plano de fundo" no diálogo) — é o que apagava a
     foto de capa e a foto de "Sobre a VerticalParts" (ambas via CSS
     background-image, não <img>), deixando vão em branco no lugar
     (achado 20/08, comparado com print real gerado em produção). */
  .pe-pdf-overlay * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  body:has(.pe-pdf-overlay) > *:not(.pe-pdf-overlay) { display: none !important; }
  .pe-pdf-overlay {
    position: static !important; inset: auto !important; background: #fff !important;
  }
  .pe-pdf-bar { display: none !important; }
  .pe-pdf-scroll {
    display: block !important; padding: 0 !important; overflow: visible !important;
  }
  /* O overlay renderiza o preview com zoom 0.5 (ver proposta-preview.jsx:
     em overlay o ResizeObserver não roda e o estado inicial fica em 0.5).
     Sem zerar isso aqui, a impressão nativa sairia na METADE do tamanho —
     o antigo gerador via html2canvas não sofria disso porque lia
     offsetWidth, que ignora zoom (achado 19/08). */
  .pe__preview-scaler { zoom: 1 !important; width: auto !important; }
  .pe__preview-wrap, .pe__preview-pages { display: block !important; }

  /* ---- Paginação sem páginas fantasma ----
     O layout de tela reserva 130px de padding no rodapé de `.pe__pdf-inner`
     porque `.pdf-page-footer` é absoluto (bottom: 0). Na impressão isso
     virava altura VAZIA além dos 297mm da folha: uma seção que terminava
     em 280mm virava caixa de ~314mm, e os 17mm de puro padding
     transbordavam pra uma segunda folha só com o fundo — as "páginas
     fantasma" (2 e 20 do PDF analisado em 20/08). O mesmo efeito, com
     conteúdo real curto sobrando, produzia a "página órfã" (uma linha
     solta + rodapé, pág. 12).
     Correção: na impressão a página vira flex-column, o rodapé entra no
     fluxo empurrado por margin-top:auto (continua colado embaixo) e o
     padding reservado some. Assim a caixa só passa de 297mm quando há
     CONTEÚDO de verdade transbordando — nunca por espaço vazio. Também
     troco break-after (depois) por break-before (antes) na página
     seguinte: `break-after: always` na última página gerava uma folha
     extra em branco no fim. */
  .pe__pdf {
    max-width: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 297mm !important;
    aspect-ratio: auto !important;
    box-shadow: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    break-after: auto !important;
    page-break-after: auto !important;
    break-inside: auto;
  }
  .pe__pdf + .pe__pdf { break-before: page; page-break-before: always; }
  .pe__pdf-inner { padding-bottom: 25px !important; flex: 1 1 auto !important; }
  .pe__pdf-capa { flex: 1 1 auto !important; }
  .pdf-page-footer {
    position: static !important;
    margin-top: auto !important;
  }
  /* Blocos que nunca devem partir no meio entre duas folhas. */
  .pdf-table, .pdf-table2, .pdf-total, .pdf-spec-grid,
  .pdf-page-header, .pdf-page-footer { break-inside: avoid; }

  /* Instrução interna some; texto neutro pro cliente aparece. */
  .pe-vazio-tela { display: none !important; }
  .pe-vazio-print { display: block !important; }
  @page { size: A4; margin: 0; }
}

/* Fora da impressão é o contrário: o vendedor vê a instrução. */
.pe-vazio-print { display: none; }

/* ---- Responsivo: as 3 colunas fixas espremiam o formulário ---- */
@media (max-width: 1400px) {
  .pe { grid-template-columns: minmax(0, 1fr); }
  .pe__preview { display: none; }
  /* nessa largura o preview não cabe, então o botão não teria efeito */
  .pe-top__ghost--preview { display: none; }
}
@media (max-width: 1100px) {
  .pe__main { grid-template-columns: minmax(0, 1fr); }
  .pe__sidenav { display: none; }
  .pe__form { padding: 20px 20px 64px; }
  .pe-top__crumb, .pe-top__main, .pe-top__tabs { padding-left: 16px; padding-right: 16px; }
  .pe-top__id h1 { font-size: 20px; }
}

.pe__sidenav {
  background: #fff;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 16px 0;
  position: relative;
}
.pe__sidenav-group {
  padding: 12px 16px 6px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg3);
  margin-top: 10px;
}
.pe__sidenav-group:first-child { margin-top: 0; padding-top: 0; }
.pe__sidenav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 12.5px;
  color: var(--fg2);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: all var(--dur-fast) var(--ease-out);
}
.pe__sidenav-item:hover { color: var(--fg1); background: var(--vp-gray-50); }
.pe__sidenav-item.is-active {
  color: var(--fg1);
  background: #FFFBE6;
  border-left-color: var(--vp-yellow);
  font-weight: 600;
}
.pe__sidenav-item.is-done {
  color: var(--vp-success);
}
.pe__sidenav-item .pe__sidenav-icon {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pe__sidenav-item .pe__sidenav-icon svg { width: 16px; height: 16px; stroke-width: 1.7; }
.pe__sidenav-item.is-done .pe__sidenav-icon svg { color: var(--vp-success); }
.pe__sidenav-item.is-active .pe__sidenav-icon svg { color: var(--vp-yellow-press); }
.pe__sidenav-progress {
  margin: 12px 16px;
  padding: 12px;
  background: var(--vp-gray-50);
  border-left: 2px solid var(--vp-yellow);
}
.pe__sidenav-progress-lbl { font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--fg3); }
.pe__sidenav-progress-val { font-family: var(--font-display); font-weight: 800; font-size: 24px; margin: 4px 0 6px; }

/* Árvore do "Conteúdo da Proposta" dentro do próprio menu lateral —
   mesmo espírito da barra lateral da Ficha Técnica (categoria expansível
   + checkbox por campo direto no menu). */
.pe__conttree-badge {
  font-size: 10px; font-weight: 800; background: var(--vp-gray-100); color: var(--fg2);
  border-radius: 999px; padding: 1px 7px; margin-left: 6px; flex-shrink: 0;
}
.pe__conttree-badge.sm { font-size: 9px; padding: 0 5px; }
.pe__conttree-chev { color: var(--fg3); transition: transform .15s; flex-shrink: 0; }
.pe__conttree-chev.on { transform: rotate(90deg); }
.pe__conttree-body { padding: 2px 0 6px 14px; }
.pe__conttree-cat { margin-bottom: 2px; }
.pe__conttree-cathead-row { display: flex; align-items: center; }
.pe__conttree-cathead {
  flex: 1; display: flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer;
  padding: 5px 4px; font-size: 11.5px; font-weight: 600; color: var(--fg2); text-align: left;
}
.pe__conttree-cathead:hover { color: var(--fg1); }
.pe__conttree-fields { padding: 0 0 4px 18px; display: flex; flex-direction: column; gap: 1px; }
.pe__conttree-fldrow { display: flex; align-items: center; gap: 2px; }
.pe__conttree-fld { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; padding: 3px 4px; border-radius: 6px; cursor: pointer; font-size: 11px; color: var(--fg3); }
.pe__conttree-fld:hover { background: var(--vp-gray-50); }
.pe__conttree-fld.on { color: var(--fg1); }
.pe__conttree-fld input { accent-color: var(--vp-yellow); width: 12px; height: 12px; cursor: pointer; flex-shrink: 0; }
.pe__conttree-fld span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe__conttree-rm {
  border: none; background: none; color: var(--fg3); cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 6px; flex-shrink: 0;
}
.pe__conttree-rm:hover { color: var(--vp-danger); }
.pe__conttree-rm.sm { font-size: 12px; padding: 1px 5px; }
.pe__conttree-addfield, .pe__conttree-addcat {
  display: block; background: none; border: 1px dashed var(--border); border-radius: 6px; color: var(--fg3); cursor: pointer;
  font-size: 10.5px; font-weight: 600; padding: 4px 8px; text-align: left;
}
.pe__conttree-addfield { margin: 2px 0 4px 18px; }
.pe__conttree-addcat { margin: 4px 16px 0; }
.pe__conttree-addfield:hover, .pe__conttree-addcat:hover { border-color: var(--fg3); color: var(--fg2); }

.pe__form {
  overflow-y: auto;
  /* 96px embaixo era pra folgar a barra de ações fixa que saiu daqui */
  padding: 20px 28px 48px;
}
.pe__form::-webkit-scrollbar { width: 10px; }
.pe__form::-webkit-scrollbar-thumb { background: var(--vp-gray-300); }

/* ---- Equipment tabs ---- */
.pe__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 9px;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--fg3);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.pe__tab svg { width: 18px; height: 18px; stroke-width: 1.7; }
.pe__tab:hover { color: var(--fg1); }
.pe__tab.is-active { color: var(--fg1); border-bottom-color: var(--vp-yellow); }
.pe__tab .pe__tab-sub { font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; text-transform: uppercase; color: var(--fg3); letter-spacing: .14em; }

/* ---- Sections ---- */
.pe__section { background: #fff; border: 1px solid var(--border); margin-bottom: 16px; }
.pe__section-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--vp-gray-50);
  cursor: pointer;
  user-select: none;
}
.pe__section-head .pe__section-num {
  width: 28px; height: 28px;
  background: #000; color: var(--vp-yellow);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.pe__section-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .01em;
  flex: 1;
}
.pe__section-head .pe__section-sub {
  font-size: 11px;
  color: var(--fg3);
  font-family: var(--font-mono);
  letter-spacing: .04em;
}
.pe__section-head .pe__section-chev { transition: transform var(--dur-fast) var(--ease-out); color: var(--fg3); }
.pe__section.collapsed .pe__section-head .pe__section-chev { transform: rotate(-90deg); }
.pe__section-body { padding: 22px 20px; }
.pe__section.collapsed .pe__section-body { display: none; }

/* fill state pill */
.pe__section-fill {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 2px 8px;
  background: var(--vp-gray-100);
  color: var(--fg3);
}
.pe__section-fill.partial { background: var(--vp-warning-tint); color: var(--vp-warning-ink); }
.pe__section-fill.full { background: var(--vp-success-tint); color: var(--vp-success-ink); }

/* ---- Form grid ---- */
.pe-grid { display: grid; gap: 12px 14px; }
.pe-grid.cols-1 { grid-template-columns: 1fr; }
.pe-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.pe-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.pe-grid.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.pe-grid.cols-12-3-3 { grid-template-columns: 2fr 1fr 1fr; }
.pe-grid.cols-3-1 { grid-template-columns: 3fr 1fr; }
.pe-grid.cols-2-1 { grid-template-columns: 2fr 1fr; }
.pe-grid .span-2 { grid-column: span 2; }
.pe-grid .span-3 { grid-column: span 3; }
.pe-grid .span-4 { grid-column: span 4; }
.pe-grid .span-full { grid-column: 1 / -1; }

/* ---- Field ---- */
.pe-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pe-field > label, .pe-field-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg2);
}
.pe-field-label .pe-req { color: var(--vp-danger); }
.pe-field-label .pe-tag {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .04em;
  background: var(--vp-gray-100);
  color: var(--fg3);
  padding: 1px 5px;
  text-transform: lowercase;
}
.pe-input {
  display: block;
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  background: #fff;
  font-size: 13px;
  color: var(--fg1);
  outline: none;
  transition: all var(--dur-fast) var(--ease-out);
  border-radius: 0;
  font-family: var(--font-sans);
}
.pe-input:focus, .pe-input:focus-visible {
  border-color: var(--vp-yellow);
  box-shadow: inset 0 0 0 1px var(--vp-yellow), 0 0 0 3px rgba(245,196,0,.18);
}
.pe-input:hover:not(:focus) { border-color: var(--fg2); }
textarea.pe-input { height: auto; padding: 10px 12px; resize: vertical; min-height: 80px; line-height: 1.55; font-family: var(--font-sans); }
select.pe-input {
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg2) 50%), linear-gradient(135deg, var(--fg2) 50%, transparent 50%);
  background-position: calc(100% - 14px) 16px, calc(100% - 9px) 16px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}
.pe-input[disabled] { background: var(--vp-gray-50); color: var(--fg3); cursor: not-allowed; }
.pe-input.is-calc {
  background: #000;
  color: var(--vp-yellow);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  border-color: #000;
}

/* prefix wrapper (R$, etc) */
.pe-input-grp { position: relative; }
.pe-input-grp .pe-input { padding-left: 36px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.pe-input-grp .pe-input-prefix {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--fg3);
  pointer-events: none;
  letter-spacing: .04em;
}
.pe-input-grp.has-suffix .pe-input { padding-right: 40px; }
.pe-input-grp .pe-input-suffix {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--fg3);
  pointer-events: none;
}
.pe-field-help { font-size: 11px; color: var(--fg3); margin-top: 2px; }

/* placeholder for empty dropdown */
select.pe-input.is-empty {
  color: var(--fg3);
  font-style: italic;
}

/* ---- Preset selector ---- */
.pe-presets {
  display: flex; gap: 0;
  border: 1px solid var(--border-strong);
  background: #fff;
}
.pe-presets button {
  flex: 1;
  background: #fff;
  border: 0;
  border-right: 1px solid var(--border);
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg2);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}
.pe-presets button:last-child { border-right: 0; }
.pe-presets button:hover { background: var(--vp-gray-50); color: var(--fg1); }
.pe-presets button.is-active { background: #000; color: var(--vp-yellow); }
.pe-presets button .pe-presets-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--fg3);
  text-transform: none;
}
.pe-presets button.is-active .pe-presets-sub { color: rgba(255,255,255,.6); }

/* ---- Repeatable block ---- */
.pe-rep {
  border: 1px dashed var(--border-strong);
  background: var(--vp-gray-50);
  margin-bottom: 12px;
  position: relative;
}
.pe-rep__head {
  padding: 10px 14px;
  background: #000;
  color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.pe-rep__head .pe-rep__idx {
  background: var(--vp-yellow);
  color: #000;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  margin-right: 10px;
  letter-spacing: .04em;
}
.pe-rep__head-actions { display: flex; gap: 4px; }
.pe-rep__head-actions button {
  background: rgba(255,255,255,.08);
  border: 1px solid transparent;
  color: #fff;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: all var(--dur-fast) var(--ease-out);
}
.pe-rep__head-actions button:hover { background: rgba(255,255,255,.16); }
.pe-rep__head-actions button.danger:hover { background: var(--vp-danger); }
.pe-rep__body { padding: 16px; background: #fff; }

.pe-rep-add {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  padding: 14px;
  background: #fff;
  border: 2px dashed var(--border-strong);
  cursor: pointer;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg2);
  transition: all var(--dur-fast) var(--ease-out);
}
.pe-rep-add:hover { border-color: var(--vp-yellow); color: var(--vp-yellow-press); background: #FFFBE6; }

/* ---- Parcela row (special compact repeatable) ---- */
.pe-parcela-row {
  display: grid;
  grid-template-columns: 28px 2fr 1fr 28px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.pe-parcela-row__idx {
  background: var(--vp-gray-100);
  color: var(--fg2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 36px;
}
.pe-parcela-row__del {
  width: 28px; height: 36px;
  background: transparent; color: var(--fg3); border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.pe-parcela-row__del:hover { color: var(--vp-danger); border-color: var(--vp-danger); }

/* ---- Totais block ---- */
.pe-totais {
  margin-top: 14px;
  background: #000;
  color: #fff;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 24px;
  position: relative;
}
.pe-totais::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 24px; height: 3px;
  background: var(--vp-yellow);
}
.pe-totais-row { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; font-size: 12px; }
.pe-totais-row b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 14px; }
.pe-totais-row.final { grid-column: span 2; border-top: 2px solid var(--vp-yellow); margin-top: 8px; padding-top: 12px; }
.pe-totais-row.final span { font-size: 11px; font-weight: 800; color: var(--vp-yellow); letter-spacing: .14em; text-transform: uppercase; }
.pe-totais-row.final b { color: var(--vp-yellow); font-size: 22px; }

@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* ---- PDF live preview panel ----
   Mesmo padrão da Ficha Técnica: .pe__preview-wrap mede o espaço disponível
   (ResizeObserver, ver proposta-preview.jsx) e .pe__preview-scaler aplica
   `zoom` sobre o conteúdo inteiro — cresce/encolhe mantendo proporção, em
   vez do max-width:380px fixo que deixava a fonte minúscula sempre. */
.pe__preview {
  background: var(--vp-gray-200);
  display: flex; flex-direction: column;
  min-height: 0;
  position: relative;
  border-left: 1px solid var(--border);
}
.pe__preview-head {
  flex-shrink: 0;
  background: var(--vp-gray-200);
  padding: 12px 24px;
  z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--vp-gray-300);
}
.pe__preview-head h4 { margin: 0; font-family: var(--font-display); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.pe__preview-wrap { flex: 1; overflow: auto; padding: 14px 0 64px; }
/* 210mm = largura física real da página (.pe__pdf); o zoom (calculado em
   proposta-preview.jsx) só ENCOLHE esse bloco pra caber no espaço
   disponível — nunca amplia além do tamanho real. */
.pe__preview-scaler { width: 210mm; margin: 0 auto; }
.pe__preview-pages {
  display: flex; flex-direction: column; gap: 14px;
  align-items: center;
}
/* Página em tamanho FÍSICO real (210×297mm — A4 retrato), igual à Ficha
   Técnica (.ft-ficha) e ao sistema de referência (002_proposta_comercial,
   que também gera PDF via html2canvas+jsPDF, mas a partir de páginas já
   desenhadas em tamanho de folha real). Antes cada página era desenhada
   numa largura de "miniatura" (380px, fontes de 6.5-8px) e só depois
   esticada pro tamanho de uma folha A4 no PDF — daí o borrão (pouca
   resolução) e o texto desproporcional. Com a página já nascendo do
   tamanho real, a captura do html2canvas usa a resolução nativa do
   elemento (sem esticar depois) e a tipografia abaixo já está calibrada
   pro tamanho físico certo. */
.pe__pdf {
  width: 210mm;
  min-height: 297mm;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  position: relative;
  font-family: var(--font-sans);
  color: #29261b;
  overflow: hidden;
  box-sizing: border-box;
}
.pe__pdf-pgnum {
  position: absolute;
  bottom: 25px;
  right: 32px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--fg3);
  letter-spacing: .04em;
}
.pe__pdf-pgmark {
  position: absolute;
  top: 25px;
  left: 28px;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg3);
}

/* Capa — a foto usa altura fixa (mm), não aspect-ratio: é a ÚNICA página
   do documento com aspect-ratio, e era a ÚNICA que perdia conteúdo na
   impressão do Firefox mesmo depois de trocar o grid da grade por flex
   (achado 20/08) — sinal de que a causa real era aspect-ratio dentro de
   um contexto de paginação, não grid em si. 118mm ≈ 210mm × 9/16,
   mesma proporção visual de antes, só que sem a propriedade que o
   Firefox mistrata ao paginar. */
.pe__pdf-capa { padding: 0; }
.pe__pdf-capa-img {
  width: 100%; height: 118mm;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* padding-bottom reduzido de 58 pra 34: a capa (foto + título + grid +
   rodapé de contato) estava passando de 297mm em produção — o rodapé de
   contato vazava pra uma 2ª página quase em branco antes da página "Sobre
   a VerticalParts" (achado 20/08, comparando PDF real gerado x código). */
.pe__pdf-capa-body { padding: 34px 58px 34px; }
.pe__pdf-capa-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 66px;
  line-height: .95;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: #29261b;
  margin: 0 0 28px;
}
/* flex, não grid: o Firefox (cairo) descarta em silêncio conteúdo em
   display:grid que ultrapassa a página na impressão, em vez de deixar
   passar pra próxima como o Chrome faz — foi assim que a grade
   Nº da Proposta/Vendedor/Contato inteira sumiu de um PDF gerado no
   Firefox (achado 20/08, comparando com o mesmo PDF gerado no Chrome,
   onde a grade aparece normal). flex-wrap com os itens a 50% reproduz
   a mesma disposição 2 colunas × 4 linhas do grid original. */
.pe__pdf-capa-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 13px 38px;
  font-size: 17px;
  line-height: 1.4;
}
.pe__pdf-capa-grid dt, .pe__pdf-capa-grid dd {
  flex: 0 0 calc(50% - 19px);
}
.pe__pdf-capa-grid dt {
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #29261b;
  margin-top: 8px;
}
.pe__pdf-capa-grid dd { margin: 0; color: var(--vp-yellow-press); font-weight: 600; }
.pe__pdf-capa-foot {
  display: flex; justify-content: space-between;
  margin-top: 17px;
  font-size: 15px;
  color: #29261b;
  font-weight: 600;
}
.pe__pdf-capa-foot span { display: inline-flex; align-items: center; gap: 8px; }

/* Inner page */
.pe__pdf-inner { padding: 63px 58px 130px; font-size: 15.5px; line-height: 1.55; color: #333; }
.pe__pdf-inner .pdf-h2 { font-family: var(--font-display); font-size: 29px; font-weight: 800; text-transform: uppercase; margin: 0 0 8px; color: #000; }
.pe__pdf-inner .pdf-h3 { font-family: var(--font-display); font-size: 23px; font-weight: 800; text-transform: uppercase; margin: 25px 0 8px; color: #000; border-bottom: 1px solid #ddd; padding-bottom: 4px; }
.pe__pdf-inner .pdf-eyebrow { font-size: 14px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--vp-yellow-press); margin-bottom: 8px; }
.pe__pdf-inner .pdf-rule { width: 50px; height: 3px; background: var(--vp-yellow); margin: 8px 0 17px; }
.pe__pdf-inner p { margin: 0 0 8px; font-size: 15px; line-height: 1.5; }
.pe__pdf-inner .pdf-spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 13px; border-top: 1px solid #ddd; }
.pe__pdf-inner .pdf-spec-grid > div { padding: 8px 0; border-bottom: 1px solid #ddd; font-size: 15px; display: flex; justify-content: space-between; gap: 17px; }
.pe__pdf-inner .pdf-spec-grid > div span { color: var(--fg3); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 14px; }
.pe__pdf-inner .pdf-spec-grid > div b { color: #000; font-weight: 700; text-align: right; max-width: 60%; }
.pe__pdf-inner .pdf-spec-grid > div:nth-child(odd) { border-right: 1px solid #ddd; padding-right: 17px; }
.pe__pdf-inner .pdf-spec-grid > div:nth-child(even) { padding-left: 17px; }
.pe__pdf-inner .pdf-table { width: 100%; border-collapse: collapse; margin-top: 13px; font-size: 15px; }
.pe__pdf-inner .pdf-table th { background: #000; color: var(--vp-yellow); padding: 8px 13px; text-align: left; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }
.pe__pdf-inner .pdf-table td { padding: 8px 13px; border-bottom: 1px solid #eee; }
.pe__pdf-inner .pdf-table tfoot td { background: var(--vp-gray-100); font-weight: 800; }
.pe__pdf-inner .pdf-total {
  margin-top: 17px;
  background: var(--vp-yellow);
  color: #000;
  padding: 17px 21px;
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-display);
}
.pe__pdf-inner .pdf-total span { font-size: 17px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.pe__pdf-inner .pdf-total b { font-size: 29px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pe__pdf-inner .pdf-footer {
  position: absolute; bottom: 25px; left: 58px; right: 58px;
  display: flex; justify-content: space-between;
  font-size: 14px;
  color: var(--fg3);
  border-top: 1px solid #ddd;
  padding-top: 8px;
}

/* hover ring on focused field's matching preview row */
.pe-hl { background: #FFFBE6; box-shadow: inset 3px 0 0 0 var(--vp-yellow); }

/* ---- Equipment-specific accents (the cover triangle) ---- */
.pe__pdf-capa[data-eq="elevador"] .pe__pdf-capa-img { background-image: url("../assets/capa-elevador.png"); }
.pe__pdf-capa[data-eq="escada"] .pe__pdf-capa-img { background-image: url("../assets/capa-escada-rolante.png"); }
.pe__pdf-capa[data-eq="esteira"] .pe__pdf-capa-img { background-image: url("../assets/capa-esteira-rolante.png"); }
.pe__pdf-capa-img { background-position: top center; }

/* Página "Sobre a VerticalParts" — mesma foto de capa do equipamento,
   embaixo do título "Elevando Você e o Seu Negócio". Antes era uma tarja
   preta lisa (placeholder nunca preenchido). */
.pe__pdf-sobre-img {
  width: 100%; height: 190px; margin-bottom: 25px;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  background-color: #111; /* fallback enquanto a imagem carrega / se faltar */
}
.pe__pdf-sobre-img[data-eq="elevador"] { background-image: url("../assets/capa-elevador.png"); }
.pe__pdf-sobre-img[data-eq="escada"] { background-image: url("../assets/capa-escada-rolante.png"); }
.pe__pdf-sobre-img[data-eq="esteira"] { background-image: url("../assets/capa-esteira-rolante.png"); }

/* ---- Small empty placeholder ---- */
.pe-empty {
  font-size: 11px;
  color: var(--fg3);
  font-style: italic;
}

/* ============================================================
   Estrutura das páginas internas — igual ao PDF real de referência
   (verticalpartsIA/002_proposta_comercial, "VP Proposta Comercial"):
   logo + tagline + nº da proposta no topo, endereço/telefones/e-mail +
   barra colorida no rodapé, repetidos em toda página de conteúdo
   (exceto a capa). Paleta em navy (não preto/amarelo da Ficha Técnica —
   é a cor real usada nas propostas que os clientes recebem).
   ============================================================ */
.pdf-navy { color: #1b2a4a; }

.pdf-page-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding-bottom: 13px; margin-bottom: 25px;
  border-bottom: 1px solid #ddd;
}
.pdf-page-header-brand img { height: 30px; display: block; }
.pdf-page-header-brand span {
  display: block; margin-top: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #777;
}
.pdf-page-header-num { text-align: right; }
.pdf-page-header-num span {
  display: block; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #777;
}
.pdf-page-header-num b { display: block; font-size: 19px; font-weight: 800; color: #1b2a4a; margin-top: 4px; }

/* Rodapé fixo no fim de cada página (fora do fluxo do conteúdo) */
.pdf-page-footer { position: absolute; bottom: 0; left: 0; right: 0; }
.pdf-page-footer-info {
  display: flex; justify-content: space-between; gap: 21px;
  padding: 17px 58px 13px;
  font-size: 12.5px; color: #444; line-height: 1.5;
}
.pdf-page-footer-info > div { display: flex; gap: 8px; align-items: flex-start; }
.pdf-page-footer-bar { height: 13px; display: flex; }
.pdf-page-footer-bar span:first-child { width: 15%; background: #1a1a1a; }
.pdf-page-footer-bar span:last-child { flex: 1; background: var(--vp-yellow); }

/* Título de seção com regra amarela embaixo — mesma peça em toda página */
.pdf-sec-title { font-family: var(--font-display); font-size: 26px; font-weight: 800; text-transform: uppercase; color: #1b2a4a; margin: 0 0 8px; }
.pdf-sec-rule { width: 100%; height: 1px; background: #ddd; margin: 0 0 25px; }
.pdf-sub-title { font-size: 16px; font-weight: 800; text-transform: uppercase; color: #1b2a4a; margin: 25px 0 8px; }
.pdf-sub-title:first-child { margin-top: 0; }

/* Caixa "Dados do Cliente / Dados da Obra" — fundo claro + barra à esquerda */
.pdf-box { background: #f5f6f8; border-left: 3px solid #1b2a4a; padding: 21px 25px; margin: 13px 0 25px; }
.pdf-box p { margin: 0 0 6px; font-size: 15px; line-height: 1.6; color: #333; }
.pdf-box p:last-child { margin-bottom: 0; }

/* Listas com marcador (Benefícios, Diferenciais, Responsabilidades) */
.pdf-list { margin: 0; padding-left: 19px; list-style: disc; }
.pdf-list li { font-size: 15px; line-height: 1.6; margin-bottom: 6px; color: #333; }

/* Item nomeado (Recursos Inclusos, Infraestrutura): NOME em negrito + parágrafo */
.pdf-named-item { margin-bottom: 17px; }
.pdf-named-item b { display: block; font-size: 15px; text-transform: uppercase; color: #1b2a4a; margin-bottom: 4px; }
.pdf-named-item p { margin: 0; font-size: 15px; line-height: 1.6; color: #333; }

/* Tabela (Especificações/Acabamento/Valores) — cabeçalho cinza claro */
.pdf-table2 { width: 100%; border-collapse: collapse; margin-top: 8px; }
.pdf-table2 th { background: #eef0f3; text-align: left; padding: 10px 15px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #333; border-bottom: 1px solid #ddd; }
.pdf-table2 td { padding: 10px 15px; font-size: 15px; color: #333; border-bottom: 1px solid #eee; }
.pdf-table2 tr:nth-child(even) td { background: #fafafa; }
.pdf-table2 .pdf-total-row td { font-weight: 800; color: #1b2a4a; background: #fff !important; border-top: 2px solid #1b2a4a; border-bottom: none; }

/* Fotos do equipamento */
.pdf-foto { margin-bottom: 34px; text-align: center; }
.pdf-foto img { max-width: 100%; max-height: 340px; object-fit: contain; }

/* Assinatura (última página) */
.pdf-assinaturas { display: flex; gap: 50px; margin-top: 84px; }
.pdf-assinatura { flex: 1; }
.pdf-assinatura-linha { border-top: 1px solid #999; margin-bottom: 8px; }
.pdf-assinatura b { display: block; font-size: 14px; color: #1b2a4a; }
.pdf-assinatura span { font-size: 13px; color: #777; }

/* ============================================================
   Acabamentos dinâmicos (categorias/campos com checkbox "ativo" —
   mesmo padrão da Ficha Técnica, engenharia/ficha-tecnica.css)
   ============================================================ */
.pe-hint { font-size: 12px; color: var(--fg3); padding: 8px 0; }

.pe-acab-cat { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.pe-acab-cat-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pe-acab-cat-nome { font-size: 13px; font-weight: 600; color: var(--fg1); }

.pe-acab-fields { display: flex; flex-direction: column; gap: 2px; }
.pe-acab-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 4px 6px; border-radius: 8px; }
.pe-acab-row:hover { background: var(--vp-gray-50); }

.pe-acab-check { display: flex; align-items: center; gap: 8px; cursor: pointer; flex: 1; min-width: 220px; }
.pe-acab-check input { accent-color: var(--vp-yellow); width: 14px; height: 14px; cursor: pointer; }
.pe-acab-check span { font-size: 12.5px; color: var(--fg2); }
.pe-acab-check.on span { color: var(--fg1); font-weight: 600; }

.pe-acab-value { flex-basis: 100%; padding-left: 22px; }
.pe-acab-value .pe-input { max-width: 360px; }

.pe-acab-rm {
  border: none; background: none; color: var(--fg3); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 2px 6px; border-radius: 6px;
}
.pe-acab-rm:hover { color: var(--vp-danger); background: var(--vp-gray-100); }

.pe-acab-addfield, .pe-acab-addcat {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px dashed var(--border); background: none; color: var(--fg2);
  font-size: 12px; padding: 7px 12px; border-radius: 8px; cursor: pointer; margin-top: 8px;
}
.pe-acab-addfield:hover, .pe-acab-addcat:hover { background: var(--vp-gray-50); border-color: var(--fg3); }
.pe-acab-addcat { border-style: solid; }