/* ============================================================================
   LATTE VACCINO — LA TAVOLOZZA, LE FORME E I PEZZI PROPRI DI QUESTA APP
   ============================================================================

   L'IMPIANTO arriva dal gestionale dello studio: stessa scala di spazi da
   4 px, stessi nomi di token, stessi componenti. Quello che cambia qui è il
   VESTITO, ed è un vestito deciso: angoli molto tondi, pulsanti a pastiglia,
   ombre larghe e appena accennate, titoli grossi e stretti, e tre colori che
   lavorano insieme invece di uno solo.

   DA DOVE VIENE
   Dal tono delle piattaforme di oggi: fondo chiarissimo e pulito dove ci
   sono i dati, una sfumatura morbida dove non disturba — l'accesso, il
   numero grande — e il colore usato come segnale, non come decorazione.

   I TRE ACCENTI
   • BLU, il colore dell'azione: pulsanti, voce aperta, linee dei grafici.
   • CORALLO, il colore del caldo: la produzione, i numeri che escono.
   • PERVINCA, il colore del calcolo: la standardizzazione, l'informativo.
   Il VERDE resta solo dov'è un giudizio — «conforme» è verde e deve restarlo,
   altrimenti il colore smette di significare qualcosa.

   Quando arriverà il logo vero si toccano i token --acc qui sotto e l'app
   intera cambia vestito senza aprire nient'altro.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   1. TAVOLOZZA — chiaro
   ══════════════════════════════════════════════════════════════════════════ */
:root,
:root[data-tema="chiaro"]{
  /* Superfici. Il fondo non è bianco: un grigio chiarissimo appena freddo fa
     staccare le schede bianche senza bisogno di bordi marcati. */
  --sfondo:#F4F5F8;
  --sfondo-2:#EBEDF3;
  --carta:#FFFFFF;
  --carta-2:#FAFBFD;
  --velo:rgba(17,19,26,.035);

  --testo:#11131A;
  --testo-2:#474B57;
  --testo-3:#767B89;
  --testo-4:#A4A9B5;

  --linea:rgba(17,19,26,.07);
  --linea-forte:rgba(17,19,26,.14);

  /* Blu: l'azione */
  --acc:#2C5CF6;
  --acc-vivo:#4272FF;
  --acc-scuro:#1B3FC0;
  --acc-velo:#EBF0FF;
  --acc-velo-2:#CBD9FF;
  --acc-testo:#1B3FC0;
  --su-acc:#FFFFFF;

  /* Corallo e pervinca: gli altri due della terna */
  --corallo:#F97A4D;      --corallo-velo:#FFEEE6;  --corallo-testo:#B44A22;
  --pervinca:#8A8AE0;     --pervinca-velo:#EEEEFC; --pervinca-testo:#4F4FAE;

  /* Semantici */
  --ok:#0E9F6E;      --ok-velo:#E2F7EF;     --ok-testo:#07744F;
  --avviso:#C2670B;  --avviso-velo:#FEF2E2; --avviso-testo:#8E4A04;
  --critico:#E04347; --critico-velo:#FDEBEC;--critico-testo:#A4262A;
  --info:#8A8AE0;    --info-velo:#EEEEFC;   --info-testo:#4F4FAE;
  --neutro:#767B89;  --neutro-velo:#EBEDF3; --neutro-testo:#474B57;

  /* Le fette della torta del latte. I primi tre sono la terna dell'app; gli
     altri servono solo nel caso raro di una produzione con piu` di tre latti
     diversi dentro, e stanno lontani dal verde, che qui significa
     «conforme» e non deve voler dire altro. */
  --fetta-1:#2C5CF6; --fetta-2:#F97A4D; --fetta-3:#8A8AE0;
  --fetta-4:#2F9FB0; --fetta-5:#D9A21B; --fetta-6:#B85BA0;

  --btn:#FFFFFF;
  --btn-bordo:rgba(17,19,26,.12);
  --btn-hover:#F2F4F8;
  --btn-testo:#22252E;

  /* IL MENU E` UNA COLONNA DI VERDE BOSCO
     Verde scuro perché deve stare sotto il testo bianco senza affaticare
     chi lo guarda tutto il giorno, e perché è il colore degli altri
     gestionali dello studio: chi passa dall'uno all'altro riconosce dov'è
     prima di leggere. La voce aperta resta una pastiglia chiara — su un
     fondo scuro è il modo più netto di dire «sei qui». */
  --nav:#14532D;               /* alto della sfumatura */
  --nav-2:#0F3D22;             /* basso: la colonna scende e si scurisce */
  --nav-linea:rgba(255,255,255,.1);
  --nav-testo:#CDE7D6;
  --nav-testo-forte:#FFFFFF;
  --nav-fioco:#8FC0A2;
  --nav-att:#14532D;           /* il testo sulla pastiglia chiara */
  --nav-attivo:#FFFFFF;
  --nav-velo:rgba(255,255,255,.1);
  --nav-badge:#F97A4D;

  /* Ombre larghe e bassissime: le schede si posano, non galleggiano. */
  --om-1:0 1px 2px rgba(17,19,26,.04);
  --om-2:0 2px 6px rgba(17,19,26,.045), 0 8px 20px -10px rgba(17,19,26,.10);
  --om-3:0 4px 14px rgba(17,19,26,.05), 0 22px 44px -18px rgba(17,19,26,.16);
  --om-4:0 8px 24px rgba(17,19,26,.07), 0 40px 80px -24px rgba(17,19,26,.26);
  --om-acc:0 6px 18px -6px rgba(44,92,246,.5);
  --anello:0 0 0 4px rgba(44,92,246,.14);
  --vetro:rgba(10,12,18,.45);

  /* I serbatoi: l'acciaio, il vetro dello spioncino e il latte. Il latte
     resta chiaro anche col tema scuro, perché il latte è bianco. */
  --acciaio-scuro:#8E98A8; --acciaio:#CDD3DC; --acciaio-chiaro:#F5F7FA;
  --serb-vetro:#3A4250; --serb-tacca:rgba(255,255,255,.42); --serb-testo:#1F2430;
  --latte:#FFFDF6; --latte-2:#F4EAD0; --latte-onda:#FBF4E2;
  --latte-nuovo:#BCCBFF; --latte-nuovo-2:#8FA8FF;
}

/* ══════════════════════════════════════════════════════════════════════════
   2. TAVOLOZZA — scuro
   ══════════════════════════════════════════════════════════════════════════ */
:root[data-tema="scuro"]{
  --sfondo:#0D0E13;
  --sfondo-2:#171921;
  --carta:#14161D;
  --carta-2:#1B1E27;
  --velo:rgba(255,255,255,.045);

  --testo:#ECEEF3;
  --testo-2:#B3B8C4;
  --testo-3:#868C9A;
  --testo-4:#666C7A;

  --linea:rgba(255,255,255,.08);
  --linea-forte:rgba(255,255,255,.16);

  --acc:#6D8FFF;
  --acc-vivo:#8AA5FF;
  --acc-scuro:#4C6FE0;
  --acc-velo:rgba(109,143,255,.14);
  --acc-velo-2:rgba(109,143,255,.26);
  --acc-testo:#A8BEFF;
  --su-acc:#0B1020;

  --corallo:#FF9166;  --corallo-velo:rgba(255,145,102,.14); --corallo-testo:#FFB491;
  --pervinca:#A6A6F0; --pervinca-velo:rgba(166,166,240,.14);--pervinca-testo:#C2C2F7;

  --ok:#34D399;      --ok-velo:rgba(52,211,153,.13);      --ok-testo:#6EE7B7;
  --avviso:#E0A33E;  --avviso-velo:rgba(224,163,62,.14);  --avviso-testo:#F3C97E;
  --critico:#F26A6E; --critico-velo:rgba(242,106,110,.14);--critico-testo:#FF9498;
  --info:#A6A6F0;    --info-velo:rgba(166,166,240,.14);   --info-testo:#C2C2F7;
  --neutro:#868C9A;  --neutro-velo:rgba(255,255,255,.06); --neutro-testo:#B3B8C4;

  --fetta-1:#6D8FFF; --fetta-2:#FF9166; --fetta-3:#A6A6F0;
  --fetta-4:#4FC3D4; --fetta-5:#E8BE4C; --fetta-6:#D67DC0;

  --btn:#1C1F28;
  --btn-bordo:rgba(255,255,255,.11);
  --btn-hover:#242833;
  --btn-testo:#DEE2EA;

  /* Col tema scuro il verde scende ancora: accanto a un foglio quasi nero
     un verde acceso sembrerebbe una luce, non una colonna. */
  --nav:#0F3D22;
  --nav-2:#0A2B17;
  --nav-linea:rgba(255,255,255,.08);
  --nav-testo:#B8DCC6;
  --nav-testo-forte:#FFFFFF;
  --nav-fioco:#7FB295;
  --nav-att:#0F3D22;
  --nav-attivo:#EAF6EE;
  --nav-velo:rgba(255,255,255,.08);
  --nav-badge:#FF9166;

  --om-acc:0 6px 18px -6px rgba(109,143,255,.45);
  --anello:0 0 0 4px rgba(109,143,255,.22);
  --vetro:rgba(0,0,0,.7);
  --acciaio-scuro:#2F3440; --acciaio:#565E6D; --acciaio-chiaro:#9BA4B4;
  --serb-vetro:#0E1117; --serb-tacca:rgba(255,255,255,.34); --serb-testo:#1A1D25;
  --latte:#F7F2E4; --latte-2:#DDD0AE; --latte-onda:#EFE7D0;
  --latte-nuovo:#9DB3FF; --latte-nuovo-2:#6D8FFF;
}

