/* Contributa - Panel v2 - stile vendorizzato da design_ref/panel_contributa_v3_completo.html
   (palette "Studio moderno", vedi design_ref/DESIGN_contributa.md). Porting 1:1, nessuna modifica
   ai token di colore/tipografia. Self-hosting definitivo dei font rimandato a F8 (vedi piano). */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --inchiostro:#1C2B3D; --inchiostro-2:#263A52; --linea-scura:#2A3E56;
  --smeraldo:#0E8C6A; --smeraldo-ch:#2FB98A; --smeraldo-tenue:#E3F3ED;
  --amaranto:#C0385C; --amaranto-scuro:#A22F4E; --urg-bg:#FAEBF0; --urg-bordo:#EDC4D1;
  --superficie:#FFFFFF; --separatore:#F3F5F8;
  --testo:#1C2B3D; --muto:#5D6B82; --linea:#E2E6EC;
  --naz-bg:#E7EEF6; --naz-tx:#2C5985;
  --reg-bg:#E3F3ED; --reg-tx:#0E8C6A;
  --cam-bg:#F2E9F6; --cam-tx:#7A4E96;
  --r-card:13px; --r-btn:8px; --r-badge:6px;
  --sora:'Sora',sans-serif; --inter:'Inter',sans-serif; --mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--superficie);font-family:var(--inter);color:var(--testo);font-size:14px;-webkit-font-smoothing:antialiased;}
.app{display:flex;min-height:100vh;}
button{font-family:var(--inter);cursor:pointer;}
a{color:var(--smeraldo);}

