/*
    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;
    gap: 3px;
    padding: 1px var(--s1);
    /*
        il carattere del testo e non il monospaziato (29/09/2026): nelle parole ("in attesa della
        banca", "scaduto da 2 g") il mono lasciava spazi fra le lettere. Le cifre restano incolonnate
        con tabular-nums. Scritto e non ereditato: la cella intorno puo' essere mono (le colonne numeriche).
    */
    font-family: var(--testo);
    font-variant-numeric: tabular-nums;
    font-size: var(--t-piccolo);
    line-height: 1.5;
    border-radius: var(--raggio);
    white-space: nowrap;
}

/*
    La larghezza da colonna (62px, allineato a destra) solo nelle celle delle tabelle, dove i numeri
    fanno colonna. Fuori - nelle coppie etichetta/valore, dentro una frase - lasciava uno spazio
    vuoto davanti ("Spazio      11 %"), e il valore sembrava sfalsato.
*/
.tabella td .giorni {
    justify-content: flex-end;
    min-width: 62px;
}

/* nella tabellina di un riquadro il valore sta a sinistra accanto all'etichetta: niente colonna */
.tabella td .riquadro-lato .giorni {
    justify-content: flex-start;
    min-width: 0;
}

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

/* in una colonna della tabella data e giorni restano su una riga: a capo raddoppiavano l'altezza di tutta la riga */
.tabella:not(.tabella-riquadri) td .giorni-con-data { flex-wrap: nowrap; }

/*
    Le azioni di riga: icone, e una tendina con le stesse azioni quando la tabella e' troppo
    stretta per mostrarle (wk.js mette .stretta sulla tabella e riempie la tendina).
*/
.azioni-tendina { display: none; }

.tabella.stretta .azioni-riga > :not(.azioni-tendina) { display: none; }

/* una riga per voce (la fatturazione come WK): la tabella scorre di lato comunque, le icone restano icone */
.tabella.una-riga.stretta .azioni-riga > :not(.azioni-tendina) { display: revert; }

.tabella.una-riga.stretta .azioni-riga > .azioni-tendina { display: none; }

.tabella.stretta .azioni-riga > .azioni-tendina {
    display: inline-block;
    width: auto;
}

/* la data nello stesso carattere del testo intorno (sta dentro frasi e accanto a nomi), cifre tabulari; dal
   badge dei giorni si stacca di 8px (04/10/2026, il committente: a 4px data e badge sembravano attaccati) */
.giorni-con-data > .giorni-data { margin-right: var(--s2); font-variant-numeric: tabular-nums; }

/* "(0 g)" e' un pezzo solo: se non ci sta va a capo tutto, mai la parentesi da sola */
.giorni-parentesi { display: inline-flex; align-items: baseline; white-space: nowrap; }

.giorni-con-data .giorni,
.tabella td .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;
}

/* un numero che apre un documento (la proforma nell'elenco dei pagamenti): sottolineato come un link, anche quando e' un pulsante */
.numero-proforma {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--link, inherit);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.numero-proforma[disabled] { cursor: progress; opacity: .6; }

.numero-proforma .icona.glifo { margin-right: .15em; }

/* l'icona di scarica davanti al nome del file o alla parola del pulsante */
a > .icona.glifo:first-child,
.btn > .icona.glifo:first-child { margin-right: .3em; }

/*
    I segni disegnati accanto a uno stato (29/09/2026): la clessidra di cio' che e' scaduto e la
    spunta. Grandi quanto il testo e un po' di piu', sulla sua linea, col suo colore.
*/
.icona.glifo {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.25em;
    stroke-width: 1.6;
    flex: none;
}

.giorni .segno .icona.glifo { width: 1.6em; height: 1.6em; vertical-align: -0.45em; }

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

/* il corpo delle tabelle un pixel sotto il testo della pagina (25/09/2026): sono righe fitte, e a
   15px ogni cella andava a capo prima. L'intestazione ha la sua misura e resta com'e' */
.tabella {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--t-piccolo);

    /*
        Il fondo e' quello delle schede, anche quando la tabella sta sul fondo della pagina: le righe
        dispari sono trasparenti, e su un fondo pagina scuro (gli stili grigi, Windows 95) l'elenco
        diventava a strisce scure e chiare che non si leggevano.
    */
    background: var(--superficie);
}

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

/*
    I paragrafi dentro una cella (i testi formattati, Leggibile.Formattato) non hanno il margine sopra
    del browser: il testo parte in alto come le altre celle della riga, non 16px piu' giu'.
*/
.tabella td p { margin: 0 0 var(--s1); }

.tabella td p:last-child { margin-bottom: 0; }

/*
    Il nome della riga in un <th scope="row"> (le spunte di un utente, le notifiche) e' una cella come le
    altre: stesso spazio, stesso filo, stesso fondo a righe alterne e sotto il puntatore. Le regole del
    corpo che dicevano solo td lasciavano il th senza fondo, e la riga veniva a scacchi (05/10/2026).
    Il :where tiene il peso di "td": le regole delle pagine che correggono le celle vincono come prima.
*/
.tabella tbody td,
.tabella tbody th:where([scope="row"]) {
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--riga);
    vertical-align: top;
    text-align: left;
}

.tabella tbody tr:last-child td,
.tabella tbody tr:last-child th:where([scope="row"]) { 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.
*/
/*
    Larga quanto i pulsanti che contiene (02/10/2026): width 1% con il testo che non va a capo e' il
    modo di dire a una tabella "il minimo che ti serve". Vale per la colonna del cestino e per ogni
    colonna dichiarata Stretta.
*/
.colonna-azioni,
.colonna-stretta {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* sul telefono i pulsanti uno sotto l'altro: in fila allargavano la tabella oltre lo schermo */
@media (max-width: 900px) {
    .colonna-azioni,
    .colonna-stretta { white-space: normal; }
}

/* le icone di una riga una accanto all'altra; nei riquadri in fila nella testata, accanto al nome */
.azioni-riga {
    display: flex;
    justify-content: flex-end;
    gap: var(--s1);
    white-space: nowrap;
}

.tabella .elimina {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--alto-controllo) - 2px);
    height: calc(var(--alto-controllo) - 2px);
    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 - le azioni come il cestino - ha la stessa
    misura e lo stesso aspetto: quadrato e alto quanto ogni altro pulsante (--alto-controllo), cosi'
    accanto a "Oggi" o a "Salva" non sembra un pulsante di serie B. Diventa verde al passaggio, il
    cestino rosso. Anche la matita della modifica in linea (29/09/2026: prima era un'icona nuda).
*/
.tabella .btn:not(.elimina):has(> .icona:not(.glifo):only-child) {
    width: calc(var(--alto-controllo) - 2px);
    height: calc(var(--alto-controllo) - 2px);
    padding: 0;
    justify-content: center;
    border: 1px solid var(--riga);
    background: var(--superficie);
    color: var(--grigio-tenue);
}

.tabella .btn:not(.elimina):has(> .icona:not(.glifo):only-child):hover:not([disabled]),
.tabella .btn:not(.elimina):has(> .icona:not(.glifo):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:not(.glifo):only-child) {
    width: 1%;
    padding-right: var(--s1);
}

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

/*
    Fuori dalle tabelle vale lo stesso: ogni pulsante fatto di sola icona - le azioni di una voce,
    modifica, chiudi, sposta, rispondi, elimina - ha in tutto il sistema la misura e l'aspetto del
    cestino: quadrato, alto quanto gli altri pulsanti. Il :where lascia
    la precedenza a un componente che ne vuole uno suo (il calendario della scelta del giorno), e
    la campanella in alto ne resta fuori: e' un comando della barra, non un'azione di una voce.
*/
/*
    L'avviso dei ritardi della propria coda, accanto alla campanella (RitardiCoda): rosso, col
    numero, e il triangolo che lampeggia finche' ce ne sono. Chi ha chiesto meno movimento lo
    vede fermo: il rosso e il numero bastano.
*/
/*
    Icona a sinistra e numero a destra: il disegno dell'icona ha gia' un po' d'aria dentro il suo
    riquadro, quindi con lo stesso padding il lato dell'icona sembrava piu' largo. Dal lato
    dell'icona 4px, dall'altro 8: a occhio lo spazio e' uguale. Vale anche per i pagamenti.
*/
.btn.ritardi-coda {
    gap: var(--s1);
    padding: 0 var(--s2) 0 var(--s1);
    color: var(--allarme);
    border: 1px solid var(--allarme);
    background: var(--allarme-fondo);
    font-weight: 700;
}

.btn.ritardi-coda:hover { color: var(--allarme); text-decoration: none; }

.ritardi-coda.ci-sono .icona,
.ritardi-pagamenti .icona { animation: ritardi-lampeggia 1.1s ease-in-out infinite; }

@keyframes ritardi-lampeggia {
    50% { opacity: .15; }
}

@media (prefers-reduced-motion: reduce) {
    .ritardi-coda.ci-sono .icona,
    .ritardi-pagamenti .icona { animation: none; }
}

/* i pagamenti in ritardo: giallo, e lampeggia anche lui; non sono lavoro di chi guarda ma vanno visti */
.btn.ritardi-pagamenti {
    gap: var(--s1);
    padding: 0 var(--s2) 0 var(--s1);
    color: var(--attesa);
    border: 1px solid var(--attesa);
    background: var(--attesa-fondo);
    font-weight: 700;
}

.btn.ritardi-pagamenti:hover { color: var(--attesa); text-decoration: none; }

/* nell'elenco dei ritardi: sotto il titolo cosa e', a destra da quanti giorni e' in ritardo */
.ritardi-dettaglio { display: block; color: var(--grigio); font-size: var(--t-micro); }

.ritardi-quanto { color: var(--allarme); font-weight: 700; }

/*
    Il pulsante di sola icona e' quadrato. "Sola" vuol dire senza parola accanto: il CSS non conta il
    testo fra i figli, quindi un'icona seguita da "Proforma" risultava :only-child e il pulsante si
    stringeva a un quadrato tagliando la parola (02/10/2026). L'icona accanto a una parola e' sempre
    .glifo: quella si esclude, qui e in Stili.
*/
.btn:where(:has(> .icona:not(.glifo):only-child):not(.campanella-pulsante)) {
    width: calc(var(--alto-controllo) - 2px);
    height: calc(var(--alto-controllo) - 2px);
    padding: 0;
    justify-content: center;
    border: 1px solid var(--riga);
    background: var(--superficie);
    color: var(--grigio-tenue);
}

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

.btn.elimina:where(:has(> .icona:not(.glifo):only-child)):hover:not([disabled]),
.btn.elimina:where(:has(> .icona:not(.glifo):only-child)):focus-visible {
    color: var(--allarme);
    background: var(--allarme-fondo);
}

/* il pulsante-icona acceso: il modulo che apre e' aperto */
.btn:where(:has(> .icona:not(.glifo):only-child):not(.campanella-pulsante))[aria-expanded="true"],
.btn:where(:has(> .icona:not(.glifo):only-child):not(.campanella-pulsante))[aria-pressed="true"] {
    /* il testo che si legge sull'accento (--su-accento): bianco sul verde, scuro sull'accento chiaro dei temi scuri */
    color: var(--su-accento);
    background: var(--verde);
    border-color: var(--verde);
}

/* l'icona segue il colore del pulsante, non ne ha uno suo */
.icona { display: block; }

/* l'icona non si schiaccia mai per far posto (16/10/2026): un pulsante troppo stretto la riduceva a un puntino */
.btn > .icona { flex-shrink: 0; }
/*
    Una riga si' e una no appena piu' scura: su venticinque righe larghe l'occhio segue la riga
    fino in fondo senza perdersi. Sotto il puntatore il verde tenue, che si distingue da tutte e due.
*/
:where(.tabella:not(.tabella-riquadri)) tbody tr:nth-child(even) td,
:where(.tabella:not(.tabella-riquadri)) tbody tr:nth-child(even) th:where([scope="row"]) { background: var(--riga-alterna); }

/*
    Voci su due righe (Colonna.Sotto, 29/09/2026): l'alternanza e' per voce e non per riga, e fra la
    riga di sopra e quella di sotto della stessa voce non c'e' divisorio.
*/
.tabella.con-sotto tbody tr td { background: none; }

.tabella.con-sotto tbody tr.riga-alterna td { background: var(--riga-alterna); }

/* le due righe della stessa voce si accendono insieme sotto il puntatore */
.tabella.con-sotto tbody tr.riga-sopra:hover td,
.tabella.con-sotto tbody tr.riga-sopra:hover + tr.riga-sotto td,
.tabella.con-sotto tbody tr.riga-sopra:has(+ tr.riga-sotto:hover) td,
.tabella.con-sotto tbody tr.riga-sotto:hover td { background: var(--verde-tenue); }

.tabella.con-sotto tbody tr.riga-sopra > td:not([rowspan="2"]) { border-bottom: 0; padding-bottom: var(--s1); }

.tabella.con-sotto tbody tr.riga-sotto > td { padding-top: 0; }

.riga-sotto-voci {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s1) var(--s4);
    font-size: var(--t-piccolo);
}

.riga-sotto-voce { min-width: 0; }

/* le tabelle a elenco con una riga per voce (Tabella.UnaRiga): ogni cella su una riga sola */
.tabella.una-riga td { white-space: nowrap; }

.tabella.una-riga td :is(div, span) { white-space: nowrap; }

/*
    L'anteprima della firma delle email (05/10/2026, Dati personali e Utenti > Dati): la firma vera,
    in un iframe sandbox senza script. Il fondo chiaro di un programma di posta, anche con uno stile
    scuro, lo mette la pagina dell'anteprima (UtentiController.AnteprimaFirma). Alta il giusto, si
    allunga dall'angolo.
*/
.anteprima-firma {
    display: block;
    width: 100%;
    height: 180px;
    resize: vertical;
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio);
}

