@import '_content/WkBlazor.Shared/WkBlazor.Shared.zcnz1cvf9u.bundle.scp.css';

/* /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);
}

.email-allegato[b-3r1hqp7oqj] {
    display: flex;
    align-items: center;
    gap: var(--s2);
}

.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;
}
/* /Components/Lead/LavoriDelLead.razor.rz.scp.css */
/* il titolo con il suo "Aggiungi" a destra, come nei riquadri Societa' e Siti */

.lavori-lead-testa[b-0idvddsn3q] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s2);
}

.lavori-lead-testa .scheda-titolo[b-0idvddsn3q] { margin-bottom: var(--s2); }
/* /Components/Lead/NuovoLead.razor.rz.scp.css */
/* il modulo non si allarga su tutta la tabella: due campi non riempiono uno schermo */
.nuovo-lead[b-tbfcp74yy6] {
    max-width: 640px;
    margin-left: auto;
}
/* /Components/Lead/SocietaLead.razor.rz.scp.css */
/* il titolo e le due azioni nella stessa riga, come le altre sezioni della scheda del lead */
.societa-testa[b-yhvzmysqif] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s2);
}

.societa-tasti[b-yhvzmysqif] {
    display: flex;
    gap: var(--s2);
}

.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/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 */
.contatto + .contatto[b-d3129tb7wt] {
    margin-top: var(--s2);
    padding-top: var(--s2);
    border-top: 1px solid var(--riga);
}

.contatto-testa[b-d3129tb7wt] { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); }

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

.contatti-vuoto[b-d3129tb7wt] { color: var(--grigio); font-size: var(--t-piccolo); font-weight: 400; }
/* /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 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-1b543hj2n7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

.config-modulo[b-1b543hj2n7] { max-width: 640px; }

.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 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-yil2d467d0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

.config-modulo[b-yil2d467d0] { max-width: 640px; }

.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; }

.cliente-centro > .scheda + .scheda[b-f514vrjc5g],
.cliente-lato > .scheda + .scheda[b-f514vrjc5g] { 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); }
}

.sezione-testa[b-f514vrjc5g] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s2);
}

.cliente-tasti[b-f514vrjc5g] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
}

.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);
}
/* /Components/Pages/Configurazione/Clienti/ClientiElenco.razor.rz.scp.css */
.clienti-nota[b-62o3w37byv] {
    margin: 0 0 var(--s2);
    color: var(--grigio);
    font-size: var(--t-piccolo);
}

/* ::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/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 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-wpzad03ge7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

.config-modulo[b-wpzad03ge7] { max-width: 640px; }

.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;
}

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

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

.config-modulo[b-wpzad03ge7] { max-width: 720px; }

.config-modulo .etichetta[b-wpzad03ge7] { margin-top: var(--s2); }
/* /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-modulo[b-8yxz0otnkf] { max-width: 640px; }

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

.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); }

.log-cartelle[b-8yxz0otnkf] { margin: 0 0 var(--s3); }
/* /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; }

.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);
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
}

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

.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-modulo[b-rwdnc1ige5] { margin-top: 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 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-7btv3rpepe] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

.config-modulo[b-7btv3rpepe] { max-width: 640px; }

.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 */
.config-nome[b-7btv3rpepe] {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
}

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

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

.geografia-importa[b-7btv3rpepe] { max-width: 760px; }

.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/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[b-bbnwwr6ptf] { max-width: 640px; }

.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); }

.impostazione-modulo[b-bbnwwr6ptf] { max-width: 900px; margin-bottom: var(--s3); }

.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 */
.indirizzi-nota[b-ygzjag86ip] {
    margin: 0 0 var(--s3);
    color: var(--grigio);
    font-size: var(--t-piccolo);
}

/* ::deep perche' le celle le disegna Tabella, che ha il suo ambito */
[b-ygzjag86ip] .indirizzi-vuoto { color: var(--grigio); }

[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-utenti[b-urwikeym2t],
.lavori-azioni[b-urwikeym2t] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
}

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

.lavori-sposta[b-urwikeym2t] { margin-top: var(--s3); max-width: 520px; }

.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[b-4df17zq6qy] {
    margin-top: var(--s4);
    padding-top: var(--s3);
    border-top: 1px solid var(--riga);
}

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

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

.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); }

.lavori-utenti[b-4df17zq6qy] { display: flex; flex-wrap: wrap; gap: var(--s2); }
/* /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; }

.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); }

[b-4g75acgc6b] .modelli-apri { text-align: left; }

[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/ProblemiSiti/ProblemiSiti.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-gjyvaeog9c] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

.config-modulo[b-gjyvaeog9c] { max-width: 640px; }

.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); }

/* 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-modulo[b-jyron78phi] { max-width: 640px; }

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

.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); }

.punteggio-spiega[b-jyron78phi] {
    max-width: 820px;
    margin: 0 0 var(--s3);
    color: var(--grigio);
    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] {
    margin: var(--s2) 0;
    color: var(--attesa);
    font-size: var(--t-piccolo);
}

.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;
    margin: 0 0 var(--s3);
    color: var(--grigio);
    font-size: var(--t-piccolo);
}

/* 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: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s1);
}

[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);
}
/* /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-filtri[b-1k403ds9yp] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--s2) var(--s3);
    margin-bottom: var(--s3);
}

.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-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--s1);
}

/* 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; }
}

/* /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-riquadro-testa[b-gmym5dxbgz] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s2);
}

.sd-riquadro-testa .btn[b-gmym5dxbgz] { flex-shrink: 0; }

.sd-scheda[b-gmym5dxbgz] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    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";
    }
}

.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 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-2cdhm9wzdm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

.config-modulo[b-2cdhm9wzdm] { max-width: 640px; }

.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); }

.testi-modulo[b-2cdhm9wzdm] { max-width: 900px; margin-bottom: var(--s3); }

.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 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-jc9optfniu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

.config-modulo[b-jc9optfniu] { max-width: 640px; }

.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 */
.dati-utente[b-nvr0gho5d0] {
    display: grid;
    grid-template-columns: minmax(0, 720px) minmax(260px, 320px);
    gap: var(--s4);
    align-items: start;
}

@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%; }

.modulo-utente .etichetta[b-nvr0gho5d0],
.dati-utente-lato .etichetta[b-nvr0gho5d0] { margin-top: var(--s2); }

.modulo-utente .pannello-titolo[b-nvr0gho5d0] { margin-top: var(--s4); }

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

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

.spunte-utente[b-nvr0gho5d0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--s1) var(--s3);
}

.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/ElencoAccessi.razor.rz.scp.css */
/* le date e il CSV sopra la tabella, sempre nello stesso posto */
.accessi-barra[b-2isa5caire] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--s3);
    margin-bottom: var(--s3);
}

.accessi-csv[b-2isa5caire] { margin-left: auto; }
/* /Components/Pages/Configurazione/Utenti/PresenzeDispositivi.razor.rz.scp.css */
/* i due riquadri "Adesso" affiancati come in WK; sul telefono uno sotto l'altro */
.adesso[b-za16wa8s6e] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--s4);
    margin-bottom: var(--s4);
}

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

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

.ore-barra[b-za16wa8s6e] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--s3);
    margin-bottom: var(--s3);
}

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

