/* ============================================
   ReadyCode – Stile macOS minimale
   ============================================ */
:root {
  --bg: #f5f5f7;
  --sidebar-bg: rgba(243, 243, 246, 0.94);
  --card: #ffffff;
  --testo: #1d1d1f;
  --muto: #86868b;
  --bordo: #e4e4e9;
  --accento: #0071e3;
  --accento-hover: #0077ed;
  --verde: #34c759;
  --rosso: #ff3b30;
  --arancio: #ff9500;
  --raggio: 12px;
  --ombra: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* Altezza piena anche su iPad e telefoni (Fix #204 e #206).
   Su iOS la misura "100%" NON corrisponde all'altezza visibile e sotto resta scoperta una
   striscia. Si usa "lvh", cioe' l'altezza MASSIMA dello schermo (barre del browser chiuse):
   copre sempre tutto e, soprattutto, e' un valore FERMO. La misura "dvh" invece cambia in
   continuazione mentre le barre si aprono e si chiudono, e faceva lampeggiare la pagina.
   Le righe sono in ordine: chi non capisce l'ultima misura usa quella sopra. */
html, body { height: 100%; }
html, body { height: 100vh; }
html, body { height: 100lvh; }
/* Nella schermata di accesso l'altezza è MINIMA, non fissa: così il riquadro arriva sempre
   fino in fondo allo schermo anche se le barre del browser si aprono o si chiudono. (Fix #205) */
html.pag-login, body.pag-login {
  height: auto; min-height: 100%;
  /* niente rimbalzo: sulla schermata di accesso mancava, e tirando la pagina si intravedeva
     l'area bianca oltre il contenuto (Fix #206) */
  overscroll-behavior: none;
}
html.pag-login, body.pag-login { min-height: 100vh; }
html.pag-login, body.pag-login { min-height: 100svh; }

/* La schermata di accesso adotta la stessa struttura della scrivania, che sull'iPad ha
   risolto: il corpo è ANCORATO allo schermo e non scorre, e sotto c'è un telo che sborda
   oltre i bordi. Se lo spazio non basta (tastiera aperta) il contenuto scorre al suo interno. */
body.pag-login {
  position: fixed;
  inset: 0;
  height: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* ============================================================================
   Fix #473 — IL TELO SOTTO LA SCHERMATA DI ACCESSO NON E' PIU' BIANCO.

   Era bianco per un motivo che aveva senso quando fu scritto: su iPad, tirando la
   pagina, si intravedeva l'area del browser, e il bianco combaciava con la sua barra
   (Fix #206). Ma un telo bianco perdona zero: basta che il contenuto non arrivi in
   fondo di qualche punto e si vede una striscia chiara netta.
   Ed e' quello che succedeva. Misurato sullo screenshot del 3 agosto: il contenuto
   finisce e sotto restano DICIANNOVE righe di bianco pieno su tutta la larghezza.

   Adesso il telo ha lo stesso blu scuro del cielo stellato. Cosi':
     · se resta uno scarto di qualche punto, e' dello stesso colore e non si vede;
     · tirando la pagina su iPad si intravede lo scuro invece del bianco, che sta
       molto meglio del bianco su una schermata notturna.
   E' la stessa cura che al Fix #201 ha tolto la linea bianca in fondo alla
   scrivania: li' il problema era identico, una pagina senza colore sotto.
   ============================================================================ */
body.pag-login > #telo-sfondo {
  position: fixed;
  top: -300px; right: -300px; bottom: -300px; left: -300px;
  z-index: -1;
  pointer-events: none;
  background: #0b1224;          /* lo stesso scuro del cielo: nessuno scarto visibile */
}
/* il colore pieno sta in fondo al foglio: qui verrebbe azzerato dalle scorciatoie
   «background:» dichiarate piu' avanti, che riscrivono anche il colore */
body { font-family: var(--font); background: var(--bg); color: var(--testo); font-size: calc(14.0px * var(--sc-txt-fin, 1)); -webkit-font-smoothing: antialiased; }
a { color: var(--accento); text-decoration: none; }

.app { display: flex; height: 100vh; overflow: hidden; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: 232px; flex-shrink: 0; display: flex; flex-direction: column;
  background: var(--sidebar-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-right: 1px solid var(--bordo); padding: 14px 10px;
}
.traffic { display: flex; gap: 8px; padding: 4px 8px 14px; }
.traffic span { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.t-red { background: #ff5f57; } .t-yellow { background: #febc2e; } .t-green { background: #28c840; }

.brand { font-size: calc(17.0px * (0.5 + var(--sc-txt-tit, 1) / 2)); font-weight: 700; letter-spacing: -0.3px; padding: 0 10px 16px; }

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 8px; color: var(--testo); font-weight: 500; font-size: calc(13.5px * var(--sc-txt-fin, 1));
  transition: background .15s ease;
}
.nav-item svg { color: var(--muto); flex-shrink: 0; }
.nav-item:hover { background: rgba(0,0,0,.05); }
.nav-item.attivo { background: var(--accento); color: #fff; }
.nav-item.attivo svg { color: #fff; }

.sidebar-footer { border-top: 1px solid var(--bordo); padding-top: 12px; }
.utente { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #6e8efb, #0071e3);
  color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: calc(14.0px * var(--sc-txt-fin, 1));
}
.utente-nome { font-weight: 600; font-size: calc(13.0px * var(--sc-txt-fin, 1)); }
.utente-esci { font-size: calc(12.0px * var(--sc-txt-fin, 1)); color: var(--muto); }
.utente-esci:hover { color: var(--rosso); }

/* ---------- Main ---------- */
.main { flex: 1; overflow-y: auto; }
.topbar {
  position: sticky; top: 0; z-index: 50; height: 52px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 28px; background: rgba(255,255,255,.75);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--bordo);
}
.titolo-pagina { font-size: calc(19.0px * (0.5 + var(--sc-txt-tit, 1) / 2)); font-weight: 700; letter-spacing: -0.4px; }
.data-oggi { color: var(--muto); font-size: calc(13.0px * var(--sc-txt-fin, 1)); }
.contenuto { padding: 24px 28px 60px; max-width: 1200px; }

/* ---------- Card e griglie ---------- */
.card { background: var(--card); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); padding: 20px; margin-bottom: 20px; }
.card-titolo { font-size: calc(15.0px * var(--sc-txt-fin, 1)); font-weight: 700; margin-bottom: 14px; letter-spacing: -0.2px; }
.griglia-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat { background: var(--card); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); padding: 18px 20px; }
.stat-etichetta { color: var(--muto); font-size: calc(12.5px * var(--sc-txt-fin, 1)); font-weight: 500; margin-bottom: 6px; }
.stat-valore { font-size: calc(26.0px * (0.5 + var(--sc-txt-tit, 1) / 2)); font-weight: 700; letter-spacing: -0.6px; }
.stat-valore.verde { color: var(--verde); } .stat-valore.rosso { color: var(--rosso); } .stat-valore.arancio { color: var(--arancio); }

/* ---------- Tabelle ---------- */
.tabella-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: calc(13.5px * var(--sc-txt-fin, 1)); }
th { text-align: left; color: var(--muto); font-weight: 600; font-size: calc(12.0px * var(--sc-txt-cmd, 1)); text-transform: uppercase; letter-spacing: .4px; padding: 10px 12px; border-bottom: 1px solid var(--bordo); }
td { padding: 11px 12px; border-bottom: 1px solid #f0f0f3; vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fafafc; }
.td-destra, .th-destra { text-align: right; }
.td-azioni { text-align: right; white-space: nowrap; }

/* ---------- Badge ---------- */
.badge { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: calc(11.5px * var(--sc-txt-fin, 1)); font-weight: 600; }
.badge-verde { background: rgba(52,199,89,.12); color: #1e9e4a; }
.badge-rosso { background: rgba(255,59,48,.1); color: var(--rosso); }
.badge-arancio { background: rgba(255,149,0,.12); color: #c77700; }
.badge-grigio { background: rgba(0,0,0,.06); color: var(--muto); }
.badge-blu { background: rgba(0,113,227,.1); color: var(--accento); }

/* ---------- Bottoni ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--bordo); background: #fff; color: var(--testo);
  padding: 8px 16px; border-radius: 9px; font-size: calc(13.5px * var(--sc-txt-cmd, 1)); font-weight: 600; font-family: var(--font);
  transition: all .15s ease;
}
.btn:hover { background: #f7f7f9; }
.btn-primario { background: var(--accento); border-color: var(--accento); color: #fff; }
.btn-primario:hover { background: var(--accento-hover); }
.btn-pericolo { color: var(--rosso); }
.btn-pericolo:hover { background: rgba(255,59,48,.06); border-color: rgba(255,59,48,.3); }
.btn-piccolo { padding: 5px 11px; font-size: calc(12.5px * var(--sc-txt-cmd, 1)); border-radius: 7px; }
.btn-icona { border: none; background: none; font-size: calc(18.0px * (0.5 + var(--sc-txt-tit, 1) / 2)); cursor: pointer; }

/* ---------- Form ---------- */
/* ============================================================================
   Fix #465 — I MODULI HANNO AL MASSIMO DUE COLONNE.

   Prima le colonne erano quante ce ne stavano: su una finestra larga un modulo
   poteva aprirsi su quattro o cinque, e l'occhio non sapeva più dove andare a capo
   — si legge peggio di due colonne larghe.

   COME SI OTTIENE. Ogni colonna deve essere larga almeno metà dello spazio (meno
   metà della distanza fra le due): così una terza non ci sta mai, per costruzione.
   Il «max» con i 220 punti tiene il vecchio limite: quando la finestra è stretta e
   metà non basta, si torna a una colonna sola invece di schiacciarle.

   PERCHÉ NON UNA REGOLA LEGATA ALLA LARGHEZZA DELLO SCHERMO: qui i moduli stanno
   dentro le finestre, e una finestra può essere stretta anche su un monitor grande.
   La misura deve venire dal contenitore, non dallo schermo.

   La prima riga resta come rete per i browser che non conoscono «max»: lì vale il
   comportamento di prima, che è comunque leggibile.
   ============================================================================ */
.form-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.form-griglia { grid-template-columns: repeat(auto-fit, minmax(max(220px, calc(50% - 7px)), 1fr)); }
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo label { font-size: calc(12.5px * var(--sc-txt-cmd, 1)); font-weight: 600; color: var(--muto); }
.campo input, .campo select, .campo textarea {
  font-family: var(--font); font-size: calc(14.0px * var(--sc-txt-cmd, 1)); padding: 9px 12px;
  border: 1px solid var(--bordo); border-radius: 9px; background: #fff; color: var(--testo);
  transition: border-color .15s, box-shadow .15s; width: 100%;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--accento); box-shadow: 0 0 0 3px rgba(0,113,227,.15);
}
.form-azioni { margin-top: 18px; display: flex; gap: 10px; justify-content: flex-end; }

.barra-azioni { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.barra-azioni .cerca { flex: 1; min-width: 200px; }
.barra-azioni .cerca input {
  width: 100%; padding: 9px 14px; border: 1px solid var(--bordo); border-radius: 10px;
  font-family: var(--font); font-size: calc(14.0px * var(--sc-txt-cmd, 1)); background: #fff;
}
.barra-azioni .cerca input:focus { outline: none; border-color: var(--accento); box-shadow: 0 0 0 3px rgba(0,113,227,.15); }

/* ---------- Modale ---------- */
.modale-sfondo {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35);
  backdrop-filter: blur(3px); z-index: 2000; align-items: flex-start; justify-content: center; padding: 6vh 16px;
}
.modale-sfondo.aperta { display: flex; }
.modale {
  background: #fff; border-radius: 14px; width: 100%; max-width: 640px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25); overflow: hidden;
  animation: modale-in .18s ease;
}
@keyframes modale-in { from { transform: scale(.97) translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.modale-testa { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--bordo); }
.modale-testa h3 { font-size: calc(16.0px * var(--sc-txt-fin, 1)); font-weight: 700; }
.modale-corpo { padding: 22px; max-height: 70vh; overflow-y: auto; }
.chiudi { border: none; background: rgba(0,0,0,.05); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: calc(14.0px * var(--sc-txt-fin, 1)); color: var(--muto); }
.chiudi:hover { background: rgba(0,0,0,.1); }

/* ---------- Toast ---------- */
.toast {
  padding: 12px 18px; border-radius: 10px; margin-bottom: 18px; font-weight: 500; font-size: calc(13.5px * var(--sc-txt-sys, 1));
  animation: modale-in .2s ease;
}
.toast-ok { background: rgba(52,199,89,.12); color: #1e7e3e; border: 1px solid rgba(52,199,89,.25); }
.toast-errore { background: rgba(255,59,48,.08); color: #c62b22; border: 1px solid rgba(255,59,48,.25); }
.toast-info { background: rgba(0,113,227,.08); color: #0058b0; border: 1px solid rgba(0,113,227,.2); }

/* ---------- Login ---------- */
.login-pagina {
  min-height: 100vh;
  /* "svh" = altezza dello schermo con le barre del browser APERTE, cioè la più piccola:
     così la schermata non diventa mai più alta del visibile e la pagina non scorre affatto.
     Quel poco che eventualmente resta scoperto in fondo ha già la stessa tinta. (Fix #206) */
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  /* Fix #474 — QUI C'ERA UNA SFUMATURA CHE FINIVA IN BIANCO PURO, ed è la storia di
     questa striscia. Al Fix #208 la schermata di accesso era CHIARA, e su iPad Edge
     disegna sotto la pagina una sua barra bianca: si fece finire la nostra sfumatura
     nello stesso bianco, così i due combaciavano e la riga spariva.
     Poi la schermata è diventata notturna (Fix #431) e quel bianco non combacia più
     con niente — anzi, è proprio lui che si vedrebbe.
     La riga era già annullata da quella qui sotto, quindi cambiarla non sposta nulla
     di quello che si vede: serve a non lasciare una trappola armata. Se un domani
     quel «transparent» venisse tolto, ci si ritroverebbe il bianco addosso senza
     capire da dove arriva. Adesso, nel caso, si ritroverebbe lo scuro giusto. */
  background: linear-gradient(180deg, #0b1e45 0%, #071231 62%, #04091a 100%); padding: 20px;
}
/* Sotto la schermata di accesso ci va una TINTA UNITA identica al colore in cui finisce la
   sfumatura (#e8ecf4). Mettere la stessa sfumatura su due riquadri di altezza diversa creava
   una riga visibile nel punto in cui si incontravano: con la tinta unita non può succedere,
   perché il colore combacia esattamente con il fondo della sfumatura. (Fix #205) */
html.pag-login, body.pag-login { background: #ffffff; }
.login-box {
  width: 100%; max-width: 380px; background: rgba(255,255,255,.85);
  backdrop-filter: blur(30px); border: 1px solid rgba(255,255,255,.7);
  border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.12); padding: 36px 32px;
}
.login-logo { text-align: center; font-size: 22px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 4px; }
.login-sotto { text-align: center; color: var(--muto); font-size: 13px; margin-bottom: 26px; }
.login-box .campo { margin-bottom: 14px; }
.login-box .btn-primario { width: 100%; justify-content: center; padding: 11px; font-size: 14.5px; margin-top: 6px; }

/* ---------- Varie ---------- */
.vuoto { text-align: center; color: var(--muto); padding: 36px 16px; font-size: calc(13.5px * var(--sc-txt-fin, 1)); }
.suggerimento { font-size: calc(12.5px * var(--sc-txt-fin, 1)); color: var(--muto); line-height: 1.5; }
.separatore { height: 1px; background: var(--bordo); margin: 18px 0; }
.stato-punto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.punto-verde { background: var(--verde); } .punto-rosso { background: var(--rosso); } .punto-grigio { background: #c7c7cc; }
.solo-mobile { display: none; }
.testo-muto { color: var(--muto); }
.mono { font-variant-numeric: tabular-nums; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .solo-mobile { display: inline-flex; }
  .sidebar { position: fixed; left: -240px; top: 0; bottom: 0; z-index: 200; transition: left .22s ease; box-shadow: 0 0 40px rgba(0,0,0,.15); }
  .sidebar.aperta { left: 0; }
  .contenuto { padding: 18px 16px 60px; }
  .topbar { padding: 0 16px; }
}


/* ---------------------------------------------------------------------------
   Fix #365 — IL PASSAGGIO FRA LE PAGINE NON DEVE ESSERE UNO SCATTO.

   Cambiando utente si attraversa la schermata di accesso, che è chiara, mentre la
   scrivania è scura: lo stacco secco fra le due si vedeva come un lampo. Rendere
   scura anche la schermata di accesso avrebbe voluto dire rifarne la grafica; molto
   meglio ammorbidire il passaggio, che è quello che dà fastidio.

   Ogni pagina entra con una dissolvenza brevissima. Non rallenta niente — il
   contenuto è già lì — ma toglie lo scatto. Chi ha chiesto al sistema di ridurre le
   animazioni non la vede affatto.
   --------------------------------------------------------------------------- */
@keyframes rc-entra { from { opacity: 0; } to { opacity: 1; } }

body.pag-login {
  animation: rc-entra .22s ease-out both;
}
/* ---------------------------------------------------------------------------
   Fix #372 — LA SCRIVANIA NON ENTRA PIU' IN DISSOLVENZA, ed era lei il difetto.

   La dissolvenza sul corpo della pagina, messa col Fix #365, faceva partire tutto da
   trasparente: e per quei tre decimi di secondo si vedeva quello che c'era SOTTO, cioè
   lo sfondo della scrivania. Ecco perché il lampo si vedeva con qualunque sfondo —
   fotografia caricata o stile di serie, non faceva differenza — e perché nessuno dei
   tentativi fatti sopra la pagina poteva risolverlo: il difetto era la dissolvenza
   stessa.

   Ora non serve più: a coprire l'avvio c'è la schermata di caricamento, che è opaca
   dal primo istante.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.pag-login, body.os { animation: none; }
}

/* ============================================================================
   Fix #428 — IL CIELO DELLA SCHERMATA DI ACCESSO.

   Una rete di nodi su un cielo blu profondo. Sopra ci sta il riquadro di accesso,
   che diventa scuro: una scatola bianca su un cielo notturno stonerebbe e
   costringerebbe gli occhi a passare dal buio alla luce a ogni sguardo.

   Il cielo non riceve tocchi e non entra mai nell'ordine di lettura: chi usa il
   gestionale con la tastiera o con un lettore di schermo non lo incontra proprio.
   ============================================================================ */
/* Fix #430 — IL CIELO C'E' ANCHE SENZA IL DISEGNO.

   Lo sfondo blu sfumato è scritto QUI, nel foglio di stile, e non solo dentro il
   disegno animato. Serve a due cose:

     · se il disegno non parte — file mancante, browser vecchio, animazioni
       ridotte — la schermata resta comunque quella giusta, blu e sfumata, invece
       di tornare bianca;
     · e serve a capire cosa non è arrivato: se dopo un aggiornamento si vede il
       blu ma non il movimento, allora è arrivato lo stile e non la pagina.

   Il disegno animato, quando c'è, ci si sovrappone sopra. */
/* Fix #431 — QUI SI TOGLIE DI MEZZO IL BIANCO CHE COPRIVA IL CIELO.

   Erano due strati, e ci sono voluti i pixel veri per trovarli: la schermata di
   accesso aveva una sfumatura chiara addosso (nata nel Fix #208, per far combaciare
   il bianco con la barra del browser su iPad) e sotto una tinta unita bianca. Tutti
   e due stavano SOPRA il cielo e lo nascondevano completamente.

   Guardando le proprietà sembrava tutto giusto — il fondo del corpo era il gradiente
   blu, il telo era scuro — ma i pixel dicevano 235,239,246, cioè quasi bianco. Il
   colore che si vede non è quello dichiarato più in basso: è quello dell'ultimo
   strato disegnato sopra. */
html.pag-login, body.pag-login {
  background:
    radial-gradient(1200px 900px at 28% 20%, #12336b 0%, rgba(11,30,69,0) 62%),
    radial-gradient(900px 800px at 80% 82%, rgba(88,58,178,.30) 0%, rgba(88,58,178,0) 60%),
    linear-gradient(160deg, #0b1e45 0%, #071231 55%, #040a1c 100%) !important;
}
.login-pagina { background: transparent !important; }
#rc-cielo {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  pointer-events: none;
  background: transparent;
}
/* Fix #431 — la sfumatura va messa sul TELO, non sul corpo della pagina.
   Il telo è uno strato che sborda oltre i quattro lati (Fix #207) e sta sopra il
   fondo del corpo: qualunque colore metta il corpo, è il telo quello che si vede.
   Mettendogliela addosso, la sfumatura compare — e il disegno delle stelle ci va
   sopra, perché sta un gradino più in alto. */
body.pag-login > #telo-sfondo {
  background:
    radial-gradient(1400px 1100px at 26% 16%, #143a78 0%, rgba(11,30,69,0) 60%),
    radial-gradient(1100px 950px at 82% 84%, rgba(96,64,190,.34) 0%, rgba(96,64,190,0) 58%),
    linear-gradient(160deg, #0c2150 0%, #071231 55%, #04091a 100%);
}
body.pag-login { color: #dfe9fa; }
.login-pagina { position: relative; z-index: 1; }

/* Fix #433 — il riquadro: fondo PIENO, sfumato dal blu al viola.
   Il viola in fondo riprende quello del cielo, così il riquadro sembra raccogliere
   il colore dell'ambiente invece di essere appoggiato sopra.
   Niente trasparenza né sfocatura: il testo si legge meglio, e su iPad la sfocatura
   costava lavoro al processore a ogni fotogramma dell'animazione dietro. */
.login-box {
  background: linear-gradient(180deg, #122a58 0%, #0c1a3e 58%, #241a4e 100%) !important;
  border: 1px solid rgba(150, 195, 255, .22) !important;
  border-radius: 18px !important;
  box-shadow: 0 22px 55px rgba(0, 6, 24, .55) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Fix #433 — campi e pulsante: STESSA altezza e STESSO raggio, così la colonna resta
   allineata. È la cosa che si nota subito se non torna. */
.login-box input,
.login-box .btn-primario,
.login-box button[type="submit"] {
  height: 44px;
  border-radius: 10px;
  box-sizing: border-box;
}

/* il campo: il contorno vero lo disegna il programma, qui resta solo il fondo */
.login-campo { position: relative; }
.login-campo input {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(150, 190, 250, .22) !important;
  color: #eef4ff;
  transition: background .25s;
}
.login-campo.attivo input { background: rgba(255, 255, 255, .10) !important; }
.login-campo input:focus { box-shadow: none !important; }
.login-campo svg {
  position: absolute; left: 0; top: 0;
  pointer-events: none; overflow: visible;
}
.login-campo .lc-luce {
  transition: stroke-dashoffset .85s cubic-bezier(.25, .8, .3, 1);
  opacity: 0;
}
/* ============================================================================
   Fix #452 — IL CONTORNO PUO' ESSERE VISIBILE SOLO SE IL CAMPO HA DAVVERO IL CURSORE.

   Tre fix di fila non sono bastati: il video del 3 agosto, con il Fix #451 gia'
   installato, mostra ancora i due contorni accesi insieme — pixel esattamente sui
   quattro bordi, y 393, 437, 471 e 515, su tutte le colonne — due secondi e tre
   dopo la fine dell'ingresso. Sul banco di prova non si riproduce, ne' coi campi
   vuoti ne' compilati, ne' aspettando la scossa.

   Percio' si smette di cercare CHI accende e si rende IMPOSSIBILE che si accenda.
   «:focus-within» e' vero solo se dentro il campo c'e' davvero il cursore, e questo
   lo sa il browser, non il nostro programma: nessuna riga di codice puo' aggirarlo.
   Ne discendono due cose, tutte e due desiderate:
     · un campo senza cursore NON puo' mostrare il contorno, chiunque provi ad
       accenderlo e per qualsiasi motivo;
     · due contorni accesi insieme diventano impossibili, perche' il cursore e' uno
       solo. Il difetto visto nel video non puo' piu' esistere.

   L'unica eccezione e' l'uscita (Fix #445): li' il cursore se n'e' gia' andato ma il
   tratto deve finire il suo giro. Dura mezzo secondo, la mette e la toglie il nostro
   codice, e non puo' restare appesa.
   ============================================================================ */
.login-campo.attivo:focus-within .lc-luce,
.login-campo.uscita .lc-luce { opacity: 1; }

/* il respiro: comincia a giro finito, ed è lento e leggero — deve dire «sei qui»,
   non attirare l'occhio mentre si scrive */
@keyframes rc-respiro { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.login-campo.pronto:focus-within .lc-luce { animation: rc-respiro 3.2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .login-campo .lc-luce { transition: none; }
  .login-campo.pronto .lc-luce { animation: none; }
}

.login-box .btn-primario,
.login-box button[type="submit"] {
  background: linear-gradient(95deg, #1f63c8, #3aa9d8) !important;
  border: 0 !important;
  color: #fff !important;
  font-weight: 600;
}
.login-box .btn-primario:hover,
.login-box button[type="submit"]:hover {
  background: linear-gradient(95deg, #2470da, #43b9e8) !important;
}
.login-logo { color: #eef4ff; }
.login-sotto { color: rgba(203, 222, 250, .62) !important; }
.login-box label { color: rgba(203, 222, 250, .78); }
.login-box input {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(150, 190, 250, .26);
  color: #eef4ff;
}
.login-box input::placeholder { color: rgba(200, 218, 248, .38); }
.login-box input:focus {
  border-color: rgba(120, 180, 255, .75);
  box-shadow: 0 0 0 3px rgba(70, 140, 255, .18);
  background: rgba(255, 255, 255, .10);
}
.login-box .btn-primario {
  background: linear-gradient(180deg, #2f7fe8, #1f63c8);
  border-color: rgba(255, 255, 255, .12);
  color: #fff;
}
.login-box .btn-primario:hover { background: linear-gradient(180deg, #3a8bf2, #2a70d6); }
.login-piede, .login-box a { color: rgba(160, 200, 255, .85); }

/* chi ha chiesto meno animazioni vede il cielo fermo: è una scelta sua */
@media (prefers-reduced-motion: reduce) {
  #rc-cielo { opacity: .9; }
}

/* ============================================================================
   Fix #434 — I CAMPI RIEMPITI DAL BROWSER RESTANO SCURI.

   Quando il browser compila da solo email e password — o quando si sceglie un
   suggerimento dall'elenco — impone al campo un fondo chiaro tutto suo. Non si
   toglie cambiando il colore di sfondo: quel colore viene ignorato.

   L'unico modo è coprirlo con un'ombra interna piena, che il browser rispetta, e
   dire a parte di che colore dev'essere il testo. La transizione lunghissima serve
   a impedire che il fondo chiaro compaia per un istante prima di essere coperto.

   Vale anche mentre si scrive, quando il campo è a fuoco e quando si passa col
   mouse: il riempimento automatico li tratta come stati diversi, e senza elencarli
   tutti il bianco ricompare in uno di quelli.
   ============================================================================ */
.login-box input:-webkit-autofill,
.login-box input:-webkit-autofill:hover,
.login-box input:-webkit-autofill:focus,
.login-box input:-webkit-autofill:active,
.login-box input:autofill {
  -webkit-box-shadow: inset 0 0 0 1000px #16264a !important;
  box-shadow: inset 0 0 0 1000px #16264a !important;
  -webkit-text-fill-color: #eef4ff !important;
  caret-color: #eef4ff;
  border: 1px solid rgba(150, 190, 250, .22) !important;
  transition: background-color 100000s ease-in-out 0s !important;
}

/* ============================================================================
   Fix #442 — MARCHIO A SINISTRA, RIQUADRO A DESTRA, E LA COPPIA AL CENTRO.

   IL DIFETTO. «.login-pagina» era già una RIGA (flex, direzione predefinita), e il
   Fix #439 ci aveva infilato dentro il marchio pensando che finisse sopra il
   riquadro. Finiva invece accanto, e per giunta storto: il margine automatico del
   marchio si mangiava lo spazio libero e spingeva tutto a destra.
   Misurato su uno schermo da 1856 punti: la coppia era centrata a 1208 invece che
   a 928, cioè sbandava di 280 punti.

   ADESSO la direzione è dichiarata, non lasciata al caso: incolonnati di base,
   affiancati sopra i 1100 punti. Sotto quella soglia il marchio si stringerebbe
   sotto i 250 punti e i due si toccherebbero: l'iPad in orizzontale (1366) resta
   affiancato, in verticale (1024) torna incolonnato.
   ============================================================================ */
.login-pagina { flex-direction: column; gap: 0; }
.rc-marchio {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 0 auto 22px; max-width: min(340px, 78vw);
}
@media (min-width: 1100px) {
  /* niente margine automatico qui: è quello che spingeva la coppia fuori centro */
  .login-pagina { flex-direction: row; gap: 64px; }
  .login-pagina .rc-marchio { margin: 0; max-width: 400px; flex: none; }
  .login-pagina .login-box { flex: none; }
}
.rc-marchio img, .rc-marchio svg { width: 100%; height: auto; display: block; max-width: 260px; }
@media (min-width: 1100px) {
  .rc-marchio img, .rc-marchio svg { max-width: 330px; }
}
.rc-marchio span {
  font-size: clamp(22px, 5vw, 30px); font-weight: 600; letter-spacing: .5px;
  color: #eef4ff; line-height: 1;
}
.login-box .login-sotto {
  font-size: 12.5px; line-height: 1.55; margin: 0 0 18px !important;
  color: rgba(203, 222, 250, .68) !important; text-align: center;
}

/* ============================================================================
   Fix #442 — L'INGRESSO DELLA SCHERMATA DI ACCESSO.

   I frammenti convergono e formano il marchio, poi il riquadro arriva e si compone
   un pezzo alla volta. Dura circa un secondo e sette.

   TRE REGOLE CHE NON VANNO CAMBIATE, e il perché:

   1) NIENTE «scale» SUL RIQUADRO. Il contorno luminoso dei campi (Fix #433) si
      costruisce misurando l'input con getBoundingClientRect(), che restituisce le
      misure GIÀ TRASFORMATE: con una scala in corso il contorno nascerebbe della
      misura sbagliata e resterebbe così, perché il sorvegliante del
      ridimensionamento non scatta per le trasformazioni. Il riquadro entra quindi
      con opacità e spostamento, che non alterano le misure.

   2) NIENTE «blur». Il Fix #433 aveva tolto la sfocatura dal riquadro proprio
      perché su iPad costava lavoro al processore a ogni fotogramma, con il cielo
      animato che gira dietro. Rimetterla dentro l'animazione sarebbe lo stesso
      errore, per un secondo e mezzo.

   3) SI MUOVONO SOLO «opacity» e «transform». Sono le due cose che il motore
      grafico gestisce da solo, senza rifare il calcolo della pagina a ogni
      fotogramma.

   La rete di sicurezza è nel programma, non qui: se per qualsiasi motivo
   l'animazione non partisse, tutto torna visibile da solo. Nessuno deve restare
   fuori per colpa di un'animazione (è la regola del Fix #428).
   ============================================================================ */
.rc-frammenti { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.rc-frammenti i {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #5aa8e8; opacity: 0;
}

/* lo stato di partenza: si vede solo mentre l'ingresso è in corso */
.login-pagina.rc-entra .rc-marchio { opacity: 0; }
.login-pagina.rc-entra .login-box  { opacity: 0; }
.login-pagina.rc-entra .login-box > * { opacity: 0; }

/* il marchio è cliccabile: lo dice il puntatore */
.rc-marchio { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rc-marchio .rc-bordo { transition: stroke-dashoffset 1s cubic-bezier(.4, 0, .2, 1); }

/* Fix #442 — la scossa quando la password è sbagliata. Qui l'ingresso NON si rifà:
   chi ha sbagliato vuole riprovare subito, non riguardare l'animazione. */
@keyframes rc-scossa {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-9px); }  30% { transform: translateX(8px); }
  45% { transform: translateX(-6px); }  60% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}
.login-box.rc-scossa { animation: rc-scossa .5s ease-in-out; }

@media (prefers-reduced-motion: reduce) {
  /* chi ha ridotto le animazioni vede la schermata già a posto: niente ingresso,
     niente frammenti, niente scossa. È una scelta sua e va rispettata. */
  .login-pagina.rc-entra .rc-marchio,
  .login-pagina.rc-entra .login-box,
  .login-pagina.rc-entra .login-box > * { opacity: 1 !important; transform: none !important; }
  .rc-frammenti { display: none; }
  .rc-marchio .rc-bordo { transition: none; stroke-dashoffset: 0 !important; }
  .login-box.rc-scossa { animation: none; }
}

/* ============================================================================
   Fix #444 — LA SCOSSA: un fulmine attraversa il riquadro, il marchio sussulta.

   La linea entra da un lato — a sorte, ora da sinistra ora da destra — attraversa
   il riquadro e sparisce. Il riquadro scatta nella direzione del colpo; il marchio
   non riceve nessuna linea addosso, sussulta soltanto di contraccolpo un decimo
   dopo. In tutto mezzo secondo.

   PERCHE' «position: relative» SUL RIQUADRO: il disegno del fulmine è un elemento
   posizionato DENTRO il riquadro, e senza un riferimento si aggancerebbe alla
   pagina, finendo chissà dove. Il contorno luminoso dei campi (Fix #433) usa un
   riferimento suo, dentro «.login-campo», e non c'entra: sono due cose separate e
   restano tali.

   NIENTE FILTRI. Il bagliore della linea è un secondo tratto più spesso e più
   trasparente disegnato sotto, non una sfocatura: su iPad, col cielo animato che
   gira dietro e una scossa ogni pochi secondi, un filtro si pagherebbe caro.
   ============================================================================ */
.login-box { position: relative; }
.rc-fulmine { position: absolute; top: 0; z-index: 6; pointer-events: none; overflow: visible; }
.rc-fulmine-bordo { position: absolute; top: 0; bottom: 0; width: 26px; z-index: 5; pointer-events: none; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  /* chi ha ridotto le animazioni non deve vedere niente di tutto questo */
  .rc-fulmine, .rc-fulmine-bordo { display: none !important; }
}

/* ============================================================================
   Fix #445 — IL PULSANTE ACCEDI SI ACCENDE COME I CAMPI.

   Stesso identico contorno: la luce parte dal punto medio del lato sinistro,
   percorre tutto il giro e resta accesa respirando piano. Chi passa dal campo al
   pulsante vede la stessa lingua, non due effetti diversi — che è tutto il punto.

   Il pulsante ha bisogno di un riferimento proprio («position: relative») per
   ospitare il disegno, esattamente come i campi.
   ============================================================================ */
.login-bottone { position: relative; }
.login-bottone svg {
  position: absolute; left: 0; top: 0;
  pointer-events: none; overflow: visible;
}
.login-bottone .lc-luce {
  transition: stroke-dashoffset .8s cubic-bezier(.25, .8, .3, 1);
  opacity: 0;
}
.login-bottone.attivo .lc-luce { opacity: 1; }
.login-bottone.pronto .lc-luce { animation: rc-respiro 3.2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .login-bottone .lc-luce { transition: none; }
  .login-bottone.pronto .lc-luce { animation: none; }
}

/* ============================================================================
   Fix #446 — SI ENTRA DENTRO IL TASTO: il volo verso la scrivania.

   Cliccando Accedi la telecamera avanza verso il pulsante e ci entra dentro. Non
   è un ingrandimento: il punto attorno a cui tutto si allarga viene spostato SUL
   PULSANTE nell'istante del clic, e i tre strati stanno a profondità diverse —
   il telo con le stelle in fondo, il marchio a mezza distanza, il riquadro
   davanti. Avanzando si allargano a velocità diverse da soli, ed è quel
   parallasse a dare lo spazio: la scala da sola non basterebbe.

   IL COLORE D'ARRIVO NON È SCELTO A CASO. Il volo finisce su #0b1224, che è lo
   stesso identico colore che «index.php» dichiara PRIMA di ogni foglio di stile
   (Fix #366). Se fossero diversi, nel passaggio si vedrebbe un lampo — è il
   genere di errore del Fix #431, dove due strati bianchi coprivano il cielo senza
   che nessuna proprietà lo dicesse. Cambiando l'uno va cambiato l'altro.

   DURANTE IL VOLO LA PAGINA NON DEVE SCORRERE: gli strati arrivano a cinque volte
   la loro misura e sborderebbero, facendo comparire le barre di scorrimento
   proprio nel momento più in vista.
   ============================================================================ */
html.rc-in-volo, html.rc-in-volo body { overflow: hidden !important; }
/* Niente «will-change: transform» sugli strati che volano. Sembra la cosa giusta —
   avvisa il motore grafico di quello che sta per succedere — ma qui gli strati
   arrivano a sei volte la loro misura: il livello grafico diventerebbe più grande di
   seimila punti per lato, oltre i limiti della scheda. Provato e tolto: non serviva,
   e su un dispositivo con meno memoria video rischia di far comparire aree vuote
   proprio nel mezzo del volo. */
#rc-volo-velo {
  position: fixed; inset: 0; z-index: 2147482000;
  background: #0b1224; opacity: 0; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  /* chi ha ridotto le animazioni entra e basta: nessun volo */
  .rc-volo-strato { transform: none !important; transition: none !important; }
  #rc-volo-velo { display: none; }
}

/* ---------------------------------------------------------------------------
   Fix #446 — LA SCRITTA DEL PULSANTE SPARISCE PRIMA DI ENTRARCI DENTRO.

   Trovato guardando i PIXEL e non le proprietà, come insegna il Fix #431: a metà
   volo il 63% dello schermo era BIANCO. Non era un difetto del colore — era la
   parola «Accedi», ingrandita cinque volte insieme al pulsante. Si entrava dentro
   una lettera invece che dentro il tasto.

   La scritta sfuma quindi nei primi due decimi, e resta l'azzurro del pulsante:
   quello che si vuole vedere avvicinandosi. Sfuma anche il contorno luminoso
   (Fix #445), che ingrandito diventerebbe una fascia chiara larga tutto lo schermo.
   --------------------------------------------------------------------------- */
html.rc-in-volo .login-box button[type="submit"],
html.rc-in-volo .login-box .btn-primario {
  color: transparent !important;
  transition: color .2s ease !important;
}
html.rc-in-volo .lc-luce { opacity: 0 !important; transition: opacity .18s ease !important; }
html.rc-in-volo .login-box label,
html.rc-in-volo .login-box .login-sotto { opacity: 0 !important; transition: opacity .25s ease !important; }


/* ============================================================================
   Fix #640 — LA VERIFICA IN DUE PASSAGGI, NELLA SCHERMATA DI ACCESSO.

   Le distanze non sono scelte a occhio: sono le stesse gia' in uso qui dentro. Il
   campo del codice sta a 14 punti dal successivo come tutti gli altri (.login-box
   .campo), il pulsante ha la stessa altezza di 44 e lo stesso raggio di 10 dei
   campi (Fix #433), e i testi di spiegazione usano «suggerimento» e «campo-nota»,
   che sono quelli del resto del programma.

   «campo-nota» va dichiarata QUI perche' vive in desktop.css, e questa pagina quel
   foglio non lo carica: senza, la nota sotto il campo sarebbe rimasta col carattere
   di fabbrica del browser — l'errore esatto del Fix #636, una classe che non
   applica niente e non dice niente.
   ============================================================================ */
.login-box .campo-nota {
  display: block; margin-top: 6px;
  font-size: 11.5px; line-height: 1.5;
  color: rgba(203, 222, 250, .58);
}

/* «Ricorda questo dispositivo»: la riga sta fra il campo e il pulsante e prende lo
   stesso margine di 14 che separa i campi fra loro. */
.tfa-ricorda {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 14px; padding: 0 2px;
  font-size: 12.5px; color: rgba(203, 222, 250, .78);
  cursor: pointer; user-select: none;
}
.tfa-ricorda input {
  width: 17px; height: 17px; margin: 0; flex: 0 0 auto;
  accent-color: #2f7fe8; cursor: pointer;
}

/* Il quadrato da inquadrare: fondo bianco pieno e non trasparente — un lettore ha
   bisogno del contrasto vero, e su un riquadro scuro un disegno trasparente non si
   legge. Il bordo chiaro attorno lo disegna gia' il quadrato stesso. */
.tfa-quadrato {
  display: flex; justify-content: center;
  margin: 0 0 14px;
}
.tfa-quadrato svg {
  display: block; width: 190px; height: 190px;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 6, 24, .45);
}

.tfa-chiave { text-align: center; margin: 0 0 18px; }
.tfa-chiave code {
  display: inline-block; margin-top: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; letter-spacing: .06em; color: #cfe2ff;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(150, 190, 250, .22);
  border-radius: 8px; padding: 7px 11px;
  word-break: break-all;
}

/* Gli otto codici: due colonne, cifre a larghezza fissa perche' restino incolonnate
   e si ricopino senza perdere il segno. */
.tfa-codici {
  list-style: none; margin: 0 0 18px; padding: 14px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(150, 190, 250, .22);
  border-radius: 12px;
}
.tfa-codici li {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px; letter-spacing: .04em; color: #eef4ff; text-align: center;
}

.tfa-azioni { display: flex; gap: 10px; align-items: stretch; }
.tfa-azioni .btn { flex: 1; height: 44px; border-radius: 10px; justify-content: center; }
.login-box .tfa-azioni .btn-primario { margin-top: 0; }

/* STAMPANDO resta solo il foglio dei codici: il cielo, il marchio e i pulsanti su
   carta non servono a niente e mangerebbero mezza pagina. */
@media print {
  #rc-cielo, #telo-sfondo, .rc-marchio, .login-sotto, .tfa-azioni, .rc-riaccendi { display: none !important; }
  html.pag-login, body.pag-login, .login-box {
    background: #fff !important; color: #000 !important; box-shadow: none !important;
  }
  .login-box { border: 0 !important; max-width: none; }
  .tfa-codici { background: #fff !important; border: 1px solid #bbb !important; }
  .tfa-codici li, .login-box .suggerimento, .login-box .suggerimento strong { color: #000 !important; }
}


/* ============================================================================
   Fix #646 — LA CORNICE DEL CONTROLLO ANTIBOT.

   Fondo, bordo e raggio sono gli stessi dei campi Email e Password: il blocco
   appartiene alla colonna invece di essere appoggiato sopra. Dentro c'è una
   finestra di Cloudflare e lì non si arriva — quello che si può fare è mettere
   attorno la nostra cornice e dargli la nostra larghezza.

   IL MARGINE NEGATIVO CHE SEMBRA STRANO E NON LO E'. Cloudflare non scende sotto
   i 300 punti di larghezza: è il minimo del suo riquadro «flexible», e non si
   discute. Su un telefono stretto il posto disponibile è meno di 300, e il riquadro
   sborderebbe dalla colonna trascinandosi dietro lo scorrimento laterale di tutta
   la pagina.
   Quel «min» prende zero quando lo spazio basta — e allora non succede niente — e
   prende la differenza quando non basta: il blocco si allarga verso i lati esatti
   punti che gli mancano, mangiandosi il margine interno del riquadro.

   E il «max» è il limite: non può mangiarsi più del margine che c'è. Su uno schermo
   davvero minuscolo — misurato a 320 punti — senza quel limite usciva dal riquadro e
   restava appoggiato sul fondo della pagina, che sembra un difetto. Col limite si
   ferma al bordo e quel poco che avanza viene tagliato a destra: si perde un pezzo
   del marchio Cloudflare, mentre la spunta e la scritta restano dove servono. Fra un
   marchio tagliato e un riquadro che sborda, si taglia il marchio.

   I numeri sono due e sono tutti e due di qualcun altro: il 300 è il minimo di
   Cloudflare, il margine è quello del riquadro — dichiarato lì accanto, così se un
   domani cambia, cambia in un posto solo.
   ============================================================================ */
.login-box { --cf-fuga: 32px; }        /* pari al margine interno del riquadro */
.login-cf-scatola {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(150, 190, 250, .22);
  border-radius: 10px;
  padding: 5px;
  margin-inline: max(calc(var(--cf-fuga) * -1), min(0px, calc((100% - 300px) / 2)));
  overflow: hidden;
}
.login-cf-scatola iframe { display: block; border-radius: 6px; }
.login-box .login-cf .campo-nota { margin-top: 6px; }


/* ============================================================================
   Fix #473 — SOTTO LA SCHERMATA DI ACCESSO NON C'E' PIU' NIENTE DI BIANCO.

   Il difetto: in fondo alla pagina compariva una striscia chiara. Misurata sullo
   screenshot del 3 agosto — DICIANNOVE righe di bianco pieno su tutta la larghezza,
   sotto il contenuto.

   La causa non era un colore sbagliato ma un colore ASSENTE. Il cielo, il telo e la
   pagina hanno tutti soltanto delle SFUMATURE, e nessuno un colore pieno sotto: dove
   la sfumatura non arriva non c'e' niente, e «niente» in un browser vuol dire bianco.
   Finche' gli strati combaciano al punto non si vede; basta uno scarto di qualche
   punto — un'altezza di finestra diversa, una barra del browser che si apre — e la
   pagina bianca sottostante si mostra.

   Qui si mette un colore PIENO sotto tutto: lo stesso blu scuro col quale si spegne
   la scrivania uscendo, e col quale arriva il volo del tasto Accedi. Non copre le
   sfumature — sta sotto — ma toglie il bianco da sotto di loro.

   STA IN FONDO AL FOGLIO di proposito: piu' su verrebbe azzerato dalle scorciatoie
   «background:» dichiarate dopo, che riscrivono anche il colore oltre all'immagine.
   E' la stessa cura che al Fix #201 ha tolto la linea bianca in fondo alla scrivania:
   li' il problema era identico, una pagina senza colore sotto.
   ============================================================================ */
/* Il «!important» qui non e' un capriccio. Piu' su (Fix #431) la sfumatura di html e
   body e' dichiarata con una SCORCIATOIA «background: ... !important», e una
   scorciatoia riscrive anche il colore, azzerandolo. Senza «!important» questa riga
   verrebbe ignorata — verificato: il colore restava trasparente. Essendo dichiarata
   per ultima, a pari forza vince lei.
   Il valore e' l'ultimo colore della sfumatura del telo: sotto e' esattamente quello
   che si vede, quindi il colore pieno e la sfumatura combaciano e lo scarto non si
   nota nemmeno se resta. */
html.pag-login { background-color: #04091a !important; }
body.pag-login { background-color: #04091a !important; }
body.pag-login > #telo-sfondo { background-color: #04091a; }