/* CASSANDRA — portale: un solo foglio, nessun framework (docs/02_SRV_02 §7.3).
   Token e regole dal sistema visivo (10_Product/dashboard/VISUAL_SYSTEM.md v1). */
:root {
  /* §1 palette */
  --color-ground:        #F0EEE6;   /* §19: più scuro, così le card bianche si staccano */
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #F4F3EE;
  --color-border-subtle: #E7E4DB;
  --color-border-strong: #C9C4B6;

  --color-ink-primary:   #1F1D18;
  --color-ink-secondary: #4A463C;
  --color-ink-muted:     #6B6656;   /* §19 verifica contrasto: #7A7566 su #F0EEE6 dava 3,96:1; ora 4,94:1 */
  --color-ink-inverse:   #FFFFFF;

  --color-accent:        #0F4C4A;
  --color-accent-soft:   #E3ECEB;

  --color-status-healthy:  #3B7A57;
  --color-status-warning:  #B87333;
  --color-status-critical: #A2312C;
  --color-status-neutral:  #6B6656;

  --color-status-healthy-bg:  #EAF3EE;
  --color-status-warning-strong: #9A5A1E; /* riempimento delle pillole: bianco sopra dà 5,45:1 (sul warning base solo 3,79:1) */
  --color-status-warning-bg:  #F7EDE2;
  --color-status-critical-bg: #F3E1DF;
  --color-status-neutral-bg:  #EFECE4;

  /* §19 elevazione: le card tengono il bordo da 1px e ricevono un'ombra */
  --shadow-card:        0 1px 2px rgba(20, 18, 14, .06), 0 3px 10px rgba(20, 18, 14, .05);
  --shadow-card-hover:  0 2px 4px rgba(20, 18, 14, .08), 0 8px 20px rgba(20, 18, 14, .07);

  /* §19 barra laterale: cromo verde-petrolio profondo (contrasti: ink 10,2:1, muted 5,5:1, marcatore 6,5:1) */
  --color-rail:             #0C3F3D;
  --color-rail-ink:         #EAF1F0;
  --color-rail-muted:       #9DB6B4;
  --color-rail-active-bg:   rgba(255, 255, 255, 0.12);
  --color-rail-active-mark: #5FD3C7;
  --color-rail-line:        rgba(255, 255, 255, 0.14);

  /* §2 tipografia */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --text-xs: 12px;  --leading-xs: 16px;
  --text-sm: 14px;  --leading-sm: 20px;
  --text-md: 16px;  --leading-md: 24px;
  --text-lg: 18px;  --leading-lg: 26px;
  --text-xl: 22px;  --leading-xl: 30px;
  --text-2xl: 28px; --leading-2xl: 36px;

  /* §3 spaziatura */
  --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px;
  --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-64: 64px;

  /* §4 elevazione e raggi */
  --radius-card: 12px;
  --radius-control: 8px;
  --radius-pill: 999px;
  --shadow-popover: 0 8px 24px rgba(31, 29, 24, 0.08);

  /* §6 movimento */
  --transition-fast: 120ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  :root { --transition-fast: 0ms; }
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; scroll-behavior: auto !important; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  font: var(--text-md)/var(--leading-md) var(--font-body);
  color: var(--color-ink-primary); background: var(--color-ground);
}
a { color: var(--color-accent); }
h1 { font-size: var(--text-2xl); line-height: var(--leading-2xl); font-weight: 600; margin: 0; }
h2 { font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: 600; margin: var(--space-24) 0 var(--space-8); }
h2:first-child { margin-top: 0; }

.muto { color: var(--color-ink-muted); }
.piccolo { font-size: var(--text-xs); }
.mono { font-family: var(--font-mono); font-size: var(--text-xs); }
/* cifre a larghezza fissa su ogni metrica (numeri in tabella, chip, contatori, KPI, valori RUL) */
.tabella td, .mono, .num, .gruppo-conteggio, .kpi-valore, .riga-salute, .rul-valore, .dati-compatti dd, .cron-tip, .sintesi-testo, .chi-ruolo, .pill { font-variant-numeric: tabular-nums; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-family: var(--font-mono); }

/* interazione: focus sempre visibile, mai solo :focus-visible (§5.4) */
a:focus, button:focus, input:focus, select:focus, textarea:focus, summary:focus,
[tabindex]:focus {
  outline: 2px solid var(--color-accent); outline-offset: 2px;
}

/* ==================================================================== */
/* §7 rail — barra di navigazione laterale (VISUAL_SYSTEM §7.1, §7.2)   */
/* ==================================================================== */
:root { --rail-w: 232px; --rail-w-chiusa: 64px; --testa-h: 56px; }

/* pagine con barra: la pagina scorre a destra della barra fissa */
body.con-rail .pagina { margin-left: var(--rail-w); }
body.con-rail.rail-chiusa .pagina { margin-left: var(--rail-w-chiusa); }
.pagina { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }

.rail {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 20; width: var(--rail-w);
  display: flex; flex-direction: column; background: var(--color-rail); color: var(--color-rail-ink);
}
body.rail-chiusa .rail { width: var(--rail-w-chiusa); }

