/*
  I MATTONI COMUNI DELLA GRAFICA B (onda 1, 12/11/2026). docs/ideas/2026-11-12-la-grafica-b.md; anteprima approvata dal titolare
  («Va bene»): https://claude.ai/artifact/R61LabZWAXvsigpbjhPiWH

  Si carica PER ULTIMO, dopo voci.css, e cambia tutte le pagine insieme senza toccarne il markup: tre pulsanti invece di otto,
  i campi uguali dentro e fuori dalle carte, la ricerca su una riga, una sola tabella, i riepiloghi come striscia di carte,
  la testata della pagina, nessun testo sotto i 13 px. Usa solo i gettoni di app.css (chiaro e scuro vengono da soli).

  COME SI PESANO LE REGOLE: «:not(.mattone-mai)» (una classe che nessuna pagina porta) alza il peso quanto basta per passare
  davanti alle regole generiche di prima (.scheda form button, .scelte button.secondario…), senza passare davanti a quelle dei
  pulsanti che hanno un disegno voluto. Quelli sono esclusi del tutto con «:not(:where(…))», che non pesa niente:
  la Z e la casella della Z, la home con i suoi spicchi e le sue azioni, i posti della barra, le tessere della cassa, la
  porta di accesso, la prenotazione online della cliente, la griglia dell'agenda, il planning della flotta, la ricerca della
  Console. Non si rinomina nessuna classe: le prove web leggono quei nomi.
*/

/* ---- IL FUOCO: blu e visibile su ogni comando ----------------------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--marchio); outline-offset: 2px; }

/* ---- I TRE PULSANTI ----------------------------------------------------------------------------------------------------
   PRIMARIO: pieno blu. SECONDARIO (.secondario, .secondaria, a.azione): contorno blu, stesso alto. PERICOLO: testo rosso
   sottolineato, senza fondo: cancellare non pesa quanto «Emetti». Valgono anche fuori da «.scheda form» (Cassa, Note di
   credito, i moduli in riga), dove prima restavano i controlli grezzi del browser. */
main :is(button, input[type="submit"]):not(.mattone-mai):not(:where(
    .home *, .anello-della-z *, .casella-z *, form.tessera *, .prenota-pagina *, .porta *, .barra-di-zeta *,
    .griglia-agenda *, .settimana-a-risorse *, .agenda-a-risorse *, table.planning *, .console-cerca *, .storia-annulla *,
    .gesto, .libero, .qui, .proposta-qui, .z-accensione, .entra-in-zeta, .porta-entra, .tasto-cliente, .casella-z-manda,
    .prenota-tasto, .azione-principale, .azione-seconda, .azione-poi, .z-grande)) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--alto-comando); max-width: 100%;
  padding: 0 1.15rem;
  font: inherit; font-size: var(--fs-m); font-weight: 600; line-height: 1.2; text-align: center;
  color: #fff; background: var(--marchio);
  border: 1.5px solid var(--marchio); border-radius: var(--r);
  box-shadow: none; filter: none; text-decoration: none;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
main :is(button, input[type="submit"]):not(.mattone-mai):not(:disabled):hover:not(:where(
    .home *, .anello-della-z *, .casella-z *, form.tessera *, .prenota-pagina *, .porta *, .barra-di-zeta *,
    .griglia-agenda *, .settimana-a-risorse *, .agenda-a-risorse *, table.planning *, .console-cerca *, .storia-annulla *,
    .gesto, .libero, .qui, .proposta-qui, .z-accensione, .entra-in-zeta, .porta-entra, .tasto-cliente, .casella-z-manda,
    .prenota-tasto, .azione-principale, .azione-seconda, .azione-poi, .z-grande)) {
  background: var(--marchio-scuro); border-color: var(--marchio-scuro); filter: none;
}
main :is(button, input[type="submit"]):not(.mattone-mai):disabled { opacity: .5; cursor: not-allowed; }

/* IL SECONDARIO: il contorno blu. Solo i colori: misure e margini restano quelli del primario o della carta che lo ospita. */
main :is(button, input[type="submit"]):is(.secondario, .secondaria):not(.mattone-mai):not(.mattone-mai-2):not(:where(
    .home *, .anello-della-z *, form.tessera *, .prenota-pagina *, .barra-di-zeta *, .griglia-agenda *, .agenda-a-risorse *,
    .gesto, .prenota-tasto)) {
  color: var(--marchio); background: var(--scheda); border-color: var(--marchio);
}
main :is(button, input[type="submit"]):is(.secondario, .secondaria):not(.mattone-mai):not(.mattone-mai-2):not(:disabled):hover:not(:where(
    .home *, .anello-della-z *, form.tessera *, .prenota-pagina *, .barra-di-zeta *, .griglia-agenda *, .agenda-a-risorse *,
    .gesto, .prenota-tasto)) {
  color: var(--marchio); background: var(--zeta-velo); border-color: var(--marchio);
}

