/* ------------------------------------------------------------------------------------------------------
   H343 — LA GRAFICA DI SETTORE (3/11/2026, docs/ideas/2026-11-03-il-settore-bellezza.md § 1).
   La tavolozza fissa dei servizi: sette colori con un nome (rosa, verde, viola, ambra, terra, azzurro, grigio). Una
   categoria di servizi sceglie una di queste chiavi, mai un codice: qui ogni chiave ha il suo colore nel tema chiaro e in
   quello scuro, scelti per stare su --scheda con un contrasto di almeno 3:1 (un pallino e un filo sono grafica, non
   testo, e il nome della categoria è sempre scritto accanto). Lo stesso colore vale in agenda, in cassa e nei numeri.
   ------------------------------------------------------------------------------------------------------ */

:root {
  --servizio-rosa: #c2416b;
  --servizio-verde: #2e7d4f;
  --servizio-viola: #6d4bc4;
  --servizio-ambra: #a86500;
  --servizio-terra: #8a5a3c;
  --servizio-azzurro: #1f6fae;
  --servizio-grigio: #66748a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --servizio-rosa: #f27da3;
    --servizio-verde: #6fcf97;
    --servizio-viola: #ab8df2;
    --servizio-ambra: #f0b44c;
    --servizio-terra: #d1a27e;
    --servizio-azzurro: #6fb3ea;
    --servizio-grigio: #9aa8bd;
  }
}

/* LA CHIAVE DEL COLORE: ogni elemento con c-<colore> porta il suo colore in --colore-servizio. */
.c-rosa { --colore-servizio: var(--servizio-rosa); }
.c-verde { --colore-servizio: var(--servizio-verde); }
.c-viola { --colore-servizio: var(--servizio-viola); }
.c-ambra { --colore-servizio: var(--servizio-ambra); }
.c-terra { --colore-servizio: var(--servizio-terra); }
.c-azzurro { --colore-servizio: var(--servizio-azzurro); }
.c-grigio { --colore-servizio: var(--servizio-grigio); }

/* IL PALLINO: il colore della categoria accanto al suo nome. */
.pallino {
  display: inline-block;
  flex: none;
  width: .75rem;
  height: .75rem;
  margin-right: .4rem;
  border-radius: 50%;
  vertical-align: baseline;
  background: var(--colore-servizio, var(--servizio-grigio));
  box-shadow: 0 0 0 1px var(--bordo);
}

/* IL SERVIZIO NELL'ELENCO: un filo del colore della categoria a sinistra, come il blocco dell'agenda. */
.elenco li.trattamento {
  border-left: 4px solid var(--colore-servizio, var(--servizio-grigio));
  padding-left: .65rem;
}
.trattamento .durata { font-variant-numeric: tabular-nums; }

/* LE SCELTE DEL MODULO DEL SERVIZIO: chi lo fa, cosa occupa. */
fieldset.scelte {
  margin: .9rem 0;
  padding: .75rem .9rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
}
fieldset.scelte legend { padding: 0 .35rem; font-weight: 600; }
.scelte-a-spunta {
  display: grid;
  gap: .35rem .9rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
}

/* UNA RIGA DI CAMPI CHE SI CAMBIA SUL POSTO (categorie, risorse): si affianca sul largo, va a capo sul telefono. */
form.in-riga {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .5rem .75rem;
  flex: 1;
  min-width: 0;
}
form.in-riga label { flex: 1 1 9rem; min-width: 0; margin: 0; }
form.in-riga label.interruttore { flex: 0 0 auto; }
form.in-riga .pallino { align-self: center; }

/* UNA RISORSA NON ATTIVA si legge ancora, ma più piano. */
.elenco li.spenta { opacity: .7; }

