:root {
  --film: #fbfbf8;
  --paper: #ffffff;
  --graphite: #2a2c2e;
  --ink-2: #474d52;
  --mute: #5f676e;
  --grid: #e2e8ed;
  --rule: #b9c6d2;
  --red: #c92a2a;
  --red-wash: #fbeeee;
  --red-line: #e7b4b4;
  --sans: "Archivo Narrow", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  --mono: "Overpass Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --side-w: 440px;
  --pad: 20px;
  --dock-h: 0px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--film);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 20px 20px;
  color: var(--graphite);
  font: 400 18px/1.35 var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--red-wash); color: var(--red); }
input, button, textarea { font: inherit; color: inherit; }
input, textarea { caret-color: var(--red); }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--graphite); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); }
.lbl {
  display: block;
  font: 600 12px/1.2 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mute);
}
* { scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--rule); border: 3px solid var(--film); }

/* Top bar */
.topbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 8px var(--pad);
  padding-top: max(8px, env(safe-area-inset-top));
  background: var(--film);
  border-bottom: 2px solid var(--graphite);
}
.back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding-right: 8px;
  color: var(--graphite);
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
}
.sync {
  margin: 0 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 13px/1.2 var(--mono);
  color: var(--mute);
  text-align: right;
}
.sync-dot { width: 10px; height: 10px; flex: none; background: var(--graphite); }
.sync.is-pending .sync-dot { background: transparent; border: 2px solid var(--graphite); }

