:root {
  /* stessi colori di PostOp (app/globals.css): blu notte, fondo grigio-azzurro, bordi tenui */
  --sfondo: #f0f4f8;
  --carta: #ffffff;
  --campo: #f8fafc;
  --inchiostro: #0d1b2a;
  --tenue: #44546a;
  --muto: #6b7a8d;
  --linea: #dde4ed;
  --acc: #1a3a6b;
  --acc-scuro: #142d55;
  --acc-chiaro: #deeaf8;
  --acc-medio: #4a7fd4;
  --corallo: #c0392b;
  --corallo-chiaro: #fbeae7;
  --ok: #1e8449;
  --ok-chiaro: #e3f3e8;
  --ambra: #a2670f;
  --ambra-chiaro: #fbf1de;
  --raggio: 24px;
  --ombra: 0 1px 2px rgba(13, 27, 42, .05), 0 4px 12px rgba(13, 27, 42, .06);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--sfondo); color: var(--inchiostro);
  font: 18px/1.5 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--acc-scuro); }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

/* testata */
.testa { position: sticky; top: 0; z-index: 5; background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea); padding-top: env(safe-area-inset-top, 0px); }
.testa-in { max-width: 640px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.testa-tit { display: flex; flex-direction: column; line-height: 1.15; flex: 1; min-width: 0; }
.testa-tit b { font-size: 18px; }
.testa-tit span { font-size: 13.5px; color: var(--tenue); }
.testa-prof { border: 0; background: var(--acc-chiaro); color: var(--acc); width: 46px; height: 46px;
  border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.prova { background: var(--ambra-chiaro); color: #7a4d0c; text-align: center; font-size: 14px; padding: 6px 16px; font-weight: 700; }

.pagina { max-width: 640px; margin: 0 auto; padding: 18px 16px calc(40px + env(safe-area-inset-bottom, 0px)); }
.carica { display: flex; align-items: center; gap: 12px; color: var(--tenue); padding: 40px 0; justify-content: center; }
.rotella { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--linea); border-top-color: var(--acc);
  animation: gira 0.9s linear infinite; display: inline-block; }
@keyframes gira { to { transform: rotate(360deg); } }

h1 { font-size: 28px; line-height: 1.2; margin: 6px 0 8px; letter-spacing: -.01em; text-wrap: balance; }
h2 { font-size: 21px; line-height: 1.25; margin: 0 0 8px; text-wrap: balance; }
h3 { font-size: 18px; margin: 0 0 6px; }
p { margin: 0 0 12px; }
.sotto { color: var(--tenue); font-size: 17px; }
.piccolo { font-size: 15px; color: var(--tenue); }
.etichetta { font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muto); font-weight: 600; margin-bottom: 6px; }

.scheda { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 20px; box-shadow: var(--ombra); margin-bottom: 14px; }
.scheda.evidenza { background: var(--acc); border-color: var(--acc); color: #fff; }
.scheda.evidenza .etichetta { color: #b9cdea; }
.scheda.evidenza .piccolo { color: #dbe6f5; }
.scheda.corallo { background: var(--corallo-chiaro); box-shadow: none; border-color: #f2c4bd; }
.scheda.calma { background: var(--acc-chiaro); border-color: #c9dbf2; box-shadow: none; }
.scheda.ambra { background: var(--ambra-chiaro); box-shadow: none; border-color: #efd9ad; }
.pila { display: grid; gap: 12px; }

/* pulsanti */
.btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 58px; padding: 14px 18px;
  border-radius: 14px; border: 0; background: var(--acc); color: #fff; font-weight: 700; font-size: 19px; cursor: pointer;
  text-decoration: none; text-align: center; -webkit-tap-highlight-color: transparent; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.secondario { background: var(--carta); color: var(--acc-scuro); border: 2px solid var(--acc); }
.btn.leggero { background: transparent; color: var(--acc-scuro); min-height: 48px; font-weight: 700; }
.btn.corallo { background: var(--corallo); }
.btn.bianco { background: #fff; color: var(--acc-scuro); }
.indietro { background: none; border: 0; color: var(--acc-scuro); font-weight: 700; padding: 6px 0; margin-bottom: 6px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; font-size: 17px; }

/* griglia azioni in home */
.azioni { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.azione { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio); box-shadow: var(--ombra); padding: 16px 14px; min-height: 112px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px; cursor: pointer; text-align: left;
  font-weight: 700; font-size: 18px; line-height: 1.2; color: var(--inchiostro); text-decoration: none; }
.azione .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--acc-chiaro); display: grid; place-items: center; color: var(--acc-scuro); }
.azione.urgente .ico { background: var(--corallo-chiaro); color: var(--corallo); }

/* moduli */
label.campo { display: block; margin-bottom: 14px; }
label.campo > span { display: block; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muto); margin-bottom: 6px; }
label.campo > small { display: block; color: var(--muto); font-size: 14.5px; margin-top: 4px; }
input[type=text], input[type=email], input[type=tel], input[type=date], textarea, select {
  width: 100%; min-height: 56px; padding: 12px 16px; border: 1px solid var(--linea); border-radius: 14px; background: var(--campo); font-size: 19px; }
textarea { min-height: 110px; resize: vertical; }
input:focus, textarea:focus, select:focus, button:focus-visible, a:focus-visible { outline: 3px solid #9fbbe6; outline-offset: 1px; border-color: var(--acc); }
.codice-in { font-size: 34px !important; letter-spacing: .4em; text-align: center; font-weight: 700; }
.spunta { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; cursor: pointer; }
.spunta input { width: 28px; height: 28px; flex: none; margin-top: 2px; accent-color: var(--acc); }
.scelte { display: grid; gap: 10px; }
.scelte.riga { grid-template-columns: repeat(3, 1fr); }
.scelta { border: 2px solid var(--linea); background: #fff; border-radius: 12px; min-height: 56px; padding: 10px 12px; cursor: pointer; font-weight: 700;
  text-align: left; display: flex; align-items: center; gap: 10px; }
.scelte.riga .scelta { justify-content: center; text-align: center; }
.scelta[aria-pressed=true] { border-color: var(--acc); background: var(--acc-chiaro); color: var(--acc-scuro); }
.scelta small { display: block; font-weight: 400; color: var(--tenue); font-size: 15px; }

/* scala del dolore */
.dolore { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.dolore button { height: 58px; border-radius: 12px; border: 2px solid transparent; font-weight: 700; font-size: 21px; cursor: pointer; color: #10262a; }
.dolore button[aria-pressed=true] { border-color: var(--inchiostro); box-shadow: 0 0 0 3px #fff inset; transform: scale(1.04); }
.dolore-legenda { display: flex; justify-content: space-between; color: var(--tenue); font-size: 14.5px; margin-top: 6px; }

/* percorso */
.percorso { list-style: none; margin: 0; padding: 0; }
.percorso li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 0 0 16px; position: relative; }
.percorso li:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 26px; bottom: 0; width: 2px; background: var(--linea); }
.percorso .pallino { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--linea); background: #fff; display: grid; place-items: center; z-index: 1; }
.percorso .fatta .pallino { background: var(--ok); border-color: var(--ok); color: #fff; }
.percorso .adesso .pallino { border-color: var(--acc); background: var(--acc-chiaro); box-shadow: 0 0 0 4px #e7effa; }
.percorso .nome { font-weight: 700; }
.percorso .quando { color: var(--tenue); font-size: 15.5px; }
.percorso .adesso .nome { color: var(--acc-scuro); }

/* foto */
.galleria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.galleria button { padding: 0; border: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 1; background: var(--linea); cursor: pointer; }
.galleria img { width: 100%; height: 100%; object-fit: cover; }
.gruppo-data { font-weight: 700; margin: 16px 0 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.gruppo-data span { font-weight: 400; color: var(--tenue); font-size: 15px; }
.confronto { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4/5; background: #0c1f22; touch-action: pan-y; }
.confronto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.confronto .dopo-taglio { position: absolute; inset: 0; overflow: hidden; }
.confronto .linea { position: absolute; top: 0; bottom: 0; width: 3px; background: #fff; box-shadow: 0 0 6px rgba(0,0,0,.4); }
.confronto .tag { position: absolute; top: 10px; background: rgba(16,38,42,.72); color: #fff; font-size: 14px; padding: 4px 10px; border-radius: 99px; font-weight: 700; }
.confronto input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.lente { position: fixed; inset: 0; background: rgba(8,20,22,.94); z-index: 20; display: flex; flex-direction: column; padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }
.lente img { flex: 1; object-fit: contain; width: 100%; min-height: 0; }
.lente .barra { display: flex; justify-content: space-between; align-items: center; color: #fff; padding: 12px 16px; gap: 12px; }
.lente button { background: rgba(255,255,255,.14); color: #fff; border: 0; border-radius: 99px; min-height: 48px; padding: 0 18px; font-weight: 700; cursor: pointer; }

/* sedi, giornate, orari */
.lista { display: grid; gap: 10px; }
.voce { background: #fff; border: 2px solid var(--linea); border-radius: 14px; padding: 14px 16px; cursor: pointer; text-align: left; width: 100%;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.voce:active { border-color: var(--acc); }
.voce b { display: block; }
.voce small { color: var(--tenue); font-size: 15px; display: block; }
.voce .freccia { color: var(--acc); flex: none; }
.distintivo { display: inline-block; font-size: 13px; font-weight: 700; padding: 2px 9px; border-radius: 99px; background: var(--acc-chiaro);
  color: var(--acc-scuro); vertical-align: 2px; }
.distintivo.ambra { background: var(--ambra-chiaro); color: #7a4d0c; }
.distintivo.ok { background: var(--ok-chiaro); color: var(--ok); }
.orari { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.orari button { min-height: 54px; border-radius: 12px; border: 2px solid var(--linea); background: #fff; font-weight: 700; font-size: 18px; cursor: pointer; }
.orari button[aria-pressed=true] { border-color: var(--acc); background: var(--acc); color: #fff; }
.sezione-tit { font-weight: 700; color: var(--tenue); margin: 18px 0 8px; font-size: 15px; text-transform: uppercase; letter-spacing: .06em; }
.riepilogo { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 6px 0 14px; }
.riepilogo dt { color: var(--tenue); }
.riepilogo dd { margin: 0; font-weight: 700; }

/* consenso */
.testo-legale { background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: 14px 16px; max-height: 46vh; overflow: auto;
  font-size: 16px; line-height: 1.55; margin-bottom: 12px; }
.testo-legale p { margin-bottom: 10px; }

.avviso { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 30;
  background: var(--inchiostro); color: #fff; padding: 14px 18px; border-radius: 14px; max-width: min(92vw, 560px); font-size: 17px;
  box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.avviso.errore { background: var(--corallo); }
.barra-avanzamento { height: 10px; border-radius: 99px; background: var(--linea); overflow: hidden; margin: 10px 0; }
.barra-avanzamento > div { height: 100%; width: 0; background: var(--acc); transition: width .2s; }
.vuoto { text-align: center; color: var(--tenue); padding: 24px 8px; }
.riga-flex { display: flex; gap: 10px; align-items: center; }
.riga-flex > * { flex: 1; }
.cerchio-ok { width: 74px; height: 74px; border-radius: 50%; background: var(--ok-chiaro); color: var(--ok); display: grid; place-items: center; margin: 12px auto 10px; }
.centro { text-align: center; }
.anteprime { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 12px; }
.anteprime img { width: 76px; height: 76px; object-fit: cover; border-radius: 10px; }
footer.piede { text-align: center; color: var(--muto); font-size: 14px; margin-top: 26px; }
@media (max-width: 380px) {
  body { font-size: 17px; }
  .orari { grid-template-columns: repeat(3, 1fr); }
  .scelte.riga { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

h1[tabindex="-1"]:focus { outline: none; }
.riepilogo dd .piccolo { font-weight: 400; }