/* =====================================================================
   MyClubX — foglio di stile unico
   Mobile first: le regole di base valgono per lo smartphone,
   i breakpoint aggiungono ciò che serve su tablet e desktop.

   Breakpoint:
     base          telefono          < 700px
     >= 700px      tablet verticale
     >= 1024px     tablet orizzontale / desktop piccolo
     >= 1280px     desktop
   ===================================================================== */

:root{
  --navy:#0f3a63; --blu:#1b75bc; --blu-chiaro:#29a3dc;
  --rosso:#d6202b; --rosso-soft:#fdecee;
  /* --card-2 e' la superficie «appena piu' scura della scheda»: intestazioni
     di tabella, righe alternate, riquadri dentro un riquadro. Serve una
     variabile perche' scritta a mano (#f7f9fc e cugini) resta bianca anche
     col tema scuro, e una fascia bianca in mezzo a una pagina scura non e'
     un dettaglio: e' una riga illeggibile. */
  --bg:#f4f6f9; --card:#fff; --card-2:#f7f9fc; --bordo:#e4e9f0;
  --testo:#1f2d3d; --testo-2:#63748a; --testo-3:#8e9bad;
  --verde:#12855a; --verde-soft:#e7f6ee;
  --ambra:#b06a00; --ambra-soft:#fdf3e2;
  --r:10px; --ombra:0 1px 2px rgba(16,42,67,.06),0 2px 8px rgba(16,42,67,.05);
  --sidebar:242px; --topbar:52px;

  /* La tavolozza dei grafici: dieci tinte che si distinguono anche
     stampate in bianco e nero, perché una torta finisce in un consiglio
     e i consigli si stampano.
     ⚠️ Sta qui e non nelle pagine: scritte a mano restano identiche col
     tema scuro, e dieci fette accese su un fondo scuro abbagliano. */
  --t1:#1b75bc; --t2:#12855a; --t3:#b06a00; --t4:#8e44ad; --t5:#c0392b;
  --t6:#16a085; --t7:#2c6fad; --t8:#d68910; --t9:#5d6d7e; --t10:#7fb3d5;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--testo);
  font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
code{background:var(--card-2);padding:1px 5px;border-radius:4px;font-size:.85em}
form{margin:0}

/* ---------- LAYOUT ---------- */
.app{display:flex;min-height:100vh}

/* Sidebar: fuori schermo su telefono, fissa da 1024px */
.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:var(--sidebar);
  background:var(--card);border-right:1px solid var(--bordo);
  display:flex;flex-direction:column;overflow-y:auto;z-index:60;
  transform:translateX(-100%);transition:transform .22s ease;
  -webkit-overflow-scrolling:touch;
}
.sidebar.aperta{transform:translateX(0)}
.velo{position:fixed;inset:0;background:rgba(15,35,60,.45);z-index:55;display:none}
.velo.on{display:block}

.main{flex:1;min-width:0;display:flex;flex-direction:column;width:100%}
.wrap{padding:14px;width:100%;max-width:1560px;margin:0 auto}

@media(min-width:1024px){
  .sidebar{transform:none}
  .velo{display:none !important}
  .main{margin-left:var(--sidebar)}
  .wrap{padding:18px 20px 40px}
}

/* ---------- MARCHIO E MENU ---------- */
.brand{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--bordo)}
.brand .logo{width:36px;height:36px;border-radius:9px;flex:0 0 36px;
  background:conic-gradient(from 200deg,var(--rosso),var(--blu-chiaro),var(--blu),var(--rosso));
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px;overflow:hidden}
/* ⚠️ Col logo il fondo colorato sparisce: uno stemma su una sfumatura
   arcobaleno non è un marchio, è un pasticcio. E l'immagine sta DENTRO
   («contain»), non ritagliata: un logo tagliato a metà si nota, e a
   notarlo è chi quel logo l'ha disegnato. */
.brand .logo.conlogo{background:none;border-radius:8px}
.brand .logo img{width:100%;height:100%;object-fit:contain;display:block}
.brand b{display:block;font-size:13px;line-height:1.2}
.brand span{font-size:11px;color:var(--testo-3)}
.brand .chiudi{margin-left:auto;font-size:20px;color:var(--testo-3);cursor:pointer;padding:0 4px}
@media(min-width:1024px){.brand .chiudi{display:none}}

.selettore{margin:10px 12px 4px;padding:8px 10px;border:1px solid var(--bordo);border-radius:8px;
  background:var(--card-2);font-size:12.5px;display:block;cursor:pointer}
.selettore .et{color:var(--testo-2);display:block;font-size:11px}
.selettore b{color:var(--blu)}

.navgroup{margin:13px 0 2px;padding:0 16px;font-size:10px;font-weight:700;
  letter-spacing:.09em;color:var(--testo-3);text-transform:uppercase}
.nav a{display:flex;align-items:center;gap:9px;padding:9px 16px;font-size:14px;color:var(--testo-2);
  border-left:3px solid transparent;cursor:pointer}