/* il nome interno di un permesso, accanto al suo titolo (Utenti > Permessi, 05/10/2026): piccolo e grigio */
.permesso-codice {
    color: var(--grigio);
    font-size: var(--t-micro);
}

/* a che punto e' il progetto sta nella scheda e nei riquadri: nell'elenco allungava ogni riga */
.tabella:not(.tabella-riquadri) .a-che-punto { display: none; }

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

.tabella tbody tr:hover td,
.tabella tbody tr:hover th:where([scope="row"]) { background: var(--verde-tenue); }

/*
    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 :is(td, th:where([scope="row"])) { background: var(--riga-vinta); }
.tabella tbody tr.persa :is(td, th:where([scope="row"])) { background: var(--riga-persa); }

/* sotto il puntatore vince sempre l'evidenza della riga: si deve capire dove si e' */
.tabella tbody tr.vinta:hover :is(td, th:where([scope="row"])),
.tabella tbody tr.persa:hover :is(td, th:where([scope="row"])) { background: var(--verde-tenue); }

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

/*
    Nelle tabelle un carattere solo, quello del testo (29/09/2026): numeri, date e importi in mono
    accanto ai nomi in Archivo facevano due tabelle in una. Le cifre restano incolonnate con
    tabular-nums. Vale per le celle, le intestazioni, la tabellina e la riga di sotto.
*/
.tabella :is(th, td, .mono, .num) {
    font-family: var(--testo);
    font-variant-numeric: tabular-nums;
}

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

/* il trascinamento delle colonne (26/10/2026): la presa tenue, la riga verde dalla parte dove finira' */
.tabella th[draggable="true"] { user-select: none; }
.tabella th.colonna-trascinata { opacity: .45; }
.tabella th.colonna-arrivo-prima { box-shadow: inset 3px 0 0 var(--verde); }
.tabella th.colonna-arrivo-dopo { box-shadow: inset -3px 0 0 var(--verde); }

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

/* "Ordina per" su una riga sola: a larghezza tablet la tendina lo stringeva e andava a capo (05/10/2026) */
.riquadro-ordina-etichetta {
    flex: none;
    white-space: nowrap;
    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);
}

/* il filtro sempre in vista prende lo spazio che avanza; Filtri sta in fondo a destra (07/10/2026) */
.riquadro-cerca { flex: 1 1 16rem; min-width: 12rem; }

/* con la ricerca in vista la barra va a capo: i filtri attivi stanno sulla riga sotto, non schiacciano la casella */
.riquadro-ordina:has(.riquadro-cerca) { flex-wrap: wrap; }

.riquadro-cerca .campo { width: 100%; font-size: var(--t-piccolo); }

.riquadro-cerca + .riquadro-filtri-pulsante,
.riquadro-cerca + .riquadro-filtri-pulsante + .filtri-accanto { margin-left: 0; }

.riquadro-ordina:has(.riquadro-cerca) .riquadro-filtri-pulsante { order: 1; }

.riquadro-ordina:has(.riquadro-cerca) .filtri-accanto { order: 2; flex-basis: 100%; }

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

    /* una voce larga lascia un buco a destra di quella prima: lo riempie la prossima che ci sta */
    grid-auto-flow: row dense;
}

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

/* l'etichetta in maiuscolo, 2px piu' piccola del valore e un po' piu' marcata: si separa da lui senza colonne larghe */
.riquadro-coppia dt {
    color: var(--grigio);
    font-size: calc(var(--t-piccolo) - 2px);
    text-transform: uppercase;
    letter-spacing: normal;
    font-weight: 500;
}

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

/* "Colonne" in fondo alle tabelle: piccolo, e' una regolazione e non un'azione del lavoro */
.btn.btn-colonne {
    height: auto;
    min-height: 0;
    padding: 2px var(--s2);
    font-size: var(--t-micro);
}

/* il nome di un processo di lavoro si scrive in maiuscolo dappertutto, come nella scheda del progetto */
.nome-processo { text-transform: uppercase; letter-spacing: .03em; }

/* i siti di un lead, uno per riga se sono piu' d'uno */
.siti-lead { display: flex; flex-direction: column; align-items: flex-start; }

/*
    Una voce lunga (la descrizione dell'AI) prende tutta la riga della tabellina. Solo se ha
    qualcosa da dire: "non valutato" su tutta la riga era mezza riga vuota.
*/
.riquadro-coppia-larga,
.riquadro-coppia[data-larga] { grid-column: 1 / -1; }

.riquadro-coppia-larga:has(> dd > :is(.coppie-nota, .siti-nota):only-child) { grid-column: auto; }

.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, sotto la testata: le voci una sotto l'altra */
.riquadro-voce + .riquadro-voce { margin-top: var(--s2); }

/*
    Ogni riga a riquadri e' una scheda: la testata col nome e le azioni, e sotto i dati. Fra una
    scheda e l'altra una striscia del colore della pagina, cosi' si vede dove finisce un lead e
    comincia il successivo. Il passaggio del puntatore non colora niente: su una scheda alta mezza
    pagina sarebbe solo un lampo di colore a ogni movimento.
*/
.tabella-riquadri tbody.riquadro + tbody.riquadro .riquadro-intesta td { border-top: var(--s3) solid var(--carta); }

.tabella-riquadri .riquadro-intesta td {
    padding: var(--s2) var(--s3);
    background: var(--testa-scheda);
    border-bottom: 1px solid var(--riga);
}

.tabella-riquadri tbody tr:hover td { background: none; }

.tabella-riquadri tbody tr.riquadro-intesta:hover td { background: var(--testa-scheda); }

/*
    Le azioni vanno a capo sotto il nome quando accanto non c'e' posto (29/09/2026): prima il nome si
    stringeva fino a pochi pixel e le icone gli finivano sopra, a meta' larghezza fra telefono e tablet,
    dove la tabella non scorre ancora e la tendina "Azioni" non scatta.
*/
.riquadro-intesta-dentro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2) var(--s3);
}

/* il nome e accanto le cose da sapere subito (stato, prossima azione); vanno a capo se non ci stanno */
/*
    Centrati e non sulla linea di base (28/09/2026): con una foto nella testata ("Foto" e l'immagine
    tonda degli utenti) la linea di base finiva in fondo all'immagine e le etichette scendevano.
*/
.riquadro-intesta-dati {
    display: flex;
    flex: 1 1 14rem;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s1) var(--s4);
    min-width: 0;
}

/*
    Sul fondo grigio della testata i fondi chiari delle etichette (rosa, giallo, verde) si
    confondevano (29/09/2026): un bordo del loro stesso colore le stacca, senza cambiarle.
*/
.riquadro-intesta .stato:not(:is(.stato-fatto, .stato-attesa, .stato-allarme, [class*="scala-"])) { background: var(--superficie); }

.riquadro-intesta :is(.stato, .giorni) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 45%, transparent);
}

.riquadro-nome {
    min-width: 0;
    font-size: var(--t-medio);
    font-weight: 700;
}

.riquadro-segno { display: inline-flex; align-items: center; font-size: var(--t-piccolo); white-space: nowrap; }

.riquadro-segno-nome { margin-right: var(--s1); color: var(--grigio); }

/* il nome di una colonna che porta da qualche parte (Colonna.LinkNome): sottolineato come ogni link */
.nome-colonna-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.nome-colonna-link:hover { color: var(--link); }

/* vinte e perse: la tinta sulla testata, dove sta il nome; la colonna Esito lo scrive a parole */
.tabella-riquadri tbody.vinta .riquadro-intesta td,
.tabella-riquadri tbody.vinta tr.riquadro-intesta:hover td { background: var(--riga-vinta); }

.tabella-riquadri tbody.persa .riquadro-intesta td,
.tabella-riquadri tbody.persa tr.riquadro-intesta:hover td { background: var(--riga-persa); }

/* il corpo: la tabellina e lo storico si separano con una riga verticale, non con lo spazio */
.tabella-riquadri .riquadro-corpo td { padding-top: var(--s3); padding-bottom: var(--s3); }

.tabella-riquadri .riquadro-corpo .riquadro-lato-cella + td { border-left: 1px solid var(--riga); }

/*
    Lo storico accanto alla tabellina e' alto quanto lei: la riga la decide la tabellina, e lo
    storico riempie quello spazio e scorre dentro di se' (UltimiContattiScorrono). Le voci si
    caricano finche' lo riempiono, poi scorrendo. Con una tabellina corta, o nessuna, almeno 10rem.

    Anche con altre voci sopra e sotto (26/09/2026: nei siti il nome del lead, la ragione sociale, la
    colonna dell'ordinamento): le voci stanno in .riquadro-voci, una colonna flessibile che riempie la
    cella, e lo storico prende quello che resta. Prima valeva solo con lo storico da solo, e con altre
    voci si srotolava tutto o restava corto a meta'.
*/
.tabella-riquadri .riquadro-titolo-cella:has(> .riquadro-voci .contatti-scorrono) {
    position: relative;
    height: 10rem;
}

/*
    Una larghezza vera per lo storico (04/10/2026). Le voci stanno in position absolute, quindi per la
    tabella la cella e' vuota; e la cella copre due colonne (la seconda e quella delle azioni
    dell'intestazione), dove un width non conta. Tutto lo spazio andava alla tabellina: nella Coda dei
    progetti lunga quanto lo schermo, una coppia per riga, con gli aggiornamenti schiacciati in 25px sul
    bordo. Questo blocco vuoto e' il contenuto minimo della cella: lo schermo meno il menu e una
    tabellina larga (640px con i margini), cosi' su uno schermo grande lo spazio va allo storico e su
    uno piccolo la tabella non sborda.
*/
.tabella-riquadri .riquadro-titolo-cella:has(> .riquadro-voci .contatti-scorrono)::before {
    content: '';
    display: block;
    width: max(16rem, calc(100vw - var(--laterale) - 640px));
}

.tabella-riquadri .riquadro-titolo-cella > .riquadro-voci:has(.contatti-scorrono) {
    position: absolute;
    inset: var(--s3);
    display: flex;
    flex-direction: column;
}

.tabella-riquadri .riquadro-voci > .riquadro-voce { flex: none; }

.tabella-riquadri .riquadro-voci > .riquadro-voce:has(> .contatti-scorrono) { flex: 1 1 0; min-height: 4rem; }

.tabella-riquadri .riquadro-voci .riquadro-voce > .contatti-scorrono { height: 100%; max-height: none; }

