/*
VERSIONE: 00.00.03

MODIFICHE E IMPLEMENTAZIONI EFFETTUATE (CHANGELOG):
File originale : C:\Software4Helper\Progetti_trading\TradingLab_Server\public\tradinglab.css
Cartella backup: H:\BackupSoftware\Backup_Progetti_Attivi\TradingLab_Server\public\
15/10/2026 14:42 - 00.00.03 - In fondo la classe del menu di scelta dell'istanza (.selettore-istanza), con i colori e le variabili gia' esistenti. Nessuna regola esistente toccata. Backup della versione precedente: tradinglab_(00.00.02).css
15/10/2026 09:15 - 00.00.02 - In fondo le classi della scheda Istanze (moduli, campi, gruppi di parametri, errori, note, avviso di azzeramento, anteprima, elenco delle istanze) con i colori e le variabili gia' esistenti, e lo stato disattivato dei pulsanti. Nessuna regola esistente e' stata toccata. Backup della versione precedente: tradinglab_(00.00.01).css
13/10/2026 08:01 - 00.00.01 - Creato (Passo 5a, versione senza framework): CSS del mockup approvato (mockup_dashboard.html 00.00.02) copiato cosi' com'e', senza riscriverlo. In fondo 6 classi nuove (.spazio-su-12, .nota-sotto, .riquadri-stretti, .valore-medio, .senza-margine, .avviso-errore) al posto degli stili inline e per l'avviso di errore di caricamento.
*/
:root{
  --sfondo:#0b0f14; --pannello:#121821; --pannello-2:#18202b; --bordo:#232d3b;
  --testo:#e7ecf3; --testo-attenuato:#93a0b3;
  --positivo:#2fbf71; --negativo:#ef5b5b; --accento:#5b9dff;
  --bench-mercato:#e3b341; --bench-bitcoin:#b79cff; --avviso:#e3b341;
  --raggio:12px;
  --font-testo:system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-numeri:ui-monospace,"Cascadia Mono",Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--sfondo);color:var(--testo);font:15px/1.5 var(--font-testo);-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
.contenitore{max-width:1180px;margin:0 auto;padding:0 16px}
.pos{color:var(--positivo)} .neg{color:var(--negativo)} .muto{color:var(--testo-attenuato)}
.num{font-family:var(--font-numeri);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.num-sx{font-family:var(--font-numeri);font-variant-numeric:tabular-nums}
button{font:inherit}
:focus-visible{outline:2px solid var(--accento);outline-offset:2px}

#avviso-mockup{background:#2a2108;color:#f2d98a;font-size:13px;text-align:center;padding:6px 16px;border-bottom:1px solid #4a3a10}
#barra-superiore{position:sticky;top:0;z-index:10;background:rgba(11,15,20,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--bordo)}
.barra-interna{display:flex;align-items:center;gap:8px 20px;flex-wrap:wrap;padding:8px 0}
.marchio{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.01em}
.marchio svg{width:26px;height:26px;color:var(--accento)}
.marchio small{font-weight:500;color:var(--testo-attenuato);font-size:12px;border:1px solid var(--bordo);border-radius:999px;padding:1px 8px}
.schede-nav{display:flex;gap:4px;overflow-x:auto;max-width:100%}
.schede-nav button{display:flex;align-items:center;gap:8px;appearance:none;background:none;border:0;color:var(--testo-attenuato);padding:10px 14px;border-radius:8px;font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap}
.schede-nav button svg{width:16px;height:16px}
.schede-nav button:hover{color:var(--testo)}
.schede-nav button[aria-selected=true]{color:var(--testo);background:var(--pannello-2);box-shadow:inset 0 -2px 0 var(--accento)}
.badge{background:var(--avviso);color:#1a1405;border-radius:999px;font-size:11px;font-weight:700;min-width:18px;height:18px;display:inline-grid;place-items:center;padding:0 5px}
.stato-ciclo{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--testo-attenuato)}
.stato-ciclo strong{color:var(--testo);font-weight:600}
.pallino{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--testo-attenuato);flex:none}
.pallino.acceso{background:var(--positivo);box-shadow:0 0 0 3px rgba(47,191,113,.2)}
.pallino.fermo{background:var(--negativo);box-shadow:0 0 0 3px rgba(239,91,91,.2)}
.pallino.spento{background:transparent;border:2px solid var(--testo-attenuato)}