/* Segmented control */
.seg { display: inline-flex; gap: 3px; padding: 3px; border: 2px solid var(--graphite); background: var(--paper); }
.seg label { position: relative; display: flex; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  font-weight: 600;
  font-size: 17px;
  white-space: nowrap;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.seg input:checked + span { background: var(--graphite); color: var(--film); }
.seg input:focus-visible + span { outline: 2px solid var(--red); outline-offset: -4px; }
.seg input:disabled + span { color: var(--mute); cursor: default; }
.seg input:disabled:checked + span { color: var(--film); }
@media (hover: hover) {
  .seg input:not(:checked):not(:disabled):hover + span { background: var(--grid); }
}

/* Sheet */
.sheet {
  flex: 1;
  min-height: 0;
  margin: 16px var(--pad) var(--pad);
  margin-bottom: max(var(--pad), env(safe-area-inset-bottom));
  border: 2px solid var(--graphite);
  background: rgba(251, 251, 248, .88);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}
.bom { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.bom-head, .row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 128px 140px;
}
.bom-head {
  border-bottom: 2px solid var(--graphite);
  font: 600 12px/1.2 var(--mono);
  letter-spacing: .04em;
  color: var(--mute);
}
.bom-head span { padding: 12px; }
.bom-head span:first-child { text-align: center; }
.r { text-align: right; }
.bom-scroll { overflow-y: auto; overscroll-behavior: contain; scroll-padding-bottom: 24px; }
.rows { list-style: none; margin: 0; padding: 0; }

.row { border-bottom: 1px solid var(--rule); align-items: stretch; }
.row > .c { padding: 10px 12px; min-width: 0; }
.row > .c + .c { border-left: 1px solid var(--grid); }
.c-total { text-align: right; padding-top: 22px !important; font: 600 19px/1.2 var(--mono); }
.c-total output { display: block; }

.ink {
  width: 100%;
  min-height: 52px;
  padding: 6px 8px;
  border: 0;
  border-bottom: 1.5px solid transparent;
  background: transparent;
  text-align: inherit;
  font: 600 20px/1.2 var(--mono);
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.c-qty .ink { text-align: center; font-size: 24px; }
.c-unit .ink { text-align: right; min-height: 0; padding: 12px 0 6px; font-size: 19px; }
.frac { font-family: var(--sans); font-size: 1.3em; line-height: 1; }

/* The open row waits for ink: ruled red baselines across its cells. */
body:not(.is-locked) .row.is-blank { background: rgba(251, 238, 238, .55); }
body:not(.is-locked) .row.is-blank > .c { box-shadow: inset 0 -12px 0 -10.5px var(--red-line); }
body:not(.is-locked) .row.is-blank .c-qty .ink .ph { border-color: var(--red-line); color: var(--red); }

/* Ruled empty lines below the last row, as on the paper book. */
.bom-scroll { display: flex; flex-direction: column; }
.rows { flex: none; }
.ruled {
  flex: 1 0 0;
  min-height: 0;
  background-image: repeating-linear-gradient(transparent 0 63px, var(--grid) 63px 64px);
}
.ink .ph { display: inline-flex; align-items: center; gap: 6px; font: 500 15px/1 var(--sans); color: var(--mute); }
.ink .ph svg { flex: none; }
.c-qty .ink .ph span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.c-qty .ink .ph { justify-content: center; width: 100%; height: 40px; border: 1px dashed var(--rule); }
.ink.is-target { background: var(--red-wash); border-bottom-color: var(--red); }
.ink:disabled { cursor: default; color: var(--graphite); }
@media (hover: hover) {
  .ink:not(:disabled):hover { border-bottom-color: var(--rule); }
}

.desc {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 8px 4px;
  border: 0;
  border-bottom: 1.5px solid transparent;
  background: transparent;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  resize: none;
  overflow: hidden;
}
.desc::placeholder { color: var(--mute); font-weight: 400; }
.desc:focus { outline: none; border-bottom-color: var(--graphite); background: var(--paper); }
.desc:disabled { color: var(--graphite); }
.desc[aria-invalid="true"], .tb-input[aria-invalid="true"] { border-bottom-color: var(--red); background: var(--red-wash); }

.c-desc { position: relative; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-left: 4px; }
.meta:empty { display: none; }
.meta-text { font: 500 14px/1.3 var(--mono); color: var(--mute); }
.thumb { display: block; padding: 4px; border: 1px solid var(--rule); background: var(--paper); }
.thumb svg { display: block; max-width: 100%; height: auto; }
.thumb:disabled { cursor: default; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  border: 1.5px solid var(--graphite);
  background: var(--paper);
  font-weight: 600;
  font-size: 15px;
}
.chip.quiet { border-color: var(--rule); color: var(--ink-2); }
.chip.text { min-height: 44px; padding: 0 8px; border-color: transparent; background: transparent; color: var(--mute); font-weight: 500; }
.chip { min-height: 44px; }
@media (hover: hover) {
  .chip:hover { background: var(--grid); }
}

.suggest {
  position: absolute;
  z-index: 20;
  left: 12px;
  right: 12px;
  top: 58px;
  margin: 0;
  padding: 0;
  border: 2px solid var(--graphite);
  background: var(--paper);
  box-shadow: 0 10px 24px rgba(42, 44, 46, .14);
}
.suggest button {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 8px 14px;
  border: 0;
  border-bottom: 1px solid var(--grid);
  background: transparent;
  text-align: left;
  font-size: 18px;
}
.suggest button:last-child { border-bottom: 0; }
.suggest button small { font: 500 14px var(--mono); color: var(--mute); white-space: nowrap; }
.suggest button.is-active, .suggest button:focus-visible { background: var(--red-wash); outline: none; }

/* Sketch */
.sketch { grid-column: 1 / -1; border-top: 1px dashed var(--rule); background: var(--paper); }
.sk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 10px 12px; border-bottom: 1px solid var(--grid); }
.sk-title { margin: 0; font-weight: 700; font-size: 18px; }
.sk-largo { display: flex; align-items: center; gap: 6px; }
.sk-largo .ink { width: 120px; min-height: 44px; font-size: 18px; text-align: left; }
.sk-dev { font: 600 14px var(--mono); color: var(--ink-2); }
.sk-actions { margin-left: auto; display: flex; gap: 8px; }
.stage {
  position: relative;
  height: 300px;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 10px 10px;
  touch-action: none;
}
.stage canvas, .stage .snap, .stage .snap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage .snap { pointer-events: none; }
.stage .snap .dim { pointer-events: auto; cursor: pointer; }
.sk-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 34ch;
  margin: 0;
  text-align: center;
  color: var(--mute);
  font-size: 17px;
  pointer-events: none;
}

