/*
    I componenti ricorrenti. Le tabelle sono l'80% del gestionale, quindi vengono per prime.
*/

/* ---------- la colonna dei giorni: la firma del progetto ----------

   WK passa la giornata a dire quanto tempo e' passato. Quel numero, che oggi e'
   scritto a mano fra parentesi in decine di punti, qui e' un elemento solo.
   Il colore dice lo stato, ma non da solo: c'e' sempre un glifo e un testo per
   chi legge con lo screen reader. E' l'unica cosa che resta a sinistra del titolo
   quando sul telefono le colonne collassano.
*/

.giorni {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 3px;
    min-width: 62px;
    padding: 1px var(--s1);
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--t-piccolo);
    line-height: 1.5;
    border-radius: var(--raggio);
    white-space: nowrap;
}

/* data e giorni su una riga: "20/04/2026 (156 g)"; il segnale perde la larghezza da colonna */
.giorni-con-data { display: inline-flex; align-items: baseline; white-space: nowrap; }

/* la data nello stesso carattere del testo intorno (sta dentro frasi e accanto a nomi), cifre tabulari */
.giorni-con-data > .giorni-data { margin-right: var(--s1); font-variant-numeric: tabular-nums; }

.giorni-con-data .giorni { min-width: 0; justify-content: flex-start; }

/* senza fondo il margine interno sembrava uno spazio prima della parentesi: "(2 g )" */
.giorni-con-data .giorni-neutro { padding: 0; }

.giorni .segno {
    font-size: var(--t-micro);
    line-height: 1;
}

.giorni .unita {
    font-size: var(--t-micro);
    opacity: .7;
}

.giorni-neutro { color: var(--grigio); }

.giorni-attesa {
    color: var(--attesa);
    background: var(--attesa-fondo);
    font-weight: 600;
}

.giorni-allarme {
    color: var(--allarme);
    background: var(--allarme-fondo);
    font-weight: 700;
}

.giorni-mai {
    color: var(--allarme);
    background: var(--allarme-fondo);
    font-weight: 700;
    letter-spacing: .04em;
}

/* ---------- tabella ---------- */

.tabella-guscio {
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
    overflow: hidden;
}

.tabella-scorri {
    overflow: auto;
    max-height: calc(100vh - 210px);
}

.tabella {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--t-base);
}

/* intestazioni bloccate allo scorrimento */
.tabella thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: var(--s2) var(--s3);
    text-align: left;
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--grigio);
    background: var(--superficie-alt);
    border-bottom: 1px solid var(--riga);
    white-space: nowrap;

    /* ovunque in alto: un'intestazione su due righe accanto a una su una non scende a meta' */
    vertical-align: top;
}

.tabella tbody td {
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--riga);
    vertical-align: top;
}

.tabella tbody tr:last-child td { border-bottom: 0; }

/*
    La colonna del pulsante sta in fondo e stretta. Il pulsante non e' rosso di suo: colorare di
    rosso venticinque righe di elenco fa sembrare pericolosa la pagina intera, e allora il rosso
    non segnala piu' niente. Diventa rosso quando ci si passa sopra, cioe' quando serve, e il
    dialogo che si apre e' quello distruttivo.
*/
.colonna-azioni {
    width: 44px;
    text-align: right;
}

/* le icone di una riga una accanto all'altra; nei riquadri una sotto l'altra, a destra del blocco */
.azioni-riga {
    display: flex;
    justify-content: flex-end;
    gap: var(--s1);
    white-space: nowrap;
}

.tabella-riquadri .azioni-riga {
    flex-direction: column;
    align-items: flex-end;
}

.tabella .elimina {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--riga);
    background: var(--superficie);

    /*
        Grigia da ferma: venticinque cestini rossi in colonna fanno sembrare pericolosa la pagina
        intera, e allora il rosso non segnala piu' niente. Diventa rosso quando ci si passa sopra,
        cioe' quando si sta per premerlo davvero.
    */
    color: var(--grigio-tenue);
}

.tabella .elimina:hover:not([disabled]),
.tabella .elimina:focus-visible {
    color: var(--allarme);
    background: var(--allarme-fondo);
    border-color: transparent;
}

/*
    Ogni pulsante fatto solo di un'icona dentro una riga - la matita come il cestino - ha la stessa
    misura e lo stesso aspetto: prima la matita era un pulsante intero da 32px accanto a un cestino
    da 22, e la riga sembrava storta. La matita diventa verde al passaggio, il cestino rosso.
*/
.tabella .btn:not(.elimina):has(> .icona:only-child) {
    width: 26px;
    height: 22px;
    padding: 0;
    justify-content: center;
    border: 1px solid var(--riga);
    background: var(--superficie);
    color: var(--grigio-tenue);
}

.tabella .btn:not(.elimina):has(> .icona:only-child):hover:not([disabled]),
.tabella .btn:not(.elimina):has(> .icona:only-child):focus-visible {
    color: var(--link);
    background: var(--verde-tenue);
    border-color: transparent;
}

/*
    Matita e cestino stanno vicini, come una coppia: la cella che ha solo un pulsante-icona e' larga
    quanto lui e perde il margine verso destra, la colonna del cestino quello verso sinistra.
*/
.tabella tbody td:has(> .btn:only-child > .icona:only-child) {
    width: 1%;
    padding-right: var(--s1);
}

.tabella tbody td.colonna-azioni { padding-left: var(--s1); }

/* l'icona segue il colore del pulsante, non ne ha uno suo */
.icona { display: block; }
.tabella tbody tr:hover td { background: var(--superficie-alt); }