.rail-testa { position: relative; padding: var(--space-16) var(--space-16) var(--space-12); min-height: 88px; }
.marchio { text-decoration: none; color: var(--color-rail-ink); display: flex; flex-direction: column; line-height: 1.1; }
.marchio-nome { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 500; letter-spacing: .06em; color: var(--color-rail-ink); }
.marchio-sotto { font-size: var(--text-xs); color: var(--color-rail-muted); letter-spacing: .02em; }
.marchio-blocco { display: flex; flex-direction: column; gap: var(--space-4); }
.marchio-tenant { font-size: var(--text-sm); color: var(--color-rail-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* pulsante di compressione sul bordo destro alto della barra */
.rail-toggle {
  position: absolute; top: var(--space-16); right: -14px; width: 28px; height: 28px; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--color-surface); color: var(--color-ink-muted);
  border: 1px solid var(--color-border-subtle); border-radius: 50%;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.rail-toggle:hover { background: var(--color-surface-alt); color: var(--color-accent); }
body.rail-chiusa .rail-toggle svg { transform: scaleX(-1); }

.rail-nav, .rail-piede { display: flex; flex-direction: column; gap: var(--space-4); padding: 0 var(--space-8); }
.rail-nav { flex: 1; overflow-y: auto; margin-top: var(--space-8); }
.rail-piede { padding-bottom: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--color-rail-line); }

/* voce: icona 20px + etichetta; attiva = sfondo accent-soft, testo/icona accent, marcatore 3px a sinistra */
.rail-voce {
  position: relative; display: flex; align-items: center; gap: var(--space-12); width: 100%;
  padding: var(--space-8) var(--space-12); border: 0; border-radius: var(--radius-control);
  background: transparent; color: var(--color-rail-ink); text-decoration: none; cursor: pointer;
  font: inherit; font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 500; text-align: left;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.rail-voce:hover { background: rgba(255, 255, 255, 0.08); }
.rail-voce.attivo { background: var(--color-rail-active-bg); color: #fff; font-weight: 600; }
.rail-voce.attivo::before {
  content: ""; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 3px;
  background: var(--color-rail-active-mark); border-radius: 0 3px 3px 0;
}
.rail-voce .icona { flex: none; }
.rail-etichetta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-esci { margin: 0; }

/* account: avatar con iniziali + popover */
.chi { position: relative; }
.chi > summary { list-style: none; }
.chi > summary::-webkit-details-marker { display: none; }
.chi-avatar {
  flex: none; width: 24px; height: 24px; margin: -2px; border-radius: 50%; background: var(--color-rail-active-mark); color: var(--color-rail);
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; letter-spacing: .02em;
}
.chi-pannello {
  position: absolute; left: var(--space-8); bottom: calc(100% + var(--space-4)); min-width: 220px; z-index: 30;
  background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-card);
  box-shadow: var(--shadow-popover); padding: var(--space-16); display: flex; flex-direction: column; gap: var(--space-8);
  color: var(--color-ink-primary); /* il popover è bianco dentro la barra scura: il testo non eredita l'ink chiaro */
}
.chi-nome { font-weight: 600; }
.chi-ruolo { color: var(--color-ink-muted); font-size: var(--text-xs); }
.chi-pannello a { font-size: var(--text-sm); }

/* barra compressa (64px): solo icone; le etichette diventano tooltip (title, gestito da rail.js) */
body.rail-chiusa .rail-testa { padding-left: 0; padding-right: 0; min-height: 88px; }
body.rail-chiusa .marchio-sotto, body.rail-chiusa .marchio-tenant, body.rail-chiusa .rail-etichetta { display: none; }
/* compressa: del marchio resta l'iniziale */
body.rail-chiusa .marchio-nome { display: block; width: 100%; font-size: 0; letter-spacing: 0; text-align: center; }
body.rail-chiusa .marchio-nome::first-letter { font-size: var(--text-xl); }
body.rail-chiusa .marchio { align-items: center; }
body.rail-chiusa .rail-voce { justify-content: center; padding-left: 0; padding-right: 0; }
body.rail-chiusa .rail-voce.attivo::before { left: -8px; }
body.rail-chiusa .chi-pannello { left: calc(100% - var(--space-8)); bottom: 0; }

/* §19 focus sulla barra scura: l'accento teal non si vedrebbe, si usa il marcatore chiaro; il tasto di compressione sta a cavallo del bordo, su fondo chiaro */
.rail a:focus, .rail button:focus, .rail summary:focus { outline: 2px solid var(--color-rail-active-mark); outline-offset: -2px; }
.rail .rail-toggle:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.rail .chi-pannello a:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* nelle liste che scorrono/tagliano (voci della barra, schede) l'outline sta dentro, altrimenti verrebbe ritagliato */
.rail-voce:focus, .schede a:focus { outline-offset: -2px; }

/* intestazione di pagina sticky (§7.2): titolo a sinistra, controlli a destra */
.pagina-testa {
  position: sticky; top: 0; z-index: 10; height: var(--testa-h); display: flex; align-items: center; gap: var(--space-16);
  padding: 0 var(--space-24); background: var(--color-surface); border-bottom: 1px solid var(--color-border-subtle);
}
.pagina-titolo { font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: 600; }
.pagina-controlli { margin-left: auto; display: flex; align-items: center; gap: var(--space-8); }
.rail-apri { display: none; }
.rail-velo { display: none; }

/* sotto-nav (admin/*, fuori scopo in questo passaggio: solo token, stessa struttura) */
.nav-sotto { display: flex; gap: var(--space-4); }
.nav-sotto a { text-decoration: none; padding: var(--space-4) var(--space-12); border-radius: var(--radius-control); color: var(--color-ink-secondary); }
.nav-sotto a.attivo { background: var(--color-accent-soft); color: var(--color-accent); }

/* ==================================================================== */
/* corpo e piè di pagina                                                 */
/* ==================================================================== */
.contenuto { flex: 1; width: 100%; max-width: 1440px; margin: 0 auto; padding: var(--space-24); }
.pie {
  border-top: 1px solid var(--color-border-subtle); color: var(--color-ink-muted); font-size: var(--text-xs);
  padding: var(--space-16) var(--space-24); display: flex; gap: var(--space-24); flex-wrap: wrap;
  justify-content: space-between; max-width: 1440px; margin: 0 auto; width: 100%;
}
.intestazione-pagina { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); flex-wrap: wrap; margin-bottom: var(--space-16); }
.azioni { display: flex; gap: var(--space-8); align-items: center; flex-wrap: wrap; }
.scheda { background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-card); padding: var(--space-24); margin-bottom: var(--space-16); box-shadow: var(--shadow-card); }
.due-colonne { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-16); }
.testo p, .testo li { max-width: 70ch; }