.prof { fill: none; stroke: var(--graphite); stroke-width: 2.5; stroke-linejoin: miter; }
.prof-end { fill: var(--paper); stroke: var(--red); stroke-width: 2; }
.free { fill: none; stroke: var(--graphite); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stage[data-tool="borrador"] { cursor: cell; }
.stage[data-tool="lapiz"], .stage[data-tool="regla"] { cursor: crosshair; }
.seg-tool span { padding: 0 12px; font-size: 16px; }
.dim-line { stroke: var(--red); stroke-width: 1.2; fill: none; }
.dim-bg { fill: var(--paper); }
.dim-hit { fill: transparent; }
.dim text { fill: var(--red); font-family: var(--mono); font-weight: 700; }
.dim.is-target .dim-bg { fill: var(--red-wash); stroke: var(--red); stroke-width: 1; }
.dim:focus-visible { outline: none; }
.dim:focus-visible .dim-bg { stroke: var(--graphite); stroke-width: 2; }
.dim.fresh .dim-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw-dim .55s var(--ease) forwards; }
.dim.fresh text, .dim.fresh .dim-bg { opacity: 0; animation: show-dim .3s var(--ease) .35s forwards; }
@keyframes draw-dim { to { stroke-dashoffset: 0; } }
@keyframes show-dim { to { opacity: 1; } }

/* Side: payment, actions, title block */
.side { border-top: 2px solid var(--graphite); display: grid; grid-template-columns: minmax(0, 1fr) var(--side-w); }
.side-work { display: flex; flex-direction: column; gap: 14px; padding: 16px 20px; justify-content: flex-end; }
.pay .lbl { margin-bottom: 6px; }
.error { margin: 0; color: var(--red); font-weight: 600; font-size: 17px; }
.error:empty { display: none; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.btn {
  min-height: 56px;
  padding: 0 28px;
  border: 2px solid var(--graphite);
  background: var(--paper);
  font-weight: 700;
  font-size: 20px;
}
.btn.primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn.solid { background: var(--graphite); color: var(--film); }
@media (hover: hover) {
  .btn.primary:hover { background: #b02323; border-color: #b02323; }
  .btn:not(.primary):not(.solid):hover { background: var(--grid); }
}
.btn:active { transform: translateY(1px); }
.stamp {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border: 2px solid var(--graphite);
  font: 700 15px/1.2 var(--mono);
  letter-spacing: .04em;
}
.stamp small { font-weight: 500; font-size: 12px; color: var(--mute); letter-spacing: 0; }
.note { flex-basis: 100%; margin: 0; font-size: 15px; color: var(--mute); }
.tb-span { grid-column: 1 / -1; border-right: 0 !important; }
.tb-span[hidden] { display: none; }
.tb-expired { margin: 2px 0 0; color: var(--red); font-weight: 600; font-size: 15px; }
.tb-approved .stamp { margin-top: 4px; }

/* Issuer header (white-label configuration), shown where the side column has room. */
.issuer { display: none; }
.issuer p { margin: 0; }
.issuer-name { font-weight: 700; font-size: 26px; line-height: 1.1; margin-bottom: 8px !important; }
.issuer-line { font-size: 16px; line-height: 1.35; color: var(--ink-2); }
.issuer-service { margin-top: 10px !important; padding-top: 10px; border-top: 1px solid var(--rule); font-weight: 600; font-size: 16px; }
.issuer-place { font-size: 15px; color: var(--mute); }

.summary { display: none; margin: 0; border-top: 1px solid var(--rule); }
.summary div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--grid); }
.summary dt { font: 600 12px/1.6 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--mute); }
.summary dd { margin: 0; font-weight: 600; font-size: 16px; text-align: right; }
.summary .is-warn dd { color: var(--red); }

/* Portrait: the sheet shrinks above the dock so the total stays in view. */
body.dock-open .sheet { margin-bottom: calc(var(--dock-h) + 8px); }

.title-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-left: 2px solid var(--graphite);
  background: var(--film);
}
.tb-cell { padding: 8px 12px; border-bottom: 1px solid var(--graphite); min-width: 0; }
.tb-cell:nth-child(odd) { border-right: 1px solid var(--graphite); }
.tb-val { display: block; font-weight: 600; font-size: 18px; overflow-wrap: anywhere; }
.tb-val.mono { font-size: 16px; padding-top: 2px; }
.tb-input {
  width: 100%;
  min-height: 44px;
  padding: 2px 0;
  border: 0;
  border-bottom: 1.5px solid transparent;
  background: transparent;
  font-weight: 600;
  font-size: 19px;
}
.tb-input::placeholder { color: var(--mute); font-weight: 400; }
.tb-input:focus { outline: none; border-bottom-color: var(--graphite); }
.tb-input:disabled { color: var(--graphite); }
.tb-total { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: end; gap: 12px; padding: 10px 12px 12px; }
.total { font: 700 44px/1 var(--sans); letter-spacing: -.01em; }

