/* ============================================================================
   Nightsheet — foglio di lavoro della notte. Interfaccia densa, piatta, leggibile
   al buio e a due del mattino: una barra sola, tab a striscia, contenitori senza
   ornamenti, numeri in monospazio tabellare come su un foglio cassa.
   I COLORI stanno solo nelle variabili: i temi (ns_temi) le sovrascrivono.
   ============================================================================ */
/* Il carattere delle Club Facts: sta con noi, non su Google, cosi' la frase si vede
   anche quando il tablet e' senza linea. */
@font-face{font-family:"Monstral";src:url("../fonts/DxMonstral-Smooth.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
:root{
  /* tema classico "Notte in Maremma": carbone caldo + ottone. Vedi app.css.pre-restyle. */
  --bg:#131210;--panel:#1b1813;--panel2:#232019;--line:#37322a;
  --txt:#f4efe6;--muted:#a89e8c;--accent:#cda349;--accent2:#a6552e;--on-accent:#1a1508;
  --ok:#3fa06a;--bad:#e5484d;--warn:#e0a13a;
  /* derivati dell'accento (i temi li sovrascrivono tutti insieme) */
  --accent-hover:#dcb25e;--login-glow:#2c1e10;--header-a:#1b1813;--header-b:#241a12;--accent-glow:rgba(205,163,73,.18);
  /* TIPOGRAFIA (rifatta 17/9/2026). Tre voci con mestieri diversi:
     - display Syne: marchio e titoli. Ha molta personalita', quindi sta SOLO li'.
     - ui Manrope: tutto il resto. Piu' aperta di Plex, si legge meglio a 13-14px.
     - mono JetBrains: i NUMERI (soldi, orari, codici), con le cifre incolonnate.
     Il peso del corpo non scende sotto 400: sul fondo scuro il chiaro si allarga
     otticamente e i tratti sottili sbavano — al banco, di notte, si paga. */
  --ui:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:"Syne","Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--scritta:"Monstral","Bradley Hand",ui-rounded,cursive;
  /* misure */
  --r:10px;--r-s:7px;--hdr:44px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--ui);background:var(--bg);color:var(--txt);font-size:14px;line-height:1.4;font-feature-settings:"tnum" 1}
.hidden{display:none!important}
h1,h2,h3{margin:0 0 6px;font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.14}
h1{font-size:22px}h2{font-size:18px}h3{font-size:15px}
.muted{color:var(--muted)}
.err{color:var(--bad);font-size:13px;margin-top:6px}
.hint{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.45}
.hint code{font-family:var(--mono);font-size:12px;background:var(--panel2);padding:0 4px;border-radius:4px}

/* Controlli: stessa altezza (32px), stesso raggio, bordo che si accende al focus */
input,select,button,textarea{font:inherit;color:var(--txt)}
input,select,textarea{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-s);padding:6px 9px;min-height:32px;transition:border-color .12s}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none}
input[type=number]{text-align:right;font-family:var(--mono);font-size:13.5px}
input[type=checkbox],input[type=radio]{min-height:0;accent-color:var(--accent)}
input[type=file]{background:transparent;border:1px dashed var(--line);padding:6px}
button{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-s);padding:6px 11px;min-height:32px;cursor:pointer;font-weight:500;font-size:13.5px;line-height:1.2;transition:border-color .12s,background .12s,color .12s}
button:hover{border-color:var(--accent)}
button:disabled{opacity:.5;cursor:default}
button.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700}
button.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
button.ghost{background:transparent;border-color:transparent;color:var(--muted)}
button.ghost:hover{color:var(--txt);border-color:var(--line);background:var(--panel2)}
button.danger{border-color:transparent;color:var(--bad);background:transparent}
button.danger:hover{border-color:var(--bad);background:transparent}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* Login: la sola cosa al centro, con il logo del locale */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;background:radial-gradient(1100px 560px at 50% -12%,var(--login-glow),var(--bg))}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px 24px;width:340px;display:flex;flex-direction:column;gap:10px}
.login-card input{width:100%;min-height:38px}
.login-card button.primary{min-height:38px;margin-top:4px}
.login-card .brand{font-size:24px;font-weight:700;font-family:var(--display)}
.login-logo{display:block;width:220px;max-width:80%;margin:0 auto 6px}
.login-card .sub{color:var(--muted);margin-bottom:6px;text-align:center;font-size:12px;text-transform:uppercase;letter-spacing:.18em}
.header-logo{height:22px;width:auto;display:block;flex:0 0 auto}
.brand b{color:var(--accent)}
.uhead{margin-bottom:0;padding-bottom:2px;border-bottom:1px solid var(--line)}
.uhead .uh{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.11em}
td.ucalc{font-weight:600;text-align:center;font-family:var(--mono);color:var(--accent)}

/* Shell: UNA barra di 44px con tutto in riga; sotto, la striscia delle tab */
header{position:sticky;top:0;z-index:20;min-height:var(--hdr);background:linear-gradient(90deg,var(--header-a),var(--header-b));border-bottom:1px solid var(--line);box-shadow:0 1px 0 var(--accent-glow);padding:5px 14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
header .brand{font-weight:600;font-family:var(--display);letter-spacing:.06em;font-size:12px;text-transform:uppercase;color:var(--muted)}
header button{padding:5px 9px;min-height:30px;font-size:13px}
header button.ghost{color:var(--muted)}
header .field{flex-direction:row;align-items:center;gap:6px}
header .field label{margin:0}
header select{min-width:220px;min-height:30px;padding:4px 8px;font-weight:600}
#whoami{font-size:12px}
.grow{flex:1}
.field{display:flex;flex-direction:column;gap:3px}
.field label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.11em;font-weight:500}
.tabs{display:flex;gap:2px;padding:0 14px;flex-wrap:wrap;background:var(--bg);position:sticky;top:var(--hdr);z-index:10;border-bottom:1px solid var(--line)}
.tabs button{background:transparent;border:none;border-radius:0;min-height:0;padding:9px 10px;color:var(--muted);font-weight:600;font-size:13px;opacity:1;box-shadow:inset 0 -2px 0 transparent;transition:color .12s,box-shadow .12s}
.tabs button:hover{color:var(--txt)}
.tabs button.active{color:var(--txt);background:transparent;font-weight:700;box-shadow:inset 0 -2px 0 var(--accent)}
/* Menu a tendina dei gruppi di tab */
.tabgroup{position:relative;display:inline-block}
.tabmenu{position:absolute;top:100%;left:0;min-width:220px;background:var(--panel);border:1px solid var(--line);border-radius:0 0 var(--r) var(--r);box-shadow:0 14px 34px rgba(0,0,0,.5);display:flex;flex-direction:column;padding:4px;z-index:30}
.tabmenu button{border-radius:6px;width:100%;text-align:left;margin:0;padding:7px 10px;box-shadow:none;font-weight:500}
.tabmenu button:hover{background:var(--panel2)}
.tabmenu-sub{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#9a9080);padding:8px 10px 2px;border-top:1px solid var(--line);margin-top:4px}
.tabmenu button.sub{padding-left:22px}
.tabmenu button.active{background:var(--panel2);color:var(--txt);font-weight:700;box-shadow:inset 3px 0 0 var(--accent)}
main{padding:14px 20px 40px;max-width:1280px;margin:0 auto}
/* La tab PR ha tabelle larghe: su schermi grandi usa quasi tutta la larghezza + celle compatte */
body[data-tab="pr"] main{max-width:min(1600px,97vw)}
body[data-tab="pr"] .grid-table td,body[data-tab="pr"] .grid-table th{padding:5px 6px}

/* Contenitori: piatti, un bordo sottile, poco spazio perso */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:12px}
.panel.tcard{padding:8px 12px;margin-bottom:6px}  /* card tavoli: lista fitta */
.panel>h2:first-child,.panel>h3:first-child{margin-bottom:8px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.pill{padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);cursor:pointer;font-weight:600;font-size:13px;line-height:1.3}
.pill.active{background:var(--accent);border-color:transparent;color:var(--on-accent)}
.pill .badge{font-size:11px;margin-left:6px;padding:1px 6px;border-radius:999px;background:rgba(0,0,0,.3);font-family:var(--mono)}