/* Senza scelta esplicita si segue il sistema */
@media (prefers-color-scheme:dark){
  :root:not([data-tema="chiaro"]){
    --sfondo:#0D0E13; --sfondo-2:#171921; --carta:#14161D; --carta-2:#1B1E27;
    --velo:rgba(255,255,255,.045);
    --testo:#ECEEF3; --testo-2:#B3B8C4; --testo-3:#868C9A; --testo-4:#666C7A;
    --linea:rgba(255,255,255,.08); --linea-forte:rgba(255,255,255,.16);
    --acc:#6D8FFF; --acc-vivo:#8AA5FF; --acc-scuro:#4C6FE0;
    --acc-velo:rgba(109,143,255,.14); --acc-velo-2:rgba(109,143,255,.26);
    --acc-testo:#A8BEFF; --su-acc:#0B1020;
    --corallo:#FF9166; --corallo-velo:rgba(255,145,102,.14); --corallo-testo:#FFB491;
    --pervinca:#A6A6F0; --pervinca-velo:rgba(166,166,240,.14); --pervinca-testo:#C2C2F7;
    --ok:#34D399; --ok-velo:rgba(52,211,153,.13); --ok-testo:#6EE7B7;
    --avviso:#E0A33E; --avviso-velo:rgba(224,163,62,.14); --avviso-testo:#F3C97E;
    --critico:#F26A6E; --critico-velo:rgba(242,106,110,.14); --critico-testo:#FF9498;
    --info:#A6A6F0; --info-velo:rgba(166,166,240,.14); --info-testo:#C2C2F7;
    --neutro:#868C9A; --neutro-velo:rgba(255,255,255,.06); --neutro-testo:#B3B8C4;
    --btn:#1C1F28; --btn-bordo:rgba(255,255,255,.11); --btn-hover:#242833;
    --btn-testo:#DEE2EA;
    --nav:#0F3D22; --nav-2:#0A2B17; --nav-linea:rgba(255,255,255,.08);
    --nav-testo:#B8DCC6; --nav-fioco:#7FB295; --nav-attivo:#EAF6EE;
    --nav-att:#0F3D22; --nav-velo:rgba(255,255,255,.08); --nav-badge:#FF9166;
    --om-acc:0 6px 18px -6px rgba(109,143,255,.45);
    --anello:0 0 0 4px rgba(109,143,255,.22);
    --vetro:rgba(0,0,0,.7);
    --acciaio-scuro:#2F3440; --acciaio:#565E6D; --acciaio-chiaro:#9BA4B4;
    --serb-vetro:#0E1117; --serb-tacca:rgba(255,255,255,.34); --serb-testo:#1A1D25;
    --latte:#F7F2E4; --latte-2:#DDD0AE; --latte-onda:#EFE7D0;
    --latte-nuovo:#9DB3FF; --latte-nuovo-2:#6D8FFF;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   2-bis. LE FORME E IL CARATTERE
   È qui che l'app cambia davvero aria: un carattere geometrico al posto di
   Inter, angoli molto più tondi, pulsanti a pastiglia, e bordi che si fanno
   da parte lasciando il lavoro alle ombre.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --font:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:var(--font);
  --mono:var(--font);

  /* La scheda è un rettangolo molto stondato, il pulsante una pastiglia. */
  --r-sm:10px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-full:999px;

  /* Il titolo di pagina cresce e si stringe: è il segno più evidente del
     cambio di tono. */
  --t-xl:34px;
  --t-hero:36px;
  --tocco:46px;
}

/* Il carattere vale per tutto, caselle comprese: un campo che scrive con un
   altro carattere si vede, e si vede male. */
body,input,select,textarea,button{font-family:var(--font);}

.topbar-title{letter-spacing:-.03em;font-weight:700;}
.numero-v,.calc-esito-v,.storico-data b{letter-spacing:-.03em;}
.card-tit,.blocco-nome,.storico-mese-t,.mh-title{letter-spacing:-.02em;}

/* ── I pulsanti diventano pastiglie ──────────────────────────────────────── */
.btn{border-radius:var(--r-full);font-weight:600;letter-spacing:-.01em;
  padding:9px 18px;}
.btn-sm{border-radius:var(--r-full);padding:6px 14px;}
.btn-lg{border-radius:var(--r-full);padding:14px 26px;}
.btn-primary{box-shadow:var(--om-acc);}
.btn-primary:hover{box-shadow:var(--om-acc);transform:translateY(-1px);}
.btn-primary:active{transform:translateY(0);}
.icona-btn{border-radius:var(--r-full);}
.sync-chip{border-radius:var(--r-full);}

/* ── Le caselle: niente bordo duro, un fondo appena accennato ────────────── */
.finput,.fselect,.ftextarea{border-radius:var(--r-md);
  background:var(--sfondo-2);border-color:transparent;
  padding:11px var(--s4);font-weight:500;}
.finput:hover,.fselect:hover,.ftextarea:hover{border-color:var(--linea-forte);}
.finput:focus,.fselect:focus,.ftextarea:focus{background:var(--carta);
  border-color:var(--acc);}
.finput[readonly]{background:var(--sfondo-2);}
.flabel{font-weight:600;letter-spacing:-.005em;color:var(--testo-2);}

/* ── Le schede: angoli larghi, bordo che quasi sparisce ──────────────────── */
.card{border-radius:var(--r-xl);border-color:var(--linea);box-shadow:var(--om-2);}
.blocco{border-radius:var(--r-xl);}
.numero{border-radius:var(--r-xl);box-shadow:var(--om-2);}
.modal{border-radius:24px;}
.ico-badge{border-radius:14px;}
.ico-badge.sm{border-radius:11px;}
.ico-badge.corallo{background:var(--corallo-velo);color:var(--corallo);}
.ico-badge.pervinca{background:var(--pervinca-velo);color:var(--pervinca);}

/* ── Il menu: verde bosco, voce aperta come pastiglia chiara ─────── */
/* La colonna scende e si scurisce: un verde piatto su tutta l'altezza
   sembra un rettangolo di vernice, la sfumatura sembra una colonna. */
.sidebar{background:linear-gradient(180deg,var(--nav),var(--nav-2));}

/* PIU` GRANDE, PERCHE` SI LEGGE DI SFUGGITA
   Le voci del menu non si leggono: si riconoscono con la coda dell'occhio
   mentre si sta pensando ad altro. A 16px, con un telefono in mano dentro
   una cella o un PC a mezzo metro, «Lavorazioni» e «Impostazioni» si
   somigliavano abbastanza da far sbagliare il primo colpo. */
.ni{border-radius:var(--r-full);font-weight:600;letter-spacing:-.01em;
  font-size:17.5px;min-height:46px;padding:10px var(--s4);gap:var(--s3);}
.ni svg{width:21px;height:21px;}
.nav-sec{font-size:var(--t-sm);}
.sidebar-sub{font-size:var(--t-mini);}

/* Il marchio dell'azienda sotto il nome dell'app. Fondo chiaro dietro:
   quasi tutti i loghi sono fatti per la carta bianca, e su una sidebar
   verde scuro un PNG con lo sfondo trasparente e le scritte nere sparisce. */
.sidebar-marchio:empty{display:none;}
.sidebar-marchio{margin:var(--s3) 0 var(--s2);background:#fff;
  border-radius:var(--r-md);padding:6px 10px;display:flex;
  align-items:center;justify-content:center;max-width:180px;}
.sidebar-marchio img{max-width:100%;max-height:44px;display:block;}
.logo-badge{font-size:17.5px;}
.ni.active{box-shadow:0 4px 12px -4px rgba(0,0,0,.55);}
/* Nel gestionale dello studio la voce aperta era verde pieno con il testo
   bianco, e il foglio di base scrive ancora così. Qui la pastiglia è chiara,
   quindi il testo deve tornare scuro: senza questa riga sarebbe bianco su
   bianco, cioè invisibile. */
.ni.active{color:var(--nav-att);}
.ni.active svg{color:var(--nav-att);}
.ni.active .nbadge{background:var(--corallo);color:#fff;}
.nav-sec{color:var(--nav-fioco);letter-spacing:.09em;}
.logo-badge{letter-spacing:-.02em;}

/* ── L'accesso: la sfumatura morbida sta qui, dove non c'è un dato da
      leggere. Sui numeri e sulle tabelle il fondo resta pulito. ─────────── */
#login-screen{background:
  radial-gradient(1100px 800px at  6%  -4%, #FFC09B 0%, rgba(255,192,155,0) 58%),
  radial-gradient(1000px 860px at 96%  10%, #7C9CFF 0%, rgba(124,156,255,0) 60%),
  radial-gradient(1250px 900px at 44% 112%, #AFAFF6 0%, rgba(175,175,246,0) 62%),
  #F1F0FA;}
.login-box{border-radius:26px;border:1px solid rgba(255,255,255,.7);
  box-shadow:0 30px 70px -22px rgba(24,20,60,.35);}
.login-logo-badge{border-radius:var(--r-full);letter-spacing:-.02em;}
.login-title{letter-spacing:-.03em;}

/* Il primo numero della giornata prende un filo di colore dal fondo: è
   l'unico punto dei dati dove la sfumatura entra, e sta dietro a un numero
   solo, non a una tabella. */
.numeri .numero:first-child{
  background:linear-gradient(140deg, var(--acc-velo), var(--carta) 62%);}

@media(max-width:560px){
  :root{--t-xl:27px;}
}

/* ══════════════════════════════════════════════════════════════════════════
   3. I BLOCCHI DELLA GIORNATA
   Sei fasi in fila. Ognuna dice da sola se è vuota, se è a posto o se ha
   qualcosa fuori soglia — senza doverla aprire.
   ══════════════════════════════════════════════════════════════════════════ */
.blocchi{display:flex;flex-direction:column;gap:var(--s3);}

.blocco{background:var(--carta);border:1px solid var(--linea);
  border-radius:var(--r-xl);box-shadow:var(--om-1);overflow:hidden;
  transition:box-shadow var(--v-medio) var(--curva),border-color var(--v-medio) var(--curva);}
.blocco.aperto{box-shadow:var(--om-3);border-color:var(--linea-forte);}

.blocco-t{display:flex;align-items:center;gap:var(--s3);width:100%;
  padding:var(--s4) var(--s5);background:none;border:0;cursor:pointer;
  text-align:left;font:inherit;color:var(--testo);min-height:68px;}
.blocco-t:hover{background:var(--velo);}
.blocco-t:focus-visible{outline:0;box-shadow:inset var(--anello);}

.blocco-tit{flex:1;min-width:0;}
.blocco-nome{font-size:var(--t-md);font-weight:600;letter-spacing:-.01em;}
.blocco-sotto{font-size:var(--t-sm);color:var(--testo-3);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* La freccia che gira: l'unico segno che il blocco si apre */
.blocco-frec{width:20px;height:20px;flex-shrink:0;color:var(--testo-4);
  transition:transform var(--v-medio) var(--curva);}
.blocco.aperto .blocco-frec{transform:rotate(90deg);color:var(--acc);}

.blocco-corpo{padding:0 var(--s5) var(--s5);border-top:1px solid var(--linea);
  padding-top:var(--s5);}

/* Lo stato del blocco, in una parola */
.stato{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
  padding:4px 10px;border-radius:var(--r-full);
  font-size:var(--t-mini);font-weight:600;letter-spacing:.01em;}
.stato::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.stato.vuoto{background:var(--neutro-velo);color:var(--neutro-testo);}
.stato.parziale{background:var(--info-velo);color:var(--info-testo);}
.stato.ok{background:var(--ok-velo);color:var(--ok-testo);}
.stato.attenzione{background:var(--avviso-velo);color:var(--avviso-testo);}
.stato.fuori{background:var(--critico-velo);color:var(--critico-testo);}

/* ══════════════════════════════════════════════════════════════════════════
   4. LA GRIGLIA DEI CAMPI
   Le misure si leggono in colonna stretta: tre per riga sul computer, una
   sola sul telefono. Ogni campo porta la sua unità dentro la casella.
   ══════════════════════════════════════════════════════════════════════════ */
.campi{display:grid;gap:var(--s4) var(--s4);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));}
.campi.larghi{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.campi .fg{margin-bottom:0;}

.campo-u{position:relative;}
.campo-u .finput{padding-right:52px;}
.campo-u .unita{position:absolute;right:var(--s3);top:50%;transform:translateY(-50%);
  font-size:var(--t-sm);color:var(--testo-4);pointer-events:none;font-weight:500;}

/* Il campo che ha qualcosa da dire */
.finput.fuori-soglia{border-color:var(--avviso);background:var(--avviso-velo);}
.finput.impossibile{border-color:var(--critico);background:var(--critico-velo);}
.campo-msg{font-size:var(--t-mini);margin-top:5px;line-height:1.4;display:none;}
.campo-msg.mostra{display:block;}
.campo-msg.avviso{color:var(--avviso-testo);}
.campo-msg.critico{color:var(--critico-testo);}

/* ══════════════════════════════════════════════════════════════════════════
   5. IL NUMERO GRANDE (resa, G/C, totali)
   ══════════════════════════════════════════════════════════════════════════ */
.numeri{display:grid;gap:var(--s3);
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}

.numero{background:var(--carta);border:1px solid var(--linea);
  border-radius:var(--r-xl);padding:var(--s4) var(--s5) var(--s5);
  box-shadow:var(--om-1);display:flex;flex-direction:column;gap:var(--s2);}
.numero-t{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s2);}
.numero-et{font-size:var(--t-sm);font-weight:600;color:var(--testo-2);}
.numero-v{font-size:var(--t-hero);font-weight:600;letter-spacing:-.03em;
  line-height:1;color:var(--testo);font-variant-numeric:tabular-nums;}
.numero-v .u{font-size:var(--t-lg);font-weight:500;color:var(--testo-3);
  margin-left:3px;letter-spacing:0;}
.numero-v.vuoto{color:var(--testo-4);font-weight:500;}
.numero-n{font-size:var(--t-mini);color:var(--testo-3);line-height:1.45;}

/* Lo scostamento dal periodo prima: la freccia dice il verso, il colore il giudizio */
.delta{display:inline-flex;align-items:center;gap:3px;font-size:var(--t-mini);
  font-weight:600;padding:2px 7px;border-radius:var(--r-full);
  font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0;}
.delta.su{background:var(--ok-velo);color:var(--ok-testo);}
.delta.giu{background:var(--critico-velo);color:var(--critico-testo);}
.delta.neutra{background:var(--pervinca-velo);color:var(--pervinca-testo);}
.delta.pari{background:var(--neutro-velo);color:var(--neutro-testo);}
.delta svg{width:11px;height:11px;}

/* ══════════════════════════════════════════════════════════════════════════
   6. IL CALCOLATORE DELLA STANDARDIZZAZIONE
   La parte che risponde è incassata e colorata d'accento: si capisce a occhio
   che quella non si scrive, si legge.
   ══════════════════════════════════════════════════════════════════════════ */
.calc{display:grid;gap:var(--s4);grid-template-columns:1fr;}
@media(min-width:900px){.calc{grid-template-columns:1fr 340px;align-items:start;}}

.calc-esito{background:var(--acc-velo);border:1px solid var(--acc-velo-2);
  border-radius:var(--r-xl);padding:var(--s5);}
.calc-esito-et{font-size:var(--t-micro);font-weight:600;text-transform:uppercase;
  letter-spacing:var(--lettera-larga);color:var(--acc-testo);}
.calc-esito-v{font-size:38px;font-weight:600;letter-spacing:-.03em;line-height:1.05;
  color:var(--acc-testo);margin-top:var(--s2);font-variant-numeric:tabular-nums;}
.calc-esito-v .u{font-size:var(--t-lg);font-weight:500;margin-left:4px;}
.calc-esito-n{font-size:var(--t-sm);color:var(--acc-testo);opacity:.85;
  margin-top:var(--s3);line-height:1.5;}
.calc-esito.screma{background:var(--avviso-velo);border-color:var(--avviso);}
.calc-esito.screma .calc-esito-et,
.calc-esito.screma .calc-esito-v,
.calc-esito.screma .calc-esito-n{color:var(--avviso-testo);}
.calc-esito.niente{background:var(--sfondo-2);border-color:var(--linea);}
.calc-esito.niente .calc-esito-et,
.calc-esito.niente .calc-esito-v,
.calc-esito.niente .calc-esito-n{color:var(--testo-3);}

/* La riga che mostra come si arriva al numero */
.calc-passi{margin-top:var(--s4);padding-top:var(--s4);
  border-top:1px solid var(--acc-velo-2);}
.calc-passo{display:flex;justify-content:space-between;gap:var(--s3);
  font-size:var(--t-sm);padding:3px 0;color:var(--acc-testo);}
.calc-passo b{font-weight:600;font-variant-numeric:tabular-nums;}
.calc-esito.niente .calc-passi{border-top-color:var(--linea);}
.calc-esito.niente .calc-passo{color:var(--testo-2);}
.calc-esito.screma .calc-passi{border-top-color:var(--avviso);}
.calc-esito.screma .calc-passo{color:var(--avviso-testo);}

/* ══════════════════════════════════════════════════════════════════════════
   7. LE RIGHE DEI CONFERIMENTI
   Sedici allevamenti, uno sotto l'altro. Sul computer è una tabella; sul
   telefono ogni riga diventa una scheda, perché una tabella a sei colonne
   sul telefono non si legge.
   ══════════════════════════════════════════════════════════════════════════ */
.conf-testa,.conf-riga{display:grid;
  grid-template-columns:minmax(150px,2fr) 110px 92px 96px 84px;
  gap:var(--s3);align-items:center;}
.conf-testa{padding:0 var(--s3) var(--s2);font-size:var(--t-micro);
  font-weight:600;text-transform:uppercase;letter-spacing:var(--lettera-larga);
  color:var(--testo-3);}
.conf-riga{padding:var(--s2) var(--s3);border-radius:var(--r-md);
  border:1px solid transparent;}
.conf-riga:nth-child(even){background:var(--carta-2);}
.conf-riga:hover{border-color:var(--linea);}
.conf-riga.compilata{background:var(--acc-velo);}

.conf-nome{font-weight:600;font-size:var(--t-sm);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.conf-cod{font-size:var(--t-mini);color:var(--testo-3);font-weight:400;}
.conf-riga .finput{padding:7px var(--s2);min-height:38px;font-size:var(--t-sm);
  text-align:right;font-variant-numeric:tabular-nums;}
.conf-tot{display:flex;justify-content:space-between;align-items:center;
  margin-top:var(--s4);padding:var(--s4) var(--s3) 0;
  border-top:2px solid var(--linea-forte);}
.conf-tot-et{font-size:var(--t-base);font-weight:600;}
.conf-tot-v{font-size:var(--t-lg);font-weight:600;font-variant-numeric:tabular-nums;}

@media(max-width:820px){
  .conf-testa{display:none;}
  .conf-riga{grid-template-columns:1fr 1fr;gap:var(--s2) var(--s3);
    padding:var(--s3);border:1px solid var(--linea);margin-bottom:var(--s2);
    background:var(--carta-2);}
  .conf-nome{grid-column:1/-1;}
  .conf-riga .cella{display:flex;align-items:center;gap:var(--s2);}
  .conf-riga .cella::before{content:attr(data-et);font-size:var(--t-mini);
    color:var(--testo-3);flex-shrink:0;min-width:56px;}
}

/* ══════════════════════════════════════════════════════════════════════════
   8. TABELLA COMPATTA (analisi, pezzature, storico)
   ══════════════════════════════════════════════════════════════════════════ */
.tab-avvolge{overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin:0 calc(var(--s5) * -1);padding:0 var(--s5);}
.tabd{width:100%;border-collapse:collapse;font-size:var(--t-sm);
  font-variant-numeric:tabular-nums;min-width:520px;}
.tabd th{text-align:right;font-size:var(--t-micro);font-weight:600;
  text-transform:uppercase;letter-spacing:var(--lettera-larga);
  color:var(--testo-3);padding:var(--s2) var(--s3);
  border-bottom:1px solid var(--linea-forte);white-space:nowrap;}
.tabd th:first-child,.tabd td:first-child{text-align:left;}
.tabd td{padding:var(--s3);border-bottom:1px solid var(--linea);text-align:right;}
.tabd tbody tr:last-child td{border-bottom:0;}
.tabd tbody tr:hover{background:var(--velo);}
.tabd td.tet{font-weight:600;color:var(--testo-2);}
.tabd td .finput{padding:6px var(--s2);min-height:36px;text-align:right;
  font-size:var(--t-sm);}
.tabd .fuori{color:var(--critico-testo);font-weight:600;}

/* La casella da spuntare: grande abbastanza da centrarla col pollice, in
   reparto, con i guanti. Il verde è quello dell'app, non quello del sistema
   operativo, che su Windows è blu e su un telefono è un altro blu ancora. */
.spunta{width:20px;height:20px;accent-color:var(--acc);cursor:pointer;margin:0;}
.spunta:disabled{cursor:not-allowed;opacity:.45;}
.spunta.modificato{outline:2px solid var(--acc);outline-offset:2px;
  border-radius:4px;}
.tabd .attenzione{color:var(--avviso-testo);font-weight:600;}

/* ══════════════════════════════════════════════════════════════════════════
   8bis. LE TRE LINGUETTE DELLE STATISTICHE
   ═══════════════════════════════════════════════════════════════════════
   Stessa forma delle linguette delle Impostazioni: chi ha imparato lì non
   deve impararlo un'altra volta. */
.amb-schede{display:flex;gap:var(--s2);margin-bottom:var(--s5);flex-wrap:wrap;
  border-bottom:1px solid var(--linea);padding-bottom:0;}
.amb-scheda{border:0;background:none;font:inherit;cursor:pointer;
  font-size:var(--t-md);font-weight:600;color:var(--testo-3);
  padding:var(--s3) var(--s4);border-bottom:2.5px solid transparent;
  margin-bottom:-1px;white-space:nowrap;
  transition:color var(--v-veloce) var(--curva);}
.amb-scheda:hover{color:var(--testo);}
.amb-scheda.attiva{color:var(--acc-testo);border-bottom-color:var(--acc);}

/* ═══════════════════════════════════════════════════════════════════════
   8ter. DOVE STA ANDANDO — la retta di tendenza e la sua freccia
   ═══════════════════════════════════════════════════════════════════════
   La retta è sottile e viola: non deve competere con la linea dei valori,
   deve solo dire da che parte pende. La freccia sta in alto a destra, dove
   il grafico finisce, e porta il colore del MERITO — le stesse tinte del
   confronto fra periodi, così verde vuol dire sempre la stessa cosa. */
.carta-avvolge{position:relative;}
.graf .tendenza{fill:none;stroke:var(--pervinca);stroke-width:1.8;
  stroke-dasharray:1 5;stroke-linecap:round;opacity:.85;}
.graf-legenda i.tendenza{background:var(--pervinca);height:2px;}
.tend-badge{position:absolute;top:0;right:0;z-index:2;
  display:inline-flex;align-items:center;gap:5px;
  padding:5px var(--s3);border-radius:var(--r-full);
  font-size:var(--t-sm);font-weight:700;line-height:1;
  background:var(--sfondo-2);color:var(--testo-2);box-shadow:var(--om-1);}
.tend-badge .tend-frec{font-size:15px;line-height:1;}
.tend-badge.su{background:var(--ok-velo);color:var(--ok-testo);}
.tend-badge.giu{background:var(--critico-velo);color:var(--critico-testo);}

/* IL PULSANTE DEL CONFRONTO
   Stava in fondo a una barra di sette controlli, bianco come gli altri, e
   non lo trovava nessuno: è l'unica cosa in quella barra che apre una vista
   diversa invece di cambiare un numero. Il pervinca lo stacca dal verde
   delle azioni — non è un Salva, è un altro modo di guardare. */
.btn-confronta{background:var(--pervinca-velo);border-color:var(--pervinca);
  color:var(--pervinca-testo);font-weight:700;}
.btn-confronta svg{color:var(--pervinca);}
.btn-confronta:hover{background:var(--pervinca);color:var(--su-acc);}
.btn-confronta:hover svg{color:var(--su-acc);}
.btn-confronta.scelto{background:var(--pervinca);border-color:var(--pervinca);
  color:var(--su-acc);}
.btn-confronta.scelto svg{color:var(--su-acc);}

/* ═══════════════════════════════════════════════════════════════════════
   9. PERMESSI — la griglia che l'amministratore usa per decidere chi vede cosa
   ══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   8quater. SOGLIE E LIMITI — quattro caselle che fanno due cose diverse
   ═══════════════════════════════════════════════════════════════════════ */
.soglie-legenda{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);
  margin-bottom:var(--s4);}
.soglie-chiave{display:flex;align-items:flex-start;gap:8px;flex:1 1 240px;
  font-size:var(--t-mini);color:var(--testo-2);line-height:1.5;max-width:420px;}
.soglie-chiave i{flex-shrink:0;width:10px;height:10px;border-radius:3px;
  margin-top:4px;background:var(--neutro);}
.soglie-chiave.critico i{background:var(--critico);}
.soglie-chiave.avviso i{background:var(--avviso);}
.soglie-chiave.vuoto i{background:none;border:1.5px dashed var(--linea-forte);}

.tab-soglie .c-misura{width:150px;}
.tab-soglie .c-num{width:104px;}
.tab-soglie .c-azione{width:auto;min-width:200px;}
.tab-soglie th.th-ferma{color:var(--critico-testo);}
.tab-soglie th.th-avvisa{color:var(--avviso-testo);}
/* Il filo di colore sotto l'intestazione dice dove finisce un gruppo e
   comincia l'altro, senza righe verticali che spezzerebbero la tabella. */
.tab-soglie th.th-ferma{box-shadow:inset 0 -2px 0 var(--critico-velo);}
.tab-soglie th.th-avvisa{box-shadow:inset 0 -2px 0 var(--avviso-velo);}
.tab-soglie td .finput{min-width:0;}
.tab-soglie .c-azione .finput{text-align:left;}
.tab-soglie .sog-u{color:var(--testo-3);font-weight:400;}
.tab-soglie tr.sog-spenta .tet{color:var(--testo-3);font-weight:400;}

/* ═══════════════════════════════════════════════════════════════════════
   8quinquies. CHI PORTA IL LATTE MIGLIORE — i filtri dei conferenti
   ═══════════════════════════════════════════════════════════════════════ */
.filtri-latte{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);
  margin-bottom:var(--s4);padding-bottom:var(--s4);
  border-bottom:1px solid var(--linea);}
.filtri-et{font-size:var(--t-sm);color:var(--testo-2);font-weight:600;}
.filtri-chip{display:flex;flex-wrap:wrap;gap:6px;}
.chip-ord{border:1px solid var(--linea-forte);background:var(--carta);
  font:inherit;font-size:var(--t-mini);font-weight:600;color:var(--testo-2);
  padding:5px 11px;border-radius:var(--r-full);cursor:pointer;white-space:nowrap;
  transition:all var(--v-veloce) var(--curva);}
.chip-ord:hover{border-color:var(--acc);color:var(--acc-testo);}
.chip-ord.att{background:var(--acc);border-color:var(--acc);color:var(--su-acc);}

/* Il numero in classifica davanti al nome: senza, «il terzo» si conta con
   il dito sullo schermo. */
.posto{display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 5px;margin-right:8px;
  border-radius:var(--r-full);background:var(--sfondo-2);color:var(--testo-3);
  font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;}
tr:nth-child(1) .posto,tr:nth-child(2) .posto,tr:nth-child(3) .posto{
  background:var(--acc-velo);color:var(--acc-testo);}

/* ═══════════════════════════════════════════════════════════════════════
   8quinquies-bis. LE PESATE: la tolleranza sopra, le caselle numerate sotto
   ═══════════════════════════════════════════════════════════════════════
   Chi sta alla bilancia ha il pezzo in mano e un secondo per decidere: i due
   limiti stanno grandi, sopra le caselle, con il colore di cosa vogliono
   dire. */
.soglie-peso{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s4);}
.sp-voce{flex:1 1 150px;display:flex;flex-direction:column;gap:1px;
  padding:var(--s3) var(--s4);border-radius:var(--r-md);
  background:var(--sfondo-2);border:1.5px solid var(--linea-forte);}
.sp-voce b{font-size:var(--t-lg);font-weight:700;line-height:1.15;
  font-variant-numeric:tabular-nums;}
.sp-et{font-style:normal;font-size:var(--t-mini);font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;color:var(--testo-3);}
.sp-voce small{font-size:var(--t-mini);color:var(--testo-3);}
.sp-voce.ambra{background:var(--avviso-velo);border-color:var(--avviso);}
.sp-voce.ambra b,.sp-voce.ambra .sp-et{color:var(--avviso-testo);}
.sp-voce.rossa{background:var(--critico-velo);border-color:var(--critico);}
.sp-voce.rossa b,.sp-voce.rossa .sp-et{color:var(--critico-testo);}

/* Le caselle numerate, come sul foglio: si riempiono in ordine, si salta
   quella del pezzo caduto e si torna indietro se si è battuto storto. */
.pesate-griglia{display:grid;gap:6px;
  grid-template-columns:repeat(auto-fill,minmax(88px,1fr));}
.pesata-cella{position:relative;display:block;}
.pesata-cella .finput{padding-left:26px;text-align:right;min-height:40px;
  font-variant-numeric:tabular-nums;}
.pc-n{position:absolute;left:8px;top:50%;transform:translateY(-50%);
  font-size:var(--t-mini);font-weight:700;color:var(--testo-4);
  pointer-events:none;font-variant-numeric:tabular-nums;}
.pesata-cella.difettoso .finput{background:var(--avviso-velo);
  border-color:var(--avviso);color:var(--avviso-testo);font-weight:700;}
.pesata-cella.difettoso .pc-n{color:var(--avviso-testo);}
.pesata-cella.nonvendibile .finput{background:var(--critico-velo);
  border-color:var(--critico);color:var(--critico-testo);font-weight:700;}
.pesata-cella.nonvendibile .pc-n{color:var(--critico-testo);}

/* ═══════════════════════════════════════════════════════════════════════
   8sexies. IL VERDETTO DI LEGGE — conforme o no, e per quale dei tre criteri
   ═══════════════════════════════════════════════════════════════════════
   Non è un avviso fra gli altri: è la risposta alla domanda per cui si sta
   pesando. Occupa la sua riga, con il suo colore, e i tre criteri sotto in
   chiaro — perché «non conforme» da solo non dice cosa fare. */
.verdetto{margin-top:var(--s4);padding:var(--s4);border-radius:var(--r-lg);
  border:1.5px solid var(--linea-forte);background:var(--sfondo-2);
  font-size:var(--t-sm);line-height:1.55;}
.verdetto.ok{border-color:var(--ok);background:var(--ok-velo);color:var(--ok-testo);}
.verdetto.no{border-color:var(--critico);background:var(--critico-velo);
  color:var(--critico-testo);}
.verdetto.attesa{border-style:dashed;color:var(--testo-2);}
.verdetto-t{font-size:var(--t-md);font-weight:800;letter-spacing:.02em;
  margin-bottom:var(--s3);}
.verdetto-righe{list-style:none;margin:0;padding:0;display:grid;gap:6px;}
.verdetto-righe li{display:flex;align-items:flex-start;gap:8px;}
.verdetto-righe i{font-style:normal;opacity:.7;}
.v-segno{flex-shrink:0;width:16px;font-weight:800;text-align:center;}
.verdetto-righe li.si .v-segno{color:var(--ok);}
.verdetto-righe li.no .v-segno{color:var(--critico);}
.verdetto-righe li.forse{color:var(--testo-3);}

/* Il nome di chi usa l'account si corregge dove si legge: una casella che
   sembra un titolo finché non ci si entra dentro. */
.finput-nome{font-weight:600;text-align:left;border-color:transparent;
  background:none;padding-left:0;min-height:30px;}
.finput-nome:hover{border-color:var(--linea-forte);background:var(--carta);
  padding-left:var(--s3);}
.finput-nome:focus{background:var(--carta);padding-left:var(--s3);}

/* La cronologia, raggruppata per giorno: «ieri alle 14» si trova, una
   colonna di date per esteso no. */
.reg-giorno{font-size:var(--t-sm);font-weight:700;color:var(--testo-2);
  margin:var(--s4) 0 var(--s2);display:flex;align-items:baseline;gap:var(--s3);}
.reg-giorno:first-child{margin-top:0;}
.reg-giorno small{font-weight:400;color:var(--testo-3);font-size:var(--t-mini);}
.reg-campi{display:block;color:var(--testo-3);font-size:var(--t-mini);
  font-weight:400;margin-top:2px;}

/* ═══════════════════════════════════════════════════════════════════════
   8septies. LA BACHECA — quattro riquadri con una faccia, non quattro numeri
   ═══════════════════════════════════════════════════════════════════════
   Una bacheca non si studia: ci si passa sopra. Con l'icona accanto al nome
   si riconosce il riquadro con la coda dell'occhio, senza leggere. */
.quadri{display:grid;gap:var(--s4);margin-bottom:var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.quadro{background:var(--carta);border:1px solid var(--linea);
  border-radius:var(--r-xl);padding:var(--s4) var(--s5) var(--s5);
  box-shadow:var(--om-2);}
.quadro-t{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3);}
.quadro-t .ico-badge{width:38px;height:38px;flex-shrink:0;}
.quadro-t .ico-badge svg{width:20px;height:20px;}
.quadro-et{font-size:var(--t-base);font-weight:600;color:var(--testo);
  line-height:1.25;}
.quadro-v{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.1;
  font-variant-numeric:tabular-nums;}
.quadro-v.vuoto{color:var(--testo-4);}
.quadro-v .u{font-size:var(--t-md);font-weight:500;color:var(--testo-3);
  margin-left:4px;letter-spacing:0;}
.quadro-n{font-size:var(--t-mini);color:var(--testo-3);margin-top:6px;
  line-height:1.45;}
@media(max-width:560px){.quadro-v{font-size:28px;}}

/* Le righe dei blocchi della giornata: le stesse icone che quei blocchi
   portano dentro la lavorazione. Chi le ha viste una volta le riconosce, e
   la bacheca diventa la mappa di dove andare. */
.oggi-riga{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0;
  border-bottom:1px solid var(--linea);}
.oggi-riga:last-of-type{border-bottom:0;}
.oggi-nome{flex:1;min-width:0;font-size:var(--t-base);font-weight:500;}

.perm{display:grid;grid-template-columns:1fr auto;gap:var(--s2) var(--s4);
  align-items:center;}
.perm-et{font-size:var(--t-sm);font-weight:500;}
.perm-et small{display:block;color:var(--testo-3);font-size:var(--t-mini);
  font-weight:400;margin-top:1px;}
.perm-scelta{display:inline-flex;background:var(--sfondo-2);
  border-radius:var(--r-full);padding:3px;gap:2px;}
.perm-scelta button{border:0;background:none;font:inherit;cursor:pointer;
  font-size:var(--t-mini);font-weight:600;color:var(--testo-3);
  padding:5px 11px;border-radius:var(--r-full);white-space:nowrap;
  transition:all var(--v-veloce) var(--curva);}
.perm-scelta button:hover{color:var(--testo);}
.perm-scelta button.att{background:var(--carta);color:var(--acc-testo);
  box-shadow:var(--om-1);}
/* Una sezione che nessuno ha scelto vale quanto la sua area: la pastiglia
   accesa dice cosa vale adesso, non una scelta fatta da qualcuno. Si vede
   dalla cornice tratteggiata, e sparisce al primo clic. */
.perm-scelta.ereditata{outline:1.5px dashed var(--linea-forte);
  outline-offset:2px;}
.perm-scelta.ereditata button.att{background:var(--sfondo);
  color:var(--testo-2);box-shadow:none;}

/* ══════════════════════════════════════════════════════════════════════════
   10. IL PANNELLO "COSA SI MUOVE CON LA RESA"
   ══════════════════════════════════════════════════════════════════════════ */
.legame{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0;
  border-bottom:1px solid var(--linea);}
.legame:last-child{border-bottom:0;}
.legame-nome{flex:1;min-width:0;font-size:var(--t-sm);font-weight:500;}
.legame-barra{width:130px;height:8px;border-radius:var(--r-full);
  background:var(--sfondo-2);position:relative;flex-shrink:0;overflow:hidden;}
.legame-barra i{position:absolute;top:0;bottom:0;border-radius:var(--r-full);
  background:var(--acc);}
.legame-barra i.neg{background:var(--critico);}
.legame-v{width:54px;text-align:right;font-size:var(--t-sm);font-weight:600;
  font-variant-numeric:tabular-nums;flex-shrink:0;}
.legame-forza{font-size:var(--t-mini);color:var(--testo-3);width:74px;
  text-align:right;flex-shrink:0;}
@media(max-width:560px){.legame-forza{display:none;}.legame-barra{width:84px;}}

/* ══════════════════════════════════════════════════════════════════════════
   11. GRAFICI — disegnati a mano in SVG, così seguono il tema
   ══════════════════════════════════════════════════════════════════════════ */
.graf{width:100%;height:auto;display:block;overflow:visible;}
.graf .griglia{stroke:var(--linea);stroke-width:1;}
.graf .asse{fill:var(--testo-3);font-size:11px;}
.graf .linea{fill:none;stroke:var(--acc);stroke-width:2;
  stroke-linejoin:round;stroke-linecap:round;}
.graf .linea-prec{fill:none;stroke:var(--testo-4);stroke-width:1.5;
  stroke-dasharray:4 4;stroke-linejoin:round;}
.graf .area{fill:var(--acc);opacity:.1;}
.graf .media{stroke:var(--avviso);stroke-width:1.5;stroke-dasharray:5 4;}
.graf .punto{fill:var(--acc);}
.graf .barra{fill:var(--acc);}
.graf-legenda{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
  margin-top:var(--s3);font-size:var(--t-mini);color:var(--testo-3);}
.graf-legenda span{display:inline-flex;align-items:center;gap:6px;}
.graf-legenda i{width:14px;height:2.5px;border-radius:2px;background:var(--acc);}
.graf-legenda i.prec{background:var(--testo-4);}
.graf-legenda i.media{background:var(--avviso);}

/* ══════════════════════════════════════════════════════════════════════════
   12. RIFINITURE
   ══════════════════════════════════════════════════════════════════════════ */
/* La riga di date in cima alla giornata */
.data-nav{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;}
.data-nav .finput{width:auto;min-width:160px;}

/* Il velo che copre un blocco che l'utente può vedere ma non scrivere */
.sola-lettura{position:relative;}
.sola-lettura input,.sola-lettura select,.sola-lettura textarea,
.sola-lettura button:not(.blocco-t){pointer-events:none;opacity:.75;}
.sola-lettura-nota{display:inline-flex;align-items:center;gap:6px;
  font-size:var(--t-mini);color:var(--testo-3);margin-bottom:var(--s3);}
.sola-lettura-nota svg{width:13px;height:13px;}

/* Il vuoto detto bene */
.vuoto-msg{text-align:center;padding:var(--s9) var(--s5);color:var(--testo-3);}
.vuoto-msg h3{font-size:var(--t-md);font-weight:600;color:var(--testo-2);
  margin-bottom:var(--s2);}
.vuoto-msg p{font-size:var(--t-sm);line-height:1.6;max-width:420px;
  margin:0 auto var(--s5);}

/* Sul telefono i numeri grandi scendono di un gradino: 32px in colonna
   stretta spezzano la riga e il numero perde forza */
@media(max-width:560px){
  .numero-v{font-size:27px;}
  .calc-esito-v{font-size:32px;}
  .numeri{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
}

/* ══════════════════════════════════════════════════════════════════════════
   13. PEZZI DI SERVIZIO
   Tre cose che nello studio non c'erano: il bottone tondo con la sola icona,
   il messaggio che sale dal basso a conferma, e la riga utente senza il menu
   a tendina (qui il profilo non ha nulla da nascondere: nome, ruolo, esci).
   ══════════════════════════════════════════════════════════════════════════ */
.icona-btn{width:36px;height:36px;flex-shrink:0;display:inline-flex;
  align-items:center;justify-content:center;border-radius:var(--r-md);
  border:1px solid var(--btn-bordo);background:var(--btn);color:var(--testo-2);
  cursor:pointer;transition:all var(--v-veloce) var(--curva);}
.icona-btn:hover{background:var(--btn-hover);color:var(--testo);
  border-color:var(--linea-forte);}
.icona-btn svg{width:17px;height:17px;}

.utente{display:flex;align-items:center;gap:var(--s2);}
.utente-chip{cursor:default;}
.utente-chip:hover{background:none;border-color:transparent;}

.toast-zona{position:fixed;left:50%;bottom:var(--s6);transform:translateX(-50%);
  z-index:400;display:flex;flex-direction:column;gap:var(--s2);
  align-items:center;pointer-events:none;padding:0 var(--s4);width:100%;
  max-width:520px;}
.toast{background:var(--testo);color:var(--sfondo);padding:11px var(--s5);
  border-radius:var(--r-full);font-size:var(--t-sm);font-weight:500;
  box-shadow:var(--om-4);animation:toast-su var(--v-lento) var(--curva);
  max-width:100%;text-align:center;}
.toast.ok{background:var(--ok);color:#fff;}
.toast.errore{background:var(--critico);color:#fff;}
@keyframes toast-su{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:560px){.toast-zona{bottom:var(--s4);}}

/* ══════════════════════════════════════════════════════════════════════════
   14. LA SCHEDA
   Nel gestionale dello studio la scheda è `.card` vuota con `.cp` dentro a
   fare da imbottitura. Qui le schede hanno tutte la stessa forma, quindi
   l'imbottitura sta nella scheda e la testata ha un nome proprio.
   ══════════════════════════════════════════════════════════════════════════ */
.card{padding:var(--s5);}
.card-t{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4);}
.card-tit{font-size:var(--t-lg);font-weight:600;letter-spacing:-.02em;}
.card-sub{font-size:var(--t-sm);color:var(--testo-3);margin-top:1px;}
.card-t > div{min-width:0;}

/* Due schede affiancate di altezza diversa non si stirano: quella corta
   resterebbe mezza vuota. Si allineano in alto e finisce lì. */
.g2{align-items:start;}

/* ══════════════════════════════════════════════════════════════════════════
   15. IL TELEFONO
   L'intestazione di un blocco ha quattro cose in fila: pastiglia, titolo,
   stato, freccia. A 390 px non ci stanno: il titolo va a capo e lo stato gli
   finisce sopra. Qui lo stato scende su una riga sua, incolonnato sotto il
   titolo, e il riassunto può prendersi due righe invece di essere tagliato.
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:700px){
  .blocco-t{flex-wrap:wrap;padding:var(--s4);min-height:0;row-gap:var(--s2);}
  .blocco-nome{white-space:normal;}
  .blocco-sotto{white-space:normal;overflow:visible;text-overflow:clip;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  /* Un elemento vuoto largo quanto la riga manda a capo, e lo stato finisce
     sulla riga nuova rientrato come il titolo, largo quanto la sua scritta.
     Dare `flex-basis:100%` alla pastiglia la stirerebbe da parte a parte. */
  .blocco-t::after{content:'';flex-basis:100%;height:0;order:1;}
  .blocco-t .stato{order:2;margin-left:calc(38px + var(--s3));}
  .blocco-corpo{padding:0 var(--s4) var(--s4);padding-top:var(--s4);}

  /* La tabella delle analisi non si comprime: si scorre di lato, e la prima
     colonna resta ferma perché senza il nome della riga i numeri non dicono
     niente. */
  .tab-avvolge{margin:0 calc(var(--s4) * -1);padding:0 var(--s4);}
  .tabd th:first-child,.tabd td:first-child{position:sticky;left:0;
    background:var(--carta);z-index:1;}
  .tabd tbody tr:hover td:first-child{background:var(--carta-2);}
}

/* ══════════════════════════════════════════════════════════════════════════
   16. IL SALVATAGGIO
   Una barra in fondo a ogni blocco: a sinistra quante modifiche aspettano,
   a destra il pulsante. Finché non c'è niente da salvare il pulsante è
   spento e dice «Salvato»: così, a colpo d'occhio, si sa sempre se il
   lavoro è al sicuro o è ancora solo sullo schermo.
   ══════════════════════════════════════════════════════════════════════════ */
.salva-barra{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6);padding-top:var(--s4);
  border-top:1px solid var(--linea);
  position:sticky;bottom:0;background:var(--carta);
  padding-bottom:var(--s2);z-index:2;}

.salva-conto{font-size:var(--t-sm);color:var(--testo-3);}
.salva-conto.appeso{color:var(--avviso-testo);font-weight:600;}

.salva-barra .btn:disabled{opacity:1;background:var(--sfondo-2);
  color:var(--testo-3);border-color:transparent;box-shadow:none;}

/* DA SALVARE E FUORI SOGLIA SONO DUE COSE DIVERSE, E DEVONO SEMBRARLO
   Erano tutt'e due in ambra: davanti a una tabella di analisi non si capiva
   se quel 8,17 fosse un valore anomalo o solo un numero appena battuto. Uno
   e` un giudizio sul latte, l'altro e` un promemoria sul lavoro.
   L'ambra resta al giudizio — e` il colore che in tutta l'app vuol dire
   «guarda questo numero». Quello che aspetta il Salva prende il blu, che e`
   il colore dell'azione, lo stesso del pulsante che lo aspetta.
   Il filo sul bordo sinistro resta: si vede con la coda dell'occhio mentre
   si scrive nella casella dopo. */
.finput.modificato,.ftextarea.modificato{background:var(--acc-velo);
  border-color:var(--acc-velo-2);color:var(--acc-testo);font-weight:600;
  box-shadow:inset 4px 0 0 var(--acc);}
.finput.modificato:focus,.ftextarea.modificato:focus{
  background:var(--carta);box-shadow:inset 4px 0 0 var(--acc),var(--anello);}

/* Un valore fuori soglia che e` anche da salvare resta ambra: il giudizio sul
   latte viene prima del promemoria, ed e` quello che non deve sfuggire. */
.finput.modificato.fuori-soglia{background:var(--avviso-velo);
  border-color:var(--avviso);color:var(--avviso-testo);
  box-shadow:inset 4px 0 0 var(--acc);}
.finput.modificato.impossibile{background:var(--critico-velo);
  border-color:var(--critico);color:var(--critico-testo);
  box-shadow:inset 4px 0 0 var(--acc);}

/* Un blocco chiuso con dentro roba non salvata lo dice dalla testata */
.blocco.ha-sospesi{border-color:var(--acc-velo-2);}
.blocco.ha-sospesi .blocco-frec{color:var(--acc);}

@media(max-width:560px){
  .salva-barra{flex-direction:column;align-items:stretch;}
  .salva-barra .btn{width:100%;justify-content:center;min-height:46px;}
  .salva-conto{text-align:center;}
}

/* ══════════════════════════════════════════════════════════════════════════
   17. LO STORICO DELLE GIORNATE
   Un giorno per riga, raggruppati per mese. La riga non è fatta di numeri
   allineati ma di tre cose che si leggono di sfuggita: che giorno era, cosa
   è già stato registrato e com'è andata. Il resto si vede entrando.
   ══════════════════════════════════════════════════════════════════════════ */
.storico-mese{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s5) var(--s2) var(--s2);}
.storico-mese:first-child{padding-top:var(--s2);}
.storico-mese-t{font-size:var(--t-md);font-weight:600;letter-spacing:-.01em;
  text-transform:capitalize;}
.storico-mese-n{font-size:var(--t-sm);color:var(--testo-3);}
.storico-mese-n b{color:var(--testo-2);font-variant-numeric:tabular-nums;}

.storico-riga{display:flex;align-items:center;gap:var(--s4);width:100%;
  padding:var(--s3) var(--s2);background:none;border:0;border-radius:var(--r-md);
  cursor:pointer;text-align:left;font:inherit;color:var(--testo);
  border-bottom:1px solid var(--linea);
  transition:background var(--v-veloce) var(--curva);}
.storico-riga:last-child{border-bottom:0;}
.storico-riga:hover{background:var(--velo);}
.storico-riga:focus-visible{outline:0;box-shadow:var(--anello);}

/* Il giorno del mese grande, il giorno della settimana sotto: si scorre la
   colonna dei numeri senza leggere le date per esteso. */
.storico-data{display:flex;flex-direction:column;align-items:center;
  flex-shrink:0;width:38px;}
.storico-data b{font-size:var(--t-lg);font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;}
.storico-data small{font-size:var(--t-mini);color:var(--testo-3);margin-top:2px;}

.storico-pezzi{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:5px;}
.pezzo{font-size:var(--t-mini);font-weight:600;padding:2px 8px;
  border-radius:var(--r-full);background:var(--acc-velo);color:var(--acc-testo);
  white-space:nowrap;}
.pezzo.manca{background:var(--sfondo-2);color:var(--testo-3);font-weight:500;}
.pezzo.vuoto{background:none;color:var(--testo-4);font-weight:400;padding-left:0;}

.storico-kg{font-size:var(--t-sm);color:var(--testo-3);flex-shrink:0;
  font-variant-numeric:tabular-nums;width:86px;text-align:right;}
.storico-resa{font-size:var(--t-base);font-weight:600;flex-shrink:0;
  font-variant-numeric:tabular-nums;width:116px;text-align:right;
  display:flex;align-items:center;justify-content:flex-end;gap:6px;}
.storico-resa i{font-style:normal;font-weight:400;font-size:var(--t-sm);
  color:var(--testo-4);}
/* Il foglio si scarica dalla riga, senza aprire la giornata. Resta in
   sordina finchè non ci si passa sopra: è una scorciatoia, non l'azione
   principale della riga, che è aprirla. */
.storico-pdf{flex-shrink:0;}
@media(max-width:760px){.storico-pdf span{display:none;}}

/* Le cinque pastiglie ci sono sempre: verdi quelle a posto, arancioni
   quelle che mancano. Si legge una colonna di colori invece di contare. */
/* Una colonna chiusa si vede che è chiusa: fondo piatto, nessun bordo, il
   numero resta leggibile ma la casella non invita a scriverci. */
/* ═══════════════════════════════════════════════════════════════════════
   8octies. SFOGLIARE — venti righe per volta, e chi ne vuole di piu` lo dice
   ═══════════════════════════════════════════════════════════════════════
   Piccola e in alto: è un comando, non un dato. Chi non la usa non la deve
   nemmeno vedere — e infatti sotto le venti righe non compare affatto. */
.sfoglia{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  margin-bottom:var(--s3);font-size:var(--t-mini);color:var(--testo-3);}
.sfoglia-conto{font-variant-numeric:tabular-nums;}
.sfoglia-quante{display:inline-flex;background:var(--sfondo-2);
  border-radius:var(--r-full);padding:3px;gap:2px;}
.sfoglia-quante button{border:0;background:none;font:inherit;cursor:pointer;
  font-size:var(--t-mini);font-weight:600;color:var(--testo-3);
  padding:3px 10px;border-radius:var(--r-full);
  font-variant-numeric:tabular-nums;
  transition:all var(--v-veloce) var(--curva);}
.sfoglia-quante button:hover{color:var(--testo);}
.sfoglia-quante button.att{background:var(--carta);color:var(--acc-testo);
  box-shadow:var(--om-1);}
.sfoglia-frecce{display:flex;align-items:center;gap:var(--s2);margin-left:auto;}
.sfoglia-frecce .btn{padding:4px 8px;}
.sfoglia-frecce .btn svg{width:13px;height:13px;}
.sfoglia-pag{font-variant-numeric:tabular-nums;font-weight:600;
  color:var(--testo-2);}
@media(max-width:560px){.sfoglia-frecce{margin-left:0;}}

.sc-cella.chiusa{background:none;border-color:transparent;cursor:default;}
.sc-cella.chiusa:hover{background:none;}
.sc-mod{padding:3px 8px;font-size:11px;margin-top:6px;gap:4px;}
.sc-mod svg{width:12px;height:12px;}
.tab-scheda thead th{vertical-align:top;}

.pezzo.fatto{background:var(--ok-velo);color:var(--ok-testo);}
.pezzo.manca{background:var(--avviso-velo);color:var(--avviso-testo);}

.storico-frec{width:16px;height:16px;flex-shrink:0;color:var(--testo-4);}
.storico-riga:hover .storico-frec{color:var(--acc);}

@media(max-width:760px){
  .storico-riga{flex-wrap:wrap;row-gap:var(--s2);padding:var(--s3) var(--s1);}
  .storico-pezzi{order:3;flex-basis:100%;padding-left:calc(38px + var(--s4));}
  .storico-kg{display:none;}
  .storico-resa{width:auto;flex:1;}
}

/* ══════════════════════════════════════════════════════════════════════════
   18. LA TABELLA DEL LATTE IN INGRESSO
   Undici colonne: i chili e le analisi dello stesso arrivo, una riga per
   allevamento. Scorre di lato, con il nome fermo a sinistra — senza il nome
   i numeri non dicono niente. Le caselle che non si possono scrivere si
   vedono lo stesso: l'ufficio pesa, il laboratorio analizza, e ognuno guarda
   il lavoro dell'altro.
   ══════════════════════════════════════════════════════════════════════════ */
.tab-ingresso{min-width:700px;}
.tab-ingresso td{padding:5px var(--s2);}
.tab-ingresso .finput{padding:7px var(--s2);min-height:38px;text-align:right;
  font-size:var(--t-sm);}
.tab-ingresso th:first-child,.tab-ingresso td:first-child{
  position:sticky;left:0;background:var(--carta);z-index:1;min-width:150px;}
.tab-ingresso tbody tr:nth-child(even) td:first-child{background:var(--carta-2);}
.tab-ingresso tbody tr:nth-child(even) td{background:var(--carta-2);}

/* Il gruppo di colonne delle analisi si stacca da quello dei chili */
.tab-ingresso th.gruppo{text-align:center;border-left:2px solid var(--linea-forte);
  color:var(--acc-testo);}
.tab-ingresso .sotto-testa th{padding-top:0;border-bottom:1px solid var(--linea-forte);}
/* Le analisi cominciano alla terza colonna: prima ci sono solo il nome e i
   chili raccolti. */
.tab-ingresso tbody td:nth-child(3),
.tab-ingresso .sotto-testa th:nth-child(3){border-left:2px solid var(--linea-forte);}

/* La casella che si può leggere ma non scrivere */
.finput.bloccata{background:transparent;border-color:transparent;
  color:var(--testo-2);cursor:default;}
.finput.bloccata:hover{border-color:transparent;}
.finput.bloccata:focus{background:transparent;border-color:transparent;box-shadow:none;}

/* ══════════════════════════════════════════════════════════════════════════
   19. LE INTESTAZIONI CHE ORDINANO
   Un'intestazione su cui si può premere deve sembrare un'intestazione, non
   una casella da riempire: stesso maiuscoletto delle altre, nessun bordo, e
   la freccia solo su quella che sta ordinando.
   ══════════════════════════════════════════════════════════════════════════ */
.tabd th .ord{background:none;border:0;padding:0;cursor:pointer;
  font:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;
  text-transform:inherit;color:inherit;
  transition:color var(--v-veloce) var(--curva);}
.tabd th .ord:hover{color:var(--testo);}
.tabd th .ord.att{color:var(--acc-testo);}
.tabd th .ord.att::after{content:' ↓';font-size:.9em;}

/* ══════════════════════════════════════════════════════════════════════════
   20. LE SCHEDE DELLE IMPOSTAZIONI
   Otto riquadri in fila erano una pagina da scorrere per intero ogni volta
   che serviva toccare una soglia. Divisi per argomento, ognuno è a un tocco.
   Quando sono tante, le schede vanno a capo e si vedono tutte: una barra che
   scorre di lato nasconde le ultime, e chi non sa che ci sono non le cerca.
   ══════════════════════════════════════════════════════════════════════════ */
.imp-schede{display:flex;flex-wrap:wrap;gap:6px;padding:4px;margin-bottom:var(--s2);
  background:var(--sfondo-2);border-radius:var(--r-lg);}

.imp-scheda{flex-shrink:0;border:0;background:none;cursor:pointer;
  font-family:var(--font);font-size:var(--t-sm);font-weight:600;
  letter-spacing:-.01em;color:var(--testo-3);
  padding:9px 18px;border-radius:var(--r-full);
  transition:all var(--v-veloce) var(--curva);}
.imp-scheda:hover{color:var(--testo);}
.imp-scheda.attiva{background:var(--carta);color:var(--acc-testo);
  box-shadow:var(--om-2);}

.imp-scheda-nota{font-size:var(--t-mini);color:var(--testo-3);
  margin:0 0 var(--s5) var(--s4);}

/* Le stesse linguette, ma dentro una scheda: piu` piccole, perche' non sono
   la navigazione della pagina ma una scelta dentro un solo pannello. */
.imp-schede.dentro{margin-bottom:var(--s2);}
.imp-schede.dentro .imp-scheda{padding:7px 14px;font-size:var(--t-mini);}

@media(max-width:560px){
  .imp-scheda{padding:9px 14px;}
}

/* ══════════════════════════════════════════════════════════════════════════
   21. LE PESATE
   Ogni peso battuto diventa una pastiglia: si vedono tutte insieme, si
   contano a occhio, e quelle fuori tolleranza si distinguono senza leggere
   i numeri. Si tocca una pastiglia e va via — capita di battere due volte
   lo stesso pezzo.
   ══════════════════════════════════════════════════════════════════════════ */
.pesate{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s4);}
.pesata{font-size:var(--t-sm);font-weight:600;font-variant-numeric:tabular-nums;
  padding:6px 12px;border-radius:var(--r-full);cursor:pointer;
  border:1px solid var(--linea-forte);background:var(--carta);color:var(--testo);
  font-family:var(--font);
  transition:all var(--v-veloce) var(--curva);}
