/* ============================================================================
   ConsulenteHACCP — L'ASPETTO
   ============================================================================

   L'IDEA
   ------
   Uno strumento di lavoro, non una vetrina: calmo, preciso, silenzioso finché
   non serve. Il colore parla solo quando ha qualcosa da dire — verde se è a
   posto, ambra se scade, rosso se è fuori tempo. Tutto il resto è carta,
   inchiostro e spazio.

   COME È COSTRUITO
   ----------------
   1. TOKEN     le decisioni prese una volta sola: colori, misure, ombre, tempi.
                Si cambia un numero qui e cambia tutta l'app, in modo coerente.
   2. TEMI      chiaro e scuro sono due set di token, niente di più. Lo scuro
                segue il sistema, oppure si sceglie a mano.
   3. BASI      tipografia e ritmo verticale.
   4. PEZZI     i componenti, uno per uno.
   5. FORMATI   computer, tablet, telefono.

   LE MISURE seguono una scala di 4 px: niente numeri inventati caso per caso,
   così gli allineamenti tornano sempre.

   TRE FORMATI, NON UNO
   • Computer (oltre 1100px) — menu sempre aperto sulla sinistra.
   • Tablet (700–1100px)     — menu a cassetto, contenuto a due colonne.
   • Telefono (sotto 700px)  — tutto in colonna, finestre che salgono dal basso,
                               bersagli grandi abbastanza per il pollice.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

/* ══════════════════════════════════════════════════════════════════════════
   1. TOKEN
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* ── Spazio (scala di 4) ─────────────────────────────────────────────── */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:40px; --s9:48px; --s10:64px;

  /* Oltre questa larghezza il contenuto si centra invece di allargarsi */
  --largo:1560px;

  /* ── Raggi ───────────────────────────────────────────────────────────── */
  --r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:14px; --r-full:999px;

  /* ── Tipografia ──────────────────────────────────────────────────────────
     Un carattere solo, Inter, dal menu al numero grande. Il serif dei titoli
     dava un'aria da rivista che non c'entra con uno strumento di lavoro: due
     famiglie sulla stessa schermata erano un'incoerenza. Ogni gradino qui
     sotto ha un compito preciso, e non se ne inventano altri per strada. */
  --font:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:var(--font);
  --mono:var(--font);
  --t-micro:11.5px; /* soprattitoli in maiuscoletto */
  --t-mini:13px;    /* metadati, didascalie */
  --t-sm:14px;      /* etichette e testo secondario */
  --t-base:16px;    /* testo corrente e campi */
  --t-md:17px;      /* titoletti dentro le schede */
  --t-lg:20px;      /* titoli di sezione */
  --t-xl:32px;      /* titolo di pagina */
  --t-hero:32px;    /* i numeri grandi */
  --lettera-larga:.07em;

  /* ── Tempi e curve ───────────────────────────────────────────────────── */
  --v-veloce:120ms; --v-medio:200ms; --v-lento:320ms;
  --curva:cubic-bezier(.22,.9,.32,1);      /* entra deciso, si posa piano */
  --curva-morbida:cubic-bezier(.4,0,.2,1);

  --tocco:44px;    /* quanto deve essere alto un bersaglio per il dito */
  --nav-w:256px;
}

/* ══════════════════════════════════════════════════════════════════════════
   2. TEMI — chiaro (predefinito)
   ══════════════════════════════════════════════════════════════════════════ */
:root,
:root[data-tema="chiaro"]{
  color-scheme:light;

  /* Superfici: dalla pagina alla scheda in rilievo */
  --sfondo:#F5F7F6;           /* la pagina */
  --sfondo-2:#ECEFEE;         /* zone incassate, intestazioni di tabella */
  --carta:#FFFFFF;            /* le schede */
  --carta-2:#FAFBFA;          /* dentro le schede */
  --velo:rgba(23,33,29,.04);  /* velatura per gli stati */

  /* Inchiostro */
  --testo:#17211D;
  --testo-2:#4C5854;
  --testo-3:#78827E;
  --testo-4:#A2ABA7;

  /* Linee */
  --linea:rgba(23,33,29,.09);
  --linea-forte:rgba(23,33,29,.16);

  /* Accento: il verde dello studio */
  --acc:#078B62;
  --acc-vivo:#0AA475;
  --acc-scuro:#056A4A;
  --acc-velo:#DDF5EC;
  --acc-velo-2:#BCE8D7;
  --acc-testo:#056A4A;
  --su-acc:#FFFFFF;           /* testo sopra il verde pieno */

  /* Semantici: significano sempre la stessa cosa, in tutta l'app */
  --ok:#078B62;      --ok-velo:#DDF5EC;     --ok-testo:#056A4A;
  --avviso:#C07A0C;  --avviso-velo:#FDF0DC; --avviso-testo:#8A5406;
  --critico:#D2453A; --critico-velo:#FCEAE8;--critico-testo:#9E2A21;
  --info:#2563EB;    --info-velo:#E7EFFE;   --info-testo:#1B4CC4;
  --neutro:#6B7A74;  --neutro-velo:#ECEFEE; --neutro-testo:#4C5854;

  /* Comandi */
  --btn:#FFFFFF;
  --btn-bordo:rgba(23,33,29,.14);
  --btn-hover:#F2F5F4;
  --btn-testo:#27332E;

  /* Menu laterale — gli stessi colori di HACCP-Qualità360 PRO: una colonna
     di verde bosco che sfuma verso il basso, testo verde chiarissimo, la voce
     aperta in verde pieno. */
  --nav:#166534;               /* alto della sfumatura */
  --nav-2:#14532D;             /* basso della sfumatura */
  --nav-linea:rgba(255,255,255,.1);
  --nav-testo:#F0FDF4;
  --nav-testo-forte:#FFFFFF;
  --nav-fioco:#BBF7D0;         /* sezioni e sottotitoli */
  --nav-att:#FFFFFF;           /* testo della voce aperta */
  --nav-attivo:#16A34A;        /* fondo della voce aperta */
  --nav-velo:rgba(255,255,255,.1);
  --nav-badge:#EF4444;

  /* Ombre: leggerissime. Le schede si staccano dal fondo, non galleggiano. */
  --om-1:0 1px 2px rgba(23,33,29,.04);
  --om-2:0 1px 3px rgba(23,33,29,.05), 0 4px 10px -4px rgba(23,33,29,.07);
  --om-3:0 2px 6px rgba(23,33,29,.05), 0 12px 28px -10px rgba(23,33,29,.14);
  --om-4:0 4px 12px rgba(23,33,29,.07), 0 28px 60px -18px rgba(23,33,29,.24);
  --om-acc:0 2px 10px -3px rgba(7,139,98,.4);
  --anello:0 0 0 3px rgba(7,139,98,.16);
  --vetro:rgba(10,20,16,.5);   /* il velo dietro le finestre */
}

/* ── Tema scuro ─────────────────────────────────────────────────────────────
   Non è il chiaro rovesciato: i fondi hanno una punta di verde, le superfici
   si schiariscono man mano che vengono in primo piano, e l'accento si alza di
   luminosità per restare leggibile. */
:root[data-tema="scuro"]{
  color-scheme:dark;

  --sfondo:#0C1512;
  --sfondo-2:#131F1A;
  --carta:#15211C;
  --carta-2:#1A2822;
  --velo:rgba(255,255,255,.05);

  --testo:#EAF1ED;
  --testo-2:#B4C0BA;
  --testo-3:#8A948F;
  --testo-4:#6A736E;

  --linea:rgba(255,255,255,.09);
  --linea-forte:rgba(255,255,255,.18);

  --acc:#2FCC93;
  --acc-vivo:#42DDA4;
  --acc-scuro:#1FA878;
  --acc-velo:rgba(47,204,147,.13);
  --acc-velo-2:rgba(47,204,147,.25);
  --acc-testo:#66E3B4;
  --su-acc:#04231A;

  --ok:#2FCC93;      --ok-velo:rgba(47,204,147,.13);    --ok-testo:#66E3B4;
  --avviso:#E2A63F;  --avviso-velo:rgba(226,166,63,.14);--avviso-testo:#F2C57C;
  --critico:#F26A5E; --critico-velo:rgba(242,106,94,.14);--critico-testo:#FF938A;
  --info:#6E9BFF;    --info-velo:rgba(110,155,255,.14); --info-testo:#9DBAFF;
  --neutro:#8A948F;  --neutro-velo:rgba(255,255,255,.06);--neutro-testo:#B4C0BA;

  --btn:#1E2C26;
  --btn-bordo:rgba(255,255,255,.13);
  --btn-hover:#26362F;
  --btn-testo:#DCE5E1;

  --nav:#14532D;
  --nav-2:#0E3A20;
  --nav-linea:rgba(255,255,255,.09);
  --nav-testo:#EAF7EF;
  --nav-testo-forte:#FFFFFF;
  --nav-fioco:#A7E9C4;
  --nav-att:#FFFFFF;
  --nav-attivo:#15803D;
  --nav-velo:rgba(255,255,255,.09);
  --nav-badge:#E5484D;

  --om-1:0 1px 2px rgba(0,0,0,.4);
  --om-2:0 1px 3px rgba(0,0,0,.4), 0 4px 10px -4px rgba(0,0,0,.5);
  --om-3:0 2px 6px rgba(0,0,0,.45), 0 12px 28px -10px rgba(0,0,0,.6);
  --om-4:0 4px 12px rgba(0,0,0,.5), 0 28px 60px -18px rgba(0,0,0,.75);
  --om-acc:0 2px 12px -2px rgba(43,196,140,.4);
  --anello:0 0 0 3px rgba(59,214,155,.25);
  --vetro:rgba(0,0,0,.66);
}
/* Senza una scelta esplicita si segue il sistema */
@media (prefers-color-scheme:dark){
  :root:not([data-tema="chiaro"]){
    color-scheme:dark;
    --sfondo:#0C1512; --sfondo-2:#131F1A; --carta:#15211C; --carta-2:#1A2822;
    --velo:rgba(255,255,255,.05);
    --testo:#EAF1ED; --testo-2:#B4C0BA; --testo-3:#8A948F; --testo-4:#6A736E;
    --linea:rgba(255,255,255,.09); --linea-forte:rgba(255,255,255,.18);
    --acc:#2FCC93; --acc-vivo:#42DDA4; --acc-scuro:#1FA878;
    --acc-velo:rgba(47,204,147,.13); --acc-velo-2:rgba(47,204,147,.25);
    --acc-testo:#66E3B4; --su-acc:#04231A;
    --ok:#2FCC93; --ok-velo:rgba(47,204,147,.13); --ok-testo:#66E3B4;
    --avviso:#E2A63F; --avviso-velo:rgba(226,166,63,.14); --avviso-testo:#F2C57C;
    --critico:#F26A5E; --critico-velo:rgba(242,106,94,.14); --critico-testo:#FF938A;
    --info:#6E9BFF; --info-velo:rgba(110,155,255,.14); --info-testo:#9DBAFF;
    --neutro:#8A948F; --neutro-velo:rgba(255,255,255,.06); --neutro-testo:#B4C0BA;
    --btn:#1E2C26; --btn-bordo:rgba(255,255,255,.13); --btn-hover:#26362F; --btn-testo:#DCE5E1;
    --nav:#14532D; --nav-2:#0E3A20; --nav-linea:rgba(255,255,255,.09);
    --nav-testo:#EAF7EF; --nav-testo-forte:#FFFFFF; --nav-fioco:#A7E9C4; --nav-att:#FFFFFF;
    --nav-attivo:#15803D; --nav-velo:rgba(255,255,255,.09); --nav-badge:#E5484D;
    --om-1:0 1px 2px rgba(0,0,0,.4);
    --om-2:0 1px 3px rgba(0,0,0,.4), 0 4px 10px -4px rgba(0,0,0,.5);
    --om-3:0 2px 6px rgba(0,0,0,.45), 0 12px 28px -10px rgba(0,0,0,.6);
    --om-4:0 4px 12px rgba(0,0,0,.5), 0 28px 60px -18px rgba(0,0,0,.75);
    --om-acc:0 2px 12px -2px rgba(43,196,140,.4);
    --anello:0 0 0 3px rgba(59,214,155,.25);
    --vetro:rgba(0,0,0,.66);
  }
}

/* ── Ponte con i nomi storici ───────────────────────────────────────────────
   Il codice scritto negli anni usa --teal, --bg2, --brd e compagnia in
   centinaia di punti. Invece di rincorrerli uno per uno, qui vengono agganciati
   ai token nuovi: cambiano tema anche loro, senza toccare il resto. */
