@font-face { font-family:'Jost'; font-weight:400; src:url('fonts/jost-400.woff2') format('woff2'); }
@font-face { font-family:'Jost'; font-weight:500; src:url('fonts/jost-500.woff2') format('woff2'); }
@font-face { font-family:'Jost'; font-weight:600; src:url('fonts/jost-600.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-weight:400; src:url('fonts/manrope-400.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-weight:600; src:url('fonts/manrope-600.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-weight:700; src:url('fonts/manrope-700.woff2') format('woff2'); }
@font-face { font-family:'Sora'; font-weight:500; src:url('fonts/sora-500.woff2') format('woff2'); }
@font-face { font-family:'Sora'; font-weight:600; src:url('fonts/sora-600.woff2') format('woff2'); }
@font-face { font-family:'Oswald'; font-weight:400; src:url('fonts/oswald-400.woff2') format('woff2'); }
@font-face { font-family:'Oswald'; font-weight:500; src:url('fonts/oswald-500.woff2') format('woff2'); }
@font-face { font-family:'Oswald'; font-weight:600; src:url('fonts/oswald-600.woff2') format('woff2'); }

:root {
  --navy-900:#00263a; --navy-800:#0c3148; --slate-600:#4e738a;
  --teal-600:#35868a; --sage-600:#567761; --terracotta-600:#c1640b;
  --gray-0:#ffffff; --gray-50:#f7f9fa; --gray-100:#eef2f3; --gray-200:#dfe6e8;
  --gray-300:#c7d1d4; --gray-400:#9aa8ac; --gray-500:#748387; --gray-600:#586669;
  --text-primary:var(--navy-900); --text-secondary:var(--gray-600); --text-muted:var(--gray-400);
  --text-inverse:#fff; --text-inverse-muted:#c7d6dc;
  --surface-sunken:var(--gray-50); --border-default:var(--gray-200); --border-strong:var(--gray-300);
  --font-display:'Sora',sans-serif; --font-body:'Manrope',sans-serif; --font-label:'Oswald',sans-serif;
  --tracking-label:0.08em; --tracking-wordmark:0.18em;
}
* { box-sizing:border-box; }
body { margin:0; font-family:var(--font-body); background:#e9edef; color:var(--text-primary); }

.app { display:flex; min-height:100vh; }

/* ---------- PANEL ---------- */
.panel { width:340px; flex-shrink:0; background:#fff; padding:24px 22px; border-right:1px solid var(--border-default); overflow-y:auto; }
.panel-logo { font-family:var(--font-display); font-size:20px; letter-spacing:var(--tracking-wordmark); font-weight:600; }
.panel-logo span { color:var(--teal-600); }
.panel-sub { font-family:var(--font-label); font-size:10px; letter-spacing:var(--tracking-label); color:var(--text-secondary); margin-bottom:18px; }
.field { margin-bottom:14px; }
.field label { display:block; font-family:var(--font-label); font-size:10px; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--text-secondary); margin-bottom:5px; }
.field select, .field input { width:100%; padding:9px 10px; border:1px solid var(--border-strong); border-radius:8px; font-family:var(--font-body); font-size:13px; color:var(--text-primary); background:#fff; }
.field select:disabled { background:var(--gray-100); color:var(--text-muted); }
hr { border:none; border-top:1px solid var(--border-default); margin:16px 0; }
.btn-print { width:100%; padding:12px; background:var(--navy-900); color:#fff; border:none; border-radius:8px; font-family:var(--font-label); font-size:12px; letter-spacing:var(--tracking-label); text-transform:uppercase; cursor:pointer; margin-top:6px; }
.btn-print:hover { background:var(--navy-800); }
#errorBox { background:#fdecea; border:1px solid #f3b8b0; color:#a33; padding:10px; border-radius:8px; font-size:12px; }

/* ---------- DOC WRAP ---------- */
.doc-wrap { flex:1; display:flex; justify-content:center; padding:32px; overflow-y:auto; }
.page { width:210mm; min-height:297mm; background:#fff; box-shadow:0 4px 24px rgba(0,0,0,0.12); position:relative; font-family:var(--font-body); color:var(--text-primary); }

.ph { display:flex; height:88px; width:100%; }
.ph-left { width:29.7%; background:#fff; display:flex; align-items:center; padding-left:24px; }
.wordmark { font-family:var(--font-display); font-size:18px; letter-spacing:var(--tracking-wordmark); color:var(--navy-900); font-weight:500; }
.ph-bar { width:3px; background:var(--teal-600); }
.ph-right { flex:1; background:var(--navy-900); display:flex; flex-direction:column; justify-content:center; padding:0 28px; gap:3px; }
.ph-title-row { display:flex; justify-content:space-between; align-items:baseline; }
.ph-title { font-family:var(--font-display); font-size:18px; color:#fff; font-weight:500; }
.ph-date { font-family:var(--font-label); font-size:10px; letter-spacing:var(--tracking-label); color:var(--terracotta-600); font-weight:600; }
.ph-client-row { display:flex; align-items:baseline; gap:6px; }
.ph-client-label { font-family:var(--font-label); font-size:8.5px; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--text-inverse-muted); }
.ph-client-name { font-family:var(--font-display); font-size:12.5px; color:#fff; padding-bottom:2px; border-bottom:2px solid var(--teal-600); }

.body { padding:16px 34px 0; }

.hero { display:flex; background:var(--surface-sunken); border-radius:14px; overflow:hidden; height:172px; }
.hero-left { width:42%; padding:16px 22px; display:flex; flex-direction:column; justify-content:center; gap:4px; }
.label-sm { font-family:var(--font-label); font-size:9px; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--text-secondary); }
.hero-dev { font-family:var(--font-body); font-size:12px; color:var(--text-primary); font-weight:600; margin-bottom:6px; }
.hero-unit { font-family:var(--font-display); font-size:34px; color:var(--teal-600); font-weight:500; line-height:1; }
.hero-accent { width:40px; height:3px; background:var(--terracotta-600); border-radius:2px; margin-top:4px; }
.hero-right { flex:1; padding:10px 10px 10px 0; }
.hero-photo { width:100%; height:100%; object-fit:cover; border-radius:12px; }
.hero-photo-placeholder { width:100%; height:100%; border:2px dashed var(--border-strong); border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--text-muted); font-family:var(--font-body); font-size:11px; }

.box { margin-top:8px; border:1px solid var(--border-default); border-radius:12px; padding:8px 20px; }
.box.row { display:flex; }
.box-title { font-family:var(--font-label); font-size:10px; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--navy-900); font-weight:600; margin-bottom:6px; }
.box-title.teal { color:var(--teal-600); }
.box-val { font-family:var(--font-body); font-size:11px; color:var(--text-primary); }

.specs-grid { display:flex; flex-wrap:wrap; gap:8px 10px; }
.spec-item { flex:1 1 21%; min-width:110px; }
.spec-item { display:flex; align-items:center; gap:8px; border-left:1px solid var(--border-default); padding-left:14px; }
.spec-item svg { width:15px; height:15px; color:var(--teal-600); flex-shrink:0; }
.spec-val { font-family:var(--font-display); font-size:13px; color:var(--text-primary); font-weight:500; }
.spec-lbl { font-family:var(--font-body); font-size:9px; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--text-secondary); }

.m2-grid { flex:1; display:flex; }
.m2-item { flex:1; }
.m2-item { border-left:1px solid var(--border-default); padding-left:14px; }
.m2-val { font-family:var(--font-display); font-size:14px; color:var(--teal-600); font-weight:500; }
.m2-val.total { color:var(--navy-900); font-weight:600; }
.m2-lbl { font-family:var(--font-body); font-size:9px; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--text-secondary); }

.section-title { margin-top:10px; font-family:var(--font-label); font-size:11px; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--navy-900); font-weight:600; }

.inv-grid { display:flex; gap:8px; margin-top:6px; }
.inv-card { flex:1; }
.inv-card { border:1px solid var(--border-default); border-radius:10px; padding:8px 14px; }
.inv-card.total { background:var(--navy-900); border:none; }
.inv-lbl { font-family:var(--font-body); font-size:9px; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--text-secondary); margin-bottom:4px; }
.inv-card.total .inv-lbl { color:#9fc4cb; }
.inv-val { font-family:var(--font-display); font-size:16px; color:var(--text-primary); font-weight:600; }
.inv-card.total .inv-val { color:#fff; font-size:17px; }

.pay-grid { display:flex; gap:8px; margin-top:6px; }
.pay-card { flex:1; }
.pay-card { border:1px solid var(--border-default); border-radius:10px; padding:8px 14px; }
.pay-head { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.pay-pct { width:26px; height:19px; border-radius:10px; color:#fff; font-family:var(--font-display); font-size:8px; font-weight:600; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pay-lbl { font-family:var(--font-body); font-size:8.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-secondary); }
.pay-amt { font-family:var(--font-display); font-size:14px; color:var(--navy-900); font-weight:600; }
.pay-sub { font-family:var(--font-body); font-size:8px; margin-top:2px; }

.mes-grid { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.mes-cell { flex:1 1 14.5%; min-width:70px; }
.mes-cell { background:var(--surface-sunken); border-radius:8px; padding:6px 8px; }
.mes-cell.last { background:#e3f2f3; }
.mes-lbl { font-family:var(--font-body); font-size:8px; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-secondary); }
.mes-cell.last .mes-lbl { color:var(--teal-600); }
.mes-val { font-family:var(--font-display); font-size:10.5px; color:var(--navy-900); font-weight:600; }
.mes-note { font-family:var(--font-body); font-size:8px; color:var(--text-muted); margin-top:4px; }

.two-col { display:flex; gap:10px; margin-top:10px; }
.two-col .box { flex:1; margin-top:0; padding:10px 16px; }

.notas-box { margin-top:10px; background:var(--surface-sunken); border-radius:10px; padding:10px 16px; }
.notas-text { font-family:var(--font-body); font-size:8.5px; color:var(--text-primary); line-height:1.5; margin-top:4px; }

.footer-top { margin-top:10px; border-top:1px solid var(--border-default); padding-top:8px; display:flex; justify-content:space-between; }
.footer-brand { font-family:var(--font-label); font-size:10px; letter-spacing:var(--tracking-label); color:var(--navy-900); font-weight:600; }
.footer-vigencia { font-family:var(--font-body); font-size:9.5px; color:var(--navy-900); font-weight:600; }
.footer-sign { display:flex; justify-content:space-between; margin-top:10px; gap:24px; font-family:var(--font-body); font-size:9px; color:var(--text-secondary); }
.footer-sign > div { flex:1; }
.sign-line { display:inline-block; min-width:160px; border-bottom:1px solid var(--border-strong); padding-left:6px; font-weight:600; color:var(--text-primary); }
.footer-fine { font-family:var(--font-body); font-size:8.5px; color:var(--text-muted); margin-top:6px; padding-bottom:14px; }

.stripe { position:absolute; bottom:0; left:0; width:100%; height:5px; display:flex; }

/* ---------- PRINT ---------- */
@media print {
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }
  .panel { display:none; }
  .doc-wrap { padding:0; }
  .page { box-shadow:none; width:100%; min-height:0; }
  body { background:#fff; }
}