/* =========================================================================
   LA VESTE DEL CRM, ANCHE QUI — 23/08/2026
   «Per CRM, programma di produzione e giacenza puoi usare le impostazioni che
   riporto in questo link, ma con la possibilità che se non mi piace torniamo
   indietro» — Francesco.

   Il CRM ha già la veste Salesforce (`sf-skin.css`): carattere Inter, blu
   #105da1, fondo #f3f3f3, schede bianche con angoli piccoli. Questo file
   porta le STESSE impostazioni sul portale Giacenze — le stesse identiche,
   copiate dalle variabili del CRM, non «somiglianti».

   COME SI TORNA INDIETRO
   Tutto sta sotto `html.tema-sf`. Senza quella classe questo foglio non
   cambia niente: il portale è esattamente com'era. La classe la mette e la
   toglie `tema.js` con l'interruttore in basso a sinistra, e la scelta resta
   su quel telefono o su quel computer. Per togliere la veste a tutti basta
   non caricare più questi due file: non c'è una riga di `style.css` toccata.

   PERCHÉ SOLO VARIABILI
   Il portale è costruito su variabili CSS — `--sfondo`, `--primario`,
   `--raggio`… — quindi la veste è una ridefinizione, non una riscrittura.
   Nessuna regola nuova sui componenti, nessun `!important`: se domani cambia
   un pezzo del portale, la veste lo segue da sola.
   ========================================================================= */

html.tema-sf {
  /* superfici — le stesse del CRM */
  --sfondo:        #f3f3f3;
  --superficie:    #ffffff;
  --bordo:         #e5e5e5;

  /* testo */
  --testo:         #181818;
  --testo-tenue:   #706e6b;

  /* il blu Salesforce, al posto del blu Di Maria */
  --primario:      #105da1;
  --primario-alto: #0b4577;

  /* stati: verde, rosso e ambra di Lightning.
     ATTENZIONE ALL'AMBRA. Il #fe9339 di Salesforce è il colore delle ICONE e
     dei riempimenti, non del testo. Il portale invece usa `--attenzione` per
     SCRIVERE — l'etichetta «sotto scorta» e l'avviso «non stai guardando la
     settimana in corso» — su fondi crema scritti a mano in `style.css`
     (#fdf0dc e #fff8ec). Misurato: #fe9339 su #fdf0dc fa 1,98:1, cioè
     illeggibile; l'ambra da testo di Lightning, #8c4b02, fa 5,98:1.
     In un portale di giacenze «sotto scorta» è l'etichetta che conta di più:
     non può sbiadire per una questione di veste. */
  --accento:       #2e844a;
  --allarme:       #ba0517;
  --attenzione:    #8c4b02;

  /* i colori delle categorie: restano distinguibili ma entrano in tavolozza */
  --finiti:        #105da1;
  --materie:       #7f56d9;
  --imballi:       #fe9339;
  --altro:         #706e6b;

  /* Salesforce usa angoli piccoli (4 px) e ombre appena accennate: le schede
     sembrano fogli appoggiati, non pastiglie. 6 px è il compromesso che tiene
     insieme i due mondi senza far sembrare rotto il portale. */
  --ombra:         0 1px 2px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.07);
  --raggio:        6px;
}

/* IL CARATTERE — la stessa catena del CRM, parola per parola.
   Inter di solito sui computer dell'ufficio non c'è, e allora Windows usa
   Segoe UI: è lo stesso che rende il CRM oggi, quindi i tre portali si
   leggono uguali davvero, non «quasi». Nessun carattere scaricato da
   internet: in rete privata non arriverebbe. */
html.tema-sf,
html.tema-sf body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, sans-serif;
}

/* =========================================================================
   L'INTERRUTTORE
   Piccolo, in basso a sinistra, scolorito finché non lo si tocca: serve una
   volta ogni tanto, non deve rubare spazio al lavoro. Sta fuori da
   `html.tema-sf` perché deve vedersi anche a veste spenta — altrimenti non
   si potrebbe più riaccendere.
   ========================================================================= */
/* SOTTO IL VELO, NON SOPRA. Il pannello di dettaglio è `fixed` e arriva fino
   in fondo (velo 100, pannello 101): con z-index 900 questa pastiglia restava
   davanti al contenuto E cliccabile, così scorrendo la scheda col pollice si
   cambiava veste per sbaglio. 90 la tiene sopra la testata (40) e sotto il
   velo. */
.tema-int {
  position: fixed; left: 10px; bottom: 10px; z-index: 90;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--bordo); background: var(--superficie);
  color: var(--testo-tenue); font: inherit; font-size: 11.5px; font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.10);
  cursor: pointer; opacity: .55; transition: opacity .15s, box-shadow .15s;
}
.tema-int:hover, .tema-int:focus-visible { opacity: 1; box-shadow: 0 2px 8px rgba(0,0,0,.16); }
.tema-int .pall {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--primario); flex: 0 0 auto;
}
/* col dito ci vuole più superficie, e in basso a sinistra non c'è nulla */
@media (max-width: 640px) { .tema-int { padding: 7px 12px; font-size: 12px; opacity: .7; } }
@media print { .tema-int { display: none !important; } }