.pesata:hover{border-color:var(--critico);color:var(--critico-testo);
  background:var(--critico-velo);}
.pesata:hover::after{content:' ×';}
.pesata.fuori{background:var(--avviso-velo);border-color:var(--avviso);
  color:var(--avviso-testo);}

/* ══════════════════════════════════════════════════════════════════════════
   22. LE CISTERNE
   Nella stessa casella ci sono due cose: quello che lo strumento ha misurato
   sulla cisterna, e la media di quello che gli allevamenti caricati sopra
   avevano promesso. La misura sta in evidenza perché è il dato; la media
   sotto, in piccolo, perché è il metro di paragone. Quando le due si
   allontanano la riga piccola si accende: è l'unico momento in cui val la
   pena guardarla.
   ══════════════════════════════════════════════════════════════════════════ */
.tab-cisterne{min-width:760px;}
.tab-cisterne td{padding:5px var(--s2);vertical-align:top;}
.tab-cisterne .finput{padding:7px var(--s2);min-height:38px;text-align:right;
  font-size:var(--t-sm);}
.tab-cisterne th:first-child,.tab-cisterne td:first-child{
  position:sticky;left:0;background:var(--carta);z-index:1;min-width:76px;}
.tab-cisterne tbody tr:nth-child(even) td{background:var(--carta-2);}
.tab-cisterne tbody tr:nth-child(even) td:first-child{background:var(--carta-2);}
/* La colonna degli allevamenti è testo, non numeri: si legge da sinistra. */
.tab-cisterne .cist-chi{min-width:210px;}
.tab-cisterne .cist-chi .finput{text-align:left;}

