/* Kherno Food · cassa sull'iPad (cassa-app.js). Scura come la cassa vera: colori e forme del sistema Kherno (shared-ui).
   --r è il «rem» della cassa ridotto al tablet della pagina: tutto si misura in --r. Dati di fantasia. */
.cs-app { --r: calc(3 * var(--u)); --g: #080A0E; --s: #12151B; --s2: #1A1E26; --ln: #242932; --ln2: #1C2128; --ink: #F3F5F8; --ink2: #C3C8D2; --gr: #9AA0AC;
  --blu: #1B3BD9; --blun: #6E8CFF; --wash: #161B33; --ok: #3FBF8F; --okf: #0E7C56; --bad: #F2695E; --badf: #B3261E;
  padding: 0 !important; gap: 0 !important; background: var(--g) !important; color: var(--ink) !important; font-family: var(--font-body, sans-serif); font-size: var(--r); line-height: 1.3; }
.cs-app button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s, background .2s, box-shadow .2s; }
.cs-app button:active { transform: scale(.97); }
.cs-app button:disabled { cursor: default; }
.cs-vista { position: absolute; inset: 0; overflow: hidden; }
.cs-vista > div { position: absolute; inset: 0; display: flex; flex-direction: column; animation: cs-in .3s ease both; }
@keyframes cs-in { from { opacity: 0; transform: translateY(calc(.6 * var(--r))); } }
.cs-ind { color: var(--gr); font-weight: 500; white-space: nowrap; }
.cs-h { font-family: var(--font-display, sans-serif); font-weight: 600; font-size: calc(1.5 * var(--r)); letter-spacing: -.02em; }
.cs-eyb { font-family: var(--font-mono, monospace); font-size: calc(.62 * var(--r)); letter-spacing: .12em; text-transform: uppercase; color: var(--gr); }
.cs-app p { margin: 0; max-width: none; line-height: 1.3; }
.cs-app .cs-vuoto { color: var(--gr); font-size: calc(.75 * var(--r)); margin: calc(.4 * var(--r)) 0; }

