:root { --fondo:#f2f4f7; --blu:#14304f; --grigio:#6b7a8d; --linea:#e6eaf0; --verde:#1f8a4c; color-scheme: light }
* { box-sizing: border-box }
body { margin:0; background:var(--fondo); color:var(--blu); font-family:"Helvetica Neue",Helvetica,Arial,sans-serif }
.barra { display:flex; justify-content:space-between; align-items:center; padding:12px 20px; background:#fff; border-bottom:1px solid var(--linea); font-size:17px }
.proto { font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--grigio) }
.comandi { display:flex; flex-wrap:wrap; gap:12px 16px; align-items:flex-end; padding:14px 20px; background:#fff; border-bottom:1px solid var(--linea) }
.comandi label { display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:700; color:var(--grigio) }
.comandi .largo { flex:1 1 260px }
.comandi select, .comandi input:not([type=checkbox]) { font:inherit; font-size:15px; font-weight:400; color:var(--blu); padding:9px 10px; border:1px solid #c9d2dd; border-radius:8px; background:#fff; min-height:42px }
#tol { width:70px }
.comandi .spunta { flex-direction:row; align-items:center; min-height:42px }
button { font:inherit; font-weight:700; font-size:15px; padding:10px 18px; min-height:42px; border:0; border-radius:8px; background:var(--blu); color:#fff; cursor:pointer }
#candidati { flex:1 1 100%; display:flex; flex-wrap:wrap; gap:8px }
#candidati details { flex:1 1 100%; font-size:13px; color:var(--grigio) } #candidati details summary { cursor:pointer; padding:4px 0 } #candidati details .cand { margin:4px 6px 0 0 }
#candidati .lab { flex:1 1 100%; font-size:12px; color:var(--grigio) }
.comandi .cand { flex-direction:row; display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border:1px solid #c9d2dd; border-radius:20px; font-size:13px; background:#fff; cursor:pointer }
.cand.on { border-color:var(--blu); background:#eef3f9; font-weight:700 }
.cand em { font-style:normal; font-size:11px; color:var(--verde); font-weight:700 }

.foglio { padding:22px 26px 18px; max-width:1500px; margin:0 auto }
.top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px }
.kick { font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--verde) }
h1 { margin:6px 0 4px; font-size:28px; letter-spacing:-.01em }
.sub { font-size:14px; color:#4d6178 }
.bollo { font-size:11px; font-weight:800; letter-spacing:.1em; color:#b42318; border:2px solid #b42318; border-radius:6px; padding:6px 10px; white-space:nowrap }
.chips { display:flex; gap:8px; margin:12px 0 14px; flex-wrap:wrap }
.chip { font-size:13px; font-weight:700; padding:6px 14px; border-radius:20px; background:#fff; border:1.5px solid var(--c); color:var(--c) }
.chip.pieno { background:var(--c); color:#fff }
.main { display:flex; gap:18px; align-items:stretch }
.box { background:#fff; border-radius:16px; padding:20px 22px; box-shadow:0 1px 2px rgba(20,48,79,.06); min-width:0 }
.radar { flex:0 0 50%; display:flex; flex-direction:column }
.radar .g svg { width:100%; height:auto; display:block; font-family:inherit }
.vuoto { margin:40px 10px; padding:18px; border:1px dashed #c9d2dd; border-radius:12px; color:#4d6178; line-height:1.5 }
h2 { margin:0; font-size:17px } .note { font-size:12px; color:var(--grigio); margin-top:3px }
.legs { display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:center; font-size:13px; font-weight:600 }
.leg i { display:inline-block; width:20px; height:3px; border-radius:2px; vertical-align:middle; margin-right:6px }
.tab { flex:1; min-width:0 }
.main > * { min-width:0 }
.comandi label { min-width:0 } .comandi .cand { max-width:100% }
.scorri { overflow-x:auto; margin-top:10px }
table { width:100%; border-collapse:collapse; font-size:14px }
th { font-size:12px; text-align:right; padding:0 0 8px 8px; vertical-align:bottom; line-height:1.25 }
th small { font-weight:600; color:#4d6178 }
td { border-top:1px solid var(--linea); padding:7px 0 7px 8px; text-align:right; vertical-align:top }
td small { display:block; font-size:10.5px; color:var(--grigio); font-weight:400 }
td small.warn { color:#b42318 }
td.p { text-align:left; font-weight:700; font-size:13px; position:sticky; left:0; background:#fff; padding-left:0 }
td.n { color:var(--verde); font-weight:800 }
tr.extra td { font-size:12px; line-height:1.3; color:#4d6178 } tr.extra td.n { color:var(--verde); font-weight:700 }
tr.extra td.p { color:var(--blu); font-size:12.5px }
tr.sep td { font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--grigio); text-align:left; padding-top:14px; border-top:0 }
tr.interno td { background:#fff5f4 } tr.sep.interno td { color:#b42318 }
.nd { color:#a0abb8; font-style:italic }
.liv { font-size:11px !important }
td.assenti { text-align:left; font-size:11px; color:#a0abb8; border-top:0 }
.crit { font-size:11.5px; color:var(--grigio); line-height:1.45; margin-top:12px }
.foot { display:flex; justify-content:space-between; gap:12px; font-size:11px; color:#8a97a8; margin-top:8px }

@media (max-width: 900px) {
  .comandi select, .comandi input:not([type=checkbox]) { width:100% }
  .comandi .largo { flex:1 1 100% }
  .chip { font-size:12px }
  .barra, .comandi { padding-left:16px; padding-right:16px }
  .foglio { padding:16px }
  h1 { font-size:22px }
  .main { flex-direction:column }
  .radar { flex:none }
  .box { padding:16px 14px }
  .comandi label:not(.largo):not(.spunta) { flex:1 1 40% }
  .foot { flex-direction:column }
}

@media print {
  @page { size: A4 landscape; margin: 0 }
  body { width:297mm; height:210mm; overflow:hidden; -webkit-print-color-adjust:exact; print-color-adjust:exact }
  .barra, .comandi { display:none }
  .foglio { padding:10mm 12mm 7mm; max-width:none; height:210mm; display:flex; flex-direction:column }
  h1 { font-size:21pt } .main { flex:1; min-height:0; flex-direction:row }
  .radar { flex:0 0 50% } .radar .g { flex:1; min-height:0 } .radar .g svg { height:100%; width:100% }
  .box { padding:5mm 6mm } table { font-size:10.5pt } tr.extra td { font-size:8pt } td small { font-size:7pt }
  .scorri { overflow:visible } .schermo { display:none }
  .main { flex:none; height:132mm; max-height:none } .box { overflow:hidden; display:flex; flex-direction:column }
  .radar .g { display:flex; justify-content:center } .radar .g svg { width:auto; max-width:100% }
  td { padding:1.3mm 0 1.3mm 2mm } td.p { white-space:nowrap; font-size:9pt } table { font-size:9.5pt } th { font-size:8pt }
  .crit { margin-top:3mm; font-size:7.5pt } .foot { font-size:7.5pt; flex-direction:row }
}

/* app: ingresso, tasti della barra, messaggi */
.barra .azioni { display:flex; gap:8px }
button.leggero { background:#fff; color:var(--blu); border:1px solid #c9d2dd; min-height:36px; padding:6px 12px; font-size:13px }
body:has(#app[hidden]) .barra .azioni { display:none }
.ingresso { max-width:520px; margin:12vh auto; padding:0 20px; text-align:center }
.ingresso h1 { font-size:30px } .ingresso p { color:#4d6178; line-height:1.5 }
.ingresso button { margin-top:12px; font-size:17px; padding:12px 26px }
.ingresso button:disabled { opacity:.5 }
.nota { font-size:14px }
.stato { margin:12px 20px 0; padding:10px 14px; border-radius:8px; background:#eef3f9; font-size:14px }
.stato.errore { background:#fdecea; color:#b42318 }
.cand em.prio { color:#b45309 }
@media print { .ingresso, .stato { display:none } }