/* ============================================================
   SACRAMENTO — Cotizaciones
   Editor a la izquierda, documento vivo a la derecha. La interfaz usa los
   tokens de sacramento.css (tema claro u oscuro); el documento es siempre
   una hoja blanca, igual en pantalla, en el PDF y en la impresión.
   ============================================================ */

:root {
  --q-top: 64px;
  --q-exito: #3F7A4F;
  --q-aviso: #9A6512;
  --q-error: #A3422B;
  --q-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23736E66' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] {
  --q-exito: #8CC79A;
  --q-aviso: #E2B36A;
  --q-error: #F0A08A;
  --q-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E887E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
}

/* sacramento.css bloquea el scroll para el lienzo; esta pantalla sí se desplaza. */
/* Solo desplaza la raíz: si body también fuera contenedor de scroll, la barra
   y el documento dejarían de quedarse fijos al bajar. */
html.quotes-html { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; }
body.quotes-page { height: auto; min-height: 100%; overflow: visible; }
.quotes-page { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--ui); font-size: 14px; line-height: 1.5; }
:where(.quotes-page) :where(button, input, select, textarea) { font-family: inherit; color: inherit; }
.quotes-page button, .quotes-page a { -webkit-tap-highlight-color: transparent; }
.quotes-page ::placeholder { color: var(--ink-faint); opacity: 1; }
.quotes-page :focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
[hidden] { display: none !important; }

.q-ico { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- carga ---------- */
.quotes-loading { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center; color: var(--ink-soft); }
.quotes-loading p { margin: 0; font-size: 14px; }
.quotes-loading-giro { width: 28px; height: 28px; border: 1.5px solid var(--hair); border-top-color: var(--ink); border-radius: 50%; animation: qgiro .8s linear infinite; }
.quotes-loading.error strong { color: var(--ink); font: 430 24px/1.1 var(--display); letter-spacing: -.02em; }
.quotes-loading.error p { max-width: 42ch; }
@keyframes qgiro { to { transform: rotate(360deg); } }

/* ---------- botones ---------- */
.q-boton {
  min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 16px; border: 1px solid var(--hair); border-radius: var(--r-pill);
  background: var(--paper-raised); color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer; transition: border-color .15s, background .15s, opacity .15s;
}
.q-boton:hover { border-color: var(--ink-faint); }
.q-boton:active { transform: translateY(1px); }
.q-boton[disabled] { cursor: progress; opacity: .7; }
.q-boton-tinta { border-color: var(--ink); background: var(--ink); color: var(--paper-raised); }
.q-boton-tinta:hover { border-color: var(--ink); opacity: .88; }
.q-boton-fantasma { border-color: transparent; background: transparent; color: var(--ink-soft); }
.q-boton-fantasma:hover { border-color: transparent; background: var(--hair-soft); color: var(--ink); }
.q-icono { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--ink-soft); cursor: pointer; transition: background .15s, color .15s; }
.q-icono:hover { background: var(--hair-soft); color: var(--ink); }

/* ---------- barra superior ---------- */
.quotes-topbar {
  position: sticky; top: 0; z-index: 40; height: var(--q-top);
  display: flex; align-items: center; gap: 16px; padding: 0 24px;
  border-bottom: 1px solid var(--hair); background: var(--paper);
}
.quotes-top-left { display: flex; align-items: center; gap: 4px; flex: 1 1 0; min-width: 0; }
.quotes-back { padding: 0 16px 0 10px; }
.quotes-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.quotes-brand .marca-liebre { width: 26px; height: 18px; }
.quotes-brand .marca-palabra { width: 102px; height: 12px; }
.quotes-brand-seccion { padding-left: 12px; border-left: 1px solid var(--hair); color: var(--ink-soft); font-size: 14px; }
.quotes-top-actions { display: flex; flex: 1 1 0; justify-content: flex-end; align-items: center; gap: 8px; min-width: 0; }
.quotes-save-state { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; color: var(--ink-soft); font-size: 13px; white-space: nowrap; }
.quotes-save-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); }
.quotes-save-state .q-ico { width: 16px; height: 16px; }
.quotes-save-state.saved .q-ico { color: var(--q-exito); }
.quotes-save-state.saving i { background: var(--q-aviso); }
.quotes-save-state.error { color: var(--q-error); }