#griglia{display:grid;gap:16px;padding:20px 0 48px}
.scheda{display:grid;gap:16px}
.pannello{background:var(--pannello);border:1px solid var(--bordo);border-radius:var(--raggio);padding:16px;min-width:0}
.pannello>h2,.titolo-sezione{margin:0 0 12px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--testo-attenuato);font-weight:700}
.titolo-scheda{margin:0;font-size:20px}
.intro{margin:0;color:var(--testo-attenuato);font-size:14px}
.scroll-x{overflow-x:auto}

.riquadri{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.riquadro .etichetta{font-size:12px;color:var(--testo-attenuato)}
.riquadro .valore{font:600 28px/1.2 var(--font-numeri);font-variant-numeric:tabular-nums;margin-top:6px}
.riquadro .valore.testo{font:600 17px/1.4 var(--font-testo);color:var(--testo-attenuato)}
.riquadro .sotto{font:13px var(--font-numeri);font-variant-numeric:tabular-nums;margin-top:4px;color:var(--testo-attenuato)}
.riquadro .sotto b{font-weight:600}
.sw{display:inline-block;width:18px;height:0;border-top:3px solid;vertical-align:middle;margin-right:6px}
.sw.mercato{border-color:var(--bench-mercato);border-top-style:dashed}
.sw.bitcoin{border-color:var(--bench-bitcoin);border-top-style:dotted}
.sw.portafoglio{border-color:var(--accento)}

.verdetto{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 24px;align-items:center}
.verdetto .grande{font:700 22px/1.2 var(--font-numeri);font-variant-numeric:tabular-nums}
.verdetto .etichetta{font-size:12px;color:var(--testo-attenuato)}
.etichetta-campione{display:inline-block;border:1px solid #6b5416;background:#2a2108;color:#f2d98a;border-radius:8px;padding:6px 10px;font-size:13px}

.legenda{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--testo-attenuato);margin:0 0 8px;padding:0;list-style:none}
.grafico{overflow-x:auto}
.grafico svg{display:block;width:100%;min-width:560px;height:auto}
svg .griglia{stroke:var(--bordo);stroke-width:1}
svg .griglia-v{stroke-dasharray:2 4}
svg .riferimento{stroke:var(--testo-attenuato);stroke-width:1;stroke-dasharray:1 5;opacity:.7}
svg .asse{fill:var(--testo-attenuato);font:11px var(--font-numeri)}
svg .assenza{fill:var(--testo-attenuato);font:10px var(--font-testo);opacity:.8}
svg .serie{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
svg .serie-portafoglio{stroke:var(--accento);stroke-width:2.6}
svg .serie-mercato{stroke:var(--bench-mercato);stroke-dasharray:8 5}
svg .serie-bitcoin{stroke:var(--bench-bitcoin);stroke-dasharray:2 5}
svg .punto-finale{fill:var(--accento);stroke:var(--pannello);stroke-width:2}
svg .barra-pos{fill:var(--positivo)} svg .barra-neg{fill:var(--negativo)}
svg .valore-barra{font:600 11px var(--font-numeri)}
svg .valore-barra.pos{fill:var(--positivo)} svg .valore-barra.neg{fill:var(--negativo)}

.statistiche{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.statistiche+.statistiche{margin-top:12px}
.stat{background:var(--pannello-2);border:1px solid var(--bordo);border-radius:10px;padding:10px 12px}
.stat dt{font-size:12px;color:var(--testo-attenuato);margin:0}
.stat dd{margin:2px 0 0;font:600 18px var(--font-numeri);font-variant-numeric:tabular-nums}

.elenco-regole{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.condizione{display:flex;align-items:flex-start;gap:12px;background:var(--pannello-2);border:1px solid var(--bordo);border-radius:10px;padding:10px 12px}
.condizione .pallino{margin-top:7px}
.cond-testo{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 16px;width:100%}
.cond-valore{font:13px var(--font-numeri);font-variant-numeric:tabular-nums;color:var(--testo-attenuato)}
.coppie{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
dl.parametri{margin:0;display:grid;grid-template-columns:1fr auto;gap:8px 16px}
dl.parametri dt{color:var(--testo-attenuato)} dl.parametri dd{margin:0;text-align:right;font:600 14px var(--font-numeri);font-variant-numeric:tabular-nums}
.riga-dati{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;font-size:14px;color:var(--testo-attenuato)}
.riga-dati strong{color:var(--testo)}

.segnale-evidenza{border-color:#6b5416;background:linear-gradient(180deg,#1a1709,var(--pannello) 60%)}
.segnale-testa{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:12px}
.stato-attesa{background:var(--avviso);color:#1a1405;font-weight:700;font-size:12px;letter-spacing:.06em;padding:3px 10px;border-radius:999px;text-transform:uppercase}
.azione{font-size:26px;font-weight:800;letter-spacing:.02em}
.segnale-griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.cella .etichetta{font-size:12px;color:var(--testo-attenuato)}
.cella .valore{font:600 20px var(--font-numeri);font-variant-numeric:tabular-nums}
.cella .sotto{font:12px var(--font-numeri);color:var(--testo-attenuato)}
.motivo{margin:14px 0 4px;font-size:16px}
.rovescia{font:700 30px var(--font-numeri);font-variant-numeric:tabular-nums;color:var(--avviso)}
.azioni{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.btn{appearance:none;border:1px solid var(--bordo);background:var(--pannello-2);color:var(--testo);padding:11px 22px;border-radius:10px;font-weight:700;cursor:pointer}
.btn.primario{background:var(--accento);border-color:var(--accento);color:#06101f}
.btn:hover{filter:brightness(1.1)}
.riepilogo{margin-top:14px;border:1px dashed var(--accento);border-radius:10px;padding:12px 14px;background:rgba(91,157,255,.07)}
.riepilogo p{margin:0 0 10px}
.nota-mockup{font-size:13px;color:var(--avviso);min-height:20px;margin:10px 0 0}
.sintesi-segnali{display:flex;flex-wrap:wrap;gap:8px 24px;margin:0 0 12px;font-size:14px;color:var(--testo-attenuato)}
.sintesi-segnali b{font-family:var(--font-numeri);color:var(--testo)}
.esito{font-weight:600}.esito.conf{color:var(--positivo)}.esito.rif{color:var(--testo-attenuato)}.esito.scad{color:var(--avviso)}

table{border-collapse:collapse;width:100%;font-size:14px}
th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--testo-attenuato);text-align:left;padding:8px 10px;border-bottom:1px solid var(--bordo);white-space:nowrap}
th.num{text-align:right}
td{padding:9px 10px;border-bottom:1px solid var(--bordo);white-space:nowrap}
tbody tr.riga-operazione:hover{background:var(--pannello-2)}
.espandi{appearance:none;background:var(--pannello-2);border:1px solid var(--bordo);color:var(--testo);border-radius:6px;min-width:34px;padding:2px 8px;font:600 13px var(--font-numeri);cursor:pointer}
.espandi::after{content:" ▾";color:var(--testo-attenuato)}
.espandi[aria-expanded=true]::after{content:" ▴"}
.dettaglio td{background:var(--pannello-2);white-space:normal}
.dettaglio-griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.dettaglio h4{margin:0 0 4px;font-size:13px;color:var(--testo-attenuato)}
.dettaglio p{margin:0 0 6px}
.indicatori{font-size:13px;color:var(--testo-attenuato)}
.totali{display:flex;flex-wrap:wrap;gap:8px 28px;margin-bottom:12px}
.totali div{font-size:12px;color:var(--testo-attenuato)}
.totali strong{display:block;font:700 18px var(--font-numeri);font-variant-numeric:tabular-nums;color:var(--testo)}
.posizione-aperta{border-color:var(--accento);background:linear-gradient(180deg,rgba(91,157,255,.08),var(--pannello) 70%)}
.etichetta-aperta{display:inline-block;background:var(--accento);color:#06101f;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:2px 10px;border-radius:999px;margin-bottom:10px}

footer.piede{color:var(--testo-attenuato);font-size:12px;text-align:center;padding:0 16px 32px}
@media (max-width:640px){
  .riquadro .valore{font-size:24px}
  .stato-ciclo{margin-left:0;width:100%}
  .azione{font-size:22px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* ---- Classi aggiunte nella versione senza framework: al posto degli stili inline, cosi' la CSP del server puo' vietarli ---- */
.spazio-su-12{margin-top:12px}
.nota-sotto{margin:10px 0 0}
.riquadri-stretti{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.riquadro .valore.valore-medio{font-size:20px}
.azioni.senza-margine{margin-top:0}
.avviso-errore{background:#2a0e0e;color:#f5b5b5;font-size:13px;text-align:center;padding:6px 16px;border-bottom:1px solid #5a1f1f}

/* ---- Scheda Istanze (moduli per creare una istanza e cambiarne i parametri) ---- */
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.istanza{display:grid;gap:12px}
.testa-istanza{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.nome-istanza{font-size:18px;font-family:var(--font-numeri)}
.stato-ciclo-istanza{margin-left:auto;font-size:13px;color:var(--testo-attenuato);display:inline-flex;align-items:center;gap:8px}
.modulo{display:grid;gap:14px}
.modulo h3{margin:0;font-size:15px}
.gruppo-campi{margin:0;border:1px solid var(--bordo);border-radius:10px;padding:12px 14px 14px;background:var(--pannello-2);min-width:0}
.gruppo-campi>legend{padding:0 8px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--testo-attenuato);font-weight:700}
.campi{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px 18px}
.campo{display:grid;gap:4px;align-content:start;min-width:0}
.campo label{font-size:13px;font-weight:600}
.campo .unita{color:var(--testo-attenuato);font-weight:500}
.campo input,.campo select{width:100%;background:var(--sfondo);color:var(--testo);border:1px solid var(--bordo);border-radius:8px;padding:8px 10px;font:14px var(--font-numeri)}
.campo select{font-family:var(--font-testo)}
.campo input[readonly]{opacity:.65}
.campo .aiuto{font-size:12px;color:var(--testo-attenuato);line-height:1.4}
.esito-modulo{display:grid;gap:12px}
.esito-modulo:empty{display:none}
.elenco-errori{border:1px solid #5a1f1f;background:#2a0e0e;color:#f5b5b5;border-radius:10px;padding:10px 14px}
.elenco-errori ul,.avviso-modulo ul,.note-modulo ul{margin:6px 0 0;padding-left:20px}
.avviso-modulo,.avviso-azzeramento{border:1px solid #6b5416;background:#2a2108;color:#f2d98a;border-radius:10px;padding:10px 14px}
.avviso-azzeramento p{margin:6px 0 0}
.note-modulo{border:1px solid var(--bordo);background:var(--pannello-2);border-radius:10px;padding:10px 14px;color:var(--testo-attenuato);font-size:14px}
.note-modulo strong{color:var(--testo)}
.messaggio-ok{margin:0;border:1px solid #1f5a38;background:#0e2a1a;color:#a9e6c3;border-radius:10px;padding:10px 14px}
.anteprima{display:grid;gap:12px}
.spunta{display:flex;align-items:flex-start;gap:10px;font-size:14px;cursor:pointer}
.spunta input{margin-top:4px;flex:none;width:16px;height:16px}

/* ---- Menu di scelta dell'istanza, nella barra ---- */
.selettore-istanza{background:var(--pannello-2);color:var(--testo);border:1px solid var(--bordo);border-radius:8px;padding:6px 10px;font:13px var(--font-testo);max-width:100%}