/* ==========================================================================
   I CALCOLATORI DEL LOTTO — 24/09/2026
   --------------------------------------------------------------------------
   Stefano: «la veste del sito, ma il calcolatore che c'è lo vedo troppo
   monocromatico».
   Quindi: fondo, caratteri e ottone restano quelli di site.css — il sito deve
   sembrare lo stesso — e si aggiunge una tavolozza di colori usata SOLO per i
   dati: i numeri secondo il loro ruolo, le barre, la mappa dei ritardi, i
   bilanci in verde e in rosso. Mai per la cornice, sennò diventa un altro sito.
   ========================================================================== */

:root {
  /* I colori dei DATI (la cornice resta quella di site.css) */
  --cal-oro:     #C9A227;   /* il numero principale, quello che si gioca */
  --cal-oro-hi:  #DDBA45;
  --cal-verde:   #5E9E8A;   /* uscito, vincita, in linea con la media */
  --cal-azzurro: #4F9BD9;   /* il vertibile, i dati freddi */
  --cal-viola:   #A98BD6;   /* l'ambo, le combinazioni */
  --cal-ambra:   #E0A13C;   /* attenzione, ritardo sopra la media */
  --cal-corallo: #E0705C;   /* perdita, ritardo anomalo */

  --cal-oro-bg:     rgba(201, 162, 39, .12);
  --cal-verde-bg:   rgba( 94, 158, 138, .14);
  --cal-azzurro-bg: rgba( 79, 155, 217, .14);
  --cal-viola-bg:   rgba(169, 139, 214, .14);
  --cal-ambra-bg:   rgba(224, 161,  60, .14);
  --cal-corallo-bg: rgba(224, 112,  92, .14);
}

/* ── Intestazione: una striscia di colore che cambia per calcolatore ────── */
.cal-hero { position: relative; overflow: hidden; }
.cal-hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg,
    var(--cal-oro) 0%, var(--cal-ambra) 28%, var(--cal-corallo) 48%,
    var(--cal-viola) 68%, var(--cal-azzurro) 86%, var(--cal-verde) 100%);
}
.cal-hero .cal-icona {
  width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
  font-size: 1.6rem; margin: 0 auto 1rem; border: 1px solid var(--lm-line);
  background: var(--lm-bg-2);
}

/* ── L'archivio vero: la targhetta che dice su cosa stiamo lavorando ───── */
.cal-archivio {
  display: inline-flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  border: 1px solid var(--cal-verde); background: var(--cal-verde-bg);
  color: var(--lm-text); border-radius: 999px; padding: .38rem .9rem;
  font-size: .8rem; line-height: 1.3;
}
.cal-archivio .pallino {
  width: 8px; height: 8px; border-radius: 50%; background: var(--cal-verde); flex: none;
}
.cal-archivio.vuoto { border-color: var(--cal-ambra); background: var(--cal-ambra-bg); }
.cal-archivio.vuoto .pallino { background: var(--cal-ambra); }

/* ── I riquadri ─────────────────────────────────────────────────────────── */
.cal-box {
  background: var(--lm-bg-2); border: 1px solid var(--lm-line);
  border-radius: 14px; padding: 1.25rem 1.35rem; margin-bottom: 1rem;
}
.cal-box > h3 {
  font-family: var(--lm-sans); font-size: 1rem; font-weight: 600;
  margin: 0 0 .25rem; color: var(--lm-text);
}
.cal-box > .aiuto { color: var(--lm-muted); font-size: .84rem; margin: 0 0 1rem; line-height: 1.55; }
.cal-box.esito { border-color: var(--cal-oro); background: linear-gradient(180deg, var(--cal-oro-bg), transparent 60%); }

.cal-et {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--lm-muted); font-weight: 700; margin-bottom: .55rem;
}

