/* =====================================================================
   MadHour · Gestionale — Sentinella (dalla 3.10.0)
   La sala di controllo resta scura anche nel tema chiaro: è un posto
   di guardia. Il quadrante delle 24 ore è l'orologio di MadHour.
   ===================================================================== */
.sx{--sx-bg:#0A1120;--sx-tile:rgba(255,255,255,.035);--sx-tile2:rgba(255,255,255,.06);--sx-line:rgba(255,255,255,.085);--sx-line2:rgba(255,255,255,.16);
  --sx-ink:#fff;--sx-ink2:rgba(255,255,255,.82);--sx-mute:rgba(255,255,255,.6);--sx-faint:rgba(255,255,255,.36);
  --sx-ok:#34D399;--sx-warn:#FFB703;--sx-ko:#FB7185;--sx-att:#FF7F11;--sx-dig:#C084FC;
  position:relative;isolation:isolate;margin-bottom:18px;padding:20px 22px;border-radius:var(--r-lg);color:var(--sx-ink);
  background:var(--sx-bg);border:1px solid var(--sx-line);overflow:hidden}
.sx::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 18% 12%,rgba(147,51,234,.16),transparent 55%),radial-gradient(80% 70% at 92% 100%,rgba(255,127,17,.1),transparent 60%)}
.sxTop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.sxTit{display:flex;align-items:center;gap:12px;margin-right:auto;min-width:0}
.sxTit b{font-size:18px;font-weight:800;letter-spacing:-.01em}
.sxGuardia{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;color:var(--sx-mute);padding:5px 10px;border-radius:6px;background:var(--sx-tile2)}
.sxGuardia i{width:8px;height:8px;border-radius:50%;background:var(--sx-ok);box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:sxPulsa 2.2s ease-out infinite}
.sxGuardia.ko i{background:var(--sx-ko);box-shadow:none;animation:none}
.sxGuardia.ko{color:#FECDD3}
@keyframes sxPulsa{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}70%{box-shadow:0 0 0 9px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.sx .btn.ghost{color:#fff;box-shadow:inset 0 0 0 1px var(--sx-line2)}
.sx .btn.ghost:hover{background:var(--sx-tile2);box-shadow:inset 0 0 0 1px #fff}
.sxIco{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:8px;border:0;background:var(--sx-tile2);color:#fff;transition:background .2s}
.sxIco:hover{background:rgba(255,255,255,.12)}
.sxIco svg{width:18px;height:18px}

/* il quadrante e lo stato */
.sxCorpo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:22px;align-items:center}
.sxQuad{position:relative;width:100%;max-width:470px;margin:0 auto;aspect-ratio:1}
.sxQuad svg{width:100%;height:100%;display:block;overflow:visible}
.sxQuad .ore text{fill:var(--sx-faint);font-size:10px;font-weight:800;font-family:Manrope,system-ui,sans-serif;text-anchor:middle;dominant-baseline:central}
.sxQuad .ore text.diciotto{fill:var(--tangerine)}
.sxQuad .tacca{stroke:var(--sx-line2);stroke-width:1}
.sxQuad .tacca.h6{stroke:rgba(255,255,255,.32);stroke-width:1.5}
.sxQuad .tacca.diciotto{stroke:var(--tangerine);stroke-width:2.5}
.sxQuad .anello{cursor:pointer;transition:opacity .25s}
.sxQuad svg.fuoco .anello:not(.on),.sxQuad svg.fuoco .ev{opacity:.25}
.sxQuad .anello:focus{outline:none}
.sxQuad .anello:focus-visible circle:first-of-type{stroke:rgba(255,183,3,.35)}
.sxQuad .ev{transition:opacity .25s}
.sxQuad .lancetta{stroke:#fff;stroke-width:2;stroke-linecap:round}
.sxQuad .perno{fill:#fff}
.sxQuad .scia{transform-origin:210px 210px;opacity:0}
.sxQuad.giro .scia{animation:sxGiro 1.8s var(--ease) both}
@keyframes sxGiro{0%{opacity:0;transform:rotate(0)}10%{opacity:1}85%{opacity:.85}100%{opacity:0;transform:rotate(360deg)}}
.sxCentro{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;text-align:center}
.sxCentro b{display:block;font-size:clamp(44px,7vw,74px);font-weight:800;letter-spacing:-.05em;line-height:.9}
.sxCentro small{display:block;font-size:11px;font-weight:800;color:var(--sx-mute);margin-top:8px}
.sxEtichetta{position:absolute;z-index:3;pointer-events:none;transform:translate(-50%,-130%);padding:6px 9px;border-radius:6px;background:#fff;color:var(--prussian);font-size:12px;font-weight:800;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.sxEtichetta small{display:block;font-weight:600;color:#4B5263}

.sxStato h2{font-size:clamp(20px,2.2vw,26px);font-weight:800;letter-spacing:-.02em;line-height:1.2;margin:0 0 8px;max-width:30ch}
.sxStato p{font-size:14px;color:var(--sx-ink2);line-height:1.55;margin:0 0 18px;max-width:52ch}
.sxNumeri{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sxNum{padding:14px 15px;border-radius:10px;background:var(--sx-tile);border:1px solid var(--sx-line);min-width:0}
.sxNum span{display:block;font-size:12px;font-weight:700;color:var(--sx-mute)}
.sxNum b{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-top:5px;font-variant-numeric:tabular-nums}
.sxNum small{display:block;font-size:11.5px;color:var(--sx-faint);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sxNum.ko b{color:var(--sx-ko)} .sxNum.ok b{color:var(--sx-ok)} .sxNum.att b{color:var(--sx-att)}
.sxLegenda{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:14px;font-size:11.5px;font-weight:700;color:var(--sx-mute)}
.sxLegenda span{display:inline-flex;align-items:center;gap:6px}
.sxLegenda i{width:9px;height:9px;border-radius:50%}

/* titoli delle sezioni sotto la sala */
.sxSez{display:flex;align-items:center;gap:10px;margin:22px 2px 10px}
.sxSez h3{font-size:15.5px;font-weight:800;letter-spacing:-.01em;margin:0}
.sxSez .n{font-size:12px;font-weight:800;color:var(--mute)}
.sxSez .sp{flex:1}

/* incidenti */
.sxInc{display:grid;gap:8px}
.sxIncR{--g:var(--warn);position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 16px 14px 18px;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line);overflow:hidden}
.sxIncR::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--g)}
.sxIncR.g5{--g:var(--ko);background:linear-gradient(90deg,var(--ko-soft),transparent 45%),var(--card)}
.sxIncR.g4{--g:var(--tangerine)}
.sxIncR.g3{--g:var(--warn)}
.sxIncR.g2,.sxIncR.g1{--g:var(--faint)}
.sxIncG{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:var(--card2);color:var(--g)}
.sxIncG svg{width:18px;height:18px}
.sxIncR b{display:block;font-size:14px;font-weight:800;line-height:1.35}
.sxIncR p{font-size:12.5px;color:var(--mute);margin:3px 0 0;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sxIncR .az{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.sxAltri{width:100%;margin-top:8px;padding:11px;border-radius:var(--r-lg);border:1px dashed var(--line2);background:transparent;color:var(--mute);font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.sxAltri:hover{color:var(--acc-ink);border-color:var(--acc-ink)}
.modal .otpL{justify-content:flex-start}
.sxPasso p strong{color:var(--ink);font-weight:800}
.sxVuoto{padding:18px 20px;border-radius:var(--r-lg);border:1px dashed var(--line2);color:var(--mute);font-size:13.5px;display:flex;align-items:center;gap:12px}
.sxVuoto svg{width:22px;height:22px;color:var(--ok);flex:none}

/* produzioni */
.sxProd{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.sxP{position:relative;display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line);cursor:pointer;text-align:left;font:inherit;color:inherit;transition:border-color .25s,transform .35s var(--spring)}
.sxP:hover{border-color:var(--line2);transform:translateY(-2px)}
.sxP:focus-visible{outline:none;box-shadow:var(--focus)}
.sxPTesta{display:flex;align-items:flex-start;gap:12px;min-width:0}
.sxPTesta>div{min-width:0;flex:1}
.sxPTesta b{display:block;font-size:15px;font-weight:800;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sxPTesta small{display:block;font-size:12.5px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.sxVoto{--v:var(--faint);flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:10px;font-size:19px;font-weight:800;letter-spacing:-.04em;color:#0F172A;background:var(--v)}
.sxVoto.vA{--v:#34D399}.sxVoto.vB{--v:#FFB703}.sxVoto.vC,.sxVoto.vD{--v:#FF7F11}.sxVoto.vF{--v:#FB7185}
.sxVoto.vN{background:var(--card2);color:var(--mute);font-size:15px}
.sxVoto.grande{width:76px;height:76px;border-radius:14px;font-size:36px}
.sxBattito{display:grid;grid-template-columns:repeat(96,1fr);gap:1px;height:22px}
.sxBattito i{border-radius:1.5px;background:var(--card3)}
.sxBattito i.o{background:color-mix(in srgb,var(--ok) 70%,transparent)}
.sxBattito i.l{background:var(--warn)}
.sxBattito i.x{background:var(--ko)}
.sxPPiede{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--mute)}
.sxPPiede .sp{flex:1}
.sxStatoP{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--ink2)}
.sxStatoP i{width:7px;height:7px;border-radius:50%;background:var(--faint)}
.sxStatoP.online i{background:var(--ok)}.sxStatoP.lento i{background:var(--warn)}.sxStatoP.offline i{background:var(--ko)}
.sxStatoP.offline{color:var(--ko)}
.sxChip{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:5px;background:var(--card2);font-size:11.5px;font-weight:800;color:var(--ink2)}
.sxChip.on{background:var(--ok-soft);color:var(--ok)}
.sxChip.att{background:var(--acc-soft);color:var(--acc-ink)}
.sxChip .pt{display:inline-flex;gap:3px}
.sxChip .pt i{width:6px;height:6px;border-radius:50%;background:var(--line2)}
.sxChip .pt i.si{background:var(--ok)}
.sxNuova{display:grid;place-items:center;gap:8px;min-height:150px;padding:16px;border-radius:var(--r-lg);border:1px dashed var(--line2);background:transparent;color:var(--mute);font:inherit;font-weight:800;cursor:pointer;transition:border-color .2s,color .2s}
.sxNuova:hover{border-color:var(--acc-ink);color:var(--acc-ink)}
.sxNuova svg{width:24px;height:24px}

/* flusso dal vivo, scudo, accesso */
.sxDue{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px;align-items:start}
.sxFlusso{display:flex;flex-direction:column;max-height:560px;overflow:auto}
.sxEv{display:grid;grid-template-columns:44px 10px minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px 4px;border-bottom:1px solid var(--line)}
.sxEv:last-child{border-bottom:0}
.sxEv.nuovo{animation:sxEvIn .6s var(--ease) both}
@keyframes sxEvIn{from{opacity:0;transform:translateY(-8px);background:var(--acc-soft)}to{opacity:1;transform:none;background:transparent}}
.sxEv time{font-size:12px;font-weight:800;color:var(--mute);padding-top:1px;font-variant-numeric:tabular-nums}
.sxEv>i{width:9px;height:9px;border-radius:50%;margin-top:5px;background:var(--faint)}
.sxEv>i.sonda,.sxEv>i.enumerazione,.sxEv>i.metodo{background:var(--warn)}
.sxEv>i.attacco,.sxEv>i.strumento,.sxEv>i.forza_bruta,.sxEv>i.raffica{background:var(--tangerine)}
.sxEv>i.esposto,.sxEv>i.errori{background:var(--ko)}
.sxEv>i.copia,.sxEv>i.scaricamento,.sxEv>i.esca,.sxEv>i.copia_trovata,.sxEv>i.csp{background:var(--purple)}
.sxEv>i.blocco{background:var(--line2)}
.sxEv p{margin:0;font-size:13px;line-height:1.45;color:var(--ink2);min-width:0;overflow-wrap:anywhere}
.sxEv p b{color:var(--ink)}
.sxEv p .ip{font-weight:800;color:var(--acc-ink);cursor:pointer;text-decoration:none;border-bottom:1px dashed currentColor}
.sxEv p small{display:block;color:var(--faint);font-size:11.5px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sxEsito{font-size:11px;font-weight:800;padding:3px 7px;border-radius:4px;white-space:nowrap;background:var(--card2);color:var(--mute)}
.sxEsito.fermato{background:var(--ok-soft);color:var(--ok)}
.sxEsito.risposto{background:var(--ko-soft);color:var(--ko)}
.sxLato{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}.sxLato>*{min-width:0}
.sxRiga{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px;min-width:0}
.sxRiga:last-child{border-bottom:0}
.sxRiga>div{min-width:0;flex:1}
.sxRiga b{display:block;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sxRiga small{display:block;color:var(--mute);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sxGrande{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.sxScudoTesta{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.sxScudoTesta span{color:var(--mute);font-size:13px}
.sxStatoAcc{display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;background:var(--card2);margin-bottom:10px}
.sxStatoAcc svg{width:26px;height:26px;flex:none}
.sxStatoAcc.on svg{color:var(--ok)}.sxStatoAcc.off svg{color:var(--warn)}
.sxStatoAcc b{display:block;font-size:13.5px;font-weight:800}
.sxStatoAcc small{display:block;font-size:12px;color:var(--mute)}
.sxCatena{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--ok)}
.sxCatena.ko{color:var(--ko)}
.sxCatena svg{width:15px;height:15px}

/* scheda di una produzione */
.sxTesta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.sxTesta>div{min-width:0;flex:1}
.sxTesta h2{font-size:24px;font-weight:800;letter-spacing:-.02em;margin:0;line-height:1.2}
.sxTesta a.host{font-size:13.5px;color:var(--mute);text-decoration:none;font-weight:700}
.sxTesta a.host:hover{color:var(--acc-ink)}
.sxTesta .az{display:flex;gap:8px;flex-wrap:wrap}
.sxTesta>.az{flex:0 0 auto;min-width:auto}
.sxRiass{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 16px}
.sxKpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}
.sxGrafico{width:100%;height:150px;display:block}
.sxGrafico .linea{fill:none;stroke:var(--acc);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.sxGrafico .area{fill:var(--acc-soft)}
.sxGrafico .giu{fill:var(--ko-soft)}
.sxGrafico .griglia{stroke:var(--line);stroke-width:1}
.sxGrafico text{fill:var(--faint);font-size:10px;font-weight:700;font-family:Manrope,system-ui,sans-serif}
.sxGrafico.disegna .linea{stroke-dasharray:var(--l);stroke-dashoffset:var(--l);animation:sxDisegna 1.4s var(--ease) .15s forwards}
.sxGrafico.disegna .area{opacity:0;animation:sxCompari .8s .9s forwards}
@keyframes sxDisegna{to{stroke-dashoffset:0}}
@keyframes sxCompari{to{opacity:1}}
.sxGiorni{display:grid;grid-template-columns:repeat(30,1fr);gap:3px;align-items:end;height:46px}
.sxGiorni i{border-radius:2px;background:var(--ok);opacity:.75;min-height:4px}
.sxGiorni i.ko{background:var(--ko);opacity:1}.sxGiorni i.n{background:var(--card3);opacity:1}

/* il piano di miglioramento */
.sxPiano{display:grid;gap:8px}
.sxE{border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line);overflow:hidden}
.sxE summary{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px 16px;cursor:pointer;list-style:none}
.sxE summary::-webkit-details-marker{display:none}
.sxE summary>i{width:10px;height:10px;border-radius:50%;background:var(--faint)}
.sxE.problema summary>i{background:var(--ko)}.sxE.avviso summary>i{background:var(--warn)}.sxE.ok summary>i{background:var(--ok)}.sxE.info summary>i{background:var(--dig)}
.sxE summary b{display:block;font-size:13.5px;font-weight:800;line-height:1.35}
.sxE summary small{display:block;font-size:12px;color:var(--mute);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sxGuadagno{font-size:12px;font-weight:800;padding:4px 8px;border-radius:5px;background:var(--ok-soft);color:var(--ok);white-space:nowrap}
.sxE[open] summary{border-bottom:1px solid var(--line)}
.sxE .dentro{padding:14px 16px 16px 40px;display:grid;gap:10px;font-size:13px;line-height:1.55}
.sxE .dentro p{margin:0;color:var(--ink2)}
.sxE .dentro p b{color:var(--ink)}
.sxArea{font-size:11.5px;font-weight:800;color:var(--mute);margin:16px 4px 6px}
.sxCodice{position:relative}
.sxCodice pre{margin:0;padding:14px 16px;border-radius:10px;background:#0A1120;color:#E2E8F0;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;overflow:auto;max-height:340px;white-space:pre-wrap;word-break:break-all}
.sxCodice .miniBtn{position:absolute;top:8px;right:8px;background:#1D2943;color:#fff;border-color:rgba(255,255,255,.2)}
.sxPassi{display:grid;gap:12px;counter-reset:passo}
.sxPasso{position:relative;padding:14px 16px 14px 52px;border-radius:var(--r-lg);background:var(--card2)}
.sxPasso::before{counter-increment:passo;content:counter(passo);position:absolute;left:14px;top:13px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:var(--on-acc);font-weight:800;font-size:13px}
.sxPasso b{display:block;font-size:14px;font-weight:800;margin-bottom:6px}
.sxPasso p{margin:0 0 10px;font-size:13px;color:var(--ink2);line-height:1.55}
.sxInst{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.sxInst>div{padding:14px;border-radius:10px;background:var(--card2);display:flex;gap:10px;align-items:flex-start}
.sxInst svg{width:20px;height:20px;flex:none;margin-top:1px}
.sxInst .si svg{color:var(--ok)}.sxInst .no svg{color:var(--faint)}
.sxInst b{display:block;font-size:13px;font-weight:800}
.sxInst small{display:block;font-size:12px;color:var(--mute);line-height:1.45}
.sxTab{width:100%;border-collapse:collapse;font-size:13px}
.sxTab th{text-align:left;font-size:11.5px;font-weight:800;color:var(--mute);padding:8px 10px;border-bottom:1px solid var(--line)}
.sxTab td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.sxTab tr:last-child td{border-bottom:0}
.card:has(>.sxTab){overflow-x:auto}
.sxTab td.n{font-variant-numeric:tabular-nums;text-align:right;font-weight:800}
.sxBarra{height:8px;border-radius:4px;background:var(--card3);overflow:hidden}
.sxBarra i{display:block;height:100%;border-radius:4px;background:var(--acc)}

/* modali */
.sxQr{display:grid;grid-template-columns:180px minmax(0,1fr);gap:18px;align-items:center;margin:16px 0}
.sxQr .qr{padding:10px;border-radius:12px;background:#fff}
.sxQr .qr svg{display:block;width:100%;height:auto}
.sxRecupero{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0;font:700 15px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}
.sxRecupero span{padding:10px;border-radius:8px;background:var(--card2);text-align:center}

/* il codice a sei cifre (riprende l'OTP liquido della libreria MadHour) */
.otpL{--liq:#FF7F11;--liq2:#FFB703;--ok:#34D399;display:flex;align-items:center;justify-content:center;gap:0;margin:8px 0 6px;position:relative}
.otpL .bx{position:relative;width:46px;height:58px;border-radius:12px;background:#1D2943;border:1.5px solid rgba(255,255,255,.12);overflow:hidden;transition:border-color .3s,box-shadow .3s,transform .45s var(--spring);transform:translateZ(0)}
.otpL .bx.fuoco{border-color:var(--amber);box-shadow:0 0 0 3px rgba(255,183,3,.18);transform:translateY(-2px)}
.otpL .bx input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;font-size:16px;z-index:5;cursor:text;background:transparent}
.otpL .liq{position:absolute;inset:0;transform:translateY(calc(100% + 14px));background:linear-gradient(180deg,var(--liq2),var(--liq));transition:transform .32s cubic-bezier(.16,1,.3,1),filter .4s;z-index:1}
.otpL .bx.pieno .liq{transform:translateY(0)}
.otpL .liq::before,.otpL .liq::after{content:'';position:absolute;left:-50%;width:200%;height:18px;top:-9px;background-size:50% 100%;background-repeat:repeat-x}
.otpL .liq::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 88' preserveAspectRatio='none'%3E%3Cpath d='M0,44 C150,88 250,0 400,44 C550,88 650,0 800,44 L800,88 L0,88 Z' fill='%23FF7F11'/%3E%3C/svg%3E");animation:otpOnda 4.2s linear infinite}
.otpL .liq::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 88' preserveAspectRatio='none'%3E%3Cpath d='M0,44 C200,0 200,88 400,44 C600,0 600,88 800,44 L800,88 L0,88 Z' fill='%23FFB703'/%3E%3C/svg%3E");animation:otpOnda 3s linear infinite reverse;opacity:.9}
@keyframes otpOnda{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.otpL .cif{position:absolute;inset:0;display:grid;place-items:center;z-index:3;font-size:24px;font-weight:800;color:#0F172A;pointer-events:none}
.otpL .cif span{display:block}
.otpL .bx.esce .cif span{animation:otpEsce .46s cubic-bezier(.34,1.56,.64,1) both}
@keyframes otpEsce{0%{transform:translateY(30px) scale(.3);opacity:0;filter:blur(4px)}55%{transform:translateY(-7px) scale(1.14);opacity:1;filter:none}78%{transform:translateY(3px) scale(.96)}100%{transform:none}}
.otpL .bx .vuoto{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.3);font-size:18px;z-index:2}
.otpL .bx.pieno .vuoto{display:none}
.otpL .tubo{width:10px;height:6px;margin:0 1px;border-radius:3px;background:#1D2943;overflow:hidden;position:relative}
.otpL .tubo i{position:absolute;inset:0;background:linear-gradient(90deg,var(--liq),var(--liq2));clip-path:inset(0 100% 0 0);transition:clip-path .2s}
.otpL .tubo.pieno i{clip-path:inset(0 0 0 0)}
.otpL.unito .bx{border-color:var(--liq);box-shadow:0 0 18px rgba(255,127,17,.45)}
.otpL.gira .liq{animation:otpGira .55s linear infinite}
@keyframes otpGira{from{filter:hue-rotate(0)}to{filter:hue-rotate(-40deg)}}
.otpL.fuso .bx{border-radius:0;border-left-width:0;border-right-width:0;transform:translateX(var(--x,0))}
.otpL.fuso .bx:first-of-type{border-radius:14px 0 0 14px;border-left-width:1.5px}
.otpL.fuso .bx:last-of-type{border-radius:0 14px 14px 0;border-right-width:1.5px}
.otpL.fuso .tubo{opacity:0;transform:scaleX(0);transition:opacity .3s,transform .3s}
.otpL.verde .liq{background:linear-gradient(180deg,#A7F3D0,var(--ok));filter:none}
.otpL.verde .liq::before,.otpL.verde .liq::after{filter:hue-rotate(110deg) saturate(.8)}
.otpL.verde .bx{border-color:var(--ok);box-shadow:0 0 26px rgba(52,211,153,.55)}
.otpL.verde .cif{opacity:.45}
.otpL .spunta{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;z-index:6;opacity:0;pointer-events:none}
.otpL.verde .spunta{opacity:1}
.otpL .spunta path{stroke-dasharray:30;stroke-dashoffset:30}
.otpL.verde .spunta path{animation:draw .45s .15s var(--ease) forwards}
.otpL.no .bx{border-color:#FB7185}
.otpL.no{animation:shake .45s ease}
@media (prefers-reduced-motion:reduce){.otpL .liq,.otpL .bx,.otpL .tubo i{transition:none}.otpL .liq::before,.otpL .liq::after,.otpL.gira .liq{animation:none}}
.loginBox .otpBox{display:none}
.loginBox.codice .field,.loginBox.codice>p:not(.otpTesto){display:none}
.loginBox.codice .otpBox{display:block}
.loginBox .otpTesto{display:none;font-size:14px;color:rgba(255,255,255,.7);margin-bottom:18px}
.loginBox.codice .otpTesto{display:block}
.loginBox .otpAlt{display:block;margin:12px auto 0;background:none;border:0;color:rgba(255,255,255,.6);font-size:12.5px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.loginBox .otpRec{display:none;margin-top:6px}
.loginBox.recupero .otpRec{display:block}
.loginBox.recupero .otpL{display:none}

@media (max-width:1100px){.sxCorpo{grid-template-columns:minmax(0,1fr)}.sxQuad{max-width:400px}.sxDue{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){
  .sx{padding:16px 14px}
  .sxNumeri{grid-template-columns:1fr 1fr}
  .sxNum b{font-size:22px}
  .sxIncR{grid-template-columns:auto minmax(0,1fr)}
  .sxIncR .az{grid-column:1 / -1;justify-content:flex-start}
  .sxKpi,.sxInst{grid-template-columns:1fr}
  .sxQr{grid-template-columns:1fr}
  .sxQr .qr{max-width:200px;margin:0 auto}
  .sxEv{grid-template-columns:40px 10px minmax(0,1fr)}
  .sxEv .sxEsito{grid-column:3;justify-self:start}
  .otpL .bx{width:40px;height:52px}
  /* le copie trovate: una riga sotto l'altra, i bottoni sotto */
  .sxTab.pila,.sxTab.pila tbody,.sxTab.pila tr,.sxTab.pila td{display:block;width:100%}
  .sxTab.pila tr:first-child{display:none}
  .sxTab.pila tr{padding:10px 0;border-bottom:1px solid var(--line)}
  .sxTab.pila tr:last-child{border-bottom:0}
  .sxTab.pila td{border:0;padding:3px 0}
}
@media (prefers-reduced-motion:reduce){.sxGuardia i,.sxQuad.giro .scia,.sxEv.nuovo,.sxGrafico.disegna .linea,.sxGrafico.disegna .area{animation:none}.sxGrafico.disegna .linea{stroke-dashoffset:0}.sxGrafico.disegna .area{opacity:1}}
:root[data-theme="light"] .sxEv>i.blocco{background:rgba(15,23,42,.25)}