/* IL PERICOLO: la parola in rosso, sottolineata. Anche «pericolo secondario» e la «Scarta» delle decisioni. */
main :is(button, input[type="submit"]).pericolo:not(.mattone-mai):not(.mattone-mai-2):not(:where(
    .home *, .anello-della-z *, .prenota-pagina *, .azione-principale, .azione-poi, .prenota-tasto)) {
  color: var(--meno); background: transparent; border-color: transparent;
  padding-inline: var(--sp-2); font-weight: 500;
  text-decoration: underline; text-underline-offset: .2em;
}
main :is(button, input[type="submit"]).pericolo:not(.mattone-mai):not(.mattone-mai-2):not(:disabled):hover:not(:where(
    .home *, .anello-della-z *, .prenota-pagina *, .azione-principale, .azione-poi, .prenota-tasto)) {
  color: var(--meno); background: color-mix(in srgb, var(--meno) 8%, transparent); border-color: transparent;
}

/* I COLLEGAMENTI-AZIONE (a.azione): contorno blu, alti quanto i pulsanti. Con «primaria» (la testata della pagina) pieni. */
main a.azione:not(.mattone-mai):not(:where(.home *, .barra-di-zeta *)) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--alto-comando); padding: 0 1.1rem;
  font-weight: 600; line-height: 1.2; text-decoration: none;
  color: var(--marchio); background: var(--scheda);
  border: 1.5px solid var(--marchio); border-radius: var(--r);
}
main a.azione:not(.mattone-mai):not(:where(.home *, .barra-di-zeta *)):hover { color: var(--marchio); background: var(--zeta-velo); }
main a.azione.primaria:not(.mattone-mai) { color: #fff; background: var(--marchio); }
main a.azione.primaria:not(.mattone-mai):hover { color: #fff; background: var(--marchio-scuro); border-color: var(--marchio-scuro); }
/* Più collegamenti-azione in un paragrafo: in fila, con il loro spazio. */
main p:has(> a.azione) { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

/* LA CASSA DEL TABLET tiene i suoi 48 px (settore.css): qui solo riportati sopra i 44 dei mattoni. */
main div.cassa :is(button, input, select):not(.mattone-mai):not(.mattone-mai-2):not(.mattone-mai-3) { min-height: 48px; }
main div.cassa .pulsanti-di-pagamento button:not(.mattone-mai):not(.mattone-mai-2):not(.mattone-mai-3) { min-height: 56px; font-size: 1.1rem; font-weight: 700; }
main div.cassa .spunta input:not(.mattone-mai):not(.mattone-mai-2):not(.mattone-mai-3) { min-height: auto; }

/* ---- I CAMPI: lo stesso aspetto dentro e fuori da «.scheda form» --------------------------------------------------------- */
main :is(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="date"],
    input[type="password"], input[type="tel"], input[type="url"], input[type="datetime-local"], input[type="time"],
    input[type="month"], select, textarea):not(.mattone-mai):not(:where(
    .home *, .anello-della-z *, .casella-z *, .prenota-pagina *, .porta *, .console-cerca *, .griglia-agenda *, table.planning *)) {
  font: inherit; font-size: var(--fs-m);
  min-height: var(--alto-comando);
  padding: .5rem .75rem;
  color: var(--testo); background: var(--scheda);
  border: 1px solid var(--bordo-campo); border-radius: var(--r);
  max-width: 100%; min-width: 0;
}
main textarea:not(.mattone-mai) { line-height: 1.45; }
main :is(input, select, textarea):not(.mattone-mai):not(:where(.home *, .casella-z *, .console-cerca *)):focus {
  outline: none; border-color: var(--marchio);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marchio) 18%, transparent);
}
/* I MODULI IN RIGA FUORI DA UNA CARTA (il codice o l'EAN della cassa): l'etichetta sopra e il campo che riempie il suo posto,
   come dentro «.scheda form». Prima il campo restava largo quanto il browser decideva. */
main form.in-riga label:not(.interruttore, .spunta):has(> :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea)) {
  display: grid; gap: .2rem; font-size: var(--fs-s); color: var(--tenue);
}
main form.in-riga label:not(.interruttore, .spunta) > :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea) { width: 100%; }
/* LE SCELTE A PALLINO dentro un modulo: il pallino accanto alla sua scritta, non centrato sopra di lei. */
.scheda form label:has(> input[type="radio"]) { display: flex; gap: var(--sp-2); align-items: center; color: var(--testo); font-size: var(--fs-m); }
.scheda form input[type="radio"] { width: auto; margin: 0; flex: none; }
fieldset.scelta-riga { border: 1px solid var(--bordo); border-radius: var(--r); padding: var(--sp-2) var(--sp-4) var(--sp-3); }
fieldset.scelta-riga legend { padding: 0 var(--sp-1); font-size: var(--fs-s); color: var(--tenue); }
/* LE FASI DEL SERVIZIO una sotto l'altra: il riquadro porta anche «scelte» (la fila di pulsanti) e le sei fasi finivano in fila,
   con campi larghi un dito. */
