@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Manrope', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Su telefono e tablet la pagina non si ingrandisce con il pizzico (iPhone ignora il meta viewport: serve anche questo) ne' con il
   doppio tocco; scorrere in verticale e in orizzontale resta possibile. */
html, body {
    touch-action: pan-x pan-y;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* Riquadro dei grafici Mermaid (Pagine/Grafici/Edit.razor): a schermo intero occupa tutta la
   viewport e mostra uno sfondo pieno invece di quello (trasparente) della pagina. */
.mermaid-zoom-viewport:fullscreen {
    width: 100vw;
    height: 100vh;
    background: var(--mud-palette-background, #fff);
}

/* Colonna «Azioni» degli elenchi (STANDARD_CRUD.md, sezione 6): colonna larga quanto serve, icone allineate a destra
   con il margine minimo; la scritta dell'intestazione resta a sinistra ed e' discreta.
   I selettori sono volutamente piu' specifici di quelli di MudBlazor (altrimenti padding e testo restano i suoi). */
.mud-table .mud-table-row th.col-azioni.mud-table-cell,
.mud-table .mud-table-row td.col-azioni.mud-table-cell,
.mud-table-dense * .mud-table-row .mud-table-cell.col-azioni {
    white-space: nowrap;
    width: 1%;
    padding-left: 0;
    padding-right: 8px;
}

.mud-table .mud-table-row td.col-azioni.mud-table-cell {
    text-align: right;
}

.mud-table .mud-table-row th.col-azioni.mud-table-cell {
    text-align: left;
    padding-left: 8px;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--mud-palette-info);
}

/* Icone di riga: da 24 px con poco margine intorno (il pulsante medio ha di suo 12 px per lato). */
.mud-table .col-azioni .mud-icon-button {
    padding: 4px;
}

/* MudTooltip e' un blocco (display:flex): senza questa regola le icone di una cella si impilano o vanno a capo quando la
   colonna e' stretta (es. Pianificazioni, con molte colonne). In linea e senza andare a capo restano sempre su una riga. */
.mud-table td.col-azioni .mud-tooltip-root {
    display: inline-flex;
    vertical-align: middle;
}

/* Voci di menu delle anagrafiche (Prospect, Clienti, Dipendenti): testo dello stesso colore dell'icona (info del tema).
   Per il gruppo Prospect vale solo l'intestazione, non le voci interne. */
.mud-nav-item.nav-anagrafica .mud-nav-link-text,
.mud-nav-group.nav-anagrafica > .mud-nav-link .mud-nav-link-text {
    color: var(--mud-palette-info);
}

/* Menu laterale: voci in maiuscolo e piu' ravvicinate (di default MudBlazor lascia 6+6 px di padding per voce). */
.mud-navmenu .mud-nav-link {
    padding-top: 2px;
    padding-bottom: 2px;
}

.mud-navmenu .mud-nav-link .mud-nav-link-text {
    text-transform: uppercase;
}

/* Gerarchia leggibile: i gruppi (con icona) in grassetto e staccati dal precedente; le sottovoci piu' piccole, rientrate fino
   al testo del gruppo e con un filo verticale a sinistra che le lega al loro gruppo. */
.mud-navmenu .mud-nav-group > .mud-nav-link,
.mud-navmenu > .mud-nav-item > .mud-nav-link {
    margin-top: 4px;
}

.mud-navmenu .mud-nav-group > .mud-nav-link .mud-nav-link-text {
    font-weight: 600;
}

.mud-navmenu .mud-nav-group .mud-collapse-container .mud-nav-link {
    margin-left: 12px;
    padding-left: 38px !important;
    padding-inline-start: 38px !important;
    border-left: 2px solid var(--mud-palette-lines-default);
    border-radius: 0 4px 4px 0;
}

.mud-navmenu .mud-nav-group .mud-collapse-container .mud-nav-link .mud-nav-link-text {
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.4px;
}

.mud-navmenu .mud-nav-group .mud-collapse-container .mud-nav-link.active {
    border-left-color: var(--mud-palette-primary);
}

/* Sotto-gruppo «Configurazioni» (configurazione di un modulo): meno in risalto delle voci di lavoro, testo piccolo e attenuato, senza grassetto. */
.mud-navmenu .mud-nav-group.nav-impostazioni > .mud-nav-link .mud-nav-link-text {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

.mud-navmenu .mud-nav-group.nav-impostazioni > .mud-nav-link .mud-nav-link-icon-default,
.mud-navmenu .mud-nav-group.nav-impostazioni > .mud-nav-link .mud-nav-link-expand-icon {
    font-size: 1rem;
    color: var(--mud-palette-text-secondary);
}

.mud-navmenu .mud-nav-group.nav-impostazioni .mud-collapse-container .mud-nav-link {
    margin-left: 24px;
    padding-left: 30px !important;
    padding-inline-start: 30px !important;
}

.mud-navmenu .mud-nav-group.nav-impostazioni .mud-collapse-container .mud-nav-link .mud-nav-link-text {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.mud-navmenu .mud-nav-group.nav-impostazioni .mud-collapse-container .mud-nav-link.active .mud-nav-link-text {
    color: var(--mud-palette-primary);
}

/* Scheda unica del contatto: su cellulare il form dei dati sta sopra le sezioni di lavoro. */
@media (max-width: 959.98px) { .scheda-form { order: -1; } }

/* Bacheca: calendario e attivita' da fare affiancati da 960 px in su (min-width:0 evita che il contenuto allarghi la colonna). */
.bacheca-colonne { display: block; }
@media (min-width: 960px) {
    .bacheca-colonne-due { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
}
.bacheca-colonne > div { margin-bottom: 16px; }

/* Riquadri «da leggere» della bacheca (WhatsApp, posta): filo del colore del modulo (--k), etichetta piccola e valore in evidenza; cliccabili. */
a.bacheca-kpi {
    display: block;
    padding: 10px 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 6px solid var(--k);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    color: inherit;
    text-decoration: none;
    transition: box-shadow .15s ease;
}
a.bacheca-kpi:hover { box-shadow: 0 3px 10px rgba(11, 22, 38, .14); color: inherit; text-decoration: none; }
.bacheca-kpi-etichetta { font-size: .75rem; color: var(--mud-palette-text-secondary); }
.bacheca-kpi-valore { font-size: 1.1rem; font-weight: 700; display: flex; align-items: center; }
.bacheca-kpi-valore.zero { font-weight: 600; color: var(--mud-palette-text-secondary); font-size: 1rem; }
.bacheca-kpi-riga { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.bacheca-kpi-nota { font-size: .7rem; color: var(--mud-palette-text-secondary); }
.bacheca-kpi-allerta { color: var(--mud-palette-error); font-weight: 700; }

/* Campi PROPRI di una anagrafica, quelli della sua tabella e non del nucleo comune AnagraficaContatti (componente Shared/RiquadroAnagrafica): nel colore
   del gruppo «Anagrafiche» (--g, dal database). Filo a sinistra e
   fondo tenue come il riquadro delle classificazioni (che resta nel colore «info»), titolo, riga e etichetta del campo in uso e radio nello stesso colore. */
.riquadro-anagrafica {
    border-left: 4px solid var(--g);
    background-color: color-mix(in srgb, var(--g) 6%, var(--mud-palette-surface));
    border-radius: 0 8px 8px 0;
    padding: 14px 16px 4px;
    margin-bottom: 16px;
}
.riquadro-anagrafica-titolo {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--g);
    margin-bottom: 10px;
}
.riquadro-anagrafica .mud-input.mud-input-underline:before { border-bottom-color: color-mix(in srgb, var(--g) 40%, transparent); }
.riquadro-anagrafica .mud-input.mud-input-underline:after { border-bottom-color: var(--g); }
.riquadro-anagrafica .mud-input-control:focus-within > .mud-input-control-input-container > .mud-input-label,
.riquadro-anagrafica .mud-input-control:focus-within .mud-input-label { color: var(--g); }
.riquadro-anagrafica .mud-radio .mud-primary-text { color: var(--g) !important; }

/* Riquadro «Classificazione e statistiche» dei form di prospect e anagrafica: campi che servono ai report (agenti,
   settore, fonte) e non sono dati anagrafici. Tinta e filo nel colore info del tema, per distinguerlo dal resto. */
.riquadro-classificazione {
    background-color: color-mix(in srgb, var(--mud-palette-info) 12%, var(--mud-palette-surface));
    border-left: 4px solid var(--mud-palette-info);
}

/* Riconnessione di Blazor Server: niente finestra a tutto schermo. Una barra sottile in cima (colore info del tema)
   e una piccola etichetta, che compaiono solo se il collegamento non torna entro 3-4 secondi: le interruzioni
   brevi passano inosservate. I tentativi e il ricaricamento automatico sono in js/riconnessione.js. Se la riconnessione fallisce l'etichetta resta, con il link per ricaricare. */
#components-reconnect-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    pointer-events: none;
    font-family: inherit;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected,
#components-reconnect-modal.components-reconnect-paused,
#components-reconnect-modal.components-reconnect-resume-failed {
    display: block;
}

#components-reconnect-modal .reconnect-barra {
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--mud-palette-info, #2196f3) 50%, transparent 100%);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    animation: reconnect-scorri 1.2s linear infinite, reconnect-appari 0.3s ease 3s forwards;
}

#components-reconnect-modal .reconnect-etichetta {
    display: none;
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 14px;
    border-radius: 16px;
    border-left: 4px solid var(--mud-palette-info, #2196f3);
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-secondary, #555);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    font-size: 0.8125rem;
    white-space: nowrap;
    opacity: 0;
    animation: reconnect-appari 0.3s ease 4s forwards;
}

#components-reconnect-modal.components-reconnect-show .reconnect-in-corso,
#components-reconnect-modal.components-reconnect-retrying .reconnect-in-corso {
    display: block;
}

/* Se Blazor lascia insieme classi di stati diversi (es. failed + retrying) vince l'errore: niente due etichette sovrapposte. */
#components-reconnect-modal.components-reconnect-failed .reconnect-in-corso,
#components-reconnect-modal.components-reconnect-rejected .reconnect-in-corso,
#components-reconnect-modal.components-reconnect-paused .reconnect-in-corso,
#components-reconnect-modal.components-reconnect-resume-failed .reconnect-in-corso {
    display: none;
}

