/* MIDImetrix · Cotizador — estilos de la aplicación y del documento PDF */

:root {
  --purple: #553E8A;
  --purple-dk: #3C2B64;
  --purple-lt: #EFEBF7;
  --olive: #6E7A3A;
  --olive-lt: #C9CE8E;
  --marino: #2B374D;
  --ink: #1B1B1F;
  --muted: #5F6472;
  --faint: #8A8E9B;
  --line: #E4E2EC;
  --bg: #F6F5F9;
  --surface: #FFFFFF;
  --danger: #B3261E;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(30, 20, 60, .06), 0 4px 16px rgba(30, 20, 60, .06);
  --font: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); font-size: 15px; line-height: 1.45; }
h1, h2, h3, h4, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
small { font-weight: 400; }

/* ---------- barra superior ---------- */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 24px; padding: 10px 24px; background: var(--surface); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 44px; width: auto; display: block; }
.app-name { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--purple); font-weight: 700; padding-left: 12px; border-left: 2px solid var(--olive); }
.tabs { display: flex; gap: 4px; flex: 1; }
.tabs button { border: 0; background: none; padding: 9px 14px; border-radius: 8px; font-weight: 600; color: var(--muted); }
.tabs button:hover { background: var(--purple-lt); color: var(--purple); }
.tabs button.on { background: var(--purple); color: #fff; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.mini-total { font-size: 14px; color: var(--muted); }
.mini-total b { color: var(--purple); font-size: 16px; }
.folio { font-size: 12px; letter-spacing: .08em; color: var(--muted); background: var(--bg); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }

/* ---------- botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1.5px solid transparent; border-radius: 10px; padding: 10px 16px; font-weight: 700; font-size: 14px; line-height: 1.2; transition: background .15s, border-color .15s, color .15s; text-align: center; }
.btn.sm { padding: 7px 12px; font-size: 13px; }
.btn.block { display: flex; width: 100%; }
.btn-primary { background: var(--purple); color: #fff; }
.btn-primary:hover { background: var(--purple-dk); }
.btn-line { background: #fff; border-color: var(--purple); color: var(--purple); }
.btn-line:hover { background: var(--purple-lt); }
.btn-ghost { background: none; color: var(--muted); }
.btn-ghost:hover { background: var(--bg); color: var(--ink); }
.btn-on { background: var(--olive); color: #fff; }
.btn-on:hover { background: #5b662f; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:focus-visible, .chip:focus-visible, .tabs button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .stepper button:focus-visible { outline: 3px solid #9F95D1; outline-offset: 1px; }
.link { background: none; border: 0; padding: 0; color: var(--purple); font-weight: 700; font-size: 13px; text-decoration: underline; margin: 2px 0 10px; text-align: left; }
.file { cursor: pointer; }

input[type=text], input[type=number], input[type=date], input[type=search], select, textarea {
  width: 100%; border: 1.5px solid var(--line); background: #fff; border-radius: 9px; padding: 9px 11px; font-size: 14px;
}
input:focus, select:focus, textarea:focus { border-color: var(--purple); }
textarea { resize: vertical; }
input[type=color] { width: 36px; height: 30px; padding: 0; border: 1.5px solid var(--line); border-radius: 8px; background: none; }

.view { display: none; }
.view.on { display: block; }

/* ---------- cotizador ---------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 24px; max-width: 1480px; margin: 0 auto; padding: 20px 24px 60px; align-items: start; }
.layout > * { min-width: 0; }
.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; position: sticky; top: 65px; z-index: 5; background: var(--bg); padding: 10px 0; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.chip { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 13px; font-size: 13px; font-weight: 600; color: var(--muted); }
.chip:hover { border-color: var(--purple); color: var(--purple); }
.chip.on { background: var(--purple); border-color: var(--purple); color: #fff; }
#buscar { width: 220px; }

.cat { margin-bottom: 30px; }
.cat-head { margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--olive); }
.cat-head h2 { font-size: 20px; color: var(--purple); }
.cat-head p { color: var(--muted); font-size: 13.5px; margin-top: 2px; }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.plan-card { position: relative; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 20px 18px 16px; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.plan-card.feat { border-color: var(--purple); }
.plan-card.sel { border-color: var(--olive); box-shadow: 0 0 0 3px rgba(110, 122, 58, .22), var(--shadow); }
.plan-card .badge { position: absolute; top: -11px; left: 16px; background: var(--olive); color: #fff; font-size: 10.5px; letter-spacing: .16em; font-weight: 700; padding: 4px 10px; border-radius: 6px; }
.plan-card h3 { font-size: 22px; }
.plan-card .ed { font-size: 11.5px; letter-spacing: .16em; color: var(--purple); margin-top: 2px; }
.plan-card .price { font-size: 28px; font-weight: 700; margin-top: 12px; }
.plan-card .price small { font-size: 13px; color: var(--muted); }
.plan-card .price2 { font-size: 13px; color: var(--muted); }
.plan-card .ahorro { font-size: 12px; font-weight: 700; color: var(--olive); margin-top: 6px; }
.plan-card .ideal { font-size: 13px; color: var(--muted); margin: 10px 0; }
.plan-card ul { margin: 0 0 6px; padding: 0; list-style: none; flex: 1; }
.plan-card li { position: relative; padding-left: 16px; font-size: 13.5px; margin: 5px 0; }
.plan-card li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--olive); }

.addons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.addon-card { background: #fff; border: 1.5px solid var(--line); border-left: 5px solid var(--purple); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
.addon-card.sel { border-color: var(--olive); border-left-color: var(--olive); background: #FBFCF4; }
.addon-card.off { opacity: .6; }
.addon-card h4 { font-size: 15px; }
.addon-card p { font-size: 13px; color: var(--muted); margin-top: 3px; }
.addon-card .hint { color: var(--danger); font-weight: 600; }
.addon-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.addon-foot .price { font-size: 20px; font-weight: 700; }
.addon-foot .price small { font-size: 12px; color: var(--muted); }

.svc-list { background: #fff; border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; }
.svc-thead, .svc { display: grid; grid-template-columns: minmax(0, 1fr) 118px 118px 124px; gap: 12px; align-items: center; padding: 10px 16px; }
.svc-thead { background: var(--purple); color: #fff; font-size: 11px; letter-spacing: .14em; font-weight: 700; }
.svc { border-top: 1px solid var(--line); }
.svc:nth-child(even) { background: #FAF9FC; }
.svc.sel { background: #F6F8EC; box-shadow: inset 4px 0 0 var(--olive); }
.svc-main b { font-size: 14.5px; }
.svc-main p { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.svc-main .bonus, .ln-main .bonus { color: var(--olive); font-weight: 700; font-size: 12px; }
.svc-unit { font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.tag { font-style: normal; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; background: var(--bg); color: var(--muted); padding: 1px 7px; border-radius: 999px; font-weight: 700; border: 1px solid var(--line); }
.tag.rec { background: var(--purple-lt); color: var(--purple); border-color: transparent; }
.svc-price { font-weight: 700; font-size: 16px; text-align: right; }
.svc-price small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; }
.svc-ctl { display: flex; justify-content: flex-end; }
.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--purple); border-radius: 10px; overflow: hidden; background: #fff; }
.stepper button { width: 32px; height: 34px; border: 0; background: var(--purple-lt); color: var(--purple); font-size: 18px; font-weight: 700; line-height: 1; }
.stepper button:hover { background: var(--purple); color: #fff; }
.stepper input { width: 46px; border: 0; border-radius: 0; text-align: center; padding: 6px 2px; font-weight: 700; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper.sm button { width: 26px; height: 26px; font-size: 15px; }
.stepper.sm span { min-width: 26px; text-align: center; font-weight: 700; font-size: 13px; }
.empty { padding: 40px 16px; text-align: center; color: var(--muted); }

/* ---------- resumen ---------- */
.summary { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow-y: auto; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 18px; box-shadow: var(--shadow); }
.sum-head h2 { font-size: 20px; color: var(--purple); margin-bottom: 10px; }
.sum-client { display: grid; gap: 8px; margin-bottom: 14px; }
label { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); }
label input, label textarea, label select { margin-top: 4px; font-weight: 400; color: var(--ink); }
.sum-empty { background: var(--bg); border-radius: 10px; padding: 18px; text-align: center; color: var(--muted); font-size: 14px; }
.sum-empty b { color: var(--ink); }
.lines { list-style: none; margin: 0; padding: 0; }
.lines li { display: grid; grid-template-columns: minmax(0, 1fr) auto 22px; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: start; }
.ln-main b { font-size: 14px; display: block; }
.ln-main span { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.ln-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 14px; }
.lines .x { border: 0; background: none; color: var(--faint); font-size: 20px; line-height: 1; padding: 0; }
.lines .x:hover { color: var(--danger); }
.gift { display: flex; gap: 10px; background: #F6F8EC; border: 1px dashed var(--olive); border-radius: 10px; padding: 10px 12px; margin: 12px 0 0; font-size: 12.5px; color: #4a5427; }
.opts { display: grid; gap: 10px; margin: 14px 0; }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--bg); border-radius: 10px; padding: 3px; }
.seg button { border: 0; background: none; padding: 8px; border-radius: 8px; font-weight: 700; font-size: 13px; color: var(--muted); }
.seg button.on { background: #fff; color: var(--purple); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.desc { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.desc input { width: 70px; margin: 0; }
.tblock { margin-top: 8px; }
.tblock .tt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--olive); margin-bottom: 2px; }
.trow { display: flex; justify-content: space-between; font-size: 13.5px; padding: 2px 0; color: var(--muted); }
.trow.strong { color: var(--ink); font-weight: 700; border-top: 1px solid var(--line); margin-top: 3px; padding-top: 5px; }
.dnote { font-size: 12px; color: var(--olive); font-weight: 700; margin-top: 8px; }
.grand { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--purple); color: #fff; border-radius: 12px; padding: 14px 16px; margin-top: 14px; }
.grand span { font-weight: 700; font-size: 14px; }
.grand small { display: block; font-weight: 400; font-size: 11.5px; opacity: .8; }
.grand b { font-size: 24px; white-space: nowrap; }
.custom { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.custom summary { cursor: pointer; font-weight: 700; color: var(--purple); font-size: 13.5px; }
.custom-form { display: grid; gap: 8px; margin-top: 10px; }
.row { display: flex; gap: 8px; align-items: center; }
.chk { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; color: var(--ink); font-size: 13.5px; }
.chk input { width: auto; margin: 3px 0 0; }
.chk.sub { margin-left: 22px; }
.chk em { color: var(--muted); font-size: 12px; }
.sum-actions { display: grid; gap: 8px; margin-top: 16px; }
.sum-actions .row .btn { flex: 1; }

/* ---------- documento (formulario + vista previa) ---------- */
.doc-layout { display: grid; grid-template-columns: 390px minmax(0, 1fr); gap: 0; align-items: start; min-height: calc(100vh - 66px); }
.doc-form { position: sticky; top: 65px; height: calc(100vh - 65px); overflow-y: auto; background: #fff; border-right: 1px solid var(--line); padding: 16px 18px 40px; }
.doc-form-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.doc-form-head h2 { font-size: 18px; color: var(--purple); }
.doc-form details { border-bottom: 1px solid var(--line); padding: 10px 0; }
.doc-form summary { cursor: pointer; font-weight: 700; font-size: 14px; padding: 4px 0; color: var(--ink); }
.doc-form details > label, .doc-form details > .two, .doc-form details > .obs { margin-top: 10px; }
.doc-form details > .chk { margin-top: 9px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.obs { display: grid; gap: 6px; }
.obs textarea { margin-bottom: 10px; }
.help { font-size: 12px; color: var(--muted); margin-top: 6px; }
.logo-up { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.logo-prev { width: 110px; height: 64px; border: 1.5px dashed var(--line); border-radius: 10px; display: grid; place-items: center; color: var(--faint); font-size: 12px; background: var(--bg); overflow: hidden; }
.logo-prev img { max-width: 100%; max-height: 100%; }
.accent-row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.swatches { display: flex; gap: 6px; align-items: center; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--line); padding: 0; }
.swatch.on { box-shadow: 0 0 0 2.5px var(--olive); }
.doc-stage { padding: 0 24px 40px; min-width: 0; }
.doc-toolbar { position: sticky; top: 65px; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 12px 0; background: var(--bg); color: var(--muted); font-size: 13px; }
.grow { flex: 1; }
.doc-scroll { display: flex; justify-content: center; }
#docScale { position: relative; }
#docPages { width: 816px; transform-origin: top left; display: flex; flex-direction: column; gap: 24px; }
.doc-tip { margin: 16px auto 0; max-width: 700px; font-size: 13px; color: var(--muted); text-align: center; }
.doc-empty { padding: 40px; text-align: center; color: var(--muted); }
.fab { display: none; }

/* ---------- páginas auxiliares ---------- */
.page-wrap { max-width: 1040px; margin: 0 auto; padding: 28px 24px 60px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h1 { font-size: 26px; color: var(--purple); }
.page-head p { color: var(--muted); margin-top: 3px; }
.page-wrap h3 { margin: 26px 0 8px; font-size: 17px; color: var(--purple); }
.tbl { width: 100%; border-collapse: collapse; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; }
.tbl th { background: var(--purple); color: #fff; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; text-align: left; padding: 10px 14px; }
.tbl td { padding: 9px 14px; border-top: 1px solid var(--line); font-size: 14px; vertical-align: middle; }
.tbl tr.mod td { background: #FFFBEA; }
.tbl .num, .tbl th.num { text-align: right; }
.tbl td input[type=number] { width: 130px; }
.tbl .acts { text-align: right; white-space: nowrap; }
.muted { color: var(--muted); font-size: 13px; }
.iva { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.iva input { width: 70px; margin: 0; }

.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 10px; font-size: 14px; opacity: 0; pointer-events: none; transition: .25s; z-index: 50; max-width: 90vw; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* =====================================================================
   DOCUMENTO PDF — hoja carta 816 × 1056 px
   ===================================================================== */
.doc-page { width: 816px; height: 1056px; position: relative; overflow: hidden; flex: none; background: #FAFAFA; color: var(--ink); font-family: var(--font); font-size: 13.5px; line-height: 1.45; box-shadow: 0 2px 18px rgba(40, 20, 80, .18); }

/* portada */
.doc-cover { background: linear-gradient(180deg, var(--accent-dk) 0%, var(--accent) 100%); color: #fff; padding: 64px 74px 56px; display: flex; flex-direction: column; }
.cv-logo { width: 250px; height: auto; display: block; margin-left: -14px; margin-top: -22px; }
.cv-tag { font-size: 16px; color: var(--accent-lt); margin-top: -2px; margin-left: 2px; }
.cv-mid { margin-top: auto; margin-bottom: auto; padding-top: 70px; }
.cv-eyebrow { font-size: 13px; letter-spacing: .26em; font-weight: 700; color: #CDD196; margin-bottom: 14px; }
.cv-mid h1 { font-size: 52px; line-height: 1.08; font-weight: 700; letter-spacing: -.01em; max-width: 650px; }
.cv-sub { font-size: 19px; line-height: 1.5; color: var(--accent-lt); margin-top: 22px; max-width: 590px; }
.cv-card { background: #fff; color: var(--ink); border-radius: 12px; border-left: 8px solid var(--accent-md); padding: 28px 32px; display: flex; justify-content: space-between; gap: 24px; align-items: center; }
.cv-card-main { min-width: 0; flex: 1; }
.cv-label { font-size: 12px; letter-spacing: .26em; font-weight: 700; color: var(--accent-dk); }
.cv-card h2 { font-size: 28px; color: var(--accent-dk); margin: 6px 0 8px; line-height: 1.15; }
.cv-line { font-size: 14.5px; color: #4a4f5c; }
.cv-meta { font-size: 13.5px; color: #4a4f5c; margin-top: 12px; }
.cv-meta + .cv-meta { margin-top: 8px; }
.cv-meta b { color: var(--accent); letter-spacing: .14em; font-size: 11.5px; margin-right: 6px; }
.cv-meta b.sp { margin-left: 18px; }
.cv-card-logo { width: 220px; height: 130px; display: grid; place-items: center; }
.cv-card-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cv-foot { font-size: 12px; color: var(--accent-lt); margin-top: 22px; line-height: 1.5; max-width: 700px; }

/* páginas interiores */
.doc-inner { padding: 46px 64px 0; display: flex; flex-direction: column; }
.dp-head { display: flex; justify-content: space-between; align-items: center; height: 74px; border-bottom: 1.5px solid #DAD8E0; flex: none; }
.dp-logo { height: 62px; width: auto; margin-left: -6px; }
.dp-client { max-height: 62px; max-width: 170px; object-fit: contain; }
.dp-body { flex: 1; min-height: 0; overflow: hidden; padding-top: 26px; }
.dp-foot { flex: none; height: 62px; margin: 0 0 0; border-top: 1.5px solid #DAD8E0; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .04em; color: #6c7080; }
.dp-num { margin-left: 8px; color: #9a9dab; }
.dp-block { margin-bottom: 20px; }
.dp-block.tbl-part { margin-bottom: 0; }
.dp-block.tbl-part + .dp-block:not(.tbl-part) { margin-top: 20px; }
.dp-block.grp { margin-top: 20px; }
.dp-eyebrow { font-size: 12px; letter-spacing: .24em; font-weight: 700; color: var(--accent); text-transform: uppercase; margin-bottom: 10px; }
.dp-eyebrow.olive { color: var(--olive); }
.dp-h1 { font-size: 32px; line-height: 1.12; font-weight: 700; margin-bottom: 14px; }
.dp-lead { font-size: 15px; line-height: 1.65; color: #2b2e38; white-space: pre-line; }
.dp-lead.sm { font-size: 13px; line-height: 1.55; color: #4a4f5c; }
.dp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.dp-cell { border-top: 3px solid var(--olive); padding-top: 10px; break-inside: avoid; }
.dp-cell h4 { font-size: 15px; margin-bottom: 4px; }
.dp-cell p { font-size: 13px; line-height: 1.5; color: #4a4f5c; white-space: pre-line; }
.dp-grid2.cond .dp-cell p { font-size: 12.5px; }

.dp-rec { display: grid; grid-template-columns: 250px 1fr; gap: 26px; background: var(--accent); color: #fff; border-radius: 12px; padding: 26px 28px; }
.dp-rec-k { font-size: 11.5px; letter-spacing: .22em; font-weight: 700; color: #CDD196; }
.dp-rec h3 { font-size: 22px; line-height: 1.2; margin: 8px 0 12px; }
.dp-rec-p { font-size: 34px; font-weight: 700; line-height: 1; }
.dp-rec-p small { font-size: 13px; opacity: .8; }
.dp-rec-r { font-size: 13.5px; line-height: 1.6; color: #EDE8F6; white-space: pre-line; }

.dp-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: stretch; }
.dp-plan { position: relative; background: #fff; border: 1.5px solid #DAD8E0; border-radius: 12px; padding: 18px 15px 14px; display: flex; flex-direction: column; }
.dp-plan.hl { background: var(--accent); border-color: var(--accent); color: #fff; }
.dp-badge { position: absolute; top: -10px; left: 14px; background: var(--olive); color: #fff; font-size: 9.5px; letter-spacing: .16em; font-weight: 700; padding: 4px 9px; border-radius: 5px; }
.dp-plan h3 { font-size: 22px; }
.dp-ed { font-size: 10.5px; letter-spacing: .16em; color: var(--accent); margin-top: 2px; }
.dp-plan.hl .dp-ed { color: #CDD196; }
.dp-price { font-size: 25px; font-weight: 700; margin-top: 10px; line-height: 1.1; }
.dp-price small { font-size: 11px; font-weight: 400; opacity: .7; }
.dp-price2 { font-size: 11.5px; opacity: .75; padding-bottom: 8px; border-bottom: 1px solid rgba(120, 120, 140, .35); margin-bottom: 8px; }
.dp-plan ul { margin: 0; padding: 0; list-style: none; flex: 1; }
.dp-plan li { position: relative; padding-left: 13px; font-size: 11.5px; line-height: 1.32; margin: 4px 0; }
.dp-plan li::before { content: ""; position: absolute; left: 0; top: .42em; width: 6px; height: 6px; border-radius: 50%; background: var(--olive); }
.dp-plan.hl li::before { background: #CDD196; }
.dp-pnote { font-size: 10.5px; font-weight: 700; color: var(--accent); margin-top: 8px; padding-top: 7px; border-top: 1.5px dashed #CFCDD8; line-height: 1.35; }
.dp-plan.hl .dp-pnote { color: #fff; border-color: rgba(255, 255, 255, .4); }
.dp-addons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dp-addon { border-radius: 12px; color: #fff; padding: 15px 18px; border-left: 6px solid #F2B705; display: flex; flex-direction: column; gap: 3px; }
.dp-addon.yt { background: #D9251C; border-left-color: #8E130D; }
.dp-addon.gw { background: #4285F4; }
.dp-addon .k { font-size: 9.5px; letter-spacing: .18em; font-weight: 700; opacity: .9; }
.dp-addon h4 { font-size: 17px; }
.dp-addon .d { font-size: 11.5px; line-height: 1.4; opacity: .95; flex: 1; }
.dp-addon .p { font-size: 21px; font-weight: 700; margin-top: 4px; }
.dp-addon .p small { font-size: 10.5px; font-weight: 400; opacity: .85; }

.dp-group { font-size: 15px; font-weight: 700; color: var(--accent); margin-bottom: 6px; }
.dp-row { display: grid; grid-template-columns: 1fr 52px 100px 108px; gap: 10px; padding: 9px 12px; border-bottom: 1px solid #E6E4EC; font-size: 12.5px; align-items: start; }
.dp-row .c2 { text-align: center; }
.dp-row .c3, .dp-row .c4 { text-align: right; }
.dp-row .c4 { font-weight: 700; }
.dp-row .c1 b { display: block; font-size: 13px; }
.dp-row .u, .dp-row .n { display: block; font-size: 11px; color: #6c7080; margin-top: 1px; }
.dp-row .n { color: var(--olive); font-weight: 700; }
.dp-row.dp-gift { background: #F4F6E8; }
.dp-row.dp-gift .c4 { color: var(--olive); }
.dp-thead { background: var(--accent); color: #fff; font-size: 10px; letter-spacing: .12em; font-weight: 700; padding: 9px 12px; border: 0; }
.dp-thead .c1, .dp-thead .c2, .dp-thead .c3, .dp-thead .c4 { font-weight: 700; }
.dp-totals { margin-left: auto; width: 100%; border: 1.5px solid #DAD8E0; border-radius: 10px; overflow: hidden; background: #fff; }
.dp-trow { display: grid; grid-template-columns: 1fr 110px 100px 120px; gap: 8px; padding: 9px 14px; font-size: 13px; border-top: 1px solid #ECEAF1; text-align: right; }
.dp-trow .a { text-align: left; }
.dp-trow.head { background: #F1EFF6; border-top: 0; font-size: 10px; letter-spacing: .12em; font-weight: 700; color: #5a5f70; }
.dp-trow .z { font-weight: 700; }
.dp-trow.strong { background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; }
.dp-tnote { padding: 9px 14px; font-size: 11.5px; color: var(--olive); font-weight: 700; border-top: 1px solid #ECEAF1; }

.dp-irow { display: grid; grid-template-columns: 1fr 78px 74px 88px 94px 94px; gap: 8px; padding: 10px 12px; font-size: 12px; text-align: right; border-bottom: 1px solid #E6E4EC; align-items: center; }
.dp-irow .a { text-align: left; }
.dp-irow .z { font-weight: 700; }
.dp-irow:nth-child(even):not(.thead) { background: #F3F2F7; }
.dp-irow.thead { background: var(--accent); color: #fff; font-size: 9.5px; letter-spacing: .1em; font-weight: 700; border: 0; line-height: 1.25; }
.dp-fine { font-size: 11.5px; color: #6c7080; line-height: 1.55; margin-top: -6px; }

.dp-benef { display: grid; grid-template-columns: 220px 1fr; gap: 26px; background: var(--accent); color: #fff; border-radius: 12px; padding: 24px 26px; }
.dp-benef h3 { font-size: 22px; line-height: 1.2; margin-top: 8px; }
.dp-benef .it { padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .28); }
.dp-benef .it:last-child { border: 0; }
.dp-benef h4 { font-size: 14px; }
.dp-benef .it p { font-size: 12.5px; line-height: 1.5; color: #EDE8F6; margin-top: 2px; }

.dp-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; margin-top: 26px; }
.dp-sign .ln { border-top: 1.5px solid #1B1B1F; margin-bottom: 8px; margin-top: 40px; }
.dp-sign h4 { font-size: 15px; }
.dp-sign p { font-size: 12.5px; color: #5a5f70; }
.dp-sign .chk { margin-top: 6px; font-size: 12.5px; color: #3a3e4a; white-space: nowrap; }
.dp-sign .chk + .chk { margin-top: 2px; }

/* ---------- adaptación a pantallas angostas ---------- */
.sumbar { display: none; }
@media (max-width: 1180px) {
  .sumbar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; border: 0; border-radius: 12px; background: var(--purple); color: #fff; padding: 13px 16px; font-weight: 700; font-size: 15px; box-shadow: 0 6px 24px rgba(40, 20, 80, .35); }
  .sumbar:not([hidden]) { display: flex; justify-content: space-between; }
  .layout { grid-template-columns: 1fr; padding-bottom: 90px; }
  .summary { position: static; max-height: none; }
  .plans { grid-template-columns: 1fr; }
  .doc-layout { grid-template-columns: 1fr; }
  .doc-form { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .doc-toolbar { top: 65px; }
}
@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  .tabs { order: 3; width: 100%; overflow-x: auto; flex: none; }
  .top-actions .mini-total { display: none; }
  .layout, .page-wrap { padding: 12px; }
  .addons { grid-template-columns: 1fr; }
  .svc-thead { display: none; }
  .svc { grid-template-columns: 1fr auto; }
  .svc-unit { grid-column: 1; flex-direction: row; align-items: center; }
  .svc-price { grid-column: 1; text-align: left; }
  .svc-ctl { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .toolbar { position: static; }
  .chips { flex-wrap: nowrap; overflow-x: auto; flex: none; width: 100%; padding-bottom: 4px; }
  .chip { white-space: nowrap; flex: none; }
  #buscar { width: 100%; }
  .doc-stage { padding: 0 8px 80px; }
  .fab { display: inline-flex; position: fixed; right: 16px; bottom: 16px; z-index: 30; box-shadow: var(--shadow); }
  .doc-toolbar .btn-primary { display: none; }
}

/* ---------- impresión / PDF ---------- */
@page { size: 8.5in 11in; margin: 0; }
@media print {
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  html, body { background: #fff !important; margin: 0 !important; }
  .topbar, .toast, .doc-form, .doc-toolbar, .doc-tip, .fab,
  .view:not(#view-documento) { display: none !important; }
  #view-documento { display: block !important; }
  .doc-layout, .doc-stage, .doc-scroll { display: block !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; }
  #docScale { width: auto !important; height: auto !important; }
  #docPages { transform: none !important; width: 8.5in !important; gap: 0 !important; display: block !important; }
  .doc-page { box-shadow: none !important; width: 8.5in !important; height: 11in !important; break-after: page; page-break-after: always; break-inside: avoid; }
  .doc-page:last-child { break-after: auto; page-break-after: auto; }
}