/*
    Sul telefono la tabellina e lo storico uno sotto l'altro: affiancati la scheda era larga il
    doppio dello schermo, e lo storico si leggeva scorrendo di lato una riga alla volta.
*/
@media (max-width: 700px) {
    .tabella-riquadri,
    .tabella-riquadri thead,
    .tabella-riquadri tbody,
    .tabella-riquadri tr,
    .tabella-riquadri th,
    .tabella-riquadri td { display: block; width: auto; }

    .tabella-riquadri thead tr.riga-filtri { display: flex; flex-direction: column; }

    .riquadro-ordina { flex-wrap: wrap; }

    .riquadro-ordina select.campo { min-width: 0; flex: 1 1 auto; }

    .tabella-riquadri .riquadro-corpo .riquadro-lato-cella + td { border-left: 0; border-top: 1px solid var(--riga); }

    /*
        Le colonne del riquadro, una sotto l'altra, col loro nome davanti come nella tabellina
        (29/09/2026): prima erano numeri e spunte in fila senza dire di cosa.
    */
    .tabella-riquadri .riquadro-corpo > td.riquadro-in-colonna {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: var(--s3);
        padding-top: var(--s1);
        padding-bottom: var(--s1);
        border-top: 1px solid var(--riga);
    }

    .tabella-riquadri .riquadro-corpo > td.riquadro-in-colonna::before {
        content: attr(data-etichetta);
        flex: none;
        font-family: var(--testo);
        font-size: var(--t-micro);
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--grigio);
    }

    /* uno sotto l'altro non c'e' una tabellina accanto da cui prendere l'altezza: si torna al massimo fisso */
    .tabella-riquadri .riquadro-titolo-cella:has(> .riquadro-voci .contatti-scorrono) { height: auto; }

    .tabella-riquadri .riquadro-titolo-cella > .riquadro-voci:has(.contatti-scorrono) { position: static; display: block; }

    .tabella-riquadri .riquadro-voci .riquadro-voce > .contatti-scorrono { height: auto; max-height: 28rem; }
}

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

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

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

/* nella barra dell'ordine e accanto a una ricerca: sulla stessa riga, niente spazio sotto */
.filtri-accanto { margin-bottom: 0; }

/* sopra la tabella a elenco: centrati nella loro fascia, lo stesso spazio sopra e sotto (29/09/2026) */
.filtri-sopra { margin: 0; padding: var(--s2) 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;
}

/*
    Nei badge solo le parole (05/10/2026, il committente: "togli icona nel badge e puntino"): la clessidra,
    il puntino e gli altri segni davanti al testo non si disegnano piu'. Restano nel markup, nascosti allo
    screen reader come prima: chi legge con lo screen reader ha gia' la parola ("scaduta", "oggi").
*/
.stato > [aria-hidden="true"]:first-child:has(> .icona, > svg),
.stato > [aria-hidden="true"]:first-child:is(:empty, :not(:has(*))),
.giorni > .segno { display: none; }

/*
    La scala del ritardo (--scala-1..6): la classe va su un .stato. Dal quarto gradino il testo e'
    in grassetto, all'ultimo il fondo e' pieno e pulsa piano, come il "blinking" di WK - salvo per
    chi ha chiesto meno animazioni. La parola c'e' sempre: il colore dice quanto, non cosa.
*/
.stato.scala-1 { color: var(--scala-1); background: var(--scala-1-fondo); }
.stato.scala-2 { color: var(--scala-2); background: var(--scala-2-fondo); }
.stato.scala-3 { color: var(--scala-3); background: var(--scala-3-fondo); }
.stato.scala-4 { color: var(--scala-4); background: var(--scala-4-fondo); font-weight: 700; }
.stato.scala-5 { color: var(--scala-5); background: var(--scala-5-fondo); font-weight: 700; }
.stato.scala-6 { color: var(--scala-6); background: var(--scala-6-fondo); font-weight: 700; animation: scala-pulsa 1.6s ease-in-out infinite; }

@keyframes scala-pulsa { 50% { opacity: .72; } }

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

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

/*
    Il tipo di una voce dello storico (e lo stato del lead) ha il suo colore, come in WK e come nel
    calendario: blu l'appuntamento, ambra il richiamo, viola l'appunto da confermare, verde quello
    che e' andato a segno, rosso quello che e' andato male. Note, email e "Ok" restano neutri:
    colorare tutto vorrebbe dire non evidenziare niente. La parola c'e' sempre, il colore aiuta.
*/
.stato[data-voce] { color: var(--grigio); background: var(--superficie-alt); box-shadow: inset 0 0 0 1px var(--riga); }

.stato[data-voce="Appuntamento"] { color: var(--voce-appuntamento-testo, var(--blu)); background: var(--voce-appuntamento); box-shadow: none; }

.stato[data-voce="Appunti"] { color: var(--voce-appunto-testo, var(--grigio)); background: var(--voce-appunto); }

.stato[data-voce="Richiamare"],
.stato[data-voce="DaChiamare"] { color: var(--voce-richiamo-testo, var(--attesa)); background: var(--voce-richiamo); box-shadow: none; }

.stato[data-voce="AppuntiDaConfermare"] { color: var(--voce-confermare-testo, var(--viola)); background: var(--voce-confermare); box-shadow: none; }

.stato[data-voce="Telefonata"],
.stato[data-voce="Contratto"],
.stato[data-voce="EmailCliccata"] { color: var(--fatto); background: var(--fatto-fondo); box-shadow: none; }

/* un appuntamento o un richiamo andato in porto: verde come le telefonate, con la spunta davanti */
.stato[data-voce][data-fatta] { color: var(--voce-appunto-fatto-testo, var(--fatto)); background: var(--voce-appunto-fatto); box-shadow: none; }

.stato[data-voce="Richiamare"][data-fatta] { color: var(--voce-richiamo-fatto-testo, var(--fatto)); background: var(--voce-richiamo-fatto); }

.stato[data-voce="Appuntamento"][data-fatta] { color: var(--voce-appuntamento-fatto-testo, var(--fatto)); background: var(--voce-appuntamento-fatto); }

/*
    La riga di testa di ogni voce dello storico, tinta del colore della sua famiglia (28/09/2026): a
    meta' col fondo della riga, perche' l'etichetta dentro resti distinta. Le altre voci (telefonate,
    email) restano sul fondo di sempre.
*/
:is(.storico-testa, .contatto-testa)[data-voce="Appunti"] { background: color-mix(in srgb, var(--voce-appunto) 55%, var(--testa-voce)); }

:is(.storico-testa, .contatto-testa)[data-voce="Richiamare"] { background: color-mix(in srgb, var(--voce-richiamo) 55%, var(--testa-voce)); }

:is(.storico-testa, .contatto-testa)[data-voce="Appuntamento"] { background: color-mix(in srgb, var(--voce-appuntamento) 55%, var(--testa-voce)); }

:is(.storico-testa, .contatto-testa)[data-voce="AppuntiDaConfermare"] { background: color-mix(in srgb, var(--voce-confermare) 55%, var(--testa-voce)); }

:is(.storico-testa, .contatto-testa)[data-voce="AppuntiDaConfermare"][data-fatta] { background: color-mix(in srgb, var(--voce-appunto-fatto) 55%, var(--testa-voce)); }

:is(.storico-testa, .contatto-testa)[data-voce="Richiamare"][data-fatta] { background: color-mix(in srgb, var(--voce-richiamo-fatto) 55%, var(--testa-voce)); }

:is(.storico-testa, .contatto-testa)[data-voce="Appuntamento"][data-fatta] { background: color-mix(in srgb, var(--voce-appuntamento-fatto) 55%, var(--testa-voce)); }

.stato[data-voce="NonInteressato"],
.stato[data-voce="EmailErrata"] { color: var(--allarme); background: var(--allarme-fondo); box-shadow: none; }

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

/*
    La barra del pagamento (BarraPagamento): verde l'incassato, giallo il gia' chiesto (proforma
    inviata, SEPA partito) che parte da zero sotto il verde, quindi sempre lungo almeno quanto lui.
*/
.barra-pagamento {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    white-space: nowrap;
}

.barra-pagamento-traccia {
    position: relative;
    display: inline-block;
    width: 72px;
    height: 8px;
    overflow: hidden;
    background: var(--riga);
    border-radius: 4px;
}

.barra-pagamento-chiesto,
.barra-pagamento-pagato {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 4px;
}

.barra-pagamento-chiesto { background: color-mix(in srgb, var(--attesa) 55%, var(--attesa-fondo)); }

.barra-pagamento-pagato { background: var(--fatto); }

/* quanto c'e' da incassare accanto alla barra, nel giallo dell'attesa */
/* gli altri destinatari di un'email: una pastiglia per ognuno con la x, e la tendina per aggiungerne */
.email-altri {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s1) var(--s2);
}

.email-altro {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    padding: 0 0 0 var(--s2);
    border: 1px solid var(--riga);
    border-radius: 999px;
    background: var(--superficie-alt);
    font-size: var(--t-piccolo);
}

.email-altro .btn { --alto-controllo: 28px; border: 0; background: none; border-radius: 999px; }

/* la x si legge: l'icona alla sua misura, non a quella del testo piccolo della pastiglia */
.email-altro .btn .icona { width: 16px; height: 16px; }

.email-altro-riga { display: block; }

.email-aggiungi { width: auto; flex: 1 1 220px; }

/* la tendina di un contatto con matita e piu' accanto (richiamo, appuntamento, passo dopo) */
.scelta-contatto {
    display: flex;
    gap: var(--s1);
    align-items: center;
}

.scelta-contatto .campo { flex: 1; min-width: 0; }

/* l'ultima voce dello storico in una cella: due righe al massimo, il resto nel title */
.aggiornamento-ultimo {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    white-space: normal;
}

.barra-pagamento .da-incassare {
    padding: 0 var(--s1);
    border-radius: var(--raggio, 4px);
    background: var(--attesa-fondo);
    color: var(--attesa);
    font-weight: 600;
}

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

.scheda {
    /*
        Lo spazio interno in una variabile (05/10/2026): chi esce fino al bordo (il piede col Salva, le
        teste ferme) lo usa per il margine negativo. Con lo stile personale lo spazio cambia, e un
        var(--s4) scritto a mano faceva sporgere il piede oltre i bordi della scheda.
    */
    --spazio-scheda: var(--s4);
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
    padding: var(--spazio-scheda);
}

.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);
    /* 8px dal suo contenuto: meno dei 16 del bordo della scheda sopra, cosi' si legge come il titolo di quello che segue */
    margin-bottom: var(--s2);
}

/* un link dentro il titolo ("tutto lo storico") resta com'e' scritto: e' un'azione, non un'intestazione */
.scheda-titolo a:not(.btn) { font-weight: 400; letter-spacing: normal; text-transform: none; }

/* e un pulsante nel titolo ("Chiudi") si scrive come ogni pulsante */
.scheda-titolo .btn { letter-spacing: normal; text-transform: none; }

/*
    Il riquadro che si comprime (Riquadro, Shared/Component; 02/10/2026): il titolo in una fascia,
    come i gruppi della coda personale, ma piu' bassa (la' "occupa troppo") e dello stesso colore
    per tutti i riquadri: il blu di "Oggi", che negli stili dell'utente non cambia (Stili.cs: i
    colori di stato restano), con chiaro e scuro gia' nei suoi due valori.
    Fascia 4px sopra e sotto; il contenuto sta a 8px dalla fascia (vicinanza), 12px dai lati.
*/
/* anche con lo stile personale (Stili.cs scrive html[data-stile] .scheda { padding }): la fascia tocca i bordi */
.scheda.riquadro,
html[data-stile] .scheda.riquadro {
    padding: 0;
    border-top: 2px solid var(--blu);
    overflow: clip;
}

/* solo quella del Riquadro: la barra dell'ordine della Tabella ha lo stesso nome, e da flex perdeva il colspan
   (15/10/2026, lo spazio bianco in alto a destra nei progetti) */
.riquadro > .riquadro-testa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s1) var(--s2);
    padding: var(--s1) var(--s3);
    background: var(--blu-fondo);
}

/* la misura della coda personale (.storico-gruppo), anche sopra la dimensione dei titoli dello stile personale */
.riquadro .riquadro-titolo,
html[data-stile] .riquadro .riquadro-titolo {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: var(--t-micro);
    color: var(--blu);
}

