/* =============================================================
   SALA BOTTONI — SAGOMA POSIZIONE (RENDER 3.0 — CAMPO 21/06/2026)
   -------------------------------------------------------------
   Silhouette auto vista dall'alto (stile Extab "casa a casa") +
   colonna laterale destra con le posizioni speciali (SUP/INF/...).
   I bottoni-posizione sono disposti secondo le coordinate Extab
   (config/tino_selectors.yaml position_coords) normalizzate in %.

   Look CHIARO/NEUTRO (come la pagina Extab e come ggMiniSilhouette)
   ma ALTO CONTRASTO per leggibilita' outdoor:
   - sfondo silhouette chiaro (#eef4fb), bordo netto
   - bottoni posizione bianchi, testo blu scuro #0d47a1, bordo 2px
   - posizione SELEZIONATA = giallo saturo #ffd640 (coerente col tema)
   ============================================================= */

#salaBottoniSagomaBar {
  background: #11161f;            /* fascia scura coerente col modale */
  border-bottom: 1px solid #1f2a3a;
  padding: 8px 10px 10px;
  /* v119.0.110 (Giuseppe): la SAGOMA ha altezza STABILE (hugs il contenuto) e NON è
     più l'elemento elastico -> niente più scatti su/giù né "risucchio". È la COSA-FARE
     ad assorbire lo spazio variabile (sotto). Footer sempre inchiodato in basso. */
  flex: 0 0 auto;
}
#salaBottoniSagomaBar .sb-sag-hint {
  color: #ffd640;
  font-size: .82rem;
  font-weight: 800;
  text-align: center;
  margin: 0 0 6px;
  letter-spacing: .2px;
}
#salaBottoniSagomaBar .sb-sag-hint .sb-sag-comp {
  color: #ffffff;
}

/* Contenitore: silhouette (sinistra) + colonna posizioni speciali (destra) */
.sb-sag-wrap {
  position: relative;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: stretch;
  max-width: 560px;
  margin: 0 auto;
}

/* Riquadro silhouette: aspect-ratio fedele alle coordinate Extab (1180 x 950) */
.sb-sag-car {
  position: relative;
  flex: 1 1 auto;
  max-width: 420px;
  aspect-ratio: 1180 / 760;     /* larghezza utile / altezza utile righe */
  /* v119.0.109 (Giuseppe): sul telefono la colonna laterale stringe la larghezza e
     l'aspect-ratio rendeva la sagoma SCHIACCIATA (~150px). min-height le ridà l'altezza
     naturale e tappabile; la barra (overflow-y:auto) scrolla se lo schermo è corto. */
  min-height: 240px;
  background: #eef4fb;
  border: 2px solid #c5d4e3;
  border-radius: 12px;
}

/* sagoma auto disegnata in SVG (riempie il riquadro, dietro i bottoni) */
.sb-sag-car svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Bottone posizione (posizionato in % via inline style left/top) */
.sb-sag-btn {
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: 46px;
  min-height: 38px;
  padding: 4px 8px;
  background: #ffffff;
  color: #0d47a1;
  border: 2px solid #0d47a1;
  border-radius: 9px;
  font-weight: 900;
  font-size: .82rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,.35);
  white-space: nowrap;
  z-index: 2;
}
.sb-sag-btn small {
  display: block;
  font-size: .58rem;
  font-weight: 700;
  opacity: .85;
  margin-top: 2px;
}
.sb-sag-btn:active { transform: translate(-50%, -50%) scale(.93); }
.sb-sag-btn.attiva {
  background: #ffd640;
  color: #1a1a1a;
  border-color: #e68900;
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px #ffd640, 0 2px 6px rgba(0,0,0,.4);
  z-index: 3;
}

/* Colonna laterale destra: posizioni speciali (SUP/INF/LAT/INT/EST/-) come Extab */
.sb-sag-col {
  position: relative;
  flex: 0 0 88px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  border-left: 2px dashed #2a3a4d;
  padding-left: 8px;
}
.sb-sag-col .sb-sag-btn {
  position: static;
  transform: none;
  width: 100%;
  text-align: center;
}
.sb-sag-col .sb-sag-btn:active { transform: scale(.95); }
.sb-sag-col .sb-sag-btn.attiva { transform: none; }

@media (max-width: 600px) {
  .sb-sag-car { max-width: 300px; }
  .sb-sag-btn { min-width: 40px; min-height: 34px; font-size: .76rem; padding: 3px 6px; }
  .sb-sag-col { flex-basis: 74px; }
}

/* =============================================================
   v119 CAMPO WIZARD 21/06/2026 — 2 SCHERMATE IN SEQUENZA (Extab).
   Schermo 1: riga TAB + bottoni COMPONENTE azzurro-chiaro (2 colonne).
   Schermo 2: posizioni VALIDE accese (arancione) / spente (grigie).
   ============================================================= */

