*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
/* Microbar di caricamento: mostrata sul submit di un form a pagina intera
(login, signup, provisioning...), per dare un riscontro visivo nella
latenza di rete prima del redirect. Le azioni AJAX (sync/install/...)
hanno gia' il loro riscontro via pulsanti disabilitati, non serve qui. */
.page-loading-bar{position:fixed;top:0;left:0;height:2px;width:0;
background:linear-gradient(90deg,var(--cyan),var(--indigo));z-index:999;
opacity:0;pointer-events:none;transition:opacity .15s}
.page-loading-bar.on{opacity:1;animation:pageLoadingBar 1.1s ease-in-out infinite}
@keyframes pageLoadingBar{
0%{width:0;margin-left:0}
50%{width:55%;margin-left:22%}
100%{width:0;margin-left:100%}
}
body{
font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
background:var(--bg);color:var(--text);
transition:background-color .2s ease,color .2s ease;
}
:root{
--bg:#0a0e17;
--panel:#121a2b;
--panel-2:#182236;
--card:#141d30;
--border:#22314d;
--border-soft:#1a2740;
--text:#eef3fa;
--text-dim:#93a3bd;
--text-faint:#57657f;
--cyan:#22d3ee;
--indigo:#7c93ff;
--gold:#f2b84b;
--green:#34d399;
--red:#f2765b;
--r:10px;
--shadow:0 10px 34px rgba(0,0,0,.5);
--wm-stroke:#f2f2f2;
}
[data-theme="light"]{
--bg:#eef2f7;
--panel:#ffffff;
--panel-2:#f3f6fa;
--card:#ffffff;
--border:#dde4ee;
--border-soft:#e6ebf3;
--text:#152238;
--text-dim:#5b6b84;
--text-faint:#93a2b8;
--cyan:#0891b2;
--indigo:#5b6fd6;
--gold:#b9790a;
--green:#15803d;
--red:#c0392b;
--shadow:0 10px 28px rgba(15,32,60,.10);
--wm-stroke:#768a96;
}
/* Scrollbar coerente col tema al posto di quella di sistema (grigio chiaro
anche in tema scuro, stonata) - globale cosi' ogni area con overflow:auto
della piattaforma la eredita, non solo i pannelli in cui e' stata notata. */
*{scrollbar-width:thin;scrollbar-color:var(--border) transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--border);border-radius:5px}
*::-webkit-scrollbar-thumb:hover{background:var(--text-faint)}
.shell{display:flex;flex-direction:column;min-height:100vh}
.shell-header{
display:flex;align-items:center;gap:14px;padding:0 18px;height:46px;flex:none;
background:linear-gradient(180deg,var(--panel),var(--panel-2));border-bottom:1px solid var(--border);
box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14px}
.brand .glyph{width:20px;height:20px;border-radius:6px;flex:none;
background:conic-gradient(from 210deg,var(--cyan),var(--indigo),var(--gold),var(--cyan));position:relative}
.brand .glyph::after{content:"";position:absolute;inset:5px;border-radius:2px;background:var(--panel)}
.brand em{color:var(--text-dim);font-style:normal;font-weight:500}
.hdr-right{display:flex;align-items:center;gap:6px;margin-left:auto}
.hdr-icon{
width:30px;height:30px;border-radius:7px;border:1px solid transparent;background:transparent;
display:flex;align-items:center;justify-content:center;color:var(--text-dim);cursor:pointer;
}
.hdr-icon:hover{background:var(--panel-2);border-color:var(--border);color:var(--text)}
.hdr-icon svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lang-wrap{position:relative}
.lang-btn{display:flex;align-items:center;gap:4px;padding:5px 9px;background:var(--panel-2);
border:1px solid var(--border);border-radius:7px;font-size:10.5px;font-weight:600;color:var(--text-dim);cursor:pointer}
.lang-btn svg{stroke:currentColor;fill:none;stroke-width:2}
.lang-dd{display:none;position:absolute;right:0;top:calc(100% + 6px);background:var(--card);
border:1px solid var(--border);border-radius:9px;min-width:160px;box-shadow:var(--shadow);overflow:hidden;z-index:200}
.lang-dd.open{display:block}
.lang-opt{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;font-size:12px;color:var(--text-dim);cursor:pointer}
.lang-opt:hover{background:var(--panel-2);color:var(--text)}
.lang-opt.sel{color:var(--cyan);font-weight:600}
.lang-opt .native{font-size:10px;color:var(--text-faint)}
.info-wrap{position:relative}
.info-dd{display:none;position:absolute;right:0;top:calc(100% + 6px);background:var(--card);
border:1px solid var(--border);border-radius:9px;width:300px;max-height:360px;overflow:auto;
box-shadow:var(--shadow);z-index:200;padding:12px 14px}
.info-dd.open{display:block}
.info-dd-head{font-size:13px;font-weight:700;color:var(--text)}
.info-dd-summary{font-size:11.5px;color:var(--text-dim);margin-top:4px;line-height:1.5}
.info-dd-divider{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint);
margin:12px 0 6px;padding-top:10px;border-top:1px solid var(--border-soft)}
.info-dd-entry{padding:7px 0;border-bottom:1px solid var(--border-soft)}
.info-dd-entry:last-child{border-bottom:none}
.info-dd-entry-head{display:flex;align-items:center;gap:6px;font-size:10.5px}
.info-dd-tag{background:var(--panel-2);border-radius:5px;padding:1px 6px;color:var(--cyan);font-weight:600}
.info-dd-version{color:var(--text-faint)}
.info-dd-date{margin-left:auto;color:var(--text-faint)}
.info-dd-entry-summary{font-size:11.5px;color:var(--text-dim);margin-top:3px;line-height:1.45}
.shell-main{flex:1;display:flex;align-items:stretch;min-height:0}
.shell-footer{
display:flex;align-items:center;gap:10px;height:28px;flex:none;padding:0 16px;
background:var(--panel);border-top:1px solid var(--border);font-size:10.5px;color:var(--text-faint);
}
.f-dot{width:5px;height:5px;border-radius:50%;background:var(--green)}
.f-right{margin-left:auto}
.auth-left{
flex:1;display:flex;flex-direction:column;justify-content:center;padding:60px;position:relative;overflow:hidden;
background:linear-gradient(145deg,var(--panel) 0%,var(--panel-2) 100%);
}
.auth-left h1{font-size:36px;font-weight:300;line-height:1.25;color:var(--text)}
.auth-left h1 b{font-weight:700;color:var(--cyan)}
.auth-left p{font-size:13.5px;color:var(--text-dim);max-width:380px;margin-top:14px;line-height:1.7}
.auth-caps{margin-top:36px;display:flex;flex-direction:column;gap:10px}
.auth-cap{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text-dim)}
.auth-cap .dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);flex:none}
.brand-watermark{
position:absolute;right:-28px;bottom:-16px;width:460px;height:auto;
opacity:.15;pointer-events:none;z-index:0;transition:opacity .2s ease;
}
.brand-watermark .wm-path{stroke:var(--wm-stroke);stroke-width:1.3;stroke-linejoin:bevel}
.auth-left .ll-content,.auth-left h1,.auth-left p,.auth-caps{position:relative;z-index:1}
.auth-right{width:460px;flex:none;background:var(--bg);border-left:1px solid var(--border);
display:flex;flex-direction:column;justify-content:center;padding:48px 44px;overflow-y:auto}
.auth-card h2{font-size:21px;font-weight:600}
.auth-card .sub{font-size:12.5px;color:var(--text-dim);margin-top:4px;margin-bottom:26px}
.field-group{margin-bottom:14px}
.field-group label{display:block;font-size:11px;font-weight:600;color:var(--text-dim);margin-bottom:5px}
.field-input{
width:100%;padding:9px 12px;font-size:13px;border:1px solid var(--border);border-radius:8px;
background:var(--panel-2);color:var(--text);font-family:inherit;transition:border-color .12s;
}
.field-input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(34,211,238,.12)}
.errorlist{list-style:none;color:var(--red);font-size:11.5px;margin-top:5px}
.btn-primary{
width:100%;padding:11px;font-size:14px;font-weight:600;border:none;border-radius:8px;cursor:pointer;
background:linear-gradient(135deg,var(--cyan),var(--indigo));color:#071019;margin-top:4px;
}
.btn-primary:hover{filter:brightness(1.05)}
.auth-alt{text-align:center;margin-top:18px;font-size:12px;color:var(--text-faint)}
.auth-alt a{color:var(--cyan);text-decoration:none;font-weight:600}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:22px}
.plan-card{
border:1px solid var(--border);border-radius:var(--r);padding:16px;cursor:pointer;text-decoration:none;
color:inherit;display:block;transition:.12s;background:var(--card);
}
.plan-card:hover{border-color:var(--text-faint)}
.plan-card.selected{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan) inset}
.plan-card .p-name{font-size:14px;font-weight:700}
.plan-card .p-price{font-size:20px;font-weight:800;margin-top:6px}
.plan-card .p-price small{font-size:11px;font-weight:500;color:var(--text-faint)}
.plan-card .p-desc{font-size:11.5px;color:var(--text-dim);margin-top:6px;line-height:1.5}
.plan-card .p-trial{display:inline-block;margin-top:8px;font-size:10px;font-weight:700;color:var(--gold);
background:rgba(242,184,75,.12);border:1px solid rgba(242,184,75,.32);border-radius:5px;padding:2px 7px}
.alert{border-radius:8px;padding:10px 13px;font-size:12.5px;margin-bottom:16px}
.alert-success{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.3);color:var(--green)}
.alert-error{background:rgba(242,118,91,.1);border:1px solid rgba(242,118,91,.3);color:var(--red)}
.temp-pass{
font-family:monospace;font-size:20px;font-weight:700;letter-spacing:1px;color:var(--cyan);
background:var(--panel-2);border:1px dashed var(--cyan);border-radius:8px;padding:14px 18px;text-align:center;margin:14px 0;
}
/* Comandi da copiare a mano su un'altra macchina (es. token dell'agente):
mai un bottone che finge di eseguirli da qui, AOC non puo' toccare
un'altra macchina - solo un blocco chiaramente "da incollare altrove". */
.cmd-label{font-size:10.5px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;margin:10px 0 3px}
.cmd-block{
font-family:monospace;font-size:12.5px;color:var(--text);background:var(--panel-2);
border:1px solid var(--border);border-radius:6px;padding:9px 12px;margin:0 0 4px;
overflow-x:auto;white-space:pre;cursor:pointer;position:relative;transition:.12s;
}
.cmd-block:hover{border-color:var(--cyan)}
.cmd-block.copied{border-color:var(--green);color:var(--green)}
.cmd-block::after{
content:"clic per copiare";font-family:inherit;position:absolute;right:10px;top:50%;transform:translateY(-50%);
font-size:10px;color:var(--text-faint);text-transform:none;letter-spacing:0;
}
.cmd-block.copied::after{content:"copiato";color:var(--green)}
.os-detected{
display:inline-block;margin-left:6px;font-size:9px;font-weight:700;letter-spacing:.03em;
color:var(--cyan);background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.35);
border-radius:5px;padding:1px 6px;text-transform:none;
}
/* Freccina espandibile per i database logici accanto al nome del Nodo -
niente colonna fissa quasi sempre vuota (versione precedente, tolta
su richiesta), solo un dettaglio in piu' per chi vuole vederlo. */
.db-drill{
background:transparent;border:none;color:var(--text-faint);cursor:pointer;font-size:11px;
padding:0 5px 0 0;transition:transform .15s;display:inline-block;
}
.db-drill[aria-expanded="true"]{transform:rotate(90deg)}
.db-drill-row td{background:var(--panel-2);padding:8px 14px}
.db-drill-list{display:flex;flex-wrap:wrap;gap:6px}
.db-chip{
font-family:monospace;font-size:11px;color:var(--text-dim);background:var(--panel);
border:1px solid var(--border);border-radius:5px;padding:2px 8px;
}
.node-detail-list{
display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:6px 24px;margin:0;
}
.db-drill-list + .node-detail-list{margin-top:10px}
/* Ogni coppia dt/dd e' una mini-griglia a due colonne fisse (etichetta |
valore), non piu' flex space-between dentro la griglia auto-fit esterna:
con flex, il numero di voci per riga cambiava a seconda di quante ne
entravano nella cella auto-fit, e l'occhio le leggeva come disallineate
(peggiorato aggiungendo Nome servizio/PID, passando da 7 a 9 voci).
Colonna etichetta a larghezza fissa mantiene l'allineamento verticale
indipendentemente da quante coppie ci sono o come si dispongono. */
.node-detail-list > div{display:grid;grid-template-columns:112px 1fr;gap:8px;font-size:11.5px;align-items:baseline}
.node-detail-list dt{color:var(--text-faint)}
.node-detail-list dd{margin:0;color:var(--text-dim);font-family:monospace;text-align:left;word-break:break-all}
.defaults-hint{
font-size:11.5px;line-height:1.6;min-height:14px;margin-bottom:2px;
}
.defaults-hint code{font-family:monospace;background:var(--panel-2);border-radius:4px;padding:1px 5px}
/* Nodo che eroga licenza al Gruppo (token_port valorizzata) - evidenziato
per rendere visibile in console un pezzo di cui prima non c'era traccia
(richiesta esplicita: l'ambiente deve essere "autonomo"). */
.license-node{background:rgba(242,184,75,.06)}
.license-node .svc-name{border-left:2px solid var(--gold)}
.license-tag{
display:inline-block;margin-left:6px;font-size:9.5px;font-weight:700;letter-spacing:.03em;
color:var(--gold);background:rgba(242,184,75,.14);border:1px solid rgba(242,184,75,.35);
border-radius:5px;padding:1px 6px;vertical-align:middle;
}
.trial-banner{
display:flex;align-items:center;gap:10px;background:rgba(242,184,75,.1);border:1px solid rgba(242,184,75,.3);
border-radius:9px;padding:11px 16px;font-size:12.5px;color:var(--gold);margin-bottom:20px;
}
@media(max-width:820px){
.shell-main{flex-direction:column}
.auth-left{display:none}
.auth-right{width:100%}
}
/* --- Ops console (monitoraggio ambienti) --- */
.ops{flex:1;padding:28px 32px;overflow-y:auto;min-width:0}
.ops-head{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.ops-head h1{font-size:20px;font-weight:600}
.ops-head .crumb{font-family:monospace;font-size:11.5px;color:var(--text-faint)}
.ops-sub{color:var(--text-dim);font-size:12.5px;margin-bottom:20px;max-width:760px;line-height:1.6}
.ops-stripe{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--border-soft);
border:1px solid var(--border-soft);border-radius:var(--r);overflow:hidden;margin-bottom:16px}
.ops-stat{background:var(--panel);padding:13px 16px}
.ops-stat .k{font-family:monospace;font-size:10.5px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.6px}
.ops-stat .v{font-size:22px;font-weight:600;margin-top:4px;font-variant-numeric:tabular-nums}
.ops-stat.ok .v{color:var(--green)} .ops-stat.warn .v{color:var(--gold)} .ops-stat.fail .v{color:var(--red)}
.ops-stat.usr .v{color:var(--indigo)}
/* Barra di distribuzione degli stati, dal mock Luna Ops: a colpo d'occhio
quanta parte del gruppo e' sana. Sta appiccicata sotto la striscia. */
.ops-distrib{display:flex;height:7px;border-radius:5px;overflow:hidden;margin-bottom:16px;
border:1px solid var(--border-soft);background:var(--panel-2)}
.ops-stripe + .ops-distrib{margin-top:-8px}
.ops-distrib span{display:block;transition:width .4s ease}
.ops-distrib .run{background:var(--green)}
.ops-distrib .warn{background:var(--gold)}
.ops-distrib .fail{background:var(--red)}
/* Le due zone dell'intestazione di gruppo: osservare a sinistra, agire a
destra. Prima i pulsanti erano tutti in fila, e il piu' innocuo
("Aggiorna stato") stava accanto a quelli che installano e rimuovono. */
.host-zone{display:flex;align-items:center;gap:6px;padding:0 10px}
.host-zone + .host-zone{border-left:1px solid var(--border)}
.host-zone-tag{font-family:monospace;font-size:9px;text-transform:uppercase;
letter-spacing:.08em;color:var(--text-faint)}
.host-zone--watch .host-zone-tag{color:var(--cyan)}
/* Servizi reali non ancora in anagrafica, proposti per l'adozione. */
.adopt-panel{border-top:1px solid var(--border-soft);background:var(--panel-2);padding:12px 18px}
.adopt-head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.adopt-title{font-size:12.5px;font-weight:600;color:var(--gold)}
.adopt-sub{font-size:11.5px;color:var(--text-faint)}
.adopt-list{display:flex;flex-direction:column;gap:6px}
.adopt-row{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--panel);
border:1px solid var(--border);border-radius:8px;font-size:12.5px;flex-wrap:wrap}
.adopt-row .nm{font-weight:600;color:var(--text)}
.adopt-row .meta{font-family:monospace;font-size:11.5px;color:var(--text-dim)}
.adopt-row .spacer{flex:1}
.ops-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.ops-search{flex:1;min-width:200px;display:flex;align-items:center;gap:8px;background:var(--panel);
border:1px solid var(--border);border-radius:8px;padding:7px 11px}
.ops-search input{background:none;border:none;outline:none;color:var(--text);font-family:monospace;font-size:12.5px;width:100%}
.ops-search svg{stroke:var(--text-faint);fill:none;stroke-width:2;flex:none}
.ops-chips{display:flex;gap:6px;flex-wrap:wrap}
.ops-chip{font-family:monospace;font-size:11.5px;color:var(--text-dim);cursor:pointer;padding:6px 11px;
border:1px solid var(--border);border-radius:7px;background:var(--panel);user-select:none;transition:.15s}
.ops-chip:hover{border-color:var(--text-faint);color:var(--text)}
.ops-chip.on{background:var(--panel-2);border-color:var(--cyan);color:var(--text)}
.ops-table-wrap{border:1px solid var(--border-soft);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.ops-row-head{display:grid;grid-template-columns:1.4fr 1.2fr 110px 130px 140px 90px;gap:12px;align-items:center;
height:36px;padding:0 16px;background:var(--panel-2);border-bottom:1px solid var(--border);
font-family:monospace;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-faint)}
.ops-row{display:grid;grid-template-columns:1.4fr 1.2fr 110px 130px 140px 90px;gap:12px;align-items:center;
min-height:48px;padding:8px 16px;border-bottom:1px solid var(--border-soft);position:relative;transition:background .12s}
.ops-row:last-child{border-bottom:none}
.ops-row:hover{background:var(--panel-2)}
.ops-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--text-faint)}
.ops-row[data-status="healthy"]::before{background:var(--green)}
.ops-row[data-status="degraded"]::before{background:var(--gold)}
.ops-row[data-status="down"]::before{background:var(--red)}
.ops-row .nm{font-weight:600;font-size:13.5px}
.ops-row .org{font-family:monospace;font-size:12px;color:var(--text-dim)}
.ops-led{display:inline-flex;align-items:center;gap:6px;font-family:monospace;font-size:10.5px;
text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.ops-led .dot{width:7px;height:7px;border-radius:50%}
.ops-led.healthy{color:var(--green)} .ops-led.healthy .dot{background:var(--green);box-shadow:0 0 6px var(--green)}
.ops-led.degraded{color:var(--gold)} .ops-led.degraded .dot{background:var(--gold)}
.ops-led.down{color:var(--red)} .ops-led.down .dot{background:var(--red)}
.ops-led.unknown{color:var(--text-faint)} .ops-led.unknown .dot{background:var(--text-faint)}
.ops-row .dbname{font-family:monospace;font-size:11.5px;color:var(--text-dim)}
.ops-row .checked{font-family:monospace;font-size:11px;color:var(--text-faint)}
.ops-row .note{font-size:11px;color:var(--text-faint);font-style:italic}
.ops-row .admin-link{font-family:monospace;font-size:11px;color:var(--cyan);text-decoration:none;
border:1px solid var(--border);border-radius:6px;padding:5px 9px;white-space:nowrap}
.ops-row .admin-link:hover{border-color:var(--cyan)}
.ops-empty{padding:40px;text-align:center;color:var(--text-dim);font-size:13px}
@media(max-width:900px){
.ops-stripe{grid-template-columns:repeat(3,1fr)}
.ops-row-head,.ops-row{grid-template-columns:1.4fr 1fr 90px 100px}
.ops-row-head span:nth-child(5),.ops-row-head span:nth-child(6),
.ops-row .dbname,.ops-row .checked{display:none}
}
/* --- Host console (hcr_ops) --- */
.host-list{display:flex;flex-direction:column;gap:16px}
.host-card{border:1px solid var(--border-soft);border-radius:var(--r);background:var(--panel);overflow:hidden}
.host-head{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--panel-2);
border-bottom:1px solid var(--border);flex-wrap:wrap}
.host-name{font-weight:600;font-size:14.5px}
.host-org{font-family:monospace;font-size:11.5px;color:var(--text-dim)}
.host-url{font-family:monospace;font-size:11px;color:var(--text-faint);word-break:break-all}
.host-badge{display:inline-flex;align-items:center;gap:6px;font-family:monospace;font-size:10.5px;
text-transform:uppercase;letter-spacing:.4px;font-weight:600;padding:3px 9px;border-radius:999px}
.host-badge .dot{width:6px;height:6px;border-radius:50%}
.host-badge.ok{color:var(--green);background:rgba(52,211,153,.1)}
.host-badge.ok .dot{background:var(--green);box-shadow:0 0 6px var(--green)}
.host-badge.down{color:var(--red);background:rgba(242,118,91,.1)}
.host-badge.down .dot{background:var(--red)}
.host-seen{font-family:monospace;font-size:10.5px;color:var(--text-faint)}
.host-spacer{flex:1}
.host-btn{font-family:monospace;font-size:11.5px;color:var(--text-dim);cursor:pointer;padding:6px 12px;
border:1px solid var(--border);border-radius:7px;background:var(--panel);transition:.15s}
.host-btn:hover{border-color:var(--cyan);color:var(--text)}
.host-btn:disabled{opacity:.5;cursor:wait}
.host-error{padding:8px 18px;font-size:11.5px;color:var(--red);background:rgba(242,118,91,.08);
border-bottom:1px solid var(--border-soft)}
.host-warning{padding:8px 18px;font-size:11.5px;color:var(--gold);background:rgba(242,184,75,.08);
border-bottom:1px solid var(--border-soft)}
.adopt-check{
display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text);cursor:pointer;
padding:6px 10px;border-radius:7px;background:var(--panel);border:1px solid var(--border);
}
.adopt-check input{cursor:pointer;flex-shrink:0}
.adopt-check span{flex:1}
.license-badge{
font-family:monospace;font-size:10.5px;font-weight:700;letter-spacing:.02em;padding:3px 9px;
border-radius:6px;cursor:pointer;border:1px solid transparent;
}
.license-badge.has-license{color:var(--gold);background:rgba(242,184,75,.12);border-color:rgba(242,184,75,.35)}
.license-badge.no-license{color:var(--text-faint);background:var(--panel-2);border-color:var(--border)}
.license-badge.no-license:hover{border-color:var(--cyan);color:var(--text)}
.svc-table{width:100%;border-collapse:collapse}
.svc-table th{text-align:left;font-family:monospace;font-size:10px;text-transform:uppercase;letter-spacing:.5px;
color:var(--text-faint);padding:8px 18px;border-bottom:1px solid var(--border-soft)}
.svc-table td{padding:9px 18px;border-bottom:1px solid var(--border-soft);font-size:12.5px;vertical-align:middle}
.svc-table tr:last-child td{border-bottom:none}
.svc-name{font-weight:600}
.svc-port{font-family:monospace;color:var(--text-dim)}
.svc-pill{display:inline-flex;align-items:center;gap:5px;font-family:monospace;font-size:10.5px;
text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.svc-pill .dot{width:6px;height:6px;border-radius:50%}
.svc-pill.active{color:var(--green)} .svc-pill.active .dot{background:var(--green);box-shadow:0 0 6px var(--green)}
.svc-pill.stopped{color:var(--text-dim)} .svc-pill.stopped .dot{background:var(--text-faint)}
.svc-pill.uninstalled{color:var(--text-faint)} .svc-pill.uninstalled .dot{background:var(--text-faint)}
.svc-actions{display:flex;gap:6px;justify-content:flex-end}
.svc-btn{font-family:monospace;font-size:11px;cursor:pointer;padding:5px 10px;border-radius:6px;
border:1px solid var(--border);background:var(--panel-2);color:var(--text-dim);transition:.15s}
.svc-btn:hover{color:var(--text);border-color:var(--text-faint)}
.svc-btn.start:hover{color:var(--green);border-color:var(--green)}
.svc-btn.stop:hover{color:var(--gold);border-color:var(--gold)}
.svc-btn.uninstall:hover{color:var(--red);border-color:var(--red)}
.svc-empty{padding:18px;text-align:center;color:var(--text-faint);font-size:12px}
.install-form{display:none;padding:14px 18px;background:var(--panel-2);border-bottom:1px solid var(--border-soft);
gap:10px;flex-wrap:wrap}
.install-form.open{display:flex}
.install-form input{background:var(--panel);border:1px solid var(--border);border-radius:7px;padding:7px 10px;
font-family:monospace;font-size:12px;color:var(--text);flex:1;min-width:140px}
.install-form input:focus{outline:none;border-color:var(--cyan)}
/* Campi che nessun suggerimento puo' compilare (il nome e' una scelta
umana, la locazione fisica varia per ogni installazione) - un bordo
diverso li distingue a colpo d'occhio da quelli gia' precompilati,
cosi' si vede subito cosa va davvero deciso e cosa e' solo da confermare. */
.install-form input.field-manual{border-color:var(--indigo)}
.install-form input.field-manual::placeholder{color:var(--indigo);opacity:.75}
.install-form input.field-manual:focus{border-color:var(--cyan)}
/* Pannello staff: tre tessere icona in ordine cronologico */
.hub-wrap{width:100%;padding:56px 40px;display:flex;flex-direction:column;align-items:center}
.hub-wrap--flush{padding-top:16px}
.db-slug{display:flex;align-items:center;gap:10px;width:100%;margin-bottom:16px}
.db-slug-back{
display:flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none;
border:1px solid var(--border);border-radius:7px;color:var(--text-dim);text-decoration:none;transition:.15s;
}
.db-slug-back svg{stroke:currentColor;fill:none;stroke-width:2}
.db-slug-back:hover{border-color:var(--cyan);color:var(--cyan)}
.db-slug-crumb{font-family:monospace;font-size:12px;color:var(--text-faint)}
.db-slug-crumb a{color:var(--text-faint);text-decoration:none}
.db-slug-crumb a:hover{color:var(--cyan)}
.db-slug-crumb b{color:var(--text);font-weight:600}
.db-slug-crumb span{margin:0 4px}
.hub-head{max-width:720px;text-align:center;margin-bottom:40px}
.hub-head h1{font-size:26px;font-weight:300;color:var(--text)}
.hub-head h1 b{font-weight:700;color:var(--cyan)}
.hub-head p{font-size:13px;color:var(--text-dim);margin-top:12px;line-height:1.7}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;width:100%;max-width:980px}
.hub-tile{display:flex;flex-direction:column;gap:12px;padding:26px 24px;border:1px solid var(--border-soft);
border-radius:var(--r);background:var(--panel);text-decoration:none;color:inherit;position:relative;
overflow:hidden;transition:border-color .15s,transform .15s}
.hub-tile:hover{border-color:var(--cyan);transform:translateY(-2px)}
.hub-tile::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--cyan)}
.hub-tile.step-2::before{background:var(--indigo)}
.hub-tile.step-3::before{background:var(--gold)}
.hub-step{font-family:monospace;font-size:10px;letter-spacing:.6px;color:var(--text-faint);text-transform:uppercase}
.hub-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;
background:var(--panel-2);border:1px solid var(--border)}
.hub-icon svg{width:20px;height:20px;stroke:var(--cyan);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hub-tile.step-2 .hub-icon svg{stroke:var(--indigo)}
.hub-tile.step-3 .hub-icon svg{stroke:var(--gold)}
.hub-title{font-size:15.5px;font-weight:600}
.hub-desc{font-size:12px;color:var(--text-dim);line-height:1.6;flex:1}
.hub-stat{font-family:monospace;font-size:11px;color:var(--text-faint);border-top:1px solid var(--border-soft);padding-top:10px}
.hub-foot{margin-top:30px}
@media (max-width:860px){.hub-grid{grid-template-columns:1fr}}
/* Console di monitoraggio: schede Nodi in tempo reale / Ambienti dichiarati */
.view-tabs{display:flex;gap:18px;margin-bottom:22px;border-bottom:1px solid var(--border-soft)}
.view-tab{font-family:monospace;font-size:12.5px;font-weight:600;color:var(--text-dim);cursor:pointer;
padding:10px 2px;margin-bottom:-1px;border:none;background:none;border-bottom:2px solid transparent;
display:flex;align-items:center;gap:8px}
.view-tab .n{background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:1px 7px;
font-size:10.5px;color:var(--text-faint)}
.view-tab:hover{color:var(--text)}
.view-tab.on{color:var(--cyan);border-bottom-color:var(--cyan)}
.view-tab.on .n{color:var(--cyan);border-color:var(--cyan)}
.view-panel{display:none}
.view-panel.on{display:block}
/* --- schede dentro la card del gruppo (Stato / Consumi / Salute) ---------
Le tab cambiano ASPETTO della stessa entita'; le card, altrove, navigano
fra entita' diverse. Stessa regola gia' in uso nel mondo Analisi. */
/* Lenti, non schede: sono tre letture della STESSA lista di Nodi. Farne
schede dentro una card gia' dentro una sezione avrebbe prodotto schede
dentro schede - la confusione che questo riassetto sta togliendo. */
.card-tabs{display:flex;gap:6px;padding:12px 18px 0;background:var(--panel);flex-wrap:wrap}
.card-tab{font-family:monospace;font-size:11.5px;color:var(--text-dim);cursor:pointer;
padding:6px 13px;background:none;border:1px solid var(--border-soft);border-radius:20px}
.card-tab:hover{color:var(--text);border-color:var(--text-faint)}
.card-tab.on{background:var(--panel-2);border-color:var(--cyan);color:var(--text)}
.card-tab:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.card-pane[hidden]{display:none}
/* pannello che dichiara cosa non c'e' ancora, invece di mostrare gauge finti */
.pane-note{padding:18px;color:var(--text-dim);font-size:12.5px;line-height:1.7}
.pane-note-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:6px}
.pane-sources{margin-top:14px;display:grid;gap:1px;background:var(--border-soft);
border:1px solid var(--border-soft);border-radius:var(--r);overflow:hidden}
.pane-sources > div{display:grid;grid-template-columns:220px 1fr;gap:12px;background:var(--panel);padding:9px 14px}
.pane-sources dt{font-family:monospace;font-size:11.5px;color:var(--text)}
.pane-sources dd{font-size:12px;color:var(--text-faint)}
.pane-bar{display:flex;align-items:center;gap:12px;padding:14px 18px;flex-wrap:wrap}
.pane-hint{font-size:11.5px;color:var(--text-faint);flex:1;min-width:220px;line-height:1.6}
.pane-summary{font-family:monospace;font-size:12px;color:var(--text-dim)}
/* esito della diagnostica, un blocco per Nodo */
.health-list{padding:0 18px 18px;display:grid;gap:10px}
.health-item{border:1px solid var(--border-soft);border-radius:var(--r);background:var(--panel-2);
padding:12px 14px;position:relative;overflow:hidden}
.health-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--text-faint)}
.health-item[data-state="HEALTHY"]::before{background:var(--green)}
.health-item[data-state="DEGRADED"]::before{background:var(--red)}
.health-item[data-state="UNSUPPORTED"]::before{background:var(--gold)}
.health-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.health-head .nm{font-weight:600;font-size:13px}
.health-head .meta{font-family:monospace;font-size:11.5px;color:var(--text-faint)}
.health-verdict{font-family:monospace;font-size:10.5px;letter-spacing:.6px;padding:2px 8px;border-radius:20px;
border:1px solid var(--border-soft)}
.health-item[data-state="HEALTHY"] .health-verdict{color:var(--green);border-color:var(--green)}
.health-item[data-state="DEGRADED"] .health-verdict{color:var(--red);border-color:var(--red)}
.health-criteria{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.health-crit{font-family:monospace;font-size:10.5px;padding:3px 8px;border-radius:4px;
border:1px solid var(--border-soft);color:var(--text-faint)}
.health-crit.ok{color:var(--green);border-color:color-mix(in srgb,var(--green) 40%,transparent)}
.health-crit.ko{color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,transparent)}
.health-reasons{margin:9px 0 0;padding-left:18px;font-size:12px;color:var(--text-dim);line-height:1.7}
.health-foot{display:flex;align-items:center;gap:10px;margin-top:11px;flex-wrap:wrap}
.health-progress{font-family:monospace;font-size:11.5px;color:var(--text-faint)}
.health-progress[data-state="RECOVERED"]{color:var(--green)}
.health-progress[data-state="TIMEOUT"]{color:var(--gold)}
.health-progress[data-state="FAILED"]{color:var(--red)}
/* --- sezioni di pagina: Monitoraggio / Intervento / Agente --------------
Il filtro e' in CSS e non in JavaScript di proposito: i moduli
(installa, licenze, token) accendono e spengono da soli il proprio
attributo "hidden", e un secondo meccanismo che scrivesse sullo stesso
attributo si sarebbe pestato i piedi col primo. Qui la sezione attiva
sta sull'antenato e nessun handler esistente viene toccato. */
.page-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border-soft);
flex-wrap:wrap;margin-bottom:16px}
.page-tab{font-family:monospace;font-size:12.5px;color:var(--text-dim);cursor:pointer;
padding:11px 18px;background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.page-tab:hover{color:var(--text)}
.page-tab[aria-selected="true"]{color:var(--text);border-bottom-color:var(--cyan)}
.page-tab:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;border-radius:4px}
.ops[data-page-active="mon"] [data-sect]:not([data-sect~="mon"]),
.ops[data-page-active="int"] [data-sect]:not([data-sect~="int"]),
.ops[data-page-active="age"] [data-sect]:not([data-sect~="age"]){display:none}
/* Le azioni di ciclo di vita (avvia, ferma, disinstalla) sono interventi:
in Monitoraggio la colonna sparisce, cosi' la regola "qui non si tocca
nulla" e' vera anche a colpo d'occhio, non solo a parole. */
.ops[data-page-active="mon"] .svc-actions,
.ops[data-page-active="age"] .svc-actions{display:none}
/* il contratto della sezione: cosa fa, e cosa non fa mai */
.contract{background:var(--panel);border:1px solid var(--border-soft);
border-left:3px solid var(--cyan);border-radius:var(--r);padding:15px 18px;
display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.contract-k{font-family:monospace;font-size:10.5px;text-transform:uppercase;
letter-spacing:.7px;color:var(--text-faint)}
.contract-does{font-size:14px;color:var(--text);max-width:70ch;line-height:1.6}
.contract-never{font-size:12.5px;color:var(--text-dim);max-width:70ch;line-height:1.6}
.contract-does b,.contract-never b{color:var(--text);font-weight:600}
/* --- fisarmonica di Intervento -----------------------------------------
Ogni voce dichiara in una riga cosa fa e resta chiusa finche' non la
apri. Sostituisce due card a piena altezza che stavano sempre aperte
in cima alla pagina anche a impianto gia' configurato. */
.acc{display:flex;flex-direction:column}
.acc-row{border-bottom:1px solid var(--border-soft)}
.acc-row:last-child{border-bottom:none}
.acc-head{display:flex;align-items:baseline;gap:12px;padding:13px 18px;cursor:pointer;
background:none;border:none;width:100%;text-align:left;color:var(--text);font:inherit}
.acc-head:hover{background:var(--panel-2)}
.acc-head:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.acc-row.open .acc-head{background:var(--panel-2)}
.acc-t{font-size:13.5px;font-weight:500}
.acc-p{font-size:12.5px;color:var(--text-dim);flex:1;min-width:0}
/* La freccia segue lo stato via CSS invece che via JavaScript: le righe
dei moduli sono aperte da handler che di questa freccia non sanno nulla,
e :has() le legge senza doverli modificare. */
.acc-c{font-family:monospace;font-size:11px;color:var(--text-faint)}
.acc-c::before{content:"\25B8"}
.acc-row.open > .acc-head .acc-c::before,
.acc-row:has(.install-form.open) > .acc-head .acc-c::before{content:"\25BE"}
.acc-row:has(.install-form.open) > .acc-head{background:var(--panel-2)}
/* la fisarmonica dentro la card del gruppo: stesso impianto, bordi propri */
.acc-in-card{border-top:1px solid var(--border-soft)}
.acc-in-card .install-form{border-bottom:none;background:var(--panel-2)}
.acc-body{padding:0 18px 17px;display:none}
.acc-row.open .acc-body{display:block}
.acc-steps{margin:0;padding-left:19px;color:var(--text-dim);font-size:12.5px;line-height:1.9}
.acc-steps b{color:var(--text);font-weight:600}
.acc-hint{font-size:11.5px;color:var(--text-faint);margin:6px 0 16px;line-height:1.6}
.acc-hint b{color:var(--text-dim)}
/* --- ambiente di definizione dei Nodi ------------------------------------
Le fasi sono ripetibili tranne l'ultima, e la pagina lo mostra: il
pulsante "Metti in servizio" nasce spento e si accende solo quando il
referto passa. Una condizione visibile prima vale piu' di un errore dopo. */
.def-count{font-family:monospace;font-size:11.5px;color:var(--text-faint)}
.def-list{display:flex;flex-direction:column}
.def-node{border-top:1px solid var(--border-soft)}
.def-head{display:flex;align-items:center;gap:12px;padding:13px 18px;width:100%;
background:none;border:none;text-align:left;color:var(--text);font:inherit;cursor:pointer}
.def-head:hover{background:var(--panel-2)}
.def-head:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.def-node.open .def-head{background:var(--panel-2)}
.def-nm{font-family:monospace;font-size:13.5px;font-weight:600;flex:none}
.def-cls{font-family:monospace;font-size:9.5px;letter-spacing:.5px;padding:2px 8px;
border-radius:20px;border:1px solid var(--indigo);color:var(--indigo);flex:none}
.def-desc{font-size:12.5px;color:var(--text-dim);flex:1;min-width:0;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.def-caret{font-family:monospace;font-size:11px;color:var(--text-faint);flex:none}
.def-caret::before{content:"\25B8"}
.def-node.open .def-caret::before{content:"\25BE"}
.def-life{font-family:monospace;font-size:10px;letter-spacing:.5px;display:inline-flex;
align-items:center;gap:6px;flex:none}
.def-life .d{width:7px;height:7px;border-radius:50%;background:var(--text-faint)}
.def-life.defined{color:var(--text-faint)}
.def-life.prepared{color:var(--gold)} .def-life.prepared .d{background:var(--gold)}
.def-life.verified{color:var(--cyan)} .def-life.verified .d{background:var(--cyan)}
.def-life.in_service{color:var(--green)} .def-life.in_service .d{background:var(--green);box-shadow:0 0 6px var(--green)}
.def-body{display:none;padding:4px 18px 18px;flex-direction:column;gap:12px}
.def-node.open .def-body{display:flex}
.def-row{display:flex;gap:12px;flex-wrap:wrap}
.def-f{display:flex;flex-direction:column;gap:5px;flex:1;min-width:190px}
.def-f .k{font-family:monospace;font-size:10px;text-transform:uppercase;
letter-spacing:.6px;color:var(--text-faint)}
.def-f input,.def-f select,.def-f textarea{background:var(--panel-2);border:1px solid var(--border-soft);
border-radius:7px;padding:8px 11px;color:var(--text);font-size:13px;width:100%;font-family:inherit}
.def-f textarea{resize:vertical;line-height:1.55}
.def-f input:focus,.def-f select:focus,.def-f textarea:focus{outline:none;border-color:var(--cyan)}
.def-hint{font-size:11.5px;color:var(--text-faint);line-height:1.6;margin:0;max-width:74ch}
.def-hint b{color:var(--text-dim)}
.def-tags{display:flex;gap:6px;flex-wrap:wrap}
.def-tag{font-family:monospace;font-size:10.5px;padding:3px 9px;border-radius:5px;
background:var(--panel-2);border:1px solid var(--border-soft);color:var(--text-faint)}
/* referto: stessa forma di quello di salute, ogni riga porta la sua prova */
.def-checks{display:flex;flex-direction:column;gap:1px;background:var(--border-soft);
border:1px solid var(--border-soft);border-radius:8px;overflow:hidden}
.def-checks:empty{display:none}
.def-check{display:grid;grid-template-columns:24px 1fr;gap:11px;background:var(--panel);padding:10px 14px}
.def-check .m{font-family:monospace;font-size:13px}
.def-check.ok .m{color:var(--green)} .def-check.ko .m{color:var(--red)}
.def-check .t{font-size:13px;font-weight:500}
.def-check .d{font-size:12px;color:var(--text-dim);line-height:1.55;margin-top:2px}
.def-check .ev{font-family:monospace;font-size:11px;color:var(--text-faint);margin-top:3px}
.def-gate{border-left:3px solid var(--gold);background:var(--panel-2);border-radius:8px;
padding:11px 15px;font-size:12.5px;color:var(--text-dim);line-height:1.6}
.def-gate.ok{border-left-color:var(--green);color:var(--text)}
.def-gate.ko{border-left-color:var(--red)}
.def-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.def-actions .def-sep{width:1px;height:22px;background:var(--border-soft)}
.def-actions .def-spacer{flex:1}
.host-btn.go{border-color:var(--green);color:var(--green)}
.host-btn.warn{border-color:var(--red);color:var(--red)}
.host-btn.key{border-color:var(--cyan);color:var(--cyan)}
.host-btn[disabled]{opacity:.4;cursor:not-allowed}
.def-msg{font-size:12.5px;min-height:1em}
.def-msg.ok{color:var(--green)} .def-msg.err{color:var(--red)}
.def-empty{padding:18px;font-size:12.5px;color:var(--text-faint)}
/* --- ricerca sugli oggetti ----------------------------------------------- */
.mono{font-family:monospace}
.src-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.src-box{flex:1;min-width:240px;display:flex;align-items:center;gap:11px;background:var(--panel);
border:1px solid var(--border);border-radius:var(--r);padding:13px 17px}
.src-box svg{stroke:var(--cyan);flex:none}
.src-box input{background:none;border:none;outline:none;color:var(--text);
font-family:monospace;font-size:15px;width:100%}
.src-count{font-family:monospace;font-size:12px;color:var(--text-faint)}
.src-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.src-lbl{font-family:monospace;font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-faint)}
.src-chips .chip{font-family:monospace;font-size:11.5px;color:var(--text-dim);text-decoration:none;
padding:6px 12px;border-radius:20px;border:1px solid var(--border-soft)}
.src-chips .chip:hover{color:var(--text);border-color:var(--text-faint)}
.src-chips .chip.on{background:var(--panel-2);border-color:var(--cyan);color:var(--text)}
.src-cols{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
@media (max-width:860px){.src-cols{grid-template-columns:1fr}}
.src-res{display:flex;flex-direction:column;gap:1px;background:var(--border-soft);
border:1px solid var(--border-soft);border-radius:var(--r);overflow:hidden}
.src-hit{background:var(--panel);padding:13px 17px;display:flex;flex-direction:column;gap:6px}
.src-hit:hover{background:var(--panel-2)}
.src-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.src-kind{font-family:monospace;font-size:9.5px;letter-spacing:.5px;padding:2px 8px;border-radius:4px;
border:1px solid var(--border);color:var(--text-faint);flex:none;text-transform:uppercase}
.src-kind.c{color:var(--indigo);border-color:var(--indigo)}
.src-kind.t{color:var(--cyan);border-color:var(--cyan)}
.src-kind.m{color:var(--gold);border-color:var(--gold)}
.src-nm{font-family:monospace;font-size:14px;font-weight:600}
.src-path{font-family:monospace;font-size:11px;color:var(--text-faint);margin-left:auto}
.src-why{display:flex;gap:7px;flex-wrap:wrap}
/* Dalla ricerca all'oggetto: documentazione e ambienti di analisi. */
.src-path a{color:inherit;text-decoration:none;border-bottom:1px dotted var(--border)}
.src-path a:hover,.src-path a:focus-visible{color:var(--cyan);border-bottom-color:var(--cyan);outline:none}
.src-go{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.src-go a{font-size:11.5px;color:var(--cyan);text-decoration:none;border:1px solid var(--border);border-radius:999px;padding:2px 10px}
.src-go a:hover,.src-go a:focus-visible{border-color:var(--cyan);outline:none}
.src-why span{font-size:11.5px;color:var(--text-dim);background:var(--panel-2);
border:1px solid var(--border-soft);border-radius:5px;padding:2px 9px}
.src-why b{color:var(--text-faint);font-weight:400;font-family:monospace;font-size:10px;
text-transform:uppercase;letter-spacing:.4px;margin-right:4px}
.src-more,.src-empty{background:var(--panel);border:1px solid var(--border-soft);border-radius:var(--r);
padding:15px 17px;font-size:12.5px;color:var(--text-faint);text-align:center}
.src-side{display:flex;flex-direction:column;gap:14px}
.src-box2{background:var(--panel);border:1px solid var(--border-soft);border-radius:var(--r);overflow:hidden}
.src-box2 h3{font-size:11px;font-family:monospace;text-transform:uppercase;letter-spacing:.6px;
color:var(--text-faint);margin:0;padding:11px 15px;border-bottom:1px solid var(--border-soft);font-weight:400}
.src-in{padding:13px 15px;display:flex;flex-direction:column;gap:10px}
.src-terms{display:flex;gap:6px;flex-wrap:wrap}
.src-term{font-family:monospace;font-size:11px;padding:3px 9px;border-radius:5px;text-decoration:none;
border:1px solid var(--border-soft);background:var(--panel-2);color:var(--text-dim)}
.src-term:hover{border-color:var(--cyan);color:var(--text)}
.src-scope{display:flex;flex-direction:column;gap:7px;font-size:12.5px;color:var(--text-dim)}
.src-scope div{display:flex;justify-content:space-between;gap:10px}
.src-scope .n{font-family:monospace;color:var(--text-faint)}
.src-note{font-size:11.5px;color:var(--text-faint);line-height:1.6;margin:0}
.src-note b{color:var(--text-dim)}
/* la costellazione di un risultato: dimensioni di un cubo, o catena di
gerarchia di una tabella. I nodi sono collegati da una linea sottile
perche' formano una catena, non un elenco. */
.src-const{display:flex;align-items:center;flex-wrap:wrap;gap:0;margin-top:2px}
.src-node{font-family:monospace;font-size:10.5px;color:var(--text-faint);
border:1px solid var(--border-soft);border-radius:20px;padding:2px 9px;background:var(--panel-2);
position:relative;margin-right:14px}
.src-node:not(:last-child)::after{content:"";position:absolute;left:100%;top:50%;
width:14px;height:1px;background:var(--border)}
.src-hit:hover .src-node{border-color:var(--indigo);color:var(--text-dim)}
/* --- creare o adottare un Nodo, dentro l'ambiente di definizione ---------
Sta qui e non in Intervento perche' la card promette di DEFINIRE: una
pagina che promette e sa solo consultare manda l'utente a cercare
altrove. */
.def-new{border-bottom:1px solid var(--border-soft);background:var(--panel-2);padding:14px 18px;
display:flex;flex-direction:column;gap:12px}
.def-new-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.def-new-t{font-size:13.5px;font-weight:600}
.def-new-s{font-size:12.5px;color:var(--text-dim)}
.def-new-form{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.def-adopt{display:flex;flex-direction:column;gap:1px;background:var(--border-soft);
border:1px solid var(--border-soft);border-radius:8px;overflow:hidden}
.def-adopt:empty{display:none}
.def-adopt-t{background:var(--panel);padding:9px 14px;font-family:monospace;font-size:10px;
text-transform:uppercase;letter-spacing:.6px;color:var(--text-faint)}
.def-adopt-row{background:var(--panel);padding:10px 14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.def-adopt-row .nm{font-family:monospace;font-size:13px;font-weight:600}
.def-adopt-row .meta{font-family:monospace;font-size:11px;color:var(--text-faint)}
/* --- diagnosi dell'agente (scheda "Agente") ------------------------------
Righe chiave/valore, non una tabella: sono sei fatti, e ognuno vale da
solo. Il colore dice se e' un fatto tranquillo o uno che spiega perche'
la console non funziona. */
.agent-diag{display:flex;flex-direction:column;gap:1px;background:var(--border-soft);
border:1px solid var(--border-soft);border-radius:8px;overflow:hidden}
.agent-diag:empty{display:none}
.diag-row{background:var(--panel);padding:10px 14px;display:flex;gap:16px;align-items:baseline}
.diag-row .k{flex:0 0 190px;font-family:monospace;font-size:10px;text-transform:uppercase;
letter-spacing:.6px;color:var(--text-faint)}
.diag-row .v{font-size:13px}
.diag-row.ok .v{color:var(--green)}
.diag-row.warn .v{color:var(--gold)}
.diag-row.bad .v{color:var(--red);font-weight:600}
.pane-spacer{flex:1}
.host-btn.danger{border-color:var(--red);color:var(--red)}
.host-btn.danger:hover:not(:disabled){background:var(--red);color:var(--panel)}
.host-badge.busy{color:var(--gold);border-color:var(--gold)}
.host-badge.busy .dot{background:var(--gold);animation:pulsa 1.2s ease-in-out infinite}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.host-badge.busy .dot{animation:none}}
/* --- identita' verso il Nodo, dentro la scheda del Nodo -----------------
Sta nella scheda perche' e' un fatto di QUEL Nodo, non una preferenza
globale: prima era una costante uguale per ogni cliente. */
.def-cred{border:1px solid var(--border-soft);border-radius:8px;background:var(--panel-2);
padding:12px 14px;display:flex;flex-direction:column;gap:10px;margin-top:4px}
.def-cred-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.def-cred-t{font-size:12.5px;font-weight:600}
.def-cred-s{font-size:12px;color:var(--text-faint)}
.def-cred-list{display:flex;flex-direction:column;gap:1px;background:var(--border-soft);
border:1px solid var(--border-soft);border-radius:6px;overflow:hidden}
.def-cred-row{background:var(--panel);padding:8px 12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.def-cred-row .rl{font-family:monospace;font-size:11px;text-transform:uppercase;letter-spacing:.5px;
color:var(--cyan);min-width:90px}
.def-cred-row .us{font-family:monospace;font-size:13px;font-weight:600}
.def-cred-row .pw,.def-cred-row .up{font-size:11px;color:var(--text-faint)}
.def-cred-none{background:var(--panel);padding:9px 12px;font-size:12px;color:var(--gold)}
.def-cred-form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
/* --- scheda dell'organizzazione ----------------------------------------
I ruoli sono la ragione per cui questa pagina esiste: prima si potevano
creare solo da /admin/, cioe' fuori dal prodotto. */
.org-detail .page-tabs{margin-bottom:16px}
.org-messages{margin-bottom:14px;display:flex;flex-direction:column;gap:8px}
.org-role-form{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;
background:var(--panel-2);border:1px solid var(--border-soft);border-radius:8px;padding:12px 14px;margin:14px 0}
.org-roles{display:flex;flex-direction:column;gap:10px}
.org-role{border:1px solid var(--border-soft);border-radius:8px;background:var(--panel);overflow:hidden}
.org-role-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
padding:10px 14px;background:var(--panel-2);border-bottom:1px solid var(--border-soft)}
.org-role-head .rl{font-family:monospace;font-size:13.5px;font-weight:600;color:var(--cyan)}
.org-role-head .ds{font-size:12.5px;color:var(--text-dim)}
.org-role-head .gr{font-family:monospace;font-size:10.5px;color:var(--text-faint)}
.org-role-head form{margin:0}
.org-role-body{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:12px 14px}
.org-role-col .k{font-family:monospace;font-size:10px;text-transform:uppercase;letter-spacing:.6px;
color:var(--text-faint);margin-bottom:8px}
.org-member{display:flex;align-items:baseline;gap:10px;margin:0 0 4px}
.org-member .nm{font-size:13px}
.org-member-add{display:flex;gap:8px;align-items:center;margin-top:10px}
.org-proj{font-family:monospace;font-size:12px;margin-bottom:4px}
.org-role-col .vuoto{font-size:12px;color:var(--text-faint)}
.linkish{background:none;border:0;color:var(--gold);font-size:11.5px;cursor:pointer;padding:0}
.linkish:hover{text-decoration:underline}
@media (max-width:860px){.org-role-body{grid-template-columns:1fr}}
/* --- poteri su AOC: elenco chiuso, si accendono e si spengono ---------- */
.org-poteri{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px}
.org-poteri form{margin:0}
.potere{background:var(--panel-2);border:1px solid var(--border-soft);color:var(--text-dim);
border-radius:20px;padding:5px 12px;font-size:12px;cursor:pointer;font-family:inherit}
.potere:hover:not(:disabled){border-color:var(--cyan);color:var(--text)}
.potere.on{background:rgba(34,211,238,.12);border-color:var(--cyan);color:var(--cyan);font-weight:600}
.potere:disabled{cursor:default;opacity:.65}
/* --- pagina Utenti: vista per persona, in sola lettura ------------------ */
.utenti-cerca{margin-top:14px}
.utenti-cerca input{width:100%;max-width:420px;background:var(--panel-2);border:1px solid var(--border-soft);
border-radius:8px;padding:9px 12px;color:var(--text);font-family:inherit;font-size:13px}
.utenti-cerca input:focus{outline:none;border-color:var(--cyan)}
.utente-riga .org-link{color:var(--cyan);text-decoration:none;font-size:13px}
.utente-riga .ruolo-account{font-size:11px;color:var(--text-faint);margin-left:6px}
.utente-riga .chip{display:inline-block;background:var(--panel-2);border:1px solid var(--border-soft);
border-radius:14px;padding:2px 9px;font-size:11px;color:var(--text-dim);margin:0 4px 4px 0}
.utente-riga .chip.dati{border-color:var(--cyan);color:var(--cyan);font-family:monospace}
.utente-riga .vuoto{font-size:11.5px;color:var(--text-faint)}
.tag-off{background:var(--red);color:var(--panel);border-radius:10px;padding:1px 7px;font-size:10px}
.tag-staff{color:var(--gold);font-size:11px}
h2.sez{font-size:14px;margin:26px 0 10px;font-weight:600}
.anomalie{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.anomalia{border:1px solid var(--border-soft);border-radius:8px;background:var(--panel);padding:12px 14px}
.anomalia .k{font-family:monospace;font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--gold)}
.anomalia .d{font-size:12px;color:var(--text-dim);margin:6px 0 8px}
.anomalia .v{font-family:monospace;font-size:12.5px;margin-bottom:3px}
.anomalia .ok{font-size:12px;color:var(--green)}
/* --- tendine: erano quelle native, e si vedeva ------------------------- */
.org-detail select,
.def-cred select,
.def-f select{
appearance:none;-webkit-appearance:none;
background-color:var(--panel-2);
background-image:linear-gradient(45deg,transparent 50%,var(--text-faint) 50%),
linear-gradient(135deg,var(--text-faint) 50%,transparent 50%);
background-position:calc(100% - 15px) 52%, calc(100% - 10px) 52%;
background-size:5px 5px, 5px 5px;
background-repeat:no-repeat;
border:1px solid var(--border-soft);border-radius:7px;
color:var(--text);font-family:inherit;font-size:12.5px;
padding:7px 30px 7px 11px;cursor:pointer;min-width:150px}
.org-detail select:hover,.def-cred select:hover,.def-f select:hover{border-color:var(--cyan)}
.org-detail select:focus,.def-cred select:focus,.def-f select:focus{outline:none;border-color:var(--cyan)}
.org-detail select option{background:var(--panel);color:var(--text)}
.org-member-role{margin:0}
/* una pastiglia che non ha preso: si vede, invece di restare com'era */
.org-potere.fallita button{border-color:var(--red);color:var(--red)}
/* --- terza porta: creare un ambiente da zero --------------------------- */
.def-zero{border:1px dashed var(--border);border-radius:8px;padding:12px 14px;
display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.def-zero .def-hint.warn{color:var(--gold)}
.def-dbl{border:1px solid var(--border-soft);border-radius:8px;background:var(--panel-2);
padding:12px 14px;display:flex;flex-direction:column;gap:10px;margin-top:4px}
.def-dbl .db-chip{margin-right:6px}
.def-radici{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
/* --- catalogo macro: la progressione del porting, per mestiere --------- */
.cat-aree{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.cat-area{border:1px solid var(--border-soft);border-radius:8px;background:var(--panel);padding:12px 14px}
.cat-area-head{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.cat-area-head .nm{font-size:13px;font-weight:600}
.cat-area-head .num{font-family:monospace;font-size:12px;color:var(--text-faint)}
.cat-barra{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--border-soft)}
.cat-barra .uso{background:var(--green)}
.cat-barra .ver{background:var(--gold)}
.cat-area-note{margin-top:6px;font-size:11px;color:var(--text-faint)}
.cat-riga .stato{font-family:monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px}
.cat-riga .stato.in-uso{color:var(--green)}
.cat-riga .stato.verificata{color:var(--gold)}
.cat-riga .stato.catalogata{color:var(--text-faint)}
.cat-riga .irrev{color:var(--red)}
/* Catalogo: filtri e raggruppamento per mestiere.
I chip sono interruttori, non link: restano premuti, e piu' d'uno alla
volta. Un filtro che si spegne da solo al primo clic altrove obbliga a
ricominciare, ed e' il motivo per cui la pagina dei poteri era stata
rifatta (feedback 2026-08-28). */
.cat-filtri{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 4px}
.cat-chip{font:inherit;font-size:11.5px;padding:3px 10px;border-radius:999px;cursor:pointer;
border:1px solid var(--border-soft);background:var(--panel);color:var(--text-faint)}
.cat-chip:hover{border-color:var(--cyan)}
.cat-chip[aria-pressed="true"]{background:var(--panel-2);color:var(--text);border-color:var(--cyan)}
.cat-chip .pt{font-family:monospace;opacity:.7;margin-left:6px}
.cat-conta{margin-left:auto;font-family:monospace;font-size:12px;color:var(--text-faint)}
.cat-famiglia{display:flex;gap:6px;align-items:center}
.cat-famiglia > .et{font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.5px}
.cat-gruppo{border:1px solid var(--border-soft);border-radius:8px;background:var(--panel);
margin-bottom:8px;overflow:hidden}
.cat-gruppo[hidden]{display:none}
/* .ops-row dichiara display:grid, che VINCE sull'hidden del browser: senza
questa riga le righe filtrate restavano visibili e il contatore diceva
un numero diverso da quello che si vedeva. Difetto ereditato dalla
vecchia lista piatta, scoperto solo guardando la pagina (31/08/2026). */
.cat-riga[hidden]{display:none}
/* Conoscenza: i concetti in chiaro.
Il testo e' preformattato perche' quei blocchi contengono tabelle, frecce
e allineamenti che portano significato: riflowarli li renderebbe prosa. */
.conc{border-top:1px solid var(--border-soft);padding:10px 0}
.conc[hidden]{display:none}
.conc:first-of-type{border-top:none}
.conc-titolo{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;
color:var(--cyan);margin-bottom:6px}
.conc-titolo.conc-misurato{color:var(--green)}
.conc-titolo.conc-aperto{color:var(--gold)}
.conc-testo{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
line-height:1.5;white-space:pre-wrap;color:var(--text);overflow-x:auto}
.conc-nota{color:var(--text-faint);border-left:2px solid var(--border-soft);padding-left:10px}
/* Le note sulla conoscenza. Restano SOTTO il concetto e non lo sostituiscono:
il fatto e la sua correzione devono potersi leggere insieme, altrimenti fra
sei mesi non si capisce piu' cosa credevamo e perche' abbiamo cambiato idea. */
.conc-azioni{float:right;display:inline-flex;gap:6px;opacity:0;transition:opacity .12s}
.conc:hover .conc-azioni,.conc-azioni:focus-within{opacity:1}
.nota-btn{font:inherit;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;
padding:2px 8px;border-radius:999px;cursor:pointer;
border:1px solid var(--border-soft);background:var(--panel);color:var(--text-faint)}
.nota-btn:hover{border-color:var(--cyan);color:var(--text)}
.conc-note{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.nota{border-left:3px solid var(--cyan);background:var(--panel-2);padding:7px 10px;border-radius:0 6px 6px 0}
.nota-correzione{border-left-color:var(--red)}
.nota-domanda{border-left-color:var(--gold)}
.nota-rimando{border-left-color:var(--cyan)}
.nota-risolta{opacity:.55;border-left-style:dashed}
.nota-capo{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--text-faint)}
.nota-tipo{text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.nota-chi{margin-left:auto}
.nota-capo .nota-btn{margin-left:0}
.nota-testo{margin-top:5px;font-size:12.5px;line-height:1.5;white-space:pre-wrap}
.nota-vuota{margin-top:5px;font-size:12px;font-style:italic;color:var(--text-faint);cursor:pointer}
.nota-vuota:hover{color:var(--cyan)}
.cat-gruppo > summary{cursor:pointer;padding:10px 14px;display:grid;
grid-template-columns:1.2fr 160px 120px;gap:14px;align-items:center}
.cat-gruppo > summary::-webkit-details-marker{display:none}
.cat-gruppo > summary:hover{background:var(--panel-2)}
.cat-gruppo > summary .nm{font-size:13px;font-weight:600}
.cat-gruppo > summary .num{font-family:monospace;font-size:12px;color:var(--text-faint);text-align:right}
.cat-gruppo .corpo{border-top:1px solid var(--border-soft);content-visibility:auto;contain-intrinsic-size:auto 400px}
/* Il pallino della presenza: si legge prima della parola, ed e' la
distinzione che conta - esiste nel motore, o no. */
.pres{display:inline-flex;align-items:center;gap:6px;font-family:monospace;
font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-faint)}
.pres::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--text-faint);flex:none}
.pres.confermata::before{background:var(--green)}
.pres.solo-nel-kernel::before{background:var(--cyan)}
.pres.solo-documentata::before{background:var(--red)}
.pres.variante::before,.pres.blocco::before{background:var(--text-faint)}
/* --- piede del pannello staff: le voci rare, ma raggiungibili ---------- */
.hub-foot{margin-top:26px;padding-top:14px;border-top:1px solid var(--border-soft);
display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.hub-foot-k{font-family:monospace;font-size:10px;text-transform:uppercase;letter-spacing:.7px;
color:var(--text-faint);margin-bottom:2px}
.hub-foot a{color:var(--cyan);text-decoration:none;font-size:12.5px}
.hub-foot a:hover{text-decoration:underline}
/* Sessione scaduta: copre la pagina di proposito.
Il 2026-09-04 una sessione scaduta lasciava la console apparentemente
viva e "rispondente parzialmente ai comandi". Da quel momento niente di
cio' che si vede e' piu' affidabile, quindi l'avviso deve FERMARE, non
informare da un angolo. */
.session-expired{
position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
background:rgba(0,0,0,.72);backdrop-filter:blur(2px)}
.session-expired-box{
max-width:min(440px,88vw);padding:22px 24px;border-radius:12px;text-align:center;
background:var(--panel);border:1px solid var(--gold);color:var(--text);
box-shadow:0 18px 48px rgba(0,0,0,.45)}
.session-expired-box p{margin:0 0 16px;font-size:13.5px;line-height:1.5}
/* ============================================================
LE QUATTRO SCATOLE DI PRIMO LIVELLO
Struttura da accounts/tassonomia.py. Ogni scatola ha un accento
proprio: serve al riconoscimento a colpo d'occhio - dopo qualche
giorno d'uso il colore arriva prima del nome. Sono i quattro accenti
gia' in tavolozza, non colori nuovi.
============================================================ */
.box-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:20px;
width:100%;max-width:980px}
/* L'accento e' della SCATOLA, e lo ereditano anche i blocchi dentro: il
filetto, le icone, l'hover delle voci e, nella pagina di scatola, le
tessere. Segnalato l'11/09: le icone cambiavano colore per scatola, i
blocchi restavano tutti azzurri. */
.box,.scatola-page{--accento:var(--cyan)}
.box-modelli,.scatola-modelli{--accento:var(--indigo)}
.box-centro-cognitivo,.scatola-centro-cognitivo{--accento:var(--gold)}
.box-analisi,.scatola-analisi{--accento:#5ee7a0}
.box{display:flex;flex-direction:column;gap:12px;padding:22px 22px 18px;
border:1px solid var(--border-soft);border-radius:var(--r);background:var(--panel);
position:relative;overflow:hidden}
.box::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accento)}
.box-head{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit}
.box-head:hover .box-name{text-decoration:underline}
.box-icon{width:38px;height:38px;flex:0 0 38px;border-radius:10px;display:flex;
align-items:center;justify-content:center;background:var(--panel-2);border:1px solid var(--border)}
.box-icon svg{width:19px;height:19px;stroke:var(--accento,var(--cyan));fill:none;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.box-icon.big{width:52px;height:52px;flex:0 0 52px}
.box-icon.big svg{width:26px;height:26px}
.box-heading{display:flex;flex-direction:column;gap:2px}
.box-name{font-size:16.5px;font-weight:600;letter-spacing:.1px}
.box-sub{font-family:monospace;font-size:10px;text-transform:uppercase;letter-spacing:.7px;
color:var(--text-faint)}
.box-desc{margin:0;font-size:12px;color:var(--text-dim);line-height:1.6}
.box-items{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:1px;
border-top:1px solid var(--border-soft);padding-top:10px}
.box-items a{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:7px;
text-decoration:none;color:var(--text);font-size:12.5px;transition:background .12s}
.box-items a:hover{background:var(--panel-2)}
.box-item-icon{width:22px;height:22px;flex:0 0 22px;display:flex;align-items:center;justify-content:center}
.box-item-icon svg{width:14px;height:14px;stroke:var(--text-faint);fill:none;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.box-items a:hover .box-item-icon svg{stroke:var(--accento)}
.box-item-name{flex:1}
.box-item-stat{font-family:monospace;font-size:10.5px;color:var(--text-faint);white-space:nowrap}
.box-item-new{font-family:monospace;font-size:9.5px;text-transform:uppercase;letter-spacing:.6px;
color:var(--gold);border:1px solid var(--gold);border-radius:20px;padding:1px 7px;white-space:nowrap}
/* Pagina di una scatola */
.box-nav{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px;align-items:center}
.box-nav a{font-size:12px;text-decoration:none;color:var(--text-dim);padding:5px 11px;
border-radius:20px;border:1px solid transparent}
.box-nav a:hover{color:var(--text);border-color:var(--border)}
.box-nav a.on{color:var(--text);border-color:var(--accento,var(--cyan));background:var(--panel)}
.box-nav-home{font-family:monospace;font-size:10.5px!important;text-transform:uppercase;
letter-spacing:.6px;color:var(--text-faint)!important;margin-right:6px}
/* La pagina di scatola eredita .hub-head, che e' CENTRATO: con l'icona a
sinistra e il testo al centro l'intestazione risultava storta. Qui si
allinea tutto a sinistra, che e' anche la lettura giusta per una pagina
in cui si CERCA invece di ammirare. */
.box-page-head{display:flex;align-items:flex-start;gap:18px;text-align:left;max-width:980px}
.box-page-head h1{font-size:24px}
.box-page-head p{margin-top:6px}
.box-page-sub{font-family:monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;
color:var(--text-faint);margin:2px 0 8px}
.box-empty{font-size:12.5px;color:var(--text-dim)}
.scatola-page .hub-tile::before{background:var(--accento)}
.scatola-page .hub-tile:hover{border-color:var(--accento)}
.scatola-page .hub-icon svg{stroke:var(--accento)}
@media (max-width:860px){
.box-grid{grid-template-columns:1fr}
.box-page-head{flex-direction:column;gap:12px}
}
/* ===========================================================================
PERCORSO GUIDATO - paradigma di interfaccia, non stile di una pagina
===========================================================================
Regola della casa, decisa il 05/09/2026 su Dashboard Studio e valida
per tutte le pagine: in ogni momento deve essere evidente CHE COSA SI
PUO' FARE, e i comandi che adesso non portano da nessuna parte devono
dirlo invece di lasciarlo scoprire premendoli.
Tre pezzi, e si usano insieme:
.stato-vuoto la pagina appena aperta non e' un vuoto: e' un
invito. Saluta, dice la prima cosa da fare, e
indica il comando che la fa.
.svc-btn.is-off un comando che ORA non ha senso: spento, non
cliccabile, con un `title` che dice PERCHE'.
.svc-btn.invito l'unica cosa sensata da fare adesso: contorno
evidenziato, cosi' l'occhio ci va da solo.
Perche' SPENTO e non NASCOSTO: un comando che sparisce e ricompare fa
cambiare forma all'interfaccia e fa perdere l'orientamento; uno spento
resta dov'era e insegna quando tornera' utile. Si nasconde solo cio'
che non riguarda affatto questo utente (un permesso che non ha), non
cio' che non riguarda questo momento. */
.stato-vuoto{max-width:560px;margin:40px auto;text-align:center;padding:28px 24px}
.stato-vuoto h3{margin:0 0 8px;font-size:16px;font-weight:700;color:var(--text)}
.stato-vuoto p{margin:0;font-size:13px;line-height:1.6;color:var(--text-dim)}
.stato-vuoto .stato-vuoto-b{color:var(--text);font-weight:600}
.stato-vuoto[hidden]{display:none}
.svc-btn.is-off{opacity:.38;cursor:not-allowed}
.svc-btn.is-off:hover{color:var(--text-dim);border-color:var(--border)}
.svc-btn.invito{border-color:var(--cyan);color:var(--cyan);
box-shadow:0 0 0 3px rgba(34,211,238,.14)}
.svc-btn.invito:hover{color:var(--cyan);border-color:var(--cyan)}
@media (prefers-reduced-motion: no-preference){
.svc-btn.invito{animation:invito-pulsa 2.2s ease-in-out infinite}
}
@keyframes invito-pulsa{
0%,100%{box-shadow:0 0 0 3px rgba(34,211,238,.14)}
50%{box-shadow:0 0 0 5px rgba(34,211,238,.05)}
}