/* ============================================================
   BP Ticket — stile telefono
   ------------------------------------------------------------
   Tutto vive dentro @media (max-width: 767.98px) e sotto
   body.m-on: il desktop non vede niente di tutto questo.

   Impianto: One UI. Lo schermo si divide in AREA DI LETTURA in
   alto (titolo grande, aria, niente da toccare) e AREA DI
   INTERAZIONE in basso (schede, pulsanti, barra, fogli).

   Tre parti in fila: 1) i token  2) le regole generali
   3) il catalogo dei componenti (m-*).
   ============================================================ */

/* ---------- 1. TOKEN ---------- */

:root {
    /* scala degli spazi: 4 / 8 / 12 / 16 / 24 / 32 / 48 */
    --m-sp-1: .25rem;
    --m-sp-2: .5rem;
    --m-sp-3: .75rem;
    --m-sp-4: 1rem;
    --m-sp-5: 1.5rem;
    --m-sp-6: 2rem;
    --m-sp-7: 3rem;

    /* tipografia fluida: nessun gradino fra 320 e 768 */
    --m-titolo: clamp(1.5rem, 1.1rem + 2.2vw, 1.9rem);
    --m-testo: 1rem;          /* 16px: sotto, iPhone zooma */
    --m-piccolo: .82rem;
    --m-minuscolo: .72rem;

    --m-raggio: 16px;
    --m-raggio-sm: 12px;
    --m-raggio-pillola: 999px;

    --m-tap: 44px;            /* bersaglio minimo */
    --m-barra-h: 58px;        /* barra di navigazione in basso */

    --m-fondo: #f4f6f9;
    --m-carta: #fff;
    --m-riga: #eef2f7;
    --m-testo-forte: #0f172a;
    --m-testo-tenue: #64748b;

    --m-ombra: 0 1px 2px rgba(15, 23, 42, .06),
               0 4px 12px rgba(15, 23, 42, .05);
    --m-ombra-alta: 0 -2px 24px rgba(15, 23, 42, .14);

    /* bordo sicuro del telefono (barra gesti, tacca) */
    --m-sicuro-giu: env(safe-area-inset-bottom, 0px);
    --m-sicuro-su: env(safe-area-inset-top, 0px);
}