/*
    Verde le vinte, rosso le perse. Il colore non dice mai niente da solo: nella stessa riga c'e'
    la colonna "Esito" che lo scrive a parole, ed e' quella che legge chi confonde i due colori -
    che sono proprio i due piu' confusi, e non e' un caso raro.

    La tinta sta sulla CELLA e non sulla riga perche' le celle hanno gia' un fondo proprio: messa
    sul <tr> resterebbe sotto e non si vedrebbe.
*/
.tabella tbody tr.vinta td { background: var(--riga-vinta); }
.tabella tbody tr.persa td { background: var(--riga-persa); }

/* sotto il puntatore vince sempre l'evidenza della riga: si deve capire dove si e' */
.tabella tbody tr.vinta:hover td,
.tabella tbody tr.persa:hover td { background: var(--superficie-alt); }

/* i numeri stanno a destra, cosi' si confrontano leggendo in verticale */
.tabella .n,
.tabella th.n {
    text-align: right;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
}

.tabella th[aria-sort] { cursor: pointer; }
.tabella th[aria-sort]:hover { color: var(--inchiostro); }

/*
    La tabella a riquadri: ogni riga ha a sinistra la tabellina verticale (etichetta e valore) e
    accanto il blocco principale. Le colonne di un gruppo stanno in UNA cella, quindi le
    intestazioni hanno altezze diverse dalle solite: si blocca tutto il thead insieme, invece di
    ogni riga con il suo top in pixel.
*/
.tabella-riquadri thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.tabella-riquadri thead th,
.tabella-riquadri thead tr.riga-filtri td {
    position: static;
}

.tabella .riquadro-testa {
    white-space: normal;
    vertical-align: top;
}

.riquadro-ordina {
    display: flex;
    align-items: center;
    gap: var(--s2);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.riquadro-ordina-etichetta {
    font-size: var(--t-piccolo);
    font-weight: 600;
    color: var(--grigio);
}

.riquadro-ordina select.campo {
    width: auto;
    min-width: 220px;
    font-size: var(--t-piccolo);
}

.riquadro-filtro {
    display: flex;
    gap: var(--s1);
}

.tabella thead tr.riga-filtri .riquadro-filtro select.campo {
    width: auto;
    max-width: 45%;
    flex: none;
}

.riquadro-filtro .suggerito { flex: 1 1 auto; min-width: 0; }

/* la tabellina: l'etichetta a sinistra in grigio, il valore accanto; righe basse e fitte */
.riquadro-lato {
    display: grid;

    /* due coppie per riga: diciassette voci in nove righe invece che in diciassette */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s4);
    margin: 0;
    font-size: var(--t-piccolo);
}

.riquadro-coppia {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: var(--s2);

    /* etichetta e valore partono dall'alto tutti e due: su due righe si leggono allineati */
    align-items: start;
    padding: 3px 0;
    border-bottom: 1px solid var(--riga);
}

.riquadro-coppia:nth-last-child(-n+2):nth-child(odd),
.riquadro-coppia:last-child { border-bottom: 0; }

.riquadro-coppia dt { color: var(--grigio); }

.riquadro-coppia dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* una voce lunga (la descrizione dell'AI) prende tutta la riga della tabellina */
.riquadro-coppia-larga { grid-column: 1 / -1; }

.riquadro-coppia dd .campo { height: 26px; font-size: var(--t-piccolo); }

/* un'etichetta lunga ("Bonifico 268 EUR del 31/08/2026") va a capo dentro la sua casella invece di uscire sul blocco accanto */
.riquadro-coppia dd .stato { white-space: normal; max-width: 100%; }

/*
    Nella tabellina i valori stanno tutti a sinistra, in colonna sotto la stessa linea. La colonna
    dei giorni e i segnali sono fatti per una colonna di tabella - larghezza minima e numero a
    destra - e qui rientravano. Quelli senza fondo perdono anche il margine interno, cosi' la
    cifra parte dove partono le parole delle righe sopra e sotto.
*/
.riquadro-coppia dd .giorni {
    min-width: 0;
    justify-content: flex-start;
}

.riquadro-coppia dd .giorni:not(.giorni-attesa):not(.giorni-allarme):not(.giorni-mai) { padding-left: 0; }

.riquadro-lato-cella { width: 500px; }

/* sotto i 1200px una coppia per riga: il blocco principale ha bisogno di spazio */
@media (max-width: 1200px) {
    .riquadro-lato { grid-template-columns: minmax(0, 1fr); }
    .riquadro-lato-cella { width: 270px; }
}

/* il blocco principale: la prima voce e' il titolo, le altre sotto */
.riquadro-voce + .riquadro-voce { margin-top: var(--s2); }

.riquadro-voce:first-child {
    font-weight: 600;
    font-size: var(--t-base);
}

.ordina-segno {
    margin-left: var(--s1);
    color: var(--verde);
}

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

.filtri {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

/* i filtri attivi si vedono e si tolgono uno a uno */
.filtro-attivo {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: 2px var(--s2);
    font-size: var(--t-piccolo);
    background: var(--verde-tenue);
    color: var(--verde-scuro);
    border: 1px solid var(--verde);
    border-radius: 999px;
}

.filtro-attivo .chiudi {
    display: inline-flex;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font-size: var(--t-base);
    line-height: 1;
}

/* ---------- stati ---------- */

.stato {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    padding: 1px var(--s2);
    font-size: var(--t-micro);
    font-weight: 600;
    border-radius: var(--raggio);
    white-space: nowrap;
}

.stato-fatto { color: var(--fatto); background: var(--fatto-fondo); }
.stato-attesa { color: var(--attesa); background: var(--attesa-fondo); }
.stato-allarme { color: var(--allarme); background: var(--allarme-fondo); }

/* ---------- paginazione ---------- */

.paginazione {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s2) var(--s3);
    border-top: 1px solid var(--riga);
    background: var(--superficie-alt);
    font-size: var(--t-piccolo);
    color: var(--grigio);
}

.paginazione .totale { margin-right: auto; }
.paginazione .campo { width: auto; }

/* ---------- caricamento: scheletri, non giravolte ---------- */

.scheletro {
    display: block;
    height: 1em;
    border-radius: var(--raggio);
    background: linear-gradient(90deg, var(--riga) 25%, var(--superficie-alt) 37%, var(--riga) 63%);
    background-size: 400% 100%;
    animation: scorri 1.4s ease infinite;
}

@keyframes scorri {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .scheletro { animation: none; }
}

/* ---------- schermata vuota: e' un invito, non un vicolo cieco ---------- */

.vuoto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s3);
    padding: var(--s6) var(--s4);
    text-align: center;
    color: var(--grigio);
}

