:root {
  --sfondo: #f3f5f8;
  --superficie: #ffffff;
  --superficie-2: #f7f9fb;
  --bordo: #dfe4ea;
  --testo: #18212b;
  --tenue: #637083;
  --primario: #0b6bcb;
  --primario-testo: #ffffff;
  --ok: #1b8a4b;
  --ok-sfondo: #e5f5ec;
  --avviso: #a86500;
  --avviso-sfondo: #fdf1dc;
  --errore: #c62f2f;
  --errore-sfondo: #fbe7e7;
  --info: #3d5f8f;
  --info-sfondo: #e7eef8;
  --barra-vuota: #e8ecf1;
  --ombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sfondo: #0f141a;
    --superficie: #171e26;
    --superficie-2: #1c242e;
    --bordo: #2a3440;
    --testo: #e6ebf1;
    --tenue: #91a0b2;
    --primario: #3b8fe6;
    --ok: #4cc283;
    --ok-sfondo: #15302231;
    --avviso: #e6a740;
    --avviso-sfondo: #3a2b1240;
    --errore: #f07070;
    --errore-sfondo: #3d181850;
    --info: #8fb2e3;
    --info-sfondo: #1b2a3f;
    --barra-vuota: #26303b;
    --ombra: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--sfondo); color: var(--testo); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--primario); text-decoration: none; }