@media (max-width: 767.98px) {
body.m-on {

/* ---------- 2. REGOLE GENERALI ---------- */

    background: var(--m-fondo);
    -webkit-tap-highlight-color: rgba(14, 165, 233, .12);
}

/* L'altezza dello schermo sul telefono cambia quando la barra
   del browser entra ed esce: dvh, non vh. */
body.m-on .admin-main,
body.m-on .login-wrapper { min-height: 100dvh; }

/* Contenuto: aria ai lati, e spazio in fondo per non finire
   sotto la barra di navigazione. */
body.m-on .admin-content {
    background: var(--m-fondo);
    padding: var(--m-sp-3) var(--m-sp-4)
             calc(var(--m-barra-h) + var(--m-sicuro-giu) + var(--m-sp-5));
}

/* Striscia in cima: solo identità e uscita. La navigazione sta
   in basso, dove arriva il pollice. */
body.m-on .admin-topbar {
    height: 52px;
    padding: 0 var(--m-sp-3);
    border-bottom: none;
    background: var(--m-fondo);
}
body.m-on .admin-topbar .btn-sidebar-toggle { display: none; }
body.m-on .brand-switcher .dropdown-toggle {
    min-height: var(--m-tap);
    font-size: var(--m-piccolo);
    border-radius: var(--m-raggio-pillola);
    padding: .3rem .7rem;
    max-width: 52vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.m-on .user-menu .dropdown-toggle { min-height: var(--m-tap); }

/* La barra laterale, sul telefono, e' il menu dietro "Altro":
   voci grandi e angoli morbidi. */
body.m-on .admin-sidebar {
    width: min(84vw, 320px);
    border-radius: 0 var(--m-raggio) var(--m-raggio) 0;
    padding-bottom: var(--m-sicuro-giu);
}
body.m-on .sidebar-nav .nav-link {
    min-height: 48px;
    font-size: .95rem;
    padding: .7rem 1.25rem;
}
body.m-on .sidebar-footer { min-height: 56px; }
body.m-on .sidebar-footer a {
    min-height: var(--m-tap);
    display: inline-flex;
    align-items: center;
    gap: var(--m-sp-2);
}

/* Campi: 16px veri, altrimenti Safari zooma appena li tocchi. */
body.m-on .form-control,
body.m-on .form-select,
body.m-on textarea {
    font-size: var(--m-testo);
    min-height: var(--m-tap);
    border-radius: var(--m-raggio-sm);
    padding: .55rem .75rem;
}
body.m-on textarea.form-control { min-height: 96px; }
body.m-on .form-control-sm,
body.m-on .form-select-sm {
    font-size: var(--m-testo);
    min-height: var(--m-tap);
    padding: .5rem .7rem;
}
body.m-on .form-label {
    font-size: var(--m-piccolo);
    font-weight: 600;
    color: var(--m-testo-tenue);
    margin-bottom: var(--m-sp-1);
}
body.m-on .form-check-input {
    width: 1.35rem;
    height: 1.35rem;
    margin-top: .1rem;
}
body.m-on .form-check {
    display: flex;
    align-items: center;
    gap: var(--m-sp-2);
    min-height: var(--m-tap);
    padding-left: 0;
}
body.m-on .form-check .form-check-input { margin: 0; flex: 0 0 auto; }
/* il dito prende l'etichetta, non il quadratino */
body.m-on .form-check-label {
    display: flex;
    align-items: center;
    min-height: var(--m-tap);
    flex: 1 1 auto;
}
/* un testo d'aiuto dentro la spunta va a capo, non si schiaccia */
body.m-on .form-check { flex-wrap: wrap; }
body.m-on .form-check > .form-text { flex: 1 1 100%; margin-top: 0; }

/* Niente da toccare sotto i 44px. Si allarga l'area, non l'icona. */
body.m-on .btn,
body.m-on .dropdown-item,
body.m-on .nav-link {
    min-height: var(--m-tap);
    min-width: var(--m-tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--m-sp-2);
    border-radius: var(--m-raggio-sm);
}
body.m-on .dropdown-item,
body.m-on .nav-link { justify-content: flex-start; min-width: 0; }
/* "piccolo" sul telefono vuol dire testo piccolo, non bersaglio piccolo */
body.m-on .btn-sm {
    min-height: var(--m-tap);
    min-width: var(--m-tap);
    padding-inline: var(--m-sp-3);
    font-size: var(--m-piccolo);
}
/* Le pagine (1 2 3 ...): quadratini da 44, con aria fra loro. */
body.m-on .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--m-sp-2);
    margin-bottom: 0;
}
body.m-on .pagination .page-item { margin: 0; }
body.m-on .pagination .page-link {
    min-width: var(--m-tap);
    min-height: var(--m-tap);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--m-raggio-sm);
}

body.m-on .dropdown-menu {
    border-radius: var(--m-raggio);
    border: none;
    box-shadow: var(--m-ombra);
    padding: var(--m-sp-2);
    max-width: calc(100vw - var(--m-sp-6));
}

/* Carte: più morbide, meno imbottite. */
body.m-on .card-admin {
    border-radius: var(--m-raggio);
    box-shadow: var(--m-ombra);
}
body.m-on .card-admin .card-body { padding: var(--m-sp-4); }
body.m-on .card-admin .card-header {
    padding: var(--m-sp-3) var(--m-sp-4);
    border-radius: var(--m-raggio) var(--m-raggio) 0 0;
}

/* I riquadri modali partono dal basso, come i fogli di sistema. */
body.m-on .modal-dialog {
    margin: 0;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    max-width: none;
}
body.m-on .modal-content {
    border: none;
    border-radius: var(--m-raggio) var(--m-raggio) 0 0;
    padding-bottom: var(--m-sicuro-giu);
    max-height: 88dvh;
}
body.m-on .modal-body { overflow-y: auto; }