/* il titolo e' il pulsante: tutta la fascia a sinistra delle azioni si clicca */
.riquadro-gira {
    display: flex;
    align-items: center;
    gap: var(--s2);
    width: 100%;
    min-height: 28px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: left;
    cursor: pointer;
}

.riquadro-gira:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

.riquadro-gira .mono { font-weight: 400; }

/*
    Lo stato accanto al titolo (Riquadro.Segnale, 04/10/2026: "In corso" delle trattative). Si legge, non si
    clicca: pieno della sua tinta, senza bordo e con gli angoli appena tondi, mentre Aggiungi a destra e' un
    pulsante bianco a pillola col bordo. Il pallino dice che e' uno stato anche senza colore.
*/
.riquadro-segnale {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    padding: 1px var(--s2);
    border-radius: var(--raggio);
    background: var(--tinta-fondo, var(--superficie));
    color: var(--tinta, var(--inchiostro));
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.riquadro-segnale > [aria-hidden] { font-size: .7em; }

/* il triangolo dice aperto o chiuso anche senza colore: giu' aperto, a destra chiuso */
.riquadro-freccia {
    flex: none;
    font-size: calc(var(--t-piccolo) * 1.4);
    line-height: 1;
    transform: rotate(90deg);
    transition: transform var(--transizione);
}

.riquadro.chiuso .riquadro-freccia { transform: none; }

.riquadro-azioni {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s1) var(--s2);
}

.riquadro-corpo { padding: var(--s2) var(--s3) var(--s3); }

.riquadro-corpo[hidden] { display: none; }

/* il contenuto parte a 8px dalla fascia e finisce sul bordo: i margini dei primi e degli ultimi non si sommano */
.riquadro-corpo > :first-child { margin-top: 0; }

.riquadro-corpo > :last-child { margin-bottom: 0; }

/* lo spazio che tiene fermo il titolo di un riquadro appena chiuso in fondo alla colonna (wk.js) */
.riquadro-spazio { flex: none; }

/*
    I riquadri che si spostano (RiquadriSpostabili, 05/10/2026). La colonna non ha una scatola sua:
    per l'impaginazione i riquadri restano figli della colonna della pagina (.scheda + .scheda).
*/
.riquadri-colonna { display: contents; }

/* una colonna rimasta senza riquadri resta alta abbastanza da riportarcene uno; trascinando si vede dov'e' */
:is(aside, div):has(> .riquadri-colonna:not(:has(> .scheda))) { min-height: 6rem; }

html.riquadri-trascina :is(aside, div):has(> .riquadri-colonna:not(:has(> .scheda))) {
    outline: 2px dashed var(--riga);
    outline-offset: -2px;
    border-radius: var(--raggio-grande);
}

.riquadro-sposta { flex: none; display: flex; align-items: center; }

/*
    La maniglia ⋮⋮ a sinistra del titolo: un pulsante a parte, della stessa altezza della fascia, che
    si trascina (col dito senza scorrere la pagina: touch-action) e al clic apre il menu.
*/
.riquadro-maniglia {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 28px;
    margin-left: calc(var(--s1) * -1);
    padding: 0 var(--s1);
    border: 0;
    border-radius: var(--raggio);
    background: none;
    color: var(--blu);
    font: inherit;
    font-weight: 700;
    letter-spacing: -.2em;
    line-height: 1;
    cursor: grab;
    touch-action: none;
}

.riquadro-maniglia > span { margin-left: -.2em; }

.riquadro-maniglia:hover,
.riquadro-maniglia[aria-expanded="true"] { background: var(--superficie); }

.riquadro-maniglia:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; }

/* il menu della maniglia: fermo sullo schermo (il riquadro taglia quello che esce), lo mette a posto wk.js */
.riquadro-menu {
    position: fixed;
    z-index: 30;
    display: flex;
    flex-direction: column;
    min-width: 220px;
    padding: var(--s1) 0;
    background: var(--superficie);
    color: var(--inchiostro);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
    box-shadow: var(--ombra-alta);
    font-size: var(--t-piccolo);
    letter-spacing: normal;
    text-transform: none;
}

.riquadro-menu-voce {
    width: 100%;
    padding: var(--s2) var(--s3);
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.riquadro-menu-voce:hover,
.riquadro-menu-voce:focus-visible { background: var(--verde-tenue); outline: none; }

/* rimettere l'ordine di partenza e' un'altra cosa rispetto agli spostamenti: staccato sotto */
.riquadro-menu-partenza { border-top: 1px solid var(--riga); }

.riquadro-menu-voce + .riquadro-menu-partenza { margin-top: var(--s1); }

.riquadro-menu-nota { margin: 0; padding: var(--s2) var(--s3); color: var(--grigio); }

/* durante il trascinamento: il riquadro resta al suo posto sbiadito, la sua fascia segue il puntatore, la linea dice dove cade */
html.riquadri-trascina,
html.riquadri-trascina * { cursor: grabbing !important; user-select: none; }

.riquadro-trascinato { opacity: .45; }

.riquadro-fantasma {
    position: fixed;
    z-index: 95;
    margin: 0;
    pointer-events: none;
    box-shadow: var(--ombra-alta);
    opacity: .95;
}

.riquadri-segnaposto {
    position: fixed;
    z-index: 94;
    height: 4px;
    border-radius: 2px;
    background: var(--blu);
    pointer-events: none;
}

.riquadri-segnaposto[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
    .riquadro-freccia { transition: none; }
}

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

/* il logo DOWEB intero nell'accesso: maschera del colore del testo, come nella barra del menu */
.marchio-grande {
    width: min(240px, 100%);
    aspect-ratio: 467 / 102;
    margin: 0 auto var(--s5);
    background-color: var(--inchiostro);
    -webkit-mask: url('logo-doweb.png?v=2') center / contain no-repeat;
    mask: url('logo-doweb.png?v=2') center / contain no-repeat;
}

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

/* vuoto, l'avviso tiene il suo posto senza vedersi: comparendo non spinge giu' il pulsante sotto il puntatore */
.accesso-avviso:empty { visibility: hidden; }

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

/*
    La riga dei filtri sta sotto le intestazioni e scorre insieme a loro. Ferma a quanto e' alta
    davvero la riga delle intestazioni (--alto-testa, la misura wk.js): con 30px scritti a mano,
    quando le intestazioni erano piu' basse (densita' Compatta, caratteri piccoli) la riga dei filtri
    scendeva di quel tanto gia' a pagina ferma e copriva l'alto della prima riga (05/10/2026: la foto
    del primo utente tagliata).
*/
.tabella thead tr.riga-filtri td {
    padding: var(--s1) var(--s3);
    background: var(--superficie-alt);
    border-bottom: 1px solid var(--riga);
    position: sticky;
    top: var(--alto-testa, 30px);
    z-index: 2;
}

.tabella thead tr.riga-filtri .campo {
    width: 100%;
    font-size: var(--t-piccolo);
    /* poco margine dentro: nelle colonne strette ("Auto") la parola del segnaposto deve starci */
    padding: 0 var(--s1);
}

/*
    La casella del filtro riempie la sua colonna ma non la allarga (05/10/2026): una casella ha una
    larghezza sua di una ventina di lettere, e con quella la colonna di una data o di uno stato
    chiedeva 140px e ne prendeva il doppio del suo testo, mentre il nome accanto andava a capo.
    Larga zero per la misura della colonna, e almeno quanto la cella quando si disegna.
*/
.tabella thead tr.riga-filtri td > .suggerito {
    width: 0;
    min-width: 100%;
}

/*
    ...ma la parola del segnaposto ci sta intera (05/10/2026): a larghezza tablet la colonna si
    stringeva fino al suo titolo, scritto piu' piccolo, e "Ferma da" o "Cliente" si leggevano a meta'.
    Una copia del segnaposto alta zero e invisibile, nel carattere della casella e col suo margine
    dentro piu' il bordo, da' alla colonna la larghezza minima che serve. equilibraTabelle la misura.
*/
.tabella thead tr.riga-filtri .filtro-misura {
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    white-space: nowrap;
    font-size: var(--t-piccolo);
    padding: 0 calc(var(--s1) + 2px);
}

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

/*
    Col dito le voci sono alte quanto un tocco e staccate dal campo (22/10/2026, il committente: su iPhone la prima voce
    non si sceglieva, su Android si'). Safari "aggiusta" il tocco verso l'elemento cliccabile piu' vicino, e il campo col
    fuoco stava a 2px sopra una voce alta 20: il dito sulla prima voce finiva nel campo. Le altre, piu' lontane, andavano.
*/
@media (pointer: coarse) {
    .suggerimenti { top: calc(100% + var(--s2)); max-height: 300px; }

    .suggerimento { padding: 11px var(--s3); font-size: var(--t-base); }
}

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

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

/* il taglio dei testi lunghi (04/10/2026): la casella, il numero e "caratteri" su una riga */
.menu-colonne-taglio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s1) var(--s2);
    margin: 0 0 var(--s2);
    font-size: var(--t-piccolo);
}

.menu-colonne-taglio .campo { width: 5.5em; }

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

    /*
        Una griglia (28/10/2026, "diventa illeggibile, dovresti allargare, c'e' spazio inutilizzato a destra"): il nome
        largo quanto gli serve, mai tagliato, poi i select e i tasti incolonnati subito dopo, uguali in ogni riga. Prima
        era una lista stretta a 380px e con due select il nome si riduceva a una lettera. Le colonne della griglia
        sono larghe quanto il loro contenuto, quindi i tasti restano vicini al nome anche in una tabella larga.
    */
    display: grid;
    grid-template-columns: repeat(4, max-content);
    justify-content: start;
    column-gap: var(--s3);
}

.voce-colonna {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    padding: 2px var(--s2);
    border-radius: var(--raggio);
    font-size: var(--t-piccolo);
}

