:root {
  --bg: #0B111B; --bg2: #0F1724; --card: #131C2B; --card2: #182335; --bordo: #22314A;
  --testo: #EAF0F7; --testo2: #8E9BB0; --blu: #2F6FED; --blu2: #4A84F5;
  --verde: #30C26E; --verde-s: rgba(48,194,110,.14); --rosso: #F0505A; --rosso-s: rgba(240,80,90,.14);
  --giallo: #F5B524; --giallo-s: rgba(245,181,36,.14); --grigio: #52627A;
  --r: 16px; --font: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--testo); font-family: var(--font); font-size: 15px; }
body { min-height: 100vh; background: radial-gradient(1200px 600px at 80% -10%, #14213a 0%, transparent 60%), var(--bg); }
a { color: var(--blu2); text-decoration: none; }
h1 { font-size: 26px; margin: 4px 0 18px; letter-spacing: -.3px; }
h2 { font-size: 17px; margin: 0 0 14px; }
.sotto { color: var(--testo2); font-size: 13px; font-weight: 400; }
.mono { font-family: Consolas, "Cascadia Mono", monospace; }
.nascosto { display: none !important; }

/* Testata */
.testata { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 28px; background: rgba(11,17,27,.82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--bordo); }
.marchio { display: flex; align-items: center; gap: 12px; color: var(--testo); font-weight: 700; font-size: 18px; }
.marchio img { height: 34px; max-width: 120px; object-fit: contain; }
nav { display: flex; gap: 4px; flex-wrap: wrap; }
nav a { color: var(--testo2); padding: 8px 14px; border-radius: 10px; font-weight: 600; font-size: 14px; }
nav a:hover { color: var(--testo); background: var(--card); }
nav a.attivo { color: var(--testo); background: var(--card2); }
nav a.esci { color: var(--testo2); }

.contenuto { max-width: 1400px; margin: 0 auto; padding: 26px 28px 40px; }
.centro { min-height: 100vh; display: grid; place-items: center; padding: 20px; }

/* Avvisi */
.avviso { padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; font-weight: 600; border: 1px solid; }
.avviso.ok { background: var(--verde-s); border-color: rgba(48,194,110,.4); color: #7EE2A8; }
.avviso.errore { background: var(--rosso-s); border-color: rgba(240,80,90,.4); color: #FF9AA0; }

/* Pulsanti */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; border-radius: 11px;
  border: 1px solid var(--bordo); background: var(--card2); color: var(--testo); font: 600 14px var(--font); cursor: pointer; transition: .15s; }
.btn:hover { background: #20304a; border-color: #2c4062; }
.btn.primario { background: var(--blu); border-color: var(--blu); color: #fff; }
.btn.primario:hover { background: var(--blu2); }
.btn.pericolo { background: transparent; border-color: rgba(240,80,90,.5); color: var(--rosso); }
.btn.pericolo:hover { background: var(--rosso-s); }
.btn.piccolo { padding: 6px 11px; font-size: 13px; border-radius: 9px; }
.btn.largo { width: 100%; padding: 13px; font-size: 15px; }
.btn.esito-ok { border-color: var(--verde); color: var(--verde); }
.btn.esito-ko { border-color: var(--rosso); color: var(--rosso); }

/* Login */
.scheda-login { width: 100%; max-width: 380px; background: var(--card); border: 1px solid var(--bordo); border-radius: 22px;
  padding: 34px 30px; box-shadow: 0 30px 80px rgba(0,0,0,.45); display: grid; gap: 14px; }
.scheda-login h1 { text-align: center; margin: 0; }
.scheda-login .sotto { text-align: center; margin: -6px 0 4px; }
.login-logo { display: grid; place-items: center; }
.login-logo img { max-height: 70px; max-width: 200px; }
.semaforo-mini { display: flex; gap: 8px; padding: 8px 12px; background: #070b12; border-radius: 30px; }
.semaforo-mini i { width: 18px; height: 18px; border-radius: 50%; background: #1d2636; }
.semaforo-mini i.v.on { background: var(--verde); box-shadow: 0 0 14px var(--verde); }

/* Moduli */
label { display: grid; gap: 6px; font-weight: 600; font-size: 13.5px; color: #C9D3E2; }
input, select { width: 100%; padding: 11px 13px; border-radius: 11px; border: 1px solid var(--bordo); background: var(--bg2);
  color: var(--testo); font: 15px var(--font); outline: none; transition: border .15s, box-shadow .15s; }
input:focus, select:focus { border-color: var(--blu); box-shadow: 0 0 0 3px rgba(47,111,237,.25); }
input[type=file] { padding: 9px; font-size: 13px; }
input[type=radio], input[type=checkbox] { width: auto; accent-color: var(--blu); }
.modulo { display: grid; gap: 18px; }
.modulo .pannello { display: grid; gap: 16px; }
.due-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.due-col.stretta { gap: 10px; }
fieldset { border: 1px solid var(--bordo); border-radius: 14px; padding: 14px 16px 16px; display: grid; gap: 10px; margin: 0; }
legend { padding: 0 6px; font-weight: 700; color: var(--testo2); font-size: 13px; }
.scelta { display: flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
.porta { max-width: 160px; }
.piede-modulo { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
.logo-attuale { display: flex; align-items: center; gap: 14px; }
.zona-pericolo { margin-top: 18px; display: flex; justify-content: flex-end; }
.interruttore { display: flex; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; flex-wrap: wrap; }
.interruttore input { display: none; }
.interruttore > span:first-of-type { width: 40px; height: 23px; border-radius: 20px; background: #263247; position: relative; transition: .2s; flex: none; }
.interruttore > span:first-of-type::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px;
  border-radius: 50%; background: #9aa7bb; transition: .2s; }
.interruttore input:checked + span { background: var(--blu); }
.interruttore input:checked + span::after { left: 20px; background: #fff; }

/* Pannelli e tabelle */
.pannello { background: var(--card); border: 1px solid var(--bordo); border-radius: var(--r); padding: 20px 22px; margin-bottom: 18px; }
.pannello.senza-pad { padding: 0; overflow: auto; }
.pannello-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.pannello-testa h2 { margin: 0; }
.titolo-sezione { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.titolo-sezione h1 { margin: 0; }
.tabella { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabella th { text-align: left; color: var(--testo2); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
  padding: 12px 16px; border-bottom: 1px solid var(--bordo); }
.tabella td { padding: 12px 16px; border-bottom: 1px solid #1a2538; vertical-align: middle; }
.tabella tr:last-child td { border-bottom: none; }
.tabella tr.aperto td { color: #FF9AA0; font-weight: 600; }
.col-logo { width: 64px; }
.azioni { text-align: right; white-space: nowrap; }
.azioni .btn + .btn { margin-left: 6px; }
.etichetta { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; background: #222e42; color: var(--testo2); }
.etichetta.up { background: var(--verde-s); color: var(--verde); }
.etichetta.down { background: var(--rosso-s); color: var(--rosso); }
.etichetta.pausa { background: #232a36; color: #7d8aa0; }
.vuoto { color: var(--testo2); text-align: center; padding: 30px 10px; }
.indietro { display: inline-block; color: var(--testo2); margin-bottom: 10px; font-weight: 600; }
.indietro:hover { color: var(--testo); }

/* Logo sede */
.logo-sede { width: 44px; height: 44px; border-radius: 12px; background: #fff; display: grid; place-items: center; overflow: hidden; flex: none; }
.logo-sede img { width: 86%; height: 86%; object-fit: contain; }
.logo-sede span { font-weight: 800; color: #fff; font-size: 15px; }
.logo-sede:not(:has(img)) { background: linear-gradient(135deg, #2F6FED, #3F7F8C); }
.logo-sede.grande { width: 64px; height: 64px; border-radius: 16px; }
.logo-sede.grande span { font-size: 22px; }

/* Riepilogo dashboard */
.riepilogo { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--bordo);
  border-radius: 20px; padding: 18px 24px; margin-bottom: 22px; }
.totale { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 260px; }
.cerchio { width: 48px; height: 48px; border-radius: 50%; background: var(--grigio); flex: none; transition: .3s; }
.cerchio.ok { background: var(--verde); box-shadow: 0 0 0 7px var(--verde-s), 0 0 26px rgba(48,194,110,.5); }
.cerchio.ko { background: var(--rosso); box-shadow: 0 0 0 7px var(--rosso-s), 0 0 26px rgba(240,80,90,.6); animation: pulsa 1.4s infinite; }
.cerchio.att { background: var(--giallo); box-shadow: 0 0 0 7px var(--giallo-s); }
.grande { font-size: 21px; font-weight: 800; }
.piccolo { color: var(--testo2); font-size: 13px; margin-top: 2px; }
.contatori { display: flex; gap: 10px; }
.cnt { min-width: 92px; padding: 10px 14px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--bordo); text-align: center; }
.cnt b { display: block; font-size: 24px; }
.cnt span { color: var(--testo2); font-size: 12px; font-weight: 600; }
.cnt.v b { color: var(--verde); } .cnt.g b { color: var(--giallo); } .cnt.r b { color: var(--rosso); }
.strumenti { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Griglia sedi */
.griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.carta { position: relative; display: grid; gap: 14px; background: var(--card); border: 1px solid var(--bordo); border-radius: 20px;
  padding: 18px; color: var(--testo); transition: transform .15s, border-color .2s, box-shadow .2s; overflow: hidden; }
.carta:hover { transform: translateY(-2px); border-color: #30456a; box-shadow: 0 14px 36px rgba(0,0,0,.35); }
.carta::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grigio); }
.carta.stato-up::before { background: var(--verde); }
.carta.stato-down { border-color: rgba(240,80,90,.55); background: linear-gradient(180deg, rgba(240,80,90,.10), var(--card) 60%); }
.carta.stato-down::before { background: var(--rosso); }
.carta.stato-verifica::before { background: var(--giallo); }
.carta.stato-pausa { opacity: .55; }
.carta-testa { display: flex; align-items: center; gap: 13px; }
.carta-nome { flex: 1; min-width: 0; }
.carta-nome b { display: block; font-size: 16.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carta-nome .sotto { font-family: Consolas, monospace; font-size: 12.5px; }
.carta-stato { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.carta-stato .testo { font-weight: 800; font-size: 15px; letter-spacing: .3px; }
.stato-up .carta-stato .testo { color: var(--verde); }
.stato-down .carta-stato .testo { color: var(--rosso); }
.stato-verifica .carta-stato .testo { color: var(--giallo); }
.stato-pausa .carta-stato .testo, .stato-sconosciuto .carta-stato .testo { color: var(--testo2); }
.carta-stato .da { color: var(--testo2); font-size: 12.5px; }
.metriche { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.metriche div { background: var(--bg2); border-radius: 11px; padding: 8px 10px; }
.metriche span { display: block; color: var(--testo2); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.metriche b { font-size: 15px; }
.barre { display: flex; gap: 2px; height: 26px; align-items: flex-end; }
.barre i { flex: 1; border-radius: 2px; background: var(--verde); opacity: .85; min-height: 3px; }
.barre i.ko { background: var(--rosso); height: 100% !important; opacity: 1; }
.barre i.vuota { background: #1f2a3c; height: 100% !important; }

/* Semaforo */
.semaforo { display: flex; flex-direction: column; gap: 5px; padding: 6px; background: #05080d; border-radius: 14px;
  border: 1px solid #1c2738; box-shadow: inset 0 2px 6px rgba(0,0,0,.6); flex: none; }
.semaforo i { width: 15px; height: 15px; border-radius: 50%; background: #1a2232; transition: .3s; }
.semaforo[data-stato=up] .v { background: var(--verde); box-shadow: 0 0 12px var(--verde); }
.semaforo[data-stato=down] .r { background: var(--rosso); box-shadow: 0 0 14px var(--rosso); animation: pulsa 1.2s infinite; }
.semaforo[data-stato=verifica] .g { background: var(--giallo); box-shadow: 0 0 12px var(--giallo); }
.dettaglio-testa .semaforo { flex-direction: row; padding: 8px; gap: 8px; }
.dettaglio-testa .semaforo i { width: 22px; height: 22px; }
@keyframes pulsa { 50% { opacity: .45; } }

.aggiornato { color: var(--testo2); font-size: 12px; text-align: center; margin-top: 18px; }
.aggiornato.errore { color: var(--rosso); font-weight: 600; }

/* Dettaglio sede */
.dettaglio-testa { display: flex; align-items: center; gap: 18px; background: var(--card); border: 1px solid var(--bordo);
  border-radius: 20px; padding: 20px 22px; margin-bottom: 18px; }
.dettaglio-testa.stato-down { border-color: rgba(240,80,90,.55); }
.dt-nome { flex: 1; min-width: 0; }
.dt-nome h1 { margin: 0 0 4px; }
.kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.kpi-box { background: var(--card); border: 1px solid var(--bordo); border-radius: 16px; padding: 16px 18px; }
.kpi-box span { color: var(--testo2); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.kpi-box b { display: block; font-size: 26px; margin-top: 4px; }
.kpi-box b.ok { color: var(--verde); } .kpi-box b.medio { color: var(--giallo); } .kpi-box b.basso { color: var(--rosso); }
.schede { display: flex; background: var(--bg2); border: 1px solid var(--bordo); border-radius: 11px; padding: 3px; }
.schede button { background: none; border: 0; color: var(--testo2); padding: 6px 12px; border-radius: 8px; font: 600 13px var(--font); cursor: pointer; }
.schede button.attivo { background: var(--card2); color: var(--testo); }
.grafico { height: 230px; position: relative; }
.grafico svg { width: 100%; height: 100%; display: block; }
.grafico .asse { fill: var(--testo2); font-size: 11px; }
.legenda { display: flex; gap: 14px; align-items: center; color: var(--testo2); font-size: 12.5px; margin-top: 8px; }
.legenda span { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.l-ms { background: var(--blu2); } .l-ko { background: var(--rosso); opacity: .6; }

@media (max-width: 760px) {
  .testata { padding: 10px 16px; flex-direction: column; align-items: flex-start; }
  .contenuto { padding: 18px 16px 30px; }
  .due-col, .kpi { grid-template-columns: 1fr 1fr; }
  .due-col { grid-template-columns: 1fr; }
  .contatori { width: 100%; } .cnt { flex: 1; min-width: 0; }
  .griglia { grid-template-columns: 1fr; }
  .tabella th, .tabella td { padding: 10px; }
}

.griglia { align-items: start; }

/* Icona dispositivo: tipo (dalla descrizione) colorato secondo lo stato */
.icona-sede { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: none;
  background: #1c2739; color: #8E9BB0; border: 1px solid #263450; transition: .3s; }
.icona-sede svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icona-sede svg .pieno { fill: currentColor; stroke: none; opacity: .9; }
.icona-sede.st-up { background: var(--verde-s); color: var(--verde); border-color: rgba(48,194,110,.35); }
.icona-sede.st-down { background: var(--rosso-s); color: var(--rosso); border-color: rgba(240,80,90,.45); }
.icona-sede.st-verifica { background: var(--giallo-s); color: var(--giallo); border-color: rgba(245,181,36,.4); }
.icona-sede.con-logo { background: #fff; border-color: transparent; }
.icona-sede.con-logo img { width: 84%; height: 84%; object-fit: contain; }
.icona-sede.con-logo.st-up { box-shadow: 0 0 0 2px var(--verde); }
.icona-sede.con-logo.st-down { box-shadow: 0 0 0 2px var(--rosso); }
.icona-sede.grande { width: 64px; height: 64px; border-radius: 17px; }
.icona-sede.grande svg { width: 36px; height: 36px; }
.desc { display: block; color: #B9C5D6; font-size: 13.5px; font-weight: 500; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desc.grande { font-size: 16px; margin: -2px 0 4px; }
.carta-piede { display: flex; justify-content: space-between; color: var(--testo2); font-size: 12px; margin-top: -4px; }

/* Pausa */
.riga-pausa td { opacity: .7; }
.btn.verde { border-color: rgba(48,194,110,.5); color: var(--verde); }
.btn.verde:hover { background: var(--verde-s); }
form.inline { display: inline; }
.azioni { position: relative; }
.azioni > * { vertical-align: middle; }
.menu-pausa { display: inline-block; position: relative; margin-left: 6px; }
.menu-pausa summary { list-style: none; }
.menu-pausa summary::-webkit-details-marker { display: none; }
.menu-pausa .pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 330px; display: grid; gap: 10px; text-align: left;
  background: var(--card2); border: 1px solid #2c4062; border-radius: 14px; padding: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.5); white-space: normal; }
.menu-pausa .pop input { padding: 8px 10px; font-size: 13.5px; }
.scelte-pausa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fino-a { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.avviso.info { background: rgba(47,111,237,.12); border-color: rgba(47,111,237,.4); color: #9DBBFA; margin: 0; }
.carta.stato-pausa .da { color: #9DBBFA; }

/* Vista elenco */
.elenco { display: grid; gap: 6px; }
.riga { display: grid; grid-template-columns: 46px minmax(180px, 1.6fr) minmax(150px, 1.2fr) .6fr .6fr .6fr minmax(140px, 1.3fr);
  gap: 16px; align-items: center; padding: 10px 16px; background: var(--card); border: 1px solid var(--bordo); border-radius: 14px; color: var(--testo); transition: .15s; }
.riga:not(.intest):hover { border-color: #30456a; background: #162033; }
.riga.intest { background: none; border: 0; padding: 0 16px 2px; color: var(--testo2); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.riga.stato-down { border-color: rgba(240,80,90,.55); background: linear-gradient(90deg, rgba(240,80,90,.12), var(--card) 50%); }
.riga.stato-pausa { opacity: .6; }
.riga .icona-sede { width: 40px; height: 40px; }
.riga .icona-sede svg { width: 22px; height: 22px; }
.r-nome, .t-nome { min-width: 0; }
.r-nome b, .t-nome b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-nome .sotto { display: block; font-size: 12px; }
.r-stato { display: flex; align-items: center; gap: 10px; min-width: 0; }
.r-stato b { display: block; font-size: 13px; letter-spacing: .3px; }
.r-stato .sotto { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stato-up .r-stato b { color: var(--verde); } .stato-down .r-stato b { color: var(--rosso); } .stato-verifica .r-stato b { color: var(--giallo); }
.r-val { font-weight: 700; font-size: 15px; }
.riga .barre { height: 22px; }
.pall { width: 11px; height: 11px; border-radius: 50%; background: var(--grigio); flex: none; }
.pall.up { background: var(--verde); box-shadow: 0 0 8px var(--verde); }
.pall.down { background: var(--rosso); box-shadow: 0 0 10px var(--rosso); animation: pulsa 1.2s infinite; }
.pall.verifica { background: var(--giallo); }

/* Vista compatta (monitor a parete) */
.compatta { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.tessera { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--card);
  border: 1px solid var(--bordo); color: var(--testo); border-left: 4px solid var(--grigio); transition: .15s; }
.tessera:hover { border-color: #30456a; }
.tessera.stato-up { border-left-color: var(--verde); }
.tessera.stato-verifica { border-left-color: var(--giallo); }
.tessera.stato-down { border-color: rgba(240,80,90,.6); border-left-color: var(--rosso); background: linear-gradient(90deg, rgba(240,80,90,.16), var(--card) 70%); }
.tessera.stato-pausa { opacity: .55; }
.tessera .icona-sede { width: 38px; height: 38px; }
.tessera .icona-sede svg { width: 21px; height: 21px; }
.t-nome { flex: 1; }
.t-nome .desc { font-size: 12.5px; }
.t-stato { font-weight: 700; font-size: 13px; color: var(--testo2); white-space: nowrap; }
.stato-up .t-stato { color: var(--verde); } .stato-down .t-stato { color: var(--rosso); } .stato-verifica .t-stato { color: var(--giallo); }

@media (max-width: 900px) {
  .riga { grid-template-columns: 40px 1fr auto; row-gap: 8px; }
  .riga.intest { display: none; }
  .riga .r-stato { grid-column: 2 / 4; }
  .riga .r-val { font-size: 13px; } .riga .r-val::before { content: attr(data-et) " "; color: var(--testo2); font-weight: 500; font-size: 11px; }
  .riga .barre { grid-column: 1 / -1; }
}

.pannello.senza-pad { overflow: visible; }
@media (max-width: 760px) { .pannello.senza-pad { overflow: auto; } .menu-pausa .pop { position: fixed; left: 16px; right: 16px; top: 90px; width: auto; } }

/* Temperature */
.carta.termo { gap: 12px; }
.carta.t-allarme { border-color: rgba(240,80,90,.6); background: linear-gradient(180deg, rgba(240,80,90,.12), var(--card) 55%); }
.carta.t-allarme::before { background: var(--rosso); }
.carta.t-ok::before { background: var(--verde); }
.carta.t-offline { opacity: .7; }
.carta.t-offline::before { background: var(--grigio); }
.pill-stato { font-size: 11px; font-weight: 800; letter-spacing: .5px; padding: 4px 9px; border-radius: 20px; background: #222e42; color: var(--testo2); }
.pill-stato.ok { background: var(--verde-s); color: var(--verde); }
.pill-stato.allarme { background: var(--rosso); color: #fff; animation: pulsa 1.4s infinite; }
.termo-valore { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.termo-valore b { font-size: 46px; line-height: 1; font-weight: 800; letter-spacing: -1.5px; }
.termo-valore span { font-size: 18px; color: var(--testo2); font-weight: 600; }
.termo-valore small { margin-left: auto; color: var(--testo2); font-size: 12px; }
.c-verde b { color: var(--verde); } .c-blu b { color: #6FA8FF; } .c-giallo b { color: var(--giallo); }
.c-rosso b { color: var(--rosso); } .c-grigio b { color: var(--testo2); }
.termo-barra { position: relative; height: 8px; border-radius: 6px; background: linear-gradient(90deg, #3b6fd6, #30C26E 35%, #F5B524 75%, #F0505A); opacity: .9; margin: 4px 0 14px; }
.termo-barra .fascia { position: absolute; top: -3px; bottom: -3px; border: 1.5px solid rgba(255,255,255,.55); border-radius: 6px; }
.termo-barra i { position: absolute; top: -5px; width: 4px; height: 18px; margin-left: -2px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 2px #0B111B; }
.termo-barra em { position: absolute; top: 11px; transform: translateX(-50%); font-style: normal; font-size: 10.5px; color: var(--testo2); }
.spark { width: 100%; height: 46px; display: block; }
.spark .area { fill: rgba(245,165,36,.14); } .spark .linea { fill: none; stroke: #F5A524; stroke-width: 2; vector-effect: non-scaling-stroke; }
.vuoto-s { color: var(--testo2); font-size: 12px; display: grid; place-items: center; }
.l-banda { background: #F5A524; opacity: .3; } .l-soglia { background: none; border-top: 2px dashed #F0505A; height: 0 !important; margin-top: 6px; }
.kpi-box .sotto { display: block; margin-top: 4px; font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.dettaglio-testa.t-allarme { border-color: rgba(240,80,90,.55); }

textarea { width: 100%; padding: 11px 13px; border-radius: 11px; border: 1px solid var(--bordo); background: var(--bg2);
  color: var(--testo); font: 14.5px var(--font); outline: none; resize: vertical; line-height: 1.5; }
textarea:focus { border-color: var(--blu); box-shadow: 0 0 0 3px rgba(47,111,237,.25); }

/* Temperature: due livelli */
.txt-att { color: var(--giallo); } .txt-crit { color: var(--rosso); }
.etichetta.nuovo { background: rgba(47,111,237,.18); color: #9DBBFA; }
.avviso.att { background: var(--giallo-s); border-color: rgba(245,181,36,.45); color: #F7CF6B; }
.carta.t-critico { border-color: rgba(240,80,90,.6); background: linear-gradient(180deg, rgba(240,80,90,.12), var(--card) 55%); }
.carta.t-critico::before { background: var(--rosso); }
.carta.t-attenzione { border-color: rgba(245,181,36,.5); background: linear-gradient(180deg, rgba(245,181,36,.10), var(--card) 55%); }
.carta.t-attenzione::before { background: var(--giallo); }
.pill-stato.critico { background: var(--rosso); color: #fff; animation: pulsa 1.4s infinite; }
.pill-stato.attenzione { background: var(--giallo); color: #2a1d00; }
.diagnosi.attenzione { background: var(--giallo-s); color: #F7CF6B; }
.diagnosi.critico { background: var(--rosso-s); color: #FF9AA0; }
.termo-barra { background: #1d2738; opacity: 1; overflow: visible; }
.termo-barra > span { position: absolute; top: 0; bottom: 0; }
.termo-barra .z-ok { background: var(--verde); opacity: .75; }
.termo-barra .z-att { background: var(--giallo); opacity: .8; }
.termo-barra .z-crit { background: var(--rosso); opacity: .85; }
.termo-barra > span:first-child { border-radius: 0; }
.l-soglia-a { background: none; border-top: 2px dashed var(--giallo); height: 0 !important; margin-top: 6px; }
.dettaglio-testa.t-critico { border-color: rgba(240,80,90,.55); }
.dettaglio-testa.t-attenzione { border-color: rgba(245,181,36,.5); }
.soglie-cella { font-variant-numeric: tabular-nums; font-size: 13.5px; line-height: 1.6; }
.tab-soglie { display: grid; gap: 8px; max-width: 620px; }
.ts-testa, .ts-riga { display: grid; grid-template-columns: 150px 1fr 1fr; gap: 10px; align-items: center; }
.ts-testa span { color: var(--testo2); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.ts-gruppo { margin-top: 10px; font-weight: 700; font-size: 15px; border-top: 1px solid var(--bordo); padding-top: 12px; }
.ts-riga span { font-weight: 600; font-size: 14px; }
.ts-riga.att span { color: var(--giallo); } .ts-riga.crit span { color: var(--rosso); }
.ts-riga.att input { border-color: rgba(245,181,36,.35); } .ts-riga.crit input { border-color: rgba(240,80,90,.35); }
@media (max-width: 760px) { .ts-testa, .ts-riga { grid-template-columns: 110px 1fr 1fr; } }

/* Contatti */
.elenco-scelte { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 14px; padding: 10px 14px;
  border: 1px solid var(--bordo); border-radius: 12px; background: var(--bg2); transition: opacity .2s; }
.elenco-scelte.disattivo { opacity: .35; pointer-events: none; }
.elenco-scelte .scelta { align-items: baseline; }
#permessi.disattivo { opacity: .35; pointer-events: none; }

/* Temperature: vista elenco e compatta */
.riga-t { grid-template-columns: 46px minmax(180px, 1.5fr) minmax(170px, 1.4fr) .7fr .6fr .6fr minmax(140px, 1.3fr); }
.riga-t.t-critico { border-color: rgba(240,80,90,.55); background: linear-gradient(90deg, rgba(240,80,90,.12), var(--card) 50%); }
.riga-t.t-attenzione { border-color: rgba(245,181,36,.5); background: linear-gradient(90deg, rgba(245,181,36,.10), var(--card) 50%); }
.riga-t.t-offline { opacity: .65; }
.riga-t .r-stato b.st-ok { color: var(--verde); } .riga-t .r-stato b.st-critico { color: var(--rosso); }
.riga-t .r-stato b.st-attenzione { color: var(--giallo); } .riga-t .r-stato b.st-offline { color: var(--testo2); }
.riga-t .r-val b { font-size: 17px; }
.riga-t .spark { height: 32px; }
.tessera.t-ok { border-left-color: var(--verde); }
.tessera.t-attenzione { border-left-color: var(--giallo); border-color: rgba(245,181,36,.5); background: linear-gradient(90deg, rgba(245,181,36,.12), var(--card) 70%); }
.tessera.t-critico { border-left-color: var(--rosso); border-color: rgba(240,80,90,.6); background: linear-gradient(90deg, rgba(240,80,90,.16), var(--card) 70%); }
.tessera.t-offline { opacity: .55; }
.t-temp { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.t-temp b { font-size: 20px; font-weight: 800; }
.t-temp small { color: var(--testo2); font-size: 11.5px; }
@media (max-width: 900px) { .riga-t { grid-template-columns: 40px 1fr auto; } }

/* mini grafico colorato secondo lo stato del sensore */
.spark.sp-ok .linea { stroke: var(--verde); } .spark.sp-ok .area { fill: rgba(48,194,110,.14); }
.spark.sp-attenzione .linea { stroke: var(--giallo); } .spark.sp-attenzione .area { fill: rgba(245,181,36,.14); }
.spark.sp-critico .linea { stroke: var(--rosso); } .spark.sp-critico .area { fill: rgba(240,80,90,.16); }
.spark.sp-offline .linea { stroke: var(--grigio); } .spark.sp-offline .area { fill: rgba(82,98,122,.14); }

#blocco-wa { display: grid; gap: 10px; transition: opacity .2s; }
#blocco-wa.disattivo-wa { opacity: .4; }
.istruzioni { background: var(--bg2); border: 1px solid var(--bordo); border-radius: 12px; padding: 10px 14px; }
.istruzioni summary { cursor: pointer; font-weight: 600; color: var(--blu2); }
.istruzioni ol { margin: 10px 0 6px; padding-left: 20px; line-height: 1.7; }
.istruzioni code { background: #0a0f18; padding: 2px 6px; border-radius: 6px; color: #9DBBFA; }