/* =============================================================================================
 * JURA Club — I MODULI: campi, scelte, gruppi, area di testo, selettore, interruttore
 * =============================================================================================
 * IT: [flusso S] 29/09, voluto da Claudio (_coordinamento/ANALISI_MODULI_FE_2026-09-29.md, Collaudo #175-#182).
 *     Si carica subito dopo `componenti.css` (viste/parti/documento-inizio.eta).
 *     PARTE 1 — lo SPOSTAMENTO testuale da `componenti.css`, identico e nello stesso ordine: §6 MODULI e la zona
 *     di caricamento, il file dentro `.campo`, la scelta e il gruppo di campi, area di testo, selettore e
 *     interruttore. `componenti.css` era al suo tetto (D-249: si spezza, non si alza).
 *     PARTE 2 — le REGOLE NUOVE, che danno ai moduli un'altezza, un ritmo e un allineamento propri invece di
 *     quelli inventati vista per vista. Usano i token di `tokens.css` §6-bis.
 *     ⚠ La cascata: questo foglio viene dopo `componenti.css` e prima di `sito.css` e `utilita.css`. Le regole
 *       spostate non hanno concorrenti successivi in `componenti.css` sugli stessi selettori (l'unica,
 *       `.passo:has(h3) .gruppo-campi`, ha specificità più alta). Il ritmo della parte 2 ha specificità (0,2,0)
 *       o più apposta: batte i `.mt-*` / `.mb-*` di `utilita.css` (0,1,0), che non usano `!important`.
 * EN: Form controls: moved verbatim from componenti.css, then the new height, rhythm and alignment rules.
 * ============================================================================================= */

/* ---------------------------------------------------------------------------------------------
 * 6. MODULI
 * --------------------------------------------------------------------------------------------- */

.campo { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-4); }
.campo__etichetta, .zona-upload > label { font-size: var(--testo-sm); font-weight: var(--peso-forte); color: var(--colore-testo-forte); }
.campo__aiuto { font-size: var(--testo-xs); color: var(--colore-testo-tenue); }
.campo__errore { font-size: var(--testo-xs); color: var(--stato-errore); font-weight: var(--peso-forte); }
/* 29/09 ㉕: un aiuto in `<p>` portava il margine del paragrafo (60 px invece di 24 in registrazione). */
.campo > :is(.campo__aiuto, .campo__errore) { margin: 0; }

/* IT: `password` mancava dall'elenco, e non per una ragione: il campo della password su `/accesso`
 *     era l'unico controllo di modulo del portale reso senza bordo, senza spaziatura e senza
 *     larghezza piena. Un elenco di tipi enumerati a mano è esattamente il posto in cui una cosa
 *     del genere si perde in silenzio. */
.campo input[type="text"], .campo input[type="email"], .campo input[type="number"],
.campo input[type="password"], .campo input[type="date"], .campo select, .campo textarea {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--colore-bordo-campo);
  border-radius: var(--raggio);
  /* `background-color` e non la scorciatoia `background`: la scorciatoia azzerava anche
   * l'immagine, cioè la freccia della tendina disegnata dalla regola R2 qui sotto. */
  background-color: var(--colore-superficie);
  font-size: var(--testo-md);
  width: 100%;
  transition: border-color var(--durata-svelta) var(--curva),
              box-shadow  var(--durata-svelta) var(--curva);
}

/* #202: il `padding` qui sopra cancellava lo spazio della freccia (base.css). `--sp-6`: la freccia sta a 13-23 px. */
.campo select:not([multiple]):not([size]) { padding-right: var(--sp-6); }

/* IT: Il sorvolo su un campo compilabile — e solo su quello: un campo spento non deve promettere
 *     che ci si possa scrivere. */
.campo:not(.campo--errore) input:hover:not(:disabled):not([readonly]),
.campo:not(.campo--errore) select:hover:not(:disabled),
.campo:not(.campo--errore) textarea:hover:not(:disabled) { border-color: var(--colore-bordo-ui); }