/* il grafico scorre da solo se i giorni sono tanti: la pagina non si allarga */
.ore-grafico[b-za16wa8s6e] {
    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-za16wa8s6e] { display: block; }

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

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

.ore-legenda[b-za16wa8s6e] {
    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-za16wa8s6e] { display: inline-flex; align-items: center; gap: var(--s1); }

.ore-colore[b-za16wa8s6e] {
    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-za16wa8s6e] { fill: #3a7a3c; background: #3a7a3c; }
.serie-1[b-za16wa8s6e] { fill: #2f5f9e; background: #2f5f9e; }
.serie-2[b-za16wa8s6e] { fill: #b0651b; background: #b0651b; }
.serie-3[b-za16wa8s6e] { fill: #7a3f8f; background: #7a3f8f; }
.serie-4[b-za16wa8s6e] { fill: #1f8a86; background: #1f8a86; }
.serie-5[b-za16wa8s6e] { fill: #a3231b; background: #a3231b; }
.serie-6[b-za16wa8s6e] { fill: #6b6b2a; background: #6b6b2a; }
.serie-7[b-za16wa8s6e] { fill: #c24a7c; background: #c24a7c; }
/* /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);
}

/* 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/RegistroAzioni.razor.rz.scp.css */
/* i filtri che vanno al database, sempre al loro posto */
.registro-barra[b-95s9hkbuho] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--s3);
    margin-bottom: var(--s2);
}

.registro-barra select.campo[b-95s9hkbuho] { 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: 1.5em; margin: 0 0 var(--s2); }

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

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

.registro-giorno-titolo[b-95s9hkbuho] {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0 0 var(--s2);
    padding: var(--s1) 0;
    font-size: var(--t-medio);
    background: var(--carta);
}

.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);
    background: var(--superficie);
    border: 1px solid var(--riga);

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

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

.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[b-wzaho9jhiw] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--s3);
    margin-bottom: var(--s3);
}

.utenti-barra .campo[b-wzaho9jhiw] { min-width: 190px; }

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

/* la foto e le iniziali: un tondo della stessa misura, cosi' le righe restano alte uguali */
.utente-foto[b-wzaho9jhiw] {
    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); }

.utente-attivita[b-wzaho9jhiw] { 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] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2) var(--s4);
    justify-content: space-between;
    margin-bottom: var(--s3);
}

/* 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: una colonna sola, a una larghezza che si legge senza girare la
    testa. I tre riquadri sono i tre momenti del contratto - per chi, cosa, come si paga.
*/

.modulo-abbonamento[b-rkokq8g0t7] {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
    max-width: 44rem;
    padding-bottom: var(--s6);
}

.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);
}

/* sotto chi lo segue, a sinistra come il resto del riquadro */
.seguito-cambia[b-5thojt37qy] {
    margin-top: var(--s2);
}

/* 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, da incassare e quanti addebiti: i tre numeri che si chiedono al telefono con un
    cliente, in testa ai pagamenti come il riepilogo di Stripe. A destra e in monospaziato, cosi'
    si confrontano senza leggerli.
*/
.totali[b-5thojt37qy] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s2);
    margin: 0 0 var(--s3);
}

.totali > div[b-5thojt37qy] {
    padding: var(--s2) var(--s3);
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio);
}

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

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

.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 */
.col-cliente[b-5thojt37qy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin-top: var(--s2);
}

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

.seguace-testa[b-5thojt37qy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
}

.seguace-ordine[b-5thojt37qy] {
    display: inline-flex;
    gap: var(--s1);
}

.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;
}
/* /Components/Pages/Lavoro/Abbonamenti/PannelloAbbonamento.razor.rz.scp.css */
/*
    I moduli della scheda dell'abbonamento. Il pannello, i campi in fila, le caselle da spuntare e
    il piede sono quelli comuni di componenti.css: qui solo l'elenco di chi lo segue.
*/

/* una persona per riga: il nome prende lo spazio, la cadenza e "Togli" le stanno accanto */
.seguito-riga[b-9eng4kb0e2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
}

.seguito-nome[b-9eng4kb0e2] {
    flex: 1 1 10em;
    min-width: 0;
    overflow-wrap: anywhere;
}

.seguito-riga .campo[b-9eng4kb0e2] {
    width: auto;
    min-width: 12em;
}

@media (max-width: 600px) {
    .seguito-riga .campo[b-9eng4kb0e2] {
        flex: 1 1 100%;
    }
}
/* /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; }

/*
    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;
}

.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); 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); }

/*
    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); }

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

.documenti-condividi[b-46a7lr9eb8] { margin-bottom: var(--s4); }

.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 */
    .documenti-filtri .scheda-titolo[b-46a7lr9eb8],
    .documenti-filtri .scheda-titolo:first-child[b-46a7lr9eb8] { margin: var(--s1) 0 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);
    }
}

/* ---------- 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; }

    /* con un documento aperto si legge quello: l'elenco resta sotto, raggiungibile */
    .documenti.con-aperto .documenti-filtri[b-46a7lr9eb8] { display: 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); }

.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 */
/*
    Una colonna sola e non troppo larga: sono indirizzi e un brief, e una riga di testo lunga
    tutto lo schermo si legge male. Il brief e' il campo che conta, e prende l'altezza.
*/

.grafica-modulo[b-snje8z9m3u] {
    max-width: 720px;
    margin-bottom: var(--s4);
}

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

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

.grafica-modulo .pannello-titolo + .etichetta[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 ---------- */

/* il titolo della sezione e l'azione su di lei nella stessa riga, come le schede dei gestionali */
.grafica-sezione-testa[b-8by7j4qgva] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s2);
}

.grafica-sezione-testa .scheda-titolo[b-8by7j4qgva] { margin-bottom: var(--s2); }

.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] {
    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] {
    overflow: hidden;
    font-size: var(--t-piccolo);
    font-weight: 600;
    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.
*/

.grafiche-nota[b-92vjgn580i] {
    margin: 0 0 var(--s2);
    color: var(--grigio);
    font-size: var(--t-piccolo);
}

/*
    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 */
.campo-breve[b-dzfhwzlcem] {
    width: auto;
    max-width: 180px;
}
/* /Components/Pages/Lavoro/Progetti/NuovoProgetto.razor.rz.scp.css */
/*
    Il modulo del progetto nuovo: una colonna sola, come quello degli abbonamenti. I processi sono
    un elenco numerato, perche' l'ordine e' quello in cui il lavoro passa di mano.
*/

.modulo-progetto[b-ykw2x5odoh] {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
    max-width: 52rem;
    padding-bottom: var(--s6);
}

.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);
}

.consegna[b-gv5ft1wzau] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.3;
}

.consegna-quando[b-gv5ft1wzau] {
    font-size: var(--t-micro);
    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);
}

/* i filtri per data a sinistra, il pulsante del progetto nuovo a destra */
.azioni-elenco[b-gv5ft1wzau] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2) var(--s4);
    margin-bottom: var(--s3);
}

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

