/* Componenti del pannello. Richiede tokens.css. Niente ombre, niente angoli arrotondati sui pannelli. */
*,*::before,*::after{box-sizing:border-box}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.etichetta{font-size:var(--t-etichetta);font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-etichetta);color:var(--testo-3);line-height:1.3}
.dettaglio{font-size:var(--t-dettaglio);color:var(--testo-3)}
@keyframes entra{from{opacity:0;transform:translateY(var(--y-ingresso))}to{opacity:1;transform:none}}
a{color:inherit}
:focus-visible{outline:2px solid var(--arancio);outline-offset:2px}

/* pannello con parentesi agli angoli */
.pannello{position:relative;padding:var(--s4);border:1px solid var(--bordo);background:transparent;
  animation:entra var(--d-ingresso) var(--ease) both;animation-delay:var(--ritardo,0ms)}
.pannello::before,.pannello::after{content:"";position:absolute;width:var(--parentesi);height:var(--parentesi);pointer-events:none;
  border:0 solid var(--parentesi-colore)}
.pannello::before{top:-1px;left:-1px;border-top-width:1px;border-left-width:1px}
.pannello::after{bottom:-1px;right:-1px;border-bottom-width:1px;border-right-width:1px}
.pannello>.etichetta{margin-bottom:var(--s3)}
.pannello--tocca{border-color:var(--tocca-bordo);background:var(--tocca-sfondo)}
.pannello--tocca::before,.pannello--tocca::after{border-color:var(--arancio)}
.separatore{border:0;border-top:1px solid var(--bordo);margin:var(--s3) 0}

/* numero */
.numero{font-variant-numeric:tabular-nums;white-space:nowrap}
.numero--grande{font-size:var(--t-numero);font-weight:800;letter-spacing:var(--ls-numero);line-height:1.1}
.freccia{font-size:.7em;margin-right:.3em;vertical-align:.08em}
.freccia--su{color:var(--verde)}.freccia--giu{color:var(--rosa)}

/* dato non disponibile */
.dnd{display:flex;flex-direction:column;gap:2px}
.dnd-testo{font-size:var(--t-titolo);font-weight:700;color:var(--testo-2)}
.dnd-ts{font-size:var(--t-dettaglio);color:var(--testo-3)}

/* nastro del testo */
.nastro-testo{display:block;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:clip}
.nastro-pista{display:inline-flex;width:max-content}
.nastro-copia{flex:none;white-space:nowrap}
.nastro-copia--bis{margin-left:var(--stacco-nastro)}
.nastro-scorre .nastro-pista{animation:nastro-scorri var(--nastro-durata) linear infinite;will-change:transform}
.nastro-scorre:hover .nastro-pista,.nastro-scorre:active .nastro-pista,.nastro-scorre:focus-within .nastro-pista{animation-play-state:paused}
@keyframes nastro-scorri{to{transform:translateX(calc(-1 * var(--nastro-passo)))}}
.nastro-a-capo{white-space:normal;overflow:visible}
.nastro-a-capo .nastro-pista{display:block;width:auto}
.nastro-a-capo .nastro-copia{white-space:normal;overflow-wrap:anywhere}
@media (prefers-reduced-motion:reduce){
  .nastro-testo{white-space:normal;overflow:visible}
  .nastro-pista{display:block;width:auto}.nastro-copia{white-space:normal;overflow-wrap:anywhere}.nastro-copia--bis{display:none}
}

/* mappa orbitale */
.mappa-orbitale{display:block;flex:none;overflow:visible}
.mo-shuttle{transform-origin:60px 60px;animation:orbita var(--d-orbita) linear infinite}
@keyframes orbita{to{transform:rotate(360deg)}}

/* telemetria ad aghi */
.aghi{display:block}
.aghi-corpo{position:relative;display:flex;height:calc(var(--aghi-meta) * 2)}
.aghi-zero{position:absolute;left:0;right:0;top:var(--aghi-meta);height:1px;
  background:repeating-linear-gradient(to right,rgba(255,255,255,.28) 0 1px,transparent 1px 4px)}