:root{
  --teal:var(--acc); --tl:var(--acc-velo); --td:var(--acc-testo); --tm:var(--acc-velo-2);
  --blue:var(--info); --bl:var(--info-velo); --bd:var(--info-testo);
  --amber:var(--avviso); --al:var(--avviso-velo); --ad:var(--avviso-testo);
  --coral:var(--critico); --cl:var(--critico-velo); --cd:var(--critico-testo);
  --violet:#7C3AED; --vl:var(--info-velo); --vd:var(--info-testo);
  --gray:var(--neutro); --gl:var(--neutro-velo); --gd:var(--neutro-testo);
  --green-l:var(--ok-velo); --green-d:var(--ok-testo);
  --red-l:var(--critico-velo); --red-d:var(--critico-testo);
  --bg:var(--carta); --bg2:var(--sfondo); --bg3:var(--sfondo-2);
  --text:var(--testo); --t2:var(--testo-2); --t3:var(--testo-3);
  --brd:var(--linea); --brd2:var(--linea-forte);
  --sh-xs:var(--om-1); --sh-sm:var(--om-1); --sh-md:var(--om-2); --sh-lg:var(--om-4);
}

/* ══════════════════════════════════════════════════════════════════════════
   3. BASI
   ══════════════════════════════════════════════════════════════════════════ */
html{-webkit-text-size-adjust:100%;overflow-x:hidden;max-width:100%;}
html,body{height:100%;}
body{
  font-family:var(--font);
  font-size:var(--t-base);
  line-height:1.5;
  color:var(--testo);
  background:var(--sfondo);
  overflow-x:hidden;max-width:100%;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:'cv02','cv03','cv04','cv11','ss01';
  transition:background var(--v-medio) var(--curva-morbida),color var(--v-medio) var(--curva-morbida);
}
body.modale-aperto{overflow:hidden;}
::selection{background:var(--acc-velo-2);color:var(--testo);}

/* I numeri si incolonnano come in un registro */
.num,.days-badge,.sval,.oggi-ora,.bar-val,.tappa-ora,.memo-date,.sett-date,.an-trend,
.crono-attivo{font-variant-numeric:tabular-nums;font-feature-settings:'tnum';}

/* Due tipi di etichetta, e non uno di più.
   Il SOPRATTITOLO in maiuscoletto divide le zone: sezioni del menu, teste di
   tabella, titoletti dentro i riquadri. */
.nav-sec,.oggi-box-t,.ore-cl-tit,.cmd-gruppo,.ud-role,.sidebar-sub,
.tbl th,.giorno-nome,.calh,.doc-tipo,.kpi-et{
  font-size:var(--t-micro);font-weight:700;letter-spacing:var(--lettera-larga);
  text-transform:uppercase;color:var(--testo-3);}
/* L'ETICHETTA DI UN CAMPO invece si legge come una domanda: tonda, scura,
   della stessa taglia del testo intorno. In maiuscoletto minuscolo si leggeva
   male proprio dove serve, con il telefono in mano dentro una cella. */
.flabel{font-size:var(--t-sm);font-weight:600;color:var(--testo-2);letter-spacing:0;
  text-transform:none;}

/* Chi arriva con la tastiera deve vedere dove si trova */
:focus-visible{outline:2px solid var(--acc-vivo);outline-offset:2px;border-radius:4px;}

.app{display:flex;height:100%;overflow:hidden;position:relative;}

/* ══════════════════════════════════════════════════════════════════════════
   4. PEZZI
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Menu laterale ───────────────────────────────────────────────────────── */
.sidebar{width:var(--nav-w);min-width:var(--nav-w);
  background:linear-gradient(180deg,var(--nav),var(--nav-2));
  border-right:1px solid var(--nav-linea);display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;z-index:30;}
.sidebar-logo{display:flex;flex-direction:column;gap:2px;padding:var(--s5) var(--s5) var(--s4);
  flex-shrink:0;border-bottom:1px solid var(--nav-linea);}
.logo-badge{display:flex;align-items:center;gap:var(--s2);font-size:16px;font-weight:700;
  color:var(--nav-testo-forte);letter-spacing:-.01em;}
.logo-badge>span:first-child{width:36px;height:36px;border-radius:8px;
  background:linear-gradient(145deg,var(--acc-vivo),var(--acc-scuro));color:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:19px;
  box-shadow:0 4px 14px -2px rgba(10,160,111,.5),inset 0 1px 0 rgba(255,255,255,.25);}
.logo-badge>span:first-child svg{width:20px;height:20px;}
.sidebar-sub{color:var(--nav-fioco);padding-left:44px;letter-spacing:.05em;font-size:12px;
  font-weight:500;white-space:nowrap;}
.nav{flex:1;padding:var(--s2) var(--s2) var(--s3);}
/* Le sezioni: maiuscoletto verde chiaro, della stessa taglia del testo intorno */
.nav-sec{font-size:var(--t-sm);font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--nav-fioco);padding:var(--s2) var(--s3);margin-top:var(--s3);}
.nav-sec:first-child{margin-top:0;}

.ni{display:flex;align-items:center;gap:var(--s2);min-height:40px;padding:8px var(--s3);
  margin-bottom:2px;border-radius:var(--r-sm);cursor:pointer;font-size:var(--t-base);
  color:var(--nav-testo);font-weight:500;border:none;background:transparent;width:100%;
  text-align:left;white-space:nowrap;overflow:hidden;position:relative;
  transition:background var(--v-veloce) var(--curva-morbida),color var(--v-veloce);}
.ni:hover{background:var(--nav-velo);color:var(--nav-testo-forte);}
/* La voce aperta è verde pieno con il testo bianco: si vede da lontano */
.ni.active{background:var(--nav-attivo);color:var(--nav-testo-forte);font-weight:600;
  box-shadow:var(--om-1);}
.ni svg{width:19px;height:19px;flex-shrink:0;opacity:.92;}
.ni.active svg{opacity:1;stroke-width:2;}
.nbadge{margin-left:auto;font-size:var(--t-mini);font-weight:700;
  background:var(--nav-badge);color:#fff;min-width:21px;height:20px;
  padding:0 6px;border-radius:var(--r-full);display:flex;align-items:center;
  justify-content:center;flex-shrink:0;font-variant-numeric:tabular-nums;}

/* Chi sono, in alto a destra: sta con gli altri strumenti di servizio, non in
   fondo al menu dove non lo guardava nessuno. */
.utente{position:relative;flex-shrink:0;}
.utente-chip{display:flex;align-items:center;gap:var(--s2);border:1px solid transparent;
  background:none;border-radius:var(--r-full);padding:3px 10px 3px 3px;cursor:pointer;
  font-family:var(--font);max-width:210px;min-height:40px;
  transition:background var(--v-veloce),border-color var(--v-veloce);}
.utente-chip:hover{background:var(--carta);border-color:var(--linea);}
.utente-testi{min-width:0;text-align:left;display:flex;flex-direction:column;}
.sf-name{font-size:var(--t-sm);font-weight:600;color:var(--testo);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sf-role{font-size:var(--t-mini);color:var(--testo-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.utente-chip .chev{margin-left:2px;}
.ava{width:34px;height:34px;border-radius:var(--r-full);flex-shrink:0;
  background:linear-gradient(145deg,var(--acc-vivo),var(--acc-scuro));color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;}
/* Sigla del cliente, nel colore che lo distingue ovunque */
.ava-cl{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;font-size:12.5px;font-weight:700;flex-shrink:0;}

/* ── Zona principale ─────────────────────────────────────────────────────────
   La testa della pagina non è più una barra separata con il suo bordo: è la
   prima riga del foglio. Soprattitolo, titolo grande, e a destra gli strumenti
   che servono sempre — sincronia, ricerca, avvisi, il proprio nome. */
.main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;}
.topbar{padding:var(--s6) var(--s6) var(--s3);background:var(--sfondo);
  display:flex;align-items:flex-start;gap:var(--s3);flex-shrink:0;z-index:20;}
.topbar-eyebrow{font-size:var(--t-mini);font-weight:500;color:var(--testo-3);
  margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;gap:6px;}
.topbar-eyebrow b{font-weight:600;color:var(--testo-2);}
.topbar-title{font-size:var(--t-xl);font-weight:600;letter-spacing:-.025em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.12;}
.topbar-sub{font-size:var(--t-base);color:var(--testo-3);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tbr{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;
  gap:var(--s2);flex-shrink:0;}
.tbr-strumenti{display:flex;gap:var(--s2);align-items:center;}

/* Il pulsante del menu compare solo quando il menu è a cassetto */
.menu-btn{display:none;width:40px;height:40px;flex-shrink:0;border:1px solid var(--btn-bordo);
  background:var(--btn);border-radius:var(--r-md);color:var(--testo-2);cursor:pointer;
  align-items:center;justify-content:center;transition:background var(--v-veloce);}
.menu-btn svg{width:18px;height:18px;}
.menu-btn:hover{background:var(--btn-hover);}

/* Cerca: la porta d'ingresso a tutto (Ctrl+K) */
.search-bar{display:flex;align-items:center;gap:var(--s2);background:var(--sfondo);
  border:1px solid var(--linea);border-radius:var(--r-md);padding:0 var(--s3);height:38px;
  cursor:pointer;color:var(--testo-3);font-family:var(--font);font-size:14px;
  transition:background var(--v-veloce),border-color var(--v-veloce),box-shadow var(--v-veloce);}
.search-bar:hover{background:var(--carta);border-color:var(--linea-forte);color:var(--testo-2);
  box-shadow:var(--om-1);}
.search-testo{min-width:140px;text-align:left;}
.search-kbd{font-size:11px;font-weight:700;color:var(--testo-3);background:var(--carta);
  border:1px solid var(--linea);border-radius:6px;padding:2px 6px;letter-spacing:.02em;}

/* Stato della sincronizzazione */
.sync-chip{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 var(--s3);
  border:1px solid var(--btn-bordo);border-radius:var(--r-full);background:var(--btn);
  cursor:pointer;font-family:var(--font);font-size:13px;font-weight:600;color:var(--btn-testo);
  white-space:nowrap;transition:background var(--v-veloce);}
.sync-chip:hover{background:var(--btn-hover);}
.sync-dot{width:7px;height:7px;border-radius:50%;background:var(--neutro);flex-shrink:0;}
.sync-chip.ok{color:var(--ok-testo);border-color:var(--acc-velo-2);background:var(--acc-velo);}
.sync-chip.ok .sync-dot{background:var(--ok);box-shadow:0 0 8px var(--ok);}
.sync-chip.err{color:var(--critico-testo);border-color:var(--critico-velo);background:var(--critico-velo);}
.sync-chip.err .sync-dot{background:var(--critico);}
.sync-chip.sync .sync-dot{background:var(--avviso);animation:pulsa 1.1s ease-in-out infinite;}
@keyframes pulsa{50%{opacity:.25;transform:scale(.8)}}
/* Foto scattate senza campo, in attesa di partire */
.coda-chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 var(--s3);
  border:1px solid var(--avviso-velo);border-radius:var(--r-full);background:var(--avviso-velo);
  cursor:pointer;font-family:var(--font);font-size:13px;font-weight:600;
  color:var(--avviso-testo);white-space:nowrap;}

.content{flex:1;padding:var(--s2) var(--s6) var(--s10);overflow-y:auto;background:var(--sfondo);
  overscroll-behavior-y:contain;scroll-behavior:smooth;}
/* Su un monitor grande il contenuto restava tutto a sinistra, con mezzo
   schermo vuoto: oltre --largo il foglio si centra. Fondi e bordi prendono
   lo stesso tutta la finestra, a rientrare è solo quello che si legge. */
.content{padding-left:max(var(--s6),calc((100% - var(--largo))/2));
  padding-right:max(var(--s6),calc((100% - var(--largo))/2));}
.topbar{padding-left:max(var(--s6),calc((100% - var(--largo))/2));
  padding-right:max(var(--s6),calc((100% - var(--largo))/2));}
.page{display:none;}
.page.active{display:block;animation:entra var(--v-lento) var(--curva);}
@keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── Comandi ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px var(--s4);border-radius:var(--r-md);font-family:var(--font);
  font-size:14px;font-weight:600;line-height:1.35;cursor:pointer;
  border:1px solid var(--btn-bordo);background:var(--btn);color:var(--btn-testo);
  box-shadow:var(--om-1);white-space:nowrap;text-decoration:none;min-height:38px;
  transition:background var(--v-veloce) var(--curva-morbida),border-color var(--v-veloce),
             color var(--v-veloce),box-shadow var(--v-veloce),transform 80ms var(--curva-morbida);}
.btn:hover{background:var(--btn-hover);border-color:var(--linea-forte);box-shadow:var(--om-2);}
.btn:active{transform:translateY(1px) scale(.99);box-shadow:none;}
.btn-primary{background:var(--acc);color:var(--su-acc);border-color:transparent;
  box-shadow:var(--om-acc);}
.btn-primary:hover{background:var(--acc-vivo);color:var(--su-acc);border-color:transparent;
  box-shadow:0 4px 16px -2px rgba(10,160,111,.45);}
.btn-danger{background:var(--critico-velo);color:var(--critico-testo);border-color:transparent;
  box-shadow:none;}
.btn-danger:hover{background:var(--critico-velo);border-color:var(--critico);color:var(--critico-testo);}
.btn-sm{padding:6px 11px;font-size:13px;border-radius:var(--r-sm);min-height:32px;}
.btn-lg{padding:13px var(--s5);font-size:16px;min-height:50px;border-radius:var(--r-lg);}
.btn svg{width:15px;height:15px;}
.btn-lg svg{width:18px;height:18px;}
.btn:disabled{opacity:.5;pointer-events:none;}
/* Gruppo di pulsantini in coda a una riga o a una tabella */
.azioni{display:flex;gap:5px;flex-shrink:0;flex-wrap:wrap;}
.tbl .azioni{flex-wrap:nowrap;}
/* Nelle tabelle le azioni ricorrenti sono disegnate: quadrate, dita comprese */
.btn-sm>svg{width:16px;height:16px;}
.tbl .btn-sm:has(>svg:only-child){padding:6px;min-width:32px;}
.riga-voce .btn-sm:has(>svg:only-child){padding:6px;min-width:34px;}

/* ── La pastiglia con l'icona ────────────────────────────────────────────────
   Il segno che tiene insieme tutta l'interfaccia: un quadratino arrotondato,
   fondo tenue, icona nel colore che dice di che si tratta. Apre ogni scheda,
   ogni numero, ogni riga importante. Il colore non è decorazione: verde è a
   posto, ambra scade, rosso è fuori tempo, blu è informazione. */
.ico-badge{width:38px;height:38px;border-radius:11px;display:inline-flex;align-items:center;
  justify-content:center;flex-shrink:0;background:var(--acc-velo);color:var(--acc);}
.ico-badge svg{width:19px;height:19px;}
.ico-badge.ambra{background:var(--avviso-velo);color:var(--avviso);}
.ico-badge.rossa{background:var(--critico-velo);color:var(--critico);}
.ico-badge.blu{background:var(--info-velo);color:var(--info);}
.ico-badge.neutra{background:var(--neutro-velo);color:var(--neutro);}
.ico-badge.sm{width:32px;height:32px;border-radius:9px;}
.ico-badge.sm svg{width:16px;height:16px;}

/* La freccia che dice «qui si entra» */
.chev{margin-left:auto;color:var(--testo-4);flex-shrink:0;display:inline-flex;
  transition:color var(--v-veloce),transform var(--v-veloce);}
.chev svg{width:16px;height:16px;}
.riga-vai{display:flex;align-items:center;gap:var(--s3);padding:11px var(--s3);
  border-radius:var(--r-lg);cursor:pointer;transition:background var(--v-veloce);
  border:none;background:none;width:100%;text-align:left;font-family:var(--font);
  color:var(--testo);}
.riga-vai:hover{background:var(--velo);}
.riga-vai:hover .chev{color:var(--testo-2);transform:translateX(2px);}
.riga-vai+.riga-vai{border-top:1px solid var(--linea);border-radius:0;}

/* ── Schede ──────────────────────────────────────────────────────────────── */
.card{background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-xl);
  overflow:hidden;box-shadow:var(--om-1);
  transition:box-shadow var(--v-medio) var(--curva-morbida),border-color var(--v-medio);}
