/*
  Lo stile della web app: scritto a mano, nessun framework, nessuna richiesta di rete oltre a questo
  file. Il motivo non e' purismo: questa pagina la guarda un esercente da un telefono in rete mobile,
  e ogni dipendenza esterna e' un secondo di attesa prima di vedere un numero.

  Mobile-first: il foglio descrive il telefono, e una sola media query allarga su schermo grande.

  LO STILE DI ZETARETAIL (H188): la stessa famiglia visiva del resto dell'ecosistema — fondo caldo sfumato,
  pannelli di vetro, verde come marchio, titoli in Fraunces e testo in Outfit. I due caratteri stanno in
  /fonts/ accanto a questo file (licenza OFL, vedi fonts/LEGGIMI.md): niente richieste a server esterni, e
  se non arrivano resta il carattere di sistema. I nomi dei colori sono quelli di prima, cosi' ogni regola
  scritta finora prende la palette nuova senza essere toccata: --scheda e' il colore pieno (campi, testo sui
  pulsanti), --vetro quello trasparente dei pannelli.
*/

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* I COLORI DAL MARCHIO (1/11/2026, docs/ideas/2026-11-01-la-home-centro-di-comando.md § 8): il blu e il giallo della Z dei
   file di Giuseppe (LogoZeta1-4), il quasi nero per il testo. Il giallo è un ACCENTO (la casella della Z, la carta «Adesso»,
   la scheda attiva), non un allarme: l'allarme resta il rosso. Più e meno restano verde e rosso: sono significati. */
:root {
  /* LA CARTA E L'INCHIOSTRO (G1, 6/11/2026, docs/ideas/2026-11-06-la-grafica-unica-di-zeta.md): il fondo è piatto, il vetro
     diventa un foglio pieno, niente sfocature. I nomi restano quelli di prima, così ogni pagina prende la grafica nuova. */
  --fondo: #eef1f5;
  --sfumatura: none;
  --scheda: #ffffff;
  --vetro: #ffffff;
  --testo: #0b1526;
  /* GRAFICA B, ONDA 1 (12/11/2026): un tono più scuro, 6,6:1 sul bianco e 5,9:1 sul fondo (prima 5,4 e 4,8). */
  --tenue: #4f5e74;
  --bordo: #d5dbe4;
  --piu: #1f7a4c;
  --meno: #b42318;
  --marchio: #003f88;
  --marchio-scuro: #002a5c;
  --accento: #fdc500;
  --su-accento: #0b1526;
  --accento2: #c98a00;
  --accento3: #2f6fc0;
  --spicchio-spento: rgba(11, 21, 38, .08);
  --alone1: #9dbbe6;
  --alone2: #f6dc7a;
  --ombra: 0 1px 2px rgba(11, 21, 38, .05);
  --ombra-marchio: rgba(0, 63, 136, .28);
  --raggio: 12px;
  --raggio-grande: 12px;
  /* LE TRE VOCI (G1): Tu (il giallo, solo per ciò che aspetta una decisione), Zeta (il blu, il lavoro fatto da sola), il mondo
     (l'inchiostro, ciò che arriva da fuori). voci.css le disegna. */
  --tu: #fdc500;
  --tu-velo: #fff6d6;
  --su-tu: #0b1526;
  --zeta: #003f88;
  --zeta-velo: #e3ecf8;
  --mondo: #0b1526;
  --font: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* I TITOLI NELLO STESSO CARATTERE DEL TESTO: il segno della Z è geometrico, le grazie di Fraunces gli stavano contro. */
  --display: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* I GETTONI DELLA GRAFICA B (onda 1, 12/11/2026, docs/ideas/2026-11-12-la-grafica-b.md): le scale che mancavano. Le regole
     nuove (mattoni.css) usano solo questi; le vecchie li prenderanno pagina per pagina nelle onde 2 e 3. */
  --sp-1: .25rem;  /* 4 */
  --sp-2: .5rem;   /* 8 */
  --sp-3: .75rem;  /* 12 */
  --sp-4: 1rem;    /* 16 */
  --sp-5: 1.25rem; /* 20 */
  --sp-6: 1.5rem;  /* 24 */
  --sp-7: 2rem;    /* 32 */
  --sp-8: 3rem;    /* 48 */
  /* I caratteri: 13 px è il minimo di ogni testo (etichette, intestazioni delle tabelle, pillole). */
  --fs-xs: .8125rem; /* 13 */
  --fs-s: .875rem;   /* 14 */
  --fs-m: 1rem;      /* 16 */
  --fs-l: 1.125rem;  /* 18 */
  --fs-xl: 1.375rem; /* 22 */
  --fs-xxl: 1.75rem; /* 28 */
  --r-s: 8px;
  --r: 10px;
  --r-l: 12px;
  --r-pill: 999px;
  --ombra-1: 0 1px 2px rgba(11, 21, 38, .05);
  --ombra-2: 0 4px 12px rgba(11, 21, 38, .08);
  --ombra-3: 0 12px 32px rgba(11, 21, 38, .14);
  /* Il bordo dei campi, un filo più deciso di quello delle carte. */
  --bordo-campo: #c3ccd8;
  /* L'intestazione delle tabelle e la riga sotto il mouse. */
  --fondo-intestazione: #f4f6f9;
  /* LE LARGHEZZE: tutto lo schermo fino a 2400 px; «comoda» (Impostazioni → L'aspetto) ferma a 1440 px come prima. */
  --larghezza-max: 150rem;
  --larghezza-comoda: 90rem;
  --larghezza-pagina: var(--larghezza-max);
  /* I PULSANTI E I CAMPI: alti 44 px, il bersaglio minimo del dito. */
  --alto-comando: 2.75rem;
  /* La barra di Zeta in basso: quanto spazio lasciarle sotto l'ultima riga (la barra, il suo margine e un respiro). */
  --spazio-barra: 7rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0a111d;
    --sfumatura: none;
    --scheda: #121b2b;
    --vetro: #121b2b;
    --testo: #e8edf5;
    --tenue: #9aa8bd;
    --bordo: #26324a;
    --piu: #5fcf93;
    --meno: #ff8a7a;
    --marchio: #5b9dff;
    --marchio-scuro: #003f88;
    --accento: #fdc500;
    --su-accento: #0b1526;
    --accento2: #fdc500;
    --accento3: #8ab4e8;
    --spicchio-spento: rgba(232, 237, 245, .1);
    --alone1: #12366e;
    --alone2: #5a4705;
    --ombra: 0 1px 2px rgba(0, 0, 0, .3);
    --tu: #fdc500;
    --tu-velo: #2e2608;
    --su-tu: #0b1526;
    --zeta: #6ea8ff;
    --zeta-velo: #13284a;
    --mondo: #e8edf5;
    --ombra-marchio: rgba(0, 0, 0, .4);
    --ombra-1: 0 1px 2px rgba(0, 0, 0, .3);
    --ombra-2: 0 4px 12px rgba(0, 0, 0, .35);
    --ombra-3: 0 12px 32px rgba(0, 0, 0, .45);
    --bordo-campo: #34425e;
    --fondo-intestazione: #172235;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  background-image: var(--sfumatura);
  background-attachment: fixed;
  color: var(--testo);
  font: 16px/1.5 var(--font);
  min-height: 100vh;
  /* Il pollice non arriva in cima: lo spazio sotto serve. */
  padding-bottom: 2rem;
  overflow-x: hidden;
}

