/* ============================================================================
   Il banner del consenso agli annunci (lotto AW, 29/09/2026).

   Lo carica la web app (index.html) e lo carica il sito (le pagine, dentro il
   ramo `annunci`): UNA costruzione (`js/consenso.js`, costruisciConsenso) e UN
   foglio di stile, cosi' le due sponde non divergono. Usa solo i token di
   `tokens.css`, che le due origini caricano.

   ACCETTA E RIFIUTA SONO LO STESSO ELEMENTO: `.consenso__btn`, nessun
   modificatore, quindi stessa altezza, stesso corpo, stesso peso, stesso fondo,
   stesso bordo. Non esiste una variante «primaria». Rifiutare dev'essere facile
   quanto accettare, e chi aggiungesse qui una regola che ne distingue uno dei
   due (un `[data-scelta="si"]`, un `:first-child`, un colore) fa diventare
   rossa `tools/controlla_annunci_web.mjs`, che le cerca.
   ========================================================================= */

.consenso {
  position: fixed; z-index: 40;
  left: var(--s3); right: var(--s3);
  bottom: var(--s3);
  max-width: 520px; margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s4);
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--linea-viva);
  border-radius: var(--r-scheda);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  font: var(--t-piccolo);
}
/* `display: flex` qui sopra vincerebbe sull'attributo `hidden`: senza questa riga il banner non si nasconde */
.consenso[hidden] { display: none; }
/* LE PREFERENZE sono una finestra al centro: si aprono da un tasto e si chiudono con la X. */
.consenso--preferenze { bottom: auto; top: 50%; transform: translateY(-50%); }

/* IL BANNER NELLA WEB APP STA NEL FLUSSO, NON APPICCICATO AL FONDO (AW-2, 29/09/2026).
   Era `position: fixed` sopra la barra in basso, e la vista ha solo 96 px di
   padding: finche' non si sceglieva, il banner (circa 286 px a 375 px di
   larghezza) copriva il fondo dell'elenco — «Scheda vuota», «+ Esercizio
   personale», la barra del piano — e lo spazio «Annuncio» stava tutto sotto di
   lui. Misurato con elementFromPoint nel Browser pane. Un muro di consenso
   parziale: chi e' al telefono non poteva creare un programma prima di scegliere.
   Nel flusso il banner scorre con la pagina, sta subito prima dello spazio, e non
   copre niente di nessuno (nemmeno la barra `.sceglio`, che e' appiccicata al
   fondo dello schermo). Il sito invece tiene il banner fisso e riserva lo spazio
   con un distanziale (site/consenso-sito.js): li' non c'e' una barra da non coprire. */
.consenso--flusso {
  position: static; z-index: auto;
  max-width: none; margin: 0;
  box-shadow: none;
}

/* Il distanziale del sito: la stessa altezza del banner fisso, in fondo al corpo,
   cosi' il piede di pagina (informativa, note legali, cookie, preferenze) resta
   raggiungibile e cliccabile PRIMA di scegliere. L'altezza la scrive il JS. */
.consenso__spazio { display: block; height: 0; }

.consenso__titolo { margin: 0; padding-right: var(--s6); font: var(--t-sezione); letter-spacing: var(--tracking-titolo); }
.consenso__testo, .consenso__stato { margin: 0; color: var(--text); }
.consenso__stato { color: var(--muted); }

.consenso__tasti { display: flex; gap: var(--s2); }
/* UNA sola regola per i due tasti. */
.consenso__btn {
  flex: 1 1 0;
  min-height: var(--tocco);
  padding: 0 var(--s4);
  font: 600 1rem/1.2 var(--sans);
  color: var(--text);
  background: var(--bg-elev-2);
  border: 1px solid var(--linea-viva);
  border-radius: var(--r-piccolo);
  cursor: pointer;
}
.consenso__btn:active { transform: scale(0.975); }
.consenso__btn[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 2px; }
.consenso__btn:focus-visible, .consenso__chiudi:focus-visible, .consenso__info:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.consenso__info { color: var(--muted); text-decoration: underline; align-self: flex-start; padding: var(--s1) 0; }

.consenso__chiudi {
  position: absolute; top: var(--s2); right: var(--s2);
  width: var(--tocco); height: var(--tocco);
  background: transparent; border: 0; color: var(--muted);
  font-size: 1.1rem; cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
  .consenso { animation: consenso-su var(--t-medio) var(--ease); }
}
@keyframes consenso-su { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }

/* Il pannello «Preferenze privacy» prende il fuoco da programma quando si apre (consenso.js):
   e' un contenitore, non un controllo, e il contorno intorno a tutto il pannello non dice niente.
   I tasti dentro tengono il loro. */
.consenso--preferenze:focus { outline: none; }