.filtri-date .etichetta[b-gv5ft1wzau] {
    margin: 0;
}
/* /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 colonne: il lavoro a sinistra, la cronologia al centro - la colonna larga, perche' le note
    sono la cosa lunga - e gli allegati a destra, stretti perche' sono nomi e importi brevi.
    La specificita' in piu' (.scheda-lead.scheda-progetto) serve a vincere sulle due colonne della
    scheda del lead senza toccare il suo stile.
*/
.scheda-lead.scheda-progetto[b-onmrzdybgp] {
    grid-template-columns: 360px minmax(0, 1fr) 300px;
    grid-template-areas: "lavoro cronologia allegati";
}

.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-lavoro[b-onmrzdybgp] { grid-area: lavoro; }

.colonna-allegati[b-onmrzdybgp] { grid-area: allegati; }

.colonna-cronologia[b-onmrzdybgp] {
    grid-area: cronologia;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    padding-right: 0;
}

/*
    Su uno schermo medio gli allegati scendono sotto il lavoro e la cronologia resta larga. Le due
    colonne di sinistra si dividono l'altezza e scorrono ognuna per conto suo: una sola che scorre
    con dentro tutte e due farebbe sparire i processi mentre si cerca un pagamento.
*/
@media (max-width: 1280px) {
    .scheda-lead.scheda-progetto[b-onmrzdybgp] {
        grid-template-columns: 340px minmax(0, 1fr);
        grid-template-rows: minmax(0, 3fr) minmax(0, 2fr);
        grid-template-areas: "lavoro cronologia" "allegati cronologia";
    }
}

/* sul telefono tutto in fila, come la scheda del lead: la pagina torna a scorrere intera */
@media (max-width: 900px) {
    .scheda-lead.scheda-progetto[b-onmrzdybgp] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-template-areas: "lavoro" "cronologia" "allegati";
        overflow: visible;
    }

    .colonna[b-onmrzdybgp],
    .colonna-cronologia[b-onmrzdybgp] {
        overflow: visible;
        padding-right: 0;
    }
}

/* ---------- intestazione ---------- */

.testa-stato[b-onmrzdybgp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2) var(--s3);
    margin-bottom: var(--s3);
    font-size: var(--t-piccolo);
}

.testa-avanzamento[b-onmrzdybgp] {
    color: var(--grigio);
}

/* le azioni stanno in fondo a destra, insieme: la prima e' quella di tutti i giorni */
.testa-azioni[b-onmrzdybgp] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-left: auto;
}

.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;
}

.processo[b-onmrzdybgp] {
    padding: var(--s2) 0 var(--s2) var(--s3);
    border-left: 3px solid var(--riga);
    font-size: var(--t-piccolo);
}

.processo + .processo[b-onmrzdybgp] {
    margin-top: var(--s1);
}

/* il processo corrente si riconosce dal bordo, dal segno e dalla parola "in corso" insieme */
.processo.corrente[b-onmrzdybgp] {
    border-left-color: var(--verde);
    background: var(--verde-tenue);
}

.processo.chiuso[b-onmrzdybgp] {
    border-left-color: var(--fatto);
}

.processo-testa[b-onmrzdybgp] {
    display: flex;
    align-items: baseline;
    gap: var(--s2);
}

.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(--verde); }

.processo-nome[b-onmrzdybgp] {
    font-weight: 600;
    min-width: 0;
}

.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);
}

.processo-descrizione[b-onmrzdybgp] {
    margin: 2px 0 0 calc(1em + var(--s2));
    color: var(--grigio);
    font-size: var(--t-micro);
}

.processo > .stato[b-onmrzdybgp] {
    margin: var(--s1) 0 0 calc(1em + var(--s2));
}

.processo-persone[b-onmrzdybgp] {
    list-style: none;
    margin: var(--s1) 0 0 calc(1em + var(--s2));
    padding: 0;
}

.processo-persone li[b-onmrzdybgp] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--s2);
}

.processo-persone .fatto[b-onmrzdybgp] { color: var(--fatto); }

.compenso[b-onmrzdybgp] {
    margin-left: auto;
}

/* ---------- liste di cose da fare ---------- */

.task[b-onmrzdybgp] {
    margin: var(--s1) 0 0 calc(1em + var(--s2));
}

.task summary[b-onmrzdybgp] {
    cursor: pointer;
    color: var(--grigio);
    font-size: var(--t-micro);
    font-weight: 600;
}

.task-elenco[b-onmrzdybgp] {
    list-style: none;
    margin: var(--s1) 0 0;
    padding: 0;
}

.task-elenco li[b-onmrzdybgp] {
    padding: 2px 0;
}

.task-elenco label[b-onmrzdybgp] {
    display: flex;
    align-items: flex-start;
    gap: var(--s2);
}

.task-elenco input[b-onmrzdybgp] {
    flex: 0 0 auto;
    margin: 2px 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-left: calc(13px + var(--s2));
    color: var(--grigio);
    font-size: var(--t-micro);
    font-family: var(--mono);
}

/* ---------- pagamenti, documenti, allegati ---------- */

.incasso[b-onmrzdybgp] {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    margin-bottom: var(--s3);
    font-size: var(--t-piccolo);
}

.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);
}

.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, chi ci lavora */
.processo-azioni[b-onmrzdybgp] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1) var(--s2);
    margin: var(--s2) 0 0 calc(1em + var(--s2));
}

/* il titolo di una scheda con il suo pulsante a destra, come "Nuovo documento" */
.titolo-con-azione[b-onmrzdybgp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
}

/* 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);
}

.compenso[b-onmrzdybgp] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--s1) 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);
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-left: 3px solid var(--riga);
    border-radius: var(--raggio);
}

.ticket-cifra-numero[b-x3cys3i8en] {
    font-size: var(--t-grande);
    font-weight: 600;
    color: var(--inchiostro);
}

.ticket-cifra-testo[b-x3cys3i8en] {
    font-size: var(--t-piccolo);
    color: var(--grigio);
}

.ticket-cifra.allarme[b-x3cys3i8en] { border-left-color: var(--allarme); }
.ticket-cifra.allarme .ticket-cifra-numero[b-x3cys3i8en] { color: var(--allarme); }

.ticket-cifra.attesa[b-x3cys3i8en] { border-left-color: var(--attesa); }
.ticket-cifra.attesa .ticket-cifra-numero[b-x3cys3i8en] { color: var(--attesa); }

.ticket-cifra.fatto[b-x3cys3i8en] { border-left-color: var(--fatto); }
.ticket-cifra.fatto .ticket-cifra-numero[b-x3cys3i8en] { color: var(--fatto); }

/* 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) 360px;
}

/*
    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: var(--s3) 0 0;
    font-size: var(--t-piccolo);
    color: var(--grigio);
    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);
}

.ticket-dettaglio-piede .btn[b-x3cys3i8en] { width: 100%; white-space: normal; }

@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 */
.ticket-riassegna[b-x3cys3i8en] { max-width: 560px; }

.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/Oggi/Appunti/Appunti.razor.rz.scp.css */
.appunti-comandi[b-hjmw5hqdfr] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--s3);
    margin-bottom: var(--s3);
}

.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; }

.appunti-modulo[b-hjmw5hqdfr] {
    margin-bottom: var(--s3);
    max-width: 720px;
}

[b-hjmw5hqdfr] .appunti-cosa { word-break: break-word; }