/* Handwriting dock */
.dock {
  position: fixed;
  z-index: 40;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
  padding: 16px var(--pad);
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  background: var(--film);
  border-top: 2px solid var(--graphite);
  box-shadow: 0 -12px 28px rgba(42, 44, 46, .12);
  transform: translateY(105%);
  visibility: hidden;
  transition: transform .32s var(--ease), visibility 0s linear .32s;
}
.dock.is-open { transform: none; visibility: visible; transition: transform .32s var(--ease), visibility 0s; }
.dock-label { margin: 0; font: 600 13px/1.3 var(--mono); color: var(--mute); text-transform: uppercase; letter-spacing: .04em; }
.dock-value { display: block; margin: 4px 0 8px; font: 700 34px/1.1 var(--mono); min-height: 38px; overflow-wrap: anywhere; }
.dock-hint { margin: 0; font-size: 15px; color: var(--mute); max-width: 26ch; }
.comb { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.box { flex: none; width: 84px; }
.cellbox {
  position: relative;
  height: 112px;
  border: 1.5px solid var(--graphite);
  background:
    linear-gradient(transparent calc(22% - 1px), var(--rule) calc(22% - 1px), var(--rule) 22%, transparent 22%),
    linear-gradient(transparent calc(80% - 1px), var(--red-line) calc(80% - 1px), var(--red-line) 80%, transparent 80%),
    var(--paper);
  touch-action: none;
}
.box.is-writing .cellbox { border-color: var(--red); }
.cellbox canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.box.is-done canvas { opacity: .2; }
.char {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 700 54px/1 var(--mono);
  pointer-events: none;
}
.alts { display: flex; gap: 4px; margin-top: 6px; min-height: 40px; }
.alts button {
  flex: 1;
  min-height: 40px;
  border: 1px solid var(--rule);
  background: var(--paper);
  font: 600 18px var(--mono);
  color: var(--ink-2);
}
@media (hover: hover) {
  .alts button:hover { border-color: var(--graphite); color: var(--graphite); }
}
.dock-keys { display: grid; grid-template-columns: repeat(2, 76px); gap: 8px; }
.dock-keys button {
  min-height: 52px;
  border: 1.5px solid var(--graphite);
  background: var(--paper);
  font: 700 18px var(--mono);
}
.dock-keys button[data-key="back"] { font: 700 17px var(--sans); }
.dock-keys button.solid { grid-column: 1 / -1; background: var(--graphite); color: var(--film); font: 700 19px var(--sans); }
.dock-keys button:disabled { border-color: var(--rule); color: var(--rule); cursor: default; }

.toast {
  position: fixed;
  z-index: 60;
  left: 50%;
  top: 76px;
  max-width: min(520px, calc(100vw - 40px));
  padding: 12px 18px;
  background: var(--graphite);
  color: var(--film);
  font-weight: 600;
  font-size: 17px;
  transform: translate(-50%, -12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .3s var(--ease);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Locked (confirmed) */
body.is-locked .row.is-blank { display: none; }

/* Landscape tablet and desktop: title block becomes the right column */
@media (min-width: 1000px) and (min-aspect-ratio: 1/1) {
  .sheet { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) 400px; }
  .side { border-top: 0; border-left: 2px solid var(--graphite); grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .side-work { padding: 20px; }
  .title-block { border-left: 0; border-top: 2px solid var(--graphite); }
  .dock { right: calc(400px + var(--pad) + 2px); border-right: 2px solid var(--graphite); }
  body.dock-open .sheet { margin-bottom: max(var(--pad), env(safe-area-inset-bottom)); }
  .side-work { justify-content: flex-start; overflow-y: auto; gap: 10px; padding: 12px 20px 14px; }
  .issuer { display: block; margin-bottom: auto; }
  .summary { display: block; }
  body.is-locked .summary { display: none; }
  body.is-locked .issuer-line, body.is-locked .issuer-place { display: none; }
  .issuer-name { font-size: 22px; }
}

/* Narrow: phones */
@media (max-width: 720px) {
  :root { --pad: 12px; }
  body { height: auto; min-height: 100dvh; overflow: visible; }
  .sheet { display: block; }
  .bom-scroll { overflow: visible; }
  .sync { font-size: 12px; }
  .sync-long { display: none; }
  .topbar { flex-wrap: wrap; gap: 8px 12px; }
  .seg-type { order: 3; width: 100%; }
  .seg-type label { flex: 1; }
  .seg-type span { justify-content: center; width: 100%; padding: 0 8px; }
  .sheet { margin-top: 10px; }
  .bom-head { display: none; }
  .row { grid-template-columns: 72px minmax(0, 1fr); }
  .c-desc { grid-column: 2; grid-row: 1 / span 2; }
  .c-unit, .c-total { grid-column: 1 / -1; }
  .row > .c + .c { border-left: 0; }
  .c-unit { border-top: 1px dashed var(--grid); }
  .c-unit, .c-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .c-unit::before, .c-total::before { font: 600 12px/1.2 var(--mono); letter-spacing: .04em; color: var(--mute); }
  .c-unit::before { content: "V. UNIT."; }
  .c-total::before { content: "V. TOTAL"; }
  .c-unit .ink { width: auto; flex: 1; padding: 6px 0; }
  .c-total { padding-top: 4px !important; }
  .ruled { display: none; }
  body.dock-open .sheet { margin-bottom: var(--pad); }
  .side { grid-template-columns: 1fr; }
  .title-block { border-left: 0; border-top: 2px solid var(--graphite); }
  .total { font-size: 34px; }
  .dock { grid-template-columns: 1fr; gap: 12px; }
  .dock-hint { display: none; }
  .dock-keys { grid-template-columns: repeat(5, 1fr); }
  .dock-keys button.solid { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}

/* ---------- Views: Talonarios list and Ajustes ---------- */
[hidden] { display: none !important; }
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.view-title { margin: 0; font-weight: 700; font-size: 22px; }
.view-title:focus { outline: none; }
.view-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px var(--pad) var(--pad); padding-bottom: max(var(--pad), env(safe-area-inset-bottom)); }
.view-list .back { margin-left: 8px; }

.list-draft {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 16px; padding: 12px 16px;
  border: 2px solid var(--graphite); background: var(--paper);
}
.list-draft-text { margin: 4px 0 0; font-weight: 600; font-size: 18px; }
.list-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.list-search {
  flex: 1; min-width: 200px; min-height: 48px; padding: 0 14px;
  border: 2px solid var(--graphite); background: var(--paper); font-size: 18px;
}
.list-search:focus { outline: none; border-color: var(--graphite); background: var(--paper); }
.list-frame { border: 2px solid var(--graphite); background: rgba(251, 251, 248, .88); }
.list-table { width: 100%; border-collapse: collapse; }
.list-table th {
  padding: 12px; text-align: left; border-bottom: 2px solid var(--graphite);
  font: 600 12px/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--mute);
}
.list-table td { padding: 12px; border-bottom: 1px solid var(--rule); vertical-align: top; font-size: 17px; }
.list-table td.mono { font-size: 16px; }
.list-table tbody tr { cursor: pointer; }
.list-table tbody tr:focus-visible { outline: 2px solid var(--graphite); outline-offset: -3px; }
@media (hover: hover) { .list-table tbody tr:hover { background: var(--paper); } }
.list-table .r { text-align: right; }
.list-no { display: block; font-weight: 700; font-size: 17px; }
.list-type { display: block; font-size: 14px; color: var(--mute); }
.list-state.is-warn { color: var(--red); font-weight: 600; }
.list-send { font-size: 14px; color: var(--mute); }
.list-empty { margin: 0; padding: 32px 16px; text-align: center; color: var(--mute); font-size: 18px; }

.settings { max-width: 880px; }
.set-block { margin-bottom: 20px; padding: 16px 20px 20px; border: 2px solid var(--graphite); background: rgba(251, 251, 248, .92); }
.set-block h2 { margin: 0 0 4px; font-size: 22px; font-weight: 700; }
.set-lead { margin: 0 0 14px; color: var(--ink-2); font-size: 16px; max-width: 70ch; }
.set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.set-field.is-wide { grid-column: 1 / -1; }
.set-field input, .set-field textarea, .set-table input:not([type="checkbox"]) {
  width: 100%; min-height: 44px; margin-top: 4px; padding: 8px 10px;
  border: 1.5px solid var(--rule); background: var(--paper); font-size: 18px; resize: vertical;
}
.set-field input:focus, .set-field textarea:focus, .set-table input:focus { outline: none; border-color: var(--graphite); }
.set-field [aria-invalid="true"] { border-color: var(--red); background: var(--red-wash); }
.set-help { margin: 4px 0 0; font-size: 14px; color: var(--mute); }
.set-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.set-table th { padding: 8px 6px; text-align: left; border-bottom: 2px solid var(--graphite); font: 600 12px/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--mute); }
.set-table td { padding: 6px; border-bottom: 1px solid var(--grid); }
.set-table td:nth-child(2) { width: 150px; }
.set-table .c { text-align: center; width: 90px; }
.set-table input { margin-top: 0; }
.check { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--graphite); }
.set-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
#settings-error { margin-bottom: 12px; }

