/* ============================================================================
   Schema di collegamento dei cavi (quale cavo serve, gabbia per gabbia e barretta per barretta).
   Stesso linguaggio del configuratore della scheda: filetti da un pixel, niente angoli arrotondati,
   Chivo / Karla / Plex Mono, fondo chiaro per il disegno (i cavi neri devono vedersi).
   Le classi .sg-bs-* e i colori dei tre collegamenti (--c) stanno nel disegno SVG generato da assets/barrette-schema.js.
   ========================================================================== */

.sg-bs{background:var(--paper,#f7f9fa);color:var(--ink,#12202a);border-block:1px solid var(--rule,#d5dfe6);padding:clamp(32px,5vw,60px) 0}
.sg-bs[hidden]{display:none}
.sg-bs [hidden]{display:none!important}
.sg-bs *,.sg-bs *::before,.sg-bs *::after{box-sizing:border-box}
.sg-bs table{min-width:0}   /* il sito ha table{min-width:680px} per le tabelle dati: qui la tabella ha il suo contenitore che scorre */
.sg-bs-head{max-width:70ch;margin-bottom:clamp(18px,2.6vw,28px)}
.sg-bs-head h2{margin-top:9px}
.sg-bs-head .lede{margin-top:12px}

/* nella scheda della barretta: pannello come il configuratore */
.sg-barrette-pilot-page .sg-bs{margin:0 0 clamp(32px,5vw,56px);padding:clamp(22px,3.4vw,44px);border:1px solid var(--rule,#d5dfe6)}
.sg-barrette-pilot-page .sg-bs .wrap{max-width:none;padding:0}

/* ------------------------------------------------------------------ i controlli */
.sg-bs-controls{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:14px 22px;align-items:start;margin:0 0 20px}
.sg-bs-field{border:0;margin:0;padding:0;min-width:0}
.sg-bs-field legend{padding:0;margin:0 0 7px;font:500 .68rem "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#5f7381)}
.sg-bs-select{width:100%;min-height:46px;padding:9px 12px;border:1px solid var(--rule,#d5dfe6);border-radius:0;background-color:#fff;color:var(--ink,#12202a);font:inherit}
.sg-bs-select:focus{outline:2px solid var(--accent,#0f7ab5);outline-offset:1px}
.sg-bs-chips{display:flex;flex-wrap:wrap;gap:8px}
.sg-bs-chip{position:relative;display:inline-flex;align-items:center;min-height:46px;padding:8px 14px;background:var(--panel,#fff);border:1px solid var(--rule,#d5dfe6);cursor:pointer;font-size:.94rem;line-height:1.2}
.sg-bs-chip input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}
.sg-bs-chip:hover{border-color:var(--plate-line,#93aec4)}
.sg-bs-chip.is-checked{background:#fff;border-color:var(--ink,#12202a);box-shadow:inset 0 -2px 0 var(--ink,#12202a);font-weight:700}
.sg-bs-chip:focus-within{outline:2px solid var(--accent,#0f7ab5);outline-offset:2px}
.sg-bs-chip.is-disabled{opacity:.45;cursor:not-allowed;background:transparent}
.sg-bs-chip.is-disabled:hover{border-color:var(--rule,#d5dfe6)}
.sg-bs-help{margin:8px 0 0;max-width:34ch;color:var(--muted,#5f7381);font-size:.82rem;line-height:1.45}
/* spazio fra le gabbie: lo cambia il cliente (di solito 1 cm) */
.sg-bs-field--gap{grid-column:1/-1}
.sg-bs-field--gap .sg-bs-help{max-width:64ch}
.sg-bs-gapbox{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.sg-bs-input{inline-size:6.5rem;min-height:46px;padding:9px 12px;border:1px solid var(--rule,#d5dfe6);border-radius:0;background:#fff;color:var(--ink,#12202a);font:inherit;text-align:right}
.sg-bs-input:focus{outline:2px solid var(--accent,#0f7ab5);outline-offset:1px}
.sg-bs-input[aria-invalid="true"]{border-color:#b3261e;box-shadow:inset 0 -2px 0 #b3261e}
.sg-bs-unit{color:var(--muted,#5f7381);font:500 .8rem "IBM Plex Mono",ui-monospace,monospace}
.sg-bs-reset{min-height:46px;padding:8px 14px;background:transparent;border:1px solid var(--rule,#d5dfe6);border-radius:0;color:var(--ink,#12202a);cursor:pointer;font:inherit;font-size:.9rem}
.sg-bs-reset:hover{border-color:var(--plate-line,#93aec4)}
.sg-bs-reset:focus-visible{outline:2px solid var(--accent,#0f7ab5);outline-offset:2px}

/* --------------------------------------------------------------------- il disegno */
.sg-bs-figure{margin:0;min-width:0;background:#f2f6f9;border:1px solid #c6d5df}
.sg-bs-canvas{overflow-x:auto}
.sg-bs-svg{display:block;width:100%;height:auto;min-width:720px}     /* sul telefono il disegno resta leggibile e si scorre di lato */
.sg-bs-figure figcaption{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:0;padding:12px 18px;border-top:1px solid #c6d5df;background:transparent;color:#33475a;font-size:.88rem;line-height:1.45;text-align:left}
.sg-bs-badge{flex:none;padding:4px 9px;background:rgba(255,255,255,.88);border:1px solid #c6d5df;font:500 .66rem "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#516574}

.sg-bs-stage{fill:#f2f6f9}
.sg-bs-ceil{fill:#9db0bd}
.sg-bs-ceil.is-next{fill:url(#sg-bs-fade)}
.sg-bs-wall{stroke:#5d7889;stroke-width:2.5;fill:none}
.sg-bs-floor{stroke:#b7c6d1;stroke-width:1.5;stroke-dasharray:6 5;fill:none}
.sg-bs-floor.is-next{opacity:.55}
.sg-bs-divider{fill:#c5d3dc;stroke:#7d93a2;stroke-width:1}
.sg-bs-pcb{fill:#fff;stroke:#66798a;stroke-width:1.2}
.sg-bs-conn{fill:#e9dfc3;stroke:#b4a373;stroke-width:.8}
.sg-bs-led{fill:#ffe27a;stroke:#c9a227;stroke-width:.6}
.sg-bs-led.is-blue{fill:#3b6fd6;stroke:#26479a}
.sg-bs-bar.is-next{opacity:.55}
.sg-bs-bar.is-bad .sg-bs-pcb{stroke:#b3261e;fill:#fdeceb}
.sg-bs-cable{fill:none;stroke:#12202a;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sg-bs-ext{stroke:var(--c,#516574);stroke-width:1;stroke-dasharray:2 3;fill:none;opacity:.85}
.sg-bs-dimline{stroke:var(--c,#516574);stroke-width:1.5;fill:none}
.sg-bs-dist{fill:#12202a;font:600 13px "IBM Plex Mono",ui-monospace,monospace}
.sg-bs-label{fill:#516574;font:500 12px "IBM Plex Mono",ui-monospace,monospace}
/* le scritte sopra linee e pareti restano leggibili: un contorno del colore del fondo */
.sg-bs-label,.sg-bs-spare,.sg-bs-dist,.sg-bs-note{paint-order:stroke fill;stroke:#f2f6f9;stroke-width:3.5px;stroke-linejoin:round}
.sg-bs-label.is-strong{fill:#26394a;font-weight:600}
.sg-bs-note{fill:#7d93a2;font:italic 12px Karla,"Segoe UI",system-ui,sans-serif}
.sg-bs-head-l{fill:#12202a;font:900 15px Chivo,"Segoe UI",system-ui,sans-serif;letter-spacing:-.01em}
.sg-bs-head-r{fill:#33475a;font:500 12.5px "IBM Plex Mono",ui-monospace,monospace}
.sg-bs-chip-label rect{fill:#fff;stroke:var(--c,#516574);stroke-width:1.5}
.sg-bs-chip-label text{fill:#12202a;font:900 13px Chivo,"Segoe UI",system-ui,sans-serif}
.sg-bs-spare{fill:#516574;font:500 11.5px "IBM Plex Mono",ui-monospace,monospace}
.sg-bs-spare.is-bad{fill:#b3261e}
.sg-bs-nofit{fill:#b3261e;font:900 22px Chivo,"Segoe UI",system-ui,sans-serif}

/* --------------------------------------------------------- risultato e come si calcola */
.sg-bs-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px clamp(20px,3vw,40px);align-items:start;margin-top:22px}
.sg-bs-result{display:grid;gap:12px;min-width:0;align-content:start}
.sg-bs-card{padding:14px 16px;background:var(--panel,#fff);border:1px solid var(--rule,#d5dfe6);border-left:4px solid var(--c,var(--accent,#0f7ab5))}
.sg-bs-card h3{display:flex;align-items:center;gap:9px;margin:0 0 6px;font-family:Chivo,"Segoe UI",system-ui,sans-serif;font-weight:900;font-size:1rem;letter-spacing:-.01em;line-height:1.25}
.sg-bs-dot{flex:none;display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--c,#516574)}
.sg-bs-card p{margin:3px 0}
.sg-bs-dist-line{color:var(--muted,#5f7381);font-size:.88rem}
.sg-bs-pick strong{font-family:Chivo,"Segoe UI",system-ui,sans-serif;font-weight:900;font-size:1.3rem;letter-spacing:-.02em}
.sg-bs-pick span{margin-left:8px;color:var(--muted,#5f7381);font-size:.88rem}
.sg-bs-codeline{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:.84rem;color:var(--muted,#5f7381)}
.sg-bs-codeline code{padding:2px 7px;background:var(--paper,#f7f9fa);border:1px solid var(--rule,#d5dfe6);font:500 .8rem "IBM Plex Mono",ui-monospace,monospace;color:var(--ink,#12202a);overflow-wrap:anywhere}
.sg-bs-status{display:inline-block;margin-top:4px;padding:2px 8px;font:500 .68rem "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase}
.sg-bs-status.is-catalog{background:#e8f4e6;color:#1f6b2a}
.sg-bs-status.is-new{background:#fff3e0;color:#8a4b00}
.sg-bs-card.is-total{--c:var(--ink,#12202a);background:var(--paper,#f7f9fa)}
.sg-bs-card.is-warn{--c:#b3261e}
.sg-bs-small{margin:6px 0 0;color:var(--muted,#5f7381);font-size:.86rem;line-height:1.5}
.sg-bs-small.is-warn{padding-left:9px;border-left:3px solid #c8751f;color:#6b4a14}
.sg-bs-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.sg-bs .btn{border-color:var(--ink,#12202a);color:var(--ink,#12202a);background:transparent}
.sg-bs .btn:hover{background:#fff}
.sg-bs-picked{flex:1 1 100%;margin:2px 0 0;color:#1f6b2a;font-size:.9rem;font-weight:700}
.sg-bs-picked a{margin-left:6px}

.sg-bs-calc{min-width:0;padding:14px 18px 16px;background:var(--panel,#fff);border:1px solid var(--rule,#d5dfe6)}
.sg-bs-calc summary{cursor:pointer;font-family:Chivo,"Segoe UI",system-ui,sans-serif;font-weight:900;font-size:1.04rem;letter-spacing:-.01em}
.sg-bs-steps{display:grid;gap:9px;margin:12px 0 0;padding-left:1.3em;font-size:.92rem;line-height:1.5}
.sg-bs-sublist{display:grid;gap:6px;margin:8px 0 0;padding:0;list-style:none}
.sg-bs-sublist li{display:flex;align-items:baseline;gap:9px}
.sg-bs-sublist li>span:last-child{min-width:0}
.sg-bs-sublist .sg-bs-dot{margin-top:5px}
.sg-bs-fine{margin:10px 0 0;color:var(--muted,#5f7381);font-size:.82rem;line-height:1.5}

/* ------------------------------------------------------------------ tabella d'insieme */
.sg-bs-matrix{margin-top:26px}
.sg-bs-matrix h3{margin:0 0 10px;font-family:Chivo,"Segoe UI",system-ui,sans-serif;font-weight:900;font-size:1.1rem;letter-spacing:-.015em}
.sg-bs-matrix-scroll{overflow-x:auto}
.sg-bs-matrix-table{width:100%;min-width:560px;border-collapse:collapse;background:var(--panel,#fff);font-size:.92rem}
.sg-bs-matrix-table th,.sg-bs-matrix-table td{padding:8px 10px;text-align:left;vertical-align:top;border:1px solid var(--rule,#d5dfe6)}
.sg-bs-matrix-table thead th,.sg-bs-matrix-table tbody th{font:500 .68rem "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#5f7381);background:var(--paper,#f7f9fa)}
.sg-bs-cell{display:inline-block;width:auto;margin:0 6px 4px 0;padding:6px 9px;border:1px solid transparent;border-radius:0;background:transparent;color:var(--ink,#12202a);font:inherit;text-align:left;cursor:pointer}
.sg-bs-cell:hover{background:#eef4f8}
.sg-bs-cell:focus-visible{outline:2px solid var(--accent,#0f7ab5);outline-offset:1px}
.sg-bs-cell.is-current{background:#fff;border-color:var(--ink,#12202a);box-shadow:inset 0 -2px 0 var(--ink,#12202a);font-weight:700}
.sg-bs-none{color:var(--muted,#5f7381)}

/* --------------------------------------------------------------------- schermi */
@media (max-width:900px){
  .sg-bs-controls{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sg-bs-controls .sg-bs-field:first-child{grid-column:1/-1}
  .sg-bs-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .sg-bs-controls{grid-template-columns:minmax(0,1fr)}
  .sg-bs-chip{flex:1 1 auto;justify-content:center}
  .sg-bs .sg-bs-actions .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .sg-bs *,.sg-bs *::before,.sg-bs *::after{transition:none!important;animation:none!important}
}
.sg-bs-scroll-hint{display:none;margin:0;padding:6px 14px;border-top:1px solid #c6d5df;background:#f2f6f9;color:#516574;font-size:.8rem}
@media (max-width:760px){.sg-bs-scroll-hint{display:block}}
@media print{
  .sg-bs-canvas{overflow:visible}
  .sg-bs-svg{min-width:0}
}