/* ==================================================================== */
/* stato: pillola (§5.1) — usata ovunque compare uno stato macchina/punto */
/* ==================================================================== */
.legenda { display: flex; align-items: center; gap: var(--space-8) var(--space-12); flex-wrap: wrap; font-size: var(--text-sm); color: var(--color-ink-muted); margin-bottom: var(--space-16); }

.pallino {
  display: inline-flex; align-items: center; min-width: 20px; min-height: 20px;
  border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: .04em; padding: var(--space-4) var(--space-12);
  white-space: nowrap;
}
.pallino-grigio { color: var(--color-status-neutral); background: var(--color-status-neutral-bg); }
.pallino-verde  { color: var(--color-status-healthy); background: var(--color-status-healthy-bg); }
.pallino-giallo { color: var(--color-status-warning-strong); background: var(--color-status-warning-bg); }
.pallino-rosso  { color: var(--color-status-critical); background: var(--color-status-critical-bg); }

.stato-verde  { color: var(--color-status-healthy); }
.stato-giallo { color: var(--color-status-warning-strong); }
.stato-rosso  { color: var(--color-status-critical); }
.stato-grigio { color: var(--color-ink-muted); }

/* legenda in popover (Prompt 04.6): stesso pattern <details> no-JS di .chi in base.html */
.legenda-popover { position: relative; display: inline-block; }
.legenda-popover > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--color-border-strong);
  color: var(--color-ink-muted); font-size: var(--text-xs);
}
.legenda-popover > summary::-webkit-details-marker { display: none; }
.legenda-pannello {
  position: absolute; left: 0; top: calc(100% + var(--space-8)); z-index: 5; min-width: 260px;
  background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-card);
  box-shadow: var(--shadow-popover); padding: var(--space-16); font-size: var(--text-sm);
  display: flex; flex-direction: column; gap: var(--space-8);
}

/* filtri impianto (Prompt 04.6, §E): solo CSS, radio nascosti + :has() sul checked */
.filtri { display: flex; gap: var(--space-8); margin-bottom: var(--space-16); flex-wrap: wrap; }
.filtri input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.filtri label {
  padding: var(--space-4) var(--space-12); border-radius: var(--radius-pill); border: 1px solid var(--color-border-strong);
  font-size: var(--text-sm); cursor: pointer; color: var(--color-ink-secondary); transition: background-color var(--transition-fast);
}
.filtri input[type="radio"]:checked + label { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-ink-inverse); }
.filtri input[type="radio"]:focus + label { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* i filtri agiscono su righe e gruppi: un gruppo senza righe visibili sparisce con loro */
body:has(#f-controllo:checked) .riga-macchina:not([data-filtro~="controllo"]):not(.selezionata) { display: none; }
body:has(#f-controllo:checked) .gruppo:not(:has(.riga-macchina[data-filtro~="controllo"])) { display: none; }
body:has(#f-controllo:checked) .scheda-attesa { display: none; }
body:has(#f-coperte:checked) .scheda-attesa { display: none; }
body:has(#f-attesa:checked) .gruppo { display: none; }
/* stessa logica nella colonna della pagina macchina (elenco piatto, senza gruppi) */
body:has(#f-coperte:checked) .elenco-laterale .riga-macchina:not([data-filtro~="coperte"]):not(.selezionata) { display: none; }
body:has(#f-attesa:checked) .elenco-laterale .riga-macchina:not([data-filtro~="attesa"]):not(.selezionata) { display: none; }
.riga-macchina.nascosta { display: none; }

/* §5.2 etichetta di baseline: mai un colore, sempre accanto alla pillola */
.baseline-etichetta { font-style: italic; color: var(--color-ink-muted); font-size: var(--text-xs); }

/* ==================================================================== */
/* impianto — elementi di riga macchina e colori di bordo                */
/* ==================================================================== */
.bordo-verde  { border-left-color: var(--color-status-healthy); }
.bordo-giallo { border-left-color: var(--color-status-warning); }
.bordo-rosso  { border-left-color: var(--color-status-critical); }
.bordo-grigio { border-left-color: var(--color-border-strong); }
.scheda-titolo { font-weight: 600; font-size: var(--text-md); }

/* riga macchina: codice, riga RUL, etichette di allarme */
.scheda-codice {
  font-family: var(--font-mono); font-size: var(--text-xs); background: var(--color-surface-alt);
  padding: 1px 6px; border-radius: 4px; color: var(--color-ink-secondary); white-space: nowrap;
}
.rul-linea { font-weight: 600; font-size: var(--text-md); margin-top: var(--space-8); }
.rul-linea-critico    { color: var(--color-status-critical); }
.rul-linea-attenzione { color: var(--color-status-warning-strong); }
.rul-linea-sano       { color: var(--color-status-healthy); }
.rul-linea-neutro     { color: var(--color-ink-secondary); }
.scheda-allarmi-critico    { background: var(--color-status-critical-bg); color: var(--color-status-critical); }
.scheda-allarmi-attenzione { background: var(--color-status-warning-bg); color: var(--color-status-warning-strong); }
.scheda-allarmi-info       { background: var(--color-accent-soft); color: var(--color-accent); }

/* macchine in attesa di sensore: un solo riquadro con un elenco, non una card ciascuna */
.scheda-attesa-intestazione { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); flex-wrap: wrap; margin-bottom: var(--space-8); }
.scheda-attesa-intestazione h2 { margin: 0; }

.dati-compatti { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-4) var(--space-16); margin: var(--space-8) 0; }
.dati-compatti div { display: flex; flex-direction: column; }
.dati-compatti dt { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--color-ink-muted); }
.dati-compatti dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }

/* ==================================================================== */
/* impianto — cruscotto flotta (VISUAL_SYSTEM §12, §13; IA §3bis)        */
/* ==================================================================== */
.impianto-griglia { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--space-24); align-items: start; }
.impianto-principale { min-width: 0; }
.impianto-live { display: flex; flex-direction: column; gap: var(--space-16); }
.impianto-live .kpi, .kpi-banda .kpi { margin-bottom: 0; }

.kpi-banda { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-16); margin-bottom: var(--space-24); }
.kpi { display: flex; flex-direction: column; gap: var(--space-4); }
.kpi-etichetta { font-size: var(--text-sm); color: var(--color-ink-muted); display: flex; align-items: center; gap: var(--space-8); }
.kpi-valore { font: 700 var(--text-2xl)/var(--leading-2xl) var(--font-mono); font-variant-numeric: tabular-nums; }
.kpi-nota { margin: 0; }
.kpi-spark { width: 100%; height: 40px; color: var(--color-accent); margin-top: var(--space-8); }
.kpi-barra { width: 100%; height: 10px; border-radius: 4px; margin: var(--space-8) 0; display: block; }
.barra-rosso { fill: var(--color-status-critical); }
.barra-giallo { fill: var(--color-status-warning); }
.barra-grigio { fill: var(--color-status-neutral); }
.barra-verde { fill: var(--color-status-healthy); }
.kpi-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); font-size: var(--text-sm); }
.kpi-legenda li { display: flex; align-items: center; gap: var(--space-8); }
/* LIVE solo dove il dato è davvero fresco (§8): badge neutro, non un colore di stato */
.live-badge { font: 600 10px/1 var(--font-mono); letter-spacing: .08em; color: var(--color-accent); background: var(--color-accent-soft); padding: 3px 6px; border-radius: var(--radius-pill); }

