/*
 * App Pazienti (/app-pazienti, resources/views/index/app-pazienti.blade.php):
 * l'app «Prevenire per te» mostrata ai pazienti. Pagina pubblica, sempre in
 * tema notte come le altre (layouts/app_index). Tutto e' agganciato a
 * #view-app-pazienti: nessuna regola tocca le altre pagine.
 *
 * Regole fisse:
 *  - lo stato di base e' sempre VISIBILE: le animazioni d'ingresso partono solo
 *    quando lo script ha messo .e-attesa (e la tolgono con .e-visibile); senza
 *    script, o con prefers-reduced-motion, si vede tutto fermo;
 *  - con prefers-reduced-motion niente animazioni ne' transizioni (in fondo);
 *  - telefono da 320 px: nessuno scorrimento orizzontale (overflow nascosto sul
 *    contenitore, misure in percentuale dentro i telefoni disegnati);
 *  - i testi dentro i telefoni disegnati si misurano in cqw (larghezza dello
 *    schermo del telefono), cosi' crescono e calano con il telefono.
 */

#view-app-pazienti {
  --ap-fondo: #060B1C;
  --ap-fondo2: #0A1128;
  --ap-pannello: #0E1734;
  --ap-linea: rgba(126, 176, 249, .14);
  --ap-testo: #E8EFFB;
  --ap-grigio: #93A7C9;
  --ap-tenue: #8496B8;
  --ap-acqua: #5EEAD4;
  --ap-azzurro: #60A5FA;
  --ap-viola: #A78BFA;
  --ap-oro: #FBBF24;
  --ap-rosa: #F472B6;
  --ap-verde: #6EE7B7;
  --ap-max: 1140px;
  --ap-telefono: 290px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: var(--ap-fondo);
  color: var(--ap-testo);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.6;
}
#view-app-pazienti *, #view-app-pazienti *::before, #view-app-pazienti *::after { box-sizing: border-box; }

#view-app-pazienti h1, #view-app-pazienti h2, #view-app-pazienti h3 {
  font-family: 'Sora', 'Inter', sans-serif; color: #fff; letter-spacing: -.025em; margin: 0;
}

