/* LogsApp — foglio di stile unico, nessuna dipendenza esterna.

   Il linguaggio è quello dei pannelli di amministrazione Microsoft 365: rail di
   navigazione a sinistra con sezioni espandibili, barra comandi sopra il
   contenuto, schede con intestazione. Non è imitazione fine a sé stessa — è la
   grammatica che chi amministra sistemi usa già ogni giorno, e che quindi non
   deve imparare.

   Nessun font e nessuna icona vengono scaricati. L'applicazione si consulta
   quando qualcosa è rotto, spesso da una rete isolata: una pagina che aspetta un
   CDN è inutilizzabile proprio nel momento in cui serve. Si usano le famiglie
   già presenti sui sistemi e icone SVG in linea.

   Il dato resta in monospazio ovunque: impronte, offset, righe di log e orari si
   confrontano a colpo d'occhio solo se le colonne sono allineate. */

:root {
  color-scheme: light dark;

  /* Superfici, dalla più profonda alla più in rilievo */
  --sfondo:       #f5f5f5;
  --superficie:   #ffffff;
  --superficie-2: #fafafa;
  --superficie-3: #f0f0f0;
  --rail:         #ffffff;
  --barra:        #ffffff;

  --bordo:        #e0e0e0;
  --bordo-forte:  #c7c7c7;

  --testo:        #1b1b1b;
  --testo-2:      #424242;
  --testo-3:      #707070;

  --brand:        #0f6cbd;
  --brand-scuro:  #0c5aa0;
  --brand-velo:   #eaf3fb;
  --brand-bordo:  #b4d6f5;

  --critico:      #b10e1c;
  --errore:       #c4314b;
  --avvertenza:   #9a6700;
  --nota:         #0f6cbd;
  --info:         #0e7a6b;
  --debug:        #8a8a8a;
  --buono:        #0e700e;

  --ombra:    0 1px 2px rgba(0,0,0,.09), 0 0 2px rgba(0,0,0,.06);
  --ombra-16: 0 4px 10px rgba(0,0,0,.12), 0 0 2px rgba(0,0,0,.08);

  --font: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont,
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", -apple-system,
          BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono",
          Menlo, "DejaVu Sans Mono", monospace;

  --r: 6px;     /* raggio delle schede */
  --r-s: 4px;   /* raggio dei controlli */
  --rail-w: 244px;
  --barra-h: 48px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) {
    --sfondo:       #0f0f0f;
    --superficie:   #1b1b1b;
    --superficie-2: #212121;
    --superficie-3: #292929;
    --rail:         #141414;
    --barra:        #1b1b1b;

    --bordo:        #333333;
    --bordo-forte:  #454545;

    --testo:        #f3f3f3;
    --testo-2:      #cfcfcf;
    --testo-3:      #9a9a9a;

    --brand:        #479ef5;
    --brand-scuro:  #62abf5;
    --brand-velo:   #10243a;
    --brand-bordo:  #21496f;

    --critico:      #ff8a9b;
    --errore:       #f98980;
    --avvertenza:   #e0b040;
    --nota:         #479ef5;
    --info:         #4fc4b0;
    --debug:        #9a9a9a;
    --buono:        #57c168;

    --ombra:    0 1px 2px rgba(0,0,0,.45), 0 0 2px rgba(0,0,0,.35);
    --ombra-16: 0 4px 12px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.4);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font: 14px/1.5 var(--font);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

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

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

.ico { flex: none; vertical-align: middle; }

/* ============================================================ barra in alto */

.barra-alta {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  height: var(--barra-h); padding: 0 12px 0 16px;
  background: var(--barra); border-bottom: 1px solid var(--bordo);
}

.marchio {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  color: var(--testo); white-space: nowrap; flex: none;
}
.marchio:hover { text-decoration: none; }
.marchio span {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--testo-3);
  border: 1px solid var(--bordo-forte); border-radius: 3px; padding: 1px 6px; margin-left: 4px;
}