[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 #2563a8 su #e8f0f9 = 5,33   da confermare #6b3fa0 su #f1ebf8 = 6,32
      scuro   appuntamento #7fb0e6 su #1a2533 = 6,82   da confermare #b99be0 su #251e2e = 6,77
    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: #2563a8;
    --f-app: #e8f0f9;
    --c-conf: #6b3fa0;
    --f-conf: #f1ebf8;

    /* 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;

    --colonne-settimana: 56px repeat(7, minmax(0, 1fr));
}

:root[data-theme="dark"] .cal[b-1cmrypdiy2] {
    --c-app: #7fb0e6;
    --f-app: #1a2533;
    --c-conf: #b99be0;
    --f-conf: #251e2e;
}

.t-appuntamento[b-1cmrypdiy2] { --c: var(--c-app); --f: var(--f-app); }
.t-richiamo[b-1cmrypdiy2] { --c: var(--attesa); --f: var(--attesa-fondo); }
.t-confermare[b-1cmrypdiy2] { --c: var(--c-conf); --f: var(--f-conf); }
.t-appunto[b-1cmrypdiy2] { --c: var(--grigio); --f: var(--superficie-alt); }
.t-assenza[b-1cmrypdiy2] { --c: var(--allarme); --f: var(--allarme-fondo); }
.t-blocco[b-1cmrypdiy2] {
    --c: var(--grigio);
    --f: repeating-linear-gradient(135deg, var(--superficie-alt) 0 6px, var(--riga) 6px 7px);
}

/* ---------- testa: comandi, linguette, legenda ---------- */

.cal-comandi[b-1cmrypdiy2] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-start;
    gap: var(--s3);
    margin-bottom: var(--s3);
}

.cal-sposta[b-1cmrypdiy2] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--s2);
}

.cal-sposta .btn[aria-current][b-1cmrypdiy2] {
    border-color: var(--verde);
    color: var(--verde);
}

/* niente grassetto sul giorno in vista e larghezza fissa per i passi: passando dal giorno al
   mese, dove i passi diventano settimane, i pulsanti non devono spostarsi sotto il puntatore */
.cal-sposta > .cal-passo[b-1cmrypdiy2] { min-width: 13ch; justify-content: center; }

.cal-vai[b-1cmrypdiy2],
.cal-chi[b-1cmrypdiy2] {
    display: flex;
    flex-direction: column;
}

.cal-chi .campo[b-1cmrypdiy2] { width: 200px; }

.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;
    max-height: calc(100dvh - 300px);
    min-height: 320px;
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
}

/* ---------- corpo: calendarietto a sinistra, vista a destra ---------- */

.cal-corpo[b-1cmrypdiy2] {
    display: grid;
    grid-template-columns: 216px minmax(0, 1fr);
    gap: var(--s4);
    align-items: start;
}

.cal-principale[b-1cmrypdiy2] { min-width: 0; }

.cal-lato[b-1cmrypdiy2] {
    position: sticky;
    top: calc(var(--barra-alta) + var(--s3));
}

/* il calendarietto: sei settimane sempre, cosi' sfogliando i mesi non cambia altezza */
.cal-mini[b-1cmrypdiy2] {
    padding: var(--s2);
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
}

.cal-mini-testa[b-1cmrypdiy2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s1);
}

.cal-mini-mese[b-1cmrypdiy2] {
    font-size: var(--t-piccolo);
    font-weight: 700;
    text-transform: capitalize;
}

.cal-mini-griglia[b-1cmrypdiy2] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    text-align: center;
}

.cal-mini-dow[b-1cmrypdiy2] {
    font-size: var(--t-micro);
    font-weight: 700;
    color: var(--grigio);
    padding: 2px 0;
}

.contenuto .cal a.cal-mini-g[b-1cmrypdiy2] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    font-size: var(--t-micro);
    font-variant-numeric: tabular-nums;
    color: var(--inchiostro);
    text-decoration: none;
    border-radius: 999px;
}

.contenuto .cal a.cal-mini-g:hover[b-1cmrypdiy2] { background: var(--superficie-alt); }

.contenuto .cal a.cal-mini-g.fuori[b-1cmrypdiy2] { color: var(--grigio); }

/* i giorni in vista: una fascia tenue, come la settimana evidenziata di Google */
.cal-mini-g.dentro[b-1cmrypdiy2] { background: var(--verde-tenue); border-radius: 0; }

.contenuto .cal a.cal-mini-g[aria-current][b-1cmrypdiy2] {
    color: #fff;
    background: var(--verde);
    border-radius: 999px;
    font-weight: 700;
}

.contenuto .cal a.cal-mini-g.oggi:not([aria-current])[b-1cmrypdiy2] {
    font-weight: 700;
    color: var(--verde);
    box-shadow: inset 0 0 0 1px var(--verde);
    border-radius: 999px;
}

.cal-mini-punto[b-1cmrypdiy2] {
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: currentColor;
    opacity: .7;
}

/* ---------- 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: #fff; 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 due righe di un evento, che anche un richiamo
       di mezz'ora deve mostrare intere */
    --alto-mezzora: 36px;

    min-width: 880px;
}

.cal-griglia-testa[b-1cmrypdiy2],
.cal-tutto[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-tutto[b-1cmrypdiy2] {
    background: var(--superficie);
    border-top: 1px solid var(--riga);
    border-bottom: 1px solid var(--riga);
}

.cal-angolo[b-1cmrypdiy2] {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--superficie);
}

.cal-tutto-nome[b-1cmrypdiy2] {
    padding: var(--s1);
    font-size: 10px;
    line-height: 1.2;
    text-align: right;
    color: var(--grigio);
}

.cal-giorno-testa[b-1cmrypdiy2] {
    border-left: 1px solid var(--riga);
    text-align: center;
}

.contenuto .cal .cal-giorno-testa a[b-1cmrypdiy2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: var(--s1) 0;
    color: var(--inchiostro);
    text-decoration: none;
}

.cal-giorno-nome[b-1cmrypdiy2] {
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--grigio);
}

.cal-giorno-numero[b-1cmrypdiy2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: var(--t-medio);
    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: #fff; background: var(--verde); }

.cal-giorno-testa.oggi .cal-giorno-nome[b-1cmrypdiy2] { color: var(--verde); }

.cal-tutto-cella[b-1cmrypdiy2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    min-height: 26px;
    padding: 2px;
    border-left: 1px solid var(--riga);
}

.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);
}

.cal-ora-segno[b-1cmrypdiy2] {
    position: absolute;
    right: var(--s1);
    transform: translateY(-50%);
    font-size: var(--t-micro);
    color: var(--grigio);
}

.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); }

.cal-mezzora:hover[b-1cmrypdiy2] { background: color-mix(in srgb, var(--verde) 7%, transparent); }

/* dove cadrebbe quello che si sta trascinando */
.cal-mezzora.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;
}

.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);
}

/* un evento lungo ha spazio: il cliente o la nota vanno a capo invece di finire nei puntini */
.cal-striscia:not(.corta) .cal-chi-evento[b-1cmrypdiy2] { white-space: normal; }

