@import '_content/ComponentiBlazor/ComponentiBlazor.uu93rpk3ni.bundle.scp.css';
@import '_content/WkBlazor.Shared/WkBlazor.Shared.9ze884twui.bundle.scp.css';

/* /Components/ChiamaSulTelefono.razor.rz.scp.css */
/* l'iconcina gialla accanto al numero: piccola, sulla riga del numero, col giallo del design system */
.chiama-telefono[b-eykxakkepn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-height: 0;
    padding: 0;
    margin-left: 4px;
    vertical-align: middle;
    border-radius: 50%;
    background: var(--attesa-fondo);
    color: var(--attesa);
    border: 1px solid var(--attesa);
}

.chiama-telefono:hover[b-eykxakkepn],
.chiama-telefono:focus-visible[b-eykxakkepn] {
    background: var(--attesa);
    color: var(--attesa-fondo);
}
/* /Components/ComeVa.razor.rz.scp.css */
/*
    "Come va". Solo token del design system. Il testo si legge a righe non troppo lunghe; i
    venditori stanno in riquadri affiancati, con un filo dell'accento a sinistra come le note.
*/

.come-va[b-1e8kgazzg7] {
    display: flex;
    flex-direction: column;
    gap: var(--s5);
}

/* il gap separa i blocchi: il titolo non aggiunge il suo margine sopra */
.come-va .pannello-titolo[b-1e8kgazzg7] { margin-top: 0; }

.come-va-testo[b-1e8kgazzg7],
.come-va-elenco[b-1e8kgazzg7] {
    margin: 0;
    max-width: 90ch;
    line-height: 1.5;
    color: var(--inchiostro);
}

.come-va-elenco[b-1e8kgazzg7] { padding-left: var(--s5); }

.come-va-elenco li + li[b-1e8kgazzg7] { margin-top: var(--s1); }

/* i venditori uno sotto l'altro, a tutta larghezza (26/09/2026): affiancati erano colonne strette di testo */
.come-va-persone[b-1e8kgazzg7] {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
}

/* nel riquadro del venditore la tabellina e poi il percorso e i consigli */
.come-va-persona .come-va-tabella-contenitore + .come-va-elenco[b-1e8kgazzg7] { margin-top: var(--s3); }

.come-va-persona[b-1e8kgazzg7] {
    padding: var(--s3) var(--s4);
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-left: 3px solid var(--verde);
    border-radius: var(--raggio);
}

.come-va-consigli[b-1e8kgazzg7] {
    margin: var(--s3) 0 0;
    padding: 0;
    list-style: none;
}

.come-va-consigli li[b-1e8kgazzg7] {
    display: flex;
    gap: var(--s2);
    line-height: 1.5;
}

.come-va-consigli li + li[b-1e8kgazzg7] { margin-top: var(--s2); }

.come-va-segno[b-1e8kgazzg7] {
    color: var(--link);
    font-weight: 700;
}

/*
    Le buone notizie in verde, le cattive in rosso (26/09/2026): il fondo tenue dello stato, il testo
    del suo colore e il glifo davanti. Le informazioni restano come sono.
*/
.come-va-elenco[b-1e8kgazzg7] { list-style: none; padding-left: 0; }

.come-va-elenco li[b-1e8kgazzg7] {
    padding: var(--s1) var(--s2);
    border-radius: var(--raggio);
}

.come-va-bene[b-1e8kgazzg7] { background: var(--fatto-fondo); color: var(--fatto); }

.come-va-male[b-1e8kgazzg7] { background: var(--allarme-fondo); color: var(--allarme); }

.come-va-bene .come-va-segno[b-1e8kgazzg7],
.come-va-male .come-va-segno[b-1e8kgazzg7] { color: inherit; }

/* il quadro di Tutto: una tabella, una riga per misura */
.come-va-tabella-contenitore[b-1e8kgazzg7] { overflow-x: auto; }

.come-va-tabella[b-1e8kgazzg7] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-piccolo);
}

.come-va-tabella th[b-1e8kgazzg7],
.come-va-tabella td[b-1e8kgazzg7] {
    padding: var(--s1) var(--s3);
    border-bottom: 1px solid var(--riga);
    text-align: left;
}

/* piu' nomi in una cella, uno sotto l'altro: chi va meglio e chi peggio ne ha due per parte (04/10/2026) */
.come-va-tabella td[b-1e8kgazzg7] { white-space: pre-line; vertical-align: top; }

.come-va-tabella thead th[b-1e8kgazzg7] {
    background: var(--testa-tabella);
    color: var(--grigio);
    font-weight: 600;
}

.come-va-tabella .n[b-1e8kgazzg7] { text-align: right; font-variant-numeric: tabular-nums; }

.come-va-tabella tbody th[b-1e8kgazzg7] { font-weight: 600; }

/* la riga prende il fondo del suo tono; la cella col tono opposto si distingue con il suo */
.come-va-tabella tr.come-va-bene th[b-1e8kgazzg7],
.come-va-tabella tr.come-va-bene td[b-1e8kgazzg7] { background: var(--fatto-fondo); }

.come-va-tabella tr.come-va-male th[b-1e8kgazzg7],
.come-va-tabella tr.come-va-male td[b-1e8kgazzg7] { background: var(--allarme-fondo); }

.come-va-tabella td.come-va-bene[b-1e8kgazzg7] { color: var(--fatto); background: var(--fatto-fondo); font-weight: 600; }

.come-va-tabella td.come-va-male[b-1e8kgazzg7] { color: var(--allarme); background: var(--allarme-fondo); font-weight: 600; }

/*
    Il resoconto del venditore (04/10/2026): paragrafi a tutta larghezza, uno per confronto, staccati
    dalla tabellina sopra; poi "Cosa fare" sopra i consigli, vicino a loro.
*/
.come-va-racconto[b-1e8kgazzg7] { margin-top: var(--s3); }

.come-va-racconto p[b-1e8kgazzg7] {
    margin: 0;
    line-height: 1.5;
}

.come-va-racconto p + p[b-1e8kgazzg7] { margin-top: var(--s2); }

.come-va-cosa-fare[b-1e8kgazzg7] {
    margin: var(--s4) 0 0;
    font-size: var(--t-piccolo);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--link);
}

.come-va-cosa-fare + .come-va-consigli[b-1e8kgazzg7] { margin-top: var(--s1); }
/* /Components/ContatoriChiamate.razor.rz.scp.css */
/* i contatori accanto al numero: piu' piccoli e grigi, le cifre incolonnate (un carattere solo, tabular-nums) */
.contatori-chiamate[b-f8zp2fewwi] {
    color: var(--grigio);
    font-size: var(--t-piccolo);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* nella cella: le chiamate col testo della tabella, il tempo sotto in piccolo; a destra come ogni numero */
.contatori-cella[b-f8zp2fewwi] {
    color: inherit;
    font-size: inherit;
}

.contatori-cella > span[b-f8zp2fewwi] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
}

.contatori-tempo[b-f8zp2fewwi] {
    color: var(--grigio);
    font-size: var(--t-piccolo);
}
/* /Components/DurataChiamata.razor.rz.scp.css */
/* la durata che scorre (06/10/2026): cifre tutte larghe uguali e un posto minimo, cosi' da 9:59 a 10:00 niente si sposta */
.durata-chiamata[b-uj8oz5aulp] {
    display: inline-block;
    min-width: 5ch;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* il pallino rosso della Posta (13/10/2026): in alto a destra della parola, col numero delle email da leggere */
.voce-testo + .voce-conta[b-6b0iu9xlo2] {
    align-self: flex-start;
    min-width: 1.25rem;
    height: 1.25rem;
    margin-left: 2px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--allarme);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* col menu stretto la parola non c'e': il pallino sta sull'angolo dell'icona, non nel vuoto accanto (04/11/2026) */
.stretta .voce:has(> .voce-conta)[b-6b0iu9xlo2] {
    position: relative;
}

.stretta .voce-testo + .voce-conta[b-6b0iu9xlo2] {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: 2px;
}
/* /Components/Layout/RiquadroChiamata.razor.rz.scp.css */
/*
    Il riquadro della chiamata (05/10/2026): in basso a destra, largo 420px, alto quanto serve e al
    massimo quanto lo schermo sotto la barra in alto (poi scorre dentro). Sopra le finestre (66) perche'
    una chiamata si guarda subito, sotto il sollecito (90) e il dialogo di conferma (100). Gli avvisi
    stanno in alto al centro: non si toccano.
*/
.chiamata[b-m4u9y66u5d] {
    position: fixed;
    z-index: 67;
    right: var(--s4);
    bottom: var(--s4);
    width: min(420px, calc(100vw - var(--s4) * 2));
    max-height: calc(100vh - var(--barra-alta) - var(--s4) * 2);
    display: flex;
    flex-direction: column;
    color: var(--inchiostro);
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-top: 3px solid var(--verde);
    border-radius: var(--raggio-grande);
    box-shadow: var(--ombra-alta);
    overflow: hidden;
}

.chiamata-uscita[b-m4u9y66u5d] { border-top-color: var(--blu); }

.chiamata-testa[b-m4u9y66u5d] {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s2) var(--s3);
    background: var(--verde-tenue);
}

.chiamata-uscita .chiamata-testa[b-m4u9y66u5d] { background: var(--blu-fondo); }

.chiamata-icona[b-m4u9y66u5d] {
    display: inline-flex;
    flex: none;
    color: var(--verde);
}

.chiamata-uscita .chiamata-icona[b-m4u9y66u5d] { color: var(--blu); }

/* l'icona pulsa finche' la chiamata e' viva; ferma con prefers-reduced-motion */
.chiamata-viva[b-m4u9y66u5d] { animation: chiamata-pulsa-b-m4u9y66u5d 1.2s ease-in-out infinite; }

@keyframes chiamata-pulsa-b-m4u9y66u5d {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
    .chiamata-viva[b-m4u9y66u5d] { animation: none; }
}

.chiamata-stato[b-m4u9y66u5d] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.chiamata-numero[b-m4u9y66u5d] { font-variant-numeric: tabular-nums; }

.chiamata-corpo[b-m4u9y66u5d] {
    overflow-y: auto;
    padding: var(--s3);
}

.chiamata-corpo p[b-m4u9y66u5d] { margin: 0; }

.chiamata-chi[b-m4u9y66u5d] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s3);
}

.chiamata-nome[b-m4u9y66u5d] {
    font-size: 1.15em;
    font-weight: 700;
}

.chiamata-ruolo[b-m4u9y66u5d],
.chiamata-nota[b-m4u9y66u5d] { color: var(--grigio-tenue); }

.chiamata-lead + .chiamata-lead[b-m4u9y66u5d] {
    margin-top: var(--s5);
    padding-top: var(--s3);
    border-top: 1px solid var(--riga);
}

.chiamata-lead-nome[b-m4u9y66u5d] { font-weight: 700; }

.chiamata-riga[b-m4u9y66u5d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s1) var(--s3);
    margin-top: var(--s2) !important;
}

.chiamata-azioni[b-m4u9y66u5d] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-top: var(--s3);
}

/* il titoletto sta a 4px dal suo contenuto e a 16px dal blocco sopra (la vicinanza) */
.chiamata-sezione[b-m4u9y66u5d] {
    margin: var(--s4) 0 var(--s1);
    font-size: .78em;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--grigio);
}

.chiamata-voce[b-m4u9y66u5d] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1) var(--s2);
    align-items: center;
}

.chiamata-ritardo[b-m4u9y66u5d] { color: var(--allarme); }

.chiamata-elenco[b-m4u9y66u5d] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--s1);
}

.chiamata-elenco li[b-m4u9y66u5d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s1) var(--s2);
}

/* la nota dello storico a due righe al massimo, intera nel title */
.chiamata-testo[b-m4u9y66u5d] {
    flex-basis: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-line;
}

.chiamata-tutto[b-m4u9y66u5d] {
    display: inline-block;
    margin-top: var(--s1);
}

/* sul telefono: a tutta larghezza, attaccato sopra la barra col pollice */
@media (max-width: 900px) {
    .chiamata[b-m4u9y66u5d] {
        right: 0;
        left: 0;
        bottom: var(--barra-basso);
        width: auto;
        max-height: calc(100vh - var(--barra-alta) - var(--barra-basso));
        border-radius: var(--raggio-grande) var(--raggio-grande) 0 0;
    }
}

/* il pulsante rosso "Riaggancia" (05/10/2026, "come faceva Skype"): tondo, la cornetta giu' */
.chiamata-riaggancia[b-m4u9y66u5d],
.chiamata-rispondi[b-m4u9y66u5d] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--superficie);
    background: var(--allarme);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.chiamata-riaggancia :deep(svg)[b-m4u9y66u5d] { transform: rotate(135deg); }

.chiamata-riaggancia:focus-visible[b-m4u9y66u5d] {
    outline: 2px solid var(--allarme);
    outline-offset: 2px;
}

/* il verde "Rispondi" (05/10/2026), solo mentre squilla: la cornetta dritta */
.chiamata-rispondi[b-m4u9y66u5d] {
    color: var(--su-accento);
    background: var(--verde);
}

.chiamata-rispondi:focus-visible[b-m4u9y66u5d] {
    outline: 2px solid var(--verde);
    outline-offset: 2px;
}
/* /Components/Layout/SbloccoPassword.razor.rz.scp.css */
/*
    lo sblocco della password (15/10/2026): sulla barra blu il giallo scuro da solo non si vedeva (il committente,
    15/10/2026: "non si vede bene"); come il riquadro dei pagamenti in ritardo, fondo chiaro e bordo
*/
.btn.sblocco-password[b-l9fnlm99bv] {
    padding: 0 var(--s2);
    color: var(--attesa);
    border: 1px solid var(--attesa);
    background: var(--attesa-fondo);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}

.btn.sblocco-password:hover[b-l9fnlm99bv] {
    color: var(--attesa);
    text-decoration: none;
}
/* /Components/Layout/TelefonoAssistenza.razor.rz.scp.css */
/* nella barra in alto: testo della barra, la tendina col fondo leggero come i pulsanti piatti della barra */
.telefono-assistenza[b-8cwmuz85kn] {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    color: var(--barra-testo);
    white-space: nowrap;
}

.telefono-assistenza-scelta[b-8cwmuz85kn] {
    max-width: 11rem;
    height: calc(var(--alto-controllo) - 6px);
    padding: 0 var(--s2);
    border: 1px solid var(--barra-sopra);
    border-radius: var(--raggio);
    background: var(--barra-sopra);
    color: var(--barra-testo);
    font: inherit;
    font-size: var(--t-piccolo);
}

/* la tendina aperta e' del sistema: le voci col testo della pagina, non bianco su bianco */
.telefono-assistenza-scelta option[b-8cwmuz85kn] {
    background: var(--superficie);
    color: var(--inchiostro);
}

@media (max-width: 767px) {
    .telefono-assistenza-scelta[b-8cwmuz85kn] { max-width: 7rem; }
}
/* /Components/Lead/AzioniLead.razor.rz.scp.css */
/*
    L'indirizzo nuovo e' un modulo dentro il modulo dell'appuntamento: un riquadro appena piu' scuro
    lo tiene insieme, cosi' si capisce che "Salva l'indirizzo" salva lui e non l'appuntamento.
*/
.indirizzo-nuovo[b-y9mmqif4ga] {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    margin: 0;
    padding: var(--s3);
    border: 1px solid var(--riga);
    border-radius: 8px;
    background: var(--superficie-alt);
}

.indirizzo-nuovo legend[b-y9mmqif4ga] {
    padding: 0 var(--s1);
}

.nuovo-indirizzo[b-y9mmqif4ga] { align-self: flex-start; }
/* /Components/Lead/EmailLead.razor.rz.scp.css */
.email-lead[b-3r1hqp7oqj] {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.email-allegati[b-3r1hqp7oqj] {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

/* gli allegati in una tabellina: nome a sinistra, peso e cestino a destra, righe allineate */
.email-allegati-tabella[b-3r1hqp7oqj] { width: 100%; }

.email-allegati-tabella td[b-3r1hqp7oqj] { vertical-align: middle; }

.email-allegati-tabella td.n[b-3r1hqp7oqj] { width: 1%; white-space: nowrap; color: var(--grigio); }

.email-testo[b-3r1hqp7oqj] {
    max-height: 320px;
    overflow-y: auto;
    padding: var(--s2);
    border: 1px solid var(--riga);
    background: var(--superficie);
    word-break: break-word;
}

/* l'AI sotto il testo, come nella Posta (13/10/2026) */
.email-ai[b-3r1hqp7oqj] { display: flex; gap: var(--s2); margin-top: var(--s2); }

.email-ai select[b-3r1hqp7oqj] { flex: 1; }
/* /Components/Lead/EtichetteProfilo.razor.rz.scp.css */
/* le etichette di che cliente e': una fila che va a capo, come gli stati accanto ai titoli ma col testo normale */
.profilo-etichette[b-06y6akvdsh] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.profilo-etichetta[b-06y6akvdsh] {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--s2);
    border-radius: var(--raggio);
    background: var(--tinta-fondo, var(--superficie));
    color: var(--tinta, var(--inchiostro));
    font-size: var(--t-piccolo);
    font-weight: 600;
    white-space: nowrap;
}
/* /Components/Lead/NuovoIndirizzo.razor.rz.scp.css */
/* il modulo dell'indirizzo nuovo dentro quello dell'appuntamento: si capisce che e' un pezzo a se' */
.nuovo-indirizzo[b-uwzp2xm7cl] {
    display: grid;
    gap: var(--s1);
    margin: var(--s2) 0 0;
    padding: var(--s3);
    border: 1px solid var(--riga);
    border-radius: var(--raggio);
    background: var(--superficie-alt);
}

.nuovo-indirizzo legend[b-uwzp2xm7cl] { padding: 0 var(--s1); }

.nuovo-indirizzo .etichetta[b-uwzp2xm7cl] { margin-top: var(--s1); }

/* la conferma aspetta muta sotto la riga: piccola, perche' da spenta e' solo spazio */
.nuovo-indirizzo-conferma[b-uwzp2xm7cl] { font-size: var(--t-piccolo); }

.nuovo-indirizzo-riga[b-uwzp2xm7cl] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px auto;
    gap: var(--s2);
    align-items: end;
}

.nuovo-indirizzo-tasti[b-uwzp2xm7cl] {
    display: flex;
    gap: var(--s2);
}

/* stretto: via e civico sulla riga, i tasti sotto a destra */
@media (max-width: 600px) {
    .nuovo-indirizzo-riga[b-uwzp2xm7cl] { grid-template-columns: minmax(0, 1fr) 80px; }

    .nuovo-indirizzo-tasti[b-uwzp2xm7cl] { grid-column: 1 / -1; justify-content: flex-end; }
}
/* /Components/Lead/NuovoLead.razor.rz.scp.css */
/*
    Il modulo sta in una finestra sopra l'elenco (FinestraModulo): il nome, il sito e la provenienza
    da una parte, la societa' accanto (modulo-colonne, in componenti.css), cosi' si vede tutto senza
    scorrere; sul telefono le due parti vanno una sotto l'altra da sole.
*/
/* la societa' e' un riquadro nel modulo, come l'indirizzo nuovo dell'appuntamento: stessi stacchi della sezione */
.nuovo-lead .indirizzo-nuovo[b-tbfcp74yy6] {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    margin: 0;
    padding: var(--s3);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
    background: var(--superficie-alt);
}

.nuovo-lead .indirizzo-nuovo > .etichetta:not(legend)[b-tbfcp74yy6] { margin: var(--s2) 0 0; }

.nuovo-lead .indirizzo-nuovo > legend + .etichetta[b-tbfcp74yy6] { margin-top: 0; }

.nuovo-lead .indirizzo-nuovo > .campi-in-fila[b-tbfcp74yy6] { margin-top: var(--s2); }

/* un fieldset e' largo almeno quanto il suo contenuto: nella colonna deve poter stringersi */
.nuovo-lead fieldset[b-tbfcp74yy6] { min-width: 0; }
/* /Components/Lead/ProfiloCliente.razor.rz.scp.css */
/* i numeri sotto le etichette, a richiesta: il link si legge come gli altri dettagli che si aprono */
.profilo-dettaglio[b-fth7o4atqd] { margin-top: var(--s3); }

.profilo-dettaglio > summary[b-fth7o4atqd] {
    cursor: pointer;
    width: max-content;
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* il contenuto sta a 8px dal suo titolo: e' suo */
.profilo-dettaglio[open] > summary[b-fth7o4atqd] { margin-bottom: var(--s2); }
/* /Components/Lead/SocietaLead.razor.rz.scp.css */
.societa-riga[b-yhvzmysqif] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s2);
}

.societa-trovate li[b-yhvzmysqif] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s2);
}
/* /Components/Lead/TelefonataRegistrata.razor.rz.scp.css */
/* come in UltimiContatti: l'etichetta e' un pulsante sottolineato, il player sulla riga sotto */
.stato-audio[b-uy14yfgfdz] {
    border: 0;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.stato-audio:hover[b-uy14yfgfdz] { filter: brightness(.95); text-decoration-thickness: 2px; }

.telefonata-audio[b-uy14yfgfdz] {
    display: block;
    flex-basis: 100%;
    width: 100%;
    max-width: 420px;
    height: 36px;
    margin-top: var(--s1);
}
/* /Components/Lead/UltimiContatti.razor.rz.scp.css */
.contatti[b-d3129tb7wt] {
    margin: 0;
    padding: 0;
    list-style: none;
    font-weight: 400;
    font-size: var(--t-piccolo);
}

/* la seconda voce staccata dalla prima da una riga sottile: sono due cose diverse */
/* la voce raggiunta con Successiva e Precedente (wk.passoStorico): la sua riga di testa bordata */
.contatto.evidenziata > .contatto-testa[b-d3129tb7wt] { box-shadow: inset 0 0 0 2px var(--verde); }

.contatto:focus[b-d3129tb7wt] { outline: none; }

.contatto + .contatto[b-d3129tb7wt] {
    margin-top: var(--s2);
    border-top: 1px solid var(--riga);
}

/* la riga di testa sulla fascia di ogni voce, come negli storici delle schede: le icone ci stanno dentro */
.contatto-testa[b-d3129tb7wt] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s2);
    padding: 5px var(--s2);
    background: var(--testa-voce);
    border-radius: var(--raggio);
}

/*
    le icone della voce a destra, come nello storico della scheda del lead. Sono alte quanto ogni
    pulsante (32px) ma la riga della data no: sporgono sopra e sotto invece di allargarla, cosi' il
    commento resta attaccato alla sua data
*/
.contatto-azioni[b-d3129tb7wt] {
    display: inline-flex;
    gap: var(--s1);
    margin-left: auto;
    align-self: center;
    /* entrano nei 5px sopra e sotto della fascia: ci stanno dentro senza allargarla */
    margin-block: calc((1lh - var(--alto-controllo)) / 2);

    /*
        il quadrato 4px piu' piccolo degli altri pulsanti - diverso dalle icone del lead nella riga sopra, l'icona com'e': sono tante, una per voce.
        Si cambia la misura e non le regole dei pulsanti, che sono piu' forti e la leggono da qui
    */
    --alto-controllo: 28px;
}

/* l'etichetta di una telefonata registrata e' un pulsante: si preme per ascoltarla */
.stato-audio[b-d3129tb7wt] {
    border: 0;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.stato-audio:hover[b-d3129tb7wt] { filter: brightness(.95); text-decoration-thickness: 2px; }

.contatto-audio[b-d3129tb7wt] {
    display: block;
    width: 100%;
    max-width: 420px;
    height: 36px;
    margin-top: var(--s1);
}

/* per quando e' fissata una cosa ancora da fare: rossa se il momento e' passato */
.contatto-per[b-d3129tb7wt] { font-size: var(--t-micro); color: var(--grigio); }

.contatto-per.scaduto[b-d3129tb7wt] { color: var(--allarme); font-weight: 600; }

.contatto-testo[b-d3129tb7wt] {
    margin: var(--s1) 0 0;
    max-width: 90ch;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.contatto-testo.aperto[b-d3129tb7wt] { display: block; -webkit-line-clamp: unset; overflow: visible; }

/* tagliato a mano: le righe a capo restano, e "…altro" continua l'ultima */
.contatto-testo.tagliato[b-d3129tb7wt] { display: block; white-space: pre-line; overflow: visible; }

/* "…altro" e "meno": un link sottolineato nel testo, non un pulsante */
.contatto-altro[b-d3129tb7wt] {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    color: var(--link);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.contatto-altro:hover[b-d3129tb7wt] { text-decoration-thickness: 2px; }

/* paragrafi ed elenchi del Markdown, stretti: sono quattro righe di anteprima */
.contatto-testo[b-d3129tb7wt]  p,
.contatto-testo[b-d3129tb7wt]  ul { margin: 0; }

.contatto-testo[b-d3129tb7wt]  ul { padding-left: 1.2em; }

.contatti-vuoto[b-d3129tb7wt] { color: var(--grigio); font-size: var(--t-piccolo); font-weight: 400; }
/* /Components/MappaCalore.razor.rz.scp.css */
/*
    La mappa di calore. Solo token del design system: il fondo della cella e' l'accento mescolato
    alla superficie (color-mix nel componente), cosi' segue lo stile dell'utente e il tema scuro.
*/

/*
    L'intestazione dei mesi resta in vista scorrendo la pagina (26/09/2026). Per questo la mappa
    non scorre di lato sugli schermi larghi (ci sta): un contenitore che scorre ferma lo sticky
    dentro di se'. Sul telefono torna a scorrere di lato, e l'intestazione scorre con lei.
*/
.mappa[b-rw1xqmrej2] { overflow-x: visible; }

.mappa-tabella thead th[b-rw1xqmrej2] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--superficie);
    box-shadow: 0 1px 0 var(--riga);
}

@media (max-width: 900px) {
    .mappa[b-rw1xqmrej2] { overflow-x: auto; }

    .mappa-tabella thead th[b-rw1xqmrej2] { position: static; }
}

.mappa-tabella[b-rw1xqmrej2] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
    font-size: var(--t-piccolo);
}

.mappa-tabella th[b-rw1xqmrej2] {
    padding: var(--s1) var(--s2);
    font-weight: 600;
    color: var(--grigio);
    text-align: center;
    white-space: nowrap;
}

.mappa-tabella .mappa-chi[b-rw1xqmrej2] {
    text-align: left;
    color: var(--inchiostro);
    min-width: 120px;
}

.mappa-tabella td[b-rw1xqmrej2] {
    min-width: 42px;
    padding: var(--s1) var(--s1);
    text-align: center;
    color: var(--inchiostro);
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
}

/* sul fondo pieno il numero cambia colore: resta leggibile */
.mappa-tabella td.mappa-piena[b-rw1xqmrej2] { color: var(--su-accento); font-weight: 600; }

.mappa-totale[b-rw1xqmrej2] {
    font-weight: 700;
    border-left: 2px solid var(--riga);
}

/*
    Un gruppo dall'altro (04/10/2026): una riga vuota con una linea sottile a meta', larga tutta la
    tabella. Prima lo stacco era la prima riga del gruppo piu' alta delle altre, e si leggeva come una
    cella diversa, non come una separazione.
*/
.mappa-stacco td[b-rw1xqmrej2] {
    height: var(--s3);
    padding: 0;
    background: linear-gradient(var(--riga), var(--riga)) center / 100% 1px no-repeat;
}

.mappa-nome[b-rw1xqmrej2] { font-weight: 700; margin-right: var(--s2); }

/* gli anni a confronto: sotto la persona, piu' piccoli e piu' chiari */
.mappa-prima td[b-rw1xqmrej2],
.mappa-prima th[b-rw1xqmrej2] { font-size: var(--t-micro); padding-top: 1px; padding-bottom: 1px; }

.mappa-prima td[b-rw1xqmrej2] { opacity: .85; }

.mappa-anno[b-rw1xqmrej2] { color: var(--grigio); font-weight: 400; }

.mappa-prima .mappa-chi[b-rw1xqmrej2] { padding-left: var(--s4); }

/*
    Le sezioni (26/09/2026): in "Tutto" dell'Andamento una mappa lunga, una sezione per misura. Il
    titolo della sezione sta in una fascia, e la colonna dei nomi resta ferma scorrendo di lato.
*/
.mappa-sezione th[b-rw1xqmrej2] {
    padding: var(--s3) var(--s2) var(--s1);
    text-align: left;
    color: var(--inchiostro);
    font-size: var(--t-base);
    border-bottom: 2px solid var(--riga);
}

.mappa-sezione-nome[b-rw1xqmrej2] {
    position: sticky;
    left: 0;
    font-weight: 700;
}

.mappa-sezioni .mappa-gruppo .mappa-chi[b-rw1xqmrej2] {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--superficie);
}

/*
    Con gli anni a confronto ogni persona e' un blocco di piu' righe (26/09/2026): fra un blocco e
    l'altro uno stacco di 14px, cosi' si vede dove finisce una persona e comincia la successiva. Lo
    stacco e' un bordo trasparente sulle celle della prima riga del blocco, con il colore della
    cella che resta dentro (background-clip): con border-collapse separate e' il modo di separare
    due tbody.
*/
.mappa-con-anni + .mappa-gruppo tr:first-child > *[b-rw1xqmrej2],
.mappa-gruppo + .mappa-con-anni tr:first-child > *[b-rw1xqmrej2] {
    border-top: 14px solid transparent;
    background-clip: padding-box;
}
/* /Components/Pages/Accesso/Disiscrizione.razor.rz.scp.css */
.disiscrizione-titolo[b-z50og1f7to] {
    font-size: 1.25rem;
    margin: 0 0 8px;
}
/* /Components/Pages/Configurazione/CategorieProgetto/CategorieProgetto.razor.rz.scp.css */
/*
    Le tabelle di configurazione hanno tutte la stessa forma: il pulsante per crearne una, il
    modulo in una finestra sopra, la tabella compatta nel suo riquadro. La compatta non ha un riquadro
    suo perche' di solito sta dentro una scheda: qui e' da sola nella pagina, e prende lo stesso
    aspetto delle tabelle degli elenchi.
*/
.config-azioni[b-1b543hj2n7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

/*
    Nella finestra i campi stanno in sezioni affiancate quante ne stanno (modulo-colonne, in
    componenti.css), cosi' un campo solo resta largo come una colonna e non diventa una riga
    lunghissima. Dentro la sezione la stessa distanza del modulo (s2).
*/
.config-modulo .modulo-sezione[b-1b543hj2n7] { gap: var(--s2); }

.config-modulo .campo[b-1b543hj2n7] { width: 100%; }

.config-tabella[b-1b543hj2n7] {
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
    overflow: hidden;
}

.config-tabella[b-1b543hj2n7]  .tabella tbody td { padding: var(--s2) var(--s3); }

.config-tabella[b-1b543hj2n7]  .paginazione {
    padding: var(--s2) var(--s3);
    border-top: 1px solid var(--riga);
    background: var(--superficie-alt);
}

.config-tabella[b-1b543hj2n7]  .menu-colonne {
    margin-top: 0;
    border: 0;
    border-top: 1px solid var(--riga);
    border-radius: 0;
}

/* il nome e la matita sulla stessa riga: la matita sta sempre li', non compare al passaggio */
.config-nome[b-1b543hj2n7] {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
}

.config-modifica[b-1b543hj2n7] { padding: 0 var(--s1); }

.config-spunta[b-1b543hj2n7] {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    cursor: pointer;
}
/* /Components/Pages/Configurazione/CategorieSiti/CategorieSiti.razor.rz.scp.css */
/*
    Le tabelle di configurazione hanno tutte la stessa forma: il pulsante per crearne una, il
    modulo in una finestra sopra, la tabella compatta nel suo riquadro. La compatta non ha un riquadro
    suo perche' di solito sta dentro una scheda: qui e' da sola nella pagina, e prende lo stesso
    aspetto delle tabelle degli elenchi.
*/
.config-azioni[b-yil2d467d0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

/*
    Nella finestra i campi stanno in sezioni affiancate quante ne stanno (modulo-colonne, in
    componenti.css), cosi' un campo solo resta largo come una colonna e non diventa una riga
    lunghissima. Dentro la sezione la stessa distanza del modulo (s2).
*/
.config-modulo .modulo-sezione[b-yil2d467d0] { gap: var(--s2); }

.config-modulo .campo[b-yil2d467d0] { width: 100%; }

.config-tabella[b-yil2d467d0] {
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
    overflow: hidden;
}

.config-tabella[b-yil2d467d0]  .tabella tbody td { padding: var(--s2) var(--s3); }

.config-tabella[b-yil2d467d0]  .paginazione {
    padding: var(--s2) var(--s3);
    border-top: 1px solid var(--riga);
    background: var(--superficie-alt);
}

.config-tabella[b-yil2d467d0]  .menu-colonne {
    margin-top: 0;
    border: 0;
    border-top: 1px solid var(--riga);
    border-radius: 0;
}

/* il nome e la matita sulla stessa riga: la matita sta sempre li', non compare al passaggio */
.config-nome[b-yil2d467d0] {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
}

.config-modifica[b-yil2d467d0] { padding: 0 var(--s1); }
/* /Components/Pages/Configurazione/Clienti/ClienteScheda.razor.rz.scp.css */
/*
    Chi e' il cliente di lato, cosa ha con noi al centro: la forma delle schede azienda dei CRM. Il
    lato e' fisso perche' sono etichette e valori brevi; il centro si prende il resto.
*/

.cliente[b-f514vrjc5g] {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: var(--s4);
    align-items: start;
    margin-top: var(--s3);
}

.cliente-lato[b-f514vrjc5g],
.cliente-centro[b-f514vrjc5g] { min-width: 0; }

/* i riquadri li disegna Riquadro (un altro componente): lo stile isolato li raggiunge solo con ::deep */
/* dentro la colonna dei riquadri che si spostano (ColonnaRiquadri, display: contents; 05/10/2026) */
.cliente-centro[b-f514vrjc5g] >  .riquadri-colonna > .scheda + .scheda,
.cliente-lato[b-f514vrjc5g] >  .riquadri-colonna > .scheda + .scheda { margin-top: var(--s3); }

/* sul telefono una colonna sola: prima chi e', poi il resto */
@media (max-width: 900px) {
    .cliente[b-f514vrjc5g] { grid-template-columns: minmax(0, 1fr); }
}

.cliente-sede[b-f514vrjc5g] {
    margin: 0 0 var(--s1);
    overflow-wrap: anywhere;
}

.cliente-trovati li[b-f514vrjc5g] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s2);
}

/* la finestra di "Aggiorna da DOWEB Admin": la casella stretta, i valori vanno a capo */
.doweb-casella[b-f514vrjc5g] { white-space: nowrap; }

/* il contatore delle richieste a Openapi accanto al pulsante: una nota, non un dato (14/10/2026) */
.cliente-camerali .tenue[b-f514vrjc5g] { font-size: var(--t-micro); }

/* l'andamento: tre grafici uno sotto l'altro, ognuno col suo titolo piccolo */
.cliente-andamento-titolo[b-f514vrjc5g] {
    margin: var(--s3) 0 var(--s1);
    font-size: var(--t-piccolo);
    font-weight: 600;
}

.cliente-andamento-titolo:first-child[b-f514vrjc5g] { margin-top: 0; }

.doweb-campi td[b-f514vrjc5g] { overflow-wrap: anywhere; }

.doweb-sito[b-f514vrjc5g] { margin-bottom: var(--s4); }
/* /Components/Pages/Configurazione/Clienti/ClientiElenco.razor.rz.scp.css */
/* ::deep perche' le celle le disegna Tabella, che ha il suo ambito */
[b-62o3w37byv] .clienti-vuoto { color: var(--grigio); }

[b-62o3w37byv] .clienti-persona:not(:last-child)::after {
    content: ", ";
    color: var(--grigio);
}

/*
    La riga incompleta ha un filo rosso a sinistra, non il fondo rosso di WK: il fondo pieno su
    un elenco lungo diventa rumore. Non e' l'unico segnale - la colonna Completo lo scrive.
*/
[b-62o3w37byv] tr.riga-incompleta td:first-child { box-shadow: inset 3px 0 0 var(--allarme); }
/* /Components/Pages/Configurazione/Clienti/ModuloCliente.razor.rz.scp.css */
/*
    Il modulo sta nella finestra larga: dati fiscali e sede sono due sezioni affiancate
    (modulo-colonne, in componenti.css), invece di una colonna sola con i campi lunghi tutta la
    pagina. Dentro la sezione la stessa distanza fra i campi del resto del modulo (s2).
*/
.modulo-cliente .modulo-sezione[b-m8ywpdonq6] { gap: var(--s2); }

/*
    Il titolo di sezione ("Sede") senza i margini dell'h4 del browser: sul telefono le due sezioni
    vanno una sotto l'altra, e il titolo deve stare attaccato ai suoi campi, lontano da quelli sopra
    (lo stacco fra le sezioni lo da' modulo-colonne).
*/
.modulo-cliente-sezione[b-m8ywpdonq6] { margin: 0; }

.modulo-cliente-sezione + .campi-in-fila[b-m8ywpdonq6] { margin-top: 0; }
/* /Components/Pages/Configurazione/Clienti/NumeriSconosciuti.razor.rz.scp.css */
/* ::deep perche' le celle le disegna Tabella, che ha il suo ambito */
[b-q7pnotre3b] .sconosciuti-numero {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
}

[b-q7pnotre3b] .sconosciuti-azioni {
    display: inline-flex;
    gap: var(--s1);
}

/* le telefonate di un numero: una per blocco, l'audio a 8px dai suoi dati, 24px fra una e l'altra */
.sconosciuti-telefonate[b-q7pnotre3b] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sconosciuti-telefonata + .sconosciuti-telefonata[b-q7pnotre3b] { margin-top: var(--s5); }

.sconosciuti-dati[b-q7pnotre3b],
.sconosciuti-senza[b-q7pnotre3b] { margin: 0; }

.sconosciuti-senza[b-q7pnotre3b] { color: var(--grigio); margin-top: var(--s2); }

.sconosciuti-audio[b-q7pnotre3b] {
    display: block;
    width: 100%;
    margin-top: var(--s2);
}

/* il filtro che arriva dalla coda: detto a parole, con il modo di toglierlo */
.sconosciuti-filtro[b-q7pnotre3b] {
    margin: 0 0 var(--s3);
    padding: var(--s2) var(--s3);
    border-left: 3px solid var(--attesa);
    background: var(--superficie);
}

/* il badge di cosa manca, con sotto il contatto o il lead (12/10/2026) */
.sconosciuti-manca[b-q7pnotre3b] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}
/* /Components/Pages/Configurazione/Clienti/VerificaPartitaIva.razor.rz.scp.css */
.verifica-piva[b-2bf3syxngk] { margin-top: var(--s2); font-size: var(--t-piccolo); }

.verifica-piva-esito[b-2bf3syxngk] {
    margin-top: var(--s2);
    padding: var(--s2) var(--s3);
    background: var(--superficie-alt);
    border: 1px solid var(--riga);
    border-radius: var(--raggio);
}

.verifica-piva-esito p[b-2bf3syxngk] { margin: 0; }

.verifica-piva-esito p + p[b-2bf3syxngk] { margin-top: var(--s1); }

.verifica-piva-si[b-2bf3syxngk] { color: var(--fatto); font-weight: 600; }

.verifica-piva-no[b-2bf3syxngk] { color: var(--allarme); }

.verifica-piva-etichetta[b-2bf3syxngk] { color: var(--grigio); margin-right: var(--s1); }
/* /Components/Pages/Configurazione/Concorrenti/Concorrenti.razor.rz.scp.css */
/*
    Le tabelle di configurazione hanno tutte la stessa forma: il pulsante per crearne una, il
    modulo in una finestra sopra, la tabella compatta nel suo riquadro. La compatta non ha un riquadro
    suo perche' di solito sta dentro una scheda: qui e' da sola nella pagina, e prende lo stesso
    aspetto delle tabelle degli elenchi.
*/
.config-azioni[b-wpzad03ge7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

/* la nota accanto ai pulsanti: nel suo riquadro, alla loro altezza */
.config-azioni > .nota-pagina[b-wpzad03ge7] { margin: 0; }

/*
    Nella finestra i campi stanno in sezioni affiancate quante ne stanno (modulo-colonne, in
    componenti.css), cosi' un campo solo resta largo come una colonna e non diventa una riga
    lunghissima. Dentro la sezione la stessa distanza del modulo (s2).
*/
.config-modulo .modulo-sezione[b-wpzad03ge7] { gap: var(--s2); }

.config-modulo .campo[b-wpzad03ge7] { width: 100%; }

.config-tabella[b-wpzad03ge7] {
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
    overflow: hidden;
}

.config-tabella[b-wpzad03ge7]  .tabella tbody td { padding: var(--s2) var(--s3); }

.config-tabella[b-wpzad03ge7]  .paginazione {
    padding: var(--s2) var(--s3);
    border-top: 1px solid var(--riga);
    background: var(--superficie-alt);
}

.config-tabella[b-wpzad03ge7]  .menu-colonne {
    margin-top: 0;
    border: 0;
    border-top: 1px solid var(--riga);
    border-radius: 0;
}

.config-modulo .etichetta[b-wpzad03ge7] { margin-top: var(--s2); }

/* subito sotto un titolo l'etichetta non si stacca: il titolo e' suo */
.config-modulo .pannello-titolo + .etichetta[b-wpzad03ge7],
.config-modulo .pannello-titolo + .campi-in-fila > * > .etichetta[b-wpzad03ge7] { margin-top: 0; }
/* /Components/Pages/Configurazione/FileLog/FileLog.razor.rz.scp.css */
/*
    Le tabelle di configurazione hanno tutte la stessa forma: il pulsante per crearne una, il
    modulo che si apre sotto, la tabella compatta nel suo riquadro. La compatta non ha un riquadro
    suo perche' di solito sta dentro una scheda: qui e' da sola nella pagina, e prende lo stesso
    aspetto delle tabelle degli elenchi.
*/
.config-azioni[b-8yxz0otnkf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

.config-tabella[b-8yxz0otnkf] {
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
    overflow: hidden;
}

.config-tabella[b-8yxz0otnkf]  .tabella tbody td { padding: var(--s2) var(--s3); }

.config-tabella[b-8yxz0otnkf]  .paginazione {
    padding: var(--s2) var(--s3);
    border-top: 1px solid var(--riga);
    background: var(--superficie-alt);
}

.config-tabella[b-8yxz0otnkf]  .menu-colonne {
    margin-top: 0;
    border: 0;
    border-top: 1px solid var(--riga);
    border-radius: 0;
}

/* il nome e la matita sulla stessa riga: la matita sta sempre li', non compare al passaggio */
.config-nome[b-8yxz0otnkf] {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
}

.config-modifica[b-8yxz0otnkf] { padding: 0 var(--s1); }
/* /Components/Pages/Configurazione/Funnel/Funnel.razor.rz.scp.css */
.funnel[b-c56ykt4hi6] {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: var(--s4);
    align-items: start;
    margin-top: var(--s3);
}

.funnel-elenco[b-c56ykt4hi6] { min-width: 0; }

/*
    La compatta qui sta da sola sulla pagina, non in una scheda: prende il riquadro delle tabelle di
    configurazione, e il conteggio sotto ("N funnel") sta nella sua fascia invece che sul fondo pagina.
*/
.funnel-elenco[b-c56ykt4hi6]  .tabella-compatta {
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
    overflow: hidden;
}

.funnel-elenco[b-c56ykt4hi6]  .tabella-compatta .paginazione {
    padding: var(--s2) var(--s3);
    border-top: 1px solid var(--riga);
    background: var(--superficie-alt);
}

.funnel-elenco[b-c56ykt4hi6]  .tabella-compatta .menu-colonne {
    margin-top: 0;
    border: 0;
    border-top: 1px solid var(--riga);
    border-radius: 0;
}

.funnel-comandi[b-c56ykt4hi6] { margin-bottom: var(--s2); }

.funnel-dettaglio[b-c56ykt4hi6] { min-width: 0; }

.funnel-testa[b-c56ykt4hi6] { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }

.funnel-azioni[b-c56ykt4hi6] { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }

.funnel-blocco[b-c56ykt4hi6] { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--riga); }

/* la sequenza come linea del tempo: il giorno e l'ora a sinistra, allineati */
.funnel-sequenza[b-c56ykt4hi6] { list-style: none; margin: 0; padding: 0; }

.funnel-passo[b-c56ykt4hi6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) 0;
    border-top: 1px solid var(--riga);
}

.funnel-passo:first-child[b-c56ykt4hi6] { border-top: 0; }

.funnel-quando[b-c56ykt4hi6] { min-width: 140px; color: var(--grigio); font-size: var(--t-piccolo); }

.funnel-modello[b-c56ykt4hi6] { flex: 1 1 160px; }

.funnel-piccolo[b-c56ykt4hi6] { width: auto; }

.funnel-aggancia[b-c56ykt4hi6] { margin-top: var(--s3); }

.funnel-riga[b-c56ykt4hi6] { display: flex; gap: var(--s2); }

.funnel-escludi[b-c56ykt4hi6] { margin-top: var(--s3); }

[b-c56ykt4hi6] .funnel-pausa { color: var(--attesa); }

[b-c56ykt4hi6] tr.aperta td { background: var(--verde-tenue); }

@media (max-width: 1000px) {
    .funnel[b-c56ykt4hi6] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Pages/Configurazione/Funnel/FunnelEsecuzioni.razor.rz.scp.css */
.funnel-numeri[b-rwdnc1ige5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--s3);
    margin: var(--s3) 0;
}

.funnel-numero[b-rwdnc1ige5] {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    padding: var(--s3);
    /* blu in corso, giallo in pausa, verde completate, viola le email (tinta-* in base.css) */
    background: var(--tinta-fondo, var(--superficie));
    border: 1px solid var(--tinta-fondo, var(--riga));
    border-top: 4px solid var(--tinta, var(--riga));
    border-radius: var(--raggio-grande);
}

.funnel-numero .etichetta[b-rwdnc1ige5] { color: var(--tinta, var(--grigio)); }

.funnel-numero .mono[b-rwdnc1ige5] { font-size: var(--t-grande); text-align: right; color: var(--tinta, var(--inchiostro)); }

.funnel-avvia[b-rwdnc1ige5] { margin-bottom: var(--s4); }

.funnel-esecuzioni[b-rwdnc1ige5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4);
}

.funnel-esecuzioni:has(.funnel-dettaglio)[b-rwdnc1ige5] { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

.funnel-elenco[b-rwdnc1ige5] { min-width: 0; }

.funnel-testa[b-rwdnc1ige5] { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }

.funnel-azioni[b-rwdnc1ige5] { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s2) 0; }

.funnel-email[b-rwdnc1ige5] { list-style: none; margin: var(--s3) 0 0; padding: 0; }

.funnel-una[b-rwdnc1ige5] { padding: var(--s3) 0; border-top: 1px solid var(--riga); }

.funnel-una.inviata strong[b-rwdnc1ige5] { color: var(--grigio); }

.funnel-una-testa[b-rwdnc1ige5] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }

.funnel-lettura[b-rwdnc1ige5] {
    max-height: 50vh;
    overflow: auto;
    padding: var(--s3);
    background: var(--superficie-alt);
    border: 1px solid var(--riga);
    border-radius: var(--raggio);
}

.funnel-allegato[b-rwdnc1ige5] { flex-direction: row !important; align-items: center; gap: var(--s2) !important; }

.funnel-allegato a[b-rwdnc1ige5] { flex: 1 1 auto; }

.funnel-blocco[b-rwdnc1ige5] { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--riga); }

[b-rwdnc1ige5] .funnel-link small { display: block; color: var(--grigio); }

[b-rwdnc1ige5] tr.aperta td { background: var(--verde-tenue); }

@media (max-width: 1100px) {
    .funnel-esecuzioni:has(.funnel-dettaglio)[b-rwdnc1ige5] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Pages/Configurazione/Geografia/Geografia.razor.rz.scp.css */
/*
    Le tabelle di configurazione hanno tutte la stessa forma: il pulsante per crearne una, il
    modulo in una finestra sopra, la tabella compatta nel suo riquadro. La compatta non ha un riquadro
    suo perche' di solito sta dentro una scheda: qui e' da sola nella pagina, e prende lo stesso
    aspetto delle tabelle degli elenchi.
*/
.config-azioni[b-7btv3rpepe] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

/*
    Nella finestra i campi stanno in sezioni affiancate quante ne stanno (modulo-colonne, in
    componenti.css), cosi' un campo solo resta largo come una colonna e non diventa una riga
    lunghissima. Dentro la sezione la stessa distanza del modulo (s2).
*/
.config-modulo .modulo-sezione[b-7btv3rpepe] { gap: var(--s2); }

.config-modulo .campo[b-7btv3rpepe] { width: 100%; }

.config-tabella[b-7btv3rpepe] {
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
    overflow: hidden;
}

.config-tabella[b-7btv3rpepe]  .tabella tbody td { padding: var(--s2) var(--s3); }

.config-tabella[b-7btv3rpepe]  .paginazione {
    padding: var(--s2) var(--s3);
    border-top: 1px solid var(--riga);
    background: var(--superficie-alt);
}

.config-tabella[b-7btv3rpepe]  .menu-colonne {
    margin-top: 0;
    border: 0;
    border-top: 1px solid var(--riga);
    border-radius: 0;
}

/*
    il nome e la matita sulla stessa riga: la matita sta sempre li', non compare al passaggio. Piatta e in
    fondo a destra della cella (.in-linea, 06/10/2026), non attaccata al nome: la cella e' larga quanto la colonna
*/
.config-nome[b-7btv3rpepe] {
    display: flex;
    align-items: center;
    gap: var(--s1);
}

.geografia-modulo .etichetta[b-7btv3rpepe] { margin-top: var(--s2); }

/* subito sotto un titolo l'etichetta non si stacca: il titolo e' suo */
.geografia-modulo .pannello-titolo + .etichetta[b-7btv3rpepe],
.geografia-modulo .pannello-titolo + .campi-in-fila > * > .etichetta[b-7btv3rpepe] { margin-top: 0; }

/*
    L'importazione resta nella pagina e ne usa tutta la larghezza: a sinistra il file e la spunta,
    accanto i numeri dell'anteprima. Il pulsante del file resta largo quanto la sua scritta.
*/
.geografia-importa .modulo-sezione > .btn[b-7btv3rpepe] { align-self: flex-start; }

.geografia-spunta[b-7btv3rpepe] {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    cursor: pointer;
}

.geografia-anteprima[b-7btv3rpepe] { margin: var(--s2) 0; }
/* /Components/Pages/Configurazione/Geografia/VieComune.razor.rz.scp.css */
/* le tendine di provincia e comune nella barra: etichetta sopra, a 4px */
.vie-filtro[b-6ob3ogxy8w] { display: flex; flex-direction: column; gap: var(--s1); }

.vie-filtro .etichetta[b-6ob3ogxy8w] { margin: 0; }

.vie-filtro .campo[b-6ob3ogxy8w] { width: auto; min-width: 220px; }
/* /Components/Pages/Configurazione/Impostazioni/Impostazioni.razor.rz.scp.css */
/*
    Le tabelle di configurazione hanno tutte la stessa forma: il pulsante per crearne una, il
    modulo che si apre sotto, la tabella compatta nel suo riquadro. La compatta non ha un riquadro
    suo perche' di solito sta dentro una scheda: qui e' da sola nella pagina, e prende lo stesso
    aspetto delle tabelle degli elenchi.
*/
.config-azioni[b-bbnwwr6ptf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

.config-modulo .campo[b-bbnwwr6ptf] { width: 100%; }

.config-tabella[b-bbnwwr6ptf] {
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
    overflow: hidden;
}

.config-tabella[b-bbnwwr6ptf]  .tabella tbody td { padding: var(--s2) var(--s3); }

.config-tabella[b-bbnwwr6ptf]  .paginazione {
    padding: var(--s2) var(--s3);
    border-top: 1px solid var(--riga);
    background: var(--superficie-alt);
}

.config-tabella[b-bbnwwr6ptf]  .menu-colonne {
    margin-top: 0;
    border: 0;
    border-top: 1px solid var(--riga);
    border-radius: 0;
}

/* il nome e la matita sulla stessa riga: la matita sta sempre li', non compare al passaggio */
.config-nome[b-bbnwwr6ptf] {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
}

.config-modifica[b-bbnwwr6ptf] { padding: 0 var(--s1); }

/*
    Il modulo sta in una finestra sopra l'elenco (FinestraModulo), larga per i valori lunghi
    (chiavi, percorsi, json, prompt): si leggono senza andare a capo a ogni riga.
*/

.impostazione-modulo textarea.campo[b-bbnwwr6ptf] { resize: vertical; font-size: var(--t-piccolo); }

.impostazione-descrizione[b-bbnwwr6ptf] {
    color: var(--grigio);
    font-size: var(--t-micro);
}

.impostazione-valore[b-bbnwwr6ptf] {
    font-size: var(--t-piccolo);
    word-break: break-all;
}
/* /Components/Pages/Configurazione/Indirizzi/IndirizziElenco.razor.rz.scp.css */
/* ::deep perche' le celle le disegna Tabella, che ha il suo ambito */
[b-ygzjag86ip] .indirizzi-vuoto { color: var(--grigio); }

/* l'esito del ricalcolo dallo stradario: elenchi senza pallini, una voce per riga */
.indirizzi-esito[b-ygzjag86ip],
.indirizzi-non-trovati[b-ygzjag86ip] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.indirizzi-non-trovati[b-ygzjag86ip] {
    max-height: 50vh;
    overflow-y: auto;
}

.indirizzi-non-trovati li + li[b-ygzjag86ip] { margin-top: var(--s2); }

[b-ygzjag86ip] .indirizzi-voce:not(:last-child)::after {
    content: ", ";
    color: var(--grigio);
}
/* /Components/Pages/Configurazione/Lavori/ConfigurazioneLavori.razor.rz.scp.css */
/* albero a sinistra, sempre in vista; il lavoro scelto a destra; processi e il resto sotto, larghi */
.lavori[b-urwikeym2t] {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    grid-template-areas: "albero dettaglio" "sotto sotto";
    gap: var(--s4);
    align-items: start;
}

.lavori-albero[b-urwikeym2t] { grid-area: albero; }

.lavori-dettaglio[b-urwikeym2t] { grid-area: dettaglio; }

.lavori-sotto[b-urwikeym2t] { grid-area: sotto; min-width: 0; display: flex; flex-direction: column; gap: var(--s4); }

.lavori-nodi[b-urwikeym2t] {
    list-style: none;
    margin: 0 0 var(--s3);
    padding: 0;
}

.lavori-nodi li[b-urwikeym2t] { padding-left: calc(var(--livello, 0) * var(--s4)); }

.lavori-nodo[b-urwikeym2t] {
    display: flex;
    align-items: center;
    gap: var(--s2);
    width: 100%;
    min-height: var(--alto-controllo);
    padding: 0 var(--s2);
    font: inherit;
    text-align: left;
    color: var(--inchiostro);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--raggio);
    cursor: pointer;
}

.lavori-nodo:hover[b-urwikeym2t] { background: var(--superficie-alt); }

/* lo scelto si riconosce dal fondo e dal bordo, non dal grassetto: il testo non si allarga */
.lavori-nodo.scelto[b-urwikeym2t] {
    background: var(--verde-tenue);
    border-color: var(--verde);
}

.lavori-nodo-nome[b-urwikeym2t] { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lavori-nodo-conta[b-urwikeym2t] { color: var(--grigio); font-size: var(--t-piccolo); }

.lavori-maschera[b-urwikeym2t] { max-width: none; gap: var(--s3); }

.lavori-descrizione[b-urwikeym2t] { height: auto; padding-top: var(--s1); resize: vertical; }

.lavori-spunte[b-urwikeym2t],
.lavori-azioni[b-urwikeym2t] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
}

.lavori-azioni[b-urwikeym2t] { margin-top: var(--s3); }

.lavori-due[b-urwikeym2t] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--s4);
    align-items: start;
}

.lavori-servizio[b-urwikeym2t] { margin-top: var(--s3); }

[b-urwikeym2t] .lavori-riga-tasti { display: inline-flex; gap: var(--s1); }

@media (max-width: 900px) {
    .lavori[b-urwikeym2t] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "albero" "dettaglio" "sotto";
    }
}
/* /Components/Pages/Configurazione/Lavori/ProcessiLavoro.razor.rz.scp.css */
.processi[b-4df17zq6qy] { min-width: 0; }

.processi-testa[b-4df17zq6qy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    margin-bottom: var(--s2);
}

.processi-testa .scheda-titolo[b-4df17zq6qy] { margin: 0; }

.processi-legenda[b-4df17zq6qy] { margin-bottom: var(--s3); font-size: var(--t-piccolo); }

.processi-legenda summary[b-4df17zq6qy] { cursor: pointer; color: var(--grigio); }

.processi-legenda .coppie[b-4df17zq6qy] { margin-top: var(--s2); }

[b-4df17zq6qy] .processi-nome { display: flex; flex-direction: column; gap: 2px; }

[b-4df17zq6qy] .processi-nome small { color: var(--grigio); }

[b-4df17zq6qy] .processi-nome .processi-errore { color: var(--allarme); }

[b-4df17zq6qy] .processi-piccolo { width: auto; min-width: 52px; padding: 0 var(--s1); }

[b-4df17zq6qy] .processi-cella { display: inline-flex; align-items: center; gap: var(--s1); }

[b-4df17zq6qy] .processi-percentuali { display: inline-flex; gap: 2px; }

[b-4df17zq6qy] .processi-spunta { accent-color: var(--verde); }

[b-4df17zq6qy] .lavori-riga-tasti { display: inline-flex; gap: var(--s1); }

.processi-pannello-testa[b-4df17zq6qy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s3);
}

.processi-schede[b-4df17zq6qy] { display: flex; gap: var(--s1); flex: 1 1 auto; }

.processi-schede .btn[aria-pressed="true"][b-4df17zq6qy] { border-color: var(--verde); background: var(--verde-tenue); }

/* /Components/Pages/Configurazione/LogTelefoni/LogTelefoni.razor.rz.scp.css */
/*
    I log dei telefoni (05/10/2026). La riga del telefono scelto si riconosce dal fondo, ma il nome resta
    anche nel titolo del riepilogo: il colore non e' mai da solo.
*/
[b-4xmwsfabeq] .log-telefono-scelto > td { background: var(--superficie-alt); }

/* il pulsante e la sua scritta: la scritta ha il suo posto anche vuota, il pulsante non si sposta */
[b-4xmwsfabeq] .log-chiedi {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
}

[b-4xmwsfabeq] .log-richiesti {
    display: inline-block;
    min-width: 15ch;
    color: var(--grigio);
    font-size: var(--t-micro);
    font-variant-numeric: tabular-nums;
}

/* i livelli che non sono uno stato vero: neutri, come i tipi dello storico senza colore */
[b-4xmwsfabeq] .log-livello-neutro {
    color: var(--grigio);
    background: var(--superficie-alt);
    box-shadow: inset 0 0 0 1px var(--riga);
}

[b-4xmwsfabeq] .log-riquadro { margin-top: var(--s5); }

[b-4xmwsfabeq] .log-coppie { max-width: 720px; }

[b-4xmwsfabeq] .log-riquadro .pannello-titolo { margin: var(--s5) 0 var(--s2); }

.log-cerca[b-4xmwsfabeq] { flex: 1 1 260px; }

.log-cerca .campo[b-4xmwsfabeq] { width: 100%; }

.log-prima[b-4xmwsfabeq] {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin-bottom: var(--s2);
}

.log-prima .pannello-nota[b-4xmwsfabeq] { margin: 0; }

/*
    Le righe del log: ora, livello, testo. L'ora e il livello hanno una colonna di larghezza fissa,
    cosi' i testi si incolonnano; il testo va a capo dove l'app l'ha mandato (le eccezioni hanno piu' righe).
*/
.log-righe[b-4xmwsfabeq] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 70vh;
    overflow-y: auto;
    border: 1px solid var(--riga);
    border-radius: var(--raggio);
    background: var(--superficie);
    font-size: var(--t-piccolo);
}

.log-riga[b-4xmwsfabeq] {
    display: grid;
    grid-template-columns: 9ch 8ch minmax(0, 1fr);
    align-items: baseline;
    gap: var(--s2);
    padding: var(--s1) var(--s2);
    border-bottom: 1px solid var(--riga);
}

.log-riga:last-child[b-4xmwsfabeq] { border-bottom: 0; }

.log-ora[b-4xmwsfabeq] { color: var(--grigio); font-variant-numeric: tabular-nums; }

.log-riga .stato[b-4xmwsfabeq] { justify-self: start; }

[b-4xmwsfabeq] .log-testo,
.log-testo[b-4xmwsfabeq] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .log-riga[b-4xmwsfabeq] { grid-template-columns: 9ch minmax(0, 1fr); }

    .log-riga .log-testo[b-4xmwsfabeq] { grid-column: 1 / -1; }
}
/* /Components/Pages/Configurazione/Modelli/Modelli.razor.rz.scp.css */
.modelli[b-4g75acgc6b] {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s4);
    align-items: start;
    margin-top: var(--s3);
}

.modelli-elenco[b-4g75acgc6b] { min-width: 0; }

/*
    La compatta qui sta da sola sulla pagina, non in una scheda: prende il riquadro delle tabelle di
    configurazione, e il conteggio sotto ("N modelli") sta nella sua fascia invece che sul fondo pagina.
*/
.modelli-elenco[b-4g75acgc6b]  .tabella-compatta {
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
    overflow: hidden;
}

.modelli-elenco[b-4g75acgc6b]  .tabella-compatta .paginazione {
    padding: var(--s2) var(--s3);
    border-top: 1px solid var(--riga);
    background: var(--superficie-alt);
}

.modelli-elenco[b-4g75acgc6b]  .tabella-compatta .menu-colonne {
    margin-top: 0;
    border: 0;
    border-top: 1px solid var(--riga);
    border-radius: 0;
}

.modelli-editor[b-4g75acgc6b] { min-width: 0; }

.modelli-maschera[b-4g75acgc6b] { max-width: none; gap: var(--s3); }

.modelli-testo[b-4g75acgc6b] { height: auto; padding-top: var(--s1); resize: vertical; font-family: var(--mono); }

.modelli-segnaposto[b-4g75acgc6b] {
    margin-bottom: var(--s3);
    padding: var(--s2) var(--s3);
    background: var(--superficie-alt);
    border: 1px solid var(--riga);
    border-radius: var(--raggio);
    font-size: var(--t-piccolo);
}

.modelli-azioni[b-4g75acgc6b] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-top: var(--s3);
}

.modelli-allegati[b-4g75acgc6b] {
    margin-top: var(--s4);
    padding-top: var(--s3);
    border-top: 1px solid var(--riga);
}

.modelli-allegato[b-4g75acgc6b] {
    flex-direction: row !important;
    align-items: center;
    gap: var(--s2) !important;
}

.modelli-allegato a[b-4g75acgc6b] { flex: 1 1 auto; }

.modelli-peso[b-4g75acgc6b] { color: var(--grigio); }

/*
    Il nome del modello e' un link su una riga sola, coi puntini se e' lungo (05/10/2026): intero nel
    title. Con line-clamp e non con nowrap: la colonna si stringe come le altre (equilibraTabelle
    misura la larghezza minima), e il taglio lo fa il disegno.
*/
[b-4g75acgc6b] .modelli-apri {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
}

[b-4g75acgc6b] tr.aperta td { background: var(--verde-tenue); }

@media (max-width: 900px) {
    .modelli[b-4g75acgc6b] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Pages/Configurazione/NumeriAssistenza/NumeriAssistenzaElenco.razor.rz.scp.css */
/* come le altre tabelle di configurazione: il nome e la matita sulla stessa riga, la matita sempre li' */
.config-nome[b-c06okd9u4v] {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
}

.config-modifica[b-c06okd9u4v] { padding: 0 var(--s1); }

.barra-filtri[b-c06okd9u4v] { margin-bottom: var(--s3); }

.numeri-modulo .campo[b-c06okd9u4v] { width: 100%; }
/* /Components/Pages/Configurazione/ProblemiSiti/ProblemiSiti.razor.rz.scp.css */
/*
    Le tabelle di configurazione hanno tutte la stessa forma: il pulsante per crearne una, il
    modulo in una finestra sopra, la tabella compatta nel suo riquadro. La compatta non ha un riquadro
    suo perche' di solito sta dentro una scheda: qui e' da sola nella pagina, e prende lo stesso
    aspetto delle tabelle degli elenchi.
*/
.config-azioni[b-gjyvaeog9c] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

/*
    Nella finestra i campi stanno in sezioni affiancate quante ne stanno (modulo-colonne, in
    componenti.css), cosi' un campo solo resta largo come una colonna e non diventa una riga
    lunghissima. Dentro la sezione la stessa distanza del modulo (s2).
*/
.config-modulo .modulo-sezione[b-gjyvaeog9c] { gap: var(--s2); }

.config-modulo .campo[b-gjyvaeog9c] { width: 100%; }

.config-tabella[b-gjyvaeog9c] {
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
    overflow: hidden;
}

.config-tabella[b-gjyvaeog9c]  .tabella tbody td { padding: var(--s2) var(--s3); }

.config-tabella[b-gjyvaeog9c]  .paginazione {
    padding: var(--s2) var(--s3);
    border-top: 1px solid var(--riga);
    background: var(--superficie-alt);
}

.config-tabella[b-gjyvaeog9c]  .menu-colonne {
    margin-top: 0;
    border: 0;
    border-top: 1px solid var(--riga);
    border-radius: 0;
}

/* il nome e la matita sulla stessa riga: la matita sta sempre li', non compare al passaggio */
.config-nome[b-gjyvaeog9c] {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
}

.config-modifica[b-gjyvaeog9c] { padding: 0 var(--s1); }

.config-modulo .etichetta[b-gjyvaeog9c] { margin-top: var(--s2); }

/* subito sotto un titolo l'etichetta non si stacca: il titolo e' suo */
.config-modulo .pannello-titolo + .etichetta[b-gjyvaeog9c],
.config-modulo .pannello-titolo + .campi-in-fila > * > .etichetta[b-gjyvaeog9c] { margin-top: 0; }

/* la descrizione in due righe: intera si legge nel modulo */
.problema-descrizione[b-gjyvaeog9c] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--grigio);
    font-size: var(--t-piccolo);
}

.problema-immagine[b-gjyvaeog9c] {
    display: block;
    width: 100px;
    height: 60px;
    object-fit: cover;
    border: 1px solid var(--riga);
    border-radius: var(--raggio);
}
/* /Components/Pages/Configurazione/Punteggio/Punteggio.razor.rz.scp.css */
/*
    Le tabelle di configurazione hanno tutte la stessa forma: il pulsante per crearne una, il
    modulo che si apre sotto, la tabella compatta nel suo riquadro. La compatta non ha un riquadro
    suo perche' di solito sta dentro una scheda: qui e' da sola nella pagina, e prende lo stesso
    aspetto delle tabelle degli elenchi.
*/
.config-azioni[b-jyron78phi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

.config-tabella[b-jyron78phi] {
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
    overflow: hidden;
}

.config-tabella[b-jyron78phi]  .tabella tbody td { padding: var(--s2) var(--s3); }

.config-tabella[b-jyron78phi]  .paginazione {
    padding: var(--s2) var(--s3);
    border-top: 1px solid var(--riga);
    background: var(--superficie-alt);
}

.config-tabella[b-jyron78phi]  .menu-colonne {
    margin-top: 0;
    border: 0;
    border-top: 1px solid var(--riga);
    border-radius: 0;
}

/* il nome e la matita sulla stessa riga: la matita sta sempre li', non compare al passaggio */
.config-nome[b-jyron78phi] {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
}

.config-modifica[b-jyron78phi] { padding: 0 var(--s1); }

/* la spiegazione aperta dalla "i": una nota della pagina, sopra la tabella */
.punteggio-spiega[b-jyron78phi] {
    margin: 0 0 var(--s3);
    font-size: var(--t-piccolo);
}

.punteggio-criterio[b-jyron78phi] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.punteggio-criterio small[b-jyron78phi] {
    color: var(--grigio);
    font-size: var(--t-micro);
}

.punteggio-criterio small.punteggio-errore[b-jyron78phi] { color: var(--allarme); font-weight: 600; }

/* la riga rossa: il colore accompagna il testo scritto nella cella, non lo sostituisce */
.config-tabella[b-jyron78phi]  tr.punteggio-senza-calcolo td { background: var(--allarme-fondo); }

.punteggio-numero[b-jyron78phi] {
    width: 96px;
    text-align: right;
}

.punteggio-avviso[b-jyron78phi] { color: var(--attesa); }

.config-tabella + p[b-jyron78phi] { margin: var(--s2) 0 var(--s3); }
/* /Components/Pages/Configurazione/QualitaDati/Anomalie.razor.rz.scp.css */
.qualita-nota[b-kzkkv8wkug] { max-width: 72ch; }

/* le correzioni di gruppo in una riga, sopra l'elenco a cui si applicano */
.qualita-gruppo[b-kzkkv8wkug] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

.qualita-manuale[b-kzkkv8wkug] { margin-bottom: var(--s3); }

.qualita-campo[b-kzkkv8wkug] {
    margin: 0 0 var(--s2);
    padding: 0;
    border: 0;
}

.qualita-campo .scelta[b-kzkkv8wkug] { display: block; }

/* ::deep perche' le celle le disegna Tabella: le correzioni di una riga una sotto l'altra, sono alternative */
[b-kzkkv8wkug] .qualita-correzioni {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s2);
    padding-block: var(--s1);
}

/* tutti dallo stesso punto e larghi uguali (il piu' largo comanda), il testo a sinistra */
[b-kzkkv8wkug] .qualita-correzioni > .btn {
    margin: 0;
    justify-content: flex-start;
    text-align: left;
}

[b-kzkkv8wkug] .qualita-data {
    display: block;
    color: var(--grigio);
    font-size: var(--t-micro);
}
/* /Components/Pages/Configurazione/Rubrica/RubricaElenco.razor.rz.scp.css */
/* ::deep perche' le celle le disegna Tabella, che ha il suo ambito */
[b-w4grblqwa2] .rubrica-vuoto { color: var(--grigio); }

[b-w4grblqwa2] .rubrica-voce:not(:last-child)::after {
    content: ", ";
    color: var(--grigio);
}

/* la voce incompleta ha un filo rosso a sinistra; la colonna Completa lo scrive a parole */
[b-w4grblqwa2] tr.riga-incompleta td:first-child { box-shadow: inset 3px 0 0 var(--allarme); }
/* /Components/Pages/Configurazione/Rubrica/RubricaScheda.razor.rz.scp.css */
/* come raggiungerlo di lato, a chi e' legato al centro */
.rubrica-scheda[b-f5y3x6x0a8] {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: var(--s4);
    align-items: start;
    margin-top: var(--s3);
}

.rubrica-scheda aside > .scheda + .scheda[b-f5y3x6x0a8] { margin-top: var(--s3); }

@media (max-width: 900px) {
    .rubrica-scheda[b-f5y3x6x0a8] { grid-template-columns: minmax(0, 1fr); }
}

.rubrica-sotto[b-f5y3x6x0a8] {
    margin: var(--s3) 0 var(--s1);
    font-size: var(--t-piccolo);
    color: var(--grigio);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.rubrica-trovati li[b-f5y3x6x0a8] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s2);
}

/* dal modulo alla scheda, nella finestra: un collegamento discreto sopra il modulo */
.rubrica-alla-scheda[b-f5y3x6x0a8] { margin: 0 0 var(--s2); font-size: var(--t-piccolo); }

/* tutti i recapiti della voce, uno per riga, il principale primo (05/10/2026) */
.rubrica-recapiti[b-f5y3x6x0a8],
[b-f5y3x6x0a8] .rubrica-recapiti {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s1);
}

/* un numero e accanto le sue chiamate (06/10/2026); vanno sotto il numero solo se non ci stanno */
.rubrica-numero[b-f5y3x6x0a8] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--s2);
}

/* il totale della voce, con piu' numeri: in piccolo come i contatori, staccato dall'ultimo numero */
.rubrica-numeri-totale[b-f5y3x6x0a8] {
    margin-top: var(--s1);
    color: var(--grigio);
    font-size: var(--t-piccolo);
}

/* ogni numero ed email con la sua matita (08/10/2026): la riga si allarga perche' la matita stia a destra, come negli altri campi */
[b-f5y3x6x0a8] .rubrica-recapiti > .in-linea { align-self: stretch; }

/* le email delle campagne ricevute dal contatto (14/10/2026) */
.rubrica-campagne[b-f5y3x6x0a8] {
    list-style: none;
    margin: var(--s3) 0 0;
    padding: 0;
}

.rubrica-campagne li[b-f5y3x6x0a8] {
    display: flex;
    flex-direction: column;
    padding: var(--s1) 0;
    border-top: 1px solid var(--riga);
}
/* /Components/Pages/Configurazione/Rubrica/UnioneRubrica.razor.rz.scp.css */
/* ogni campo in conflitto e' un gruppo di due scelte: niente cornice del browser, solo lo spazio fra un campo e l'altro */
.unione-campo[b-bmum0v72uj] {
    margin: 0 0 var(--s2);
    padding: 0;
    border: 0;
}

.unione-campo .scelta[b-bmum0v72uj] { display: block; }
/* /Components/Pages/Configurazione/SitiDoweb/SitiDowebElenco.razor.rz.scp.css */
/*
    L'elenco dei siti DOWEB: sopra la tabella la fila delle tendine, che restano al loro posto
    anche quando sono vuote, e le celle su misura - la scadenza con la data accanto, la tendina
    della tipologia dentro la riga.
*/

.siti-nota[b-1k403ds9yp] {
    color: var(--grigio);
    font-size: var(--t-piccolo);
}

.siti-filtro[b-1k403ds9yp] {
    display: flex;
    flex-direction: column;
    min-width: 160px;
}

.siti-filtro .campo[b-1k403ds9yp] { max-width: 240px; }

.siti-filtro-tasto[b-1k403ds9yp] { min-width: 0; }

.siti-scadenza[b-1k403ds9yp] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.siti-scadenza-riga[b-1k403ds9yp] {
    display: inline-flex;
    align-items: baseline;
    gap: var(--s1);
    white-space: nowrap;
}

/* i giorni accanto alla data: senza la larghezza minima delle colonne di giorni */
.siti-scadenza-riga[b-1k403ds9yp]  .giorni { min-width: 0; }

.siti-scadenza-dominio[b-1k403ds9yp] {
    font-family: var(--testo);
    font-size: var(--t-micro);
    color: var(--grigio);
    white-space: nowrap;
}

/* nel riquadro la scadenza sta a sinistra, come gli altri valori della tabellina */
.siti-elenco[b-1k403ds9yp]  .riquadro-lato .siti-scadenza { align-items: flex-start; }

/* la tendina nella riga prende la cella, senza allargare la colonna */
.siti-tipologia[b-1k403ds9yp] {
    width: 100%;
    min-width: 0;
}

@media (max-width: 600px) {
    .siti-filtro[b-1k403ds9yp] { min-width: 0; flex: 1 1 140px; }
}

/* la tabellina del riquadro su una colonna sola, come nella coda: i valori si leggono interi */
.siti-elenco[b-1k403ds9yp]  .riquadro-lato { grid-template-columns: minmax(0, 1fr); }

.siti-elenco[b-1k403ds9yp]  .riquadro-lato-cella { width: 390px; }

.siti-elenco[b-1k403ds9yp]  .riquadro-coppia { grid-template-columns: 130px minmax(0, 1fr); }

/*
    In testa allo storico: il nome del lead, piu' grande e in grassetto, e sotto la ragione sociale,
    piccola e tenue, attaccata a lui. Si staccano dai commenti sotto senza prendere posto.
*/
.siti-elenco[b-1k403ds9yp]  .riquadro-titolo-cella .siti-lead-nome { font-size: var(--t-medio); font-weight: 700; }

/* nell'elenco il nome e' un valore come gli altri della riga: la sua misura, senza grassetto */
.siti-lead-nome[b-1k403ds9yp] { font-weight: 400; }

.siti-lead-societa[b-1k403ds9yp] { display: block; margin-top: calc(-1 * var(--s1)); color: var(--grigio); font-size: var(--t-micro); }

/* il segno di chi telefona (28/10/2026): grigio spento, verde acceso come la riga */
.siti-segno[aria-pressed="true"][b-1k403ds9yp] {
    color: var(--fatto);
}
/* /Components/Pages/Configurazione/SitiDoweb/SitiEliminatiElenco.razor.rz.scp.css */
/* Siti eliminati: il testo che dice che un dato manca, piu' tenue del dato */
.eliminati-tenue[b-tkqbrdu3in] { color: var(--grigio); }

/* il nome e il dominio accanto, staccati: Razor toglie lo spazio fra i due (16/10/2026, il committente: "appiccicato") */
.eliminati-sito[b-tkqbrdu3in] { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s2); }
/* /Components/Pages/Configurazione/SitiDoweb/SitoDowebScheda.razor.rz.scp.css */
/*
    La scheda di un sito DOWEB. Al centro lo stato del servizio e chi entra nel pannello, di lato
    chi e' il cliente. Sul telefono il lato va sopra: li' si apre la scheda per sapere di chi e' il
    sito e se chiamarlo.
*/

.sd-scheda[b-gmym5dxbgz] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(360px, 32%, 560px);
    grid-template-areas: "centro lato";
    gap: var(--s4);
    align-items: start;
}

.sd-centro[b-gmym5dxbgz] { grid-area: centro; min-width: 0; }

.sd-lato[b-gmym5dxbgz] { grid-area: lato; min-width: 0; }

@media (max-width: 900px) {
    .sd-scheda[b-gmym5dxbgz] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "lato" "centro";
    }
}

/* i pulsanti della trattativa sotto i dati del lead */
.sd-trattativa[b-gmym5dxbgz] { display: flex; gap: var(--s2); margin-top: var(--s3); }

.sd-vuoto[b-gmym5dxbgz] {
    margin: 0;
    color: var(--grigio);
    font-size: var(--t-piccolo);
}

.sd-nota[b-gmym5dxbgz] {
    margin: var(--s1) 0 var(--s3);
    color: var(--grigio);
    font-size: var(--t-piccolo);
}

.sd-testo[b-gmym5dxbgz] {
    font-size: var(--t-piccolo);
    white-space: normal;
}

/* il glifo accanto a ogni problema: il colore da solo non direbbe che e' un difetto */
.sd-voci[b-gmym5dxbgz] {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--t-piccolo);
}

.sd-voci li span[b-gmym5dxbgz] {
    color: var(--allarme);
    font-size: var(--t-micro);
    margin-right: var(--s1);
}

.sd-indirizzo[b-gmym5dxbgz] {
    display: flex;
    flex-direction: column;
    font-style: normal;
}
/* /Components/Pages/Configurazione/Testi/Testi.razor.rz.scp.css */
/*
    Le tabelle di configurazione hanno tutte la stessa forma: il pulsante per crearne una, il
    modulo in una finestra sopra, la tabella compatta nel suo riquadro. La compatta non ha un riquadro
    suo perche' di solito sta dentro una scheda: qui e' da sola nella pagina, e prende lo stesso
    aspetto delle tabelle degli elenchi.
*/
.config-azioni[b-2cdhm9wzdm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

/* la nota accanto ai pulsanti: nel suo riquadro, alla loro altezza */
.config-azioni > .nota-pagina[b-2cdhm9wzdm] { margin: 0; }

.config-modulo .campo[b-2cdhm9wzdm] { width: 100%; }

.config-tabella[b-2cdhm9wzdm] {
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
    overflow: hidden;
}

.config-tabella[b-2cdhm9wzdm]  .tabella tbody td { padding: var(--s2) var(--s3); }

.config-tabella[b-2cdhm9wzdm]  .paginazione {
    padding: var(--s2) var(--s3);
    border-top: 1px solid var(--riga);
    background: var(--superficie-alt);
}

.config-tabella[b-2cdhm9wzdm]  .menu-colonne {
    margin-top: 0;
    border: 0;
    border-top: 1px solid var(--riga);
    border-radius: 0;
}

/* il nome e la matita sulla stessa riga: la matita sta sempre li', non compare al passaggio */
.config-nome[b-2cdhm9wzdm] {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
}

.config-modifica[b-2cdhm9wzdm] { padding: 0 var(--s1); }

/* il testo e' HTML lungo: la finestra e' larga (Larga) e il campo si allunga a mano */
.testi-modulo textarea.campo[b-2cdhm9wzdm] { resize: vertical; }

/* il testo e' HTML: si mostra come testo, su due righe, e intero nel title e nel modulo */
.testi-anteprima[b-2cdhm9wzdm] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--grigio);
    font-size: var(--t-piccolo);
    word-break: break-word;
}
/* /Components/Pages/Configurazione/TipologieSiti/TipologieSiti.razor.rz.scp.css */
/*
    Le tabelle di configurazione hanno tutte la stessa forma: il pulsante per crearne una, il
    modulo in una finestra sopra, la tabella compatta nel suo riquadro. La compatta non ha un riquadro
    suo perche' di solito sta dentro una scheda: qui e' da sola nella pagina, e prende lo stesso
    aspetto delle tabelle degli elenchi.
*/
.config-azioni[b-jc9optfniu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

/*
    Nella finestra i campi stanno in sezioni affiancate quante ne stanno (modulo-colonne, in
    componenti.css), cosi' un campo solo resta largo come una colonna e non diventa una riga
    lunghissima. Dentro la sezione la stessa distanza del modulo (s2).
*/
.config-modulo .modulo-sezione[b-jc9optfniu] { gap: var(--s2); }

.config-modulo .campo[b-jc9optfniu] { width: 100%; }

.config-tabella[b-jc9optfniu] {
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
    overflow: hidden;
}

.config-tabella[b-jc9optfniu]  .tabella tbody td { padding: var(--s2) var(--s3); }

.config-tabella[b-jc9optfniu]  .paginazione {
    padding: var(--s2) var(--s3);
    border-top: 1px solid var(--riga);
    background: var(--superficie-alt);
}

.config-tabella[b-jc9optfniu]  .menu-colonne {
    margin-top: 0;
    border: 0;
    border-top: 1px solid var(--riga);
    border-radius: 0;
}

/* il nome e la matita sulla stessa riga: la matita sta sempre li', non compare al passaggio */
.config-nome[b-jc9optfniu] {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
}

.config-modifica[b-jc9optfniu] { padding: 0 var(--s1); }
/* /Components/Pages/Configurazione/Utenti/DatiUtente.razor.rz.scp.css */
/*
    Il modulo a sinistra, foto e password a destra; sul telefono uno sotto l'altro. Il modulo prende
    tutto lo spazio che resta: le sue sezioni si affiancano quante ne stanno (modulo-colonne, in
    componenti.css), cosi' non resta una colonna stretta con il vuoto accanto e il Salva si vede
    senza scorrere.
*/
.dati-utente[b-nvr0gho5d0] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: var(--s4);
    align-items: start;
}

/* l'utente nuovo non ha ancora foto e lato: il modulo prende tutta la larghezza, senza una colonna vuota a destra */
.dati-utente:not(:has(> .dati-utente-lato))[b-nvr0gho5d0] { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 1000px) {
    .dati-utente[b-nvr0gho5d0] { grid-template-columns: minmax(0, 1fr); }
}

.modulo-utente[b-nvr0gho5d0],
.dati-utente-lato .scheda[b-nvr0gho5d0] {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
}

.dati-utente-lato[b-nvr0gho5d0] {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
}

.modulo-utente .campo[b-nvr0gho5d0],
.dati-utente-lato .campo[b-nvr0gho5d0] { width: 100%; }

/*
    Le sezioni del modulo prendono gli stacchi da componenti.css (modulo-sezione). Il lato e' una
    colonna sua: l'intervallo (s1) fa da distanza fra l'etichetta e il suo campo, il margine sopra
    la stacca dal campo di prima, e subito sotto un titolo non si stacca: il titolo e' suo.
*/
.dati-utente-lato > .etichetta[b-nvr0gho5d0] { margin-top: var(--s2); margin-bottom: 0; }

.dati-utente-lato > .pannello-titolo + .etichetta[b-nvr0gho5d0] { margin-top: 0; }

/* la firma e' codice HTML: piu' piccolo, ci stanno le righe intere */
.modulo-utente textarea.campo[b-nvr0gho5d0] { resize: vertical; font-size: var(--t-micro); }

.facoltativo[b-nvr0gho5d0] {
    color: var(--grigio);
    font-weight: normal;
    text-transform: none;
    letter-spacing: 0;
}

/*
    Le spunte in una tabellina come i permessi (05/10/2026): la casella in una colonna stretta e fissa (il
    "Si"/"No" accanto non sposta niente), il nome, e a destra cosa cambia. L'intestazione non resta
    attaccata in alto: la tabellina sta in mezzo al modulo, non e' un elenco che scorre.
*/
.spunte-utente thead th[b-nvr0gho5d0] { position: static; }

.spunte-utente .spunta-casella[b-nvr0gho5d0] {
    width: 90px;
    white-space: nowrap;
}

.spunte-utente .spunta-nome[b-nvr0gho5d0] {
    width: 26ch;
    font-weight: 700;
    text-align: left;
}

/* la pillola della casella sta nella riga della tabella, senza l'altezza dei controlli del modulo */
.spunte-utente .scelta[b-nvr0gho5d0] { min-height: 0; }

/*
    Il nome del gruppo sta col suo gruppo, come nelle notifiche: 32px dal gruppo prima, 8px dalla sua
    prima riga, un filo sotto.
*/
.spunte-utente tr.area th[b-nvr0gho5d0] {
    padding: var(--s6) var(--s3) var(--s2);
    border-bottom: 1px solid var(--riga);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--grigio);
    text-align: left;
    background: var(--superficie);
}

.spunte-utente tbody:first-of-type tr.area th[b-nvr0gho5d0] { padding-top: var(--s3); }

/* il nome e' un th: spazio, filo, righe alterne e puntatore glieli da' componenti.css, come alle td */

/*
    Sul telefono la descrizione va sotto il nome: casella a sinistra, nome e descrizione uno sopra
    l'altro accanto. L'intestazione resta per lo screen reader.
*/
@media (max-width: 640px) {
    .spunte-utente thead[b-nvr0gho5d0] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .spunte-utente[b-nvr0gho5d0],
    .spunte-utente tbody[b-nvr0gho5d0] { display: block; }

    .spunte-utente tbody tr:not(.area)[b-nvr0gho5d0] {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        border-bottom: 1px solid var(--riga);
    }

    .spunte-utente tbody tr:not(.area):last-child[b-nvr0gho5d0] { border-bottom: 0; }

    .spunte-utente tbody tr:not(.area) > *[b-nvr0gho5d0] { border-bottom: 0; }

    .spunte-utente .spunta-casella[b-nvr0gho5d0] {
        grid-row: span 2;
        width: auto;
        padding-right: var(--s2);
    }

    .spunte-utente .spunta-nome[b-nvr0gho5d0] { width: auto; padding-bottom: 0; padding-left: 0; }

    .spunte-utente .spunta-descrizione[b-nvr0gho5d0] { padding-top: var(--s1); padding-left: 0; }

    .spunte-utente tr.area[b-nvr0gho5d0] { display: block; }

    .spunte-utente tr.area th[b-nvr0gho5d0] { display: block; }
}

.foto-utente[b-nvr0gho5d0] {
    width: 150px;
    height: 150px;
    margin-bottom: var(--s2);
}

.foto-utente img[b-nvr0gho5d0] {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: var(--raggio-grande);
    border: 1px solid var(--riga);
}

.foto-vuota[b-nvr0gho5d0] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    border: 1px dashed var(--riga);
    border-radius: var(--raggio-grande);
    color: var(--grigio);
    font-size: var(--t-piccolo);
}
/* /Components/Pages/Configurazione/Utenti/DispositiviUtenti.razor.rz.scp.css */
/*
    I due riquadri affiancati come in WK, larghi secondo quello che contengono e insieme tutta la riga
    (02/10/2026): i telefoni hanno piu' colonne e prendono piu' spazio, non la meta' fissa. Sul
    telefono uno sotto l'altro.
*/
.adesso[b-efhy0v13zc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4);
    margin-bottom: var(--s4);
}

/*
    Uno sotto l'altro anche da scrivania (06/10/2026, deciso dal committente): prima i telefoni con l'app,
    sotto le postazioni accese, ognuno largo tutta la riga. Affiancati i telefoni andavano a capo e scorrevano.
*/

.adesso-aggiorna[b-efhy0v13zc] { margin-top: var(--s2); }

.non-la-dice[b-efhy0v13zc] { color: var(--grigio); }

/* la mappa dell'ultima posizione di un telefono (01/10/2026): larga quanto la finestra, alta il giusto */
.mappa-telefono-cornice[b-efhy0v13zc] {
    display: block;
    width: 100%;
    height: min(60vh, 480px);
    border: 1px solid var(--riga);
    border-radius: var(--raggio);
}

/*
    La chiamata in corso (06/10/2026): sopra lo stato e la durata che scorre, sotto con chi.
    07/10/2026, il committente: "sistema anche allineamento". Il badge e' un evidenziatore: il suo
    fondo sporge di quanto e' il suo margine interno, sopra e sotto uguale, e la parola sta sulla riga
    del testo delle altre celle. Con chi parte dove parte la parola del badge, non dal bordo del fondo.
*/
.in-chiamata[b-efhy0v13zc] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s1);
}

.in-chiamata-testa[b-efhy0v13zc] {
    display: inline-flex;
    align-items: baseline;
    gap: var(--s2);
}

.in-chiamata-testa .stato[b-efhy0v13zc] {
    padding-block: 2px;
    margin-block: -2px;
}

.in-chiamata-chi[b-efhy0v13zc] { padding-left: var(--s2); }
/* /Components/Pages/Configurazione/Utenti/ElencoAccessi.razor.rz.scp.css */
/* le date e il CSV sopra la tabella, sempre nello stesso posto */
.accessi-csv[b-2isa5caire] { margin-left: auto; }
/* /Components/Pages/Configurazione/Utenti/NotificheUtenti.razor.rz.scp.css */
/* la persona: un nome, non serve tutta la riga */
.notifiche-utente[b-knmj78xcw9] { max-width: 28rem; }
/* /Components/Pages/Configurazione/Utenti/PresenzeUtente.razor.rz.scp.css */
.presenze-barra[b-5pe9fnncx4] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--s3);
    margin-bottom: var(--s3);
}

.presenze-barra select.campo[b-5pe9fnncx4] { width: auto; min-width: 170px; }

/* il giorno aperto si riconosce anche dal titolo del riquadro sotto, che lo scrive */
.presenze-giorni[b-5pe9fnncx4]  tr.giorno-aperto td { background: var(--superficie-alt); }

.blocchi[b-5pe9fnncx4] { margin-top: var(--s4); }

.blocchi-giorno[b-5pe9fnncx4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

.blocchi-giorno .etichetta[b-5pe9fnncx4] { margin: 0; }

.blocco-azioni[b-5pe9fnncx4] { display: inline-flex; gap: var(--s1); }

.ora[b-5pe9fnncx4] { width: 80px; }

.tariffa[b-5pe9fnncx4] { width: 90px; }

.blocco-nuovo[b-5pe9fnncx4] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--s2);
}
/* /Components/Pages/Configurazione/Utenti/PresenzeUtenti.razor.rz.scp.css */
.ore-barra[b-23hgzju7eq] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--s3);
    margin-bottom: var(--s3);
}

.ore-barra .pannello-nota[b-23hgzju7eq] { margin: 0; }

/* il grafico scorre da solo se i giorni sono tanti: la pagina non si allarga */
.ore-grafico[b-23hgzju7eq] {
    overflow-x: auto;
    max-width: 100%;
}

/* a misura naturale, senza allargarsi: le scritte restano a 11px; se non ci sta, scorre di lato */
.ore-grafico svg[b-23hgzju7eq] { display: block; }

.ore-griglia[b-23hgzju7eq] { stroke: var(--riga); stroke-width: 1; }

.ore-asse[b-23hgzju7eq] { fill: var(--grigio); font-size: 13px; font-family: var(--mono); }

.ore-legenda[b-23hgzju7eq] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1) var(--s3);
    list-style: none;
    margin: var(--s2) 0 var(--s3);
    padding: 0;
    font-size: var(--t-piccolo);
}

.ore-legenda li[b-23hgzju7eq] { display: inline-flex; align-items: center; gap: var(--s1); }

.ore-colore[b-23hgzju7eq] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

/*
    Otto tinte che si distinguono fra loro, poi si ripetono. Il colore non e' l'unica via: ogni
    barra dice persona e ore passandoci sopra, e la tabella sotto le dice a parole.
*/
.serie-0[b-23hgzju7eq] { fill: #3a7a3c; background: #3a7a3c; }
.serie-1[b-23hgzju7eq] { fill: #2f5f9e; background: #2f5f9e; }
.serie-2[b-23hgzju7eq] { fill: #b0651b; background: #b0651b; }
.serie-3[b-23hgzju7eq] { fill: #7a3f8f; background: #7a3f8f; }
.serie-4[b-23hgzju7eq] { fill: #1f8a86; background: #1f8a86; }
.serie-5[b-23hgzju7eq] { fill: #a3231b; background: #a3231b; }
.serie-6[b-23hgzju7eq] { fill: #6b6b2a; background: #6b6b2a; }
.serie-7[b-23hgzju7eq] { fill: #c24a7c; background: #c24a7c; }
/* /Components/Pages/Configurazione/Utenti/RegistroAzioni.razor.rz.scp.css */
/* i filtri che vanno al database, sempre al loro posto */
.registro-barra[b-95s9hkbuho]  select.campo { min-width: 150px; max-width: 220px; }

.registro-cerca[b-95s9hkbuho] { flex: 1 1 260px; max-width: 420px; }

/* la cronologia di una riga sola: si dice qual e', e come tornare a tutto */
.registro-riga[b-95s9hkbuho] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s1) var(--s2);
    margin: 0 0 var(--s2);
    padding: var(--s2) var(--s3);
    background: var(--verde-tenue);
    border-radius: var(--raggio);
    font-size: var(--t-piccolo);
}

/* sempre alta una riga: il testo cambia, lo spazio no */
.registro-conteggio[b-95s9hkbuho] { min-height: calc(1.5em + 2 * var(--s2)); }

/* ---------- la cronologia, giorno per giorno ---------- */

/*
    Un giorno e' un riquadro solo: la data in una fascia in cima, che resta ferma scorrendo, e le
    azioni una per riga separate da una linea. Prima ogni azione era un riquadro a se' sul fondo
    della pagina, e con i fondi grigi l'elenco era una fila di strisce che non si leggeva.
*/
.registro-giorno[b-95s9hkbuho] {
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
    overflow: clip;
}

.registro-giorno + .registro-giorno[b-95s9hkbuho] { margin-top: var(--s4); }

.registro-giorno-titolo[b-95s9hkbuho] {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0;
    padding: var(--s2) var(--s3);
    font-size: var(--t-medio);
    background: var(--testa-tabella);
    border-bottom: 1px solid var(--riga);
}

.registro-giorno-titolo[b-95s9hkbuho]::first-letter { text-transform: uppercase; }

.registro-quante[b-95s9hkbuho] { margin-left: var(--s2); font-size: var(--t-piccolo); font-weight: 400; color: var(--grigio); }

.registro-voce[b-95s9hkbuho] {
    padding: var(--s2) var(--s3);

    /* il bordo sinistro dice l'azione, insieme al segno e alla parola: mai il colore da solo */
    border-left: 3px solid var(--grigio-tenue);
}

.registro-voce + .registro-voce[b-95s9hkbuho] { border-top: 1px solid var(--riga); }

.registro-crea[b-95s9hkbuho] { border-left-color: var(--fatto); }

.registro-elimina[b-95s9hkbuho] { border-left-color: var(--allarme); }

.registro-testa[b-95s9hkbuho] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s1) var(--s3);
}

.registro-ora[b-95s9hkbuho] { color: var(--grigio); }

.registro-chi[b-95s9hkbuho] { font-weight: 600; }

.registro-sistema[b-95s9hkbuho] { color: var(--grigio); font-weight: 400; }

.registro-crea .registro-azione[b-95s9hkbuho] { color: var(--fatto); background: var(--fatto-fondo); }

.registro-elimina .registro-azione[b-95s9hkbuho] { color: var(--allarme); background: var(--allarme-fondo); }

.registro-cosa[b-95s9hkbuho] { color: var(--grigio); }

.registro-origine[b-95s9hkbuho] { margin-left: auto; font-size: var(--t-micro); color: var(--grigio); }

/* i campi: prima e dopo affiancati, il prima barrato e tenue, il dopo pieno */
.registro-campi[b-95s9hkbuho] {
    width: 100%;
    margin-top: var(--s2);
    border-collapse: collapse;
    font-size: var(--t-piccolo);
    table-layout: fixed;
}

.registro-campi th[b-95s9hkbuho],
.registro-campi td[b-95s9hkbuho] {
    padding: 3px var(--s2);
    border-top: 1px solid var(--riga);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.registro-campi thead th[b-95s9hkbuho] { font-size: var(--t-micro); font-weight: 600; color: var(--grigio); text-transform: uppercase; letter-spacing: .04em; }

.registro-campi tbody th[b-95s9hkbuho] { width: 22%; font-weight: 400; color: var(--grigio); }

.registro-prima[b-95s9hkbuho] { color: var(--grigio); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--allarme) 60%, transparent); }

.registro-dopo[b-95s9hkbuho] { color: var(--inchiostro); }

/* il link "mostra tutto" non va barrato insieme al testo */
.registro-prima[b-95s9hkbuho]  .btn { text-decoration: underline; }

.registro-altre[b-95s9hkbuho] { margin: var(--s3) 0 0; text-align: center; }

.registro-svuota[b-95s9hkbuho] { margin: var(--s5) 0 0; text-align: right; }

/* ---------- il racconto ---------- */

/* la frase e' la riga: si legge come si direbbe, il nome del lead in link, il resto in grigio chiaro */
.registro-frase[b-95s9hkbuho] { flex: 1 1 420px; min-width: 0; }

.registro-dettaglio[b-95s9hkbuho] { margin-left: var(--s1); }

.registro-testo[b-95s9hkbuho] {
    margin: var(--s2) 0 0;
    padding: var(--s1) var(--s3);
    border-left: 3px solid var(--riga);
    background: var(--superficie-alt);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.registro-dettagli[b-95s9hkbuho] { margin-top: var(--s2); font-size: var(--t-piccolo); }

.registro-dettagli > summary[b-95s9hkbuho] { cursor: pointer; color: var(--link); text-decoration: underline; text-underline-offset: 3px; width: max-content; }

.registro-dettagli-riga[b-95s9hkbuho] { margin: var(--s2) 0 0; color: var(--grigio); }

/* quello che nessuno ha voluto: piu' tenue, perche' conta meno */
.registro-automatica[b-95s9hkbuho] { background: var(--superficie-alt); }

.registro-automatica .registro-frase[b-95s9hkbuho] { color: var(--grigio); }

.registro-automatiche[b-95s9hkbuho] { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-bottom: var(--s3); font-size: var(--t-piccolo); }

/* le pagine aperte: una riga leggera, senza bordo di colore - si guarda, non si cambia */
.registro-navigazione[b-95s9hkbuho] { padding-top: var(--s1); padding-bottom: var(--s1); border-left-color: var(--riga); }
/* /Components/Pages/Configurazione/Utenti/UtentiElenco.razor.rz.scp.css */
/*
    La barra sopra l'elenco: i due filtri di WK a sinistra, il pulsante per aggiungere a destra.
    Stanno sempre tutti al loro posto, qualunque cosa si scelga.
*/
.utenti-barra .campo[b-wzaho9jhiw] { min-width: 190px; }

.utenti-aggiungi[b-wzaho9jhiw] { margin-left: auto; }

/* la foto a sinistra del nome, centrata con lui */
.utente-nome[b-wzaho9jhiw] {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
}

/* la foto e le iniziali: un tondo della stessa misura, cosi' le righe restano alte uguali */
.utente-foto[b-wzaho9jhiw] {
    flex: none;
    display: inline-flex;
    width: 36px;
    height: 36px;
}

.utente-foto img[b-wzaho9jhiw] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--riga);
}

.utente-iniziali[b-wzaho9jhiw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--superficie-alt);
    border: 1px solid var(--riga);
    color: var(--grigio);
    font-size: var(--t-micro);
    font-weight: 700;
}

.spunta[b-wzaho9jhiw] { color: var(--grigio); white-space: nowrap; }

.spunta-si[b-wzaho9jhiw] { color: var(--fatto); }

/* Si/No che si cambia con un clic (07/10/2026): sembra il testo di prima, e sotto il puntatore si vede che si preme */
.spunta-pulsante[b-wzaho9jhiw] {
    padding: 2px var(--s1);
    margin: -2px calc(var(--s1) * -1);
    font: inherit;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--raggio);
    cursor: pointer;
}

.spunta-pulsante:hover[b-wzaho9jhiw],
.spunta-pulsante:focus-visible[b-wzaho9jhiw] {
    border-color: var(--riga);
    background: var(--superficie);
    outline: none;
}

/* le attivita' di un utente sono decine: due righe, e il resto al passaggio del mouse. Intere allungavano ogni riga di 150px */
.utente-attivita[b-wzaho9jhiw] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-width: 220px;
    font-size: var(--t-piccolo);
}

.utente-azioni[b-wzaho9jhiw] {
    display: inline-flex;
    gap: var(--s1);
}

/* l'eliminato si legge piu' tenue; che lo sia lo dice a parole la colonna Elim. */
.utenti-tabella[b-wzaho9jhiw]  tr.utente-eliminato td { color: var(--grigio); }
/* /Components/Pages/Lavoro/Abbonamenti/AbbonamentiElenco.razor.rz.scp.css */
/*
    L'elenco degli abbonamenti. Solo quello che la tabella comune non sa: la cella del rinnovo, i
    segni "tocca a te" accanto al nome, lo stato del pagamento quando non c'e' niente da segnalare.
*/

/*
    Il conto alla rovescia e la data sulla stessa riga, allineati a destra come ogni numero: la
    colonna si legge dall'alto in basso confrontando i giorni, e la data serve solo a chi la cerca.
*/
.rinnovo[b-u27m1txp9v] {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: var(--s1);
    white-space: nowrap;
}

.rinnovo-data[b-u27m1txp9v] {
    min-width: 3.2em;
    color: var(--grigio);
    font-size: var(--t-micro);
}

.abbonamento-nome[b-u27m1txp9v] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s1) var(--s2);
}

.azioni-elenco[b-u27m1txp9v] {
    align-items: center;
    justify-content: space-between;
}

/* niente da segnalare: si legge, ma non chiama l'occhio */
.pagamento-neutro[b-u27m1txp9v] {
    color: var(--grigio);
    font-size: var(--t-piccolo);
}

.filtri-date[b-u27m1txp9v] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s1) var(--s2);
}

.filtri-date .etichetta[b-u27m1txp9v] {
    margin: 0;
}
/* /Components/Pages/Lavoro/Abbonamenti/AbbonamentoModulo.razor.rz.scp.css */
/*
    Il modulo di un abbonamento: i tre riquadri - per chi, cosa, come si paga - affiancati quanti ne
    stanno, ognuno largo almeno 26rem, cosi' sugli schermi larghi non resta mezza pagina vuota a
    destra; sul telefono tornano uno sotto l'altro. Annulla e Salva sotto, a tutta larghezza.
*/

.modulo-abbonamento[b-rkokq8g0t7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
    align-items: start;
    gap: var(--s4);
    max-width: 96rem;
    padding-bottom: var(--s6);
}

.modulo-abbonamento > .pannello-piede[b-rkokq8g0t7] {
    grid-column: 1 / -1;
    /* resta in fondo allo schermo mentre si compila, come il piede delle schede: il Salva si vede sempre */
    position: sticky;
    bottom: calc(var(--spazio-fondo, 0px) * -1);
    z-index: 3;
    padding: var(--s3) var(--s4);
    background: var(--superficie-alt);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
}

/* lo stacco lo da' la griglia: il margine di .scheda + .scheda abbassava tutti i riquadri tranne il primo */
.modulo-abbonamento > .scheda[b-rkokq8g0t7] { margin: 0; }

.modulo-abbonamento .scheda[b-rkokq8g0t7] {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.modulo-abbonamento .campo[b-rkokq8g0t7] {
    width: 100%;
}

.modulo-abbonamento textarea.campo[b-rkokq8g0t7] {
    resize: vertical;
}

/* l'importo e' un numero: a destra e in monospaziato, come nelle tabelle */
.importo[b-rkokq8g0t7] {
    text-align: right;
}

.modulo-nota[b-rkokq8g0t7] {
    margin: 0;
    color: var(--grigio);
    font-size: var(--t-piccolo);
}
/* /Components/Pages/Lavoro/Abbonamenti/AbbonamentoScheda.razor.rz.scp.css */
/*
    La scheda dell'abbonamento. L'impianto - intestazione ferma, lato e centro che scorrono ognuno
    per conto suo - e' quello della scheda del lead, in componenti.css: qui solo i pezzi propri.
*/

.azioni-abbonamento[b-5thojt37qy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

/* chi si aggiunge, sopra la tabella di chi lo segue: staccato da lei, col pulsante in fondo ai campi */
.seguito-aggiungi[b-5thojt37qy] {
    align-items: flex-end;
    margin-bottom: var(--s4);
}

/* i pulsanti di una voce della cronologia, sotto il testo: si leggono dopo aver letto la voce */
.voce-azioni[b-5thojt37qy] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-top: var(--s2);
}

.descrizione[b-5thojt37qy] {
    margin-top: var(--s3);
    padding-top: var(--s3);
    border-top: 1px solid var(--riga);
}

/*
    Incassato e da incassare: i due numeri che si chiedono al telefono con un cliente, in testa
    ai pagamenti come il riepilogo di Stripe (quanti addebiti lo dicono linguetta e tabella). A
    destra e in monospaziato, cosi' si confrontano senza leggerli.
*/
.totali[b-5thojt37qy] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s2);
    margin: 0 0 var(--s3);
}

.totali > div[b-5thojt37qy] {
    padding: var(--s2) var(--s3);
    /* verde incassato, giallo da incassare (tinta-* in base.css) */
    background: var(--tinta-fondo, var(--superficie));
    border: 1px solid var(--tinta-fondo, var(--riga));
    border-top: 4px solid var(--tinta, var(--riga));
    border-radius: var(--raggio);
}

.totali dt[b-5thojt37qy] {
    color: var(--tinta, var(--grigio));
    font-size: var(--t-micro);
}

.totali dd[b-5thojt37qy] {
    margin: 0;
    text-align: right;
    font-size: var(--t-grande);
    color: var(--tinta, var(--inchiostro));
}

.domanda[b-5thojt37qy] {
    margin-top: var(--s1);
}

.file-nome[b-5thojt37qy] {
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .totali[b-5thojt37qy] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* col cliente: i pulsanti del lead, con la loro etichetta davanti */
/* le icone del lead in una fascia (barra-filtri), come le azioni sopra: non sul fondo della pagina */
.col-cliente[b-5thojt37qy] { align-items: center; }

.col-cliente .etichetta[b-5thojt37qy] {
    margin: 0;
}

.file-azioni[b-5thojt37qy] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--s3);
    margin-bottom: var(--s3);
}

.file-riga[b-5thojt37qy] {
    display: flex;
    align-items: center;
    gap: var(--s2);
}

.file-riga .coppie-nota[b-5thojt37qy] {
    margin-right: auto;
}

.documento summary[b-5thojt37qy] {
    cursor: pointer;
}

.documento-testo[b-5thojt37qy] {
    margin-top: var(--s2);
    padding: var(--s2) var(--s3);
    background: var(--superficie-alt);
    border-radius: 4px;
    overflow-x: auto;
}

/* le azioni sul contratto: in fila, staccate fra loro e da quello che sta sopra */
.contratto-azioni[b-5thojt37qy] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--s2);
    margin-top: var(--s2);
}

.contratto-azioni:empty[b-5thojt37qy] { display: none; }
/* /Components/Pages/Lavoro/Coda/CodaProduzione.razor.rz.scp.css */
/* la tabellina del riquadro su una colonna sola: i valori lunghi si leggono interi, e resta
   stretta quanto basta perche' gli aggiornamenti accanto abbiano lo spazio */
.coda-produzione[b-9l540dunhf]  .riquadro-lato { grid-template-columns: minmax(0, 1fr); }

.coda-produzione[b-9l540dunhf]  .riquadro-lato-cella { width: 390px; }

.coda-produzione[b-9l540dunhf]  .riquadro-coppia { grid-template-columns: 130px minmax(0, 1fr); }
/* /Components/Pages/Lavoro/Documenti/Documenti.razor.rz.scp.css */
/*
    Tre colonne come nelle basi di conoscenza: i filtri a sinistra, la ricerca e l'elenco al centro,
    il documento aperto a destra. Filtri e documento restano fermi mentre l'elenco scorre: si legge
    senza perdere il punto della lista, e si cambia documento senza risalire.
*/
.documenti[b-46a7lr9eb8] {
    display: grid;
    grid-template-columns: 190px minmax(300px, 2fr) minmax(0, 3fr);
    grid-template-areas:
        "filtri cerca lettura"
        "filtri elenco lettura";
    grid-template-rows: auto 1fr;
    gap: var(--s3) var(--s4);
    align-items: start;
}

.documenti-cerca[b-46a7lr9eb8] { grid-area: cerca; display: flex; gap: var(--s2); align-items: center; }

.documenti-cerca-campo[b-46a7lr9eb8] { position: relative; flex: 1; min-width: 0; }

.documenti-filtri[b-46a7lr9eb8] { grid-area: filtri; }

.documenti-elenco[b-46a7lr9eb8] { grid-area: elenco; min-width: 0; }

.documenti-lettura[b-46a7lr9eb8] { grid-area: lettura; min-width: 0; }

/* filtri ed elenco su un riquadro come il documento aperto: su un fondo pagina colorato non galleggiano */
.documenti-filtri[b-46a7lr9eb8],
.documenti-elenco[b-46a7lr9eb8] {
    padding: var(--s3);
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
}

/*
    Fermi dentro lo scorrimento del contenuto. L'altezza e' quella dello schermo meno la barra in
    alto e il margine del contenuto: oltre, scorrono per conto loro.
*/
.documenti-filtri[b-46a7lr9eb8],
.documenti-lettura[b-46a7lr9eb8] {
    position: sticky;
    top: 0;
    max-height: calc(100dvh - var(--barra-alta) - var(--s4) * 2);
    overflow-y: auto;
}

/* ---------- ricerca ---------- */

/* la ricerca e' la porta della pagina: piu' grande di un campo di filtro, e si vede per prima */
.documenti-cerca .campo[b-46a7lr9eb8] {
    padding: 0 var(--s3) 0 calc(var(--s3) + 20px);
    font-size: var(--t-medio);
}

.documenti-cerca-segno[b-46a7lr9eb8] {
    position: absolute;
    left: var(--s3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--grigio);
    font-size: var(--t-medio);
    pointer-events: none;
}

/* ---------- filtri ---------- */

.documenti-filtri .scheda-titolo[b-46a7lr9eb8] { margin: var(--s4) 0 var(--s1); }

.documenti-filtri .scheda-titolo:first-child[b-46a7lr9eb8] { margin-top: 0; }

.documenti-faccette[b-46a7lr9eb8] {
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
    "Mostra tutti" sotto gli autori: attaccato alla sua lista, staccato dal titolo dopo. Ha la forma
    delle scelte (documenti-faccetta) e dice un'azione: il colore dei link, mai acceso.
*/
.documenti-autori-altri[b-46a7lr9eb8] { margin: var(--s1) 0 0; color: var(--link); }

.documenti-faccetta[b-46a7lr9eb8] {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: var(--s2);
    padding: var(--s1) var(--s2);
    margin-bottom: 2px;
    border: 1px solid var(--riga);
    border-radius: var(--raggio);
    background: var(--superficie);
    color: var(--inchiostro);
    font: inherit;
    font-size: var(--t-piccolo);
    text-align: left;
    cursor: pointer;
}

.documenti-faccetta:hover[b-46a7lr9eb8] { background: var(--superficie-alt); }

.documenti-faccetta:focus-visible[b-46a7lr9eb8] { outline: 2px solid var(--verde); outline-offset: 1px; }

.documenti-faccetta .mono[b-46a7lr9eb8] { color: var(--grigio); font-size: var(--t-micro); }

/* la scelta attiva: il filetto verde e il grassetto insieme, non il colore da solo */
.documenti-faccetta[aria-pressed="true"][b-46a7lr9eb8] {
    background: var(--verde-tenue);
    box-shadow: inset 3px 0 0 var(--verde);
    font-weight: 600;
}

/* ---------- elenco ---------- */

.documenti-conteggio[b-46a7lr9eb8] {
    margin: 0 0 var(--s2);
    font-size: var(--t-piccolo);
    color: var(--grigio);
}

.documenti-voci[b-46a7lr9eb8] { list-style: none; margin: 0; padding: 0; }

.documenti-voce[b-46a7lr9eb8] {
    display: flex;
    gap: var(--s3);
    align-items: baseline;
    padding: var(--s2) var(--s3);
    border-radius: var(--raggio);
    color: var(--inchiostro);
    text-decoration: none;
}

.documenti-voce:hover[b-46a7lr9eb8] { background: var(--superficie-alt); text-decoration: none; }

.documenti-voce.aperta[b-46a7lr9eb8] { background: var(--superficie-alt); box-shadow: inset 3px 0 0 var(--verde); }

/* l'eta' del documento apre la riga, in una colonna fissa: la firma degli elenchi di WK */
.documenti-voce-giorni[b-46a7lr9eb8] {
    flex: 0 0 48px;
    text-align: right;
    font-size: var(--t-micro);
}

.documenti-voce-corpo[b-46a7lr9eb8] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.documenti-voce-nome[b-46a7lr9eb8] { font-weight: 600; overflow-wrap: anywhere; }

.documenti-voce-dati[b-46a7lr9eb8] { font-size: var(--t-micro); color: var(--grigio); }

.documenti-voce-anteprima[b-46a7lr9eb8] {
    font-size: var(--t-piccolo);
    color: var(--grigio);
    overflow-wrap: anywhere;

    /* due righe bastano a riconoscere il documento; il resto e' a destra */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* la parola trovata: sfondo e grassetto, cosi' si vede anche senza distinguere il giallo */
.documenti-voce-anteprima mark[b-46a7lr9eb8] {
    background: var(--attesa-fondo);
    color: var(--inchiostro);
    font-weight: 600;
    padding: 0 1px;
    border-radius: 2px;
}

.documenti-altri[b-46a7lr9eb8] { margin-top: var(--s3); }

/* ---------- accesso ---------- */

.documenti-accesso[b-46a7lr9eb8] { white-space: nowrap; }

.documenti-accesso.legge[b-46a7lr9eb8] { color: var(--attesa); }

.documenti-accesso.admin[b-46a7lr9eb8] { color: var(--grigio); font-style: italic; }

.documenti-accesso.scrive[b-46a7lr9eb8] { color: var(--fatto); }

/* ---------- documento aperto ---------- */

.documenti-lettura-testa[b-46a7lr9eb8] {
    padding-bottom: var(--s3);
    margin-bottom: var(--s4);
    border-bottom: 1px solid var(--riga);
}

.documenti-titolo[b-46a7lr9eb8] {
    margin: 0 0 var(--s2);
    font-size: var(--t-grande);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.documenti-lettura-dati[b-46a7lr9eb8] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s1) var(--s3);
    font-size: var(--t-piccolo);
    color: var(--grigio);
}

.documenti-lettura-azioni[b-46a7lr9eb8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin-top: var(--s3);
}

.documenti-lettura-azioni:empty[b-46a7lr9eb8] { display: none; }

.documenti-nota[b-46a7lr9eb8] { font-size: var(--t-micro); color: var(--grigio-tenue); }

.documenti-indietro[b-46a7lr9eb8] { margin-bottom: var(--s3); font-size: var(--t-piccolo); text-decoration: none; }

/*
    Il testo del documento arriva come HTML (MarkupString): i suoi elementi non hanno l'attributo
    dello stile isolato, e si raggiungono solo con ::deep.
*/
.documenti-testo[b-46a7lr9eb8] {
    font-size: var(--t-base);
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.documenti-testo[b-46a7lr9eb8]  p { margin: 0 0 var(--s3); }

.documenti-testo[b-46a7lr9eb8]  ul,
.documenti-testo[b-46a7lr9eb8]  ol { margin: 0 0 var(--s3); padding-left: var(--s5); }

.documenti-testo[b-46a7lr9eb8]  li { margin-bottom: var(--s1); }

.documenti-testo[b-46a7lr9eb8]  a { color: var(--link); }

/* titoli, tabelle e codice arrivano spogli da HtmlSicuro: la forma gliela da' questo foglio */
.documenti-testo[b-46a7lr9eb8]  h1,
.documenti-testo[b-46a7lr9eb8]  h2 { margin: var(--s5) 0 var(--s2); font-size: var(--t-grande); line-height: 1.3; }

.documenti-testo[b-46a7lr9eb8]  h3,
.documenti-testo[b-46a7lr9eb8]  h4 { margin: var(--s4) 0 var(--s2); font-size: var(--t-medio); line-height: 1.3; }

.documenti-testo[b-46a7lr9eb8]  pre {
    margin: 0 0 var(--s3);
    padding: var(--s2) var(--s3);
    background: var(--superficie-alt);
    border: 1px solid var(--riga);
    border-radius: var(--raggio);
    font-size: var(--t-piccolo);
    white-space: pre-wrap;
}

.documenti-testo[b-46a7lr9eb8]  code { font-family: var(--mono); font-size: var(--t-piccolo); }

/* una tabella da Excel e' piu' larga del riquadro: scorre lei, non la pagina */
.documenti-testo[b-46a7lr9eb8]  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 0 0 var(--s3);
    font-size: var(--t-piccolo);
    overflow-wrap: normal;
}

.documenti-testo[b-46a7lr9eb8]  th,
.documenti-testo[b-46a7lr9eb8]  td {
    border: 1px solid var(--riga);
    padding: 2px var(--s2);
    vertical-align: top;
    text-align: left;
}

.documenti-testo[b-46a7lr9eb8]  th { background: var(--superficie-alt); font-weight: 600; }

/* ---------- scrittura e condivisioni ---------- */

.documenti-modulo[b-46a7lr9eb8] { display: flex; flex-direction: column; gap: var(--s2); }

.documenti-modulo .etichetta[b-46a7lr9eb8] { margin-top: var(--s2); }

/* subito sotto un titolo l'etichetta non si stacca: il titolo e' suo */
.documenti-modulo .pannello-titolo + .etichetta[b-46a7lr9eb8],
.documenti-modulo .pannello-titolo + .campi-in-fila > * > .etichetta[b-46a7lr9eb8] { margin-top: 0; }

.documenti-nome[b-46a7lr9eb8] { width: 100%; font-size: var(--t-medio); }

.documenti-condivisi[b-46a7lr9eb8] { list-style: none; margin: 0; padding: 0; }

.documenti-condivisi li[b-46a7lr9eb8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s1) var(--s3);
    padding: var(--s2) 0;
    border-bottom: 1px solid var(--riga);
}

.documenti-condivisi-nome[b-46a7lr9eb8] { flex: 0 0 140px; font-weight: 600; overflow-wrap: anywhere; }

.documenti-diritti[b-46a7lr9eb8] { display: flex; flex-wrap: wrap; gap: var(--s1); }

.documenti-piede[b-46a7lr9eb8] {
    margin-top: var(--s5);
    padding-top: var(--s3);
    border-top: 1px solid var(--riga);
}

.documenti-persone[b-46a7lr9eb8] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2) var(--s4);
    font-size: var(--t-piccolo);
}

.documenti-persone .documenti-accesso[b-46a7lr9eb8] { margin-left: var(--s1); font-size: var(--t-micro); }

.documenti-collegati[b-46a7lr9eb8] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1) var(--s3);
    margin: 0 0 var(--s2);
    font-size: var(--t-piccolo);
    color: var(--grigio);
}

/* ---------- schermi medi: i filtri salgono sopra l'elenco ---------- */

@media (max-width: 1280px) {
    .documenti[b-46a7lr9eb8] {
        grid-template-columns: minmax(280px, 2fr) minmax(0, 3fr);
        grid-template-areas:
            "cerca lettura"
            "filtri lettura"
            "elenco lettura";
        grid-template-rows: auto auto 1fr;
    }

    .documenti-filtri[b-46a7lr9eb8] {
        position: static;
        max-height: none;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--s1) var(--s2);
    }

    /*
        le faccette diventano una fila di scelte: il titolo del gruppo resta, come etichetta, su una
        riga sua - in mezzo alla fila finiva in fondo a una riga, con le sue scelte a capo sotto
    */
    .documenti-filtri .scheda-titolo[b-46a7lr9eb8] { flex-basis: 100%; margin: var(--s3) 0 0; }

    .documenti-filtri .scheda-titolo:first-child[b-46a7lr9eb8] { margin-top: 0; }

    .documenti-autori-altri[b-46a7lr9eb8] { margin: 0; }

    .documenti-faccette[b-46a7lr9eb8] { display: contents; }

    .documenti-faccetta[b-46a7lr9eb8] {
        width: auto;
        border: 1px solid var(--riga);
        border-radius: 999px;
        padding: 2px var(--s3);
    }

    /*
        Nella pillola la scelta attiva ha il bordo verde tutto intorno (05/10/2026): il filetto a
        sinistra della lista, dentro un bordo tondo, veniva una falce storta. Grassetto e fondo restano.
    */
    .documenti-faccetta[aria-pressed="true"][b-46a7lr9eb8] {
        box-shadow: none;
        border-color: var(--verde);
    }
}

/* ---------- telefono: una colonna, e il documento aperto sopra ---------- */

@media (max-width: 900px) {
    .documenti[b-46a7lr9eb8] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "lettura" "cerca" "filtri" "elenco";
        grid-template-rows: none;
    }

    .documenti-lettura[b-46a7lr9eb8] { position: static; max-height: none; }

    /* senza un documento aperto, il riquadro vuoto sul telefono e' solo spazio perso */
    .documenti:not(.con-aperto) .documenti-lettura[b-46a7lr9eb8] { display: none; }

    /*
        Sul telefono il documento aperto e' una finestra sopra l'elenco (29/09/2026): si legge a tutto
        schermo, e chiudendola si ritrova l'elenco dov'era. Sopra la barra in basso e il menu, sotto
        le finestre dei moduli (condivisione) e i dialoghi.
    */
    .documenti.con-aperto[b-46a7lr9eb8]::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 49;
        background: rgba(22, 33, 28, .45);
    }

    .documenti.con-aperto .documenti-lettura[b-46a7lr9eb8] {
        position: fixed;
        inset: var(--s2);
        z-index: 50;
        max-height: none;
        overflow-y: auto;
        overscroll-behavior: contain;
        box-shadow: var(--ombra-alta);
    }

    /* la chiusura resta in cima mentre si scorre il documento */
    .documenti-indietro[b-46a7lr9eb8] {
        position: sticky;
        top: calc(var(--s4) * -1);
        z-index: 1;
        display: flex;
        margin: calc(var(--s4) * -1) calc(var(--s4) * -1) var(--s3);
        padding: var(--s3) var(--s4);
        background: var(--superficie);
        border-bottom: 1px solid var(--riga);
    }
}
/* /Components/Pages/Lavoro/Documenti/EditorCondiviso.razor.rz.scp.css */
/*
    Il documento scritto insieme (15/10/2026): la stessa forma dell'editor semplice - un campo con la barra attaccata sopra
    e il testo come si leggera' - piu' chi c'e' e il cursore di ognuno, col nick nel suo colore.
*/
.condiviso[b-lyfj6saany] {
    border: 1px solid var(--riga);
    border-radius: var(--raggio);
    background: var(--superficie);
}

.condiviso:focus-within[b-lyfj6saany] { border-color: var(--verde); }

.condiviso-testa[b-lyfj6saany] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    padding: var(--s1) var(--s2);
    border-bottom: 1px solid var(--riga);
    font-size: var(--t-piccolo);
}

.condiviso-presenti[b-lyfj6saany] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }

/* chi c'e': il nick nel colore del suo cursore, con un puntino che non si affida al solo colore (c'e' il nome) */
.condiviso-presente[b-lyfj6saany] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 var(--s2);
    border: 1px solid var(--colore);
    border-radius: 999px;
    color: var(--inchiostro);
}

.condiviso-presente[b-lyfj6saany]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--colore);
}

.condiviso-salvato[b-lyfj6saany] { font-variant-numeric: tabular-nums; }

.editor-barra[b-lyfj6saany] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: var(--s1);
    border-bottom: 1px solid var(--riga);
    background: var(--superficie-alt);

    /* la barra resta in vista mentre il testo scorre dentro il riquadro della lettura */
    position: sticky;
    top: 0;
    z-index: 1;
}

.editor-tasto[b-lyfj6saany] {
    min-width: 30px;
    height: 28px;
    padding: 0 var(--s2);
    border: 1px solid transparent;
    border-radius: var(--raggio);
    background: none;
    color: var(--inchiostro);
    font: inherit;
    font-size: var(--t-base);
    cursor: pointer;
}

.editor-tasto:hover[b-lyfj6saany] { background: var(--superficie); border-color: var(--riga); }

.editor-tasto:focus-visible[b-lyfj6saany] { outline: 2px solid var(--verde); outline-offset: 1px; }

.editor-tasto[aria-pressed="true"][b-lyfj6saany] {
    background: var(--verde-tenue);
    border-color: var(--verde);
    text-shadow: 0 0 .6px currentColor;
}

.editor-tasto-largo[b-lyfj6saany] { font-size: var(--t-piccolo); }

.editor-separa[b-lyfj6saany] {
    width: 1px;
    height: 18px;
    margin: 0 var(--s1);
    background: var(--riga);
}

/* il testo lo crea l'editor nel browser: senza l'attributo dello stile isolato, si raggiunge con ::deep */
.condiviso-testo[b-lyfj6saany]  .editor-condiviso-testo {
    min-height: 320px;
    padding: var(--s3) var(--s4);
    font-size: var(--t-base);
    line-height: 1.55;
    overflow-wrap: anywhere;
    outline: none;
}

.condiviso-testo[b-lyfj6saany]  p { margin: 0 0 var(--s3); }

.condiviso-testo[b-lyfj6saany]  h1,
.condiviso-testo[b-lyfj6saany]  h2 { margin: var(--s4) 0 var(--s2); font-size: var(--t-grande); }

.condiviso-testo[b-lyfj6saany]  h3,
.condiviso-testo[b-lyfj6saany]  h4 { margin: var(--s3) 0 var(--s2); font-size: var(--t-medio); }

.condiviso-testo[b-lyfj6saany]  ul,
.condiviso-testo[b-lyfj6saany]  ol { margin: 0 0 var(--s3); padding-left: var(--s5); }

.condiviso-testo[b-lyfj6saany]  a { color: var(--link); }

.condiviso-testo[b-lyfj6saany]  pre {
    padding: var(--s2) var(--s3);
    background: var(--superficie-alt);
    border: 1px solid var(--riga);
    border-radius: var(--raggio);
    font-family: var(--mono);
    font-size: var(--t-piccolo);
    white-space: pre-wrap;
}

.condiviso-testo[b-lyfj6saany]  table { border-collapse: collapse; margin: 0 0 var(--s3); }

.condiviso-testo[b-lyfj6saany]  th,
.condiviso-testo[b-lyfj6saany]  td { border: 1px solid var(--riga); padding: 2px var(--s2); vertical-align: top; }

.condiviso-testo[b-lyfj6saany]  img { max-width: 100%; height: auto; }

/* il cursore di chi scrive con te: una barretta nel suo colore e sopra il suo nick */
.condiviso-testo[b-lyfj6saany]  .collaboration-cursor__caret {
    position: relative;
    margin-left: -1px;
    margin-right: -1px;
    border-left: 1px solid;
    border-right: 1px solid;
    word-break: normal;
    pointer-events: none;
}

.condiviso-testo[b-lyfj6saany]  .collaboration-cursor__label {
    position: absolute;
    top: -1.35em;
    left: -1px;
    padding: 1px 6px;
    border-radius: 3px 3px 3px 0;
    /* il fondo e' il colore della persona (--persona-N di tokens.css, tutti scuri, in ogni tema): sopra, il testo chiaro della barra in alto */
    color: var(--barra-testo);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
}
/* /Components/Pages/Lavoro/Documenti/EditorDocumento.razor.rz.scp.css */
/*
    L'editor si presenta come un campo: bordo e fondo dei campi, la barra attaccata sopra. Il
    testo dentro ha la stessa forma della lettura, cosi' quello che si scrive e' quello che si
    leggera'.
*/
.editor[b-4c9brqbea3] {
    border: 1px solid var(--riga);
    border-radius: var(--raggio);
    background: var(--superficie);
}

.editor:focus-within[b-4c9brqbea3] { border-color: var(--verde); }

.editor-barra[b-4c9brqbea3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: var(--s1);
    border-bottom: 1px solid var(--riga);
    background: var(--superficie-alt);
    border-radius: var(--raggio) var(--raggio) 0 0;

    /* la barra resta in vista mentre il testo scorre dentro il riquadro della lettura */
    position: sticky;
    top: 0;
    z-index: 1;
}

.editor-tasto[b-4c9brqbea3] {
    min-width: 30px;
    height: 28px;
    padding: 0 var(--s2);
    border: 1px solid transparent;
    border-radius: var(--raggio);
    background: none;
    color: var(--inchiostro);
    font: inherit;
    font-size: var(--t-base);
    cursor: pointer;
}

.editor-tasto:hover[b-4c9brqbea3] { background: var(--superficie); border-color: var(--riga); }

.editor-tasto:focus-visible[b-4c9brqbea3] { outline: 2px solid var(--verde); outline-offset: 1px; }

.editor-tasto[disabled][b-4c9brqbea3] { opacity: .4; cursor: default; }

.editor-tasto[aria-pressed="true"][b-4c9brqbea3] {
    background: var(--verde-tenue);
    border-color: var(--verde);
    font-weight: 600;
}

.editor-tasto-largo[b-4c9brqbea3] { font-size: var(--t-piccolo); }

/* il tasto del maiuscoletto si mostra in maiuscoletto, come il grassetto in grassetto */
.editor-maiuscoletto[b-4c9brqbea3] { font-variant: small-caps; }

.editor-separa[b-4c9brqbea3] {
    width: 1px;
    height: 18px;
    margin: 0 var(--s1);
    background: var(--riga);
}

.editor-testo[b-4c9brqbea3] {
    min-height: 320px;
    padding: var(--s3) var(--s4);
    font-size: var(--t-base);
    line-height: 1.55;
    overflow-wrap: anywhere;
    outline: none;
}

.editor-codice[b-4c9brqbea3] {
    display: block;
    width: 100%;
    min-height: 420px;
    border: 0;
    border-radius: 0 0 var(--raggio) var(--raggio);
    font-family: var(--mono);
    font-size: var(--t-piccolo);
    resize: vertical;
}

.editor-codice[hidden][b-4c9brqbea3],
.editor-testo[hidden][b-4c9brqbea3] { display: none; }

/* il contenuto lo mette il browser: senza l'attributo dello stile isolato, si raggiunge con ::deep */
.editor-testo[b-4c9brqbea3]  p { margin: 0 0 var(--s3); }

.editor-testo[b-4c9brqbea3]  h1,
.editor-testo[b-4c9brqbea3]  h2 { margin: var(--s4) 0 var(--s2); font-size: var(--t-grande); }

.editor-testo[b-4c9brqbea3]  h3,
.editor-testo[b-4c9brqbea3]  h4 { margin: var(--s3) 0 var(--s2); font-size: var(--t-medio); }

.editor-testo[b-4c9brqbea3]  ul,
.editor-testo[b-4c9brqbea3]  ol { margin: 0 0 var(--s3); padding-left: var(--s5); }

.editor-testo[b-4c9brqbea3]  a { color: var(--link); }

.editor-testo[b-4c9brqbea3]  pre {
    padding: var(--s2) var(--s3);
    background: var(--superficie-alt);
    border: 1px solid var(--riga);
    border-radius: var(--raggio);
    font-family: var(--mono);
    font-size: var(--t-piccolo);
    white-space: pre-wrap;
}

.editor-testo[b-4c9brqbea3]  table { border-collapse: collapse; margin: 0 0 var(--s3); }

.editor-testo[b-4c9brqbea3]  th,
.editor-testo[b-4c9brqbea3]  td { border: 1px solid var(--riga); padding: 2px var(--s2); vertical-align: top; }
/* /Components/Pages/Lavoro/Grafiche/GraficaModulo.razor.rz.scp.css */
/*
    La finestra larga, in due colonne (modulo-colonne, in componenti.css): a sinistra gli
    indirizzi, a destra il brief, cosi' nessuna riga di testo e' lunga tutto lo schermo e il Salva
    si vede senza scorrere. Il brief e' il campo che conta, e prende l'altezza.
*/

.grafica-modulo .modulo-sezione[b-snje8z9m3u] { gap: var(--s2); }

.grafica-modulo .campo[b-snje8z9m3u] { width: 100%; }

.grafica-modulo .etichetta[b-snje8z9m3u] { margin-top: var(--s3); }

/* subito sotto un titolo l'etichetta non si stacca: il titolo e' suo */
.grafica-modulo .pannello-titolo + .etichetta[b-snje8z9m3u],
.grafica-modulo .pannello-titolo + .campi-in-fila > * > .etichetta[b-snje8z9m3u] { margin-top: 0; }

.grafica-modulo .modulo-sezione > .etichetta:first-child[b-snje8z9m3u] { margin-top: 0; }

.grafica-modulo textarea.campo[b-snje8z9m3u] { resize: vertical; }

.grafica-facoltativo[b-snje8z9m3u] {
    color: var(--grigio);
    font-weight: normal;
}
/* /Components/Pages/Lavoro/Grafiche/GraficaScheda.razor.rz.scp.css */
/*
    Il brief di lato, le tavole al centro: la forma dei tavoli di revisione grafica, dove l'oggetto
    da guardare prende tutto lo spazio e le informazioni su di lui stanno in una colonna stretta.
    Il lato e' fisso perche' sono etichette e link brevi; le tavole si prendono il resto.
*/

.grafica[b-8by7j4qgva] {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: var(--s4);
    align-items: start;
}

.grafica-lato[b-8by7j4qgva] { min-width: 0; }

/* sul telefono una colonna sola: prima il riepilogo, che dice di cosa si sta parlando */
@media (max-width: 900px) {
    .grafica[b-8by7j4qgva] { grid-template-columns: minmax(0, 1fr); }
}

.grafica-manca[b-8by7j4qgva] { color: var(--allarme); }

.grafica-vuoto[b-8by7j4qgva] {
    margin: 0;
    color: var(--grigio);
    font-size: var(--t-piccolo);
}

.grafica-vuoto .stato[b-8by7j4qgva] { margin-right: var(--s1); }

.grafica-categorie[b-8by7j4qgva] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.grafica-categorie li[b-8by7j4qgva] {
    padding: 1px var(--s2);
    border: 1px solid var(--riga);
    border-radius: 999px;
    background: var(--superficie-alt);
    font-size: var(--t-piccolo);
}

/*
    Il brief lo scrive chi vende, spesso con l'elenco delle pagine in maiuscolo su una riga sola
    ("HOME - AZIENDA - SERVIZI - CONTATTI") e indirizzi lunghi: va a capo anche dentro le parole,
    altrimenti un indirizzo allarga il lato fino a schiacciare le tavole.
*/
.grafica-brief[b-8by7j4qgva] {
    font-size: var(--t-piccolo);
    overflow-wrap: anywhere;
}

.grafica-brief[b-8by7j4qgva]  p { margin: 0 0 var(--s2); }

.grafica-brief[b-8by7j4qgva]  p:last-child { margin-bottom: 0; }

.grafica-brief[b-8by7j4qgva]  ul { margin: 0 0 var(--s2); padding-left: var(--s4); }

/* ---------- scritture nel lato ---------- */

.grafica-progetto-azioni[b-8by7j4qgva] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin: var(--s2) 0 var(--s3);
}

/* la tendina dei progetti dentro la colonna stretta: i nomi dei progetti sono lunghi */
.grafica-aggancio[b-8by7j4qgva] {
    margin: var(--s2) 0 var(--s3);
    padding: var(--s3);
    border: 1px solid var(--riga);
    border-radius: var(--raggio);
    background: var(--superficie-alt);
}

.grafica-aggancio .campo[b-8by7j4qgva] { width: 100%; }

/* una casella per riga: sono 83 nomi, e in colonna si scorrono con l'occhio */
.grafica-scelta-categorie[b-8by7j4qgva] {
    display: grid;
    gap: var(--s1);
    max-height: 360px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    border: 0;
}

/* ---------- tavole ---------- */

.grafica-tavole[b-8by7j4qgva] {
    min-width: 0;
    padding: var(--s3) var(--s4) var(--s4);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
    background: var(--superficie);
}

.grafica-tavole-testa[b-8by7j4qgva] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

.grafica-tavole-testa .scheda-titolo[b-8by7j4qgva] { margin: 0; }

.grafica-conta[b-8by7j4qgva] {
    color: var(--grigio);
    font-size: var(--t-piccolo);
}

.grafica-griglia[b-8by7j4qgva] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--s4) var(--s3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tavola[b-8by7j4qgva] { min-width: 0; }

/*
    3:4, la proporzione di una pagina di sito vista intera nelle tavole che si caricano: quando
    arrivera' l'immagine vera prendera' questo posto senza spostare niente.
*/
.tavola-cornice[b-8by7j4qgva] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 4;
    margin-bottom: var(--s2);
    padding: var(--s3);
    border: 1px solid var(--riga);
    border-radius: var(--raggio);
    background:
        repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--riga) 45%, transparent) 10px 11px),
        var(--superficie-alt);
    text-align: center;
}

/*
    La miniatura riempie la cornice: e' gia' ritagliata a 3:4, e object-fit tiene la forma anche se
    una tavola vecchia arriva con proporzioni diverse. overflow sulla cornice perche' l'angolo
    arrotondato tagli anche l'immagine.
*/
.tavola-cornice:has(.tavola-apri)[b-8by7j4qgva] {
    padding: 0;
    overflow: hidden;
    background: var(--superficie-alt);
}

.tavola-apri[b-8by7j4qgva] {
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
}

.tavola-apri:focus-visible[b-8by7j4qgva] {
    outline: 2px solid var(--verde);
    outline-offset: -2px;
}

.tavola-immagine[b-8by7j4qgva] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.grafica-carica[b-8by7j4qgva] { margin: var(--s2) 0 var(--s3); }

.tavola-numero[b-8by7j4qgva] {
    position: absolute;
    top: var(--s2);
    left: var(--s2);
    padding: 0 var(--s1);
    border-radius: var(--raggio);
    background: var(--superficie);
    color: var(--grigio);
    font-size: var(--t-micro);
}

.tavola-avviso[b-8by7j4qgva] {
    color: var(--grigio);
    font-size: var(--t-micro);
}

.tavola-manca .tavola-cornice[b-8by7j4qgva] {
    border-style: dashed;
    border-color: var(--allarme);
    background: var(--allarme-fondo);
}

.tavola-manca .tavola-avviso[b-8by7j4qgva] {
    color: var(--allarme);
    font-weight: 600;
}

.tavola-nome[b-8by7j4qgva] {
    font-size: var(--t-piccolo);
    font-weight: 600;
}

/* il taglio coi puntini sta sul testo e non sul blocco: modificandolo, campo e pulsanti non si tagliano */
.tavola-nome-testo[b-8by7j4qgva] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tavola-dati[b-8by7j4qgva] {
    color: var(--grigio);
    font-size: var(--t-micro);
}

/* sotto la tavola: chi l'ha caricata, e il cestino allineato a destra */
.tavola-autore[b-8by7j4qgva] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s1);
}
/* /Components/Pages/Lavoro/Grafiche/GraficheElenco.razor.rz.scp.css */
/*
    Poco qui di proposito: la tabella, le linguette e le etichette di stato sono del design system.
    Resta solo quello che e' di questa pagina.
*/

/*
    Le categorie di una grafica sono spesso tre o quattro nomi lunghi ("Profess., Commercialisti"):
    vanno a capo invece di allargare la colonna e spingere fuori schermo le tavole e il peso.
*/
.grafiche-categorie[b-92vjgn580i] {
    display: block;
    max-width: 320px;
    color: var(--grigio);
    font-size: var(--t-piccolo);
    white-space: normal;
}
/* /Components/Pages/Lavoro/Progetti/AzioniProgetto.razor.rz.scp.css */
/*
    I moduli della scheda del progetto. Il pannello, i campi e il piede sono quelli comuni
    (componenti.css, gli stessi della scheda del lead); qui c'e' solo l'elenco delle persone di
    un processo, che esiste solo in questa pagina.
*/

.elenco-persone[b-dzfhwzlcem] {
    list-style: none;
    margin: 0 0 var(--s3);
    padding: 0;
}

.elenco-persone li[b-dzfhwzlcem] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s1) var(--s2);
    padding: var(--s1) 0;
    border-bottom: 1px solid var(--riga);
}

.persona-nome[b-dzfhwzlcem] {
    display: inline-flex;
    gap: var(--s2);
    margin-right: auto;
    font-weight: 600;
}

.tenue[b-dzfhwzlcem] {
    color: var(--grigio);
    font-weight: 400;
}

/* la tendina "Sostituisci con..." sta sulla riga della persona: non deve prendersi tutta la larghezza */
.elenco-persone[b-dzfhwzlcem]  .campo-breve {
    width: auto;
    max-width: 180px;
}

/* il lead di adesso, col pulsante per correggerne i dati sulla stessa riga */
.lead-adesso[b-dzfhwzlcem] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s1) var(--s3);
}

.lead-adesso-nome[b-dzfhwzlcem] { font-weight: 600; }

/*
    I lead trovati, come nel modulo del calendario (ScritturaCalendario): il nome a sinistra, a
    destra da cosa l'ha trovato. Tutta la riga si tocca; da tastiera c'e' il pulsante sul nome.
*/
.cambio-trovati[b-dzfhwzlcem] {
    width: 100%;
    margin-top: var(--s1);
    border-collapse: collapse;
    font-size: var(--t-piccolo);
    border: 1px solid var(--riga);
    border-radius: var(--raggio);
}

.cambio-trovati th[b-dzfhwzlcem] {
    padding: var(--s1) var(--s2);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: left;
    color: var(--grigio);
}

.cambio-trovati td[b-dzfhwzlcem] {
    padding: var(--s2);
    vertical-align: top;
    border-top: 1px solid var(--riga);
}

.cambio-trovati tbody tr[b-dzfhwzlcem] { cursor: pointer; }

.cambio-trovati tbody tr:hover[b-dzfhwzlcem],
.cambio-trovati tbody tr:focus-within[b-dzfhwzlcem],
.cambio-trovati tbody tr.scelto[b-dzfhwzlcem] { background: var(--verde-tenue); }

.cambio-trovato[b-dzfhwzlcem] {
    padding: 0;
    border: 0;
    background: none;
    color: var(--inchiostro);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.cambio-trovato:focus-visible[b-dzfhwzlcem] { outline: 2px solid var(--verde); outline-offset: 2px; }

.cambio-trovato-via[b-dzfhwzlcem] {
    width: 40%;
    color: var(--grigio);
    overflow-wrap: anywhere;
}

/* perche' il lead non si cambia: in rosso, col triangolo */
.cambio-blocco[b-dzfhwzlcem] { color: var(--allarme); }

/* il pulsante sotto il suo campo, staccato come un campo */
.siti-azione[b-dzfhwzlcem] { margin-top: var(--s2); }
/* /Components/Pages/Lavoro/Progetti/NuovoProgetto.razor.rz.scp.css */
/*
    Il modulo del progetto nuovo: come quello degli abbonamenti, i riquadri affiancati quanti ne
    stanno e i pulsanti sotto a tutta larghezza. I processi sono un elenco numerato, perche'
    l'ordine e' quello in cui il lavoro passa di mano.
*/

.modulo-progetto[b-ykw2x5odoh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
    align-items: start;
    gap: var(--s4);
    max-width: 96rem;
    padding-bottom: var(--s6);
}

.modulo-progetto > .pannello-piede[b-ykw2x5odoh] {
    grid-column: 1 / -1;
    /* resta in fondo allo schermo mentre si compila, come il piede delle schede: il Salva si vede sempre */
    position: sticky;
    bottom: calc(var(--spazio-fondo, 0px) * -1);
    z-index: 3;
    padding: var(--s3) var(--s4);
    background: var(--superficie-alt);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
}

/* lo stacco lo da' la griglia: il margine di .scheda + .scheda abbassava tutti i riquadri tranne il primo */
.modulo-progetto > .scheda[b-ykw2x5odoh] { margin: 0; }

.modulo-progetto .scheda[b-ykw2x5odoh] {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.modulo-nota[b-ykw2x5odoh] {
    margin: 0;
    color: var(--grigio);
    font-size: var(--t-piccolo);
}

.descrizione-lavoro[b-ykw2x5odoh] {
    padding: var(--s2) var(--s3);
    background: var(--superficie-alt);
    border-radius: 4px;
    font-size: var(--t-piccolo);
}

.importo[b-ykw2x5odoh] {
    text-align: right;
}

.siti-nuovo[b-ykw2x5odoh] {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    border: 0;
    padding: 0;
    margin: 0;
}

.processi-nuovo[b-ykw2x5odoh] {
    list-style: decimal;
    margin: 0;
    padding-left: var(--s5);
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}

.processo-nuovo[b-ykw2x5odoh] {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    padding-bottom: var(--s3);
    border-bottom: 1px solid var(--riga);
}

.processo-nuovo-testa[b-ykw2x5odoh] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s1) var(--s3);
}

.persone-nuovo[b-ykw2x5odoh] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s1);
}

.persone-nuovo li[b-ykw2x5odoh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
}

.persona-nome[b-ykw2x5odoh] {
    min-width: 10rem;
}

.campo-breve[b-ykw2x5odoh] {
    width: auto;
    min-width: 7rem;
}

.tenue[b-ykw2x5odoh] {
    color: var(--grigio);
    font-size: var(--t-piccolo);
}
/* /Components/Pages/Lavoro/Progetti/ProgettiElenco.razor.rz.scp.css */
/*
    Le celle su misura dell'elenco dei progetti. Il resto - tabella, filtri, stati, giorni - viene
    dal design system: qui solo quello che esiste solo in questa pagina.
*/

.corrente[b-gv5ft1wzau] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s1) var(--s2);
}

.tenue[b-gv5ft1wzau] {
    color: var(--grigio);
}

/*
    L'avanzamento: barra e numero sulla stessa riga, la barra a larghezza fissa perche' le barre
    si confrontano solo se partono tutte dallo stesso punto e sono lunghe uguali.
*/
.avanzamento[b-gv5ft1wzau] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s2);
}

.barra[b-gv5ft1wzau] {
    display: inline-block;
    width: 64px;
    height: 6px;
    border-radius: 3px;
    background: var(--riga);
    overflow: hidden;
}

.barra-piena[b-gv5ft1wzau] {
    display: block;
    height: 100%;
    background: var(--verde);
}

/* la data e "ritardo Ng" sulla stessa riga: uno sotto l'altro raddoppiavano la testata del riquadro, e nella
   colonna stretta dell'elenco andavano a capo (04/10/2026, il committente: sulla stessa linea) */
.consegna[b-gv5ft1wzau] {
    display: inline-flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    align-items: baseline;
    justify-content: flex-end;
    column-gap: var(--s2);
    line-height: 1.3;
}

.consegna-quando[b-gv5ft1wzau] { font-size: var(--t-micro); }

/* lo stato dei pagamenti e' un link alla linguetta Pagamenti: si capisce al passaggio, senza sottolineare tutto */
.pagamento-link[b-gv5ft1wzau] { color: inherit; text-decoration: none; }

.pagamento-link:hover .stato[b-gv5ft1wzau],
.pagamento-link:focus-visible .stato[b-gv5ft1wzau] { text-decoration: underline; }

/*
    il pagamento che aspetta il processo corrente (01/10/2026), sopra la barra: al massimo due righe,
    la frase intera nel title, perche' la cella non allunghi la riga
*/
.pagamento-atteso[b-gv5ft1wzau] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;

    /* .stato non va a capo: qui la frase e' lunga e deve andarci */
    white-space: normal;
    margin-bottom: var(--s1);
}

/* col display a righe contate il gap di .stato non c'e' piu': lo spazio fra segno e frase */
.pagamento-atteso > span[aria-hidden][b-gv5ft1wzau] { margin-right: var(--s1); }

/*
    grigio solo quando non e' un'etichetta della scala: sul fondo rosso del ritardo il grigio vinceva
    sul bianco della scala e non si leggeva (29/09/2026)
*/
.consegna-quando:not(.stato)[b-gv5ft1wzau] { color: var(--grigio); }

/* il ritardo e la consegna vicina: colore, glifo e parole insieme */
.consegna.allarme .consegna-quando[b-gv5ft1wzau] {
    color: var(--allarme);
    font-weight: 700;
}

.consegna.attesa .consegna-quando[b-gv5ft1wzau] {
    color: var(--attesa);
    font-weight: 600;
}

.pagamento[b-gv5ft1wzau] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s1) var(--s2);
}

.pagamento .tenue[b-gv5ft1wzau] {
    font-size: var(--t-micro);
}


/* /Components/Pages/Lavoro/Progetti/ProgettoScheda.razor.rz.scp.css */
/*
    La scheda del progetto. L'intestazione ferma e il contenitore che smette di scorrere vengono
    dalle classi della scheda del lead (componenti.css); qui ci sono le tre colonne e i pezzi che
    esistono solo in questa pagina.
*/

/*
    Tre parti, una alla volta (?vista=). Il lavoro in due colonne: i processi, che sono la
    struttura, e la cronologia accanto, larga perche' le note sono la cosa lunga; scorrono ognuna
    per conto suo. Soldi e Dati e file sono riquadri in colonne di giornale: si riempiono dall'alto
    senza buchi, quanti ne stanno nella larghezza. La specificita' in piu' (.scheda-lead.scheda-
    progetto) vince sulle due colonne della scheda del lead senza toccare il suo stile.
*/
.scheda-lead.scheda-progetto.vista-lavoro[b-onmrzdybgp] {
    grid-template-columns: minmax(320px, 2fr) minmax(0, 3fr);
    grid-template-areas: "processi cronologia";
}

.scheda-lead.scheda-progetto:not(.vista-lavoro)[b-onmrzdybgp] {
    display: block;
    overflow-y: auto;
}

.colonna[b-onmrzdybgp] {
    min-height: 0;
    overflow-y: auto;

    /* lo spazio per la barra di scorrimento, senza che le schede ci finiscano sotto */
    padding-right: var(--s1);
}

.colonna-processi[b-onmrzdybgp] { grid-area: processi; }

.colonna-cronologia[b-onmrzdybgp] {
    grid-area: cronologia;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    padding-right: 0;
}

/*
    Pagamenti e Dati e file: due colonne, ognuna una pila di schede. Nei pagamenti la loro scheda a
    sinistra, larga - importi e stati delle rate si leggono su una riga - e accanto, piu' stretti,
    margine e servizi esterni. Nei dati il riepilogo e il referente a sinistra, e a destra quello
    che si apre: documenti, allegati, siti, grafiche. Prima erano colonne di giornale che nella
    pratica diventavano una colonna sola, larga tutta la pagina.
*/
.colonna-due[b-onmrzdybgp] {
    overflow: visible;
    display: grid;
    gap: var(--s3);
    align-items: start;
}

.colonna-soldi[b-onmrzdybgp] { grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); }

/* senza margine e senza servizi la pila di destra non c'e' (26/09/2026): i pagamenti prendono tutta la riga */
.colonna-soldi:not(:has(> .colonna-pila))[b-onmrzdybgp] { grid-template-columns: minmax(0, 1fr); }

.colonna-dati[b-onmrzdybgp] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.colonna-pila[b-onmrzdybgp] {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    min-width: 0;
}

/* lo stacco lo da' la pila: il margine di .scheda + .scheda lo raddoppiava (::deep: i Riquadro sono del componente) */
.colonna-pila[b-onmrzdybgp] >  .scheda,
.colonna-pila[b-onmrzdybgp] >  .riquadri-colonna > .scheda { margin: 0; }

@media (max-width: 1100px) {
    .colonna-due[b-onmrzdybgp] { grid-template-columns: minmax(0, 1fr); }
}

/* sul telefono tutto in fila, come la scheda del lead: la pagina torna a scorrere intera */
@media (max-width: 900px) {
    /* il margine e' dell'amministratore alla scrivania: sul telefono non c'e', e i pagamenti prendono tutta la larghezza */
    [b-onmrzdybgp] .margine-scheda { display: none; }

    /* i riquadri stanno nella colonna di quelli che si spostano (ColonnaRiquadri, display: contents; 05/10/2026) */
    .colonna-pila:not(:has(> .scheda:not(.margine-scheda), > .riquadri-colonna > .scheda:not(.margine-scheda)))[b-onmrzdybgp] { display: none; }

    .scheda-lead.scheda-progetto.vista-lavoro[b-onmrzdybgp] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "processi" "cronologia";
        overflow: visible;
    }

    .colonna[b-onmrzdybgp],
    .colonna-cronologia[b-onmrzdybgp] {
        overflow: visible;
        padding-right: 0;
    }
}

/* ---------- intestazione ---------- */

/* le azioni della testata in due gruppi, il cliente e il progetto: si leggono separate */
.azioni-gruppo[b-onmrzdybgp] {
    display: inline-flex;
    gap: var(--s1);
    padding-left: var(--s2);
    border-left: 1px solid var(--riga);
}

/*
    I quattro numeri che si guardano per primi: a che punto e' il lavoro, quando si consegna,
    quanto e' entrato, il contratto. Una casella ciascuno, il numero grande e sotto cosa vuol dire.
*/
.progetto-numeri[b-onmrzdybgp] {
    display: grid;
    /* quattro, cinque o sei: siti e grafiche ci sono solo se il progetto li prevede (02/10/2026) */
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--s3);
    margin-bottom: var(--s2);
}

.numero[b-onmrzdybgp] {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    min-width: 0;
    padding: var(--s2) var(--s3);
    /*
        la tinta la da' una classe tinta-* (base.css): blu il lavoro, viola la consegna, verde
        l'incassato. Il contratto resta bianco: la sua cifra e' gia' un'etichetta colorata.
    */
    background: var(--tinta-fondo, var(--superficie));
    border: 1px solid var(--tinta-fondo, var(--riga));
    border-top: 4px solid var(--tinta, var(--riga));
    border-radius: var(--raggio-grande);
}

/*
    Ridotti (12/10/2026): solo il nome e la cifra, in una riga. Su uno schermo basso i riquadri interi lasciavano
    allo storico una striscia in fondo. La scelta e' della persona e vale su ogni progetto (ViewBag).
*/
.progetto-numeri.ridotti[b-onmrzdybgp] {
    gap: var(--s2);
    margin-bottom: var(--s1);
}

.progetto-numeri.ridotti .numero[b-onmrzdybgp] {
    flex-direction: row;
    align-items: baseline;
    gap: var(--s2);
    padding: var(--s1) var(--s2);
    border-top-width: 3px;
}

/* il nome puo' stare dentro la testata con la matita (siti), e il lead si legge dal suo link: le matite no */
.progetto-numeri.ridotti .numero > :not(.numero-nome):not(.numero-cifra):not(.numero-testa):not(.in-linea)[b-onmrzdybgp] { display: none; }

.progetto-numeri.ridotti .in-linea-matita[b-onmrzdybgp] { display: none; }

.progetto-numeri.ridotti .numero-cifra[b-onmrzdybgp] { font-size: var(--t-base); }

.numero-nome[b-onmrzdybgp] {
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tinta, var(--grigio));
}

.numero-cifra[b-onmrzdybgp] {
    font-size: var(--t-grande);
    font-weight: 600;
    color: var(--tinta, var(--inchiostro));
}

.numero-nota[b-onmrzdybgp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s1) var(--s2);
    font-size: var(--t-piccolo);
}

/* un sito o una grafica per riga, col suo link: il dominio lungo va a capo invece di uscire */
.numero-riga[b-onmrzdybgp] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: anywhere;
}

.numero-nota-link[b-onmrzdybgp] { font-size: var(--t-piccolo); color: var(--grigio); }

/*
    Il nome del riquadro con la sua matita (Siti: 06/10/2026), quella del lead sta sulla riga del nome del
    lead. Sono le matite piatte della modifica sul posto (.in-linea), in fondo a destra; piccole, non
    allungano la casella: stanno nell'altezza della riga.
*/
.numero-testa[b-onmrzdybgp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
}

.numero .in-linea[b-onmrzdybgp] { align-items: center; }

.numero .in-linea .btn[b-onmrzdybgp] {
    --alto-controllo: 22px;
    margin-block: -4px;
}

/* il dominio e la matita della sua scheda sulla stessa riga, la matita in fondo a destra */
.numero-sito[b-onmrzdybgp] {
    display: flex;
    align-items: center;
    gap: var(--s1);
    min-width: 0;
}

@media (max-width: 900px) {
    .progetto-numeri[b-onmrzdybgp] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tenue[b-onmrzdybgp] {
    color: var(--grigio);
}

.ritardo[b-onmrzdybgp] {
    color: var(--allarme);
    font-weight: 700;
}

.contatti[b-onmrzdybgp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--s1);
    font-size: var(--t-piccolo);
}

/* ---------- processi ---------- */

.processi[b-onmrzdybgp] {
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
    Ogni processo e' una scheda piccola: la fascia di testa come negli storici - segno, nome, stato,
    l'icona di chi ci lavora - e sotto il corpo, rientrato sotto il nome. Il bordo sinistro dice lo
    stato insieme al segno e alla parola: verde il corrente, verde scuro i chiusi, grigio gli altri.
*/
.processo[b-onmrzdybgp] {
    border: 1px solid var(--riga);
    border-left: 3px solid var(--riga);
    border-radius: var(--raggio);
    background: var(--superficie);
    font-size: var(--t-piccolo);
    overflow: hidden;
}

.processo + .processo[b-onmrzdybgp] {
    margin-top: var(--s2);
}

/* il processo corrente si riconosce dal bordo, dal segno e dalla parola "in corso" insieme */
.processo.corrente[b-onmrzdybgp] {
    border-left-color: var(--verde);
}

.processo.corrente .processo-testa[b-onmrzdybgp] { background: var(--verde-tenue); }

.processo.chiuso[b-onmrzdybgp] {
    border-left-color: var(--fatto);
}

.processo-testa[b-onmrzdybgp] {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: 5px var(--s3);
    background: var(--testa-voce);
}

.processo-segno[b-onmrzdybgp] {
    flex: 0 0 auto;
    width: 1em;
    color: var(--grigio);
}

.processo.chiuso .processo-segno[b-onmrzdybgp] { color: var(--fatto); }

.processo.corrente .processo-segno[b-onmrzdybgp] { color: var(--link); }

/* il nome del processo in maiuscolo, come i titoli delle schede: e' l'intestazione del suo riquadro */
.processo-nome[b-onmrzdybgp] {
    font-weight: 600;
    min-width: 0;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.processo.da-fare .processo-nome[b-onmrzdybgp] { color: var(--grigio); }

.processo-stato[b-onmrzdybgp] {
    display: inline-flex;
    gap: var(--s1);
    margin-left: auto;
    flex: 0 0 auto;
    color: var(--grigio);
    font-size: var(--t-micro);
}

/* il corpo sotto la fascia, rientrato sotto il nome; i pezzi a 8px l'uno dall'altro */
.processo-corpo[b-onmrzdybgp] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s2);
    padding: var(--s2) var(--s3) var(--s2) calc(var(--s3) + 1em + var(--s2));
}

.processo-corpo:empty[b-onmrzdybgp] { display: none; }

.processo-descrizione[b-onmrzdybgp] {
    color: var(--grigio);
    font-size: var(--t-micro);
}

.processo-persone[b-onmrzdybgp] {
    list-style: none;
    margin: 0;
    padding: 0;
    align-self: stretch;
}

/*
    nome a sinistra, compenso e chiusura forzata a destra. Quando non ci stanno sulla stessa riga il
    compenso scende sotto, sempre a destra (28/09/2026): con la griglia di prima, in una colonna
    stretta, il nome si spezzava parola per parola (la spunta sopra, "Pietro" sotto, "referral" e
    "Fabio" su due righe) e il compenso si divideva fra percentuale e importo.
*/
.processo-persone li[b-onmrzdybgp] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s1) var(--s3);
    padding: var(--s1) 0;
}

.processo-persone li > .persona-nome[b-onmrzdybgp] { flex: 1 1 12rem; }

.processo-persone li > .compenso[b-onmrzdybgp] { margin-left: auto; }

.processo-persone li > .persona-azione:empty[b-onmrzdybgp] { display: none; }

.processo-persone li + li[b-onmrzdybgp] { border-top: 1px solid var(--riga); }

.persona-nome[b-onmrzdybgp] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0 var(--s2);
    min-width: 0;
}

.processo-persone .fatto[b-onmrzdybgp] { color: var(--fatto); }

.compenso[b-onmrzdybgp] {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: baseline;
    gap: var(--s1) var(--s2);
}

/* percentuale e importo, "ref. 1" e la sua cifra: ognuno resta intero */
.compenso > *[b-onmrzdybgp] { white-space: nowrap; }

/* ---------- liste di cose da fare ---------- */

.task[b-onmrzdybgp] {
    align-self: stretch;
}

.task summary[b-onmrzdybgp] {
    cursor: pointer;
    color: var(--grigio);
    font-size: var(--t-micro);
    font-weight: 600;
}

/*
    Ogni cosa da fare e' una riga a se': righe di testo strette dentro (interlinea 1,35), una linea
    sottile e 8px sopra e sotto fra l'una e l'altra. Prima le righe di una voce stavano piu' lontane
    fra loro che dalla voce dopo, e l'elenco sembrava un paragrafo solo.
*/
.task-elenco[b-onmrzdybgp] {
    list-style: none;
    margin: var(--s2) 0 0;
    padding: 0;
}

.task-elenco li[b-onmrzdybgp] {
    padding: var(--s2) 0;
    line-height: 1.35;
}

.task-elenco li + li[b-onmrzdybgp] { border-top: 1px solid var(--riga); }

.task-elenco label[b-onmrzdybgp] {
    display: flex;
    align-items: flex-start;
    gap: var(--s2);
}

/* la casella in pari con la prima riga del testo */
.task-elenco input[b-onmrzdybgp] {
    flex: 0 0 auto;
    margin: calc((1lh - 13px) / 2) 0 0;
    accent-color: var(--verde);
}

/* un task fatto resta leggibile: si abbassa, non si barra - barrato non si rilegge */
.task-elenco li.fatto label span[b-onmrzdybgp] { color: var(--grigio); }

.task-chi[b-onmrzdybgp] {
    display: block;
    margin: 2px 0 0 calc(13px + var(--s2));
    color: var(--grigio);
    font-size: var(--t-micro);
    font-family: var(--mono);
}

/* ---------- pagamenti, documenti, allegati ---------- */

/* tre caselle affiancate: etichetta piccola sopra, cifra sotto, e il conto delle rate */
.caselle-soldi[b-onmrzdybgp] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s2);
    margin: 0 0 var(--s3);
}

.casella-soldi[b-onmrzdybgp] {
    padding: var(--s2);
    border-radius: var(--raggio);
    /* blu da saldare, verde saldato, giallo da chiedere (tinta-* in base.css) */
    background: var(--tinta-fondo, var(--superficie-alt));
    box-shadow: inset 0 3px 0 var(--tinta, var(--riga));
}

.casella-soldi dt[b-onmrzdybgp] {
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tinta, var(--grigio));
}

.casella-soldi dd[b-onmrzdybgp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: var(--s1) 0 0;
    font-size: var(--t-micro);
    line-height: 1.4;
}

.casella-cifra[b-onmrzdybgp] {
    font-size: var(--t-base);
    font-weight: 700;
    white-space: nowrap;
    color: var(--tinta, var(--inchiostro));
}

.casella-cifra.da-chiedere[b-onmrzdybgp] { color: var(--attesa); }

.casella-cifra.tutto-chiesto[b-onmrzdybgp] { color: var(--fatto); }

/* la prossima rata: una fascia sua, con giorno e importo in evidenza; rossa se e' gia' passata */
.prossima-rata[b-onmrzdybgp] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s1) var(--s3);
    margin: 0 0 var(--s3);
    padding: var(--s2) var(--s3);
    background: var(--blu-fondo);
    border-left: 4px solid var(--blu);
    border-radius: var(--raggio);
    font-weight: 600;
}

.prossima-rata-etichetta[b-onmrzdybgp] {
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--grigio);
}

.prossima-rata.scaduta[b-onmrzdybgp] {
    background: var(--allarme-fondo);
    border-left-color: var(--allarme);
}

.prossima-rata-ritardo[b-onmrzdybgp] { color: var(--allarme); font-weight: 700; }

/* le rate: piu' aria fra una e l'altra, e l'interlinea larga per stato e proforma */
.rate li[b-onmrzdybgp] {
    gap: var(--s1);
    padding: var(--s3) 0;
    line-height: 1.5;
}

.rate .riga-pagamento a[b-onmrzdybgp],
.rate .riga-pagamento > .mono:first-child[b-onmrzdybgp] { font-weight: 700; }

.rate .importo[b-onmrzdybgp] { font-weight: 700; }

/*
    La testa dei pagamenti ferma in cima mentre le rate scorrono (29/09/2026): sticky dentro la
    pagina che scorre, col fondo della scheda perche' le rate le passino sotto senza vedersi.
*/
.pagamenti-testa[b-onmrzdybgp] {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: calc(var(--spazio-scheda, var(--s4)) * -1) calc(var(--spazio-scheda, var(--s4)) * -1) 0;
    padding: var(--spazio-scheda, var(--s4)) var(--spazio-scheda, var(--s4)) var(--s3);
    background: var(--superficie);
    border-bottom: 1px solid var(--riga);
    border-radius: var(--raggio-grande) var(--raggio-grande) 0 0;
}

/* le azioni sul contratto nei Dati e file: in fila, staccate fra loro e da sopra */
.contratto-azioni[b-onmrzdybgp] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--s2);
    margin-top: var(--s2);
}

.contratto-azioni:empty[b-onmrzdybgp] { display: none; }

/* nel riquadro del contratto il pulsante e il pdf sulla stessa riga */
.numero-contratto[b-onmrzdybgp] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); }

/* chi segue l'incasso: nomi in fila, ognuno con la sua x */
.persone-collegate[b-onmrzdybgp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin: var(--s3) 0;
}

/* la riga degli invii: cosa e' partito a sinistra, il pulsante per mandarla a destra sotto l'importo */
.rata-invio[b-onmrzdybgp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s1) var(--s3);
}

/*
    Tutti i pulsanti della rata insieme a destra, vicini (16/10/2026, il committente: "allinea a destra anche pulsanti
    proforma e invia proforma"): la nota spinge, i pulsanti no. Con margin-left: auto su ogni pulsante lo spazio
    libero si divideva fra loro e Proforma e Invia restavano in mezzo alla riga.
*/
.rata-invio > .coppie-nota[b-onmrzdybgp] { margin-right: auto; }

.rate .stato[b-onmrzdybgp] { align-self: flex-start; white-space: normal; }

.barra[b-onmrzdybgp] {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: var(--riga);
    overflow: hidden;
}

.barra-piena[b-onmrzdybgp] {
    display: block;
    height: 100%;
    background: var(--verde);
}

/* la barra dei soldi: il giallo (chiesto) sotto, il verde (incassato) sopra, tutti e due da sinistra */
.barra-soldi[b-onmrzdybgp] { position: relative; }

.barra-soldi > span[b-onmrzdybgp] {
    position: absolute;
    inset: 0 auto 0 0;
}

.barra-soldi > .barra-piena[b-onmrzdybgp] { background: var(--fatto); }

.barra-chiesta[b-onmrzdybgp] { background: color-mix(in srgb, var(--attesa) 55%, var(--attesa-fondo)); }

.riga-pagamento[b-onmrzdybgp] {
    display: flex;
    align-items: baseline;
    gap: var(--s2);
}

.riga-pagamento .importo[b-onmrzdybgp] {
    margin-left: auto;
}

.documento summary[b-onmrzdybgp] {
    cursor: pointer;
}

.documento-testo[b-onmrzdybgp] {
    max-height: 320px;
    overflow-y: auto;
    margin-top: var(--s2);
    padding: var(--s2) var(--s3);
    border-left: 3px solid var(--riga);
    background: var(--superficie-alt);
    overflow-wrap: anywhere;
}

.nome-file[b-onmrzdybgp] {
    overflow-wrap: anywhere;
}

/* ---------- scritture ---------- */

/* i pulsanti di un processo: chiudere la propria parte, rimandare indietro */
.processo-azioni[b-onmrzdybgp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s1) var(--s3);
}

/* chi l'ha scritto e le icone per correggerlo, sulla stessa riga */
.riga-azioni[b-onmrzdybgp] {
    display: flex;
    align-items: center;
    gap: var(--s1);
}

.riga-azioni .coppie-nota[b-onmrzdybgp] { margin-right: auto; }

/* il margine del progetto, dell'amministratore: i processi con il loro compenso */
.margine-costi[b-onmrzdybgp] {
    list-style: none;
    margin: var(--s3) 0 0;
    padding: 0;
    font-size: var(--t-piccolo);
}

.margine-costi li[b-onmrzdybgp] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--s3);
    padding: var(--s1) 0;
    border-bottom: 1px solid var(--riga);
}

/* le scelte in fila sotto un valore: il venditore, il servizio da aggiungere */
.venditore-cambia[b-onmrzdybgp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin-top: var(--s1);
}

/* il dettaglio della voce dello storico del lead dietro a un aggiornamento */
.voce-lead[b-onmrzdybgp] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s1) var(--s3);
    margin-top: var(--s1);
    font-size: var(--t-piccolo);
    color: var(--grigio);
}

.voce-lead .storico-note[b-onmrzdybgp] {
    flex-basis: 100%;
    color: var(--inchiostro);
}


/* il pagamento atteso nel riquadro Incassato (01/10/2026): la frase e' lunga, e .stato non va a capo */
.pagamento-atteso[b-onmrzdybgp] {
    white-space: normal;
    align-items: baseline;
}

/* la data e il badge del ritardo (Consegna, Rinvio) non si toccano (04/10/2026): lo stesso stacco di "Aggiornato" */
dd > .mono + .stato[b-onmrzdybgp] { margin-left: var(--s2); }
/* /Components/Pages/Lavoro/Ticket/Ticket.razor.rz.scp.css */
/*
    La pagina dei ticket. Solo quello che e' suo: tabella, linguette, stati e colonna dei giorni
    arrivano dal design system.
*/

/* Il riepilogo: quattro cifre in fila, che sul telefono vanno a due per riga */
.ticket-riepilogo[b-x3cys3i8en] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s3);
    margin-bottom: var(--s4);
}

.ticket-cifra[b-x3cys3i8en] {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    padding: var(--s3) var(--s4);
    /* la tinta la da' una classe tinta-* (base.css): rosso da gestire, giallo in attesa, verde a posto */
    background: var(--tinta-fondo, var(--superficie));
    border: 1px solid var(--tinta-fondo, var(--riga));
    border-top: 4px solid var(--tinta, var(--riga));
    border-radius: var(--raggio-grande);
}

.ticket-cifra-numero[b-x3cys3i8en] {
    font-size: var(--t-grande);
    font-weight: 600;
    color: var(--tinta, var(--inchiostro));
}

.ticket-cifra-testo[b-x3cys3i8en] {
    font-size: var(--t-piccolo);
    color: var(--tinta, var(--grigio));
}

/* Elenco e dettaglio: affiancati su schermo largo, uno sotto l'altro sul telefono */
.ticket-corpo[b-x3cys3i8en] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4);
    align-items: start;
}

.ticket-corpo.con-dettaglio[b-x3cys3i8en] {
    grid-template-columns: minmax(0, 1fr) clamp(360px, 32%, 560px);
}

/*
    Nel markup il dettaglio viene PRIMA dell'elenco, e qui lo si sposta a destra: sul telefono,
    dove c'e' una colonna sola, cosi' compare sopra - e' quello che si e' appena toccato - senza
    un order che separerebbe l'ordine visivo da quello letto dallo screen reader e dal Tab.
*/
.ticket-corpo.con-dettaglio .ticket-elenco[b-x3cys3i8en] { grid-column: 1; grid-row: 1; }
.ticket-corpo.con-dettaglio .ticket-dettaglio[b-x3cys3i8en] { grid-column: 2; grid-row: 1; }

.ticket-elenco[b-x3cys3i8en] { min-width: 0; }

.ticket-nota[b-x3cys3i8en] {
    margin-top: var(--s3);
    max-width: 80ch;
}

.ticket-tenue[b-x3cys3i8en] { color: var(--grigio); }

.ticket-rosso[b-x3cys3i8en] { color: var(--allarme); font-weight: 600; }

/* la riga del sito aperto: il segno vero e' il link con aria-current, questo e' in piu' */
.ticket-elenco[b-x3cys3i8en]  tr.ticket-aperto td { background: var(--verde-tenue); }

/* Il pannello del sito: resta fermo mentre l'elenco scorre */
.ticket-dettaglio[b-x3cys3i8en] {
    position: sticky;
    top: var(--s4);
    max-height: calc(100vh - var(--barra-alta) - var(--s6));
    overflow-y: auto;
}

.ticket-dettaglio-testa[b-x3cys3i8en] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s2);
}

.ticket-dettaglio-titolo[b-x3cys3i8en] {
    margin: 0;
    font-size: var(--t-medio);
    word-break: break-all;
}

.ticket-dettaglio-cliente[b-x3cys3i8en] { margin: var(--s1) 0 var(--s3); }

.ticket-dati[b-x3cys3i8en] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--s1) var(--s3);
    margin: 0 0 var(--s4);
    font-size: var(--t-base);
}

.ticket-dati dt[b-x3cys3i8en] { color: var(--grigio); }

.ticket-dati dd[b-x3cys3i8en] { margin: 0; text-align: right; }

.ticket-storico[b-x3cys3i8en] {
    list-style: none;
    margin: 0 0 var(--s3);
    padding: 0;
}

.ticket-storico li[b-x3cys3i8en] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 var(--s2);
    padding: var(--s2) 0;
    border-bottom: 1px solid var(--riga);
    font-size: var(--t-base);
}

.ticket-storico li:last-child[b-x3cys3i8en] { border-bottom: 0; }

.ticket-storico .mono[b-x3cys3i8en] { font-size: var(--t-piccolo); }

.ticket-storico li > :nth-child(3)[b-x3cys3i8en] { grid-column: 2; }

.ticket-storico-oggetto[b-x3cys3i8en] { min-width: 0; overflow-wrap: anywhere; }

.ticket-dettaglio-piede[b-x3cys3i8en] {
    margin-top: var(--s4);
    padding-top: var(--s3);
    border-top: 1px solid var(--riga);
}

@media (max-width: 1100px) {
    .ticket-corpo.con-dettaglio[b-x3cys3i8en] { grid-template-columns: minmax(0, 1fr); }

    .ticket-corpo.con-dettaglio .ticket-elenco[b-x3cys3i8en],
    .ticket-corpo.con-dettaglio .ticket-dettaglio[b-x3cys3i8en] { grid-column: auto; grid-row: auto; }

    .ticket-dettaglio[b-x3cys3i8en] {
        position: static;
        max-height: none;
    }
}

@media (max-width: 720px) {
    .ticket-riepilogo[b-x3cys3i8en] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/*
    Il modulo per riassegnare, sopra l'elenco dei lavorati: largo come l'elenco, con la persona e
    il compenso in una colonna (modulo-colonne, in componenti.css) invece di una scheda stretta
    con il vuoto a destra.
*/
.ticket-riassegna .modulo-sezione[b-x3cys3i8en] { gap: var(--s2); }

.ticket-riassegna-cosa[b-x3cys3i8en] {
    margin: 0;
    overflow-wrap: anywhere;
}

/* il nome nella colonna Chi e' anche il pulsante per cambiarlo: si legge come testo */
.ticket-chi[b-x3cys3i8en] {
    padding: 0 var(--s1);
    font-weight: inherit;
    text-align: left;
}

.ticket-chi span[b-x3cys3i8en] { color: var(--grigio); }
/* /Components/Pages/Notifiche/Notifiche.razor.rz.scp.css */
/*
    L'elenco sta su un riquadro come la notifica aperta: con un fondo pagina colorato le righe
    non galleggiano. Non e' una .scheda perche' ".scheda + .scheda" staccherebbe la colonna accanto.
*/
.notifiche-elenco[b-rj9zeiij97] {
    padding: var(--s4);
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
}

/* sul riquadro la notifica aperta non puo' avere il fondo del riquadro: prende quello alternato */
.notifiche-elenco .notifiche-voce.aperta[b-rj9zeiij97] { background: var(--superficie-alt); }
/* /Components/Pages/Oggi/Appunti/Appunti.razor.rz.scp.css */
.appunti-filtri[b-hjmw5hqdfr] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--s3);
}

.appunti-filtro[b-hjmw5hqdfr] {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    min-width: 160px;
}

.appunti-testo[b-hjmw5hqdfr] { min-width: 240px; }

[b-hjmw5hqdfr] .appunti-cosa { word-break: break-word; }

/* il segnale sta sopra il testo, staccato di poco */
[b-hjmw5hqdfr] .appunti-con-esito { margin-bottom: var(--s1); }

[b-hjmw5hqdfr] .appunti-esito {
    margin-top: var(--s1);
    font-size: var(--t-piccolo);
    color: var(--grigio);
}

[b-hjmw5hqdfr] .appunti-azioni {
    display: inline-flex;
    gap: var(--s2);
}
/* /Components/Pages/Oggi/Calendario/Calendario.razor.rz.scp.css */
/*
    Il calendario. Stili solo di questa pagina: i colori delle famiglie di eventi stanno qui e non
    nei token, perche' non li usa nessun altro.

    Ogni colore di famiglia e' una coppia - il tratto (bordo e parola) e il fondo - e ogni tratto
    sul suo fondo passa WCAG AA per il testo normale, in tutti e due i temi:
      chiaro  appuntamento --blu su --blu-fondo = 6,52   da confermare --viola su --viola-fondo = 7,25
      scuro   appuntamento --blu su --blu-fondo = 7,58   da confermare --viola su --viola-fondo = 7,77
    (misurati il 25/09/2026, col contrasto alzato; i valori stanno in tokens.css)
    Richiami, assenze e appunti usano i token di stato (attesa, allarme, grigio), gia' misurati.
    L'ora scritta in --grigio sta sopra 4,9 su tutti i fondi chiari e sopra 6,6 su quelli scuri.
    Il colore non e' mai da solo: accanto c'e' sempre la parola e il segno.
*/

/*
    Un carattere solo in tutto il calendario, anche per ore e date: accanto al nome del cliente o
    dentro una frase ("Davide il 25/08/2026") il monospaziato stonava. Le cifre restano allineate
    in colonna con le cifre tabulari.
*/
.cal[b-1cmrypdiy2] {
    font-variant-numeric: tabular-nums;

    --c-app: var(--blu);
    --f-app: var(--voce-appuntamento);
    --c-conf: var(--viola);
    --f-conf: var(--voce-confermare);

    /* l'altezza minima di una mezz'ora nella vista giorno: un evento e un po' d'aria. Con piu'
       eventi la riga cresce */
    --mezzora: 34px;

    /* la colonna delle ore, in settimana e nel giorno: "08:00" e un filo d'aria, non di piu' */
    --colonna-ore: 42px;

    /* in settimana niente colonna delle ore (29/09/2026): l'ora e' scritta nelle caselle vuote */
    --colonne-settimana: repeat(7, minmax(0, 1fr));

    /* il pannello di lato: la larghezza scelta dalla persona (--cal-pannello, Calendario.razor.js), 520 se non l'ha mai
       scelta. E' della persona e non della postazione: su uno schermo piu' stretto di quello dove l'ha scelta si ferma a
       600px dalla larghezza della finestra, cosi' accanto resta il calendario (dalla revisione, 16/10/2026) */
    --cal-lato: min(var(--cal-pannello, 520px), max(520px, 100vw - 600px));
}

.t-appuntamento[b-1cmrypdiy2] { --c: var(--c-app); --f: var(--f-app); }
.t-richiamo[b-1cmrypdiy2] { --c: var(--attesa); --f: var(--voce-richiamo); }
.t-confermare[b-1cmrypdiy2] { --c: var(--c-conf); --f: var(--f-conf); }
.t-appunto[b-1cmrypdiy2] { --c: var(--grigio); --f: var(--voce-appunto); }
.t-assenza[b-1cmrypdiy2] { --c: var(--allarme); --f: var(--allarme-fondo); }
/* gli eventi del Google Calendar (26/09/2026): un colore loro, e la "G" come segno */
.t-google[b-1cmrypdiy2] { --c: var(--google); --f: var(--google-fondo); }
/* il blocco e' un tempo in cui non si puo', come ferie e assenze: rosso anche lui, con le righe
   oblique che lo distinguono da una ferie a colpo d'occhio */
.t-blocco[b-1cmrypdiy2] {
    --c: var(--allarme);
    --f: repeating-linear-gradient(135deg, var(--allarme-fondo) 0 6px, color-mix(in srgb, var(--allarme) 22%, var(--allarme-fondo)) 6px 7px);
}

/* ---------- testa: comandi, linguette, legenda ---------- */

.cal-comandi[b-1cmrypdiy2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--s3);
    margin-bottom: var(--s3);
}

.cal-vai[b-1cmrypdiy2],
.cal-chi[b-1cmrypdiy2] {
    display: flex;
    flex-direction: column;
}

.cal-chi .campo[b-1cmrypdiy2] { width: 200px; }

/*
    Il calendarietto del giorno sta sopra il pannello di lato (16/10/2026, il committente: col modulo aperto il secondo
    mese e la freccia per cambiarlo finivano sotto il pannello). Il velo con lui, cosi' un clic sul pannello chiude prima
    il calendarietto.
*/
.cal-vai[b-1cmrypdiy2]  .scelta-giorno-velo { z-index: 61; }

.cal-vai[b-1cmrypdiy2]  .scelta-giorno-cal { z-index: 62; }

/* le viste e "Filtri" nella riga dei comandi, dopo il giorno */
.cal-viste[b-1cmrypdiy2] {
    display: flex;
    align-items: center;
    gap: var(--s2);
}

.cal-viste[b-1cmrypdiy2]  .linguette {
    margin-bottom: 0;
    border-bottom: 0;
}

.cal-filtri-apri[b-1cmrypdiy2] { flex: none; }

.cal-legenda[hidden][b-1cmrypdiy2] { display: none; }

.cal-legenda[b-1cmrypdiy2] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

.cal-scelta[b-1cmrypdiy2] { font-size: var(--t-piccolo); }

.cal-quanti[b-1cmrypdiy2] { color: var(--grigio); }

.cal-campione[b-1cmrypdiy2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 16px;
    font-size: var(--t-micro);
    font-weight: 700;
    color: var(--c);
    background: var(--f);
    border-left: 3px solid var(--c);
    border-radius: 2px;
}

.cal-vuoto[b-1cmrypdiy2] {
    margin: 0 0 var(--s3);
    font-size: var(--t-piccolo);
    color: var(--grigio);
}

.cal-vuoto strong[b-1cmrypdiy2] { color: var(--inchiostro); }

/* ---------- il contenitore che scorre ---------- */

/*
    Scorre lui e non la pagina, cosi' le intestazioni - i giorni in alto, le persone a sinistra -
    restano ferme: in una griglia di tredici persone per sette giorni, a meta' si deve ancora
    sapere di chi e' la riga e di che giorno e' la colonna.
*/
.cal-scorri[b-1cmrypdiy2] {
    overflow: auto;
    min-height: 320px;
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
}

/* ---------- mese ---------- */

.cal-mese[b-1cmrypdiy2] {
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
    overflow: hidden;
}

.cal-mese-testa[b-1cmrypdiy2],
.cal-mese-riga[b-1cmrypdiy2] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cal-mese-dow[b-1cmrypdiy2] {
    padding: var(--s1) var(--s2);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--grigio);
    border-left: 1px solid var(--riga);
}

.cal-mese-dow:first-child[b-1cmrypdiy2],
.cal-mese-cella:first-child[b-1cmrypdiy2] { border-left: 0; }

.cal-mese-cella[b-1cmrypdiy2] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    min-height: 116px;
    padding: 2px var(--s1) 28px;
    border-top: 1px solid var(--riga);
    border-left: 1px solid var(--riga);
}

.cal-mese-cella.fuori[b-1cmrypdiy2] { background: var(--superficie-alt); }

.contenuto .cal .cal-mese-cella.fuori a.cal-mese-numero[b-1cmrypdiy2] { color: var(--grigio); }

.cal-mese-alto[b-1cmrypdiy2] { display: flex; }

.contenuto .cal a.cal-mese-numero[b-1cmrypdiy2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 4px;
    font-size: var(--t-piccolo);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--inchiostro);
    text-decoration: none;
    border-radius: 999px;
}

.contenuto .cal a.cal-mese-numero:hover[b-1cmrypdiy2] { background: var(--superficie-alt); }

.contenuto .cal a.cal-mese-numero.oggi[b-1cmrypdiy2] { color: var(--su-accento); background: var(--verde); }

.cal-mese-cella:hover .cal-aggiungi[b-1cmrypdiy2],
.cal-mese-cella .cal-aggiungi:focus-visible[b-1cmrypdiy2] { opacity: 1; }

.cal-altri[b-1cmrypdiy2] {
    padding: 1px var(--s1);
    font-size: var(--t-micro);
    font-weight: 600;
}

/* ---------- settimana: la griglia oraria ---------- */

.cal-griglia[b-1cmrypdiy2] {
    /* l'altezza di una mezz'ora: quanto servono le quattro righe di un evento - ora e tipo, cliente,
       due righe di nota - che anche un richiamo di mezz'ora deve mostrare intere */
    --alto-mezzora: 66px;

    min-width: 880px;
}

.cal-griglia-testa[b-1cmrypdiy2],
.cal-griglia-corpo[b-1cmrypdiy2] {
    display: grid;
    grid-template-columns: var(--colonne-settimana);
}

.cal-griglia-testa[b-1cmrypdiy2] {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--superficie);
}

.cal-angolo[b-1cmrypdiy2] {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--superficie);
}

.cal-giorno-testa[b-1cmrypdiy2] {
    border-left: 1px solid var(--riga);
    text-align: center;
}

/* su una riga sola, "gio 24 set": la testata alta due righe rubava spazio alle ore */
.contenuto .cal .cal-giorno-testa a[b-1cmrypdiy2] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--s1);
    padding: var(--s1) 0;
    color: var(--inchiostro);
    text-decoration: none;
}

.cal-giorno-nome[b-1cmrypdiy2] {
    font-size: var(--t-piccolo);
    font-weight: 600;
    color: var(--grigio);
}

.cal-giorno-numero[b-1cmrypdiy2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 var(--s1);
    font-size: var(--t-base);
    font-weight: 600;
    border-radius: 999px;
}

.contenuto .cal .cal-giorno-testa a:hover .cal-giorno-numero[b-1cmrypdiy2] { background: var(--superficie-alt); }

.cal-giorno-numero.oggi[b-1cmrypdiy2],
.contenuto .cal .cal-giorno-testa a:hover .cal-giorno-numero.oggi[b-1cmrypdiy2] { color: var(--su-accento); background: var(--verde); }

.cal-giorno-testa.oggi .cal-giorno-nome[b-1cmrypdiy2] { color: var(--link); }

/* l'etichetta di ferie o blocco sotto il nome del giorno */
.cal-testa-assenza[b-1cmrypdiy2] {
    padding: 0 2px 2px;
    text-align: left;
}

.cal-griglia-corpo[b-1cmrypdiy2] {
    height: calc(var(--mezzore) * var(--alto-mezzora));
}

/* l'ora si scrive a cavallo della sua linea, come in Google: la linea e' l'ora, non la casella */
.cal-ore-colonna[b-1cmrypdiy2] {
    position: sticky;
    left: 0;
    z-index: 4;
    background: var(--superficie);
}

/* spente se lo stile non chiede le ore in colonna: l'ora e' nelle caselle vuote */
.cal-ore-colonna[b-1cmrypdiy2],
.cal-angolo-ore[b-1cmrypdiy2] { display: none; }

.cal-ora-segno[b-1cmrypdiy2] {
    position: absolute;
    right: var(--s1);
    transform: translateY(-50%);
    font-size: var(--t-micro);
    color: var(--grigio);
}

/* la mezz'ora si legge, ma non compete con l'ora */
.cal-ora-segno.mezza[b-1cmrypdiy2] { font-size: .85em; opacity: .75; }

.cal-colonna[b-1cmrypdiy2] {
    position: relative;
    display: grid;
    grid-template-rows: repeat(var(--mezzore), 1fr);
    min-width: 0;
    border-left: 1px solid var(--riga);
}

.cal-colonna.festa[b-1cmrypdiy2] { background: var(--superficie-alt); }

.cal-colonna.oggi[b-1cmrypdiy2] { background: color-mix(in srgb, var(--verde) 4%, transparent); }

.cal-mezzora[b-1cmrypdiy2] {
    border-top: 1px dashed color-mix(in srgb, var(--riga) 60%, transparent);
    cursor: pointer;
}

.cal-mezzora.piena[b-1cmrypdiy2] { border-top: 1px solid var(--riga); }

/* l'ora di una casella vuota, in alto a sinistra: piccola e tenue, si legge senza pesare */
.cal-mezzora-ora[b-1cmrypdiy2] {
    display: block;
    padding: 2px var(--s1);
    font-size: 12px;
    color: var(--grigio-tenue);
    pointer-events: none;
}

/*
    Dove finira' quello che si sta scrivendo (28/09/2026): una fascia dell'accento sopra la griglia,
    anche sopra gli eventi che ci sono gia' - e' li' che si vede se si accavalla. Si trascina per
    spostarla, e dal bordo di sotto si allunga un appuntamento.
*/
.cal-destinazione[b-1cmrypdiy2] {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 4;
    box-sizing: border-box;
    background: color-mix(in srgb, var(--verde) 16%, transparent);
    border: 2px solid var(--verde);
    border-radius: var(--raggio);
    cursor: grab;
}

/* presa: non copre piu' le mezz'ore sotto, dove la si lascia */
.cal-destinazione.presa[b-1cmrypdiy2] { pointer-events: none; opacity: .6; }

/*
    Il bordo di sotto della fascia (30/09/2026): una striscia alta 12px su tutta la larghezza, facile
    da prendere, e nell'angolo le tre righe oblique delle finestre di Windows, sempre visibili, che
    dicono che si puo' allargare. L'angolo ha il puntatore obliquo: un'assenza si allarga anche sui
    giorni dopo.
*/
.cal-destinazione .cal-allunga[b-1cmrypdiy2] {
    left: 0;
    right: 0;
    height: 12px;
}

.cal-destinazione .cal-allunga[b-1cmrypdiy2]::after {
    left: auto;
    right: 2px;
    bottom: 2px;
    width: 14px;
    height: 14px;
    margin-left: 0;
    border-radius: 0;
    opacity: 1;
    cursor: nwse-resize;
    background: linear-gradient(135deg,
        transparent 0 44%, var(--verde) 44% 52%,
        transparent 52% 62%, var(--verde) 62% 70%,
        transparent 70% 80%, var(--verde) 80% 88%,
        transparent 88%);
}

.cal-mezzora:hover[b-1cmrypdiy2] { background: color-mix(in srgb, var(--verde) 7%, transparent); }

/* le mezz'ore di ferie e assenze in rosso, quelle di un blocco a righe: dove non si fissa niente */
.cal-mezzora.bloccata[b-1cmrypdiy2],
.cal-linea.bloccata[b-1cmrypdiy2] { background: var(--allarme-fondo); }

.cal-mezzora.bloccata.a-righe[b-1cmrypdiy2],
.cal-linea.bloccata.a-righe[b-1cmrypdiy2] {
    background: repeating-linear-gradient(135deg, var(--allarme-fondo) 0 6px, color-mix(in srgb, var(--allarme) 18%, var(--allarme-fondo)) 6px 7px);
}

/* dove cadrebbe quello che si sta trascinando */
.cal-mezzora.sorvolata[b-1cmrypdiy2],
.cal-linea.sorvolata[b-1cmrypdiy2],
.cal-mese-cella.sorvolata[b-1cmrypdiy2] {
    background: color-mix(in srgb, var(--verde) 18%, transparent);
    box-shadow: inset 0 0 0 1px var(--verde);
}

.cal-striscia[b-1cmrypdiy2] {
    position: absolute;
    z-index: 2;
    box-sizing: border-box;
    padding: 1px 2px 1px 1px;
    min-width: 0;
}

/*
    sopra un blocco o delle ferie: la striscia lascia scoperta una fascia a destra, e il fondo
    dell'evento si fa trasparente quanto basta per vedere sotto le righe rosse - il tempo era
    bloccato. Il testo resta sul suo colore, con il bordo a sinistra del tipo: si legge lo stesso.
*/
.cal-striscia.su-blocco[b-1cmrypdiy2] { padding-right: 14px; }

.su-blocco .cal-evento[b-1cmrypdiy2] { background: color-mix(in srgb, var(--f) 62%, transparent); }

.cal-striscia .cal-evento[b-1cmrypdiy2] {
    height: 100%;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    column-gap: var(--s1);
    row-gap: 0;
    white-space: normal;
    box-shadow: 0 0 0 1px var(--superficie);
}

/*
    Righe fisse, cosi' anche un richiamo di mezz'ora mostra tutto: la prima (ora, tipo, stato) e il
    cliente non vanno mai a capo - il tipo cede i suoi caratteri ai puntini - e la nota ha le sue
    due righe. Prima il cliente lungo andava su due righe e spingeva la nota fuori dal riquadro.
*/
.cal-striscia .cal-chi-evento[b-1cmrypdiy2] { white-space: nowrap; }

.cal-striscia .cal-cosa[b-1cmrypdiy2] {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* mentre si trascina le strisce lasciano passare il puntatore: sotto ci sono le mezz'ore che ricevono */
.cal-griglia.trascina .cal-striscia[b-1cmrypdiy2],
.cal-giorno.trascina .cal-blocco[b-1cmrypdiy2],
.cal-giorno.trascina .cal-pacchetto[b-1cmrypdiy2] { pointer-events: none; }

.cal-evento.mobile[b-1cmrypdiy2] { cursor: grab; }

.cal-evento.preso[b-1cmrypdiy2] { opacity: .45; }

.cal-allunga[b-1cmrypdiy2] {
    position: absolute;
    left: 25%;
    right: 25%;
    bottom: 0;
    z-index: 3;
    height: 7px;
    cursor: ns-resize;
}

.cal-allunga[b-1cmrypdiy2]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 18px;
    height: 2px;
    margin-left: -9px;
    border-radius: 2px;
    background: var(--c-app);
    opacity: 0;
}

.cal-striscia:hover .cal-allunga[b-1cmrypdiy2]::after,
.cal-blocco:hover .cal-allunga[b-1cmrypdiy2]::after { opacity: .8; }

.cal-adesso-riga[b-1cmrypdiy2] {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 3;
    height: 2px;
    margin-top: -1px;
    background: var(--allarme);
    pointer-events: none;
}

.cal-adesso-riga[b-1cmrypdiy2]::before {
    content: "";
    position: absolute;
    left: -5px;
    top: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--allarme);
}

.festa[b-1cmrypdiy2] { background: var(--superficie-alt); }

.cal-giorno-testa.oggi[b-1cmrypdiy2] { background: var(--verde-tenue); }

/* ---------- l'evento ---------- */

/*
    Due righe: sopra ora, tipo e stato, sotto il cliente o il testo dell'appunto. Su una riga sola
    il nome del cliente restava con tre lettere e i puntini.
*/
.cal-evento[b-1cmrypdiy2] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--s1);
    row-gap: 0;
    width: 100%;
    min-width: 0;
    padding: 2px var(--s1);
    font-family: inherit;
    font-size: var(--t-micro);
    line-height: 1.35;
    text-align: left;
    color: var(--inchiostro);
    background: var(--f);
    border: 0;
    border-left: 3px solid var(--c);
    border-radius: 2px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}

.cal-evento:hover[b-1cmrypdiy2] { box-shadow: inset 0 0 0 1px var(--c); }

.cal-evento:focus-visible[b-1cmrypdiy2] { outline: 2px solid var(--verde); outline-offset: 1px; }

.cal-evento.aperto[b-1cmrypdiy2] { box-shadow: inset 0 0 0 2px var(--c); }

/*
    fatto: resta il bordo della famiglia e il fondo diventa verde, il colore di "a posto" di tutto
    WK: in una giornata piena si vede a colpo d'occhio cosa e' chiuso. Lo dice anche la spunta.
*/
.cal-evento.fatto[b-1cmrypdiy2] { background: var(--voce-appunto-fatto); }

/*
    Il testo degli eventi nel colore scelto nello stile per la famiglia (28/09/2026); senza scelta,
    l'inchiostro di sempre.
*/
.cal-evento.t-appunto[b-1cmrypdiy2] { color: var(--voce-appunto-testo, var(--inchiostro)); }

.cal-evento.t-richiamo[b-1cmrypdiy2] { color: var(--voce-richiamo-testo, var(--inchiostro)); }

.cal-evento.t-appuntamento[b-1cmrypdiy2] { color: var(--voce-appuntamento-testo, var(--inchiostro)); }

.cal-evento.t-confermare[b-1cmrypdiy2] { color: var(--voce-confermare-testo, var(--inchiostro)); }

/*
    Il primo appuntamento e il primo richiamo di una trattativa nuova (28/09/2026, come in WK): un
    colore suo, scelto nello stile. Chiusi prendono il colore dei conclusi, che viene dopo.
*/
.cal-evento.primo.t-appuntamento[b-1cmrypdiy2] { --f: var(--voce-primo-appuntamento); color: var(--voce-primo-appuntamento-testo, var(--inchiostro)); }

.cal-evento.primo.t-richiamo[b-1cmrypdiy2] { --f: var(--voce-primo-richiamo); color: var(--voce-primo-richiamo-testo, var(--inchiostro)); }

.cal-evento.fatto.t-appunto[b-1cmrypdiy2],
.cal-evento.fatto.t-confermare[b-1cmrypdiy2] { color: var(--voce-appunto-fatto-testo, var(--inchiostro)); }

.cal-evento.fatto.t-richiamo[b-1cmrypdiy2] { color: var(--voce-richiamo-fatto-testo, var(--inchiostro)); }

.cal-evento.fatto.t-appuntamento[b-1cmrypdiy2] { color: var(--voce-appuntamento-fatto-testo, var(--inchiostro)); }

/* ogni famiglia col suo colore di "fatto", se lo stile ne ha scelto uno (28/09/2026) */
.cal-evento.fatto.t-richiamo[b-1cmrypdiy2] { background: var(--voce-richiamo-fatto); }

.cal-evento.fatto.t-appuntamento[b-1cmrypdiy2] { background: var(--voce-appuntamento-fatto); }

/*
    Segno e orario della stessa misura, un po' sotto il testo dell'evento, e l'icona centrata
    sull'orario (28/09/2026): l'icona era piu' piccola e stava piu' in alto. In em, cosi' seguono
    il testo degli eventi scelto nello stile.
*/
.cal-segno[b-1cmrypdiy2] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    align-self: center;
    font-size: .9em;
    line-height: 1;
    color: var(--c);
    font-weight: 700;
}

.cal-quando[b-1cmrypdiy2] { flex: 0 0 auto; font-size: .9em; color: var(--grigio); }

.cal-cosa[b-1cmrypdiy2] {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--c);
}

.cal-chi-evento[b-1cmrypdiy2] {
    flex: 1 0 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* il nome del lead in grassetto: e' la cosa che si cerca con l'occhio (28/09/2026) */
.cal-chi-evento.cal-lead[b-1cmrypdiy2] { font-weight: 700; }

/* il contatto dopo il cliente: stesso rigo, peso normale */
.cal-chi-evento .cal-contatto[b-1cmrypdiy2] { font-weight: 400; }

/* l'icona del tipo sulla linea del testo, del colore dell'evento */
.cal-segno[b-1cmrypdiy2]  .cal-icona { width: 1.05em; height: 1.05em; }

.cal-campione[b-1cmrypdiy2]  .cal-icona { vertical-align: -2px; }

/* la nota sotto il cliente: al massimo due righe, poi i puntini */
.cal-nota-evento[b-1cmrypdiy2] {
    flex: 1 0 100%;
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    color: var(--grigio);
}

/* nel mese no: e' il quadro d'insieme, e con le note una casella arrivava a seicento pixel */
.cal-mese .cal-nota-evento[b-1cmrypdiy2] { display: none; }

.cal-stato[b-1cmrypdiy2] {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--fatto);
    font-weight: 700;
}

.cal-stato.scaduto[b-1cmrypdiy2] { color: var(--allarme); align-self: center; line-height: 1; }

/* la clessidra dello scaduto, della misura dell'orario come l'icona del tipo */
.cal-stato[b-1cmrypdiy2]  .cal-icona { width: 1.05em; height: 1.05em; }

.cal-evento.scaduto[b-1cmrypdiy2] { box-shadow: inset 0 -2px 0 var(--allarme); }

/* ---------- giorno ---------- */

/* colonne e righe arrivano dalla pagina (style), perche' dipendono da quante corsie e quante mezz'ore */
.cal-giorno[b-1cmrypdiy2] { display: grid; }

.cal-giorno-angolo[b-1cmrypdiy2] {
    top: 0;
    z-index: 5;
    box-shadow: 0 1px 0 var(--riga);
}

.cal-ora[b-1cmrypdiy2] {
    position: sticky;
    left: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    padding: 2px var(--s1) 0 0;
    font-size: var(--t-micro);
    color: var(--grigio);
    background: var(--superficie);
    border-top: 1px dashed var(--riga);
}

.cal-ora.piena[b-1cmrypdiy2] { border-top-style: solid; }

/* le mezz'ore non piene si scrivono piu' piccole: l'occhio conta le ore, non le mezz'ore */
.cal-ora:not(.piena) .cal-ora-testo[b-1cmrypdiy2] { font-size: 12px; }

.cal-ufficio[b-1cmrypdiy2] {
    padding: 0 3px;
    font-size: 12px;
    font-weight: 700;
    color: var(--c-app);
    background: var(--f-app);
    border-radius: 2px;
    cursor: help;
}

/*
    La casella vuota di ogni mezz'ora di ogni persona: disegna la linea e il fondo del fine
    settimana. Sta sotto a tutto; ferie e blocchi sopra di lei, gli eventi sopra ancora.
*/
.cal-linea[b-1cmrypdiy2] {
    z-index: 0;
    border-top: 1px dashed var(--riga);
    border-left: 1px solid var(--riga);
}

.cal-linea.piena[b-1cmrypdiy2] { border-top-style: solid; }

.cal-blocco[b-1cmrypdiy2] {
    position: relative;
    z-index: 2;
    min-width: 0;
    padding: 2px;
}

.cal-blocco.sfondo[b-1cmrypdiy2] { z-index: 1; }

.cal-blocco .cal-evento[b-1cmrypdiy2] {
    height: 100%;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    white-space: normal;
}

.cal-pacchetto[b-1cmrypdiy2] {
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 2px;
}

/* la linea di adesso: occupa la mezz'ora in corso, e si disegna all'altezza del minuto giusto */
.cal-adesso[b-1cmrypdiy2] {
    position: relative;
    z-index: 3;
    pointer-events: none;
}

.cal-adesso[b-1cmrypdiy2]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: var(--dove);
    height: 2px;
    background: var(--allarme);
}

.cal-adesso[b-1cmrypdiy2]::after {
    content: "";
    position: absolute;
    left: -4px;
    top: calc(var(--dove) - 3px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--allarme);
}

/* ---------- dettaglio ---------- */

.cal-dettaglio[b-1cmrypdiy2] {
    position: fixed;
    z-index: 60;
    top: calc(var(--barra-alta) + var(--s4));
    right: var(--s4);

    /* la larghezza la sceglie la persona trascinando il bordo sinistro (Calendario.razor.js), 520 se non l'ha mai fatto */
    width: min(var(--cal-lato), calc(100vw - var(--s4) * 2));
    max-height: calc(100dvh - var(--barra-alta) - var(--s4) * 2);
    overflow-y: auto;
    padding: var(--s3);

    /* il fondo della pagina, e sopra le schede bianche: evento e storico si leggono separati */
    background: var(--carta);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
    box-shadow: var(--ombra-alta);
}

.cal-dettaglio:focus[b-1cmrypdiy2] { outline: none; }

/* il bordo sinistro si trascina: sotto il puntatore si accende, come il divisore della Posta */
.cal-dettaglio.sul-bordo[b-1cmrypdiy2] {
    cursor: col-resize;
    box-shadow: inset 4px 0 0 var(--verde), var(--ombra-alta);
}

/*
    Il dettaglio in colonna: l'evento con la sua altezza, e lo storico del lead nello spazio che
    resta fino in fondo alla finestra, scorrendo dentro di se' - le voci vecchie arrivano scorrendo
    lui, e l'evento resta in vista. Con poche voci lo storico e' alto quanto serve. Sotto i 240px di
    storico scorre tutto il pannello, come prima: su uno schermo basso l'evento da solo lo riempie.
*/
.cal-dettaglio:not(.largo)[b-1cmrypdiy2] { display: flex; flex-direction: column; }

.cal-dettaglio:not(.largo) > *[b-1cmrypdiy2] { flex: none; }

.cal-dettaglio:not(.largo) > .cal-storico[b-1cmrypdiy2] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 240px;
}

/* relative: i testi per i lettori di schermo (solo-lettori, in assoluto) restano dentro e non allungano il pannello */
.cal-storico-scorre[b-1cmrypdiy2] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.cal-dettaglio-testa[b-1cmrypdiy2] {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

/*
    Nel pannello dei moduli "Chiudi" sta in alto a destra, sulla riga del titolo (29/09/2026):
    sopra il titolo da solo prendeva una riga e sembrava un pulsante del modulo.
*/
.cal-dettaglio.largo[b-1cmrypdiy2] { position: fixed; }

.cal-dettaglio.largo > .cal-dettaglio-testa[b-1cmrypdiy2] {
    position: absolute;
    top: var(--s3);
    right: var(--s3);
    margin: 0;
    z-index: 1;
}

.cal-dettaglio.largo[b-1cmrypdiy2]  .scrivi-titolo {
    margin-top: 0;
    padding-right: 5.5rem;
}

.cal-dettaglio-testa h2[b-1cmrypdiy2] {
    flex: 1 1 auto;
    margin: 0;
    font-size: var(--t-medio);
}

.cal-note[b-1cmrypdiy2],
.cal-esito[b-1cmrypdiy2] {
    margin-top: var(--s3);
    font-size: var(--t-piccolo);
    overflow-wrap: anywhere;
}

.cal-esito[b-1cmrypdiy2] {
    padding-left: var(--s2);
    border-left: 3px solid var(--fatto);
}

.cal-esito-chi[b-1cmrypdiy2] { color: var(--grigio); }

.cal-esito-chi strong[b-1cmrypdiy2] { color: var(--fatto); }

/* com'e' finita la trattativa (28/09/2026): rosso se conclusa male, giallo se ancora in corso */
.cal-esito.esito-negativa[b-1cmrypdiy2] { border-left-color: var(--allarme); }

.cal-esito.esito-negativa .cal-esito-chi strong[b-1cmrypdiy2] { color: var(--allarme); }

.cal-esito.esito-incorso[b-1cmrypdiy2] { border-left-color: var(--attesa); }

.cal-esito.esito-incorso .cal-esito-chi strong[b-1cmrypdiy2] { color: var(--attesa); }

.cal-dettaglio-piede[b-1cmrypdiy2] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-top: var(--s4);
    padding-top: var(--s3);
    border-top: 1px solid var(--riga);
}

/* l'azione principale va per prima */
.cal-dettaglio-piede .btn-esito[b-1cmrypdiy2] { order: -1; }

/* matita e cestino in fondo a destra, lontani dagli esiti */
.cal-dettaglio-icone[b-1cmrypdiy2] {
    display: flex;
    gap: var(--s1);
    margin-left: auto;
    order: 1;
}

.cal-dettaglio-nota[b-1cmrypdiy2] {
    width: 100%;
    margin: 0;
    color: var(--grigio);
    font-size: var(--t-piccolo);
}

/* il modulo sta su una scheda sola, bianca come prima */
.cal-dettaglio.largo[b-1cmrypdiy2] { background: var(--superficie); padding: var(--s4); }

.cal-scheda[b-1cmrypdiy2] { padding: var(--s3); }

/*
    la nota si corregge sul posto: la matita piatta in fondo a destra (.in-linea, 06/10/2026), e al posto del
    testo la casella
*/
.cal-nota-testo[b-1cmrypdiy2] { min-width: 0; }

.cal-nota-modifica[b-1cmrypdiy2] { margin-top: var(--s3); }

.cal-nota-tasti[b-1cmrypdiy2] { display: flex; gap: var(--s2); margin-top: var(--s2); }

/* ---------- scrivere ---------- */

.cal-nuovo[b-1cmrypdiy2] { align-self: flex-end; margin-left: auto; }

/*
    Il "+" di una casella del mese: si vede passando sulla casella o arrivandoci col Tab,
    per non riempire di segni una settimana gia' piena. Sul telefono, dove non si passa sopra a
    niente, c'e' sempre.
*/
.cal-aggiungi[b-1cmrypdiy2] {
    position: absolute;
    right: 2px;
    bottom: 2px;

    /* sotto la colonna delle persone, che resta ferma quando la settimana scorre di lato */
    z-index: 0;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--riga);
    border-radius: 999px;
    background: var(--superficie);
    color: var(--link);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
}

.cal-aggiungi:focus-visible[b-1cmrypdiy2] { opacity: 1; }

.cal-aggiungi:focus-visible[b-1cmrypdiy2] { outline: 2px solid var(--verde); outline-offset: 1px; }

@media (hover: none) {
    .cal-aggiungi[b-1cmrypdiy2] { opacity: 1; }
}

/* una mezz'ora libera della vista giorno si tocca per scriverci */
.cal-linea.libera[b-1cmrypdiy2] { cursor: pointer; }

.cal-linea.libera:hover[b-1cmrypdiy2] { background: color-mix(in srgb, var(--verde) 7%, transparent); }

/* per chi legge con lo screen reader: c'e', ma non si vede */
.cal-sr[b-1cmrypdiy2] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/*
    Da scrivania la pagina e' una colonna che riempie il contenuto (layout.css): testata e legenda
    con la loro altezza, e la griglia - o il mese - con tutto lo spazio che resta fino in fondo.
*/
@media (min-width: 901px) {
    .cal[b-1cmrypdiy2] {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .cal > *[b-1cmrypdiy2] { flex: none; }

    .cal > .cal-scorri[b-1cmrypdiy2],
    .cal > .cal-mese[b-1cmrypdiy2] {
        flex: 1 1 auto;
        min-height: 320px;
    }

    /*
        Le settimane del mese si dividono l'altezza (05/10/2026): il riquadro arrivava in fondo, ma le
        righe restavano alte 116px e su uno schermo alto il mese finiva a meta', con il vuoto sotto.
        Su uno schermo basso restano almeno di 116px e il mese scorre.
    */
    .cal > .cal-mese[b-1cmrypdiy2] {
        display: flex;
        flex-direction: column;
        overflow: auto;
    }

    .cal > .cal-mese > .cal-mese-riga[b-1cmrypdiy2] { flex: 1 0 auto; }

    /*
        Il pannello a destra - il modulo per scrivere o il dettaglio di un evento - sta sopra la griglia: i giorni si
        stringono e gli restano accanto invece di finirgli sotto (28/09/2026; sempre, da scrivania, dal 15/10/2026). Il
        pannello, e lo stacco dalla griglia. I giorni si stringono fino a 110px l'uno (770px i sette); sotto, la griglia
        scorre di lato accanto al pannello. Stava in layout.css sul contenuto: qui, perche' la larghezza scelta dalla
        persona e' una variabile del calendario e il contenuto, che sta sopra, non la vede (16/10/2026).
    */
    .cal:not(.cal-in-finestra):has(.cal-dettaglio)[b-1cmrypdiy2] { margin-right: calc(var(--cal-lato) + var(--s4)); }

    .cal:has(.cal-dettaglio) .cal-griglia[b-1cmrypdiy2] { min-width: 770px; }
}

/* ---------- telefono ---------- */

@media (max-width: 900px) {
    /*
        Due righe invece di tre: la persona e "+ Nuovo" affiancati - la tendina a tutta larghezza
        era vuota per tre quarti - e sotto il giorno con i suoi passi.
    */
    .cal-comandi[b-1cmrypdiy2] { align-items: stretch; gap: var(--s2); }

    .cal-chi[b-1cmrypdiy2] { order: 1; flex: 1 1 0; min-width: 0; }

    .cal-chi .campo[b-1cmrypdiy2] { width: 100%; }

    .cal-nuovo[b-1cmrypdiy2] { order: 2; align-self: stretch; margin-left: 0; }

    .cal-vai[b-1cmrypdiy2] { order: 3; flex-basis: 100%; }

    .cal-viste[b-1cmrypdiy2] { order: 4; flex-basis: 100%; }

    /*
        Sul telefono persona, giorno e passi restano fermi in cima mentre si scorre, e la griglia
        occupa lo spazio che resta sotto e scorre dentro di se': cosi' anche la riga dei giorni resta
        in vista. Arrivati in fondo alla pagina, lo stesso gesto continua dentro la griglia.
        116px sono i comandi su due righe (72) con il loro spazio sopra e sotto; si fermano a filo
        della barra in alto, sopra il margine del contenuto.
    */
    /* la testata non fa da scatola: la barra dei comandi resta ferma per tutta la pagina, non solo finche' c'e' la testata */
    .cal-testa[b-1cmrypdiy2] { display: contents; }

    .cal-comandi[b-1cmrypdiy2] {
        position: sticky;
        top: calc(-1 * var(--s3));
        z-index: 20;
        margin-top: calc(-1 * var(--s3));
        padding: var(--s3) 0 var(--s2);
        background: var(--carta);
    }

    .cal-scorri[b-1cmrypdiy2] { max-height: calc(100dvh - var(--barra-alta) - var(--barra-basso) - 116px - env(safe-area-inset-bottom)); }

    .cal-dettaglio[b-1cmrypdiy2] {
        top: auto;
        right: 0;
        left: 0;
        bottom: calc(var(--barra-basso) + env(safe-area-inset-bottom));
        width: auto;
        max-height: 70dvh;
        border-radius: var(--raggio-grande) var(--raggio-grande) 0 0;
    }

    .cal-dettaglio.largo[b-1cmrypdiy2] { width: auto; max-height: 85dvh; }
}

/* la voce arrivata con ?voce= dalla scheda del lead: un bordo in piu', e il dettaglio aperto accanto */
.cal-evento.evidenza[b-1cmrypdiy2] { outline: 2px dashed var(--verde); outline-offset: 1px; }

.cal-storico .scheda-titolo[b-1cmrypdiy2] { margin-bottom: var(--s2); }

.cal-storico-titolo[b-1cmrypdiy2] { display: flex; justify-content: space-between; gap: var(--s2); font-size: var(--t-piccolo); color: var(--grigio); margin: 0 0 var(--s2); }

.cal-storico-titolo a[b-1cmrypdiy2] { font-weight: 400; }

.cal-storico-passi[b-1cmrypdiy2] { display: flex; gap: var(--s1); margin: 0 0 var(--s2); }

/* chi va all'appuntamento: un nome con la x per toglierlo, e la tendina per aggiungerne */
.cal-persone[b-1cmrypdiy2] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }

.cal-persona[b-1cmrypdiy2] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 2px 1px var(--s2);
    border: 1px solid var(--riga);
    border-radius: 999px;
    background: var(--superficie-alt);
}

.cal-persona .cal-persona-togli[b-1cmrypdiy2] { width: 20px; height: 20px; border: 0; background: transparent; }

.cal-persona .cal-persona-togli:hover:not([disabled])[b-1cmrypdiy2] { color: var(--allarme); background: var(--allarme-fondo); }

.cal-persone[b-1cmrypdiy2]  .cal-persona-aggiungi { width: auto; }


/*
    Nella finestra (?finestra=): c'e' solo il modulo. Il calendario resta nascosto e si apre sopra
    di lui dall'icona del giorno, grande quanto la finestra allargata, e scorre dentro di se'.
*/
.cal-scrittura-finestra[b-1cmrypdiy2] {
    padding: var(--s3);
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
}

.cal-scrittura-finestra:focus[b-1cmrypdiy2] { outline: none; }

.cal.cal-in-finestra[b-1cmrypdiy2] { display: none; }

.cal.cal-in-finestra.aperta[b-1cmrypdiy2] {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    padding: var(--s3);
    overflow: auto;
    background: var(--carta);
}

.cal.cal-in-finestra.aperta:focus[b-1cmrypdiy2] { outline: none; }

.cal-in-finestra.aperta > *[b-1cmrypdiy2] { flex: none; }

.cal-in-finestra.aperta > .cal-scorri[b-1cmrypdiy2],
.cal-in-finestra.aperta > .cal-mese[b-1cmrypdiy2] {
    flex: 1 1 auto;
    min-height: 320px;
}

.cal-scelta-testa[b-1cmrypdiy2] {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s2);
}

.cal-scelta-testa h2[b-1cmrypdiy2] {
    flex: 1 1 auto;
    margin: 0;
    font-size: var(--t-medio);
}

.cal-scelta-nota[b-1cmrypdiy2] {
    font-weight: 400;
    font-size: var(--t-piccolo);
    color: var(--grigio);
}

/* il titolo "Calendario" lo dice gia' la sua testata, e "+ Nuovo": il modulo e' quello sotto */
.cal-in-finestra[b-1cmrypdiy2]  .pagina-testa,
.cal-in-finestra .cal-nuovo[b-1cmrypdiy2] { display: none; }

/* ---------- Google Calendar ---------- */

/* nella vista giorno, gli eventi di Google di tutto il giorno stanno in cima, sopra le ore */
.cal-giornate[b-1cmrypdiy2] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 2px;
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--superficie);
    border-bottom: 1px solid var(--riga);
}

.cal-giornate .cal-evento[b-1cmrypdiy2] { width: auto; flex: 1 1 160px; }

/* la riga che dice che Google non ha risposto: una sola, sotto i comandi */
.cal-nota-google[b-1cmrypdiy2] {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin: 0 0 var(--s3);
    font-size: var(--t-piccolo);
}

/* un evento di Google nascosto agli altri: solo la "G" e il colore sull'orario, non si apre */
.cal-evento.coperto[b-1cmrypdiy2] { cursor: default; }

/* i siti del cliente nella scheda della voce: uno accanto all'altro, a capo se non ci stanno */
.cal-siti[b-1cmrypdiy2] { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }

/*
    La sala occupata da un collega (01/10/2026): una riga all'ora d'inizio dell'appuntamento in ufficio,
    con la stretta di mano, "chi - cliente". Alta una riga sola qualunque sia la durata (la durata e' nel
    title), sopra le mezz'ore e sotto gli eventi; il clic apre il dettaglio (01/10/2026).
*/
.cal-ufficio-riga[b-1cmrypdiy2] {
    position: absolute;
    left: 2px;
    right: 2px;
    /* sotto gli eventi di chi guarda (02/10/2026): le proprie cose prima di quelle dei colleghi; si
       vede negli spazi liberi, e "uff." accanto all'ora dice comunque che la sala e' occupata */
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    height: auto !important;
    padding: 0 4px;
    font-size: var(--t-micro);
    line-height: 1.5;
    color: var(--c-app);
    background: var(--f-app);
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}

/* si clicca per il dettaglio, ma un evento trascinato ci passa sopra fino alla mezz'ora sotto */
.cal-giorno.trascina .cal-ufficio-riga[b-1cmrypdiy2] { pointer-events: none; }

.cal-ufficio-riga:hover[b-1cmrypdiy2] { filter: brightness(.96); }

.cal-ufficio-riga > span[b-1cmrypdiy2] { overflow: hidden; text-overflow: ellipsis; }

.cal-ufficio-riga .icona[b-1cmrypdiy2] { flex: none; }

/* chi ha fissato l'appunto e per chi (01/10/2026): una riga sua, piccola, sotto l'ora; va a capo, i nomi si leggono tutti */
.cal-da-per[b-1cmrypdiy2] {
    flex: 1 0 100%;
    font-size: .9em;
    font-style: italic;
    color: var(--grigio);
    overflow-wrap: anywhere;
}
/* /Components/Pages/Oggi/Calendario/ModuloGoogle.razor.rz.scp.css */
/* il modulo di un evento di Google (26/09/2026): in colonna, come i moduli del calendario */
.modulo-google[b-xqfjgiq8at] {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    min-width: min(480px, 100%);
}

.modulo-google .campo[b-xqfjgiq8at] { width: 100%; }

.google-giornata[b-xqfjgiq8at] { margin-top: var(--s2); align-self: flex-start; }

/* la descrizione di Google e' testo semplice, a capo compresi */
.google-descrizione[b-xqfjgiq8at] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: var(--t-piccolo);
}

/* Elimina a sinistra, lontano da Salva */
.google-elimina[b-xqfjgiq8at] { margin-right: auto; }
/* /Components/Pages/Oggi/Calendario/ScritturaCalendario.razor.rz.scp.css */
/*
    I moduli del pannello di lato. Le classi dei moduli - campi-in-fila, partecipanti, scelta,
    pannello-piede, dove - sono quelle di casa, le stesse della scheda del lead: qui solo quello
    che serve in un pannello stretto.
*/

.scrivi-titolo[b-gk4bucwc2e] {
    margin: var(--s2) 0 0;
    font-size: var(--t-grande);
}

/* il giorno e l'ora scelti, sotto il titolo: si legge subito quale spazio si e' preso */
.scrivi-scelto[b-gk4bucwc2e] {
    margin: 0;
    font-weight: 600;
    color: var(--verde-scuro);
}

.scrivi-cosa[b-gk4bucwc2e] {
    padding-bottom: var(--s3);
    border-bottom: 1px solid var(--riga);
}

/* il lead scelto: etichetta, nome, e in fondo a destra l'icona per cambiarlo (.in-linea, 06/10/2026) */
.scrivi-lead[b-gk4bucwc2e] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin: 0;
}

/*
    I lead trovati: una tabella a righe alternate, il nome in inchiostro e in grassetto (e' la cosa
    da scegliere), il sito in grigio accanto. Niente sottolineature: ogni riga e' un'unica scelta,
    e la riga sotto il puntatore si accende tutta.
*/
.scrivi-trovati[b-gk4bucwc2e] {
    width: 100%;
    margin-top: var(--s1);
    border-collapse: collapse;
    font-size: var(--t-piccolo);
    border: 1px solid var(--riga);
    border-radius: var(--raggio);
}

.scrivi-trovati th[b-gk4bucwc2e] {
    padding: var(--s1) var(--s2);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: left;
    color: var(--grigio);
    background: var(--superficie-alt);
    border-bottom: 1px solid var(--riga);
}

.scrivi-trovati td[b-gk4bucwc2e] {
    padding: var(--s2);
    vertical-align: top;
    border-top: 1px solid var(--riga);
}

.scrivi-trovati tbody tr[b-gk4bucwc2e] { cursor: pointer; }

.scrivi-trovati tbody tr:nth-child(even)[b-gk4bucwc2e] { background: var(--riga-alterna); }

.scrivi-trovati tbody tr:hover[b-gk4bucwc2e],
.scrivi-trovati tbody tr:focus-within[b-gk4bucwc2e] { background: var(--verde-tenue); }

.scrivi-trovato[b-gk4bucwc2e] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    text-align: left;
    color: var(--inchiostro);
    cursor: pointer;
}

.scrivi-trovato:focus-visible[b-gk4bucwc2e] { outline: 2px solid var(--verde); outline-offset: 2px; }

.scrivi-trovato-via[b-gk4bucwc2e] {
    width: 45%;
    color: var(--grigio);
    overflow-wrap: anywhere;
}

.scrivi-trovato-altri[b-gk4bucwc2e] { color: var(--grigio-tenue); }

/* cosa si sta chiudendo: il testo della voce, piu' piccolo, per non doverlo andare a cercare */
.scrivi-cosa-chiudo[b-gk4bucwc2e] {
    padding: var(--s2) var(--s3);
    border-left: 3px solid var(--riga);
    background: var(--superficie-alt);
    color: var(--grigio);
    font-size: var(--t-piccolo);
}

.scrivi-giorni .scelta[b-gk4bucwc2e] { min-width: 64px; }

.scrivi[b-gk4bucwc2e] { margin-bottom: 0; }

.scrivi-storico[b-gk4bucwc2e] { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--riga); }

.scrivi-storico-titolo[b-gk4bucwc2e] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s2);
    margin: 0 0 var(--s2);
    font-size: var(--t-piccolo);
}

.scrivi-storico-titolo a[b-gk4bucwc2e] { font-weight: 400; }

/* i recenti scorrono dentro la loro scatola: il modulo sotto resta dov'e' */
/* niente scorrimento suo: scorre gia' il pannello, e due barre una dentro l'altra si intralciano */
.scrivi-recenti[b-gk4bucwc2e] {
    margin-top: var(--s1);
    border: 1px solid var(--riga);
    border-radius: var(--raggio);
}

.scrivi-recenti .scrivi-trovati[b-gk4bucwc2e] { margin-top: 0; border: 0; }

.scrivi-recenti-titolo[b-gk4bucwc2e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    padding: var(--s1) var(--s2);
    font-size: var(--t-piccolo);
    font-weight: 700;
    border-bottom: 1px solid var(--riga);
}

.scrivi-recenti-altri[b-gk4bucwc2e] {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-weight: 400;
}

.scrivi-trovato-quando[b-gk4bucwc2e] { white-space: nowrap; }

.scrivi-trovato-quando span[b-gk4bucwc2e] { display: block; color: var(--grigio); }


/* un numero per riga, con la sua iconcina della chiamata accanto (05/10/2026) */
.scrivi-telefono-riga[b-gk4bucwc2e] {
    display: flex;
    align-items: center;
    gap: var(--s1);
    margin-top: var(--s1);
}

/* il numero del contatto sotto la sua tendina: un tocco e si chiama */
.scrivi-telefono[b-gk4bucwc2e] {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    font-size: var(--t-piccolo);
}

/* "Collegato a (facoltativo)" e, sulla stessa riga a destra, "Non collegare" */
.scrivi-lead-etichetta[b-gk4bucwc2e] { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }

/* un link sottolineato, non un pulsante: si toglie una scelta, non si fa un'azione */
.scrivi-lead-etichetta .btn-testo[b-gk4bucwc2e],
.scrivi-lead-etichetta .btn-testo:hover[b-gk4bucwc2e] {
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--link);
    font-size: var(--t-micro);
    text-decoration: underline;
}

/*
    Giorno, ora e "Domani alle 9" in una fila: l'ora larga quanto "20:45" e la sua freccia, non mezza
    riga; il pulsante in basso, allineato ai campi. Sul telefono vanno a capo.
*/
.scrivi-quando[b-gk4bucwc2e] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}

.scrivi-quando > :first-child[b-gk4bucwc2e] { flex: 0 1 auto; }

.scrivi-quando .scrivi-ora .campo[b-gk4bucwc2e] { width: 7.5rem; }
/* /Components/Pages/Oggi/Coda/ChiamateSospese.razor.rz.scp.css */
.sospese-filtro[b-yvlk27hwqo] {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    min-width: 200px;
}

.sospese-nome[b-yvlk27hwqo] { min-width: 260px; }
/* /Components/Pages/Oggi/Coda/Oggi.razor.rz.scp.css */
/*
    La coda del mattino. Stili isolati: valgono solo dentro Oggi.razor.

    Una voce e' una riga a tre colonne - quando, cosa, quanto - e non una tabella: le voci sono di
    undici tipi diversi, e una tabella con le colonne di tutti sarebbe vuota a meta'. Sul telefono
    la colonna del quando resta a sinistra del titolo, che e' la firma del progetto: e' l'unica
    cosa che non collassa.
*/

.coda-chi[b-e8g4rsgx94] { align-items: center; }

.coda-chi .etichetta[b-e8g4rsgx94] { margin: 0; }

.coda-chi[b-e8g4rsgx94]  .campo { width: auto; min-width: 180px; }

.coda-nota[b-e8g4rsgx94] {
    margin: 0 0 var(--s3);
    padding: var(--s2) var(--s3);
    font-size: var(--t-piccolo);
    color: var(--attesa);
    background: var(--attesa-fondo);
    border-radius: var(--raggio);
}

/* ---------- i contatori in testa ---------- */

/*
    Contatori e filtri fermi in cima al contenuto che scorre; il fondo copre le voci che passano
    sotto. Si attacca al bordo vero, sopra il margine interno del contenuto: li' in mezzo si
    vedevano passare le voci.
*/
.coda-ferma[b-e8g4rsgx94] {
    position: sticky;
    top: calc(var(--s4) * -1);
    z-index: 5;
    /* un respiro di 4px sopra e sotto: le voci che scorrono non toccano i pulsanti */
    padding: var(--s1) 0;
    background: var(--carta);
}

@media (max-width: 900px) {
    .coda-ferma[b-e8g4rsgx94] {
        top: calc(var(--s3) * -1);
    }
}

/* il salto a un gruppo dai contatori non deve finire sotto la parte ferma */
.coda-gruppo h2[b-e8g4rsgx94] { scroll-margin-top: 200px; }

.coda-contatori[b-e8g4rsgx94] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s3);
    margin-bottom: var(--s4);
}

.contatore[b-e8g4rsgx94] {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    padding: var(--s3) var(--s4);
    /* la tinta la da' una classe tinta-* (base.css), la stessa del titolo del suo gruppo */
    background: var(--tinta-fondo, var(--superficie));
    border: 1px solid var(--tinta-fondo, var(--riga));
    border-top: 4px solid var(--tinta, var(--riga));
    border-radius: var(--raggio-grande);
    color: var(--tinta, var(--inchiostro));
    text-decoration: none;
}

.contatore:hover[b-e8g4rsgx94] { border-color: var(--tinta, var(--grigio-tenue)); }

.contatore:focus-visible[b-e8g4rsgx94] { outline: 2px solid var(--verde); outline-offset: 2px; }

.contatore-numero[b-e8g4rsgx94] {
    font-size: var(--t-titolo);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.contatore-nome[b-e8g4rsgx94] {
    font-size: var(--t-piccolo);
    color: var(--tinta, var(--grigio));
}

/* il ritardo ha il colore, il numero e il glifo ▲: il colore da solo non basterebbe */

/* ---------- filtri per famiglia ---------- */

.coda-famiglie[b-e8g4rsgx94] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
}

.famiglia[b-e8g4rsgx94] {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    min-height: var(--alto-controllo);
    padding: 0 var(--s3);
    font: inherit;
    font-size: var(--t-piccolo);
    color: var(--inchiostro);
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: 999px;
    cursor: pointer;
}

.famiglia .mono[b-e8g4rsgx94] { color: var(--grigio); }

.famiglia:hover[b-e8g4rsgx94] { border-color: var(--grigio-tenue); }

.famiglia:focus-visible[b-e8g4rsgx94] { outline: 2px solid var(--verde); outline-offset: 2px; }

.famiglia[aria-pressed="true"][b-e8g4rsgx94] {
    /* il testo che si legge sull'accento: nei temi scuri l'accento e' chiaro, e il bianco sopra spariva */
    color: var(--su-accento);
    background: var(--verde);
    border-color: var(--verde);
}

.famiglia[aria-pressed="true"] .mono[b-e8g4rsgx94] { color: inherit; }

/* ---------- i gruppi ---------- */

/*
    Ogni gruppo e' un riquadro suo, sul fondo della pagina: la testata e' una fascia nel colore
    del suo contatore in cima (tinta-* sulla section: rosso o verde il ritardo, blu oggi, viola la
    settimana, giallo la lavorazione) e sotto, sul bianco, le voci. Col fondo della pagina grigio,
    titoli e "Niente fissato per oggi" lasciati sul fondo non si leggevano.
*/
.coda-gruppo[b-e8g4rsgx94] {
    margin-top: var(--s4);
    padding: 0 var(--s4) var(--s4);
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-top: 4px solid var(--tinta, var(--riga));
    border-radius: var(--raggio-grande);
    overflow: clip;
}

/* la fascia della testata, larga quanto il riquadro */
.coda-gruppo > .storico-gruppo[b-e8g4rsgx94],
.coda-gruppo > details > summary[b-e8g4rsgx94] {
    margin: 0 calc(var(--s4) * -1) var(--s3);
    padding: var(--s2) var(--s4);
    background: var(--tinta-fondo, var(--superficie-alt));
}

.coda-gruppo > .storico-gruppo[b-e8g4rsgx94],
.coda-gruppo details > summary .storico-gruppo[b-e8g4rsgx94] { margin-top: 0; margin-bottom: 0; }

/* chiuso, il riquadro e' la sola fascia: niente spazio vuoto sotto */
.coda-gruppo > details:not([open]) > summary[b-e8g4rsgx94] { margin-bottom: calc(var(--s4) * -1); }

.coda-gruppo details > summary[b-e8g4rsgx94] {
    display: flex;
    align-items: center;
    gap: var(--s2);
    cursor: pointer;
    list-style: none;
}

.coda-gruppo details > summary[b-e8g4rsgx94]::-webkit-details-marker { display: none; }

/* la freccia dice che il gruppo si apre: ruota quando e' aperto */
.coda-gruppo details > summary[b-e8g4rsgx94]::before {
    content: "▸";
    color: var(--grigio);
    font-size: calc(var(--t-piccolo) * 1.8);
    line-height: 1;
    transition: transform var(--transizione);
}

.coda-gruppo details[open] > summary[b-e8g4rsgx94]::before { transform: rotate(90deg); }


.coda-gruppo details > summary:focus-visible[b-e8g4rsgx94] { outline: 2px solid var(--verde); outline-offset: 2px; }

.coda-giorno[b-e8g4rsgx94] {
    display: flex;
    align-items: baseline;
    gap: var(--s2);
    margin: var(--s5) 0 var(--s2);
    font-size: var(--t-piccolo);
    font-weight: 600;
    color: var(--inchiostro);
}

/* il primo giorno sta sotto l'intestazione del gruppo come ogni altro contenuto: 8px, non 32 */
summary + .coda-giorno[b-e8g4rsgx94] { margin-top: 0; }

/* un giorno dall'altro 24px: meno dei 32 fra i gruppi, piu' degli 8 fra un titolo e le sue voci */
.coda-giorno .mono[b-e8g4rsgx94] { font-weight: 400; color: var(--grigio); }

.coda-spiega[b-e8g4rsgx94] {
    margin: 0 0 var(--s2);
    font-size: var(--t-piccolo);
    color: var(--grigio);
}

/* ---------- le voci ---------- */

.coda-voci[b-e8g4rsgx94] {
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--superficie);
    border: 1px solid var(--riga);
    /* il bordo di sinistra lo disegna ogni voce: quella in ritardo lo fa rosso, al posto del grigio */
    border-left: 0;
    border-radius: var(--raggio-grande);
    overflow: hidden;
}

.coda-voce[b-e8g4rsgx94] {
    display: grid;
    /* la colonna del quando stretta (04/10/2026, il committente: "2 g" stava lontano dalla voce); si allarga
       solo per i ritardi lunghi ("1125 g"), e il testo parte sempre allo stesso posto per gli altri */
    grid-template-columns: minmax(52px, max-content) minmax(0, 1fr) auto;
    gap: var(--s2);
    align-items: start;
    padding: var(--s3) var(--s4);
    border-top: 1px solid var(--riga);
    box-shadow: inset 1px 0 0 var(--riga);
}

.coda-voce:first-child[b-e8g4rsgx94] { border-top: 0; }

/*
    in ritardo: il bordo a sinistra e il glifo nel quando, insieme. Il rosso sta sul bordo del
    riquadro, non un pixel dentro accanto al grigio (28/09/2026)
*/
.coda-voce.scaduta[b-e8g4rsgx94] { box-shadow: inset 3px 0 0 var(--allarme); }

.coda-quando[b-e8g4rsgx94] {
    display: inline-flex;
    align-items: baseline;
    gap: var(--s1);
    padding-top: 1px;
    font-size: var(--t-piccolo);
    color: var(--grigio);
    white-space: nowrap;
}

.coda-quando.allarme[b-e8g4rsgx94] { color: var(--allarme); font-weight: 600; }

.coda-quando .segno[b-e8g4rsgx94] { font-size: var(--t-micro); }

.coda-corpo[b-e8g4rsgx94] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.coda-tipo[b-e8g4rsgx94] {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--grigio);
}

/* l'icona del tipo, come nel calendario: della misura del testo e centrata su di lui */
.coda-tipo > span[b-e8g4rsgx94] { display: inline-flex; }

.coda-tipo[b-e8g4rsgx94]  .coda-icona { width: 1.15em; height: 1.15em; }

.coda-titolo[b-e8g4rsgx94] {
    font-weight: 600;
    color: var(--inchiostro);
    overflow-wrap: anywhere;
}

.coda-titolo:hover[b-e8g4rsgx94] { color: var(--link); }

/* la nota del richiamo puo' essere lunga: due righe bastano per ricordare di cosa si tratta */
.coda-dettaglio[b-e8g4rsgx94] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--t-piccolo);
    color: var(--grigio);
    overflow-wrap: anywhere;
}

.coda-segnale[b-e8g4rsgx94] {
    align-self: flex-start;
    margin-top: var(--s1);
    white-space: normal;
}

.coda-importo[b-e8g4rsgx94] {
    text-align: right;
    font-size: var(--t-base);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---------- telefono: e' la prima cosa che si vede, a 375 px ---------- */

@media (max-width: 700px) {
    .coda-contatori[b-e8g4rsgx94] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--s2);
    }

    .contatore[b-e8g4rsgx94] { padding: var(--s2) var(--s3); }

    .contatore-numero[b-e8g4rsgx94] { font-size: var(--t-grande); }

    .coda-voce[b-e8g4rsgx94] {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: var(--s2);
        padding: var(--s3);
    }

    /* importo e pulsanti vanno sotto il testo e restano a destra: non ruba larghezza al titolo, e gli importi
       di voci diverse restano incolonnati */
    .coda-lato[b-e8g4rsgx94] {
        grid-column: 2;
        justify-self: end;
    }

    .coda-chi[b-e8g4rsgx94]  .campo { flex: 1 1 auto; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .coda-gruppo details > summary[b-e8g4rsgx94]::before { transition: none; }
}

/* ---------- le azioni della coda ---------- */

/* importo e pulsanti stanno nella terza colonna, uno sotto l'altro, allineati a destra */
.coda-lato[b-e8g4rsgx94] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--s1);
}

.coda-azioni[b-e8g4rsgx94] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--s1);
}

/* il modulo di un'azione, nella finestra sopra la pagina */
.coda-modulo[b-e8g4rsgx94] {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
}

.coda-modulo textarea[b-e8g4rsgx94] { width: 100%; resize: vertical; }

/* il menu di cosa si vede, a destra dei filtri, e sotto i filtri quando e' aperto */
.coda-colonne-tasto[b-e8g4rsgx94] { margin-left: auto; }

.menu-colonne[b-e8g4rsgx94] {
    margin-bottom: var(--s3);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
}

/* lo storico del lead sotto la voce, rientrato come la nota della voce */
.coda-storico[b-e8g4rsgx94] {
    grid-column: 2 / -1;
    padding: var(--s2) var(--s3);
    border-left: 3px solid var(--riga);
    border-radius: var(--raggio);
    background: var(--superficie-alt);
}

.coda-storico-tutto[b-e8g4rsgx94] {
    display: inline-block;
    margin-top: var(--s2);
    font-size: var(--t-piccolo);
}

@media (max-width: 700px) {
    .coda-storico[b-e8g4rsgx94] { grid-column: 1 / -1; }
}

/* /Components/Pages/Oggi/Posta/Posta.razor.rz.scp.css */
/*
    La Posta (12/10/2026): l'elenco e l'email aperta. Da 1400px in su stanno insieme, con l'email a destra, a sinistra,
    sotto o sopra (scelta della persona) e il divisore da trascinare; sotto, l'elenco e' largo il 100% e l'email aperta o
    da scrivere e' una finestra al centro larga al massimo 800px; sotto i 900px copre lo schermo.
*/
.posta[b-8t9qf2f7cg] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s3);
    align-items: start;
}

.posta-barra[b-8t9qf2f7cg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s3);
    margin-bottom: var(--s2);
}

/* in una riga sua, sotto i pulsanti */
.posta-stato[b-8t9qf2f7cg] { flex: 1 0 100%; }

.posta-stato:empty[b-8t9qf2f7cg] { display: none; }

/* la persona accanto al titolo, larga quanto il suo nome */
.posta-di[b-8t9qf2f7cg] { width: auto; max-width: 100%; align-self: center; }

.posta-disposizione[b-8t9qf2f7cg] { display: none; align-items: center; gap: var(--s1); }

/* a destra sulla riga della ricerca (03/11/2026) */
.posta-azioni[b-8t9qf2f7cg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s1);
    margin-left: auto;
}

/* il conteggio ha il suo posto anche vuoto: scegliendo i pulsanti non si spostano */
.posta-scelte[b-8t9qf2f7cg] { min-width: 5.5em; text-align: right; }

.posta-sposta[b-8t9qf2f7cg] { width: auto; max-width: 14rem; }

.posta-immagini[b-8t9qf2f7cg] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: var(--s2) 0 0; }

/* le cartelle personali, nella loro finestra */
/* le regole automatiche, nella loro finestra */
.posta-regola[b-8t9qf2f7cg] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s2) 0; border-bottom: 1px solid var(--riga); }

.posta-regole-piede[b-8t9qf2f7cg] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); }

.posta-regole-applica[b-8t9qf2f7cg] { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }

.posta-regole-applica select[b-8t9qf2f7cg] { width: auto; max-width: 14rem; }

.posta-regola-gruppo[b-8t9qf2f7cg] { display: grid; gap: var(--s2); margin: var(--s3) 0 0; padding: 0; border: 0; }

.posta-regola-gruppo legend[b-8t9qf2f7cg] { padding: 0; margin-bottom: var(--s1); font-weight: 600; }

.posta-regola-gruppo > .btn[b-8t9qf2f7cg] { justify-self: start; }

.posta-regola-condizione[b-8t9qf2f7cg] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }

.posta-regola-condizione select[b-8t9qf2f7cg] { flex: 1 1 9rem; width: auto; min-width: 0; }

.posta-regola-condizione input[b-8t9qf2f7cg] { flex: 2 1 12rem; width: auto; min-width: 0; }

.posta-regola-azione[b-8t9qf2f7cg] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }

.posta-regola-azione > span[b-8t9qf2f7cg] { flex: 0 0 5rem; }

.posta-regola-azione select[b-8t9qf2f7cg] { flex: 1 1 12rem; width: auto; min-width: 0; }

.posta-gestione-riga[b-8t9qf2f7cg] { display: flex; align-items: center; gap: var(--s2); padding: var(--s1) 0; border-bottom: 1px solid var(--riga); }

.posta-gestione-riga input[b-8t9qf2f7cg] { flex: 1; min-width: 0; }

.posta-gestione-nome[b-8t9qf2f7cg] { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.posta-gestione-nuova[b-8t9qf2f7cg] { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }

.posta-gestione-nuova input[b-8t9qf2f7cg] { flex: 2 1 14rem; width: auto; min-width: 0; }

.posta-gestione-nuova select[b-8t9qf2f7cg] { flex: 1 1 10rem; width: auto; min-width: 0; }

.posta-conta[b-8t9qf2f7cg] { font-weight: 700; }

.posta-lettura[b-8t9qf2f7cg], .posta-scrivi[b-8t9qf2f7cg] { padding: var(--s3); }

/* il velo c'e' solo quando l'email aperta e' una finestra (sotto i 1400px) */
.posta-velo[b-8t9qf2f7cg] { display: none; }

.posta-testo[b-8t9qf2f7cg] {
    margin-top: var(--s3);
    overflow-wrap: anywhere;
}

/* la cornice del testo: bianca come l'email, alta quanto il contenuto (posta.js) */
.posta-cornice[b-8t9qf2f7cg] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 4rem;
    border: 1px solid var(--riga);
    border-radius: var(--raggio, 4px);
    background: #fff;
}

.posta-allegati[b-8t9qf2f7cg] { display: flex; flex-wrap: wrap; gap: var(--s1); margin: var(--s2) 0 0; padding: 0; list-style: none; }

/* le righe si scelgono col clic: niente testo selezionato con Shift, e si vede quali sono scelte o da leggere */
.posta-elenco[b-8t9qf2f7cg]  .riga-cliccabile { cursor: pointer; user-select: none; }

.posta-elenco[b-8t9qf2f7cg]  .riga-scelta > td { background: color-mix(in srgb, var(--verde) 14%, var(--superficie)); }

.posta-elenco[b-8t9qf2f7cg]  .posta-da-leggere > td { font-weight: 700; }

/* in evidenza (15/10/2026, come in Thunderbird): il fondo dell'attesa, lo stesso giallo della stella; la scelta resta piu' forte */
.posta-elenco[b-8t9qf2f7cg]  .posta-in-evidenza > td { background: var(--attesa-fondo); }

.posta-elenco[b-8t9qf2f7cg]  .posta-in-evidenza.riga-scelta > td { background: color-mix(in srgb, var(--verde) 14%, var(--attesa-fondo)); }

.posta-icone[b-8t9qf2f7cg] { display: inline-flex; gap: var(--s1); }

.posta-icona[b-8t9qf2f7cg] { display: inline-flex; align-items: center; }

.posta-icona.da-leggere[b-8t9qf2f7cg] { color: var(--verde); }

.posta-icona.fatto[b-8t9qf2f7cg] { color: var(--fatto); }

button.posta-icona[b-8t9qf2f7cg] { min-width: 0; padding: 0 var(--s1); font-size: 1rem; line-height: 1; }

.posta-stella.accesa[b-8t9qf2f7cg] { color: var(--attesa); }

.posta-spunta[b-8t9qf2f7cg] { display: inline-flex; align-items: center; gap: var(--s1); }

.posta-cerca[b-8t9qf2f7cg] { flex: 1; min-width: 14rem; max-width: 32rem; }

.posta-divisore[b-8t9qf2f7cg] { display: none; }

@media (min-width: 1401px) {
    .posta-disposizione[b-8t9qf2f7cg] { display: inline-flex; }

    .posta.disp-destra[b-8t9qf2f7cg], .posta.disp-sinistra[b-8t9qf2f7cg] { gap: 0; }

    .posta.disp-destra[b-8t9qf2f7cg] { grid-template-columns: minmax(0, var(--posta-misura, 60%)) var(--s3) minmax(0, 1fr); }

    .posta.disp-sinistra[b-8t9qf2f7cg] { grid-template-columns: minmax(0, 1fr) var(--s3) minmax(0, var(--posta-misura, 60%)); }

    .posta.disp-sinistra .posta-lato[b-8t9qf2f7cg] { order: 1; }
    .posta.disp-sinistra .posta-divisore[b-8t9qf2f7cg] { order: 2; }
    .posta.disp-sinistra .posta-elenco[b-8t9qf2f7cg] { order: 3; }

    .posta.disp-destra .posta-lettura[b-8t9qf2f7cg], .posta.disp-destra .posta-scrivi[b-8t9qf2f7cg],
    .posta.disp-sinistra .posta-lettura[b-8t9qf2f7cg], .posta.disp-sinistra .posta-scrivi[b-8t9qf2f7cg] { position: sticky; top: var(--s2); }

    /* sopra e sotto: altezza fissa sullo schermo, e ognuno scorre per conto suo */
    .posta.disp-sotto[b-8t9qf2f7cg], .posta.disp-sopra[b-8t9qf2f7cg] {
        gap: 0;
        height: calc(100vh - 15rem);
        min-height: 32rem;
        align-items: stretch;
    }

    .posta.disp-sotto[b-8t9qf2f7cg] { grid-template-rows: minmax(0, var(--posta-misura, 45%)) var(--s3) minmax(0, 1fr); }

    .posta.disp-sopra[b-8t9qf2f7cg] { grid-template-rows: minmax(0, 1fr) var(--s3) minmax(0, var(--posta-misura, 45%)); }

    .posta.disp-sopra .posta-lato[b-8t9qf2f7cg] { order: 1; }
    .posta.disp-sopra .posta-divisore[b-8t9qf2f7cg] { order: 2; }
    .posta.disp-sopra .posta-elenco[b-8t9qf2f7cg] { order: 3; }

    .posta.disp-sotto .posta-elenco[b-8t9qf2f7cg], .posta.disp-sotto .posta-lato[b-8t9qf2f7cg],
    .posta.disp-sopra .posta-elenco[b-8t9qf2f7cg], .posta.disp-sopra .posta-lato[b-8t9qf2f7cg] { min-height: 0; overflow: auto; }

    .posta-divisore[b-8t9qf2f7cg] {
        display: block;
        align-self: stretch;
        min-height: 12rem;
        cursor: col-resize;
        touch-action: none;
        background: linear-gradient(var(--riga), var(--riga)) center / 2px 100% no-repeat;
    }

    .posta-divisore:hover[b-8t9qf2f7cg] { background-image: linear-gradient(var(--verde), var(--verde)); background-size: 4px 100%; }

    .posta.disp-sotto .posta-divisore[b-8t9qf2f7cg], .posta.disp-sopra .posta-divisore[b-8t9qf2f7cg] {
        min-height: 0;
        cursor: row-resize;
        background-size: 100% 2px;
    }

    .posta.disp-sotto .posta-divisore:hover[b-8t9qf2f7cg], .posta.disp-sopra .posta-divisore:hover[b-8t9qf2f7cg] { background-size: 100% 4px; }
}

@media (max-width: 1400px) {
    /* l'elenco e' a tutta pagina: scorre la pagina, non anche la tabella (13/10/2026, doppio scorrimento) */
    .posta-elenco[b-8t9qf2f7cg]  .tabella-scorri { max-height: none; overflow-y: visible; }

    /* finche' c'e' posto l'email aperta o da scrivere e' una finestra al centro, larga al massimo 800px, con la pagina
       velata dietro (14/10/2026); sotto i 900px copre lo schermo */
    .posta-scrivi[b-8t9qf2f7cg], .posta-lettura[b-8t9qf2f7cg] {
        position: fixed;
        inset: var(--s4) 0;
        z-index: 50;
        width: min(800px, calc(100% - 2 * var(--s4)));
        margin: 0 auto;
        overflow-y: auto;
    }

    /* dietro la finestra il velo e' un elemento, non un'ombra: un clic fuori la chiude */

    .posta-velo[b-8t9qf2f7cg] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 49;
        background: rgb(0 0 0 / 0.45);
    }
}

@media (max-width: 900px) {
    .posta-scrivi[b-8t9qf2f7cg], .posta-lettura[b-8t9qf2f7cg] {
        inset: 0;
        width: 100%;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .posta-velo[b-8t9qf2f7cg] { display: none; }
}

.btn-link[b-8t9qf2f7cg] {
    padding: 0;
    background: none;
    border: 0;
    color: var(--link, var(--verde));
    font: inherit;
    text-align: left;
    text-decoration: underline;
    cursor: pointer;
}

.posta-cartelle[b-8t9qf2f7cg] { display: inline-flex; gap: var(--s1); }

/* il + di "Nuova email": grande e spesso, sottile sembrava un carattere scritto */
.posta-nuova[b-8t9qf2f7cg]  .icona { stroke-width: 2.4; }

/* resta l'azione principale: i pulsanti con la sola icona sono bianchi per regola generale */
.posta-nuova[b-8t9qf2f7cg] { color: var(--su-accento); background: var(--verde); border-color: var(--verde); }

/* il numero di email in un'etichetta a parte: "Archives 1 email" si leggeva tutto come il nome della cartella */
.posta-gestione-numero[b-8t9qf2f7cg] {
    display: inline-block;
    margin-left: var(--s2);
    padding: 0 var(--s2);
    border: 1px solid var(--riga);
    border-radius: 999px;
    color: var(--grigio);
    font-size: 0.8125rem;
    font-weight: 400;
    white-space: nowrap;
}

.posta-cartelle .attivo[b-8t9qf2f7cg] { border-color: var(--verde); color: var(--verde); font-weight: 600; }

.posta-destinatari[b-8t9qf2f7cg] { display: flex; flex-wrap: wrap; gap: var(--s1); margin: 0 0 var(--s1); padding: 0; list-style: none; }

.posta-destinatari li[b-8t9qf2f7cg] { display: inline-flex; align-items: center; gap: var(--s1); }

.posta-aggiungi[b-8t9qf2f7cg] { display: flex; gap: var(--s2); align-items: center; }

/* il campo suggerito e' un componente: la regola gli arriva con ::deep */
.posta-aggiungi[b-8t9qf2f7cg]  .suggerito { flex: 1; }

.posta-ai[b-8t9qf2f7cg] { display: flex; gap: var(--s2); margin-top: var(--s2); }

.posta-ai select[b-8t9qf2f7cg] { flex: 1; }

.posta-lettura-testa[b-8t9qf2f7cg] { display: flex; flex-direction: column; align-items: stretch; gap: var(--s2); }

.posta-prompt[b-8t9qf2f7cg] { display: grid; gap: var(--s1); padding: var(--s2) 0; border-bottom: 1px solid var(--riga); }

.posta-prompt-azioni[b-8t9qf2f7cg] { display: flex; gap: var(--s2); align-items: center; }

.posta-prompt-azioni input[b-8t9qf2f7cg] { width: 6em; }

.posta-testo[b-8t9qf2f7cg]  blockquote, .posta-testo blockquote[b-8t9qf2f7cg] { margin: var(--s2) 0; padding-left: var(--s3); border-left: 3px solid var(--riga); color: var(--grigio); }

.posta-lettura-azioni[b-8t9qf2f7cg] { display: flex; flex-wrap: wrap; gap: var(--s1); min-width: 0; }

/* i risultati della finestra "Associa il mittente": alti uguali anche vuoti, cosi' non salta (13/10/2026) */
/*
    "Associa il mittente" (15/10/2026, il committente: "non e' formattata bene"): i risultati sono righe intere da
    scegliere, col tipo in un'etichetta di larghezza fissa e senza sottolineature; niente spazio vuoto riservato sotto
    pochi risultati; il nome del lead nuovo prende lo spazio e la provenienza accanto quello che le serve.
*/
.posta-candidati[b-8t9qf2f7cg] { max-height: 16rem; overflow-y: auto; margin: var(--s2) 0 var(--s3); padding: 0; list-style: none; }

.posta-candidati:empty[b-8t9qf2f7cg] { display: none; }

.posta-candidati li[b-8t9qf2f7cg] { border-bottom: 1px solid var(--riga); }

.posta-candidati li:last-child[b-8t9qf2f7cg] { border-bottom: 0; }

.posta-candidati .btn-link[b-8t9qf2f7cg] {
    display: flex;
    align-items: baseline;
    gap: var(--s2);
    width: 100%;
    padding: var(--s1) var(--s2);
    border-radius: var(--raggio);
    color: var(--inchiostro);
    text-align: left;
    text-decoration: none;
}

.posta-candidati .btn-link:hover[b-8t9qf2f7cg] { background: var(--superficie-alt); }

.posta-candidati .stato[b-8t9qf2f7cg] { flex: 0 0 5.5rem; color: var(--grigio); font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; }

.posta-candidati .tenue[b-8t9qf2f7cg] { margin-left: auto; text-align: right; }

/* lo scelto: fondo e un'ombra sul testo, non il grassetto che allarga la riga */
.posta-candidati .scelto[b-8t9qf2f7cg] { background: var(--verde-tenue); text-shadow: 0 0 .6px currentColor; }

.posta-al-lead-riga[b-8t9qf2f7cg] { display: flex; flex-wrap: wrap; gap: var(--s2); }

.posta-al-lead-riga input[b-8t9qf2f7cg] { flex: 2 1 14rem; width: auto; min-width: 0; }

.posta-al-lead-riga select[b-8t9qf2f7cg] { flex: 1 1 12rem; width: auto; min-width: 0; }

/* lo spazio della casella, accanto a "Nuova email" (13/10/2026): rosso oltre il 90% */
.posta-spazio[b-8t9qf2f7cg] { display: inline-flex; align-items: center; gap: var(--s1); min-width: 11rem; color: var(--grigio); font-size: .875rem; font-variant-numeric: tabular-nums; }

.posta-spazio-barra[b-8t9qf2f7cg] { display: inline-block; width: 4rem; height: .5rem; border-radius: 999px; background: var(--riga); overflow: hidden; }

.posta-spazio-barra > span[b-8t9qf2f7cg] { display: block; height: 100%; background: var(--verde); }

.posta-spazio.pieno[b-8t9qf2f7cg] { color: var(--allarme); }

.posta-spazio.pieno .posta-spazio-barra > span[b-8t9qf2f7cg] { background: var(--allarme); }

/* le cartelle della persona: tratteggiate, cosi' non si confondono con quelle di sistema (03/11/2026) */
.posta-personali[b-8t9qf2f7cg] { gap: var(--s1); }
.posta-personali .btn[b-8t9qf2f7cg] { border-style: dashed; }
.posta-personali .attivo[b-8t9qf2f7cg] { border-color: var(--verde); color: var(--verde); font-weight: 600; }
/* /Components/Pages/Personale/Andamento/AndamentoPersonale.razor.rz.scp.css */
/* la scelta della persona, per l'amministratore, dentro la barra della scheda: etichetta sopra, tendina larga quanto serve */
.persona[b-4734ogr1ar] { display: flex; flex-direction: column; gap: var(--s1); }

.persona .etichetta[b-4734ogr1ar] { margin: 0; }

.persona[b-4734ogr1ar]  .campo { width: auto; min-width: 200px; }
/* /Components/Pages/Personale/Andamento/SchedaAndamento.razor.rz.scp.css */
/* La scheda andamento di una persona: riquadri, saldo, grafico e mesi. Solo token.
   Il grafico e la scelta degli anni a confronto hanno lo stile comune (componenti.css). */

/* dentro una scheda (la downline) periodo e nota sono gia' sul riquadro: niente secondo riquadro */
.scheda .comandi[b-31ts2oarjb],
.scheda .nota-pagina[b-31ts2oarjb] {
    padding: 0;
    background: none;
    border: 0;
}

.scelte-fila[b-31ts2oarjb] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
    margin: 0;
    padding: 0;
    border: 0;
}

.indicatori[b-31ts2oarjb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--s3);
}

.indicatore[b-31ts2oarjb] {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    padding: var(--s3) var(--s4);
    /* la tinta la da' una classe tinta-* (base.css), verde i contratti, viola il lavoro fatto, blu il rapporto */
    background: var(--tinta-fondo, var(--superficie));
    border: 1px solid var(--tinta-fondo, var(--riga));
    border-top: 4px solid var(--tinta, var(--riga));
    border-radius: var(--raggio-grande);
}

.indicatore-nome[b-31ts2oarjb] {
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tinta, var(--grigio));
}

.indicatore-valore[b-31ts2oarjb] { font-size: var(--t-grande); font-weight: 600; text-align: right; color: var(--tinta, var(--inchiostro)); }

.indicatore-nota[b-31ts2oarjb] { font-size: var(--t-piccolo); color: var(--grigio); text-align: right; }

.su[b-31ts2oarjb] { color: var(--fatto); }

.giu[b-31ts2oarjb] { color: var(--allarme); }

.nota[b-31ts2oarjb] { color: var(--grigio); font-size: var(--t-piccolo); margin: var(--s2) 0; }

/* i compensi ricevuti a tutta larghezza: il grafico che gli stava accanto e' diventato la mappa sotto (26/09/2026) */
.due[b-31ts2oarjb] { margin: var(--s3) 0; }

/* la mappa sopra la tabella dei mesi, staccata da lei */
.mappa-sopra[b-31ts2oarjb] { margin-bottom: var(--s4); }

/* nella barra: etichetta sopra la tendina, a 4px, tendine larghe quanto serve */
.comando[b-31ts2oarjb] { display: flex; flex-direction: column; gap: var(--s1); }

.comando .etichetta[b-31ts2oarjb] { margin: 0; }

.comando .campo[b-31ts2oarjb] { width: auto; min-width: 170px; }
/* /Components/Pages/Personale/Compensi/Compensi.razor.rz.scp.css */
/*
    La pagina dei compensi. Colori, caratteri e spaziature vengono solo dai token.
*/

/* ---------- barra: di chi e quale mese ---------- */

.barra[b-dyxltvd5vl] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s2) var(--s4);
    margin-bottom: var(--s3);
}

/* la scelta del mese e' il componente condiviso SceltaMese: qui solo la distanza da sotto */
.barra[b-dyxltvd5vl]  .scelta-mese { margin-bottom: var(--s3); }

/* ---------- i totali in testa ---------- */

.riepilogo[b-dyxltvd5vl] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s3);
    margin-bottom: var(--s4);
}

.cifra[b-dyxltvd5vl] {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    padding: var(--s3) var(--s4);
    /* la tinta la da' una classe tinta-* (base.css); senza, il riquadro resta bianco */
    background: var(--tinta-fondo, var(--superficie));
    border: 1px solid var(--tinta-fondo, var(--riga));
    border-top: 4px solid var(--tinta, var(--riga));
    border-radius: var(--raggio-grande);
}

.cifra-nome[b-dyxltvd5vl] {
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tinta, var(--grigio));
}

.cifra-valore[b-dyxltvd5vl] {
    font-size: var(--t-grande);
    font-weight: 600;
    color: var(--tinta, var(--inchiostro));
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* il glifo ▲ accompagna il colore: chi non vede il rosso legge il segno */
.tinta-rosso .cifra-nota[b-dyxltvd5vl], .tinta-verde .cifra-nota[b-dyxltvd5vl] { color: var(--tinta); }

.cifra-nota[b-dyxltvd5vl] {
    font-size: var(--t-piccolo);
    color: var(--grigio);
    text-align: right;
}

/* ---------- elenco delle persone e dettaglio ---------- */

.elenco-dettaglio[b-dyxltvd5vl] {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s4);
    align-items: start;
}

.persone[b-dyxltvd5vl] { padding: 0; overflow: hidden; }

/* le tabelle sono Tabella compatte: le celle le disegna il componente, ci si arriva con ::deep */
.persone[b-dyxltvd5vl]  .tabella thead th { position: static; }

.persone[b-dyxltvd5vl]  tr.aperta td { background: var(--verde-tenue); }

.persone tr.aperta a[b-dyxltvd5vl] { font-weight: 700; }

/* la scheda qui non ha margine interno: conteggio e pulsante Colonne non devono toccare il bordo */
.persone[b-dyxltvd5vl]  .paginazione { padding: var(--s2) var(--s3); }

.debito[b-dyxltvd5vl] { color: var(--allarme); }

/* da pagare quando arriva il documento, o pagato di piu': lo stato accanto dice quale, a parole */
.in-attesa[b-dyxltvd5vl] { color: var(--attesa); }

.grigio[b-dyxltvd5vl] { color: var(--grigio); }

/* ---------- di chi e' il piano, per chi gestisce ---------- */

.piano-persona[b-dyxltvd5vl] {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-width: 320px;
}

/* ---------- dettaglio di una persona ---------- */

.dettaglio-testa[b-dyxltvd5vl] {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin-bottom: var(--s3);
}

.dettaglio-testa h2[b-dyxltvd5vl] {
    margin: 0;
    font-size: var(--t-grande);
}

.conto[b-dyxltvd5vl] {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-auto-flow: column;
    grid-template-rows: auto auto;
    justify-content: start;
    gap: 0 var(--s6);
    margin: 0 0 var(--s4);
}

.conto dt[b-dyxltvd5vl] {
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--grigio);
}

.conto dd[b-dyxltvd5vl] {
    margin: 0;
    font-size: var(--t-medio);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.gruppo + .gruppo[b-dyxltvd5vl],
.stato-vuoto + .gruppo[b-dyxltvd5vl] { margin-top: var(--s4); }

.gruppo-testa[b-dyxltvd5vl] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s3);
    margin-bottom: var(--s2);
    padding-bottom: var(--s1);
    border-bottom: 1px solid var(--riga);
}

.gruppo-testa .mono[b-dyxltvd5vl] { color: var(--inchiostro); }

.quante[b-dyxltvd5vl] {
    margin-left: var(--s1);
    font-family: var(--mono);
    font-weight: 400;
    color: var(--grigio-tenue);
}

.nota[b-dyxltvd5vl] {
    margin: 0 0 var(--s2);
    font-size: var(--t-piccolo);
    color: var(--grigio);
}

.voci[b-dyxltvd5vl]  .tabella tbody td { padding: var(--s1) var(--s2); }

.voci[b-dyxltvd5vl]  .tabella thead th { position: static; }

.voci[b-dyxltvd5vl]  .tabella .n { width: 110px; }

.voce-titolo[b-dyxltvd5vl] { display: block; }

.voce-rif[b-dyxltvd5vl] {
    display: block;
    font-size: var(--t-piccolo);
    color: var(--grigio);
}

.avviso-cliente[b-dyxltvd5vl],
.documento-attesa[b-dyxltvd5vl] { color: var(--attesa); }

.da-applicare .voce-titolo[b-dyxltvd5vl] { color: var(--grigio); }

.prossimo-giro[b-dyxltvd5vl] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-top: var(--s3);
}

/* ---------- presenza giorno per giorno ---------- */

.giorni-mese[b-dyxltvd5vl] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--s1);
    height: 72px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.giorni-mese li[b-dyxltvd5vl] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    min-width: 0;
}

.barra-giorno[b-dyxltvd5vl] {
    display: block;
    min-height: 1px;
    background: var(--verde);
    border-radius: 2px 2px 0 0;
}

.giorno-num[b-dyxltvd5vl] {
    margin-top: var(--s1);
    font-size: var(--t-micro);
    text-align: center;
    color: var(--grigio-tenue);
}

.giorni-mese li.domenica .giorno-num[b-dyxltvd5vl] { color: var(--allarme); font-weight: 700; }

/* ---------- telefono: tutto in colonna, i totali due per riga ---------- */

@media (max-width: 900px) {
    .elenco-dettaglio[b-dyxltvd5vl] { grid-template-columns: minmax(0, 1fr); }

    .riepilogo[b-dyxltvd5vl] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
    .conto[b-dyxltvd5vl] {
        grid-auto-flow: row;
        grid-template-columns: auto auto;
        grid-template-rows: none;
        gap: var(--s1) var(--s4);
    }

    .giorno-num[b-dyxltvd5vl] { display: none; }
}

/* ---------- da saldare ---------- */

.in-arrivo[b-dyxltvd5vl] { margin-top: var(--s5); }

/* la scelta del mese sta in una piccola fascia accanto alle linguette, non sul fondo della pagina */
.compensi-mese[b-dyxltvd5vl] { margin: 0; }
/* /Components/Pages/Personale/Compensi/FissoObiettivi.razor.rz.scp.css */
/* Fisso e obiettivi di una persona: elenco e modulo, dentro il pannello della scheda compensi. */

.fisso-obiettivi[b-97o4a4ea4l] { margin-top: var(--s4); }

.modulo-fisso[b-97o4a4ea4l] {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    margin: var(--s3) 0 0;
    padding: var(--s3);
    border: 1px solid var(--riga);
    border-radius: 8px;
    background: var(--superficie-alt);
}

.campi-fila[b-97o4a4ea4l] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--s3);
}

.campo-gruppo[b-97o4a4ea4l] {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
}

.importo[b-97o4a4ea4l] { width: 9rem; text-align: right; }

.scelte-fila[b-97o4a4ea4l] {
    display: flex;
    gap: var(--s3);
    margin: 0;
    padding: 0;
    border: 0;
}

.nota[b-97o4a4ea4l] { color: var(--grigio); font-size: var(--t-piccolo); margin: 0; }

.azioni-riga[b-97o4a4ea4l] {
    display: inline-flex;
    gap: var(--s1);
    white-space: nowrap;
}

/* mese e anno del "Dal mese": due tendine vicine, sono un dato solo */
.mese-anno[b-97o4a4ea4l] { display: flex; gap: var(--s1); }
/* larghe quanto "mag 05" e "2026" con la freccia: la larghezza del campo le tagliava */
.mese-anno .campo[b-97o4a4ea4l] { width: auto; min-width: 8rem; max-width: none; flex: 0 0 auto; }
/* /Components/Pages/Personale/Compensi/GestioneCompenso.razor.rz.scp.css */
/*
    Le azioni sul mese di una persona. Colori e spaziature solo dai token; campi e pulsanti tengono
    l'altezza unica delle classi campo e btn.
*/

.gruppo[b-vgyushdqhv] { margin-top: var(--s4); }

.gruppo-testa[b-vgyushdqhv] {
    display: flex;
    justify-content: space-between;
    gap: var(--s3);
}

.quante[b-vgyushdqhv] { color: var(--grigio); font-weight: 400; }

.nota[b-vgyushdqhv] { color: var(--grigio); font-size: var(--t-piccolo); margin: var(--s2) 0; }

.voce-rif[b-vgyushdqhv] { color: var(--grigio); font-size: var(--t-piccolo); }

.grigio[b-vgyushdqhv] { color: var(--grigio); }

.documento-attesa[b-vgyushdqhv] { color: var(--attesa); }

.carica-documento[b-vgyushdqhv] {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    margin-top: var(--s3);
}

.azioni-compenso[b-vgyushdqhv] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-top: var(--s4);
}

/* azioni di contorno al conto del mese: pulsanti veri ma piu' piccoli, non devono pesare come le cifre */
.azioni-compenso .btn[b-vgyushdqhv] {
    height: 28px;
    padding: 0 var(--s2);
    font-size: var(--t-piccolo);
}

.campi-fila[b-vgyushdqhv] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--s3);
}

.campo-gruppo[b-vgyushdqhv] {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
}

.importo[b-vgyushdqhv] { width: 9rem; text-align: right; }

.scelte-fila[b-vgyushdqhv] {
    display: flex;
    gap: var(--s3);
    margin: 0;
    padding: 0;
    border: 0;
}

.conto[b-vgyushdqhv] {
    display: grid;
    grid-template-columns: auto auto;
    gap: var(--s1) var(--s4);
    justify-content: start;
    margin: var(--s3) 0;
}

.conto dd[b-vgyushdqhv] { margin: 0; text-align: right; }

.togli-elenco[b-vgyushdqhv] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.togli-elenco li[b-vgyushdqhv] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--s3);
    padding: var(--s1) 0;
    border-bottom: 1px solid var(--riga);
}

/* le tabelline dentro la scheda: righe basse e intestazione che non resta ferma */
.voci[b-vgyushdqhv]  .tabella tbody td { padding: var(--s1) var(--s2); }

.voci[b-vgyushdqhv]  .tabella thead th { position: static; }
/* /Components/Pages/Personale/Compensi/SpintaVendite.razor.rz.scp.css */
.spinta[b-ci2gtaqbl5] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: var(--s3);
    margin-bottom: var(--s4);
}

.spinta-mio[b-ci2gtaqbl5] {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    min-width: 0;
}

.spinta-obiettivo[b-ci2gtaqbl5],
.spinta-piano[b-ci2gtaqbl5],
.spinta-classifica[b-ci2gtaqbl5] {
    padding: var(--s3) var(--s4);
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
}

.spinta-obiettivo[b-ci2gtaqbl5] {
    border-left: 6px solid var(--attesa);
}

.spinta-obiettivo.raggiunto[b-ci2gtaqbl5] {
    border-left-color: var(--fatto);
}

.spinta-premio[b-ci2gtaqbl5],
.spinta-manca[b-ci2gtaqbl5],
.spinta-nota[b-ci2gtaqbl5],
.spinta-sfida[b-ci2gtaqbl5],
.spinta-titolo[b-ci2gtaqbl5] {
    margin: 0;
}

.spinta-premio[b-ci2gtaqbl5] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s2);
}

.spinta-premio-valore[b-ci2gtaqbl5] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.spinta-premio-nome[b-ci2gtaqbl5],
.spinta-nota[b-ci2gtaqbl5],
.spinta-lavoro[b-ci2gtaqbl5],
.spinta-barra-nome[b-ci2gtaqbl5],
.spinta-barra-numeri[b-ci2gtaqbl5] {
    font-size: var(--t-piccolo);
}

.spinta-premio-nome[b-ci2gtaqbl5],
.spinta-nota[b-ci2gtaqbl5],
.spinta-vendite[b-ci2gtaqbl5] {
    color: var(--grigio);
}

.spinta-manca[b-ci2gtaqbl5] {
    margin-top: var(--s1);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--attesa);
}

.raggiunto .spinta-manca[b-ci2gtaqbl5] {
    color: var(--fatto);
}

.spinta-barre[b-ci2gtaqbl5] {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    margin: var(--s3) 0 var(--s2);
}

.spinta-barra-riga[b-ci2gtaqbl5] {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s2);
}

.spinta-barra[b-ci2gtaqbl5] {
    display: block;
    height: 14px;
    background: var(--superficie-alt);
    border: 1px solid var(--riga);
    border-radius: 7px;
    overflow: hidden;
}

.spinta-barra-pieno[b-ci2gtaqbl5] {
    display: block;
    height: 100%;
    background: var(--verde);
}

.spinta-titolo[b-ci2gtaqbl5] {
    font-size: var(--t-piccolo);
    font-weight: 700;
    text-transform: uppercase;
}

.spinta-percentuali[b-ci2gtaqbl5] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2) var(--s4);
    margin: var(--s2) 0;
    padding: 0;
    list-style: none;
}

.spinta-percentuali li[b-ci2gtaqbl5] {
    display: flex;
    align-items: baseline;
    gap: var(--s1);
}

.spinta-percento[b-ci2gtaqbl5] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--verde);
}

.spinta-link[b-ci2gtaqbl5] {
    font-size: var(--t-piccolo);
}

.spinta-sfida[b-ci2gtaqbl5] {
    margin-top: var(--s1);
    font-weight: 700;
}

.spinta-righe[b-ci2gtaqbl5] {
    margin: var(--s2) 0;
    padding: 0;
    list-style: none;
}

.spinta-righe li[b-ci2gtaqbl5] {
    display: grid;
    grid-template-columns: 1.5em minmax(0, 1fr) 2em auto;
    align-items: baseline;
    gap: var(--s2);
    padding: 3px var(--s1);
    border-radius: 4px;
}

.spinta-righe li.io[b-ci2gtaqbl5] {
    font-weight: 700;
    background: var(--superficie-alt);
    box-shadow: inset 3px 0 0 var(--verde);
}

.spinta-nome[b-ci2gtaqbl5] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spinta-vendite[b-ci2gtaqbl5],
.spinta-venduto[b-ci2gtaqbl5] {
    text-align: right;
}

@media (max-width: 900px) {
    .spinta[b-ci2gtaqbl5] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/Personale/Dati/ColonneColleghi.razor.rz.scp.css */
/*
    Colonne dei colleghi: l'elenco delle tabelle a sinistra, il confronto a destra. Nessuna delle due
    allunga la pagina: l'elenco scorre da se', e il confronto scorre nel suo riquadro, di lato quando i
    colleghi sono tanti. Sul telefono uno alla volta.
*/

.cc-pagina[b-7n4wi2mzjh] {
    display: grid;
    grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
    gap: var(--s3);
    align-items: start;
}

.cc-elenco[b-7n4wi2mzjh],
.cc-confronto[b-7n4wi2mzjh] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-height: calc(100dvh - 14rem);
}

.cc-gruppi[b-7n4wi2mzjh] {
    overflow-y: auto;
    margin-top: var(--s3);
    min-height: 0;
}

/* il primo gruppo sta sotto la ricerca, non staccato come gli altri */
.cc-gruppi > .pannello-titolo:first-of-type[b-7n4wi2mzjh] { margin-top: 0; }

.cc-voci[b-7n4wi2mzjh] {
    list-style: none;
    margin: var(--s1) 0 0;
    padding: 0;
}

.cc-voce[b-7n4wi2mzjh] {
    text-decoration: none;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s2);
    padding: var(--s1) var(--s2);
    border-radius: var(--raggio);
    border-left: 3px solid transparent;
    color: var(--inchiostro);
    text-decoration: none;
}

.cc-voce:hover[b-7n4wi2mzjh] { background: var(--riga-alterna); }

/*
    Senza sottolineatura (04/10/2026): e' un elenco per scegliere, come le linguette, e si riconosce
    dalla forma e dal bordo della scelta. Sottolineati, nome e numero facevano due righe per voce.
    Pesa piu' della regola dei link nel contenuto (base.css), che vale per i link dentro un testo.
*/
.cc-elenco .cc-voci a.cc-voce[b-7n4wi2mzjh],
.cc-elenco .cc-voci a.cc-voce:hover[b-7n4wi2mzjh] { text-decoration: none; }

.cc-voce:focus-visible[b-7n4wi2mzjh] { outline: 2px solid var(--verde); outline-offset: -2px; }

/* la scelta: bordo dell'accento e testo in grassetto, non solo un fondo diverso */
.cc-voce.attiva[b-7n4wi2mzjh] {
    border-left-color: var(--verde);
    background: var(--superficie-alt);
    font-weight: 600;
}

/*
    Quanti colleghi l'hanno cambiata, a destra del nome (04/10/2026): grigio a zero, colorato da uno in
    su - il colore dice "c'e' qualcosa da guardare", il numero dice quanto.
*/
.cc-voce-conta[b-7n4wi2mzjh] {
    flex: none;
    min-width: 1.6em;
    padding: 0 var(--s1);
    border-radius: var(--raggio);
    font-size: var(--t-micro);
    font-weight: 600;
    text-align: center;
    color: var(--grigio);
    font-variant-numeric: tabular-nums;
}

.cc-voce-conta.cambiata[b-7n4wi2mzjh] {
    color: var(--blu);
    background: var(--blu-fondo);
}

.cc-copia[b-7n4wi2mzjh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin: var(--s2) 0 var(--s3);
}

.cc-copia .etichetta[b-7n4wi2mzjh] { margin: 0; }

.cc-copia .campo[b-7n4wi2mzjh] { width: auto; max-width: 100%; }

/* il confronto scorre qui dentro, nei due versi */
.cc-griglia[b-7n4wi2mzjh] {
    min-height: 0;
    overflow: auto;
}

.cc-cella[b-7n4wi2mzjh] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* diversa da come l'ha chi guarda: il fondo dell'attesa e il segno, mai il colore da solo */
.cc-cella.diversa[b-7n4wi2mzjh] {
    padding: 0 var(--s1);
    border-radius: var(--raggio);
    color: var(--attesa);
    background: var(--attesa-fondo);
}

.cc-diversa:not(:empty)[b-7n4wi2mzjh] { margin-left: var(--s1); }

.cc-legenda[b-7n4wi2mzjh] { margin-top: var(--s2); }

.cc-torna[b-7n4wi2mzjh] { display: none; align-self: flex-start; margin-bottom: var(--s2); }

@media (max-width: 900px) {
    .cc-pagina[b-7n4wi2mzjh] { grid-template-columns: minmax(0, 1fr); }

    /* l'elenco resta alto quanto lo schermo e scorre lui; il confronto scorre nel suo riquadro */
    .cc-confronto[b-7n4wi2mzjh] { max-height: none; }

    .cc-griglia[b-7n4wi2mzjh] { max-height: 70dvh; }

    /* uno alla volta: con una tabella scelta il confronto, senza l'elenco */
    .cc-pagina.con-scelta .cc-elenco[b-7n4wi2mzjh],
    .cc-pagina:not(.con-scelta) .cc-confronto[b-7n4wi2mzjh] { display: none; }

    .cc-torna[b-7n4wi2mzjh] { display: inline-flex; }
}
/* /Components/Pages/Personale/Dati/DatiPersonali.razor.rz.scp.css */
/*
    La password resta in una colonna non troppo larga: sono tre campi. I tuoi dati invece usano
    tutta la larghezza (modulo-largo): le sezioni si affiancano quante ne stanno (modulo-colonne,
    in componenti.css), e dentro ogni sezione nome e cognome, i due telefoni, codice fiscale e data
    stanno in fila; sul telefono va tutto uno sotto l'altro da solo.
*/

.modulo-personale[b-k9yev8vqod] {
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: var(--s1);
}

.modulo-personale.modulo-largo[b-k9yev8vqod] { max-width: none; }

.modulo-personale .campo[b-k9yev8vqod] { width: 100%; }

/*
    La password e' un modulo in colonna senza sezioni: l'intervallo del modulo (s1) fa da distanza
    fra l'etichetta e il suo campo, e il margine sopra la stacca dal campo di prima. I tuoi dati
    sono a sezioni (modulo-sezione) e prendono gli stessi stacchi da componenti.css.
*/
.modulo-personale > .etichetta[b-k9yev8vqod] { margin-top: var(--s2); margin-bottom: 0; }

.modulo-personale textarea.campo[b-k9yev8vqod] {
    resize: vertical;
    /* la firma e' codice HTML: piu' piccolo, ci stanno le righe intere */
    font-size: var(--t-micro);
}

.facoltativo[b-k9yev8vqod] {
    color: var(--grigio);
    font-weight: normal;
    text-transform: none;
    letter-spacing: 0;
}


.accessi-nota[b-k9yev8vqod] { margin-top: var(--s3); }

/* i collegamenti di tutti: un gruppo nuovo, staccato dal primo elenco e a 8px dal suo */
.mcp-tutti-titolo[b-k9yev8vqod] { margin: 32px 0 8px; }
/* /Components/Pages/Personale/Dati/EditorGoogle.razor.rz.scp.css */
/*
    Il Google Calendar in Dati personali (26/09/2026): una scheda larga come il modulo della password.
    La "G" e' il segno degli eventi di Google nel calendario, con lo stesso colore.
*/

.google-g[b-iytrgmpa92] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 16px;
    font-size: var(--t-micro);
    font-weight: 700;
    color: var(--google);
    background: var(--google-fondo);
    border-left: 3px solid var(--google);
    border-radius: 2px;
}

.google-passi[b-iytrgmpa92] {
    margin: 0;
    padding-left: var(--s5);
    font-size: var(--t-piccolo);
}

.google-passi li + li[b-iytrgmpa92] { margin-top: var(--s1); }

.google-riuscita[b-iytrgmpa92] {
    margin: var(--s2) 0 0;
    color: var(--fatto);
    font-weight: 600;
}

.google-altrove[b-iytrgmpa92] { color: var(--attesa); }

/* l'indirizzo del service account e' lungo e senza spazi: va a capo dove serve */
.google .mono[b-iytrgmpa92] { overflow-wrap: anywhere; }

/* l'indirizzo del service account con il suo Copia, su una riga sua dentro il passo */
.google-copia[b-iytrgmpa92] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin-top: var(--s1);
}

/* per l'amministratore: chiuso, in fondo alla scheda */
.google-admin[b-iytrgmpa92] {
    margin-top: var(--s5);
    font-size: var(--t-piccolo);
}

.google-admin summary[b-iytrgmpa92] {
    cursor: pointer;
    font-weight: 600;
    color: var(--link);
}

.google-admin[open] summary[b-iytrgmpa92] { margin-bottom: var(--s2); }
/* /Components/Pages/Personale/Dati/EditorTelefoni.razor.rz.scp.css */
/* il codice e il suo pulsante sulla stessa riga: sei cifre non hanno bisogno di un campo largo */
.telefoni-riga[b-s53p8kitl5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
}

.telefoni-codice[b-s53p8kitl5] {
    width: 9rem;
    letter-spacing: 0.15em;
}

/* il titolo dell'elenco sta vicino alla sua tabella e lontano dalla scheda sopra (vicinanza) */
.telefoni-titolo[b-s53p8kitl5] { margin: var(--s5) 0 var(--s1); }
/* /Components/Pages/Personale/Dati/GrigliaNotifiche.razor.rz.scp.css */
/*
    La griglia delle notifiche: un evento per riga, un canale per colonna. I pallini stanno al
    centro della loro colonna, cosi' si legge in verticale "cosa mi arriva per email".
*/

/* tutta la larghezza (02/10/2026): sette colonne di caselle stanno strette in 1200px */

/* sette colonne di caselle (01/10/2026: Push e Telefono accanto all'alert in pagina) */
.griglia-notifiche th.canale[b-5pnxh8kkrz],
.griglia-notifiche td.canale[b-5pnxh8kkrz] {
    text-align: center;
    width: 10%;
}

/*
    L'alert in pagina non e' un quinto canale ma una casella a parte (26/09/2026): un filo lo
    separa dai quattro pallini, che sono una scelta sola per riga.
*/
.griglia-notifiche th.alert-in-pagina[b-5pnxh8kkrz],
.griglia-notifiche td.alert-in-pagina[b-5pnxh8kkrz] { border-left: 1px solid var(--riga); }

.griglia-notifiche th.canale span[b-5pnxh8kkrz] {
    display: block;
    white-space: nowrap;
}

.griglia-notifiche td.canale input[b-5pnxh8kkrz] {
    width: 18px;
    height: 18px;
    accent-color: var(--verde);
    cursor: pointer;
}

/*
    Il nome del gruppo sta col suo gruppo (02/10/2026, lo spazio segue la vicinanza): 32px dal
    gruppo prima, 8px dalla sua prima riga, un filo sotto. Prima era una fascia grigia attaccata
    sopra e sotto, e non si capiva a chi appartenesse.
*/
.griglia-notifiche tr.area th[b-5pnxh8kkrz] {
    padding: var(--s6) var(--s2) var(--s2);
    border-bottom: 1px solid var(--riga);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--grigio);
    text-align: left;
}

/* il primo gruppo sotto l'intestazione delle colonne: niente distacco da un gruppo che non c'e' */
.griglia-notifiche tbody:first-of-type tr.area th[b-5pnxh8kkrz] { padding-top: var(--s3); }

.griglia-notifiche tbody th[scope="row"][b-5pnxh8kkrz] {
    font-weight: normal;
    text-align: left;
}

/* la riga cambiata e non salvata: un filo a sinistra e la parola, non solo il colore */
.griglia-notifiche tr.cambiata th[scope="row"][b-5pnxh8kkrz] { box-shadow: inset 3px 0 0 var(--attesa); }

.da-salvare[b-5pnxh8kkrz],
.mai-scelta[b-5pnxh8kkrz] {
    margin-left: var(--s2);
    font-size: var(--t-micro);
    white-space: nowrap;
}

.da-salvare[b-5pnxh8kkrz] { color: var(--attesa); }

.mai-scelta[b-5pnxh8kkrz] { color: var(--grigio); }

/* cos'altro arriva con la riga: sotto il nome dell'evento, piccola, a capo dentro la cella */
.preferenza-nota[b-5pnxh8kkrz] {
    display: block;
    max-width: 46ch;
    font-size: var(--t-micro);
    font-weight: normal;
    color: var(--grigio);
    white-space: normal;
}

.notifiche-personali .pannello-piede[b-5pnxh8kkrz] { align-items: center; }

.notifiche-personali .pannello-piede .pannello-nota[b-5pnxh8kkrz] { margin-right: auto; }

/* il link ai clienti esclusi, sotto la scelta dei mesi; l'elenco nella finestra scorre */
.ricontatto-esclusi[b-5pnxh8kkrz] { margin: var(--s3) 0 0; }

.esclusi-elenco[b-5pnxh8kkrz] { max-height: 50vh; overflow-y: auto; }

/* sotto il cliente i suoi siti, uno per riga, col dominio e l'indirizzo: ci si cerca anche per quelli */
.esclusi-riga[b-5pnxh8kkrz] { align-items: flex-start; }

.esclusi-sito[b-5pnxh8kkrz] {
    display: block;
    font-size: var(--t-piccolo);
    color: var(--grigio);
}
/* /Components/Pages/Personale/Dati/NotificheComputer.razor.rz.scp.css */
/*
    Il riquadro delle notifiche sul computer: un gruppo a se' sotto la griglia delle notifiche (32px),
    con il titolo vicino al suo contenuto. Il pulsante e la riga dello stato stanno sulla stessa fila,
    e la riga dello stato ha sempre il suo posto: cambiando testo non sposta niente.
*/

.notifiche-computer[b-vl7yrvndvb] {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.computer-attiva[b-vl7yrvndvb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    min-height: 2.5em;
}

.computer-questo[b-vl7yrvndvb] { color: var(--link); }

.computer-azioni[b-vl7yrvndvb] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--s1);
}
/* /Components/Pages/Personale/Downline/Downline.razor.rz.scp.css */
/*
    La pagina della downline. Colori, caratteri e spaziature vengono solo dai token.
*/

/* ---------- barra: periodo e di chi ---------- */

.barra[b-48tnpoy03m] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s2) var(--s4);
    margin-bottom: var(--s3);
}

/* etichetta e tendina in fila, dentro la barra dei filtri */
.persona[b-48tnpoy03m] { align-items: center; }

.persona[b-48tnpoy03m]  .campo { min-width: 200px; }

/* ---------- i quattro numeri in testa ---------- */

.riepilogo[b-48tnpoy03m] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s3);
    margin-bottom: var(--s4);
}

.cifra[b-48tnpoy03m] {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    padding: var(--s3) var(--s4);
    /* la tinta la da' una classe tinta-* (base.css); senza, il riquadro resta bianco */
    background: var(--tinta-fondo, var(--superficie));
    border: 1px solid var(--tinta-fondo, var(--riga));
    border-top: 4px solid var(--tinta, var(--riga));
    border-radius: var(--raggio-grande);
}

.cifra-nome[b-48tnpoy03m] {
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tinta, var(--grigio));
}

.cifra-valore[b-48tnpoy03m] {
    font-size: var(--t-grande);
    font-weight: 600;
    color: var(--tinta, var(--inchiostro));
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.cifra-nota[b-48tnpoy03m] {
    font-size: var(--t-piccolo);
    color: var(--grigio);
    text-align: right;
}

.nota[b-48tnpoy03m] {
    margin: 0;
    font-size: var(--t-piccolo);
    color: var(--grigio);
}

.scheda + .scheda[b-48tnpoy03m],
.scheda + .albero-livelli[b-48tnpoy03m],
.albero-livelli + .scheda[b-48tnpoy03m],
.stato-vuoto + .scheda[b-48tnpoy03m],
.scheda + .stato-vuoto[b-48tnpoy03m] { margin-top: var(--s4); }

/* ---------- chi c'e' sopra: una catena dalla cima fino a chi guarda ---------- */

.catena[b-48tnpoy03m] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.catena li[b-48tnpoy03m] {
    display: flex;
    align-items: baseline;
    gap: var(--s2);
}

/* la freccia e' decorazione: l'ordine lo dice gia' la lista numerata */
.freccia[b-48tnpoy03m] { color: var(--grigio-tenue); }

.catena-voce[b-48tnpoy03m] {
    display: flex;
    flex-direction: column;
}

.catena-nome[b-48tnpoy03m] { font-weight: 600; }

.catena-ruolo[b-48tnpoy03m] {
    font-size: var(--t-micro);
    color: var(--grigio);
}

.catena-io .catena-nome[b-48tnpoy03m] { color: var(--link); }

/* ---------- la rete: organigramma dall'alto, e sotto i totali per livello ---------- */

.albero-livelli[b-48tnpoy03m] {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
}

/* se l'organigramma e' piu' largo della pagina scorre di lato, dentro la sua scheda */
.organigramma[b-48tnpoy03m] {
    overflow-x: auto;
    padding-bottom: var(--s2);
}

/*
    I livelli affiancati con le linee che li legano: la linea orizzontale sopra i fratelli e quella
    verticale verso il genitore sono i bordi di ::before/::after di ogni voce (il classico albero
    in CSS). Chi guarda sta al centro, il suo primo livello in fila sotto.
*/
.org-livello[b-48tnpoy03m] {
    display: flex;
    justify-content: center;
    position: relative;
    margin: 0;
    padding: 20px 0 0;
    list-style: none;
    min-width: max-content;
}

.organigramma > .org-livello[b-48tnpoy03m] { padding-top: 0; }

.org-livello > li[b-48tnpoy03m] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px var(--s2) 0;
}

.org-livello > li[b-48tnpoy03m]::before,
.org-livello > li[b-48tnpoy03m]::after {
    content: '';
    position: absolute;
    top: 0;
    right: 50%;
    width: 50%;
    height: 20px;
    border-top: 1px solid var(--grigio-tenue);
}

.org-livello > li[b-48tnpoy03m]::after {
    right: auto;
    left: 50%;
    border-left: 1px solid var(--grigio-tenue);
}

.org-livello > li:only-child[b-48tnpoy03m]::before,
.org-livello > li:only-child[b-48tnpoy03m]::after { display: none; }

.org-livello > li:only-child[b-48tnpoy03m] { padding-top: 0; }

.org-livello > li:first-child[b-48tnpoy03m]::before,
.org-livello > li:last-child[b-48tnpoy03m]::after { border: 0; }

.org-livello > li:last-child[b-48tnpoy03m]::before { border-right: 1px solid var(--grigio-tenue); }

/* la linea verticale che scende dal genitore alla fila dei figli */
.org-livello .org-livello[b-48tnpoy03m]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    height: 20px;
    border-left: 1px solid var(--grigio-tenue);
}

/* chi ha portato chi guarda, sopra: un tratto verticale lo lega */
.org-giu[b-48tnpoy03m] {
    display: block;
    height: 20px;
    border-left: 1px solid var(--grigio-tenue);
}

/* dal secondo livello in giu': in colonna sotto chi li ha portati, con la linea a sinistra */
.org-colonna[b-48tnpoy03m] {
    align-self: stretch;
    margin: var(--s2) 0 0 var(--s4);
    padding: 0 0 0 var(--s3);
    list-style: none;
    border-left: 1px solid var(--grigio-tenue);
}

.org-colonna > li[b-48tnpoy03m] {
    position: relative;
    padding-top: var(--s2);
}

.org-colonna > li[b-48tnpoy03m]::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--s3));
    top: calc(var(--s2) + 22px);
    width: var(--s3);
    border-top: 1px solid var(--grigio-tenue);
}

/* ---------- il riquadro di una persona ---------- */

.org-scheda[b-48tnpoy03m] {
    width: 200px;
    padding: var(--s2) var(--s3);
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
    text-align: left;
}

.org-radice[b-48tnpoy03m] { border: 2px solid var(--verde); }

/* chi non e' attivo: il riquadro rosso, senza scritte (26/09/2026) */
.org-spenta[b-48tnpoy03m] {
    background: var(--allarme-fondo);
    border-color: var(--allarme);
}

.org-spenta .org-nome[b-48tnpoy03m],
.org-spenta dd[b-48tnpoy03m],
.org-spenta dt[b-48tnpoy03m] { color: var(--allarme); }

.org-sopra[b-48tnpoy03m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: auto;
    min-width: 140px;
    text-align: center;
}

.org-testa[b-48tnpoy03m] {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s1);
}

.org-foto[b-48tnpoy03m] {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.org-iniziali[b-48tnpoy03m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--superficie-alt);
    color: var(--grigio);
    font-size: var(--t-piccolo);
    font-weight: 700;
}

.org-chi[b-48tnpoy03m] { display: flex; flex-direction: column; min-width: 0; }

.org-nome[b-48tnpoy03m] { font-weight: 700; overflow-wrap: anywhere; }

.org-livello-n[b-48tnpoy03m],
.org-ruolo[b-48tnpoy03m] { font-size: var(--t-micro); color: var(--grigio); }

.org-numeri[b-48tnpoy03m] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 var(--s2);
    margin: 0;
}

.org-numeri div[b-48tnpoy03m] { display: contents; }

.org-numeri dt[b-48tnpoy03m] { font-size: var(--t-micro); color: var(--grigio); align-self: baseline; }

.org-numeri dd[b-48tnpoy03m] {
    margin: 0;
    font-size: var(--t-piccolo);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---------- tabelle: Tabella compatte, le celle le disegna il componente ---------- */

.livelli[b-48tnpoy03m],
.persone[b-48tnpoy03m] { padding: 0; overflow: hidden; }

.livelli .scheda-titolo[b-48tnpoy03m],
.persone .scheda-titolo[b-48tnpoy03m] { padding: var(--s3) var(--s4) 0; }

.tabellina[b-48tnpoy03m]  .tabella thead th { position: static; }

.tabellina[b-48tnpoy03m]  .paginazione { padding: var(--s2) var(--s3); }

/* chi non e' attivo: la riga in rosso, senza scritta (26/09/2026) */
.tabellina[b-48tnpoy03m]  tr.spenta td { background: var(--allarme-fondo); color: var(--allarme); }

.fuori-rete[b-48tnpoy03m] { padding: 0 var(--s4) var(--s3); }

/* ---------- come si contano ---------- */

.spiega dl[b-48tnpoy03m] { margin: 0; }

.spiega dt[b-48tnpoy03m] {
    margin-top: var(--s3);
    font-weight: 700;
}

.spiega dt:first-child[b-48tnpoy03m] { margin-top: 0; }

.spiega dd[b-48tnpoy03m] {
    margin: var(--s1) 0 0;
    max-width: 75ch;
    color: var(--grigio);
}

/* ---------- telefono: tutto in colonna, i numeri due per riga ---------- */

@media (max-width: 900px) {

    .riepilogo[b-48tnpoy03m] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* /Components/Pages/Personale/Venditori/ConfrontoVenditori.razor.rz.scp.css */
/*
    Il Confronto venditori. Solo token del design system: i colori sono quelli degli stati (fatto,
    allarme, attesa, verde), cosi' il tema scuro li inverte da solo e i contrasti restano quelli
    gia' misurati in tokens.css. Le forme - indicatori - sono le stesse dell'Andamento,
    ridichiarate qui perche' gli stili di una pagina sono isolati e non si prestano.
*/

/* ---------- periodo e persona ---------- */

/* nella barra dei filtri: ogni etichetta sopra la sua tendina, a 4px */
.confronto-filtro[b-1k2t6chaty] {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
}

.confronto-filtro .etichetta[b-1k2t6chaty] { margin: 0; }

.confronto-filtro .campo[b-1k2t6chaty],
.confronto-filtro[b-1k2t6chaty]  .campo {
    width: auto;
    min-width: 180px;
}

.confronto-riquadro + .confronto-riquadro[b-1k2t6chaty] { margin-top: var(--s4); }

/* le linguette dei grafici attaccate al grafico aperto; sul telefono vanno a capo, tutte in vista */
.confronto-vista[b-1k2t6chaty] { margin-top: var(--s4); }

.confronto-vista[b-1k2t6chaty]  .confronto-grafici {
    flex-wrap: wrap;
    margin-bottom: 0;
}

.confronto-vista .confronto-riquadro[b-1k2t6chaty] { border-top-left-radius: 0; }

/* sopra la mappa: quali mesi sono e cosa conta la misura */
.confronto-sempre[b-1k2t6chaty] {
    margin: 0 0 var(--s3);
    font-size: var(--t-piccolo);
    color: var(--grigio);
}

/* ---------- tu e il gruppo ---------- */

/* il riquadro di chi guarda si distingue dal bordo verde, non solo dal colore del testo */
.confronto-io[b-1k2t6chaty] {
    border-left: 4px solid var(--verde);
}

.confronto-indicatori[b-1k2t6chaty] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--s3);
}

.indicatore[b-1k2t6chaty] {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    padding: var(--s3) var(--s4);
    /* la tinta la da' la misura (tinta-* in base.css): verde i risultati, blu le trattative, viola il lavoro */
    background: var(--tinta-fondo, var(--superficie-alt));
    border: 1px solid var(--tinta-fondo, var(--riga));
    border-top: 4px solid var(--tinta, var(--riga));
    border-radius: var(--raggio-grande);
}

.indicatore-nome[b-1k2t6chaty] {
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tinta, var(--grigio));
}

.indicatore-valore[b-1k2t6chaty] {
    font-size: var(--t-titolo);
    font-weight: 600;
    line-height: 1.15;
    color: var(--tinta, var(--inchiostro));
}

.indicatore-nota[b-1k2t6chaty] {
    font-size: var(--t-piccolo);
    color: var(--grigio);
}

.variazione[b-1k2t6chaty] {
    margin-top: auto;
    padding-top: var(--s1);
    font-size: var(--t-piccolo);
    color: var(--grigio);
}

.variazione.su[b-1k2t6chaty], .variazione-cella.su[b-1k2t6chaty] { color: var(--fatto); }

.variazione.giu[b-1k2t6chaty], .variazione-cella.giu[b-1k2t6chaty] { color: var(--allarme); }

/* ---------- tabelle ---------- */

.confronto-tabella[b-1k2t6chaty] { overflow-x: auto; }

/* la riga di chi guarda: fondo appena diverso e il segno "tu" accanto al nome, che dice la stessa cosa a parole */
.confronto-tabella[b-1k2t6chaty]  tr.riga-io td {
    background: var(--superficie-alt);
    font-weight: 600;
}

.segno-io[b-1k2t6chaty] {
    margin-left: var(--s2);
    padding: 0 var(--s1);
    font-size: var(--t-micro);
    font-weight: 700;
    color: var(--link);
    border: 1px solid var(--verde);
    border-radius: var(--raggio);
}

.scaduti[b-1k2t6chaty] { color: var(--allarme); }

.riservato[b-1k2t6chaty] {
    font-size: var(--t-piccolo);
    color: var(--grigio-tenue);
}

/* ---------- la mappa mese per mese (26/09/2026) ---------- */

/* i pulsanti della misura, sopra la mappa */
.confronto-sopra[b-1k2t6chaty] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2) var(--s3);
    margin-bottom: var(--s3);
}

.confronto-misure[b-1k2t6chaty] { display: flex; flex-wrap: wrap; gap: var(--s1); }

/* la tabella del periodo si stacca dalla mappa e dalla sua legenda */
.confronto-sopra ~ .confronto-tabella[b-1k2t6chaty] { margin-top: var(--s4); }

/* ---------- obiettivi ---------- */

.confronto-obiettivi[b-1k2t6chaty] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--s3);
}

.obiettivo[b-1k2t6chaty] {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    padding: var(--s3) var(--s4);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
}

.obiettivo.raggiunto[b-1k2t6chaty] { border-color: var(--fatto); }

.obiettivo-testa[b-1k2t6chaty] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s2);
}

.obiettivo-chi[b-1k2t6chaty] {
    font-size: var(--t-piccolo);
    color: var(--grigio);
}

.obiettivo-stato[b-1k2t6chaty] {
    margin-left: auto;
    font-size: var(--t-piccolo);
    color: var(--attesa);
}

.obiettivo.raggiunto .obiettivo-stato[b-1k2t6chaty] { color: var(--fatto); }

.obiettivo-nota[b-1k2t6chaty] {
    margin: 0;
    font-size: var(--t-piccolo);
    color: var(--grigio);
}

.avanzamento[b-1k2t6chaty] {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s2);
    font-size: var(--t-piccolo);
}

.avanzamento-barra[b-1k2t6chaty] {
    display: block;
    height: 10px;
    background: var(--superficie-alt);
    border: 1px solid var(--riga);
    border-radius: 5px;
    overflow: hidden;
}

.avanzamento-pieno[b-1k2t6chaty] {
    display: block;
    height: 100%;
    background: var(--verde);
}

.obiettivo.raggiunto .avanzamento-pieno[b-1k2t6chaty] { background: var(--fatto); }

@media (max-width: 900px) {
    .confronto-filtro[b-1k2t6chaty] { width: 100%; }

    .confronto-filtro[b-1k2t6chaty]  .campo, .confronto-filtro .campo[b-1k2t6chaty] { width: 100%; }
}

.confronto-carico[b-1k2t6chaty] {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
    margin-top: var(--s3);
}
/* /Components/Pages/Soldi/Andamento/Andamento.razor.rz.scp.css */
/*
    L'Andamento. Solo token del design system: i colori dei grafici sono gli stessi degli stati
    (fatto per le vinte, allarme per le perse, verde per il resto), cosi' il tema scuro li inverte
    da solo e i contrasti restano quelli gia' misurati in tokens.css.
*/

/* ---------- periodo e persona ---------- */

/* nella barra dei filtri: ogni etichetta sopra la sua tendina, a 4px */
.andamento-filtro[b-qk9fhzeoht] {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
}

.andamento-filtro .etichetta[b-qk9fhzeoht] { margin: 0; }

.andamento-filtro .campo[b-qk9fhzeoht],
.andamento-filtro[b-qk9fhzeoht]  .campo {
    width: auto;
    min-width: 170px;
}

/* ---------- indicatori ---------- */

/*
    La riga in alto: un numero grande per riquadro, sotto a parole cosa conta e il confronto.
    Si ripiegano da soli: sei su uno schermo largo, due sul telefono.
*/
.andamento-indicatori[b-qk9fhzeoht] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--s3);
    /* senza piu' la nota del confronto sotto (26/09/2026): lo stacco dalle linguette dei grafici */
    margin-bottom: var(--s5);
}

.indicatore[b-qk9fhzeoht] {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    padding: var(--s3) var(--s4);
    /* la tinta la da' una classe tinta-* (base.css), verde i soldi, blu le vendite, viola il lavoro fatto */
    background: var(--tinta-fondo, var(--superficie));
    border: 1px solid var(--tinta-fondo, var(--riga));
    border-top: 4px solid var(--tinta, var(--riga));
    border-radius: var(--raggio-grande);
}

.indicatore-nome[b-qk9fhzeoht] {
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tinta, var(--grigio));
}

.indicatore-valore[b-qk9fhzeoht] {
    font-size: var(--t-titolo);
    font-weight: 600;
    line-height: 1.15;
    color: var(--tinta, var(--inchiostro));
}

.indicatore-nota[b-qk9fhzeoht] {
    font-size: var(--t-piccolo);
    color: var(--grigio);
}

.variazione[b-qk9fhzeoht] {
    margin-top: auto;
    padding-top: var(--s1);
    font-size: var(--t-piccolo);
    color: var(--grigio);
}

.variazione.su[b-qk9fhzeoht] { color: var(--fatto); }

.variazione.giu[b-qk9fhzeoht] { color: var(--allarme); }


/* le linguette dei grafici attaccate al grafico aperto, sotto */
/* nove linguette: su uno schermo stretto vanno a capo, tutte in vista, invece di scorrere di lato */
.andamento-vista[b-qk9fhzeoht]  .andamento-grafici {
    flex-wrap: wrap;
    margin-bottom: 0;
}

.andamento-vista .andamento-riquadro[b-qk9fhzeoht] { border-top-left-radius: 0; }

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

.andamento-riquadro + .andamento-riquadro[b-qk9fhzeoht] { margin-top: var(--s4); }

/* il grafico a sinistra e la tabella dei numeri accanto; sul telefono uno sotto l'altra */
.andamento-corpo[b-qk9fhzeoht] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, auto);
    gap: var(--s5);
    align-items: start;
}

/*
    Le tabelle dei numeri sono Tabella compatte: le celle le disegna il componente, quindi qui ci
    si arriva con ::deep dal contenitore che sta in questa pagina.
*/
.andamento-numeri[b-qk9fhzeoht] { min-width: 280px; }

/* con molti anni a confronto: il grafico sopra, la tabella sotto, tutti e due larghi */
.andamento-corpo.impilato[b-qk9fhzeoht] { grid-template-columns: minmax(0, 1fr); }

/* un grafico sopra una tabella larga (progetti aperti): staccato dalla tabella che lo segue */
.andamento-sopra[b-qk9fhzeoht] { margin-bottom: var(--s5); }

.andamento-spiega[b-qk9fhzeoht] {
    margin: var(--s3) 0 0;
    max-width: 80ch;
    font-size: var(--t-piccolo);
    color: var(--grigio);
}

/* il mese nella prima colonna su una riga sola: "set 2026", non "set" e sotto "2026" */
.andamento-mese[b-qk9fhzeoht] { white-space: nowrap; }

/* ---------- vendite: la tendina, la mappa, la tabella dei venditori e "Come va" ---------- */

/* la tabella dei venditori sotto la mappa, staccata da lei */
.andamento-sintesi[b-qk9fhzeoht] { margin-top: var(--s5); }

.andamento-come-va[b-qk9fhzeoht] { margin-top: var(--s4); }


@media (max-width: 900px) {
    .andamento-corpo[b-qk9fhzeoht] { grid-template-columns: minmax(0, 1fr); }

    .andamento-numeri[b-qk9fhzeoht] { min-width: 0; }
}

/* il netto di entrate e uscite: segno e parola accanto al colore */
.netto-meno[b-qk9fhzeoht] { color: var(--allarme); }

.netto-piu[b-qk9fhzeoht] { color: var(--fatto); }

/* ---------- progetti aperti, un gruppo per mese ---------- */

/* i gruppi uno sotto l'altro, staccati come quelli della coda; il conto del mese accanto al nome */
.andamento-mese-progetti[b-qk9fhzeoht] { margin-bottom: var(--s4); }

.andamento-mese-progetti .storico-gruppo[b-qk9fhzeoht] { display: flex; align-items: baseline; gap: var(--s3); text-transform: capitalize; }

.andamento-mese-conto[b-qk9fhzeoht] { font-weight: 400; color: var(--grigio); text-transform: none; }

/* la tabella dentro il gruppo non ha un secondo bordo */
.andamento-mese-progetti[b-qk9fhzeoht]  .tabella { border: 0; border-radius: 0; }
/* /Components/Pages/Soldi/CodiciSdi/CodiciSdi.razor.rz.scp.css */
/* il campo del codice e i suoi due pulsanti sulla stessa riga */
.codice-riga[b-sdeoli8e9u] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    align-items: center;
}

.codice-riga .campo[b-sdeoli8e9u] { max-width: 12rem; }

.codice-sdi[b-sdeoli8e9u] { margin-bottom: var(--s3); }
/* /Components/Pages/Soldi/Fatturazione/AzioniPagamento.razor.rz.scp.css */
/*
    I pulsanti del pagamento in fila, che vanno a capo sul telefono. Nelle colonne dell'elenco (Solo)
    non vanno a capo: la riga resterebbe alta il doppio, e i posti fissi servono proprio a non far
    ballare le righe.
*/
.azioni-pagamento[b-q04mjzwyrk] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1) var(--s2);
    align-items: center;
}

.azioni-pagamento.solo[b-q04mjzwyrk] {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: var(--s1);
}
/* /Components/Pages/Soldi/Fatturazione/Fatturazione.razor.rz.scp.css */
/*
    La fatturazione. Il riepilogo sta in una riga sola su desktop - tre cifre e le fasce dello
    scaduto - perche' e' la prima cosa che si legge e non deve spingere l'elenco sotto la piega.
*/

.riepilogo[b-rre3bxtbi9] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr);
    gap: var(--s3);
    margin-bottom: var(--s4);
}

/* la regola globale ".scheda + .scheda" spinge in giu' le schede affiancate */
.riepilogo > .scheda[b-rre3bxtbi9] { margin-top: 0; }

/* la tinta la da' una classe tinta-* (base.css): blu da incassare, rosso scaduto, verde incassato */
.cifra[b-rre3bxtbi9] {
    background: var(--tinta-fondo, var(--superficie));
    border-color: var(--tinta-fondo, var(--riga));
    border-top: 4px solid var(--tinta, var(--riga));
}

.cifra .scheda-titolo[b-rre3bxtbi9] { margin-bottom: var(--s2); color: var(--tinta, var(--grigio)); }

.importo[b-rre3bxtbi9] {
    margin: 0;
    font-size: var(--t-grande);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--tinta, var(--inchiostro));
}

.importo .segno[b-rre3bxtbi9] {
    font-size: var(--t-piccolo);
    vertical-align: middle;
}

.importo .segno-fatto[b-rre3bxtbi9] { color: var(--fatto); }

.nota[b-rre3bxtbi9] {
    margin: var(--s1) 0 0;
    font-size: var(--t-piccolo);
    color: var(--grigio);
}

.cifra .nota[b-rre3bxtbi9] { color: var(--tinta, var(--grigio)); }

.fasce[b-rre3bxtbi9] {
    display: grid;
    gap: var(--s2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--t-piccolo);
}

.fascia[b-rre3bxtbi9] {
    display: grid;
    grid-template-columns: 7.5em minmax(40px, 1fr) auto 2.5em;
    align-items: center;
    gap: var(--s2);
}

.fascia-nome[b-rre3bxtbi9] { color: var(--grigio); }

.fascia-barra[b-rre3bxtbi9] {
    display: block;
    height: 8px;
    background: var(--superficie-alt);
    border: 1px solid var(--riga);
    border-radius: var(--raggio);
    overflow: hidden;
}

.fascia-barra > span[b-rre3bxtbi9] {
    display: block;
    height: 100%;
    background: var(--attesa);
}

.fascia-grave .fascia-barra > span[b-rre3bxtbi9] { background: var(--allarme); }

.fascia-importo[b-rre3bxtbi9],
.fascia-quanti[b-rre3bxtbi9] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fascia-quanti[b-rre3bxtbi9] { color: var(--grigio); }

.totale-vista[b-rre3bxtbi9] {
    align-items: baseline;
    justify-content: space-between;
    margin-top: var(--s2);
    font-size: var(--t-piccolo);
    color: var(--grigio);
}

.totale-vista strong[b-rre3bxtbi9] { color: var(--inchiostro); }

.tipo-riferimento[b-rre3bxtbi9] {
    margin-right: var(--s1);
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--grigio);
}

.motivo[b-rre3bxtbi9] {
    display: block;
    max-width: 260px;
    margin-top: 2px;
    overflow: hidden;
    font-size: var(--t-micro);
    color: var(--grigio);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* la riga dell'addebito tornato indietro: il colore accompagna "Addebito fallito" scritto nella cella */
.elenco-pagamenti[b-rre3bxtbi9]  tr.fallito td { background: var(--allarme-fondo); }
.elenco-pagamenti[b-rre3bxtbi9]  tr.fallito:hover td { background: var(--superficie-alt); }

/* in ritardo (richiesto prima di oggi, non saldato): giallo, come l'avviso in alto che porta qui */
.elenco-pagamenti[b-rre3bxtbi9]  tr.in-ritardo td { background: var(--attesa-fondo); }
.elenco-pagamenti[b-rre3bxtbi9]  tr.in-ritardo:hover td { background: var(--superficie-alt); }

/* i due pulsanti dei pagamenti nuovi, sopra il riepilogo */
@media (max-width: 1100px) {
    .riepilogo[b-rre3bxtbi9] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .anzianita[b-rre3bxtbi9] { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
    .riepilogo[b-rre3bxtbi9] { grid-template-columns: minmax(0, 1fr); }
}

/* un passo del pagamento: quello che dice a sinistra, i suoi pulsanti a destra */
/* i pulsanti del passo (apri la proforma, mandala) subito dopo la data, non in fondo alla cella (28/09/2026) */
.elenco-pagamenti[b-rre3bxtbi9]  .cella-passo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--s2);
}

/* a che punto e' il progetto o l'abbonamento, sotto il suo nome (28/09/2026) */
.a-che-punto[b-rre3bxtbi9] {
    display: block;
    margin-top: 2px;
    font-size: var(--t-micro);
    color: var(--grigio);
}

/* lo stato con accanto l'icona per inviare la proforma o avviare l'addebito */
.cella-stato[b-rre3bxtbi9] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); }

.cella-stato .motivo[b-rre3bxtbi9] { flex-basis: 100%; }

/* la rata programmata: il solo orologio, grande quanto il testo intorno */
.stato.solo-segno[b-rre3bxtbi9] { padding: 0; font-size: var(--t-corpo, 1rem); font-weight: 400; color: var(--grigio); }

/* a elenco una riga per pagamento, come in WK: stato, motivo e icone d'invio in fila */
[b-rre3bxtbi9] .una-riga .cella-stato { flex-wrap: nowrap; }

[b-rre3bxtbi9] .una-riga .cella-stato .motivo { flex-basis: auto; }
/* /Components/Pages/Soldi/Fatturazione/FatturazioneScheda.razor.rz.scp.css */
/*
    La scheda del pagamento: il pagamento a sinistra, il suo contratto a destra. Sul telefono una
    sotto l'altra, con il pagamento per primo perche' e' quello per cui si e' aperta la scheda.
*/

.scheda-pagamento[b-tj75y8fe7c] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--s3);
    align-items: start;
}

/* ::deep: i riquadri sono del componente Riquadro, non di questa pagina */
.scheda-pagamento[b-tj75y8fe7c] >  .scheda,
.scheda-pagamento-lato[b-tj75y8fe7c] >  .riquadri-colonna > .scheda:first-child { margin-top: 0; }

.importo[b-tj75y8fe7c] {
    margin: 0 0 var(--s2);
    font-size: var(--t-grande);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.iva[b-tj75y8fe7c] {
    font-size: var(--t-piccolo);
    font-weight: 400;
    color: var(--grigio);
}

.motivo[b-tj75y8fe7c] {
    margin: 0 0 var(--s3);
    font-size: var(--t-piccolo);
    color: var(--allarme);
}

/*
    Il piano delle rate e' una Tabella compatta: le celle le disegna il componente, quindi ci si
    arriva con ::deep dal contenitore di questa pagina. La rata aperta resta evidenziata, e oltre
    al colore la dice il segno nella prima cella.
*/
.rate[b-tj75y8fe7c]  .tabella { font-size: var(--t-piccolo); }

.rate[b-tj75y8fe7c]  .tabella thead th { position: static; }

.rate[b-tj75y8fe7c]  .tabella tbody tr.questa td { background: var(--verde-tenue); font-weight: 600; }

/* incassato e da incassare: la divisione del totale, appena sotto la tabella e allineata a destra */
.rate-divise[b-tj75y8fe7c] {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: end;
    gap: 0 var(--s4);
    margin: var(--s2) 0 0;
    font-size: var(--t-piccolo);
}

.rate-divise dt[b-tj75y8fe7c] { color: var(--grigio); text-align: right; }

.rate-divise dd[b-tj75y8fe7c] {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.nota-vuota[b-tj75y8fe7c] {
    margin: 0;
    font-size: var(--t-piccolo);
    color: var(--grigio);
}

@media (max-width: 900px) {
    .scheda-pagamento[b-tj75y8fe7c] { grid-template-columns: minmax(0, 1fr); }
}

/* i lavori del cliente: tipo, nome e stato su una riga; quello del pagamento segnato da un filo */
.lavori-cliente[b-tj75y8fe7c] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s1); }

.lavori-cliente li[b-tj75y8fe7c] { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); padding: 2px var(--s2); border-left: 3px solid transparent; }

.lavori-cliente li.questo[b-tj75y8fe7c] { border-left-color: var(--verde); background: var(--superficie-alt); }

.lavori-cliente-tipo[b-tj75y8fe7c] { font-size: var(--t-micro); color: var(--grigio); text-transform: uppercase; letter-spacing: .04em; }

.lavori-cliente .stato[b-tj75y8fe7c] { margin-left: auto; }
/* /Components/Pages/Soldi/Fatturazione/ModuloPagamento.razor.rz.scp.css */
/* l'importo e i tre pulsanti del rimanente sulla stessa riga: sono la stessa domanda */
.importo-riga[b-0gm0xpvof3] {
    display: flex;
    gap: var(--s2);
    align-items: center;
}

.importo-riga .campo[b-0gm0xpvof3] {
    max-width: 12rem;
    text-align: right;
}

.modulo-pagamento .scelta[b-0gm0xpvof3] { margin-top: var(--s2); }

/* un pagamento che non si tocca piu': detto subito, in una fascia, non in grigio fra le etichette */
.pagamento-bloccato[b-0gm0xpvof3] {
    margin: 0 0 var(--s3);
    padding: var(--s2) var(--s3);
    color: var(--attesa);
    background: var(--attesa-fondo);
    border-radius: var(--raggio);
    font-weight: 600;
}

/* di cosa e' il pagamento: la testa del modulo */
.pagamento-contratto[b-0gm0xpvof3] {
    margin: 0 0 var(--s1);
    font-size: var(--t-medio);
}

.pagamento-contratto-tipo[b-0gm0xpvof3] {
    margin-right: var(--s2);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--grigio);
}

/* i gruppi: il primo attaccato alla testa, gli altri staccati fra loro */
.modulo-pagamento .modulo-sezione + .modulo-sezione[b-0gm0xpvof3] { margin-top: var(--s2); }

/*
    I campi bloccati si leggono: testo pieno su un fondo appena diverso, invece del grigio sbiadito
    dei campi spenti, che su bianco non si leggeva.
*/
.modulo-pagamento .campo:disabled[b-0gm0xpvof3],
.modulo-pagamento[b-0gm0xpvof3]  .campo:disabled {
    color: var(--inchiostro);
    background: var(--superficie-alt);
    opacity: 1;
    -webkit-text-fill-color: var(--inchiostro);
}
/* /Components/Pages/Soldi/Fatturazione/PagamentiContratto.razor.rz.scp.css */
/* i pulsanti del contratto sotto l'elenco dei pagamenti, in fila e a capo sul telefono */
.pagamenti-contratto[b-04pm49y1k3] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1) var(--s2);
    margin-top: var(--s3);
    /* e sotto (02/10/2026): nell'abbonamento i pulsanti stanno sopra i totali, e ci restavano attaccati */
    margin-bottom: var(--s3);
}
/* /Components/Pages/Soldi/Fatturazione/ProgrammazioneRate.razor.rz.scp.css */
/* le rate generate: una Tabella compatta con i campi dentro le celle, ci si arriva con ::deep */
.rate-generate[b-pom1tf9ow3] { margin-top: var(--s3); }

.rate-generate[b-pom1tf9ow3]  .tabella thead th { position: static; }

.rate-generate[b-pom1tf9ow3]  .importo-rata {
    max-width: 9rem;
    text-align: right;
}

.programmazione .scelta[b-pom1tf9ow3] { margin-top: var(--s2); }
/* /Components/Pages/Soldi/Iban/IbanCliente.razor.rz.scp.css */
/* i due pulsanti di ogni IBAN in fila, e il modulo dell'aggiunta sotto la tabella; il registro sta in una finestra */
.azioni-iban[b-qvw0ou3fd0] {
    display: inline-flex;
    gap: var(--s1);
}

.aggiungi-iban[b-qvw0ou3fd0] { margin-top: var(--s3); }

.aggiungi-iban summary[b-qvw0ou3fd0] {
    cursor: pointer;
    font-size: var(--t-piccolo);
}
/* /Components/Pages/Soldi/Iban/IbanElenco.razor.rz.scp.css */
/*
    Gli IBAN: il totale sopra la tabella, e le righe con gli addebiti tornati indietro in rosso - con
    la colonna Addebiti che lo scrive a parole, perche' il colore da solo non basta.
*/
.totale-iban[b-xdbdr0bg9u] {
    margin: var(--s2) 0;
    font-size: var(--t-piccolo);
    color: var(--grigio);
}

.elenco-iban[b-xdbdr0bg9u]  tr.fallito td { background: var(--allarme-fondo); }

.elenco-iban[b-xdbdr0bg9u]  .tenue { color: var(--grigio); }

.iban-societa[b-xdbdr0bg9u] { margin-bottom: var(--s4); }
/* /Components/Pages/Soldi/PagamentiDoweb/PagamentiDoweb.razor.rz.scp.css */
/* Pagamenti DOWEB: il modulo in una finestra sopra l'elenco (FinestraModulo). Solo token. */

.campi[b-3rahgbx0ha] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--s3);
}

.campi-fila[b-3rahgbx0ha] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--s3);
    margin-top: var(--s3);
}

.campo-gruppo[b-3rahgbx0ha] { display: flex; flex-direction: column; gap: var(--s1); }

.importo[b-3rahgbx0ha] { width: 9rem; text-align: right; }

.nota[b-3rahgbx0ha] { color: var(--grigio); font-size: var(--t-piccolo); }
/* /Components/Pages/Vendita/Campagne/CampagnaScheda.razor.rz.scp.css */
/*
    La campagna: a sinistra l'email, a destra a chi va, ognuna coi suoi riquadri che si chiudono. Sul telefono una colonna
    sola, prima l'email.
*/

.campagna[b-2ha8ocxm85] {
    display: grid;
    grid-template-columns: minmax(0, var(--campagna-misura, 50%)) var(--s4) minmax(0, 1fr);
    align-items: start;
    margin-top: var(--s3);
}

/* il divisore fra le due colonne si trascina, come nella Posta (26/10/2026) */
.campagna-divisore[b-2ha8ocxm85] {
    align-self: stretch;
    min-height: 12rem;
    cursor: col-resize;
    touch-action: none;
    background: linear-gradient(var(--riga), var(--riga)) center / 2px 100% no-repeat;
}

/* una colonna di riquadri (26/10/2026): uno sotto l'altro, staccati come nelle altre schede */
.campagna-colonna[b-2ha8ocxm85] {
    display: grid;
    gap: var(--s4);
    align-content: start;
    min-width: 0;
}

.campagna-divisore:hover[b-2ha8ocxm85] { background-image: linear-gradient(var(--verde), var(--verde)); background-size: 4px 100%; }

@media (max-width: 1100px) {
    .campagna[b-2ha8ocxm85] { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }

    .campagna-divisore[b-2ha8ocxm85] { display: none; }
}

.campagna .etichetta[b-2ha8ocxm85] { display: block; margin-top: var(--s3); }

/* il primo campo di un riquadro parte subito sotto il titolo */
.campagna-colonna .etichetta:first-child[b-2ha8ocxm85] { margin-top: 0; }

.campagna-mittente[b-2ha8ocxm85] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s3);
}

.campagna-conteggio[b-2ha8ocxm85] {
    margin-left: var(--s2);
    font-size: var(--t-piccolo);
    font-weight: 400;
    color: var(--grigio);
}

.campagna-sottotitolo[b-2ha8ocxm85] {
    margin: var(--s4) 0 var(--s2);
    font-size: var(--t-piccolo);
    font-weight: 600;
}

.campagna-segmenti[b-2ha8ocxm85],
.campagna-aggiungi[b-2ha8ocxm85] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    align-items: center;
    margin-bottom: var(--s3);
}

.campagna-segmenti > .campo[b-2ha8ocxm85] { flex: 1 1 180px; }

.campagna-aggiungi[b-2ha8ocxm85] >  .suggerito { flex: 1 1 240px; }

.campagna-tolti[b-2ha8ocxm85] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.campagna-tolti li[b-2ha8ocxm85] {
    display: flex;
    gap: var(--s2);
    align-items: center;
    justify-content: space-between;
    padding: var(--s1) 0;
    border-bottom: 1px solid var(--riga);
}

.campagna-manda .btn-primario[b-2ha8ocxm85] { margin-top: var(--s2); }

/* il testo di una campagna partita: si legge, non si scrive */
.campagna-anteprima[b-2ha8ocxm85] {
    padding: var(--s3);
    border: 1px solid var(--riga);
    border-radius: 6px;
    background: var(--superficie);
}

.campagna-ai[b-2ha8ocxm85] { display: flex; gap: var(--s2); margin-top: var(--s2); }

.campagna-ai select[b-2ha8ocxm85] { flex: 1; }

/* la spunta del mittente: casella e testo sulla stessa riga */
.campagna-spunta[b-2ha8ocxm85] {
    display: flex;
    gap: var(--s2);
    align-items: center;
    margin-top: var(--s3);
}

/* il testo per ogni destinatario: la casella e le istruzioni */
.campagna-personalizza > .campagna-spunta:first-child[b-2ha8ocxm85] { margin-top: 0; }
/* /Components/Pages/Vendita/Campagne/CampagnaStatistiche.razor.rz.scp.css */
/* i numeri della campagna: etichetta piccola sopra, numero grande sotto, in griglia */
.campagna-numeri[b-q1wbjc33y8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--s3);
    margin: 0 0 var(--s2);
}

.campagna-numeri dt[b-q1wbjc33y8] {
    font-size: var(--t-micro);
    color: var(--grigio);
}

.campagna-numeri dd[b-q1wbjc33y8] {
    margin: 0;
    font-size: var(--t-medio);
}

.campagna-comandi[b-q1wbjc33y8] {
    display: flex;
    gap: var(--s2);
    margin: var(--s2) 0;
}

.campagna-sottotitolo[b-q1wbjc33y8] {
    margin: var(--s4) 0 var(--s2);
    font-size: var(--t-piccolo);
    font-weight: 600;
}

.campagna-ore[b-q1wbjc33y8] {
    width: 100%;
    height: 140px;
}

.campagna-ora[b-q1wbjc33y8] { fill: var(--verde); }

.campagna-ora:hover[b-q1wbjc33y8] { fill: var(--verde-scuro); }

/* la spunta del destinatario (28/10/2026): grigia da spenta, verde accesa, come la riga */
.campagna-spunta[aria-pressed="true"][b-q1wbjc33y8] {
    color: var(--fatto);
}
/* /Components/Pages/Vendita/Campagne/FiltroCampagna.razor.rz.scp.css */
/*
    Il filtro a gruppi: ogni gruppo e' un riquadro (E fra le sue righe), e fra un gruppo e l'altro
    la parola "oppure" (O). Le parole sono scritte: la logica non sta nei colori.
*/

.filtro-campagna[b-lk3d7hu550] { margin-bottom: var(--s3); }

.filtro-gruppo[b-lk3d7hu550] {
    margin: 0 0 var(--s2);
    padding: var(--s2) var(--s3) var(--s3);
    border: 1px solid var(--riga);
    border-radius: 6px;
}

.filtro-gruppo legend[b-lk3d7hu550] {
    padding: 0 var(--s1);
    font-size: var(--t-piccolo);
    color: var(--grigio);
}

.filtro-riga[b-lk3d7hu550] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    align-items: center;
    margin-bottom: var(--s2);
}

.filtro-riga > select:first-of-type[b-lk3d7hu550] { flex: 1 1 200px; }

.filtro-operatore[b-lk3d7hu550] { flex: 0 0 auto; width: auto; }

.filtro-valore[b-lk3d7hu550] { flex: 1 1 120px; min-width: 0; }

.filtro-e[b-lk3d7hu550],
.filtro-oppure[b-lk3d7hu550] {
    font-size: var(--t-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--grigio);
}

.filtro-e[b-lk3d7hu550] { flex: 0 0 100%; }

.filtro-oppure[b-lk3d7hu550] { margin: var(--s1) 0 var(--s2) var(--s3); }

.filtro-togli[b-lk3d7hu550] { padding-inline: var(--s2); }
/* /Components/Pages/Vendita/Campagne/TestiCampagna.razor.rz.scp.css */
/*
    I testi di ogni destinatario: un elenco di righe che si aprono, ognuna col suo stato scritto a parole
    e col glifo (mai il solo colore), e dentro il testo da rileggere.
*/

.campagna-sottotitolo[b-6h6mc405rq] {
    margin: 0 0 var(--s2);
    font-size: var(--t-piccolo);
    font-weight: 600;
}

.campagna-testi-conto[b-6h6mc405rq] { margin: 0 0 var(--s2); }

.campagna-testi-avanzamento[b-6h6mc405rq] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    align-items: center;
    margin-bottom: var(--s2);
}

.campagna-testi-avanzamento progress[b-6h6mc405rq] { flex: 1 1 160px; }

.campagna-comandi[b-6h6mc405rq] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin: var(--s2) 0;
}

.campagna-testi-elenco[b-6h6mc405rq] {
    list-style: none;
    margin: var(--s3) 0 0;
    padding: 0;
    max-height: 640px;
    overflow-y: auto;
}

.campagna-testi-elenco > li[b-6h6mc405rq] { border-bottom: 1px solid var(--riga); }

.campagna-testo-testa[b-6h6mc405rq] {
    display: flex;
    width: 100%;
    gap: var(--s2);
    align-items: center;
    padding: var(--s2);
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* aperto: il triangolo gira e la riga si colora come la testa di un riquadro, cosi' si vede quale si sta leggendo */
.campagna-testo-freccia[b-6h6mc405rq] {
    flex: none;
    font-size: calc(var(--t-piccolo) * 1.4);
    line-height: 1;
    transition: transform var(--transizione);
}

.campagna-testi-elenco > li.aperto .campagna-testo-freccia[b-6h6mc405rq] { transform: rotate(90deg); }

.campagna-testi-elenco > li.aperto .campagna-testo-testa[b-6h6mc405rq] { background: var(--blu-fondo); font-weight: 600; }

.campagna-testo-testa:hover[b-6h6mc405rq] { background: var(--carta); }

@media (prefers-reduced-motion: reduce) {
    .campagna-testo-freccia[b-6h6mc405rq] { transition: none; }
}

.campagna-testo-testa:focus-visible[b-6h6mc405rq] { outline: 2px solid var(--verde); outline-offset: 2px; }

/* un nome lungo va a capo, non si taglia (26/10/2026, il committente) */
.campagna-testo-nome[b-6h6mc405rq] {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.campagna-testo-stato[b-6h6mc405rq] {
    flex: none;
    font-size: var(--t-piccolo);
}

.campagna-testo-stato.pronto[b-6h6mc405rq] { color: var(--fatto); }

.campagna-testo-stato.errore[b-6h6mc405rq],
.campagna-testo-errore[b-6h6mc405rq] { color: var(--allarme); }

.campagna-testo-stato.manca[b-6h6mc405rq] { color: var(--grigio); }

.campagna-testo-corpo[b-6h6mc405rq] { padding: var(--s2) var(--s2) var(--s3); }

.campagna-anteprima[b-6h6mc405rq] {
    padding: var(--s3);
    border: 1px solid var(--riga);
    border-radius: 6px;
    background: var(--superficie);
}

.tenue[b-6h6mc405rq] { color: var(--grigio); }
/* /Components/Pages/Vendita/Lead/LeadElenco.razor.rz.scp.css */
/* linguette e ricerca sulla stessa riga, con la riga sotto che le tiene insieme */
.lead-linguette[b-yb7hlq65oj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2) var(--s4);
    margin-bottom: var(--s3);
    box-shadow: inset 0 -1px 0 var(--riga);
}

.lead-linguette[b-yb7hlq65oj]  .linguette {
    flex: 0 1 auto;
    min-width: 0;
    margin-bottom: 0;
    box-shadow: none;
}

.lead-cerca[b-yb7hlq65oj] {
    flex: 1 1 18rem;
    max-width: 480px;
    margin-left: auto;
    padding-bottom: var(--s1);
}

.lead-cerca .campo[b-yb7hlq65oj] { width: 100%; background: var(--superficie); }

/* sul telefono sotto le linguette, a tutta larghezza */
@media (max-width: 900px) {
    .lead-cerca[b-yb7hlq65oj] { max-width: none; margin-left: 0; padding-bottom: var(--s2); }
}


.lead-nota[b-yb7hlq65oj] { color: var(--grigio); }
/* /Components/Pages/Vendita/Lead/LeadScheda.razor.rz.scp.css */
.contatto-testa[b-2kamvie38m] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s2);
}

/*
    Modifica e Togli si vedono sempre, anche senza passarci sopra col mouse: sul telefono il mouse
    non c'e', e un pulsante che compare solo al passaggio li' non esiste.
*/
.contatto-azioni[b-2kamvie38m] {
    display: inline-flex;
    flex: 0 0 auto;
    gap: var(--s1);
}

/* telefono con la sua icona ed email sulla stessa riga; se non ci stanno l'email va sotto, intera */
.contatto-recapiti[b-2kamvie38m] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s1) var(--s3);
    min-width: 0;
}

.contatto-recapiti > a[b-2kamvie38m] { overflow-wrap: anywhere; }

/* il contorno di una voce dello storico: sito della trattativa, dove, progetto o abbonamento, audio */
[b-2kamvie38m] .storico-sito,
[b-2kamvie38m] .storico-collegati,
[b-2kamvie38m] .storico-audio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin-top: var(--s1);
    font-size: var(--t-piccolo);
}

[b-2kamvie38m] .storico-audio audio { width: 100%; max-width: 420px; height: 32px; }

/* gli allegati di un'email nello storico (13/10/2026) */
.storico-allegati[b-2kamvie38m] { display: inline-flex; align-items: center; gap: 4px; margin-right: var(--s1); font-size: .875rem; font-variant-numeric: tabular-nums; }

/* le email delle campagne (14/10/2026): l'oggetto sopra, chi, quando e com'e' andata sotto */
.lead-campagne li[b-2kamvie38m] {
    display: flex;
    flex-direction: column;
}
/* /Components/Pages/Vendita/SitiNuovi/SitiNuovi.razor.rz.scp.css */
/*
    La lista dei siti nuovi: sopra le linguette il pulsante per aggiungerne uno, e quando si apre
    il modulo del dominio, in una finestra sopra l'elenco (FinestraModulo). Il campo sta in una
    colonna (modulo-colonne, in componenti.css): un dominio e' corto, e un campo largo quanto la
    finestra fa pensare che ci vada un testo.
*/

/*
    "Verifica i siti" (05/10/2026): mentre conta ("Verificati 1234 di 4000") resta largo come prima,
    cosi' Aggiungi accanto non si sposta sotto il puntatore. Le cifre tutte larghe uguali.
*/
.siti-verifica[b-oq8wscnwal] {
    min-width: 24ch;
    font-variant-numeric: tabular-nums;
}

/* la mappa di un sito, dal suo comune (20/10/2026): larga quanto la finestra, alta il giusto */
.siti-mappa-cornice[b-oq8wscnwal] {
    display: block;
    width: 100%;
    height: min(60vh, 480px);
    border: 1px solid var(--riga);
    border-radius: var(--raggio);
}

/* il comune che apre la mappa: si legge come un link, sta nella cella come il testo */
.siti-comune[b-oq8wscnwal] {
    padding: 0;
    border: 0;
    background: none;
    color: var(--link);
    font: inherit;
    text-align: left;
    text-decoration: underline;
    cursor: pointer;
}
/* /Components/Pages/Vendita/SitiNuovi/SitoNuovoScheda.razor.rz.scp.css */
/*
    La scheda di un sito nuovo. Al centro quello che si legge mentre squilla il telefono - problemi
    del sito e concorrente - e di lato chi e', dove sta, e a che punto e' la vendita. Sul telefono il
    lato va sopra: li' si apre la scheda per trovare il numero.
*/

.sito-riquadro-tasti[b-twt2ck3cc4] {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-shrink: 0;
}

/*
    il campo che restringe le categorie sta su una riga sua, sopra le caselle: la riga intera la
    prende il contenitore, il campo resta stretto. Con la sola larghezza massima sul campo, le
    caselle gli si mettevano accanto (28/09/2026)
*/
.sito-cerca-riga[b-twt2ck3cc4] { flex-basis: 100%; }

.sito-cerca-voci[b-twt2ck3cc4] { max-width: 320px; }

/* nella riga via e civico la via prende lo spazio, il civico gli sta accanto stretto */
.sito-campo-largo[b-twt2ck3cc4] { grid-column: span 2; }

@media (max-width: 600px) {
    .sito-campo-largo[b-twt2ck3cc4] { grid-column: auto; }
}

.sito-scheda[b-twt2ck3cc4] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(340px, 32%, 560px);
    grid-template-areas: "centro lato";
    gap: var(--s4);
    align-items: start;
}

.sito-centro[b-twt2ck3cc4] { grid-area: centro; min-width: 0; }

.sito-lato[b-twt2ck3cc4] { grid-area: lato; min-width: 0; }

@media (max-width: 900px) {
    .sito-scheda[b-twt2ck3cc4] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "lato" "centro";
    }
}

.sito-vuoto[b-twt2ck3cc4] {
    margin: 0;
    color: var(--grigio);
    font-size: var(--t-piccolo);
}

/* il glifo accanto a ogni problema: il colore da solo non direbbe che e' un difetto */
.sito-problemi[b-twt2ck3cc4] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--s1) var(--s4);
    font-size: var(--t-piccolo);
}

.sito-problemi li span[b-twt2ck3cc4] {
    color: var(--allarme);
    font-size: var(--t-micro);
    margin-right: var(--s1);
}

.sito-concorrente[b-twt2ck3cc4] {
    margin: 0 0 var(--s3);
}

.sito-concorrente strong[b-twt2ck3cc4] {
    font-size: var(--t-medio);
}

.sito-testo[b-twt2ck3cc4] {
    font-size: var(--t-piccolo);
    white-space: normal;
}

.sito-testo + .sito-testo[b-twt2ck3cc4] {
    margin-top: var(--s2);
    padding-top: var(--s2);
    border-top: 1px solid var(--riga);
}

.sito-categorie[b-twt2ck3cc4] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
}

.sito-categoria[b-twt2ck3cc4] {
    padding: 1px var(--s2);
    border: 1px solid var(--riga);
    border-radius: var(--raggio);
    background: var(--superficie-alt);
    font-size: var(--t-micro);
}

.sito-indirizzo[b-twt2ck3cc4] {
    display: flex;
    flex-direction: column;
    font-style: normal;
    font-size: var(--t-piccolo);
}
/* /Components/Persone/TendinaPersone.razor.rz.scp.css */
/* chi e' online, in cima alla tendina (28/10/2026): verde come le cose a posto, e il gruppo "Online" lo dice a parole */
.persona-online[b-d6xlq1i26z] {
    color: var(--fatto);
    font-weight: 600;
}
/* /Components/RecapitiContatto.razor.rz.scp.css */
/* I recapiti di una voce: una riga per numero o email, col campo che prende lo spazio e i due pulsanti a destra. */

.recapiti-testa[b-nv47pmba2s] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s2);
    margin-top: var(--s2);
}

.recapiti-testa:first-child[b-nv47pmba2s] { margin-top: 0; }

.recapiti-riga[b-nv47pmba2s] {
    display: flex;
    align-items: center;
    gap: var(--s1);
    margin-top: var(--s1);
}

.recapiti-riga .campo[b-nv47pmba2s] {
    flex: 1 1 auto;
    min-width: 0;
}

.recapiti-altrui[b-nv47pmba2s] {
    min-height: 1.6em;
}
/* /Components/Sito/PunteggioCliente.razor.rz.scp.css */
/* il conto del punteggio: il numero grande, la tabellina dei criteri, il giudizio dell'AI */

.punteggio-testa[b-l0gbzq32ex] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s2);
}

.punteggio-testa .btn[b-l0gbzq32ex] { flex-shrink: 0; }

.punteggio-totale[b-l0gbzq32ex] {
    margin: var(--s2) 0 0;
}

.punteggio-numero[b-l0gbzq32ex] {
    font-size: var(--t-grande);
    font-weight: 700;
}

.punteggio-su[b-l0gbzq32ex] {
    color: var(--grigio);
}

.punteggio-nota[b-l0gbzq32ex] {
    margin: var(--s1) 0 var(--s2);
    color: var(--grigio);
    font-size: var(--t-piccolo);
}

.punteggio-ai[b-l0gbzq32ex] {
    margin-top: var(--s3);
    font-size: var(--t-piccolo);
}

.punteggio-ai p[b-l0gbzq32ex] { margin: 0 0 var(--s1); }

.punteggio-effetto[b-l0gbzq32ex] {
    margin-right: var(--s1);
    font-size: var(--t-micro);
    color: var(--grigio);
}

/* i criteri che tirano su in verde, quelli che tengono giu' in rosso, gli esclusi spenti */
.punteggio[b-l0gbzq32ex]  tr.punteggio-alto td { color: var(--fatto); }

.punteggio[b-l0gbzq32ex]  tr.punteggio-basso td { color: var(--allarme); }

.punteggio[b-l0gbzq32ex]  tr.punteggio-escluso td { color: var(--grigio); }
/* /Components/Sito/RegistroSito.razor.rz.scp.css */
/* la cronologia delle modifiche a un sito: data, chi, cosa, su una riga */

.registro-vuoto[b-ehepfcnmjq] {
    margin: 0;
    color: var(--grigio);
    font-size: var(--t-piccolo);
}

.registro-cerca[b-ehepfcnmjq] {
    max-width: 320px;
    margin-bottom: var(--s2);
}

.registro[b-ehepfcnmjq] {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--t-piccolo);
}

.registro li[b-ehepfcnmjq] {
    display: grid;
    grid-template-columns: 130px 90px minmax(0, 1fr);
    gap: var(--s2);
    padding: var(--s1) 0;
    border-top: 1px solid var(--riga);
}

.registro li:first-child[b-ehepfcnmjq] { border-top: 0; }

.registro time[b-ehepfcnmjq] { color: var(--grigio); }

.registro-chi[b-ehepfcnmjq] { color: var(--grigio); }

@media (max-width: 600px) {
    .registro li[b-ehepfcnmjq] { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
/* /Components/Sito/ScreenshotSito.razor.rz.scp.css */
/* le anteprime degli screenshot: la testa della pagina, tagliata alla stessa altezza per tutte */

.screenshot-vuoto[b-tg7bbyx7ir] {
    margin: 0;
    color: var(--grigio);
    font-size: var(--t-piccolo);
}

.screenshot[b-tg7bbyx7ir] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--s3);
}

.screenshot a[b-tg7bbyx7ir] {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    font-size: var(--t-micro);
    color: var(--grigio);
    text-decoration: none;
}

.screenshot img[b-tg7bbyx7ir] {
    display: block;
    width: 100%;
    height: 160px;
    object-fit: cover;
    object-position: top;
    border: 1px solid var(--riga);
    border-radius: var(--raggio);
    background: var(--superficie-alt);
}
/* /Components/Sito/SitiDelLead.razor.rz.scp.css */
/* i siti del lead: il piccolo modulo del dominio sotto il titolo (il titolo e' del Riquadro) */

.siti-lead-modulo[b-xiw03cflzn] {
    margin-bottom: var(--s3);
}

/*
    il dominio a sinistra e in fondo a destra la matita che apre la scheda del sito (.in-linea, 06/10/2026):
    piccola, sulla riga del dominio. Larga quanto la riga, se no la matita resterebbe attaccata al dominio
*/
.sito-dominio[b-xiw03cflzn] { display: flex; align-items: center; gap: var(--s1); }

.sito-dominio .btn[b-xiw03cflzn] { --alto-controllo: 26px; }