.cist-media{font-size:var(--t-mini);color:var(--testo-3);text-align:right;
  padding:3px var(--s2) 0;font-variant-numeric:tabular-nums;white-space:nowrap;}
.cist-media.distante{color:var(--avviso-testo);font-weight:600;}

/* Il segno «dich.» accanto a una resa che non è stata calcolata qui. Piccolo
   e grigio: non è un allarme, è una provenienza. */
.ded{font-size:var(--t-mini);font-weight:600;color:var(--testo-3);
  border:1px solid var(--linea-forte);border-radius:var(--r-full);
  padding:1px 6px;margin-left:4px;letter-spacing:.02em;}

/* Il segno per togliere una cisterna: sta nella colonna del numero, resta
   pallido finché non gli si passa sopra. Un gesto che cancella del lavoro
   non deve gridare, ma nemmeno nascondersi. */
.tab-cisterne td:first-child{white-space:nowrap;}
.cist-via{background:none;border:0;padding:2px;margin-left:6px;cursor:pointer;
  color:var(--testo-3);border-radius:var(--r-sm);line-height:0;
  opacity:.45;transition:all var(--v-veloce) var(--curva);}
.cist-via svg{width:13px;height:13px;}
.cist-via:hover{opacity:1;color:var(--critico-testo);background:var(--critico-velo);}
.cist-via:focus-visible{opacity:1;outline:2px solid var(--acc);outline-offset:1px;}

