/* SPARK — Material You (Material Design 3), CSS puro, MOBILE FIRST.
   Base = schermi compatti (<600px, classe finestra MD3 "compact").
   Breakpoint: 600px (medium), 905px (expanded).
   Navigazione: barra inferiore MD3 su mobile, tab in alto da 600px. */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,300..800&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,300..600,0..1&display=swap');

:root {
  /* Tonal palette — seed #F08C00 (ambra) */
  --md-primary:              #00658E;
  --md-on-primary:           #FFFFFF;
  --md-primary-container:    #C7E7FF;
  --md-on-primary-container: #001E2E;

  --md-secondary:            #4E616D;
  --md-on-secondary:         #FFFFFF;
  --md-secondary-container:  #C7E7FF;
  --md-on-secondary-container:#0A1E2B;

  --md-surface:              #F7F9FC;
  --md-surface-dim:          #D7DADF;
  --md-surface-container-low:#F1F4F9;
  --md-surface-container:    #EBEEF3;
  --md-surface-container-high:#E5E8EE;
  --md-on-surface:           #191C1F;
  --md-on-surface-variant:   #41484D;
  --md-outline:              #71787E;
  --md-outline-variant:      #C1C7CE;

  --md-error:                #BA1A1A;
  --md-on-error:             #FFFFFF;
  --md-error-container:      #FFDAD6;

  /* Semantica entrate/uscite — ogni colore ha il suo colore di testo */
  --entrata:                  #3E6837;
  --on-entrata:               #FFFFFF;
  --entrata-container:        #BFF0B2;
  --on-entrata-container:     #0B2008;
  --tinta-entrata:            #F2F8EF;

  --uscita:                   #904A43;
  --on-uscita:                #FFFFFF;
  --uscita-container:         #FFDAD5;
  --on-uscita-container:      #3B0906;
  --tinta-uscita:             #FDF1F0;

  --attenzione-container:     #FFF0C7;
  --on-attenzione-container:  #3E2E00;
  --md-on-error-container:    #410002;

  --wa-testo:                 #128C7E;
  --google-bg:                #FFFFFF;
  --google-fg:                #1F1F1F;
  --google-hover:             #F6F9FE;

  --elev-1: 0 1px 2px rgba(0,40,66,.10), 0 1px 3px 1px rgba(0,40,66,.08);
  --elev-2: 0 2px 6px 2px rgba(0,40,66,.10), 0 1px 2px rgba(0,40,66,.12);

  --r-s: 12px;
  --r-m: 16px;
  --r-l: 28px;

  --tocco: 48px; /* target minimo di tocco MD3 */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

html, body {
  margin: 0;
  background: var(--md-surface);
  color: var(--md-on-surface);
  font-family: 'Roboto Flex', Roboto, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

.material-symbols-rounded {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'opsz' 24;
  vertical-align: middle;
  user-select: none;
}

/* ---------- Topbar (mobile: brand + selettore + esci) ---------- */

.topbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: var(--md-surface-container);
  position: sticky; top: 0; z-index: 20;
}
.topbar .brand {
  font-weight: 700; font-size: 20px; letter-spacing: .3px;
  color: var(--md-primary);
  display: flex; align-items: center; gap: 4px;
  text-decoration: none; white-space: nowrap;
}
.topbar .spacer { flex: 1; }
.topbar select {
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container-low);
  border-radius: var(--r-l);
  padding: 10px 14px; font: inherit; font-weight: 600; font-size: 15px;
  color: var(--md-on-surface);
  min-height: var(--tocco);
  max-width: 44vw;
  text-overflow: ellipsis;
}
.topbar .esci { display: none; }