.cerca-globale {
  flex: 1; max-width: 520px; margin: 0 auto; position: relative;
  display: flex; align-items: center;
}
.cerca-globale .ico { position: absolute; left: 10px; color: var(--testo-3); pointer-events: none; }
.cerca-globale input {
  width: 100%; height: 32px; padding: 0 12px 0 32px;
  background: var(--superficie-3); color: var(--testo);
  border: 1px solid transparent; border-radius: var(--r-s);
  font: inherit; font-size: 13px;
}
.cerca-globale input:hover { border-color: var(--bordo-forte); }
.cerca-globale input:focus { background: var(--superficie); border-color: var(--brand); outline: none; }

.utente-box { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.utente-box form { display: flex; }
.nome-utente { font-size: 13px; color: var(--testo-2); white-space: nowrap; }
.pillola-ruolo {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 7px; border-radius: 10px;
  background: var(--superficie-3); color: var(--testo-2);
}
.pillola-ruolo.admin { background: var(--brand-velo); color: var(--brand); }

.btn-icona {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--r-s);
  background: none; border: none; color: var(--testo-2); cursor: pointer; padding: 0;
}
.btn-icona:hover { background: var(--superficie-3); color: var(--testo); text-decoration: none; }

/* ================================================================== guscio */

.guscio { display: flex; align-items: flex-start; min-height: calc(100vh - var(--barra-h)); }
.guscio.senza-rail { justify-content: center; }

.rail {
  width: var(--rail-w); flex: none;
  position: sticky; top: var(--barra-h);
  height: calc(100vh - var(--barra-h)); overflow-y: auto;
  background: var(--rail); border-right: 1px solid var(--bordo);
  padding: 8px 0 20px; display: flex; flex-direction: column;
}

.rail .voce, .rail summary, .rail .sotto {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 16px; font-size: 13.5px; color: var(--testo-2);
  cursor: pointer; border-left: 3px solid transparent; user-select: none;
}
.rail .voce:hover, .rail summary:hover, .rail .sotto:hover {
  background: var(--superficie-3); color: var(--testo); text-decoration: none;
}
.rail .voce.attivo, .rail .sotto.attivo {
  background: var(--superficie-3); color: var(--testo);
  border-left-color: var(--brand); font-weight: 600;
}
.rail .voce.attivo .ico { color: var(--brand); }

.rail summary { list-style: none; }
.rail summary::-webkit-details-marker { display: none; }
/* Il chevron ruota all'apertura: dice se la sezione è espansa senza etichette. */
.rail summary::after {
  content: ""; margin-left: auto; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform .12s ease; opacity: .7;
}
.rail details[open] > summary::after { transform: rotate(45deg); }

.rail .sotto {
  padding-left: 46px; font-size: 13px; gap: 8px;
}
.etichetta-sotto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conteggio {
  margin-left: auto; font-style: normal; font-size: 11px; font-weight: 600;
  font-family: var(--mono);
}
.vuoto-rail { color: var(--testo-3); font-style: italic; cursor: default; }
.vuoto-rail:hover { background: none; }

/* Raggruppamento dei server: gruppo (il cliente), sottogruppo (il prodotto),
   server. Il rientro cresce di poco a ogni livello — quanto basta a leggere la
   gerarchia senza spingere i nomi contro il bordo di una barra stretta. */
.rail .sotto.liv1 { padding-left: 46px; }
.rail .sotto.liv2 { padding-left: 54px; }
.rail .sotto.liv3 { padding-left: 66px; }
.rail .sottogruppo > summary { padding-left: 30px; font-weight: 500; }
.rail .sottogruppo > summary .ico { color: var(--testo-3); }
.rail .titolo-sottogruppo {
  padding: 8px 14px 3px 54px; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--testo-3);
}

