/* ============================================================
   InServizio — Stile base
   IISS "Galileo Galilei" — Canicattì
   ============================================================ */

:root {
    --blu:        #0d3a63;
    --blu-scuro:  #072742;
    --azzurro:    #2277c4;
    --azzurro-ch: #4b97dd;
    --accento:    #c9a227;   /* oro sobrio */
    --bg:         #eef2f7;
    --card:       #ffffff;
    --testo:      #17222e;
    --testo-soft: #5b6875;
    --bordo:      #e3e9f0;
    --ok:         #1a7f52;
    --err:        #c02a37;
    --radius:     16px;
    --radius-sm:  10px;
    --shadow:     0 10px 30px -12px rgba(13, 58, 99, 0.18);
    --shadow-sm:  0 2px 8px rgba(13, 58, 99, 0.06);
    --ring:       0 0 0 3px rgba(34, 119, 196, 0.18);
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font);
    color: var(--testo);
    background:
        radial-gradient(1100px 480px at 100% -10%, rgba(75, 151, 221, 0.10), transparent 60%),
        radial-gradient(900px 420px at -10% 0%, rgba(13, 58, 99, 0.06), transparent 55%),
        var(--bg);
    background-attachment: fixed;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* ---- Header ---- */
.site-header {
    position: relative;
    background: linear-gradient(135deg, var(--blu-scuro) 0%, var(--blu) 45%, var(--azzurro) 100%);
    color: #fff;
    padding: 2.4rem 0 2.1rem;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.site-header::after {
    content: "";
    position: absolute;
    right: -80px; top: -120px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(255,255,255,0.10), transparent 60%);
    pointer-events: none;
}
.site-header h1 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.2px;
}
.site-header .subtitle {
    margin: 0.4rem 0 0;
    opacity: 0.92;
    font-size: 1rem;
    font-weight: 400;
}

/* ---- Card ---- */
main.container { padding-top: 2rem; padding-bottom: 3rem; }

.card {
    background: var(--card);
    border: 1px solid var(--bordo);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.9rem 2rem;
    margin-bottom: 1.5rem;
}
.card h2 {
    margin-top: 0;
    color: var(--blu-scuro);
    font-size: 1.3rem;
    letter-spacing: -0.01em;
}

