/* ------------------------------------------------------------------------------------------------------
   H355 — LA GRAFICA DA PC (4/11/2026). Giuseppe: «Concentriamoci molto sull'ottimizzare e sfruttare la grafica da PC. Usare
   più card di visualizzazione e non impilarle in verticale come se sono da telefono».

   Il telefono resta com'è: tutto quello che c'è qui sotto vale da 64rem in su (un portatile, uno schermo da ufficio), tranne
   due righe che nascondono sul telefono ciò che serve solo al PC (le intestazioni delle tabelle). Si carica per ultimo, dopo
   i fogli delle onde, e usa solo i gettoni di app.css e della tavolozza di settore.css: il chiaro e lo scuro vengono da soli.
   Niente script e niente immagini.

   IL VOCABOLARIO È CORTO, e le pagine lo scrivono nel markup:
   - «griglia-pc» sul contenitore della pagina: la colonna di lettura si allarga (90rem, 120rem con la disposizione larga);
   - «a-carte»: le schede della pagina diventano carte affiancate in una griglia; ciò che non è una carta (la barra dei filtri,
     una nota, un esito) prende tutta la riga; «intera» e «larga» allargano una carta a tutta la riga o a due posti;
   - «a-colonne» con «colonna-dati», «colonna-centro», «colonna-lato»: le schede (cliente, appuntamento, intervento, fattura,
     persona) in tre colonne, a sinistra i dati, al centro il contenuto, a destra le azioni e lo storico. Ogni colonna è un
     tratto CONTIGUO della pagina: sul telefono si leggono una dopo l'altra, quindi l'ordine di sempre non cambia;
   - «tabella-pc» su un elenco: le righe diventano una tabella con le colonne allineate (sottogriglia), le etichette che sul
     telefono stanno strette a destra vanno nelle loro colonne, e l'intestazione resta ferma sotto la testata;
   - da H356 (4/11/2026): «in-breve» su una colonna dei dati fatta di righe sciolte (la scheda della cliente) la disegna come
     una carta; «intera» vale anche nel centro a carte; «indice-delle-impostazioni» è l'indice fermo a sinistra delle
     impostazioni. La cassa (div.cassa.griglia-pc) ha il suo disegno in settore.css.
   - da H408b (8/11/2026), UNA GRAFICA SOLA: tutte le schede di dettaglio e tutti i moduli «nuovo» usano «a-colonne» (il
     modulo al centro, a destra l'aiuto, ciò che Zeta sa già e cosa succede dopo). Nel markup le colonne stanno nell'ordine del
     telefono: una colonna di lato può venire prima del centro (le azioni sopra i movimenti di una scadenza), «order» la mette
     a destra. Le classi nuove:
       · «table.tabella-pc»: una tabella vera (thead/tbody) disegnata come l'elenco-tabella: intestazione ferma sotto la
         testata, righe a strisce tenui, la riga sotto il mouse, le cifre a destra con «numero» sulla cella (th o td); sul
         telefono, e nelle colonne strette (dati, lato), la tabella scorre di lato dentro la sua carta. «planning» (il
         calendario della flotta) ha il suo disegno in settore.css e qui non si tocca;
       · «colonne-1» … «colonne-6» su un «ul.elenco.tabella-pc»: quante colonne dopo il nome, al posto di style="--colonne-pc: N";
       · «colonne-del-modulo» su un modulo che attraversa due colonne della pagina (il rapportino RT): il modulo non fa scatola
         (display: contents) e le sue «colonna-…» sono colonne della pagina;
       · fuori dal PC: «.scheda.linguetta» si posiziona per il taglio giallo di voci.css; «firma-salvata» è l'immagine di una
         firma già data (fondo bianco anche col tema scuro); «voce-rt» è la voce della check-list del rapportino RT (era un
         blocco <style> della pagina).

   UN POSTO, UN SIGNIFICATO (docs/ideas/2026-11-01-la-home-centro-di-comando.md, regola 1): le carte cambiano disposizione,
   non significato. Nessuna carta cambia nome, nessuna azione cambia posto dentro la sua carta, e l'ordine di lettura (da
   sinistra a destra, dall'alto in basso) è quello della pagina sul telefono.
   ------------------------------------------------------------------------------------------------------ */

