/* ═══════════════════════════════════════════════════════════════════════════
 * AgileVolto — lo stile delle tre pagine del percorso di giuria:
 *   index.html    la vetrina commerciale (la home)
 *   accedi.html   l'ingresso con utente e password
 *   conto.html    l'area del conto (galleria, API, conto)
 *
 * NON riscrive stile.css: lo IMPORTA e ci aggiunge sopra. Colori, caratteri,
 * bottoni, schede e avvisi restano quelli della demo — queste pagine devono
 * sembrare la stessa cosa, perché lo sono.
 *
 * Nessuna risorsa esterna: nessun CDN, nessun font scaricato. I caratteri sono
 * quelli di sistema (`--carattere` in stile.css). Nessuno stile in linea: la
 * CSP del sito (style-src 'self') lo vieta, quindi tutto sta qui.
 * ═══════════════════════════════════════════════════════════════════════════ */

@import url("stile.css");

/* ───────────────────────────────────────────────────────── impaginazione */

.foglio {
  max-width: 60rem; margin: 0 auto; padding: 1.2rem 1rem 3rem;
  display: flex; flex-direction: column; gap: 1.4rem;
}
.foglio.stretto { max-width: 42rem; }

/* ───────────────────────────────────────────────────────────── la landing */

.insegna {
  display: grid; gap: 1rem; align-items: center;
  padding: 1.6rem 0 .4rem;
}
@media (min-width: 52rem) {
  .insegna { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2rem; }
}
.insegna h1 { font-size: clamp(1.5rem, 4.2vw, 2.2rem); text-wrap: balance; }
.insegna .occhiello {
  display: inline-block; font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--primario); font-weight: 700;
  margin-bottom: .5rem;
}
.insegna .sommario { font-size: 1.05rem; color: var(--ardesia); max-width: 46ch; }
.insegna .sommario strong { color: var(--inchiostro); }

.azioni { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.bottone.grande { padding: .7rem 1.2rem; font-size: 1rem; }

/* Le tre parole d'ordine del prodotto, sotto l'insegna. */
.cartigli {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.cartigli li {
  border: var(--bordo); border-radius: var(--raggio);
  background: var(--carta-ombra); padding: .8rem .9rem;
}
.cartigli b { display: block; margin-bottom: .2rem; }
.cartigli span { color: var(--ardesia); font-size: .88rem; }

/* Le capacità: cosa sa fare, una riga per riga. */
.capacita { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
@media (min-width: 44rem) {
  .capacita { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.capacita li { display: grid; gap: .15rem; }
.capacita .titolo-cap { font-weight: 700; }
.capacita .detta { color: var(--ardesia); font-size: .9rem; }
.capacita code { font-family: var(--carattere-mono); font-size: .9em; }

/* ─────────────────────────────────── le schede delle persone (landing e conto) */

.ritratti {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.ritratto {
  border: var(--bordo); border-radius: var(--raggio); background: var(--carta);
  padding: .9rem; display: flex; flex-direction: column; gap: .5rem; min-width: 0;
}
.ritratto .faccia {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center top;
  border-radius: 12px; border: 1px solid var(--filo); background: var(--carta-ombra);
  display: block;
}
/* Il posto del ritratto quando il ritratto non c'è: un riquadro dichiarato,
   non un'immagine rotta. */
.ritratto .faccia-assente {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 12px;
  border: 1px dashed var(--filo); background: var(--carta-ombra);
  display: grid; place-items: center; text-align: center;
  color: var(--ardesia); font-size: .8rem; padding: .8rem;
}
.ritratto h3 { margin: 0; font-size: 1rem; }
.ritratto .ruolo { color: var(--ardesia); font-size: .88rem; margin: 0; }
.ritratto .dati { color: var(--ardesia); font-size: .8rem; margin: 0; }
.ritratto .dati code { font-family: var(--carattere-mono); }
.ritratto .tono { color: var(--ardesia); font-size: .82rem; margin: 0; }
.ritratto .comandi-ritratto { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; }
.ritratto .comandi-ritratto .bottone { font-size: .88rem; padding: .4rem .7rem; }
.ritratto video {
  width: 100%; border-radius: 12px; background: #000; display: block;
}
.ritratto .esito-ritratto { margin: 0; font-size: .85rem; }

/* la targhetta «tuo» sugli avatar salvati dall'utente */
.targhetta {
  display: inline-block; font-size: .72rem; letter-spacing: .04em;
  text-transform: uppercase; font-weight: 700;
  border: 1px solid currentColor; border-radius: 999px; padding: .05rem .45rem;
  color: var(--accento);
}

/* ──────────────────────────────────────────────────────── le tre schede */

.linguette {
  display: flex; flex-wrap: wrap; gap: .4rem;
  border-bottom: var(--bordo); padding-bottom: .6rem;
}
.linguette .bottone[aria-selected="true"] {
  background: var(--primario); color: var(--carta); border-color: var(--primario);
}
.pagina-scheda[hidden] { display: none; }
.pagina-scheda { display: grid; gap: 1rem; }

/* ─────────────────────────────────────────────────── la chiave e gli esempi */

.blocco-codice { display: grid; gap: .35rem; }
.blocco-codice .capo-codice {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
}
.blocco-codice .capo-codice h3 { margin: 0; font-size: .95rem; }
.blocco-codice .capo-codice .lingua {
  font-family: var(--carattere-mono); font-size: .78rem; color: var(--ardesia);
}
.blocco-codice .capo-codice .bottone { margin-inline-start: auto; font-size: .82rem; padding: .3rem .6rem; }
.blocco-codice pre {
  font-family: var(--carattere-mono); font-size: .78rem; line-height: 1.5;
  white-space: pre; overflow-x: auto;
  background: var(--carta-ombra); border: var(--bordo); border-radius: 10px;
  padding: .7rem .8rem; margin: 0;
}
.blocco-codice .nota { margin: 0; }

.chiave-riga { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.chiave-riga .chiave-mostra { flex: 1 1 18rem; margin: 0; }

/* ────────────────────────────────────────────────────────── il piè di pagina */

.piede .righe { display: flex; flex-wrap: wrap; gap: .8rem; }
.piede .righe a { font-size: .9rem; }

/* ─────────────────────────────────────────────────────────────── minuzie */

.nota-forte { color: var(--inchiostro); }
.riga-campi { display: grid; gap: .8rem; }
@media (min-width: 34rem) { .riga-campi.due { grid-template-columns: 1fr 1fr; } }
.spazio-sopra { margin-top: 1rem; }
.conteggio { font-family: var(--carattere-mono); }