/* MachineCare – stile sobrio da software di misura: superfici piatte, un solo accento, niente effetti. */
:root {
  --sfondo: #1b1f26; --pannello: #232831; --pannello-2: #1e232b; --bordo: #323944; --bordo-forte: #465060;
  --testo: #e4e7ec; --testo-2: #c3c9d3; --grigio: #9aa3b2; --grigio-2: #6f7886;
  --accento: #3b8be0; --accento-scuro: #2e6fb5; --arancio: #e0a92b;
  --ok: #3fa864; --attenzione: #e0a92b; --allarme: #d9534f; --muto: #7a8291; --nessuno: #4a5260;
  --raggio: 6px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--testo); background: var(--sfondo); display: flex; flex-direction: column; min-height: 100vh; }
a { color: var(--accento); }
h1 { font-size: 1.3rem; font-weight: 600; margin: 0; }
button { font: inherit; }

/* barra */
.barra { display: flex; align-items: center; gap: 1.25rem; padding: .4rem 1rem; background: #161a20; border-bottom: 1px solid var(--bordo); color: var(--testo); }
.logo { display: grid; grid-template-columns: auto auto; column-gap: .5rem; align-items: center; color: var(--testo); text-decoration: none; }
.logo img { width: 34px; height: 34px; grid-row: 1 / span 2; mix-blend-mode: screen; border-radius: 50%; }
.logo-nome { font-size: 1.05rem; line-height: 1.15; }
.logo-tg { font-weight: 400; color: var(--testo-2); }
.logo-nome b { font-weight: 600; }
.logo-sotto { font-size: .72rem; color: var(--grigio); }
.menu { display: flex; gap: .25rem; margin-left: .5rem; }
.menu a { color: var(--testo-2); text-decoration: none; padding: .35rem .7rem; border-radius: var(--raggio); }
.menu a.attivo { background: var(--pannello); color: var(--testo); }
.menu a:hover { color: var(--testo); }
.utente { margin-left: auto; display: grid; grid-template-columns: auto auto; column-gap: 1rem; align-items: center; text-align: right; }
.utente-nome { font-weight: 500; }
.utente-ruolo { grid-column: 1; font-size: .75rem; color: var(--grigio); }
.esci-form { display: contents; }
.esci { grid-row: 1 / span 2; color: var(--testo-2); background: none; cursor: pointer; border: 1px solid var(--bordo-forte); border-radius: var(--raggio); padding: .3rem .7rem; }
.esci:hover { color: var(--testo); border-color: var(--grigio); }

.contenuto { flex: 1; width: 100%; max-width: 1600px; margin: 0 auto; padding: 1rem 1.25rem; }
.informativa { max-width: 46rem; margin: 0 auto; line-height: 1.55; }
.informativa h2 { font-size: 1.02rem; font-weight: 600; margin: 1.4rem 0 .3rem; }
.informativa p, .informativa ul { margin: .4rem 0; }
.pie { text-align: center; font-size: .75rem; color: var(--grigio-2); padding: 1rem; }
.titolo-pagina { display: flex; align-items: center; gap: .6rem; margin-bottom: .15rem; }
.sotto-titolo { color: var(--grigio); margin-bottom: 1rem; font-size: .9rem; }
.indietro { font-size: .85rem; text-decoration: none; color: var(--grigio); }
.indietro:hover { color: var(--testo); }

/* semafori e livelli */
.semaforo { width: 12px; height: 12px; border-radius: 50%; background: var(--nessuno); display: inline-block; }
.livello-ok .semaforo, .semaforo.ok { background: var(--ok); }
.livello-attenzione .semaforo, .semaforo.attenzione { background: var(--attenzione); }
.livello-allarme .semaforo, .semaforo.allarme { background: var(--allarme); }
.livello-muto .semaforo, .semaforo.muto { background: var(--muto); }

/* pannelli */
.pannello { background: var(--pannello); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: .9rem 1rem; min-width: 0; }
.pannello-titolo { font-weight: 600; margin-bottom: .6rem; display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.aiuto { font-weight: 400; font-size: .8rem; color: var(--grigio); }

/* schede impianti */
.schede { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.scheda { background: var(--pannello); border: 1px solid var(--bordo); border-radius: var(--raggio); text-decoration: none; color: inherit; overflow: hidden; display: flex; flex-direction: column; }
.scheda:hover { border-color: var(--bordo-forte); }
.scheda-testa { display: flex; gap: .6rem; align-items: center; padding: .8rem .9rem .4rem; }
.scheda-nome { font-weight: 600; font-size: 1rem; }
.scheda-sotto { font-size: .8rem; color: var(--grigio); }
.scheda-foto { height: 150px; background: var(--pannello-2) center/cover; margin: .3rem .9rem 0; border-radius: 4px; border: 1px solid var(--bordo); }
.scheda-dati { display: grid; grid-template-columns: repeat(3, 1fr); padding: .7rem .9rem .3rem; text-align: center; }
.scheda-dati b { display: block; font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.scheda-dati span { font-size: .75rem; color: var(--grigio); }
.scheda-dati .evidenzia b { color: var(--allarme); } .scheda-dati .evidenzia-grigio b { color: var(--muto); }
.scheda-pie { font-size: .78rem; color: var(--grigio); padding: .3rem .9rem .8rem; margin-top: auto; }
.vuoto { color: var(--grigio); }

/* pagina impianto */
.intestazione-impianto { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.periodo { display: inline-flex; border: 1px solid var(--bordo-forte); border-radius: var(--raggio); overflow: hidden; margin-bottom: 1rem; }
.periodo button { border: 0; border-right: 1px solid var(--bordo-forte); background: var(--pannello); padding: .35rem .8rem; cursor: pointer; color: var(--testo-2); }
.periodo button:last-child { border-right: 0; }
.periodo button:hover { color: var(--testo); background: var(--pannello-2); }
.periodo button.attivo { background: var(--accento); color: #fff; }
.griglia-impianto { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1rem; }
.btn { border: 1px solid var(--bordo-forte); background: var(--pannello); color: var(--testo-2); border-radius: var(--raggio); padding: .25rem .6rem; cursor: pointer; font-size: .8rem; }
.btn:hover { color: var(--testo); border-color: var(--grigio); }
.strumenti { display: flex; gap: .4rem; align-items: center; margin-left: auto; }

/* sinottico: foto, linee di richiamo (svg), marcatori sui punti di misura e bollini (html) */
.layout { position: relative; width: 100%; border-radius: 4px; overflow: hidden; background: var(--pannello-2); user-select: none; border: 1px solid var(--bordo); }
.layout img { display: block; width: 100%; height: auto; }
.richiami { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.richiami line { stroke: rgba(255, 255, 255, .85); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.richiami line.ombra { stroke: rgba(0, 0, 0, .55); stroke-width: 3; }
.richiami line.evidenzia { stroke: var(--accento); stroke-width: 2; }
.marcatore { position: absolute; transform: translate(-50%, -50%); min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; display: grid; place-items: center;
  font-size: .66rem; font-weight: 600; color: #fff; background: rgba(20, 24, 32, .85); border: 2px solid var(--nessuno); box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); pointer-events: none; }
.marcatore.ok { border-color: var(--ok); } .marcatore.attenzione { border-color: var(--attenzione); }
.marcatore.allarme { border-color: var(--allarme); } .marcatore.muto { border-color: var(--muto); }
.marcatore.nessuno { border-style: dashed; color: var(--grigio); }
.marcatore.selezionato { background: var(--accento); border-color: #fff; }
.marcatore.evidenzia { border-color: #fff; }
.bollino { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; cursor: pointer; border: 0; background: transparent; padding: 0; z-index: 2; }
.bollino .valore { min-width: 84px; padding: .22rem .55rem; border-radius: 4px; color: #fff; font-weight: 600; font-size: .85rem; text-align: center; white-space: nowrap;
  background: var(--nessuno); border: 1px solid rgba(255, 255, 255, .5); box-shadow: 0 1px 4px rgba(0, 0, 0, .5); font-variant-numeric: tabular-nums; }
.bollino .valore::before { content: attr(data-sigla); display: inline-block; margin-right: .4rem; font-weight: 700; }
.bollino .nome { margin-top: .2rem; font-size: .68rem; background: rgba(20, 24, 32, .85); color: var(--testo); padding: .08rem .4rem; border-radius: 3px; white-space: nowrap; }
.bollino.ok .valore { background: var(--ok); } .bollino.attenzione .valore { background: var(--attenzione); color: #1e1a0a; }
.bollino.allarme .valore { background: var(--allarme); } .bollino.muto .valore { background: var(--muto); }
.bollino.nessuno .valore { background: var(--nessuno); color: var(--testo-2); border-style: dashed; }
.bollino.selezionato .valore { outline: 2px solid #fff; outline-offset: 1px; }
.bollino:hover .valore, .bollino.evidenzia .valore { border-color: #fff; }
.legenda { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .78rem; color: var(--grigio); margin-top: .6rem; }
.pallino { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .3rem; vertical-align: -1px; }
.pallino.ok { background: var(--ok); } .pallino.attenzione { background: var(--attenzione); } .pallino.allarme { background: var(--allarme); }
.pallino.muto { background: var(--muto); } .pallino.nessuno { background: var(--nessuno); }

/* elenco sensori sotto la foto (sincronizzato con la selezione) */
.elenco-sensori { margin-top: .8rem; }
.elenco-sensori tr.riga { cursor: pointer; }
.elenco-sensori tr.riga:hover { background: var(--pannello-2); }
.elenco-sensori tr.riga.selezionato { background: var(--pannello-2); box-shadow: inset 3px 0 0 var(--accento); }
.elenco-sensori .sigla { font-weight: 600; white-space: nowrap; }
.elenco-sensori .sigla i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .45rem; background: var(--nessuno); }
.elenco-sensori .sigla i.ok { background: var(--ok); } .elenco-sensori .sigla i.attenzione { background: var(--attenzione); }
.elenco-sensori .sigla i.allarme { background: var(--allarme); } .elenco-sensori .sigla i.muto { background: var(--muto); }
.elenco-sensori .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.elenco-sensori .muto-txt, .elenco-sensori .nessuno-txt { color: var(--grigio); }

/* dettaglio sensore */
.dettaglio .pannello-titolo { justify-content: space-between; }
.dett-stato { font-size: .78rem; font-weight: 500; padding: .1rem .5rem; border-radius: 3px; color: #fff; background: var(--nessuno); }
.dett-stato.ok { background: var(--ok); } .dett-stato.attenzione { background: var(--attenzione); color: #1e1a0a; }
.dett-stato.allarme { background: var(--allarme); } .dett-stato.muto { background: var(--muto); }
.riquadri { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; margin-bottom: .6rem; }
.riquadro { background: var(--pannello-2); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: .45rem .65rem; }
.riquadro b { display: block; font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.riquadro span { font-size: .72rem; color: var(--grigio); }
.grafico { height: 250px; }
.grafico-zoom { height: 290px; }
.grafico-basso { height: 200px; }

/* tabelle */
.tabella-scroll { max-height: 320px; overflow: auto; }
.tabella { width: 100%; border-collapse: collapse; font-size: .85rem; }
.tabella th, .tabella td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--bordo); vertical-align: top; }
.tabella th { position: sticky; top: 0; background: var(--pannello); font-size: .75rem; color: var(--grigio); font-weight: 500; }
.tabella th.num { text-align: right; }
.etichetta { display: inline-block; padding: .05rem .45rem; border-radius: 3px; font-size: .75rem; font-weight: 500; color: #fff; background: var(--muto); }
.etichetta.alert { background: var(--allarme); } .etichetta.warning { background: var(--attenzione); color: #1e1a0a; }
.tabella .vuota td { color: var(--grigio); text-align: center; padding: 1.2rem; }
.avviso-dati { font-size: .8rem; color: var(--attenzione); margin: .3rem 0 0; }
.avviso-dati:empty { display: none; }

/* amministrazione e profilo: tabelle e moduli, nessun effetto */
.utente-nome { color: var(--testo); text-decoration: none; }
.utente-nome:hover { text-decoration: underline; }
.admin-menu { display: flex; gap: .25rem; flex-wrap: wrap; border-bottom: 1px solid var(--bordo); margin: .6rem 0 1rem; }
.admin-menu a { color: var(--testo-2); text-decoration: none; padding: .4rem .8rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.admin-menu a:hover { color: var(--testo); }
.admin-menu a.attivo { color: var(--testo); border-bottom-color: var(--accento); }
.admin-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 1rem; margin-bottom: 1rem; align-items: start; }
.pannello-stretto { max-width: 560px; }
.tabella-larga { overflow-x: auto; }
.tabella td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabella tr.spento td { color: var(--grigio-2); }
.tabella .nowrap { white-space: nowrap; }
.tabella .mono, .password-una-volta { font-family: ui-monospace, Consolas, monospace; }
.tabella .sigla-adm { font-weight: 600; }
.tabella .dettaglio-reg { font-size: .8rem; color: var(--testo-2); }
.tag-modo { font-size: .75rem; padding: .05rem .45rem; border-radius: 3px; border: 1px solid var(--bordo-forte); color: var(--testo-2); }
.tag-modo.modo-simulato { border-color: var(--accento); color: var(--accento); }
.tag-modo.modo-offset { border-color: var(--arancio); color: var(--arancio); }
.modulo { display: flex; flex-direction: column; gap: .8rem; }
.modulo label { display: flex; flex-direction: column; gap: .3rem; font-size: .82rem; color: var(--grigio); }
.modulo label.spunta { flex-direction: row; align-items: center; gap: .5rem; color: var(--testo); font-size: .88rem; }
.modulo label.corto input { max-width: 8rem; }
.modulo input:not([type=checkbox]):not([type=radio]), .modulo select, .modulo-riga input {
  font: inherit; padding: .45rem .6rem; border: 1px solid var(--bordo-forte); border-radius: var(--raggio); background: var(--sfondo); color: var(--testo); min-width: 0; }
.modulo input:focus, .modulo select:focus, .modulo-riga input:focus { outline: none; border-color: var(--accento); }
.modulo-riga { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: .8rem; }
.modulo-riga input { flex: 1; max-width: 360px; }
.azioni { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.btn { text-decoration: none; display: inline-block; }
.btn-primario { background: var(--accento); border-color: var(--accento); color: #fff; font-weight: 600; padding: .4rem .9rem; font-size: .85rem; }
.btn-primario:hover { background: var(--accento-scuro); border-color: var(--accento-scuro); color: #fff; }
fieldset.blocco { border: 1px solid var(--bordo); border-radius: var(--raggio); padding: .6rem .8rem .7rem; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
fieldset.blocco[hidden] { display: none; }
fieldset.blocco legend { padding: 0 .3rem; font-weight: 600; font-size: .85rem; }
.tabella-campi { display: grid; grid-template-columns: minmax(150px, 1.4fr) 1fr 1fr; gap: .4rem .6rem; align-items: center; font-size: .85rem; }
.tabella-campi.due { grid-template-columns: minmax(150px, 1.4fr) 1fr; }
.tabella-campi input { font: inherit; padding: .4rem .55rem; border: 1px solid var(--bordo-forte); border-radius: var(--raggio); background: var(--sfondo); color: var(--testo); min-width: 0; }
.msg-ok, .msg-err { padding: .55rem .75rem; border-radius: var(--raggio); margin: 0 0 1rem; font-size: .88rem; }
.msg-ok { background: rgba(63, 168, 100, .12); border: 1px solid rgba(63, 168, 100, .45); color: #9fd8b2; }
.msg-err { background: rgba(217, 83, 79, .12); border: 1px solid rgba(217, 83, 79, .45); color: #f1a9a6; }
.msg-err p { margin: .1rem 0; }
.link-invito-riga { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: .6rem 0; }
.link-invito { flex: 1 1 18rem; min-width: 0; font-family: ui-monospace, Consolas, monospace; font-size: .8rem; padding: .5rem .6rem; background: var(--pannello-2); color: var(--testo); border: 1px solid var(--bordo-forte); border-radius: var(--raggio); }
.password-una-volta { font-size: 1.3rem; padding: .6rem .8rem; background: var(--pannello-2); border: 1px solid var(--bordo-forte); border-radius: var(--raggio); user-select: all; }
@media (max-width: 1000px) { .admin-griglia { grid-template-columns: 1fr; } }

@media (max-width: 1000px) {
  .griglia-impianto { grid-template-columns: 1fr; }
  .barra { gap: .8rem; padding: .4rem .8rem; } .menu { display: none; } .logo-sotto { display: none; }
  .utente-ruolo { display: none; }
  .bollino .valore { min-width: 68px; font-size: .75rem; padding: .15rem .4rem; } .bollino .nome { font-size: .6rem; }
  .marcatore { min-width: 18px; height: 18px; font-size: .58rem; }
  .elenco-sensori .col-nome { display: none; }
}

/* login: il fondo della pagina è lo stesso blu notte del fondo del JPEG, cosi' il riquadro del logo non si vede
   (niente fusione "screen", niente alone). Testata: spettro, marchio, forma d'onda; gli schermi li disegna
   static/oscilloscopio.js dentro i due slot, centrati sull'asse dell'albero. Sotto i 1040 px resta la sola forma d'onda. */
.pagina-login { position: relative; background: #030a13; --l-marchio: 320px; }
.pagina-login .contenuto { display: flex; flex-direction: column; align-items: center; padding-top: 2.6rem; }
.login-testata { position: relative; width: 100%; max-width: calc(var(--l-marchio) * 3.2 + 24px); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 12px; }
.login-marchio-box { grid-column: 2; grid-row: 1; position: relative; z-index: 1; }
.login-marchio { display: block; width: min(var(--l-marchio), 72vw); height: auto;
  /* bordi appena sfumati: il JPEG ha quasi lo stesso colore della pagina, la maschera toglie l'ultimo stacco */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4.5%, #000 95.5%, transparent), linear-gradient(180deg, transparent, #000 4.5%, #000 95.5%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 4.5%, #000 95.5%, transparent), linear-gradient(180deg, transparent, #000 4.5%, #000 95.5%, transparent); mask-composite: intersect;
  animation: appare .45s ease-out both; }
.schermo { grid-row: 1; position: relative; z-index: 0; min-width: 0; pointer-events: none; }
.schermo-spettro { grid-column: 1; }
.schermo-onda { grid-column: 3; }
.schermo canvas { position: absolute; left: 0; top: 0; display: block; }
.login-colonna { display: flex; flex-direction: column; align-items: center; width: min(440px, 100%); }
.login-titolo { color: var(--grigio); font-size: .8rem; text-align: center; margin: .5rem 0 1rem; animation: appare .5s ease-out .15s both; }
.login-titolo span { display: block; }
.login { background: var(--pannello); color: var(--testo); border: 1px solid var(--bordo); padding: 1.4rem 1.6rem 1.3rem; border-radius: var(--raggio); width: 100%; display: flex; flex-direction: column; gap: .85rem;
  animation: sale .45s ease-out .1s both; }
.login h1 { font-size: 1rem; font-weight: 600; margin-top: 0; }
.login label { display: flex; flex-direction: column; gap: .3rem; font-size: .82rem; color: var(--grigio); }
.login input { font: inherit; padding: .55rem .7rem; border: 1px solid var(--bordo-forte); border-radius: var(--raggio); background: var(--sfondo); color: var(--testo); }
.login input:focus { outline: none; border-color: var(--accento); }
.login button { font-weight: 600; color: #fff; border: 0; padding: .65rem; border-radius: var(--raggio); cursor: pointer; background: var(--accento); }
.login button:hover { background: var(--accento-scuro); }
.login .errore { background: rgba(217, 83, 79, .15); color: #f1a9a6; border: 1px solid rgba(217, 83, 79, .4); padding: .55rem .75rem; border-radius: var(--raggio); margin: 0; font-size: .88rem; }
.login .nota { font-size: .72rem; color: var(--grigio); margin: .2rem 0 0; }
.login .nota a { color: var(--grigio); text-decoration: underline; }
.login .nota a:hover { color: var(--testo); }
.login > p:not(.nota):not(.errore) { font-size: .88rem; margin: 0; }
.login div.errore p { margin: .1rem 0; }
.pagina-login .pie { color: var(--grigio-2); }

@keyframes appare { from { opacity: 0; } to { opacity: 1; } }
@keyframes sale { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* schermi bassi: form più compatto, cosi' "Entra" resta in vista */
@media (max-height: 820px) {
  .pagina-login .contenuto { padding-top: .6rem; }
  .login-titolo { margin: .3rem 0 .6rem; }
  .login { padding: 1rem 1.3rem; gap: .6rem; }
  .login input { padding: .45rem .7rem; }
  .login button { padding: .55rem; }
  .pagina-login .pie { padding: .6rem 1rem; }
}
@media (min-width: 1040px) and (max-height: 820px) {
  .pagina-login .contenuto { padding-top: 2.2rem; }
  .pagina-login { --l-marchio: clamp(190px, 32vh, 240px); }
}
/* sotto i 1040 px: marchio in alto, sotto la sola forma d'onda in una striscia larga quanto il form */
@media (max-width: 1039px) {
  .login-testata { grid-template-columns: minmax(0, 1fr); max-width: 440px; }
  .login-marchio-box { grid-column: 1; grid-row: 1; justify-self: center; }
  .schermo-spettro { display: none; }
  .schermo-onda { grid-column: 1; grid-row: 2; height: 96px; margin-top: .5rem; }
  .login-marchio { width: min(250px, 62vw); }
}
@media (max-width: 1039px) and (max-height: 820px) { .login-marchio { width: min(220px, 58vw); } }
@media (max-width: 1039px) and (max-height: 700px) { .login-marchio { width: min(180px, 48vw); } .schermo-onda { height: 88px; } }
@media (max-width: 1039px) and (min-height: 900px) { .login-marchio { width: min(290px, 64vw); } .schermo-onda { height: 104px; } }
@media (prefers-reduced-motion: reduce) {
  .login-marchio, .login-titolo, .login { animation: none; }
}

/* amministrazione: connessione dei sensori */
.tag-stato { font-size: .75rem; padding: .05rem .45rem; border-radius: 3px; border: 1px solid var(--bordo-forte); color: var(--testo-2); white-space: nowrap; }
.tag-stato.st-ok { border-color: var(--ok); color: var(--ok); }
.tag-stato.st-att { border-color: var(--attenzione); color: var(--attenzione); }
.tag-stato.st-all { border-color: var(--allarme); color: var(--allarme); }
.tag-stato.st-muto { border-color: var(--muto); color: var(--muto); }
.modulo-riga input.campo-corto { flex: 0 0 6.5rem; }
.comuni { font-size: .85rem; margin-bottom: .8rem; }
.comuni b { font-weight: 500; margin-right: .5rem; }
.comuni ul { margin: .3rem 0 .2rem; padding-left: 1.2rem; }
.note { margin: 0; padding-left: 1.2rem; font-size: .85rem; color: var(--testo-2); }
.note li { margin-bottom: .3rem; }
.griglia-ore { border-collapse: separate; border-spacing: 2px; font-size: .72rem; }
.griglia-ore th { color: var(--grigio); font-weight: 400; padding: 0 .2rem; text-align: center; }
.griglia-ore tbody th { text-align: left; white-space: nowrap; padding-right: .5rem; }
.griglia-ore td { width: 1.5rem; min-width: 1.1rem; height: 1.2rem; border-radius: 2px; background: var(--pannello-2); border: 1px solid var(--bordo); }
.c-m { background: var(--accento) !important; border-color: var(--accento) !important; }
.c-f { background: var(--muto) !important; border-color: var(--muto) !important; }
.c-x { background: var(--allarme) !important; border-color: var(--allarme) !important; }
.c-futuro { background: transparent !important; border-color: transparent !important; }
.legenda-griglia { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .78rem; color: var(--grigio); margin-bottom: .5rem; }
.legenda-griglia i { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; margin-right: .35rem; vertical-align: -1px; background: var(--pannello-2); border: 1px solid var(--bordo); }

/* scelta della lingua: IT | EN nella barra e, senza barra (login), in alto a destra */
.lingua { flex-shrink: 0; display: inline-flex; border: 1px solid var(--bordo-forte); border-radius: var(--raggio); overflow: hidden; font-size: .75rem; }
.lingua a { color: var(--testo-2); text-decoration: none; padding: .2rem .5rem; }
.lingua a + a { border-left: 1px solid var(--bordo-forte); }
.lingua a.attivo { background: var(--pannello); color: var(--testo); font-weight: 600; }
.lingua a:hover { color: var(--testo); }
.lingua-barra { margin-left: auto; }
.lingua-barra + .utente { margin-left: 0; }
.lingua-angolo { position: absolute; top: .8rem; right: 1rem; z-index: 2; background: #161a20; }
@media (max-width: 520px) { .barra { gap: .5rem; padding: .4rem .5rem; } .utente { column-gap: .5rem; } .lingua a { padding: .2rem .4rem; } }

/* amministrazione: macchine */
.passi { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin: 0 0 1rem; font-size: .85rem; }
.passi a, .passi span { padding: .3rem .7rem; border: 1px solid var(--bordo); border-radius: var(--raggio); color: var(--testo-2); text-decoration: none; }
.passi a.attivo, .passi span.attivo { border-color: var(--accento); color: var(--testo); background: var(--pannello); }
.passi a:hover { color: var(--testo); border-color: var(--grigio); }
.passi .tag-stato-macchina { margin-left: auto; }
.tag-stato-macchina { font-size: .75rem; padding: .05rem .45rem !important; border-radius: 3px; border: 1px solid var(--bordo-forte); color: var(--testo-2); }
.tag-stato-macchina.st-bozza { border-color: var(--arancio); color: var(--arancio); }
.tag-stato-macchina.st-pubblicato { border-color: var(--ok); color: var(--ok); }
.tag-stato-macchina.st-archiviato { border-color: var(--muto); color: var(--muto); }
.anteprima-foto { display: block; max-width: 100%; max-height: 360px; border: 1px solid var(--bordo); border-radius: 4px; margin-bottom: .6rem; }
.controlli { list-style: none; margin: 0 0 .6rem; padding: 0; font-size: .88rem; }
.controlli li { padding: .25rem 0; }
.controlli .fatto { color: var(--ok); } .controlli .manca { color: var(--allarme); } .controlli .avviso { color: var(--attenzione); }
.pos-griglia { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 1rem; align-items: start; }
@media (max-width: 1000px) { .pos-griglia { grid-template-columns: 1fr; } }
.pos-elenco { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.pos-elenco li { display: flex; gap: .3rem; align-items: stretch; }
.pos-scegli { flex: 1; text-align: left; background: var(--pannello-2); color: var(--testo-2); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: .35rem .55rem; cursor: pointer; font-size: .82rem; }
.pos-scegli b { color: var(--testo); margin-right: .3rem; }
.pos-elenco li:not(.piazzato) .pos-stato { color: var(--attenzione); }
.pos-elenco li.scelto .pos-scegli { border-color: var(--accento); color: var(--testo); }
.editor-posizioni { cursor: crosshair; }
.editor-posizioni .trascina { cursor: grab; touch-action: none; pointer-events: auto; }
.editor-posizioni .trascina:active { cursor: grabbing; }
.banner-bozza { padding: .45rem .75rem; border: 1px solid var(--arancio); color: var(--arancio); border-radius: var(--raggio); margin: 0 0 1rem; font-size: .85rem; }

/* telefono e schermi touch (controllo grafico del 4/11) */
.periodo .corto, .solo-tocco { display: none; }
.dett-stato { white-space: nowrap; }
.grafico-zoom { margin-bottom: .6rem; }
@media (pointer: coarse) { .solo-mouse { display: none; } .solo-tocco { display: inline; } }
@media (max-width: 600px) {
  .periodo .lungo { display: none; } .periodo .corto { display: inline; }
  .elenco-sensori .col-temp { display: none; }
  .elenco-sensori .col-eta { white-space: nowrap; }
  .elenco-sensori .tabella th, .elenco-sensori .tabella td { padding: .4rem .3rem; }
  /* sinottico: sulla foto stretta i bollini si coprono e vengono tagliati, restano i marcatori (i valori sono nella tabella) */
  .layout:not(.editor-posizioni) .bollino, .layout:not(.editor-posizioni) .richiami { display: none; }
  .layout:not(.editor-posizioni) .marcatore { pointer-events: auto; cursor: pointer; min-width: 26px; height: 26px; border-radius: 13px; font-size: .68rem; }
  .layout:not(.editor-posizioni) .marcatore.ok { background: var(--ok); } .layout:not(.editor-posizioni) .marcatore.attenzione { background: var(--attenzione); color: #1e1a0a; }
  .layout:not(.editor-posizioni) .marcatore.allarme { background: var(--allarme); } .layout:not(.editor-posizioni) .marcatore.muto { background: var(--muto); }
  .layout:not(.editor-posizioni) .marcatore.selezionato { outline: 2px solid #fff; outline-offset: 1px; }
}

/* passkey: pulsante di accesso sotto il form di login e riga di aggiunta nel profilo */
[hidden] { display: none !important; }
.passkey-accesso { display: flex; flex-direction: column; gap: .6rem; align-items: stretch; }
.passkey-oppure { display: flex; align-items: center; gap: .6rem; font-size: .75rem; color: var(--grigio); }
.passkey-oppure::before, .passkey-oppure::after { content: ""; flex: 1; border-top: 1px solid var(--bordo); }
.login .passkey-bottone { background: transparent; border: 1px solid var(--bordo-forte); color: var(--testo); }
.login .passkey-bottone:hover { background: var(--sfondo); border-color: var(--accento); }
.passkey-nuova { margin: .8rem 0 0; }
.passkey-nuova input { flex: 1; min-width: 10rem; }
/* proposta dopo l'accesso con password: "Vuoi entrare con Face ID la prossima volta?" */
.passkey-proposta { margin: 0 0 1rem; }
.passkey-proposta p { margin: 0 0 .6rem; }
.passkey-proposta .azioni { display: flex; gap: .5rem; flex-wrap: wrap; }
.passkey-proposta .msg-err { margin: .6rem 0 0; }