/* L'INTESTAZIONE DI UNA TABELLA DA PC NON SI VEDE SUL TELEFONO (H355, 4/11/2026): lì ogni riga dice da sé cosa porta, con le
   sue etichette, e una riga di titoli di colonna sopra un elenco a una colonna sarebbe solo rumore. */
.elenco > li.intestazione { display: none; }
/* L'INDICE DELLE IMPOSTAZIONI È DEL PC (H356, 4/11/2026): sul telefono la pagina resta la colonna di prima, senza un elenco di
   venticinque collegamenti in testa da scorrere prima di arrivare ai dati dell'azienda. */
.indice-delle-impostazioni { display: none; }

/* ---- H408b — LE VOCI NELLE SCHEDE, FUORI DAL PC (8/11/2026) ---------------------------------------------------------------
   LA LINGUETTA SU UNA CARTA: il taglio giallo di voci.css è un ::after in alto a destra, e la carta deve fargli da riferimento;
   il titolo non ci finisce sotto. */
.scheda.linguetta { position: relative; }
.scheda.linguetta > h2:first-child { padding-right: 1.6rem; }
/* LA FIRMA GIÀ DATA (H395c) su fondo bianco: i tratti sono neri anche col tema scuro. Era uno stile scritto nella pagina. */
.firma-salvata { display: block; max-width: 300px; height: auto; background: #fff; border: 1px solid var(--bordo); border-radius: 6px; }
/* LA VOCE DELLA CHECK-LIST DEL RAPPORTINO RT (H396b): sì, no, non applicabile in fila. Era un blocco <style> della pagina. */
.voce-rt { border: 1px solid var(--bordo); border-radius: 6px; margin: .4rem 0; padding: .4rem .6rem; }
.voce-rt legend { font-size: .85rem; }
.voce-rt label { display: inline-block; margin-right: 1rem; }

/* ---- H408b — LE COLONNE DI UN ELENCO-TABELLA SENZA STILE NELLA PAGINA ------------------------------------------------------- */
.elenco.tabella-pc.colonne-1 { --colonne-pc: 1; }
.elenco.tabella-pc.colonne-2 { --colonne-pc: 2; }
.elenco.tabella-pc.colonne-3 { --colonne-pc: 3; }
.elenco.tabella-pc.colonne-4 { --colonne-pc: 4; }
.elenco.tabella-pc.colonne-5 { --colonne-pc: 5; }
.elenco.tabella-pc.colonne-6 { --colonne-pc: 6; }

/* ---- H408b — LE TABELLE VERE («table.tabella-pc») -----------------------------------------------------------------------
   TRENTACINQUE TABELLE PORTAVANO LA CLASSE E NON SUCCEDEVA NIENTE (8/11/2026): i registri dei verticali (viaggi, flotta,
   rifiuti, HACCP, produzione…), le garanzie di /tutti-i-resi, le corse in agenda. Le disegna come l'elenco-tabella: le
   celle con il loro respiro, l'intestazione in maiuscoletto tenue, un filo fra le righe, le cifre tabulari e, con «numero»
   sulla cella, a destra. SUL TELEFONO LA TABELLA SCORRE DI LATO DENTRO LA SUA CARTA: le celle non vanno a capo (tranne la
   prima, che è il nome), e la pagina non si allarga. Il calendario della flotta («planning») ha il suo disegno. */
table.tabella-pc:not(.planning) {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: lining-nums tabular-nums;
}
table.tabella-pc:not(.planning) :is(th, td) {
  padding: .45rem .6rem;
  text-align: left;
  vertical-align: baseline;
  white-space: nowrap;
}
table.tabella-pc:not(.planning) :is(th, td):first-child { white-space: normal; min-width: 9rem; }
table.tabella-pc:not(.planning) thead th {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tenue);
  background: var(--scheda);
  border-bottom: 1px solid var(--bordo);
}
/* LE TABELLE A DUE COLONNE (voce e valore, come il conto di un viaggio): la voce è un'etichetta tenue. */
table.tabella-pc:not(.planning) tbody th { font-weight: 600; color: var(--tenue); }
table.tabella-pc:not(.planning) tbody tr + tr > * { border-top: 1px solid color-mix(in srgb, var(--bordo) 70%, transparent); }
table.tabella-pc:not(.planning) :is(th, td).numero { text-align: right; white-space: nowrap; }