.gruppo { margin-bottom: var(--space-24); }
.gruppo-titolo { font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: 600; margin: 0 0 var(--space-8); padding: var(--space-4) 0; display: flex; align-items: center; gap: var(--space-8); }
details.gruppo > summary { cursor: pointer; list-style: none; }
details.gruppo > summary::-webkit-details-marker { display: none; }
details.gruppo > summary::before { content: "▸"; color: var(--color-ink-muted); }
details.gruppo[open] > summary::before { content: "▾"; }
.gruppo-conteggio { font: 500 var(--text-xs)/1 var(--font-mono); background: var(--color-surface-alt); color: var(--color-ink-secondary); padding: 3px 8px; border-radius: var(--radius-pill); }
.elenco-macchine { display: flex; flex-direction: column; gap: var(--space-8); }
.riga-macchina {
  display: flex; flex-direction: column; gap: var(--space-4); text-decoration: none; color: inherit;
  background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-left-width: 4px;
  border-radius: var(--radius-card); padding: var(--space-12) var(--space-16);
  box-shadow: var(--shadow-card); transition: box-shadow var(--transition-fast), background-color var(--transition-fast);
}
.riga-macchina:hover { box-shadow: var(--shadow-card-hover); }
.riga-titolo, .riga-stato, .riga-rul { display: flex; align-items: center; gap: var(--space-8) var(--space-12); flex-wrap: wrap; }
.riga-salute { font: 500 var(--text-sm) var(--font-mono); font-variant-numeric: tabular-nums; }
.riga-allarmi { padding: var(--space-4) var(--space-8); border-radius: var(--radius-control); font-size: var(--text-xs); font-weight: 500; }
.riga-rul .rul-linea { margin-top: 0; font-size: var(--text-sm); }
.riga-rul .rul-etichetta { display: inline; margin-top: 0; }

/* riga selezionata: stessa grammatica della voce attiva della barra (accent-soft + marcatore 3px) */
.riga-macchina.selezionata { background: var(--color-accent-soft); box-shadow: inset 3px 0 0 var(--color-accent), var(--shadow-card-hover); }

/* ==================================================================== */
/* master-detail (VISUAL_SYSTEM §7.3): colonna macchine + dettaglio      */
/* ==================================================================== */
.md-guscio { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--space-24); align-items: start; }
.md-dettaglio { min-width: 0; }
.md-elenco {
  position: sticky; top: calc(var(--testa-h) + var(--space-24)); max-height: calc(100vh - var(--testa-h) - 2 * var(--space-24));
  display: flex; flex-direction: column; background: var(--color-surface);
  border: 1px solid var(--color-border-subtle); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card);
}
.md-elenco-apri { display: none; }
.md-elenco-corpo { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.md-elenco-testa { padding: var(--space-12); border-bottom: 1px solid var(--color-border-subtle); background: var(--color-surface); }
.md-elenco-testa .filtri { margin: var(--space-8) 0 0; gap: var(--space-4); }
.md-elenco-testa .filtri label { padding: var(--space-4) var(--space-8); font-size: var(--text-xs); }
.md-cerca {
  width: 100%; font: inherit; font-size: var(--text-sm); padding: var(--space-8) var(--space-12);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-ink-primary);
}
.elenco-laterale { overflow-y: auto; padding: var(--space-8); }
.elenco-laterale .riga-macchina { padding: var(--space-8) var(--space-12); box-shadow: none; }
.elenco-laterale .riga-macchina:hover { box-shadow: var(--shadow-card-hover); }
.elenco-laterale .riga-macchina.selezionata { box-shadow: inset 3px 0 0 var(--color-accent); }