/* I collegamenti nel verde del marchio, come in ZetaRetail. */
a { color: var(--marchio); text-underline-offset: .15em; }
a:hover { color: var(--marchio-scuro); }

.testa {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  background: var(--vetro);
  border-bottom: 1px solid var(--bordo);
  position: sticky;
  top: 0;
  z-index: 3;
}

.marchio {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--display); font-weight: 600; font-size: 1.15rem;
  color: var(--testo); text-decoration: none; letter-spacing: .01em;
}
.azienda { color: var(--tenue); font-size: .9rem; flex: 1; }
.esci { margin: 0; }
.esci button {
  background: none;
  border: 1px solid var(--bordo);
  color: var(--tenue);
  border-radius: var(--raggio);
  padding: .35rem .7rem;
  font-size: .85rem;
}

main { padding: 1rem; max-width: 46rem; margin: 0 auto; position: relative; z-index: 1; }
/* LA LARGHEZZA «COMODA» (Impostazioni → L'aspetto, grafica B onda 1): le pagine larghe si fermano a 1440 px, come prima. */
main.comoda { --larghezza-pagina: var(--larghezza-comoda); }
/* LA COLONNA DI 46REM È QUELLA DEL TELEFONO E DEL TABLET (H355, 4/11/2026): da 64rem in su la allarga pc.css, con la griglia
   di pagina, le carte affiancate e le schede a tre colonne. Qui resta il disegno di partenza. */

h1 { font-family: var(--display); font-weight: 600; font-size: 1.5rem; margin: .25rem 0 1rem; }
h2 { font-family: var(--display); font-weight: 600; font-size: 1.15rem; margin: 0 0 .75rem; }
h3 { font-size: .85rem; margin: 1rem 0 .35rem; color: var(--tenue);
     text-transform: uppercase; letter-spacing: .04em; }

.scheda {
  background: var(--vetro);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-grande);
  box-shadow: var(--ombra);
  padding: 1.1rem 1.15rem;
  margin-bottom: 1rem;
}

/* I numeri: in colonna sul telefono, in riga quando c'e' spazio. */
.numeri { display: grid; gap: .75rem; margin: 0; }
.numero dt { font-size: .8rem; color: var(--tenue); }
.numero dt { text-transform: uppercase; letter-spacing: .04em; font-size: .74rem; }
.numero dd { margin: 0; font-family: var(--display); font-size: 1.5rem; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.numero dd.dettaglio { font-size: .8rem; font-weight: 400; color: var(--tenue); }
.piu { color: var(--piu); }
.meno { color: var(--meno); }

.elenco { list-style: none; margin: 0; padding: 0; }
.elenco li {
  display: flex;
  gap: .5rem;
  align-items: baseline;
  padding: .5rem 0;
  border-bottom: 1px solid var(--bordo);
}
.elenco li:last-child { border-bottom: 0; }
.chi { flex: 1; }
.quando { color: var(--tenue); font-size: .85rem; }
.quanto { font-variant-numeric: tabular-nums; font-weight: 600; }

.vuoto, .nota { color: var(--tenue); font-size: .9rem; margin: .25rem 0; }
.negato { color: var(--meno); font-size: .9rem; margin: .25rem 0; }
.allarme {
  color: var(--meno);
  font-weight: 600;
  border-left: 3px solid var(--meno);
  padding-left: .6rem;
  margin: .75rem 0 .25rem;
}
.errore, .avviso {
  border-radius: var(--raggio);
  padding: .6rem .8rem;
  font-size: .9rem;
  border: 1px solid var(--bordo);
}
.errore { color: var(--meno); border-color: var(--meno); }
.avviso { color: var(--tenue); }

/* Il modulo di accesso: campi alti, perche' si compila col pollice. */
.modulo { display: grid; gap: .35rem; max-width: 22rem; margin-top: 1rem; }
.modulo label { font-size: .85rem; color: var(--tenue); margin-top: .5rem; }
.modulo input {
  font-size: 1rem;
  padding: .7rem .6rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--scheda);
  color: var(--testo);
}
.modulo button {
  margin-top: 1rem;
  font-size: 1rem;
  padding: .8rem;
  border: 0;
  border-radius: var(--raggio);
  background: var(--marchio);
  color: #fff;
  font-weight: 600;
}

a.azione { color: var(--marchio); }

/* La barra dei comandi: il campo e' largo quanto si puo', perche' ci si scrive una frase. */
.barra { display: flex; gap: .5rem; margin-bottom: 1rem; }
.barra input {
  flex: 1;
  min-width: 0;
  font-size: 1rem;
  padding: .7rem .6rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--scheda);
  color: var(--testo);
}
.barra button {
  font-size: 1rem;
  padding: .7rem 1.1rem;
  border: 0;
  border-radius: var(--raggio);
  background: var(--marchio);
  color: #fff;
  font-weight: 600;
}

/* Un'anteprima si distingue a occhio da una risposta: sta per scrivere qualcosa. */
.proposta { border-left: 3px solid var(--marchio); }