.quotes-vista { display: none; padding: 3px; border: 1px solid var(--hair); border-radius: var(--r-pill); background: var(--paper-raised); }
.quotes-vista button { min-height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-soft); font-size: 14px; font-weight: 500; cursor: pointer; }
.quotes-vista button[aria-pressed="true"] { background: var(--ink); color: var(--paper-raised); }
.quotes-vista .q-ico { width: 16px; height: 16px; }

/* ---------- espacio de trabajo ---------- */
.quotes-workspace {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(380px, 40vw, 540px);
  gap: 28px; align-items: start; max-width: 1680px; margin: 0 auto; padding: 28px 24px 96px;
}

/* ---------- lista de cotizaciones ---------- */
.quotes-rail { display: flex; flex-direction: column; min-height: 0; }
.quotes-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.quotes-rail-head h2 { margin: 0; font: 430 22px/1 var(--display); letter-spacing: -.02em; }
.quotes-new { min-height: 36px; padding: 0 14px 0 10px; gap: 6px; }
.quotes-search { position: relative; display: block; }
.quotes-search .q-ico { position: absolute; top: 50%; left: 13px; width: 17px; height: 17px; color: var(--ink-faint); transform: translateY(-50%); pointer-events: none; }
.quotes-search input { width: 100%; height: 40px; padding: 0 14px 0 38px; border: 1px solid var(--hair); border-radius: var(--r-pill); outline: none; background: var(--paper-raised); font-size: 14px; }
.quotes-search input:focus { border-color: var(--ink-faint); }
.quotes-list { display: grid; align-content: start; gap: 2px; margin-top: 14px; overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
.quote-list-row { position: relative; border-radius: 12px; transition: background .15s; }
.quote-list-row:hover { background: var(--hair-soft); }
.quote-list-row.on { background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--hair), var(--shadow-s); }
.quote-list-open { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 3px; padding: 12px 48px 12px 14px; border: 0; border-radius: inherit; background: transparent; text-align: left; cursor: pointer; }
.quote-list-open > b { display: block; overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.quote-list-title, .quote-list-meta { grid-column: 1 / -1; }
.quote-list-title { overflow: hidden; color: var(--ink-soft); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.quote-list-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 2px; color: var(--ink-faint); font-size: 12px; }
.quote-list-total { align-self: baseline; color: var(--ink); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.quote-list-delete {
  position: absolute; bottom: 6px; right: 6px; min-width: 36px; height: 36px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 10px; background: transparent; color: var(--ink-faint); font-size: 13px; font-weight: 600; cursor: pointer; opacity: 0; transition: opacity .15s, background .15s;
}
.quote-list-row:hover .quote-list-delete, .quote-list-row:focus-within .quote-list-delete, .quote-list-row.on .quote-list-delete { opacity: 1; }
.quote-list-delete:hover { background: var(--hair-soft); color: var(--ink); }
.quote-list-row.arming { box-shadow: inset 0 0 0 1px var(--q-error); }
.quote-list-row.arming .quote-list-delete { opacity: 1; padding: 0 12px; background: #A3422B; color: #FFFFFF; }
.quotes-list-empty { margin: 0; padding: 16px 14px; color: var(--ink-soft); font-size: 13px; }

.q-estado { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); }
.q-estado::before, .quote-status-punto { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); }
.q-estado-enviada::before, .quote-status-punto.q-estado-enviada { background: var(--q-aviso); }
.q-estado-aprobada::before, .quote-status-punto.q-estado-aprobada { background: var(--q-exito); }
.q-estado-rechazada::before, .quote-status-punto.q-estado-rechazada { background: var(--q-error); }

/* ---------- editor ---------- */
.quotes-editor { min-width: 0; display: grid; gap: 16px; }
.quote-editor-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 4px 2px 8px; }
.quote-editor-nombre { min-width: 0; }
.quote-editor-title h1 { margin: 0; font: 430 30px/1.1 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; text-wrap: balance; }
.quote-editor-title h1.sin-titulo { color: var(--ink-faint); }
.quote-editor-resumen { margin: 8px 0 0; color: var(--ink-soft); font-size: 14px; }
.quote-editor-resumen:empty { display: none; }
.quote-status { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; }
.quote-status-punto { position: absolute; left: 14px; pointer-events: none; }
.quotes-editor .quote-status select { height: 40px; padding: 0 36px 0 30px; border: 1px solid var(--hair); border-radius: var(--r-pill); background: var(--paper-raised) var(--q-chevron) no-repeat right 12px center / 16px; font-size: 14px; font-weight: 500; -webkit-appearance: none; appearance: none; cursor: pointer; }