/* sul telefono la riga va a capo invece di uscire dal pannello, e niente si sovrappone */
@media (max-width: 640px) {
    .colonne-elenco { display: block; }

    .voce-colonna { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
}

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

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

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

/* per nome o per posizione, in cima al menu delle colonne */
.menu-colonne-vista { display: flex; gap: var(--s1); margin-bottom: var(--s1); }

.menu-colonne-vista .btn.attivo { color: var(--verde-scuro); border-color: var(--verde); background: var(--verde-tenue); }

/* dove sta la colonna nella tabella a elenco: una riga, due righe, sotto */
.voce-colonna-livello {
    width: auto;
    flex: 0 0 auto;
    height: auto;
    padding: 0 var(--s1);
    font-size: var(--t-micro);
}

.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.
*/
/*
    Sopra il pannello del calendario (60), il calendarietto col suo velo (61-62), le finestre dei moduli (65-66) e il sollecito
    (90-91): un Annulla deve restare cliccabile (16/10/2026), e l'errore di un modulo in una finestra - "Nuovo cliente" dal nuovo
    progetto - finiva dietro la finestra, e sembrava che non succedesse niente (21/10/2026). Sotto le conferme (100-101).
*/
.avvisi {
    position: fixed;
    z-index: 98;
    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.info       { border-left-color: var(--blu); }

/*
    L'errore appena comparso fa uno scossone, come gli avvisi di DOWEBKestrel (alertShake): e' il
    "no" che si vede con la coda dell'occhio anche se si stava guardando il campo. Una volta sola,
    all'arrivo; chi ha chiesto meno animazioni non lo riceve.
*/
@keyframes avviso-scossone {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
    20%, 40%, 60%, 80% { transform: translateX(8px); }
}

.avviso.errore { animation: avviso-entra 160ms ease-out, avviso-scossone .4s ease-in-out 160ms; }

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

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

/*
    L'avviso Info (26/09/2026): qualcosa che ti riguarda e' successo altrove, col link per andarci.
    Il segno e' una "i" in un tondo, come il cartello delle informazioni: il blu da solo non basta.
*/
.avviso.info .avviso-segno {
    display: inline-grid;
    place-items: center;
    width: 1.4em;
    height: 1.4em;
    border: 1.5px solid var(--blu);
    border-radius: 50%;
    color: var(--blu);
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    line-height: 1;
}

.avviso-link {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--link);
    white-space: nowrap;
}

.avviso-link:hover { color: var(--link-sopra); }

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

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

/*
    Quanti secondi restano prima che l'avviso con "Rimetti come prima" si chiuda (28/09/2026): un
    numero piccolo che scende di uno al secondo. Lo conta il browser con una proprieta' intera
    animata, --avviso-da e --avviso-vita le scrive ContenitoreAvvisi.
*/
@property --avviso-secondi {
    syntax: '<integer>';
    inherits: false;
    initial-value: 0;
}

.avviso-conto {
    flex: 0 0 auto;
    min-width: 1.2em;
    text-align: center;
    font-size: var(--t-micro);
    color: var(--grigio);
    counter-reset: avviso-secondi var(--avviso-secondi);
    animation: avviso-conto var(--avviso-vita) forwards;
}

.avviso-conto::after { content: counter(avviso-secondi); }

@keyframes avviso-conto {
    from { --avviso-secondi: var(--avviso-da); }
    to { --avviso-secondi: 0; }
}

.avviso .chiudi {
    flex: 0 0 auto;
    border: 0;
    background: none;
    padding: 0 var(--s1);
    cursor: pointer;
    color: var(--grigio-tenue);
    /* grande e facile da prendere: e' il modo di togliersi di torno un avviso */
    font-size: 26px;
    line-height: 1;
}

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

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

/* sopra a tutto, anche al sollecito (90-91): una conferma aperta mentre arriva il sollecito resta davanti */
.velo-dialogo {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(22, 33, 28, .4);
}

.dialogo {
    position: fixed;
    z-index: 101;
    /* al centro senza transform, come la finestra: dentro, i position: fixed restano sulla finestra del browser */
    inset: 0;
    margin: auto;
    height: fit-content;
    width: min(460px, calc(100vw - var(--s4) * 2));
    /* sul telefono una domanda lunga, con la password, usciva dallo schermo senza scorrere (07/10/2026) */
    max-height: calc(100dvh - 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);
}

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

/* al posto della casella, quando la password e' stata scritta da meno di 5 minuti (05/10/2026) */
.dialogo-recente {
    margin: 0 0 var(--s4);
    font-size: var(--t-piccolo);
    color: var(--grigio);
}

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

    /* la riga sotto e' un'ombra interna e non un bordo: le linguette ci stanno sopra senza sporgere,
       e lo scorrimento di lato non taglia la sottolineatura di quella accesa */
    box-shadow: inset 0 -1px 0 var(--riga);

    /* sul telefono le linguette che non ci stanno scorrono di lato loro, non la pagina intera (28/09/2026) */
    overflow-x: auto;
    scrollbar-width: none;

    /*
        e restano alte quanto sono: con lo scorrimento un elemento flessibile puo' restringersi fino a
        zero, e nelle pagine-tabella la tabella sotto le schiacciava a meta' (Utenti e permessi)
    */
    flex: none;
}

/*
    Il bordo da cui ci sono altre linguette sfuma (05/10/2026): con la barra di scorrimento nascosta, a
    larghezza tablet "Collegamenti M" si vedeva tagliata secca e sembrava la fine. Le classi le mette
    wk.js (bordiLinguette) guardando lo scorrimento. La maschera conta solo l'opacita': il colore pieno
    e' un token qualunque, non si vede.
*/
.linguette.scorre-dopo {
    -webkit-mask-image: linear-gradient(to left, transparent, var(--inchiostro) var(--s6));
    mask-image: linear-gradient(to left, transparent, var(--inchiostro) var(--s6));
}

.linguette.scorre-prima {
    -webkit-mask-image: linear-gradient(to right, transparent, var(--inchiostro) var(--s6));
    mask-image: linear-gradient(to right, transparent, var(--inchiostro) var(--s6));
}

.linguette.scorre-prima.scorre-dopo {
    -webkit-mask-image: linear-gradient(to right, transparent, var(--inchiostro) var(--s6), var(--inchiostro) calc(100% - var(--s6)), transparent);
    mask-image: linear-gradient(to right, transparent, var(--inchiostro) var(--s6), var(--inchiostro) calc(100% - var(--s6)), transparent);
}

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

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

/*
    Un numero accanto a una parola - linguette, pillole dei filtri, titoli ("Progetti 12"), pulsanti -
    nel carattere del testo (29/09/2026): in mono stava piu' in alto delle lettere e sembrava fuori
    riga. Le cifre restano della stessa larghezza con tabular-nums.
*/
.linguetta-quante,
:is(h1, h2, h3, button, .btn, .linguetta, .filtro-storico, .filtro-attivo, .scheda-titolo, .storico-gruppo, .riga-mese th) .mono {
    font-family: var(--testo);
    font-variant-numeric: tabular-nums;
}

.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;
    /* le pagine sorelle stanno sopra la pagina, non dentro: piu' staccate del titolo dal suo contenuto */
    margin-bottom: var(--s5);
    overflow-x: auto;
    scrollbar-width: none;
}

/*
    Le sezioni su piu' righe (10/10/2026, Impostazioni > Siti di DOWEBAdmin): i gruppi sopra, le pagine del
    gruppo sotto, piu' piccole. Le righe stanno attaccate fra loro - sono la stessa scelta - e staccate
    dalla pagina.
*/
.linguette.sezioni:has(+ .linguette.sezioni-sotto) { margin-bottom: var(--s2); }

.linguette.sezioni-sotto { font-size: var(--t-piccolo); }

/* ---------- 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;
    /* la colonna di destra (riepilogo, trattative, contatti) cresce con lo schermo: a 340px fissi andava a capo ogni riga */
    grid-template-columns: minmax(0, 1fr) clamp(340px, 32%, 560px);
    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; }

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

/* le icone del lead accanto al nome, strette come nelle righe degli elenchi */
.scheda-lead-testa .pagina-testa-azioni { gap: var(--s1); }

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

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

/*
    La testa dello storico (il titolo e i filtri per tipo) e' una fascia come le barre dei filtri:
    sono pulsanti, e sul fondo della pagina non ci stanno (CLAUDE.md: mai controlli sul fondo).
*/
.storico-fermo {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2) var(--s3);
    margin-bottom: var(--s3);
    padding: var(--s1) var(--s3);
    /* la stessa fascia dei riquadri che si comprimono (02/10/2026): lo storico non si chiude - e' la colonna principale - ma si riconosce come loro */
    background: var(--blu-fondo);
    border: 1px solid var(--riga);
    border-top: 2px solid var(--blu);
    border-radius: var(--raggio-grande);
}

.storico-fermo > .scheda-titolo { margin: 0; color: var(--blu); }

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

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

    /*
        Ma non quando la testata porta con se' i riquadri dei numeri (la scheda del progetto: lavoro,
        consegna, incassato, contratto, lead, siti, grafiche, 06/10/2026): ferma era alta quasi tutto lo
        schermo del telefono e il contenuto scorreva in una striscia di pochi centimetri.
    */
    .scheda-lead-testa:has(.numero) {
        position: static;
        margin-bottom: var(--s3);
    }

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

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

    /* la pagina scorre tutta: la colonna dello storico e' alta quanto quello che contiene, modulo aperto compreso */
    .scheda-lead-storico { display: block; }

    .storico-fermo > .pannello-azione { max-height: none; overflow-y: visible; }
}

.coppie {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    /* etichetta e valore sulla stessa linea di base: con un valore a caratteri fissi (date, cifre) o
       con un segnale colorato l'etichetta restava un poco piu' su, e la riga sembrava sfalsata */
    align-items: baseline;
    gap: var(--s2) var(--s3);
    margin: 0;
    font-size: var(--t-piccolo);
}

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

/* le tabelle riassuntive nelle colonne di lato delle schede: un pixel in meno, come le tabelle */
aside[class*="-lato"] .coppie { font-size: var(--t-micro); }

/*
    Un valore senza spazi (un'email, un dominio, un IBAN) va a capo dove capita invece di uscire dalla
    sua colonna (06/10/2026, Fabio dal telefono: "autotrasporticavalli@...it" finiva sotto busta e
    matita). Come .riquadro-coppia dd e .appuntamento-breve dd.
*/
.coppie dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/*
    Dopo le coppie viene altro (una tabella, un paragrafo): 16px, non attaccato (28/09/2026). Il
    margine si fonde con quello di chi segue, quindi non si somma a un paragrafo che ne ha gia'.
*/
.coppie:not(:last-child) { margin-bottom: var(--s4); }

/*
    Due segnali uno accanto all'altro ("▲ 384 g" e "▲ da richiamare") dentro un valore, una cella o
    un paragrafo: Razor toglie lo spazio fra un componente e un @if, e le pastiglie si toccavano.
    Solo dove il contenitore non e' flex: le righe flex hanno gia' il loro gap.
*/
:is(dd, td, p, li) > :is(.giorni-con-data, .giorni, .stato) + :is(.giorni-con-data, .giorni, .stato) { margin-left: var(--s2); }

/*
    La modifica sul posto (InLinea): il valore con la matita accanto, e premendola al suo posto la
    casella, con Salva e Annulla sotto. La matita sta a destra del valore e non si sposta.
*/
.in-linea {
    display: flex;
    align-items: flex-start;
    gap: var(--s2);
}

/*
    Il valore si stringe (min-width: 0) per lasciare posto alle icone accanto, e il testo senza spazi va a
    capo (06/10/2026): senza overflow-wrap l'email del dettaglio del calendario, a 390px, usciva dalla sua
    casella e ci si disegnavano sopra busta e matita. Vale per ogni valore con le sue azioni (InLinea e le
    righe fatte a mano con .in-linea).
*/
.in-linea-valore { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

/*
    Ma non in una tabella (06/10/2026): li' "anywhere" lascia stringere la colonna fino a una lettera per riga
    ("Assistenza: 370 158 1378" in Dispositivi). Nelle celle si va a capo fra le parole, e la tabella misura
    la colonna sulla parola piu' lunga.
*/
.tabella .in-linea-valore { overflow-wrap: break-word; }

/*
    La matita della modifica sul posto e' un pulsante-icona come tutti gli altri (29/09/2026): prima
    era l'icona nuda e verde, accanto a matite col riquadro in altre schede, e sembravano due cose
    diverse. Un po' piu' piccola, perche' sta sulla riga di un valore.
*/
.btn.in-linea-matita {
    flex: none;
    --alto-controllo: 28px;
}

/*
    Un pulsante piccolo fatto solo di un'icona (una matita, un piu') e' un pulsante-icona come gli
    altri: quadrato col bordo, non la cornice stretta del pulsante piccolo con le parole.
*/
.btn.btn-piccolo:has(> .icona:not(.glifo):only-child) {
    width: calc(var(--alto-controllo) - 2px);
    height: calc(var(--alto-controllo) - 2px);
    padding: 0;
    justify-content: center;
    border: 1px solid var(--riga);
    background: var(--superficie);
    color: var(--grigio-tenue);
}

.btn.btn-piccolo:has(> .icona:not(.glifo):only-child):hover:not([disabled]) {
    color: var(--link);
    background: var(--verde-tenue);
    border-color: transparent;
}

/*
    In modifica: Salva e Annulla attaccati alla loro casella (4px), e tutto il blocco staccato da
    quello che viene dopo (12px). Prima era il contrario - 8px dalla casella e 2 dalla riga sotto -
    e i pulsanti sembravano della riga dopo.
*/
/*
    La matita della modifica sul posto e' solo l'icona, senza il riquadro del pulsante (04/10/2026, il
    committente): accanto a ogni valore modificabile, venticinque riquadri per pagina pesavano piu' del
    dato. Le regole dei pulsanti-icona restano come sono per tutti gli altri: questa e' la sola
    eccezione, e pesa di piu' (anche di quella delle tabelle) solo per la classe che ha lei.

    Vale per ogni icona che cambia o usa il valore della sua riga, non solo per la matita di InLinea
    (06/10/2026, il committente: "mantieni standard: tutto a destra"): il valore in .in-linea-valore a
    sinistra, e in fondo a destra, nella stessa fila e tutte uguali, le icone con
    "btn btn-piatto in-linea-matita in-linea-modifica" - la matita, le frecce che scelgono un'altra cosa,
    il piu' che ne scrive una nuova, la busta dell'email (InLinea le mette col parametro Azioni). Lo prova
    GiroInterfacciaTest.LeIconeDelValoreStannoADestraPiatte.
*/
.in-linea .btn.btn-piatto.in-linea-matita.in-linea-modifica:has(> .icona:not(.glifo):only-child) {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--grigio-tenue);
}

