/* Che Carga · Cotizaciones: menú de herramientas, lista, editor, datos del emisor, vista previa y hoja imprimible.
   Usa las variables de color del sistema (modo claro y oscuro). La hoja (.qd) es siempre clara, como el papel. */

/* ---------- Menú de herramientas ---------- */
.tools{display:flex;gap:4px;max-width:1560px;margin:0 auto;padding:10px 16px 0;border-bottom:1px solid var(--line);background:transparent}
.tools[hidden]{display:none}
.tools button{height:40px;padding:0 16px;border:0;border-bottom:3px solid transparent;border-radius:var(--r) var(--r) 0 0;background:none;color:var(--mut);font:600 15px/1 var(--hd);letter-spacing:.01em;cursor:pointer;margin-bottom:-1px}
.tools button:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.tools button[aria-current=page]{color:var(--ink);border-bottom-color:var(--acc)}
html.pregate .tools,html.pregate #quotesView,html.pregate #tripsView,html.pregate #homeView{visibility:hidden}
html[data-tool=trips] .ws,html[data-tool=trips] .res,html[data-tool=trips] details.fb,html[data-tool=trips] #bTop,html[data-tool=trips] #tstat,html[data-tool=quotes] .ws,html[data-tool=quotes] .res,html[data-tool=quotes] details.fb,html[data-tool=quotes] #bTop,html[data-tool=quotes] #tstat,html[data-tool=home] .ws,html[data-tool=home] .res,html[data-tool=home] details.fb,html[data-tool=home] #bTop,html[data-tool=home] #tstat{display:none!important}
html:not([data-tool=quotes]) #quotesView{display:none!important}
html:not([data-tool=trips]) #tripsView{display:none!important}
html:not([data-tool=home]) #homeView{display:none!important}
@media (max-width:520px){.tools{padding:8px 12px 0}.tools button{flex:1;padding:0 8px;font-size:14.5px}}

/* ---------- Vista de cotizaciones ---------- */
#quotesView,#tripsView{max-width:1560px;margin:0 auto;padding:16px}
.qv-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:0 0 12px}
.qv-head h2{font-size:22px}
.qv-tools{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:0 0 12px}
.qv-tools .search{flex:1 1 220px;max-width:360px}
.qv-tools .seg button{padding:0 10px}
#qMsg,#qeMsg,#vMsg,#veMsg{font-size:13px;margin:0 0 10px;min-height:0}
#qMsg:empty,#qeMsg:empty,#vMsg:empty,#veMsg:empty{display:none}
#qMsg.err,#qeMsg.err,#vMsg.err,#veMsg.err{color:var(--bad)}#qMsg.ok,#qeMsg.ok,#vMsg.ok,#veMsg.ok{color:var(--good)}#qMsg.warn,#qeMsg.warn,#vMsg.warn,#veMsg.warn{color:var(--warn)}
.qt{min-width:760px}
.qt th,.qt td{padding:9px 8px}
.qt tbody tr{cursor:pointer}.qt tbody tr:hover td{background:var(--bg)}
.qt td.cl{max-width:280px;overflow-wrap:anywhere}
.qt td.cl b{font-weight:600}
.qt .rt{color:var(--mut);font-size:12.5px}
.qt select{height:30px;width:auto;min-width:118px;padding:2px 6px;font-size:12.5px;cursor:pointer}
.qb{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:2px;border:1.5px solid currentColor;font:600 11.5px/1.2 var(--bd);white-space:nowrap}
.qb.expired,.qb.rejected{color:var(--bad)}.qb.approved{color:var(--good)}.qb.sent{color:var(--s1)}.qb.draft{color:var(--mut)}
.qempty{padding:30px 16px;text-align:center;border:1px dashed var(--line2);border-radius:var(--r-lg,3px);background:var(--panel)}
.qempty h3{font:700 19px/1.2 var(--hd);margin:0 0 6px}
.qempty p{margin:0 auto 14px;max-width:46ch;color:var(--mut);font-size:13.5px}
.qempty .bar{justify-content:center}
@media (max-width:700px){
  .qt{min-width:0}.qt thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .qt,.qt tbody,.qt tr,.qt td{display:block;width:100%}
  .qt tbody tr{border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;margin:0 0 10px;background:var(--panel)}
  .qt td{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border:0;text-align:right}
  .qt td::before{content:attr(data-l);color:var(--mut);font-size:12px;text-align:left;flex:none}
  .qt td.cl{max-width:none}.qt td.qa{display:none}
}