/* ══════════════════════════════════════════════════════════════════════════
   23. LA RIGA CHE SPIEGA
   In cima a ogni pagina, una frase che dice a che serve quella pagina. Non
   è decorazione: chi apre l'app per la prima volta non sa che il latte di
   oggi si lavora domani, e non deve impararlo sbagliando.
   ══════════════════════════════════════════════════════════════════════════ */
.spiega{display:flex;gap:var(--s4);align-items:flex-start;
  background:var(--carta-2);border:1px solid var(--linea);
  border-radius:var(--r-lg);padding:var(--s4) var(--s5);margin-bottom:var(--s5);
  font-size:var(--t-sm);color:var(--testo-2);line-height:1.6;}
.spiega .ico-badge{flex:0 0 auto;}
.spiega b{color:var(--testo);}

/* ══════════════════════════════════════════════════════════════════════════
   24. LA BACHECA DEGLI ARGOMENTI
   Una scheda per ogni domanda che si può fare ai dati. Il nome tecnico in
   alto per chi lo usa tutti i giorni, la domanda in italiano sotto per
   chiunque altro, il numero grande in mezzo e la forma dell'andamento in
   fondo. Si legge in due secondi senza entrare.
   ══════════════════════════════════════════════════════════════════════════ */
.arg-griglia{display:grid;gap:var(--s4);
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}

.arg{display:flex;flex-direction:column;gap:var(--s3);text-align:left;
  background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-lg);
  padding:var(--s5);cursor:pointer;font-family:var(--font);color:var(--testo);
  transition:all var(--v-veloce) var(--curva);}
.arg:hover{border-color:var(--acc);box-shadow:var(--om-2);transform:translateY(-2px);}
.arg:focus-visible{outline:2px solid var(--acc);outline-offset:2px;}

.arg-t{display:flex;gap:var(--s3);align-items:flex-start;}
.arg-tit{min-width:0;}
.arg-nome{font-size:var(--t-md);font-weight:650;letter-spacing:-.01em;}
.arg-dom{font-size:var(--t-mini);color:var(--testo-3);line-height:1.45;margin-top:2px;}

.arg-v{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;}
.arg-num{font-size:30px;font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1;}
.arg-num.vuoto{color:var(--testo-3);font-weight:500;}
.arg-num .u{font-size:14px;font-weight:600;color:var(--testo-3);margin-left:2px;}
.arg-n{font-size:var(--t-mini);color:var(--testo-3);}

/* La miniatura: nessun asse, nessun numero. Solo la forma. */
.mini{width:100%;height:42px;display:block;overflow:visible;}
.mini polyline{fill:none;stroke:var(--acc);stroke-width:1.8;
  stroke-linejoin:round;stroke-linecap:round;opacity:.75;}
.mini.vuota{height:42px;border-bottom:1px dashed var(--linea);}

/* Una scheda che rimanda a una pagina sua */
.arg.rimando{background:var(--carta-2);border-style:dashed;min-height:150px;}
.arg.rimando .arg-n{color:var(--acc-testo);font-weight:600;}

/* ══════════════════════════════════════════════════════════════════════════
   25. LA CARTA DI CONTROLLO
   Le due righe tratteggiate sono i limiti: dove il numero può arrivare
   ballando. Sono grigie di proposito — non sono un giudizio, sono un metro.
   Il punto che le supera invece si accende: quello è un fatto.
   ══════════════════════════════════════════════════════════════════════════ */
.graf.carta .limite{stroke:var(--testo-3);stroke-width:1.2;
  stroke-dasharray:6 4;opacity:.55;}