/* Il codice di collegamento: grande e spaziato, perche' va letto da uno schermo e digitato altrove. */
.codice {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.6rem;
  letter-spacing: .25em;
  font-weight: 700;
  color: var(--marchio);
  margin: .5rem 0;
  user-select: all;
}

.scelte { display: flex; gap: .5rem; margin-top: 1rem; }
.scelte form { margin: 0; }
.scelte button {
  font-size: .95rem;
  padding: .65rem 1.1rem;
  border: 0;
  border-radius: var(--raggio);
  background: var(--piu);
  color: #fff;
  font-weight: 600;
}
.scelte button.secondario {
  background: none;
  border: 1px solid var(--bordo);
  color: var(--tenue);
  font-weight: 400;
}

.piede {
  text-align: center;
  color: var(--tenue);
  font-size: .8rem;
  padding: 1rem;
}

/* ==================================================================================================
   LE CLASSI CHE IL MARKUP USAVA E IL FOGLIO NON DEFINIVA

   Censite le classi scritte nelle pagine contro quelle definite qui, un terzo non esisteva: `tipo`
   (36 volte), `coppia`, `terna`, `cerca`, `scaduto`, `pericolo`, `azioni`, `fatto`, `secondaria`.
   Le pagine restavano leggibili — il markup e' semantico — ma i marcatori che dovevano leggersi come
   etichette staccate uscivano come testo in linea: su un telefono «7,00 EUR IVA 22%» diventava una
   fila sola di parole, e un pulsante distruttivo aveva lo stesso aspetto di uno qualunque.

   Un difetto di questa forma non da' nessun segnale: la pagina c'e', il dato e' giusto, e nessun
   test di contenuto se ne accorge. Si trova solo guardando — o censendo, come qui.
   ================================================================================================== */

/* Un'etichetta staccata: unita', aliquota, stato, origine. Non e' decorazione, e' cio' che separa
   un numero dalla parola che lo qualifica. */
.tipo {
  display: inline-block;
  font-size: .78rem;
  font-weight: 400;
  color: var(--tenue);
  background: var(--fondo);
  border: 1px solid var(--bordo);
  border-radius: 999px;
  padding: .05rem .45rem;
  margin-left: .35rem;
  vertical-align: middle;
}

/* Cio' che chiede attenzione: una scadenza passata, uno scostamento, una riga non letta. */
.tipo.scaduto, .scaduto {
  color: var(--meno);
  border-color: var(--meno);
}

/* L'esito riuscito di un'azione, accanto a `negato` che e' il suo opposto. */
.fatto {
  color: var(--piu);
  font-size: .9rem;
  margin: .25rem 0;
}

/* Due e tre campi in fila su schermo grande, in colonna sul telefono. */
.coppia, .terna { display: grid; gap: .75rem; }

.cerca { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: .5rem 0 1rem; }
.cerca input { flex: 1; min-width: 10rem; }

.azioni { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }

a.azione.secondaria, .secondaria { color: var(--tenue); }

/* I moduli delle schermate del gestionale. Specificita' bassa e dentro `.scheda`, per non entrare in
   conflitto con `.modulo` e `.barra`, che hanno le loro regole e un altro scopo. */
.scheda form { display: grid; gap: .25rem; margin: 1rem 0 0; }
.scheda form label { display: grid; gap: .2rem; font-size: .85rem; color: var(--tenue); }
.scheda form input[type="text"],
.scheda form input:not([type]),
.scheda form input[type="search"],
.scheda form input[type="email"],
.scheda form input[type="number"],
.scheda form input[type="date"],
.scheda form input[type="file"],
/* I CAMPI CHE MANCAVANO (9/11/2026, il primo incontro: la password e il telefono dell'assistenza erano senza grafica). */
.scheda form input[type="password"],
.scheda form input[type="tel"],
.scheda form input[type="url"],
.scheda form input[type="datetime-local"],
.scheda form input[type="time"],
.scheda form input[type="month"],
.scheda form select,
.scheda form textarea {
  font: inherit;
  color: var(--testo);
  background: var(--scheda);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: .5rem .6rem;
  width: 100%;
}
.scheda form button {
  font: inherit;
  font-weight: 600;
  color: var(--scheda);
  background: var(--marchio);
  border: 0;
  border-radius: var(--raggio);
  padding: .6rem 1rem;
  margin-top: .75rem;
  justify-self: start;
  cursor: pointer;
}
.scheda form button:disabled { opacity: .5; cursor: not-allowed; }

/* Un pulsante che cancella o mette da parte NON deve avere l'aspetto di uno qualunque: il colore
   e' l'unico avviso che arriva prima del clic. */
.scheda form button.pericolo { background: var(--meno); }

/* Il fuoco da tastiera resta visibile: e' la sola guida di chi non usa il mouse. */
.scheda form :focus-visible { outline: 2px solid var(--marchio); outline-offset: 1px; }

/* ==================================================================================================
   L'ANTEPRIMA DI UNA FATTURA RICEVUTA, riga per riga
   ================================================================================================== */

.riga-fattura {
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: .5rem .75rem 1rem;
  margin: 1rem 0 0;
}
.riga-fattura legend { font-weight: 600; font-size: .9rem; padding: 0 .35rem; }
.riga-fattura .elenco li { padding: .25rem 0; }

/* Le tre scelte della riga: in colonna, perche' su un telefono tre bottoni in fila diventano tre
   bersagli troppo piccoli per un pollice. Classe PROPRIA e non `.scelte`, che e' gia' usata per una
   fila di pulsanti e darebbe due regole in conflitto sullo stesso nome. */
.scelta-riga { display: grid; gap: .35rem; margin: .75rem 0; }
.scelta-riga label {
  display: flex;
  gap: .5rem;
  align-items: center;
  font-size: .95rem;
  color: var(--testo);
}
.scelta-riga input[type="radio"] { width: auto; margin: 0; }

.ricorda {
  display: flex !important;
  gap: .5rem;
  align-items: flex-start;
  margin-top: .75rem;
  font-size: .85rem;
}
.ricorda input[type="checkbox"] { width: auto; margin: .2rem 0 0; }

/* L'INTERRUTTORE (C4a, 11/11/2026): la casella con la sua scritta accanto. La classe era usata in una ventina di pagine
   e non aveva una regola: la casella prendeva tutta la riga e finiva centrata sopra la scritta. */