/* < 900px: niente affiancamento; la lista sta sopra il dettaglio, chiusa, e si apre dal titolo */
@media (max-width: 899px) {
  .md-guscio { grid-template-columns: minmax(0, 1fr); }
  .md-elenco { position: static; max-height: none; }
  .md-elenco-apri {
    display: flex; align-items: center; gap: var(--space-8); padding: var(--space-12) var(--space-16);
    cursor: pointer; font-weight: 600; list-style: none;
  }
  .md-elenco-apri::-webkit-details-marker { display: none; }
  .md-elenco-apri::before { content: "▸"; color: var(--color-ink-muted); }
  .md-elenco[open] > .md-elenco-apri::before { content: "▾"; }
  .elenco-laterale { max-height: 60vh; }
}

/* schede del dettaglio macchina (IA §3): link veri, la attiva ha la stessa grammatica della voce di barra */
.schede { display: flex; gap: var(--space-4); border-bottom: 1px solid var(--color-border-subtle); margin-bottom: var(--space-16); overflow-x: auto; }
.schede a {
  display: inline-flex; align-items: center; gap: var(--space-8); white-space: nowrap; text-decoration: none;
  padding: var(--space-8) var(--space-16); color: var(--color-ink-secondary); border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.schede a:hover { color: var(--color-ink-primary); }
.schede a.attiva { color: var(--color-accent); font-weight: 600; border-bottom-color: var(--color-accent); }
.schede a:focus { outline: 2px solid var(--color-accent); outline-offset: -2px; }
/* spazi riservati (cronologia, interventi): presenti ma dichiaratamente vuoti */
.scheda-riservata { border-style: dashed; background: var(--color-surface-alt); box-shadow: none; }

/* cronologia (scheda Andamento, §15): corsie uPlot con asse x condiviso, marcatori allarme, modale grandezze */
#cronologia { position: relative; }
.cron-stato-riservato { margin-top: var(--space-12); padding: var(--space-8) var(--space-12); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-surface-alt); }
.cron-corsie { margin-top: var(--space-12); }
.cron-corsia { margin-bottom: var(--space-8); min-width: 0; }
.cron-titolo { font-size: var(--text-xs); color: var(--color-ink-muted); margin-bottom: var(--space-4); }
.cron-vuota { padding: var(--space-16); border: 1px dashed var(--color-border-subtle); border-radius: var(--radius-control); font-size: var(--text-sm); }
.cron-corsie .uplot { max-width: 100%; }
.cron-marcatori { position: absolute; inset: 0; pointer-events: none; }
.cron-marc { position: absolute; top: 0; bottom: 0; width: 9px; margin-left: -4px; padding: 0; border: 0; background: transparent; cursor: help; pointer-events: auto; }
.cron-marc::after { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 1px; background: var(--marc); }
.cron-marc:hover::after, .cron-marc:focus::after { width: 2px; left: 3px; }
.cron-marc:focus { outline: 2px solid var(--color-accent); outline-offset: 0; }
.cron-marc[hidden] { display: none; }
.cron-tip {
  position: absolute; z-index: 6; width: max-content; max-width: 320px; padding: var(--space-8) var(--space-12); font-size: var(--text-sm); pointer-events: none;
  background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-control); box-shadow: var(--shadow-popover);
}
.cron-tip[hidden] { display: none; }
.cron-modale {
  border: 1px solid var(--color-border-subtle); border-radius: var(--radius-card); padding: var(--space-24); max-width: 420px; width: calc(100% - 2 * var(--space-16));
  background: var(--color-surface); color: var(--color-ink-primary); box-shadow: var(--shadow-popover);
}
.cron-modale::backdrop { background: rgba(31, 29, 24, 0.25); }
.cron-modale h3 { margin: 0 0 var(--space-8); font-size: var(--text-lg); }
.cron-scelte { display: flex; flex-direction: column; gap: var(--space-8); margin: var(--space-16) 0; }
.cron-scelte label { display: flex; align-items: center; gap: var(--space-8); font-size: var(--text-sm); }

/* sintesi a regole (§16): una riga per elemento, etichetta di fonte in tinta bassa (token *-bg, testo neutro) */
.sintesi { list-style: none; margin: var(--space-12) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-8); }
.sintesi li { display: flex; align-items: baseline; gap: var(--space-12); }
.sintesi-tag {
  flex: none; min-width: 92px; text-align: center; padding: 2px var(--space-8); border-radius: var(--radius-pill);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--color-ink-secondary);
}
.sintesi-allarme { background: var(--color-status-critical-bg); }
.sintesi-andamento { background: var(--color-status-warning-bg); }
.sintesi-copertura { background: var(--color-status-neutral-bg); }
.sintesi-testo { font-size: var(--text-sm); min-width: 0; }
.sintesi-testo .rul-etichetta { display: block; margin-top: 0; }
@media (max-width: 720px) { .sintesi li { flex-direction: column; align-items: flex-start; gap: var(--space-4); } }

/* controlli di pagina (§7.2) nell'intestazione sticky */
.pagina-controlli .legenda-pannello { left: auto; right: 0; }
.pagina-controlli .in-linea label { flex-direction: row; align-items: center; gap: var(--space-8); }