/* ------------------------------------------------------------------------------------------------------
   H344 — L'AGENDA A COLONNE DEL CENTRO (3/11/2026, docs/ideas/2026-11-03-il-settore-bellezza.md § 2.1).
   Una griglia CSS senza script: la prima colonna è l'ora, poi una colonna per operatrice (o per cabina); la prima riga
   sono le teste, poi una riga ogni 15 minuti. Ogni elemento dice dove sta con tre variabili scritte dal server
   (--col, --riga, --fasce): il blocco di un appuntamento è alto quanto la sua durata e ha il colore della categoria.
   ------------------------------------------------------------------------------------------------------ */

.agenda-del-giorno nav.giorni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
}
.agenda-del-giorno nav.giorni h2 { margin: 0; flex: 1 1 12rem; text-align: center; text-transform: capitalize; }
.agenda-del-giorno .viste a.scelta,
.agenda-del-giorno .altre-colonne a.scelta { font-weight: 700; text-decoration: none; }

.griglia-agenda {
  display: grid;
  grid-template-columns: 3.5rem repeat(var(--colonne, 1), minmax(9rem, 1fr));
  grid-template-rows: auto repeat(var(--fasce, 48), minmax(1.5rem, auto));
  margin: .75rem 0;
  overflow-x: auto;
  border-top: 1px solid var(--bordo);
}
.griglia-agenda > * {
  grid-column: var(--col);
  grid-row: var(--riga) / span var(--fasce-elemento, 1);
  min-width: 0;
}
.griglia-agenda > .blocco { grid-row: var(--riga) / span var(--fasce, 1); }

.griglia-agenda .testa-colonna {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .35rem;
  background: var(--scheda);
  border-bottom: 1px solid var(--bordo);
  font-weight: 600;
}
.griglia-agenda .testa-colonna.assente { opacity: .6; }
.griglia-agenda .testa-colonna .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* IL CERCHIO AL POSTO DELLA FOTO: le iniziali sul colore della persona. */
.cerchio {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--colore-servizio, var(--servizio-grigio));
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.griglia-agenda .ora {
  font-size: .75rem;
  color: var(--tenue);
  font-variant-numeric: tabular-nums;
  padding-right: .35rem;
  text-align: right;
}
.griglia-agenda .libero,
.griglia-agenda .vuoto {
  border-left: 1px solid var(--bordo);
  border-top: 1px dotted var(--bordo);
}
.griglia-agenda .piena { border-top-style: solid; }
/* FUORI TURNO (H353, 3/11/2026): la persona a quell'ora non lavora; la griglia lo fa vedere, e non offre «libero». */
.griglia-agenda .vuoto.fuori-turno {
  background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--bordo) 45%, transparent) 6px 7px);
}
.griglia-agenda .testa-colonna .turno { font-size: .7rem; font-weight: 400; color: var(--tenue); white-space: nowrap; }
.griglia-agenda .libero { display: block; text-decoration: none; }
.griglia-agenda .libero:hover,
.griglia-agenda .libero:focus-visible { background: color-mix(in srgb, var(--accento3) 12%, transparent); }
.griglia-agenda .libero:hover::after { content: "+"; padding-left: .4rem; color: var(--tenue); }

/* IL BLOCCO DELL'APPUNTAMENTO: un filo del colore della categoria, un fondo appena tinto, il testo sempre leggibile. */
.griglia-agenda .blocco {
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  margin: 1px 2px;
  padding: .25rem .4rem;
  overflow: hidden;
  border-left: 4px solid var(--colore-servizio, var(--servizio-grigio));
  border-radius: 6px;
  background: color-mix(in srgb, var(--colore-servizio, var(--servizio-grigio)) 14%, var(--scheda));
  color: var(--testo);
  font-size: .82rem;
  line-height: 1.25;
  text-decoration: none;
}
.griglia-agenda .blocco .quando { font-variant-numeric: tabular-nums; color: var(--tenue); }
.griglia-agenda .blocco .dove { color: var(--tenue); }
.griglia-agenda .blocco .avviso { float: right; font-weight: 700; color: var(--meno); }
.griglia-agenda .blocco .stato { font-weight: 600; }
.griglia-agenda .blocco.fatto { opacity: .65; }
.griglia-agenda .blocco.arrivata { box-shadow: inset 0 0 0 2px var(--colore-servizio, var(--servizio-grigio)); }

