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

/* ---- Layout shell ---- */
.pe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 0;
  height: calc(100vh - 56px);
  position: relative;
  margin: -28px -32px 0;
  background: var(--vp-gray-50);
}

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

.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; }

.pe__form {
  overflow-y: auto;
  padding: 24px 32px 96px;
}
.pe__form::-webkit-scrollbar { width: 10px; }
.pe__form::-webkit-scrollbar-thumb { background: var(--vp-gray-300); }

/* ---- Equipment tabs ---- */
.pe__tabs {
  display: flex;
  gap: 0;
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 5;
  margin: -24px -32px 24px;
  padding: 0 32px;
}
.pe__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px 12px;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  font-family: var(--font-display);
  font-size: 16px;
  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; }

/* ---- Action bar (bottom fixed inside editor) ---- */
.pe__actionbar {
  position: sticky;
  bottom: 0;
  left: 0;
  background: #fff;
  border-top: 1px solid var(--border);
  padding: 12px 32px;
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0 -32px;
  z-index: 4;
}
.pe__actionbar .pe__autosave {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg3);
  display: flex; align-items: center; gap: 6px;
}
.pe__actionbar .pe__autosave .dot {
  width: 8px; height: 8px;
  background: var(--vp-success);
  border-radius: 50%;
  animation: pulse-dot 2.5s ease-in-out infinite;
}
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* ---- PDF live preview panel ---- */
.pe__preview {
  background: var(--vp-gray-200);
  overflow-y: auto;
  padding: 24px 24px 64px;
  position: relative;
  border-left: 1px solid var(--border);
}
.pe__preview-head {
  position: sticky;
  top: 0;
  background: var(--vp-gray-200);
  margin: -24px -24px 16px;
  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-pages {
  display: flex; flex-direction: column; gap: 14px;
  align-items: center;
}
.pe__pdf {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1 / 1.414;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  position: relative;
  font-family: var(--font-sans);
  color: #29261b;
  overflow: hidden;
}
.pe__pdf-pgnum {
  position: absolute;
  bottom: 12px;
  right: 16px;
  font-family: var(--font-sans);
  font-size: 8px;
  color: var(--fg3);
  letter-spacing: .04em;
}
.pe__pdf-pgmark {
  position: absolute;
  top: 12px;
  left: 14px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg3);
}

/* Capa */
.pe__pdf-capa { padding: 0; }
.pe__pdf-capa-img {
  width: 100%; height: 60%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.pe__pdf-capa-body { padding: 20px 28px 28px; }
.pe__pdf-capa-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  line-height: .95;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: #29261b;
  margin: 0 0 14px;
}
.pe__pdf-capa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 18px;
  font-size: 8px;
  line-height: 1.4;
}
.pe__pdf-capa-grid dt {
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #29261b;
  margin-top: 4px;
}
.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: 8px;
  font-size: 7px;
  color: #29261b;
  font-weight: 600;
}
.pe__pdf-capa-foot span { display: inline-flex; align-items: center; gap: 4px; }

/* Inner page */
.pe__pdf-inner { padding: 30px 28px 28px; font-size: 7.5px; line-height: 1.55; color: #333; }
.pe__pdf-inner .pdf-h2 { font-family: var(--font-display); font-size: 14px; font-weight: 800; text-transform: uppercase; margin: 0 0 4px; color: #000; }
.pe__pdf-inner .pdf-h3 { font-family: var(--font-display); font-size: 11px; font-weight: 800; text-transform: uppercase; margin: 12px 0 4px; color: #000; border-bottom: 1px solid #ddd; padding-bottom: 2px; }
.pe__pdf-inner .pdf-eyebrow { font-size: 6.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--vp-yellow-press); margin-bottom: 4px; }
.pe__pdf-inner .pdf-rule { width: 24px; height: 2px; background: var(--vp-yellow); margin: 4px 0 8px; }
.pe__pdf-inner p { margin: 0 0 4px; font-size: 7px; line-height: 1.5; }
.pe__pdf-inner .pdf-spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 6px; border-top: 1px solid #ddd; }
.pe__pdf-inner .pdf-spec-grid > div { padding: 4px 0; border-bottom: 1px solid #ddd; font-size: 7px; display: flex; justify-content: space-between; gap: 8px; }
.pe__pdf-inner .pdf-spec-grid > div span { color: var(--fg3); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 6.5px; }
.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: 8px; }
.pe__pdf-inner .pdf-spec-grid > div:nth-child(even) { padding-left: 8px; }
.pe__pdf-inner .pdf-table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 7px; }
.pe__pdf-inner .pdf-table th { background: #000; color: var(--vp-yellow); padding: 4px 6px; text-align: left; font-size: 6.5px; text-transform: uppercase; letter-spacing: .08em; }
.pe__pdf-inner .pdf-table td { padding: 4px 6px; 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: 8px;
  background: var(--vp-yellow);
  color: #000;
  padding: 8px 10px;
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-display);
}
.pe__pdf-inner .pdf-total span { font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.pe__pdf-inner .pdf-total b { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pe__pdf-inner .pdf-footer {
  position: absolute; bottom: 12px; left: 28px; right: 28px;
  display: flex; justify-content: space-between;
  font-size: 6.5px;
  color: var(--fg3);
  border-top: 1px solid #ddd;
  padding-top: 4px;
}

/* 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; }

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