/*
 * PORTALE UNICO PRATICHE FOTOVOLTAICO - stile.css
 * Grafica del portale. Colori e carattere sono descritti nel file master, cap. 5.
 */
:root {
  --notte: #06132b;       /* fondo del vetro */
  --cella: #0d2f66;       /* blu della cella fotovoltaica */
  --vetro: #1a56b0;       /* blu chiaro, riflessi e azioni */
  --sole: #ffb62e;        /* luce: avanzamento e selezione */
  --sole-scuro: #f09a12;
  --carta: #f4f7fb;       /* fondo dei moduli da compilare */
  --bianco: #ffffff;
  --testo: #0b1a33;
  --testo-2: #56667f;
  --linea: #cbd5e3;
  --errore: #b3261e;
  --curva: cubic-bezier(.22, .8, .2, 1);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--testo);
  background: var(--carta);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--sole); outline-offset: 3px; }

/* ---------- Struttura ---------- */
.pagina { min-height: 100vh; display: flex; }

/* ---------- Lato vetro: il modulo fotovoltaico sotto il sole ---------- */
.hero {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  color: var(--bianco);
  padding: clamp(28px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  background: linear-gradient(155deg, var(--notte) 0%, #0a2654 52%, var(--vetro) 135%);
}
/* Il sole che sorge nell'angolo: un disco netto e il suo bagliore sul vetro */
.sole, .bagliore {
  position: absolute;
  top: 0;
  right: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  animation: alba 2.2s var(--curva) .1s both;
}
.sole {
  width: 34%;
  translate: 38% -46%;
  background: radial-gradient(circle at 32% 68%, #fff3d1 0%, #ffcd63 38%, #ff9f0f 100%);
  box-shadow: 0 0 48px 14px rgba(255, 176, 46, .75), 0 0 150px 60px rgba(255, 150, 40, .30);
}
.bagliore {                /* il cielo si schiarisce attorno al sole */
  width: 170%;
  translate: 46% -50%;
  background: radial-gradient(closest-side, rgba(150, 190, 255, .55) 0%, rgba(90, 150, 255, .26) 40%, transparent 100%);
  mix-blend-mode: screen;
}
.hero::before {            /* celle e busbar */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 100% 104px, 104px 100%, 26px 100%;
  -webkit-mask-image: linear-gradient(205deg, #000 8%, transparent 78%);
  mask-image: linear-gradient(205deg, #000 8%, transparent 78%);
}
.hero::after {             /* riflesso che attraversa il vetro all'apertura */
  content: "";
  position: absolute;
  inset: -20% -60%;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 44%, rgba(255, 255, 255, .16) 50%, transparent 56%);
  transform: translateX(-70%);
  animation: riflesso 2.6s var(--curva) .25s both;
}
.hero > :not(.sole):not(.bagliore) { position: relative; z-index: 1; }

.marchio { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 550; font-size: .98rem; }
.marchio svg { width: 24px; height: 24px; flex: none; }

.hero-testo { max-width: 40rem; overflow: hidden; }
.hero h1 {
  font-stretch: 122%;
  font-weight: 650;
  font-size: clamp(2.3rem, 4.5vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -.018em;
  margin: 0;
  max-width: 11.5em;
  animation: sale .8s var(--curva) .1s both;
  transition: font-size .7s var(--curva);
}
.hero-testo p {
  margin: 20px 0 0;
  max-width: 34ch;
  font-size: 1.12rem;
  color: rgba(255, 255, 255, .8);
  max-height: 8em;
  animation: sale .8s var(--curva) .25s both;
  transition: opacity .35s, max-height .6s var(--curva), margin .6s var(--curva);
}

/* Le tappe di una pratica: la linea si accende all'apertura */
.percorso {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  max-width: 640px;
}
.percorso::before, .percorso::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 10%;
  height: 2px;
  border-radius: 2px;
}
.percorso::before { right: 10%; background: rgba(255, 255, 255, .22); }
.percorso::after {
  width: 60%;
  background: linear-gradient(90deg, var(--sole-scuro), var(--sole));
  box-shadow: 0 0 14px rgba(255, 182, 46, .7);
  transform-origin: left;
  animation: traccia 1.5s var(--curva) .6s both;
}
.tappa { position: relative; z-index: 1; text-align: center; font-size: .82rem; color: rgba(255, 255, 255, .72); }
.tappa::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin: 0 auto 12px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45);
  background: #0a2654;
}
.tappa.fatta::before, .tappa.corso::before {
  border-color: var(--sole);
  animation: accende .45s var(--curva) both;
  animation-delay: calc(.6s + var(--i) * .5s);
}
.tappa.fatta::before { background: var(--sole); box-shadow: 0 0 0 5px rgba(255, 182, 46, .18); }
.tappa.corso { color: var(--bianco); font-weight: 600; }
.tappa.corso::after {     /* alone che pulsa sulla tappa in corso */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  border: 2px solid var(--sole);
  animation: pulsa 2.4s ease-out 2.4s infinite;
  opacity: 0;
}

/* ---------- Lato carta: accesso e registrazione ---------- */
.pannello {
  flex: 0 0 42%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 4vw, 56px);
  background: var(--carta);
  transition: flex-basis .7s var(--curva);
}
.vista { width: 100%; max-width: 400px; }
#vista-registrazione { max-width: 780px; }

/* Passando alla registrazione il vetro si rimpicciolisce e lascia spazio alle scelte */
.pagina[data-vista="registrazione"] .pannello { flex-basis: 66%; }
.pagina[data-vista="registrazione"] .hero h1 { font-size: clamp(1.5rem, 2.2vw, 2.2rem); }
.pagina[data-vista="registrazione"] .hero-testo p { opacity: 0; max-height: 0; margin-top: 0; }

h2 {
  font-stretch: 114%;
  font-weight: 650;
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: -.012em;
  margin: 0 0 8px;
}
h2:focus { outline: none; }
.sotto { color: var(--testo-2); margin: 0 0 26px; }

.campo { margin: 0 0 18px; }
.coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
label, .etichetta { display: block; font-weight: 550; font-size: .95rem; margin: 0 0 6px; }
.facoltativo { font-weight: 400; color: var(--testo-2); }
.aiuto { font-size: .88rem; color: var(--testo-2); margin: 6px 0 0; }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"] {
  width: 100%;
  font: inherit;
  color: inherit;
  padding: 13px 14px;
  background: var(--bianco);
  border: 1.5px solid var(--linea);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
input:focus-visible { outline: none; border-color: var(--vetro); box-shadow: 0 0 0 4px rgba(26, 86, 176, .16); }
input.sbagliato { border-color: var(--errore); }
.maiuscolo { text-transform: uppercase; }
.con-pulsante { position: relative; }
.con-pulsante input { padding-right: 96px; }
.con-pulsante button {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  border: 0;
  background: none;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--vetro);
  cursor: pointer;
}

