/* =========================================================
   CQM · Contacto (ronda 8): titular-instrumento + cadena de etapas,
   panel de pasos de altura fija, ticket de consignación,
   orden completa en diálogo (imprimible) y contacto directo en una línea
   ========================================================= */
.ct, .od, .mm, .ct-toast {
  --paper-doc: #fff; --ink-mute: #5b6874; --hivis-ink: #b34f00; --surf: #0a2647; --tk-bg: #071c36;
  --ease-drawer: cubic-bezier(.32, .72, 0, 1); --ease-snap: cubic-bezier(.22, 1, .36, 1);
}
.ct { position: relative; overflow: clip; background: var(--night); color: var(--zinc-50); color-scheme: dark; }
.ct ::selection { background: rgba(255, 125, 0, .32); color: #fff; }
.ct .vh, .od .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ct button, .ct a, .ct label, .od button, .mm button { touch-action: manipulation; }
.ct button, .ct .nd, .ct .q-opt, .ct .pre { -webkit-user-select: none; user-select: none; }
.ct input { caret-color: var(--hivis); }

/* Una pantalla: titular, cadena, panel + ticket y la línea de contacto */
.ct-in {
  display: flex; flex-direction: column; height: max(100svh, 660px);
  padding: calc(var(--header-h) + clamp(14px, 3.4svh, 46px)) 0 clamp(12px, 2.2svh, 26px);
}

/* ---- Titular-instrumento ---- */
.ct-title {
  --ct-fs: min(calc(92vw / 16), calc(1400px / 16), 9.6svh);
  margin: auto 0 0; font-family: var(--font-display); font-size: var(--ct-fs); font-weight: 520; line-height: 1; letter-spacing: -.026em;
  color: #fff; white-space: nowrap; font-variation-settings: "wdth" 100, "wght" 520;
  transition: font-variation-settings .8s var(--ease-snap);
}
.ct-sum { position: relative; display: inline-block; }
.ct-seg { position: absolute; left: .03em; right: .02em; bottom: -.1em; display: flex; gap: .045em; height: max(4px, .06em); }
.ct-seg i { position: relative; flex: 1; overflow: hidden; background: rgba(241, 244, 246, .16); transition: background-color .2s ease; }
.ct-seg i::after { content: ""; position: absolute; inset: 0; background: var(--hivis); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease-snap) var(--d, 0ms); }
.ct-seg i.is-pre { background: rgba(241, 244, 246, .62); }
.ct-seg i.is-on::after { transform: scaleX(1); }

