/* stile.css -- LONEWOLVES.
   Niente framework: un foglio solo, letto in un colpo, che non invecchia con
   la moda del mese. Scuro perche' si guarda accanto al simulatore, e il
   simulatore e' scuro. */

:root {
  --fondo:        #0d1117;
  --fondo-2:      #151b23;
  --fondo-3:      #1c242e;
  --bordo:        #2a3441;
  --testo:        #e6edf3;
  --testo-2:      #9aa7b4;
  --testo-3:      #6b7785;
  --ambra:        #d9a441;
  --ambra-scuro:  #8a6720;
  --blu:          #4a9eda;
  --rosso:        #d9534f;
  --verde:        #4fb477;
  --raggio:       6px;
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  --testo-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* ------------------------------------------------------------------
   20/9/2026 -- l'accesso riusciva e sembrava non succedere niente.

   Il browser nasconde [hidden] con `display: none`, ma e' una regola del suo
   foglio di stile predefinito: qualunque regola nostra che imposti `display`
   su una classe la batte per specificita'. `.accesso { display: grid }`
   faceva esattamente questo, e la schermata di accesso restava sopra l'app
   gia' caricata -- nessun errore, perche' errori non ce n'erano.

   Vale per qualunque elemento nascosto, non solo per quello: per questo sta
   qui in cima e non dentro .accesso.
   ------------------------------------------------------------------ */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--testo-font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 600; letter-spacing: .01em; margin: 0 0 .4em; }
h1 { font-size: 1.35rem; letter-spacing: .12em; }
h2 { font-size: 1.05rem; }
h3 { font-size: .92rem; color: var(--testo-2); text-transform: uppercase; letter-spacing: .09em; }
p { margin: 0 0 .7em; }
a { color: var(--blu); }

/* ---------- accesso ---------- */
.accesso {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 24px 16px;
  background:
    radial-gradient(1100px 500px at 50% -10%, #17202b 0%, transparent 70%),
    var(--fondo);
}
.accesso-riquadro {
  width: 100%; max-width: 380px;
  background: var(--fondo-2);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 28px 26px 22px;
}
.marchio { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; }
.marchio h1 { margin: 0; }
.marchio p { margin: 0; color: var(--testo-3); font-size: .8rem; }
.marchio-segno {
  font-size: 1.7rem; color: var(--ambra);
  transform: rotate(-45deg); display: inline-block;
}

form { display: flex; flex-direction: column; gap: 4px; }
label { font-size: .78rem; color: var(--testo-2); margin-top: 10px; }
.nota-campo { color: var(--testo-3); font-weight: normal; }
input, select, textarea {
  background: var(--fondo);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  color: var(--testo);
  padding: 9px 11px;
  font-family: inherit; font-size: .92rem;
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--ambra); box-shadow: 0 0 0 2px rgba(217,164,65,.14);
}

button {
  font-family: inherit; font-size: .88rem;
  border-radius: var(--raggio); cursor: pointer;
  border: 1px solid var(--bordo); background: var(--fondo-3); color: var(--testo);
  padding: 9px 14px;
}
button:hover { border-color: var(--testo-3); }
button.principale {
  margin-top: 16px; background: var(--ambra); border-color: var(--ambra);
  color: #1a1206; font-weight: 600;
}
button.principale:hover { background: #e7b355; }
button.piatto { background: transparent; }
button.piccolo { padding: 5px 10px; font-size: .78rem; }
button:disabled { opacity: .5; cursor: not-allowed; }

.errore {
  margin-top: 12px; padding: 9px 11px;
  background: rgba(217,83,79,.1); border: 1px solid rgba(217,83,79,.35);
  border-radius: var(--raggio); color: #f2b4b2; font-size: .84rem;
}
.accesso-pubblico {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--bordo);
  text-align: center;
}
.accesso-pubblico p { color: var(--testo-3); font-size: .8rem; margin-bottom: 8px; }

/* ---------- struttura ---------- */
.barra {
  display: flex; align-items: center; gap: 20px;
  padding: 0 18px; height: 52px;
  background: var(--fondo-2); border-bottom: 1px solid var(--bordo);
  position: sticky; top: 0; z-index: 20;
}
.barra-marchio { display: flex; align-items: center; gap: 9px; }
.barra-marchio strong { letter-spacing: .13em; font-size: .92rem; }
.barra-sottotitolo { color: var(--testo-3); font-size: .72rem; }
@media (max-width: 860px) { .barra-sottotitolo { display: none; } }