.pulsante {
  width: 100%;
  font-weight: 600;
  padding: 14px 20px;
  border: 0;
  border-radius: 10px;
  color: var(--bianco);
  background: linear-gradient(135deg, var(--vetro), var(--cella));
  box-shadow: 0 10px 22px -10px rgba(13, 47, 102, .7);
  cursor: pointer;
  transition: filter .15s, transform .15s;
}
.pulsante:hover { filter: brightness(1.12); }
.pulsante:active { transform: scale(.985); }
.pulsante:disabled { opacity: .6; cursor: default; filter: none; }
.pulsante.leggero {
  width: auto;
  color: var(--cella);
  background: transparent;
  border: 1.5px solid var(--linea);
  box-shadow: none;
}
.pulsante.leggero:hover { border-color: var(--vetro); filter: none; }
.pulsante.google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--testo);
  background: var(--bianco);
  border: 1.5px solid var(--linea);
  box-shadow: none;
}
.pulsante.google:hover { border-color: var(--vetro); filter: none; }
.pulsante.google svg { width: 20px; height: 20px; flex: none; }
.oppure {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0;
  font-size: .9rem;
  color: var(--testo-2);
}
.oppure::before, .oppure::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
.collegamento {
  border: 0;
  background: none;
  padding: 0;
  font-weight: 600;
  color: var(--vetro);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
a { color: var(--vetro); font-weight: 600; text-underline-offset: 3px; }
.azioni { display: flex; gap: 12px; align-items: center; margin-top: 26px; }
.azioni .pulsante:not(.leggero) { flex: 1; }
.cambio { margin: 26px 0 0; color: var(--testo-2); }

.avviso {
  margin: 0 0 18px;
  padding: 11px 14px;
  border-left: 3px solid var(--errore);
  border-radius: 0 8px 8px 0;
  background: #fbeceb;
  color: var(--errore);
}
.errore-campo { margin: 6px 0 0; font-size: .9rem; color: var(--errore); }

/* ---------- Registrazione ---------- */
.testata { display: flex; align-items: center; gap: 14px; margin: 0 0 26px; font-size: .9rem; color: var(--testo-2); }
.barra { flex: 1; height: 4px; border-radius: 4px; background: var(--linea); overflow: hidden; }
.barra i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--sole-scuro), var(--sole));
  transform-origin: left;
  transform: scaleX(.25);
  transition: transform .6s var(--curva);
}
.riepilogo { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.riepilogo:empty { display: none; }
.fatto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 6px 14px 6px 10px;
  font-size: .9rem;
  font-weight: 550;
  color: var(--cella);
  background: var(--bianco);
  border: 1.5px solid var(--linea);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .2s;
}
.fatto:hover { border-color: var(--vetro); }
.fatto svg { width: 18px; height: 18px; flex: none; color: var(--sole-scuro); }
.fatto span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.passo { animation: entra .5s var(--curva) both; }
.passo.indietro { animation-name: rientra; }