/* IT: Il fuoco su un campo si vede DUE volte: l'anello globale di `base.css`, che vale per
 *     chiunque arrivi da tastiera, e il bordo colorato, che dice quale campo è attivo anche a chi
 *     è arrivato col mouse. Erano due cose che facevano lo stesso lavoro a metà. */
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--colore-focus);
  box-shadow: 0 0 0 3px var(--colore-focus-tenue);
}

/* IT: TRENTUNO DEI SETTANTA CONTROLLI INERTI SONO CAMPI, non bottoni (T-186), e finora erano resi
 *     identici a un campo compilabile: nulla diceva a chi guarda che lì dentro non si scrive.
 *     La regola sta sui CONTROLLI e non su `.campo`, che è il contenitore e non è mai disabilitato
 *     — un errore che ho fatto scrivendo questa regola la prima volta. */
.campo input:disabled, .campo select:disabled, .campo textarea:disabled,
.campo input[readonly], .campo textarea[readonly] {
  opacity: 0.65;
  cursor: not-allowed;
  background: var(--colore-superficie-alt);
}

/* IT: Il campo in errore, e l'errore che lo accompagna. Vedi T-187: la mappa degli errori esisteva
 *     già lato server e veniva scartata prima di arrivare qui. */
/* #200: `.campo input[type=…]` (0,2,1) batteva `.campo--errore input`; a pari peso vince questa. Il sorvolo la esclude (㉖). */
.campo.campo--errore :is(input, select, textarea) {
  border-color: var(--stato-errore);
}
.campo--errore input:focus, .campo--errore select:focus, .campo--errore textarea:focus {
  box-shadow: 0 0 0 3px var(--stato-errore-fondo);
}

/* Un campo che accetta un indirizzo o un hash è monospazio dal momento in cui si digita: chi
 * incolla vede subito se ha incollato la cosa giusta. */
.campo input.mono { font-family: var(--font-mono); font-size: var(--testo-sm); }

/* R2 (28/09): la base dei controlli FUORI da `.campo` — `:where()`, specificità zero — sta in
 * `base.css`, accanto a `color-scheme`: sono stili degli elementi, non di un componente. */

/* Area di caricamento tratteggiata (Wireframe §1.1). */
.zona-upload {
  border: 2px dashed var(--colore-bordo-campo);
  border-radius: var(--raggio-lg);
  padding: var(--sp-6);
  text-align: center;
  background: var(--colore-superficie-alt);
  color: var(--colore-testo-tenue);
}
.zona-upload strong { display: block; color: var(--colore-testo-forte); margin-bottom: var(--sp-1); }
/* IT: `.campo input[type=…]` (r. 490) elenca i tipi e non copre `file`: a 390 un input file va alla
 *     sua larghezza intrinseca (322 px) e sfonda la zona (causa misurata da Stream C, S-20, `849ceb0`). */
.zona-upload input[type="file"] { max-width: 100%; }

/* IT: L'input nativo «Scegli file» arrivava senza stile: chiaro di giorno su tutto il resto scuro,
 *     l'unico controllo del modulo che non segue il tema (S-03, passo 2 · fascicolo). */
.campo input[type="file"] {
  padding: var(--sp-2) 0;
  font-size: var(--testo-sm);
  color: var(--colore-testo-tenue);
}
.campo input[type="file"]::file-selector-button {
  padding: var(--sp-2) var(--sp-4);
  margin-right: var(--sp-3);
  border: 1px solid var(--colore-bordo-ui);
  border-radius: var(--raggio);
  background: var(--colore-superficie-alt);
  color: var(--colore-testo-forte);
  font-size: var(--testo-sm);
  font-weight: var(--peso-forte);
  cursor: pointer;
  transition: background var(--durata-svelta) var(--curva);
}
.campo input[type="file"]::file-selector-button:hover {
  background: var(--colore-bordo);
}
/* #216: il campo file segue il componente (㉗): 44 px, a 8 px dall'etichetta. */
:is(form, .campo) input[type="file"] { height: var(--controllo-altezza); padding: 0; }
:is(form, .campo) input[type="file"]::file-selector-button { height: 100%; }
.zona-upload > :is(label, strong) { display: block; }
.zona-upload > :is(label, strong) + div:has(> input[type="file"]) { margin-top: var(--campo-etichetta-spazio); }

