/* ============================================================================
   MercatiGen - Foglio di stile principale
   ----------------------------------------------------------------------------
   Stile: neumorfismo industriale arancione.
   Progettato PRIMA per il telefono: l'app viene usata quasi solo da cellulare,
   da persone anziane. Quindi: testi grandi, tasti alti, contrasti netti.
   Le classi hanno tutte il prefisso "mg-" per non entrare in conflitto con
   Bootstrap, ancora usato dalle sezioni non ancora rifatte.
   ========================================================================== */

:root {
    /* Superfici: base calda, luce in alto a sinistra, ombra in basso a destra */
    --mg-sfondo: #ede6df;
    --mg-luce: #fffaf5;
    --mg-ombra: #c6bbae;

    /* Arancione industriale */
    --mg-arancio: #e2600c;
    --mg-arancio-vivo: #f5751a;
    --mg-arancio-cupo: #b4470a;
    --mg-arancio-testo: #8f3a06; /* arancione leggibile su sfondo chiaro */

    /* Testi */
    --mg-testo: #2b2320;
    --mg-testo-tenue: #6b5f57;

    /* Stati */
    --mg-verde: #196b3a;
    --mg-verde-sfondo: #e4f2e8;
    --mg-rosso: #b02020;
    --mg-rosso-sfondo: #fbeaea;
    --mg-giallo: #8a5a00;
    --mg-giallo-sfondo: #fdf0d5;

    /* Ombre neumorfiche */
    --mg-rilievo: -7px -7px 14px var(--mg-luce), 7px 7px 16px var(--mg-ombra);
    --mg-rilievo-s: -4px -4px 8px var(--mg-luce), 4px 4px 9px var(--mg-ombra);
    --mg-incasso: inset -5px -5px 10px var(--mg-luce), inset 5px 5px 11px var(--mg-ombra);
    --mg-incasso-s: inset -3px -3px 6px var(--mg-luce), inset 3px 3px 7px var(--mg-ombra);

    --mg-raggio: 22px;
    --mg-raggio-s: 16px;

    /* Larghezza massima: l'app resta una colonna da telefono anche su PC */
    --mg-colonna: 560px;
}

/* ---------------------------------------------------------------- base --- */

html {
    font-size: 18px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--mg-sfondo);
    color: var(--mg-testo);
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 1.05rem;
    line-height: 1.5;
    /* Spazio per la barra di navigazione fissa in basso */
    padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px));
}

.mg-colonna {
    width: 100%;
    max-width: var(--mg-colonna);
    margin: 0 auto;
    padding: 0 16px;
}

/* --------------------------------------------------------- barra sopra --- */

.mg-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--mg-sfondo);
    box-shadow: 0 4px 14px rgba(90, 70, 50, .16);
    padding-top: env(safe-area-inset-top, 0px);
}

.mg-topbar-interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: var(--mg-colonna);
    margin: 0 auto;
    padding: 12px 16px;
}

.mg-marchio {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -.3px;
    color: var(--mg-testo);
    text-decoration: none;
}

.mg-marchio-icona {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--mg-arancio-vivo), var(--mg-arancio-cupo));
    color: #fff;
    box-shadow: var(--mg-rilievo-s);
}

.mg-marchio-icona svg { width: 28px; height: 28px; }

.mg-esci {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    cursor: pointer;
    background: var(--mg-sfondo);
    color: var(--mg-rosso);
    border-radius: 14px;
    box-shadow: var(--mg-rilievo-s);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 800;
    padding: 12px 16px;
    min-height: 52px;
}

.mg-esci svg { width: 24px; height: 24px; }
.mg-esci:active { box-shadow: var(--mg-incasso-s); }

/* --------------------------------------------------------- barra sotto --- */

.mg-bottomnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    background: var(--mg-sfondo);
    box-shadow: 0 -4px 16px rgba(90, 70, 50, .18);
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
}

.mg-bottomnav a {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 72px;
    padding: 6px 2px;
    border-radius: 14px;
    color: var(--mg-testo-tenue);
    text-decoration: none;
    font-size: .8rem;
    font-weight: 700;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

.mg-bottomnav a svg { width: 28px; height: 28px; }
.mg-bottomnav a:active { box-shadow: var(--mg-incasso-s); }

.mg-bottomnav a.attivo {
    color: var(--mg-arancio-testo);
    box-shadow: var(--mg-incasso-s);
}

/* ------------------------------------------------------------- riquadri --- */

.mg-card {
    background: var(--mg-sfondo);
    border-radius: var(--mg-raggio);
    box-shadow: var(--mg-rilievo);
    padding: 22px 20px;
    margin-bottom: 20px;
}

.mg-card-incassata {
    background: var(--mg-sfondo);
    border-radius: var(--mg-raggio);
    box-shadow: var(--mg-incasso);
    padding: 20px;
    margin-bottom: 20px;
}

.mg-titolo-pagina {
    margin: 22px 0 18px;
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -.4px;
}

.mg-sezione-titolo {
    margin: 26px 0 14px;
    font-size: 1.15rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--mg-testo-tenue);
}