@media (max-width: 720px) {
  .set-grid { grid-template-columns: 1fr; }
  .list-table thead { display: none; }
  .list-table tr { display: grid; grid-template-columns: 1fr auto; padding: 8px 0; border-bottom: 1px solid var(--rule); }
  .list-table td { border: 0; padding: 4px 12px; }
  .list-send { grid-column: 1 / -1; }
}

.list-transfer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; }
.list-transfer .set-help { flex-basis: 100%; margin: 0; }
.list-transfer label.chip { cursor: pointer; }
.list-transfer input:focus-visible + label, .list-transfer label:focus-within { outline: 2px solid var(--graphite); outline-offset: 2px; }

/* Title block: saved clients, seller, editable date */
.title-block { position: relative; }
.client-suggest {
  position: absolute; z-index: 30; left: 0; right: 0; bottom: 100%;
  border: 2px solid var(--graphite); background: var(--paper);
  box-shadow: 0 -10px 24px rgba(42, 44, 46, .14);
}
.client-suggest button {
  display: flex; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 8px 12px;
  border: 0; border-bottom: 1px solid var(--grid); background: transparent; text-align: left; font-size: 18px; font-weight: 600;
}
.client-suggest button:last-child { border-bottom: 0; }
.client-suggest small { font: 500 15px var(--mono); color: var(--mute); white-space: nowrap; }
.client-suggest button.is-active, .client-suggest button:focus-visible { background: var(--red-wash); outline: none; }
.tb-seller { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.tb-seller-lbl { flex: none; font: 600 12px/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--mute); }
.tb-seller select {
  width: 100%; min-height: 44px; padding: 0 8px; border: 1.5px solid var(--rule); background: var(--paper);
  font: 600 16px var(--sans); color: var(--graphite);
}
.tb-seller select:disabled { border-color: transparent; padding: 0; appearance: none; background: transparent; }
.tb-date { display: flex; align-items: center; gap: 6px; }
.tb-date .tb-input { font: 600 16px var(--mono); min-width: 0; }
.tb-date .chip { flex: none; padding: 0 10px; }
.suggest-manage {
  display: block; padding: 12px 14px; border-top: 1px solid var(--rule);
  color: var(--ink-2); font-weight: 600; font-size: 16px; text-decoration: underline; text-underline-offset: 3px;
}
.suggest-manage:focus-visible { outline: 2px solid var(--graphite); outline-offset: -2px; }