.aghi-col{position:relative;flex:1;display:flex;justify-content:center}
.ago{position:absolute;width:6px;border-radius:3px;animation:ago-cresci var(--d-aghi) var(--ease) both;animation-delay:var(--ritardo,0ms)}
.ago--su{bottom:var(--aghi-meta);background:linear-gradient(to bottom,#FF6B2C,#8B5CF6);transform-origin:50% 100%}
.ago--giu{top:var(--aghi-meta);background:linear-gradient(to bottom,#8B5CF6,#5A3E9E);transform-origin:50% 0}
.ago-punto{position:absolute;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#fff}
.ago--su .ago-punto{top:-8px}.ago--giu .ago-punto{top:-8px}
@keyframes ago-cresci{from{transform:scaleY(0)}}
.aghi-mesi{display:flex;margin-top:var(--s2)}
.aghi-mesi span{flex:1;white-space:nowrap;text-align:center;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--testo-3)}

/* scala della banda */
.scala-banda{display:flex;align-items:center;gap:var(--s2);height:20px}
.sb-estremo{flex:none;font-size:9.5px;color:var(--testo-3);min-width:2.2em}
.sb-estremo:last-child{text-align:right}
.sb-asse{position:relative;flex:1;height:20px}
.sb-linea{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--bordo-forte)}
.sb-tacca{position:absolute;top:50%;width:1px;transform:translate(-50%,-50%);background:var(--bordo-forte)}
.sb-tacca--estremo{height:9px}
.sb-tacca--obiettivo{height:14px;width:1px;background:#fff}
.sb-punto{position:absolute;top:50%;left:var(--pos);width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;
  animation:assesta var(--d-punti) var(--ease) var(--r-punti) both}
@keyframes assesta{from{left:0}}

/* scala del freno */
.scala-freno{display:block}
.sf-asse{position:relative;height:34px}
.sf-linea{position:absolute;left:0;right:0;top:9px;height:1px;background:var(--bordo-forte)}
.sf-percorso{position:absolute;left:0;top:8.5px;height:2px;width:var(--pos);background:linear-gradient(to right,var(--verde),var(--viola));
  transform-origin:0 50%;animation:riempi-x var(--d-punti) var(--ease) var(--r-punti) both}
.sf-tacca{position:absolute;top:9px;width:1px;height:7px;transform:translate(-50%,-50%);background:var(--spento)}
.sf-tacca--ambra{height:11px;background:var(--ambra)}.sf-tacca--rosa{height:11px;background:var(--rosa)}
.sf-nome{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;white-space:nowrap}
.sf-tacca--ambra .sf-nome{color:var(--ambra)}.sf-tacca--rosa .sf-nome{color:var(--rosa)}
.sf-punto{position:absolute;top:9px;left:var(--pos);width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff;
  animation:assesta var(--d-punti) var(--ease) var(--r-punti) both}
.sf-estremi{display:flex;justify-content:space-between;font-size:9.5px;color:var(--testo-3)}
@keyframes riempi-x{from{transform:scaleX(0)}}

/* cinque punti */
.cinque-punti{display:inline-flex;gap:6px;vertical-align:middle}
.punto{width:12px;height:12px;border-radius:50%;border:1px solid transparent}
.punto--si{background:var(--arancio);border-color:var(--arancio)}
.punto--no{border-color:var(--bordo-forte)}
.punto--fase2{border:1px dashed var(--spento)}

/* arco */
.arco{display:inline-flex;flex-direction:column;align-items:center;gap:var(--s1);width:100px}
.arco-svg{width:100px;height:100px;display:block}
.arco-valore--verde{stroke:var(--verde)}.arco-valore--ambra{stroke:var(--ambra)}.arco-valore--rosa{stroke:var(--rosa)}
.arco-valore{animation:arco-riempi var(--d-barre) var(--ease) both}
@keyframes arco-riempi{from{stroke-dasharray:0 var(--arco-C)}}
.arco-dettaglio{font-size:var(--t-dettaglio);color:var(--testo-3)}

/* striscia dei ping */
.striscia-ping{display:flex;gap:2px;width:100%}
.segmento{flex:1;height:6px;min-width:0;background:var(--traccia);transform-origin:50% 100%;animation:ago-cresci var(--d-barre) var(--ease) both}
.segmento--ok{background:var(--verde)}.segmento--ko{background:var(--rosa)}.segmento--ora{background:#fff}

/* barra spesa */
.barra-spesa{position:relative;height:8px;background:rgba(255,255,255,.08);overflow:visible}
.bs-l1,.bs-l2{position:absolute;top:0;bottom:0;transform-origin:0 50%;animation:riempi-x var(--d-barre) var(--ease) both}
.bs-l1{left:0;background:var(--viola)}.bs-l2{background:var(--viola-2)}
.bs-avviso{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:var(--ambra)}

/* nastro di registro */
.nastro-registro{list-style:none;margin:0;padding:0}
.voce-registro{position:relative;display:grid;grid-template-columns:40px 20px minmax(0,1fr) auto;column-gap:var(--s2);align-items:start;
  padding:var(--s2) 0;animation:entra var(--d-ingresso) var(--ease) both;animation-delay:var(--ritardo,0ms)}
.voce-registro::before{content:"";position:absolute;left:calc(40px + var(--s2) + 10px);top:0;bottom:0;width:1px;background:var(--bordo)}
.vr-ora{font-size:var(--t-dettaglio);font-weight:600;color:var(--testo-3);padding-top:2px}
.vr-segno{position:relative;z-index:1;justify-self:center;margin-top:4px;border-radius:50%;background:var(--spento);box-shadow:0 0 0 2px var(--fondo);width:7px;height:7px}
.voce--eseguito .vr-segno,.voce--ok .vr-segno{background:var(--verde)}
.voce--aspetta .vr-segno{background:var(--arancio)}
.voce--deviazione .vr-segno{background:var(--ambra)}
.voce--adr .vr-segno{background:var(--viola)}
.voce--sistema .vr-segno{border-radius:0;background:var(--spento);width:6px;height:6px}
.vr-titolo{font-size:13px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.vr-dettaglio{font-size:var(--t-dettaglio);color:var(--testo-3);margin-top:2px}
.vr-esito{font-size:var(--t-dettaglio);font-weight:700;color:var(--testo-2);white-space:nowrap;padding-top:2px}
.esito--ok{color:var(--verde)}.esito--ko{color:var(--rosa)}.esito--avviso{color:var(--ambra)}

/* pulsanti e chip */
.pulsante,.chip{font:inherit;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;transition:transform 120ms var(--ease),background-color 120ms,border-color 120ms}
.pulsante{min-height:var(--tattile);min-width:var(--tattile);padding:0 var(--s4);border-radius:var(--raggio-pulsante);font-size:var(--t-titolo);font-weight:700;
  background:transparent;border:1px solid var(--bordo-forte);color:var(--testo)}
.pulsante--principale{background:var(--arancio);border-color:var(--arancio);color:var(--su-arancio)}
.pulsante--principale:hover{background:var(--arancio-hover);border-color:var(--arancio-hover)}
.pulsante:active,.chip:active{transform:scale(.97)}
.chip{position:relative;height:32px;min-width:var(--tattile);padding:0 var(--s3);background:transparent;border:1px solid var(--bordo-forte);border-radius:var(--raggio-pulsante);
  font-size:12px;font-weight:600;color:var(--testo-2);white-space:nowrap}
.chip::after{content:"";position:absolute;left:0;right:0;top:-7px;bottom:-7px} /* area tattile 44 px */
.chip--attivo{border-color:var(--arancio);color:var(--arancio)}

/* navigazione inferiore */
.navigazione{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--bordo);background:var(--fondo)}
.nav-voce{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:var(--tattile-nav);padding:8px 0;
  color:var(--testo-3);text-decoration:none;border-top:2px solid transparent;margin-top:-1px}
.nav-etichetta{font-size:var(--t-nav);font-weight:600;letter-spacing:.04em;line-height:1}
.nav-voce--attiva{color:var(--arancio);border-top-color:var(--arancio)}
.nav-icona{flex:none}