/* =============================================================================
   CRM Manteco - foglio di stile unico
   Nessun build: si scrive CSS e si ricarica.
   Sotto i 900px la colonna laterale diventa una barra in fondo e le tabelle
   diventano schede - a 390px una griglia a sei colonne non si legge.

   Tre giri per arrivare qui. Il primo (nero, oro, maiuscoletto spaziato,
   monospace) sembrava un modello generato. Il secondo (tutto bianco, grigio,
   font di sistema) era asettico e sapeva di vecchio. Questo: Geist per il
   testo, una colonna scura col logo grande, e il colore dove porta
   informazione - le iniziali, i segmenti, le icone dei riquadri, cio' su cui
   si agisce. Niente oro e niente maiuscoletto spaziato restano regole.
   ============================================================================= */

/* Geist variabile: un file solo per tutti i pesi. */
@font-face {
  font-family: Geist;
  src: url("/assets/fonts/geist.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* Superfici: grigio appena azzurro sotto, bianco sopra. I riquadri staccano
     dallo sfondo senza bisogno di ombre pesanti. */
  --fondo: #EEF1F6;
  --superficie: #FFFFFF;
  --sfiora: #F5F7FA;        /* passaggio del mouse */
  --sfiora-scuro: #EBEEF3;
  --bordo: #E3E7ED;
  --bordo-tenue: #EEF1F5;
  --bordo-forte: #CFD5DE;   /* il contorno dei campi */

  /* Testo: tre gradini. Il terzo e' ancora sopra 4,5:1 sul bianco. */
  --testo: #0F1728;
  --testo-2: #475467;
  --testo-3: #667085;
  --testo-4: #A5AEBB;       /* il trattino di un dato che manca */

  /* LA COLONNA - blu inchiostro, quasi nero: da' un'identita' alla pagina e
     fa risaltare il logo bianco. */
  --notte: #0E1B2C;
  --notte-sfiora: rgba(255, 255, 255, .06);
  --notte-attiva: #1B3150;
  --notte-bordo: rgba(255, 255, 255, .08);
  --notte-testo: #AFBCCD;
  --notte-accento: #5B9BFF;

  /* IL SOLA LETTURA - cio' che arriva da un altro sistema: grigio contro il
     bianco. Il blocco Italfabric si riconosce prima di leggere il lucchetto. */
  --sola-lettura: #F7F8FA;

  /* L'ACCENTO - cio' su cui si puo' agire: pulsanti, collegamenti, il fuoco,
     la scheda attiva. */
  --blu: #2563EB; --blu-scuro: #1D4ED8; --blu-tenue: #EAF1FE;

  /* GLI STATI - su contrassegni e avvisi, mai sul testo corrente. */
  --verde: #067647; --verde-tenue: #E7F6EE; --verde-bordo: #BFE5CF;

  /* LE TRE SEZIONI DELLA SCHEDA, e il colore che dice a quale appartiene un
     riquadro: chi e' (viola), come va (verde acqua), la relazione (corallo).
     Tre, non sei: il colore e' della SEZIONE, e porta un'informazione. Non
     sono il blu (quello vuol dire "ci si agisce") ne' verde/ambra/rosso (sono
     degli esiti e degli avvisi). */
  --sez-chi: #7F56D9;
  --sez-come: #0E9384;
  --sez-rel: #E0624F;
  --ambra: #B54708; --ambra-tenue: #FEF3E2; --ambra-bordo: #F9DBAF;
  --rosso: #B42318; --rosso-tenue: #FEEDEB; --rosso-bordo: #F8CBC5; --rosso-scuro: #A81D14;
  /* Due tinte in piu' per le icone dello storico (campionatura, gifting):
     stavano scritte a mano dentro .pallino-*. */
  --viola: #5925DC; --viola-tenue: #EDE7FD;
  --oro: #8A6D1F; --oro-tenue: #F7F1E1;
  --rosa: #A11A5C;  --rosa-tenue: #FCE7F1;
  --ciano: #0E7490; --ciano-tenue: #E0F2F7; --grafite: #344054; --grafite-tenue: #F2F4F7;
  /* quello che il CRM propone da solo (Da censire) */
  --proposto: #0E7468; --proposto-tenue: #D2F1F0; --proposto-fondo: #F2FBFA; --proposto-bordo: #9ED8D2;
  /* La riga di un elenco sotto il mouse, e mentre la si preme. */
  --riga-sfiora: #F0F5FF; --riga-premuta: #E2EAFD;
  /* Le stesse tinte sul blu notte delle testate e della notifica: le versioni
     piene li' non si leggono. */
  --verde-notte: #5FE3A8; --rosso-notte: #FF8FA0; --ambra-notte: #FFD9A8;
  --verde-vivo: #12B76A; --ambra-vivo: #F79009;
  /* Le tinte vive che mancavano (22/10/2026): erano scritte a mano in 4-6 posti ciascuna. */
  --rosa-vivo: #C2266F; --viola-vivo: #7C3AED; --rosso-vivo: #D92D20;
  /* IL MARGINE DI PAGINA, uno solo (22/10/2026): prima ogni sezione si stringeva a una larghezza sua
     (900, 700 o 1100px) e il Radar teneva 32px dove Verifica contatti ne aveva 16. */
  --pagina: var(--s8);

  --ombra: 0 1px 2px rgba(16, 24, 40, .05);
  --ombra-media: 0 2px 4px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
  --ombra-alta: 0 8px 24px rgba(16, 24, 40, .12), 0 2px 6px rgba(16, 24, 40, .06);

  --testo-font: Geist, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* -----------------------------------------------------------------------
   LE MISURE
   Passo di 4px: ogni margine, ogni spazio, ogni altezza e' un suo multiplo.
   Prima c'erano 64 misure diverse decise una alla volta e la pagina non
   sembrava progettata nemmeno quando i singoli pezzi erano a posto.
   ----------------------------------------------------------------------- */
:root {
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;

  --t1: 11px;  /* la barra in fondo sul telefono */
  --t2: 12px;  /* contrassegni, note */
  --t3: 13px;  /* etichette, testo secondario */
  --t4: 14px;  /* il testo di lavoro */
  --t5: 16px;  /* nomi in evidenza dentro un riquadro */
  --t6: 18px;
  --t7: 26px;  /* titoli di pagina */
  --t8: 30px;  /* il nome in testa alla scheda */

  --raggio: 8px;
  --raggio-g: 12px;

  /* La larghezza del menu: la usa anche la barra in vetro, che parte dove
     finisce lui. Erano due numeri (248 e 240) e la barra ci scivolava sotto. */
  --menu: 248px;

  /* LA TESTATA, una per tutte: elenchi, scheda azienda, scheda contatto.
     Erano tre copie della stessa sfumatura, con l'alone gia' diverso fra una e
     l'altra: tre pagine dello stesso programma che non combaciavano. */
  --testata-fondo:
    radial-gradient(760px 340px at 14% -18%, rgba(91, 155, 255, .26), transparent 62%),
    linear-gradient(158deg, #1C3654 0%, #132840 46%, #0A1420 100%);
  --testata-ombra: 0 10px 30px rgba(14, 27, 44, .18), 0 2px 6px rgba(14, 27, 44, .12);

  /* IL FIANCO DI UN RIQUADRO: uno solo, per tutto quello che ci sta dentro -
     testa, campi, elenchi, note, piede. Se un pezzo nuovo usa un valore
     diverso, dentro la stessa carta due cose non si incolonnano, e la pagina
     sembra montata a occhio perche' lo e'. */
  --fianco: var(--s5);

  /* L'altezza di una carta persona. E' un numero solo perche' tutte le carte
     sono alte uguale, ed e' la misura su cui si centrano le frecce del
     carosello: scritta due volte, le frecce scivolano. */
  --carta-persona: 134px;

  --riga: 36px;       /* altezza di una riga campo */
  /* LA PRIMA LINEA DI UNA RIGA CAMPO (05/10/2026): etichetta e valore - testo,
     gettone o "+ aggiungi" - si centrano tutti su questa, cosi' stanno sullo
     stesso filo qualunque cosa contengano. */
  --linea: 32px;
  --gettone: 26px;    /* l'altezza di un gettone */
  --comando: 34px;    /* pulsanti, tendine, caselle */
  --etichetta: 124px; /* la colonna delle etichette */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--testo-font);
  font-size: var(--t4);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  color: var(--testo);
  background: var(--fondo);
}

/* I titoli: stesso carattere, piu' pesante e piu' stretto. */
.d { font-weight: 600; letter-spacing: -.02em; }
/* Codici e numeri: cifre allineate, non un carattere da terminale. */
.m { font-variant-numeric: tabular-nums; }
.k { font-size: var(--t3); color: var(--testo-3); }
.secondario { color: var(--testo-3); }

a { color: var(--blu); text-decoration: none; }
a:hover { color: var(--blu-scuro); }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }
/* Dentro un riquadro (che taglia quello che sborda: angoli, pieghe degli anni)
   l'anello si disegna dentro, se no se ne vedeva un pezzo (14/10/2026). */
.blocco :focus-visible { outline-offset: -2px; }

/* ---------- impianto ---------- */
.app { display: flex; min-height: 100vh; }
.contenuto { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ---------- colonna laterale ---------- */
/* Il menu ha la stessa luce delle testate: un alone freddo in alto a
   sinistra, dietro il logo, e il blu che si chiude quasi nero in basso. Tinta
   piatta accanto a testate sfumate sembrava un pezzo di un'altra applicazione. */
.nav { width: var(--menu); flex-shrink: 0; color: var(--notte-testo);
       background:
         radial-gradient(420px 320px at 0% 0%, rgba(91, 155, 255, .16), transparent 62%),
         linear-gradient(180deg, #12243C 0%, var(--notte) 45%, #0A1420 100%);
       display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.nav-marchio { padding: var(--s8) var(--s5) var(--s6); display: flex; justify-content: center;
               border-bottom: 1px solid var(--notte-bordo); }
/* logo-crm.svg e' logo.svg col riquadro ritagliato sul marchio: l'originale
   ha meta' della larghezza vuota, e anche a 184px il marchio ne occupava 100. */
.nav-marchio img { width: 156px; display: block; }
/* IL MENU RIDOTTO (04/10/2026): da desktop, solo lo stemma e le icone. Il
   pulsante sta in fondo accanto a Esci (.nav-esci): sempre li', mai a comparsa. */
.nav-marchio .nav-logo-stemma { display: none; width: 40px; }
/* VEDI COME (13/10/2026): la tendina sopra l'utente; ambra mentre si guarda come un altro. */
/* VEDI COME (28/10/2026): pulsante con chi stai guardando, pannello che si apre sopra con ricerca e persone per ruolo. */
.vedi-come { position: relative; padding: var(--s2) var(--s3) 0; }
.vedi-come-pulsante { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer;
                      list-style: none; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
                      color: #FFF; transition: background .15s, border-color .15s; }
.vedi-come-pulsante::-webkit-details-marker { display: none; }
.vedi-come-pulsante:hover, .vedi-come[open] > .vedi-come-pulsante { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .22); }
.vedi-come .avatar { width: 26px; height: 26px; font-size: 10px; }
.vedi-come-chi { display: grid; min-width: 0; line-height: 1.2; }
.vedi-come-chi small { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.vedi-come-chi strong { font-size: var(--t3); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vedi-come-freccia { margin-left: auto; flex-shrink: 0; opacity: .6; transition: transform .15s; }
.vedi-come[open] .vedi-come-freccia { transform: rotate(180deg); }
.vedi-come.come-altro .vedi-come-pulsante { border-color: var(--ambra-vivo); box-shadow: 0 0 0 1px var(--ambra-vivo); }
.vedi-come.come-altro .vedi-come-chi small { color: var(--ambra-vivo); }
.vedi-come-pannello { position: absolute; left: var(--s3); bottom: calc(100% + 8px); z-index: 40; width: 280px;
                      max-height: min(70vh, 520px); display: flex; flex-direction: column; overflow: hidden;
                      background: var(--superficie); color: var(--testo); border-radius: 14px;
                      box-shadow: 0 18px 48px rgba(9, 16, 28, .35), 0 2px 6px rgba(9, 16, 28, .15); animation: vedi-come-entra .14s ease-out; }
@keyframes vedi-come-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.vedi-come-cerca { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--bordo); color: var(--testo-2); }
.vedi-come-cerca input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: var(--t3); color: var(--testo); }
.vedi-come-elenco { overflow-y: auto; padding: 6px; }
.vedi-come-ruolo { margin: 10px 8px 4px; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--testo-2); }
.vedi-come-voce { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px;
                  background: none; font: inherit; font-size: var(--t3); color: var(--testo); text-align: left; cursor: pointer; }
.vedi-come-voce:hover, .vedi-come-voce:focus-visible { background: var(--sfiora); outline: 0; }
.vedi-come-voce > span { display: grid; min-width: 0; }
.vedi-come-voce small { font-size: var(--t2); color: var(--testo-2); }
.vedi-come-voce.scelta { background: var(--blu-tenue); font-weight: 600; }
.vedi-come-nessuno { margin: 12px; font-size: var(--t3); color: var(--testo-2); }
html.menu-stretto .vedi-come { padding: var(--s2) var(--s2) 0; }
html.menu-stretto .vedi-come-pulsante { justify-content: center; padding: 8px 0; }
html.menu-stretto .vedi-come-chi, html.menu-stretto .vedi-come-freccia { display: none; }
html.menu-stretto .vedi-come-pannello { left: calc(100% + 6px); bottom: 0; }
.nav-utente .nav-stringi { margin-left: auto; }
.nav-utente .nav-stringi + form { margin-left: 0; }
.nav-stringi svg { transition: transform .25s var(--curva); }
.nav { transition: width .25s var(--curva); }
@media (min-width: 901px) {
  html.menu-stretto { --menu: 76px; }
  html.menu-stretto .nav-marchio { padding: var(--s6) 0 var(--s5); }
  html.menu-stretto .nav-logo-intero { display: none; }
  html.menu-stretto .nav-marchio .nav-logo-stemma { display: block; }
  html.menu-stretto .nav-stringi svg { transform: scaleX(-1); }
  html.menu-stretto .nav-utente .nav-stringi { margin-left: 0; }
  html.menu-stretto .nav-voci { padding-left: var(--s2); padding-right: var(--s2); }
  html.menu-stretto .nav-voce { justify-content: center; padding: 0; }
  html.menu-stretto .nav-voce > span, html.menu-stretto .nav-freccia, html.menu-stretto .nav-figli { display: none; }
  html.menu-stretto .nav-utente { flex-direction: column; padding: var(--s3) 0; gap: var(--s2); }
  html.menu-stretto .nav-nome { display: none; }
  html.menu-stretto .nav-utente form { margin: 0; }
}
.nav-voci { display: flex; flex-direction: column; gap: 4px; padding: var(--s5) var(--s3); }
/* LE VOCI SCORRONO DENTRO LA COLONNA (21/10/2026, Mattia: "quando ci sono troppe voci scoppia.. si vede
   il bianco"): la colonna e' alta quanto lo schermo, e con Statistiche aperto le voci non ci stavano e
   uscivano dal fondo blu. Logo e utente restano fermi, le voci scorrono, con una barra sottile scura. */
@media (min-width: 901px) {
  .nav-voci { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
              scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
  .nav-voci > * { flex-shrink: 0; }   /* le voci tengono la loro altezza: scorre la colonna, non si schiacciano */
  .nav-voci::-webkit-scrollbar { width: 6px; }
  .nav-voci::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 3px; }
}
.nav-voce .nav-corta { display: none; }
.nav-voce { display: flex; align-items: center; gap: var(--s3); height: 44px;
            padding: 0 14px; border-radius: 10px;
            color: var(--notte-testo); font-size: var(--t5); font-weight: 500; letter-spacing: -.01em; }
.nav-voce svg { flex-shrink: 0; width: 18px; height: 18px; opacity: .8; }
.nav-voce:hover { background: var(--notte-sfiora); color: #FFF; }
.nav-voce.attiva { color: #FFF; }
.nav-voce.attiva svg { color: var(--notte-accento); opacity: 1; }
/* IL GRUPPO A SCOMPARSA (Statistiche > Aziende, Articoli). Si apre e si
   chiude con l'altezza (grid 0fr -> 1fr, niente misure in JavaScript), le
   sottovoci scendono una dopo l'altra e la freccina gira. Un filo sottile a
   sinistra lega le sottovoci alla loro voce. */
.nav-gruppo { display: flex; flex-direction: column; }
.nav-freccia { flex-shrink: 0; width: 14px !important; height: 14px !important; margin-left: auto; opacity: .55 !important;
               transition: transform .35s var(--curva), opacity .2s; }
.nav-gruppo.aperto .nav-freccia { transform: rotate(180deg); }
/* Al passaggio la freccina si accende e accenna verso dove andra'. */
.nav-voce:hover .nav-freccia { opacity: .9 !important; transform: translateY(1px); }
.nav-gruppo.aperto .nav-voce:hover .nav-freccia { transform: rotate(180deg) translateY(1px); }
.nav-figli { display: grid; grid-template-rows: 0fr; opacity: 0;
             transition: grid-template-rows .38s var(--curva), opacity .25s ease; }
.nav-gruppo.aperto .nav-figli { grid-template-rows: 1fr; opacity: 1; }
.nav-figli-dentro { position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow: hidden; }
.nav-figli-dentro::before { content: ''; position: absolute; left: 36px; top: 6px; bottom: 6px; width: 1px;
                            background: var(--notte-bordo); }
/* Le sottovoci: a rientro, piu' piccole; quella aperta e' bianca col puntino. */
.nav-figlio { position: relative; display: flex; align-items: center; height: 34px; flex-shrink: 0;
              padding: 0 14px 0 50px; border-radius: 8px; color: var(--notte-testo); font-size: var(--t4); opacity: .8;
              transform: translateY(-6px); transition: transform .38s var(--curva), background .15s, color .15s, opacity .15s; }
.nav-figlio:first-child { margin-top: 2px; }
.nav-gruppo.aperto .nav-figlio { transform: none; }
.nav-gruppo.aperto .nav-figlio:nth-child(2) { transition-delay: .04s, 0s, 0s, 0s; }
.nav-figlio:hover { background: var(--notte-sfiora); color: #FFF; opacity: 1; }
.nav-figlio.attiva { color: #FFF; font-weight: 600; opacity: 1; }
.nav-figlio.attiva::before { content: ''; position: absolute; left: 34px; width: 5px; height: 5px; border-radius: 50%;
                             background: var(--notte-accento); box-shadow: 0 0 0 3px rgba(91, 155, 255, .18); }
/* Riaperto da solo al caricamento (era aperto prima): senza animazione. */
.nav-gruppo.subito .nav-figli, .nav-gruppo.subito .nav-figlio, .nav-gruppo.subito .nav-freccia { transition: none; }
.nav-utente { margin-top: auto; padding: var(--s4); border-top: 1px solid var(--notte-bordo);
              display: flex; align-items: center; gap: var(--s3); }
.nav-nome { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.nav-nome span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-nome span:first-child { font-size: var(--t3); font-weight: 500; color: #FFF; }
.nav-ruolo { font-size: var(--t2); color: var(--notte-testo); }
/* L'ultimo aggiornamento da Italfabric sopra il nome (29/10/2026): una riga sua, piccola, col pallino verde (fresco) o ambra
   (in ritardo). Col menu ridotto resta solo il pallino. */
.nav-utente { flex-wrap: wrap; }
.nav-utente > .nav-nome { flex: 1 1 0; }
.nav-dati { order: -1; flex-basis: 100%; display: inline-flex; align-items: center; gap: 7px; margin-bottom: 2px; font-size: var(--t1); color: var(--notte-testo); font-variant-numeric: tabular-nums; white-space: nowrap; }
html.menu-stretto .nav-dati { flex-basis: auto; justify-content: center; margin: 0 0 var(--s1); font-size: 0; gap: 0; }
.nav-dati::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #32D583; box-shadow: 0 0 0 2px rgba(50, 213, 131, .18); }
.nav-dati.tardi::before { background: #FDB022; box-shadow: 0 0 0 2px rgba(253, 176, 34, .2); }
.nav-dati.tardi { color: #FEC84B; }
.nav-utente form { margin: 0 0 0 auto; }
.nav-esci { width: 30px; height: 30px; border: none; border-radius: var(--raggio);
            background: none; color: var(--notte-testo); cursor: pointer;
            display: flex; align-items: center; justify-content: center; }
.nav-esci:hover { background: var(--notte-sfiora); color: #FFF; }

/* ---------- iniziali colorate ----------
   Il colore lo decide il nome (Layout::tint): la stessa persona ha sempre lo
   stesso colore, e una colonna di iniziali non e' piu' un muro grigio. */
.avatar { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
          display: inline-flex; align-items: center; justify-content: center;
          font-size: var(--t1); font-weight: 600; letter-spacing: .01em; }
.avatar.quadro { border-radius: 7px; }
.avatar.medio { width: 32px; height: 32px; font-size: var(--t2); }
/* La foto del profilo Google sopra le iniziali (menu): se non arriva, restano loro. */
.avatar.con-foto { position: relative; overflow: hidden; }
.avatar-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar.grande { width: 56px; height: 56px; font-size: var(--t6); }
.avatar.grande.quadro { border-radius: var(--raggio-g); }
.con-avatar { display: inline-flex; align-items: center; gap: var(--s3); min-width: 0; max-width: 100%; }
.con-avatar > span:last-child { overflow: hidden; text-overflow: ellipsis; }

/* L'INSEGNA DI UN RIQUADRO (Layout::insegna): dice cos'e' prima del titolo.
   Erano tasselli colorati, uno per riquadro: blu, verde, viola, ambra, rosa.
   Sei colori in una pagina che di colori ne ha gia' addosso - le iniziali,
   i contrassegni, i pallini dello storico - e nessuno dei sei diceva niente:
   il riquadro dei marchi non e' ambra per un motivo, e' ambra e basta.
   Il colore resta dove porta informazione: quello della SEZIONE, che gli da'
   .sez-* piu' sotto. Fuori da una sezione e' grigia. */
.insegna { flex-shrink: 0; display: inline-flex; align-items: center;
           justify-content: center; color: var(--notte); opacity: .45; }

/* ---------- testata delle pagine elenco ----------
   La stessa delle schede (.scheda-testata, .persona-testata): blu notte con
   l'alone, il titolo grande, e dentro la ricerca. I campi sono vetro chiaro
   sul blu, e al fuoco diventano bianchi: si scrive su un campo che si vede. */
.elenco-testata { margin: var(--s6) var(--s8) var(--s5); padding: var(--s6) var(--s6) var(--s5);
                  border-radius: 14px; color: #FFF;
                  background: var(--testata-fondo); box-shadow: var(--testata-ombra); }
.elenco-testata .titolo { color: #FFF; font-size: var(--t8); font-weight: 700; }
.elenco-testata .conta.titolo-conta { background: rgba(255, 255, 255, .12); color: #FFF;
                                font-size: var(--t4); padding: 3px 12px; }
.elenco-testata .filtri { margin: var(--s5) 0 0; gap: var(--s3); }
.elenco-testata .cerca { flex: 1 1 460px; max-width: 640px; }
.elenco-testata .campo { height: 46px; font-size: var(--t4); color: #FFF;
                         background-color: rgba(255, 255, 255, .08);
                         border-color: rgba(255, 255, 255, .16); box-shadow: none; }
.elenco-testata .campo::placeholder { color: rgba(255, 255, 255, .55); }
.elenco-testata .campo:hover { background-color: rgba(255, 255, 255, .12); }
.elenco-testata .campo:focus { background-color: #FFF; color: var(--testo); border-color: #FFF;
                               box-shadow: 0 0 0 4px rgba(91, 155, 255, .35); }
.elenco-testata select.campo option { color: var(--testo); background: #FFF; }
.elenco-testata .cerca input { padding-left: 42px; }
.elenco-testata .cerca svg { left: 15px; width: 17px; height: 17px; color: rgba(255, 255, 255, .6); }
.elenco-testata .cerca:focus-within svg { color: var(--blu); }
.elenco-testata .cerca kbd { right: 12px; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .7);
                             border-color: rgba(255, 255, 255, .2); }
.elenco-testata .spunta { height: 46px; color: rgba(255, 255, 255, .85); font-size: var(--t4); }
.elenco-testata .bottone { height: 46px; padding: 0 var(--s5); font-size: var(--t4); }
.elenco-testata .azzera { color: rgba(255, 255, 255, .75); }
.elenco-testata .azzera:hover { color: #FFF; }
.titolo { margin: 0; font-size: var(--t7); font-weight: 600; letter-spacing: -.025em;
          line-height: 1.2; display: flex; align-items: center; gap: var(--s3); }
/* IL CONTO: una capsula sola per ogni numero accanto a un nome - le code, i
   "+34" dei marchi, le righe di un anno, le carte di una fase. .titolo-conta e'
   la variante grande dei titoli (e il nome che effetti.js anima). */
.conta { flex: 0 0 auto; padding: 1px 8px; border-radius: 999px; background: var(--sfiora-scuro);
         color: var(--testo-2); font-size: var(--t2); font-weight: 600; white-space: nowrap;
         letter-spacing: 0; font-variant-numeric: tabular-nums; }
.conta.titolo-conta { padding: 2px 10px; background: var(--blu-tenue); color: var(--blu-scuro); font-size: var(--t3); }

/* ---------- comandi ---------- */
.bottone { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
           height: var(--comando); padding: 0 var(--s4);
           border: 1px solid transparent; border-radius: var(--raggio); cursor: pointer;
           font-size: var(--t3); font-weight: 600; line-height: 1; white-space: nowrap; }
.bottone-primario { background: linear-gradient(180deg, #3B7BF6, var(--blu)); color: #FFF;
                    box-shadow: var(--ombra); }
.bottone-primario:hover { background: var(--blu-scuro); color: #FFF; }
.bottone-secondario { background: var(--superficie); color: var(--testo);
                      border-color: var(--bordo-forte); box-shadow: var(--ombra); }
.bottone-secondario:hover { background: var(--sfiora); color: var(--testo); }
.bottone.largo { width: 100%; }
/* Un pulsante che non si puo' ancora premere si vede spento ("Inserisci" senza foto, "Invia" senza destinatari). */
.bottone:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; box-shadow: none; transform: none; }

.campo { height: var(--comando); padding: 0 var(--s3); border: 1px solid var(--bordo-forte);
         border-radius: var(--raggio); background: var(--superficie); box-shadow: var(--ombra);
         font-size: var(--t4); color: var(--testo); }
.campo:focus { outline: none; border-color: var(--blu); box-shadow: 0 0 0 3px var(--blu-tenue); }
textarea.campo { height: auto; padding: var(--s2) var(--s3); line-height: 1.5; }
/* La tendina del sistema su Windows e' un rettangolo grigio con una freccia
   nera: in mezzo ai campi arrotondati era la cosa che sapeva piu' di vecchio. */
select.campo, select.campo-al-volo {
  appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; }
/* Comandi che esistono solo con o senza JavaScript: la classe js la mette
   _shell.php prima del primo disegno. */
html:not(.js) .solo-con-js, html.js .solo-senza-js { display: none !important; }
.campo::placeholder { color: var(--testo-3); opacity: 1; }

.filtri { display: flex; gap: var(--s2); margin: var(--s5) var(--s8) var(--s4);
          align-items: center; flex-wrap: wrap; }
.cerca { position: relative; flex: 0 1 400px; min-width: 220px; }
.cerca svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
             color: var(--testo-3); pointer-events: none; }
.cerca input { width: 100%; padding-left: 34px; }
.azzera { font-size: var(--t3); font-weight: 500; padding: 0 var(--s1); }
.spunta { display: flex; align-items: center; gap: 6px; height: var(--comando);
          padding: 0 var(--s1); font-size: var(--t3); color: var(--testo-2);
          white-space: nowrap; cursor: pointer; }
.spunta input { width: 15px; height: 15px; margin: 0; accent-color: var(--blu); cursor: pointer; }

/* ---------- riquadro e tabella ---------- */
/* Lo stesso vestito dei riquadri delle schede (.blocco): niente bordo, un
   filo d'ombra, gli stessi angoli. */
.riquadro { margin: 0 var(--pagina) var(--s4); background: var(--superficie);
            border: none; border-radius: 14px; overflow: hidden;
            box-shadow: 0 0 0 1px rgba(16, 24, 40, .05), 0 1px 2px rgba(16, 24, 40, .04),
                        0 8px 16px -12px rgba(16, 24, 40, .18); }
.tabella-scorre { overflow-x: auto; }
table.elenco { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 940px; }
/* padding-top 3px: il testo cadeva 1,2px sopra il centro (misurato il 30/09),
   e la sfumatura chiara in alto lo faceva sembrare ancora piu' su. */
table.elenco th { height: 46px; padding: 3px var(--s3) 0; text-align: left; white-space: nowrap;
                  font-size: var(--t3); font-weight: 600; color: var(--testo-3);
                  background: linear-gradient(180deg, #FCFDFE, #F5F7FB); border-bottom: 1px solid var(--bordo); }
/* Una riga, una linea: 60px, e il testo di lavoro a 15. A 48 e 14 l'elenco
   era fitto come un foglio di calcolo, ed e' la pagina che si apre per prima.
   Tutto cio' che andava sotto il nome (il codice, "anche in altre aziende")
   ha una colonna sua o sta sulla stessa riga. */
table.elenco td { height: 60px; padding: 0 var(--s3); font-size: 15px; color: var(--testo-2);
                  border-bottom: 1px solid var(--bordo-tenue);
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.elenco th:first-child, table.elenco td:first-child { padding-left: var(--s5); }
table.elenco th:last-child, table.elenco td:last-child { padding-right: var(--s5); }
table.elenco tbody tr:last-child td { border-bottom: none; }
table.elenco td:first-child { color: var(--testo); font-weight: 600; font-size: var(--t5); letter-spacing: -.01em; }
/* Le iniziali delle persone, un gradino piu' grandi: nell'elenco sono la faccia. */
table.elenco .con-avatar { gap: var(--s3); }
table.elenco .con-avatar .avatar { width: 36px; height: 36px; font-size: var(--t3); }
table.elenco .segno { height: 26px; padding: 0 12px; font-size: var(--t3); }
table.elenco a { color: var(--testo); }
table.elenco a:hover { color: var(--blu); }
/* L'email nell'elenco contatti si clicca e apre Gmail: si vede che e' un
   collegamento solo passandoci sopra, per non fare dell'elenco un mare blu. */
table.elenco a.cella-mail { color: var(--testo-2); }
table.elenco a.cella-mail:hover { color: var(--blu); text-decoration: underline; }
/* LE INTESTAZIONI ORDINANO (28/09): tutta la cella e' il link, la freccia
   compare solo sulla colonna attiva. Le altre si scuriscono al passaggio: un
   invito, non un pulsante disegnato su ogni colonna. */
table.elenco th a.ordina { display: inline-flex; align-items: center; gap: 5px; height: 100%;
                           color: inherit; cursor: pointer; }
table.elenco th a.ordina:hover { color: var(--testo); }
table.elenco th a.ordina.attiva { color: var(--testo); }
.ordina-freccia { flex: 0 0 auto; color: var(--blu); }
th.numero a.ordina { flex-direction: row-reverse; }
/* Le colonne di numeri hanno il titolo a destra, sopra le cifre. */
table.elenco th.numero { text-align: right; }
/* Gli scambi e l'ultimo: il numero pieno, il quando piu' tenue. Portano
   tutti e due allo storico. */
table.elenco a.cella-scambi { font-weight: 600; color: var(--testo); }
table.elenco a.cella-ultimo { font-size: var(--t3); color: var(--testo-3); }
/* Il paese negli elenchi a 14, sul filo della bandiera: "Gran Bretagna" ci sta (13/10/2026). */
table.elenco .paese { font-size: var(--t4); }
table.elenco .cella-con { display: block; overflow: hidden; text-overflow: ellipsis; font-size: var(--t2); color: var(--testo-4); }
table.elenco a.cella-scambi:hover, table.elenco a.cella-ultimo:hover { color: var(--blu); }
#storico { scroll-margin-top: var(--s6); }
/* Il logo del marchio principale accanto all'azienda, nell'elenco contatti. */
.cella-azienda { display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; max-width: 100%; }
.cella-azienda > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* IL LOGO IN UNA RIGA: un cerchio bianco col filo, la misura in --d (28 di
   base). Uno solo per elenco contatti, gettone dei marchi e carte della
   pipeline: prima erano tre ricette quasi uguali. Il logo grande delle
   testate e' .marchio-logo, un'altra cosa. */
.logo-tondo { --d: 28px; flex: 0 0 auto; width: var(--d); height: var(--d); object-fit: contain;
              padding: calc(var(--d) * .12); border-radius: 50%; background: var(--superficie);
              box-shadow: inset 0 0 0 1px var(--bordo); }
.numero { text-align: right; font-variant-numeric: tabular-nums; }
th.numero { text-align: right; }
.cella-vuota { color: var(--testo-4); }
/* L'interesse per collaborare (0055): verde alto, ambra medio, grigio nessuno. */
.segno.interesse-high   { background: var(--verde-tenue); color: var(--verde); }
.segno.interesse-medium { background: var(--ambra-tenue); color: var(--ambra); }
.segno.interesse-none   { background: var(--sfiora); color: var(--testo-3); }
/* La probabilita' del cobranding (0056, era "Apertura" fino al 05/10/2026): stessi toni, stessa lettura. */
.segno.probabilita-high   { background: var(--verde-tenue); color: var(--verde); }
.segno.probabilita-medium { background: var(--ambra-tenue); color: var(--ambra); }
.segno.probabilita-low    { background: var(--sfiora); color: var(--testo-3); }

/* I MARCHI NELL'ELENCO. Il logo dove c'e', il nome sempre: il nome e' il dato,
   il logo e' il riconoscimento. Stanno su UNA riga e quello che non ci sta si
   accorcia coi puntini - la riga dell'elenco e' alta 48px e non si allunga per
   un'azienda con sette marchi. */
.marchi-cella { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* Stesso gettone delle schede, solo piu' minuto: un marchio si veste allo
   stesso modo ovunque compaia. Prima l'elenco ne aveva uno tutto suo, grigio,
   e la scheda un altro, azzurro: stessa cosa, due facce. */
.marchio-voce { display: inline-flex; align-items: center; gap: 8px; min-width: 0;
                max-width: 190px; padding: 3px 12px 3px 3px; border-radius: 999px;
                background: var(--blu-tenue); color: var(--blu-scuro);
                font-size: var(--t3); font-weight: 600; }
/* Senza logo il gettone non deve avere il rientro che serve al logo. */
.marchio-voce:not(:has(img)) { padding-left: 12px; }
/* Nella colonna Marchi di Aziende il gettone arriva fino al bordo della colonna. */
.marchi-cella .marchio-voce { max-width: 100%; }
.marchio-voce > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 32px: il logo e' la cosa che si riconosce prima del nome, e nell'elenco -
   cinquanta righe da scorrere - e' l'unico appiglio visivo. A 14 sembrava un
   francobollo sporco, a 18 si intuiva soltanto. */
.marchio-voce .logo-tondo { --d: 32px; }
/* Nell'elenco Marchi il nome e' la cosa da leggere: niente pillola che lo
   taglia a 190px, il cerchio e poi il nome intero. */
.marchio-lista { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.marchio-lista .marchio-logo { --d: 36px; }
/* Nelle liste il logo e' PIATTO: la sfumatura e l'ombra sono per la testata
   scura, su una riga bianca lo facevano sembrare gonfio ("sbombato"). */
.marchio-logo.piccolo, .marchio-lista .marchio-logo, .marchio-riga .marchio-logo {
  background: #FFF; box-shadow: inset 0 0 0 1px var(--bordo); transform: none; }

.allerta { color: var(--ambra); }
.altre { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--sfiora-scuro);
         font-size: var(--t2); color: var(--testo-2); font-weight: 500; }

/* Contrassegni a capsula, in minuscolo normale. */
.segno { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px;
         border-radius: 999px; background: var(--sfiora-scuro); color: var(--testo-2);
         font-size: var(--t2); font-weight: 500; white-space: nowrap; }
/* LA NEWSLETTER DI UN INDIRIZZO (0088): una riga sua. Una tessera col
   megafono (verde se iscritto, grigia se no), la lista e da quando, sotto i
   numeri di lettura. Iscrivi e' un pulsante; togliere sta nel menu "...". */
.riga-campo.riga-nl { grid-template-columns: minmax(0, 1fr); margin: 4px 0; }
.riga-nl > .campo-etichetta.nascosta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nl-riga { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border-radius: var(--raggio-g);
           background: var(--sfiora); }
.nl-riga.acceso { background: linear-gradient(135deg, #EDFBF3, #F7FDF9); }
.nl-icona { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
            background: var(--superficie); color: var(--testo-3); box-shadow: 0 1px 2px rgba(16, 24, 40, .06); }
.nl-riga.acceso .nl-icona { background: linear-gradient(145deg, #34D399, var(--verde-vivo)); color: #FFF; box-shadow: 0 2px 6px rgba(5, 150, 105, .25); }
.nl-testo { display: flex; flex-direction: column; justify-content: center; gap: 1px; flex: 1; min-width: 0; min-height: 28px; }
.nl-titolo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; font-size: var(--t3); line-height: 1.35; color: var(--testo-2); }
.nl-titolo b { font-weight: 600; color: var(--testo); }
.nl-riga.acceso .nl-titolo b { color: var(--verde); }
.nl-titolo small { font-size: var(--t2); color: var(--testo-3); }
.nl-numeri { font-size: var(--t2); color: var(--testo-3); line-height: 1.35; }
.nl-numeri b { font-weight: 600; color: var(--testo-2); font-variant-numeric: tabular-nums; }
.nl-numeri .nl-intero { white-space: nowrap; }
.nl-numeri .allerta { color: var(--rosso); }
.nl-iscrivi { margin: 0 0 0 auto; flex: 0 0 auto; display: flex; align-items: center; }
.nl-iscrivi button { height: 26px; padding: 0 12px; border: 1px solid var(--bordo-forte); border-radius: 999px; background: var(--superficie);
                     font: inherit; font-size: var(--t2); font-weight: 600; color: var(--testo-2); cursor: pointer; }
.nl-iscrivi button:hover { border-color: var(--verde); color: var(--verde); }
details.aggiungi.nl-altro { margin-left: auto; flex: 0 0 auto; }
details.aggiungi.nl-altro > summary { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--raggio);
                                      color: var(--testo-3); font-size: 16px; line-height: 1; }
details.aggiungi.nl-altro > summary:hover, details.aggiungi.nl-altro[open] > summary { color: var(--testo); background: var(--superficie); }
details.aggiungi.nl-altro[open] > .nl-menu { left: auto; right: 0; min-width: 0; width: max-content; padding: 4px; }
.nl-togli { margin: 0; }
.nl-togli button { display: block; width: 100%; padding: 8px 12px; border: 0; border-radius: 6px; background: none; text-align: left;
                   font: inherit; font-size: var(--t3); color: var(--rosso); cursor: pointer; white-space: nowrap; }
.nl-togli button:hover { background: var(--rosso-tenue); }
.segno-ambra { background: var(--ambra-tenue); color: var(--ambra); }
/* Disattivata (0174): grigio, non e' un allarme - e' un'azienda che non si segue piu'. */
.segno-spento { background: var(--sfiora); color: var(--testo-2); }

.vuoto { padding: var(--s12) var(--s6); text-align: center; }
.vuoto p { margin: 0; color: var(--testo-2); }
.vuoto .vuoto-titolo { margin-bottom: var(--s1); font-size: var(--t5); font-weight: 600; color: var(--testo); }

.pagine { display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
          margin: var(--s2) var(--s8) var(--s8); font-size: var(--t4); color: var(--testo-3);
          font-variant-numeric: tabular-nums; }
.pagine-comandi { display: flex; align-items: center; gap: 2px; padding: 3px;
                  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio-g);
                  box-shadow: var(--ombra); }
/* Una pagina: un tasto quadrato. La corrente piena di blu, le frecce ai
   lati, spente agli estremi. Uguale in ogni elenco (Layout::pagination). */
.pagina { min-width: 32px; height: 32px; padding: 0 8px; display: inline-grid; place-items: center;
          border-radius: var(--raggio); font-size: var(--t3); font-weight: 500; color: var(--testo-2);
          text-decoration: none; transition: background .15s, color .15s; }
a.pagina:hover { background: var(--sfiora-scuro); color: var(--testo); }
.pagina.attiva { background: var(--blu); color: #FFF; font-weight: 600; }
.pagina.salto { min-width: 20px; padding: 0; color: var(--testo-4); }
.pagina.freccia { color: var(--testo); }
.pagina.spenta { color: var(--testo-4); opacity: .5; }

/* ---------- avvisi ---------- */
.avviso { display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
          margin: var(--s4) var(--s8) 0; padding: var(--s2) var(--s2) var(--s2) var(--s4);
          min-height: 46px; border: 1px solid var(--verde-bordo); border-radius: var(--raggio);
          background: var(--verde-tenue); color: var(--verde); font-size: var(--t4);
          font-weight: 500; line-height: 1.5; }
.avviso-ambra { background: var(--ambra-tenue); color: var(--ambra); border-color: var(--ambra-bordo); }
.avviso-rosso { background: var(--rosso-tenue); color: var(--rosso); border-color: var(--rosso-bordo); }
.avviso .bottone { flex-shrink: 0; }
/* Un avviso non tocca il riquadro che lo segue. */
.avviso { margin-bottom: var(--s4); }

/* IL CAPOGRUPPO nel Profilo azienda (0070): il nome che porta alla sua
   scheda, due comandi piccoli, e la ricerca che si apre sotto. */
.scegli-gruppo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s3); }
.scegli-gruppo .link-piccolo { padding: 0; border: 0; background: none; font: inherit; font-size: var(--t3);
                               color: var(--testo-3); cursor: pointer; }
.scegli-gruppo .link-piccolo:hover { color: var(--blu); text-decoration: underline; }
.gruppo-membri { font-size: var(--t4); color: var(--testo-2); }
.gruppo-cerca { display: grid; gap: 4px; width: 100%; }
.gruppo-cerca[hidden] { display: none; }
.gruppo-cerca .campo { width: 100%; height: 36px; }
.gruppo-risultati { display: grid; gap: 2px; max-height: 260px; overflow: auto; }
.gruppo-voce { display: grid; text-align: left; padding: 6px 10px; border: 0; border-radius: 8px; background: none;
               font: inherit; cursor: pointer; }
.gruppo-voce:hover, .gruppo-voce:focus-visible { background: var(--sfiora); outline: none; }
.gruppo-voce b { font-weight: 500; font-size: var(--t4); }
.gruppo-voce small { font-size: var(--t2); color: var(--testo-3); }
.gruppo-vuoto { padding: 6px 10px; font-size: var(--t3); color: var(--testo-3); }

/* ---------- da smistare: le code sono schede ---------- */
.code { display: flex; gap: var(--s1); margin: var(--s5) var(--s8) 0;
        border-bottom: 1px solid var(--bordo); }
.coda { position: relative; display: inline-flex; align-items: center; gap: var(--s2); height: 42px;
        padding: 0 var(--s3); margin-bottom: -1px; border-bottom: 2px solid transparent;
        color: var(--testo-3); font-size: var(--t4); font-weight: 500; white-space: nowrap; }
.coda:hover { color: var(--testo); }
.coda.attiva { color: var(--blu); }
.coda.attiva .coda-quante { background: var(--blu-tenue); color: var(--blu-scuro); }
.coda-spiega { margin: var(--s3) var(--s8) var(--s4); font-size: var(--t3); color: var(--testo-3); }

/* Lo stesso vestito del .riquadro accanto, nella stessa pagina. */
.coppia { margin: 0 var(--pagina) var(--s4); background: var(--superficie);
          border: none; border-radius: 14px; overflow: hidden;
          box-shadow: 0 0 0 1px rgba(16, 24, 40, .05), 0 1px 2px rgba(16, 24, 40, .04),
                      0 8px 16px -12px rgba(16, 24, 40, .18); }
.coppia-testa { display: flex; align-items: center; justify-content: space-between;
                gap: var(--s3); padding: var(--s3) var(--s5); border-bottom: 1px solid var(--bordo-tenue); }
.coppia-nome { font-size: var(--t5); font-weight: 600; }
.coppia-motivo { font-size: var(--t3); color: var(--testo-3); }
.coppia-corpo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.meta-coppia { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4) var(--s5); min-width: 0; }
.meta-coppia + .meta-coppia { border-left: 1px solid var(--bordo-tenue); }
.meta-testa { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap;
              margin-bottom: var(--s1); }
.meta-testa a { font-weight: 600; }
.meta-riga { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--s3); }
.valore { color: var(--testo); overflow-wrap: anywhere; }
.meta-coppia form { margin-top: auto; padding-top: var(--s2); }
.coppia-piede { display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
                padding: var(--s3) var(--s5); background: var(--sfiora);
                border-top: 1px solid var(--bordo-tenue); }
.coppia-piede .minuta { max-width: 520px; }
.minuta { font-size: var(--t3); color: var(--testo-3); line-height: 1.5; overflow-wrap: anywhere; }

/* ---------- moduli ---------- */
.modulo { display: flex; flex-direction: column; gap: var(--s4);
          margin: var(--s5) var(--s8) var(--s8); max-width: 720px; }
.modulo label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.modulo .k { font-weight: 500; color: var(--testo-2); }
.modulo .campo { width: 100%; height: 38px; }
.modulo textarea.campo { height: auto; resize: vertical; }
.aiuto { font-size: var(--t2); color: var(--testo-3); line-height: 1.5; }

.scelte { display: flex; flex-direction: column; padding: var(--s2); }
/* label.scelta e non .scelta: ".modulo label" la metterebbe in colonna. */
.modulo label.scelta { display: grid; grid-template-columns: 16px auto 1fr; align-items: center;
          gap: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--raggio); cursor: pointer; }
.scelta:hover, .scelta.attiva { background: var(--sfiora); }
.scelta input { width: 16px; height: 16px; margin: 0; accent-color: var(--blu); cursor: pointer; }

.modulo-piede { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.modulo-piede .minuta { flex: 1; min-width: 200px; margin-left: var(--s2); }

/* ---------- scheda (persona e azienda) ---------- */
/* LA TESTATA DELLA SCHEDA CONTATTO: lo stesso masthead dell'azienda.
   Due schede dello stesso programma non possono avere due testate diverse -
   una blu inchiostro e una bianca - se no l'applicazione parla due lingue. */
.persona-testata { display: flex; align-items: center; justify-content: space-between;
                   gap: var(--s4); flex-wrap: wrap;
                   margin: var(--s6) var(--s8) var(--s5);
                   padding: var(--s5) var(--s6) var(--s6);
                   background: var(--testata-fondo); box-shadow: var(--testata-ombra);
                   color: #FFF; border-radius: 14px;
                   animation: testata-arretra linear none;
                   animation-timeline: view(); animation-range: exit; }
.persona-chi { display: flex; flex-direction: column; min-width: 0; }
/* La briciola resta solo su "Modifica la persona": li' e' il modo di uscire
   dal modulo senza salvare. Sulle schede c'e' il menu. */
.persona-testata .briciola { align-self: flex-start; margin-bottom: var(--s4);
                             color: var(--notte-testo); }
.persona-testata .briciola:hover { color: #FFF; }
.persona-riga { display: flex; align-items: center; gap: var(--s4); min-width: 0; }
/* Lo stesso nome grande della scheda azienda (.testata-nome): 40px. */
.persona-nome { margin: 0; font-size: 40px; line-height: 1.05; letter-spacing: -.035em;
                color: #FFF; }
.persona-mestiere { margin: var(--s1) 0 0; font-size: var(--t5); color: var(--notte-testo); }
.persona-mestiere.manca { color: var(--ambra-notte); }
.persona-mestiere b { color: #FFF; font-weight: 600; }
.persona-mestiere a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 3px; }
.persona-mestiere a:hover { color: #FFF; text-decoration-color: #FFF; }
/* Sul fondo scuro il pulsante e' un contorno: uno bianco pieno sarebbe la
   cosa piu' accesa della pagina, e "Modifica" non e' il gesto principale. */
.persona-testata .bottone-secondario { background: rgba(255, 255, 255, .08); color: #FFF;
                                       box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.persona-testata .bottone-secondario:hover { background: rgba(255, 255, 255, .16); color: #FFF; }
.persona-testata .segno { background: rgba(255, 255, 255, .10); color: #FFF;
                          box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.persona-azioni { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }

/* LA SCHEDA CONTATTO come quella dell'azienda (23/09): i dati a sinistra,
   Il contatto e Dove lavora - al 40%, e la cronologia a destra al 60%: e'
   la parte che si legge di piu', e con 400px fissi andava a capo ogni riga. */
.persona { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
           gap: var(--s5); align-items: start;
           padding: var(--s6) var(--s8) var(--s10); }
/* =============================================================================
   IL CORPO DELLA SCHEDA AZIENDA
   Le PERSONE a riga intera, lo SCHEDARIO in tre colonne allineate in alto.
   Erano due colonne affiancate, e su un'azienda da quattro persone la sinistra
   finiva a meta' schermo mentre la destra proseguiva da sola per seicento
   pixel di bianco: la pagina scorreva per una colonna sola.
   align-items: start e' la riga che conta: ogni riquadro e' alto quanto il suo
   contenuto, e non si allunga per pareggiare il vicino.
   ============================================================================= */
.corpo { display: flex; flex-direction: column; gap: var(--s5);
         padding: 0 var(--s8) var(--s10); }
.schedario { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
             gap: var(--s5); align-items: start; }

.colonna { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
/* La scheda marchio: il cobranding e' il lavoro del marketing e prende la
   colonna larga; profilo, social, aziende e persone si impilano a sinistra. */
.schedario-marchio { grid-template-columns: minmax(300px, 1fr) minmax(0, 2fr); grid-template-rows: auto 1fr; }
/* Giornali e scuole: due colonne, Chi e' e La relazione (CompanyType::trades). */
.schedario-due { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.schedario-marchio > .sez-chi { grid-column: 1; grid-row: 1; }
.schedario-marchio > .sez-rel { grid-column: 1; grid-row: 2; }
.schedario-marchio > .sez-come { grid-column: 2; grid-row: 1 / span 2; }
/* CON I TESSUTI ACQUISTATI (14/10/2026, "3 colonne, se no non ci si capisce"):
   a sinistra chi e' e la relazione, al centro il lavoro (cobranding, o uscite
   e progetti), a destra i tessuti. Sotto i 1400 i tessuti vanno sotto il centro. */
.schedario-marchio.con-tessuti { grid-template-columns: minmax(290px, 1fr) minmax(0, 1.8fr) minmax(0, 1.15fr); }
.schedario-marchio > .sez-tessuti { grid-column: 3; grid-row: 1 / span 2; }
@media (max-width: 1400px) {
  .schedario-marchio.con-tessuti { grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); }
  .schedario-marchio > .sez-tessuti { grid-column: 2; grid-row: 3; }
}

.blocco { background: var(--superficie); border: none; border-radius: var(--raggio-g);
          box-shadow: 0 0 0 1px rgba(16, 24, 40, .05),
                      0 1px 2px rgba(16, 24, 40, .04),
                      0 8px 16px -12px rgba(16, 24, 40, .18);
          min-width: 0; }
/* La testa di un riquadro ha un fondo appena piu' freddo del corpo: separa
   senza bisogno di un secondo bordo. */
.blocco-testa { display: flex; align-items: center; gap: var(--s2); min-height: 46px;
                padding: 0 var(--s5); border-bottom: 1px solid var(--bordo-tenue);
                background: linear-gradient(180deg, #FCFDFE, #F7F9FC);
                border-radius: var(--raggio-g) var(--raggio-g) 0 0; }
/* Il titolo di un riquadro non e' il titolo della pagina: --t5 e non di piu'.
   Piu' grande competeva col nome dell'azienda, e sei riquadri erano sei
   titoli che gridavano insieme. */
.blocco-titolo { margin: 0; font-size: var(--t5); font-weight: 600; letter-spacing: -.015em;
                 color: var(--notte); display: flex; align-items: center; gap: 6px; }
.blocco-nota { margin-left: auto; font-size: var(--t3); color: var(--testo-3); white-space: nowrap; }
/* RIDURRE / ESPANDERE (05/10/2026): il pulsante lo mette effetti.js in fondo
   a ogni testa. Ridotto, del riquadro resta solo la testa. */
/* Cosa si conta in un riquadro, dentro e non nella testa (05/10/2026): la
   testa dice solo quanti sono. */
/* L'ATTESA di una pagina in due tempi (_attesa.php): un giro e delle righe
   che respirano, al posto dell'elenco che sta arrivando. */
.attesa { padding-top: var(--s8); }
.attesa-cartello { display: flex; align-items: center; justify-content: center; gap: var(--s3);
                   margin-bottom: var(--s6); font-size: var(--t4); color: var(--testo-2); }
.attesa-giro { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--bordo);
               border-top-color: var(--blu); animation: attesa-gira .8s linear infinite; }
.attesa-righe { display: grid; gap: 10px; width: 100%; max-width: 1100px; margin: 0 auto; }
.attesa-righe span { display: block; width: 100%; height: 52px; border-radius: var(--raggio-g); opacity: calc(1 - var(--i) * .1);
                     box-shadow: 0 0 0 1px rgba(16, 24, 40, .05), 0 1px 2px rgba(16, 24, 40, .04);
                     background: linear-gradient(90deg, transparent 0%, rgba(16, 24, 40, .045) 50%, transparent 100%) var(--superficie);
                     background-size: 200% 100%; animation: attesa-luce 1.4s ease-in-out infinite;
                     animation-delay: calc(var(--i) * 60ms); }
@keyframes attesa-gira { to { transform: rotate(360deg); } }
@keyframes attesa-luce { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .attesa-giro, .attesa-righe span { animation: none; } }
/* Il giorno di una data, nelle ricorrenze: due cifre, non la larghezza di un mese. */
.campo.campo-corto { width: 4.5em; flex: 0 0 auto; }
.campo.campo-mese { flex: 1 1 0; }
details.aggiungi[open] > .aggiungi-riga:has(.campo-mese) { min-width: 320px; }
/* I REGALI (0084): l'occasione a sinistra, cosa e come a destra, la crocetta in fondo. */
.regali { list-style: none; margin: 0; padding: var(--s2) var(--fianco); }
.regalo { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: var(--s3); align-items: baseline;
          padding: var(--s2) 0; }
.regalo + .regalo { border-top: 1px solid var(--bordo-tenue); }
.regalo-quando { font-size: var(--t2); color: var(--testo-3); }
.regalo-cosa { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--t3); }
.regalo-cosa b { font-weight: 500; color: var(--testo); }
.regalo-come { font-size: var(--t2); color: var(--testo-3); }
.regalo-togli { margin: 0; opacity: 0; transition: opacity .12s; }
.regalo:hover .regalo-togli, .regalo-togli:focus-within { opacity: 1; }
@media (hover: none) { .regalo-togli { opacity: 1; } }
.modulo-regalo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s3); }
.modulo-regalo label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.modulo-regalo label.largo { grid-column: 1 / -1; }
.modulo-regalo .k { font-size: var(--t2); color: var(--testo-3); }
.modulo-regalo .bottone { grid-column: 1 / -1; justify-self: end; }
.blocco-spiega { margin: 0; padding: var(--s3) var(--fianco) 0; font-size: var(--t3); color: var(--testo-2); }
.blocco-riduci { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; margin-left: var(--s2);
                 padding: 0; border: 0; border-radius: 6px; background: none; color: var(--testo-4); cursor: pointer;
                 transition: color .12s, background .12s; }
.blocco-titolo + .blocco-riduci { margin-left: auto; }
.blocco-riduci:hover { color: var(--blu); background: var(--blu-tenue); }
.blocco-riduci svg { transition: transform .18s var(--curva); }
.blocco.compatto > :not(.blocco-testa), .azienda-box.compatto > :not(.azienda-testa) { display: none !important; }
.blocco.compatto > .blocco-testa { border-bottom-color: transparent; border-radius: var(--raggio-g); }
.compatto > header > .blocco-riduci svg { transform: rotate(-90deg); }
/* Il link di un riquadro verso la sua sezione (la scheda azienda -> Statistiche):
   "Approfondisci", discreto e sempre in alto a destra (05/10/2026). */
.blocco-link { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; padding: 3px 6px; border-radius: 7px;
               font-size: var(--t2); font-weight: 400; color: var(--testo-3); transition: color .12s, background .12s; }
.blocco-nota + .blocco-link { margin-left: var(--s2); }
.blocco-link svg { transform: rotate(45deg); }
.blocco-link:hover { background: var(--blu-tenue); color: var(--blu); }

/* LA SEZIONE di un riquadro: la dice la colonna (sulla scheda azienda) o il
   riquadro stesso (sulla scheda contatto). Si vede in due punti soli: una
   SFUMATURA del suo colore nella testa, che parte tenue dietro l'icona e il
   titolo e svanisce verso destra, e l'icona stessa.
   NIENTE FILO COLORATO sul bordo: e' stato provato ed e' stato bocciato
   (Mattia, 23/09) - un bordino stondato colorato in cima alle carte e' il
   tic piu' riconoscibile delle interfacce fatte in serie. La sfumatura
   segna la sezione senza disegnare una linea.
   Trasparente e non bianca a destra: sotto c'e' il fondo del riquadro, che
   su "Dati identificativi" e' grigio (sola lettura) e deve restarlo. */
.sez-chi  { --sez: var(--sez-chi); }
.sez-come { --sez: var(--sez-come); }
.sez-rel  { --sez: var(--sez-rel); }
/* I tessuti acquistati (14/10/2026): azzurro, lo stesso dei tessuti nel cruscotto. */
.sez-tessuti { --sez: #0EA5E9; }
.sez-chi .blocco-testa, .sez-come .blocco-testa, .sez-rel .blocco-testa, .sez-tessuti .blocco-testa,
.blocco.sez-chi > .blocco-testa, .blocco.sez-come > .blocco-testa, .blocco.sez-rel > .blocco-testa {
  background:
    radial-gradient(140% 220% at 0% 0%, color-mix(in srgb, var(--sez) 26%, transparent) 0%, color-mix(in srgb, var(--sez) 8%, transparent) 40%, transparent 75%),
    linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
  border-bottom-color: color-mix(in srgb, var(--sez) 14%, var(--bordo-tenue)); }
.sez-chi .blocco-testa .insegna, .sez-come .blocco-testa .insegna, .sez-rel .blocco-testa .insegna, .sez-tessuti .blocco-testa .insegna {
  color: var(--sez); opacity: 1; }
/* Il nome della sezione, in cima alla sua colonna: un pallino del suo
   colore e una parola. Non e' un riquadro - e' un'etichetta per il gruppo -
   e per questo sta fuori dalle carte, sul fondo della pagina. */
/* LE PERSONE (Mattia, 23/09: "ha bisogno di piu' gas"): subito dopo la
   testata e' la cosa che si guarda, e aveva la stessa voce di tutti gli
   altri riquadri. Qui il colore sta su TUTTO il fondo, un azzurro appena
   percettibile, e le carte bianche ci si staccano sopra; la testa ha la sua
   sfumatura piu' carica, un titolo un gradino piu' grande e il conto in una
   capsula. Il fondo e' pieno e non sfumato perche' i veli del carosello ai
   bordi devono avere lo stesso colore (--velo). */
.blocco.sez-persone { --sez: var(--blu); --velo: color-mix(in srgb, var(--blu) 8%, var(--superficie));
                      background: var(--velo);
                      box-shadow: 0 0 0 1px color-mix(in srgb, var(--blu) 16%, transparent),
                                  0 12px 28px -18px color-mix(in srgb, var(--blu) 45%, transparent); }
.blocco.sez-persone > .blocco-testa {
  background: radial-gradient(120% 260% at 0% 0%, color-mix(in srgb, var(--blu) 34%, transparent) 0%,
                              color-mix(in srgb, var(--blu) 12%, transparent) 45%, transparent 85%);
  border-bottom-color: color-mix(in srgb, var(--blu) 16%, transparent); }
.sez-persone .blocco-testa .insegna { color: var(--blu); opacity: 1; }
.sez-persone .blocco-titolo { font-size: var(--t6); font-weight: 650; color: var(--testo); }
.sez-persone .blocco-nota { padding: 3px 10px; border-radius: 999px; font-weight: 600;
                            color: var(--blu-scuro); background: color-mix(in srgb, var(--blu) 10%, var(--superficie)); }
.sez-persone .persona-carta { box-shadow: 0 0 0 1px rgba(16, 24, 40, .06), 0 2px 6px -2px rgba(16, 24, 40, .10); }

.sezione-testa { display: flex; align-items: center; gap: var(--s2); margin: 0 0 calc(var(--s2) * -1);
                 padding: 0 var(--s1); font-size: var(--t3); font-weight: 700; color: var(--testo-2); }
.sezione-testa::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--sez); }

.campi { display: flex; flex-direction: column; padding: var(--s3) var(--s5); }
/* LA GRIGLIA DELLE RIGHE CAMPO (05/10/2026: "esplosi gli allineamenti").
   Prima le righe erano centrate sul riquadro: un gettone, una bandiera, un
   elenco su due righe spostavano il valore di 3-4px rispetto all'etichetta.
   Ora tutto parte dall'alto e si centra sulla prima linea (--linea):
   l'etichetta ci sta dentro, il testo ha sopra lo spazio che lo centra (e va a
   capo con la sua interlinea), i gettoni stanno al centro della loro fila. */
.riga-campo { display: grid; grid-template-columns: var(--etichetta) minmax(0, 1fr);
              align-items: start; gap: var(--s3); min-height: var(--riga); padding: 2px 0; }
.riga-campo > .campo-etichetta { line-height: var(--linea); }
/* Il cliente da solo (15/10/2026): niente etichetta Capogruppo, solo il comando per metterlo sotto uno. */
.riga-campo.riga-solo-comando { grid-template-columns: minmax(0, 1fr); }
.riga-campo > .campo-valore:not(:has(.gettoni)) { padding-top: calc((var(--linea) - 1.45em) / 2); }
/* Quello che si modifica al volo ha gia' 3px sopra e sotto per lo sfondo del
   passaggio (e -3px di margine che li compensa): lo spazio va sul margine. */
.riga-campo > .campo-valore[data-campo]:not(.e-vuoto):not(:has(.gettoni)) { padding-top: 3px; margin-top: calc((var(--linea) - 1.45em) / 2 - 3px); }
.riga-campo .gettoni { padding-block: calc((var(--linea) - var(--gettone)) / 2); }
.campo-etichetta { font-size: var(--t3); color: var(--testo-2); }
.campo-valore { font-size: var(--t5); font-weight: 500; color: var(--testo);
                overflow-wrap: anywhere; line-height: 1.45; }

.niente { color: var(--testo-3); font-weight: 400; }
.niente-grande { margin: 0; padding: var(--s6) var(--s5); color: var(--testo-2);
                 line-height: 1.6; max-width: 62ch; }

.blocco-note { display: grid; grid-template-columns: var(--etichetta) minmax(0, 1fr);
               gap: var(--s3); align-items: start; padding: var(--s3) var(--s5);
               border-top: 1px solid var(--bordo-tenue); }
.blocco-note .campo-etichetta { line-height: var(--linea); }
.blocco-note > .campo-valore { padding-top: calc((var(--linea) - 1.6em) / 2); }
.campo-valore.testo { font-weight: 400; line-height: 1.6; }
.blocco-piede { display: grid; grid-template-columns: var(--etichetta) minmax(0, 1fr);
                gap: var(--s2) var(--s3); align-items: center; padding: var(--s3) var(--s5);
                border-top: 1px solid var(--bordo-tenue); }
.piede-spinta { grid-column: 1 / -1; justify-self: end; font-size: var(--t1); font-style: italic;
                color: var(--testo-3); }

.lucchetto { width: 14px; height: 14px; color: var(--testo-3); }

/* I VALORI MULTIPLI DENTRO LA GRIGLIA
   Lingue, profili, back office: sono elenchi, ma stanno in una riga campo come
   tutto il resto. I valori sono gettoni in linea; l'aggiunta e' l'ultimo
   gettone, tratteggiato, e apre il modulo solo quando serve - prima il modulo
   stava sempre aperto e tre comandi occupavano meta' scheda. E' un <details>:
   nessun JavaScript, e senza di esso resta comunque apribile. */
/* Il passo verticale e' piu' largo di quello orizzontale: i gettoni che vanno
   a capo devono respirare come le righe della griglia, non incollarsi. */
.gettoni { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; }
/* I follower di un profilo, dentro il suo gettone: si scrivono al volo come
   un campo, e come un campo si accendono al passaggio. */
.follower { margin-left: 4px; padding: 0 4px; border-radius: 4px; cursor: text;
            font-variant-numeric: tabular-nums; color: var(--testo-2); transition: background .1s; }
.follower:hover { background: var(--blu-tenue); }
.follower.e-vuoto { color: var(--blu); font-weight: 400; }
/* max-width + wrap: il gettone di un ruolo (mestiere, marchio, divisione)
   nella colonna del contatto al 40% usciva dal riquadro. Ora va a capo
   dentro di se', e ogni pezzo resta intero. */
.gettone { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px;
           min-height: var(--gettone); max-width: 100%;
           padding: 0 2px 0 10px; border-radius: 13px;
           background: var(--blu-tenue); color: var(--blu-scuro);
           font-size: var(--t3); font-weight: 500; white-space: nowrap; }
.gettone a { color: inherit; }
.gettone a:hover { text-decoration: underline; }
/* IL MESTIERE DOMINA, I SUOI CAMPI NO.
   Dentro il gettone di un ruolo ci sono tre cose - Designer, il marchio, la
   divisione - e prima erano pillole identiche in fila: "Designer  Sportmax
   Tessuti Uomo" si leggeva come un elenco piatto, e nessuno capiva che le
   ultime due si potevano cliccare.
   Ora il mestiere resta pieno e a peso 600; gli altri due sono campi, e lo
   dicono: fondo chiaro e TRATTEGGIO sotto, che e' il segno usato ovunque qui
   dentro per "questo si compila". */
.gettone > :first-child { font-weight: 600; }
/* I REFERENTI MANTECO (14/10/2026): una persona = iniziali colorate e nome,
   su fondo neutro, uguale per front, back office e marketing; la x solo a chi
   puo' toglierla. Il front scelto dall'amministratore ha la stessa misura. */
.gettone.referente { gap: 7px; padding: 0 4px 0 3px; background: var(--sfiora); box-shadow: inset 0 0 0 1px var(--bordo-tenue); color: var(--testo); }
.gettone.referente > :first-child { font-weight: 600; }
.gettone.referente > span:nth-child(2) { font-weight: 500; }
.gettone.referente:not(:has(form)) { padding-right: 10px; }
.gettone.referente .avatar { width: 22px; height: 22px; font-size: 10px; }
.gettone.referente .gettone-togli { color: var(--testo-3); }
.gettone.referente .gettone-togli:hover { background: var(--rosso-tenue); color: var(--rosso); }
#referenti .campo-valore { font-size: var(--t3); font-weight: 500; }
/* Aggiungere un referente: un + tondo accanto all'ultimo, non una riga sotto. */
details.aggiungi > summary.referente-aggiungi { justify-content: center; width: var(--gettone); padding: 0; border-radius: 50%; font-size: var(--t5); line-height: 1; }
.gettone .per-marchio { margin-left: 6px; padding: 0 6px; border-radius: 5px;
                        background: rgba(255, 255, 255, .75); font-weight: 400; }
/* Si clicca e diventa una tendina, come gli altri campi al volo. Vuoto e'
   un invito tratteggiato: un ruolo senza divisione non e' un errore, e' lavoro
   da fare - lo stesso segno dei "+ aggiungi". */
.gettone .per-marchio[data-campo] { cursor: pointer;
                                    border-bottom: 1px dashed rgba(29, 78, 216, .45);
                                    transition: background .12s, border-color .12s; }
.gettone .per-marchio[data-campo]:hover { background: #fff; border-bottom-color: var(--blu); }
.gettone .per-marchio.e-vuoto { background: none; opacity: .75;
                                border-bottom-style: dashed; }
.gettone .per-marchio.e-vuoto:hover { opacity: 1; }
.gettone select.campo-al-volo { height: 20px; max-width: 170px; padding: 0 4px;
                                font-size: var(--t2); }
/* Un marchio che nessun ruolo usa. Sta nella stessa riga dei ruoli, perche'
   ruolo e marchio sono la stessa cosa e non due elenchi paralleli: ma e'
   grigio invece che blu, cosi' si vede a colpo d'occhio che quell'accoppiata
   non e' ancora fatta. */
/* .senza-ruolo non c'e' piu': quei marchi hanno una riga loro, "Marchi
   seguiti", e l'etichetta serviva solo a spiegare perche' stessero in coda ai
   ruoli. Tolta la confusione, e' sparita anche la didascalia. */
.gettone form { display: inline; margin: 0; }
.gettone-togli { width: 18px; height: 18px; border: none; border-radius: 50%;
                 background: none; color: currentColor; opacity: .45; cursor: pointer;
                 font-size: var(--t3); line-height: 1; display: inline-flex;
                 align-items: center; justify-content: center; transition: opacity .12s, background .12s; }
.gettone-togli:hover { opacity: 1; background: rgba(255, 255, 255, .7); }

/* L'AGGIUNTA A UN ELENCO: un pannellino ANCORATO alla pillola, come in ogni
   CRM che si sia visto. Prima era un <details> che si apriva SPINGENDO GIU'
   tutto quello che stava sotto: si cliccava "+ lingua" e il riquadro Note
   saltava di cinquanta pixel. Ora galleggia sopra la pagina e non sposta
   niente.
   Resta un <details>: senza JavaScript si apre e si chiude lo stesso, e il
   modulo dentro e' un modulo vero. Il galleggiamento e' solo vestizione. */
details.aggiungi { display: inline-block; position: relative; }
details.aggiungi > summary { display: inline-flex; align-items: center; height: var(--gettone);
                             padding: 0 10px; border-radius: 999px; cursor: pointer;
                             border: 1px dashed var(--bordo-forte); color: var(--testo-3);
                             font-size: var(--t3); list-style: none;
                             transition: color .12s, border-color .12s; }
details.aggiungi > summary::-webkit-details-marker { display: none; }
details.aggiungi > summary::marker { content: ''; }
details.aggiungi > summary:hover { color: var(--blu); border-color: var(--blu); }
details.aggiungi[open] > summary { color: var(--blu); border-style: solid; border-color: var(--blu); }

.aggiungi-riga { display: flex; flex-wrap: wrap; gap: 6px; }
/* Il pannellino vero e proprio. z-index alto perche' deve stare sopra i
   riquadri vicini, non infilarsi sotto il loro bordo. */
details.aggiungi[open] > .aggiungi-riga { position: absolute; z-index: 30;
                                          top: calc(100% + 6px); left: 0;
                                          min-width: 260px; padding: var(--s3);
                                          border: 1px solid var(--bordo);
                                          border-radius: var(--raggio);
                                          background: var(--superficie);
                                          box-shadow: var(--ombra-alta);
                                          animation: pannello-entra .14s var(--curva); }
/* Vicino al bordo destro si ancora a destra, se no esce dalla colonna. */
details.aggiungi.a-destra[open] > .aggiungi-riga { left: auto; right: 0; }
/* DENTRO UNA FINESTRA il pannellino non galleggia: il corpo della finestra
   scorre, e cosi' lo tagliava - "Aggiungi" restava mezzo fuori, sotto il
   piede. Si apre in flusso, su una riga sua, campo e pulsante affiancati. */
.scheda-marchio details.aggiungi[open] { display: block; flex-basis: 100%; }
.scheda-marchio details.aggiungi[open] > .aggiungi-riga {
  position: static; display: grid; grid-template-columns: 112px minmax(0, 1fr) auto;
  align-items: center; margin-top: var(--s2); min-width: 0;
  background: var(--sfiora); border-color: var(--bordo-tenue); box-shadow: none; }
.scheda-marchio .aggiungi-riga select, .scheda-marchio .aggiungi-riga input { flex: none; width: 100%; }
.scheda-marchio .aggiungi-riga .bottone { margin-left: 0; padding: 0 var(--s3); }
.aggiungi-riga .campo { height: 30px; font-size: var(--t3); }
.aggiungi-riga select { flex: 1 1 100%; min-width: 0; }
.aggiungi-riga input { flex: 1 1 100%; min-width: 0; }
.aggiungi-riga .bottone { height: 30px; flex: 0 0 auto; margin-left: auto; }

/* I MARCHI DELL'AZIENDA
   Chiuso, ogni marchio e' una RIGA che si legge: logo, nome, e cosa se ne sa.
   Aperto diventa una scheda. Il primo disegno metteva ogni campo su una riga
   sua e il pannello era alto il doppio per dire le stesse cose: ora le quattro
   classificazioni stanno su due colonne, il cobranding e' a pillole invece che
   a caselle in fila, e il campo file grezzo - "Scegli file / Nessun file
   selezionato", la cosa piu' brutta che il browser sappia disegnare - sta
   nascosto sotto un'etichetta che sembra un pulsante. */
/* IL RIQUADRO DEI MARCHI PESA PIU' DEGLI ALTRI, perche' e' il contenuto della
   scheda: un'azienda per noi e' l'insieme dei suoi marchi. Lo dice stando in
   cima alla colonna, col titolo piu' grande e un'ombra appena piu' marcata.
   NIENTE filo colorato in testa: un bordo su un lato solo, stondato e in
   tinta, e' un vezzo che non porta informazione - la posizione e la dimensione
   del titolo dicono gia' tutto. */

/* I PROFILI SOCIAL del marchio (scheda marchio, 30/09): una riga per
   profilo, la rete in una tessera col suo colore, il profilo che si apre, i
   follower letti (in sola lettura: li aggiorna il giro del lunedi'). */
.profili { list-style: none; margin: 0; padding: var(--s2) var(--s5); }
.profilo { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto;
           align-items: center; column-gap: var(--s3); padding: var(--s2) 0; }
.profilo + .profilo { border-top: 1px solid var(--bordo-tenue); }
.profilo-rete { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: #FFF; }
.profilo-rete.rete-website   { background: var(--blu); }
.profilo-rete.rete-instagram { background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); }
.profilo-rete.rete-linkedin  { background: #0A66C2; }
.profilo-rete.rete-facebook  { background: #1877F2; }
.profilo-rete.rete-tiktok, .profilo-rete.rete-twitter { background: #111; }
.profilo-rete.rete-youtube   { background: #FF0033; }
.profilo-rete.rete-pinterest { background: #E60023; }
.profilo-testi { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.profilo-testi a { font-weight: 600; color: var(--testo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profilo-testi a:hover { color: var(--blu); text-decoration: underline; text-underline-offset: 3px; }
.profilo-testi small { font-size: var(--t2); color: var(--testo-3); }
.profilo-follower { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.profilo-follower b { font-size: var(--t4); font-variant-numeric: tabular-nums; }
.profilo-follower small { font-size: var(--t1); color: var(--testo-3); }
.profilo-togli { margin: 0; opacity: 0; transition: opacity .12s; }
.profilo:hover .profilo-togli, .profilo-togli:focus-within { opacity: 1; }
@media (hover: none) { .profilo-togli { opacity: 1; } }
.profilo-togli button { width: 24px; height: 24px; border: 0; border-radius: 6px; background: none;
                        color: var(--testo-4); font-size: 17px; line-height: 1; cursor: pointer; }
.profilo-togli button:hover { background: var(--rosso-tenue); color: var(--rosso); }
/* CORREGGERE UN PROFILO (31/10/2026, _social-correggi.php): la matita piccola accanto alla x, come lei; nei marchi compare
   al passaggio del mouse. Il pannellino si apre verso sinistra (a-destra): sta sul bordo destro del riquadro. */
details.aggiungi.social-correggi > summary { justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; color: var(--testo-4); }
details.aggiungi.social-correggi > summary:hover, details.aggiungi.social-correggi[open] > summary { background: var(--blu-tenue); color: var(--blu); }
details.aggiungi.social-correggi[open] > .aggiungi-riga { min-width: 320px; }
details.aggiungi.social-correggi[open] > .aggiungi-riga .campo { flex: 1 1 100%; }
.profilo > .social-correggi { opacity: 0; transition: opacity .12s; }
.profilo:hover > .social-correggi, .profilo > .social-correggi[open], .profilo > .social-correggi:focus-within { opacity: 1; }
@media (hover: none) { .profilo > .social-correggi { opacity: 1; } }
.gettone > .social-correggi > summary { width: 18px; height: 18px; }
/* Nella scheda marchio il riquadro Social e' stretto e taglia quello che esce: il pannellino si apre DENTRO la riga del
   profilo, sotto, su tutta la larghezza (non galleggia). */
.profilo > details.social-correggi[open] { grid-column: 1 / -1; grid-row: 2; display: block; width: 100%; margin-top: var(--s2); }
/* Un <details> non fa da contenitore flex: il modulo e' un blocco largo quanto la riga, sotto la matita. */
.profilo > details.social-correggi[open] > .aggiungi-riga { position: static; display: flex; flex-wrap: nowrap; width: 100%; min-width: 0;
  margin-top: var(--s2); padding: 0; border: 0; box-shadow: none; background: none; animation: none; }
.profilo > details.social-correggi[open] > .aggiungi-riga .campo { flex: 1 1 auto; width: 0; min-width: 0; }
details.aggiungi.profilo-aggiungi { display: block; width: auto; margin: 0; padding: var(--s3) var(--s5) var(--s4); border-top: 1px solid var(--bordo-tenue); }
details.aggiungi.profilo-aggiungi > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer;
                              height: auto; padding: 0; border: 0; background: none; border-radius: 0;
                              font-size: var(--t3); font-weight: 500; color: var(--blu); }
details.aggiungi.profilo-aggiungi > summary:hover { text-decoration: underline; text-underline-offset: 3px; background: none; }
.profilo-aggiungi > summary::-webkit-details-marker { display: none; }
.profilo-aggiungi[open] > summary { margin-bottom: var(--s2); }

/* IL RIQUADRO MARCHI (_marchi.php), dal 30/09: una riga per marchio, i
   dettagli sotto. */
.marchi-elenco { list-style: none; margin: 0; padding: var(--s2) var(--fianco); }
/* UNA RIGA PER MARCHIO (30/09): maniglia, logo, nome con sotto segmento,
   categoria e le icone dei profili, crocetta. Tutto centrato in verticale;
   le icone sono piccole e grigie e prendono il colore della rete al passaggio. */
.marchio-riga { position: relative; display: flex; align-items: center; gap: var(--s2); padding: var(--s2) 0;
                background: var(--superficie); }
.marchio-riga + .marchio-riga { border-top: 1px solid var(--bordo-tenue); }
.marchio-riga-capo { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--s3); }
/* Nel riquadro Marchi il logo sta in una TESSERA, non in un cerchio: i
   loghi veri sono scritte orizzontali (MaxMara, SPORTMAX), e in un tondo da
   40px diventavano una riga da quattro pixel. Tutte le tessere sono larghe
   uguali, anche quelle con le iniziali, cosi' i nomi restano incolonnati. */
.marchio-logo.piccolo { --d: 40px; flex: 0 0 auto; width: 64px; border-radius: 10px;
                        box-shadow: 0 0 0 1px var(--bordo), 0 1px 2px rgba(16, 24, 40, .06); }
.marchio-logo.piccolo img { max-width: 84%; max-height: 62%; }
.marchio-riga-testi { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.marchio-riga-nome { font-size: var(--t4); font-weight: 600; color: var(--testo); line-height: 1.25;
                     overflow-wrap: anywhere; transition: color .12s; }
.marchio-riga-nome:hover { color: var(--blu); text-decoration: underline; text-underline-offset: 3px; }
.marchio-riga-sotto { display: flex; align-items: center; flex-wrap: wrap; gap: 2px var(--s2); min-height: 20px;
                      font-size: var(--t2); color: var(--testo-3); }
.marchio-riga-attr { white-space: nowrap; }
/* Nella vista di gruppo: di quale societa' e' il marchio (o la persona, sotto). */
.marchio-riga-societa, .persona-carta-societa { font-weight: 600; color: var(--testo-2); }
/* Il bollino del cobranding scende col logo, e l'anello e' del fondo bianco. */
.marchio-riga .bollino { width: 18px; height: 18px; right: -4px; bottom: -3px;
                         box-shadow: 0 0 0 2px var(--superficie), 0 1px 3px rgba(16, 24, 40, .25); }
.marchio-riga .bollino svg { width: 10px; height: 10px; }
.marchio-riga .bollino .cob-dietro svg { width: 8px; height: 8px; }
.marchio-riga .bollino .cob-dietro { top: 2px; right: 2px; }
/* I profili in rete a DESTRA, incolonnati (Mattia, 05/10/2026): sotto il
   nome partivano ognuno da dove finiva la categoria, e con tanti marchi
   facevano una scala. */
/* Le reti vanno a capo fra loro (12/10/2026): con sette icone il nome del
   marchio restava in una colonna da 30px e andava a capo a ogni sillaba. */
.marchio-reti { flex: 0 1 auto; display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0; max-width: 92px; }
.marchio-riga-testi { flex: 1 1 auto; min-width: 90px; }
.rete { width: 22px; height: 22px; border-radius: 6px; display: inline-grid; place-items: center;
        color: var(--testo-4); transition: color .12s, background .12s; }
.rete:hover { background: var(--sfiora); }
.rete-website:hover   { color: var(--blu); }
.rete-instagram:hover { color: #DD2A7B; }
.rete-linkedin:hover  { color: #0A66C2; }
.rete-facebook:hover  { color: #1877F2; }
.rete-tiktok:hover, .rete-twitter:hover { color: #111; }
.rete-youtube:hover   { color: #FF0033; }
.rete-pinterest:hover { color: #E60023; }
/* RIORDINARE: la maniglia a sinistra, tenue finche' non ci si passa sopra.
   La riga che si trascina si solleva (ombra, fondo bianco) e le altre le
   fanno posto; il primo marchio e' il principale. */
.marchio-maniglia { flex: 0 0 auto; width: 20px; height: 32px; margin-left: -6px; padding: 0;
                    display: inline-grid; place-items: center; border: 0; border-radius: 6px;
                    background: none; color: var(--testo-4); cursor: grab; touch-action: none;
                    transition: color .12s, background .12s; }
.marchio-riga:hover .marchio-maniglia, .marchio-maniglia:focus-visible { color: var(--testo-2); }
.marchio-maniglia:hover { background: var(--sfiora); }
.marchio-riga.trascinata { z-index: 3; border-radius: 10px; cursor: grabbing;
                           box-shadow: 0 14px 30px rgba(16, 24, 40, .18), 0 0 0 1px var(--bordo);
                           scale: 1.015; transition: scale .12s, box-shadow .12s; }
/* Mentre si trascina: niente testo selezionato, e la mano chiusa ovunque. */
html.si-trascina, html.si-trascina * { user-select: none; cursor: grabbing !important; }
.marchio-riga.trascinata .marchio-maniglia { cursor: grabbing; color: var(--blu); }
.marchio-riga.trascinata + .marchio-riga { border-top-color: transparent; }
/* Il comando in fondo a un riquadro, largo quanto lui. */
.blocco-comando { padding: var(--s3) var(--fianco) var(--s4); border-top: 1px solid var(--bordo-tenue); }
.blocco-comando .bottone { gap: var(--s2); }

/* LA FINESTRA "AGGIUNGI UN MARCHIO": si scrive, e sotto compaiono i marchi
   che esistono gia' col loro logo, poi la riga per crearne uno nuovo. Ogni
   voce e' un pulsante: un clic, e il marchio e' dell'azienda. */
.cercamarchi .scheda-corpo { padding-top: 0; }
.cercamarchi-lista { list-style: none; margin: var(--s3) 0 0; padding: 0;
                     max-height: 320px; overflow-y: auto; }
.cercamarchi-lista:empty { display: none; }
.cercamarchi-voce { width: 100%; display: flex; align-items: center; gap: var(--s3);
                    padding: 6px var(--s2); border: 0; border-radius: var(--raggio);
                    background: none; text-align: left; cursor: pointer; color: var(--testo);
                    font: inherit; font-size: var(--t4); }
.cercamarchi-voce:hover, .cercamarchi-voce:focus-visible { background: var(--sfiora); outline: none; }
.cercamarchi-voce[disabled] { cursor: default; opacity: .55; background: none; }
.cercamarchi-mini { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
                    display: grid; place-items: center; overflow: hidden;
                    background: var(--sfiora-scuro); color: var(--testo-2);
                    font-size: var(--t3); font-weight: 600;
                    box-shadow: 0 0 0 1px var(--bordo); }
.cercamarchi-mini img { max-width: 80%; max-height: 70%; object-fit: contain; }
.cercamarchi-voce.nuovo .cercamarchi-mini { background: var(--blu-tenue); color: var(--blu); box-shadow: none; }
.cercamarchi-nome { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cercamarchi-tag { flex: 0 0 auto; font-size: var(--t2); font-weight: 600; color: var(--blu); }
.cercamarchi-voce[disabled] .cercamarchi-tag { color: var(--testo-3); }

/* Un riquadro appena ridisegnato dopo un salvataggio (effetti.js,
   ridisegnaDa): un respiro, non un lampo - dice "si e' aggiornato" senza
   chiedere di guardarlo. */
.ridisegnato { animation: ridisegnato .5s var(--curva); }
@keyframes ridisegnato { from { opacity: .35; } }

/* LA NOTIFICA. Una sola, in basso al centro, per ogni cosa che si salva: e'
   il posto dove guardare per sapere se e' andata. Scura come la colonna di
   sinistra; rossa quando non e' andata, e allora resta finche' non la si
   chiude. La mette effetti.js, come popover per stare sopra le finestre. */
.notifica { position: fixed; inset: auto auto var(--s6) 50%; z-index: 200; margin: 0;
            display: flex; align-items: center; gap: var(--s3);
            max-width: min(520px, calc(100vw - 32px)); min-height: 44px;
            padding: var(--s2) var(--s4); border: 0; border-radius: var(--raggio-g);
            background: var(--notte); color: #FFF; overflow: visible;
            font: 500 var(--t4)/1.4 var(--testo-font);
            box-shadow: 0 12px 32px rgba(14, 27, 44, .28), inset 0 0 0 1px rgba(255, 255, 255, .06);
            visibility: hidden; opacity: 0; transform: translate(-50%, 12px); pointer-events: none;
            transition: opacity .18s ease, transform .22s var(--curva), visibility 0s linear .22s; }
/* Trasparente ai clic, crocetta a parte: sta in basso sopra la pagina, e
   il comando che copriva ("+ registra qualcosa") smetteva di rispondere. */
.notifica.vista { visibility: visible; opacity: 1; transform: translate(-50%, 0);
                  transition: opacity .18s ease, transform .22s var(--curva), visibility 0s; }
@starting-style { .notifica.vista { opacity: 0; transform: translate(-50%, 12px); } }
.notifica-segno { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%;
                  display: grid; place-items: center; font-size: var(--t1); font-weight: 700; }
.notifica-lavora .notifica-segno { border: 2px solid rgba(255, 255, 255, .3); border-top-color: #FFF;
                                   animation: gira .7s linear infinite; }
.notifica-ok .notifica-segno { background: var(--verde-vivo); color: #FFF; }
.notifica-ok .notifica-segno::before { content: "\2713"; }
.notifica-errore { background: var(--rosso); padding-right: var(--s2); }
.notifica-errore .notifica-segno { background: #FFF; color: var(--rosso); }
.notifica-errore .notifica-segno::before { content: "!"; }
.notifica-chiudi { display: none; flex: 0 0 28px; width: 28px; height: 28px; margin-left: var(--s1);
                   border: 0; border-radius: 50%; background: none; cursor: pointer;
                   color: rgba(255, 255, 255, .8); font-size: var(--t6); line-height: 1; }
.notifica-chiudi:hover { background: rgba(255, 255, 255, .14); color: #FFF; }
.notifica-errore .notifica-chiudi { display: inline-grid; place-items: center; pointer-events: auto; }

/* IL DIALOG (dialog.scheda, per ogni finestrella: marchi, conferme, Da
   censire). Ordinato e centrato, non un pannello che allunga la pagina.
   Senza JavaScript resta chiuso, ma ?marchio=<id> gli mette l'attributo open e
   allora si vede lo stesso, in linea: nessuno resta fuori. */
dialog.scheda { position: fixed; width: min(540px, calc(100vw - 32px)); padding: 0;
                        border: none; border-radius: 16px;
                        background: var(--superficie); color: var(--testo);
                        box-shadow: 0 24px 60px rgba(16, 24, 40, .22),
                                    0 2px 8px rgba(16, 24, 40, .08),
                                    0 0 0 1px rgba(16, 24, 40, .06); }
/* Il pannello non mostra MAI un anello di fuoco su se stesso: ce l'ha per
   ricevere il fuoco all'apertura quando dentro non c'e' un campo da compilare.
   Senza, il browser lo dava alla crocetta, che si accendeva di blu in ogni
   pannello appena aperto e sembrava un errore.
   La crocetta porta tabindex="-1" per lo stesso motivo: showModal() da' il
   fuoco al PRIMO elemento raggiungibile, e quello era lei. Resta cliccabile, e
   da tastiera il pannello si chiude con Esc - che e' come si chiude un pannello. */
dialog.scheda:focus,
dialog.scheda:focus-visible { outline: none; }
/* Entra da sotto, appena. Senza, il pannello appare di colpo e non si capisce
   da dove arrivi; con troppo, si aspetta. */
dialog.scheda[open] { animation: pannello-entra .18s var(--curva); }
@keyframes pannello-entra { from { opacity: 0; transform: translateY(10px) scale(.985); } }
/* Lo sfondo si scurisce E si sfoca: la scheda dietro resta riconoscibile ma
   smette di chiedere attenzione. */
dialog.scheda::backdrop { background: rgba(14, 27, 44, .5); backdrop-filter: blur(3px); }

/* IL PIEDE. Il pulsante che salva sta SEMPRE qui, in fondo a destra, uguale in
   ogni pannello: prima galleggiava dentro il modulo, in un punto diverso a
   seconda di quanti campi c'erano sopra. Resta appiccicato in basso anche
   quando il corpo scorre, cosi' non bisogna scorrere per trovare "Salva". */
.scheda-piede { position: sticky; bottom: 0; display: flex; align-items: center;
                justify-content: flex-end; gap: var(--s2);
                padding: var(--s3) var(--s5); border-top: 1px solid var(--bordo);
                background: var(--superficie);
                border-radius: 0 0 var(--raggio-g) var(--raggio-g); }
/* Quello che toglie sta a sinistra, lontano da quello che salva. Va FUORI da
   .scheda-corpo, se no prende la spaziatura laterale del corpo e resta una
   banda che galleggia a due centimetri dai bordi della finestra.
   Questo componente esisteva gia' e io ne avevo scritto un secondo che gli
   litigava contro: prima di inventare una scatola nuova si guarda se c'e'. */
.scheda-piede .a-sinistra { margin-right: auto; }
.scheda-piede .azione-tenue button { display: inline-flex; align-items: center; gap: 6px; }

/* La testa non ha piu' un filo che la separa: il titolo sta in alto, il corpo
   respira sotto, e la riga in mezzo era solo un tratto in piu' da guardare. */
.scheda-testa { display: flex; align-items: center; gap: var(--s3);
                padding: var(--s5) var(--s5) var(--s3); }
.scheda-testa h3 { margin: 0; font-size: var(--t6); font-weight: 600;
                   letter-spacing: -.02em; line-height: 1.2;
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* La crocetta e' tonda e sommessa: si vede quando la si cerca, non prima. */
/* Senza la testa, la crocetta galleggia nell'angolo del pannello: e' l'unica
   cosa rimasta di quella riga, e non le serve una riga tutta sua. */
.scheda-chiudi.sola { position: absolute; top: var(--s3); right: var(--s3);
                      z-index: 2; margin: 0; }
.scheda-chiudi { margin-left: auto; width: 32px; height: 32px; flex: 0 0 auto;
                 display: inline-flex; align-items: center; justify-content: center;
                 border: none; border-radius: 50%; background: none;
                 color: var(--testo-3); font-size: 19px; line-height: 1; cursor: pointer;
                 transition: background .12s, color .12s; }
.scheda-chiudi:hover { background: var(--sfiora-scuro); color: var(--testo); }
/* NIENTE ANELLO SULLA CROCETTA quando il pannello si apre.
   Misurato, non supposto: a pannello aperto document.activeElement E' questo
   bottone. showModal() da' il fuoco al primo elemento a fuoco-abile, e
   tabindex="-1" lo toglie dal giro del Tab ma NON gli impedisce di riceverlo
   cosi'. L'anello lo disegnava la regola globale :focus-visible in cima al
   foglio, e il risultato era un cerchio azzurro sulla crocetta in ogni pannello
   appena aperto - sembrava un errore grafico.
   Si spegne solo qui: con Tab la crocetta non si raggiunge (tabindex -1) e il
   pannello si chiude con Esc, quindi da tastiera non si perde niente. */
.scheda-chiudi:focus, .scheda-chiudi:focus-visible { outline: none; }
.scheda-corpo { max-height: min(68vh, 600px); overflow-y: auto;
                padding: 0 var(--s5) var(--s4); }

/* SUL TELEFONO IL PANNELLO SALE DAL BASSO e occupa tutta la larghezza: e' il
   modo in cui si comportano i pannelli su uno schermo stretto, e lascia il
   pollice vicino ai pulsanti invece che in mezzo allo schermo. */
@media (max-width: 560px) {
  /* (04/11/2026, Mattia: "il popup viene tutto spostato in basso") non piu' attaccato al fondo: una carta in mezzo,
     staccata dai bordi e dalla barra di stato, che sale di poco aprendosi. */
  dialog.scheda { width: calc(100vw - 24px); max-width: calc(100vw - 24px); margin: auto;
                  max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
                  border-radius: 18px; }
  dialog.scheda[open] { animation: pannello-sale .2s var(--curva); }
  @keyframes pannello-sale { from { opacity: 0; transform: translateY(24px); } }
  .scheda-corpo { max-height: 62vh; }
}
/* IL PANNELLO DI CONFERMA. Stesso vestito degli altri, piu' stretto: c'e'
   dentro una domanda sola e allargarlo la farebbe galleggiare in mezzo al
   vuoto. Lo costruisce effetti.js, uno per tutta l'applicazione. */
dialog.scheda.conferma { width: min(420px, calc(100vw - 32px)); }
.conferma-testa { align-items: flex-start; gap: var(--s4); padding: var(--s6) var(--s5) var(--s5); }
.conferma-segno { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%;
                  display: grid; place-items: center; background: var(--rosso-tenue); }
.conferma-segno::before { content: "!"; color: var(--rosso); font-size: 17px; font-weight: 700; }
/* Il titolo di una finestra va su una riga sola; la domanda no, puo' essere lunga. */
.scheda-testa h3.conferma-domanda { margin-top: 6px; font-size: var(--t5); font-weight: 600;
                                    line-height: 1.4; letter-spacing: -.01em;
                                    white-space: normal; overflow-wrap: anywhere; }
/* Il pulsante che cancella e' ROSSO: il colore dice cosa sta per succedere
   prima che si legga la parola. */
.bottone-rosso { background: var(--rosso); color: #FFF; border-color: var(--rosso); }
.bottone-rosso:hover { background: var(--rosso-scuro); border-color: var(--rosso-scuro); color: #FFF; }

.scheda-marchio .riga-campo { padding: 3px 0; }

/* Il cobranding a pillole: sono cose FATTE e si sommano, ma in fila erano
   cinque caselle che somigliavano a un modulo da compilare. La casella resta
   sotto, invisibile e raggiungibile da tastiera. */
.pillole { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pillola { position: relative; display: inline-flex; align-items: center; gap: var(--s2); height: 24px;
           padding: 0 10px; border-radius: 999px; cursor: pointer;
           border: 1px solid var(--bordo-forte); color: var(--testo-2);
           font-size: var(--t3); white-space: nowrap;
           transition: background .12s, border-color .12s, color .12s; }
.pillola input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.pillola:hover { border-color: var(--blu); color: var(--blu); }
.pillola:has(:checked) { background: var(--blu-tenue); border-color: var(--blu);
                         color: var(--blu-scuro); font-weight: 500; }
.pillola:has(:focus-visible) { outline: 2px solid var(--blu); outline-offset: 2px; }
.pillola.attiva { background: var(--blu-tenue); border-color: var(--blu); color: var(--blu-scuro); font-weight: 500; }

/* IL RITRATTO DEL MARCHIO, a sinistra dei campi. Il logo si cambia cliccando il
   quadro, come una foto profilo. Prima erano un'anteprima, due pulsanti in fila
   e un "togli" scritto, tutti su una riga in fondo al pannello: quattro cose
   diverse per una sola operazione. */

.logo-modulo { display: flex; flex-direction: column; gap: var(--s2); }

/* Il velo dice cosa succede cliccando, e lo dice solo quando serve saperlo. */
.ritratto-velo { position: absolute; inset: 0; display: flex; flex-direction: column;
                 align-items: center; justify-content: center; gap: 2px;
                 background: rgba(14, 27, 44, .55); color: #FFF; font-size: var(--t1);
                 opacity: 0; transition: opacity .12s; }

/* La scheda marchio: il cerchio della testata E' il ritratto - si clicca e
   si cambia il logo, col velo sopra (stesse regole di .ritratto). */
.ritratto-testata { position: relative; display: block; border-radius: 50%; overflow: hidden; cursor: pointer; }
.ritratto-testata input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.ritratto-testata .ritratto-velo { border-radius: 50%; }
.ritratto-testata:hover .ritratto-velo, .ritratto-testata:has(:focus-visible) .ritratto-velo { opacity: 1; }
/* Un elenco di righe dentro un riquadro (aziende, persone della scheda marchio). */
.elenco-righe { margin: 0; padding: var(--s2); list-style: none; }
.riga-link { display: flex; align-items: center; gap: var(--s3); padding: 10px var(--s3);
             border-radius: var(--raggio); color: var(--testo); text-decoration: none; }
.riga-link:hover { background: var(--riga-sfiora); }
.riga-link:not(.con-avatar) { flex-direction: column; align-items: flex-start; gap: 2px; }
.riga-testi { display: flex; flex-direction: column; min-width: 0; }
.riga-titolo { font-weight: 600; font-size: var(--t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.riga-sotto { font-size: var(--t2); color: var(--testo-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Togliere un marchio dall'azienda (riquadro Marchi): una crocetta tenue che
   compare solo passando sulla riga, rossa sotto il dito. */
.marchio-togli { margin: 0; flex: 0 0 auto; }
.marchio-togli button { width: 24px; height: 24px; border: none; border-radius: 50%; background: none;
                        color: var(--testo-4); font-size: 17px; line-height: 1; cursor: pointer; opacity: 0;
                        transition: opacity .15s, background .15s, color .15s; }
.marchio-riga:hover .marchio-togli button, .marchio-togli button:focus-visible { opacity: 1; }
.marchio-togli button:hover { background: var(--rosso-tenue); color: var(--rosso); }
@media (hover: none) { .marchio-togli button { opacity: 1; } }

/* =============================================================================
   IL COBRANDING, anno per anno (_cobranding.php; 0052, rifatto piu' volte,
   l'ultima il 14/10/2026: "fuori griglia, disordinato"). Un blocco solo.

   LA GRIGLIA DI UN ANNO: la riga ha quattro colonne fisse - la freccia,
   l'anno, la sintesi (cosa si e' fatto, quante foto e link), i comandi - e
   tutto quello che sta dentro l'anno (miniature, link, nota) parte dal bordo
   della sintesi (--cob-rientro). Aperto o chiuso, ogni anno ha i gettoni
   allo stesso punto. In modifica il contenuto prende tutta la larghezza: i
   canali e i campi ne hanno bisogno.

   DUE MODI: si legge pulito, e i comandi (x dei link, stella e cestino delle
   foto, campi, canali spenti, posto per i file) compaiono solo in modifica
   (.in-modifica, effetti.js). Senza JavaScript si vede tutto, e funziona.
   ============================================================================= */
.cobranding { position: relative; --cob-freccia: 26px; --cob-anno: 56px;
              --cob-rientro: calc(var(--cob-freccia) + var(--cob-anno) + 2 * var(--s3)); }
.cob-anni { display: flex; flex-direction: column; }
.cob-anno { position: relative; padding: var(--s4) var(--fianco); border-top: 1px solid var(--bordo-tenue);
            scroll-margin-top: var(--s6); transition: background .2s, box-shadow .2s; }
.cob-anni > .cob-anno:first-child { border-top: none; }
.cob-anno:target { background: var(--riga-sfiora); }
.cob-anno.in-modifica { background: linear-gradient(180deg, var(--blu-tenue), transparent 220px); box-shadow: inset 3px 0 0 var(--blu); }

/* La riga dell'anno. */
.cob-testa { display: grid; grid-template-columns: var(--cob-freccia) var(--cob-anno) minmax(0, 1fr) auto; align-items: start;
             column-gap: var(--s3); row-gap: var(--s2); min-height: 32px; }
html.js .cob-testa[data-apri-riga] { cursor: pointer; }
.cob-apri { grid-column: 1; display: grid; place-items: center; width: var(--cob-freccia); height: 32px; padding: 0;
            border: 0; border-radius: 8px; background: none; color: var(--testo-3); cursor: pointer; transition: transform .2s, background .15s; }
.cob-apri:hover { background: var(--sfiora); color: var(--testo); }
.cob-anno.chiuso .cob-apri { transform: rotate(-90deg); }
.cob-anno-numero { grid-column: 2; justify-self: start; font-size: var(--t6); font-weight: 700; letter-spacing: -.01em; line-height: 24px;
                   font-variant-numeric: tabular-nums; padding: 4px 6px; margin: 0 -6px; border-radius: var(--raggio); cursor: default; }
.cob-anno-numero.solo-modifica { cursor: text; box-shadow: inset 0 -1px 0 var(--blu); }
.cob-anno-numero.solo-modifica:hover { background: var(--sfiora); }
.cob-sintesi { grid-column: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; padding-top: 4px; }
.cob-sintesi > .cob-conti, .cob-sintesi-vuota { height: 24px; }
.cob-conti { display: inline-flex; align-items: center; gap: var(--s3); margin-left: var(--s1); color: var(--testo-3);
             font-size: var(--t2); font-weight: 600; font-variant-numeric: tabular-nums; }
.cob-conti > span { display: inline-flex; align-items: center; gap: 4px; }
.cob-sintesi-vuota { font-size: var(--t3); color: var(--testo-4); }
.cob-comandi { grid-column: 4; display: flex; align-items: center; gap: var(--s2); }
.cob-comandi .bottone { height: 32px; padding: 0 12px; font-size: var(--t3); gap: 6px; }
.cob-modifica.bottone { width: 32px; padding: 0; color: var(--testo-2); }
.cob-modifica.bottone:hover { color: var(--blu); border-color: var(--blu); }
.cob-togli { margin: 0; }
.cob-togli .bottone { width: 32px; padding: 0; color: var(--testo-3); }
.cob-togli .bottone:hover { color: #FFF; background: var(--rosso); border-color: var(--rosso); }
html.js .cob-anno.chiuso .cob-comandi { display: none; }

/* GLI ANNI CHE SI APRONO (13/10/2026): il contenuto si piega in altezza
   (righe della griglia da 1fr a 0fr). Senza JavaScript tutto aperto. */
.cob-piega { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .25s var(--curva, ease); }
.cob-piega > div { min-height: 0; overflow: hidden; }
html.js .cob-anno.chiuso .cob-piega { grid-template-rows: 0fr; }

/* Il contenuto: sotto la sintesi in lettura, a tutta larghezza in modifica. */
.cob-corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); padding-top: var(--s4); }
html.js .cob-anno:not(.in-modifica) .cob-corpo { gap: var(--s3); padding-top: var(--s3); padding-left: var(--cob-rientro); }
html.js .cob-anno:not(.in-modifica) .cob-corpo:not(:has(> :not(.solo-modifica))) { display: none; }
.cob-parte { display: grid; gap: var(--s2); min-width: 0; margin: 0; }
.cob-parte-titolo { margin: 0; font-size: var(--t1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--testo-4); }
.cob-parte-titolo span { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px;
                         background: var(--sfiora-scuro); color: var(--testo-2); font-size: var(--t1); letter-spacing: 0; vertical-align: 1px; }
.cob-parte-titolo small { margin-left: 6px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--testo-4); }
html.js .cob-anno:not(.in-modifica) .cob-parte-titolo { display: none; }
.cob-niente { margin: 0; font-size: var(--t3); color: var(--testo-4); }
.cob-niente-modifica { padding: 0; border: 0; background: none; color: var(--blu); font: inherit; cursor: pointer; }
.cob-niente-modifica:hover { text-decoration: underline; }

/* COSA SI E' FATTO: gettoni ambra (il colore del cobranding in tutto il CRM). */
.cob-fatto { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border: 0; border-radius: 999px;
             background: var(--ambra-tenue); box-shadow: inset 0 0 0 1px var(--ambra-bordo); color: var(--ambra);
             font: inherit; font-size: var(--t2); font-weight: 600; white-space: nowrap; }
.cob-fatto::first-letter { text-transform: uppercase; }

/* In modifica i canali: un gruppo per riga, accesi ambra con la spunta,
   spenti tratteggiati col +; un clic accende o spegne. */
.cob-canali { display: grid; gap: var(--s2); }
.cob-canali-gruppo { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: start; gap: var(--s3); }
.cob-canali-gruppo > .k { padding-top: 5px; font-size: var(--t2); font-weight: 600; color: var(--testo-2); }
.cob-canali-gruppo > div { display: flex; flex-wrap: wrap; gap: 6px; }
.cob-canali form { margin: 0; }
.cob-canale { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border: 1px dashed var(--bordo-forte); border-radius: 999px;
              background: var(--superficie); color: var(--testo-3); font: inherit; font-size: var(--t2); font-weight: 600; white-space: nowrap; cursor: pointer;
              transition: background .12s, color .12s, border-color .12s; }
.cob-canale::first-letter { text-transform: uppercase; }
.cob-canale:hover { border-color: var(--ambra-bordo); color: var(--ambra); background: var(--ambra-tenue); }
.cob-canale.acceso { border: 0; background: var(--ambra-tenue); box-shadow: inset 0 0 0 1px var(--ambra-bordo); color: var(--ambra); }
.cob-canale.acceso:hover { background: #FDE7C7; }
.cob-canale.fisso { cursor: default; opacity: .75; }

/* FOTO E DOCUMENTI: riquadri tutti uguali - fondo grigio appena accennato
   (un'etichetta chiara su bianco spariva), la foto intera (contain: tagliata
   non si legge), il PDF come un foglio dentro, ritagliato sul contenuto
   (effetti.js). In lettura quadrati piccoli in fila, in modifica piu' grandi
   col nome e i comandi. */
.cob-galleria { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s3); min-width: 0; }
html.js .cob-anno:not(.in-modifica) .cob-galleria { grid-template-columns: repeat(auto-fill, 104px); gap: var(--s2); }
.cob-foto { position: relative; margin: 0; min-width: 0; }
.cob-foto > a:not(.cob-foto-scarica) { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--raggio); overflow: hidden;
                background: radial-gradient(120% 120% at 30% 20%, #FBFBFC, #EEF0F3); box-shadow: inset 0 0 0 1px var(--bordo-tenue); cursor: zoom-in; }
html.js .cob-anno:not(.in-modifica) .cob-foto > a:not(.cob-foto-scarica) { aspect-ratio: 1; }
/* IL PASSE-PARTOUT (14/10/2026, "le foto spesso fan cacare"): il fondo e' un
   cartoncino chiaro, la foto ci sta appoggiata sopra con un margine e la sua
   ombra (drop-shadow segue la foto vera, anche dentro contain). */
.cob-foto img { width: 100%; height: 100%; padding: 10px; object-fit: contain; display: block; transition: transform .2s;
                filter: drop-shadow(0 1px 1.5px rgba(16, 24, 40, .16)) drop-shadow(0 6px 12px rgba(16, 24, 40, .10)); }
html.js .cob-anno:not(.in-modifica) .cob-foto img { padding: 8px; }
.cob-foto > a:not(.cob-foto-scarica):hover img, .cob-foto > a:not(.cob-foto-scarica):hover canvas { transform: scale(1.04); }
.cob-foto[draggable="true"] { cursor: grab; }
.cob-foto.in-volo { opacity: .4; }
.cob-doc { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
           padding: var(--s3); color: var(--testo-2); text-align: center; }
.cob-doc > svg { color: var(--rosso); }
.cob-doc b { max-width: 100%; font-size: var(--t2); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere;
             display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cob-doc small { padding: 1px 6px; border-radius: 4px; background: var(--rosso-tenue); color: var(--rosso);
                 font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.cob-doc canvas { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; transition: transform .2s;
                  filter: drop-shadow(0 1px 1.5px rgba(16, 24, 40, .16)) drop-shadow(0 6px 12px rgba(16, 24, 40, .10)); }
.cob-doc.con-anteprima { padding: 0; justify-content: flex-end; }
.cob-doc.con-anteprima > svg { display: none; }
.cob-doc.con-anteprima small { position: absolute; z-index: 1; top: 6px; left: 6px; }
.cob-doc.con-anteprima b { position: relative; z-index: 1; align-self: stretch; padding: 5px 8px; color: var(--testo-2); text-align: left; font-size: var(--t1);
                           background: rgba(255, 255, 255, .92); border-top: 1px solid var(--bordo-tenue); -webkit-line-clamp: 1; }
html.js .cob-anno:not(.in-modifica) .cob-doc b { display: none; }
/* La copertina, in modifica: la stella in alto a sinistra. */
.cob-anno.in-modifica .cob-foto.prima::before, html:not(.js) .cob-foto.prima::before {
  content: "★"; position: absolute; z-index: 2; top: 6px; left: 6px; display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 6px; background: rgba(255, 255, 255, .92); color: var(--ambra); font-size: 12px; line-height: 1; pointer-events: none;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .2); }
.cob-anno.in-modifica .cob-foto.prima.e-pdf .cob-doc.con-anteprima small { left: 32px; }
/* I comandi di una foto (per prima, togli): in modifica, sempre visibili. */
.cob-foto-comandi { position: absolute; z-index: 2; top: 6px; right: 6px; display: flex; gap: 4px; }
.cob-foto-comandi form { margin: 0; }
.cob-foto-comandi button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0;
                           border-radius: var(--raggio); background: rgba(16, 24, 40, .62); color: #FFF; cursor: pointer; transition: background .15s; }
.cob-foto-comandi button:hover { background: var(--rosso); }
.cob-foto-comandi form[action$="/principale"] button:hover { background: var(--ambra); }
/* Scarica (sempre) e Sostituisci (in modifica), 0214: gli stessi tasti scuri sulla foto. */
.cob-foto-scarica, .cob-foto-sostituisci { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--raggio);
                                           background: rgba(16, 24, 40, .62); color: #FFF; cursor: pointer; transition: background .15s; }
.cob-foto-scarica { position: absolute; z-index: 2; left: 6px; top: 6px; }
.cob-foto-scarica:hover, .cob-foto-sostituisci:hover { background: var(--blu); color: #FFF; }

/* Il posto per aggiungere i file, in modifica: largo quanto la carta, tratteggiato. */
.cob-carica { margin: 0; }
.cob-carica label { position: relative; display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4);
                    border: 1.5px dashed var(--bordo-forte); border-radius: var(--raggio); background: var(--superficie); color: var(--testo-2);
                    cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.cob-carica label:hover { border-color: var(--blu); background: var(--blu-tenue); color: var(--blu-scuro); }
.cob-carica label > span { display: grid; gap: 1px; text-align: left; }
.cob-carica b { font-size: var(--t3); font-weight: 600; }
.cob-carica small { font-size: var(--t2); color: var(--testo-3); }
.cob-carica input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* I file in viaggio: la miniatura locale col suo avanzamento, finche' il
   server non ha risposto. Rossa se non e' passata. */
.cob-arrivo, .cob-in-arrivo { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.cob-arrivo { margin-top: var(--s3); }
.cob-in-arrivo { padding: var(--s3) var(--fianco); border-bottom: 1px solid var(--bordo-tenue); }
.cob-arrivo[hidden], .cob-in-arrivo[hidden] { display: none; }
.cob-viaggio { position: relative; aspect-ratio: 1; border-radius: var(--raggio); overflow: hidden;
               background: var(--sfiora); box-shadow: inset 0 0 0 1px var(--bordo); }
.cob-viaggio img { width: 100%; height: 100%; object-fit: cover; opacity: .5; transition: opacity .2s; }
.cob-viaggio .cob-viaggio-doc { display: grid; place-items: center; height: 100%; color: var(--testo-3); }
.cob-viaggio i { position: absolute; left: 5px; right: 5px; bottom: 5px; height: 4px; border-radius: 2px;
                 background: rgba(255, 255, 255, .85); box-shadow: 0 0 0 1px rgba(16, 24, 40, .08); overflow: hidden; }
.cob-viaggio i b { display: block; width: var(--fatto, 0%); height: 100%; border-radius: 2px; background: var(--blu); transition: width .15s; }
.cob-viaggio.fatto img { opacity: 1; }
.cob-viaggio.fatto i b { background: var(--verde-vivo); }
.cob-viaggio.errore { box-shadow: inset 0 0 0 2px var(--rosso); }
.cob-viaggio.errore i b { width: 100%; background: var(--rosso); }

/* I LINK ("possono essere n e sono fondamentali"). In lettura pastiglie col
   nome (o il sito), l'indirizzo nel fumetto; in modifica uno per riga con
   l'indirizzo e la x, e sotto il campo per incollarne altri. */
.cob-link ul { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; }
.cob-link-voce { position: relative; display: flex; align-items: center; min-width: 0; }
.cob-link-voce + .cob-link-voce { border-top: 1px solid var(--bordo-tenue); }
.cob-link-voce a { flex: 1 1 auto; display: grid; grid-template-columns: auto minmax(0, max-content) minmax(0, 1fr); align-items: center; gap: 8px;
                   min-width: 0; padding: 8px 40px 8px 12px; color: var(--testo); font-size: var(--t3); }
.cob-link-voce a:hover { background: var(--riga-sfiora); }
.cob-link-voce a:hover b { color: var(--blu); }
.cob-link-voce svg { color: var(--testo-3); }
.cob-link-voce b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cob-link-voce small { color: var(--testo-3); font-size: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cob-link-voce form { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); margin: 0; }
.cob-link-voce form button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
                             background: transparent; color: var(--testo-4); font-size: 15px; line-height: 1; cursor: pointer; }
.cob-link-voce form button:hover, .cob-link-voce form button:focus-visible { background: var(--rosso); color: #FFF; }

/* I LINK DEL COBRANDING (20/10/2026, Layout::cobrandingLinks): una riga per link con la sua
   schermata accanto (o com'e' messa: in arrivo, non riuscita), il nome, sotto lo stato e la data
   di pubblicazione, a destra la casella e in modifica la crocetta. Oltre otto, gli altri a richiesta. */
.cob-l-elenco { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; }
.cob-l { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "foto testo togli" "foto comandi togli";
         align-items: center; gap: 6px var(--s3); padding: 10px 12px; min-width: 0; }
html.js .cob-anno:not(.in-modifica) .cob-l { grid-template-areas: "foto testo togli"; }
.cob-l-comandi { grid-area: comandi; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.cob-l-comandi .cob-casella { margin: 0; width: 210px; max-width: 100%; }
.cob-l-data-campo { margin: 0; }
.cob-l-data-campo label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t2); color: var(--testo-3); white-space: nowrap; }
.cob-l-data-campo input { height: 28px; padding: 0 8px; border: 1px solid var(--bordo); border-radius: 8px; background: #FFF; color: var(--testo); font: inherit; font-size: var(--t2); }
.cob-l-data-campo input:focus-visible { outline: none; border-color: var(--blu); box-shadow: 0 0 0 3px var(--blu-tenue); }
.cob-l + .cob-l { border-top: 1px solid var(--bordo-tenue); }
.cob-l-elenco.accorciato .cob-l-oltre { display: none; }
/* In modifica tutti, sempre: dopo ogni salvataggio la carta si ridisegna e non deve richiudersi a otto. */
.cob-anno.in-modifica .cob-l-elenco.accorciato .cob-l-oltre { display: grid; }
.cob-anno.in-modifica .cob-l-tutti { display: none; }
.cob-l-foto { grid-area: foto; align-self: start; display: grid; place-items: center; width: 64px; height: 48px; border-radius: 8px; overflow: hidden; background: var(--sfiora); box-shadow: inset 0 0 0 1px var(--bordo-tenue); cursor: zoom-in; }
.cob-l-foto img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cob-l-foto.vuota { cursor: default; color: var(--testo-4); }
.cob-l-foto.in-arrivo { color: var(--blu); background: var(--blu-tenue); }
.cob-l-foto.errore { color: var(--testo-4); }
.cob-l-testo { grid-area: testo; display: grid; gap: 2px; min-width: 0; }
.cob-l-nome { display: flex; align-items: baseline; gap: 8px; min-width: 0; color: var(--testo); }
.cob-l-nome b { flex: 0 0 auto; font-weight: 600; font-size: var(--t3); }
.cob-l-nome small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t2); color: var(--testo-3); }
.cob-l-nome:hover b { color: var(--blu); }
.cob-l-sotto { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font-size: var(--t2); color: var(--testo-3); }
.cob-l-stato { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.cob-l-stato.fatto { color: var(--verde); }
.cob-l-stato.in-arrivo { color: var(--blu); }
.cob-l-stato.errore { color: var(--ambra); }
.cob-l-rifai, .cob-l-togli { margin: 0; }
.cob-l-data { white-space: nowrap; }
.cob-l-rifai button { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border: 0; border-radius: 999px; cursor: pointer;
                      background: var(--sfiora); color: var(--testo-2); font: inherit; font-size: var(--t1); font-weight: 600; }
.cob-l-rifai button:hover { background: var(--sfiora-scuro); }
/* Sostituisci (27/10/2026): la stessa pastiglia di Rifai, su un'etichetta col campo file nascosto. */
label.cob-l-sostituisci { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px; cursor: pointer;
  background: var(--sfiora); color: var(--testo-2); font-size: var(--t1); font-weight: 600; }
label.cob-l-sostituisci:hover { background: var(--sfiora-scuro); }
.cob-l-togli { grid-area: togli; }
.cob-l-togli button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
                      background: transparent; color: var(--testo-3); font-size: 18px; line-height: 1; }
.cob-l-togli button:hover { background: var(--rosso); color: #FFF; }
.cob-l-tutti { margin-top: 6px; padding: 6px 14px; border: 0; border-radius: 999px; cursor: pointer; background: var(--sfiora); color: var(--testo-2);
               font: inherit; font-size: var(--t3); font-weight: 600; }
.cob-l-tutti:hover { background: var(--sfiora-scuro); }
/* Aggiungere un link: l'indirizzo a tutta riga, sotto casella, data e Aggiungi; l'aiuto in fondo. */
.cob-l-aggiungi { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; margin-top: var(--s3); padding: 10px; border-radius: var(--raggio);
                  border: 1px dashed var(--bordo); background: var(--sfiora); }
.cob-l-aggiungi-link { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; color: var(--testo-3); }
.cob-l-aggiungi-link input { flex: 1; min-width: 0; }
.cob-l-aggiungi select { min-width: 0; }
.cob-l-aggiungi-data { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t2); color: var(--testo-3); white-space: nowrap; }
.cob-l-aggiungi-data input { width: auto; }
.cob-link-aiuto { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; color: var(--testo-3); font-size: var(--t2); }
/* Tutti insieme: la riga ambra sopra le foto, una tendina sola. */
.cob-associa-tutti { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); margin: 0; padding: 8px 12px; border-radius: var(--raggio);
                     border: 1px dashed var(--ambra-bordo); background: var(--ambra-tenue); color: var(--ambra); font-size: var(--t3); }
.cob-associa-tutti span { display: inline-flex; align-items: center; gap: 6px; }
.cob-associa-tutti .cob-casella { margin: 0; min-width: 220px; }
@media (max-width: 700px) {
  .cob-l { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .cob-l-foto { width: 56px; height: 42px; }
  .cob-l-aggiungi { grid-template-columns: minmax(0, 1fr); }
}

/* LA CASELLA DI UN ALLEGATO (0141, 20/10/2026; rifatta lo stesso giorno: "devi permettere la
   modifica solo quando siamo in modifica... anche graficamente il tutto e' molto discutibile").
   In MODIFICA una tendina sobria, bianca col bordo sottile, ambra solo finche' la casella non e'
   detta; la freccina e' un segno a parte (::after), non lo sfondo della tendina: con lo sfondo, al
   passaggio del mouse qualche browser la ripeteva. In LETTURA il nome della casella e' un segno:
   sulla foto in basso, nella riga del link accanto allo stato. */
.cob-casella { position: relative; display: block; margin: 6px 0 0; }
/* Nella riga dell'anno, in lettura: quanti sono ancora senza casella; un clic apre la modifica. */
.cob-da-associare { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px dashed var(--ambra-bordo); cursor: pointer;
                    background: var(--ambra-tenue); color: var(--ambra); font: inherit; font-size: var(--t2); font-weight: 600; white-space: nowrap; }
.cob-da-associare:hover { border-style: solid; }
.cob-casella::after { content: ''; position: absolute; top: 50%; right: 10px; width: 6px; height: 6px; margin-top: -5px; pointer-events: none;
                      border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); color: var(--testo-3); }
.cob-casella-scelta { width: 100%; max-width: 100%; height: 28px; padding: 0 26px 0 10px; border-radius: 8px; cursor: pointer;
                      appearance: none; -webkit-appearance: none; background: #FFF; background-image: none;
                      border: 1px solid var(--bordo); color: var(--testo); font: inherit; font-size: var(--t2); font-weight: 500;
                      text-overflow: ellipsis; transition: border-color .15s, box-shadow .15s; }
.cob-casella-scelta:hover { border-color: var(--testo-4); background-image: none; }
.cob-casella-scelta:focus-visible { outline: none; border-color: var(--blu); box-shadow: 0 0 0 3px var(--blu-tenue); }
.cob-casella-scelta:not(.scelta) { border-style: dashed; border-color: var(--ambra-bordo); background-color: var(--ambra-tenue); color: var(--ambra); font-weight: 600; }
.cob-casella:has(.cob-casella-scelta:not(.scelta))::after { color: var(--ambra); }
.cob-casella-scelta:disabled { cursor: not-allowed; border-style: solid; border-color: var(--bordo); color: var(--testo-4); background-color: var(--sfiora); }
.cob-casella-segno { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 2px 8px; border-radius: 6px; pointer-events: none;
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                     font-size: 10px; font-weight: 600; color: var(--testo-2); background: rgba(255, 255, 255, .94); box-shadow: 0 0 0 1px var(--bordo-tenue), 0 1px 2px rgba(16, 24, 40, .08); }
.cob-l-sotto .cob-casella-segno { position: static; padding: 1px 7px; font-size: var(--t1); background: var(--sfiora); box-shadow: none; }
html.js .cob-anno:not(.in-modifica) .cob-link ul { display: flex; flex-wrap: wrap; gap: 6px; border: 0; border-radius: 0; overflow: visible; }
html.js .cob-anno:not(.in-modifica) .cob-link-voce { border: 0; }
html.js .cob-anno:not(.in-modifica) .cob-link-voce a { display: inline-flex; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--bordo);
                                                     border-radius: 999px; background: var(--superficie); font-size: var(--t2); }
html.js .cob-anno:not(.in-modifica) .cob-link-voce a:hover { border-color: var(--blu); background: var(--riga-sfiora); }
html.js .cob-anno:not(.in-modifica) .cob-link-voce small { display: none; }
.cob-link-aggiungi { display: grid; grid-template-columns: auto minmax(0, 2fr) minmax(0, 1fr) auto; align-items: center; gap: var(--s2); margin: 0; }
.cob-link-aggiungi > svg { color: var(--testo-3); }
.cob-link-aggiungi .campo { min-width: 0; }

/* La nota: in lettura su un fondino, in modifica il campo. */
.cob-nota { font-size: var(--t3); line-height: 1.5; color: var(--testo-2); max-width: 64ch; }
.cob-nota .campo-valore { padding: 2px 6px; margin: -2px -6px; }
html.js .cob-anno:not(.in-modifica) .cob-nota { padding: var(--s2) var(--s3); border-radius: var(--raggio); background: var(--sfiora); }

/* Cosa si vede in quale modo. */
html.js .cob-anno:not(.in-modifica) .solo-modifica,
html.js .cob-anno.in-modifica .solo-lettura,
html.js .cob-anno:not(.in-modifica) .cob-foto-comandi,
html.js .cob-anno:not(.in-modifica) .cob-link-voce form,
html.js .cob-anno:not(.in-modifica) .cob-link-aggiungi { display: none !important; }
html:not(.js) .solo-lettura { display: none !important; }

@media (max-width: 700px) {
  /* Il telefono: la sintesi va sotto l'anno, e il contenuto parte da li'. */
  .cobranding { --cob-rientro: calc(var(--cob-freccia) + var(--s3)); }
  .cob-anno { padding: var(--s4); }
  .cob-testa { grid-template-columns: var(--cob-freccia) auto minmax(0, 1fr) auto; }
  .cob-sintesi { grid-column: 2 / -1; grid-row: 2; }
  html.js .cob-anno:not(.in-modifica) .cob-galleria { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .cob-canali-gruppo { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .cob-comandi .bottone { padding: 0 10px; }
  .cob-link-aggiungi { grid-template-columns: auto minmax(0, 1fr); }
  .cob-link-aggiungi .campo[name="didascalia"], .cob-link-aggiungi .bottone { grid-column: 2; }
}

/* LE ETICHETTE ORDINATE (13/10/2026, _etichette.php): il box sotto il
   cobranding. Data, chi (col numero d'ordine sotto), cosa (col tipo), quante. */
.etichette-corpo { padding: var(--s2) var(--fianco) var(--s4); }
.etichette-tabella { width: 100%; border-collapse: collapse; table-layout: fixed; }
.etichette-tabella col.col-quando { width: 96px; }
.etichette-tabella col.col-quante { width: 96px; }
.etichette-tabella col.col-ordine { width: 112px; }
.etichette-tabella td.etichette-ordine { font-size: var(--t2); color: var(--testo-4); white-space: nowrap; }
.etichette-tabella th { padding: 0 var(--s2) 8px; text-align: left; font-size: var(--t2); font-weight: 600; color: var(--testo-3);
                        border-bottom: 1px solid var(--bordo); white-space: nowrap; }
.etichette-tabella td { padding: 10px var(--s2); vertical-align: middle; border-bottom: 1px solid var(--bordo-tenue); font-size: var(--t4); color: var(--testo-2); }
.etichette-tabella tr:last-child td { border-bottom: 0; }
.etichette-tabella th:first-child, .etichette-tabella td:first-child { padding-left: 0; }
.etichette-tabella th:last-child, .etichette-tabella td:last-child { padding-right: 0; }
.etichette-tabella .numero { text-align: right; }
.etichette-tabella td.numero b { font-size: var(--t5); color: var(--testo); }
.etichette-quando { font-size: var(--t3); color: var(--testo-3); white-space: nowrap; }
.etichette-chi { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--testo); }
a.etichette-chi:hover { color: var(--blu); }
.etichette-cosa { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etichette-ordinate { margin-top: var(--s5); }

/* LE DECISIONI in cima: importanza e probabilita', su una riga. */
.cob-decisioni { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); padding: var(--s3) var(--fianco);
                 border-bottom: 1px solid var(--bordo-tenue); }
.cob-decisione { display: inline-flex; align-items: center; gap: var(--s3); min-width: 0; font-size: var(--t3); }
.cob-decisione .k { color: var(--testo-3); }
.cob-decisione .campo-valore { padding: 2px 4px; margin: 0; min-height: 0; display: inline-flex; align-items: center; }   /* il gettone sulla linea dell'etichetta (29/10/2026) */
.cob-decisione .campo-valore.e-vuoto { color: var(--blu); font-size: var(--t3); }

/* NESSUN ANNO: la sezione intera e' il posto dove mollare le foto. */
.cob-vuoto { display: flex; flex-direction: column; align-items: center; gap: var(--s2); margin: var(--s5) var(--fianco);
             padding: var(--s10) var(--s5); border: 2px dashed var(--bordo-forte); border-radius: 16px; text-align: center;
             background: linear-gradient(180deg, #FAFBFC, #F3F5F8); transition: border-color .15s, background .15s; }
.cob-vuoto-icona { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
                   background: var(--ambra-tenue); color: var(--ambra); }
.cob-vuoto-titolo { margin: var(--s2) 0 0; font-size: var(--t5); font-weight: 600; color: var(--testo); }
.cob-vuoto-sotto { margin: 0; max-width: 46ch; font-size: var(--t3); line-height: 1.5; color: var(--testo-3); }
.cob-vuoto-scegli { position: relative; margin-top: var(--s3); overflow: hidden; }
.cob-vuoto-scegli input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }

/* MENTRE SI TRASCINA (effetti.js mette .trascina sulla sezione): ogni anno
   dice "Rilascia nel 2025", e quello dove finirebbe si accende. Mollando
   fuori da una carta si va nell'anno in corso: se non c'e', compare in cima
   il suo posto, "Nuovo anno 2026". */
.cob-rilascia { position: absolute; inset: 6px; z-index: 2; display: none; place-items: center; pointer-events: none;
                border: 2px dashed var(--bordo-forte); border-radius: 14px; background: rgba(255, 255, 255, .6); }
.cob-rilascia span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
                     background: var(--superficie); box-shadow: var(--ombra-media); color: var(--testo-2); font-size: var(--t3); }
.cobranding.trascina .cob-rilascia { display: grid; }
.cobranding.trascina .sopra > .cob-rilascia { border-color: var(--blu); background: rgba(234, 241, 254, .82); }
.cobranding.trascina .sopra > .cob-rilascia span { background: var(--blu); color: #FFF; box-shadow: 0 4px 14px rgba(37, 99, 235, .35); }
.cobranding.trascina.sposta .cob-anno.da-qui > .cob-rilascia { display: none; }
.cob-nuovo-bersaglio { display: none; align-items: center; justify-content: center; gap: 8px; height: 64px;
                       margin: var(--s4) var(--fianco) 0; border: 2px dashed var(--bordo-forte); border-radius: 14px;
                       color: var(--testo-3); font-size: var(--t3); }
.cobranding.trascina .cob-nuovo-bersaglio { display: flex; }
.cobranding.trascina.sposta .cob-nuovo-bersaglio { display: none; }
.cob-nuovo-bersaglio.sopra, .cob-vuoto.sopra { border-color: var(--blu); background: var(--blu-tenue); color: var(--blu-scuro); }

/* Il piede: un anno nuovo (solo quelli che non ci sono), e il trascinamento. */
.cob-piede { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3);
             padding: var(--s3) var(--fianco); border-top: 1px solid var(--bordo-tenue); }
.cob-nuovo-anno { display: flex; align-items: center; gap: var(--s2); margin: 0; }
.cob-nuovo-anno .campo { width: 88px; height: var(--comando); flex: 0 0 auto; }
.cob-nuovo-anno .bottone { height: var(--comando); flex: 0 1 auto; justify-content: center; min-width: 0; }
.cob-suggerimento { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--t2); color: var(--testo-4); }
.cob-suggerimento svg { flex: 0 0 auto; }

/* LA FOTO GRANDE (lightbox): sopra la pagina, su fondo scuro; frecce e
   tastiera per scorrere le foto del marchio, Esc o clic fuori per chiudere. */
dialog.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0;
                  border: none; background: transparent; color: #FFF; overflow: hidden; }
dialog.lightbox::backdrop { background: rgba(8, 12, 22, .88); backdrop-filter: blur(4px); }
dialog.lightbox:focus { outline: none; }
.lightbox-scena { position: absolute; inset: 56px 76px 64px; display: flex; align-items: center; justify-content: center; }
.lightbox-scena img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px;
                      box-shadow: 0 20px 60px rgba(0, 0, 0, .5); background: #FFF;
                      animation: lightbox-entra .18s ease-out; }
@keyframes lightbox-entra { from { opacity: 0; transform: scale(.97); } }
.lightbox-pdf { width: min(100%, 1000px); height: 100%; border: 0; border-radius: 8px; background: #FFF;
                animation: lightbox-entra .18s ease-out; }
.lightbox-piede { position: absolute; left: 0; right: 0; bottom: 20px; display: flex; justify-content: center;
                  align-items: center; gap: var(--s4); font-size: var(--t3); color: rgba(255, 255, 255, .85); }
.lightbox-piede a { color: #FFF; text-decoration: underline; text-underline-offset: 3px; }
.lightbox-conta { color: rgba(255, 255, 255, .55); font-variant-numeric: tabular-nums; }
.lightbox button { position: absolute; display: grid; place-items: center; width: 44px; height: 44px;
                   border: none; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #FFF;
                   cursor: pointer; transition: background .15s; }
.lightbox button:hover { background: rgba(255, 255, 255, .25); }
.lightbox-chiudi { top: 12px; right: 12px; }
.lightbox-prima { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox-dopo { right: 16px; top: 50%; transform: translateY(-50%) rotate(180deg); }
.lightbox button[hidden] { display: none; }
@media (max-width: 700px) {
  .lightbox-scena { inset: 60px 8px 110px; }
  .lightbox-prima, .lightbox-dopo { top: auto; bottom: 56px; transform: none; }
  .lightbox-dopo { transform: rotate(180deg); }
  .cob-suggerimento { display: none; }
  .cob-vuoto { padding: var(--s8) var(--s4); }
}

/* I comandi che tolgono qualcosa: sommessi, non somigliano a un pulsante da
   premere per sbaglio, e rossi solo quando ci si passa sopra. La conferma la
   chiede effetti.js, via data-conferma. */
.azione-tenue { display: inline; }
/* Come piede di un riquadro resta un blocco: inline, il filetto sopra si
   fermava sotto l'etichetta. */
.blocco-comando.azione-tenue { display: block; }
.azione-tenue button { border: none; background: none; padding: 0; cursor: pointer;
                       font-size: var(--t2); color: var(--testo-3); }
.azione-tenue button:hover { color: var(--rosso); text-decoration: underline; }

/* Un riquadro per ogni azienda in cui la persona lavora. */
.lavori { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4) var(--s5) var(--s5); }
.azienda-box { border: 1px solid var(--bordo); border-radius: var(--raggio); }
/* La principale si riconosce dal segno "Principale" in testa e da un'ombra
   appena piu' presente: niente bordo in tinta (Mattia, 23/09). */
.azienda-box.principale { box-shadow: var(--ombra-media); }
.azienda-testa { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
                 padding: var(--s3) var(--s4); border-bottom: 1px solid var(--bordo-tenue); }
.azienda-chi { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.azienda-nome { font-size: var(--t5); font-weight: 600; color: var(--testo); }
.azienda-nome:hover { color: var(--blu); }
.azienda-sotto { font-size: var(--t3); color: var(--testo-3); }
.azienda-segni { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.azienda-box .campi { padding: var(--s2) var(--s4); }

/* DOVE LAVORAVA (05/10/2026): chiuso in fondo al riquadro, in grigio. Si apre
   solo se lo si cerca: e' la storia della persona, non dove la si trova oggi. */
.passato { padding: var(--s2) var(--s5) var(--s3); border-top: 1px solid var(--bordo-tenue); }
.passato > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--s2);
                     padding: var(--s1) 0; font-size: var(--t3); color: var(--testo-3); }
.passato > summary::-webkit-details-marker { display: none; }
.passato > summary:hover { color: var(--testo-2); }
.passato[open] > summary { margin-bottom: var(--s2); }
.lavoro-passato { display: flex; align-items: baseline; gap: var(--s2) var(--s3); flex-wrap: wrap; padding: var(--s2) 0;
                  border-top: 1px solid var(--bordo-tenue); font-size: var(--t3); }
.lavoro-passato-nome { font-weight: 500; color: var(--testo-2); }
.lavoro-passato-nome:hover { color: var(--blu); }
.lavoro-torna { margin-left: auto; }
.lavoro-torna button:hover { color: var(--blu); }
/* Lavora ancora qui: "Si'" e, accanto e piccolo, "Non piu'". */
/* NON LAVORA PIU' QUI (05/10/2026): il piede del riquadro dell'azienda, a
   destra e quieto; si accende passandoci sopra. */
.azienda-piede { display: flex; justify-content: flex-end; padding: 6px var(--s4) 10px; border-top: 1px solid var(--bordo-tenue); }
.lavora-lascia { margin: 0; }
.lavora-lascia button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0; border-radius: var(--raggio);
                        background: none; font: inherit; font-size: var(--t2); color: var(--testo-3); cursor: pointer;
                        transition: background .12s, color .12s; }
.lavora-lascia button:hover { background: var(--rosso-tenue); color: var(--rosso); }
/* CAMBIA AZIENDA (04/11/2026), accanto a "Non lavora piu' qui", stesso aspetto; aperto, il cercatore a tutta riga. */
.azienda-piede:has(.cambia-azienda) { flex-wrap: wrap; gap: 4px; }
/* ELIMINA (04/11/2026): a sinistra, meno in vista degli altri due - grigio chiaro, rosso solo al passaggio */
.lavoro-elimina { margin-right: auto; }
.lavoro-elimina button { color: var(--testo-4, var(--testo-3)); opacity: .75; }
.lavoro-elimina button:hover { opacity: 1; }
.azienda-piede:has(.cambia-azienda[open]) { justify-content: flex-start; }
.cambia-azienda { margin: 0; }
.cambia-azienda > summary { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--raggio);
  list-style: none; font-size: var(--t2); color: var(--testo-3); cursor: pointer; transition: background .12s, color .12s; }
.cambia-azienda > summary::-webkit-details-marker { display: none; }
.cambia-azienda > summary:hover, .cambia-azienda[open] > summary { background: var(--blu-tenue); color: var(--blu); }
.azienda-piede:has(.cambia-azienda[open]) .cambia-azienda { flex: 1 1 100%; min-width: 0; order: -1; }
.cambia-azienda-modulo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); align-items: start; margin: var(--s2) 0; }
.cambia-azienda-modulo .pesca { min-width: 0; }
.censire-lascia[hidden] { display: none; }
/* Elimina contatto, in fondo alla scheda: lo stile di "Non lavora piu' qui". */
.elimina-contatto { grid-column: 1 / -1; justify-self: end; }

/* ---------- modifica al volo ---------- */
/* Un valore modificabile deve sembrarlo PRIMA di cliccarlo: il riquadro
   compare passandoci sopra. Resta dentro la sua riga, se no tocca quella sotto. */
.campo-valore[data-campo] { display: block; min-height: 26px; cursor: text;
                            margin: -3px calc(var(--s2) * -1); padding: 3px var(--s2);
                            border-radius: 6px; transition: background .1s; }
.campo-valore[data-campo]:hover { background: var(--blu-tenue); }
/* Una scelta (gettoni, tendine) si clicca, non si scrive: la manina, mai il cursore di testo (29/10/2026, Mattia: "il
   cursor nei gettoni deve far capire che e' cliccabile e modificabile"). Il testo libero resta col cursore di testo. */
.campo-valore[data-campo][data-tipo="select"], .campo-valore[data-campo][data-tipo="select"] *,
.campo-valore[data-campo][data-tipo="date"], .campo-valore[data-campo][data-tipo="date"] * { cursor: pointer; }
.campo-valore.in-modifica, .campo-valore.in-modifica:hover { background: none; }
/* Vuoto e modificabile: un invito nel colore delle cose su cui si agisce.
   Vuoto e basta (sola lettura) e' un trattino chiaro. */
.campo-valore.e-vuoto[data-campo] { color: var(--blu); font-weight: 400; }
.campo-valore.e-vuoto[data-campo]:hover { color: var(--blu-scuro); }
.campo-valore.e-vuoto { color: var(--testo-4); }
/* DA COMPILARE, nelle righe campo: lo stesso gettone tratteggiato di "+ lingua",
   "+ ruolo" (details.aggiungi > summary). Prima c'erano due aspetti per la
   stessa cosa: il testo blu grande e il gettone. */
.riga-campo > .campo-valore.e-vuoto[data-campo], .blocco-note > .campo-valore.e-vuoto[data-campo] {
  display: inline-flex; align-items: center; justify-self: start; height: var(--gettone); margin: calc((var(--linea) - var(--gettone)) / 2) 0 0;
  padding: 0 10px; border: 1px dashed var(--bordo-forte); border-radius: 999px; background: none;
  font-size: var(--t3); font-weight: 400; line-height: 1; color: var(--testo-3); cursor: pointer; transition: color .12s, border-color .12s; }
.riga-campo > .campo-valore.e-vuoto[data-campo]:hover, .blocco-note > .campo-valore.e-vuoto[data-campo]:hover { color: var(--blu); border-color: var(--blu); background: none; }

/* Stesse misure del valore che sostituisce: aprendo l'editor la riga non
   si muove di un pixel. */
.campo-al-volo { display: block; width: calc(100% + 2 * var(--s2)); min-height: 26px;
                 margin: -3px calc(var(--s2) * -1); padding: 2px calc(var(--s2) - 1px);
                 font: inherit; font-size: var(--t4); color: var(--testo);
                 border: 1px solid var(--blu); border-radius: 6px;
                 background: #FFF; box-shadow: 0 0 0 3px var(--blu-tenue); outline: none; }
textarea.campo-al-volo { min-height: 88px; line-height: 1.5; resize: vertical; }
select.campo-al-volo { padding: 2px 4px; }

/* I TRE STATI DI UN CAMPO CHE SI SALVA DA SE'. Prima: mentre salvava il
   valore diventava trasparente e pulsava (sembrava spento, non al lavoro), il
   salvataggio era un lampo verde di 900ms che quasi non si vedeva, e l'errore
   richiudeva il campo buttando via quello che si era scritto.
   - IN CORSO: il campo resta com'e', fermo, con la rotella dentro a destra.
   - SALVATO: "salvato" in verde accanto al valore, per due secondi.
   - ERRORE: il campo resta aperto col bordo rosso e il motivo sotto.
   In basso la notifica (.notifica) dice le stesse cose per tutta la pagina. */
[data-campo] { position: relative; }
[data-campo].in-corso .campo-al-volo { padding-right: 28px; color: var(--testo-2);
                                       background: var(--sfiora); cursor: progress; }
[data-campo].in-corso::after { content: ""; position: absolute; top: 7px; right: 6px;
                               width: 12px; height: 12px; border-radius: 50%;
                               border: 2px solid var(--blu); border-right-color: transparent;
                               animation: gira .6s linear infinite; }
[data-campo].appena-salvato { animation: salvato-fondo 1.8s ease-out; }
[data-campo].appena-salvato::after { content: "\2713  salvato"; white-space: pre;
                                     position: absolute; top: 50%; right: 4px;
                                     padding: 1px 8px; border-radius: 999px;
                                     background: var(--verde-tenue); color: var(--verde);
                                     font-size: var(--t2); font-weight: 600; line-height: 18px;
                                     pointer-events: none;
                                     animation: salvato-segno 2s var(--curva) forwards; }
/* Il numero dei follower sta dentro un gettone: li' la scritta non ci sta,
   basta il fondo verde. */
.follower.appena-salvato::after { content: none; }
@keyframes salvato-fondo { 0%, 45% { background-color: var(--verde-tenue); } }
@keyframes salvato-segno {
  0%   { opacity: 0; transform: translateY(-50%) scale(.9); }
  10%  { opacity: 1; transform: translateY(-50%); }
  80%  { opacity: 1; transform: translateY(-50%); }
  100% { opacity: 0; transform: translateY(-50%); }
}
[data-campo].in-errore .campo-al-volo,
[data-campo].in-errore .campo-al-volo:focus { border-color: var(--rosso); box-shadow: 0 0 0 3px var(--rosso-tenue); }
.errore-al-volo { display: flex; align-items: center; gap: 6px; margin-top: 6px;
                  font-size: var(--t3); font-weight: 500; line-height: 1.35; color: var(--rosso); }
.errore-al-volo::before { content: "!"; display: inline-grid; place-items: center;
                          flex: 0 0 16px; width: 16px; height: 16px; border-radius: 50%;
                          background: var(--rosso); color: #FFF; font-size: var(--t1); font-weight: 700; }

/* ---------- accesso ed errore: pagine fuori dall'applicazione ---------- */
.fuori { min-height: 100vh; display: flex; align-items: center; justify-content: center;
         padding: var(--s8) var(--s5); }
.fuori.scuro { background: var(--notte); }
.fuori-colonna { width: 100%; max-width: 380px; display: flex; flex-direction: column;
                 align-items: center; gap: var(--s6); }
.fuori-logo { width: 200px; display: block; }
.fuori:not(.scuro) .fuori-logo { width: 160px; }
.fuori-riquadro { align-self: stretch; display: flex; flex-direction: column; gap: var(--s4);
                  padding: var(--s6); background: var(--superficie);
                  border: 1px solid var(--bordo); border-radius: var(--raggio-g);
                  box-shadow: var(--ombra-alta); }
.fuori-titolo { margin: 0 0 var(--s1); font-size: var(--t6); font-weight: 600; letter-spacing: -.01em; }
.fuori-testo { margin: 0; color: var(--testo-2); line-height: 1.55; }
.fuori-piede { margin: 0; font-size: var(--t3); color: var(--testo-3); line-height: 1.55; text-align: center; }
.fuori.scuro .fuori-piede { color: var(--notte-testo); }
.bottone-google { height: 42px; font-size: var(--t4); gap: var(--s3); }
.fuori-avviso { display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s3);
                border-radius: var(--raggio); font-size: var(--t3); line-height: 1.5; }
.fuori-avviso svg { flex-shrink: 0; margin-top: 1px; }
.fuori-avviso code { font-size: var(--t2); }

/* ---------- movimento ----------
   CONVENZIONE: l'aspetto di un componente sta nella sua regola, il suo
   MOVIMENTO (transition, :active, animazioni) sta qui. Uno stesso selettore
   che compare una volta sopra e una volta qui e' voluto, non un doppione.
   Tutto sotto i 250ms e sotto i 4px: si sente, non si guarda. Due regole:
   nessun contenuto parte nascosto aspettando il JavaScript (le entrate sono
   animazioni CSS che finiscono da sole), e chi ha chiesto al sistema meno
   movimento non ne vede - la regola sta in fondo al foglio. */
/* La curva di iOS: parte decisa e si posa piano, senza rimbalzo. */
:root { --curva: cubic-bezier(.32, .72, 0, 1); }
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
/* Le mail a piu' contatti (0072): la rotella di un invio in partenza gira,
   le scelte si accendono morbide. */
.mail-gira { animation: gira .9s linear infinite; }
.mail-voce, .mail-aggiungi-voce, .mail-modello-carta { transition: border-color .15s, background .15s, box-shadow .2s, transform .15s var(--curva); }
.mail-modello-carta:hover { transform: translateY(-2px); box-shadow: var(--ombra-alta); }
.mail-miniatura iframe { transition: transform .25s var(--curva); }
.mail-miniatura:hover iframe { transform: scale(.5) translateY(-6px); }
.mail-avanza-barra i { transition: width .6s var(--curva); }
.mail-avanza.in-corso .mail-avanza-barra i { animation: mail-scorre 1.4s linear infinite; }
@keyframes mail-scorre { to { background-position: -200% 0; } }
/* Un numero appena cambiato si accende un attimo. */
.mail-cambiato { animation: mail-acceso 1.2s var(--curva); }
.mail-blocco.mail-nuovo { animation: mail-acceso 1.2s var(--curva); }
.mail-blocco, .mail-tela-cambia, .mail-blocco-comandi { transition: background .15s, opacity .15s; }
@keyframes mail-acceso { from { background: var(--blu-tenue); color: var(--blu-scuro); } }

/* LE TRANSIZIONI FRA PAGINE (view transitions: Chrome ed Edge; gli altri
   browser cambiano pagina come sempre). Anche qui un selettore gia' definito
   sopra puo' ricomparire: solo per view-transition-name e quel che gli serve.
   - 09/10/2026, MENO MOVIMENTO ("i testi che si spostano da una parte
     all'altra diventano stucchevoli"): fra una pagina e l'altra solo una
     dissolvenza breve. Via la pagina che entrava di lato, il titolo e il
     nome che volavano dall'elenco alla scheda.
   - La colonna resta ferma, e la pillola della voce attiva scivola da una
     voce all'altra: e' un segno, non un testo. */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .25s; animation-timing-function: var(--curva); }
::view-transition-old(root) { animation: vt-esce .12s ease-out both; }
::view-transition-new(root) { animation: vt-entra .18s ease-out both; }
@keyframes vt-esce { to { opacity: 0; } }
@keyframes vt-entra { from { opacity: 0; } }
.nav { view-transition-name: nav; }
::view-transition-group(nav) { animation: none; }
::view-transition-old(nav) { display: none; }
::view-transition-new(nav) { animation: none; }
/* Durante la transizione ogni elemento con un nome viene disegnato sopra la
   pagina: la pillola copriva la scritta della sua voce. Le voci hanno un nome
   anche loro (in _nav.php) e stanno un gradino sopra la pillola. */
::view-transition-group(nav-pillola) { z-index: 1; }
::view-transition-group(*.voce) { z-index: 2; animation: none; }
::view-transition-old(*.voce) { display: none; }
::view-transition-new(*.voce) { animation: none; }
/* Il nome in testata largo quanto il testo: se fosse largo quanto la pagina,
   passando dal nome della riga si deformerebbe invece di crescere. */
.persona-nome { width: fit-content; }
/* Con la transizione fra pagine, l'entrata dei riquadri sarebbe un secondo
   movimento sopra il primo: resta solo per il primo caricamento. */
html.vt .riquadro, html.vt .blocco, html.vt .coppia, html.vt .code, html.vt .avviso,
html.vt table.elenco tbody tr { animation: none; }

/* La pillola della voce attiva e' un elemento suo: cosi' la transizione la
   fa scivolare da una voce all'altra, invece di spegnerne una e accenderne
   un'altra. */
.nav-voce { position: relative; isolation: isolate; }
.nav-voce.attiva { background: none; box-shadow: none; }
/* La voce attiva e' una lastra di luce, non una riga colorata sul bordo:
   il filo a sinistra e' lo stesso tic del bordino sulle carte, e se n'e'
   andato con lui (Mattia, 23/09). */
.nav-pillola { position: absolute; inset: 0; z-index: -1; border-radius: 10px;
               background: linear-gradient(90deg, rgba(91, 155, 255, .28), rgba(91, 155, 255, .08));
               box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
               view-transition-name: nav-pillola; }
/* Stessa cosa per la sottolineatura della coda attiva: e' .coda-segno, e il
   bordo della coda resta trasparente. */
.coda-segno { position: absolute; left: var(--s2); right: var(--s2); bottom: -1px; height: 2px;
              border-radius: 2px; background: var(--blu); view-transition-name: coda-segno; }

/* La barra in vetro smerigliato che compare in cima quando il titolo esce
   dallo schermo, come la barra di navigazione di iOS. La crea effetti.js;
   un clic riporta in cima. */
.barra-compatta { position: fixed; top: 0; left: var(--menu); right: 0; z-index: 20; height: 52px;
                  display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s8);
                  background: rgba(255, 255, 255, .72); border-bottom: 1px solid rgba(16, 24, 40, .08);
                  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
                  font-size: var(--t5); font-weight: 600; letter-spacing: -.01em; cursor: pointer;
                  opacity: 0; transform: translateY(-8px); pointer-events: none;
                  transition: opacity .3s var(--curva), transform .45s var(--curva); }
.barra-compatta.vista { opacity: 1; transform: none; pointer-events: auto; }

/* Si clicca il NOME, non la riga (30/09): il nome e' il collegamento, e lo
   dice passandoci sopra. La riga si schiarisce ancora, per leggere in fila. */
.nome-link { color: var(--testo); font-weight: 600; text-decoration: none; min-width: 0;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nome-link:hover { color: var(--blu); text-decoration: underline; text-underline-offset: 3px; }
/* Il codice del gestionale accanto al nome, piccolo e tenue (Aziende, 30/09). */
.nome-con-codice { display: inline-flex; align-items: baseline; gap: var(--s2); min-width: 0; max-width: 100%; }
/* La pastiglia del confezionista accanto al nome (13/10/2026): piccola, sul filo del testo. */
.nome-con-codice .segno { flex: 0 0 auto; align-self: center; height: 20px; padding: 0 8px; font-size: 11px; font-weight: 600; }
.codice-piccolo { flex: 0 0 auto; font-size: var(--t1); font-weight: 500; color: var(--testo-4);
                  font-variant-numeric: tabular-nums; letter-spacing: .02em; }

.bottone { transition: background .15s, border-color .15s, box-shadow .2s, transform .15s var(--curva); }
.bottone:active { transform: translateY(1px) scale(.98); }
.bottone-primario:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(37, 99, 235, .38); }
.bottone-primario:active { transform: translateY(0) scale(.97); box-shadow: var(--ombra); }
.bottone-secondario:hover { border-color: var(--bordo-forte); transform: translateY(-1px); box-shadow: var(--ombra-media); }
.bottone-secondario:active { transform: translateY(0) scale(.97); box-shadow: none; }
/* Mentre il modulo parte: una rotella al posto del secondo clic. */
.bottone.in-attesa { pointer-events: none; opacity: .75; }
.bottone.in-attesa::after { content: ""; width: 12px; height: 12px; border-radius: 50%;
                            border: 2px solid currentColor; border-right-color: transparent;
                            animation: gira .6s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

.campo { transition: border-color .15s, box-shadow .2s; }
.nav-voce { transition: background .15s, color .15s; }
.nav-voce svg { transition: transform .2s var(--curva), color .15s; }
.nav-voce:hover svg { transform: translateX(3px); }
/* da telefono l'icona non scivola: l'hover resta attaccato dopo il tocco e la spostava (04/11/2026) */
@media (max-width: 900px), (hover: none) { .nav-voce:hover svg { transform: none; } }
.coda { transition: color .15s, border-color .2s; }
.briciola { transition: color .15s, transform .2s var(--curva); }
.briciola:hover { transform: translateX(-4px); }
table.elenco tbody tr { transition: background .15s; }
/* La riga sotto il mouse si tinge d'azzurro: il grigio della prima versione
   non lo notava nessuno. Niente filo blu a sinistra: un bordo colorato su un
   lato solo non porta informazione. */
table.elenco tbody tr:hover { background: var(--riga-sfiora); }
table.elenco .avatar { transition: transform .25s var(--curva); }
table.elenco tr:hover .avatar { transform: scale(1.14); }
.azienda-box { transition: border-color .15s, box-shadow .25s, transform .25s var(--curva); }
.azienda-box:hover { border-color: var(--bordo-forte); box-shadow: var(--ombra-media); transform: translateY(-1px); }
.segno { transition: background .15s; }
.blocco, .coppia { transition: box-shadow .25s; }
.blocco:hover, .coppia:hover { box-shadow: 0 4px 14px rgba(16, 24, 40, .08), 0 1px 3px rgba(16, 24, 40, .05); }

@keyframes testata-arretra {
  from { opacity: 1; scale: 1; }
  to   { opacity: .68; scale: .99; }
}

/* L'entrata: i riquadri salgono di 10px mentre compaiono, le righe a cascata.
   Oltre la dodicesima riga la cascata si ferma: nessuno aspetta la 25esima. */
/* 09/10/2026: i riquadri compaiono con una dissolvenza breve, senza salire
   e senza cascata; le righe degli elenchi si vedono subito. */
@keyframes sale { from { opacity: 0; } to { opacity: 1; } }
.riquadro, .blocco, .coppia, .code, .avviso, .fuori-riquadro { animation: sale .2s ease-out both; }

/* Modifica al volo: il campo si apre con un mezzo zoom. */
@keyframes apre { from { opacity: .5; transform: scale(.985); } to { opacity: 1; transform: none; } }
.campo-al-volo { animation: apre .14s var(--curva); }
.campo-valore[data-campo] { transition: background .15s, color .15s, box-shadow .4s; }

/* La barra di caricamento in cima, la mette effetti.js al clic su un
   collegamento o all'invio di un modulo. Corre veloce, poi rallenta e aspetta
   la pagina nuova: non arriva mai in fondo da sola. */
.caricamento { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 2px;
               background: linear-gradient(90deg, var(--blu), #60A5FA);
               transform-origin: 0 50%; transform: scaleX(0); opacity: 0; pointer-events: none; }
.caricamento.va { opacity: 1; animation: carica 8s cubic-bezier(.1, .7, .2, 1) forwards; }
/* Finito: corre in fondo e svanisce. Toglierla a meta' sembrava un'interruzione. */
.caricamento.fine { opacity: 0; transform: scaleX(1);
                    transition: transform .25s ease-out, opacity .3s ease .25s; }
@keyframes carica { 0% { transform: scaleX(0); } 8% { transform: scaleX(.4); } 100% { transform: scaleX(.94); } }
/* IN VIAGGIO (04/11/2026): mentre arriva la pagina nuova la vecchia si attenua, cosi' il tocco si sente subito. */
html.in-viaggio .contenuto { opacity: .5; transition: opacity .25s ease; }
@media (prefers-reduced-motion: reduce) { html.in-viaggio .contenuto { transition: none; } }
/* Da telefono la barra sta sotto l'orologio (in cima era nascosta dalla barra di stato) e si vede: piu' alta. */
@media (max-width: 900px) { .caricamento { top: env(safe-area-inset-top, 0px); height: 3px; } }

/* Il suggerimento "/" dentro la ricerca: sparisce quando si scrive. */
.cerca kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
             padding: 1px 6px; border: 1px solid var(--bordo); border-bottom-width: 2px;
             border-radius: 5px; background: var(--sfiora); color: var(--testo-3);
             font: 500 var(--t1)/1.4 var(--testo-font); pointer-events: none; transition: opacity .15s; }
.cerca input:focus ~ kbd, .cerca input:not(:placeholder-shown) ~ kbd { opacity: 0; }


/* =============================================================================
   LA TESTATA DELLA SCHEDA AZIENDA
   Una carta sola che risponde alle prime tre domande: chi e', cosa ha, quanto
   vale. I due giri prima avevano il nome in cima e tutto il resto sparso in
   riquadri dello stesso peso, coi MARCHI in fondo alla colonna di destra -
   e per Manteco un cliente E' i suoi marchi.
   ============================================================================= */
/* .scheda-testata e non .testata: quel nome era gia' preso dalle intestazioni
   degli elenchi, che sono un flex - e due regole con lo stesso nome facevano
   una pagina in cui i marchi si incolonnavano in fondo a destra. */
/* =============================================================================
   IL MASTHEAD
   Era una carta bianca come tutte le altre, e la pagina non aveva un punto da
   cui partire: ordinata e anonima. Adesso la testata e' blu inchiostro - lo
   stesso della colonna, cioe' il colore della casa - e dentro ci stanno le tre
   cose che si guardano per prime: il nome, i marchi, i numeri.
   Il resto della pagina resta chiaro. Il contrasto e' il carattere: non serve
   un colore nuovo, serve che il blocco piu' importante pesi.
   ============================================================================= */
/* LA TESTATA SI ALLONTANA mentre esce dallo schermo: perde colore e arretra di
   un soffio, come se il resto della pagina le passasse davanti. E' legato alla
   POSIZIONE e non a un timer: si muove col dito, si ferma col dito, e torna
   indietro se si torna su - la differenza fra una pagina che risponde e una
   che si limita a scorrere.
   Il riempimento e' `none` apposta: fuori dal suo tratto l'animazione non
   tocca niente, e dove animation-timeline non si conosce dura zero e non
   lascia segno. Con `both` la testata resterebbe sbiadita per sempre - e
   sarebbe l'aspetto normale, non l'effetto. */
.scheda-testata { animation: testata-arretra linear none;
                  animation-timeline: view(); animation-range: exit;
                  margin: var(--s6) var(--s8) var(--s5); padding: var(--s8) var(--s10);
                  /* UNA SFUMATURA CHE SI VEDE. Quella prima era cosi' discreta
                     da non esistere: tre blu a due punti di distanza l'uno
                     dall'altro. Qui c'e' un alone freddo dietro il logo e il
                     nome - dove sta l'identita' - e il blu si chiude quasi nero
                     in basso a destra, sotto i numeri. */
                  background: var(--testata-fondo); box-shadow: var(--testata-ombra);
                  border: none; color: #FFF; border-radius: 14px; }
/* I MARCHI FANNO DA FACCIA AL RECORD: la fila dei cerchi a sinistra del nome,
   come l'avatar di una persona. Galleggiavano sotto la riga meta senza
   appartenere a niente. La misura dei cerchi sta piu' sotto, coi marchi.
   align-items: center - il blocco del nome sta al centro dei cerchi, se no a
   destra c'e' un testo appoggiato in alto e sotto un buco. */
/* TRE COLONNE: marchi, chi e', carta d'identita'. Il nome prende lo spazio
   che resta; i contrassegni stanno allineati a destra, al centro dei cerchi. */
.testata-capo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
                align-items: center; column-gap: var(--s5); }
.testata-chi { min-width: 0; }
/* 40px: e' il nome del cliente, ed e' la prima cosa che si legge. A 30 stava
   sullo stesso piano di tutto il resto. */
.testata-nome { margin: 0; font-size: 40px; line-height: 1.05; letter-spacing: -.035em;
                color: #FFF; }
.testata-segni { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
                 justify-content: flex-end; }
/* Dove non c'e' posto per nome e contrassegni sulla stessa riga, i
   contrassegni scendono SOTTO IL NOME, nella sua colonna: stesso filo
   sinistro di nome e meta, invece di schiacciare il nome. */
@media (max-width: 1360px) {
  .testata-segni { grid-column: 2; justify-content: flex-start; margin-top: var(--s3); }
}
/* Sul fondo scuro i contrassegni sono contorni, non pastiglie piene: una
   capsula azzurra chiara su blu notte e' una macchia. */
.scheda-testata .segmento { color: #FFF; font-weight: 500; }
/* LA CARTA D'IDENTITA' (tipo, settore, target): vetro sul blu notte, una
   tessera col colore della voce, didascalia piccola sopra il valore. Il
   colore sta solo nella tessera e nel suo alone: il resto e' bianco, se no tre
   pastiglie colorate in fila fanno albero di Natale. */
.testata-voce { display: inline-flex; align-items: center; gap: 10px;
                padding: 5px 12px 5px 5px; border-radius: 12px;
                background: rgba(255, 255, 255, .06);
                box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
                -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
                color: #FFF; text-decoration: none; }
.testata-voce-tessera { display: grid; place-items: center; width: 30px; height: 30px;
                        border-radius: 8px; color: var(--tono);
                        background: color-mix(in srgb, var(--tono) 18%, transparent);
                        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tono) 30%, transparent),
                                    0 0 14px color-mix(in srgb, var(--tono) 18%, transparent); }
/* Didascalia in tondo normale, non in maiuscoletto spaziato: e' la regola
   della casa, e in piccolo si legge meglio. */
.testata-voce-testo { display: flex; flex-direction: column; gap: 1px; line-height: 1.15; }
.testata-voce-testo small { font-size: var(--t1); color: var(--notte-testo); }
.testata-voce-testo b { font-size: var(--t4); font-weight: 600; letter-spacing: -.01em;
                        white-space: nowrap; }
/* Senza valore: un invito, non un vuoto. Tratteggio e testo spento, e al
   passaggio si accende - porta al Profilo, dove si compila. */
/* La voce che apre un profilo fuori (Instagram): una freccina che si
   accende al passaggio, niente di piu'. */
.testata-voce.esterna { text-decoration: none; }
.testata-voce-apri { display: grid; place-items: center; margin-left: 2px; color: var(--notte-testo); opacity: .55;
                     transition: opacity .12s, color .12s; }
.testata-voce-apri svg { transform: rotate(45deg); }
.testata-voce.esterna:hover .testata-voce-apri { opacity: 1; color: #FFF; }
.testata-voce.vuota { background: none; box-shadow: none;
                      outline: 1px dashed rgba(255, 255, 255, .22); outline-offset: -1px; }
.testata-voce.vuota .testata-voce-tessera { box-shadow: none; opacity: .55; }
.testata-voce.vuota b { color: var(--notte-testo); font-weight: 500; }
.testata-voce.vuota:hover { background: rgba(255, 255, 255, .06); outline-color: rgba(255, 255, 255, .4); }
.testata-voce.vuota:hover b { color: #FFF; }
.scheda-testata .segno { background: rgba(255, 255, 255, .10); color: #FFF;
                         box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.scheda-testata .segno-ambra { background: rgba(249, 115, 22, .22); color: var(--ambra-notte);
                               box-shadow: inset 0 0 0 1px rgba(249, 115, 22, .35); }

/* -----------------------------------------------------------------------
   I MARCHI: UNA FILA DI CERCHI, A FIANCO L'UNO DELL'ALTRO
   Erano due gruppi: il principale accanto al nome, gli altri sotto la riga
   meta dentro il blocco del nome - due altezze diverse, e sotto ogni cerchio
   un'etichetta lunga una o due righe che faceva la fila storta. Ora e' una
   fila sola, tutti allineati, senza niente sotto a romperla.
   Tondo come una faccia: e' la stessa forma degli avatar delle persone, e la
   pagina ha un vocabolario solo.
   ----------------------------------------------------------------------- */
.marchi-fila { display: flex; align-items: center; gap: var(--s3); flex: 0 0 auto; }
.marchio-faccia { flex: 0 0 auto; display: block; color: #FFF; }
.marchio-faccia:hover { color: #FFF; }
.marchio-logo { --d: 64px; --corpo: .2;
                flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
                width: var(--d); height: var(--d); border-radius: 50%; overflow: hidden;
                background: #FFF;
                box-shadow: 0 0 0 1px rgba(255, 255, 255, .18),
                            0 6px 16px rgba(0, 0, 0, .22);
                transition: transform .18s var(--curva), box-shadow .18s; }
/* Il principale e' piu' grande: c'e' un primo fra loro e si vede dalla misura,
   senza l'anello azzurro che prima lo diceva una seconda volta. */
.marchio-logo.grande { --d: 84px; }
.marchio-faccia:hover .marchio-logo { transform: translateY(-2px) scale(1.04);
                                      box-shadow: 0 0 0 1px rgba(255, 255, 255, .4),
                                                  0 10px 22px rgba(0, 0, 0, .3); }
/* contain e mai cover: un logo schiacciato e' peggio di nessun logo. E l'86%
   perche' i loghi dei marchi sono quasi tutti marchi PAROLA, non monogrammi. */
.marchio-logo img { max-width: 86%; max-height: 74%; object-fit: contain; }
/* SENZA LOGO - il caso normale, 401 marchi su 402 - dentro ci va il NOME, non
   l'iniziale: tre cerchi con dentro A, L, S non dicono niente. Il corpo lo
   sceglie il PHP in base alla lunghezza, qui si tiene solo la forma: tutto
   maiuscolo, centrato, al massimo tre righe. */
.marchio-nome { font-size: calc(var(--d) * var(--corpo));
                padding: 0 6%; text-align: center; line-height: 1.15;
                font-weight: 700; letter-spacing: -.01em; text-transform: uppercase;
                color: inherit; overflow-wrap: normal; word-break: keep-all;
                display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
                overflow: hidden; }
/* IL POSTO VUOTO: 8.429 aziende su 8.700 non hanno un marchio. E' il caso
   normale, e un cerchio tratteggiato muto lasciava la testata monca senza dire
   cosa mancava. Porta alla zona Marchi del profilo, dove c'e' il campo.
   Si chiama posto-vuoto e non vuoto: .vuoto e' lo stato "elenco vuoto",
   col suo padding, e lo schiacciava in un ovale. */
.marchio-logo.posto-vuoto { flex-direction: column; gap: 2px;
                      background: none; box-shadow: none;
                      border: 1px dashed rgba(255, 255, 255, .28);
                      color: var(--notte-testo); transition: border-color .18s, color .18s; }
.marchio-vuoto-piu { font-size: 24px; font-weight: 300; line-height: 1; }
.marchio-vuoto-testo { font-size: var(--t1); letter-spacing: .01em; }
.marchio-faccia:hover .marchio-logo.posto-vuoto { border-color: rgba(255, 255, 255, .75);
                                            color: #FFF; transform: none;
                                            box-shadow: none; }
/* Il cerchio accanto al principale che conta gli altri marchi, e porta al
   riquadro Marchi. Vetro chiaro e non tratteggio: il tratteggio vuol dire
   "qui manca qualcosa" (il posto vuoto qui sopra), questo invece c'e'. */
.marchio-logo.piu { flex-direction: column; gap: 1px;
                    background: rgba(255, 255, 255, .08);
                    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
                    color: #FFF; transition: background .18s, box-shadow .18s; }
.piu-numero { font-size: var(--t6); font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.piu-testo { font-size: var(--t1); color: var(--notte-testo); }
.marchio-faccia:hover .marchio-logo.piu { background: rgba(255, 255, 255, .14);
                                          box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }

/* -----------------------------------------------------------------------
   LE CIFRE, dentro il masthead e GRANDI
   32px in bianco su blu notte: sono la risposta alla seconda domanda che ci si
   fa aprendo un cliente, e prima erano 24 in grigio dentro una striscia grigia
   che non le distingueva dal resto. La riga che le separa e' un filo di bianco
   trasparente, non un bordo: su fondo scuro un bordo grigio e' una crepa.
   ----------------------------------------------------------------------- */
/* I NUMERI STANNO IN UN PANNELLO LORO, dentro il masthead ma staccati: sono
   dati che arrivano da un altro sistema, non fanno parte dell'identita'. Un
   filo solo non bastava a dirlo - si leggeva come la continuazione del blocco
   sopra. Superficie appena piu' chiara, angoli suoi, e l'aria intorno. */
.cifre { display: grid; grid-template-columns: repeat(var(--colonne, 4), minmax(0, 1fr));
         /* UN FILO SOLO A SINISTRA E A DESTRA: il logo, il primo numero e i
            dati partono dallo stesso punto. Il pannello sporge di quanto e'
            rientrata la cifra (s5), cosi' il suo TESTO cade sul filo. */
         margin: var(--s6) calc(-1 * var(--s5)) 0; padding: var(--s5) 0;
         /* Al 4,5% il pannello spariva dove la testata e' piu' chiara (in alto a
            sinistra): ora un velo che si vede ovunque, piu' chiaro in cima, e un
            contorno di luce appena accennato. */
         background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .06));
         border-radius: var(--raggio-g);
         box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .14),
                     0 8px 24px rgba(4, 12, 24, .25); }
.cifra { display: flex; flex-direction: column; gap: 3px; min-width: 0;
         padding: 0 var(--s5); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .10); }
/* Il filo fra le cifre e' un'ombra e non un bordo: un bordo occupa un pixel e
   spostava il testo di ogni cifra rispetto al dato sotto. */
.cifra:first-child { box-shadow: none; }
.cifra-etichetta { font-size: var(--t3); color: var(--notte-testo); }
/* 24 e non 32: a 32 i numeri erano grandi quasi quanto il nome (40), e la
   testata aveva due cose da leggere per prime. Il nome e' il titolo, i numeri
   il sommario. */
.cifra-numero { font-size: 24px; font-weight: 600; letter-spacing: -.03em;
                line-height: 1.15; color: #FFF; }
/* I DATI DI RIFERIMENTO in fondo alla testata: etichetta piccola, valore
   bianco, in fila, sullo stesso filo sinistro del logo e dei numeri. */
/* In fila e libera, NON sulle colonne delle cifre (provato il 23/09 e
   bocciato: quattro dati appesi sotto quattro numeri sembravano una seconda
   riga della tabella). Parte dal filo sinistro, come logo e numeri. */
.testata-dati { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s10); margin: var(--s4) 0 0; }
.testata-dati > div { display: flex; align-items: baseline; gap: var(--s2); min-width: 0; }
.testata-dati dt { font-size: var(--t2); color: var(--notte-testo); }
.testata-dati dd { margin: 0; font-size: var(--t3); font-weight: 500; color: #FFF; }
.testata-dati .niente { color: var(--notte-testo); font-weight: 400; }
/* Il link al gruppo sul fondo scuro: bianco e sottolineato, il blu non si leggeva. */
.testata-dati a { color: #FFF; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .5); }
.testata-dati a:hover { text-decoration-color: #FFF; }
.cifra-sotto { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
               min-height: 20px; font-size: var(--t2); color: var(--notte-testo); }
/* IL VERSO SI LEGGE DA LONTANO: freccia piu' numero, senza capsula. Dentro una
   pastiglia piccola "+84%" e "-29%" erano due macchie quasi uguali, e la prima
   cosa che si vuole sapere di un cliente e' se sale o scende. */
.crescita { display: inline-flex; align-items: center; gap: 3px; font-size: var(--t4);
            font-weight: 600; letter-spacing: -.01em; }
.crescita svg { flex: 0 0 auto; stroke-width: 2.5; }
.crescita.su  { color: var(--verde-notte); }
.crescita.giu { color: var(--rosso-notte); }
.crescita.nuovo { font-size: var(--t2); font-weight: 500; color: var(--notte-testo); }

/* IL CAMPO CHE CERCA UN MARCHIO, con la lente dentro: sta nella finestra
   "Aggiungi un marchio" (_marchi.php). */
.cerca-marchio-campo { position: relative; display: block; }
.cerca-marchio-campo svg { position: absolute; left: 10px; top: 50%;
                           transform: translateY(-50%); color: var(--testo-3);
                           pointer-events: none; }
.cerca-marchio-campo .campo { width: 100%; padding-left: 32px; }
.cerca-marchio-campo:focus-within svg { color: var(--blu); }

/* IL BOLLINO DEL COBRANDING, cucito sul logo come l'etichetta che rappresenta.
   Ambra perche' e' l'unico colore che questa interfaccia usa per "guarda qui",
   e l'anello del colore del fondo lo stacca dal cerchio. Nel title ci sono le
   cose fatte davvero - etichetta, web, social - perche' sapere CHE c'e' il
   cobranding senza sapere COSA non serve a chi si prepara a una chiamata. */
.con-bollino { position: relative; display: inline-flex; }
/* Piu' grande di prima (22px, e 18 sui piccoli): si vedeva solo cercandolo
   (Mattia, 23/09). Ora sporge dal cerchio e l'anello e' piu' spesso. */
.bollino { position: absolute; right: -5px; bottom: -4px;
           display: inline-flex; align-items: center; justify-content: center;
           width: 28px; height: 28px; border-radius: 50%;
           box-shadow: 0 0 0 3px var(--notte), 0 3px 8px rgba(0, 0, 0, .4);
           cursor: help; }
/* I colori sono quelli dei quattro livelli (cob-stato-N, come nella lista
   Marchi); qui il bollino e' tondo e l'anello e' del fondo su cui sta. */
.bollino.cob-stato { position: absolute; border-radius: 50%; }
.bollino.cob-stato-3, .bollino.cob-stato-1 { box-shadow: 0 0 0 3px var(--notte), 0 3px 8px rgba(0, 0, 0, .4); }
/* Nel riquadro Marchi, su fondo bianco: un filo da 1px, non l'anello scuro
   della testata (Mattia, 02/10: "il bordo nero e' troppo grande"). */
.marchio-riga .bollino.cob-stato { box-shadow: 0 0 0 1px var(--bordo-forte), 0 1px 3px rgba(16, 24, 40, .2); }
.bollino.cob-stato svg { width: 13px; height: 13px; }
.bollino .cob-dietro { top: 4px; right: 4px; }
.bollino .cob-dietro svg { width: 11px; height: 11px; }
/* Sui cerchi piccoli della famiglia il bollino scende con loro. */
.marchio-faccia .bollino { width: 24px; height: 24px; right: -5px; bottom: -3px; }
.marchio-faccia .bollino svg { width: 13px; height: 13px; }
/* Sul principale, da 84px, il bollino cresce con lui: a 24px spariva. */
.marchio-faccia .grande + .bollino { width: 28px; height: 28px; right: -3px; bottom: -2px; }
.marchio-faccia .grande + .bollino svg { width: 15px; height: 15px; }
/* Dentro la finestra il fondo e' bianco, e l'anello con lui. */
.scheda-marchio .bollino { box-shadow: 0 0 0 3px var(--superficie),
                                       0 2px 6px rgba(16, 24, 40, .28); }

/* =============================================================================
   LE PERSONE: carte fatte per quello che devono contenere
   La versione prima aveva nome, ruolo e reparto su tre righe e due icone mute
   in fondo: tre quarti di carta per dire due parole, e l'indirizzo - che e' IL
   contenuto di una scheda contatto - si scopriva solo passandoci sopra.
   Adesso la carta ha due zone separate da un filo: CHI E' sopra (faccia, nome,
   mestiere su una riga sola) e COME LO RAGGIUNGO sotto, scritto e cliccabile.
   Le due zone hanno la stessa altezza su tutte le carte, quindi la griglia
   resta una griglia anche quando un ruolo e' lungo tre righe.
   ============================================================================= */
/* FINO A OTTO PERSONE, LA GRIGLIA: stanno in due file, si vedono tutte, e non
   c'e' niente da scorrere. Tutte le carte alte uguale - l'altezza e' il token
   --carta-persona - e da li' in giu' tutto e' vincolato: nome su una riga,
   ruolo su due sempre, recapiti sempre due (il taglio a due lo fa il PHP).
   Con le carte alte quanto il loro contenuto la griglia si leggeva come un
   muro a secco, e non bastava align-items: start a salvarla. Chi tocca uno dei
   tre vincoli rifa' il conto dell'altezza. */
.persone-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
                   gap: var(--s3); padding: var(--s4) var(--s5) var(--s5); }

/* OLTRE LE OTTO, UNA RIGA SOLA CHE SCORRE. Le 44 persone di GANT facevano
   undici file di carte, e per arrivare al fatturato si rotolava mezzo minuto:
   i contatti sono importanti, ma non sono l'unica cosa nella scheda. In fila
   si vedono i primi - in ordine di ruolo, non a caso - e gli altri stanno a un
   colpo di freccia.
   scroll-snap in proximity e non mandatory: chi scorre col dito non deve
   sentirsi strappare la fila a ogni gesto. */
/* timeline-scope porta la linea del tempo della fila fuori dalla fila: i veli
   sono pseudo-elementi del carosello, non della fila, se no scorrerebbero via
   insieme alle carte. */
.carosello { position: relative; timeline-scope: --fila-persone; }
.persone-fila { display: flex; gap: var(--s3);
                /* La barra di scorrimento di Windows e' una stecca grigia
                   spessa sotto le carte. Qui non serve: ci sono le frecce, i
                   veli ai bordi e la carta che spunta. */
                scrollbar-width: none;
                scroll-timeline: --fila-persone x;
                overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
                scroll-behavior: smooth; scroll-snap-type: x proximity;
                /* Senza scroll-padding il primo aggancio cade sul bordo dello
                   scrollport e non su quello del contenuto: la fila si apriva
                   gia' spostata di venti pixel - il fianco del riquadro
                   mangiato, e la freccia "indietro" accesa a fila ferma. */
                scroll-padding: 0 var(--s5);
                padding: var(--s4) var(--s5) var(--s5); }
.persone-fila::-webkit-scrollbar { display: none; }
.persone-fila > .persona-carta { flex: 0 0 296px; scroll-snap-align: start; }

/* ---- Che lo scorrimento SI SENTA ---------------------------------------
   Tre effetti, tutti guidati dalla posizione della fila e non da un timer:
   si muovono col dito, si fermano col dito, e tornano indietro se si torna
   indietro. E' quello che distingue una cosa che risponde da una cosa che
   parte per conto suo.
   Sono scritti in CSS con animation-timeline, senza una riga di JavaScript:
   dove il browser non li conosce non succede niente - la fila scorre uguale,
   i veli restano spenti. */

/* 1. I VELI AI BORDI. Dicono che di la' continua, e coprono il taglio netto
      della carta mozzata a meta'. Si accendono col primo dito di scorrimento
      e si spengono quando si arriva in fondo. */
.carosello::before, .carosello::after {
  content: ''; position: absolute; top: 1px; bottom: 1px; width: 60px;
  z-index: 1; pointer-events: none; opacity: 0;
  animation: velo-fila linear both; animation-timeline: --fila-persone;
}
.carosello::before {
  left: 0; border-radius: var(--raggio-g) 0 0 var(--raggio-g);
  background: linear-gradient(90deg, var(--velo, #FFF) 8%, transparent);
  /* Il velo di sinistra si accende nei primi 80 pixel di scorrimento. */
  animation-range: 0 80px;
}
.carosello::after {
  right: 0; border-radius: 0 var(--raggio-g) var(--raggio-g) 0;
  background: linear-gradient(270deg, var(--velo, #FFF) 8%, transparent);
  /* Quello di destra parte acceso e si spegne negli ultimi 80. */
  animation-direction: reverse; animation-range: calc(100% - 80px) 100%;
}
@keyframes velo-fila { from { opacity: 0; } to { opacity: 1; } }

/* 2. LE CARTE TAGLIATE DAL BORDO si abbassano e rimpiccioliscono; quelle
      intere sono piene. La fila prende profondita' invece di essere un nastro
      piatto che entra ed esce di colpo, e il taglio netto a meta' carta -
      brutto da guardare - diventa una dissolvenza.
      Due animazioni, una per il bordo che entra (`entry`) e una per quello che
      esce (`exit`), e non una sola sul giro intero: con una sola, la prima
      carta a fila ferma risultava a meta' strada dell'uscita e restava
      spenta senza motivo.
      Il riempimento della seconda e' `forwards` e non `both`: con `both`
      starebbe ferma sul suo primo fotogramma anche prima del suo turno e
      cancellerebbe l'altra - due animazioni sulla stessa proprieta', vince
      l'ultima.
      Si usa `scale` e non `transform`, che resta libero per il sollevamento
      del passaggio del mouse, per lo stesso motivo. */
.persone-fila > .persona-carta {
  animation: carta-entra linear, carta-esce linear;
  animation-timeline: view(inline), view(inline);
  animation-range: entry, exit;
  animation-fill-mode: both, forwards;
}
@keyframes carta-entra { from { opacity: .45; scale: .94; } to { opacity: 1; scale: 1; } }
@keyframes carta-esce  { from { opacity: 1; scale: 1; } to { opacity: .45; scale: .94; } }
/* Tonde e appoggiate sopra la fila, come su qualunque carosello. Le accende il
   JavaScript quando c'e' da scorrere: partono con hidden addosso. */
.carosello-freccia { position: absolute; z-index: 2;
                     top: calc(var(--s4) + var(--carta-persona) / 2);
                     transform: translateY(-50%);
                     display: flex; align-items: center; justify-content: center;
                     width: 36px; height: 36px; padding: 0;
                     border: none; border-radius: 50%; cursor: pointer;
                     background: var(--superficie); color: var(--testo-2);
                     box-shadow: 0 0 0 1px var(--bordo), 0 6px 16px rgba(16, 24, 40, .18);
                     transition: background .15s, color .15s, box-shadow .15s; }
.carosello-freccia[hidden] { display: none; }
/* In fondo alla fila la freccia NON sparisce (Mattia, 02/10: cliccando di
   fila, sparita la freccia si finiva sul contatto sotto): resta al suo posto,
   si spegne e si rimpicciolisce, e il clic non fa niente. */
.carosello-freccia { transition: background .15s, color .15s, box-shadow .15s, opacity .25s ease, transform .25s var(--curva); }
.carosello-freccia:disabled, .carosello-freccia:disabled:hover, .carosello-freccia:disabled:active {
  opacity: .4; cursor: default; background: var(--superficie); color: var(--testo-4);
  transform: translateY(-50%) scale(.86); box-shadow: 0 0 0 1px var(--bordo), 0 2px 6px rgba(16, 24, 40, .08); }
.carosello-freccia:hover { background: var(--blu); color: #FFF;
                           transform: translateY(-50%) scale(1.08);
                           box-shadow: 0 8px 20px rgba(37, 99, 235, .35); }
/* Il tondino si schiaccia sotto il dito: il clic si sente, e si capisce che
   e' arrivato anche prima che la fila cominci a muoversi. */
.carosello-freccia:active { transform: translateY(-50%) scale(.92);
                            box-shadow: 0 2px 8px rgba(37, 99, 235, .3); }
.carosello-freccia.indietro { left: var(--s2); }
.carosello-freccia.avanti { right: var(--s2); }

.persona-carta { position: relative; display: flex; flex-direction: column; min-width: 0;
                 height: var(--carta-persona);
                 background: var(--superficie); border-radius: var(--raggio-g);
                 box-shadow: 0 0 0 1px rgba(16, 24, 40, .07);
                 overflow: hidden; transition: box-shadow .15s, transform .15s; }
.persona-carta:hover { box-shadow: 0 0 0 1px rgba(37, 99, 235, .35),
                                   0 10px 20px -10px rgba(16, 24, 40, .35);
                       transform: translateY(-1px); }
.persona-carta.spenta { opacity: .6; }
.persona-carta-capo { display: flex; align-items: flex-start; gap: var(--s3);
                      flex: 1 1 auto; overflow: hidden;
                      padding: var(--s3) var(--s4); color: inherit; min-width: 0; }
.persona-carta-capo:hover { color: inherit; }
.persona-carta-testi { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* Il nome su UNA riga, e se non ci sta si taglia col nome intero nel titolo:
   e' il vincolo che tiene l'altezza. Un nome lungo tagliato si legge comunque;
   una griglia sconnessa no. */
.persona-carta-nome { display: block; min-width: 0;
                      font-size: var(--t5); font-weight: 600; letter-spacing: -.01em;
                      line-height: 1.3; overflow-wrap: anywhere; }
/* 29/10/2026 (Mattia: "le larghezze delle colonne segano i testi... farei un check ovunque"): il nome va a capo
   invece di tagliarsi; le carte di una fila restano alte uguali (si allungano tutte). */
/* Il ruolo e il reparto su DUE righe, sempre due anche quando ne basta una:
   l'altezza non deve dipendere da quanti incarichi ha una persona. */
/* GLI SCAMBI sulla carta persona: una riga nella colonna del testo, sotto il
   ruolo, sullo stesso filo sinistro del nome. Il pallino ha il colore della
   temperatura (verde, ambra, grigio), la busta dice che si parla di posta. */
.polso { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 5px; min-width: 0;
         font-size: var(--t2); color: var(--testo-2); white-space: nowrap; }
.polso svg { flex: 0 0 auto; color: var(--testo-3); }
.polso b { color: var(--testo); font-weight: 600; }
/* "ultimo ... con ..." a capo, sotto il conto, sul filo del pallino. */
.polso-quando { flex-basis: 100%; min-width: 0; white-space: normal; line-height: 1.35; color: var(--testo-3); padding-left: 3px; }
/* I pallini di stato prendono il colore da --tono: la temperatura qui, il
   "tocca a" della pipeline (.tocca). Il margine a sinistra fa posto
   all'alone, che i contenitori (overflow: hidden) tagliavano. */
.polso-punto { flex: 0 0 auto; width: 7px; height: 7px; margin-left: 3px; border-radius: 50%; background: var(--tono);
               box-shadow: 0 0 0 3px color-mix(in srgb, var(--tono) 18%, transparent); }
.polso-caldo   { --tono: var(--verde-vivo); }
.polso-tiepido { --tono: var(--ambra-vivo); }
.polso-freddo  { --tono: var(--testo-3); }
.polso-vuoto { visibility: hidden; }
.persona-carta-ruolo { font-size: var(--t3); color: var(--testo-2); line-height: 1.4;
                       height: 2.8em; margin-top: 1px;
                       display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                       overflow: hidden; }

/* LA GRIGLIA DELLA CARTA: avatar (40) | nome, ruolo, scambi | icone.
   40 e' l'altezza di nome + una riga di ruolo: col ruolo su una riga sola
   l'avatar e il testo sono alti uguali. La riga degli scambi parte dal filo
   del nome: 16 + 40 di avatar + 12. */
.persona-carta .avatar.medio { width: 40px; height: 40px; font-size: var(--t3); }
.persona-carta-piede { display: flex; align-items: center; min-width: 0;
                       padding: 0 var(--s4) var(--s3) calc(var(--s4) + 40px + var(--s3)); }
/* Le icone in alto a destra, centrate sulla riga del nome (che parte a 12 ed
   e' alta 21: 24 di icona a 10 dall'alto). Il nome si ferma prima: tanto
   spazio quante sono le icone, cosi' un nome lungo si taglia coi puntini e
   non ci finisce sotto. */
.persona-carta-recapiti { position: absolute; top: 10px; right: var(--s3); display: flex; gap: 2px; }
.persona-carta:has(.recapito-icona:nth-child(1)) .persona-carta-nome { padding-right: 30px; }
.persona-carta:has(.recapito-icona:nth-child(2)) .persona-carta-nome { padding-right: 56px; }
.persona-carta:has(.recapito-icona:nth-child(3)) .persona-carta-nome { padding-right: 82px; }
/* Il marchio di LinkedIn e' una parola, non un tratto: si scrive. */
.recapito-in { display: inline-flex; align-items: center; justify-content: center;
               width: 14px; height: 14px; border-radius: 3px; color: var(--superficie);
               background: var(--testo-3); font-size: 9px; font-weight: 700; letter-spacing: -.02em; }
.recapito-icona:hover .recapito-in { background: var(--blu); }

/* =============================================================================
   L'ANDAMENTO
   Le carte KPI sono salite in testa alla pagina (vedi LE CIFRE): qui resta il
   dettaglio, cioe' com'e' andata negli anni e cosa compra. Un riquadro, una
   cosa: prima questo ne faceva quattro.
   ============================================================================= */
/* LA STORIA IN CINQUE COLONNE. Non e' un grafico: e' un profilo, si guarda e
   si capisce se il cliente sale o scende. L'anno in corso e' tratteggiato
   perche' non e' finito - una barra piena piu' bassa delle altre farebbe
   leggere un crollo che non c'e'. */
.storia { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
          gap: var(--s3); height: 188px; padding: var(--s4) var(--fianco) var(--s4);
          /* La riga dello zero: senza, le barre galleggiano. E' tenue apposta,
             deve reggere le colonne e non farsi guardare. */
          background: linear-gradient(var(--bordo-tenue), var(--bordo-tenue)) no-repeat
                      left calc(100% - var(--s4) - 18px) / 100% 1px; }
.storia-anno { display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
               justify-items: center; gap: var(--s1); height: 100%; }
.storia-valore { font-size: var(--t3); font-weight: 600; color: var(--testo-2);
                 letter-spacing: -.01em; }
/* La pila: la barra e, sopra, il portafoglio dell'anno in corso (05/10/2026). */
.storia-pila { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; width: 100%; height: 100%; min-height: 0; }
.storia-sopra { width: 100%; max-width: 54px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #F7C873, #E9A23B); }
.storia-sopra + .storia-barra { border-radius: 0; }
/* Nella pila la barra sta al centro: align-self: end (sotto) qui spingerebbe a destra. */
.storia-pila > .storia-barra { align-self: center; flex-shrink: 0; }
.storia-sopra { flex-shrink: 0; }
.storia-legenda { display: flex; flex-wrap: wrap; gap: var(--s4); margin: 0; padding: 0 var(--fianco) var(--s4); font-size: var(--t2); color: var(--testo-3); }
.storia-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.storia-legenda i { width: 10px; height: 10px; border-radius: 3px; }
.storia-chiave-fatto { background: var(--blu); }
.storia-chiave-sopra { background: #E9A23B; }
.storia-legenda b { color: var(--testo-2); font-weight: 600; }
.storia-barra { width: 100%; max-width: 54px; align-self: end; min-height: 4px;
                border-radius: 6px 6px 0 0;
                background: linear-gradient(180deg, #7FAEFF, var(--blu) 70%, var(--blu-scuro));
                box-shadow: 0 1px 6px rgba(37, 99, 235, .22);
                transition: filter .2s; }
.storia-anno:hover .storia-barra { filter: brightness(1.08); }
/* L'anno in corso non e' finito: una barra piena piu' bassa delle altre
   farebbe leggere un crollo che non c'e'. */
.storia-anno.in-corso .storia-barra {
  background: repeating-linear-gradient(135deg, var(--blu) 0 5px, #9BC0FF 5px 10px);
  box-shadow: none; }
.storia-anno.in-corso .storia-valore { color: var(--blu); }
/* La cifra del pezzo sopra (il portafoglio), sopra quella della barra: del
   suo colore. Nelle colonne senza, la riga resta vuota e alta uguale. */
.storia-valore.storia-valore-sopra, .storia-anno.in-corso .storia-valore.storia-valore-sopra { margin-bottom: 0; color: var(--ambra); }
/* Con la riga in piu' la colonna ha quattro righe: le due cifre, la pila, l'anno. */
.storia-anno:has(> .storia-valore-sopra) { grid-template-rows: auto auto minmax(0, 1fr) auto; row-gap: 0; }
.storia-anno:has(> .storia-valore-sopra) > .storia-pila { margin-top: var(--s1); }
.storia-anno:has(> .storia-valore-sopra) > .storia-etichetta { margin-top: var(--s1); }
.storia-etichetta { font-size: var(--t3); color: var(--testo-3); }
.storia-anno.in-corso .storia-etichetta { color: var(--testo-2); font-weight: 600; }
/* SENZA NUMERI (02/10/2026): le barre restano, sbiadite e grigie, e una
   frase in mezzo dice cosa manca. Il riquadro non sparisce. */
.storia { position: relative; }
.storia-vuota .storia-barra { background: var(--sfiora); box-shadow: none; }
.storia-vuota .storia-anno.in-corso .storia-barra { background: repeating-linear-gradient(135deg, var(--sfiora) 0 5px, var(--superficie) 5px 10px); }
.storia-vuota .storia-etichetta { color: var(--testo-4); font-weight: 400; }
.storia-senza { position: absolute; inset: 0 0 18px; display: grid; place-items: center; margin: 0; padding: 0 var(--s5);
                font-size: var(--t4); font-weight: 500; color: var(--testo-3); text-align: center; }
.storia-senza span { padding: 6px 12px; border-radius: 999px; background: var(--superficie);
                    box-shadow: 0 1px 6px rgba(16, 24, 40, .08); }

/* GLI ARTICOLI ORDINATI: la torta delle famiglie e sotto i tessuti veri.
   La torta e' un conic-gradient - CSS, niente libreria per sei fette - e il
   buco in mezzo regge il totale invece di stare li' vuoto. Le percentuali da
   sole erano numeri in fila che non si confrontavano a occhio; qui la
   proporzione e' la figura. */
/* la legenda accanto alla torta se c'e' posto, sotto se il riquadro e' stretto: mai nomi tagliati (29/10/2026,
   Mattia: "le larghezze delle colonne segano i testi") */
.torta-riga { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s4) var(--s5);
              padding: var(--s4) var(--fianco) var(--s3); }
.torta-riga > .torta, .torta-riga > .torta-grande { flex: none; }
.torta-riga > .torta-legenda { flex: 1 1 180px; min-width: 0; }
.torta { position: relative; width: 138px; height: 138px; border-radius: 50%;
         box-shadow: 0 2px 10px rgba(16, 24, 40, .10); }
.torta-buco { position: absolute; inset: 27px; border-radius: 50%;
              background: var(--superficie); display: grid; align-content: center;
              justify-items: center; box-shadow: inset 0 0 0 1px var(--bordo-tenue); }
.torta-totale { font-size: var(--t6); font-weight: 600; letter-spacing: -.02em; }
.torta-unita { font-size: var(--t2); color: var(--testo-3); }
.torta-legenda { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.torta-legenda li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto;
                    align-items: center; gap: var(--s2); font-size: var(--t3); }
.pallina { width: 10px; height: 10px; border-radius: 3px; }
.torta-nome { min-width: 0; overflow-wrap: anywhere; line-height: 1.3; color: var(--testo-2); }
.torta-quota { color: var(--testo-3); font-size: var(--t2); }
/* Niente ordini: la torta resta, un anello grigio, e accanto la frase. */
.torta-vuota .torta { background: var(--sfiora); box-shadow: none; }
.torta-vuota .torta-totale, .torta-vuota .torta-unita { color: var(--testo-4); }
.torta-senza { margin: 0; font-size: var(--t4); font-weight: 500; color: var(--testo-3); }
/* la torta piena (senza buco ne' totale) e lo scarto di ogni voce in legenda (05/11/2026, l'Executive) */
.torta-piena .torta-buco { display: none; }
.torta-legenda li:has(.torta-scarto) { grid-template-columns: 10px minmax(0, 1fr) auto 64px; }
.torta-scarto { text-align: right; }

/* I tessuti, sotto la torta: la torta dice di che materiale sono, questi
   dicono quali sono - ed e' cio' che si porta a una visita. */
.articoli { padding: var(--s3) var(--fianco) var(--s4);
            border-top: 1px solid var(--bordo-tenue); }
.articoli .campo-etichetta { display: block; margin-bottom: var(--s1); }
.articolo { display: grid; grid-template-columns: minmax(0, 1fr) auto;
            column-gap: var(--s3); align-items: center; padding: 6px 0; }
.articolo + .articolo { border-top: 1px solid var(--bordo-tenue); }
.articolo-nome { grid-area: 1 / 1; font-size: var(--t4); font-weight: 500;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.articolo-famiglia { grid-area: 2 / 1; font-size: var(--t2); color: var(--testo-3);
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Sotto un nome che apre la scheda (icona del tessuto + 6px), la famiglia parte dal testo, non dall'icona. */
.articolo-nome:has(> .articolo-apri) ~ .articolo-famiglia { padding-left: 19px; }
.articolo-metri { grid-area: 1 / 2 / span 2 / 2; align-self: center;
                  font-size: var(--t3); color: var(--testo-2); white-space: nowrap; }
/* I colori ordinati in una colonna (07/10/2026, Articoli ordinati): quanti. */
/* Larghezze fisse per le due colonne di destra: ogni riga e' una griglia sua, e
   con "auto" la colonna dei colori si spostava a seconda di quanto e' lungo il
   valore (07/10/2026). "10 colori" e "€ 1.234.567" ci stanno. */
.articolo.con-colori { grid-template-columns: minmax(0, 1fr) 64px 92px; }
.articolo-colori { grid-area: 1 / 2 / span 2 / 3; align-self: center; justify-self: start; font-size: var(--t3); color: var(--testo-2); white-space: nowrap; }
.articolo.con-colori .articolo-metri { text-align: right; justify-self: end; }
.articolo.con-colori .articolo-metri { grid-area: 1 / 3 / span 2 / 4; }

/* =============================================================================
   LO STORICO DELLA RELAZIONE
   Righe leggere nella stessa colonna, per data: fiere, scelte, ordini,
   regali, mail. Si leggono e basta - le righe scritte a mano, con la loro
   carta azzurra e la crocetta, sono uscite il 05/10/2026 (0085). Raggruppate
   per anno; il filo unisce i pallini.
   ============================================================================= */
.storico-box { padding: var(--s2) var(--fianco) var(--s4); }
.storico { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }

/* LE PILLOLE A SCELTA MULTIPLA, una sola per tutto il CRM (storico, articoli
   ordinati): accese col colore della sezione, spente grigie e tratteggiate. */
/* Le pillole dei filtri vanno a capo (12/10/2026: la riga che scorreva di
   lato, con la rotella e poi con le frecce, era inusabile). */
.filtri-pillole { display: flex; flex-wrap: wrap; gap: 6px; padding: var(--s1) 0 var(--s1); }
.filtri-pillole > .filtro { flex: 0 0 auto; }
#articoli-ordinati > .filtri-pillole { padding: var(--s3) var(--fianco) 0; }
/* Il riquadro che si rifa' dopo un clic su una pillola: sbiadisce un attimo. */
.blocco.in-corso { opacity: .55; transition: opacity .15s; }
.filtro { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
          border: 1px solid var(--bordo); border-radius: 999px; background: var(--superficie);
          color: var(--testo-2); font: inherit; font-size: var(--t3); cursor: pointer;
          transition: background .12s, color .12s, border-color .12s; }
.filtro span, .filtro b { color: var(--testo-3); font-size: var(--t2); font-weight: 600; }
.filtro:hover { border-color: var(--bordo-forte); color: var(--testo); }
/* LA PILLOLA ACCESA, uguale ovunque: blu notte, testo bianco. Il filtro dello
   storico quando e' aperto o filtra, le viste della pipeline quando scelte. */
.filtro.attiva, .filtro:has(input:checked) {
  background: var(--notte); border-color: var(--notte); color: #FFF; }
.filtro.attiva b, .filtro:has(input:checked) b { color: rgba(255, 255, 255, .7); }
.filtro:has(input:focus-visible) { outline: 2px solid var(--blu); outline-offset: 2px; }
.filtro input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.filtri-pillole .filtro { position: relative; height: 26px; padding: 0 9px; font-size: var(--t2); }
/* Accese col colore della sezione (la relazione), non il blu notte: tutte
   accese di partenza, e una spenta torna grigia. */
.filtri-pillole .filtro input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.filtri-pillole .filtro:has(input:checked) { background: color-mix(in srgb, var(--sez, var(--sez-rel)) 12%, var(--superficie));
  border-color: color-mix(in srgb, var(--sez, var(--sez-rel)) 45%, transparent); color: var(--sez, var(--sez-rel)); font-weight: 400; }
.filtri-pillole .filtro:has(input:checked):hover { background: color-mix(in srgb, var(--sez, var(--sez-rel)) 18%, var(--superficie)); }
.filtri-pillole .filtro:has(input:not(:checked)) { color: var(--testo-3); border-style: dashed; }
/* LA RIGA DELLO STORICO (25/09): quattro colonne fisse - la data come su un
   calendario, l'icona del tipo, il testo su due righe, le azioni a destra -
   e un filo sottile fra una riga e l'altra. Compatta ma con l'aria per
   leggere: 9px sopra e sotto, il testo principale a 13, il secondo a 12. */
.storico-riga { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px;
                align-items: start; padding: 9px 0; border-top: 1px solid var(--bordo-tenue); }
.storico-riga:first-child { border-top: none; }
.storico-riga[hidden] { display: none; }

.pallino { flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px;
           display: inline-flex; align-items: center; justify-content: center; }
.pallino-blu    { background: var(--blu-tenue); color: var(--blu-scuro); }
.pallino-verde  { background: var(--verde-tenue); color: var(--verde); }
.pallino-viola  { background: var(--viola-tenue); color: var(--viola); }
.pallino-ambra  { background: var(--ambra-tenue); color: var(--ambra); }
.pallino-rosa   { background: var(--rosa-tenue); color: var(--rosa); }
.pallino-grigio { background: var(--sfiora-scuro); color: var(--testo-2); }

.storico-corpo { min-width: 0; }
.storico-uno { display: flex; align-items: baseline; gap: var(--s2); min-width: 0; }
.storico-cosa { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                font-size: var(--t3); font-weight: 500; color: var(--testo); }
.storico-verso { font-weight: 400; color: var(--testo-2); }
/* La data a destra della prima riga, sul filo delle azioni sotto. */
.storico-data { flex: 0 0 auto; font-size: var(--t2); color: var(--testo-3); white-space: nowrap; }
/* L'icona si centra sulla prima riga di testo (alta 18). */
.storico-riga .pallino { margin-top: -3px; }
.storico-cosa a { color: var(--blu); }
/* Dove sta chi guarda in una mail (13/10/2026): A te, In copia, Ccn, Inoltro.
   Una pastiglia piccola prima dell'oggetto; l'intestazione intera nel fumetto. */
.mail-ruolo { flex: 0 0 auto; display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: 999px;
              font-size: 11px; font-weight: 600; letter-spacing: .01em; cursor: help;
              background: var(--blu-tenue); color: var(--blu-scuro); }
.mail-ruolo-cc { background: var(--viola-tenue); color: var(--viola); }
.mail-ruolo-ccn { background: var(--sfiora-scuro); color: var(--testo-2); }
.mail-ruolo-inoltro { background: var(--ambra-tenue); color: var(--ambra); }
.storico-due { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s2); margin-top: 2px;
               font-size: var(--t2); line-height: 1.45; color: var(--testo-3); }
/* La seconda riga di una mail: l'oggetto, che si taglia, e le azioni. */
.storico-due-mail { flex-wrap: nowrap; align-items: center; }
.storico-oggetto { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.storico-chi { color: var(--blu); }

/* Le azioni a destra: piccole, testuali, si accendono al passaggio. */
.storico-azioni { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }
.azione { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 6px;
          font-size: var(--t1); font-weight: 500; color: var(--testo-3); cursor: pointer; white-space: nowrap;
          transition: background .12s, color .12s; }
.azione:hover { background: var(--blu-tenue); color: var(--blu); }
/* L'ICONA-COMANDO: 24x24, tenue, azzurra al passaggio. La stessa per l'occhio
   dell'anteprima nello storico e per mail/telefono/LinkedIn sulle carte
   persona (li' con .recapito-icona, che serve solo alla disposizione). */
.azione-icona { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0;
                border-radius: 6px; color: var(--testo-3); transition: background .12s, color .12s; }
.azione-icona:hover { background: var(--blu-tenue); color: var(--blu); }
.azione-gmail { color: var(--blu); }
.azione.spenta { color: var(--testo-4); cursor: help; }
.azione.spenta:hover { background: var(--sfiora); color: var(--testo-3); }

/* L'anteprima: si apre col pulsante "Anteprima" (una casella nascosta, niente
   JavaScript) e scende sotto il testo, morbida. */
.anteprima-testo { display: none; margin: 6px 0 0; padding: 8px 10px; border-radius: 8px;
                   background: var(--sfiora); font-size: var(--t2); line-height: 1.5; color: var(--testo-2); }
.storico-corpo:has(.anteprima-interruttore:checked) .anteprima-testo { display: block; animation: anteprima-scende .22s var(--curva); }
/* "Mostra altri" dell'elenco articoli si vede solo con l'elenco aperto (07/10/2026:
   prima restava sotto la riga chiusa e il clic apriva righe che non si vedevano). */
.storico-corpo .anteprima-righe + [data-mostra-pulsante] { display: none; }
.storico-corpo:has(.anteprima-interruttore:checked) .anteprima-righe + [data-mostra-pulsante] { display: block; animation: anteprima-scende .22s var(--curva); }
.storico-corpo:has(.anteprima-interruttore:checked) label.azione { background: var(--blu-tenue); color: var(--blu); }
/* "37 articoli": il collegamento che apre l'elenco (ordini, tipi, scelte). */
.storico-apre { cursor: pointer; color: var(--blu); }
.storico-apre:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Gli articoli: nome a sinistra, metri a destra, uno per riga. */
.anteprima-righe { list-style: none; }
.anteprima-righe li { display: flex; justify-content: space-between; gap: var(--s3); padding: 2px 0; }
.anteprima-righe li + li { border-top: 1px solid var(--bordo-tenue); }
@keyframes anteprima-scende { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* "Mostra altre": largo quanto la colonna, discreto, in fondo. */
.storico-altre { display: block; width: 100%; margin-top: var(--s2); padding: 7px; border-radius: 8px;
                 border: 1px dashed var(--bordo-forte); background: none; font: inherit; font-size: var(--t2);
                 color: var(--testo-2); cursor: pointer; transition: background .12s, color .12s; }
.storico-altre:hover { background: var(--sfiora); color: var(--blu); border-color: var(--blu); }
.storico-altre[hidden] { display: none; }
/* Dopo una tabella (31/10/2026, Clienti e Cosa compra): staccato dai bordi della scheda, non incollato. */
table + .storico-altre { width: calc(100% - 2 * var(--s4)); margin: var(--s3) var(--s4) var(--s4); }
/* Lo stesso "mostra altre" sui contatti della scheda marchio: aperto, sparisce. */
.altri-contatti { padding: 0 var(--s5) var(--s4); }
.altri-contatti > summary { list-style: none; cursor: pointer; text-align: center; }
.altri-contatti > summary::-webkit-details-marker { display: none; }
.altri-contatti[open] { padding: 0; }
.altri-contatti[open] > summary { display: none; }

/* L'ANNO (14/10/2026, Ultime attivita' e uscite, lo stesso pezzo): la
   freccia che gira, l'anno, quante voci, e un filo fino in fondo. Tutta la
   riga apre e chiude; aperto solo il piu' recente. Respiro fra un anno e
   l'altro. */
.storico-anno + .storico-anno { margin-top: var(--s3); }
.storico-anno > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s2);
                          margin: 0 calc(-1 * var(--s2)); padding: var(--s2); border-radius: var(--raggio); transition: background .12s; }
.storico-anno > summary::-webkit-details-marker { display: none; }
.storico-anno > summary::marker { content: ''; }
.storico-anno > summary::after { content: ''; flex: 1; height: 1px; background: var(--bordo-tenue); }
.storico-anno > summary > svg { flex: 0 0 auto; color: var(--testo-3); transform: rotate(-90deg); transition: transform .2s; }
.storico-anno[open] > summary > svg { transform: none; }
.storico-anno > summary:hover { background: var(--sfiora); }
.storico-anno > summary:hover > svg, .storico-anno > summary:hover .storico-anno-nome { color: var(--blu); }
.storico-anno-nome { font-size: var(--t5); font-weight: 700; color: var(--testo); letter-spacing: -.01em; }
.storico-anno:not([open]) > summary .storico-anno-nome { color: var(--testo-2); }
.storico-anno-conto { font-size: var(--t2); color: var(--testo-3); white-space: nowrap; }
.storico-anno[open] > summary { margin-bottom: var(--s1); }

/* ULTIME ATTIVITA' (14/10/2026, "una singola riga super esplicativa, che si
   puo' esplodere"): una riga sola - icona piccola, la frase (in chiaro cosa e
   con chi, in grigio il resto), la data - e al clic il resto sotto. */
.storico-riga.att { display: block; padding: 0; }
/* Il filtro e "mostra altre" nascondono con hidden: la riga sopra lo scavalcava
   (stessa forza, scritta dopo) e i filtri sembravano non fare niente (15/10/2026). */
.storico-riga.att[hidden], .storico-anno[hidden] { display: none; }
.att-riga { display: grid; grid-template-columns: 46px 20px minmax(0, 1fr) 12px; align-items: center; gap: var(--s2);
            min-height: 34px; padding: 4px 0; list-style: none; font-size: var(--t3); }
.att-riga::-webkit-details-marker { display: none; }
summary.att-riga { cursor: pointer; margin: 0 calc(-1 * var(--s2)); padding: 4px var(--s2); border-radius: var(--raggio); transition: background .12s; }
summary.att-riga:hover { background: var(--sfiora); }
.att-riga > svg { color: var(--testo-4); transform: rotate(-90deg); transition: transform .2s; }
.att-apri[open] > .att-riga > svg { transform: none; color: var(--blu); }
.att .pallino { width: 20px; height: 20px; border-radius: 6px; margin: 0; }
.att-frase { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--testo); }
.att-frase b { font-weight: 600; }
.att-frase a { color: var(--blu); }
.att-resto, .att-altri { color: var(--testo-3); }
.att-data { font-size: var(--t2); color: var(--testo-3); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
/* IL DETTAGLIO APERTO (15/10/2026, "piu' pulito, in griglia, piu' cool"): una
   carta bianca allineata alla frase. Le tessere (Collezione, Metri, Ordini) in
   griglia, sotto gli articoli o le campagne in righe allineate; la mail con
   l'oggetto, chi in due colonne, l'anteprima come citazione, Gmail in fondo. */
/* Allineata alla colonna del titolo (data | icona | TITOLO): sta in griglia. */
.att-dentro { display: grid; gap: var(--s3); margin: 8px 0 var(--s3) calc(46px + 20px + 2 * var(--s2)); padding: var(--s3);
              border: 1px solid var(--bordo-tenue); border-radius: 12px; background: var(--superficie);
              box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px rgba(16, 24, 40, .05);
              font-size: var(--t2); color: var(--testo-2); animation: anteprima-scende .22s var(--curva); }
.att-dentro p { margin: 0; }
/* Collezione, metri, ordine: UNA barra sottile, le voci affiancate e separate da un
   filo (15/10/2026: le tessere "avevano preso troppa importanza"). */
.att-fatti { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; margin: 0; padding: 5px 2px;
             border-radius: 8px; background: var(--sfiora); font-size: var(--t2); line-height: 1.4; }
.att-fatti > div { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; padding: 0 10px; }
.att-fatti > div + div { box-shadow: inset 1px 0 0 var(--bordo-tenue); }
.att-fatti dt { font-size: 11px; color: var(--testo-3); }
.att-fatti dd { margin: 0; font-weight: 600; color: var(--testo-2); font-variant-numeric: tabular-nums; }
.att-pezzi { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.att-pezzi li { padding: 3px 9px; border-radius: 999px; background: var(--sfiora); color: var(--testo-2); }
.att-righe { list-style: none; margin: 0; padding: 0; }
.att-righe li:first-child { border-top: 1px solid var(--bordo-tenue); }
.att-dentro > .att-righe:first-child li:first-child { border-top: 0; }
.att-righe li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s3);
                min-height: 32px; padding: 2px 4px; border-bottom: 1px solid var(--bordo-tenue); }
.att-righe li:hover { background: var(--sfiora); }
.att-righe li > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--testo); }
.att-righe li > span:first-child:has(> .articolo-apri) { overflow: visible; }
/* L'articolo in colonne: icona, nome (si accorcia), colore allineato a destra. */
.att-righe .articolo-apri { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; width: 100%; text-align: left; }
.att-righe .articolo-apri > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-righe .articolo-col { color: var(--testo-3); font-variant-numeric: tabular-nums; }
.att-righe li > .m { min-width: 40px; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; color: var(--testo-2); }
.att-campagna { font-size: var(--t2); }
.att-stato { padding: 2px 8px; border-radius: 999px; background: var(--sfiora-scuro); color: var(--testo-2); font-size: 11px; font-weight: 600; white-space: nowrap; }
.att-stato-clic { background: var(--verde-tenue); color: var(--verde); }
/* La mail. */
.att-oggetto { font-size: var(--t3); font-weight: 650; color: var(--testo); line-height: 1.4; }
.att-intestazione { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 3px var(--s2); margin: 0; }
.att-intestazione dt { color: var(--testo-3); }
.att-intestazione dd { margin: 0; color: var(--testo-2); overflow-wrap: anywhere; }
.att-citazione { margin: 0; padding: var(--s2) var(--s3); border-radius: 9px; background: var(--sfiora); color: var(--testo-2);
                 line-height: 1.55; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.att-piede { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.att-gmail { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-weight: 600; color: var(--blu); text-decoration: none; }
.att-gmail:hover { text-decoration: underline; text-underline-offset: 3px; }
.att-gmail svg { transform: rotate(-90deg); }
/* LA BARRA DELLO STORICO (15/10/2026): quante a sinistra, Filtri a destra, discreto. */
.att-barra { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 32px; margin-bottom: var(--s1); }
.att-quante { font-size: var(--t2); color: var(--testo-3); }
.att-filtri-bottone { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; cursor: pointer;
                      font-size: var(--t2); font-weight: 600; color: var(--testo-2); border: 1px solid var(--bordo-tenue); background: var(--superficie);
                      transition: background .12s, color .12s, border-color .12s; }
.att-filtri-bottone:hover, .att-filtri[open] > .att-filtri-bottone { color: var(--blu); border-color: color-mix(in srgb, var(--blu) 40%, transparent); background: var(--blu-tenue); }
.att-filtri-bottone .filtri-conta { min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; }
.att-filtri-bottone .filtri-conta[hidden] { display: none; }
.filtri-pannello.att-filtri-pannello { width: 240px; padding: var(--s2); display: grid; gap: 2px; }
.att-filtro { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: var(--s2);
              padding: 7px var(--s2); border-radius: 8px; font-size: var(--t3); color: var(--testo); cursor: pointer; }
.att-filtro:hover { background: var(--sfiora); }
.att-filtro input { margin: 0; accent-color: var(--blu); }
.att-filtro:has(input:not(:checked)) { color: var(--testo-3); }
.att-filtro-n { font-size: var(--t2); color: var(--testo-3); }
.att-filtri-tutte { justify-self: start; margin: var(--s1) var(--s2) 2px; padding: 0; border: 0; background: none; cursor: pointer;
                    font: inherit; font-size: var(--t2); font-weight: 600; color: var(--blu); }
.att-filtri-tutte:hover { text-decoration: underline; text-underline-offset: 3px; }
/* "Mostra tutte" solo quando qualcosa e' spento. */
.att-filtri-pannello:not(:has(input:not(:checked))) .att-filtri-tutte { display: none; }
.att-nessuna { margin: var(--s3) 0; font-size: var(--t3); color: var(--testo-3); text-align: center; }
.att-nessuna[hidden] { display: none; }

.proposte { padding: 0; }

/* DA CENSIRE (0048, rifatta il 29/09): una riga in griglia come gli elenchi -
   chi e' (iniziali colorate), cosa si propone (logo, ruolo, azienda), da dove
   arriva (capsula col colore della fonte), i bottoni. Il colore della fonte
   informa: e' lo stesso nella pallina dei filtri. Nessun bordino colorato. */
.censire-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
                 gap: var(--s3); margin: 0 var(--pagina) var(--s3); }
.censire-tutte { display: flex; align-items: center; gap: var(--s3); margin: 0;
                 font-size: var(--t2); color: var(--testo-3); }
/* Il clic e l'hover stanno sul tasto Conferma/Completa, non sulla carta (04/11/2026, Mattia). */
.censire-riga { transition: opacity .25s, transform .25s var(--curva); }
.censire-chi { display: flex; align-items: center; gap: var(--s3); min-width: 0; color: var(--testo); }
/* niente hover sul nome: si clicca il tasto */
.censire-testi { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.censire-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                                                  font-size: var(--t4); font-weight: 600; color: var(--testo); }
.censire-sotto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                 font-size: var(--t2); color: var(--testo-3); }
a.censire-sotto:hover { color: var(--blu); }
/* COSA SAPPIAMO: una tessera per dato. Piena se c'e', tratteggiata se manca,
   ambra il dubbio "e' gia' nel CRM?". */
.censire-sappiamo { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.tessera { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 26px; padding: 0 10px;
           border-radius: 999px; background: var(--sfiora); border: 1px solid var(--bordo-tenue);
           font-size: var(--t2); font-weight: 500; color: var(--testo-2);
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tessera svg { flex: 0 0 auto; color: var(--testo-3); }
.tessera .logo-tondo { flex: 0 0 auto; }
.censire-fonte { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.censire-fonte .censire-sotto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.censire-storia { font-size: var(--t2); line-height: 1.4; color: var(--testo-3); }
.censire-azioni { text-align: right; }
.censire-azioni .bottone { min-width: 112px; justify-content: center; }
.da-assegnare { font-weight: 600; color: var(--ambra); }
/* Le capsule della fonte: lo stesso tono nella pallina dei filtri. */
.segno-blu   { background: var(--blu-tenue); color: var(--blu-scuro); }
.segno-viola { background: var(--viola-tenue); color: var(--viola); }
.segno-rosa  { background: var(--rosa-tenue); color: var(--rosa); }
.segno-verde { background: var(--verde-tenue); color: var(--verde); }

/* LA GERARCHIA DEI BOTTONI, per tutta l'applicazione: verde il sicuro
   (confermare), blu il "vai a completare", bianco il neutro, e il togliere
   come testo rosso tenue - c'e', ma non chiama il clic. Il rosso pieno
   (.bottone-rosso) resta per chi cancella davvero, dentro una conferma. */
.bottone-verde { background: linear-gradient(180deg, #16A34A, var(--verde)); color: #FFF; border-color: transparent; }
.bottone-verde:hover { background: #05603A; color: #FFF; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(6, 118, 71, .32); }
.bottone-togli { background: transparent; border-color: transparent; color: var(--testo-3); padding: 0 var(--s2); }
.bottone-togli:hover { background: var(--rosso-tenue); color: var(--rosso); }

/* La riga confermata se ne va sul posto: scivola e sparisce. */
/* LA FINESTRA, una per tutte le righe (29/09): in testa chi e' e da dove
   arriva, sotto l'interruttore e quattro campi tutti alti uguali. Quello che
   ha messo il CRM e' PROPOSTO: campo tinto verde acqua e una scintilla
   dentro, a destra; se ne vanno appena lo si tocca. Nessuna didascalia. */
dialog.censire-dialog { width: min(560px, calc(100vw - 32px)); }
/* La testa in griglia: avatar | chi e' | chiudi. Dentro, tre righe: il
   nome, l'indirizzo, e la capsula della fonte con accanto la frase che la
   spiega - la capsula a larghezza fissa, cosi' la frase parte sempre dallo
   stesso punto. */
.censire-dialog .censire-testa { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr);
                                 column-gap: var(--s4); align-items: start;
                                 padding-top: var(--s5); padding-bottom: var(--s4); }
.censire-testa .avatar.grande { width: 48px; height: 48px; font-size: var(--t5); }
/* La x in alto a destra, nell'angolo: fuori dalla griglia. */
.censire-testa .scheda-chiudi { position: absolute; top: 10px; right: 10px; margin: 0; }
.censire-intesta { padding-right: 28px; }
.censire-intesta { display: grid; row-gap: 2px; min-width: 0; }
.censire-intesta h3 { margin: 0; font-size: var(--t6); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.censire-email { font-size: var(--t2); color: var(--testo-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.censire-da { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: var(--s3); align-items: start;
              margin-top: var(--s2); }
.censire-da .segno { height: 22px; justify-content: center; padding: 0 8px; }
.censire-da .censire-storia { padding-top: 2px; color: var(--testo-2); }
.censire-corpo { display: flex; flex-direction: column; gap: var(--s4); padding-top: var(--s2); }
.censire-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s3); }
.censire-largo { grid-column: 1 / -1; }
.censire-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.censire-campo[hidden] { display: none; }
.censire-campo > label { font-size: var(--t2); font-weight: 500; color: var(--testo-2); }
.censire-controllo { position: relative; display: block; }
.censire-controllo[hidden] { display: none; }
.censire-campo .campo { width: 100%; height: 40px; }

/* Il PROPOSTO: una tinta sola, verde acqua, che non e' di nessuna fonte. */
.proposto-segno { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
                  display: none; color: var(--proposto); pointer-events: none; }
.censire-campo.proposto .proposto-segno { display: flex; }
.censire-campo.proposto .campo,
.censire-campo.proposto .pesca-tessera { background: var(--proposto-fondo); border-color: var(--proposto-bordo); }
.censire-campo.proposto .campo { padding-right: 36px; }
.censire-campo.proposto select.campo { padding-right: 60px; }
.censire-campo select ~ .proposto-segno { right: 36px; }
.pesca-scelto .proposto-segno { right: 40px; }
/* Il commerciale (solo admin): la tendina e, se cambiata, "Assegna e basta". */
.censire-rep { padding-top: var(--s3); border-top: 1px solid var(--bordo-tenue); }
.censire-rep-riga { display: flex; gap: var(--s2); }
.censire-rep-riga .campo { flex: 1; min-width: 0; }
.censire-rep-riga .bottone { flex: 0 0 auto; height: 40px; }
.censire-rep-riga .bottone[hidden] { display: none; }
/* Un campo obbligatorio vuoto, dopo un tentativo di salvare: bordo rosso. */
.censire-campo.manca > label { color: var(--rosso); }
.censire-campo.manca .campo { border-color: var(--rosso); box-shadow: 0 0 0 3px var(--rosso-tenue); }
/* Il bottone spento dice cosa manca: grigio, non verde. */
.censire-dialog .bottone-verde[aria-disabled="true"] { background: var(--sfiora-scuro); color: var(--testo-3);
                                                      box-shadow: none; transform: none; cursor: not-allowed; }
/* "non cliente": l'azienda esiste solo nel CRM. Stessa etichetta ovunque. */
.non-cliente { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; margin-left: 6px;
               border-radius: 999px; background: var(--ambra-tenue); color: var(--ambra);
               font-size: 11px; font-style: normal; font-weight: 600; white-space: nowrap; cursor: help; }

/* Persona nuova / e' gia' nel CRM: due metà di un interruttore. */
.scelta-due { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
              background: var(--sfiora-scuro); border-radius: var(--raggio-g); }
.scelta-due label { position: relative; margin: 0; }
.scelta-due input { position: absolute; opacity: 0; pointer-events: none; }
.scelta-due span { display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px;
                   border-radius: var(--raggio); font-size: var(--t3); font-weight: 500; color: var(--testo-2);
                   cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.scelta-due span:hover { color: var(--testo); }
.scelta-due input:checked + span { background: var(--superficie); color: var(--testo); font-weight: 600;
                                   box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
.scelta-due input:focus-visible + span { box-shadow: 0 0 0 3px var(--blu-tenue); }

/* LA PESCA: il campo che cerca, la tessera della voce scelta, l'elenco che
   si apre SOPRA a tutto (popover: la posizione la mette effetti.js). */
.pesca-cerca { position: relative; display: block; }
.pesca-cerca[hidden] { display: none; }
.pesca-cerca svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--testo-4); pointer-events: none; }
.pesca-cerca .campo { padding-left: 36px; }
.pesca-voce { display: flex; align-items: center; gap: var(--s3); width: 100%; padding: 8px 10px; min-width: 0;
              border: none; border-radius: var(--raggio); background: none; text-align: left; cursor: pointer; font: inherit; }
.pesca-voce .censire-testi b { font-weight: 600; color: var(--testo); font-size: var(--t3);
                               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pesca-voce .avatar { background: var(--sfiora-scuro); color: var(--testo-2); }
.pesca-tessera { height: 40px; padding: 0 12px; gap: 10px; border: 1px solid var(--bordo-forte);
                 background: var(--superficie); border-radius: var(--raggio); transition: border-color .15s, background .15s; }
.pesca-tessera:hover { border-color: var(--blu); }
.pesca-tessera .censire-testi { flex-direction: row; align-items: baseline; gap: var(--s2); min-width: 0; }
.pesca-tessera .censire-testi b { flex: 0 1 auto; }
.pesca-tessera .censire-sotto { flex: 1 1 auto; }
.pesca-tessera .logo-tondo { --d: 24px !important; }
.pesca-tessera .avatar { width: 24px; height: 24px; font-size: var(--t1); }
.pesca-togli { margin-left: auto; flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center;
               border-radius: 50%; font-size: 18px; line-height: 1; color: var(--testo-3); }
.pesca-tessera:hover .pesca-togli { background: var(--sfiora-scuro); color: var(--testo); }
.pesca-elenco { margin: 0; padding: 4px; list-style: none; inset: auto; position: fixed; overflow-y: auto;
                background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio-g);
                box-shadow: 0 16px 40px rgba(14, 27, 44, .22), 0 2px 6px rgba(14, 27, 44, .08); }
.pesca-elenco:popover-open { animation: pesca-entra .12s var(--curva); }
@keyframes pesca-entra { from { opacity: 0; transform: translateY(-4px); } }
.pesca-voce:hover, .pesca-voce.attiva { background: var(--riga-sfiora); }
.pesca-vuoto { padding: 10px 12px; font-size: var(--t2); color: var(--testo-3); }
.censire-errore { margin: 0; padding: 10px 12px; border-radius: var(--raggio); background: var(--rosso-tenue);
                  font-size: var(--t2); color: var(--rosso); }
.censire-errore[hidden] { display: none; }
/* "Non e' un contatto" al secondo tocco: ora e' rosso davvero. */
.bottone-togli.sicuro { background: var(--rosso-tenue); color: var(--rosso); }

/* =============================================================================
   LA PIPELINE (/pipeline; rifatta il 01/10/2026, era una bacheca a cinque
   colonne con 460 carte). In alto le quattro tappe della stagione con lo
   scarto dall'anno prima; sotto una riga per cliente, e le stesse quattro
   tappe in colonna unite da un filo che si colora fin dove e' arrivato.
   Il colore sta in UN punto: il pallino della tappa di adesso, col colore di
   "tocca a" (ambra noi, blu il cliente, verde chiusa). Le tappe passate sono
   blu notte, quelle da fare vuote. Niente arcobaleno di fasi.
   ============================================================================= */
.testata-riga { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s6); }
.testata-larga .titolo { margin: 0; }
.testata-schede { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--raggio-g); background: rgba(255, 255, 255, .08); }
.testata-scheda { padding: 8px 14px; border-radius: 9px; color: rgba(255, 255, 255, .75); font-size: var(--t3); font-weight: 500;
                 text-decoration: none; transition: background .15s, color .15s; }
.testata-scheda:hover { background: rgba(255, 255, 255, .1); color: #FFF; }
.testata-scheda.attiva { background: #FFF; color: var(--notte); font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }

/* LE CIFRE DELLA STAGIONE: una banda in fondo alla testata blu notte, come le
   cifre della scheda azienda (01/10/2026: le carte bianche si confondevano
   con la tabella sotto). Non si cliccano: le tappe si scelgono nei Filtri. */
/* Le cifre filtrate (20/10/2026, Trattative): lo si dice sopra, sulla testata scura. */
.testata-filtrato { display: inline-flex; align-items: center; gap: 6px; margin: var(--s3) 0 calc(-1 * var(--s2)); font-size: var(--t2); color: rgba(255, 255, 255, .72); }
.testata-cifre { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--s5) 0 0; padding-top: var(--s5);
              border-top: 1px solid rgba(255, 255, 255, .1); }
.testata-cifra { min-width: 0; padding: 0 var(--s5); border-left: 1px solid rgba(255, 255, 255, .1); }
.testata-cifra:first-child { padding-left: 0; border-left: 0; }
.testata-cifra dt { display: flex; align-items: center; gap: var(--s2); font-size: var(--t3); font-weight: 600; color: rgba(255, 255, 255, .7); }
.testata-cifra dd { margin: 0; }
.testata-cifra-numero { display: flex; align-items: center; gap: 6px; margin-top: var(--s2) !important; font-size: var(--t3); color: rgba(255, 255, 255, .6); }
.testata-cifra-numero b { font-size: var(--t7); font-weight: 700; letter-spacing: -.02em; color: #FFF; font-variant-numeric: tabular-nums; }
.testata-cifra-sotto { margin-top: 2px !important; font-size: var(--t3); color: rgba(255, 255, 255, .75); font-variant-numeric: tabular-nums; }
.pipe-tappa-num { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px;
                  background: rgba(255, 255, 255, .14); color: #FFF; font-size: var(--t1); font-weight: 700; }
/* Sul blu notte lo scarto prende i toni chiari (gli stessi della testata azienda). */
.testata-cifre .scarto-su   { background: rgba(95, 227, 168, .16); color: var(--verde-notte); }
.testata-cifre .scarto-giu  { background: rgba(255, 143, 160, .16); color: var(--rosso-notte); }
.testata-cifre .scarto-pari { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .7); }
/* LE CIFRE DELLE STATISTICHE, compatte (15/10/2026: "fa cacare e prende troppo
   spazio verticale"): pastiglie di vetro su una riga, il numero grande a
   sinistra, etichetta e dettaglio a destra su due righe. Solo nelle
   Statistiche (.stat-cifre): le Trattative tengono le loro. */
.stat-cifre { gap: var(--s3); margin-top: var(--s4); padding-top: 0; border-top: 0; }
.stat-cifre .testata-cifra { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 0;
                              padding: 10px 16px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .07);
                              box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.stat-cifre .testata-cifra:first-child { padding-left: 16px; }
/* L'etichetta sopra a tutta larghezza; sotto il numero e, accanto, il dettaglio. */
.stat-cifre .testata-cifra dt { grid-column: 1 / -1; grid-row: 1; margin-bottom: 4px; font-size: var(--t2); color: rgba(255, 255, 255, .65);
                                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-cifre .testata-cifra-numero { grid-column: 1; grid-row: 2; margin: 0 !important; }
.stat-cifre .testata-cifra-numero b { font-size: 28px; line-height: 1; white-space: nowrap; }
/* Il dettaglio va a capo, non si taglia (le cifre in euro dei Mercati sono lunghe). */
.stat-cifre .testata-cifra-sotto { grid-column: 2; grid-row: 2; align-self: center; margin: 0 !important; font-size: var(--t2); line-height: 1.35; color: rgba(255, 255, 255, .8); }

/* Lo scarto dall'anno prima: freccina e numero, piccoli, accanto alla cifra;
   il confronto per esteso nel fumetto (.tip). */
.scarto { display: inline-flex; align-items: center; gap: 2px; padding: 1px 5px; border-radius: 5px; vertical-align: 2px;
          font-size: var(--t1); font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; cursor: help; }
.scarto-su   { background: var(--verde-tenue); color: var(--verde); }
.scarto-giu  { background: var(--rosso-tenue); color: var(--rosso); }
.scarto-pari { background: var(--sfiora); color: var(--testo-3); }

/* La riga del cliente: nome, quattro icone, una frase, quando. Tutta la riga
   si clicca e apre il dettaglio. */
.pipe-riga { cursor: pointer; }
.pipe-riga:focus-visible { outline: 2px solid var(--blu); outline-offset: -2px; }
.pipe-cliente-riga { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.pipe-logo { flex: 0 0 28px; display: grid; place-items: center; width: 28px; height: 28px; }
.pipe-cliente-testi { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.pipe-cliente-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t5); font-weight: 600; color: var(--testo); }
.pipe-riga:hover .pipe-cliente-nome { color: var(--blu); }
.pipe-cliente-testi small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t2); color: var(--testo-3); }

/* Le icone delle tappe: tre stati che si distinguono senza leggere niente.
   Fatto = verde pieno con la spunta; in corso = ambra, mezzo pieno; non
   ancora = cerchio vuoto e tenue. */
table.elenco th.pipe-col-tappa, table.elenco td.pipe-icona-cella { text-align: center; padding-left: 4px; padding-right: 4px; }
.pipe-icona { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; vertical-align: middle; }
.pipe-icona.stato-fatta { background: var(--verde-vivo); color: #FFF; box-shadow: 0 1px 3px rgba(18, 183, 106, .35); }
.pipe-icona.stato-in_corso { background: var(--ambra-tenue); color: var(--ambra-vivo); box-shadow: inset 0 0 0 1.5px var(--ambra-bordo); }
.pipe-icona.stato-no { background: var(--superficie); box-shadow: inset 0 0 0 1.5px var(--bordo); }

/* Cosa c'e' da fare: una frase, col colore che dice quanto preme. */
.passo { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t3); font-weight: 600; }
.passo::before { content: ''; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.passo-rosso  { color: var(--rosso); }
.passo-ambra  { color: var(--ambra); }
.passo-blu    { color: var(--blu-scuro); }
.passo-grigio { color: var(--testo-3); font-weight: 500; }
.pipe-perche { display: block; margin: 2px 0 0 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t2); color: var(--testo-3); }
/* L'ultimo contatto (Layout::lastContactCell): Trattative, Aziende, Marchi. */
.cella-contatto { white-space: nowrap; line-height: 1.3; }
.cella-contatto small { display: block; overflow: hidden; text-overflow: ellipsis; font-size: var(--t2); color: var(--testo-3); }
.cella-contatto a { display: block; overflow: hidden; text-overflow: ellipsis; font-size: var(--t3); font-weight: 500; color: var(--blu-scuro); }
.cella-contatto a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pipe-chi { font-size: var(--t3); color: var(--testo-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pipe-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5); margin: 0; padding: var(--s3) var(--fianco);
                border-top: 1px solid var(--bordo-tenue); font-size: var(--t2); color: var(--testo-3); }
.pipe-legenda > span { display: inline-flex; align-items: center; gap: 6px; }
.pipe-legenda .pipe-icona { width: 18px; height: 18px; }
.pipe-legenda .pipe-icona svg { width: 10px; height: 10px; }
.pipe-legenda-nota { margin-left: auto; }

/* LA FINESTRA DEL DETTAGLIO: chi e', cosa c'e' da fare, le quattro tappe con
   date e numeri, il link alla scheda. */
dialog.pipe-det { width: min(520px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 16px;
                  background: var(--superficie); color: var(--testo); box-shadow: var(--ombra-alta); }
dialog.pipe-det::backdrop { background: rgba(14, 27, 44, .45); backdrop-filter: blur(2px); }
.pipe-det-chiudi { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 50%;
                   background: var(--sfiora); color: var(--testo-2); font-size: 20px; line-height: 1; cursor: pointer; }
.pipe-det-chiudi:hover { background: var(--sfiora-scuro); }
.pipe-det-corpo { padding: var(--s6); }
.pipe-det-testa { display: flex; align-items: center; gap: var(--s3); padding-right: var(--s8); }
.pipe-logo-grande { flex-basis: 44px; width: 44px; height: 44px; }
.pipe-logo-grande .logo-tondo { --d: 44px; }
.pipe-det-chi { display: flex; flex-direction: column; min-width: 0; }
.pipe-det-chi b { font-size: var(--t6); }
.pipe-det-chi small { font-size: var(--t3); color: var(--testo-3); }
.pipe-det-passo { display: flex; flex-direction: column; gap: 2px; margin: var(--s5) 0; padding: var(--s3) var(--s4);
                  border-radius: var(--raggio-g); background: color-mix(in srgb, currentColor 8%, var(--superficie)); }
.pipe-det-passo > span { font-size: var(--t1); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .8; }
.pipe-det-passo b { font-size: var(--t5); }
.pipe-det-passo small { font-size: var(--t2); color: var(--testo-2); }
.pipe-det-tappe { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pipe-det-tappa { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3) 0; }
.pipe-det-tappa + .pipe-det-tappa { border-top: 1px solid var(--bordo-tenue); }
.pipe-det-testi { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.pipe-det-nome { font-size: var(--t2); font-weight: 600; color: var(--testo-3); }
.pipe-det-testi b { font-size: var(--t4); font-weight: 600; }
.pipe-det-testi small { font-size: var(--t3); color: var(--testo-2); }
.pipe-det-tappa.det-no b { font-weight: 400; color: var(--testo-3); }
.pipe-det-piede { display: flex; justify-content: flex-end; margin-top: var(--s4); }
dialog.pipe-det { max-height: calc(100vh - 48px); overflow-y: auto; }
.pipe-det-testi { flex: 1 1 auto; }
/* Il "+" che apre gli articoli della tappa. */
.pipe-det-apri { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; margin-top: 2px; padding: 0;
                 border: 1px solid var(--bordo); border-radius: 8px; background: var(--superficie);
                 color: var(--blu-scuro); font-size: 18px; font-weight: 500; line-height: 1; cursor: pointer; }
.pipe-det-apri:hover { border-color: var(--blu); background: var(--blu-tenue); }
.pipe-det-apri[aria-expanded="true"] { background: var(--blu-tenue); border-color: var(--blu); }
.pipe-det-articoli { display: block; margin-top: var(--s2); max-height: 260px; overflow-y: auto;
                     border-radius: var(--raggio); background: var(--sfiora); }
.pipe-det-articoli[hidden] { display: none; }
.pipe-det-articoli ul { list-style: none; margin: 0; padding: 4px 0; }
.pipe-det-articoli li { display: flex; flex-direction: column; padding: 6px var(--s3); }
.pipe-det-articoli li + li { border-top: 1px solid var(--bordo-tenue); }
.pipe-det-articoli li b { font-size: var(--t3); font-weight: 600; }
.pipe-det-articoli li small { font-size: var(--t2); color: var(--testo-3); }
.pipe-det-articoli .pipe-det-attendi { display: block; padding: var(--s3); font-size: var(--t2); color: var(--testo-3); }

/* =============================================================================
   LA RICERCA DEGLI ELENCHI, una per Contatti, Aziende e Marchi (_ricerca.php,
   30/09): il tasto FILTRI apre un pannello sotto di se', le scelte sono
   pastiglie (una per gruppo), e i filtri attivi restano in vista sotto la
   ricerca come pastiglie con la crocetta.
   ============================================================================= */
.filtri-apri { position: relative; }
.filtri-apri > summary { list-style: none; }
.filtri-apri > summary::-webkit-details-marker { display: none; }
.bottone-filtri { display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer;
                  background: rgba(255, 255, 255, .08); color: #FFF; border: 1px solid rgba(255, 255, 255, .18); }
.bottone-filtri:hover, .filtri-apri[open] > .bottone-filtri { background: rgba(255, 255, 255, .16); }
.filtri-conta { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
                border-radius: 999px; background: var(--blu); color: #FFF; font-size: var(--t1); font-weight: 700; }
.filtri-pannello { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0;
                   width: min(560px, calc(100vw - 32px)); max-height: min(70vh, 640px); overflow: auto;
                   padding: var(--s4) var(--s5); border-radius: 14px; background: var(--superficie); color: var(--testo);
                   box-shadow: 0 24px 60px rgba(16, 24, 40, .22), 0 2px 8px rgba(16, 24, 40, .08);
                   animation: filtri-entra .16s ease-out; }
@keyframes filtri-entra { from { opacity: 0; transform: translateY(-4px); } }
.filtri-gruppo { padding: var(--s3) 0; }
.filtri-gruppo + .filtri-gruppo { border-top: 1px solid var(--bordo-tenue); }
/* Niente maiuscoletto spaziato (vietato, DESIGN.md): il titolo e' piccolo e grigio. */
.filtri-titolo { margin: 0 0 var(--s2); font-size: var(--t3); font-weight: 500; color: var(--testo-3); }
/* I FILTRI IN COLONNE (06/10/2026, 'sezione' in _ricerca.php): il pannello si
   allarga, una colonna per sezione (la persona, l'azienda, il marchio), il
   titolo della sezione sopra. */
.filtri-pannello.filtri-a-sezioni { width: min(980px, calc(100vw - 32px)); max-height: min(80vh, 720px); padding: var(--s5) var(--s6) var(--s4); }
.filtri-sezioni { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 var(--s6); }
/* Due sezioni (Marchi): il pannello si stringe, niente colonna vuota. */
.filtri-pannello.filtri-a-sezioni:has(.filtri-sezione:nth-child(2):last-child) { width: min(680px, calc(100vw - 32px)); }
.filtri-sezione { min-width: 0; }
.filtri-sezione + .filtri-sezione { padding-left: var(--s6); box-shadow: inset 1px 0 0 var(--bordo-tenue); }
.filtri-sezione-titolo { margin: 0 0 var(--s1); font-size: var(--t5); font-weight: 650; letter-spacing: -.01em; color: var(--testo); }
.filtri-sezione .filtri-gruppo { padding: var(--s3) 0; }
.filtri-sezione .filtri-gruppo .pillola { height: 28px; padding: 0 10px; }
.filtri-a-sezioni .filtri-piede { margin-top: var(--s3); }
.filtri-gruppo .pillola { height: 30px; padding: 0 12px; font-size: var(--t3); }
/* "Non lavora piu' da ..." nella finestra di Verifica contatti: c'e' solo se
   la persona scelta lavora altrove (data-chi la mostra, .vuota la toglie). */
.censire-lascia { grid-column: 1 / -1; padding: var(--s3) var(--s4); border-radius: var(--raggio); background: var(--ambra-tenue); color: var(--testo); }
.censire-lascia b { font-weight: 600; }
.censire-lascia.vuota { display: none; }
/* Il giorno di "Sentiti dal…" / "Non sentiti dal…": compare solo quando serve, col CSS. */
.filtri-giorno { display: none; align-items: center; gap: var(--s3); margin-top: var(--s3); font-size: var(--t3); color: var(--testo-2); }
.filtri-giorno .campo { width: 180px; }
.filtri-gruppo:has(input[value="dopo"]:checked) .filtri-giorno, .filtri-gruppo:has(input[value="prima"]:checked) .filtri-giorno { display: flex; }
/* I filtri a tendina (tanti valori: nazioni, famiglie, gli anni). */
/* Tendine e campi da scrivere hanno la STESSA forma dei gruppi a pillole
   (04/10/2026): il titolo sopra, la scelta sotto, il filo fra un gruppo e
   l'altro. Erano etichetta a sinistra e campo a destra: un altro modulo. */
.filtri-tendina { display: block; }
.filtri-tendina .filtri-titolo { display: block; }
.filtri-tendina select, .filtri-tendina input { width: 100%; height: 36px; }
.elenco-testata .filtri-pannello input.campo { padding: 0 12px; }
.elenco-testata .filtri-pannello input.campo::placeholder { color: var(--testo-3); }
/* Il pannello e' bianco anche dentro la testata scura: la tendina torna chiara. */
.elenco-testata .filtri-pannello .campo { height: 36px; color: var(--testo); background-color: var(--superficie);
                                               border-color: var(--bordo-forte); font-size: var(--t4); }
.elenco-testata .filtri-pannello .campo:hover { background-color: var(--sfiora); }
.filtri-piede { display: flex; align-items: center; justify-content: flex-end; gap: var(--s3);
                padding-top: var(--s3); border-top: 1px solid var(--bordo-tenue); }
.filtri-piede .azzera { color: var(--testo-3); }
.filtri-piede .bottone { height: 38px; }
.filtri-attivi { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s3); }
.filtro-attivo { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
                 border-radius: 999px; background: rgba(255, 255, 255, .14); color: #FFF; font-size: var(--t2);
                 text-decoration: none; }
.filtro-attivo span { color: rgba(255, 255, 255, .65); }
.filtro-attivo b { font-weight: 400; font-size: 15px; line-height: 1; opacity: .7; }
.filtro-attivo:hover { background: rgba(255, 255, 255, .24); color: #FFF; }
.filtro-attivo:hover b { opacity: 1; }

/* IL SUGGERIMENTO A FUMETTO: un [data-tip] qualsiasi, al passaggio o col fuoco
   (tastiera, tocco). Lo disegna effetti.js sopra la pagina (position fixed):
   dentro la tabella che scorre, un fumetto in CSS veniva tagliato. */
.tip { cursor: help; }
/* Un numero col fumetto si riconosce (28/10/2026, Mattia: "deve esserci un elemento grafico che faccia capire che c'e'
   un tooltip"): sottolineato a puntini, blu al passaggio. Primo uso: i clienti in Statistiche > Articoli. */
.tip-sotto { border-bottom: 1px dotted var(--testo-3); }
.tip-sotto:hover, .tip-sotto:focus-visible { color: var(--blu); border-bottom-color: var(--blu); outline: none; }

.fumetto { position: fixed; z-index: 90; max-width: 300px; padding: 8px 10px; border-radius: 8px;
           background: #101828; color: #FFF; font-size: var(--t2); line-height: 1.45; white-space: pre-line;
           box-shadow: 0 8px 24px rgba(16, 24, 40, .25); pointer-events: none;
           animation: fumetto-entra .12s ease-out; }
@keyframes fumetto-entra { from { opacity: 0; transform: translateY(3px); } }

/* LO STATO DEL COBRANDING (Layout::cobrandingBadge): il colore dice quando,
   la forma quanto. Arancione (lo stesso del bollino del cobranding nella
   scheda azienda) = quest'anno; grigio = anni passati; due etichette = piu'
   cose, una = solo etichetta. */
.cob-stato { position: relative; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; outline: none; }
.cob-stato > svg { position: relative; }
/* Piu' cose: la seconda etichetta dietro, spostata in alto a destra. */
.cob-stato .cob-dietro { position: absolute; top: 5px; right: 5px; line-height: 0; opacity: .5; }
.cob-stato:has(.cob-dietro) > svg { transform: translate(-2px, 2px); }
.cob-stato-4 { background: linear-gradient(145deg, #FBB44A, var(--ambra)); color: #FFF; box-shadow: 0 2px 6px rgba(217, 119, 6, .3); }
.cob-stato-3 { background: var(--ambra-tenue); color: var(--ambra); box-shadow: inset 0 0 0 1px var(--ambra-bordo); }
.cob-stato-2 { background: var(--sfiora-scuro); color: var(--testo-2); }
.cob-stato-1 { background: var(--sfiora); color: var(--testo-3); box-shadow: inset 0 0 0 1px var(--bordo); }
.cob-stato:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }

/* LA LISTA MARCHI: le tre colonne del cobranding centrate e su un fondo appena
   caldo; le celle si cambiano al volo (campo-valore) e sito e Instagram hanno
   accanto l'icona che li apre in un'altra scheda. */
table.elenco thead th { vertical-align: middle; }
table.elenco .centro { text-align: center; }
table.elenco th.centro a.ordina { justify-content: center; position: relative; }
/* Nelle colonne centrate la freccia dell'ordine sta FUORI dal centro: dentro,
   spostava il titolo 7px a sinistra del contenuto (misurato il 30/09). */
table.elenco th.centro .ordina-freccia { position: absolute; left: 100%; margin-left: 4px; }
/* E il contenuto centrato non ha i margini negativi della cella modificabile
   (spostavano le pastiglie 6px a sinistra). */
table.elenco td.centro .campo-valore { margin-left: 0; margin-right: 0; }
/* Il blocco del cobranding si stacca dalle colonne dopo: spazio e un filetto. */
table.elenco .gruppo-fine { padding-right: var(--s5); border-right: 1px solid var(--bordo-tenue); }
table.elenco .gruppo-fine + th, table.elenco .gruppo-fine + td { padding-left: var(--s5); }
table.elenco-marchi th[data-tip] { cursor: help; }
table.elenco-marchi .campo-valore { padding: 3px 6px; margin: -3px -6px; border-radius: 6px; font-size: inherit; }
/* Il nome del marchio: corpo pieno, e la colonna si allarga finche' c'e'
   spazio; solo se non basta va a capo (due righe al massimo). */
table.elenco-marchi .marchio-lista .nome-link { font-size: var(--t5); white-space: normal; line-height: 1.25; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Le larghezze le decide il contenuto della pagina (layout automatico): un
   dominio lungo allarga il sito solo quando c'e', e il nome del marchio si
   prende il resto. Le colonne corte non vanno a capo. */
/* 13/10/2026 ("i testi troppo appiccicati"): le tre del cobranding larghe
   quanto il titolo con la sua freccia, i dati quanto il loro contenuto. */
table.elenco-marchi col.col-cob { width: 88px; }
table.elenco-marchi col.col-cob:nth-child(3) { width: 96px; }
table.elenco-marchi col.col-cob:nth-child(5) { width: 100px; }
table.elenco-marchi col.col-dato { width: 128px; }
table.elenco-marchi col.col-dato:nth-child(7) { width: 104px; }
table.elenco-marchi col.col-dato:nth-child(8) { width: 80px; }
table.elenco-marchi col.col-dato:nth-child(9) { width: 128px; }
/* 29/10/2026 ("le larghezze delle colonne segano i testi"): le fasce nuove sono piu' lunghe (Premium / Bridge,
   Mass / Fast fashion) e Nessuno in Importanza sforava. Segmento va a capo (il nome del marchio non perde spazio), le tre del cobranding coi margini dei titoli. */
table.elenco-marchi td.gruppo-cob { padding-left: 4px; padding-right: 4px; }
table.elenco-marchi td:nth-child(6), table.elenco-marchi td:nth-child(6) .campo-valore { white-space: normal; line-height: 1.3; overflow-wrap: normal; word-break: normal; }
/* Il paese del marchio (0124): una colonna stretta PRIMA del marchio, la sola
   bandiera (15/10/2026: il bollino sul logo "rende il layout fastidioso"). */
table.elenco-marchi col.col-paese { width: 54px; }
table.elenco-marchi .cella-paese, table.elenco-marchi .cella-paese:first-child { padding-left: var(--s4); padding-right: 4px; text-align: center; }
table.elenco-marchi .cella-paese + td, table.elenco-marchi .cella-paese + th { padding-left: var(--s3); }
table.elenco-marchi .cella-paese .campo-valore { display: inline-block; min-height: 0; margin: 0; padding: 3px; line-height: 0; }
table.elenco-marchi .cella-paese .bandiera { width: 20px; height: 15px; margin: 0; border-radius: 2px; box-shadow: 0 0 0 1px rgba(15, 23, 42, .08); }
table.elenco-marchi .cella-paese .e-vuoto { line-height: 1.2; font-size: 11px; }
table.elenco-marchi .cella-paese .campo-valore.in-modifica { position: relative; z-index: 3; width: 180px; line-height: normal; padding: 0; }
/* Il marchio non si schiaccia: sotto questa larghezza la tabella scorre. */
table.elenco-marchi { min-width: 1120px; }
/* I dati dopo il marchio a 14: Contemporary e i siti ci stanno senza tagli. */
table.elenco-marchi td:not(:nth-child(2)) { font-size: var(--t4); }
/* Le tre del cobranding: titoli centrati con poco margine, la freccia ci sta. */
table.elenco-marchi th.gruppo-cob { padding-left: 4px; padding-right: 4px; }
table.elenco-marchi td, table.elenco-marchi th { white-space: nowrap; }
/* Il nome si legge sempre intero: se non ci sta va a capo, mai tagliato. */
table.elenco-marchi td:nth-child(2) { white-space: normal; }
table.elenco-marchi .marchio-lista .nome-link { -webkit-line-clamp: unset; display: inline; overflow: visible; }
/* A capo fra le parole, non fra le lettere. */
table.elenco-marchi .marchio-lista .nome-link { overflow-wrap: normal; }
table.elenco-marchi .marchio-lista .nome-link.nome-lungo { font-size: var(--t4); letter-spacing: -.01em; }
/* Segmento e categoria riempiono la loro colonna (Contemporary ci sta). */
table.elenco-marchi .campo-valore { max-width: 100%; }
/* Instagram e sito allineati a destra, con l'icona che li apre in fondo. */
table.elenco-marchi td.numero .con-apri { justify-content: flex-end; }
/* Il sito non serve leggerlo per intero: al massimo 140px, e quello che
   avanza sfuma nel bianco (non i puntini). La colonna resta stretta. */
table.elenco-marchi td.cella-sito .con-apri { max-width: 100%; gap: 2px; }
table.elenco-marchi td.cella-sito .con-apri > .campo-valore { text-overflow: clip; }
/* La sfumatura solo dove il testo sfora davvero (la classe la mette effetti.js). */
.sfuma { -webkit-mask-image: linear-gradient(to right, #000 75%, transparent);
                 mask-image: linear-gradient(to right, #000 75%, transparent); }
table.elenco-marchi th.numero, table.elenco-marchi th.numero a.ordina { text-align: right; justify-content: flex-end; }
/* Una cella vuota a riposo e' un trattino tenue, come ogni cella vuota.
   Passando sulla riga il trattino diventa un "+" discreto: si capisce che si
   compila, senza gettoni ne' scritte ripetute. Sotto il puntatore, una cella
   modificabile si scurisce appena, in grigio (niente blu). */
table.elenco-marchi .campo-valore.e-vuoto { font-size: 0; color: transparent; }
table.elenco-marchi .campo-valore.e-vuoto::before { content: '-'; font-size: var(--t4); color: var(--testo-4); }
table.elenco-marchi tr:hover .campo-valore.e-vuoto::before,
table.elenco-marchi .campo-valore.e-vuoto:focus-visible::before { content: '+'; font-size: var(--t5); font-weight: 500; color: var(--testo-3); }
/* Nessun colore al passaggio: la cella resta com'e', basta il puntatore. */
table.elenco-marchi .campo-valore:hover { background: none; box-shadow: none; }
table.elenco-marchi .campo-valore:focus-visible { background: none; box-shadow: inset 0 0 0 1px var(--bordo-forte); outline: none; }
table.elenco-marchi .campo-valore.e-vuoto:hover::before { color: var(--testo); }
/* In modifica la cella e' la tendina o il campo: niente "+" accanto (la
   spostava), e il corpo del testo torna normale. */
table.elenco-marchi tr .campo-valore.e-vuoto.in-modifica,
table.elenco-marchi .campo-valore.in-modifica { font-size: var(--t4); color: var(--testo); }
table.elenco-marchi tr:hover .campo-valore.e-vuoto.in-modifica::before,
table.elenco-marchi tr .campo-valore.e-vuoto.in-modifica::before { content: none; }
/* Il sito in modifica: niente sfumatura ne' limite, il campo prende la colonna. */
table.elenco-marchi .con-apri > .campo-valore.in-modifica { overflow: visible; max-width: none; flex: 1 1 auto;
  -webkit-mask-image: none; mask-image: none; }
table.elenco-marchi .con-apri > .campo-valore.in-modifica input { width: 100%; min-width: 108px; }
/* Margini interni piu' stretti: nessuna colonna va a capo o si taglia, e la
   tabella deve stare nello schermo senza scorrere di lato. */
table.elenco-marchi th, table.elenco-marchi td { padding-left: var(--s2); padding-right: var(--s2); }
table.elenco-marchi th:first-child, table.elenco-marchi td:first-child { padding-left: var(--s5); }
table.elenco-marchi th:last-child, table.elenco-marchi td:last-child { padding-right: var(--s5); }
.con-apri { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.con-apri > .campo-valore { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apri { flex: 0 0 auto; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px;
        color: var(--testo-3); transition: background .15s, color .15s; }
.apri:hover { background: var(--blu-tenue); color: var(--blu); }

/* =============================================================================
   MAIL A PIU' CONTATTI (0072, 04/10/2026): la selezione nell'elenco Contatti
   con la barra in basso, Nuova mail, il dettaglio di un invio, i modelli e
   il loro editor. Solo token; i componenti comuni (riquadro, elenco, segno,
   gettone, pillola, testata-cifre) si riusano com'erano.
   ============================================================================= */


/* Le testate delle pagine mail: titolo e comandi sulla stessa riga. */
.mail-testata-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-left: auto; }
.mail-nuova-bottone { margin-left: auto; }
.mail-testata-azioni form { margin: 0; }
.elenco-testata .mail-oggetto { display: flex; align-items: center; gap: var(--s3); min-width: 0; font-size: var(--t7); }
/* Una comunicazione partita (14/10/2026): il titolo della campagna e accanto il suo stato. */
.elenco-testata .mail-titolo { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); min-width: 0; font-size: var(--t7); }
.elenco-testata .mail-titolo > .segno { font-size: var(--t3); font-weight: 600; letter-spacing: 0; }
/* L'indirizzo in colonna, e l'anteprima in finestra: alta quanto lo schermo, la mail scorre dentro. */
table.mail-invii td.mail-data { color: var(--testo-2); font-size: var(--t3); white-space: nowrap; }
table.mail-persone td.mail-indirizzo { color: var(--testo-2); font-size: var(--t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
dialog.mail-anteprima-finestra { width: min(760px, calc(100vw - 32px)); }
dialog.mail-anteprima-finestra .mail-iframe { height: min(68vh, 760px) !important; }
.mail-salvato { font-size: var(--t3); color: rgba(255, 255, 255, .6); }
.mail-salvato.fatto { color: var(--verde-notte); }
.mail-salvato.errore { color: var(--rosso-notte); }

.mail-passo-numero { flex: 0 0 26px; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
                     background: var(--blu-tenue); color: var(--blu-scuro); font-size: var(--t3); font-weight: 700; }

/* NUOVA COMUNICAZIONE (0074): i tre passi a sinistra, l'anteprima ferma a destra. */
/* Una colonna sola, centrata: A chi, il foglio (che ha dentro anche l'anteprima), Invia. */
.mail-scrivi { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); width: 100%; max-width: 880px; box-sizing: border-box; margin: 0 auto var(--s8); padding: 0 var(--s8); }
.mail-scrivi .riquadro { margin: 0; }
/* Chi non puo' modificare il modello vede solo l'anteprima. */
.mail-scrivi.sola-lettura { max-width: 760px; }
.mail-corpo { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }

/* 1. A CHI: la ricerca con i risultati in tendina, poi chi la riceve. */
/* La tendina dei risultati esce dal riquadro e sta sopra quelli sotto. */
.mail-scrivi .mail-achi { position: relative; z-index: 5; overflow: visible; animation: none; }
.mail-cerca { position: relative; }
.mail-cerca-campo { max-width: none; }
.mail-cerca-campo .campo { width: 100%; height: 46px; padding-left: 42px; font-size: var(--t4); }
.mail-cerca-campo svg { position: absolute; left: 15px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--testo-3); pointer-events: none; }
.mail-risultati { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; max-height: 420px; overflow-y: auto;
                  padding: var(--s2); border-radius: var(--raggio-g); background: var(--superficie);
                  box-shadow: var(--ombra-alta), 0 0 0 1px var(--bordo-tenue); }
.mail-risultati-titolo { margin: var(--s2) var(--s2) 4px; color: var(--testo-3); font-size: var(--t2); font-weight: 600; }
.mail-risultati-vuoto { margin: 0; padding: var(--s3); color: var(--testo-3); font-size: var(--t3); }
.mail-voce { display: flex; align-items: center; gap: var(--s3); width: 100%; padding: 8px var(--s2); border: 0; border-radius: var(--raggio);
             background: none; color: var(--testo); font: inherit; text-align: left; cursor: pointer; }
.mail-voce:hover, .mail-voce:focus-visible { background: var(--riga-sfiora); outline: none; }
.mail-voce-faccia { flex: 0 0 34px; display: grid; place-items: center; width: 34px; height: 34px; overflow: hidden; border-radius: 50%;
                    background: var(--sfiora-scuro); color: var(--testo-2); font-size: var(--t2); font-weight: 700; }
.mail-voce-faccia img { width: 100%; height: 100%; object-fit: contain; background: #FFF; }
.mail-voce-faccia.persona { background: var(--blu-tenue); color: var(--blu-scuro); }
.mail-voce-testi { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mail-voce-testi b { font-size: var(--t4); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-voce-testi small { color: var(--testo-3); font-size: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-voce-azione { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; background: var(--blu-tenue); color: var(--blu-scuro);
                    font-size: var(--t3); font-weight: 600; white-space: nowrap; }
.mail-voce:hover .mail-voce-azione { background: var(--blu); color: #FFF; }
.mail-chi-testa { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.mail-chi-conto { margin: 0; font-size: var(--t4); color: var(--testo-2); }
.mail-chi-conto b { color: var(--testo); font-size: var(--t5); }
.mail-chi-svuota { padding: 0; border: 0; background: none; color: var(--testo-3); font: inherit; font-size: var(--t3); cursor: pointer; }
.mail-chi-svuota:hover { color: var(--rosso); }
.mail-gruppi { max-height: 360px; overflow-y: auto; border-radius: var(--raggio-g); box-shadow: 0 0 0 1px var(--bordo-tenue); }
.mail-gruppo + .mail-gruppo { border-top: 1px solid var(--bordo-tenue); }
.mail-gruppo summary { display: flex; align-items: center; gap: var(--s2); padding: 10px var(--s3); cursor: pointer; list-style: none; }
.mail-gruppo summary::-webkit-details-marker { display: none; }
.mail-gruppo summary::before { content: ""; width: 7px; height: 7px; margin-right: 2px; border-right: 2px solid var(--testo-3); border-bottom: 2px solid var(--testo-3);
                              transform: rotate(-45deg); }
.mail-gruppo[open] summary::before { transform: rotate(45deg); }
.mail-gruppo summary:hover { background: var(--sfiora); }
.mail-gruppo-nome { flex: 1; min-width: 0; font-weight: 600; font-size: var(--t4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-gruppo-conta { color: var(--testo-3); font-size: var(--t3); white-space: nowrap; }
.mail-gruppo-togli, .mail-persona-togli { width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; color: var(--testo-3);
                                          font-size: 17px; line-height: 1; cursor: pointer; }
.mail-gruppo-togli:hover, .mail-persona-togli:hover { background: var(--rosso-tenue); color: var(--rosso); }
.mail-gruppo-persone { margin: 0; padding: 0 0 var(--s2); list-style: none; }
.mail-gruppo-persone li { display: flex; align-items: center; gap: var(--s2); padding: 4px var(--s3) 4px var(--s8); }
.mail-gruppo-persone li:hover { background: var(--sfiora); }
.mail-persona { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.mail-persona b { font-size: var(--t4); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-persona small { color: var(--testo-3); font-size: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-persona-togli { opacity: 0; }
.mail-gruppo-persone li:hover .mail-persona-togli, .mail-persona-togli:focus-visible { opacity: 1; }
@media (hover: none) { .mail-persona-togli { opacity: 1; } }
.mail-fuori { margin: var(--s3) 0 0; padding: var(--s2) var(--s3); border-radius: var(--raggio); background: var(--ambra-tenue); }
.mail-fuori summary { cursor: pointer; color: var(--ambra); font-size: var(--t3); font-weight: 600; }
.mail-fuori ul { margin: var(--s2) 0 0; padding: 0; list-style: none; }
.mail-fuori li { display: flex; justify-content: space-between; gap: var(--s3); padding: 3px 0; font-size: var(--t3); }
.mail-fuori li small { color: var(--testo-2); text-align: right; }

/* 2. IL MESSAGGIO */
.mail-parti { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.mail-parti > span { color: var(--testo-3); font-size: var(--t3); }
.mail-parti .pillola { height: 32px; padding: 0 var(--s3); font-size: var(--t3); }
.mail-torna { padding: 0; border: 0; background: none; color: var(--blu); font: inherit; font-size: var(--t3); cursor: pointer; }
.mail-torna:hover { text-decoration: underline; }
.mail-salva-modello { margin: 0; }
.mail-completa { margin: 0; padding: var(--s2) var(--s3); border-radius: var(--raggio); background: var(--ambra-tenue);
                 color: var(--ambra); font-size: var(--t3); font-weight: 500; }

/* I TRE PASSI, ognuno col suo colore: una sfumatura che parte dall'angolo
   del numero e il numero pieno. Viola chi, verde acqua cosa, corallo invia:
   i tre colori di sezione della scheda. Niente bordini (docs/DESIGN.md). */
.mail-passo.passo-1 { --passo: var(--sez-chi); }
.mail-passo.passo-2 { --passo: var(--sez-come); }
.mail-passo.passo-3 { --passo: var(--sez-rel); }
.mail-passo[class*="passo-"] {
  background:
    radial-gradient(100% 180px at 0% 0%, color-mix(in srgb, var(--passo) 26%, transparent) 0%, color-mix(in srgb, var(--passo) 8%, transparent) 50%, transparent 100%),
    var(--superficie); }
.mail-passo[class*="passo-"] .mail-passo-titolo { font-size: var(--t6); letter-spacing: -.02em; }
.mail-passo[class*="passo-"] .mail-passo-numero {
  flex-basis: 32px; width: 32px; height: 32px; font-size: var(--t4); color: #FFF;
  background: linear-gradient(160deg, color-mix(in srgb, var(--passo) 70%, #FFF), var(--passo));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--passo) 35%, transparent); }
/* La griglia dei riquadri delle comunicazioni: i pezzi in colonna a --s4,
   nessun margine sui figli (si sommerebbero o mancherebbero). */
.mail-passo, .mail-link { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s6); }
.mail-passo-titolo { display: flex; align-items: center; gap: var(--s3); margin: 0; font-size: var(--t5); font-weight: 600; }
.mail-passo-titolo small, .mail-campo small { color: var(--testo-3); font-size: var(--t3); font-weight: 400; }
.mail-campo { display: flex; flex-direction: column; gap: var(--s2); margin: 0; }
.mail-campo > span { font-size: var(--t3); font-weight: 500; color: var(--testo-2); }
.mail-campo .campo { width: 100%; height: 40px; font-size: var(--t4); }
.mail-quando { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.mail-quando .pillola { height: 34px; padding: 0 var(--s4); font-size: var(--t4); }
.mail-quando-data { width: auto; display: none; }
.mail-quando-data.vista { display: inline-block; }
.mail-manda { display: flex; justify-content: flex-end; gap: var(--s3); }
.mail-manda .bottone { height: 44px; padding: 0 var(--s5); font-size: var(--t4); }

/* L'ANTEPRIMA: la busta (da, oggetto) e la mail com'e' davvero. */
.mail-busta { border: 1px solid var(--bordo); border-radius: var(--raggio-g); overflow: hidden; background: var(--superficie); }
.mail-busta-riga { display: flex; gap: var(--s3); margin: 0; padding: var(--s2) var(--s4); border-bottom: 1px solid var(--bordo-tenue);
                   font-size: var(--t3); color: var(--testo-2); }
.mail-busta-riga > span { flex: 0 0 56px; color: var(--testo-3); }
.mail-busta-riga b { color: var(--testo); font-weight: 600; }
.mail-iframe { display: block; width: 100%; height: 420px; border: 0; background: #FFF; }
.mail-schermo { background: var(--sfiora); }

/* IL DETTAGLIO DI UN INVIO: il percorso a quattro pallini e la frase. */
.mail-percorso { display: inline-flex; align-items: center; }
.mail-tappa { position: relative; width: 12px; height: 12px; margin-right: 14px; border-radius: 50%;
              background: var(--sfiora-scuro); box-shadow: inset 0 0 0 1px var(--bordo-forte); }
.mail-tappa:not(:last-child)::after { content: ""; position: absolute; left: 12px; top: 5px; width: 14px; height: 2px; background: var(--bordo); }
.mail-tappa.fatta { background: var(--verde-vivo); box-shadow: none; }
.mail-tappa.fatta:not(:last-child)::after { background: var(--verde-bordo); }
.mail-frase { font-size: var(--t4); color: var(--testo-2); }
.mail-frase-si { color: var(--verde); font-weight: 600; }
.mail-frase-caldo { color: var(--blu-scuro); font-weight: 600; }
.mail-frase-attesa { color: var(--testo-3); }
.mail-frase-no { color: var(--rosso); }
.mail-risposte { color: var(--verde); }
/* L'AVANZAMENTO di una campagna (Inviate): barra e una frase. Blu che
   scorre mentre parte, verde a fine giro, tratteggiata se programmata,
   grigia se fermata. */
.mail-avanza { display: flex; flex-direction: column; gap: var(--s2); }
.mail-avanza-barra { position: relative; display: block; height: 8px; overflow: hidden; border-radius: 999px; background: var(--sfiora-scuro); }
.mail-avanza-barra i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--verde-vivo); }
.mail-avanza.in-corso .mail-avanza-barra i { background: linear-gradient(90deg, var(--blu), var(--notte-accento), var(--blu)); background-size: 200% 100%; }
.mail-avanza.programmata .mail-avanza-barra { background: repeating-linear-gradient(45deg, var(--sfiora-scuro) 0 6px, var(--superficie) 6px 12px); }
.mail-avanza.fermata .mail-avanza-barra i { background: var(--testo-4); }
.mail-avanza-testo { font-size: var(--t3); color: var(--testo-2); }
/* In pausa (Gmail ha chiesto di rallentare) o ferma dal freno: ambra, ferma. */
.mail-avanza.in-pausa .mail-avanza-barra i, .mail-avanza.ferma .mail-avanza-barra i { background: var(--ambra); }
/* LA PAGINA DI UN INVIO (0105): a che punto siamo, grande, in cima. */
.mail-avanzamento { padding: var(--s5) var(--s6); margin-bottom: var(--s4); }
.mail-avanzamento-titolo { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s3); font-size: var(--t6); color: var(--testo); }
.mail-avanzamento-barra { height: 12px; }
.mail-avanzamento-dice { margin: var(--s3) 0 var(--s1); font-size: var(--t4); color: var(--testo-2); }
.mail-avanzamento .aiuto { margin: 0; }
.mail-avanza.in-corso .mail-avanza-testo { color: var(--blu-scuro); }
.mail-quota { color: var(--testo-3); font-size: var(--t3); }
.mail-sotto { display: block; margin-top: 2px; color: var(--testo-3); font-size: var(--t2); font-weight: 400;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* La variabile dentro un oggetto: un gettoncino, non le graffe. */
.mail-var { display: inline-block; padding: 0 6px; border-radius: 6px; background: var(--blu-tenue); color: var(--blu-scuro);
            font-size: .85em; font-weight: 600; line-height: 1.5; vertical-align: .05em; }
.elenco-testata .mail-var { background: rgba(255, 255, 255, .14); color: #FFF; }
.mail-link .articolo-nome a { overflow-wrap: anywhere; }
/* Il percorso di una persona (la finestra al clic sulla riga). */
tr.mail-riga-persona { cursor: pointer; }
.mail-storia-chi { margin: 0 0 var(--s4); color: var(--testo-3); font-size: var(--t3); }
.mail-storia { display: flex; flex-direction: column; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.mail-storia li { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); padding-left: var(--s6); font-size: var(--t4); }
.mail-storia li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 10px; height: 10px; border-radius: 50%;
                          background: var(--sfiora-scuro); box-shadow: inset 0 0 0 1px var(--bordo-forte); }
.mail-storia li.fatta::before { background: var(--verde-vivo); box-shadow: none; }
.mail-storia li.no::before { background: var(--rosso); box-shadow: none; }
.mail-storia li span { color: var(--testo-3); font-size: var(--t3); }
.mail-storia-link { flex-basis: 100%; overflow-wrap: anywhere; font-size: var(--t3); }
.mail-gira { display: inline-block; width: 9px; height: 9px; margin-left: 6px; border-radius: 50%;
             border: 2px solid currentColor; border-top-color: transparent; vertical-align: -1px; }

/* I MODELLI: ogni carta mostra la mail vera in miniatura, appoggiata su un
   fondo che sfuma dal grigio al celeste; sotto il nome, di chi e' (pastiglia
   colorata), quante volte e' servito, Modifica e Usa. La prima carta crea. */
.mail-modelli { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s5); margin: 0 var(--pagina) var(--s8); }
.mail-modello-carta { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s3) var(--s3) var(--s4); border-radius: var(--raggio-g);
                      background: var(--superficie); box-shadow: var(--ombra-media), 0 0 0 1px var(--bordo-tenue); }
.mail-miniatura { position: relative; display: block; height: 230px; overflow: hidden; padding: var(--s4) var(--s4) 0; border-radius: var(--raggio);
                  background: linear-gradient(160deg, var(--sfiora), #E6EDF8); }
.mail-miniatura iframe { display: block; width: 200%; height: 520px; border: 0; border-radius: 8px 8px 0 0; background: #FFF;
                         box-shadow: 0 6px 18px rgba(16, 24, 40, .10), 0 0 0 1px rgba(16, 24, 40, .05);
                         transform: scale(.5); transform-origin: 0 0; pointer-events: none; }
.mail-miniatura::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px;
                         background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--superficie)); pointer-events: none; }
.mail-modello-info { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; padding: 0 var(--s1); }
.mail-modello-nome { font-size: var(--t5); font-weight: 600; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-modello-uso { display: flex; align-items: center; gap: var(--s2); color: var(--testo-3); font-size: var(--t3); }
.mail-modello-azioni { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); padding: 0 var(--s1); }
.mail-modello-azioni .bottone { height: 36px; }
.mail-scheda-conta { margin-left: 4px; opacity: .65; font-variant-numeric: tabular-nums; }
/* La carta che crea: un foglio vuoto col "+", alta quanto le altre. */
.mail-modello-nuovo { padding: 0; background: none; box-shadow: none; }
.mail-modello-nuovo-modulo { display: flex; flex: 1; margin: 0; }
.mail-modello-nuovo-modulo a { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); min-height: 340px;
                                    border: 1.5px dashed var(--bordo-forte); border-radius: var(--raggio-g); background: color-mix(in srgb, var(--superficie) 60%, transparent);
                                    color: var(--testo-2); font: inherit; cursor: pointer; text-decoration: none; padding: var(--s5); text-align: center; }
.mail-modello-nuovo-modulo a:hover { border-color: var(--blu); background: var(--blu-tenue); color: var(--blu-scuro); }
.mail-modello-nuovo-piu { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
                          background: linear-gradient(160deg, var(--notte-accento), var(--blu)); color: #FFF; box-shadow: 0 6px 16px rgba(37, 99, 235, .3); }
.mail-modello-nuovo-modulo b { font-size: var(--t5); color: var(--testo); }
.mail-modello-nuovo-modulo small { color: var(--testo-3); font-size: var(--t3); }
.mail-modelli-vuoto { margin: 0 var(--pagina); color: var(--testo-3); }

/* IL FOGLIO DELLA MAIL: un unico foglio bianco, come la mail vera. In cima la
   barra degli strumenti (testo e variabili), poi l'oggetto, poi le sezioni
   attaccate una sotto l'altra e scritte direttamente com'e' la mail. Una
   sezione si accende appena passandoci sopra (fondo grigio chiaro, i suoi
   comandi in alto a destra); fra due sezioni un "+" quasi invisibile. */
.mail-tela { display: flex; flex-direction: column; overflow: clip; border-radius: var(--raggio-g); background: var(--superficie);
             box-shadow: var(--ombra-media), 0 0 0 1px var(--bordo-tenue); }
.mail-strumenti { position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2);
                  padding: var(--s2) var(--s3); border-bottom: 1px solid var(--bordo-tenue); background: var(--sfiora); }
.mail-strumenti-gruppo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
.mail-strumenti-gruppo + .mail-strumenti-gruppo { padding-left: var(--s2); box-shadow: inset 1px 0 0 var(--bordo); }
.mail-strumenti button { display: inline-flex; align-items: center; gap: var(--s1); height: 28px; min-width: 28px; justify-content: center; padding: 0 6px; border: 0; border-radius: 6px;
                         background: none; color: var(--testo-2); font: inherit; font-size: var(--t3); cursor: pointer; }
.mail-strumenti button:hover { background: var(--superficie); color: var(--testo); box-shadow: 0 0 0 1px var(--bordo); }
.mail-strumenti .mail-variabile { color: var(--blu-scuro); font-weight: 500; }
.mail-strumenti .mail-variabile:hover { background: var(--blu-tenue); box-shadow: none; }
.mail-tela-oggetto { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s5); border-bottom: 1px solid var(--bordo-tenue); }
.mail-tela-oggetto > span { flex: 0 0 auto; color: var(--testo-3); font-size: var(--t3); }
.mail-tela-oggetto input { flex: 1; min-width: 0; height: 34px; border: 0; background: none; color: var(--testo); font: inherit; font-size: var(--t5); font-weight: 600; outline: none; }
.mail-tela-oggetto input::placeholder { color: var(--testo-4); font-weight: 400; }

.mail-blocchi { display: flex; flex-direction: column; padding: var(--s4) var(--s3) var(--s2); }
.mail-blocchi-vuoto { margin: 0; padding: var(--s6); color: var(--testo-3); text-align: center; }
.mail-blocco { position: relative; padding: var(--s2); border-radius: var(--raggio); }
.mail-blocco:hover, .mail-blocco:focus-within { background: var(--sfiora); }
.mail-blocco-comandi { position: absolute; top: -12px; right: var(--s2); z-index: 3; display: flex; align-items: center; gap: 2px; padding: 2px;
                       border-radius: var(--raggio); background: var(--superficie); box-shadow: var(--ombra-media), 0 0 0 1px var(--bordo);
                       opacity: 0; pointer-events: none; }
.mail-blocco:hover .mail-blocco-comandi, .mail-blocco:focus-within .mail-blocco-comandi { opacity: 1; pointer-events: auto; }
@media (hover: none) { .mail-blocco-comandi { opacity: 1; pointer-events: auto; } }
.mail-blocco-maniglia { display: grid; place-items: center; width: 22px; height: 24px; color: var(--testo-4); cursor: grab; user-select: none; }
.mail-blocco-comandi button { width: 26px; height: 24px; border: 0; border-radius: 6px; background: none; color: var(--testo-3); cursor: pointer; font-size: var(--t3); }
.mail-blocco-comandi button:hover:not(:disabled) { background: var(--sfiora-scuro); color: var(--testo); }
.mail-blocco-comandi button:disabled { opacity: .3; cursor: default; }
.mail-blocco-comandi .mail-blocco-togli:hover { background: var(--rosso-tenue); color: var(--rosso); }
.mail-blocco.in-viaggio { opacity: .4; }
.mail-blocco.arrivo-sopra { box-shadow: 0 -2px 0 var(--blu); }
.mail-blocco.arrivo-sotto { box-shadow: 0 2px 0 var(--blu); }
/* Le sezioni com'e' la mail: stesse misure dell'HTML che parte (MailRenderer). */
.mail-tela-titolo { width: 100%; border: 0; background: none; color: #111827; font: inherit; font-size: 20px; font-weight: 700; line-height: 1.3; outline: none; }
.mail-tela-testo { min-height: 1.6em; color: #1f2937; font-size: 15px; line-height: 1.55; outline: none; overflow-wrap: anywhere; cursor: text; }
.mail-tela-testo:empty::before { content: attr(data-segnaposto); color: var(--testo-4); }
.mail-tela-testo p { margin: 0 0 12px; }
.mail-tela-testo p:last-child { margin-bottom: 0; }
.mail-tela-testo a { color: var(--blu-scuro); text-decoration: underline; }
.mail-tela-titolo::placeholder, .mail-tela-url input::placeholder { color: var(--testo-4); font-weight: 400; }
/* Il "bottone" e' un link sulla sua riga, com'e' nella mail (12/10/2026: "scritta a mano"). */
.mail-tela-bottone { display: block; width: auto; max-width: 100%; min-width: 180px; height: 34px; padding: 0; border: 0;
                     background: none; color: var(--blu-scuro); font: inherit; font-size: 15px; text-decoration: underline; outline: none; }
.mail-tela-bottone::placeholder { color: var(--testo-4); text-decoration: none; }
.mail-tela-bottone-riga { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.mail-tela-url { display: flex; flex: 1 1 200px; align-items: center; gap: var(--s2); min-width: 0; height: 36px; padding: 0 var(--s3);
                 border-radius: var(--raggio); background: var(--sfiora); color: var(--testo-3); font-size: var(--t3); }
.mail-tela-url-segno { flex: 0 0 auto; }
.mail-tela-url input { flex: 1; min-width: 0; border: 0; background: none; color: var(--testo-2); font: inherit; outline: none; }
/* Scrivi | Anteprima, in fondo a destra della barra. */
.mail-modo { display: flex; gap: 2px; padding: 2px; border-radius: var(--raggio); background: var(--sfiora-scuro); }
.mail-strumenti .mail-modo button { height: 26px; padding: 0 var(--s3); color: var(--testo-3); }
.mail-strumenti .mail-modo button.attivo { background: var(--superficie); color: var(--testo); box-shadow: var(--ombra); }
/* LA BARRETTA (12/10/2026): galleggia attaccata al campo in cui si scrive,
   sopra la sezione (sotto l'oggetto, che e' in cima al foglio). */
.mail-barretta { position: absolute; top: auto; left: var(--s2); bottom: calc(100% - 4px); z-index: 6; flex-wrap: wrap; max-width: calc(100% - 2 * var(--s2));
                 padding: 3px var(--s2); border: 0; border-radius: var(--raggio); background: var(--superficie);
                 box-shadow: var(--ombra-alta), 0 0 0 1px var(--bordo); animation: barretta .12s var(--curva); }
.mail-barretta[hidden], .mail-barretta [hidden] { display: none; }
.mail-barretta.sotto { bottom: auto; top: calc(100% - 4px); left: var(--s5); }
.mail-tela-oggetto { position: relative; }
@keyframes barretta { from { opacity: 0; transform: translateY(3px); } }
/* Scrivi | Anteprima, sulla riga del titolo del riquadro. */
.mail-passo-testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); }
.mail-passo-testa .mail-modo button { display: inline-flex; align-items: center; gap: var(--s1); height: 28px; padding: 0 var(--s3); border: 0; border-radius: 6px;
                                       background: none; color: var(--testo-3); font: inherit; font-size: var(--t3); cursor: pointer; }
.mail-passo-testa .mail-modo button.attivo { background: var(--superficie); color: var(--testo); box-shadow: var(--ombra); }
/* Da dove parte: la campagna, o scritta da zero. */
.mail-da { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0; color: var(--testo-3); font-size: var(--t3); }
.mail-da span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.mail-da[hidden], .mail-da span[hidden] { display: none; }
.mail-da b { color: var(--testo); }
.mail-da a { color: var(--blu); }
.mail-tela-anteprima { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); }
.mail-tela-anteprima[hidden] { display: none; }
.mail-tela-foto { position: relative; }
/* La foto nelle sue proporzioni, intera, come arriva nella mail (02/11/2026: una verticale veniva tagliata in alto); una
   verticale non piu' alta di quanto e' larga la mail (480 px, MailRenderer::imageWidth), centrata. */
.mail-tela-foto img { display: block; width: auto; max-width: 100%; max-height: 480px; height: auto; margin: 0 auto; border-radius: 6px; }
.mail-tela-foto.carica { opacity: .6; }
.mail-tela-cambia { position: absolute; right: var(--s3); bottom: var(--s3); padding: 6px 12px; border: 0; border-radius: 999px;
                    background: rgba(14, 27, 44, .78); color: #FFF; font: inherit; font-size: var(--t3); font-weight: 600; cursor: pointer; opacity: 0; }
.mail-blocco:hover .mail-tela-cambia, .mail-tela-cambia:focus-visible { opacity: 1; }
@media (hover: none) { .mail-tela-cambia { opacity: 1; } }
.mail-tela-foto-vuota { display: block; width: 100%; padding: var(--s6); border: 1.5px dashed var(--bordo-forte); border-radius: 6px;
                        background: var(--sfiora); color: var(--blu); font: inherit; font-weight: 600; cursor: pointer; }
.mail-tela-link { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); color: var(--testo-3); font-size: var(--t2); white-space: nowrap; }
.mail-tela-link .campo { flex: 1; min-width: 0; height: 30px; font-size: var(--t2); }
/* Col campo del link sotto, "Cambia immagine" resta sulla foto. */
.mail-tela-foto:has(.mail-tela-link) .mail-tela-cambia { bottom: calc(var(--s3) + 38px); }

/* Fra due sezioni: una riga sottile col "+" in mezzo, piu' marcata al passaggio. */
.mail-tra { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 14px; justify-content: center; }
.mail-tra::before { content: ""; position: absolute; left: var(--s3); right: var(--s3); top: 50%; height: 1px; background: var(--bordo); opacity: 0; transition: opacity .15s; }
.mail-tra:hover::before, .mail-tra.aperto::before { opacity: 1; }
.mail-piu { position: relative; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
            background: var(--superficie); box-shadow: 0 0 0 1px var(--bordo-forte); color: var(--testo-3); font: inherit; font-size: 15px; font-weight: 600;
            line-height: 1; cursor: pointer; opacity: .35; transition: opacity .15s; }
.mail-tra:hover .mail-piu, .mail-tra.aperto .mail-piu, .mail-piu:focus-visible { opacity: 1; }
.mail-piu:hover, .mail-tra.aperto .mail-piu { background: var(--blu); box-shadow: none; color: #FFF; }
.mail-tra-menu { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); padding: var(--s2) 0; }
.mail-tra-menu[hidden] { display: none; }

/* In fondo al foglio: aggiungi un'altra sezione. */
.mail-aggiungi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0 var(--s3) var(--s3); padding: var(--s3);
                 border: 1.5px dashed var(--bordo); border-radius: var(--raggio); }
.mail-aggiungi-titolo { display: inline-flex; align-items: center; gap: var(--s1); margin-right: var(--s1); color: var(--testo-3); font-size: var(--t3); }
/* La finestra dell'immagine: la zona grande dove si trascina, poi la foto. */
dialog.mail-finestra-immagine .scheda-corpo { display: flex; flex-direction: column; gap: var(--s4); }
.mail-scegli { position: relative; display: grid; place-items: center; min-height: 200px; padding: var(--s4); overflow: hidden;
               border: 1.5px dashed var(--bordo-forte); border-radius: var(--raggio-g); background: var(--sfiora); cursor: pointer; text-align: center; }
.mail-scegli:hover, .mail-scegli.sopra { border-color: var(--blu); background: var(--blu-tenue); }
.mail-scegli input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mail-scegli-vuota { display: flex; flex-direction: column; gap: var(--s1); color: var(--testo-2); }
.mail-scegli-vuota b { color: var(--blu); font-size: var(--t5); }
.mail-scegli-vuota small { color: var(--testo-3); font-size: var(--t3); }
.mail-scegli img, .mail-scegli-cambia { display: none; }
.mail-scegli.piena { border-style: solid; border-color: var(--bordo); background: var(--superficie); }
.mail-scegli.piena .mail-scegli-vuota { display: none; }
.mail-scegli.piena img { display: block; max-width: 100%; max-height: 300px; border-radius: var(--raggio); }
.mail-scegli.piena .mail-scegli-cambia { display: block; position: absolute; right: var(--s3); bottom: var(--s3); padding: 4px 10px;
                                         border-radius: 999px; background: rgba(14, 27, 44, .72); color: #FFF; font-size: var(--t2); font-weight: 600; }
.mail-scegli.carica { opacity: .6; pointer-events: none; }
.mail-scegli.carica .mail-scegli-vuota b::after { content: "\2026"; }
.mail-aggiungi-voce { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--s3);
                      border: 1px solid var(--bordo); border-radius: 999px; background: var(--superficie);
                      color: var(--testo-2); font: inherit; font-size: var(--t3); font-weight: 500; cursor: pointer; }
.mail-aggiungi-voce:hover:not(:disabled) { border-color: var(--blu); color: var(--blu); background: var(--blu-tenue); }
.mail-aggiungi-voce:disabled { opacity: .45; cursor: not-allowed; }
.mail-piede-modello { display: flex; justify-content: flex-start; }
.mail-piede-modello form { margin: 0; }

/* La conferma che non cancella (data-conferma-si): niente allarme rosso. */
dialog.scheda.conferma.conferma-sicura .conferma-segno { background: var(--blu-tenue); }
dialog.scheda.conferma.conferma-sicura .conferma-segno::before { content: "?"; color: var(--blu); }

/* =============================================================================
   Schermi medi: la scheda va in colonna prima che la colonna delle proprieta'
   schiacci quella delle relazioni.
   ============================================================================= */
@media (max-width: 1400px) {
  /* Sotto i 1400 lo schedario passa a due colonne: a tre, ognuna scenderebbe
     sotto i 300px e le etichette andrebbero a capo. */
  .schedario { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .persona { grid-template-columns: minmax(0, 1fr); }
  .schedario, .schedario-marchio.con-tessuti { grid-template-columns: minmax(0, 1fr); }
  .schedario-marchio > .sez-chi, .schedario-marchio > .sez-rel,
  .schedario-marchio > .sez-come, .schedario-marchio > .sez-tessuti { grid-column: 1; grid-row: auto; }
  .schedario-marchio > .sez-rel { order: 2; }
  /* Quattro cifre in fila su una colonna sola diventano quattro colonne da
     80px, e "EUR 225.878" ci va a capo in mezzo. Due e due. */
  .cifre { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) 0; }
  /* In prima colonna niente filo a sinistra, ma il rientro resta: e' quello
     che mette il testo sul filo del logo. */
  .cifra:nth-child(odd) { box-shadow: none; }
}

/* =============================================================================
   Telefono e tablet stretto
   ============================================================================= */
@media (max-width: 900px) {
  /* Nuovo contatto (27/10/2026): i due gesti di "c'e' gia'" uno sotto l'altro, larghi quanto la finestra - col pollice. */
  .nc-gia-azioni .bottone { flex: 1 1 100%; justify-content: center; }
  /* Le mail a piu' contatti (0072): una colonna. */
  .mail-scrivi, .mail-scrivi.sola-lettura { margin: 0 0 var(--s6); padding: 0 var(--s4); }
  .mail-modelli { margin: 0 var(--s4) var(--s6); }
  .mail-manda { flex-direction: column-reverse; }
  .mail-testata-azioni { margin-left: 0; }
  table.elenco td .mail-avanza { flex: 1; max-width: 240px; align-items: flex-end; }
  table.elenco td .mail-avanza-barra { align-self: stretch; }
  /* Sulla barra in fondo, l'etichetta corta quando c'e' ("Verifica"). */
  .nav-voce .nav-lunga { display: none; }
  .nav-voce .nav-corta { display: inline; }
  /* Da censire sul telefono: la riga diventa una colonna - chi e', cosa si
     propone, da dove, e i bottoni larghi in fondo. */
  .censire-barra { margin: 0 var(--s4) var(--s3); }
  .censire-tutte { flex-wrap: wrap; }
  .censire-azioni { text-align: left; }
  .censire-griglia { grid-template-columns: 1fr; }
  /* Il piede sul telefono: i due bottoni pieni sopra, il togliere sotto. */
  .censire-dialog .scheda-piede { flex-wrap: wrap; }
  .censire-dialog .scheda-piede .bottone:not(.bottone-togli) { flex: 1; justify-content: center; }
  .censire-dialog [data-censire-scarta] { order: 3; width: 100%; justify-content: center; margin: 0; }

  :root { --etichetta: 108px; }

  /* Niente puo' allargare la pagina oltre lo schermo. Su un telefono lo
     scorrimento orizzontale non e' una funzione, e' un difetto. */
  html, body { max-width: 100%; overflow-x: hidden; }
  .app, .contenuto, .riquadro, .tabella-scorre,
  table.elenco, table.elenco tr, table.elenco td { max-width: 100%; min-width: 0; }

  .app { flex-direction: column; }
  .cerca { min-width: 0; flex-basis: 100%; }

  /* la colonna diventa una barra in fondo: il pollice arriva li', non in cima */
  /* La notifica sta sopra la barra in fondo, non dietro. */
  .notifica { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  /* Con una finestra aperta il piede della finestra sta in basso: li' la
     notifica coprirebbe "Fatto". Sale in cima. */
  body:has(dialog[open]) .notifica { top: calc(16px + env(safe-area-inset-top, 0px)); bottom: auto; }
  .nav { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 10;
         width: auto; height: auto; flex-direction: row; order: 2; }
  /* spazio in fondo, se no l'ultima scheda finisce sotto la barra */
  .contenuto { order: 1; padding-bottom: 64px; }
  .nav-marchio, .nav-utente { display: none; }
  .nav-voci { flex-direction: row; flex: 1; padding: 0; gap: 0; }
  /* Sul telefono la voce sola: dentro la pagina si passa dall'una all'altra. */
  .nav-figli, .nav-freccia { display: none; }
  .nav-gruppo { display: contents; }
  .nav-voce { flex: 1; flex-direction: column; justify-content: center; gap: 3px;
              height: auto; min-height: 58px; padding: var(--s2) var(--s1); border-radius: 0;
              font-size: var(--t1); text-align: center; }
  .nav-voce:hover { background: none; }
  /* Sul telefono la pillola diventa il trattino in cima alla voce. */
  .nav-pillola { inset: 0 22% auto; height: 3px; border-radius: 0 0 3px 3px;
                 background: var(--notte-accento); box-shadow: none; }
  .barra-compatta { left: 0; padding: 0 var(--s4); }

  .elenco-testata { margin: var(--s3) var(--s4); padding: var(--s4); }
  .elenco-testata .titolo { font-size: 24px; }
  /* LA TESTATA COMPATTA DA TELEFONO (05/11/2026, Mattia: "questi box ricerca ingombrano troppo... anche il tasto crea li
     fa cacare"), uguale ovunque: in alto il titolo col conto e a destra il "+" tondo per creare; sotto, in una riga sola,
     la ricerca e l'icona dei filtri. Il tasto Cerca sparisce: si cerca col tasto Vai della tastiera. */
  .elenco-testata:has(> .filtri), .elenco-testata:has(> .elenco-azioni .bottone-primario) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    column-gap: var(--s3); margin: var(--s3) var(--s4); padding: var(--s4); }
  .elenco-testata:is(:has(> .filtri), :has(> .elenco-azioni .bottone-primario)) > .titolo { grid-column: 1; margin: 0; font-size: 24px; }
  .elenco-testata:is(:has(> .filtri), :has(> .elenco-azioni .bottone-primario)) > .elenco-azioni { grid-column: 2; grid-row: 1; margin: 0; gap: var(--s2); }
  .elenco-testata :is(.elenco-azioni, .testata-riga) > .bottone-primario:has(> svg:first-child) { width: 40px; height: 40px; padding: 0; border-radius: 999px;
    justify-content: center; font-size: 0; gap: 0; background: #FFF; color: var(--notte); border: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
  .elenco-testata :is(.elenco-azioni, .testata-riga) > .bottone-primario:has(> svg:first-child) svg { width: 20px; height: 20px; }
  .elenco-testata > .testata-riga { flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: var(--s3); }
  .elenco-testata > .filtri { grid-column: 1 / -1; display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s2); margin: var(--s3) 0 0; }
  .elenco-testata > .filtri .cerca { flex: 1 1 auto; min-width: 0; max-width: none; }
  .elenco-testata > .filtri .campo, .elenco-testata > .filtri .bottone { height: 42px; }
  .elenco-testata > .filtri .cerca kbd { display: none; }
  .elenco-testata > .filtri > button[type="submit"] { display: none; }
  .elenco-testata > .filtri .bottone-filtri { width: 42px; padding: 0; justify-content: center; font-size: 0; gap: 0; position: relative; }
  .elenco-testata > .filtri .bottone-filtri svg { width: 18px; height: 18px; }
  .elenco-testata > .filtri .bottone-filtri .filtri-conta { position: absolute; top: -5px; right: -5px; font-size: 10px; }
  .elenco-testata > .filtri .azzera { flex: 0 0 auto; font-size: var(--t2); }
  /* le tappe delle Trattative: la cifra sotto e il suo scarto su una riga (05/11/2026) */
  .testata-cifra-sotto { white-space: nowrap; font-size: var(--t2); }
  .testata-cifra-sotto .scarto { margin-left: 2px; }
  /* NIENTE ZOOM ENTRANDO IN UN CAMPO (05/11/2026, Mattia: "cambia lo zoom, e' insopportabile"): l'iPhone ingrandisce
     ogni campo scritto sotto i 16 px. Da telefono tutti a 16. */
  input, select, textarea { font-size: 16px !important; }
  /* IL PANNELLO DEI FILTRI: testa con la crocetta ferma in cima, Applica fermo in fondo, il velo dietro (un tocco li'
     chiude, effetti.js). */
  .filtri-apri[open]::before { content: ""; position: fixed; inset: 0; z-index: 19; background: rgba(9, 16, 28, .35); }
  .filtri-pannello { padding-top: 0 !important; padding-bottom: 0 !important; overflow-y: auto; }
  .filtri-testa { position: sticky; top: 0; z-index: 2; align-items: center; justify-content: space-between;
    margin: 0 calc(-1 * var(--s5)) var(--s3); padding: var(--s3) var(--s5); background: var(--superficie);
    border-bottom: 1px solid var(--bordo-tenue); color: var(--testo); font-size: var(--t5); }
  .filtri-chiudi { width: 36px; height: 36px; border: 0; border-radius: 999px; background: var(--sfiora); color: var(--testo-2);
    font-size: 22px; line-height: 1; cursor: pointer; }
  .filtri-piede { position: sticky; bottom: 0; z-index: 2; margin: var(--s3) calc(-1 * var(--s5)) 0; padding: var(--s3) var(--s5);
    background: var(--superficie); border-top: 1px solid var(--bordo-tenue); }
  .titolo { font-size: 24px; }
  .filtri { margin: var(--s3) var(--s4); }
  /* I RIQUADRI RESTANO CARTE BIANCHE anche sul telefono (04/11/2026, Mattia: "questo grigio di sfondo... non si capisce su
     cosa porre l'attenzione, come sono iscritti i box tra loro"). Senza carta solo quelli con un elenco: li' ogni riga e'
     gia' la sua carta (table.elenco a schede). */
  .riquadro { margin: 0 var(--s4) var(--s4); }
  .riquadro:has(table.elenco) { border: none; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
  .pagine { margin: 0 var(--s4) var(--s6); }
  .avviso, .code, .coda-spiega, .coppia, .modulo { margin-left: var(--s4); margin-right: var(--s4); }
  .avviso { flex-direction: column; align-items: flex-start; gap: var(--s2); padding: var(--s3) var(--s4); }

  /* la tabella diventa schede */
  .tabella-scorre { overflow-x: visible; }
  table.elenco, table.elenco tbody, table.elenco tr, table.elenco td { display: block; width: auto; }
  /* il colgroup continua a imporre le larghezze anche a tabella smontata:
     va spento, se no la scheda resta larga 940px e la pagina sfora */
  table.elenco colgroup, table.elenco col { display: none; }
  table.elenco { min-width: 0; width: 100%; table-layout: auto; }
  table.elenco thead { display: none; }
  table.elenco tr { background: var(--superficie); border: 1px solid var(--bordo);
                    border-radius: var(--raggio-g); box-shadow: var(--ombra);
                    padding: var(--s3) var(--s4); margin-bottom: var(--s2); }
  table.elenco tbody tr:hover { background: var(--superficie); }
  table.elenco td, table.elenco td:first-child, table.elenco td:last-child {
    height: auto; padding: 0; border: none; white-space: normal; overflow: hidden;
    display: flex; justify-content: space-between; gap: var(--s3); align-items: center;
    text-align: right; font-size: var(--t3); }
  /* In un contenitore flex i figli non rimpiccioliscono sotto il loro contenuto
     se non glielo si dice: senza min-width:0 il valore lungo esce dalla scheda. */
  table.elenco td > *, table.elenco td a { min-width: 0; overflow-wrap: anywhere; }
  table.elenco td + td { margin-top: 6px; }
  /* l'intestazione della colonna torna come etichetta della riga */
  table.elenco td::before { content: attr(data-etichetta); flex-shrink: 0;
                            font-size: var(--t2); color: var(--testo-3); font-weight: 400; }
  table.elenco td:first-child { display: block; text-align: left; margin-bottom: var(--s2);
                                font-size: var(--t5); font-weight: 600; }
  table.elenco td:first-child::before { display: none; }
  /* La pipeline: le quattro icone in fila dentro la scheda, col nome della
     tappa sopra; sotto, cosa c'e' da fare e quando. */
  table.elenco tr.pipe-riga { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 6px; }
  table.elenco tr.pipe-riga > td { grid-column: 1 / -1; }
  table.elenco tr.pipe-riga > td.pipe-icona-cella { grid-column: auto; display: flex; flex-direction: column; align-items: center;
                                                   gap: 4px; margin-top: var(--s2); text-align: center; }
  table.elenco td.pipe-icona-cella::before { font-size: var(--t1); }
  table.elenco tr.pipe-riga > td.pipe-passo { margin-top: var(--s3); }
  .pipe-legenda-nota { display: none; }
  /* Sul telefono il pannello dei filtri prende la larghezza dello schermo,
     e il gruppo Cobranding non ha fondo diverso (le schede sono gia' separate). */
  .filtri-pannello { position: fixed; top: 72px; left: var(--s4); right: var(--s4); width: auto;
                     max-height: calc(100vh - 160px); }
  .filtri-pannello.filtri-a-sezioni { width: auto; }
  .filtri-sezioni { grid-auto-flow: row; grid-template-columns: 1fr; }
  .filtri-pannello.filtri-a-sezioni:has(.filtri-sezione:nth-child(2):last-child) { width: auto; }
  .filtri-sezione + .filtri-sezione { padding: var(--s4) 0 0; margin-top: var(--s3); box-shadow: inset 0 1px 0 var(--bordo-tenue); }

  /* Una scheda non elenca quello che non c'e': le righe col solo trattino
     spariscono, restano i dati veri. */
  table.elenco td:has(> .cella-vuota:only-child) { display: none; }
  /* Da censire: le pastiglie di "Cosa sappiamo" sono il contenuto della
     scheda, non un valore: tutta la larghezza, allineate al nome. */
  .censire-riga td:has(> .censire-sappiamo) { display: block; margin: 0 0 var(--s3); }
  .censire-riga td:has(> .censire-sappiamo)::before { display: none; }
  .censire-riga .censire-sappiamo { justify-content: flex-start; }
  .censire-riga .censire-fonte { align-items: flex-end; }

  .code { overflow-x: auto; scrollbar-width: none; }
  .coppia-testa { flex-direction: column; align-items: flex-start; gap: 2px; }
  .coppia-corpo { grid-template-columns: 1fr; }
  .meta-coppia + .meta-coppia { border-left: none; border-top: 1px solid var(--bordo-tenue); }
  .coppia-piede { flex-direction: column; align-items: stretch; gap: var(--s3); }

  .persona-testata { margin: var(--s4); padding: var(--s5) var(--s4); border-radius: 12px; }
  .persona-nome { font-size: 28px; }
  .avatar.grande { width: 48px; height: 48px; font-size: var(--t5); }
  .persona { padding: var(--s4) var(--s4) var(--s8); gap: var(--s3); }
  .colonna { gap: var(--s3); }
  /* Le colonne restano colonne: a 88px, con le etichette sopra e sotto, alle
     barre restavano venti pixel e cinque anni sembravano tutti uguali. */
  .storia { height: 150px; gap: var(--s2); }
  .storia-barra, .storia-sopra { max-width: 42px; }
  /* La torta si stringe, la legenda respira: a 138px i nomi di famiglia
     finivano tutti in puntini. */
  .torta-riga { grid-template-columns: 112px minmax(0, 1fr); gap: var(--s4); }
  .torta { width: 112px; height: 112px; }
  .torta-buco { inset: 22px; }
  .torta-totale { font-size: var(--t5); }
  .scheda-testata { margin: var(--s4); padding: var(--s5); border-radius: 12px; }
  .testata-capo { grid-template-columns: minmax(0, 1fr); row-gap: var(--s3); }
  /* SUL TELEFONO IL NOME STA ACCANTO AL LOGO (Mattia, 23/09): sopra, con la
     fila dei marchi su una riga sua, la testata diventava una torre. Cerchi
     piu' piccoli e nome a 24 lasciano al nome lo spazio per due righe; la
     carta d'identita' prende la riga intera sotto. */
  .testata-capo { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s3); row-gap: var(--s4); }
  .testata-segni { grid-column: 1 / -1; margin-top: 0; }
  .testata-nome { font-size: 24px; }
  .marchi-fila { gap: 6px; }
  .marchio-logo { --d: 40px; }
  .marchio-logo.grande { --d: 56px; }
  /* Nel cerchio da 40 "marchi" non ci sta: resta il numero, il title dice il resto. */
  .piu-testo { display: none; }
  .piu-numero { font-size: var(--t4); }
  .marchio-vuoto-piu { font-size: 19px; }
  .cifre { margin: var(--s5) calc(-1 * var(--s2)) 0; padding: var(--s4) var(--s2); }
  .cifra-numero { font-size: 22px; }
  /* Dati e cifre con le stesse regole anche qui: stesso sporgere, stesso
     rientro, e la prima colonna attaccata al filo. Il valore puo' andare a
     capo: in mezza colonna i nomi lunghi non ci stanno. */
  .testata-dati { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                  margin: var(--s4) calc(-1 * var(--s2)) 0; padding: 0 var(--s2); gap: var(--s3) 0; }
  .testata-dati > div { flex-direction: column; align-items: flex-start; gap: 2px; padding: 0 var(--s5); }
  .testata-dati > div.lungo { grid-column: 1 / -1; }
  .testata-dati dd { white-space: normal; overflow-wrap: anywhere; }
  .cifra:nth-child(odd), .testata-dati > div:nth-child(odd), .testata-dati > div.lungo { padding-left: 0; }
  /* Sul telefono SEMPRE in fila, anche in tre: una colonna sola di carte alte
     154 diventa un nastro verticale che si scorre col pollice per arrivare al
     resto della scheda. Di lato si scorrono col dito, ed e' il gesto naturale.
     La carta successiva SPUNTA: e' il segno che la fila continua, al posto
     delle frecce, che col dito non servono. */
  .persone-griglia, .persone-fila {
    display: flex; gap: var(--s2); padding: var(--s3);
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scrollbar-width: none; scroll-timeline: --fila-persone x;
    scroll-snap-type: x proximity; scroll-padding: 0 var(--s3); }
  .persone-griglia::-webkit-scrollbar { display: none; }
  .persone-griglia > .persona-carta, .persone-fila > .persona-carta {
    flex: 0 0 84%; scroll-snap-align: start; }
  /* Anche la griglia, qui, e' una fila: si porta dietro gli stessi effetti -
     i veli ai bordi e le carte che si smorzano quando il bordo le taglia. */
  .persone-griglia > .persona-carta {
    animation: carta-entra linear, carta-esce linear;
    animation-timeline: view(inline), view(inline);
    animation-range: entry, exit;
    animation-fill-mode: both, forwards; }
  /* I veli sono piu' stretti: su 390 pixel, 60 sono un sesto di schermo. */
  .carosello::before, .carosello::after { width: 36px; }
  .carosello-freccia { display: none; }
  .corpo { padding: 0 var(--s4) var(--s8); gap: var(--s3); }

  .modulo label.scelta { grid-template-columns: 16px 1fr; }
  .scelta .aiuto { grid-column: 2; }

  
  /* La pipeline sul telefono: le tappe due per riga, la tabella scorre di lato. */
  .testata-cifre { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s4); }
  /* Statistiche sul telefono: la cifra grande non va a capo, e la tabella
     diventa schede (come gli altri elenchi) senza la larghezza minima dello schermo. */
  .testata-cifra-numero b { font-size: var(--t6); white-space: nowrap; }
  .testata-cifra:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* Chi ha chiesto al sistema meno movimento: niente entrate, niente
   dissolvenze, niente cascate. Resta tutto il resto. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important;
                           animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  @view-transition { navigation: none; }
}
a.articolo-nome { color: var(--testo); }
a.articolo-nome:hover { color: var(--blu); }
/* I canali del cobranding sono pochi e vanno letti tutti: vanno a capo. */
#cobranding-progetti .articolo-famiglia { white-space: normal; }

/* =============================================================================
   STATISTICHE (04/10/2026, rifatte: "troppa roba senza gerarchia"). Ogni
   pagina: la testata con al massimo tre cifre, UN riquadro principale con la
   torta e la classifica a barre, il dettaglio al clic. La testata e la banda
   delle cifre sono quelle delle Trattative (.testata-larga, .testata-cifre).
   ============================================================================= */
/* Nella testata scura: l'anno a segmenti, le tendine e l'Excel di vetro. */
.stat-comandi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin: var(--s5) 0 0; }
/* Il pannello Filtri nelle Statistiche (15/10/2026): il bottone, il periodo scritto accanto, l'Excel in fondo. */
.stat-comandi-filtri .filtri { display: contents; }
.stat-comandi-filtri .azzera { color: rgba(255, 255, 255, .75); }
.stat-comandi-filtri .stat-excel { margin-left: auto; }
/* Il bottone sta a sinistra: il pannello si apre verso destra, non sopra il menu. */
.stat-comandi-filtri .filtri-pannello { left: 0; right: auto; }

.stat-anni { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--raggio-g); background: rgba(255, 255, 255, .08); }
.stat-anni a { padding: 6px 14px; border-radius: 9px; font-size: var(--t3); font-weight: 500; color: rgba(255, 255, 255, .75);
               font-variant-numeric: tabular-nums; }
.stat-anni a:hover { background: rgba(255, 255, 255, .1); color: #FFF; }
.stat-anni a.attiva { background: #FFF; color: var(--notte); font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
/* Lo stesso interruttore nella testata della capogruppo: gruppo o sola societa'. */
.testata-vista { margin: var(--s4) 0 var(--s3); }
/* La classifica in una colonna stretta della scheda: niente barra, nome e cifra. */
.blocco-classifica .classifica-riga { grid-template-columns: 18px minmax(0, 1fr) auto 54px; }
.blocco-classifica .classifica-barra { display: none; }
.stat-tendina select.campo { height: var(--comando); min-width: 190px; color: #FFF; background-color: rgba(255, 255, 255, .08);
                             border-color: rgba(255, 255, 255, .16); }
.stat-tendina select.campo option { color: var(--testo); }
/* Il pulsante di vetro sul fondo scuro (Excel, Scheda azienda). */
.bottone-vetro, .stat-comandi .stat-excel, .stat-testata .stat-excel { gap: 6px; color: #FFF; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); box-shadow: none; }
.bottone-vetro:hover, .stat-comandi .stat-excel:hover, .stat-testata .stat-excel:hover { color: #FFF; background: rgba(255, 255, 255, .16); }
.stat-comandi .stat-excel { margin-left: auto; }

/* Il riquadro principale: la torta a sinistra, la classifica a destra. */
.stat-principale { margin: 0 var(--pagina) var(--s5); }
.stat-due { display: grid; grid-template-columns: minmax(300px, 4fr) minmax(0, 7fr); align-items: start; gap: var(--s6); padding: var(--s4) var(--s5) var(--s5) 0; }
.stat-due > .torta-riga, .stat-due > .stat-torta { position: sticky; top: var(--s4); }
.stat-torta-titolo { margin: var(--s4) var(--fianco) 0; font-size: var(--t2); font-weight: 600; color: var(--testo-3); }
.torta-grande { grid-template-columns: 200px minmax(0, 1fr); }
.torta-grande .torta { width: 200px; height: 200px; }
.torta-grande .torta-buco { inset: 40px; }
.torta-grande .torta-totale { font-size: var(--t7); }
.torta-grande .torta-legenda li { font-size: var(--t4); }
a.torta-nome:hover { color: var(--blu); }

/* LA CLASSIFICA A BARRE (_classifica.php). */
.classifica { margin: 0; padding: 0; list-style: none; }
.classifica-riga { display: grid; grid-template-columns: 22px minmax(0, 1.25fr) minmax(60px, 1fr) 118px 62px; align-items: center;
                   gap: var(--s3); padding: 9px var(--fianco); border-top: 1px solid var(--bordo-tenue); }
.classifica > .classifica-riga:first-child { border-top: 0; }
.classifica-pos { font-size: var(--t2); color: var(--testo-3); text-align: right; }
.classifica-chi { min-width: 0; }
.classifica-nome { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t4); font-weight: 500; color: var(--testo); }
a.classifica-nome:hover { color: var(--blu); }
.classifica-chi small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t2); color: var(--testo-3); }
.classifica-barra { height: 8px; border-radius: 4px; background: var(--sfiora); overflow: hidden; }
.classifica-barra i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--notte-accento), var(--blu)); }
.classifica-valore { font-size: var(--t4); font-weight: 600; text-align: right; }
.classifica-scarto { text-align: right; }
.classifica-scarto .scarto { vertical-align: 0; }
/* LE RIGHE CHE ENTRANO (05/11/2026, in comune per ogni elenco filtrato sul posto: data-righe-filtro, effetti.js): quando un
   filtro le fa comparire salgono leggere una dopo l'altra; i numeri dei conti scorrono fino al valore nuovo (contaFino) */
@keyframes righe-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
tr.righe-entra { animation: righe-entra .32s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 22ms); }
@media (prefers-reduced-motion: reduce) { tr.righe-entra { animation: none; } }
/* due misure (Executive, 05/11/2026): la barra della prima, sotto una lineetta della seconda; la cifra piccola sotto */
.classifica-due .classifica-riga { grid-template-columns: 22px minmax(0, 1.4fr) minmax(40px, .8fr) auto; }
.classifica-box.classifica-due { padding-bottom: var(--s4); }   /* respiro in fondo (05/11/2026: "serve un po' di respiro in basso") */
.classifica-due .classifica-nome { white-space: normal; overflow-wrap: anywhere; }
@media (min-width: 1201px) { .exe-tre { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
/* LA PRIMA RIGA IN EQUILIBRIO (05/11/2026, Mattia: "tutto squilibrato, va reso armonioso"): le tre carte alte uguali,
   le torte grandi a centro carta con la legenda sotto, la classifica dei marchi piu' fitta */
.stat-griglia.exe-tre { align-items: stretch; }
.exe-tre > .blocco { display: flex; flex-direction: column; }
.exe-tre > .blocco > .torta-riga { flex: 1; flex-direction: column; justify-content: center; padding: var(--s4) var(--fianco); }
.exe-tre > .blocco > .torta-riga > .torta-legenda { flex: none; width: 100%; }
.exe-tre .exe-nota { margin-top: auto; }
.exe-tre .classifica-due .classifica-riga { padding-top: 6px; padding-bottom: 6px; }
.exe-tre > .blocco > .classifica-box { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.classifica-barre { display: grid; gap: 4px; }
.classifica-barra.classifica-sottile { height: 3px; }
.classifica-barra.classifica-sottile i { background: var(--verde-vivo); }
.classifica-valore small { display: block; font-size: var(--t2); font-weight: 500; color: var(--testo-3); }
.classifica-legenda { display: flex; gap: var(--s4); margin: 0; padding: var(--s2) var(--fianco) 0; font-size: var(--t2); color: var(--testo-3); }
.classifica-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.classifica-legenda i { width: 16px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--notte-accento), var(--blu)); }
.classifica-legenda i.classifica-sottile { height: 3px; background: var(--verde-vivo); }
.classifica-altre > summary { list-style: none; cursor: pointer; padding: var(--s3) var(--fianco); font-size: var(--t3); font-weight: 500;
                              color: var(--blu); border-top: 1px solid var(--bordo-tenue); }
.classifica-altre > summary::-webkit-details-marker { display: none; }
.classifica-altre > summary:hover { color: var(--blu-scuro); background: var(--riga-sfiora); }
/* Cliccato, il comando sparisce: le altre righe sono li', non serve piu' (come .altri-contatti). */
.classifica-altre[open] > summary { display: none; }
.classifica-altre[open] > .classifica > .classifica-riga:first-child { border-top: 1px solid var(--bordo-tenue); }

/* Dentro un paese: i clienti e, accanto, chi si muove. */
.stat-griglia { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s4); margin: 0 var(--pagina) var(--s5); align-items: start; }
.stat-griglia-pari { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-griglia > .blocco { margin: 0; }
.stat-briciole { display: flex; align-items: center; gap: var(--s2); margin: 0 var(--pagina) var(--s4); font-size: var(--t4); color: var(--testo-3); }
.stat-briciole a { color: var(--blu); font-weight: 500; }
.stat-briciole a:hover { color: var(--blu-scuro); text-decoration: underline; }
.stat-briciole b { color: var(--testo); font-weight: 600; }
/* CLIENTI: si sceglie un cliente. */
.scegli-trovati { margin: var(--s3) 0 0; padding: 0; list-style: none; }
.scegli-trovati a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: 10px var(--s3); border-radius: var(--raggio); color: var(--testo); }
.scegli-trovati a:hover, .scegli-trovati a:focus-visible { background: var(--blu-tenue); color: var(--blu-scuro); }
.scegli-trovati a span { font-size: var(--t2); color: var(--testo-3); }
.scegli-niente { margin: var(--s3) 0 0; text-align: center; font-size: var(--t3); color: var(--testo-3); }

/* LA SCHEDA DI UN CLIENTE: la testata della scheda azienda, le sezioni a
   segmenti, una sezione alla volta. */
.cliente-briciole { margin-bottom: var(--s3); font-size: var(--t3); }
.cliente-briciole a { color: var(--notte-testo); }
.cliente-briciole a:hover { color: #FFF; }
.cliente-sotto { margin: var(--s1) 0 0; font-size: var(--t4); color: var(--notte-testo); }
.cliente-azioni { display: flex; gap: var(--s2); }
.stat-viste-riga { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin: 0 var(--pagina) var(--s4); }
/* LA SITUAZIONE A UNA DATA (27/10/2026): il giorno accanto alle viste; "Torna a oggi" quando se ne guarda uno passato. */
.sit-al { display: flex; align-items: center; gap: var(--s3); }
.sit-al label { display: flex; align-items: center; gap: var(--s2); font-size: var(--t3); color: var(--testo-3); }
.sit-al .campo { width: auto; min-height: 34px; }
.sit-al-oggi { font-size: var(--t3); font-weight: 600; }
/* L'INTERRUTTORE DELLE VISTE, uno solo (17/10/2026, "uniforma"): link (.stat-viste: Principali/Tutti,
   le serie della scheda cliente) o bottoni (.vista-scelta: Cerchi/Tabella, Mosaico/Tabella), stessa resa. */
.stat-viste, .vista-scelta { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: var(--raggio-g); background: var(--sfiora-scuro); }
.stat-viste a, .vista-scelta button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 0; border-radius: 9px; background: transparent;
  font: inherit; font-size: var(--t3); font-weight: 500; color: var(--testo-2); cursor: pointer; }
.stat-viste a:hover, .vista-scelta button:hover { color: var(--testo); background: rgba(255, 255, 255, .6); }
.stat-viste a.attiva, .vista-scelta button[aria-pressed="true"] { background: var(--superficie); color: var(--notte); font-weight: 600; box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
.stat-viste-piccole { padding: 3px; }
.stat-viste-piccole a { padding: 5px 12px; font-size: var(--t3); }
.blocco-testa .stat-viste { margin-left: auto; white-space: normal; }
.cliente-sezione { margin: 0 var(--pagina) var(--s8); }
.cliente-sezione > .stat-griglia { margin: 0; }
.cliente-storia .storia { height: 260px; padding: var(--s6) var(--fianco) var(--s4); }
.cliente-nota { margin: 0; padding: var(--s3) var(--fianco) var(--s4); font-size: var(--t3); color: var(--testo-3); }
.cliente-nota b { color: var(--testo); }
.articolo-metri small { display: block; font-size: var(--t2); font-weight: 400; color: var(--testo-3); text-align: right; }
/* IL PERCORSO DI UNA STAGIONE: un imbuto, le tappe si stringono. */
/* L'IMBUTO della Conversione (rifatto il 06/10/2026: i blocchi blu saturi
   "anni 90"): una riga per tappa - il nome, una barra sottile lunga quanto
   pesa sulla tappa piu' grande, il numero. Fra una tappa e l'altra, quanti
   tessuti passano. Si clicca la riga e si vedono gli articoli. */
.imbuto { display: flex; flex-direction: column; margin: 0; padding: var(--s4) var(--fianco) var(--s2); list-style: none; }

/* Le larghezze delle statistiche stanno QUI, dopo le loro regole: nei
   blocchi in fondo al foglio verrebbero scavalcate da quelle sopra. */
@media (max-width: 1200px) {
  .stat-due { grid-template-columns: minmax(0, 1fr); padding: var(--s4) 0 var(--s4); }
  .stat-griglia, .stat-griglia-pari { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .stat-principale, .stat-griglia, .stat-briciole, .stat-viste-riga, .cliente-sezione { margin-left: var(--s4); margin-right: var(--s4); }
  .torta-grande { grid-template-columns: 150px minmax(0, 1fr); }
  .torta-grande .torta { width: 150px; height: 150px; }
  .torta-grande .torta-buco { inset: 30px; }
  .classifica-riga { grid-template-columns: 18px minmax(0, 1fr) 96px 54px; }
  .classifica-barra { display: none; }
  .cliente-azioni { display: none; }
  .stat-comandi .stat-excel { margin-left: 0; }
  /* Le colonne delle cifre le scrive il template (style): sul telefono due per riga. */
  .stat-cifre { grid-template-columns: minmax(0, 1fr) !important; row-gap: var(--s2); }
  .stat-cifre .testata-cifra:nth-child(3) { padding-left: 16px; }
}

/* DA AGGANCIARE (0087, solo amministratore): una riga per coda. L'icona dice
   lo stato (verde = niente fuori, ambra = da agganciare, grigio = il dato
   manca alla fonte), a destra quanti e come vanno da una settimana: rosso se
   crescono. Al clic l'elenco si apre sotto la sua riga. */
.agg { overflow: hidden; }
.agg-riga { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: var(--s3);
            padding: var(--s3) var(--s5); color: var(--testo); transition: background .12s; }
.agg-riga + .agg-riga, .agg-elenco + .agg-riga { border-top: 1px solid var(--bordo-tenue); }
.agg-riga:hover, .agg-riga.attiva { background: var(--riga-sfiora); }
.agg-icona { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; }
.agg-riga.ok .agg-icona { background: var(--verde-tenue, var(--verde-tenue)); color: var(--verde-vivo); }
.agg-riga.aperta .agg-icona { background: var(--ambra-tenue); color: var(--ambra); }
.agg-riga.fonte .agg-icona { background: var(--sfiora); color: var(--testo-3); }
.agg-cosa { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.agg-cosa b { font-size: var(--t4); font-weight: 600; }
.agg-cosa small { font-size: var(--t2); color: var(--testo-3); }
.agg-quanti { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.agg-quanti b { font-size: var(--t5); font-variant-numeric: tabular-nums; }
.agg-riga.ok .agg-quanti b { color: var(--testo-4); }
.agg-quanti small { font-size: var(--t2); color: var(--testo-4); font-variant-numeric: tabular-nums; }
.agg-quanti small.peggio { color: var(--rosso); }
.agg-quanti small.meglio { color: var(--verde-vivo); }
.agg-elenco { padding: 0 var(--s5) var(--s4) calc(var(--s5) + 32px + var(--s3)); background: var(--riga-sfiora); scroll-margin-top: var(--s6); }
.agg-dove { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--s2); font-size: var(--t3); color: var(--testo-3); }
.agg-dove b { color: var(--testo-2); font-weight: 600; }
.agg-elenco ul { list-style: none; margin: 0; padding: 0; border-radius: var(--raggio); background: var(--superficie); box-shadow: inset 0 0 0 1px var(--bordo-tenue); }
.agg-elenco li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 84px; gap: var(--s3); align-items: baseline;
                 padding: 8px 12px; font-size: var(--t3); }
.agg-elenco li + li { border-top: 1px solid var(--bordo-tenue); }
.agg-elenco li b { font-weight: 500; overflow-wrap: anywhere; }
.agg-elenco li a b { color: var(--blu-scuro); }
.agg-sotto { color: var(--testo-3); overflow-wrap: anywhere; }
.agg-giorno { color: var(--testo-4); font-size: var(--t2); text-align: right; }
.agg-vuoto { margin: 0; font-size: var(--t3); color: var(--testo-3); }
.agg-pagine { display: flex; justify-content: center; align-items: center; gap: var(--s4); padding-top: var(--s3); font-size: var(--t3); color: var(--testo-3); }
/* I FORNITORI DA AGGANCIARE (27/10/2026): uno per riga, sotto il nome le aziende col suo nome con "E' questa", poi
   la ricerca di un'altra e "Scheda nuova". Le righe dentro sono le stesse della lista (bianche, filo tenue). */
.agg-elenco li.agg-fornitore { display: flex; flex-direction: column; align-items: stretch; gap: var(--s2); padding: 12px 14px; }
.agg-fornitore-chi { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s3); }
.agg-elenco .agg-fornitore-chi b { font-weight: 600; font-size: var(--t4); }
.agg-domanda { margin: var(--s1) 0 0; font-size: var(--t2); color: var(--testo-3); }
.agg-elenco .agg-scelte li { display: block; padding: 0; }
.agg-scelta { margin: 0; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; align-items: center; gap: var(--s3); padding: 6px 6px 6px 12px; }
.agg-scelta-chi { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s2); min-width: 0; }
.agg-scelta-chi a { color: var(--blu-scuro); font-weight: 500; overflow-wrap: anywhere; }
.agg-altro { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s1); }
.agg-cerca { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s2); flex: 1 1 340px; max-width: 520px; }
.agg-cerca .campo { width: 100%; }
.agg-oppure { font-size: var(--t2); color: var(--testo-4); }
.agg-capo-tessuto { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s3); font-size: var(--t3); color: var(--testo-2); }
.agg-capo-tessuto b { font-weight: 600; color: var(--testo); }
.agg-capo-manca { font-size: var(--t2); font-weight: 600; color: var(--ambra); }
.agg-capo-modulo { margin: var(--s1) 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.agg-capo-campo { display: flex; flex-direction: column; gap: 4px; width: 100%; max-width: 520px; }
.agg-capo-campo > span { font-size: var(--t2); font-weight: 600; color: var(--testo-3); }
.agg-capo-campo small { font-size: var(--t2); color: var(--testo-4); }
.agg-capo-campo .campo { width: 100%; }
.agg-capo-scelte { display: flex; flex-direction: column; gap: 2px; }
.agg-capo-scelta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s2); padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.agg-capo-scelta:hover, .agg-capo-scelta:has(input:checked) { background: var(--blu-tenue); }
.agg-capo-scelta input { align-self: center; }
.agg-capo-scelta span { font-weight: 500; color: var(--testo); }
.agg-capo-anno { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: var(--s2); }
.agg-capo-non { display: flex; align-items: center; gap: var(--s2); font-size: var(--t3); color: var(--testo-2); cursor: pointer; }
.agg-capo-dato { margin: 0; font-size: var(--t3); color: var(--testo-3); }
.agg-capo-dato b { color: var(--testo); font-weight: 600; }
/* LE FOTO DEI CAPI nella scheda marchio (0189, 29/10/2026): gli anni come gli altri box, una griglia di foto verticali
   (i capi sono in piedi) con sotto l'articolo e l'ordine; la x per togliere compare passandoci sopra. La finestra per
   caricare: due passi numerati (le foto, l'ordine), la zona da trascinare e l'elenco delle righe d'ordine da scegliere. */
.fc-griglia { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--s3); }
.fc-foto { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fc-cornice { display: block; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: var(--sfiora); box-shadow: inset 0 0 0 1px var(--bordo-tenue); }
.fc-cornice img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.fc-cornice:hover img { transform: scale(1.03); }
.fc-testi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fc-articolo .articolo-apri { flex-wrap: wrap; align-items: baseline; text-align: left; row-gap: 0; font-size: var(--t2); }
.fc-articolo .articolo-apri > span { white-space: normal; overflow-wrap: anywhere; }
.fc-ordine { font-size: var(--t1); color: var(--testo-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-togli { position: absolute; top: 6px; right: 6px; margin: 0; opacity: 0; transition: opacity .15s; }
.fc-foto:hover .fc-togli, .fc-togli:focus-within { opacity: 1; }
.fc-togli button { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 999px; font-size: 16px; line-height: 1;
  color: #fff; background: rgba(15, 23, 42, .72); cursor: pointer; }
.fc-togli button:hover { background: var(--rosso); }
dialog.fc-finestra { width: min(720px, calc(100vw - 32px)); }
.fc-corpo { display: flex; flex-direction: column; gap: var(--s5); }
.fc-passo { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s3); }
.fc-numero { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; font-size: var(--t2); font-weight: 700;
  color: var(--blu); background: var(--blu-tenue); }
.fc-passo-corpo { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.fc-passo-titolo { font-size: var(--t4); font-weight: 600; color: var(--testo); line-height: 28px; }
.fc-zona { display: flex; align-items: center; justify-content: center; gap: var(--s3); min-height: 96px; padding: var(--s4); border-radius: 12px;
  border: 2px dashed var(--bordo); background: var(--sfiora); color: var(--testo-3); font-size: var(--t3); text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s; }
.fc-zona b { color: var(--blu); font-weight: 600; }
.fc-zona:hover, .fc-zona.sopra { border-color: var(--blu); background: var(--blu-tenue); }
.fc-anteprime { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.fc-anteprime li { position: relative; width: 64px; height: 80px; border-radius: 8px; overflow: hidden; background: var(--sfiora); }
.fc-anteprime img { width: 100%; height: 100%; object-fit: cover; }
.fc-anteprime button { position: absolute; top: 3px; right: 3px; display: grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 999px;
  font-size: 14px; line-height: 1; color: #fff; background: rgba(15, 23, 42, .72); cursor: pointer; }
.fc-anteprime .fatta::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .55); }
.fc-anteprime .errore { box-shadow: inset 0 0 0 2px var(--rosso); }
.fc-cerca { flex: none; width: 100%; min-width: 0; }
.fc-cerca .campo { width: 100%; }
.fc-righe { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--bordo-tenue); }
.fc-riga { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s3); padding: 9px var(--s3); cursor: pointer; }
.fc-riga + .fc-riga { border-top: 1px solid var(--bordo-tenue); }
.fc-riga:hover { background: var(--sfiora); }
.fc-riga[aria-selected="true"] { background: var(--blu-tenue); box-shadow: inset 3px 0 0 var(--blu); }
.fc-riga b { font-size: var(--t3); font-weight: 600; color: var(--testo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-riga small { grid-column: 1; font-size: var(--t2); color: var(--testo-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-riga-lato { grid-row: 1 / span 2; grid-column: 2; align-self: center; text-align: right; font-size: var(--t2); color: var(--testo-3); font-variant-numeric: tabular-nums; }
.fc-riga-lato em { display: block; font-style: normal; color: var(--verde-vivo); }
.fc-vuoto { padding: var(--s4); font-size: var(--t3); color: var(--testo-3); text-align: center; }
.fc-stato { margin: 0 auto 0 0; font-size: var(--t3); color: var(--testo-3); }
.fc-stato.errore { color: var(--rosso); }
/* I CAPI COMPRATI nella scheda marchio (0177; box a se' dal 28/10/2026): gli anni come i Tessuti acquistati, una carta
   per capo col riquadro della foto (la gruccia finche' non c'e'; la prima foto e "+N" quando arrivano). */
.capi-carte { list-style: none; margin: 0 0 var(--s3); padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.capi-carta { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: start; gap: var(--s3);
  padding: var(--s2); border-radius: 12px; background: var(--superficie); box-shadow: inset 0 0 0 1px var(--bordo-tenue); }
.capi-foto { position: relative; display: grid; place-items: center; width: 64px; height: 80px; border-radius: 8px; overflow: hidden; background: var(--sfiora); }
.capi-foto.senza { color: var(--testo-4); }
.capi-foto img { width: 100%; height: 100%; object-fit: cover; }
.capi-foto-altre { position: absolute; right: 4px; bottom: 4px; padding: 1px 6px; border-radius: 999px; font-size: var(--t1); font-weight: 600;
  color: #fff; background: rgba(15, 23, 42, .72); }
.capi-testi { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 2px; }
.capi-cosa { font-size: var(--t3); font-weight: 600; color: var(--testo); overflow-wrap: anywhere; }
.capi-tessuto { min-width: 0; }
/* nella colonna stretta il nome del tessuto va a capo invece di ridursi a una lettera, col codice e il colore sotto */
.capi-tessuto .articolo-apri { flex-wrap: wrap; align-items: baseline; text-align: left; row-gap: 0; }
.capi-tessuto .articolo-apri > span { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.capi-non-manteco { font-size: var(--t2); color: var(--testo-3); }
.capi-dati { display: flex; flex-wrap: wrap; gap: 2px var(--s3); font-size: var(--t2); color: var(--testo-3); }
.capi-dati b { font-weight: 600; color: var(--testo-2); }
.capi-codice { padding-top: 4px; font-size: var(--t2); color: var(--testo-4); white-space: nowrap; }
.capi-senza-anno { font-size: var(--t4); }
@media (max-width: 700px) {
  .agg-riga { padding: var(--s3) var(--s4); }
  .agg-elenco { padding: 0 var(--s4) var(--s4); }
  .agg-elenco li { grid-template-columns: minmax(0, 1fr) auto; }
  .agg-sotto { grid-column: 1 / -1; grid-row: 2; }
  .agg-scelta .agg-sotto:empty { display: none; }
  .agg-cerca { flex-basis: 100%; max-width: none; }
}

/* STATUS (0162, solo amministratore): i giri, i dati, le copie da spegnere, il database. Le righe sono quelle di
   Da agganciare (.agg); l'icona dice lo stato a colpo d'occhio - spunta verde a posto, orologio ambra in ritardo,
   triangolo rosso fermo, cerchio vuoto non ancora - e al clic la finestra col dettaglio. */
.st { max-width: 1120px; }
.st-frase { margin: var(--s3) var(--s8) var(--s2); font-size: var(--t4); color: var(--testo-2); }
.st-frase b { font-weight: 600; margin-right: 4px; }
.st-verde { color: var(--verde-vivo); } .st-ambra { color: var(--ambra); } .st-rosso { color: var(--rosso); }
.st-titolo { margin: var(--s6) var(--s8) var(--s3); font-size: var(--t5); font-weight: 600; color: var(--testo); }
.st-spiega { margin: calc(-1 * var(--s2)) var(--s8) var(--s3); font-size: var(--t3); color: var(--testo-3); }
.agg-riga.st-ok .agg-icona { background: var(--verde-tenue); color: var(--verde-vivo); }
.agg-riga.st-late .agg-icona { background: var(--ambra-tenue); color: var(--ambra); }
.agg-riga.st-error .agg-icona { background: var(--rosso-tenue); color: var(--rosso); }
.agg-riga.st-wait .agg-icona { background: var(--sfiora); color: var(--testo-3); }
.agg-riga.st-error .agg-cosa small { color: var(--rosso); }
.agg-riga.st-late .agg-cosa small { color: var(--ambra); }
.agg-riga.st-passo .agg-cosa small { color: var(--testo-3); }
.st-quando { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.st-quando b { font-size: var(--t3); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-quando small { font-size: var(--t2); color: var(--testo-4); }
.st-tabella { width: 100%; border-collapse: collapse; font-size: var(--t3); }
.st-tabella th { padding: 10px var(--s5); text-align: left; font-size: var(--t2); font-weight: 600; color: var(--testo-3);
                 border-bottom: 1px solid var(--bordo-tenue); }
.st-tabella td { padding: 10px var(--s5); border-bottom: 1px solid var(--bordo-tenue); color: var(--testo-2); }
.st-tabella tr:last-child td { border-bottom: 0; }
.st-tabella td b { color: var(--testo); font-weight: 600; }
.st-tabella code { margin-left: 6px; font-size: var(--t2); color: var(--testo-4); }
.st-tabella .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-tabella td:nth-child(3) { white-space: nowrap; }
.st-tabelle { margin-bottom: var(--s5); border-radius: var(--raggio); box-shadow: inset 0 0 0 1px var(--bordo-tenue); }
.st-tabelle th, .st-tabelle td { padding: 8px 12px; }
.st-tabelle td:nth-child(2) { white-space: nowrap; }
.st-tabelle code { margin: 0; font-size: var(--t3); color: var(--testo); }
/* STATUS RIPENSATA (29/10/2026): la macchina e i tempi in due carte affiancate, le persone in una tabella, i giri nei cassetti. */
.st-macchine { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--s4); margin: 0 var(--pagina) var(--s4); }
.st-macchine > .riquadro { margin: 0; }
.st-macchina { display: flex; flex-direction: column; padding: var(--s4) var(--s5) var(--s5); }
.st-macchina > header { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--bordo-tenue); }
.st-macchina > header > span:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.st-macchina > header b { font-size: var(--t4); font-weight: 600; color: var(--testo); }
.st-macchina > header small { font-size: var(--t2); color: var(--testo-3); }
.st-macchina > header .lv-tessera { width: 32px; height: 32px; border-radius: 10px; }
/* la banda in cima: tutto a posto o cosa e' fermo */
.st-banda { display: flex; align-items: center; gap: var(--s4); padding: var(--s4) var(--s5); }
.st-banda .lv-tessera { width: 40px; height: 40px; border-radius: 12px; }
.st-banda-testo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-banda-testo b { font-size: var(--t5); font-weight: 650; color: var(--testo); }
.st-banda-testo small { font-size: var(--t3); color: var(--testo-2); }
.st-male .st-banda-testo b { color: var(--rosso); }
.st-banda-vai { margin-left: auto; font-size: var(--t3); font-weight: 600; color: var(--blu); text-decoration: none; white-space: nowrap; }
.st-bene .st-banda-vai { color: var(--testo-3); font-weight: 500; }
.st-numeri { margin-top: 0; }
.st-numeri .lv-vista .lv-tessera { color: var(--tono); }
.st-macchina dd > span small { font-size: var(--t2); color: var(--testo-3); }
.st-nota { flex-basis: 100%; }
.st-chi { display: flex; align-items: center; gap: var(--s3); }
a.st-chi { color: inherit; text-decoration: none; }
a.st-chi:hover b { color: var(--blu); text-decoration: underline; }
/* LE PAGINE PIU' VISTE (07/11/2026): nome e quante persone, la barra, quante volte; al clic chi la apre */
.st-viste { margin-bottom: var(--s4); padding: var(--s4) var(--s5); }
.st-viste > header { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s3); }
.st-viste > header b { font-size: var(--t4); font-weight: 600; color: var(--testo); }
.st-viste > header small { font-size: var(--t2); color: var(--testo-3); }
.st-viste ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--s6); margin: 0; padding: 0; list-style: none; }
.st-viste a { display: grid; grid-template-columns: minmax(0, 1fr) 90px 44px; align-items: center; gap: var(--s3); padding: 7px 8px; margin: 0 -8px;
              border-radius: 8px; color: inherit; text-decoration: none; }
.st-viste a:hover { background: var(--sfiora); }
.st-vista-nome { display: flex; flex-direction: column; min-width: 0; }
.st-vista-nome b { font-size: var(--t3); font-weight: 600; color: var(--testo); }
.st-vista-nome small { font-size: var(--t2); color: var(--testo-3); }
.st-vista-n { text-align: right; font-size: var(--t3); font-variant-numeric: tabular-nums; }
.st-volte { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.st-volte li { display: grid; grid-template-columns: minmax(0, 1fr) 120px 48px; align-items: center; gap: var(--s3); font-size: var(--t3); color: var(--testo); }
.st-volte li b { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .st-viste ol { grid-template-columns: 1fr; }
  .st-viste a { grid-template-columns: minmax(0, 1fr) 60px 40px; }
  .st-volte li { grid-template-columns: minmax(0, 1fr) 70px 40px; }
}
.st-chi > span:last-child { display: flex; flex-direction: column; }
.st-adesso { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--verde); }
.st-adesso::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #12B76A; box-shadow: 0 0 0 3px #12B76A33; }
.st-macchina dl { display: grid; gap: var(--s3); margin: 0; }
.st-macchina dl > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: var(--s3); }
.st-macchina dt { padding-top: 1px; font-size: var(--t3); color: var(--testo-3); }
.st-macchina dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s3); margin: 0; font-size: var(--t3); color: var(--testo); font-variant-numeric: tabular-nums; }
.st-macchina dd small { flex-basis: 100%; font-size: var(--t2); color: var(--testo-3); }
.st-barra { flex: 1 1 120px; max-width: 220px; height: 8px; border-radius: 99px; background: var(--bordo-tenue); overflow: hidden; }
.st-barra i { display: block; height: 100%; border-radius: inherit; background: var(--verde, #12b76a); }
.st-barra-ambra i { background: var(--ambra); }
.st-barra-rossa i { background: var(--rosso); }
.st-cifre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-bottom: var(--s4); }
.st-cifre span { display: flex; flex-direction: column; gap: 2px; }
.st-cifre b { font-size: 22px; font-weight: 650; letter-spacing: -.02em; color: var(--testo); font-variant-numeric: tabular-nums; }
.st-cifre small { font-size: var(--t2); color: var(--testo-3); }
.st-lente, .st-durate { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: var(--t3); }
.st-lente li { display: grid; grid-template-columns: minmax(0, 1fr) auto 64px; align-items: baseline; gap: var(--s3); padding-top: 6px; border-top: 1px solid var(--bordo-tenue); }
.st-lente code { overflow-wrap: anywhere; font-size: var(--t2); color: var(--testo-2); }
.st-lente small { font-size: var(--t2); color: var(--testo-3); }
.st-lente b, .st-durate b { text-align: right; font-weight: 600; color: var(--testo); font-variant-numeric: tabular-nums; }
.st-durate li { display: grid; grid-template-columns: 92px minmax(0, 1fr) 64px; align-items: center; gap: var(--s3); }
.st-durate small { font-size: var(--t2); color: var(--testo-3); }
.st-durata-barra { height: 8px; border-radius: 99px; background: var(--bordo-tenue); overflow: hidden; }
.st-durata-barra i { display: block; height: 100%; border-radius: inherit; background: var(--blu); }
.st-durate .st-late .st-durata-barra i { background: var(--ambra); }
.st-durate .st-error .st-durata-barra i { background: var(--rosso); }
.st-durate .st-wait b { font-weight: 400; color: var(--testo-3); }
.st-vuoto { margin: 0; font-size: var(--t3); color: var(--testo-3); }
.st-persone td small, .st-persone th small { display: block; font-size: var(--t2); font-weight: 400; color: var(--testo-3); }
.st-persone th.n, .st-persone td.n { text-align: right; font-variant-numeric: tabular-nums; }
.st-persone td:nth-child(2) { white-space: nowrap; }
.st-cassetto { margin: var(--s6) 0 0; }
.st-cassetto > summary { display: flex; align-items: baseline; gap: var(--s3); margin: 0 var(--pagina); padding: var(--s3) var(--s5); border-radius: 12px; background: var(--superficie);
                         box-shadow: 0 0 0 1px rgba(16, 24, 40, .05); cursor: pointer; list-style: none; }
.st-cassetto > summary::-webkit-details-marker { display: none; }
.st-cassetto > summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--testo-3); border-bottom: 2px solid var(--testo-3);
                                transform: rotate(45deg); align-self: center; transition: transform .2s; }
.st-cassetto[open] > summary::after { transform: rotate(-135deg); }
.st-cassetto > summary b { font-size: var(--t4); font-weight: 600; color: var(--testo); }
.st-cassetto > summary small { font-size: var(--t3); color: var(--testo-3); }
.st-cassetto[open] > summary { margin-bottom: var(--s2); }
@media (max-width: 900px) {
  .st-macchine { grid-template-columns: minmax(0, 1fr); }
  .st-persone th:nth-child(3), .st-persone td:nth-child(3) { display: none; }
}
.st-vecchia td, .st-vecchia code { color: var(--ambra); }
.st-sotto { margin: 0 0 var(--s2); font-size: var(--t3); font-weight: 600; color: var(--testo-2); }
.st-finestra { width: min(680px, calc(100vw - 32px)); }
.st-cosa { margin: 0 0 var(--s4); font-size: var(--t3); color: var(--testo-3); }
.st-esiti, .st-copie { list-style: none; margin: 0; padding: 0; border-radius: var(--raggio); box-shadow: inset 0 0 0 1px var(--bordo-tenue); }
.st-esiti li { display: grid; grid-template-columns: 22px 92px minmax(0, 1fr); gap: var(--s2); align-items: baseline; padding: 8px 12px; font-size: var(--t3); }
.st-esiti li + li, .st-copie li + li { border-top: 1px solid var(--bordo-tenue); }
.st-esito-icona { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; transform: translateY(4px); }
.st-esito-ok .st-esito-icona { background: var(--verde-tenue); color: var(--verde-vivo); }
.st-esito-error .st-esito-icona { background: var(--rosso-tenue); color: var(--rosso); }
.st-esito-skipped .st-esito-icona { background: var(--sfiora); color: var(--testo-3); }
.st-esito-quando { color: var(--testo-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-esito-cosa { color: var(--testo-2); overflow-wrap: anywhere; }
.st-esito-error .st-esito-cosa { color: var(--rosso); }
.st-dettaglio { grid-column: 2 / -1; }
.st-dettaglio summary { cursor: pointer; font-size: var(--t2); color: var(--testo-3); }
.st-dettaglio pre { max-height: 320px; overflow: auto; margin: var(--s2) 0 0; padding: var(--s3); border-radius: 8px; background: var(--sfiora);
                    font-size: 11.5px; line-height: 1.45; white-space: pre-wrap; }
.st-copie li { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; font-size: var(--t3); }
.st-copie code { font-weight: 600; color: var(--testo); }
.st-copia-al-posto { color: var(--testo-2); }
.st-copie small { color: var(--testo-3); font-size: var(--t2); overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .st-frase, .st-titolo, .st-spiega { margin-left: var(--s4); margin-right: var(--s4); }
  .st-tabella th:nth-child(2), .st-tabella td:nth-child(2) { display: none; }
  .st-tabella th, .st-tabella td { padding: 10px var(--s4); }
  .st-tabella code { display: block; margin: 2px 0 0; }
  .st-quando small { display: none; }
  .st-esiti li { grid-template-columns: 22px minmax(0, 1fr); }
  .st-esito-cosa { grid-column: 2; }
}

/* LA NEWSLETTER, pagina di controllo (0088): il pallino dice se l'invio ad
   ActiveCampaign e' acceso (verde) o spento (grigio). Le righe sono quelle di
   Da agganciare (.agg). */
.nl-stato { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.nl-pallino { display: inline-block; width: 8px; height: 8px; border-radius: 50%; transform: translateY(-1px); }
.nl-pallino.acceso { background: var(--verde-vivo); box-shadow: 0 0 0 3px var(--verde-tenue); }
.nl-pallino.spento { background: var(--testo-4); }
.nl-stato .allerta { color: var(--rosso); }

/* LE BANDIERE (05/10/2026): piccole, coi bordi appena tondi e un filo che le
   stacca dal bianco, sullo stesso filo del testo. Layout::flag / ::country. */
.bandiera { display: inline-block; width: 16px; height: 12px; margin-right: 6px; border-radius: 2px; object-fit: cover;
            vertical-align: -1px; box-shadow: 0 0 0 1px rgba(16, 24, 40, .1); flex: 0 0 auto; }
/* In linea, non flex: un contenitore flex prende la linea di base dalla
   bandiera, e il nome scendeva sotto le altre voci della riga. */
.paese { display: inline; white-space: nowrap; }

/* "MOSTRA ALTRI" (06/10/2026, data-mostra-altri in effetti.js): le righe
   nascoste restano nascoste anche quando il loro stile dice grid o flex. */
[data-mostra-altri] [hidden] { display: none !important; }

/* LA TABELLA ANNO PER ANNO sotto un grafico (06/10/2026, _anni-tabella.php):
   gli anni in colonna come le barre sopra, le voci in riga; il delta sotto la
   cifra, nella stessa cella. L'anno in corso appena evidenziato, quello in
   arrivo piu' chiaro. */
.anni-tabella { padding: 0 var(--fianco) var(--s4); overflow-x: auto; }
.anni-tabella table { width: 100%; border-collapse: collapse; font-size: var(--t3); table-layout: fixed; }
.anni-tabella th, .anni-tabella td { padding: 8px 10px; border-bottom: 1px solid var(--bordo-tenue); white-space: nowrap; text-align: left; vertical-align: top; }
.anni-tabella thead th { font-size: var(--t2); font-weight: 600; color: var(--testo-3); border-bottom-color: var(--bordo); }
.anni-tabella thead th:first-child { width: 120px; }
.anni-tabella thead th small { display: block; font-weight: 400; color: var(--testo-4); }
.anni-tabella tbody th { font-weight: 500; color: var(--testo-2); }
.anni-tabella .numero { text-align: right; font-variant-numeric: tabular-nums; }
.anni-tabella td.numero { color: var(--testo); }
/* Il delta in una colonna sua, accanto alla cifra (06/10/2026). */
.anni-tabella.con-delta table { table-layout: auto; }
.anni-tabella td.delta { width: 1%; padding-left: 0; text-align: left; vertical-align: middle; }
.anni-tabella td.numero { vertical-align: middle; }
.anni-tabella .corrente { background: var(--riga-sfiora); }
.anni-tabella thead th.corrente { color: var(--blu); }
.anni-tabella .futuro { color: var(--testo-3); }
.anni-tabella tbody tr:last-child th, .anni-tabella tbody tr:last-child td { border-bottom: 0; }
.anni-nota { margin: var(--s2) 0 0; font-size: var(--t2); color: var(--testo-4); }
.cliente-sezione > .blocco + .blocco { margin-top: var(--s4); }

/* IL SOTTO MENU DELL'ANDAMENTO (06/10/2026): nella testa del riquadro, al posto
   del titolo; a destra 5 / 10 anni. */
.andamento-testa { flex-wrap: wrap; row-gap: var(--s2); }
.andamento-serie { margin-left: 0 !important; margin-right: auto; }
h2.nascosta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* LA SCHEDA STATISTICA NEL PANNELLO (06/10/2026, data-apri-statistiche):
   non una finestra in mezzo allo schermo ("sembra vistosamente un popup, anni
   90") ma un pannello a tutta altezza attaccato a destra, come un pezzo della
   pagina: fondo appena velato, la testata blu notte delle schede ferma in
   cima, la scheda che scorre sotto. Mentre carica la sezione nuova, quella di
   prima resta sbiadita. */
dialog.stat-finestra { inset: 0 0 0 auto; margin: 0; width: min(1180px, calc(100vw - 64px)); height: 100dvh; max-height: none; max-width: none;
                       padding: 0; border: 0; border-radius: 0; background: var(--fondo); overflow: hidden;
                       box-shadow: -24px 0 64px rgba(8, 12, 22, .24); }
dialog.stat-finestra::backdrop { background: rgba(8, 12, 22, .28); }
/* Spigoli vivi ed ENTRA DA DESTRA scorrendo (07/10/2026, Mattia: "come se
   comparisse da destra a slide"): e' un pannello che arriva, non una
   finestra che si accende. Il velo dietro sfuma. */
/* Piu' lento e che frena dolcemente in fondo: la curva di prima partiva di
   scatto e il pannello arrivava come un lampo. */
dialog.stat-finestra[open] { animation: stat-entra .45s cubic-bezier(.16, 1, .3, 1); will-change: transform; }
dialog.stat-finestra[open]::backdrop { animation: stat-velo .45s ease-out; }
@keyframes stat-entra { from { transform: translateX(100%); } }
@keyframes stat-velo { from { opacity: 0; } }
/* L'uscita: accelera verso destra, il velo si schiarisce insieme. */
dialog.stat-finestra.esce { animation: stat-esce .36s cubic-bezier(.55, 0, .75, .2) forwards; }
dialog.stat-finestra.esce::backdrop { animation: stat-velo-via .36s ease-in forwards; }
@keyframes stat-esce { to { transform: translateX(100%); } }
@keyframes stat-velo-via { to { opacity: 0; } }
/* Il contenuto che arriva: una dissolvenza breve. La scheda e' la stessa della pagina (03/11/2026): testata, tasti e
   sezioni uguali, cambia solo la cornice. */
.stat-finestra-corpo.appena > .stat-dentro { animation: stat-appare .25s ease-out; }
@keyframes stat-appare { from { opacity: 0; } }
.stat-scheletro .attesa-cartello { display: flex; align-items: center; justify-content: center; gap: var(--s3); min-height: 50vh; color: var(--testo-3); }
.stat-finestra-corpo { height: 100%; overflow-y: auto; overscroll-behavior: contain; transition: opacity .15s; }
.stat-finestra-corpo.in-carica > .stat-dentro { opacity: .45; pointer-events: none; }
.stat-finestra-corpo > .attesa-cartello { display: flex; align-items: center; justify-content: center; gap: var(--s3); height: 60%; color: var(--testo-3); }
.stat-finestra-chiudi { position: absolute; top: 20px; right: 20px; z-index: 3; display: grid; place-items: center; width: 36px; height: 36px;
                        border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; background: rgba(255, 255, 255, .08); color: #FFF; cursor: pointer; }
.stat-finestra-chiudi:hover { background: rgba(255, 255, 255, .18); }
/* La crocetta sta sul fondo chiaro del pannello, sopra l'angolo della testata. */
dialog.stat-finestra .stat-finestra-chiudi { top: 8px; right: 8px; color: var(--testo-2); background: var(--superficie); border-color: var(--bordo); }
.stat-finestra-corpo:focus { outline: none; }
.cliente-sezione > .stat-griglia + .blocco { margin-top: var(--s5); }
@media (max-width: 700px) {
  dialog.stat-finestra { width: 100vw; border-radius: 0; }
}

/* COSA COMPRA (06/10/2026): le pillole delle collezioni sopra, e la tabella
   di tutti gli articoli (la resa di .anni-tabella, il nome a sinistra). */
/* Le pillole di Cosa compra: le collezioni a sinistra, Campionario /
   Produzione a destra, sulla stessa riga (07/10/2026). */
.tabella-articoli { padding-top: var(--s2); }
.tabella-articoli thead th:first-child { width: auto; }
.tabella-articoli table { table-layout: auto; }
/* Le righe allineate (07/10/2026): ogni cella al centro e la stessa altezza,
   il pulsante dell'articolo e il tondino del colore non spostano la linea. */
.tabella-articoli th, .tabella-articoli td { vertical-align: middle; }
.tabella-articoli tbody th, .tabella-articoli tbody td { height: 46px; padding-top: 6px; padding-bottom: 6px; line-height: 1.3; }
.tabella-articoli .articolo-apri, .tabella-articoli .colore-riga { vertical-align: middle; }
.tabella-articoli .articolo-apri > span { line-height: 1.3; }
.tabella-articoli tbody th { color: var(--testo); }
.tabella-articoli td:not(.numero) { color: var(--testo-2); }

/* TRE CIFRE IN TESTA A UN BLOCCO (06/10/2026, Statistiche > Andamento): la
   risposta prima del grafico. Divise da un filo d'ombra, come .cifre in
   testata ma sul chiaro. */
.blocco-cifre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: var(--s5) var(--fianco) var(--s2); }
.blocco-cifra { display: flex; flex-direction: column; gap: 3px; padding: 0 var(--s5); box-shadow: inset 1px 0 0 var(--bordo-tenue); min-width: 0; }
.blocco-cifra:first-child { padding-left: 0; box-shadow: none; }
.blocco-cifra dt { font-size: var(--t3); color: var(--testo-3); }
.blocco-cifra dd { margin: 0; }
.blocco-cifra-numero { font-size: 26px; font-weight: 650; letter-spacing: -.03em; line-height: 1.15; color: var(--testo); }
.blocco-cifra-sotto { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--t2); color: var(--testo-3); }
.blocco-cifra.allerta .blocco-cifra-numero, .tabella-articoli td.allerta { color: var(--rosso); }

/* FIERE: gli articoli scelti a ogni visita (06/10/2026). Verdi quelli poi ordinati. */
.fiere-visite { display: flex; flex-direction: column; }
.fiera-visita { padding: var(--s4) var(--fianco); border-top: 1px solid var(--bordo-tenue); }
.fiera-visita:first-child { border-top: 0; }
.fiera-testa { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s4); align-items: baseline; }
.fiera-testa .articolo-famiglia { grid-column: 1; }
.fiera-conti { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: var(--t2); color: var(--testo-3); white-space: nowrap; }
.fiera-articoli { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s3); }
.fiera-articolo { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px;
                  background: var(--sfiora); color: var(--testo-2); font-size: var(--t2); white-space: nowrap; }
.fiera-taglio { font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--testo-3); }
.fiera-articoli > .storico-altre { width: auto; height: 24px; margin: 0; padding: 0 10px; border-radius: 999px; }
@media (max-width: 700px) {
  .blocco-cifre { grid-template-columns: 1fr; gap: var(--s4); }
  .blocco-cifra { padding: 0; box-shadow: none; }
}

/* UN ARTICOLO, ovunque (07/10/2026, Layout::articolo): l'iconcina del tessuto
   e il nome, un pulsante che non sembra un pulsante; al passaggio il nome si
   sottolinea e l'icona diventa blu. */
.articolo-apri { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 0; border: 0; background: none;
                 font: inherit; color: inherit; text-align: left; cursor: pointer; }
.articolo-apri > svg { flex-shrink: 0; color: var(--testo-3); transition: color .15s; }
.articolo-apri > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.articolo-apri:hover > span { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--bordo-forte); }
.articolo-apri:hover > svg, .articolo-apri:focus-visible > svg { color: var(--blu); }
.articolo-apri:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; border-radius: 4px; }
/* Il colore, quando la riga e' di un colore solo: piccolo e grigio dopo il nome. */
.articolo-col { flex-shrink: 0; font-size: var(--t2); color: var(--testo-3); }
.articolo-apri.senza-col .articolo-col { display: none; }
/* Il codice articolo accanto al nome (27/10/2026): lo stile di .ord-codice; nell'icona sola no. */
.articolo-apri .articolo-codice { margin-left: 6px; }
.articolo-apri.solo-icona .articolo-codice { display: none; }
/* IL COLORE di una riga (Cosa compra, 07/10/2026): un tondino con dentro la foto
   piatta del tessuto - il colore a colpo d'occhio - e il codice accanto. Senza
   foto, un tondino neutro tratteggiato. */
.colore-riga { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t3); color: var(--testo-2); }
.colore-riga > .m { line-height: 1; }
.colore-tondino { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; background: var(--sfiora);
                  box-shadow: 0 0 0 1px rgba(16, 24, 40, .12), 0 1px 3px rgba(16, 24, 40, .12); }
.colore-tondino img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.6); }
/* Senza foto: le righine diagonali delle tessere, che non si confonda col bianco. */
.colore-tondino.senza-foto { background: repeating-linear-gradient(135deg, var(--sfiora-scuro), var(--sfiora-scuro) 3px, var(--superficie) 3px, var(--superficie) 6px);
                             box-shadow: inset 0 0 0 1px var(--bordo); }
.colore-tondino img[hidden], .art-comprato-foto img[hidden] { display: none; }
/* Solo l'iconcina, dove il nome fa gia' un'altra cosa (la classifica delle
   Statistiche > Articoli: il nome scende di livello, l'icona apre la scheda). */
.articolo-apri.solo-icona > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.classifica-con-icona { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* Dentro le pastiglie delle Scelte l'articolo prende il colore della pastiglia. */
.fiera-articolo .articolo-apri > svg { color: currentColor; opacity: .6; }

/* LA SCHEDA ARTICOLO (07/10/2026, articolo-scheda.php): in testa la famiglia
   con la sua immagine sotto un velo scuro, poi foto e colori a sinistra e i
   dati a destra, in fondo il racconto della famiglia e i link. */
dialog.art-finestra { width: min(920px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 48px); padding: 0; overflow: hidden; border-radius: 18px; }
dialog.art-finestra::backdrop { background: rgba(8, 12, 22, .45); }
.art-finestra-corpo { max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; }
.art-finestra-corpo:focus { outline: none; }
.art-finestra-corpo > .attesa-cartello { display: flex; align-items: center; justify-content: center; gap: var(--s3); min-height: 260px; color: var(--testo-3); }
.art-chiudi { position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
              border: 1px solid rgba(255, 255, 255, .25); background: rgba(8, 12, 22, .35); color: #FFF; cursor: pointer; backdrop-filter: blur(4px); }
.art-chiudi:hover { background: rgba(8, 12, 22, .55); }
.art-chiudi:focus:not(:focus-visible) { outline: none; }
.art-vuota { padding: var(--s10) var(--s6); }
.art-famiglia { position: relative; display: flex; align-items: center; gap: var(--s6); padding: var(--s5) 64px var(--s5) var(--s8);
                overflow: hidden; color: #FFF; background: var(--testata-fondo); isolation: isolate; }
/* Il fondo: la stessa immagine, sfocata e scurita. */
.art-famiglia::before { content: ''; position: absolute; inset: -40px; z-index: -1; background: var(--foto, none) center / cover no-repeat;
                        filter: blur(28px) saturate(1.2) brightness(.55); }
.art-famiglia-img { flex-shrink: 0; width: 150px; height: 150px; object-fit: cover; border-radius: var(--raggio-g);
                    box-shadow: 0 12px 30px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .12); }
.art-famiglia-testo { min-width: 0; }
.art-famiglia-nome { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
/* Il motto della famiglia, sotto il nome: piu' grande del racconto (07/10/2026). */
.art-famiglia-sotto { margin: 4px 0 0; font-size: 18px; font-weight: 500; letter-spacing: -.01em; line-height: 1.3; color: rgba(255, 255, 255, .92); }
/* La foto del colore: piu' piccola dei dati (07/10/2026), la colonna sta a 240. */
.art-corpo { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: var(--s8); padding: var(--s6) var(--s8); }
.art-foto-cornice { aspect-ratio: 1; border-radius: var(--raggio-g); overflow: hidden; background: var(--sfiora); box-shadow: inset 0 0 0 1px var(--bordo-tenue); }
.art-foto-grande { display: block; width: 100%; height: 100%; object-fit: cover; }
.art-foto-grande[hidden] { display: none; }
/* Nessuna foto per questo colore: il riquadro tratteggiato, come le tessere. */
.art-foto-cornice.senza-foto { background: repeating-linear-gradient(135deg, var(--sfiora), var(--sfiora) 8px, var(--superficie) 8px, var(--superficie) 16px); }
.art-corpo.senza-foto, .art-corpo:not(:has(.art-foto)) { grid-template-columns: 1fr; }
.art-varianti { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 5px; margin-top: var(--s3);
                 max-height: 132px; overflow-y: auto; padding: 3px; margin-left: -3px; margin-right: -3px; scrollbar-width: thin; }
.art-variante { aspect-ratio: 1; padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--sfiora);
                box-shadow: inset 0 0 0 1px var(--bordo-tenue); transition: box-shadow .15s; }
.art-variante img { display: block; width: 100%; height: 100%; object-fit: cover; }
.art-variante:hover { box-shadow: 0 0 0 2px var(--bordo-forte); }
.art-variante.attiva { box-shadow: 0 0 0 2px var(--blu); }
.art-nome { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--testo); }
.art-codice { margin: 4px 0 0; font-size: var(--t3); color: var(--testo-3); }
.art-segno { padding: 3px 10px; border-radius: 999px; font-size: var(--t2); font-weight: 600; background: var(--blu-tenue); color: var(--blu-scuro); }
.art-tecnici { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--s2) var(--s8); margin: var(--s5) 0 0; }
.art-tecnici dt { font-size: var(--t2); color: var(--testo-3); }
.art-tecnici dd { margin: 2px 0 0; font-size: var(--t5); font-weight: 600; color: var(--testo); }
.art-commerciale { margin: var(--s4) 0 0; font-size: var(--t4); color: var(--testo-2); }
/* I COLORI COMPRATI (07/10/2026): una griglia di tessere - la foto piatta, il
   codice, i metri. La tessera accesa e' quella nella foto grande. */
.art-comprati { margin-top: var(--s4); }
.art-comprati .conta { margin-left: 4px; }
/* Sotto la foto grande, tre per riga; con tanti colori scorre. */
.art-comprati-griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-height: 420px; overflow-y: auto;
                        padding: 3px; margin: -3px; scrollbar-width: thin; }
.art-comprato { display: flex; flex-direction: column; gap: 2px; padding: 5px 5px 7px; border: 0; border-radius: 10px; background: var(--sfiora);
                text-align: left; cursor: pointer; font: inherit; color: inherit; transition: box-shadow .15s, background .15s; }
.art-comprato:hover { background: var(--sfiora-scuro); }
.art-comprato.attiva { background: var(--superficie); box-shadow: 0 0 0 2px var(--blu); }
.art-comprato-foto { aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--superficie); box-shadow: inset 0 0 0 1px var(--bordo-tenue); }
.art-comprato-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.art-comprato-foto.senza-foto { background: repeating-linear-gradient(135deg, var(--sfiora), var(--sfiora) 6px, var(--superficie) 6px, var(--superficie) 12px); }
.art-comprato-col { margin-top: 3px; font-size: var(--t2); font-weight: 600; color: var(--testo); }
.art-comprato-metri { font-size: var(--t2); color: var(--testo-3); }
.art-icone { margin-top: var(--s5); }
.art-titoletto { margin: 0 0 var(--s2); font-size: var(--t3); font-weight: 600; color: var(--testo-2); }
.art-icone ul { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
/* Le icone di m sono spesso quadrate col loro bordo: si mostrano come sono,
   mai ritagliate tonde (07/10/2026). */
.art-icone li { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 8px; background: var(--sfiora); font-size: var(--t3); color: var(--testo-2); }
.art-icone li img { width: 28px; height: 28px; object-fit: contain; mix-blend-mode: multiply; }
.art-cura li { padding: 4px; }

.art-famiglia { align-items: flex-start; }
.art-famiglia-testo { padding-top: 2px; }
/* Il racconto della famiglia, nella testata: due righe chiare, il resto al clic. */
.art-racconto { margin-top: var(--s3); max-width: 62ch; font-size: var(--t3); line-height: 1.5; color: rgba(255, 255, 255, .82); }
.art-racconto summary { list-style: none; cursor: pointer; }
.art-racconto summary::-webkit-details-marker { display: none; }
/* La seconda riga sfuma verso destra: si capisce che continua. */
.art-racconto summary span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
                             -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 50%), linear-gradient(90deg, #000 45%, transparent 98%);
                             mask-image: linear-gradient(180deg, #000 50%, transparent 50%), linear-gradient(90deg, #000 45%, transparent 98%); }
.art-racconto summary::after { content: 'Leggi tutto'; display: inline-block; margin-top: 2px; font-size: var(--t2); font-weight: 600; color: #FFF; text-decoration: underline; text-underline-offset: 3px; }
.art-racconto[open] summary { display: none; }
.art-racconto p { margin: 0; }
/* I comandi in fondo, sopra un filo. */
.art-piede { padding: 0 var(--s8) var(--s6); }
.art-link { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding-top: var(--s4); border-top: 1px solid var(--bordo-tenue); }
@media (max-width: 700px) {
  /* come le altre finestre da telefono (05/11/2026, Mattia: "non c'e' piu' verso di chiuderlo, la x va sopra"): a tutto
     schermo la crocetta finiva sotto l'orologio. Una carta staccata dai bordi e dalle fasce dell'iPhone. */
  dialog.art-finestra { width: calc(100vw - 24px); margin: auto; border-radius: 18px;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
  .art-finestra-corpo { max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
  .art-corpo { grid-template-columns: 1fr; gap: var(--s5); padding: var(--s5) var(--s4); }
  .art-famiglia { gap: var(--s4); padding: var(--s4) 60px var(--s4) var(--s4); }
  .art-famiglia-img { width: 96px; height: 96px; }
  .art-famiglia-nome { font-size: 24px; }
  .art-racconto { display: none; }
  .art-piede { padding: 0 var(--s4) var(--s5); }
  .art-tecnici { grid-template-columns: repeat(2, auto); }
}

/* =============================================================================
   ANDAMENTO IN GRIGLIA (07/10/2026, Statistiche > scheda cliente: "fa un po'
   cacare, e' sporco e disallineato"). Il grafico e la tabella sotto hanno le
   STESSE colonne: a sinistra la colonna delle etichette (--etichette), poi un
   anno per colonna, uguali. Ogni barra sta sopra il suo anno; nella cella la
   cifra si appoggia a destra e il delta a sinistra della meta': la linea di
   mezzo e' quella della barra. L'intestazione della tabella fa da asse (gli
   anni sotto le barre non si ripetono); la legenda sta nello spazio vuoto a
   sinistra del grafico, sopra le etichette.
   ============================================================================= */
.andamento-corpo { --etichette: 150px; position: relative; }
.andamento-corpo .cliente-storia { position: relative; }
/* La riga dello zero e' uno SFONDO (07/10/2026): sta sotto le barre, non le
   taglia. Solo sotto le colonne degli anni, non sotto la legenda. */
.andamento-corpo .cliente-storia .storia { height: 250px; gap: 0; padding: var(--s6) var(--fianco) 0 calc(var(--fianco) + var(--etichette));
                                          background: linear-gradient(var(--bordo), var(--bordo)) no-repeat right var(--fianco) bottom 0 / calc(100% - 2 * var(--fianco) - var(--etichette)) 1px; }
.andamento-corpo .storia-etichetta { display: none; }
.andamento-corpo .storia-anno { grid-template-rows: minmax(0, 1fr); padding: 0 var(--s2); }
.andamento-corpo .storia-valore { font-size: var(--t4); font-weight: 650; color: var(--testo); }
.andamento-corpo .storia-anno.in-corso .storia-valore { color: var(--blu); }
.andamento-corpo .storia-valore.storia-valore-sopra, .andamento-corpo .storia-anno.in-corso .storia-valore.storia-valore-sopra { font-size: var(--t3); color: var(--ambra); }
/* DUE BARRE AFFIANCATE (07/10/2026): la blu e, accanto, l'ambra del
   portafoglio / da consegnare; ognuna con i suoi angoli, stessa scala. */

/* Affiancate fuori da Andamento (E-commerce, 22/10/2026): la colonna e' pila + anno, la pila prende l'altezza. */
.ecf-storia .storia-anno {  grid-template-rows: minmax(0, 1fr) auto; }
.storia-pila.affiancate { flex-direction: row; align-items: stretch; justify-content: center; gap: 14px; padding-top: 22px; }
/* Una colonnina per barra: la barra alta --h, la sua cifra appena sopra. */
.storia-colonnina { position: relative; display: flex; flex-direction: column; justify-content: flex-end; width: 40px; }
.storia-colonnina > .storia-barra { width: 100%; max-width: none; height: var(--h); align-self: stretch; border-radius: 7px 7px 2px 2px; }
.storia-colonnina > .storia-valore { position: absolute; left: 50%; bottom: calc(var(--h) + 4px); transform: translateX(-50%);
                                                       white-space: nowrap; font-size: var(--t3); }
.andamento-corpo .storia-barra.storia-barra-sopra { background: linear-gradient(180deg, #F7C873, #E9A23B); box-shadow: 0 1px 6px rgba(233, 162, 59, .25); }
.andamento-corpo .storia-anno.in-corso .storia-barra.storia-barra-sopra { background: linear-gradient(180deg, #F7C873, #E9A23B); }
/* La legenda, in basso a sinistra del grafico: sopra la colonna delle etichette. */
.andamento-corpo .storia-legenda { position: absolute; left: var(--fianco); bottom: var(--s3); width: calc(var(--etichette) - var(--s4));
                                   flex-direction: column; gap: 6px; padding: 0; }
/* La tabella: le stesse colonne. */
/* La tabella non tocca il grafico: un respiro sotto la riga dello zero, e le
   intestazioni tutte alte uguali (il 2026 "al 07/10" su due righe saliva). */
.andamento-corpo .anni-tabella { padding: var(--s8) var(--fianco) var(--s4); }
.andamento-corpo .anni-tabella thead th { height: 46px; vertical-align: top; padding-top: 8px; line-height: 1.2; }
.andamento-corpo .anni-tabella table { table-layout: fixed; }
.andamento-corpo .anni-tabella thead th:first-child { width: var(--etichette); }
.andamento-corpo .anni-tabella thead th { padding-left: 6px; padding-right: 6px; padding-bottom: 6px; text-align: center; font-size: var(--t3); color: var(--testo-2); }
.andamento-corpo .anni-tabella thead th small { font-size: var(--t1); }
.andamento-corpo .anni-tabella tbody th, .andamento-corpo .anni-tabella td { height: 42px; padding-top: 0; padding-bottom: 0; vertical-align: middle; }
.andamento-corpo .anni-tabella tbody th { padding-left: 0; font-size: var(--t3); }
.andamento-corpo .anni-tabella td.numero { padding: 0 6px 0 4px; text-align: right; }
.andamento-corpo .anni-tabella td.delta { width: auto; padding: 0 4px 0 6px; text-align: left; }
.andamento-corpo .anni-tabella:not(.con-delta) td.numero { text-align: center; }
.andamento-corpo .anni-tabella .corrente { background: color-mix(in srgb, var(--blu) 5%, transparent); }
.andamento-corpo .anni-tabella thead th.corrente { border-radius: 8px 8px 0 0; }
/* Il primo riquadro non si attacca alla testata (pagina e pannello). */
.cliente-sezione { margin-top: var(--s2); }
.andamento-corpo .anni-nota { padding-left: 0; }
@media (max-width: 700px) {
  .andamento-corpo { --etichette: 92px; }
  .andamento-corpo .storia-legenda { position: static; flex-direction: row; width: auto; padding: var(--s2) var(--fianco); }
  .andamento-corpo .storia-anno { padding: 0 2px; }
  .andamento-corpo .storia-valore { font-size: var(--t2); }
}

/* Il bollino "da verificare" che si clicca (Layout::statoContatto): apre la
   finestra di Verifica contatti. Si capisce che e' un comando dal cursore e
   dall'anello al passaggio, non da una sottolineatura. */
.segno-link { cursor: pointer; transition: box-shadow .15s; }
.segno-link:hover, .segno-link:focus-visible { box-shadow: 0 0 0 2px currentColor; outline: none; }

/* =============================================================================
   SCELTA SINGOLA O MULTIPLA, ovunque nel gestionale (09/10/2026: "la scelta
   multipla deve essere distinguibile rispetto alla singola"). Lo dice il tipo
   del campo, non una classe da ricordarsi: nelle pillole (.pillola, .filtro)
   un PALLINO se si sceglie una cosa sola (radio), un QUADRATINO se se ne
   scelgono piu' d'una (checkbox) - la convenzione dei moduli che tutti
   conoscono. Le tendine: quella normale ha la freccina, quella a caselle
   (.tendina-multipla) ha il quadratino.
   ============================================================================= */
.pillola:has(> input[type=radio])::before, .filtro:has(> input[type=radio])::before,
.pillola:has(> input[type=checkbox])::before, .filtro:has(> input[type=checkbox])::before,
.casella::before {
  content: ''; flex: none; box-sizing: border-box; width: 11px; height: 11px;
  border: 1.5px solid currentColor; opacity: .5;
}
.pillola:has(> input[type=radio])::before, .filtro:has(> input[type=radio])::before { border-radius: 50%; }
.pillola:has(> input[type=checkbox])::before, .filtro:has(> input[type=checkbox])::before, .casella::before { border-radius: 3px; }
.pillola:has(> input[type=radio]:checked)::before, .filtro:has(> input[type=radio]:checked)::before {
  opacity: 1; background: radial-gradient(currentColor 0 2.5px, transparent 3px);
}
/* Il quadratino spuntato: pieno, con la spunta ritagliata. */
.pillola:has(> input[type=checkbox]:checked)::before, .filtro:has(> input[type=checkbox]:checked)::before,
.casella:has(> input:checked)::before {
  opacity: 1; border: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cmask id='m'%3E%3Crect width='11' height='11' rx='3' fill='white'/%3E%3Cpath d='M2.8 5.7l1.9 1.9 3.6-3.9' stroke='black' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Crect width='11' height='11' rx='3' mask='url(%23m)'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cmask id='m'%3E%3Crect width='11' height='11' rx='3' fill='white'/%3E%3Cpath d='M2.8 5.7l1.9 1.9 3.6-3.9' stroke='black' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Crect width='11' height='11' rx='3' mask='url(%23m)'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}

/* La tendina a caselle: si apre sotto, le voci con il quadratino. */
.tendina-multipla { position: relative; }
.tendina-multipla > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
                              cursor: pointer; white-space: nowrap; overflow: hidden; }
.tendina-multipla > summary::-webkit-details-marker { display: none; }
.tendina-multipla > summary > span { overflow: hidden; text-overflow: ellipsis; }
.tendina-multipla > summary::after { content: ''; flex: none; width: 13px; height: 13px; border-radius: 3px; border: 1.5px solid var(--testo-3);
                                     box-shadow: 3px -3px 0 -1.5px var(--superficie), 3px -3px 0 0 var(--testo-3); margin-right: 2px; }
.tendina-multipla[open] > summary { border-color: var(--blu); }
/* Il campo che stringe una tendina lunga (i paesi): resta in cima mentre si scorre. */
.tendina-cerca { position: sticky; top: -6px; z-index: 1; width: 100%; margin-bottom: 4px; height: 30px; }
.tendina-multipla-voci label.casella[hidden] { display: none; }
.tendina-multipla-voci { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); max-height: 260px; overflow-y: auto;
                         display: flex; flex-direction: column; padding: 6px; border-radius: var(--raggio); background: var(--superficie);
                         border: 1px solid var(--bordo); box-shadow: var(--ombra-alta); }
/* DENTRO IL PANNELLO FILTRI (17/10/2026, Mattia: "le tendine dentro il popup filtri spariscono sotto e
   non sono usabili"): il pannello scorre e taglia cio' che galleggia; la lista allora si apre DENTRO,
   spinge giu' il resto e si vede intera, col suo scorrimento e il Cerca in cima. */
.filtri-pannello .tendina-multipla-voci { position: static; margin-top: 6px; max-height: 280px; box-shadow: none; }
.filtri-pannello .tendina-cerca { top: -6px; height: 36px; padding: 0 12px; margin-bottom: 6px; background: var(--superficie); box-shadow: 0 0 0 6px var(--superficie); }
/* Mai lo scorrimento orizzontale (17/10/2026): i nomi lunghi dei mandatari vanno a capo. */
.tendina-multipla-voci { overflow-x: hidden; }
.tendina-multipla-voci .casella { min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.tendina-multipla-voci .tendina-cerca { box-sizing: border-box; flex: none; }
.casella { position: relative; display: flex; align-items: center; gap: var(--s2); padding: 6px 8px; border-radius: 6px;
           font-size: var(--t2); color: var(--testo); cursor: pointer; }
.casella:hover { background: var(--sfiora); }
.casella:has(> input:checked) { color: var(--blu-scuro); font-weight: 500; }
.casella:has(> input:checked)::before { color: var(--blu); }
.casella > input { position: absolute; opacity: 0; pointer-events: none; }
.casella:has(> input:focus-visible) { outline: 2px solid var(--blu); outline-offset: -2px; }

/* =============================================================================
   STATISTICHE > TUTTI I CLIENTI (09/10/2026). Chi e' in una cella (logo,
   nome, sotto paese e commerciale), le cifre con una forma ciascuna.
   ============================================================================= */
table.tutti-clienti td { height: 64px; }
table.tutti-clienti tbody tr { transition: background .12s; }
table.tutti-clienti tbody tr:hover { background: var(--riga-sfiora); }
table.tutti-clienti .tc-pos { padding-right: 0; color: var(--testo-4); font-size: var(--t2); font-weight: 500; font-variant-numeric: tabular-nums; }
table.tutti-clienti td.tc-pos { font-size: var(--t2); font-weight: 500; letter-spacing: 0; }
.tc-chi { display: flex; align-items: center; gap: var(--s3); min-width: 0; color: inherit; }
.tc-logo { flex: 0 0 34px; height: 34px; display: grid; place-items: center; }
.tc-testi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tc-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--testo); }
.tc-chi:hover .tc-nome { color: var(--blu); }
.tc-sotto { display: flex; align-items: center; gap: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
            font-size: var(--t2); font-weight: 400; color: var(--testo-3); letter-spacing: 0; }
.tc-cifra { display: block; font-weight: 600; color: var(--testo); }
/* La barretta: quanto pesa il cliente rispetto al piu' grande. */
.tc-barra { display: block; height: 4px; margin: 6px 0 0 auto; width: 100%; max-width: 150px; border-radius: 2px; background: var(--sfiora); overflow: hidden; }
.tc-barra i { display: block; height: 100%; margin-left: auto; border-radius: 2px; background: linear-gradient(90deg, #8FB0FF, var(--blu)); }
.tc-prima { color: var(--testo-3); }
table.tutti-clienti td.tc-paese { font-size: var(--t3); color: var(--testo-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-pf { display: inline-flex; align-items: center; gap: 6px; color: var(--testo); }
.tc-pf::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ambra-vivo); }
/* Sul telefono: la scheda del cliente, con il nome in testa e le cifre sotto, etichettate. */
@media (max-width: 900px) {
  table.tutti-clienti td { height: auto; }
  table.tutti-clienti td.tc-pos { display: none; }
  table.tutti-clienti td.tc-chi-cella { display: block; text-align: left; margin: 0 0 var(--s2); font-size: var(--t4); }
  table.tutti-clienti td.tc-chi-cella::before { display: none; }
  table.tutti-clienti td.tc-chi-cella + td { margin-top: 0; }
  table.tutti-clienti .tc-barra { display: none; }
  table.tutti-clienti .tc-cifra { display: inline; }
}

/* IL GIRO DA TELEFONO (09/10/2026) */
@media (max-width: 900px) {
  /* La tabella anno per anno non si stringe fino ad accavallarsi: scorre di
     lato dentro il riquadro, con le etichette ferme a sinistra. */
  .andamento-corpo .anni-tabella table, .anni-tabella.con-delta table { min-width: 620px; table-layout: auto; }
  .anni-tabella tbody th, .anni-tabella thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--superficie); }
  .anni-tabella tbody th { white-space: normal; min-width: 96px; }
  /* Le sezioni a pillole scorrono di lato invece di uscire dallo schermo. */
  .stat-viste { max-width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .stat-viste::-webkit-scrollbar { display: none; }
  .stat-viste a { flex: 0 0 auto; }
  /* La nota nell'intestazione di un riquadro va a capo sotto il titolo. */
  .blocco-testa { flex-wrap: wrap; }
  .blocco-testa > .blocco-nota { order: 9; flex-basis: 100%; margin-left: 0; white-space: normal; padding-bottom: var(--s2); }
  /* Lo scheletro del caricamento non tocca i bordi. */
  .attesa-righe { padding: 0 var(--s4); }
}

/* La testata della scheda cliente nelle Statistiche, ridotta (12/10/2026):
   chi e', l'interruttore del gruppo, niente cifre. */
.scheda-testata.cliente-testata { padding: var(--s5) var(--s8); }
.cliente-testata .testata-nome { font-size: 32px; }
.cliente-testata .testata-vista { margin: var(--s4) 0 0; }
@media (max-width: 900px) { .scheda-testata.cliente-testata { padding: var(--s4) var(--s5); } .cliente-testata .testata-nome { font-size: 26px; } }

/* LE SEZIONI DELLA SCHEDA CLIENTE (Statistiche, 12/10/2026): quattro carte,
   ognuna con la sua tessera colorata; l'attiva in rilievo, tessera piena. */
.sezioni-scheda { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin: 0 var(--pagina) var(--s5); }
/* Due o tre sottosezioni (Vendite, Direzione: _sezioni.php): carte della stessa misura, non stirate. */
.sezioni-scheda.sezioni-n-2 { grid-template-columns: repeat(auto-fill, minmax(0, 320px)); }
/* Tre sezioni (la scheda statistica del cliente dal 17/10/2026) si dividono la riga. */
.sezioni-scheda.sezioni-n-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sezione-tab { --tinta: var(--blu); --tinta-tenue: var(--blu-tenue); position: relative; display: flex; align-items: center; gap: var(--s3);
               padding: var(--s3) var(--s4); border-radius: var(--raggio-g); background: color-mix(in srgb, var(--superficie) 55%, transparent);
               box-shadow: inset 0 0 0 1px var(--bordo-tenue); color: var(--testo-2); transition: background .15s, box-shadow .15s, transform .15s; }
.sezione-tab:hover { background: var(--superficie); box-shadow: inset 0 0 0 1px var(--bordo); color: var(--testo); }
.sezione-tab.tono-viola { --tinta: var(--viola); --tinta-tenue: color-mix(in srgb, var(--viola) 12%, var(--superficie)); }
.sezione-tab.tono-ambra { --tinta: var(--ambra); --tinta-tenue: var(--ambra-tenue); }
.sezione-tab.tono-verde { --tinta: var(--verde); --tinta-tenue: var(--verde-tenue); }
.sezione-tessera { flex: 0 0 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--tinta-tenue); color: var(--tinta);
                   transition: background .15s, color .15s; }
.sezione-testi { display: flex; flex-direction: column; min-width: 0; }
.sezione-testi b { font-size: var(--t4); font-weight: 600; color: var(--testo); }
.sezione-testi small { font-size: var(--t2); color: var(--testo-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sezione-tab .conta { margin-left: auto; }
/* Niente bordino colorato (bocciato sulle carte): rilievo, tessera piena, nome colorato. */
.sezione-tab.attiva { background: var(--superficie); box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 22px rgba(16, 24, 40, .10); }
.sezione-tab.attiva .sezione-tessera { background: var(--tinta); color: #FFF; }
.sezione-tab.attiva .sezione-testi b { color: var(--tinta); }
@media (max-width: 900px) {
  .sezioni-scheda { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 var(--s4) var(--s4); gap: var(--s2); }
  .sezione-tab { padding: var(--s2) var(--s3); }
  .sezione-testi small { display: none; }
}

/* La colonna della scheda articolo (12/10/2026): due riquadri ben distinti
   sotto la foto, i colori PRODOTTI (verde, carte grandi coi metri) e quelli
   CAMPIONATI (ambra, quadratini) - gli stessi colori dei livelli delle Scelte.
   Ognuno la sua tessera e il suo fondo tenue, niente bordini. */
.art-riquadro { --tinta: var(--testo-3); --tinta-tenue: var(--sfiora); margin-top: var(--s4); padding: var(--s3); border-radius: var(--raggio-g); background: var(--tinta-tenue); }
.art-riquadro.art-prodotti { --tinta: var(--verde); --tinta-tenue: var(--verde-tenue); }
.art-riquadro.art-campionati { --tinta: var(--ambra); --tinta-tenue: var(--ambra-tenue); }
.art-riquadro .art-titoletto { display: flex; align-items: center; gap: 8px; margin-bottom: var(--s2); color: var(--tinta); }
.art-tessera { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--tinta); color: #FFF; }
/* Le carte dei prodotti COMPATTE (12/10/2026: "recuperare spazio in altezza"):
   miniatura a sinistra, colore e metri a destra, due per riga. */
.art-prodotti .art-comprati-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: 300px; }
.art-prodotti .art-comprato { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 6px; align-items: center;
                              padding: 5px; background: var(--superficie); text-align: left; }
.art-prodotti .art-comprato-foto { grid-row: 1 / 3; width: 30px; height: 30px; aspect-ratio: auto; border-radius: 7px; }
.art-prodotti .art-comprato-col { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--t2); line-height: 1.2; }
.art-prodotti .art-comprato-metri { font-size: var(--t2); line-height: 1.2; font-weight: 600; color: var(--verde); }
.art-prodotti .art-comprato-col i { display: none; } /* il codice basta: "col." non ci sta */
/* Un campione senza foto: il riquadretto a righine, come i prodotti. */
.art-variante img[hidden] { display: none; }
.art-variante.senza-foto { background: repeating-linear-gradient(135deg, var(--sfiora-scuro), var(--sfiora-scuro) 4px, var(--superficie) 4px, var(--superficie) 8px); }
.art-riquadro .art-varianti { margin-top: 0; max-height: 210px; overflow-y: auto; padding: 2px; }

/* LE SCELTE A TRE LIVELLI (12/10/2026): scelto (grigio), a campione (ambra,
   coi colori), in produzione (verde, coi colori e i metri). */
.fiera-articolo.livello-1 { background: var(--ambra-tenue); color: var(--ambra); font-weight: 500; }
.fiera-articolo.livello-2 { background: color-mix(in srgb, var(--verde) 14%, transparent); color: var(--verde); font-weight: 500; }
.fiera-livello { font-style: normal; font-size: var(--t1); font-weight: 600; opacity: .85; white-space: nowrap; }
.fiera-n.livello-1 { color: var(--ambra); }
.fiera-n.livello-2 { color: var(--verde); }
.fiera-legenda { display: inline-flex; align-items: center; gap: 6px; }
.fiera-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--testo-4); margin-left: 6px; }
.fiera-dot.livello-1 { background: var(--ambra-vivo); }
.fiera-dot.livello-2 { background: var(--verde-vivo); }

/* Campionario in ambra, ovunque si parli di colori e metri (12/10/2026). */
.colori-campionati { color: var(--ambra); }
.metri-campione { font-size: var(--t2); font-weight: 600; color: var(--ambra); }

/* Articoli ordinati: i colori in due numeri con la tessera (12/10/2026). */
.colori-conto { display: inline-flex; align-items: center; gap: 3px; margin-right: 8px; font-weight: 600; }
.colori-conto svg { flex: none; }
.colori-prodotti { color: var(--verde); }

/* La foto della scheda articolo si ingrandisce al clic (12/10/2026). */
a.art-foto-cornice { display: block; cursor: zoom-in; }
a.art-foto-cornice.senza-foto { cursor: default; }

/* Il terzo riquadro della scheda articolo, i TIPI INVIATI (viola), e il
   tastino per ridurli tutti (lo stesso dei riquadri, effetti.js). */
.art-riquadro.art-tipi { --tinta: var(--viola); --tinta-tenue: var(--viola-tenue); }
.art-riquadro-testa { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s2); }
.art-riquadro-testa .art-titoletto { margin: 0; }
.art-riquadro-testa .blocco-riduci { color: var(--tinta); }
.art-riquadro-testa .blocco-riduci:hover { background: var(--superficie); color: var(--tinta); }
.art-riquadro.compatto > :not(.art-riquadro-testa) { display: none !important; }
.art-riquadro.compatto > .art-riquadro-testa { margin-bottom: 0; }
.art-riquadro.compatto > header > .blocco-riduci svg { transform: rotate(-90deg); }

/* LA STORIA DEL COLORE nella scheda articolo (12/10/2026): le tappe una sotto
   l'altra, la tessera del riquadro (tipo viola, campione ambra, produzione
   verde) su un filo che le lega, cosa e quanto a sinistra, la data a destra. */
.art-storia { margin-top: var(--s4); padding: var(--s3); border-radius: var(--raggio-g); background: var(--sfiora); max-width: 420px; }
.art-storia[hidden] { display: none; }
.art-storia-titolo { margin: 0 0 var(--s2); font-size: var(--t3); font-weight: 600; color: var(--testo-2); }
.art-storia-prima { margin: 0 0 4px 30px; font-size: var(--t2); color: var(--testo-3); }
.art-storia ol { position: relative; margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.art-storia ol::before { content: ''; position: absolute; left: 10px; top: 10px; bottom: 10px; width: 2px; border-radius: 1px; background: var(--sfiora-scuro); }
.art-tappa { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: var(--t3); }
.art-tappa .art-tessera { width: 22px; height: 22px; border-radius: 7px; box-shadow: 0 0 0 3px var(--sfiora); }
.art-tappa-tipo { --tinta: var(--viola); }
.art-tappa-camp { --tinta: var(--ambra); }
.art-tappa-prod { --tinta: var(--verde); }
.art-tappa-cosa { color: var(--testo); }
.art-tappa-cosa b { margin-left: 4px; font-weight: 600; color: var(--tinta); }
.art-tappa-quando { display: inline-flex; align-items: baseline; gap: 8px; font-size: var(--t2); color: var(--testo-3); white-space: nowrap; }
.art-tappa-quando small { font-size: var(--t1); color: var(--testo-4); }
/* Altre tappe dietro "Mostra altri": le ultime visibili sfumano. */
.art-storia ol:has(+ [data-mostra-pulsante]) { -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
/* Al posto di "Mostra altri N" una freccetta in giu', piccola e al centro
   (12/10/2026: il + "fa schifo"); il testo resta per lo screen reader. */
.art-storia [data-mostra-pulsante] { display: grid; place-items: center; width: 28px; height: 16px; margin: 0 auto; padding: 0;
                                    border: 0; border-radius: 6px; background: none; color: var(--testo-4); font-size: 0; cursor: pointer; }
.art-storia [data-mostra-pulsante]::before { content: ''; width: 6px; height: 6px; margin-top: -3px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.art-storia [data-mostra-pulsante]:hover { color: var(--blu); }
.art-storia { padding: var(--s2) var(--s3); }

/* I marchi delle fibre accanto al nome dell'articolo (12/10/2026). */
.art-nome { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.art-nome .art-segno { letter-spacing: 0; line-height: 1.4; }
.art-tappa-coll { margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-style: normal; font-size: var(--t1); font-weight: 600; background: var(--superficie); color: var(--testo-3); }
/* Le tappe aperte col + scendono, una dopo l'altra (12/10/2026). */
@keyframes art-scende { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.art-storia .appena-mostrata { animation: art-scende .22s var(--curva) both; }
@media (prefers-reduced-motion: reduce) { .art-storia .appena-mostrata { animation: none; } }
/* Le scelte in fiera (12/10/2026): grigie, come lo scelto senza seguito delle Scelte. */
.art-tappa-scelta { --tinta: var(--testo-3); }
.art-tappa-scelta .art-tappa-coll { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.art-scelto { --tinta: var(--testo-3); display: flex; align-items: center; gap: 8px; margin: var(--s3) 0 0; font-size: var(--t3); color: var(--testo-2); }
.art-scelto .art-tessera { width: 22px; height: 22px; flex: none; }
.art-scelto small { color: var(--testo-3); }

/* LA SITUAZIONE COMMERCIALE (0097): il foglio del presidente, fitto come
   quello di prima. Una tabella vera anche sul telefono (si scorre di lato:
   sedici colonne non diventano schede). I due anni separati da un filo,
   il totale appena piu' scuro. In stampa: orizzontale, senza menu. */
table.situazione { width: 100%; border-collapse: collapse; font-size: var(--t2); font-variant-numeric: tabular-nums; }
table.situazione th, table.situazione td { padding: 6px 8px; border-bottom: 1px solid var(--bordo-tenue); white-space: nowrap; }
table.situazione th { font-weight: 600; color: var(--testo-3); text-align: center; }
table.situazione .sit-anni th { font-size: var(--t3); color: var(--testo); }
table.situazione td { color: var(--testo-2); }
table.situazione .numero { text-align: right; }
table.situazione .sit-data { color: var(--testo); font-weight: 600; }
table.situazione .sit-totale { color: var(--testo); font-weight: 600; }
/* Il filo fra periodo, anno prima, quest'anno e variazioni (righe: colonne 2, 9 e 16). */
table.situazione:not(.sit-zone, .sit-conferme) tbody td:nth-child(2), table.situazione:not(.sit-zone, .sit-conferme) tbody td:nth-child(10),
table.situazione:not(.sit-zone, .sit-conferme) tbody td:nth-child(18),
table.situazione .sit-anni th + th { border-left: 1px solid var(--bordo); }
/* I DUE ANNI PIU' SEPARATI (27/10/2026, Mattia: "un modo grafico per rendere i due anni piu' separati, senza stravolgere"):
   un filo piu' marcato fra un anno e l'altro e l'anno prima appena tinto; uguale nel PowerPoint (StatsController). */
table.situazione:not(.sit-zone, .sit-conferme) tbody td:nth-child(10), table.situazione .sit-anni th.sit-anno-prima + th { border-left: 2px solid #98A2B3; }
table.situazione:not(.sit-zone, .sit-conferme) tbody td:nth-child(n+2):nth-child(-n+9), table.situazione .sit-anni th.sit-anno-prima,
table.sit-zone td.sit-prima { background: rgba(16, 24, 40, .035); }
table.sit-zone tbody td:nth-child(4) { border-left: 2px solid #98A2B3; }
/* Il prezzo medio di vendita (27/10/2026): viola, come la tinta del prezzo nel PowerPoint. */
table.situazione .sit-prezzo { color: var(--tinta); }   /* il tono del prezzo (ReportFigures) */
.exe-pausa { display: block; font-size: var(--t2); color: var(--testo-3); }   /* i mesi senza produzione di un recuperato */
.sit-anno-prezzo { display: inline-block; margin-top: 4px; padding: 1px 7px; border-radius: 999px; background: var(--tinta-tenue); color: var(--tinta);
  font-size: var(--t1); font-weight: 600; white-space: nowrap; }
.sit-anno-prezzo small { font-weight: 400; opacity: .8; }
/* PER ZONA E CONFERME DELLA SETTIMANA (26/10/2026, le pagine 2-4 del foglio di Franco): il filo fra i gruppi di due
   colonne, le righe dei totali appena piu' scure, la differenza in verde o rosso; nelle conferme articolo e clienti
   vanno a capo. */
table.sit-zone tbody td:nth-child(2n) { border-left: 1px solid var(--bordo); }
table.situazione .sit-somma > * { background: var(--riga-sfiora); color: var(--testo); font-weight: 600; }
table.situazione .sit-su { color: var(--verde); }
table.situazione .sit-giu { color: var(--rosso); }
table.sit-conferme th { text-align: left; }
table.sit-conferme th.numero { text-align: right; }
table.sit-conferme .sit-lungo { white-space: normal; min-width: 140px; }
.sit-nota { margin: 0 var(--pagina) var(--s3); color: var(--testo-3); font-size: var(--t2); }
.sit-settimana { margin-bottom: 16px; }
.sit-settimana-testa { margin: 0; padding: var(--s3) var(--s4) var(--s2); font-size: var(--t3); font-weight: 600; }
.sit-settimana-testa span { margin-left: 8px; color: var(--testo-3); font-weight: 400; font-size: var(--t2); }
table.situazione .sit-periodo { text-align: left; color: var(--testo); font-weight: 600; }
table.situazione tbody tr:hover { background: var(--riga-sfiora); }
@media print {
  @page { size: landscape; margin: 10mm; }
  body:has(table.situazione) .nav, body:has(table.situazione) .testata-schede, body:has(table.situazione) .stat-viste-riga { display: none; }
  body:has(table.situazione) .contenuto, body:has(table.situazione) .riquadro { margin: 0; padding: 0; box-shadow: none; }
  table.situazione { font-size: 9pt; }
  table.situazione th, table.situazione td { padding: 2px 4px; }
}
/* Il taglio disponibile sotto il nome dell'articolo (12/10/2026): in verde, coi metri. */
.art-taglio b { font-weight: 600; color: var(--verde); }
.art-taglio[hidden] { display: none; }

/* LE PROPOSTE (0098): l'avviso nel menu e, sulle carte dei Modelli, chi deve
   mandarlo (ambra) e a chi e' proposto (le pastiglie dei commerciali). */
.nav-avviso { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: auto; padding: 0 5px; border-radius: 999px;
              background: #F04438; color: #FFF; font-size: 11px; font-weight: 700; font-style: normal; line-height: 1; }
.nav-figlio .nav-avviso { margin-left: 6px; }
.nav-avviso[hidden] { display: none; }
/* Il nome della voce su una riga sola (02/11/2026: "Verifica contatti" col 373 andava a capo); l'avviso sopra 99 e' "99+". */
.nav-voce > span { white-space: nowrap; }
.nav-voce .nav-freccia { margin-left: 6px; }
.mail-modello-carta.da-mandare { box-shadow: 0 0 0 2px var(--ambra-bordo), 0 8px 24px rgba(181, 71, 8, .10); }
.mail-proposta { display: flex; flex-direction: column; gap: 3px; margin-top: var(--s1); padding: var(--s2) var(--s3); border-radius: 10px;
                 background: var(--ambra-tenue); color: var(--ambra); font-size: var(--t2); }
.mail-proposta b { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t3); }
.mail-proposta small { color: var(--testo-3); }
.mail-proposta form { margin: 2px 0 0; }
.mail-proposta-no { padding: 0; border: 0; background: none; color: var(--testo-3); font-size: var(--t2); text-decoration: underline; cursor: pointer; }
.mail-proposta-no:hover { color: var(--testo); }
.mail-proposta-mia { background: var(--sfiora); color: var(--testo-2); }
.mail-modello-azioni { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.camp-commerciali { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.camp-chi { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: var(--t2); font-weight: 600; }
.camp-mandata { background: var(--verde-tenue); color: var(--verde); }
.camp-scartata { background: var(--sfiora); color: var(--testo-3); }
.camp-da-mandare { background: var(--ambra-tenue); color: var(--ambra); }
.camp-modulo { display: grid; gap: var(--s4); }
.camp-campo { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; font-size: var(--t3); color: var(--testo-2); }
.camp-campo legend, .camp-campo > span { font-weight: 600; color: var(--testo); margin-bottom: 4px; }
.camp-campo small { font-weight: 400; color: var(--testo-3); }
.camp-scelta { display: flex; align-items: center; gap: 8px; }
.camp-caselle { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-left: 26px; }
.camp-casella { display: inline-flex; align-items: center; gap: 6px; }

/* "A chi" in due schede (12/10/2026): Coi filtri (la principale) e Cerca. */
.mail-achi-schede { display: inline-flex; width: fit-content; gap: 2px; margin: 0 0 var(--s3); padding: 3px; border-radius: 12px; background: var(--sfiora); }
.mail-achi-schede button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 0; border-radius: 9px; background: none;
                           color: var(--testo-2); font: inherit; font-size: var(--t3); font-weight: 600; cursor: pointer; }
.mail-achi-schede button:hover { color: var(--testo); }
.mail-achi-schede button.attiva { background: var(--superficie); color: var(--testo); box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
.mail-filtri[hidden], .mail-cerca[hidden] { display: none; }
/* I FILTRI DEI DESTINATARI (_filtri-destinatari.php): in cima la barra col
   numero, grande, e il pulsante; sotto i filtri aperti, in colonne. */
.mail-filtri-barra { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--s3); margin: 0 0 var(--s3);
                     padding: var(--s3) var(--s4); border-radius: var(--raggio-g); background: var(--blu-tenue); }
.mail-filtri-conto { flex: 1 1 auto; display: flex; align-items: baseline; gap: 8px; color: var(--testo-2); font-size: var(--t3); }
.mail-filtri-conto b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--blu-scuro); font-variant-numeric: tabular-nums; transition: opacity .15s; }
.mail-filtri.in-conto .mail-filtri-conto b { opacity: .45; }
.mail-filtri-togli { padding: 0; border: 0; background: none; color: var(--blu); font: inherit; font-size: var(--t3); cursor: pointer; }
.mail-filtri-togli[hidden] { display: none; }
.mail-filtri-aggiungi { height: 40px; }
.filtri-in-linea { display: block; margin: 0; padding: 0; background: none; }
.filtri-in-linea .filtri-pannello { position: static; width: auto; max-height: none; overflow: visible; padding: 0; border-radius: 0;
                                    background: none; box-shadow: none; animation: none; }
.filtri-in-linea .filtri-sezioni { gap: 0 var(--s5); }
@media (max-width: 900px) { .filtri-in-linea .filtri-sezioni { grid-auto-flow: row; } .filtri-in-linea .filtri-sezione + .filtri-sezione { padding-left: 0; box-shadow: none; }
  .mail-filtri-barra { flex-wrap: wrap; } }
/* Il riquadro dei filtri COMPATTO: i filtri scelti in pastiglie, e "Tutti i filtri". */
.mail-filtri-scelti { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.mail-filtri-pastiglie { display: contents; }
.mail-filtri .filtro-attivo { border: 0; cursor: pointer; font: inherit; font-size: var(--t2); }
.mail-filtri .filtro-attivo { background: var(--blu-tenue); color: var(--blu-scuro); }
.mail-filtri .filtro-attivo span { color: var(--blu); }
.mail-filtri .filtro-attivo:hover { background: color-mix(in srgb, var(--blu) 18%, var(--superficie)); color: var(--blu-scuro); }
.mail-filtri-nessuno { color: var(--testo-3); font-size: var(--t3); }
.mail-filtri-espandi { display: inline-flex; align-items: center; gap: 6px; height: 30px; margin-left: auto; padding: 0 12px; border: 1px solid var(--bordo);
                       border-radius: 999px; background: var(--superficie); color: var(--testo); font: inherit; font-size: var(--t3); font-weight: 600; cursor: pointer; }
.mail-filtri-espandi:hover { background: var(--sfiora); }
.mail-filtri-espandi[aria-expanded="true"] { background: var(--blu-tenue); border-color: var(--blu); color: var(--blu-scuro); }
.mail-filtri-tutti { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--bordo-tenue); }
.mail-filtri-tutti[hidden] { display: none; }
/* "Riscrivi come me" (0100) e la pagina Il mio stile. */
.mail-riscrivi { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s3); }
.mail-riscrivi-stile { font-size: var(--t2); color: var(--testo-3); }
.mail-stile-punti { margin: var(--s3) 0 0; padding-left: 18px; display: grid; gap: 6px; color: var(--testo-2); font-size: var(--t3); }
.stile-lingua { margin: 0 0 var(--s4); }
.stile-lingua h3 { margin: 0 0 var(--s2); font-size: var(--t4); }
.stile-lingua dl { display: grid; grid-template-columns: 140px 1fr; gap: 6px var(--s3); margin: 0; font-size: var(--t3); }
.stile-lingua dt { color: var(--testo-3); }
.stile-lingua dd { margin: 0; color: var(--testo); }
.stile-regole { width: 100%; min-height: 260px; font: inherit; font-size: var(--t3); }
.stile-azioni { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }
/* A quali commerciali (editor della campagna): "Tutti" in testa; accanto al
   nome il segno di a che punto e' (mandata / non la manda / non ancora). */
.commerciali-chi { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s2); }
.commerciali-tutti { font-weight: 700; margin-right: 6px; }
.commerciali-stato { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; margin-left: 2px; }
/* Chi ha gia' ricevuto la campagna: resta fuori, una spunta per mandarla anche a loro. */
.mail-gia-ricevuta { display: flex; align-items: flex-start; gap: var(--s2); margin: var(--s3) 0; padding: var(--s2) var(--s3); border-radius: var(--raggio); background: var(--ambra-tenue); color: var(--testo-2); font-size: var(--t3); cursor: pointer; }
.mail-gia-ricevuta input { margin-top: 2px; }
/* MANDA UNA PROVA: il riquadrino "A", sotto il pulsante (13/10/2026). */
.mail-prova-a { position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; display: grid; grid-template-columns: 1fr auto; gap: var(--s2); width: min(380px, calc(100vw - 32px));
                padding: var(--s3); border-radius: var(--raggio-g); background: var(--superficie); box-shadow: var(--ombra-alta), 0 0 0 1px var(--bordo); color: var(--testo); }
.mail-prova-a[hidden] { display: none; }
.mail-prova-a label { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.mail-prova-a label span { color: var(--testo-3); font-size: var(--t3); font-weight: 600; }
.mail-prova-a .campo { flex: 1; min-width: 0; }
.mail-prova-a small { grid-column: 1 / -1; color: var(--testo-3); font-size: var(--t2); }
.mail-testata-azioni, .mail-manda { position: relative; }
/* In fondo alla scrittura il riquadro taglia quello che sporge: li' si apre sopra. */
.mail-manda .mail-prova-a { top: auto; bottom: calc(100% + 8px); }
/* Con chi di noi l'ultimo scambio, nel polso (scheda marchio, 13/10/2026). */
.polso-chi { color: var(--testo-2); }

/* USCITE E COLLABORAZIONI (0117), terzo giro (13/10/2026): righe come lo
   storico - la data da calendario, il titolo che apre la finestra, che cosa,
   con chi e il sito, la descrizione; a destra la miniatura, che e' la
   galleria delle sue pagine. Le stesse righe nella scheda contatto. */
/* LA RIGA (14/10/2026, seconda volta: "il badge galleggiante col link e'
   brutto"): l'immagine a sinistra (la pagina, o l'icona di che cos'e'), il
   titolo, una riga di testo semplice coi punti - quando, che cosa, il sito,
   con chi - e la descrizione. Niente gettoni ne' riquadri della data. */
/* LE CARD ("anche le card devono essere piu' cool"): ognuna un riquadro
   bianco con la sua ombra, che si alza passandoci sopra; l'immagine grande a
   sinistra, a tutta altezza della card. */
.uscite-righe { gap: var(--s2); }
/* LA MINIATURA A MISURA FISSA (18/10/2026, Mattia: "quando e' lunghissimo non si capisce
   niente"): un riquadro orizzontale uguale per tutte, con la testa della pagina (testata e
   titolo); la pagina intera al clic. Prima prendeva l'altezza della schermata e ogni riga
   era alta a modo suo. */
.uscita-riga { position: relative; grid-template-columns: 112px minmax(0, 1fr); column-gap: var(--s4); align-items: center;
               padding: var(--s2); border: 0; border-radius: 12px; background: var(--superficie);
               box-shadow: 0 0 0 1px var(--bordo-tenue), 0 1px 2px rgba(16, 24, 40, .04);
               transition: transform .15s, box-shadow .15s; }
.uscite-righe > .uscita-riga + .uscita-riga { border-top: 0; }
.uscita-riga:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--blu) 30%, var(--bordo)), 0 10px 22px -14px rgba(16, 24, 40, .35); }
.uscita-lato { width: 112px; align-self: start; }
.uscita-miniatura, .uscita-icona { position: relative; display: grid; place-items: center; width: 112px; height: 76px; border-radius: 9px; overflow: hidden;
                                   background: radial-gradient(120% 120% at 30% 20%, #FBFBFC, #EEF0F3); box-shadow: inset 0 0 0 1px var(--bordo-tenue); }
.uscita-icona { color: var(--blu); background: linear-gradient(150deg, #EEF3FE, #DDE7FC); box-shadow: none; }
.uscita-icona svg { width: 26px; height: 26px; opacity: .85; }
.uscita-miniatura img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .25s; }
.uscita-miniatura:hover img { transform: scale(1.06); }
.uscita-pdf { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--rosso); }
.uscita-pagine { position: absolute; right: 3px; bottom: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
                 background: rgba(14, 27, 44, .78); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.uscita-testo { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.uscita-titolo { font-size: var(--t4); font-weight: 600; color: var(--testo); line-height: 1.35;
                 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.uscita-titolo:hover { color: var(--blu); }
.uscita-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin-top: 2px; font-size: var(--t2); color: var(--testo-3); }
.uscita-meta .sep { color: var(--testo-4); }
.uscita-meta .k { color: var(--testo-4); }
.uscita-meta a { color: var(--testo-2); }
.uscita-meta a:hover { color: var(--blu); }
.uscita-sopra { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s2); font-size: var(--t2); color: var(--testo-3); }
.uscita-sopra a { color: var(--testo-2); }
.uscita-quando { color: var(--testo-3); white-space: nowrap; }
.uscita-tipo { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px;
               background: var(--blu-tenue); color: var(--blu-scuro); font-size: var(--t1); font-weight: 700; letter-spacing: .02em; }
.uscita-link { display: inline-flex; align-items: center; gap: 4px; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uscita-link svg { flex: 0 0 auto; color: var(--testo-4); }
.uscita-descrizione { margin: 0; font-size: var(--t2); line-height: 1.45; color: var(--testo-3);
                      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uscite-blocco .blocco-testa { align-items: center; }
.uscite-nuova { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; height: 26px; padding: 0 10px;
                border-radius: 999px; background: var(--blu-tenue); color: var(--blu-scuro); font-size: var(--t2); font-weight: 600; white-space: nowrap;
                border: 0; font-family: inherit; line-height: 1; cursor: pointer; text-decoration: none; }   /* uguale da link e da bottone (29/10/2026: "+ Foto" aveva il bordo del browser) */
.uscite-nuova:hover { background: var(--blu); color: #fff; }
.fc > .blocco-testa .blocco-titolo, .tessuti > .blocco-testa .blocco-titolo { white-space: nowrap; }   /* titolo su una riga, col bottone accanto */
.uscite-vuoto { display: flex; flex-direction: column; align-items: center; gap: var(--s3); padding: var(--s6) var(--fianco); color: var(--testo-3); }
.uscite-vuoto p { margin: 0; }
.uscite-box .filtri-pillole { margin-bottom: var(--s2); }
.uscita-tipi-link { margin-left: var(--s2); font-size: var(--t2); color: var(--testo-3); }
.uscita-tipi-link:hover { color: var(--blu); }
/* LA FINESTRA DI UN'USCITA (14/10/2026): quattro parti col loro titoletto,
   separate da un filo; le persone pastiglie in colonne (le scelte blu). */
dialog.scheda.uscita-finestra { width: min(720px, calc(100vw - 32px)); }
.uscita-modulo { display: grid; gap: var(--s5); align-content: start; }
.uscita-parte { display: grid; gap: var(--s3); margin: 0; padding: 0; border: 0; min-width: 0; }
.uscita-parte + .uscita-parte { padding-top: var(--s5); border-top: 1px solid var(--bordo-tenue); }
/* La legenda fuori dal bordo (float): se no il browser la disegna sul filo che separa le parti. */
.uscita-parte > legend { float: left; width: 100%; margin: 0; padding: 0; font-size: var(--t1); font-weight: 700; letter-spacing: .06em;
                         text-transform: uppercase; color: var(--testo-4); }
.uscita-modulo label { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: var(--t2); color: var(--testo-3); }
.uscita-modulo small { color: var(--testo-4); }
.uscita-modulo .campo { color: var(--testo); }
.uscita-tre { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); }
.uscita-etichetta { display: block; font-size: var(--t2); color: var(--testo-3); }
.uscita-chi-testa { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.uscita-cerca { width: 220px; height: 32px; font-size: var(--t3); }
.uscita-scelte { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.uscita-scelte + .uscita-etichetta { margin-top: var(--s2); }
.uscita-modulo label.uscita-chi { flex-direction: row; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 4px; min-width: 0;
                                  border: 1px solid var(--bordo); border-radius: 999px; background: var(--superficie); color: var(--testo);
                                  font-size: var(--t3); cursor: pointer; transition: background .12s, border-color .12s; }
.uscita-chi:hover { border-color: var(--bordo-forte); background: var(--sfiora); }
.uscita-chi input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.uscita-chi .avatar { flex: 0 0 auto; width: 28px; height: 28px; font-size: 11px; }
.uscita-chi-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uscita-modulo label.uscita-chi:has(input:checked) { border-color: var(--blu); background: var(--blu-tenue); color: var(--blu-scuro); font-weight: 600; }
.uscita-chi:has(input:checked) .avatar { background: var(--blu) !important; color: #FFF !important; }
.uscita-chi:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--blu-tenue); border-color: var(--blu); }
.uscita-chi[hidden] { display: none !important; }
/* GLI AUTORI AGGIUNTI (27/10/2026): trovati fra tutti i contatti o battezzati, come le pastiglie spuntate, con la x per
   toglierli; il "nuovo" dice che nascera' al salvataggio. "Crea «...»" in fondo al cercatore, col +. */
.uscita-aggiunti:empty { display: none; }
.uscita-aggiunto { border-color: var(--blu); background: var(--blu-tenue); }
.uscita-aggiunto .avatar { background: var(--blu) !important; color: #FFF !important; }
.uscita-nuovo { flex: none; padding: 0 6px; border-radius: 999px; background: var(--verde-tenue); color: var(--verde); font-size: var(--t1); font-weight: 600; }
.uscita-togli { flex: none; margin-left: auto; width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: var(--testo-3); font-size: 16px; line-height: 1; cursor: pointer; }
.uscita-togli:hover { background: var(--sfiora-scuro); color: var(--testo); }
.pesca-crea .pesca-piu { background: var(--verde-tenue) !important; color: var(--verde) !important; font-weight: 700; }
.pesca-crea .censire-testi b { color: var(--verde); }
.uscita-gia { display: grid; gap: var(--s3); margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--bordo-tenue); }
@media (max-width: 560px) {
  .uscita-tre { grid-template-columns: 1fr 1fr; }
  .uscita-tre > label:first-child { grid-column: 1 / -1; }
  .uscita-chi-testa { flex-wrap: wrap; }
  .uscita-cerca { width: 100%; }
  .uscita-scelte { grid-template-columns: 1fr 1fr; }
}
.uscite-tipi-elenco { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.uscite-tipi-elenco li { display: flex; align-items: center; gap: var(--s3); }
.uscite-tipi-elenco li.spento .campo { color: var(--testo-4); text-decoration: line-through; }
.uscite-tipi-elenco .aggiungi-riga { flex: 1 1 auto; }
.uscite-tipi-uso { flex: 0 0 auto; font-size: var(--t2); color: var(--testo-3); }
.uscite-tipi-nuovo { margin-top: var(--s4); }

/* I conti sulla carta di una persona (redazioni e scuole): uscite seguite e
   regali ricevuti, sotto il nome. Ambra se l'ultimo e' di quest'anno, grigi se prima. */
.persona-conti { display: flex; gap: 4px; margin-top: 3px; }
.persona-conto { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px;
                 border-radius: 999px; background: var(--sfiora-scuro); color: var(--testo-3); font-size: var(--t2); font-weight: 500; }
/* I TONI DEI BADGE (13/10/2026): un colore per cosa, gli stessi dello storico e
   della scheda articolo - blu le uscite e i progetti, rosa le visite e i regali,
   ambra i tessuti (come i campionati). Grigi tutti, se l'ultimo e' degli anni prima. */
.persona-conto.quest-anno { background: var(--ambra-tenue); color: var(--ambra); }
.persona-conto.tono-blu.quest-anno { background: var(--blu-tenue); color: var(--blu-scuro); }
.persona-conto.tono-rosa.quest-anno { background: var(--rosa-tenue); color: var(--rosa); }
.cob-stato-4.tono-blu { background: linear-gradient(145deg, #6EA6FF, var(--blu)); box-shadow: 0 2px 6px rgba(37, 99, 235, .3); }
.cob-stato-4.tono-rosa { background: linear-gradient(145deg, #F383B6, var(--rosa-vivo)); box-shadow: 0 2px 6px rgba(194, 38, 111, .28); }

/* IL COMMERCIALE, la stessa colonna in ogni elenco (Layout::salesRep,
   13/10/2026): una riga, il primo nome e "+1"; ci sta "Simona Gonfiantini". */
table.elenco col.col-commerciale { width: 164px; }
table.elenco td .cella-commerciale { font-size: var(--t4); }
.cella-commerciale { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; vertical-align: middle; }
.cella-commerciale > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.piu-altri { flex: 0 0 auto; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--sfiora-scuro);
             color: var(--testo-3); font-size: 11px; font-weight: 600; line-height: 18px; cursor: help; }

/* LA TESTATA SENZA FACCIA (redazioni e scuole: niente marchi, 13/10/2026): il
   nome a sinistra sul filo dei dati sotto, i contrassegni a destra. */
.testata-capo.senza-faccia { grid-template-columns: minmax(0, 1fr) auto; }
/* LA FRECCIA PER TORNARE INDIETRO a sinistra del marchio, nella scheda statistica del cliente (30/10/2026): un cerchio di vetro
   come i tasti della testata, che al passaggio si accende e scivola appena a sinistra. */
.cliente-testata .testata-capo { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.testata-indietro { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #FFF; text-decoration: none;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); transition: background .15s, transform .15s, border-color .15s; }
.testata-indietro:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .32); transform: translateX(-2px); color: #FFF; }
.testata-indietro:focus-visible { outline: 2px solid #FFF; outline-offset: 2px; }
@media print { .testata-indietro { display: none; } }
@media (max-width: 1360px) {
  .testata-capo.senza-faccia .testata-segni { grid-column: 1; }
}

/* ---------------------------------------------------------------------------
   IL TELEFONO, SECONDO GIRO (13/10/2026: "da mobile e' un disastro").
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* La nota della testata di un riquadro ("49 persone", "27 uscite") resta
     sulla riga del titolo, corta: sotto, a tutta larghezza, era una striscia. */
  .blocco-testa { flex-wrap: nowrap; }
  /* Il titolo resta intero ("Tessuti acqu..." non si legge): si accorcia la nota (14/10/2026). */
  .blocco-testa > .blocco-nota { order: 0; flex: 0 1 auto; margin-left: auto; padding-bottom: 0; min-width: 0;
                                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .blocco-testa > .blocco-titolo { flex-shrink: 0; white-space: nowrap; }
  /* Le carte delle persone: alte quanto serve, non quanto sul computer. */
  .persone-griglia > .persona-carta, .persone-fila > .persona-carta { height: auto; min-height: 96px; }
  /* Negli elenchi a schede il filo fra le icone e i dati non serve: e' una colonna. */
  table.elenco .gruppo-fine { border-right: 0; padding-right: 0; }
  table.elenco .gruppo-fine + th, table.elenco .gruppo-fine + td { padding-left: 0; }
  /* La riga di un'uscita sul telefono: l'immagine piu' piccola, niente descrizione. */
  .uscita-riga { grid-template-columns: 84px minmax(0, 1fr); column-gap: var(--s3); }
  .uscita-lato, .uscita-miniatura, .uscita-icona { width: 84px; }
  .uscita-miniatura, .uscita-icona { height: 58px; }
  .uscita-descrizione { display: none; }
  /* Il conto lo dice gia' il titolo della sezione: resta il bottone, il titolo intero. */
  .uscite-blocco .blocco-testa > .blocco-nota { display: none; }
  /* La barra in fondo e l'ultima riga sopra il tasto Home dell'iPhone. */
  .nav { padding-bottom: env(safe-area-inset-bottom, 0px); }
  /* LA BARRA FINO AL BORDO (04/11/2026, Mattia: "il menu in basso fa vomitare"): sull'iPhone, da app installata, la
     finestra finisce prima del fondo dello schermo e li' sotto non si disegna niente, si vede solo lo sfondo della
     pagina (la striscia grigia). Lo sfondo di html diventa il blu della barra, il grigio resta sul body; e il margine
     per il tasto Home si accorcia di quanto e' gia' quel buco (effetti.js lo misura in --buco-sotto). */
  .nav { padding-bottom: max(0px, calc(env(safe-area-inset-bottom, 0px) - var(--buco-sotto, 0px))); }
  .contenuto { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* DA WEBAPP (aggiunta alla schermata Home): la pagina sta sotto la barra di
   stato (black-translucent), che si appoggia su una fascia blu notte. */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top, 0px); }
  /* FERMA COME UN'APP (27/10/2026, Mattia: "da orizzontale mi crea uno scroll verticale insopportabile... dovrebbe
     fissare l'app come una vera app"): la fascia della barra di stato piu' il menu alto quanto lo schermo sforavano
     sempre di qualche pixel e scorreva - e rimbalzava - la pagina intera. Ora la pagina sta ferma, alta quanto lo
     schermo; il menu resta al suo posto e scorre solo il contenuto, senza trascinare tutto con l'elastico. */
  html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
  /* L'iPhone (iOS 26) tinge le fasce fuori dalla pagina col colore di sfondo del body e degli elementi fissi sul bordo
     (solo background-color, non le sfumature): body e barra blu pieno, il grigio passa a .app. */
  @media (max-width: 900px) { html, body { background: #0A1420; } .app { background: var(--fondo); } .nav { background: linear-gradient(180deg, #12243C 0%, #0A1420 100%); } }
  /* (04/11/2026) la barra sfuma fino al blu della fascia sotto, senza il riflesso a sinistra: niente stacco */
  body { box-sizing: border-box; }
  .app { height: 100%; min-height: 0; }
  /* il menu alto quanto lo schermo solo quando e' la colonna a sinistra: da telefono e' la barra fissa in fondo e
     cosi' copriva tutta la pagina, si vedevano solo i link (29/10/2026, Mattia dall'iPhone) */
  @media (min-width: 901px) { .nav { height: 100%; } }
  .contenuto { height: 100%; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
  /* ...e i blocchi non si schiacciano (04/11/2026, Fausto dall'iPhone): con la colonna alta quanto lo schermo, chi ha
     overflow (l'interruttore Tutti i clienti / Solo i miei) si stringeva fino a vedersene una fettina. */
  .contenuto > * { flex-shrink: 0; }
  body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px);
                 background: var(--notte); z-index: 30; }
}

/* =============================================================================
   IL CRUSCOTTO DEL CEO (13/10/2026; rifatto il 19/10/2026 sulla settimana,
   dashboard.php): la testata scura con la frase di cosa guardare e, a destra,
   (19/10 sera: niente frase ne' consigli, "troppo confusionario") ordinato e
   fatturato della settimana su pastiglie di vetro con la curva; sotto quattro riquadri, un colore ciascuno (nella tessera dell'icona e in
   un alone, mai un bordino), con la cifra, cosa vuol dire e i cinque che
   contano. Tutto e' un collegamento.
   ============================================================================= */
.cruscotto { gap: var(--s5); padding: var(--s6) var(--s8) var(--s8); }
.cr-testa { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s6);
            padding: var(--s6) var(--s8); border-radius: var(--raggio-g); color: #fff;
            background: radial-gradient(90% 140% at 100% 0%, rgba(96, 165, 250, .22), transparent 60%), var(--testata-fondo);
            box-shadow: var(--testata-ombra); }
.cr-quando { margin: 0 0 4px; font-size: var(--t3); color: rgba(255, 255, 255, .65); }
.cr-testa h1 { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: -.02em; }
.cr-misure { display: flex; gap: var(--s3); }
.cr-misura { position: relative; display: flex; flex-direction: column; gap: 4px; width: 210px; overflow: hidden;
             padding: var(--s4) var(--s4) 0; border-radius: 14px; color: #fff;
             background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
             backdrop-filter: blur(8px); transition: background .15s; }
.cr-misura:hover { background: rgba(255, 255, 255, .14); }
.cr-misura-nome { font-size: var(--t2); color: rgba(255, 255, 255, .7); }
.cr-misura-cifra { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.cr-misura-cifra b { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.cr-misura-solito { font-size: var(--t2); color: rgba(255, 255, 255, .55); }
.cr-misura .curva { display: block; width: calc(100% + 2 * var(--s4)); height: 34px; margin: var(--s2) calc(-1 * var(--s4)) 0; color: #93C5FD; }

/* I quattro riquadri. */
.cr-fuochi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.cr-fuoco { --tono: var(--blu); --tono-tenue: var(--blu-tenue);
            display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5) var(--s5) var(--s4); border-radius: var(--raggio-g);
            background: radial-gradient(110% 70% at 100% 0%, var(--tono-tenue), transparent 55%), var(--superficie);
            box-shadow: 0 0 0 1px var(--bordo), 0 10px 24px -18px rgba(16, 24, 40, .45); }
.cr-fuoco.tono-rosso { --tono: var(--rosso); --tono-tenue: var(--rosso-tenue); }
.cr-fuoco.tono-ambra { --tono: var(--ambra-vivo); --tono-tenue: var(--ambra-tenue); }
.cr-fuoco.tono-viola { --tono: var(--viola); --tono-tenue: var(--viola-tenue); }
.cr-fuoco.tono-verde { --tono: var(--verde-vivo); --tono-tenue: var(--verde-tenue); }
.cr-fuoco-testa { display: flex; align-items: center; gap: var(--s3); }
.cr-fuoco-testa h2 { flex: 1; margin: 0; font-size: var(--t5); font-weight: 600; }
.cr-icona { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; color: #fff;
            background: linear-gradient(145deg, color-mix(in srgb, var(--tono) 70%, #fff), var(--tono));
            box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--tono) 60%, transparent); }
.cr-fuoco-tutti { display: inline-flex; align-items: center; gap: 2px; font-size: var(--t3); color: var(--testo-3); white-space: nowrap; }
.cr-fuoco-tutti:hover { color: var(--tono); }
.cr-fuoco-cifra { display: grid; gap: 2px; margin: 0; }
.cr-fuoco-cifra b { font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; color: var(--testo); }
.cr-fuoco-cifra span { font-size: var(--t3); color: var(--testo-3); }
.cr-righe { list-style: none; margin: 0; padding: 0; display: grid; }
.cr-righe a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--s3); padding: 10px 10px; margin: 0 -10px;
              border-radius: 10px; color: var(--testo); }
.cr-righe li + li a { box-shadow: inset 0 1px 0 var(--bordo-tenue); }
.cr-righe a:hover { background: color-mix(in srgb, var(--tono-tenue) 70%, transparent); box-shadow: none; }
.cr-riga-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t4); font-weight: 600; }
.cr-riga-cifra { font-size: var(--t4); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; color: var(--tono); }
.cr-vuoto { margin: 0; color: var(--testo-3); }

@media (max-width: 1200px) { .cr-testa { grid-template-columns: 1fr; } }
@media (max-width: 1000px) { .cr-fuochi { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .cruscotto { padding: var(--s4); }
  .cr-testa { padding: var(--s5); }
  .cr-testa h1 { font-size: 28px; }
  .cr-misure { display: grid; grid-template-columns: 1fr 1fr; }
  .cr-misura { width: auto; }
  .cr-misura-cifra b { font-size: 22px; }
  .cr-fuoco { padding: var(--s4); }
  .cr-fuoco-cifra b { font-size: 32px; }
}

/* =============================================================================
   I TESSUTI ACQUISTATI (14/10/2026, _tessuti.php), giornali e scuole: un anno
   per riga che si apre, dentro le righe di "I piu' ordinati" (.articolo): il
   nome apre la scheda del tessuto coi colori. Niente prezzi.
   ============================================================================= */
/* Il vuoto come gli altri vuoti dei blocchi (.niente-grande): coi margini del blocco, non attaccato al bordo (20/10/2026). */
.tes-vuoto { margin: 0; padding: var(--s5); font-size: var(--t4); line-height: 1.5; color: var(--testo-3); }
.tes-anni { padding: 0 var(--fianco) var(--s4); }
.tes-anno { border-top: 1px solid var(--bordo-tenue); }
.tes-anno:first-child { border-top: 0; }
.tes-anno > summary { display: grid; grid-template-columns: 16px auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3);
                      padding: var(--s3) 0; list-style: none; cursor: pointer; }
.tes-anno > summary::-webkit-details-marker { display: none; }
.tes-anno > summary > svg { color: var(--testo-3); transform: rotate(-90deg); transition: transform .2s; }
.tes-anno[open] > summary > svg { transform: none; }
.tes-anno-numero { font-size: var(--t6); font-weight: 700; letter-spacing: -.01em; }
.tes-anno-conto { font-size: var(--t3); color: var(--testo-3); }
.tes-metri { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; white-space: nowrap; }
.tes-anno > summary .tes-metri { font-size: var(--t4); }
/* Le righe: le stesse di "I piu' ordinati" (.articolo), senza il loro margine. */
.tes-anni .tes-articoli { padding: 0 0 var(--s3); border-top: 0; }
.tes-articoli .articolo-nome .articolo-apri { font-weight: 600; }
/* 29/10/2026: senza la famiglia sotto, una riga sola: nome (a capo se lungo, mai tagliato) e Campione/Capsule/
   Produzione sulla stessa linea; il codice segue il nome. */
.tes-articoli .articolo { align-items: start; }
.tes-articoli .articolo-metri { grid-area: 1 / 2; align-self: start; line-height: 1.45; }
.tes-articoli .articolo-nome { white-space: normal; overflow: visible; line-height: 1.45; }
.tes-articoli .articolo-nome .articolo-apri { flex-wrap: wrap; align-items: baseline; row-gap: 0; text-align: left; }
.tes-articoli .articolo-nome .articolo-apri > span { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.tes-metri { cursor: help; }

/* =============================================================================
   CLIENTI PER COMMERCIALE (14/10/2026, ex Organizzazione; stats-organizzazione.php):
   la prima scheda di Mercati. La mappa a cerchi a tutta larghezza, la
   classifica in un cassetto. Stampabile in A3 orizzontale.
   ============================================================================= */
.org { display: flex; flex-direction: column; gap: var(--s4); padding: 0 var(--s8) var(--s8); }
/* Per marchio / per paese a sinistra, Stampa a destra (15/10/2026: la testata e' quella delle Statistiche). */
.org-riga { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.org-azioni { display: flex; gap: var(--s2); }
.org-azioni [hidden] { display: none; }
/* La mappa a tutta larghezza; la classifica in un CASSETTO (15/10/2026): chiuso
   di default, scorre da destra sopra la mappa con la linguetta, e dentro scorre
   per conto suo (overscroll contenuto: la pagina sotto non si muove). */
.org-corpo { position: relative; overflow: hidden; border-radius: var(--raggio-g); }
.org-cassetto { position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, calc(100% - 48px)); z-index: 5;
                transform: translateX(100%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.org-cassetto.org-aperto { transform: translateX(0); }
.org-cassetto > .org-legenda { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain;
                               border-radius: var(--raggio-g) 0 0 var(--raggio-g); box-shadow: 0 0 0 1px var(--bordo), -12px 0 32px rgba(15, 23, 42, .14); }
.org-linguetta { position: absolute; top: var(--s4); right: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px;
                 padding: 10px 7px; border: 0; border-radius: 12px 0 0 12px; cursor: pointer; font: inherit; color: #fff;
                 background: var(--testata-fondo); box-shadow: -4px 4px 14px rgba(15, 23, 42, .25); }
.org-linguetta:hover { padding-left: 10px; }
.org-linguetta-punta svg { display: block; transition: transform .35s; }
.org-aperto .org-linguetta-punta svg { transform: rotate(180deg); }
.org-linguetta-testo { writing-mode: vertical-rl; transform: rotate(180deg); font-size: var(--t1); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.org-mappa { position: relative; margin: 0; padding: var(--s4); border-radius: var(--raggio-g); background: var(--superficie); box-shadow: 0 0 0 1px var(--bordo); }
.org-mappa svg { display: block; width: 100%; height: auto; max-height: calc(100vh - 120px); font-family: inherit; }
.org-mappa circle { transition: opacity .15s; }
.org-mappa circle.org-foglia:hover { stroke: #0F172A; stroke-width: 1.5; filter: drop-shadow(0 6px 12px rgba(15, 23, 42, .28)); }
.org-medaglia-n { font-size: 13px; font-weight: 800; fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, .18); stroke-width: 2px; }
.org-medaglie circle { filter: drop-shadow(0 2px 4px rgba(15, 23, 42, .3)); }
/* La scheda del commerciale in cui si e' entrati: vetro chiaro, in alto a sinistra. */
.org-scheda { position: absolute; top: var(--s4); left: var(--s4); z-index: 4; width: min(320px, calc(100% - 2 * var(--s4)));
              padding: var(--s2) var(--s3); border-radius: var(--raggio-g); background: rgba(255, 255, 255, .86);
              -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
              box-shadow: 0 0 0 1px var(--bordo), 0 12px 32px rgba(15, 23, 42, .16); pointer-events: none; }
.org-scheda[hidden] { display: none; }
.org-scheda .org-chi { margin: 0; }
.org-scheda .org-gara li { cursor: default; margin: 0; }
.org-scheda .org-sfida { border: 0; background: transparent; }
.org-entra { animation: org-scheda-entra .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes org-scheda-entra { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .org-entra { animation: none; } }
.org-mappa circle.org-con-logo, .org-mappa circle.org-con-bandiera { filter: drop-shadow(0 1px 1.5px rgba(15, 23, 42, .12)); }
/* Il nome sopra la bandiera (per paese): scuro col bordo bianco, si legge su ogni colore. */
.org-t-bandiera { font-weight: 700; fill: #0F172A; paint-order: stroke; stroke: rgba(255, 255, 255, .92); stroke-width: .3em; stroke-linejoin: round; }
.org-mappa circle.org-n1:hover, .org-mappa circle.org-n2:hover { stroke-width: 2.5; }
.org-mappa text { pointer-events: none; }
.org-t1, .org-t2 { font-weight: 700; paint-order: stroke; stroke: rgba(255, 255, 255, .9); stroke-width: .25em; stroke-linejoin: round; }
.org-t1-cifra { font-weight: 600; opacity: .8; }
.org-t2 { letter-spacing: .03em; text-transform: uppercase; }
.org-t3 { font-weight: 600; }
.org-niente { margin: 0; color: var(--testo-3); }
.org-legenda { display: grid; align-content: start; gap: var(--s3); padding: var(--s5); border-radius: var(--raggio-g);
               background: var(--superficie); box-shadow: 0 0 0 1px var(--bordo); }
.org-legenda-titolo { margin: 0; font-size: var(--t1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--testo-4); }
.org-legenda-titolo span { margin-left: 6px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.org-legenda-titolo + .org-chi { margin-top: -4px; }
.org-chi + .org-legenda-titolo { margin-top: var(--s3); }
.org-chi { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.org-chi li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; column-gap: var(--s2); align-items: center;
              padding: 6px var(--s2); margin: 0 calc(-1 * var(--s2)); border-radius: var(--raggio); }
.org-chi li[data-org-chi] { cursor: pointer; }
.org-chi li[data-org-chi]:hover { background: var(--sfiora); }
.org-pallino { width: 12px; height: 12px; border-radius: 50%; background: var(--tono); }
.org-anello { background: transparent; box-shadow: inset 0 0 0 3px var(--tono); }
.org-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t3); font-weight: 600; color: var(--testo); }
.org-cifra { font-size: var(--t2); color: var(--testo-3); white-space: nowrap; }
.org-cifra b { color: var(--testo); }
.org-paesi { grid-column: 2 / -1; font-size: var(--t2); color: var(--testo-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-altri { color: var(--testo-4); }
.org-senza .org-nome { color: var(--testo-2); font-style: italic; }
.org-nota { margin: var(--s2) 0 0; font-size: var(--t2); line-height: 1.5; color: var(--testo-4); }
/* LA CLASSIFICA (15/10/2026, "un po' gamification"): la posizione - oro,
   argento e bronzo ai primi tre -, la barra lunga quanto il fatturato
   rispetto al primo, i conti, e le figurine dei tre marchi che pesano di piu'. */
.org-gara { gap: 4px; }
.org-gara li { grid-template-columns: 26px minmax(0, 1fr) auto; row-gap: 3px; padding: 8px var(--s2); }
.org-gara li.org-scelto { background: var(--sfiora); box-shadow: inset 3px 0 0 var(--tono); }
.org-rango { grid-row: 1 / 3; align-self: start; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
             font-size: var(--t1); font-weight: 700; color: var(--testo-3); background: var(--sfiora-scuro); }
.org-oro, .org-argento, .org-bronzo { color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
             box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 3px rgba(15, 23, 42, .2); }
.org-oro     { background: linear-gradient(145deg, #FCD34D, var(--ambra)); }
.org-argento { background: linear-gradient(145deg, #E2E8F0, #94A3B8); }
.org-bronzo  { background: linear-gradient(145deg, #FDBA74, var(--ambra)); }
.org-gara .org-cifra { font-size: var(--t3); color: var(--testo); }
.org-barra { grid-column: 2 / -1; height: 6px; border-radius: 3px; background: var(--sfiora-scuro); overflow: hidden; }
.org-barra i { display: block; width: var(--quota); height: 100%; border-radius: 3px;
               background: linear-gradient(90deg, color-mix(in srgb, var(--tono) 55%, #fff), var(--tono));
               transform-origin: left; animation: org-cresce .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes org-cresce { from { transform: scaleX(0); } }
.org-dettagli { grid-column: 2 / -1; font-size: var(--t2); color: var(--testo-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-figurine { grid-column: 2 / -1; grid-row: 5; display: flex; gap: 4px; margin-top: 3px; }
.org-figurina { display: grid; place-items: center; width: 40px; height: 26px; padding: 3px 4px; border-radius: 7px;
                background: #fff; box-shadow: 0 0 0 1px var(--bordo), 0 1px 2px rgba(15, 23, 42, .08); transition: transform .15s; }
.org-figurina img { width: 100%; height: 100%; min-width: 0; object-fit: contain; }
.org-gara li:hover .org-figurina { transform: translateY(-2px); }
.org-gara .org-paesi { grid-column: 2 / -1; grid-row: 4; }
/* Chi aspetta un front office: il cerchio grigio, detto come il lavoro da fare. */
.org-sfida { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s2); align-items: center; width: 100%;
             padding: var(--s3); border: 1px dashed var(--bordo); border-radius: var(--raggio); background: var(--sfiora);
             font: inherit; font-size: var(--t2); line-height: 1.45; color: var(--testo-3); text-align: left; cursor: pointer; }
.org-sfida:hover { border-color: var(--testo-4); }
.org-sfida b { display: block; font-size: var(--t3); color: var(--testo); }
.org-sfida-icona { width: 28px; height: 28px; border-radius: 50%;
                   background: radial-gradient(circle, #94A3B8 0 3px, transparent 4px), radial-gradient(circle, transparent 0 7px, #94A3B8 8px 9px, transparent 10px),
                               radial-gradient(circle, transparent 0 12px, #CBD5E1 13px 14px, transparent 15px); }
@media (prefers-reduced-motion: reduce) { .org-barra i { animation: none; } }
.org-fumetto { position: fixed; z-index: 50; max-width: 260px; padding: 8px 10px; border-radius: 8px; pointer-events: none;
               background: rgba(15, 23, 42, .94); color: #fff; font-size: var(--t2); line-height: 1.45; box-shadow: 0 8px 24px rgba(15, 23, 42, .3); }
.org-fumetto[hidden] { display: none; }
@media (max-width: 1100px) {
  .org { padding: var(--s4); }
}
/* Stampata: A3 orizzontale, senza menu ne' bottoni, coi colori veri. */
@media print {
  @page { size: A3 landscape; margin: 10mm; }
  .org .nav, .app > .nav, .org-riga, .org-fumetto, .org-scheda { display: none !important; }
  .org { padding: 0; gap: 6mm; }
  .org-mappa, .org-legenda { box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* In stampa il cassetto e' aperto, accanto alla mappa. */
  .org-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 95mm; gap: 6mm; overflow: visible; }
  .org-mappa svg { max-height: 240mm; }
  .org-cassetto { position: static; width: auto; transform: none; }
  .org-cassetto > .org-legenda { position: static; overflow: visible; box-shadow: none; border: 1px solid #ddd; }
  .org-linguetta { display: none; }
}

/* =============================================================================
   MARKETING > COBRANDING (15/10/2026, stats-cobranding.php): una barra per
   anno, dove (torta e classifica delle Statistiche), chi (il muro dei marchi
   con le caselle dei canali). Classi mkc-: cob- e' della carta del cobranding.
   ============================================================================= */
.mkc-filtri { gap: var(--s2); }
.mkc-filtro { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
              background: var(--superficie); box-shadow: 0 0 0 1px var(--bordo); font-size: var(--t3); color: var(--testo) !important; }
.mkc-filtro:hover { box-shadow: 0 0 0 1px var(--blu); text-decoration: none !important; }
.mkc-filtro span { color: var(--testo-4); font-size: 15px; line-height: 1; }
.mkc-tutti-attivo { font-weight: 700; }
/* Gli anni: una colonna per anno, alta quanto il totale, che cresce all'apertura. */
.mkc-anni { display: flex; align-items: flex-end; gap: var(--s3); height: 220px; padding: var(--s4) var(--s5) var(--s4); }
.mkc-anno { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px;
            color: var(--testo-3); text-decoration: none; border-radius: var(--raggio); padding: 6px 4px 4px; transition: background .15s, opacity .2s; }
.mkc-anno:hover { background: var(--sfiora); }
.mkc-anno-n { font-size: var(--t4); font-weight: 700; color: var(--testo); }
.mkc-colonna { width: min(56px, 80%); height: var(--h); min-height: 4px; border-radius: 8px 8px 3px 3px;
               background: linear-gradient(180deg, #3B82F6, #1E40AF); transform-origin: bottom;
               animation: mkc-cresce .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 60ms); }
@keyframes mkc-cresce { from { transform: scaleY(0); } }
.mkc-anno-a { font-size: var(--t3); font-weight: 600; }
.mkc-scelto { background: var(--sfiora); }
.mkc-scelto .mkc-colonna { background: linear-gradient(180deg, #FDBA74, #EA580C); }
.mkc-scelto .mkc-anno-a { color: var(--notte); font-weight: 800; }
.mkc-spento { opacity: .55; }
.mkc-spento:hover { opacity: 1; }
/* Anni e Dove affiancati: gli anni larghi, Dove compatto (la sola torta). */
.mkc-due { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(300px, 1fr); gap: var(--s5); margin: 0 var(--pagina) var(--s5); }
.mkc-due > .blocco { margin: 0; }
.mkc-dove { padding: var(--s4) var(--s5) var(--s5); }
.mkc-dove .torta-riga { gap: var(--s4); }
/* CHI, due viste (15/10/2026). Il MOSAICO: tessere tutte uguali col logo grande
   (senza ripetere il nome; senza logo un riquadro col nome), la bandiera in alto
   a sinistra, il badge in alto a destra, sotto SOLO i canali fatti in un colore.
   La TABELLA: bandiera, logo, nome, cosa e' stato fatto per esteso. */
/* L'interruttore fra due viste dentro la testa di un riquadro (Cobranding): la resa e' quella di .stat-viste. */
.vista-scelta { margin-left: var(--s3); }
.mkc-chi[data-vista="mosaico"] .mkc-tabella, .mkc-chi[data-vista="tabella"] .mkc-mosaico { display: none; }
.mkc-mosaico { list-style: none; margin: 0; padding: var(--s5); display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--s4); }
.mkc-tessera { position: relative; display: grid; grid-template-rows: 22px 74px 22px; align-items: center; gap: 6px; height: 100%; padding: 10px 12px 12px;
               border-radius: 14px; background: #fff; color: var(--testo); text-decoration: none;
               box-shadow: 0 0 0 1px rgba(16, 24, 40, .07), 0 2px 4px rgba(16, 24, 40, .05); transition: transform .18s, box-shadow .18s; }
.mkc-tessera:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(16, 24, 40, .1), 0 14px 28px rgba(16, 24, 40, .14); }
.mkc-tessera-cima { display: flex; align-items: center; justify-content: space-between; }
.mkc-tessera-paese .bandiera { width: 20px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(16, 24, 40, .1); }
.mkc-tessera-logo { display: grid; place-items: center; height: 74px; min-width: 0; }
.mkc-tessera-logo img { max-width: 86%; max-height: 58px; object-fit: contain; }
.mkc-nome-box { display: grid; place-items: center; width: 100%; height: 58px; padding: 0 8px; border-radius: 10px; background: #F2F4F7;
                font-size: var(--t3); font-weight: 800; letter-spacing: .04em; line-height: 1.15; text-align: center; color: #1E3A5F; text-transform: uppercase; overflow: hidden; }
.mkc-tessera .mkc-icone { justify-content: center; }
.mkc-icone { display: flex; align-items: center; gap: 9px; color: #1E3A5F; }
.mkc-ico { display: inline-grid; place-items: center; color: #1E3A5F; }
.mkc-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.mkc-badge-nuovo { color: #047857; background: var(--verde-tenue); box-shadow: inset 0 0 0 1px #A7F3D0; }
.mkc-badge-anni  { color: #92400E; background: #FFFBEB; box-shadow: inset 0 0 0 1px #FDE68A; }
.mkc-tabella { width: calc(100% - 2 * var(--s5)); margin: var(--s4) var(--s5); border-collapse: collapse; font-size: var(--t3); }
.mkc-tabella th { padding: 8px 10px; text-align: left; font-size: var(--t2); font-weight: 600; color: var(--testo-3); border-bottom: 1px solid var(--bordo); }
.mkc-tabella td { padding: 8px 10px; border-bottom: 1px solid var(--bordo-tenue); vertical-align: middle; }
.mkc-tabella tbody tr:hover { background: var(--riga-sfiora); }
.mkc-col-paese { width: 32px; }
.mkc-col-paese .bandiera { width: 20px; height: 15px; }
.mkc-col-logo { width: 84px; }
.mkc-col-nota { width: 90px; text-align: right; }
.mkc-tab-nome a { font-weight: 700; color: #101828; text-decoration: none; }
.mkc-tab-nome a:hover { color: var(--blu); }
.mkc-tab-cosa { color: var(--testo-2); }
.mkc-tab-canale { display: inline-flex; align-items: center; gap: 5px; margin-right: 14px; color: #1E3A5F; white-space: nowrap; }
.mkc-legenda { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s6); margin: 0;
               padding: var(--s3) var(--s5) var(--s5); border-top: 1px solid var(--bordo-tenue); font-size: var(--t3); color: var(--testo-2); }
.mkc-legenda li { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 1100px) { .mkc-anni { gap: 4px; } .mkc-due { grid-template-columns: minmax(0, 1fr); margin: 0 var(--s4) var(--s5); } }
@media (prefers-reduced-motion: reduce) { .mkc-colonna { animation: none; } }
/* IL PDF DELLE STATISTICHE (15/10/2026): quello che si vede, senza menu ne'
   comandi, coi colori veri, i riquadri interi su una pagina e il titolo del
   report in testa. Vale per ogni pagina col bottone PDF (_stat-testa 'pdf'). */
.stat-pdf { margin-left: auto; }
.stat-stampa-titolo { display: none; }
@media print {
  @page { size: A4 portrait; margin: 10mm; }
  body:has(.stat-pdf) { background: #fff; }
  body:has(.stat-pdf) .app > .nav, body:has(.stat-pdf) .barra-compatta, body:has(.stat-pdf) .testata-schede, body:has(.stat-pdf) .stat-pdf,
  body:has(.stat-pdf) .stat-comandi, body:has(.stat-pdf) .stat-briciole, body:has(.stat-pdf) .blocco-testa .apri,
  body:has(.stat-pdf) .classifica-box .bottone, body:has(.stat-pdf) .mkc-tutti-attivo { display: none !important; }
  body:has(.stat-pdf) * { -webkit-print-color-adjust: exact; print-color-adjust: exact; animation: none !important; transition: none !important; }
  body:has(.stat-pdf) .contenuto { padding: 0; }
  body:has(.stat-pdf) .stat-testata { margin: 0 0 5mm; padding: 6mm 7mm 5mm; box-shadow: none; }
  body:has(.stat-pdf) .stat-testata .titolo { display: none; }
  body:has(.stat-pdf) .stat-cifre { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  body:has(.stat-pdf) .stat-stampa-titolo { display: block; margin: 0; font-size: 20pt; font-weight: 700; letter-spacing: -.01em; color: #fff; }
  body:has(.stat-pdf) .blocco, body:has(.stat-pdf) .stat-principale { margin: 0 0 5mm; box-shadow: none; border: .25mm solid #E4E7EC; break-inside: avoid; }
  body:has(.stat-pdf) .blocco-testa { break-after: avoid; }
  body:has(.stat-pdf) .mkc-due { grid-template-columns: 1.7fr 1fr; gap: 4mm; margin: 0 0 5mm; }
  body:has(.stat-pdf) .mkc-anni { height: 46mm; gap: 1.5mm; padding: 3mm 4mm; }
  body:has(.stat-pdf) .mkc-dove { padding: 3mm 4mm; }
  body:has(.stat-pdf) .mkc-dove .torta { width: 30mm; height: 30mm; }
  body:has(.stat-pdf) .mkc-dove .torta-legenda { font-size: 7.5pt; }
  /* Il riquadro dei marchi puo' andare su piu' pagine, ma mai una carta a meta'. */
  body:has(.stat-pdf) .mkc-chi { break-inside: auto; }
  body:has(.stat-pdf) .vista-scelta { display: none !important; }
  body:has(.stat-pdf) .mkc-mosaico { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2.5mm; padding: 3mm 4mm; }
  body:has(.stat-pdf) .mkc-mosaico > li, body:has(.stat-pdf) .mkc-tabella tr { break-inside: avoid; }
  body:has(.stat-pdf) .mkc-tessera { grid-template-rows: 4mm 15mm 4mm; gap: 1.2mm; padding: 2mm 2.4mm 2.4mm; border-radius: 2.5mm; box-shadow: 0 0 0 .25mm #D0D5DD; }
  body:has(.stat-pdf) .mkc-tessera-logo { height: 15mm; }
  body:has(.stat-pdf) .mkc-tessera-logo img { max-height: 11mm; }
  body:has(.stat-pdf) .mkc-nome-box { height: 11mm; font-size: 6.5pt; }
  body:has(.stat-pdf) .mkc-tessera-paese .bandiera { width: 4.4mm; height: 3.3mm; }
  body:has(.stat-pdf) .mkc-icone { gap: 1.5mm; }
  body:has(.stat-pdf) .mkc-ico svg { width: 3.2mm; height: 3.2mm; }
  body:has(.stat-pdf) .mkc-badge { font-size: 5.5pt; padding: .3mm 1.4mm; }
  body:has(.stat-pdf) .mkc-tabella { width: 100%; margin: 2mm 0; font-size: 8pt; }
  body:has(.stat-pdf) .mkc-tabella thead { display: table-header-group; }
  body:has(.stat-pdf) .mkc-tabella td, body:has(.stat-pdf) .mkc-tabella th { padding: 1.2mm 2mm; }
  body:has(.stat-pdf) .mkc-legenda { break-before: avoid; padding: 2mm 4mm 3mm; font-size: 7.5pt; }
}

/* TROVATI ONLINE (0126, 15/10/2026): la lista da approvare. Una riga per
   ritrovamento: chi (logo del marchio o testata), cosa (titolo e link alla
   pagina trovata), come (canale e anno, o tipo e data), decidi. I campi si
   leggono come testo e si rivelano campi solo al passaggio o al fuoco. Le regole della lista
   sono andate col Radar (18/10/2026); qui resta il telefono. */


/* LA FINESTRINA DELL'ESPORTAZIONE (_esporta.php, 15/10/2026): le scelte, una
   per riga - i gruppi a pastiglie, gli interruttori si'/no col loro perche' -
   e in fondo Annulla / Scarica. Una per tutte le esportazioni. */
.esporta-modulo { display: grid; gap: var(--s4); }
.esporta-gruppo { margin: 0; padding: 0; border: 0; display: grid; gap: var(--s2); }
.esporta-gruppo legend { padding: 0; margin-bottom: var(--s2); font-size: var(--t3); font-weight: 600; color: var(--testo); }
.esporta-gruppo .pillola { height: 32px; padding: 0 12px; font-size: var(--t3); }
.esporta-interruttore { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: var(--s3); padding: var(--s3);
                        border-radius: 10px; background: var(--sfiora); cursor: pointer; }
.esporta-interruttore input { margin: 2px 0 0; accent-color: var(--blu); width: 16px; height: 16px; }
.esporta-interruttore b { display: block; font-size: var(--t3); font-weight: 600; color: var(--testo); }
.esporta-interruttore small { display: block; font-size: var(--t2); color: var(--testo-3); }
.esporta-piede { display: flex; justify-content: flex-end; gap: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--bordo-tenue); }

/* IL RADAR (0131): le carte delle ricerche, come le sottosezioni (tessera colorata, nome, una riga). */
.radar-testa-azioni { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s4); }
.radar-testa-azioni .coda-spiega { margin: 0; }
.radar-carte { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: var(--s4); }
.radar-carta { display: grid; gap: var(--s4); padding: var(--s5); }
.radar-carta-testa { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.radar-tessera { --tinta: var(--blu); --tinta-tenue: var(--blu-tenue); }
.radar-carta-nome { display: grid; gap: 2px; min-width: 0; flex: 1; }
.radar-carta-nome b { font-size: var(--t5); color: var(--testo); }
.radar-carta-nome small { font-size: var(--t2); color: var(--testo-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radar-stato { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--verde-tenue); color: var(--verde); font-size: var(--t2); font-weight: 600; }
.radar-stato.spenta { background: var(--sfiora-scuro); color: var(--testo-3); }
.radar-ferma .radar-tessera { --tinta: var(--testo-3); --tinta-tenue: var(--sfiora-scuro); }
.radar-fatti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin: 0; }
.radar-fatti dt { font-size: var(--t1); color: var(--testo-3); text-transform: uppercase; letter-spacing: .04em; }
.radar-fatti dd { margin: 2px 0 0; font-size: var(--t3); color: var(--testo); }
.radar-chi { display: flex; align-items: center; gap: var(--s2); }
.radar-avatar { display: inline-flex; }
.radar-avatar .avatar { width: 22px; height: 22px; font-size: 10px; margin-left: -6px; box-shadow: 0 0 0 2px var(--superficie); }
.radar-avatar .avatar:first-child { margin-left: 0; }
.radar-carta-piede { display: flex; justify-content: flex-end; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--bordo-tenue); }
dialog.scheda.radar-finestra { width: min(640px, calc(100vw - 32px)); }
.radar-giorni > span:last-child { display: flex; align-items: center; gap: var(--s2); color: var(--testo-2); }
.radar-giorni input { width: 90px; }
.radar-cerca { position: relative; }
.radar-trovati { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: 0 8px 24px rgba(16, 24, 40, .14); max-height: 240px; overflow: auto; }
.radar-trovati button { display: grid; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; text-align: left; cursor: pointer; }
.radar-trovati button:hover, .radar-trovati button:focus-visible { background: var(--blu-tenue); }
.radar-trovati b { font-size: var(--t3); color: var(--testo); }
.radar-trovati small { font-size: var(--t2); color: var(--testo-3); }
.radar-niente { padding: 8px 10px; font-size: var(--t3); color: var(--testo-3); }
@media (max-width: 640px) { .radar-fatti { grid-template-columns: 1fr; } }
.radar-testa-azioni { margin: 0 var(--pagina) var(--s4); }
.radar-finestra .pillola { display: inline-flex; height: 32px; padding: 0 12px; font-size: var(--t3); }
.radar-finestra .pillola input { position: absolute; inset: 0; width: auto; height: auto; opacity: 0; margin: 0; }
.radar-avatar .avatar { width: 24px; height: 24px; font-size: 9px; }
.radar-carte { margin: 0 var(--pagina) var(--s4); }
.radar-carta { margin: 0; }
.radar-fatti { grid-template-columns: minmax(0, 1fr) minmax(0, .7fr) minmax(0, 1.3fr); }
.radar-chi { white-space: nowrap; }

/* IL RADAR, DA IMPORTARE. Terzo giro (18/10/2026, "che venga voglia di usarla ma senza diventare
   ridicola"): il cruscotto con l'anello (radar.js lo fa avanzare), i filtri coi colori dei tipi,
   le carte con la tessera del tipo, Importa e Scarta che si riconoscono, la carta che esce. */
.rd-cruscotto { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s5);
  margin: 0 var(--pagina) var(--s5); padding: var(--s5) var(--s6); border-radius: var(--raggio-g); box-shadow: var(--ombra-media);
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--blu) 9%, transparent), transparent 55%), var(--superficie); }
.rd-cruscotto.rd-pulito { background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--verde-vivo) 14%, transparent), transparent 55%), var(--superficie); }
.rd-anello { --q: 0; --tinta: var(--blu); position: relative; width: 104px; height: 104px; border-radius: 50%;
  background: conic-gradient(var(--tinta) calc(var(--q) * 1%), var(--sfiora-scuro) 0); display: grid; place-items: center; }
.rd-pulito .rd-anello { --tinta: var(--verde-vivo); }
.rd-anello-dentro { width: 80px; height: 80px; border-radius: 50%; background: var(--superficie); display: grid; place-items: center; align-content: center;
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, .06); color: var(--verde); }
.rd-anello-dentro b { font-size: 28px; line-height: 1; color: var(--testo); letter-spacing: -.02em; }
/* Quattro cifre e piu' (1.853) non escono dall'anello. */
.rd-anello-dentro b.lungo { font-size: 21px; }
.rd-anello-dentro small { margin-top: 3px; font-size: var(--t1); color: var(--testo-3); text-transform: uppercase; letter-spacing: .05em; }
.rd-pulito .rd-anello-dentro svg { animation: rd-spunta .5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes rd-spunta { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.rd-cruscotto-testo { display: grid; gap: 6px; min-width: 0; }
.rd-frase { margin: 0; font-size: var(--t5); font-weight: 650; color: var(--testo); letter-spacing: -.01em; }
.rd-spiega { margin: 0; max-width: 560px; font-size: var(--t3); color: var(--testo-2); line-height: 1.5; }
.rd-pastiglie { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s2); }
.rd-pastiglie li { --tinta: var(--blu); --tinta-tenue: var(--blu-tenue); display: flex; align-items: center; gap: 10px; min-width: 132px; padding: 10px 14px 10px 10px;
  border-radius: var(--raggio-g); background: color-mix(in srgb, var(--superficie) 70%, var(--tinta-tenue)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta) 12%, transparent); }
.rd-pastiglie li.tono-verde { --tinta: var(--verde); --tinta-tenue: var(--verde-tenue); }
.rd-pastiglie li.tono-viola { --tinta: var(--viola); --tinta-tenue: var(--viola-tenue); }
.rd-pastiglia-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--tinta); color: #FFF;
  box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--tinta) 60%, transparent); }
.rd-pastiglie li > span:last-child { display: grid; line-height: 1.15; }
.rd-pastiglie small { font-size: var(--t1); color: var(--testo-3); text-transform: uppercase; letter-spacing: .04em; }
.rd-pastiglie b { font-size: var(--t6); color: var(--testo); }
.rd-pastiglie em { font-style: normal; font-size: var(--t1); color: var(--testo-3); }
.rd-scatto { display: inline-block; animation: rd-scatto .6s cubic-bezier(.2, 1.6, .4, 1); color: var(--verde) !important; }
@keyframes rd-scatto { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* I filtri: una pastiglia per tipo, col pallino del suo colore e il conto. */
.rd-filtri { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 var(--pagina) var(--s4); }
.rd-filtro { --tinta: var(--testo-2); position: relative; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 6px 0 12px;
  border-radius: 999px; background: var(--superficie); box-shadow: inset 0 0 0 1px var(--bordo); font-size: var(--t3); font-weight: 550; color: var(--testo-2);
  cursor: pointer; transition: box-shadow .15s, background .15s, color .15s; }
.rd-filtro input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.rd-filtro i { display: grid; place-items: center; color: var(--tinta); }
.rd-filtro b { min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; font-size: var(--t2); background: var(--sfiora); color: var(--testo-2); }
.rd-filtro:hover { box-shadow: inset 0 0 0 1px var(--bordo-forte); }
.rd-filtro:has(input:checked), .rd-filtro.attiva { background: var(--testo); color: #FFF; box-shadow: none; }
.rd-filtro:has(input:checked) i, .rd-filtro.attiva i { color: #FFF; }
.rd-filtro:has(input:checked) b, .rd-filtro.attiva b { background: rgba(255, 255, 255, .18); color: #FFF; }
.rd-filtro:has(input:focus-visible) { outline: 2px solid var(--blu); outline-offset: 2px; }
.rd-filtro.tono-ambra, .rd-gruppo-ico.tono-ambra, .rd-riga.tono-ambra { --tinta: var(--ambra); --tinta-tenue: var(--ambra-tenue); }
.rd-filtro.tono-viola, .rd-gruppo-ico.tono-viola, .rd-riga.tono-viola { --tinta: var(--viola); --tinta-tenue: var(--viola-tenue); }
.rd-filtro.tono-blu, .rd-gruppo-ico.tono-blu, .rd-riga.tono-blu { --tinta: var(--blu); --tinta-tenue: var(--blu-tenue); }
.rd-filtro.tono-grigio, .rd-gruppo-ico.tono-grigio { --tinta: var(--testo-3); --tinta-tenue: var(--sfiora); }
.contenuto:has(.rd-filtri input[value="premio"]:checked) .rd-gruppo:not([data-gruppo="premio"]),
.contenuto:has(.rd-filtri input[value="cobranding"]:checked) .rd-gruppo:not([data-gruppo="cobranding"]),
.contenuto:has(.rd-filtri input[value="uscita"]:checked) .rd-gruppo:not([data-gruppo="uscita"]),
.contenuto:has(.rd-filtri input[value="grigio"]:checked) .rd-gruppo:not([data-gruppo="grigio"]) { display: none; }

/* I gruppi e le carte. */
.rd-gruppo { margin: 0 var(--pagina) var(--s6); }
.rd-gruppo-titolo { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin: 0 0 var(--s3); font-size: var(--t5); }
.rd-gruppo-titolo > span.m { font-size: var(--t3); color: var(--testo-3); font-weight: 600; }
.rd-gruppo-titolo small { font-size: var(--t2); font-weight: 400; color: var(--testo-3); }
.rd-gruppo-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--tinta-tenue); color: var(--tinta); }
.rd-righe { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.rd-riga { --tinta: var(--blu); --tinta-tenue: var(--blu-tenue); display: grid; grid-template-columns: 46px minmax(0, 1fr) 270px auto; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s4) var(--s4) var(--s4); border-radius: var(--raggio-g); background: var(--superficie); box-shadow: var(--ombra-media);
  transition: transform .18s, box-shadow .18s, opacity .3s; }
.rd-tessera { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; overflow: hidden; align-self: start;
  background: radial-gradient(100% 100% at 30% 20%, var(--superficie), var(--tinta-tenue)); color: var(--tinta); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta) 14%, transparent); }
.rd-tessera .marchio-logo { width: 46px; height: 46px; }
.rd-cosa { display: grid; gap: 5px; min-width: 0; }
.rd-titolo { font-size: var(--t4); font-weight: 620; color: var(--testo); text-decoration: none; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* hover solo dove si clicca davvero (04/11/2026, Mattia): il titolo e il riquadro "dove" si accendono se sono link o tasti */
a.rd-titolo:hover { color: var(--blu); }
.rd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; font-size: var(--t2); color: var(--testo-3); }
.rd-meta span + span::before { content: "\00b7"; margin: 0 7px; }
.rd-sito { display: inline-flex; align-items: center; gap: 4px; color: var(--testo-2); font-weight: 550; }
.rd-testo { margin: 0; font-size: var(--t3); color: var(--testo-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rd-dove { display: flex; align-items: center; gap: var(--s2); width: 100%; min-width: 0; padding: 10px 12px; border: 0; border-radius: var(--raggio);
  background: color-mix(in srgb, var(--tinta-tenue) 55%, var(--superficie)); text-align: left; font: inherit; transition: background .15s, box-shadow .15s; }
button.rd-dove, a.rd-dove { cursor: pointer; }
button.rd-dove:hover, button.rd-dove:focus-visible, a.rd-dove:hover { background: var(--tinta-tenue); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta) 25%, transparent); outline: none; }
.rd-dove-testo { flex: 1; display: grid; gap: 1px; min-width: 0; }
.rd-dove-testo small { font-size: var(--t1); color: var(--tinta); font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.rd-dove-testo b { font-size: var(--t3); color: var(--testo); line-height: 1.3; overflow-wrap: anywhere; }   /* a capo, mai tagliata (29/10/2026) */
.rd-dove-testo span { font-size: var(--t2); color: var(--testo-2); }
.rd-dove-matita { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--testo-3); }
button.rd-dove:hover .rd-dove-matita, button.rd-dove:focus-visible .rd-dove-matita { color: var(--tinta); background: var(--superficie); }
.rd-manca { display: inline-flex; align-items: center; gap: 4px; justify-self: start; margin-top: 3px; padding: 1px 8px; border-radius: 999px;
  font-style: normal; font-size: var(--t1); font-weight: 650; color: var(--ambra); background: var(--ambra-tenue); }
.rd-azioni { display: flex; align-items: center; gap: 6px; }
.rd-azioni form { margin: 0; }
.rd-si { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; min-width: 116px; padding: 0 16px; border: 0; border-radius: 999px;
  background: var(--verde-vivo); color: #FFF; font: inherit; font-size: var(--t3); font-weight: 650; cursor: pointer;
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--verde-vivo) 70%, transparent); transition: transform .12s, box-shadow .15s, background .15s; }
.rd-si:hover { background: var(--verde); transform: translateY(-1px); }
.rd-si:active { transform: scale(.96); }
.rd-si.rd-completa { background: var(--superficie); color: var(--ambra); box-shadow: inset 0 0 0 1.5px var(--ambra-bordo); }
.rd-si.rd-completa:hover { background: var(--ambra-tenue); }
.rd-no { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--sfiora); color: var(--testo-3);
  font-size: 22px; line-height: 1; cursor: pointer; transition: background .15s, color .15s, transform .12s; }
.rd-no:hover { background: var(--rosso-tenue); color: var(--rosso); }
.rd-no:active { transform: scale(.92); }
/* da telefono l'hover resta appiccicato dopo il tocco: niente spostamenti (04/11/2026) */
@media (hover: none) { .rd-si:hover, .rd-no:hover { transform: none; } }
/* La carta che esce: a destra col lampo verde (Importa), o sfuma (Scarta). */
.rd-riga.rd-esce-dentro { animation: rd-dentro .55s cubic-bezier(.5, 0, .75, 0) forwards; pointer-events: none; }
.rd-riga.rd-esce-via { animation: rd-via .4s ease-in forwards; pointer-events: none; }
@keyframes rd-dentro { 0% { box-shadow: 0 0 0 2px var(--verde-vivo), var(--ombra-alta); } 35% { transform: translateX(-6px); } 100% { transform: translateX(60px); opacity: 0; } }
@keyframes rd-via { to { transform: scale(.97); opacity: 0; filter: grayscale(1); } }
@media (prefers-reduced-motion: reduce) { .rd-riga.rd-esce-dentro, .rd-riga.rd-esce-via { animation: none; opacity: .35; } }
dialog.scheda.rd-finestra { width: min(560px, calc(100vw - 32px)); }
.rd-modulo { display: grid; gap: var(--s4); }
.rd-modulo label { display: grid; gap: 6px; font-size: var(--t3); font-weight: 600; color: var(--testo); }
.rd-modulo-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t2); color: var(--blu); text-decoration: none; }
.rd-scelta { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.rd-scelta legend { padding: 0; margin-bottom: 8px; font-size: var(--t3); font-weight: 600; color: var(--testo); }
.rd-scelta .pillola { display: inline-flex; height: 34px; padding: 0 14px; font-size: var(--t3); font-weight: 500; }
.rd-per { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: var(--s3); }
.rd-largo { grid-column: 1 / -1; }
.rd-finisce { grid-column: 1 / -1; margin: 0; padding: 10px 12px; border-radius: var(--raggio); background: var(--blu-tenue); font-size: var(--t2); color: var(--testo-2); line-height: 1.45; }
.rd-modulo:has(input[name="diventa"][value="uscita"]:checked) .rd-per[data-per="cobranding"],
.rd-modulo:has(input[name="diventa"][value="cobranding"]:checked) .rd-per[data-per="uscita"] { display: none; }
@media (max-width: 1100px) {
  .rd-cruscotto { grid-template-columns: auto minmax(0, 1fr); }
  .rd-pastiglie { grid-column: 1 / -1; flex-wrap: wrap; }
  .rd-riga { grid-template-columns: 46px minmax(0, 1fr); }
  .rd-dove, .rd-azioni { grid-column: 2; }
}
@media (max-width: 700px) {
  .rd-cruscotto, .rd-filtri, .rd-gruppo { margin-left: var(--s4); margin-right: var(--s4); }
  .rd-cruscotto { grid-template-columns: 1fr; justify-items: start; padding: var(--s4); }
  .rd-per { grid-template-columns: 1fr; }
}
.rd-scelta .pillola { position: relative; }
.rd-scelta .pillola input { position: absolute; inset: 0; width: auto; height: auto; margin: 0; opacity: 0; cursor: pointer; }

/* =============================================================================
   ORDINI (17/10/2026). Un blocco solo, in griglia: stessi margini laterali per
   filtri, cifre, avviso e tabella (var(--s8)), stesso spazio fra i blocchi
   (var(--s5)); nei filtri ogni controllo e' alto 44px e sta sulla stessa linea.
   ============================================================================= */
.ord-filtri, .ord-cifre, .ord-avviso, .ord-blocco { margin: 0 var(--pagina) var(--s5); }
/* Dentro una pagina che ha gia' i suoi margini (Cosa compra della scheda cliente). */
.ord-filtri.ord-filtri-dentro { margin: 0 0 var(--s4); }

/* I FILTRI (17/10/2026 sera): in alto il PERIODO in evidenza e a destra Azzera e Altri filtri;
   sotto, esplosi a caselle (il quadratino dei menu Filtra), tipo d'ordine e collezioni; in fondo i gettoni. */
.ord-filtri { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: end; column-gap: var(--s5); row-gap: var(--s4);
  padding: var(--s4) var(--s5); background: var(--superficie); border: 1px solid var(--bordo-tenue); border-radius: var(--raggio-g); }
.ord-filtro { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
/* Il nome sopra le caselle: una legend non sente il gap della griglia, lo spazio glielo da' il margine. */
.ord-filtro > legend.ord-filtro-nome { margin-bottom: 10px; }
.ord-filtro-periodo { grid-column: 1; grid-row: 1; }
.ord-filtro-nome { padding: 0; font-size: var(--t1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--testo-3); line-height: 1; }
.ord-filtri > .filtri { display: contents; }
.ord-filtri .filtri > .azzera { grid-column: 3; grid-row: 1; align-self: end; height: 44px; display: inline-flex; align-items: center; color: var(--testo-3); }
.ord-filtri .filtri-apri { grid-column: 4; grid-row: 1; align-self: end; height: 44px; display: flex; align-items: center; margin: 0; }
.ord-filtri .bottone-filtri { height: 40px; color: var(--testo); background: var(--superficie); border: 1px solid var(--bordo); }
.ord-filtri .bottone-filtri:hover, .ord-filtri .filtri-apri[open] > .bottone-filtri { background: var(--sfiora); border-color: var(--blu); }
.ord-filtri .filtri-apri .filtri-pannello { left: auto; right: 0; }
.ord-caselle { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: var(--s4) var(--s8); margin: 0; padding-top: var(--s4); border-top: 1px solid var(--bordo-tenue); }
.ord-pillole { display: flex; flex-wrap: wrap; gap: 6px; }

/* LE ESTRAZIONI A SCELTA (31/10/2026, rifatte la sera: "troppo complesso e poco chiaro"): tre domande numerate, una per
   riga - cosa e una riga per a tendine, in piu' a caselle. */
/* Tutti i clienti o solo i miei (03/11/2026): l'interruttore di chi ha le Estrazioni su tutti i clienti. */
.estr-parco { margin: 0 var(--pagina) var(--s3); }
.estr-scelte { display: grid; gap: var(--s3); margin: 0 var(--pagina) var(--s5); padding: var(--s4) var(--s5);
  background: var(--superficie); border: 1px solid var(--bordo-tenue); border-radius: var(--raggio-g); }
.estr-domanda { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.estr-domanda + .estr-domanda { padding-top: var(--s3); border-top: 1px solid var(--bordo-tenue); }
.estr-num { --tinta: var(--blu); --tinta-tenue: var(--blu-tenue); position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none;
  border-radius: 11px; background: var(--tinta-tenue); color: var(--tinta); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta) 18%, transparent); }
.estr-titolo { display: grid; min-width: 130px; font-weight: 650; color: var(--testo); line-height: 1.2; }
.estr-titolo small { font-size: var(--t1); font-weight: 400; color: var(--testo-3); }
.estr-domanda select.campo { min-width: 170px; }
.estr-nota { color: var(--testo-3); font-size: var(--t3); }
.estr-scelte .pillola { height: 32px; padding: 0 12px; }
/* I livelli di Una riga per (02/11/2026): una tendina per livello, "poi" fra l'una e l'altra, la crocetta per toglierne uno. */
.estr-livelli { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.estr-livello { display: inline-flex; align-items: center; gap: 6px; }
.estr-poi { color: var(--testo-3); font-size: var(--t3); }
.estr-togli { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; color: var(--testo-3); font-size: 16px; line-height: 1; text-decoration: none; }
.estr-togli:hover { background: var(--bordo-tenue); color: var(--testo); }
.estr-piu { margin-left: 0; }
@media (max-width: 900px) {
  .estr-titolo { min-width: 0; flex: 1 1 auto; }
  .estr-domanda select.campo { flex: 1 1 100%; }
  /* la tendina di Una riga per larga come quella di Cosa (04/11/2026) */
  .estr-livelli, .estr-livello { display: flex; width: 100%; }
  .estr-livello select.campo { flex: 1 1 0; min-width: 0; }
}
/* La tabella si allarga quanto serve e scorre (le colonne cambiano con le scelte): i nomi fino a 32 caratteri, poi i puntini. */
@media (min-width: 901px) {
  .ord-tabella.estr-tabella table { table-layout: auto; width: max-content; min-width: 100%; }
  .ord-tabella.estr-tabella thead th:first-child { width: auto; }
  .estr-tabella .ord-taglia { max-width: 24ch; white-space: normal; overflow-wrap: break-word; }
  .estr-tabella .ord-nome { white-space: normal; }
}
/* Da telefono le righe vanno a capo come negli altri report: niente numero tagliato a destra. */
@media (max-width: 900px) { .estr-tabella tr > td { white-space: normal; } }
/* L'iconcina nella pastiglia (_caselle 'icone', 18/10/2026: i tipi di cobranding). */
.ord-pillole .pillola svg { flex: 0 0 auto; margin-right: 5px; color: var(--testo-3); }
.ord-pillole .pillola:has(input:checked) svg { color: var(--blu); }
/* Statistiche > Cobranding: i tipi dietro il tasto Filtri, accanto a Mosaico/Tabella (18/10/2026). */
.mkc-filtri-menu { position: relative; }
.mkc-filtri-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; cursor: pointer; }
.mkc-filtri-menu > summary::-webkit-details-marker { display: none; }
.mkc-filtri-menu[data-attivi] > summary { color: var(--blu); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blu) 35%, transparent); }
.mkc-filtri-n { padding: 0 6px; border-radius: 999px; background: var(--blu); color: #FFF; font-size: var(--t1); font-weight: 650; line-height: 18px; }
.mkc-filtri-pannello { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(420px, calc(100vw - 32px)); padding: var(--s4);
  border-radius: var(--raggio-g); background: var(--superficie); box-shadow: var(--ombra-alta); }
.mkc-canali { margin: 0; }
.mkc-filtri-piede { display: flex; justify-content: flex-end; margin-top: var(--s3); }
/* I FILTRI DI TUTTO IL REPORT (Cobranding e Giornali, 20/10/2026, _mkc-filtri.php): una riga
   sotto la testata, il tasto a sinistra e i gettoni accanto; il pannello si apre sotto il tasto. */
.mkc-barra { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); margin: 0 var(--pagina) var(--s4); }
@media (max-width: 1100px) { .mkc-barra { margin: 0 var(--s4) var(--s4); } }
@media print { .mkc-barra .mkc-filtri-menu { display: none; } }
.mkc-barra .mkc-filtri-pannello { left: 0; right: auto; }
.mkc-paese { display: grid; gap: 6px; margin-top: var(--s4); }
.mkc-paese .campo { width: 100%; }

/* LA FINESTRA DEL MARCHIO E DELLA TESTATA (20/10/2026, rifatta lo stesso giorno: "non ci si capisce
   un cazzo"; stats-cobranding-scheda.php, stats-giornali-scheda.php, mkc-scheda.js): da leggere, al
   centro, entra salendo. In testa chi e'; gli anni come linguette; poi una riga per cosa fatta (la
   frase in italiano con la sua tessera colorata) e sotto le prove: le etichette intere su fondo
   chiaro, i prodotti e i post con la schermata e il nome, le uscite col titolo e l'autore. */
dialog.mks-finestra { width: min(820px, calc(100vw - 32px)); max-width: none; max-height: min(88dvh, 960px); padding: 0; border: 0; overflow: hidden;
                      border-radius: 20px; background: var(--superficie); color: var(--testo); box-shadow: 0 40px 80px -30px rgba(8, 12, 22, .5); }
dialog.mks-finestra::backdrop { background: rgba(8, 12, 22, .4); backdrop-filter: blur(3px); }
dialog.mks-finestra[open] { animation: mks-entra .32s cubic-bezier(.16, 1, .3, 1); }
dialog.mks-finestra.esce { animation: mks-esce .22s ease-in forwards; }
@keyframes mks-entra { from { opacity: 0; transform: translateY(18px) scale(.98); } }
@keyframes mks-esce { to { opacity: 0; transform: translateY(12px) scale(.98); } }
.mks-finestra-corpo { max-height: min(88dvh, 960px); overflow-y: auto; overscroll-behavior: contain; }
.mks-finestra-corpo.in-carica .mks:not(.mks-scheletro) { opacity: .55; transition: opacity .15s; }
.mks { display: flex; flex-direction: column; }

.mks-testa { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s4);
             padding: var(--s5) var(--s6); background: var(--superficie); box-shadow: 0 1px 0 var(--bordo-tenue); }
.mks-testa .marchio-logo.mks-logo { --d: 64px; width: 64px; height: 64px; background: #FFF; box-shadow: 0 0 0 1px var(--bordo); transform: none; }
.mks-chi h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.mks-dati { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s4); margin: 4px 0 0; font-size: var(--t3); color: var(--testo-3); }
.mks-dati > * { display: inline-flex; align-items: center; gap: 5px; }
.mks-dati a { color: var(--testo-3); }
.mks-dati a:hover { color: var(--blu); }
.mks-fuori { font-size: .9em; color: var(--testo-4); }
.mks-chiudi { align-self: start; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%;
              background: var(--sfiora); color: var(--testo-2); font-size: 24px; line-height: 1; cursor: pointer; }
.mks-chiudi:hover { background: var(--sfiora-scuro); color: var(--testo); }

/* Gli anni: linguette, quella scelta piena. */
.mks-anni { display: flex; gap: 6px; overflow-x: auto; padding: var(--s4) var(--s6) 0; scrollbar-width: none; }
.mks-anni::-webkit-scrollbar { display: none; }
.mks-anno { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 5px; padding: 7px 14px; border-radius: 999px;
            font-size: var(--t4); font-weight: 600; color: var(--testo-2); background: var(--sfiora); transition: background .15s, color .15s; }
.mks-anno small { font-size: var(--t2); font-weight: 500; color: var(--testo-4); }
.mks-anno:hover { background: var(--sfiora-scuro); text-decoration: none; }
.mks-anno.attivo { background: var(--testo); color: #FFF; }
.mks-anno.attivo small { color: rgba(255, 255, 255, .6); }

.mks-corpo { display: grid; gap: var(--s5); padding: var(--s5) var(--s6) var(--s6); }
.mks-titolo { margin: 0 0 calc(-1 * var(--s2)); font-size: var(--t2); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--testo-4); }

/* Le linguette delle cose fatte (e dei tipi d'uscita): una riga che scorre, quella scelta piena
   del suo colore, col conto delle prove (20/10/2026: "dividerei nel popup a tab"). */
.mks [hidden] { display: none !important; }
.mks-niente { margin: 0; padding-left: calc(34px + var(--s3)); font-size: var(--t3); color: var(--testo-3); }

/* LE DUE COLONNE DELLE FINESTRE (20/10/2026: "i menu tab se sono troppi spariscono dalla finestra,
   e le card a volte vanno una sotto all'altra"): a sinistra l'elenco (_mks-voci), tutte le voci
   sempre visibili col conto; a destra il pannello, una griglia sola di carte uguali. */
dialog.mks-finestra { width: min(980px, calc(100vw - 32px)); }
.mks-due { display: grid; grid-template-columns: 214px minmax(0, 1fr); gap: var(--s5); align-items: start; }
.mks-due.una { grid-template-columns: minmax(0, 1fr); }
.mks-voci { position: sticky; top: 96px; display: grid; gap: 2px; padding: 6px; border-radius: 14px; background: var(--sfiora); }
.mks-voce { --tono: var(--blu); --tono-tenue: var(--blu-tenue);
            display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: 10px;
            cursor: pointer; background: transparent; color: var(--testo-2); font: inherit; font-size: var(--t3); font-weight: 600; text-align: left; }
.mks-voce.tono-viola { --tono: var(--viola); --tono-tenue: var(--viola-tenue); }
.mks-voce.tono-rosa { --tono: var(--rosa-vivo); --tono-tenue: var(--rosa-tenue); }
.mks-voce.tono-ambra { --tono: var(--ambra-vivo); --tono-tenue: var(--ambra-tenue); }
.mks-voce.tono-neutra { --tono: var(--testo-2); --tono-tenue: var(--sfiora-scuro); }
.mks-voce-tessera { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--tono); background: var(--tono-tenue); }
.mks-voce-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mks-voce small { min-width: 22px; padding: 0 6px; border-radius: 999px; text-align: center; font-size: var(--t2); font-weight: 650; line-height: 20px;
                  color: var(--testo-3); background: #FFF; }
.mks-voce:hover { background: #FFF; }
.mks-voce[aria-selected="true"] { background: #FFF; color: var(--testo); box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 0 0 1px var(--bordo-tenue); }
.mks-voce[aria-selected="true"] .mks-voce-tessera { color: #FFF; background: var(--tono); }
.mks-voce[aria-selected="true"] small { color: #FFF; background: var(--tono); }
.mks-voce.vuota { color: var(--testo-4); }
.mks-voce.vuota .mks-voce-tessera { color: var(--testo-4); background: transparent; }
.mks-pannelli { min-width: 0; }
.mks-pannelli > [hidden] { display: none !important; }
/* Le carte: tutte della stessa forma - l'immagine 4:3 e, per i link, il nome e il giorno sotto. */
.mks-carte { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--s4) var(--s3); list-style: none; margin: 0; padding: 0; }
.mks-carta { display: grid; gap: 6px; color: var(--testo); }
.mks-carta:hover { text-decoration: none; }
.mks-carta-img { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px;
                 background: radial-gradient(120% 120% at 30% 20%, #FBFBFC, #EEF0F3); box-shadow: inset 0 0 0 1px var(--bordo-tenue); color: var(--tono); }
.mks-carta-img img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; transition: transform .25s; }
.mks-carta-img.schermata { background: var(--tono-tenue); }
.mks-carta-img.schermata img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mks-carta-img .cob-doc { position: absolute; inset: 0; height: auto; }
.mks-carta-img small { font-size: var(--t1); font-weight: 600; color: var(--testo-4); }
.mks-carta-img:has(small) { align-content: center; gap: 4px; }
.mks-carta:hover .mks-carta-img img { transform: scale(1.03); }
.mks-carta-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t3); font-weight: 600; }
.mks-carta:hover .mks-carta-nome { color: var(--blu); }
.mks-carta-data { margin-top: -4px; font-size: var(--t2); color: var(--testo-3); }
@media (max-width: 700px) {
  .mks-due { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .mks-voci { position: static; display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; }
  .mks-voce { width: auto; grid-template-columns: auto auto auto; padding: 6px 8px; }
  .mks-carte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Una cosa fatta: la tessera, la frase, il conto; sotto le prove. */
.mks-cosa { --tono: var(--blu); --tono-tenue: var(--blu-tenue); display: grid; gap: var(--s3); }
.mks-cosa.tono-viola, .mks-uscite .tono-viola, .mks-tessera.tono-viola { --tono: var(--viola); --tono-tenue: var(--viola-tenue); }
.mks-cosa.tono-rosa, .mks-uscite .tono-rosa, .mks-tessera.tono-rosa { --tono: var(--rosa-vivo); --tono-tenue: var(--rosa-tenue); }
.mks-cosa.tono-ambra, .mks-uscite .tono-ambra, .mks-tessera.tono-ambra { --tono: var(--ambra-vivo); --tono-tenue: var(--ambra-tenue); }
.mks-cosa-testa { display: flex; align-items: center; gap: var(--s3); margin: 0; }
.mks-cosa-testa b { font-size: var(--t5); font-weight: 600; }
.mks-tessera { --tono: var(--blu); display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; color: #FFF;
               background: linear-gradient(145deg, color-mix(in srgb, var(--tono) 65%, #FFF), var(--tono));
               box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--tono) 70%, transparent); }
.mks-cosa .mks-tessera { --tono: inherit; }
.mks-tessera.neutra { background: var(--sfiora-scuro); color: var(--testo-2); box-shadow: none; }
.mks-tessera.grande { width: 64px; height: 64px; border-radius: 18px; }
.mks-conto { margin-left: auto; padding: 2px 10px; border-radius: 999px; background: var(--tono-tenue); color: var(--tono); font-size: var(--t2); font-weight: 650; white-space: nowrap; }

/* Le etichette e le foto: intere, su fondo chiaro, si ingrandiscono. */

/* Le prove con un link: la schermata (la parte alta della pagina) e il nome, si aprono fuori. */
.mks-nota { margin: 0; padding: var(--s3) var(--s4); border-radius: 12px; background: var(--sfiora); font-size: var(--t4); line-height: 1.5; color: var(--testo-2); }
.mks-nota b { margin-right: 6px; color: var(--testo); }

/* Le uscite di una testata: la schermata a sinistra, a destra tipo e giorno, il titolo, chi. */
.mks-uscite { display: grid; gap: var(--s3); list-style: none; margin: 0; padding: 0; }
.mks-uscite li { --tono: var(--blu); --tono-tenue: var(--blu-tenue); display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--s4); align-items: start;
                 padding: var(--s3); border-radius: 14px; box-shadow: 0 0 0 1px var(--bordo); }
.mks-uscita-foto { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--tono-tenue); color: var(--tono); }
.mks-uscita-foto img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mks-uscita-testo { display: grid; gap: 4px; min-width: 0; padding-top: 2px; }
.mks-uscita-tipo { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); margin: 0; font-size: var(--t2); color: var(--testo-3); }
.mks-pillola { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--tono-tenue); color: var(--tono); font-weight: 650; }
.mks-uscita-titolo { margin: 0; font-size: var(--t4); font-weight: 600; line-height: 1.35; color: var(--testo); }
a.mks-uscita-titolo:hover { color: var(--blu); text-decoration: none; }
.mks-uscita-chi { margin: 0; font-size: var(--t3); color: var(--testo-3); }

.mks-vuoto { margin: 0; padding: var(--s5) var(--s6); color: var(--testo-3); }
.mks-corpo .mks-vuoto { padding: 0; }
.mks-piede { display: flex; justify-content: flex-end; margin: 0; padding: var(--s3) var(--s6) var(--s5); border-top: 1px solid var(--bordo-tenue); }
.mks-piede a { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t3); font-weight: 600; color: var(--blu); }
.mks-scheletro .mks-testa { grid-template-columns: auto 1fr; }
.mks-scheletro-logo { width: 64px; height: 64px; border-radius: 50%; background: var(--sfiora); }
.mks-scheletro-righe { display: grid; gap: 8px; }
.mks-scheletro .attesa-cartello { padding: var(--s6); }
@media (max-width: 600px) {
  .mks-niente { padding-left: 0; }
  dialog.mks-finestra { width: 100vw; max-height: 92dvh; margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .mks-finestra-corpo { max-height: 92dvh; }
  .mks-testa { padding: var(--s4); gap: var(--s3); }
  .mks-testa .marchio-logo.mks-logo, .mks-tessera.grande { --d: 48px; width: 48px; height: 48px; }
  .mks-chi h2 { font-size: 18px; }
  .mks-anni, .mks-corpo { padding-left: var(--s4); padding-right: var(--s4); }
  .mks-uscite li { grid-template-columns: 92px minmax(0, 1fr); gap: var(--s3); }
  .mks-piede { padding: var(--s3) var(--s4) var(--s4); }
}

/* Statistiche > Giornali e premi: accanto all'iconcina il conto, se piu' d'uno (19/10/2026). */
.mkg-ico { width: auto; gap: 3px; padding: 0 6px; }
/* Il grafico a tre barre per anno: pubblicazioni, giornali, premi (19/10/2026). */
.mkg-legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: var(--s3) var(--s5) 0; font-size: var(--t2); color: var(--testo-2); }
.mkg-legenda li { display: inline-flex; align-items: center; gap: 6px; }
.mkg-legenda i { width: 10px; height: 10px; border-radius: 3px; background: var(--tinta); }
.mkg-legenda .tono-blu, .mkg-barra.tono-blu { --tinta: var(--blu); }
.mkg-legenda .tono-verde, .mkg-barra.tono-verde { --tinta: var(--verde-vivo); }
.mkg-legenda .tono-ambra, .mkg-barra.tono-ambra { --tinta: var(--ambra-vivo); }
/* Le visite delle scuole (22/10/2026): rosa come nello storico. */
.mkg-legenda .tono-rosa, .mkg-barra.tono-rosa { --tinta: var(--rosa-vivo); }
.mkg-anni { height: 240px; }
.mkg-gruppo { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; min-height: 0; }
.mkg-barra { position: relative; flex: 0 1 18px; height: var(--h); min-height: 3px; border-radius: 5px 5px 2px 2px; background: var(--tinta);
  transform-origin: bottom; animation: mkc-cresce .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 60ms); }
.mkg-barra b { position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%); font-size: var(--t1); font-weight: 700; color: var(--testo-2); white-space: nowrap; }
.mkc-scelto .mkg-barra { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 3px var(--tinta); }
.mkg-anno { padding-top: 22px; }
.mkg-ico b { font-size: var(--t1); font-weight: 650; }
.ord-caselle .pillola { height: 32px; padding: 0 12px; background: var(--superficie); }
.ord-filtri .filtri-attivi { grid-column: 1 / -1; grid-row: 3; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding-top: var(--s3); border-top: 1px solid var(--bordo-tenue); }
.ord-filtri .filtri-attivi:empty { display: none; }
.ord-filtri .filtro-attivo { background: var(--blu-tenue); color: var(--blu-scuro); border: 0; }
.ord-filtri .filtro-attivo span { color: var(--blu); }
.ord-filtri .filtro-attivo:hover { background: color-mix(in srgb, var(--blu) 18%, var(--superficie)); color: var(--blu-scuro); }
/* Senza periodo (Portafoglio) la prima riga ha solo Altri filtri: le caselle salgono accanto. */
.ord-filtri:not(:has(.ord-filtro-periodo)) .ord-caselle { grid-column: 1 / 3; grid-row: 1; padding-top: 0; border-top: 0; }

/* Il periodo "come Google" (_periodo.php): dentro i 44px dei filtri. */
.periodo { position: relative; }
.periodo > summary { list-style: none; }
.periodo > summary::-webkit-details-marker { display: none; }
.periodo-bottone { display: flex; align-items: center; gap: var(--s3); height: 44px; padding: 0 12px 0 6px; border: 1px solid var(--bordo); border-radius: 12px;
  background: var(--superficie); cursor: pointer; }
.periodo-bottone:hover, .periodo[open] .periodo-bottone { border-color: var(--blu); }
.periodo-icona { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--blu-tenue); color: var(--blu); }
.periodo-testi { display: grid; gap: 0; line-height: 1.25; }
.periodo-testi b { font-size: var(--t3); color: var(--testo); }
.periodo-testi b, .periodo-testi small { white-space: nowrap; }
.periodo-testi small { font-size: var(--t1); color: var(--testo-3); }
.periodo-freccia { color: var(--testo-3); }
.periodo-pannello { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; display: grid; grid-template-columns: 190px 240px;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio-g); box-shadow: 0 12px 32px rgba(16, 24, 40, .16); overflow: hidden; }
.periodo-pronti { display: grid; align-content: start; padding: 6px; border-right: 1px solid var(--bordo-tenue); }
.periodo-pronti a { padding: 8px 10px; border-radius: 8px; font-size: var(--t3); color: var(--testo); text-decoration: none; }
.periodo-pronti a:hover { background: var(--sfiora); }
.periodo-pronti a.attiva { background: var(--blu-tenue); color: var(--blu-scuro); font-weight: 600; }
.periodo-scelto { display: grid; gap: var(--s3); align-content: start; padding: var(--s4); }
.periodo-scelto label { display: grid; gap: 4px; font-size: var(--t2); font-weight: 600; color: var(--testo-2); }
.periodo-scelto-titolo { margin: 0; font-size: var(--t3); font-weight: 600; color: var(--testo); }
.periodo-nota { margin: 0; font-size: var(--t2); color: var(--testo-3); line-height: 1.4; }
/* PIU' RILEVANZA AL PERIODO (17/10/2026): nei report e' la prima scelta, si vede per prima. */
.ord-filtro-periodo .periodo-bottone { height: 58px; gap: var(--s3); padding: 0 16px 0 9px; border-color: color-mix(in srgb, var(--blu) 30%, var(--bordo));
  background: color-mix(in srgb, var(--blu-tenue) 55%, var(--superficie)); border-radius: 14px; }
.ord-filtro-periodo .periodo-icona { width: 40px; height: 40px; border-radius: 11px; background: var(--blu); color: #FFF; }
.ord-filtro-periodo .periodo-testi b { font-size: var(--t6); }
.ord-filtro-periodo .periodo-testi small { font-size: var(--t2); }

/* LE CIFRE: tessera e nome, il numero, scarto e anno prima. Tutte uguali, tutte alte uguali. */
/* Tre o quattro cifre (il Fatturato ne ha tre): le colonne si dividono la riga. */
.ord-cifre { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s4); }
.ord-cifra { display: grid; grid-template-rows: auto auto auto; align-content: start; row-gap: 10px; padding: var(--s5); margin: 0; border-radius: 16px;
  --tinta: var(--blu); --tinta-tenue: var(--blu-tenue);
  background: linear-gradient(135deg, var(--superficie) 55%, var(--tinta-tenue));
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px -14px color-mix(in srgb, var(--tinta) 40%, transparent); }
/* I TONI, UNA VOLTA SOLA (05/11/2026, Mattia: "uniforma gli stili e css non hardcodare"): .tono-x da' --tinta e --tinta-tenue a
   chiunque li usi; quale tono per quale misura lo dice View\ReportFigures::MEASURES (e il ppt StatsDeck::tone). */
.tono-blu { --tinta: var(--blu); --tinta-tenue: var(--blu-tenue); }
.tono-verde { --tinta: var(--verde); --tinta-tenue: var(--verde-tenue); }
.tono-viola { --tinta: var(--viola); --tinta-tenue: var(--viola-tenue); }
.tono-ambra { --tinta: var(--ambra); --tinta-tenue: var(--ambra-tenue); }
.tono-rosa { --tinta: var(--rosa); --tinta-tenue: var(--rosa-tenue); }
.tono-rosso { --tinta: var(--rosso); --tinta-tenue: var(--rosso-tenue); }
.tono-grafite { --tinta: var(--grafite); --tinta-tenue: var(--grafite-tenue); }
.tono-ciano { --tinta: var(--ciano); --tinta-tenue: var(--ciano-tenue); }
.tono-oro { --tinta: var(--oro); --tinta-tenue: var(--oro-tenue); }
.ord-cifra dd { margin: 0; }
.ord-cifra-testa { display: flex; align-items: center; gap: 10px; font-size: var(--t3); font-weight: 600; color: var(--testo-2); }
.ord-cifra-tessera { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--tinta); color: #fff;
  box-shadow: 0 6px 14px -6px var(--tinta); }
.ord-cifra-numero { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--testo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ord-cifra-numero .scarto { font-size: var(--t2); letter-spacing: 0; padding: 2px 7px; }
.ord-cifra-sotto { display: grid; justify-items: start; gap: 6px; font-size: var(--t2); color: var(--testo-3); }
.ord-cifra-sotto > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ord-cifra-sotto .scarto { font-size: var(--t2); padding: 2px 7px; }
/* Le righe nome/cifra sotto il numero (la Situazione, 27/10/2026): un filo sopra ognuna, la cifra a destra; come nel ppt (StatsDeck::cifre). */
.ord-cifra-righe { display: grid; grid-template-columns: 1fr auto; margin-top: 4px; font-size: var(--t2); color: var(--testo-3); }
.ord-cifra-righe > * { padding: 7px 0; border-top: 1px solid var(--bordo); }
.ord-cifra-righe > b { padding-left: var(--s4); font-weight: 600; color: var(--testo); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* L'AVVISO DEI CONFEZIONISTI MANDATARI: una riga ambra che si apre sul dettaglio degli ordini. */
.ord-avviso { border-radius: var(--raggio-g); background: linear-gradient(90deg, var(--ambra-tenue), var(--superficie) 70%);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05); overflow: hidden; }
.ord-avviso > summary { list-style: none; display: flex; align-items: center; gap: var(--s3); padding: 12px var(--s5); cursor: pointer; }
.ord-avviso > summary::-webkit-details-marker { display: none; }
.ord-avviso-segno { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ambra); color: #fff;
  font-weight: 800; font-size: 15px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--ambra) 18%, transparent); }
.ord-avviso-testo { display: grid; gap: 1px; min-width: 0; }
.ord-avviso-testo b { font-size: var(--t3); color: var(--testo); }
.ord-avviso-testo small { font-size: var(--t2); color: var(--testo-2); }
.ord-avviso-apri { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: var(--t3); font-weight: 600; color: var(--ambra); white-space: nowrap; }
.ord-avviso-apri svg { transition: transform .2s; }
.ord-avviso[open] .ord-avviso-apri svg { transform: rotate(180deg); }
.ord-avviso-dettaglio { padding: 0 var(--s5) var(--s4); background: var(--superficie); border-top: 1px solid var(--ambra-bordo); }
.ord-avviso-dettaglio table { width: 100%; table-layout: fixed; }
.ord-avviso-dettaglio td, .ord-avviso-dettaglio th { overflow: hidden; }
.ord-avviso-nota { margin: var(--s3) 0 0; font-size: var(--t2); color: var(--testo-3); }

/* LA TABELLA delle righe. */
.ord-tabella table { width: 100%; table-layout: fixed; min-width: 960px; }
.ord-tabella td, .ord-tabella th { overflow: hidden; }
/* 29/10/2026 ("le larghezze delle colonne segano i testi"): date, codici, Collezione e Variazione si tagliavano.
   Margini laterali stretti e, sotto i 1180px, la tabella scorre invece di segare: si taglia (coi puntini) solo
   cio' che e' fatto per tagliarsi, i nomi lunghi (.ord-taglia). */
.ord-tabella table { min-width: 1180px; }
.ord-tabella td, .ord-tabella th { padding-left: 7px; padding-right: 7px; }
.ord-tabella thead th { white-space: normal; line-height: 1.2; vertical-align: bottom; }
.ord-tabella td.ord-paese, .ord-tabella td.ord-paese .paese { white-space: normal; line-height: 1.3; }
/* 05/11/2026: "Spedito il ... FE ..." e i colori lunghi (21198 Bordeaux) si segavano: vanno a capo; si taglia solo il nome (.ord-taglia). */
.ord-tabella tbody td:not(.numero), .ord-tabella .ord-sotto { white-space: normal; overflow-wrap: break-word; line-height: 1.3; }
/* Lo stesso nel dettaglio dell'avviso ambra (scaduti, confezionisti): sotto i 1240px scorre, non sega. */
.ord-avviso-dettaglio table { min-width: 1240px; }
.ord-avviso-dettaglio th, .ord-avviso-dettaglio td { padding-left: 7px; padding-right: 7px; }
.ord-avviso-dettaglio thead th { white-space: normal; line-height: 1.2; vertical-align: bottom; }
.ord-tabella th a.ord-ordina { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 3px; }
.ord-tabella th a.ord-ordina.attiva { color: var(--blu); }
.ord-taglia { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Il nome e, accanto, il suo codice piccolo: il nome si taglia, il codice resta. */
.ord-nome { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.ord-nome > .ord-taglia { min-width: 0; }
.ord-codice { flex: none; font-size: var(--t1); font-weight: 400; color: var(--testo-3); font-variant-numeric: tabular-nums; }
.ord-sotto { display: block; font-size: var(--t1); color: var(--testo-3); font-weight: 400; }
.ord-articolo { font-weight: 600; }
.ord-perso td, .ord-perso th { color: var(--testo-3); }
.ord-tipo { display: inline-block; padding: 2px 7px; border-radius: 6px; font-size: var(--t2); font-weight: 600; background: var(--sfiora-scuro); color: var(--testo-2); }
.ord-tipo-prod { background: var(--blu-tenue); color: var(--blu-scuro); }
.ord-tipo-camp { background: var(--ambra-tenue); color: var(--ambra); }
.ord-tipo-contr { background: var(--viola-tenue); color: var(--viola); }
.ord-tipo-capi { background: var(--verde-tenue); color: var(--verde); }
/* L'E-COMMERCE (0146): il cliente collegato, l'assegnazione, la quantita' e il collegamento di un prodotto. */
.ecom-cliente { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ecom-legato { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: var(--t2); font-weight: 600;
               background: var(--verde-tenue); color: var(--verde); }
.ecom-legato small { font-weight: 500; opacity: .75; }
.ecom-legato.da-confermare { background: var(--ambra-tenue); color: var(--ambra); }
.ecom-legato.non-cliente { background: var(--sfiora); color: var(--testo-3); }
.ecom-assegna, .ecom-quantita, .ecom-collega-modulo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.ecom-assegna .campo { height: 30px; min-width: 200px; flex: 1; }
.ecom-quantita .campo { height: 30px; width: 110px; }
.ecom-collega summary { cursor: pointer; font-size: var(--t2); color: var(--testo-3); }
.ecom-collega[open] summary { margin-bottom: 6px; }
.ecom-collega-modulo label { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t2); color: var(--testo-3); }
.ecom-collega-modulo .campo { height: 28px; }

@media (max-width: 1100px) {
  .ord-cifre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* l'ultima carta da sola prende tutta la riga, invece di lasciare mezza riga vuota (04/11/2026) */
  .ord-cifre > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  /* le carte con le righe sotto (Situazione: scaduto, metri, prezzi): una per riga, se no le etichette vanno su tre righe */
  .ord-cifre:has(.ord-cifra-righe) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .ord-filtri { grid-template-columns: minmax(0, 1fr); }   /* minmax: il periodo coi suoi testi non allarga la carta */
  .ord-filtri > *, .ord-filtri .filtri > * { grid-column: 1 !important; grid-row: auto !important; }
  .periodo-pannello { grid-template-columns: 1fr; }
}

/* MERCATI, CERCHI o TABELLA (17/10/2026): l'interruttore (.vista-scelta) sceglie; la tabella per
   commerciale, una riga che si apre sui suoi marchi. Si stampa la vista scelta. */
.org .vista-scelta { margin-left: 0; }
.org[data-vista="cerchi"] .mer-tabella, .org[data-vista="tabella"] .org-corpo, .org[data-vista="tabella"] [data-org-tutti] { display: none !important; }
.mer-tabella { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--r3, 14px); padding: var(--s2) var(--s5) var(--s4); }
.mer-testa, .mer-riga > summary { display: grid; grid-template-columns: minmax(170px, 1.5fr) minmax(90px, .8fr) minmax(130px, 1.2fr) minmax(56px, .5fr) minmax(56px, .5fr) minmax(150px, 1.6fr) minmax(100px, .9fr); align-items: center; column-gap: var(--s4); }
/* Le intestazioni come in tutte le tabelle delle Statistiche (.anni-tabella thead th). */
.mer-testa { padding: 8px var(--s3); font-size: var(--t2); font-weight: 600; color: var(--testo-3); border-bottom: 1px solid var(--bordo); }
.mer-tabella .numero { text-align: right; font-variant-numeric: tabular-nums; }
.mer-riga { border-bottom: 1px solid var(--bordo-tenue); }
.mer-riga > summary { list-style: none; cursor: pointer; padding: var(--s3); border-radius: 10px; }
.mer-riga > summary::-webkit-details-marker { display: none; }
.mer-riga > summary:hover, .mer-riga[open] > summary { background: var(--sfiora); }
.mer-riga[data-vuota] > summary { cursor: default; }
.mer-riga[data-vuota] > summary:hover { background: transparent; }
.mer-chi { display: flex; align-items: center; gap: 10px; font-weight: 600; min-width: 0; }
.mer-pallino { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--tono); }
.mer-quota { display: flex; align-items: center; gap: 10px; font-size: var(--t3); color: var(--testo-2); font-variant-numeric: tabular-nums; }
.mer-barra { flex: 1; height: 6px; border-radius: 3px; background: var(--sfiora-scuro); overflow: hidden; }
.mer-barra i { display: block; height: 100%; width: var(--quota); background: var(--tono); border-radius: 3px; }
.mer-paesi { font-size: var(--t3); color: var(--testo-2); min-width: 0; }
.mer-sotto { display: block; font-size: var(--t1); color: var(--testo-3); font-weight: 400; }
.mer-marchi { list-style: none; margin: 0 0 var(--s3); padding: 0 var(--s3) 0 calc(var(--s3) + 20px); display: grid; gap: 2px; }
.mer-marchi li { display: grid; grid-template-columns: 64px minmax(0, 1fr) 110px 70px; align-items: center; gap: var(--s3); padding: 6px 0; border-top: 1px dashed var(--bordo-tenue); }
.mer-marchi li:first-child { border-top: 0; }
.mer-marchio a { font-weight: 600; color: var(--testo); text-decoration: none; }
.mer-marchio a:hover { color: var(--blu); }
.mer-quota-marchio { font-size: var(--t3); color: var(--testo-3); }
@media (max-width: 900px) {
  .mer-testa { display: none; }
  .mer-riga > summary { grid-template-columns: 1fr auto; row-gap: 4px; }
  .mer-riga > summary > :nth-child(n+3) { display: none; }
  .mer-marchi { padding-left: 0; }
  .mer-marchi li { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .mer-quota-marchio { display: none; }
}
@media print { .mer-riga > .mer-marchi { display: grid; } }

/* LA TESTATA DELLE STATISTICHE COMPATTA (17/10/2026, Mattia: "va fatto piu' compatto, non ha senso cosi'"):
   titolo, schede e comandi (Excel, Stampa, viste) su una riga; le cifre, dove ci sono, sotto a tutta larghezza. */
.stat-testata { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); padding: var(--s3) var(--s4) var(--s3) var(--s5); margin-bottom: var(--s5); }
.stat-testata > .testata-riga { flex: 1 1 auto; min-width: 0; gap: var(--s3) var(--s5); }
.stat-testata .titolo { font-size: var(--t6); letter-spacing: -.01em; }
.stat-testata > .stat-comandi { margin: 0; flex: 0 1 auto; }
.stat-testata > .stat-comandi-filtri > span:empty { display: none; }
.stat-testata > .testata-cifre { flex: 1 0 100%; margin-top: var(--s2); }

/* STATISTICHE > CLIENTI (18/10/2026, rifatta semplice): UNA BARRA - le quattro schede a sinistra,
   periodo, soglia e lente a destra -, UNA RIGA che dice cosa si guarda, UNA TABELLA. */
.cl-comandi { flex: none; overflow: visible; position: relative; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s3) var(--s4); margin: 0 var(--pagina) var(--s3); padding: 8px; border-radius: 18px; background: var(--superficie);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 0 0 1px var(--bordo-tenue); }
.cl-schede { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.cl-scheda { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 12px;
  color: var(--testo-2); text-decoration: none; transition: background .12s, box-shadow .12s; }
.cl-scheda-tessera { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--tinta-tenue); color: var(--tinta); transition: background .12s, color .12s; }
.cl-scheda-testi { display: grid; line-height: 1.15; }
.cl-scheda-testi b { font-size: var(--t4); font-weight: 600; color: var(--testo); }
.cl-scheda-testi small { font-size: var(--t2); font-weight: 600; color: var(--testo-3); font-variant-numeric: tabular-nums; }
.cl-scheda:hover { background: var(--sfiora); }
.cl-scheda.attiva { background: color-mix(in srgb, var(--tinta-tenue) 60%, var(--superficie)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta) 22%, transparent); }
.cl-scheda.attiva .cl-scheda-tessera { background: var(--tinta); color: #fff; box-shadow: 0 4px 10px color-mix(in srgb, var(--tinta) 30%, transparent); }
.cl-scheda.attiva .cl-scheda-testi small { color: var(--tinta); }
.cl-azioni { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s2); margin-left: auto; min-width: 0; }
.cl-cerca { position: relative; flex: 0 1 260px; min-width: 200px; margin: 0; }
.cl-cerca-campo { position: relative; display: block; }
.cl-cerca-lente { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--testo-3); pointer-events: none; }
.cl-cerca .campo { width: 100%; height: 44px; padding-left: 40px; border-radius: 12px; background: var(--sfiora); border-color: transparent; transition: background .12s, border-color .12s, box-shadow .12s; }
.cl-cerca .campo:focus { background: var(--superficie); border-color: var(--blu); box-shadow: 0 0 0 3px var(--blu-tenue); }
.cl-cerca:focus-within .cl-cerca-lente { color: var(--blu); }
.cl-cerca .scegli-trovati { position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; width: max(100%, 380px); max-height: 420px; overflow-y: auto; margin: 0; padding: 6px;
  border-radius: 14px; background: var(--superficie); border: 1px solid var(--bordo); box-shadow: 0 18px 40px rgba(16, 24, 40, .18); }
.cl-cerca .scegli-niente { padding: 10px; }
/* La riga che spiega: un pallino del colore della scheda, una frase. */
.cl-spiega { display: flex; align-items: center; gap: 8px; margin: 0 var(--pagina) var(--s4); padding: 0 var(--s2); font-size: var(--t3); color: var(--testo-2); }
.cl-spiega::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tinta); }
.cl-spiega { flex-wrap: wrap; row-gap: 4px; }
/* La tabella: le cifre a destra, la variazione in euro col suo colore. */
.cl-tabella .tc-logo .marchio-logo.piccolo { --d: 34px; width: 34px; height: 34px; border-radius: 50%; }
/* Niente larghezza minima delle liste (940px): a schermo stretto la colonna del nome si stringe, la tabella non sborda. */
table.cl-tabella { min-width: 0; }
.cl-tabella thead th { white-space: normal; line-height: 1.2; }
.cl-tabella td.numero { white-space: nowrap; overflow: visible; text-overflow: clip; }
.cl-tabella .tc-nome { white-space: normal; overflow: visible; line-height: 1.25; }
.cl-tabella td.numero .scarto { margin-left: 6px; }
.cl-delta.cl-su { color: var(--verde); }
.cl-delta.cl-giu { color: var(--rosso); }
@media (max-width: 900px) {
  .cl-comandi { margin: 0 var(--s4) var(--s3); }
  .cl-azioni { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .cl-cerca { flex: 1 1 auto; }
  .cl-spiega { margin: 0 var(--s4) var(--s3); }
}

/* GLI ORDINI DENTRO LA SCHEDA CLIENTE (17/10/2026, _cliente-ordini.php): gli stessi pezzi dei
   report, ma dentro il riquadro dell'Andamento: niente secondo bordo, niente margini doppi. */
.andamento-ordini { padding: var(--s4) var(--s5) 0; }
.andamento-ordini .ord-filtri { margin: 0 0 var(--s4); padding: 0 0 var(--s4); border: 0; border-bottom: 1px solid var(--bordo-tenue); border-radius: 0; background: transparent; }
.andamento-ordini .ord-cifre { margin: 0 0 var(--s4); }
.andamento-ordini .ord-tabella { margin: 0 calc(-1 * var(--s5)); }

/* LE SCHERMATE DEI LINK (18/10/2026): nelle schede lo stesso riquadro delle foto, con la parte alta
   della pagina (non la pagina intera schiacciata) e l'etichetta; nella foto grande una pagina lunga
   e' larga e si scorre, un post resta stretto come lo si vede. */
.cob-foto.e-schermata img, html.js .cob-anno:not(.in-modifica) .cob-foto.e-schermata img { padding: 0; object-fit: cover; object-position: top center; }
.cob-foto.e-schermata > a:hover img { transform: none; }
.schermata-segno { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .02em;
  color: #fff; background: rgba(16, 24, 40, .72); backdrop-filter: blur(4px); pointer-events: none; }
.lightbox.lightbox-lunga .lightbox-scena { overflow-y: auto; align-items: flex-start; overscroll-behavior: contain; }
.lightbox.lightbox-lunga .lightbox-scena img { max-height: none; height: auto; width: min(100%, 1100px); margin: 0 auto; }
.lightbox.lightbox-post .lightbox-scena img { width: min(100%, 560px); }

/* =============================================================================
   IL TELEFONO (19/10/2026, Mattia: "rifatti un giro di tutte le sezioni da mobile, che siano ben
   usabili e non dei troiai... disordinate e non ci si capisce un cazzo"). In un posto solo, dopo
   tutto il resto: la barra in fondo con "Altro", gli elenchi a carte compatte, le tabelle dei
   numeri che scorrono di lato col nome fermo, le schede delle pagine su una riga, le cifre che
   non escono, i mosaici a due colonne.
   ============================================================================= */
.nav-altro { display: none; }
@media (max-width: 900px) {
  /* La barra: quattro voci e Altro, una riga sola, nomi interi. */
  .nav-oltre { display: none !important; }
  .nav-voce { min-width: 0; }
  .nav-voce > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-voce .nav-lunga { display: none; }
  .nav-voce .nav-corta { display: inline; }
  .nav-voce .nav-avviso { position: absolute; top: 5px; left: calc(50% + 6px); margin: 0; min-width: 16px; height: 16px; font-size: 10px; }
  .nav-voce { position: relative; }
  .nav-altro { display: flex; flex: 1; }
  /* "VEDI COME" NELLA BARRA, l'ultima voce (04/11/2026, Mattia: "admin che non posso cambiare vista"; prima era nascosto
     come "cosa da computer", e l'amministratore dal telefono restava con Status e Sync). La faccia di chi guardi e sotto
     "Vedi come"; il pannello sale dal fondo come il foglio di Altro. */
  .nav .vedi-come { display: flex; flex: 1; min-width: 0; padding: 0; position: static; }
  .vedi-come-pulsante { flex: 1; flex-direction: column; justify-content: center; gap: 3px; min-height: 58px; padding: var(--s2) var(--s1);
    border: 0; border-radius: 0; background: none; font-size: var(--t1); text-align: center; }
  .vedi-come-pulsante:hover, .vedi-come[open] > .vedi-come-pulsante { background: none; }
  .vedi-come .vedi-come-pulsante .avatar { width: 20px; height: 20px; font-size: 8px; }
  .vedi-come-chi { justify-items: center; max-width: 100%; }
  .vedi-come-chi small { display: none; }
  .vedi-come:not(.come-altro) .vedi-come-chi strong { display: none; }
  .vedi-come:not(.come-altro) .vedi-come-chi small { display: block; font-size: var(--t1); letter-spacing: 0; text-transform: none; color: inherit; }
  .vedi-come-chi strong { font-size: var(--t1); font-weight: 500; max-width: 100%; }
  .vedi-come-freccia { display: none; }
  .vedi-come-cognome { display: none; }
  .vedi-come.come-altro .vedi-come-pulsante { border: 0; box-shadow: none; color: var(--ambra-vivo); }
  .vedi-come.come-altro .vedi-come-pulsante .avatar { box-shadow: 0 0 0 2px var(--ambra-vivo); }
  .vedi-come-pannello { position: fixed; left: 10px; right: 10px; width: auto; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); max-height: 70vh; }
  .vedi-come[open]::before { content: ""; position: fixed; inset: 0; z-index: 19; background: rgba(9, 16, 28, .35); }
  .vedi-come-voce { padding: 10px 8px; }
  /* le voci e "Vedi come" figli diretti della barra: tutte larghe uguali */
  .nav-voci { display: contents; }
  .nav-altro > summary { list-style: none; width: 100%; cursor: pointer; }
  .nav-altro > summary::-webkit-details-marker { display: none; }
  .nav-altro[open] > summary { color: #FFF; }
  .nav-foglio { position: fixed; left: 10px; right: 10px; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); z-index: 20;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 10px; border-radius: 18px;
    background: var(--notte, var(--notte)); box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .55); }
  .nav-altro[open]::before { content: ""; position: fixed; inset: 0; z-index: 19; background: rgba(9, 16, 28, .35); }
  .nav-foglio-voce { position: relative; display: grid; justify-items: center; gap: 6px; padding: 14px 6px 12px; border-radius: 12px;
    color: rgba(255, 255, 255, .85); text-decoration: none; font-size: var(--t2); font-weight: 550; text-align: center; background: rgba(255, 255, 255, .05); }
  .nav-foglio-voce:active { background: rgba(255, 255, 255, .12); }
  .nav-foglio-voce .nav-avviso { position: absolute; top: 6px; right: 8px; margin: 0; }
}

@media (max-width: 700px) {
  /* Le schede in testa alle pagine (Statistiche, Radar, la scheda cliente): una riga che scorre. */
  .testata-schede { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; -webkit-overflow-scrolling: touch; }
  .testata-schede::-webkit-scrollbar { display: none; }
  .testata-scheda { flex: none; white-space: nowrap; }
  .testata-riga { gap: var(--s3); }

  /* Le tabelle dei numeri (Ordini, Fatturato, Portafoglio, la scheda cliente, Situazione): scorrono
     di lato dentro il riquadro, col nome fermo a sinistra e un'ombra che dice che c'e' altro. */
  .anni-tabella, .riquadro > .tabella-scorre:has(> table.situazione) { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-left: 0; padding-right: 0; }
  .anni-tabella table { table-layout: auto; min-width: 560px; }
  .anni-tabella colgroup, .anni-tabella col { display: none; }
  .anni-tabella tr > :first-child, table.situazione tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--superficie);
    box-shadow: 6px 0 8px -6px rgba(16, 24, 40, .18); max-width: 46vw; white-space: normal; }
  .anni-tabella td:first-child a { overflow-wrap: anywhere; }

  /* Il periodo e le cifre non escono dalla carta. */
  .periodo-bottone { max-width: 100%; min-width: 0; }
  .periodo-testi { min-width: 0; }
  .periodo-testi b, .periodo-testi small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
  .ord-cifra-numero { font-size: clamp(18px, 5.3vw, 26px); letter-spacing: -.03em; }
  /* La scheda statistica del cliente: le tre sezioni in una riga che scorre, i bottoni che vanno a capo. */
  .sezioni-scheda, .sezioni-scheda.sezioni-n-3 { display: flex; overflow-x: auto; scrollbar-width: none; gap: var(--s2); margin: 0 var(--s4) var(--s4); }
  .sezioni-scheda .sezione-tab { flex: none; padding: 8px 12px; }
  .sezioni-scheda .sezione-testi small { display: none; }
  .stat-viste, .vista-scelta { flex-wrap: wrap; }
  .blocco-testa:has(.andamento-serie) { flex-wrap: wrap; row-gap: 8px; }

  /* I mosaici (Statistiche > Cobranding, Giornali e premi): due tessere per riga. */
  .mkc-mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; padding: var(--s3); }
  .mkc-tessera-logo img { max-height: 44px; }
  .mkc-nome-box { font-size: var(--t2); }
  .mkc-chi > .blocco-testa { flex-wrap: wrap; row-gap: 8px; }
  .mkc-chi > .blocco-testa .vista-scelta { order: 5; }
  /* Il grafico a tre barre: i numeri solo sull'anno scelto, le barre piu' fitte. */
  .mkg-anni { gap: 2px; padding-left: var(--s2); padding-right: var(--s2); }
  .mkg-gruppo { gap: 1px; }
  .mkg-anno:not(.mkc-scelto) .mkg-barra b { display: none; }
  .mkc-anno-a { font-size: 10px; }

  /* Le ricerche del Radar: i tre dati uno sotto l'altro, i tasti a tutta larghezza. */
  .radar-fatti { grid-template-columns: 1fr 1fr; }
  .radar-carta-testa { flex-wrap: wrap; }
  .radar-carta-piede { flex-wrap: wrap; }
  .radar-carta-piede .bottone { flex: 1; justify-content: center; }

  /* Il Radar (e Verifica contatti): il cruscotto a colonna, le tre pastiglie in griglia, tutte in vista
     (22/10/2026: in fila che scorreva la terza restava fuori dallo schermo). */
  .rd-pastiglie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .rd-pastiglie li { min-width: 0; flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px 10px; }
  .rd-pastiglia-ico { width: 26px; height: 26px; border-radius: 8px; }
  .rd-pastiglie small { font-size: 10px; line-height: 1.2; overflow-wrap: anywhere; }
  .rd-pastiglie em { line-height: 1.2; }
  .rd-pastiglie li > span:last-child { min-width: 0; max-width: 100%; }
  .rd-anello { width: 84px; height: 84px; }
  .rd-anello-dentro { width: 64px; height: 64px; }
  .rd-anello-dentro b { font-size: 22px; }
  .rd-anello-dentro b.lungo { font-size: 17px; }
  .rd-cruscotto { grid-template-columns: auto minmax(0, 1fr); gap: var(--s3) var(--s4); }
  .rd-azioni { justify-content: flex-start; }
}

/* =============================================================================
   LA STAMPA DELLE STATISTICHE (19/10/2026, Mattia: "il tasto stampa serve in tutti i report delle
   statistiche, quando ci sono i grafici, che sia ottimizzato per la stampa"). Per ogni pagina col
   tasto (.stat-pdf): foglio bianco, niente comandi (tasti, filtri, schede, frecce dei riquadri),
   le cifre su una riga, le tabelle che entrano nella pagina, i riquadri mai spezzati a meta'.
   ============================================================================= */
@media print {
  body:has(.stat-pdf), body:has(.stat-pdf) .app, body:has(.stat-pdf) .contenuto { background: #fff !important; }
  body:has(.stat-pdf) .bottone, body:has(.stat-pdf) .blocco-riduci, body:has(.stat-pdf) .mkc-filtri-menu, body:has(.stat-pdf) .vista-scelta,
  body:has(.stat-pdf) .sezioni-scheda, body:has(.stat-pdf) .testata-vista, body:has(.stat-pdf) .notifica,
  body:has(.stat-pdf) .rep-filtri, body:has(.stat-pdf) .cliente-briciole { display: none !important; }
  /* Delle caselle (collezioni, tipi) restano scritte quelle accese (03/11/2026): la stampa dice cosa si sta guardando. */
  body:has(.stat-pdf) .ord-filtri { box-shadow: none; border: .25mm solid #E4E7EC; padding: 2mm 4mm; margin-bottom: 4mm; }
  body:has(.stat-pdf) .ord-caselle .pillola:not(:has(input:checked)) { display: none; }
  body:has(.stat-pdf) .ord-caselle .pillola { border: 0; background: none; padding: 0 2mm 0 0; min-height: 0; }
  body:has(.stat-pdf) .ord-caselle input, body:has(.stat-pdf) .ord-caselle-apri { display: none !important; }
  /* Il foglio A4 e' largo come un telefono: le caselle che li' stanno dietro un tasto si stampano lo stesso. */
  body:has(.stat-pdf) .ord-filtri .ord-caselle { display: flex !important; }
  /* Le tabelle degli articoli: una misura sola per nomi, codici e colori. */
  body:has(.stat-pdf) .tabella-articoli table, body:has(.stat-pdf) .tabella-articoli table * { font-size: 7.5pt !important; }
  body:has(.stat-pdf) .tabella-articoli tbody th, body:has(.stat-pdf) .tabella-articoli tbody td { height: auto; }
  /* Dei pulsanti di scelta (Fatturato/Portafoglio/Ordini, 5 anni/10 anni) resta scritto quello scelto. */
  body:has(.stat-pdf) .stat-viste { background: none; padding: 0; }
  body:has(.stat-pdf) .stat-viste a:not(.attiva) { display: none; }
  body:has(.stat-pdf) .stat-viste a.attiva { box-shadow: none; padding: 0 2mm 0 0; font-weight: 700; }
  /* Le cifre una accanto all'altra, quante sono. */
  body:has(.stat-pdf) .ord-cifre { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; gap: 3mm; margin: 0 0 5mm; }
  body:has(.stat-pdf) .ord-cifra { box-shadow: none; border: .25mm solid #E4E7EC; padding: 3mm 4mm; break-inside: avoid; }
  body:has(.stat-pdf) .ord-cifra-numero { font-size: 15pt; }
  /* Le tabelle dei numeri: tutte dentro la pagina, piu' piccole. */
  body:has(.stat-pdf) .anni-tabella, body:has(.stat-pdf) .tabella-scorre { overflow: visible !important; padding: 0 3mm 3mm; }
  body:has(.stat-pdf) .anni-tabella table { table-layout: auto; width: 100%; min-width: 0; font-size: 7.5pt; }
  body:has(.stat-pdf) .anni-tabella th, body:has(.stat-pdf) .anni-tabella td { padding: 1.2mm 1.5mm; }
  body:has(.stat-pdf) .anni-tabella tr { break-inside: avoid; }
  body:has(.stat-pdf) .anni-tabella tr > :first-child { position: static; box-shadow: none; }
  /* Le legende delle torte: i nomi interi. */
  body:has(.stat-pdf) .torta-nome { white-space: normal; overflow: visible; }
  body:has(.stat-pdf) .mkc-due { grid-template-columns: 1.35fr 1fr; }
  /* La scheda statistica del cliente: la testata col nome e il tasto, poi le sezioni. */
  body:has(.stat-pdf) .cliente-testata, body:has(.stat-pdf) .scheda-testata { box-shadow: none; margin: 0 0 4mm; break-inside: avoid; }
  body:has(.stat-pdf) .cliente-sezione .blocco { margin: 0 0 4mm; box-shadow: none; border: .25mm solid #E4E7EC; }
  /* Il mosaico: le tessere non si spezzano fra due pagine. */
  body:has(.stat-pdf) .mkc-mosaico { display: flex !important; flex-wrap: wrap; }
  body:has(.stat-pdf) .mkc-mosaico > li { width: calc(20% - 2.5mm); break-inside: avoid; page-break-inside: avoid; }
  /* "Chi" comincia su un foglio nuovo: le tessere non restano tagliate in fondo alla prima pagina. */
  body:has(.stat-pdf) .mkc-chi { break-before: page; }
  /* Le tabelle con le variazioni (la scheda cliente): colonne strette, a capo dentro la cella. */
  body:has(.stat-pdf) .anni-tabella.con-delta table, body:has(.stat-pdf) .cliente-sezione .anni-tabella table { table-layout: auto; font-size: 6.3pt; }
  body:has(.stat-pdf) .anni-tabella.con-delta th, body:has(.stat-pdf) .anni-tabella.con-delta td,
  body:has(.stat-pdf) .cliente-sezione .anni-tabella th, body:has(.stat-pdf) .cliente-sezione .anni-tabella td { white-space: nowrap; padding: .9mm .7mm; }
  body:has(.stat-pdf) .anni-tabella .scarto { font-size: 5.8pt; padding: 0 .6mm; }
  body:has(.stat-pdf) .anni-tabella td.delta { width: auto; }
  /* Si stampa quello che si vede: il tasto per vederne altri no. */
  body:has(.stat-pdf) [data-mostra-pulsante] { display: none !important; }
}

/* LE COLONNE ORDINABILI (21/10/2026, effetti.js): clic sull'intestazione, la freccia dice il verso. */
table[data-ordinabile] > thead th:not(:empty) { cursor: pointer; user-select: none; }
table[data-ordinabile] > thead th:not(:empty):hover,
table[data-ordinabile] > thead th[aria-sort] { color: var(--blu); }
table[data-ordinabile] > thead th[aria-sort="descending"]::after { content: "\2009\2193"; }
table[data-ordinabile] > thead th[aria-sort="ascending"]::after { content: "\2009\2191"; }
.ord-tabella th a.ord-ordina.su svg { transform: rotate(180deg); }

/* COLLEGA A ITALFABRIC (0148): l'avviso della scheda di un'azienda solo del CRM, il campo e il tasto in riga. */
.collega-italfabric-campi { display: flex; align-items: center; gap: var(--s2); flex-shrink: 0; }
.collega-italfabric-campi .campo { width: 260px; }
@media (max-width: 700px) {
  .collega-italfabric { flex-direction: column; align-items: stretch; }
  .collega-italfabric-campi .campo { width: auto; flex: 1; }
}


/* IL BOX E-COMMERCE DELLA SCHEDA AZIENDA (21/10/2026): anni e cosa ha comprato sul negozio. */
.ecom-scheda-titolo { margin: var(--s4) var(--s5) var(--s2); font-size: var(--t3); font-weight: 600; color: var(--testo-tenue, #6b7280); }

/* ==== E-COMMERCE, UNA PAGINA (21/10/2026) ======================================================
   Tessere con la foto, la categoria in una pastiglia di vetro con la sua tessera colorata, due
   cifre sotto; niente bordi colorati. La scelta Heritage e' la spunta sulla foto. */
.ecom-rileggi { margin-left: auto; }
.ecom-barra { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin: 0 var(--pagina) var(--s5); }
.ecom-cerca { display: flex; align-items: center; gap: var(--s2); color: var(--testo-3); flex: 0 1 300px; }
.ecom-cerca .campo { flex: 1; min-width: 0; }
.ecom-filtri { display: flex; flex-wrap: wrap; gap: 6px; }
.ecom-filtro { --tono: var(--testo-3); display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 9px; border-radius: 999px;
  border: 1px solid var(--bordo-tenue); background: var(--superficie); color: var(--testo-2); font: inherit; font-size: var(--t3); cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s; }
.ecom-filtro i { width: 9px; height: 9px; border-radius: 3px; background: var(--tono); box-shadow: 0 0 8px color-mix(in srgb, var(--tono) 45%, transparent); }
.ecom-filtro small { color: var(--testo-3); font-variant-numeric: tabular-nums; }
.ecom-filtro:hover { background: color-mix(in srgb, var(--tono) 8%, var(--superficie)); }
.ecom-filtro.attivo { background: color-mix(in srgb, var(--tono) 14%, var(--superficie)); color: var(--testo); border-color: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tono) 35%, transparent); font-weight: 500; }
.ecom-griglia { list-style: none; margin: 0; padding: var(--s4) var(--s5) var(--s5); display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s4); }
.ecom-griglia > li.fuori { display: none; }
.ecom-carta { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; text-align: left; padding: 0;
  border: 0; border-radius: 16px; background: var(--superficie); color: inherit; font: inherit;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px -12px rgba(16, 24, 40, .18); transition: transform .15s, box-shadow .15s; }
.ecom-carta:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(16, 24, 40, .06), 0 16px 32px -14px rgba(16, 24, 40, .28); }
.ecom-carta-foto { position: relative; display: block; aspect-ratio: 4 / 3; background: linear-gradient(135deg, #eef1f5, #f8fafc); }
.ecom-carta-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ecom-pastiglia { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 6px;
  border-radius: 999px; font-size: var(--t2); font-weight: 500; color: #fff; background: rgba(17, 24, 39, .38);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ecom-pastiglia i { width: 14px; height: 14px; border-radius: 5px; background: var(--tono); box-shadow: 0 0 10px color-mix(in srgb, var(--tono) 70%, transparent); }
.ecom-avviso { position: absolute; left: 10px; bottom: 10px; height: 24px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 999px;
  font-size: var(--t2); font-weight: 600; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ecom-avviso.tono-rosso { background: rgba(254, 226, 226, .92); color: var(--rosso); }
.ecom-avviso.tono-ambra { background: rgba(254, 243, 199, .92); color: var(--ambra); }
.ecom-avviso.tono-grigio { background: rgba(241, 245, 249, .92); color: #475467; }
.ecom-carta-corpo { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 12px; flex: 1; min-width: 0; }
.ecom-carta-nome { font-weight: 600; letter-spacing: -.01em; line-height: 1.25; min-height: 2.5em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ecom-carta-art, .ecom-carta-sotto { font-size: var(--t3); color: var(--testo-3); line-height: 1.35; overflow-wrap: anywhere; }
.ecom-carta-cifre { display: flex; align-items: flex-end; gap: var(--s3); margin-top: auto; padding-top: 10px; }
.ecom-carta-cifre > span { display: flex; flex-direction: column; line-height: 1.15; }
.ecom-carta-cifre small { font-size: var(--t1); color: var(--testo-3); white-space: nowrap; }
.ecom-carta-cifre b { font-size: var(--t4); font-variant-numeric: tabular-nums; }
.ecom-carta-piu { margin-left: auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; border: 0; cursor: pointer;
  background: var(--sfiora); color: var(--testo-3); }
.ecom-carta-piu:hover { color: var(--blu); background: var(--blu-tenue); }
.ecom-pubblica { margin-left: auto; }
.ecom-scegli { cursor: pointer; }
.ecom-spunta { position: absolute; right: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 8px;
  border-radius: 999px; font-size: var(--t2); font-weight: 600; color: #fff; background: rgba(17, 24, 39, .38);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .15s; }
.ecom-spunta svg { opacity: .45; }
.ecom-spunta [data-si] { display: none; }
.ecom-scegli.scelta .ecom-spunta { background: rgba(5, 150, 105, .9); box-shadow: 0 0 0 1px rgba(255, 255, 255, .35), 0 6px 18px -6px rgba(5, 150, 105, .8); }
.ecom-scegli.scelta .ecom-spunta svg { opacity: 1; }
.ecom-scegli.scelta .ecom-spunta [data-si] { display: inline; }
.ecom-scegli.scelta .ecom-spunta [data-no] { display: none; }
.ecom-scegli.scelta { background: linear-gradient(180deg, var(--superficie), color-mix(in srgb, var(--verde-vivo) 7%, var(--superficie))); }
.ecom-fuori { margin: 0; padding: 0 var(--s5) var(--s4); font-size: var(--t3); color: var(--testo-3); }
.ecom-fuori-voce { display: inline-flex; align-items: center; gap: 4px; margin-left: var(--s2); }
.ecom-collega-nome { font-weight: 600; margin: 0 0 var(--s2); }
.ecom-collega-spiega { margin: 0; font-size: var(--t3); color: var(--testo-3); }
.ecom-collega-campi { display: flex; gap: var(--s3); margin: var(--s3) 0; }
.ecom-collega-campi label { display: flex; flex-direction: column; gap: 4px; font-size: var(--t3); color: var(--testo-3); }
@media (max-width: 700px) {
  .ecom-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); padding: var(--s3); }
  .ecom-carta-cifre { gap: var(--s3); }
  .ecom-cerca { flex: 1 1 100%; }
}

/* L'OGGETTO SPECIALE (la Welcome Box): grande, con la foto del negozio. */
.ecom-speciale { display: grid; grid-template-columns: 250px 1fr; margin: 0 var(--pagina) var(--s5); overflow: hidden;
  border-radius: var(--raggio-g); background: linear-gradient(120deg, #fff 0%, #fff 45%, #f5f0ff 100%);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 12px 32px -16px rgba(91, 33, 182, .28); }
.ecom-speciale-foto { position: relative; min-height: 250px; background: #fff; }
.ecom-speciale-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: left bottom; }
.ecom-speciale-testo { display: flex; flex-direction: column; justify-content: center; gap: var(--s2); padding: var(--s6) var(--s8); }
.ecom-speciale h2 { margin: 0; font-size: 26px; letter-spacing: -.02em; }
.ecom-speciale-prezzo { color: var(--testo-3); font-size: var(--t4); }
.ecom-speciale-quantita { display: flex; align-items: flex-end; gap: var(--s3); margin-top: var(--s3); flex-wrap: wrap; }
.ecom-speciale-quantita label { display: flex; flex-direction: column; gap: 4px; font-size: var(--t2); color: var(--testo-3); }
.ecom-speciale-quantita .campo { width: 120px; height: 44px; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ecom-speciale-quantita .bottone { height: 44px; }
/* Le collezioni da saltare e le loro sezioni, ognuna col suo colore nella tessera. */
.ecom-collezione { scroll-margin-top: var(--s5); }
.ecom-collezione-tessera { width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tono) 85%, #fff), var(--tono));
  box-shadow: 0 0 12px color-mix(in srgb, var(--tono) 45%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .3); }
.ecom-aggiungi-vai { margin-left: var(--s3); }
.ecom-carta.spenta .ecom-carta-foto img { filter: grayscale(1); opacity: .55; }
.ecom-carta-azioni { position: absolute; right: 10px; top: 10px; display: flex; gap: 6px; }
.ecom-carta-azioni .ecom-carta-piu { background: rgba(255, 255, 255, .82); color: var(--testo-2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .18); }
.ecom-carta-azioni form { margin: 0; }
.ecom-carta-piu.togli:hover { color: var(--rosso); background: var(--rosso-tenue); }
.ecom-carta-piu.rimetti { color: var(--verde); background: var(--verde-tenue); }
@media (max-width: 700px) {
  .ecom-speciale { grid-template-columns: 1fr; margin: 0 var(--s4) var(--s4); }
  .ecom-speciale-foto { min-height: 200px; }
  .ecom-speciale-testo { padding: var(--s5); }
  .ecom-barra { margin: 0 var(--s4) var(--s4); }
}

/* LE COLLEZIONI A SCHEDE (21/10/2026): una per volta; la scheda accesa prende il colore della collezione. */
.ecom-barra { justify-content: space-between; }
.ecom-schede { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: var(--superficie);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06); }
.ecom-tab { --tono: var(--testo-3); display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 10px; border: 0; border-radius: 10px;
  background: none; color: var(--testo-2); font: inherit; font-size: var(--t3); font-weight: 500; cursor: pointer; transition: background .15s, color .15s; }
.ecom-tab i { width: 12px; height: 12px; border-radius: 4px; background: var(--tono); opacity: .55; }
.ecom-tab small { color: var(--testo-3); font-variant-numeric: tabular-nums; }
.ecom-tab:hover { background: var(--sfiora); }
.ecom-tab.attiva { background: color-mix(in srgb, var(--tono) 12%, var(--superficie)); color: var(--testo);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tono) 30%, transparent); }
.ecom-tab.attiva i { opacity: 1; box-shadow: 0 0 10px color-mix(in srgb, var(--tono) 60%, transparent); }
/* Il codice articolo-colore (lo SKU), in tutte le tessere e nel box della scheda cliente. */
.ecom-codice { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 6px; background: var(--sfiora); color: var(--testo-2);
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 11.5px; font-weight: 500; letter-spacing: .01em; }

/* IL BOX E-COMMERCE DELLA SCHEDA (rifatto il 21/10/2026: piu' gradevole, anni a tessere e acquisti con foto e codice). */
.ecom-anni { list-style: none; margin: 0; padding: var(--s4) var(--s5) 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.ecom-anni li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--sfiora); }
.ecom-anni li.ora { background: linear-gradient(135deg, color-mix(in srgb, var(--viola-vivo) 12%, #fff), color-mix(in srgb, var(--blu) 8%, #fff));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--viola-vivo) 20%, transparent); }
.ecom-anni small { font-size: var(--t1); color: var(--testo-3); }
.ecom-anni b { font-size: var(--t5, 17px); letter-spacing: -.01em; }
.ecom-anni span { font-size: var(--t1); color: var(--testo-3); }
.ecom-acquisti { list-style: none; margin: 0; padding: 0 var(--s5) var(--s4); display: flex; flex-direction: column; }
.ecom-acquisti li { display: flex; align-items: center; gap: var(--s3); padding: 8px 0; border-top: 1px solid var(--bordo-tenue); }
.ecom-acquisti li:first-child { border-top: 0; }
.ecom-acquisti-foto { flex: 0 0 40px; height: 40px; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #eef1f5, #f8fafc); }
.ecom-acquisti-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ecom-acquisti-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ecom-acquisti-testo b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ecom-acquisti-testo small { color: var(--testo-3); font-size: var(--t2); }
.ecom-acquisti-cifre { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.ecom-acquisti-cifre small { color: var(--testo-3); font-size: var(--t1); }
.ecom-carta-azioni .ecom-carta-piu:hover { color: var(--blu); background: #fff; }
.ecom-carta-azioni .ecom-carta-piu.togli:hover { color: var(--rosso); background: var(--rosso-tenue); }
.ecom-carta-azioni .ecom-carta-piu.rimetti { color: var(--verde); background: var(--verde-tenue); }

/* AGGIUNGI ALLA HERITAGE COLLECTION, la finestra (21/10/2026): larga, le tessere scorrono, Pubblica sempre in vista. */
dialog.scheda.ecom-aggiungi-finestra { width: min(1120px, calc(100vw - 32px)); max-height: calc(100vh - 48px); display: none; }
dialog.scheda.ecom-aggiungi-finestra[open] { display: flex; flex-direction: column; }
.ecom-aggiungi-corpo { overflow: auto; flex: 1; padding-bottom: 0; }
.ecom-aggiungi-spiega { margin: 0 0 var(--s3); color: var(--testo-2); font-size: var(--t3); }
.ecom-aggiungi-corpo .ecom-griglia { padding: 0 0 var(--s4); }
.ecom-aggiungi-piede { align-items: center; border-top: 1px solid var(--bordo-tenue); padding: var(--s3) var(--s5); }
.ecom-aggiungi-conto { margin-right: auto; color: var(--testo-3); font-size: var(--t3); }
.ecom-aggiungi-conto [data-pubblica-conta] { font-weight: 600; color: var(--testo); }
.ecom-pallino { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .25); font-size: var(--t1); }

/* ==== DA TELEFONO, IL GIRO DEL 21/10/2026 (Mattia: "card compattate, tenendo solo le info fondamentali
   a colpo d'occhio e poi dei tasti per espandere... van tolti i tasti per stampare i pdf o esportare
   gli excel... immediato, d'impatto, pochi click, tutto in ordine e in griglia") ==================== */
@media (max-width: 900px) {
  /* Niente Stampa/PDF ne' Excel: dal telefono non si stampa e non si scarica. */
  .stat-excel, .stat-pdf, .uscita-pdf, .esporta-finestra, .solo-computer { display: none !important; }
  /* I riquadri: la testa intera si tocca per aprire e chiudere (effetti.js), la sintesi resta in vista. */
  .blocco > .blocco-testa { cursor: pointer; min-height: 52px; }
  .blocco.compatto > .blocco-testa .blocco-nota { display: inline; }
  /* GLI ELENCHI A SCHEDE COMPATTE: il nome in alto, sotto i dati in fila senza etichette (le cifre
     tengono la loro, piccola e accanto). Meta' altezza di prima, a colpo d'occhio. */
  table.elenco tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 14px; margin-bottom: 8px; }
  table.elenco td, table.elenco td:first-child, table.elenco td:last-child { width: auto; display: inline-flex; justify-content: flex-start;
    text-align: left; gap: 6px; font-size: var(--t2); color: var(--testo-2); }
  table.elenco td + td { margin-top: 0; }
  table.elenco td::before { display: none; }
  table.elenco td.numero::before, table.elenco td.numero-etichetta::before { display: inline; content: attr(data-etichetta); font-size: var(--t1); color: var(--testo-3); }
  /* Etichetta lunga ("Da spedire del confermato", 31/10/2026): va a capo lei, la cifra resta intera su una riga (prima finiva
     in colonna, una cifra per riga). */
  table.elenco td.numero, table.elenco td.numero-etichetta { flex-wrap: wrap; }
  table.elenco td.numero > *, table.elenco td.numero-etichetta > * { overflow-wrap: normal; white-space: nowrap; }
  table.elenco td:first-child { flex: 1 1 100%; margin-bottom: 0; font-size: var(--t4); font-weight: 600; color: var(--testo); }
  table.elenco td:empty { display: none; }
  /* In griglia: due colonne sotto il nome, ogni dato al suo posto. */
  /* le celle di mezzo in fila, larghe quanto serve (04/11/2026: a mezze colonne fisse icone e paese finivano sparsi su righe diverse) */
  table.elenco td:not(:first-child) { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  table.elenco td:not(:first-child) > * { min-width: 0; }
  table.elenco td.cella-contatto { flex-basis: 100%; }
  table.elenco td.cella-contatto small { color: var(--testo-3); font-size: var(--t2); margin-left: 6px; }
  /* Solo l'essenziale a colpo d'occhio: mail, segmento e commerciale stanno nella scheda, a un tocco. */
  table.elenco td[data-etichetta="Email"], table.elenco td[data-etichetta="Segmento"], table.elenco td[data-etichetta="Commerciale"] { display: none; }
  /* I CONTATTI (04/11/2026, Mattia: "da mobile fa cacare"): tre righe sempre uguali - nome, azienda, ruolo a sinistra
     e ultimo contatto a destra - avatar e logo piccoli, schede basse. */
  table.elenco-contatti tr { gap: 4px 10px; padding: 10px 12px; margin-bottom: 6px; }
  table.elenco-contatti .con-avatar .avatar { width: 28px; height: 28px; font-size: var(--t1); }
  table.elenco-contatti td[data-etichetta="Azienda"] { flex: 1 1 100%; font-size: var(--t3); color: var(--testo-2); }
  table.elenco-contatti .cella-azienda .logo-tondo { --d: 20px; }
  table.elenco-contatti td:first-child .altre { white-space: nowrap; }
  table.elenco-contatti td[data-etichetta="Ruolo"] { flex: 1 1 0; white-space: nowrap; text-overflow: ellipsis; display: block; }
  table.elenco-contatti td[data-etichetta="Ultimo contatto"] { flex: 0 0 auto; margin-left: auto; align-items: baseline; }
  table.elenco-contatti td[data-etichetta="Ultimo contatto"] .cella-con { display: inline; font-size: var(--t2); }
  /* I MARCHI: il nome in alto, sotto bandiera, cobranding e Instagram; il resto nella scheda del marchio. */
  table.elenco-marchi { min-width: 0; }
  table.elenco-marchi tr > td:nth-child(2) { order: -1; flex: 1 1 100%; font-size: var(--t4); font-weight: 600; }
  table.elenco-marchi tr > td:first-child { flex: 0 0 auto; margin: 0; font-size: var(--t2); font-weight: 400; }
  table.elenco-marchi td[data-etichetta="Importanza"], table.elenco-marchi td[data-etichetta="Probabilità"],
  table.elenco-marchi td[data-etichetta="Categoria"], table.elenco-marchi td[data-etichetta="Sito"] { display: none; }
  table.elenco-marchi td::before, table.elenco-marchi td.numero::before { display: none; }
}
/* I filtri a caselle dei report da telefono: chiusi dietro la loro riga (_rep-filtri.php). */
.solo-telefono { display: none; }
@media (max-width: 900px) {
  .solo-telefono { display: flex; }
  .ord-caselle-apri { width: 100%; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s3); padding: 10px 12px;
    border: 1px solid var(--bordo-tenue); border-radius: 12px; background: var(--sfiora); color: var(--testo); font: inherit; text-align: left; cursor: pointer; }
  .ord-caselle-apri span { display: flex; flex-direction: column; min-width: 0; }
  .ord-caselle-apri small { color: var(--testo-3); font-size: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ord-caselle-apri svg { flex-shrink: 0; transition: transform .15s; }
  .ord-caselle-apri[aria-expanded="true"] svg { transform: rotate(180deg); }
  .ord-filtri .ord-caselle { display: none; }
  .ord-filtri.caselle-aperte .ord-caselle { display: flex; flex-direction: column; gap: var(--s3); }
}
/* LE TABELLE DEI REPORT (Ordini, Fatturato, Portafoglio, E-commerce) DA TELEFONO: niente piu' scorrere di lato,
   ogni riga una scheda - il nome in alto, sotto le cifre in fila con la loro etichetta piccola (effetti.js la
   copia dall'intestazione). Le tabelle a colonne di anni restano a scorrimento. */
@media (max-width: 900px) {
  .anni-tabella.ord-tabella { overflow: visible; }
  .ord-tabella table { min-width: 0 !important; width: 100%; }
  .ord-tabella thead, .ord-tabella colgroup { display: none; }
  .ord-tabella table, .ord-tabella tbody, .ord-tabella tfoot { display: block; }
  .ord-tabella tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 10px 0; border-bottom: 1px solid var(--bordo-tenue); }
  .ord-tabella tr > :first-child { position: static; flex: 1 1 100%; max-width: none; box-shadow: none; background: none; font-size: var(--t3); }
  .ord-tabella td, .ord-tabella th { display: inline-flex; align-items: baseline; gap: 5px; padding: 0 !important; border: 0 !important; height: auto;
    text-align: left; font-size: var(--t2); white-space: nowrap; }
  .ord-tabella tr > :first-child { white-space: normal; }
  .ord-tabella td[data-etichetta]::before { content: attr(data-etichetta); color: var(--testo-3); font-size: var(--t1); font-weight: 400; }
  .ord-tabella td:empty { display: none; }
  .ord-tabella tr { padding: 10px 16px; }
  .ord-tabella td[data-etichetta="Colore"], .ord-tabella td[data-etichetta="Collezione"], .ord-tabella td[data-etichetta="Famiglia"] { display: none; }
  .ord-tabella td[data-etichetta="Paese"]::before { display: none; }
  /* A colpo d'occhio: il valore e la variazione; quanto era prima si legge dal computer. */
  .ord-tabella td.numero small.ord-sotto, .ord-tabella td:has(> .cella-vuota:only-child) { display: none; }
  /* Statistiche > Clienti: la posizione accanto al nome, non su una riga sua. */
  table.elenco td.tc-pos { flex: 0 0 auto; font-size: var(--t2); color: var(--testo-3); font-weight: 500; }
  table.elenco td.tc-pos + td { flex: 1 1 calc(100% - 48px); font-size: var(--t4); font-weight: 600; color: var(--testo); }
}

/* E-COMMERCE DA TELEFONO (21/10/2026): le collezioni in una riga che scorre, la Welcome Box una carta bassa. */
@media (max-width: 900px) {
  .ecom-barra { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .ecom-schede { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ecom-schede::-webkit-scrollbar { display: none; }
  .ecom-tab { flex: none; white-space: nowrap; }
  .ecom-cerca { flex: 1 1 auto; }
  .ecom-speciale { grid-template-columns: 104px minmax(0, 1fr); margin: 0 var(--s4) var(--s4); }
  .ecom-speciale-foto { min-height: 0; }
  .ecom-speciale-testo { padding: var(--s3) var(--s4); gap: 2px; }
  .ecom-speciale h2 { font-size: 18px; }
  .ecom-speciale-prezzo { font-size: var(--t3); }
  .ecom-speciale-quantita { margin-top: var(--s2); gap: var(--s2); }
  .ecom-speciale-quantita label span { display: none; }
  .ecom-speciale-quantita .campo { width: 72px; height: 38px; font-size: 16px; }
  .ecom-speciale-quantita .bottone { height: 38px; padding: 0 12px; }
}
@media (max-width: 900px) {
  .ecom-cerca { width: 100%; min-width: 0; }
  .ecom-cerca .campo { width: 100%; min-width: 0; }
}
/* La testata della scheda cliente da telefono: le prime due cifre, le altre con "Altre cifre" (effetti.js). */
.cifre-altre { display: none; }
@media (max-width: 900px) {
  .cifre:not(.tutte) > .cifra:nth-of-type(n+3) { display: none; }
  .cifre-altre { display: block; grid-column: 1 / -1; justify-self: start; margin-top: 4px; padding: 6px 12px; border: 0; border-radius: 999px;
    background: rgba(255, 255, 255, .1); color: #fff; font: inherit; font-size: var(--t2); cursor: pointer; }
}
/* La foto della Welcome Box (22/10/2026, Mattia: "mi piaceva che fosse attaccata in basso a sinistra al bianco,
   volevo solo un po' di spazio bianco in alto"): la foto e' quadrata e col fondo bianco. INTERA (contain, mai
   tagliata), appoggiata in basso a sinistra, sul bianco della carta: il bianco della foto sopra la scatola e'
   lo spazio in alto. La colonna stretta quanto la foto, cosi' a destra non resta un vuoto. Esaurito pieno, rosso. */
.ecom-avviso.tono-rosso { background: var(--rosso-vivo); color: #fff; box-shadow: 0 4px 12px -4px rgba(217, 45, 32, .6); }

/* ==== STATISTICHE > E-COMMERCE, IL FUNNEL (22/10/2026) ==================================================== */
.ecf-anni { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0 var(--pagina) var(--s5); padding: 4px; border-radius: 14px; background: var(--superficie);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06); align-self: flex-start; }
.ecf-anni a { padding: 8px 16px; border-radius: 10px; font-size: var(--t3); font-weight: 500; color: var(--testo-2); text-decoration: none; }
.ecf-anni a:hover { background: var(--sfiora); }
.ecf-anni a.attiva { background: var(--notte); color: #fff; font-weight: 600; box-shadow: 0 4px 12px -4px rgba(15, 27, 45, .5); }
.ecf-funnel { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr) 56px minmax(0, 1fr); align-items: stretch; margin: 0 var(--pagina) var(--s5); }
.ecf-passo { --tinta: var(--blu); position: relative; display: flex; flex-direction: column; gap: 4px; padding: var(--s5) var(--s6); border-radius: 18px; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tinta) 14%, #fff), #fff 70%);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 14px 30px -18px color-mix(in srgb, var(--tinta) 70%, transparent); }
.ecf-passo.tono-ambra { --tinta: var(--ambra); }
.ecf-passo.tono-verde { --tinta: var(--verde-vivo); }
.ecf-passo.tono-blu { --tinta: var(--blu); }
.ecf-tessera { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 6px; border-radius: 11px; color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tinta) 75%, #fff), var(--tinta)); box-shadow: 0 6px 16px -6px var(--tinta); }
.ecf-passo small { color: var(--testo-2); font-size: var(--t3); font-weight: 500; }
.ecf-passo b { font-size: 40px; line-height: 1.05; letter-spacing: -.03em; color: var(--testo); }
.ecf-passo > span:last-child { color: var(--testo-3); font-size: var(--t3); }
.ecf-freccia { position: relative; display: grid; place-items: center; }
.ecf-freccia::before { content: ""; width: 22px; height: 22px; border-top: 3px solid var(--bordo-forte); border-right: 3px solid var(--bordo-forte);
  transform: rotate(45deg); border-radius: 2px; }
.ecf-freccia span { position: absolute; top: calc(50% + 18px); padding: 2px 8px; border-radius: 999px; font-size: var(--t2); font-weight: 700;
  color: var(--verde); background: var(--verde-tenue); white-space: nowrap; }
.ecf-storia { padding: var(--s4) var(--s5) 0; }
.ord-tabella tr.ecf-acceso > * { background: color-mix(in srgb, var(--blu) 6%, var(--superficie)); }
.ecf-due { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s5); margin: 0 var(--pagina); }
.ecf-due > .blocco { margin-left: 0; margin-right: 0; }
.ecf-lista { list-style: none; margin: 0; padding: var(--s2) var(--s5) var(--s4); }
.ecf-lista li { display: flex; align-items: center; gap: var(--s3); padding: 9px 0; border-top: 1px solid var(--bordo-tenue); }
.ecf-lista li:first-child { border-top: 0; }
.ecf-foto { flex: 0 0 40px; height: 40px; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #eef1f5, #f8fafc); }
.ecf-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ecf-posto { flex: 0 0 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--sfiora); color: var(--testo-3); font-size: var(--t2); font-weight: 600; }
.ecf-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ecf-testo b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ecf-testo b a, .ecf-testo small a { color: inherit; text-decoration: none; }
.ecf-testo b a:hover, .ecf-testo small a:hover { color: var(--blu); }
.ecf-testo small { color: var(--testo-3); font-size: var(--t2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ecf-cifre { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.ecf-cifre small { color: var(--testo-3); font-size: var(--t1); }
.ecf-wb { padding: 1px 7px; border-radius: 999px; font-size: var(--t1); font-weight: 600; color: #5B21B6; background: color-mix(in srgb, var(--viola-vivo) 12%, #fff); }
.ecf-wb.no { color: #475467; background: var(--sfiora); }
@media (max-width: 1100px) {
  .ecf-due { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .ecf-anni { margin: 0 var(--s4) var(--s4); }
  .ecf-funnel { grid-template-columns: minmax(0, 1fr); margin: 0 var(--s4) var(--s4); gap: 0; }
  .ecf-freccia { height: 34px; }
  .ecf-freccia::before { width: 14px; height: 14px; transform: rotate(135deg); }
  .ecf-freccia span { top: auto; left: calc(50% + 20px); }
  .ecf-passo { padding: var(--s4) var(--s5); }
  .ecf-passo b { font-size: 32px; }
  .ecf-due { margin: 0; }
  .ecf-due > .blocco { margin: 0 var(--s4) var(--s4); }
}
@media (max-width: 900px) {
  .ecf-anni { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: calc(100% - 32px); }
  .ecf-anni a { flex: none; white-space: nowrap; padding: 8px 12px; }
}

/* Statistiche E-commerce, anno per anno (22/10/2026): prima le Welcome Box, AMBRA (la barra "fatto"),
   poi i metri, blu (il pezzo "sopra"); l'anno in corso tratteggiato, come sempre. */
.ecf-storia .storia-colonnina > .storia-barra:not(.storia-barra-sopra) { background: linear-gradient(180deg, #FDB022, #DC6803); box-shadow: 0 1px 6px rgba(220, 104, 3, .25); }
.ecf-storia .storia-anno.in-corso .storia-colonnina > .storia-barra:not(.storia-barra-sopra) { background: repeating-linear-gradient(135deg, #DC6803 0 5px, #FEC84B 5px 10px); box-shadow: none; }
.ecf-storia .storia-barra.storia-barra-sopra { background: linear-gradient(180deg, #7FAEFF, var(--blu) 70%, var(--blu-scuro)); box-shadow: 0 1px 6px rgba(37, 99, 235, .22); }
.ecf-storia .storia-anno.in-corso .storia-barra.storia-barra-sopra { background: repeating-linear-gradient(135deg, var(--blu) 0 5px, #9BC0FF 5px 10px); box-shadow: none; }
.ecf-storia .storia-valore, .ecf-storia .storia-anno.in-corso .storia-valore { color: var(--ambra); }
.ecf-storia .storia-valore.storia-valore-sopra, .ecf-storia .storia-anno.in-corso .storia-valore.storia-valore-sopra { color: var(--blu); }
.ecf-storia .storia-legenda .storia-chiave-fatto { background: var(--ambra-vivo); }
.ecf-storia .storia-legenda .storia-chiave-sopra { background: var(--blu); }
/* Il prezzo medio al metro accanto ai metri: una pastiglia verde, sulla stessa riga. */
.ecf-metri { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.ecf-passo .ecf-prezzo { display: inline-flex; padding: 4px 10px; border-radius: 999px; font-size: var(--t3); font-weight: 650; white-space: nowrap;
  color: var(--verde); background: var(--verde-tenue); box-shadow: inset 0 0 0 1px rgba(6, 118, 71, .12); }
/* In stampa tutti i tessuti e tutti i clienti, senza il "Mostra altri". */
@media print {
  .ecf-lista li[hidden] { display: flex !important; }
  .ecf-lista + [data-mostra-pulsante] { display: none !important; }
}
@media (max-width: 900px) {
  /* le due barre affiancate strette, ovunque (era solo l'E-commerce; 04/11/2026: nella scheda del cliente uscivano dalla carta) */
  .storia-pila.affiancate { gap: 4px; }
  .storia-colonnina { width: 22px; }
  .storia-colonnina > .storia-valore { font-size: 11px; }
}

/* COBRANDING, GIORNALI, SCUOLE DA TELEFONO (22/10/2026, Mattia: "occhio ai titoli e ai filtri che da
   mobile graficamente scoppiano e vanno fuori griglia"): le cifre sulla stessa griglia dei riquadri
   (16px), la testa di "Chi" su due righe pulite - titolo e conto sopra, Mosaico/Tabella sotto a
   tutta larghezza, allineati al titolo. */
@media (max-width: 1100px) {
  .contenuto > .ord-cifre { margin-left: var(--s4); margin-right: var(--s4); }
}
@media (max-width: 900px) {
  .mkc-chi > .blocco-testa { flex-wrap: wrap; row-gap: var(--s3); padding-top: var(--s3); padding-bottom: var(--s3); }
  .mkc-chi > .blocco-testa > .blocco-titolo { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mkc-chi > .blocco-testa > .blocco-nota { order: 0; flex: none; flex-basis: auto; margin-left: auto; padding-bottom: 0; white-space: nowrap; }
  .mkc-chi > .blocco-testa .vista-scelta { order: 5; flex: 1 0 100%; display: grid; grid-template-columns: 1fr 1fr; margin-left: 0; }
  .mkc-chi > .blocco-testa .vista-scelta button { justify-content: center; }
  .mkc-barra { margin-left: var(--s4); margin-right: var(--s4); }
}

/* VERIFICA CONTATTI A CARTE, COME IL RADAR (22/10/2026): le carte del Radar (.rd-riga, .rd-dove, .rd-si,
   .rd-no), con l'avatar al posto del logo e l'azienda nel riquadro. Margini come le altre pagine. */
.censire { margin: 0 var(--pagina) var(--s6); }
.censire-ordina { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 var(--s3); font-size: var(--t2); color: var(--testo-3); }
.censire-ordina a { padding: 4px 10px; border-radius: 999px; color: var(--testo-2); text-decoration: none; background: var(--superficie); box-shadow: inset 0 0 0 1px var(--bordo); }
.censire-ordina a:hover { color: var(--testo); box-shadow: inset 0 0 0 1px var(--bordo-forte); }
.censire-ordina a.attiva { background: var(--testo); color: #fff; box-shadow: none; }
.censire-avatar { align-self: center; font-size: var(--t4); font-weight: 650; }
.censire-carte .rd-cosa { gap: 4px; }
.censire-carte .rd-titolo { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.censire-indirizzo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.censire-fatti { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 2px 0 0; font-size: var(--t2); color: var(--testo-3); }
.censire-fatti > * + *::before { content: "\00b7"; margin: 0 7px; color: var(--testo-3); }
.censire-fatti .segno { margin-right: 0; }
.censire-fatti a { color: var(--testo-2); text-decoration: none; }
.censire-fatti a:hover { color: var(--blu); }
.censire-dove { cursor: inherit; }
.censire-logo { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; overflow: hidden; background: var(--superficie); color: var(--testo-3);
  box-shadow: inset 0 0 0 1px var(--bordo-tenue); }
.censire-logo img { width: 100%; height: 100%; object-fit: contain; }
.censire-dove .rd-dove-testo small { color: var(--testo-3); }
.censire-dove.dubbio { background: var(--ambra-tenue); }
.censire-carte .rd-azioni { justify-content: flex-end; }
@media (max-width: 1100px) { .censire { margin-left: var(--s4); margin-right: var(--s4); } }
@media (max-width: 700px) {
  .censire-carte .rd-riga { grid-template-columns: 40px minmax(0, 1fr); gap: var(--s3); padding: var(--s3); }
  .censire-avatar { width: 40px; height: 40px; align-self: start; }
  .censire-carte .rd-dove, .censire-carte .rd-azioni { grid-column: 1 / -1; }
  .censire-carte .rd-si { flex: 1; }
  .censire-fatti { gap: 6px 12px; }
  .censire-fatti > * + *::before { content: none; }
}

/* SCUOLE E PROGETTI (22/10/2026): i metri nella tessera, e l'elenco dei progetti dell'anno. */
.mkg-elenco { margin: 0 var(--pagina) var(--s5); }
.mkg-progetti { list-style: none; margin: 0; padding: var(--s2) var(--s5) var(--s4); }
.mkg-progetti li { --tinta: var(--blu); display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: var(--s3); padding: 10px 0; border-top: 1px solid var(--bordo-tenue); }
.mkg-progetti li:first-child { border-top: 0; }
.mkg-progetti li.tono-ambra { --tinta: var(--ambra); }
.mkg-progetti li.tono-rosa { --tinta: var(--rosa-vivo); }
.mkg-progetto-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--tinta); background: color-mix(in srgb, var(--tinta) 12%, #fff); }
.mkg-progetto-testo { display: grid; gap: 2px; min-width: 0; }
.mkg-progetto-testo b { font-weight: 600; color: var(--testo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkg-progetto-testo small { display: flex; align-items: center; gap: 6px; font-size: var(--t2); color: var(--testo-3); min-width: 0; }
.mkg-progetto-testo small a { color: var(--testo-2); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkg-progetto-testo small a:hover { color: var(--blu); }
.mkg-progetto-tipo { padding: 1px 8px; border-radius: 999px; font-weight: 600; color: var(--tinta); background: color-mix(in srgb, var(--tinta) 10%, #fff); }
.mkg-progetto-giorno { font-size: var(--t2); color: var(--testo-3); white-space: nowrap; }
@media (max-width: 1100px) { .mkg-elenco { margin-left: var(--s4); margin-right: var(--s4); } }
@media print { .mkg-progetti li[hidden] { display: grid !important; } .mkg-progetti + [data-mostra-pulsante] { display: none !important; } }

/* TOGLIERE DA VERIFICA CONTATTI (0154, 22/10/2026): la x apre due strade, grandi e spiegate - "Non e'
   mio" (grigia, solo per me) e "Archivia" (rossa, per tutti). La vista "Nascosti da me" e Rimetti. */
dialog.scheda.censire-togli { width: min(520px, calc(100vw - 32px)); }
.censire-togli h3 { overflow: visible; white-space: normal; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.3; }
.togli-scelte { display: grid; gap: var(--s3); }
.togli-scelta { --tinta: var(--testo-2); --tinta-tenue: var(--sfiora); display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: var(--s3);
  width: 100%; padding: var(--s4); border: 0; border-radius: var(--raggio-g); background: var(--superficie); text-align: left; font: inherit; color: var(--testo); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--bordo); transition: box-shadow .15s, background .15s, transform .15s; }
.togli-scelta:hover, .togli-scelta:focus-visible { background: var(--tinta-tenue); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tinta) 45%, transparent); outline: none; transform: translateY(-1px); }
.togli-scelta.rosso { --tinta: var(--rosso); --tinta-tenue: var(--rosso-tenue); }
.togli-scelta:disabled { opacity: .55; cursor: default; transform: none; }
.togli-scelta.in-attesa { opacity: 1; }
.togli-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--tinta); background: var(--tinta-tenue); }
.togli-scelta.rosso .togli-ico { color: #fff; background: linear-gradient(145deg, #F97066, var(--rosso)); }
.togli-testo { display: grid; gap: 3px; min-width: 0; }
.togli-testo b { font-size: var(--t4); font-weight: 650; }
.togli-scelta.rosso .togli-testo b { color: var(--rosso); }
.togli-testo small { font-size: var(--t2); line-height: 1.45; color: var(--testo-2); }
.censire-nascosti-spiega { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 var(--pagina) var(--s3); padding: 10px 14px; border-radius: var(--raggio);
  background: var(--sfiora); color: var(--testo-2); font-size: var(--t3); }
.censire-nascosti-spiega a { margin-left: auto; font-weight: 600; color: var(--blu); text-decoration: none; }
.censire-nascosta { cursor: default; opacity: .92; }
.rd-si.rd-rimetti { background: var(--superficie); color: var(--blu); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--blu) 35%, transparent); }
.rd-si.rd-rimetti:hover { background: var(--blu-tenue); }
@media (max-width: 1100px) { .censire-nascosti-spiega { margin-left: var(--s4); margin-right: var(--s4); } }

/* LE TESSERE DELLE SCUOLE A PAROLE (22/10/2026): pastiglie col colore della serie - rosa la visita, ambra i
   tessuti, blu i progetti - nella tessera e nella colonna Cosa della tabella. */
.mkg-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.mkg-chip { --tinta: var(--blu); display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: var(--t1); font-weight: 600;
  white-space: nowrap; color: var(--tinta); background: color-mix(in srgb, var(--tinta) 11%, #fff); }
.mkg-chip.tono-rosa { --tinta: var(--rosa-vivo); }
.mkg-chip.tono-ambra { --tinta: var(--ambra); }
.mkg-chip.tono-blu { --tinta: var(--blu-scuro); }
.mkc-tab-cosa .mkg-chip { margin: 2px 4px 2px 0; }

/* VERIFICA CONTATTI IN ALTO COME IL RADAR (22/10/2026): il cruscotto e i filtri del Radar (.rd-cruscotto,
   .rd-filtro), anche come link; i toni delle fonti (rosa le visite, verde i tipi); a destra Conferma tutte. */
a.rd-filtro { text-decoration: none; color: var(--testo); }
.rd-filtro.tono-rosa { --tinta: var(--rosa); --tinta-tenue: var(--rosa-tenue); }
.rd-filtro.tono-verde { --tinta: var(--verde); --tinta-tenue: var(--verde-tenue); }
.rd-filtri-riga { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s3); margin: 0 var(--pagina) var(--s4); }
.rd-filtri-riga .rd-filtri { margin: 0; }
.rd-filtri-riga .censire-tutte { margin: 0; }
.rd-filtro.filtro-nascosti { margin-left: var(--s2); }
@media (max-width: 1100px) { .rd-filtri-riga { margin-left: var(--s4); margin-right: var(--s4); } }
@media (max-width: 700px) { .rd-filtri-riga .censire-tutte, .rd-filtri-riga .censire-tutte .rd-si { width: 100%; } }

/* LE MAIL SULLA CARTA (22/10/2026, "senza che diventi una patacca"): l'icona e il grassetto del colore del
   rapporto - verde in A, blu in copia, ambra inoltrata, grigio di un collega o senza mail. */
.censire-mail { --tinta: var(--testo-2); display: inline-flex; align-items: center; gap: 5px; color: var(--tinta); text-decoration: none; }
.censire-mail b { font-weight: 650; }
.censire-mail:hover b { text-decoration: underline; }
.censire-mail.tono-verde { --tinta: var(--verde); }
.censire-mail.tono-blu { --tinta: var(--blu-scuro); }
.censire-mail.tono-ambra { --tinta: var(--ambra); }
.censire-mail.tono-grigio { --tinta: var(--testo-2); }
.censire-fatti .da-assegnare { color: var(--ambra); font-weight: 600; }

/* IL TASTO FILTRI DI VERIFICA CONTATTI (22/10/2026): a destra dei filtri per fonte, i filtri accesi accanto. */
.censire-filtri-riga { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.censire-filtri-modulo { display: grid; gap: var(--s3); }
.censire-filtri-modulo .ord-filtro { display: grid; gap: 4px; }
@media (max-width: 700px) { .censire-filtri-riga { width: 100%; } .censire-filtri .mkc-filtri-pannello { left: 0; right: auto; } }

/* ESPORTA RASSEGNA STAMPA (22/10/2026): la finestra - il periodo a pastiglie e i due giorni in griglia,
   l'elenco delle uscite come carte spuntabili (la schermata, la testata, il titolo, il giorno), il conto e
   il tasto in fondo. */
dialog.scheda.rassegna-finestra { width: min(760px, calc(100vw - 32px)); }
.rassegna-modulo { display: flex; flex-direction: column; max-height: min(86vh, 860px); }
.rassegna-modulo .scheda-corpo { display: grid; gap: var(--s4); overflow: auto; min-height: 0; }
.rassegna-modulo h3 { display: flex; align-items: center; gap: 8px; }
.rassegna-periodo { display: grid; gap: var(--s3); }
.rassegna-scorciatoie { display: flex; flex-wrap: wrap; gap: 6px; }
.rassegna-scorciatoie .pillola { border: 0; cursor: pointer; font: inherit; }
.rassegna-scorciatoie .pillola.attiva { background: var(--testo); color: #fff; }
.rassegna-giorni { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.rassegna-giorni label { display: grid; gap: 4px; font-size: var(--t2); font-weight: 600; color: var(--testo-2); }
.rassegna-giorni .campo { height: 40px; }
.rassegna-lista { min-height: 120px; transition: opacity .2s; }
.rassegna-lista.in-arrivo { opacity: .45; }
.rassegna-attesa, .rassegna-vuota { margin: 0; padding: var(--s6) var(--s4); text-align: center; color: var(--testo-3); }
.rassegna-vuota { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rassegna-conta { display: flex; align-items: center; gap: 8px; margin-bottom: var(--s2); font-size: var(--t3); color: var(--testo-2); }
.rassegna-conta b { color: var(--testo); }
.rassegna-tutte { margin-left: auto; border: 0; background: none; padding: 4px 0; font: inherit; font-weight: 600; color: var(--blu); cursor: pointer; }
.rassegna-uscite { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rassegna-uscita { position: relative; display: grid; grid-template-columns: 22px 64px minmax(0, 1fr) auto; align-items: center; gap: var(--s3);
  padding: 8px 12px 8px 10px; border-radius: var(--raggio); background: var(--superficie); box-shadow: inset 0 0 0 1px var(--bordo); cursor: pointer; transition: box-shadow .15s, background .15s; }
.rassegna-uscita:hover { box-shadow: inset 0 0 0 1px var(--bordo-forte); }
.rassegna-uscita:has(input:checked) { background: color-mix(in srgb, var(--blu) 5%, #fff); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--blu) 45%, transparent); }
.rassegna-uscita input { position: absolute; opacity: 0; pointer-events: none; }
.rassegna-spunta { grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: transparent; box-shadow: inset 0 0 0 1.5px var(--bordo-forte); }
.rassegna-uscita:has(input:checked) .rassegna-spunta { background: var(--blu); color: #fff; box-shadow: none; }
.rassegna-uscita:has(input:focus-visible) { outline: 2px solid var(--blu); outline-offset: 2px; }
.rassegna-foto { grid-column: 2; grid-row: 1; display: grid; place-items: center; width: 64px; height: 48px; border-radius: 8px; overflow: hidden; background: var(--sfiora); color: var(--testo-3); }
.rassegna-foto img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* Il cobranding (23/10/2026): il logo del marchio intero su bianco; i canali sotto il nome; i filtri in cima. */
.rassegna-foto.logo { background: #fff; box-shadow: inset 0 0 0 1px var(--bordo); }
.rassegna-foto.logo img { object-fit: contain; object-position: center; padding: 6px; }
.rassegna-testi .rassegna-canali { font-weight: 500; letter-spacing: 0; }
.rassegna-filtri { margin: 0 0 var(--s3); color: var(--testo-2); font-size: var(--t2); }
.rassegna-scelte { display: grid; gap: var(--s4); margin-bottom: var(--s4); }
.rassegna-testi { grid-column: 3; grid-row: 1; display: grid; gap: 2px; min-width: 0; }
.rassegna-testi small { font-size: var(--t1); font-weight: 650; letter-spacing: .04em; color: var(--testo-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rassegna-testi b { font-size: var(--t3); font-weight: 600; color: var(--testo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rassegna-giorno { grid-column: 4; grid-row: 1; font-size: var(--t2); color: var(--testo-3); white-space: nowrap; }
.rassegna-piede { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.rassegna-nota { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t2); color: var(--testo-3); }
@media (max-width: 700px) {
  .rassegna-uscita { grid-template-columns: 22px 52px minmax(0, 1fr); }
  .rassegna-foto { width: 52px; height: 40px; }
  .rassegna-giorno { grid-column: 3; grid-row: 2; }
  .rassegna-nota { display: none; }
  .rassegna-piede .bottone { width: 100%; justify-content: center; }
}
@media print { .rassegna-apri { display: none !important; } }
.rassegna-scorciatoie .pillola { height: 32px; padding: 0 14px; font-size: var(--t3); background: var(--sfiora); color: var(--testo-2); }


/* IL MARGINE DI PAGINA (22/10/2026): sotto i 1100px 16px per tutte le sezioni, insieme. */
@media (max-width: 1100px) { :root { --pagina: var(--s4); } }

/* FATTURATO ANNO PER ANNO A PILA (23/10/2026): le colonne del Cobranding (mkc-anni), ognuna una pila di fette,
   una per capogruppo, gli altri in grigio in cima; le scelte (primi N, euro/metri) a pastiglie. */
.fat-scelte { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s6); padding: var(--s2) var(--s5) var(--s3); border-bottom: 1px solid var(--bordo); }
.fat-scelta { display: inline-flex; align-items: center; gap: var(--s2); }
.fat-etichetta { font-size: var(--t1); font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--testo-3); }
.fat-scelta .stat-viste a { padding: 5px 12px; font-size: var(--t2); }
.fat-legenda { padding: var(--s4) var(--s5) 0; }
.fat-pile { height: 280px; padding: var(--s5) var(--s6) var(--s4); gap: var(--s5); }
.fat-anno { cursor: default; }
.fat-tot { font-size: var(--t1); font-weight: 700; color: var(--testo-2); white-space: nowrap; }
.fat-pila { display: flex; flex-direction: column-reverse; width: min(68px, 78%); height: var(--h); min-height: 2px; border-radius: 6px 6px 2px 2px; overflow: hidden; }
.fat-fetta { flex: 0 0 var(--q); background: var(--tinta); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); }
.fat-fetta:hover { filter: brightness(1.1) saturate(1.1); }
.fat-anno .mkc-anno-a small { font-weight: 500; color: var(--testo-3); }
/* I colori delle fette: dalla tavolozza dei grafici (Layout::tinta, nello style della fetta), un posto solo (24/10/2026). */
.pila-altri { --tinta: color-mix(in srgb, var(--testo-3) 40%, var(--superficie)); }

/* LE ESPORTAZIONI (24/10/2026, Mattia: "rendi questi pulsanti per le esportazioni piu' cool, in tutte le pagine, che
   si notino di piu'"): un gruppo solo a destra sotto le schede; ogni tasto e' una pastiglia di vetro con la tessera
   del suo formato (Excel verde, PowerPoint arancio, stampa blu: colore che informa) e due righe, cosa e cosa dentro.
   Il contenuto lo scrive Layout::uscita. */
.stat-uscite { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; flex: 1 1 auto; }
.stat-uscite:empty { display: none; }
.stat-uscite .stat-pdf { margin-left: 0; }
.uscita-excel { --tinta: #12B76A; } .uscita-ppt { --tinta: #F2700F; } .uscita-stampa { --tinta: #3B82F6; }
.bottone.tasto-uscita, .stat-testata .bottone.tasto-uscita, .stat-comandi .bottone.tasto-uscita {
  display: inline-flex; align-items: center; gap: 10px; min-height: 0; padding: 6px 16px 6px 6px; border-radius: 14px;
  color: #FFF; text-align: left; line-height: 1.15;
  background: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .05));
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 18px rgba(3, 10, 30, .28);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.bottone.tasto-uscita:hover, .stat-testata .bottone.tasto-uscita:hover, .stat-comandi .bottone.tasto-uscita:hover {
  color: #FFF; transform: translateY(-1px); border-color: color-mix(in srgb, var(--tinta) 60%, rgba(255, 255, 255, .3));
  background: linear-gradient(180deg, color-mix(in srgb, var(--tinta) 26%, rgba(255, 255, 255, .14)), rgba(255, 255, 255, .06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 26px color-mix(in srgb, var(--tinta) 30%, rgba(3, 10, 30, .3));
}
.bottone.tasto-uscita:active { transform: translateY(0); }
.uscita-tessera {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; color: #FFF;
  background: linear-gradient(140deg, color-mix(in srgb, var(--tinta) 70%, #FFF), var(--tinta) 55%, color-mix(in srgb, var(--tinta) 80%, #000));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 3px 10px color-mix(in srgb, var(--tinta) 55%, transparent);
}
.uscita-testo { display: grid; gap: 1px; }
.uscita-testo b { font-size: 14px; font-weight: 650; letter-spacing: -.005em; }
@media print { .stat-uscite { display: none !important; } }

/* IL FATTURATO ANNO PER ANNO A PILA della Situazione (26/10/2026): pieno il fatturato fino a ieri (con la cifra dentro),
   chiaro il resto dell'anno, tratteggiato il portafoglio dell'anno in corso. Stessi colori della presentazione
   (StatsController::sitColors): dal 05/11/2026 il tono del fatturato di tutti i report (la sezione ha .tono-<fatturato>). */
.sit-pila { --pieno: var(--tinta); --chiaro: color-mix(in srgb, var(--tinta) 22%, var(--superficie)); }
.sit-pila .fat-pile { height: 320px; position: relative; isolation: isolate; }
/* niente effetti al passaggio (05/11/2026, Mattia): il grafico della Situazione si guarda e basta */
.sit-pila .mkc-anno:hover { background: none; }
.sit-pila .fat-fetta:hover { filter: none; }
/* Sotto ogni barra anno e prezzo in una fascia fissa, e la LINEA D'APPOGGIO delle barre (30/10/2026, Mattia: "non c'e' o si
   vede appena... magari con un gradiente", "il gradiente intendevo in basso"): una linea e sotto un'ombra che sfuma verso
   il basso, come un pavimento. Sta all'altezza del piede delle barre: il fondo del riquadro, quello della colonna (4px), la
   fascia e lo spazio fra barra e fascia (6px). */
.sit-pila .sit-sotto { --sotto: 46px; height: var(--sotto); display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; }
.sit-pila .fat-pile::before { content: ''; position: absolute; z-index: -1; left: var(--s4); right: var(--s4);
  box-sizing: border-box; height: 16px; border-top: 1px solid #A9B4C4; bottom: calc(var(--s4) + 4px + 46px + 6px - 16px);
  background: linear-gradient(180deg, rgba(100, 116, 139, .09), rgba(100, 116, 139, 0));
  /* sfuma anche ai lati (30/10/2026: "troppo pacchiana... una via di mezzo, sfumala ai lati") */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.sit-pila .fat-fetta { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sit-pila .fat-fetta b { font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; }
.sit-pila .fat-fetta.sit-pieno, .sit-pila-legenda .sit-pieno i { background: var(--pieno); }
.sit-pila .fat-fetta.sit-chiaro, .sit-pila-legenda .sit-chiaro i { background: var(--chiaro); }
.sit-pila-legenda i { width: 22px; height: 12px; }
.sit-pila .fat-fetta.sit-tratteggio, .sit-pila-legenda .sit-tratteggio i {
  background: var(--blu-tenue); border: 2px dashed var(--blu); box-sizing: border-box; }   /* il portafoglio: il suo tono, blu */

/* LA SCHERMATA DEL RITROVAMENTO nel Radar (0157, 26/10/2026): la prima schermata della pagina, piccola; al clic in grande. */
.rd-foto { flex: none; display: block; width: 112px; height: 72px; border-radius: 8px; overflow: hidden; background: var(--superficie-2, #F2F4F7);
  box-shadow: 0 0 0 1px var(--bordo, #E4E7EC); }
.rd-foto img { display: block; width: 100%; height: auto; }
.rd-foto.vuota { display: grid; place-items: center; align-content: center; gap: 2px; color: var(--testo-3); }
.rd-foto.vuota small { font-size: 10px; }
.rd-riga:has(> .rd-foto) { grid-template-columns: 46px 112px minmax(0, 1fr) 270px auto; }
@media (max-width: 1100px) { .rd-riga:has(> .rd-foto) { grid-template-columns: 46px minmax(0, 1fr); } .rd-riga > .rd-foto { display: none; } }

/* L'ultimo aggiornamento dei dati da Italfabric (27/10/2026), in alto a destra nella testata delle Statistiche: piccolo. */
.stat-testata { position: relative; }
.stat-aggiornati { position: absolute; top: 14px; right: 20px; margin: 0; font-size: var(--t1); color: rgba(255, 255, 255, .62); }
@media print { .stat-aggiornati { position: static; } }

/* NUOVA USCITA E NUOVA TESTATA nell'elenco dei Giornali e delle Scuole (27/10/2026): due tasti nella testata blu notte,
   sotto la ricerca; il secondo chiaro sul blu. */
.elenco-azioni { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.elenco-azioni .elenco-azione-chiara { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); color: #FFF; }
.elenco-azioni .elenco-azione-chiara:hover { background: rgba(255, 255, 255, .18); }
.nota-piccola { margin: var(--s2) 0 0; font-size: var(--t2); color: var(--testo-3); }

/* OGNI LINK CON LA SUA SCHERMATA nella finestra dell'uscita (27/10/2026): la miniatura, il sito e com'e' messa, i tre
   tasti a destra; sul telefono i tasti vanno sotto. */
.uscita-link-righe { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; gap: var(--s2); }
.uscita-link-riga { display: flex; align-items: center; gap: var(--s3); padding: 8px; border: 1px solid var(--bordo); border-radius: 10px; background: var(--superficie); }
.uscita-link-foto { flex: none; width: 72px; height: 54px; border-radius: 6px; overflow: hidden; background: var(--sfiora); display: grid; place-items: center; color: var(--testo-4); }
.uscita-link-foto img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.uscita-link-testo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.uscita-link-testo a { font-weight: 600; color: var(--testo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uscita-link-testo small { color: var(--testo-3); font-size: var(--t1); }
.uscita-link-testo .uscita-link-attesa { color: var(--ambra); }
.uscita-link-testo .uscita-link-errore { color: var(--rosso); }
.uscita-link-azioni { flex: none; display: flex; align-items: center; gap: 6px; }
.uscita-link-azioni form { margin: 0; }
.uscita-link-azioni .bottone-piccolo { padding: 4px 9px; font-size: var(--t1); gap: 4px; cursor: pointer; }
@media (max-width: 640px) { .uscita-link-riga { flex-wrap: wrap; } .uscita-link-azioni { width: 100%; justify-content: flex-end; } }

/* LE USCITE COME I LINK DEL COBRANDING (27/10/2026, Mattia: "uniformerei ai cobranding... il popup e' molto brutto e
   fa doppio scroll"): un elenco con un bordo solo e le righe divise da un filo (non piu' una carta per riga), la
   miniatura a sinistra come .cob-l-foto, il titolo che apre l'articolo, la matita a destra. La finestra: scorre solo
   il contenuto, testa e piede restano; le parti in riquadri tenui. */
.uscite-righe { gap: 0; border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; background: var(--superficie); }
.uscite-righe > .uscita-riga { grid-template-columns: 88px minmax(0, 1fr) auto; column-gap: var(--s3); align-items: start;
  padding: 10px 12px; border-radius: 0; box-shadow: none; transform: none; }
.uscite-righe > .uscita-riga + .uscita-riga { border-top: 1px solid var(--bordo-tenue); }
.uscite-righe > .uscita-riga:hover { transform: none; box-shadow: none; background: var(--riga-sfiora); }
.uscita-riga .uscita-lato { width: 88px; }
.uscita-riga .uscita-miniatura, .uscita-riga .uscita-icona { width: 88px; height: 62px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--bordo-tenue); }
.uscita-riga .uscita-titolo { font-size: var(--t3); }
.uscita-riga a.uscita-titolo:hover { color: var(--blu); }
.uscita-fuori { font-size: var(--t1); color: var(--testo-4); }
.uscita-riga .uscita-modifica { align-self: center; }
dialog.scheda.uscita-finestra { width: min(780px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow: hidden; }
dialog.scheda.uscita-finestra[open] { display: flex; flex-direction: column; }
dialog.scheda.uscita-finestra > .scheda-testa, dialog.scheda.uscita-finestra > .scheda-piede { flex: none; }
dialog.scheda.uscita-finestra > .scheda-corpo { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; padding-top: var(--s3); }
.uscita-finestra .uscita-modulo { gap: var(--s3); }
.uscita-finestra .uscita-parte { padding: var(--s4); border: 1px solid var(--bordo-tenue); border-radius: 12px; background: var(--sfiora); }
.uscita-finestra .uscita-parte + .uscita-parte { padding-top: var(--s4); border-top: 1px solid var(--bordo-tenue); }
.uscita-finestra .uscita-gia { margin-top: var(--s3); padding: var(--s4); border: 1px solid var(--bordo-tenue); border-radius: 12px; }

/* LE FINESTRE CON POCHI CAMPI (27/10/2026: Nuovo referente, Nuova testata): l'etichetta sopra il campo, due campi corti
   affiancati, un aiuto con l'icona; sul telefono uno sotto l'altro. */
dialog.scheda.scheda-piccola { width: min(480px, calc(100vw - 32px)); }
.scheda-sotto { margin: 2px 0 0; font-size: var(--t2); color: var(--testo-3); }
.scheda-modulo { display: grid; gap: var(--s4); padding-top: var(--s2); }
/* Le righe del modulo sono i figli diretti (label, o .scheda-campo quando dentro c'e' un comando - il cercatore, delle
   pillole - che in una label prenderebbe i clic): una .pillola dentro non e' una riga. */
:is(.scheda-modulo, .scheda-modulo-due) > :is(label, .scheda-campo) { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
:is(.scheda-modulo, .scheda-modulo-due) > :is(label, .scheda-campo) > :is(span, legend) { font-size: var(--t2); font-weight: 600; color: var(--testo-2); }
:is(.scheda-modulo, .scheda-modulo-due) > :is(label, .scheda-campo) > :is(span, legend) small { font-weight: 400; color: var(--testo-4); }
fieldset.scheda-campo { margin: 0; padding: 0; border: 0; }
fieldset.scheda-campo > legend { padding: 0; margin-bottom: 6px; }
.scheda-modulo .campo { width: 100%; }
.scheda-modulo-due { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.scheda-aiuto { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--sfiora); font-size: var(--t2); color: var(--testo-3); line-height: 1.45; }
.scheda-aiuto svg { flex: none; margin-top: 2px; color: var(--testo-4); }
@media (max-width: 520px) { .scheda-modulo-due { grid-template-columns: 1fr; } }

/* NUOVO CONTATTO (27/10/2026, _nuovo-contatto.php): la finestra di tutti i posti. Il tipo di un'azienda che nasce
   compare sotto il cercatore solo dopo "Crea". "C'E' GIA'" e' un avviso (ambra): chi e', dove lavora, e i due gesti -
   e' lei (verde, il sicuro) o un'altra persona (neutro); scelto "e' lei" diventa blu, la scelta fatta. */
.nc-tipo { display: flex; flex-direction: column; gap: 6px; margin-top: var(--s2); }
.nc-tipo[hidden] { display: none; }
.nc-tipo > span { font-size: var(--t2); color: var(--testo-3); }
.nc-sotto { font-size: var(--t1); color: var(--testo-3); }
.nc-gia { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s2) var(--s3);
  padding: var(--s3); border: 1px solid var(--ambra-bordo); border-radius: var(--raggio-g); background: var(--ambra-tenue); }
.nc-gia[hidden] { display: none; }
.nc-gia .avatar { background: var(--superficie); color: var(--ambra); }
.nc-gia-testi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nc-gia-testi b { font-size: var(--t4); font-weight: 600; color: var(--testo); }
.nc-gia-testi span { font-size: var(--t2); color: var(--testo-2); overflow-wrap: anywhere; }
.nc-gia-azioni { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s2); }
.nc-gia-aiuto { flex: 1 1 100%; font-size: var(--t2); color: var(--testo-2); }
.nc-gia.scelta { border-color: var(--blu); background: var(--blu-tenue); }
.nc-gia.scelta .avatar { color: var(--blu-scuro); }

/* MANTECO SYNC (0183, 28/10/2026, rifatta: "incomprensibile"): in cima la risposta in una frase (verde funziona, rosso
   fermo o muto) col tasto Aggiorna adesso; poi i dati per argomento, che si aprono sulle tabelle; gli ultimi
   aggiornamenti; comandi rari e storico chiusi in fondo. */
.sy-risposta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s4); align-items: center; padding: var(--s5) var(--s6); }
.sy-risposta-icona { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; }
.sy-ok .sy-risposta-icona { background: var(--verde-tenue); color: var(--verde-vivo); }
.sy-error .sy-risposta-icona { background: var(--rosso-tenue); color: var(--rosso); }
.sy-wait .sy-risposta-icona { background: var(--sfiora); color: var(--testo-3); }
.sy-warn .sy-risposta-icona { background: var(--ambra-tenue); color: var(--ambra); }
.st-esito-partial .st-esito-icona { color: var(--ambra); }
.sy-frase { margin: 0; font-size: var(--t5); font-weight: 600; color: var(--testo); }
.sy-error .sy-frase { color: var(--rosso); }
.sy-sotto { margin: 4px 0 0; font-size: var(--t3); color: var(--testo-3); }
.sy-argomento > summary { list-style: none; cursor: pointer; }
.sy-argomento > summary::-webkit-details-marker { display: none; }
.sy-argomento + .sy-argomento { border-top: 1px solid var(--bordo-tenue); }
.sy-tabelle { list-style: none; margin: 0; padding: 0 var(--s5) var(--s4) 64px; }
.sy-tabelle li { padding: var(--s3) 0; font-size: var(--t3); color: var(--testo-2); }
.sy-tabelle li + li { border-top: 1px solid var(--bordo-tenue); }
.sy-t-testa { display: grid; align-items: baseline; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) auto; gap: var(--s3); }
.sy-t-testa code { color: var(--testo); font-weight: 600; }
.sy-t-cosa { display: block; margin: 4px 0 0; color: var(--testo-2); }
.sy-tabella > summary { list-style: none; cursor: pointer; }
.sy-tabella > summary::-webkit-details-marker { display: none; }
.sy-tabella > summary .sy-t-cosa::after { content: " \00B7  da dove la prende"; color: var(--blu); font-size: var(--t2); }
.sy-tabella[open] > summary .sy-t-cosa::after { content: ""; }
.sy-t-fonti { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 2px var(--s3); margin: 6px 0 0; font-size: var(--t2); }
.sy-t-fonti dt { color: var(--testo-3); font-weight: 600; }
.sy-t-fonti dd { margin: 0; color: var(--testo-3); font-family: var(--mono, ui-monospace, monospace); overflow-wrap: anywhere; }
.sy-t-testa > span { text-align: left; }
.sy-t-testa code { font-size: var(--t2); }
.sy-tabelle .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--testo-4); white-space: nowrap; }
.sy-collegamenti { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: var(--s3) 0 0; padding: 0; }
.sy-collegamenti li { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: 999px;
                      background: var(--sfiora); font-size: var(--t2); font-weight: 600; color: var(--testo-2); cursor: default; }
.sy-collegamenti i { width: 8px; height: 8px; border-radius: 50%; background: var(--testo-4); }
.sy-collegamenti .sy-ok i { background: var(--verde-vivo); box-shadow: 0 0 0 3px var(--verde-tenue); }
.sy-collegamenti .sy-error { background: var(--rosso-tenue); color: var(--rosso); }
.sy-collegamenti .sy-error i { background: var(--rosso); }
.sy-guasto { margin: var(--s2) 0 0; font-size: var(--t2); color: var(--rosso); overflow-wrap: anywhere; }
.sy-avvisi { padding: var(--s2) 0; }
.sy-avviso { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s2) var(--s5); }
.sy-avviso + .sy-avviso { border-top: 1px solid var(--bordo-tenue); }
.sy-avviso-icona { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--sfiora); color: var(--testo-3); }
.sy-avviso-email { font-size: var(--t3); font-weight: 600; color: var(--testo); overflow-wrap: anywhere; }
.sy-avviso-nuovo .campo { width: 100%; max-width: 380px; }
.sy-motivo { display: block; margin-top: 2px; font-size: var(--t2); color: var(--rosso); }
.sy-esiti { box-shadow: none; }
.sy-esiti li { padding: 10px var(--s5); }
.sy-altro { margin: var(--s4) var(--pagina) var(--s6); }
.sy-altro > summary { cursor: pointer; font-size: var(--t3); color: var(--testo-3); }
.sy-comandi { display: flex; flex-direction: column; gap: var(--s2); margin: var(--s4) 0; }
.sy-comandi div { display: flex; align-items: center; gap: var(--s3); }
.sy-comandi .bottone { min-width: 220px; }
.sy-comandi small { font-size: var(--t2); color: var(--testo-3); }
.sy-storico { list-style: none; margin: 0; padding: 0; font-size: var(--t2); color: var(--testo-3); }
.sy-storico li { display: grid; grid-template-columns: 90px minmax(0, 1fr) 90px; gap: var(--s3); padding: 4px 0; border-top: 1px solid var(--bordo-tenue); }
.sy-tecnico { margin: var(--s3) 0 0; font-size: var(--t2); color: var(--testo-4); }
@media (max-width: 700px) {
  .sy-risposta { grid-template-columns: auto minmax(0, 1fr); padding: var(--s4); }
  .sy-risposta form { grid-column: 1 / -1; }
  .sy-tabelle { padding-left: var(--s4); }
  .sy-t-testa { grid-template-columns: minmax(0, 1fr) auto; }
  .sy-t-testa span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .sy-t-fonti { grid-template-columns: 1fr; }
  .sy-comandi div { flex-direction: column; align-items: flex-start; }
}

/* LAVORAZIONE (28/10/2026): gli ordini aperti visti dal commerciale che deve spedire. Mattia: "il grosso del pain e'
   l'ordine in ritardo e capire dove e' intoppato e chi sollecitare"; "pulita e semplice, solo l'essenziale, bello,
   chiaro, gradevole, che invogli ad usarlo"; "si usa all'80% da desktop". Un ordine per riga larga: a sinistra chi e
   quanto e' pronto, al centro dove sta la merce (un pallino per posto: blu un terzista, viola da noi, grigio da
   produrre, verde pronta), a destra la consegna. Passi e partite al clic. */
.lv { max-width: 1180px; }
.lv, .lv-finestra { --lv-passo: #2563EB; --lv-passo-tenue: #DBE7FE; --lv-pronto: #12B76A; --lv-pronto-tenue: #D1FADF; --lv-noi: #8B6FD6; }
.lv-c1 { --lv: #B8C0CC; } .lv-c2 { --lv: #93B7E6; } .lv-c3 { --lv: #5B8FD8; } .lv-c4 { --lv: #7C83D6; }
.lv-c5 { --lv: #9B7BD1; } .lv-c6 { --lv: #E3A54E; } .lv-c7 { --lv: #E07B4F; } .lv-c8 { --lv: #4DB3A4; }
.lv-c9 { --lv: #2E9E8E; } .lv-c10 { --lv: #12B76A; }
.lv [hidden], .lv-voci [hidden] { display: none !important; }

/* I COLORI DEI CONCETTI (Mattia: "non esagerare col bianco, usa colori e icone per far capire meglio i concetti"):
   ognuno ha il suo tono, che sta SOLO nella tessera con l'icona e nelle pillole: le carte restano bianche e piatte
   (Mattia: "non esagerare con sti gradienti colorati"; mai bordini). */
.lv-t-ritardo, .lv-t-oltre { --tono: #E5484D; }
.lv-t-sollecitare { --tono: #F08C00; }
.lv-t-spedire, .lv-t-pronto { --tono: #12B76A; }
.lv-t-tutti, .lv-t-terzista { --tono: #2563EB; }
.lv-t-noi { --tono: #8B6FD6; }
.lv-t-produrre { --tono: #667085; }
.lv-tessera { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; color: var(--tono);
              background: color-mix(in srgb, var(--tono) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tono) 22%, transparent); }
.lv-tessera svg { width: 15px; height: 15px; }

/* le schede in cima: quattro riquadri col numero grande, a colpo d'occhio; cliccandone uno si va li' */
.lv-viste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: var(--s2) var(--pagina) var(--s4); }
.lv-vista { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; color: inherit; text-decoration: none;
            background: var(--superficie);
            box-shadow: 0 0 0 1px var(--bordo-tenue), 0 1px 2px rgba(16, 24, 40, .04); transition: box-shadow .15s, transform .15s; }
.lv-vista:hover { box-shadow: 0 0 0 1px var(--bordo), 0 6px 16px rgba(16, 24, 40, .08); transform: translateY(-1px); }
/* il bordo della scheda accesa sta DENTRO (04/11/2026): fuori la faceva sporgere rispetto alle altre */
.lv-vista.acceso { box-shadow: inset 0 0 0 2px var(--tono), 0 4px 14px rgba(16, 24, 40, .08); }
@media (hover: none) { .lv-vista:hover { transform: none; } }
.lv-vista .lv-tessera { width: 42px; height: 42px; border-radius: 12px; }
.lv-vista .lv-tessera svg { width: 21px; height: 21px; }
.lv-vista-testo { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.lv-vista-testo b { font-size: 26px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--testo); }
.lv-vista-testo small { margin-top: 3px; font-size: var(--t3); color: var(--testo-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-vista.acceso small { color: var(--testo); font-weight: 600; }
.lv-aggiornato { margin: var(--s5) var(--pagina); font-size: var(--t2); color: var(--testo-4); }

/* la consegna: una pillola */
.lv-quando { display: inline-flex; align-items: center; gap: 5px; justify-self: end; align-self: start; padding: 3px 10px; border-radius: 999px; background: var(--sfiora); font-size: var(--t2);
             font-weight: 600; color: var(--testo-2); white-space: nowrap; }
.lv-quando svg { width: 13px; height: 13px; }
.lv-quando.lv-tardi { background: #FEE4E2; color: var(--rosso); }
.lv-quando.lv-presto { background: #FEF0C7; color: #B54708; }

/* LE RIGHE PER CLIENTE (Mattia: "raggruppa per cliente e sotto metti come sottorighe ogni articolo, con la sola barra
   degli step"; "regola bene gli spazi"). Un riquadro per cliente; le righe hanno tutte le stesse tre colonne e gli
   stessi margini della testa coi nomi dei passi, cosi' pallini e nomi cadono uno sotto l'altro. Spazi su una scala
   sola: 24 ai lati, 16 fra le righe, 12 fra i riquadri. */
.lv-clienti { display: grid; gap: 12px; margin: 0 var(--pagina); }
.lv-riga { display: grid; grid-template-columns: 280px minmax(0, 1fr) 140px; column-gap: 32px; align-items: start; padding: 13px 24px; }
.lv-cliente { margin: 0; padding: 0; overflow: hidden; }
.lv-cliente-testa { display: flex; align-items: center; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--bordo-tenue); }
.lv-cliente-testa b { font-size: var(--t5); font-weight: 600; color: var(--testo); }
.lv-cliente-scheda { display: inline-flex; align-items: center; gap: 3px; font-size: var(--t2); color: var(--testo-3); text-decoration: none; }
.lv-cliente-scheda:hover { color: var(--blu); }
.lv-cliente-scheda svg { width: 11px; height: 11px; }
.lv-cliente-testa small { margin-left: auto; font-size: var(--t2); color: var(--testo-3); }   /* il contatore a destra (29/10/2026) */
.lv-cliente-conti { display: flex; gap: 6px; margin-left: auto; }
.lv-marchio { display: grid; place-items: center; flex: none; width: 48px; height: 32px; }
.lv-marchio .marchio-logo.piccolo { --d: 32px; width: 48px; border-radius: 8px; }
.lv-ordine { position: relative; color: inherit; cursor: pointer; transition: background .12s; }
/* si apre: al passaggio una freccina a destra */
.lv-ordine::after { content: "\203A"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 20px; line-height: 1;
                    color: var(--testo-4); opacity: 0; transition: opacity .12s; }
.lv-ordine:hover::after { opacity: 1; }
.lv-ordine + .lv-ordine { border-top: 1px solid var(--bordo-tenue); }
.lv-ordine:hover { background: var(--sfiora); }
.lv-ordine:focus-visible { outline: 2px solid var(--lv-passo); outline-offset: -2px; }
/* L'ARTICOLO NELLA LISTA (29/10/2026, rifatto: "graficamente orrendo, rendilo ordinato in tutte le varianti"): tre righe
   fisse. 1) nome (si tronca solo se lunghissimo) + tinto, su una riga; 2) codice, col. e nome del colore, i metri; 3) ordine
   e PO. Due misure: t4 il nome, t2 tutto il resto; niente icona davanti al nome. */
.lv-art-cella { display: flex; flex-direction: column; gap: 3px; min-width: 0; line-height: 1.35; }
.lv-art-cella .lv-art-nome { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin: 0; flex-wrap: nowrap; }
.lv-art-cella .articolo-apri { display: flex; align-items: baseline; gap: 6px; min-width: 0; max-width: 100%; padding: 0;
  font-size: var(--t4); font-weight: 600; color: var(--testo); white-space: nowrap; }
.lv-art-cella .articolo-apri svg, .lv-art-nome .articolo-col, .lv-art-nome .articolo-codice { display: none; }   /* codice e col. stanno nella riga sotto */
.lv-art-cella .articolo-apri > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-art-nome .lv-tipo { flex: none; margin-left: 0; }
.lv-art-colore { display: block; max-width: 100%; font-size: var(--t2); color: var(--testo-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-art-colore b { font-weight: 500; color: var(--testo-2); }
.lv-col { font-variant-numeric: tabular-nums; }
.lv-art-cella small { display: block; max-width: 100%; font-size: var(--t2); color: var(--testo-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-tipo { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--sfiora); font-size: 11px; font-weight: 500; line-height: 17px; color: var(--testo-3); white-space: nowrap; }
.lv-o-consegna { display: flex; flex-direction: column; align-items: flex-end; justify-self: end; gap: 4px; padding-top: 1px; }
.lv-o-consegna small { font-size: var(--t2); color: var(--testo-3); white-space: nowrap; }
.lv-quando.lv-ok { background: var(--lv-pronto-tenue); color: #067647; }
.lv-o-consegna .lv-da-spedire { color: var(--rosso); }
/* Le due consegne (30/10/2026): INT nella pillola, CLI sotto; la sigla piccola e spaziata, come un'etichetta */
.lv-sigla { font-size: 9.5px; font-weight: 650; letter-spacing: .06em; text-decoration: none; opacity: .75; margin-right: 1px; cursor: help; }
.lv-cli { display: inline-flex; align-items: baseline; gap: 5px; padding-right: 10px; }
.lv-voce-consegna { flex-direction: column; align-items: flex-end; gap: 4px; }
.lv-voce-consegna .lv-cli { font-size: var(--t2); color: var(--testo-3); white-space: nowrap; }

/* CHI SOLLECITARE: un riquadro per terzista o reparto, una riga riassuntiva che si apre li' sotto */
.lv-sollecitare { display: grid; gap: 12px; margin: 0 var(--pagina); }
.lv-sol { margin: 0; padding: 0; overflow: hidden; }
.lv-sol-testa { display: grid; grid-template-columns: 36px minmax(0, 1fr) 150px 190px 20px; column-gap: 20px; align-items: center;
                padding: 14px 24px; list-style: none; cursor: pointer; transition: background .12s; }
.lv-sol-testa::-webkit-details-marker { display: none; }
.lv-sol-testa:hover { background: var(--sfiora); }
.lv-sol-testa .lv-tessera { width: 36px; height: 36px; border-radius: 10px; }
.lv-sol-testa .lv-tessera svg { width: 18px; height: 18px; }
.lv-sol-chi { min-width: 0; }
.lv-sol-chi b { display: block; font-size: var(--t4); font-weight: 600; color: var(--testo); }
.lv-sol-chi small { display: block; margin-top: 1px; font-size: var(--t2); color: var(--testo-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-sol-num { font-size: var(--t2); color: var(--testo-3); text-align: right; }
.lv-sol-num b { font-size: var(--t4); font-weight: 600; color: var(--testo); font-variant-numeric: tabular-nums; }
.lv-sol-num small { display: block; font-size: var(--t2); color: var(--testo-3); font-variant-numeric: tabular-nums; }
.lv-sol-oltre { justify-self: end; }
.lv-sol-apri { width: 8px; height: 8px; justify-self: end; border-right: 2px solid var(--testo-4); border-bottom: 2px solid var(--testo-4);
               transform: rotate(45deg); transition: transform .15s; }
.lv-sol[open] .lv-sol-apri { transform: rotate(-135deg); }
.lv-sol-corpo { border-top: 1px solid var(--bordo-tenue); }
.lv-voce { display: grid; grid-template-columns: minmax(0, 1fr) 150px 150px 150px; column-gap: 20px; align-items: center; padding: 10px 24px 10px 80px;
           cursor: pointer; transition: background .12s; }
.lv-voce + .lv-voce { border-top: 1px solid var(--bordo-tenue); }
.lv-voce:not(.lv-voce-testa):hover { background: var(--sfiora); }
.lv-voce-testa { padding-top: 8px; padding-bottom: 6px; font-size: var(--t2); font-weight: 600; color: var(--testo-4); cursor: default; }
.lv-voce-testa span:nth-child(n+2) { text-align: right; }
.lv-voce-chi { min-width: 0; }
.lv-voce-chi b { display: block; font-size: var(--t3); font-weight: 600; color: var(--testo); }
.lv-voce-chi small { display: block; margin-top: 1px; font-size: var(--t2); color: var(--testo-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-voce-m { text-align: right; }
.lv-voce-m b { display: block; font-size: var(--t3); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--testo); }
.lv-voce-m small { display: block; font-size: 11px; color: var(--testo-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-voce-rientro, .lv-voce-consegna { display: flex; justify-content: flex-end; }

/* la finestra */
dialog.lv-finestra { width: min(860px, calc(100vw - 32px)); }
.lv-finestra .scheda-testa h3 small { display: block; margin-top: 2px; font-size: var(--t2); font-weight: 400; color: var(--testo-3); white-space: normal; }
.lv-finestra-frase { margin: 0 0 var(--s2); font-size: var(--t3); color: var(--testo-2); }
.lv-finestra-frase b { font-weight: 600; color: var(--testo); }
.lv-r-testa .lv-art { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.lv-r-testa .lv-art > small { font-size: var(--t2); color: var(--testo-3); }
.lv-r { padding: var(--s4) 0; }
.lv-r + .lv-r { border-top: 1px solid var(--bordo-tenue); }
.lv-r-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); margin-bottom: 10px; }
.lv-r-testa b { display: block; font-size: var(--t3); font-weight: 600; color: var(--testo); }
.lv-r-testa > small { display: block; margin-top: 2px; font-size: var(--t2); color: var(--testo-3); }

/* i passi di una riga, a richiesta */
.lv-passi { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0 0 var(--s4); padding: 0; list-style: none; }   /* 7 passi, 6 per il tinto in filo */
.lv-senza-nomi { margin: 0; padding-top: 2px; }
.lv-passi .lv-salta .lv-punto { visibility: hidden; }
.lv-passi .lv-salta .lv-passo-nome { opacity: .45; }
.lv-passi li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0; }
.lv-passi li::before, .lv-passi li::after { content: ""; position: absolute; top: 8px; height: 2px; width: 50%; background: var(--bordo-tenue); }
.lv-passi li::before { left: 0; } .lv-passi li::after { right: 0; }
.lv-passi li:first-child::before, .lv-passi li:last-child::after { display: none; }
.lv-passi .lv-fatto::before, .lv-passi .lv-fatto::after, .lv-passi .lv-parte::before, .lv-passi .lv-parte::after,
.lv-passi .lv-qui::before, .lv-passi .lv-qui:has(~ .lv-qui)::after { background: var(--lv-passo); }
.lv-punto { position: relative; z-index: 1; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff;
            background: var(--superficie); box-shadow: inset 0 0 0 2px var(--bordo-tenue); }
.lv-punto svg { width: 11px; height: 11px; }
.lv-fatto .lv-punto { background: var(--lv-passo); box-shadow: none; }
.lv-parte .lv-punto { background: #9DBBF5; box-shadow: none; transform: scale(.66); }
.lv-qui .lv-punto { background: var(--lv-passo); box-shadow: 0 0 0 4px var(--lv-passo-tenue); }
.lv-qui.lv-fine .lv-punto { background: var(--lv-pronto); box-shadow: 0 0 0 4px var(--lv-pronto-tenue); }
.lv-passo-nome { max-width: 100%; font-size: 10.5px; letter-spacing: .01em; color: var(--testo-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-fatto .lv-passo-nome, .lv-parte .lv-passo-nome { color: var(--testo-4); }
.lv-qui .lv-passo-nome { color: var(--testo-2); font-weight: 600; }
.lv-passo-qui { display: flex; flex-direction: column; align-items: center; max-width: 100%; line-height: 1.25; }
.lv-passo-qui b { font-size: var(--t2); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--lv-passo); white-space: nowrap; }
.lv-passo-qui small { display: flex; align-items: center; gap: 3px; max-width: 100%; font-size: 11px; color: var(--testo-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-passo-qui small svg { flex: none; width: 12px; height: 12px; }
/* 29/10/2026 ("le larghezze delle colonne segano i testi"): chi ha la pezza (Rifinizione Cambi Scuccimarra), il
   riferimento dell'ordine e le scritte dei riquadri in cima vanno a capo invece di finire coi puntini. */
.lv-passo-qui { max-width: none; }
.lv-passo-qui small { justify-content: center; max-width: none; overflow: visible; text-overflow: clip; }   /* una riga col nome breve ($breve in lavorazione.php), l intero nel fumetto: se sfora di poco sborda al centro */
/* I filtri su una riga (29/10/2026, Mattia: "riuscire a far stare tutto su una riga"): pillole compatte, Consegne in fondo a destra. */
.lv-filtri .ord-caselle { column-gap: var(--s6); align-items: end; }
.lv-filtri .ord-pillole { gap: 4px; }
.lv-filtri .ord-caselle .pillola { height: 30px; padding: 0 10px; }
/* Niente da mostrare: un riquadro arioso al centro, l'icona nella tessera tenue, il titolo e cosa provare (29/10/2026). */
.lv-vuoto { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--s8) var(--s5); text-align: center; }
.lv-vuoto[hidden] { display: none; }
.lv-vuoto-icona { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--s2); border-radius: 14px; background: var(--blu-tenue); color: var(--blu); }
.lv-vuoto b { font-size: var(--t5); font-weight: 600; color: var(--testo); }
.lv-vuoto small { max-width: 46ch; font-size: var(--t3); color: var(--testo-3); line-height: 1.5; }   /* una riga: il nome e' quello breve (lavorazione.php, $breve), l'intero nel fumetto */
.lv-art-cella small { white-space: normal; overflow: visible; }
.lv-vista-testo small { white-space: normal; overflow: visible; }
.lv-passi .lv-qui { --q: var(--lv-passo); --q-tenue: var(--lv-passo-tenue); --q-testo: var(--lv-passo); }
.lv-passi .lv-q-noi { --q: #8B6FD6; --q-tenue: #EBE5FA; --q-testo: #6941C6; }
.lv-passi .lv-q-produrre { --q: #98A2B3; --q-tenue: #EAECF0; --q-testo: var(--testo-3); }
.lv-passi .lv-q-pronto { --q: var(--lv-pronto); --q-tenue: var(--lv-pronto-tenue); --q-testo: #067647; }
.lv-passi .lv-oltre { --q: var(--rosso); --q-tenue: #FEE4E2; --q-testo: var(--rosso); }
.lv-passi .lv-qui .lv-punto, .lv-passi .lv-qui.lv-fine .lv-punto { background: var(--q); box-shadow: 0 0 0 4px var(--q-tenue); }
.lv-passi .lv-qui .lv-passo-qui b, .lv-passi .lv-qui .lv-passo-qui small { color: var(--q-testo); }
.lv-passi .lv-qui .lv-passo-qui small { opacity: .85; }
.lv-oltre .lv-passo-qui b, .lv-oltre .lv-passo-qui small { color: var(--rosso); }
.lv-fine .lv-passo-qui b, .lv-fine.lv-qui .lv-passo-nome { color: #067647; }
.lv-finestra-titolo { display: flex; align-items: center; gap: 12px; }
/* la merce di un articolo, per posto: la tessera del posto, chi e cosa, le date, i metri; sotto le partite in
   piccolo (al passaggio l'ordine di lavoro). Il colore e' quello del posto, rosso se e' oltre il rientro promesso. */
.lv-r-testa > small { flex: none; }
.lv-posti { display: grid; gap: 8px; }
.lv-posto { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 14px; align-items: start; padding: 12px 14px;
            border-radius: 12px; background: var(--sfiora); }
.lv-posto .lv-tessera { width: 36px; height: 36px; border-radius: 10px; }
.lv-posto .lv-tessera svg { width: 18px; height: 18px; }
.lv-posto-chi { min-width: 0; padding-top: 1px; font-size: var(--t3); color: var(--testo-3); }
.lv-posto-chi > b { font-weight: 600; color: var(--testo); }
.lv-posto-chi small { display: block; margin-top: 3px; font-size: var(--t2); color: var(--testo-3); }
.lv-posto-chi small b { font-weight: 600; color: var(--rosso); }
.lv-p-oltre .lv-posto-chi > b { color: var(--rosso); }
.lv-p-pronto .lv-posto-chi > b { color: #067647; }
.lv-posto-m { text-align: right; padding-top: 1px; }
.lv-posto-m b { display: block; font-size: var(--t3); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--testo); }
.lv-posto-m small { font-size: var(--t2); color: var(--testo-3); }
.lv-posto-partite { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.lv-posto-partite li { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 8px; border-radius: 6px; background: var(--superficie);
                       box-shadow: inset 0 0 0 1px var(--bordo-tenue); font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--testo-2); }
.lv-posto-partite em { font-style: normal; color: var(--testo-4); }

@media (max-width: 1250px) {
  .lv-testa { display: none; }
  .lv-riga { grid-template-columns: minmax(0, 1fr) auto; row-gap: 14px; }
  .lv-ordine .lv-passi { grid-column: 1 / -1; grid-row: 2; }
  /* qui il nome del passo acceso c'e' gia': "da produrre" e "in magazzino" sotto i metri sarebbero doppi */
  .lv-passi li:first-child .lv-passo-qui small, .lv-passi li.lv-fine .lv-passo-qui small { display: none; }
}
@media (max-width: 860px) {
  .lv-clienti, .lv-sollecitare, .lv-aggiornato { margin-left: var(--s4); margin-right: var(--s4); }
  dialog.lv-finestra { width: 100%; }
  .lv-viste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-left: var(--s4); margin-right: var(--s4); }
  .lv-vista { gap: 10px; padding: 12px; }
  .lv-vista .lv-tessera { width: 34px; height: 34px; }
  .lv-vista-testo b { font-size: 20px; }
  .lv-vista-testo small { font-size: var(--t2); }
  .lv-riga, .lv-cliente-testa { padding-left: 16px; padding-right: 16px; }
  .lv-cliente-testa { flex-wrap: wrap; row-gap: 8px; }
  .lv-cliente-conti { flex-basis: 100%; margin-left: 0; }
  .lv-passo-qui small { font-size: 10px; }
  .lv-sol-testa { grid-template-columns: 32px minmax(0, 1fr) auto; row-gap: 6px; padding: 12px 16px; }
  .lv-sol-oltre { grid-column: 2 / -1; justify-self: start; }
  .lv-sol-apri { display: none; }
  .lv-voce { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; padding: 10px 16px; }
  .lv-voce-testa { display: none; }
  .lv-voce-rientro { justify-content: flex-start; }
  .lv-passo-nome { font-size: 9.5px; }
  .lv-passi .lv-qui .lv-passo-nome { white-space: normal; line-height: 1.2; }
}
/* la cronologia della riga nella finestra (29/10/2026): data a sinistra, cosa al centro, metri a destra */
.lv-sotto-titolo { margin: var(--s4) 0 var(--s2); font-size: var(--t2); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--testo-3); }
.lv-storia { list-style: none; margin: 0; padding: 0; border-radius: 12px; background: var(--sfiora); }
.lv-storia li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto 72px; gap: var(--s3); align-items: baseline; padding: 9px 14px; font-size: var(--t3); }
.lv-storia-cosa small { display: block; margin-top: 1px; font-size: var(--t2); color: var(--testo-3); overflow-wrap: anywhere; }
.lv-storia-stato { justify-self: end; padding: 1px 8px; border-radius: 999px; font-size: var(--t1); font-weight: 600; background: var(--sfiora); color: var(--testo-3); }
.lv-st-chiusa .lv-storia-stato, .lv-st-spedita .lv-storia-stato { background: var(--verde-tenue); color: var(--verde-vivo); }
.lv-st-aperta .lv-storia-stato { background: var(--blu-tenue); color: var(--blu); }
.lv-st-saltata, .lv-st-da-assegnare { color: var(--testo-3); }
.lv-st-saltata b, .lv-st-da-assegnare b { color: var(--testo-3) !important; }
.lv-storia li + li { border-top: 1px solid var(--bordo-tenue); }
.lv-storia-quando { color: var(--testo-3); font-variant-numeric: tabular-nums; }
.lv-storia-cosa { color: var(--testo-2); min-width: 0; }
.lv-storia-cosa b { color: var(--testo); font-weight: 600; }
.lv-st-spedita .lv-storia-cosa b { color: var(--verde-vivo); }
.lv-storia-m { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--testo); }
.lv-storia-vuota { margin: 0; font-size: var(--t3); color: var(--testo-3); }
/* LA FINESTRA, rifatta (29/10/2026, "fallo bello e ordinato"): fascia in testa, cronologia a linea, Adesso */
.lv-f { display: flex; flex-direction: column; gap: 0; }
.lv-f-capo { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s5); align-items: center; padding: var(--s4) var(--s4);
  border-radius: 12px; background: var(--sfiora); }
.lv-f-art { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lv-f-art > span { font-size: var(--t3); color: var(--testo-2); }
.lv-f-dato { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.lv-f-dato small { font-size: var(--t1); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--testo-4); }
.lv-f-dato b { font-size: var(--t4); font-weight: 600; color: var(--testo); font-variant-numeric: tabular-nums; }
.lv-f-dato em { font-style: normal; font-size: var(--t2); color: var(--testo-3); }
.lv-crono { list-style: none; margin: 0; padding: 0; }
.lv-c { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) 120px 80px 84px; gap: var(--s3); align-items: start; padding: 10px 0; }
.lv-c::before { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: var(--bordo); }
.lv-c:first-child::before { top: 18px; }
.lv-c:last-child::before { bottom: calc(100% - 18px); }
.lv-c-punto { position: relative; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; margin-top: -1px; border-radius: 999px;
  background: var(--superficie); box-shadow: inset 0 0 0 2px var(--bordo); color: #fff; }
.lv-c-punto svg { width: 13px; height: 13px; }
.lv-c-chiusa .lv-c-punto, .lv-c-spedita .lv-c-punto { background: var(--blu); box-shadow: none; }
.lv-c-spedita .lv-c-punto { background: var(--verde-vivo); }
.lv-c-aperta .lv-c-punto { box-shadow: inset 0 0 0 2px var(--blu); }
.lv-c-aperta .lv-c-punto::after { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--blu); }
.lv-c-cosa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.lv-c-cosa b { font-size: var(--t3); font-weight: 600; color: var(--testo); }
.lv-c-cosa > span { font-size: var(--t3); color: var(--testo-2); }
.lv-c-cosa small { flex-basis: 100%; font-size: var(--t2); color: var(--testo-3); overflow-wrap: anywhere; }
.lv-c-quando { font-size: var(--t3); color: var(--testo-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lv-c-m { justify-self: end; font-size: var(--t3); font-weight: 600; color: var(--testo); font-variant-numeric: tabular-nums; }
.lv-c-stato { justify-self: end; padding: 1px 8px; border-radius: 999px; font-size: var(--t1); font-weight: 600; background: var(--sfiora); color: var(--testo-3); }
.lv-c-chiusa .lv-c-stato { background: var(--blu-tenue); color: var(--blu); }
.lv-c-spedita .lv-c-stato { background: var(--verde-tenue); color: var(--verde-vivo); }
.lv-c-aperta .lv-c-stato { background: var(--ambra-tenue); color: var(--ambra); }
.lv-c-saltata .lv-c-cosa b, .lv-c-da-assegnare .lv-c-cosa b, .lv-c-saltata .lv-c-cosa > span, .lv-c-da-assegnare .lv-c-cosa > span { color: var(--testo-3); }
@media (max-width: 640px) {
  .lv-f-capo { grid-template-columns: 1fr 1fr; }
  .lv-f-art { grid-column: 1 / -1; }
  .lv-f-dato { align-items: flex-start; }
  .lv-c { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .lv-c-quando { grid-column: 2; }
  .lv-c-m { grid-column: 3; grid-row: 1; }
  .lv-c-stato { grid-column: 3; }
}
/* LA FINESTRA, terza versione (29/10/2026): pagina di una spedizione. Testa leggera, eroe con l'articolo e la consegna,
   il tracciamento grande con chi/quando sotto ogni passo, le schede di dove e' adesso. */
dialog.lv-fx { width: min(980px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
.lv-fx-testa { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 14px 20px 14px 24px; border-bottom: 1px solid var(--bordo-tenue); }
.lv-fx-chi { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lv-fx-chi b { display: block; font-size: var(--t3); font-weight: 600; color: var(--testo); }
.lv-fx-chi small { display: block; font-size: var(--t2); color: var(--testo-3); }
.lv-fx-corpo { display: flex; flex-direction: column; gap: 22px; padding: 22px 24px 26px; max-height: calc(100vh - 140px); overflow-y: auto; }
.lv-fx-eroe { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; }
.lv-fx-art h3 { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -.01em; color: var(--testo); }
.lv-fx-art h3 .articolo-apri { font-size: 22px; font-weight: 650; gap: 10px; }
.lv-fx-art .lv-art-colore { margin: 6px 0 0; font-size: var(--t3); }
.lv-fx-art h3 .articolo-apri svg, .lv-fx-art .articolo-codice { display: none; }
.lv-fx-numeri { display: flex; gap: 10px; margin: 0; }
.lv-fx-numeri > div { min-width: 108px; padding: 10px 14px; border-radius: 12px; background: var(--sfiora); }
.lv-fx-numeri dt { font-size: var(--t1); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--testo-4); }
.lv-fx-numeri dd { margin: 4px 0 0; font-size: 18px; font-weight: 650; color: var(--testo); font-variant-numeric: tabular-nums; }
.lv-fx-numeri dd small { display: block; margin-top: 2px; font-size: var(--t2); font-weight: 400; color: var(--testo-3); }
.lv-fx-consegna.lv-fx-tardi { background: var(--rosso-tenue); }
.lv-fx-consegna.lv-fx-tardi dt, .lv-fx-consegna.lv-fx-tardi dd { color: var(--rosso); }
.lv-fx-consegna.lv-fx-vicina { background: var(--ambra-tenue); }
.lv-fx-consegna.lv-fx-vicina dt, .lv-fx-consegna.lv-fx-vicina dd { color: var(--ambra); }
.lv-fx-consegna.lv-fx-ok { background: var(--verde-tenue); }
.lv-fx-consegna.lv-fx-ok dt, .lv-fx-consegna.lv-fx-ok dd { color: var(--verde-vivo); }
.lv-fx-percorso { padding: 22px 18px 18px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--bordo-tenue); }
.lv-fx-passi { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.lv-fx-p { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 4px; text-align: center; }
.lv-fx-p::before { content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 3px; background: var(--bordo); z-index: 0; }
.lv-fx-p:first-child::before { display: none; }
.lv-fx-fatto::before, .lv-fx-passato::before, .lv-fx-qui::before, .lv-fx-corso::before { background: var(--blu); }
.lv-fx-dopo + .lv-fx-qui::before, .lv-fx-salta + .lv-fx-qui::before { background: var(--bordo); }   /* niente linea piena dopo un passo non fatto */
.lv-fx-punto { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px;
  background: var(--superficie); box-shadow: inset 0 0 0 2px var(--bordo); color: #fff; }
.lv-fx-punto svg { width: 15px; height: 15px; }
.lv-fx-fatto .lv-fx-punto, .lv-fx-passato .lv-fx-punto { background: var(--blu); box-shadow: none; }
.lv-fx-corso .lv-fx-punto { box-shadow: inset 0 0 0 3px var(--ambra); }
.lv-fx-corso .lv-fx-punto::after { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--ambra); }
.lv-fx-p { --q: var(--lv-passo); --q-tenue: var(--lv-passo-tenue); --q-testo: var(--lv-passo); }
.lv-fq-noi { --q: #8B6FD6; --q-tenue: #EBE5FA; --q-testo: #6941C6; }
.lv-fq-produrre { --q: #98A2B3; --q-tenue: #EAECF0; --q-testo: var(--testo-3); }
.lv-fq-pronto { --q: var(--lv-pronto); --q-tenue: var(--lv-pronto-tenue); --q-testo: #067647; }
.lv-fq-oltre { --q: var(--rosso); --q-tenue: #FEE4E2; --q-testo: var(--rosso); }
.lv-fx-qui .lv-fx-punto { width: 32px; height: 32px; margin-top: -2px; background: var(--q); box-shadow: 0 0 0 5px var(--q-tenue); }
.lv-fx-salta .lv-fx-punto { box-shadow: inset 0 0 0 2px var(--bordo-tenue); background: repeating-linear-gradient(45deg, transparent 0 3px, var(--bordo-tenue) 3px 4px); }
.lv-fx-nome { font-size: var(--t2); font-weight: 600; color: var(--testo); }
.lv-fx-dopo .lv-fx-nome, .lv-fx-salta .lv-fx-nome { color: var(--testo-4); font-weight: 500; }
.lv-fx-voce { display: flex; flex-direction: column; gap: 1px; max-width: 100%; }
.lv-fx-chi-p { font-size: var(--t2); color: var(--testo-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-fx-saltata .lv-fx-chi-p { color: var(--testo-4); font-style: italic; }
.lv-fx-voce small, .lv-fx-riga { font-size: 11px; color: var(--testo-3); font-variant-numeric: tabular-nums; }
.lv-fx-p .lv-fx-qui { display: inline-block; max-width: 100%; margin-top: 2px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: var(--q-tenue); color: var(--q-testo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-fx-spedite { display: flex; align-items: center; gap: 6px; margin: 16px 0 0; padding-top: 12px; border-top: 1px dashed var(--bordo-tenue);
  font-size: var(--t2); color: var(--verde-vivo); }
.lv-fx-spedite svg { width: 14px; height: 14px; }
.lv-fx-adesso h4 { margin: 0 0 10px; font-size: var(--t1); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--testo-4); }
.lv-fx-posti { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.lv-fx-posto { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--sfiora); }
.lv-fx-posto-testa { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.lv-fx-posto-testa b { display: block; font-size: var(--t3); font-weight: 600; color: var(--testo); }
.lv-fx-posto-testa small { display: block; font-size: var(--t2); color: var(--testo-3); }
.lv-fx-posto-testa strong { text-align: right; font-size: var(--t4); font-weight: 650; color: var(--testo); font-variant-numeric: tabular-nums; }
.lv-fx-posto-testa strong small { font-weight: 400; }
.lv-fx-rientro { margin: 0; font-size: var(--t2); color: var(--testo-2); }
.lv-fx-rientro.lv-fx-tardi { color: var(--rosso); font-weight: 600; }
@media (max-width: 760px) {
  .lv-fx-passi { grid-template-columns: 1fr; gap: 14px; }
  .lv-fx-p { flex-direction: row; flex-wrap: wrap; align-items: center; text-align: left; gap: 4px 10px; }
  .lv-fx-p::before { display: none; }
  .lv-fx-voce, .lv-fx-riga, .lv-fx-p .lv-fx-qui { margin-left: 38px; flex-basis: 100%; }
  .lv-fx-numeri { flex-wrap: wrap; }
}
/* fine LAVORAZIONE */

/* CHI E' IL CLIENTE nella testata delle Statistiche (03/11/2026, al posto del titolo: _stat-testa 'chi'): la freccia, il
   marchio, il nome e sotto codice, paese, commerciale. La freccia e' quella di vetro della testata (.testata-indietro). */
.cliente-chi { display: flex; align-items: center; gap: var(--s4); min-width: 0; }
.cliente-chi .marchio-faccia { flex: none; }
.cliente-chi-nome { min-width: 0; }
.cliente-chi-nome .titolo { margin: 0; }
.cliente-chi-nome p { margin: var(--s1) 0 0; font-size: var(--t4); color: var(--notte-testo); }
.cliente-gruppo { margin: 0 var(--pagina) var(--s4); }

/* PIU' CONTATTI INSIEME in Verifica contatti (03/11/2026): poco in vista - un link piccolo, le caselle solo quando si sceglie,
   una barra in basso con le due strade della x. */
.censire-scegli-apri, .censire-scegli-link { border: 0; background: none; padding: 4px 6px; font: inherit; font-size: var(--t3); color: var(--testo-3); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.censire-scegli-apri:hover, .censire-scegli-link:hover { color: var(--testo); }
.censire-spunta { display: none; align-self: center; padding: 0 var(--s2) 0 0; cursor: pointer; }
.censire-spunta input { width: 18px; height: 18px; accent-color: var(--blu); cursor: pointer; }
.scegliendo .censire-spunta { display: block; }
.scegliendo .censire-riga:has([data-scegli]:checked) { box-shadow: inset 0 0 0 2px var(--blu); }
.censire-scegli { position: sticky; bottom: var(--s4); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  margin: var(--s4) var(--pagina) 0; padding: var(--s3) var(--s4); border-radius: var(--raggio-g); background: var(--superficie);
  box-shadow: 0 8px 24px rgba(16, 24, 40, .14); }
.censire-scegli[hidden] { display: none; }
.censire-scegli-quanti { font-size: var(--t3); color: var(--testo-2); }
.censire-scegli-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-left: auto; }
.censire-scegli .rosso { color: var(--rosso, #B42318); }
.scegliendo .censire-carte .rd-riga { grid-template-columns: 22px 46px minmax(0, 1fr) 270px auto; }
@media (max-width: 1100px) { .scegliendo .censire-carte .rd-riga { grid-template-columns: 22px 40px minmax(0, 1fr); } }
.censire-tipi { display: flex; flex-wrap: wrap; gap: 6px; }
.censire-tipi .pillola { height: 30px; padding: 0 10px; }
/* IL NOME DEL COLORE accanto al codice (03/11/2026, Layout::colore): il codice in cifre, il nome come testo. */
.colore-nome { color: var(--testo); }

/* LE SCELTE E I TIPI DA ATTRIBUIRE, in cima a Trattative (04/11/2026, _da-attribuire.php): una riga chiusa che si apre,
   dentro le carte di Verifica contatti (.rd-riga, .rd-dove, .rd-si, .rd-no); a destra il cliente proposto, cambia e i tasti. */
.da-attribuire { margin: 0 var(--pagina) var(--s5); border-radius: var(--raggio-g); background: var(--superficie); box-shadow: var(--ombra); }
.da-attribuire-testa { display: flex; align-items: center; gap: var(--s3); padding: 14px var(--s5); list-style: none; cursor: pointer; font-size: var(--t3); color: var(--testo-2); }
.da-attribuire-testa::-webkit-details-marker { display: none; }
.da-attribuire-testa b { color: var(--testo); font-weight: 650; }
.da-attribuire-icona { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--blu-tenue); color: var(--blu); flex: none; }
.da-attribuire-freccia { margin-left: auto; color: var(--testo-3); transition: transform .15s; flex: none; }
.da-attribuire[open] .da-attribuire-freccia { transform: rotate(180deg); }
.da-attribuire-spiega { margin: 0 var(--s5) var(--s3); font-size: var(--t2); color: var(--testo-3); }
.da-attribuire-carte { padding: 0 var(--s4) var(--s4); }
.da-attribuire-carta { grid-template-columns: 46px minmax(0, 1fr) 300px; align-items: start; }
.da-attribuire-paese { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: var(--t2); font-weight: 400; color: var(--testo-3); }
.da-attribuire-scelte { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: var(--t2); color: var(--testo-2); }
.da-attribuire-scelte li { overflow-wrap: anywhere; }
.da-attribuire-modulo { display: grid; gap: var(--s2); }
.da-attribuire-modulo .rd-dove-testo .m { font-size: var(--t1); color: var(--testo-3); }
.da-attribuire-cambia > summary { width: max-content; list-style: none; cursor: pointer; font-size: var(--t2); color: var(--blu); }
.da-attribuire-cambia > summary::-webkit-details-marker { display: none; }
.da-attribuire-cambia[open] > summary { margin-bottom: 6px; }
.da-attribuire-modulo .rd-azioni { justify-content: space-between; }
@media (max-width: 900px) {
  .da-attribuire { margin: 0 var(--s4) var(--s4); }
  .da-attribuire-testa { padding: 12px var(--s4); }
  .da-attribuire-spiega { margin: 0 var(--s4) var(--s3); }
  .da-attribuire-carte { padding: 0 var(--s2) var(--s2); }
  .da-attribuire-carta { grid-template-columns: 40px minmax(0, 1fr); gap: var(--s3); padding: var(--s3); }
  .da-attribuire-carta .da-attribuire-modulo { grid-column: 1 / -1; }
}
/* CONFRONTA CON (04/11/2026): "Confronta con" e la tendina degli anni, sulla riga di "In più" */
.estr-confronto { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t3); color: var(--testo-2); }
.estr-confronto .campo { width: auto; min-width: 220px; }
/* LE RIGHE SOLO PER IL CONFRONTO (04/11/2026, Extract::onlyBefore): a zero nel periodo scelto, grigio chiaro */
tr.estr-solo-prima > * { opacity: .45; }

/* L'EXECUTIVE SUMMARY (04/11/2026, stats-executive.php): l'anno e il pezzo d'anno in alto, due torte affiancate per i paesi */
.exe-scelte { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin: 0 var(--pagina) var(--s5); }
.exe-spento { padding: 6px 12px; font-size: var(--t3); color: var(--testo-4, var(--testo-3)); opacity: .5; cursor: default; }
.exe-quando { margin-left: auto; font-size: var(--t2); color: var(--testo-3); }
.exe-nota { margin: var(--s3) var(--s5) var(--s4); font-size: var(--t2); color: var(--testo-3); }
.stat-griglia-tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1200px) { .stat-griglia-tre { grid-template-columns: minmax(0, 1fr); } }
.stat-griglia-tre .blocco-testa, .exe-mosse-blocco .blocco-testa, .exe-anni-due .blocco-testa { flex-wrap: wrap; row-gap: 2px; padding-top: var(--s3); padding-bottom: var(--s3); }
.stat-griglia-tre .blocco-titolo, .exe-mosse-blocco .blocco-titolo, .exe-anni-due .blocco-titolo { white-space: nowrap; }
.stat-griglia-tre .blocco-nota, .exe-mosse-blocco .blocco-nota, .exe-anni-due .blocco-nota { order: 2; flex-basis: 100%; margin-left: 0; white-space: normal; }
.stat-griglia-tre .blocco-riduci, .exe-mosse-blocco .blocco-riduci, .exe-anni-due .blocco-riduci { order: 1; margin-left: auto; }
/* segmentazione e famiglie (_anni-torte, 05/11/2026): affiancate, un anno per volta, l'anno in corso in evidenza */
.exe-mosse-blocco { margin: 0 var(--pagina) var(--s5); }
@media (max-width: 900px) { .exe-mosse-blocco { margin-left: var(--s4); margin-right: var(--s4); } }
.stat-griglia.exe-anni-due { align-items: stretch; }
.exe-anni-due .blocco { display: flex; flex-direction: column; }
.at-schede { padding: var(--s3) var(--fianco) 0; }
/* LE PRINCIPALI VARIAZIONI (_variazioni, 05/11/2026): la barra dal centro, verde a destra chi sale, rosso a sinistra chi scende */
.exe-var { margin: 0 var(--pagina) var(--s5); }
.exe-var-scelta { margin: var(--s3) var(--fianco) 0; }
.var-lista { list-style: none; margin: 0; padding: var(--s2) var(--fianco) var(--s4); }
.var-riga { display: grid; grid-template-columns: 28px minmax(0, 1.3fr) minmax(0, 1.4fr) minmax(170px, auto) 72px; align-items: center; gap: var(--s4); padding: 9px 0; border-top: 1px solid var(--bordo-tenue); }
.var-riga:first-child { border-top: 0; }
.var-pos { color: var(--testo-3); font-weight: 600; text-align: right; }
.var-chi { display: grid; min-width: 0; line-height: 1.25; }
.var-chi a, .var-chi b { font-weight: 600; color: var(--testo); text-decoration: none; overflow-wrap: anywhere; }
.var-chi a:hover { color: var(--blu); }
.var-chi small { font-size: var(--t2); color: var(--testo-3); }
.var-barra { display: grid; grid-template-columns: 1fr 1fr; height: 12px; }
.var-barra > span { display: flex; align-items: stretch; }
.var-barra > span:first-child { justify-content: flex-end; border-right: 1px solid var(--bordo-forte); }
.var-barra i { display: block; min-width: 2px; }
.var-su .var-barra i { background: var(--verde); border-radius: 0 4px 4px 0; }
.var-giu .var-barra i { background: var(--rosso); border-radius: 4px 0 0 4px; }
.var-diff { display: grid; justify-items: end; line-height: 1.25; }
.var-su .var-diff b { color: var(--verde); }
.var-giu .var-diff b { color: var(--rosso); }
.var-diff small { font-size: var(--t2); color: var(--testo-3); white-space: nowrap; }
.var-pct { justify-self: end; }
@media (max-width: 900px) {
  .exe-var { margin-left: var(--s4); margin-right: var(--s4); }
  .var-riga { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .var-barra { grid-column: 2 / -1; grid-row: 2; }
  .var-pct { display: none; }
}
.at-anni-scelta { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 12px; background: var(--sfiora); width: max-content; max-width: 100%; }
.at-anni-scelta button { padding: 5px 13px; border: 0; border-radius: 9px; background: transparent; color: var(--testo-2); font: inherit; font-size: var(--t3); font-weight: 600; cursor: pointer; }
.at-anni-scelta button small { font-weight: 500; color: var(--testo-3); }
.at-anni-scelta button:hover { background: var(--superficie); }
.at-anni-scelta button.attiva { background: var(--superficie); color: var(--testo); box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
/* l'anno in corso: oro, come i colori del marchio */
.at-anni-scelta button.at-oggi { color: #8A6D1F; }
.at-anni-scelta button.at-oggi.attiva { background: #8A6D1F; color: #FFF; }
.at-anni-scelta button.at-oggi.attiva small { color: rgba(255, 255, 255, .8); }
.at-anno { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: start; gap: var(--s5); padding: var(--s4) 0 var(--s4); }
.at-anno[hidden] { display: none; }
.at-anno > .torta { width: 170px; height: 170px; margin-top: 30px; }
@media (max-width: 560px) { .at-anno { grid-template-columns: minmax(0, 1fr); justify-items: center; } }
.at-oggi .at-quote { width: 100%; border-collapse: collapse; font-size: var(--t3); }
.at-quote th, .at-quote td { padding: 6px 4px; border-bottom: 1px solid var(--bordo-tenue); text-align: left; }
.at-quote thead th { font-size: var(--t1); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--testo-3); }
.at-quote tbody th { font-weight: 500; }
.at-quote tbody th small { font-weight: 400; color: var(--testo-3); }
.at-quote .pallina { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 3px; vertical-align: 0; }
.at-quote .numero { text-align: right; white-space: nowrap; }
.fat-anno-oggi .mkc-anno-a { color: #8A6D1F; font-weight: 700; }
.fat-anno-oggi .fat-pila { box-shadow: 0 0 0 2px #FFF, 0 0 0 4px #C9A646; }
.exe-mosse { max-height: 560px; overflow-y: auto; }
/* nuovi, recuperati e persi come la pagina 2 del PDF: i conti che filtrano, la riga tinta dallo stato */
/* marchi arrivati, tornati e persi: un interruttore a tre, la frase della scelta sotto, il segmento a destra */
.exe-mosse-comandi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: var(--s4) var(--fianco) 0; }
.exe-scelta { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--sfiora); }
.exe-scelta label { --tinta: var(--testo-2); position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 9px;
  font-size: var(--t3); font-weight: 600; color: var(--testo-2); cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.exe-scelta label:hover { color: var(--testo); }
.exe-scelta input { position: absolute; opacity: 0; pointer-events: none; }
.exe-scelta i { width: 8px; height: 8px; border-radius: 50%; background: var(--tinta); }
.exe-scelta b { min-width: 26px; padding: 1px 7px; border-radius: 999px; background: var(--superficie); color: var(--testo-3); font-size: var(--t2); text-align: center; font-variant-numeric: tabular-nums; transition: background .15s, color .15s; }
.exe-scelta label:has(:checked) { background: var(--superficie); color: var(--testo); box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
.exe-scelta label:has(:checked) b { background: var(--tinta); color: #FFF; }
.exe-scelta label:has(:focus-visible) { outline: 2px solid var(--blu); outline-offset: 1px; }
.exe-scelta label.exe-perso { --tinta: var(--rosso); }
.exe-scelta label.exe-nuovo { --tinta: var(--verde); }
.exe-scelta label.exe-recuperato { --tinta: var(--ambra); }
.exe-mosse-segmento { width: auto; min-width: 190px; margin-left: auto; }
/* le intestazioni della cifra e della data, quella della scelta accesa */
.exe-per { display: none; }
.exe-mosse-blocco:has(input[value=nuovo]:checked) .exe-per-nuovo, .exe-mosse-blocco:has(input[value=recuperato]:checked) .exe-per-recuperato,
.exe-mosse-blocco:has(input[value=perso]:checked) .exe-per-perso { display: inline; }
.exe-mosse-comandi { padding-bottom: var(--s3); }
/* come si conta: in fondo al riquadro, una riga grigia che si apre */
.exe-regola { margin: 0; padding: var(--s2) var(--fianco) var(--s3); border-top: 1px solid var(--bordo-tenue); font-size: var(--t2); color: var(--testo-3); }
.exe-regola > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-weight: 600; }
.exe-regola > summary::-webkit-details-marker { display: none; }
.exe-regola > summary::before { content: 'i'; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid currentColor; font-size: 10px; font-weight: 700; font-style: italic; }
.exe-regola > summary:hover { color: var(--testo-2); }
.exe-regola ul { margin: var(--s2) 0 0; padding-left: 18px; display: grid; gap: 3px; line-height: 1.45; }
/* nella tabella, come la classifica dei marchi: il logo e accanto, centrati, il marchio e sotto piccolo la ragione sociale */
.exe-chi { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.exe-logo { flex: none; display: grid; place-items: center; width: 36px; height: 36px; }
.exe-logo > * { max-width: 36px; max-height: 36px; }
.exe-chi-testi { display: grid; gap: 1px; min-width: 0; line-height: 1.25; }
.exe-chi-testi b { font-weight: 600; color: var(--blu-scuro); }
.exe-chi:hover .exe-chi-testi b { text-decoration: underline; }
.exe-chi-testi small { font-size: var(--t2); font-weight: 400; color: var(--testo-3); }
.exe-segmento { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.exe-segmento i { width: 9px; height: 9px; border-radius: 3px; background: var(--tinta); }
.exe-perso { --tinta: var(--rosso); --tinta-tenue: var(--rosso-tenue); }
.exe-nuovo { --tinta: var(--verde); --tinta-tenue: var(--verde-tenue); }
.exe-recuperato { --tinta: var(--ambra); --tinta-tenue: var(--ambra-tenue); }
.exe-mosse tr[hidden] { display: none; }
.exe-clienti-seg { margin-top: var(--s4); }
@media (max-width: 900px) {
  .exe-scelte { margin: 0 var(--s4) var(--s4); }
  .exe-quando { margin-left: 0; flex-basis: 100%; }
}
/* nuovi e persi: i nomi a capo, mai tagliati; il valore a destra */
.exe-mosse table { width: 100%; border-collapse: collapse; font-size: var(--t3); }
.exe-mosse th, .exe-mosse td { padding: 8px var(--s4); border-bottom: 1px solid var(--bordo-tenue); text-align: left; vertical-align: middle; }
.exe-mosse thead th { font-size: var(--t1); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--testo-3); background: var(--superficie); position: sticky; top: 0; z-index: 2; box-shadow: inset 0 -1px 0 var(--bordo-tenue); }
.exe-mosse tbody th { font-weight: 550; }
.exe-mosse tbody th small { display: block; margin-top: 2px; font-weight: 400; }
.exe-mosse .numero { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* STATISTICHE SOCIAL (rifatte il 05/11/2026): il colore della piattaforma solo nella tessera, nel filo in alto, nella
   curva e nella scheda scelta - il resto e' quello del CRM */
.soc-instagram { --marca: #D62976; --marca-tenue: #FDEAF3; --marca-pieno: linear-gradient(135deg, #FEDA75 0%, #FA7E1E 28%, #D62976 58%, #962FBF 82%, #4F5BD5 100%); }
.soc-linkedin { --marca: #0A66C2; --marca-tenue: #E8F1FB; --marca-pieno: #0A66C2; }
.soc-facebook { --marca: #1877F2; --marca-tenue: #E8F1FE; --marca-pieno: #1877F2; }
.soc-youtube { --marca: #E62117; --marca-tenue: #FDECEB; --marca-pieno: #FF0000; }
.soc-canali { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); margin: 0 var(--pagina) var(--s5); }
.soc-canale { position: relative; display: flex; flex-direction: column; padding: var(--s4) var(--s5) var(--s4); border-radius: var(--raggio-g); background: var(--superficie); box-shadow: var(--ombra); overflow: hidden; }
.soc-canale::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--marca-pieno); }
.soc-testa { display: flex; align-items: center; gap: var(--s2); font-size: var(--t3); }
.soc-icona { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--marca-pieno); color: #FFF; box-shadow: 0 4px 10px -4px var(--marca); }
.soc-follower { display: flex; align-items: baseline; gap: 6px; margin: var(--s3) 0 0; }
.soc-follower b { font-size: 30px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.soc-follower small { font-size: var(--t2); color: var(--testo-3); }
.soc-curva { display: block; width: 100%; height: 40px; margin: 6px 0 var(--s2); color: var(--marca); }
.soc-numeri { display: grid; gap: 6px; margin: auto 0 0; padding-top: var(--s2); border-top: 1px solid var(--bordo-tenue); }
.soc-numeri > div { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); font-size: var(--t2); }
.soc-numeri dt { color: var(--testo-3); }
.soc-numeri dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 6px; }
/* i contenuti: le schede delle piattaforme, la sintesi, i due gruppi */
.soc-piattaforme { display: flex; gap: var(--s2); margin: var(--s3) var(--s5) 0; }
.soc-piattaforme a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--bordo); border-radius: 999px; color: var(--testo-2); font-size: var(--t3); font-weight: 600; text-decoration: none; }
.soc-piattaforme a svg { color: var(--marca); }
.soc-piattaforme a:hover { border-color: var(--marca); color: var(--testo); }
.soc-piattaforme a.attiva { background: var(--marca-tenue); border-color: var(--marca); color: var(--marca); }
.soc-sintesi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); gap: var(--s3); margin: var(--s4) var(--s5) 0; }
.soc-dato { display: grid; align-content: start; gap: 4px; padding: var(--s3) var(--s4); border-radius: 14px; background: var(--sfiora); }
.soc-dato > span { font-size: var(--t2); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--testo-3); }
.soc-dato > b { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.soc-dato > .scarto { justify-self: start; }
.soc-formati ul { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.soc-formati li { display: grid; grid-template-columns: 150px minmax(0, 1fr) 56px; align-items: center; gap: var(--s3); font-size: var(--t3); }
.soc-formati em { font-style: normal; font-weight: 600; }
.soc-formati em small { font-weight: 400; color: var(--testo-3); }
.soc-formati i { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--marca) var(--q), color-mix(in srgb, var(--marca) 12%, transparent) var(--q)); }
.soc-formati b { text-align: right; font-variant-numeric: tabular-nums; }
/* i filtri dei contenuti: pastiglie leggere, la scelta nel colore della piattaforma */
.soc-filtri { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: var(--s3) var(--s5) 0; }
.soc-filtri-nome { font-size: var(--t1); font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--testo-3); margin-right: 2px; }
.soc-filtri-dopo { margin-left: var(--s4); }
.soc-filtro { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: var(--sfiora); color: var(--testo-2); font-size: var(--t2); font-weight: 600; text-decoration: none; transition: background .12s, color .12s; }
.soc-filtro small { font-weight: 600; color: var(--testo-3); }
.soc-filtro:hover { background: var(--marca-tenue); color: var(--marca); }
.soc-filtro.attivo { background: var(--marca); color: #FFF; }
.soc-filtro.attivo small { color: rgba(255, 255, 255, .8); }
.soc-formati li.scelto em { color: var(--marca); }
/* il bollino degli sponsorizzati: discreto, sulla foto e accanto al testo */
.soc-sponsor { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: #92400E; font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; box-shadow: 0 1px 4px rgba(16, 24, 40, .12); }
.soc-post-foto .soc-sponsor { position: absolute; top: 8px; right: 8px; }
.soc-riga-testo .soc-sponsor { margin-left: 8px; background: #FEF3E2; box-shadow: none; vertical-align: 1px; }
/* tutti i post: una tabella fitta con la miniatura, dieci per volta */
.soc-tutti { padding: var(--s2) var(--s5) var(--s5); }
.soc-tutti table { width: 100%; border-collapse: collapse; font-size: var(--t3); }
.soc-tutti th, .soc-tutti td { padding: 8px var(--s2); border-bottom: 1px solid var(--bordo-tenue); text-align: left; vertical-align: middle; }
.soc-tutti thead th { font-size: var(--t1); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--testo-3); }
.soc-tutti .numero { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.soc-tutti td.numero small { display: block; font-size: var(--t1); color: var(--testo-3); }
.soc-tutti tbody tr:hover td { background: var(--riga-sfiora); }
.soc-riga { display: flex; align-items: center; gap: var(--s3); color: inherit; text-decoration: none; }
.soc-riga:hover .soc-riga-testo { color: var(--blu-scuro); }
.soc-mini { flex: none; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--sfiora); }
.soc-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.soc-riga-testo { overflow-wrap: anywhere; }
.soc-contro { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: var(--t2); font-weight: 650; }
.soc-contro.soc-su { background: var(--verde-tenue); color: var(--verde); }
.soc-contro.soc-giu { background: var(--rosso-tenue); color: var(--rosso); }
@media (max-width: 900px) { .soc-filtri { margin-left: var(--s3); margin-right: var(--s3); } .soc-filtri-dopo { margin-left: 0; flex-basis: 100%; margin-top: 4px; } .soc-tutti { padding: var(--s2) var(--s3) var(--s3); overflow-x: auto; } }
.soc-gruppo { display: flex; align-items: center; gap: 8px; margin: var(--s5) var(--s5) 0; font-size: var(--t4); font-weight: 650; }
.soc-gruppo small { font-size: var(--t2); font-weight: 400; color: var(--testo-3); }
.soc-gruppo.soc-su svg { color: var(--verde-vivo); }
.soc-gruppo.soc-giu svg { color: var(--rosso); }
.soc-post { list-style: none; margin: 0; padding: var(--s3) var(--s5) var(--s4); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.soc-post-carta { display: grid; grid-template-rows: auto 1fr auto; height: 100%; border: 1px solid var(--bordo-tenue); border-radius: var(--raggio-g); overflow: hidden; color: inherit; text-decoration: none; background: var(--superficie); transition: box-shadow .15s, transform .15s; }
.soc-post-carta:hover { box-shadow: var(--ombra-alta); transform: translateY(-1px); }
.soc-post-foto { position: relative; aspect-ratio: 4 / 3; background: var(--sfiora); }
.soc-post-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.soc-volte { position: absolute; left: 8px; bottom: 8px; padding: 4px 10px; border-radius: 999px; font-style: normal; font-size: var(--t2); font-weight: 700; color: #FFF; backdrop-filter: blur(6px); }
.soc-volte.soc-su { background: rgba(6, 118, 71, .88); }
.soc-volte.soc-giu { background: rgba(180, 35, 24, .85); }
.soc-post-testo { display: grid; align-content: start; gap: 4px; padding: var(--s3) var(--s3) 0; font-size: var(--t2); color: var(--testo-2); }
.soc-post-testo small { color: var(--testo-3); }
.soc-post-testo span { overflow-wrap: anywhere; }
.soc-post-numeri { display: grid; gap: 2px; padding: var(--s3); font-size: var(--t2); color: var(--testo-3); }
.soc-post-numeri b { font-size: var(--t5, 18px); color: var(--testo); }
@media (max-width: 1100px) { .soc-canali { grid-template-columns: repeat(2, minmax(0, 1fr)); } .soc-sintesi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .soc-formati { grid-column: 1 / -1; } .soc-post { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .soc-canali { margin: 0 var(--s4) var(--s4); gap: var(--s3); }
  .soc-sintesi, .soc-piattaforme { margin-left: var(--s3); margin-right: var(--s3); }
  .soc-gruppo { margin-left: var(--s3); margin-right: var(--s3); }
  .soc-post { padding: var(--s3); gap: var(--s3); }
  .soc-formati li { grid-template-columns: 110px minmax(0, 1fr) 44px; }
}
/* IL CONFEZIONISTA COL PERCHE' (04/11/2026, Layout::segnoConfezionista): il fumetto spiega */
.segno-perche { cursor: help; }
.testata-perche dd { font-weight: 400; }

/* LE ESTRAZIONI PIU' LEGGIBILI (04/11/2026, Mattia: "un po' piu' appealing... leggermente"): i totali in una fascia in
   cima, le righe a gruppi quando la prima voce si ripete, la pastiglia del confezionista sulla riga del nome */
.estr-sommario { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); margin: 0; padding: var(--s4) var(--s5); border-bottom: 1px solid var(--bordo-tenue); background: linear-gradient(180deg, var(--sfiora), transparent); }
.estr-sommario > div { display: grid; gap: 2px; }
.estr-sommario dt { font-size: var(--t1); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--testo-3); }
.estr-sommario dd { margin: 0; font-size: var(--t5, 18px); font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--testo); }
.estr-sommario-var dd { display: flex; align-items: center; min-height: 26px; font-size: var(--t3); }
.estr-tabella tr.estr-gruppo > * { border-top: 1px solid var(--bordo); }
.estr-tabella th.estr-ripetuto { border-top-color: transparent; }
@media (max-width: 900px) { .estr-tabella .ord-nome { white-space: nowrap; } }
.estr-tabella .ord-nome .segno { margin-left: 6px; padding: 0 5px; font-size: 10px; line-height: 15px; vertical-align: 1px; white-space: nowrap; }
.estr-tabella tbody tr:hover > * { background: var(--sfiora); }
@media (max-width: 900px) { .estr-sommario { padding: var(--s3) var(--s4); gap: var(--s2) var(--s4); } }
.estr-ripetuto .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* LE TABELLE LUNGHE DEI REPORT DA SCHERMO (05/11/2026, Mattia: "piu' gradevole e usabile, senza stravolgerla"; Estrazioni,
   Fatturato, Portafoglio, E-commerce, Ordini del cliente): la tabella scorre dentro il suo riquadro alto quanto lo schermo,
   cosi' l'intestazione resta in cima e il totale in fondo; nelle Estrazioni anche la prima colonna resta ferma di lato. */
@media (min-width: 901px) {
  .anni-tabella.ord-tabella { max-height: calc(100vh - 96px); overflow: auto; overscroll-behavior: contain; }
  .ord-tabella thead { position: sticky; top: 0; z-index: 3; }
  .ord-tabella thead th { background: var(--superficie); box-shadow: inset 0 -1px 0 var(--bordo); }
  .ord-tabella tfoot { position: sticky; bottom: 0; z-index: 2; }
  .ord-tabella tfoot th, .ord-tabella tfoot td { background: var(--superficie); box-shadow: inset 0 1px 0 var(--bordo); }
  .estr-tabella tbody th, .estr-tabella tfoot th, .estr-tabella thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--superficie); }
  .estr-tabella thead th:first-child { z-index: 4; }
}
/* L'intestazione a due piani delle Estrazioni: sopra la misura, una linea la separa dalla misura prima. */
.estr-tabella th.estr-misura { text-align: center; color: var(--testo-2); border-bottom: 1px solid var(--bordo-tenue); }
.estr-tabella tr.estr-misure + tr th { vertical-align: bottom; }
.estr-tabella .estr-inizio, .estr-tabella th.estr-misura { border-left: 1px solid var(--bordo-tenue); }
/* Fatturato, Portafoglio e l anno per anno dell E-commerce: 1180px (29/10) le facevano uscire dallo schermo a 1440 col menu aperto (05/11/2026). */
.ord-tabella.ord-stretta table { min-width: 880px; }

/* ---------- LE FAMIGLIE (0216, 06/11/2026) ---------- */
/* L'elenco (rifatto il 06/11/2026): la testata di tutti gli elenchi, le mancanti chiuse, una tabella. */
.fam-mancanti { margin: 0 var(--s8) var(--s4); border: 1px solid var(--ambra-bordo); border-radius: var(--raggio-g); background: var(--ambra-tenue); }
.fam-mancanti summary { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); color: var(--ambra); cursor: pointer; list-style: none; }
.fam-mancanti summary::-webkit-details-marker { display: none; }
.fam-mancanti summary::after { content: 'Mostra'; margin-left: auto; font-size: var(--t2); font-weight: 600; }
.fam-mancanti[open] summary::after { content: 'Nascondi'; }
.fam-mancanti ul { list-style: none; margin: 0; padding: 0 var(--s4) var(--s4); display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
.fam-mancanti li { display: flex; align-items: center; gap: var(--s2); padding: 8px 12px; border-radius: var(--raggio); background: var(--superficie); }
.fam-mancanti li small { color: var(--testo-3); }
.fam-mancanti li a { margin-left: auto; font-size: var(--t2); font-weight: 600; color: var(--blu-scuro); text-decoration: none; }
.fam-tabella td { vertical-align: middle; }
.fam-logo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--sfiora); }
.fam-logo img { width: 100%; height: 100%; object-fit: cover; }
.fam-logo span { font-size: var(--t2); font-weight: 600; color: var(--testo-3); }
.fam-payoff { display: block; margin-top: 2px; font-size: var(--t2); color: var(--testo-3); overflow-wrap: anywhere; }
.fam-segno { display: inline-flex; align-items: center; gap: 3px; padding: 2px 9px; border-radius: 999px; font-size: var(--t2); font-weight: 600;
             background: var(--blu-tenue); color: var(--blu-scuro); }
/* lane, cotoni, lini (0217): tre toni tenui, niente viola */
.fam-segno.fam-lane { background: #F3EEE6; color: #6B4F2A; }
.fam-segno.fam-cotoni { background: #EAF4EC; color: #2F6B3B; }
.fam-segno.fam-lini { background: #EEF2F7; color: #3B5370; }
.fam-da-fare { font-size: var(--t2); color: var(--ambra); font-weight: 600; }

/* quello che la pagina nasconde resta nascosto anche dove lo stile da' un display (il book, lo scarica, il "Trascina") */
.fam-scheda [hidden] { display: none !important; }
.fam-testa { margin: var(--s6) var(--s8) var(--s5); }
.fam-indietro { display: inline-flex; align-items: center; gap: 4px; color: var(--testo-3); font-size: var(--t2); text-decoration: none; }
.fam-indietro:hover { color: var(--blu-scuro); }
.fam-testa-riga { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); margin-top: var(--s2); }
.fam-titolo { margin: 0; font-size: 28px; font-weight: 650; letter-spacing: -.01em; color: var(--testo); }
.fam-sottotitolo { margin: 4px 0 0; color: var(--testo-3); font-size: var(--t3); }
.fam-elimina { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: var(--raggio); background: none;
               color: var(--testo-3); font: inherit; font-size: var(--t2); cursor: pointer; }
.fam-elimina:hover { background: var(--rosso-tenue); color: var(--rosso); }
.fam-testa form { margin: 0; }

.fam-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s5); align-items: start; margin: 0 var(--s8) 96px; }
.fam-sinistra { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.fam-modulo { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.fam-destra { position: sticky; top: var(--s5); display: flex; flex-direction: column; gap: var(--s5); }
.fam-carta-modulo { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s5); background: var(--superficie);
                    border-radius: var(--raggio-g); box-shadow: 0 1px 2px rgba(16, 24, 40, .06); }
.fam-sezione { margin: 0; font-size: var(--t4); font-weight: 600; color: var(--testo); }
.fam-sezione small { margin-left: 6px; font-size: var(--t2); font-weight: 400; color: var(--testo-3); }
.fam-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fam-campo .k { font-size: var(--t2); font-weight: 600; color: var(--testo-2); text-transform: uppercase; letter-spacing: .04em; }
.fam-campo .k small { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--testo-3); }
.fam-campo .campo { width: 100%; }
.fam-nome { height: 48px !important; font-size: 20px; font-weight: 600; }
.fam-due { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
/* stagione, classificazione e ordine su una riga (06/11/2026) */
.fam-tre { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) 90px; gap: var(--s4); align-items: start; }
.fam-ordine .campo { max-width: 90px; }

/* le scelte a pulsanti: un clic, si vede subito cosa e' scelto */
.fam-pillole { display: flex; flex-wrap: wrap; gap: 6px; }
.fam-pillola { position: relative; cursor: pointer; }
.fam-pillola input { position: absolute; opacity: 0; pointer-events: none; }
.fam-pillola span { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid var(--bordo-forte);
                    border-radius: 999px; background: var(--superficie); color: var(--testo-2); font-size: var(--t3); transition: all .12s; }
.fam-pillola:hover span { border-color: var(--blu); color: var(--blu-scuro); }
.fam-pillola input:checked + span { border-color: var(--blu); background: var(--blu); color: #FFF; font-weight: 600; }
.fam-pillola input:focus-visible + span { box-shadow: 0 0 0 3px var(--blu-tenue); }

.fam-editor { border: 1px solid var(--bordo-forte); border-radius: var(--raggio); background: var(--superficie); overflow: hidden; }
.fam-editor:focus-within { border-color: var(--blu); box-shadow: 0 0 0 3px var(--blu-tenue); }
.fam-barra { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid var(--bordo); background: var(--sfiora); }
.fam-barra button { display: inline-flex; align-items: center; gap: 4px; height: 28px; min-width: 30px; padding: 0 9px; border: 0;
                    border-radius: 6px; background: none; color: var(--testo-2); cursor: pointer; font: inherit; font-size: var(--t2); }
.fam-barra button:hover { background: var(--superficie); color: var(--testo); box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.fam-area { min-height: 280px; max-height: 60vh; overflow: auto; padding: var(--s4); line-height: 1.6; font-size: var(--t4); overflow-wrap: anywhere; }
.fam-area:focus { outline: none; }
.fam-area:empty::before { content: attr(data-segnaposto); color: var(--testo-4); }
.fam-area p { margin: 0 0 .8em; }
.fam-conta { font-weight: 400 !important; }

.fam-libro-icona { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--rosso-tenue); color: var(--rosso); }
.fam-libro-nuovo { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border: 1.5px dashed var(--bordo-forte);
                   border-radius: var(--raggio); color: var(--testo-2); cursor: pointer; transition: border-color .15s, background .15s; }
.fam-libro-nuovo > span { display: flex; flex-direction: column; gap: 2px; }
.fam-libro-nuovo small { color: var(--testo-3); }
.fam-libro-nuovo:hover, .fam-libro-nuovo.sopra { border-color: var(--blu); background: var(--blu-tenue); color: var(--blu-scuro); }
.fam-libro-nuovo.carica, .fam-immagine.carica .fam-posto { opacity: .55; pointer-events: none; }
/* i book (06/11/2026): quello della famiglia in una riga, l'archivio in una finestra */
.fam-libri { display: flex; flex-direction: column; gap: var(--s3); }
.fam-libri.carica { opacity: .6; pointer-events: none; }
.fam-sotto { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin: var(--s2) 0 0; font-size: var(--t2); font-weight: 600;
             text-transform: uppercase; letter-spacing: .04em; color: var(--testo-2); }
.fam-link { padding: 0; border: 0; background: none; color: var(--blu-scuro); font: inherit; font-weight: 500; text-transform: none; letter-spacing: 0; cursor: pointer; }
.fam-link:hover { text-decoration: underline; }
.fam-libro-riga { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border: 1px solid var(--bordo); border-radius: var(--raggio); }
.fam-libro-testi { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.fam-libro-testi b { font-weight: 600; overflow-wrap: anywhere; }
.fam-libro-testi small { color: var(--testo-3); font-size: var(--t2); line-height: 1.4; }
.fam-libro-azioni { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
@media (max-width: 760px) {
  .fam-libro-riga { flex-wrap: wrap; }
  .fam-libro-testi { flex: 1 1 calc(100% - 48px); }
  .fam-libro-azioni { width: 100%; padding-left: 48px; }
}
.fam-libro-azioni > a, .fam-libro-azioni > label, .fam-libro-azioni > button:not(.bottone) { display: grid; place-items: center; width: 30px; height: 30px; border: 0;
             border-radius: 6px; background: none; color: var(--testo-3); cursor: pointer; }
.fam-libro-azioni > a.bottone { display: inline-flex; width: auto; }
.fam-libro-azioni > a:not(.bottone):hover, .fam-libro-azioni > label:hover { background: var(--blu-tenue); color: var(--blu-scuro); }
.fam-libro-azioni > button:not(.bottone):hover { background: var(--rosso-tenue); color: var(--rosso); }
.fam-libro-vuoto { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4);
                   border: 1.5px dashed var(--bordo-forte); border-radius: var(--raggio); color: var(--testo-3); font-size: var(--t3); }
.fam-libro-qui { display: inline-flex; align-items: center; gap: 4px; color: #2F6B3B; font-size: var(--t2); font-weight: 600; }
.fam-archivio { width: min(720px, calc(100vw - 32px)); }
.fam-archivio .scheda-corpo { display: flex; flex-direction: column; gap: var(--s3); }
.fam-archivio-cerca { width: 100%; min-height: 38px; padding: 8px 12px !important; box-sizing: border-box; flex-shrink: 0; }
.fam-libro-azioni > label.fam-sostituisci { display: inline-flex; width: auto; gap: 4px; padding: 0 10px; border: 1px solid var(--bordo-forte);
             background: var(--superficie); color: var(--testo-2); font-size: var(--t2); font-weight: 500; }
.fam-archivio-elenco { list-style: none; margin: 0; padding: 0; max-height: 52vh; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.fam-archivio-elenco li { display: flex; align-items: center; gap: var(--s3); padding: 10px 12px; border-radius: var(--raggio); background: var(--sfiora); }
.fam-archivio-elenco li.qui { background: #EAF4EC; }
.fam-archivio-elenco li[hidden] { display: none; }
.fam-archivio-elenco .fam-libro-icona { width: 30px; height: 30px; }

/* l'anteprima: un telefono stilizzato con la testata, il nome, il payoff e l'inizio del testo */
.fam-anteprima-etichetta { margin: 0 0 var(--s3); font-size: var(--t2); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--testo-3); }
.fam-telefono { overflow: hidden; border-radius: 22px; background: #FFF; box-shadow: 0 0 0 8px #1F2937, 0 12px 30px rgba(16, 24, 40, .18); margin: 8px; }
.fam-tel-testata { display: grid; place-items: center; aspect-ratio: 16 / 9; background: #E9ECF1 center / cover no-repeat; color: var(--testo-3); font-size: var(--t2); }
.fam-tel-corpo { padding: 18px 18px 22px; overflow: hidden; }
.fam-tel-corpo h3 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 24px; font-weight: 400; color: #1B1B1B; }
.fam-tel-payoff { margin: 4px 0 12px; color: #8A7A4A; font-size: 13px; font-style: italic; }
.fam-tel-testo { max-height: 190px; overflow: hidden; color: #444; font-size: 12.5px; line-height: 1.55;
                 -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.fam-tel-testo p { margin: 0 0 .6em; }
.fam-tel-libro { display: inline-block; margin-top: 10px; padding: 7px 14px; border-radius: 999px; background: #A69965; color: #FFF; font-size: 12px; }

.fam-immagini { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto auto; gap: var(--s4); align-items: start; }
.fam-header { grid-row: span 2; }
.fam-squared { max-width: 180px; }
.fam-immagine { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fam-posto { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: var(--raggio); overflow: hidden; cursor: pointer;
             background: var(--sfiora); border: 1.5px dashed transparent; transition: border-color .15s, background .15s; }
.fam-header .fam-posto { aspect-ratio: 2 / 3; }
.fam-squared .fam-posto { aspect-ratio: 1; }
.fam-posto img { width: 100%; height: 100%; object-fit: contain; }
.fam-posto.vuoto { border-color: var(--bordo-forte); color: var(--testo-3); }
.fam-posto-vuoto { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t2); }
.fam-posto-cambia { position: absolute; right: 8px; bottom: 8px; display: none; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px;
                    background: rgba(16, 24, 40, .7); color: #FFF; font-size: var(--t1); }
.fam-posto:not(.vuoto):hover .fam-posto-cambia { display: inline-flex; }
.fam-posto:hover, .fam-posto.sopra { border-color: var(--blu); background: var(--blu-tenue); }
.fam-immagine figcaption { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s2); font-size: var(--t2); }
.fam-immagine figcaption > span:first-child { display: flex; flex-direction: column; gap: 1px; }
.fam-immagine figcaption small { color: var(--testo-3); }
.fam-azioni { display: inline-flex; gap: 2px; }
.fam-azioni[hidden] { display: none; }
.fam-azioni a, .fam-azioni button { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 6px; background: none;
                                    color: var(--testo-3); cursor: pointer; }
.fam-azioni a:hover { background: var(--blu-tenue); color: var(--blu-scuro); }
.fam-azioni button:hover { background: var(--rosso-tenue); color: var(--rosso); }
.fam-dopo { display: flex; gap: var(--s2); margin: 0; padding: var(--s4); border-radius: var(--raggio-g); background: var(--blu-tenue); color: var(--blu-scuro); font-size: var(--t3); }

/* la barra del salvataggio, in basso al centro del contenuto */
.fam-salva { position: fixed; z-index: 40; left: 50%; bottom: 20px; transform: translateX(calc(-50% + 124px)); display: flex; align-items: center;
             gap: var(--s3); padding: 10px 10px 10px 18px; border-radius: 14px; background: #101828; color: #FFF;
             box-shadow: 0 12px 30px rgba(16, 24, 40, .3); animation: fam-sale .18s ease-out; }
.fam-salva[hidden] { display: none; }
.fam-salva-testo { font-size: var(--t3); margin-right: var(--s3); }
.fam-salva .bottone-secondario { background: transparent; color: #FFF; border-color: rgba(255, 255, 255, .3); }
@keyframes fam-sale { from { transform: translate(calc(-50% + 124px), 12px); opacity: 0; } }

@media (max-width: 1100px) {
  .fam-layout { grid-template-columns: minmax(0, 1fr); }
  .fam-destra { position: static; }
  .fam-telefono { max-width: 380px; }
}
@media (max-width: 900px) {
  .fam-mancanti { margin-left: var(--s4); margin-right: var(--s4); }
  .fam-testa { margin: var(--s4); }
  .fam-layout { margin: 0 var(--s4) 110px; }
  .fam-due, .fam-tre { grid-template-columns: minmax(0, 1fr); }
  .fam-immagini { grid-template-columns: minmax(0, 1fr); }
  .fam-salva { left: var(--s3); right: var(--s3); bottom: calc(76px + env(safe-area-inset-bottom)); transform: none; justify-content: flex-end; animation: none; }
  .fam-salva-testo { margin-right: auto; }
}

/* =============================================================================
   LE FIERE E LE VISITE (0224, 06/11/2026, fiere.php, _fiera-riga.php, visite.php, fiera-impostazioni.php). Rifatte lo
   stesso giorno (Mattia: "usabilita' e leggibilita', sia da mobile che da desktop"): righe a griglia, non una tabella;
   l'orario dello slot a sinistra coi posti a pallini (sul telefono una barra ferma in cima); il check-in e' un quadrato
   grande da pollice; arrivato = spunta verde e l'ora, la riga resta leggibile (niente fondo pieno, il viola no).
   ============================================================================= */
.fr-fiera { display: grid; gap: var(--s5); padding: var(--s5) var(--s6); }
.fr-fiera-testa { display: grid; gap: 6px; }
.fr-scegli { margin: 0; }
.fr-scegli-campo { position: relative; display: inline-flex; align-items: center; gap: 10px; max-width: 100%; cursor: pointer; }
.fr-scegli-campo .fr-nome { font-size: 28px; font-weight: 700; letter-spacing: -.015em; line-height: 1.15; color: var(--testo); }
.fr-scegli-freccia { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sfiora); color: var(--testo-2); }
.fr-scegli-campo:hover .fr-scegli-freccia { background: var(--blu-tenue); color: var(--blu-scuro); }
.fr-scegli-campo select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.fr-quando { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; color: var(--testo-3); font-size: var(--t3); }
.fr-quando span + span::before { content: '·'; margin: 0 8px; color: var(--testo-4); }
/* le cifre delle Visite (visite.php) */
.fr-cifre { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s3); max-width: 760px; }
.fr-cifra { position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 2px; min-height: 84px; padding: 12px 16px; border-radius: 12px; background: var(--sfiora); }
.fr-cifra b { font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--testo); font-variant-numeric: tabular-nums; }
.fr-cifra > span { font-size: var(--t2); color: var(--testo-3); }
.fr-giorni { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--s6)); padding: 0 var(--s6); }
.fr-giorni::-webkit-scrollbar { display: none; }
.fr-giorni a { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 16px; border: 1px solid var(--bordo);
               border-radius: 999px; background: var(--superficie); color: var(--testo-2); font-size: var(--t3); font-weight: 600; text-decoration: none; white-space: nowrap; }
.fr-giorni a:hover { border-color: var(--bordo-forte); color: var(--testo); }
.fr-giorni a small { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--sfiora); font-size: var(--t1); font-weight: 700; color: var(--testo-3); }
.fr-giorni a.attivo { border-color: var(--notte); background: var(--notte); color: #FFF; }
.fr-giorni a.attivo small { background: rgba(255, 255, 255, .16); color: #FFF; }
/* le linguette dell'arrivo: piu' piccole dei giorni, "Solo i miei" staccato a destra */
.fr-stati { margin-top: calc(-1 * var(--s2)); }
.fr-stati a { height: 34px; padding-left: 14px; font-size: var(--t2); }
.fr-stati a.attivo { border-color: var(--blu-scuro); background: var(--blu-tenue); color: var(--blu-scuro); }
.fr-stati a.attivo small { background: var(--superficie); color: var(--blu-scuro); }
.fr-miei { margin-left: auto; }
.fr-miei i { display: grid; place-items: center; width: 16px; height: 16px; margin-left: -4px; border: 1.5px solid var(--bordo-forte); border-radius: 5px; color: transparent; }
.fr-miei.attivo i { border-color: var(--blu-scuro); background: var(--blu-scuro); color: #FFF; }
.fr-rotella { display: inline-flex; align-items: center; gap: 6px; }

.fr-giorno { overflow: clip; }
.fr-giorno-testa { margin: 0; padding: var(--s4) var(--s5); font-size: var(--t6); font-weight: 700; color: var(--testo); border-bottom: 1px solid var(--bordo-tenue); }
.fr-giorno-testa small { margin-left: 10px; font-size: var(--t3); font-weight: 400; color: var(--testo-3); }
.fr-slot { display: grid; grid-template-columns: 132px minmax(0, 1fr); border-bottom: 1px solid var(--bordo-tenue);
           background: linear-gradient(to right, var(--sfiora) 131px, var(--bordo-tenue) 131px, var(--bordo-tenue) 132px, transparent 132px); }
.fr-slot:last-child { border-bottom: 0; }
.fr-slot-ora { position: sticky; top: 0; align-self: start; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 6px; row-gap: 3px;
               padding: 14px 10px 12px var(--s5); }
.fr-slot-ora > span, .fr-slot-ora > em { grid-column: 1 / -1; }
.fr-slot-ora > b { font-size: 20px; font-weight: 700; color: var(--testo); font-variant-numeric: tabular-nums; line-height: 1.1; }
.fr-slot-ora > span { font-size: var(--t2); color: var(--testo-3); }
.fr-slot:not(.fr-slot-vuoto) .fr-slot-ora > span { grid-column: 1; grid-row: 2; }
.fr-righe { margin: 0; padding: 0; list-style: none; min-width: 0; }
.fr-riga { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 460px) 32px; align-items: start; column-gap: var(--s4); min-height: 68px;
           padding: 12px var(--s4) 12px var(--s3); border-bottom: 1px solid var(--bordo-tenue); }
.fr-riga:not(:has(.fr-togli-posto)) { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 460px); padding-right: var(--s5); }
.fr-togli-posto { display: grid; place-items: center; height: 44px; }
.fr-riga:last-child { border-bottom: 0; }
.fr-righe-visite .fr-riga, .fr-righe-visite .fr-riga:not(:has(.fr-togli-posto)) { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); padding-left: var(--s5); }
.fr-azienda[hidden] { display: none; }
/* la stessa azienda della riga prima: si attacca a lei, senza linea in mezzo */
.fr-riga:has(+ .fr-riga.stessa) { border-bottom-color: transparent; }
.fr-riga.stessa { min-height: 48px; padding-top: 0; }
.fr-riga.stessa-meta .fr-meta { visibility: hidden; }
.fr-slot-vuoto { grid-template-columns: minmax(0, 1fr); background: var(--superficie); }
.fr-slot-vuoto .fr-slot-ora { position: static; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 10px var(--s5); }
.fr-slot-vuoto .fr-slot-ora > b { font-size: var(--t4); color: var(--testo-2); }
.fr-slot-vuoto .fr-aggiungi { margin: 0 0 0 auto; }
.fr-slot-vuoto .fr-slot-ora > span, .fr-slot-vuoto .fr-slot-ora > em { grid-column: auto; }
.fr-libero { padding: 20px var(--s5); font-size: var(--t3); color: var(--testo-4); font-style: italic; }

.fr-arrivo { position: relative; display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
.fr-arrivo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.fr-arrivo-box { display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid var(--bordo-forte); border-radius: 9px;
                 background: var(--superficie); color: transparent; transition: background .12s, border-color .12s; }
.fr-arrivo:hover .fr-arrivo-box { border-color: var(--verde); }
.fr-arrivo input:checked + .fr-arrivo-box { border-color: var(--verde); background: var(--verde); color: #FFF; }
.fr-arrivo input:focus-visible + .fr-arrivo-box { outline: 2px solid var(--blu); outline-offset: 2px; }
.fr-riga.arrivato { background: var(--verde-tenue); }

.fr-chi { display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 44px; justify-content: center; }
.fr-chi > .fr-compra, .fr-chi > .fr-note, .fr-chi > .fr-sost, .fr-chi > .fr-ora-arrivo { margin-top: 4px; }
.fr-chi > .fr-compra + .fr-ora-arrivo, .fr-chi > .fr-note + .fr-ora-arrivo { margin-top: 2px; }
.fr-azienda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: var(--t5); font-weight: 650; line-height: 1.25; color: var(--testo); overflow-wrap: anywhere; }
.fr-azienda a { color: inherit; text-decoration: none; }
.fr-azienda a:hover { color: var(--blu-scuro); text-decoration: underline; }
.fr-persona { font-size: var(--t3); color: var(--testo-2); overflow-wrap: anywhere; }
.fr-persona a { color: inherit; text-decoration: none; }
.fr-persona a:hover { color: var(--blu-scuro); text-decoration: underline; }
.fr-ruolo { color: var(--testo-3); }
.fr-ruolo::before { content: '·'; margin: 0 6px; color: var(--testo-4); }
.fr-note { display: inline-flex; align-items: flex-start; gap: 6px; width: fit-content; max-width: 100%; padding: 4px 10px; border-radius: 8px;
           background: var(--ambra-tenue); color: var(--ambra); font-size: var(--t2); white-space: pre-line; }
.fr-note svg { flex: none; margin-top: 2px; }
.fr-sost { font-size: var(--t2); color: var(--testo-3); overflow-wrap: anywhere; }
.fr-ora-arrivo { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t2); font-weight: 600; color: var(--verde); }
.fr-ora-arrivo[hidden] { display: none; }
.fr-segno { padding: 1px 9px; border-radius: 999px; background: var(--sfiora-scuro); color: var(--testo-2); font-size: var(--t1); font-weight: 600; }
.fr-bandiera { display: none; }

.fr-meta { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: var(--s3); min-height: 44px; font-size: var(--t3); color: var(--testo-2); }
.fr-righe-visite .fr-meta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fr-paese, .fr-rep { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.fr-rep svg { flex: none; color: var(--testo-4); }
.fr-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 var(--pagina) var(--s6); font-size: var(--t2); color: var(--testo-3); }
.fr-legenda b { color: var(--testo-2); }
.fr-legenda span { display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 1100px) {
  .fr-riga, .fr-riga:not(:has(.fr-togli-posto)) { grid-template-columns: 44px minmax(0, 1fr) auto; row-gap: 8px; }
  .fr-righe-visite .fr-riga, .fr-righe-visite .fr-riga:not(:has(.fr-togli-posto)) { grid-template-columns: minmax(0, 1fr); }
  .fr-togli-posto { grid-column: 3; grid-row: 1; height: 32px; }
  .fr-meta { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 0; font-size: var(--t2); color: var(--testo-3); }
  .fr-righe-visite .fr-meta { grid-column: 1; }
  .fr-meta > :empty, .fr-meta > .fr-paese { display: none; }
  .fr-bandiera { display: inline-flex; }
  .fr-righe-visite .fr-bandiera { display: none; }
  .fr-righe-visite .fr-meta > .fr-paese { display: inline-flex; }
  .fr-riga.stessa-meta .fr-meta { display: none; }
  }
@media (max-width: 700px) {
  .fr-fiera { gap: var(--s4); padding: var(--s4); }
  .fr-giorni { margin: 0 calc(-1 * var(--s4)); padding: 0 var(--s4); }
  .fr-scegli-campo .fr-nome { font-size: 23px; }
  .fr-cifre { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--s2); max-width: none; }
  .fr-cifra > span { font-size: var(--t1); }
  .fr-cifra { min-width: 0; min-height: 72px; padding: 10px 12px; }
  .fr-cifra b { font-size: 22px; }
  /* sul telefono le linguette dell'arrivo vanno a capo: "Solo i miei" non deve finire fuori schermo */
  .fr-stati { flex-wrap: wrap; overflow: visible; margin: calc(-1 * var(--s2)) 0 0; padding: 0; gap: 6px; }
  .fr-stati a { padding-left: 12px; }
  .fr-miei { margin-left: 0; }
  .fr-giorno-testa { padding: var(--s3) var(--s4); font-size: var(--t5); }
  .fr-giorno-testa small { display: block; margin: 2px 0 0; font-size: var(--t2); }
  /* l'orario diventa una barra che resta in cima mentre si scorre lo slot */
  .fr-slot { grid-template-columns: minmax(0, 1fr); background: none; }
  .fr-slot-ora { position: sticky; top: 0; z-index: 2; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px;
                 padding: 9px var(--s4); border-right: 0; border-bottom: 1px solid var(--bordo-tenue); background: #F4F5F7; }
  .fr-slot-ora > b { font-size: var(--t5); }
  .fr-slot-ora .fr-aggiungi { margin: 0 0 0 auto; }
  .fr-slot-ora > span, .fr-slot-ora > em { grid-column: auto; }
  .fr-togli { opacity: .6; }
  .fr-riga, .fr-riga:not(:has(.fr-togli-posto)) { column-gap: 10px; padding: 12px var(--s3) 12px 8px; }
  .fr-righe-visite .fr-riga { padding-left: var(--s4); }
  .fr-azienda { font-size: var(--t4); }
}

/* IL TAVOLO, IL SEMAFORO, COSA COMPRA (06/11/2026, Mattia: "colpo d'occhio subito: a chi Cecilia deve indirizzare il
   cliente, e il commerciale chi gli arriva e cosa fargli vedere"). Il commerciale col suo colore (Layout::tint, lo stesso in
   ogni riga); il semaforo e' una pastiglia: dimensione in grassetto, andamento accanto, il colore dice l'andamento. */
.fr-tavolo { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--t4); font-weight: 600; color: var(--testo); }
.fr-tavolo > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-tavolo-sigla { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: var(--t1); font-weight: 700; font-style: normal; }
.fr-tavolo.nessuno { font-size: var(--t2); font-weight: 400; color: var(--testo-4); }
.fr-legenda-polso { margin: 0; font-size: var(--t2); line-height: 1.45; color: var(--testo-3); }
.fr-legenda-polso b { color: var(--testo-2); font-weight: 600; }
.fr-polso { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; width: fit-content; padding: 5px 11px; border: 0; border-radius: 999px; font: inherit; font-size: var(--t2);
            white-space: nowrap; cursor: pointer; background: var(--sfiora-scuro); color: var(--testo-2); }
a.fr-polso { text-decoration: none; }
a.fr-polso:hover { box-shadow: inset 0 0 0 1.5px currentColor; }
span.fr-polso { cursor: default; }
.fr-polso i { font-style: normal; font-weight: 700; }
.fr-polso b { font-weight: 700; }
.fr-polso span { opacity: .85; overflow: hidden; text-overflow: ellipsis; }
.fr-polso.tono-verde { background: var(--verde-tenue); color: var(--verde); }
.fr-polso.tono-ambra { background: var(--ambra-tenue); color: var(--ambra); }
.fr-polso.tono-rosso { background: var(--rosso-tenue); color: var(--rosso); }
.fr-polso.tono-blu { background: var(--blu-tenue); color: var(--blu-scuro); }
.fr-polso.tono-neutro { background: var(--sfiora-scuro); color: var(--testo-2); }
.fr-compra { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t2); color: var(--testo-3); }
.fr-compra svg { flex: none; color: var(--testo-4); }
.fr-adesso { margin-top: 2px; width: fit-content; padding: 2px 9px; border-radius: 999px; background: var(--verde); color: #FFF; font-size: var(--t1); font-weight: 700; font-style: normal; }
.fr-slot.adesso .fr-slot-ora { background: var(--verde-tenue); }
.fr-slot.passato .fr-slot-ora > b { color: var(--testo-3); }
/* LA FINESTRA DEL CLIENTE (_fiera-cliente.php), rifatta la sera del 06/11/2026 (Mattia: "sproporzionato e disallineato"):
   una griglia per la testa (logo | nome | crocetta, e sotto le pastiglie alte uguali), il fondo grigio della scheda
   azienda coi due riquadri bianchi a distanze uguali, la torta sopra la legenda quando lo spazio e' poco, gli articoli
   in righe: posizione, nome e famiglia, metri allineati a destra. */
dialog.fr-cliente { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: hidden; background: var(--fondo); }
dialog.fr-cliente > [data-fr-cliente-corpo] { display: flex; flex-direction: column; max-height: calc(100vh - 32px); }
dialog.fr-cliente > [data-fr-cliente-corpo].in-carica { opacity: .5; transition: opacity .15s; }
.fr-cl-testa { display: grid; grid-template-columns: 64px minmax(0, 1fr) 36px; grid-template-areas: "logo nome chiudi" "logo pastiglie pastiglie";
               align-items: center; column-gap: var(--s4); row-gap: 10px; padding: var(--s5) var(--s5) var(--s4); background: var(--superficie);
               border-bottom: 1px solid var(--bordo-tenue); }
.fr-cl-logo { grid-area: logo; display: flex; }
.fr-cl-logo .marchio-logo { --d: 64px; width: 64px; height: 64px; }
.fr-cl-nome { grid-area: nome; margin: 0; text-align: left; font-size: var(--t6); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--testo); overflow-wrap: anywhere; }
.fr-cl-chiudi { grid-area: chiudi; align-self: start; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%;
                background: var(--sfiora); color: var(--testo-2); font-size: 22px; line-height: 1; cursor: pointer; }
.fr-cl-chiudi:hover { background: var(--sfiora-scuro); color: var(--testo); }
.fr-cl-pastiglie { grid-area: pastiglie; display: flex; flex-wrap: wrap; gap: 6px; }
.fr-cl-pastiglia { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--sfiora);
                   font-size: var(--t2); font-weight: 600; color: var(--testo-2); white-space: nowrap; }
.fr-cl-pastiglia:has(.fr-cl-sigla), .fr-cl-cob { padding-left: 3px; }
.fr-cl-sigla { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 10px; font-weight: 700; font-style: normal; }
.fr-cl-cob .cob-stato.bollino { position: static; width: 22px; height: 22px; box-shadow: inset 0 0 0 1px var(--ambra-bordo); }
.fr-cl-cob .cob-stato-1.bollino, .fr-cl-cob .cob-stato-2.bollino { box-shadow: inset 0 0 0 1px var(--bordo); }
.fr-cl-cob .cob-stato-4.bollino { box-shadow: none; }
.fr-cl-corpo { flex: 1; display: flex; flex-direction: column; gap: var(--s3); padding: var(--s3); overflow-y: auto; }
.fr-cl-corpo > .blocco { margin: 0; }
.fr-cl-collezioni { padding: var(--s3) var(--fianco) 0; }
.fr-cl-torta { padding: var(--s4) var(--fianco); }
.fr-cl-torta .torta-riga { justify-content: flex-start; }
.fr-cl-articoli { margin: 0; padding: 0 var(--fianco) var(--s3); list-style: none; counter-reset: art; border-top: 1px solid var(--bordo-tenue); }
.fr-cl-articoli li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; min-height: 52px; padding: 8px 0;
                     border-bottom: 1px solid var(--bordo-tenue); counter-increment: art; }
.fr-cl-articoli li:last-child { border-bottom: 0; }
.fr-cl-articoli li::before { content: counter(art); font-size: var(--t2); font-weight: 700; color: var(--testo-4); font-variant-numeric: tabular-nums; }
.fr-cl-art { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fr-cl-art b { font-size: var(--t3); font-weight: 600; color: var(--testo); overflow-wrap: anywhere; }
.fr-cl-art small { font-size: var(--t1); color: var(--testo-3); overflow-wrap: anywhere; }
.fr-cl-metri { font-size: var(--t3); font-weight: 650; color: var(--testo); white-space: nowrap; text-align: right; }
@media (max-width: 700px) {
  dialog.fr-cliente { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  dialog.fr-cliente > [data-fr-cliente-corpo] { height: 100dvh; max-height: 100dvh; }
  .fr-cl-testa { grid-template-columns: 52px minmax(0, 1fr) 36px; column-gap: var(--s3); padding: calc(var(--s4) + env(safe-area-inset-top, 0px)) var(--s4) var(--s3);
                 background: var(--superficie); border-bottom: 1px solid var(--bordo-tenue); }
  .fr-cl-logo .marchio-logo { --d: 52px; width: 52px; height: 52px; }
  .fr-cl-nome { font-size: var(--t5); }
  .fr-cl-testa { grid-template-areas: "logo nome chiudi" "pastiglie pastiglie pastiglie"; }
  .fr-cl-corpo { padding: var(--s2); gap: var(--s2); }
  .fr-cl-torta .torta-riga { flex-direction: column; align-items: center; }
  .fr-cl-torta .torta-legenda { width: 100%; flex: none; }
}

/* METTERE UN CLIENTE NELLO SLOT (_fiera-nuovo.php): il "+" sotto l'orario, la ricerca delle Comunicazioni dentro la finestra. */
.fr-aggiungi { grid-column: 2; grid-row: 1; display: inline-grid; place-items: center; width: 30px; height: 30px; margin: 0; padding: 0; border: 1px dashed var(--bordo-forte);
               border-radius: 50%; background: var(--superficie); color: var(--blu-scuro); font: inherit; font-size: var(--t2); font-weight: 600; cursor: pointer; }
.fr-aggiungi:hover { border-style: solid; border-color: var(--blu); background: var(--blu-tenue); }
.fr-togli { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--testo-4); cursor: pointer; opacity: .45; }
.fr-togli:hover, .fr-togli:focus-visible { opacity: 1; }
.fr-togli:hover { background: var(--rosso-tenue); color: var(--rosso); }
.fr-nuovo { width: min(620px, calc(100vw - 32px)); }
.fr-nuovo .mail-voce-faccia { flex: 0 0 34px; width: 34px; height: 34px; }
.fr-nuovo .mail-voce { align-items: flex-start; padding: 10px var(--s2); }
.fr-nuovo .mail-voce-faccia, .fr-nuovo .mail-voce-azione { margin-top: 2px; }
.fr-nuovo .mail-voce-testi b, .fr-nuovo .mail-voce-testi small { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.fr-nuovo .mail-voce-testi b .fr-invito { white-space: nowrap; }
.fr-nuovo .mail-risultati { position: static; margin-top: 8px; max-height: 340px; box-shadow: 0 0 0 1px var(--bordo-tenue); }
.fr-invito { margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--verde-tenue); color: var(--verde); font-size: var(--t1); font-weight: 600; vertical-align: 1px; }
.mail-voce:disabled { cursor: default; opacity: .65; }
.mail-voce .fr-gia, .mail-voce:hover .fr-gia { background: var(--sfiora-scuro); color: var(--testo-3); }
.scheda-modulo .fr-tutti { padding: 8px 10px; margin-top: 4px; font-weight: 500; }
.fr-a-mano { border-top: 1px solid var(--bordo-tenue); padding-top: var(--s3); }
.fr-a-mano > summary { cursor: pointer; font-size: var(--t3); font-weight: 600; color: var(--blu-scuro); }
.fr-a-mano > summary small { margin-left: 6px; font-weight: 400; color: var(--testo-3); }
.fr-a-mano[open] > summary { margin-bottom: var(--s3); }

/* LA ROTELLA */
.fr-testa-azioni { display: flex; align-items: center; gap: var(--s3); }
.fr-impostazioni-corpo { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: var(--s5); align-items: start; margin: 0 var(--s8) 96px; }
.fr-impostazioni-corpo > form:first-child { grid-row: span 3; }
.fr-impostazioni-corpo { grid-template-rows: auto auto 1fr; }
[data-fr-serie-nuova][hidden] { display: none; }
.fr-link { display: flex; align-items: center; gap: var(--s3); min-width: 0; padding: 10px 12px; border-radius: var(--raggio); background: var(--sfiora); }
.fr-link a { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--blu-scuro); font-size: var(--t3); }
.fr-aiuto { margin: 0; font-size: var(--t2); color: var(--testo-3); line-height: 1.5; }
.fr-immagine { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--s4); align-items: center; }
.fr-immagine img, .fr-immagine-vuota { display: grid; place-items: center; width: 160px; aspect-ratio: 1; object-fit: contain; padding: 12px; border-radius: var(--raggio);
                                       background: var(--sfiora); box-shadow: inset 0 0 0 1px var(--bordo-tenue); color: var(--testo-4); }
.fr-immagine-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.fr-immagine-azioni form { margin: 0; }
.fr-immagine-azioni label.bottone { cursor: pointer; }
.fr-spunte { display: flex; flex-direction: column; gap: var(--s2); }
.fr-spunta, .scheda-modulo .fr-spunte > label.fr-spunta { display: flex; flex-direction: row; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: 10px;
                                               background: var(--sfiora); font-size: var(--t3); font-weight: 600; color: var(--testo); cursor: pointer; }
.fr-spunta > input[type=checkbox] { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--blu); }
.fr-spunta-ora .campo { width: 112px; height: 34px; margin-left: auto; background: var(--superficie); }
.fr-modulo .fr-sezione { margin-top: var(--s3); padding-top: var(--s5); border-top: 1px solid var(--bordo-tenue); }
.fr-piede { display: flex; justify-content: flex-end; }
.scheda-modulo-due.fr-due-larga { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.fr-due-larga .pillole { flex-wrap: nowrap; }
.fr-griglia-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font-size: var(--t2); color: var(--testo-3); }
.fr-griglia-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.fr-griglia-legenda i { width: 14px; height: 14px; border-radius: 4px; background: var(--sfiora); box-shadow: inset 0 0 0 1px var(--bordo-tenue); }
.fr-griglia-legenda i.parte, .fr-cella.parte { background: var(--blu-tenue); box-shadow: inset 0 0 0 1px var(--blu-bordo, var(--bordo)); color: var(--blu-scuro); }
.fr-griglia-legenda i.pieno, .fr-cella.pieno { background: var(--notte); box-shadow: none; color: #FFF; }
.fr-griglia { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 4px; }
.fr-griglia thead th:first-child { width: 52px; }
.fr-griglia thead th { white-space: normal; }
.fr-griglia th { padding: 2px 6px; font-size: var(--t2); font-weight: 600; color: var(--testo-2); text-align: center; white-space: nowrap; vertical-align: bottom; }
.fr-griglia thead th small { display: block; font-size: var(--t1); font-weight: 500; color: var(--testo-3); }
.fr-griglia tbody th { text-align: right; vertical-align: middle; font-variant-numeric: tabular-nums; }
.fr-cella { display: grid; place-items: center; min-width: 64px; height: 34px; border-radius: 8px; background: var(--sfiora); box-shadow: inset 0 0 0 1px var(--bordo-tenue);
            font-size: var(--t3); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--testo-3); }
.fr-tecnico { grid-column: 2; margin: 0; text-align: right; font-size: var(--t2); }
.fr-tecnico .fam-link { display: inline-flex; align-items: center; gap: 5px; color: var(--testo-4); font-weight: 400; }
@media (max-width: 1100px) {
  .fr-impostazioni-corpo { grid-template-columns: minmax(0, 1fr); margin: 0 var(--pagina) 96px; }
  .fr-impostazioni-corpo > form:first-child { grid-row: auto; }
  .fr-tecnico { grid-column: 1; }
}
@media (max-width: 700px) {
  .fr-impostazioni .fam-testa { margin: var(--s4) var(--pagina) var(--s4); }
  .fr-impostazioni .fam-testa-riga { flex-direction: column; align-items: flex-start; }
  .fr-impostazioni .fam-titolo { font-size: 23px; }
  .fr-impostazioni-corpo { margin: 0 var(--s3) 96px; }
  .fr-cella { min-width: 58px; }
  .fr-immagine { grid-template-columns: 112px minmax(0, 1fr); gap: var(--s3); }
  .fr-immagine img, .fr-immagine-vuota { width: 112px; }
  .fr-immagine-azioni .bottone { white-space: normal; }
  .scheda-modulo-due.fr-due-larga { grid-template-columns: minmax(0, 1fr); }
  /* date, orari, citta' e stand restano in coppia anche sul telefono: il modulo e' meta' lungo */
  .fr-modulo .scheda-modulo-due:not(.fr-due-larga) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s2); }
}

@media print {
  @page { size: A4 portrait; margin: 9mm; }
  body:has(.fr-pagina) { background: #fff; }
  body:has(.fr-pagina) .app > .nav, body:has(.fr-pagina) .elenco-testata, body:has(.fr-pagina) .fr-giorni,
  body:has(.fr-pagina) .fr-scegli-freccia, body:has(.fr-pagina) .notifica, body:has(.fr-pagina) .fr-aggiungi, body:has(.fr-pagina) .fr-togli,
  body:has(.fr-pagina) .fr-libero, body:has(.fr-pagina) .barra-compatta { display: none !important; }
  body:has(.fr-pagina) * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body:has(.fr-pagina) .contenuto { padding: 0; }
  body:has(.fr-pagina) .riquadro { margin: 0 0 4mm; box-shadow: none; border: .25mm solid #E4E7EC; }
  body:has(.fr-pagina) .fr-fiera { padding: 3mm 4mm; gap: 2mm; }
  body:has(.fr-pagina) .fr-cifra { padding: 1mm 3mm; min-width: 0; }
  body:has(.fr-pagina) .fr-slot { grid-template-columns: 24mm minmax(0, 1fr); break-inside: avoid; background: none; }
  body:has(.fr-pagina) .fr-slot-ora { position: static; padding: 2mm; }
  body:has(.fr-pagina) .fr-riga { grid-template-columns: 9mm minmax(0, 1fr) 70mm; min-height: 0; padding: 1.5mm 2mm; font-size: 8.5pt; }
  body:has(.fr-pagina) .fr-righe-visite .fr-riga { grid-template-columns: minmax(0, 1fr) 70mm; }
  body:has(.fr-pagina) .fr-meta { grid-column: auto; display: grid; grid-template-columns: 1fr 1fr 14mm; font-size: 8pt; }
  body:has(.fr-pagina) .fr-azienda { font-size: 10pt; }
  body:has(.fr-pagina) .fr-arrivo { width: 7mm; height: 7mm; }
  body:has(.fr-pagina) .fr-arrivo-box { width: 5mm; height: 5mm; border-radius: 1.5mm; }
}