:root{
  --f:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fm:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --bg:#F4F7FB; --surface:#FFFFFF; --surface-2:#EAEFF7; --surface-3:#DCE4F0;
  --border:#D3DCE9; --border-strong:#B7C4D6;
  --ink:#0F1F33; --ink-2:#41556E; --muted:#74869C;
  --accent:#16528A; --accent-ink:#0F3E6B; --accent-soft:#E2EAF4;
  --ok:#1F7A4C; --ok-soft:#DEF0E6;
  --warn:#D97706; --warn-soft:#FDEDD8;
  --crit:#9F1239; --crit-soft:#FADEE5;
  --info:#0891B2; --info-soft:#DCF0F6;
  --shadow:0 1px 2px rgba(11,35,80,.07), 0 4px 14px rgba(11,35,80,.06);
  --r:10px; color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0B1626; --surface:#101C2E; --surface-2:#16263C; --surface-3:#1E3147;
  --border:#22344E; --border-strong:#35496A;
  --ink:#E3EAF4; --ink-2:#A6B6CB; --muted:#7A8CA3;
  --accent:#6BA7E8; --accent-ink:#92C0F2; --accent-soft:#14283F;
  --ok:#35B178; --ok-soft:#0E2A20;
  --warn:#DE9430; --warn-soft:#2C2010;
  --crit:#E8637E; --crit-soft:#2E1620;
  --info:#3BA8DC; --info-soft:#0C2634;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.3);
  color-scheme:dark;
}}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--f);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--f); font-weight:700; margin:0; letter-spacing:-.015em; text-wrap:balance}
.mono{font-family:var(--fm); font-variant-numeric:tabular-nums}
button{font:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
[hidden]{display:none !important}

/* ---- accesso ---- */
.gate{min-height:100dvh; display:grid; place-items:center; padding:24px 16px}
.gate-card{
  width:100%; max-width:400px; background:var(--surface); border:1px solid var(--border);
  border-top:3px solid var(--accent); border-radius:var(--r); padding:26px; box-shadow:var(--shadow);
}
.gate-mark{
  width:56px; height:56px; border-radius:13px; overflow:hidden; margin-bottom:18px;
  background:#183350; box-shadow:0 1px 3px rgba(11,35,80,.18);
}
.gate-mark img{width:100%; height:100%; display:block}

/* ---- guscio ---- */
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px 20px; background:var(--surface);
  border-top:3px solid var(--accent); border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:10px; margin-right:auto}
.brand-mark{
  width:34px; height:34px; border-radius:8px; overflow:hidden; flex:none; background:#183350;
}
.brand-mark img{width:100%; height:100%; display:block}
.brand-name{font-family:var(--f); font-weight:700; font-size:15px}
.brand-sub{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}
.who{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--ink-2)}
.who b{color:var(--ink); font-weight:600}

.shell{display:grid; grid-template-columns:190px minmax(0,1fr); align-items:start}
.nav{position:sticky; top:53px; padding:16px 10px; display:flex; flex-direction:column; gap:2px;
  border-right:1px solid var(--border); min-height:calc(100dvh - 53px)}
.nav button{display:flex; align-items:center; gap:9px; width:100%; text-align:left; border:0;
  background:transparent; border-radius:7px; padding:7px 10px; font-size:13.5px; color:var(--ink-2); font-weight:500}
.nav button:hover{background:var(--surface-2); color:var(--ink)}
.nav button[aria-current="page"]{background:var(--accent-soft); color:var(--accent-ink); font-weight:600}
.navdot{width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.45; flex:none}
.nav button[aria-current="page"] .navdot{opacity:1}
main{padding:20px; padding-block:20px 60px; min-width:0}

.page-title{font-size:22px}
.page-sub{color:var(--muted); font-size:13px; margin:3px 0 18px}
.sec-title{font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
  font-weight:600; margin:26px 0 10px; font-family:var(--f)}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r)}
.pad{padding:16px}
.grid{display:grid; gap:14px}
.two{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; align-items:start}

.kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.kpi{background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:14px 16px; position:relative; overflow:hidden}
.kpi::after{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--k,var(--border-strong))}
.kpi.ok{--k:var(--ok)} .kpi.lim{--k:var(--warn)} .kpi.out{--k:var(--crit)} .kpi.rtp{--k:var(--info)}
.kpi-n{font-family:var(--f); font-weight:700; font-size:30px; line-height:1; font-variant-numeric:tabular-nums}
.kpi-l{font-size:12px; color:var(--muted); margin-top:5px}

.pill{display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:3px 9px;
  font-size:11.5px; font-weight:600; white-space:nowrap}
.pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}
.pill.ok{color:var(--ok); background:var(--ok-soft)}
.pill.lim{color:var(--warn); background:var(--warn-soft)}
.pill.out{color:var(--crit); background:var(--crit-soft)}
.pill.rtp{color:var(--info); background:var(--info-soft)}
.pill.plain{color:var(--ink-2); background:var(--surface-2)}
.pill.plain::before{display:none}

.alert{display:flex; gap:11px; align-items:flex-start; padding:11px 14px; border-radius:var(--r);
  border:1px solid var(--border); background:var(--surface); margin-bottom:8px}
.alert-ic{width:22px; height:22px; border-radius:6px; display:grid; place-items:center;
  font-size:12px; font-weight:700; flex:none; font-family:var(--f)}
.alert.crit .alert-ic{background:var(--crit-soft); color:var(--crit)}
.alert.warn .alert-ic{background:var(--warn-soft); color:var(--warn)}
.alert.info .alert-ic{background:var(--info-soft); color:var(--info)}
.alert-t{font-weight:600; font-size:13px}
.alert-d{font-size:12.5px; color:var(--ink-2); margin-top:1px}

.squad{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px}
.pcard{display:flex; gap:11px; align-items:flex-start; text-align:left; width:100%;
  background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--s,var(--border-strong));
  border-radius:var(--r); padding:11px 13px}
.pcard:hover{border-color:var(--border-strong); background:var(--surface-2)}
.pcard.ok{--s:var(--ok)} .pcard.lim{--s:var(--warn)} .pcard.out{--s:var(--crit)} .pcard.rtp{--s:var(--info)}
.pnum{font-family:var(--fm); font-size:12px; color:var(--muted);
  background:var(--surface-2); border-radius:5px; padding:2px 6px; flex:none; margin-top:1px; min-width:24px; text-align:center}
.pname{font-weight:600; font-size:13.5px; display:block}
.prole{font-size:11.5px; color:var(--muted); display:block}
.pnote{font-size:11.5px; color:var(--ink-2); margin-top:5px; display:block}
.pnote b{font-weight:600; color:var(--ink)}

.tablewrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--r); background:var(--surface)}
table{border-collapse:collapse; width:100%; min-width:600px}
th,td{padding:9px 12px; text-align:left; border-bottom:1px solid var(--border); font-size:13px; white-space:nowrap}
thead th{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  font-weight:600; background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--surface-2)}
td.num,th.num{text-align:right}
td.num{font-family:var(--fm); font-variant-numeric:tabular-nums}
.linkish{color:var(--accent-ink); font-weight:600; border:0; background:none; padding:0}
.linkish:hover{text-decoration:underline}

.btn{border:1px solid var(--border-strong); background:var(--surface); border-radius:7px;
  padding:7px 13px; font-size:12.5px; font-weight:600; color:var(--ink-2); white-space:nowrap}