/* ================= SIDEBAR ================= */
.side{width:228px;background:var(--inchiostro);color:#C9D6E4;display:flex;flex-direction:column;flex-shrink:0;position:sticky;top:0;height:100vh;}
.brand{display:flex;align-items:center;gap:11px;padding:22px 20px 24px;}
.brand .n{font-family:var(--sora);font-weight:700;font-size:19px;color:#fff;letter-spacing:-0.4px;}
.nav{display:flex;flex-direction:column;}
.nav a{display:flex;align-items:center;gap:11px;padding:10px 20px;color:#9FB2C6;text-decoration:none;font-weight:500;font-size:13.5px;border-left:3px solid transparent;transition:color .15s,background .15s;}
.nav a.on{background:var(--inchiostro-2);color:#fff;border-left-color:var(--smeraldo-ch);}
.nav a:hover{color:#fff;}
.nav a:focus-visible{outline:2px solid var(--smeraldo-ch);outline-offset:-2px;}
.nav svg{width:16px;height:16px;flex-shrink:0;opacity:.75;}
.nav a.on svg{opacity:1;}
.nav .badge{margin-left:auto;background:var(--smeraldo);color:#fff;font-size:11px;font-weight:600;border-radius:10px;padding:1px 8px;font-family:var(--mono);}
.nav .badge.amb{background:var(--amaranto);}
.side .sep{margin:14px 20px;border-top:1px solid var(--linea-scura);}
.side .foot{margin-top:auto;padding:16px 20px 18px;font-size:12px;color:#7189A3;border-top:1px solid var(--linea-scura);line-height:1.5;}
.side .foot b{color:#C9D6E4;display:block;font-weight:600;}

/* ================= MAIN / TOP ================= */
.main{flex:1;display:flex;flex-direction:column;min-width:0;}
.top{background:var(--superficie);border-bottom:1px solid var(--linea);padding:13px 30px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:20;}
.top h1{font-family:var(--sora);font-size:17px;font-weight:600;}
.top .agg{font-size:12px;color:var(--muto);}
.top .agg b{color:var(--smeraldo);font-weight:600;font-family:var(--mono);font-size:11.5px;}
.cerca{margin-left:auto;background:var(--separatore);border:1px solid var(--linea);border-radius:var(--r-btn);padding:8px 14px;font-size:13px;color:var(--testo);width:280px;font-family:var(--inter);}
.cerca::placeholder{color:var(--muto);}
.cerca:focus{outline:2px solid var(--smeraldo);outline-offset:-1px;border-color:var(--smeraldo);}
.utente{display:flex;align-items:center;gap:9px;font-weight:600;font-size:13px;}
.utente .av{width:32px;height:32px;border-radius:50%;background:var(--smeraldo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;}

.body{padding:24px 30px 40px;display:grid;grid-template-columns:minmax(0,1fr) 304px;gap:24px;align-items:start;max-width:1440px;}
.body.uno{grid-template-columns:1fr;max-width:1180px;}

/* ================= KPI ================= */
.kpis{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.kpi{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-card);padding:16px 18px 14px;transition:box-shadow .2s,transform .2s;}
.kpi:hover{box-shadow:0 4px 14px rgba(28,43,61,.07);transform:translateY(-1px);}
.kpi .k{font-size:11px;font-weight:600;color:var(--muto);letter-spacing:1.1px;text-transform:uppercase;}
.kpi .v{font-family:var(--sora);font-size:31px;font-weight:700;margin-top:6px;line-height:1;}
.kpi .v small{font-size:14px;color:var(--muto);font-weight:400;font-family:var(--inter);}
.kpi .sub{font-size:11.5px;color:var(--muto);margin-top:7px;}
.kpi.urg{border-left:4px solid var(--amaranto);}
.kpi.urg .v{color:var(--amaranto);}
.kpi.ok .v{color:var(--smeraldo);}

/* ================= STRISCIA MOTORE ================= */
.motore{grid-column:1/-1;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-card);padding:16px 20px 18px;}
.motore .mhead{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.motore .mhead .fonti{margin-left:auto;display:flex;gap:16px;font-size:11.5px;color:var(--muto);font-family:var(--mono);flex-wrap:wrap;}
.motore .mhead .fonti span::before{content:'●';color:var(--smeraldo);margin-right:5px;font-size:9px;}
.flusso{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:0;align-items:stretch;}
.stadio{padding:10px 14px;border:1px solid var(--linea);border-radius:10px;background:var(--superficie);min-width:0;}
.stadio .sk{font-size:10.5px;font-weight:600;letter-spacing:.9px;color:var(--muto);text-transform:uppercase;}
.stadio .sv{font-family:var(--sora);font-size:22px;font-weight:700;margin-top:3px;}
.stadio .sd{font-size:11.5px;color:var(--muto);margin-top:4px;line-height:1.45;}
.stadio .sd b{font-weight:600;color:var(--testo);}
.stadio.finale{border-color:#BFE3D6;background:var(--smeraldo-tenue);}
.stadio.finale .sv{color:var(--smeraldo);}
.freccia{display:flex;align-items:center;padding:0 10px;color:var(--linea);}
.freccia svg{width:20px;height:20px;}
.strade{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap;}
.strada{font-family:var(--mono);font-size:10.5px;border-radius:var(--r-badge);padding:2px 7px;background:var(--separatore);border:1px solid var(--linea);color:var(--muto);}
.strada b{color:var(--testo);font-weight:600;}
.coda{margin-top:12px;padding-top:11px;border-top:1px dashed var(--linea);font-size:12px;color:var(--muto);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.coda .pill{font-family:var(--mono);font-size:11px;background:var(--separatore);border:1px solid var(--linea);border-radius:10px;padding:2px 9px;color:var(--testo);font-weight:500;}
.coda a{color:var(--smeraldo);font-weight:600;text-decoration:none;font-size:12px;}
.coda a:hover{text-decoration:underline;}

/* ================= SEZIONI COMUNI ================= */
.col{display:flex;flex-direction:column;gap:20px;min-width:0;}
h2{font-family:var(--sora);font-size:14px;font-weight:600;letter-spacing:.2px;display:flex;align-items:center;gap:9px;}
h2 .cnt{font-size:12px;color:var(--muto);font-weight:500;font-family:var(--inter);}
.urgenti{background:var(--urg-bg);border:1px solid var(--urg-bordo);border-radius:var(--r-card);padding:18px;}
.urgenti h2{color:var(--amaranto-scuro);}
.ucard{background:var(--superficie);border:1px solid var(--urg-bordo);border-radius:10px;padding:13px 16px;display:flex;align-items:center;gap:14px;margin-top:11px;transition:box-shadow .2s;}
.ucard:hover{box-shadow:0 4px 12px rgba(192,56,92,.10);}
.giorni{font-family:var(--mono);background:var(--amaranto);color:#fff;font-weight:600;font-size:11.5px;border-radius:var(--r-btn);padding:7px 11px;text-align:center;line-height:1.15;flex-shrink:0;animation:pulse 2.6s ease-in-out infinite;}
.giorni b{display:block;font-size:18px;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(192,56,92,.35);}50%{box-shadow:0 0 0 6px rgba(192,56,92,0);}}
.ucard .t{font-weight:600;font-size:13.5px;}
.ucard .s{font-size:12px;color:var(--muto);margin-top:3px;}
.ucard .s b{color:var(--amaranto-scuro);font-weight:600;}
.btn{margin-left:auto;flex-shrink:0;background:var(--inchiostro);color:#fff;border:none;border-radius:var(--r-btn);padding:8px 14px;font-size:12.5px;font-weight:600;transition:background .15s;}
.btn:hover{background:var(--inchiostro-2);}
.btn:focus-visible{outline:2px solid var(--smeraldo);outline-offset:2px;}
.btn.verde{background:var(--smeraldo);}
.btn.verde:hover{background:#0B7458;}
.btn.ghost{background:transparent;color:var(--inchiostro);border:1px solid var(--linea);}
.btn.ghost:hover{background:var(--separatore);}
.btn.mini{padding:5px 10px;font-size:11.5px;}
/* .btn.ghost assume uno sfondo chiaro (contenuto): su sfondo scuro (sidebar,
   stesso --inchiostro) il suo testo scuro e' invisibile a riposo, visibile
   SOLO in hover quando lo sfondo schiarisce - difetto di sicurezza (il
   pulsante Esci deve essere sempre leggibile), non estetico. Stessa
   combinazione gia' usata altrove nella sidebar (nav a: colore #9FB2C6,
   bordo var(--linea-scura), hover var(--inchiostro-2)): nessun colore nuovo. */
.btn.ghost-scuro{background:transparent;color:#9FB2C6;border:1px solid var(--linea-scura);}
.btn.ghost-scuro:hover{background:var(--inchiostro-2);color:#fff;}

.cliente{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-card);overflow:hidden;}
.cliente .head{padding:13px 18px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--linea);flex-wrap:wrap;}
.cliente .head .nome{font-family:var(--sora);font-weight:600;font-size:14.5px;}
.tag{font-family:var(--mono);font-size:11px;background:var(--separatore);border:1px solid var(--linea);color:var(--muto);border-radius:var(--r-badge);padding:2px 8px;}
.nmatch{margin-left:auto;font-size:12px;color:var(--smeraldo);font-weight:600;}
.match{padding:15px 18px;display:flex;gap:14px;border-bottom:1px solid var(--linea);transition:background .15s;}
.match:hover{background:#FAFBFC;}
.match:last-child{border-bottom:none;}
.liv{flex-shrink:0;font-size:10.5px;font-weight:600;letter-spacing:.8px;border-radius:var(--r-badge);padding:4px 8px;height:fit-content;}
.liv.naz{background:var(--naz-bg);color:var(--naz-tx);}
.liv.reg{background:var(--reg-bg);color:var(--reg-tx);}
.liv.cam{background:var(--cam-bg);color:var(--cam-tx);}
.match .mt{font-weight:600;font-size:13.5px;line-height:1.35;}
.stadio-chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10.5px;color:var(--muto);background:var(--separatore);border:1px solid var(--linea);border-radius:var(--r-badge);padding:2px 7px;margin-top:6px;}
.stadio-chip.llm{color:var(--smeraldo);border-color:#BFE3D6;background:var(--smeraldo-tenue);}
.quattro{margin-top:9px;display:grid;gap:5px;font-size:12.5px;line-height:1.5;}
.quattro span b{font-weight:600;}
.nota-det{margin-top:9px;font-size:12.5px;line-height:1.5;background:var(--separatore);border-left:3px solid var(--linea);padding:8px 12px;border-radius:0 6px 6px 0;}
.nota-det b{font-weight:600;}
.match .meta{margin-top:9px;font-size:11.5px;color:var(--muto);display:flex;gap:14px;font-family:var(--mono);flex-wrap:wrap;}
.match .azioni{flex-shrink:0;display:flex;flex-direction:column;gap:7px;align-items:flex-end;}
.score{font-family:var(--mono);font-size:11.5px;color:var(--muto);}
.score b{color:var(--smeraldo);font-size:14px;}
.nomatch{font-size:12.5px;color:var(--muto);padding:4px 6px;line-height:1.6;}
.nomatch b{color:var(--testo);font-weight:600;}

/* ================= ASIDE ================= */
.aside{display:flex;flex-direction:column;gap:18px;}
.box{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-card);padding:16px 18px;}
.scad{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--linea);font-size:12.5px;}
.scad:last-child{border-bottom:none;padding-bottom:2px;}
.scad .d{font-family:var(--mono);color:var(--muto);flex-shrink:0;width:46px;font-size:11.5px;}
.scad .d.urg{color:var(--amaranto);font-weight:500;}
.scad .chi{color:var(--muto);margin-left:auto;flex-shrink:0;font-size:11.5px;}
.donutbox{display:flex;align-items:center;gap:16px;margin-top:12px;}
.donut{position:relative;width:96px;height:96px;flex-shrink:0;}
.donut svg{transform:rotate(-90deg);}
.donut .c-bg{stroke:var(--separatore);}
.donut .c-fg{stroke:var(--smeraldo);stroke-linecap:round;transition:stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1);}
.donut .num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.donut .num b{font-family:var(--sora);font-size:19px;font-weight:700;line-height:1;}
.donut .num span{font-size:10px;color:var(--muto);margin-top:2px;}
.legenda{font-size:12px;color:var(--muto);line-height:1.7;}
.legenda b{color:var(--testo);font-weight:600;}
.legenda .q{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;}
.trend{display:flex;align-items:flex-end;gap:7px;height:64px;margin-top:14px;}
.trend .bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end;}
.trend .bar i{display:block;width:100%;max-width:26px;background:var(--smeraldo-tenue);border:1px solid #BFE3D6;border-bottom:none;border-radius:4px 4px 0 0;height:0;transition:height .9s cubic-bezier(.4,0,.2,1);}
.trend .bar.now i{background:var(--smeraldo);border-color:var(--smeraldo);}
.trend .bar span{font-family:var(--mono);font-size:10px;color:var(--muto);}
.dm{padding:10px 0;border-bottom:1px solid var(--linea);}
.dm:last-child{border-bottom:none;}
.dm .r{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;margin-bottom:6px;}
.dm .r b{font-weight:600;}
.dm .r .val{font-family:var(--mono);color:var(--muto);font-size:11.5px;flex-shrink:0;}
.dm .r .val.alto{color:var(--amaranto);font-weight:500;}
.barra{height:7px;border-radius:4px;background:var(--separatore);overflow:hidden;}
.barra i{display:block;height:100%;border-radius:4px;background:var(--smeraldo);width:0;transition:width 1s cubic-bezier(.4,0,.2,1);}
.barra i.warn{background:var(--amaranto);}
.dm .nt{font-size:11.5px;color:var(--muto);font-style:italic;padding:2px 0;}
.nota{font-size:11.5px;color:var(--muto);margin-top:12px;line-height:1.55;}

/* ================= TOOLBAR / FILTRI / TABELLE ================= */
.toolbar{grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.toolbar select,.toolbar input[type=text]{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-btn);padding:7px 11px;font-size:12.5px;font-family:var(--inter);color:var(--testo);}
.toolbar select:focus,.toolbar input:focus{outline:2px solid var(--smeraldo);outline-offset:-1px;}
.viste{display:flex;gap:6px;flex-wrap:wrap;}
.vista{font-size:12px;font-weight:500;border:1px solid var(--linea);background:var(--superficie);color:var(--muto);border-radius:14px;padding:5px 13px;transition:all .15s;}
.vista.on{background:var(--inchiostro);border-color:var(--inchiostro);color:#fff;}
.vista:hover:not(.on){background:var(--separatore);}
.toolbar .destra{margin-left:auto;display:flex;gap:8px;}

.tabbox{grid-column:1/-1;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-card);overflow:hidden;}
table.dati{width:100%;border-collapse:collapse;font-size:12.5px;}
table.dati th{text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.9px;text-transform:uppercase;color:var(--muto);padding:11px 16px;border-bottom:1px solid var(--linea);background:var(--superficie);white-space:nowrap;}
table.dati td{padding:12px 16px;border-bottom:1px solid var(--linea);vertical-align:middle;}
table.dati tr:last-child td{border-bottom:none;}
table.dati tbody tr{transition:background .12s;}
table.dati tbody tr:hover{background:#FAFBFC;}
.mono{font-family:var(--mono);font-size:11.5px;color:var(--muto);}
.mono.urg{color:var(--amaranto);font-weight:500;}
td .titolo{font-weight:600;line-height:1.35;}
td .sotto{font-size:11.5px;color:var(--muto);margin-top:2px;}
.stato-b{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.5px;border-radius:var(--r-badge);padding:3px 8px;}
.stato-b.nuovo{background:var(--smeraldo-tenue);color:var(--smeraldo);}
.stato-b.proposto{background:var(--naz-bg);color:var(--naz-tx);}
.stato-b.visto{background:var(--separatore);color:var(--muto);}
.stato-b.inviato{background:var(--separatore);color:var(--testo);}
.stato-b.scartato{background:var(--separatore);color:var(--muto);text-decoration:line-through;}
.stato-b.da-val{background:#FFF7E8;color:#9A6B15;}
.stato-b.attivo{background:var(--smeraldo-tenue);color:var(--smeraldo);}
.stato-b.in-apertura{background:var(--naz-bg);color:var(--naz-tx);}
.minibar{width:88px;}
.paginaz{padding:11px 16px;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muto);border-top:1px solid var(--linea);}
.paginaz .destra{margin-left:auto;display:flex;gap:6px;}

/* ================= IMPOSTAZIONI / FORM ================= */
.setgrid{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;max-width:1180px;}
.setgrid .box h2{margin-bottom:4px;}
.setgrid .desc{font-size:12px;color:var(--muto);line-height:1.55;margin-bottom:14px;}
.campo{margin-bottom:13px;}
.campo label{display:block;font-size:12px;font-weight:600;margin-bottom:5px;}
.campo input,.campo select{width:100%;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-btn);padding:9px 12px;font-size:13px;font-family:var(--inter);color:var(--testo);}
.campo input:focus,.campo select:focus{outline:2px solid var(--smeraldo);outline-offset:-1px;}
.campo .hint{font-size:11px;color:var(--muto);margin-top:4px;line-height:1.5;}
.okbadge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--smeraldo);background:var(--smeraldo-tenue);border-radius:var(--r-badge);padding:3px 9px;}
.fonte-r{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--linea);font-size:12.5px;}
.fonte-r:last-child{border-bottom:none;}
.fonte-r .fn{font-weight:600;}
.fonte-r .fu{font-family:var(--mono);font-size:11px;color:var(--muto);}
.sw{margin-left:auto;width:36px;height:20px;border-radius:11px;background:var(--linea);position:relative;border:none;transition:background .2s;flex-shrink:0;}
.sw.on{background:var(--smeraldo);}
.sw::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .2s;}
.sw.on::after{left:18px;}

/* ================= SCHERMATE AUTH (login/reset password) - F2 =================
   Vendorizzato da design_ref/panel_contributa_v3_completo.html (schermo login):
   qui e' una pagina reale, non un div nascosto da un toggle JS - .schermo/.on
   non servono piu', tolte rispetto all'originale. */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px;background:linear-gradient(180deg,#FFFFFF 0%,#F3F5F8 100%);}
.authcard{width:100%;max-width:400px;background:var(--superficie);border:1px solid var(--linea);border-radius:16px;padding:34px 34px 30px;box-shadow:0 10px 40px rgba(28,43,61,.08);}
.authcard .logo{display:flex;align-items:center;gap:11px;margin-bottom:8px;}
.authcard .logo .n{font-family:var(--sora);font-weight:700;font-size:21px;letter-spacing:-0.4px;}
.authcard h1{font-family:var(--sora);font-size:17px;font-weight:600;margin:16px 0 4px;}
.authcard .sub{font-size:12.5px;color:var(--muto);margin-bottom:20px;line-height:1.5;}
.authcard .btn{width:100%;margin:6px 0 0;padding:10px;}
.authcard .link{text-align:center;font-size:12px;margin-top:14px;}
.authcard .link a{font-weight:600;text-decoration:none;}
.authcard .errore-form{background:var(--urg-bg);border:1px solid var(--urg-bordo);color:var(--amaranto-scuro);font-size:12.5px;border-radius:8px;padding:9px 12px;margin-bottom:14px;}
.authcard .ok-form{background:var(--smeraldo-tenue);border:1px solid #BFE3D6;color:var(--smeraldo);font-size:12.5px;border-radius:8px;padding:9px 12px;margin-bottom:14px;}

/* ================= RESPONSIVE / MOTION ================= */
@media(max-width:1120px){
  .body{grid-template-columns:1fr;}
  .kpis{grid-template-columns:repeat(2,1fr);}
  .flusso{grid-template-columns:1fr;gap:8px;}
  .freccia{transform:rotate(90deg);justify-content:center;padding:2px 0;}
  .setgrid{grid-template-columns:1fr;}
}
@media(max-width:760px){
  .side{display:none;}
  .cerca{display:none;}
  .match{flex-wrap:wrap;}
  .match .azioni{flex-direction:row;width:100%;align-items:center;}
  .match .azioni .score{margin-right:auto;}
  .ucard{flex-wrap:wrap;}
  .ucard .btn{margin-left:0;}
  .tabbox{overflow-x:auto;}
  table.dati{min-width:640px;}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
}