.scheda form label.interruttore, label.interruttore { display: flex; gap: .5rem; align-items: flex-start; }
.scheda form label.interruttore input[type="checkbox"], label.interruttore input[type="checkbox"] { width: auto; flex: 0 0 auto; margin: .2rem 0 0; }

/* CERCARE DENTRO UN ELENCO (C11, 11/11/2026): il campo, il pulsante e «togli la ricerca» su una riga sola. */
.scheda form.cerca-nell-elenco, form.cerca-nell-elenco { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin: .5rem 0 .75rem; }
form.cerca-nell-elenco label { flex: 1 1 14rem; margin: 0; }
form.cerca-nell-elenco button { flex: 0 0 auto; margin: 0; }
/* La ricerca in un riquadro suo, in testa a una pagina a carte: prende tutta la riga. */
.cerca-in-testa { grid-column: 1 / -1; }
.cerca-in-testa form.cerca-nell-elenco { margin: 0; }
.totali-dell-elenco { display: flex; flex-wrap: wrap; gap: .75rem; align-items: baseline; margin-top: .75rem; }

.esito-fatture li { display: block; }

/* IL RIORDINO: una riga per articolo, a blocco e non in fila, perche' ogni riga porta il conto
   (magazzino, impegnati, in arrivo, scorta) e un campo con la quantita'. Una riga sola non ci sta. */
.riordino li, .righe-modificabili li { display: block; padding: .6rem 0; }
.righe-modificabili form { margin: .25rem 0 0; }
.riordino label.interruttore { margin: 0; }
.riordino form { margin: 0; }
.conto {
  display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0;
  font-size: .85rem; color: var(--tenue); font-variant-numeric: tabular-nums;
}
.conto .tipo { font-weight: 600; }

/* I FORNITORI DI UN ARTICOLO: ogni riga e' un suo modulo, perche' si modifica dove si legge. */
.fornitori li { display: block; padding: .6rem 0; }

/* Una sede sta su piu' righe: nome, specie e indirizzo uno sotto l'altro. `.elenco li` e' in fila
   e qui andrebbe stretto, come per i fornitori di un articolo. */
.sedi li, .matricole li, .contratti li { display: block; padding: .6rem 0; }
.sedi li .nota, .matricole li .nota, .contratti li .nota { display: block; }
.fornitori form { margin: .25rem 0 0; }
.fornitori .quattro { display: grid; gap: .5rem; }
.preferito { color: var(--marchio); font-weight: 600; }
.esito-fatture .nota { margin: .15rem 0 .15rem .75rem; }

/* DA DECIDERE (H160): ogni voce e' un'azione pronta, su piu' righe — titolo, perche', messaggio, pulsanti.
   L'urgente si distingue dal bordo, non da un colore di testo che in tema scuro sparirebbe. */
