/* ============================================================================
   LAVORAZIONE BUFALA — 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;

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

  /* Il menu è quasi nero e piatto, senza sfumatura; la voce aperta è una
     pastiglia chiara: lo stesso gesto delle pastiglie nere dei siti di oggi,
     girato al contrario. */
  --nav:#12141A;
  --nav-2:#12141A;
  --nav-linea:rgba(255,255,255,.07);
  --nav-testo:#B6BBC7;
  --nav-testo-forte:#FFFFFF;
  --nav-fioco:#6E7483;
  --nav-att:#12141A;
  --nav-attivo:#FFFFFF;
  --nav-velo:rgba(255,255,255,.07);
  --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);
}

/* ══════════════════════════════════════════════════════════════════════════
   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;

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

  --nav:#0A0B0F;
  --nav-2:#0A0B0F;
  --nav-linea:rgba(255,255,255,.07);
  --nav-testo:#A8AEBC;
  --nav-testo-forte:#FFFFFF;
  --nav-fioco:#6E7483;
  --nav-att:#0A0B0F;
  --nav-attivo:#F2F4F8;
  --nav-velo:rgba(255,255,255,.07);
  --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);
}

/* 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:#0A0B0F; --nav-2:#0A0B0F; --nav-linea:rgba(255,255,255,.07);
    --nav-testo:#A8AEBC; --nav-fioco:#6E7483; --nav-attivo:#F2F4F8;
    --nav-att:#0A0B0F; --nav-velo:rgba(255,255,255,.07); --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);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   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: voce aperta come pastiglia chiara ──────────────────────────── */
.sidebar{background:var(--nav);}
.ni{border-radius:var(--r-full);font-weight:600;letter-spacing:-.01em;}
.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.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;}
.tabd .attenzione{color:var(--avviso-testo);font-weight:600;}

/* ══════════════════════════════════════════════════════════════════════════
   9. PERMESSI — la griglia che l'amministratore usa per decidere chi vede cosa
   ══════════════════════════════════════════════════════════════════════════ */
.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);}

/* ══════════════════════════════════════════════════════════════════════════
   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;}

/* La casella toccata e non ancora salvata. Il filo d'ambra sul bordo sinistro
   si vede anche con la coda dell'occhio mentre si scrive nella casella dopo. */
/* Un filo d'ambra sul bordo non bastava: su un campo dal fondo grigio
   chiaro spariva, e chi scrive deve accorgersi da lontano di che cosa non
   ha ancora salvato. Qui il campo si tinge tutto. */
.finput.modificato,.ftextarea.modificato{background:var(--avviso-velo);
  border-color:var(--avviso);color:var(--avviso-testo);font-weight:600;
  box-shadow:inset 4px 0 0 var(--avviso);}
.finput.modificato:focus,.ftextarea.modificato:focus{
  background:var(--carta);box-shadow:inset 4px 0 0 var(--avviso),var(--anello);}

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

@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);}
.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:880px;}
.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);}
.tab-ingresso tbody td:nth-child(6),
.tab-ingresso .sotto-testa th:nth-child(6){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;}