/* Affiliati: pagina privata, candidatura e pannello (docs/specifiche/affiliati.md §3). Solo i colori, i caratteri e le
   misure di ev.css; telefono prima di tutto (una colonna, bottoni da 48 px a tutta larghezza), poi il computer. */

/* Quello che è nascosto resta nascosto anche se una classe gli dà un «display» (l'elenco dei sotto-affiliati è .aff-sotto). */
[hidden] { display: none !important; }

/* ---------- «Salta al contenuto»: nascosto finché non riceve il fuoco dalla tastiera ---------- */
.aff .salta, .pannello .salta { position: absolute; left: -10000px; top: 0; }
.aff .salta:focus, .pannello .salta:focus {
  left: 16px; top: 8px; z-index: 20; padding: 0.5rem 0.9rem; border-radius: var(--r-piccolo);
  background: var(--superficie-2); color: var(--inchiostro);
}

/* ---------- testata: «Esci» è un modulo POST, ma si legge come le altre voci ---------- */
.aff-esci { display: inline; margin: 0; }
.aff-esci button {
  background: none; border: 0; padding: 0; min-height: 48px; cursor: pointer;
  font: inherit; color: var(--tenue);
}
.aff-esci button:hover { color: var(--inchiostro); }
@media (max-width: 34rem) {
  .aff .testata-riga { flex-wrap: wrap; gap: 0 1rem; padding-top: 0.4rem; padding-bottom: 0.2rem; }
  .aff .menu { width: 100%; gap: 1.1rem; font-size: 0.9rem; }
  .aff .menu a, .aff-esci button { white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---------- respiro sotto la testata (in ev.css il padding di .contenitore copre quello di main) ---------- */
.aff main.contenitore { padding-top: clamp(1.75rem, 5vw, 3.5rem); padding-bottom: 4rem; }

/* ---------- piede compatto delle pagine della corsia ---------- */
.aff-piede { color: var(--tenue); font-size: 0.85rem; }
.aff-piede p { max-width: none; margin: 0; }

/* ---------- riepilogo: quanto ti dobbiamo, quanto ti abbiamo pagato, quanto hai guadagnato ---------- */
.aff-riepilogo {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: -1.5rem 0 0;
  background: var(--linea); border: 1px solid var(--linea); border-radius: var(--r-medio); overflow: hidden;
}
.aff-riepilogo > div { background: var(--superficie); padding: 0.9rem 1rem; }
.aff-riepilogo dt { color: var(--tenue); font-size: 0.8rem; }
.aff-riepilogo dd {
  margin: 0.15rem 0 0; font-family: var(--titoli); font-size: 1.45rem; line-height: 1.15;
  font-variation-settings: "opsz" 72; font-variant-numeric: tabular-nums;
}
@media (max-width: 34rem) {
  .aff-riepilogo { grid-template-columns: 1fr; }
  .aff-riepilogo > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
}

/* ---------- il codice e i link da condividere ---------- */
.aff-codice {
  background: var(--superficie); border: 1px solid var(--linea-forte); border-radius: var(--r-grande);
  padding: 1.25rem 1.25rem 1rem; margin: 0 0 1rem;
}
.aff-codice-riga { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.aff-codice-testo {
  margin: 0; font-family: var(--titoli); font-size: clamp(2.1rem, 1.5rem + 3vw, 3rem); line-height: 1;
  letter-spacing: 0.08em; font-variation-settings: "opsz" 144; color: var(--inchiostro); overflow-wrap: anywhere;
}
.aff-codice-info { margin: 0.9rem 0 0.25rem; color: var(--inchiostro); }
.aff-link { list-style: none; margin: 0.5rem 0 0.75rem; padding: 0; }
.aff-link li, .aff-link-solo {
  display: grid; grid-template-columns: minmax(8.5rem, 11rem) minmax(0, 1fr) auto; gap: 0.25rem 1rem; align-items: center;
  padding: 0.6rem 0; border-top: 1px solid var(--linea);
}
.aff-link-solo { grid-template-columns: minmax(0, 1fr) auto; border-top: 0; margin: 0.25rem 0 0.5rem; }
.aff-link-nome { font-weight: 500; }
.aff-link-url { font-size: 0.85rem; color: var(--tenue); overflow-wrap: anywhere; text-decoration-color: var(--linea-forte); }
.aff-link-url:hover { color: var(--inchiostro); }
@media (max-width: 34rem) {
  .aff-codice { padding: 1.1rem 1rem 0.9rem; }
  .aff-codice-riga .pulsante { width: 100%; }
  .aff-link li, .aff-link-solo { grid-template-columns: 1fr; }
  .aff-link .pulsante, .aff-link-solo .pulsante { width: 100%; }
}

/* ---------- numeri, tabelle a schede, note ---------- */
.aff-numeri { margin-bottom: 1rem; }
.aff-numeri .valore { margin: 0; }
.aff-numeri .nome { margin: 0.2rem 0 0; }
.aff-tabella td.corto, .aff-tabella td.importo { white-space: nowrap; }
@media (max-width: 34rem) {
  .aff-numeri > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.8rem 1rem; }
  .aff-numeri .valore { order: 2; font-size: 1.5rem; }
  .aff-numeri .nome { order: 1; margin: 0; }
}
.aff-nota { color: var(--tenue); margin-top: 1rem; }
.aff-sotto { display: block; color: var(--tenue); font-size: 0.8rem; }
.aff-tabella { margin-top: 0.5rem; }
.aff-tabella td.importo .aff-sotto { text-align: right; }
.aff-pagine { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; margin-top: 1rem; }
.aff-scarica { margin-top: 1rem; }
.aff-rete-totale { font-family: var(--titoli); font-size: 1.35rem; line-height: 1.3; margin-top: 1rem; }
@media (max-width: 34rem) {
  .aff-tabella tr { grid-template-columns: 1fr 1fr; gap: 0.35rem 1rem; padding: 0.85rem 0; }
  .aff-tabella td::before { content: attr(data-etichetta); display: block; color: var(--tenue); font-size: 0.75rem; }
  .aff-tabella td.importo { text-align: left; }
  .aff-tabella td.importo .aff-sotto { text-align: left; }
  .aff-pagine .pulsante { flex: 1 1 100%; }
}

/* ---------- materiali: riquadri da toccare, due colonne al telefono ---------- */
.aff-materiali-titolo { margin: 1.25rem 0 0.5rem; font-size: 1.05rem; }
.aff-materiali { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); }
.aff-materiale {
  display: flex; flex-direction: column; justify-content: space-between; gap: 0.35rem; height: 100%; min-height: 48px;
  padding: 0.75rem 0.9rem; border: 1px solid var(--linea-forte); border-radius: var(--r-medio);
  background: var(--superficie); color: var(--inchiostro); text-decoration: none; line-height: 1.35;
}
.aff-materiale:hover { border-color: var(--lavanda); color: var(--inchiostro); }
.aff-materiale-tipo { color: var(--lavanda); font-size: 0.8rem; }
@media (max-width: 34rem) {
  .aff-materiali { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .aff-materiale { padding: 0.65rem 0.75rem; font-size: 0.92rem; }
}

/* ---------- candidatura ---------- */
.aff-modulo { margin-top: 2rem; }
.aff-modulo fieldset { border: 0; padding: 0; margin: 0 0 1.1rem; min-width: 0; }
.aff-modulo legend { font-weight: 500; padding: 0; margin-bottom: 0.4rem; }
.aff-scelte { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.aff-scelta {
  display: flex; align-items: center; gap: 0.75rem; min-height: 48px; padding: 0.5rem 0.9rem; cursor: pointer;
  border: 1px solid var(--linea-forte); border-radius: var(--r-piccolo); background: var(--superficie);
}
.aff-scelta:has(input:checked) { border-color: var(--viola-acceso); background: var(--superficie-2); }
.aff-scelta input { width: 1.25rem; height: 1.25rem; accent-color: var(--viola-acceso); margin: 0; flex: none; }
.aff-termini { display: flex; gap: 0.75rem; align-items: flex-start; cursor: pointer; }
.aff-termini input { width: 1.4rem; height: 1.4rem; accent-color: var(--viola-acceso); margin: 0.15rem 0 0; flex: none; }
.campo.errore .aff-scelta, .campo.errore.aff-termini-campo .aff-termini input { border-color: var(--rosso); }
.aff-trappola { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.aff-invia { margin-top: 1.5rem; }
.aff-invia .pulsante { min-width: 16rem; }
@media (max-width: 34rem) { .aff-invia .pulsante { width: 100%; min-width: 0; } }
.aff-invito {
  display: flex; gap: 0.75rem; align-items: center; margin: 1.25rem 0 0; padding: 0.8rem 1rem;
  border-radius: var(--r-medio); background: var(--superficie); border: 1px solid var(--linea);
}

/* ---------- pulsanti che si leggono come collegamenti (aprono parti della pagina o finestre) ---------- */
button.link-quieto {
  background: none; border: 0; padding: 0.35rem 0; min-height: 44px; cursor: pointer; font: inherit; font-size: 0.95rem;
  text-align: left; color: var(--lavanda); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px;
}
button.link-quieto:hover { color: var(--inchiostro); }
@media (min-width: 48rem) {      /* nelle righe delle tabelle al computer: sulla stessa linea del testo («40 % Cambia») */
  .aff-tabella td button.link-quieto { min-height: 0; padding: 0; }
}

/* ---------- pannello ---------- */
.aff-pannello-sezione { margin-top: 2.75rem; }
.aff-spazio { margin-top: 1.5rem; }
.aff-pannello-sezione > h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; }
.aff-pannello-sezione > h2 .tenue { font-family: var(--testo); font-size: 0.9rem; font-weight: 400; }
.aff-avviso { --stato: var(--verde); }
.aff-segno { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.78rem; white-space: nowrap;
  border: 1px solid var(--linea-forte); color: var(--tenue); }
.aff-segno.si { border-color: rgba(52, 211, 153, 0.55); color: var(--verde); }
.aff-segno.attenzione { border-color: rgba(240, 180, 41, 0.55); color: var(--oro); }
.aff-azioni-riga { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.aff-azioni-riga .pulsante { min-height: 40px; padding: 0 0.9rem; font-size: 0.9rem; }
.aff-rete-riga td { background: var(--superficie); }
.aff-membri { margin: 0.25rem 0 0.75rem; }
.aff-membri td { font-size: 0.85rem; }
/* dec:D66: il riquadro di una rete (quanto versare e a chi) e i tuoi affiliati */
.aff-rete { border: 1px solid var(--linea-forte); background: var(--superficie); border-radius: var(--r-piccolo, 8px);
  padding: 0.75rem 1rem; margin: 0 0 1.25rem; }
.aff-rete h3, #diretti h3 { margin: 0 0 0.35rem; }
.aff-totale { font-size: 1.15rem; margin: 0 0 0.25rem; }
.aff-membri tfoot th, .aff-membri tfoot td { font-weight: 600; border-top: 2px solid var(--linea-forte); }
.aff-id { font-variant-numeric: tabular-nums; }
.aff-id button.copia { margin-left: 0.35rem; background: none; border: 1px solid var(--linea); border-radius: 6px; color: var(--tenue);
  font: 400 0.75rem/1 var(--testo); padding: 0.2rem 0.4rem; cursor: pointer; min-height: 0; }
.aff-id button.copia:hover { color: var(--inchiostro); border-color: var(--lavanda); }
.aff-cerca { display: flex; gap: 0.5rem; margin: 0.75rem 0; }
.aff-cerca .pulsante { flex: none; }
.aff-cerca input { flex: 1; min-width: 0; min-height: 48px; padding: 0.5rem 0.85rem; border-radius: var(--r-piccolo); background: var(--superficie);
  color: var(--inchiostro); border: 1px solid var(--linea-forte); font: inherit; }
.aff-calcola input { flex: 0 1 13rem; }
.aff-copia-piccolo { margin-left: 0.35rem; background: none; border: 1px solid var(--linea); border-radius: 6px; color: var(--tenue);
  font: 400 0.75rem/1 var(--testo); padding: 0.2rem 0.4rem; cursor: pointer; }
.aff-mesi { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.75rem; }
.aff-anteprima { border-left: 4px solid var(--viola-acceso); background: var(--superficie); padding: 0.75rem 1rem;
  border-radius: 0 var(--r-piccolo) var(--r-piccolo) 0; margin: 0.75rem 0; }
.aff-anteprima p { margin: 0 0 0.35rem; }
.aff-anteprima p:last-child { margin-bottom: 0; }
dialog.aff-dialogo { width: min(34rem, calc(100vw - 32px)); }
dialog.aff-dialogo h2 { font-size: 1.35rem; }
dialog.aff-dialogo .campo input, dialog.aff-dialogo .campo select, dialog.aff-dialogo .campo textarea { width: 100%; }
.aff-due { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
/* Schede del pannello al telefono (pannello.css: td a griglia, etichetta a sinistra): nelle mie celle con più righe
   (nome + email + tipo, partita IVA + controllo) l'etichetta occupa tutta la colonna sinistra e il resto va a destra,
   una riga sotto l'altra. Le celle che coprono tutta la riga (colspan) non hanno etichetta. */
@media (max-width: 47.99rem) {
  .pannello .elenco.aff-tabella td { row-gap: 0; }
  .pannello .elenco.aff-tabella td::before { grid-column: 1; grid-row: 1 / span 6; }
  .pannello .elenco.aff-tabella td > * { grid-column: 2; }
  .pannello .elenco.aff-tabella td > .aff-segno { justify-self: start; }
  .pannello .elenco.aff-tabella td[colspan] { display: block; }
  .pannello .elenco.aff-tabella td[colspan]::before { content: none; }
}
@media (max-width: 34rem) {
  .aff-due { grid-template-columns: 1fr; }
  .pannello .aff-tabella td::before, .pannello .elenco.aff-tabella td::before { content: attr(data-etichetta); display: block;
    color: var(--tenue); font-size: 0.72rem; }
}

/* 21/10/2026 (Alessio): le schede del vecchio plugin nell'area — istruzioni con le domande frequenti apribili, materiale
   scientifico coi video. */
.aff-guida h3 { margin-top: 1.75rem; }
.aff-faq { margin-top: 0.75rem; border-top: 1px solid var(--linea); }
.aff-faq details { border-bottom: 1px solid var(--linea); }
.aff-faq summary { cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0; font-weight: 600; }
.aff-faq summary::-webkit-details-marker { display: none; }
.aff-faq summary::before { content: "+"; flex: none; width: 1.25rem; color: var(--lavanda); font-weight: 600; }
.aff-faq details[open] summary::before { content: "−"; }
.aff-faq details > :not(summary) { margin: 0 0 0.9rem 1.75rem; }
.aff-faq ul, .aff-stampa { padding-left: 1.2rem; }
.aff-faq li, .aff-stampa li { margin: 0.3rem 0; }
.aff-video { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); margin-top: 1rem; }
.aff-video figure { margin: 0; }
.aff-video video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-grande); background: #000;
  border: 1px solid var(--linea); }
.aff-video figcaption { margin-top: 0.5rem; color: var(--tenue); font-size: 0.92rem; }