.decisioni { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .75rem; }
.decisione { display: grid; gap: .3rem; padding: .75rem 0; border-top: 1px solid var(--bordo); }
.decisione.urgente { border-top: 2px solid var(--meno); }
/* LA PAROLA «URGENTE» (H204) accanto al bordo: si legge anche senza colori. */
.etichetta-urgente { display: inline-block; margin-right: .4rem; padding: 0 .4rem; border: 1px solid var(--meno);
  border-radius: var(--raggio); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
/* IL RIEPILOGO DI «DA FARE» (H204): una riga di collegamenti alle sezioni. */
.riepilogo { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.riepilogo a { padding: .3rem .7rem; border: 1px solid var(--bordo); border-radius: 999px; text-decoration: none; }
.riepilogo a.urgenti { border-color: var(--meno); font-weight: 700; }
.decisione .tipo { display: block; }
.decisione details summary { cursor: pointer; color: var(--marchio); }
.decisione .messaggio { white-space: pre-line; margin: .4rem 0; padding: .5rem .6rem;
  border: 1px solid var(--bordo); border-radius: var(--raggio); font-size: .9rem; }
.decisione form { margin: .25rem 0 0; }
.decisione form.scarta button { margin-top: .25rem; }
/* RIMANDA (H208): due pulsanti leggeri sulla stessa riga. */
.decisione form.rimanda { display: flex; flex-wrap: wrap; gap: .4rem; }
/* TUTTE INSIEME (H203): una riga per tipo, sopra le singole decisioni. */
.scheda form.tutte { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .5rem 0 0;
  padding: .5rem .6rem; border: 1px dashed var(--bordo); border-radius: var(--raggio); }
.scheda form.tutte span { flex: 1 1 12rem; font-weight: 600; }
/* IL FILTRO PER TIPO (H205): la voce scelta si riconosce dal bordo pieno, non solo dal colore. */
.filtro-tipi { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.filtro-tipi a { padding: .2rem .6rem; border: 1px dashed var(--bordo); border-radius: 999px; text-decoration: none; font-size: .9rem; }
.filtro-tipi a[aria-current="page"] { border-style: solid; border-color: var(--marchio); font-weight: 700; }

/* LA HOME E LE QUATTRO PORTE (H164). La frase di stato e' la prima cosa che si legge; l'urgenza si vede dal
   bordo; l'elenco degli archivi si apre in un pannello sotto l'intestazione, a tutta larghezza sul telefono. */
.attenzione { border-left: 3px solid var(--meno); }
.righe-home li { display: block; padding: .5rem 0; }
.righe-home .tipo { display: block; }
.ha-fatto { margin: 1rem 0; }
.cerca-risultati h3 { margin-top: 1rem; }
.crea-azioni { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); list-style: none; padding: 0; }
.crea-azioni a { display: block; padding: .75rem; border: 1px solid var(--bordo); border-radius: var(--raggio);
  text-decoration: none; color: var(--testo); font-weight: 600; }
.crea-azioni a:hover, .crea-azioni a:focus-visible { border-color: var(--marchio); color: var(--marchio); }

@media (min-width: 34rem) {
  .numeri { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
  .fornitori .quattro { grid-template-columns: repeat(4, 1fr); }
  /* minmax(0, …) e non 1fr (grafica B, onda 1): con 1fr la colonna non scendeva sotto la larghezza naturale del campo, e nella
     scheda articolo i campi uscivano dalla carta. */
  .coppia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .terna { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scelta-riga { grid-auto-flow: column; }
}

/* ------------------------------------------------------------------------------------------------------
   H188 — LO STILE DI ZETARETAIL: sfondo, marchio, medaglione di accesso, cruscotto della home.
   ------------------------------------------------------------------------------------------------------ */

/* GLI ALONI, LA TESSERA DEL MARCHIO E IL MEDAGLIONE CON LA MEZZALUNA (H188) sono stati tolti il 12/11/2026 (grafica B, onda 1):
   nessuna pagina li usava più (la porta di accesso è la Z centrale dal 9/11). */

.piede { position: relative; z-index: 1; text-align: center; color: var(--tenue); font-size: .8rem; padding: 1rem; }

/* Per chi legge con lo schermo vocale ma non deve vedersi. */
.nascosto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* I pulsanti principali: blu pieno, testo chiaro. */
.modulo button, .scheda form button { border-radius: var(--raggio); }
.modulo input, .scheda form input, .scheda form select, .scheda form textarea { border-radius: var(--raggio); }

/* IL CRUSCOTTO DELLA HOME. Sul telefono: il benvenuto, l'anello, e sotto le aree in due colonne.
   Da 40rem la bozza: tre in alto, proposte e scadenze ai lati dell'anello, incassi sotto. */
/* Il cerchio colorato nell'angolo, come le schede dei numeri di ZetaRetail. */

/* ------------------------------------------------------------------------------------------------------
   H189 — LO STESSO LINGUAGGIO IN OGNI SCHERMATA. Le pagine usano poche classi comuni (scheda, elenco, tipo,
   azione, menu): ridisegnate qui, cambiano tutte insieme senza toccare il markup.
   ------------------------------------------------------------------------------------------------------ */

/* LA Z E' UNA PORTA: tocca e si aprono le azioni rapide. */

/* Le azioni come pulsanti a pillola: la principale piena di verde chiaro, la secondaria solo bordata. */
a.azione {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem 1rem; border-radius: 999px;
  font-weight: 600; text-decoration: none;
  color: var(--marchio);
  background: color-mix(in srgb, var(--marchio) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--marchio) 25%, transparent);
  transition: background .15s ease;
}
a.azione:hover { background: color-mix(in srgb, var(--marchio) 20%, transparent); color: var(--marchio); }
a.azione.secondaria { color: var(--tenue); background: transparent; border-color: var(--bordo); }
a.azione.secondaria:hover { color: var(--testo); background: var(--vetro); }

/* I pulsanti dei moduli: il verde del marchio in sfumatura, come la mezzaluna. Il pericolo resta rosso. */
.scheda form button, .barra button, .modulo button:not(.mezzaluna) {
  background: linear-gradient(135deg, var(--marchio), var(--marchio-scuro));
  color: #fff;
  box-shadow: 0 6px 16px var(--ombra-marchio);
}
.scheda form button.pericolo, .scheda form button.secondario, .scheda form button.secondaria { box-shadow: none; }
.scheda form button.pericolo { background: var(--meno); }
.scheda form button:hover:not(:disabled), .barra button:hover { filter: brightness(1.07); }

/* Le etichette: pillole morbide sul vetro invece di un riquadro grigio. */
.tipo { background: color-mix(in srgb, var(--testo) 5%, transparent); border-color: transparent; }

/* Gli elenchi: righe che si illuminano sotto il dito, nomi in evidenza, importi in Fraunces. */
.elenco li { transition: background .12s ease; border-radius: 10px; }
.elenco li:hover { background: color-mix(in srgb, var(--marchio) 5%, transparent); }
.elenco .chi a { color: var(--testo); font-weight: 600; text-decoration: none; }
.elenco .chi a:hover { color: var(--marchio); text-decoration: underline; }
.quanto { font-family: var(--display); font-variant-numeric: lining-nums tabular-nums; }

/* I campi: più morbidi, con l'anello verde quando si scrive. */
.barra input, .scheda form input, .scheda form select, .scheda form textarea { transition: border-color .15s ease, box-shadow .15s ease; }
.barra input:focus, .scheda form input:focus, .scheda form select:focus, .scheda form textarea:focus {
  outline: none; border-color: var(--marchio);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marchio) 18%, transparent);
}

/* Le porte in testata: la pagina corrente e il passaggio del mouse si vedono come una pillola. */

/* IL MENU' ARCHIVI: un pannello di vetro sotto la testata, i gruppi come titoletti e le voci come pillole. */

/* CREA: le azioni come tessere di vetro, con il segno + nel cerchio del marchio. */
.crea-azioni { gap: .75rem; }
.crea-azioni a {
  display: flex; align-items: center; gap: .75rem;
  padding: .9rem 1rem;
  background: var(--vetro);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-grande);
  box-shadow: var(--ombra);
  transition: transform .15s ease, border-color .15s ease;
}
.crea-azioni a::before {
  content: "+"; flex: none;
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  font-family: var(--display); font-size: 1.2rem; color: #fff;
  background: linear-gradient(135deg, var(--marchio), var(--marchio-scuro));
}
.crea-azioni a:hover, .crea-azioni a:focus-visible { transform: translateY(-2px); }

/* Le decisioni e i messaggi pronti: un riquadro pieno dentro il vetro, per leggerli bene. */
.decisione .messaggio { background: var(--scheda); }
.attenzione { border-left: 3px solid var(--meno); }
.proposta { border-left: 3px solid var(--marchio); }

/* Gli avvisi della pagina: una pillola leggibile invece del solo bordo. */
.errore { background: color-mix(in srgb, var(--meno) 8%, var(--scheda)); }
.avviso { background: var(--vetro); }

/* ------------------------------------------------------------------------------------------------------
   H190 — LA PAGINA DELLA Z: due grandi pulsanti, la fotocamera e i file. L'input vero sta dentro l'etichetta: si tocca
   tutta la tessera. Senza script: dopo la scelta, «Invia».
   ------------------------------------------------------------------------------------------------------ */