.nav a:hover{background:var(--card-2);color:var(--testo)}
.nav a.on{background:#eef5fc;color:var(--blu);border-left-color:var(--blu);font-weight:600}
/* Le icone sono disegni, non caratteri: il colore lo prendono dalla voce
   (currentColor), quindi diventano blu insieme a lei quando e' aperta. */
.nav .ico{width:17px;height:17px;flex:0 0 17px;display:inline-flex;
  align-items:center;justify-content:center;opacity:.75}
.nav a.on .ico{opacity:1}
.nav .ico svg{width:17px;height:17px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
/* Il magazzino dei disegni: sta in pagina una volta sola e non si vede. */
.ico-sprite{position:absolute;width:0;height:0;overflow:hidden}
.nav .new{margin-left:auto;font-size:9px;font-weight:700;background:var(--ambra-soft);
  color:var(--ambra);padding:1px 5px;border-radius:20px}
@media(min-width:1024px){.nav a{padding:6.5px 16px;font-size:13.5px}}

/* ---------- BARRA SUPERIORE ---------- */
.topbar{background:var(--card);border-bottom:1px solid var(--bordo);padding:8px 12px;
  display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:40;min-height:var(--topbar)}
.hamburger{font-size:22px;line-height:1;color:var(--testo-2);cursor:pointer;
  padding:2px 6px;border:1px solid var(--bordo);border-radius:8px;background:var(--card)}
@media(min-width:1024px){.hamburger{display:none}.topbar{padding:9px 20px}}

.cerca{flex:1;min-width:0;position:relative}
.cerca input{width:100%;padding:8px 11px 8px 30px;border:1px solid var(--bordo);
  border-radius:8px;background:var(--card-2);font-size:16px}
@media(min-width:700px){.cerca{max-width:400px}.cerca input{font-size:13px}}
.cerca .lente{position:absolute;left:10px;top:8px;color:var(--testo-3);font-size:13px}
/* Bersaglio dell'invio: serve al DefaultButton del pannello, non si vede. */
.cerca-invio{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);border:0;padding:0}

/* Tutto cio' che sta a destra nella barra: sempre ancorato al bordo,
   anche quando il badge dell'ambiente non c'e' (in produzione). */
.topbar-dx{margin-left:auto;display:flex;align-items:center;gap:10px;flex:0 0 auto}

.ambiente{background:var(--rosso-soft);color:var(--rosso);font-weight:700;font-size:11px;
  padding:4px 10px;border-radius:20px;border:1px solid #f6ccd0;white-space:nowrap}
.solo-grande{display:none}
@media(min-width:700px){.solo-grande{display:inline-flex}}
.tb-ico{color:var(--testo-2);font-size:16px;cursor:pointer;position:relative;padding:0 2px}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:700;flex:0 0 30px;cursor:pointer}
.avatar:hover{background:var(--blu)}

/* ---------- IL MENU DELL'UTENTE ----------
   Quello che riguarda la persona collegata, non la società: la password,
   e l'uscita. Si apre dall'iniziale in alto a destra. */
.utente{position:relative}
.menu-utente{display:none;position:absolute;right:0;top:38px;z-index:120;
  min-width:232px;background:var(--card);border:1px solid var(--bordo);border-radius:var(--r);
  box-shadow:0 8px 28px rgba(16,42,67,.16);overflow:hidden;padding:4px 0}
.menu-utente.aperto{display:block}
.mu-testa{padding:9px 14px 8px;border-bottom:1px solid var(--bordo);margin-bottom:4px}
.mu-testa b{display:block;font-size:13.5px}
.mu-testa span{display:block;font-size:11.5px;color:var(--testo-3);margin-top:1px}
.menu-utente a,.menu-utente .mu-esci{display:flex;align-items:center;gap:9px;
  padding:9px 14px;font-size:13.5px;color:var(--testo-2);cursor:pointer}
.menu-utente a:hover,.menu-utente .mu-esci:hover{background:var(--card-2);color:var(--testo)}
.menu-utente .ico{width:17px;height:17px;flex:0 0 17px;display:inline-flex;
  align-items:center;justify-content:center;opacity:.75}
.menu-utente .ico svg{width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mu-riga{height:1px;background:var(--bordo);margin:4px 0}
.mu-esci{color:var(--rosso)!important}
.mu-esci:hover{background:var(--rosso-soft)!important}
/* La scelta del tema, dentro il menù dell'utente. */
.mu-tema{display:flex;align-items:center;gap:9px;padding:8px 14px;font-size:13.5px;
  color:var(--testo-2)}
.mu-tema .et{flex:0 0 auto}
.mu-tema .scelte{margin-left:auto;display:flex;border:1px solid var(--bordo);
  border-radius:8px;overflow:hidden}
.mu-tema .scelte button{border:0;background:none;padding:5px 9px;font-size:11.5px;
  color:var(--testo-2);cursor:pointer;font-family:inherit}
.mu-tema .scelte button:hover{background:var(--card-2);color:var(--testo)}
.mu-tema .scelte button.on{background:var(--blu);color:#fff}
html[data-tema="scuro"] .mu-tema .scelte button:hover{background:#232b36}

/* ---------- INTESTAZIONE PAGINA ---------- */
.phead{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.phead h1{margin:0;font-size:20px;letter-spacing:-.3px}
.phead p{margin:1px 0 0;color:var(--testo-2);font-size:12.5px}
.phead .az{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap;width:100%}
@media(min-width:700px){.phead h1{font-size:21px}.phead .az{width:auto}}

/* ---------- PULSANTI ---------- */
.btn{border:1px solid var(--bordo);border-radius:8px;padding:9px 14px;font-size:14px;
  cursor:pointer;font-weight:600;background:var(--card);color:var(--testo-2);
  font-family:inherit;line-height:1.3;min-height:38px;display:inline-flex;
  align-items:center;justify-content:center;gap:6px;text-decoration:none}
.btn:hover{background:var(--card-2)}
.btn.pri{background:var(--blu);color:#fff;border-color:var(--blu)}
.btn.pri:hover{background:#15629f}
.btn.dan{background:var(--card);color:var(--rosso);border-color:#f3c2c7}
.btn.sm{padding:5px 10px;font-size:12.5px;min-height:30px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
@media(min-width:700px){.btn{padding:7px 14px;font-size:13px;min-height:34px}}

/* ---------- GRIGLIE DI CARD ---------- */
.grid{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:700px){
  .g2,.g3,.g4{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1024px){
  .g3{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(4,1fr)}
}
.split{display:grid;gap:13px;grid-template-columns:1fr;align-items:start}
@media(min-width:1280px){.split{grid-template-columns:1fr 296px}}

/* ---------- CARD ---------- */
.card{background:var(--card);border:1px solid var(--bordo);border-radius:var(--r);
  padding:14px 15px;box-shadow:var(--ombra);margin-bottom:12px}
.card.p0{padding:0}
.card h3{margin:0 0 2px;font-size:14.5px}
.card .sub{color:var(--testo-2);font-size:12.5px;margin-bottom:11px}
.cardhead{display:flex;align-items:flex-start;gap:10px;margin-bottom:11px;flex-wrap:wrap}
.cardhead .az{margin-left:auto;display:flex;gap:7px}

.kpi{background:var(--card);border:1px solid var(--bordo);border-radius:var(--r);
  padding:12px 14px;box-shadow:var(--ombra)}
.kpi .lab{font-size:11.5px;color:var(--testo-2)}
.kpi .val{font-size:21px;font-weight:700;letter-spacing:-.5px;margin-top:3px}
.kpi .delta{font-size:11px;margin-top:2px;color:var(--testo-3)}
.kpi.ok .val{color:var(--verde)}.kpi.warn .val{color:var(--ambra)}.kpi.bad .val{color:var(--rosso)}

/* ---------- COPPIE ETICHETTA / VALORE ---------- */
.kv{display:flex;justify-content:space-between;gap:10px;padding:6px 0;
  border-bottom:1px solid #f4f6f9;font-size:13px}
.kv:last-child{border-bottom:0}
.kv span{color:var(--testo-2)}
.kv b{font-weight:600;text-align:right}

/* ---------- NOTE DI RILASCIO (Impostazioni → Versione) ---------- */
.note-rilascio{font-size:13px;line-height:1.55}
.note-rilascio h1{font-size:17px;margin:0 0 10px}
.note-rilascio h2{font-size:15px;margin:22px 0 8px;padding-top:12px;
  border-top:1px solid var(--bordo,#e3e8ef)}
.note-rilascio h2:first-of-type{border-top:0;padding-top:0}
.note-rilascio h3{font-size:13.5px;margin:14px 0 6px}
.note-rilascio ul{margin:4px 0 10px;padding-left:20px}
.note-rilascio li{margin:3px 0}
.note-rilascio code{background:var(--card-2);padding:0 4px;border-radius:4px;font-size:12px}
h4.sec{margin:16px 0 7px;font-size:12.5px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--testo-3)}
h4.sec:first-child{margin-top:0}

/* ---------- BARRE DI AVANZAMENTO ---------- */
.bar{height:6px;background:var(--card-2);border-radius:20px;overflow:hidden;margin-top:5px}
.bar i{display:block;height:100%;background:var(--blu);border-radius:20px;min-width:2px}
.bar i.ok{background:var(--verde)}
.bar i.warn{background:var(--ambra)}
.bar i.bad{background:var(--rosso)}

/* ---------- FILTRI A CHIP ---------- */
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:11px}
.chip{border:1px dashed var(--bordo);border-radius:20px;padding:6px 12px;font-size:13px;
  color:var(--testo-2);cursor:pointer;background:var(--card)}
.chip.on{background:#eef5fc;border-style:solid;border-color:#bcd9f2;color:var(--blu);font-weight:600}

/* ---------- TABELLE ----------
   Su telefono ogni riga diventa una scheda: le intestazioni spariscono
   e ogni cella mostra la propria etichetta presa da data-et.          */
.tab-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
table.dati{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--card)}
table.dati th{text-align:left;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--testo-2);padding:9px 11px;border-bottom:1px solid var(--bordo);white-space:nowrap}
table.dati td{padding:10px 11px;border-bottom:1px solid #f1f4f8;vertical-align:middle}
table.dati tbody tr:hover{background:var(--card-2)}
table.dati .num{text-align:right;white-space:nowrap}

/* La riga dei totali di colonna. Sta nel <tfoot> e non nel corpo: su
   telefono le righe diventano schede, e un TOTALE dentro il tbody
   nascerebbe come una scheda in fondo indistinguibile da un gruppo. */
table.dati tfoot td{background:var(--card-2);font-weight:700;
  border-top:2px solid var(--bordo);border-bottom:0}

@media(max-width:699px){
  table.dati thead{display:none}
  table.dati,table.dati tbody,table.dati tr,table.dati td{display:block;width:100%}
  table.dati tr{border:1px solid var(--bordo);border-radius:var(--r);margin-bottom:10px;
    background:var(--card);box-shadow:var(--ombra);padding:4px 0}
  table.dati td{border:0;padding:7px 13px;display:flex;justify-content:space-between;
    align-items:center;gap:12px;text-align:right}
  table.dati td:before{content:attr(data-et);font-size:11px;text-transform:uppercase;
    letter-spacing:.04em;color:var(--testo-3);font-weight:600;text-align:left;flex:0 0 auto}
  table.dati td:empty{display:none}
  table.dati td.principale{display:block;text-align:left;font-size:15px;font-weight:600;
    border-bottom:1px solid #f1f4f8;padding-bottom:9px;margin-bottom:3px}
  table.dati td.principale:before{display:none}
  table.dati .num{text-align:right}
  /* Anche il piede diventa una scheda, ma senza le etichette: le colonne
     nascoste su telefono (.nascondi-mobile) non ci sono, e un totale
     senza sopra la sua colonna non vuol dire niente. */
  table.dati tfoot,table.dati tfoot tr,table.dati tfoot td{display:block;width:100%}
  table.dati tfoot td{background:transparent}
}

.tfoot{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;
  color:var(--testo-2);font-size:12.5px;flex-wrap:wrap;gap:8px}

/* ---------- TESTO SECONDARIO E PALLINO DEL COLORE ----------
   Stavano dentro un <style> locale in sette pagine diverse, copiate a
   mano. Finche' ogni pagina se le portava dietro il difetto non si
   vedeva: si e' visto il giorno che ne e' nata una senza. */
.muto{color:var(--testo-3)}
.pallino{display:inline-block;width:10px;height:10px;border-radius:50%;
  border:1px solid rgba(0,0,0,.18);vertical-align:-1px;margin-right:6px}
.oggi{background:var(--card-2)}

/* L'etichetta di una spunta sta accanto alla casella, non sopra: senza
   questa riga ogni CheckBox va a capo e la casella resta orfana.
   Era anche lei copiata a mano in sei pagine. */
.f input[type=checkbox]+label{display:inline!important;font-weight:400;
  color:var(--testo-1);margin:0}

/* Una spunta su una riga sua, fuori da un .f: la casella e la sua frase
   sullo stesso rigo. Serve dove l'interruttore precede il campo che
   comanda, per esempio «Mandala davvero» sopra il testo dell'email. */
.check-riga{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.check-riga label{display:inline!important;font-weight:400;
  color:var(--testo-1);margin:0}

/* ---------- BADGE ---------- */
.badge{display:inline-block;font-size:11px;font-weight:600;padding:2px 9px;
  border-radius:20px;white-space:nowrap}
.b-ok{background:var(--verde-soft);color:var(--verde)}
.b-warn{background:var(--ambra-soft);color:var(--ambra)}
.b-bad{background:var(--rosso-soft);color:var(--rosso)}
.b-neu{background:var(--card-2);color:var(--testo-2)}
.b-blu{background:#eef5fc;color:var(--blu)}

/* ---------- TAB ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--bordo);margin-bottom:14px;
  overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabs a{padding:10px 13px;font-size:14px;color:var(--testo-2);border-bottom:2px solid transparent;
  cursor:pointer;white-space:nowrap}
.tabs a.on{color:var(--blu);border-bottom-color:var(--blu);font-weight:600}

/* ---------- MESSAGGI ---------- */
/* z-index sopra il velo delle finestre (200): «cessazione senza motivo»
   compariva DIETRO la modale del socio, cioè un errore che blocca il
   salvataggio restava invisibile a chi doveva leggerlo. */
/* ⚠️ z-index basso, non alto. Con 300 l'avviso passava SOPRA le finestre
   modali (.velo-form, 200): aprendo un piano rate la fascia azzurra
   «un codice quota senza piano…» tagliava in due la finestra e copriva
   una riga. Un avviso sta nel flusso della pagina: non ha nessun motivo
   di stare sopra a qualcosa che si apre davanti a tutto. */
.avviso{border-radius:9px;padding:10px 13px;font-size:13px;margin-bottom:13px;display:block;
  position:relative;z-index:1}
.avviso-ok{background:var(--verde-soft);border:1px solid #b7e0c4;color:#0f6b42}
.avviso-err{background:var(--rosso-soft);border:1px solid #f3c2c7;color:#a01722}
.avviso-info{background:#f0f7fd;border:1px solid #cfe4f6;color:#12507f}
.avviso-todo{background:var(--ambra-soft);border:1px solid #f0dcb8;color:#7a4a00}
.vuoto{text-align:center;padding:38px 16px;color:var(--testo-3)}
.vuoto .big{font-size:28px;opacity:.35;margin-bottom:6px}

/* ---------- FORM ---------- */
.f{margin-bottom:13px}
.f label{display:block;font-size:12.5px;font-weight:600;color:var(--testo-2);margin-bottom:5px}
.f input[type=text],.f input[type=password],.f input[type=date],.f input[type=time],
.f input[type=number],.f select,.f textarea,
input.campo,select.campo,textarea.campo{
  width:100%;padding:10px 11px;border:1px solid var(--bordo);border-radius:8px;
  font-size:16px;font-family:inherit;background:var(--card);color:var(--testo)}
@media(min-width:700px){
  .f input,.f select,.f textarea,input.campo,select.campo,textarea.campo{font-size:14px;padding:8px 10px}
}
.f input:focus,.f select:focus,.f textarea:focus,
input.campo:focus,select.campo:focus{outline:none;border-color:var(--blu);box-shadow:0 0 0 3px rgba(27,117,188,.12)}
.f .hint{font-size:11.5px;color:var(--testo-3);margin-top:4px}
/* ⚠️ Una spunta dentro un campo: asp:CheckBox rende <input> e <label>
   come DUE elementi separati, e la regola qui sopra («.f label» a
   blocco) manda la frase a capo — la casella in fondo a una riga e la
   sua etichetta all'inizio di quella dopo. Vanno incartati qui. */
/* Il quadratino del colore accanto alla casella con il codice: sono la
   stessa cosa vista in due modi. */
.colore{display:flex;align-items:center;gap:8px}
.colore input[type=color]{width:42px;height:38px;padding:2px;border:1px solid var(--bordo);
  border-radius:8px;background:var(--card);cursor:pointer;flex:none}
@media(min-width:700px){.colore input[type=color]{height:34px}}
.colore .campo{flex:1;min-width:0}

/* L'assaggio del marchio in Impostazioni: si vede prima di salvare. */
.assaggio{border-radius:9px;padding:11px 13px;font-weight:600;font-size:13.5px;
  display:flex;align-items:center;min-height:38px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.assaggio.spento{background:var(--card-2);color:var(--testo-3);font-weight:400}

.spunta-riga{display:flex;align-items:center;gap:8px;padding-top:4px}
.spunta-riga label{display:inline;margin:0;font-weight:400;font-size:13.5px;
  color:var(--testo);cursor:pointer}
.spunta-riga input[type=checkbox]{width:auto;margin:0}
/* Il testo di un modello si guarda come si guarda un modulo prestampato:
   i segnaposti {COSI} e l'incolonnamento devono stare fermi, e con un
   carattere proporzionale non stanno. */
textarea.mono,input.mono{font-family:Consolas,"SF Mono",Menlo,monospace;font-size:13px;line-height:1.5}
code{font-family:Consolas,"SF Mono",Menlo,monospace;font-size:12.5px;
  background:var(--card-2);padding:1px 5px;border-radius:4px}
/* L'indirizzo pubblico di un modulo di iscrizione: va letto per intero e
   copiato a mano da chi lo incolla su WhatsApp, quindi non si tronca. */
.link-pubblico{background:var(--card-2);border:1px solid var(--bordo);border-radius:7px;
  padding:9px;font-size:12px;color:var(--blu);word-break:break-all;margin-bottom:9px}
/* Un CheckBoxList rende una tabella: senza questo le voci si
   incolonnano appiccicate e le caselle non si allineano al testo. */
.lista-spunte td{padding:5px 16px 5px 0;font-size:13.5px;vertical-align:middle}
.lista-spunte input[type=checkbox]{margin-right:7px;vertical-align:middle}
.lista-spunte label{cursor:pointer}
.f .err{font-size:12px;color:var(--rosso);margin-top:4px;display:block}
/* Righe di campi: una colonna su telefono, due o tre da tablet in su.
   Le regole base stanno PRIMA delle media query, altrimenti a parita' di
   specificita' vincerebbero loro e i campi resterebbero incolonnati. */
.frow{display:grid;grid-template-columns:1fr;gap:11px}
.frow3{display:grid;grid-template-columns:1fr;gap:11px}
.frow4{display:grid;grid-template-columns:1fr;gap:11px}
@media(min-width:700px){
    .frow{grid-template-columns:1fr 1fr}
    .frow3{grid-template-columns:1fr 1fr}
    .frow4{grid-template-columns:1fr 1fr}
}
@media(min-width:1024px){
    .frow3{grid-template-columns:1fr 1fr 1fr}
    .frow4{grid-template-columns:1fr 1fr 1fr 1fr}
}

/* ---------- PANNELLO A SCOMPARSA (form inline) ---------- */
.pannello{background:var(--card);border:1px solid var(--bordo);border-radius:var(--r);
  padding:15px;box-shadow:var(--ombra);margin-bottom:13px}
.pannello h3{margin:0 0 12px;font-size:15px}
.azioni-form{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}

/* ---------- FINESTRA SOPRA LA PAGINA ---------- */
/* Un form che appare dove sta l'occhio invece che in fondo alla pagina:
   chi sta guardando un elenco non deve andarselo a cercare. */
.velo-form{position:fixed;inset:0;background:rgba(15,35,60,.5);z-index:500;
  display:flex;align-items:flex-start;justify-content:center;padding:20px;
  overflow-y:auto}
.finestra{background:var(--card);border-radius:12px;width:100%;max-width:720px;
  box-shadow:0 12px 40px rgba(16,42,67,.28);padding:18px;margin:auto}
.finestra h3{margin:0 0 2px;font-size:16px}
.finestra .sub{color:var(--testo-2);font-size:12.5px;margin-bottom:14px}
.finestra .piede{display:flex;gap:7px;margin-top:16px;flex-wrap:wrap}
.finestra .piede .destra{margin-left:auto;display:flex;gap:7px}
/* Le finestre che contengono un elenco di destinatari: una lista di
   settanta nomi dentro 720px si legge male, e qui la lista E' il
   contenuto — e' quello che si guarda prima di premere. */
.finestra.grande{max-width:980px}
@media(max-width:700px){.finestra{padding:14px}}

/* Il testo dell'email in anteprima: a spaziatura fissa e con gli a capo
   rispettati, perche' e' esattamente come arrivera'. */
.testo-email{background:var(--card);border:1px solid var(--bordo);border-radius:8px;
  padding:11px 13px;margin:8px 0;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:12.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word;
  max-height:220px;overflow:auto;color:var(--testo)}

/* ---------- ELENCO DI SPUNTE ---------- */
/* ⚠️ La CheckBoxList va resa con RepeatLayout="Table": in modalità Flow
   genera la casella e la sua etichetta come elementi fratelli, e
   qualunque impaginazione a colonne li separa mettendo il quadratino
   in una colonna e la scritta in un'altra. La tabella li tiene nella
   stessa cella, dove devono stare. */
.spunte{max-height:240px;overflow:auto;padding:8px 10px;
  border:1px solid var(--bordo);border-radius:9px;background:var(--card-2)}
.spunte table{width:100%;border-collapse:collapse}
.spunte td{padding:3px 14px 3px 0;vertical-align:top;line-height:1.35}
.spunte label{font-weight:400;display:inline;font-size:13px;cursor:pointer}
.spunte input[type=checkbox]{margin:0 6px 0 0;vertical-align:-2px}

/* ---------- UTILITÀ ---------- */
.solo-mobile{display:block}
@media(min-width:1024px){.solo-mobile{display:none}}
.nascondi-mobile{display:none}
@media(min-width:700px){.nascondi-mobile{display:table-cell}}
.pastiglia-colore{display:inline-block;width:16px;height:16px;border-radius:4px;
  border:1px solid rgba(0,0,0,.15);vertical-align:middle;margin-right:6px}

/* ---------- STAMPA ---------- */
@media print{
  .sidebar,.topbar,.velo,.btn,.chips{display:none !important}
  .main{margin:0}
  .card{box-shadow:none;border:1px solid #ccc}
}

/* =====================================================================
   TEMA SCURO

   Non è un secondo foglio di stile: sono le stesse variabili con altri
   valori. Tutto quello che è scritto sopra usa var(--...), quindi
   cambia da solo — e una regola scritta domani lo seguirà senza che
   nessuno se ne debba ricordare.

   ⚠️ Il tema si sceglie nel menù dell'utente e si salva nel database
   (migrazione 039). «Automatico» non è un tema: è la regola che dalle
   19 alle 7 mette lo scuro, perché le riunioni di società sono di sera
   e uno schermo bianco alle undici di notte è una piccola cattiveria.

   ⚠️ Nel buio i colori pieni accecano: il blu, il verde e il rosso qui
   sono le versioni più chiare e meno sature, e i fondi tenui (soft)
   diventano scuri con un filo di colore invece che pastelli.
   ===================================================================== */
html[data-tema="scuro"]{
  --navy:#dbe6f2; --blu:#5aa9e6; --blu-chiaro:#7cc4f0;
  --rosso:#f47c86; --rosso-soft:#3a1f24;
  --bg:#151a21; --card:#1c222b; --card-2:#232b36; --bordo:#2c3540;
  --testo:#e6ebf2; --testo-2:#9fadbe; --testo-3:#78889b;
  --verde:#4cc38a; --verde-soft:#16301f;
  --ambra:#e0a341; --ambra-soft:#332510;
  --ombra:0 1px 2px rgba(0,0,0,.35),0 2px 10px rgba(0,0,0,.28);
  /* Le stesse dieci tinte, schiarite: su fondo scuro i colori pieni
     diventano macchie e le fette confinanti si confondono. */
  --t1:#5aa9e6; --t2:#4cc38a; --t3:#e0a341; --t4:#b57edc; --t5:#f47c86;
  --t6:#4ecdc4; --t7:#7fb3d5; --t8:#f0b95c; --t9:#a2b1c2; --t10:#9ecbee;
}
html[data-tema="scuro"] body{background:var(--bg);color:var(--testo)}
html[data-tema="scuro"] .sidebar,
html[data-tema="scuro"] .topbar,
html[data-tema="scuro"] .menu-utente,
html[data-tema="scuro"] .finestra,
html[data-tema="scuro"] table.dati{background:var(--card)}
html[data-tema="scuro"] .kpi{background:var(--card)}
html[data-tema="scuro"] .nav a:hover,
html[data-tema="scuro"] .menu-utente a:hover,
html[data-tema="scuro"] .menu-utente .mu-esci:hover{background:#232b36}
html[data-tema="scuro"] .nav a.on{background:#1d2a38}
html[data-tema="scuro"] table.dati tbody tr:hover{background:#232b36}
html[data-tema="scuro"] table.dati td{border-bottom-color:#242d38}
html[data-tema="scuro"] .btn{background:var(--card);color:var(--testo)}
html[data-tema="scuro"] .btn:hover{background:#232b36}
html[data-tema="scuro"] .btn.pri{background:#1c6fb0;border-color:#1c6fb0;color:#fff}
html[data-tema="scuro"] .btn.pri:hover{background:#1a5f97}
/* ⚠️ Il prefisso va ripetuto su OGNI selettore dell'elenco: in CSS non si
   distribuisce. Scritto una volta sola, `.f input[type=password]` restava
   senza prefisso e valeva sempre — e la casella della password era nera
   anche col tema chiaro, sulla pagina di accesso, che è la prima cosa che
   si vede. */
html[data-tema="scuro"] .campo,
html[data-tema="scuro"] .f input[type=text],
html[data-tema="scuro"] .f input[type=password],
html[data-tema="scuro"] .f input[type=date],
html[data-tema="scuro"] .f input[type=time],
html[data-tema="scuro"] .f input[type=number],
html[data-tema="scuro"] .f select,
html[data-tema="scuro"] .f textarea{
  background:#131920;color:var(--testo);border-color:var(--bordo)}
html[data-tema="scuro"] .avviso-info{background:#152435;border-color:#22405e;color:#a9cdf0}
html[data-tema="scuro"] .chip{background:var(--card)}
html[data-tema="scuro"] .bar{background:#2a3340}
/* Il velo delle finestre: nel buio dev'essere più fitto, altrimenti la
   pagina sotto resta leggibile e la finestra non stacca. */
html[data-tema="scuro"] .velo-form{background:rgba(0,0,0,.62)}
/* Le immagini e il marchio non si invertono: un logo schiarito è un
   logo sbagliato. */
html[data-tema="scuro"] .brand .logo{filter:none}
/* I fondi chiari scritti a mano prima che il tema esistesse: qui
   vengono ripresi uno per uno. Sono pochi e sono tutti qui. */
html[data-tema="scuro"] .cerca input{background:#131920;color:var(--testo)}
html[data-tema="scuro"] .selettore{background:#131920}
html[data-tema="scuro"] .hamburger{background:var(--card);color:var(--testo-2)}
html[data-tema="scuro"] code{background:#232b36}
html[data-tema="scuro"] .kv{border-bottom-color:#242d38}
html[data-tema="scuro"] .chip.on{background:#1d2a38;border-color:#2c4a68}
html[data-tema="scuro"] .b-neu{background:#2a3340;color:var(--testo-2)}
html[data-tema="scuro"] .b-blu{background:#1d2a38;color:var(--blu)}
html[data-tema="scuro"] .tabs a.on{color:var(--blu)}
html[data-tema="scuro"] .vuoto{color:var(--testo-3)}
html[data-tema="scuro"] .avviso-info{background:#16232f;border-color:#2b4257;color:#9ecbee}
html[data-tema="scuro"] .riordino .gadget:hover .presa{background:#1d2a38}

/* =====================================================================
   MENU RIDOTTO A ICONE

   Da 1024px in su il menù si può stringere: restano le icone, il
   testo sparisce, e il contenuto guadagna 178 pixel — su un portatile
   da 13 pollici, con una tabella larga, si vedono due colonne in più.

   ⚠️ Sotto i 1024px non vale: là il menù è già a scomparsa e ridurlo
   a icone vorrebbe dire una barra sempre presente che ruba spazio a
   uno schermo che ne ha poco.

   ⚠️ Il nome della voce non sparisce, si sposta: resta nel title, che
   il browser mostra passandoci sopra. Un'icona senza nome è un indovinello.
   ===================================================================== */
@media(min-width:1024px){
  .app.ridotto .sidebar{width:64px}
  .app.ridotto .main{margin-left:64px}
  .app.ridotto .nav a{justify-content:center;padding:10px 0;overflow:hidden;white-space:nowrap}
  /* ⚠️ L'etichetta va avvolta in <span class="et">: un testo nudo dentro
     l'<a> non si può nascondere, e restava tagliato a metà accanto
     all'icona invece di sparire. */
  .app.ridotto .nav .et,
  .app.ridotto .nav .new,
  .app.ridotto .navgroup,
  .app.ridotto .brand > div:not(.logo),
  .app.ridotto .selettore,
  .app.ridotto .sidebar > div:last-child{display:none}
  .app.ridotto .brand{justify-content:center;padding:14px 0}
  .app.ridotto .nav .ico{opacity:.9}
  .app.ridotto .nav a.on .ico{opacity:1}
}
.tb-menu{display:none;background:none;border:0;cursor:pointer;color:var(--testo-2);
  padding:4px 6px;border-radius:7px;line-height:0}
.tb-menu:hover{background:var(--card-2);color:var(--testo)}
html[data-tema="scuro"] .tb-menu:hover{background:#232b36}
.tb-menu svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
@media(min-width:1024px){.tb-menu{display:inline-flex;align-items:center}}

/* =====================================================================
   I GADGET DELLA DASHBOARD

   Ognuno è una scheda che si può prendere e spostare. L'ordine è una
   preferenza dell'utente, salvata: la dashboard di chi tiene la
   contabilità non è quella di chi allena.
   ===================================================================== */
.gadgets{display:grid;grid-template-columns:1fr;gap:12px;align-items:start}
@media(min-width:1024px){.gadgets{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1560px){.gadgets{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Un gadget può chiedere tutta la riga: gli elenchi lunghi in mezza
   colonna diventano illeggibili. */
/* ⚠️ Sotto i 1024px la griglia è a una colonna sola: «largo» e «tutta la
   riga» sono la stessa cosa, e non c'è niente da allargare. */
.gadget.largo,.gadget.tuttalariga{grid-column:1 / -1}
@media(min-width:1024px){.gadget.largo{grid-column:span 2}}
@media(min-width:1024px){.gadget.tuttalariga{grid-column:1 / -1}}

/* ⚠️ IL VUOTO SOTTO UN GADGET CORTO

   Con una riga di griglia per gadget, la riga è alta quanto il più alto
   dei tre: accanto a «Ultimi movimenti» un riquadro di quattro voci
   lasciava mezzo schermo bianco, e chi guardava credeva che sotto non ci
   fosse più niente.

   La griglia si fa a righe FINI e ogni gadget dichiara quante ne occupa
   (lo misura il browser, in «impacchetta()»). Con «dense» il gadget che
   viene dopo sale a riempire il buco.

   ⚠️ La classe la mette il JavaScript. Senza, resta la griglia di prima,
   che ha dei vuoti ma è giusta: una dashboard impaginata a metà perché
   uno script non è partito è peggio di una con degli spazi. */
/* ⚠️ «align-items:start» sulla griglia NON è un dettaglio estetico: è
   quello che tiene il gadget alto quanto il suo contenuto invece di
   quanto la riga che gli è stata assegnata. Con «stretch» il primo giro
   di misura leggeva 8 px — l'altezza della riga provvisoria — e li
   scriveva come altezza definitiva: dodici riquadri schiacciati uno
   sull'altro. Si misura il contenuto, non il contenitore. */
.gadgets.impacchettati{grid-auto-rows:8px;grid-auto-flow:row dense;align-items:start}

.gadget{position:relative;display:flex;flex-direction:column}

/* Il corpo che scorre quando l'altezza è stata limitata. Fuori restano
   l'intestazione e il piede: un titolo che scorre via lascia una tabella
   senza nome, e il bottone «Apri…» in fondo serve proprio quando le
   righe sono più di quelle che ci stanno.
   ⚠️ «min-height:0» non è decorativo: senza, dentro un flex un figlio non
   si lascia stringere sotto il suo contenuto e la barra non compare mai. */
.gadget .g-corpo{min-height:0;overflow:auto;max-height:var(--gh,none)}
.gadget[data-h]:not([data-h="0"]) .g-corpo{scrollbar-width:thin}

/* La maniglia dell'altezza: solo in Personalizza, sul bordo di sotto. */
.gadget .maniglia-h{display:none;position:absolute;left:0;right:0;bottom:-3px;
  height:9px;cursor:ns-resize;z-index:3}
.gadget .maniglia-h::after{content:"";position:absolute;left:50%;bottom:3px;
  width:38px;height:3px;margin-left:-19px;border-radius:3px;background:var(--bordo)}
.riordino .gadget .maniglia-h{display:block}
.riordino .gadget .maniglia-h:hover::after{background:var(--blu)}
.gadget.altezzando{outline:2px solid var(--blu);outline-offset:2px}

/* Il bottone che apre le misure pronte, accanto alla crocetta. */
.gadget .misura{display:none;position:absolute;top:8px;right:58px;z-index:3;
  background:none;border:0;font-size:14px;line-height:1;padding:3px 6px;
  border-radius:6px;color:var(--testo-3);cursor:pointer}
.riordino .gadget .misura{display:block}
.gadget .misura:hover{background:#eef5fc;color:var(--blu)}

.gadget .misure-pop{position:absolute;top:32px;right:10px;z-index:6;
  background:var(--card);border:1px solid var(--bordo);border-radius:10px;
  box-shadow:0 8px 24px rgba(16,32,52,.16);padding:10px 11px;min-width:212px}
.misure-pop .tit{font-size:11px;font-weight:600;color:var(--testo-3);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.misure-pop .righe-tit{margin-top:11px}
.misure-pop .scelte{display:flex;gap:5px;flex-wrap:wrap}
.misure-pop .scelte button{border:1px solid var(--bordo);background:var(--card);
  border-radius:16px;padding:4px 10px;font-size:12px;cursor:pointer;
  color:var(--testo-2);font-family:inherit}
.misure-pop .scelte button:hover{border-color:#bcd9f2;color:var(--blu)}
.misure-pop .scelte button.on{background:var(--blu);border-color:var(--blu);color:#fff}
.misure-pop .conta{display:flex;align-items:center;gap:8px}
.misure-pop .conta button{width:28px;height:28px;border:1px solid var(--bordo);
  background:var(--card);border-radius:8px;cursor:pointer;font-size:15px;
  line-height:1;color:var(--testo-2)}
.misure-pop .conta b{min-width:26px;text-align:center;font-size:14px}
.misure-pop .nota{font-size:11px;color:var(--testo-3);margin-top:9px;line-height:1.4}
html[data-tema="scuro"] .gadget .misura:hover{background:#1d2a38}
html[data-tema="scuro"] .misure-pop{box-shadow:0 8px 24px rgba(0,0,0,.45)}

.gadget .presa{display:none;position:absolute;top:10px;right:10px;z-index:2;
  color:var(--testo-3);cursor:grab;padding:2px 5px;border-radius:6px;line-height:1}
.gadget .presa:active{cursor:grabbing}
.riordino .gadget .presa{display:block}
.riordino .gadget{outline:1px dashed var(--bordo);border-radius:var(--r)}
.riordino .gadget:hover .presa{background:#eef5fc;color:var(--blu)}
/* ⚠️ Togliere un gadget deve essere possibile quanto aggiungerlo: senza
   la crocetta la cassetta degli attrezzi non compare mai — nessuno può
   rimettere dentro qualcosa che non è mai potuto uscire. */
.gadget .togli{display:none;position:absolute;top:8px;right:34px;z-index:2;
  background:none;border:0;font-size:17px;line-height:1;padding:2px 6px;
  border-radius:6px;color:var(--testo-3);cursor:pointer}
.riordino .gadget .togli{display:block}
.gadget .togli:hover{background:#fdeceb;color:var(--rosso)}
html[data-tema="scuro"] .gadget .togli:hover{background:#3a2626}
.gadget.trascinato{opacity:.4}
.gadget.bersaglio{outline:2px solid var(--blu);outline-offset:2px}

/* La cassetta degli attrezzi: i gadget spenti, da riaccendere. */
.attrezzi{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.attrezzo{border:1px dashed var(--bordo);border-radius:20px;padding:6px 12px;
  font-size:13px;color:var(--testo-2);cursor:pointer;background:var(--card)}
.attrezzo:hover{border-style:solid;border-color:#bcd9f2;color:var(--blu)}

/* I badge di stato sotto una riga di «Da incassare per gruppo»: compaiono
   solo quando c'è qualcosa da dire, quindi la riga può anche essere vuota
   e non deve lasciare uno spazio. */
.ins-stato:not(:empty){margin:-3px 0 7px;display:flex;gap:5px;flex-wrap:wrap}

/* =====================================================================
   LE TORTE

   Niente librerie: una torta e' un cerchio con un conic-gradient, e la
   legenda e' un elenco. Il gradiente lo scrive il server, perche' i
   numeri li ha lui.
   ===================================================================== */
/* ⚠️ Le colonne si aprono solo dentro un gadget LARGO. Le media query
   guardano la finestra, non il riquadro: su uno schermo grande tre torte
   affiancate finivano dentro una colonna da 400px, con le etichette
   troncate a «CONTRI…». In un gadget stretto si impilano e si leggono. */
.torte{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:700px){
  .gadget.largo .torte.due,.gadget.largo .torte.tre,
  .gadget.tuttalariga .torte.due,.gadget.tuttalariga .torte.tre{
    grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1100px){
  .gadget.largo .torte.tre,.gadget.tuttalariga .torte.tre{
    grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* In un gadget stretto le torte si impilano: allora il disco puo' stare
   piu' piccolo, se no il riquadro diventa una colonna alta e sottile. */
.gadget:not(.largo):not(.tuttalariga) .torta .disco{width:112px;height:112px}
.torta{min-width:0}
.torta h4{margin:0 0 2px;font-size:13.5px;font-weight:600;color:var(--testo)}
.torta .quando{font-size:11px;color:var(--testo-3);margin-bottom:9px}
.torta .disco{width:132px;height:132px;border-radius:50%;margin:0 auto 10px;
  position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
/* Il buco in mezzo: una ciambella si legge meglio di una torta piena,
   e nel buco ci sta il totale, che e' il numero che si cerca per primo. */
.torta .disco::after{content:"";position:absolute;inset:26%;border-radius:50%;
  background:var(--card)}
.torta .centro{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;z-index:1;text-align:center}
.torta .centro b{font-size:14px;line-height:1.15}
.torta .centro span{font-size:10px;color:var(--testo-3)}
.torta .leg{display:flex;flex-direction:column;gap:4px}
.torta .leg div{display:flex;align-items:center;gap:7px;font-size:12px;min-width:0}
.torta .leg i{width:10px;height:10px;border-radius:3px;flex:none}
.torta .leg span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--testo-2)}
.torta .leg b{font-variant-numeric:tabular-nums;font-size:12px}
.torta .vuota{text-align:center;color:var(--testo-3);font-size:12.5px;padding:22px 0}

/* La finestrella per scegliere quali torte mostrare, in Personalizza. */
.torte-scelta{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow:auto}
.torte-scelta label{display:flex;align-items:center;gap:8px;font-size:12.5px;
  cursor:pointer;padding:3px 2px}
.torte-scelta input{margin:0}
.torte-scelta label.pieno{opacity:.45;cursor:not-allowed}

/* Il mini grafico a barre dell'andamento: niente librerie, sono div.

   ⚠️ Le due barre di un mese stanno AFFIANCATE dentro «.coppia», non una
   sopra l'altra. Impilate uscivano dal riquadro — 88 px + 88 px in un box
   alto 110 — e finivano sopra il titolo del gadget. Ma soprattutto una
   pila si legge come un totale, e entrate più uscite sommate non vogliono
   dire niente: quello che conta è la differenza, che infatti è scritta
   sotto ogni mese.

   ⚠️ L'altezza del box è quella delle sole barre (84 px + un po'): il
   mese e il saldo stanno FUORI, altrimenti tornerebbero a rubare spazio
   alle barre e il grafico si schiaccerebbe da solo. */
.barre{display:flex;align-items:flex-end;gap:7px;margin-top:8px}
.barre .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.barre .b .coppia{display:flex;align-items:flex-end;justify-content:center;gap:3px;
  height:88px;width:100%}
.barre .b i{display:block;flex:1;max-width:16px;background:var(--blu);
  border-radius:4px 4px 0 0;min-height:2px}
.barre .b i.uscita{background:var(--ambra)}
.barre .b span{font-size:10.5px;color:var(--testo-3);white-space:nowrap}
.barre .b em{font-style:normal;font-size:10.5px;font-weight:600;white-space:nowrap;
  letter-spacing:-.2px}
.barre .b em.su{color:var(--verde)}
.barre .b em.giu{color:var(--rosso)}

/* Righe che portano a una scheda: si aprono cliccandole. La mano lo dice
   prima del clic — un elenco in cui alcune righe si aprono e altre no,
   senza differenza visibile, si impara a colpi di tentativi. */
table.dati tr.cliccabile{cursor:pointer}
table.dati tr.cliccabile:hover{background:var(--card-2)}
html[data-tema="scuro"] table.dati tr.cliccabile:hover{background:#232b36}

/* Il logo dello sponsor in piccolo, accanto alla sua riga.
   ⚠️ Sta qui e non in Sponsor.aspx: la stessa miniatura serve già
   all'elenco e alla scheda, e due copie della stessa regola sono due
   copie da correggere. */
.cella-logo{width:44px}
.cella-logo img{max-width:40px;max-height:28px;object-fit:contain;
  display:block;border-radius:3px;background:#fff;padding:1px}
.cella-logo .senza{display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:6px;background:var(--card-2);
  color:var(--testo-3);font-size:12px;font-weight:600;
  border:1px dashed var(--bordo)}
.cella-logo.grande{width:auto}
.cella-logo.grande img{max-width:180px;max-height:70px}

/* Il nome del database accanto al badge dell'ambiente: si vede solo in
   build di sviluppo. Rosso quando si sta scrivendo sulla copia della
   produzione — ⚠️ e' l'unico posto da cui si capisce dove si sta
   scrivendo prima di premere Salva, non dopo. */
.ambiente.db { background: var(--card-2); color: var(--muto);
               border: 1px solid var(--bordo); margin-left: 4px; }
.ambiente.db.attenzione { background: var(--rosso, #d6202b); color: #fff;
                          border-color: transparent; font-weight: 600; }