/* ── I numeri: la pallina, col colore del ruolo ─────────────────────────── */
.cal-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; height: 2.5rem; padding: 0 .4rem; margin: .15rem;
  border-radius: 12px; font-family: var(--lm-mono); font-weight: 700; font-size: 1rem;
  background: var(--lm-bg-3); border: 1px solid var(--lm-line); color: var(--lm-text);
}
.cal-n.piccolo { min-width: 1.9rem; height: 1.9rem; font-size: .8rem; border-radius: 9px; }
.cal-n.grande  { min-width: 3.1rem; height: 3.1rem; font-size: 1.25rem; border-radius: 14px; }

.cal-n.oro     { background: var(--cal-oro-bg);     border-color: var(--cal-oro);     color: var(--cal-oro-hi); }
.cal-n.verde   { background: var(--cal-verde-bg);   border-color: var(--cal-verde);   color: var(--cal-verde); }
.cal-n.azzurro { background: var(--cal-azzurro-bg); border-color: var(--cal-azzurro); color: var(--cal-azzurro); }
.cal-n.viola   { background: var(--cal-viola-bg);   border-color: var(--cal-viola);   color: var(--cal-viola); }
.cal-n.ambra   { background: var(--cal-ambra-bg);   border-color: var(--cal-ambra);   color: var(--cal-ambra); }
.cal-n.corallo { background: var(--cal-corallo-bg); border-color: var(--cal-corallo); color: var(--cal-corallo); }
.cal-n.spento  { opacity: .32; }

/* ── Legenda dei colori ─────────────────────────────────────────────────── */
.cal-legenda { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .78rem; color: var(--lm-muted); }
.cal-legenda span { display: inline-flex; align-items: center; gap: .35rem; }
.cal-legenda i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* ── Le targhette dei risultati ─────────────────────────────────────────── */
.cal-tessere { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .7rem; }
.cal-tessera {
  background: var(--lm-bg-3); border: 1px solid var(--lm-line);
  border-radius: 12px; padding: .8rem .9rem; text-align: center;
}
.cal-tessera .v { display: block; font-size: 1.45rem; font-weight: 700; line-height: 1.15; color: var(--lm-text); }
.cal-tessera .l { display: block; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--lm-muted); margin-top: .25rem; }
.cal-tessera.oro     { border-color: var(--cal-oro);     background: var(--cal-oro-bg); }
.cal-tessera.oro .v     { color: var(--cal-oro-hi); }
.cal-tessera.verde   { border-color: var(--cal-verde);   background: var(--cal-verde-bg); }
.cal-tessera.verde .v   { color: var(--cal-verde); }
.cal-tessera.corallo { border-color: var(--cal-corallo); background: var(--cal-corallo-bg); }
.cal-tessera.corallo .v { color: var(--cal-corallo); }
.cal-tessera.azzurro { border-color: var(--cal-azzurro); background: var(--cal-azzurro-bg); }
.cal-tessera.azzurro .v { color: var(--cal-azzurro); }

/* ── Tabelle ────────────────────────────────────────────────────────────── */
.cal-tab { width: 100%; border-collapse: collapse; font-size: .85rem; }
.cal-tab th {
  text-align: left; color: var(--lm-muted); font-weight: 600; font-size: .68rem;
  letter-spacing: .05em; text-transform: uppercase; padding: .5rem .55rem;
  border-bottom: 1px solid var(--lm-line); white-space: nowrap;
}
.cal-tab td { padding: .5rem .55rem; border-bottom: 1px solid var(--lm-line-soft); vertical-align: middle; }
.cal-tab td.n, .cal-tab th.n { text-align: right; font-variant-numeric: tabular-nums; }
.cal-tab tbody tr:hover td { background: rgba(255, 255, 255, .02); }
.cal-tab .fioco { color: var(--lm-muted); font-size: .8rem; }