.ap-contenitore { max-width: var(--ap-max); margin: 0 auto; padding: 0 24px; position: relative; }
.ap-nascosto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- Parole ---------- */
.ap-occhiello {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Sora', sans-serif; font-weight: 600; font-size: .74rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ap-acqua); margin: 0 0 1.1rem;
}
.ap-occhiello.e-oro { color: var(--ap-oro); }
.ap-occhiello.e-rosa { color: #F9A8D4; }
.ap-occhiello.e-viola { color: #C4B5FD; }
.ap-occhiello.e-acqua { color: var(--ap-acqua); }
.ap-occhiello.e-verde { color: var(--ap-verde); }
.ap-punto { width: 9px; height: 9px; border-radius: 50%; background: var(--ap-acqua); box-shadow: 0 0 12px rgba(94, 234, 212, .8); animation: ap-respiro-punto 2.4s ease-in-out infinite; }
@keyframes ap-respiro-punto { 0%, 100% { opacity: .55; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } }

.ap-acceso {
  background: linear-gradient(110deg, #5EEAD4 0%, #60A5FA 55%, #A78BFA 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.ap-acceso.e-oro { background-image: linear-gradient(110deg, #FDE68A, #FBBF24 55%, #F59E0B); }
.ap-acceso.e-rosa { background-image: linear-gradient(110deg, #FBCFE8, #F472B6 55%, #C084FC); }
.ap-acceso.e-viola { background-image: linear-gradient(110deg, #DDD6FE, #A78BFA 55%, #818CF8); }
.ap-acceso.e-verde { background-image: linear-gradient(110deg, #A7F3D0, #6EE7B7 50%, #5EEAD4); }

#view-app-pazienti h2 { font-size: clamp(1.85rem, 3.6vw, 2.8rem); line-height: 1.12; font-weight: 700; text-wrap: balance; }
.ap-frase { font-size: clamp(1.02rem, 1.6vw, 1.15rem); color: var(--ap-grigio); max-width: 32rem; margin: 1rem 0 0; line-height: 1.6; }
.ap-nota { font-size: .875rem; color: var(--ap-tenue); margin: 1rem 0 0; max-width: 34rem; line-height: 1.5; }
.ap-testa { text-align: center; margin-bottom: 3rem; }
.ap-testa .ap-occhiello { justify-content: center; }

/* ---------- Pulsanti ---------- */
/* «Inizia gratis»: lo stesso vestito del pulsante della pagina di benvenuto
   dell'app (public/css/per-te/accesso.css, .ac-inizia): sfumatura verde acqua
   → blu pervinca, testo blu notte, angoli molto arrotondati. */
#view-app-pazienti a.ap-inizia {
  display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 0 2.2rem;
  border-radius: 18px; background: linear-gradient(90deg, #6ED3C4, #688DF7); color: #0B1424 !important;
  font-size: 1.1875rem; font-weight: 700; letter-spacing: .005em; text-decoration: none;
  box-shadow: 0 8px 22px rgba(104, 141, 247, .22); transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
}
#view-app-pazienti a.ap-inizia:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(104, 141, 247, .32); }
#view-app-pazienti a.ap-fantasma {
  display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 0 1.7rem;
  border-radius: 18px; border: 1px solid rgba(56, 189, 248, .42); background: rgba(56, 189, 248, .04);
  color: #7DD3FC !important; font-weight: 600; font-size: 1.02rem; text-decoration: none; transition: background .2s ease, border-color .2s ease;
}
#view-app-pazienti a.ap-fantasma:hover { background: rgba(56, 189, 248, .1); border-color: rgba(125, 211, 252, .7); }
#view-app-pazienti a.ap-inizia:focus-visible, #view-app-pazienti a.ap-fantasma:focus-visible,
#view-app-pazienti button:focus-visible, #view-app-pazienti input:focus-visible {
  outline: 3px solid var(--ap-acqua); outline-offset: 3px;
}
.ap-azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }
.ap-azioni.e-centro { justify-content: center; }

.ap-pillole { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.4rem 0 0; }
.ap-pillola {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 99px;
  border: 1px solid var(--ap-linea); background: rgba(255, 255, 255, .04); color: var(--ap-testo);
  font-size: .85rem; font-weight: 600;
}
.ap-pillola.e-piena { border-color: transparent; background: linear-gradient(90deg, #6ED3C4, #688DF7); color: #0B1424; font-weight: 700; }

/* ---------- Il telefono disegnato ---------- */
.ap-telefono {
  position: relative; flex-shrink: 0; width: var(--ap-telefono); max-width: 100%; aspect-ratio: 390 / 844;
  padding: 9px; border-radius: 48px;
  background: linear-gradient(150deg, #2B3858 0%, #141C31 42%, #0B1120 100%);
  box-shadow: 0 0 0 1px rgba(148, 163, 184, .24), inset 0 0 0 1.5px rgba(255, 255, 255, .06),
              0 30px 60px -30px rgba(0, 0, 0, .7), 0 0 50px rgba(96, 165, 250, .08);
}
/* I tasti di lato. */
.ap-telefono::before, .ap-telefono::after { content: ""; position: absolute; width: 3px; border-radius: 3px; background: #26324D; }
.ap-telefono::before { left: -3px; top: 20%; height: 12%; }
.ap-telefono::after { right: -3px; top: 27%; height: 9%; }
.ap-schermo {
  position: relative; width: 100%; height: 100%; border-radius: 40px; overflow: hidden;
  background: #141A33; isolation: isolate; container-type: inline-size;
}
.ap-stato {
  position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 5.2%;
  display: flex; align-items: center; justify-content: space-between; padding: 0 7.5% 0 9.5%;
  color: #F8FAFC; font-size: 11px; font-size: 4.2cqw; font-weight: 600; letter-spacing: .01em;
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.ap-stato-icone { display: inline-flex; align-items: center; gap: 1.4cqw; }
.ap-stato-icone svg { width: auto; height: 3.6cqw; fill: currentColor; }
.ap-isola { position: absolute; left: 50%; top: 22%; width: 31%; height: 62%; transform: translateX(-50%); border-radius: 99px; background: #000; }
.ap-schermata-img { position: absolute; left: 0; top: 5.2%; width: 100%; height: 94.8%; object-fit: cover; object-position: top center; display: block; }

/* ================= APERTURA ================= */
.ap-apertura { position: relative; padding: 132px 0 90px; }
.ap-apertura::before, .ap-apertura::after { content: ""; position: absolute; pointer-events: none; border-radius: 50%; filter: blur(80px); opacity: .5; }
.ap-apertura::before { width: 620px; height: 620px; top: -18%; left: -10%; background: radial-gradient(circle, rgba(94, 234, 212, .22), transparent 65%); }
.ap-apertura::after { width: 680px; height: 680px; bottom: -30%; right: -12%; background: radial-gradient(circle, rgba(139, 92, 246, .24), transparent 65%); }
.ap-apertura-griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; z-index: 1; }
.ap-titolone { font-size: clamp(2.35rem, 5.3vw, 4.1rem); line-height: 1.04; font-weight: 800; letter-spacing: -.035em !important; }
.ap-sotto { font-size: clamp(1.05rem, 1.9vw, 1.25rem); color: var(--ap-grigio); max-width: 31rem; margin: 1.4rem 0 0; line-height: 1.6; }
.ap-garanzie { list-style: none; padding: 0; margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .92rem; color: var(--ap-grigio); }
.ap-garanzie li { display: inline-flex; align-items: center; gap: 7px; }
.ap-garanzie svg { color: var(--ap-acqua); flex-shrink: 0; }
/* Le parole che vanno a capo insieme (titolo dell'apertura). */
.ap-insieme { white-space: nowrap; }
.ap-invito { margin: 1rem 0 0; font-size: .95rem; font-weight: 600; color: #FDE68A; }

.ap-apertura-scena { --ap-telefono: 300px; position: relative; display: flex; justify-content: center; padding: 10px 0; }
.ap-alone { position: absolute; inset: 8% 10%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 40% 40%, rgba(94, 234, 212, .28), transparent 60%), radial-gradient(circle at 65% 65%, rgba(139, 92, 246, .3), transparent 62%);
  filter: blur(40px); animation: ap-alone 9s ease-in-out infinite; }
@keyframes ap-alone { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.08); opacity: 1; } }
.ap-apertura .ap-telefono { animation: ap-fluttua 7s ease-in-out infinite; }
@keyframes ap-fluttua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.ap-galleggia {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; width: max-content; max-width: 200px;
  border-radius: 16px; background: rgba(15, 23, 42, .72); border: 1px solid rgba(148, 163, 184, .2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 16px 40px rgba(2, 6, 23, .55);
  animation: ap-galleggia 6s ease-in-out infinite;
}
.ap-galleggia b { display: block; font-size: .86rem; color: #F1F5F9; line-height: 1.25; }
.ap-galleggia small { display: block; font-size: .75rem; color: var(--ap-grigio); line-height: 1.3; }
.ap-galleggia-icona { width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ap-galleggia-icona.e-oro { background: rgba(251, 191, 36, .16); color: #FCD34D; }
.ap-galleggia-icona.e-viola { background: rgba(168, 85, 247, .2); color: #D8B4FE; }
.ap-galleggia-icona.e-acqua { background: rgba(45, 212, 191, .16); color: #5EEAD4; }
/* Fuori dal telefono, appena sopra il bordo: non coprono la schermata. */
.ap-galleggia.e-1 { top: 24%; right: calc(50% + var(--ap-telefono) / 2 - 28px); }
.ap-galleggia.e-2 { top: 52%; left: calc(50% + var(--ap-telefono) / 2 - 28px); animation-delay: -2s; }
.ap-galleggia.e-3 { bottom: 15%; right: calc(50% + var(--ap-telefono) / 2 - 28px); animation-delay: -4s; }
@keyframes ap-galleggia { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ================= LA GIORNATA TIPO ================= */
.ap-giornata { position: relative; padding: 100px 0 110px; scroll-margin-top: 64px;
  background: radial-gradient(60% 50% at 30% 50%, rgba(56, 189, 248, .07), transparent 70%), linear-gradient(180deg, var(--ap-fondo), #081029 50%, var(--ap-fondo)); }
.ap-giornata-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; max-width: 1000px; margin: 0 auto; }
.ap-giornata-scena { position: relative; display: flex; justify-content: center; }
.ap-alone.e-giornata { inset: 6% 0; }
.ap-telefono-giornata { --ap-telefono: 316px; cursor: pointer; -webkit-tap-highlight-color: transparent; }

.ap-scena { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.02); transition: opacity .6s ease, transform .7s ease; }
.ap-scena.e-attiva { opacity: 1; transform: none; z-index: 1; }

/* La notifica disegnata: scende dall'alto, resta un poco e risale (sullo
   schermo bloccato resta). Testi veri degli avvisi dell'app. */
.ap-notifica {
  position: absolute; z-index: 3; left: 4%; right: 4%; top: 6.4%;
  display: flex; align-items: flex-start; gap: 3cqw; padding: 3.2cqw 3.6cqw;
  border-radius: 6cqw; background: rgba(30, 41, 59, .82); border: 1px solid rgba(148, 163, 184, .22);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 12px 30px rgba(2, 6, 23, .55); color: #F1F5F9; text-align: left;
  opacity: 0; transform: translateY(-140%);
}
.ap-notifica-icona { width: 10cqw; height: 10cqw; border-radius: 2.6cqw; flex-shrink: 0; display: block; }
.ap-notifica-corpo { min-width: 0; flex: 1; }
.ap-notifica-testa { display: flex; justify-content: space-between; gap: 2cqw; margin: 0; font-size: 3.4cqw; line-height: 1.3; }
.ap-notifica-testa b { font-weight: 700; color: #fff; }
.ap-notifica-testa span { color: #94A3B8; }
.ap-notifica-testo { font-size: 3.7cqw; line-height: 1.35; margin: .6cqw 0 0; color: #E2E8F0; }
.ap-notifica-azioni { display: flex; gap: 2cqw; margin: 2.2cqw 0 0; }
.ap-notifica-azioni span { flex: 1; text-align: center; padding: 1.6cqw 0; border-radius: 99px; background: rgba(148, 163, 184, .16); font-size: 3.4cqw; font-weight: 600; color: #F8FAFC; }
.ap-scena.e-attiva .ap-notifica { animation: ap-notifica 4.2s cubic-bezier(.2, .8, .2, 1) .45s both; }
.ap-scena.e-attiva .ap-notifica.e-ferma { animation: ap-notifica-resta .8s cubic-bezier(.2, .8, .2, 1) .5s both; }
@keyframes ap-notifica {
  0% { opacity: 0; transform: translateY(-140%); }
  12% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-140%); }
}
@keyframes ap-notifica-resta { from { opacity: 0; transform: translateY(-40%) scale(.96); } to { opacity: 1; transform: none; } }

/* Lo schermo bloccato (la medicina delle 9). */
.ap-blocco {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding-top: 17%; color: #fff;
  background: radial-gradient(110% 55% at 15% 8%, rgba(94, 234, 212, .38), transparent 60%),
              radial-gradient(120% 70% at 92% 92%, rgba(139, 92, 246, .5), transparent 62%),
              linear-gradient(165deg, #0D1D3D, #1A1242);
}
.ap-blocco-lucchetto { opacity: .85; }
.ap-blocco-lucchetto svg { width: 4.6cqw; height: 4.6cqw; }
.ap-blocco-ora { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 23cqw; line-height: 1; letter-spacing: -.03em; margin-top: 2cqw; font-variant-numeric: tabular-nums; }
.ap-blocco-sotto { font-size: 4cqw; opacity: .82; margin-top: 2.4cqw; }
.ap-notifica.e-ferma { top: 52%; }

/* I punti che volano via. */
.ap-punti-volanti {
  position: absolute; z-index: 3; right: 7%; bottom: 21%; padding: 1.8cqw 3.8cqw; border-radius: 99px;
  background: linear-gradient(135deg, #FCD34D, #F59E0B); color: #231500; font-weight: 800; font-size: 4.2cqw;
  box-shadow: 0 10px 26px rgba(245, 158, 11, .45); opacity: 0;
}
.ap-scena.e-attiva .ap-punti-volanti { animation: ap-punti 2.8s ease 1.7s both; }
@keyframes ap-punti {
  0% { opacity: 0; transform: translateY(24px) scale(.6); }
  18% { opacity: 1; transform: translateY(0) scale(1.08); }
  28% { transform: scale(1); }
  78% { opacity: 1; transform: translateY(-10px); }
  100% { opacity: 0; transform: translateY(-34px); }
}
.ap-giornata-corpo.e-in-pausa .ap-scena *, .ap-giornata-corpo.e-in-pausa .ap-scena { animation-play-state: paused !important; }

/* Le tappe della giornata. */
.ap-giornata-tappe { display: flex; flex-direction: column; gap: 14px; }
.ap-tappe { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
#view-app-pazienti .ap-tappa {
  width: 100%; display: grid; grid-template-columns: 40px auto 1fr; grid-template-areas: "icona ora titolo" "icona testo testo" "barra barra barra";
  align-items: center; column-gap: 12px; padding: 10px 14px; border-radius: 16px; border: 1px solid transparent;
  background: transparent; color: var(--ap-tenue); font: inherit; text-align: left; cursor: pointer;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
#view-app-pazienti .ap-tappa:hover { color: var(--ap-testo); background: rgba(255, 255, 255, .025); }
.ap-tappa-icona { grid-area: icona; align-self: start; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(148, 163, 184, .08); color: #94A3B8; transition: background .25s ease, color .25s ease; }
.ap-tappa-ora { grid-area: ora; font-family: 'Sora', sans-serif; font-weight: 600; font-size: .95rem; font-variant-numeric: tabular-nums; min-width: 3.1em; }
.ap-tappa-titolo { grid-area: titolo; font-weight: 600; font-size: 1rem; color: #CBD5E1; }
.ap-tappa-testo { grid-area: testo; display: none; font-size: .95rem; line-height: 1.45; color: var(--ap-grigio); margin-top: 2px; }
.ap-tappa-barra { grid-area: barra; display: none; height: 3px; margin-top: 10px; border-radius: 3px; background: rgba(148, 163, 184, .16); overflow: hidden; }
.ap-tappa-barra i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #6ED3C4, #688DF7); transform-origin: left center; transform: scaleX(var(--avanzamento, 0)); }
#view-app-pazienti .ap-tappa.e-attiva { background: rgba(255, 255, 255, .045); border-color: var(--ap-linea); color: var(--ap-testo); }
.ap-tappa.e-attiva .ap-tappa-icona { background: rgba(94, 234, 212, .14); color: var(--ap-acqua); }
.ap-tappa.e-attiva .ap-tappa-titolo { color: #fff; }
.ap-tappa.e-attiva .ap-tappa-testo, .ap-tappa.e-attiva .ap-tappa-barra { display: block; }
.ap-didascalia { display: none; margin: 0; }

#view-app-pazienti .ap-pausa {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border-radius: 99px; border: 1px solid rgba(56, 189, 248, .35); background: transparent; color: #7DD3FC;
  font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; margin-left: 14px;
}
#view-app-pazienti .ap-pausa:hover { background: rgba(56, 189, 248, .08); }
.ap-pausa-icona { display: inline-flex; }
.ap-pausa-icona.e-avvia, .ap-pausa[aria-pressed="true"] .ap-pausa-icona.e-pausa { display: none; }
.ap-pausa[aria-pressed="true"] .ap-pausa-icona.e-avvia { display: inline-flex; }

/* ================= SEZIONI ================= */
.ap-sezione { position: relative; padding: 100px 0; }
.ap-sezione.e-scura { background: var(--ap-fondo2); border-top: 1px solid var(--ap-linea); border-bottom: 1px solid var(--ap-linea); }
.ap-due { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: center; }
.ap-due.e-rovescio .ap-due-testo { order: 2; }
.ap-due-scena { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }

.ap-carta {
  margin-top: 1.8rem; padding: 22px; border-radius: 22px; border: 1px solid var(--ap-linea);
  background: linear-gradient(160deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
  box-shadow: 0 16px 40px rgba(0, 0, 0, .18); max-width: 34rem;
}
/* Ingresso delle carte (solo con lo script, vedi in alto). */
[data-anima].e-attesa { opacity: 0; transform: translateY(26px); }
[data-anima].e-visibile { opacity: 1; transform: none; transition: opacity .8s ease, transform .8s ease; }

/* ---------- Gioco: la strada dei livelli, la serie, i punti ---------- */
.ap-livelli-strada { --quanti: 6; list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(var(--quanti), minmax(0, 1fr)); }
.ap-livelli-strada::before, .ap-livelli-strada::after {
  content: ""; position: absolute; top: 18px; height: 3px; border-radius: 3px;
  left: calc(50% / var(--quanti)); right: calc(50% / var(--quanti));
}
.ap-livelli-strada::before { background: rgba(148, 163, 184, .18); }
.ap-livelli-strada::after { background: linear-gradient(90deg, #FDE68A, #F59E0B); transform-origin: left center; transform: scaleX(1); }
.ap-livello { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; z-index: 1; text-align: center; }
.ap-livello-tondo {
  width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1rem;
  background: linear-gradient(135deg, #FCD34D, #F59E0B); color: #231500; box-shadow: 0 0 18px rgba(251, 191, 36, .45);
  border: 2px solid transparent;
}
.ap-livello-nome { font-size: .78rem; line-height: 1.25; color: var(--ap-grigio); font-weight: 600; }
.ap-livelli.e-attesa .ap-livelli-strada::after, .ap-livelli.e-visibile .ap-livelli-strada::after { transform: scaleX(0); }
.ap-livelli.e-visibile .ap-livelli-strada::after { animation: ap-strada 4.6s cubic-bezier(.4, 0, .2, 1) .4s forwards; }
.ap-livelli.e-attesa .ap-livello-tondo, .ap-livelli.e-visibile .ap-livello-tondo { background: #0E1734; color: #FCD34D; border-color: rgba(251, 191, 36, .4); box-shadow: none; }
.ap-livelli.e-visibile .ap-livello-tondo { animation: ap-livello-acceso .5s ease forwards; animation-delay: calc(.4s + var(--i) * .9s); }
@keyframes ap-strada { to { transform: scaleX(1); } }
@keyframes ap-livello-acceso {
  0% { transform: scale(1); }
  50% { transform: scale(1.18); }
  100% { transform: scale(1); background: linear-gradient(135deg, #FCD34D, #F59E0B); color: #231500; border-color: transparent; box-shadow: 0 0 18px rgba(251, 191, 36, .45); }
}

.ap-serie { display: flex; justify-content: space-between; gap: 6px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--ap-linea); }
.ap-serie-giorno { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.ap-serie-giorno i {
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #FCD34D, #F59E0B); color: #231500; font-style: normal;
}
.ap-serie-giorno small { font-size: .75rem; color: var(--ap-tenue); font-weight: 600; }
.ap-livelli.e-attesa .ap-serie-giorno i, .ap-livelli.e-visibile .ap-serie-giorno i { background: transparent; color: transparent; border: 2px dashed rgba(148, 163, 184, .35); }
.ap-livelli.e-visibile .ap-serie-giorno i { animation: ap-giorno-fatto .45s ease forwards; animation-delay: calc(1.2s + var(--i) * .28s); }
@keyframes ap-giorno-fatto { 0% { transform: scale(.7); } 60% { transform: scale(1.15); } 100% { transform: scale(1); background: linear-gradient(135deg, #FCD34D, #F59E0B); color: #231500; border-color: transparent; } }

.ap-gettoni { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ap-gettoni li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px; background: rgba(251, 191, 36, .08); border: 1px solid rgba(251, 191, 36, .22); font-size: .85rem; color: #E2E8F0; }
.ap-gettoni b { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 26px; padding: 0 8px; border-radius: 99px; background: rgba(251, 191, 36, .18); color: #FCD34D; font-weight: 800; font-size: .82rem; }

/* ---------- Diario: il grafico che si disegna ---------- */
.ap-grafico-testa { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ap-grafico-titolo { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #F9A8D4; }
.ap-grafico-schede { display: inline-flex; gap: 4px; }
.ap-grafico-schede i { font-style: normal; font-size: .75rem; font-weight: 600; padding: 4px 10px; border-radius: 99px; color: var(--ap-tenue); border: 1px solid transparent; }
.ap-grafico-schede i.e-attiva { color: #FBCFE8; border-color: rgba(244, 114, 182, .5); background: rgba(244, 114, 182, .12); }
.ap-grafico-disegno { display: block; width: 100%; height: auto; overflow: visible; }
.ap-griglia path { stroke: rgba(148, 163, 184, .12); stroke-width: 1; fill: none; }
.ap-linea { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 420; stroke-dashoffset: 0; }
.ap-linea.e-alta { stroke: #F472B6; filter: drop-shadow(0 0 6px rgba(244, 114, 182, .45)); }
.ap-linea.e-bassa { stroke: #C4B5FD; }
.ap-grafico.e-attesa .ap-linea, .ap-grafico.e-visibile .ap-linea { stroke-dashoffset: 420; }
.ap-grafico.e-visibile .ap-linea { animation: ap-traccia 2.4s ease .3s forwards; }
.ap-grafico.e-visibile .ap-linea.e-bassa { animation-delay: .7s; }
@keyframes ap-traccia { to { stroke-dashoffset: 0; } }
.ap-grafico-azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ap-grafico-azioni span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 12px; font-size: .85rem; font-weight: 600; color: #7DD3FC; border: 1px solid rgba(56, 189, 248, .3); }
.ap-grafico-azioni span:first-child { background: linear-gradient(90deg, #0E7490, #2563EB); border-color: transparent; color: #fff; }

/* ---------- Aria: la sfera, l'onda, il saluto ---------- */
.ap-aria { background: radial-gradient(50% 60% at 70% 50%, rgba(139, 92, 246, .12), transparent 70%); }
.ap-sfera-grande { position: relative; width: 280px; height: 280px; max-width: 78vw; max-height: 78vw; display: flex; align-items: center; justify-content: center; }
.ap-sfera-anello { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(94, 234, 212, .22); animation: ap-anello 4.5s ease-out infinite; }
.ap-sfera-anello.e-2 { animation-delay: -1.5s; }
.ap-sfera-anello.e-3 { animation-delay: -3s; }
@keyframes ap-anello { 0% { transform: scale(.62); opacity: 0; } 25% { opacity: 1; } 100% { transform: scale(1.08); opacity: 0; } }
.ap-sfera-nucleo {
  width: 56%; height: 56%; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #CCFBF1, #2DD4BF 38%, #0EA5E9 70%, #2563EB 100%);
  box-shadow: 0 0 70px rgba(34, 211, 238, .5), 0 0 140px rgba(139, 92, 246, .25);
  animation: ap-respiro 6s ease-in-out infinite;
}
@keyframes ap-respiro { 0%, 100% { transform: scale(.95); } 50% { transform: scale(1.05); } }
.ap-onda { display: flex; align-items: center; justify-content: center; gap: 6px; height: 64px; margin-top: 18px; }
.ap-onda i { display: block; width: 5px; height: calc(var(--h) * 56px); border-radius: 5px; background: linear-gradient(180deg, #5EEAD4, #60A5FA); transform-origin: center; animation: ap-onda 1.3s ease-in-out infinite; animation-delay: calc(var(--i) * -.09s); }
@keyframes ap-onda { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }
.ap-fumetto { margin: 22px 0 0; max-width: 24rem; padding: 16px 20px; border-radius: 20px 20px 20px 6px; background: rgba(139, 92, 246, .14); border: 1px solid rgba(167, 139, 250, .32); text-align: center; }
.ap-fumetto span { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 1.08rem; line-height: 1.45; color: #F5F3FF; }

/* ---------- Consulto: la videochiamata disegnata ---------- */
#consulto .ap-due-scena { display: block; padding-bottom: 110px; width: 100%; }
.ap-video {
  position: relative; width: 88%; aspect-ratio: 4 / 3; border-radius: 26px; overflow: hidden;
  background: radial-gradient(70% 70% at 50% 35%, #1D3A66, #0C1A33 70%), #0C1A33;
  border: 1px solid rgba(148, 163, 184, .2); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .6);
}
.ap-video-medico { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; }
.ap-video-sagoma { width: 70%; height: auto; display: block; }
.ap-video-sagoma .e-pelle { fill: rgba(203, 213, 225, .34); }
.ap-video-sagoma .e-camice { fill: rgba(226, 232, 240, .26); }
.ap-video-sagoma .e-maglia { fill: rgba(96, 165, 250, .45); }
.ap-video-sagoma .e-steto { fill: none; stroke: #5EEAD4; stroke-width: 3.2; stroke-linecap: round; }
.ap-video-sagoma .e-steto-punta { fill: #5EEAD4; }
.ap-video-etichetta { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 99px; background: rgba(2, 6, 23, .55); color: #F1F5F9; font-size: .82rem; font-weight: 600; }
.ap-video-dal-vivo { width: 8px; height: 8px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); animation: ap-dal-vivo 1.8s ease-out infinite; }
@keyframes ap-dal-vivo { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); } 100% { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); } }
.ap-video-tu {
  position: absolute; top: 14px; left: 14px; width: 24%; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden;
  background: linear-gradient(160deg, #3B2A6B, #1E1B4B); border: 1px solid rgba(196, 181, 253, .35);
  display: flex; align-items: flex-end; justify-content: center;
}
.ap-video-tu svg { width: 90%; fill: rgba(221, 214, 254, .4); }
.ap-video-tu span { position: absolute; left: 8px; top: 6px; font-size: .72rem; font-weight: 700; color: #EDE9FE; }
.ap-video-comandi { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 10px; }
.ap-video-comandi span { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, .7); color: #E2E8F0; border: 1px solid rgba(148, 163, 184, .25); }
.ap-video-comandi span.e-chiudi { background: #DC2626; border-color: transparent; color: #fff; }
.ap-telefono-accanto { --ap-telefono: 200px; position: absolute; right: 0; bottom: 0; z-index: 2; }

/* ---------- Team ---------- */
.ap-team { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 980px; }
.ap-team-carta {
  position: relative; padding: 28px 24px 24px; border-radius: 24px; border: 1px solid var(--ap-linea);
  background: linear-gradient(160deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012));
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; overflow: hidden;
  transition: transform .3s ease, border-color .3s ease;
}
.ap-team-carta::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; opacity: .8; }
.ap-team-carta.e-viola::before { background: linear-gradient(90deg, transparent, #A78BFA, transparent); }
.ap-team-carta.e-verde::before { background: linear-gradient(90deg, transparent, #6EE7B7, transparent); }
.ap-team-carta.e-acqua::before { background: linear-gradient(90deg, transparent, #5EEAD4, transparent); }
.ap-team-carta:hover { transform: translateY(-4px); border-color: rgba(126, 176, 249, .3); }
.ap-team-icona { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.ap-team-carta.e-viola .ap-team-icona { background: rgba(168, 85, 247, .16); color: #D8B4FE; }
.ap-team-carta.e-verde .ap-team-icona { background: rgba(52, 211, 153, .14); color: #6EE7B7; }
.ap-team-carta.e-acqua .ap-team-icona { background: rgba(45, 212, 191, .14); color: #5EEAD4; }
.ap-team-icona svg { width: 26px; height: 26px; }
#view-app-pazienti .ap-team-carta h3 { font-size: 1.25rem; font-weight: 700; }
.ap-team-testi { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.ap-team-sotto { margin: 0; font-size: .95rem; color: var(--ap-grigio); }
.ap-team-carta .ap-pillola { margin-top: auto; }

/* ---------- Famiglia ---------- */
.ap-cerchio-famiglia { position: relative; }
.ap-cerchio-area { position: relative; height: 210px; }
.ap-cerchio-linee { position: absolute; inset: 0 0 auto 0; width: 100%; height: 210px; }
.ap-cerchio-linee path { stroke: rgba(94, 234, 212, .35); stroke-width: 1.5; stroke-dasharray: 5 6; fill: none; vector-effect: non-scaling-stroke; animation: ap-legame 1.6s linear infinite; }
@keyframes ap-legame { to { stroke-dashoffset: -22; } }
.ap-membro {
  position: absolute; z-index: 1; width: 66px; height: 66px; margin: -33px 0 0 -33px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: .78rem; font-weight: 700; color: #E0F2FE; background: #13224A; border: 2px solid rgba(96, 165, 250, .45);
  box-shadow: 0 8px 24px rgba(2, 6, 23, .5);
}
.ap-membro.e-centro { left: 50%; top: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; font-family: 'Sora', sans-serif; font-size: 1.05rem; color: #04121F; border: 0; background: linear-gradient(135deg, #6ED3C4, #688DF7); box-shadow: 0 0 34px rgba(94, 234, 212, .4); }
.ap-membro.e-1 { left: 20%; top: 22%; }
.ap-membro.e-2 { left: 80%; top: 22%; border-color: rgba(167, 139, 250, .5); background: #1E1B4B; color: #EDE9FE; }
.ap-membro.e-3 { left: 20%; top: 78%; border-color: rgba(244, 114, 182, .5); background: #3A1530; color: #FCE7F3; }
.ap-membro.e-4 { left: 80%; top: 78%; border-color: rgba(52, 211, 153, .5); background: #0F2E2A; color: #D1FAE5; }
.ap-cerchio-famiglia .ap-notifica.e-piccola { position: relative; inset: auto; margin-top: 14px; opacity: 1; transform: none; border-radius: 18px; padding: 12px 14px; gap: 12px; }
.ap-notifica.e-piccola .ap-notifica-icona { width: 34px; height: 34px; border-radius: 9px; }
.ap-notifica.e-piccola .ap-notifica-testa { font-size: .8rem; }
.ap-notifica.e-piccola .ap-notifica-testo { font-size: .9rem; margin-top: 2px; }
.ap-cerchio-famiglia.e-visibile .ap-notifica.e-piccola { animation: ap-squillo 7s ease 1.2s infinite; }
@keyframes ap-squillo {
  0% { opacity: 0; transform: translateY(-12px) scale(.97); }
  8%, 70% { opacity: 1; transform: none; }
  80%, 100% { opacity: 0; transform: translateY(-6px); }
}

/* ---------- Prevenzione per eta' ---------- */
.ap-eta-riga { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ap-eta-sesso { display: inline-flex; padding: 4px; border-radius: 14px; background: rgba(2, 6, 23, .45); border: 1px solid var(--ap-linea); }
#view-app-pazienti .ap-eta-sesso button { min-height: 40px; min-width: 76px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--ap-grigio); font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; }
#view-app-pazienti .ap-eta-sesso button[aria-checked="true"] { background: linear-gradient(135deg, #FCD34D, #F59E0B); color: #231500; }
.ap-eta-numero { font-size: 1rem; color: var(--ap-grigio); }
.ap-eta-numero b { font-family: 'Sora', sans-serif; font-size: 2.4rem; font-weight: 800; line-height: 1; color: #FCD34D; margin-right: 4px; font-variant-numeric: tabular-nums; }
.ap-eta-cursore { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 14px 0 6px; background: transparent; cursor: pointer; --pieno: 50%; }
.ap-eta-cursore::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: linear-gradient(90deg, #FBBF24 var(--pieno), rgba(148, 163, 184, .22) var(--pieno)); }
.ap-eta-cursore::-moz-range-track { height: 8px; border-radius: 8px; background: rgba(148, 163, 184, .22); }
.ap-eta-cursore::-moz-range-progress { height: 8px; border-radius: 8px; background: #FBBF24; }
.ap-eta-cursore::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: #fff; border: 4px solid #F59E0B; box-shadow: 0 4px 14px rgba(245, 158, 11, .5); }
.ap-eta-cursore::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid #F59E0B; box-shadow: 0 4px 14px rgba(245, 158, 11, .5); }
.ap-eta-elenco { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; min-height: 44px; }
.ap-eta-voce { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: rgba(251, 191, 36, .08); border: 1px solid rgba(251, 191, 36, .25); font-size: .9rem; color: #F8FAFC; line-height: 1.3; animation: ap-voce .35s ease both; }
.ap-eta-voce.e-vaccino { background: rgba(94, 234, 212, .08); border-color: rgba(94, 234, 212, .28); }
.ap-eta-voce svg { flex-shrink: 0; color: #FCD34D; }
.ap-eta-voce.e-vaccino svg { color: var(--ap-acqua); }
.ap-eta-voce small { display: block; font-size: .75rem; color: var(--ap-grigio); }
@keyframes ap-voce { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
.ap-eta-vuoto { font-size: .9rem; color: var(--ap-grigio); margin: 8px 0 0; }

/* ================= CHIUSURA ================= */
.ap-chiusura { position: relative; padding: 110px 0 120px; text-align: center; background: radial-gradient(50% 60% at 50% 40%, rgba(94, 234, 212, .1), transparent 70%); }
#view-app-pazienti .ap-chiusura h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.ap-chiusura .ap-frase { margin-left: auto; margin-right: auto; }
.ap-chiusura .ap-invito { margin-left: auto; margin-right: auto; }
.ap-sfera-piccola { width: 92px; height: 92px; margin: 0 auto 26px; border-radius: 50%; position: relative; display: flex; align-items: center; justify-content: center; }
.ap-sfera-piccola::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(94, 234, 212, .3); animation: ap-anello 4s ease-out infinite; }
.ap-sfera-piccola i { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #CCFBF1, #2DD4BF 38%, #0EA5E9 70%, #2563EB 100%); box-shadow: 0 0 40px rgba(34, 211, 238, .45); animation: ap-respiro 6s ease-in-out infinite; }
.ap-avvertenza { max-width: 36rem; margin: 2rem auto 0; font-size: .82rem; line-height: 1.55; color: var(--ap-tenue); }

/* ================= TABLET E TELEFONO ================= */
@media (max-width: 991.98px) {
  .ap-apertura { padding: 110px 0 70px; }
  .ap-apertura-griglia { grid-template-columns: minmax(0, 1fr); gap: 48px; text-align: center; }
  .ap-apertura-testo { display: flex; flex-direction: column; align-items: center; }
  .ap-sotto { margin-left: auto; margin-right: auto; }
  .ap-azioni, .ap-garanzie { justify-content: center; }

  .ap-giornata { padding: 80px 0 90px; scroll-margin-top: 100px; }
  .ap-giornata-corpo { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ap-giornata-tappe { max-width: 560px; width: 100%; margin: 0 auto; }
  .ap-didascalia { display: block; order: -1; text-align: center; min-height: 3.2em; font-size: 1.02rem; line-height: 1.5; color: var(--ap-grigio); }
  .ap-didascalia b { color: #fff; font-weight: 700; margin-right: 4px; }
  .ap-tappe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  #view-app-pazienti .ap-tappa { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ora" "titolo" "barra"; justify-items: center; text-align: center; padding: 8px 4px 9px; row-gap: 1px; min-height: 64px; }
  .ap-tappa-icona, .ap-tappa.e-attiva .ap-tappa-testo { display: none; }
  .ap-tappa-ora { font-size: .9rem; min-width: 0; }
  .ap-tappa-titolo { font-size: .78rem; line-height: 1.25; font-weight: 600; }
  .ap-tappa-barra { display: block; width: 70%; margin-top: 6px; opacity: 0; }
  .ap-tappa.e-attiva .ap-tappa-barra { opacity: 1; }
  #view-app-pazienti .ap-pausa { align-self: center; margin-left: 0; }

  .ap-sezione { padding: 80px 0; }
  .ap-due { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .ap-due.e-rovescio .ap-due-testo { order: 0; }
  .ap-due-testo { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .ap-frase, .ap-nota { margin-left: auto; margin-right: auto; }
  .ap-carta { width: 100%; text-align: left; }
  .ap-pillole { justify-content: center; }
  #consulto .ap-due-scena { max-width: 520px; margin: 0 auto; }
  .ap-team { grid-template-columns: minmax(0, 1fr); max-width: 520px; gap: 12px; }
  .ap-team-carta { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; row-gap: 8px; align-items: center; padding: 18px; text-align: left; }
  .ap-team-icona { margin: 0; grid-row: span 2; }
  .ap-team-testi { margin: 0; }
  .ap-team-carta .ap-pillola { margin-top: 0; justify-self: start; }
}

@media (max-width: 575.98px) {
  #view-app-pazienti { --ap-telefono: 240px; }
  .ap-contenitore { padding: 0 16px; }
  .ap-apertura { padding: 96px 0 56px; }
  .ap-apertura-scena { --ap-telefono: 250px; }
  .ap-telefono-giornata { --ap-telefono: 262px; }
  .ap-telefono { border-radius: 40px; padding: 8px; }
  .ap-schermo { border-radius: 33px; }
  #view-app-pazienti a.ap-inizia, #view-app-pazienti a.ap-fantasma { width: 100%; }
  .ap-garanzie { flex-direction: column; align-items: center; gap: 6px; }
  /* La spunta resta accanto alla frase anche quando la frase va a capo. */
  .ap-garanzie li { display: block; text-align: center; }
  .ap-garanzie svg { display: inline-block; vertical-align: -3px; margin-right: 6px; }
  .ap-testa { margin-bottom: 2rem; }
  .ap-carta { padding: 18px 16px; border-radius: 20px; }
  /* Sei nomi in fila non ci stanno: uno sopra e uno sotto, a zig zag (ogni nome ha lo spazio di due). */
  .ap-livello { display: grid; grid-template-rows: 1.35rem 32px 1.35rem; justify-items: center; align-items: center; gap: 4px; }
  .ap-livello-tondo { grid-row: 2; width: 32px; height: 32px; font-size: .9rem; }
  .ap-livello-nome { grid-row: 3; font-size: .72rem; white-space: nowrap; }
  .ap-livello:nth-child(even) .ap-livello-nome { grid-row: 1; }
  .ap-livelli-strada::before, .ap-livelli-strada::after { top: calc(1.35rem + 4px + 15px); }
  .ap-serie-giorno i { width: 30px; height: 30px; }
  .ap-sfera-grande { width: 230px; height: 230px; }
  /* Sul telefono la videochiamata da sola: la schermata del consulto c'e' gia' nella giornata tipo. */
  #consulto .ap-due-scena { padding-bottom: 0; }
  .ap-video { width: 100%; }
  /* Senza il telefono accanto l'etichetta va in alto a destra: in basso ci sono i comandi. */
  .ap-video-etichetta { left: auto; right: 14px; bottom: auto; top: 14px; }
  .ap-telefono-accanto { display: none; }
  .ap-membro { width: 58px; height: 58px; margin: -29px 0 0 -29px; font-size: .72rem; }
  .ap-membro.e-centro { width: 70px; height: 70px; margin: -35px 0 0 -35px; }
  .ap-chiusura { padding: 90px 0 100px; }
}

/* Sotto i 680 px non c'e' spazio ai lati del telefono: i bollini uscirebbero
   dallo schermo (a 576-620 px «Il medico in video» e «Missioni di oggi»
   venivano tagliati a sinistra; a 640 px, con la barra di scorrimento di
   Windows, ancora di qualche pixel). Il telefono da solo. */
@media (max-width: 679.98px) {
  .ap-galleggia { display: none; }
}

/* Fra 992 e 1099 px la colonna di destra non ha posto per un bollino a destra
   del telefono (servono circa 1084 px): «Aria a voce» veniva tagliato. Restano
   i due a sinistra; il terzo scende un poco per staccarsi da «Guarda una giornata». */
@media (min-width: 992px) and (max-width: 1099.98px) {
  .ap-galleggia.e-2 { display: none; }
  .ap-galleggia.e-3 { bottom: 10%; }
}

@media (max-width: 359.98px) {
  .ap-telefono-giornata { --ap-telefono: 240px; }
  .ap-tappe { gap: 4px; }
  .ap-tappa-titolo { font-size: .72rem; }
  #view-app-pazienti .ap-eta-sesso button { min-width: 64px; padding: 0 10px; }
}

/* ================= MENO MOVIMENTO ================= */
@media (prefers-reduced-motion: reduce) {
  #view-app-pazienti *, #view-app-pazienti *::before, #view-app-pazienti *::after { animation: none !important; transition: none !important; }
  .ap-scena.e-attiva .ap-notifica, .ap-scena.e-attiva .ap-punti-volanti { opacity: 1; transform: none; }
  [data-anima].e-attesa { opacity: 1; transform: none; }
}