.btn:hover{background:var(--surface-2); color:var(--ink)}
.btn.pri{background:var(--accent); border-color:var(--accent); color:#fff}
@media (prefers-color-scheme:dark){.btn.pri{color:#0B1626}}
.btn.pri:hover{filter:brightness(1.08)}
.btn.danger{color:var(--crit); border-color:var(--crit)}
.btn:disabled{opacity:.5; cursor:default}

label{display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin-bottom:5px}
input,select,textarea{font:inherit; font-size:14px; color:var(--ink); background:var(--surface);
  border:1px solid var(--border-strong); border-radius:7px; padding:9px 10px; width:100%; max-width:100%}
textarea{min-height:70px; resize:vertical}
.field{margin-bottom:14px}
.fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0 14px}

.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{border:1px solid var(--border-strong); background:var(--surface); border-radius:999px;
  padding:6px 13px; font-size:12.5px; font-weight:600; color:var(--ink-2)}
.chip:hover{border-color:var(--accent); color:var(--accent-ink)}
.chip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#fff}
@media (prefers-color-scheme:dark){.chip[aria-pressed="true"]{color:#0B1626}}

dialog{border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--ink);
  padding:0; max-width:560px; width:calc(100% - 32px); box-shadow:0 18px 50px rgba(11,35,80,.25)}
dialog::backdrop{background:rgba(11,35,80,.45)}
.dlg-h{padding:16px 20px; border-bottom:1px solid var(--border); display:flex;
  justify-content:space-between; align-items:center; gap:12px}
.dlg-b{padding:20px; max-height:70dvh; overflow:auto}
.dlg-f{padding:14px 20px; border-top:1px solid var(--border); display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap}

.locked{border:1px dashed var(--border-strong); border-radius:var(--r); padding:20px; text-align:center;
  color:var(--muted); font-size:13px; background:var(--surface-2)}
.locked b{display:block; color:var(--ink-2); font-weight:600; margin-bottom:3px}
.private{border-left:3px solid var(--info); background:var(--info-soft); border-radius:8px; padding:11px 13px; font-size:12.5px}
.private-h{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--info); margin-bottom:4px}
.stages{display:flex; gap:4px; margin:10px 0 6px; flex-wrap:wrap}
.stage{flex:1; min-width:52px; padding:6px 7px; border-radius:6px; background:var(--surface-2);
  border:1px solid var(--border); font-size:10.5px; color:var(--muted); text-align:center; line-height:1.25}
.stage.done{background:var(--ok-soft); border-color:transparent; color:var(--ok); font-weight:600}
.stage.now{background:var(--info-soft); border-color:var(--info); color:var(--info); font-weight:600}
.stage.cliccabile{cursor:pointer}

.msg{padding:10px 13px; border-radius:8px; font-size:13px; margin-bottom:14px}
.msg.err{background:var(--crit-soft); color:var(--crit)}
.msg.ok{background:var(--ok-soft); color:var(--ok)}
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:60;
  background:var(--ink); color:var(--bg); padding:10px 18px; border-radius:999px;
  font-size:13px; font-weight:600; box-shadow:var(--shadow)}
.vuoto{text-align:center; padding:40px 20px; color:var(--muted)}
.vuoto h3{color:var(--ink-2); font-size:16px; margin-bottom:6px}

@media (max-width:820px){
  .shell{grid-template-columns:1fr}
  .nav{position:static; min-height:0; flex-direction:row; overflow-x:auto; gap:6px;
    border-right:0; border-bottom:1px solid var(--border); padding:9px 14px}
  .nav button{width:auto; white-space:nowrap; padding:6px 11px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  main{padding:16px; padding-block:16px 48px}
  .brand-sub{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

/* ---- aggiunte: sicurezza, cancellazioni, due passaggi ---- */
.zona-rischio{border:1px solid var(--crit); border-radius:var(--r); background:var(--crit-soft); padding:16px}
.zona-rischio h3{color:var(--crit); font-size:14px; margin-bottom:6px}
.zona-rischio p{font-size:12.5px; color:var(--ink-2); margin:0 0 12px}
.codice{font-family:var(--fm); font-size:15px; letter-spacing:.12em; background:var(--surface-2);
  border:1px solid var(--border); border-radius:8px; padding:11px 13px; word-break:break-all; user-select:all}
.btn.xs{padding:4px 9px; font-size:11.5px}
.nota{font-size:12.5px; color:var(--muted); line-height:1.5}
.badge2fa{font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ok); background:var(--ok-soft); border-radius:999px; padding:2px 8px}
.gate-passi{display:flex; gap:6px; margin-bottom:16px}
.gate-passo{flex:1; height:3px; border-radius:2px; background:var(--surface-3)}
.gate-passo.on{background:var(--accent)}
.attesa{display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:12.5px}
.tabellina td{font-size:12.5px}

/* ---- riquadri con i numeri, grafici, legende ---- */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:var(--r); overflow:hidden}
.tile{background:var(--surface); padding:13px 14px}
.metric{display:flex; flex-direction:column; gap:3px}
.metric-v{font-weight:700; font-size:21px; line-height:1.1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; color:var(--ink)}
.metric-u{font-size:12px; color:var(--muted); font-weight:500}
.metric-l{font-size:11.5px; color:var(--muted); line-height:1.35}
.legend{display:flex; gap:14px; font-size:11.5px; color:var(--ink-2); margin-bottom:8px; flex-wrap:wrap}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend i{width:11px; height:11px; border-radius:3px; display:inline-block; flex:none}
.chart-note{font-size:11.5px; color:var(--muted); margin-top:9px; line-height:1.45}

/* striscia "c'è una versione nuova" */
#agg-banner{
  position:fixed; left:50%; transform:translateX(-50%); z-index:70;
  bottom:calc(16px + env(safe-area-inset-bottom,0px));
  display:flex; align-items:center; gap:12px; max-width:calc(100% - 32px);
  background:var(--ink); color:var(--bg); border-radius:999px;
  padding:9px 10px 9px 18px; font-size:13px; font-weight:500; box-shadow:var(--shadow);
}
#agg-banner .btn{border-color:transparent}

/* ---- scheda del carico, quella che legge il giocatore ---- */
.sec-title.car-su{color:var(--ok)}
.sec-title.car-giu{color:var(--crit)}
.voce-car{border-radius:var(--r); padding:14px 16px; margin-bottom:10px; border:1px solid var(--border)}
.voce-car.su{background:var(--ok-soft); border-color:transparent}
.voce-car.giu{background:var(--crit-soft); border-color:transparent}
.voce-car-h{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.voce-car-t{font-weight:600; font-size:15px}
.voce-car-v{font-size:22px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap}
.voce-car-u{font-size:11.5px; font-weight:500; color:var(--muted)}
.voce-car-d{font-size:12.5px; color:var(--ink-2); margin-top:4px; line-height:1.45}
.voce-car-c{font-size:12.5px; font-weight:600; margin-top:6px}
.voce-car.su .voce-car-c{color:var(--ok)}
.voce-car.giu .voce-car-c{color:var(--crit)}
.bar-car{height:7px; border-radius:4px; background:rgba(0,0,0,.09); margin:9px 0 2px; overflow:hidden}
.voce-car.su .bar-car-f{background:var(--ok)}
.voce-car.giu .bar-car-f{background:var(--crit)}
.bar-car-f{height:100%; border-radius:4px}
@media (prefers-color-scheme:dark){ .bar-car{background:rgba(255,255,255,.12)} }

/* ---- righe neutre della scheda carico ---- */
.riga-car{display:flex; justify-content:space-between; align-items:flex-start; gap:14px;
  padding:11px 0; border-top:1px solid var(--border)}
.riga-car:first-child{border-top:0; padding-top:0}
.riga-car-t{font-weight:600; font-size:14px}
.riga-car-d{font-size:12px; color:var(--muted); margin-top:2px; line-height:1.4}
.riga-car-n{text-align:right; font-size:19px; font-weight:700; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; white-space:nowrap}
.riga-car-c{font-size:11.5px; font-weight:500; color:var(--muted); margin-top:2px}

/* ---- barre partita per partita ---- */
.barre{display:flex; align-items:flex-end; gap:10px; margin:6px 0 4px; flex-wrap:nowrap}
/* con poche partite le barre non devono diventare lenzuola */
.barra{flex:1 1 0; min-width:0; max-width:104px; display:flex; flex-direction:column;
  align-items:center; gap:4px}
.barra-corpo{position:relative; width:100%; height:104px; display:flex; align-items:flex-end;
  background:var(--surface-2); border-radius:6px; overflow:visible}
.barra-v{width:100%; background:var(--accent); border-radius:6px 6px 0 0; min-height:3px}
/* la media di squadra: una tacca che si vede anche sopra la barra piena */
.barra-media{position:absolute; left:-3px; right:-3px; height:0; z-index:2;
  border-top:2px dashed var(--ink); opacity:.55}
.barra-n{font-size:12px; font-weight:700; font-variant-numeric:tabular-nums}
.barra-e{font-size:10px; color:var(--muted); max-width:100%; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.tacca-legenda{display:inline-block; width:12px; height:0 !important;
  border-top:2px dashed var(--muted); border-radius:0 !important; vertical-align:middle}

/* ---- classifica di carico, vista staff ---- */
.clas{display:grid; grid-template-columns:26px minmax(90px,1.4fr) minmax(60px,3fr) 46px 34px;
  gap:10px; align-items:center; padding:7px 0; border-top:1px solid var(--border); cursor:pointer}
.clas:first-of-type{border-top:0}
.clas:hover{background:var(--surface-2)}
.clas-n{font-family:var(--fm); font-size:11.5px; color:var(--muted); text-align:right}
.clas-t{font-size:13.5px; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.clas-r{display:block; font-size:10.5px; color:var(--muted); font-weight:400; text-transform:uppercase; letter-spacing:.05em}
.clas-b{height:9px; border-radius:5px; background:var(--surface-2); overflow:hidden}
.clas-f{height:100%; background:var(--accent); border-radius:5px}
.clas-v{text-align:right; font-weight:700; font-size:14px; font-variant-numeric:tabular-nums}
.clas-m{text-align:right; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .clas{grid-template-columns:24px minmax(70px,1.3fr) minmax(40px,2fr) 42px}
  .clas-m{display:none}
}

/* ---- chi e' andato oltre il suo solito ---- */
.scarto{display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:9px 0; border-top:1px solid var(--border); cursor:pointer}
.scarto:first-of-type{border-top:0; padding-top:2px}
.scarto:hover{background:var(--surface-2)}
.scarto-v{font-size:17px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
.scarto-v.su{color:var(--crit)}
.scarto-v.giu{color:var(--info)}

/* ---- statistiche di partita ---- */
.stat-box{min-width:0}
.stat-r{display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:7px 0; border-top:1px solid var(--border); font-size:13.5px}
.stat-box .stat-r:first-of-type{border-top:0}
.stat-t{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2)}
.stat-v{white-space:nowrap; font-variant-numeric:tabular-nums}
.stat-v .perc{color:var(--muted); font-size:11.5px; margin-left:5px}
.stat-v.vuoto b{color:var(--muted); font-weight:400}

/* ---- dettaglio gesto per gesto ---- */
.gesti-h,.gesti-r{display:grid; grid-template-columns:minmax(104px,1fr) minmax(150px,1.5fr) minmax(150px,1.5fr);
  gap:14px; align-items:start; padding:11px 0; border-top:1px solid var(--border)}
.gesti-h{border-top:0; padding-top:0; font-size:10px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted); font-weight:600}
.gesti-t{font-weight:600; font-size:13.5px; padding-top:3px}
.gsub{min-width:0}
.gsub-tot{font-size:21px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1}
.gsub-tot .vuoto{color:var(--muted); font-weight:400; font-size:17px}
.gsub-p{display:flex; flex-wrap:wrap; gap:3px 12px; margin-top:4px; font-size:11.5px; color:var(--muted)}
.gsub-p b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
.gsub-p .vuoto{color:var(--muted); font-weight:400}
@media (max-width:640px){
  .gesti-h{display:none}
  .gesti-r{grid-template-columns:1fr 1fr; gap:10px}
  .gesti-t{grid-column:1 / -1; padding-top:0}
  .gsub::before{font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); display:block}
  .gsub:nth-of-type(1)::before{content:'ultima'}
  .gsub:nth-of-type(2)::before{content:'stagione'}
}

/* le colonne di totale si distinguono dalle sottoclassi */
table th.col-tot,table td.col-tot{font-weight:700; background:var(--surface-2)}
table th.col-tot{color:var(--ink)}

/* ---- misuratore di disponibilita' --------------------------------------
   L'informazione passa dal NUMERO di segmenti pieni, non dal colore: cosi' si
   legge in bianco e nero, al sole, e da chi non distingue rosso e verde.
   I segmenti sono decorativi: la parola accanto resta il testo vero. */
.mis{display:inline-flex; gap:2.5px; vertical-align:middle; flex:none}
.mis i{width:7px; height:16px; border-radius:2px; background:var(--surface-3); display:block}
.mis.ok  i:nth-child(-n+4),
.mis.lim i:nth-child(-n+3),
.mis.rtp i:nth-child(-n+2),
.mis.out i:nth-child(-n+1){background:var(--c)}
.mis.ok{--c:var(--ok)} .mis.lim{--c:var(--warn)}
.mis.rtp{--c:var(--info)} .mis.out{--c:var(--crit)}

.stato{display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:600; white-space:nowrap}
.stato.ok{color:var(--ok)} .stato.lim{color:var(--warn)}
.stato.rtp{color:var(--info)} .stato.out{color:var(--crit)}

/* ---- chi sta bene non ha bisogno di essere notato ----------------------
   Riga sobria: niente bordo colorato, niente ombra, niente misuratore.
   Cosi' socchiudendo gli occhi emergono solo i giocatori con un problema. */
.liberi{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:2px 14px; margin-top:2px}
.libero{display:flex; align-items:baseline; gap:8px; padding:6px 8px; border-radius:7px;
  background:transparent; border:0; width:100%; text-align:left; cursor:pointer; color:var(--ink)}
.libero:hover{background:var(--surface-2)}
.libero .n{font-family:var(--fm); font-size:11.5px; color:var(--muted); min-width:18px; text-align:right}
/* il nome ha la precedenza: e' il ruolo che si accorcia, non il cognome */
.libero .nm{font-size:13.5px; font-weight:500; flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.libero .rl{font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em;
  flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---- la riga di risposta in cima a Disponibilita' ---- */
.risposta{margin-bottom:14px}
.risposta-n{font-size:26px; letter-spacing:-.02em; line-height:1.2}
.risposta-n b{font-weight:700}
.risposta-c{color:var(--ink-2); font-size:13.5px; margin-top:5px}
.risposta-q{color:var(--muted); font-size:12px; margin-top:7px}

/* ---- scegliere quale partita guardare ---- */
.scelta-p{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:-4px 0 14px}
.scelta-p label{font-size:12px; color:var(--muted)}
.scelta-p select{flex:1 1 220px; max-width:360px}
.barra[data-sceglie]{cursor:pointer}
.barra[data-sceglie]:hover .barra-v{filter:brightness(1.12)}
.barra[data-sceglie]:hover .barra-e{color:var(--ink)}

/* ---- spiegazione degli indici, chiusa di default ---- */
.spiega{border:1px solid var(--border); border-radius:var(--r); background:var(--surface);
  padding:0 14px; margin:-2px 0 14px}
.spiega summary{cursor:pointer; padding:11px 0; font-size:13px; font-weight:600; color:var(--accent-ink)}
.spiega summary::marker{color:var(--muted)}
.spiega[open] summary{border-bottom:1px solid var(--border)}
.spiega p{font-size:13px; color:var(--ink-2); line-height:1.55; margin:11px 0}
.spiega p:last-child{margin-bottom:14px}
@media (prefers-color-scheme:dark){.spiega summary{color:var(--accent)}}

/* ---- confronto con la squadra: due barre in proporzione ---- */
.cf-riga{display:grid; grid-template-columns:70px minmax(0,1fr) auto; gap:12px;
  align-items:center; padding:7px 0}
.cf-chi{font-size:13px; font-weight:600}
.cf-barra{display:flex; height:22px; border-radius:6px; overflow:hidden; background:var(--surface-2)}
.cf-s{display:block; height:100%}
.cf-s.bene{background:var(--ok)}
.cf-s.neutro{background:var(--border-strong)}
.cf-s.male{background:var(--crit)}
.cf-vuota{flex:1; background:var(--surface-2)}
.cf-n{font-size:11.5px; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums}
.cf-legenda{display:flex; flex-wrap:wrap; gap:6px 18px; margin:10px 0 2px; font-size:12px}
.cf-leg{display:inline-flex; align-items:center; gap:6px; color:var(--ink-2)}
.cf-leg i{width:11px; height:11px; border-radius:3px; flex:none}
.cf-leg i.bene{background:var(--ok)}
.cf-leg i.neutro{background:var(--border-strong)}
.cf-leg i.male{background:var(--crit)}
.cf-leg b{font-variant-numeric:tabular-nums}
.cf-sq{color:var(--muted)}
@media (max-width:560px){
  .cf-riga{grid-template-columns:58px minmax(0,1fr); gap:9px}
  .cf-n{grid-column:2; margin-top:-4px}
}

/* ===== rosa: cerca e filtra (intervento 5) ===== */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.filtri{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin:0 0 14px}
.filtri .chips{margin:0}
.cerca{position:relative; flex:1 1 220px; min-width:180px; max-width:320px}
.cerca input{width:100%; padding-left:32px}
.cerca::before{content:""; position:absolute; left:11px; top:50%; width:12px; height:12px;
  margin-top:-7px; border:1.6px solid var(--muted); border-radius:50%; pointer-events:none}
.cerca::after{content:""; position:absolute; left:21px; top:50%; width:6px; height:1.6px;
  margin-top:3px; background:var(--muted); transform:rotate(45deg); pointer-events:none}
.nessuno{text-align:center; color:var(--muted); padding:26px 12px}

/* ===== cambiare stato dalla riga (intervento 6) ===== */
.cella-stato{display:flex; align-items:center; gap:8px; justify-content:space-between}
.t-stato{flex:none; color:var(--muted)}
.t-stato:hover{color:var(--accent-ink); border-color:var(--accent)}
tr:not(:hover) .t-stato{opacity:.45}
tr:hover .t-stato, .t-stato:focus-visible{opacity:1}
.pcard-riga{position:relative}
.pcard-riga .t-stato{position:absolute; top:9px; right:9px; z-index:1}
.pcard-riga .pcard{padding-right:64px}
@media (hover:none){ .t-stato{opacity:1} }
.gruppo-f{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.eti-f{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); flex:none}
@media (max-width:600px){ .gruppo-f{width:100%} .cerca{max-width:none} }

/* il link al video, nella scheda del giocatore */
.veo-riga{margin:-4px 0 14px}
.veo-btn{display:inline-flex; align-items:center; gap:7px; min-height:40px}
.veo-min{font-size:11px; color:var(--accent-ink); text-decoration:none;
  border:1px solid var(--border-strong); border-radius:999px; padding:1px 7px; margin-left:6px;
  white-space:nowrap}
.veo-min:hover{border-color:var(--accent); color:var(--accent)}

/* ===== indicazioni dall'infermeria, in home ===== */
.note-box{margin-bottom:16px}
.note-h{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px}
.note-n{font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-ink);
  background:var(--accent-soft,rgba(90,140,220,.14)); border-radius:999px; padding:2px 9px; white-space:nowrap}
.nota-r{border-top:1px solid var(--border); padding:11px 0 10px; cursor:pointer}
.nota-r:first-of-type{border-top:0; padding-top:6px}
.nota-r:hover .nota-chi{color:var(--accent-ink)}
.nota-r.fresca{border-left:3px solid var(--accent); margin-left:-13px; padding-left:10px}
.nota-top{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.nota-chi{font-weight:600; font-size:13.5px}
.nota-st{font-size:11.5px; color:var(--muted)}
.tag-nuovo{font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:#fff;
  background:var(--accent); border-radius:999px; padding:1px 7px}
.nota-txt{font-size:13px; color:var(--ink); margin-top:6px; line-height:1.5}
.nota-meta{font-size:11.5px; color:var(--muted); margin-top:5px}

/* ===== chi usa il Gestionale (solo amministratore) ===== */
.uso-box{margin-bottom:18px}
.uso-box .num.zero{color:var(--muted)}
.ora-su{font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:#fff;
  background:var(--ok); border-radius:999px; padding:1px 7px; vertical-align:1px}
.sett{display:inline-flex; align-items:flex-end; gap:2px; height:20px}
.sett i{display:block; width:5px; background:var(--accent); border-radius:1px; opacity:.75}
.sett i[style*="height:2px"]{background:var(--border-strong); opacity:1}