/* Le nostre poche righe in più, tenute fuori dal foglio di stile del prototipo
   così resta riconoscibile quello originale.
   Serve a una cosa sola: far vedere a occhio quali pannelli girano ancora su
   numeri di esempio e quali sui dati veri del database. */

.etichetta-esempio {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #8a6d1f;
  background: #fdf4dd;
  border: 1px solid #edd9a3;
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}
.etichetta-esempio::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: #c9a227;
}

.etichetta-vero {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #1c6340;
}

/* Il pannello che gira su esempi resta leggibile ma si distingue. */
.panel.su-esempi { border-top: 2px solid #edd9a3; }

.nota-esempio {
  margin: 0;
  padding: 10px 22px 16px;
  font-size: 12.5px;
  color: var(--muted);
}

/* Celle di colonne del disegno originale per cui non abbiamo ancora il dato. */
.non-collegato { color: var(--muted-2); font-size: 12.5px; }