.scelte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.scelta {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 250px;
  text-align: left;
  padding: 22px 20px 26px;
  background: var(--bianco);
  border: 1.5px solid var(--linea);
  border-radius: 16px;
  cursor: pointer;
  transition: transform .3s var(--curva), border-color .2s, box-shadow .3s, opacity .22s;
}
.scelta::before {          /* luce che entra nella scheda quando ci passi sopra */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(255, 182, 46, .22), rgba(26, 86, 176, .10) 55%, transparent 80%);
  opacity: 0;
  transition: opacity .3s;
}
.scelta > * { position: relative; }
.scelta:hover, .scelta:focus-visible, .scelta.presa {
  transform: translateY(-4px);
  border-color: var(--vetro);
  box-shadow: 0 20px 38px -20px rgba(13, 47, 102, .5);
}
.scelta:hover::before, .scelta:focus-visible::before, .scelta.presa::before { opacity: 1; }
.scelta svg {
  display: block;
  flex: none;
  width: 60px;
  height: 60px;
  padding: 9px;
  margin: 0 0 24px;
  border-radius: 14px;
  color: var(--cella);
  background: linear-gradient(140deg, rgba(255, 182, 46, .38), rgba(26, 86, 176, .16));
}
.scelta strong { display: block; font-stretch: 110%; font-size: 1.14rem; line-height: 1.2; margin: 0 0 8px; }
.scelta span { display: block; font-size: .93rem; line-height: 1.4; color: var(--testo-2); }
.scelte.deciso .scelta:not(.presa) { opacity: 0; transform: scale(.9); }
.volo { position: fixed; z-index: 60; margin: 0; pointer-events: none; transform-origin: top left; }
.volo.vuoto { background: var(--bianco); border: 1.5px solid var(--linea); border-radius: 16px; }
.volo > * { animation: svanisce .22s ease-out both; }

.riconosciuto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 7px 14px;
  font-size: .92rem;
  font-weight: 550;
  color: var(--cella);
  background: linear-gradient(120deg, rgba(255, 182, 46, .28), rgba(26, 86, 176, .12));
  border-radius: 999px;
  animation: entra .4s var(--curva) both;
}
.extra { animation: entra .45s var(--curva) both; }

.doppia {                  /* scelta fra due: il cursore scorre sulla risposta */
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border-radius: 12px;
  background: #e4ebf4;
}
.doppia::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 9px;
  background: var(--bianco);
  box-shadow: 0 2px 8px rgba(11, 26, 51, .18);
  opacity: 0;
  transition: transform .35s var(--curva), opacity .2s;
}
.doppia[data-valore="SI"]::before { opacity: 1; }
.doppia[data-valore="NO"]::before { opacity: 1; transform: translateX(100%); }
.doppia button {
  position: relative;
  border: 0;
  background: none;
  padding: 10px 30px;
  border-radius: 9px;
  font-weight: 600;
  color: var(--testo-2);
  cursor: pointer;
}
.doppia button[aria-pressed="true"] { color: var(--testo); }

.spunta { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 0; font-weight: 400; font-size: .97rem; }
.spunta input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--vetro); }
.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.stato-icona svg { display: block; width: 56px; height: 56px; margin: 0 0 20px; color: var(--sole-scuro); }
.azioni.colonna { flex-direction: column; align-items: stretch; }
.azioni.colonna .pulsante { width: 100%; flex: none; }
.piede { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; }