/* Dialogs: review before confirming, void, device setup */
.sheet-dialog {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0;
  border: 2px solid var(--graphite); background: var(--film); color: var(--graphite);
  box-shadow: 0 18px 40px rgba(42, 44, 46, .22);
}
.sheet-dialog::backdrop { background: rgba(42, 44, 46, .35); }
.sd-body { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.sd-title { margin: 0; font-size: 22px; font-weight: 700; }
.sd-lead { margin: 0; color: var(--ink-2); font-size: 16px; }
.sd-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.sd-list li { border-bottom: 1px solid var(--rule); }
.sd-list button {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 48px;
  padding: 8px 4px; border: 0; background: transparent; text-align: left; font-size: 17px; font-weight: 600; color: var(--red);
}
.sd-list button span { font: 500 14px var(--sans); color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.sd-list .is-info { color: var(--graphite); }
.sd-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.sd-input {
  width: 100%; min-height: 48px; padding: 8px 12px; border: 1.5px solid var(--rule); background: var(--paper); font-size: 18px;
}
.sd-input.mono { font: 600 22px var(--mono); text-transform: uppercase; }
.sd-input:focus { outline: none; border-color: var(--graphite); }
.sd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sd-reasons { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.sd-reasons legend { margin-bottom: 6px; }
.sd-reasons label { position: relative; }
.sd-reasons input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sd-reasons span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--graphite); background: var(--paper); font-weight: 600; }
.sd-reasons input:checked + span { background: var(--graphite); color: var(--film); }
.sd-reasons input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }

/* Voided documents */
.stamp.is-void { border-color: var(--red); color: var(--red); }
.list-table tr.is-void td { color: var(--mute); }
.list-table tr.is-void .list-no { text-decoration: line-through; }
.notice { margin: 0 0 16px; padding: 12px 16px; border: 2px solid var(--red); background: var(--paper); color: var(--red); font-weight: 600; }

/* ---------- P2 fixes ---------- */

/* F9: numeric keypad in the dock; corrections by tapping a box */
.dock-keys { grid-template-columns: repeat(4, 58px); }
.dock-keys button[data-key="back"] { grid-column: auto; }
.dock-keys button.solid { grid-column: span 2; }
.box.is-selected .cellbox { outline: 3px solid var(--graphite); outline-offset: 2px; }
.alts button { min-height: 44px; min-width: 44px; }

/* F7: in landscape the issuer and review scroll; payment and Confirmar stay at the bottom */
.side-info { display: contents; }
@media (min-width: 1000px) and (min-aspect-ratio: 1/1) {
  .side-work { overflow: hidden; }
  .side-info { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-bottom: auto; }
  .side-info .issuer { margin-bottom: 10px; }
  .pay, .error, .actions { flex: none; }
}

/* F12: the save bar stays on screen and says when there are unsaved changes */
.set-actions {
  position: sticky; bottom: 0; z-index: 5;
  margin: 0 -2px; padding: 12px 16px;
  border: 2px solid var(--graphite); background: var(--film);
}
.set-state { margin: 0 auto 0 0; font-weight: 600; color: var(--mute); }
.settings.is-dirty .set-state { color: var(--red); }

/* F13: first use */
.sd-sub { margin: 10px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); }
.sd-join { display: flex; flex-direction: column; gap: 8px; }
.sd-join[hidden] { display: none; }

/* F14: informational notices */
.notice.is-info { border-color: var(--graphite); color: var(--graphite); }

@media (max-width: 720px) {
  .dock-keys { grid-template-columns: repeat(4, 1fr); }
  .dock-keys button.solid { grid-column: span 2; }
}

/* F17: every target at least 44 px, gloves included */
.c-unit .ink { min-height: 44px; }
@media (max-width: 720px) { .c-unit .ink { min-height: 44px; } }

/* The mono face draws "½" at half height; the sans keeps it as large as the digits. */
.dock-keys button[data-key="½"] { font: 700 24px var(--sans); }

/* ---------- Pass-2 fixes ---------- */

/* G11: the dialog's main button stays reachable on short screens */
.sheet-dialog { overflow-y: auto; }
.sheet-dialog .sd-actions {
  position: sticky; bottom: -20px; margin: 4px -20px -20px; padding: 12px 20px 20px;
  background: var(--film); border-top: 1px solid var(--rule);
}
.sd-first { display: flex; flex-direction: column; gap: 12px; }

/* G13: notices in one strip that can be folded */
.notices { margin: 0 0 16px; }
.notices > summary {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px; cursor: pointer;
  border: 2px solid var(--graphite); background: var(--paper); font-weight: 700;
}
.notices[open] > summary { border-bottom: 0; }
.notices .notice { margin: 0; border-top-width: 1px; }
.notices .notice + .notice { border-top: 0; }
.notice-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.toast { top: auto; bottom: calc(24px + env(safe-area-inset-bottom)); }
body.dock-open .toast { bottom: calc(var(--dock-h) + 16px); }

