:root {
  --bg: #f3f4f7;
  --surface: #ffffff;
  --surface-2: #e9ebf1;
  --ink: #171a28;
  --ink-2: #3b4157;
  --muted: #666d85;
  --line: #d8dbe4;
  --line-strong: #bec3d1;
  --accent: #2c4a87;
  --accent-2: #223c6e;
  --accent-soft: #e5ecf9;
  --ok: #1e6b48;
  --ok-soft: #e0f0e8;
  --warn: #91600e;
  --warn-soft: #f6ebd9;
  --crit: #972b2b;
  --crit-soft: #f7e3e3;
  --shadow: 0 1px 2px rgba(23, 26, 40, .05), 0 10px 28px -20px rgba(23, 26, 40, .35);
  --ui: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: Consolas, "SF Mono", Menlo, "Liberation Mono", ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #11131b; --surface: #191c26; --surface-2: #212533;
    --ink: #e7e9f0; --ink-2: #c2c7d6; --muted: #949aaf;
    --line: #2a2f3e; --line-strong: #3b4154;
    --accent: #86a6ea; --accent-2: #a8c0f2; --accent-soft: #1d2740;
    --ok: #58bc8b; --ok-soft: #16302a;
    --warn: #dda655; --warn-soft: #33260f;
    --crit: #e58585; --crit-soft: #35201f;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 30px -22px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"] {
  --bg: #11131b; --surface: #191c26; --surface-2: #212533;
  --ink: #e7e9f0; --ink-2: #c2c7d6; --muted: #949aaf;
  --line: #2a2f3e; --line-strong: #3b4154;
  --accent: #86a6ea; --accent-2: #a8c0f2; --accent-soft: #1d2740;
  --ok: #58bc8b; --ok-soft: #16302a;
  --warn: #dda655; --warn-soft: #33260f;
  --crit: #e58585; --crit-soft: #35201f;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 30px -22px rgba(0,0,0,.9);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* ------------------------------------------------------------- intestazione */
header.app {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--line-strong);
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem;
  padding: .6rem 1rem;
}
.marchio { display: flex; align-items: baseline; gap: .55rem; margin-right: auto; }
.marchio b { font-size: 1rem; font-weight: 700; letter-spacing: -.02em; }
.marchio .v { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

nav.tab { display: flex; flex-wrap: wrap; gap: .2rem; }
nav.tab button {
  background: none; border: 1px solid transparent; border-radius: 3px;
  padding: .35rem .7rem; cursor: pointer; color: var(--muted);
  font-size: .87rem; font-weight: 600; letter-spacing: -.005em;
}
nav.tab button:hover { color: var(--ink); background: var(--surface-2); }
nav.tab button[aria-current="true"] { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-soft); }

.contesto { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.contesto select {
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 3px;
  padding: .3rem .45rem; font-size: .82rem; max-width: 12rem;
}
.spia {
  font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  padding: .25em .5em; border-radius: 3px; white-space: nowrap;
}
.spia.modello { background: var(--ok-soft); color: var(--ok); }
.spia.deterministica { background: var(--warn-soft); color: var(--warn); }

/* -------------------------------------------------------------------- corpo */
main { flex: 1; width: 100%; max-width: 74rem; margin: 0 auto; padding: 1.25rem 1rem 4rem; display: flex; flex-direction: column; gap: 1.1rem; }
.vista { display: none; flex-direction: column; gap: 1.1rem; }
.vista[data-attiva="true"] { display: flex; }

.titolo-vista { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; }
.titolo-vista h1 { font-size: 1.35rem; font-weight: 700; letter-spacing: -.025em; }
.titolo-vista p { color: var(--muted); font-size: .88rem; }

.riquadro {
  background: var(--surface); border: 1px solid var(--line); border-radius: 4px;
  box-shadow: var(--shadow); overflow: hidden;
}
.riquadro > .capo {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; justify-content: space-between;
  padding: .6rem .9rem; background: var(--surface-2); border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--muted);
}
.riquadro > .capo b { color: var(--ink); font-weight: 700; }
.riquadro > .corpo { padding: .9rem; display: flex; flex-direction: column; gap: .8rem; }
.riquadro > .corpo.fitto { padding: 0; }

