/* Commento da remoto - stile grafico del Playout L (24/10/2026, richiesta utente: "applica uno stile grafico cosi' come hai
   fatto per i playout. Ordinato, moderno e stiloso"). Stessa famiglia visiva del Playout e delle Regie LVF: IBM Plex Sans per
   l'interfaccia, Barlow Condensed per i titoli di sezione, Plex Mono per orari, password e misure. Colore solo per azioni,
   stati e identita' delle sezioni (--sc: ogni scheda e ogni pannello ha il suo). Transizioni brevi (120-200 ms).
   Copia della versione precedente: ../console-prima-stile-2026-10-24/ (cartella del progetto) e sul server /opt/commento/backup-*. */
:root{
  color-scheme:dark;
  --ground:#0d1317;--surface:#141b21;--raise:#1a232b;--raise2:#202b35;--field:#0c1216;
  --ink:#e6edf2;--soft:#b3c1cd;--muted:#8fa3b3;--faint:#62788a;
  --line:#26333f;--line-soft:#1d2831;
  --accent:#36b7e3;--accent-ink:#06212b;
  --ok:#3bcb8f;--warn:#e9b44a;--err:#ea5f5f;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --r:6px;--h-testata:57px;
  --sc:var(--accent);
  /* nomi della versione precedente, per eventuali stili in linea */
  --sfondo:var(--ground);--pannello:var(--surface);--bordo:var(--line);--testo:var(--ink);--muto:var(--muted);
  --primario:var(--accent);--attenzione:var(--warn);--errore:var(--err);
}
*{box-sizing:border-box}
html{scrollbar-color:#2c3a47 var(--ground)}
body{margin:0;background:var(--ground);color:var(--ink);font:14px/1.5 "IBM Plex Sans",system-ui,sans-serif;caret-color:var(--accent);
  -webkit-font-smoothing:antialiased}
::selection{background:#36b7e355}
:focus-visible{outline:2px solid var(--sc);outline-offset:2px;border-radius:4px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h2,h3{margin:0 0 10px;font-weight:600}
.nascosto{display:none !important}
.ico{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.nota{color:var(--soft);font-size:13px;line-height:1.5}
.errore{color:#f08a8a;margin-top:8px;min-height:1.2em;font-size:13.5px}
.ok-txt{color:var(--ok)} .no-txt{color:#f08a8a} .att-txt{color:var(--warn)}

/* colore di ogni sezione (stessa tavolozza del Playout) */
#scheda-calendario,nav.schede [data-scheda="calendario"],#scelta{--sc:#36b7e3}
#scheda-attivi,nav.schede [data-scheda="attivi"],.pn-mic{--sc:#3bcb8f}
#scheda-chat,nav.schede [data-scheda="chat"],.chat-dock,.pannello.chat{--sc:#b07cf0}
#scheda-monitoria,nav.schede [data-scheda="monitoria"],body.pg-monitoria,.pn-test{--sc:#f0a24b}
#scheda-telecronisti,nav.schede [data-scheda="telecronisti"]{--sc:#2fc4b2}
#scheda-partite,nav.schede [data-scheda="partite"]{--sc:#e86fb1}
#scheda-sessioni,nav.schede [data-scheda="sessioni"],.pn-stato{--sc:#8fa3b3}
#scheda-impostazioni,nav.schede [data-scheda="impostazioni"]{--sc:#8a9cff}

/* ---------- intestazione */
header{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px 16px;min-height:var(--h-testata);padding:9px 20px;
  background:var(--surface);border-bottom:1px solid var(--line)}
.ct-marca{display:flex;align-items:center;gap:12px;min-width:0}
.titolo{font:700 24px/1 "Barlow Condensed",sans-serif;letter-spacing:.03em;white-space:nowrap;color:var(--ink)}
a.titolo:hover{text-decoration:none}
.titolo span{color:var(--accent)}
.titolo .sotto{font:500 13px/1 "IBM Plex Sans",sans-serif;color:var(--muted);margin-left:8px;letter-spacing:0}
.tag-pagina{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);background:var(--raise2);
  padding:4px 9px;border-radius:99px;white-space:nowrap}
.collegamenti{display:flex;gap:2px;margin-left:6px;min-width:0}
.collegamenti a{color:var(--muted);padding:7px 12px;border-radius:var(--r);font-weight:500;white-space:nowrap;
  transition:color 150ms,background-color 150ms}
.collegamenti a:hover{text-decoration:none;color:var(--ink);background:var(--raise)}
.collegamenti a.attiva{color:var(--ink);background:var(--raise2)}
#intestazione-evento{display:flex;align-items:center;gap:12px;min-width:0;padding-left:16px;border-left:1px solid var(--line)}
#nome-evento{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.utente-corrente{margin-left:auto;display:inline-flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink);white-space:nowrap}
.utente-corrente .nota{font-size:12.5px;color:var(--muted)}

/* ---------- pulsanti */
button{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 14px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--raise);color:var(--ink);font:500 14px/1.2 "IBM Plex Sans",system-ui,sans-serif;
  cursor:pointer;white-space:nowrap;transition:transform 120ms var(--ease-out),background-color 150ms,border-color 150ms,color 150ms,box-shadow 150ms}
button:hover{background:var(--raise2);border-color:#3a4b5a}
button:active{transform:scale(.97)}
button.primario{background:var(--accent);border-color:transparent;color:var(--accent-ink);font-weight:600}
button.primario:hover{background:#5cc6ea}
button.piccolo{padding:5px 11px;font-size:13px}
button.pericolo{background:transparent;color:#f29a9a;border-color:color-mix(in srgb,var(--err) 45%,var(--line))}
button.pericolo:hover{background:color-mix(in srgb,var(--err) 14%,transparent);color:#ffc4c4;border-color:var(--err)}
button:disabled{opacity:.42;cursor:default;transform:none}
button.primario:disabled:hover{background:var(--accent)}
/* tasto armato per la seconda conferma (annulla sessione) */
button.armato{background:#fff !important;color:#b13030 !important;border-color:var(--err) !important;font-weight:600;
  box-shadow:0 0 0 3px rgba(234,95,95,.35);animation:armato 1s ease-in-out infinite}
@keyframes armato{50%{box-shadow:0 0 0 6px rgba(234,95,95,.12)}}

/* ---------- campi */
label{display:block;margin:10px 0;color:var(--soft);font-size:13px}
input,select,textarea{width:100%;margin-top:5px;padding:8px 10px;background:var(--field);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--r);font:400 14px/1.3 "IBM Plex Sans",system-ui,sans-serif;min-width:0;transition:border-color 150ms,box-shadow 150ms}
input:hover,select:hover,textarea:hover{border-color:#334352}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--sc);box-shadow:0 0 0 3px color-mix(in srgb,var(--sc) 24%,transparent)}
input::placeholder{color:#74899b}
input[type=checkbox]{width:16px;height:16px;margin:0;padding:0;accent-color:var(--sc);vertical-align:middle}
input[type=range]{width:110px;margin:0 0 0 10px;padding:0;background:transparent;border:0;box-shadow:none;accent-color:var(--accent)}
input[type=date],input[type=time],input[type=number]{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
label.inline{display:inline-flex;align-items:center;gap:8px;margin:6px 14px 6px 0}
label.inline input[type=checkbox]{width:16px}
.pw-chiara{font-family:"IBM Plex Mono",monospace;letter-spacing:.08em;color:var(--ink);font-weight:500}
.riga{display:flex;gap:8px;align-items:center;margin:10px 0}
/* righe di campi (Nuovo utente, filtri delle partite): etichetta sopra il campo, tutti allineati in basso */
.riga>label:not(.inline){display:inline-flex;flex-direction:column;gap:5px;margin:0}
.riga>label:not(.inline) input,.riga>label:not(.inline) select{margin-top:0;height:38px}
.riga:has(>label:not(.inline)){gap:10px 14px;align-items:flex-end}
.riga:has(>label:not(.inline))>button{height:38px}

/* ---------- pannelli (come le schede del Playout: bordo e tinta del colore della sezione) */
.pannello{position:relative;margin:0 0 16px;padding:16px 18px 18px;border-radius:12px;min-width:0;
  border:1px solid color-mix(in srgb,var(--sc) 26%,var(--line));
  background:radial-gradient(700px 200px at 100% 0%,color-mix(in srgb,var(--sc) 13%,transparent),transparent 70%),
             color-mix(in srgb,var(--sc) 4%,var(--surface))}
.pannello>h2,.pannello>h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;font:600 21px/1.1 "Barlow Condensed",sans-serif;
  letter-spacing:.05em;text-transform:uppercase;color:var(--sc)}
.pannello>h3{font-size:18px}
.pannello>h2::before,.pannello>h3::before{content:"";width:11px;height:11px;border-radius:3px;background:var(--sc);flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--sc) 22%,transparent)}
.pannello>h2 .nota,.pannello>h3 .nota{font:400 13px/1.3 "IBM Plex Sans",sans-serif !important;text-transform:none;letter-spacing:0;color:var(--soft)}
.pannello>p.nota{max-width:110ch;color:color-mix(in srgb,var(--sc) 18%,var(--soft))}
.pannello h3:not(:first-child){margin-top:18px}
.pannello:has(>table),.pannello:has(>div>table){overflow-x:auto}
details.pannello summary{cursor:pointer}
fieldset{margin:14px 0;padding:12px 14px 14px;border:1px solid color-mix(in srgb,var(--sc) 18%,var(--line-soft));border-radius:10px;
  background:rgba(6,10,13,.32);min-width:0;overflow-x:auto}
legend{padding:0 8px;font:600 15px/1 "Barlow Condensed",sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:color-mix(in srgb,var(--sc) 70%,var(--ink))}
.griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2px 20px}
.due-colonne{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:0 16px;align-items:start}
@media (max-width:1600px){.due-colonne{grid-template-columns:minmax(0,1fr)}}   /* la tabella delle uscite SRT entra intera */

/* ---------- tabelle */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;color:color-mix(in srgb,var(--sc) 40%,#9fb0bf);font-weight:600;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  padding:8px 10px;border-bottom:1px solid color-mix(in srgb,var(--sc) 25%,var(--line));white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
td b{font-weight:600}
tbody tr{transition:background-color 120ms}
tbody tr:hover{background:#ffffff05}
td input,td select{margin-top:0;font-size:13px;padding:6px 8px}
td button+button{margin-left:4px}
table.uscite input[type=checkbox]{width:16px}
.storico td{font-size:12.5px}
.pagine{display:flex;gap:6px;align-items:center;margin:10px 0;font-size:13px;color:var(--muted)}
.riga.apribile{margin-top:14px}

/* ---------- spie di stato (pillole con puntino, come il Playout) */
.spia{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:600;line-height:1.4;
  background:var(--raise2);color:var(--muted);white-space:nowrap}
.spia::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.spia.ok{color:var(--ok);background:#11312a}
.spia.no{color:#f08a8a;background:#3b1b1b}
.spia.test{color:var(--warn);background:#3a2e14}
.spia.onda{color:#fff;background:var(--err);letter-spacing:.06em}
.spia.onda::before{background:#fff;animation:tally 1.2s ease-in-out infinite}
@keyframes tally{50%{opacity:.3}}
.spie{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center}
td.spie{display:table-cell}
td.spie .spia{margin:0 4px 4px 0}

/* ---------- schede della pagina admin */
main.pagina{display:block;padding:0 20px 48px;max-width:none}
nav.schede{position:sticky;top:var(--h-testata);z-index:20;display:flex;gap:4px;flex-wrap:nowrap;overflow-x:auto;margin:0 -20px 18px;padding:10px 20px;
  background:color-mix(in srgb,var(--ground) 90%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);scrollbar-width:none}
nav.schede::-webkit-scrollbar{display:none}
nav.schede button{flex:none;gap:9px;padding:8px 13px;border:1px solid transparent;background:transparent;color:var(--muted);font-weight:500}
nav.schede button::before{content:"";width:8px;height:8px;border-radius:3px;background:var(--sc);opacity:.5;transform:scale(.8);flex:none;
  transition:opacity 200ms,transform 200ms var(--ease-out),box-shadow 200ms}
nav.schede button:hover{color:var(--ink);background:var(--raise);border-color:transparent}
nav.schede button:hover::before{opacity:.9}
nav.schede button.attiva{color:var(--ink);font-weight:600;background:color-mix(in srgb,var(--sc) 15%,var(--raise2));
  border-color:color-mix(in srgb,var(--sc) 35%,transparent)}
nav.schede button.attiva::before{opacity:1;transform:scale(1);box-shadow:0 0 0 3px color-mix(in srgb,var(--sc) 25%,transparent)}
nav.schede .conta{display:inline-block;min-width:19px;padding:1px 6px;border-radius:99px;background:var(--ok);color:#06251a;
  font:600 11.5px/1.4 "IBM Plex Mono",monospace;text-align:center;margin-left:0}
nav.schede .conta:empty{display:none}
section.scheda{display:block}
#scheda-monitoria iframe{border-radius:12px;border:1px solid color-mix(in srgb,var(--sc) 26%,var(--line)) !important;background:var(--ground)}

/* ---------- calendario */
.cal-testa{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
#cal-nav{display:inline-flex;align-items:center;gap:6px}
#cal-nav button{padding:5px 8px}
.cal-testa b{font:600 20px/1 "Barlow Condensed",sans-serif;letter-spacing:.05em;text-transform:uppercase;min-width:170px;text-align:center}
#cal-aiuto{font-size:12.5px;max-width:62ch}
#calendario-pannello:has(#calendario.nascosto){padding-top:12px;padding-bottom:12px}
#calendario-pannello:has(#calendario.nascosto) .cal-testa{margin:0}
.calendario{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal-giorno-nome{color:var(--muted);font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;text-align:center;padding:2px 0 2px}
.cal-giorno{display:flex;flex-direction:column;gap:3px;min-width:0;min-height:94px;padding:6px;border-radius:8px;cursor:pointer;font-size:12px;
  background:color-mix(in srgb,var(--sc) 3%,var(--field));border:1px solid var(--line-soft);transition:border-color 150ms,background-color 150ms}
.cal-giorno:hover{border-color:color-mix(in srgb,var(--sc) 45%,var(--line));background:var(--raise)}
.cal-giorno.altro-mese{opacity:.4}
.cal-giorno.oggi{border-color:var(--sc);box-shadow:inset 0 0 0 1px var(--sc)}
.cal-giorno .num{font:500 12px/1 "IBM Plex Mono",monospace;color:var(--muted);text-align:right;padding:1px 1px 3px}
.cal-giorno.oggi .num{color:var(--sc);font-weight:600}
.chip{display:block;padding:3px 7px;border-radius:5px;font-size:11.5px;line-height:1.35;background:var(--raise2);color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:filter 150ms}
.chip::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:6px;vertical-align:1px}
.chip:hover{filter:brightness(1.18)}
.chip.senza{background:#3a2e14;color:#f2cf86}
.chip.assegnato{background:#10303c;color:#9fdcf2}
.chip.attivo{background:#11312a;color:#8be3bd}
.chip.onda{background:#4a1a1a;color:#ffc0c0}

/* ---------- eventi programmati, messaggi */
.msg-evidente{margin:6px 0 12px;padding:10px 13px;border-radius:8px;font-size:14px;background:#11312a;color:#a5ecc9;
  border:1px solid color-mix(in srgb,var(--ok) 35%,transparent)}
.msg-evidente.errore{background:#3b1b1b;color:#ffbcbc;border-color:color-mix(in srgb,var(--err) 40%,transparent)}
#tabella-programmati tr.appena-salvato td{background:#15382b;transition:background 1s}
#tabella-programmati tr.in-modifica td{background:color-mix(in srgb,var(--sc) 12%,var(--surface))}
.password-una-volta{margin:10px 0;padding:9px 12px;border-radius:8px;background:#3a2e14;color:#f6d995;font-family:"IBM Plex Mono",monospace;
  border:1px solid color-mix(in srgb,var(--warn) 35%,transparent)}

/* ---------- chiusura automatica: conto alla rovescia e tasti allunga */
.timer{font:500 12.5px/1.4 "IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.timer.vicina{color:var(--warn);font-weight:600}
.timer.imminente{color:#fff;background:var(--err);padding:2px 7px;border-radius:5px;font-weight:600}
.allunga{display:inline-flex;gap:4px}
.allunga button{padding:3px 8px;font-size:12px}

/* ---------- scheda evento (modulo) */
.evento.evidenziato{border-color:color-mix(in srgb,var(--sc) 70%,var(--line));box-shadow:0 20px 44px -28px color-mix(in srgb,var(--sc) 85%,transparent)}
.pannello.evento>h3{gap:8px 12px;margin-bottom:14px;font:600 14px/1.3 "IBM Plex Sans",sans-serif;text-transform:none;letter-spacing:0;color:var(--ink)}
.pannello.evento>h3::before{display:none}
.pannello.evento>h3>span[id^="titolo-"]{font:600 23px/1.05 "Barlow Condensed",sans-serif;letter-spacing:.04em;text-transform:uppercase}
.pannello.evento>h3>span:last-child{display:inline-flex;flex-wrap:wrap;gap:6px}
.evento .numero{display:inline-flex;align-items:center;padding:3px 9px;border-radius:5px;background:color-mix(in srgb,var(--sc) 20%,transparent);
  color:var(--sc);font:700 11px/1.3 "IBM Plex Sans",sans-serif;letter-spacing:.07em;text-transform:uppercase}
.modulo-evento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 16px;margin:4px 0 14px;align-items:start}
.modulo-evento .campo{display:flex;flex-direction:column;min-width:0}
.modulo-evento .campo.largo2{grid-column:span 2}
.modulo-evento .campo.pieno{grid-column:1 / -1}
.modulo-evento label{margin:0 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:var(--soft)}
.modulo-evento input,.modulo-evento select{margin-top:0;height:40px}
.modulo-evento .aiuto{font-size:12.5px;color:var(--muted);margin-top:5px;min-height:15px}
@media (max-width:1000px){.modulo-evento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.modulo-evento{grid-template-columns:minmax(0,1fr)}.modulo-evento .campo.largo2{grid-column:auto}}
.opzioni-evento{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;padding:10px 14px;margin:0 0 6px;border-radius:10px;
  background:color-mix(in srgb,var(--sc) 6%,var(--field));border:1px solid var(--line-soft)}
.opzioni-evento .opzione{display:inline-flex;align-items:center;gap:8px;margin:0;color:var(--ink);font-size:14px;white-space:nowrap}
.opzioni-evento .opzione input[type=checkbox]{width:18px;height:18px}
.opzioni-evento .opzione input[type=number]{width:96px;height:34px;margin:0}
.opzioni-evento .opzione .nota{margin-left:4px;font-size:12.5px;color:var(--muted)}
.processi{margin-top:8px;padding:8px 10px;border-radius:8px;background:var(--field);font:400 12px/1.5 "IBM Plex Mono",monospace;
  color:var(--soft);white-space:pre-wrap}
.processi:empty{display:none}

/* ---------- console del telecronista */
main{display:grid;grid-template-columns:minmax(0,2fr) minmax(320px,1fr);grid-template-areas:"video comandi" "sotto comandi";
  gap:16px 18px;padding:18px 20px 32px;max-width:1640px;margin:0 auto;align-items:start}
.colonna{min-width:0}
.colonna.video{grid-area:video}
.colonna.comandi{grid-area:comandi;display:grid;gap:16px;align-content:start}
.colonna.sotto-video{grid-area:sotto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.colonna.comandi .pannello,.colonna.sotto-video .pannello{margin:0}
@media (max-width:1180px){.colonna.sotto-video{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){
  main{grid-template-columns:minmax(0,1fr);grid-template-areas:"video" "comandi" "sotto";padding:12px}
}
#scelta{max-width:1000px;margin:28px auto;padding:20px 22px}
.elenco-eventi{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin:0 0 14px}
.evento-btn{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;white-space:normal;line-height:1.35;padding:14px 16px;
  border-radius:10px;background:var(--surface);border:1px solid var(--line)}
.evento-btn:hover{border-color:color-mix(in srgb,var(--sc) 55%,var(--line));background:color-mix(in srgb,var(--sc) 6%,var(--surface))}
.evento-btn br{display:none}
.evento-btn b{font:600 21px/1.08 "Barlow Condensed",sans-serif;letter-spacing:.04em;text-transform:uppercase}
.evento-btn span{font:500 13px/1.3 "IBM Plex Mono",monospace;color:var(--soft)}
.evento-btn span.nota{font:400 12.5px/1.4 "IBM Plex Sans",sans-serif;color:var(--muted)}
.evento-btn.attivo{border-color:color-mix(in srgb,var(--ok) 60%,var(--line));background:#0f2a23}
.evento-btn.attivo span.nota{color:var(--ok);font-weight:600}
.riquadro-video{position:relative;background:#000;border-radius:12px;overflow:hidden;aspect-ratio:16/9;
  border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));box-shadow:0 22px 46px -30px color-mix(in srgb,var(--accent) 75%,transparent)}
video{width:100%;height:100%;display:block;background:#000}
.banner{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;background:rgba(10,15,19,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font:600 20px/1.3 "IBM Plex Sans",sans-serif;text-align:center}
.banner.voce{background:rgba(59,203,143,.92);color:#04241a}
.banner.loop{background:rgba(233,180,74,.92);color:#2b1d00}
.avvia-media{position:absolute;inset:0;margin:auto;width:min(82%,480px);height:76px;z-index:3;border:0;border-radius:12px;font-size:18px;font-weight:600;
  background:var(--accent);color:var(--accent-ink);box-shadow:0 18px 40px -16px rgba(0,0,0,.75)}
.avvia-media .ico{width:22px;height:22px;fill:currentColor;stroke:none}
.avvia-media:hover{background:#5cc6ea}
.barra{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0 10px}
.diag{margin-left:auto;font:400 12px/1.4 "IBM Plex Mono",monospace;color:var(--muted)}
.meter{display:flex;align-items:center;gap:12px;margin:9px 0;font-size:13px;color:var(--soft)}
.meter>span:first-child{width:130px;flex:none}
.barra-meter{flex:1;height:10px;background:var(--field);border:1px solid var(--line-soft);border-radius:99px;overflow:hidden}
.barra-meter div{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--ok) 70%,var(--warn) 86%,var(--err));transition:width 80ms linear}
.meter .valore{width:64px;flex:none;text-align:right;font:500 12px/1 "IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;color:var(--muted)}
.stato{font-size:13.5px;color:var(--soft);line-height:1.75}
.stato b{color:var(--ink)}
.esito{margin-top:12px;padding:10px 13px;border-radius:10px;font-size:15px;min-height:1em;border:1px solid transparent}
.esito:empty{display:none}
.esito.in_sync{background:#11312a;color:#a5ecc9;border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.esito.correggi{background:#3a2e14;color:#f6d995;border-color:color-mix(in srgb,var(--warn) 35%,transparent)}
.esito.non_valido,.esito.errore{background:#3b1b1b;color:#ffbcbc;border-color:color-mix(in srgb,var(--err) 40%,transparent)}
.esito.in_corso{background:#10303c;color:#a8def2;border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.dettagli{margin-top:8px;font:400 12px/1.55 "IBM Plex Mono",monospace;color:var(--muted);white-space:pre-line}
.dettagli:empty{display:none}

/* ---------- chat regia-telecronista: console (riquadro sempre aperto) e admin (pannello agganciato / scheda) */
.pannello.chat{position:sticky;top:calc(var(--h-testata) + 14px);z-index:2}
@media (max-width:900px){.pannello.chat{position:static}}
.pannello.chat h3 .nota{margin-left:auto}
.chat-messaggi{height:260px;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;background:var(--field);
  border:1px solid color-mix(in srgb,var(--sc) 18%,var(--line-soft));border-radius:10px;scrollbar-width:thin}
@media (max-width:900px){.chat-messaggi{height:auto;max-height:34vh;min-height:130px}}
.chat-vuota{margin:auto 6px;text-align:center}
.msg{max-width:86%;padding:7px 11px;border-radius:12px;font-size:15px;line-height:1.38;overflow-wrap:anywhere;white-space:pre-wrap}
.msg.altro{align-self:flex-start;background:color-mix(in srgb,var(--sc) 24%,var(--surface));color:#f3edff;border-bottom-left-radius:4px}
.pannello.chat .msg.altro{font-size:17px}
.msg.mio{align-self:flex-end;background:var(--raise2);color:var(--ink);border-bottom-right-radius:4px}
.msg-testa{font-size:11px;color:var(--muted);margin-bottom:2px;white-space:nowrap}
.msg-testa span{margin-left:6px;font-family:"IBM Plex Mono",monospace}
.msg.altro .msg-testa{color:color-mix(in srgb,var(--sc) 50%,#ddd5ef)}
.msg-visto{align-self:flex-end;font-size:11px;color:var(--muted);margin-top:-4px}
.chat-scrive{font-size:12px;color:var(--muted);min-height:16px;margin:4px 2px 0;font-style:italic}
.chat-rapide{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.chat-rapide button{border-radius:99px;padding:6px 12px;font-size:13.5px;background:transparent}
.chat-rapide button:hover{border-color:color-mix(in srgb,var(--sc) 60%,var(--line));background:color-mix(in srgb,var(--sc) 10%,transparent)}
.chat-form{display:flex;gap:6px;margin:0}
.chat-form input{margin:0;flex:1;min-width:0}
.chat-form button.primario{background:var(--sc);color:#160a33}
.chat-form button.primario:hover{background:#c39cf7}
.chat-conta{display:inline-block;background:var(--warn);color:#2b1d00;border-radius:99px;padding:1px 8px;font:700 12px/18px "IBM Plex Mono",monospace}
.chat-conta:empty{display:none}
.pannello.chat.nuovo,.chat-dock.nuovo .chat-dock-testa{animation:chat-lampo .6s ease-in-out 5}
@keyframes chat-lampo{50%{box-shadow:0 0 0 4px rgba(233,180,74,.55);background:#3a3214}}
.chat-errore{color:#f08a8a}
.chat-dock{position:fixed;right:16px;bottom:0;width:min(440px,94vw);z-index:40;display:flex;flex-direction:column;
  border:1px solid color-mix(in srgb,var(--sc) 40%,var(--line));border-bottom:0;border-radius:14px 14px 0 0;
  background:color-mix(in srgb,var(--sc) 6%,var(--surface));box-shadow:0 -12px 34px -14px rgba(0,0,0,.7)}
.chat-dock.chiuso .chat-dock-corpo{display:none}
.chat-dock-testa{display:flex;align-items:center;gap:8px;padding:9px 12px;cursor:pointer;border-radius:14px 14px 0 0;
  background:color-mix(in srgb,var(--sc) 12%,var(--surface));border-bottom:1px solid color-mix(in srgb,var(--sc) 25%,var(--line))}
.chat-dock.chiuso .chat-dock-testa{border-bottom:0}
.chat-dock-testa b{font:600 16px/1 "Barlow Condensed",sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--sc);white-space:nowrap}
.chat-dock-testa select{width:auto;max-width:160px;min-width:0;flex:1 1 120px;margin:0;padding:5px 8px;font-size:13px}
.chat-dock-testa .nota{min-width:0;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.chat-dock-testa button{flex:0 0 auto;padding:5px 8px}
.chat-dock-corpo{display:flex;flex-direction:column;padding:10px 12px 12px;gap:4px}
.chat-dock .chat-messaggi{height:min(320px,45vh)}
.chat-dock .msg.altro{font-size:15px}
.chat-online{display:inline-block;width:9px;height:9px;border-radius:50%;background:#5a6b7d;margin-right:6px;vertical-align:middle}
.chat-online.si{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 25%,transparent)}
#chat-dock-nota:empty{display:none}
.chat-dock.in-scheda{position:static;width:100%;max-width:920px;border:1px solid color-mix(in srgb,var(--sc) 30%,var(--line));border-radius:12px;box-shadow:none}
.chat-dock.in-scheda .chat-dock-testa{cursor:default;border-radius:12px 12px 0 0}
.chat-dock.in-scheda #chat-riduci{display:none}
.chat-dock.in-scheda .chat-dock-corpo{display:flex}
.chat-dock.in-scheda .chat-messaggi{height:min(480px,55vh)}
.chat-dock.in-scheda .chat-dock-testa select{max-width:none}
@media (max-width:700px){.chat-dock:not(.in-scheda){left:0;right:0;width:100%;border-radius:0}}

/* ---------- monitoria dei commenti (pagina propria e scheda dell'admin) */
body.incorporata>header{display:none}
body.incorporata main.pagina{padding:0}
main.pagina>p.nota{margin:16px 20px 0 !important;max-width:110ch}
.griglia-mon{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;padding:16px 20px}
body.incorporata .griglia-mon{padding:14px 2px}
.tile{position:relative;background:#000;border-radius:12px;overflow:hidden;cursor:zoom-in;border:1px solid color-mix(in srgb,var(--sc) 28%,var(--line));
  transition:border-color 150ms,transform 120ms var(--ease-out),box-shadow 150ms}
.tile:hover{border-color:var(--sc);box-shadow:0 18px 38px -26px color-mix(in srgb,var(--sc) 80%,transparent)}
.tile:active{transform:scale(.99)}
.tile video{width:100%;aspect-ratio:16/9;display:block;background:#000}
.tile.senza-flusso video{opacity:.3}
.tile-testa{position:absolute;top:0;left:0;right:0;padding:9px 10px 22px;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;
  background:linear-gradient(180deg,rgba(0,0,0,.8),transparent)}
.tile-testa b{font:600 18px/1.1 "Barlow Condensed",sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#fff}
.tile-spie{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.tile-spie .spia{font-size:11px;padding:2px 8px}
.tile-piede{padding:8px 11px;font:400 12px/1.45 "IBM Plex Mono",monospace;color:var(--soft);background:var(--surface);border-top:1px solid var(--line-soft)}
.ingrandito{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;gap:10px;padding:14px 18px;background:rgba(8,12,15,.97)}
.ing-testa{display:flex;gap:12px;align-items:center}
.ing-testa b{font:600 24px/1.05 "Barlow Condensed",sans-serif;letter-spacing:.04em;text-transform:uppercase}
.ing-testa button{margin-left:auto}
#ing-video{flex:1;min-height:0;width:100%;background:#000;border-radius:12px;border:1px solid color-mix(in srgb,var(--sc) 30%,var(--line))}
.ing-audio{padding:10px 14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--sc) 26%,var(--line));
  background:color-mix(in srgb,var(--sc) 5%,var(--surface))}
.ing-audio .riga{align-items:center;flex-wrap:wrap}
.ing-audio .meter>span:first-child{width:22px;font-family:"IBM Plex Mono",monospace}
.etichetta{color:var(--soft);margin-left:16px;font-size:13px}
.ing-audio b{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;min-width:52px;text-align:center}

/* ---------- accesso (finestra creata da comune.js) */
.login-sfondo{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;
  background:radial-gradient(900px 520px at 50% -10%,rgba(54,183,227,.12),transparent 70%),var(--ground)}
.login-box{width:min(400px,100%);padding:26px 26px 22px;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 26px 60px -32px rgba(0,0,0,.85)}
.login-box .login-logo{width:160px;height:21px;display:block;margin:0 0 20px;color:var(--ink)}
.login-box h2{font:700 30px/1 "Barlow Condensed",sans-serif;letter-spacing:.03em;text-transform:uppercase;margin:0 0 6px}
.login-box .riga button{width:100%;padding:11px;font-size:15px}

/* ---------- logo Comintech (22/10/2026): simbolo SVG inline, colore del testo */
.ct-logo{width:149px;height:19px;flex:none;display:block;color:var(--ink)}
.ct-sep{width:1px;height:22px;background:var(--line);flex:none;align-self:center}
.ct-logo-grande{width:216px;height:46px;display:block;margin:0 0 16px;color:var(--ink)}

/* ---------- schermi stretti (telefono del telecronista) */
@media (max-width:900px){
  header{position:static;flex-wrap:wrap;padding:10px 12px;gap:8px 12px}
  nav.schede{top:0;margin:0 -12px 14px;padding:8px 12px}
  main.pagina{padding:0 12px 40px}
  .titolo{font-size:21px}
  .collegamenti{order:3;width:100%;margin:0;overflow-x:auto;scrollbar-width:none}
  #intestazione-evento{order:4;width:100%;padding:8px 0 0;border-left:0;border-top:1px solid var(--line-soft);justify-content:space-between}
  .griglia-mon{grid-template-columns:minmax(0,1fr);padding:12px}
  #scelta{margin:14px 12px}
}
@media (max-width:700px){
  .ct-logo{width:112px;height:15px}
  .ct-sep{display:none}
  input,select,textarea{font-size:16px}       /* sotto i 16 px Safari su iPhone ingrandisce la pagina a ogni tocco */
  .meter>span:first-child{width:96px}
  .pannello{padding:14px 14px 16px}
  .pannello>table,.pannello>div>table{min-width:720px}   /* sul telefono le tabelle scorrono di lato invece di schiacciarsi */
}
@media (prefers-reduced-motion:reduce){
  *,*::before{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* 24/10/2026 sera: il riquadro Microfono va in cima alla colonna di destra, sopra la chat. Con la chat fissa (sticky) sotto di lui,
   su uno schermo da portatile il tasto "Collega microfono" finiva sotto la chat appena si scorreva verso il test. */
.colonna.comandi .pn-mic{order:-1}