/* mentre si trascina le strisce lasciano passare il puntatore: sotto ci sono le mezz'ore che ricevono */
.cal-griglia.trascina .cal-striscia[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 { 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, il fondo si svuota. Lo dice anche il segno di spunta */
.cal-evento.fatto[b-1cmrypdiy2] { background: var(--superficie); }

.cal-segno[b-1cmrypdiy2] {
    flex: 0 0 auto;
    color: var(--c);
    font-weight: 700;
}

.cal-quando[b-1cmrypdiy2] { flex: 0 0 auto; color: var(--grigio); }

.cal-di-chi[b-1cmrypdiy2] { flex: 0 0 auto; font-weight: 700; color: var(--inchiostro); }

.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;
}

.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); }

.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 persone e quante corsie */
.cal-giorno[b-1cmrypdiy2] { display: grid; }

.cal-giorno-angolo[b-1cmrypdiy2] {
    top: 0;
    z-index: 5;
    box-shadow: 0 1px 0 var(--riga);
}

.cal-colonna-testa[b-1cmrypdiy2] {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: var(--s2);
    font-weight: 600;
    background: var(--superficie);
    border-left: 1px solid var(--riga);
    box-shadow: 0 1px 0 var(--riga);
}

.cal-colonna-testa a[b-1cmrypdiy2] { color: var(--inchiostro); }

.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: 10px; }

.cal-ufficio[b-1cmrypdiy2] {
    padding: 0 3px;
    font-size: 10px;
    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] {
    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);
    width: min(380px, calc(100vw - var(--s4) * 2));
    max-height: calc(100dvh - var(--barra-alta) - var(--s4) * 2);
    overflow-y: auto;
    padding: var(--s4);
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
    box-shadow: var(--ombra-alta);
}

.cal-dettaglio:focus[b-1cmrypdiy2] { outline: none; }

.cal-dettaglio-testa[b-1cmrypdiy2] {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

.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); }

.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);
}

.cal-dettaglio-nota[b-1cmrypdiy2] {
    width: 100%;
    margin: 0;
    color: var(--grigio);
    font-size: var(--t-piccolo);
}

/* con un modulo dentro il pannello si allarga: i campi brevi stanno due per riga */
.cal-dettaglio.largo[b-1cmrypdiy2] { width: min(480px, calc(100vw - var(--s4) * 2)); }

/* ---------- 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(--verde);
    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;
}

/* ---------- telefono ---------- */

/* il calendarietto cede il posto prima: sotto i 1100px la settimana ha bisogno di tutta la larghezza */
@media (max-width: 1100px) {
    .cal-corpo[b-1cmrypdiy2] { grid-template-columns: minmax(0, 1fr); }

    .cal-lato[b-1cmrypdiy2] { display: none; }
}

@media (max-width: 900px) {
    .cal-comandi[b-1cmrypdiy2] { align-items: stretch; }

    .cal-chi[b-1cmrypdiy2],
    .cal-chi .campo[b-1cmrypdiy2] { width: 100%; }

    /* sul telefono scorre la pagina: due scorrimenti uno dentro l'altro si contendono il pollice */
    .cal-scorri[b-1cmrypdiy2] { max-height: none; }

    .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[b-1cmrypdiy2] { margin-top: var(--s3); border-top: 1px solid var(--riga); padding-top: 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-voci[b-1cmrypdiy2] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); font-size: var(--t-piccolo); }

.cal-storico-voci li[b-1cmrypdiy2] { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: baseline; }

.cal-storico-nota[b-1cmrypdiy2] { flex-basis: 100%; color: var(--grigio); word-break: break-word; }
/* /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);
}

.scrivi-cosa[b-gk4bucwc2e] {
    padding-bottom: var(--s3);
    border-bottom: 1px solid var(--riga);
}

.scrivi-lead[b-gk4bucwc2e] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    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: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' */
.scrivi-recenti[b-gk4bucwc2e] {
    max-height: 340px;
    overflow-y: auto;
    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 thead th[b-gk4bucwc2e] { position: sticky; top: 0; z-index: 1; }

.scrivi-recenti-titolo[b-gk4bucwc2e] {
    padding: var(--s1) var(--s2);
    font-size: var(--t-piccolo);
    font-weight: 700;
    text-align: left;
    background: var(--superficie);
}

.scrivi-recenti-fondo[b-gk4bucwc2e] { height: 1px; }

.scrivi-trovato-quando[b-gk4bucwc2e] { white-space: nowrap; }

.scrivi-trovato-quando span[b-gk4bucwc2e] { display: block; color: var(--grigio); }

.scrivi-recenti-piede[b-gk4bucwc2e] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: var(--s1) 0 0;
}
/* /Components/Pages/Oggi/Coda/ChiamateSospese.razor.rz.scp.css */
.sospese-comandi[b-yvlk27hwqo] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--s3);
    margin-bottom: var(--s3);
}

.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] {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

.coda-chi .etichetta[b-e8g4rsgx94] { margin: 0; }

.coda-chi .campo[b-e8g4rsgx94] { 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 ---------- */

.coda-contatori[b-e8g4rsgx94] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s3);
    margin-bottom: var(--s4);
}

.contatore[b-e8g4rsgx94] {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    padding: var(--s3) var(--s4);
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
    color: var(--inchiostro);
    text-decoration: none;
}

.contatore:hover[b-e8g4rsgx94] { border-color: 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(--grigio);
}

/* il ritardo ha il bordo, il numero e il glifo: il colore da solo non basterebbe */
.contatore.allarme[b-e8g4rsgx94] {
    border-color: var(--allarme);
    border-left-width: 4px;
}

.contatore.allarme .contatore-numero[b-e8g4rsgx94],
.contatore.allarme .contatore-nome[b-e8g4rsgx94] { color: var(--allarme); }

.contatore.a-posto .contatore-nome[b-e8g4rsgx94] { color: var(--fatto); }

/* ---------- filtri per famiglia ---------- */

.coda-famiglie[b-e8g4rsgx94] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

.famiglia[b-e8g4rsgx94] {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    min-height: 32px;
    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] {
    color: #fff;
    background: var(--verde);
    border-color: var(--verde);
}

.famiglia[aria-pressed="true"] .mono[b-e8g4rsgx94] { color: inherit; }

/* ---------- i gruppi ---------- */

.coda-gruppo[b-e8g4rsgx94] { margin-bottom: var(--s4); }

.coda-gruppo details > summary[b-e8g4rsgx94] {
    display: flex;
    align-items: baseline;
    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: var(--t-piccolo);
    transition: transform var(--transizione);
}

.coda-gruppo details[open] > summary[b-e8g4rsgx94]::before { transform: rotate(90deg); }

.coda-gruppo details > summary .storico-gruppo[b-e8g4rsgx94] { margin: var(--s4) 0 var(--s2); }

.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(--s3) 0 var(--s2);
    font-size: var(--t-piccolo);
    font-weight: 600;
    color: var(--inchiostro);
}

.coda-giorno .mono[b-e8g4rsgx94] { font-weight: 400; color: var(--grigio); }

.coda-a-posto[b-e8g4rsgx94] {
    margin: 0;
    padding: var(--s2) 0;
    font-size: var(--t-piccolo);
    color: var(--fatto);
}

.coda-a-posto.coda-neutro[b-e8g4rsgx94] { 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);
    border-radius: var(--raggio-grande);
    overflow: hidden;
}