.in-linea .btn.btn-piatto.in-linea-matita.in-linea-modifica:has(> .icona:not(.glifo):only-child):hover:not([disabled]),
.in-linea .btn.btn-piatto.in-linea-matita.in-linea-modifica:has(> .icona:not(.glifo):only-child):focus-visible {
    border: 0;
    background: transparent;
    color: var(--link);
}

.in-linea.in-modifica {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s1);
    margin-bottom: var(--s3);
}

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

.in-linea-vuoto { color: var(--grigio); }

/*
    Nelle tabelle la matita compare passando sulla riga, o arrivandoci col Tab: venticinque righe
    per sei colonne di matite sempre accese sarebbero un muro. Sul telefono, dove non si passa sopra
    a niente, c'e' sempre. Resta al suo posto anche spenta, cosi' niente si sposta sotto il puntatore.
*/
.in-linea-cella { gap: var(--s1); }

.in-linea-cella .in-linea-matita { opacity: 0; }

tr:hover .in-linea-cella .in-linea-matita,
.riquadro-coppia:hover .in-linea-cella .in-linea-matita,
.in-linea-cella:focus-within .in-linea-matita { opacity: 1; }

@media (hover: none) {
    .in-linea-cella .in-linea-matita { opacity: 1; }
}

/* nelle coppie con valori modificabili l'etichetta sta alla meta' della riga della matita */
.coppie-in-linea dt { padding-top: 4px; }

/*
    Il testo formattato (Leggibile.Formattato) arriva con paragrafi ed elenchi: i loro margini del
    browser lo facevano partire piu' in basso dell'etichetta, e il punto elenco rientrava. Qui
    parte sulla stessa riga dell'etichetta e l'elenco sta allineato al testo.
*/
.coppie dd > :first-child { margin-top: 0; }

.coppie dd > :last-child { margin-bottom: 0; }

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

.coppie dd ul,
.coppie dd ol { margin: 0 0 var(--s1); padding-left: 1.1em; }

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

/* la nota al posto del valore, sulla riga della sua etichetta ("Azione nessuna"), non sotto */
.coppie-nota.in-riga { display: inline; }

/* l'indirizzo di un sito sotto il dominio: piccolo come la nota accanto (28/09/2026) */
.sito-indirizzo { 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;
}

/* "aggiornata" e il badge dei giorni non si toccano (04/10/2026) */
.trattativa-date > .giorni,
.trattativa-date > .giorni-con-data { margin-left: var(--s1); }

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

/* spingi, coltiva, lascia: il bordo e la parola prendono il colore, come le tre caselle di WK */
.consiglio[data-azione="spingi"] { border-left-color: var(--fatto); }
.consiglio[data-azione="spingi"] .consiglio-azione strong { color: var(--fatto); }

.consiglio[data-azione="coltiva"] { border-left-color: var(--attesa); }
.consiglio[data-azione="coltiva"] .consiglio-azione strong { color: var(--attesa); }

.consiglio[data-azione="lascia"] { border-left-color: var(--allarme); }
.consiglio[data-azione="lascia"] .consiglio-azione strong { color: var(--allarme); }

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

/* nell'elenco dei lead il consiglio sta a sinistra, sopra la tabellina: staccato da lei (28/09/2026) */
.riquadro-lato-cella > .consiglio { margin: 0 0 var(--s3); }

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

/*
    Un gruppo di un elenco (il mese dello storico, gli scaduti, un giorno delle notifiche) e' un
    riquadro solo: il titolo in una fascia in cima, e sotto le sue voci. Come i gruppi della coda.
    Prima il titolo stava sul fondo della pagina e la lista sotto, staccata: con i fondi colorati
    il titolo non si leggeva e non si capiva di chi fosse. Con una tinta-* (base.css) la fascia
    e il filo in alto prendono il colore del gruppo: rosso gli scaduti, blu quelli in programma.
*/
.gruppo-riquadro {
    margin: 0 0 var(--s3);
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-top: 3px solid var(--tinta, var(--riga));
    border-radius: var(--raggio-grande);
    overflow: clip;
}

.gruppo-riquadro > .storico-gruppo,
.storico-scorri .gruppo-riquadro > .storico-gruppo {
    margin: 0;
    padding: var(--s2) var(--s3);
    background: var(--tinta-fondo, var(--testa-tabella));
    border-bottom: 1px solid var(--riga);
}

/* dentro il riquadro la lista non ha un secondo bordo */
.gruppo-riquadro > .storico {
    border: 0;
    border-radius: 0;
}

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

    /*
        la riga di testa - quando, cosa, chi - su un fondo suo, attaccata al bordo di sopra e larga
        quanto la voce: si vede dove comincia ogni voce anche scorrendo veloce
    */
    margin: calc(var(--s3) * -1) calc(var(--s4) * -1) var(--s2);
    padding: 5px var(--s4);
    background: var(--testa-voce);
}

/* le icone di una voce piu' piccole di quelle del lead: sono di una riga, non della scheda */
.storico-testa { --alto-controllo: 28px; }

.storico-voce:first-child > .storico-testa { border-radius: var(--raggio-grande) var(--raggio-grande) 0 0; }

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

/*
    Com'e' finita la trattativa (TrattativeController.Esito, 28/09/2026): una riga a sinistra verde se
    conclusa bene, rossa se male, gialla se ancora in corso. Il testo dell'esito lo dice gia' a parole.
*/
.storico-note:is(.esito-positiva, .esito-negativa, .esito-incorso) {
    padding-left: var(--s2);
    border-left: 3px solid var(--fatto);
}

.storico-note.esito-negativa { border-left-color: var(--allarme); }

.storico-note.esito-incorso { border-left-color: var(--attesa); }

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

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

/* ultima cosa del suo riquadro: niente spazio sotto, o le pillole restano in alto con un vuoto (29/09/2026) */
.filtri-storico:last-child { margin-bottom: 0; }

.filtro-storico {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    min-height: var(--alto-controllo);
    padding: 0 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;
    /* con una classe tinta-* (base.css) il titolo prende il colore del suo riquadro in testa */
    color: var(--tinta, var(--grigio));
}

/* solo in cima al suo contenitore: con first-of-type un titolo dopo i filtri, o uno per
   sezione, perdeva il margine e restava attaccato a quello che ha sopra */
.storico-gruppo:first-child { 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); }

/* un appuntamento nello storico: quando, dove, con chi, chi ci va - etichetta grigia e valore */
.appuntamento-breve {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px var(--s2);
    margin: var(--s1) 0;
    font-size: var(--t-piccolo);
}

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

.appuntamento-breve dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* la bozza ripresa: resta in cima al modulo mentre si scorre, sopra i campi */
.email-ripresa {
    position: sticky;
    top: calc(var(--s3) * -1);
    z-index: 3;
}

/*
    La voce dello storico a cui porta un link (#voce-123, segnata da wk.js): arriva in cima, sotto
    il mese che resta attaccato in alto (senza margine ci finiva sotto, tagliata), e si vede dov'e'.
*/
.storico-voce { scroll-margin-top: 3.5rem; }

.storico-voce.cercata {
    outline: 2px solid var(--attesa);
    outline-offset: 2px;
}

/* ---------- moduli sul lead ---------- */

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

/* un modulo e' uno strumento, non una scheda da leggere: meno aria intorno */
.scheda.pannello-azione { padding: var(--s3); }

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

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

/*
    I contenitori per quello che sta sulla pagina fuori dalle schede (26/09/2026): con i fondi
    pagina colorati degli stili, filtri e note lasciati sul fondo "galleggiavano" e si leggevano
    male. La barra dei filtri e' una fascia del colore delle schede; la nota di pagina un riquadro
    tenue con il filo dell'accento a sinistra, come una didascalia.
*/
.barra-filtri {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--s2) var(--s3);
    margin-bottom: var(--s3);
    padding: var(--s2) var(--s3);
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
}

.nota-pagina {
    margin: 0 0 var(--s3);
    padding: var(--s2) var(--s3);
    font-size: var(--t-piccolo);
    color: var(--grigio);
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-left: 3px solid var(--verde);
    border-radius: var(--raggio);
}

/* dopo una nota i campi ripartono staccati: la nota spiega, non e' l'etichetta del primo campo */
.pannello-nota + :is(.campi-in-fila, .maschera, .modulo-colonne, .campo) { margin-top: var(--s3); }

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

/*
    Il piede di una scheda (Annulla, Salva) resta attaccato al fondo dello schermo mentre si scorre
    un modulo lungo: il Salva si vede sempre, senza andarlo a cercare in fondo. Quando la scheda
    finisce sopra il fondo dello schermo torna al suo posto da solo (sticky). La fascia e' della
    larghezza della scheda: i margini negativi riprendono il suo padding.
*/
.scheda > .pannello-piede {
    position: sticky;
    /* fino al bordo: sotto il margine in fondo dell'area che scorre passava il modulo (02/10/2026) */
    bottom: calc(var(--spazio-fondo, 0px) * -1);
    z-index: 3;
    margin: var(--s3) calc(var(--spazio-scheda, var(--s4)) * -1) calc(var(--spazio-scheda, var(--s4)) * -1);
    padding: var(--s3) var(--spazio-scheda, var(--s4));
    background: var(--superficie-alt);
    border-top: 1px solid var(--riga);
    border-radius: 0 0 var(--raggio-grande) var(--raggio-grande);
}

/*
    I moduli lunghi si allargano con la finestra: ogni gruppo di campi e' una sezione, e le sezioni
    si affiancano quante ne stanno (almeno 420px l'una), una sotto l'altra sul telefono. Cosi' su
    uno schermo largo non resta mezza pagina vuota a destra e il Salva si vede senza scorrere.
    Una sezione che vuole tutta la riga (una nota lunga, una tabella) ha modulo-sezione-larga.
*/
.modulo-colonne {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
    gap: var(--s4) var(--s5);
    align-items: start;
}

.modulo-sezione {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    min-width: 0;
}

/*
    Nella sezione l'intervallo (4px) e' gia' la distanza fra l'etichetta e il suo campo: l'etichetta
    si stacca dal campo di prima col margine sopra, cosi' sta piu' vicina al suo che a quello sopra.
*/
.modulo-sezione > .etichetta { margin: var(--s2) 0 0; }

.modulo-sezione > .etichetta:first-child,
.modulo-sezione > .pannello-titolo + .etichetta { margin-top: 0; }

/* una fila di campi dopo un campo: lo stesso stacco di un'etichetta */
.modulo-sezione > .campi-in-fila { margin-top: var(--s2); }

.modulo-sezione > .pannello-titolo + .campi-in-fila,
.modulo-sezione > .campi-in-fila:first-child { margin-top: 0; }

/* dentro una fila le etichette stanno a 4px dal loro campo, senza l'intervallo della fila */
.campi-in-fila > * > .etichetta { margin-top: 0; }

.modulo-sezione-larga { grid-column: 1 / -1; }

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

/*
    Una fila con la scelta del giorno vuole colonne piu' larghe: frecce, "sab 26/09/2026" e
    calendario non stanno in 150px, e la data si leggeva tagliata. Dove non ci stanno in due, i
    campi vanno uno sotto l'altro (sul telefono, di solito).
*/
.campi-in-fila:has(.scelta-giorno) { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/*
    Dalle e alle sono l'orario, una cosa sola: stanno nella stessa casella della fila, affiancati.
    Separati andavano a capo uno per volta, e "alle" finiva da solo sulla riga sotto. Sciolto
    (un'ora sola, il richiamo) la casella non c'e' e il campo sta nella fila come gli altri.
*/
.campi-orario {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s2);
}

.campi-orario.sciolto { display: contents; }

/* con un tasto accanto (Tutto il giorno): i due orari e il tasto in fondo alla riga */
.campi-orario.con-tasto {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: end;
}

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

