/* Skippo — tema chiaro, colori presi dal logo */
/* Nunito servito in locale (licenza OFL, vedi /fonts/OFL-Nunito.txt): il totem funziona anche senza internet
   e il browser del cliente non contatta server di terzi. */
@font-face { font-family: 'Nunito'; font-style: normal; font-display: swap; font-weight: 600; src: url('/fonts/nunito-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: normal; font-display: swap; font-weight: 700; src: url('/fonts/nunito-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: normal; font-display: swap; font-weight: 800; src: url('/fonts/nunito-latin-800-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: normal; font-display: swap; font-weight: 900; src: url('/fonts/nunito-latin-900-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: normal; font-display: swap; font-weight: 600 900; src: url('/fonts/nunito-latin-ext-800-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #F3F6FB;          /* fondo pagine */
  --surface: #FFFFFF;     /* card */
  --surface-2: #EAF0F8;   /* superfici secondarie, input disattivi */
  --line: #DCE3EE;
  --ink: #0B2A4F;         /* testo principale */
  --ink-2: #5A6B85;       /* testo secondario */
  --navy: #0B356C;        /* blu del logotipo */
  --navy-2: #0F4488;
  --orange: #FFA400;      /* la "O" del logo */
  --yellow: #FEC022;      /* il carrello */
  --blue: #1E73D2;
  --green: #1FA668;
  --red: #D93A3A;
  --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --shadow: 0 1px 2px rgba(11, 42, 79, .06), 0 8px 24px rgba(11, 42, 79, .08);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 600;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 900; letter-spacing: -0.01em; line-height: 1.15; }
p { margin: 0; }
a { color: var(--blue); }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }

/* Numeri di turno: cifre a larghezza fissa, nessun effetto luminoso */
.num { font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; }
.flip { display: inline-block; animation: flip .5s cubic-bezier(.2, .7, .2, 1); }
@keyframes flip { from { transform: translateY(40%); opacity: 0 } to { transform: none; opacity: 1 } }
.pulse-once { animation: pulse-once 1.2s ease-out 1; }
@keyframes pulse-once { 0% { box-shadow: 0 0 0 0 rgba(255, 164, 0, .7) } 100% { box-shadow: 0 0 0 22px rgba(255, 164, 0, 0) } }

/* Bottoni */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 52px; padding: 0 1.4em;
  border: 0; border-radius: 14px; cursor: pointer;
  font-weight: 800; font-size: 1.02rem;
  color: #fff; background: var(--navy);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .12);
  text-decoration: none;
  transition: transform .1s ease, background-color .15s ease;
}
.btn:hover { background: var(--navy-2); }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.btn-accent { background: var(--orange); color: var(--ink); }
.btn-accent:hover { background: #FFB42E; }
.btn-ghost { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-ok { background: var(--green); }
.btn-ok:hover { background: #1B9660; }
.btn-danger { background: var(--surface); color: var(--red); box-shadow: inset 0 0 0 2px #F3C5C5; }
.btn-danger:hover { background: #FDF1F1; }
.btn-sm { min-height: 38px; padding: 0 .9em; font-size: .88rem; border-radius: 10px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn-block { width: 100%; }

/* Campi */
.field { display: grid; gap: .35em; }
.field label { font-size: .85rem; color: var(--ink-2); font-weight: 700; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 0 1em; border-radius: 12px;
  border: 2px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 700; font-size: 1.02rem;
}
.field textarea { padding: .7em 1em; min-height: 90px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30, 115, 210, .18); }
.check { display: flex; gap: .7em; align-items: flex-start; font-size: .9rem; color: var(--ink-2); font-weight: 600; }
.check input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--navy); }

/* Superfici */
.panel { background: var(--surface); border-radius: var(--r); padding: 20px; box-shadow: var(--shadow); }
.muted { color: var(--ink-2); }
.error { color: var(--red); font-size: .9rem; font-weight: 700; }
.ok { color: var(--green); }
.chip { display: inline-flex; align-items: center; gap: .4em; padding: .25em .75em; border-radius: 999px; font-size: .82rem; font-weight: 800; background: var(--surface-2); color: var(--ink); }
.chip-ok { background: #E3F5EC; color: #13784A; }
.chip-warn { background: #FFF1D6; color: #8A5A00; }
.chip-off { background: #EEF1F5; color: var(--ink-2); }

/* Tabelle */
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--ink-2); font-weight: 800; font-size: .82rem; }

@media (prefers-reduced-motion: reduce) {
  .flip, .pulse-once { animation: none; }
  .btn { transition: none; }
}

/* Notifica breve in basso */
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px); opacity: 0; visibility: hidden; background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 800; transition: transform .2s ease, opacity .2s ease, visibility .2s; z-index: 100; max-width: calc(100vw - 32px); box-shadow: var(--shadow); }
.toast.on { transform: translateX(-50%); opacity: 1; visibility: visible; }
.toast.err { background: var(--red); }
[hidden] { display: none !important; }