fieldset.fasi-del-servizio { display: grid; gap: var(--sp-3); }
/* UN CAMPO NON ESCE MAI DALLA SUA CARTA (la scheda articolo): etichette e campi possono stringersi. */
.scheda :is(label, .coppia, .terna, .quattro) { min-width: 0; }
.scheda :is(.coppia, .terna, .quattro) > * { min-width: 0; }
.scheda form :is(input, select, textarea) { max-width: 100%; }
/* Gli indirizzi e i codici lunghi (le impostazioni della posta, i collegamenti) vanno a capo invece di sforare. */
.scheda code { overflow-wrap: anywhere; }

/* ---- LA RICERCA SU UNA RIGA ---------------------------------------------------------------------------------------------
   Il campo si allarga, scelte e pulsante accanto; sul telefono vanno a capo. Dentro «.scheda» la regola dei moduli la
   rendeva una griglia: campo, select e pulsante uno sotto l'altro (Clienti, Magazzino, Articoli). */
main form:is(.cerca, .cerca-nell-elenco):not(.mattone-mai) {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2);
  margin: var(--sp-2) 0 var(--sp-3);
}
main form:is(.cerca, .cerca-nell-elenco):not(.mattone-mai) > :is(input[type="search"], input:not([type]), input[type="text"], label) {
  flex: 1 1 16rem; width: auto; min-width: 0; margin: 0;
}
main form:is(.cerca, .cerca-nell-elenco):not(.mattone-mai) > label { display: grid; gap: .2rem; font-size: var(--fs-s); color: var(--tenue); }
main form:is(.cerca, .cerca-nell-elenco):not(.mattone-mai) > label > :is(input, select) { width: 100%; }
main form:is(.cerca, .cerca-nell-elenco):not(.mattone-mai) > select { flex: 0 1 auto; width: auto; min-width: 9rem; }
main form:is(.cerca, .cerca-nell-elenco):not(.mattone-mai) > label:has(> select) { flex: 0 1 auto; }
main form:is(.cerca, .cerca-nell-elenco):not(.mattone-mai) > :is(button, a) { flex: 0 0 auto; margin: 0; }
main form:is(.cerca, .cerca-nell-elenco):not(.mattone-mai) > a:not(.azione) { align-self: center; }
.tutto-filtro { flex-wrap: wrap; }
.tutto-filtro input { min-height: var(--alto-comando); }
.tutto-filtro button { min-height: var(--alto-comando); border-radius: var(--r); }
@media (min-width: 64rem) {
  main form:is(.cerca, .cerca-nell-elenco):not(.mattone-mai) { flex-wrap: nowrap; }
  .griglia-pc > form:is(.cerca, .cerca-nell-elenco) { padding: var(--sp-3) var(--sp-4); background: var(--vetro);
    border: 1px solid var(--bordo); border-radius: var(--r-l); }
}

/* ---- LE TABELLE: una sola, per «table.tabella-pc» e «ul.elenco.tabella-pc» ----------------------------------------------- */
table.tabella-pc:not(.planning) thead th {
  font-size: var(--fs-xs); background: var(--fondo-intestazione); color: var(--tenue);
}
table.tabella-pc:not(.planning) :is(th, td) { padding: .6rem .75rem; }
table.tabella-pc:not(.planning) tbody tr > * { height: var(--alto-comando); }
@media (min-width: 64rem) {
  .elenco.tabella-pc > li:not(.intestazione) { min-height: var(--alto-comando); padding: .55rem .75rem; }
  .elenco.tabella-pc > li.intestazione {
    font-size: var(--fs-xs); padding: .6rem .75rem; background: var(--fondo-intestazione); color: var(--tenue);
  }
  .elenco.tabella-pc > li.intestazione:hover { background: var(--fondo-intestazione); }
  /* LE CIFRE A DESTRA anche nell'intestazione e nelle tabelle vere. */
  table.tabella-pc:not(.planning) thead th.numero { text-align: right; }
  .elenco.tabella-pc > li:not(.intestazione):hover,
  table.tabella-pc:not(.planning) tbody tr:hover > * { background: var(--zeta-velo); }
}

/* ---- LE RIGHE DEGLI ELENCHI IN UNA CARTA STRETTA ----------------------------------------------------------------------
   Il nome tiene almeno 12rem; se accanto non c'è posto, importi ed etichette vanno sotto invece di spezzare il nome in tre
   righe (Note di credito, Scadenzario nelle carte affiancate). Gli elenchi-tabella sul PC sono griglie e non cambiano. */
.elenco > li { flex-wrap: wrap; }
.elenco > li > .chi { flex: 1 1 12rem; min-width: 0; }
.tipo { max-width: 100%; overflow-wrap: anywhere; }

