/* Thermosanita Smart Control - stile iOS "Liquid Glass" per tutto il sito (12/10).
   Si carica DOPO stile.css e scena.css e ne ridefinisce l'aspetto: sfondo con luci morbide,
   superfici di vetro, barra in alto fluttuante, schede come controllo segmentato (sul telefono
   barra in basso), pulsanti a capsula, liste raggruppate. Tema scuro di default, chiaro con
   [data-theme=light] o con il sistema chiaro. */

:root {
  color-scheme: dark;
  --fondo:#04070d; --fondo2:#0a1220; --carta:rgba(30,40,58,.5); --carta2:rgba(255,255,255,.07); --riga:rgba(255,255,255,.12);
  --testo:#f5f8fc; --tenue:rgba(235,242,255,.62); --blu:#0a84ff; --verde:#30d158; --rosso:#ff453a;
  --giallo:#ffd60a; --arancio:#ff9f0a; --azzurro:#64d2ff; --viola:#bf5af2;
  --vetro:rgba(32,44,66,.46); --vetro-forte:rgba(26,36,56,.72); --vetro-linea:rgba(255,255,255,.16);
  --vetro-luce:rgba(255,255,255,.16); --ombra:0 12px 40px rgba(0,0,0,.45);
  --campo:rgba(255,255,255,.08); --sul-colore:#fff;
  --luce1:rgba(10,132,255,.34); --luce2:rgba(48,209,200,.20); --luce3:rgba(191,90,242,.18);
  --grafico-riga:rgba(255,255,255,.1); --fondo-g:rgba(255,255,255,.04);
  --ok-bg:rgba(48,209,88,.16); --err-bg:rgba(255,69,58,.16); --att-bg:rgba(255,214,10,.14); --info-bg:rgba(10,132,255,.18);
}
:root[data-theme="light"] {
  color-scheme: light;
  --fondo:#eef2f8; --fondo2:#e2e9f3; --carta:rgba(255,255,255,.6); --carta2:rgba(255,255,255,.7); --riga:rgba(20,40,70,.12);
  --testo:#0b1626; --tenue:rgba(11,22,38,.58); --blu:#007aff; --verde:#1fa84a; --rosso:#e0342b;
  --giallo:#b98300; --arancio:#e07b00; --azzurro:#0a86c8; --viola:#8e3bd1;
  --vetro:rgba(255,255,255,.58); --vetro-forte:rgba(255,255,255,.82); --vetro-linea:rgba(255,255,255,.85);
  --vetro-luce:rgba(255,255,255,.9); --ombra:0 10px 34px rgba(30,60,110,.14);
  --campo:rgba(20,40,70,.06); --sul-colore:#fff;
  --luce1:rgba(0,122,255,.20); --luce2:rgba(52,199,195,.18); --luce3:rgba(175,82,222,.14);
  --grafico-riga:rgba(20,40,70,.1); --fondo-g:rgba(20,40,70,.04);
  --ok-bg:rgba(31,168,74,.14); --err-bg:rgba(224,52,43,.12); --att-bg:rgba(185,131,0,.14); --info-bg:rgba(0,122,255,.12);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --fondo:#eef2f8; --fondo2:#e2e9f3; --carta:rgba(255,255,255,.6); --carta2:rgba(255,255,255,.7); --riga:rgba(20,40,70,.12);
    --testo:#0b1626; --tenue:rgba(11,22,38,.58); --blu:#007aff; --verde:#1fa84a; --rosso:#e0342b;
    --giallo:#b98300; --arancio:#e07b00; --azzurro:#0a86c8; --viola:#8e3bd1;
    --vetro:rgba(255,255,255,.58); --vetro-forte:rgba(255,255,255,.82); --vetro-linea:rgba(255,255,255,.85);
    --vetro-luce:rgba(255,255,255,.9); --ombra:0 10px 34px rgba(30,60,110,.14);
    --campo:rgba(20,40,70,.06);
    --luce1:rgba(0,122,255,.20); --luce2:rgba(52,199,195,.18); --luce3:rgba(175,82,222,.14);
    --grafico-riga:rgba(20,40,70,.1); --fondo-g:rgba(20,40,70,.04);
    --ok-bg:rgba(31,168,74,.14); --err-bg:rgba(224,52,43,.12); --att-bg:rgba(185,131,0,.14); --info-bg:rgba(0,122,255,.12);
  }
}