@media (max-width: 1100px) {
  .impianto-griglia { grid-template-columns: minmax(0, 1fr); }
  .impianto-live { flex-direction: row; flex-wrap: wrap; order: -1; }
  .impianto-live .kpi { flex: 1 1 220px; }
}

/* ==================================================================== */
/* vita residua — indicatore sperimentale (core/web/rul.py, §5.3)        */
/* ==================================================================== */
.rul { border: 1px dashed var(--color-border-strong); border-radius: var(--radius-control); padding: var(--space-8) var(--space-12); margin-top: var(--space-12); background: var(--color-surface-alt); }
.rul-titolo { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--color-ink-muted); }
.rul-valore { font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: 600; font-variant-numeric: tabular-nums; }
.rul-grande .rul-valore { font-size: var(--text-2xl); line-height: var(--leading-2xl); }
.rul-alto .rul-valore  { color: var(--color-status-healthy); }
.rul-medio .rul-valore { color: var(--color-status-warning-strong); }
.rul-basso .rul-valore { color: var(--color-status-critical); }
.rul-nd .rul-valore    { color: var(--color-ink-muted); }
.rul-fase { font-weight: 500; font-size: var(--text-sm); }
.rul-giorni { font-size: var(--text-sm); color: var(--color-accent); }
.rul-tendenza { font-size: var(--text-xs); color: var(--color-ink-muted); }
/* obbligatoria su ogni superficie RUL, verbatim, mai nascosta (§5.3, docs/06_AN_01) */
.rul-etichetta { display: block; font-style: italic; font-size: var(--text-xs); color: var(--color-ink-muted); margin-top: var(--space-4); }

/* ==================================================================== */
/* macchina — riepilogo, disegno, tabella punti                         */
/* ==================================================================== */
.riepilogo {
  display: flex; flex-direction: column; gap: var(--space-16);
  background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-card);
  padding: var(--space-24); margin-bottom: var(--space-16);
}
.riepilogo-stato { font-size: var(--text-md); display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.riepilogo-stato strong { font-weight: 600; }

/* Il disegno resta quello di Simone (core/web/disegni.py): qui solo la cornice. */
.disegno { background: var(--color-surface-alt); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-control); padding: var(--space-12); max-width: 520px; margin: 0 auto; width: 100%; }
.disegno svg { width: 100%; height: auto; display: block; }
.svg-titolo { font: 700 15px var(--font-body); fill: #f4f6f8; }
.svg-etichetta { font: 600 12px var(--font-body); fill: var(--color-ink-primary); }
.svg-etichetta-piccola { font: 11px var(--font-body); fill: var(--color-ink-muted); }
.sensore-corpo { fill: #2b3a48; stroke: #111; stroke-width: 1.5; }
.sens-verde .sensore-led  { fill: var(--color-status-healthy); }
.sens-giallo .sensore-led { fill: var(--color-status-warning); }
.sens-rosso .sensore-led  { fill: var(--color-status-critical); }
.sens-grigio .sensore-led { fill: var(--color-status-neutral); }
.cusc-verde circle:first-child  { fill: var(--color-status-healthy-bg); stroke: var(--color-status-healthy); stroke-width: 3; }
.cusc-giallo circle:first-child { fill: var(--color-status-warning-bg); stroke: var(--color-status-warning); stroke-width: 3; }
.cusc-rosso circle:first-child  { fill: var(--color-status-critical-bg); stroke: var(--color-status-critical); stroke-width: 3; }
.cusc-grigio circle:first-child { fill: var(--color-status-neutral-bg); stroke: var(--color-status-neutral); stroke-width: 3; }

.grafico-testata { display: flex; justify-content: space-between; align-items: center; gap: var(--space-16); flex-wrap: wrap; }
.grafico-controlli { display: flex; gap: var(--space-16); align-items: center; flex-wrap: wrap; font-size: var(--text-sm); }
.grafico-controlli label { display: flex; flex-direction: column; gap: var(--space-4); color: var(--color-ink-muted); }
.bottoni-finestra { display: flex; gap: var(--space-4); }
.grafico { width: 100%; min-height: 280px; margin-top: var(--space-12); }

/* ==================================================================== */
/* tabelle                                                              */
/* ==================================================================== */
.tabella { border-collapse: collapse; width: 100%; background: var(--color-surface); font-size: var(--text-sm); }
.tabella th, .tabella td { border: 1px solid var(--color-border-subtle); padding: var(--space-8) var(--space-12); text-align: left; vertical-align: top; }
.tabella th { background: var(--color-surface-alt); font-weight: 600; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .03em; color: var(--color-ink-secondary); }
.tabella.compatta td, .tabella.compatta th { padding: var(--space-4) var(--space-8); font-size: var(--text-xs); }
.riga-aperta { background: var(--color-status-warning-bg); }
.scorri { overflow-x: auto; }

.pill {
  display: inline-block; padding: var(--space-4) var(--space-12); border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 500; text-transform: uppercase; letter-spacing: .03em;
}
.pill-alarm, .pill-bad { color: var(--color-status-critical); background: var(--color-status-critical-bg); }
.pill-warning, .pill-warn { color: var(--color-status-warning-strong); background: var(--color-status-warning-bg); }
.pill-info { color: var(--color-accent); background: var(--color-accent-soft); }
.pill-ok { color: var(--color-status-healthy); background: var(--color-status-healthy-bg); }

tr.ok   { background: var(--color-status-healthy-bg); }
tr.warn { background: var(--color-status-warning-bg); }
tr.bad  { background: var(--color-status-critical-bg); }
.off    { color: var(--color-ink-muted); }

/* admin/accessi.html (Prompt 07): righe alternate, mai sopra uno stato (bad/warn/ok) già colorato */
.zebra tr:nth-child(even):not(.bad):not(.warn):not(.ok) { background: var(--color-surface-alt); }
/* colonna a larghezza fissa con ellissi — user agent lunghi in admin/accessi.html */
.tronca { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* ==================================================================== */
/* moduli e pulsanti                                                    */
/* ==================================================================== */
.modulo { display: flex; flex-direction: column; gap: var(--space-12); max-width: 420px; }
.modulo label { display: flex; flex-direction: column; gap: var(--space-4); font-size: var(--text-sm); color: var(--color-ink-muted); }
.modulo label.opzione { flex-direction: row; align-items: center; gap: var(--space-8); font-size: var(--text-sm); color: var(--color-ink-primary); }
.modulo fieldset { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-control); padding: var(--space-12); margin: 0; display: flex; flex-direction: column; gap: var(--space-8); }
.modulo legend { padding: 0 var(--space-4); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--color-ink-muted); }
.modulo .doppio { display: flex; gap: var(--space-16); }
.modulo .doppio label { flex: 1; }
.modulo input, .modulo select, .modulo textarea, .in-linea select {
  font: inherit; font-size: var(--text-md); padding: var(--space-8) var(--space-12);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-control);
  color: var(--color-ink-primary); background: var(--color-surface);
  transition: border-color var(--transition-fast);
}
.modulo textarea { resize: vertical; }
.modulo input[type="radio"] { width: auto; padding: 0; }
.btn {
  font: inherit; font-size: var(--text-sm); padding: var(--space-8) var(--space-16); border-radius: var(--radius-control);
  border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-ink-primary);
  cursor: pointer; text-decoration: none; display: inline-block;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.btn:hover { border-color: var(--color-accent); }