/* ---------- 3. CATALOGO ---------- */

/* 3.1 m-testata — area di lettura: titolo grande, poi aria.
       Niente pulsanti qui dentro: vanno in basso. */
body.m-on .m-testata {
    padding: var(--m-sp-3) 0 var(--m-sp-4);
}
body.m-on .m-testata h1,
body.m-on .m-testata h2,
body.m-on .page-header h2 {
    font-size: var(--m-titolo);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--m-testo-forte);
    margin: 0;
}
body.m-on .m-testata p,
body.m-on .page-header p {
    margin: var(--m-sp-2) 0 0;
    font-size: var(--m-piccolo);
    color: var(--m-testo-tenue);
    line-height: 1.45;
}
/* Una fila di pulsanti in testata (conteggio, Seleziona, Eliminati,
   Nuovo...) su 412px non ci sta: va a capo invece di uscire. */
body.m-on .page-header .d-flex,
body.m-on .m-testata .d-flex { flex-wrap: wrap; }

body.m-on .m-testata-conto {
    display: inline-flex;
    align-items: center;
    gap: var(--m-sp-2);
    margin-top: var(--m-sp-3);
    font-size: var(--m-piccolo);
    color: var(--m-testo-tenue);
}

/* 3.2 m-barra — navigazione fissa in basso (max 5 voci). */
body.m-on .m-barra {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1045;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--m-riga);
    padding-bottom: var(--m-sicuro-giu);
}
body.m-on .m-barra a,
body.m-on .m-barra button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: var(--m-barra-h);
    padding: var(--m-sp-2) 0 var(--m-sp-1);
    border: none;
    background: none;
    color: var(--m-testo-tenue);
    font-size: var(--m-minuscolo);
    font-weight: 500;
    text-decoration: none;
    line-height: 1.1;
    border-radius: 0;
}
body.m-on .m-barra i { font-size: 1.28rem; line-height: 1; }
body.m-on .m-barra .attivo { color: var(--accent); font-weight: 600; }
body.m-on .m-barra .attivo i { transform: translateY(-1px); }
/* La voce che crea: stessa griglia, pallino pieno. */
body.m-on .m-barra .m-barra-primario i {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(14, 165, 233, .35);
}
body.m-on .m-barra .m-barra-primario { gap: 1px; }

/* 3.3 m-schede — una riga di tabella diventa una scheda.
       Le etichette di colonna arrivano da data-eti sul td.
       NB: display:block toglie la semantica di tabella ai
       lettori di schermo: il markup porta role="table"/"row"/"cell". */
body.m-on table.m-schede,
body.m-on table.m-schede tbody,
body.m-on table.m-schede tr,
body.m-on table.m-schede td { display: block; width: auto; }
body.m-on table.m-schede { border: none; background: none; }
body.m-on table.m-schede thead { display: none; }
body.m-on table.m-schede tr {
    position: relative;
    background: var(--m-carta);
    border: 1px solid var(--m-riga);
    border-radius: var(--m-raggio);
    box-shadow: var(--m-ombra);
    padding: var(--m-sp-4);
    margin-bottom: var(--m-sp-3);
}
body.m-on table.m-schede tr:hover { background: var(--m-carta); }
/* la zebra per cella, con i td a blocco, diventa chiazze grigie */
body.m-on table.m-schede td {
    background: none !important;
    border: none;
    padding: 0;
    min-height: 0;
    font-size: var(--m-piccolo);
    color: var(--m-testo-forte);
}
body.m-on table.m-schede td + td { margin-top: var(--m-sp-2); }
body.m-on table.m-schede td[data-eti]::before {
    content: attr(data-eti);
    display: block;
    font-size: var(--m-minuscolo);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--m-testo-tenue);
    margin-bottom: 1px;
}
/* La cella vuota sparisce invece di lasciare l'etichetta orfana.
   !important perche' deve battere anche tr.m-apri.aperta td.m-extra. */