/* LA POSA IN TRATTEGGIO (H361, 4/11/2026): dove la persona è libera durante il colore. Il tratto non prende i clic (passano agli
   spazi «libero» che ha sotto, per infilare un'altra cliente) e sta sotto i blocchi: la cliente infilata si legge sopra. */
.griglia-agenda .posa {
  z-index: 0;
  margin: 1px 2px;
  padding: .15rem .4rem;
  overflow: hidden;
  border: 2px dashed var(--colore-servizio, var(--servizio-grigio));
  border-radius: 6px;
  background: repeating-linear-gradient(135deg, transparent 0 7px,
    color-mix(in srgb, var(--colore-servizio, var(--servizio-grigio)) 12%, transparent) 7px 9px);
  color: var(--tenue);
  font-size: .75rem;
  pointer-events: none;
}
.griglia-agenda .blocco.seguito { border-top-left-radius: 0; border-top-right-radius: 0; }

.agenda-del-giorno .occupazione { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; }
.agenda-del-giorno .occupazione .tenue { color: var(--tenue); }

.solo-telefono { display: none; }

/* SUL TELEFONO UNA COLONNA SOLA: quella principale (la persona collegata, o quella scelta), e sopra i nomi delle altre. */
@media (max-width: 40rem) {
  .solo-telefono { display: block; }
  .griglia-agenda { grid-template-columns: 3rem 1fr; overflow-x: visible; }
  .griglia-agenda > .altra { display: none; }
  .griglia-agenda > .principale { --col: 2 !important; }
}

/* ------------------------------------------------------------------------------------------------------
   H405a — L'AGENDA A RISORSE PER OGNI MESTIERE (8/11/2026). La griglia di sopra (griglia-agenda), con le colonne del settore:
   i tecnici, i furgoni, le camere, i tavoli, i mezzi. In più: la fascia di sfondo della reperibilità (sotto i blocchi, non
   prende i clic), il ⚠ della sovrapposizione di un membro della squadra, la riga del giorno e la settimana in tabella.
   ------------------------------------------------------------------------------------------------------ */

.griglia-agenda .fascia-sfondo {
  z-index: 0;
  margin: 0 1px;
  padding: .1rem .35rem;
  border-left: 3px solid var(--servizio-viola);
  background: repeating-linear-gradient(45deg, transparent 0 8px, color-mix(in srgb, var(--servizio-viola) 10%, transparent) 8px 10px);
  color: var(--tenue);
  font-size: .72rem;
  pointer-events: none;
}
.griglia-agenda .blocco.in-conflitto { box-shadow: inset 0 0 0 2px var(--meno); }
.griglia-agenda .blocco .squadra { font-size: .75rem; color: var(--tenue); }
.agenda-a-risorse .in-giornata { margin: .5rem 0; }

.settimana-a-risorse { overflow-x: auto; margin: .75rem 0; }
.settimana-a-risorse table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.settimana-a-risorse th, .settimana-a-risorse td { border: 1px solid var(--bordo); padding: .3rem; vertical-align: top; text-align: left; }
.settimana-a-risorse th[scope="row"] { width: 5.5rem; text-transform: capitalize; }
.settimana-a-risorse tr.oggi th[scope="row"] { color: var(--marchio, var(--testo)); }
.settimana-a-risorse td.assente {
  background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--bordo) 45%, transparent) 6px 7px);
}
.settimana-a-risorse .voce {
  display: block;
  margin: 0 0 .2rem;
  padding: .15rem .3rem;
  border-left: 3px solid var(--colore-servizio, var(--servizio-grigio));
  border-radius: 4px;
  background: color-mix(in srgb, var(--colore-servizio, var(--servizio-grigio)) 12%, var(--scheda));
  color: var(--testo);
  font-size: .8rem;
  text-decoration: none;
}
.settimana-a-risorse .voce.fatto { opacity: .65; }
.settimana-a-risorse .voce.in-conflitto { box-shadow: inset 0 0 0 2px var(--meno); }
.settimana-a-risorse .fascia-detta { display: block; font-size: .72rem; color: var(--tenue); }
.settimana-a-risorse .aggiungi { display: block; text-align: center; color: var(--tenue); text-decoration: none; }