.quote-section { border: 1px solid var(--hair); border-radius: var(--r-panel); background: var(--paper-raised); }
.quote-section-head { padding: 20px 24px 0; }
.quote-section-head h2 { margin: 0; font: 430 20px/1.1 var(--display); letter-spacing: -.02em; }
.quote-section-head p { margin: 4px 0 0; color: var(--ink-soft); font-size: 13px; }
.quote-section-body { padding: 18px 24px 24px; }
.quote-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.quote-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qspan { grid-column: 1 / -1; }

.qfield { display: grid; gap: 6px; min-width: 0; align-content: start; }
.qfield > label, .q-etiqueta { color: var(--ink-soft); font-size: 13px; font-weight: 500; }
.qfield > label small { margin-left: 4px; color: var(--ink-faint); font-size: 12px; font-weight: 400; }
.q-etiqueta { margin: 0 0 8px; }
.quotes-editor :where(input:not([type="radio"]):not([type="file"]), select, textarea) {
  width: 100%; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--hair); border-radius: 10px;
  outline: none; background: var(--paper); color: var(--ink); font-size: 15px; transition: border-color .15s, background .15s;
}
.quotes-editor :where(select) { padding-right: 36px; background: var(--paper) var(--q-chevron) no-repeat right 12px center / 16px; -webkit-appearance: none; appearance: none; cursor: pointer; text-overflow: ellipsis; }
.quotes-editor :where(textarea) { height: auto; min-height: 88px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.quotes-editor :where(input, select, textarea):hover { border-color: var(--ink-faint); }
.quotes-editor :where(input, select, textarea):focus { border-color: var(--ink-soft); background: var(--paper-raised); box-shadow: 0 0 0 3px var(--sel-soft); }
.quotes-editor input[type="date"] { font-variant-numeric: tabular-nums; }
.quotes-editor input[type="number"] { font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .quotes-editor input { color-scheme: dark; }
.q-inline-field { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; }
.q-inline-field > label { grid-column: 1 / -1; }
.q-inline-field .q-boton { min-height: 44px; }
.q-nota { margin: 0; color: var(--ink-soft); font-size: 13px; }
.q-nota-aviso { display: flex; gap: 8px; align-items: center; color: var(--q-aviso); }
.q-nota-aviso::before { content: ""; width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: currentColor; }

/* Alcance: decide si se cotiza en una sola moneda o si además se convierte a
   bolívares. Encabeza los servicios porque cambia en qué se escriben. */
.quote-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding-bottom: 18px; border-bottom: 1px solid var(--hair-soft); }
.quote-scope-switch { display: inline-flex; padding: 3px; border: 1px solid var(--hair); border-radius: var(--r-pill); background: var(--paper); }
.quote-scope-switch label { position: relative; }
.quote-scope-switch input { position: absolute; opacity: 0; pointer-events: none; }
.quote-scope-switch span { display: block; padding: 0 16px; border-radius: var(--r-pill); color: var(--ink-soft); font-size: 14px; font-weight: 500; line-height: 36px; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
.quote-scope-switch input:checked + span { background: var(--paper-raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair), var(--shadow-s); }
.quote-scope-switch input:focus-visible + span { outline: 2px solid var(--sel); outline-offset: 2px; }
.quote-scope-country { flex: 1 1 240px; }
.quotes-editor .quote-scope-country select { height: 42px; }
.quote-scope-note { flex: 1 1 100%; margin: 0; color: var(--ink-soft); font-size: 13px; }

/* ---------- líneas de servicio ---------- */
.quote-items { display: grid; }
.quote-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main tools" "nums nums";
  gap: 8px 8px; padding: 16px 0; border-bottom: 1px solid var(--hair-soft);
}
.quote-item-main { grid-area: main; display: grid; gap: 2px; min-width: 0; }
.quote-item-tools { grid-area: tools; display: flex; gap: 2px; align-items: flex-start; }
.quotes-editor .quote-item-name, .quotes-editor .quote-item-desc { border-color: transparent; background: transparent; margin-left: -12px; width: calc(100% + 12px); }
.quotes-editor .quote-item-name { height: 40px; font-size: 16px; font-weight: 600; }
.quotes-editor .quote-item-desc { min-height: 0; padding: 4px 12px 6px; overflow: hidden; color: var(--ink-soft); font-size: 14px; resize: none; }
.quotes-editor .quote-item-name:hover, .quotes-editor .quote-item-desc:hover { border-color: var(--hair); }
.quotes-editor .quote-item-name:focus, .quotes-editor .quote-item-desc:focus { border-color: var(--ink-soft); background: var(--paper-raised); }
.quote-item-nums { grid-area: nums; display: grid; grid-template-columns: minmax(76px, .7fr) minmax(112px, 1fr) minmax(112px, 1.1fr) minmax(120px, 1.2fr); gap: 10px; align-items: end; }
.quote-item-field { display: grid; gap: 4px; min-width: 0; }
.quote-item-field > span, .quote-item-amount > span { color: var(--ink-faint); font-size: 12px; }
.quotes-editor .quote-item-field input, .quotes-editor .quote-item-field select { height: 40px; }
.quotes-editor .quote-item-field input { text-align: right; }
.quote-item-amount { display: grid; gap: 4px; text-align: right; }
.quote-item-amount output { display: block; min-height: 40px; overflow: hidden; font-size: 15px; font-weight: 600; line-height: 40px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.quote-items-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.quote-library { display: flex; gap: 8px; min-width: 0; flex: 0 1 340px; }
.quotes-editor .quote-library select { height: 40px; font-size: 14px; }

/* Totales dentro del editor: el número que importa siempre a la vista. */
.quote-sum { width: min(100%, 380px); margin: 20px 0 0 auto; font-variant-numeric: tabular-nums; }
.quote-sum-row { display: grid; grid-template-columns: minmax(0, 1fr) 92px minmax(112px, auto); align-items: center; gap: 12px; min-height: 44px; color: var(--ink-soft); font-size: 14px; }
.quote-sum-row > span:first-child { grid-column: 1 / 3; }
.quote-sum-row b { color: var(--ink); font-weight: 500; text-align: right; }
.quote-pct { position: relative; }
.quotes-editor .quote-pct input { height: 36px; padding: 0 26px 0 8px; text-align: right; font-size: 14px; }
.quote-pct i { position: absolute; top: 50%; right: 10px; color: var(--ink-faint); font-size: 13px; font-style: normal; transform: translateY(-50%); pointer-events: none; }
.quote-sum-total { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--ink); color: var(--ink); font-weight: 600; }
.quote-sum-total strong { grid-column: 3; font: 500 26px/1.1 var(--display); letter-spacing: -.01em; text-align: right; white-space: nowrap; }
.quote-sum-ves { margin: 6px 0 0; color: var(--ink-soft); font-size: 13px; text-align: right; }

/* ---------- tasa de cambio ---------- */
.quote-rates { display: grid; gap: 16px; }
.rate-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.rate-options label { position: relative; cursor: pointer; }
.rate-options input { position: absolute; opacity: 0; }
.rate-options span { min-height: 64px; height: 100%; display: grid; align-content: center; gap: 2px; padding: 10px 12px; border: 1px solid var(--hair); border-radius: 12px; background: var(--paper); transition: border-color .15s; }
.rate-options label:hover span { border-color: var(--ink-faint); }
.rate-options b { font-size: 14px; font-weight: 600; }
.rate-options em { color: var(--ink-soft); font-size: 13px; font-style: normal; font-variant-numeric: tabular-nums; }
.rate-options input:checked + span { border-color: var(--ink); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--ink); }
.rate-options input:focus-visible + span { outline: 2px solid var(--sel); outline-offset: 2px; }
.rate-manual { max-width: 300px; }
.rate-manual span { position: relative; display: block; }
.quotes-editor .rate-manual input { padding-right: 40px; text-align: right; }
.rate-manual i { position: absolute; top: 50%; right: 12px; color: var(--ink-faint); font-size: 13px; font-style: normal; transform: translateY(-50%); }
.rate-disclaimer { margin: 0; color: var(--ink-soft); font-size: 13px; }
.rate-disclaimer a { color: var(--ink); text-underline-offset: 3px; }