/* Pulsante icona tondo (indietro, impostazioni) */
.icona-btn {
  color: var(--md-on-surface-variant); text-decoration: none;
  min-width: var(--tocco); min-height: var(--tocco);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; flex-shrink: 0;
}
.icona-btn.attiva { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.icona-btn .material-symbols-rounded { font-size: 26px; }

/* ---------- Banner installazione PWA (non invasivo) ---------- */

.banner-installa {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  display: flex; align-items: center; gap: 10px;
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
  border-radius: var(--r-m);
  padding: 12px 14px;
  box-shadow: var(--elev-2);
}
.banner-installa .testo { flex: 1; font-size: 15px; }
.banner-installa .btn-installa {
  border: none; cursor: pointer; font: inherit; font-weight: 700;
  background: var(--md-primary); color: var(--md-on-primary);
  border-radius: var(--r-l); padding: 10px 18px; min-height: var(--tocco);
}
.banner-installa .btn-dopo {
  border: none; cursor: pointer; font: inherit; font-weight: 650;
  background: transparent; color: var(--md-primary);
  padding: 10px 8px; min-height: var(--tocco);
}

main {
  max-width: 980px;
  margin: 0 auto;
  padding: 16px 14px calc(96px + env(safe-area-inset-bottom, 0px)); /* spazio per il FAB */
}

h1 { font-size: 24px; font-weight: 650; margin: 4px 0 14px; overflow-wrap: anywhere; }
h2 { font-size: 18px; font-weight: 650; margin: 20px 0 10px; }

/* ---------- Card ---------- */

.card {
  background: var(--md-surface-container-low);
  border-radius: var(--r-m);
  padding: 16px;
  box-shadow: var(--elev-1);
  margin-bottom: 14px;
}

.kpi-grid {
  display: grid; gap: 10px;
  grid-template-columns: 1fr 1fr; /* mobile: entrate+uscite affiancati, saldo sotto */
  margin-bottom: 16px;
}
.kpi {
  border-radius: var(--r-m);
  padding: 14px 16px;
  box-shadow: var(--elev-1);
  min-width: 0;
}
.kpi.saldo { grid-column: 1 / -1; } /* il saldo occupa tutta la riga su mobile */
.kpi .etichetta { font-size: 13px; font-weight: 600; opacity: .8; }
.kpi .valore {
  font-size: 24px; font-weight: 750; margin-top: 4px;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.kpi.entrate { background: var(--entrata-container); color: var(--on-entrata-container); }
.kpi.uscite  { background: var(--uscita-container);  color: var(--on-uscita-container); }
.kpi.saldo  { background: var(--md-primary-container); color: var(--md-on-primary-container); }

/* ---------- Chips timeframe: scorrimento orizzontale su mobile ---------- */

.chips {
  display: flex; gap: 8px;
  position: relative;      /* riferimento per offsetLeft delle schede */
  scroll-behavior: smooth;
  margin: 2px -14px 16px;
  padding: 2px 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container-low);
  color: var(--md-on-surface-variant);
  border-radius: var(--r-s);
  /* padding ridotto per compensare lo spazio riservato al visto:
     la barra resta compatta come prima */
  padding: 10px 12px;
  min-height: var(--tocco);
  font: inherit; font-weight: 600; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
  /* flex: visto, testo e spaziatore sempre allineati al centro verticale */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chip.attivo {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  border-color: transparent;
}
/* ---------- Visto con testo sempre centrato ----------
   Due spaziatori si scambiano lo spazio (15px in totale, costanti):
   - non selezionata: mezzo visto per lato -> testo centrato nel riquadro
   - selezionata: visto intero a sinistra, zero a destra -> il testo slitta
     a destra e il gruppo "visto + testo" risulta centrato.
   La larghezza del riquadro non cambia mai. */
.chip { --spazio-visto: 15px; }

.chip::before {
  content: '✓';
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  font-size: .95em;
  width: calc(var(--spazio-visto) / 2);
  opacity: 0;
  transition: width .18s ease, opacity .18s ease;
}
.chip::after {
  content: '';
  display: block;
  width: calc(var(--spazio-visto) / 2);
  transition: width .18s ease;
}
.chip.attivo::before { width: var(--spazio-visto); opacity: 1; }
.chip.attivo::after  { width: 0; }

@media (prefers-reduced-motion: reduce) {
  .chip::before, .chip::after { transition: none; }
}

/* ---------- Bottoni MD3 (mobile: larghezza piena) ---------- */

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  border: none; cursor: pointer; text-decoration: none;
  font: inherit; font-weight: 650; font-size: 17px;
  border-radius: var(--r-l);
  padding: 14px 24px;
  min-height: var(--tocco);
  background: var(--md-primary); color: var(--md-on-primary);
  box-shadow: var(--elev-1);
}
.btn:hover { filter: brightness(1.08); }
.btn.tonal { background: var(--md-secondary-container); color: var(--md-on-secondary-container); box-shadow: none; }
.btn.testo {
  background: transparent; color: var(--md-primary); box-shadow: none;
  padding: 10px 14px; width: auto; display: inline-flex;
}
.btn.wa    { background: #25D366; color: #fff; }
.btn.grande { font-size: 19px; padding: 17px 30px; }

.azioni { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 20px; }

.fab {
  position: fixed; right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 21;
  width: 60px; height: 60px; border-radius: 18px;
  background: var(--md-primary-container); color: var(--md-on-primary-container);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--elev-2); text-decoration: none; font-size: 28px;
}

/* ---------- Form: input grandi, tocco 48px+ ---------- */

label { display: block; font-weight: 600; margin: 14px 0 6px; color: var(--md-on-surface-variant); }

input[type=text], input[type=email], input[type=password],
input[type=number], input[type=date], input[type=tel], select, textarea {
  width: 100%;
  font: inherit; font-size: 17px;
  padding: 14px 15px;
  min-height: var(--tocco);
  border: 1.5px solid var(--md-outline);
  border-radius: var(--r-s);
  background: var(--md-surface);
  color: var(--md-on-surface);
}
input:focus, select:focus, textarea:focus {
  outline: 3px solid var(--md-primary);
  outline-offset: -1px; border-color: transparent;
}

/* Righe di form: colonna su mobile, griglia da 600px */
.form-riga { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: end; }

/* Campo importo: elemento firma della pagina di input */
.campo-importo { position: relative; }
.campo-importo input {
  font-size: 40px; font-weight: 750; text-align: center;
  padding: 20px 52px 20px 14px;
  font-variant-numeric: tabular-nums;
  border-radius: var(--r-m);
}
.badge-default {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--entrata); font-size: 30px; display: none;
}
.badge-default.visibile { display: block; }
.hint-prezzo { font-size: 14px; color: var(--md-on-surface-variant); margin-top: 6px; min-height: 1.4em; }