.carica-scelte { display: grid; gap: .75rem; }
@media (min-width: 34rem) { .carica-scelte { grid-template-columns: 1fr 1fr; } }
.carica-modulo { display: grid; gap: .5rem; margin: 0 !important; }
.carica-pulsante {
  display: grid !important; place-items: center; gap: .4rem; text-align: center;
  padding: 1.4rem 1rem; cursor: pointer;
  border: 2px dashed color-mix(in srgb, var(--marchio) 35%, transparent);
  border-radius: var(--raggio-grande);
  background: color-mix(in srgb, var(--marchio) 6%, var(--scheda));
  color: var(--testo) !important; font-weight: 600; font-size: 1rem !important;
}
.carica-pulsante:hover { border-color: var(--marchio); }
.carica-foto { border-style: solid; }
.carica-segno {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  font-size: 1.4rem; color: #fff;
  background: linear-gradient(135deg, var(--marchio), var(--marchio-scuro));
}
.carica-pulsante input[type="file"] { max-width: 100%; font-size: .8rem; font-weight: 400; color: var(--tenue); }
.carica-modulo button { justify-self: stretch !important; margin-top: 0 !important; }
.documenti li { display: block; padding: .7rem .25rem; }
.documenti li .nota { display: block; }
.documenti .categoria { display: flex; gap: .5rem; align-items: center; margin: .35rem 0 0 !important; }
.documenti .categoria select { width: auto !important; }
.documenti .categoria button { margin-top: 0 !important; }

/* H191 — il debito proposto da un documento: i tre campi in fila quando c'è posto. */
.documenti .debito { display: grid; gap: .5rem; margin: .5rem 0 0 !important; padding: .6rem .75rem;
  border: 1px dashed color-mix(in srgb, var(--marchio) 35%, transparent); border-radius: var(--raggio); }
@media (min-width: 40rem) { .documenti .debito { grid-template-columns: 1fr 1fr 1fr auto; align-items: end; } }
.documenti .debito button { margin-top: 0 !important; }

/* H192 — il carico proposto da un DDT: le righe da spuntare. */
.documenti .carico { display: grid; gap: .35rem; margin: .5rem 0 0 !important; padding: .6rem .75rem;
  border: 1px dashed color-mix(in srgb, var(--accento3) 35%, transparent); border-radius: var(--raggio); }
.documenti .carico label { display: flex !important; gap: .4rem; align-items: center; flex-wrap: wrap; color: var(--testo) !important; }
.documenti .carico button { justify-self: start; margin-top: .25rem !important; }

/* H193 — un codice del fornitore da associare a un articolo. */
.documenti .carico .associa { display: grid !important; grid-template-columns: auto 1fr; gap: .5rem; align-items: center; }
.documenti .carico .associa input { width: 100%; }

/* ------------------------------------------------------------------------------------------------------
   H197 — LE TRE SCHEDE: Home, Da fare, Fatto da solo. Pillole grandi in testata, con il contatore; Cerca, Crea e
   Archivi accanto, più piccoli.
   ------------------------------------------------------------------------------------------------------ */

/* Il registro di «Fatto da solo»: le viste più tenui, le annullate barrate. Ogni riga ha la voce di Zeta (H408a: voce-zeta e
   la piccola Z di voci.css, al posto del bordo blu delle nuove). */
.fatto-da-solo li { display: block; padding: .7rem .25rem; }
.fatto-da-solo li .nota { display: block; }
.fatto-da-solo li.vista { opacity: .8; }
.fatto-da-solo li.annullata strong { text-decoration: line-through; color: var(--tenue); }
.fatto-da-solo .azioni-riga { display: flex; gap: .5rem; margin-top: .35rem; }
.fatto-da-solo .azioni-riga form { margin: 0 !important; }
.fatto-da-solo .azioni-riga button { margin-top: 0 !important; }

/* ------------------------------------------------------------------------------------------------------
   H210 — LA HOME SISTEMATA. I primi passi con le spiegazioni in testo tenue (le pillole sono per le etichette corte),
   i passi da fare riconoscibili come collegamenti, l'alternativa piccola; «Tutte le pagine» chiusa; il piè di pagina tenue.
   ------------------------------------------------------------------------------------------------------ */
.primi-passi .elenco li { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; align-items: baseline; }
.primi-passi .chi { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .5rem; }
.primi-passi .chi a strong { color: var(--marchio); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.primi-passi li.fatto .chi strong { color: var(--piu); font-weight: 600; }
.primi-passi .perche { flex-basis: 100%; font-size: .86rem; color: var(--tenue); }
.primi-passi .alternativa { font-size: .86rem; white-space: nowrap; }
.primi-passi .alternativa a { font-family: inherit; font-weight: 500; }
@media (max-width: 40rem) { .primi-passi .elenco li { grid-template-columns: 1fr; } }
.nota.piede { text-align: center; margin-top: 1.5rem; }
/* LA SCHEDA DOVE SEI (H210): piena nel colore del marchio, con il contatore che resta leggibile. */

/* ------------------------------------------------------------------------------------------------------
   H212 — LA TESTATA SUL TELEFONO. Le schede andavano a capo parola per parola e «Esci» usciva dallo schermo. Sotto i
   44rem: marchio, azienda ed «Esci» sulla prima riga; le tre schede in tre colonne uguali, su una riga ciascuna; Cerca,
   Crea e Archivi piccoli, centrati, sotto.
   ------------------------------------------------------------------------------------------------------ */
@media (max-width: 44rem) {
  .testa { flex-wrap: wrap; row-gap: .5rem; padding: .6rem .75rem; }
  .testa .azienda { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .testa .esci { order: 2; }
}

/* I CAMPI FILE NEL LINGUAGGIO DEL GESTIONALE (H212): il pulsante grigio di sistema stonava nella pagina della Z. */
input[type="file"] { font-size: .85rem; color: var(--tenue); max-width: 100%; }
input[type="file"]::file-selector-button {
  margin-right: .6rem; padding: .4rem .9rem; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--marchio);
  background: color-mix(in srgb, var(--marchio) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--marchio) 30%, transparent);
}
input[type="file"]::file-selector-button:hover { background: color-mix(in srgb, var(--marchio) 16%, transparent); }

/* LA DISPOSIZIONE LARGA SU COMPUTER (H270) È ASSORBITA DALLA LARGHEZZA (grafica B, onda 1, 12/11/2026): le pagine con più
   schede vanno già in colonne per tutti (pc.css), e quanto è larga la pagina lo dice «Larghezza» in Impostazioni → L'aspetto
   (main.comoda, altrimenti tutto lo schermo). La classe «larga» resta sul main di chi l'aveva scelta, senza regole. */