.rail-piede {
  margin: auto 16px 0; padding-top: 18px; font-size: 11px; line-height: 1.45;
  color: var(--testo-3); border-top: 1px solid var(--bordo);
}

.rail-toggle { position: absolute; }
.solo-stretto { display: none; }

main { flex: 1; min-width: 0; padding: 20px 24px 48px; max-width: 1560px; }
.senza-rail main { max-width: 900px; }

/* =========================================================== barra comandi */

.barra-comandi {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 6px; margin-bottom: 18px;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--r);
  box-shadow: var(--ombra);
}
.barra-comandi form { display: contents; }
.comando {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 11px; border-radius: var(--r-s);
  background: none; border: none; color: var(--testo); cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 400; white-space: nowrap;
  text-transform: none; letter-spacing: normal;
}
.comando:hover { background: var(--superficie-3); text-decoration: none; }
.comando .ico { color: var(--brand); }
.comando.principale { background: var(--brand); color: #fff; font-weight: 600; }
.comando.principale .ico { color: #fff; }
.comando.principale:hover { background: var(--brand-scuro); }
.separatore-comandi { width: 1px; height: 20px; background: var(--bordo); margin: 0 6px; }
/* L'azione principale va a destra finche' la barra sta su una riga. Se va a
   capo, `margin-left:auto` la lascerebbe orfana in fondo a una riga vuota. */
.spinta { margin-left: auto; }
@media (max-width: 1240px) { .spinta { margin-left: 0; } }

/* ============================================================== tipografia */

h1 {
  font-family: var(--font-display); font-size: 26px; font-weight: 600;
  margin: 0 0 4px; line-height: 1.25; letter-spacing: -.01em;
}
h2 {
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
  margin: 28px 0 12px;
}
h3 { font-size: 13.5px; font-weight: 600; margin: 0 0 10px; color: var(--testo); }
.sottotitolo { color: var(--testo-2); margin: 0 0 20px; font-size: 13.5px; max-width: 86ch; }
.sottotitolo strong { color: var(--testo); font-weight: 600; }

/* ================================================================= schede */

.pannello {
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--r); box-shadow: var(--ombra);
  padding: 16px 18px; margin-bottom: 16px;
}
.pannello > h2:first-child, .pannello > h3:first-child { margin-top: 0; }

.griglia { display: grid; gap: 16px; }
.griglia.c2 { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.griglia.c3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.griglia.c4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ============================================================= indicatori */

.cifra {
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--r); box-shadow: var(--ombra); padding: 14px 16px;
  position: relative; overflow: hidden;
}
/* Filetto di stato sul bordo sinistro: si coglie con la coda dell'occhio
   scorrendo una riga di riquadri, cosa che un numero colorato non fa. */
.cifra::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--bordo-forte);
}
.cifra .etichetta { font-size: 12px; color: var(--testo-3); font-weight: 600; }
.cifra .valore {
  font-family: var(--font-display); font-size: 30px; font-weight: 600;
  line-height: 1.15; margin-top: 6px; letter-spacing: -.02em;
}
.cifra .nota { font-size: 12px; color: var(--testo-3); margin-top: 3px; }
.cifra.critico::before { background: var(--critico); }
.cifra.critico .valore { color: var(--critico); }
.cifra.attenzione::before { background: var(--avvertenza); }
.cifra.attenzione .valore { color: var(--avvertenza); }
.cifra.buono::before { background: var(--buono); }

/* ================================================================ tabelle */

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left; font-size: 12px; font-weight: 600; color: var(--testo-3);
  padding: 8px 14px 8px 0; border-bottom: 1px solid var(--bordo); white-space: nowrap;
}
th:last-child, td:last-child { padding-right: 0; }
td { padding: 9px 14px 9px 0; border-bottom: 1px solid var(--bordo); vertical-align: top; }
tbody tr:hover { background: var(--superficie-2); }
td.num, th.num { text-align: right; }
.tabella-wrap { overflow-x: auto; }