/* ---- I RIEPILOGHI COME STRISCIA DI CARTE («dl.numeri», «In sintesi») ----------------------------------------------------
   L'etichetta piccola sopra, il numero grande sotto, tutte le carte uguali. Due forme nel markup: con «div.numero» intorno a
   ogni coppia (una carta per div), oppure dt e dd sciolti (In sintesi di fatture, DDT, ordini, resi, distinte): lì ogni
   coppia diventa una carta disegnando insieme dt (la parte alta) e dd (la bassa), due colonne con «dense», quattro dove la
   pagina è larga. Il conto della cassa e le cifre del centro hanno il loro disegno e non si toccano. */
dl.numeri:not(.totale-del-conto, .cifre-del-centro) > .numero {
  padding: var(--sp-3) var(--sp-4); background: var(--scheda);
  border: 1px solid var(--bordo); border-radius: var(--r); min-width: 0;
}
dl.numeri:not(.totale-del-conto, .cifre-del-centro) > .numero dt { font-size: var(--fs-xs); text-transform: none; letter-spacing: 0; }
dl.numeri:not(.totale-del-conto, .cifre-del-centro) > .numero dd { font-size: var(--fs-l); font-weight: 700; }
@media (min-width: 64rem) { dl.numeri:not(.totale-del-conto, .cifre-del-centro) > .numero dd { font-size: var(--fs-xl); } }

