/* Tarket · Generador de proformas */
html{-webkit-text-size-adjust:100%}[hidden]{display:none!important}img{max-width:100%}
:root{
  --bg:#F2F2EF; --panel:#FFFFFF; --sunk:#F6F6F3; --line:#E1E1DC; --ink:#111113; --ink-2:#5B5F66; --ink-3:#8A8D93;
  --blue:#1272E0; --blue-wash:#E8F1FD; --red:#C8323F; --red-wash:#FBE9EA; --ok:#15803D;
  --f-display:"Archivo",Arial,sans-serif; --f-body:"DM Sans",Arial,sans-serif;
  --r:12px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0E0F11; --panel:#17181B; --sunk:#1E2024; --line:#2B2D33; --ink:#EDEDEA; --ink-2:#A3A6AD; --ink-3:#73767D;
  --blue:#4C9DFF; --blue-wash:#13233A; --red:#F07178; --red-wash:#3A1A1D; --ok:#4ADE80; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0E0F11; --panel:#17181B; --sunk:#1E2024; --line:#2B2D33; --ink:#EDEDEA; --ink-2:#A3A6AD; --ink-3:#73767D;
  --blue:#4C9DFF; --blue-wash:#13233A; --red:#F07178; --red-wash:#3A1A1D; --ok:#4ADE80; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:400 14px/1.5 var(--f-body);margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.app{display:grid;grid-template-columns:minmax(360px,460px) 1fr;min-height:100vh}
@media (max-width:980px){.app{grid-template-columns:1fr}}


.bar{grid-column:1/-1;position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--panel);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--panel)}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.brand .dot{width:12px;height:12px;border-radius:50%;background:#1580FF}
.brand b{font:900 16px/1 var(--f-display);letter-spacing:.2px}
.brand span{color:var(--ink-3);font-size:13px}
.status{font-size:12.5px;color:var(--ink-3)}
.status.ok{color:var(--ok)}
.status.err{color:var(--red)}
.btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:9px;border:1px solid var(--line);background:var(--panel);cursor:pointer;font-weight:700;font-size:13.5px;white-space:nowrap}
.btn:hover{border-color:var(--ink-3)}
.btn.pri{background:var(--ink);border-color:var(--ink);color:var(--panel)}
.btn.blue{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.ghost{border-color:transparent;background:transparent}
.btn.sm{height:30px;padding:0 10px;font-size:12.5px}
.btn.danger{color:var(--red)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn svg{width:16px;height:16px}


.editor{border-right:1px solid var(--line);background:var(--panel);overflow:auto;max-height:calc(100vh - 57px);position:sticky;top:57px}
@media (max-width:980px){.editor{max-height:none;position:static;border-right:0;border-bottom:1px solid var(--line)}}
.tabs{display:flex;gap:4px;padding:10px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:5}
.tabs button{border:0;background:transparent;padding:7px 12px;border-radius:8px;font-weight:700;font-size:13px;color:var(--ink-2);cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--sunk);color:var(--ink)}
.pane{padding:16px max(16px,env(safe-area-inset-left,0px)) 40px 16px;display:grid;gap:18px}
.sec{display:grid;gap:10px}
.sec h3{margin:0;font:800 11.5px/1 var(--f-display);letter-spacing:1px;text-transform:uppercase;color:var(--blue)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
@media (max-width:420px){.g2,.g3{grid-template-columns:1fr}}
.f{display:grid;gap:5px;min-width:0}
.f label{font-size:12px;font-weight:700;color:var(--ink-2)}
.f input,.f select,.f textarea{width:100%;border:1px solid var(--line);background:var(--sunk);border-radius:8px;padding:8px 10px;min-height:36px;font-size:13.5px}
.f textarea{resize:vertical;min-height:64px;line-height:1.45}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--blue);background:var(--panel)}
.hint{font-size:12px;color:var(--ink-3);margin:0}
.card{border:1px solid var(--line);border-radius:var(--r);padding:12px;display:grid;gap:10px;background:var(--panel)}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.card-h b{font-size:12.5px;color:var(--ink-2)}
.row-list{display:grid;gap:8px}
.kv{display:grid;grid-template-columns:110px 1fr auto;gap:8px;align-items:center}
.kv2{display:grid;grid-template-columns:70px 1fr auto;gap:8px;align-items:center}
.kv input,.kv2 input{width:100%;border:1px solid var(--line);background:var(--sunk);border-radius:8px;padding:7px 9px;min-height:34px;font-size:13px}
.x{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:transparent;cursor:pointer;color:var(--ink-3);display:grid;place-items:center}
.x:hover{color:var(--red);border-color:var(--red)}
.check{display:flex;gap:8px;align-items:center;font-size:13px;font-weight:600}
.check input{accent-color:var(--blue);width:16px;height:16px}