#navigazione { display: flex; gap: 2px; flex: 1; overflow-x: auto; }
#navigazione button {
  border: none; background: transparent; color: var(--testo-2);
  padding: 6px 11px; border-radius: var(--raggio); white-space: nowrap;
}
#navigazione button:hover { color: var(--testo); background: var(--fondo-3); }
#navigazione button.attiva { color: var(--ambra); background: var(--fondo-3); }

.barra-utente { display: flex; align-items: center; gap: 11px; font-size: .82rem; color: var(--testo-2); }

main { padding: 22px 18px 40px; max-width: 1280px; margin: 0 auto; }
.pie {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 14px 18px; border-top: 1px solid var(--bordo);
  color: var(--testo-3); font-size: .74rem;
}
.pie-promessa { color: var(--ambra-scuro); }

/* ---------- elementi ---------- */
.griglia { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.griglia.due { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }

.scheda {
  background: var(--fondo-2); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 16px 17px;
}
.scheda-intestazione {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
}
.scheda h3 { margin: 0; }

.numerone { font-size: 1.9rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.numerone.ambra { color: var(--ambra); }
.numerone.verde { color: var(--verde); }
.numerone.rosso { color: var(--rosso); }
.sotto-numero { color: var(--testo-3); font-size: .78rem; }

.pastiglia {
  display: inline-block; padding: 2px 8px; border-radius: 99px;
  font-size: .7rem; letter-spacing: .05em; text-transform: uppercase;
  border: 1px solid var(--bordo); color: var(--testo-2);
}
.pastiglia.viva { border-color: rgba(79,180,119,.45); color: var(--verde); background: rgba(79,180,119,.09); }
.pastiglia.muta { border-color: rgba(217,83,79,.45); color: var(--rosso); background: rgba(217,83,79,.09); }
.pastiglia.attesa { border-color: rgba(217,164,65,.45); color: var(--ambra); background: rgba(217,164,65,.09); }
.pastiglia.blu { border-color: rgba(74,158,218,.45); color: var(--blu); background: rgba(74,158,218,.09); }

table { width: 100%; border-collapse: collapse; font-size: .86rem; }
th {
  text-align: left; font-weight: 500; color: var(--testo-3);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  padding: 6px 9px; border-bottom: 1px solid var(--bordo);
}
td { padding: 8px 9px; border-bottom: 1px solid rgba(42,52,65,.55); }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(255,255,255,.02); }
td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }

.kneeboard {
  font-family: var(--mono); font-size: .8rem; line-height: 1.7;
  white-space: pre-wrap; margin: 0;
  background: var(--fondo); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 14px 16px; color: #cfe3d2;
}

.barra-prob { display: flex; height: 7px; border-radius: 99px; overflow: hidden; margin: 10px 0 4px; }
.barra-prob span { display: block; height: 100%; }

.vuoto { color: var(--testo-3); font-size: .86rem; padding: 14px 0; text-align: center; }