dl.numeri:not(.totale-del-conto, .cifre-del-centro):has(> dt):not(:has(> dd + dd, > dt + dt)) {
  display: grid; grid-auto-flow: row dense; column-gap: var(--sp-2); row-gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
dl.numeri:not(.totale-del-conto, .cifre-del-centro):has(> dt):not(:has(> dd + dd, > dt + dt)) > dt:nth-of-type(odd),
dl.numeri:not(.totale-del-conto, .cifre-del-centro):has(> dt):not(:has(> dd + dd, > dt + dt)) > dd:nth-of-type(odd) { grid-column: 1; }
dl.numeri:not(.totale-del-conto, .cifre-del-centro):has(> dt):not(:has(> dd + dd, > dt + dt)) > dt:nth-of-type(even),
dl.numeri:not(.totale-del-conto, .cifre-del-centro):has(> dt):not(:has(> dd + dd, > dt + dt)) > dd:nth-of-type(even) { grid-column: 2; }
dl.numeri:not(.totale-del-conto, .cifre-del-centro):has(> dt):not(:has(> dd + dd, > dt + dt)) > dt {
  margin: 0; padding: var(--sp-3) var(--sp-4) var(--sp-1);
  font-size: var(--fs-xs); line-height: 1.3; color: var(--tenue);
  background: var(--scheda); border: 1px solid var(--bordo); border-bottom: 0; border-radius: var(--r) var(--r) 0 0;
}
dl.numeri:not(.totale-del-conto, .cifre-del-centro):has(> dt):not(:has(> dd + dd, > dt + dt)) > dt a { color: var(--tenue); }
dl.numeri:not(.totale-del-conto, .cifre-del-centro):has(> dt):not(:has(> dd + dd, > dt + dt)) > dt a:hover { color: var(--marchio); }
dl.numeri:not(.totale-del-conto, .cifre-del-centro):has(> dt):not(:has(> dd + dd, > dt + dt)) > dd {
  margin: 0 0 var(--sp-2); padding: 0 var(--sp-4) var(--sp-3);
  font-size: var(--fs-l); font-weight: 700; line-height: 1.2; font-variant-numeric: lining-nums tabular-nums;
  background: var(--scheda); border: 1px solid var(--bordo); border-top: 0; border-radius: 0 0 var(--r) var(--r);
  overflow-wrap: anywhere;
}
@media (min-width: 64rem) {
  /* FUORI DALLE COLONNE STRETTE (dati, lato) le carte stanno in quattro per riga. */
  :is(main, .colonna-centro, .griglia-pc.a-carte > section) > dl.numeri:not(.totale-del-conto, .cifre-del-centro):has(> dt):not(:has(> dd + dd, > dt + dt)),
  :is(main, .colonna-centro, .griglia-pc.a-carte > section) > section > dl.numeri:not(.totale-del-conto, .cifre-del-centro):has(> dt):not(:has(> dd + dd, > dt + dt)) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  :is(main, .colonna-centro, .griglia-pc.a-carte > section) > dl.numeri:not(.totale-del-conto, .cifre-del-centro):has(> dt):not(:has(> dd + dd, > dt + dt)) > :is(dt, dd):nth-of-type(4n+1),
  :is(main, .colonna-centro, .griglia-pc.a-carte > section) > section > dl.numeri:not(.totale-del-conto, .cifre-del-centro):has(> dt):not(:has(> dd + dd, > dt + dt)) > :is(dt, dd):nth-of-type(4n+1) { grid-column: 1; }
  :is(main, .colonna-centro, .griglia-pc.a-carte > section) > dl.numeri:not(.totale-del-conto, .cifre-del-centro):has(> dt):not(:has(> dd + dd, > dt + dt)) > :is(dt, dd):nth-of-type(4n+2),
  :is(main, .colonna-centro, .griglia-pc.a-carte > section) > section > dl.numeri:not(.totale-del-conto, .cifre-del-centro):has(> dt):not(:has(> dd + dd, > dt + dt)) > :is(dt, dd):nth-of-type(4n+2) { grid-column: 2; }
  :is(main, .colonna-centro, .griglia-pc.a-carte > section) > dl.numeri:not(.totale-del-conto, .cifre-del-centro):has(> dt):not(:has(> dd + dd, > dt + dt)) > :is(dt, dd):nth-of-type(4n+3),
  :is(main, .colonna-centro, .griglia-pc.a-carte > section) > section > dl.numeri:not(.totale-del-conto, .cifre-del-centro):has(> dt):not(:has(> dd + dd, > dt + dt)) > :is(dt, dd):nth-of-type(4n+3) { grid-column: 3; }
  :is(main, .colonna-centro, .griglia-pc.a-carte > section) > dl.numeri:not(.totale-del-conto, .cifre-del-centro):has(> dt):not(:has(> dd + dd, > dt + dt)) > :is(dt, dd):nth-of-type(4n+4),
  :is(main, .colonna-centro, .griglia-pc.a-carte > section) > section > dl.numeri:not(.totale-del-conto, .cifre-del-centro):has(> dt):not(:has(> dd + dd, > dt + dt)) > :is(dt, dd):nth-of-type(4n+4) { grid-column: 4; }
}

/* ---- LA GRIGLIA FLUIDA: le colonne con un modulo non si stringono ------------------------------------------------------
   Una colonna di dati o di lato che contiene un modulo non scende sotto 30rem, e il centro non sotto 30rem: se non ci stanno
   tutte e tre (1366 px), il lato va a capo sotto, a tutta riga, invece di stringere i campi fuori dalle carte. */
@media (min-width: 64rem) {
  .griglia-pc.a-colonne > :is(.colonna-dati, .colonna-lato):has(form :is(input:not([type="hidden"], [type="checkbox"], [type="radio"]), select, textarea)) {
    min-width: min(30rem, 100%);
  }
  .griglia-pc.a-colonne > .colonna-centro:has(> *) { min-width: min(30rem, 100%); }
  .griglia-pc.a-colonne > :is(.colonna-dati, .colonna-centro, .colonna-lato) > * { max-width: 100%; }
  /* SOPRA I 120REM LE CARTE AFFIANCATE NON SI ALLARGANO OLTRE MISURA: una colonna in più invece di carte da 800 px. */
}
@media (min-width: 120rem) {
  .griglia-pc.a-carte { --carta-minima: 24rem; }
}
@media (min-width: 64rem) {
  /* UN ELENCO-TABELLA PRENDE ALMENO DUE POSTI DELLA GRIGLIA A CARTE: in un posto solo (24rem) le colonne andavano a capo e
     metà schermo restava vuota (Scadenzario). Da incassare e da pagare restano affiancati. */
  .griglia-pc.a-carte > section.scheda:has(> ul.elenco.tabella-pc) { grid-column: span 2; }
}

/* ---- LA TESTATA DELLA PAGINA (TestataDellaPagina.razor) --------------------------------------------------------------
   Il sopratitolo con l'area, il titolo, a destra le azioni con il primario per ultimo. Sul telefono le azioni vanno sotto. */
.testata-pagina {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-3) var(--sp-4); margin: var(--sp-1) 0 var(--sp-5);
}
.testata-pagina-titoli { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.testata-pagina-sopra {
  margin: 0; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tenue);
}
.testata-pagina h1 { margin: 0; font-size: var(--fs-xxl); font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.testata-pagina-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.testata-pagina-azioni > form { margin: 0; }
main .testata-pagina-azioni :is(button, a.azione):not(.mattone-mai) { margin: 0; }
/* ONDA 2: il conto accanto al titolo e l'aiuto «?» (un details chiuso; il pannello si apre sotto il titolo, sopra la pagina). */
.testata-pagina { position: relative; }
.testata-pagina-riga-del-titolo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); min-width: 0; }
.testata-pagina-conto { font-size: var(--fs-m); font-weight: 500; color: var(--tenue); font-variant-numeric: tabular-nums; }
.testata-pagina-aiuto { position: static; }
.testata-pagina-aiuto > summary {
  list-style: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%; cursor: pointer;
  font-weight: 700; font-size: var(--fs-m); color: var(--marchio);
  background: var(--scheda); border: 1.5px solid var(--marchio);
}
.testata-pagina-aiuto > summary::-webkit-details-marker { display: none; }
.testata-pagina-aiuto > summary:hover, .testata-pagina-aiuto[open] > summary { background: var(--zeta-velo); }
.testata-pagina-aiuto-testo {
  position: absolute; z-index: 30; left: 0; top: calc(100% + var(--sp-2));
  width: min(44rem, 100%); max-height: min(70vh, 40rem); overflow: auto;
  padding: var(--sp-4) var(--sp-5); background: var(--scheda); color: var(--testo);
  border: 1px solid var(--bordo); border-radius: var(--r-l); box-shadow: 0 12px 32px rgba(11, 21, 38, .16);
  font-size: var(--fs-m); font-weight: 400; text-transform: none; letter-spacing: 0;
}
.testata-pagina-aiuto-testo > :first-child { margin-top: 0; }
.testata-pagina-aiuto-testo > :last-child { margin-bottom: 0; }
/* Una carta portata dentro l'aiuto non fa carta nella carta. */
.testata-pagina-aiuto-testo section.scheda { margin: 0 0 var(--sp-3); padding: 0; background: none; border: 0; box-shadow: none; }
.testata-pagina-aiuto-testo h2 { font-size: var(--fs-l); margin: 0 0 var(--sp-2); }
.testata-pagina-aiuto-testo p.nota { max-width: none; }