/* SUL TELEFONO, ANCHE LA SETTIMANA HA UNA COLONNA SOLA: quella scelta, o la propria. */
@media (max-width: 40rem) {
  .settimana-a-risorse .altra { display: none; }
  .agenda-a-risorse .in-giornata > li.altra { display: none; }
}

/* ------------------------------------------------------------------------------------------------------
   H405b — SPOSTARE CON UN GESTO (8/11/2026). Il «⋯» di ogni blocco (in alto a destra, nella cella del blocco), i tocchi sopra
   la griglia, lo stato «sposta» (gli spazi liberi diventano pulsanti) e, con agenda.js, il blocco in viaggio e il suo approdo.
   ------------------------------------------------------------------------------------------------------ */

.griglia-agenda .tocca {
  z-index: 2;
  justify-self: end;
  align-self: start;
  margin: 2px 4px;
  padding: 0 .35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--scheda) 85%, transparent);
  color: var(--tenue);
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}
.griglia-agenda .tocca:hover, .griglia-agenda .tocca:focus-visible { color: var(--testo); background: var(--scheda); }
.settimana-a-risorse .tocca-voce { float: right; margin-top: -1.35rem; padding: 0 .3rem; color: var(--tenue); text-decoration: none; font-weight: 700; }
.agenda-a-risorse .tocchi {
  margin: .75rem 0;
  padding: .75rem 1rem;
  border: 1px solid var(--bordo);
  border-left: 4px solid var(--marchio);
  border-radius: var(--raggio, 10px);
  background: color-mix(in srgb, var(--marchio) 4%, var(--scheda));
}
.agenda-a-risorse .tocchi h2 { margin: 0 0 .25rem; text-transform: none; text-align: left; }
.agenda-a-risorse .tocchi h3 { margin: .75rem 0 0; font-size: .9rem; }
.agenda-a-risorse .tocchi .azioni { margin-top: .5rem; align-items: center; }
.agenda-a-risorse .tocchi .messaggio-preparato { margin: .5rem 0; padding: .5rem .75rem; border-left: 3px solid var(--bordo); white-space: pre-line; }
.agenda-a-risorse button.gesto {
  padding: .45rem .9rem;
  border: 1px solid color-mix(in srgb, var(--marchio) 25%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--marchio) 12%, transparent);
  color: var(--marchio);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.agenda-a-risorse button.gesto.secondaria { background: transparent; border-color: var(--bordo); color: var(--testo); }
.agenda-a-risorse .dopo-lo-spostamento { align-items: center; margin: .5rem 0; }
.agenda-a-risorse .sposta-in-corso { margin: .5rem 0; padding: .5rem .75rem; border: 1px dashed var(--marchio); border-radius: 8px; }
/* GLI SPAZI DELLO STATO «SPOSTA»: lo stesso posto di «libero», ma un pulsante del modulo dello spostamento. */
.griglia-agenda button.libero.qui {
  width: 100%;
  min-height: 1.5rem;
  margin: 0;
  padding: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--marchio) 6%, transparent);
  box-shadow: none;
  cursor: pointer;
}
.griglia-agenda button.libero.qui:hover, .griglia-agenda button.libero.qui:focus-visible { background: color-mix(in srgb, var(--marchio) 22%, transparent); }
.settimana-a-risorse button.qui {
  display: block;
  width: 100%;
  padding: .15rem .3rem;
  border: 1px dashed var(--marchio);
  border-radius: 4px;
  background: transparent;
  color: var(--marchio);
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
}
.griglia-agenda .blocco.in-viaggio, .settimana-a-risorse .voce.in-viaggio { opacity: .45; outline: 2px dashed var(--marchio); }
.griglia-agenda .blocco[draggable="true"], .settimana-a-risorse .voce[draggable="true"] { cursor: grab; }
.griglia-agenda .approdo {
  z-index: 3;
  margin: 1px 2px;
  border: 2px dashed var(--marchio);
  border-radius: 6px;
  background: color-mix(in srgb, var(--marchio) 10%, transparent);
  pointer-events: none;
}
.settimana-a-risorse td.bersaglio { outline: 2px dashed var(--marchio); outline-offset: -2px; }