/* ---- Avvisi ---- */
.notice {
    background: #eef5fc;
    border: 1px solid #d6e6f6;
    border-left: 4px solid var(--azzurro);
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    color: var(--testo-soft);
    margin-top: 1.2rem;
}
.notice.ok  { background: #eaf7f0; border-color: #cbeede; border-left-color: var(--ok); color: #14603e; }
.notice.err { background: #fceaec; border-color: #f4d2d6; border-left-color: var(--err); color: #8f2530; }
.notice.warn { background: #fdf4e2; border-color: #f6e3bd; border-left-color: #b8860b; color: #6f4e07; }

/* Pannello «esiste già una domanda con questo codice fiscale» */
.duplicato h3 { margin: 0 0 0.4rem; font-size: 1.02rem; color: inherit; }
.duplicato p { margin: 0 0 0.6rem; }
.duplicato p:last-child { margin-bottom: 0; }
.duplicato .btn { margin-top: 0.2rem; }
.duplicato-nota { font-size: 0.88rem; opacity: 0.85; }

/* ---- Bottoni ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: linear-gradient(180deg, var(--azzurro-ch), var(--azzurro));
    color: #fff;
    border: none;
    border-radius: 11px;
    padding: 0.7rem 1.4rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 12px -4px rgba(34, 119, 196, 0.5);
    transition: filter 0.15s ease, transform 0.06s ease, box-shadow 0.15s ease;
}
.btn:hover  { filter: brightness(1.05); box-shadow: 0 6px 16px -5px rgba(34, 119, 196, 0.6); }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: #eef3f9; color: var(--blu); box-shadow: none; }
.btn.secondary:hover { background: #e2eaf4; filter: none; }
.btn-lg { padding: 0.9rem 1.8rem; font-size: 1.05rem; }

/* ---- Footer ---- */
.site-footer {
    border-top: 1px solid var(--bordo);
    background: #fff;
    padding: 1.5rem 0;
    color: var(--testo-soft);
    font-size: 0.85rem;
    text-align: center;
}
.site-footer p { margin: 0; }
/* Nome dell'istituto: in fondo alla pagina, non più fra logo e menu. Sta sopra
   la riga di servizio ed è l'unica cosa in evidenza di un piè di pagina. */
.site-footer .footer-istituto {
    margin-bottom: 0.3rem;
    font-weight: 600;
    color: var(--blu);
}
.footer-istituto .footer-sep { margin: 0 0.4rem; opacity: 0.45; }

@media (max-width: 560px) {
    .site-header h1 { font-size: 1.3rem; }
    .card { padding: 1.3rem; }
}

/* ============================================================
   Form multi-step
   ============================================================ */
.header-flex { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.header-user {
    background: rgba(255,255,255,0.15);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
}
.form-main { max-width: 820px; }

/* ---- Stepper ---- */
.stepper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}
.step {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.82rem;
    color: var(--testo-soft);
    background: #fff;
    border: 1px solid var(--bordo);
    transition: all 0.15s ease;
}
.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #e6ebf2;
    color: var(--testo-soft);
    font-weight: 700;
    font-size: 0.78rem;
}
.step:hover { border-color: var(--azzurro-ch); }
.step-active { border-color: var(--azzurro); color: var(--blu); background: #f2f8ff; box-shadow: 0 4px 12px -4px rgba(34,119,196,0.35); font-weight: 600; }
.step-active .step-num { background: linear-gradient(180deg, var(--azzurro-ch), var(--azzurro)); color: #fff; }
.step-done { color: var(--ok); }
.step-done .step-num { background: var(--ok); color: #fff; }
.step-done .step-num::after { content: '✓'; }
.step-done .step-num { font-size: 0; }
.step-done .step-num::after { font-size: 0.8rem; }

.progress {
    height: 6px;
    background: #e6ebf2;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--azzurro), var(--blu));
    transition: width 0.3s ease;
}

/* ---- Campi ---- */
.step-title {
    display: flex; align-items: center; gap: 0.6rem;
    border-bottom: 1px solid #eef2f7; padding-bottom: 0.7rem; margin-bottom: 1rem;
}
.step-title::before {
    content: ""; width: 5px; height: 1.25rem; border-radius: 3px;
    background: linear-gradient(180deg, var(--azzurro-ch), var(--azzurro));
}
.step-hint { color: var(--testo-soft); font-size: 0.92rem; margin-top: -0.2rem; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid-3 { grid-template-columns: 2fr 1fr 1fr; }
/* alle colonne con la data serve più spazio: il selettore nativo è largo */
.grid-nucleo { grid-template-columns: 1fr 1fr 1.1fr 1.1fr 1.1fr; gap: 0.5rem; }
.grid-titoli { grid-template-columns: 1.5fr 1.1fr 1.4fr 0.8fr; gap: 0.5rem; }
/* Composizione della cattedra: la scuola prende quasi tutta la riga, le ore
   sono un numero di due cifre e non hanno bisogno di spazio. */
.grid-cattedra { grid-template-columns: 1fr 110px; gap: 0.5rem; }
.field-wide { grid-column: span 1; }

.field { display: flex; flex-direction: column; margin-bottom: 0.2rem; }
/* `display: flex` batte l'attributo hidden del browser: serve dirlo esplicitamente
   (la provincia di nascita sparisce così per chi è nato all'estero). */
.field[hidden] { display: none; }
.field label { font-weight: 600; font-size: 0.88rem; margin-bottom: 0.3rem; color: var(--blu-scuro); }
.field input, .field select {
    padding: 0.65rem 0.8rem;
    border: 1px solid #d5deea;
    border-radius: var(--radius-sm);
    font-size: 0.98rem;
    font-family: inherit;
    color: var(--testo);
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input::placeholder { color: #a7b2bf; }
.field input:hover, .field select:hover { border-color: #b9c6d6; }
.field input:focus, .field select:focus {
    outline: none;
    border-color: var(--azzurro);
    box-shadow: var(--ring);
}
.field input.upper { text-transform: uppercase; letter-spacing: 0.03em; }
.field input.valid   { border-color: var(--ok); }
.field input.invalid { border-color: var(--err); }
.field.has-error input, .field.has-error select { border-color: var(--err); background: #fffafa; }

/* Codice fiscale in evidenza (primo campo dell'anagrafica) */
.field-cf {
    background: linear-gradient(180deg, #f4f9ff, #eef5fe);
    border: 1px solid #d6e6f8;
    border-radius: var(--radius-sm);
    padding: 0.9rem 1rem;
    margin-bottom: 1.1rem;
}
.field-cf label { color: var(--blu); }
.field-cf input { font-size: 1.15rem; letter-spacing: 0.08em; font-weight: 600; }
.field-hint.hint-ok { color: var(--ok); font-weight: 600; }

/* Gruppo di campi auto-compilati */
.auto-group { background: #fbfdff; }
/* I campi ricavati dal codice fiscale non si toccano, e si deve vedere: dentro
   il gruppo dei dati di nascita l'unico riquadro bianco è quello da compilare
   (il luogo di nascita, per chi è nato all'estero). */
.field input[readonly] { background: #eff3f8; color: var(--testo-soft); cursor: default; border-style: dashed; }
.field input[readonly]:focus { border-color: #d5deea; box-shadow: none; }

.field-hint { font-size: 0.8rem; color: var(--testo-soft); margin-top: 0.25rem; min-height: 1rem; }

/* Autocompletamento comuni */
.field { position: relative; }
.ac-list {
    list-style: none;
    margin: 2px 0 0;
    padding: 0.25rem 0;
    position: absolute;
    z-index: 20;
    left: 0; right: 0;
    top: 100%;
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: 9px;
    box-shadow: 0 8px 20px rgba(11,61,107,0.12);
    max-height: 240px;
    overflow-y: auto;
}
.ac-list li {
    padding: 0.5rem 0.8rem;
    cursor: pointer;
    font-size: 0.92rem;
}
.ac-list li:hover { background: #eef5fc; color: var(--blu); }
/* Involucro attorno al solo campo: senza, la tendina si aggancia a tutto il
   riquadro e comparirebbe sotto la riga di suggerimento, staccata dal campo. */
.ac-wrap { position: relative; display: flex; flex-direction: column; }
/* Elenco delle scuole: il codice in evidenza a sinistra, il comune sotto in
   piccolo. Le denominazioni sono lunghe e vanno lasciate andare a capo. */
/* Ogni voce occupa due righe: senza alzare il tetto se ne vedrebbero quattro */
.ac-list-scuole { max-height: 320px; }
.ac-list-scuole li { line-height: 1.35; }
.ac-list-scuole .ac-cod {
    display: inline-block; margin-right: 0.4rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.86rem; color: var(--azzurro); letter-spacing: 0.02em;
}
.ac-list-scuole .ac-dove { display: block; font-size: 0.8rem; color: var(--testo-soft); }
.field-hint.hint-err { color: var(--err); }
.cf-esito { display: block; font-size: 0.85rem; margin-top: 0.4rem; padding: 0.4rem 0.6rem; border-radius: 6px; }
.cf-esito-info { background: #eef5fc; color: var(--testo-soft); }
.cf-esito-ok   { background: #eaf6f0; color: var(--ok); font-weight: 600; }
.cf-esito-warn { background: #fff5e6; color: #92650d; }
.field-error { font-size: 0.82rem; color: var(--err); margin-top: 0.25rem; font-weight: 600; }
.muted { color: var(--testo-soft); font-weight: 400; }

/* ---- Fieldset / gruppi ---- */
.subgroup {
    border: 1px solid var(--bordo);
    border-radius: var(--radius-sm);
    padding: 0.6rem 1.1rem 1.2rem;
    margin: 1.5rem 0 0.5rem;
    background: #fcfdff;
}
.subgroup legend {
    font-weight: 700;
    color: var(--blu);
    padding: 0.15rem 0.6rem;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: 999px;
}
/* Sezione nuova, da far notare: fondo caldo e bordo oro, gli stessi del
   riquadro «porti solo il documento» nelle email, così chi rientra dopo aver
   già inviato la domanda capisce al volo che cosa gli stiamo chiedendo.
   Da togliere quando non sarà più una novità: basta la classe in meno. */
.subgroup--nuovo {
    background: #fdf9ef;
    border-color: #ecdcb0;
    border-left: 5px solid var(--accento);
    box-shadow: 0 6px 18px -12px rgba(201, 162, 39, 0.65);
}
.subgroup--nuovo legend { border-color: #ecdcb0; color: #7a5c08; }
.subgroup--nuovo .step-hint { color: #6f5410; }
/* Targhetta «novità» accanto al titolo della sezione */
.tag-nuovo {
    display: inline-block;
    margin-left: 0.45rem;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: var(--accento);
    /* Testo scuro sull'oro: il bianco su questo fondo si legge male */
    color: #3d2d04;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    vertical-align: 1px;
}

.conditional { margin-top: 0.6rem; }
.detail-box { margin: -0.2rem 0 0.6rem 2.1rem; }
.detail-box label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 0.3rem; color: var(--blu-scuro); }
.detail-box textarea {
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--bordo);
    border-radius: 9px;
    font: inherit;
    font-size: 0.95rem;
    resize: vertical;
}
.detail-box textarea:focus { outline: none; border-color: var(--azzurro); box-shadow: 0 0 0 3px rgba(30,111,184,0.12); }

label.check, label.radio {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0;
    font-size: 0.95rem;
    cursor: pointer;
}
label.check input, label.radio input { margin-top: 0.2rem; width: 18px; height: 18px; }

/* ---- Righe dinamiche ---- */
.table-rows { margin-top: 0.5rem; }
.data-row { margin-bottom: 0.5rem; }
/* width + min-width: senza, il campo data tiene la sua larghezza naturale
   (più larga della colonna) e sborda a destra dal riquadro */
.data-row input { padding: 0.5rem; font-size: 0.92rem; border: 1px solid var(--bordo); border-radius: 8px; width: 100%; }
/* Ogni casella porta con sé la propria etichetta. Prima c'era una sola riga
   d'intestazione sopra la tabella: appena le colonne si stringevano o andavano
   a capo, le diciture non stavano più sopra il campo giusto. */
.row-field { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.row-field-label { font-size: 0.72rem; font-weight: 700; color: var(--testo-soft); text-transform: uppercase; letter-spacing: 0.3px; }
.row-field.has-error input { border-color: var(--err); background: #fffafa; }
.allegati-attesi { color: var(--testo-soft); }

/* ---- Riepilogo ---- */
.riepilogo h3 { color: var(--blu); font-size: 1rem; margin: 1.3rem 0 0.5rem; border-bottom: 1px solid #eef2f7; padding-bottom: 0.3rem; }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem; margin: 0; }
.kv > div { display: flex; flex-direction: column; }
.kv dt { font-size: 0.78rem; color: var(--testo-soft); text-transform: uppercase; letter-spacing: 0.3px; }
.kv dd { margin: 0; font-weight: 600; }
.mini-list { margin: 0.3rem 0; padding-left: 1.2rem; }
.privacy-box { background: #fbfcfe; }

/* ---- Navigazione form ---- */
.form-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.2rem;
    gap: 0.6rem;
}
.form-nav-right { display: flex; gap: 0.6rem; }
.btn.ghost { background: transparent; color: var(--blu); border: 1px solid var(--bordo); }
.btn.ghost:hover { background: #eef2f7; }
.btn.confirm { background: var(--ok); }
.btn.confirm:hover { background: #14663f; }
/* Azioni irreversibili: il colore deve far rallentare prima di cliccare */
.btn.danger { background: #a12b2b; }
.btn.danger:hover { background: #8a2323; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.flash { animation: fadeslide 0.3s ease; }
@keyframes fadeslide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---- Conferma finale ---- */
.success-card { text-align: center; }
.success-badge {
    width: 64px; height: 64px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--ok);
    color: #fff;
    font-size: 2rem;
    display: flex; align-items: center; justify-content: center;
}

/* Avviso «non deve stampare nulla»: deve saltare all'occhio più del resto
   della pagina, perché è la domanda che tutti fanno in segreteria */
.avviso-stampa {
    display: flex; align-items: flex-start; gap: 1rem; text-align: left;
    background: #fdf4e2;
    border: 1.5px solid #f0dcae;
    border-left: 6px solid var(--accento);
    border-radius: var(--radius-sm);
    padding: 1rem 1.1rem;
    margin: 1.2rem 0;
    color: #5f4306;
}
.avviso-stampa-icona {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 50%;
    background: #fff; color: #8a6206; border: 1.5px solid #f0dcae;
}
.avviso-stampa-titolo { display: block; font-size: 1.12rem; color: #5f4306; margin-bottom: 0.25rem; }
.avviso-stampa p { margin: 0; font-size: 0.95rem; line-height: 1.5; }

@media (max-width: 480px) {
    .avviso-stampa { flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; }
}

/* ---- Allegati / upload ---- */
/* auto-fit: i documenti richiesti stanno in fila finché c'è spazio, poi vanno a capo
   (con tre schede, due colonne fisse lascerebbero l'ultima spaiata a metà larghezza) */
.upload-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin: 1rem 0; }
.upload-card {
    border: 1.5px dashed var(--bordo);
    border-radius: 12px;
    padding: 1rem;
    background: #fbfcfe;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.upload-card.has-file { border-style: solid; border-color: var(--ok); background: #f4fbf7; }
.upload-card-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.8rem; }
.upload-icon { font-size: 1.6rem; }
.upload-card-head strong { display: block; }
.pill {
    display: inline-block; margin-top: 0.2rem;
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
    padding: 0.12rem 0.5rem; border-radius: 999px;
    background: #e6ebf2; color: var(--testo-soft);
}
.pill-ok { background: #d8f0e2; color: var(--ok); }
/* Documento obbligatorio non ancora caricato */
.pill-warn { background: #fdecc8; color: #8a5a00; }

/* --- Logo dell'istituto in testata --- */
.header-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.site-logo {
    max-height: 46px; max-width: 140px; width: auto; height: auto;
    flex: 0 0 auto; object-fit: contain;
}
.site-logo-lg { max-height: 72px; max-width: 200px; }
/* Logo pensato per fondo chiaro: su una testata scura serve una targhetta,
   altrimenti sparisce. Con la variante per fondo scuro non si applica. */
.site-logo--targhetta {
    padding: 5px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* Riga di credits in fondo alle pagine: presente ma discreta */
.credits { margin-top: 0.35rem; font-size: 0.8rem; opacity: 0.75; }
.credits a { color: inherit; text-decoration: underline; }
@media (max-width: 640px) {
    .site-logo    { max-height: 34px; max-width: 96px; }
    .site-logo-lg { max-height: 48px; max-width: 130px; }
}

.upload-form { display: flex; flex-direction: column; gap: 0.6rem; }
.upload-form.inline { flex-direction: row; flex-wrap: wrap; align-items: center; margin-top: 0.8rem; }
.file-input {
    font-size: 0.88rem;
    padding: 0.4rem;
    border: 1px solid var(--bordo);
    border-radius: 8px;
    background: #fff;
    width: 100%;
}
.upload-form.inline .file-input { width: auto; flex: 1 1 200px; }
.upload-form.inline select { padding: 0.5rem; border: 1px solid var(--bordo); border-radius: 8px; }

.altri-doc { margin: 1.2rem 0; }
.altri-doc summary { cursor: pointer; font-weight: 600; color: var(--blu); padding: 0.4rem 0; }

.allegati-title { color: var(--blu); font-size: 1rem; margin: 1.5rem 0 0.6rem; border-bottom: 1px solid #eef2f7; padding-bottom: 0.3rem; }
.allegati-list { list-style: none; margin: 0; padding: 0; }
.allegato-row {
    display: flex; align-items: center; gap: 0.8rem;
    padding: 0.6rem 0.2rem;
    border-bottom: 1px solid var(--bordo);
}
.allegato-tipo { font-weight: 600; color: var(--blu-scuro); flex: 0 0 auto; min-width: 130px; }
.allegato-nome { flex: 1 1 auto; color: var(--testo-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.allegato-size { flex: 0 0 auto; color: var(--testo-soft); font-size: 0.85rem; }
.allegato-azioni { display: flex; align-items: center; gap: 0.8rem; flex: 0 0 auto; }
.link { background: none; border: none; padding: 0; color: var(--azzurro); cursor: pointer; font: inherit; text-decoration: underline; }
.link:hover { color: var(--blu); }
.link-danger { color: var(--err); }
.inline-del { display: inline; margin: 0; }

@media (max-width: 640px) {
    .grid, .grid-3, .kv, .upload-grid { grid-template-columns: 1fr; }
    .grid-nucleo, .grid-titoli { grid-template-columns: 1fr 1fr; }
    .grid-cattedra { grid-template-columns: 1fr 90px; }
    /* Sul telefono ogni componente diventa un riquadro a sé, altrimenti le
       righe si confondono l'una con l'altra */
    .data-row { border: 1px solid var(--bordo); border-radius: 10px; padding: 0.6rem; }
    .form-nav { flex-direction: column-reverse; align-items: stretch; }
    .form-nav-right { flex-direction: column; }
    .step-label { display: none; }
    .allegato-row { flex-wrap: wrap; }
    .allegato-tipo { min-width: 0; }
}