/* ============================================================================
   TEMA QUADRO — il vestito nuovo di tutte le aree (24/09/2026)

   PERCHE' E' UN FILE A PARTE E NON UNA RISCRITTURA DI stile.css:
   questo foglio si carica DOPO stile.css e riveste le stesse classi. Non tocca
   nemmeno una riga di app.js, quindi la logica del gestionale resta intatta e
   il tema si spegne togliendo un solo <link> da index.html. Se qualcosa non
   convince, si torna indietro in dieci secondi invece di ripescare un backup.

   COSA CAMBIA: fondo a gradiente freddo→caldo, card bianche traslucide a raggio
   grande, pulsanti a pillola con un solo colore d'azione (il blu), pastiglie di
   stato, stati vuoti che si leggono. I colori delle aree restano quelli:
   servono a capire dove si e', e cambiarli confonderebbe chi gia' li conosce.
   ============================================================================ */

:root{
  /* i quattro colori scelti da Jacopo il 24/09/2026 */
  --blu:#2B57F0;
  --blu-tenue:#E7EDFE;
  --giallo:#F2E63F;
  --teal:#4E8A95;
  --nerissimo:#0E0E0E;

  --testo:#14151A;
  --testo2:#7C7F88;
  --testo3:#A9ACB4;
  --riga:rgba(16,18,24,.08);
  --bianco:rgba(255,255,255,.82);
  --grigio:rgba(255,255,255,.55);

  --r:14px;          /* raggio piccolo: campi, pastiglie grandi */
  --r-g:22px;        /* raggio delle schede */
  --ombra:0 18px 40px -26px rgba(20,24,40,.45);
}