#components-reconnect-modal.components-reconnect-failed .reconnect-fallita,
#components-reconnect-modal.components-reconnect-rejected .reconnect-fallita,
#components-reconnect-modal.components-reconnect-paused .reconnect-fallita,
#components-reconnect-modal.components-reconnect-resume-failed .reconnect-fallita {
    display: block;
    pointer-events: auto;
    border-left-color: var(--mud-palette-warning, #ffab00);
    animation-delay: 0s;
}

#components-reconnect-modal.components-reconnect-failed .reconnect-barra,
#components-reconnect-modal.components-reconnect-rejected .reconnect-barra,
#components-reconnect-modal.components-reconnect-paused .reconnect-barra,
#components-reconnect-modal.components-reconnect-resume-failed .reconnect-barra {
    background: var(--mud-palette-warning, #ffab00);
    background-size: 100% 100%;
    animation: reconnect-appari 0.3s ease forwards;
}

#components-reconnect-modal .reconnect-fallita a {
    color: var(--mud-palette-info, #2196f3);
    font-weight: 600;
}

@keyframes reconnect-scorri {
    from { background-position: -40% 0; }
    to { background-position: 140% 0; }
}

@keyframes reconnect-appari {
    to { opacity: 1; }
}

/* Colonna «Azioni» nelle tabelle semplici (MudSimpleTable, es. Attività e promemoria): stesse regole di MudTable. */
.mud-simple-table th.col-azioni,
.mud-simple-table td.col-azioni {
    white-space: nowrap;
    width: 1%;
    padding-left: 0;
    padding-right: 8px;
    text-align: right;
}