/* ---- NESSUN TESTO SOTTO I 13 PX --------------------------------------------------------------------------------------
   Le etichette e le pillole (.tipo, .fonte), le intestazioni, i contatori, i posti della barra: erano 11-12 px. */
.tipo, .fonte, .etichetta-urgente, .conto-da-fare, .piede, .titolo-breve, .storia-quando, .storia-tipo, .numero-diff, .numero-nome,
.numero dt, .numero dd.dettaglio, .titolo-lungo, .etichetta-azienda, .come-va > h2, .indice-delle-impostazioni h3,
.piu-usate h2, .tutto-gruppo h2, .racconto-perche strong, .adesso-etichetta, .storia-annulla button,
.barra-di-zeta > .posto, .barra-di-zeta > .z-della-barra, .barra-di-zeta .conto-posto, .gt-testa, .proposta-qui small,
.numeri-linea .numero-da, .carta-posta .posta-azioni button, .carta-posta .posta-azioni .azione {
  font-size: var(--fs-xs);
}
.tipo, .fonte { padding: .1rem .55rem; }
/* LE ETICHETTE .tipo LEGGIBILI: il testo pieno sul fondo tenue, non grigio su grigio. */
.tipo { color: color-mix(in srgb, var(--testo) 78%, var(--tenue)); background: var(--fondo-intestazione); border: 1px solid var(--bordo); }
.tipo.scaduto { color: var(--meno); border-color: color-mix(in srgb, var(--meno) 45%, transparent); background: color-mix(in srgb, var(--meno) 6%, var(--scheda)); }
.tipo.fatto { color: var(--piu); }
/* Nelle carte delle decisioni .tipo è testo (voci.css) e non torna pillola. */
.decisioni > .decisione .tipo { background: none; border: 0; padding: 0; color: var(--tenue); font-size: var(--fs-s); }
.barra-di-zeta .conto-posto { line-height: 1.25rem; }
/* LE AZIONI LEGGERE DELLE DECISIONI (Rimanda, Scarta) possono stringersi: sul telefono uscivano dalla carta. */
.decisioni > .decisione > :is(form.rimanda, form.scarta) { flex: 0 1 auto; max-width: 100%; min-width: 0; }
/* «URGENTE» resta una pillola corta, non una barra larga quanto la carta. */
.decisioni > .decisione > .etichetta-urgente,
.decisioni > .decisione > .decisione-testo > .etichetta-urgente { flex: 0 0 auto; justify-self: start; }
/* LA CARTA DELLA DECISIONE LARGA (Da fare, onda 3): sul PC una carta per riga, larga quanto il centro, con il testo a sinistra
   e le scelte a destra (voci.css, quando la carta passa i 44rem); sopra i 120rem, con più di una decisione, due carte per
   riga. Prima: carte da 30 a 56rem affiancate, con i pulsanti uno sotto l'altro sotto il testo. */