.cp{padding:var(--s5) var(--s5) var(--s5);}
.sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s4);
  gap:var(--s3);flex-wrap:wrap;}
.st{font-size:var(--t-lg);font-weight:600;letter-spacing:-.02em;display:flex;
  align-items:center;gap:var(--s3);min-width:0;}

/* ── Riquadri con i numeri ───────────────────────────────────────────────── */
.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:var(--s3);margin-bottom:var(--s5);}
.scard{background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-lg);
  padding:var(--s4) var(--s5);box-shadow:var(--om-1);position:relative;overflow:hidden;
  transition:box-shadow var(--v-medio) var(--curva-morbida),transform var(--v-medio) var(--curva-morbida);}
.scard:hover{box-shadow:var(--om-2);transform:translateY(-1px);}
.slabel{font-size:var(--t-sm);color:var(--testo-2);font-weight:600;margin-bottom:var(--s2);}
.sval{font-size:var(--t-hero);font-weight:600;line-height:1;letter-spacing:-.03em;}
.ssub{font-size:var(--t-mini);color:var(--testo-3);margin-top:6px;}
/* Il numero con la sua pastiglia e la freccia: si preme e si va dove sta */
.scard.vai{display:flex;flex-direction:column;align-items:stretch;text-align:left;
  cursor:pointer;font-family:var(--font);color:var(--testo);}
.scard.vai:hover .chev{color:var(--testo-2);transform:translateX(2px);}
.scard-testa{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3);}
.scard-testa .slabel{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Se la pastiglia porta già il colore, il numero resta di inchiostro: due
   colori sullo stesso riquadro si contendono lo sguardo. */
.scard-testa~.sval{color:var(--testo);}
.cteal{color:var(--ok);}.camber{color:var(--avviso);}.ccoral{color:var(--critico);}.cblue{color:var(--info);}

/* ── Tabelle ─────────────────────────────────────────────────────────────── */
.tbl-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px;}
.tbl th{padding:10px 13px;text-align:left;background:var(--sfondo-2);
  border-bottom:1px solid var(--linea);white-space:nowrap;}
.tbl td{padding:11px 13px;border-bottom:1px solid var(--linea);vertical-align:middle;}
.tbl tr:last-child td{border-bottom:none;}
.tbl tbody tr{transition:background var(--v-veloce);}
.tbl tbody tr:hover td{background:var(--velo);}
.tbl td.num,.tbl .num{white-space:nowrap;}
.tbl tbody tr.riga-fatta td{background:var(--acc-velo);color:var(--acc-testo);}
.tbl tbody tr.riga-fatta td:first-child{box-shadow:inset 3px 0 0 var(--acc);}

/* ── Etichette di stato ──────────────────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-full);
  font-size:12.5px;font-weight:600;white-space:nowrap;border:none;line-height:1.45;
  transition:background var(--v-veloce);}
.pg{background:var(--ok-velo);color:var(--ok-testo);}
.pa{background:var(--avviso-velo);color:var(--avviso-testo);}
.pc{background:var(--critico-velo);color:var(--critico-testo);}
.pb{background:var(--info-velo);color:var(--info-testo);}
.pgr{background:var(--neutro-velo);color:var(--neutro-testo);}
.pr{background:var(--critico-velo);color:var(--critico-testo);}
.pt{background:var(--acc-velo);color:var(--acc-testo);}
.days-badge{min-width:46px;text-align:center;padding:3px 9px;border-radius:var(--r-full);
  font-size:12.5px;font-weight:700;white-space:nowrap;}

/* ── Griglie ─────────────────────────────────────────────────────────────── */
.g2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5);}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);}
.g6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s3);align-items:start;}
.g6 .card{padding:var(--s3) var(--s3);}

/* ── Oggi ────────────────────────────────────────────────────────────────── */
.oggi-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);
  flex-wrap:wrap;padding:var(--s1) 2px var(--s5);}
.oggi-data{font-size:var(--t-hero);font-weight:600;
  letter-spacing:-.03em;line-height:1.08;}
.oggi-sub{font-size:var(--t-base);color:var(--testo-3);margin-top:6px;}
.oggi-azioni{display:flex;gap:var(--s2);flex-wrap:wrap;}

/* Una visita in programma: l'ora e la sua durata a sinistra, il pallino del
   cliente, poi il nome con l'attività e le azioni da fare sul posto. */
.oggi-imp{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:var(--s1) var(--s3);
  align-items:start;padding:var(--s3) 0;border-bottom:1px solid var(--linea);}
.oggi-imp:last-child{border-bottom:none;padding-bottom:2px;}
.oggi-ora{font-size:var(--t-sm);font-weight:700;color:var(--testo);grid-row:1;grid-column:1;
  display:flex;flex-direction:column;line-height:1.35;min-width:42px;}
.oggi-ora span{font-weight:500;color:var(--testo-4);}
.oggi-punto{width:10px;height:10px;border-radius:50%;margin-top:5px;grid-row:1;grid-column:2;
  box-shadow:0 0 0 3px var(--carta),0 0 0 4px var(--linea);}
.oggi-imp>div:nth-child(3){grid-column:3;min-width:0;}
.oggi-imp .azioni{grid-column:3;margin-top:var(--s2);}
.oggi-nome{font-size:var(--t-base);font-weight:600;overflow-wrap:anywhere;letter-spacing:-.01em;
  display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;}
.oggi-meta{font-size:var(--t-sm);color:var(--testo-3);margin-top:3px;overflow-wrap:anywhere;}
.oggi-note{font-size:var(--t-sm);color:var(--testo-2);margin-top:5px;font-style:italic;overflow-wrap:anywhere;}
/* Il primo impegno della giornata è quello che si sta per fare */
.oggi-imp.prossimo{background:var(--acc-velo);border-radius:var(--r-lg);border-bottom-color:transparent;
  padding:var(--s3) var(--s4);margin-bottom:var(--s2);}
.oggi-imp.prossimo .oggi-punto{box-shadow:0 0 0 3px var(--acc-velo),0 0 0 4px var(--acc-velo-2);}

/* Le priorità: pastiglia, testo, quanto manca, freccia */
.urg-testi{flex:1;min-width:0;display:flex;flex-direction:column;}
.urg-t{font-size:var(--t-sm);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.urg-s{font-size:var(--t-mini);color:var(--testo-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Come sta andando la settimana */
.avanz-riga{display:flex;align-items:center;gap:var(--s3);padding:9px 0;}
.avanz-corpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.avanz-testa{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);}
.avanz-t{font-size:var(--t-sm);font-weight:600;}
.avanz-n{font-size:var(--t-sm);color:var(--testo-3);font-variant-numeric:tabular-nums;}
.avanz-n b{color:var(--testo);font-weight:700;}

/* Il pannello del cliente da cui sto scrivendo */
.oggi-cl-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);
  padding-bottom:var(--s4);margin-bottom:var(--s4);border-bottom:1px solid var(--linea);flex-wrap:wrap;}
.oggi-cl-nome{font-size:21px;font-weight:600;letter-spacing:-.025em;}
.oggi-cl-meta{font-size:14px;color:var(--testo-3);margin-top:3px;}
.oggi-cl-head .azioni{flex-wrap:wrap;}
.oggi-griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:var(--s3);}
.oggi-box{background:var(--carta-2);border:1px solid var(--linea);border-radius:var(--r-lg);
  padding:var(--s3) var(--s4);}
.oggi-box-larga{grid-column:1/-1;}
.oggi-box-t{margin-bottom:var(--s2);}
.oggi-box-v{font-size:20px;font-weight:600;letter-spacing:-.02em;}
.oggi-box-s{font-size:var(--t-sm);color:var(--testo-3);margin-top:3px;}
.oggi-vuoto{font-size:14px;color:var(--testo-4);}
.oggi-azioni-prec{font-size:14px;color:var(--testo-2);background:var(--sfondo-2);
  border-radius:var(--r-md);padding:var(--s2) var(--s3);margin-top:var(--s2);line-height:1.5;}
/* Le cose rimaste aperte con questo cliente */
.oggi-box.da-chiudere{border-color:var(--avviso-velo);background:var(--avviso-velo);}
.oggi-box.da-chiudere .oggi-box-t{color:var(--avviso-testo);}
/* Riga compatta dentro i riquadri di Oggi */
.mini-row{display:flex;align-items:center;gap:var(--s2);padding:7px 0;
  border-bottom:1px solid var(--linea);font-size:14px;}
.mini-row:last-child{border-bottom:none;}
.oggi-box .mini-row>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.oggi-box .mini-row .pill{flex-shrink:0;}

/* ── Note ────────────────────────────────────────────────────────────────── */
.nota-card{display:flex;align-items:flex-start;gap:var(--s3);background:var(--carta);
  border:1px solid var(--linea);border-radius:var(--r-lg);padding:var(--s3) var(--s4);
  margin-bottom:var(--s2);box-shadow:var(--om-1);
  transition:box-shadow var(--v-medio),opacity var(--v-medio),background var(--v-medio);}
.nota-card:hover{box-shadow:var(--om-2);}
.nota-card.fatta{background:var(--carta-2);opacity:.72;}
.nota-card.fatta .nota-testo{color:var(--testo-3);text-decoration:line-through;}
.nota-check{width:26px;height:26px;flex-shrink:0;border:1.5px solid var(--linea-forte);
  border-radius:50%;background:var(--carta);cursor:pointer;color:var(--acc);font-size:15px;
  font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:border-color var(--v-veloce),background var(--v-veloce),transform var(--v-veloce);}
.nota-check:hover{border-color:var(--acc);transform:scale(1.08);}
.nota-card.fatta .nota-check{background:var(--acc-velo);border-color:var(--acc);}
.nota-testo{font-size:var(--t-base);line-height:1.5;white-space:pre-wrap;}
.nota-meta{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-top:7px;
  font-size:var(--t-mini);color:var(--testo-3);}