.graf.carta .punto.fuori{fill:var(--critico);stroke:var(--carta);stroke-width:1.5;}
.graf-legenda i.limite{border-top:2px dashed var(--testo-3);background:none;
  height:0;opacity:.7;}

.lettura{font-size:var(--t-sm);color:var(--testo-2);line-height:1.7;
  margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--linea);}
.lettura b{color:var(--testo);}
.lettura b.bene{color:var(--ok-testo);}
.lettura b.male{color:var(--avviso-testo);}

.spiega-misura{font-size:var(--t-sm);color:var(--testo-2);line-height:1.65;
  margin-bottom:var(--s5);}

/* ══════════════════════════════════════════════════════════════════════════
   26. QUANTA RACCOLTA VA IN PRODUZIONE
   Di una raccolta non finisce per forza tutto nella stessa produzione: può
   avanzarne per il giorno dopo. La scelta è esplicita — «Tutta», oppure i
   chili — perché una casella vuota lasciata lì non si capisce se voglia
   dire «tutta» o «non l'ho ancora scritto».
   ══════════════════════════════════════════════════════════════════════════ */
.presa{display:flex;gap:6px;align-items:center;}
.presa .finput{min-width:118px;text-align:right;padding:7px var(--s2);
  min-height:38px;font-size:var(--t-sm);}
.presa .btn{flex:0 0 auto;white-space:nowrap;}
.presa .btn.scelto{background:var(--acc);border-color:var(--acc);color:#fff;}
.presa .btn.scelto:hover{background:var(--acc);border-color:var(--acc);}
.presa-n{font-size:var(--t-mini);color:var(--testo-3);margin-top:4px;}
.presa-n.troppo{color:var(--critico-testo);font-weight:600;}

/* ══════════════════════════════════════════════════════════════════════════
   27. UNA CASELLA CON IL SUO PULSANTE
   La tendina degli operatori e il «Nuovo» che le sta accanto: chi sta
   scrivendo le analisi alle sei del mattino non va a cercare un'altra
   pagina per aggiungere il nome di un collega.
   ══════════════════════════════════════════════════════════════════════════ */
.con-piu{display:flex;gap:6px;align-items:stretch;}
.con-piu .fselect{flex:1;min-width:0;}
.con-piu .btn{flex:0 0 auto;white-space:nowrap;}

/* ══════════════════════════════════════════════════════════════════════════
   28. L'INTERRUTTORE DI UNA LAVORAZIONE
   «Non l'abbiamo fatta» e «non l'abbiamo ancora scritta» sono due cose
   lontanissime, e un blocco vuoto le confonde. Qui si sceglie, e la scelta
   si vede da lontano.
   ══════════════════════════════════════════════════════════════════════════ */
.interruttore{background:var(--carta-2);border:1px solid var(--linea);
  border-radius:var(--r-lg);padding:var(--s4) var(--s5);margin-bottom:var(--s5);}
.interruttore-et{font-size:var(--t-micro);font-weight:700;
  letter-spacing:var(--lettera-larga);text-transform:uppercase;
  color:var(--testo-3);margin-bottom:var(--s3);}
.interruttore-scelte{display:flex;gap:6px;flex-wrap:wrap;}
.interruttore-scelte .btn.scelto{background:var(--acc);border-color:var(--acc);color:#fff;}
.interruttore-scelte .btn.scelto:hover{background:var(--acc);border-color:var(--acc);}
.interruttore-n{font-size:var(--t-mini);color:var(--testo-3);
  margin-top:var(--s3);line-height:1.5;}


/* ═══════════════════════════════════════════════════════════════════════════
   29. LA TORTA DEL LATTE IN PRODUZIONE
   Quando in una produzione finisce il latte di due o tre giornate diverse, la
   tabella dice i chili ma non fa vedere il peso di ciascuna: 6.500 e 2.500
   sono due numeri, non una proporzione. La ciambella risponde a colpo
   d'occhio, e nel buco tiene il totale — così la proporzione e la quantità
   si leggono insieme.
   ═══════════════════════════════════════════════════════════════════════════ */
.torta{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;
  margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--linea);}
.torta-d{width:168px;height:168px;flex:0 0 auto;}

/* Il colore della fetta e quello del quadratino in legenda sono lo stesso
   token, portato dalla classe: si cambia in un posto solo. */
.f1{--c:var(--fetta-1);} .f2{--c:var(--fetta-2);} .f3{--c:var(--fetta-3);}
.f4{--c:var(--fetta-4);} .f5{--c:var(--fetta-5);} .f6{--c:var(--fetta-6);}
.torta-d .fetta{fill:var(--c);stroke:var(--carta);stroke-width:1.5;}
.torta-buco-v{fill:var(--testo);font-size:21px;font-weight:700;text-anchor:middle;
  letter-spacing:-.5px;}
.torta-buco-e{fill:var(--testo-3);font-size:9.5px;text-anchor:middle;}

.torta-leg{flex:1 1 210px;min-width:0;display:flex;flex-direction:column;gap:6px;}
.torta-r{display:flex;align-items:center;gap:var(--s2);font-size:var(--t-sm);
  color:var(--testo-2);}
.torta-i{width:11px;height:11px;border-radius:3px;background:var(--c);
  flex:0 0 auto;}
.torta-q{color:var(--testo);font-weight:600;}
.torta-k{color:var(--testo-3);font-size:var(--t-mini);}
.torta-p{margin-left:auto;font-weight:700;color:var(--testo);
  font-variant-numeric:tabular-nums;white-space:nowrap;}

/* ═══════════════════════════════════════════════════════════════════════════
   30. LE DUE BARRE DELL'ABBATTIMENTO
   Prima della pulitrice e dopo. «Da 205.000 a 88.000» sono due numeri da
   dividere in testa; due barre lunghe in proporzione lo dicono prima di
   essere lette.
   ═══════════════════════════════════════════════════════════════════════════ */
.isto{margin-top:var(--s3);display:flex;flex-direction:column;gap:5px;}
.isto-r{display:flex;align-items:center;gap:var(--s2);font-size:var(--t-mini);}
.isto-et{color:var(--testo-3);width:34px;flex:0 0 auto;}
.isto-b{flex:1;min-width:0;height:9px;background:var(--sfondo-2);
  border-radius:var(--r-full);overflow:hidden;}
.isto-b i{display:block;height:100%;border-radius:var(--r-full);
  transition:width var(--v-lento) var(--curva);}
.isto-b i.prima{background:var(--testo-4);}
.isto-b i.dopo{background:var(--acc);}
.isto-b i.male{background:var(--critico);}
.isto-v{color:var(--testo-2);font-variant-numeric:tabular-nums;
  width:64px;text-align:right;flex:0 0 auto;}

/* ═══════════════════════════════════════════════════════════════════════════
   31. IL TOTALE CHE SI PUÒ SCRIVERE, E LE ANALISI DI UNA PEZZATURA
   Il totale del latte raccolto è quasi sempre la somma delle righe, ma non
   sempre: la casella sta dentro la striscia del totale e ha il peso di un
   totale, non di un campo qualunque.
   Di una pezzatura si fanno più analisi: le righe dopo la prima portano il
   numero al posto del nome, e sotto sta la media.
   ═══════════════════════════════════════════════════════════════════════════ */
.conf-tot-scrivi{display:flex;align-items:center;gap:6px;}
/* Un numero che ha fatto l'app: e` un valore vero, non un segnaposto, ma si
   vede che non l'ha scritto nessuno. Appena lo si tocca torna normale. */
.finput.calcolato{color:var(--testo-2);background:var(--sfondo-2);
  border-color:transparent;}
.finput.calcolato:focus{color:var(--testo);background:var(--carta);
  border-color:var(--acc);}

.conf-tot-scrivi .finput{width:132px;text-align:right;
  font-size:var(--t-lg);font-weight:600;font-variant-numeric:tabular-nums;
  padding:6px var(--s3);min-height:auto;}
.conf-tot-scrivi .u{font-size:var(--t-base);color:var(--testo-3);font-weight:600;}

/* Un simbolo di unità non si scrive in maiuscolo: il grammo è «g», e PESO G
   non vuol dire niente. Le intestazioni restano maiuscole per stile. */
.tabd th .u-min{text-transform:none;letter-spacing:0;}

.pezz-n{color:var(--testo-3);font-weight:400;}
/* Il nominale e la tolleranza di legge, sotto il nome del formato: chi
   scrive il peso del pezzo deve sapere contro cosa lo sta scrivendo. */
.pezz-690{display:block;font-weight:400;color:var(--testo-3);
  font-size:var(--t-micro);white-space:nowrap;}
tr.pezz-media td{background:var(--acc-velo);font-weight:700;color:var(--acc-testo);
  font-variant-numeric:tabular-nums;}
tr.pezz-media td.tet{font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;font-size:var(--t-mini);}

/* ═══════════════════════════════════════════════════════════════════════════
   32. LA DOMANDA DELL'APP
   Al posto della finestra del browser, che porta scritto il nome del sito e
   ha i pulsanti del sistema operativo. Qui la scelta pericolosa è rossa e
   sta a destra, dove va il pollice.
   ═══════════════════════════════════════════════════════════════════════════ */
.chiedi-t{font-size:var(--t-base);color:var(--testo-2);line-height:1.6;
  margin:0 0 var(--s5);}
.chiedi-scelte{display:flex;gap:var(--s2);justify-content:flex-end;
  flex-wrap:wrap;}
.chiedi-scelte .btn{min-width:120px;justify-content:center;}
.btn.btn-critico{background:var(--critico);border-color:var(--critico);
  color:#fff;}
.btn.btn-critico:hover{background:var(--critico-testo);
  border-color:var(--critico-testo);}

@media(max-width:520px){
  .chiedi-scelte{flex-direction:column-reverse;}
  .chiedi-scelte .btn{width:100%;}
}

/* La riga che spiega come sono fatti i quattro numeri qui sopra. */
.spiega-numeri{font-size:var(--t-mini);color:var(--testo-3);line-height:1.65;
  margin:0 0 var(--s5);padding-left:var(--s3);
  border-left:2px solid var(--linea);}
.spiega-numeri b{color:var(--testo-2);}

/* ── Il telefono, sui pezzi nuovi ───────────────────────────────── */
@media(max-width:560px){
  /* La striscia del totale ha un'etichetta che puo` diventare lunga — «le
     righe sommano 19.565 kg» — e accanto una casella da scriverci dentro:
     su uno schermo stretto vanno una sopra l'altra, non spalla a spalla. */
  .conf-tot{flex-wrap:wrap;gap:var(--s2);}
  .conf-tot-scrivi{width:100%;justify-content:flex-end;}
  .conf-tot-scrivi .finput{flex:1;width:auto;max-width:200px;}

  /* La torta: il disegno sopra, la legenda sotto, tutti e due larghi quanto
     la scheda. */
  .torta{gap:var(--s4);}
  .torta-d{width:100%;max-width:190px;height:auto;aspect-ratio:1;margin:0 auto;}
  .torta-leg{flex:1 1 100%;}

  /* Le due barre dell'abbattimento: l'etichetta si stringe, il numero resta
     leggibile. */
  .isto-v{width:56px;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   33. I SEGNAPOSTI DELLA LETTERA
   Si scrivono dentro il testo e l'app li riempie. Elencarli accanto alla
   casella è l'unico modo perché qualcuno li usi: nessuno indovina che
   «{quando}» diventa una data.
   ═══════════════════════════════════════════════════════════════════════════ */
.segnaposti{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
  padding:var(--s3) var(--s4);background:var(--sfondo-2);
  border-radius:var(--r-md);}
.segnaposto{display:flex;align-items:baseline;gap:6px;font-size:var(--t-mini);
  color:var(--testo-3);}
.segnaposto code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--t-mini);color:var(--acc-testo);background:var(--acc-velo);
  padding:1px 6px;border-radius:var(--r-sm);white-space:nowrap;}

/* ═══════════════════════════════════════════════════════════════════════════
   34. CHIEDI AI DATI
   La domanda a destra come in una chat, la risposta a sinistra sul fondo
   della scheda. Lo stesso corpo serve due posti: la pagina intera e la
   finestrella in basso a destra, che sta aperta mentre si guarda altro.
   ═══════════════════════════════════════════════════════════════════════════ */
.parlato{display:flex;flex-direction:column;gap:var(--s4);
  margin-bottom:var(--s5);}

.chiesto{align-self:flex-end;max-width:min(560px,82%);
  background:var(--acc);color:var(--su-acc);font-size:var(--t-sm);
  font-weight:600;line-height:1.5;padding:10px var(--s4);
  border-radius:var(--r-xl) var(--r-xl) var(--r-sm) var(--r-xl);}

.risposto{align-self:flex-start;max-width:min(680px,92%);
  background:var(--carta);border:1px solid var(--linea);
  border-radius:var(--r-xl) var(--r-xl) var(--r-xl) var(--r-sm);
  padding:var(--s4) var(--s5);box-shadow:var(--om-1);}
.risposto p{font-size:var(--t-sm);color:var(--testo);line-height:1.65;
  margin:0 0 var(--s2);}
.risposto p:last-of-type{margin-bottom:0;}
.risposto.attesa p{color:var(--testo-3);}

.esempi{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;
  margin-top:var(--s4);}

.chiedi-barra{display:flex;gap:var(--s3);align-items:center;
  position:sticky;bottom:var(--s4);}
.chiedi-barra .finput{flex:1;min-width:0;}
.chiedi-barra .btn{flex:0 0 auto;}

.periodo{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;}
.periodo .flabel{margin:0;}
.periodo .finput{width:auto;}
.periodo-n{font-size:var(--t-mini);color:var(--testo-3);margin-left:auto;}

.ag-periodo{margin-bottom:var(--s5);}

@media(max-width:560px){
  .chiesto,.risposto{max-width:100%;}
  .periodo-n{margin-left:0;flex-basis:100%;}
  .chiedi-barra{position:static;}
}

/* ── Il pulsante che sta sempre lì, e la finestrella che apre ────────────
   Il pulsante è fisso in basso a destra su tutte le pagine: la domanda
   arriva mentre si guarda un'altra cosa, e mandare qualcuno in un'altra
   schermata per farla vuol dire fargliela dimenticare per strada. */
.ag-bolla{position:fixed;right:var(--s5);bottom:var(--s5);z-index:70;
  display:inline-flex;align-items:center;gap:var(--s2);
  height:52px;padding:0 var(--s5);border:0;border-radius:26px;cursor:pointer;
  background:var(--acc);color:var(--su-acc);
  font-family:inherit;font-size:var(--t-sm);font-weight:600;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
  transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease;}
.ag-bolla svg{width:22px;height:22px;flex:0 0 auto;}
.ag-bolla:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.22);}
.ag-bolla:active{transform:translateY(0);}
/* `via` invece di un `display:none` scritto altrove: chi legge il markup
   vede subito che il pulsante c'è ma è nascosto, e perché. */