/* --- Scelta: la riga di una casella o di un pulsante di opzione ------------------------------
 * Il bersaglio cliccabile comprende l'etichetta, non solo il quadratino: su mobile un quadratino
 * di 13 px è sotto la soglia di 24 px raccomandata per un elemento interattivo. */
.scelta {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  cursor: pointer;
}
.scelta input { margin-top: 3px; flex: 0 0 auto; }
.scelta:last-child { margin-bottom: 0; }
.scelta > span { min-width: 0; }

/* IT: La scelta aveva `cursor: pointer` e nient'altro (T-189): il bersaglio comprende tutta
 *     l'etichetta — che è la ragione per cui questo componente esiste — ma nulla lo mostrava, e
 *     una superficie cliccabile che non si annuncia è larga quanto il quadratino che si vede.
 *     `:focus-within` porta il riscontro sulla riga intera quando il fuoco entra nel controllo. */
.scelta { border-radius: var(--raggio); padding: var(--sp-1) var(--sp-2); margin-left: calc(-1 * var(--sp-2)); transition: background var(--durata-svelta) var(--curva); }
.scelta:hover { background: var(--colore-superficie-alt); }
.scelta:focus-within { background: var(--colore-fondo); }

/* --- Scelta resa come scheda: l'opzione che ha bisogno di una spiegazione ---------------------- */
.scelta-scheda { cursor: pointer; display: block; transition: border-color var(--durata-svelta) var(--curva), box-shadow var(--durata-svelta) var(--curva); }
.scelta-scheda:hover { border-color: var(--colore-bordo-ui); }
.scelta-scheda:focus-within { border-color: var(--colore-focus); box-shadow: 0 0 0 3px var(--colore-focus-tenue); }
/* IT: L'opzione SCELTA si distingue da quella su cui si sta passando sopra. Senza, l'unico segno
 *     era il pallino dentro il controllo, che su una scheda alta cinque righe è quasi invisibile.
 *     Sotto `@supports` per la stessa ragione dell'anello della titolo-card: dove `:has()` non
 *     c'è, si perde una distinzione in più, non una che c'era prima. */
@supports selector(:has(*)) {
  .scelta-scheda:has(input:checked) { border-color: var(--colore-accento); box-shadow: inset 3px 0 0 var(--colore-accento); }
}
.scelta-scheda--attenzione { border-color: var(--stato-attesa); }

/* --- Gruppo di campi con didascalia ----------------------------------------------------------- */
.gruppo-campi {
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  padding: var(--sp-5);
  margin: 0 0 var(--sp-5);
}
.gruppo-campi > legend {
  padding: 0 var(--sp-2);
  font-size: var(--testo-sm);
  font-weight: var(--peso-forte);
  color: var(--colore-testo-forte);
}

/* IT: `--stretto` era usata in 4 viste (A-04, `/registrati`, `/profilo`) senza avere una regola
 *     propria: i controlli restavano senza `display`/`gap`, accatastati con lo spazio residuo del
 *     flusso normale — il difetto di distanza fra badge, bottoni e testo segnalato da Claudio nella
 *     seduta del 16/09 (rapporto §1 R15). */
.gruppo-campi--stretto { display: flex; flex-direction: column; gap: var(--sp-3); }

/* --- Area di testo -------------------------------------------------------------------------------
 * IT: Il contatore è **sempre visibile**, anche a zero caratteri. Comparire solo quando ci si
 *     avvicina al limite significa informare chi sta già per sbagliare, e tacere con chi sta
 *     scrivendo la motivazione di un atto. */
.area-testo {
  display: block;
  width: 100%;
  min-height: 88px;
  padding: var(--sp-3);
  border: 1px solid var(--colore-bordo-campo);
  border-radius: var(--raggio-sm);
  background: var(--colore-superficie-scura);
  color: var(--colore-testo-forte);
  font-family: inherit;
  font-size: var(--testo-sm);
  line-height: var(--interlinea);
  resize: vertical;
}
.area-testo::placeholder { color: var(--colore-testo-tenue); }
.area-testo:focus-visible { outline: var(--focus-spessore) solid var(--colore-focus); outline-offset: var(--focus-scarto); }
.area-testo--errore { border-color: var(--stato-errore); }
.area-testo__contatore {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--testo-xs);
  color: var(--colore-testo-tenue);
}