/* ------------------------------------------------------------ pulsanti --- */

/* Tasto grande a tutta larghezza, usato per le azioni principali */
.mg-bottone {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 0;
    cursor: pointer;
    border-radius: var(--mg-raggio-s);
    background: var(--mg-sfondo);
    color: var(--mg-testo);
    box-shadow: var(--mg-rilievo-s);
    font-family: inherit;
    font-size: 1.25rem;
    font-weight: 800;
    text-decoration: none;
    padding: 20px;
    min-height: 72px;
    transition: transform .12s ease, box-shadow .12s ease;
}

.mg-bottone svg { width: 28px; height: 28px; flex: 0 0 auto; }
.mg-bottone:active { box-shadow: var(--mg-incasso-s); transform: translateY(1px); }

.mg-bottone-arancio {
    background: linear-gradient(145deg, var(--mg-arancio-vivo), var(--mg-arancio-cupo));
    color: #fff;
    box-shadow: -6px -6px 12px var(--mg-luce), 6px 6px 14px var(--mg-ombra);
}

.mg-bottone-arancio:active {
    box-shadow: inset -4px -4px 9px rgba(255, 255, 255, .18), inset 4px 4px 10px rgba(0, 0, 0, .38);
}

/* ------------------------------------------- pulsantoni della dashboard --- */

.mg-pulsantone {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    border: 0;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    border-radius: var(--mg-raggio);
    background: var(--mg-sfondo);
    color: var(--mg-testo);
    box-shadow: var(--mg-rilievo);
    padding: 18px 14px;
    margin-bottom: 18px;
    min-height: 104px;
    transition: transform .12s ease, box-shadow .12s ease;
    -webkit-tap-highlight-color: transparent;
}

.mg-pulsantone:active {
    box-shadow: var(--mg-incasso-s);
    transform: translateY(2px);
}

.mg-pulsantone-icona {
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mg-sfondo);
    box-shadow: var(--mg-incasso-s);
    color: var(--mg-arancio-testo);
}

.mg-pulsantone-icona svg { width: 34px; height: 34px; }

.mg-pulsantone-testo { flex: 1 1 auto; min-width: 0; }

.mg-pulsantone-titolo {
    display: block;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.2;
}

.mg-pulsantone-nota {
    display: block;
    margin-top: 4px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--mg-testo-tenue);
}

.mg-pulsantone-freccia {
    flex: 0 0 auto;
    color: var(--mg-testo-tenue);
    display: flex;
}

.mg-pulsantone-freccia svg { width: 30px; height: 30px; }

/* Versione principale, arancione piena e piu' alta: l'azione piu' usata */
.mg-pulsantone-principale {
    background: linear-gradient(145deg, var(--mg-arancio-vivo), var(--mg-arancio-cupo));
    color: #fff;
    min-height: 132px;
}

.mg-pulsantone-principale .mg-pulsantone-icona {
    background: rgba(255, 255, 255, .22);
    box-shadow: inset 2px 2px 6px rgba(0, 0, 0, .18);
    color: #fff;
}

.mg-pulsantone-principale .mg-pulsantone-titolo { font-size: 1.55rem; }
.mg-pulsantone-principale .mg-pulsantone-nota { color: rgba(255, 255, 255, .92); }
.mg-pulsantone-principale .mg-pulsantone-freccia { color: rgba(255, 255, 255, .92); }

/* ------------------------------------------------------ numeri di oggi --- */

.mg-numeri {
    display: flex;
    gap: 14px;
    margin-bottom: 22px;
}

.mg-numero {
    flex: 1 1 0;
    min-width: 0;
    background: var(--mg-sfondo);
    border-radius: var(--mg-raggio-s);
    box-shadow: var(--mg-incasso-s);
    padding: 16px 14px;
    text-align: center;
}

.mg-numero-valore {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--mg-arancio-testo);
    overflow-wrap: anywhere;
}

.mg-numero-etichetta {
    display: block;
    margin-top: 4px;
    font-size: .9rem;
    font-weight: 700;
    color: var(--mg-testo-tenue);
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* --------------------------------------------------------- etichettine --- */

.mg-targhetta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    box-shadow: var(--mg-rilievo-s);
    background: var(--mg-sfondo);
    font-size: 1rem;
    font-weight: 800;
    padding: 10px 18px;
}