/* ---- Cadena de etapas (fábrica a obra) ---- */
.chn { --ico: clamp(50px, min(4.4vw, 6.8svh), 74px); display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); margin: clamp(20px, 3.6svh, 52px) 0 0; }
.nd { position: relative; display: grid; justify-items: center; align-content: start; padding: 2px 4px 4px; cursor: pointer; text-align: center; border-radius: 4px; }
.nd:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 2px; }
.nd-ico { display: block; width: var(--ico); }
.nd-ico .ly { translate: 0 0; transition: translate .3s var(--ease-out); }
.nd-rail { position: relative; justify-self: stretch; display: grid; place-items: center; height: 26px; }
.nd-rail::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(241, 244, 246, .2); }
.nd:first-child .nd-rail::before { left: 50%; }
.nd:last-child .nd-rail::before { right: 50%; }
.nd-ln { position: absolute; left: 50%; width: 100%; top: calc(50% - 1px); height: 2px; background: var(--hivis); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease-snap) var(--d, 0ms); }
.nd:last-child .nd-ln { display: none; }
.nd.is-link .nd-ln { transform: scaleX(1); }
.nd-dot { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--zinc-400); background: var(--night); transition: background-color .2s ease, border-color .2s ease, scale .3s var(--ease-snap) var(--d, 0ms); }
.nd-no { margin-top: 2px; font: 700 .8rem/1 var(--font-display); color: var(--zinc-400); font-variant-numeric: tabular-nums; transition: color .2s ease; }
.nd-t { margin-top: 4px; font: 560 .875rem/1.2 var(--font-display); color: var(--zinc-300); text-wrap: balance; transition: color .2s ease; }
.nd.is-on .nd-dot { background: var(--hivis); border-color: var(--hivis); scale: 1.25; }
.nd.is-on .nd-no { color: var(--hivis-soft); }
.nd.is-on .nd-t { color: #fff; }
.chn.is-nudge .nd-dot { animation: ctNudge .5s var(--ease-out) 2; }
@keyframes ctNudge { 50% { border-color: var(--hivis-soft); scale: 1.35; } }
@media (hover: hover) and (pointer: fine) {
  .nd:hover .nd-dot { border-color: #fff; }
  .nd:hover .nd-t { color: #fff; }
  .nd:hover .nd-ico .ly, .nd:has(input:focus-visible) .nd-ico .ly { translate: 0 calc(var(--i) * -2.6px); }
}

/* Iconos isométricos */
.ct .iso { width: 100%; height: auto; overflow: visible; }
.ct .iso .ft { fill: #3d6293; } .ct .iso .fl { fill: #23466f; } .ct .iso .fr { fill: #18375d; }
.ct .iso polygon { stroke: rgba(241, 244, 246, .22); stroke-width: .6; stroke-linejoin: round; }
.ct .iso .plate .ft { fill: #16365c; } .ct .iso .plate .fl { fill: #0f2a4b; } .ct .iso .plate .fr { fill: #0c2342; }
.ct .iso .ln { fill: none; stroke: rgba(143, 227, 255, .35); stroke-width: .7; }
.ct .iso .acc .ft { fill: #5c7aa3; } .ct .iso .acc .fl { fill: #3b5a82; } .ct .iso .acc .fr { fill: #2c4a70; }
.ct .iso .accl { fill: none; stroke: var(--zinc-400); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ct .iso .accf { fill: var(--zinc-400); }
.ct .is-on .iso .acc .ft { fill: var(--hivis-soft); } .ct .is-on .iso .acc .fl { fill: var(--hivis); } .ct .is-on .iso .acc .fr { fill: #c95f00; }
.ct .is-on .iso .accl { stroke: var(--hivis); } .ct .is-on .iso .accf { fill: var(--hivis); }
.ct .iso .acc polygon, .ct .iso .accl, .ct .iso .accf { transition: fill .25s ease, stroke .25s ease; }

/* ---- Panel de pasos (altura fija) + ticket ---- */
/* el panel toma el alto restante de la pantalla: fijo para cada pantalla, igual en los tres pasos */
.cx { flex: 1 1 0; min-height: 300px; max-height: 410px; display: grid; grid-template-columns: minmax(0, 1fr) clamp(286px, 24vw, 350px); gap: clamp(24px, 3.6vw, 64px); margin-top: clamp(16px, 2.8svh, 44px); }
.pnl { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.steps { position: relative; flex: 1; min-height: 0; }
.pn { position: absolute; inset: 0; display: flex; flex-direction: column; }
.pn[hidden] { display: none; }

/* Riel de pasos: el único indicador de progreso */
.rl { position: relative; flex: none; margin-bottom: clamp(14px, 2.6svh, 26px); padding-bottom: 2px; }
.rl ol { display: flex; gap: clamp(20px, 3.2vw, 48px); margin: 0; padding: 0; list-style: none; }
.rl-b { display: inline-flex; align-items: baseline; gap: 8px; min-height: 42px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--zinc-400); font: 560 .95rem/42px var(--font-display); transition: color .2s ease; }
.rl-b b { font-weight: 700; font-size: .8rem; font-variant-numeric: tabular-nums; }
.rl-q { font: 500 .8rem/1 var(--font-text); color: var(--zinc-300); font-variant-numeric: tabular-nums; }
.rl-b.is-done { color: var(--zinc-200); }
.rl-b[aria-current="step"] { color: #fff; }
.rl-b[aria-current="step"] b { color: var(--hivis); }
.rl-b[aria-disabled="true"] { cursor: not-allowed; }
.rl-track { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(241, 244, 246, .14); }
.rl-fill { position: absolute; inset: 0; background: var(--hivis); transform: scaleX(.05); transform-origin: 0 50%; transition: transform .6s var(--ease-snap); }
@media (hover: hover) and (pointer: fine) { .rl-b:not([aria-disabled="true"]):hover { color: #fff; } }

.pn-h { margin: 0; font: 620 clamp(1.2rem, 1rem + .6vw, 1.55rem)/1.15 var(--font-display); letter-spacing: -.01em; text-wrap: balance; }
.pn-h:focus { outline: none; }
.pn-sub { margin: 6px 0 0; font-size: .95rem; line-height: 1.5; color: var(--zinc-300); }
.pn-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: auto; padding-top: 12px; }
.ct .hint { margin: 0; font-size: .875rem; color: var(--hivis-soft); }
.ct .hint:empty { display: none; }
#hint1:empty + .btn { margin-left: auto; }

/* Botones */
.ct .btn, .od .btn, .mm .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px; padding: 0 18px; border-radius: 2px; border: 1px solid rgba(241, 244, 246, .3); background: none; cursor: pointer; text-decoration: none; color: var(--zinc-50); font: 580 .95rem/1 var(--font-display); white-space: nowrap; transition: background-color .2s ease, border-color .2s ease, color .2s ease, scale .14s var(--ease-out); }
.ct .btn:active, .od .btn:active, .mm .btn:active { transform: none; scale: .97; }
.ct .btn-main, .od .btn-main, .mm .btn-main { background: var(--hivis); border-color: var(--hivis); color: #1a0d00; }
.ct .btn-ghost { border-color: transparent; color: var(--zinc-300); padding: 0 10px; }
.ct .btn svg { width: 18px; height: 18px; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .ct .btn:hover { border-color: var(--zinc-50); }
  .ct .btn-main:hover, .od .btn-main:hover, .mm .btn-main:hover { background: var(--hivis-soft); border-color: var(--hivis-soft); }
  .ct .btn-ghost:hover { border-color: transparent; color: #fff; }
}
.linkish { padding: 0; border: 0; background: none; cursor: pointer; color: var(--zinc-200); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(241, 244, 246, .4); font: inherit; }
@media (hover: hover) and (pointer: fine) { .linkish:hover { color: #fff; text-decoration-color: var(--hivis); } }

/* Paso 1: lectura de la etapa + atajos */
.ro { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 16px; align-items: start; margin-top: clamp(14px, 2.6svh, 26px); min-height: 4.6em; }
.ro-n:empty { display: none; }
.ro-n { min-width: 1.6em; font: 760 2.2rem/1 var(--font-display); font-variation-settings: "wdth" 80, "wght" 760; color: var(--zinc-400); font-variant-numeric: tabular-nums; transition: color .2s ease; }
.ro.is-on .ro-n { color: var(--hivis); }
.ro p { margin: 0; max-width: 62ch; }
.ro-t { display: block; font: 620 1.05rem/1.3 var(--font-display); color: #fff; }
.ro-d { display: block; margin-top: 4px; font-size: .92rem; line-height: 1.5; color: var(--zinc-300); }
.pres { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pre { min-height: 38px; padding: 0 14px; border: 1px solid rgba(241, 244, 246, .22); border-radius: 19px; background: none; cursor: pointer; font: 500 .875rem/1 var(--font-text); color: var(--zinc-200); transition: border-color .2s ease, color .2s ease, scale .14s var(--ease-out); }
.pre:active { scale: .96; }
@media (hover: hover) and (pointer: fine) { .pre:hover { border-color: var(--zinc-300); color: #fff; } }

/* Paso 2: una pregunta a la vez */
.qs { flex: 1; min-height: 0; }
.q { display: flex; flex-direction: column; }
.q[hidden] { display: none; }
.q-h { font-size: clamp(1.2rem, 1rem + .6vw, 1.55rem); }
.q-opts { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; border: 0; }
.q-opt { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 9px; border: 1px solid rgba(241, 244, 246, .26); border-radius: 3px; cursor: pointer; font: 540 .95rem/1.2 var(--font-display); color: var(--zinc-50); transition: border-color .2s ease, background-color .2s ease, scale .14s var(--ease-out); }
.q-opt:active { scale: .98; }
.q-opt kbd { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 1px solid rgba(241, 244, 246, .3); border-radius: 3px; font: 600 .8rem/1 var(--font-text); color: var(--zinc-300); }
.q-opt:has(input:checked) { border-color: var(--hivis); background: rgba(255, 125, 0, .12); }
.q-opt:has(input:checked) kbd { background: var(--hivis); border-color: var(--hivis); color: #1a0d00; }
.q-opt:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .q-opt:hover { border-color: var(--zinc-300); } }
.q-other { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-top: 12px; }
.q-other[hidden] { display: none; }
.q-other .ct-fld { flex: 1 1 260px; max-width: 420px; }
.q-vol { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 20px; align-items: end; }
.ct .stack.iso { width: 96px; }
.stack .box { opacity: 0; }
.stack .box.is-on { opacity: 1; }
.stack .acc .ft { fill: var(--hivis-soft); } .stack .acc .fl { fill: var(--hivis); } .stack .acc .fr { fill: #c95f00; }
.q-who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: 12px; align-items: end; margin-top: 16px; }
.q-note { margin: 10px 0 0; font-size: .875rem; color: var(--zinc-400); }
.q-nav div { display: flex; gap: 6px; }
.pn.is-last .q-nav div { visibility: hidden; }

/* Campos oscuros con contraste correcto (también con autocompletado) */
.ct .ct-fld { display: grid; grid-template-columns: none; padding: 0; border: 0; background: none; gap: 7px; font: 600 .875rem/1.2 var(--font-display); color: var(--zinc-200); }
.ct .inp { -webkit-appearance: none; appearance: none; width: 100%; height: 46px; margin: 0; padding: 0 14px; border: 1px solid rgba(241, 244, 246, .3); border-radius: 3px; background-color: var(--surf); color: #fff; font: 16px/1.2 var(--font-text); box-shadow: none; transition: border-color .2s ease; }
.ct .inp::placeholder { color: var(--zinc-400); opacity: 1; }
.ct .inp:focus { border-color: var(--hivis); outline: none; }
.ct .inp:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.ct .inp:-webkit-autofill, .ct .inp:-webkit-autofill:hover, .ct .inp:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--surf) inset; box-shadow: 0 0 0 1000px var(--surf) inset;
  -webkit-text-fill-color: #fff; caret-color: var(--hivis); transition: background-color 9999s ease-out 0s, border-color .2s ease;
}
.ct .inp:autofill { box-shadow: 0 0 0 1000px var(--surf) inset; -webkit-text-fill-color: #fff; }

/* Paso 3: canales en una fila */
.chs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(14px, 2.4svh, 22px); }
.ch-wa-touch { display: none !important; }
.ch-m { display: none; }
.chs-2 { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 14px 0 0; font-size: .9rem; }
.trk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.trk li { position: relative; padding-top: 10px; font-size: .8rem; line-height: 1.25; color: var(--ink-mute); }
.trk li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 2px; background: rgba(11, 26, 44, .14); }
.trk li.is-done { color: var(--ink); font-weight: 600; }
.trk li.is-done::before { background: var(--hivis); }
.trk-s { margin-top: auto; padding-top: 16px; max-width: 640px; }
.pn[data-step="3"] .pn-foot { margin-top: 0; }
.trk-s li { color: var(--zinc-400); }
.trk-s li::before { background: rgba(241, 244, 246, .16); }
.trk-s li.is-done { color: #fff; }

/* ---- Ticket de consignación ---- */
.tk { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 18px 20px 14px; overflow: hidden; border: 1px solid rgba(241, 244, 246, .18); border-radius: 6px; background: var(--tk-bg); }
.tk-hd { flex: none; }
.tk-h { display: flex; justify-content: space-between; gap: 10px; margin: 0; font: 650 .95rem/1.25 var(--font-display); color: #fff; }
.tk-sum { display: none; font-weight: 560; color: var(--zinc-300); font-variant-numeric: tabular-nums; }
.tk-ref { margin: 3px 0 0; font-size: .8rem; color: var(--zinc-400); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.tk-list { flex: 1; min-height: 0; margin: 14px 0 0; padding: 0; list-style: none; font-size: .8rem; line-height: 1.5; color: var(--zinc-200); }
.tk-list:has(li:nth-child(5)) { columns: 2; column-gap: 14px; }
.tk-list li { display: flex; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; break-inside: avoid; }
.tk-list b { font-weight: 650; color: var(--hivis-soft); font-variant-numeric: tabular-nums; }
.tk-list .is-empty { color: var(--zinc-400); }
.tk-mid { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; padding: 8px 0 2px; }
.tk-cnt { display: flex; align-items: baseline; gap: 10px; margin: 0; font-family: var(--font-display); }
.odo-win { display: inline-block; height: 1em; overflow: hidden; font-size: clamp(3.4rem, 8.4svh, 5rem); line-height: 1; font-variation-settings: "wdth" 110, "wght" 720; color: #fff; }
.odo-strip { display: flex; flex-direction: column; transform: translateY(calc(var(--n, 0) * -1em)); transition: transform .5s var(--ease-snap); }
.tk-u { display: grid; gap: 2px; font: 600 1rem/1.1 var(--font-display); color: #fff; }
.tk-u small { font: 400 .8rem/1.2 var(--font-text); color: var(--zinc-400); }
.tk-qr { display: grid; place-items: end; min-width: 0; min-height: 0; }
.tk-qr-in { line-height: 0; transform-origin: 100% 100%; }
.tk-qr svg { display: block; }
.tk-qr .qb { fill: transparent; transition: fill .35s ease; }
.tk-qr .qm { fill: rgba(241, 244, 246, .5); transition: fill .35s ease; }
.tk-qr.is-empty { display: none; }
.tk-st { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: .8rem; color: var(--zinc-300); }
.tk-st i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--zinc-400); }
.tk-st.is-ready i { border-color: var(--hivis); }
.tk-st.is-open i { background: var(--hivis); border-color: var(--hivis); }
.tk-perf { position: relative; flex: none; display: block; margin: 12px -20px 0; border-top: 1px dashed rgba(241, 244, 246, .22); }
.tk-perf::before, .tk-perf::after { content: ""; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--night); border: 1px solid rgba(241, 244, 246, .18); }
.tk-perf::before { left: -9px; } .tk-perf::after { right: -9px; }
.tk-open { flex: none; display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; margin: 6px -6px -4px; padding: 0 6px; border: 0; border-radius: 3px; background: none; cursor: pointer; color: #fff; font: 600 .95rem/1 var(--font-display); text-align: left; }
.tk-open svg { width: 18px; height: 18px; color: var(--hivis); transition: translate .25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .tk-open:hover svg { translate: 2px -2px; } .tk-open:hover { color: var(--hivis-soft); } }

/* Paso 3: el código del ticket crece hasta ser escaneable */
.cx.is-s3 .tk-sum { display: inline; }
.cx.is-s3 .tk-cnt { display: none; }
.cx.is-s3 .tk-list, .cx.is-s3 .tk-st { display: none; }
.cx.is-s3 .tk-mid { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr); padding: 12px 0 0; }
.cx.is-s3 .tk-qr { place-items: center; height: 100%; }
.cx.is-s3 .tk-qr-in { transform-origin: 50% 50%; }
.tk-qr.is-big .qb { fill: #fff; }
.tk-qr.is-big .qm { fill: #0b1a2c; }

/* ---- Contacto directo: una línea ---- */
.ct-line { margin-top: auto; padding-top: clamp(14px, 2.6svh, 28px); }
.ct-line ul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin: 0; padding: 14px 0 0; list-style: none; border-top: 1px solid var(--hair); font-size: .875rem; line-height: 1.4; color: var(--zinc-300); }
.ct-line li { padding: 0 18px; border-left: 1px solid rgba(241, 244, 246, .2); }
.ct-line li:first-child { padding-left: 0; border-left: 0; }
.ct-line address { font-style: normal; }
.ct-line a { color: var(--zinc-50); text-decoration: underline; text-decoration-color: rgba(241, 244, 246, .25); text-underline-offset: 3px; transition: color .2s ease, text-decoration-color .2s ease; }
@media (hover: hover) and (pointer: fine) { .ct-line a:hover { color: var(--hivis-soft); text-decoration-color: var(--hivis-soft); } }

/* ---- Diálogos: orden completa y vista del correo ---- */
.od, .mm { width: min(760px, 100% - 24px); max-height: min(88dvh, 860px); padding: 0; border: 0; border-radius: 8px; background: #f7f8fa; color: var(--ink); box-shadow: 0 30px 70px -24px rgba(1, 8, 18, .85); overflow: hidden; }
.mm { width: min(720px, 100% - 24px); }
.od::backdrop, .mm::backdrop { background: rgba(2, 10, 22, .72); }
.od[open], .mm[open] { animation: ctDlgIn .24s var(--ease-out); }
.od[open]::backdrop, .mm[open]::backdrop { animation: ctFade .24s ease; }
@keyframes ctDlgIn { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes ctFade { from { opacity: 0; } }
.od-in, .mm-in { display: flex; flex-direction: column; max-height: inherit; }
.od-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px 8px 18px; background: #e6eaef; border-bottom: 1px solid #d3d9e0; }
.od-bar strong { font: 650 .95rem/1.2 var(--font-display); }
.dlg-x { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 4px; background: none; cursor: pointer; color: var(--ink); }
.dlg-x svg { width: 18px; height: 18px; }
.od-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 14px; scrollbar-width: thin; }
.dlg-ft { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid #dfe4ea; }
.dlg-ft p { flex: 1 1 100%; margin: 0 0 4px; font-size: .875rem; color: var(--ink-2); }
.od .btn, .mm .btn { height: 44px; border-color: rgba(11, 26, 44, .3); color: var(--ink); }
.od .btn-main, .mm .btn-main { color: #1a0d00; }
.od :focus-visible, .mm :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.od ::selection, .mm ::selection { background: rgba(255, 125, 0, .25); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .od .btn:hover, .mm .btn:hover { border-color: var(--ink); } .od .btn-main:hover, .mm .btn-main:hover { border-color: var(--hivis-soft); } .dlg-x:hover { background: #d3d9e0; } }
.mm-hd { padding: 6px 18px; border-bottom: 1px solid #dfe4ea; font-size: .875rem; }
.mm-hd div { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 8px; padding: 6px 0; border-bottom: 1px solid #edf0f3; }
.mm-hd div:last-child { border-bottom: 0; }
.mm-hd span { color: var(--ink-2); }
.mm-hd b { font-weight: 600; overflow-wrap: anywhere; }
.mm-hd em { font-style: normal; color: var(--ink-mute); }
.mm-body { flex: 1; min-height: 0; margin: 0; padding: 16px 18px; overflow: auto; overscroll-behavior: contain; white-space: pre-wrap; font: .92rem/1.55 var(--font-text); background: #fff; }

/* Documento (papel) */
.doc { padding: 22px 22px 18px; background: var(--paper-doc); color: var(--ink); border-radius: 3px; font-size: .875rem; line-height: 1.45; box-shadow: 0 1px 2px rgba(11, 26, 44, .08); }
.doc-head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.doc-brand { display: flex; gap: 10px; align-items: center; }
.doc-mark { display: grid; place-items: center; flex: none; width: 40px; height: 40px; background: var(--ink); color: var(--hivis); font: 800 .875rem/1 var(--font-display); }
.doc-co { font: 650 .92rem/1.2 var(--font-display); }
.doc-co small { display: block; font: 400 .8rem/1.3 var(--font-text); color: var(--ink-2); }
.doc-meta { text-align: right; font-size: .8rem; color: var(--ink-2); }
.doc-meta b { display: block; font: 700 1rem/1.2 var(--font-display); font-variation-settings: "wdth" 112, "wght" 700; color: var(--ink); }
.doc-ref { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.doc .trk { margin: 12px 0 2px; }
.doc h4 { display: flex; justify-content: space-between; margin: 14px 0 6px; font: 700 .8rem/1.2 var(--font-display); color: var(--ink-2); }
.doc ol.doc-st { margin: 0; padding: 0; list-style: none; }
.doc-li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 1px 6px; padding: 6px 0; border-top: 1px solid rgba(11, 26, 44, .12); }
.doc-li .no { grid-row: span 2; font: 700 .8rem/1.5 var(--font-display); color: var(--hivis-ink); font-variant-numeric: tabular-nums; }
.doc-li b { font: 650 .875rem/1.3 var(--font-display); }
.doc-li span:last-child { font-size: .8rem; color: var(--ink-2); }
.doc-empty { margin: 0; padding: 10px 12px; border: 1px dashed rgba(11, 26, 44, .3); border-radius: 3px; color: var(--ink-mute); font-size: .8rem; }
.doc-kv { margin: 0; }
.doc-kv div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 8px; padding: 5px 0; border-top: 1px solid rgba(11, 26, 44, .12); }
.doc-kv dt { color: var(--ink-2); font-size: .8rem; }
.doc-kv dd { margin: 0; font-weight: 560; font-size: .875rem; overflow-wrap: anywhere; }
.doc-kv dd.is-empty { color: var(--ink-mute); font-weight: 400; }
.doc-foot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--ink); }
.doc-qr { background: #fff; line-height: 0; }
.doc-qr svg { display: block; }
.doc-qr .qb { fill: #fff; } .doc-qr .qm { fill: #0b1a2c; }
.doc-qr.is-empty { width: 132px; aspect-ratio: 1; display: grid; place-items: center; border: 1px dashed rgba(11, 26, 44, .35); color: var(--ink-mute); font-size: .8rem; line-height: 1.3; text-align: center; padding: 10px; }
.doc-cap b { display: block; font: 700 .9rem/1.25 var(--font-display); color: var(--ink); }
.doc-cap span { display: block; margin-top: 4px; font-size: .8rem; color: var(--ink-2); }
.doc-cap .bor { display: inline-block; margin-top: 8px; padding: 2px 8px; border: 1.5px solid var(--hivis-ink); color: var(--hivis-ink); font: 800 .8rem/1.4 var(--font-display); transform: rotate(-3deg); }

/* Aviso */
.ct-toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 47; max-width: calc(100% - 24px); padding: 12px 18px; border-radius: 6px; background: var(--zinc-50); color: var(--ink); font-size: .9rem; box-shadow: 0 16px 36px -14px rgba(1, 8, 18, .8); transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: transform .22s var(--ease-out), opacity .22s ease; }
.ct-toast.is-on { transform: translate(-50%, 0); opacity: 1; }

/* ---- Escritorio bajo ---- */
@media (min-width: 901px) and (max-height: 800px) {
  .nd-t { font-size: .8rem; }
  .ro { min-height: 4.2em; }
}

/* ---- Tableta y móvil ---- */
@media (max-width: 900px) {
  .ct-in { height: auto; padding: calc(var(--header-h) + 24px) 0 calc(28px + env(safe-area-inset-bottom, 0px)); }
  .ct-title { --ct-fs: min(9.3vw, 3.6rem); white-space: normal; line-height: 1.04; }
  .ct-l1, .ct-l2 { display: block; white-space: nowrap; }
  .ct-seg { bottom: -.12em; }
  .chn { --ico: min(12vw, 60px); grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 12px; margin-top: 28px; }
  .nd-rail { height: 22px; }
  .nd:nth-child(4n) .nd-rail::before { right: 50%; }
  .nd:nth-child(4n + 1) .nd-rail::before { left: 50%; }
  .nd:nth-child(4n) .nd-ln { display: none; }
  .nd-t { font-size: .8rem; }
  .cx { display: block; flex: none; min-height: 0; max-height: none; margin-top: 22px; }
  .steps { min-height: 360px; }
  .pn { position: static; }
  .pn-foot { padding-top: 18px; }
  .ro { min-height: 6.6em; }
  .q-vol { grid-template-columns: minmax(0, 1fr) 72px; }
  .ct .stack.iso { width: 72px; }
  .q-who { grid-template-columns: 1fr; }
  .q-who .btn { justify-self: start; }
  .ch-wa-touch { display: inline-flex !important; }
  .chs .btn { flex: 1 1 calc(50% - 4px); padding: 0 12px; }
  .chs .ch-wa-touch { flex-basis: 100%; }
  .trk-s { max-width: none; margin-top: 18px; }
  /* el ticket es la barra de la orden, solo mientras Contacto está en pantalla */
  .tk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; flex-direction: row; align-items: center; gap: 14px; height: calc(64px + env(safe-area-inset-bottom, 0px)); padding: 0 12px env(safe-area-inset-bottom, 0px) 18px; border: 0; border-top: 1px solid rgba(255, 125, 0, .5); border-radius: 14px 14px 0 0; background: var(--surf); transform: translateY(105%); transition: transform .34s var(--ease-drawer); }
  .tk.is-avail { transform: none; }
  .menu-open .tk { visibility: hidden; }
  .tk-hd { min-width: 0; }
  .tk-h { font-size: .875rem; }
  .tk-hd { flex: 1; }
  .tk-h { justify-content: flex-start; }
  .tk-sum, .cx.is-s3 .tk-sum { display: inline; color: var(--hivis-soft); }
  .tk-mid, .tk-st, .tk-perf, .tk-list { display: none !important; }
  .tk-open { flex: none; margin: 0; padding: 0 14px; border: 1px solid rgba(241, 244, 246, .3); border-radius: 2px; }
  .ch-m { display: inline; }
  .ct-line ul { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .ct-line li, .ct-line li:first-child { padding: 0; border: 0; }
  .ct-toast { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 640px) {
  .pn-sub { font-size: .9rem; }
  .q-opts { gap: 6px; }
  .q-opt { min-height: 44px; padding: 0 12px 0 8px; font-size: .9rem; }
  .ro-n { font-size: 1.8rem; }
  .doc { padding: 16px 14px; }
  .doc-head { flex-direction: column; } .doc-meta { text-align: left; }
  .doc-foot { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .od, .mm { width: 100%; max-width: none; max-height: 92dvh; margin: auto 0 0; border-radius: 12px 12px 0 0; }
  .od-body { padding: 8px; }
  .dlg-ft { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .dlg-ft .btn { flex: 1 1 auto; }
}
/* En celular el botón directo de WhatsApp encabeza los canales y no se muestra el código */
@media (pointer: coarse) { .ch-wa-touch { display: inline-flex !important; } .ch-wa-desk { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .ct-title, .ct-seg i::after, .nd-ln, .nd-dot, .nd-ico .ly, .rl-fill, .odo-strip, .tk, .tk-qr .qb, .tk-qr .qm { transition: none; }
  .chn.is-nudge .nd-dot { animation: none; }
  .od[open], .mm[open], .od[open]::backdrop, .mm[open]::backdrop { animation: none; }
}

/* ---- Impresión: solo la orden, en A4 ---- */
@media print {
  @page { size: A4; margin: 16mm; }
  :root { color-scheme: light !important; }
  html, body { background: #fff !important; }
  body > *:not(main), main > *:not(.od) { display: none !important; }
  .od { display: block !important; position: static !important; inset: auto !important; width: auto !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; overflow: visible !important; transform: none !important; animation: none !important; }
  .od::backdrop { display: none; }
  .od-in, .od-body { display: block !important; max-height: none !important; overflow: visible !important; padding: 0 !important; }
  .od-bar, .od .dlg-ft { display: none !important; }
  .doc { width: 100%; padding: 0; background: #fff; box-shadow: none; border-radius: 0; font-size: 11pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .doc-qr svg { width: 42mm; height: 42mm; }
}
.ct p { text-wrap: pretty; }