/* ============================================================
   I valori sono quelli di www.fr-busato.it, presi dal foglio di
   stile del sito: stesso accento, stessi caratteri, stessi raggi.
   Solo accento e logo saranno sovrascrivibili per tenant.

   I caratteri sono ancora quelli di sistema: Sora e Instrument
   Sans vanno ospitati in proprio, non presi da Google — vedi
   03 Decisioni/2026-08-28_stile-web-dal-sito-aziendale.md.
   ============================================================ */

:root{
  --bg:        #f3f6fc;
  --bg-2:      #eaf1fb;
  --surface:   #ffffff;
  --surface-2: #f4f8ff;
  --line:      rgba(37,99,235,.14);
  --line-forte:rgba(37,99,235,.26);
  --text:      #12203b;
  --muted:     #4c5a76;
  --faint:     #8492ab;

  --accent:    #2563eb;
  --accent-2:  color-mix(in srgb, var(--accent) 78%, #0a1220);
  --accent-soft: color-mix(in srgb, var(--accent) 13%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 34%, transparent);

  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;

  --radius: 12px;
  --radius-sm: 8px;

  /* Più larga di prima perché una colonna se ne va nell'albero: con 1180 il
     contenuto si stringeva di quanto l'albero occupa, e le tabelle larghe —
     asset, credenziali — cominciavano a scorrere per niente. */
  --maxw: 1420px;

  /* Quanto è larga la colonna di sinistra. Sedici rem tengono per intero il nome
     di quasi tutti i clienti: sotto, i nomi lunghi vanno a capo e l'albero smette
     di leggersi come un elenco. */
  --albero: 16rem;
}

*,*::before,*::after{ box-sizing:border-box; }

/* La densità sta qui, in due righe: il corpo detta la misura e quasi tutto il resto
   è espresso in rem. Alzare o abbassare queste due cambia la compattezza di tutte
   le schermate insieme, che è la ragione per cui non ci sono misure assolute in
   giro per il foglio. */
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:.94rem; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.sfondo{
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(60rem 40rem at 85% -10%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(50rem 36rem at -10% 40%, rgba(96,165,250,.10), transparent 60%),
    var(--bg);
}

a{ color:var(--accent-2); text-decoration:none; }
a:hover{ text-decoration:underline; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

.container{ width:min(100% - 2.5rem, var(--maxw)); margin-inline:auto; }

.header{
  position:sticky; top:0; z-index:100;
  backdrop-filter:blur(14px);
  background:rgba(255,255,255,.72);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
      padding:.45rem 1.2rem; }
.marchio{ font-family:var(--font-display); font-weight:600; letter-spacing:-.015em;
          color:var(--text); font-size:.95rem; }
.in-linea{ display:inline; }

/* -----------------------------------------------------------------------------
   Due colonne: l'albero e il contenuto.

   L'albero scorre per conto suo e resta appeso sotto la barra — con sessantuno
   clienti, farlo scorrere insieme alla pagina vorrebbe dire perderlo appena si
   guarda una tabella lunga.
   -------------------------------------------------------------------------- */
.impaginato{
  display:grid; grid-template-columns:var(--albero) minmax(0,1fr);
  width:min(100% - 1.6rem, var(--maxw)); margin-inline:auto; gap:1.4rem;
  align-items:start;
}
.impaginato > main{ min-width:0; padding-bottom:3rem; }

.albero{
  position:sticky; top:2.6rem; align-self:start;
  max-height:calc(100vh - 3.4rem); overflow-y:auto;
  padding:.9rem .2rem .9rem 0; font-size:.86rem;
}
.albero-marchio{ display:none; }

.albero-titolo{
  display:flex; align-items:center; gap:.4rem;
  margin:.9rem .5rem .25rem; color:var(--faint);
  text-transform:uppercase; letter-spacing:.07em; font-size:.68rem; font-weight:600;
}
.albero-titolo span{ color:var(--faint); font-variant-numeric:tabular-nums;
                     text-transform:none; letter-spacing:0; }
.albero-titolo:first-of-type{ margin-top:.2rem; }

.albero-rami, .albero-foglie{ list-style:none; margin:0; padding:0; }

/* Il ramo e la foglia hanno la stessa forma e due rientri diversi: è ciò che fa
   leggere l'elenco come un albero senza disegnare nessuna linea. */
.albero .ramo, .albero .foglia{
  display:flex; align-items:center; gap:.4rem;
  padding:.24rem .5rem; border-radius:var(--radius-sm);
  color:var(--muted); line-height:1.3;
}
.albero .foglia{ padding-left:1.6rem; font-size:.83rem; }

.albero .ramo:hover, .albero .foglia:hover{
  background:var(--surface); color:var(--text); text-decoration:none;
}
.albero .ramo.attivo, .albero .foglia.attivo{
  background:var(--accent-soft); color:var(--accent-2); font-weight:600;
}

/* Il pulsante dei cessati non è un ramo dell'albero e non deve sembrarlo: è più
   piccolo, non ha icona e sta appoggiato sotto l'elenco. Somiglia a un'etichetta più
   che a una voce, perché è la scelta di cosa vedere, non una cosa da vedere. */
.albero-cessati{ margin:.35rem .5rem .2rem; }
.albero-cessati button{
  padding:.2rem .45rem; border:1px dashed var(--line-forte); border-radius:var(--radius-sm);
  background:none; color:var(--faint); cursor:pointer;
  font-family:var(--font-body); font-size:.74rem; line-height:1.3;
}
.albero-cessati button:hover{ color:var(--text); border-color:var(--accent); border-style:solid; }

/* Un cessato che compare — perché è quello aperto, o perché il pulsante è acceso —
   si vede che è cessato: sbiadito, e il nome barrato. Senza, in mezzo agli attivi si
   prenderebbe per uno di loro, che è l'equivoco peggiore in un albero di clienti. */
.albero .ramo.cessato{ opacity:.6; }
.albero .ramo.cessato span{ text-decoration:line-through; text-decoration-thickness:1px; }
.albero .ramo.cessato.attivo{ opacity:1; }

/* Il nome va su una riga sola: un cliente che va a capo rompe l'allineamento di
   tutti quelli sotto, e un elenco che non si allinea non si scorre con l'occhio. */
.albero .ramo span, .albero .foglia span{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.albero .icona{ flex:none; width:1em; height:1em; opacity:.7; }
.albero .foglia .icona{ opacity:.55; }

.albero-foglie{ margin-bottom:.4rem; }

/* Sotto i mille pixel l'albero va sopra il contenuto e si chiude: su un portatile
   stretto sedici rem di colonna sono un terzo dello schermo. */
@media (max-width:1000px){
  .impaginato{ grid-template-columns:minmax(0,1fr); gap:.6rem; }
  .albero{
    position:static; max-height:16rem;
    border:1px solid var(--line); border-radius:var(--radius);
    background:var(--surface); padding:.6rem; margin-top:.8rem;
  }
}

h1{ font-family:var(--font-display); font-size:clamp(1.35rem,2.1vw,1.7rem); font-weight:600; letter-spacing:-.02em; margin:1.1rem 0 .2rem; }
h2{ font-family:var(--font-display); font-size:1.02rem; font-weight:600; margin:1.5rem 0 .45rem; }
.sottotitolo{ color:var(--muted); margin:0 0 .9rem; }
.eyebrow{ color:var(--faint); text-transform:uppercase; letter-spacing:.08em; font-size:.75rem; font-weight:600; }

.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.7rem 1.3rem; border-radius:999px;
  font-family:var(--font-body); font-weight:600; font-size:.95rem;
  cursor:pointer; border:1px solid transparent;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{ text-decoration:none; transform:translateY(-2px); }
.btn-pieno{
  background:linear-gradient(120deg, var(--accent), color-mix(in srgb, var(--accent) 78%, #6ea8ff));
  color:#fff; box-shadow:0 8px 26px -8px color-mix(in srgb, var(--accent) 60%, transparent);
}
.btn-vuoto{ border-color:var(--line-forte); color:var(--text); background:rgba(37,99,235,.04); }
.btn-vuoto:hover{ border-color:var(--accent-line); background:var(--accent-soft); }

/* Una spunta con una spiegazione sotto. Il riquadro intero e' cliccabile: mirare una
   casella da tredici pixel non e' un requisito, e la spiegazione serve a decidere,
   quindi sta accanto alla scelta e non in fondo alla pagina. */
.spunta{
  display:flex; align-items:flex-start; gap:.55rem; cursor:pointer;
  padding:.5rem .7rem; margin-bottom:.5rem;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface);
}
.spunta:hover{ border-color:var(--line-forte); }
.spunta:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); }
.spunta input{ margin:.2rem 0 0; flex:none; }
.spunta strong{ display:block; font-size:.9rem; }
.spunta small{ display:block; color:var(--muted); font-size:.78rem; line-height:1.35; }

/* Un'azione che non si disfa si veste diversa dalle altre. Non urla -- il rosso pieno
   su una tabella di sei pulsanti diventa l'unica cosa che si vede -- ma non si preme
   per sbaglio credendo di premere quello accanto. */
.btn.pericolo{ border-color:#d1a3a3; color:#a33; background:rgba(180,40,40,.05); }
.btn.pericolo:hover{ border-color:#a33; background:rgba(180,40,40,.12); }

/* Una riga che c'e' ancora ma non conta: un utente cessato, un documento che non e'
   entrato. Si legge, non si impone. */
tr.spenta td{ color:var(--muted); }

/* Il barrato dice «questa persona non c'e' piu'», ed e' solo per le persone: barrare
   il nome di un file che non e' stato importato direbbe che il file e' annullato,
   mentre e' li' e aspetta soltanto che qualcuno gli dia un cliente. */
td.cessato{ text-decoration:line-through; text-decoration-thickness:1px; }

.scheda{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:.85rem 1rem; margin-bottom:.7rem;
}

table{ width:100%; border-collapse:collapse; background:var(--surface);
       border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
th{ text-align:left; font-family:var(--font-display); font-size:.82rem; font-weight:600;
    color:var(--muted); text-transform:uppercase; letter-spacing:.05em;
    padding:.45rem .7rem; border-bottom:1px solid var(--line); background:var(--surface-2); }
td{ padding:.42rem .7rem; border-bottom:1px solid var(--line); }
tr:last-child td{ border-bottom:none; }
tr:hover td{ background:var(--surface-2); }

/* Intestazioni che ordinano, e sotto le caselle che filtrano.

   L'etichetta **è** il pulsante: occupa tutta la cella invece di essere una parola
   cliccabile in mezzo al testo, così il bersaglio è grande quanto la colonna e non
   serve mirare. La freccia tiene il posto anche quando è vuota — altrimenti la
   colonna si allarga di un carattere nel momento in cui la si ordina, e l'intera
   tabella si muove sotto il dito. */
th a.ordina{ display:flex; align-items:center; justify-content:space-between; gap:.4rem;
             margin:-.45rem -.7rem; padding:.45rem .7rem;
             color:inherit; text-decoration:none; }
th a.ordina:hover{ color:var(--text); background:var(--surface); }
th a.ordina .freccia{ min-width:.7em; color:var(--accent); font-size:.9em; }

/* La riga dei filtri non è un'intestazione e non deve sembrarlo: niente maiuscolo,
   niente spaziatura da titolo. È una riga di attrezzi appoggiata sotto i nomi. */
tr.riga-filtri th{ padding:.3rem .4rem; text-transform:none; letter-spacing:0;
                   background:var(--surface-2); border-bottom:1px solid var(--line-forte); }
tr.riga-filtri:hover th{ background:var(--surface-2); }

input.filtro{ width:100%; min-width:0; box-sizing:border-box; padding:.24rem .4rem;
              font-family:var(--font-body); font-size:.82rem; font-weight:400;
              text-transform:none; letter-spacing:0;
              border:1px solid var(--line); border-radius:var(--radius-sm);
              background:var(--surface); color:var(--text); }
input.filtro:focus{ border-color:var(--accent); outline:none; }

/* Ogni casella è un modulo per conto suo: con un campo solo l'invio da tastiera basta,
   e non serve un pulsante accanto a ognuna. Il modulo non deve però occupare spazio
   suo, o la riga dei filtri verrebbe alta il doppio per niente. */
tr.riga-filtri form{ margin:0; flex:1 1 auto; min-width:0; }

/* Casella e «azzera» sulla stessa riga: sotto, il collegamento farebbe crescere in
   altezza solo l'ultima cella e la riga dei filtri sborderebbe oltre l'intestazione.
   La flessibilità sta qui dentro e non sul <th>, che deve restare una cella di
   tabella: cambiargli il display gli farebbe perdere l'allineamento con le colonne. */
.filtro-riga{ display:flex; align-items:center; gap:.35rem; }
.azzera-filtri{ font-size:.75rem; font-weight:400; text-transform:none;
                letter-spacing:0; white-space:nowrap; }
.mono{ font-family:var(--font-mono); font-size:.88rem; }

.vuoto{ color:var(--muted); padding:2rem 0; }
.avviso{ color:var(--muted); padding:1.5rem 0; }
.errore{ color:#b42318; background:#fef3f2; border:1px solid #fecdca;
         border-radius:var(--radius-sm); padding:.8rem 1rem; margin-bottom:1rem; }

.campo{ display:block; margin-bottom:.7rem; }
.campo span{ display:block; font-size:.78rem; color:var(--muted); margin-bottom:.2rem; }
.campo input{
  width:100%; padding:.4rem .6rem; font-size:.92rem; font-family:var(--font-body);
  border:1px solid var(--line-forte); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--text);
}
.accesso{ max-width:26rem; margin:4rem auto; }

/* Le porte di un indirizzo, su /accesso/dove.

   Una porta che si apre e' un modulo con un pulsante solo, e il pulsante e' tutto il
   riquadro: la scelta e' l'unica cosa che si fa in questa schermata, e un clic solo
   vale piu' di un clic piu' un «continua». Resta un <button> vero -- non un riquadro
   reso cliccabile con lo script -- perche' qui il codice non gira.

   Una porta chiusa e' un <div>, non un pulsante spento: un pulsante spento fa provare
   a premerlo, un riquadro che spiega no. */
.scelta-scrivania{ list-style:none; margin:0 0 1rem; padding:0; }
.scelta-scrivania li{ margin-bottom:.4rem; }

.scelta-scrivania button,
.scelta-scrivania .chiusa{
  display:flex; align-items:flex-start; gap:.7rem; width:100%; text-align:left;
  padding:.7rem .85rem; font-family:inherit; font-size:1rem;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--text);
}
.scelta-scrivania button{ cursor:pointer; }
.scelta-scrivania button:hover{ border-color:var(--accent); background:var(--accent-soft); }
.scelta-scrivania button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* La chiusa si distingue prima di essere letta: fondo smorto e bordo tratteggiato
   dicono «c'e', ma non da qui» senza bisogno di una parola. */
.scelta-scrivania .chiusa{
  border-style:dashed; background:transparent; color:var(--muted);
}

.scelta-scrivania .icona{ width:1.55rem; height:1.55rem; flex:none; margin-top:.1rem; }
.scelta-scrivania button .icona{ color:var(--accent); }
.scelta-scrivania .chiusa .icona{ color:var(--faint); }

.scelta-scrivania strong{ display:block; font-size:.95rem; }
.scelta-scrivania small{ display:block; color:var(--muted); font-size:.78rem; line-height:1.35; }
.scelta-scrivania .chiusa a{ display:inline-block; margin-top:.3rem; font-size:.78rem; }

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

/* Elenchi di regole e codici */
.scheda ul{ margin:.4rem 0 .8rem; padding-left:1.2rem; color:var(--muted); }
.scheda li{ margin:.25rem 0; }
.codici{ list-style:none; padding:0; margin:0;
         display:grid; grid-template-columns:repeat(auto-fill,minmax(11rem,1fr)); gap:.5rem; }
.codici li{ background:var(--surface-2); border:1px solid var(--line);
            border-radius:var(--radius-sm); padding:.5rem .8rem; text-align:center;
            letter-spacing:.06em; }
.chiave{ background:var(--surface-2); border:1px solid var(--line);
         border-radius:var(--radius-sm); padding:.6rem .9rem; letter-spacing:.12em; }
.spezza{ overflow-wrap:anywhere; }

/* Menu e moduli in riga */
/* Le funzioni stanno a sinistra, il menu della persona a destra: sono due cose
   diverse — cosa fai e chi sei — e tenerle agli estremi opposti evita che si
   somiglino. La disposizione è voluta, non un residuo. A separarle è il
   `justify-content:space-between` della barra: nessun margine automatico, così
   c'è un solo meccanismo a decidere dove vanno. */
.voci{ display:flex; gap:1.2rem; font-size:.94rem; align-items:center; }
.voci a{ color:var(--muted); }
.voci a:hover{ color:var(--accent-2); text-decoration:none; }
.riga{ display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end; }
.riga .campo{ margin-bottom:0; flex:1 1 12rem; }
.riga button{ flex:none; }
select{ width:100%; padding:.55rem .7rem; font-family:var(--font-body); font-size:.95rem;
        border:1px solid var(--line-forte); border-radius:var(--radius-sm);
        background:var(--surface); color:var(--text); }
.azioni{ display:flex; gap:.4rem; flex-wrap:wrap; }
.azioni .btn{ padding:.4rem .8rem; font-size:.85rem; }

/* Codice QR del secondo fattore */
.qr{ display:flex; justify-content:center; margin:1rem 0 .6rem; }
.qr svg{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:.6rem;
         background:#fff; max-width:100%; height:auto; }
details{ margin-top:.6rem; }
details summary{ cursor:pointer; color:var(--accent-2); font-size:.92rem; }
details p{ margin:.6rem 0; color:var(--muted); font-size:.94rem; }

/* Menu della persona, in alto a destra */
.io{ position:relative; }
.io summary{
  display:flex; align-items:center; gap:.6rem; cursor:pointer; list-style:none;
  padding:.3rem .6rem .3rem .3rem; border-radius:999px; border:1px solid transparent;
}
.io summary::-webkit-details-marker{ display:none; }
.io summary:hover{ border-color:var(--line); background:var(--surface); }
.io[open] summary{ border-color:var(--line-forte); background:var(--surface); }
.avatar{
  width:2rem; height:2rem; border-radius:50%; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--font-display); font-weight:600; font-size:.8rem;
  letter-spacing:.02em;
}
.io-nome{ font-weight:600; font-size:.94rem; }
.io-freccia{ color:var(--faint); font-size:.7rem; }
.io-menu{
  /* Ancorato a destra: aperto verso sinistra non esce dalla pagina. */
  position:absolute; top:calc(100% + .5rem); right:0; z-index:120; min-width:15rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 24px 60px -24px rgba(37,99,235,.35); padding:.5rem;
}
.io-dove{ margin:.2rem .6rem .5rem; color:var(--faint); font-size:.78rem;
          text-transform:uppercase; letter-spacing:.06em; }
.io-menu a, .io-menu button{
  display:block; width:100%; text-align:left; padding:.5rem .6rem;
  border-radius:var(--radius-sm); color:var(--text); font-size:.94rem;
  background:none; border:none; font-family:var(--font-body); cursor:pointer;
}
.io-menu a:hover, .io-menu button:hover{ background:var(--surface-2); text-decoration:none; }
.io-menu form{ margin:.3rem 0 0; border-top:1px solid var(--line); padding-top:.3rem; }

/* Etichetta di stato accanto a un nome — «principale», «cessato».
   Sta dentro il titolo invece che in una colonna sua perché è una qualità della
   riga, non un dato da confrontare: in colonna sarebbe una fila di celle vuote. */
.etichetta{
  display:inline-block; margin-left:.5rem; padding:.1rem .5rem; border-radius:999px;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--line);
  font-family:var(--font-body); font-weight:500; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.06em; vertical-align:middle;
}

/* Filtri e ricerca sugli elenchi lunghi.
   Le pillole dei tipi sono collegamenti veri e non pulsanti con lo script: il
   filtro sta nell'indirizzo, quindi si manda a un collega e torna col tasto
   indietro. Il numero accanto dice quanti ce ne sono in tutto, non quanti ne
   resterebbero dopo il filtro già applicato — che è ciò che rende inservibile
   mezza interfaccia. */
.filtri{ display:flex; gap:.5rem; align-items:center; margin:.8rem 0 .6rem; flex-wrap:wrap; }
.cerca{ flex:1 1 22rem; max-width:34rem; padding:.55rem .8rem; font-size:.95rem;
        font-family:var(--font-body); border:1px solid var(--line-forte);
        border-radius:var(--radius-sm); background:var(--surface); color:var(--text); }

.pillole{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 1rem; }
.pillola{ display:inline-flex; align-items:center; gap:.4rem; padding:.28rem .7rem;
          border:1px solid var(--line); border-radius:999px; background:var(--surface);
          color:var(--muted); font-size:.85rem; }
.pillola:hover{ border-color:var(--line-forte); color:var(--text); text-decoration:none; }
.pillola span{ color:var(--faint); font-size:.78rem; font-variant-numeric:tabular-nums; }
.pillola.attiva{ background:var(--accent); border-color:var(--accent); color:#fff; }
.pillola.attiva span{ color:rgba(255,255,255,.75); }

/* Il nome della categoria davanti alla sua fila di pillole. Sta sulla riga e non
   sopra: una riga di titolo per una parola allontanerebbe i filtri fra loro invece
   di raggrupparli, che e l'opposto di quello che serve. La larghezza fissa li
   incolonna, cosi le quattro file si leggono come una tabella. */
.pillole .categoria{ display:inline-flex; align-items:center; min-width:5.5rem;
                     color:var(--faint); font-size:.78rem; text-transform:uppercase;
                     letter-spacing:.04em; }

/* Da quando l'etichetta e anche un filtro, quando e scelta va letta come le altre
   pillole scelte: senza questa riga il testo resterebbe spento sul fondo colorato,
   perche la regola del colore spento viene dopo ed e altrettanto specifica. */
.pillola.categoria.attiva{ color:#fff; }

@media (max-width: 640px){
  /* Su schermo stretto la larghezza fissa ruberebbe spazio alle pillole: li
     l'etichetta va a capo per conto suo e fa da intestazione. */
  .pillole .categoria{ min-width:100%; margin-bottom:.15rem; }
}

/* La scheda di un asset: tabella a due colonne, etichetta a sinistra. */
table th[scope], tbody th{ width:12rem; color:var(--muted); font-weight:600; text-align:left; }
.provenienza p{ margin:0 0 .3rem; }
textarea{ width:100%; padding:.55rem .7rem; font-family:var(--font-body); font-size:.95rem;
          border:1px solid var(--line-forte); border-radius:var(--radius-sm);
          background:var(--surface); color:var(--text); resize:vertical; }

/* Le icone dei tipi di asset.
   Sono SVG dentro la pagina, quindi prendono il colore del testo che le circonda
   e restano nitide a ogni ingrandimento. La misura segue quella del carattere:
   dentro una pillola sono piccole, in cima a una scheda sono grandi, e non c'è
   una regola per ogni posto. */
.icona{ width:1.15em; height:1.15em; vertical-align:-.2em; flex:none; }
.con-icona{ display:flex; align-items:center; gap:.45rem; }
.pillola .icona{ color:var(--faint); }
.pillola.attiva .icona{ color:rgba(255,255,255,.9); }
.disegno-grande{ margin:.2rem 0 -.4rem; color:var(--accent); font-size:2.4rem; line-height:1; }
.disegno-cella{ color:var(--muted); font-size:1.3rem; }

/* Il riepilogo del cliente: quanto c'è, prima di cosa c'è. */
.riquadri{ display:flex; flex-wrap:wrap; gap:.6rem; margin:.8rem 0 1rem; }
.riquadro{
  display:flex; flex-direction:column; gap:.1rem; min-width:7.5rem;
  padding:.7rem .9rem; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); color:var(--text);
}
a.riquadro:hover{ border-color:var(--accent); text-decoration:none;
                  box-shadow:0 10px 24px -18px rgba(37,99,235,.6); }
.riquadro .disegno{ color:var(--faint); font-size:1.25rem; line-height:1; margin-bottom:.15rem; }
.riquadro .numero{ font-family:var(--font-display); font-size:1.7rem; font-weight:600;
                   line-height:1.1; font-variant-numeric:tabular-nums; }
.riquadro .che{ color:var(--muted); font-size:.82rem; }

/* Un'avvertenza dentro un riquadro va a capo da sola e si vede: «da sostituire»,
   «da verificare» sono la ragione per cui quel numero si guarda. */
.riquadro .avviso{ display:block; margin-top:.15rem; padding:0; color:var(--accent-2);
                   font-weight:600; }

/* Tutti i riquadri della stessa fila alti uguali: senza, quelli con due righe di
   etichetta spingono in basso i vicini e la fila si legge come un errore. */
.riquadri > *{ flex:0 0 auto; }
.riquadri{ align-items:stretch; }

/* Il totale sta da solo, sopra i gruppi: è la risposta alla prima domanda, e
   metterlo in fila con gli altri lo faceva sembrare uno di loro. */
.totale{
  display:flex; flex-direction:column; gap:.15rem; align-items:flex-start;
  padding:1rem 1.2rem; border-radius:var(--radius);
  background:var(--accent); border:1px solid var(--accent); color:#fff;
}
a.totale:hover{ text-decoration:none; box-shadow:0 12px 28px -18px rgba(37,99,235,.7); }
.totale .numero{ font-family:var(--font-display); font-size:2.4rem; font-weight:600;
                 line-height:1; font-variant-numeric:tabular-nums; }
.totale .che{ color:rgba(255,255,255,.85); font-size:.9rem; }
.totale .ripartizione{ display:flex; flex-wrap:wrap; gap:.15rem .9rem; margin-top:.5rem;
                       color:rgba(255,255,255,.8); font-size:.82rem; }

/* I sottotitoli dei gruppi del riepilogo: più piccoli di un h2, perché dividono
   dentro una sezione invece di aprirne una nuova. */
h3{ font-family:var(--font-display); font-size:.95rem; font-weight:600;
    text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
    margin:1.4rem 0 .1rem; }

/* Impostazioni: la riga di un tipo spento resta leggibile ma si tira indietro. */
tr.spento{ opacity:.55; }
.riga.stretta{ gap:.4rem; align-items:center; }
.riga.stretta input, .riga.stretta select{ flex:0 1 11rem; }

/* Un interruttore: la casella e la parola che la spiega, appaiate.
   Serve una regola sua perché dentro una riga stretta le caselle prenderebbero
   gli undici rem dei campi di testo — giusto per quelli, assurdo per queste. */
.interruttore{ display:inline-flex; align-items:center; gap:.35rem;
               font-size:.9rem; color:var(--muted); white-space:nowrap; }
.riga.stretta .interruttore input{ flex:none; width:auto; margin:0; }
.galleria{ display:flex; flex-wrap:wrap; gap:.9rem; }
.disegno-nome{ display:inline-flex; align-items:center; gap:.35rem;
               color:var(--muted); font-size:.8rem; }
.disegno-nome .icona{ width:1.4em; height:1.4em; color:var(--text); }

/* Il logo del cliente accanto al nome, e nel riquadro in cui si carica.
   `object-fit: contain` e non `cover`: un logo tagliato non è più quel logo. */
.intestazione-cliente{ display:flex; align-items:flex-start; gap:1rem; }
.logo-cliente{ max-width:5.5rem; max-height:4rem; object-fit:contain;
               border-radius:var(--radius-sm); background:#fff;
               border:1px solid var(--line); padding:.3rem; flex:none; }
.riga-logo{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.logo-anteprima{ max-width:9rem; max-height:5rem; object-fit:contain;
                 border:1px solid var(--line); border-radius:var(--radius-sm);
                 background:#fff; padding:.4rem; }
.logo-assente{ color:var(--faint); font-size:.85rem; font-style:italic; }
.campo.larga{ flex:2 1 18rem; }
.campo.stretta{ flex:0 1 6rem; }
input[type=file]{ font-size:.9rem; color:var(--muted); }

/* Il vault.
   Il valore di un segreto compare solo dopo che qualcuno l'ha chiesto, e resta
   in una `code` che si svuota da sola. Non c'è nessuna regola che lo «nasconde»:
   una password nascosta dal foglio di stile è una password già consegnata a
   chiunque guardi il sorgente della pagina. */
table.segreti td{ vertical-align:top; }
.segreto{ display:inline-flex; align-items:center; gap:.5rem; }
.segreto .valore{ font-family:var(--font-mono); font-size:.9rem; padding:.15rem .45rem;
                  background:var(--surface-2); border:1px solid var(--line);
                  border-radius:var(--radius-sm); user-select:all; }
details.aggiungi{ margin-top:.8rem; }
details.aggiungi > summary{ color:var(--accent-2); font-size:.92rem; cursor:pointer; }

/* Ciò che gira su una macchina. Elenco fitto: sono nomi, non righe di tabella,
   e su un host con venti macchine virtuali un elenco arioso diventa una pagina. */
ul.ospitati{ list-style:none; margin:.4rem 0 0; padding:0;
             display:flex; flex-wrap:wrap; gap:.35rem .9rem; }
ul.ospitati li{ display:flex; align-items:center; gap:.35rem; }
ul.ospitati a{ display:inline-flex; align-items:center; gap:.3rem; }
ul.ospitati .sottotitolo{ font-size:.78rem; }

/* I legami, raggruppati per verso.

   Un elenco per gruppo e non una tabella: le colonne sarebbero quasi tutte vuote —
   le porte le ha solo un legame fisico, le note quasi nessuno — e una tabella di
   celle vuote si legge peggio di un elenco fitto.

   Il verso è l'intestazione del gruppo e va letto come una frase che continua nel
   nome sotto: «Alimenta · UPS-01». Per questo è piccolo e in maiuscoletto, non un
   titolo che compete col nome dell'apparato. */
h3.legame-verso{ display:flex; align-items:center; gap:.4rem;
                 font-family:var(--font-body); font-size:.78rem; font-weight:600;
                 text-transform:uppercase; letter-spacing:.06em;
                 color:var(--muted); margin:1.1rem 0 .1rem; }
h3.legame-verso:first-child{ margin-top:0; }
h3.legame-verso span{ font-weight:400; letter-spacing:0; text-transform:none; }

ul.legami{ list-style:none; margin:.3rem 0 0; padding:0;
           display:flex; flex-direction:column; gap:.3rem; }
ul.legami li{ display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; }
ul.legami a{ display:inline-flex; align-items:center; gap:.3rem; }
ul.legami .sottotitolo{ font-size:.78rem; }
/* Il pulsante per togliere resta piccolo e in fondo: si usa una volta ogni cento
   letture, e messo in evidenza sposterebbe l'occhio dalla cosa che conta. */
ul.legami form{ margin-left:auto; }
ul.legami form button{ font-size:.75rem; padding:.15rem .5rem; }

/* -----------------------------------------------------------------------------
   Le tabelle larghe scorrono dentro di sé invece di schiacciare le colonne.

   Condivisioni, backup e reti hanno cinque o sei colonne: su una finestra stretta
   `table{width:100%}` le comprime finché il testo va a capo lettera per lettera.
   Meglio una barra di scorrimento sulla tabella che una pagina che scorre in
   orizzontale tutta intera, portandosi via anche il menu.
   -------------------------------------------------------------------------- */
.tabella-larga{ overflow-x:auto; margin:.8rem 0; }
.tabella-larga > table{ margin:0; min-width:44rem; }

/* La risposta di una fonte, così come è arrivata.

   Scorre per conto suo in tutte e due le direzioni: un documento JSON non ha una
   larghezza né un'altezza che si possano prevedere, e lasciarlo allungare la pagina
   vorrebbe dire che per tornare all'elenco si scorre per venti schermate. Il tetto in
   altezza è alto abbastanza da leggerne un pezzo intero senza toccare niente. */
pre.grezzo{
  max-height:32rem; overflow:auto; margin:.6rem 0;
  padding:.7rem .9rem; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); color:var(--text);
  font-family:var(--font-mono); font-size:.8rem; line-height:1.45;

  /* Il testo **non** va a capo da solo: l'indentazione è l'unica cosa che rende
     leggibile un JSON annidato, e mandare a capo una riga lunga la distrugge. */
  white-space:pre; tab-size:2;
}

/* Il messaggio di una riga di giornale: lungo, e non si sa quanto.

   Va a capo — al contrario del JSON grezzo, dove l'indentazione è tutto — perché qui
   la riga è una frase e troncarla nasconderebbe proprio la parte che spiega il
   guasto. `break-word` e non `break-all`: uno stack trace ha percorsi lunghi che si
   spezzano dove capita, ma una parola intera resta leggibile. */
td.log-messaggio{
  white-space:pre-wrap; overflow-wrap:break-word; word-break:normal;
  max-width:min(72ch, 60vw); font-size:.78rem; line-height:1.4;
}

/* Impostazioni: il modulo di una riga sta su una riga sola. Con i campi a
   `flex:0 1 11rem` andava a capo due volte per ognuno dei quattordici tipi, e la
   tabella diventava un elenco di moduli invece che una tabella. */
.riga.stretta{ flex-wrap:nowrap; }
.riga.stretta input[type="text"]{ flex:1 1 8rem; min-width:6rem; }
.riga.stretta select{ flex:0 1 8.5rem; min-width:5.5rem; }

/* -----------------------------------------------------------------------------
   Su schermo stretto la barra in alto deve stare dentro.

   Misurata su un telefono: le quattro voci del menu chiedono 298 pixel e il menu
   della persona 134, quindi sotto i 470 la pagina scorreva in orizzontale — e con
   lei tutto il contenuto, non solo la barra. Le voci vanno a capo, il nome della
   persona sparisce e resta la sua iniziale: chi è lo sa già, e la freccia dice
   che il menu è lì.
   -------------------------------------------------------------------------- */
@media (max-width: 640px){
  .nav{ flex-wrap:wrap; gap:.5rem 1rem; }
  .voci{ order:2; flex-basis:100%; gap:1rem; font-size:.9rem; flex-wrap:wrap; }
  .io-nome{ display:none; }
  .container{ width:min(100% - 1.6rem, var(--maxw)); }
}

/* Più stretto ancora — un telefono piccolo — anche i moduli in riga si impilano
   invece di stringere i campi fino a renderli inservibili. */
@media (max-width: 480px){
  .riga{ gap:.7rem; }
  .riga .campo{ flex-basis:100%; }
  .riga.stretta{ flex-wrap:wrap; }
}