.mg-targhetta svg { width: 22px; height: 22px; }
.mg-targhetta-arancio { color: var(--mg-arancio-testo); }
.mg-targhetta-verde { color: var(--mg-verde); }

/* ------------------------------------------------------------- avvisi --- */

.mg-avviso {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border-radius: var(--mg-raggio-s);
    box-shadow: var(--mg-rilievo-s);
    font-size: 1.1rem;
    font-weight: 700;
    padding: 18px 20px;
    margin-bottom: 20px;
}

.mg-avviso svg { width: 28px; height: 28px; flex: 0 0 auto; margin-top: 1px; }
.mg-avviso ul { margin: 0; padding: 0; list-style: none; }
.mg-avviso li + li { margin-top: 6px; }

.mg-avviso-ok { background: var(--mg-verde-sfondo); color: var(--mg-verde); border-left: 8px solid var(--mg-verde); }
.mg-avviso-errore { background: var(--mg-rosso-sfondo); color: var(--mg-rosso); border-left: 8px solid var(--mg-rosso); }
.mg-avviso-attenzione { background: var(--mg-giallo-sfondo); color: var(--mg-giallo); border-left: 8px solid var(--mg-giallo); }

/* Il tag helper marca cosi' il riepilogo quando non ci sono errori */
.mg-avviso.validation-summary-valid { display: none; }

/* ------------------------------------------------------------- vuoto --- */

.mg-vuoto {
    text-align: center;
    color: var(--mg-testo-tenue);
    padding: 26px 10px;
}

.mg-vuoto svg { width: 56px; height: 56px; opacity: .55; }
.mg-vuoto p { margin: 12px 0 0; font-size: 1.1rem; font-weight: 700; }

/* ============================== REGISTRAZIONE SCARICO ==================== */

/* Intestazione di ogni passo: un numero tondo e il titolo */
.mg-passo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 12px;
}

.mg-passo-numero {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--mg-arancio-vivo), var(--mg-arancio-cupo));
    color: #fff;
    font-size: 1.2rem;
    font-weight: 800;
    box-shadow: var(--mg-rilievo-s);
}

.mg-passo-titolo {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
}

.mg-passo-titolo small {
    display: block;
    font-size: .9rem;
    font-weight: 600;
    color: var(--mg-testo-tenue);
}

/* ------------------------------------------------ pulsanti dei numeri --- */