.vuoto .titolo {
    font-size: var(--t-medio);
    font-weight: 600;
    color: var(--inchiostro);
}

/* ---------- avvisi temporanei ---------- */

.toast-zona {
    position: fixed;
    right: var(--s4);
    bottom: var(--s4);
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    max-width: min(380px, calc(100vw - var(--s5)));
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--s2);
    padding: var(--s3);
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-left: 3px solid var(--verde);
    border-radius: var(--raggio);
    box-shadow: var(--ombra-alta);
}

.toast-errore { border-left-color: var(--allarme); }
.toast-attesa { border-left-color: var(--attesa); }

@media (max-width: 900px) {
    .toast-zona {
        right: var(--s3);
        left: var(--s3);
        bottom: calc(var(--barra-basso) + var(--s3));
        max-width: none;
    }

    .tabella-scorri { max-height: none; }
}

/* ---------- schede ---------- */

.scheda {
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
    padding: var(--s4);
}

.scheda + .scheda { margin-top: var(--s3); }

.scheda-titolo {
    font-size: var(--t-piccolo);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--grigio);
    margin-bottom: var(--s3);
}

/* ---------- stati dell'interfaccia ---------- */

/*
    Schermata vuota: non un'assenza, un'istruzione. Dice cosa manca e cosa si puo' fare,
    perche' una tabella vuota senza spiegazione si legge come un guasto.
*/
.stato-vuoto {
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
    padding: var(--s6) var(--s5);
    text-align: center;
    color: var(--grigio);
}

.stato-vuoto p { margin: 0 0 var(--s2); }

.stato-vuoto p:last-child { margin-bottom: 0; }

.stato-vuoto strong { color: var(--inchiostro); }

/*
    Scheletro, non rotella: mostra la FORMA di quello che sta arrivando, quindi lo spazio non
    salta quando i dati arrivano e l'attesa si legge come lavoro in corso invece che come blocco.
*/
.scheletro-riga {
    height: 34px;
    margin: var(--s2) var(--s3);
    border-radius: var(--raggio);
    background: linear-gradient(90deg, var(--superficie-alt) 25%, var(--riga) 37%, var(--superficie-alt) 63%);
    background-size: 400% 100%;
    animation: scheletro 1.4s ease infinite;
}

@keyframes scheletro {
    from { background-position: 100% 50%; }
    to   { background-position: 0 50%; }
}

/* chi ha chiesto meno animazioni vede un blocco fermo, non un lampeggio */
@media (prefers-reduced-motion: reduce) {
    .scheletro-riga {
        animation: none;
        background: var(--superficie-alt);
    }
}

/* ---------- la pagina di accesso ---------- */

/*
    Il guscio per chi non e' ancora entrato: niente laterale, niente briciole. Centrato, stretto,
    e senza niente da guardare oltre ai due campi.
*/
.nudo {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--carta);
    padding: var(--s4);
}

/*
    Questa regola sembra inutile e non lo e': .accesso e' il figlio diretto del guscio flex, quindi
    e' LUI l'elemento flessibile. Senza una larghezza propria si dimensiona sul contenuto, e il
    "width: 100%" della scheda dentro finisce per valere il 100% di quella misura li' - 219px
    misurati, contro i 440 che il max-width prometteva.
*/
.accesso {
    width: 100%;
    max-width: 440px;
}

/*
    440px e non 340: a 340 un indirizzo email normale non ci sta e si legge
    "davide.bertagna@dowe" - cioe' il campo taglia proprio la cosa che stai controllando prima di
    premere Entra. Sul telefono resta comunque a tutta larghezza meno i margini, quindi il massimo
    non da' fastidio.
*/
.accesso-scheda {
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
    box-shadow: var(--ombra);
    padding: var(--s6);
    width: 100%;
    max-width: 440px;
}

.marchio-grande {
    font-family: var(--mono);
    font-size: var(--t-titolo);
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--verde);
    text-align: center;
    margin-bottom: var(--s5);
}

.accesso-scheda .etichetta { margin-top: var(--s3); }

.accesso-scheda .campo { width: 100%; }

.accesso-invia {
    width: 100%;
    margin-top: var(--s5);
}

/* l'errore non e' affidato al solo colore: ha il ruolo alert e il testo lo dice */
.accesso-avviso {
    margin: var(--s3) 0 0;
    padding: var(--s2) var(--s3);
    border-radius: var(--raggio);
    background: var(--allarme-fondo);
    color: var(--allarme);
    font-size: var(--t-piccolo);
}

/* ---------- il menu delle colonne e la riga dei filtri ---------- */

/* la riga dei filtri sta sotto le intestazioni e scorre insieme a loro */
.tabella thead tr.riga-filtri td {
    padding: var(--s1) var(--s2);
    background: var(--superficie-alt);
    border-bottom: 1px solid var(--riga);
    position: sticky;
    top: 30px;
    z-index: 2;
}

