/* Bridge - foglio di stile unico.
   Colori Fastweb: blu profondo per la struttura, giallo per l'azione
   principale, arancio per gli avvisi. Verde/arancio/rosso restano riservati
   agli stati del consenso, dove il colore e' informazione. */

:root{
  --navy:#0a2f5e; --navy-2:#123f74; --navy-3:#1d4a80; --navy-deep:#08243f; --navy-ink:#061d34;
  /* --yellow e' «il colore dell'azione», non «il giallo»: per TIM e' rosso.
     --yellow-2 e' la sua tinta piu' scura del passaggio del mouse, --yellow-su
     il testo che ci va sopra - su un accento scuro il navy non si legge. */
  --yellow:#ffcc00; --yellow-2:#f0c000; --yellow-soft:#fff4cc; --yellow-ink:#8f6b00;
  --yellow-su:var(--navy);
  /* L'accento sul blu scuro della barra: il giallo ci si legge, un rosso no.
     Chi ha un accento gia' chiaro lascia questa uguale a --yellow. */
  --yellow-chiaro:var(--yellow);
  --orange:#e8760c; --orange-soft:#fdeedd; --orange-ink:#a85a08;
  --green:#1a7f4e; --green-soft:#eaf3ed; --green-ink:#14663f;
  --red:#c0362c; --red-soft:#fceceb; --red-ink:#96231c;
  --bg:#f5f6f8; --surface:#fff; --surface-2:#f8f9fb;
  --line:#e4e7ec; --line-2:#eef1f5; --line-3:#f1f4f7; --border:#d5dae1;
  --text:#131b26; --muted:#5b6673; --faint:#8d97a4; --dim:#c3cbd6;
  --side-text:#a9bdd6; --side-label:#6f8cb0; --side-faint:#7d9bc0;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-size:14px;
  font-family:'Instrument Sans','Segoe UI',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
svg{display:block}
:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.mono{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* struttura ---------------------------------------------------------------- */
.shell{display:flex;min-height:100%}
.side{width:236px;flex:none;background:var(--navy);display:flex;flex-direction:column;padding:18px 0;
  position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:0 18px 14px}
.mark{width:70px;height:70px;border-radius:9px;flex:none;overflow:hidden;
  display:flex;align-items:center;justify-content:center;color:var(--yellow-su);
  background:var(--yellow);box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.mark .logo{width:100%;height:100%}
.logo{display:block;object-fit:contain;border-radius:inherit}
.brandname{font-weight:600;font-size:23px;letter-spacing:-.015em;color:#fff;line-height:1.15}
.brandsub{font-size:16px;color:var(--yellow-chiaro);line-height:1.2}
.navlabel{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--side-label);
  padding:16px 18px 6px;font-weight:600}
.navitem{display:flex;align-items:center;gap:10px;width:100%;padding:8px 18px;font-size:13.5px;
  color:var(--side-text);text-align:left}
.navitem:hover{background:#0e3768;color:#e8eef6;text-decoration:none}
.navitem.active{color:#fff;font-weight:500;background:var(--navy-2);box-shadow:inset 3px 0 0 var(--yellow-chiaro)}
.navitem.sotto{padding-left:40px;font-size:12.5px;color:#8fa9c6}
.navitem.sotto::before{content:"";position:absolute;left:26px;width:1px;height:100%;background:var(--navy-3)}
.navitem.sotto{position:relative}
.sideversione{padding:10px 18px 0;font-size:10.5px;letter-spacing:.04em;
  color:var(--side-label);font-variant-numeric:tabular-nums}
.lockb{margin-left:auto;font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--side-faint);
  border:1px solid var(--navy-3);border-radius:5px;padding:2px 5px;font-weight:600}
.sideuser{margin-top:auto;display:flex;align-items:center;gap:10px;padding:14px 18px 0;border-top:1px solid var(--navy-3)}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{height:60px;flex:none;background:var(--surface);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:0 24px;gap:16px}
.h1{font-size:16.5px;font-weight:600;letter-spacing:-.02em}
.crumb{font-size:11.5px;color:var(--faint);margin-top:2px}
.content{padding:22px 24px 40px;display:flex;flex-direction:column;gap:16px}
.avatar{width:35px;height:35px;border-radius:50%;background:#e9edf2;color:#3f4a58;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600}
.avatar.dark{background:var(--navy-2);color:#cfe0f2}

/* componenti --------------------------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px}
.cardhead{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.cardtitle{font-size:13px;font-weight:600}
.cardbody{padding:18px}
.grid{display:grid;gap:14px}
.due{grid-template-columns:repeat(2,minmax(0,1fr))}
.tre{grid-template-columns:repeat(3,minmax(0,1fr))}
.quattro{grid-template-columns:repeat(4,minmax(0,1fr))}
.label{display:block;font-size:12px;font-weight:500;color:#3f4a58;margin-bottom:6px}
.field{height:40px;width:100%;border:1px solid var(--border);border-radius:9px;padding:0 12px;
  font-size:13.5px;background:var(--surface);color:var(--text)}
.field::placeholder{color:var(--faint)}
.aiuto{font-size:11px;color:var(--faint);margin-top:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 15px;
  border-radius:9px;border:1px solid var(--border);background:var(--surface);
  font-size:13px;font-weight:500;color:#25303d}
.btn:hover{background:var(--surface-2);text-decoration:none}
.btn.pri{background:var(--yellow);border-color:var(--yellow);color:var(--yellow-su);font-weight:600}
.btn.pri:hover{background:var(--yellow-2)}
.btn.navy{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.navy:hover{background:var(--navy-2)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.piccolo{height:32px;padding:0 11px;font-size:12.5px}
.chip{display:inline-flex;align-items:center;gap:6px;height:23px;padding:0 9px;border-radius:7px;
  font-size:11.5px;font-weight:500;white-space:nowrap;background:var(--line-2);color:#2a3442}
/* Uno stato si legge dal colore prima che dalla parola: verde vuol dire che
   vale, rosso che non vale piu'. In grigio sembravano tutti uguali. */
.chip.buono{background:var(--green-soft);color:var(--green-ink)}
.chip.scaduto{background:var(--red-soft);color:var(--red-ink)}
.dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
.tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;
  font-size:10.5px;font-weight:500;background:var(--line-2);color:var(--muted)}
.sect{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:600}
.kpi{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;
  font-size:28px;font-weight:500;letter-spacing:-.03em}
.banner{display:flex;gap:12px;padding:13px 16px;border-radius:11px;font-size:12.5px;line-height:1.5;margin-top: 5px;
  background:var(--surface);border:1px solid var(--line);color:var(--muted)}
.banner.avviso{background:var(--orange-soft);border-color:#f7ddbe;color:var(--orange-ink)}
.banner.errore{background:var(--red-soft);border-color:#f3d3d0;color:var(--red-ink)}
.banner.ok{background:var(--green-soft);border-color:#cfe3d8;color:var(--green-ink)}
.vuoto{padding:56px 20px;text-align:center;color:var(--muted)}

/* tabelle ------------------------------------------------------------------ */
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:600;
  text-align:left;padding:10px 16px;border-bottom:1px solid var(--line-2);background:var(--surface-2);white-space:nowrap}
td{font-size:12.5px;padding:12px 16px;border-bottom:1px solid var(--line-3);color:#25303d;white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
tbody tr.cliccabile{cursor:pointer}
tbody tr.cliccabile:hover{background:var(--surface-2)}

/* griglia dei risultati -----------------------------------------------------
   La tabella dell'estrazione si legge come la griglia di un client di database,
   perche' quello che ci si fa e' guardarla e mandarne uno screenshot: celle
   bordate, numeri di riga, passo stretto e tutto monospazio. */
.griglia{border-collapse:collapse;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace}
.griglia th,.griglia td{border:1px solid var(--line);padding:7px 12px;font-size:12px;
  white-space:nowrap;vertical-align:top}
.griglia thead th{background:var(--surface-2);color:var(--muted);font-weight:600;
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;position:sticky;top:0;z-index:1}
.griglia tbody tr:nth-child(even){background:#fcfcfd}
.griglia tbody tr:hover{background:var(--line-2)}
.griglia .numriga{color:var(--faint);text-align:right;background:var(--surface-2);
  font-size:11px;user-select:none;width:1%}
.griglia .vuota{color:var(--dim)}
.griglia-contenitore{overflow:auto;max-height:70vh}

/* interruttori ------------------------------------------------------------- */
.tg{width:38px;height:22px;border-radius:999px;flex:none;display:inline-flex;align-items:center;
  padding:2px;background:#cfd6df;transition:background .15s}
.tg[aria-pressed="true"]{background:var(--navy);justify-content:flex-end}
.tg .knob{width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(9,32,62,.25)}
.prow{display:flex;align-items:flex-start;gap:16px;padding:13px 0;border-bottom:1px solid var(--line-3)}
.prow:last-child{border-bottom:none}

/* --- permessi: la riga che si accende --------------------------------------
   Prima erano etichetta, due righe di prosa e una casella quadrata: tutte
   identiche, tutte dello stesso peso, e per capire a cosa servisse una spunta
   bisognava leggerle tutte dall'inizio. Tre cose cambiano:

   - l'interruttore si vede acceso o spento da lontano, e la riga accesa si
     stacca dal fondo: «cosa ha questo gruppo» si legge scorrendo, non leggendo;
   - sotto l'etichetta c'e' DOVE finisce quel permesso - la voce di menu o il
     pezzo di pagina - perche' prima l'unico modo di saperlo era accenderlo e
     andare a vedere;
   - un permesso che ne richiede un altro lo dice, e si spegne da solo quando
     quell'altro e' spento: restava acceso e non faceva niente, che e' il modo
     piu' silenzioso di avere un permesso sbagliato. */
/* Due colonne: diciassette permessi in colonna sola erano milleduecento pixel
   di pagina, e per vedere se un gruppo aveva «Log attivita» si scorreva fino in
   fondo. I nomi sono corti, lo spazio c'era. */
/* Colonne di testo, non celle di griglia.
   Con la griglia ogni riga era alta quanto la voce piu' alta delle due, e
   siccome le spiegazioni sono lunghe diverse restavano buchi grandi come una
   voce intera. Cosi' invece le voci si incolonnano da sole, una dietro
   l'altra, e si leggono in verticale: dentro una sezione e' anche l'ordine
   giusto. `break-inside` tiene insieme interruttore, nome e spiegazione - a
   meta' colonna si sarebbero spezzati. */
.perm-elenco{columns:2;column-gap:26px}
.perm-elenco > .perm{break-inside:avoid;-webkit-column-break-inside:avoid}
@media (max-width:1100px){.perm-elenco{columns:1}}

.perm{display:flex;align-items:flex-start;gap:11px;padding:9px 10px;border-radius:9px;
  cursor:pointer;transition:background .12s}
.perm:hover{background:var(--surface-2)}
/* Niente sfondo sull'acceso.
   Ce l'aveva, e su un gruppo con tutto acceso diventavano diciassette riquadri
   pieni attaccati: un muro in cui non si distingueva piu' niente, proprio dove
   lo scopo e' distinguere. Acceso o spento lo dice l'interruttore, che e' verde
   o grigio e si vede da un metro. Lo sfondo resta per il passaggio del mouse,
   dove serve a dire «questa riga risponde al clic». */
.perm.sospeso{opacity:.5}
.perm .testo{flex:1;min-width:0}
.perm .nome{font-size:13px;font-weight:500;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
/* Dove finisce il permesso: di fianco al nome, non su una riga sua - erano tre
   righe per voce, e due dicevano cose che si leggono di sfuggita o mai. */
.perm .dove{font-size:10.5px;color:var(--faint);font-weight:400;
  font-family:'JetBrains Mono',ui-monospace,Menlo,monospace}
.perm .spiega{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.4}
.perm .serve{font-size:11px;color:var(--orange-ink);background:var(--orange-soft);
  border-radius:5px;padding:1px 6px;font-weight:500}

/* L'interruttore. Una casella vera sotto, nascosta: la tastiera continua a
   funzionare e il modulo si invia come prima. */
.perm input{position:absolute;opacity:0;width:0;height:0}
.perm .leva{flex:none;width:36px;height:21px;border-radius:999px;background:var(--border);
  position:relative;margin-top:1px;transition:background .15s}
.perm .leva::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;
  border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(16,34,46,.25);transition:transform .15s}
.perm input:checked + .leva{background:var(--green)}
.perm input:checked + .leva::after{transform:translateX(15px)}
.perm input:focus-visible + .leva{outline:2px solid var(--navy);outline-offset:2px}

.perm-testa{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.perm-conta{font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.perm-tutti{margin-left:auto;display:flex;gap:6px}
.perm-tutti button{font:inherit;font-size:11.5px;padding:3px 9px;border-radius:7px;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer}
.perm-tutti button:hover{background:var(--surface-2);color:var(--ink)}

/* esito della verifica ----------------------------------------------------- */
.esito{overflow:hidden}
.esito .testa{padding:20px 22px;display:flex;align-items:flex-start;gap:14px}
.esito .icona{width:38px;height:38px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center}
.esito h2{font-size:19px;font-weight:600;letter-spacing:-.02em;margin:0}
.esito .testo{font-size:13px;margin-top:6px;line-height:1.5}
.passo{display:flex;align-items:center;gap:11px;font-size:13px}
.passo + .passo{margin-top:11px}

/* console dei job ---------------------------------------------------------- */
.console{background:var(--navy-deep);border-radius:10px;padding:14px 16px;overflow-y:auto;
  font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:11.5px;line-height:1.75;
  color:#a9c4de;white-space:pre-wrap;word-break:break-word}

/* login -------------------------------------------------------------------- */
.login{display:flex;min-height:100vh}
.login .lato{width:52%;flex:none;background:var(--navy);display:flex;align-items:center;justify-content:center}
.login .modulo{flex:1;background:var(--surface);display:flex;align-items:center;justify-content:center;padding:0 48px}

/* l'attesa ------------------------------------------------------------------
   Quando una parte della pagina sta ancora arrivando, l'anello gira: finche'
   gira c'e' una richiesta aperta, quando sparisce la risposta e' arrivata.
   Chi ha chiesto meno animazioni lo vede fermo (regola piu' sotto), e la frase
   accanto continua a dire la stessa cosa. */
@keyframes gira{to{transform:rotate(1turn)}}
.gira{animation:gira .8s linear infinite;transform-origin:50% 50%}

/* finestra della scheda ---------------------------------------------------- */
.finestra{position:fixed;inset:0;background:rgba(6,26,48,.5);z-index:50;
  display:flex;align-items:flex-start;justify-content:center;padding:48px 20px;overflow-y:auto}
.finestra-corpo{width:100%;max-width:880px;position:relative}
/* La chiusura sta in una barra sua, sopra le schede.
   Galleggiando nell'angolo del primo riquadro lo faceva restringere - quel
   riquadro ha overflow:hidden per gli angoli tondi, quindi si scansa dai
   float - e i bordi non erano piu' in colonna. Qui non tocca niente, resta
   agganciata in alto mentre si scorre, e sporge un po' oltre il bordo della
   scheda: si vede che e' un comando della finestra, non del contenuto. */
/* La barra tiene solo il posto: il pulsante e' fisso nell'angolo dello
   schermo, non scorre con il contenuto. Cosi' resta dov'e' anche in una scheda
   lunga, e chi la vuole chiudere sa sempre dove guardare. */
.finestra-barra{height:36px;margin-bottom:8px}
/* Scuro e pieno, non trasparente.
   Era bianco al 16% con la sfocatura dietro: bello sopra il velo scuro, ma
   appena la pagina scorreva finiva sopra una scheda bianca e spariva - si
   vedeva solo un alone. Un tondo scuro con la croce chiara si legge su tutti
   e due i fondi. */
/* Fisso, ma agganciato al bordo della scheda e non a quello dello schermo:
   su un monitor largo la finestra sta al centro, e un pulsante sperduto
   nell'angolo in alto a destra non si legge come suo. 460px = meta' della
   larghezza massima della finestra (880) piu' venti di distacco; sotto quella
   misura vince il margine minimo e resta attaccato al bordo. */
.finestra-chiudi{position:fixed;top:14px;right:max(20px, calc(50% - 460px));z-index:60;
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--navy-ink);border:1px solid rgba(255,255,255,.18);
  color:#fff;font-size:15px;line-height:1;cursor:pointer;
  box-shadow:0 6px 20px rgba(3,14,26,.45);
  transition:background .12s ease,transform .12s ease}
.finestra-chiudi:hover{background:var(--navy-2);transform:scale(1.06)}
.finestra-chiudi:active{transform:scale(.96)}
.finestra .card{box-shadow:0 26px 70px rgba(3,14,26,.42)}
/* Il bianco vale solo per la fascia neutra.
   Scritto `.finestra .banner` e basta, vinceva su `.banner.ok` - stessa
   specificita', ma viene dopo nel foglio - e dentro la finestra della scheda
   ogni fascia diventava bianca: il verde del venduto restava solo nel testo e
   nel filo del bordo, e la fascia che doveva saltare all'occhio si leggeva
   come una nota qualsiasi. Fuori dalla finestra era verde, dentro no. */
.finestra .banner:not(.ok):not(.avviso):not(.errore){background:rgba(255,255,255,.92)}

/* L'attesa: la sagoma della scheda che sta arrivando, non un anello su niente.
   Stesse misure e stesse posizioni del contenuto vero, cosi' quando arriva non
   salta niente. Il luccichio si ferma da solo con prefers-reduced-motion. */
.sagoma{padding:20px 22px;min-height:190px}
.sagoma-testa{display:flex;align-items:center;gap:14px;padding-bottom:20px;
  border-bottom:1px solid var(--line-2)}
.sagoma-testa .tondo{width:44px;height:44px;border-radius:12px;flex:none}
.sagoma-testa .righe{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
.sagoma-testa .r1{height:19px;width:42%;border-radius:6px}
.sagoma-testa .r2{height:13px;width:64%;border-radius:5px}
.sagoma-campi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding-top:20px}
.sagoma-campi span{height:34px;border-radius:7px}
.sagoma .tondo,.sagoma .r1,.sagoma .r2,.sagoma-campi span{
  background:linear-gradient(90deg,var(--line-2) 25%,var(--line-3) 37%,var(--line-2) 63%);
  background-size:400% 100%;animation:luccichio 1.4s ease-in-out infinite}
@keyframes luccichio{0%{background-position:100% 0}100%{background-position:0 0}}
@media (max-width:640px){.sagoma-campi{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* pannello visibilita' ----------------------------------------------------- */
.velo{position:fixed;inset:0;background:rgba(6,26,48,.55);display:flex;align-items:flex-start;
  justify-content:center;padding:70px 20px;z-index:40;overflow-y:auto}
.pannello{background:var(--navy-deep);border:1px solid #17456f;border-radius:14px;width:100%;max-width:620px;
  box-shadow:0 30px 80px rgba(3,14,26,.55);color:#eaf1f8;overflow:hidden}

@media (max-width:900px){
  .shell{flex-direction:column}
  .side{width:100%;height:auto;position:static}
  .quattro,.tre,.due{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ricerca su in-voice ------------------------------------------------------- */
/* Una acquisizione per blocco: pianificazione, lista propria e telefonate dello
   stesso lead stanno insieme, perche' parlano della stessa cosa. */
.inv-verdetto{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;padding:20px 22px}
.inv-verdetto .num{font-size:26px;font-weight:600;letter-spacing:-.01em;line-height:1.1}
.inv-verdetto .esito{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;margin-top:7px}
.inv-verdetto .riga{font-size:12.5px;margin-top:3px;opacity:.85}
.inv-conta{margin-left:auto;display:flex;gap:10px}
.inv-conta > div{min-width:82px;text-align:center;padding:9px 12px;border-radius:10px;
  background:rgba(255,255,255,.55);border:1px solid rgba(0,0,0,.05)}
.inv-conta .n{font-size:20px;font-weight:600;line-height:1.1}
.inv-conta .t{font-size:10.5px;color:var(--muted);letter-spacing:.03em;margin-top:1px}

/* Una scheda per acquisizione, con il filetto a sinistra che dice a colpo
   d'occhio se quel consenso conta ancora o e' solo storia. */
.inv-acq{border-top:1px solid var(--line-2);position:relative;padding-left:3px}
.inv-acq::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red)}
.inv-acq.viva::before{background:var(--green)}

.inv-testa{display:flex;gap:16px;align-items:flex-start;padding:14px 22px 10px;flex-wrap:wrap}
.inv-testa .titolo{font-size:15.5px;font-weight:600;letter-spacing:-.005em}
.inv-testa .sotto{font-size:12.5px;color:var(--muted);margin-top:3px}
.inv-date{margin-left:auto;display:flex;gap:26px}
.inv-date > div{text-align:right}
.inv-date .v{font-size:13px;font-weight:500}
.inv-date .l{font-size:10px;color:var(--faint);letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px}

/* I campi di un'acquisizione: una riga densa, non una griglia di riquadri.
   Erano celle bordate da 180px minime, una per valore. Con cinque valori corti
   - esito, tipologia, numero uscente, id, caricato il - diventavano cinque
   scatole quasi vuote alte centosessanta pixel, e con tre acquisizioni la
   pagina non si teneva piu' in uno schermo. Sulla console quegli stessi cinque
   valori stanno in una colonna di note, uno sotto l'altro, e si leggono tutti
   insieme. Qui si va a capo da soli e si incolonnano come un testo. */
.inv-fatti{display:flex;flex-wrap:wrap;gap:2px 20px;padding:0 22px 13px}
.inv-fatti > div{display:flex;align-items:baseline;gap:7px;min-width:0;max-width:100%}
.inv-fatti .largo{flex:1 1 100%}
.inv-fatti .l{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);flex:none}
.inv-fatti .v{font-size:12.5px;font-weight:500;word-break:break-word}

/* --- Lavorato Sidial: schede, non tabelle larghe ---------------------------
   Lead e ordini hanno una decina di campi a testa. In tabella, dentro la
   finestra della scheda, diventavano due barre di scorrimento orizzontali e le
   colonne di destra sparivano: «Pratica» e «Ultima chiamata» non si leggevano
   affatto, e per vederle bisognava trascinare - cioe' sapere che c'erano.

   Qui ogni campo e' una cella di una griglia che va a capo da sola: quante ne
   stanno in riga lo decide la larghezza, e non resta niente fuori. Le
   telefonate invece restano una tabella, perche' lo sono: poche colonne corte
   e molte righe da confrontare a colpo d'occhio. */
.sid-blocco{border:1px solid var(--line-2);border-radius:11px;padding:12px 14px;
  margin-bottom:9px;background:var(--surface-2)}
/* Quello che la nostra riga indica: sfondo pieno e bordo piu' marcato, cosi'
   si distingue dai lead vecchi dello stesso numero senza doverlo spiegare. */
.sid-blocco.nostro{background:var(--surface);border-color:var(--border)}
.sid-testa{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:10px}
.sid-testa .id{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;
  font-size:12.5px;font-weight:600}
.sid-testa .quando{margin-left:auto;font-size:11.5px;color:var(--faint)}
/* 145px faceva cinque colonne negli 880 della finestra, e i sette campi del
   lead uscivano cinque piu' due orfane in fondo - «Tentativi» e «Attivo» da
   sole su una riga vuota. A 170 le colonne sono quattro, e i campi corti ci
   stanno tutti in una riga. I due nomi lunghi - campagna e lista - prendono
   due colonne ciascuno con `.largo`, cosi' non si spezzano a meta' parola. */
.sid-fatti{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:11px 12px}
.sid-fatti > div{min-width:0}
.sid-fatti > div.largo{grid-column:span 2}
@media (max-width:520px){.sid-fatti > div.largo{grid-column:1/-1}}
.sid-fatti .l{font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);margin-bottom:2px}
.sid-fatti .v{font-size:12.5px;font-weight:500;word-break:break-word;line-height:1.4}
.sid-fatti .v.mono{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;
  font-size:11.5px;font-weight:400}
.sid-fatti .v.manca{color:var(--red);font-weight:600}
/* I prodotti sono piu' d'uno e i loro nomi sono lunghi: una pastiglia per
   prodotto, che non si spezza a meta' parola e va a capo insieme alle altre. */
.sid-prodotti,.pastiglie{display:flex;gap:6px;flex-wrap:wrap}
.sid-prodotti .tag,.pastiglie .tag{white-space:nowrap;height:auto;padding:3px 7px}
/* Una pastiglia per prodotto, e dentro tre cose in ordine di importanza:
   COSA e' (fisso, mobile) a piena forza, QUANTI se sono piu' d'uno, e poi -
   in grigio, per chi li cerca - l'offerta come la chiama Sidial e il codice
   con cui esce nel tracciato. Prima c'era solo «Fisso · S01»: il nome di
   Sidial e un codice, con la quantita' che non compariva affatto.

   Serve anche alle cartelle di in-voice, che sono la stessa forma: un nome e
   un conto. Da li' il nome generico, `.pastiglie`. */
.tag.prodotto{gap:6px;background:var(--surface);border:1px solid var(--line);
  color:var(--ink);font-size:11.5px;font-weight:600;text-transform:capitalize}
.tag.prodotto b{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;
  font-weight:600;color:var(--blue)}
.tag.prodotto i,.tag.prodotto u{font-style:normal;text-decoration:none;
  font-weight:400;font-size:10.5px;color:var(--faint);text-transform:none}
.tag.prodotto u{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace}
.sid-altri summary{cursor:pointer;font-size:12px;color:var(--muted)}
.sid-altri summary:hover{color:var(--ink)}

/* Da dove arriva il gruppo di campi che segue: le note o i campi di in-voice. */
.inv-sez{padding:0 22px 5px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);font-weight:600}

.inv-frasi{display:flex;gap:7px;flex-wrap:wrap;padding:0 22px 16px}
.inv-archivio{display:flex;gap:9px;flex-wrap:wrap;padding:0 22px 18px}
.inv-niente{padding:0 22px 18px;font-size:12.5px;color:var(--muted)}

.inv-eventi{margin:0 22px 14px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.inv-eventi-testa{padding:6px 13px;background:var(--surface-2);border-bottom:1px solid var(--line-2);
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.inv-ev{display:flex;gap:12px;align-items:center;padding:7px 13px;border-bottom:1px solid var(--line-2);font-size:12.5px}
.inv-ev:last-child{border-bottom:0}
.inv-ev .ora{color:var(--muted);white-space:nowrap;font-size:12.5px}
.inv-ev .cosa{flex:1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.inv-ev.venduta{background:var(--green-soft)}
.inv-ev.venduta .cosa{color:var(--green-ink);font-weight:600}
.inv-ev .segno{width:18px;flex:none;display:flex;justify-content:center;color:var(--dim)}
.inv-ev.venduta .segno{color:var(--green);font-weight:700}

/* Le linguette dei pannelli della sessione.
   Dentro c'e' un'icona, e le icone del progetto sono `svg{display:block}` per
   non portarsi dietro lo spazio sotto la riga di base: dentro un <summary>
   quel `block` mandava l'icona a capo, e il triangolino restava su una terza
   riga per conto suo. Tre righe per una linguetta di due parole. */
.inv-linguetta{display:flex;align-items:center;gap:9px}
.inv-linguetta::-webkit-details-marker{display:none}
.inv-linguetta::marker{content:""}
/* Il triangolino lo rimettiamo noi, cosi' sta in riga e gira all'apertura. */
.inv-linguetta::before{content:"";width:0;height:0;flex:none;
  border-left:5px solid var(--faint);border-top:4px solid transparent;
  border-bottom:4px solid transparent;transition:transform .12s}
details[open] > .inv-linguetta::before{transform:rotate(90deg)}

/* La nota di in-voice come arriva: chiusa di suo, aperta da chi vuole
   controllare che nella scheda non manchi niente. */
.inv-nota{margin:0 22px 18px}
.inv-nota summary{cursor:pointer;font-size:12px;color:var(--faint)}
.inv-nota summary:hover{color:var(--muted)}
.inv-nota-corpo{margin-top:9px;padding:11px 13px;background:var(--surface-2);
  border:1px solid var(--line-2);border-radius:9px;font-size:12.5px;color:var(--muted);line-height:1.65}
.inv-nota-corpo > div + div{margin-top:3px}

.inv-vecchie{padding:14px 22px;background:var(--surface-2);border-top:1px solid var(--line-2)}
.inv-vecchie summary{cursor:pointer;font-size:13px;color:var(--muted);font-weight:500}
.inv-riga{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;padding:10px 0;
  border-bottom:1px solid var(--line-2);font-size:13px}
.inv-riga:last-child{border-bottom:0}
.inv-riga .quando{color:var(--muted);white-space:nowrap}
.inv-riga .coda{margin-left:auto}

@media (max-width:640px){
  .inv-date,.inv-conta{margin-left:0;width:100%;justify-content:flex-start;text-align:left}
  .inv-date{gap:18px;flex-wrap:wrap}
  .inv-date > div{text-align:left}
}

/* --- Lotti e blacklist: le quattro schede dei processi ---------------------
   Tutte della stessa altezza, cosi' i pulsanti stanno in fila e l'occhio li
   trova senza leggere. Il testo lungo sta sotto «Come funziona»: c'e' per chi
   apre la pagina una volta al mese, non ingombra per chi la apre ogni giorno. */
.job-griglia .card{display:flex;flex-direction:column}
.job-griglia .cardbody{display:flex;flex-direction:column;flex:1}
.job-sintesi{font-size:12.5px;color:var(--muted);line-height:1.55;margin:0 0 14px}
.job-azioni{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.job-dettagli{margin-top:auto;border-top:1px solid var(--border);padding-top:10px}
.job-dettagli summary{cursor:pointer;font-size:12px;color:var(--faint)}
.job-dettagli summary:hover{color:var(--muted)}
.job-dettagli p{font-size:12px;color:var(--muted);line-height:1.55;margin:10px 0 0}
/* «Tocca: Fastweb · Sidial · …» sta nel corpo della scheda, non piu' solo
   dentro «Come funziona»: la regola vale in tutti e due i posti, se no uscita
   dai dettagli restava un paragrafo grande come il testo normale. */
.job-tocca{font-size:11.5px;color:var(--faint);line-height:1.55}
@media (max-width:900px){.job-griglia.due{grid-template-columns:minmax(0,1fr)}}

/* --- Iniziative: il modulo a gruppi ---------------------------------------
   I campi sono tre gruppi, uno per sistema: come si chiama, cosa va a Fastweb,
   dove finisce il lead su Sidial. Il filo verticale a sinistra tiene insieme
   ogni gruppo senza aggiungere riquadri dentro il riquadro. */
.ini-pagina{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:16px;align-items:start}
/* Sotto i 1000px l'elenco a sinistra si stringeva fino a tagliare le chiavi:
   meglio sopra, a tutta larghezza, e il modulo sotto. */
@media (max-width:1000px){.ini-pagina{grid-template-columns:minmax(0,1fr)}}
.ini-modulo{display:flex;flex-direction:column;gap:22px}
.ini-modulo section{border-left:2px solid var(--line-2);padding-left:16px}
.ini-modulo section .sect{margin:0 0 12px}
.ini-interruttore{cursor:pointer;border:none;padding:0;margin-top:2px}
.ini-eccezioni{font-size:12.5px;color:var(--muted);line-height:1.6;border-bottom:1px solid var(--line-2)}
.ini-eccezioni p{margin:0}
.ini-eccezioni details{margin-top:10px}
.ini-eccezioni summary{cursor:pointer;font-size:12px;color:var(--faint)}
.ini-eccezioni summary:hover{color:var(--muted)}
.ini-eccezioni details p{margin-top:10px}
@media (max-width:900px){.ini-modulo section{border-left:none;padding-left:0}}

/* --- Elenco a sinistra, dettaglio a destra --------------------------------
   Lo stesso impianto in cinque pagine - iniziative, gruppi, viste, verifica,
   consensi - che prima era scritto a mano dentro ognuna, con la sua larghezza
   e senza nessuna regola per gli schermi stretti: sotto i 1000px la colonna
   dell'elenco si stringeva fino a tagliare i nomi. La larghezza resta quella
   di prima, pagina per pagina, tramite --mastro. */
.mastro{display:grid;grid-template-columns:minmax(0,var(--mastro,300px)) minmax(0,1fr);gap:16px;align-items:start}
.mastro.rovescio{grid-template-columns:minmax(0,1fr) minmax(0,var(--mastro,320px))}
@media (max-width:1000px){
  .mastro,.mastro.rovescio{grid-template-columns:minmax(0,1fr)}
}

/* La fascia dei campi in cima alla scheda anagrafica: quattro, poi due, poi uno */
.ana-campi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 18px}
@media (max-width:1000px){.ana-campi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ana-campi{grid-template-columns:minmax(0,1fr)}}

/* Una colonna di una vista: campo, etichetta, larghezza */
.viste-riga{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,200px);gap:8px;align-items:center}
@media (max-width:720px){.viste-riga{grid-template-columns:minmax(0,1fr)}}

/* --- Il contratto dichiarato -----------------------------------------------
   Sta dentro l'acquisizione, sopra le telefonate, e si vede: l'elenco delle
   chiamate racconta come ci si e' arrivati, questa riga dice dove si e'
   arrivati - ed e' quasi sempre quello che si sta cercando. Verde come il resto
   di cio' che e' andato a buon fine, ma con un bordo pieno invece che tenue,
   perche' un contratto non e' un esito fra i tanti. */
.inv-contratto{margin:0 22px 14px;border:1px solid #bcdccb;border-radius:11px;
  background:var(--green-soft);overflow:hidden}
.inv-contratto .testa{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 14px;color:var(--green-ink);font-size:13px;border-bottom:1px solid #cfe3d8}
.inv-contratto .testa .cf{margin-left:auto;font-size:12px;opacity:.85}
.inv-contratto .riga{display:flex;align-items:center;gap:10px;padding:8px 14px;
  font-size:12.5px;color:var(--text);border-bottom:1px solid rgba(0,0,0,.05)}
.inv-contratto .riga:last-child{border-bottom:0}
.inv-contratto .riga .cod{font-size:11.5px;color:var(--green-ink);background:#fff;
  border:1px solid #cfe3d8;border-radius:6px;padding:1px 6px}
.inv-contratto .riga .nome{font-weight:500}
.inv-contratto .riga .qta{font-size:11.5px;color:var(--muted)}
.inv-contratto .riga .coda{margin-left:auto;color:var(--muted);font-size:11.5px;white-space:nowrap}
@media (max-width:640px){
  .inv-contratto{margin-left:14px;margin-right:14px}
  .inv-contratto .testa .cf{margin-left:0;width:100%}
  .inv-contratto .riga .coda{margin-left:0;width:100%}
}

/* --- Utenti: la riga di una persona ---------------------------------------
   Il nome con il suo recapito sotto, e nelle azioni solo bottoni. I campi che
   si riempiono - rinomina, attivazione - stanno dentro un «details»: aperti
   sempre facevano di una tabella di dieci persone un modulo di venti caselle. */
/* Niente tetto sulla larghezza: la colonna del nome e' quella che assorbe lo
   spazio che avanza, e limitarla lasciava un vuoto grande mezzo schermo fra il
   nome e il gruppo. Le righe sotto il nome si accorciano da sole con i
   puntini, se un indirizzo e' lunghissimo. */
.ut-chi{display:flex;align-items:center;gap:11px;min-width:0}
.ut-chi .nome{display:flex;align-items:center;gap:7px;font-weight:500;white-space:nowrap}
.ut-chi .sotto{display:block;font-size:11px;color:var(--faint);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* La pastiglia «deve cambiare password» sta SOTTO lo stato e va a capo da
   sola. La tabella e' table-layout:fixed e le celle sono nowrap: quello che
   non ci sta non viene tagliato, scavalca - e si leggeva sopra la data
   dell'ultimo accesso. Qui la pastiglia diventa un blocco largo quanto serve,
   al massimo quanto la colonna, e il testo dentro puo' andare su due righe. */
.ut-flag{background:var(--orange-soft);color:var(--orange-ink);display:flex;margin-top:6px;
  width:fit-content;max-width:100%;height:auto;white-space:normal;line-height:1.35;padding:3px 7px}
.ut-campo{height:32px;font-size:12.5px;padding:0 9px;width:100%}
.ut-stato-eti{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
/* Il partner e' un'etichetta, non una pastiglia cliccabile: dice
   un'appartenenza, e il filetto a sinistra la distingue dal gruppo senza
   ripetere la parola «partner» su ogni riga. */
.ut-partner{display:inline-block;padding:2px 0 2px 9px;border-left:2px solid var(--navy-3);
  font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* IL MENU DELLA RIGA.
   Un <details> e non una tendina costruita a mano: deve aprirsi DENTRO la
   riga. Una tendina sovrapposta verrebbe tagliata da .tablewrap, che scorre
   in orizzontale e quindi ritaglia cio' che esce - e si vedrebbe mezzo menu.
   Costo: la riga si allunga mentre e' aperto. Guadagno: funziona anche senza
   JavaScript, e non c'e' niente da chiudere a mano se qualcosa va storto. */
.ut-menu{position:relative}
.ut-menu > summary{list-style:none;cursor:pointer;width:30px;height:30px;margin-left:auto;
  display:flex;align-items:center;justify-content:center;border-radius:8px;
  border:1px solid transparent;color:var(--faint);font-size:19px;line-height:1;
  transition:background .12s ease,color .12s ease,border-color .12s ease}
.ut-menu > summary::-webkit-details-marker{display:none}
.ut-menu > summary::marker{content:""}
.ut-menu > summary:hover{background:var(--surface-2);border-color:var(--line);color:var(--text)}
.ut-menu[open] > summary{background:var(--navy);border-color:var(--navy);color:#fff}

.ut-menu-corpo{position:absolute;top:calc(100% + 6px);right:0;z-index:20;
  width:360px;max-width:78vw;padding:13px 14px;text-align:left;
  border:1px solid var(--border);border-radius:11px;background:var(--surface);
  box-shadow:0 18px 44px rgba(3,14,26,.18)}

/* Il pannello GALLEGGIA sopra le righe sotto, non allunga la sua.
   Dentro una cella da 54px di una tabella `fixed` ci starebbe schiacciato, e
   allungando la riga si perderebbe di vista dove si stava lavorando.
   Perche' possa uscire dalla cella, il contenitore della tabella non deve
   ritagliare: `overflow-x:auto` ritaglia anche in verticale - basta che un
   asse non sia `visible` e l'altro smette di esserlo. Su schermi stretti lo
   scorrimento torna, e li' il menu si taglia: e' un pannello di
   amministrazione, si guarda da un computer. */
.ut-wrap{overflow:visible}
@media (max-width:1000px){.ut-wrap{overflow-x:auto}}
.ut-menu-bottoni{display:flex;gap:6px;flex-wrap:wrap}
/* L'intestazione di ogni gruppo di campi. La prima non ha il filetto sopra:
   li' comincia il pannello e una riga in piu' sarebbe solo un disegno. */
.ut-sez{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);
  font-weight:600;margin:13px 0 6px;padding-top:11px;border-top:1px solid var(--line-2)}
.ut-menu-corpo > .ut-sez:first-child{margin-top:0;padding-top:0;border-top:0}
/* Campo e pulsante in riga: sono una cosa sola - scrivi e salvi - e impilati
   facevano un pannello alto il doppio per tre modifiche da una riga. */
.ut-riga-campo{display:flex;gap:6px;align-items:center}
.ut-riga-campo .ut-campo{flex:1;min-width:0}
.ut-riga-campo .btn{flex:none}

/* --- Sicurezza e accessi ---------------------------------------------------
   Gli interruttori con accanto cosa succede ad accenderli, e i due elenchi di
   indirizzi separati: whitelist e blacklist fanno cose opposte e prima si
   leggevano come una cosa sola, distinte da una pastiglia grigia uguale. */
.sic-interruttori{margin-top:18px;border-top:1px solid var(--line-2)}
.sic-interruttori .prow{padding:14px 0}
.sic-piede{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 18px;border-top:1px solid var(--line-2);background:var(--surface-2)}
.sic-aggiungi{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.sic-aggiungi .ip{width:190px}
.sic-aggiungi .perche{flex:1;min-width:190px}
.sic-posta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
.sic-posta .l{font-size:11px;color:var(--faint);margin-bottom:3px}
.sic-posta .v{font-size:12.5px;word-break:break-all}
.sic-prove{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2)}
@media (max-width:760px){
  .sic-posta,.sic-prove{grid-template-columns:minmax(0,1fr)}
  .sic-aggiungi .ip{width:100%}
}

/* --- FAQ -------------------------------------------------------------------
   Una colonna stretta: si legge, non si consulta. La riga larga in cima dice
   cos'e' Bridge, poi la legenda dei colori, poi le domande per argomento -
   prima erano sei riquadri identici in fila, che si leggono come un muro. */
.faq{max-width:780px;display:flex;flex-direction:column;gap:14px}
.faq-cose .grande{font-size:15px;line-height:1.55;margin:0 0 10px;color:var(--text)}
.faq-cose p{font-size:13px;color:var(--muted);line-height:1.65;margin:0 0 10px}
.faq-cose p:last-child{margin-bottom:0}
.faq-cose .piccolo{font-size:12px;color:var(--faint)}
.faq-stati{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 22px}
.faq-stati .nome{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.faq-stati .spiega{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:5px}
.faq-domande{display:flex;flex-direction:column;gap:0}
.faq-domande > div{padding:14px 0;border-bottom:1px solid var(--line-3)}
.faq-domande > div:first-child{padding-top:0}
.faq-domande > div:last-child{padding-bottom:0;border-bottom:none}
.faq-domande .d{font-size:13.5px;font-weight:600}
.faq-domande .r{font-size:13px;color:var(--muted);line-height:1.65;margin-top:6px}
@media (max-width:700px){.faq-stati{grid-template-columns:minmax(0,1fr)}}

/* --- Utenti: la barra dei filtri -------------------------------------------
   Sei account si tengono a mente, cinquanta no. Un campo per il nome e una
   quattro controlli della stessa forma, con accanto quanti ne trovano: si
   legge la composizione della squadra prima ancora di filtrare. */
.ut-filtri{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 18px;border-bottom:1px solid var(--line-2);background:var(--surface-2)}
.ut-cerca{height:34px;font-size:12.5px;width:250px;flex:none}
/* Tutte le tendine della stessa misura: in fila si leggono come un elenco di
   criteri, e si capisce a colpo d'occhio che fanno tutte la stessa cosa. */
.ut-sel{height:34px;font-size:12.5px;width:190px;flex:none;padding-right:8px}
#ut-azzera{margin-left:auto}
@media (max-width:760px){.ut-cerca,.ut-sel{width:100%}#ut-azzera{margin-left:0}}

/* Le larghezze dichiarate valgono davvero.
   Senza table-layout:fixed il browser tratta le width come minimi e spalma lo
   spazio che avanza su tutte le colonne: su uno schermo largo il nome e il
   gruppo si gonfiavano e i pulsanti finivano oltre il bordo della scheda. Qui
   invece l'avanzo va tutto all'ultima colonna, che non ha larghezza. */
.ut-tabella{table-layout:fixed}
.ut-tabella td:first-child{overflow:hidden}

/* La fascia che mette a confronto in-voice e il nostro database, sulla pagina
   di ricerca in-voice. Due voci affiancate e, quando non concordano, una riga
   che dice cosa vuol dire. */
.inv-confronto{display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  padding:12px 22px;border-top:1px solid var(--line-2);background:var(--surface-2)}
.inv-conf-voce .l{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--faint);margin-bottom:3px}
.inv-conf-voce .v{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:#2a3442}
.inv-conf-nota{display:flex;align-items:flex-start;gap:9px;margin:0 22px 2px;padding:11px 14px;
  border:1px solid;border-radius:10px;font-size:12.5px;line-height:1.55}
.inv-conf-nota svg{flex:none;margin-top:1px}

/* I parametri di un processo, dentro la scheda che lo lancia.
   Stanno sopra i pulsanti e non dentro un pannello da aprire: sono le cose
   che si guardano PRIMA di premere - «quanti giorni indietro», «quanti per
   giro» - e nasconderle vorrebbe dire lanciare con dei valori che non si sono
   letti. Due colonne finche' ci stanno, una sola quando la scheda si stringe. */
.job-parametri{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:9px 12px;width:100%;margin-bottom:11px;padding:11px 12px;
  border:1px solid var(--line-2);border-radius:10px;background:var(--surface-2)}
.job-parametri label{display:flex;flex-direction:column;gap:4px;min-width:0}
.job-parametri label > span{font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);font-weight:600}
.job-parametri em{font-style:normal;font-size:10.5px;color:var(--faint)}

/* La griglia «cosa si vede dove» del pannello di governo.
   Un interruttore per casella, e lo stato si legge dalla PAROLA oltre che dal
   colore: «visibile»/«nascosta» si capisce anche stampando la pagina, o da chi
   non distingue il verde dal grigio. */
.int-griglia td,.int-griglia th{vertical-align:middle}
.int-sezione td{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);
  font-weight:600;background:var(--surface-2);padding-top:9px;padding-bottom:9px}
.int-sw{display:inline-flex;align-items:center;justify-content:center;min-width:86px;height:26px;
  padding:0 10px;border-radius:7px;border:1px solid var(--line);background:var(--surface);
  color:var(--muted);font-size:11px;font-weight:600;cursor:pointer;
  transition:background .12s ease,color .12s ease,border-color .12s ease}
.int-sw:hover{border-color:#c4cedb;color:var(--text)}
.int-sw.on{background:var(--green-soft);border-color:#cfe3d8;color:var(--green-ink)}
.int-sw.on:hover{background:#dcece2}
.int-nd{color:var(--dim);font-size:13px}

/* I processi come righe che si aprono, non come sette schede spiegate tutte
   insieme. La riga chiusa dice le tre cose che si guardano di sfuggita - come
   sta, ogni quanto gira, com'e' finito l'ultimo giro - e il resto sta dentro,
   dove lo legge chi sta decidendo se premere. */
.job-elenco{display:flex;flex-direction:column}
.job-riga{border-bottom:1px solid var(--line-2)}
.job-riga:last-child{border-bottom:0}
.job-riga > summary{display:flex;align-items:center;gap:12px;cursor:pointer;
  padding:13px 18px;list-style:none;transition:background .12s ease}
.job-riga > summary::-webkit-details-marker{display:none}
.job-riga > summary::marker{content:""}
.job-riga > summary:hover{background:var(--surface-2)}
.job-riga[open] > summary{background:var(--surface-2);border-bottom:1px solid var(--line-2)}
/* Il triangolino lo mettiamo noi, cosi' sta in riga e gira all'apertura:
   le icone del progetto sono svg{display:block} e dentro un <summary> quel
   block manderebbe tutto a capo. */
.job-riga > summary::before{content:"";width:0;height:0;flex:none;order:9;margin-left:auto;
  border-left:5px solid var(--dim);border-top:4px solid transparent;
  border-bottom:4px solid transparent;transition:transform .12s}
.job-riga[open] > summary::before{transform:rotate(90deg)}
.job-riga .dot{width:9px;height:9px;flex:none}
.job-riga .nome{font-weight:600;font-size:13.5px;white-space:nowrap}
.job-riga .quando{font-size:11px;color:var(--faint);white-space:nowrap}
.job-riga .esito{font-size:11.5px;color:var(--muted);margin-left:auto;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.job-corpo{padding:14px 18px 16px}
.job-corpo .job-sintesi{margin:0 0 8px}
.job-corpo .job-tocca{margin:0 0 10px}
@media (max-width:720px){.job-riga .quando,.job-riga .esito{display:none}}

/* ===========================================================================
   SCHERMI STRETTI - tablet e telefono
   ===========================================================================

   Fino al 14/10/2026 non c'era niente di tutto questo: la barra laterale
   restava 236px fissi a qualunque larghezza, le griglie a quattro colonne
   restavano quattro, e su un telefono da 390px il contenuto vero aveva 150px
   in cui stare. Le poche media query esistenti erano per singoli componenti -
   una tabella qui, una griglia la' - e nessuna toccava lo scheletro.

   Tre soglie, e ognuna risponde a una cosa precisa:

     1200  le griglie larghe si stringono: quattro colonne di campi su un
           portatile sono quattro colonne strette, non quattro colonne.
      980  TABLET. La barra laterale diventa una striscia di sole icone: le
           voci restano tutte raggiungibili con un dito, e il contenuto
           riprende duecento pixel - che su 1024 sono un quinto dello schermo.
      640  TELEFONO. Tutto incolonnato, intestazioni che vanno a capo, finestre
           a tutto schermo.

   Le tabelle NON diventano schede impilate. Scorrono in orizzontale, come
   gia' fanno: una tabella di anagrafiche serve a confrontare righe fra loro,
   e impilandola si perde proprio quello. Meglio scorrere sapendo cosa si sta
   guardando che leggere venti schede identiche.
   ======================================================================== */

@media (max-width:1200px){
  .grid.quattro{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --- Tablet e telefono: il menu passa in orizzontale --------------------
   Non una barra laterale piu' stretta: una barra SOPRA, di sole icone.

   Due tentativi prima di questo. Il primo l'aveva ridotta a una striscia di
   icone larga 64px lasciando lo scheletro a due colonne: su schermo stretto
   quella riga flex non reggeva - il contenuto, tabelle larghe e griglie, non
   riusciva a stringersi quanto serviva - e il blocco finiva SOTTO la barra
   invece che accanto, con mezza pagina vuota in mezzo. In orizzontale il
   problema non esiste: `.shell` si incolonna, la barra prende la sua riga e il
   contenuto tutta la larghezza.

   Il secondo teneva le etichette accanto alle icone. Su un telefono da 390px
   ci stava una voce sola: le altre erano fuori schermo a destra, raggiungibili
   solo scorrendo di lato una barra che non sembra scorrevole. Un menu che
   mostra un decimo di se' e' peggio di un menu di simboli.

   Quindi solo icone, tutte in vista insieme. Si perde il nome della voce, ma
   non l'orientamento: il titolo della pagina sta nell'intestazione subito
   sotto, a caratteri pieni, e dice sempre dove si e'. Il `title` sulle voci
   resta per chi ha un mouse - su un tablet con la tastiera, non su un dito.

   Resta appiccicata in alto mentre si scorre: un menu che bisogna risalire a
   cercare e' un menu che non si usa. */
@media (max-width:980px){
  .shell{flex-direction:column}

  .side{width:100%;height:auto;flex:none;flex-direction:row;align-items:center;
    gap:1px;padding:0 6px;position:sticky;top:0;z-index:30;
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    box-shadow:0 2px 10px rgba(3,14,26,.22)}

  /* Spariscono le etichette e tutto cio' che in colonna reggeva l'occhio:
     intestazioni di sezione, nome del portale, numero di versione, contatore
     delle sottovoci. In riga non orientano, occupano. */
  .side .eti,.side .navlabel,.side .sideversione,.side .lockb{display:none}

  .brand{padding:0 7px 0 1px;margin:0 3px 0 0;flex:none;
    border-right:1px solid var(--navy-3)}
  .mark{width:30px;height:30px}

  .navitem{flex:none;width:42px;height:46px;padding:0;gap:0;margin:0;
    justify-content:center;border-radius:0}
  /* La voce attiva si segnava con un filetto a sinistra: in riga va sotto, se
     no fra due icone vicine sembra un separatore e non uno stato. */
  .navitem.active{box-shadow:inset 0 -3px 0 var(--yellow-chiaro)}
  .navitem.sotto{width:42px;padding-left:0;font-size:12.5px}
  .navitem.sotto::before{display:none}

  /* Chi sei va in fondo alla riga: resta l'iniziale con lucchetto e uscita,
     il nome per esteso si prendeva meta' barra. */
  .sideuser{margin:0 0 0 auto;flex:none;gap:8px;
    padding:0 2px 0 9px;border-top:0;border-left:1px solid var(--navy-3)}

  .top{padding:0 16px;gap:10px}
  .content{padding:16px 16px 32px;gap:14px}
  .grid.tre{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* La finestra della scheda prende quasi tutto: a 980px i 48px di margine
     sopra e sotto erano un bordo decorativo su uno schermo che non ne ha. */
  .finestra{padding:16px 10px}
  .finestra-chiudi{top:10px;right:12px}
}

/* --- Telefono: una colonna, e niente che sporga ------------------------- */
@media (max-width:640px){
  /* Sotto i 640px la barra si stringe ancora: 38px per icona bastano al dito
     (la soglia comoda e' 44, ma l'area sensibile resta alta 46) e fanno entrare
     una voce in piu' senza dover scorrere. */
  .side{gap:0;padding:0 4px}
  .mark{width:27px;height:27px}
  .brand{padding:0 5px 0 0;margin-right:2px}
  .navitem,.navitem.sotto{width:38px;height:46px}
  .sideuser{gap:7px;padding-left:7px}

  .top{height:auto;min-height:54px;padding:10px 13px;flex-wrap:wrap}
  .h1{font-size:15px}
  .content{padding:13px 13px 28px;gap:12px}

  .grid.due,.grid.tre,.grid.quattro{grid-template-columns:minmax(0,1fr)}

  /* Un'intestazione con titolo e pulsante affiancati, su 390px, spingeva il
     pulsante fuori dal bordo. Qui vanno a capo e il pulsante prende la riga. */
  .cardhead{flex-direction:column;align-items:flex-start;gap:9px;padding:13px 14px}
  .cardhead .btn{width:100%;justify-content:center}
  .cardbody{padding:14px}

  /* I campi e i pulsanti si toccano con un dito: 40px e' il minimo che si
     centra senza sbagliare, e i pulsanti in riga diventano una colonna
     invece di stringersi fino a non leggersi piu'. */
  .field{height:42px}
  .btn{height:40px;padding:0 13px}
  .job-azioni,.ut-menu-bottoni{flex-direction:column;align-items:stretch}
  .job-azioni .btn,.ut-menu-bottoni .btn{width:100%;justify-content:center}

  /* Le tabelle restano tabelle e scorrono. Lo stacco sul bordo destro dice
     che c'e' altro oltre: senza, su un telefono non si capisce che si puo'
     trascinare, e si crede che le colonne finiscano li'. */
  .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
    background:linear-gradient(to right,transparent,rgba(3,14,26,.07)) right/14px 100% no-repeat}
  table{font-size:12.5px}
  th,td{white-space:nowrap}

  .finestra{padding:0}
  .finestra-corpo{max-width:100%}
  .finestra .card{border-radius:0;border-left:0;border-right:0}
  .finestra-barra{height:46px}
  .finestra-chiudi{top:7px;right:9px}

  .ut-menu-corpo{width:min(320px,92vw)}
  .banner{padding:11px 13px}
}

/* Il pannello di visibilita' e la finestra dei gestori, sugli schermi bassi:
   `align-items:flex-start` piu' `overflow-y:auto` li lasciava scorrere, ma
   con 70px di padding sopra su uno schermo da 667px il contenuto partiva gia'
   tagliato. */
@media (max-height:720px){
  .velo{padding:24px 16px}
  .finestra{padding-top:20px}
}

/* --- La pagina di accesso ------------------------------------------------
   Ha un impianto suo - pannello scuro al 52% e modulo accanto - che non passa
   dalle regole dello scheletro. A 393px le due colonne restavano affiancate e
   il modulo finiva meta' fuori dallo schermo: si vedeva il marchio e non il
   campo della password, cioe' l'unica cosa per cui si apre quella pagina.

   Sotto i 900px si incolonna: prima il marchio, piccolo e in alto, poi il
   modulo. Il pannello scuro NON sparisce - dice di chi e' il portale su cui
   stai per scrivere una password, ed e' l'unica cosa che lo dice - ma smette
   di prendere meta' schermo e diventa un'intestazione. */
@media (max-width:900px){
  .login{flex-direction:column;min-height:100svh}
  .login .lato{width:100%;padding:26px 20px;justify-content:flex-start}
  .login .modulo{padding:28px 20px;align-items:flex-start;flex:1 0 auto}
}

@media (max-width:640px){
  /* Il marchio grande e il nome a 50px erano misurati su mezza pagina: su una
     striscia alta 110px coprivano tutto. */
  .login .lato > div{gap:13px !important}
  .login .lato .logo{width:56px !important;height:56px !important}
  .login .lato span[style*="width:150px"],
  .login .lato > div > span:first-child{width:56px !important;height:56px !important;border-radius:13px}
  .login .lato span[style*="font-size:50px"]{font-size:27px !important}
  .login .lato span[style*="font-size:23px"]{font-size:14px !important}
  .login .modulo form,.login .modulo > div{width:100% !important;max-width:none !important}
}