/* ================================================================ gravità */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  padding: 2px 8px; border-radius: 10px;
  background: var(--superficie-3); color: var(--testo-2);
}
.badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none;
}
.sev-critical { color: var(--critico); }
.sev-error    { color: var(--errore); }
.sev-warning  { color: var(--avvertenza); }
.sev-notice   { color: var(--nota); }
.sev-info     { color: var(--info); }
.sev-debug    { color: var(--debug); }
.sev-none, .sev-ignota, .sev-unknown { color: var(--testo-3); }
.sev-ok       { color: var(--buono); }

td .badge, .segnalazione .badge { text-transform: lowercase; }
.punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* =========================================================== segnalazioni */

.segnalazione {
  background: var(--superficie); border: 1px solid var(--bordo);
  border-left: 3px solid currentColor; border-radius: var(--r);
  box-shadow: var(--ombra); padding: 12px 16px; margin-bottom: 10px;
}
.segnalazione .intestazione { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.segnalazione .titolo { font-size: 14px; font-weight: 600; color: var(--testo); }
.segnalazione .motivo { color: var(--testo-2); font-size: 13px; margin-top: 5px; max-width: 92ch; }
.segnalazione .motivo.sev-error { color: var(--errore); }
.segnalazione .meta {
  color: var(--testo-3); font-size: 12px; margin-top: 8px;
  display: flex; gap: 16px; flex-wrap: wrap;
}

/* ================================================================ grafici */

svg.grafico { width: 100%; height: auto; display: block; }
.barra-tot { fill: var(--bordo-forte); }
.barra-err { fill: var(--errore); }
text.asse { fill: var(--testo-3); font-size: 9px; font-family: var(--mono); }
svg.sparkline { width: 120px; height: 28px; }
svg.sparkline polyline { fill: none; stroke: var(--brand); stroke-width: 1.5; }

svg.donut { width: 96px; height: 96px; }
.donut-tot { fill: var(--testo); font-size: 16px; font-weight: 600; font-family: var(--font-display); }
.fetta.sev-critical { stroke: var(--critico); }
.fetta.sev-error    { stroke: var(--errore); }
.fetta.sev-warning  { stroke: var(--avvertenza); }
.fetta.sev-notice   { stroke: var(--nota); }
.fetta.sev-info     { stroke: var(--info); }
.fetta.sev-debug    { stroke: var(--debug); }
.fetta.sev-ignota   { stroke: var(--bordo-forte); }

.gauge {
  display: inline-flex; align-items: center; position: relative;
  width: 108px; height: 18px; background: var(--superficie-3);
  border-radius: 9px; overflow: hidden;
}
.gauge-barra { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 9px; }
.gauge-barra.livello-ok { background: var(--buono); opacity: .32; }
.gauge-barra.livello-attenzione { background: var(--avvertenza); opacity: .42; }
.gauge-barra.livello-critico { background: var(--critico); opacity: .46; }
.gauge-testo {
  position: relative; z-index: 1; width: 100%; text-align: center;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
}
.gauge-na { color: var(--testo-3); font-size: 12px; }

/* =================================================================== dati */

code, pre, .mono, .log { font-family: var(--mono); }
.messaggio { font-family: var(--mono); font-size: 12px; word-break: break-word; max-width: 900px; }
code {
  font-size: .92em; background: var(--superficie-3);
  padding: 1px 5px; border-radius: 3px; border: 1px solid var(--bordo);
}
pre.grezzo {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.65;
  background: var(--superficie-2); border: 1px solid var(--bordo); border-radius: var(--r-s);
  padding: 14px 16px; overflow-x: auto; margin: 0;
  white-space: pre-wrap; word-break: break-all;
}
.riga-evidenziata { background: var(--brand-velo); }
.riga-evidenziata td { border-bottom-color: var(--brand-bordo); }

.impronta { font-family: var(--mono); font-size: 11px; color: var(--testo-2); word-break: break-all; }
time, .quando { font-family: var(--mono); font-size: 11.5px; color: var(--testo-3); white-space: nowrap; }

/* =================================================================== form */

form.filtri { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
label.campo { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--testo-2); font-weight: 600; }

input[type=text], input[type=password], input[type=search], input[type=date],
input[type=datetime-local], select, textarea {
  background: var(--superficie); color: var(--testo);
  border: 1px solid var(--bordo-forte); border-bottom-width: 1px; border-radius: var(--r-s);
  padding: 7px 10px; font: inherit; font-size: 13px; font-weight: 400; min-width: 0;
}
input[type=search], input[type=text] { font-family: var(--mono); font-size: 12.5px; }
input:hover, select:hover, textarea:hover { border-color: var(--testo-3); }
/* Fluent segnala il fuoco con un filetto spesso sul bordo inferiore: si vede
   anche quando il campo è dentro una tabella fitta. */
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--bordo-forte);
  border-bottom: 2px solid var(--brand); padding-bottom: 6px;
}
input[type=text].larga, input[type=search].larga { min-width: 300px; flex: 1; }
input[type=checkbox] { accent-color: var(--brand); width: 15px; height: 15px; }

