/* «Chi usa LIA adesso»: sopra lo stile della pagina dei codici (../codici/stile.css). Un numero grande, le tessere, il grafico delle ore. */
#numeri { display: grid; gap: 16px; }
.etichetta { color: var(--tenue); font-size: 13px; font-weight: 600; margin: 0 0 4px; }
.sotto { color: var(--tenue); font-size: 13px; margin: 4px 0 0; }
.numero { font-size: 32px; font-weight: 700; line-height: 1.1; margin: 0; font-variant-numeric: tabular-nums; }
.numero-grande { font-size: 64px; font-weight: 750; line-height: 1; margin: 6px 0 0; font-variant-numeric: tabular-nums; }
.eroe { padding: 24px 26px; }
.eroe .etichetta { font-size: 15px; color: var(--testo); }
.tessere { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.tessera { padding: 16px 18px; }
.tessere.piccole .numero { font-size: 22px; }
.vecchio .numero, .vecchio .numero-grande { color: var(--tenue); }

/* il grafico: una colonna per ora, il massimo dei LIA Bridge di quell'ora */
.grafico { position: relative; margin-top: 8px; }
#barre { display: block; width: 100%; height: 180px; overflow: visible; }
#barre .griglia-linea { stroke: var(--bordo); stroke-width: 1; vector-effect: non-scaling-stroke; }
#barre .barra { fill: var(--accento); }
#barre .barra.vuota { fill: var(--bordo); }
#barre .zona { fill: transparent; cursor: default; }
#barre .barra { pointer-events: none; } /* il passaggio del mouse lo sente la zona di tutta la colonna, anche sopra la barra */
#barre .zona:hover + .barra, #barre .barra.accesa { fill-opacity: .8; }
.valore-max { position: absolute; transform: translateX(-50%); color: var(--tenue); font-size: 11px; line-height: 14px; pointer-events: none; font-variant-numeric: tabular-nums; }
.etichette-ore { display: grid; grid-template-columns: repeat(24, 1fr); color: var(--tenue); font-size: 11px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.etichette-ore span { text-align: center; white-space: nowrap; overflow: visible; }
.suggerimento {
  position: absolute; z-index: 2; pointer-events: none; min-width: 150px; max-width: 220px;
  background: var(--scheda); color: var(--testo); border: 1px solid var(--bordo); border-radius: 8px; padding: 8px 10px;
  font-size: 13px; box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}
.suggerimento strong { display: block; margin-bottom: 2px; }
.dettagli summary { cursor: pointer; color: var(--tenue); font-weight: 600; font-size: 14px; margin-top: 12px; }
details.scheda.dettagli summary { margin-top: 0; }
.elenco-noi { margin: 12px 0 0; padding-left: 18px; }
.elenco-noi li { margin-bottom: 6px; }
@media (max-width: 560px) {
  .numero-grande { font-size: 52px; }
  .numero { font-size: 28px; }
  .etichette-ore { font-size: 10px; }
}