/* sala */
.cs-sala { padding: calc(1.5 * var(--r)) calc(1.8 * var(--r)); gap: calc(.9 * var(--r)); }
.cs-testa { display: flex; align-items: center; gap: calc(.5 * var(--r)); }
.cs-locale { margin-left: auto; margin-right: calc(.6 * var(--r)); display: grid; text-align: right; }
.cs-locale b { font-family: var(--font-display, sans-serif); font-weight: 600; font-size: calc(1.3 * var(--r)); letter-spacing: -.02em; }
.cs-locale small { font-family: var(--font-mono, monospace); font-size: calc(.58 * var(--r)); letter-spacing: .12em; text-transform: uppercase; color: var(--gr); }
.cs-gbtn { border: 1px solid var(--ln); border-radius: calc(.75 * var(--r)); padding: calc(.45 * var(--r)) calc(.7 * var(--r)); font-size: calc(.72 * var(--r)); color: var(--ink2); white-space: nowrap; }
.cs-zone { display: flex; gap: calc(.4 * var(--r)); }
.cs-zone button { border-radius: 99px; padding: calc(.35 * var(--r)) calc(.9 * var(--r)); background: var(--s2); color: var(--ink2); font-size: calc(.8 * var(--r)); font-weight: 600; }
.cs-zone button i { font-style: normal; font-family: var(--font-mono, monospace); opacity: .7; margin-left: calc(.2 * var(--r)); }
.cs-zone button.on { background: var(--blu); color: #fff; }
.cs-zt { display: flex; align-items: baseline; gap: calc(.6 * var(--r)); }
.cs-zt b { font-family: var(--font-display, sans-serif); font-weight: 600; font-size: calc(1.3 * var(--r)); letter-spacing: -.02em; }
.cs-zt small { font-family: var(--font-mono, monospace); font-size: calc(.7 * var(--r)); color: var(--gr); }
.cs-tavoli { display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(.6 * var(--r)); }
.cs-tav { aspect-ratio: 1.12; border-radius: calc(1 * var(--r)); padding: calc(.6 * var(--r)) calc(.7 * var(--r)); background: var(--s) !important; border: 1px solid var(--ln) !important;
  display: grid; grid-template-rows: auto 1fr auto; text-align: left; }
.cs-tav .r1 { display: flex; justify-content: space-between; align-items: baseline; }
.cs-tav .r1 b { font-family: var(--font-display, sans-serif); font-weight: 700; font-size: calc(1.5 * var(--r)); letter-spacing: -.035em; }
.cs-tav .r1 em { font-style: normal; font-family: var(--font-mono, monospace); font-weight: 700; font-size: calc(.68 * var(--r)); color: var(--ink2); }
.cs-tav .st { align-self: center; font-family: var(--font-mono, monospace); font-size: calc(.56 * var(--r)); letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.cs-tav .r3 { display: flex; justify-content: space-between; align-items: baseline; gap: calc(.3 * var(--r)); }
.cs-tav .r3 small { font-size: calc(.66 * var(--r)); color: var(--gr); }
.cs-tav .r3 strong { font-family: var(--font-display, sans-serif); font-weight: 700; font-size: calc(.95 * var(--r)); color: var(--blun); letter-spacing: -.02em; }
.cs-tav.aperto { background: var(--wash) !important; border-color: rgba(110, 140, 255, .5) !important; }
.cs-tav.aperto .st::before { content: ""; display: inline-block; width: calc(.4 * var(--r)); height: calc(.4 * var(--r)); border-radius: 50%; background: var(--blun); margin-right: calc(.3 * var(--r)); animation: cs-pulsa 1.6s ease-in-out infinite; }
@keyframes cs-pulsa { 50% { opacity: .3; } }
.cs-tav.pronto { background: rgba(14, 124, 86, .2) !important; border-color: rgba(63, 191, 143, .5) !important; }
.cs-tav.pronto .st { color: var(--ok); }
.cs-tav.conto { background: rgba(179, 38, 30, .18) !important; border-color: rgba(242, 105, 94, .5) !important; }
.cs-tav.conto .st { color: var(--bad); }
.cs-tav.libero .r1 b { color: var(--ink2); }
.cs-tav.nuovo { animation: cs-nuovo 1s ease-in-out 3; }
@keyframes cs-nuovo { 50% { box-shadow: 0 0 0 calc(.25 * var(--r)) rgba(110, 140, 255, .8), 0 0 calc(1.6 * var(--r)) rgba(110, 140, 255, .6); } }

/* tavolo: categorie, prodotti, comanda */
.cs-otesta { display: flex; align-items: center; gap: calc(.5 * var(--r)); padding: calc(.9 * var(--r)) calc(1.3 * var(--r)); background: var(--s); border-bottom: 1px solid var(--ln); }
.cs-otit { display: grid; justify-items: center; flex: 1; }
.cs-otit b { font-family: var(--font-display, sans-serif); font-weight: 600; font-size: calc(1.3 * var(--r)); letter-spacing: -.02em; }
.cs-otit small { font-family: var(--font-mono, monospace); font-size: calc(.58 * var(--r)); color: var(--gr); background: var(--s2); border-radius: 99px; padding: 0 calc(.5 * var(--r)); }
.cs-sbtn { border: 1px solid var(--ln); border-radius: calc(.6 * var(--r)); padding: calc(.3 * var(--r)) calc(.55 * var(--r)); font-size: calc(.66 * var(--r)); color: var(--ink2); white-space: nowrap; }
.cs-corpo { flex: 1; min-height: 0; display: flex; }
.cs-rail { width: calc(6.2 * var(--r)); padding: calc(.7 * var(--r)) calc(.45 * var(--r)); display: grid; align-content: start; gap: calc(.45 * var(--r)); background: var(--g); border-right: 1px solid var(--ln2); }
.cs-rail button { display: grid; justify-items: center; gap: calc(.15 * var(--r)); padding: calc(.55 * var(--r)) 0; border-radius: calc(.75 * var(--r)); background: var(--s2); font-size: calc(.66 * var(--r)); font-weight: 600; color: var(--ink2); }
.cs-rail button span { font-size: calc(1.2 * var(--r)); }
.cs-rail button.on { background: var(--blu); color: #fff; box-shadow: 0 0 calc(1 * var(--r)) rgba(27, 59, 217, .55); }
.cs-prod { flex: 1; min-width: 0; padding: calc(1 * var(--r)); background: var(--s); display: grid; align-content: start; gap: calc(.7 * var(--r)); }
.cs-cerca { border: 1px solid var(--ln); border-radius: calc(.6 * var(--r)); padding: calc(.45 * var(--r)) calc(.7 * var(--r)); color: var(--gr); font-size: calc(.75 * var(--r)); background: var(--g); }
.cs-griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(.5 * var(--r)); }
.cs-griglia button { text-align: left; background: var(--s2); border: 1px solid var(--ln); border-radius: calc(.9 * var(--r)); padding: calc(.7 * var(--r)); display: grid; gap: calc(.5 * var(--r)); min-height: calc(4.6 * var(--r)); align-content: space-between; }
.cs-griglia b { font-weight: 500; font-size: calc(.85 * var(--r)); }
.cs-griglia span { font-family: var(--font-mono, monospace); font-weight: 600; font-size: calc(.9 * var(--r)); color: var(--blun); }
.cs-ticket { width: 30%; display: flex; flex-direction: column; background: var(--s2); border-left: 1px solid var(--ln); padding: calc(.8 * var(--r)) calc(.8 * var(--r)) 0; min-height: 0; }
.cs-tsez { display: flex; justify-content: space-between; align-items: center; margin: calc(.3 * var(--r)) 0; }
.cs-tsez span { font-family: var(--font-mono, monospace); font-size: calc(.6 * var(--r)); letter-spacing: .12em; text-transform: uppercase; color: var(--gr); }
.cs-tsez i { font-style: normal; font-family: var(--font-mono, monospace); font-size: calc(.6 * var(--r)); background: var(--s); border-radius: 99px; padding: calc(.1 * var(--r)) calc(.5 * var(--r)); color: var(--ink2); }
.cs-righe { display: grid; gap: calc(.25 * var(--r)); max-height: 34%; overflow: hidden; }
.cs-righe.bozza { flex: 1; max-height: none; align-content: start; }
.cs-riga { display: flex; align-items: center; gap: calc(.4 * var(--r)); font-size: calc(.72 * var(--r)); }
.cs-riga b { font-family: var(--font-mono, monospace); color: var(--blun); }
.cs-riga span { flex: 1; min-width: 0; display: grid; }
.cs-riga small { font-family: var(--font-mono, monospace); font-size: calc(.52 * var(--r)); color: var(--gr); }
.cs-riga em { font-style: normal; font-family: var(--font-mono, monospace); color: var(--ink2); white-space: nowrap; }
.cs-riga button { width: calc(1.3 * var(--r)); height: calc(1.3 * var(--r)); border-radius: calc(.4 * var(--r)); background: var(--s) !important; border: 1px solid var(--ln) !important; display: grid; place-items: center; }
.cs-piede { margin: 0 calc(-.8 * var(--r)); padding: calc(.8 * var(--r)); background: var(--s); border-top: 1px solid var(--ln); display: grid; gap: calc(.6 * var(--r)); }
.cs-tot { display: flex; justify-content: space-between; align-items: baseline; }
.cs-tot small { font-family: var(--font-mono, monospace); font-size: calc(.56 * var(--r)); letter-spacing: .12em; text-transform: uppercase; color: var(--gr); }
.cs-tot b { font-family: var(--font-display, sans-serif); font-weight: 700; font-size: calc(1.6 * var(--r)); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.cs-primo { width: 100%; background: var(--blu) !important; color: #fff !important; border-radius: calc(.8 * var(--r)) !important; padding: calc(.75 * var(--r)) !important; font-weight: 600 !important;
  font-size: calc(.8 * var(--r)) !important; box-shadow: 0 calc(.45 * var(--r)) calc(1.1 * var(--r)) rgba(27, 59, 217, .3); }
.cs-primo:disabled { background: var(--s2) !important; color: var(--gr) !important; box-shadow: none; border: 1px solid var(--ln) !important; }

/* pagamento */
.cs-pcorpo { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; }
.cs-pre { padding: calc(1 * var(--r)) calc(1.3 * var(--r)); display: grid; align-content: start; gap: calc(.4 * var(--r)); border-right: 1px solid var(--ln); }
.cs-pre .cs-h { font-size: calc(1.1 * var(--r)); }
.cs-pre > small { color: var(--gr); font-size: calc(.7 * var(--r)); }
.cs-pre .cs-righe { max-height: none; margin-top: calc(.4 * var(--r)); gap: calc(.4 * var(--r)); }
.cs-metodi { padding: calc(1 * var(--r)) calc(1.3 * var(--r)); display: grid; align-content: start; gap: calc(.65 * var(--r)); background: var(--s); }
.cs-seg { display: flex; background: var(--s2); border-radius: calc(.7 * var(--r)); padding: calc(.2 * var(--r)); }
.cs-seg span { flex: 1; text-align: center; padding: calc(.35 * var(--r)); border-radius: calc(.55 * var(--r)); font-size: calc(.7 * var(--r)); color: var(--gr); font-weight: 600; }
.cs-seg span.on { background: var(--blu); color: #fff; }
.cs-modi { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(.35 * var(--r)); }
.cs-modi span { border: 1px solid var(--ln); border-radius: calc(.6 * var(--r)); padding: calc(.4 * var(--r)) calc(.2 * var(--r)); text-align: center; font-size: calc(.6 * var(--r)); color: var(--ink2); background: var(--s2); }
.cs-mtile { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(.4 * var(--r)); }
.cs-mtile button, .cs-mtile .altri { display: grid; justify-items: center; gap: calc(.2 * var(--r)); padding: calc(.6 * var(--r)) 0; border-radius: calc(.75 * var(--r)); background: var(--s2); border: 1px solid var(--ln) !important; font-size: calc(.68 * var(--r)); font-weight: 600; }
.cs-mtile button span { font-size: calc(1.1 * var(--r)); }
.cs-mtile button.on { border-color: var(--blun) !important; box-shadow: 0 0 0 calc(.12 * var(--r)) var(--blun); background: var(--wash); }
.cs-mtile .altri { border-style: dashed !important; color: var(--gr); align-content: center; font-weight: 500; text-align: center; }
.cs-linea { display: flex; align-items: center; gap: calc(.5 * var(--r)); background: var(--s2); border: 1px solid var(--ln); border-radius: calc(.6 * var(--r)); padding: calc(.45 * var(--r)) calc(.7 * var(--r)); font-size: calc(.75 * var(--r)); }
.cs-linea i { font-style: normal; font-family: var(--font-mono, monospace); color: var(--gr); }
.cs-linea em { margin-left: auto; font-style: normal; font-family: var(--font-mono, monospace); }
.cs-ptot { display: grid; gap: calc(.25 * var(--r)); font-size: calc(.72 * var(--r)); color: var(--ink2); }
.cs-ptot span { display: flex; justify-content: space-between; align-items: baseline; }
.cs-ptot b { font-family: var(--font-mono, monospace); }
.cs-ptot .ok, .cs-ptot .manca { font-family: var(--font-display, sans-serif); font-weight: 700; font-size: calc(1.1 * var(--r)); color: var(--ink); }
.cs-ptot .ok b { color: var(--ok); } .cs-ptot .manca b { color: var(--bad); }
.cs-ppiede { padding: calc(.8 * var(--r)) calc(1.3 * var(--r)); background: var(--s); border-top: 1px solid var(--ln); }

/* scontrino emesso */
.cs-ok { align-items: center; justify-content: center; gap: calc(.5 * var(--r)); text-align: center; }
.cs-spunta { width: calc(4 * var(--r)); height: calc(4 * var(--r)); border-radius: 50%; background: var(--wash); color: var(--blun); display: grid; place-items: center; font-size: calc(2 * var(--r)); margin-bottom: calc(.4 * var(--r)); animation: cs-pop .5s cubic-bezier(.2, .9, .3, 1.4) both; }
@keyframes cs-pop { from { transform: scale(.4); opacity: 0; } }
.cs-ok > b { font-family: var(--font-display, sans-serif); font-weight: 700; font-size: calc(2 * var(--r)); letter-spacing: -.035em; }
.cs-ok > span { color: var(--ink2); }
.cs-ok > small { font-family: var(--font-mono, monospace); font-size: calc(.62 * var(--r)); color: var(--gr); }
.cs-ok .cs-primo { width: auto; padding-inline: calc(2 * var(--r)) !important; margin-top: calc(.8 * var(--r)); }

/* foglio, avviso, RT */
.cs-velo { position: absolute; inset: 0; z-index: 4; background: rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transition: opacity .25s; }
.cs-velo.on { opacity: 1; pointer-events: auto; }
.cs-foglio { position: absolute; left: 50%; bottom: 0; z-index: 5; width: 46%; transform: translate(-50%, 105%); transition: transform .35s cubic-bezier(.2, .8, .2, 1);
  background: var(--s); border: 1px solid var(--ln); border-bottom: 0; border-radius: calc(1.4 * var(--r)) calc(1.4 * var(--r)) 0 0; padding: calc(1.2 * var(--r)) calc(1.4 * var(--r)) calc(1.6 * var(--r)); display: grid; gap: calc(.6 * var(--r)); }
.cs-foglio.on { transform: translate(-50%, 0); }
.cs-cop { display: flex; justify-content: center; align-items: center; gap: calc(1.4 * var(--r)); margin: calc(.4 * var(--r)) 0; }
.cs-cop button { width: calc(2.6 * var(--r)); height: calc(2.6 * var(--r)); border-radius: calc(.8 * var(--r)); background: var(--s2) !important; border: 1px solid var(--ln) !important; font-size: calc(1.2 * var(--r)); }
.cs-cop b { font-family: var(--font-display, sans-serif); font-size: calc(2.2 * var(--r)); min-width: 2ch; text-align: center; }
.cs-toast { position: absolute; right: calc(1 * var(--r)); bottom: calc(2.4 * var(--r)); z-index: 6; width: 40%; background: #12151B; border: 1px solid rgba(63, 191, 143, .6); border-radius: calc(.75 * var(--r));
  padding: calc(.6 * var(--r)) calc(.8 * var(--r)); display: grid; gap: calc(.1 * var(--r)); box-shadow: 0 calc(.6 * var(--r)) calc(1.6 * var(--r)) rgba(0, 0, 0, .5);
  opacity: 0; transform: translateY(calc(.8 * var(--r))); transition: opacity .3s, transform .35s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.cs-toast.on { opacity: 1; transform: none; }
.cs-toast b { font-size: calc(.8 * var(--r)); }
.cs-toast b::before { content: "✓ "; color: var(--ok); }
.cs-toast span { font-size: calc(.68 * var(--r)); color: var(--ink2); }
.cs-rt { position: absolute; right: calc(1 * var(--r)); bottom: calc(.7 * var(--r)); z-index: 3; display: inline-flex; align-items: center; gap: calc(.3 * var(--r)); font-family: var(--font-mono, monospace); font-size: calc(.56 * var(--r)); font-weight: 700; color: var(--ok); }
.cs-app:not(.in-sala) .cs-rt { display: none; }  /* come nella cassa vera: l'indicatore RT si nasconde nelle pagine di lavoro */
.cs-rt i { width: calc(.4 * var(--r)); height: calc(.4 * var(--r)); border-radius: 50%; background: var(--ok); }
.cs-app > .vetro { position: absolute; inset: 0; z-index: 7; pointer-events: none; border-radius: inherit; background: linear-gradient(118deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 30%); }

/* telefono: il tablet della pagina sta in verticale, la cassa si impila */
@media (max-width: 600px) {
  .cs-app { --r: calc(3.1 * var(--u)); }
  .cs-testa .cs-gbtn:nth-of-type(n+2), .cs-otesta .cs-sbtn:not(:nth-of-type(2)) { display: none; }
  .cs-tavoli { grid-template-columns: repeat(3, 1fr); }
  .cs-corpo { flex-direction: column; }
  .cs-rail { width: auto; display: flex; padding: calc(.5 * var(--r)); border-right: 0; border-bottom: 1px solid var(--ln2); }
  .cs-rail button { flex: 1; }
  .cs-prod { flex: none; }
  .cs-griglia { grid-template-columns: repeat(2, 1fr); }
  .cs-griglia button { min-height: calc(3.6 * var(--r)); }
  .cs-ticket { width: auto; flex: 1; border-left: 0; border-top: 1px solid var(--ln); }
  .cs-righe { max-height: 26%; }
  .cs-pcorpo { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .cs-pre { border-right: 0; border-bottom: 1px solid var(--ln); }
  .cs-pre .cs-righe { max-height: calc(6 * var(--r)); }
  .cs-foglio { width: 100%; }
  .cs-toast { width: auto; left: calc(1 * var(--r)); bottom: auto; top: calc(1 * var(--r)); }
}

/* dock in basso, come su iPad: Cassa, Cucina, Prenotazioni (si nasconde mentre si lavora su un tavolo) */
.cs-dock { position: absolute; left: 50%; bottom: calc(.6 * var(--r)); z-index: 3; transform: translateX(-50%); display: flex; gap: calc(.3 * var(--r)); padding: calc(.3 * var(--r));
  border-radius: calc(1.2 * var(--r)); background: rgba(26, 30, 38, .82); border: 1px solid var(--ln); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: opacity .25s, transform .3s; }
.cs-dock button { display: grid; justify-items: center; gap: calc(.1 * var(--r)); padding: calc(.3 * var(--r)) calc(.75 * var(--r)); border-radius: calc(.85 * var(--r)); font-size: calc(.56 * var(--r)); font-weight: 600; color: var(--ink2); }
.cs-dock button span { font-size: calc(1.05 * var(--r)); }
.cs-dock button.on { background: var(--blu); color: #fff; }
.cs-app.in-lavoro .cs-dock { opacity: 0; pointer-events: none; transform: translate(-50%, 140%); }
.cs-app.in-sala .cs-rt { bottom: calc(.7 * var(--r)); }

/* monitor di cucina (apps/kds) */
.cs-kds { padding: 0; }
.cs-ktesta { display: flex; align-items: center; gap: calc(.6 * var(--r)); padding: calc(1 * var(--r)) calc(1.6 * var(--r)); border-bottom: 1px solid var(--s); }
.cs-kind { width: calc(2.1 * var(--r)); height: calc(2.1 * var(--r)); border-radius: calc(.6 * var(--r)); background: var(--s) !important; border: 1px solid var(--s2) !important; }
.cs-kst { font-size: calc(1.4 * var(--r)); }
.cs-ktit { display: grid; } .cs-ktit b { font-family: var(--font-display, sans-serif); font-weight: 600; font-size: calc(1.4 * var(--r)); color: #E0A33A; }
.cs-ktit small { font-family: var(--font-mono, monospace); font-size: calc(.6 * var(--r)); color: #3C414B; }
.cs-coda { margin-left: auto; display: grid; justify-items: end; } .cs-coda b { font-family: var(--font-display, sans-serif); font-size: calc(1.8 * var(--r)); line-height: 1; }
.cs-coda small { font-family: var(--font-mono, monospace); font-size: calc(.55 * var(--r)); letter-spacing: .12em; text-transform: uppercase; color: var(--gr); }
.cs-kcol { padding: calc(1 * var(--r)) calc(1.6 * var(--r)) calc(4 * var(--r)); columns: 3; column-gap: calc(.8 * var(--r)); overflow: hidden; }
.cs-ticket-k { break-inside: avoid; margin-bottom: calc(.8 * var(--r)); border-radius: calc(1 * var(--r)); border: 1px solid var(--s2); background: var(--s); padding: calc(.9 * var(--r)); display: grid; gap: calc(.4 * var(--r)); }
.cs-ticket-k .r1 { display: flex; justify-content: space-between; align-items: baseline; }
.cs-ticket-k .r1 b { font-family: var(--font-display, sans-serif); font-weight: 600; font-size: calc(1.25 * var(--r)); }
.cs-ticket-k .r1 span { font-family: var(--font-mono, monospace); font-size: calc(.7 * var(--r)); color: #6E737D; }
.cs-ticket-k .kr { display: flex; gap: calc(.4 * var(--r)); align-items: baseline; font-size: calc(.85 * var(--r)); }
.cs-ticket-k .kr i { font-style: normal; font-family: var(--font-mono, monospace); color: var(--blun); }
.cs-ticket-k .kr span { flex: 1; font-family: var(--font-display, sans-serif); }
.cs-ticket-k .kr em { font-style: normal; font-family: var(--font-mono, monospace); font-size: calc(.65 * var(--r)); color: #E0A33A; }
.cs-ticket-k .kb { display: grid; grid-template-columns: 1fr 1fr; gap: calc(.4 * var(--r)); margin-top: calc(.3 * var(--r)); }
.cs-ticket-k .kb button { padding: calc(.55 * var(--r)) 0; border-radius: calc(.6 * var(--r)); background: var(--s2); font-size: calc(.7 * var(--r)); font-weight: 600; }
.cs-ticket-k .kb button.ok { background: var(--blu); color: #fff; }
.cs-ticket-k.att { background: rgba(27, 59, 217, .05); border-color: rgba(27, 59, 217, .3); } .cs-ticket-k.att .r1 span { color: var(--blun); }
.cs-ticket-k.tardi { background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .4); animation: cs-soft 2s ease-in-out infinite; } .cs-ticket-k.tardi .r1 span { color: #F87171; }
.cs-ticket-k.prep { background: rgba(169, 107, 0, .15); border-color: rgba(169, 107, 0, .5); } .cs-ticket-k.prep .r1 span { color: #E0A33A; }
.cs-ticket-k.nuovo { animation: cs-nuovo 1s ease-in-out 3; }
@keyframes cs-soft { 50% { opacity: .6; } }
.cs-kvuoto { display: grid; place-content: center; text-align: center; gap: calc(.3 * var(--r)); flex: 1; color: var(--gr); } .cs-kvuoto b { font-size: calc(1.2 * var(--r)); color: var(--ink2); }

/* prenotazioni (ReservationsCassaPage) */
.cs-nuova { background: var(--blu); color: #fff; border-radius: calc(.6 * var(--r)); padding: calc(.3 * var(--r)) calc(.7 * var(--r)); font-size: calc(.7 * var(--r)); font-weight: 600; }
.cs-otit b { white-space: nowrap; }
.cs-ptool { display: flex; align-items: center; gap: calc(.35 * var(--r)); padding: calc(.8 * var(--r)) calc(1.3 * var(--r)); flex-wrap: wrap; }
.cs-seg2 { display: flex; background: var(--s); border-radius: calc(.6 * var(--r)); padding: calc(.2 * var(--r)); margin-right: calc(.4 * var(--r)); }
.cs-seg2 span { padding: calc(.25 * var(--r)) calc(.6 * var(--r)); border-radius: calc(.45 * var(--r)); font-size: calc(.66 * var(--r)); color: var(--gr); } .cs-seg2 .on { background: var(--s2); color: var(--ink); }
.cs-ptool > button { padding: calc(.3 * var(--r)) calc(.6 * var(--r)); border-radius: 99px; font-size: calc(.66 * var(--r)); color: var(--gr); }
.cs-ptool > button.on { background: var(--s2); color: var(--ink); }
.cs-ptool > button i { font-style: normal; background: var(--blu); color: #fff; border-radius: 99px; padding: 0 calc(.35 * var(--r)); font-size: calc(.56 * var(--r)); }
.cs-pcerca { border: 1px solid var(--ln); border-radius: calc(.5 * var(--r)); padding: calc(.25 * var(--r)) calc(.6 * var(--r)); font-size: calc(.62 * var(--r)); color: var(--gr); margin-left: auto; }
.cs-pn { font-size: calc(.62 * var(--r)); color: var(--gr); }
.cs-pgriglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(.6 * var(--r)); padding: 0 calc(1.3 * var(--r)) calc(4 * var(--r)); align-content: start; overflow: hidden; }
.cs-pcard { text-align: left; display: grid; gap: calc(.3 * var(--r)); padding: calc(.8 * var(--r)) !important; border-radius: calc(.8 * var(--r)) !important; background: var(--s) !important; border: 1px solid var(--s2) !important; font-size: calc(.72 * var(--r)); }
.cs-pcard:hover { border-color: rgba(27, 59, 217, .6) !important; }
.cs-pcard .r1 { display: flex; align-items: center; gap: calc(.4 * var(--r)); } .cs-pcard .r1 b { font-family: var(--font-mono, monospace); font-size: calc(1.05 * var(--r)); color: var(--blun); }
.cs-pcard .r1 small { color: var(--gr); font-size: calc(.6 * var(--r)); } .cs-pcard .r1 .cs-pp { margin-left: auto; }
.cs-pcard .meta { color: var(--ink2); } .cs-pcard .meta em { font-style: normal; color: #6FC6A1; margin-left: calc(.5 * var(--r)); }
.cs-pcard .nota { font-style: italic; color: var(--gr); font-size: calc(.64 * var(--r)); }
.cs-pcard .fonte { font-family: var(--font-mono, monospace); font-size: calc(.52 * var(--r)); letter-spacing: .06em; color: var(--gr); }
.cs-pp { font-family: var(--font-mono, monospace); font-size: calc(.5 * var(--r)); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border-radius: 99px; padding: calc(.12 * var(--r)) calc(.45 * var(--r)); border: 1px solid; white-space: nowrap; }
.cs-pp.pending { background: rgba(27, 59, 217, .15); border-color: rgba(27, 59, 217, .4); color: var(--blun); }
.cs-pp.confermata { background: rgba(59, 130, 246, .15); border-color: rgba(59, 130, 246, .4); color: #93C5FD; }
.cs-pp.waitlist { background: rgba(27, 59, 217, .25); border-color: rgba(27, 59, 217, .6); color: #EEF1FF; }
.cs-pp.seduti { background: rgba(14, 124, 86, .15); border-color: rgba(14, 124, 86, .4); color: #6FC6A1; }
.cs-ftile { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(.4 * var(--r)); }
.cs-ftile span { display: grid; gap: calc(.15 * var(--r)); background: var(--s2); border-radius: calc(.6 * var(--r)); padding: calc(.5 * var(--r)); font-weight: 600; justify-items: start; }
.cs-ftile small { font-family: var(--font-mono, monospace); font-size: calc(.5 * var(--r)); letter-spacing: .1em; text-transform: uppercase; color: var(--gr); font-weight: 400; }
.cs-app .cs-fnota { color: var(--ink2); font-style: italic; font-size: calc(.72 * var(--r)); }
.cs-fbt { display: flex; gap: calc(.5 * var(--r)); align-items: center; }
.cs-rif { border: 1px solid rgba(242, 105, 94, .5); color: var(--bad); border-radius: calc(.6 * var(--r)); padding: calc(.55 * var(--r)) calc(.8 * var(--r)); font-size: calc(.72 * var(--r)); font-weight: 600; }
.cs-fbt .cs-conf, .cs-fbt .cs-primo { flex: 1; }
.cs-conf { background: var(--okf) !important; color: #fff !important; border-radius: calc(.8 * var(--r)) !important; padding: calc(.75 * var(--r)) !important; font-weight: 600 !important; font-size: calc(.8 * var(--r)) !important; }
@media (max-width: 600px) {
  .cs-kcol { columns: 2; } .cs-pgriglia { grid-template-columns: 1fr 1fr; }
  .cs-ptool > button:nth-of-type(n+4), .cs-pcerca { display: none; }
}