/* ---------- formas de pago ---------- */
.quote-payments { display: grid; gap: 10px; }
.quote-payment { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 1.5fr) auto; gap: 8px; align-items: start; }
.quote-payment .quote-item-tools { grid-area: auto; padding-top: 2px; }
.quotes-editor .quote-payment textarea { min-height: 44px; padding-top: 11px; padding-bottom: 11px; overflow: hidden; resize: none; }

/* ---------- tu marca ---------- */
.quote-brand > summary { display: flex; align-items: center; gap: 14px; padding: 16px 20px 16px 24px; list-style: none; cursor: pointer; border-radius: var(--r-panel); }
.quote-brand > summary::-webkit-details-marker { display: none; }
.quote-brand > summary:hover .quote-brand-abrir { background: var(--hair-soft); }
.quote-brand-thumb { width: 48px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--hair); border-radius: 10px; background: #FFFFFF; }
.quote-brand-thumb.vacio { border-style: dashed; background: var(--paper); }
.quote-brand-thumb img { width: 100%; height: 100%; padding: 4px; object-fit: contain; }
.quote-brand-resumen { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.quote-brand-titulo { font: 430 20px/1.1 var(--display); letter-spacing: -.02em; }
.quote-brand-texto { overflow: hidden; color: var(--ink-soft); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.quote-brand-abrir { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px; background: var(--q-chevron) no-repeat center / 18px; transition: transform .2s, background-color .15s; }
.quote-brand[open] .quote-brand-abrir { transform: rotate(180deg); }
.quote-brand[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.quote-logo-control { display: flex; align-items: center; gap: 16px; }
.quote-logo-thumb { width: 112px; height: 72px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border: 1px dashed var(--hair); border-radius: 12px; padding: 8px; background: #FFFFFF; color: #736E66; font-size: 12px; }
.quote-logo-thumb img { width: 100%; height: 100%; object-fit: contain; }
.quote-logo-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.quote-logo-acciones small { flex: 1 1 100%; color: var(--ink-soft); font-size: 12px; }
.qfile { position: relative; overflow: hidden; }
.qfile input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.qfile:focus-within { outline: 2px solid var(--sel); outline-offset: 2px; }

/* ---------- documento ---------- */
.quote-preview-shell { position: sticky; top: calc(var(--q-top) + 24px); min-width: 0; max-height: calc(100vh - var(--q-top) - 40px); overflow-y: auto; overscroll-behavior: contain; padding: 2px 12px 48px; scrollbar-width: thin; scrollbar-color: var(--hair) transparent; }
.quote-paper-frame { position: relative; overflow: hidden; border-radius: 3px; background: #FFFFFF; box-shadow: var(--shadow-m); }
.quote-paper-frame .quote-paper { transform: scale(var(--q-escala, 1)); transform-origin: top left; }

.quote-paper {
  width: 816px; min-height: 1056px; display: flex; flex-direction: column; padding: 44px 60px 32px;
  background: #FFFFFF; color: #14130F; font: 400 13px/1.45 Inter, -apple-system, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.quote-paper h1, .quote-paper h2, .quote-paper p, .quote-paper dl, .quote-paper dd { margin: 0; }
.qp-falta { opacity: .42; }
.qp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding-bottom: 18px; border-bottom: 1px solid #14130F; }
.qp-logo { display: block; max-width: 220px; max-height: 64px; object-fit: contain; object-position: left bottom; }
.qp-marca-nombre { font: 500 28px/1 "Scoutie Sans", Inter, sans-serif; letter-spacing: -.02em; }
.qp-tipo { text-align: right; }
.qp-tipo strong { display: block; font: 430 30px/1 "Scoutie Sans", Inter, sans-serif; letter-spacing: -.02em; }
.qp-tipo span { display: block; margin-top: 6px; color: #5E5A52; font-size: 13px; }
.qp-tipo i { font-style: normal; }
.qp-partes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 32px; padding: 16px 0; border-bottom: 1px solid #E5E1D9; }
.qp-label { display: block; margin-bottom: 3px; color: #736E66; font-size: 12px; }
.qp-parte strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.qp-parte p { margin-top: 2px; color: #5E5A52; overflow-wrap: anywhere; }
.qp-fechas { display: grid; gap: 8px; align-content: start; }
.qp-fechas dt { color: #736E66; font-size: 12px; }
.qp-fechas dd { font-size: 14px; font-weight: 500; white-space: nowrap; }
.qp-proyecto { padding: 18px 0 14px; }
.qp-proyecto h1 { max-width: 640px; font: 430 32px/1.08 "Scoutie Sans", Inter, sans-serif; letter-spacing: -.02em; text-wrap: balance; }
.qp-mensaje { max-width: 64ch; margin-top: 8px !important; color: #3A3833; font-size: 13.5px; line-height: 1.5; white-space: pre-line; }
.qp-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.qp-table th { padding: 0 0 8px 12px; border-bottom: 1px solid #14130F; color: #736E66; font-size: 12px; font-weight: 500; text-align: right; }
.qp-table th:first-child { width: 49%; padding-left: 0; text-align: left; }
.qp-table th:nth-child(2) { width: 15%; }
.qp-table td { padding: 9px 0 9px 12px; border-bottom: 1px solid #E5E1D9; font-size: 13.5px; text-align: right; vertical-align: top; }
.qp-table td:first-child { padding-left: 0; text-align: left; }
.qp-table td:nth-child(n+3) { font-variant-numeric: tabular-nums; }
.qp-table td:last-child { font-weight: 500; }
.qp-table td b { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; }
.qp-table td small { display: block; margin-top: 2px; color: #5E5A52; font-size: 12.5px; line-height: 1.4; white-space: pre-line; }
.qp-table tr { break-inside: avoid; }
/* Cierre: condiciones y formas de pago a la izquierda, totales a la derecha;
   así una cotización normal cabe en una sola hoja carta. */
.qp-resumen { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "cierre lado"; gap: 48px; margin-top: 16px; break-inside: avoid; }
.qp-lado { grid-area: lado; }
.qp-totales { font-variant-numeric: tabular-nums; }
.qp-total-row { display: flex; justify-content: space-between; gap: 24px; padding: 3px 0; color: #5E5A52; font-size: 13.5px; }
.qp-total-row b { color: #14130F; font-weight: 500; }
.qp-total-final { align-items: baseline; margin-top: 6px; padding-top: 10px; border-top: 1px solid #14130F; color: #14130F; }
.qp-total-final span { font-size: 14px; font-weight: 600; }
.qp-total-final strong { font: 500 28px/1 "Scoutie Sans", Inter, sans-serif; letter-spacing: -.01em; white-space: nowrap; }
.qp-ves { display: flex; justify-content: space-between; gap: 24px; padding-top: 10px; color: #5E5A52; font-size: 13.5px; }
.qp-ves b { color: #14130F; font-weight: 600; }
.qp-tasa { margin-top: 4px !important; color: #736E66; font-size: 12px; text-align: right; }
.qp-cierre { grid-area: cierre; display: grid; gap: 14px; align-content: start; padding-top: 5px; }
.qp-cierre h2, .qp-aceptacion h2 { margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.qp-cierre p { color: #3A3833; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.qp-pago + .qp-pago { margin-top: 10px; }
.qp-pago b { display: block; font-size: 13px; font-weight: 600; }
.qp-pago p { margin-top: 2px !important; }
.qp-aceptacion { margin-top: 18px; }
.qp-aceptacion h2 { margin-bottom: 26px; }
.qp-firma + .qp-firma { margin-top: 22px; }
.qp-firma span { display: block; border-top: 1px solid #14130F; }
.qp-firma p { margin-top: 6px !important; color: #5E5A52; font-size: 12px; }
.qp-footer { display: flex; justify-content: space-between; gap: 20px; margin-top: auto; padding-top: 12px; color: #736E66; font-size: 12px; }
/* Mientras html2pdf copia la hoja: sin guías de lo que falta y con el aire
   vertical que ya ponen los márgenes de la página. */
.quote-paper.exportando { min-height: 0; padding-top: 8px; padding-bottom: 8px; }
.quote-paper.exportando .qp-falta { display: none; }

/* ---------- aviso flotante ---------- */
.qtoast { position: fixed; z-index: 100; left: 50%; bottom: 24px; max-width: min(520px, calc(100vw - 32px)); padding: 12px 18px; border-radius: 16px; background: var(--ink); color: var(--paper-raised); box-shadow: var(--shadow-m); font-size: 14px; line-height: 1.4; opacity: 0; transform: translate(-50%, 10px); pointer-events: none; transition: opacity .18s ease-out, transform .18s ease-out; }
.qtoast.on { opacity: 1; transform: translate(-50%, 0); }
.qtoast.error { background: #A3422B; color: #FFFFFF; }

.quotes-velo { position: fixed; inset: var(--q-top) 0 0; z-index: 30; background: var(--veil); }

/* ---------- escritorio amplio: lista fija a la izquierda ---------- */
@media (min-width: 1400px) {
  .quotes-workspace { grid-template-columns: 272px minmax(0, 1fr) clamp(460px, 34vw, 580px); gap: 32px; padding-inline: 32px; }
  .quotes-rail { position: sticky; top: calc(var(--q-top) + 28px); max-height: calc(100vh - var(--q-top) - 56px); }
  .quotes-rail-toggle, .quotes-velo { display: none !important; }
}

/* ---------- portátil e iPad horizontal: la lista es un panel ---------- */
@media (max-width: 1399px) {
  .quotes-rail {
    position: fixed; z-index: 35; top: var(--q-top); bottom: 0; left: 0; width: min(360px, 92vw); padding: 20px 16px;
    border-right: 1px solid var(--hair); background: var(--paper); box-shadow: var(--shadow-l);
    transform: translateX(-104%); visibility: hidden; transition: transform .16s ease-in, visibility 0s linear .16s;
  }
  body.rail-abierto .quotes-rail { transform: none; visibility: visible; transition: transform .22s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
  .quotes-list { flex: 1 1 auto; }
}
@media (max-width: 1199px) {
  .quotes-brand { display: none; }
  .quotes-top-left { flex: 0 0 auto; }
}

/* ---------- iPad vertical: editar o ver el documento ---------- */
@media (max-width: 1023px) {
  .quotes-topbar { gap: 8px; padding: 0 16px; }
  .quotes-vista { display: inline-flex; }
  .quotes-back span, .quotes-print span, #save-quote { display: none; }
  /* Solo el icono: un cuadrado con el icono en el centro. */
  .quotes-back, .quotes-print { width: 44px; min-width: 44px; padding: 0; justify-content: center; }
  .quotes-save-state span { display: none; }
  .quotes-save-state.error span { display: inline; }
  .quotes-workspace { grid-template-columns: minmax(0, 1fr); padding: 20px 20px 96px; }
  .quote-preview-shell { display: none; position: static; max-height: none; overflow: visible; }
  body.vista-documento .quotes-editor { display: none; }
  body.vista-documento .quote-preview-shell { display: block; }
}
@media (max-width: 700px) {
  .quotes-vista button { padding: 0 10px; }
  .quotes-vista .q-ico { display: none; }
  .quotes-rail-toggle span, #export-quote span { display: none; }
  .quotes-rail-toggle, #export-quote { width: 40px; padding: 0; }
  .quote-grid, .quote-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .quote-section-head { padding-inline: 18px; }
  .quote-section-body { padding-inline: 18px; }
  .quote-item-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote-payment { grid-template-columns: minmax(0, 1fr) auto; }
  .quote-payment textarea { grid-column: 1; }
  .quote-payment .quote-item-tools { grid-column: 2; grid-row: 1 / 3; flex-direction: column; }
  .quote-editor-title { flex-direction: column; }
}

/* ---------- táctil: objetivos de 44 px y texto que no hace zoom ---------- */
@media (pointer: coarse) {
  .q-boton, .quotes-vista button { min-height: 44px; }
  .q-boton { min-width: 44px; }
  .q-icono, .quote-list-delete { min-width: 44px; height: 44px; }
  .quote-list-delete { opacity: 1; }
  .quotes-editor input:not([type="radio"]):not([type="file"]), .quotes-editor select, .quotes-editor textarea, .quotes-search input { font-size: 16px; }
  .quotes-editor .quote-item-field input, .quotes-editor .quote-item-field select, .quotes-editor .quote-library select, .quotes-editor .quote-pct input { height: 44px; }
}
@media (hover: none) { .quote-list-delete { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .quotes-rail, body.rail-abierto .quotes-rail, .qtoast, .quote-brand-abrir { transition: none; }
  .quotes-loading-giro { animation: none; }
}

/* ---------- impresión ---------- */
/* Carta, no A4: es el tamaño de papel de América y era lo que descuadraba
   la impresión y el PDF guardado desde el navegador. Los márgenes laterales
   los pone la propia hoja. */
@page { size: letter; margin: 8mm 0; }
@media print {
  html, body { width: auto !important; height: auto !important; min-height: 0 !important; overflow: visible !important; background: #FFFFFF !important; }
  .quotes-loading, .quotes-topbar, .quotes-rail, .quotes-velo, .quotes-editor, .qtoast { display: none !important; }
  #quotes-app, .quotes-workspace, .quote-preview-shell { display: block !important; position: static !important; width: 100% !important; max-width: none !important; max-height: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; }
  .quote-paper-frame { height: auto !important; overflow: visible !important; border-radius: 0; box-shadow: none !important; }
  .quote-paper-frame .quote-paper { transform: none !important; }
  #quote-paper { width: 100% !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .qp-falta { display: none !important; }
  .qp-table tr, .qp-resumen, .qp-pago { break-inside: avoid; }
}

/* ============================================================
   CABECERA EN iPAD — tres grupos claros
   ------------------------------------------------------------
   Volver y lista a la izquierda; Editar o Documento en el centro
   (iPad vertical); guardar, imprimir y descargar a la derecha, con la
   descarga como acción principal. Todo mide al menos 44 × 44 px con el
   dedo y nada se monta encima de lo de al lado al girar.
   ============================================================ */
.quotes-top-left, .quotes-top-actions { flex-wrap: nowrap; }
.quotes-top-actions { gap: 8px; padding-left: 8px; }
.quotes-top-actions > .q-boton { flex: 0 0 auto; }
@media (max-width: 1199px) and (min-width: 1024px) {
  .quotes-topbar { gap: 12px; padding: 0 20px; }
}
@media (max-width: 1023px) {
  .quotes-vista { flex: 0 0 auto; }
  .quotes-top-actions { gap: 6px; }
  .quotes-save-state { margin-right: 2px; }
}

/* PDF listo en iPad: guardar en Archivos o descargar, con un toque. */
.q-pdf-listo {
  position: fixed; z-index: 90; left: 50%; bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: grid; gap: 12px; width: min(420px, calc(100vw - 32px)); padding: 18px;
  border: 1px solid var(--hair); border-radius: 18px; background: var(--paper-raised);
  box-shadow: var(--shadow-l); color: var(--ink);
}
.q-pdf-listo p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.q-pdf-listo strong { display: block; margin-bottom: 2px; color: var(--ink); font-size: 15px; font-weight: 600; word-break: break-word; }
.q-pdf-listo-acciones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.q-pdf-listo .q-boton { min-height: 44px; }