/*
 * «Prevenire per te», modulo M1: le schermate d'ingresso (Benvenuto, Entra
 * con il numero, «Chi sta accedendo?», iscrizione) e il primo ingresso
 * («Prima di iniziare», «Parlaci di te»). Si appoggia a base.css: solo
 * variabili, misure in rem («Testo grande» ingrandisce tutto), bersagli
 * di almeno 44 px, nessuna animazione con prefers-reduced-motion.
 */

/* ---- Sfondo delle schermate d'ingresso: il bagliore viola del prototipo -- */
.pt-colonna:has(.ac-sfondo) { background-image: radial-gradient(110% 46% at 50% -6%, rgba(168, 85, 247, .26), rgba(15, 25, 41, 0) 62%); }
html[data-tema="giorno"] .pt-colonna:has(.ac-sfondo) { background-image: radial-gradient(110% 46% at 50% -6%, rgba(124, 58, 237, .12), rgba(248, 250, 252, 0) 62%); }

.ac-schermo { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.ac-centro { text-align: center; }

/* ---- Benvenuto (A1) ------------------------------------------------------ */
.ac-marchio { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; font-size: 1.0625rem; }
.ac-punto { width: 12px; height: 12px; border-radius: 50%; background: var(--pt-accento); box-shadow: 0 0 10px rgba(34, 211, 238, .7); }
.ac-sfera { position: relative; width: 170px; height: 170px; margin: 4px auto 0; display: flex; align-items: center; justify-content: center; }
.ac-sfera::before, .ac-sfera::after { content: ""; position: absolute; border-radius: 50%; }
.ac-sfera::before { inset: 0; border: 1px solid rgba(148, 163, 184, .16); }
/* La sfera respira piano (Antonio, 22/10/2026): si gonfia appena e il bagliore dietro
   cresce, un respiro ogni 6 secondi; l'anello interno la segue. Solo transform e opacity
   (niente ridisegni a ogni fotogramma); ferma con prefers-reduced-motion (in fondo al foglio). */
.ac-sfera::after { inset: 20px; border: 1px solid rgba(34, 211, 238, .24); animation: ac-anello 6s ease-in-out infinite; }
.ac-sfera span { position: relative; width: 104px; height: 104px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #CCFBF1, #2DD4BF 38%, #0EA5E9 70%, #2563EB 100%); box-shadow: 0 0 50px rgba(34, 211, 238, .45); animation: ac-respiro 6s ease-in-out infinite; }
.ac-alone { position: absolute; inset: 12px; border-radius: 50%; background: radial-gradient(circle, rgba(34, 211, 238, .38), rgba(34, 211, 238, 0) 70%); opacity: .4; animation: ac-bagliore 6s ease-in-out infinite; }
html[data-tema="giorno"] .ac-alone { background: radial-gradient(circle, rgba(14, 165, 233, .3), rgba(14, 165, 233, 0) 70%); }
@keyframes ac-respiro { 0%, 100% { transform: scale(.96); } 50% { transform: scale(1.04); } }
@keyframes ac-bagliore { 0%, 100% { opacity: .3; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes ac-anello { 0%, 100% { opacity: .55; transform: scale(.98); } 50% { opacity: 1; transform: scale(1.03); } }
.ac-occhiello { margin: 4px 0 0; font-size: .75rem; letter-spacing: .14em; font-weight: 700; text-transform: uppercase; color: #2DD4BF; text-align: center; }
html[data-tema="giorno"] .ac-occhiello { color: #0F766E; }
.ac-titolo-grande { margin: 0; font-size: 1.9375rem; line-height: 1.13; font-weight: 800; text-align: center; letter-spacing: -.02em; }
.ac-titolo-grande span { color: #2DD4BF; }
html[data-tema="giorno"] .ac-titolo-grande span { color: #0F766E; }
.ac-vantaggi { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ac-vantaggio { display: flex; align-items: center; gap: 12px; font-size: .9375rem; line-height: 1.35; }
.ac-vantaggio-icona { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ac-vantaggio-icona.e-oro { background: rgba(251, 191, 36, .16); color: var(--pt-punti); }
.ac-vantaggio-icona.e-verde { background: rgba(45, 212, 191, .16); color: #5EEAD4; }
.ac-vantaggio-icona.e-blu { background: rgba(96, 165, 250, .16); color: #93C5FD; }
html[data-tema="giorno"] .ac-vantaggio-icona.e-verde { color: #0F766E; }
html[data-tema="giorno"] .ac-vantaggio-icona.e-blu { color: #1D4ED8; }
/* «Inizia gratis» come lo screenshot di Antonio (22/10/2026): sfumatura orizzontale verde
   acqua → blu pervinca, angoli molto arrotondati, testo blu notte in grassetto, largo quanto
   la colonna. Il testo scuro sui due colori supera il 5:1. */
.ac-inizia { margin-top: 4px; min-height: 58px; border-radius: 18px; background: linear-gradient(90deg, #6ED3C4, #688DF7); color: #0B1424; font-size: 1.1875rem; font-weight: 700; letter-spacing: .005em; box-shadow: 0 8px 22px rgba(104, 141, 247, .22); }
.ac-inizia:hover, .ac-inizia:active, .ac-inizia:visited { color: #0B1424; }
.ac-inizia:hover { filter: brightness(1.05); }
/* Sul bianco: gli stessi colori un poco piu' pieni, perche' il pulsante non sbiadisca. */
html[data-tema="giorno"] .ac-inizia { background: linear-gradient(90deg, #4FC4B3, #5B82F2); box-shadow: 0 8px 20px rgba(37, 99, 235, .18); }
html[data-testo="grande"] .ac-inizia { min-height: 60px; }
/* «Testo grande» e «Leggi ad alta voce» sempre uno accanto all'altro (Antonio, 22/10/2026):
   due colonne uguali; se lo spazio non basta (telefono stretto, testo grande) va a capo la
   scritta dentro il pulsante, mai il pulsante. Da sola (senza voce italiana) resta centrata. */
.ac-scelte { display: flex; flex-wrap: nowrap; gap: 8px; justify-content: center; align-items: stretch; }
.ac-chip { flex: 0 1 calc(50% - 4px); min-width: 0; justify-content: center; gap: 6px; padding: 6px 10px; font-size: .8125rem; line-height: 1.2; text-align: center; background: var(--pt-carta-velo); }
.ac-chip svg { flex-shrink: 0; }
.ac-chip-aa { font-weight: 800; flex-shrink: 0; }
/* «Leggi ad alta voce» solo con una voce italiana che legge sul telefono (base.js: html[data-voce]). */
html:not([data-voce="si"]) [data-leggi-benvenuto] { display: none; }
.ac-nota { margin: 0; font-size: .875rem; color: var(--pt-tenue); text-align: center; }
.ac-avvertenza { margin: 2px 0 0; font-size: .75rem; line-height: 1.45; color: var(--pt-tenue); text-align: center; }
.ac-legali { margin: 0; font-size: .8125rem; text-align: center; color: var(--pt-tenue); }
.ac-legali a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
.ac-principale-invito { font-size: 1rem; }

/* ---- Entra (A2) ---------------------------------------------------------- */
.ac-indietro { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: .9375rem; text-decoration: none; }
.ac-titolo { margin: 0; font-size: 2rem; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.ac-sottotitolo { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--pt-tenue); }
.ac-modulo { display: flex; flex-direction: column; gap: 14px; }
.ac-telefono { display: flex; align-items: stretch; border-radius: 16px; border: 1px solid rgba(34, 211, 238, .45); background: var(--pt-incavo); overflow: hidden; }
/* Il contorno azzurro solo con la tastiera (html[data-ingresso], base.js, punto 3 del 22/10/2026):
   all'apertura (autofocus) e dopo un tocco il campo acceso si riconosce dal bordo pieno. */
.ac-telefono:focus-within { border-color: var(--pt-accento); }
html:not([data-ingresso="puntatore"]) .ac-telefono:focus-within { outline: 3px solid var(--pt-fuoco); outline-offset: 2px; }
.ac-prefisso { display: flex; align-items: center; padding: 0 12px 0 16px; font-size: 1.25rem; font-weight: 700; color: var(--pt-tenue); border-right: 1px solid var(--pt-bordo-forte); }
/* [type="tel"]: stesso peso della regola dei campi di base.css (che dava al numero una seconda
   cornice dentro la prima); questo foglio viene dopo e vince. */
.ac-telefono input[type="tel"] { flex: 1; width: auto; min-width: 0; min-height: 56px; border: 0; border-radius: 0; background: transparent; color: var(--pt-testo); font-family: inherit; font-size: 1.25rem; font-weight: 600; letter-spacing: .04em; padding: 0 16px; }
.ac-telefono input:focus { outline: none; }
.ac-telefono[aria-invalid="true"], .ac-telefono.e-errore { border-color: var(--pt-pericolo); }
.ac-numero-scelto { margin: 0; font-size: .9375rem; line-height: 1.5; }
.ac-cambia { font-size: .875rem; align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; }

/* Il codice: un campo solo, disegnato come 6 caselle (incollare e WebOTP funzionano). */
.ac-codice { position: relative; }
.ac-codice-campo { width: 100%; min-height: 58px; border-radius: 14px; border: 1px solid var(--pt-bordo-forte); background: var(--pt-incavo); color: var(--pt-testo); font-family: inherit; font-size: 1.625rem; font-weight: 800; letter-spacing: .5em; text-align: center; padding: 0 8px; }
.ac-caselle { display: none; gap: 8px; justify-content: space-between; }
.ac-casella { flex: 1; max-width: 52px; height: 58px; border-radius: 14px; border: 1px solid var(--pt-bordo-forte); background: var(--pt-incavo); display: flex; align-items: center; justify-content: center; font-size: 1.625rem; font-weight: 800; }
.ac-casella.e-attuale { border-color: var(--pt-accento); box-shadow: 0 0 0 1px var(--pt-accento); }
/* Con JavaScript: le caselle si vedono, il campo vero le copre (trasparente ma toccabile e letto dagli screen reader). */
.ac-codice.e-caselle .ac-caselle { display: flex; }
.ac-codice.e-caselle .ac-codice-campo { position: absolute; inset: 0; opacity: 0; min-height: 0; height: 100%; caret-color: transparent; }
/* Con il tocco basta la casella accesa (e-attuale); il contorno intorno alle sei caselle solo con la tastiera. */
html:not([data-ingresso="puntatore"]) .ac-codice.e-caselle:focus-within .ac-caselle { outline: 3px solid var(--pt-fuoco); outline-offset: 4px; border-radius: 16px; }
.ac-codice.e-errore .ac-casella, .ac-codice-campo[aria-invalid="true"] { border-color: var(--pt-pericolo); }
.ac-di-nuovo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: .875rem; color: var(--pt-tenue); }
.ac-di-nuovo .pt-btn { min-height: 44px; }

.ac-carta-info { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 22px; background: var(--pt-carta-velo); border: 1px solid var(--pt-bordo); }
.ac-riga-info { display: flex; gap: 12px; align-items: flex-start; margin: 0; font-size: .875rem; line-height: 1.45; }
.ac-riga-info svg { flex-shrink: 0; margin-top: 2px; color: var(--pt-accento); }
.ac-spunta-ricorda { padding: 12px 14px; border-radius: 18px; background: var(--pt-carta-velo); border: 1px solid var(--pt-bordo); }
.ac-spunta-testi { display: flex; flex-direction: column; gap: 2px; }
.ac-spunta-titolo { font-weight: 700; font-size: .9375rem; }
.ac-captcha { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 18px; border: 1px solid var(--pt-bordo-forte); background: var(--pt-carta-velo); }
.ac-captcha img { width: 220px; max-width: 100%; height: auto; border-radius: 10px; background: #F8FAFC; }

/* ---- «Chi sta accedendo?» ------------------------------------------------ */
.ac-profili { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ac-profilo { width: 100%; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--pt-bordo-forte); background: var(--pt-carta-velo); color: var(--pt-testo); text-align: left; cursor: pointer; font: inherit; }
.ac-profilo:hover { border-color: var(--pt-accento); }
.ac-iniziali { width: 44px; height: 44px; border-radius: 50%; background: #1D4ED8; color: #DBEAFE; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .875rem; flex-shrink: 0; }
.ac-profilo-nome { display: block; font-weight: 700; font-size: 1rem; }
.ac-profilo-dettaglio { display: block; font-size: .8125rem; color: var(--pt-tenue); }

/* ---- Primo ingresso: consensi (A3) e «Parlaci di te» (A4) ------------------ */
.ac-passo { margin: 0; font-size: .8125rem; color: var(--pt-tenue); }
.ac-gruppo { margin: 6px 0 0; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--pt-tenue); }
.ac-carta { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 18px; background: var(--pt-carta-velo); border: 1px solid var(--pt-bordo); }
.ac-carta.e-aria { border-color: rgba(168, 85, 247, .4); }
.ac-carta.e-aria:has(input:checked) { border-color: var(--pt-aria); }
label.ac-carta { cursor: pointer; }
.ac-carta-testi { flex: 1; min-width: 0; }
.ac-t1 { margin: 0; font-size: .9375rem; font-weight: 700; }
.ac-t2 { margin: 3px 0 0; font-size: .8125rem; line-height: 1.45; color: var(--pt-tenue); }
.ac-t2 a { position: relative; display: inline-flex; align-items: center; min-height: 32px; }
/* Dentro la frase la riga resta com'e'; il bersaglio sale a 44 px. */
.ac-t2 a::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 44px; transform: translateY(-50%); }
html[data-testo="grande"] .ac-t2 a::after { height: 56px; }
html[data-testo="grande"] .ac-carta-testi > label.ac-t1 { display: flex; align-items: center; min-height: 56px; }

/* La casella delle conferme: un vero checkbox, grande. */
.ac-casella-spunta { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 28px; height: 28px; margin: 0; border-radius: 8px; border: 2px solid #94A3B8; background: transparent; cursor: pointer; display: grid; place-content: center; }
.ac-casella-spunta::after { content: ""; width: 14px; height: 8px; border-left: 3px solid transparent; border-bottom: 3px solid transparent; transform: translateY(-2px) rotate(-45deg); }
.ac-casella-spunta:checked { background: var(--pt-accento); border-color: var(--pt-accento); }
.ac-casella-spunta:checked::after { border-color: #0F1929; }
html[data-tema="giorno"] .ac-casella-spunta { border-color: #475569; }
html[data-tema="giorno"] .ac-casella-spunta:checked::after { border-color: #FFFFFF; }
.ac-casella-spunta:focus-visible { outline: 3px solid var(--pt-fuoco); outline-offset: 2px; }

/* L'interruttore: un checkbox con role="switch" (funziona anche senza JavaScript). */
.ac-interruttore { appearance: none; -webkit-appearance: none; position: relative; flex-shrink: 0; width: 52px; height: 32px; margin: 6px 0; border-radius: 16px; border: 1px solid var(--pt-bordo-forte); background: var(--pt-traccia); cursor: pointer; }
.ac-interruttore::before { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(2, 6, 23, .4); transition: transform .15s ease; }
/* Fuori da una <label> (I miei consensi) il bersaglio e' solo l'interruttore: 58×44 con lo
   pseudo-elemento (::before e' il pallino), dentro il margine di 6 px. */
.ac-interruttore::after { content: ""; position: absolute; inset: -7px -4px; }
html[data-testo="grande"] .ac-interruttore { margin: 12px 0; }
html[data-testo="grande"] .ac-interruttore::after { inset: -13px -4px; }
.ac-interruttore:checked { background: #0E7490; border-color: #0E7490; }
.ac-interruttore:checked::before { transform: translateX(20px); }
.ac-interruttore:focus-visible { outline: 3px solid var(--pt-fuoco); outline-offset: 2px; }
.ac-interruttore:disabled { opacity: .6; cursor: not-allowed; }

.ac-perche { margin: 0; font-size: .8125rem; color: var(--pt-tenue); text-align: center; }
.ac-perche.e-avviso { color: var(--pt-attenzione); font-weight: 600; }

/* Campi di «Parlaci di te». */
.ac-griglia-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ac-data { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.ac-data legend, .ac-legenda { padding: 0; margin-bottom: 6px; font-weight: 600; font-size: .9375rem; }
.ac-data .pt-campo > label { font-size: .8125rem; font-weight: 600; color: var(--pt-tenue); }
.ac-sola-lettura { opacity: .8; }
fieldset.ac-insieme { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ac-scelte-sesso { display: flex; flex-wrap: wrap; gap: 8px; }
.ac-scelta { flex: 1 1 30%; position: relative; }
.ac-scelta input, .ac-obiettivo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ac-scelta span { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 10px; border-radius: 14px; border: 1px solid var(--pt-bordo-forte); background: var(--pt-incavo); color: var(--pt-testo); font-size: .9375rem; font-weight: 600; text-align: center; cursor: pointer; }
.ac-scelta input:checked + span, .ac-obiettivo input:checked + span { background: rgba(14, 116, 144, .35); border-color: var(--pt-accento); color: var(--pt-testo); box-shadow: inset 0 0 0 1px var(--pt-accento); }
html[data-tema="giorno"] .ac-scelta input:checked + span, html[data-tema="giorno"] .ac-obiettivo input:checked + span { background: #E0F2FE; }
.ac-scelta input:focus-visible + span, .ac-obiettivo input:focus-visible + span { outline: 3px solid var(--pt-fuoco); outline-offset: 2px; }
.ac-obiettivi { display: flex; flex-wrap: wrap; gap: 8px; }
.ac-obiettivo { position: relative; }
.ac-obiettivo span { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--pt-bordo-forte); background: var(--pt-incavo); color: var(--pt-testo); font-size: .875rem; cursor: pointer; }
.ac-obiettivo input:disabled + span { opacity: .5; cursor: not-allowed; }
.ac-non-dirlo { display: none; margin: 0; font-size: .8125rem; color: var(--pt-accento); font-weight: 600; }
.ac-insieme:has(input[value="N"]:checked) .ac-non-dirlo, .ac-insieme.e-non-dirlo .ac-non-dirlo { display: block; }
.ac-trovato { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 18px; background: var(--pt-carta-velo); border: 1px solid rgba(96, 165, 250, .35); }
.ac-trovato p { margin: 0; font-size: .875rem; line-height: 1.4; }
.ac-traguardo { margin: 0; font-size: .8125rem; color: var(--pt-punti); text-align: center; font-weight: 600; }

/* Iscrizione: con JavaScript i due passi si vedono uno alla volta. */
.ac-iscrizione.e-a-passi [data-passo="2"] { display: none; }
.ac-iscrizione.e-a-passi.e-passo-2 [data-passo="1"] { display: none; }
.ac-iscrizione.e-a-passi.e-passo-2 [data-passo="2"] { display: flex; }
.ac-iscrizione:not(.e-a-passi) [data-solo-js] { display: none; }
.ac-passi-insieme { display: flex; flex-direction: column; gap: 10px; }

/* Il foglio «Su iPhone serve un passo in più». */
.ac-foglio-testo { margin: 0; color: var(--pt-tenue); line-height: 1.5; }

/* Errori in cima al modulo. */
.ac-riepilogo { margin: 0; }
.ac-riepilogo ul { margin: 6px 0 0; padding-left: 18px; }

/* ---- Testi legali in bozza ----------------------------------------------- */
.ac-legale { line-height: 1.6; font-size: .9375rem; }
.ac-legale h1, .ac-legale h2, .ac-legale h3 { line-height: 1.25; }
.ac-legale h2 { font-size: 1.125rem; margin: 1.4em 0 .4em; }
.ac-legale p, .ac-legale li { overflow-wrap: break-word; }
.ac-legale blockquote { margin: 0; padding: 0; }

@media (prefers-reduced-motion: reduce) {
  .ac-interruttore::before { transition: none; }
  /* La sfera ferma, nella posizione di mezzo del respiro. */
  .ac-sfera span, .ac-alone, .ac-sfera::after { animation: none; }
  .ac-alone { opacity: .65; }
}
@media print {
  .pt-colonna:has(.ac-sfondo) { background-image: none; }
  .ac-sfera span, .ac-alone, .ac-sfera::after { animation: none; }
}

/* I testi delle carte del primo ingresso: righe intere, l'etichetta si tocca. */
.ac-carta-testi .ac-t1, .ac-carta-testi .ac-t2 { display: block; }
.ac-carta-testi label { cursor: pointer; }

/* La stessa casella, tonda quando e' una scelta fra due (radio). */
input[type="radio"].ac-casella-spunta { border-radius: 50%; }