body.m-on table.m-schede td.m-vuota { display: none !important; }
/* il titolo della scheda: grande, senza etichetta */
body.m-on table.m-schede td.m-titolo {
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.3;
    padding-right: 3.2rem;   /* spazio per il numero in alto a destra */
}
body.m-on table.m-schede td.m-titolo::before { content: none; }
body.m-on table.m-schede td.m-titolo a { color: inherit; text-decoration: none; }
/* il numero del ticket, in alto a destra */
body.m-on table.m-schede td.m-codice {
    position: absolute;
    top: var(--m-sp-4);
    right: var(--m-sp-4);
    margin: 0 !important;
    font-size: var(--m-piccolo);
    font-weight: 600;
    color: var(--m-testo-tenue);
}
body.m-on table.m-schede td.m-codice::before { content: none; }
/* riga di pillole (stato, priorità, ...) senza etichette */
body.m-on table.m-schede td.m-stati {
    display: flex;
    flex-wrap: wrap;
    gap: var(--m-sp-2);
    align-items: center;
}
body.m-on table.m-schede td.m-stati::before { content: none; }
/* due celle di pillole di fila (ruolo + stato) stanno in linea */
body.m-on table.m-schede td.m-stati { display: inline-flex; vertical-align: top; }
body.m-on table.m-schede td.m-stati + td.m-stati {
    margin-top: 0;
    margin-left: var(--m-sp-2);
}
/* le azioni in fondo alla scheda, larghe e distanziate */
body.m-on table.m-schede td.m-azioni {
    display: flex;
    flex-wrap: wrap;
    gap: var(--m-sp-2);
    margin-top: var(--m-sp-3);
    padding-top: var(--m-sp-3);
    border-top: 1px solid var(--m-riga);
}
body.m-on table.m-schede td.m-azioni::before { content: none; }
body.m-on table.m-schede td.m-azioni .btn { flex: 0 0 auto; }
/* due dati piccoli affiancati (data, autore) */
body.m-on table.m-schede td.m-meta {
    display: inline-block;
    margin-right: var(--m-sp-4);
    color: var(--m-testo-tenue);
}

/* La carta che CONTIENE le schede sparisce: le schede sono bianche,
   una carta bianca sotto non si vede e ruba imbottitura. */
body.m-on .card-admin:has(table.m-schede) {
    background: none;
    box-shadow: none;
    border: none;
}
body.m-on .card-admin:has(table.m-schede) > .card-header {
    background: none;
    border-bottom: none;
    padding-left: 0;
    padding-right: 0;
}
body.m-on .card-admin:has(table.m-schede) > .card-body,
body.m-on .card-admin:has(table.m-schede) > .table-responsive,
body.m-on .card-admin:has(table.m-schede) > .card-body > .table-responsive {
    padding: 0;
    background: none;
}

/* 3.4 m-apri — la scheda mostra l'essenziale, il resto al tocco. */
body.m-on table.m-schede tr.m-apri td.m-extra { display: none; }
body.m-on table.m-schede tr.m-apri.aperta td.m-extra { display: block; }
body.m-on table.m-schede tr.m-apri.aperta td.m-extra.m-azioni { display: flex; }
body.m-on table.m-schede tr.m-apri::after {
    content: "Tocca per il resto";
    display: block;
    margin-top: var(--m-sp-3);
    font-size: var(--m-minuscolo);
    color: #94a3b8;
}
body.m-on table.m-schede tr.m-apri.aperta::after { content: "Tocca per chiudere"; }

/* 3.5 m-pillola — stato e priorità, leggibili e toccabili. */
body.m-on .m-pillola,
body.m-on table.m-schede .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--m-sp-1);
    border-radius: var(--m-raggio-pillola);
    padding: .3rem .7rem;
    font-size: var(--m-piccolo);
    font-weight: 600;
}