.mg-numeri-scelta {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.mg-numero-tasto {
    border: 0;
    cursor: pointer;
    background: var(--mg-sfondo);
    color: var(--mg-testo);
    border-radius: 16px;
    box-shadow: var(--mg-rilievo-s);
    font-family: inherit;
    font-size: 1.6rem;
    font-weight: 800;
    min-height: 64px;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    transition: transform .1s ease;
}

.mg-numero-tasto:active { box-shadow: var(--mg-incasso-s); }

.mg-numero-tasto.scelto {
    background: linear-gradient(145deg, var(--mg-arancio-vivo), var(--mg-arancio-cupo));
    color: #fff;
    box-shadow: inset -3px -3px 7px rgba(255, 255, 255, .16), inset 3px 3px 8px rgba(0, 0, 0, .34);
}

.mg-numero-altro {
    grid-column: span 5;
    font-size: 1.1rem;
    min-height: 56px;
}

/* ------------------------------------------------ griglia commercianti --- */

.mg-griglia-nomi {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.mg-nome {
    position: relative;
    border: 0;
    cursor: pointer;
    background: var(--mg-sfondo);
    color: var(--mg-testo);
    border-radius: 16px;
    box-shadow: var(--mg-rilievo-s);
    font-family: inherit;
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.2;
    min-height: 76px;
    padding: 12px 10px;
    overflow-wrap: anywhere;
    -webkit-tap-highlight-color: transparent;
}

.mg-nome:active { box-shadow: var(--mg-incasso-s); }

/* Lampeggio verde alla conferma dell'aggiunta */
.mg-nome.lampeggia {
    background: var(--mg-verde);
    color: #fff;
    box-shadow: var(--mg-incasso-s);
}

/* Pallino con il totale gia' assegnato a quel commerciante */
.mg-nome-conteggio {
    position: absolute;
    top: -8px;
    right: -6px;
    min-width: 34px;
    height: 34px;
    border-radius: 17px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    background: linear-gradient(145deg, var(--mg-arancio-vivo), var(--mg-arancio-cupo));
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .3);
}

.mg-nome.ha-pedane .mg-nome-conteggio { display: flex; }

/* --------------------------------------------------- scelte grandi -------- */
/* Usate per turno (mattina/pomeriggio) e per il giorno */

.mg-scelte {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.mg-scelta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    cursor: pointer;
    background: var(--mg-sfondo);
    color: var(--mg-testo);
    border-radius: 18px;
    box-shadow: var(--mg-rilievo-s);
    font-family: inherit;
    font-size: 1.15rem;
    font-weight: 800;
    min-height: 82px;
    padding: 12px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.mg-scelta svg { width: 30px; height: 30px; }
.mg-scelta small { font-size: .85rem; font-weight: 600; color: var(--mg-testo-tenue); }

.mg-scelta.scelta {
    background: linear-gradient(145deg, var(--mg-arancio-vivo), var(--mg-arancio-cupo));
    color: #fff;
    box-shadow: inset -3px -3px 7px rgba(255, 255, 255, .16), inset 3px 3px 8px rgba(0, 0, 0, .34);
}

.mg-scelta.scelta small { color: rgba(255, 255, 255, .9); }

/* ------------------------------------------------------- riepilogo -------- */

.mg-riga {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--mg-sfondo);
    border-radius: var(--mg-raggio-s);
    box-shadow: var(--mg-rilievo-s);
    padding: 14px 12px;
    margin-bottom: 12px;
}

.mg-riga-testo { flex: 1 1 auto; min-width: 0; }

.mg-riga-nome {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.mg-riga-nota {
    display: block;
    margin-top: 2px;
    font-size: .92rem;
    font-weight: 600;
    color: var(--mg-testo-tenue);
}

.mg-riga-azioni { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.mg-tondo {
    width: 50px;
    height: 50px;
    flex: 0 0 auto;
    border: 0;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mg-sfondo);
    color: var(--mg-testo);
    box-shadow: var(--mg-rilievo-s);
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 800;
    -webkit-tap-highlight-color: transparent;
}

.mg-tondo:active { box-shadow: var(--mg-incasso-s); }
.mg-tondo svg { width: 24px; height: 24px; }
.mg-tondo-rosso { color: var(--mg-rosso); }

.mg-riga-quantita {
    min-width: 52px;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--mg-arancio-testo);
}

/* ------------------------------------------------- barra fissa azione --- */

.mg-barra-azione {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    z-index: 1020;
    background: var(--mg-sfondo);
    box-shadow: 0 -4px 16px rgba(90, 70, 50, .2);
    padding: 10px 0;
}

.mg-barra-azione-interno {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: var(--mg-colonna);
    margin: 0 auto;
    padding: 0 16px;
}

.mg-barra-totale { flex: 0 0 auto; line-height: 1.15; }

.mg-barra-totale strong {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--mg-arancio-testo);
}

.mg-barra-totale small {
    display: block;
    font-size: .85rem;
    font-weight: 700;
    color: var(--mg-testo-tenue);
}

.mg-barra-azione .mg-bottone {
    flex: 1 1 auto;
    width: auto;
    min-height: 66px;
    font-size: 1.05rem;
    padding: 14px 10px;
    gap: 8px;
}

/* Il tasto secondario della barra resta stretto: lo spazio va a REGISTRA */
.mg-barra-azione .mg-bottone-stretto {
    flex: 0 0 auto;
    min-width: 104px;
    font-size: .95rem;
}

.mg-bottone[disabled] {
    opacity: .45;
    cursor: not-allowed;
    background: var(--mg-sfondo);
    color: var(--mg-testo-tenue);
    box-shadow: var(--mg-incasso-s);
}

/* Spazio in fondo alla pagina per non finire sotto la barra fissa */
.mg-spazio-barra { height: 110px; }

/* ----------------------------------------------------- conferma volante -- */

.mg-conferma {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    display: none;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 32px);
    background: var(--mg-verde);
    color: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
    font-size: 1.15rem;
    font-weight: 800;
    padding: 14px 20px;
    pointer-events: none;
}

.mg-conferma.visibile { display: flex; }
.mg-conferma svg { width: 26px; height: 26px; flex: 0 0 auto; }

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

.mg-etichetta {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.mg-campo {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #e5ddd4;
    border-radius: var(--mg-raggio-s);
    box-shadow: var(--mg-incasso), inset 0 0 0 2px rgba(43, 35, 32, .12);
    padding: 4px 14px;
}

.mg-campo:focus-within {
    box-shadow: var(--mg-incasso), inset 0 0 0 2px rgba(43, 35, 32, .12), 0 0 0 4px rgba(226, 96, 12, .55);
}

.mg-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--mg-testo);
    font-family: inherit;
    font-size: 1.25rem;
    font-weight: 700;
    padding: 14px 2px;
    min-height: 56px;
}