.coda-voce[b-e8g4rsgx94] {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: var(--s3);
    align-items: start;
    padding: var(--s3) var(--s4);
    border-top: 1px solid var(--riga);
}

.coda-voce:first-child[b-e8g4rsgx94] { border-top: 0; }

/* in ritardo: il bordo a sinistra e il glifo nel quando, insieme */
.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] {
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--grigio);
}

.coda-titolo[b-e8g4rsgx94] {
    font-weight: 600;
    color: var(--inchiostro);
    overflow-wrap: anywhere;
}

.coda-titolo:hover[b-e8g4rsgx94] { color: var(--verde); }

/* 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 .campo[b-e8g4rsgx94] { 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 occupa tutta la riga, sotto la voce */
.coda-modulo[b-e8g4rsgx94] {
    grid-column: 2 / -1;
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    padding-top: var(--s2);
}

.coda-modulo textarea[b-e8g4rsgx94] { width: 100%; resize: vertical; }

@media (max-width: 600px) {
    .coda-modulo[b-e8g4rsgx94] { grid-column: 1 / -1; }
}
/* /Components/Pages/Personale/Andamento/AndamentoPersonale.razor.rz.scp.css */
/* la scelta della persona, per l'amministratore */

.persona[b-4734ogr1ar] {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    max-width: 280px;
    margin-bottom: var(--s3);
}
/* /Components/Pages/Personale/Andamento/SchedaAndamento.razor.rz.scp.css */
/* La scheda andamento di una persona: riquadri, saldo, grafico e mesi. Solo token. */

.comandi[b-31ts2oarjb] { margin-bottom: var(--s3); }

.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);
    background: var(--superficie);
    border: 1px solid 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(--grigio);
}

.indicatore-valore[b-31ts2oarjb] { font-size: var(--t-grande); font-weight: 600; text-align: right; }

.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; }

.due[b-31ts2oarjb] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--s3);
    margin: var(--s3) 0;
}

.serie[b-31ts2oarjb] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
    margin-bottom: var(--s2);
}

.barre[b-31ts2oarjb] { display: block; overflow: visible; }

.barre .barra[b-31ts2oarjb] { fill: var(--verde); }

.barre .linea[b-31ts2oarjb] { stroke: var(--verde); stroke-width: 2.5; stroke-linecap: round; }

.barre .punto[b-31ts2oarjb] { fill: var(--superficie); stroke: var(--verde); stroke-width: 2; }

/* le scritte arrivano come markup e non hanno l'attributo dello stile della pagina: ::deep le raggiunge */
.barre[b-31ts2oarjb]  .valore,
.barre[b-31ts2oarjb]  .mese {
    font-family: var(--mono);
    font-size: 11px;
    text-anchor: middle;
    fill: var(--grigio);
}

@media (max-width: 800px) {
    .due[b-31ts2oarjb] { grid-template-columns: 1fr; }
}
/* /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);
    background: var(--superficie);
    border: 1px solid 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(--grigio);
}

.cifra-valore[b-dyxltvd5vl] {
    font-size: var(--t-grande);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* il glifo ▲ accompagna il colore: chi non vede il rosso legge il segno */
.cifra-allarme .cifra-valore[b-dyxltvd5vl] { color: var(--allarme); }

.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); }

.grigio[b-dyxltvd5vl] { color: var(--grigio); }

/* ---------- 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); }

.in-arrivo-totale[b-dyxltvd5vl] { margin-left: var(--s2); color: var(--grigio); font-weight: 500; }
/* /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;
}
/* /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);
}

.pannello-azione[b-vgyushdqhv] { margin-top: var(--s3); }

.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; }

.azioni-riga[b-vgyushdqhv] {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    white-space: nowrap;
}

.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/Dati/DatiPersonali.razor.rz.scp.css */
/*
    I moduli in una colonna non troppo larga: sono campi brevi, e una riga di testo lunga tutto lo
    schermo si legge male. Nome e cognome, i due telefoni, codice fiscale e data stanno in fila
    perche' si leggono insieme; sul telefono vanno uno sotto l'altro da soli (campi-in-fila).
*/

.modulo-personale[b-k9yev8vqod] {
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: var(--s1);
}

.modulo-personale .campo[b-k9yev8vqod] { width: 100%; }

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

.modulo-personale .pannello-titolo[b-k9yev8vqod] { margin-top: var(--s4); }

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

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

/*
    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".
*/

.notifiche-personali[b-k9yev8vqod] { max-width: 900px; }

.griglia-notifiche th.canale[b-k9yev8vqod],
.griglia-notifiche td.canale[b-k9yev8vqod] {
    text-align: center;
    width: 17%;
}

.griglia-notifiche th.canale span[b-k9yev8vqod] {
    display: block;
    white-space: nowrap;
}

.griglia-notifiche td.canale input[b-k9yev8vqod] {
    width: 18px;
    height: 18px;
    accent-color: var(--verde);
    cursor: pointer;
}

.griglia-notifiche tr.area th[b-k9yev8vqod] {
    background: var(--superficie-alt);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--grigio);
    text-align: left;
}

.griglia-notifiche tbody th[scope="row"][b-k9yev8vqod] {
    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-k9yev8vqod] { box-shadow: inset 3px 0 0 var(--attesa); }

.da-salvare[b-k9yev8vqod],
.mai-scelta[b-k9yev8vqod] {
    margin-left: var(--s2);
    font-size: var(--t-micro);
    white-space: nowrap;
}

.da-salvare[b-k9yev8vqod] { color: var(--attesa); }

.mai-scelta[b-k9yev8vqod] { color: var(--grigio); }

.notifiche-personali .pannello-piede[b-k9yev8vqod] { align-items: center; }

.notifiche-personali .pannello-piede .pannello-nota[b-k9yev8vqod] { margin-right: auto; }

.accessi-nota[b-k9yev8vqod] { margin: var(--s3) 0; }
/* /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);
}

.persona[b-48tnpoy03m] {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    margin-bottom: var(--s3);
}

.persona .campo[b-48tnpoy03m] { 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);
    background: var(--superficie);
    border: 1px solid 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(--grigio);
}

.cifra-valore[b-48tnpoy03m] {
    font-size: var(--t-grande);
    font-weight: 600;
    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(--verde); }

/* ---------- albero accanto ai totali per livello ---------- */

.albero-livelli[b-48tnpoy03m] {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--s4);
    align-items: start;
}

.ramo[b-48tnpoy03m] {
    margin: 0;
    padding: 0 0 0 var(--s4);
    list-style: none;
    border-left: 1px solid var(--riga);
    margin-left: var(--s2);
}

.albero > .ramo[b-48tnpoy03m] { margin-top: var(--s2); }

.nodo[b-48tnpoy03m] {
    padding: var(--s2) 0 0;
}

.nodo-radice[b-48tnpoy03m] {
    padding: 0 0 var(--s2);
    border-bottom: 1px solid var(--riga);
}

.nodo-testa[b-48tnpoy03m] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s1) var(--s2);
}

.nodo-livello[b-48tnpoy03m] {
    min-width: 2.2em;
    font-size: var(--t-micro);
    color: var(--grigio);
}