@media (min-width: 64rem) {
  .griglia-pc .decisioni { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 120rem) {
  .griglia-pc .decisioni:has(> .decisione + .decisione) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- ONDA 2: LE SCHEDE A TRE ZONE, 3 | 6 | 3 (dati | lavoro | Tu e Zeta) ----------------------------------------------
   Sopra i 100rem le tre colonne delle schede pesano 3, 6 e 3 su dodici (prima 1 | 1,6 | 1): il centro è il lavoro, largo
   metà pagina, e i lati sono carte strette. Una colonna vuota sparisce e le altre si allargano nella stessa proporzione.
   La colonna di destra porta le voci «Tu» e «Zeta»; correzioni, catena, nota interna e allegati vanno in fondo al centro. */
@media (min-width: 100rem) {
  .griglia-pc.a-colonne > .colonna-dati,
  .griglia-pc.a-colonne > .colonne-del-modulo > .colonna-dati { flex: 3 1 0; }
  .griglia-pc.a-colonne > .colonna-centro,
  .griglia-pc.a-colonne > .colonne-del-modulo > .colonna-centro { flex: 6 1 0; }
  .griglia-pc.a-colonne > .colonna-lato,
  .griglia-pc.a-colonne > .colonne-del-modulo > .colonna-lato { flex: 3 1 0; }
}
/* LA SCHEDA DELL'ARTICOLO: il lavoro è il modulo dei dati, sempre aperto (un articolo si corregge più spesso di quanto si
   legga). Sopra i 100rem il modulo va al centro largo (6) e fornitori e storia a sinistra (3): nella colonna stretta il
   modulo del servizio era alto 2.800 px. Le fasi del servizio, al centro, stanno affiancate. */
@media (min-width: 100rem) {
  .griglia-pc.a-colonne.scheda-articolo > .colonna-dati { order: 2; flex: 6 1 0; }
  .griglia-pc.a-colonne.scheda-articolo > .colonna-centro { order: 1; flex: 3 1 0; }
  .griglia-pc.a-colonne.scheda-articolo > .colonna-dati fieldset.fasi-del-servizio {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  }
}
/* IN FONDO AL CENTRO: le carte corte (duplica, catena, nota interna, allegati) in una fila, quante ne stanno. */
.carte-in-fondo > * { min-width: 0; }
@media (min-width: 64rem) {
  .carte-in-fondo {
    display: grid; gap: 0 1.25rem; align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  }
  /* Le carte con un modulo vero (la bozza della fattura): a due a due, mai sotto 26rem. */
  .carte-in-fondo.larghe { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
  /* Due moduli della stessa carta affiancati quando il centro è largo (la nota di credito: tutta o una riga). */
  .moduli-affiancati {
    display: grid; gap: var(--sp-4) var(--sp-6); align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  }
  .moduli-affiancati > div > :first-child { margin-top: 0; }
}

/* ---- ONDA 2: L'ELENCO E LA SCHEDA ACCANTO (sopra 112rem, ~1800 px) ------------------------------------------------------
   Senza script. Ogni riga dell'elenco ha due collegamenti: il nome apre la scheda intera (come sempre) e «›» (a.apri-accanto,
   visibile solo sopra 112rem) riporta alla stessa pagina con ?scelto=id, tenendo ricerca, filtri e pagina. Con un elemento
   scelto la pagina disegna a destra (aside.scheda-accanto) il suo riassunto: elenco 7 colonne, riassunto 5. Sotto 112rem
   il riassunto non si vede e la pagina resta quella di sempre. */
.scheda-accanto, a.apri-accanto { display: none; }
@media (min-width: 112rem) {
  .elenco-e-accanto.con-scelto {
    display: grid; gap: 1.25rem; align-items: start;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  .elenco-e-accanto.con-scelto > * { min-width: 0; }
  /* Con il riassunto accanto l'elenco prende tutte e sette le colonne: la colonna di lato della pagina va sotto. */
  .elenco-e-accanto.con-scelto > .griglia-pc.a-colonne > .colonna-lato { flex: 1 0 100%; }
  .elenco-e-accanto.con-scelto > .scheda-accanto {
    display: block; position: sticky; top: calc(var(--altezza-testata) + .75rem);
    max-height: calc(100vh - var(--altezza-testata) - 7rem); overflow: auto;
  }
  a.apri-accanto {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 1.9rem; height: 1.9rem; margin-left: var(--sp-2); vertical-align: middle; border-radius: var(--r);
    color: var(--marchio); font-weight: 700; text-decoration: none; border: 1px solid var(--bordo); background: var(--scheda);
  }
  a.apri-accanto:hover { background: var(--zeta-velo); }
  .elenco > li.riga-scelta:not(.intestazione):not(.mattone-mai) {
    background: var(--zeta-velo); box-shadow: inset 4px 0 0 var(--marchio);
  }
}
.scheda-accanto .riassunto-testa { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); flex-wrap: wrap; }
.scheda-accanto .riassunto-testa h2 { margin: 0; font-size: var(--fs-xl); }
.scheda-accanto .riassunto-sopra { margin: 0; font-size: var(--fs-s); color: var(--tenue); }
.scheda-accanto .riassunto-cifre { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); margin: var(--sp-4) 0; }
.scheda-accanto .riassunto-cifre > div { border: 1px solid var(--bordo); border-radius: var(--r); padding: var(--sp-2) var(--sp-3); min-width: 0; }
.scheda-accanto .riassunto-cifre dt { font-size: var(--fs-xs); color: var(--tenue); }
.scheda-accanto .riassunto-cifre dd { margin: 0; font-size: var(--fs-l); font-weight: 700; overflow-wrap: anywhere; }
.scheda-accanto h3 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); margin: var(--sp-4) 0 var(--sp-2); }