/* ------------------------------------------------------------- base */
html { scroll-behavior:smooth; }
body { font:16px/1.47 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, Roboto, sans-serif;
  -webkit-font-smoothing:antialiased; letter-spacing:-.011em; background-color:var(--fondo); color:var(--testo);
  background-image:radial-gradient(60vmax 50vmax at 8% -8%, var(--luce1), transparent 62%),
                   radial-gradient(55vmax 45vmax at 105% 8%, var(--luce3), transparent 60%),
                   radial-gradient(60vmax 50vmax at 60% 112%, var(--luce2), transparent 62%);
  background-attachment:fixed; }
main { padding:12px 16px 40px; }
a { color:var(--blu); text-underline-offset:3px; }
h1 { font-size:clamp(26px, 4vw, 34px); font-weight:700; letter-spacing:-.025em; line-height:1.12; }
h2 { font-size:19px; font-weight:650; letter-spacing:-.018em; }
h3 { font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--tenue); }
.piccolo, .u { color:var(--tenue); font-size:14px; }
::selection { background:rgba(10,132,255,.35); }
:focus-visible { outline:3px solid color-mix(in srgb, var(--blu) 55%, transparent); outline-offset:2px; border-radius:10px; }

/* ----------------------------------------------- barra in alto (vetro) */
.testata { position:sticky; top:max(8px, env(safe-area-inset-top)); z-index:60; margin:max(8px, env(safe-area-inset-top)) 12px 0;
  padding:9px 16px; border:1px solid var(--vetro-linea); border-radius:26px;
  background:linear-gradient(135deg, var(--vetro-luce), transparent 55%), var(--vetro);
  -webkit-backdrop-filter:blur(28px) saturate(190%); backdrop-filter:blur(28px) saturate(190%);
  box-shadow:inset 0 1px 0 var(--vetro-luce), var(--ombra); }
.marchio img { border-radius:11px; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.marchio strong { font-size:17px; font-weight:700; letter-spacing:-.02em; }
.testata nav a, .link { color:var(--testo); opacity:.8; font-weight:500; font-size:15px; padding:6px 10px; border-radius:999px; transition:background .2s, opacity .2s; }
.testata nav a:hover, .link:hover { opacity:1; background:var(--campo); }
#b-tema { font-size:19px; padding:4px 10px; }
footer { color:var(--tenue); }

/* ---------------------------------------------------- superfici di vetro */
.scheda, .quadro, .avviso {
  border:1px solid var(--vetro-linea); border-radius:24px;
  background:linear-gradient(135deg, var(--vetro-luce), transparent 45%), var(--vetro);
  -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%);
  box-shadow:inset 0 1px 0 var(--vetro-luce), var(--ombra); }
.scheda { padding:18px 20px; margin-bottom:16px; }
.quadro { padding:16px 18px; }
a.scheda { transition:transform .2s ease, box-shadow .2s ease; }
a.scheda:hover { transform:translateY(-2px); border-color:var(--vetro-linea); }
a.scheda:active { transform:scale(.985); }
.con-allarme { border-color:var(--rosso); box-shadow:inset 0 1px 0 var(--vetro-luce), 0 0 0 1px var(--rosso), var(--ombra); }
.macchina .grande { font-weight:650; letter-spacing:-.03em; }
.avviso { padding:12px 16px; border-radius:18px; border-left-width:1px; }
.avviso::before { content:""; display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--blu); margin-right:10px; vertical-align:middle; }
.rosso-b { background:linear-gradient(var(--err-bg), var(--err-bg)), var(--vetro); border-color:var(--rosso); } .rosso-b::before { background:var(--rosso); }
.vento-b { background:linear-gradient(var(--att-bg), var(--att-bg)), var(--vetro); border-color:var(--giallo); } .vento-b::before { background:var(--giallo); }
.errore { color:var(--rosso); font-weight:550; }