/* ------------------------------------------------------------------------------------------------------
   H346 — LA CASSA A TESSERE DEL BANCO (3/11/2026, docs/ideas/2026-11-03-il-settore-bellezza.md § 2.3).
   Il tablet della reception è il primo schermo: le tessere e i pulsanti di pagamento sono alti almeno 48 px, e ogni
   tessera ha il colore della sua categoria (lo stesso dell'agenda) come fascia a sinistra e sfondo tenue. Sul PC il conto
   sta a destra delle tessere; sul telefono sotto. Senza script: ogni tessera è il pulsante di un modulo.
   ------------------------------------------------------------------------------------------------------ */

.cassa {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  grid-template-areas: "cliente" "tessere" "conto";
}
/* LA RIGA IN ALTO (grafica B, onda 3): il codice o l'EAN e il cliente; prima la sezione del cliente era l'area da sola. */
.cassa .cassa-in-alto { grid-area: cliente; min-width: 0; display: grid; gap: 1rem; align-items: start; }
.cassa .cassa-in-alto > * { margin: 0; min-width: 0; }
.cassa .cassa-tessere { grid-area: tessere; min-width: 0; }
.cassa .cassa-conto { grid-area: conto; align-self: start; }
/* IL LATO DEL CONTO (H356, 4/11/2026): il conto e, sotto, «Oggi al banco». Sul telefono è un blocco nell'area del conto, e le
   vendite di oggi vengono subito dopo il conto, come quando stavano sotto la cassa. */
.cassa .cassa-lato { grid-area: conto; min-width: 0; }

@media (min-width: 56rem) {
  .cassa {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
    grid-template-areas: "cliente cliente" "tessere conto";
  }
  .cassa .cassa-conto { position: sticky; top: 1rem; }
  /* TRA 56 E 64REM IL TABLET TIENE LA CASSA DI H346 (H356, 4/11/2026): il lato si scioglie, il conto torna una cella della
     griglia (fermo accanto alle tessere) e «Oggi al banco» prende la riga intera sotto, dove stava prima. */
  .cassa > .cassa-lato { display: contents; }
  .cassa > .cassa-lato > :not(.cassa-conto) { grid-column: 1 / -1; }
}

.cassa .chi-paga { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; margin: 0 0 .5rem; font-size: 1.1rem; }
.cassa h2.categoria { display: flex; align-items: center; margin: 1rem 0 .5rem; font-size: 1rem; }

/* LE TESSERE DI ALTEZZA FISSA (grafica B, onda 3, 12/11/2026; B-Cassa): visto dal vivo a 2560 px, nelle colonne della lavagna
   le tessere erano larghe 143 px e alte da 89 a 550 px, con il nome lungo su dieci righe. Ora ogni tessera è alta 104 px e
   larga almeno 150, quante ne stanno in riga; il nome sta su due righe al più (il resto con i puntini, intero al passaggio
   del mouse), il prezzo in basso, grande. Le categorie non sono più colonne: una sotto l'altra, a tutta larghezza. */