/* --- Riga TAB Schermo 1 (etichette Extab) --- */
#salaBottoniTabBar .sb-tab {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 14px;
  background: #1b2533;
  color: #cfe2f5;
  border: 2px solid #2a3a4d;
  border-radius: 9px;
  font-weight: 800;
  font-size: .9rem;
  white-space: nowrap;
  cursor: pointer;
}
#salaBottoniTabBar .sb-tab.attiva {
  background: #ffd640;
  color: #1a1a1a;
  border-color: #e68900;
  box-shadow: 0 2px 8px rgba(255,214,64,.35);
}

/* --- Bottoni COMPONENTE (Schermo 1) — look azzurro-chiaro Extab, leggibile al sole --- */
.sb-comp-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  /* v119.0.112 (Giuseppe, screen telefono vero): card più compatte -> 3 per riga,
     meno scroll/manovre. Resta touch-safe (~60px) e lo stile non cambia. */
  min-height: 60px;
  padding: 8px 10px;
  background: #d6ecff;                 /* azzurro chiaro Extab */
  color: #0d2b4a;
  border: 2px solid #5aa0e0;
  border-bottom: 4px solid #2f7bc4;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.sb-comp-btn:active { transform: scale(.97); background: #c2e0fb; }
.sb-comp-btn .sb-comp-code {
  font-size: .82rem;
  font-weight: 900;
  color: #0d47a1;
  letter-spacing: .4px;
}
.sb-comp-btn .sb-comp-nome {
  font-size: .9rem;
  font-weight: 800;
  line-height: 1.12;
}

/* --- Schermo 2: posizioni valide / spente --- */
/* Valida = accesa arancione (richiamo all'azione, alto contrasto) */
.sb-sag-btn.sb-sag-valida:not(.attiva) {
  background: #ffb300;
  color: #1a1a1a;
  border-color: #e68900;
  box-shadow: 0 0 0 2px rgba(255,179,0,.45), 0 2px 6px rgba(0,0,0,.4);
}
/* Spenta = grigia, non cliccabile */
.sb-sag-btn.sb-sag-spenta {
  background: #e9eef3;
  color: #9bb0c4;
  border-color: #cdd9e4;
  box-shadow: none;
  opacity: .55;
  cursor: not-allowed;
}
.sb-sag-btn.sb-sag-spenta:active { transform: translate(-50%, -50%); }
.sb-sag-col .sb-sag-btn.sb-sag-spenta:active { transform: none; }

/* =============================================================
   v119 COSA-FARE 21/06/2026 — selettore OPERAZIONE (DOMMAGE Extab).
   Sta nello Schermo 2, sotto la sagoma e sopra i chip gravità.
   Comuni sempre visibili (chip grandi) + "Altri…" espande i 59.
   Outdoor-first: contrasto alto, chip touch 56px+, selezionato giallo.
   ============================================================= */
#salaBottoniCosafare {
  background: #11161f;
  border-bottom: 1px solid #1f2a3a;
  padding: 8px 10px 10px;
  /* v119.0.110: dentro la zona scroll unica (#salaBottoniScroll) -> altezza naturale,
     niente vh (era causa degli scatti) e niente scroll proprio: scorre il wrapper. */
  flex: 0 0 auto;
}
#salaBottoniCosafare .sb-cf-hint {
  color: #ffd640;
  font-size: .82rem;
  font-weight: 800;
  text-align: center;
  margin: 0 0 6px;
  letter-spacing: .2px;
}
#salaBottoniCosafare .sb-cf-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
/* Chip cosa-fare: codice (grande) + nome leggibile sotto */
.sb-cf-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  min-width: 92px;
  padding: 8px 12px;
  background: #d6ecff;            /* azzurro chiaro Extab (come i componenti) */
  color: #0d2b4a;
  border: 2px solid #5aa0e0;
  border-bottom: 4px solid #2f7bc4;
  border-radius: 11px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.sb-cf-chip:active { transform: scale(.96); background: #c2e0fb; }
.sb-cf-chip .sb-cf-code {
  font-size: .95rem;
  font-weight: 900;
  color: #0d47a1;
  letter-spacing: .4px;
}
.sb-cf-chip .sb-cf-nome {
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}
/* selezionato = giallo saturo (coerente col tema, alto contrasto) */
.sb-cf-chip.selezionato {
  background: #ffd640;
  color: #1a1a1a;
  border-color: #e68900;
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px #ffd640, 0 2px 6px rgba(0,0,0,.4);
}
.sb-cf-chip.selezionato .sb-cf-code { color: #1a1a1a; }
/* bottone "Altri…/Meno" — neutro, riconoscibile come azione secondaria */
/* v119.0.108 (Giuseppe): "Altri…" = STRISCIA a tutta larghezza (riga sua, bassa)
   invece del chip quadrato -> recupera spazio. Resta toggle collassabile. */
.sb-cf-altri {
  flex: 1 1 100%;
  width: 100%;
  min-height: 36px;
  padding: 6px 14px;
  margin-top: 2px;
  background: #1b2533;
  color: #ffd640;
  border: 2px dashed #e68900;
  border-radius: 9px;
  font-weight: 800;
  font-size: .9rem;
  cursor: pointer;
  text-align: center;
}
.sb-cf-altri:active { transform: scale(.99); }