/*
 * «Prevenire per te», l'app dei pazienti: lo stile di base, comune a ogni
 * pagina (layouts/per_te.blade.php). Ogni modulo aggiunge il suo foglio
 * (public/css/per-te/<modulo>.css) e usa questi mattoni.
 *
 * - Colori solo da variabili: notte su :root, giorno su html[data-tema="giorno"]
 *   (contrasti AA misurati: testo tenue #94A3B8 sulle carte, mai #64748B).
 * - Misure in rem: «Testo grande» (html[data-testo="grande"]) ingrandisce
 *   tutto, base 19 px, pulsanti da 56 px.
 * - Sotto i 768 px tutta la larghezza; da 768 px una colonna centrata di
 *   480 px, con la barra in basso larga quanto lei. Niente striscia fissa del
 *   112 (22/10/2026): il foglio del 112 lo apre Io → «Aiuto e numeri utili».
 * - Contorno del fuoco solo con la tastiera (html[data-ingresso], base.js).
 * - Elenchi a discesa con fondo pieno (--pt-tendina): leggibili anche aperti.
 * - Nessuna animazione con prefers-reduced-motion; in stampa niente barre
 *   ne' pulsanti.
 */

/* ---- Variabili: notte (predefinita) ---------------------------------- */
:root {
  color-scheme: dark;
  --pt-pagina: #0F1929;
  --pt-fuori: #0A1220;
  --pt-carta: #1E293B;
  --pt-carta-velo: rgba(30, 41, 59, .92);
  --pt-incavo: rgba(15, 25, 41, .5);
  --pt-bordo: rgba(148, 163, 184, .14);
  --pt-bordo-forte: rgba(148, 163, 184, .28);
  --pt-riga: rgba(148, 163, 184, .1);
  --pt-traccia: #334155;
  --pt-testo: #E2E8F0;
  --pt-tenue: #94A3B8;
  --pt-accento: #22D3EE;
  --pt-link: #7DD3FC;
  --pt-link-sopra: #BAE6FD;
  --pt-aria: #A855F7;
  --pt-aria-pieno: #7C3AED;
  --pt-aria-testo: #DDD6FE;
  --pt-successo: #10B981;
  --pt-attenzione: #F59E0B;
  --pt-pericolo: #F87171;
  --pt-112: #DC2626;
  --pt-112-testo: #FCA5A5;
  --pt-punti: #FCD34D;
  --pt-punti-fondo: rgba(251, 191, 36, .12);
  --pt-punti-bordo: rgba(251, 191, 36, .35);
  --pt-fuoco: #38BDF8;
  --pt-primario: linear-gradient(135deg, #0E7490, #2563EB);
  --pt-fantasma-bordo: rgba(56, 189, 248, .42);
  --pt-fantasma-testo: #7DD3FC;
  --pt-fantasma-fondo: transparent;
  --pt-barra-fondo: rgba(30, 41, 59, .97);
  --pt-bollo-fondo: #F87171;
  --pt-bollo-testo: #0F1929;
  --pt-alone: rgba(168, 85, 247, .18);
  --pt-ombra: 0 18px 40px rgba(2, 6, 23, .35);
  --pt-avviso-fondo: #0B1220;
  --pt-avviso-testo: #F1F5F9;
  /* Gli elenchi a discesa: fondo PIENO (l'elenco che si apre non sa disegnare la
     trasparenza: Chrome su Windows lo faceva grigio con la scritta bianca). */
  --pt-tendina: #162131;
  /* La zona in basso: barra (66 px), margine (12 px) e lo spazio pieno sopra (18 px)
     dove sporge il pulsante tondo di Aria. */
  --pt-altezza-basso: 6.5rem;
  --pt-raggio: 22px;
  /* I caratteri del telefono: nessuna chiamata a terzi (Google Fonts) in un'app di salute. */
  --pt-carattere: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
}

/* ---- Variabili: giorno ----------------------------------------------- */
html[data-tema="giorno"] {
  color-scheme: light;
  --pt-pagina: #F8FAFC;
  --pt-fuori: #E5EBF2;
  --pt-carta: #FFFFFF;
  --pt-carta-velo: #FFFFFF;
  --pt-incavo: #F1F5F9;
  --pt-bordo: #C9D3DF;
  --pt-bordo-forte: #94A3B8;
  --pt-riga: #E2E8F0;
  --pt-traccia: #E2E8F0;
  --pt-testo: #1F2937;
  --pt-tenue: #475569;
  --pt-accento: #0E7490;
  --pt-link: #0E7490;
  --pt-link-sopra: #155E75;
  --pt-aria: #7C3AED;
  --pt-aria-pieno: #7C3AED;
  --pt-aria-testo: #6D28D9;
  --pt-successo: #047857;
  --pt-attenzione: #92400E;
  --pt-pericolo: #B91C1C;
  --pt-112: #B91C1C;
  --pt-112-testo: #B91C1C;
  --pt-punti: #92400E;
  --pt-punti-fondo: #FEF3C7;
  --pt-punti-bordo: #F59E0B;
  /* Sul bianco l'azzurro #38BDF8 si vede poco: stesso anello, piu' scuro. */
  --pt-fuoco: #0369A1;
  --pt-fantasma-bordo: #0E7490;
  --pt-fantasma-testo: #0E7490;
  --pt-fantasma-fondo: #EAF6F9;
  --pt-barra-fondo: rgba(255, 255, 255, .98);
  --pt-bollo-fondo: #B91C1C;
  --pt-bollo-testo: #FFFFFF;
  --pt-alone: rgba(14, 116, 144, .08);
  --pt-ombra: 0 12px 30px rgba(15, 23, 42, .1);
  --pt-avviso-fondo: #1F2937;
  --pt-avviso-testo: #FFFFFF;
  --pt-tendina: #F1F5F9;
}

/* ---- «Testo grande»: base 19 px, righe piu' alte, bersagli da 56 px --- */
html[data-testo="grande"] { font-size: 118.75%; }
html[data-testo="grande"] body { line-height: 1.55; }

/* ---- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* Niente riquadro colorato al tocco (Chrome su Android): il pulsante toccato si vede gia'. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body.pt-corpo {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--pt-pagina);
  color: var(--pt-testo);
  font-family: var(--pt-carattere);
  font-size: 1rem;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
img, svg { max-width: 100%; }
a { color: var(--pt-link); }
a:hover { color: var(--pt-link-sopra); }
h1, h2, h3, p { overflow-wrap: break-word; }
button { font: inherit; color: inherit; }

/* Il contorno del fuoco: solo navigando con la tastiera (Antonio, 22/10/2026: «il riquadro
   azzurro non dovrebbe apparire»). Lo script nella <head> del layout parte con
   data-ingresso="puntatore", base.js passa a "tastiera" al primo Tab e torna a "puntatore"
   al primo tocco o clic. Senza JavaScript decide il browser (:focus-visible). */
:focus-visible { outline: 3px solid var(--pt-fuoco); outline-offset: 2px; }
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
/* Il titolo che riceve il fuoco all'apertura della pagina o di un foglio (h1/h2 tabindex="-1",
   base.js) non si raggiunge col Tab: serve agli screen reader, non si cerchia mai. */
:is(h1, h2)[tabindex="-1"]:focus { outline: none; }
/* Dopo un tocco o un clic nessun contorno: nemmeno quelli dei moduli disegnati attorno al
   riquadro che contiene il campo (:focus-within) o sul pezzo accanto (input + span). */
html[data-ingresso="puntatore"] :is(:focus, :focus-within, :focus + *) { outline: none !important; }

.pt-nascosto-vista {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.pt-salta {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--pt-carta); color: var(--pt-testo); padding: 12px 16px; border-radius: 12px;
  font-weight: 700; text-decoration: none;
}
.pt-salta:focus { left: 16px; }

/* ---- Colonna e spazio per le barre --------------------------------------- */
.pt-colonna {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--pt-pagina);
  background-image: radial-gradient(120% 30% at 50% -4%, var(--pt-alone), transparent 62%);
  background-repeat: no-repeat;
}
.pt-contenuto {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: calc(20px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px));
}
.pt-contenuto:focus { outline: none; }
body.pt-con-barra .pt-contenuto { padding-bottom: calc(var(--pt-altezza-basso) + 16px + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 768px) {
  body.pt-corpo { background: var(--pt-fuori); }
  .pt-colonna {
    max-width: 480px;
    margin: 0 auto;
    box-shadow: 0 0 0 1px var(--pt-bordo), var(--pt-ombra);
  }
}

/* ---- Fasce in cima (amministratore, bozza, senza rete) -------------------- */
.pt-banda {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 16px; font-size: .875rem; font-weight: 600; line-height: 1.35; text-align: center;
}
.pt-banda svg { flex-shrink: 0; }
.pt-banda.e-admin { position: sticky; top: 0; z-index: 50; background: #78350F; color: #FEF3C7; }
.pt-banda.e-rete { position: sticky; top: 0; z-index: 49; background: #0C4A6E; color: #E0F2FE; }
.pt-banda.e-bozza { background: #7F1D1D; color: #FEE2E2; border-radius: 14px; }
html[data-tema="giorno"] .pt-banda.e-admin { background: #FEF3C7; color: #78350F; box-shadow: inset 0 -1px 0 #F59E0B; }
html[data-tema="giorno"] .pt-banda.e-rete { background: #E0F2FE; color: #075985; box-shadow: inset 0 -1px 0 #7DD3FC; }
html[data-tema="giorno"] .pt-banda.e-bozza { background: #FEE2E2; color: #991B1B; box-shadow: inset 0 0 0 1px #FCA5A5; }
@media (min-width: 768px) {
  .pt-banda.e-admin, .pt-banda.e-rete { max-width: 480px; margin: 0 auto; }
}

.pt-avviso {
  margin: 0; padding: 12px 14px; border-radius: 14px; font-size: .9375rem;
  background: var(--pt-carta-velo); border: 1px solid var(--pt-fantasma-bordo); color: var(--pt-testo);
}

/* ---- Intestazione -------------------------------------------------------- */
.pt-intestazione { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.pt-intestazione-riga { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pt-intestazione-pulsanti { display: flex; gap: 10px; flex-shrink: 0; }
.pt-saluto { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.pt-saluto-ora { font-size: .9375rem; font-weight: 400; color: var(--pt-tenue); }
.pt-saluto-nome { font-size: 1.875rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.pt-titolo { margin: 0; font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.pt-sottotitolo { font-size: .8125rem; color: var(--pt-tenue); text-align: right; }
.pt-intestazione-sotto { margin: -2px 0 0; font-size: .9375rem; line-height: 1.45; color: var(--pt-tenue); }
.pt-indietro {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  min-height: 44px; min-width: 44px; font-size: .9375rem; font-weight: 500; text-decoration: none; color: var(--pt-link);
}
.pt-tondo {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--pt-bordo-forte); background: var(--pt-incavo); color: var(--pt-testo); text-decoration: none;
}
.pt-tondo:hover { color: var(--pt-testo); border-color: var(--pt-fantasma-bordo); }
.pt-tondo-parola { display: none; font-size: .875rem; font-weight: 600; }
html[data-testo="grande"] .pt-tondo { width: auto; min-width: 56px; height: 56px; padding: 0 14px; border-radius: 28px; }
html[data-testo="grande"] .pt-tondo-parola { display: inline; }
/* Con «Testo grande» i pulsanti con la parola vanno sotto il saluto: il nome non si spezza. */
html[data-testo="grande"] .pt-intestazione.e-casa .pt-intestazione-riga { flex-direction: column; align-items: flex-start; }
html[data-testo="grande"] .pt-intestazione.e-casa .pt-intestazione-pulsanti { flex-wrap: wrap; }
.pt-saluto-nome { overflow-wrap: normal; }
.pt-bollo {
  position: absolute; top: -3px; right: -3px;
  min-width: 19px; height: 19px; padding: 0 4px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pt-bollo-fondo); color: var(--pt-bollo-testo);
  font-size: .6875rem; font-weight: 800; line-height: 1;
}
.pt-ascolta { align-self: flex-start; }

/* ---- Riquadri (carte) ---------------------------------------------------- */
.pt-scheda {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px; border-radius: var(--pt-raggio);
  background: var(--pt-carta-velo); border: 1px solid var(--pt-bordo); color: var(--pt-testo);
}
a.pt-scheda { text-decoration: none; }
a.pt-scheda:hover { color: var(--pt-testo); border-color: var(--pt-bordo-forte); }
.pt-scheda-testa { display: flex; flex-direction: column; gap: 2px; }
.pt-scheda-titolo { margin: 0; font-size: 1.1875rem; font-weight: 800; line-height: 1.25; }
.pt-scheda-corpo { display: flex; flex-direction: column; gap: 8px; }
.pt-scheda-corpo:empty { display: none; }
.pt-scheda-azione { display: flex; flex-wrap: wrap; gap: 8px; }
.pt-etichetta {
  margin: 0; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--pt-accento);
}
.pt-griglia-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pt-tenue { color: var(--pt-tenue); }
.pt-piccolo { font-size: .8125rem; }

/* ---- Pulsanti ------------------------------------------------------------ */
.pt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 18px; border: 0; border-radius: 999px;
  font-family: inherit; font-size: .9375rem; font-weight: 700; line-height: 1.2; text-align: center;
  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pt-btn-primario { background: var(--pt-primario); color: #FFFFFF; box-shadow: 0 6px 18px rgba(34, 211, 238, .18); }
.pt-btn-primario:hover { color: #FFFFFF; filter: brightness(1.06); }
.pt-btn-fantasma { background: var(--pt-fantasma-fondo); border: 1px solid var(--pt-fantasma-bordo); color: var(--pt-fantasma-testo); }
.pt-btn-fantasma:hover { color: var(--pt-fantasma-testo); border-color: var(--pt-accento); }
.pt-btn-pericolo { background: transparent; border: 1px solid var(--pt-pericolo); color: var(--pt-pericolo); }
.pt-btn-112 { background: var(--pt-112); color: #FFFFFF; box-shadow: 0 8px 22px rgba(220, 38, 38, .3); }
.pt-btn-112:hover { color: #FFFFFF; }
.pt-btn-aria { background: var(--pt-aria-pieno); color: #FFFFFF; }
.pt-btn-aria:hover { color: #FFFFFF; }
.pt-btn-testo { background: transparent; color: var(--pt-link); }
.pt-btn-grande { min-height: 56px; font-size: 1.0625rem; padding: 0 22px; }
.pt-btn-piccolo { min-height: 44px; min-width: 44px; padding: 0 14px; font-size: .875rem; }
.pt-btn-blocco { width: 100%; }
.pt-btn[disabled], .pt-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; box-shadow: none; filter: none; }
html[data-testo="grande"] .pt-btn { min-height: 56px; }

/* Pillole: punti, etichette */
.pt-punti {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; white-space: nowrap;
  font-size: .75rem; font-weight: 800; color: var(--pt-punti); background: var(--pt-punti-fondo); border: 1px solid var(--pt-punti-bordo);
}
.pt-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--pt-bordo-forte); background: var(--pt-incavo); color: var(--pt-testo); font-size: .8125rem; font-family: inherit;
}
button.pt-chip { cursor: pointer; min-height: 44px; }
.pt-chip[aria-pressed="true"], .pt-chip[aria-checked="true"] { border-color: var(--pt-accento); color: var(--pt-testo); box-shadow: inset 0 0 0 1px var(--pt-accento); }

/* Barra di avanzamento */
.pt-progresso { height: 8px; border-radius: 999px; background: var(--pt-traccia); overflow: hidden; }
.pt-progresso > span { display: block; height: 100%; border-radius: 999px; background: var(--pt-primario); }

/* ---- Campi --------------------------------------------------------------- */
.pt-campo { display: flex; flex-direction: column; gap: 6px; }
.pt-campo > label, .pt-etichetta-campo { font-weight: 600; font-size: .9375rem; }
.pt-input, .pt-campo input[type="text"], .pt-campo input[type="tel"], .pt-campo input[type="number"],
.pt-campo input[type="email"], .pt-campo input[type="date"], .pt-campo input[type="time"], .pt-campo select, .pt-campo textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 14px;
  border: 1px solid var(--pt-bordo-forte); background: var(--pt-incavo); color: var(--pt-testo);
  font-family: inherit; font-size: 1rem; /* almeno 16 px: iPhone non ingrandisce la pagina */
}
.pt-campo textarea { min-height: 96px; resize: vertical; }
/* Il campo in cui si scrive: solo il bordo si accende (il contorno grosso e' della tastiera). */
.pt-input:focus, .pt-campo :is(input, select, textarea):focus { border-color: var(--pt-accento); }
/* Elenchi a discesa (Antonio, 22/10/2026: grigi con la scritta bianca, illeggibili): fondo
   pieno e scritta del tema, notte e giorno, anche nell'elenco che si apre (option, optgroup).
   Lo schema di colori (color-scheme su :root) da' la freccia e la barra di scorrimento giuste. */
.pt-corpo select { background-color: var(--pt-tendina); color: var(--pt-testo); }
.pt-corpo select option, .pt-corpo select optgroup { background-color: var(--pt-tendina); color: var(--pt-testo); }
.pt-corpo select optgroup { color: var(--pt-tenue); font-weight: 700; font-style: normal; }
.pt-corpo select option:disabled { color: var(--pt-tenue); }
/* Il campo file (racconto, documenti, messaggio vocale): bersaglio e pulsante da 44 px. */
.pt-corpo input[type="file"] { min-height: 44px; max-width: 100%; font-family: inherit; font-size: .9375rem; color: var(--pt-testo); }
.pt-corpo input[type="file"]::file-selector-button {
  min-height: 44px; margin-right: 12px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--pt-fantasma-bordo); background: var(--pt-fantasma-fondo); color: var(--pt-fantasma-testo);
  font-family: inherit; font-size: .875rem; font-weight: 700;
}
.pt-input[aria-invalid="true"], .pt-campo [aria-invalid="true"] { border-color: var(--pt-pericolo); }
.pt-aiuto { margin: 0; font-size: .8125rem; color: var(--pt-tenue); }
.pt-errore-campo { margin: 0; font-size: .875rem; font-weight: 600; color: var(--pt-pericolo); }
.pt-riepilogo-errori { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--pt-pericolo); color: var(--pt-testo); }
.pt-spunta { width: 28px; height: 28px; flex-shrink: 0; margin: 0; accent-color: #0E7490; }
.pt-riga-spunta { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; cursor: pointer; }
/* «Testo grande»: campi, scelte, chip e titoli che aprono e chiudono da 56 px. */
html[data-testo="grande"] .pt-contenuto :is(input[type="text"], input[type="tel"], input[type="number"], input[type="email"],
  input[type="date"], input[type="time"], input[type="search"], input[type="password"], input[type="file"], select),
html[data-testo="grande"] .pt-input,
html[data-testo="grande"] .pt-corpo input[type="file"]::file-selector-button,
html[data-testo="grande"] .pt-riga-spunta,
html[data-testo="grande"] button.pt-chip,
html[data-testo="grande"] .pt-contenuto summary { min-height: 56px; }

/* Interruttore (button role="switch"): la riga intera e' il bersaglio. */
.pt-riga-interruttore { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; }
.pt-interruttore {
  position: relative; flex-shrink: 0; width: 52px; height: 32px; padding: 0; margin: 6px 0;
  border-radius: 16px; border: 1px solid var(--pt-bordo-forte); background: var(--pt-traccia); cursor: pointer;
}
.pt-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;
}
/* Il bersaglio va oltre il disegno (52×32): 58×44 (56 di altezza in «Testo grande»), dentro il margine. */
.pt-interruttore::after { content: ""; position: absolute; inset: -7px -4px; }
html[data-testo="grande"] .pt-interruttore { margin: 12px 0; }
html[data-testo="grande"] .pt-interruttore::after { inset: -13px -4px; }
.pt-interruttore[aria-checked="true"] { background: #0E7490; border-color: #0E7490; }
.pt-interruttore[aria-checked="true"]::before { transform: translateX(20px); }
.pt-interruttore[aria-disabled="true"], .pt-interruttore[disabled] { opacity: .6; cursor: not-allowed; }
.pt-interruttore-perche { margin: 0; font-size: .8125rem; color: var(--pt-tenue); }

/* Selettore − / + (role="spinbutton") */
.pt-selettore { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pt-selettore-btn {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; cursor: pointer;
  border: 1px solid var(--pt-fantasma-bordo); background: var(--pt-fantasma-fondo); color: var(--pt-fantasma-testo);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700;
}
html[data-testo="grande"] .pt-selettore-btn { width: 56px; height: 56px; }
.pt-selettore-valore { flex: 1; text-align: center; font-size: 1.75rem; font-weight: 800; line-height: 1.1; border-radius: 12px; padding: 6px 0; }

/* Facce dell'umore (role="radiogroup", ogni faccia role="radio") */
.pt-facce { display: flex; gap: 2px; }
.pt-faccia {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 76px; padding: 4px 0;
  background: none; border: 0; border-radius: 14px; cursor: pointer; color: var(--pt-tenue);
  font-family: inherit; font-size: .75rem; font-weight: 600;
}
.pt-faccia-tondo {
  width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--pt-incavo); border: 1px solid var(--pt-bordo-forte); color: var(--pt-testo);
}
.pt-faccia[aria-checked="true"] { color: var(--pt-testo); }
/* «Testo grande»: le parole sotto le facce sono piu' larghe; cinque in fila uscirebbero dalla
   scheda a 320 px. Tre per riga (3 + 2, centrate), facce da 56 px, nessuno scorrimento di lato. */
html[data-testo="grande"] .pt-facce { flex-wrap: wrap; justify-content: center; gap: 8px; }
html[data-testo="grande"] .pt-faccia { flex: 0 0 calc(33.333% - 8px); min-width: 56px; }
html[data-testo="grande"] .pt-faccia-tondo { width: 56px; height: 56px; }
/* Telefoni stretti (320 px), testo normale: le cinque parole restano staccate. */
@media (max-width: 359.98px) {
  html:not([data-testo="grande"]) .pt-facce { gap: 4px; }
  html:not([data-testo="grande"]) .pt-faccia-tondo { width: 44px; height: 44px; }
}
.pt-faccia[aria-checked="true"] .pt-faccia-tondo { background: rgba(168, 85, 247, .24); border-color: var(--pt-aria); }

/* Anelli («7 su 12», passi): SVG role="img" con la frase intera */
.pt-anello { position: relative; width: 92px; height: 92px; align-self: center; }
.pt-anello svg { display: block; width: 100%; height: 100%; }
.pt-anello-traccia { fill: none; stroke: var(--pt-traccia); }
.pt-anello-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.pt-anello-numero { font-size: 1.125rem; font-weight: 800; line-height: 1.1; }
.pt-anello-di { font-size: .6875rem; color: var(--pt-tenue); }

/* Grafici: SVG del server con riassunto, e «Mostra i numeri» (tabella) */
.pt-grafico { display: flex; flex-direction: column; gap: 8px; }
.pt-grafico svg { display: block; width: 100%; height: auto; }
.pt-grafico-asse { stroke: var(--pt-bordo-forte); stroke-width: 1; }
.pt-grafico-griglia { stroke: var(--pt-riga); stroke-width: 1; }
.pt-grafico-scritta { fill: var(--pt-tenue); font-size: 11px; font-family: var(--pt-carattere); }
.pt-grafico-linea { fill: none; stroke: var(--pt-accento); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pt-grafico-fascia { fill: var(--pt-successo); opacity: .12; }
.pt-grafico-tabella { width: 100%; border-collapse: collapse; font-size: .875rem; }
.pt-grafico-tabella th, .pt-grafico-tabella td { padding: 8px 6px; text-align: left; border-bottom: 1px solid var(--pt-riga); }
.pt-grafico-tabella th { color: var(--pt-tenue); font-weight: 600; }
html[data-testo="grande"] .pt-grafico svg { min-height: 220px; }

/* Elenchi a righe (Io, impostazioni) */
.pt-voci { display: flex; flex-direction: column; padding: 4px 16px; border-radius: 20px; background: var(--pt-carta-velo); border: 1px solid var(--pt-bordo); }
.pt-voce {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 6px 0;
  border-bottom: 1px solid var(--pt-riga); color: var(--pt-testo); text-decoration: none; font-size: .9375rem;
}
.pt-voce:last-child { border-bottom: 0; }
a.pt-voce:hover { color: var(--pt-testo); }
html[data-testo="grande"] .pt-voce { min-height: 56px; }
.pt-voce-valore { color: var(--pt-tenue); font-size: .8125rem; text-align: right; }
.pt-titolo-gruppo { margin: 10px 0 2px; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pt-accento); font-weight: 700; }

/* Etichetta «In invio» della coda senza rete */
.pt-in-invio { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700; color: var(--pt-attenzione); }
.pt-in-invio::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* ---- Stati: vuoto, errore, in costruzione ------------------------------- */
.pt-vuoto { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 16px; text-align: center; }
.pt-vuoto-icona { color: var(--pt-accento); }
.pt-vuoto-titolo { margin: 0; font-size: 1.0625rem; font-weight: 700; }
.pt-vuoto-testo { margin: 0; color: var(--pt-tenue); font-size: .9375rem; max-width: 34ch; }
.pt-errore { align-items: flex-start; border-color: rgba(248, 113, 113, .45); }
.pt-errore-testo { margin: 0; font-size: .9375rem; }
.pt-in-costruzione { align-items: center; text-align: center; padding: 28px 20px; gap: 12px; }
.pt-in-costruzione-icona {
  width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--pt-accento); background: var(--pt-incavo); border: 1px solid var(--pt-bordo);
}
.pt-in-costruzione-titolo { margin: 0; font-size: 1.25rem; font-weight: 800; }
.pt-in-costruzione-testo { margin: 0; color: var(--pt-tenue); max-width: 34ch; }

/* ---- In basso: la barra ------------------------------------------------- */
/* Il fondo e' pieno dalla barra in giu', con 18 px pieni sopra la barra dove sporge il
   pulsante tondo di Aria: il testo della pagina che scorre sotto non si accavalla con la
   barra e non resta visibile sotto i pulsanti (niente tocchi destinati a qualcosa che si
   vede sotto). Lo spazio in fondo a .pt-contenuto (--pt-altezza-basso) porta sempre l'ultima
   riga sopra questa zona; la sfumatura di 16 px sta sopra, fuori dal riquadro.
   La zona e' piena, quindi prende anche i tocchi (pointer-events: auto): un tocco nello
   spazio vuoto accanto ad Aria non arriva ai pulsanti nascosti sotto (le facce dell'umore,
   le missioni, gli interruttori dei consensi). Solo la sfumatura, dove la pagina si vede
   ancora, lascia passare i tocchi. Senza barra (ingresso, primi passi) la zona non c'e'. */
.pt-basso {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding-top: 18px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--pt-pagina);
  pointer-events: auto;
}
.pt-basso::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 16px;
  background: linear-gradient(to bottom, transparent, var(--pt-pagina)); pointer-events: none;
}
@media (min-width: 768px) {
  .pt-basso { left: calc(50% - 240px); right: auto; width: 480px; }
}
html.tel-tastiera .pt-basso { display: none; }

/* «Testo grande»: «← Indietro» da 56 px. */
html[data-testo="grande"] .pt-indietro { min-height: 56px; }

.pt-barra {
  margin: 0 16px 12px; border-radius: 24px;
  background: var(--pt-barra-fondo); border: 1px solid var(--pt-bordo-forte);
  box-shadow: 0 -8px 30px rgba(2, 6, 23, .45);
}
html[data-tema="giorno"] .pt-barra { box-shadow: 0 -6px 24px rgba(15, 23, 42, .12); }
.pt-barra-elenco {
  list-style: none; margin: 0; padding: 0 4px;
  display: flex; align-items: flex-end; justify-content: space-around; min-height: 66px;
}
.pt-barra-voce { display: flex; flex: 1; justify-content: center; }
.pt-barra-link {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px;
  min-width: 64px; min-height: 56px; padding: 6px 2px 8px;
  font-size: .75rem; font-weight: 600; line-height: 1.1; color: var(--pt-tenue); text-decoration: none;
}
.pt-barra-link:hover { color: var(--pt-testo); }
.pt-barra-voce.e-attiva .pt-barra-link { color: var(--pt-accento); }
.pt-barra-icona { display: flex; align-items: center; justify-content: center; }
.pt-barra-link .pt-bollo { top: 2px; right: 8px; }
.pt-barra-nota { font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.pt-barra-link.e-spenta { cursor: not-allowed; }
.pt-barra-link.e-spenta .pt-barra-icona { opacity: .5; }

/* Aria: il pulsante tondo al centro, l'unico viola della barra. */
.pt-barra-voce.e-aria .pt-barra-link { color: var(--pt-aria-testo); font-weight: 700; }
.pt-barra-voce.e-aria .pt-barra-icona {
  width: 60px; height: 60px; margin-top: -32px; border-radius: 50%; color: #FFFFFF;
  background: radial-gradient(circle at 35% 30%, #C4B5FD, #8B5CF6 45%, #6D28D9 100%);
  box-shadow: 0 0 0 5px var(--pt-pagina), 0 0 24px rgba(168, 85, 247, .45);
}
.pt-barra-voce.e-aria .pt-barra-icona svg { width: 26px; height: 26px; }
.pt-barra-voce.e-aria.e-attiva .pt-barra-link { color: var(--pt-aria-testo); }
.pt-barra-voce.e-aria.e-attiva .pt-barra-icona {
  box-shadow: 0 0 0 5px var(--pt-pagina), 0 0 0 8px rgba(168, 85, 247, .6), 0 0 30px rgba(168, 85, 247, .6);
}
.pt-barra-voce.e-aria .pt-barra-link.e-spenta .pt-barra-icona { background: var(--pt-traccia); box-shadow: 0 0 0 5px var(--pt-pagina); }
html[data-testo="grande"] .pt-barra-link { min-height: 60px; font-size: .8125rem; }
/* Telefoni stretti (320 px): la barra va da bordo a bordo, cosi' ogni voce resta larga 64 px. */
@media (max-width: 359.98px) {
  .pt-barra { margin: 0; border-radius: 20px 20px 0 0; border-left: 0; border-right: 0; border-bottom: 0; }
  .pt-barra-elenco { padding: 0; }
  .pt-barra-link { min-width: 0; width: 100%; }
}

/* ---- Foglio dal basso (<dialog>) ----------------------------------------- */
dialog.pt-foglio {
  position: fixed; top: auto; bottom: 0; left: 0; right: 0; margin: 0 auto;
  width: 100%; max-width: 480px; max-height: 90vh; max-height: 90dvh; overflow-y: auto;
  padding: 10px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  border: 0; border-radius: 24px 24px 0 0;
  background: var(--pt-carta); color: var(--pt-testo);
  box-shadow: 0 -18px 40px rgba(2, 6, 23, .5);
}
dialog.pt-foglio[open] { display: flex; flex-direction: column; gap: 12px; animation: pt-sale .2s ease-out; }
dialog.pt-foglio::backdrop { background: rgba(2, 6, 23, .62); }
dialog.pt-foglio.e-senza-modale { z-index: 70; }
.pt-foglio-maniglia { width: 40px; height: 4px; margin: 2px auto 6px; border-radius: 2px; background: var(--pt-bordo-forte); }
.pt-foglio-titolo { margin: 0; font-size: 1.25rem; font-weight: 800; }
.pt-foglio-testo { margin: 0; color: var(--pt-tenue); }
.pt-foglio-nota { margin: -4px 0 0; font-size: .8125rem; color: var(--pt-tenue); text-align: center; }
@keyframes pt-sale { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }

/* ---- Avviso breve (salvato, link copiato) -------------------------------- */
.pt-avviso-breve {
  position: fixed; left: 16px; right: 16px; z-index: 60;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  max-width: 448px; margin: 0 auto; padding: 12px 16px; border-radius: 14px;
  background: var(--pt-avviso-fondo); color: var(--pt-avviso-testo); border: 1px solid var(--pt-bordo-forte);
  font-size: .9375rem; font-weight: 600; box-shadow: var(--pt-ombra);
}
body.pt-con-barra .pt-avviso-breve { bottom: calc(var(--pt-altezza-basso) + 8px + env(safe-area-inset-bottom, 0px)); }

/* ---- Movimento ridotto --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ---- Stampa: colori del giorno, niente barre ne' pulsanti ----------------- */
@media print {
  :root, html[data-tema] {
    --pt-pagina: #FFFFFF; --pt-carta: #FFFFFF; --pt-carta-velo: #FFFFFF; --pt-incavo: #FFFFFF;
    --pt-bordo: #999999; --pt-bordo-forte: #666666; --pt-riga: #CCCCCC; --pt-testo: #000000; --pt-tenue: #333333;
    --pt-accento: #000000; --pt-link: #000000; --pt-alone: transparent;
  }
  body.pt-corpo, .pt-colonna { background: #FFFFFF !important; color: #000000; box-shadow: none !important; }
  .pt-colonna { max-width: none; }
  .pt-basso, .pt-barra, .pt-foglio, .pt-banda.e-rete, .pt-btn, .pt-tondo, .pt-ascolta,
  .pt-salta, .pt-avviso-breve, .pt-selettore-btn, .pt-interruttore { display: none !important; }
  .pt-contenuto { padding: 0 !important; }
  .pt-scheda, .pt-voci { break-inside: avoid; border: 1px solid #999999; }
  a { color: #000000; text-decoration: none; }
}