*{box-sizing:border-box;}
html{scrollbar-gutter:stable;}
.site-nav,.public-nav{
    position:sticky;
    top:0;
    z-index:20;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    /*
    | Larga quanto la finestra, con il contenuto rientrato dal padding.
    |
    | Era "calc(100% - 40px)" PIU' venti pixel di padding: due rientri sommati,
    | quindi il logo partiva a quaranta pixel dal bordo mentre il contenuto
    | della pagina — che ha lo stesso max-width e lo stesso padding — partiva a
    | venti. Uno scarto di venti pixel su ogni pagina pubblica, invisibile
    | finche' sotto c'e' del testo su fondo chiaro e lampante appena sotto ci
    | finisce un riquadro bianco con il suo bordo: la pagina "Installazione
    | Agent" ha proprio quello, ed e' li' che si e' visto.
    |
    | Il max-width resta: su schermo largo la barra si ferma dove si ferma il
    | contenuto, e i due bordi coincidono.
    */
    width:100%;
    gap:20px;
    max-width:var(--sito-larghezza);
    margin:0 auto;
    padding:12px 20px;
    background:var(--nav-pubblica);
    border-bottom:1px solid var(--border);
    box-shadow:0 3px 12px rgba(24,42,68,.06);
    backdrop-filter:blur(10px);
}
.site-nav .brand,.public-nav .brand{
    display:flex;
    align-items:center;
    gap:9px;
    margin-right:0;
    color:var(--text);
    text-decoration:none;
    font-weight:700;
    font-size:16px;
}
.site-nav .brand span:last-child,.public-nav .brand span:last-child{white-space:nowrap;}
.site-nav .logo,.public-nav .logo{
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    flex:0 0 auto;
    border-radius:8px;
    background:#1769d2;
    color:#fff;
    font-size:12px;
    font-weight:700;
}
.site-nav .links,.public-nav .links{
    display:flex;
    align-items:center;
    gap:20px;
    flex:0 0 auto;
    margin-left:20px;
}
.site-nav .links a,.public-nav .links a{
    color:var(--muted);
    text-decoration:none;
    font-size:14px;
    font-weight:600;
}
.site-nav .links a:hover,.site-nav .links a.active,
.public-nav .links a:hover,.public-nav .links a.active{color:#1769d2;}
.site-nav .actions,.public-nav .actions{display:flex;align-items:center;gap:16px;}
.site-nav .actions,.public-nav .actions{margin-left:auto;}
.site-nav .actions a.button,.public-nav .actions a.button{
    display:inline-block;
    height:32px;
    padding:0 18px;
    line-height:32px;
    background:#1769d2;
    color:#fff;
    text-decoration:none;
    border-radius:8px;
    font-size:14px;
    font-weight:700;
}
.site-nav .actions a.button:hover,.public-nav .actions a.button:hover{background:#125bb8;}
/*
| L'ingresso alla Console: un pulsante SECONDARIO accanto a quello pieno
| dell'Agent (dal 14/09/2026; prima era un lucchetto fluttuante sotto la
| barra, e il perche' del cambio sta in includes/public_nav.php). Vuoto con
| il bordo, cosi' l'occhio va prima all'Agent, che e' l'azione del Cliente.
|
| :hover e :focus-visible in regole separate: in una regola sola, un browser
| che non conosce :focus-visible (Chrome 84-85, Firefox 63-84, Safari 14) la
| scarta per intero. Vedi tests/browser_support.php.
*/
.site-nav .actions a.button.secondary,.public-nav .actions a.button.secondary{
    display:inline-flex;
    align-items:center;
    gap:7px;
    background:transparent;
    color:#1769d2;
    border:1.5px solid #1769d2;
    line-height:29px;
}
.site-nav .actions a.button.secondary:hover,.public-nav .actions a.button.secondary:hover{background:var(--accent-soft);}
.site-nav .actions a.button.secondary:focus-visible,.public-nav .actions a.button.secondary:focus-visible{background:var(--accent-soft);}
.site-nav .actions a.button.secondary svg,.public-nav .actions a.button.secondary svg{width:15px;height:15px;flex:0 0 15px;}
.site-nav .menu-toggle,.public-nav .menu-toggle{
    display:none;
    width:auto;
    flex:0 0 auto;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text);
    border-radius:7px;
    padding:8px 10px;
    font-size:18px;
    cursor:pointer;
}
.site-nav .menu-icon,.public-nav .menu-icon{display:block;width:18px;height:2px;background:currentColor;position:relative;}
.site-nav .menu-icon::before,.site-nav .menu-icon::after,
.public-nav .menu-icon::before,.public-nav .menu-icon::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;}
.site-nav .menu-icon::before,.public-nav .menu-icon::before{top:-6px;}
.site-nav .menu-icon::after,.public-nav .menu-icon::after{top:6px;}
.site-nav .menu-toggle:focus-visible,.public-nav .menu-toggle:focus-visible,
.site-nav a:focus-visible,.public-nav a:focus-visible{outline:3px solid rgba(23,105,210,.28);outline-offset:3px;}
/*
| LE SOGLIE DEL SITO SONO QUELLE DELLA CONSOLE (15/09/2026): 1023, 768, 480.
|
| Erano 860, 560, 480 e 400, scelte una per volta. La barra intera — marchio,
| voci e comandi — ha bisogno di circa 1000 pixel (misurata: 989 a 1024), e a
| 880 usciva gia' di un pixel: si chiude nel pulsante sotto il portatile, non
| a 860. I comandi compatti a 768 invece che a 560 (a 500 stanno in 498
| pixel), e quelli a tutta riga, che partivano a 400, vivono nel blocco dei
| 480. Il contratto e' tests/soglie_responsive.php.
*/
@media (max-width:1023px){
    .site-nav,.public-nav{flex-wrap:wrap;}
    .site-nav .brand,.public-nav .brand{margin-right:auto;}
    .site-nav .menu-toggle,.public-nav .menu-toggle{display:block;order:2;}
    .site-nav .links,.public-nav .links{display:none;order:4;flex:0 0 100%;width:auto;min-width:0;margin:0;padding:10px 0 2px;}
    .site-nav.is-open .links,.public-nav.is-open .links{display:flex;flex-direction:column;align-items:stretch;gap:0;}
    .site-nav.is-open .links a,.public-nav.is-open .links a{padding:10px 4px;border-top:1px solid var(--border);}
    .site-nav .actions,.public-nav .actions{margin-left:auto;order:3;}
}
/*
| La cornice di una schermata della Console mostrata sul sito: una sola.
|
| Dal 29/09/2026 la stessa immagine sta in due pagine, in apertura della home
| e nella vetrina di Funzionalita', e la cornice era scritta in tutte e due
| con valori diversi (bordo, angoli, ombra). Sta qui perche' questo e' il
| foglio che ogni pagina del sito carica. Il bordo viene dal token: in tema
| scuro deve virare con la pagina, mentre la schermata resta chiara, ed e'
| giusto, e' una fotografia. Le pagine tengono solo l'impaginazione.
*/
.schermata-console{display:block;width:100%;height:auto;border:1px solid var(--border);border-radius:8px;box-shadow:0 6px 18px rgba(24,42,68,.06);}
/*
| TOCCO MINIMO 24px, SOLO SITO PUBBLICO (02/10/2026).
|
| Stessa tecnica del fondo invisibile della Console
| (console/assets/css/style.css, @media pointer:coarse): un ::before
| centrato, largo e alto almeno quanto l'elemento ma non meno di 24px, senza
| cambiare il testo visibile. Qui vive in un posto solo — questo foglio lo
| caricano tutte le pagine pubbliche — e le pagine aggiungono solo la classe
| dove tools/schermi.php ha trovato un bersaglio piu' piccolo: il menu, i
| link del piede e i link piccoli dentro il testo (fonti, informativa,
| condizioni). Niente ::before fuori da pointer:coarse: su mouse e tastiera
| il bersaglio reale basta.
*/
@media (pointer:coarse){
    .tocco-24{position:relative;}
    .tocco-24::before{content:"";position:absolute;left:50%;top:50%;width:24px;height:24px;min-width:100%;min-height:100%;transform:translate(-50%,-50%);}
}
@media (max-width:768px){
    .site-nav .actions,.public-nav .actions{flex:1 1 auto;justify-content:flex-end;min-width:0;}
    .site-nav .actions a.button,.public-nav .actions a.button{max-width:190px;padding:0 12px;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    /* Solo l'icona: il testo non ci sta accanto a «Scarica l'Agent», e il
       lucchetto e' gia' il segno dell'area riservata. Il nome resta
       nell'aria-label, per chi legge con la voce. */
    .site-nav .actions a.button.secondary,.public-nav .actions a.button.secondary{padding:0 8px;}
    .site-nav .actions a.button.secondary span,.public-nav .actions a.button.secondary span{display:none;}
    .site-nav .brand span:last-child,.public-nav .brand span:last-child{max-width:170px;overflow:hidden;text-overflow:ellipsis;}
}
@media (max-width:480px){
    .site-nav,.public-nav{width:calc(100% - 28px);padding:10px 14px;}
    .site-nav .actions,.public-nav .actions{flex:1 1 calc(100% - 50px);margin-left:auto;}
    .site-nav .actions a.button,.public-nav .actions a.button{max-width:none;flex:1 1 auto;text-align:center;}
    .site-nav .actions a.button.secondary,.public-nav .actions a.button.secondary{flex:0 0 auto;justify-content:center;}
}