.griglia { display: grid; gap: 1.1rem; }
.griglia.due { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.griglia.tre { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

/* ------------------------------------------------------------------ pastiglie */
.pill {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  padding: .2em .5em; border-radius: 3px; white-space: nowrap;
  background: var(--surface-2); color: var(--ink-2);
}
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.crit { background: var(--crit-soft); color: var(--crit); }
.pill.acc { background: var(--accent-soft); color: var(--accent); }

.punto { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; }
.punto.ok { background: var(--ok); } .punto.warn { background: var(--warn); }
.punto.crit { background: var(--crit); } .punto.non_previsto { background: var(--line-strong); }

/* -------------------------------------------------------------------- bottoni */
button.azione {
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  border-radius: 3px; padding: .45rem .9rem; cursor: pointer;
  font-size: .87rem; font-weight: 600;
}
button.azione:hover:not(:disabled) { background: var(--accent-2); border-color: var(--accent-2); }
button.azione:disabled { opacity: .45; cursor: not-allowed; }
button.neutro { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
button.neutro:hover:not(:disabled) { background: var(--surface-2); }
button.pericolo { background: var(--crit); border-color: var(--crit); color: #fff; }
.barra-azioni { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* -------------------------------------------------------------------- tabelle */
.scorri { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .85rem; }
th {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; text-align: left;
  padding: .55rem .7rem; border-bottom: 1px solid var(--line-strong); white-space: nowrap;
  background: var(--surface);
}
td { padding: .55rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
td.capo { font-weight: 650; white-space: nowrap; }
td.mid { text-align: center; white-space: nowrap; }

/* ------------------------------------------------------------------- dialogo */
.dialogo { display: flex; flex-direction: column; gap: .7rem; max-height: 26rem; overflow-y: auto; padding: .2rem; }
.bolla { display: flex; flex-direction: column; gap: .3rem; max-width: 90%; }
.bolla.mia { align-self: flex-end; align-items: flex-end; }
.bolla .testo {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px;
  padding: .6rem .8rem; white-space: pre-wrap; font-size: .9rem; line-height: 1.55;
}
.bolla.mia .testo { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-2); }
.bolla.critica .testo { border-left: 3px solid var(--crit); background: var(--crit-soft); }
.bolla.sicurezza .testo { border-left: 3px solid var(--warn); background: var(--warn-soft); }
.bolla .meta { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; font-size: .72rem; color: var(--muted); }

.composizione { display: flex; gap: .5rem; align-items: flex-end; }
.composizione textarea {
  flex: 1; resize: vertical; min-height: 2.6rem; max-height: 8rem;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 3px; padding: .5rem .6rem;
  font-size: .9rem;
}
button.microfono {
  width: 2.7rem; height: 2.7rem; border-radius: 50%; flex: 0 0 auto;
  background: var(--surface); border: 1px solid var(--line-strong); cursor: pointer;
  display: grid; place-items: center; font-size: 1.1rem;
}
button.microfono[data-ascolto="true"] { background: var(--crit); border-color: var(--crit); color: #fff; animation: pulsa 1.2s ease-in-out infinite; }
button.microfono:disabled { opacity: .4; cursor: not-allowed; }
@keyframes pulsa { 0%, 100% { box-shadow: 0 0 0 0 rgba(151,43,43,.5); } 50% { box-shadow: 0 0 0 .5rem rgba(151,43,43,0); } }
@media (prefers-reduced-motion: reduce) { button.microfono[data-ascolto="true"] { animation: none; } }

/* ------------------------------------------------------------------- moduli */
label.campo { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; color: var(--muted); }
label.campo > span { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
label.campo input, label.campo select, label.campo textarea {
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 3px;
  padding: .4rem .5rem; font-size: .88rem; color: var(--ink);
}
label.campo textarea { min-height: 5rem; resize: vertical; }

.kpi-riga { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1px; background: var(--line); }
.kpi { background: var(--surface); padding: .8rem .9rem; display: flex; flex-direction: column; gap: .2rem; }
.kpi .v { font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kpi .v.ok { color: var(--ok); } .kpi .v.warn { color: var(--warn); } .kpi .v.crit { color: var(--crit); }
.kpi .d { font-size: .78rem; color: var(--muted); line-height: 1.35; }

.elenco { display: flex; flex-direction: column; gap: 1px; background: var(--line); }
.elenco > li { background: var(--surface); padding: .7rem .9rem; display: flex; flex-direction: column; gap: .3rem; list-style: none; }
.elenco .riga1 { display: flex; flex-wrap: wrap; gap: .45rem; align-items: baseline; justify-content: space-between; }
.elenco .nome { font-weight: 650; font-size: .9rem; }
.elenco .sotto { font-size: .82rem; color: var(--muted); line-height: 1.45; }

.avviso { border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--accent-2); padding: .6rem .8rem; border-radius: 3px; font-size: .85rem; }
.avviso.crit { border-left-color: var(--crit); background: var(--crit-soft); color: var(--crit); }
.avviso.warn { border-left-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.avviso.ok { border-left-color: var(--ok); background: var(--ok-soft); color: var(--ok); }

.vuoto { color: var(--muted); font-size: .87rem; padding: 1rem; text-align: center; }
.mono { font-family: var(--mono); font-size: .78rem; }
.passi { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: .25rem; font-size: .86rem; }
.passi li::marker { color: var(--muted); font-family: var(--mono); font-size: .75rem; }

/* ------------------------------------------------------------------ accesso */
#accesso {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg);
  display: grid; place-items: center; padding: 1.25rem;
}
#accesso[hidden] { display: none; }
.accesso-scheda {
  width: 100%; max-width: 26rem;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 4px;
  box-shadow: var(--shadow); overflow: hidden;
}
.accesso-capo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .8rem 1rem; background: var(--surface-2); border-bottom: 1px solid var(--line-strong);
}
.accesso-capo b { font-size: 1rem; font-weight: 700; letter-spacing: -.02em; }
.accesso-capo .mono { color: var(--muted); letter-spacing: .11em; text-transform: uppercase; font-size: 10px; }
.accesso-corpo { padding: 1.1rem; display: flex; flex-direction: column; gap: .85rem; }
.accesso-corpo .azione { width: 100%; padding: .6rem; }
#accesso-descrizione { min-height: 2.4em; }

button.chi-sono {
  display: flex; align-items: center; gap: .4rem;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 3px;
  padding: .25rem .5rem; cursor: pointer; font-size: .82rem; font-weight: 600;
}
button.chi-sono:hover { background: var(--surface-2); }

header.app[hidden], main[hidden] { display: none; }

#brindisi {
  position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--bg); padding: .55rem 1rem; border-radius: 4px;
  font-size: .85rem; z-index: 100; box-shadow: var(--shadow); max-width: 90vw;
}
#brindisi[hidden] { display: none; }
#brindisi.crit { background: var(--crit); color: #fff; }

@media (max-width: 640px) {
  header.app { padding: .5rem .6rem; }
  .marchio .v { display: none; }
  main { padding: .9rem .6rem 4rem; }
}