/* Thermosanita Smart Control - 30/09. Scuro, come il sinottico del pannello:
   blu notte, pannelli vetrati, verde per quello che lavora. */
:root {
  --fondo:#08131f; --fondo2:#0b1a2b; --carta:#0f2236; --carta2:#132b44; --riga:#21405f;
  --testo:#e8f0f8; --tenue:#9db0c4; --blu:#4aa3e8; --verde:#34d17a; --rosso:#ff5a52;
  --giallo:#f5b83d; --arancio:#ff9a3c; --azzurro:#6fd3ff;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
       background:var(--fondo); color:var(--testo); min-height:100vh;
       background-image:radial-gradient(ellipse at top, #10304d 0%, var(--fondo) 60%); }
a { color:var(--blu); }
.testata { display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; justify-content:space-between;
           padding:10px 16px; padding-top:max(10px, env(safe-area-inset-top));
           background:linear-gradient(180deg, #0e2740, #0a1c2e); border-bottom:1px solid var(--riga); }
.marchio { display:flex; gap:10px; align-items:center; color:var(--testo); text-decoration:none; }
.marchio img { border-radius:9px; background:#fff; }
.marchio span { display:flex; flex-direction:column; line-height:1.1; }
.marchio strong { font-size:18px; letter-spacing:.3px; }
.marchio small { color:var(--tenue); font-size:13px; }
.testata nav { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.testata nav a, .link { color:var(--testo); opacity:.85; text-decoration:none; background:none; border:0; padding:0; font:inherit; cursor:pointer; }
.testata nav a:hover, .link:hover { opacity:1; }
main { max-width:1180px; margin:0 auto; padding:16px; }
footer { text-align:center; color:var(--tenue); font-size:13px; padding:24px 16px calc(24px + env(safe-area-inset-bottom)); }
h1 { font-size:24px; margin:4px 0 6px; } h2 { font-size:17px; margin:0 0 10px; letter-spacing:.2px; }
h3 { font-size:13px; margin:0 0 10px; letter-spacing:.8px; text-transform:uppercase; color:var(--tenue); font-weight:600; }
.scheda { background:rgba(15,34,54,.88); border:1px solid var(--riga); border-radius:14px; padding:16px;
          margin-bottom:16px; display:block; color:inherit; text-decoration:none; backdrop-filter:blur(6px); }
.stretta { max-width:400px; margin:40px auto; }
.griglia { display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:16px; }
.macchina:hover { border-color:var(--blu); }
.con-allarme { border-color:var(--rosso); }
.riga { display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; align-items:center; }
.numeri { display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); gap:12px; margin:12px 0; }
.grande { font-size:30px; font-weight:600; display:block; font-variant-numeric:tabular-nums; }
.u, .piccolo { color:var(--tenue); font-size:14px; }
.pallino::before { content:"\25CF"; margin-right:4px; } .pallino.verde { color:var(--verde); } .pallino.grigio { color:var(--tenue); }
.errore { color:var(--rosso); }
.nascosto { display:none !important; }
.avviso { background:var(--carta2); border-left:4px solid var(--blu); padding:10px 14px; border-radius:8px; margin:0 0 14px; }
.rosso-b { border-left-color:var(--rosso); background:#3a1719; }
.vento-b { border-left-color:var(--giallo); background:#3a2e12; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
form { margin:0; } .in-linea { display:inline-block; }
label { display:block; margin:8px 0; }
.spunta { display:flex; gap:10px; align-items:center; }
.linea { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; } .linea label { margin:4px 0; }
input, select { font:inherit; padding:9px 11px; border:1px solid var(--riga); border-radius:8px; background:#0a1a2a;
                color:var(--testo); max-width:100%; color-scheme:dark; }
input[type=email], input[type=password] { width:100%; } input[type=checkbox] { width:20px; height:20px; accent-color:var(--verde); }
input.corto { width:84px; }
button { font:inherit; padding:10px 18px; border:0; border-radius:10px; background:var(--blu); color:#04121f; font-weight:600; cursor:pointer; }
button:disabled { opacity:.35; cursor:not-allowed; }
button.verde { background:var(--verde); } button.rosso { background:var(--rosso); color:#fff; }
button.giallo { background:var(--giallo); } button.secondario { background:transparent; color:var(--testo); border:1px solid var(--riga); }
.bottoni { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.bottoni button { min-width:190px; padding:14px 18px; font-size:17px; }
table { width:100%; border-collapse:collapse; font-size:14px; display:block; overflow-x:auto; }
th, td { text-align:left; padding:7px 6px; border-bottom:1px solid var(--riga); } th { color:var(--tenue); font-weight:500; }

/* ---- testata della macchina e schede ---- */
.mtesta { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:4px 0 12px; }
.mnome { display:flex; gap:12px; align-items:center; min-width:0; }
.mnome h1 { margin:0; overflow-wrap:anywhere; } .mnome p { margin:2px 0 0; }
.indietro { font-size:24px; text-decoration:none; color:var(--tenue); }
.sistema { display:flex; flex-direction:column; align-items:center; min-width:84px; padding:6px 12px; border-radius:10px;
           border:1px solid var(--riga); background:var(--carta2); }
.sistema small { font-size:11px; letter-spacing:1px; color:var(--tenue); } .sistema b { font-size:20px; }
.sistema.on { background:#11391f; border-color:var(--verde); } .sistema.on b { color:var(--verde); }
.sistema.off b { color:var(--tenue); }
.sistema.mini { min-width:0; padding:2px 10px; } .sistema.mini b { font-size:14px; }
.schede { display:flex; gap:4px; margin:0 0 14px; overflow-x:auto; border-bottom:1px solid var(--riga); }
.schede a { padding:10px 14px; text-decoration:none; color:var(--tenue); border-bottom:3px solid transparent; white-space:nowrap; }
.schede a.attiva { color:var(--testo); border-bottom-color:var(--blu); }
.bollino { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--rosso); vertical-align:middle; }

/* ---- il sinottico: macchina vera scontornata, condotto, struttura (29/09) ---- */
.scena { --aria:#4ab29c; position:relative; border-radius:18px; overflow:hidden; border:1px solid #1d3957; margin-bottom:8px;
         background:#07121e; aspect-ratio:16 / 9; box-shadow:0 18px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05); }
.scena.caldo { --aria:var(--arancio); } .scena.freddo { --aria:var(--azzurro); }
.scena:not(.ventila) { --aria:#51606f; }
.vivo { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; display:block; }
.griglia line { stroke:#2c4a68; stroke-width:1.5; opacity:.35; }
.orizzonte { stroke:#3d6a94; stroke-width:2; opacity:.6; }
.riflesso-terra { opacity:.5; }
.spento image { filter:saturate(.75) brightness(.85); }
/* struttura */
.telo { stroke:none; }
.costole path { fill:none; stroke:#8da2b6; stroke-width:3; opacity:.55; }
.struttura .bordo { fill:none; stroke:#f4f8fb; stroke-width:4; opacity:.9; }
.riflesso { fill:none; stroke:#fff; stroke-width:10; stroke-linecap:round; opacity:.55; }
.porta { fill:#2b3b4c; stroke:#e6edf3; stroke-width:3; }
.tetto { fill:#5b6d80; } .fianco { fill:#7d8b99; } .fascia { fill:#7f8e9c; }
.vetro { fill:#1b3552; stroke:#e4ebf1; stroke-width:3; }
.caldo.ventila .vetro { fill:#5a3a22; } .freddo.ventila .vetro { fill:#1d4d63; }
.clima { opacity:0; transition:opacity 1.2s; } .clima-a { stop-color:var(--aria); }
.ventila .clima { opacity:.55; } .ventila.caldo .clima, .ventila.freddo .clima { opacity:.75; }
.soffio path { fill:none; stroke:var(--aria); stroke-width:6; stroke-linecap:round; stroke-dasharray:30 26; opacity:0; }
.ventila .soffio path { opacity:.9; animation:scorre 1s linear infinite; }
/* condotto */
.guaina { fill:none; stroke:#0a1622; stroke-width:92; opacity:.7; }
.tubo { fill:none; stroke:url(#g-tubo); stroke-width:80; stroke-linecap:butt; }
.t-pdc .guaina { stroke-width:108; } .t-pdc .tubo { stroke-width:98; }
.bocca { fill:#1b2835; stroke:#dfe6ec; stroke-width:4; }
.flusso { fill:none; stroke:var(--aria); stroke-width:14; stroke-linecap:round; stroke-dasharray:26 34; opacity:.35; }
.ventila .flusso { opacity:.95; animation:scorre .9s linear infinite; filter:drop-shadow(0 0 10px var(--aria)); }
.particelle circle { fill:#fff; opacity:0; }
.ventila .particelle circle { opacity:.85; }
@keyframes scorre { to { stroke-dashoffset:-60; } }
.fumo circle { fill:rgba(235,240,245,.55); opacity:0; }
.gas .fumo circle { animation:fumo 3s ease-out infinite; }
.gas .fumo .f2 { animation-delay:1s; } .gas .fumo .f3 { animation-delay:2s; }
@keyframes fumo { 0% { opacity:0; transform:translateY(20px) scale(.6); } 30% { opacity:.6; } 100% { opacity:0; transform:translateY(-60px) scale(1.4); } }
/* cartellini */
.filo { stroke:rgba(255,255,255,.7); stroke-width:2.5; }
.punto { fill:#fff; stroke:rgba(8,19,31,.8); stroke-width:4; }
.cartellino { position:absolute; background:rgba(9,22,37,.72); border:1px solid rgba(255,255,255,.18); border-radius:12px;
              padding:6px 12px; line-height:1.2; max-width:40%; box-shadow:0 8px 24px rgba(0,0,0,.4);
              -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.cartellino small { display:block; font-size:clamp(9px, 1vw, 12px); color:var(--tenue); letter-spacing:.6px; text-transform:uppercase; }
.cartellino b { font-size:clamp(11px, 1.45vw, 18px); font-variant-numeric:tabular-nums; }
.cartellino.grande { text-align:center; background:rgba(9,22,37,.55); padding:8px 18px; }
.cartellino.grande b { display:block; font-size:clamp(22px, 4.6vw, 58px); font-weight:800; line-height:1.05; letter-spacing:-.5px; }
.cartellino.grande span { display:block; font-size:clamp(9px, 1.05vw, 13px); color:var(--tenue); }
.cartellino.grande i { font-style:normal; color:var(--testo); font-weight:700; }
.stato-chip { position:absolute; right:14px; top:14px; padding:6px 14px; border-radius:999px; font-weight:800; letter-spacing:.8px;
              background:rgba(17,57,31,.85); color:var(--verde); border:1px solid var(--verde); font-size:clamp(11px, 1.4vw, 16px); }
.spento .stato-chip { background:rgba(27,39,51,.85); color:#c9d4de; border-color:#51606f; }
.allarme .stato-chip { background:#3a1719; color:var(--rosso); border-color:var(--rosso); animation:lampeggia 1s steps(2) infinite; }
@keyframes lampeggia { 50% { opacity:.35; } }
.esterna-chip { position:absolute; left:14px; top:14px; background:rgba(9,22,37,.72); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:5px 12px; line-height:1.15; }
.esterna-chip small { display:block; font-size:clamp(9px, 1vw, 12px); color:var(--tenue); letter-spacing:.6px; text-transform:uppercase; }
.esterna-chip b { font-size:clamp(11px, 1.35vw, 16px); }
.vento .esterna-chip { border-color:var(--giallo); } .vento .esterna-chip b { color:var(--giallo); }
.legenda { margin:0 0 16px; }
.numero, .didascalie, .dentro-svg { display:none; }
.dentro-svg text { fill:#fff; font-weight:800; text-anchor:middle; paint-order:stroke; stroke:rgba(6,16,28,.55); stroke-width:10; font-variant-numeric:tabular-nums; }
.dentro-svg .sotto { font-weight:600; fill:#e3ebf2; stroke-width:6; }
.numero circle { fill:var(--blu); stroke:#fff; stroke-width:5; } .numero text { fill:#04121f; font-weight:800; text-anchor:middle; }
@media (max-width: 700px) {
  .scena { border-radius:14px; aspect-ratio:16 / 8; }
  .cartellino, .esterna-chip, .filo, .punto { display:none; }
  .dentro-svg { display:inline; }
  .stato-chip { right:8px; top:8px; padding:3px 9px; font-size:10px; }
  .numero { display:inline; }
  .didascalie { display:block; list-style:none; padding:0; margin:8px 0 6px; counter-reset:d; }
  .didascalie li { counter-increment:d; display:flex; gap:8px; align-items:baseline; padding:6px 0; border-bottom:1px solid var(--riga); }
  .didascalie li::before { content:counter(d); min-width:22px; height:22px; border-radius:50%; background:var(--blu); color:#04121f;
                           font-weight:800; font-size:13px; display:inline-flex; align-items:center; justify-content:center; }
  .didascalie li.senza { counter-increment:none; } .didascalie li.senza::before { content:""; background:transparent; }
  .didascalie small { color:var(--tenue); min-width:40%; } .didascalie b { margin-left:auto; text-align:right; }
}
.leg.lc { background:var(--arancio); } .leg.la { background:#4ab29c; } .leg.lr { background:var(--azzurro); } .leg.lf { background:#51606f; }
@media (prefers-reduced-motion: reduce) { .scena * { animation:none !important; } }

/* ---- i quadri sotto la scena ---- */
.cruscotto { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:16px; }
.quadro { background:rgba(15,34,54,.9); border:1px solid var(--riga); border-radius:14px; padding:14px 16px; }
.quadro p { margin:6px 0; }
.lancetta { width:100%; max-width:220px; display:block; margin:0 auto; }
.arco-fondo { fill:none; stroke:#1d3a57; stroke-width:14; stroke-linecap:round; }
.arco { fill:none; stroke:var(--verde); stroke-width:14; stroke-linecap:round; transition:stroke-dasharray .8s; }
.g-val { fill:var(--testo); font-size:30px; font-weight:700; text-anchor:middle; }
.g-u { fill:var(--tenue); font-size:13px; text-anchor:middle; }
.scala { display:flex; justify-content:space-between; max-width:220px; margin:0 auto !important; }
.riga-q { display:flex; align-items:center; gap:10px; }
.riga-q b { color:var(--tenue); } .riga-q .dx { margin-left:auto; color:var(--testo); }
.ico { width:26px; height:26px; flex:none; border-radius:50%; background:#1d3a57; position:relative; }
.ico.on { background:#11391f; box-shadow:0 0 0 2px var(--verde) inset; }
.ico::after { content:""; position:absolute; inset:6px; border-radius:50%; background:var(--tenue); }
.ico.on::after { background:var(--verde); }
.ico-fiamma.on::after { background:var(--arancio); border-radius:50% 50% 50% 0; transform:rotate(-45deg); }
.ico-ventola.on::after { animation:gira 1s linear infinite; border-radius:0 50%; }
.doppio { display:flex; gap:18px; } .doppio small { display:block; color:var(--tenue); font-size:13px; }
.verde-t { color:var(--verde); font-size:26px; font-variant-numeric:tabular-nums; }
.barre { display:flex; gap:3px; height:18px; margin-top:8px; }
.barre i { flex:1; background:#1d3a57; border-radius:2px; } .barre i.piena { background:var(--verde); }

/* ---- comandi ---- */
.scelte { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.scelta { background:var(--carta2); color:var(--testo); border:1px solid var(--riga); min-width:150px; }
.scelta-on { background:#11391f; border-color:var(--verde); color:var(--verde); }

/* ---- programma ---- */
.settimana { width:100%; height:auto; display:block; }
.griglia-h { stroke:#1d3a57; stroke-width:1; }
.ora-t, .giorno-t { fill:var(--tenue); font-size:14px; } .ora-t { text-anchor:middle; }
.giorno-t.oggi { fill:var(--testo); font-weight:700; }
.fondo-g { fill:#0a1a2a; stroke:#1d3a57; }
.fascia-g { fill:var(--blu); } .fascia-g.fc { fill:var(--azzurro); } .fascia-g.tutto { fill:#2c6d4a; }
.fascia-g.notte { opacity:.8; }
.fascia-t { fill:#04121f; font-size:13px; font-weight:700; }
.giorni { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.giorni a { padding:8px 14px; border-radius:999px; border:1px solid var(--riga); text-decoration:none; color:var(--tenue); }
.giorni a.attiva { background:var(--blu); color:#04121f; border-color:var(--blu); font-weight:600; }
.giorni a.oggi:not(.attiva) { color:var(--testo); border-color:var(--testo); }
.fasce td, .fasce th { text-align:center; } .fasce input[type=time] { width:auto; }
.leg { display:inline-block; width:14px; height:8px; border-radius:2px; vertical-align:middle; margin-left:8px; }
.leg.l1 { background:var(--azzurro); } .leg.l2 { background:var(--blu); } .leg.l3 { background:var(--giallo); }
.leg.l4 { background:var(--azzurro); } .leg.l5 { background:#2c6d4a; }

/* ---- grafico del vento ---- */
.grafico { width:100%; max-width:760px; height:auto; display:block; }
.gr-riga { stroke:#1d3a57; } .gr-asse { fill:var(--tenue); font-size:11px; }
.gr-soglia { stroke:var(--giallo); stroke-dasharray:6 5; stroke-width:1.5; }
.gr-vento { fill:none; stroke:var(--azzurro); stroke-width:2.5; }
.gr-raffica { fill:none; stroke:var(--blu); stroke-width:2; stroke-dasharray:3 3; }
.gr-sopra { fill:var(--giallo); }

/* ---- allarmi ---- */
.grave { padding:12px 14px; border-radius:10px; background:#3a1719; border-left:4px solid var(--rosso); }
.grave.avviso { background:#3a2e12; border-left-color:var(--giallo); } .grave.manutenzione { background:#13304a; border-left-color:var(--blu); }
.ok-t b { color:var(--verde); }
.tag-g { font-size:11px; text-transform:uppercase; padding:1px 6px; border-radius:4px; background:#3a1719; color:var(--rosso); }
.tag-g.avviso { background:#3a2e12; color:var(--giallo); } .tag-g.manutenzione { background:#13304a; color:var(--blu); }

@media (max-width: 900px) { .cruscotto { grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 560px) {
  .scorre { overflow-x:auto; } .scorre .settimana { min-width:680px; }
  th.chi, td.chi { display:none; }
  .fasce, .fasce tbody { display:block; } .fasce tr:first-child { display:none; }
  .fasce tr { display:grid; grid-template-columns:34px 1fr 1fr; gap:6px 10px; align-items:center; padding:10px 0;
              border-bottom:1px solid var(--riga); }
  .fasce td { border:0; padding:0; text-align:left; }
  .fasce td.n { font-weight:700; font-size:18px; grid-row:span 2; }
  .fasce td.att::after { content:" attiva"; } .fasce td.fc::after { content:" freecooling"; }
  .fasce td.gradi::after { content:" °C"; }
  .fasce td.dalle::before { content:"dalle "; color:var(--tenue); font-size:13px; }
  .fasce td.alle::before { content:"alle "; color:var(--tenue); font-size:13px; }
  .fasce td.dalle, .fasce td.alle { display:flex; flex-direction:column; }
  .fasce td.att, .fasce td.fc { display:flex; gap:6px; align-items:center; color:var(--tenue); }
  .fasce tr > td.att { grid-column:2; grid-row:1; } .fasce tr > td.fc { grid-column:3; grid-row:1; }
  .fasce tr > td.dalle { grid-column:2; grid-row:2; } .fasce tr > td.alle { grid-column:3; grid-row:2; }
  .fasce tr > td.gradi { grid-column:2 / 4; grid-row:3; }

  .cruscotto { grid-template-columns:1fr 1fr; gap:10px; } .quadro { padding:12px; }
  .verde-t { font-size:21px; } .doppio { gap:10px; }
  .bottoni button { width:100%; } .bottoni form { flex:1 1 100%; }
  .scelta { min-width:0; flex:1 1 40%; }
  .testata nav { gap:12px; font-size:15px; }
}