/* ── Elenchi e storico ───────────────────────────────────────────────────── */
.evlist{display:flex;flex-direction:column;gap:var(--s2);}
.evitem{display:flex;align-items:center;gap:var(--s3);padding:11px var(--s4);
  border-radius:var(--r-lg);background:var(--carta);border:1px solid var(--linea);
  box-shadow:var(--om-1);transition:border-color var(--v-veloce);}
.evitem:hover{border-color:var(--linea-forte);}
.evdot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.ec{background:var(--critico);}.ea{background:var(--avviso);}
.et{background:var(--acc);}.eb{background:var(--info);}

.timeline{position:relative;padding-left:22px;}
.timeline::before{content:'';position:absolute;left:5px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(var(--linea-forte),transparent);}
.tli{position:relative;margin-bottom:var(--s4);}
.tld{position:absolute;left:-20px;top:4px;width:9px;height:9px;border-radius:50%;
  background:var(--acc);border:2px solid var(--carta);box-shadow:0 0 0 2px var(--acc-velo);}
.tlt{font-size:14.5px;font-weight:600;}
.tls{font-size:var(--t-sm);color:var(--testo-3);margin-top:2px;}

/* ── Calendario ──────────────────────────────────────────────────────────── */
.calpage{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s5);
  align-items:start;margin-bottom:var(--s5);}
#cal-panel{position:sticky;top:var(--s3);}
.calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;margin-top:var(--s3);}
.calh{text-align:center;padding:4px 0 6px;}
.cald{min-height:66px;display:flex;flex-direction:column;gap:2px;font-size:14px;font-weight:500;
  border-radius:var(--r-sm);cursor:pointer;padding:4px;border:1px solid transparent;
  transition:background var(--v-veloce),border-color var(--v-veloce);}
.cald:hover{background:var(--velo);border-color:var(--linea);}
.cald.today{background:var(--acc-velo);color:var(--acc-testo);font-weight:700;}
.cald-num{line-height:1;align-self:flex-start;padding:2px 3px;font-variant-numeric:tabular-nums;}
.cald-chips{display:flex;flex-direction:column;gap:2px;width:100%;overflow:hidden;}
.cald-chip{font-size:11.5px;font-weight:600;color:#fff;border-radius:4px;padding:1px 5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.5;}
.cald-more{font-size:11.5px;font-weight:700;color:var(--testo-3);padding-left:3px;}
.cald.muted{color:var(--testo-4);opacity:.5;}
.cald.sel{border-color:var(--acc);box-shadow:var(--anello);}

/* ── Moduli ──────────────────────────────────────────────────────────────── */
.flabel{display:block;margin-bottom:6px;}
.finput,.fselect,.ftextarea{width:100%;padding:10px var(--s3);border-radius:var(--r-md);
  border:1px solid var(--linea-forte);background:var(--carta-2);font-family:var(--font);
  font-size:16px;color:var(--testo);outline:none;min-height:var(--tocco);
  transition:border-color var(--v-veloce),box-shadow var(--v-veloce),background var(--v-veloce);}
.finput:hover,.fselect:hover,.ftextarea:hover{border-color:var(--testo-4);}
.finput:focus,.fselect:focus,.ftextarea:focus{border-color:var(--acc);background:var(--carta);
  box-shadow:var(--anello);}
.finput::placeholder,.ftextarea::placeholder{color:var(--testo-4);}
.finput[readonly]{background:var(--sfondo-2);color:var(--testo-3);}
.fselect{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 8l3-3.5' fill='none' stroke='%237C8286' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:13px;}
.ftextarea{resize:vertical;min-height:84px;line-height:1.55;}
/* Una riga di campi si dispone da sé: tre in fila se c'è larghezza, due o uno
   quando non ce n'è. Prima erano sempre due e il terzo finiva da solo. */
.frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr));gap:var(--s4);}
.fg{margin-bottom:var(--s4);}
/* Inizio · Fine · Ore: tre campi in mezza colonna. L'orologio dei campi «time»
   si porta dietro il suo pulsante: senza stringere i margini l'ora si taglia. */
.orario{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 60px;gap:6px;align-items:end;}
.orario>div{min-width:0;}
.orario .finput{padding-left:8px;padding-right:4px;font-size:15px;}
.orario .finput::-webkit-calendar-picker-indicator{margin-left:0;padding:0;opacity:.55;}
input[type=color]{padding:3px;cursor:pointer;min-height:38px;background:var(--carta-2);}
/* Riga di un elenco modificabile (ambiti, parametri, tipologie…) */
.riga-voce{display:flex;align-items:center;gap:var(--s2);margin-bottom:7px;flex-wrap:wrap;}
/* Spunte a forma di etichetta (ambiti del cliente, mesi, parametri) */
.chip-check{display:flex;flex-wrap:wrap;gap:7px;}
.chip-lbl{display:inline-flex;align-items:center;gap:7px;padding:8px var(--s3);
  border-radius:var(--r-full);border:1px solid var(--linea-forte);background:var(--carta-2);
  cursor:pointer;font-size:14px;min-height:38px;
  transition:border-color var(--v-veloce),background var(--v-veloce);}
