/* Pagine "Esempi" con la scena 3D */
.page-example{--serie-temperatura:#d95926;--serie-umidita:#3987e5;--serie-acqua:#199e70;--chart-surface:#101a2b}
.example-hero{padding-bottom:30px}
.example-stage{width:min(var(--max),calc(100% - 32px));margin:56px auto 90px;display:grid;gap:18px}
.stage-canvas{position:relative;height:min(68vh,640px);min-height:420px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:radial-gradient(circle at 50% 35%,#1a2b44,#0a1220 70%)}
.stage-canvas canvas{display:block;width:100%;height:100%;position:absolute;inset:0;touch-action:none;cursor:grab}
.stage-canvas canvas:active{cursor:grabbing}
.stage-fallback{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;color:var(--muted)}
.stage-label{position:absolute;left:0;top:0;pointer-events:none;display:grid;gap:2px;padding:8px 11px;margin:-20px 0 0 14px;border:1px solid rgba(154,215,227,.35);border-radius:10px;background:rgba(7,16,29,.78);backdrop-filter:blur(6px);font-size:.78rem;color:#d8e4f0;white-space:nowrap;opacity:0;transition:opacity .4s}
.stage-label b{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan)}
.is-ready .stage-label{opacity:1}
.stage-label.is-hidden{opacity:0}
.stage-label.is-left{translate:calc(-100% - 28px) 0}
.stage-badge{position:absolute;left:16px;top:16px;display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(7,16,29,.7);font-size:.82rem;font-weight:650}
.stage-badge em{font-style:normal;color:var(--amber)}
.stage-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stage-card{border:1px solid var(--line);border-radius:18px;padding:22px;background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.015));display:flex;flex-direction:column;gap:16px}
.stage-card h3{margin:0;font-size:1.05rem}
.stage-card h3 small{color:var(--muted);font-weight:500}
.card-previsione{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.card-previsione .chart-table{grid-column:1/-1}
.prev-meteo,.prev-serra{display:flex;flex-direction:column;gap:12px;min-width:0}
.prev-serra{border-left:1px solid var(--line);padding-left:28px}
.panel-values{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.panel-values div{border:1px solid var(--line);border-radius:12px;padding:12px}
.panel-values small{display:block;color:var(--muted);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
.panel-values strong{font-size:1.4rem;font-weight:600;white-space:nowrap}
.vpd-stato{display:block;font-size:.78rem;color:#c3d0de;margin-top:2px}
.panel-commands{display:grid;gap:10px}
.cmd{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03);color:inherit;font:inherit;cursor:pointer;text-align:left}
.cmd i{width:38px;height:22px;border-radius:11px;background:#2a3a50;position:relative;transition:background .25s;flex:none}
.cmd i:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#dfe8f2;transition:transform .25s}
.cmd[aria-pressed="true"] i{background:#3cc88f}
.cmd[aria-pressed="true"] i:after{transform:translateX(16px)}
.cmd:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.cmd-auto{justify-content:flex-start;cursor:pointer}
.cmd-auto input{accent-color:#3cc88f;width:18px;height:18px}
.panel-note{margin:0;font-size:.82rem;color:var(--muted);line-height:1.55}
.gauge{display:grid;gap:6px}
.gauge-head{display:flex;justify-content:space-between;font-size:.88rem}
.gauge-bar{position:relative;height:10px;border-radius:5px;background:#1d2a3d;overflow:hidden}
.gauge-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--serie-acqua);transition:width .8s}
.gauge-band{position:absolute;top:0;bottom:0;border-left:2px solid rgba(255,255,255,.5);border-right:2px solid rgba(255,255,255,.5)}
.gauge small{color:var(--muted);font-size:.76rem}
.irr-dati{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
.irr-dati div{border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.irr-dati dt{color:var(--muted);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
.irr-dati dd{margin:2px 0 0;font-weight:650}
.irr-ora{justify-content:center}
.mini-chart{margin:0}
.mini-chart figcaption{font-size:.8rem;color:#c3d0de;margin-bottom:4px}
.mini-chart svg{display:block;width:100%;height:120px;overflow:visible;touch-action:none}
.mini-chart .grid{stroke:rgba(255,255,255,.08);stroke-width:1}
.mini-chart .ax{fill:#8f9fb2;font-size:11px}
.mini-chart .cross{stroke:rgba(255,255,255,.35);stroke-width:1}
.chart-tip{position:absolute;right:22px;top:16px;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;max-width:min(560px,90%);padding:6px 12px;border:1px solid var(--line);border-radius:10px;background:#0b1424;font-size:.82rem;z-index:2}
.chart-tip i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
.chart-table summary{cursor:pointer;color:var(--cyan);font-size:.85rem}
.chart-table table{width:100%;border-collapse:collapse;margin-top:10px;font-size:.84rem}
.chart-table th,.chart-table td{padding:5px 8px;border-bottom:1px solid var(--line);text-align:left}
@media(max-width:1250px){.stage-cards{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.stage-label.secondaria{display:none}.stage-cards{grid-template-columns:1fr}.stage-canvas{height:420px}.stage-label{font-size:.7rem;padding:6px 8px}.chart-tip{position:static;align-self:flex-start}}

.stage-canvas{background:#0c1626}
.card-coltura{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;background:linear-gradient(120deg,rgba(213,81,129,.12),rgba(255,255,255,.02) 45%)}
.coltura-nome{display:grid;gap:2px}
.coltura-nome small,.coltura-set dt{color:var(--muted);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
.coltura-nome strong{font-size:1.35rem}
.coltura-nome span{color:#c3d0de;font-size:.88rem}
.coltura-ciclo{display:grid;gap:8px}
.coltura-ciclo .gauge-bar i{background:linear-gradient(90deg,#199e70,#d55181)}
.coltura-set{display:flex;gap:10px;margin:0;flex-wrap:wrap}
.coltura-set div{border:1px solid var(--line);border-radius:10px;padding:7px 10px}
.coltura-set dd{margin:2px 0 0;font-weight:650;white-space:nowrap}
.mini-chart svg{height:92px}
.prev-timeline{margin:0}
.prev-timeline svg{display:block;width:100%;overflow:visible;touch-action:none}
.prev-timeline .lbl{fill:#d8e4f0;font-size:12px}
.prev-timeline .binario{fill:rgba(255,255,255,.04)}
.prev-timeline .ax,.mini-chart .ax{fill:#8f9fb2;font-size:11px}
.prev-timeline .cross{stroke:rgba(255,255,255,.45);stroke-width:1}
.prev-fatti{margin:0;padding-left:18px;display:grid;gap:6px;font-size:.88rem;color:#d8e4f0;line-height:1.5}
.prev-totali{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0}
.prev-totali div{border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.prev-totali dt{color:var(--muted);font-size:.66rem;letter-spacing:.07em;text-transform:uppercase}
.prev-totali dd{margin:2px 0 0;font-weight:650}
@media(max-width:1000px){.card-previsione{grid-template-columns:1fr}.prev-serra{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:20px}.card-coltura{grid-template-columns:1fr}.prev-totali{grid-template-columns:repeat(2,1fr)}}
.energia-valori{grid-template-columns:1fr 1fr 1fr}
.energia-valori strong{font-size:1.15rem}
.energia-righe{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.energia-righe li{display:grid;grid-template-columns:1fr 54px auto;grid-template-areas:"nome barra ora" "nome barra prev";column-gap:10px;align-items:center;font-size:.8rem;color:#8f9fb2}
.energia-righe li.on{color:#d8e4f0}
.e-nome{grid-area:nome;display:flex;align-items:center;gap:7px}
.e-nome i{width:9px;height:9px;border-radius:3px;flex:none}
.e-barra{grid-area:barra;height:6px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden}
.e-barra b{display:block;height:100%;border-radius:3px;transition:width .6s}
.e-ora{grid-area:ora;text-align:right;font-weight:650}
.e-prev{grid-area:prev;text-align:right;font-size:.72rem;color:#8f9fb2}
.chart-tip[hidden]{display:none}
.card-previsione .chart-tip{top:auto;bottom:16px}
@media(max-width:680px){.example-stage{margin-top:32px}}
.esempi-tab{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 26px}
.esempi-tab a{padding:7px 14px;border:1px solid var(--line);border-radius:999px;font-size:.84rem;color:#c3d0de;background:rgba(255,255,255,.03)}
.esempi-tab a:hover{border-color:rgba(84,216,240,.45);color:#fff}
.esempi-tab a[aria-current="page"]{background:rgba(84,216,240,.14);border-color:rgba(84,216,240,.6);color:#fff;font-weight:650}
.crescita-head{margin-top:6px}
.coltura-ciclo .crescita-bar i{background:linear-gradient(90deg,#199e70,#7bd88f)}
.crescita-nota{color:var(--muted);font-size:.74rem}

/* modalita' incorporata (?embed): solo il digital twin, per l'hero della home */
html.embed,html.embed body{background:#0c1626;overflow:hidden}
html.embed body>*:not(main),html.embed main>*:not(.example-stage),html.embed .example-stage>*:not(.stage-canvas){display:none!important}
html.embed .example-stage{width:100%;margin:0;display:block}
html.embed .stage-canvas{height:100vh;min-height:0;border:0;border-radius:0}
html.embed .stage-label.secondaria,html.embed .stage-legenda{display:none}
html.embed .stage-badge{left:12px;top:12px;font-size:.74rem}
html.embed .stage-azioni,html.embed .stage-viste{top:12px;right:12px}
/* come sfondo della hero: solo l'impianto e le sue etichette */
html.sfondo .stage-badge,html.sfondo .stage-azioni,html.sfondo .stage-viste{display:none!important}