/* ===================================================================================== Settings → «Migrazione dati»
   (viste/app/migrazione.php): the road of seven steps on the left (a real sequence, numbered; on the phone one line,
   «Passo 3 di 7: le condizioni») and the step in hand on the right, quiet white cards in the gym's own tokens. From the
   run on, the migration's card (migrazione-carta.css) takes the stage. The page where the owner signs the delegation
   (viste/app/migrazione_delega.php, layout_porta) is at the bottom. Prefixes mg-, md-. */
.gx .mg { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: 20px 28px; align-items: start }
.gx .mg-corpo { min-width: 0; max-width: 46rem }
.gx .mg--lavoro .mg-corpo { max-width: 52rem }
@media (max-width: 860px) { .gx .mg { grid-template-columns: minmax(0, 1fr); gap: 12px } }

/* the road */
.gx .mg-strada { position: sticky; top: 16px }
.gx .mg-dove { display: none; margin: 0; font-weight: 650; font-size: 14.7px; color: var(--ink-2) }
.gx .mg-strada ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; counter-reset: none }
.gx .mg-strada li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: 12px; color: var(--ink-3); font-weight: 600; font-size: 15px }
.gx .mg-strada li a, .gx .mg-strada li > span:last-child { color: inherit; flex: 1; display: flex; align-items: center; min-height: 44px }
.gx .mg-strada li a:hover { color: var(--ink); text-decoration: underline }
.gx .mg-n { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line-2); font-size: 13.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; background: var(--surface) }
.gx .mg-fatto { color: var(--ink-2) }
.gx .mg-fatto .mg-n { border-color: var(--ok); background: var(--ok-soft); color: var(--ok) }
.gx .mg-qui { background: var(--brand-soft); color: var(--ink) }
.gx .mg-qui .mg-n { border-color: var(--brand); background: var(--brand); color: var(--on-brand) }
@media (max-width: 860px) {
  .gx .mg-strada { position: static }
  .gx .mg-strada ol { display: none }
  .gx .mg-dove { display: block }
}

/* the steps */
.gx .mg-passo h2 { margin-top: 0 }
.gx .mg-passo input:not([type=checkbox]):not([type=radio]):not([type=file]) { width: 100%; max-width: 36rem }
.gx .mg-aiuto { font-size: 14.2px; margin: 8px 0 0 }
.gx .mg-trova { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 10px 0 0 }
.gx .mg-trova .muted { font-size: 14.2px }
.gx .mg-trovato { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--brand-soft); font-size: 14.7px }
.gx .mg-trovato p { margin: 0 }
.gx .mg-trovato p + p { margin-top: 4px }
.gx .mg-trovato b { overflow-wrap: anywhere }
.gx .mg-modi { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: stretch }
.gx .mg-modo { min-width: 0; padding: 14px 16px; border: 1.5px solid #d5d8e0; border-radius: 14px; background: var(--surface) }
.gx .mg-modo h3 { margin: 0 0 6px; font-size: 1.05rem }
.gx .mg-modo p { margin: 0 0 6px; font-size: 14.5px; line-height: 1.45 }
.gx .mg-modo--scelto { border-color: var(--brand); background: color-mix(in srgb, var(--brand-soft) 55%, var(--surface)) }
.gx .mg-oppure { align-self: center; margin: 0; color: var(--ink-3); font-weight: 650; font-size: 14px }
@media (max-width: 760px) { .gx .mg-modi { grid-template-columns: minmax(0, 1fr) } .gx .mg-oppure { justify-self: center } }
.gx .mg-salvate { padding: 8px 10px; border-radius: 10px; background: var(--ok-soft); color: var(--ok); font-weight: 600 }
.gx .mg-file { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px }
.gx .mg-file li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 4px 4px 10px; border-radius: 10px; background: var(--bg); overflow-wrap: anywhere }
.gx .mg-file form { margin: 0 }
.gx input[type=file] { max-width: 100%; font-size: 15px }
.gx .mg-condizioni { margin: 4px 0 14px; padding-left: 20px; display: grid; gap: 8px; line-height: 1.5 }
.gx .mg-accetto { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 12px; border: 1.5px solid #d5d8e0; border-radius: 12px; cursor: pointer; font-weight: 600 }
.gx .mg-accetto input { margin: 3px 0 0; width: 18px; height: 18px; flex: none; accent-color: var(--brand-primary) }
.gx .mg-accetto:has(input:checked) { border-color: var(--brand); background: var(--brand-soft) }
.gx .mg-prezzo { margin: 0 0 12px; display: grid; gap: 4px; max-width: 24rem }
.gx .mg-prezzo div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0 }
.gx .mg-prezzo dt { color: var(--ink-2) }
.gx .mg-prezzo dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600 }
.gx .mg-prezzo .mg-totale { border-top: 1px solid var(--line); padding-top: 8px; font-size: 1.1rem }
.gx .mg-prezzo .mg-totale dt { color: var(--ink); font-weight: 700 }
.gx .mg-prezzo .mg-totale dd { font-weight: 700 }
.gx .mg-azioni { display: flex; flex-wrap: wrap; gap: 10px }
.gx .mg-azioni form { margin: 0 }
.gx .mg-codice { border: 2px solid var(--brand); margin-bottom: 16px }
.gx .mg-codice input { max-width: 14rem; font-size: 1.3rem; letter-spacing: .12em; font-variant-numeric: tabular-nums }
.gx .mg-segui h2, .gx .mg-esempi h2, .gx .mg-resoconto h2 { margin-top: 0 }
.gx .mg-fondo { margin: 14px 0 0; font-size: 14.2px }
.gx .mg-fondo a { color: var(--ko) }
.gx .mg-importa p { margin-top: 0 }
.gx .mg-squadra { max-width: 46rem; margin-bottom: 16px }
.gx .mg-squadra h2 { margin-top: 0 }
.gx .mg-annulla ul { line-height: 1.5 }
.gx .mg-precedenti { max-width: 46rem; margin-top: 20px }
.gx .mg-precedenti ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.gx .mg-precedenti li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; flex-wrap: wrap }
.gx .mg-precedenti .mc-stato { background: var(--bg); color: var(--ink-2); border: 1px solid var(--line) }