.hist{display:grid;gap:8px}
.hrow{border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center}
.hrow.cur{border-color:var(--blue);background:var(--blue-wash)}
.hrow b{font-size:13.5px}
.hrow .m{font-size:12px;color:var(--ink-3)}
.hrow .amt{font:800 14px/1 var(--f-display);text-align:right;font-variant-numeric:tabular-nums}
.hrow .acts{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap}
.empty{border:1px dashed var(--line);border-radius:10px;padding:18px;text-align:center;color:var(--ink-3);font-size:13px}
.confirm{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--red)}


.stage{padding:24px max(16px,env(safe-area-inset-right,0px)) 48px 16px;display:grid;justify-items:center;gap:12px;align-content:start;min-width:0}
.warn{background:var(--red-wash);color:var(--red);border-radius:10px;padding:10px 14px;font-size:13px;font-weight:600;max-width:794px;width:100%}
.scaler{width:100%;max-width:794px}
.scaler-in{transform-origin:top left}
.paperwrap{box-shadow:0 1px 2px rgb(0 0 0 / .08),0 20px 50px -20px rgb(0 0 0 / .35);width:794px}


.paper{width:210mm;height:297mm;padding:10mm 15mm 8mm;display:flex;flex-direction:column;gap:3.2mm;position:relative;overflow:hidden;background:#fff;color:#111113;font:400 9.6pt/1.45 "DM Sans",Arial,sans-serif}
.paper *{box-sizing:border-box}
.paper p{margin:0}
.p-band{position:absolute;left:0;right:0;top:0;height:3mm;background:#111113}
.p-band i{position:absolute;right:15mm;top:0;width:28mm;height:3mm;background:#1580FF}
.p-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10mm;padding-top:2mm}
.p-logo{width:24mm;height:auto;display:block}
.p-emisor{margin-top:3mm;font-size:8.6pt;color:#4A4D53;line-height:1.5}
.p-emisor b{color:#111113;font-size:9.2pt}
.p-emisor .web{color:#1272E0;font-weight:700}
.p-doc{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:1.5mm}
.p-doc h1{font:900 26pt/1 Archivo,Arial,sans-serif;letter-spacing:-.5pt;margin:0;color:#111113}
.p-no{font:800 10pt/1 Archivo,Arial,sans-serif;color:#fff;background:#111113;padding:2mm 3mm;border-radius:1.5mm}
.p-meta{display:grid;grid-template-columns:auto auto;gap:.6mm 4mm;font-size:8.6pt;margin-top:1.5mm}
.p-meta span:nth-child(odd){color:#6B6E74}
.p-meta span:nth-child(even){font-weight:700;text-align:right}
.p-parties{display:grid;grid-template-columns:1fr 1fr;gap:5mm}
.p-box{border:.3mm solid #E1E1DC;border-radius:2.5mm;padding:3.5mm 4mm}
.p-lbl{font:800 7.4pt/1 Archivo,Arial,sans-serif;letter-spacing:.9pt;text-transform:uppercase;color:#1272E0;margin-bottom:2mm}
.p-box .n{font-weight:700;font-size:10pt}
.p-box .d{color:#4A4D53;font-size:8.6pt;white-space:pre-line}
.p-table{width:100%;border-collapse:collapse}
.p-table th{background:#fff;color:#111113;font:800 7.6pt/1 Archivo,Arial,sans-serif;letter-spacing:.6pt;text-transform:uppercase;padding:2.6mm 3mm;text-align:left;border-top:.25mm solid #111113;border-bottom:.25mm solid #111113}
.p-table td{padding:3mm;vertical-align:top;border-bottom:.3mm solid #E1E1DC}
.p-num{text-align:right!important;font-variant-numeric:tabular-nums;white-space:nowrap}
.p-c{text-align:center!important}
.p-svc b{font-size:10pt}
.p-cols{display:grid;grid-template-columns:1fr 1fr;gap:6mm;margin-top:1.4mm;align-items:start}
.p-cols.one{grid-template-columns:1fr}
.p-svc ul{margin:0;padding:0;list-style:none;color:#3F4247;font-size:8.3pt;line-height:1.38;display:flex;flex-direction:column;gap:.3mm}
.p-svc li{position:relative;padding-left:3.4mm}
.p-svc li::before{content:"";position:absolute;left:.6mm;top:1.5mm;width:1.1mm;height:1.1mm;border-radius:50%;background:#3F4247}
.p-svc li strong{color:#111113}

.p-bottom{display:grid;grid-template-columns:1fr 64mm;gap:6mm;align-items:start}
.p-totals{border:.3mm solid #E1E1DC;border-radius:2.5mm;overflow:hidden}
.p-totals div{display:flex;justify-content:space-between;padding:2.4mm 4mm;font-size:9.2pt;border-bottom:.3mm solid #E1E1DC}
.p-totals div span:last-child{font-variant-numeric:tabular-nums;font-weight:700}
.p-totals .t{background:#fff;color:#111113;border:0;border-top:.25mm solid #111113;padding:3.5mm 4mm;align-items:center}
.p-totals .t span:first-child{font:800 9pt/1 Archivo,Arial,sans-serif;letter-spacing:.6pt;text-transform:uppercase}
.p-totals .t span:last-child{font:900 16pt/1 Archivo,Arial,sans-serif}
.p-words{font-size:8pt;color:#6B6E74;margin:1.6mm 0 0!important;text-align:right}
.p-terms{display:grid;grid-template-columns:1fr;gap:1.2mm;font-size:8.5pt}
.p-terms div{display:flex;gap:2mm}
.p-terms .k{font-weight:700;min-width:17mm;color:#111113}
.p-terms .v{color:#3F4247}
.p-pay{display:grid;grid-template-columns:1fr 1fr;gap:3mm;margin-top:3mm}
.p-pay div{background:#F3F6FC;border-radius:2mm;padding:2.6mm 3.5mm;font-size:8.4pt;color:#3F4247}
.p-pay b{display:block;font:900 12pt/1.2 Archivo,Arial,sans-serif;color:#1272E0}
.p-excl{background:#F6F6F3;border-radius:2.5mm;padding:3mm 4mm;font-size:8.5pt;color:#3F4247}
.p-excl b{color:#111113}
.p-bank{border:.3mm solid #CFE0FB;background:#F3F6FC;border-radius:2.5mm;padding:3mm 4mm;display:flex;flex-direction:column;gap:2.4mm}
.p-bank-h{display:flex;justify-content:space-between;align-items:baseline;gap:4mm;font-size:8.5pt;color:#3F4247}
.p-bank-h b{color:#111113}
.p-bank-g{display:grid;grid-template-columns:1fr 1fr;gap:4mm}
.p-bank-g>div{background:#fff;border-radius:2mm;padding:2.4mm 3.5mm;display:flex;flex-direction:column;gap:.8mm}
.p-bank .cur{font:800 8.4pt/1.2 Archivo,Arial,sans-serif;color:#1272E0;margin-bottom:.6mm}
.p-bank .row{display:flex;justify-content:space-between;font-size:8.6pt;color:#6B6E74}
.p-bank .row b{color:#111113;font-variant-numeric:tabular-nums;letter-spacing:.2pt}
.p-spacer{flex:1}
.p-sign{display:grid;grid-template-columns:1fr 1fr;gap:16mm;padding:0 4mm}
.p-sign div{border-top:.35mm solid #111113;padding-top:2mm;font-size:8.4pt;text-align:center;color:#4A4D53}
.p-sign b{display:block;color:#111113;font-size:8.8pt}
.p-foot{display:flex;justify-content:space-between;align-items:center;border-top:.3mm solid #E1E1DC;padding-top:3mm;font-size:7.8pt;color:#6B6E74}
.p-foot i{display:inline-block;width:2.4mm;height:2.4mm;border-radius:50%;background:#1580FF;margin-right:1.6mm;vertical-align:-.2mm}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--panel);padding:10px 16px;border-radius:10px;font-weight:600;font-size:13px;z-index:50;max-width:calc(100% - 32px)}