.avviso {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: var(--fondo-3); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 10px 16px; font-size: .86rem;
  z-index: 60; max-width: 90vw;
}
.avviso.male { border-color: rgba(217,83,79,.5); color: #f2b4b2; }
.avviso.bene { border-color: rgba(79,180,119,.5); color: #b6e5c8; }

.riga-campo { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.riga-campo > * { flex: 1 1 160px; }
.riga-campo button { flex: 0 0 auto; }

code.token {
  display: block; font-family: var(--mono); font-size: .78rem;
  background: var(--fondo); border: 1px solid var(--ambra-scuro);
  border-radius: var(--raggio); padding: 11px 13px; margin: 9px 0;
  word-break: break-all; color: var(--ambra);
}

.elenco-necessita { list-style: none; margin: 0; padding: 0; }
.elenco-necessita li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid rgba(42,52,65,.55);
}
.elenco-necessita li:last-child { border-bottom: none; }
.moltiplicatore { font-family: var(--mono); color: var(--ambra); font-weight: 600; }

/* ==================================================================
   Aggiunte del 20/9/2026 -- potenziamento del sito.
   ================================================================== */

/* Un dato che manca si vede che manca, e non si confonde con uno zero. */
.manca { color: var(--testo-3); cursor: help; }
.rosso-testo { color: var(--rosso); }

/* Le tabelle larghe scorrono da sole invece di sfondare la pagina sul
   telefono: su schermo stretto una tabella che sborda trascina tutto. */
.tabella-scorre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabella-scorre table { min-width: 100%; }

/* Scheletro di caricamento. Meglio di uno "Carico...": fa vedere dove
   arriveranno le cose, quindi la pagina non salta quando arrivano. */
.scheletro { pointer-events: none; }
.riga-finta {
  height: 12px; border-radius: 4px; margin: 10px 0;
  background: linear-gradient(90deg, var(--fondo-3) 25%, #222c38 50%, var(--fondo-3) 75%);
  background-size: 200% 100%;
  animation: scorri 1.4s ease-in-out infinite;
}
.riga-finta.lunga { width: 62%; height: 20px; }
.riga-finta.corta { width: 38%; }
@keyframes scorri { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .riga-finta { animation: none; } }

/* Quello che non e' arrivato si dichiara, e il resto resta in piedi. */
.nota-mancante {
  margin-bottom: 14px; padding: 9px 12px; font-size: .8rem;
  background: rgba(217,164,65,.08); border: 1px solid rgba(217,164,65,.3);
  border-radius: var(--raggio); color: #e3c98f;
}

.riquadro-avviso {
  margin-top: 14px; padding: 11px 13px;
  background: rgba(74,158,218,.07); border-left: 3px solid var(--blu);
  border-radius: 0 var(--raggio) var(--raggio) 0; font-size: .87rem;
}

.collegamento-scheda {
  display: inline-block; margin-top: 10px; font-size: .8rem; text-decoration: none;
}
.collegamento-scheda:hover { text-decoration: underline; }

.quadretto {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  margin-right: 6px; vertical-align: baseline;
}

code {
  font-family: var(--mono); font-size: .82em;
  background: rgba(255,255,255,.05); padding: 1px 5px; border-radius: 4px;
}

/* I livelli della piattaforma. */
.livello {
  background: var(--fondo); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 15px 16px;
}
.livello.tuo { border-color: var(--ambra); box-shadow: 0 0 0 1px rgba(217,164,65,.25); }
.livello h4 { margin: 2px 0 6px; font-size: .95rem; }
.livello-prezzo { font-size: 1.5rem; font-weight: 600; color: var(--ambra); line-height: 1.1; }
.livello-prezzo span { font-size: .7rem; color: var(--testo-3); font-weight: normal; }
.elenco-funzioni { list-style: none; margin: 10px 0 0; padding: 0; font-size: .8rem; color: var(--testo-2); }
.elenco-funzioni li { padding: 3px 0 3px 15px; position: relative; }
.elenco-funzioni li::before {
  content: '\2713'; position: absolute; left: 0; color: var(--verde); font-size: .8rem;
}

.scheda table th { width: 40%; }

select.cambia-ruolo { padding: 4px 7px; font-size: .8rem; width: auto; min-width: 130px; }

/* ---- telefono ----
   Il sito si guarda anche dal divano mentre il server gira: se a quella
   larghezza non si legge, non lo apre nessuno. */
@media (max-width: 760px) {
  main { padding: 14px 12px 32px; }
  .griglia, .griglia.due { grid-template-columns: 1fr; }
  .barra { height: auto; flex-wrap: wrap; padding: 8px 12px; gap: 10px; }
  #navigazione { order: 3; width: 100%; padding-bottom: 2px; }
  .barra-utente { margin-left: auto; font-size: .75rem; }
  .scheda { padding: 13px 13px; }
  .numerone { font-size: 1.6rem; }
  table { font-size: .8rem; }
  th, td { padding: 6px 7px; }
  .accesso-riquadro { padding: 22px 18px 18px; }
}

/* Chi usa la tastiera deve vedere dove si trova. */
:focus-visible { outline: 2px solid var(--ambra); outline-offset: 2px; }