/* --- Selettore -----------------------------------------------------------------------------------
 * IT: Il valore va in monospaziato quando è un'entità tecnica — uno standard di token, un codice —
 *     e in proporzionale quando è una parola. La distinzione non è estetica: è la quarta regola
 *     d'uso del catalogo, e il modificatore la rende esplicita invece di lasciarla al caso. */
.selettore {
  display: block;
  width: 100%;
  padding: var(--sp-3);
  padding-right: var(--sp-7);
  border: 1px solid var(--colore-bordo-campo);
  border-radius: var(--raggio-sm);
  background: var(--colore-superficie-scura);
  color: var(--colore-testo-forte);
  font-family: inherit;
  font-size: var(--testo-sm);
  line-height: var(--interlinea-stretta);
  appearance: none;
}
.selettore--mono { font-family: var(--font-mono); }
.selettore:focus-visible { outline: var(--focus-spessore) solid var(--colore-focus); outline-offset: var(--focus-scarto); }
.selettore:disabled { color: var(--colore-testo-tenue); cursor: not-allowed; }
/* IT: Il chevron è disegnato dal contenitore e non dal controllo: `appearance: none` toglie quello
 *     di sistema, e un carattere tipografico nel contenitore non intercetta i clic. */
.selettore-guscio { position: relative; display: block; }
.selettore-guscio::after {
  content: "";
  position: absolute;
  right: var(--sp-4);
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--colore-testo-tenue);
  border-bottom: 1.5px solid var(--colore-testo-tenue);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* --- Interruttore --------------------------------------------------------------------------------
 * IT: È una casella di spunta vera, stilata. ⛔ Non un `<div>` con un gestore: un interruttore
 *     che non è un controllo di modulo non si invia, non si raggiunge da tastiera e non lo legge
 *     un lettore di schermo — e qui accende cose come la notarizzazione automatica.
 *     ⚠ Un interruttore NON sostituisce una spunta di consenso: acconsentire a una clausola è una
 *     dichiarazione e vuole il testo di supporto della `.scelta`. Questo accende una preferenza. */
.interruttore { display: inline-flex; align-items: center; gap: var(--sp-3); cursor: pointer; }
.interruttore__controllo {
  appearance: none;
  flex: 0 0 auto;
  position: relative;
  width: 38px;
  height: 21px;
  margin: 0;
  border-radius: var(--raggio-pill);
  background: var(--colore-bordo-ui);
  cursor: pointer;
  transition: background var(--durata-svelta) var(--curva);
}
.interruttore__controllo::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--colore-testo-inverso);
  transition: transform var(--durata-svelta) var(--curva);
}
.interruttore__controllo:checked { background: var(--colore-accento); }
.interruttore__controllo:checked::after { transform: translateX(17px); }
.interruttore__controllo:focus-visible { outline: var(--focus-spessore) solid var(--colore-focus); outline-offset: var(--focus-scarto); }
.interruttore__controllo:disabled { opacity: .5; cursor: not-allowed; }
.interruttore__etichetta { font-size: var(--testo-sm); }

/* =============================================================================================
 * PARTE 2 — LE REGOLE NUOVE (29/09). Ognuna dice quale difetto del Collaudo chiude e quale misura di
 * test/cssom_impaginazione.test.mjs la sorveglia.
 * ============================================================================================= */

/* ⑩ #175 #176 — UNA sola altezza per campi, tendine e bottoni dei moduli: prima 38, 39, 41 e 43 px nello stesso
 *    modulo, tutti sotto i 44 px del bersaglio al tocco. `min-height` e non `height`: un campo con un testo più
 *    grande cresce invece di tagliarlo. Caselle, radio, file e interruttore hanno le loro regole. */
:is(form, .campo) :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="range"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="color"]), select),
form :is(button, .bottone, input[type="submit"], input[type="button"], input[type="reset"]) {
  min-height: var(--controllo-altezza);
}