/* Tabelle: il foglio cassa. Righe sottili, intestazioni piccole, numeri monospazio */
table{width:100%;border-collapse:collapse}
th{font-weight:600}
table.denom td,table.denom th{padding:3px 6px;border-bottom:1px solid var(--line);text-align:right}
table.denom th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.11em}
table.denom td{font-family:var(--mono);font-size:13.5px}
table.denom td:first-child{text-align:left;color:var(--muted);font-family:var(--ui)}
table.denom input{width:76px;padding:4px 7px;min-height:28px}
table.denom tfoot td{font-weight:700;border-top:2px solid var(--line);border-bottom:none;padding-top:7px}
.denoms{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:680px){.denoms{grid-template-columns:1fr}}

/* --- Header a scomparsa sul TELEFONO: chiuso mostra solo la serata --- */
#hdrBar{display:none}
@media(max-width:760px){
  body{font-size:15px}
  /* Sul telefono ogni pixel orizzontale conta: contenuto quasi a filo bordo. */
  main{padding:8px 6px 32px}
  .tabs{padding:0 4px;gap:0}
  .tabs button{padding:9px 8px}
  header{padding:6px 10px}
  header .field{flex-direction:column;align-items:stretch;gap:3px}
  #hdrBar{display:flex;width:100%;align-items:center;gap:10px;cursor:pointer;
          padding:2px 0;-webkit-tap-highlight-color:transparent}
  #hdrBar #hdrSerata{font-weight:700;font-size:16px;flex:1;
          white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #hdrBar #hdrChev{color:var(--accent);font-size:18px}
  /* Chiuso: si vede solo la barra compatta. Aperto: tutto (i pulsanti nascosti
     per ruolo restano nascosti dal loro style inline). */
  header:not(.open)>*:not(#hdrBar){display:none!important}
  header.open{padding-bottom:10px;gap:6px}
  header.open .grow{display:none}
  header.open .field{width:100%}
  header.open #serataSel{width:100%;min-width:0}
  header.open button{min-height:34px}
  #btnBell{display:none!important}   /* su telefono la campanella sta nella barra compatta (btnBellM) */
  /* Le tab sotto l'header compatto: riallinea lo sticky. */
  .tabs{top:auto}
  /* Tabelle larghe: scorre il contenitore, non la pagina (la barra e le tab restano ferme) */
  .panel{padding:12px 12px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .recon{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
  .stat{padding:8px 10px}
  .stat .v{font-size:19px}
  .row{gap:8px}
  .row .field{flex:1 1 140px;min-width:0}
  .row .field input,.row .field select{width:100%;min-width:0}
  button,input,select,textarea{min-height:36px}
}

/* Riquadri di sintesi: etichetta piccola, numero grande in monospazio */
.recon{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:10px;margin-top:8px}   /* 7 riquadri in una riga a 1280 */
/* Il numero sta sempre in basso: con etichette di lunghezza diversa i valori
   della stessa riga restano allineati tra loro (la griglia rende i box alti uguali). */
.stat{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-s);padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.stat .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.11em;line-height:1.3}
.stat .k .muted{display:block;text-transform:none;letter-spacing:0;font-size:11px;opacity:.85}
.stat .v{font-size:21px;font-weight:600;font-family:var(--mono);margin-top:auto;letter-spacing:-.02em;line-height:1.15;white-space:nowrap}
.v.ok{color:var(--ok)}.v.bad{color:var(--bad)}.v.warn{color:var(--warn)}

.grid-table th{padding:6px 8px;border-bottom:1px solid var(--line);text-align:right;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.11em}
.grid-table td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:right;font-family:var(--mono);font-size:13px}
.grid-table td:first-child,.grid-table th:first-child{text-align:left}
.grid-table td:first-child{font-family:var(--ui);font-size:13.5px}
.grid-table tbody tr:hover td{background:rgba(255,255,255,.025)}
/* righe evidenziate (fuori soglia): sfondo chiaro + testo scuro, leggibile anche in tema scuro */
.grid-table tr.rowbad td{background:#fde8e8;color:#8a1c1c}
.grid-table tr.rowbad td.bad{color:#c0392b;font-weight:700}
.linelist{display:flex;flex-direction:column;gap:6px}
.lineitem{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.lineitem input,.lineitem select{flex:1;min-width:90px}
.lineitem input.amt{flex:0 0 110px}
.tag{font-size:11px;padding:2px 8px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);color:var(--muted);font-family:var(--mono);letter-spacing:.02em}

.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(40px);background:var(--panel);border:1px solid var(--line);padding:10px 16px;border-radius:var(--r-s);opacity:0;transition:.2s;z-index:1000;box-shadow:0 10px 30px rgba(0,0,0,.55);font-size:13.5px;max-width:min(92vw,520px)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.ok{border-color:var(--ok)}.toast.bad{border-color:var(--bad)}

.frozen-banner{background:#3a1d22;border-bottom:1px solid var(--bad);color:#ffb3b3;padding:6px 16px;text-align:center;font-weight:600;font-size:13px}
/* Serata bloccata = sola lettura, TRANNE per l'admin (che puo' correggere). */
body.frozen:not(.role-admin):not(.role-pr):not(.frozen-scrive) main input,body.frozen:not(.role-admin):not(.role-pr):not(.frozen-scrive) main select,body.frozen:not(.role-admin):not(.role-pr):not(.frozen-scrive) main textarea{pointer-events:none;opacity:.55}
body.frozen:not(.role-admin):not(.role-pr):not(.frozen-scrive) main button:not(.noprint){pointer-events:none;opacity:.4}
/* Ruoli e permessi: sezione in sola lettura (livello «Lettura»), stessa grafica della serata bloccata. */
body.sola-lettura main input,body.sola-lettura main select,body.sola-lettura main textarea{pointer-events:none;opacity:.55}
body.sola-lettura main button:not(.noprint){pointer-events:none;opacity:.4}

#print-area{display:none}

/* Lineup: pallino LIVE lampeggiante come le radio, e barre della vista timeline */
.live-dot{display:inline-block;width:.62em;height:.62em;border-radius:50%;background:#ff3b30;margin-right:.35em;vertical-align:middle;animation:liveblink 1s steps(2,start) infinite;box-shadow:0 0 8px #ff3b30}
@keyframes liveblink{50%{opacity:.12}}
.lu-bar{height:12px;border-radius:6px;background:#3a3a45;overflow:hidden;min-width:20px}
.lu-bar>i{display:block;height:100%;border-radius:6px;background:var(--accent)}
.lu-live{outline:2px solid #ff3b30;outline-offset:2px;border-radius:10px}
/* Voci di lineup gia' passate: ingrigite e depennate, restano in elenco */
/* Orologio Lineup: alone d'ottone che pulsa lento (stile Ibiza) */
.lu-clock{background:linear-gradient(180deg,#f6e7b2,#cda349 52%,#9c6f2c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:clockGlow 2s ease-in-out infinite}
@keyframes clockGlow{0%,100%{text-shadow:0 0 20px rgba(214,176,90,.45),0 0 54px rgba(205,163,73,.22)}50%{text-shadow:0 0 30px rgba(245,227,165,.95),0 0 62px rgba(214,176,90,.72),0 0 115px rgba(205,163,73,.48)}}
.lu-past{opacity:.4}
.lu-past .lu-time{text-decoration:line-through;text-decoration-thickness:2px}
.lu-past .lu-nm{text-decoration:line-through}

@media print{
  header,.tabs,.noprint,.frozen-banner{display:none!important}
  body{background:#fff;color:#000}
  .panel,.stat{background:#fff!important;color:#000!important;border-color:#ccc!important}
  /* Stampa lista agenzia: mostra solo #print-area */
  body.printing>*:not(#print-area){display:none!important}
  /* Margine su due livelli, come per il listino: il @page vale per OGNI
     pagina (indispensabile sui documenti lunghi come il foglio firme, che
     va su piu' fogli), il padding interno e' la rete di sicurezza quando
     nella finestra di stampa i margini sono su "Nessuno" e il @page viene
     scavalcato. Il padding pero' agisce solo a inizio blocco: dalla seconda
     pagina in poi resta il @page a fare il lavoro. */
  @page{size:A4;margin:14mm}
  body.printing #print-area{display:block!important;color:#000;box-sizing:border-box;
    /* Margine DENTRO il contenuto: se la finestra di stampa e' su "Nessun margine"
       scavalca il @page e il contenuto finirebbe a filo carta. 14/15mm = margine
       sicuro anche a bordi azzerati (il listino ha il suo blocco .listino). */
    padding:14mm 15mm;font-family:Arial,Helvetica,sans-serif;font-size:13px}
  #print-area h1{font-size:20px;margin:0 0 2px}
  #print-area h2{font-size:16px;margin:0 0 4px}
  #print-area .sub{color:#333;margin:0 0 16px}
  #print-area table{border-collapse:collapse;width:100%;margin-top:6px}
  #print-area th,#print-area td{border:1px solid #999;padding:6px 8px;text-align:left}
  #print-area th{background:#e6e6e6}
  #print-area td.r,#print-area th.r{text-align:right}
  #print-area td.c,#print-area th.c{text-align:center}
  #print-area h2{margin-top:22px}
  #print-area td.ore,#print-area th.ore{font-weight:bold;background:#eee}
  #print-area tfoot td{font-weight:bold;background:#f2f2f2}
  #print-area .nota{font-size:12px;color:#333;font-style:italic;margin-top:8px}
  #print-area .sez-sicurezza{margin-top:44px;padding-top:16px;border-top:3px solid #000}
  #print-area .hint{font-size:11px;color:#555;margin:0 0 6px}
  #print-area .firma{margin-top:56px;display:flex;justify-content:space-between;gap:40px}
  #print-area .firma div{border-top:1px solid #000;padding-top:6px;width:45%;font-size:12px}
  /* Foglio firme di arrivo: righe alte per scrivere ora e firma a mano */
  #print-area tr.firmarow td{height:34px}
  #print-area td.box,#print-area th.box{text-align:center;width:70px}
}

/* --- Pop-up griglia tagli (fondo / prelievi / conteggio) --- */
.mdl-back{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:300;display:flex;align-items:center;justify-content:center;padding:16px}
.mdl{background:var(--panel,#16161c);border:1px solid var(--line,#2a2a35);border-radius:12px;max-width:440px;width:100%;max-height:88vh;display:flex;flex-direction:column}
.mdl-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line,#2a2a35)}
.mdl-head h3{margin:0;flex:1;font-size:16px}
.mdl-body{padding:12px 14px;overflow:auto}
.mdl-foot{padding:10px 14px;border-top:1px solid var(--line,#2a2a35);display:flex;justify-content:flex-end;gap:8px}
/* Riquadri cliccabili col totale */
.cashbox{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.cashbox .cb{flex:1;min-width:150px;background:var(--panel2,#1d1d27);border:1px solid var(--line,#2a2a35);
  border-radius:var(--r-s);padding:10px 12px;cursor:pointer;text-align:left}
.cashbox .cb:hover{border-color:var(--accent)}
.cashbox .cb{display:flex;flex-direction:column}
.cashbox .cb .k{font-size:12px;color:var(--muted,#9a9aa8)}
.cashbox .cb .v{margin-top:auto}
.cashbox .cb .v{font-size:24px;font-weight:600;font-family:var(--mono);margin-top:2px;letter-spacing:-.02em}
.cashbox .cb .h{font-size:11px;color:var(--muted,#9a9aa8);margin-top:4px}

/* --- LISTINO A4 da appendere alla porta (stampa) --- */
@media print{
  /* Tre alfabeti a scelta. Il default e' un neo-grottesco (Helvetica Neue):
     presente su ogni Mac, quindi niente font da scaricare in stampa. */
  /* Il margine sta DENTRO il contenuto, non solo nel @page: la finestra di
     stampa del Mac ha una sua voce "Margini" che, se messa su Nessuno,
     scavalca il @page e manda il listino a filo dei bordi. Un padding
     interno non lo puo' scavalcare nessuno. */
  #print-area.listino{color:#000;text-align:center;
    box-sizing:border-box;padding:16mm 15mm 10mm;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
  #print-area.listino.f-sistema{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif}
  #print-area.listino.f-classico{font-family:Georgia,"Times New Roman",serif}
  /* Si usa logo-nero.png, una copia del logo coi pixel gia' neri. Il logo
     normale e' bianco (sta su fondo scuro) e su carta sparirebbe; risolverlo
     con filter:brightness(0) funzionava nell'anteprima ma NON nel PDF salvato
     dalla finestra di stampa del Mac, che scarta i filtri CSS. Un'immagine
     gia' nera non dipende da nessun filtro e si comporta uguale ovunque. */
  #print-area.listino .lg{display:block;margin:0 auto 6mm;max-width:78mm;max-height:42mm;object-fit:contain;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  #print-area.listino h1{font-size:32pt;letter-spacing:-.015em;margin:0 0 1.5mm;font-weight:700;text-transform:uppercase}
  #print-area.listino.f-classico h1{font-size:30pt;letter-spacing:.14em}
  #print-area.listino .serata{font-size:17pt;font-weight:700;text-transform:uppercase;letter-spacing:.11em;
    margin:0 0 2mm;color:#000}
  #print-area.listino .occhiello{font-size:13pt;letter-spacing:.34em;text-transform:uppercase;color:#444;margin:0 0 7mm}
  #print-area.listino .riga{display:flex;align-items:baseline;gap:5mm;padding:3mm 0;border-bottom:1px solid #bbb;text-align:left}
  #print-area.listino .riga:last-of-type{border-bottom:none}
  /* min-width:0 : senza, un nome lungo non si restringe e spinge il prezzo
     oltre il bordo destro invece di andare a capo. */
  #print-area.listino .voce{flex:1;min-width:0;overflow-wrap:break-word;
    font-size:34pt;font-weight:700;text-transform:uppercase;letter-spacing:-.01em;line-height:1.05}
  #print-area.listino .quando{display:block;font-size:13pt;font-weight:400;letter-spacing:0;color:#555;
    text-transform:none;margin-top:1.2mm;line-height:1.2}
  #print-area.listino.f-classico .quando{font-style:italic}
  #print-area.listino .prezzo{font-size:34pt;font-weight:700;white-space:nowrap;letter-spacing:-.02em;line-height:1.05}
  #print-area.listino .sezione{margin-top:6mm;font-size:12pt;letter-spacing:.24em;text-transform:uppercase;color:#444;
    border-top:2px solid #000;padding-top:3mm;text-align:left}
  /* Con molte voci il corpo doppio sfonderebbe l'A4: si rientra in proporzione
     invece di finire a pagina 2. */
  #print-area.listino.molte .voce{font-size:26pt}
  #print-area.listino.molte .prezzo{font-size:26pt}
  #print-area.listino.molte .quando{font-size:11pt}
  #print-area.listino.molte .riga{padding:2.2mm 0}
  #print-area.listino.molte .lg{max-height:32mm;margin-bottom:4mm}
  #print-area.listino.tante .voce{font-size:20pt}
  #print-area.listino.tante .prezzo{font-size:20pt}
  #print-area.listino.tante .quando{font-size:10pt}
  #print-area.listino.tante .riga{padding:1.8mm 0}
  #print-area.listino.tante .lg{max-height:26mm;margin-bottom:3mm}
  #print-area.listino .cond{margin-top:10mm;padding-top:3mm;border-top:1px solid #999;
    font-size:9pt;line-height:1.5;text-align:center;color:#333;letter-spacing:.02em}
  /* Il listino occupa il foglio da solo */
  body.printing-listino>*:not(#print-area){display:none!important}
  body.printing-listino #print-area{display:block!important}
  /* Margini: 14mm ai lati venivano tagliati da alcune stampanti, che hanno
     un'area non stampabile piu' larga del previsto. In alto se ne mette di
     piu' che in basso: a occhio un blocco centrato geometricamente sembra
     spostato in alto, e va abbassato per apparire in equilibrio. */
  @page{size:A4;margin:12mm}
}

/* --- TAGLIANDI DRINK (stampa) --- */
@media print{
  body.printing-drink>*:not(#print-area){display:none!important}
  body.printing-drink #print-area{display:block!important}
  #print-area.drink{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#000}
  #print-area.drink .tg{width:80mm;box-sizing:border-box;padding:5mm 4mm;text-align:center;
    page-break-after:always;break-after:page;display:flex;flex-direction:column;justify-content:center}
  #print-area.drink .tg.pr{height:120mm}
  #print-area.drink .tg.staff,#print-area.drink .tg.soft{height:60mm;padding:3mm}
  #print-area.drink .lg{display:block;margin:0 auto 3mm;max-width:52mm;max-height:20mm;object-fit:contain}
  #print-area.drink .tg.pr .lg{max-width:64mm;max-height:30mm;margin-bottom:5mm}
  /* STAFF/ANALCOLICA = chit interno: fascia nera piena e dominante in alto,
     a tutta larghezza (i margini negativi annullano il padding da 3mm). */
  #print-area.drink .banda{background:#000;color:#fff;font-weight:800;letter-spacing:.2em;
    padding:3.5mm 0;margin:-3mm -3mm 3mm;font-size:20pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #print-area.drink .tg.soft .banda{font-size:16pt;letter-spacing:.12em}
  /* PR = voucher ospite: righe di separazione sopra/sotto il 1 DRINK gigante */
  #print-area.drink .tg.pr .rule{height:0;border-top:.6mm solid #000;width:64mm;margin:2.5mm auto}
  #print-area.drink .big{font-weight:800;letter-spacing:-.02em;line-height:1}
  #print-area.drink .tg.pr .big{font-size:58pt;margin:3mm 0}
  #print-area.drink .tg.staff .big,#print-area.drink .tg.soft .big{font-size:26pt;margin:2mm 0}
  #print-area.drink .data{font-weight:700;letter-spacing:.06em}
  #print-area.drink .tg.pr .data{font-size:15pt;margin-bottom:3mm}
  #print-area.drink .tg.staff .data,#print-area.drink .tg.soft .data{font-size:11pt;margin-bottom:1.5mm}
  #print-area.drink .chi{font-weight:700;text-transform:uppercase}
  #print-area.drink .tg.pr .chi{font-size:14pt}
  #print-area.drink .tg.staff .chi,#print-area.drink .tg.soft .chi{font-size:12pt}
  #print-area.drink .ruolo{font-size:8.5pt;color:#444;margin-top:.6mm}
  #print-area.drink .bc{margin:3mm auto 0;height:9mm;display:flex;align-items:stretch;justify-content:center}
  #print-area.drink .bc i{display:block;height:100%;background:#000;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #print-area.drink .bc i.w{background:transparent}
  #print-area.drink .pie{font-size:7pt;color:#555;margin-top:2mm}
  @page{size:80mm auto;margin:0}
}

/* Stampa LINEUP: grande e ad alto contrasto, leggibile in consolle al buio. */
@media print{
  body.printing-lineup>*:not(#print-area){display:none!important}
  body.printing-lineup #print-area{display:block!important}
  #print-area.lineup-print{color:#000;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;padding:12mm}
  #print-area.lineup-print h1{font-size:42pt;margin:0 0 2mm;letter-spacing:.02em;font-weight:800}
  #print-area.lineup-print .sub{font-size:17pt;margin:0 0 8mm;color:#000}
  #print-area.lineup-print .r{display:flex;align-items:baseline;gap:10mm;border-bottom:3px solid #000;padding:5mm 0}
  #print-area.lineup-print .t{font-size:36pt;font-weight:800;min-width:54mm}
  #print-area.lineup-print .n{font-size:30pt;font-weight:700}
  #print-area.lineup-print .n em{font-size:15pt;font-style:normal;text-transform:uppercase;color:#333;letter-spacing:.1em}
  #print-area.lineup-print .nt{font-size:16pt;margin:1mm 0 3mm 54mm;color:#000;font-style:italic}
  @page{size:A4;margin:0}
}

/* --- CASSA (mod_pos.js): tasti grandi, comanda a destra, tastierino --- */
.pos-wrap{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:10px;align-items:start}
.pos-top{grid-column:1 / -1;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pos-top select{font-weight:600;min-height:36px}
.pos-sx{min-width:0}
.pos-cats{margin-bottom:8px}
.pos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));grid-auto-rows:minmax(78px,96px);align-content:start;gap:8px;max-height:calc(100vh - 190px);overflow:auto;padding-bottom:6px}
.pos-btn{min-height:78px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.65);display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:8px 9px;text-align:left;font-weight:700;font-size:14px;line-height:1.15;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.pos-btn:active{transform:scale(.97)}
/* Il nome usa tutte le righe che il tasto ha davvero: con tre righe fisse due bottiglie
   della stessa casa sembravano uguali, perche' si perdeva proprio la coda del nome. */
.pos-btn .n{overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}
.pos-wrap.kiosk .pos-btn .n{-webkit-line-clamp:5}
/* Nomi lunghi: qualche punto in meno di corpo, cosi' ci stanno piu' lettere per riga. */
.pos-btn.lungo{font-size:12.5px;line-height:1.1}
.pos-wrap.kiosk .pos-btn.lungo{font-size:14px}
.pos-btn .p{font-family:var(--mono);font-size:13px;font-weight:600;align-self:flex-end;opacity:.95}
.pos-cart{position:sticky;top:calc(var(--hdr) + 44px);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;max-height:calc(100vh - 110px)}
.pos-cart-head{display:flex;gap:8px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--line);font-size:13.5px}
.pos-lines{flex:1;overflow:auto;min-height:120px}
.pos-line{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;padding:5px 8px;border-bottom:1px solid var(--line)}
.pos-line .t{min-width:0;font-size:13.5px;cursor:pointer}
.pos-line .i{font-family:var(--mono);font-size:13.5px;white-space:nowrap}
.pos-line .v{font-size:12.5px;color:var(--accent);font-weight:600;margin-top:1px}
.pos-qty{display:flex;align-items:center;gap:2px}
.pos-qty button{min-width:32px;min-height:32px;padding:0;font-size:16px}
.pos-qty .q{min-width:22px;text-align:center;font-family:var(--mono);font-weight:700}
.pos-tot{display:flex;justify-content:space-between;align-items:flex-end;padding:8px 10px;border-top:1px solid var(--line)}
.pos-tot .k{font-size:11px;text-transform:uppercase;letter-spacing:.11em;color:var(--muted)}
.pos-tot .v{font-family:var(--mono);font-size:26px;font-weight:600;letter-spacing:-.02em}
.pos-sco{font-size:12px;color:var(--warn)}
.pos-paglist{padding:4px 10px;border-top:1px solid var(--line)}
.pos-pag{display:flex;gap:8px;align-items:center;justify-content:space-between;font-size:13px;padding:3px 0}
.pos-actions{display:flex;gap:6px;padding:6px 8px 0}
.pos-actions button{flex:1}
.pos-pay{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;padding:8px}
.pos-pay button{min-height:52px;font-size:15px;font-weight:700}
.pos-disp{font-family:var(--mono);font-size:34px;text-align:right;padding:8px 12px;background:var(--panel2);border-radius:8px;margin-bottom:6px;min-height:56px}
.pos-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.pos-keypad button{min-height:54px;font-size:22px;font-family:var(--mono)}
.pos-rapidi{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.pos-rapidi button{flex:1;min-height:40px;font-family:var(--mono)}
.pos-incassa{width:100%;min-height:54px;margin-top:8px;font-size:17px}
.pos-esito{text-align:center}
.pos-esito .big{font-size:18px;font-weight:700}
.pos-esito .v{font-family:var(--mono);font-size:40px;font-weight:600;margin:6px 0}
.pos-esito .resto{font-size:22px;color:var(--ok)}
.pos-esito .resto b{display:block;font-family:var(--mono);font-size:46px;line-height:1.1}
.pos-sw{display:inline-block;width:14px;height:14px;border-radius:4px;border:1px solid var(--line);vertical-align:middle}
.pos-ritiro .pos-res{margin-top:12px;border-radius:12px;padding:22px 16px;text-align:center;background:var(--panel2);border:2px solid var(--line);min-height:120px}
.pos-res .t{font-size:30px;font-weight:800;letter-spacing:.04em}
.pos-res .n{font-size:20px;margin-top:6px}
.pos-res.ok{border-color:var(--ok);background:rgba(0,200,120,.12)}.pos-res.ok .t{color:var(--ok)}
.pos-res.usato{border-color:var(--bad);background:rgba(255,50,80,.14)}.pos-res.usato .t{color:var(--bad)}
.pos-res.no{border-color:var(--warn);background:rgba(255,200,0,.10)}.pos-res.no .t{color:var(--warn)}
.pos-hist{display:flex;gap:8px;font-size:13px;padding:4px 8px;border-left:3px solid var(--line)}
.pos-hist.ok{border-color:var(--ok)}.pos-hist.usato{border-color:var(--bad)}.pos-hist.no{border-color:var(--warn)}
@media(max-width:900px){
  .pos-wrap{grid-template-columns:1fr}
  .pos-grid{max-height:none}
  .pos-cart{position:static;max-height:none}
}
.grid-table td.t{font-family:var(--ui);font-size:13.5px}

/* --- CASSA v2: kiosk a schermo intero (tablet), PIN, layout fisso, modificatori --- */
body.kiosk{overflow:hidden}
body.kiosk #app{display:none}
body.kiosk main#kiosk{padding:8px 10px;max-width:none;height:100vh;height:100dvh;box-sizing:border-box;display:flex;flex-direction:column}
.pos-wrap.kiosk{grid-template-columns:minmax(0,1fr) 400px;grid-template-rows:auto minmax(0,1fr);align-content:start;height:100%;min-height:0}
.pos-wrap.kiosk .pos-sx{display:flex;flex-direction:column;min-height:0;height:100%}
.pos-wrap.kiosk .pos-grid{flex:1;max-height:none;overflow:auto;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-rows:minmax(96px,124px)}
/* icone del set: quadrate, colore ereditato */
.ico{display:inline-flex;width:1.15em;height:1.15em;vertical-align:-.2em;margin-right:.35em}
.ico svg{width:100%;height:100%;display:block}
/* maschera a passi: barra a frecce in basso */
.pren-wiz{display:flex;flex-direction:column;min-height:min(62vh,520px)}
.pren-wiz-body{flex:1;min-height:0}
.pren-steps{display:flex;gap:2px;margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.pren-step{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:2px;border:1px solid var(--line);background:var(--panel2);color:var(--muted);
  padding:9px 16px 9px 22px;font:600 12.5px var(--sans);white-space:nowrap;overflow:hidden;cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%,12px 50%)}
.pren-step:first-child{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%);padding-left:14px;border-radius:8px 0 0 8px}
.pren-step:last-child{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,12px 50%);border-radius:0 8px 8px 0}
.pren-step .t{overflow:hidden;text-overflow:ellipsis}
.pren-step.done{color:var(--ok);border-color:var(--ok)}
.pren-step.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pren-nav{display:flex;gap:8px;margin-top:10px}
.pren-nav button{flex:1;min-height:46px;font-size:15px;font-weight:700}
.pren-pax{display:flex;gap:8px;align-items:center}
.pren-pax input{flex:1;text-align:center;font:700 22px var(--mono);min-height:48px}
.pren-pax button{min-width:52px;min-height:48px;font-size:22px}
.pren-sugg-i{display:flex;gap:8px;align-items:flex-start}
@media(max-width:560px){ .pren-step .t{display:none} .pren-step{padding:9px 10px 9px 18px} }
.pren-sez{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);font-weight:700;border-bottom:1px solid var(--line);padding-bottom:4px;margin:14px 0 8px}
.pren-sez:first-child{margin-top:0}
.pos-mtav.scelto{outline:3px solid var(--accent);outline-offset:2px}
.pren-tab tr.attesa td{background:rgba(224,161,58,.10)}
.pren-tab tr.stornato td{opacity:.5;text-decoration:line-through}
.pren-tab tr.stornato td:last-child,.pren-tab tr.stornato td:nth-child(10){text-decoration:none}
.pren-sugg{display:none;position:absolute;z-index:40;left:0;right:0;top:100%;background:var(--panel);border:1px solid var(--accent);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.5);max-height:260px;overflow:auto}
.pren-sugg.on{display:block}
.pren-sugg-i{padding:8px 10px;cursor:pointer;border-bottom:1px solid var(--line)}
.pren-sugg-i:last-child{border-bottom:0}
.pren-sugg-i:hover{background:var(--panel2)}
.menu-banner-prev{height:120px;border-radius:10px;background:var(--panel2) center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;margin-bottom:8px}
/* Anteprima dell'avviso del menu: verticale, come si vedra' sul telefono. */
.menu-avviso-prev{width:120px;aspect-ratio:3/4;border-radius:10px;background:var(--panel2) center/cover no-repeat;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);font-size:12px;margin:6px 0 8px;border:1px solid var(--line)}
.chip-ck{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.menu-thumb{width:76px;height:38px;border-radius:6px;background:var(--panel2) center/contain no-repeat;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);font:600 11px var(--mono);cursor:pointer;border:1px dashed var(--line);vertical-align:middle}
.menu-foto{white-space:nowrap}
.menu-tab tr.menu-cat td{background:var(--panel2);text-align:left;padding:8px 10px}
.pos-scan{display:flex;gap:6px;margin:8px 0 4px}
.pos-scan input{flex:1;font-size:17px;min-height:48px;font-family:var(--mono)}
.pos-scan button{min-width:52px;min-height:48px;font-size:18px}
.pos-filtri{gap:6px;flex-wrap:wrap;margin:8px 0}
.pos-tblwrap{overflow-x:auto}
.pos-tconti td,.pos-tconti th{white-space:nowrap}
.pos-tconti tr.stornato td{opacity:.55;text-decoration:line-through}
.pos-tconti tr.stornato td:last-child,.pos-tconti tr.stornato td:nth-child(8){text-decoration:none}
.tag.ok{color:var(--ok);border-color:var(--ok)}
.tag.bad{color:var(--bad);border-color:var(--bad)}
.pos-fast{display:flex;gap:6px;padding:6px 8px 0}
.pos-fast button{flex:1;min-height:44px;font-family:var(--mono);font-weight:700;font-size:15px}
.pos-fast button.ghost{flex:0 0 auto;min-width:52px;font-family:inherit}
.pos-wrap.kiosk .pos-fast button{min-height:52px;font-size:16px}
.pos-pay button small{display:block;font-size:11px;font-weight:500;opacity:.8;line-height:1}
.pos-qmul{margin-left:auto;display:flex;gap:6px;align-self:center}
.pos-qmul .pill{font-family:var(--mono);min-width:44px;text-align:center}
.pos-scontrino{position:relative;background:#fff;color:#111;font-family:var(--mono);font-size:12.5px;line-height:1.35;white-space:pre;overflow-x:auto;text-align:left;padding:14px 16px 18px;margin:12px auto 0;max-width:360px;border-radius:3px;box-shadow:0 10px 28px rgba(0,0,0,.45);border-bottom:6px dotted #ccc}
.pos-stampe{display:flex;gap:14px;overflow-x:auto;align-items:flex-start;padding:10px 4px 6px;margin-top:8px;scroll-snap-type:x proximity}
.mdl.wide .pos-stampe{flex-wrap:wrap;justify-content:center;overflow:visible}
.pos-stampe .pos-scontrino{margin:0;flex:0 0 auto;width:340px;scroll-snap-align:center}
/* Facsimile della comanda: piu' larga del tagliando perche' la si legge di
   corsa e di lato, e con la carta leggermente calda per distinguerla a colpo
   d'occhio dallo scontrino bianco. */
.pos-comanda{width:264px;background:#fffdf5;border-left:4px solid #E7A81E}
.pos-comanda .tg-drink{font-size:15px;letter-spacing:.02em}
.pos-tagliando{flex:0 0 auto;width:236px;background:#fff;color:#111;font-family:var(--mono);font-size:11px;line-height:1.3;text-align:center;padding:12px 10px 16px;border-radius:3px;box-shadow:0 10px 28px rgba(0,0,0,.45);border-bottom:6px dotted #ccc;scroll-snap-align:center;animation:pos-stampa 1s ease-out both}
.pos-tagliando img{max-width:72%;max-height:60px;display:block;margin:0 auto 6px}
.pos-tagliando .brand{font-size:18px;font-weight:800;margin-bottom:4px}
.pos-tagliando .rule{overflow:hidden;white-space:nowrap;letter-spacing:-1px;margin:4px 0}
.pos-tagliando .nome{font-size:21px;font-weight:800;line-height:1.05;margin:6px 0 2px;word-break:break-word}
.pos-tagliando .qta{font-size:15px;font-weight:700;margin-bottom:2px}
.pos-tagliando .bc{display:block;width:88%;height:52px;margin:8px auto 4px;fill:#000}
.pos-tagliando .cod{font-size:10px;color:#666;margin-bottom:6px}
.pos-tagliando .cod span{color:#b33}
.pos-tagliando .prova{display:inline-block;background:#000;color:#fff;font-weight:800;font-size:17px;padding:2px 10px;margin:4px 0}
.pos-scontrino{animation:pos-stampa 1s ease-out both}
@keyframes pos-stampa{from{clip-path:inset(0 0 100% 0);transform:translateY(-10px)}to{clip-path:inset(0 0 0 0);transform:none}}
@media (prefers-reduced-motion:reduce){.pos-tagliando,.pos-scontrino{animation:none}}
.pos-scontrino .sim{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:900 44px/1 var(--sans,sans-serif);color:rgba(200,30,30,.16);transform:rotate(-24deg);letter-spacing:.1em;pointer-events:none}
.pos-wrap.kiosk .pos-cart{position:static;max-height:100%;height:100%}
.pos-wrap.kiosk .pos-btn{min-height:92px;font-size:16px}
.pos-wrap.kiosk .pos-cats .pill{min-height:42px;padding:8px 16px;font-size:14px}
.pos-wrap.kiosk .pos-pay button{min-height:60px;font-size:17px}
.pos-wrap.kiosk .pos-tot .v{font-size:32px}
.pos-wrap.kiosk .pos-line{padding:8px 10px}
.pos-wrap.kiosk .pos-qty button{min-width:38px;min-height:38px}
.pos-postbtn{font-size:14px}
.pos-serata{font-size:12.5px}
.pos-badge.bad{color:var(--bad);border-color:var(--bad)}
.pos-grid.fixed{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(80px,124px);gap:8px}
.pos-grid.fixed .pos-btn{min-height:0;height:100%}
.pos-btn.fun{background:var(--panel);border-style:dashed;color:var(--txt);text-shadow:none;justify-content:center;align-items:center;text-align:center;font-weight:600}
.pos-btn .opt{opacity:.8;font-weight:400}
.pos-qtybig{margin-bottom:10px;gap:10px}
.pos-qtybig .q{font-size:22px;min-width:36px}
.pos-qtybig button{min-width:44px;min-height:44px;font-size:20px}
.pos-modgrp{margin:8px 0}
.pos-modgrp .k{font-size:11px;text-transform:uppercase;letter-spacing:.11em;color:var(--muted);margin-bottom:4px}
.pos-modopts{display:flex;gap:6px;flex-wrap:wrap}
.pos-modopts button{min-height:44px}
.pos-modopts button .p{font-family:var(--mono);font-size:12px;opacity:.85}
.pos-tip{display:flex;gap:8px;align-items:center;font-size:13px;margin:6px 0;text-transform:none;visibility:hidden}
.ns-sospesa{background:#7a1f1f;color:#fff;text-align:center;padding:8px 12px;font-weight:600;position:sticky;top:0;z-index:50}
.pos-serate{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin:10px 0}
.pos-serate .pos-serata-b{min-height:64px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:10px 14px;text-align:left}
.pos-serate .pos-serata-b span{font-size:12.5px;opacity:.8;font-weight:500}
.pos-pinwrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}
.pos-gestbtn{display:inline-flex;align-items:center;min-height:36px;padding:0 10px;border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--txt);font-weight:600;font-size:13px}
.pos-lock{position:fixed;inset:0;z-index:5000;background:var(--bg);display:flex;align-items:center;justify-content:center}
.pos-lock .pos-pinwrap{min-height:0;width:100%}
.pos-pin .logo{display:block;max-width:220px;max-height:84px;margin:0 auto 10px}
.pos-pindisp.wait{opacity:.6}
.pos-pindisp.no{animation:pos-shake .4s}
@keyframes pos-shake{0%,100%{transform:none}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.pos-pin .sub2{font-size:12.5px;color:var(--muted);margin:-4px 0 10px}
.pos-pin{width:320px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px 20px;text-align:center}
.pos-pin .brand{font-size:20px;font-weight:700}
.pos-pin .sub{color:var(--muted);font-size:13px;margin:2px 0 12px}
.pos-pindisp{font-family:var(--mono);font-size:30px;letter-spacing:.3em;min-height:46px;background:var(--panel2);border-radius:8px;padding:6px;margin-bottom:10px}
.pos-pin .pos-keypad button{min-height:58px;font-size:22px}
.mdl .pos-pinwrap{min-height:0}
.mdl .pos-pin{width:100%;border:none;padding:6px 0 0}
.pos-funmenu button{font-size:15px}
@media(max-width:900px){ .pos-wrap.kiosk{grid-template-columns:1fr;height:auto} body.kiosk{overflow:auto} body.kiosk main#kiosk{height:auto} .pos-wrap.kiosk .pos-cart{height:auto} }
.pos-layed{margin-top:10px}
.pos-cell{border:1px dashed var(--line);border-radius:8px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:13px;font-weight:600;cursor:pointer;padding:4px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);min-height:0}
.pos-cell:not(.full){color:var(--muted);text-shadow:none;background:transparent}
.pos-cell.full{border-style:solid;background:var(--panel2)}
/* --- Cassa: scelta tavolo dalla mappa e conto tavolo --- */
.pos-tavchip{font-size:14px}
.pos-tavchip .muted{color:inherit;opacity:.8;font-family:var(--mono);font-weight:500}
.pos-borsinfo{margin:0 10px 6px}
.sala-wrap{width:100%;display:flex;justify-content:center}
.pos-mappa{position:relative;width:100%;aspect-ratio:16/10;background:#0e0f14 center/100% 100% no-repeat;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.pos-mtav{position:absolute;width:36px;height:36px;min-width:0;min-height:0;box-sizing:border-box;border-radius:6px;border:2px solid rgba(255,255,255,.55);background:rgba(14,15,20,.55);color:var(--txt);display:flex;align-items:center;justify-content:center;padding:0;font-weight:800;line-height:1;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.45);text-shadow:0 1px 2px rgba(0,0,0,.8)}
.pos-mcap{position:absolute;transform:translate(-50%,0);pointer-events:none;white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis;background:rgba(0,0,0,.65);color:var(--txt);padding:1px 5px;border-radius:4px;font-weight:600}
.pos-mtav.tondo{border-radius:50%}
.pos-mtav .c{font-size:1em}
.pos-mtav .n{font-size:clamp(8px,1vw,11px);font-weight:500;color:var(--muted);max-width:95%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pos-mtav .r{font-size:clamp(8px,1vw,11px);font-family:var(--mono);color:var(--accent)}
.pos-mtav.libero{background:rgba(14,15,20,.25);border-color:rgba(255,255,255,.45)}
.pos-mtav.prenotato{border-color:var(--accent);background:rgba(205,163,73,.35)}
.pos-mtav.entrati{border-color:var(--ok);background:rgba(0,150,90,.25)}
.pos-mtav.aperto{border-color:var(--bad);background:rgba(220,40,60,.28)}
.pos-mtav.aperto .r{color:var(--bad)}
.pos-conto-head{display:flex;gap:12px;align-items:baseline;margin-bottom:8px}
.pos-conto-head .tv{font-size:26px;font-weight:800}
.pos-conto-head .nm{font-size:16px;font-weight:600}
.pos-movs{max-height:34vh;overflow:auto;margin:8px 0;border:1px solid var(--line);border-radius:8px}
.pos-mov{display:grid;grid-template-columns:44px 1fr auto;gap:8px;padding:5px 8px;border-bottom:1px solid var(--line);font-size:13px}
.pos-mov .o{color:var(--muted);font-family:var(--mono)}
.pos-mov .i{font-family:var(--mono)}
.pos-mov .i.neg{color:var(--bad)}.pos-mov .i.pos{color:var(--ok)}
.pos-mov.void{opacity:.45;text-decoration:line-through}
.mdl.wide{max-width:760px}

/* SCHERMI BASSI: il tablet della cassa in orizzontale. Con l'altezza di un monitor
   la finestra del pagamento ci sta; con 600 px il tastierino da solo e' piu' alto del
   corpo della finestra, e il tasto "Incassa" finiva sotto il bordo -- invisibile a chi
   non sapeva gia' che c'era. Qui tutta la finestra si stringe: meno bordo, testa e
   piede piu' bassi, tasti piu' piccoli. Vale per ogni finestra della cassa, non solo
   per il pagamento. Si guarda l'ALTEZZA, non la larghezza: e' quella che manca. */
@media (max-height:760px){
  .mdl-back{padding:8px}
  .mdl{max-height:94vh}
  .mdl-head{padding:8px 12px}
  .mdl-head h3{font-size:15px}
  .mdl-body{padding:8px 12px}
  .mdl-foot{padding:6px 12px}
  .mdl-foot button{min-height:40px}   /* si preme col dito: sotto i 40 px si sbaglia */
  .mdl .pos-disp{font-size:26px;min-height:42px;padding:5px 10px;margin-bottom:4px}
  .mdl .pos-keypad{gap:5px;margin-top:6px}
  .mdl .pos-keypad button{min-height:44px;font-size:19px}
  .mdl .pos-rapidi{gap:5px;margin-top:6px}
  .mdl .pos-rapidi button{min-height:34px}
  .mdl .pos-tip{margin:4px 0;font-size:12.5px}
  .mdl .pos-incassa{min-height:46px;margin-top:6px;font-size:16px}
}
/* ...e se c'e' larghezza da vendere (tablet in ORIZZONTALE), il tastierino si
   sposta di fianco invece di allungare la finestra: l'altezza si dimezza e i tasti
   restano grandi quanto bastano al dito. */
@media (max-height:760px) and (min-width:680px){
  .mdl:has(.pos-tast){max-width:560px}
  .pos-tast{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px;align-items:start;
    grid-template-areas:"disp pad" "info pad" "tip pad" "rap pad" "ok pad"}
  .pos-tast .pos-disp{grid-area:disp}
  .pos-tast .pos-tast-info{grid-area:info}
  .pos-tast .pos-tip{grid-area:tip}
  .pos-tast .pos-rapidi{grid-area:rap}
  .pos-tast .pos-keypad{grid-area:pad;margin-top:0}
  .pos-tast .pos-keypad button{min-height:48px;font-size:20px}
  .pos-tast .pos-incassa{grid-area:ok;min-height:52px;font-size:17px}
}
.pos-actions2{padding-top:6px}
.pos-actions2 button{min-height:46px;font-size:14.5px;font-weight:700}
.pos-wrap.kiosk .pos-actions2 button{min-height:54px;font-size:16px}

/* --- Marchio del prodotto e avviso di versione -----------------------------
   Il gestionale e' un prodotto (Nightsheet) installato presso il locale: la
   barra in alto resta del locale, il marchio del prodotto sta in piccolo
   accanto e nel piede. La targhetta "beta" dice che il software e' in
   sviluppo attivo. Il marchio usa currentColor, cosi' segue l'accento del
   tema scelto dal locale. */
.ns-mark{flex:0 0 auto;display:inline-flex;color:var(--accent)}
.ns-mark svg{display:block}
.ns-beta{display:inline-flex;align-items:center;flex:0 0 auto;font-family:var(--mono);
  font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent);border-radius:20px;padding:1px 6px;line-height:1.6}
.ns-foot{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:14px 14px 26px;margin-top:10px;border-top:1px solid var(--line);
  color:var(--muted);font-size:12px}
.ns-foot b{color:var(--txt);font-weight:600}
.ns-foot__note{opacity:.85;flex:1 1 320px;min-width:0;line-height:1.45}
/* RITORNO ALLA CASSA. Compare solo sul tablet autorizzato come cassa: e' la strada
   indietro per chi ha premuto "Gestionale" e si e' trovato davanti al login. Grande
   quanto un tasto vero, perche' si preme col dito e di fretta. */
.login-cassa{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:2px;
  min-height:44px;justify-content:center;padding:6px 10px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel2);color:var(--txt);text-decoration:none;font-weight:700;font-size:14px}
.login-cassa span{font-weight:500;font-size:11.5px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.login-cassa:active{transform:scale(.98)}
.login-foot{display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--muted)}
.login-foot b{color:var(--txt);font-weight:600}
@media(max-width:760px){
  .ns-foot{padding:12px 10px 22px;font-size:11.5px;gap:7px}
  .ns-foot__note{flex-basis:100%}
}
/* Documento commerciale (RT) in cassa */
.pos-fisc{margin:10px 0 0;padding:9px 12px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);font-weight:600}
.pos-fisc.wait{color:var(--muted)}
.pos-fisc.ok{border-color:var(--ok);color:var(--ok)}
.pos-fisc.bad{border-color:var(--bad);color:var(--txt);background:rgba(220,40,60,.12)}
.pos-fiscprob .big{font-size:20px;font-weight:800;margin-bottom:6px}
.pos-battitura{margin-top:10px}
.pos-battitura table{width:100%}

/* Facsimile del biglietto della consegna digitale (stampa a video) */
.pos-biglietto .tg-qr{background:#fff;padding:8px;margin:8px auto 4px;max-width:180px}
.pos-biglietto .tg-qr svg{width:100%;height:auto;display:block}
.pos-biglietto .tg-cod{font-family:var(--mono);font-size:26px;font-weight:800;letter-spacing:.16em;margin:2px 0 6px}
.pos-biglietto .tg-hint{font-size:10.5px;line-height:1.35;opacity:.75}

/* «?» in ogni tab: apre il capitolo dell'help (help.php?tab=…). Fisso in basso a destra. */
.help-tab{position:fixed;right:18px;bottom:18px;z-index:50;width:42px;height:42px;border-radius:50%;background:#E0B64A;color:#0B0B0D;
  font:700 20px/42px system-ui,sans-serif;text-align:center;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.4);opacity:.92}
.help-tab:hover{opacity:1;transform:scale(1.06)}
@media print{.help-tab{display:none}}

/* Comanda a video: lo spazio per appendere e il tavolo in fondo, come sulla carta. */
.pos-comanda .tg-appendi{height:34px;display:flex;align-items:center;justify-content:center;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#9a9a9a;border-bottom:1px dashed #bdbdbd;margin-bottom:8px}
.pos-comanda .tg-vuoto{height:14px}
/* Le opzioni rientrate sotto l'articolo, come i 4 spazi della carta. */
.pos-comanda .tg-opz{text-align:left;padding-left:4ch}
.pos-comanda .tg-dove{margin-top:10px;padding-top:8px;border-top:2px solid #222;text-align:center;line-height:1.1}
.pos-comanda .tg-dove span{display:block;font-size:12px;letter-spacing:.14em}
.pos-comanda .tg-dove b{display:block;font-size:34px;font-weight:800;letter-spacing:.02em}

/* La parola della serata: in cassa accanto alla data, e nella schermata del barman. */
.pos-parola{display:inline-block;margin-left:8px;padding:3px 10px;border:1px solid var(--accent);border-radius:999px;
  color:var(--accent);font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.14em;vertical-align:middle}

/* ---------- CLUB FACTS ----------
   La frase del turno, scritta a mano in fondo all'area dei pulsanti: si legge di
   sfuggita e non compete con prodotti, totale e pagamenti. Se i pulsanti arrivano
   fin la' ci passano sopra: e' voluto, non deve rubare spazio al lavoro. */
.pos-sx{position:relative}
/* Nel gestionale (tab Vendita) la griglia dei tasti non arriva in fondo allo schermo:
   la striscia sta IN FILA sotto i pulsanti. A schermo intero invece si appoggia al
   fondo dell'area, dove i tasti eventualmente le passano sopra. */
.pos-fact{display:flex;align-items:flex-end;gap:10px;padding:8px 10px 2px;pointer-events:none}
/* A schermo intero la frase sta CENTRATA nell'area dei pulsanti, un po' staccata dal
   fondo: cosi' non sembra appoggiata al bordo dello schermo. */
.pos-wrap.kiosk .pos-fact{position:absolute;left:2px;right:2px;bottom:22px;z-index:0;padding:10px 12px;
  justify-content:center;align-items:center}
.pos-wrap.kiosk .pos-fact .pos-fact-t{flex:0 1 auto;max-width:min(72ch,74%);text-align:center}
.pos-fact[hidden]{display:none}
.pos-fact-t{flex:1;min-width:0;font-family:var(--scritta),var(--ui);font-size:20px;line-height:1.28;
  color:var(--muted);opacity:.78;letter-spacing:.02em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pos-fact-k{color:var(--accent);opacity:.9;font-size:12px;letter-spacing:.08em;margin-right:6px;white-space:nowrap;
  text-transform:uppercase;font-family:var(--ui)}
.pos-fact-x{pointer-events:auto;background:none;border:0;color:var(--muted);opacity:.55;font-size:17px;line-height:1;
  padding:4px 6px;border-radius:8px;cursor:pointer}
.pos-fact-x:hover{opacity:1}
/* Sul tastierino del PIN sta FUORI dalla scheda, staccata sotto: si legge aspettando. */
.pos-fact.pin{position:static;margin:18px auto 0;padding:0 8px;justify-content:center;text-align:center;max-width:420px}
.pos-fact.pin .pos-fact-t{-webkit-line-clamp:2;font-size:18px;opacity:.72}
@media (max-width:760px){ .pos-fact{display:none} }   /* schermi stretti: prima il lavoro */
/* TABLET DA CASSA. I 150 px di lato vengono da un monitor da banco: su un tablet da
   dieci pollici diventano tre tasti enormi per riga, con mezzo schermo vuoto sotto.
   Qui i tasti scendono di misura -- una colonna in piu', e si leggono lo stesso -- e
   la frase del turno smette di galleggiare sopra i pulsanti: si mette in fila sotto
   la griglia, dove non copre niente. Il layout fisso non si tocca: le sue colonne le
   ha scelte il locale. Sui monitor grandi (oltre 1400) non cambia nulla. */
@media (max-width:1400px){
  .pos-wrap.kiosk .pos-grid:not(.fixed){grid-template-columns:repeat(auto-fill,minmax(132px,1fr));grid-auto-rows:minmax(84px,106px);gap:7px}
  .pos-wrap.kiosk .pos-btn{font-size:13.5px;padding:7px 8px}
  .pos-wrap.kiosk .pos-btn.lungo{font-size:12.5px}
  .pos-wrap.kiosk .pos-btn .n{-webkit-line-clamp:4}
  .pos-wrap.kiosk .pos-fact{position:static;padding:6px 8px 3px;justify-content:center;align-items:center}
  /* Due righe, non una: una frase lunga tagliata a meta' non si legge. */
  .pos-wrap.kiosk .pos-fact .pos-fact-t{font-size:15px;line-height:1.24;-webkit-line-clamp:2;max-width:min(72ch,96%)}
}
@media (max-width:1100px){
  .pos-wrap.kiosk .pos-grid:not(.fixed){grid-template-columns:repeat(auto-fill,minmax(118px,1fr));grid-auto-rows:minmax(78px,98px);gap:6px}
  .pos-wrap.kiosk .pos-btn{font-size:12.5px;padding:6px 7px;min-height:78px}
  .pos-wrap.kiosk .pos-btn.lungo{font-size:11.5px}
  .pos-wrap.kiosk .pos-btn .p{font-size:12px}
  .pos-wrap.kiosk .pos-btn .n{-webkit-line-clamp:3}
  .pos-wrap.kiosk .pos-fact .pos-fact-t{font-size:13.5px}
}

/* OCCHIO SULLE PASSWORD — una password che non si puo' rileggere si sbaglia, e
   sui tablet si sbaglia sempre. Lo mette app.js su ogni campo, anche su quelli
   creati dopo: qui c'e' solo il vestito. */
.pw-wrap{position:relative;display:inline-flex;align-items:stretch}
.pw-wrap > input{width:100%;padding-right:32px}
.pw-occhio{position:absolute;right:1px;top:50%;transform:translateY(-50%);width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0;margin:0;
  color:var(--muted);font-size:13px;line-height:1;cursor:pointer;border-radius:8px;opacity:.75}
.pw-occhio:hover{opacity:1;color:var(--txt);background:transparent;border:0}
.pw-occhio:focus-visible{outline:2px solid var(--accent);outline-offset:1px}