/* Circuito Studio · scheda dei caricamenti (caricamento.js): in basso a destra, sopra pannello ed editor.
   Colori del marchio: arancio per le azioni, giallo per gli avvisi, verde per il fatto. Tema chiaro e scuro;
   segue il tema della pagina, come l'editor. */
.cc{--cc-bg:#fff;--cc-fg:#1c1917;--cc-fg2:#57534e;--cc-mu:#78716c;--cc-line:#ebe7e4;--cc-sunk:#f6f4f2;--cc-acc:#d6432a;--cc-acc2:#bf3820;--cc-acc-soft:#fdeee9;
  --cc-ok:#15803d;--cc-ok-soft:#e8f7ee;--cc-run:#34c27a;--cc-run-soft:#e3f5ea;--cc-warn:#8a6100;--cc-warn-ring:#e0a800;--cc-warn-soft:#fff6db;--cc-ko:#b42318;--cc-sh:0 24px 60px -14px rgba(28,25,23,.38),0 2px 6px rgba(28,25,23,.08);
  position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:max(18px,env(safe-area-inset-bottom,0px));z-index:1000;
  font:14px/1.4 "DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--cc-fg);-webkit-font-smoothing:antialiased}
.cc[hidden]{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cc{--cc-bg:#1d1a19;--cc-fg:#f5f2f0;--cc-fg2:#d6d0cc;--cc-mu:#a8a09b;--cc-line:#332d2a;--cc-sunk:#26211f;
  --cc-acc:#ff6a4d;--cc-acc2:#ff8166;--cc-acc-soft:#3a1d15;--cc-ok:#4ade80;--cc-ok-soft:#10291a;--cc-run:#3ccf85;--cc-run-soft:#16301f;--cc-warn:#f2c14e;--cc-warn-ring:#f2c14e;--cc-warn-soft:#33290f;--cc-ko:#ff8a80;--cc-sh:0 24px 60px -14px rgba(0,0,0,.8)}}
:root[data-theme="dark"] .cc{--cc-bg:#1d1d21;--cc-fg:#ececef;--cc-fg2:#c4c4cb;--cc-mu:#93939c;--cc-line:#2f2f36;--cc-sunk:#26262b;
  --cc-acc:#ff5b3a;--cc-acc2:#ff8a6b;--cc-acc-soft:rgba(255,91,58,.16);--cc-ok:#4ade80;--cc-ok-soft:#10291a;--cc-run:#3ccf85;--cc-run-soft:#16301f;--cc-warn:#f2c14e;--cc-warn-ring:#f2c14e;--cc-warn-soft:#33290f;--cc-ko:#ff8a80;--cc-sh:0 24px 60px -14px rgba(0,0,0,.85)}
.cc *{box-sizing:border-box}
.cc button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cc-card{width:380px;max-width:calc(100vw - 36px);max-height:min(70vh,560px);display:flex;flex-direction:column;background:var(--cc-bg);border:1px solid var(--cc-line);border-radius:18px;box-shadow:var(--cc-sh);overflow:hidden}
.cc-card.entra{animation:cc-su .22s cubic-bezier(.2,.8,.2,1)}
@keyframes cc-su{from{opacity:0;transform:translateY(10px)}}
.cc header{display:flex;align-items:center;gap:8px;padding:14px 10px 4px 18px}
.cc header b{font:700 15.5px/1.2 Sora,"DM Sans",system-ui,sans-serif;letter-spacing:-.01em;flex:1;min-width:0}
.cc-tot{font:700 15px Sora,system-ui,sans-serif;color:var(--cc-ok);font-variant-numeric:tabular-nums}
.cc-x{width:32px;height:32px;border:0;border-radius:9px;background:none;color:var(--cc-mu);display:grid;place-items:center}
.cc-x:hover{background:var(--cc-sunk);color:var(--cc-fg)}
.cc-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cc-msg{margin:0;padding:0 18px 10px;font-size:13px;color:var(--cc-fg2)}
.cc-msg.ok{color:var(--cc-ok);font-weight:600}
.cc-msg.warn{color:var(--cc-warn);font-weight:600}
.cc ul{list-style:none;margin:0;padding:0 8px 8px;overflow-y:auto;display:grid;gap:2px}
.cc-r{display:flex;gap:12px;align-items:flex-start;padding:10px;border-radius:13px}
.cc-r+.cc-r{border-top:1px solid var(--cc-line);border-radius:0}
.cc-r.meta{background:var(--cc-warn-soft);border-radius:13px;border-top:0}
.cc-t{display:grid;gap:3px;min-width:0;flex:1;padding-top:2px}
.cc-t b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-s{font-size:12.5px;color:var(--cc-mu);font-variant-numeric:tabular-nums}
.cc-s.ok{color:var(--cc-ok);font-weight:600}
.cc-s.warn{color:var(--cc-warn);font-weight:600}
.cc-s.ko{color:var(--cc-ko)}
.cc-az{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}
.cc-b{border:1px solid var(--cc-line);background:var(--cc-sunk);color:var(--cc-fg);border-radius:9px;padding:5px 11px;font-size:12.5px !important;font-weight:600 !important;min-height:30px}
.cc-b:hover{border-color:var(--cc-mu)}
.cc-b.pri{background:var(--cc-acc);border-color:var(--cc-acc);color:#fff}
.cc-b.pri:hover{background:var(--cc-acc2);border-color:var(--cc-acc2)}
.cc-b.gh{background:none;border-color:transparent;color:var(--cc-mu)}
.cc-b.gh:hover{color:var(--cc-fg);background:var(--cc-sunk)}
/* l'anello: grande, con la percentuale dentro */
.cc-ring{width:62px;height:62px;flex:none;transform:rotate(-90deg)}
.cc-ring.mini{width:24px;height:24px}
.cc-ring circle{fill:none;stroke-width:4.5}
.cc-ring.mini circle{stroke-width:7}
.cc-bg{stroke:var(--cc-run-soft,#e3f5ea)}
.cc-fg{stroke:var(--cc-run,#34c27a);stroke-linecap:round;transition:stroke-dashoffset .35s ease}
.cc-ring.ok .cc-fg{stroke:var(--cc-ok)}
.cc-ring.warn .cc-fg{stroke:var(--cc-warn-ring)}
.cc-ring.ko .cc-fg{stroke:var(--cc-ko)}
.cc-ring.tv .cc-fg{stroke:var(--cc-ok)}
.cc-pct{transform:rotate(90deg);transform-origin:26px 26px;font:700 16px Sora,system-ui,sans-serif;fill:var(--cc-fg);text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums}
.cc-pct tspan{font-size:9.5px;font-weight:600;fill:var(--cc-mu)}
.cc-v{fill:none;stroke:var(--cc-ok);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg);transform-origin:26px 26px}
.cc-r.fatto{padding-top:7px;padding-bottom:7px;align-items:center}
.cc-r.fatto .cc-ring{width:38px;height:38px}
.cc-r.fatto .cc-t{padding-top:0}
.cc-r.fatto .cc-ring .cc-bg{stroke:var(--cc-ok-soft);fill:var(--cc-ok-soft)}
/* ridotta: una pillola */
.cc-pill{display:flex;align-items:center;gap:9px;padding:8px 16px 8px 9px;border-radius:99px;border:1px solid var(--cc-line);background:var(--cc-bg);color:var(--cc-fg);box-shadow:var(--cc-sh);font-weight:600 !important;font-size:13.5px !important;font-variant-numeric:tabular-nums}
.cc-pill.fatto{color:var(--cc-ok)}
.cc-pill.offline{color:var(--cc-warn)}
@media (max-width:600px){
  .cc{left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom,0px))}
  .cc-card{width:auto;max-width:none;max-height:60vh}
  .cc-pill{margin-left:auto}
  .cc:has(.cc-pill){left:auto}
}

/* il file in corso, in grande (WeTransfer): anello grande al centro, nome, tre numeri in colonna */
.cc-card{width:400px}
.cc-hero{display:grid;justify-items:center;gap:10px;padding:14px 12px 16px;text-align:center}
.cc-hero+.cc-r,.cc-r+.cc-hero{border-top:1px solid var(--cc-line)}
.cc-hero .cc-ring{width:148px;height:148px}
.cc-hero .cc-ring circle{stroke-width:3.2}
.cc-hero .cc-pct{font-size:14px;fill:var(--cc-fg)}
.cc-hero .cc-pct tspan{font-size:7px}
.cc-hn{max-width:100%;font:600 15px/1.3 Sora,"DM Sans",system-ui,sans-serif;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-st{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;border-top:1px solid var(--cc-line);border-bottom:1px solid var(--cc-line);padding:10px 0}
.cc-st[hidden],.cc-hero .cc-s[hidden]{display:none}
.cc-st span{display:grid;gap:1px;min-width:0}
.cc-st span+span{border-left:1px solid var(--cc-line)}
.cc-st b{font:700 15px/1.2 Sora,system-ui,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-st small{font-size:11.5px;color:var(--cc-mu);white-space:nowrap}
.cc-hero .cc-s{font-size:13px}
.cc-hero .cc-az{justify-content:center;margin-top:2px}
.cc-hero .cc-b{min-width:96px;min-height:36px}
.cc-hero.fatto .cc-ring{width:96px;height:96px}
@media (max-width:600px){.cc-hero .cc-ring{width:120px;height:120px}}

/* avanzamento in verde tenue (va tutto bene), giallo se la linea cade; l'arancio resta solo sui tasti */
.cc-ring.warn .cc-bg{stroke:var(--cc-warn-soft)}