/* ⑮ #6 dell'analisi — sotto i 720 px il testo dei campi è di almeno 16 px: sotto, Safari su iPhone ingrandisce la
 *    pagina a ogni tocco su un campo e non la rimpicciolisce più. Vale anche per i campi `mono`, a 13 px. */
@media (max-width: 719.98px) {
  :is(form, .campo) :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="range"]), select, textarea),
  .area-testo, .selettore {
    font-size: max(1rem, 16px);
  }
}

/* ⑫ #175 — 8 px fra etichetta e controllo (erano 4). Il margine del campo non c'è più: lo spazio fra un campo e
 *    l'altro lo dà il modulo, qui sotto, e un `.mb-*` di una vista non lo somma. */
.campo { gap: var(--campo-etichetta-spazio); margin-bottom: 0; }
form .campo { margin-bottom: 0; }

/* ⑬ #175 — IL RITMO LO DÀ IL MODULO, non la vista: 24 px fra un campo e il successivo (erano 16, 22, 24, 28, 32 o
 *    40, secondo i `mt-*` scritti a mano), 8 px fra le opzioni dello stesso gruppo, 32 px prima della riga dei
 *    bottoni. La specificità (0,2,0) è voluta: batte i `.mt-*` di `utilita.css` (0,1,0) a qualunque ordine. */
/* #190: con `~` e non `+`: fra due campi possono stare `<input type="hidden">` (i quattro della registrazione), e il
 * fratello adiacente non li scavalca — i consensi restavano a 0 px. `~` vuol dire «un campo che ha un campo prima di sé». */
:is(.campo, .scelta, fieldset, .gruppo-campi, .griglia--2, .griglia--3, .zona-upload)
  ~ :is(.campo, fieldset, .gruppo-campi, .griglia--2, .griglia--3, .zona-upload) { margin-top: var(--campo-spazio); }
:is(.campo, fieldset, .gruppo-campi, .griglia--2, .griglia--3) ~ .scelta { margin-top: var(--campo-spazio); }
.scelta { margin-bottom: 0; }
.scelta ~ .scelta { margin-top: var(--campo-opzioni-spazio); }
:is(.campo, .scelta, fieldset, .gruppo-campi, .griglia--2, .griglia--3, .colonna-lettura, .zona-upload, div:has(> [type="file"])) ~ .riga {
  margin-top: var(--campo-azioni-spazio);
}
/* #190 (Collaudo, regressione di questo foglio): in accesso e registrazione il pulsante segue l'ultimo campo DIRETTAMENTE,
 * senza una `.riga`, e con il margine di `.campo` azzerato restava a 0 px. Vale per ogni modulo: il pulsante dopo un
 * campo ha lo stesso spazio della riga dei bottoni. */
:is(.campo, .scelta, fieldset, .gruppo-campi, .griglia--2, .griglia--3, .colonna-lettura, .zona-upload)
  ~ :is(button, .bottone, input[type="submit"]) { margin-top: var(--campo-azioni-spazio); }
/* #190 / #193 (a) — in una RIGA (un modulo in linea, come il filtro di A-17: `<form class="riga">`) gli elementi stanno
 * affiancati: il ritmo verticale li sfalsava (sommità a 35, 47 e 20 px). Stessa specificità, scritta dopo: vince. */
.riga > :is(.campo, .scelta, fieldset, .gruppo-campi, .zona-upload, button, .bottone, input[type="submit"]) { margin-top: 0; }
/* #193 — in un modulo in riga con dei campi, controlli e pulsanti stanno sulla stessa linea, sotto le etichette. */
form.riga:has(> .campo) { align-items: flex-end; }
/* #180 ⑱ — al telefono il gruppo con bordo dentro una scheda rientra meno: ogni pixel serve al campo. */
@media (max-width: 719.98px) { .gruppo-campi { padding: var(--sp-2); } } /* #202: 8 e non 12, la freccia ha il suo spazio */
/* #193 (b) — la data e l'ora hanno un'altezza propria (l'icona del calendario: 45 px in A-07): la stessa degli altri. */
:is(form, .campo) input:is([type="date"], [type="time"]) { height: var(--controllo-altezza); }
/* #190 — una casella scritta DENTRO un'etichetta insieme al testo (i consensi della registrazione): tolto il margine
 * nativo, il testo partiva a filo della casella e andava a capo sotto di lei. Rientro sospeso: la casella ha il suo
 * spazio, e le righe successive ripartono dopo la casella. L'etichetta resta testo che scorre, con il suo collegamento. */