.info {
  margin: 0 0 18px;
  padding: 11px 14px;
  border-left: 3px solid var(--vetro);
  border-radius: 0 8px 8px 0;
  background: #e6eefb;
  color: var(--cella);
}
.sotto-campo { margin: -8px 0 18px; font-size: .93rem; }
input:disabled { background: #eef2f7; color: var(--testo-2); }

/* ---------- Area riservata ---------- */
.area { min-height: 100vh; display: flex; flex-direction: column; background: var(--carta); }
.barra-alta {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding: 14px clamp(16px, 4vw, 40px);
  color: var(--bianco);
  background: linear-gradient(110deg, var(--notte) 0%, #0a2654 60%, var(--vetro) 160%);
  border-bottom: 3px solid var(--sole);
}
.barra-alta::before {      /* le stesse celle dell'ingresso */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 104px 100%, 26px 100%;
  -webkit-mask-image: linear-gradient(270deg, #000, transparent 70%);
  mask-image: linear-gradient(270deg, #000, transparent 70%);
}
.barra-alta > * { position: relative; }
.chi { display: flex; align-items: center; gap: 12px; font-size: .93rem; }
.chi-nome { font-weight: 600; }
.chi-ruolo {
  padding: 3px 11px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--sole);
  background: rgba(255, 182, 46, .16);
}
.chi button {
  padding: 7px 14px;
  font-weight: 600;
  color: var(--bianco);
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, .4);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .2s;
}
.chi button:hover { border-color: var(--bianco); }
.contenuto {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 44px) clamp(16px, 4vw, 40px) 64px;
  animation: sale .5s var(--curva) both;
}
.contenuto:focus { outline: none; }

.amm h1 {
  font-stretch: 116%;
  font-weight: 650;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: -.014em;
  margin: 0 0 8px;
}
.amm-testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin: 0 0 24px; }
.amm-testa h1 { margin: 0; }
.doppia.linguette { grid-template-columns: repeat(var(--n, 2), 1fr); }
.doppia.linguette::before {    /* il cursore scorre sulla linguetta scelta */
  width: calc((100% - 8px) / var(--n, 2));
  opacity: 1;
  transform: translateX(calc(var(--i, 0) * 100%));
}
.linguette button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 18px; white-space: nowrap; }
.codice-grande { font-stretch: 112%; font-size: 1.5rem; font-weight: 650; letter-spacing: .08em; color: var(--cella); }
.codice { font-weight: 600; letter-spacing: .05em; white-space: nowrap; }
.conta {
  min-width: 24px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: .8rem;
  text-align: center;
  color: var(--testo);
  background: var(--linea);
  transition: background .3s;
}
.linguette button[aria-pressed="true"] .conta { background: var(--sole); }

