/* =====================================================================
   ElecCalc — foglio di stile unico, tutto locale.
   Pensato per un telefono tenuto in una mano: campi alti, pulsanti
   grossi in fondo allo schermo, niente da leggere con la lente.
   Regge 360 px di larghezza e funziona anche in orizzontale.
   ===================================================================== */

:root {
    --sfondo: #f2f5f8;
    --carta: #ffffff;
    --carta-tenue: #f7f9fb;
    --inchiostro: #10202f;
    --inchiostro-tenue: #56697a;
    --bordo: #d6dfe8;
    --profondo: #0e2438;
    --accento: #0b6fb8;
    --accento-chiaro: #e6f1f9;
    --verde: #1c7c42;
    --verde-chiaro: #e6f4ec;
    --rosso: #bc2b2b;
    --rosso-chiaro: #fbeaea;
    --ambra: #a06a05;
    --ambra-chiaro: #fdf3e0;
    --neutro: #63788a;
    --neutro-chiaro: #eef2f6;
    --raggio: 14px;
    --ombra: 0 1px 2px rgba(16, 32, 47, .06), 0 4px 14px rgba(16, 32, 47, .05);
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --sfondo: #0a131c;
        --carta: #13212e;
        --carta-tenue: #16262f;
        --inchiostro: #e7eef5;
        --inchiostro-tenue: #9bb0c2;
        --bordo: #24394c;
        --profondo: #0b1520;
        --accento: #3f9fe0;
        --accento-chiaro: #14293b;
        --verde: #4cc47e;
        --verde-chiaro: #122b1e;
        --rosso: #ef6a6a;
        --rosso-chiaro: #2c1618;
        --ambra: #e0a94a;
        --ambra-chiaro: #2b2213;
        --neutro: #8ea3b5;
        --neutro-chiaro: #1a2a38;
        --ombra: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
    }
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--sfondo);
    color: var(--inchiostro);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.45;
    -webkit-text-size-adjust: 100%;
    overscroll-behavior-y: none;
}

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--accento); }

/* ------------------------------------------------------------- guscio */

.guscio {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}

.barra {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: var(--profondo);
    color: #eaf2f9;
    padding: 10px 14px;
    padding-top: calc(10px + env(safe-area-inset-top));
    padding-left: calc(14px + env(safe-area-inset-left));
    padding-right: calc(14px + env(safe-area-inset-right));
}

.marchio {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
    min-height: 40px;
}

.marchio-segno {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    /* Fondo BIANCO perche' il marchio dello studio e' nero e blu: sul blu scuro della barra
       il nero sparirebbe. Il riquadro bianco lo stacca e lo rende leggibile. */
    background: #ffffff;
    overflow: hidden;
    flex: 0 0 auto;
}

.marchio-segno img { width: 34px; height: 34px; display: block; }

.marchio-testo { display: flex; flex-direction: column; line-height: 1.15; }
.marchio-testo strong { font-size: 1.05rem; letter-spacing: .2px; }
.marchio-testo small { font-size: .72rem; color: #a8c0d4; }

.bottone-barra {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .1);
    color: #eaf2f9;
    text-decoration: none;
    font-size: .88rem;
    white-space: nowrap;
}

.bottone-barra.active { background: rgba(255, 255, 255, .22); }

/* ------------------------------------------------------- scelta della lingua

   Una tendina, non tre pulsanti: la lingua si sceglie una volta e basta, e tre pulsanti
   larghi in barra ruberebbero il posto al marchio e a «Informazioni» su uno schermo da
   360 px. Resta comunque alta 40 px come gli altri comandi della barra, perche' si preme
   col pollice come tutto il resto.

   L'aspetto se lo disegna il sistema (appearance non e' azzerato): la tendina APERTA e'
   quella del telefono, che e' la cosa che l'utente sa gia' usare. Qui si sistema solo la
   parte chiusa, che deve stare dentro la barra scura senza sembrarci appiccicata sopra. */
.barra-azioni { display: flex; align-items: center; gap: 8px; }