/* LA Z DEL MARCHIO COME IMMAGINE (1/11/2026): blu sul chiaro, bianca sullo scuro; <picture> sceglie il file, qui la misura. */
/* Il marchio disegnato (SegnoDiZeta.razor, 9/11/2026): prende il colore di Zeta dal tema, alto quanto il contenitore. */
.segno-z { display: inline-block; height: 1.6rem; width: auto; vertical-align: middle; color: var(--zeta); }
.segno-z svg { height: 100%; width: auto; display: block; overflow: visible; }

/* ---- IL PRIMO INCONTRO CON ZETA (H401c, 8/11/2026): il gesto, il cantiere che si racconta, «Ecco la tua Zeta». Solo i gettoni
   di sempre e le tre voci (voci.css): il blu è Zeta che lavora, la linguetta gialla la domanda che tocca a te. ---- */
.benvenuto .incontro-gesto h1 { margin-top: .6rem; }
.benvenuto .incontro-modulo { display: grid; gap: .8rem; max-width: 40rem; }
.benvenuto .incontro-testa { margin-bottom: 1rem; }
.benvenuto .incontro-testa .avanza { max-width: 40rem; margin: .4rem 0; }
.benvenuto .passi-del-cantiere li { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; }
.benvenuto .passi-del-cantiere .passo-in-corso strong { color: var(--zeta); }
.benvenuto .passi-del-cantiere .passo-in-attesa, .benvenuto .passi-del-cantiere .passo-saltato { color: var(--tenue); }
.benvenuto .passi-del-cantiere .passo-aspetta strong { color: var(--tu-testo, inherit); }
.benvenuto .incontro-domanda { position: relative; border-left: 5px solid var(--tu); }
.benvenuto .incontro-scelte { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0; }
.benvenuto .incontro-risposta { display: flex; gap: .5rem; flex-wrap: wrap; margin: .6rem 0; }
.benvenuto .intanto-carte li { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; }
.benvenuto .intanto-scadenza strong { color: var(--zeta); }
/* MENTRE ZETA LAVORA, TRE COLONNE FISSE (9/11/2026; Giuseppe: «la grafica si muta, spostandomi il box delle domande»): passi a
   sinistra, il riquadro delle domande in cima al centro, la guida in cima a destra. Sul telefono una colonna, la domanda prima. */
.benvenuto .incontro-in-corso { display: grid; gap: 1rem; align-items: start; }
.benvenuto .incontro-colonna { display: grid; gap: 1rem; min-width: 0; align-content: start; }
.benvenuto .incontro-colonna > .scheda { margin: 0; }
/* «ADESSO» IN RILIEVO (9/11/2026): la cosa che Zeta fa ora, grande, in cima al centro; con una domanda aperta il resto si attenua. */
.benvenuto .incontro-adesso { border-top: 4px solid var(--zeta); min-height: 8.5rem; }
.benvenuto .incontro-adesso .adesso-etichetta { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--zeta); }
.benvenuto .incontro-adesso h2 { margin: .3rem 0 .4rem; font-size: 1.35rem; line-height: 1.25; }
.benvenuto .incontro-in-corso.con-domanda > .incontro-colonna:not(.incontro-centro) { opacity: .45; transition: opacity .3s ease; }
.benvenuto .incontro-in-corso.con-domanda .incontro-domanda { box-shadow: 0 10px 28px color-mix(in srgb, var(--zeta) 22%, transparent); }
.benvenuto .guida-di-zeta h3 { margin: .7rem 0 .15rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--zeta); }
.benvenuto .guida-di-zeta p { margin: 0; }
.benvenuto .intanto-carte li { min-height: 4.2rem; }
@media (min-width: 64rem) {
  .benvenuto .incontro-in-corso { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); }
}
@media (max-width: 63.99rem) {
  .benvenuto .incontro-in-corso > .incontro-colonna:nth-child(2) { order: -1; }
}

/* ---- L'ARCHIVIO A CARTE (8/11/2026, Giuseppe: «graficamente è rotto la zona documenti»): ogni documento una carta; sul telefono
   una sotto l'altra, sul PC affiancate. Il tipo in alto come fonte, il titolo che va a capo anche con i nomi di file lunghi,
   l'origine in due righe al massimo. Ciò che tocca alla persona (debito, carico) ha la linguetta della voce «tu».
   H408a: la griglia delle carte è quella di tutte le pagine (pc.css, «griglia-pc a-carte»); ogni documento è una scheda, e
   qui resta solo il suo interno. ---- */