.elenco { display: grid; gap: 14px; overflow-x: auto; }
.riga-utente {
  padding: 20px 22px;
  background: var(--bianco);
  border: 1.5px solid var(--linea);
  border-radius: 16px;
  transition: border-color .2s, box-shadow .3s;
  animation: entra .4s var(--curva) both;
}
.riga-utente.in-attivazione { border-color: var(--vetro); box-shadow: 0 22px 40px -26px rgba(13, 47, 102, .55); }
.riga-testa { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; }
.riga-nome { display: block; font-stretch: 108%; font-size: 1.15rem; line-height: 1.25; }
.riga-sotto { margin: 2px 0 0; font-size: .95rem; color: var(--testo-2); }
.bollo { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.bollo.buono { color: #17603a; background: #dcf2e5; }
.bollo.attesa { color: #855600; background: #ffedc4; }
.bollo.fermo { color: var(--errore); background: #fbeceb; }
.dettagli { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 20px; margin: 18px 0 0; }
.dettagli dt { font-size: .8rem; color: var(--testo-2); }
.dettagli dd { margin: 1px 0 0; font-weight: 500; overflow-wrap: anywhere; }
.riga-azioni { display: flex; align-items: center; gap: 22px; margin: 20px 0 0; }
.riga-azioni .pulsante { width: auto; padding: 11px 28px; }

.attivazione { margin: 20px 0 0; padding: 20px 0 0; border-top: 1.5px solid var(--linea); animation: entra .4s var(--curva) both; }
.attivazione .azioni { margin-top: 18px; }
.attivazione .azioni .pulsante:not(.leggero) { flex: none; width: auto; padding: 13px 26px; }
.pillole { display: flex; flex-wrap: wrap; gap: 8px; }
.pillole button {
  padding: 9px 16px;
  font-weight: 550;
  color: var(--testo-2);
  background: var(--bianco);
  border: 1.5px solid var(--linea);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.pillole button[aria-pressed="true"] {
  color: var(--testo);
  border-color: var(--vetro);
  background: linear-gradient(120deg, rgba(255, 182, 46, .28), rgba(26, 86, 176, .12));
}
select {
  width: 100%;
  max-width: 32rem;
  font: inherit;
  color: inherit;
  padding: 12px 14px;
  background: var(--bianco);
  border: 1.5px solid var(--linea);
  border-radius: 10px;
}
.vuoto { padding: 28px 24px; border: 1.5px dashed var(--linea); border-radius: 16px; }
.vuoto strong { font-size: 1.1rem; }
.vuoto p { margin: 4px 0 12px; color: var(--testo-2); }

.tabella {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--bianco);
  border: 1.5px solid var(--linea);
  border-radius: 16px;
}
.tabella th { padding: 13px 16px; text-align: left; font-size: .8rem; font-weight: 600; color: var(--testo-2); border-bottom: 1.5px solid var(--linea); }
.tabella td { padding: 13px 16px; vertical-align: middle; border-bottom: 1px solid #e6ecf4; }
.tabella tr:last-child td { border-bottom: 0; }
.cella-azione { text-align: right; white-space: nowrap; }

@media (max-width: 760px) {
  .barra-alta .marchio { font-size: .86rem; }
  .amm-testa .linguette { width: 100%; }
  .linguette button { padding: 9px 6px; font-size: .9rem; gap: 6px; }
  .chi-nome { display: none; }
  .tabella, .tabella tbody, .tabella tr, .tabella td { display: block; }
  .tabella thead { display: none; }
  .tabella { background: none; border: 0; border-radius: 0; overflow: visible; }
  .tabella tr { margin: 0 0 12px; padding: 14px 16px; background: var(--bianco); border: 1.5px solid var(--linea); border-radius: 16px; }
  .tabella td { display: flex; gap: 12px; padding: 4px 0; border: 0; overflow-wrap: anywhere; }
  .tabella td::before { content: attr(data-etichetta); flex: 0 0 92px; padding-top: 2px; font-size: .8rem; color: var(--testo-2); }
  .tabella td:empty { display: none; }
  .tabella td.cella-azione { padding-top: 10px; text-align: left; }
  .tabella td.cella-azione::before { display: none; }
  .riga-azioni .pulsante { flex: 1; }
}

/* ---------- Movimenti ---------- */
@keyframes riflesso { to { transform: translateX(70%); } }
@keyframes alba { from { opacity: 0; transform: translate(14%, 14%) scale(.82); } }
@keyframes sale { from { opacity: 0; transform: translateY(18px); } }
@keyframes traccia { from { transform: scaleX(0); } }
@keyframes accende { from { transform: scale(.4); border-color: rgba(255, 255, 255, .45); background: #0a2654; box-shadow: none; } }
@keyframes pulsa { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(2.4); opacity: 0; } }
@keyframes entra { from { opacity: 0; transform: translateX(28px); } }
@keyframes svanisce { to { opacity: 0; } }
@keyframes rientra { from { opacity: 0; transform: translateX(-28px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Schermi stretti ---------- */
@media (max-width: 900px) {
  .pagina { flex-direction: column; }
  .hero { flex: none; padding: 22px 20px 26px; gap: 22px; }
  .sole { width: 30%; translate: 52% -58%; }
  .marchio { max-width: 82%; font-size: .86rem; gap: 8px; }
  .marchio svg { width: 20px; height: 20px; }
  .hero h1 { font-size: clamp(1.9rem, 8.4vw, 2.7rem); }
  .hero-testo { max-height: 26em; transition: max-height .6s var(--curva), opacity .35s; }
  .hero-testo p { font-size: 1rem; margin-top: 14px; }
  .percorso { max-height: 5em; transition: max-height .6s var(--curva), opacity .35s; }
  .tappa { font-size: .74rem; }
  .pannello { flex: 1 1 auto; align-items: flex-start; padding: 30px 20px 44px; }
  .pagina[data-vista="registrazione"] .pannello { flex-basis: auto; }
  .pagina[data-vista="registrazione"] .hero { gap: 0; padding-bottom: 20px; }
  .pagina[data-vista="registrazione"] .hero-testo,
  .pagina[data-vista="registrazione"] .percorso { max-height: 0; opacity: 0; overflow: hidden; }
  .scelte { grid-template-columns: 1fr; gap: 12px; }
  .scelta { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; min-height: 0; padding: 16px; align-items: start; }
  .scelta svg { grid-row: span 2; width: 52px; height: 52px; padding: 9px; margin: 0; }
  .scelta strong { margin-bottom: 4px; }
  .coppia { grid-template-columns: 1fr; }
  h2 { font-size: 1.7rem; }
}