@media (min-width: 64rem) {
  :root { --altezza-testata: 3.9rem; }

  /* ---- LA COLONNA PRINCIPALE SI ALLARGA ----------------------------------------------------------------------------------
     DA 46REM A 90REM SULLE PAGINE CHE HANNO LA GRIGLIA (H355, 4/11/2026): a 1568 px metà dello schermo restava vuota. 90rem
     (1440 px) tiene le carte leggibili anche su uno schermo grande; la disposizione larga delle impostazioni (H270) toglie
     il limite fino a 120rem, per chi lavora su un monitor da 27 pollici. */
  /* La pagina di prenotazione online ha il suo «main» (prenota.css), fatto per il telefono della cliente: qui non si tocca. */
  /* GRAFICA B, ONDA 1 (12/11/2026): fino a 150rem (2400 px) con 32 px di margine ai lati; «comoda» nelle impostazioni la riporta
     a 90rem (1440 px), com'era. La disposizione larga di H270 è assorbita da questa scelta. */
  main:not(.prenota-pagina) { padding: var(--sp-5) var(--sp-7); }
  main:has(.griglia-pc) { max-width: var(--larghezza-pagina); }

  /* LE PAGINE SENZA GRIGLIA (H355, 4/11/2026): le altre 150 schermate non sono state riscritte. Con una scheda sola restano
     una colonna di lettura un po' più larga (56rem); con due o più, le schede vanno su due colonne come faceva solo la
     disposizione larga di H270. Le tabelle e l'agenda prendono tutta la riga. Chi ha scelto la disposizione larga tiene
     quella di H270 (app.css), che su queste pagine già fa lo stesso a 78rem. */
  /* GRAFICA B, ONDA 1 (12/11/2026): con due o più schede la pagina arriva alla larghezza scelta (150rem, o 90rem «comoda») e le
     schede si affiancano quante ne stanno, almeno 28rem l'una (prima due colonne fisse in 80rem). Una scheda sola resta una
     colonna di lettura di 56rem: un modulo largo 2400 px non si legge. «larga» (H270) non esclude più niente: è assorbita. */
  main:not(.prenota-pagina):not(:has(.griglia-pc, .anello-della-z, .home, > div.cassa, .buono-regalo)) { max-width: 56rem; }
  main:not(.prenota-pagina):not(:has(.griglia-pc, .anello-della-z, .home, > div.cassa, .buono-regalo)):has(> section.scheda ~ section.scheda) {
    max-width: var(--larghezza-pagina);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
    column-gap: 1.25rem;
    align-items: start;
  }
  main:not(.prenota-pagina):not(:has(.griglia-pc, .anello-della-z, .home, > div.cassa, .buono-regalo)):has(> section.scheda ~ section.scheda) > :not(section.scheda),
  main:not(.prenota-pagina):not(:has(.griglia-pc, .anello-della-z, .home, > div.cassa, .buono-regalo)):has(> section.scheda ~ section.scheda) > section.scheda:has(table, .griglia-agenda, .tabella-pc) {
    grid-column: 1 / -1;
  }

  /* I TESTI LUNGHI IN UNA COLONNA DI LETTURA (H355, 4/11/2026): una carta larga non deve dare righe di 200 caratteri. Le note
     e le spiegazioni si fermano a circa 75 caratteri, anche quando la carta è più larga. */
  .griglia-pc p.nota, .griglia-pc p.vuoto, .griglia-pc p.negato, .griglia-pc p.fatto, main > p.nota { max-width: 75ch; }

  /* ---- LE CARTE AFFIANCATE («a-carte») -----------------------------------------------------------------------------------
     UNA GRIGLIA CHE RIEMPIE LA RIGA (H355, 4/11/2026): ogni carta almeno 22rem, quante ne stanno; a 1568 px sono tre. Una
     pagina con due carte le mette a metà, con una sola la allarga. Ciò che non è una carta prende la riga intera: la barra
     dei filtri sopra, le note sotto, l'esito di un'azione in cima. */
  .griglia-pc.a-carte {
    display: grid;
    gap: 1.25rem;
    align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--carta-minima, 22rem)), 1fr));
  }
  .griglia-pc.a-carte > * { min-width: 0; margin-top: 0; margin-bottom: 0; }
  .griglia-pc.a-carte > :not(section, .scheda, details) { grid-column: 1 / -1; }
  .griglia-pc.a-carte > .intera,
  .griglia-pc.a-carte.prima-intera > section:first-child { grid-column: 1 / -1; }
  .griglia-pc.a-carte > .larga { grid-column: span 2; }
  /* UN ELENCO LUNGO ALLARGA LA SUA CARTA: dodici righe in un terzo di schermo diventano una colonna da scorrere. */
  .griglia-pc.a-carte > section.scheda:has(> ul.elenco > li:nth-child(12)) { grid-column: span 2; }
  /* I GRAFICI, LE MATRICI E L'AGENDA A COLONNE prendono la riga intera; un elenco-tabella no, sta nella sua carta
     (da incassare e da pagare, nello scadenzario, si leggono affiancati). */
  .griglia-pc.a-carte > section.scheda:has(table, .griglia-agenda) { grid-column: 1 / -1; }

  /* ---- LE TRE COLONNE DELLE SCHEDE («a-colonne») -------------------------------------------------------------------------
     DATI A SINISTRA, CONTENUTO AL CENTRO, AZIONI E STORICO A DESTRA (H355, 4/11/2026). Tre colonne che si riempiono
     dall'alto, ognuna per conto suo: una carta lunga al centro non lascia buchi a sinistra, come farebbe una griglia a righe.
     Una colonna vuota sparisce e le altre si allargano. */
  .griglia-pc.a-colonne { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 1.25rem; }
  .griglia-pc.a-colonne > * { min-width: 0; }
  /* CIÒ CHE NON È UNA COLONNA (l'esito di un'azione, un avviso in testa, «non per il tuo ruolo») prende una riga intera,
     sopra le colonne: le colonne hanno «order» 1, 2 e 3, il resto resta a 0. */
  /* SENZA LARGHEZZA MASSIMA (visto nel browser l'11/11/2026): un paragrafo ha una larghezza massima di lettura, e con quella
     l'esito non riempiva la riga: le tre colonne gli si mettevano accanto, strette in metà pagina, su ogni scheda dopo un'azione. */
  .griglia-pc.a-colonne > :not(.colonna-dati, .colonna-centro, .colonna-lato) { flex: 1 0 100%; max-width: none; }
  .griglia-pc.a-colonne > .colonna-dati { order: 1; flex: 1 1 0; }
  .griglia-pc.a-colonne > .colonna-centro { order: 2; flex: 1.6 1 0; }
  .griglia-pc.a-colonne > .colonna-lato { order: 3; flex: 1 1 0; }
  .griglia-pc.a-colonne > :is(.colonna-dati, .colonna-centro, .colonna-lato):not(:has(> *)) { display: none; }
  /* SENZA CENTRO, IL LATO DIVENTA UNA GRIGLIA DI CARTE (Da fare senza decisioni, il personale senza persone): una colonna
     sola larga quanto la pagina, con carte corte una sotto l'altra, sarebbe di nuovo il telefono. */
  .griglia-pc.a-colonne:not(:has(> .colonna-centro > *, > .colonna-dati > *)) > .colonna-lato {
    display: grid;
    gap: 1.25rem;
    align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  }
  .griglia-pc.a-colonne:not(:has(> .colonna-centro > *, > .colonna-dati > *)) > .colonna-lato > * { margin: 0; min-width: 0; }
  .griglia-pc.a-colonne:not(:has(> .colonna-centro > *, > .colonna-dati > *)) > .colonna-lato > :not(section, .scheda, details) { grid-column: 1 / -1; }
  /* I DATI DA SOLI (una scheda nuova, ancora senza referenti né sedi) restano una colonna di lettura: un modulo largo
     90rem ha campi da 80rem, che non si leggono. */
  .griglia-pc.a-colonne:not(:has(> .colonna-centro > *, > .colonna-lato > *)) > .colonna-dati { flex: 0 1 56rem; }
  /* UN MODULO CHE ATTRAVERSA DUE COLONNE (H408b, il rapportino RT): non fa scatola, e le sue colonne sono della pagina. */
  .griglia-pc.a-colonne > .colonne-del-modulo { display: contents; }
  .griglia-pc.a-colonne > .colonne-del-modulo > * { min-width: 0; }
  .griglia-pc.a-colonne > .colonne-del-modulo > .colonna-dati { order: 1; flex: 1 1 0; }
  .griglia-pc.a-colonne > .colonne-del-modulo > .colonna-centro { order: 2; flex: 1.6 1 0; }
  .griglia-pc.a-colonne > .colonne-del-modulo > .colonna-lato { order: 3; flex: 1 1 0; }
  /* Nelle colonne strette tre campi in fila non stanno: due, e il terzo va a capo. */
  .griglia-pc.a-colonne > .colonna-dati .terna,
  .griglia-pc.a-colonne > .colonna-lato .terna { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* LE CARTE DEL CENTRO IN DUE COLONNE QUANDO SONO TANTE E CORTE (fido, come paga, prezzi, conto): «centro-a-carte». */
  .griglia-pc.a-colonne > .colonna-centro.centro-a-carte {
    display: grid;
    gap: 1.25rem;
    align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  }
  .griglia-pc.a-colonne > .colonna-centro.centro-a-carte > * { margin: 0; min-width: 0; }
  .griglia-pc.a-colonne > .colonna-centro.centro-a-carte > :not(section, .scheda, details) { grid-column: 1 / -1; }
  /* UNA CARTA DEL CENTRO CHE HA DENTRO ALTRE CARTE (la numerazione delle impostazioni, una per serie) prende la riga (H356). */
  .griglia-pc.a-colonne > .colonna-centro.centro-a-carte > .intera { grid-column: 1 / -1; }

  /* ---- LE ANCORE NON FINISCONO SOTTO LA TESTATA -----------------------------------------------------------------------------
     UNA SEZIONE RAGGIUNTA DA «#…» SI FERMA SOTTO LA TESTATA FERMA (H356, 4/11/2026): l'indice delle impostazioni e i ritorni
     delle rotte (/impostazioni#posta, /clienti/cliente…#rende) portavano il titolo della sezione dietro la testata. */
  .griglia-pc :is(section, h2, h3)[id] { scroll-margin-top: calc(var(--altezza-testata) + .75rem); }

  /* ---- LA PERSONA IN BREVE («in-breve») ------------------------------------------------------------------------------------
     LA COLONNA DEI DATI SENZA UNA SCHEDA SUA DIVENTA UNA CARTA (H356, 4/11/2026): nella scheda della cliente età, contatti, la
     fascia ⚠, fototipo e consensi sono righe sciolte sotto il nome; sul PC stanno in una carta a sinistra, come i dati delle
     altre schede, invece di righe larghe quanto la pagina. Sul telefono restano righe. */
  .griglia-pc.a-colonne > .colonna-dati.in-breve {
    margin-bottom: 1rem;
    padding: 1rem 1.1rem;
    background: var(--vetro);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-grande);
    box-shadow: var(--ombra);
  }
  .griglia-pc.a-colonne > .colonna-dati.in-breve > :first-child { margin-top: 0; }
  .griglia-pc.a-colonne > .colonna-dati.in-breve > :last-child { margin-bottom: 0; }
  .griglia-pc.a-colonne > .colonna-dati.in-breve .tipo { display: inline-block; margin: .15rem .25rem .15rem 0; }

  /* ---- LE IMPOSTAZIONI: L'INDICE FERMO A SINISTRA -------------------------------------------------------------------------
     UN INDICE PER ARGOMENTO, FERMO SOTTO LA TESTATA (H356, 4/11/2026): stretto (15rem) perché sono solo nomi, e le sezioni a
     destra in carte affiancate (centro-a-carte), tre per riga a 1568 px. Se l'indice è più alto dello schermo scorre da sé. */
  .griglia-pc.a-colonne > .indice-delle-impostazioni {
    display: block;
    flex: 0 0 15rem;
    position: sticky;
    top: calc(var(--altezza-testata) + .75rem);
    max-height: calc(100vh - var(--altezza-testata) - 1.5rem);
    overflow-y: auto;
    padding: .85rem .6rem 1rem;
    background: var(--vetro);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-grande);
    box-shadow: var(--ombra);
  }
  .indice-delle-impostazioni h3 { margin: .9rem .45rem .3rem; font-size: .72rem; }
  .indice-delle-impostazioni h3:first-child { margin-top: 0; }
  .indice-delle-impostazioni ul { list-style: none; margin: 0; padding: 0; }
  .indice-delle-impostazioni a {
    display: block;
    padding: .28rem .45rem;
    border-radius: var(--raggio);
    color: var(--testo);
    font-size: .88rem;
    line-height: 1.3;
    text-decoration: none;
  }
  .indice-delle-impostazioni a:hover,
  .indice-delle-impostazioni a:focus-visible { color: var(--marchio); background: color-mix(in srgb, var(--marchio) 8%, transparent); }
  /* LA FRECCIA DICE CHE SI CAMBIA PAGINA (i conti, i magazzini, gli utenti): le altre voci restano qui. */
  .indice-delle-impostazioni a.altra-pagina::after { content: " →"; color: var(--tenue); }
  /* LA NUMERAZIONE: le carte delle serie affiancate dentro la sua carta; i titoli dei gruppi e le note prendono la riga. */
  .griglia-pc section.numerazione {
    display: grid;
    gap: 0 1rem;
    align-items: start;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  }
  .griglia-pc section.numerazione > :not(div.scheda) { grid-column: 1 / -1; }
  .griglia-pc section.numerazione > div.scheda { min-width: 0; }

  /* ---- LA BARRA DEI FILTRI -------------------------------------------------------------------------------------------------
     LA RICERCA E I FILTRI IN UNA BARRA ORIZZONTALE SOPRA L'ELENCO (H355, 4/11/2026): il campo prende lo spazio che resta,
     le scelte e il pulsante stanno in fila. Fuori da una scheda la barra ha il suo vetro, così si legge come un comando. */
  .griglia-pc form.cerca { flex-wrap: nowrap; align-items: center; }
  .griglia-pc form.cerca input[type="search"] { flex: 1 1 18rem; }
  .griglia-pc form.cerca select { flex: 0 1 auto; min-width: 9rem; }
  .griglia-pc > form.cerca {
    margin: 0;
    padding: .6rem .75rem;
    background: var(--vetro);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-grande);
    box-shadow: var(--ombra);
  }
  .griglia-pc > form.cerca select,
  .griglia-pc > form.cerca input {
    font: inherit;
    color: var(--testo);
    background: var(--scheda);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: .5rem .6rem;
  }
  .griglia-pc > form.cerca button {
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--marchio), var(--marchio-scuro));
    border: 0;
    border-radius: var(--raggio);
    padding: .55rem 1rem;
    cursor: pointer;
  }

  /* ---- GLI ELENCHI COME TABELLE («tabella-pc») ------------------------------------------------------------------------------
     LE COLONNE ALLINEATE DA UNA RIGA ALL'ALTRA (H355, 4/11/2026): l'elenco è una griglia, ogni riga ne prende le colonne
     (subgrid), e le etichette che sul telefono stanno strette in «quanto» vanno ognuna nella sua colonna (col-2 … col-6).
     La prima colonna è il nome, con le sue etichette accanto, e prende lo spazio che resta. Il markup resta un elenco:
     sul telefono non cambia niente. */
  /* H408b: il nome prende al massimo 14rem di minimo, ma non più del 40% della carta: in una carta stretta (tre carte
     affiancate) due colonne di cifre e date stavano fuori dal bordo. */
  .elenco.tabella-pc {
    display: grid;
    column-gap: 1.25rem;
    grid-template-columns: minmax(min(14rem, 40%), 1fr) repeat(var(--colonne-pc, 3), auto);
  }
  .elenco.tabella-pc > li {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: baseline;
    padding: .45rem .5rem;
  }
  .elenco.tabella-pc > li > .chi { grid-column: 1; min-width: 0; }
  .elenco.tabella-pc > li > .quanto { display: contents; }
  .elenco.tabella-pc .col-2 { grid-column: 2; }
  .elenco.tabella-pc .col-3 { grid-column: 3; }
  .elenco.tabella-pc .col-4 { grid-column: 4; }
  .elenco.tabella-pc .col-5 { grid-column: 5; }
  .elenco.tabella-pc .col-6 { grid-column: 6; }
  .elenco.tabella-pc > li > .quanto > *,
  .elenco.tabella-pc > li > .quanto > .tipo { justify-self: start; margin-left: 0; overflow-wrap: anywhere; }
  /* GLI IMPORTI A DESTRA E SU UNA RIGA, come in una tabella di conti: le cifre si leggono in colonna. */
  .elenco.tabella-pc > li > .quanto > .a-destra,
  .elenco.tabella-pc > li.intestazione > .a-destra { justify-self: end; text-align: right; white-space: nowrap; }
  /* LE RIGHE A STRISCE TENUI: su una riga lunga l'occhio non perde la riga. */
  .elenco.tabella-pc > li:not(.intestazione):nth-child(even) { background: color-mix(in srgb, var(--testo) 2.5%, transparent); }
  .elenco.tabella-pc > li:not(.intestazione):hover { background: color-mix(in srgb, var(--marchio) 6%, transparent); }
  /* L'INTESTAZIONE FERMA SOTTO LA TESTATA mentre si scorre: si sa sempre cosa dice ogni colonna. */
  .elenco.tabella-pc > li.intestazione {
    display: grid;
    position: sticky;
    top: var(--altezza-testata);
    z-index: 2;
    padding: .5rem;
    background: var(--scheda);
    border-bottom: 1px solid var(--bordo);
    border-radius: var(--raggio) var(--raggio) 0 0;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--tenue);
  }
  .elenco.tabella-pc > li.intestazione:hover { background: var(--scheda); }
  .elenco.tabella-pc > li.intestazione > :first-child { grid-column: 1; }

  /* ---- LE TABELLE VERE SUL PC («table.tabella-pc», H408b) -------------------------------------------------------------------
     LARGHE QUANTO LA CARTA, CON L'INTESTAZIONE FERMA SOTTO LA TESTATA (8/11/2026): sul PC la tabella torna una tabella
     (niente scorrimento di lato, che fermerebbe l'intestazione dentro la tabella), le celle vanno a capo, le righe sono a
     strisce tenui e quella sotto il mouse si accende come nell'elenco-tabella. Nelle colonne strette di una scheda (dati e
     lato) resta lo scorrimento del telefono. */
  table.tabella-pc:not(.planning) { display: table; width: 100%; overflow: visible; }
  table.tabella-pc:not(.planning) :is(th, td) { white-space: normal; }
  table.tabella-pc:not(.planning) :is(th, td).numero { white-space: nowrap; }
  table.tabella-pc:not(.planning) thead th {
    position: sticky;
    top: var(--altezza-testata);
    z-index: 2;
    white-space: nowrap;
  }
  table.tabella-pc:not(.planning) tbody tr:nth-child(even) > * { background: color-mix(in srgb, var(--testo) 2.5%, transparent); }
  table.tabella-pc:not(.planning) tbody tr:hover > * { background: color-mix(in srgb, var(--marchio) 6%, transparent); }
  .griglia-pc.a-colonne > :is(.colonna-dati, .colonna-lato) table.tabella-pc:not(.planning) { display: block; overflow-x: auto; }
  .griglia-pc.a-colonne > :is(.colonna-dati, .colonna-lato) table.tabella-pc:not(.planning) thead th { position: static; }

  /* ---- DA FARE: LE PROPOSTE COME CARTE AFFIANCATE ---------------------------------------------------------------------------
     LE DECISIONI IN UNA GRIGLIA DI CARTE (H355, 4/11/2026): ognuna è già una cosa intera (titolo, perché, messaggio, pulsanti);
     sul PC stanno una accanto all'altra, nell'ordine in cui le mette il gestionale (le urgenti prima). L'urgente resta il
     bordo rosso in alto e la parola «Urgente». */
  /* GRAFICA B, ONDA 1: almeno 30rem (prima 19rem), così testo e pulsanti di una decisione non vanno a capo parola per parola. */
  .griglia-pc .decisioni {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr));
    gap: 1rem;
  }
  .griglia-pc .decisione {
    align-content: start;
    padding: .85rem 1rem;
    background: var(--scheda);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
  }
  .griglia-pc .decisione.urgente { border-top: 3px solid var(--meno); }

  /* ---- I NUMERI: I PANNELLI AFFIANCATI, I GRAFICI LARGHI ------------------------------------------------------------------
     I PANNELLI DEL CENTRO IN GRIGLIA (H355, 4/11/2026): le clienti, l'occupazione, i pacchetti in carte affiancate; l'incassato,
     la settimana per fascia oraria e i margini prendono due posti, perché un grafico stretto non si legge. */
  .griglia-pc .pannelli {
    display: grid;
    gap: 1rem 1.25rem;
    align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  }
  .griglia-pc .pannelli > .cifre-del-centro { grid-column: 1 / -1; margin: 0; }
  .griglia-pc .pannello {
    min-width: 0;
    padding: .85rem 1rem 1rem;
    background: var(--scheda);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
  }
  .griglia-pc .pannello > h3:first-child { margin-top: 0; }
  .griglia-pc .pannelli > .pannello-largo { grid-column: span 2; }
  .griglia-pc .numeri-del-centro > .pannello-largo { margin-top: 1rem; }
  .griglia-pc .barre { height: 10rem; }

  /* ---- L'AGENDA DEL CENTRO: LA GRIGLIA PRENDE LA LARGHEZZA, IL RESTO DI LATO -------------------------------------------
     LE COLONNE DELLE OPERATRICI SU TUTTA LA LARGHEZZA (H355, 4/11/2026): la griglia del giorno al centro; l'occupazione,
     «Da incassare» e «Fuori dalla griglia» in una colonna a destra, così la giornata si vede intera senza scorrere sotto. */
  .agenda-corpo { display: flex; align-items: flex-start; gap: 1.25rem; }
  .agenda-corpo > .griglia-agenda { flex: 1 1 0; min-width: 0; }
  .agenda-corpo > .agenda-lato { flex: 0 0 20rem; min-width: 0; margin-top: .75rem; }
  .agenda-corpo > .agenda-lato:not(:has(> *)) { display: none; }
  .agenda-corpo > .agenda-lato > h2:first-child { margin-top: 0; }
  .agenda-corpo > .agenda-lato .occupazione { flex-direction: column; gap: .35rem; }
}