.cassa .tessere {
  display: grid;
  gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.375rem), 1fr));
  grid-auto-rows: 6.5rem;
}
.cassa form.tessera { margin: 0; min-width: 0; }
.cassa form.tessera button {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .35rem;
  width: 100%;
  height: 6.5rem;
  min-height: 0;
  overflow: hidden;
  padding: .6rem .75rem;
  border: 1px solid var(--bordo);
  border-left: 6px solid var(--colore-servizio, var(--servizio-grigio));
  border-radius: var(--raggio);
  background: color-mix(in srgb, var(--colore-servizio, var(--servizio-grigio)) 12%, var(--scheda));
  color: var(--testo);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
}
.cassa form.tessera button:hover,
.cassa form.tessera button:focus-visible {
  background: color-mix(in srgb, var(--colore-servizio, var(--servizio-grigio)) 22%, var(--scheda));
  outline: 2px solid var(--colore-servizio, var(--servizio-grigio));
  outline-offset: 1px;
}
.cassa .tessera .nome {
  font-size: var(--fs-s); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.cassa .tessera .dettagli { display: flex; align-items: baseline; gap: .5rem; font-variant-numeric: tabular-nums; }
.cassa .tessera .durata { color: var(--tenue); font-size: var(--fs-xs); }
.cassa .tessera .prezzo { margin-left: auto; font-size: var(--fs-l); font-weight: 700; white-space: nowrap; }
/* LA TESSERA GIÀ NEL CONTO: il bordo del marchio tutt'intorno, il fondo velato e «× quantità» accanto al prezzo. */
.cassa form.tessera.nel-conto button {
  border: 2px solid var(--marchio);
  border-left: 6px solid var(--colore-servizio, var(--marchio));
  background: var(--zeta-velo);
}
.cassa .tessera .quanti-nel-conto {
  flex: none; padding: 0 .45rem; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700; line-height: 1.5; color: #fff; background: var(--marchio);
}
/* LE PILLOLE DELLE CATEGORIE: i mattoni (.pillole) le disegnano; qui solo lo spazio. */
.cassa .categorie-della-cassa { margin: 0 0 .25rem; }

/* I TASTI GRANDI DEL TABLET: almeno 48 px per ogni cosa che si tocca alla cassa. */
.cassa button,
.cassa .tasto-cliente,
.cassa input,
.cassa select { min-height: 48px; }
.cassa .spunta { display: flex; align-items: center; gap: .5rem; min-height: 48px; }
.cassa .spunta input { min-height: auto; width: 1.4rem; height: 1.4rem; }

.cassa .righe-del-conto li { flex-wrap: wrap; }
.cassa .cambia-riga { flex-basis: 100%; }
.cassa .cambia-riga summary { cursor: pointer; color: var(--tenue); min-height: 2rem; }
.cassa .totale-del-conto dd { font-variant-numeric: tabular-nums; }
.cassa .campi-del-pagamento { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); }
.cassa .pulsanti-di-pagamento { display: grid; gap: .6rem; grid-template-columns: 1fr 1fr; margin: .75rem 0; }
.cassa .pulsanti-di-pagamento button { min-height: 56px; font-size: 1.1rem; font-weight: 700; }
.cassa .pulsanti-di-pagamento button:only-child { grid-column: 1 / -1; }

/* IL CONTO (grafica B, onda 3; B-Cassa): il totale grande a destra, i modi di pagamento come pulsanti da scegliere, «Batti lo
   scontrino» il primario evidente (il giallo del marchio, con l'importo), «Svuota il conto» testo rosso (i mattoni). */