.chip-lbl:hover{background:var(--velo);}
.chip-lbl input{width:16px;height:16px;accent-color:var(--c,var(--acc));cursor:pointer;}
.chip-lbl:has(input:checked){border-color:var(--c,var(--acc));
  background:color-mix(in srgb,var(--c,#07845C) 12%,transparent);font-weight:600;}
.firma-stato{background:var(--acc-velo);color:var(--acc-testo);border-radius:var(--r-md);
  padding:9px var(--s3);font-size:14px;font-weight:600;margin-bottom:var(--s3);}
.azioni-modale{display:flex;gap:var(--s2);justify-content:flex-end;flex-wrap:wrap;margin-top:var(--s1);}
.swatch{width:32px;height:32px;border-radius:var(--r-md);cursor:pointer;border:2px solid transparent;
  transition:transform var(--v-veloce);}
.swatch:hover{transform:scale(1.08);}
/* La riga che avverte che si sta riscrivendo un documento già salvato */
.banner-modifica{display:none;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:10px var(--s4);background:var(--avviso-velo);color:var(--avviso-testo);
  border-radius:var(--r-md);font-size:14.5px;font-weight:600;margin-bottom:var(--s3);
  box-shadow:inset 3px 0 0 var(--avviso);}

/* ── Checklist ───────────────────────────────────────────────────────────── */
.chi{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s3) var(--s4);
  background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-lg);flex-wrap:wrap;
  transition:border-color var(--v-veloce),background var(--v-veloce),box-shadow var(--v-veloce);}
.chi:hover{border-color:var(--linea-forte);}
.chi.ok-i{border-color:var(--acc-velo-2);background:var(--acc-velo);}
.chi.nc-i{border-color:var(--critico-velo);background:var(--critico-velo);}
/* Il punto che l'ultima volta era non conforme: da guardare bene */
.chi.da-ricontrollare{border-color:var(--avviso);background:var(--avviso-velo);
  box-shadow:inset 3px 0 0 var(--avviso);}
.chq{font-size:var(--t-base);font-weight:600;line-height:1.45;}
.chh{font-size:var(--t-sm);color:var(--testo-3);margin-top:2px;}
.chn{margin-top:var(--s2);width:100%;padding:9px 11px;border-radius:var(--r-sm);
  border:1px solid var(--linea-forte);font-family:var(--font);font-size:14.5px;
  color:var(--testo);background:var(--carta);display:none;}
.chn.vis{display:block;animation:apri var(--v-medio) var(--curva);}
@keyframes apri{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* Conf./NC/N.A. si premono col dito mentre cammini: bersagli larghi */
.cbtns{display:flex;gap:6px;flex-shrink:0;margin-top:2px;flex-wrap:wrap;}
.cb{padding:11px 17px;font-size:15px;font-weight:600;border-radius:var(--r-sm);cursor:pointer;
  border:1px solid var(--btn-bordo);background:var(--btn);font-family:var(--font);
  color:var(--btn-testo);min-height:46px;min-width:62px;
  transition:background var(--v-veloce),color var(--v-veloce),border-color var(--v-veloce),transform 80ms;}
.cb:hover{background:var(--btn-hover);}
.cb:active{transform:scale(.96);}
.cb.ok{background:var(--acc);color:var(--su-acc);border-color:transparent;box-shadow:var(--om-acc);}
.cb.nc{background:var(--critico);color:#fff;border-color:transparent;}
.cb.na{background:var(--neutro-velo);color:var(--neutro-testo);}
.chphoto{display:inline-flex;align-items:center;justify-content:center;min-width:50px;
  min-height:46px;font-size:17px;border:1px solid var(--btn-bordo);border-radius:var(--r-sm);
  background:var(--btn);cursor:pointer;color:var(--testo-2);}
.chphoto:hover{border-color:var(--acc);color:var(--acc);}
.photo-thumb{width:52px;height:52px;border-radius:var(--r-md);object-fit:cover;
  border:1px solid var(--linea);cursor:pointer;transition:transform var(--v-veloce);}
.photo-thumb:hover{transform:scale(1.06);}

/* ── Aiuti alla compilazione ─────────────────────────────────────────────── */
/* La riga che propone di ripartire dall'ultima verifica dello stesso cliente */
.ripresa{display:flex;align-items:center;gap:var(--s3);background:var(--info-velo);
  border-radius:var(--r-lg);padding:11px var(--s4);margin-top:var(--s1);font-size:14px;
  color:var(--info-testo);flex-wrap:wrap;}
.ripresa strong{font-weight:700;}
/* I rilievi già scritti in passato, pronti da riusare */
.sugg{display:flex;flex-direction:column;gap:4px;width:100%;margin-top:var(--s2);
  border-top:1px dashed var(--linea-forte);padding-top:var(--s2);
  animation:apri var(--v-medio) var(--curva);}
.sugg-voce{display:flex;align-items:center;gap:var(--s2);text-align:left;width:100%;
  background:var(--critico-velo);border:1px solid transparent;border-radius:var(--r-sm);
  padding:8px var(--s3);font-family:var(--font);font-size:13.5px;color:var(--critico-testo);
  cursor:pointer;line-height:1.45;transition:border-color var(--v-veloce),transform var(--v-veloce);}
.sugg-voce:hover{border-color:var(--critico);transform:translateX(2px);}
.sugg-n{margin-left:auto;font-size:11.5px;font-weight:700;opacity:.7;flex-shrink:0;}
/* Il cronometro mentre corre */
.crono-attivo{background:var(--acc)!important;border-color:transparent!important;
  color:var(--su-acc)!important;animation:respiro 2.4s ease-in-out infinite;}
@keyframes respiro{50%{box-shadow:0 0 0 5px var(--acc-velo)}}

/* ── Schede a linguetta ──────────────────────────────────────────────────── */
.tabs{display:flex;gap:2px;background:var(--sfondo-2);border-radius:var(--r-md);padding:4px;
  margin-bottom:var(--s5);overflow-x:auto;}
.tab{flex:1;min-width:max-content;padding:9px var(--s3);border-radius:var(--r-sm);border:none;
  background:none;cursor:pointer;font-family:var(--font);font-size:14px;font-weight:500;
  color:var(--testo-2);white-space:nowrap;transition:background var(--v-veloce),color var(--v-veloce);}
.tab:hover{color:var(--testo);}
.tab.active{background:var(--carta);color:var(--testo);font-weight:600;box-shadow:var(--om-1);}
.tabs-big{display:flex;flex-wrap:wrap;gap:var(--s2);background:none;padding:0;
  margin-bottom:var(--s5);overflow:visible;}
.tabs-big .tab{flex:1 1 128px;padding:13px var(--s3);border-radius:var(--r-lg);
  border:1px solid var(--linea);background:var(--carta);color:var(--testo-2);box-shadow:var(--om-1);}
.tabs-big .tab:hover{background:var(--carta);border-color:var(--linea-forte);box-shadow:var(--om-2);}
.tabs-big .tab.active{border-color:transparent;color:var(--su-acc);background:var(--acc);
  box-shadow:var(--om-acc);}

/* ── La scelta fra due strade ────────────────────────────────────────────────
   Premendo «Nuovo» su Verifiche e consulenze: due righe grandi, si legge cosa
   sono e si parte. Niente elenchi a tendina per una scelta fra due cose. */
.scelta-doc{display:flex;flex-direction:column;gap:var(--s2);}
.scelta{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;
  padding:var(--s4);border:1px solid var(--linea);border-radius:var(--r-lg);
  background:var(--carta);cursor:pointer;font-family:var(--font);color:var(--testo);
  box-shadow:var(--om-1);
  transition:border-color var(--v-veloce),box-shadow var(--v-veloce),transform var(--v-veloce);}
.scelta:hover{border-color:var(--acc);box-shadow:var(--om-2);transform:translateY(-1px);}
.scelta:hover .chev{color:var(--acc);transform:translateX(2px);}
.scelta-testi{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.scelta-testi b{font-size:var(--t-md);font-weight:600;letter-spacing:-.01em;}
.scelta-testi i{font-style:normal;font-size:var(--t-sm);color:var(--testo-3);line-height:1.4;}

/* ── Il campo che filtra un elenco ───────────────────────────────────────────
   Sta in testa alla pagina, accanto al titolo: si scrive e l'elenco si
   accorcia mentre si digita. La crocetta compare solo quando c'è qualcosa da
   cancellare, così non fa rumore quando il campo è vuoto. */
.cerca-campo{position:relative;display:flex;align-items:center;flex:1 1 250px;
  min-width:200px;max-width:360px;}
.cerca-campo>svg{position:absolute;left:12px;width:16px;height:16px;color:var(--testo-3);
  pointer-events:none;}
.cerca-campo .finput{padding-left:35px;padding-right:32px;min-height:40px;font-size:var(--t-sm);}
.cerca-campo .finput::-webkit-search-cancel-button{display:none;}
.cerca-x{position:absolute;right:6px;width:26px;height:26px;border:none;background:none;
  color:var(--testo-3);cursor:pointer;font-size:19px;line-height:1;border-radius:50%;
  display:none;align-items:center;justify-content:center;}
.cerca-campo.pieno .cerca-x{display:flex;}
.cerca-x:hover{background:var(--velo);color:var(--testo);}
/* Quanti ne sono rimasti, accanto al titolo */
.conta{font-size:var(--t-mini);font-weight:600;color:var(--testo-3);background:var(--sfondo-2);
  border-radius:var(--r-full);padding:3px 10px;white-space:nowrap;}

/* ── Archivio: i filtri in testa ─────────────────────────────────────────── */
.filtri-arch{display:flex;flex-direction:column;gap:var(--s4);margin-bottom:var(--s4);}
.filtro-tipi{display:flex;gap:6px;flex-wrap:wrap;}
.ftipo{padding:9px var(--s5);border-radius:var(--r-full);border:1px solid var(--btn-bordo);
  background:var(--btn);font-family:var(--font);font-size:14px;font-weight:600;
  color:var(--btn-testo);cursor:pointer;min-height:40px;
  transition:background var(--v-veloce),color var(--v-veloce),box-shadow var(--v-veloce);}
.ftipo:hover{background:var(--btn-hover);}
.ftipo.attivo{background:var(--acc);border-color:transparent;color:var(--su-acc);box-shadow:var(--om-acc);}
.filtro-campi{display:flex;gap:var(--s3);align-items:flex-end;flex-wrap:wrap;
  padding-top:var(--s3);border-top:1px solid var(--linea);}

/* ── Finestre ────────────────────────────────────────────────────────────── */
.modal-overlay{display:none;position:fixed;inset:0;background:var(--vetro);
  backdrop-filter:blur(6px) saturate(.9);z-index:100;align-items:center;justify-content:center;
  padding:var(--s4);}
.modal-overlay.open{display:flex;animation:sfuma var(--v-medio) ease;}
@keyframes sfuma{from{opacity:0}to{opacity:1}}
.modal{background:var(--carta);border-radius:var(--r-xl);border:1px solid var(--linea);
  width:580px;max-width:100%;max-height:92vh;overflow-y:auto;box-shadow:var(--om-4);
  overscroll-behavior:contain;animation:sali var(--v-lento) var(--curva);}
@keyframes sali{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.mh{padding:var(--s5) var(--s5) 0;display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--s4);}
.mh-title{font-size:20px;font-weight:600;letter-spacing:-.02em;}
.mclose{border:1px solid var(--btn-bordo);background:var(--btn);cursor:pointer;font-size:20px;
  color:var(--testo-2);line-height:1;width:34px;height:34px;border-radius:var(--r-sm);flex-shrink:0;
  transition:background var(--v-veloce),color var(--v-veloce);}
.mclose:hover{background:var(--btn-hover);color:var(--testo);}
.mbody{padding:0 var(--s5) var(--s5);}
.modal.wide{width:780px;}

/* ── Impostazioni: una pagina per ogni pagina dell'app ───────────────────── */
/* A sinistra lo stesso elenco del menu, a destra le impostazioni di quella
   pagina sola. Sul telefono l'elenco diventa una riga che scorre. */
.imp-griglia{display:grid;grid-template-columns:232px minmax(0,1fr);gap:var(--s5);align-items:start;}
.imp-nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:var(--s3);}
.imp-voce{text-align:left;padding:10px var(--s3);border-radius:var(--r-md);border:1px solid transparent;
  background:none;cursor:pointer;font-family:var(--font);font-size:15px;color:var(--testo-2);
  transition:background var(--v-veloce),color var(--v-veloce);}
.imp-voce:hover{background:var(--velo);color:var(--testo);}
.imp-voce.attiva{background:var(--acc-velo);border-color:var(--acc-velo-2);color:var(--acc-testo);font-weight:600;}
@media(max-width:900px){
  .imp-griglia{grid-template-columns:minmax(0,1fr);}
  .imp-nav{position:static;flex-direction:row;overflow-x:auto;padding-bottom:var(--s2);
    scrollbar-width:none;}
  .imp-nav::-webkit-scrollbar{display:none;}
  .imp-voce{white-space:nowrap;flex-shrink:0;border:1px solid var(--linea);background:var(--carta);}
}

/* ── Le frecce accanto al nome, nella scheda del cliente ─────────────────── */
.nav-scheda{width:34px;height:34px;flex-shrink:0;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--btn-bordo);background:var(--btn);
  border-radius:var(--r-sm);color:var(--testo-2);cursor:pointer;
  transition:background var(--v-veloce),color var(--v-veloce),border-color var(--v-veloce);}
.nav-scheda svg{width:17px;height:17px;}
.nav-scheda:hover:not(:disabled){background:var(--btn-hover);color:var(--testo);border-color:var(--linea-forte);}
.nav-scheda:disabled{opacity:.35;cursor:default;}

/* ── La barra della selezione multipla ───────────────────────────────────── */
/* Compare solo quando c'è qualcosa di selezionato: dice quanti sono e cosa
   ci si può fare. */
.barra-sel{display:none;align-items:center;justify-content:space-between;gap:var(--s3);
  flex-wrap:wrap;background:var(--acc-velo);border:1px solid var(--acc-velo-2);
  border-radius:var(--r-lg);padding:10px var(--s4);margin-bottom:var(--s3);
  animation:apri var(--v-medio) var(--curva);}
.barra-sel.mostra{display:flex;}
.barra-sel>span{font-size:15px;font-weight:600;color:var(--acc-testo);}
.barra-sel .fselect{min-height:36px;padding-top:6px;padding-bottom:6px;}
.riga-scelta{background:var(--acc-velo);}
.cella-scelta{width:38px;text-align:center;}
.cella-scelta input{width:18px;height:18px;accent-color:var(--acc);cursor:pointer;}

/* ── L'indice delle sezioni della checklist ──────────────────────────────── */
/* Sopra le domande, una pastiglia per sezione con quante ne hai risposte:
   piena quando la sezione è finita, mezza quando è cominciata. */
.indice-sez{display:flex;gap:var(--s2);overflow-x:auto;padding:2px 0 var(--s3);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;}
/* A tutta finestra l'indice resta appeso sotto la testata, che è ferma in alto:
   l'altezza della testata gliela passa mostraSezioneDoc() */
.sop-pieno .indice-sez,.doc-pieno .indice-sez{position:sticky;top:calc(var(--h-testata,64px) - 1px);z-index:1;
  background:var(--sfondo);padding-top:var(--s3);}
.indice-sez::-webkit-scrollbar{display:none;}
.indice-sez:empty{display:none;}
.sez-chip{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;flex-shrink:0;
  padding:9px var(--s3);min-height:40px;border-radius:999px;cursor:pointer;
  border:1px solid var(--linea);background:var(--carta);color:var(--testo-2);
  font-family:var(--font);font-size:14px;font-weight:600;
  transition:background var(--v-veloce),border-color var(--v-veloce),color var(--v-veloce);}
.sez-chip span{font-weight:600;color:var(--testo-3);font-variant-numeric:tabular-nums;}
.sez-chip:hover{border-color:var(--linea-forte);background:var(--btn-hover);}
.sez-chip.mezza{border-color:var(--avviso);color:var(--avviso-testo);}
.sez-chip.mezza span{color:var(--avviso-testo);}
.sez-chip.piena{background:var(--acc-velo);border-color:var(--acc-velo-2);color:var(--acc-testo);}
.sez-chip.piena span{color:var(--acc-testo);}
/* la sezione non finisce sotto la testata quando ci si salta sopra */
.sez{scroll-margin-top:72px;}
.sop-pieno .sez,.doc-pieno .sez{scroll-margin-top:calc(var(--h-testata,64px) + 62px);}
/* Quanto manca, accanto al titolo della verifica */
.avanz{font-size:15px;font-weight:500;color:var(--testo-3);
  font-variant-numeric:tabular-nums;white-space:nowrap;}
.avanz:empty{display:none;}

/* ── I dati della verifica, ripiegati ────────────────────────────────────── */
/* Cliente, data e checklist si scelgono prima di entrare: qui restano a
   portata di mano — orari, km, ambito — senza rubare la prima schermata. */
.dati-doc{margin-bottom:var(--s4);}
.dati-doc>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:var(--s2);
  font-size:15px;font-weight:600;color:var(--testo-2);padding:11px var(--s4);
  background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-lg);
  box-shadow:var(--om-1);}
.dati-doc>summary::-webkit-details-marker{display:none;}
.dati-doc>summary::after{content:'';margin-left:auto;width:8px;height:8px;flex-shrink:0;
  border-right:2px solid var(--testo-3);border-bottom:2px solid var(--testo-3);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--v-veloce) var(--curva);}
.dati-doc[open]>summary{margin-bottom:var(--s3);}
.dati-doc[open]>summary::after{transform:rotate(225deg) translate(-2px,-2px);}

/* ── La verifica a tutta finestra ────────────────────────────────────────── */
/* Con la checklist in mano davanti al cliente serve tutto lo schermo: il
   modulo esce dalla pagina e prende la finestra, con la testata ferma in alto
   e il tasto per tornare all'archivio sempre a portata di pollice. */
body.verifica-piena{overflow:hidden;}
.sop-pieno,.doc-pieno{position:fixed;inset:0;z-index:90;background:var(--sfondo);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.sop-pieno>.sh,.doc-pieno>.sh{position:sticky;top:0;z-index:2;margin:0;
  padding:var(--s4) max(var(--s6),calc((100% - var(--largo))/2));
  background:var(--sfondo);border-bottom:1px solid var(--linea);}
.sop-pieno>.banner-modifica,.doc-pieno>.banner-modifica{margin:var(--s4) var(--s6) 0;}
.sop-pieno>.g2,.doc-pieno>.g2{
  padding:var(--s5) max(var(--s6),calc((100% - var(--largo))/2)) var(--s8);
  grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:start;}
@media(max-width:1000px){.sop-pieno>.g2,.doc-pieno>.g2{grid-template-columns:minmax(0,1fr);}}
@media(max-width:700px){
  .sop-pieno>.sh,.doc-pieno>.sh{padding:var(--s3) var(--s4);}
  .sop-pieno>.banner-modifica{margin:var(--s3) var(--s4) 0;}
  .sop-pieno>.g2,.doc-pieno>.g2{padding:var(--s4) var(--s4) var(--s8);}
}

/* ── Il messaggio in basso, con il tasto per disfare ─────────────────────── */
.notif{position:fixed;bottom:var(--s6);left:50%;transform:translate(-50%,80px);z-index:200;
  background:var(--testo);color:var(--carta);padding:12px var(--s5);border-radius:var(--r-full);
  font-size:14px;font-weight:600;box-shadow:var(--om-4);opacity:0;max-width:92vw;
  display:flex;align-items:center;gap:var(--s4);text-align:center;
  transition:opacity var(--v-medio) var(--curva),transform var(--v-medio) var(--curva);}
.notif.show{transform:translate(-50%,0);opacity:1;}
.notif.err{background:var(--critico);color:#fff;}
.notif-annulla{border:none;background:rgba(255,255,255,.2);color:inherit;font-family:var(--font);
  font-size:13px;font-weight:700;padding:6px var(--s3);border-radius:var(--r-full);cursor:pointer;
  flex-shrink:0;transition:background var(--v-veloce);}
.notif-annulla:hover{background:rgba(255,255,255,.34);}

/* ── Grafici ─────────────────────────────────────────────────────────────── */
.bar-chart{display:flex;align-items:flex-end;gap:var(--s2);height:150px;padding:0 2px;}
.bar-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;position:relative;}
.bar-rect{width:100%;border-radius:6px 6px 3px 3px;min-height:3px;transform-origin:bottom;
  animation:cresci .5s var(--curva) both;}
@keyframes cresci{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.bar-fill{background:linear-gradient(180deg,var(--acc-vivo),var(--acc));}
.bar-soft{background:var(--acc-velo-2);}
.bar-label{font-size:var(--t-mini);color:var(--testo-3);font-weight:500;}
.bar-val{font-size:var(--t-mini);font-weight:700;color:var(--testo-2);}
.bar-item[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);
  left:50%;transform:translate(-50%,4px);background:var(--testo);color:var(--carta);
  font-size:12.5px;font-weight:500;padding:6px 10px;border-radius:var(--r-sm);white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity var(--v-veloce),transform var(--v-veloce);
  z-index:5;box-shadow:var(--om-3);}
.bar-item[data-tip]:hover::after{opacity:1;transform:translate(-50%,0);}

/* Classifica dei clienti per ore */
.ore-classifica{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--linea);}
.ore-cl-tit{margin-bottom:var(--s2);}
.ore-cl-row{display:flex;align-items:center;gap:var(--s3);padding:5px 0;cursor:pointer;font-size:14px;}
.ore-cl-row:hover .ore-cl-nome{color:var(--acc);}
.ore-cl-nome{width:33%;min-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--testo-2);}
.ore-cl-bar{flex:1;height:8px;background:var(--sfondo-2);border-radius:var(--r-full);overflow:hidden;}
.ore-cl-bar i{display:block;height:100%;border-radius:var(--r-full);
  animation:allunga .6s var(--curva) both;}
