/* ─────────────────────────────────────────────────────────────────────────────────────────────
   Demo dell'app del donatore: solo quello che serve perché i LINK della demo sembrino i pulsanti
   dell'app. Nell'app vera voci, comandi e riquadri sono <button> con un gestore di clic; qui,
   senza circuito, si naviga con <a>, che di serie sarebbero sottolineati e colorati come link.
   ───────────────────────────────────────────────────────────────────────────────────────────── */

a.voce-navigazione,
a.voce-premibile,
a.benemerenze-comando,
a.ritratto-donatore,
a.menu-riquadro,
a.riga-link {
    color: inherit;
    text-decoration: none;
}

a.voce-navigazione.attiva { color: var(--mud-palette-primary); }

/* I riquadri cliccabili delle liste: nel gestionale sono MudPaper con @onclick, qui un link attorno. */
a.riga-link { display: block; }

/* Le due scelte del tesserino digitale (barre/QR): link con le classi di MudToggleGroup. */
.demo-scelte { display: inline-flex; border: 1px solid var(--mud-palette-primary); border-radius: var(--mud-default-borderradius); overflow: hidden; }
a.demo-scelta { color: var(--mud-palette-primary); text-decoration: none; padding: 6px 18px; font-weight: 500; }
a.demo-scelta + a.demo-scelta { border-left: 1px solid var(--mud-palette-primary); }
a.demo-scelta.scelta { background-color: rgba(var(--mud-palette-primary-rgb), var(--vr-tinta)); }

/* La copertina della prima news: nella demo non ci sono immagini caricate, un riquadro colorato
   con le stesse proporzioni (16:9) tiene il posto. */
.demo-copertina {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-primary-darken));
    color: var(--mud-palette-primary-text);
    border-radius: inherit;
}
.demo-copertina .mud-icon-root { font-size: 4rem; opacity: .85; }

/* Dentro il telefono finto la barra di scorrimento del browser non c'è, come sul telefono vero:
   si scorre lo stesso, con la rotellina o col dito. */
html, .chat-conversazione, .chat-schermata { scrollbar-width: none; }
html::-webkit-scrollbar, .chat-conversazione::-webkit-scrollbar, .chat-schermata::-webkit-scrollbar { display: none; }