label:has(> input:is([type="checkbox"], [type="radio"])):not(.scelta, .interruttore) {
  display: block;
  padding-left: calc(var(--casella-lato) + var(--sp-3));
  text-indent: calc(-1 * (var(--casella-lato) + var(--sp-3)));
}
label:has(> input:is([type="checkbox"], [type="radio"])):not(.scelta, .interruttore) > input:is([type="checkbox"], [type="radio"]) {
  margin-right: var(--sp-3);
  vertical-align: -0.3em;
}
/* Fase delle viste (29/09): anche dopo un avviso dentro il modulo (l'avvertenza sul frazionamento di S-20), che prima
 * si reggeva su un `mt-4` scritto nella vista. Solo nei moduli: fuori, un banner seguito da una riga è altro. */
form .banner + .riga { margin-top: var(--campo-azioni-spazio); }

/* ⑰ ⑪ #180 #176 — una griglia di campi va in colonna secondo lo SPAZIO che ha, non secondo la finestra: prima a
 *    1025-1150 px un campo nella colonna principale restava largo ~117 px. I campi di una riga partono insieme. */
form :is(.griglia--2, .griglia--3) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--campo-larghezza-min)), 1fr));
  align-items: start;
  row-gap: var(--campo-spazio);
}
/* Dentro una griglia lo spazio fra le righe lo dà `row-gap`: il margine del ritmo qui sopra farebbe scendere di
 * 24 px il secondo campo di una riga, sfalsandolo dal primo. Stessa specificità (0,2,0), scritta dopo. */
:is(.griglia, .griglia--2, .griglia--3, .griglia--4) > :is(.campo, .scelta, fieldset, .gruppo-campi, .zona-upload) { margin-top: 0; }
/* ⑯ #178 — il fieldset del browser (bordo chiaro, legenda sul bordo, rientri) fuori dallo stile del portale e
 *    causa di colonne sfalsate. Un gruppo di scelta ha la legenda come un'etichetta, e nessun rientro. Il
 *    `.gruppo-campi`, che il bordo lo vuole, lo tiene: la sua classe vince su `fieldset`. */
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset > legend {
  padding: 0;
  margin-bottom: var(--campo-etichetta-spazio);
  font-size: var(--testo-sm);
  font-weight: var(--peso-forte);
  color: var(--colore-testo-forte);
}

/* ⑭ #177 — caselle e radio del portale, 20 px, con il colore dell'accento: erano i controlli nativi da 13 px,
 *    grigio scuro su fondo scuro. L'interruttore è una casella stilata a sé e resta com'è. */
input[type="checkbox"]:not(.interruttore__controllo), input[type="radio"] {
  width: var(--casella-lato);
  height: var(--casella-lato);
  /* Il margine nativo (4 px a sinistra) spostava la casella fuori dalla colonna del modulo (⑯). */
  margin: 0;
  accent-color: var(--colore-accento);
  flex: 0 0 auto;
}
.scelta input { margin-top: 0; }

/* #10 dell'analisi — il modulo di caricamento allineato a sinistra come gli altri (era centrato, nello storno
 *    accanto a un modulo allineato a sinistra). */
.zona-upload { text-align: left; }

/* ⑱ #180 — una tendina larga almeno quanto la colonna le consente, fino a 14rem: in S-22 era di 61 px e la freccia
 *    copriva il valore. */
:is(form, .campo) select { min-width: min(100%, var(--campo-larghezza-min)); }

/* #180 — importi, date, quote: la classe la mettono le viste. */
.campo--breve :is(input, select) { max-width: var(--campo-breve-larghezza); }
/* #203: in griglia decide la cella. */
.griglia > .campo--breve :is(input, select) { max-width: none; }