@keyframes allunga{from{width:0!important}}
.ore-cl-row strong{min-width:54px;text-align:right;font-size:13px;}

.donut-wrap{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;}
.donut-legend{display:flex;flex-direction:column;gap:5px;min-width:150px;}
.donut-leg-item{display:flex;align-items:center;gap:var(--s2);font-size:14px;padding:3px 6px;
  border-radius:var(--r-sm);transition:background var(--v-veloce);}
.donut-leg-item:hover{background:var(--velo);}
.donut-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0;}
.donut-seg{transition:opacity var(--v-medio);cursor:pointer;}
.donut-wrap svg:hover .donut-seg{opacity:.35;}
.donut-wrap svg .donut-seg:hover{opacity:1;}

.conf-ring{display:flex;align-items:center;gap:var(--s5);margin:var(--s4) 0;flex-wrap:wrap;}
.ring-svg{flex-shrink:0;}
.ring-info{display:flex;flex-direction:column;gap:7px;}
.ring-stat{display:flex;align-items:center;gap:9px;font-size:14px;}
.ring-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.pb-wrap{display:block;height:7px;background:var(--sfondo-2);border-radius:var(--r-full);overflow:hidden;}
.pb-fill{display:block;height:100%;border-radius:var(--r-full);transition:width .6s var(--curva);}

/* Cosa dicono i dati */
.an-riga{display:flex;align-items:center;gap:var(--s3);padding:11px 0;
  border-bottom:1px solid var(--linea);cursor:pointer;transition:padding var(--v-veloce);}
.an-riga:last-child{border-bottom:none;}
.an-riga:hover{padding-left:4px;}
.an-riga:hover .an-nome{color:var(--acc);}
.an-pallino{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.an-nome{font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:color var(--v-veloce);}
.an-motivi{font-size:var(--t-sm);color:var(--testo-3);margin-top:2px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.an-trend{font-size:13px;font-weight:700;min-width:30px;text-align:right;color:var(--testo-3);}
.an-trend.su{color:var(--ok);}
.an-trend.giu{color:var(--critico);}

/* ── Stato vuoto ─────────────────────────────────────────────────────────── */
.empty{text-align:center;padding:var(--s8) var(--s6);color:var(--testo-3);}
.empty h3{font-size:17px;font-weight:600;margin-bottom:6px;color:var(--testo);}
.empty p{font-size:14px;}

/* ── Scadenze ────────────────────────────────────────────────────────────── */
.scad-item{display:flex;align-items:center;gap:var(--s3);padding:11px var(--s4);
  border-radius:var(--r-lg);background:var(--carta);border:1px solid var(--linea);
  margin-bottom:var(--s2);box-shadow:var(--om-1);flex-wrap:wrap;}
.scad-urgente{border-color:var(--critico-velo);background:var(--critico-velo);}
.scad-warning{border-color:var(--avviso-velo);background:var(--avviso-velo);}

/* ── In sospeso ──────────────────────────────────────────────────────────── */
.sosp-cliente{background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-xl);
  margin-bottom:var(--s3);overflow:hidden;box-shadow:var(--om-1);
  transition:box-shadow var(--v-medio) var(--curva-morbida);}
.sosp-cliente:hover{box-shadow:var(--om-2);}
.sosp-testa{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  background:var(--carta-2);border-bottom:1px solid var(--linea);flex-wrap:wrap;}
.sosp-nome{font-size:17px;font-weight:600;letter-spacing:-.02em;}
.sosp-meta{font-size:var(--t-mini);color:var(--testo-3);margin-top:1px;}
.sosp-voce{display:flex;align-items:center;gap:var(--s3);padding:11px var(--s4);
  border-bottom:1px solid var(--linea);flex-wrap:wrap;transition:background var(--v-veloce);}
.sosp-voce:last-child{border-bottom:none;}
.sosp-voce:hover{background:var(--velo);}
.sosp-t{font-size:14px;line-height:1.5;}
.sosp-x{font-size:var(--t-sm);color:var(--testo-3);margin-top:3px;}

/* ── Modelli, documenti, costruttore ─────────────────────────────────────── */
.mod-card{margin-bottom:var(--s2);cursor:pointer;}
.mod-card:hover{border-color:var(--linea-forte);box-shadow:var(--om-2);transform:translateY(-1px);}
.mod-ico{width:36px;height:36px;border-radius:var(--r-md);display:flex;align-items:center;
  justify-content:center;flex-shrink:0;}
.mod-ico>div{width:13px;height:13px;border-radius:4px;}
.builder-question{display:flex;align-items:flex-start;gap:var(--s3);padding:11px var(--s4);
  background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-md);
  margin-bottom:var(--s2);}
.bq-handle{cursor:grab;color:var(--testo-4);font-size:20px;padding-top:4px;}
.bq-num{font-size:13px;font-weight:700;color:var(--acc);min-width:22px;padding-top:10px;
  font-variant-numeric:tabular-nums;}
/* I modelli pronti da aggiungere */
.pronto-riga{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0;
  border-bottom:1px solid var(--linea);}
.pronto-riga:last-child{border-bottom:none;}
/* I documenti del cliente */
.doc-row{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0;
  border-bottom:1px solid var(--linea);flex-wrap:wrap;}
.doc-row:last-child{border-bottom:none;}
.doc-tipo{width:42px;height:34px;border-radius:var(--r-sm);background:var(--sfondo-2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;letter-spacing:.04em;}
.doc-nome{font-size:14.5px;font-weight:600;overflow-wrap:anywhere;}
.doc-meta{font-size:var(--t-mini);color:var(--testo-3);margin-top:2px;}

/* ── Giro: il mese, riga per settimana ───────────────────────────────────────
   Quattro o cinque righe, una per settimana, con i sei giorni lavorativi in
   colonna: si vede l'intero mese senza sfogliare una settimana alla volta. */
.barra-comandi{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s4);}
.barra-titolo{font-size:18px;font-weight:600;min-width:150px;
  text-align:center;letter-spacing:-.02em;}
.sett-riga{background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-xl);
  margin-bottom:var(--s3);overflow:hidden;box-shadow:var(--om-1);
  transition:box-shadow var(--v-medio) var(--curva-morbida);}
.sett-riga.corrente{border-color:var(--acc-velo-2);box-shadow:var(--om-2);}
.sett-testa{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  background:var(--carta-2);border-bottom:1px solid var(--linea);flex-wrap:wrap;}
.sett-riga.corrente .sett-testa{background:var(--acc-velo);}
.sett-nome{font-size:14px;font-weight:700;}
.sett-riga.corrente .sett-nome{color:var(--acc-testo);}
.sett-date{font-size:var(--t-mini);color:var(--testo-3);}
.sett-conto{margin-left:auto;font-size:var(--t-sm);color:var(--testo-3);}
.sett-giorni{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));}
.giorno{border-right:1px solid var(--linea);padding:var(--s2);min-height:84px;display:flex;
  flex-direction:column;gap:5px;transition:background var(--v-veloce);}
.giorno:last-child{border-right:none;}
.giorno:hover{background:var(--velo);}
.sett-riga.vuota .giorno{min-height:46px;}
.sett-riga.vuota .sett-testa{opacity:.75;}
.giorno.fuori{background:var(--sfondo-2);opacity:.5;}
.giorno.oggi{background:var(--acc-velo);}
.giorno-testa{display:flex;align-items:center;justify-content:space-between;gap:4px;}
.giorno-nome{letter-spacing:.04em;}
.giorno.oggi .giorno-nome{color:var(--acc-testo);}
.giorno-nome .num{font-size:13px;color:var(--testo);}
.giorno-piu{width:22px;height:22px;border-radius:6px;border:1px solid var(--linea-forte);
  background:var(--carta);color:var(--testo-3);font-size:15px;line-height:1;cursor:pointer;
  flex-shrink:0;opacity:0;transition:opacity var(--v-veloce),background var(--v-veloce);}
.giorno:hover .giorno-piu{opacity:1;}
.giorno-piu:hover{background:var(--acc-velo);color:var(--acc-testo);border-color:var(--acc);}
/* Una visita dentro il giorno */
.tappa{display:block;width:100%;text-align:left;background:var(--carta-2);
  border:1px solid var(--linea);border-left:3px solid var(--acc);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:7px var(--s2);cursor:pointer;
  font-family:var(--font);
  transition:background var(--v-veloce),box-shadow var(--v-veloce),transform var(--v-veloce);}
.tappa:hover{background:var(--carta);box-shadow:var(--om-2);transform:translateX(2px);}
.tappa-ora{display:inline-block;font-size:12.5px;font-weight:700;color:var(--testo);margin-right:5px;}
.tappa-cl{font-size:13px;font-weight:600;color:var(--testo);}
.tappa-att{display:block;font-size:var(--t-mini);color:var(--testo-3);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Le pendenze da spuntare dentro il verbale rapido */
.rap-sosp{display:flex;flex-direction:column;gap:6px;border:1px solid var(--avviso-velo);
  background:var(--avviso-velo);border-radius:var(--r-lg);padding:var(--s3);}
.rap-sosp-voce{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:14px;
  padding:5px 0;flex-wrap:wrap;}
.rap-sosp-voce input{width:19px;height:19px;accent-color:var(--acc);flex-shrink:0;cursor:pointer;}
.rap-sosp-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ── Accesso ─────────────────────────────────────────────────────────────── */
#login-screen{position:fixed;inset:0;background:var(--nav);z-index:999;display:flex;
  align-items:center;justify-content:center;flex-direction:column;overflow-y:auto;padding:var(--s5);}
#login-screen::before{content:'';position:absolute;inset:0;
  background:radial-gradient(900px 500px at 50% -10%,rgba(10,160,111,.22),transparent 70%);}
.login-box{position:relative;z-index:1;background:var(--carta);border:1px solid var(--linea);
  border-radius:var(--r-xl);padding:var(--s7);width:420px;max-width:100%;box-shadow:var(--om-4);}
.login-logo{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s6);justify-content:center;}
.login-logo-badge{background:var(--acc);color:var(--su-acc);font-size:16px;font-weight:600;
  padding:10px var(--s4);border-radius:var(--r-md);box-shadow:var(--om-acc);}
.login-title{font-size:24px;font-weight:700;text-align:center;
  margin-bottom:6px;letter-spacing:-.025em;}
.login-sub{font-size:14px;color:var(--testo-3);text-align:center;margin-bottom:var(--s5);}
.login-err{background:var(--critico-velo);color:var(--critico-testo);border-radius:var(--r-md);
  padding:11px var(--s3);font-size:14px;margin-bottom:var(--s4);display:none;font-weight:500;}
.login-err.show{display:block;animation:apri var(--v-medio) var(--curva);}

/* ── Menu utente ─────────────────────────────────────────────────────────── */
.user-dropdown{position:absolute;top:calc(100% + 6px);right:0;width:250px;background:var(--carta);
  border:1px solid var(--linea);border-radius:var(--r-lg);box-shadow:var(--om-4);padding:6px;
  z-index:150;display:none;}
.user-dropdown.open{display:block;animation:apri var(--v-medio) var(--curva);}
.ud-item{padding:10px;border-radius:var(--r-sm);font-size:var(--t-sm);font-weight:500;cursor:pointer;
  display:flex;align-items:center;gap:var(--s2);color:var(--testo-2);min-height:40px;
  transition:background var(--v-veloce);}
.ud-item:hover{background:var(--velo);color:var(--testo);}
.ud-sep{height:1px;background:var(--linea);margin:5px 0;}
.ud-role{padding:6px 10px;overflow:hidden;text-overflow:ellipsis;}
.user-dropdown .tema-scelta{width:100%;margin:2px 0;}
.user-dropdown .tema-scelta button{flex:1;}

