/* Banner del consenso e preferenze (2026-10-10). Va con consenso.js. Colori propri, così funziona su ogni pagina
   anche se cambia il design system attorno. Accetta e Rifiuta hanno lo stesso peso: stessa forma, stessa misura */

.consenso, .preferenze {
  --c-verde: #1b463c; --c-verde-medio: #35927c; --c-lime: #def168; --c-bianco: #fff; --c-nero: #0f1a17;
  --c-testo-2: #42514d; --c-linea: rgba(27, 70, 60, .14); --c-crema: #f4f3ef;
  font-family: "Satoshi", system-ui, sans-serif; color: var(--c-nero); -webkit-font-smoothing: antialiased;
}
.consenso[hidden], .preferenze[hidden] { display: none; }
.consenso *, .preferenze * { box-sizing: border-box; margin: 0; }
.consenso a, .preferenze a { color: var(--c-verde); text-decoration: underline; text-underline-offset: 2px; }
.consenso button:focus-visible, .preferenze button:focus-visible, .preferenze input:focus-visible + .interruttore__pista, .consenso a:focus-visible { outline: 3px solid var(--c-lime); outline-offset: 3px; }

/* Banner compatto (2026-10-10): la scheda di 400 px di altezza copriva la CTA principale.
   Mobile: striscia bassa a tutta larghezza (~170 px). Da 760 px: scheda in basso a DESTRA, dove le pagine
   non hanno CTA (home: la CTA è a sinistra; Audit: è al centro, sopra la piega) */
.consenso { position: fixed; z-index: 90; left: 8px; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; border-radius: 18px; background: var(--c-bianco); box-shadow: 0 12px 48px rgba(15,26,23,.24); font-size: 13px; line-height: 1.45; color: var(--c-testo-2); max-height: calc(100vh - 16px); overflow-y: auto; }
.consenso__titolo { font-weight: 700; color: var(--c-verde); }
.consenso__azioni { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.consenso__btn { font: 700 15px/1.15 "Satoshi", system-ui, sans-serif; min-height: 44px; padding: 10px 16px; border-radius: 99px; border: 0; cursor: pointer; transition: filter .15s ease; }
.consenso__btn:hover { filter: brightness(.94); }
.consenso__btn--si { background: var(--c-lime); color: var(--c-verde); }
.consenso__btn--no { background: var(--c-verde); color: var(--c-bianco); }
.consenso__link { font: inherit; font-weight: 700; color: var(--c-verde); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 760px) {
  .consenso { left: auto; right: 24px; bottom: 24px; max-width: 400px; padding: 20px 22px 22px; font-size: 14px; line-height: 1.5; }
  .consenso__titolo { display: block; font-size: 16px; margin-bottom: 4px; }
}

/* Finché il banner è aperto, la barra fissa delle pagine resta sotto: niente due strati in fondo allo schermo */
body:has(.consenso:not([hidden])) .barra, body:has(.consenso:not([hidden])) .diagnosi__pillola { visibility: hidden; }

/* Preferenze: foglio dal basso su mobile, scheda al centro da 760 px */
.preferenze { position: fixed; inset: 0; z-index: 95; display: flex; align-items: flex-end; justify-content: center; }
.preferenze__fondo { position: absolute; inset: 0; background: rgba(15,26,23,.55); }
.preferenze__scheda { position: relative; width: 100%; max-height: calc(100vh - 24px); overflow-y: auto; background: var(--c-bianco); border-radius: 24px 24px 0 0; padding: 28px 20px 20px; display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 760px) {
  .preferenze { align-items: center; padding: 24px; }
  .preferenze__scheda { max-width: 560px; border-radius: 24px; padding: 36px 32px 28px; }
}
html.preferenze-aperte { overflow: hidden; }
.preferenze__chiudi { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--c-crema); color: var(--c-verde); font-size: 24px; line-height: 1; cursor: pointer; }
.preferenze__occhiello { font-size: 14px; font-weight: 700; color: var(--c-verde-medio); }
.preferenze__titolo { font-size: 26px; line-height: 1.15; font-weight: 500; color: var(--c-verde); letter-spacing: -.01em; padding-right: 48px; }
.preferenze__intro { font-size: 15px; line-height: 1.5; color: var(--c-testo-2); }
.preferenze__voci { list-style: none; padding: 0; margin: 10px 0 6px; display: flex; flex-direction: column; }
.preferenze__voce { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid var(--c-linea); }
.preferenze__voce:last-child { border-bottom: 1px solid var(--c-linea); }
.preferenze__voce b { display: block; font-size: 16px; color: var(--c-verde); }
.preferenze__voce p { font-size: 14px; line-height: 1.45; color: var(--c-testo-2); margin-top: 3px; }
.preferenze__sempre { flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--c-verde); background: var(--c-lime); padding: 6px 12px; border-radius: 20px; white-space: nowrap; }
.preferenze__azioni { display: grid; gap: 8px; margin-top: 8px; }
@media (min-width: 560px) { .preferenze__azioni { grid-template-columns: 1fr 1fr; } }

/* Interruttore: la casella vera resta (accessibile), sopra c'è la pista */
.interruttore { flex-shrink: 0; position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--c-verde); min-height: 44px; }
.interruttore input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruttore__pista { position: relative; width: 46px; height: 28px; border-radius: 99px; background: #d5dbd9; transition: background .2s ease; }
.interruttore__pista::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--c-bianco); box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s ease; }
.interruttore input:checked + .interruttore__pista { background: var(--c-verde); }
.interruttore input:checked + .interruttore__pista::after { transform: translateX(18px); background: var(--c-lime); }
@media (max-width: 380px) { .interruttore__testo { display: none; } }
@media (prefers-reduced-motion: reduce) { .interruttore__pista, .interruttore__pista::after { transition: none; } }