.cassa .totale-del-conto {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .15rem .75rem;
  margin: .75rem 0; padding: .75rem 0 0; border-top: 1px solid var(--bordo);
}
.cassa .totale-del-conto dt { margin: 0; color: var(--tenue); font-size: var(--fs-s); }
.cassa .totale-del-conto dd { margin: 0; text-align: right; font-size: var(--fs-l); }
.cassa .totale-del-conto dd:first-of-type { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
fieldset.modi-di-pagamento { border: 0; padding: 0; min-width: 0; }
.cassa .modo-di-pagamento {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 48px;
  border: 1.5px solid var(--marchio); border-radius: var(--r); background: var(--scheda); color: var(--marchio);
  font-size: var(--fs-m); font-weight: 600; cursor: pointer;
}
.cassa .modo-di-pagamento > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cassa .modo-di-pagamento:has(> input:checked) { color: #fff; background: var(--marchio); }
.cassa .modo-di-pagamento:has(> input:focus-visible) { outline: 2px solid var(--marchio); outline-offset: 2px; }
main div.cassa form.paga button.batti-lo-scontrino,
main div.cassa form.paga button.batti-lo-scontrino:hover {
  display: flex; width: 100%; height: 3.25rem; margin: .25rem 0 .5rem;
  font-size: var(--fs-l); font-weight: 700; color: var(--su-accento); background: var(--accento); border-color: var(--accento);
}
main div.cassa form.paga button.batti-lo-scontrino:hover { filter: brightness(.95); }
.cassa .batti-lo-scontrino .se-fattura { display: none; }
.cassa form.paga:has(input[name="fattura"]:checked) .batti-lo-scontrino .se-scontrino { display: none; }
.cassa form.paga:has(input[name="fattura"]:checked) .batti-lo-scontrino .se-fattura { display: inline; }

/* LA CASSA SUL PC (H355, 4/11/2026): LE TESSERE A SINISTRA IN TANTE COLONNE, IL CONTO FISSO A DESTRA. Dentro la colonna di
   46rem le tessere stavano in una o due colonne e il conto accanto era piccolo. Da 64rem la cassa prende 90rem: la cliente
   sopra le tessere, le tessere di ogni categoria in una griglia da cinque o sei per riga, e il conto a destra per tutta
   l'altezza, fermo sotto la testata mentre si scorrono le tessere. La seconda riga è «1fr»: un conto lungo non allarga la
   riga della cliente e non lascia un buco sopra le tessere.
   DA H356 (4/11/2026) IL MARKUP C'È: «griglia-pc» su div.cassa, le categorie in sezioni (la lavagna), il conto e «Oggi al
   banco» nel lato. */
@media (min-width: 64rem) {
  main:has(> div.cassa) { max-width: var(--larghezza-pagina, 90rem); padding-inline: var(--sp-7, 1.5rem); }
  div.cassa {
    column-gap: 1.25rem;
    row-gap: 1rem;
    grid-template-columns: minmax(0, 1fr) minmax(24rem, 30rem);
    grid-template-rows: auto 1fr;
    grid-template-areas: "cliente conto" "tessere conto";
  }
  /* IL CODICE E IL CLIENTE SU UNA RIGA (onda 3): il codice prende due parti, il cliente una; sotto i 64rem uno sotto l'altro. */
  div.cassa > .cassa-in-alto { grid-template-columns: minmax(0, 3fr) minmax(18rem, 2fr); }
  div.cassa > .cassa-in-alto > form.cassa-codice {
    padding: var(--sp-3) var(--sp-4); background: var(--scheda); border: 1px solid var(--bordo); border-radius: var(--r-l);
  }
  div.cassa > .cassa-in-alto > form.cassa-codice input[type="search"] { border: 1.5px solid var(--marchio); }
  /* IL LATO FERMO SOTTO LA TESTATA (H356, 4/11/2026): prima era fermo il solo conto; ora la colonna intera, il conto in cima e
     le vendite di oggi sotto. Se il lato è più alto dello schermo scorre da sé, e il resto della cassa non si muove. */
  div.cassa > .cassa-lato {
    display: block;
    align-self: start;
    position: sticky;
    top: calc(var(--altezza-testata, 3.9rem) + .75rem);
    max-height: calc(100vh - var(--altezza-testata, 3.9rem) - 1.5rem);
    overflow-y: auto;
  }
  div.cassa > .cassa-lato > .cassa-conto { position: static; margin: 0 0 1rem; }
  div.cassa > .cassa-lato > .oggi-al-banco { margin: 0; }
  div.cassa .tessere { gap: .7rem; }
  /* IL PACCHETTO E IL BUONO, sotto le tessere, uno accanto all'altro. */
  div.cassa .cassa-tessere { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; align-content: start; }
  div.cassa .cassa-tessere > :not(details) { grid-column: 1 / -1; }
  div.cassa .cassa-tessere > details.scheda { margin: 1rem 0 0; }

  /* LE CATEGORIE UNA SOTTO L'ALTRA (grafica B, onda 3): erano colonne di una lavagna da 17rem, e nelle colonne le tessere
     restavano larghe 143 px con il nome su dieci righe. Ora ogni categoria è una fascia a tutta larghezza, con le sue tessere
     quante ne stanno (dodici a 2560 px); le pillole in alto portano alla categoria. In testa un filo del suo colore. */
  div.cassa .lavagna {
    display: grid;
    gap: 1rem;
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
  }
  div.cassa .categoria-di-tessere {
    min-width: 0;
    padding: .7rem .75rem .8rem;
    background: color-mix(in srgb, var(--scheda) 55%, transparent);
    border: 1px solid var(--bordo);
    border-top: 3px solid var(--colore-servizio, var(--servizio-grigio));
    border-radius: var(--raggio);
  }
  div.cassa .categoria-di-tessere > h2.categoria { margin-top: 0; }
  div.cassa .categoria-di-tessere { scroll-margin-top: calc(var(--altezza-testata, 3.9rem) + .75rem); }
}

/* LA VENDITA: lo scontrino in attesa si vede subito, con un filo del colore dell'accento. */
.scheda.scontrino.in-attesa { border-left: 6px solid var(--accento); }

/* IL BUONO REGALO DA STAMPARE: un foglio pulito, il codice grande. */
.buono-regalo {
  max-width: 34rem;
  margin: 1rem auto;
  padding: 2rem 1.5rem;
  border: 2px dashed var(--bordo);
  border-radius: var(--raggio-grande);
  background: var(--scheda);
  text-align: center;
}
.buono-regalo .azienda { margin: 0; color: var(--tenue); letter-spacing: .04em; text-transform: uppercase; }
.buono-regalo h1 { margin: .25rem 0 1rem; }
.buono-regalo .valore { margin: .5rem 0; font-size: 2.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.buono-regalo .messaggio { font-style: italic; }
.buono-regalo .codice { margin: 1.25rem 0 .5rem; font-size: 1.6rem; font-weight: 700; letter-spacing: .12em; font-family: ui-monospace, monospace; }

/* SOLO LA PAGINA DEL BUONO (C12f, 11/11/2026): la regola nascondeva tutto su OGNI pagina, perché questo foglio lo caricano
   tutte: stampare un elenco dal browser dava un foglio bianco. */
@media print {
  body:has(.buono-regalo) * { visibility: hidden; }
  .buono-regalo, .buono-regalo * { visibility: visible !important; }
  .buono-regalo { position: absolute; inset: 0 auto auto 0; width: 100%; border-color: #000; color: #000; background: #fff; }
  .non-in-stampa, .non-stampa { display: none; }
}

/* IL PLANNING DELLE CAMERE (H377, simulazione n. 4, 6/11/2026): colonne dei giorni tutte uguali, la notte occupata colorata come
   una barra con il nome nel primo giorno; il soggiorno dei portali con un tratto diverso. Vale anche sul telefono, dove la tabella
   scorre in orizzontale. */
table.planning { table-layout: fixed; width: 100%; border-collapse: separate; border-spacing: 0 .3rem; }
table.planning th[scope="col"] { font-size: .8rem; font-weight: 600; text-align: center; white-space: nowrap; }
table.planning th[scope="col"]:first-child, table.planning th[scope="row"] { width: 9rem; text-align: left; }
table.planning td { height: 2.1rem; padding: 0 .35rem; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.planning td.occupata { background: color-mix(in srgb, var(--accento3) 22%, transparent); }
table.planning td.occupata.dal-portale { background: color-mix(in srgb, var(--accento2) 26%, transparent); }
table.planning td.occupata a { font-weight: 600; text-decoration: none; }
/* IL CALENDARIO DELLA FLOTTA (H385): più corse nello stesso giorno vanno a capo; il mezzo fermo si vede rosso. */
table.planning.flotta td { height: auto; white-space: normal; vertical-align: top; }
table.planning td.fermo { background: color-mix(in srgb, var(--allarme, #c0392b) 18%, transparent); }