h1 { font-size: 22px; margin: 0; }
h2 { font-size: 15px; margin: 0 0 10px; }
input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--bordo); border-radius: 8px; background: var(--superficie); }
label { display: block; margin-bottom: 10px; color: var(--tenue); font-size: 13px; }
label > input, label > select, label > textarea { margin-top: 4px; color: var(--testo); font-size: 14px; }
.riga-campo { display: flex; gap: 8px; margin-top: 4px; }
.riga-campo > input { color: var(--testo); font-size: 14px; font-family: ui-monospace, Consolas, monospace; }
fieldset.accesso { border: 1px solid var(--bordo); border-radius: 10px; padding: 10px 12px 2px; margin: 4px 0 12px; }
fieldset.accesso legend { padding: 0 6px; font-size: 13px; font-weight: 600; }
pre.credenziali { font-size: 14px; }
.qr { display: flex; justify-content: center; margin: 8px 0; }
.qr svg { width: 200px; height: 200px; background: #fff; padding: 8px; border-radius: 8px; }
.pannello.stretto { max-width: 520px; margin: 40px auto; }
button, a.pulsante { cursor: pointer; border: 1px solid var(--bordo); background: var(--superficie); border-radius: 8px; padding: 7px 14px; }
button:hover, a.pulsante:hover { border-color: var(--tenue); }
a.pulsante { display: inline-block; color: inherit; text-decoration: none; }
button:disabled { opacity: .5; cursor: not-allowed; }
button.primario, a.pulsante.primario { background: var(--primario); border-color: var(--primario); color: var(--primario-testo); }
button.pericolo { color: var(--errore); border-color: var(--errore); }
button.link { border: 0; background: none; color: var(--primario); padding: 4px 6px; }
button.link.pericolo { color: var(--errore); }
.tenue { color: var(--tenue); }
.piccolo { font-size: 12px; }
.errore { color: var(--errore); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
code, pre { font: 12px/1.5 ui-monospace, Consolas, monospace; }
pre { background: var(--superficie-2); border: 1px solid var(--bordo); border-radius: 8px; padding: 10px; overflow: auto; white-space: pre-wrap; word-break: break-all; }

/* ---- login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-box { width: 100%; max-width: 340px; background: var(--superficie); border: 1px solid var(--bordo); border-radius: 14px; padding: 28px; box-shadow: var(--ombra); }
.login-box button { width: 100%; margin-top: 6px; }
.login-box .ok-testo { background: var(--superficie-2); border-left: 4px solid var(--ok, #1b7a3d); border-radius: 8px; padding: 8px 10px; font-size: 13px; }

/* ---- barra */
.marchio { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; color: var(--testo); }
.marchio.grande { font-size: 22px; }
.logo { width: 26px; height: 26px; border-radius: 7px; background: var(--primario) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M8 21a6 6 0 0 1 3-11 8 8 0 0 1 14 3 4 4 0 0 1-1 8z' fill='white'/%3E%3C/svg%3E") center/100% no-repeat; }
.barra { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 24px; padding: 10px 24px; background: var(--superficie); border-bottom: 1px solid var(--bordo); }
.barra nav { display: flex; gap: 4px; flex: 1; }
.barra nav a { color: var(--tenue); padding: 6px 12px; border-radius: 8px; }
.barra nav a.attivo { color: var(--testo); background: var(--superficie-2); font-weight: 600; }
.utente { display: flex; align-items: center; gap: 8px; color: var(--tenue); }
.badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--errore); color: #fff; font-size: 11px; font-weight: 700; text-align: center; line-height: 18px; }

.banner { padding: 10px 24px; background: var(--avviso-sfondo); color: var(--avviso); border-bottom: 1px solid var(--bordo); font-weight: 600; }
.banner.errore { background: var(--errore-sfondo); color: var(--errore); }
.banner a { color: inherit; text-decoration: underline; }
.codice-pc { font: 600 20px/1.3 ui-monospace, Consolas, monospace; letter-spacing: .04em; }
main { max-width: 1280px; margin: 0 auto; padding: 24px; }
.intestazione { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.azioni { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- riepilogo */
.tessere { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.tessere.compatte { margin-bottom: 12px; }
.tessere.compatte .tessera { box-shadow: none; padding: 10px 12px; }
.tessere.compatte .valore { font-size: 20px; }
.tessera { background: var(--superficie); border: 1px solid var(--bordo); border-radius: 12px; padding: 14px 16px; box-shadow: var(--ombra); }
.tessera .valore { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tessera .etichetta { color: var(--tenue); font-size: 12px; }
.filtri { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.filtri input[type=search] { max-width: 280px; }
.filtri select { max-width: 240px; }
.filtri label { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--testo); }
.filtri input[type=date] { width: auto; }

/* ---- transazioni */
tr.apribile { cursor: pointer; }
tr.apribile:hover td { background: var(--sfondo); }
tr.dettaglio-mov td { background: var(--sfondo); font-size: 13px; }

/* ---- report ed esportazione */
.esporta { display: inline-flex; align-items: center; gap: 4px; }
.esporta button { padding: 6px 10px; }
.report { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 16px; align-items: start; }
.report .largo, .report .nota-report { grid-column: 1 / -1; }
.nota-report { margin: 0 0 8px; }
table.voci td { padding: 6px 4px; }
table.voci tr.forte td { font-weight: 700; }
.quadra-ok { color: var(--ok); }
.quadra-errore { color: var(--errore); }

/* ---- notifiche, profilo, soglie */
.campanella { position: relative; display: inline-flex; color: var(--tenue); padding: 4px; border-radius: 8px; }
.campanella:hover, .campanella.attivo { color: var(--primario); }
.campanella .badge { position: absolute; top: -4px; right: -6px; }
#nome-utente { color: inherit; }
tr.nuova td { background: var(--sfondo); font-weight: 600; }
.fuori-soglia { color: var(--errore); font-weight: 600; }
table.soglie input { width: 90px; margin: 0; }
.campi-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 0 12px; }
.avviso-inline { background: var(--sfondo); border-left: 3px solid var(--errore); padding: 8px 12px; border-radius: 6px; }
ul.elenco { padding-left: 18px; margin: 6px 0 12px; }
label.in-linea { display: flex; align-items: center; gap: 8px; }
label.in-linea input[type=checkbox] { width: auto; margin: 0; }
.in-centro { text-align: center; margin-top: 14px; }
.in-centro a { font-size: 13px; }
@media (max-width: 640px) { .campi-2 { grid-template-columns: 1fr; } }
.filtri label input { width: auto; margin: 0; }

/* ---- schede casse */
.griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.scheda { display: block; background: var(--superficie); border: 1px solid var(--bordo); border-left: 4px solid var(--bordo); border-radius: 12px; padding: 14px 16px; color: var(--testo); box-shadow: var(--ombra); }
.scheda:hover { border-color: var(--tenue); }
.scheda.s-ok { border-left-color: var(--ok); }
.scheda.s-avviso { border-left-color: var(--avviso); }
.scheda.s-errore { border-left-color: var(--errore); }
.scheda.s-offline { border-left-color: var(--tenue); }
.scheda .riga { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.scheda .nome { font-weight: 600; }
.scheda .totale { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 8px; }

.stato { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.stato::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.stato.ok { color: var(--ok); background: var(--ok-sfondo); }
.stato.avviso { color: var(--avviso); background: var(--avviso-sfondo); }
.stato.errore { color: var(--errore); background: var(--errore-sfondo); }
.stato.info { color: var(--info); background: var(--info-sfondo); }
.stato.offline { color: var(--tenue); background: var(--superficie-2); }

/* ---- dettaglio */
.colonne { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pannello { background: var(--superficie); border: 1px solid var(--bordo); border-radius: 12px; padding: 16px; box-shadow: var(--ombra); margin-bottom: 16px; }
.pannello-titolo { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.pannello-titolo h2 { margin: 0; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; font-weight: 600; color: var(--tenue); padding: 6px 8px; border-bottom: 1px solid var(--bordo); }
td { padding: 7px 8px; border-bottom: 1px solid var(--bordo); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tfoot td { font-weight: 700; border-top: 1px solid var(--bordo); }
.barretta { height: 8px; border-radius: 4px; background: var(--barra-vuota); overflow: hidden; min-width: 80px; }
.barretta > span { display: block; height: 100%; background: var(--primario); border-radius: 4px; }
.barretta.alta > span { background: var(--avviso); }
.barretta.bassa > span { background: var(--errore); }
.comandi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.comandi button { text-align: left; }
.comandi button.critico { color: var(--errore); }
.unita { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.vuoto { color: var(--tenue); text-align: center; padding: 28px; }
.dati dt { color: var(--tenue); font-size: 12px; }
.dati dd { margin: 0 0 8px; }

/* ---- dialogo e avvisi */
dialog { border: 1px solid var(--bordo); border-radius: 14px; padding: 0; background: var(--superficie); color: var(--testo); width: min(520px, calc(100vw - 32px)); box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
dialog::backdrop { background: rgba(10, 15, 20, .45); }
dialog form { padding: 20px; }
dialog h2 { font-size: 17px; margin-bottom: 14px; }
dialog .piede { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.avvisi { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 50; }
.avviso { background: var(--testo); color: var(--sfondo); padding: 10px 14px; border-radius: 10px; max-width: 360px; box-shadow: var(--ombra); }
.avviso.errore { background: var(--errore); color: #fff; }

@media (max-width: 900px) {
  .colonne { grid-template-columns: 1fr; }
  .tessere { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  main { padding: 16px; }
  .barra { padding: 10px 16px; gap: 10px; flex-wrap: wrap; }
  .barra nav { order: 3; flex-basis: 100%; overflow-x: auto; }
  .comandi { grid-template-columns: 1fr; }
  .tabella-scorre { overflow-x: auto; }
}
.pannello.evidenza { border-color: var(--primario); box-shadow: 0 0 0 1px var(--primario); }
#msg-assistenza { font-family: inherit; resize: vertical; }
/* ---- negozi */
.gruppo-negozio { margin-bottom: 22px; }
.paginazione { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 12px; }
.gruppo-titolo { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--bordo); }
.gruppo-titolo h2 { margin: 0; }
.gruppo-dati { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ---- scelta del cliente (amministratore SEA, dopo l'accesso) */
#scelta-cliente { grid-template-columns: minmax(0, 480px); justify-content: center; }
.scelta-box { width: 100%; max-width: 480px; background: var(--superficie); border: 1px solid var(--bordo); border-radius: 16px; padding: 28px; box-shadow: var(--ombra); }
.scelta-box .marchio { margin-bottom: 18px; }
.scelta-box > p { margin: 0; }
.scelta-box h1 { margin: 2px 0 14px; }
.scelta-elenco { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-height: 322px; }
.scelta-elenco button { width: 100%; min-height: 58px; display: flex; align-items: center; gap: 12px; text-align: left; padding: 8px 12px; border-radius: 10px; border-left: 4px solid var(--bordo); }
.scelta-elenco button:hover, .scelta-elenco button:focus-visible { background: var(--superficie-2); border-color: var(--primario); outline: none; }
.scelta-elenco .s-ok { border-left-color: var(--ok); }
.scelta-elenco .s-avviso { border-left-color: var(--avviso); }
.scelta-elenco .s-errore { border-left-color: var(--errore); }
.scelta-elenco .s-offline { border-left-color: var(--tenue); }
.iniziali { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--info-sfondo); color: var(--info); font-weight: 700; font-size: 13px; }
.scelta-nome { flex: 1; min-width: 0; }
.scelta-nome strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scelta-pagine { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.scelta-box > .link { display: block; margin: 18px auto 0; }
.cliente-scelto { border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cliente-scelto::after { content: " \21C4"; color: var(--tenue); font-weight: 400; }
@media (max-width: 640px) { .scelta-box { padding: 20px 16px; } .scelta-elenco { min-height: 0; } }

/* ---- cruscotto del cliente (scheda Casse) */
/* Una fascia per cassa: contanti presenti e divisione riciclo / cassetta */
.banda-casse { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; margin-bottom: 24px; }
.banda { display: block; color: #fff; border-radius: 14px; padding: 18px 20px 14px;
  background: linear-gradient(120deg, #0a4f9c 0%, #0b6bcb 55%, #2a8be0 100%); box-shadow: 0 6px 18px rgba(11, 80, 160, .22); }
.banda:hover { color: #fff; filter: brightness(1.05); }
.banda-alto { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.banda-nome { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.banda-stato { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 6px; background: rgba(255, 255, 255, .16); }
.banda-stato::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #6ee7a0; }
.banda-stato.b-avviso::before { background: #ffd166; }
.banda-stato.b-errore::before { background: #ff8a80; }
.banda-stato.b-offline::before { background: #c3ccd8; }
.banda-totale { text-align: right; }
.banda-totale span { display: block; font-size: 12px; opacity: .8; }
.banda-totale strong { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.banda-barra { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .25); margin: 14px 0 10px; overflow: hidden; }
.banda-barra > span { display: block; height: 100%; background: #fff; border-radius: 3px; }
.banda-basso { display: flex; gap: 16px; font-size: 12px; align-items: center; flex-wrap: wrap; opacity: .92; }
.pallino { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
.pallino.p-ric { background: #fff; }
.pallino.p-cas { background: rgba(255, 255, 255, .35); }
.banda-apri { margin-left: auto; font-weight: 600; }

/* Voci: righe con icona su fondo tinta, nome, valore e freccia */
.sezione-titolo { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--tenue); margin: 0 0 10px; }
.voci { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; margin-bottom: 24px; }
.voce { display: flex; align-items: center; gap: 14px; background: var(--superficie); color: var(--testo); border: 1px solid var(--bordo);
  border-radius: 12px; padding: 12px 14px; box-shadow: var(--ombra); }
.voce:hover { border-color: var(--primario); color: var(--testo); }
.voce-icona { flex: none; width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; }
.voce-icona svg { width: 30px; height: 30px; display: block; }
.t-grigio { background: #eef1f5; } .t-oro { background: #fbf1da; } .t-blu { background: #e3edfc; }
.t-azzurro { background: #e2f1fb; } .t-arancio { background: #fdeadb; } .t-verde { background: #e3f5e8; }
.voce-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.voce-nome { font-size: 13px; color: var(--tenue); font-weight: 500; }
.voce-valore { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.voce-valore .stato { font-size: 13px; margin-top: 3px; }
.voce-nota { font-size: 11px; color: var(--tenue); }
.voce-freccia { font-size: 24px; color: var(--tenue); line-height: 1; }
@media (prefers-color-scheme: dark) {
  .t-grigio, .t-oro, .t-blu, .t-azzurro, .t-arancio, .t-verde { background: var(--superficie-2); }
}
.pulsante-periodo { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--bordo); background: var(--superficie); color: var(--testo); font-size: 13px; }
.pulsante-periodo.attivo { background: var(--primario); border-color: var(--primario); color: var(--primario-testo); }
/* home del cliente: un blocco per negozio */
.negozio-cliente { margin-bottom: 26px; }
.negozio-cliente h1 { margin-bottom: 12px; }
.banda.ferma { cursor: default; }
.banda.ferma:hover { filter: none; }
.t-viola { background: #eeeafc; }
/* ---- tagli disegnati (ricircolo, inventario totale, cassetta) */
.tagli-gruppo + .tagli-gruppo { margin-top: 18px; }
.tagli-titolo { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.tagli-titolo h3 { margin: 0; font-size: 15px; }
.tagli-titolo span { font-size: 13px; color: var(--tenue); }
.tagli { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 145px), 1fr)); gap: 10px; }
.taglio-scheda { border: 1px solid var(--bordo); border-radius: 12px; padding: 12px; background: var(--superficie-2); }
.taglio-scheda.vuoto-taglio { opacity: .55; }
.taglio-alto { display: flex; align-items: center; gap: 12px; }
.taglio-dati { display: flex; flex-direction: column; min-width: 0; }
.taglio-pezzi { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.taglio-pezzi small { font-size: 12px; font-weight: 500; color: var(--tenue); }
.taglio-valore { font-size: 13px; color: var(--tenue); font-variant-numeric: tabular-nums; }
.taglio-barra { height: 7px; border-radius: 4px; background: var(--barra-vuota); overflow: hidden; margin-top: 10px; }
.taglio-barra > span { display: block; height: 100%; background: var(--ok); border-radius: 4px; }
.taglio-barra.alta > span { background: #e0a100; }
.taglio-barra.bassa > span { background: var(--errore); }
.taglio-barra.doppia { background: #b9d3f2; }
.taglio-barra.doppia > span { background: var(--primario); border-radius: 4px 0 0 4px; }
.taglio-barra.grande { height: 10px; margin: 6px 0 14px; }
.taglio-nota { font-size: 11px; color: var(--tenue); margin-top: 5px; }
.pallino.p-ric-s { background: var(--primario); }
.pallino.p-cas-s { background: #b9d3f2; }
.totale-grande { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.totale-grande span { color: var(--tenue); font-size: 13px; text-transform: uppercase; letter-spacing: .5px; }
.totale-grande strong { font-size: 30px; font-variant-numeric: tabular-nums; }
.stato-totale .unita { margin: 6px 0 8px; }
/* banconota: rettangolo nel colore del taglio, con il valore */
.mini-banconota { flex: none; position: relative; width: 62px; height: 36px; border-radius: 5px; color: #fff; display: grid; place-items: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.25), inset 0 0 0 2px rgba(255,255,255,.28); overflow: hidden; }
.mini-banconota::before { content: ""; position: absolute; right: 9px; top: 0; bottom: 0; width: 7px; background: rgba(255,255,255,.35); }
.mini-banconota span { position: relative; font-weight: 800; font-size: 17px; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
.mini-banconota i { position: absolute; left: 5px; top: 2px; font-style: normal; font-size: 10px; font-weight: 700; opacity: .85; }
.b5 { background: linear-gradient(135deg, #a3a8b0, #6f757e); } .b10 { background: linear-gradient(135deg, #e8736b, #b8352c); }
.b20 { background: linear-gradient(135deg, #5f9be3, #2b63b5); } .b50 { background: linear-gradient(135deg, #f7ab52, #d06e14); }
.b100 { background: linear-gradient(135deg, #66bd6a, #2f8a3a); } .b200 { background: linear-gradient(135deg, #e8c652, #b38a12); }
.b500 { background: linear-gradient(135deg, #a77cc0, #6c3f8c); } .b-altro { background: linear-gradient(135deg, #7a8899, #4b5868); }
/* moneta: cerchio nel metallo del taglio (rame, oro nordico, bimetallica) */
.mini-moneta { flex: none; width: 40px; height: 40px; margin: 0 11px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.3), inset 0 0 0 2px rgba(255,255,255,.35); }
.mini-moneta span { font-weight: 800; font-size: 13px; line-height: 1; text-align: center; }
.mini-moneta small { font-size: 9px; font-weight: 700; }
.mini-moneta.rame { background: radial-gradient(circle at 35% 30%, #f0b089, #b0602f); color: #fff; }
.mini-moneta.oro { background: radial-gradient(circle at 35% 30%, #fbe39a, #c99a2e); color: #5a4206; }
.mini-moneta.bi1 { background: radial-gradient(circle, #d9dde3 0 52%, #e8c76a 54% 100%); color: #3b4350; }
.mini-moneta.bi2 { background: radial-gradient(circle, #e8c76a 0 52%, #d9dde3 54% 100%); color: #4d3a05; }
@media (prefers-color-scheme: dark) { .t-viola { background: var(--superficie-2); } .taglio-barra.doppia { background: #2c4a6e; } .pallino.p-cas-s { background: #2c4a6e; } }
@media (max-width: 400px) {
  .taglio-scheda { padding: 10px; }
  .taglio-alto { gap: 8px; }
  .mini-banconota { width: 52px; height: 31px; }
  .mini-banconota span { font-size: 15px; }
  .mini-moneta { margin: 0 6px; width: 38px; height: 38px; }
  .taglio-pezzi { font-size: 18px; }
}
.taglio-nota.riparto { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.taglio-nota.riparto span { white-space: nowrap; }
@media (min-width: 641px) { .tagli { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }
/* ---- dettagli tecnici della macchina (pagina della cassa): stesse schede delle voci, senza freccia */
.tec-titolo-sezione { margin-top: 8px; }
.voce.tec { cursor: default; align-items: flex-start; }
.voce.tec:hover { border-color: var(--bordo); }
.voce.tec .voce-valore .stato { font-size: 13px; }
.t-rosso { background: #fbe7e7; }
.tec-mono, .tec-versione strong { font-family: ui-monospace, Consolas, monospace; }
.tec-versioni { grid-row: span 2; }
.tec-versione { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--bordo); font-size: 13px; }
.tec-versione:last-of-type { border-bottom: 0; }
.tec-versione span { color: var(--tenue); font-weight: 600; letter-spacing: .3px; white-space: nowrap; }
.tec-versione strong { text-align: right; overflow-wrap: anywhere; font-weight: 600; }
@media (prefers-color-scheme: dark) { .t-rosso { background: var(--superficie-2); } }
/* ---- transazioni su telefono: Ora, Tipo e Netto; Entrato e Uscito nel dettaglio della riga */
/* Nel dettaglio di una transazione: importo entrato in verde, uscito in rosso */
.importi-mov { margin-bottom: 4px; }
.importo-entrato { color: var(--ok); }
.importo-uscito { color: var(--errore); }
@media (max-width: 640px) {
  table.movimenti .col-eu { display: none; }
  table.movimenti td, table.movimenti th { padding-left: 6px; padding-right: 6px; }
  table.movimenti td:first-child { white-space: nowrap; }
}

/* ---------------------------------------------------------------- area amministrativa (dentro il GestionaleWeb) */
/* solo clienti, utenti e impostazioni: le voci sul funzionamento delle casse e le notifiche non ci sono */
html.amministrazione #menu a[data-vista="casse"], html.amministrazione #menu a[data-vista="transazioni"],
html.amministrazione #menu a[data-vista="chiusura"], html.amministrazione #menu a[data-vista="allarmi"],
html.amministrazione #menu a[data-vista="licenza"], html.amministrazione .campanella { display: none !important; }
html.amministrazione .barra { padding: 8px 18px; gap: 18px; }
html.amministrazione .marchio::after { content: 'Amministrazione'; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--primario); border: 1px solid var(--primario); border-radius: 6px; padding: 2px 6px; }
html.amministrazione .barra nav a { font-weight: 600; }
/* Clienti, Utenti, Impostazioni: pillole chiare con icona (stessa forma del pulsante Monitoraggio Casse, che resta l'unico pieno) */
.barra nav a .icona-voce { display: none; }
html.amministrazione .barra nav { align-items: center; gap: 8px; }
html.amministrazione .barra nav a:not(.pulsante-monitoraggio) { display: inline-flex; align-items: center; gap: 7px; padding: 5px 14px; border-radius: 999px;
  border: 1.5px solid var(--bordo); background: var(--superficie); color: var(--testo); transition: border-color .12s, background .12s, color .12s; }
html.amministrazione .barra nav a:not(.pulsante-monitoraggio) .icona-voce { display: block; color: var(--primario); }
html.amministrazione .barra nav a:not(.pulsante-monitoraggio):hover { border-color: var(--primario); color: var(--primario); }
html.amministrazione .barra nav a:not(.pulsante-monitoraggio).attivo { background: #e6f0fb; border-color: var(--primario); color: var(--primario); }
/* Monitoraggio Casse staccato dalle altre voci da una linea verticale */
html.amministrazione .barra nav a.pulsante-monitoraggio { position: relative; margin-left: 22px; }
html.amministrazione .barra nav a.pulsante-monitoraggio::before { content: ""; position: absolute; left: -16px; top: 15%; bottom: 15%; width: 1.5px; background: var(--bordo); }
@media (prefers-color-scheme: dark) { html.amministrazione .barra nav a:not(.pulsante-monitoraggio).attivo { background: var(--superficie-2); } }
/* "Portale completo" accanto all'utente: solo dentro il gestionale (apre il portale intero in una nuova scheda) */
.utente .portale-completo { display: none; }
html.amministrazione .utente .portale-completo { display: inline; white-space: nowrap; font-weight: 600; padding-right: 12px; margin-right: 2px;
  border-right: 1px solid var(--bordo); }
button.grande { font-size: 15px; padding: 10px 18px; }
.passi-cliente { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; padding: 0; margin: 0 0 18px; }
.passi-cliente li { display: flex; gap: 10px; align-items: flex-start; background: var(--superficie); border: 1px solid var(--bordo); border-radius: 12px; padding: 12px 14px; }
.passi-cliente li strong { display: block; }
.passi-cliente .passo-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
  background: var(--superficie-2); color: var(--tenue); }
.passi-cliente li.fatto { border-color: var(--ok, #16a34a); }
.passi-cliente li.fatto .passo-n { background: var(--ok, #16a34a); color: #fff; }
.amm-vuoto { max-width: 560px; margin: 40px auto; text-align: center; }
/* pulsante "Monitoraggio Casse": solo nell'area amministrativa, dopo Impostazioni, staccato dalle altre voci */
.barra nav a.pulsante-monitoraggio { display: none; }
html.amministrazione .barra nav a.pulsante-monitoraggio { display: inline-flex; align-items: center; gap: 7px; margin-left: 10px;
  padding: 6px 14px; border-radius: 999px; color: #fff; font-weight: 700;
  background: linear-gradient(135deg, var(--primario), #1aa6b7); box-shadow: 0 2px 8px rgba(11, 107, 203, .35); transition: transform .12s, box-shadow .12s; }
html.amministrazione .barra nav a.pulsante-monitoraggio:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(11, 107, 203, .45); color: #fff; }
html.amministrazione .barra nav a.pulsante-monitoraggio.attivo { background: linear-gradient(135deg, #084f98, #12808e); color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55), 0 2px 8px rgba(11, 107, 203, .35); }
/* ---- app del cliente: pulsanti Home e Report in basso, stesso stile del pulsante "Monitoraggio Casse" */
.schede-cliente { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  background: var(--superficie); border-top: 1px solid var(--bordo); box-shadow: 0 -2px 10px rgba(16, 24, 40, .06);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
.schede-cliente[hidden] { display: none; }
.schede-cliente a { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 16px; border-radius: 999px;
  color: #fff; font-size: 16px; font-weight: 700; opacity: .72;
  background: linear-gradient(135deg, var(--primario), #1aa6b7); box-shadow: 0 2px 8px rgba(11, 107, 203, .35); transition: transform .12s, box-shadow .12s, opacity .12s; }
.schede-cliente a svg { width: 22px; height: 22px; }
.schede-cliente a:hover { color: #fff; opacity: 1; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(11, 107, 203, .45); }
/* quello della pagina aperta e' pieno, piu' scuro e con il bordo chiaro */
.schede-cliente a.attivo { opacity: 1; background: linear-gradient(135deg, #084f98, #12808e);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55), 0 2px 8px rgba(11, 107, 203, .35); }
body.con-schede main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (min-width: 700px) { .schede-cliente { grid-template-columns: repeat(2, minmax(0, 260px)); justify-content: center; } }
/* report di fine giornata */
.report-filtri { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 24px; }
.report-giorno { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.report-giorno input[type=date] { width: auto; margin: 0; }
.report-filtri select { width: auto; margin: 0; }
.pulsante-periodo.disattivo { opacity: .4; pointer-events: none; }
.report-periodo { margin: 0 0 16px; }
.report-tagli summary { cursor: pointer; }
.report-tagli[open] summary { margin-bottom: 10px; }
/* ---- report di fine giornata: estratto conto per cassa */
.eod-elenco { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 16px; align-items: start; }
.eod { background: var(--superficie); border: 1px solid var(--bordo); border-radius: 16px; box-shadow: var(--ombra); overflow: hidden; }
.eod-testa { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: #fff;
  background: linear-gradient(120deg, #0a4f9c 0%, #0b6bcb 55%, #2a8be0 100%); }
.eod-icona { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .95); }
.eod-icona svg { width: 26px; height: 26px; }
.eod-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.eod-nome strong { font-size: 17px; }
.eod-nome small { font-size: 12px; opacity: .85; }
.eod-op { font-size: 12px; opacity: .85; white-space: nowrap; }
.eod-corpo { padding: 6px 16px 16px; }
.eod-riga { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; }
.eod-segno { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; line-height: 1; }
.eod-segno.entra { background: var(--ok-sfondo); color: var(--ok); }
.eod-segno.esce { background: var(--errore-sfondo); color: var(--errore); }
.eod-voce { display: flex; flex-direction: column; font-size: 14px; }
.eod-voce small { color: var(--tenue); font-size: 12px; }
.eod-importo { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 15px; text-align: right; white-space: nowrap; }
.eod-importo.entra { color: var(--ok); }
.eod-importo.esce { color: var(--errore); }
.eod-estremo { border-bottom: 1px solid var(--bordo); }
.eod-estremo .eod-importo { font-size: 18px; }
.eod-estremo:last-of-type { border-bottom: 0; border-top: 1px solid var(--bordo); }
.eod-interno { opacity: .7; }
.eod-titolo { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--primario); margin: 12px 0 2px;
  padding-left: 8px; border-left: 3px solid var(--primario); }
.eod-netto { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 6px 0; padding: 10px 14px; border-radius: 12px;
  background: #e6f0fb; border: 1.5px solid var(--primario); color: var(--primario); font-weight: 700; }
.eod-netto strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.eod-separa { height: 1px; background: var(--bordo); margin: 10px 0 2px; }
.eod-quadra { margin-top: 12px; padding: 12px 14px; border-radius: 12px; text-align: center; border: 1.5px solid; }
.eod-quadra.ok { background: var(--ok-sfondo); border-color: var(--ok); }
.eod-quadra.ko { background: var(--errore-sfondo); border-color: var(--errore); }
.eod-quadra-titolo { font-weight: 700; font-size: 14px; }
.eod-formula { font-size: 11px; color: var(--tenue); margin: 4px 0; }
.eod-confronto { font-size: 13px; font-variant-numeric: tabular-nums; }
.eod-esito { font-size: 17px; font-weight: 800; margin-top: 6px; }
.eod-quadra.ok .eod-esito { color: var(--ok); }
.eod-quadra.ko .eod-esito { color: var(--errore); }
.eod-tagli { margin-top: 10px; }
.eod-tagli summary { cursor: pointer; color: var(--primario); font-weight: 600; font-size: 13px; text-align: center; padding: 6px; }
@media (prefers-color-scheme: dark) { .eod-netto { background: var(--superficie-2); } }
/* schede compresse: si vede la testa blu, toccandola si apre l'estratto */
summary.eod-testa { cursor: pointer; list-style: none; }
summary.eod-testa::-webkit-details-marker { display: none; }
.eod-riassunto { display: flex; flex-direction: column; align-items: flex-end; text-align: right; white-space: nowrap; }
.eod-riassunto strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.eod-riassunto small { font-size: 12px; opacity: .9; }
.eod-apri { flex: none; font-size: 26px; line-height: 1; transition: transform .15s; margin-left: 2px; }
details.eod[open] .eod-apri { transform: rotate(90deg); }
details.eod:not([open]) { box-shadow: 0 4px 14px rgba(11, 80, 160, .18); }
/* la quadratura totale del cliente ha la testa verde-blu, come il pulsante attivo */
.eod-totale .eod-testa { background: linear-gradient(135deg, #084f98, #12808e); }
.eod-sezione { margin-top: 22px; }

/* ---------------------------------------------------------------- tema CashControl (proposta C "acciaio e rosso")
   Fasce e pulsanti blu acciaio, pulsante attivo rosso, totali in grafite. Nella testata il logo CashControl, che
   contiene gia' il nome: il testo accanto resta solo per i lettori di schermo. */
:root { --primario: #24588a; --sfondo: #f3f6f9; }
@media (prefers-color-scheme: dark) { :root { --primario: #6fa3d6; --sfondo: #0f141a; } }
.marchio, .marchio.grande { font-size: 0; }
.logo { flex-shrink: 0; width: 92px; height: 48px; border-radius: 6px; background: #fff url("logo-cashcontrol.png") center/contain no-repeat; }
/* Schermate di accesso: logo centrato e, nel pannello del gestionale, la scritta Amministrazione sotto */
.marchio.grande { flex-direction: column; justify-content: center; align-items: center; gap: 10px; }
.marchio.grande .logo { width: 240px; max-width: 100%; height: 125px; }
@media (prefers-color-scheme: dark) { .logo { box-shadow: 0 0 0 4px #fff; } }
.banda, .eod-testa { background: linear-gradient(120deg, #163a5c 0%, #24588a 55%, #3b78b0 100%); box-shadow: 0 6px 18px rgba(0,0,0,.22); }
.eod-totale .eod-testa { background: linear-gradient(135deg, #1b2433, #3d4a5e); }
details.eod:not([open]) { box-shadow: 0 4px 14px rgba(0,0,0,.16); }
.eod-netto { background: #e8f0f8; border-color: #163a5c; color: #163a5c; }
.eod-titolo { color: var(--primario); border-left-color: var(--primario); }
.schede-cliente a { opacity: 1; background: linear-gradient(135deg, #24588a, #4a86bd); box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.schede-cliente a.attivo { background: linear-gradient(135deg, #a30b14, #e3262e); box-shadow: inset 0 0 0 2px rgba(255,255,255,.5), 0 2px 8px rgba(163, 11, 20, .35); }

/* Dettaglio di una transazione: un taglio per riga con il disegno della banconota o della moneta.
   Piu' visibile del testo, ma i numeri restano piu' piccoli degli importi Entrato/Uscito sopra. */
.pezzi-mov { margin-top: 10px; max-width: 420px; }
.pezzi-titolo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); margin-bottom: 4px; }
.pezzo-riga { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--bordo); }
.pezzo-riga:last-child { border-bottom: 0; }
.pezzo-riga .mini-banconota { width: 46px; height: 27px; border-radius: 4px; }
.pezzo-riga .mini-banconota::before { right: 7px; width: 5px; }
.pezzo-riga .mini-banconota span { font-size: 13px; }
.pezzo-riga .mini-banconota i { font-size: 8px; left: 4px; top: 1px; }
.pezzo-riga .mini-moneta { width: 30px; height: 30px; margin: 0 8px; }
.pezzo-riga .mini-moneta span { font-size: 10px; }
.pezzo-riga .mini-moneta small { font-size: 7px; }
.pezzo-n { flex: 1; font-size: 13px; color: var(--testo); white-space: nowrap; }
.pezzo-n b { color: var(--primario); font-size: 14px; }
.pezzo-val { font-size: 12px; color: var(--tenue); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Logo SEACassa sotto il logo CashControl (schermate di accesso e scelta del cliente) e nella sezione licenze */
.logo-seacassa { background-image: url("logo-seacassa.png"); }
.marchio.grande .logo-seacassa { width: 180px; height: 94px; margin-top: -4px; }
/* Pagina Licenze SEACassa (aperta dal gestionale con ?seacassa=1: logo SEACassa nella testata, niente menu di CashControl) */
.solo-seacassa .barra .logo { background-image: url("logo-seacassa.png"); }
/* ...e nelle schermate di accesso solo il logo SEACassa, grande come quello di CashControl */
.solo-seacassa .marchio.grande .logo:not(.logo-seacassa) { display: none; }
.solo-seacassa .marchio.grande .logo-seacassa { width: 240px; height: 125px; margin-top: 0; }
.solo-seacassa #menu, .solo-seacassa .campanella, .solo-seacassa .portale-completo, .solo-seacassa #cliente-scelto { display: none !important; }
.seacassa-testa { align-items: center; }
.seacassa-testa > div:first-child { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; }
.seacassa-testa h1 { margin: 0; }
.seacassa-testa .tenue { grid-column: 2; }
.logo-seacassa-titolo { grid-row: span 2; width: 104px; height: 54px; border-radius: 6px; background: #fff url("logo-seacassa.png") center/contain no-repeat; box-shadow: 0 0 0 1px var(--bordo); }
.riquadri-sc { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 16px 0; }
.riquadri-sc > div { background: var(--superficie); border: 1px solid var(--bordo); border-radius: 10px; padding: 12px 16px; display: flex; flex-direction: column; }
.riquadri-sc strong { font-size: 26px; color: var(--primario); }
.riquadri-sc span { font-size: 12px; color: var(--tenue); }
.riquadri-sc .avviso strong { color: var(--avviso); }
.cerca-sc { width: 100%; margin-bottom: 16px; }
.pannello.seacassa .pannello-titolo { align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.pannello.seacassa .pannello-titolo .azioni { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.codice-grande { font: 600 22px/1.3 ui-monospace, Consolas, monospace; letter-spacing: .08em; text-align: center; }
.risultati-gestionale { list-style: none; margin: -4px 0 8px; padding: 4px; max-height: 220px; overflow-y: auto; border: 1px solid var(--bordo); border-radius: 8px; }
.risultati-gestionale li button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; padding: 6px 8px; border: 0; background: none; border-radius: 6px; cursor: pointer; }
.risultati-gestionale li button:hover { background: var(--superficie-2); }
.risultati-gestionale li.tenue { padding: 6px 8px; }
.prodotto-sc { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--primario); background: var(--superficie-2); border: 1px solid var(--bordo); vertical-align: 1px; }
.prodotto-sc.mysea { color: var(--info); background: var(--info-sfondo); border-color: transparent; }

/* Pulsante d'azione nello stile delle voci della cassa (Manutenzione > RESET GLORY) */
button.voce { width: 100%; text-align: left; font: inherit; cursor: pointer; }
button.voce-azione .voce-valore { color: #c62f2f; letter-spacing: .02em; }
button.voce:disabled { cursor: default; opacity: .6; }
button.voce:disabled:hover { border-color: var(--bordo); }
.voce-nota .stato { font-size: 11px; margin-left: 4px; padding: 0 6px; }