.btn-primario { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-ink-inverse); font-weight: 500; }
.btn-primario:hover { background: #0c3d3b; border-color: #0c3d3b; }
.btn-sottile { padding: var(--space-4) var(--space-12); font-size: var(--text-xs); }
.btn.attivo { background: var(--color-accent); color: var(--color-ink-inverse); border-color: var(--color-accent); }

.avviso { padding: var(--space-12) var(--space-16); border-radius: var(--radius-control); background: var(--color-surface-alt); margin: var(--space-12) 0; font-size: var(--text-sm); }
.avviso-errore { background: var(--color-status-critical-bg); color: var(--color-status-critical); }
.avviso-ok { background: var(--color-status-healthy-bg); color: var(--color-status-healthy); }
.password-mostrata code { font-size: var(--text-xl); user-select: all; font-family: var(--font-mono); }

.pagina-login .contenuto { display: flex; align-items: center; justify-content: center; }
.scheda-login { width: 100%; max-width: 360px; }
.scheda-login h1 { margin-bottom: var(--space-4); font-size: var(--text-xl); }

/* pagina di stato (legacy, 05_GW_03 §4) */
.meta { color: var(--color-ink-muted); font-size: var(--text-sm); }
.banner { padding: var(--space-12) var(--space-16); border-radius: var(--radius-control); margin: var(--space-12) 0 var(--space-16); }
.banner.bad { background: var(--color-status-critical-bg); }
.riepilogo table { width: 100%; }

/* §7.1 schermi stretti (< 900px): la barra diventa un cassetto sovrapposto, aperto dal pulsante nell'intestazione */
@media (max-width: 899px) {
  body.con-rail .pagina, body.con-rail.rail-chiusa .pagina { margin-left: 0; }
  .rail, body.rail-chiusa .rail { width: var(--rail-w); transform: translateX(-100%); transition: transform var(--transition-fast); box-shadow: none; }
  body.rail-aperta .rail { transform: translateX(0); box-shadow: var(--shadow-popover); }
  .rail-toggle { display: none; }
  .rail-velo { position: fixed; inset: 0; z-index: 15; background: rgba(31, 29, 24, 0.24); }
  body.rail-aperta .rail-velo { display: block; }
  .rail-apri {
    display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; flex: none; cursor: pointer;
    background: transparent; color: var(--color-ink-secondary); border: 1px solid var(--color-border-strong); border-radius: var(--radius-control);
  }
  /* nel cassetto le etichette tornano sempre visibili, anche se la barra è compressa su desktop */
  body.rail-chiusa .marchio-sotto, body.rail-chiusa .marchio-tenant { display: block; }
  body.rail-chiusa .rail-etichetta { display: inline; }
  body.rail-chiusa .marchio-nome { display: inline; width: auto; font-size: var(--text-lg); letter-spacing: .06em; text-align: left; }
  body.rail-chiusa .marchio-nome::first-letter { font-size: inherit; }
  body.rail-chiusa .marchio { align-items: stretch; }
  body.rail-chiusa .rail-testa { padding-left: var(--space-16); padding-right: var(--space-16); }
  body.rail-chiusa .rail-voce { justify-content: flex-start; padding-left: var(--space-12); padding-right: var(--space-12); }
  body.rail-chiusa .chi-pannello { left: var(--space-8); bottom: calc(100% + var(--space-4)); }
}

/* §17 telefono (< 600px): barra di schede in basso, bersagli >= 44px, padding delle schede 16 */
.tabbar { display: none; }
@media (max-width: 599px) {
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 12; padding-bottom: env(safe-area-inset-bottom);
    background: var(--color-surface); border-top: 1px solid var(--color-border-subtle);
  }
  .tabbar a, .tabbar button {
    flex: 1; min-height: 56px; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: var(--space-4); border: 0; background: transparent; color: var(--color-ink-secondary); text-decoration: none; cursor: pointer;
    font: inherit; font-size: var(--text-xs); line-height: var(--leading-xs);
    transition: background-color var(--transition-fast), color var(--transition-fast);
  }
  .tabbar a.attivo { color: var(--color-accent); background: var(--color-accent-soft); box-shadow: inset 0 3px 0 var(--color-accent); }
  .tabbar a:focus, .tabbar button:focus { outline-offset: -3px; }
  body.con-rail .pagina { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  .rail-apri { display: none; }
  .pagina-titolo { font-size: var(--text-lg); }
  .scheda { padding: var(--space-16); }
  .kpi-banda { grid-template-columns: 1fr 1fr; }
  /* colonna LIVE: le due schede affiancate, compatte, prima dell'elenco */
  .impianto-live { flex-wrap: nowrap; gap: var(--space-8); }
  .impianto-live .kpi { flex: 1 1 0; min-width: 0; }
}
.nowrap { white-space: nowrap; }
.tabella-allarmi td.messaggio { min-width: 260px; }
.solo-telefono { display: none; }
/* intestazione stretta: il titolo si tronca con i puntini, i controlli non spingono la pagina oltre la larghezza */
.pagina-titolo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pagina-controlli { flex: none; min-width: 0; }
.pagina-controlli select { max-width: 100%; }
.modulo input, .modulo select, .modulo textarea { max-width: 100%; min-width: 0; }
@media (max-width: 599px) {
  .nascondi-telefono { display: none; }
  .pagina-controlli select { max-width: 44vw; }
  .modulo .doppio { flex-direction: column; gap: var(--space-12); }
}
@media (max-width: 599px) { .solo-telefono { display: inline; } }

@media (max-width: 720px) {
  .pagina-testa { padding: 0 var(--space-16); }
  .riepilogo { grid-template-columns: 1fr; }
  .contenuto { padding: var(--space-16); }
  .tabella { display: block; overflow-x: auto; white-space: nowrap; }
  .rul-grande .rul-valore { font-size: var(--text-xl); }
}

/* ==================================================================== */
/* §19 cromo assertivo: lo stato porta la gerarchia sulle superfici a eccezioni */
/* ==================================================================== */
/* intestazioni di gruppo: il Rischio si legge per primo (tinta + barra + conteggio nel colore di stato) */
.gruppo-rosso > .gruppo-titolo, .gruppo-giallo > .gruppo-titolo {
  padding: var(--space-8) var(--space-12); border-radius: var(--radius-control); border-left: 4px solid;
}
.gruppo-rosso > .gruppo-titolo { background: var(--color-status-critical-bg); border-left-color: var(--color-status-critical); color: var(--color-status-critical); }
.gruppo-giallo > .gruppo-titolo { background: var(--color-status-warning-bg); border-left-color: var(--color-status-warning); color: var(--color-status-warning-strong); }
.gruppo-rosso .gruppo-conteggio { background: var(--color-status-critical); color: var(--color-ink-inverse); font-weight: 700; }
.gruppo-giallo .gruppo-conteggio { background: var(--color-status-warning-strong); color: var(--color-ink-inverse); font-weight: 700; }
.gruppo-grigio > .gruppo-titolo { color: var(--color-ink-secondary); }

/* pillole di stato piene su righe e riepilogo flotta (il testo resta: il colore non è l'unico segnale) */
.riga-macchina .pallino, .kpi-legenda .pallino { font-weight: 600; }
.riga-macchina .pallino-rosso, .kpi-legenda .pallino-rosso { background: var(--color-status-critical); color: var(--color-ink-inverse); }
.riga-macchina .pallino-giallo, .kpi-legenda .pallino-giallo { background: var(--color-status-warning-strong); color: var(--color-ink-inverse); }
.riga-macchina .pallino-verde, .kpi-legenda .pallino-verde { background: var(--color-status-healthy); color: var(--color-ink-inverse); }
/* il grigio (nessun dato) resta in tinta: non deve competere con ciò che richiede attenzione */

/* ==================================================================== */
/* allarmi della macchina: sotto i ~860px di larghezza del riquadro le righe si impilano, senza scorrimento orizzontale */
/* ==================================================================== */
.scorri:has(> .tabella-allarmi) { container-type: inline-size; }
@container (max-width: 860px) {
  .tabella.tabella-allarmi { display: block; overflow: visible; white-space: normal; background: transparent; }
  .tabella-allarmi tbody { display: block; }
  .tabella-allarmi tr:has(th) { display: none; }
  /* riga = scheda compatta a due colonne; messaggio e presa in carico a tutta larghezza */
  .tabella-allarmi tr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-16); padding: var(--space-12); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-control); margin-bottom: var(--space-8); background: var(--color-surface); }
  .tabella-allarmi tr.riga-aperta { background: var(--color-status-critical-bg); }
  .tabella-allarmi td { display: grid; grid-template-columns: 6.5em 1fr; gap: var(--space-8); align-items: baseline; border: 0; padding: 0; white-space: normal; }
  .tabella-allarmi td > * { grid-column: 2; justify-self: start; }
  .tabella-allarmi td::before { content: attr(data-etichetta); grid-column: 1; color: var(--color-ink-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; }
  .tabella-allarmi td.messaggio, .tabella-allarmi td[data-etichetta="presa in carico"] { grid-column: 1 / -1; min-width: 0; }
  .tabella-allarmi td.messaggio > div { justify-self: stretch; }
}
@container (max-width: 520px) {
  .tabella-allarmi tr { grid-template-columns: 1fr; }
}