.mud-simple-table th.col-azioni {
    text-align: left;
    padding-left: 8px;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--mud-palette-info);
}

.mud-simple-table td.col-azioni .mud-icon-button {
    padding: 4px;
}

/* Riordino a trascinamento delle righe (wwwroot/js/riordina.js): maniglia, riga trascinata e linea di rilascio */
tr[data-riordina] { cursor: grab; }
tr[data-riordina] td.riordina-maniglia { width: 28px; padding-right: 0; color: var(--mud-palette-text-secondary); }
tr.riordina-trascinata { opacity: .45; }
tr.riordina-sopra td { box-shadow: inset 0 2px 0 0 var(--mud-palette-primary); }
tr.riordina-sotto td { box-shadow: inset 0 -2px 0 0 var(--mud-palette-primary); }

/* Logo e nome nella barra superiore: link alla home, senza il colore e la sottolineatura dei link */
/* Barra superiore del backoffice (MainLayout), variante «Salvia»: verde chiaro spento con testo verde scuro, meno abbagliante della barra scura per chi
   ci lavora tutto il giorno. Vale solo per il backoffice: il sito pubblico (PublicLayout) usa lo stesso tema ma resta con la barra scura.
   I colori sono le variabili del tema (barra, testo e logo), cosi' valgono anche per icone e pulsanti «ereditati». Per cambiare variante basta qui. */
.mud-appbar.crm-barra-backoffice {
    --mud-palette-appbar-background: #E4EEE8;
    --mud-palette-appbar-text: #1F3A33;
    border-bottom: 1px solid #CADBD1;
}

a.crm-marchio { display: flex; align-items: center; color: inherit; text-decoration: none; }

/* Bacheca: un colore morbido tutto suo (sabbia, parente dell'ambra del marchio), uguale sull'icona della barra in alto e sulla voce del menu.
   Icona #A9824C (contrasto 3:1 sulla barra salvia, 3,6:1 sul menu bianco); testo piu' scuro #7A5C34 (oltre 4,5:1, leggibile). */