/* ——— il fondo: lo stesso del Quadro, su tutta l'app ——— */
body{
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;
  background:
    radial-gradient(120% 90% at 8% 0%, #D6E3F2 0%, transparent 55%),
    radial-gradient(110% 100% at 100% 100%, #E9F2D6 0%, transparent 60%),
    linear-gradient(140deg,#DCE6F1 0%,#E4EDE6 48%,#EDF2DC 100%);
  background-attachment:fixed;
  font-variant-numeric:tabular-nums;
}

/* ——— testata: vetro, non barra grigia ——— */
.testa{
  background:rgba(255,255,255,.62);
  backdrop-filter:saturate(180%) blur(26px);
  border-bottom:1px solid rgba(255,255,255,.7);
}
.testa__titolo{font-weight:700;letter-spacing:-.02em}
.testa::before{height:2px;opacity:.85}

/* ——— menu laterale ——— */
.lato{
  background:rgba(252,252,253,.92);
  backdrop-filter:blur(24px);
  border-right:1px solid rgba(255,255,255,.8);
}
.lato__marchio{letter-spacing:.14em;font-size:11px;font-weight:700;color:var(--testo3)}
.lato a{border-radius:12px;font-weight:500}
.lato a.qui{font-weight:700}

/* ——— barra in basso (telefono) ——— */
.basso{
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(180%) blur(24px);
  border-top:1px solid rgba(255,255,255,.8);
}

/* ——— schede: il mattone di tutte le aree ——— */
.scheda{
  background:var(--bianco);
  border:1px solid rgba(255,255,255,.85);
  border-radius:var(--r-g);
  box-shadow:var(--ombra);
}
.scheda--piatta{box-shadow:none;background:rgba(255,255,255,.62)}
.scheda--chiara{background:rgba(255,255,255,.5);border-color:rgba(255,255,255,.7)}

/* ——— titoli ——— */
.titolo{
  font-size:clamp(26px,4vw,38px);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1.06;
  text-wrap:balance;
}
.sezione{
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--testo3);
}
.occhiello{color:var(--testo2);font-weight:600}

/* ——— pratiche: la riga piu' vista del gestionale ———
   Una riga deve dire in ordine: che cos'e', di chi, a che punto sta. Il codice
   e' un riferimento, non un titolo: resta piccolo e grigio. */
.pr{
  background:var(--bianco);
  border:1px solid rgba(255,255,255,.85);
  border-radius:18px;
  box-shadow:0 10px 26px -20px rgba(20,24,40,.5);
  transition:transform .16s ease, box-shadow .16s ease;
}
.pr:hover{transform:translateY(-1px);box-shadow:0 18px 34px -22px rgba(20,24,40,.6)}
.pr__tit{font-weight:700;letter-spacing:-.012em;line-height:1.3}
.pr__cod{color:var(--testo3);font-weight:700;font-size:11.5px;letter-spacing:.02em}
.pr__meta,.pr__sotto{color:var(--testo2)}

/* ——— pulsanti: un solo colore d'azione ——— */
.btn{
  border-radius:999px;
  font-weight:600;
  letter-spacing:-.005em;
  border:1px solid var(--riga);
  background:rgba(255,255,255,.8);
  transition:background .15s ease, transform .12s ease;
}
.btn:hover{background:#fff}
.btn:active{transform:scale(.985)}
.btn--blu{background:var(--blu);border-color:transparent;color:#fff}
.btn--blu:hover{background:#1F47D8}
.btn--nudo{background:transparent;border-color:transparent;color:var(--testo2)}
.btn--nudo:hover{background:rgba(255,255,255,.7);color:var(--testo)}
.btn--piccolo{font-size:12.5px;padding:7px 13px}
/* il pulsante che cancella non deve mai pesare piu' di quello che fa */
.btn--rosso,.btn--pericolo{background:transparent;border-color:rgba(200,30,30,.25);color:#B8231F}
.btn--rosso:hover,.btn--pericolo:hover{background:rgba(200,30,30,.06)}

/* ——— pastiglie di stato ——— */
.tag{
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.01em;
  padding:4px 10px;
  background:rgba(16,18,24,.06);
  color:var(--testo2);
}
.tag--stato{background:rgba(255,255,255,.9);color:var(--testo2);border:1px solid var(--riga)}
.tag--urgente{background:var(--giallo);color:var(--nerissimo);border-color:transparent}
.pill{border-radius:999px;font-weight:700;font-size:11px}

/* ——— campi e moduli ——— */
.campo,input[type=text],input[type=number],input[type=date],input[type=search],
input[type=email],input[type=tel],select,textarea{
  border-radius:var(--r);
  border:1px solid var(--riga);
  background:rgba(255,255,255,.75);
  font-family:inherit;
}
.campo:focus,input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--blu);
  background:#fff;
  box-shadow:0 0 0 3px rgba(43,87,240,.14);
}
.etichetta{font-size:11.5px;font-weight:600;color:var(--testo2);letter-spacing:.01em}
.gruppo{gap:12px}

/* ——— fogli che salgono dal basso ——— */
.foglio__dentro{
  border-radius:26px 26px 0 0;
  background:rgba(252,252,253,.97);
  backdrop-filter:blur(30px);
}
.foglio__fondo{background:rgba(255,255,255,.7);border-top:1px solid var(--riga)}

/* ——— lo stato vuoto e' un contenuto, non un buco ——— */
.vuoto{
  border-radius:18px;
  background:rgba(255,255,255,.5);
  border:1px dashed rgba(16,18,24,.14);
  color:var(--testo2);
  line-height:1.55;
  padding:22px;
}
.vuoto b,.vuoto strong{display:block;color:var(--testo);margin-bottom:3px}

/* ——— azioni rapide ——— */
.rapido{
  border-radius:16px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 10px 24px -20px rgba(20,24,40,.5);
  font-weight:600;
}
.rapido:hover{background:#fff;transform:translateY(-1px)}

/* ——— numeri e totali ——— */
.tot{font-weight:800;letter-spacing:-.03em}
.conti-mini{color:var(--testo2);font-weight:600}

/* ——— ricerca ——— */
.cerca{
  border-radius:999px;
  background:rgba(255,255,255,.78);
  border:1px solid var(--riga);
}
.cerca:focus-within{border-color:var(--blu);background:#fff}

/* ——— avviso a comparsa ——— */
.avviso{
  border-radius:16px;
  background:var(--nerissimo);
  color:#fff;
  box-shadow:0 20px 44px -22px rgba(0,0,0,.7);
  font-weight:500;
}

/* ——— messaggi della chat ——— */
.msg{border-radius:18px;background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.85)}
.msg__capo{color:var(--testo2);font-weight:700;font-size:11.5px;letter-spacing:.02em}

/* ——— il fuoco da tastiera si deve vedere ovunque ——— */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--blu);
  outline-offset:2px;
  border-radius:8px;
}

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

/* ============================================================================
   LE CARD DELLE AREE — l'impianto del Quadro dentro «Oggi» (24/09/2026)
   Le classi c-blu/c-teal/c-nero/c-gia le mette tema.js alle aree che hanno
   lavoro, in ordine di quanto ne hanno. Le altre restano chiare e piu' piccole.
   ============================================================================ */
.griglia.aree{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:12px;
  margin:18px 0 26px;
}
.area-card{
  position:relative;
  border-left:0!important;          /* via il filetto: adesso e' la card intera a parlare */
  border-radius:20px;
  padding:18px 18px 16px;
  min-height:132px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.85);
  background:rgba(255,255,255,.72);
  box-shadow:0 12px 30px -22px rgba(20,24,40,.55);
  transition:transform .18s ease, box-shadow .18s ease;
  overflow:hidden;
}
.area-card:hover{transform:translateY(-2px);box-shadow:0 20px 38px -22px rgba(20,24,40,.65)}
.area-card .numero{
  font-size:clamp(34px,5.4vw,44px);
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1;
  margin-bottom:6px;
}
.area-card .etichetta{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:-.005em;
  opacity:.72;
  line-height:1.3;
}
/* la freccia in alto a destra, come nelle card del Quadro */
.area-card::after{
  content:"↗";
  position:absolute;top:14px;right:14px;
  width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;
  background:rgba(16,18,24,.06);
  opacity:.55;
}
.area-card.c-blu{background:var(--blu);color:#fff;border-color:transparent}
.area-card.c-teal{background:var(--teal);color:#fff;border-color:transparent}
.area-card.c-nero{background:var(--nerissimo);color:#fff;border-color:transparent}
.area-card.c-gia{background:var(--giallo);color:var(--nerissimo);border-color:transparent}
.area-card.c-blu::after,.area-card.c-teal::after,.area-card.c-nero::after{background:rgba(255,255,255,.2);color:#fff;opacity:.9}
.area-card.c-gia::after{background:rgba(16,18,24,.12);opacity:.9}
/* le aree senza lavoro non rubano spazio ne' attenzione */
.area-card.vuota{
  min-height:88px;
  background:rgba(255,255,255,.42);
  box-shadow:none;
  color:var(--testo3);
}
.area-card.vuota .numero{font-size:24px;font-weight:700;opacity:.5}
.area-card.vuota .etichetta{font-size:11.5px;opacity:.7}
.area-card.vuota::after{display:none}

/* ============================================================================
   TELEFONO — e' il 90% di come si usa il gestionale (24/09/2026)
   Su schermo stretto le misure pensate per il desktop diventano ingombro: raggi
   grandi, padding doppi e titoli enormi mangiano lo schermo e fanno scorrere per
   leggere tre righe. Qui si stringe tutto di un gradino, senza cambiare niente
   di quello che c'e' scritto.
   ============================================================================ */
@media (max-width:720px){
  .griglia.aree{grid-template-columns:1fr 1fr;gap:9px;margin:14px 0 20px}
  .area-card{min-height:104px;padding:13px 13px 12px;border-radius:16px}
  .area-card .numero{font-size:28px;margin-bottom:3px}
  .area-card .etichetta{font-size:11px;line-height:1.25}
  .area-card.vuota{min-height:70px}
  .area-card.vuota .numero{font-size:19px}
  .area-card::after{top:10px;right:10px;width:22px;height:22px;font-size:11px}

  .titolo{font-size:27px;letter-spacing:-.03em}
  .scheda{border-radius:18px;padding:15px}
  .pr{border-radius:16px}
  .pr__tit{font-size:15px;line-height:1.28}
  .sezione{font-size:11px;letter-spacing:.05em;margin-top:18px}

  /* i pulsanti in fila devono stare in riga senza spezzarsi a meta' */
  .rapidi{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .rapidi::-webkit-scrollbar{display:none}
  .rapidi .btn{flex:0 0 auto;scroll-snap-align:start}
  .btn{padding:10px 15px;font-size:14px}
  .btn--piccolo{padding:7px 12px;font-size:12px}

  /* i campi non scendono sotto i 16px: sotto quella misura iOS zooma da solo e
     la pagina resta ingrandita, con i pulsanti fuori schermo */
  .campo,input,select,textarea{font-size:16px}

  /* il foglio che sale dal basso non deve finire sotto la barra di sistema */
  .foglio__dentro{max-height:88dvh;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .basso{padding-bottom:env(safe-area-inset-bottom)}

  /* le azioni di una pratica: a piena larghezza, due per riga, mai una colonna
     di pulsanti larghi quanto lo schermo */
  .azioni{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .azioni .btn{width:100%;justify-content:center}
  .azioni .btn--blu{grid-column:1 / -1}
}
@media (max-width:400px){
  .griglia.aree{grid-template-columns:1fr 1fr;gap:8px}
  .area-card .numero{font-size:25px}
  .titolo{font-size:24px}
}

/* Le etichette sulle card piene: a .72 di opacita' il bianco sul teal scendeva
   sotto la soglia di leggibilita'. Sul colore pieno il testo non si smorza. */
.area-card.c-blu .etichetta,
.area-card.c-teal .etichetta,
.area-card.c-nero .etichetta{opacity:.95;font-weight:600}
.area-card.c-gia .etichetta{opacity:.78}
.area-card.c-blu .numero,
.area-card.c-teal .numero,
.area-card.c-nero .numero{color:#fff}

/* La causa vera: `.etichetta` porta color:var(--testo2), un grigio pensato per il
   fondo chiaro. Dentro una card piena va preso il colore della card, non il grigio. */
.area-card.c-blu .etichetta,.area-card.c-blu .numero,
.area-card.c-teal .etichetta,.area-card.c-teal .numero,
.area-card.c-nero .etichetta,.area-card.c-nero .numero{color:#fff!important}
.area-card.c-gia .etichetta,.area-card.c-gia .numero{color:var(--nerissimo)!important}

/* ============================================================================
   LO STILE DEL SITO: RETTANGOLI SMUSSATI, NON PILLOLE (24/09/2026)
   Su gardenmac.com ogni cosa che si clicca ha raggio 10 px — e' il raggio dei
   pulsanti del tema, di «Aggiungi al carrello» e dei pagamenti rapidi. Il
   gestionale segue lo stesso stilema, cosi' i due non sembrano due aziende.
   Le pastiglie che NON si cliccano (stati, conteggi) restano tonde: la' la forma
   tonda dice «etichetta», non «pulsante».
   ============================================================================ */
.btn,.btn--piccolo,.btn--blu,.btn--nudo,.btn--rosso,.btn--pericolo{border-radius:10px}
.cerca,.campo,input[type=text],input[type=number],input[type=date],input[type=search],
input[type=email],input[type=tel],select,textarea{border-radius:10px}
.rapido{border-radius:12px}
.scheda{border-radius:16px}
.pr{border-radius:14px}
.area-card{border-radius:16px}
.vuoto{border-radius:14px}
.msg{border-radius:14px}
.avviso{border-radius:12px}
.foglio__dentro{border-radius:18px 18px 0 0}
.lato a{border-radius:10px}

/* ============================================================================
   CHAT CON CLAUDE — fondo bianco, e le bolle che si leggono (24/09/2026)
   Difetto introdotto dal tema: `.msg--io` ha il testo bianco, e dandogli il
   fondo chiaro diventava bianco su bianco. I messaggi propri tornano sul blu.
   La chat e' l'unica vista su fondo pieno: e' un testo lungo da leggere, e il
   gradiente sotto le bolle stanca.
   ============================================================================ */
body[data-vista="chat"]{background:#fff}
body[data-vista="chat"] .testa,
body[data-vista="chat"] .basso{background:rgba(255,255,255,.92)}
.msg--io{background:var(--blu)!important;border-color:transparent!important;color:#fff}
.msg--io .msg__capo{color:rgba(255,255,255,.8)}
.msg--io a{color:#fff;text-decoration:underline}
.msg--claude{background:#F5F6F8!important;border-color:rgba(16,18,24,.06)!important;color:var(--testo)}
body[data-vista="chat"] .msg{box-shadow:none}

/* CORREZIONE (24/09/2026): il foglio che sale dal basso aveva max-height 88dvh ma
   overflow visible — cosi' un modulo lungo (nuova pratica: 1161 px di contenuto in 716
   di foglio) usciva dal contenitore e finiva sotto la pagina. Il contenuto deve scorrere
   DENTRO il foglio, e lo scorrimento non deve passare alla pagina sotto quando arriva in
   fondo (overscroll-behavior), o si chiude il foglio per sbaglio scorrendo. */
.foglio__dentro{
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
/* la riga dei pulsanti resta attaccata in fondo mentre il resto scorre */
.foglio__fondo{position:sticky;bottom:0;z-index:2}

/* ——— il modulo che si apre per aggiungere (25/09/2026) ——— */
.gmdlg{border:0;border-radius:18px;padding:0;max-width:560px;width:calc(100% - 28px);
  background:#fff;box-shadow:0 40px 90px -30px rgba(16,18,24,.55);color:var(--testo)}
.gmdlg::backdrop{background:rgba(16,18,24,.45);backdrop-filter:blur(3px)}
.gmdlg form{padding:22px 22px 18px}
.gmdlg h2{margin:0;font-size:21px;font-weight:800;letter-spacing:-.025em}
.gmdlg__lead{margin:6px 0 16px;font-size:13.5px;color:var(--testo2);line-height:1.5}
.gmdlg__campi{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gmdlg__c{display:block}
.gmdlg__c--largo{grid-column:1 / -1}
.gmdlg__c span{display:block;font-size:11.5px;font-weight:600;color:var(--testo2);margin-bottom:5px}
.gmdlg input,.gmdlg select,.gmdlg textarea{width:100%;font:inherit;font-size:16px;padding:10px 12px;
  border:1px solid var(--riga);border-radius:10px;background:rgba(255,255,255,.9);color:inherit}
.gmdlg textarea{resize:vertical;min-height:70px}
.gmdlg__fondo{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--riga)}
.gmdlg__fondo .btn{padding:11px 18px;font-size:14.5px}
@media (max-width:560px){
  .gmdlg{max-width:none;width:100%;margin:auto 0 0;border-radius:18px 18px 0 0;max-height:92dvh}
  .gmdlg form{padding-bottom:calc(18px + env(safe-area-inset-bottom));overflow-y:auto;max-height:92dvh}
  .gmdlg__campi{grid-template-columns:1fr}
  .gmdlg__fondo{position:sticky;bottom:0;background:#fff}
}

/* ============================================================================
   BIANCO E COLORE (25/09/2026) — richiesta di Jacopo

   Il gradiente freddo→caldo su tutte le pagine faceva un rumore di fondo che
   nessun contenuto riusciva a coprire. Da qui in poi la regola e' un'altra, ed
   e' la stessa del sito: la pagina e' BIANCA, il testo e' NERO, e il colore
   compare solo dove dice qualcosa —
     · la TESTATA prende il colore dell'area, cosi' si sa dove si e' senza leggere:
       assistenza rossa con testo bianco, logistica gialla con testo nero;
     · le AZIONI sono blu #5a31f4, lo stesso blu di «Aggiungi al carrello»;
     · le CARD di «Oggi» sono blu piene con il testo bianco.
   Il menu laterale resta com'era (Jacopo, 25/09/2026).
   ============================================================================ */
:root{
  --blu:#5a31f4;             /* il blu del sito: quello di «Aggiungi al carrello» */
  --blu-scuro:#4a27d4;
  --blu-tenue:#EFEAFE;
  --riga:#E6E6EA;            /* il filetto su fondo bianco vuole un grigio vero, non un velo */
  --bianco:#ffffff;
  --testo:#111113;
  --testo2:#5F6169;          /* 6,1:1 sul bianco: il grigio di prima spariva */
  --testo3:#8A8C94;
  --ombra:0 1px 2px rgba(16,18,24,.05);
}

body{
  background:#fff;
  color:var(--testo);
}

/* ——— la testata dice in che area sei ———
   `--area` e `--area-testo` le scrive app.js a ogni cambio di pagina, prendendole
   dai colori del server: assistenza #d70015, logistica #f2b705, e cosi' via. */
.testa{
  background:var(--area,#fff);
  color:var(--area-testo,var(--testo));
  border-bottom:1px solid rgba(0,0,0,.10);
  backdrop-filter:none;
}
.testa::before{display:none}          /* il filetto colorato non serve piu': lo e' tutta la barra */
.testa__titolo{color:inherit;font-weight:700}
/* i due pulsanti della testata: contorno del colore del testo, niente fondo.
   Su rosso escono bianchi, su giallo neri — senza scriverlo due volte. */
.testa__menu,.testa__io{
  color:inherit;
  background:transparent;
  border:1.5px solid currentColor;
  border-radius:10px;
  opacity:.9;
}
.testa__menu:hover,.testa__io:hover{opacity:1;background:rgba(255,255,255,.16)}

/* ——— schede e righe: bianche, con un filetto vero ——— */
.scheda,.pr,.msg,.rapido{
  background:#fff;
  border:1px solid var(--riga);
  box-shadow:none;
}
.pr:hover,.rapido:hover{transform:none;border-color:#D6D6DC;background:#fff}
.scheda--piatta,.scheda--chiara{background:#FAFAFB;border-color:var(--riga)}
.vuoto{background:#FAFAFB;border:1px dashed #D9D9DF;color:var(--testo2)}

/* ——— i campi ——— */
.campo,.cerca,input[type=text],input[type=number],input[type=date],input[type=search],
input[type=email],input[type=tel],select,textarea{
  background:#fff;
  border:1px solid #D9D9DF;
}
.campo:focus,input:focus,select:focus,textarea:focus,.cerca:focus-within{
  border-color:var(--blu);
  box-shadow:0 0 0 3px rgba(90,49,244,.16);
}

/* ——— i pulsanti: uno solo e' blu, gli altri stanno indietro ——— */
.btn{background:#fff;border:1px solid #D9D9DF;color:var(--testo)}
.btn:hover{background:#F5F5F7}
.btn--blu{background:var(--blu);border-color:transparent;color:#fff}
.btn--blu:hover{background:var(--blu-scuro)}
.btn--nudo{background:transparent;border-color:transparent;color:var(--testo2)}
.btn--nudo:hover{background:#F2F2F5;color:var(--testo)}

/* dentro una testata colorata i pulsanti sono a contorno bianco: sul rosso
   dell'assistenza un pulsante bianco pieno sembrerebbe un buco nella barra */
.testa .btn{background:transparent;border-color:currentColor;color:inherit}
.testa .btn:hover{background:rgba(255,255,255,.18)}

/* ——— barra in basso e menu: bianchi pieni, niente vetro su fondo bianco ——— */
.basso{background:#fff;border-top:1px solid var(--riga);backdrop-filter:none}
.lato{background:#fff;border-right:1px solid var(--riga);backdrop-filter:none}
.foglio__dentro{background:#fff;backdrop-filter:none}
.foglio__fondo{background:#fff;border-top:1px solid var(--riga)}

/* ——— «Oggi»: le card delle aree sono blu piene ——— */
.area-card{
  background:var(--blu);
  color:#fff;
  border-color:transparent;
  box-shadow:none;
}
.area-card .numero,.area-card .etichetta{color:#fff!important}
.area-card .etichetta{opacity:.92}
.area-card::after{background:rgba(255,255,255,.22);color:#fff;opacity:.95}
.area-card:hover{transform:translateY(-1px);box-shadow:0 10px 24px -16px rgba(90,49,244,.8)}
/* un'area senza niente da fare non merita una card piena: resta chiara e piu' bassa */
.area-card.vuota{background:#F5F5F7;border:1px solid var(--riga);color:var(--testo3)}
.area-card.vuota .numero,.area-card.vuota .etichetta{color:var(--testo3)!important}

/* le card che tema.js colora di suo restano quelle sul Quadro: qui vince il blu */
.area-card.c-teal,.area-card.c-nero,.area-card.c-gia{background:var(--blu);color:#fff}
.area-card.c-gia .numero,.area-card.c-gia .etichetta{color:#fff!important}

/* ——— pastiglie di stato: grigie su bianco, non velate ——— */
.tag{background:#F2F2F5;color:var(--testo2)}
.tag--stato{background:#fff;border:1px solid var(--riga);color:var(--testo2)}
.tag--urgente,.tag--alta{background:var(--giallo);color:#111;border-color:transparent}
.tag--tardi{background:#FDECEC;color:#B3261E}

/* ——— il marchio e' il logo vero, non una scritta ——— */
.lato__marchio,.entrata .marchio{
  background:url(/logo.png) left center / auto 19px no-repeat;
  height:26px;
  text-indent:-999em;
  overflow:hidden;
  white-space:nowrap;
}
.entrata .marchio{background-position:center;height:30px;background-size:auto 24px;margin-bottom:6px}
.entrata__scheda{background:#fff;border:1px solid var(--riga);box-shadow:0 20px 50px -30px rgba(16,18,24,.4)}
.entrata{background:#fff}

a{color:var(--blu)}
.occhiello{color:var(--testo2)}
.avviso{background:#111113}

/* Una riga di pratica e' un `<a>`: con il blu dei link il titolo usciva colorato e
   sembrava un collegamento dentro il testo. Le righe e le card restano nere. */
.pr,.pr *,.area-card,.area-card *,.lato a,.basso a,.df,.df *{color:inherit}
.pr__cod{color:var(--testo3)}
.pr__meta,.pr__sotto{color:var(--testo2)}

/* Il colore dell'area sta nella testata e nel menu, non sui pulsanti: in Assistenza
   un pulsante rosso accanto a una pastiglia rossa faceva sembrare tutto un allarme.
   In pagina l'azione e' blu, una sola per barra; le altre restano bianche. */
.rapido{background:#fff;border:1px solid #D9D9DF;color:var(--testo);font-weight:600}
.rapidi .rapido:first-child,.rapidi .btn--blu{background:var(--blu);border-color:transparent;color:#fff}
.rapidi .rapido:first-child:hover{background:var(--blu-scuro)}
/* il filtro scelto: blu pieno, cosi' si vede da lontano quale elenco si sta guardando */
.stati button.sel,.filtri button.sel{background:var(--blu);color:#fff;font-weight:600}

/* ——— aria sotto la barra colorata (25/09/2026, Jacopo) ———
   Con la testata piena di colore il titolo attaccato sotto sembrava incollato al bordo:
   ci vuole respiro fra la barra e la prima riga di ogni pagina. */
.vista{padding-top:30px}
.titolo{margin-top:0}
.titolo + .occhiello{margin-top:4px}
@media (min-width:900px){ .vista{padding-top:38px} }

/* Il titolo dell'area era incollato alla fila dei pulsanti (Jacopo, 25/09/2026):
   aria sotto il titolo e sopra la fila, in ogni area. */
.vista > .titolo{margin-bottom:14px}
.vista > .titolo + .rapidi,.vista > .titolo + .occhiello + .rapidi{margin-top:6px}
.rapidi{padding:6px 0 18px}
@media (max-width:720px){ .rapidi{padding:6px 0 16px} }
.rapidi + .cerca,.rapidi + .filtri,.rapidi + .stati{margin-top:4px}
.occhiello{margin-bottom:18px}

/* La voce attiva del menu e della barra in basso era scritta nel colore dell'area: col
   giallo della logistica usciva gialla su bianco, illeggibile. Il colore va sul segno
   (il quadratino, il fondo tenue), il testo resta nero. */
.basso a.qui{color:var(--testo);font-weight:700}
.basso a.qui i{color:var(--area)}
.lato a.qui{color:var(--testo);background:var(--area-tenue)}
.lato a.qui .lato__bollo{box-shadow:0 0 0 2px rgba(0,0,0,.08)}

/* ——— «Oggi»: ogni card ha il colore della sua area (Jacopo, 26/09/2026) ———
   Logistica gialla con testo nero, assistenza rossa con testo bianco, e cosi' via: app.js
   scrive --c e --ct sulla card, presi dai colori del server. Le classi c-blu/c-gia di
   tema.js restano nel markup ma qui non decidono piu' niente. */
.area-card,.area-card.c-blu,.area-card.c-teal,.area-card.c-nero,.area-card.c-gia{
  background:var(--c,var(--blu));color:var(--ct,#fff);border-color:transparent}
.area-card .numero,.area-card .etichetta,
.area-card.c-gia .numero,.area-card.c-gia .etichetta{color:var(--ct,#fff)!important}
.area-card::after{background:rgba(255,255,255,.28);color:var(--ct,#fff)}
.area-card:hover{box-shadow:0 10px 24px -16px rgba(0,0,0,.45)}
/* l'area senza lavoro resta chiara: il colore lo merita solo chi ha qualcosa da fare */
.area-card.vuota,.area-card.vuota.c-blu{background:#F5F5F7;color:var(--testo3)}
.area-card.vuota .numero,.area-card.vuota .etichetta{color:var(--testo3)!important}

/* menu laterale: aria fra il logo e la prima voce (Jacopo, 26/09/2026) */
.lato__marchio{margin-bottom:22px;height:auto;padding-bottom:0}

/* Le classi c-blu/c-teal/c-nero/c-gia di tema.js hanno una specificita' piu' alta e
   rimettevano il testo bianco sulla card gialla della logistica. Qui il testo segue
   SEMPRE il colore dell'area (--ct), qualunque classe porti la card. */
.area-card.c-blu .numero,.area-card.c-blu .etichetta,.area-card.c-teal .numero,.area-card.c-teal .etichetta,
.area-card.c-nero .numero,.area-card.c-nero .etichetta,.area-card.c-gia .numero,.area-card.c-gia .etichetta{color:var(--ct,#fff)!important}
.area-card.c-blu::after,.area-card.c-teal::after,.area-card.c-nero::after,.area-card.c-gia::after{color:var(--ct,#fff);background:rgba(0,0,0,.10)}

/* il logo nella barra: 12 px di altezza, a destra, prima del profilo */
.testa__logo{height:12px;width:auto;margin-left:auto;margin-right:10px;opacity:.95;flex:none}
.testa__logo--bianco{filter:brightness(0) invert(1)}
.testa__io{margin-left:0}

/* Menu laterale senza logo (Jacopo, 26/09/2026): il logo sta nella barra in alto a destra,
   nel menu c'era due volte. Il marchio del menu sparisce del tutto. */
.lato__marchio{display:none}

/* dove sta il pacco: la riga del tracking nella card (26/09/2026) */
.dove-sta{margin:8px 0 2px;padding:9px 12px;border-radius:10px;background:#F5F5F7;font-size:13px;line-height:1.45;color:var(--testo)}
.dove-sta__et{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--testo3);margin-bottom:2px}
.dove-sta small{color:var(--testo2)}