/* due gruppi di caselle uno sotto l'altro nello stesso modulo: 24px fra un gruppo e l'altro, non 8 */
.pannello-azione > .partecipanti + .partecipanti { margin-top: var(--s4); }

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

    /* alta quanto ogni altro controllo: pulsanti, caselle e tendine della stessa riga si allineano */
    min-height: var(--alto-controllo);
    padding: 2px var(--s3) 2px var(--s2);
    border: 1px solid var(--riga);
    border-radius: calc(var(--alto-controllo) / 2);
    background: var(--superficie);
    cursor: pointer;
    user-select: none;

    /*
        In una colonna stretta il testo va a capo dentro la pillola invece di uscirne ("Dipendente
        (ferie e permessi nel calendario)" sbordava nella scheda utente). In una fila di pillole
        una pillola passa intera alla riga dopo: va a capo solo quella che da sola non ci sta.
    */
    max-width: 100%;
    line-height: 1.25;
}

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

/*
    Spenta resta al suo posto, grigia e senza la manina (05/10/2026, "Chiamate da questo telefono" in Dati
    utente): niente compare o sparisce sotto il puntatore. Come .voce-colonna-nome:has(input:disabled)
*/
.scelta:has(input:disabled) { cursor: default; color: var(--grigio); }

/*
    Sul telefono i controlli sono piu' bassi (--alto-controllo, tokens.css) e anche piu' stretti:
    pulsanti, scelte a pillola e caselle di testo lunghe perdono un po' di margine interno.
*/
@media (max-width: 900px) {
    /* non quelli di sola icona, quadrati e senza margine (16/10/2026): col margine l'icona restava un puntino, e
       anche in una finestra laterale, stretta come un telefono */
    /* :where: la regola pesa quanto .btn, come prima, e i pulsanti con un margine loro (piccoli, delle tabelle) lo tengono */
    .btn:where(:not(:has(> .icona:not(.glifo):only-child))) { padding: 0 var(--s2); }

    .scelta { min-height: var(--alto-controllo); padding: 0 var(--s2) 0 var(--s1); }

    textarea.campo { padding: var(--s1) var(--s2); }
}

/* "Positiva" verde e "Negativa" rossa, ovunque (28/09/2026), con la parola accanto come sempre */
.scelta-positiva input { accent-color: var(--fatto); }

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

.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: calc(var(--alto-controllo) - 2px);
    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: calc(var(--t-piccolo) - 1px);
    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-stretto { display: none; }

/* sul telefono la tendina con il pulsante al posto dei riquadri */
@media (max-width: 900px) {
    .numeri { display: none; }

    .numeri-stretto {
        display: flex;
        gap: var(--s2);
    }

    .numeri-stretto .campo { flex: 1 1 auto; min-width: 0; }
}

.numeri .btn {
    display: inline-flex;
    gap: var(--s2);

    /* al centro: con baseline numero e nome restavano appiccicati in alto nel riquadro */
    align-items: center;
    min-height: 40px;
}

/* il titolo dentro un pannello: stesso aspetto dei gruppi dello storico, ma non si attacca in cima */
/*
    Vicinanza, dal 26/09/2026: un titolo sta attaccato a quello che intitola e staccato da quello
    che c'e' prima. Il titolo di una sezione sta a 4px dai suoi campi e ad almeno 24px dal blocco
    sopra; il titolo della scheda sta un gradino piu' su delle sue sezioni (vedi sotto). Prima era
    al contrario: 8px sopra e 12 sotto, e "Nome e contatti" sembrava la didascalia di "I tuoi dati".
*/
.pannello-titolo {
    margin: var(--s5) 0 var(--s1);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--grigio);
}

/* in cima al modulo il titolo non ha niente da cui staccarsi */
.pannello-titolo:first-child { margin-top: 0; }

/* dentro una sezione in colonna c'e' gia' l'intervallo (4px) a staccarlo dai campi */
.modulo-sezione > .pannello-titolo { margin-bottom: 0; }

/*
    Le etichette che seguono subito un titolo non hanno il loro margine sopra: il titolo e' loro, e
    lo spazio fra i due lo decide il titolo. Vale per la prima etichetta e per quelle della prima
    fila di campi. Chi da' un margine sopra alle etichette nel suo file ripete qui l'eccezione.
*/
.pannello-titolo + .etichetta,
.pannello-titolo + .campi-in-fila > * > .etichetta,
.pannello-titolo + .campi-in-fila > .etichetta { margin-top: 0; }

/* il titolo della scheda e le sue sezioni affiancate: le sezioni partono un gradino sotto (8 + 16) */
.scheda-titolo + .modulo-colonne,
.scheda-titolo + .pannello-nota + .modulo-colonne { margin-top: var(--s4); }

/* ---------- 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: #235a27; }
.mappa-incorso .mappa-segno { background: #8f6400; }
.mappa-persa .mappa-segno { background: #8a1a13; }
.mappa-contattare .mappa-segno { background: #5f6862; }

.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: #0e1512; max-width: 260px; line-height: 1.35; }

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

.gm-style .gm-style-iw-chr { align-items: center; }

.gm-style .gm-style-iw-ch { padding-top: 0; }

/* la X di Google e' 48px con l'icona da 24: piu' piccola, e il nome accanto le sta in pari */
.gm-style .gm-style-iw-chr .gm-ui-hover-effect { width: 32px !important; height: 32px !important; }

.gm-style .gm-style-iw-chr .gm-ui-hover-effect > span { width: 16px !important; height: 16px !important; margin: 8px !important; }

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

/* le etichette in maiuscoletto e un pixel sotto il valore, come nelle tabelline (28/09/2026) */
.mappa-etichetta { color: #454d48; margin-right: 6px; font-size: 12px; font-weight: 500; text-transform: uppercase; }

.mappa-nota { margin-top: 6px; color: #454d48; font-size: 14px; }

/* le informazioni di un cliente sulla mappa dei siti nuovi sono un link al lead (20/10/2026): testo normale, il link si vede passandoci sopra */
a.mappa-titolo { color: #16211c; text-decoration: underline; }

a.mappa-al-lead { display: block; color: inherit; text-decoration: none; border-radius: 4px; }

a.mappa-al-lead:hover, a.mappa-al-lead:focus-visible { background: #eef3ee; }

@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,
.tabella-compatta .tabella tbody th:where([scope="row"]) { 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; }

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

/* "54 / 100" e' un numero solo: resta su una riga, anche dove la nota accanto e' un blocco */
.link-punteggio { white-space: nowrap; }

.link-punteggio > span { display: inline; }

/* un'azione di riga che su questa riga non si puo' fare: resta al suo posto, spenta, e il title dice perche' */
.btn[aria-disabled="true"] { opacity: .35; cursor: not-allowed; pointer-events: auto; }

.btn[aria-disabled="true"]:hover { background: transparent; color: inherit; }

/* il fondo di un elenco che si allunga scorrendo (Sentinella): un punto, ma con un'altezza, perche' il browser lo veda entrare */
.sentinella { display: block; height: 1px; }

/*
    Ogni link che si apre fuori - Google Maps, un sito, un pdf, doweb.site - porta a destra una
    piccola freccia d'uscita, del colore del link: si capisce prima di cliccare che si lascia WK,
    senza scriverlo accanto. Una regola sola per tutta la piattaforma: una pagina nuova la prende
    senza ricordarsene. I pulsanti e i link fatti di un'immagine ne restano fuori; per chi legge con
    lo screen reader c'e' gia' il testo "(si apre in una scheda nuova)".
*/
a[target="_blank"]:not(.btn):not(:has(img, svg))::after {
    content: "";
    display: inline-block;
    width: .75em;
    height: .75em;
    margin-left: .25em;
    vertical-align: baseline;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2.5h4.5V7M13.5 2.5l-6 6M11.5 9.5v3a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1h3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2.5h4.5V7M13.5 2.5l-6 6M11.5 9.5v3a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1h3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/*
    Lo storico di una riga che scorre dentro di se' (UltimiContattiScorrono): alto al massimo cosi',
    poi scorre e le voci dopo arrivano scorrendo. Il riquadro non cresce all'infinito, e la rotella
    arrivata in fondo non trascina la pagina.
*/
.contatti-scorrono {
    position: relative;
    max-height: 28rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: var(--s1);
}

/* ---------- finestra sopra la pagina (Finestre) ---------- */

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

/*
    Media per un modulo - una nota, i dati, un contatto - e quasi tutto lo schermo per il
    calendario e le schede, dove serve spazio. Sopra il velo e sotto il dialogo di conferma e gli
    avvisi, che devono restare leggibili anche con la finestra aperta.
*/
.finestra {
    /* il testo e' quello delle schede anche quando la finestra nasce dentro la barra in alto (il sollecito), che ha il testo bianco */
    color: var(--inchiostro);
    position: fixed;
    z-index: 66;
    /*
        Al centro con inset e margin, non con transform (28/09/2026): un transform fa della finestra
        il riferimento di tutto quello che dentro e' position: fixed - il calendarietto di
        SceltaGiorno usciva spostato e tagliato, e il suo velo copriva solo la finestra.
    */
    inset: 0;
    margin: auto;
    display: flex;
    flex-direction: column;
    width: min(760px, calc(100vw - var(--s4) * 2));

    /*
        --alta e' la pagina dentro, detta da lei (wk.js); --testa la testata com'e' davvero, misurata
        in ContenitoreFinestre.razor.js (05/10/2026): i 48px fissi, con uno stile dalla testata piu'
        bassa, lasciavano sotto il modulo 15px vuoti.
    */
    height: min(calc(var(--alta, 560px) + var(--testa, 48px)), calc(100dvh - var(--s4) * 2));
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
    box-shadow: var(--ombra-alta);
    overflow: hidden;
}

.finestra.grande,
.finestra.allargata {
    width: calc(100vw - var(--s4) * 2);
    height: calc(100dvh - var(--s4) * 2);
}

.finestra-testa {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex: 0 0 auto;
    padding: var(--s1) var(--s1) var(--s1) var(--s3);
    border-bottom: 1px solid var(--riga);
    background: var(--superficie);
}

.finestra-titolo {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: var(--t-medio);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.finestra-pagina {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    background: var(--superficie);
}

/*
    La stessa finestra con dentro un modulo della pagina invece di un iframe: alta quanto il
    modulo, e se non ci sta scorre dentro.
*/
.finestra.finestra-modulo {
    height: fit-content;
    max-height: calc(100dvh - var(--s4) * 2);
}

/*
    Con un campo che propone (CampoSuggerito) la finestra lascia sotto il posto per l'elenco, alto fino a 240px: alta
    quanto il modulo, l'elenco restava tagliato e si scorreva dentro la finestra (21/10/2026, il committente: "finestra
    deve essere piu alta", Collega a un lead).
*/
.finestra.finestra-modulo:has([role="combobox"]) { min-height: min(540px, calc(100dvh - var(--s4) * 2)); }

/* un testo lungo (un prompt, un modello di email) vuole righe lunghe */
.finestra.finestra-modulo.larga { width: min(1200px, calc(100vw - var(--s4) * 2)); }

/* dentro la finestra un modulo non e' piu' una scheda: niente secondo bordo, niente piede appiccicato */
.finestra-corpo > .scheda {
    padding: 0;
    border: 0;
    background: none;
}

.finestra-corpo > .scheda > .pannello-piede {
    position: static;
    margin: var(--s3) 0 0;
    padding: 0;
    background: none;
    border: 0;
}

.finestra-corpo {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--s4);
    background: var(--superficie);
}

.finestra-corpo > .pannello-piede { margin-top: var(--s3); }

/* in fondo alla finestra il margine del modulo (.pannello-azione, 16px) si sommava al padding del corpo:
   sotto i pulsanti restava il doppio dello spazio (05/10/2026) */
.finestra-corpo > :last-child { margin-bottom: 0; }

/*
    Lo stesso nelle pagine aperte in una finestra (?finestra=1, main.finestra-contenuto: i moduli del lead,
    la rubrica): il margine del modulo in fondo si sommava al padding della pagina, e sotto il piede
    restavano 26px contro i 12 sopra (05/10/2026). Il modulo finisce dove finisce, come in cima.
*/
.finestra-contenuto > :last-child,
.finestra-contenuto > :last-child > :last-child { margin-bottom: 0; }

/* un numero con l'icona della chiamata accanto: sempre sulla stessa riga (05/10/2026) */
.telefono-con-chiamata {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    white-space: nowrap;
}

/* piu' numeri (NumeriTelefono, 05/10/2026): staccati fra loro piu' di quanto il numero lo e' dalla sua
   icona, e a capo fra un numero e l'altro quando non ci stanno - prima si leggevano attaccati,
   "+393356178651+393355947650" */
.telefoni {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s1) var(--s2);
    max-width: 100%;
}

/* come nota sotto un nome (il contatto di un sito) va sulla sua riga, come le altre .coppie-nota */
.telefoni.coppie-nota { display: flex; }

/* sul telefono la finestra e' lo schermo intero: un riquadro con i bordi ruba spazio e basta */
@media (max-width: 900px) {
    .finestra,
    .finestra.grande {
        margin: 0;
        width: 100vw;
        height: 100dvh;
        border: 0;
        border-radius: 0;
    }
}

/* la pagina dentro la finestra: niente impianto intorno, scorre lei. Relativa: e' da li' che
   wk.js misura quanto e' alto quello che contiene. Anche col calendario: li' il modulo e' la
   pagina, e il calendario sta sopra di lui (Calendario.razor.css) */
.contenuto.finestra-contenuto:has(> .cal-in-finestra) {
    display: block;
    overflow-y: auto;
}

.contenuto.finestra-contenuto {
    position: relative;
    height: 100dvh;
    padding: var(--s3);
}

/*
    Una finestra e' una scheda: la pagina dentro ha il fondo delle schede, non quello della pagina.
    Si ridefinisce --carta, cosi' anche quello che dentro usa il fondo pagina (le testate che restano
    ferme, gli spazi fra i riquadri) prende il colore giusto.
*/
/*
    :root:has() pesa piu' di html[data-stile]: lo stile dell'utente ridefinisce --carta, e senza
    questo dentro la finestra tornava il fondo pagina, con i bordi grigi attorno ai riquadri.
*/
:root:has(.finestra-contenuto) { --carta: var(--superficie); }

/* lo storico sotto un modulo nella finestra: scorre dentro di se', alto quanto avanza (wk.js) */
.finestra-contenuto [data-riempie] { overflow-y: auto; }

/* la scheda del lead ridotta a un modulo: il modulo, e sotto lo storico che scorre */
.lead-finestra .pannello-azione { margin-bottom: var(--s3); }

.lead-finestra-storico { padding: var(--s3); }

/* ---------- grafici con i periodi a confronto (GraficoConfronto, 26/09/2026) ---------- */

/*
    Una linea per periodo: il periodo scelto spesso e pieno, gli anni prima via via piu' sottili,
    ognuno con il suo colore E il suo tratteggio - si distinguono anche in bianco e nero o per chi
    non vede i colori. Le classi serie-N le usano anche i grafici disegnati nelle pagine
    (vinte e perse dell'Andamento, mese per mese dei venditori).
*/
.grafico-confronto { display: block; overflow: visible; }

.grafico-confronto .grafico-asse { stroke: var(--riga); stroke-width: 1; }

.grafico-confronto .grafico-valore { font-family: var(--mono); font-size: 13px; fill: var(--inchiostro); }

.grafico-confronto .grafico-mese { font-size: 13px; fill: var(--grigio); }

.grafico-serie { fill: none; stroke-linecap: round; }

.serie-0 { stroke: var(--verde); stroke-width: 3; }
/* l'anno prima in ambra e non in blu: con uno stile dall'accento blu (Windows) si confondeva con il periodo scelto */
.serie-1 { stroke: var(--attesa); stroke-width: 2.2; stroke-dasharray: 7 4; }
.serie-2 { stroke: var(--viola); stroke-width: 1.8; stroke-dasharray: 3 3; }
.serie-3 { stroke: var(--blu); stroke-width: 1.5; stroke-dasharray: 10 3 2 3; }
.serie-4 { stroke: var(--grigio); stroke-width: 1.3; stroke-dasharray: 1 3; }
.serie-5 { stroke: var(--grigio-tenue); stroke-width: 1.1; stroke-dasharray: 6 2; }

/* i punti: pieni del fondo, col bordo del colore della loro linea e senza tratteggio */
.grafico-serie-punto { fill: var(--superficie); stroke-dasharray: none; stroke-width: 2; }

/*
    Il mese in corso e' parziale (05/10/2026): ottobre al giorno 5 sembrava un crollo. Il punto e'
    vuoto col bordo a trattini, il tratto che ci arriva e' tratteggiato fitto e tenue, la cifra grigia;
    la legenda e il title dicono "fino a oggi".
*/
.grafico-serie-punto.in-corso { stroke-dasharray: 2 2; fill: none; }

.grafico-serie.in-corso { stroke-dasharray: 2 4; opacity: .6; }

.grafico-confronto .grafico-valore.in-corso { fill: var(--grigio); }

.grafico-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1) var(--s4);
    margin: var(--s2) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--t-piccolo);
    color: var(--inchiostro);
}

.grafico-legenda li { display: inline-flex; align-items: center; gap: var(--s2); }

.grafico-legenda li:first-child { font-weight: 600; }

/*
    La scelta degli anni a confronto (SceltaConfronti): nella barra dei filtri, alta come una
    tendina. Le pillole hanno il segno della loro linea, cosi' la pillola e' anche la legenda.
*/
.scelta-confronti { display: flex; flex-direction: column; gap: var(--s1); }

.scelta-confronti .etichetta { margin: 0; }

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

.pillola-confronto {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    padding: 2px 2px 2px var(--s2);
    font-family: var(--mono);
    font-size: var(--t-piccolo);
    color: var(--inchiostro);
    background: var(--superficie-alt);
    border: 1px solid var(--riga);
    border-radius: 999px;
}

.pillola-confronto-togli {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--grigio);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.pillola-confronto-togli:hover { background: var(--allarme-fondo); color: var(--allarme); }

.pillola-confronto-togli:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; }