.tabella thead tr.riga-filtri .campo {
    width: 100%;
    font-size: var(--t-piccolo);
}

/* ---------- campo con i suggerimenti ---------- */

.suggerito {
    position: relative;
}

.suggerimenti {
    position: absolute;
    z-index: 5;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    min-width: 160px;
    max-height: 240px;
    overflow-y: auto;
    margin: 0;
    padding: var(--s1) 0;
    list-style: none;
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio);
    box-shadow: var(--ombra-alta);
}

.suggerimento {
    padding: 3px var(--s2);
    font-size: var(--t-piccolo);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.suggerimento:hover,
.suggerimento.scelto {
    background: var(--verde-tenue);
    color: var(--verde-scuro);
}

.menu-colonne {
    padding: var(--s3);
    border-top: 1px solid var(--riga);
    background: var(--superficie-alt);
}

.menu-colonne-altro {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding-bottom: var(--s2);
    margin-bottom: var(--s2);
    border-bottom: 1px solid var(--riga);
    font-size: var(--t-piccolo);
}

.menu-colonne-altro .campo { width: auto; }

.menu-colonne-nota {
    margin: 0 0 var(--s2);
    font-size: var(--t-micro);
    color: var(--grigio);
}

/*
    In colonna e non a capo: dall'alto in basso qui e' da sinistra a destra nella tabella, ed e'
    quella corrispondenza che rende leggibili i tasti "Su" e "Giu'". Con le voci che vanno a capo
    su piu' righe si perde, e spostare in su una voce non si sa piu' dove la porta.
*/
.colonne-elenco {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 260px;
    overflow-y: auto;

    /*
        Stretto: il menu e' largo quanto la tabella, e a piena larghezza il nome della colonna
        finiva a sinistra e i suoi due tasti a mille pixel di distanza, sul bordo destro. Non si
        capiva piu' quale riga stessero muovendo.
    */
    max-width: 380px;
}

.voce-colonna {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: 2px var(--s2);
    border-radius: var(--raggio);
    font-size: var(--t-piccolo);
}

.voce-colonna:hover { background: var(--superficie); }

.voce-colonna-nome {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    flex: 1 1 auto;
    min-width: 0;
    cursor: pointer;
}

.voce-colonna-nome:has(input:disabled) {
    cursor: default;
    color: var(--grigio);
}

.voce-colonna-tasti {
    display: inline-flex;
    gap: var(--s1);
    flex: 0 0 auto;
}

.voce-colonna-tasti .btn {
    padding: 0 var(--s2);
    font-size: var(--t-micro);
}

/* i comandi del menu stanno sotto a tutto: sono azioni, non un'altra colonna da spuntare */
.menu-colonne-piede {
    display: flex;
    gap: var(--s2);
    margin-top: var(--s2);
    padding-top: var(--s2);
    border-top: 1px solid var(--riga);
}

.paginazione .totale-pagina {
    font-size: var(--t-piccolo);
    color: var(--grigio);
}

.ricordami {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-top: var(--s4);
    font-size: var(--t-piccolo);
    color: var(--grigio);
    cursor: pointer;
}

.accesso-recupero {
    display: block;
    margin-top: var(--s4);
    text-align: center;
    font-size: var(--t-piccolo);
}

.recupero-testo {
    color: var(--grigio);
    font-size: var(--t-piccolo);
    margin: var(--s3) 0 0;
}

/*
    Le celle numeriche non vanno a capo: "non valutato" spezzato su due righe faceva alte 45px
    tutte le righe di un elenco da settemila, e con l'altezza incostante l'occhio perde la riga
    mentre scorre. Se un valore non ci sta, si allarga la colonna - non si manda a capo un numero.
*/
.tabella .n { white-space: nowrap; }


/* ---------- avvisi ---------- */

/*
    In alto al centro, appena sotto la barra: e' dove l'occhio va per primo, e un errore in un
    angolo in basso passava inosservato (deciso il 23/09/2026). Il piu' recente arriva in fondo:
    in cima spingerebbe giu' quelli gia' scritti, e l'Annulla scapperebbe da sotto il puntatore.
*/
.avvisi {
    position: fixed;
    z-index: 60;
    top: calc(var(--barra-alta) + var(--s2));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s2);
    width: max-content;
    max-width: min(560px, calc(100vw - var(--s4) * 2));

    /* il contenitore non deve rubare i click alla pagina sotto: li prendono i singoli avvisi */
    pointer-events: none;
}

.avviso {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s3);
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-left: 3px solid var(--grigio);
    border-radius: var(--raggio);
    box-shadow: var(--ombra-alta);
    font-size: var(--t-piccolo);
    animation: avviso-entra 160ms ease-out;
}

/* chi ha chiesto meno movimento non lo vede comparire di scatto: lo trova gia' li' */
@media (prefers-reduced-motion: reduce) {
    .avviso { animation: none; }
}