/* LA CLASSE «cassa» SU UN ELENCO O SU UNA SCHEDA (H355, 4/11/2026): «Da incassare» dell'agenda (ul.elenco.cassa) e
   «Incassa» dell'appuntamento (section.scheda.cassa) la portano per i tasti alti 48 px del tablet, ma da 56rem settore.css
   la disegnava come la cassa intera, a due colonne con il conto a destra: le righe finivano in una colonna di 18rem. Solo
   il contenitore della pagina della cassa (div.cassa) ha quella griglia. */
@media (min-width: 56rem) {
  ul.cassa, section.cassa { display: block; }
}

/* ---- LA HOME SU UNO SCHERMO LARGO ---------------------------------------------------------------------------------------
   «ADESSO» E IL RESTO DI OGGI AFFIANCATI SOTTO L'ANELLO (H355, 4/11/2026): l'anello resta com'è (onda MZ, H352), con la Z
   al centro e gli spicchi al loro posto; sotto, invece di due blocchi da 46rem uno sopra l'altro, la carta «Adesso» a
   sinistra e i riquadri del resto di oggi a destra. Cambia la disposizione, non il significato: «Adesso» resta la prima cosa
   letta dopo la Z, e senza il resto di oggi resta una colonna di lettura centrata. Solo stile, Home.razor non cambia. */