.scelta-confronti-aggiungi.campo { width: auto; min-width: 0; }

/*
    Nelle tabelle con gli anni a confronto (26/09/2026): il valore migliore della riga. Verde se
    e' del periodo scelto, rosso se e' di un anno prima - vuol dire che si e' perso qualcosa.
    "Migliore" dipende dalla misura: per le perse, i cancellati, i costi e' il piu' basso. Il glifo
    dice la stessa cosa del colore.
*/
.cella-meglio,
.cella-peggio {
    display: inline-block;
    padding: 0 var(--s1);
    border-radius: var(--raggio);
    font-weight: 700;
}

.cella-meglio { color: var(--fatto); background: var(--fatto-fondo); }

.cella-peggio { color: var(--allarme); background: var(--allarme-fondo); }

/*
    La fascia del mese dentro una tabella (Tabella con DataMese, 26/09/2026): come la testa dei
    gruppi della coda, il fondo della testa della tabella e il mese in grassetto.
*/
.tabella .riga-mese th {
    padding: var(--s2) var(--s3);
    background: var(--testa-tabella);
    color: var(--inchiostro);
    font-weight: 700;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    border-top: 2px solid var(--riga);
}

/* la fascia del giorno sotto quella del mese (20/10/2026): la stessa forma, piu' leggera e senza fermarsi in cima */
.tabella .riga-giorno th {
    padding: var(--s1) var(--s3);
    background: var(--superficie-alt);
    color: var(--grigio);
    font-size: var(--t-piccolo);
    font-weight: 600;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    border-top: 1px solid var(--riga);
}


/*
    La fascia del mese resta ferma sotto la testa della tabella mentre si scorre (29/09/2026): si sa
    sempre di che mese sono le righe. L'altezza della testa cambia coi filtri: la scrive wk.js in
    --testa-tabella-altezza.
*/
.tabella .riga-mese th {
    position: sticky;
    top: var(--testa-tabella-altezza, 0px);
    z-index: 1;
}

/* le righe a due colori: la seconda con un velo del verde, nella testa e nel corpo */
.tabella-riquadri tbody.riquadro-alterno .riquadro-intesta td {
    background: color-mix(in srgb, var(--testa-scheda), var(--verde) 12%);
}

.tabella-riquadri tbody.riquadro-alterno .riquadro-corpo > td {
    background: color-mix(in srgb, var(--superficie), var(--verde) 5%);
}

/*
    "Riquadri" (SceltaRiquadri) in fondo a destra nella barra dei filtri; l'elenco si apre sopra la
    pagina, senza allungare la barra.
*/
.scelta-riquadri { position: relative; margin-left: auto; align-self: flex-end; }

.scelta-riquadri-menu {
    position: absolute;
    right: 0;
    top: calc(100% + var(--s1));
    z-index: 30;
    min-width: 260px;
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
    box-shadow: 0 8px 24px rgb(0 0 0 / .14);
}

/* le barre degli anni a confronto: stessi colori delle linee serie-0..5, sempre piu' sottili */
.barra-serie { display: inline-block; height: 8px; min-width: 2px; border-radius: 2px; background: var(--grigio-tenue); }
.barra-serie-0 { height: 16px; background: var(--verde); }
.barra-serie-1 { height: 11px; background: var(--attesa); }
.barra-serie-2 { height: 9px; background: var(--viola); }
.barra-serie-3 { height: 8px; background: var(--blu); }
.barra-serie-4 { height: 7px; background: var(--grigio); }
.barra-serie-5 { height: 6px; background: var(--grigio-tenue); }

/* ---------- lampeggio: la cosa a cui porta un link ---------- */

/*
    wk.evidenzia(id) (04/10/2026): la riga delle notifiche aperta dal piede di un'email, la persona dei
    compensi aperta da un avviso. Tre lampi gialli su tutta la riga, poi torna com'era. Il fondo va
    sulle celle (un'ombra interna, che copre il loro fondo senza toccarlo): in una tabella sono loro ad avere il colore. Chi ha chiesto meno movimento la vede
    gialla ferma, senza lampi, per lo stesso tempo.
*/
.lampeggio,
tr.lampeggio > th,
tr.lampeggio > td {
    animation: lampeggio 1s ease-in-out 3;
}

tr.lampeggio { animation: none; outline: 2px solid var(--attesa); outline-offset: -2px; }

@keyframes lampeggio {
    0%, 100% { box-shadow: none; }
    40%, 60% { box-shadow: inset 0 0 0 100vmax var(--attesa-fondo); }
}

@media (prefers-reduced-motion: reduce) {
    .lampeggio,
    tr.lampeggio > th,
    tr.lampeggio > td {
        animation: none;
        box-shadow: inset 0 0 0 100vmax var(--attesa-fondo);
    }
}

/* ---------- voce con un nome davanti ---------- */

/*
    "TRATTATIVE VINTE: piu' della media..." (04/10/2026, il committente): in ogni elenco di voci con un
    nome davanti, il nome in maiuscolo e in grassetto, grande come il testo - i due punti da soli lo
    staccavano troppo poco, e il maiuscoletto piccolo si leggeva male. Lo mette VoceChiave (Shared).
*/
.voce-chiave {
    font-size: .85em;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

/*
    Sul telefono i pulsanti piccoli si toccano col dito (04/10/2026, giro a 390px): le frecce dei giorni, le
    matite delle pagine di configurazione, la X dei filtri e degli avvisi erano da 9 a 22px. Almeno 32px; il
    disegno resta quello, cresce solo l'area che si tocca.
*/
@media (max-width: 767px), (pointer: coarse) {
    .scelta-giorno-passo,
    .config-modifica,
    .filtro-attivo .chiudi,
    .avviso .chiudi {
        min-width: 32px;
        min-height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* il nome di una riga della tabellina si tocca per spostarla (28/10/2026): sembra il nome, non un pulsante */
.riquadro-coppia-nome {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: left;
    cursor: pointer;
}

.riquadro-coppia-nome:hover, .riquadro-coppia-nome[aria-expanded="true"] { color: var(--verde-scuro); }

.riquadro-coppia-sposta { display: inline-flex; gap: 2px; margin-left: var(--s1); }

.riquadro-coppia-sposta .btn { padding: 0 var(--s1); font-size: var(--t-micro); }