button, .bottone {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--brand); color: #fff;
  border: 1px solid transparent; border-radius: var(--r-s);
  padding: 7px 16px; font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
button:hover, .bottone:hover { background: var(--brand-scuro); text-decoration: none; }
button.neutro, .bottone.neutro {
  background: var(--superficie); color: var(--testo); border-color: var(--bordo-forte);
}
button.neutro:hover, .bottone.neutro:hover { background: var(--superficie-3); }
button.pericolo { background: var(--superficie); color: var(--critico); border-color: var(--critico); }
button.pericolo:hover { background: var(--critico); color: #fff; }
button.minuto { padding: 3px 9px; font-size: 12px; font-weight: 400; }

/* ================================================================= avvisi */

/* Deve restare un blocco di testo, non un contenitore flex: con `display:flex`
   ogni <strong> e ogni <a> dentro la frase diventa una colonna a sé e il
   messaggio si spezza in tronconi affiancati. */
.avviso {
  padding: 12px 14px; margin-bottom: 16px; font-size: 13px;
  background: var(--superficie); border: 1px solid var(--bordo);
  border-left: 3px solid currentColor; border-radius: var(--r); box-shadow: var(--ombra);
}
.avviso.errore { color: var(--critico); }
.avviso.ok { color: var(--buono); }
.avviso.nota { color: var(--nota); }
.avviso strong, .avviso code, .avviso pre { color: var(--testo); }

.vuoto { color: var(--testo-3); font-size: 13px; margin: 10px 0; }

/* ================================================================ accesso */

.accesso-pagina { display: grid; place-items: center; min-height: 100vh; padding: 24px; background: var(--sfondo); }
.accesso-scheda {
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: 8px; box-shadow: var(--ombra-16);
  padding: 34px 32px; width: 100%; max-width: 400px;
}
.accesso-scheda .marchio { font-size: 22px; margin-bottom: 2px; }
.accesso-scheda form { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.accesso-scheda button { justify-content: center; height: 36px; }

/* =========================================================== impaginazione */

.paginazione { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 20px; font-size: 13px; }

footer.principale {
  color: var(--testo-3); font-size: 12px; text-align: center;
  padding: 24px; border-top: 1px solid var(--bordo); margin-top: 32px;
}

/* ================================================================ stretto */

@media (max-width: 1000px) {
  .solo-stretto { display: inline-flex; }
  .cerca-globale { max-width: none; margin: 0; }
  .nome-utente { display: none; }

  .rail {
    position: fixed; top: var(--barra-h); left: 0; z-index: 30;
    transform: translateX(-100%); transition: transform .16s ease;
    box-shadow: var(--ombra-16);
  }
  /* Il rail scorre dentro solo quando la casella è spuntata: niente script. */
  .rail-toggle:checked ~ .guscio .rail { transform: translateX(0); }
  main { padding: 16px; }
}

@media (max-width: 640px) {
  h1 { font-size: 21px; }
  .cifra .valore { font-size: 25px; }
  main { padding: 12px; }
  .barra-alta { padding: 0 8px; gap: 8px; }
  .marchio span { display: none; }
}

/* ------------------------------------------------ anagrafica di un server

   Il pannello si apre con una casella nascosta, come il rail su schermo
   stretto: nessuno script, e funziona anche se il JavaScript e' bloccato --
   cosa non peregrina su una macchina di chi fa sicurezza. */
.interruttore-pannello { position: absolute; opacity: 0; pointer-events: none; }
.pannello-anagrafica { display: none; margin-bottom: 20px; }
.interruttore-pannello:checked + .pannello-anagrafica { display: block; }

.griglia-campi {
  display: grid; gap: 14px; margin-bottom: 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.griglia-campi label, .campo-largo {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12.5px; font-weight: 600; color: var(--testo-2);
}
.griglia-campi input, .campo-largo textarea, .campo-largo input {
  font: inherit; font-weight: 400; color: var(--testo);
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: 6px; padding: 7px 10px;
}
.griglia-campi input:focus, .campo-largo textarea:focus {
  outline: 2px solid var(--brand); outline-offset: -1px; border-color: transparent;
}
.pannello-anagrafica .azioni { display: flex; gap: 10px; margin-top: 14px; }

/* La nota dell'operatore: si distingue dai dati misurati, perche' e' un'opinione
   e non una misura. */
.nota-server {
  margin: -8px 0 20px; padding: 9px 13px; font-size: 13.5px;
  color: var(--testo-2); background: var(--superficie-2);
  border-left: 3px solid var(--bordo); border-radius: 0 6px 6px 0;
}

h1 .btn-icona { vertical-align: middle; margin-left: 6px; }

/* ------------------------------------------------- verifica in due passaggi */

.attivazione-2fa {
  display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap;
  margin-bottom: 22px;
}
/* Il QR resta su fondo bianco anche in tema scuro: i lettori si aspettano
   moduli scuri su chiaro, e invertirlo fa fallire la scansione su diversi
   telefoni. Una cornice bianca costa meno di un codice che non si legge. */
.attivazione-2fa .qr {
  background: #fff; padding: 10px; border-radius: var(--r);
  border: 1px solid var(--bordo); line-height: 0;
}
.attivazione-2fa .qr svg { width: 168px; height: 168px; display: block; }

code.segreto {
  font-family: var(--mono); font-size: 15px; letter-spacing: .06em;
  background: var(--superficie-3); padding: 7px 11px; border-radius: var(--r-s);
  display: inline-block; user-select: all;
}

.codici-recupero {
  display: grid; gap: 8px; margin-top: 14px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.codici-recupero code {
  font-family: var(--mono); font-size: 14px; letter-spacing: .05em;
  background: var(--superficie-3); border: 1px solid var(--bordo);
  border-radius: var(--r-s); padding: 8px 10px; text-align: center;
  user-select: all;
}

.riga-campi { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.riga-campi input {
  font: inherit; color: var(--testo); background: var(--superficie);
  border: 1px solid var(--bordo); border-radius: var(--r-s); padding: 7px 10px;
  min-width: 190px;
}
.riga-azione { cursor: pointer; font-weight: 600; color: var(--brand); }
.riga-azione:hover { text-decoration: underline; }

/* Lo scudo spento dice, senza una riga di testo in piu', che il secondo
   fattore non e' attivo: chi non lo nota non perde nulla, chi lo nota sa. */
.btn-icona.due-fattori-spenti { color: var(--testo-3); opacity: .55; }
.btn-icona.due-fattori-spenti:hover { opacity: 1; }