/* DA 64 A 100REM DUE COLONNE, ADESSO | Z (grafica B, onda 3, 12/11/2026). Visto dal vivo a 1366 px: con tre zone (la Z da
   almeno 32rem al centro) «Adesso» restava largo 200 px, con il titolo della carta su cinque righe. Ora a sinistra «Adesso»,
   a destra l'anello con la Z, e sotto, a tutta riga, il resto di oggi e i numeri. Le tre zone tornano da 100rem (voci.css). */
@media (min-width: 64rem) {
  main:has(.anello-della-z) { max-width: 120rem; }
  .home { grid-template-columns: minmax(22rem, 1fr) minmax(30rem, 40rem); column-gap: 1.75rem; align-items: start; }
  .home > * { grid-column: 1 / -1; }
  .home > .saluto { grid-row: 1; text-align: center; }
  .home > .anello-della-z { grid-column: 2; grid-row: 2; max-width: none; margin: 0; }
  /* «:has(> .anello-della-z)» pesa quanto «:not(…):not(…)» di home.css, che altrimenti teneva questi blocchi a 46rem. */
  .home:has(> .anello-della-z) > .adesso { grid-column: 1; grid-row: 2; max-width: none; margin: 0; }
  .home:has(> .anello-della-z) > :is(.il-resto, .come-va, .fatto-da-solo-riga) { max-width: none; margin-inline: 0; }
}

/* ---- TUTTO: I SEI GRUPPI IN COLONNE ------------------------------------------------------------------------------------------
   SEI COLONNE QUANDO CI STANNO (H355, 4/11/2026): da 90rem i sei gruppi di «Tutto» stanno in una riga sola, una colonna per
   gruppo, nell'ordine di sempre; sotto restano tre (testata.css). */
@media (min-width: 90rem) {
  /* «auto-fit» e non sei fisse: con il filtro restano due o tre gruppi, e si allargano invece di lasciare posti vuoti. */
  .tutto-gruppi { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
}