:root { --colore-bacheca: #A9824C; --colore-bacheca-testo: #7A5C34; }
.icona-bacheca { color: var(--colore-bacheca) !important; }
.icona-bacheca:hover { background-color: rgba(169, 130, 76, 0.14) !important; }
.mud-nav-item.nav-bacheca .mud-nav-link-icon { color: var(--colore-bacheca) !important; }
.mud-nav-item.nav-bacheca .mud-nav-link-text { color: var(--colore-bacheca-testo); }
.mud-nav-item.nav-bacheca .mud-nav-link.active { background-color: rgba(169, 130, 76, 0.12); }
a.crm-marchio:hover { color: inherit; text-decoration: none; }

/* Selettore di emoji (Shared/EmojiPicker.razor) */
.emoji-griglia { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; padding: 8px; max-width: 360px; }
.emoji-btn { font-size: 1.4rem; line-height: 1; padding: 4px; border: 0; background: transparent; border-radius: 6px; cursor: pointer; }
.emoji-btn:hover { background: var(--mud-palette-action-default-hover); }
@media (max-width: 480px) { .emoji-griglia { grid-template-columns: repeat(8, 1fr); max-width: 90vw; } }

/* ---- Menu laterale: una sezione per ogni gruppo di moduli (ordine, nome, colore e icona dal database, come la home) ---- */
.nav-sezione { margin: 8px 0; border-right: 4px solid var(--g); background: color-mix(in srgb, var(--g) 8%, transparent); border-radius: 8px 0 0 8px; padding-bottom: 2px; }
.nav-sezione-testa { display: flex; align-items: center; gap: 8px; padding: 8px 12px 4px 14px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--g); }
.nav-sezione-icona { width: 24px; height: 24px; border-radius: 7px; background: var(--g); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Colonne che non devono allargarsi oltre lo spazio disponibile (griglia flessibile con contenuto largo). */
.min-w-0 { min-width: 0; }

/* Intelligenza artificiale: un solo colore per tutte le icone delle funzioni AI, in tutta l'app (vedi crm.Services.Ai.AiAspetto, che ne ha una
   copia in AiAspetto.Colore: vanno tenuti uguali). */
:root {
    --colore-ai: #8E24AA;
}

.mud-icon-root.icona-ai,
.pulsante-ai .mud-button-icon-start .mud-icon-root {
    color: var(--colore-ai);
}

/* Pannello del CRM (MainLayout, .crm-pannello): il titolo della pagina (h4) sta su una riga e occupa poco spazio in altezza, la descrizione
   resta sotto. Se non ci sta, finisce con i puntini. Le pagine pubbliche (PublicLayout) non sono toccate. */
.crm-pannello .mud-typography-h4 {
    font-size: 1.6rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 599.98px) {
    .crm-pannello .mud-typography-h4 { font-size: 1.3rem; }
}

/* Intestazione della pagina (IntestazionePagina, crm.Core/Shared): titolo e azioni su una riga, descrizione sotto. Azione principale piena
   su computer, pulsante flottante sul telefono; azioni secondarie leggere (solo icona sul telefono); menu «Altre azioni». */
.intestazione-pagina { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.ip-testi { flex: 1 1 auto; min-width: 0; }
.ip-titolo { margin: 0; }
.ip-descrizione { font-size: 0.875rem; line-height: 1.4; color: var(--mud-palette-text-secondary); margin-top: 2px; }
.ip-azioni { flex: none; display: flex; align-items: center; gap: 4px; }
.ip-azione { white-space: nowrap; color: var(--mud-palette-text-secondary) !important; }
.ip-principale { white-space: nowrap; margin-left: 4px; }
.fab-principale { display: none !important; }
@media (max-width: 599.98px) {
    .ip-principale { display: none !important; }
    .ip-azione { min-width: 44px !important; width: 44px; height: 44px; padding: 0 !important; border-radius: 50% !important; }
    .ip-azione .ip-azione-testo { display: none; }
    .ip-azione .mud-button-icon-start { margin: 0; }
    .ip-azione .mud-button-icon-start .mud-icon-root { font-size: 22px; }
    /* !important su posizione e misure: lo stile di MudBlazor (.mud-button-root, position: relative) viene caricato dopo questo file. */
    .fab-principale { display: inline-flex !important; position: fixed !important; right: 16px !important; bottom: 16px !important; z-index: 1050;
                      height: 48px !important; padding: 0 20px !important; border-radius: 24px !important; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); }
    .crm-pannello:has(.fab-principale) { padding-bottom: 88px !important; }
}

/* Ritorno (PulsanteRitorno): piccola icona ↩ discreta a destra nella riga del titolo, grigia e leggera; si accende al passaggio del mouse.
   Area da toccare di 40 px (dimensione del pulsante) anche se l'icona e' piccola. */
.icona-ritorno { color: var(--mud-palette-text-secondary) !important; opacity: 0.55; width: 40px; height: 40px; }
.icona-ritorno:hover, .icona-ritorno:focus-visible { opacity: 1; }
.icona-ritorno .mud-icon-root { font-size: 20px; }