@keyframes avviso-entra {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

.avviso.fatto      { border-left-color: var(--fatto); }
.avviso.attenzione { border-left-color: var(--attesa); }
.avviso.errore     { border-left-color: var(--allarme); }

.avviso-segno { flex: 0 0 auto; font-weight: 700; }

.avviso.fatto .avviso-segno      { color: var(--fatto); }
.avviso.attenzione .avviso-segno { color: var(--attesa); }
.avviso.errore .avviso-segno     { color: var(--allarme); }

.avviso-testo { flex: 1 1 auto; min-width: 0; }

.avviso-annulla { flex: 0 0 auto; }

.avviso .chiudi {
    flex: 0 0 auto;
    border: 0;
    background: none;
    padding: 0 2px;
    cursor: pointer;
    color: var(--grigio-tenue);
    font-size: var(--t-medio);
    line-height: 1;
}

.avviso .chiudi:hover { color: var(--inchiostro); }

/* ---------- dialogo di conferma ---------- */

.velo-dialogo {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(22, 33, 28, .4);
}

.dialogo {
    position: fixed;
    z-index: 71;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(460px, calc(100vw - var(--s4) * 2));
    padding: var(--s4);
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
    box-shadow: var(--ombra-alta);
}

/* il dialogo che mostra qualcosa da leggere (il conto del punteggio): piu' largo, e scorre dentro */
.dialogo.dialogo-largo {
    width: min(860px, calc(100vw - var(--s4) * 2));
    max-height: calc(100vh - var(--s6, 48px));
    overflow: auto;
}

.dialogo-titolo {
    margin: 0 0 var(--s2);
    font-size: var(--t-grande);
}

.dialogo-testo {
    margin: 0 0 var(--s4);
    color: var(--grigio);
}

.dialogo-password {
    margin-bottom: var(--s4);
}

.dialogo-password .campo {
    width: 100%;
    margin-top: var(--s1);
}

.dialogo-avviso {
    margin: var(--s2) 0 0;
    font-size: var(--t-piccolo);
    color: var(--allarme);
}

.dialogo-tasti {
    display: flex;
    justify-content: flex-end;
    gap: var(--s2);
}


/* ---------- linguette ---------- */

.linguette {
    display: flex;
    gap: var(--s1);
    margin-bottom: var(--s3);
    border-bottom: 1px solid var(--riga);
}

.linguetta {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s3);
    color: var(--grigio);
    border-bottom: 2px solid transparent;

    /* i 2px del bordo non devono far ballare le altre linguette quando una si accende */
    margin-bottom: -1px;
    white-space: nowrap;
}

.linguetta:hover {
    color: var(--inchiostro);
    text-decoration: none;
    background: var(--superficie-alt);
}

.linguetta.attiva {
    color: var(--verde-scuro);
    border-bottom-color: var(--verde);
    /* grassetto finto: font-weight allargherebbe la parola e spingerebbe le vicine
       sotto il puntatore. L'ombra ispessisce il tratto senza cambiare la larghezza */
    text-shadow: 0 0 .6px currentColor, 0 0 .6px currentColor;
}

.linguetta-quante {
    font-size: var(--t-micro);
    color: var(--grigio-tenue);
}

.linguetta.attiva .linguetta-quante { color: var(--verde-scuro); }

/*
    Le sezioni di una macro-pagina del menu, sopra la pagina: non si allungano e non si stringono
    nelle pagine-tabella (che sono una colonna flessibile), e sul telefono scorrono di lato
    invece di andare a capo.
*/
.linguette.sezioni {
    flex: none;
    overflow-x: auto;
    scrollbar-width: none;
}

/* ---------- scheda del lead ---------- */

/*
    Lo storico al centro e il riepilogo di lato: e' lo storico che si legge prima di richiamare -
    cosa si sono detti, cosa era stato promesso. Il lato e' stretto e fisso perche' sono etichette
    e numeri brevi, e allargarlo toglierebbe righe alle note, che sono la cosa lunga.
*/
.scheda-lead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-areas: "storico lato";
    gap: var(--s4);
    align-items: start;
}

.scheda-lead-lato { grid-area: lato; }

.scheda-lead-storico { grid-area: storico; min-width: 0; }

/*
    Sul telefono il riepilogo va sopra - li' si apre la scheda per decidere se chiamare - e la pagina
    torna a scorrere tutta: due scorrimenti uno dentro l'altro su uno schermo stretto si
    contendono il pollice. Resta ferma solo l'intestazione, cioe' il nome del lead e i pulsanti.
*/
@media (max-width: 900px) {
    .scheda-lead {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "lato" "storico";
    }

    .contenuto:has(.scheda-lead) {
        display: block;
        overflow-y: auto;
    }

    .scheda-lead-testa {
        position: sticky;
        top: calc(var(--s3) * -1);
        z-index: 3;
        margin: calc(var(--s3) * -1) calc(var(--s3) * -1) 0;
        padding: var(--s3) var(--s3) 0;
        background: var(--carta);
        border-bottom: 1px solid var(--riga);
    }

    .scheda-lead-lato,
    .storico-scorri {
        overflow: visible;
        padding-right: 0;
    }

    .storico-scorri .storico-gruppo { position: static; }
}

/*
    Intestazione ferma, due colonne che scorrono ognuna per conto suo. La pagina non scorre: scorrono
    lo storico e il lato, cosi' il nome del lead e i pulsanti restano sempre in vista.

    Ogni anello della catena ha min-height: 0 - contenuto, griglia, colonne - perche' un elemento di
    griglia o flex ha per difetto come minimo l'altezza del suo contenuto, e basta che manchi in un
    punto solo perche' lo scorrimento torni alla pagina intera.
*/
.contenuto:has(.scheda-lead) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.scheda-lead-testa { flex: 0 0 auto; }

.scheda-lead-testa .pagina-testa { margin-bottom: var(--s2); }

.scheda-lead-testa .azioni-lead { margin-bottom: var(--s3); }

.scheda-lead {
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
}

.scheda-lead-lato {
    min-height: 0;
    overflow-y: auto;

    /* lo spazio per la barra di scorrimento, senza che le schede ci finiscano sotto */
    padding-right: var(--s1);
}