.ag-bolla.via{display:none;}

.ag-finestra{position:fixed;right:var(--s5);bottom:calc(52px + var(--s5) * 2);
  z-index:71;display:none;flex-direction:column;
  width:min(440px,calc(100vw - var(--s5) * 2));
  max-height:min(620px,calc(100vh - 140px));
  /* `--sfondo`, non `--fondo`: quel token non esiste, e una variabile che non
     esiste non fa niente — la finestrella restava trasparente e la pagina si
     leggeva attraverso, testo sopra testo. */
  background:var(--sfondo);border:1px solid var(--linea);
  border-radius:var(--r-xl);box-shadow:0 12px 40px rgba(0,0,0,.24);
  overflow:hidden;}
.ag-finestra.aperta{display:flex;}

.ag-testa{display:flex;align-items:center;gap:var(--s3);
  padding:var(--s4) var(--s4) var(--s4) var(--s5);
  border-bottom:1px solid var(--linea);background:var(--carta);flex:0 0 auto;}
.ag-tit{font-size:var(--t-md);font-weight:700;color:var(--testo);}
.ag-sot{font-size:var(--t-mini);color:var(--testo-3);margin-top:1px;}
.ag-testa #ag-grande{margin-left:auto;}

/* Dentro la finestrella la conversazione scorre e la barra della domanda
   resta in fondo: è l'unico pezzo che deve essere sempre raggiungibile. */
.ag-dentro{flex:1;min-height:0;overflow-y:auto;padding:var(--s4) var(--s5);
  display:flex;flex-direction:column;}
.ag-dentro .parlato{flex:1;margin-bottom:var(--s4);}
.ag-dentro .chiesto,.ag-dentro .risposto{max-width:100%;}
.ag-dentro .chiedi-barra{position:sticky;bottom:0;margin-top:auto;}
.ag-dentro .ag-periodo{margin-bottom:var(--s4);padding:var(--s3) var(--s4);}
.ag-dentro .periodo{font-size:var(--t-mini);}
.ag-dentro .periodo-n{flex-basis:100%;margin-left:0;}
.ag-dentro .esempi .btn{white-space:normal;text-align:left;}

/* Sul telefono la finestrella prende tutto: un riquadro di 440px su uno
   schermo da 360 sarebbe un riquadro fuori dallo schermo. */
@media(max-width:560px){
  .ag-bolla{right:var(--s4);bottom:var(--s4);height:48px;padding:0 var(--s4);}
  .ag-bolla span{display:none;}
  .ag-finestra{right:0;left:0;bottom:0;width:auto;border-radius:0;
    max-height:88vh;height:88vh;border-left:0;border-right:0;border-bottom:0;}
}

/* ── Il latte da correggere, in cima alla standardizzazione ──────────── */
.massa-base{background:var(--pervinca-velo);border-radius:var(--r-lg);
  padding:var(--s3) var(--s4);margin-bottom:var(--s4);}
.massa-t{font-size:var(--t-mini);color:var(--pervinca-testo);font-weight:600;
  margin-bottom:6px;}
.massa-righe{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);}
.massa-v{display:flex;flex-direction:column;gap:1px;}
.massa-et{font-size:var(--t-mini);color:var(--testo-3);}
.massa-n{font-size:var(--t-md);font-weight:700;color:var(--testo);
  font-variant-numeric:tabular-nums;}
.massa-n.vuoto{color:var(--testo-4);font-weight:400;}
.massa-n i{font-style:normal;font-size:var(--t-mini);font-weight:600;
  color:var(--testo-3);margin-left:2px;}

/* ═══════════════════════════════════════════════════════════════════════════
   35. DUE PERIODI A CONFRONTO
   Tre colonne: quello che si guarda, quello con cui lo si confronta, e la
   differenza. Sul telefono diventano tre righe per misura, che è l'unico
   modo di leggerle su uno schermo stretto.
   ═══════════════════════════════════════════════════════════════════════════ */
/* `fixed` non è un dettaglio: senza, basta un nome di misura lungo perché
   la tabella si allarghi oltre la scheda e compaia la barra di scorrimento
   orizzontale. Con le larghezze fissate il nome va a capo e la tabella
   resta dentro. */
.tab-confronto{table-layout:fixed;width:100%;}
.tab-confronto th{vertical-align:top;}
.tab-confronto .tet{white-space:normal;}
.tab-confronto .conf-col{text-align:right;width:23%;}
.tab-confronto tbody td.conf-col{font-size:var(--t-md);font-weight:600;
  font-variant-numeric:tabular-nums;}

.conf-testa{font-size:var(--t-sm);font-weight:700;color:var(--testo);
  letter-spacing:-.01em;text-transform:none;}
.conf-date{font-size:var(--t-mini);color:var(--testo-3);font-weight:400;
  margin-top:2px;text-transform:none;}
.conf-gg{font-size:var(--t-mini);color:var(--testo-4);font-weight:400;
  margin-top:2px;text-transform:none;}
/* Le due date del secondo periodo stanno in cima, non dentro l'intestazione
   di una tabella: quando gli argomenti sono otto, ripeterle otto volte
   vorrebbe dire otto modi di scegliere la stessa cosa. */
.conf-scelta-b{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;}
.conf-scelta-et{font-size:var(--t-sm);font-weight:600;color:var(--testo);}
.conf-scelta-b .finput{width:auto;}
.conf-perc{font-size:var(--t-mini);color:var(--testo-3);font-weight:400;
  margin-top:2px;}