/* G8: the keypad folds on phones; the page scrolls above the dock */
.keys-toggle { display: none; }
@media (max-width: 720px) {
  body.dock-open { padding-bottom: var(--dock-h); }
  .keys-toggle { display: block; grid-column: span 4; font: 700 17px var(--sans) !important; }
  .dock:not(.keys-open) .dock-keys button:not([data-key="back"]):not([data-key="done"]):not([data-key="keys"]) { display: none; }
  .dock:not(.keys-open) .dock-keys { grid-template-columns: repeat(4, 1fr); }
}

/* Single editor: shared settings are read-only on the other devices */
.set-field input:disabled, .set-field textarea:disabled, .set-table input:disabled:not([type="checkbox"]) {
  border-color: transparent; border-bottom-color: var(--rule); background: transparent; color: var(--graphite); opacity: 1; -webkit-text-fill-color: var(--graphite); resize: none;
}
.set-table button:disabled { visibility: hidden; }
#editor-note { margin: 0 0 14px; }

/* Sketch angle setting in Ajustes */
.seg-angles { margin-top: 6px; width: fit-content; max-width: 100%; }

/* ---------- Compact dock ----------
   One header line (what is being written and its value), then the handwriting
   boxes beside the keys, so the field being filled stays in view above it. */
.dock {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "read read" "comb keys";
  gap: 8px 16px;
  padding: 10px var(--pad);
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}
.dock-read { grid-area: read; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; min-width: 0; }
.dock-value { margin: 0; font-size: 26px; min-height: 0; }
.dock-hint { flex: 1 1 260px; max-width: none; font-size: 14px; }
.comb { grid-area: comb; }
.box { width: 72px; }
.cellbox { height: 92px; }
.char { font-size: 44px; }
.dock-keys { grid-area: keys; align-self: start; grid-template-columns: repeat(8, 52px); gap: 6px; }
.dock-keys button { min-height: 48px; }
.dock-keys button.solid { grid-column: span 2; }
/* Digits in order, then the extras: two rows of eight on a tablet. */
.dock-keys [data-key="1"] { order: 1; } .dock-keys [data-key="2"] { order: 2; } .dock-keys [data-key="3"] { order: 3; }
.dock-keys [data-key="4"] { order: 4; } .dock-keys [data-key="5"] { order: 5; } .dock-keys [data-key="6"] { order: 6; }
.dock-keys [data-key="7"] { order: 7; } .dock-keys [data-key="8"] { order: 8; } .dock-keys [data-key="9"] { order: 9; }
.dock-keys [data-key="0"] { order: 10; } .dock-keys [data-key="000"] { order: 11; } .dock-keys [data-key=","] { order: 12; }
.dock-keys [data-key="½"] { order: 13; } .dock-keys [data-key="back"] { order: 14; } .dock-keys [data-key="done"] { order: 15; }
.dock-keys [data-key="keys"] { order: 16; }

@media (max-width: 720px) {
  .dock { gap: 8px 10px; }
  .box { width: 62px; }
  .cellbox { height: 80px; }
  .char { font-size: 34px; }
  .dock-keys button { min-height: 44px; }
  /* Folded: Borrar, Listo and Teclado in one column beside the box. */
  .dock:not(.keys-open) .dock-keys { grid-template-columns: 104px; }
  .dock:not(.keys-open) .dock-keys button.solid, .keys-toggle { grid-column: auto; }
  /* Typing on the keys: the handwriting boxes step aside. */
  .dock.keys-open { grid-template-columns: minmax(0, 1fr); grid-template-areas: "read" "keys"; }
  .dock.keys-open .comb { display: none; }
  .dock.keys-open .dock-keys { grid-template-columns: repeat(6, 1fr); }
  .dock.keys-open .dock-keys .keys-toggle { grid-column: span 2; }
}
.dock-keys button[data-key="back"] { font: 700 15px var(--sans); padding: 0 2px; }

/* Issuer: NIT and contact under the place */
.issuer-id { font: 600 15px/1.35 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
/* In Ajustes the toast sits above the sticky save bar instead of covering it. */
body[data-route="settings"] .toast { bottom: calc(108px + env(safe-area-inset-bottom)); }