/* ── Chiaro o scuro ──────────────────────────────────────────────────────── */
.tema-scelta{display:inline-flex;background:var(--sfondo-2);border-radius:var(--r-full);padding:3px;gap:2px;}
.tema-scelta button{border:none;background:none;padding:7px var(--s3);border-radius:var(--r-full);
  font-family:var(--font);font-size:13.5px;font-weight:600;color:var(--testo-2);cursor:pointer;
  min-height:34px;transition:background var(--v-veloce),color var(--v-veloce);}
.tema-scelta button:hover{color:var(--testo);}
.tema-scelta button.attivo{background:var(--carta);color:var(--testo);box-shadow:var(--om-1);}
/* La stessa scelta dentro il menu scuro */
.tema-scelta.su-scuro{background:rgba(0,0,0,.3);width:100%;margin:2px 0;}
.tema-scelta.su-scuro button{flex:1;color:var(--nav-testo);}
.tema-scelta.su-scuro button.attivo{background:var(--nav-2);color:var(--nav-att);box-shadow:none;}

/* ── Avvisi (campanella) ─────────────────────────────────────────────────── */
.notif-wrap{position:relative;}
.bell-btn{position:relative;width:38px;height:38px;border-radius:var(--r-md);
  border:1px solid var(--btn-bordo);background:var(--btn);color:var(--testo-2);display:flex;
  align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
  transition:background var(--v-veloce);}
.bell-btn:hover{background:var(--btn-hover);}
.bell-btn svg{width:18px;height:18px;}
.bell-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;
  border-radius:var(--r-full);background:var(--critico);color:#fff;font-size:11.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--carta);}
.notif-panel{position:absolute;top:46px;right:0;width:380px;max-width:calc(100vw - 28px);
  background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-lg);
  box-shadow:var(--om-4);opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;
  transition:var(--v-medio) var(--curva);z-index:120;overflow:hidden;}
.notif-panel.open{opacity:1;transform:none;pointer-events:auto;}
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--linea);font-weight:600;font-size:14px;background:var(--carta-2);}
.notif-go{background:none;border:none;color:var(--acc);font-size:13.5px;font-weight:600;
  cursor:pointer;padding:0;}
.notif-list{max-height:min(430px,60vh);overflow-y:auto;}
.notif-row{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--linea);cursor:pointer;transition:background var(--v-veloce);}
.notif-row:hover{background:var(--velo);}
.notif-row:last-child{border-bottom:none;}
.notif-ico{width:32px;height:32px;border-radius:var(--r-sm);background:var(--sfondo-2);
  display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.notif-t{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.notif-s{font-size:var(--t-mini);color:var(--testo-3);margin-top:2px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.notif-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--acc);}
.notif-dot.d0{background:var(--critico);}
.notif-dot.d1{background:var(--avviso);}
.notif-dot.d2{background:var(--info);}
.notif-row.n-urg0{background:var(--critico-velo);}
.notif-empty{padding:var(--s7) var(--s4);text-align:center;color:var(--testo-3);font-size:14px;}

/* ── Assistente ──────────────────────────────────────────────────────────── */
.ai-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);}
.ai-card{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s4);background:var(--carta);
  border:1px solid var(--linea);border-radius:var(--r-lg);cursor:pointer;box-shadow:var(--om-1);
  transition:box-shadow var(--v-medio),border-color var(--v-medio),transform var(--v-medio);}
.ai-card:hover{border-color:var(--linea-forte);box-shadow:var(--om-2);transform:translateY(-2px);}
.ai-ico{width:38px;height:38px;border-radius:var(--r-md);background:var(--info-velo);
  color:var(--info-testo);display:flex;align-items:center;justify-content:center;font-size:20px;
  flex-shrink:0;}
.ai-ct{font-size:14.5px;font-weight:600;}
.ai-cs{font-size:13.5px;color:var(--testo-3);margin-top:3px;line-height:1.45;}
.ai-typing{display:inline-block;color:var(--testo-3);font-size:14.5px;}
.memo-row{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s3) 0;
  border-bottom:1px solid var(--linea);}
.memo-row:last-child{border-bottom:none;}
.memo-row.fatta .memo-text{color:var(--testo-3);text-decoration:line-through;}
.memo-date{font-size:var(--t-mini);color:var(--testo-3);min-width:64px;padding-top:2px;flex-shrink:0;}
.memo-text{flex:1;font-size:14px;line-height:1.5;white-space:pre-wrap;}
.sign-line{border-top:1px solid var(--linea-forte);margin-bottom:4px;}
/* Il foglio su cui si firma resta bianco anche col tema scuro: quella firma
   finisce stampata nel PDF, è carta, non interfaccia. */
.firma-foglio{border:1px solid var(--linea-forte);border-radius:var(--r-md);overflow:hidden;
  background:#fff;position:relative;box-shadow:inset 0 1px 3px rgba(0,0,0,.06);}
.firma-invito{position:absolute;color:#C6C6C6;pointer-events:none;}

/* ── Barra dei comandi (Ctrl+K) ──────────────────────────────────────────── */
.cmd-overlay{position:fixed;inset:0;background:var(--vetro);backdrop-filter:blur(8px) saturate(.9);
  z-index:400;display:none;align-items:flex-start;justify-content:center;padding:11vh var(--s4) var(--s4);}
.cmd-overlay.open{display:flex;animation:sfuma var(--v-veloce) ease;}
.cmd-box{width:660px;max-width:100%;background:var(--carta);border:1px solid var(--linea);
  border-radius:var(--r-xl);box-shadow:var(--om-4);overflow:hidden;
  animation:cmdIn var(--v-medio) var(--curva);}
@keyframes cmdIn{from{opacity:0;transform:translateY(-12px) scale(.97)}to{opacity:1;transform:none}}
.cmd-riga{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--linea);}
.cmd-riga svg{width:19px;height:19px;color:var(--testo-3);flex-shrink:0;}
.cmd-riga input{flex:1;min-width:0;border:none;outline:none;background:none;font-family:var(--font);
  font-size:17px;color:var(--testo);}
.cmd-riga input::placeholder{color:var(--testo-4);}
.cmd-chiudi{border:none;background:none;font-size:22px;line-height:1;color:var(--testo-3);
  cursor:pointer;padding:0 4px;}
.cmd-chiudi:hover{color:var(--testo);}
.cmd-lista{max-height:min(58vh,480px);overflow-y:auto;padding:6px;}
.cmd-gruppo{padding:var(--s3) var(--s3) 5px;}
.cmd-voce{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;border:none;
  background:none;padding:10px var(--s3);border-radius:var(--r-sm);cursor:pointer;
  font-family:var(--font);color:var(--testo);min-height:42px;transition:background var(--v-veloce);}
.cmd-voce.sel{background:var(--acc-velo);box-shadow:inset 3px 0 0 var(--acc);}
.cmd-t{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex-shrink:0;max-width:60%;}
.cmd-d{font-size:13px;color:var(--testo-3);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;flex:1;}
.cmd-voce.sel .cmd-d{color:var(--acc-testo);}
.cmd-freccia{margin-left:auto;color:var(--testo-3);font-size:18px;line-height:1;}
.cmd-vuoto{padding:var(--s7);text-align:center;color:var(--testo-3);font-size:14.5px;}

/* ── IL CRUSCOTTO ────────────────────────────────────────────────────────────
   La pagina «Andamento». Tre materiali: i numeri con la loro tendenza, le
   scadenze in ordine di urgenza, i grafici. Disegnati con HTML e SVG, senza
   librerie: prendono i colori dai token, quindi seguono il tema. */
.cru-testa{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);
  flex-wrap:wrap;margin-bottom:var(--s5);}
.cru-titolo{font-size:var(--t-lg);font-weight:600;letter-spacing:-.02em;line-height:1.2;}
.cru-sottotitolo{font-size:var(--t-sm);color:var(--testo-3);margin-top:4px;}
.cru-comandi{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;}

/* I numeri in testa. Ogni carta: cosa misura, quanto vale, com'è andata
   rispetto al periodo prima, e la scia degli ultimi dodici mesi sul fondo. */
/* Sei carte: tre e tre. In fila da sei sarebbero strette, e «€ 12.400 ▲ +18%»
   andrebbe a capo proprio dove serve leggerlo. */
.kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s3);margin-bottom:var(--s5);}
.kpi{position:relative;overflow:hidden;display:flex;flex-direction:column;text-align:left;
  background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-lg);
  padding:var(--s3) var(--s4) 30px;box-shadow:var(--om-1);cursor:pointer;font-family:var(--font);
  transition:box-shadow var(--v-medio) var(--curva-morbida),transform var(--v-medio) var(--curva-morbida),
             border-color var(--v-medio);}
.kpi:hover{box-shadow:var(--om-2);transform:translateY(-1px);border-color:var(--linea-forte);}
.kpi:active{transform:translateY(0);}
.kpi-et{font-size:var(--t-micro);font-weight:700;letter-spacing:var(--lettera-larga);
  text-transform:uppercase;color:var(--testo-3);}
.kpi-riga{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap;margin-top:7px;}
.kpi-val{font-size:28px;font-weight:600;letter-spacing:-.03em;
  line-height:1;color:var(--testo);font-variant-numeric:tabular-nums;}
.kpi-delta{font-size:12px;font-weight:700;padding:2px 8px;border-radius:var(--r-full);
  white-space:nowrap;letter-spacing:.01em;}
.kpi-delta.bene{background:var(--ok-velo);color:var(--ok-testo);}
.kpi-delta.male{background:var(--critico-velo);color:var(--critico-testo);}
.kpi-delta.pari{background:var(--neutro-velo);color:var(--neutro-testo);}
.kpi-sub{font-size:var(--t-mini);color:var(--testo-3);margin-top:6px;line-height:1.4;}
.kpi-scia{position:absolute;left:0;right:0;bottom:0;width:100%;height:32px;opacity:.9;}
.kpi-scia-vuota{display:none;}

/* Le scadenze: prima i gruppi per urgenza, poi le righe */
.avv-filtri{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--s3);}
.avv-chip{display:inline-flex;align-items:center;gap:6px;padding:7px var(--s3);
  border-radius:var(--r-full);border:1px solid var(--btn-bordo);background:var(--btn);
  font-family:var(--font);font-size:13px;font-weight:600;color:var(--btn-testo);cursor:pointer;
  min-height:34px;transition:background var(--v-veloce),color var(--v-veloce),box-shadow var(--v-veloce);}
.avv-chip:hover{background:var(--btn-hover);}
.avv-chip b{font-size:14.5px;font-variant-numeric:tabular-nums;}
.avv-chip.rossa b{color:var(--critico);}
.avv-chip.ambra b{color:var(--avviso);}
.avv-chip.attivo{background:var(--acc);color:var(--su-acc);border-color:transparent;
  box-shadow:var(--om-acc);}
.avv-chip.attivo b{color:inherit;}
.avv-lista{max-height:min(52vh,470px);overflow-y:auto;}
.avv-riga{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;padding:9px 4px;
  border-bottom:1px solid var(--linea);cursor:pointer;transition:background var(--v-veloce);}
.avv-riga:last-child{border-bottom:none;}
.avv-riga:hover{background:var(--velo);}
.avv-t{flex:1;min-width:130px;font-size:14px;font-weight:500;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.avv-cl{font-size:var(--t-sm);color:var(--testo-3);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:32%;}
.avv-data{font-size:var(--t-mini);color:var(--testo-4);}

/* Il telaio comune dei grafici: etichette a sinistra, corpo, mesi sotto */
.graf{display:grid;grid-template-columns:38px minmax(0,1fr);
  grid-template-rows:var(--graf-h,168px) auto;column-gap:var(--s2);}
/* Con due misure diverse servono due scale: ore a sinistra, interventi a destra */
.graf.due-assi{grid-template-columns:38px minmax(0,1fr) 22px;}
.graf-y,.graf-y2{position:relative;font-size:11px;color:var(--testo-4);
  font-variant-numeric:tabular-nums;}
.graf-y span,.graf-y2 span{position:absolute;transform:translateY(-50%);white-space:nowrap;}
.graf-y span{right:0;}
.graf-y2 span{left:0;color:var(--info);}
.graf-y span:nth-child(1),.graf-y2 span:nth-child(1){top:0;}
.graf-y span:nth-child(2),.graf-y2 span:nth-child(2){top:50%;}
.graf-y span:nth-child(3),.graf-y2 span:nth-child(3){top:100%;}
.graf-x{grid-column:2;}
.graf-corpo{position:relative;height:100%;}
.graf-griglia{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:space-between;pointer-events:none;}
.graf-griglia i{display:block;height:1px;background:var(--linea);}
.graf-colonne{position:absolute;inset:0;display:flex;gap:5px;align-items:flex-end;}
.graf-col{flex:1;min-width:0;height:100%;display:flex;align-items:flex-end;border:none;
  background:none;padding:0;cursor:pointer;position:relative;border-radius:6px;
  transition:background var(--v-veloce);}
.graf-col:hover{background:var(--velo);}
.graf-barra{width:100%;border-radius:5px 5px 2px 2px;background:var(--acc-velo-2);
  transform-origin:bottom;animation:cresci .45s var(--curva) both;
  transition:filter var(--v-veloce);}
.graf-col.dentro .graf-barra{background:linear-gradient(180deg,var(--acc-vivo),var(--acc));}
.graf-col:hover .graf-barra{filter:brightness(1.08);}
.graf-linea{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;}
.graf-punto{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--info);
  border:2px solid var(--carta);transform:translate(-50%,50%);pointer-events:none;}