/* ------------------------------------------------------------------------------------------------ the delegation */
body.ma .md { min-height: 100vh; display: grid; place-items: start center; padding: 32px 16px 48px; background: var(--brand-primary, #14112B); box-sizing: border-box }
body.ma .md-carta { width: min(40rem, 100%); padding: 24px 22px; border-radius: 20px; background: #fff; color: #14181d; box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .6);
  font: 400 16px/1.5 'Familjen Grotesk', system-ui, sans-serif; box-sizing: border-box }
body.ma .md-carta h1 { margin: 0 0 12px; font: 700 26px/1.15 'Familjen Grotesk', system-ui, sans-serif; letter-spacing: -.02em; text-transform: none; color: inherit }
body.ma .md-palestra { margin: 0 0 14px; font-weight: 700; color: var(--brand-primary, #14112B) }
body.ma .md-testo { padding: 14px 16px; border-radius: 14px; background: #f6f7f9; line-height: 1.55 }
body.ma .md-versione { color: #4a5360; font-size: 14px }
body.ma .md-firma { display: grid; gap: 8px; margin-top: 18px }
body.ma .md-firma label { font-weight: 650; font-size: 14.4px }
body.ma .md-firma input[name=codice] { max-width: 12rem; min-height: 48px; padding: 0 12px; border: 1.5px solid #c9ced6; border-radius: 12px; font-size: 1.3rem; letter-spacing: .14em }
body.ma .md-accetto { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 10px 0; font-weight: 600 }
body.ma .md-accetto input { appearance: auto; -webkit-appearance: checkbox; width: 18px; height: 18px; margin: 3px 0 0; flex: none; accent-color: var(--brand-primary, #14112B) }
body.ma .md-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border: 0; border-radius: 12px; background: var(--brand-primary, #14112B);
  color: var(--brand-on-primary, #fff); font: 700 16px 'Familjen Grotesk', system-ui, sans-serif; cursor: pointer; text-decoration: none; justify-self: start }
body.ma .md-btn:focus-visible, body.ma .md-firma input:focus-visible { outline: 3px solid #c2410c; outline-offset: 2px }
body.ma .md-flash { padding: 10px 12px; border-radius: 12px; font-weight: 600 }
body.ma .md-flash--errore { background: #fdecea; color: #b42318 }
body.ma .md-flash--ok { background: #e6f4ec; color: #157347 }