/* =============================================================================
   Verifica Idea — delta su scorecard.css
   Va caricato DOPO scorecard.css, che porta tutta la struttura bsc-*.

   Qui c'è solo quello che il track Idea ha e la Scorecard no:
   1. le tre barre per blocco, che sostituiscono l'Indice di autonomia;
   2. le quattro classi di fascia (pronta|fuoco|validare|intuizione);
   3. l'avvertenza dell'override g2_soldi e il paragrafo di insight.

   Le classi della Scorecard (bancabile|migliorabile|a-rischio|da-ricostruire)
   restano dove sono e non si toccano: sono pagine separate, non c'è collisione.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Fasce — il colore non è mai l'unico veicolo: l'etichetta testuale è
   sempre presente accanto al numero, come nella Scorecard.
   -------------------------------------------------------------------------- */

.bsc-fascia--pronta     { color: #0f766e; }
.bsc-fascia--fuoco      { color: #1d4ed8; }
.bsc-fascia--validare   { color: #b45309; }
.bsc-fascia--intuizione { color: #b91c1c; }

/* -----------------------------------------------------------------------------
   2. Le tre barre per blocco
   Ogni riga è etichetta + traccia + valore numerico. Il numero accanto alla
   barra non è decorativo: è il solo modo di leggere il valore per chi non
   distingue le lunghezze a colpo d'occhio o usa uno screen reader.
   -------------------------------------------------------------------------- */

.bsc-barre {
  margin: 18px 0 4px;
}

.bsc-barra {
  align-items: center;
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.bsc-barra:last-child { margin-bottom: 0; }

.bsc-barra-nome {
  color: #374151;
  flex: 0 0 auto;
  font-size: 15px;
  line-height: 1.3;
  width: 168px;
}

.bsc-barra-track {
  background: #e5e7eb;
  border-radius: 3px;
  flex: 1 1 auto;
  height: 10px;
  overflow: hidden;
}

.bsc-barra-fill {
  background: #2563eb;
  display: block;
  height: 10px;
  transition: width .35s ease;
  width: 0;
}

.bsc-barra-val {
  color: #111827;
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 700;
  text-align: right;
  width: 34px;
}

/* Il blocco più debole è quello di cui parla l'insight sotto: si evidenzia con
   il colore E con il grassetto dell'etichetta, mai con il solo colore. */
.bsc-barra--debole .bsc-barra-fill { background: #b45309; }
.bsc-barra--debole .bsc-barra-nome { color: #111827; font-weight: 700; }

/* -----------------------------------------------------------------------------
   3. Insight del blocco più debole e avvertenza
   -------------------------------------------------------------------------- */

.bsc-insight-blocco {
  color: #374151;
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 6px;
}

/* Override g2_soldi con Indice < 50: compare sopra le CTA.
   Descrive cosa fa un valutatore, non cosa succederà. */
.bsc-avviso {
  background: #fffbeb;
  border-left: 3px solid #b45309;
  color: #374151;
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 20px;
  padding: 14px 16px;
}

/* -----------------------------------------------------------------------------
   4. Responsive — sotto i 768px l'etichetta va sopra la barra, altrimenti
   resta una colonna di 168px che schiaccia la traccia a pochi pixel.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .bsc-barra {
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
  }

  .bsc-barra-nome {
    flex: 1 1 auto;
    order: 1;
    width: auto;
  }

  .bsc-barra-val {
    order: 2;
    text-align: right;
  }

  .bsc-barra-track {
    flex: 1 1 100%;
    order: 3;
  }
}