:root {
  --orange: #ff4b0a;
  --black: #111111;
  --gray-100: #f3f3f3;
  --gray-200: #e8e8e8;
  --gray-500: #707070;
  --paper-w: 210mm;
  --paper-h: 297mm;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: #dcdcdc; color: #111; }
button, input { font: inherit; }
.app-shell { display: grid; grid-template-columns: 430px minmax(800px, 1fr); min-height: 100vh; }
.editor { background: #fff; border-right: 1px solid #ccc; padding: 18px; overflow: auto; height: 100vh; position: sticky; top: 0; }
.editor-head { display: flex; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.editor-head strong { display: block; font-size: 18px; }
.editor-head span { display: block; font-size: 12px; color: #666; margin-top: 3px; }
.editor-section { border-top: 1px solid #e5e5e5; padding: 15px 0; }
.editor-section h2 { font-size: 14px; margin: 0 0 10px; text-transform: uppercase; letter-spacing: .04em; }
.section-title-row { display: flex; justify-content: space-between; align-items: center; }
.form-grid { display: grid; gap: 10px; }
.form-grid.two { grid-template-columns: 1fr 1fr; }
.form-grid.three { grid-template-columns: repeat(3, 1fr); }
.form-grid label, .item-editor-row label { font-size: 11px; font-weight: 700; color: #444; }
.form-grid input, .item-editor-row input { width: 100%; margin-top: 4px; padding: 8px 9px; border: 1px solid #cfcfcf; border-radius: 6px; background: #fff; }
.span-2 { grid-column: span 2; }
.btn { border: 1px solid #c8c8c8; background: #f6f6f6; padding: 8px 11px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 700; }
.btn:hover { filter: brightness(.97); }
.btn-primary { background: var(--orange); color: #fff; border-color: var(--orange); }
.btn-danger { color: #a00; }
.items-editor { display: grid; gap: 8px; margin-top: 10px; }
.item-editor-row { display: grid; grid-template-columns: 1fr 75px 105px 30px; gap: 7px; align-items: end; padding: 9px; background: #fafafa; border: 1px solid #e6e6e6; border-radius: 7px; }
.remove-item { width: 30px; height: 34px; border: 0; border-radius: 5px; background: #fff0f0; color: #a00; cursor: pointer; font-size: 20px; }
.actions-bottom { display: flex; flex-wrap: wrap; gap: 8px; }
.file-btn { position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.preview-wrap { padding: 28px; overflow: auto; }
.document-pages { display: grid; justify-content: center; gap: 22px; }
.page { width: var(--paper-w); height: var(--paper-h); background: #fff; position: relative; box-shadow: 0 3px 18px rgba(0,0,0,.22); overflow: hidden; page-break-after: always; }
.page-inner { padding: 0 12mm 11mm; height: 100%; display: flex; flex-direction: column; }
.top-banner { height: 37mm; margin: 0 -12mm 10mm; position: relative; border-bottom: 1.2mm solid var(--orange); display: flex; align-items: center; }
.brand { font-weight: 800; font-size: 13mm; margin-left: 13mm; letter-spacing: -.7mm; }
.brand-dot { color: var(--orange); }
.banner-black { margin-left: auto; height: 100%; width: 44%; background: var(--black); color: #fff; padding: 8mm 9mm 5mm 22mm; position: relative; }
.banner-black::before { content: ''; position: absolute; left: -18mm; top: 0; width: 24mm; height: 100%; background: linear-gradient(120deg, transparent 0 46%, var(--orange) 47% 52%, var(--black) 53%); }
.banner-black h1 { margin: 0 0 1mm; font-size: 6mm; line-height: 1; }
.banner-black .number { color: var(--orange); font-size: 3.6mm; font-weight: 800; }
.banner-black .meta { margin-top: 2mm; font-size: 3mm; line-height: 1.45; }
.orange { color: var(--orange); font-weight: 800; }
.info-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 22mm; margin-bottom: 5mm; }
.section-heading { display: flex; align-items: center; gap: 3mm; margin-bottom: 3mm; }
.section-icon { width: 8mm; height: 8mm; background: var(--black); border-radius: 1.2mm; display: grid; place-items: center; color: var(--orange); font-size: 4.5mm; border: .3mm solid #333; }
.section-heading strong { font-size: 3.7mm; }
.section-heading .line { width: 16mm; border-bottom: .6mm solid var(--orange); margin-top: 7mm; margin-left: -15mm; }
.field-list { font-size: 2.9mm; }
.field-row { display: grid; grid-template-columns: 21mm 1fr; min-height: 5.1mm; align-items: end; }
.field-row b { font-size: 2.8mm; }
.field-value { border-bottom: .25mm solid #999; min-height: 4.4mm; padding-bottom: .5mm; }
.company-name { color: var(--orange); font-size: 3.5mm; margin-bottom: 2mm; }
.company-lines { font-size: 3mm; line-height: 1.55; }
.products-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 2.75mm; }
.products-table th { background: var(--black); color: #fff; padding: 2.2mm 1mm; font-size: 2.55mm; font-weight: 700; }
.products-table td { border: .25mm solid #d7d7d7; padding: 1.8mm 1.5mm; height: 8.15mm; vertical-align: middle; }
.products-table .c-item { width: 14mm; text-align: center; }
.products-table .c-desc { width: auto; }
.products-table .c-qtd { width: 17mm; text-align: center; }
.products-table .c-money { width: 28mm; text-align: center; font-weight: 700; }
.products-table .empty { color: transparent; }
.totals-wrap { margin-left: auto; width: 100mm; }
.total-row { display: grid; grid-template-columns: 1fr 32mm; min-height: 8mm; align-items: center; border: .25mm solid #ddd; border-top: 0; font-size: 3mm; }
.total-row span { padding: 0 5mm; }
.total-row b { text-align: right; padding-right: 3mm; }
.total-row.grand { grid-template-columns: 1fr 32mm; background: var(--black); color: #fff; font-size: 5mm; font-weight: 800; min-height: 10.5mm; border: 0; }
.total-row.grand b { background: var(--orange); height: 100%; display: flex; align-items: center; justify-content: center; padding: 0; }
.commercial { margin-top: auto; margin-bottom: 4mm; }
.commercial-grid { display: grid; grid-template-columns: 35mm 1fr; width: 85mm; font-size: 2.35mm; line-height: 1.35; }
.footer { height: 14mm; margin: 0 -12mm -11mm; background: var(--black); color: #fff; display: grid; grid-template-columns: 10mm 15mm 1fr auto; align-items: center; gap: 4mm; padding: 0 8mm 0 4mm; font-size: 2.2mm; }
.footer .page-num { font-size: 4mm; }
.footer-logo { width: 10mm; height: 10mm; border: .4mm solid #fff; display: grid; place-items: center; font-size: 5mm; }
.footer-company { color: var(--orange); letter-spacing: 1.4mm; font-size: 2.2mm; }
.continuation-title { margin: -3mm 0 5mm; font-size: 4mm; font-weight: 800; text-transform: uppercase; }
.payment-title { font-size: 6mm; margin: 0; }
.payment-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10mm; margin: 5mm 0 12mm; }
.payment-card { background: var(--gray-100); min-height: 43mm; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 7mm; }
.payment-card .value { color: var(--orange); font-weight: 800; font-size: 4.2mm; margin-bottom: 1mm; }
.payment-card .small { font-size: 2.25mm; font-weight: 700; margin-bottom: 4mm; }
.payment-card p { margin: 0; font-size: 2.75mm; font-weight: 700; line-height: 1.22; }
.legal-box { background: var(--gray-100); display: grid; grid-template-columns: 1fr 1fr; padding: 5mm 7mm; min-height: 74mm; margin-bottom: 9mm; }
.legal-col { padding-right: 7mm; }
.legal-col + .legal-col { border-left: .4mm solid #444; padding-left: 7mm; padding-right: 0; }
.legal-col h3 { font-size: 3.8mm; margin: 0 0 7mm; border-bottom: .6mm solid var(--orange); padding-bottom: 1.7mm; display: inline-block; }
.legal-col p { font-size: 2.75mm; line-height: 1.43; margin: 0 0 3mm; }
.legal-col .alert { color: var(--orange); font-weight: 800; font-size: 2.4mm; }
.approval { margin-top: 0; }
.approval p { font-size: 2.55mm; }
.signature-row { display: grid; grid-template-columns: 20mm 78mm; margin-top: 9mm; font-size: 2.8mm; align-items: end; }
.signature-row b { padding-bottom: 1mm; }
.signature-line { border-bottom: .3mm solid #777; min-height: 5mm; }
.signature-date { margin-top: 2mm; font-size: 2.8mm; }

@media (max-width: 1200px) {
  .app-shell { grid-template-columns: 1fr; }
  .editor { position: static; height: auto; }
}
@media print {
  @page { size: A4; margin: 0; }
  body { background: #fff; }
  .no-print { display: none !important; }
  .app-shell { display: block; }
  .preview-wrap { padding: 0; }
  .document-pages { display: block; }
  .page { box-shadow: none; margin: 0; width: 210mm; height: 297mm; break-after: page; page-break-after: always; }
  .page:last-child { break-after: auto; page-break-after: auto; }
}