.btn.scelto{background:var(--acc);border-color:var(--acc);color:#fff;}
.btn.scelto:hover{background:var(--acc-scuro);border-color:var(--acc-scuro);}

/* ── Sullo stretto, una scheda per misura ────────────────────────────────
   Quattro colonne su uno schermo da telefono non ci stanno, e il risultato
   era una tabella da trascinare di lato: si leggeva il nome della misura
   senza i numeri, oppure i numeri senza sapere di che cosa. Qui
   l'intestazione sparisce, ogni riga diventa una scheda col nome sopra e i
   tre numeri sotto, uno accanto all'altro, ciascuno con la sua parola. */
@media(max-width:700px){
  .conf-scelta{flex-direction:column;align-items:flex-end;}

  .tab-confronto thead{display:none;}
  .tab-confronto,.tab-confronto tbody,.tab-confronto tr,
  .tab-confronto td{display:block;width:auto;}
  .tab-confronto tr{display:grid;grid-template-columns:repeat(3,1fr);
    gap:2px var(--s3);padding:var(--s3) 0;
    border-bottom:1px solid var(--linea);}
  .tab-confronto tr:last-child{border-bottom:0;}
  .tab-confronto td{border:0;padding:0;}
  .tab-confronto td.tet{grid-column:1/-1;font-weight:600;
    font-size:var(--t-sm);margin-bottom:2px;}
  .tab-confronto tbody td.conf-col{text-align:left;}
  .tab-confronto td.conf-col::before{content:attr(data-et);display:block;
    font-size:var(--t-mini);color:var(--testo-3);font-weight:400;
    letter-spacing:0;text-transform:none;}
  .tab-confronto .conf-perc{margin-top:0;}
}

/* ── Il rapporto che si raggiunge con la panna messa davvero ─────────── */
.raggiunto{background:var(--pervinca-velo);border-radius:var(--r-lg);
  padding:var(--s3) var(--s4);margin-top:var(--s4);}
.raggiunto.bene{background:var(--ok-velo);}
.raggiunto-et{font-size:var(--t-mini);color:var(--pervinca-testo);font-weight:600;}
.raggiunto.bene .raggiunto-et{color:var(--ok-testo);}
.raggiunto-v{font-size:var(--t-xl);font-weight:700;color:var(--testo);
  line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.raggiunto-n{font-size:var(--t-mini);color:var(--testo-3);margin-top:2px;}

/* ── Le partite di una materia prima ──────────────────────────── */
.partita{margin-top:var(--s4);}
.partita + .partita{padding-top:var(--s4);border-top:1px solid var(--linea);}
.partita-t{font-size:var(--t-mini);font-weight:700;color:var(--testo-3);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:var(--s2);}

/* ═══════════════════════════════════════════════════════════════════════════
   36. LA SCHEDA DELLE PESATE
   La ricopia del foglio «CALCOLO PESATE»: un formato per colonna, le pesate
   in verticale, e in fondo media, stampo, peso confezionato e umidità. La
   prima colonna resta ferma mentre si scorre di lato, perché il numero del
   rigo è l'unico modo per non perdere il segno con la carta in mano.
   ═══════════════════════════════════════════════════════════════════════════ */
.tab-scheda{border-collapse:separate;border-spacing:0;}
.tab-scheda th,.tab-scheda td{padding:2px 3px;}
.tab-scheda thead th{position:sticky;top:0;z-index:2;background:var(--carta);
  font-size:var(--t-mini);text-align:center;white-space:nowrap;
  border-bottom:1px solid var(--linea);padding:var(--s2) var(--s2);}
.tab-scheda thead th small{display:block;font-weight:400;color:var(--testo-3);
  font-size:var(--t-micro);text-transform:none;letter-spacing:0;}
.tab-scheda .sc-n{width:34px;text-align:right;color:var(--testo-4);
  font-size:var(--t-mini);font-weight:600;font-variant-numeric:tabular-nums;}
.tab-scheda .sc-cella{width:100%;min-width:74px;text-align:right;
  padding:5px var(--s2);font-size:var(--t-sm);
  font-variant-numeric:tabular-nums;}
/* Le righe in fondo sono conti e scelte, non pesate: si staccano. */
.tab-scheda tfoot .sc-fondo th{text-align:right;font-size:var(--t-mini);
  font-weight:600;color:var(--testo-2);white-space:nowrap;
  padding-right:var(--s3);text-transform:none;letter-spacing:0;}
.tab-scheda tfoot .sc-fondo:first-child th,
.tab-scheda tfoot .sc-fondo:first-child td{border-top:2px solid var(--linea-forte);
  padding-top:var(--s3);}
.tab-scheda .sc-media{text-align:right;font-weight:700;
  font-variant-numeric:tabular-nums;padding-right:var(--s3);}

/* IL + CHE RIMETTE UNA COLONNA
   In alto a destra del foglio, dove non toglie posto alle caselle e dove lo
   si trova guardando la fine dell'ultima colonna. */
.sc-barra{display:flex;justify-content:flex-end;margin-bottom:var(--s2);}
.sc-barra .btn{padding:5px 9px;}
.sc-barra .btn svg{width:15px;height:15px;}
.sc-piu-elenco{display:flex;flex-direction:column;gap:var(--s2);}
.sc-piu-elenco .btn{justify-content:space-between;width:100%;}
.sc-piu-elenco .btn i{font-style:normal;color:var(--testo-3);
  font-variant-numeric:tabular-nums;}

/* LA TOLLERANZA DI LEGGE, SOPRA LE CASELLE CHE GIUDICA
   Sta fra l'intestazione e la prima pesata perché è lì che serve: si guarda
   il numero sulla bilancia, si alza l'occhio di una riga e si sa se quel
   pezzo passa. Non scorre col resto della testata — due righe appiccicate in
   alto coprirebbero le pesate invece di aiutarle a leggerle. */
.tab-scheda thead .sc-tol th,.tab-scheda thead .sc-tol td{position:static;
  background:var(--sfondo-2);border-bottom:1px solid var(--linea);
  padding:var(--s2);text-align:right;white-space:nowrap;}
.tab-scheda thead .sc-tol th{font-size:var(--t-mini);font-weight:600;
  color:var(--testo-2);text-transform:none;letter-spacing:0;}
.tab-scheda thead .sc-tol th small{color:var(--testo-3);}
.tab-scheda thead .sc-tol b{display:block;font-size:var(--t-sm);
  font-variant-numeric:tabular-nums;color:var(--avviso-testo);}
.tab-scheda thead .sc-tol i{display:block;font-style:normal;
  font-size:var(--t-micro);font-variant-numeric:tabular-nums;
  color:var(--critico-testo);}

/* Una pesata sotto il primo limite è difettosa e se ne concedono poche; sotto
   il secondo non è vendibile e non se ne concede nessuna: due fatti diversi,
   due colori diversi. */
.tab-scheda .sc-cella.sc-difett{border-color:var(--avviso);
  background:var(--avviso-velo);color:var(--avviso-testo);}
.tab-scheda .sc-cella.sc-nonvend{border-color:var(--critico);
  background:var(--critico-velo);color:var(--critico-testo);font-weight:700;}


/* ════════════════════════════════════════════════════════════════════════
   37. IL CAMPO CHE GOVERNA LA RESA
   Il latte effettivo e` l'unico numero scritto a mano da cui dipende la resa
   di tutta la giornata. Un campo cosi` non deve somigliare agli altri: mesi
   dopo, chi apre quella giornata deve capire in un istante che li` c'e` una
   scelta di qualcuno, non un conto dell'app.
   Giallo perche' e` il colore che in un reparto vuol dire «guarda qui», e
   perche' non e` nessuno degli altri tre — ambra da guardare, blu da salvare,
   rosso da correggere.
   ════════════════════════════════════════════════════════════════════════ */
.campo-giallo .finput{background:#FFF8DB;border-color:#E6C84A;}
.campo-giallo .finput:focus{border-color:#C9A21A;
  box-shadow:0 0 0 4px rgba(230,200,74,.24);}
.campo-giallo .flabel{color:#7A5E00;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;font-size:var(--t-mini);}
.campo-giallo .unita{color:#8A6D08;}

:root[data-tema="dark"] .campo-giallo .finput,
:root[data-tema="scuro"] .campo-giallo .finput{background:#3A3113;border-color:#8A7220;}
:root[data-tema="scuro"] .campo-giallo .flabel{color:#F0D97A;}
@media(prefers-color-scheme:dark){
  :root:not([data-tema="chiaro"]) .campo-giallo .finput{background:#3A3113;
    border-color:#8A7220;}
  :root:not([data-tema="chiaro"]) .campo-giallo .flabel{color:#F0D97A;}
}

/* ── Le altre misure di un argomento, sulla sua scheda ─────────────────
   La scheda mostrava il numero grosso della prima misura e basta, e le
   altre si vedevano solo entrandoci: chi guardava «Il grasso che si perde»
   leggeva il siero e concludeva che del siero magro e dell'acqua di
   filatura l'app non sapesse niente. Qui stanno in piccolo, sotto. */
.arg-altre{display:flex;flex-wrap:wrap;gap:2px var(--s4);margin-top:var(--s2);
  padding-top:var(--s2);border-top:1px solid var(--linea);}
.arg-altre span{font-size:var(--t-mini);color:var(--testo-2);font-weight:600;
  font-variant-numeric:tabular-nums;}
.arg-altre i{font-style:normal;font-weight:400;color:var(--testo-3);
  margin-right:5px;}


/* ══════════════════════════════════════════════════════════════════════════
   I SERBATOI
   Il disegno è un SVG fatto di classi: acciaio, vetro e latte prendono i
   colori dai token, così il serbatoio cambia con il tema come tutto il
   resto. Il livello è una traslazione del gruppo del latte, e il passaggio
   da un livello all'altro lo anima il browser.
   ══════════════════════════════════════════════════════════════════════════ */
.serb-griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--s4);}
.serb-carta{background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-xl);
  box-shadow:var(--om-2);padding:var(--s4) var(--s4) var(--s5);display:flex;flex-direction:column;
  gap:var(--s3);min-width:0;}
.serb-testa{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);}
.serb-sigla{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.1;}
.serb-desc{font-size:var(--t-sm);color:var(--testo-3);margin-top:2px;}
.serb-disegno{display:block;width:100%;border:0;border-radius:var(--r-lg);cursor:pointer;
  padding:var(--s2) 0 0;color:inherit;font:inherit;
  background:radial-gradient(ellipse at 50% 92%,var(--acc-velo),transparent 62%);}
.serb-disegno:focus-visible{outline:none;box-shadow:var(--anello);}
.serb-svg{display:block;width:100%;max-width:190px;height:auto;margin:0 auto;overflow:visible;
  transition:transform .3s;filter:drop-shadow(0 12px 14px rgba(17,19,26,.14));}
.serb-disegno:hover .serb-svg{transform:translateY(-3px);}

.serb-st-scuro{stop-color:var(--acciaio-scuro);}
.serb-st-medio{stop-color:var(--acciaio);}
.serb-st-chiaro{stop-color:var(--acciaio-chiaro);}
.serb-corpo{stroke:var(--acciaio-scuro);stroke-width:1.2;}
.serb-gamba,.serb-piede{fill:var(--acciaio-scuro);}
.serb-tubo{fill:none;stroke:var(--acciaio-scuro);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;}
.serb-valvola{fill:var(--acciaio);stroke:var(--acciaio-scuro);stroke-width:1.5;}
.serb-maniglia{stroke:var(--corallo);stroke-width:3;stroke-linecap:round;}
.serb-saldatura{stroke:var(--acciaio-scuro);stroke-width:.8;opacity:.55;}
.serb-sfiato{fill:var(--acciaio);stroke:var(--acciaio-scuro);stroke-width:1;}
.serb-targa{fill:var(--carta);stroke:var(--acciaio-scuro);stroke-width:1;}
.serb-targa-t{font:800 10px var(--font);fill:var(--testo);letter-spacing:.05em;}
.serb-vetro{fill:var(--serb-vetro);}
.serb-cornice{fill:none;stroke:var(--acciaio-scuro);stroke-width:2;transition:stroke .3s;}
.serb-luce{fill:var(--acciaio-chiaro);opacity:.5;}
.serb-tacca{stroke:var(--serb-tacca);stroke-width:1.2;}
.serb-tacca-t{font:700 7px var(--font);fill:var(--serb-tacca);}
.serb-latte-corpo{fill:var(--latte);}
.serb-latte-dietro{fill:var(--latte-2);}
.serb-nuovo-corpo{fill:var(--latte-nuovo);}
.serb-nuovo-dietro{fill:var(--latte-nuovo-2);}
.serb-g-latte,.serb-g-nuovo{transition:transform 1.5s cubic-bezier(.2,.75,.2,1);}
.sim .serb-g-latte,.sim .serb-g-nuovo{transition-duration:.45s;}
.serb-onda{animation:serb-onda 3.4s linear infinite;}
.serb-onda-dietro{animation-duration:6s;animation-direction:reverse;}
@keyframes serb-onda{from{transform:translateX(0)}to{transform:translateX(-50px)}}
.serb-bolla{fill:var(--acciaio-chiaro);opacity:0;animation:serb-bolla 4.6s ease-in infinite;}
@keyframes serb-bolla{0%{opacity:0;transform:translateY(0)}25%{opacity:.8}100%{opacity:0;transform:translateY(-40px)}}
.serb-pct-fondo{fill:var(--carta);opacity:.92;filter:drop-shadow(0 2px 3px rgba(17,19,26,.25));}
.serb-pct{font:800 19px var(--font);fill:var(--testo);letter-spacing:-.02em;}
.serb-pct-kg{font:700 8.5px var(--font);fill:var(--testo-3);}
.serb-svg.vuoto .serb-pct{font-size:12px;font-weight:700;fill:var(--testo-3);}
.serb-prima{stroke:var(--acc);stroke-width:1.4;stroke-dasharray:4 3;}
.serb-righe{stroke:var(--serb-tacca);stroke-width:2.2;}
.serb-svg.quasi .serb-cornice{stroke:var(--avviso);stroke-width:2.6;}
.serb-svg.oltre .serb-cornice{stroke:var(--critico);stroke-width:3.2;animation:serb-allarme 1.2s ease-in-out infinite;}
@keyframes serb-allarme{50%{opacity:.35}}

.serb-kg{display:flex;align-items:baseline;justify-content:center;gap:6px;}
.serb-kg b{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1;}
.serb-kg span{color:var(--testo-3);font-weight:600;}
.serb-cap{text-align:center;font-size:var(--t-sm);color:var(--testo-3);margin-top:-6px;}
.serb-comp{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:6px;}
.serb-comp-v{display:flex;flex-direction:column;gap:1px;min-width:0;
  background:var(--carta-2);border:1px solid var(--linea);border-radius:var(--r-sm);
  padding:6px 8px;}
.serb-comp-v span{color:var(--testo-3);font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.serb-comp-v b{font-weight:800;white-space:nowrap;font-size:var(--t-sm);}
.serb-comp-v small{color:var(--testo-3);font-weight:500;margin-left:2px;font-size:var(--t-mini);}
.serb-comp-v.avviso{background:var(--avviso-velo);border-color:transparent;}
.serb-comp-v.avviso b{color:var(--avviso-testo);}
.serb-comp-v.critico{background:var(--critico-velo);border-color:transparent;}
.serb-comp-v.critico b{color:var(--critico-testo);}
.serb-prov-barra{display:flex;height:10px;border-radius:var(--r-full);overflow:hidden;background:var(--sfondo-2);}
.serb-prov-barra span{display:block;height:100%;}
.serb-prov-leg{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px;font-size:var(--t-mini);color:var(--testo-2);}
.serb-prov-leg i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;}
.serb-prov .fetta-1{background:var(--fetta-1);} .serb-prov .fetta-2{background:var(--fetta-2);}
.serb-prov .fetta-3{background:var(--fetta-3);} .serb-prov .fetta-4{background:var(--fetta-4);}
.serb-prov .fetta-5{background:var(--fetta-5);} .serb-prov .fetta-6{background:var(--fetta-6);}
.serb-azioni{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:var(--s2);}

/* Il simulatore */
.sim{margin-top:var(--s5);}
.sim-scelte{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s3);align-items:end;margin-bottom:var(--s4);}
.sim-scelte .fg{margin:0;}
.sim-scambia{margin-bottom:5px;}
.sim-kg-riga{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;}
#sim-range{flex:1;min-width:180px;height:28px;accent-color:var(--acc);cursor:pointer;}
.sim-kg-casella{max-width:150px;}
.sim-kg-scala{display:flex;justify-content:space-between;font-size:var(--t-mini);color:var(--testo-3);margin-top:2px;}
.sim-scena{display:grid;grid-template-columns:1fr minmax(80px,.6fr) 1fr;align-items:center;
  gap:var(--s3);margin:var(--s5) 0;padding:var(--s5) var(--s3) var(--s4);border-radius:var(--r-xl);
  border:1px solid var(--linea);
  background:radial-gradient(ellipse at 50% 100%,var(--acc-velo),transparent 70%),var(--carta-2);}
.sim-lato{text-align:center;min-width:0;}
.sim-lato .serb-svg{max-width:210px;}
.sim-lato-t{font-weight:800;font-size:var(--t-md);margin-top:var(--s2);}
.sim-lato-t span{color:var(--testo-3);font-weight:600;margin-left:6px;}
.sim-tubo{text-align:center;min-width:0;}
.sim-tubo svg{display:block;width:100%;height:auto;overflow:visible;}
.sim-tubo-guscio{fill:none;stroke:var(--acciaio);stroke-width:14;stroke-linecap:round;}
.sim-tubo-latte{fill:none;stroke:var(--latte-nuovo-2);stroke-width:6;stroke-linecap:round;
  stroke-dasharray:10 8;opacity:.2;transition:opacity .3s;}
.sim-tubo.scorre .sim-tubo-latte{opacity:1;animation:sim-flusso .6s linear infinite;}
@keyframes sim-flusso{to{stroke-dashoffset:-18}}
.sim-tubo-punta{fill:none;stroke:var(--acciaio-scuro);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.sim-tubo-kg{font-weight:800;font-size:var(--t-md);margin-top:var(--s2);color:var(--acc-testo);white-space:nowrap;}
.sim-tab td.sim-sorg{color:var(--testo-3);}
.sim-tab td.sim-dopo{font-weight:700;}
.sim-tab td.sim-dopo.avviso{color:var(--avviso-testo);background:var(--avviso-velo);}
.sim-tab td.sim-dopo.critico{color:var(--critico-testo);background:var(--critico-velo);}
.sim-nuovo-fuori{font-size:var(--t-mini);font-weight:700;margin-left:4px;}
.sim-uguale{color:var(--testo-4);}
.sim-obiettivo{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-top:var(--s5);
  padding:var(--s4);border-radius:var(--r-lg);background:var(--pervinca-velo);}
.sim-obiettivo select.finput{width:auto;min-width:150px;}
.sim-obiettivo #sim-obiettivo{width:110px;}
.sim-ob-et{font-weight:700;color:var(--pervinca-testo);}
.sim-ob-esito{font-size:var(--t-sm);font-weight:600;}
.sim-ob-esito.no{color:var(--critico-testo);}
.sim-ob-esito.si{color:var(--ok-testo);}
.sim-registra{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s3);margin-top:var(--s5);
  padding-top:var(--s4);border-top:1px solid var(--linea);}
.sim-registra .fg{margin:0;}
@media (max-width:640px){
  .sim-scelte{grid-template-columns:1fr;}
  .sim-scambia{justify-self:center;transform:rotate(90deg);margin:0;}
  .sim-scena{grid-template-columns:1fr 64px 1fr;padding:var(--s3) var(--s2);gap:var(--s2);}
  .sim-tubo-kg{font-size:var(--t-sm);}
  .serb-griglia{grid-template-columns:1fr 1fr;gap:var(--s3);}
  .serb-carta{padding:var(--s3);}
  .serb-azioni .btn span{display:none;}
}
@media (max-width:420px){ .serb-griglia{grid-template-columns:1fr;} .serb-azioni .btn span{display:inline;} }

/* La scheda di un serbatoio */
.serb-scheda{display:flex;gap:var(--s5);flex-wrap:wrap;align-items:flex-start;}
.serb-scheda-disegno{width:200px;flex-shrink:0;margin:0 auto;}
.serb-scheda-t{font-size:var(--t-md);font-weight:700;margin:var(--s5) 0 var(--s3);}
.serb-scheda-vuoto{font-size:var(--t-sm);color:var(--testo-3);}

/* I serbatoi in piccolo, nella pagina Oggi */
.serb-mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:var(--s3);}
.serb-mini-uno{border:1px solid var(--linea);background:var(--carta-2);border-radius:var(--r-lg);
  padding:var(--s3) var(--s2);cursor:pointer;display:flex;flex-direction:column;align-items:center;
  gap:2px;font:inherit;color:inherit;transition:border-color .2s,transform .2s;}
.serb-mini-uno:hover{border-color:var(--acc-velo-2);transform:translateY(-2px);}
.serb-mini-uno .serb-svg{max-width:96px;}
.serb-mini-kg{font-weight:800;margin-top:var(--s1);}
.serb-mini-g{font-size:var(--t-mini);color:var(--testo-3);}

/* La cisterna dice dove è andata */
.tab-cisterne .cist-serb{min-width:110px;}
.tab-cisterne .cist-auto{min-width:120px;}
.tab-cisterne [data-col="kg"]{min-width:88px;}
.tab-cisterne [data-col="cbt"],.tab-cisterne [data-col="scc"]{min-width:92px;}
.tab-cisterne [data-col="ora_scarico"]{min-width:104px;}
.cist-dest{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4);}
.cist-dest-voce{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--r-full);
  background:var(--acc-velo);color:var(--acc-testo);font-size:var(--t-sm);font-weight:600;}
.cist-dest-voce b{font-weight:800;}
.cist-dest-voce.manca{background:var(--avviso-velo);color:var(--avviso-testo);}
.racc-serb{display:inline-flex;gap:4px;flex-wrap:wrap;}
.racc-serb span{padding:2px 8px;border-radius:var(--r-full);background:var(--acc-velo);color:var(--acc-testo);
  font-size:var(--t-mini);font-weight:700;}

/* La giacenza e il nuovo arrivo */
.serb-giac-linea{stroke:var(--corallo);stroke-width:1.4;stroke-dasharray:3 3;}
.serb-giac-t{font:700 6.5px var(--font);fill:var(--corallo-testo);letter-spacing:.03em;
  paint-order:stroke;stroke:var(--latte);stroke-width:2px;}
.serb-strati{border:1px solid var(--linea);border-radius:var(--r-md);overflow:hidden;}
.serb-strati table{width:100%;border-collapse:collapse;font-size:11.5px;table-layout:fixed;}
.serb-strati th:first-child,.serb-strati td.tet{width:30%;}
.serb-strati th:nth-child(2),.serb-strati td:nth-child(2){width:22%;}
.serb-strati th{font-size:10.5px;font-weight:700;color:var(--testo-3);text-transform:uppercase;
  letter-spacing:.04em;text-align:right;padding:5px 4px;background:var(--carta-2);}
.serb-strati td{text-align:right;padding:5px 4px;border-top:1px solid var(--linea);white-space:nowrap;
  font-variant-numeric:tabular-nums;}
.serb-strati td.tet{text-align:left;font-weight:700;overflow:hidden;text-overflow:ellipsis;}
.serb-strati td.tet small{display:block;font-weight:500;font-size:10.5px;color:var(--testo-3);}
.serb-strati tr.giac td.tet{color:var(--corallo-testo);}
.serb-strati tr.arr td.tet{color:var(--acc-testo);}
.serb-strati tr.mix td{background:var(--acc-velo);font-weight:800;}
.serb-strati td i{display:block;font-style:normal;font-size:10px;font-weight:700;}
.serb-strati td i.su{color:var(--ok-testo);}
.serb-strati td i.giu{color:var(--critico-testo);}

@media (prefers-reduced-motion:reduce){
  .serb-onda,.serb-bolla,.sim-tubo.scorre .sim-tubo-latte,.serb-svg.oltre .serb-cornice{animation:none;}
  .serb-g-latte,.serb-g-nuovo{transition:none;}
}