/* ── Barre ──────────────────────────────────────────────────────────────── */
.cal-barra { background: var(--lm-bg-3); border-radius: 6px; height: 9px; overflow: hidden; min-width: 60px; }
.cal-barra > span { display: block; height: 100%; border-radius: 6px; background: var(--cal-oro); min-width: 2px; }
.cal-barra > span.verde   { background: var(--cal-verde); }
.cal-barra > span.ambra   { background: var(--cal-ambra); }
.cal-barra > span.corallo { background: var(--cal-corallo); }
.cal-barra > span.azzurro { background: var(--cal-azzurro); }

/* ── La mappa dei ritardi: i 90 numeri colorati ─────────────────────────── */
.cal-mappa { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
@media (max-width: 560px) { .cal-mappa { grid-template-columns: repeat(6, 1fr); } }
.cal-mappa .cella {
  aspect-ratio: 1; border-radius: 9px; display: grid; place-items: center;
  font-family: var(--lm-mono); font-weight: 700; font-size: .82rem;
  border: 1px solid transparent; cursor: default;
}
.cal-mappa .cella.l0 { background: var(--cal-azzurro-bg); border-color: var(--cal-azzurro); color: var(--cal-azzurro); }
.cal-mappa .cella.l1 { background: var(--cal-verde-bg);   border-color: var(--cal-verde);   color: var(--cal-verde); }
.cal-mappa .cella.l2 { background: var(--cal-ambra-bg);   border-color: var(--cal-ambra);   color: var(--cal-ambra); }
.cal-mappa .cella.l3 { background: var(--cal-corallo-bg); border-color: var(--cal-corallo); color: var(--cal-corallo); }

/* ── Moduli ─────────────────────────────────────────────────────────────── */
.cal-campo { margin-bottom: .9rem; }
.cal-campo > label { display: block; font-size: .78rem; color: var(--lm-muted); margin-bottom: .3rem; }
.cal-box .form-control,
.cal-box .form-select {
  background: var(--lm-bg-3); border-color: var(--lm-line); color: var(--lm-text);
}
.cal-box .form-control:focus,
.cal-box .form-select:focus {
  background: var(--lm-bg-3); border-color: var(--cal-oro); color: var(--lm-text);
  box-shadow: 0 0 0 .2rem var(--cal-oro-bg);
}
.cal-box .form-control::placeholder { color: var(--lm-muted); opacity: .7; }

/* Le ruote e le sorti: pastiglie da spuntare, non checkbox in fila */
.cal-scelte { display: flex; flex-wrap: wrap; gap: .4rem; }
.cal-scelte label {
  margin: 0; cursor: pointer; border: 1px solid var(--lm-line); border-radius: 999px;
  padding: .3rem .8rem; font-size: .82rem; color: var(--lm-muted); user-select: none;
  background: var(--lm-bg-3); transition: border-color .12s, color .12s, background .12s;
}
.cal-scelte input { position: absolute; opacity: 0; pointer-events: none; }
.cal-scelte label:has(input:checked) {
  border-color: var(--cal-oro); color: var(--cal-oro-hi); background: var(--cal-oro-bg);
}
.cal-scelte.verde label:has(input:checked) {
  border-color: var(--cal-verde); color: var(--cal-verde); background: var(--cal-verde-bg);
}

/* ── Il bilancio: verde se si guadagna, corallo se si perde ────────────── */
.cal-bilancio { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-bilancio.su  { color: var(--cal-verde); }
.cal-bilancio.giu { color: var(--cal-corallo); }

/* ── L'avviso legale, sempre in fondo ───────────────────────────────────── */
.cal-avviso {
  border: 1px solid var(--lm-line); border-left: 3px solid var(--cal-ambra);
  border-radius: 10px; padding: .9rem 1.1rem; font-size: .8rem;
  color: var(--lm-muted); line-height: 1.6; background: var(--lm-bg-3);
}
.cal-avviso b { color: var(--lm-text); }

/* ── Stati ──────────────────────────────────────────────────────────────── */
.cal-caricamento { color: var(--lm-muted); font-size: .85rem; }
.cal-vuoto { color: var(--lm-muted); font-size: .86rem; text-align: center; padding: 2rem 1rem; }