.scheda-lead-storico {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.storico-fermo { flex: 0 0 auto; }

/*
    Il modulo aperto sta nella parte ferma, ma non deve mangiarsi la colonna: oltre meta' schermo
    scorre per conto suo, e lo storico sotto resta visibile.
*/
.storico-fermo .pannello-azione {
    margin-bottom: var(--s3);
    max-height: 55vh;
    overflow-y: auto;
}

.storico-scorri {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: var(--s1);
}

/*
    Il mese resta attaccato in cima mentre si scorre: e' la risposta a "di quando e' quello che sto
    leggendo" senza dover risalire. Il fondo e' quello della pagina, altrimenti le voci sotto si
    vedrebbero in trasparenza.
*/
.storico-scorri .storico-gruppo {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0;
    padding: var(--s3) 0 var(--s2);
    background: var(--carta);
}

.coppie {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s2) var(--s3);
    margin: 0;
    font-size: var(--t-piccolo);
}

.coppie dt { color: var(--grigio); }

.coppie dd { margin: 0; }

.coppie-nota {
    display: block;
    color: var(--grigio);
    font-size: var(--t-micro);
}

.elenco-semplice {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--t-piccolo);
}

.elenco-semplice li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--s2) 0;
    border-top: 1px solid var(--riga);
}

.elenco-semplice li:first-child { border-top: 0; padding-top: 0; }

/* ---------- trattative e consiglio ---------- */

.trattativa {
    padding: var(--s2) var(--s3);
    border-radius: var(--raggio);
    border: 1px solid var(--riga);
    font-size: var(--t-piccolo);
}

.trattativa + .trattativa { margin-top: var(--s2); }

/* lo stesso verde e rosso delle righe dell'elenco, e con la stessa regola: accanto c'e' l'esito
   scritto a parole, il colore non e' mai l'unica cosa che lo dice */
.trattativa.vinta { background: var(--riga-vinta); }
.trattativa.persa { background: var(--riga-persa); }

.trattativa-testa {
    display: flex;
    justify-content: space-between;
    gap: var(--s2);
    align-items: baseline;
}

.trattativa-date {
    color: var(--grigio);
    font-size: var(--t-micro);
    margin-top: 2px;
}

/*
    Il consiglio del consulente: e' la cosa da dire alla prossima telefonata, quindi si distingue
    dal resto - un bordo verde a sinistra, non uno sfondo pieno che lo farebbe sembrare un avviso.
*/
.consiglio {
    margin-top: var(--s2);
    padding: var(--s2) var(--s3);
    border-left: 3px solid var(--verde);
    background: var(--superficie-alt);
}

.consiglio p { margin: var(--s1) 0 0; }

.consiglio-probabilita {
    float: right;
    color: var(--grigio);
}

.consiglio-dove {
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--grigio);
    margin-right: var(--s1);
}

.consiglio-motivo { color: var(--grigio); }

/* ---------- storico ---------- */

.storico {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
}

.storico-voce {
    padding: var(--s3) var(--s4);
    border-top: 1px solid var(--riga);
}

.storico-voce:first-child { border-top: 0; }

.storico-testa {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s2) var(--s3);
    font-size: var(--t-piccolo);
}

.storico-chi {
    margin-left: auto;
    color: var(--grigio);
}

/* chi deve fare la cosa da fare, accanto al tipo: e' la risposta a "tocca a me?" */
.storico-per { font-weight: 600; }

/* il pulsante per chiudere sta in fondo alla riga di testa, dopo chi ne e' responsabile */
.storico-testa .btn-piccolo { align-self: center; }

/* chi ha chiuso e quando, accanto all'etichetta dell'esito */
.storico-esito-chi {
    margin-right: var(--s1);
    font-family: var(--mono);
    font-size: var(--t-micro);
}

/* nel modulo di chiusura, la nota della voce che si sta chiudendo: e' contesto, non si modifica */
.chiusura-cosa {
    padding: var(--s2) var(--s3);
    border-left: 3px solid var(--riga);
    color: var(--grigio);
    font-size: var(--t-piccolo);
    max-height: 8em;
    overflow-y: auto;
}

.chiusura-cosa p { margin: 0; }

.chiusura-cosa ul { margin: var(--s1) 0 0; padding-left: var(--s4); }

.storico-oggetto {
    margin-top: var(--s1);
    font-weight: 600;
}

/* le note arrivano gia' spezzate in paragrafi ed elenchi da Leggibile.Formattato: gli a capo
   sono diventati <br> e <p>, quindi qui niente pre-line, che li raddoppierebbe */
.storico-note {
    margin-top: var(--s1);
    overflow-wrap: anywhere;
}

.storico-note p { margin: 0; }

.storico-note p + p,
.storico-note p + ul,
.storico-note ul + p { margin-top: var(--s2); }

.storico-note ul {
    margin: var(--s1) 0 0;
    padding-left: var(--s4);
}

.storico-note li + li { margin-top: 2px; }

.storico-note strong { font-weight: 600; }

/* l'esito resta testo semplice su una riga, accanto alla sua etichetta */
.storico-completato {
    color: var(--grigio);
    white-space: pre-line;
}

/* ---------- cronologia: filtri, gruppi, cose da fare ---------- */

.filtri-storico {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
    margin-bottom: var(--s3);
}

.filtro-storico {
    display: inline-flex;
    align-items: baseline;
    gap: var(--s1);
    padding: 3px var(--s3);
    border: 1px solid var(--riga);
    border-radius: 999px;
    background: var(--superficie);
    color: var(--inchiostro);
    font: inherit;
    font-size: var(--t-piccolo);
    cursor: pointer;
}

.filtro-storico .mono { color: var(--grigio); font-size: var(--t-micro); }

.filtro-storico:hover { background: var(--superficie-alt); }

.filtro-storico.attivo {
    background: var(--verde-tenue);
    border-color: var(--verde);
    color: var(--verde-scuro);
    font-weight: 600;
}

