/* ════════════════════════════════════════════════════════════
     TOKENS
     Fondo porcelana fría (vitrina refrigerada), no crema tibia.
     Con solo dos bases, el color lo aportan los toppings.
     Estado: paleta validada con validate_palette.js en ambos modos.
     ════════════════════════════════════════════════════════════ */
  :root {
    --ground:     #F2EADB;
    --surface:    #FFFCF7;
    --surface-2:  #EBE1CD;
    --surface-3:  #DFD2B8;
    --ink:        #241A12;
    --ink-soft:   #6B5A48;
    --ink-faint:  #9D8B75;
    --line:       #DFD3BC;
    --line-soft:  #EDE4D3;

    --accent:     #2A1D14;
    --accent-in:  #FBF6EC;
    --accent-wash:#E7DAC2;

    --good:       #00897B;
    --warn:       #C47F09;
    --bad:        #A82B4E;
    --good-wash:  #DDEFE9;
    --warn-wash:  #F6E9D0;
    --bad-wash:   #F5DFE4;

    --grid:       #E4D9C4;
    --data:       #A5661F;

    --shadow-1: 0 1px 2px rgba(52,36,22,.06);
    --shadow-2: 0 1px 2px rgba(52,36,22,.06), 0 10px 26px -14px rgba(52,36,22,.26);
    --shadow-3: 0 2px 8px rgba(52,36,22,.10), 0 40px 70px -24px rgba(52,36,22,.42);

    --sheen: linear-gradient(157deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.05) 22%, rgba(255,255,255,0) 40%);

    --display: "Optima", "Palatino", "Palatino Linotype", Georgia, serif;
    --ui: "Avenir Next", "Avenir", "SF Pro Text", -apple-system, system-ui, sans-serif;

    --r-1: 9px;
    --r-2: 14px;
    --r-3: 20px;
    --r-4: 26px;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --ground:     #17110B;  --surface:   #201810;  --surface-2: #2B2117;
      --surface-3:  #392C1E;  --ink:       #F2E9D9;  --ink-soft:  #B3A38D;
      --ink-faint:  #7B6C58;  --line:      #33271A;  --line-soft: #251C13;
      --accent:     #E8D7B6;  --accent-in: #1A1209;  --accent-wash:#2E2316;
      --good:       #0E9C88;  --warn:      #BC861A;  --bad:       #BE4459;
      --good-wash:  #10322C;  --warn-wash: #33280F;  --bad-wash:  #331820;
      --grid:       #2B2118;
    --data:       #CFA05A;
      --shadow-1: 0 1px 2px rgba(0,0,0,.45);
      --shadow-2: 0 1px 2px rgba(0,0,0,.5), 0 10px 26px -14px rgba(0,0,0,.75);
      --shadow-3: 0 2px 8px rgba(0,0,0,.55), 0 40px 70px -24px rgba(0,0,0,.88);
      --sheen: linear-gradient(157deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.03) 22%, rgba(255,255,255,0) 40%);
    }
  }

  :root[data-theme="dark"] {
    --ground:     #17110B;  --surface:   #201810;  --surface-2: #2B2117;
    --surface-3:  #392C1E;  --ink:       #F2E9D9;  --ink-soft:  #B3A38D;
    --ink-faint:  #7B6C58;  --line:      #33271A;  --line-soft: #251C13;
    --accent:     #E8D7B6;  --accent-in: #1A1209;  --accent-wash:#2E2316;
    --good:       #0E9C88;  --warn:      #BC861A;  --bad:       #BE4459;
    --good-wash:  #10322C;  --warn-wash: #33280F;  --bad-wash:  #331820;
    --grid:       #2B2118;
    --data:       #CFA05A;
    --shadow-1: 0 1px 2px rgba(0,0,0,.45);
    --shadow-2: 0 1px 2px rgba(0,0,0,.5), 0 10px 26px -14px rgba(0,0,0,.75);
    --shadow-3: 0 2px 8px rgba(0,0,0,.55), 0 40px 70px -24px rgba(0,0,0,.88);
    --sheen: linear-gradient(157deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.03) 22%, rgba(255,255,255,0) 40%);
  }

  :root[data-theme="light"] {
    --ground:     #F2EADB;  --surface:   #FFFCF7;  --surface-2: #EBE1CD;
    --surface-3:  #DFD2B8;  --ink:       #241A12;  --ink-soft:  #6B5A48;
    --ink-faint:  #9D8B75;  --line:      #DFD3BC;  --line-soft: #EDE4D3;
    --accent:     #2A1D14;  --accent-in: #FBF6EC;  --accent-wash:#E7DAC2;
    --good:       #00897B;  --warn:      #C47F09;  --bad:       #A82B4E;
    --good-wash:  #DDEFE9;  --warn-wash: #F6E9D0;  --bad-wash:  #F5DFE4;
    --grid:       #E4D9C4;
    --data:       #A5661F;
    --shadow-1: 0 1px 2px rgba(52,36,22,.06);
    --shadow-2: 0 1px 2px rgba(52,36,22,.06), 0 10px 26px -14px rgba(52,36,22,.26);
    --shadow-3: 0 2px 8px rgba(52,36,22,.10), 0 40px 70px -24px rgba(52,36,22,.42);
    --sheen: linear-gradient(157deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.05) 22%, rgba(255,255,255,0) 40%);
  }

  /* ════════ BASE ════════ */
  * { box-sizing: border-box; }
  html, body { height: 100%; margin: 0; }

  body {
    background: var(--ground);
    color: var(--ink);
    font-family: var(--ui);
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
  }

  button, input { font: inherit; color: inherit; }
  button { border: none; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

  .num { font-variant-numeric: tabular-nums; }

  .eyebrow {
    font-size: 10px; font-weight: 600; letter-spacing: .15em;
    text-transform: uppercase; color: var(--ink-faint);
  }

  h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }

  /* ════════ SHELL ════════ */
  .shell { display: grid; grid-template-columns: 88px 1fr; height: 100dvh; }

  .rail {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 14px 8px;
    background: var(--surface);
    border-right: 1px solid var(--line);
  }

  /* El logo es un sticker circular: lleva su propio disco crema, así
     se lee igual sobre el fondo claro y sobre el oscuro. */
  .brandmark {
    width: 58px; height: 58px;
    margin-bottom: 14px; flex-shrink: 0;
    border-radius: 50%;
    box-shadow: var(--shadow-2);
  }

  .brandmark img { display: block; width: 100%; height: 100%; border-radius: 50%; }

  .nav-btn {
    width: 72px; height: 62px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    border-radius: var(--r-2);
    color: var(--ink-faint);
    transition: background .16s, color .16s;
  }

  .nav-btn svg { width: 21px; height: 21px; stroke-width: 1.6; }
  .nav-btn span { font-size: 10.5px; font-weight: 600; }
  .nav-btn:hover { color: var(--ink-soft); background: var(--surface-2); }
  .nav-btn[aria-current="page"] { background: var(--accent-wash); color: var(--accent); }

  .rail-gap { flex: 1; }

  .rail-btn {
    width: 44px; height: 44px; display: grid; place-items: center;
    border-radius: var(--r-1); color: var(--ink-faint); font-size: 17px;
  }

  .rail-btn:hover { background: var(--surface-2); color: var(--ink); }

  .stage { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
  .view { display: none; flex: 1; min-height: 0; }
  .view.on { display: flex; animation: viewin .3s cubic-bezier(.2,.85,.3,1); }

  @keyframes viewin { from { opacity: 0; transform: translateY(7px); } }

  .head { display: flex; align-items: center; gap: 16px; padding: 18px 24px 14px; flex-shrink: 0; }
  .head h1 { font-family: var(--display); font-size: 27px; }
  .head .sub { font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; }
  .head-gap { flex: 1; }

  .pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px 6px 10px; border-radius: 999px;
    background: var(--accent-wash); color: var(--accent);
    font-size: 11.5px; font-weight: 600;
  }

  .pill.muted { background: var(--surface-2); color: var(--ink-soft); }
  .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

  .scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; }

  /* ════════════════════════════════════════════════════════════
     VENTA — la base es una decisión de dos; los toppings son el negocio
     ════════════════════════════════════════════════════════════ */
  #v-venta { display: none; }
  #v-venta.on { display: grid; grid-template-columns: 1fr 396px; }

  .vitrina { overflow-y: auto; padding: 18px 22px 30px; min-height: 0; }

  .section-label {
    display: flex; align-items: baseline; gap: 10px;
    margin: 0 0 11px;
  }

  .section-label h2 { font-family: var(--display); font-size: 19px; }
  .section-label .hint { font-size: 12px; color: var(--ink-faint); }

  .bases {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 26px;
  }

  /* La base sí es pigmento: es el helado. */
  .base {
    position: relative;
    min-height: 132px;
    padding: 15px;
    border-radius: var(--r-3);
    display: flex; flex-direction: column; justify-content: flex-end;
    text-align: left;
    overflow: hidden;
    box-shadow: var(--shadow-2), inset 0 0 0 1px rgba(36,26,18,.08);
    transition: transform .13s ease;
  }

  .base::after { content: ""; position: absolute; inset: 0; background: var(--sheen); pointer-events: none; }
  .base:active { transform: scale(.97); }

  .base .name {
    position: relative; z-index: 1;
    font-family: var(--display); font-size: 25px; line-height: 1.05;
  }

  .base .meta {
    position: relative; z-index: 1; margin-top: 5px;
    font-size: 11px; font-weight: 600; letter-spacing: .04em; opacity: .74;
  }

  .base[aria-pressed="true"] { outline: 3px solid var(--accent); outline-offset: 3px; }

  .base .tick {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--accent); color: var(--accent-in);
    display: grid; place-items: center; font-size: 14px; font-weight: 700;
    animation: pop .3s cubic-bezier(.3,1.6,.5,1);
  }

  .base.out { box-shadow: none; filter: saturate(.1); opacity: .46; cursor: not-allowed; }

  .flag {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    padding: 3px 8px; border-radius: 999px;
    font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    background: rgba(0,0,0,.44); color: #fff;
  }

  /* ─── Comanda ─── */
  .comanda {
    display: flex; flex-direction: column;
    background: var(--surface);
    border-left: 1px solid var(--line);
    min-height: 0;
  }

  .builder {
    padding: 15px 18px 16px;
    border-bottom: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 11px;
  }

  .seg { display: flex; gap: 5px; padding: 4px; background: var(--surface-2); border-radius: 12px; }

  .seg button {
    flex: 1; height: 42px; border-radius: 9px;
    font-size: 13px; font-weight: 600; color: var(--ink-soft);
    transition: background .15s, color .15s, box-shadow .15s;
  }

  .seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }

  .cup {
    display: flex; align-items: center; gap: 13px;
    padding: 12px 13px;
    border: 1px dashed var(--line);
    border-radius: var(--r-2);
    min-height: 70px;
  }

  .cup-vis {
    position: relative;
    width: 42px; height: 46px; flex-shrink: 0;
    border-radius: 5px 5px 15px 15px;
    background: var(--surface-2);
    overflow: hidden;
    border: 1px solid var(--line);
  }

  .cup-fill { position: absolute; inset: 0; }
  .cup-fill.pop { animation: fillin .34s cubic-bezier(.32,1.5,.5,1); }

  @keyframes fillin { from { transform: translateY(60%); opacity: .3; } }

  .cup-txt { flex: 1; min-width: 0; }

  .cup-txt b {
    display: block; font-family: var(--display); font-size: 17px; font-weight: 400;
    line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  .cup-txt span { font-size: 11.5px; color: var(--ink-faint); line-height: 1.35; }

  .add {
    height: 48px; border-radius: var(--r-2);
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 15px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: background .15s, opacity .15s;
  }

  .add:hover:not(:disabled) { background: var(--accent-wash); }
  .add:disabled { border-color: var(--line); color: var(--ink-faint); cursor: not-allowed; }

  .ticket { flex: 1; overflow-y: auto; padding: 4px 18px; min-height: 0; }

  .empty-state {
    height: 100%; display: grid; place-content: center; justify-items: center;
    gap: 7px; text-align: center; color: var(--ink-faint); padding: 30px 10px;
  }

  .empty-state b { font-family: var(--display); font-size: 18px; font-weight: 400; color: var(--ink-soft); }
  .empty-state p { margin: 0; font-size: 12.5px; max-width: 25ch; line-height: 1.5; }

  .line {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 12px 0; border-bottom: 1px solid var(--line-soft);
    animation: slide .22s ease;
  }

  @keyframes slide { from { opacity: 0; transform: translateX(9px); } }

  .line-chip {
    width: 22px; height: 22px; border-radius: 6px;
    flex-shrink: 0; margin-top: 2px;
    border: 1px solid rgba(0,0,0,.1);
  }

  .line-body { flex: 1; min-width: 0; }
  .line-body b { display: block; font-family: var(--display); font-size: 16px; font-weight: 400; line-height: 1.25; }
  .line-body span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-faint); line-height: 1.4; }
  .line-price { font-size: 15px; font-weight: 600; }

  .kill {
    width: 30px; height: 30px; margin: -4px -6px 0 0;
    border-radius: 50%; color: var(--ink-faint); font-size: 17px; line-height: 1; flex-shrink: 0;
  }

  .kill:hover { background: var(--surface-2); color: var(--ink); }

  .foot {
    padding: 15px 18px calc(15px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 12px;
  }

  .totals { display: flex; align-items: baseline; justify-content: space-between; }
  .totals .lbl { font-family: var(--display); font-size: 17px; color: var(--ink-soft); }
  .totals .amt { font-size: 35px; font-weight: 600; letter-spacing: -.018em; }

  .pay {
    height: 62px; border-radius: var(--r-2);
    background: var(--accent); color: var(--accent-in);
    font-size: 17px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    transition: transform .12s, opacity .15s;
  }

  .pay:active { transform: scale(.985); }
  .pay:disabled { opacity: .28; cursor: not-allowed; }

  /* ════════════════════════════════════════════════════════════
     PIEZAS COMPARTIDAS
     ════════════════════════════════════════════════════════════ */
  .pad { padding: 4px 24px 32px; }

  .mini {
    height: 32px; min-width: 44px; padding: 0 11px;
    border-radius: var(--r-1);
    border: 1px solid var(--line);
    font-size: 12px; font-weight: 600; color: var(--ink-soft);
    transition: background .15s, color .15s;
  }

  .mini:hover { background: var(--surface-2); color: var(--ink); }
  .mini.solid { background: var(--ink); border-color: var(--ink); color: var(--ground); }

  /* ════════════════════════════════════════════════════════════
     TURNO
     ════════════════════════════════════════════════════════════ */
  .corte { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }

  .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    box-shadow: var(--shadow-1);
    overflow: hidden;
  }

  .card-head { padding: 16px 20px 14px; border-bottom: 1px solid var(--line-soft); }
  .card-head h2 { font-family: var(--display); font-size: 20px; }
  .card-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-faint); }

  .denoms {
    padding: 6px 20px 16px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(304px, 1fr));
    gap: 0 26px;
  }

  .denom {
    display: grid; grid-template-columns: 62px 1fr auto;
    align-items: center; gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .denom-face {
    width: 62px; padding: 5px 0;
    border-radius: 5px; text-align: center;
    font-size: 13px; font-weight: 700;
    background: var(--surface-2); color: var(--ink-soft);
  }

  .denom-face.coin { border-radius: 999px; width: 46px; }

  .stepper { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

  .step {
    width: 40px; height: 40px; border-radius: var(--r-1);
    background: var(--surface-2);
    font-size: 19px; font-weight: 600; color: var(--ink-soft);
    display: grid; place-items: center;
    transition: transform .1s;
  }

  .step:active { transform: scale(.92); }

  .qty {
    width: 54px; height: 40px; text-align: center;
    border: 1px solid var(--line); border-radius: var(--r-1);
    background: var(--ground);
    font-size: 16px; font-weight: 600;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
  }

  .qty::-webkit-outer-spin-button, .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

  .denom-sum { text-align: right; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
  .denom-sum.zero { color: var(--ink-faint); opacity: .5; }

  .tally { padding: 18px 20px; display: flex; flex-direction: column; gap: 13px; }

  .row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; }
  .row .k { color: var(--ink-soft); }
  .row .v { font-weight: 600; font-size: 16px; }
  .row.total { padding-top: 13px; border-top: 1px solid var(--line); }
  .row.total .k { font-family: var(--display); font-size: 17px; color: var(--ink); }
  .row.total .v { font-size: 24px; }

  .verdict {
    margin-top: 4px; padding: 20px;
    border-radius: var(--r-2); text-align: center;
    background: var(--surface-2);
    transition: background .3s;
  }

  .verdict .eyebrow { color: currentColor; opacity: .7; }
  .verdict b { display: block; margin-top: 7px; font-size: 40px; font-weight: 700; letter-spacing: -.025em; line-height: 1; }
  .verdict p { margin: 9px 0 0; font-size: 12.5px; line-height: 1.45; opacity: .8; }
  .verdict.cuadra { background: var(--good-wash); color: var(--good); }
  .verdict.falta  { background: var(--bad-wash);  color: var(--bad); }
  .verdict.sobra  { background: var(--warn-wash); color: var(--warn); }

  /* ════════════════════════════════════════════════════════════
     DÍA
     ════════════════════════════════════════════════════════════ */
  .tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: 12px; margin-bottom: 20px;
  }

  .tile {
    padding: 17px 18px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    box-shadow: var(--shadow-1);
  }

  .tile b { display: block; margin-top: 8px; font-size: 31px; font-weight: 600; letter-spacing: -.022em; line-height: 1; }
  .tile .delta { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600; }
  .delta.up { color: var(--good); }
  .delta.down { color: var(--bad); }

  .charts { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; }
  .chart-card { padding: 18px 20px 16px; }
  .chart-card h2 { font-family: var(--display); font-size: 19px; }
  .chart-card .cap { margin: 3px 0 16px; font-size: 12.5px; color: var(--ink-faint); }

  .plot { position: relative; }
  .plot svg { display: block; width: 100%; height: auto; overflow: visible; }

  .tip {
    position: absolute; z-index: 5;
    padding: 8px 11px;
    background: var(--ink); color: var(--ground);
    border-radius: var(--r-1);
    font-size: 12px; line-height: 1.4;
    pointer-events: none; white-space: nowrap;
    box-shadow: var(--shadow-2);
    transform: translate(-50%, -128%);
    opacity: 0; transition: opacity .12s;
  }

  .tip.on { opacity: 1; }
  .tip b { display: block; font-size: 14px; font-weight: 700; }

  /* La longitud codifica la magnitud, un solo tono. El color del
     ingrediente va como distintivo junto al nombre, nunca como la
     codificación: no pasa validación como paleta categórica. */
  .bars { display: flex; flex-direction: column; gap: 11px; }
  .bar-row { display: grid; grid-template-columns: minmax(0, 162px) 1fr 46px; align-items: center; gap: 10px; }
  .bar-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .bar-swatch { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,.1); }
  .bar-name span { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bar-track { height: 15px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
  .bar-fill { display: block; height: 100%; background: var(--data); border-radius: 0 4px 4px 0; transition: width .5s cubic-bezier(.25,.9,.3,1); }
  .bar-val { text-align: right; font-size: 13.5px; font-weight: 600; }

  .table-toggle { margin-top: 14px; font-size: 12px; font-weight: 600; color: var(--ink-faint); text-decoration: underline; text-underline-offset: 3px; }

  .dtable { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; }
  .dtable th, .dtable td { text-align: left; padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line-soft); }
  .dtable th { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
  .dtable td:last-child, .dtable th:last-child { text-align: right; padding-right: 0; }
  .dtable[hidden] { display: none; }

  /* ════════════════════════════════════════════════════════════
     CARTA
     ════════════════════════════════════════════════════════════ */
  .carta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }

  .edit-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 13px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
  }

  .swatch-input {
    width: 38px; height: 38px; padding: 0;
    border: 1px solid var(--line); border-radius: 10px;
    background: none; cursor: pointer; flex-shrink: 0;
  }

  .swatch-input::-webkit-color-swatch-wrapper { padding: 3px; }
  .swatch-input::-webkit-color-swatch { border: none; border-radius: 7px; }

  .text-input {
    flex: 1; min-width: 0; height: 38px; padding: 0 11px;
    border: 1px solid var(--line); border-radius: var(--r-1);
    background: var(--ground);
    font-size: 14.5px;
  }

  .text-input.short { width: 70px; flex: 0 0 70px; text-align: right; font-variant-numeric: tabular-nums; }

  .note {
    margin: 20px 0 0;
    padding: 15px 17px;
    border-left: 2px solid var(--accent);
    background: var(--accent-wash);
    border-radius: 0 var(--r-1) var(--r-1) 0;
    font-size: 13px; line-height: 1.55; color: var(--ink-soft);
    max-width: 62ch;
  }

  .note b { color: var(--ink); }

  /* ════════════════════════════════════════════════════════════
     COBRO
     ════════════════════════════════════════════════════════════ */
  .veil {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(8,17,16,.52);
    backdrop-filter: blur(7px);
    display: grid; place-items: center; padding: 20px;
    animation: fade .18s ease;
  }

  @keyframes fade { from { opacity: 0; } }
  .veil[hidden] { display: none; }

  .sheet {
    width: min(560px, 100%); max-height: 92dvh; overflow-y: auto;
    background: var(--surface);
    border-radius: var(--r-4);
    box-shadow: var(--shadow-3);
    padding: 26px 26px calc(26px + env(safe-area-inset-bottom));
    animation: rise .28s cubic-bezier(.2,.9,.3,1);
  }

  @keyframes rise { from { opacity: 0; transform: translateY(22px) scale(.975); } }

  .sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
  .due b { display: block; margin-top: 5px; font-size: 43px; font-weight: 600; letter-spacing: -.025em; line-height: 1; }

  .tenders { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin-bottom: 10px; }

  .tender {
    height: 58px; border-radius: var(--r-2);
    border: 1px solid var(--line); background: var(--surface);
    font-size: 17px; font-weight: 600;
    transition: background .14s, transform .1s;
  }

  .tender:active { transform: scale(.96); }
  .tender:hover { background: var(--surface-2); }
  .tender.exact { background: var(--accent-wash); border-color: transparent; color: var(--accent); font-size: 14px; }

  .keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
  .key { height: 58px; border-radius: var(--r-2); background: var(--surface-2); font-size: 21px; font-weight: 600; transition: transform .1s; }
  .key:active { transform: scale(.95); }

  .change {
    border-radius: var(--r-2); padding: 19px 21px; margin-bottom: 10px;
    background: var(--surface-2);
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    transition: background .25s, color .25s;
  }

  .change.ready { background: var(--accent); color: var(--accent-in); }
  .change .k { font-family: var(--display); font-size: 18px; opacity: .82; }
  .change .v { font-size: 47px; font-weight: 700; letter-spacing: -.028em; line-height: 1; }

  .short-hint {
    margin-bottom: 14px; padding: 11px 16px;
    border-radius: var(--r-1);
    background: var(--warn-wash); color: var(--warn);
    font-size: 13px; font-weight: 600;
  }

  .sheet-actions { display: grid; grid-template-columns: 1fr 1.7fr; gap: 9px; }

  .ghost {
    height: 58px; border-radius: var(--r-2);
    border: 1px solid var(--line);
    font-size: 15px; font-weight: 600; color: var(--ink-soft);
  }

  .ghost:hover { background: var(--surface-2); }

  .done { text-align: center; padding: 14px 6px 6px; }

  .seal {
    width: 74px; height: 74px; margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--accent); color: var(--accent-in);
    display: grid; place-items: center; font-size: 33px;
    animation: pop .42s cubic-bezier(.3,1.6,.5,1);
  }

  @keyframes pop { from { transform: scale(.35); opacity: 0; } }

  .done h2 { font-family: var(--display); font-size: 27px; margin-bottom: 6px; }
  .done .give { font-size: 15px; color: var(--ink-soft); margin: 0 0 22px; }
  .done .give b { color: var(--ink); font-size: 20px; }

  .done .lema {
    margin: 22px 0 0;
    font-family: var(--display);
    font-size: 14px; font-style: italic;
    color: var(--ink-faint);
  }

  /* ════════════════════════════════════════════════════════════
     TELÉFONO
     ════════════════════════════════════════════════════════════ */
  @media (max-width: 940px) {
    .shell { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }

    .rail {
      grid-row: 2; flex-direction: row; justify-content: space-around;
      align-items: center; gap: 0;
      padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
      border-right: none; border-top: 1px solid var(--line);
    }

    .brandmark, .rail-gap { display: none; }
    .nav-btn { width: auto; flex: 1; height: 54px; }
    .nav-btn span { font-size: 10px; }
    .rail-btn { width: 38px; height: 38px; flex-shrink: 0; }

    .stage { grid-row: 1; min-height: 0; }
    .head { padding: 14px 16px 10px; }
    .head h1 { font-size: 22px; }

    #v-venta.on { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }

    .vitrina { padding: 14px 14px 18px; }
    .bases { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 20px; }
    .base { min-height: 104px; padding: 11px; border-radius: var(--r-2); }
    .base .name { font-size: 18px; }

    .comanda {
      border-left: none; border-top: 1px solid var(--line);
      max-height: 52dvh;
      border-radius: var(--r-3) var(--r-3) 0 0;
      box-shadow: var(--shadow-3);
    }

    .builder { padding: 12px 14px; }
    .ticket { padding: 4px 14px; }
    .ticket.collapsed { display: none; }
    .foot { padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); }
    .totals .amt { font-size: 30px; }

    .pad { padding: 2px 16px 28px; }
    .corte, .charts { grid-template-columns: 1fr; }
    .bar-row { grid-template-columns: 116px 1fr 46px; }

    .sheet { padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); }
    .due b { font-size: 36px; }
    .change .v { font-size: 40px; }
  }

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

  /* ════════════════════════════════════════════════════════════
     PWA — estado de red e instalación
     ════════════════════════════════════════════════════════════ */
  .net {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    width: 72px; padding: 8px 4px;
    border-radius: var(--r-2);
    color: var(--ink-faint);
    transition: background .16s, color .16s;
  }

  .net:hover { background: var(--surface-2); color: var(--ink-soft); }

  .net-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--good);
    box-shadow: 0 0 0 3px var(--good-wash);
  }

  .net[data-state="off"] { color: var(--warn); }
  .net[data-state="off"] .net-dot { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-wash); }

  .net-txt { font-size: 9.5px; font-weight: 600; letter-spacing: .01em; text-align: center; line-height: 1.15; }

  .net-q {
    position: absolute; top: 2px; right: 8px;
    min-width: 19px; height: 19px; padding: 0 5px;
    border-radius: 999px;
    background: var(--accent); color: var(--accent-in);
    font-size: 10.5px; font-weight: 700;
    display: grid; place-items: center;
  }

  .net-q[hidden] { display: none; }

  .install-title { display: block; font-family: var(--display); font-size: 25px; font-weight: 400; line-height: 1.15; }

  .install-steps {
    margin: 0 0 20px; padding: 0 0 0 20px;
    display: flex; flex-direction: column; gap: 11px;
    font-size: 14px; line-height: 1.55; color: var(--ink-soft);
  }

  .install-steps b { color: var(--ink); }

  @media (max-width: 940px) {
    .net {
      flex-direction: row; gap: 6px;
      width: auto; padding: 8px 10px; flex-shrink: 0;
    }

    .net-txt { display: none; }
    .net-q { position: static; }
  }

  /* Sin token configurado: la app vende igual, pero nada sube. */
  .net[data-state="sin-token"] { color: var(--accent); }
  .net[data-state="sin-token"] .net-dot {
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-wash);
  }

  /* ════════════════════════════════════════════════════════════
     CARTA DE PRODUCTOS — el precio lo fija el producto, no un tamaño
     ════════════════════════════════════════════════════════════ */
  .grupo { margin-bottom: 22px; }

  .grupo h3 {
    font-family: var(--display);
    font-size: 18px; font-weight: 400;
    margin-bottom: 10px;
    color: var(--ink-soft);
  }

  .prods {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
    gap: 10px;
  }

  .prod {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 15px 16px;
    min-height: 104px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    text-align: left;
    box-shadow: var(--shadow-1);
    transition: border-color .15s, transform .12s, background .15s;
  }

  .prod:hover { border-color: var(--ink-faint); }
  .prod:active { transform: scale(.97); }
  .prod[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-wash); }

  .prod-n {
    font-family: var(--display);
    font-size: 19px; line-height: 1.15;
    text-wrap: balance;
  }

  .prod-p {
    margin-top: auto;
    font-size: 22px; font-weight: 600; letter-spacing: -.015em;
  }

  .prod-m {
    font-size: 11px; font-weight: 600;
    letter-spacing: .03em;
    color: var(--ink-faint);
  }

  .prod .tick {
    position: absolute; top: 11px; right: 11px;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--accent); color: var(--accent-in);
    display: grid; place-items: center;
    font-size: 13px; font-weight: 700;
    animation: pop .28s cubic-bezier(.3,1.6,.5,1);
  }

  /* Encabezado del paso de opciones. */
  .opc-head {
    display: flex; align-items: center; gap: 13px;
    margin-bottom: 20px;
  }

  .volver {
    width: 46px; height: 46px; flex-shrink: 0;
    border-radius: var(--r-2);
    border: 1px solid var(--line);
    background: var(--surface);
    font-size: 20px; color: var(--ink-soft);
    transition: background .15s;
  }

  .volver:hover { background: var(--surface-2); color: var(--ink); }

  .opc-txt { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; }
  .opc-txt h2 { font-family: var(--display); font-size: 25px; }
  .opc-txt span { font-size: 19px; font-weight: 600; color: var(--ink-soft); }

  #secBases[hidden], #secTops[hidden], #pasoCarta[hidden], #pasoOpciones[hidden] { display: none; }

  .chk {
    display: flex; align-items: center; gap: 6px;
    flex-shrink: 0;
    font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
  }

  .chk input { width: 17px; height: 17px; accent-color: var(--accent); }

  @media (max-width: 940px) {
    .prods { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
    .prod { min-height: 92px; padding: 12px 13px; }
    .prod-n { font-size: 16px; }
    .prod-p { font-size: 19px; }
    .opc-txt h2 { font-size: 20px; }
  }