.nodo-nome[b-48tnpoy03m] { font-weight: 600; }

/* chi non lavora piu' si legge in grigio, ma lo dice anche l'etichetta accanto */
.spento > .nodo-testa .nodo-nome[b-48tnpoy03m],
.spento > .nodo-numeri dd[b-48tnpoy03m] { color: var(--grigio); }

.nodo-numeri[b-48tnpoy03m] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1) var(--s4);
    margin: var(--s1) 0 0 calc(2.2em + var(--s2));
}

.nodo-numeri div[b-48tnpoy03m] {
    display: flex;
    gap: var(--s1);
    align-items: baseline;
}

.nodo-numeri dt[b-48tnpoy03m] {
    font-size: var(--t-micro);
    color: var(--grigio);
}

.nodo-numeri dd[b-48tnpoy03m] {
    margin: 0;
    font-size: var(--t-piccolo);
    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); }

.tabellina[b-48tnpoy03m]  tr.spenta td { color: var(--grigio); }

.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) {
    .albero-livelli[b-48tnpoy03m] { grid-template-columns: minmax(0, 1fr); }

    .riepilogo[b-48tnpoy03m] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
    .ramo[b-48tnpoy03m] { padding-left: var(--s2); margin-left: var(--s1); }

    .nodo-numeri[b-48tnpoy03m] { margin-left: 0; }
}
/* /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, grafici - sono le stesse dell'Andamento,
    ridichiarate qui perche' gli stili di una pagina sono isolati e non si prestano.
*/

/* ---------- periodo e persona ---------- */

.confronto-comandi[b-1k2t6chaty] {
    display: flex;
    align-items: flex-end;
    gap: var(--s4);
    flex-wrap: wrap;
    margin-bottom: var(--s3);
}

.confronto-comandi[b-1k2t6chaty]  .linguette {
    flex: 1 1 auto;
    margin-bottom: 0;
}

.confronto-persona[b-1k2t6chaty] {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding-bottom: var(--s1);
}

.confronto-persona .etichetta[b-1k2t6chaty] { margin: 0; }

.confronto-persona .campo[b-1k2t6chaty] {
    width: auto;
    min-width: 180px;
}

.confronto-nota[b-1k2t6chaty] {
    margin: 0 0 var(--s4);
    font-size: var(--t-piccolo);
    color: var(--grigio-tenue);
}

.confronto-riquadro + .confronto-riquadro[b-1k2t6chaty] { margin-top: var(--s4); }

.confronto-spiega[b-1k2t6chaty] {
    margin: var(--s3) 0 0;
    max-width: 80ch;
    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);
    background: var(--superficie-alt);
    border: 1px solid 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(--grigio);
}

.indicatore-valore[b-1k2t6chaty] {
    font-size: var(--t-titolo);
    font-weight: 600;
    line-height: 1.15;
    color: 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(--verde);
    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);
}

/* ---------- 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); }

/* ---------- mese per mese ---------- */

.confronto-mesi[b-1k2t6chaty] {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    margin-top: var(--s3);
}

.mesi-riga[b-1k2t6chaty] {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: var(--s3);
    align-items: center;
    padding: var(--s2) var(--s3);
    border: 1px solid transparent;
    border-radius: var(--raggio-grande);
}

/* chi si sta confrontando: bordo verde, e il segno "tu" a parole */
.mesi-riga.evidenziata[b-1k2t6chaty] {
    border-color: var(--verde);
    background: var(--superficie-alt);
}

.mesi-nome[b-1k2t6chaty] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s1);
    font-weight: 600;
}

.mesi-totale[b-1k2t6chaty] {
    flex-basis: 100%;
    font-size: var(--t-piccolo);
    font-weight: 400;
    color: var(--grigio);
}

.grafico[b-1k2t6chaty] {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.grafico-asse[b-1k2t6chaty] {
    stroke: var(--riga);
    stroke-width: 1;
}

.grafico-barra[b-1k2t6chaty] { fill: var(--verde); }

/* il mese a meta': stessa tinta, piu' chiara e tratteggiata */
.grafico-barra.in-corso[b-1k2t6chaty] {
    color: var(--verde);
    fill-opacity: .4;
    stroke: currentColor;
    stroke-dasharray: 3 2;
    stroke-width: 1;
}

.grafico-media[b-1k2t6chaty] {
    fill: none;
    stroke: var(--inchiostro);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
    opacity: .6;
}

.grafico-valore[b-1k2t6chaty] {
    font-family: var(--mono);
    font-size: 11px;
    fill: var(--inchiostro);
}

.grafico-mese[b-1k2t6chaty] {
    font-size: 10px;
    fill: var(--grigio);
}

@media (max-width: 900px) {
    .confronto-persona[b-1k2t6chaty] { width: 100%; }

    .confronto-persona .campo[b-1k2t6chaty] { flex: 1 1 auto; }

    .mesi-riga[b-1k2t6chaty] { grid-template-columns: minmax(0, 1fr); }
}

.confronto-carico[b-1k2t6chaty] {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
    margin-top: var(--s3);
}

/* ---------- tutti a confronto: il grafico a linee ---------- */

.grafico-linee[b-1k2t6chaty] { display: block; margin-top: var(--s3); overflow: visible; }

.linee-griglia[b-1k2t6chaty] { stroke: var(--riga); stroke-width: 1; }

.linee-scala[b-1k2t6chaty], .linee-mese[b-1k2t6chaty] { fill: var(--grigio); font-size: 11px; font-family: var(--mono); }

.linee-media[b-1k2t6chaty] { stroke: var(--grigio-tenue); stroke-width: 2; stroke-dasharray: 6 5; }

.linee-serie[b-1k2t6chaty] { stroke-width: 2.5; stroke-linecap: round; }

.linee-serie.linee-focus[b-1k2t6chaty] { stroke-width: 5; }

.linee-punto[b-1k2t6chaty] { stroke: var(--superficie); stroke-width: 1.5; }

.linee-legenda[b-1k2t6chaty] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s2) var(--s4);
    margin: var(--s2) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--t-piccolo);
}

.linee-legenda li[b-1k2t6chaty] { display: inline-flex; align-items: center; gap: var(--s1); }

.linee-legenda-focus[b-1k2t6chaty] { font-weight: 600; }

.linee-segno[b-1k2t6chaty] { width: 18px; height: 4px; border-radius: 2px; }

.linee-segno-media[b-1k2t6chaty] { background: repeating-linear-gradient(90deg, var(--grigio-tenue) 0 5px, transparent 5px 9px); }

.linee-totale[b-1k2t6chaty] { color: var(--grigio); }

.linee-tabella[b-1k2t6chaty] { margin-top: var(--s4); }
/* /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 ---------- */

.andamento-comandi[b-qk9fhzeoht] {
    display: flex;
    align-items: flex-end;
    gap: var(--s4);
    flex-wrap: wrap;
    margin-bottom: var(--s3);
}

/* le linguette prendono la riga; la loro riga di fondo fa da base anche alla tendina */
.andamento-comandi[b-qk9fhzeoht]  .linguette {
    flex: 1 1 auto;
    margin-bottom: 0;
}

.andamento-persona[b-qk9fhzeoht] {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding-bottom: var(--s1);
}