/* 3.6 m-chips — i filtri accesi, sempre in vista. */
body.m-on .m-chips {
    display: flex;
    gap: var(--m-sp-2);
    overflow-x: auto;
    scrollbar-width: none;
    padding: var(--m-sp-1) 0 var(--m-sp-3);
    margin: 0;
    list-style: none;
    scroll-snap-type: x proximity;
}
body.m-on .m-chips::-webkit-scrollbar { display: none; }
body.m-on .m-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--m-sp-1);
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-height: var(--m-tap);
    background: #e8f4fd;
    color: #0b6d99;
    border: none;
    border-radius: var(--m-raggio-pillola);
    padding: 0 .35rem 0 .9rem;
    font-size: var(--m-piccolo);
    font-weight: 600;
    white-space: nowrap;
}
/* La X: bersaglio pieno (44px), pallino disegnato dentro da 26. */
body.m-on .m-chip .m-chip-x {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--m-tap);
    height: var(--m-tap);
    border: none;
    background: none;
    color: inherit;
    font-size: .8rem;
    line-height: 1;
    padding: 0;
}
body.m-on .m-chip .m-chip-x::before {
    content: "";
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(11, 109, 153, .12);
}
body.m-on .m-chip .m-chip-x > * { position: relative; }

/* 3.7 m-filtri — il pulsante e il foglio dal basso. */
body.m-on .m-barra-strumenti {
    display: flex;
    align-items: center;
    gap: var(--m-sp-2);
    margin-bottom: var(--m-sp-3);
}
body.m-on .m-filtri-apri {
    display: inline-flex;
    align-items: center;
    gap: var(--m-sp-2);
    min-height: var(--m-tap);
    padding: 0 var(--m-sp-4);
    border: 1px solid var(--m-riga);
    border-radius: var(--m-raggio-pillola);
    background: var(--m-carta);
    color: var(--m-testo-forte);
    font-size: var(--m-piccolo);
    font-weight: 600;
}
body.m-on .m-filtri-apri .m-conto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--m-raggio-pillola);
    background: var(--accent);
    color: #fff;
    font-size: var(--m-minuscolo);
}
body.m-on .m-foglio-sfondo {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 1050;
}
body.m-on .m-foglio-sfondo.aperto { opacity: 1; pointer-events: auto; }
body.m-on .m-foglio {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1051;
    display: flex;
    flex-direction: column;
    max-height: 88dvh;
    background: var(--m-carta);
    border-radius: var(--m-raggio) var(--m-raggio) 0 0;
    box-shadow: var(--m-ombra-alta);
    transform: translateY(100%);
    transition: transform .25s cubic-bezier(.32, .72, 0, 1);
}
body.m-on .m-foglio.aperto { transform: translateY(0); }
/* Se il foglio e' una card con i suoi margini (mb-4 &c.), da chiuso
   resterebbe a sbirciare dal fondo: translateY(100%) copre l'altezza,
   non il margine. */
body.m-on .m-foglio { margin: 0 !important; }
body.m-on .m-foglio-presa {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: #cbd5e1;
    margin: var(--m-sp-3) auto var(--m-sp-2);
    flex: 0 0 auto;
}
body.m-on .m-foglio-testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--m-sp-4) var(--m-sp-3);
    font-weight: 700;
    font-size: 1.05rem;
    flex: 0 0 auto;
}
body.m-on .m-foglio-corpo {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--m-sp-4) var(--m-sp-4);
    flex: 1 1 auto;
}
/* il pulsante che applica non si cerca: resta incollato in fondo */
body.m-on .m-foglio-piede {
    flex: 0 0 auto;
    display: flex;
    gap: var(--m-sp-3);
    padding: var(--m-sp-3) var(--m-sp-4)
             calc(var(--m-sp-3) + var(--m-sicuro-giu));
    border-top: 1px solid var(--m-riga);
    background: var(--m-carta);
}
body.m-on .m-foglio-piede .btn { flex: 1 1 auto; }
body.m-on .m-foglio-piede .btn.m-secondario { flex: 0 0 38%; }

/* 3.8 m-tessere — i numeri, tre per riga invece di uno a schermata. */
body.m-on .m-tessere {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: var(--m-sp-3);
    margin-bottom: var(--m-sp-4);
}
/* quando le tessere stanno su una .row di Bootstrap, i suoi gutter
   (margini negativi + padding sulle col-) vanno azzerati */
