/* Esempi "come lo SCADA" su desktop: cruscotto a griglia con il digital twin al centro (vedi operatore.js) */
@media(min-width:1200px){
  body.operatore .example-hero{min-height:0!important;padding:118px 0 0!important;box-shadow:none;background:none!important}
  body.operatore .example-hero:before,body.operatore .example-hero:after{display:none}
  body.operatore .example-hero .container{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;width:min(var(--max),calc(100% - 40px))}
  body.operatore .example-hero .breadcrumbs,body.operatore .example-hero .esempi-tab{display:none}
  body.operatore .example-hero .eyebrow{grid-column:1;grid-row:1}
  body.operatore .example-hero .display{grid-column:1;grid-row:2;font-size:clamp(1.8rem,2.4vw,2.4rem);margin:.15em 0 .2em}
  body.operatore .example-hero .lead{grid-column:1/-1;grid-row:3;font-size:1rem;max-width:900px;margin:0}
  .op-torna{grid-column:2;grid-row:2;align-self:center;white-space:nowrap}
  body.operatore .example-stage{width:min(var(--max),calc(100% - 40px));margin:28px auto 40px;display:grid;gap:16px;
    grid-template-columns:250px minmax(0,1fr) 250px;
    grid-template-areas:"alto alto alto" "sx centro dx" "sotto sotto sotto";grid-template-rows:auto minmax(540px,620px) auto}
  body.operatore .stage-canvas{grid-area:centro;height:auto;min-height:0;border-radius:18px;align-self:stretch}
  body.operatore .example-stage>:not(.stage-canvas):not(.op-zona){display:none}
  .op-zona{display:flex;flex-direction:column;gap:16px;min-width:0}
  .op-alto{grid-area:alto}.op-sx{grid-area:sx}.op-dx{grid-area:dx}.op-sotto{grid-area:sotto}
  .op-sotto{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
  .op-sotto>*{grid-column:span 1;margin:0!important}
  .op-sotto>.span-2{grid-column:span 2}
  .op-sotto>.card-previsione,.op-sotto>.card-giornata,.op-sotto>.card-roadmap{grid-column:1/-1}
  .op-zona [data-op]{padding:18px 20px;gap:12px}
  .op-sx [data-op],.op-dx [data-op]{flex:none}
  .op-sx>:last-child,.op-dx>:last-child{flex:1 0 auto}
  .op-sx,.op-dx{overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;padding-right:2px}
  .op-zona [data-op] h3{font-size:.95rem;letter-spacing:.02em}
  .op-sx .panel-note,.op-dx .panel-note{display:none}
  .op-zona .panel-values{gap:8px}
  .op-zona .panel-values div{padding:9px 10px}
  .op-zona .panel-values strong{font-size:1.15rem}
  .op-zona .panel-commands{gap:6px}
  .op-zona .cmd{padding:8px 12px;font-size:.86rem}
  .op-zona .energia-righe li{font-size:.76rem}
  .op-alto .card-coltura{grid-template-columns:auto minmax(0,1fr) auto;gap:24px;padding:14px 22px}
  .op-alto .coltura-nome strong{font-size:1.1rem}
  .op-alto .coltura-set{flex-wrap:nowrap}

  /* colonne laterali compatte: oggetti piu' piccoli */
  .op-sx [data-op],.op-dx [data-op]{padding:13px 14px;gap:9px;border-radius:14px}
  .op-sx,.op-dx{gap:12px}
  .op-sx [data-op] h3,.op-dx [data-op] h3{font-size:.82rem}
  .op-sx .panel-values,.op-dx .panel-values{gap:6px}
  .op-sx .panel-values div,.op-dx .panel-values div{padding:6px 8px;border-radius:9px}
  .op-sx .panel-values small,.op-dx .panel-values small{font-size:.56rem;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .op-sx .panel-values strong,.op-dx .panel-values strong{font-size:.98rem}
  .op-sx .vpd-stato{font-size:.66rem}
  .op-sx .panel-commands{gap:4px}
  .op-sx .cmd{padding:5px 9px;font-size:.76rem;border-radius:9px}
  .op-sx .cmd i{width:30px;height:17px}
  .op-sx .cmd i:after{width:11px;height:11px;top:3px;left:3px}
  .op-sx .cmd[aria-pressed="true"] i:after{transform:translateX(13px)}
  .op-sx .cmd-auto input{width:15px;height:15px}
  .op-dx .gauge{gap:4px}
  .op-dx .gauge-head{font-size:.76rem}
  .op-dx .gauge-bar{height:7px}
  .op-dx .gauge small{font-size:.66rem}
  .op-dx .irr-dati{gap:6px}
  .op-dx .irr-dati div{padding:6px 8px}
  .op-dx .irr-dati dt{font-size:.56rem}
  .op-dx .irr-dati dd{font-size:.86rem}
  .op-dx .irr-ora{padding:7px 10px;font-size:.76rem}
  .op-dx .energia-valori{grid-template-columns:repeat(3,1fr)}
  .op-dx .energia-valori strong{font-size:.86rem}
  .op-dx .energia-righe{gap:4px}
  .op-dx .energia-righe li{grid-template-columns:1fr 34px auto;font-size:.66rem;column-gap:6px}
  .op-dx .e-prev{font-size:.6rem}

  /* etichette sul 3D discrete: l'impianto resta in primo piano */
  body.operatore .stage-label{background:rgba(7,16,29,.32);border-color:rgba(255,255,255,.10);backdrop-filter:blur(3px);padding:5px 8px;font-size:.7rem;gap:1px}
  body.operatore .stage-label b{font-size:.58rem;color:rgba(127,224,255,.85)}
  body.operatore .stage-label span{color:rgba(233,238,244,.85)}
  body.operatore .stage-badge{background:rgba(7,16,29,.4);font-size:.74rem}

  .op-sx [data-op],.op-dx [data-op]{font-size:.86rem}
  .op-sx .barre li,.op-dx .barre li,.op-sx .dispositivi,.op-dx .dispositivi,.op-sx .manutenzione small,.op-dx .manutenzione small{font-size:.74rem}
  .op-sx .stato-grande strong,.op-dx .stato-grande strong{font-size:1.1rem}
  .op-sx .anomalia p,.op-dx .anomalia p{font-size:.76rem}
  .op-sx .irr-dati,.op-dx .irr-dati{grid-template-columns:1fr 1fr}
  .op-sx .drone-card,.op-dx .drone-card{padding:8px 10px}
  .op-sx .pianifica-riga{flex-direction:column;gap:6px}
  .op-sx .ws-log,.op-dx .ws-log{font-size:10px}
  .op-sx .coda-cassetti div,.op-dx .coda-cassetti div{min-height:0}

  .op-dx .energia-valori div,.op-sx .energia-valori div{padding:6px 6px}
  .op-dx .energia-valori small,.op-sx .energia-valori small{font-size:.5rem}
  .op-dx .energia-valori strong,.op-sx .energia-valori strong{font-size:.78rem}

  /* indicatori in alto piu' bassi, pulsanti del 3D in basso per non coprire lo stato */
  .op-alto .kpi-riga{margin:0;width:auto;gap:12px}
  .op-alto .kpi{padding:12px 16px;border-radius:14px}
  .op-alto .kpi strong{font-size:1.45rem}
  .op-alto .kpi-oee strong{font-size:1.7rem}
  .op-alto .kpi span,.op-alto .dpq{font-size:.74rem}
  body.operatore .stage-azioni,body.operatore .stage-viste{top:auto;bottom:14px;right:14px}
  body.operatore .stage-azioni .btn{padding:6px 11px;font-size:.74rem}
  body.operatore .stage-viste button{padding:5px 10px;font-size:.74rem}
  body.operatore .stage-legenda{display:none}
}

/* Tablet e telefono: intestazione compatta come su desktop (titolo e pulsante per tornare, niente linguette),
   il 3D subito sotto e i pannelli uno dopo l'altro */
@media(max-width:1199px){
  body.esempio .example-hero{min-height:0!important;padding:100px 0 6px!important}
  body.esempio .example-hero .breadcrumbs,body.esempio .example-hero .esempi-tab{display:none}
  body.esempio .example-hero .container{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px;align-items:end}
  body.esempio .example-hero .eyebrow{grid-column:1/-1}
  body.esempio .example-hero .display{grid-column:1;font-size:clamp(2rem,5.4vw,3rem);margin:.15em 0 .25em}
  body.esempio .example-hero .lead{grid-column:1/-1;font-size:1rem;margin:0}
  body.esempio .op-torna{grid-column:2;grid-row:2;align-self:center;white-space:nowrap}
  body.esempio .example-stage{margin-top:18px}
  body.esempio .stage-canvas{height:min(62vh,540px);min-height:380px}
}
@media(max-width:680px){
  body.esempio .example-hero{padding-top:92px!important}
  body.esempio .example-hero .container{grid-template-columns:1fr}
  body.esempio .op-torna{grid-column:1;grid-row:auto;justify-self:start;margin:4px 0 12px;padding:8px 14px;font-size:.85rem}
  body.esempio .example-hero .lead{font-size:.95rem}
  body.esempio .stage-canvas{height:340px;min-height:0}
  body.esempio .stage-azioni,body.esempio .stage-viste{top:auto;bottom:10px;left:auto;right:10px;max-width:calc(100% - 20px);flex-wrap:wrap;justify-content:flex-end}
  body.esempio .stage-azioni .btn,body.esempio .stage-viste button{padding:6px 10px;font-size:.74rem}
}
/* etichette sul 3D discrete anche su tablet e telefono; sul telefono piu' piccole e senza le secondarie */
@media(max-width:1199px){
  body.esempio .stage-label{background:rgba(7,16,29,.4);border-color:rgba(255,255,255,.10);backdrop-filter:blur(3px);padding:5px 8px;font-size:.7rem;gap:1px}
  body.esempio .stage-label b{font-size:.58rem}
}
@media(max-width:680px){
  body.esempio .stage-label{padding:3px 6px;font-size:.6rem;border-radius:7px}
  body.esempio .stage-label b{font-size:.5rem;letter-spacing:.06em}
  body.esempio .stage-label.secondaria{display:none}
  body.esempio .stage-badge{font-size:.66rem;padding:5px 9px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* linea e centrale hanno molte etichette vicine: sul telefono si leggono nei pannelli sotto il 3D */
@media(max-width:680px){body.esempio.page-linea:not(.page-cnc) .stage-label,body.esempio.page-centrale .stage-label{display:none}}
/* i pulsanti sul 3D (rompi l'utensile, ordine urgente, viste) stanno in basso anche su tablet e telefono, cosi' non coprono lo stato */
@media(max-width:1199px){body.esempio .stage-canvas .stage-azioni,body.esempio .stage-canvas .stage-viste{position:absolute!important;padding:0;top:auto!important;bottom:12px!important;right:12px!important;left:auto!important;max-width:calc(100% - 24px);flex-wrap:wrap;justify-content:flex-end}}

/* pulsante sul 3D che nasconde le etichette con le misure */
body.esempio .stage-occhio{position:absolute;top:14px;right:14px;z-index:5;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(7,16,29,.55);backdrop-filter:blur(4px);color:#c3d0de;font:inherit;font-size:.74rem;line-height:1;cursor:pointer;transition:color .15s,border-color .15s}
body.esempio .stage-occhio:hover{color:#fff;border-color:rgba(127,224,255,.45)}
body.esempio .stage-occhio:focus-visible{outline:2px solid #7fe0ff;outline-offset:2px}
body.esempio .stage-occhio svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body.esempio .stage-occhio[aria-pressed="true"]{color:#7fe0ff;border-color:rgba(127,224,255,.4)}
body.esempio .stage-canvas.etichette-nascoste .stage-label{display:none!important}
@media(max-width:680px){body.esempio .stage-occhio{top:10px;right:10px;padding:6px 9px;font-size:0;gap:0}body.esempio .stage-occhio svg{width:17px;height:17px}}
@media(max-width:680px){body.esempio.page-linea:not(.page-cnc) .stage-occhio,body.esempio.page-centrale .stage-occhio{display:none}}
/* la nota sull'AI sotto il testo dell'intestazione, a tutta riga */
body.operatore .example-hero .ai-nota{grid-column:1/-1;grid-row:4;margin-top:.7rem;font-size:.92rem}
body.esempio .example-hero .ai-nota{grid-column:1/-1}