.segmento { display: flex; border: 1.5px solid var(--md-outline); border-radius: var(--r-l); overflow: hidden; }
.segmento label {
  flex: 1; margin: 0; text-align: center;
  padding: 13px 0; min-height: var(--tocco);
  cursor: pointer; font-size: 17px; font-weight: 650;
  color: var(--md-on-surface-variant);
  display: flex; align-items: center; justify-content: center;
}
.segmento input { position: absolute; opacity: 0; pointer-events: none; }
/* Stato selezionato: classe applicata via JS, con :has() come rinforzo
   (così funziona anche prima che il JavaScript sia eseguito). */
.segmento label.l-entrata.selezionato,
.segmento label.l-entrata:has(input:checked) {
  background: var(--entrata); color: var(--on-entrata);
}
.segmento label.l-uscita.selezionato,
.segmento label.l-uscita:has(input:checked) {
  background: var(--uscita); color: var(--on-uscita);
}

/* ---------- Tabelle adattive: schede impilate su mobile ---------- */

table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 13px; color: var(--md-on-surface-variant); padding: 8px 10px; }
td { padding: 12px 10px; border-top: 1px solid var(--md-outline-variant); font-variant-numeric: tabular-nums; }
td.num, th.num { text-align: right; }

/* Tinta di sfondo per categoria: entrate e uscite si distinguono a colpo d'occhio */
.tabella-adattiva tr.r-entrata { background: var(--tinta-entrata); }
.tabella-adattiva tr.r-uscita  { background: var(--tinta-uscita); }
.tabella-adattiva tr.r-entrata td { border-left: none; }

/* Su mobile la tabella diventa una lista di schede */
.tabella-adattiva thead { display: none; }
.tabella-adattiva, .tabella-adattiva tbody { display: block; }
.tabella-adattiva tr {
  display: block;
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--r-s);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.tabella-adattiva td {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  border: none; padding: 5px 0;
  text-align: left;
}
.tabella-adattiva td.num { text-align: right; }
.tabella-adattiva td.vuoto { display: none; }
.tabella-adattiva td[data-etichetta]::before {
  content: attr(data-etichetta);
  font-size: 13px; font-weight: 600;
  color: var(--md-on-surface-variant);
  flex-shrink: 0;
}