/* -------------------------------------- schede della macchina (segmentato) */
.schede { gap:2px; padding:4px; width:fit-content; max-width:100%; border:1px solid var(--vetro-linea); border-radius:999px;
  background:var(--vetro); -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%);
  box-shadow:inset 0 1px 0 var(--vetro-luce); margin:6px 0 16px; }
.schede a { padding:8px 16px; border:0; border-radius:999px; font-weight:550; font-size:15px; transition:background .25s, color .25s; }
.schede a.attiva { background:var(--vetro-forte); color:var(--testo); box-shadow:0 2px 10px rgba(0,0,0,.18), inset 0 1px 0 var(--vetro-luce); }
.mtesta { margin:10px 0 6px; }
.indietro { width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--campo); color:var(--testo); font-size:20px; flex:none; }
.sistema { border-radius:18px; background:var(--campo); border:1px solid var(--vetro-linea); padding:6px 14px; }
.sistema.on { background:var(--ok-bg); border-color:color-mix(in srgb, var(--verde) 55%, transparent); }
.sistema.off { background:var(--campo); }
.bollino { background:var(--rosso); box-shadow:0 0 0 3px var(--err-bg); }
.pallino.verde { color:var(--verde); }

/* --------------------------------------------------------------- pulsanti */
button { border-radius:999px; padding:11px 22px; font-weight:600; letter-spacing:-.01em; color:#fff;
  background:var(--blu); box-shadow:0 4px 14px color-mix(in srgb, var(--blu) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .15s ease, filter .2s, box-shadow .2s; }
button:hover { filter:brightness(1.08); } button:active { transform:scale(.96); }
button.verde { background:var(--verde); color:#fff; box-shadow:0 4px 14px color-mix(in srgb, var(--verde) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.35); }
button.rosso { background:var(--rosso); color:#fff; box-shadow:0 4px 14px color-mix(in srgb, var(--rosso) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.35); }
button.giallo { background:var(--giallo); color:#1b1400; }
:root[data-theme="light"] button.giallo { color:#fff; }
button.secondario, .scelta { background:var(--campo); color:var(--testo); border:1px solid var(--vetro-linea); box-shadow:none; }
button.link { background:none; border:0; box-shadow:none; color:var(--testo); border-radius:999px; padding:6px 10px; }
.scelta { border-radius:16px; min-width:140px; }
.scelta-on { background:var(--ok-bg); border-color:var(--verde); color:var(--verde); }
button:disabled { opacity:.38; }
.bottoni button { border-radius:20px; font-size:17px; }

/* ----------------------------------------------------------------- campi */
input, select { border-radius:14px; border:1px solid var(--vetro-linea); background:var(--campo); color:var(--testo);
  padding:10px 14px; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:border-color .2s, box-shadow .2s; }
input:focus, select:focus { outline:none; border-color:var(--blu); box-shadow:0 0 0 4px color-mix(in srgb, var(--blu) 25%, transparent); }
input[type=checkbox] { accent-color:var(--blu); border-radius:7px; }
label { font-weight:500; }

/* --------------------------------------------------------------- tabelle */
table { border-radius:16px; }
th, td { border-bottom:1px solid var(--riga); padding:9px 8px; } th { font-weight:600; font-size:12px; letter-spacing:.04em; text-transform:uppercase; }
tr:last-child td { border-bottom:0; }

/* ----------------------------------------------------------- quadri sotto la scena */
.cruscotto { gap:14px; }
.arco-fondo { stroke:var(--campo); } .arco { stroke:var(--verde); }
.g-val { font-weight:700; letter-spacing:-.03em; } .ico { background:var(--campo); }
.ico.on { background:var(--ok-bg); box-shadow:0 0 0 2px var(--verde) inset; }
.barre i { background:var(--campo); border-radius:4px; } .barre i.piena { background:var(--verde); }
.verde-t { color:var(--verde); font-weight:650; letter-spacing:-.025em; }
.scena2 { border:1px solid var(--vetro-linea); }

/* ------------------------------------------------------ programma, grafici */
.giorni a { border-radius:999px; background:var(--campo); border:1px solid var(--vetro-linea); color:var(--tenue); font-weight:550; }
.giorni a.attiva { background:var(--blu); color:#fff; border-color:var(--blu); }
.giorni a.oggi:not(.attiva) { color:var(--testo); }
.fondo-g { fill:var(--fondo-g); stroke:var(--grafico-riga); } .griglia-h, .gr-riga { stroke:var(--grafico-riga); }
.fascia-t { fill:#fff; } .fascia-g { fill:var(--blu); } .fascia-g.fc { fill:var(--azzurro); } .fascia-g.tutto { fill:var(--verde); }
.gr-vento { stroke:var(--azzurro); } .gr-raffica { stroke:var(--blu); } .gr-soglia { stroke:var(--giallo); } .gr-sopra { fill:var(--giallo); }
.leg.l1 { background:var(--azzurro); } .leg.l2 { background:var(--blu); } .leg.l3 { background:var(--giallo); } .leg.l5 { background:var(--verde); }

/* richieste di accesso: campo trappola per i robot (fuori schermo) e numero nel menu */
.trappola { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.conta { display:inline-block; min-width:18px; padding:0 5px; margin-left:5px; border-radius:999px; background:var(--rosso); color:#fff; font-size:12px; font-weight:700; line-height:18px; text-align:center; vertical-align:middle; }

/* previsioni meteo (struttura fissa) */
.gr-temp { fill:none; stroke:var(--arancio); stroke-width:2.5; stroke-linejoin:round; }
.gr-pioggia { fill:var(--blu); opacity:.85; } .gr-nuvole { fill:var(--tenue); opacity:.2; }
.gr-asse-dx { fill:var(--blu); font-size:11px; }
.leg.lt { background:var(--arancio); } .leg.ln { background:var(--tenue); opacity:.5; }

/* ------------------------------------------------------------------ allarmi */
.grave { border-radius:18px; border:1px solid var(--rosso); background:var(--err-bg); }
.grave.avviso { background:var(--att-bg); border-color:var(--giallo); }
.grave.manutenzione { background:var(--info-bg); border-color:var(--blu); }
.grave::before { display:none; }
.tag-g { border-radius:999px; padding:2px 9px; background:var(--err-bg); color:var(--rosso); font-weight:600; }
.tag-g.avviso { background:var(--att-bg); color:var(--giallo); } .tag-g.manutenzione { background:var(--info-bg); color:var(--blu); }

/* ---------------------------------------------------------- accesso e password */
.stretta { margin:8vh auto; padding:28px 26px; }
.stretta h1 { text-align:center; }

/* --------------------------------------------------------------- telefono */
@media (max-width: 700px) {
  main { padding:8px 12px 110px; }
  .testata { position:static; margin:max(6px, env(safe-area-inset-top)) 8px 0; border-radius:22px; padding:8px 12px; flex-wrap:nowrap; align-items:flex-start; }
  .testata nav { flex-wrap:wrap; justify-content:flex-end; gap:0 2px; min-width:0; flex:1; }
  .testata nav a, .testata nav .link { font-size:14px; padding:5px 8px; white-space:nowrap; }
  .marchio span { display:none; }
  /* barra delle schede in basso, come una tab bar di iOS */
  .schede { position:fixed; left:12px; right:12px; bottom:max(12px, env(safe-area-inset-bottom)); z-index:70; width:auto;
    justify-content:space-around; padding:6px; margin:0; border-radius:30px; overflow:hidden; scrollbar-width:none; background:var(--vetro-forte); box-shadow:inset 0 1px 0 var(--vetro-luce), var(--ombra); }
  .schede a { flex:1; text-align:center; padding:11px 6px; font-size:14px; }
}
@media (prefers-reduced-transparency: reduce) {
  .testata, .scheda, .quadro, .avviso, .schede, .chip, input, select { -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--vetro-forte); }
}