body.m-on .m-tessere.row {
    margin-left: 0;
    margin-right: 0;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}
body.m-on .m-tessere.row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
    width: auto;
}
body.m-on .m-tessera {
    background: var(--m-carta);
    border-radius: var(--m-raggio);
    box-shadow: var(--m-ombra);
    padding: var(--m-sp-3);
    text-align: left;
    text-decoration: none;
    display: block;
    border-top: 3px solid transparent;
}
body.m-on .m-tessera .m-numero {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--m-testo-forte);
    font-variant-numeric: tabular-nums;
}
body.m-on .m-tessera .m-etichetta {
    display: block;
    margin-top: 2px;
    font-size: var(--m-minuscolo);
    font-weight: 600;
    color: var(--m-testo-tenue);
    line-height: 1.2;
}
body.m-on .m-tessera.m-acceso { border-top-color: var(--accent); }
body.m-on .m-tessera.m-attesa { border-top-color: #c026d3; }
body.m-on .m-tessera.m-lavoro { border-top-color: #f59e0b; }
body.m-on .m-tessera.m-chiuso { border-top-color: #94a3b8; }

/* 3.9 m-elenco — due righe e un dato in coda (utenti, brand, persone). */
body.m-on .m-elenco {
    background: var(--m-carta);
    border-radius: var(--m-raggio);
    box-shadow: var(--m-ombra);
    overflow: hidden;
}
body.m-on .m-elenco-riga {
    display: flex;
    align-items: center;
    gap: var(--m-sp-3);
    min-height: 64px;
    padding: var(--m-sp-3) var(--m-sp-4);
    color: inherit;
    text-decoration: none;
}
body.m-on .m-elenco-riga + .m-elenco-riga { border-top: 1px solid var(--m-riga); }
body.m-on .m-elenco-guida {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--m-piccolo);
}
body.m-on .m-elenco-testo { flex: 1 1 auto; min-width: 0; }
body.m-on .m-elenco-titolo {
    font-weight: 600;
    font-size: .95rem;
    color: var(--m-testo-forte);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.m-on .m-elenco-sotto {
    font-size: var(--m-piccolo);
    color: var(--m-testo-tenue);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.m-on .m-elenco-coda {
    flex: 0 0 auto;
    text-align: right;
    font-size: var(--m-piccolo);
    color: var(--m-testo-tenue);
}

/* 3.10 m-modulo — i moduli: un campo per riga, azioni in fondo. */
body.m-on .m-modulo .row > [class*="col-"] { width: 100%; }
body.m-on .m-modulo .mb-3 { margin-bottom: var(--m-sp-4) !important; }
body.m-on .m-azioni-fondo {
    position: sticky;
    bottom: calc(var(--m-barra-h) + var(--m-sicuro-giu));
    z-index: 10;
    display: flex;
    gap: var(--m-sp-3);
    padding: var(--m-sp-3) 0;
    margin-top: var(--m-sp-4);
    background: linear-gradient(to top,
                var(--m-fondo) 70%, rgba(244, 246, 249, 0));
}
body.m-on .m-azioni-fondo .btn { flex: 1 1 auto; }
body.m-on .m-azioni-fondo .btn.m-secondario { flex: 0 0 38%; }
/* .d-grid di Bootstrap e' !important e impilerebbe i pulsanti */
body.m-on .m-azioni-fondo.d-grid { display: flex !important; }
/* nel markup il primario spesso viene prima: sul telefono va a destra */
body.m-on .m-azioni-fondo .m-secondario { order: -1; }
/* dentro una carta bianca la sfumatura grigia si vedrebbe */
body.m-on .card-admin .m-azioni-fondo,
body.m-on .m-carta .m-azioni-fondo { background: var(--m-carta); }

/* due pulsanti che si dividono la riga */
body.m-on .m-azioni-paio {
    display: flex;
    gap: var(--m-sp-2);
}
body.m-on .m-azioni-paio > * { flex: 1 1 0; min-width: 0; }

/* 3.11 m-carta — carta richiudibile con sunto (per le pagine lunghe). */
body.m-on .m-carta {
    background: var(--m-carta);
    border-radius: var(--m-raggio);
    box-shadow: var(--m-ombra);
    padding: var(--m-sp-4);
    margin-bottom: var(--m-sp-3);
}
body.m-on .m-carta > .m-carta-testa {
    display: flex;
    align-items: center;
    gap: var(--m-sp-2);
    min-height: var(--m-tap);
    font-weight: 700;
    font-size: 1rem;
    color: var(--m-testo-forte);
}
body.m-on .m-carta > .m-carta-testa .m-freccia {
    margin-left: auto;
    color: var(--m-testo-tenue);
    font-size: .9rem;
}
body.m-on .m-carta .m-sunto {
    font-size: var(--m-piccolo);
    color: var(--m-testo-tenue);
    margin-top: var(--m-sp-1);
}
/* !important: il .d-flex di Bootstrap e' !important e altrimenti
   la carta non si chiuderebbe mai. */
body.m-on .m-carta.m-richiudibile:not(.aperta) > .m-carta-corpo {
    display: none !important;
}
body.m-on .m-carta.aperta > .m-carta-testa .m-freccia { transform: rotate(180deg); }
body.m-on .m-carta.aperta .m-sunto { display: none; }
body.m-on .m-carta > .m-carta-corpo { margin-top: var(--m-sp-3); }

/* 3.11b m-azioni fuori da una tabella: riga di pulsanti larghi,
        staccata da un filo, in fondo al pezzo che li riguarda. */
body.m-on .m-azioni:not(td) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--m-sp-2);
    margin-top: var(--m-sp-3);
    padding-top: var(--m-sp-3);
    border-top: 1px solid var(--m-riga);
}
body.m-on .m-azioni:not(td) .btn { flex: 1 1 auto; }

/* 3.11c una card-admin usata come m-carta: l'imbottitura e' quella
        della carta (header + body), non si somma a quella di m-carta. */
body.m-on .card-admin.m-carta { padding: 0; }
body.m-on .card-admin.m-carta > .m-carta-testa {
    padding: var(--m-sp-3) var(--m-sp-4);
}
body.m-on .card-admin.m-carta > .m-sunto {
    padding: 0 var(--m-sp-4) var(--m-sp-3);
    margin-top: 0;
}
body.m-on .card-admin.m-carta > .m-carta-corpo { margin-top: 0; }

/* 3.12 tabelle NON convertite: si vede che si scorre. */
body.m-on .table-responsive:not(.m-niente-ombra) {
    background:
        linear-gradient(to right, var(--m-carta) 30%, rgba(255,255,255,0)),
        linear-gradient(to left, var(--m-carta) 30%, rgba(255,255,255,0)) 100% 0,
        radial-gradient(farthest-side at 0 50%,
            rgba(15,23,42,.14), rgba(0,0,0,0)),
        radial-gradient(farthest-side at 100% 50%,
            rgba(15,23,42,.14), rgba(0,0,0,0)) 100% 0;
    background-repeat: no-repeat;
    background-size: 36px 100%, 36px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* 3.13 utilità */
body.m-on .m-no-telefono { display: none !important; }
body.m-on .m-largo { width: 100%; }
body.m-on .m-nascondi-vuoto:empty { display: none; }

} /* fine @media telefono */

/* Fuori dal telefono i pezzi mobili non esistono.
   NB: .m-foglio NON si nasconde: su desktop resta la carta di sempre
   (e' lo stesso nodo, cambia solo comportamento sotto i 768px);
   spariscono i suoi ornamenti, che sono marcati m-solo-telefono. */
@media (min-width: 768px) {
    .m-solo-telefono,
    .m-barra,
    .m-foglio-sfondo,
    .m-filtri-apri,
    /* gli ornamenti del foglio non hanno senso su una carta */
    .m-foglio-presa,
    .m-foglio-piede { display: none !important; }
}