.andamento-persona .etichetta[b-qk9fhzeoht] { margin: 0; }

.andamento-persona .campo[b-qk9fhzeoht] {
    width: auto;
    min-width: 160px;
}

/* ---------- 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);
    margin-bottom: var(--s2);
}

.indicatore[b-qk9fhzeoht] {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    padding: var(--s3) var(--s4);
    background: var(--superficie);
    border: 1px solid 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(--grigio);
}

.indicatore-valore[b-qk9fhzeoht] {
    font-size: var(--t-titolo);
    font-weight: 600;
    line-height: 1.15;
    color: 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); }

.andamento-nota[b-qk9fhzeoht] {
    margin: 0 0 var(--s4);
    font-size: var(--t-piccolo);
    color: var(--grigio-tenue);
}

/* ---------- 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; }

.andamento-spiega[b-qk9fhzeoht] {
    margin: var(--s3) 0 0;
    max-width: 80ch;
    font-size: var(--t-piccolo);
    color: var(--grigio);
}

.andamento-in-corso[b-qk9fhzeoht] {
    margin-left: var(--s2);
    padding: 0 var(--s1);
    font-size: var(--t-micro);
    color: var(--attesa);
    background: var(--attesa-fondo);
    border-radius: var(--raggio);
}

.segno-vinte[b-qk9fhzeoht] { color: var(--fatto); }

.segno-perse[b-qk9fhzeoht] { color: var(--allarme); }

/* ---------- grafici ---------- */

.grafico[b-qk9fhzeoht] {
    display: block;
    overflow: visible;
}

.grafico-asse[b-qk9fhzeoht] {
    stroke: var(--riga);
    stroke-width: 1;
}

.grafico-barra[b-qk9fhzeoht] { fill: var(--verde); }

.grafico-barra.vinte[b-qk9fhzeoht] { fill: var(--fatto); }

.grafico-barra.perse[b-qk9fhzeoht] { fill: var(--allarme); }

/* il mese a meta': stessa tinta, piu' chiara e tratteggiata, e la tabella lo scrive a parole */
.grafico-barra.in-corso[b-qk9fhzeoht] {
    fill-opacity: .4;
    stroke: currentColor;
    stroke-dasharray: 3 2;
    stroke-width: 1;
}

.grafico-barra.in-corso[b-qk9fhzeoht] { color: var(--verde); }
.grafico-barra.vinte.in-corso[b-qk9fhzeoht] { color: var(--fatto); }
.grafico-barra.perse.in-corso[b-qk9fhzeoht] { color: var(--allarme); }

.grafico-linea[b-qk9fhzeoht] {
    stroke: var(--verde);
    stroke-width: 2.5;
    stroke-linecap: round;
}

.grafico-punto[b-qk9fhzeoht] {
    fill: var(--superficie);
    stroke: var(--verde);
    stroke-width: 2;
}

.grafico-punto.in-corso[b-qk9fhzeoht] { stroke-dasharray: 2 2; }

.grafico-valore[b-qk9fhzeoht] {
    font-family: var(--mono);
    font-size: 11px;
    fill: var(--inchiostro);
}

.grafico-mese[b-qk9fhzeoht] {
    font-size: 11px;
    fill: var(--grigio);
}

/* ---------- chiamate per venditore ---------- */

.andamento-venditori[b-qk9fhzeoht]  .tabella tbody td { vertical-align: top; }

.andamento-barra[b-qk9fhzeoht] {
    display: block;
    height: 10px;
    min-width: 2px;
    background: var(--verde);
    border-radius: 2px;
}

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

    .andamento-numeri[b-qk9fhzeoht] { min-width: 0; }

    .andamento-persona[b-qk9fhzeoht] { width: 100%; }

    .andamento-persona .campo[b-qk9fhzeoht] { flex: 1 1 auto; }
}

/* il periodo personalizzato: due scelte del mese, accanto alle linguette */
.andamento-personalizzato[b-qk9fhzeoht] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
}

/* 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); }
/* /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. Nella colonna dell'elenco 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.compatte[b-q04mjzwyrk] {
    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; }

.cifra .scheda-titolo[b-rre3bxtbi9] { margin-bottom: var(--s2); }

.importo[b-rre3bxtbi9] {
    margin: 0;
    font-size: var(--t-grande);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cifra-allarme .importo[b-rre3bxtbi9] { color: var(--allarme); }

.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);
}

.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] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s2);
    margin: var(--s2) 0;
    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); }

/* 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); }
}
/* /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;
}

.scheda-pagamento > .scheda[b-tj75y8fe7c],
.scheda-pagamento-lato > .scheda:first-child[b-tj75y8fe7c] { 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); }
}
/* /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); }
/* /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);
}
/* /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 */
.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);
}

.registro-iban[b-qvw0ou3fd0] { margin-top: var(--s3); }
/* /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 sopra l'elenco. Solo token. */

.pannello-azione[b-3rahgbx0ha] { margin-bottom: var(--s3); }

.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/Lead/LeadElenco.razor.rz.scp.css */
.lead-cerca[b-yb7hlq65oj] {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s2);
    max-width: 640px;
}

.lead-cerca .etichetta[b-yb7hlq65oj] { margin: 0; }


.lead-nota[b-yb7hlq65oj] { color: var(--grigio); }
/* /Components/Pages/Vendita/Lead/LeadScheda.razor.rz.scp.css */
/*
    I due gruppi di pulsanti sulla stessa riga, distanziati piu' dei pulsanti dentro un gruppo: la
    distanza e' quella che dice "queste sono due famiglie". Sul telefono vanno a capo da soli.
*/
.azioni-scheda[b-2kamvie38m] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: var(--s5);
}

/* il titolo di una sezione del riepilogo con il suo pulsante a destra */
.sezione-testa[b-2kamvie38m] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s2);
}

.sezione-testa .scheda-titolo[b-2kamvie38m] { margin-bottom: var(--s2); }

.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);
}

/* il contorno di una voce dello storico: sito della trattativa, dove, progetto o abbonamento, audio */
[b-2kamvie38m] .storico-sito,
[b-2kamvie38m] .storico-dove,
[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; }
/* /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, stretto, perche' un dominio e' corto e un campo largo quanto la pagina
    fa pensare che ci vada un testo.
*/

.elenco-aggiungi[b-oq8wscnwal] {
    max-width: 520px;
}
/* /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.
*/

/* il titolo del riquadro con il suo pulsante a destra: si modifica li' dove si legge */
.sito-riquadro-testa[b-twt2ck3cc4] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s2);
}

.sito-riquadro-testa .btn[b-twt2ck3cc4] { flex-shrink: 0; }

/* il campo che restringe le categorie prende la riga intera, sopra le caselle */
.sito-cerca-voci[b-twt2ck3cc4] {
    flex-basis: 100%;
    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) 340px;
    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/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 titolo con il suo pulsante, e il piccolo modulo del dominio sotto */

.siti-lead-testa[b-xiw03cflzn] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s2);
}

.siti-lead-testa .scheda-titolo[b-xiw03cflzn] { margin-bottom: var(--s2); }

.siti-lead-modulo[b-xiw03cflzn] {
    margin-bottom: var(--s3);
}