.mg-input::placeholder { color: #8a7d72; font-weight: 500; opacity: 1; }

textarea.mg-input { min-height: 80px; resize: vertical; }

/* Scorciatoie (es. provenienze usate di recente) */
.mg-scorciatoie { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

.mg-scorciatoia {
    border: 0;
    cursor: pointer;
    background: var(--mg-sfondo);
    color: var(--mg-arancio-testo);
    border-radius: 999px;
    box-shadow: var(--mg-rilievo-s);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 800;
    padding: 12px 18px;
    min-height: 48px;
}

.mg-scorciatoia:active { box-shadow: var(--mg-incasso-s); }

/* ------------------------------------------------------------ finestra --- */

.mg-velo {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: none;
    align-items: flex-end;
    justify-content: center;
    background: rgba(40, 30, 22, .55);
}

.mg-velo.visibile { display: flex; }

.mg-foglio {
    width: 100%;
    max-width: var(--mg-colonna);
    max-height: 88vh;
    overflow-y: auto;
    background: var(--mg-sfondo);
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .35);
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0px));
}

.mg-foglio h2 {
    margin: 0 0 16px;
    font-size: 1.45rem;
    font-weight: 800;
}

/* ===================== ELENCHI, SCHEDE E NAVIGAZIONE ==================== */

/* Due tasti affiancati dentro una scheda */
.mg-azioni-riga {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.mg-bottone-piccolo {
    min-height: 58px;
    font-size: 1.05rem;
    padding: 12px 10px;
}

.mg-bottone-rosso { color: var(--mg-rosso); }

/* Scheda di un elemento disattivato: resta leggibile ma spenta */
.mg-spento { opacity: .62; }

.mg-targhetta-spenta { color: var(--mg-testo-tenue); }

/* Navigazione tra settimane: frecce grandi ai lati, periodo al centro */
.mg-nav-periodo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.mg-nav-periodo-centro {
    flex: 1 1 auto;
    text-align: center;
    background: var(--mg-sfondo);
    border-radius: var(--mg-raggio-s);
    box-shadow: var(--mg-incasso-s);
    padding: 12px 8px;
}

.mg-nav-periodo-centro small {
    display: block;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .8px;
    color: var(--mg-testo-tenue);
}

.mg-nav-periodo-centro strong {
    display: block;
    font-size: 1.2rem;
    font-weight: 800;
    margin-top: 2px;
}

.mg-freccia {
    width: 60px;
    height: 60px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--mg-sfondo);
    color: var(--mg-arancio-testo);
    box-shadow: var(--mg-rilievo-s);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.mg-freccia svg { width: 30px; height: 30px; }
.mg-freccia:active { box-shadow: var(--mg-incasso-s); }

/* Tre tasti di scarico file affiancati */
.mg-esporta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 22px;
}

.mg-esporta .mg-bottone {
    flex-direction: column;
    gap: 6px;
    min-height: 76px;
    font-size: .95rem;
    padding: 12px 6px;
}

.mg-esporta .mg-bottone svg { width: 26px; height: 26px; }

/* Scheda che contiene una tabella a tutta larghezza */
.mg-card-tabella {
    background: var(--mg-sfondo);
    border-radius: var(--mg-raggio);
    box-shadow: var(--mg-rilievo);
    padding: 12px 8px;
    margin-bottom: 20px;
    overflow: hidden;
}

.mg-card-tabella-titolo {
    margin: 4px 0 12px;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .5px;
}

/* ------------------------------------------------- errori nei campi --- */

.mg-errore-campo {
    display: block;
    color: var(--mg-rosso);
    font-size: 1rem;
    font-weight: 700;
    margin-top: 8px;
}

.mg-errore-campo.field-validation-valid { display: none; }

.mg-campo:has(.input-validation-error) {
    box-shadow: var(--mg-incasso), inset 0 0 0 2px rgba(43, 35, 32, .12), 0 0 0 3px var(--mg-rosso);
}

/* ------------------------------------------------- messa a fuoco/tocco --- */

.mg-bottone:focus-visible,
.mg-pulsantone:focus-visible,
.mg-esci:focus-visible,
.mg-bottomnav a:focus-visible,
.mg-numero-tasto:focus-visible,
.mg-nome:focus-visible,
.mg-scelta:focus-visible,
.mg-tondo:focus-visible,
.mg-scorciatoia:focus-visible {
    outline: 4px solid var(--mg-arancio);
    outline-offset: 3px;
}

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