.pill { border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 650; white-space: nowrap; }
.pill.entrata { background: var(--entrata-container); color: var(--on-entrata-container); }
.pill.uscita  { background: var(--uscita-container);  color: var(--on-uscita-container); }
.pill.owner     { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.pill.scrittura { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.pill.lettura   { background: var(--md-surface-container-high); color: var(--md-on-surface-variant); }

/* ---------- Messaggi ---------- */

.avviso {
  border-radius: var(--r-s); padding: 13px 15px; margin-bottom: 14px; font-weight: 600;
  overflow-wrap: anywhere;
}
.avviso.ok     { background: var(--entrata-container); color: var(--on-entrata-container); }
.avviso.errore { background: var(--md-error-container); color: var(--md-on-error-container); }

/* ---------- Login ---------- */

.auth-wrap {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: 16px;
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(1000px 500px at 80% -10%, var(--md-primary-container), transparent 60%),
    var(--md-surface);
}
.auth-card {
  width: 100%; max-width: 420px;
  background: var(--md-surface-container-low);
  border-radius: var(--r-l);
  padding: 28px 22px;
  box-shadow: var(--elev-2);
}
.auth-card .brand { font-size: 30px; font-weight: 800; color: var(--md-primary); margin-bottom: 4px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ================= MEDIUM: da 600px (tablet) ================= */
@media (min-width: 600px) {
  html, body { font-size: 17px; }

  .topbar { padding: 14px 20px; gap: 12px; }
  .topbar .brand { font-size: 22px; }
  .topbar select { max-width: 320px; }
  main { padding: 22px 16px 90px; }

  h1 { font-size: 28px; }
  h2 { font-size: 20px; }

  .card { padding: 18px 20px; }

  .kpi-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .kpi.saldo { grid-column: auto; }
  .kpi .valore { font-size: 28px; }

  .chips { margin: 4px 0 18px; padding: 0; overflow: visible; flex-wrap: wrap; }

  .btn { width: auto; display: inline-flex; }
  .btn.grande { width: 100%; display: flex; font-size: 20px; }
  .azioni { flex-direction: row; flex-wrap: wrap; }

  .fab { right: 22px; bottom: 22px; width: 64px; height: 64px; border-radius: 20px; }

  .form-riga { grid-template-columns: 1fr auto; }
  .form-riga.tripla { grid-template-columns: 1fr auto auto; }

  /* Le tabelle tornano tabelle */
  .tabella-adattiva { display: table; }
  .tabella-adattiva thead { display: table-header-group; }
  .tabella-adattiva tbody { display: table-row-group; }
  .tabella-adattiva tr { display: table-row; background: none; border: none; padding: 0; margin: 0; }
  .tabella-adattiva td {
    display: table-cell;
    border-top: 1px solid var(--md-outline-variant);
    padding: 12px 10px;
  }
  .tabella-adattiva td[data-etichetta]::before { content: none; }
  .tabella-adattiva td.vuoto { display: table-cell; }

  .auth-card { padding: 34px 30px; }
  .auth-card .brand { font-size: 34px; }
}

/* ================= EXPANDED: da 905px (desktop) ================= */
@media (min-width: 905px) {
  .kpi .valore { font-size: 32px; }
  .campo-importo input { font-size: 48px; }
}

/* ---------- Marchio Bubble: la bolla ---------- */
.logo-bolla {
  display: inline-block; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%,
    #EAF6FF 0 16%, #7FC5EC 40%, #2B87B8 100%);
  box-shadow: inset -2px -3px 4px rgba(0,40,66,.18);
  flex-shrink: 0;
}
.auth-card .logo-bolla { width: 34px; height: 34px; vertical-align: -6px; }

.avviso.attenzione {
  background: var(--attenzione-container); color: var(--on-attenzione-container);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.logo-bolla.mini { width: 20px; height: 20px; vertical-align: -3px; }

/* ---------- Pulsante "Continua con Google" ---------- */
.btn.google {
  background: var(--google-bg); color: var(--google-fg);
  border: 1px solid var(--md-outline-variant);
  box-shadow: none; font-weight: 600;
}
.btn.google:hover { filter: none; background: var(--google-hover); }
.divisore-oppure {
  display: flex; align-items: center; gap: 12px;
  color: var(--md-on-surface-variant); font-size: 14px;
  margin: 18px 0 14px;
}
.divisore-oppure::before, .divisore-oppure::after {
  content: ''; flex: 1; height: 1px; background: var(--md-outline-variant);
}

/* ---------- Azioni riga movimento ---------- */
.btn-icona {
  background: none; border: none; cursor: pointer; padding: 8px;
  min-width: var(--tocco); min-height: var(--tocco);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--md-on-surface-variant);
}
.btn-icona:hover { background: var(--md-surface-container-high); }
.btn-icona.pericolo { color: var(--md-error); }

/* Titolo con azione a destra */
.titolo-azione { display: flex; align-items: center; gap: 10px; }
.titolo-azione h2 { margin: 0; flex: 1; }
.btn-wa-icona {
  background: #25D366; color: #fff; border: none; cursor: pointer;
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--elev-1); flex-shrink: 0;
}

/* ---------- Finestra di selezione destinatari ---------- */
.modale-sfondo {
  position: fixed; inset: 0; background: rgba(0,30,46,.45);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; z-index: 40;
}
.modale {
  background: var(--md-surface-container-low);
  border-radius: var(--r-l);
  padding: 24px 22px;
  width: 100%; max-width: 420px;
  box-shadow: var(--elev-2);
  max-height: 85dvh; overflow-y: auto;
}
.modale h3 { margin: 0 0 4px; font-size: 20px; font-weight: 650; }
.modale .sottotitolo { color: var(--md-on-surface-variant); font-size: 14px; margin: 0 0 16px; }
.dest {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 10px; border-radius: var(--r-s);
  min-height: var(--tocco); cursor: pointer;
}
.dest:hover { background: var(--md-surface-container); }
.dest input { width: 22px; height: 22px; min-height: 0; accent-color: var(--md-primary); flex-shrink: 0; }
.dest .nome { font-weight: 650; }
.dest .tel { font-size: 13px; color: var(--md-on-surface-variant); }
.dest.senza-numero { opacity: .5; cursor: not-allowed; }
.modale-azioni { display: flex; gap: 10px; margin-top: 18px; }
.modale-azioni .btn { flex: 1; }
.coda-invio { margin-top: 14px; }
.coda-invio .btn { margin-bottom: 8px; }

/* ================= TEMA SCURO ================= 
   Si attiva automaticamente se il sistema operativo è in modalità scura.
   Cambiano solo le variabili: nessuna regola di layout viene duplicata. */
@media (prefers-color-scheme: dark) {
  :root {
    --md-primary:              #85CFFF;
    --md-on-primary:           #00344C;
    --md-primary-container:    #004C6D;
    --md-on-primary-container: #C7E7FF;

    --md-secondary:            #B6C9D8;
    --md-on-secondary:         #21333E;
    --md-secondary-container:  #374955;
    --md-on-secondary-container:#D2E5F4;

    --md-surface:              #0F1417;
    --md-surface-dim:          #0F1417;
    --md-surface-container-low:#171C20;
    --md-surface-container:    #1B2125;
    --md-surface-container-high:#262B2F;
    --md-on-surface:           #DFE3E7;
    --md-on-surface-variant:   #BFC8CE;
    --md-outline:              #8A9297;
    --md-outline-variant:      #40484D;

    --md-error:                #FFB4AB;
    --md-on-error:             #690005;
    --md-error-container:      #93000A;
    --md-on-error-container:   #FFDAD6;

    --entrata:                 #A5D398;
    --on-entrata:              #0C390B;
    --entrata-container:       #275021;
    --on-entrata-container:    #C0EFB2;
    --tinta-entrata:           #16241A;

    --uscita:                  #FFB4AB;
    --on-uscita:               #5F1410;
    --uscita-container:        #73342D;
    --on-uscita-container:     #FFDAD5;
    --tinta-uscita:            #26191A;

    --attenzione-container:    #4B3B00;
    --on-attenzione-container: #FFE08B;

    --wa-testo:                #4AE585;
    --google-bg:               #131314;
    --google-fg:               #E3E3E3;
    --google-hover:            #1E1F20;

    --elev-1: 0 1px 2px rgba(0,0,0,.40), 0 1px 3px 1px rgba(0,0,0,.30);
    --elev-2: 0 2px 6px 2px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.45);
  }

  /* Il pulsante Google in tema scuro ha un bordo, altrimenti sparisce sul fondo */
  .btn.google { border-color: var(--md-outline); }

  /* Il marchio a bolla resta luminoso anche su fondo scuro */
  .logo-bolla { box-shadow: inset -2px -3px 5px rgba(0,0,0,.35); }
}

/* Movimento non più eliminabile (oltre la finestra consentita) */
.btn-icona.bloccato {
  color: var(--md-outline);
  cursor: default;
}
.btn-icona.bloccato:hover { background: none; }

.btn:disabled { opacity: .55; cursor: default; }
.btn:disabled:hover { filter: none; }

/* Nota esplicativa sotto un campo di modulo */
.nota-campo {
  font-size: 13px;
  color: var(--md-on-surface-variant);
  margin: 6px 0 0;
}