.archivio-azioni { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.carta-documento { display: flex; flex-direction: column; gap: .3rem; min-width: 0; position: relative; }
.carta-documento.linguetta { padding-right: calc(var(--taglio) + .6rem); }
.carta-documento .testa-documento { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.carta-documento .titolo-documento { font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
.carta-documento .chi-documento { font-weight: 600; color: var(--testo); }
.carta-documento .origine-documento, .carta-documento .file-documento {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.carta-documento .cambia-tipo { margin-top: auto; }
.carta-documento .cambia-tipo summary { cursor: pointer; color: var(--tenue); font-size: .85rem; padding-top: .3rem; }
.carta-documento .cambia-tipo[open] summary { margin-bottom: .35rem; }

/* ---- LA POSTA A CARTE (8/11/2026, Giuseppe: «la zona posta anche»): chi e cosa, la lettura di Zeta, i tocchi. Sul telefono una
   parte sotto l'altra con i pulsanti in fila; sul PC tre colonne, il testo a tutta riga. «Correggi» apre spostare e cambiare tipo. */
.carte-posta { list-style: none; padding: 0; }
.carte-posta > li.carta-posta { display: grid; gap: .5rem; min-width: 0; position: relative; }
/* DA GUARDARE È DELLA PERSONA (H408a): la linguetta gialla (voci.css) sull'email ancora da fare; i tocchi restano fuori dal taglio. */
.carte-posta > li.carta-posta.linguetta { padding-right: calc(var(--taglio) + .5rem); }
.carta-posta .posta-chi, .carta-posta .posta-zeta { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.carta-posta .posta-chi strong { overflow-wrap: anywhere; line-height: 1.3; }
.carta-posta .mittente { font-weight: 600; color: var(--testo); overflow-wrap: anywhere; }
.carta-posta .posta-zeta .lettura { display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; }
.carta-posta.dubbio .posta-zeta .lettura strong { color: var(--meno); }
.carta-posta .posta-azioni { display: flex; flex-wrap: wrap; gap: .4rem; align-items: flex-start; align-content: flex-start; }
.carta-posta .posta-azioni form { margin: 0 !important; }
.carta-posta .posta-azioni button, .carta-posta .posta-azioni .azione { margin: 0 !important; padding: .4rem .75rem; font-size: .88rem; }
.carta-posta .correggi { flex-basis: 100%; }
.carta-posta .correggi summary { cursor: pointer; color: var(--tenue); font-size: .85rem; }
.carta-posta .correggi form { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-top: .4rem !important; }
.carta-posta .correggi label { display: flex !important; gap: .35rem; align-items: center; }
.carta-posta .correggi select { width: auto !important; }
.carta-posta .posta-testo summary { cursor: pointer; color: var(--tenue); font-size: .85rem; }
.carta-posta .posta-testo .messaggio { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 18rem; overflow: auto; }
@media (min-width: 64rem) {
  .carte-posta > li.carta-posta {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(14rem, .8fr);
    grid-template-areas: "chi zeta azioni" "testo testo testo";
    column-gap: 1.25rem; align-items: start;
  }
  .carta-posta .posta-chi { grid-area: chi; }
  .carta-posta .posta-zeta { grid-area: zeta; }
  .carta-posta .posta-azioni { grid-area: azioni; justify-content: flex-end; }
  .carta-posta .posta-testo { grid-area: testo; }
  .carta-posta .correggi { text-align: right; }
  .carta-posta .correggi form { justify-content: flex-end; }
}

/* LE PARTI DELLA CARTA NON SI ALLUNGANO: la data e «in archivio» restano etichette corte, non barre a tutta larghezza. */
.carta-posta .posta-chi, .carta-posta .posta-zeta { align-items: flex-start; }
/* IL DEBITO DENTRO LA CARTA DEL DOCUMENTO: due campi per riga e il pulsante sotto, a tutta larghezza; prima usciva dalla carta. */
.carta-documento .debito { grid-template-columns: 1fr 1fr !important; }
.carta-documento .debito label:first-of-type { grid-column: 1 / -1; }
.carta-documento .debito input { width: 100%; min-width: 0; }
.carta-documento .debito button { grid-column: 1 / -1; justify-self: stretch; }
.carta-documento .carico { min-width: 0; }

/* ---- H406b — LA SCHEDA UNICA E LE FATTURE IN UN POSTO (8/11/2026). I ruoli della controparte come etichette sotto il nome; sulle
   righe delle fatture le strade (XML, PDF letto, email) con la voce del mondo (.fonte, voci.css) e gli esiti in fila; la riga che
   aspetta una persona ha la linguetta gialla della voce «tu», come le carte dell'archivio. ---- */
.ruoli-della-controparte { display: flex; gap: .4rem; margin: -.25rem 0 .75rem; }
.azioni-del-ruolo { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.fatture-unite .chi { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; }
.fatture-unite .esiti { display: flex; flex-wrap: wrap; gap: .25rem; }
.fatture-unite > li { flex-wrap: wrap; }
.fatture-unite > li.da-fare { box-shadow: inset 4px 0 0 var(--tu); }
.fatture-unite form.debito { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin: .4rem 0 .2rem; flex-basis: 100%; }
.fatture-unite form.debito input { min-width: 0; }
.fatture-unite .azioni { margin: .3rem 0 0; flex-basis: 100%; }
/* ---- H407b — I DOCUMENTI IN UN POSTO (8/11/2026): DDT, ordini e resi usano la riga delle fatture unite (ElencoDeiDocumenti.razor);
   le azioni di una riga (i pezzi in garanzia: a chi, spedito, arrivato, respinto) stanno in fila sotto. ---- */
.documenti-uniti .azioni-della-riga { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; flex-basis: 100%; margin: .3rem 0 0; }
.documenti-uniti .azioni-della-riga form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: end; margin: 0; }

/* OGNI ELENCO SI STAMPA DAL BROWSER (C12f, 11/11/2026): inventario, scadenzario, prima nota, listino, registri IVA non hanno
   un PDF loro; con Ctrl+P (o «Stampa» del telefono) esce la pagina senza la testata, la barra, i moduli e i pulsanti, a
   tutta larghezza e in nero su bianco. */
@media print {
  header.testa, footer.piede, nav.barra-di-zeta, .non-in-stampa, .non-stampa { display: none !important; }
  main form, main button, main a.azione, main .azioni, main .azioni-del-ruolo { display: none !important; }
  body, main, section.scheda { background: #fff !important; color: #000 !important; box-shadow: none !important; }
  main, main.larga, main.comoda { max-width: none !important; margin: 0 !important; padding: 0 !important; }
  .griglia-pc, .griglia-pc.a-colonne { display: block !important; }
  section.scheda { border: 0 !important; padding: 0 0 .6rem !important; break-inside: auto; }
  ul.elenco > li { break-inside: avoid; }
  a { color: #000 !important; text-decoration: none !important; }
  /* GUARDATO SUL FOGLIO (12/11/2026): l'altezza minima del corpo aggiungeva una pagina bianca in fondo; i riquadri fatti di soli
     comandi lasciavano il titolo senza niente sotto; il collegamento al CSV sul foglio non serve; in cima chi stampa e quando. */
  body { min-height: 0 !important; padding-bottom: 0 !important; background-image: none !important; }
  section.scheda:has(form):not(:has(ul.elenco, table, dl)) { display: none !important; }
  main a[href*="/csv"], main .avviso-a-tutti { display: none !important; }
  .solo-in-stampa { display: block !important; }
}
.solo-in-stampa { display: none; }
/* DUE IMPORTI NELLA STESSA RIGA NON SI TOCCANO (12/11/2026): sul telefono e sul foglio «351,00 €77,22 €» si leggeva come una
   cifra sola. Sul PC ognuno ha la sua colonna e la regola di pc.css azzera il margine. */
.elenco > li > .quanto > .a-destra + .a-destra { margin-left: 1.25rem; }