.graf-x{display:flex;gap:5px;padding-top:7px;grid-column:2;}
.graf-x span{flex:1;min-width:0;text-align:center;font-size:var(--t-micro);font-weight:600;
  letter-spacing:.03em;color:var(--testo-3);overflow:hidden;white-space:nowrap;}
.graf-x-rado span{font-variant-numeric:tabular-nums;letter-spacing:0;}
/* La fascia dell'obiettivo e la linea della media, nel grafico della conformità */
.graf-banda{position:absolute;left:0;right:0;top:0;bottom:80%;background:var(--acc-velo);}
.graf-media{position:absolute;left:0;right:0;border-top:1px dashed var(--linea-forte);}
.graf-pallino{position:absolute;width:11px;height:11px;padding:0;border-radius:50%;
  border:2px solid var(--carta);transform:translate(-50%,50%);cursor:pointer;
  transition:transform var(--v-veloce);}
.graf-pallino:hover{transform:translate(-50%,50%) scale(1.4);z-index:3;}
.graf-pallino.ok{background:var(--ok);}
.graf-pallino.medio{background:var(--avviso);}
.graf-pallino.basso{background:var(--critico);}
.graf-legenda{display:flex;gap:var(--s4);flex-wrap:wrap;margin-bottom: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{display:inline-block;width:14px;height:3px;border-radius:2px;flex-shrink:0;}
.lg-barra{width:9px!important;height:10px!important;border-radius:3px!important;
  background:linear-gradient(180deg,var(--acc-vivo),var(--acc));}
.lg-linea{background:var(--info);}
.lg-fascia{height:10px!important;background:var(--acc-velo);border:1px solid var(--acc-velo-2);}
.lg-media{height:0!important;border-top:1px dashed var(--linea-forte);}

/* Il fumetto dei grafici: uno solo per tutti */
.bar-item[data-tip]::after,.graf-col[data-tip]::after,.graf-pallino[data-tip]::after{
  content:attr(data-tip);position:absolute;bottom:100%;left:50%;margin-bottom:7px;
  transform:translate(-50%,4px);background:var(--testo);color:var(--carta);font-size:12.5px;
  font-weight:500;padding:6px 10px;border-radius:var(--r-sm);white-space:nowrap;opacity:0;
  pointer-events:none;transition:opacity var(--v-veloce),transform var(--v-veloce);z-index:6;
  box-shadow:var(--om-3);}
.bar-item[data-tip]:hover::after,.graf-col[data-tip]:hover::after,
.graf-pallino[data-tip]:hover::after{opacity:1;transform:translate(-50%,0);}
/* Ai bordi il fumetto rientra, altrimenti lo taglierebbe la scheda */
.graf-col:nth-child(1)[data-tip]::after,.graf-col:nth-child(2)[data-tip]::after,
.graf-pallino:nth-of-type(1)[data-tip]::after{left:0;transform:translate(0,4px);}
.graf-col:nth-child(1)[data-tip]:hover::after,.graf-col:nth-child(2)[data-tip]:hover::after,
.graf-pallino:nth-of-type(1)[data-tip]:hover::after{transform:translate(0,0);}
.graf-col:nth-last-child(1)[data-tip]::after,.graf-col:nth-last-child(2)[data-tip]::after{
  left:auto;right:0;transform:translate(0,4px);}
.graf-col:nth-last-child(1)[data-tip]:hover::after,
.graf-col:nth-last-child(2)[data-tip]:hover::after{transform:translate(0,0);}

/* ══════════════════════════════════════════════════════════════════════════
   5. FORMATI
   ══════════════════════════════════════════════════════════════════════════ */

/* Tablet: il menu diventa un cassetto, il contenuto guadagna 264 px */
@media(max-width:1100px){
  .menu-btn{display:flex;}
  .sidebar{position:fixed;top:0;bottom:0;left:0;z-index:300;transform:translateX(-100%);
    transition:transform var(--v-lento) var(--curva);box-shadow:var(--om-4);}
  body.nav-aperta .sidebar{transform:translateX(0);}
  body.nav-aperta::after{content:'';position:fixed;inset:0;background:var(--vetro);
    backdrop-filter:blur(2px);z-index:290;animation:sfuma var(--v-veloce) ease;}
  .calpage{grid-template-columns:minmax(0,1fr) minmax(0,300px);}
  .g6{grid-template-columns:repeat(3,minmax(0,1fr));}
  .search-testo{min-width:90px;}
  .sett-giorni{grid-template-columns:repeat(3,minmax(0,1fr));}
  .giorno{border-bottom:1px solid var(--linea);}
}
@media(max-width:900px){
  .g2,.g3{grid-template-columns:minmax(0,1fr);}
  .calpage{grid-template-columns:minmax(0,1fr);}
  #cal-panel{position:static;}
  .g6{grid-template-columns:repeat(2,minmax(0,1fr));}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ai-grid{grid-template-columns:minmax(0,1fr);}
  .sgrid{grid-template-columns:repeat(auto-fit,minmax(145px,1fr));}
  .content{padding:var(--s5) var(--s5) var(--s10);}
}

/* Telefono */
@media(max-width:700px){
  /* In alto ci stanno solo il menu e gli strumenti; il titolo prende una riga
     tutta sua, e i pulsanti dell'azione un'altra, larghi quanto lo schermo. */
  .topbar{padding:var(--s3) var(--s4) var(--s2);gap:var(--s2);flex-wrap:wrap;align-items:center;}
  .menu-btn{order:1;}
  .tbr{display:contents;}
  .tbr-strumenti{order:2;margin-left:auto;display:flex;align-items:center;gap:6px;}
  .topbar>div:first-of-type{order:3;width:100%;}
  .tbr-azioni{order:4;width:100%;display:flex;gap:6px;}
  .tbr-azioni .btn{flex:1;}
  .topbar-title{font-size:23px;}
  .topbar-eyebrow{display:none;}
  .topbar-sub{font-size:var(--t-sm);}
  .utente-testi{display:none;}
  .utente-chip{padding:2px;max-width:none;}
  .content{padding:var(--s3) var(--s4) 96px;}
  .search-bar{width:38px;padding:0;justify-content:center;}
  .search-testo,.search-kbd{display:none;}
  .sync-chip{padding:0;width:34px;height:34px;justify-content:center;border-radius:50%;flex-shrink:0;}
  .sync-chip span:last-child{display:none;}
  .bell-btn{width:34px;height:34px;}
  /* I pulsanti dell'azione stanno larghi sulla loro riga, col nome per esteso */
  .tbr-azioni .btn{min-height:44px;}

  .sgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s2);}
  .scard{padding:var(--s3) var(--s4);}
  .sval{font-size:26px;}
  .slabel{font-size:var(--t-mini);margin-bottom:6px;}
  .ssub{font-size:11.5px;}
  /* Col dito non c'è la freccia da premere: si preme tutta la carta */
  .scard-testa{margin-bottom:var(--s2);align-items:flex-start;}
  .scard-testa .chev{display:none;}
  .scard-testa .slabel{white-space:normal;overflow:visible;line-height:1.3;}
  .frow{grid-template-columns:minmax(0,1fr);gap:0;}
  .g6{grid-template-columns:minmax(0,1fr);}

  .oggi-data{font-size:25px;}
  .oggi-hero{padding-bottom:var(--s3);}
  .oggi-azioni{width:100%;}
  .oggi-azioni .btn{flex:1;}
  .oggi-griglia{grid-template-columns:minmax(0,1fr);}
  .oggi-imp{padding:var(--s3);}
  .oggi-imp .azioni{width:100%;}
  .oggi-imp .azioni .btn{flex:1;}
  .oggi-cl-head .azioni{width:100%;}
  .oggi-cl-head .azioni .btn{flex:1 1 44%;}

  /* Le finestre salgono dal basso e prendono lo schermo: così si scrive comodi */
  .modal-overlay{padding:0;align-items:flex-end;}
  .modal{width:100%;max-width:100%;max-height:94vh;border-radius:var(--r-xl) var(--r-xl) 0 0;
    animation:sheet var(--v-lento) var(--curva);}
  @keyframes sheet{from{transform:translateY(30px);opacity:.5}to{transform:none;opacity:1}}
  .mh{padding:var(--s5) var(--s4) var(--s3);position:sticky;top:0;background:var(--carta);z-index:2;
    margin-bottom:var(--s2);border-bottom:1px solid var(--linea);}
  .mbody{padding:0 var(--s4) var(--s5);}
  .azioni-modale{position:sticky;bottom:0;background:var(--carta);padding:var(--s3) 0 var(--s1);
    border-top:1px solid var(--linea);margin-top:var(--s3);}
  .azioni-modale .btn{flex:1;min-height:46px;}

  .cmd-overlay{padding:0;align-items:stretch;}
  .cmd-box{width:100%;border-radius:0;max-width:none;display:flex;flex-direction:column;height:100%;
    animation:none;}
  .cmd-lista{max-height:none;flex:1;}
  .cmd-t{max-width:100%;}
  .cmd-d{display:none;}

  .tabs-big .tab{flex:1 1 100%;padding:12px;}
  .cald{min-height:52px;font-size:12.5px;}
  .cald-chip{font-size:10px;padding:0 3px;}
  .bar-chart{height:120px;gap:6px;}
  .notif{left:var(--s4);right:var(--s4);transform:translateY(80px);max-width:none;}
  .notif.show{transform:translateY(0);}
  .notif-panel{position:fixed;top:60px;left:var(--s3);right:var(--s3);width:auto;}
  .chi{padding:var(--s3);}
  .cbtns{width:100%;}
  .cbtns .cb{flex:1;}
  .empty{padding:var(--s7) var(--s4);}
  .ore-cl-nome{width:40%;}
  .ftipo{flex:1;padding:9px var(--s3);}
  .filtro-campi .fg{flex:1 1 100%;}
  .filtro-campi .btn{flex:1;}
  .sosp-voce .azioni,.sosp-testa .azioni{width:100%;}
  .sosp-voce .azioni .btn,.sosp-testa .azioni .btn{flex:1;}
  /* Sul telefono la pendenza si legge per intero, su due righe */
  .rap-sosp-voce{align-items:flex-start;}
  .rap-sosp-t{white-space:normal;width:100%;order:3;padding-left:28px;margin-top:-2px;}
  .rap-sosp-voce .days-badge{margin-left:auto;}
  .kpi-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s2);}
  .kpi{padding:var(--s3) var(--s3) 24px;}
  .kpi-val{font-size:24px;}
  .kpi-sub{font-size:11px;margin-top:4px;}
  .kpi-scia{height:24px;}
  .cru-titolo{font-size:18px;}
  /* I periodi restano su una riga sola e scorrono col dito: andando a capo
     spezzerebbero le parole in due righe ciascuna */
  .cru-comandi{width:100%;flex-direction:column;align-items:stretch;}
  .cru-comandi .filtro-tipi{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .cru-comandi .filtro-tipi::-webkit-scrollbar{display:none;}
  .cru-comandi .ftipo{flex:0 0 auto;white-space:nowrap;}
  .avv-cl{max-width:100%;}
  .avv-data{display:none;}
  .graf{grid-template-columns:30px minmax(0,1fr);--graf-h:150px;}
  .graf-y{font-size:10px;}
  .graf-colonne,.graf-x{gap:3px;}
  .graf-x span{font-size:10px;}

  .sett-giorni{grid-template-columns:minmax(0,1fr);}
  .giorno{min-height:0;border-right:none;}
  .giorno-piu{opacity:1;}          /* col dito non esiste il passaggio del mouse */
  .sett-conto{margin-left:0;width:100%;}
  .barra-titolo{flex:1;}
}

/* ── Stampa dal browser ──────────────────────────────────────────────────── */
#print-area{display:none;}
@media print{
  body{background:#fff!important;}
  .app,.sidebar,.topbar,.modal-overlay,.notif,.cmd-overlay{display:none!important;}
  #print-area{display:block!important;}
  @page{margin:15mm 15mm 20mm;}
}

/* ── Barre di scorrimento ────────────────────────────────────────────────── */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--linea-forte);border-radius:var(--r-full);
  border:3px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:var(--testo-4);background-clip:content-box;}

/* Chi ha chiesto al sistema meno animazioni non le vede */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;}
}