.filtro-storico.attivo .mono { color: var(--verde-scuro); }

/* le intestazioni dei gruppi: i mesi, gli scaduti, quelli in programma */
.storico-gruppo {
    display: flex;
    align-items: baseline;
    gap: var(--s2);
    margin: var(--s4) 0 var(--s2);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--grigio);
}

.storico-gruppo:first-of-type { margin-top: 0; }

.storico-gruppo .mono { font-weight: 400; }

.storico-gruppo.scaduto { color: var(--allarme); }

.storico-quando {
    font-size: var(--t-micro);
    color: var(--grigio);
}

/* una cosa da fare gia' scaduta: il bordo e il testo "scaduto da" la dicono insieme */
.storico-voce.scaduta {
    border-left: 3px solid var(--allarme);
}

.storico-voce.scaduta .storico-quando {
    color: var(--allarme);
    font-weight: 600;
}

.avviso-fermo {
    display: flex;
    gap: var(--s2);
    align-items: baseline;
    margin-bottom: var(--s3);
    padding: var(--s2) var(--s3);
    border: 1px solid var(--attesa);
    border-radius: var(--raggio);
    background: var(--attesa-fondo);
    color: var(--inchiostro);
    font-size: var(--t-piccolo);
}

.avviso-fermo > span { color: var(--attesa); }

/* ---------- azioni sulla scheda del lead ---------- */

.azioni-lead {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

.pannello-azione {
    margin-bottom: var(--s4);
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.pannello-azione textarea.campo { width: 100%; resize: vertical; }

.pannello-nota {
    margin: 0;
    color: var(--grigio);
    font-size: var(--t-piccolo);
}

.pannello-piede {
    display: flex;
    justify-content: flex-end;
    gap: var(--s2);
    margin-top: var(--s2);
}

/* i campi brevi uno accanto all'altro su desktop, uno sotto l'altro sul telefono */
.campi-in-fila {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--s2) var(--s3);
}

.campi-in-fila .campo { width: 100%; }

.partecipanti {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin: 0;
    padding: 0;
    border: 0;
}

.partecipanti legend { width: 100%; margin-bottom: var(--s1); padding: 0; }

/*
    Una casella da spuntare in forma di etichetta: si tocca tutta, non solo il quadratino, e
    spuntata si colora - con la spunta sempre visibile, perche' il solo colore non basta.
*/
.scelta {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    min-height: 34px;
    padding: 0 var(--s3) 0 var(--s2);
    border: 1px solid var(--riga);
    border-radius: 999px;
    background: var(--superficie);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.scelta input { margin: 0; accent-color: var(--verde); }

.scelta:has(input:checked) {
    border-color: var(--verde);
    background: color-mix(in srgb, var(--verde) 10%, var(--superficie));
    /* grassetto finto: font-weight allargherebbe la parola e spingerebbe le vicine
       sotto il puntatore. L'ombra ispessisce il tratto senza cambiare la larghezza */
    text-shadow: 0 0 .6px currentColor, 0 0 .6px currentColor;
}

.scelta:has(input:focus-visible) { outline: 2px solid var(--verde); outline-offset: 2px; }

/* "Negativa" spuntata: il rosso degli esiti persi, con la parola accanto come sempre */
.scelta-negativa input { accent-color: var(--allarme); }

.scelta-negativa:has(input:checked) {
    border-color: var(--allarme);
    background: color-mix(in srgb, var(--allarme) 8%, var(--superficie));
}

/* i due pulsanti per concludere, sotto le date della trattativa in corso */
.trattativa-azioni {
    display: flex;
    gap: var(--s2);
    margin-top: var(--s2);
}

/* un'azione secondaria dentro un modulo: un pulsante piccolo, riconoscibile come tale */
.btn-testo {
    display: inline-flex;
    align-items: center;
    height: var(--alto-controllo);
    padding: 0 var(--s2);
    border: 1px solid var(--riga);
    border-radius: var(--raggio);
    background: var(--superficie-alt);
    color: var(--verde-scuro);
    font: inherit;
    font-size: var(--t-piccolo);
    font-weight: 500;
    cursor: pointer;
}

.btn-testo:hover { background: var(--superficie); border-color: var(--grigio-tenue); }

/* dove: l'indirizzo prende lo spazio, "In ufficio" gli sta accanto */
.dove {
    display: flex;
    align-items: flex-end;
    gap: var(--s3);
}

.dove-campo {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s1);
}

.dove-campo .campo { width: 100%; }

.dove-ufficio { min-height: 40px; display: flex; align-items: center; }

.dove > .scelta { min-height: 40px; }

.chiedi-risposta { align-self: flex-start; }

/* i numeri da chiamare: grandi abbastanza da toccarli col pollice */
.numeri {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
}

.numeri .btn {
    display: inline-flex;
    gap: var(--s2);
    align-items: baseline;
    min-height: 40px;
}

/* il titolo dentro un pannello: stesso aspetto dei gruppi dello storico, ma non si attacca in cima */
.pannello-titolo {
    margin: var(--s2) 0 0;
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--grigio);
}

/* ---------- notifiche: elenco a sinistra, la notifica aperta a destra ---------- */

.contenuto:has(.notifiche) { overflow-y: auto; }

.notifiche {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--s4);
    align-items: start;
}

.notifiche-elenco { display: flex; flex-direction: column; gap: var(--s2); }

.notifiche-elenco > .campo { max-width: 240px; }

.notifiche-voci { list-style: none; margin: 0; padding: 0; }

.notifiche-riga { display: flex; align-items: center; gap: var(--s1); }

.notifiche-riga .notifiche-voce { flex: 1 1 auto; min-width: 0; }

