/* Circuito Studio · spazio dei media (spazio.js): barra a semaforo, pacchetti, Libera spazio, cestino, regia */
:root{--sp-ok:#16a34a;--sp-warn:#d99a00;--sp-ko:#dc2626;--sp-warn-bg:#fff6db;--sp-warn-line:#f6e2a4;--sp-ko-bg:#fdecec;--sp-ko-line:#f6c8c8;--sp-ko-fg:#9f1d1d}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--sp-ok:#4ade80;--sp-warn:#f2c14e;--sp-ko:#f87171;--sp-warn-bg:#2a2210;--sp-warn-line:#4d3e14;--sp-ko-bg:#2c1414;--sp-ko-line:#562424;--sp-ko-fg:#fca5a5}}
:root[data-theme="dark"]{--sp-ok:#4ade80;--sp-warn:#f2c14e;--sp-ko:#f87171;--sp-warn-bg:#2a2210;--sp-warn-line:#4d3e14;--sp-ko-bg:#2c1414;--sp-ko-line:#562424;--sp-ko-fg:#fca5a5}

.md-sp{display:grid;gap:10px;padding:16px 18px;margin-bottom:14px;transition:background .2s,border-color .2s}
.md-sp.avviso{background:var(--sp-warn-bg);border-color:var(--sp-warn-line)}
.md-sp.pieno{background:var(--sp-ko-bg);border-color:var(--sp-ko-line)}
.md-sp-t{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:32px}
.md-sp-n{flex:1;min-width:180px;font-size:14.5px;color:var(--fg2)}
.md-sp-n b{font:700 15.5px var(--f-head);color:var(--fg);letter-spacing:-.01em}
.md-sp-az{display:flex;gap:8px;flex-wrap:wrap}
.md-sp-bar{display:block;height:8px;border-radius:99px;background:var(--sunk);overflow:hidden}
.md-sp.avviso .md-sp-bar,.md-sp.pieno .md-sp-bar{background:rgba(0,0,0,.06)}
.md-sp-bar>i{display:block;height:100%;border-radius:99px;background:var(--sp-ok);transition:width .4s ease}
.md-sp.avviso .md-sp-bar>i,.md-sp-bar.avviso>i{background:var(--sp-warn)}
.md-sp.pieno .md-sp-bar>i,.md-sp-bar.pieno>i{background:var(--sp-ko)}
.md-sp-bar.ok>i{background:var(--sp-ok)}
.md-sp-bar.mini{height:5px;margin-top:6px;max-width:320px}
.md-sp-m{margin:0;font-size:13.5px;line-height:1.45;color:var(--fg2)}
.md-sp.pieno .md-sp-m b{color:var(--sp-ko-fg)}
.md-sp-c{margin:0;font-size:13px;color:var(--muted)}
.md-sp-ces{display:flex;align-items:center;gap:8px;justify-self:start;border:0;background:none;padding:2px 0;font:inherit;font-size:13px;color:var(--fg2);cursor:pointer;text-align:left}
.md-sp-ces svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;color:var(--muted)}
.md-sp-ces em{font-style:normal}
.md-sp-ces span{color:var(--accent);font-weight:600;margin-left:2px}
.md-sp-ces:hover span{text-decoration:underline}

/* scelta dei pacchetti */
.sp-pacs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 6px}
.sp-pac{display:grid;gap:3px;text-align:left;border:1.5px solid var(--line2);background:var(--surface);border-radius:14px;padding:14px 16px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.sp-pac:hover{border-color:var(--faint)}
.sp-pac[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.sp-pac b{font:800 22px/1.1 var(--f-head);letter-spacing:-.02em}
.sp-pac span{font-weight:600;font-size:14px}
.sp-pac small{font-size:12px;color:var(--muted)}

/* Libera spazio e cestino */
.sp-lista{display:grid;gap:6px;max-height:min(52vh,420px);overflow:auto;margin-top:6px;padding:2px}
.sp-lista .check{padding:9px 12px}
.sp-l-n{display:grid;gap:1px;flex:1;min-width:0}
.sp-l-n b{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-l-n small{font-size:12px;color:var(--muted)}
.sp-l-p{font-variant-numeric:tabular-nums;font-weight:600;font-size:13.5px;flex:none}
.sp-ces-r{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;padding:8px 8px 8px 12px}
.st-modal footer .sp{flex:1}

/* Abbonamento */
.sp-abb-r{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.sp-abb-r>span{display:grid;gap:1px;flex:1;min-width:0}
.sp-abb-r small{font-size:12.5px;color:var(--muted)}
#sp-abb{margin-bottom:16px}

/* regia */
.pill.pieno{background:var(--sp-ko-bg);color:var(--sp-ko-fg);border-color:var(--sp-ko-line)}
.sp-rg .fz-cosa{min-width:0}

@media (max-width:640px){
  .md-sp{padding:14px;display:flex;flex-direction:column}
  .md-sp-t{display:contents}
  .md-sp-az{width:100%;order:9}   /* sul telefono: prima la barra e cosa vuol dire, poi le azioni */
  .md-sp-az .btn{flex:1}
  .sp-pacs{grid-template-columns:1fr}
}