/* ---------- Editor ---------- */
.qe-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 14px}
.qe-top h2{font-size:22px}
.qe-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
@media (min-width:980px){.qe-grid{grid-template-columns:minmax(0,1fr) 330px}.qe-side{position:sticky;top:calc(env(safe-area-inset-top,0px) + 66px)}}
.qe-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.qe .fg>div{min-width:0}
.qe .fe{font-size:12.5px;color:var(--bad);margin-top:3px}.qe .fe:empty{display:none}
.qe [aria-invalid=true]{border-color:var(--bad)}
.qe label .rq{font-style:normal;font-size:11.5px;color:var(--mut);margin-left:4px}
.qe textarea{min-height:84px;resize:vertical;font-family:inherit}
.qe .full{grid-column:1/-1}
.qcargo{padding:11px 12px;border:1px solid var(--line2);border-left:4px solid var(--s3);border-radius:var(--r);background:var(--floor)}
.qcargo b{display:block;font:600 15px/1.3 var(--hd);margin-bottom:2px}
.qcargo p{margin:0 0 8px;font-size:13px}
.qlh,.ql{display:grid;grid-template-columns:minmax(0,1fr) 150px 34px;gap:8px;align-items:start}
.qlh{font-size:12px;color:var(--mut);margin:0 0 3px}
.ql{margin:0 0 8px}
.ql .qla{text-align:right;font-variant-numeric:tabular-nums}
.ql .fe{grid-column:1/-1;margin:-3px 0 0}
.ql .ib{height:32px;width:34px;border-color:var(--line2)}
@media (max-width:520px){.qlh{display:none}.ql{grid-template-columns:minmax(0,1fr) 120px 34px}}
.qtot{display:flex;flex-direction:column;gap:3px;align-items:flex-end;margin:10px 0 0;font-size:13.5px}
.qtot b{font-weight:700;font-size:20px;line-height:1.1;font-variant-numeric:tabular-nums}
.qe-side .in{display:flex;flex-direction:column;gap:12px}
.qs-l{margin:0;font-size:12px;color:var(--mut)}
.qs-t{margin:0;font-weight:700;font-size:28px;line-height:1.1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.qs-s{margin:0;font-size:12.5px;color:var(--mut)}
.qe-side .stack{display:flex;flex-direction:column;gap:8px}
.qe-side .stack .btn{justify-content:center;width:100%}
.qe-side h3{margin:2px 0 0}
.qe-side .seg{display:grid;grid-template-columns:repeat(2,1fr)}
.qe-side .seg button{border-bottom:1px solid var(--line2)}
.qe-side .seg button:nth-last-child(-n+2){border-bottom:0}
.qe-side .seg button:nth-child(2n){border-right:0}
.qe-side .btn.dg{color:var(--bad);border-color:var(--bad)}
.qdirty{font-size:12.5px;color:var(--warn);margin:0}.qdirty:empty{display:none}

/* ---------- Datos del emisor ---------- */
#qIss{border:1px solid var(--line2);border-radius:var(--r-lg,3px);background:var(--panel);color:var(--ink);padding:0;width:min(520px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;box-shadow:0 12px 40px rgba(5,12,22,.45)}
#qIss::backdrop{background:rgba(5,12,22,.6)}
#qIss form{padding:18px;display:flex;flex-direction:column;gap:12px}
#qIss h2{margin:0}
#qIss .intro{margin:0;font-size:13px;color:var(--mut)}
#qIss .fe{font-size:12.5px;color:var(--bad);margin-top:3px}#qIss .fe:empty{display:none}
#qIss [aria-invalid=true]{border-color:var(--bad)}
#qIss textarea{min-height:76px;resize:vertical;font-family:inherit}
#qIss .row{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
#qIss .logo{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#qIss .logo .pv{width:150px;height:64px;border:1px dashed var(--line2);border-radius:var(--r);background:#fff;display:grid;place-items:center;overflow:hidden;color:#566376;font-size:12px;text-align:center}
#qIss .logo .pv img{max-width:100%;max-height:100%;display:block}
#qIss .two2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:480px){#qIss .two2{grid-template-columns:minmax(0,1fr)}}

/* ---------- Vista previa ---------- */
#qPrev,#vPrev{border:1px solid var(--line2);border-radius:var(--r-lg,3px);background:var(--bg);color:var(--ink);padding:0;width:min(900px,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow:auto;box-shadow:0 12px 40px rgba(5,12,22,.5)}
#qPrev::backdrop,#vPrev::backdrop{background:rgba(5,12,22,.65)}
#qPrev .bar,#vPrev .bar{position:sticky;top:0;z-index:2;justify-content:flex-end;padding:10px 12px;background:var(--panel);border-bottom:1px solid var(--line)}
#qPrev .paper,#vPrev .paper{padding:14px}
#qPrev .qd,#vPrev .qd{box-shadow:0 2px 14px rgba(5,12,22,.25)}
#quoteRoot{display:none}

/* ---------- Hoja de la cotización (pantalla e impresión) ---------- */
.qd{--panel:#fff;--ink:#1d2227;--mut:#59616a;--line:#d3d7db;--line2:#b4bac0;--floor:#f4f6f7;--hatch:#dde1e4;--cab:#d5dade;--glass:#9fb1bf;--tyre:#2b3035;--chassis:#6a727a;--s1:#2a78d6;--s2:#eb6834;--s3:#1baf7a;--s4:#eda100;--s5:#e87ba4;--s6:#008300;--s7:#4a3aa7;--s8:#e34948;--oth:#8a948f;--mono:ui-monospace,Consolas,"Courier New",monospace;--bd:Arial,Helvetica,sans-serif;--hd:Arial,Helvetica,sans-serif;
  background:#fff;color:#1d2227;font:10.5pt/1.45 Arial,Helvetica,sans-serif;padding:14mm 12mm;max-width:210mm;margin:0 auto;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.qd *{box-sizing:border-box}
.qd h3{font:700 10pt/1.2 Arial,Helvetica,sans-serif;margin:0 0 4pt;padding-bottom:3pt;border-bottom:1.2pt solid #1d2227;letter-spacing:.02em;text-transform:none;break-after:avoid}
.qd p{margin:0 0 4pt}
.qd section{margin:0 0 12pt;break-inside:avoid}
.qd .qd-m{color:#59616a;font-size:9pt}
.qd-h{display:flex;justify-content:space-between;align-items:flex-start;gap:14pt;padding-bottom:9pt;border-bottom:2pt solid #1d2227;margin-bottom:12pt}
.qd-iss{display:flex;gap:10pt;align-items:flex-start;min-width:0}
.qd-iss b{font-size:13pt}
.qd-iss div{min-width:0;overflow-wrap:anywhere;font-size:9.5pt;line-height:1.4}
.qd-logo{display:block;max-width:34mm;max-height:20mm;object-fit:contain;flex:none}
.qd-id{display:flex;flex-direction:column;align-items:flex-end;text-align:right;font-size:9.5pt;gap:1pt;flex:none}
.qd-id b{font:700 18pt/1.1 Arial,Helvetica,sans-serif}
.qd-k{font-size:9pt;letter-spacing:.08em;text-transform:uppercase;color:#59616a}
.qd-two{display:grid;grid-template-columns:1fr 1fr;gap:16pt}
.qd-two>div{min-width:0;overflow-wrap:anywhere}
.qd table{border-collapse:collapse;width:100%}
.qd th,.qd td{padding:3pt 5pt;text-align:left;border-bottom:.6pt solid #d3d7db;font-size:9.5pt;vertical-align:top;overflow-wrap:anywhere}
.qd th{color:#59616a;font-weight:700}
.qd .r{text-align:right;font-variant-numeric:tabular-nums}
.qd-kv th{width:19%;white-space:nowrap}.qd-kv td{width:31%}
.qd-t thead th{border-bottom:1.2pt solid #1d2227}
.qd-t tr{break-inside:avoid}
.qd-sw{display:inline-block;width:8pt;height:8pt;margin-right:5pt;vertical-align:-1pt;border:.5pt solid #59616a}
.qd-svg{margin:6pt 0}
.qd-svg svg{display:block;width:100%;height:auto;max-width:none}
.qd svg text{font-size:13px}.qd svg text.bn{font-size:15px}.qd svg text.bd{font-size:12px}.qd svg text.cp{font-size:14px}
.qd-p td{font-size:10.5pt}
.qd-p tfoot td{border-bottom:0}
.qd-tot td{font-weight:700;font-size:13pt;border-top:1.4pt solid #1d2227;padding-top:5pt}
.qd-f{display:flex;justify-content:space-between;gap:12pt;align-items:flex-end;margin-top:14pt;padding-top:6pt;border-top:.6pt solid #b4bac0;font-size:8.5pt;color:#59616a}
.qd-by{white-space:nowrap}
@media (max-width:640px){.qd{padding:14px 12px}.qd-h{flex-direction:column}.qd-id{align-items:flex-start;text-align:left}.qd-two{grid-template-columns:1fr}.qd-f{flex-direction:column;align-items:flex-start}}

@media print{
  html.pq body>*:not(#quoteRoot){display:none!important}
  html.pq #sheetRoot{display:none!important}
  html.pq #quoteRoot{display:block!important}
  html.pq .qd{padding:0;max-width:none}
  html.pq .qd-two{grid-template-columns:1fr 1fr}
  html.pq .qd-h{flex-direction:row}html.pq .qd-id{align-items:flex-end;text-align:right}
  html.pq .qd-f{flex-direction:row}
}

/* Inicio: elegir herramienta */
#homeView{max-width:1560px;margin:0 auto;padding:28px 16px 40px}
#homeView h2{margin:0 0 16px;font:700 22px/1.2 var(--hd);color:var(--ink)}
.hv-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;max-width:900px}
.hv-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;padding:22px;border:1px solid var(--line2);border-radius:var(--r);background:var(--panel);color:var(--ink);cursor:pointer;font:inherit}
.hv-card:hover{border-color:var(--acc);box-shadow:0 2px 10px color-mix(in srgb,var(--ink) 10%,transparent)}
.hv-card .t{font:700 19px/1.2 var(--hd)}
.hv-card .d{color:var(--mut);font-size:14.5px;line-height:1.5}
.hv-card .go{margin-top:6px;font-weight:700;font-size:14px;color:var(--acc)}