.notifiche-voce {
    display: flex;
    flex: 1 1 auto;
    gap: var(--s3);
    align-items: baseline;
    padding: var(--s2) var(--s3);
    border-radius: 4px;
    color: var(--inchiostro);
    text-decoration: none;
}

.notifiche-voce:hover { background: var(--superficie-alt); }

.notifiche-voce.aperta { background: var(--superficie); box-shadow: inset 3px 0 0 var(--verde); }

/* non letta: in grassetto; il puntino non basterebbe a chi non distingue i colori */
.notifiche-voce.non-letta .notifiche-oggetto { font-weight: 600; }

.notifiche-ora { flex: 0 0 auto; color: var(--grigio); font-size: var(--t-micro); }

.notifiche-oggetto { min-width: 0; overflow-wrap: anywhere; }

/* la notifica aperta resta in vista mentre si scorre l'elenco */
.notifiche-aperta { position: sticky; top: 0; }

.notifiche-data { color: var(--grigio); font-size: var(--t-micro); }

.notifiche-titolo { margin: var(--s1) 0 var(--s3); font-size: var(--t-grande, 1.15rem); }

.notifiche-testo { overflow-wrap: anywhere; }

@media (max-width: 900px) {
    .notifiche { grid-template-columns: minmax(0, 1fr); }

    /* sul telefono la notifica aperta va sopra: e' quella che si e' toccata */
    .notifiche-aperta { position: static; order: -1; }
}

/* ---------- mappa ---------- */

.contenuto:has(.mappa-pagina) { display: flex; flex-direction: column; overflow: hidden; }

.mappa-pagina { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: var(--s2); }

.mappa-testa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2) var(--s4);
}

.mappa-testa .pagina-testa { margin: 0; }

.mappa-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }

.mappa-scelta .mono { color: var(--grigio); font-size: var(--t-micro); font-weight: 400; }

/* il segno ha la forma del punto sulla mappa, e accanto c'e' sempre la parola */
.mappa-segno {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1.5px solid #fff;
    box-shadow: 0 0 0 1px var(--riga);
}

.mappa-cliente .mappa-segno { background: #2f6b33; }
.mappa-incorso .mappa-segno { background: #b07c00; }
.mappa-persa .mappa-segno { background: #a3231b; }
.mappa-contattare .mappa-segno { background: #7b837d; }

.mappa {
    flex: 1 1 auto;
    min-height: 360px;
    border: 1px solid var(--riga);
    border-radius: 6px;
    background: var(--superficie-alt);
}

/* la scheda sopra il punto: e' dentro Google, quindi colori fissi e non i temi */
.mappa-scheda { font-family: inherit; font-size: 13px; color: #16211c; max-width: 260px; line-height: 1.4; }

.mappa-titolo { font-weight: 700; font-size: 14px; }

.mappa-errore { max-width: 640px; margin: var(--s6, 48px) auto; }

.mappa-famiglia { font-weight: 600; margin: 2px 0 6px; }

.mappa-riga { margin-top: 2px; overflow-wrap: anywhere; }

.mappa-etichetta { color: #5c665f; margin-right: 6px; }

.mappa-nota { margin-top: 6px; color: #5c665f; font-size: 12px; }

@media (max-width: 900px) {
    .contenuto:has(.mappa-pagina) { overflow-y: auto; }

    .mappa { min-height: 70vh; }
}

/* ---------- tabella compatta e riga dei totali ---------- */

/*
    La tabella compatta sta dentro una scheda o accanto a un grafico: il bordo e il fondo li ha
    gia' chi la contiene, e un secondo riquadro dentro il primo farebbe solo una cornice in piu'.
    Niente altezza massima: sono poche righe, e una barra di scorrimento dentro una scheda che
    scorre gia' con la pagina e' il doppio scorrimento che il layout evita altrove.
*/
.tabella-compatta .tabella-scorri {
    max-height: none;
    overflow-x: auto;
    overflow-y: visible;
}

.tabella-compatta .tabella tbody td { padding: var(--s1) var(--s3); }

/* il piede della compatta porta solo il conteggio e il pulsante Colonne: nessun fondo a fascia */
.tabella-compatta .paginazione {
    padding: var(--s1) 0 0;
    border-top: 0;
    background: none;
}

.tabella-compatta .menu-colonne {
    margin-top: var(--s2);
    border: 1px solid var(--riga);
    border-radius: var(--raggio);
}

/*
    I totali in fondo: stessa griglia delle righe, separati da una riga piena e in grassetto,
    cosi' non si leggono come l'ultima riga dei dati. La parola "Totale" e' un <th> di riga, e
    il browser lo centrerebbe: qui torna a sinistra come le celle di testo sopra.
*/
.tabella tfoot .riga-totali th,
.tabella tfoot .riga-totali td {
    padding: var(--s1) var(--s3);
    border-top: 2px solid var(--riga);
    font-weight: 700;
    color: var(--inchiostro);
    background: var(--superficie-alt);
    text-align: left;
    white-space: nowrap;
}

.tabella tfoot .riga-totali .n { text-align: right; }

/*
    Il tasto "Colonne" delle tabelle: l'unica eccezione all'altezza unica dei controlli, chiesta il
    22/09/2026. Si usa di rado e sta in ogni elenco: piu' basso, pesa meno sulla riga della paginazione.
*/
.btn.tabella-colonne-tasto {
    height: 24px;
    padding: 0 var(--s2);
    font-size: var(--t-piccolo);
}

/* ---------- punteggio del cliente ---------- */

/* elenco dei siti, elenco dei lead, scheda del lead: il numero apre il conto nel dialogo */
.link-punteggio {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.link-punteggio:hover { color: var(--link-sopra); text-decoration-thickness: 2px; }