.scelta-lingua {
    min-height: 40px;
    padding: 0 6px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .1);
    color: #eaf2f9;
    font-size: .88rem;
    font-family: inherit;
    font-weight: 600;
    letter-spacing: .3px;
}

/* Le voci della tendina APERTA le disegna il sistema, e su Windows e Android le disegna
   sempre chiare: senza queste due righe, testo bianco su fondo bianco - cioe' un elenco
   di lingue illeggibile proprio nel momento in cui lo si deve leggere. */
.scelta-lingua option { color: #10202f; background: #ffffff; }

.scelta-lingua:focus-visible { outline: 2px solid #eaf2f9; outline-offset: 1px; }

.contenuto {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}

.pagina {
    flex: 1 1 auto;
    padding: 16px;
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: calc(16px + env(safe-area-inset-right));
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
}

/* --------------------------------------------------------- avanzamento */

.avanzamento {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px 0;
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
}

.tacca {
    flex: 1 1 0;
    height: 5px;
    border-radius: 3px;
    background: var(--bordo);
    transition: background .15s ease;
}

.tacca-fatta { background: var(--accento); }

.avanzamento-testo {
    flex: 0 0 auto;
    font-size: .76rem;
    color: var(--inchiostro-tenue);
    margin-left: 6px;
}

/* --------------------------------------------------------------- testi */

.titolo-schermata {
    font-size: 1.6rem;
    line-height: 1.2;
    letter-spacing: -.3px;
    margin: 0;
}

/* A ogni cambio schermata Blazor (FocusOnNavigate) sposta il fuoco sul titolo, e fa bene:
   e' cosi' che il lettore di schermo annuncia dove si e' arrivati. Il browser pero' gli
   disegna intorno l'anello del fuoco, che su un titolo largo quanto la pagina si vede come
   una cornice nera. Un titolo non si raggiunge col tabulatore (tabindex -1), quindi
   togliere l'anello non toglie niente a chi naviga da tastiera. */
h1[tabindex="-1"]:focus,
h1[tabindex="-1"]:focus-visible { outline: none; }

.sottotitolo {
    color: var(--inchiostro-tenue);
    font-size: .95rem;
    margin-top: -10px;
}

.titolo-blocco {
    font-size: 1.05rem;
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

.conteggio {
    font-size: .78rem;
    font-weight: 400;
    color: var(--inchiostro-tenue);
}

.blocco {
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 14px;
    box-shadow: var(--ombra);
}

.blocco p + p { margin-top: 8px; }

.elenco-punti { display: flex; flex-direction: column; gap: 8px; }

.elenco-punti li {
    position: relative;
    padding-left: 18px;
    font-size: .93rem;
}

.elenco-punti li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accento);
}

/* --------------------------------------------------------------- campi */

.campo { display: flex; flex-direction: column; gap: 8px; }

.campo-etichetta {
    font-size: .95rem;
    font-weight: 600;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.campo-unita {
    font-weight: 400;
    color: var(--inchiostro-tenue);
    font-size: .85rem;
}

.campo-riga { display: flex; align-items: stretch; gap: 8px; }

/* Il bordo, il fondo e l'ombra stanno sul guscio, non sulla casella: dentro ci vanno il
   valore e la sua unita', uno a sinistra e l'altra a destra, e la riga risulta piena. */
.campo-guscio {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 58px;
    padding: 0 14px;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: 12px;
    box-shadow: var(--ombra);
}

.campo-guscio:focus-within {
    border-color: var(--accento);
    box-shadow: 0 0 0 3px var(--accento-chiaro);
}

.campo-misura {
    flex: 0 0 auto;
    font-size: 1rem;
    font-weight: 600;
    color: var(--inchiostro-tenue);
}

.campo-casella {
    flex: 1 1 auto;
    min-width: 0;
    height: 56px;
    padding: 0;
    font-size: 1.35rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--inchiostro);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

.campo-casella:focus { outline: none; }

select.campo-casella {
    width: 100%;
    padding: 0 14px;
    appearance: auto;
    border: 1px solid var(--bordo);
    border-radius: 8px;
    background: var(--carta);
}

.conferma-dato {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 44px;
    padding: 10px 0;
    line-height: 1.4;
    cursor: pointer;
}

.conferma-dato input {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--accento);
}

.campo-passo {
    flex: 0 0 auto;
    width: 58px;
    min-height: 58px;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--accento);
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.campo-passo:active { background: var(--accento-chiaro); }

.campo-aiuto {
    font-size: .82rem;
    color: var(--inchiostro-tenue);
    line-height: 1.35;
}

.campo-errato .campo-guscio { border-color: var(--rosso); }

.campo-messaggio { font-size: .82rem; color: var(--rosso); }

.allarme-campo {
    background: var(--ambra-chiaro);
    border: 1px solid var(--ambra);
    color: var(--ambra);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: .88rem;
    margin-top: -8px;
}

/* ------------------------------------------------------------ segmenti */

.segmenti-blocco { display: flex; flex-direction: column; gap: 8px; }

.segmenti {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}

.segmenti-larghi { grid-template-columns: 1fr; }

.segmento {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    min-height: 56px;
    padding: 10px 14px;
    text-align: left;
    background: var(--carta);
    color: var(--inchiostro);
    border: 1px solid var(--bordo);
    border-radius: 12px;
    box-shadow: var(--ombra);
    font-size: 1rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.segmenti:not(.segmenti-larghi) .segmento { align-items: center; text-align: center; }

.segmento-titolo { font-weight: 600; }

.segmento-nota {
    font-size: .8rem;
    color: var(--inchiostro-tenue);
    font-weight: 400;
    line-height: 1.3;
}

.segmento-scelto {
    border-color: var(--accento);
    background: var(--accento-chiaro);
    box-shadow: inset 0 0 0 1px var(--accento);
}

.segmento-scelto .segmento-titolo { color: var(--accento); }

/* ------------------------------------------------------------- pillole */

/* A griglia, non a flex: cosi' le pillole arrivano al margine destro come i segmenti qui
   sopra, invece di fermarsi a meta' riga lasciando un vuoto che sembra un errore.
   Le colonne sono tante quante le voci, dichiarate dal blocco che le usa. */
.pillole {
    display: grid;
    grid-template-columns: repeat(var(--pillole-colonne, 5), minmax(0, 1fr));
    gap: 8px;
}

.pillola {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    min-width: 0;
    padding: 0 8px;
    background: var(--carta);
    color: var(--inchiostro);
    border: 1px solid var(--bordo);
    border-radius: 24px;
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.pillola-scelta {
    border-color: var(--accento);
    background: var(--accento);
    color: #fff;
}

/* ------------------------------------------------------------- comandi */

.comandi {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: calc(16px + env(safe-area-inset-right));
    background: color-mix(in srgb, var(--sfondo) 88%, transparent);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--bordo);
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
}

.bottone {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 18px;
    border-radius: 13px;
    border: 1px solid transparent;
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.bottone.largo { flex: 1 1 100%; }

.primario { background: var(--accento); color: #fff; }
.primario:active { filter: brightness(.92); }

.secondario {
    background: var(--carta);
    color: var(--inchiostro);
    border-color: var(--bordo);
}

.bottone:disabled { opacity: .4; cursor: default; }

/* ------------------------------------------------------------ risultato */

.nastro-avviso {
    background: var(--ambra-chiaro);
    border: 1px solid var(--ambra);
    color: var(--ambra);
    border-radius: var(--raggio);
    padding: 12px 14px;
    font-size: .9rem;
    line-height: 1.4;
}

.cifre {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.cifra {
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 12px 14px;
    box-shadow: var(--ombra);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cifra-grande {
    grid-column: 1 / -1;
    background: linear-gradient(180deg, var(--carta) 0%, var(--carta-tenue) 100%);
    border-color: var(--accento);
}

.cifra-nome {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--inchiostro-tenue);
}

.cifra-valore {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.5px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.cifra:not(.cifra-grande) .cifra-valore { font-size: 1.6rem; }

.cifra-unita {
    font-size: .55em;
    font-weight: 600;
    color: var(--inchiostro-tenue);
    margin-left: 5px;
}

.cifra-nota { font-size: .82rem; color: var(--inchiostro-tenue); }

.cifra-allarme { border-color: var(--rosso); }
.cifra-allarme .cifra-valore { color: var(--rosso); }

.riassunto {
    font-size: .9rem;
    color: var(--inchiostro-tenue);
    background: var(--neutro-chiaro);
    border-radius: 10px;
    padding: 10px 12px;
}

/* ------------------------------------------------------------ verifiche */

.verifiche { display: flex; flex-direction: column; gap: 10px; }

.verifica {
    border: 1px solid var(--bordo);
    border-left-width: 4px;
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--carta-tenue);
}

.verifica-ok { border-left-color: var(--verde); }
.verifica-no { border-left-color: var(--rosso); }
.verifica-vuota { border-left-color: var(--neutro); border-style: dashed; border-left-style: solid; }

.verifica-testa {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.pastiglia {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: .82rem;
    font-weight: 700;
    color: #fff;
}

.verifica-ok .pastiglia { background: var(--verde); }
.verifica-no .pastiglia { background: var(--rosso); }
.verifica-vuota .pastiglia { background: var(--neutro); }

.verifica-nome { font-weight: 600; flex: 1 1 auto; min-width: 0; }

.verifica-esito {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.verifica-ok .verifica-esito { background: var(--verde-chiaro); color: var(--verde); }
.verifica-no .verifica-esito { background: var(--rosso-chiaro); color: var(--rosso); }
.verifica-vuota .verifica-esito { background: var(--neutro-chiaro); color: var(--neutro); }

.verifica-testo { font-size: .89rem; margin-top: 6px; line-height: 1.4; }

.verifica-articolo {
    margin-top: 6px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--inchiostro-tenue);
    letter-spacing: .2px;
}

.nota-nonEseguite {
    margin-top: 12px;
    font-size: .86rem;
    color: var(--inchiostro-tenue);
    border-top: 1px solid var(--bordo);
    padding-top: 10px;
}

/* -------------------------------------------------------------- rifiuto */

.scheda.rifiuto {
    background: var(--rosso-chiaro);
    border: 1px solid var(--rosso);
    border-radius: var(--raggio);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rifiuto .titolo-schermata { color: var(--rosso); }
.rifiuto-motivo { font-size: 1rem; line-height: 1.5; }

/* ------------------------------------------------- richiamo e avvertenza */

.richiamo {
    font-size: .88rem;
    color: var(--inchiostro-tenue);
    border-left: 3px solid var(--accento);
    padding: 4px 0 4px 12px;
    line-height: 1.45;
}

.richiamo a { font-weight: 600; white-space: nowrap; }

.avvertenza {
    background: var(--neutro-chiaro);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 14px;
    font-size: .86rem;
    line-height: 1.5;
    color: var(--inchiostro-tenue);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.avvertenza-titolo {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--inchiostro);
}

.avvertenza-firma { font-weight: 600; color: var(--inchiostro); }

.colofone {
    font-size: .78rem;
    color: var(--inchiostro-tenue);
    text-align: center;
    padding: 4px 0 8px;
}

.vuoto {
    padding: 32px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
    max-width: 720px;
    margin: 0 auto;
}

/* --------------------------------------------------- schermi stretti */

@media (max-width: 380px) {
    html, body { font-size: 15px; }
    .titolo-schermata { font-size: 1.4rem; }
    .cifra-grande .cifra-valore { font-size: 1.85rem; }
    .cifre { grid-template-columns: 1fr 1fr; }
    .campo-passo { width: 52px; }
    .bottone { font-size: 1rem; padding: 0 12px; }
    .avanzamento-testo { display: none; }

    /* Con la tendina delle lingue la barra ha un elemento in piu': sotto i 380 px il
       sottotitolo «dimensiona la linea» non ci sta insieme al resto e manderebbe a capo
       il marchio. Il nome ElecCalc resta, ed e' quello che identifica. */
    .marchio-testo small { display: none; }
    .scelta-lingua { padding: 0 2px; font-size: .82rem; }
}

/* ------------------------------------------------ telefono in orizzontale */

@media (orientation: landscape) and (max-height: 560px) {
    .barra { padding-top: calc(6px + env(safe-area-inset-top)); padding-bottom: 6px; }
    .marchio-testo small { display: none; }
    .pagina { gap: 12px; padding-top: 12px; }
    .titolo-schermata { font-size: 1.3rem; }
    .sottotitolo { margin-top: -6px; }
    .campo-guscio, .campo-passo { min-height: 50px; }
    .campo-casella { height: 48px; }
    .segmento { min-height: 48px; }
    .bottone { min-height: 46px; }
    .comandi { padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
    .cifra-grande { grid-column: span 1; }
    .cifre { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

/* ------------------------------------------------------ schermi larghi */

@media (min-width: 720px) {
    .pagina { padding: 24px; }
    .campo-riga { max-width: 420px; }
}

/* ------------------------------------------------------ avvio e errori */

.avvio {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--inchiostro-tenue);
}

/* Il marchio dello studio anche sulla schermata di avvio: e' la prima cosa che si vede,
   e prima ci compariva un fulmine generico che con lo studio non c'entra niente.
   Riquadro bianco per lo stesso motivo del marchio in barra: il segno e' nero e blu. */
.avvio-segno {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: var(--ombra);
    overflow: hidden;
    margin-bottom: 6px;
}

.avvio-segno img { width: 72px; height: 72px; display: block; }
.avvio-nome { font-size: 1.4rem; font-weight: 700; color: var(--inchiostro); letter-spacing: .5px; }
.avvio-testo { font-size: .9rem; }

/* La scheda che sta nella schermata d'avvio e' il testo che leggono i motori di ricerca
   (vedi il commento in index.html). Resta a video il paio di secondi del caricamento,
   quindi deve avere l'aria di una pagina fatta bene, non di un errore: da' anche a chi
   arriva la prima volta il tempo di capire dov'e' finito. */
.avvio-scheda {
    max-width: 620px;
    margin: 18px auto 0;
    padding: 0 20px;
    text-align: left;
    color: var(--inchiostro-tenue);
    font-size: .92rem;
    line-height: 1.55;
}

.avvio-scheda h1 {
    font-size: 1.15rem;
    line-height: 1.3;
    color: var(--inchiostro);
    margin: 0 0 10px;
    text-wrap: balance;
}

.avvio-scheda h2 {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--accento);
    margin: 16px 0 6px;
}

.avvio-scheda p { margin: 0 0 10px; }
.avvio-scheda ul { margin: 0 0 10px; padding-left: 20px; }
.avvio-scheda li { margin-bottom: 4px; }

.avvio-scheda .avvio-nota {
    border-left: 3px solid var(--ambra);
    padding-left: 12px;
    font-size: .86rem;
}

.avvio-scheda .avvio-firma { font-size: .82rem; margin-top: 14px; }

/* La schermata d'avvio ora ha del contenuto: non deve piu' stare centrata a forza su tutta
   l'altezza dello schermo, se no il testo finisce fuori. */
.avvio { height: auto; min-height: 100vh; min-height: 100dvh; padding: 32px 0 40px; justify-content: flex-start; }

#blazor-error-ui {
    background: #fde68a;
    color: #3a2c05;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    display: none;
    left: 0;
    padding: 14px 16px 14px 20px;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: .9rem;
}

#blazor-error-ui .testo-errore { margin-right: 6px; }

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 12px;
    top: 10px;
    color: inherit;
    text-decoration: none;
}

/* Chi ha chiesto meno animazioni non ne trova nessuna. */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}