/* ---- ONDA 2: LA PAGINAZIONE (Paginazione.razor) -------------------------------------------------------------------------- */
.paginazione { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin: var(--sp-3) 0; }
.paginazione-conto { color: var(--tenue); font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
.paginazione-passi { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.paginazione-passi .spento { display: inline-flex; align-items: center; min-height: var(--alto-comando); padding: 0 1.1rem; color: var(--tenue); border: 1.5px dashed var(--bordo); border-radius: var(--r); }

/* ---- ONDA 2: I FILTRI A PILLOLA (il sotto scorta del magazzino) ----------------------------------------------------------- */
.pillole { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-3); }
.pillole a { padding: .3rem .8rem; border-radius: 999px; font-size: var(--fs-s); text-decoration: none; color: var(--marchio); background: var(--zeta-velo); border: 1px solid transparent; }
.pillole a[aria-current="page"] { color: #fff; background: var(--marchio); }

/* ---- ONDA 3: LA STRISCIA DI CARTE IN CIMA A UNA PAGINA (le fatture) ------------------------------------------------------
   Una carta per numero, quante ne stanno in riga (quattro-sette sul PC, due sul telefono); l'etichetta è il collegamento al
   filtro o alla carta che lo lavora. «da-guardare»: c'è una scartata da rifare, il filo rosso a sinistra. */
dl.numeri.striscia-di-carte {
  display: grid; gap: var(--sp-3); margin: 0 0 var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
@media (max-width: 40rem) { dl.numeri.striscia-di-carte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); } }
dl.numeri.striscia-di-carte > .numero { display: flex; flex-direction: column; gap: var(--sp-1); }
dl.numeri.striscia-di-carte > .numero dt { margin: 0; }
dl.numeri.striscia-di-carte > .numero dt a { color: var(--tenue); font-weight: 600; text-decoration: none; }
dl.numeri.striscia-di-carte > .numero dt a:hover { color: var(--marchio); text-decoration: underline; }
dl.numeri.striscia-di-carte > .numero dd { margin: 0; overflow-wrap: anywhere; }
dl.numeri.striscia-di-carte > .numero dd.dettaglio { font-weight: 600; }
dl.numeri.striscia-di-carte > .numero.da-guardare { box-shadow: inset 4px 0 0 var(--meno); }
/* La pagina delle fatture: le carte di «Da fatturare» sotto l'elenco, staccate da lui. */
.fatture-da-fatturare { margin-top: var(--sp-5); }

/* ---- ONDA 3: LE CAUSALI DELLA NOTA DI CREDITO (CausaleDellaNota.razor) -----------------------------------------------------
   Una scelta per riga a tutta larghezza del modulo: il pallino, il nome in grassetto, la spiegazione sotto in testo pieno. Prima
   nome e spiegazione erano in fila in un'etichetta stretta e andavano a capo parola per parola. */
fieldset.causali-della-nota {
  display: grid; gap: var(--sp-2); margin: var(--sp-2) 0; padding: var(--sp-2) var(--sp-4) var(--sp-3);
  border: 1px solid var(--bordo); border-radius: var(--r); min-width: 0;
}
fieldset.causali-della-nota > legend { padding: 0 var(--sp-1); font-size: var(--fs-s); color: var(--tenue); }
.scheda form fieldset.causali-della-nota > label.causale {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r); cursor: pointer;
  font-size: var(--fs-m); color: var(--testo);
}
.scheda form fieldset.causali-della-nota > label.causale:has(> input:checked) { background: var(--zeta-velo); }
.scheda form fieldset.causali-della-nota > label.causale > input[type="radio"] { margin: .2rem 0 0; }
.causali-della-nota .causale-testo { display: grid; gap: 2px; min-width: 0; }
.causali-della-nota .causale-effetto { font-size: var(--fs-s); line-height: 1.4; color: var(--tenue); }

/* ---- LA BARRA DI ZETA NON COPRE L'ULTIMA RIGA ------------------------------------------------------------------------
   Il corpo lascia sotto lo spazio della barra (testata.css); il main ne aggiunge un po', così anche l'ultima carta e i
   pulsanti in fondo restano sopra la barra quando si arriva in fondo. */
body:has(.barra-di-zeta) main { padding-bottom: var(--sp-6); }

/* ---- D5: IL DESTINO DEI DOCUMENTI (Archivio.razor) -----------------------------------------------------------------------
   Le quattro carte in cima (da decidere, in attesa, fatto, da tenere), il titolo di ogni gruppo a tutta riga, e su ogni carta la
   frase del destino con un filo del colore del suo stato. */
.gruppo-del-destino { margin: var(--sp-4) 0 0; font-size: var(--fs-l); }
.gruppo-del-destino .nota { font-size: var(--fs-s); font-weight: 400; margin-left: var(--sp-2); }
.destini-dell-archivio .numero dt a[aria-current="page"] { color: var(--marchio); text-decoration: underline; }
.carta-documento .destino-documento { padding-left: var(--sp-2); border-left: 3px solid var(--bordo); color: var(--testo); }
.carta-documento .destino-documento.destino-da-decidere { border-left-color: var(--meno); }
.carta-documento .destino-documento.destino-in-attesa { border-left-color: var(--marchio); }
.carta-documento .destino-documento.destino-fatto { border-left-color: var(--piu); }