/*
    L'impianto: barra laterale collassabile, barra alta con briciole e ricerca, contenuto.
    Sul telefono la laterale diventa un cassetto e compare la barra in basso, raggiungibile
    col pollice, con le sole destinazioni che si usano in mobilita'.
*/

.app {
    display: grid;

    /*
        Il menu largo quanto le sue parole (04/10/2026): le voci non vanno a capo (nowrap), e la colonna
        prende la larghezza della piu' lunga invece dei 236px fissi, che lasciavano mezzo menu vuoto.
    */
    grid-template-columns: max-content 1fr;

    /*
        100% e non 100vh: html e body sono gia' al 100%, e 100vh e' l'altezza del riquadro di
        impaginazione, che NON si accorcia quando il browser aggiunge qualcosa sopra la pagina -
        una barra di un'estensione, l'avviso "Claude sta esaminando questo browser", la barra
        degli indirizzi che su telefono compare e scompare. In quei casi l'impianto diventa piu'
        alto dello spazio visibile e ricompare la barra di scorrimento della PAGINA, accanto a
        quella della tabella: due barre affiancate, che e' il difetto che si stava correggendo.
    */
    height: 100%;
    transition: grid-template-columns var(--transizione);
}

/*
    Il menu stretto e' una scelta per lo schermo largo: sul telefono il menu e' un cassetto che
    si apre sopra la pagina, sempre con le parole (29/09/2026: chi l'aveva stretto dal computer
    apriva sul telefono un cassetto di sole icone, con la pagina spinta in una colonna grigia).
*/
@media (min-width: 901px) {
    .app.stretta {
        grid-template-columns: var(--laterale-stretta) 1fr;
    }
}

/* ---------- barra laterale ---------- */

.laterale {
    display: flex;
    flex-direction: column;
    background: var(--laterale-fondo);
    border-right: 1px solid var(--riga);
    overflow: hidden;
}

.laterale-testa {
    display: flex;
    align-items: center;
    gap: var(--s2);
    height: var(--barra-alta);
    padding: 0 var(--s3);
    /* stessa fascia della barra alta: in cima, da sinistra a destra, una striscia sola */
    background: var(--barra-fondo);
    color: var(--barra-testo);
    flex: 0 0 auto;
}

/*
    Il logo DOWEB (28/09/2026): una maschera, non un'immagine a colori. Prende il colore del testo
    della barra, quindi si legge con qualunque colore scelto nello stile, chiaro o scuro.
*/
.marchio {
    display: inline-block;
    width: 104px;
    aspect-ratio: 467 / 74;
    background-color: var(--barra-testo);
    -webkit-mask: url('logo-doweb-marchio.png?v=2') center / contain no-repeat;
    mask: url('logo-doweb-marchio.png?v=2') center / contain no-repeat;
}

.laterale-voci {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--s2) 0;

    /* il posto della barra di scorrimento c'e' sempre: comparendo su uno schermo basso non taglia le parole */
    scrollbar-gutter: stable;
}

.gruppo-titolo {
    padding: var(--s3) var(--s3) var(--s1);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    /* grigio e non grigio-tenue: sul fondo della laterale il tenue scende sotto 4,5:1 */
    color: var(--grigio);
    white-space: nowrap;
}

/* il titolo del gruppo e' un pulsante che chiude e apre il gruppo, col triangolo a destra (12/10/2026) */
button.gruppo-titolo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: 0;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

button.gruppo-titolo:hover { color: var(--inchiostro); }

.gruppo-freccia {
    font-size: 11px;
    transition: transform .15s ease;
}

.gruppo-freccia.chiuso { transform: rotate(-90deg); }

.voce {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: 7px var(--s3);
    color: var(--inchiostro);
    border-left: 3px solid transparent;
    white-space: nowrap;
    cursor: pointer;
}

.voce:hover {
    background: var(--laterale-sopra);
    text-decoration: none;
}

.voce.attiva {
    background: var(--superficie);
    border-left-color: var(--verde);
    font-weight: 600;
    color: var(--verde-scuro);
}

.voce-segno {
    flex: 0 0 18px;
    text-align: center;
    font-size: var(--t-medio);
}

.voce-testo {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 901px) {
    .app.stretta .voce-testo,
    .app.stretta .gruppo-titolo,
    .app.stretta .marchio {
        display: none;
    }

    /*
        Stretto, l'icona sta al centro della colonna (29/09/2026): il bordo della voce attiva a
        sinistra si pareggia a destra, e la barra di scorrimento non ruba larghezza da un lato solo.
    */
    .app.stretta .voce {
        justify-content: center;
        padding-left: 0;
        padding-right: 3px;
    }

    .app.stretta .laterale-voci { scrollbar-width: none; }

    .app.stretta .laterale-testa { justify-content: center; }
}

/* il nome della voce accanto all'icona, col menu chiuso (wk.js): subito, non dopo il title del browser */
.etichetta-menu {
    position: fixed;
    z-index: 70;
    transform: translateY(-50%);
    padding: 4px var(--s2);
    font-size: var(--t-piccolo);
    white-space: nowrap;
    color: var(--superficie);
    background: var(--inchiostro);
    border-radius: var(--raggio);
    box-shadow: var(--ombra-alta);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

.etichetta-menu.vista { opacity: 1; visibility: visible; }

/* ---------- colonna di destra ---------- */

.colonna {
    display: flex;
    flex-direction: column;
    min-width: 0;

    /*
        min-height: 0 anche qui, e non e' una ripetizione inutile: perche' una tabella scorra
        DENTRO, ogni antenato della catena deve poter diventare piu' piccolo del proprio
        contenuto. Elementi di griglia e di flex hanno per difetto un minimo pari al contenuto,
        quindi basta che manchi a un livello solo perche' la barra ricompaia fuori - o, peggio,
        perche' le righe finiscano tagliate senza nessuna barra.
    */
    min-height: 0;
}

.barra-alta {
    display: flex;
    align-items: center;
    gap: var(--s3);
    height: var(--barra-alta);
    padding: 0 var(--s4);
    background: var(--barra-fondo);
    color: var(--barra-testo);
    flex: 0 0 auto;
}

.briciole {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-size: var(--t-piccolo);
    color: var(--barra-testo-tenue);
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

/*
    Quando la ricerca le stringe (05/10/2026, a 1000-1100px) le briciole si accorciano coi puntini,
    prima l'ultima e poi le altre, e il testo intero sta nel title: prima la fila veniva tagliata a
    meta' lettera sotto la casella ("Vendita / Lead e c"). I separatori restano interi.
*/
.briciole > * {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.briciole > .sep { flex: none; }

.briciole > :last-child { flex-shrink: 1000; min-width: 3em; }

.briciole a { color: var(--barra-testo-tenue); }

.briciole a:hover { color: var(--barra-testo); }

/* l'ultima briciola quando porta altrove (la scheda di un utente -> l'elenco): come l'ultima, ma si clicca */
.briciole a:last-child {
    color: var(--barra-testo);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.briciole .sep { color: var(--barra-testo-tenue); }

.briciole .ultima {
    color: var(--barra-testo);
    font-weight: 600;
}

.ricerca {
    position: relative;
    margin-left: auto;
    width: min(420px, 40vw);
    /* si stringe anche lei, ma non sotto una casella in cui si legge cosa si scrive */
    flex: 0 1 auto;
    min-width: 14rem;
}

.ricerca .campo { padding-left: 28px; padding-right: 44px; }

/*
    La tendina della ricerca globale: larga, sotto la casella, divisa per tipo. Ogni gruppo ha il
    suo nome con l'icona, ogni voce il nome in grassetto e sotto una riga che dice quale e' - il
    cliente, lo stato, il telefono - cosi' due "Rossi" non si confondono.
*/
.ricerca-elenco {
    position: absolute;
    top: calc(100% + var(--s1));
    right: 0;
    z-index: 200;
    width: min(720px, calc(100vw - var(--s6)));
    max-height: 72vh;
    overflow-y: auto;
    padding: var(--s2) 0;
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: var(--raggio-grande);
    box-shadow: var(--ombra-alta);
}

.ricerca-gruppo + .ricerca-gruppo {
    margin-top: var(--s2);
    padding-top: var(--s2);
    border-top: 1px solid var(--riga);
}

.ricerca-gruppo-titolo {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin: 0;
    padding: var(--s1) var(--s4);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--grigio);
}

.ricerca-conto {
    margin: 0;
    padding: var(--s1) var(--s4) var(--s2);
    font-size: var(--t-micro);
    color: var(--grigio);
}

/* ogni voce: a sinistra di che tipo e', al centro nome e dettaglio, a destra quando e' stata toccata */
.ricerca-voce {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--s3);
    padding: var(--s2) var(--s4);
    color: var(--inchiostro);
    text-decoration: none;
}

.ricerca-voce + .ricerca-voce { border-top: 1px solid var(--riga); }

.ricerca-voce-tipo {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    font-size: var(--t-micro);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--grigio);
}

.ricerca-voce-testo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ricerca-voce-quando {
    font-size: var(--t-micro);
    color: var(--grigio);
    white-space: nowrap;
}

.ricerca-voce:hover,
.ricerca-voce-scelta { background: var(--verde-tenue); text-decoration: none; }

/* scritto qualcosa, il promemoria "Ctrl K" si toglie: stava sopra il testo */
.ricerca:has(.campo:not(:placeholder-shown)) .ricerca-tasto { display: none; }

.ricerca-voce-titolo { font-weight: 600; overflow-wrap: anywhere; }

.ricerca-voce-dettaglio {
    font-size: var(--t-piccolo);
    color: var(--grigio);
    overflow-wrap: anywhere;
}

.ricerca-vuoto {
    margin: 0;
    padding: var(--s3) var(--s4);
    color: var(--grigio);
}

/*
    La campanella, in fondo a destra della barra. Il puntino e' rosso e piccolo, ma non e' mai
    l'unico segnale: il pulsante dice a parole quante sono le nuove, e il titolo pure.
*/
.campanella { position: relative; flex: 0 0 auto; }

/* quadrata come ogni pulsante fatto di sola icona */
.campanella-pulsante { position: relative; padding: 6px; aspect-ratio: 1; justify-content: center; }

.campanella-puntino {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--allarme);
    box-shadow: 0 0 0 2px var(--superficie);
}

.campanella-elenco {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    /* sopra le parti ferme delle pagine (la testata del calendario e' a 20: la tendina ci finiva sotto, 09/10/2026), come la ricerca */
    z-index: 200;
    width: min(380px, calc(100vw - 32px));
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgb(0 0 0 / .12);
    overflow: hidden;
}

/*
    Sul telefono l'elenco sta sulla larghezza dello schermo, non sotto il suo pulsante (28/09/2026):
    allineato a destra di un pulsante a meta' barra usciva dal bordo sinistro, tagliato.
*/
@media (max-width: 600px) {
    .campanella-elenco {
        position: fixed;
        top: calc(var(--barra-alta) + 6px);
        left: var(--s3);
        right: var(--s3);
        width: auto;
    }
}

.campanella-elenco ul { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; }

.campanella-elenco li + li { border-top: 1px solid var(--riga); }

.campanella-elenco li a {
    display: flex;
    gap: var(--s3);
    justify-content: space-between;
    align-items: baseline;
    padding: var(--s2) var(--s3);
    color: var(--inchiostro);
    text-decoration: none;
}

.campanella-elenco li a:hover,
.campanella-elenco li a:focus-visible { background: var(--superficie-alt); }

/* le nuove dall'ultima visita: in grassetto e con la barretta, non solo col colore */
.campanella-elenco li.nuova a { font-weight: 600; box-shadow: inset 3px 0 0 var(--allarme); }

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

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

.campanella-vuota { margin: 0; padding: var(--s3); color: var(--grigio); font-size: var(--t-piccolo); }

/* il link in fondo al pannello dei ritardi */
.campanella-tutte {
    display: block;
    padding: var(--s2) var(--s3);
    border-top: 1px solid var(--riga);
    text-align: center;
    font-size: var(--t-piccolo);
}

/* in fondo alla campanella: a sinistra tutte le notifiche, a destra l'ingranaggio delle impostazioni */
.campanella-piede {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    padding: var(--s1) var(--s2) var(--s1) var(--s3);
    border-top: 1px solid var(--riga);
    font-size: var(--t-piccolo);
}

/* chi e' collegato, a destra della campanella: foto o sagoma, e il nickname; apre il suo menu */
.menu-persona .persona {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    flex: 0 0 auto;
    height: var(--alto-controllo);
    padding: 0 var(--s2) 0 2px;
    border-radius: 999px;
    color: var(--barra-testo);
    font-weight: 500;
    text-decoration: none;
}

.menu-persona .persona:hover { background: var(--barra-sopra); color: var(--barra-testo); text-decoration: none; }

.menu-persona .persona-foto {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.menu-persona .persona-sagoma {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--verde-tenue);
    color: var(--verde-scuro);
}

.menu-persona .persona-nome { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ricerca-segno {
    position: absolute;
    left: var(--s2);
    top: 50%;
    transform: translateY(-50%);
    color: var(--grigio-tenue);
    pointer-events: none;
}

.ricerca-tasto {
    position: absolute;
    right: var(--s2);
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--mono);
    font-size: var(--t-micro);
    color: var(--grigio);
    /* un tasto della tastiera: ha il suo fondo, e si legge qualunque sia il colore della barra */
    background: var(--superficie-alt);
    border: 1px solid var(--riga);
    border-radius: 3px;
    padding: 0 4px;
    pointer-events: none;
}

.contenuto {
    /* lo spazio in fondo: lo riprende il piede delle schede, che deve toccare il fondo (02/10/2026) */
    --spazio-fondo: var(--s4);
    flex: 1 1 auto;
    overflow: auto;
    padding: var(--s4);
}

/*
    Si riconoscono con :has: se dentro il contenuto c'e' una tabella, lo scorrimento e' suo.
    Cosi' non serve che ogni pagina si ricordi di mettersi una classe addosso - e una pagina nuova
    si comporta bene senza che nessuno gliel'abbia detto.

    Solo le pagine dove la tabella E' la pagina - figlia diretta del contenuto, o dentro un solo
    involucro: dove sta in una colonna accanto ad altro (Ticket, esecuzioni dei funnel: elenco e
    dettaglio) bloccare il contenuto tagliava tutto il resto, e li' scorre la pagina.

    Le pagine che sono UNA tabella e basta non devono scorrere: scorre la tabella dentro, cosi'
    l'intestazione resta ferma, la paginazione resta sempre raggiungibile in fondo, e soprattutto
    non ci sono due barre di scorrimento affiancate che si contendono la rotella.

    Con "min-height: 0" si insiste apposta: un elemento flessibile ha come minimo naturale la
    dimensione del suo contenuto, quindi senza quella riga la tabella cresce oltre lo schermo e la
    barra ricompare fuori invece che dentro.
*/
.contenuto:has(> .tabella-guscio, > div > .tabella-guscio) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/*
    Il calendario, come le pagine-tabella: la griglia arriva fino in fondo alla finestra e scorre
    dentro di se', con giorni e ore fermi. Prima aveva un'altezza scritta a mano (la finestra meno
    300px) che lasciava una striscia vuota sotto. Solo da scrivania: sul telefono scorre la pagina,
    con i comandi fermi in cima (Calendario.razor.css).
*/
/*
    Lo spazio per il pannello a destra (modulo o dettaglio) lo prende il calendario stesso, con la larghezza scelta dalla
    persona (Calendario.razor.css, 16/10/2026).
*/
@media (min-width: 901px) {
    .contenuto:has(> .cal) {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-height: 0;
    }
}

/*
    Un div messo attorno alla tabella solo per darle una classe (UtentiElenco: .utenti-tabella per
    lo stile delle righe) spezzava la catena flessibile: il div cresceva quanto la tabella, il
    contenuto lo tagliava con overflow hidden e la pagina non scorreva piu' in nessun modo. Un
    involucro cosi' - figlio diretto del contenuto che contiene direttamente la tabella - entra
    nella catena. Le griglie elenco/dettaglio non c'entrano: li' il guscio sta dentro una colonna.
*/
.contenuto:has(> .tabella-guscio, > div > .tabella-guscio) > div:has(> .tabella-guscio) {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-height: 0;
}

.contenuto:has(> .tabella-guscio, > div > .tabella-guscio) .tabella-guscio {
    display: flex;
    flex-direction: column;

    /*
        0 1 auto e non 1 1 auto: con 25 righe corte il guscio si allungava fino in fondo allo
        schermo e la paginazione finiva staccata dall'ultima riga, con un vuoto in mezzo. Cosi'
        il guscio e' alto quanto le righe che ha - e puo' ancora rimpicciolire, quindi quando
        le righe non ci stanno scorre dentro invece di uscire dallo schermo.
    */
    flex: 0 1 auto;
    min-height: 0;
}

.contenuto:has(> .tabella-guscio, > div > .tabella-guscio) .tabella-scorri {
    flex: 1 1 auto;
    min-height: 0;

    /* niente calc(100vh - 210px): quel numero era gia' sbagliato ogni volta che cambiava
       l'altezza dell'intestazione, e nessuno se ne sarebbe accorto subito */
    max-height: none;
}

/*
    Sul telefono, come il calendario, scorre la pagina e non la tabella (28/09/2026): titolo,
    ricerca, linguette, ordine e filtri si mangiavano lo schermo e alle righe restavano due
    dita, con mezzo lead visibile e il resto da scorrere in una finestrella.
*/
@media (max-width: 900px) {
    .contenuto:has(> .tabella-guscio, > div > .tabella-guscio) {
        display: block;
        overflow-y: auto;
    }

    .contenuto:has(> .tabella-guscio, > div > .tabella-guscio) > div:has(> .tabella-guscio),
    .contenuto:has(> .tabella-guscio, > div > .tabella-guscio) .tabella-guscio {
        display: block;
    }

    .contenuto:has(> .tabella-guscio, > div > .tabella-guscio) .tabella-scorri {
        overflow-y: visible;
    }
}

.pagina-testa {
    display: flex;
    align-items: baseline;
    gap: var(--s3);
    margin-bottom: var(--s3);

    /* su schermi stretti i filtri vanno a capo invece di schiacciare il titolo */
    flex-wrap: wrap;
}

/*
    I filtri attivi stanno in fondo alla riga del titolo, spinti a destra: si leggono insieme al
    titolo - sono la ragione per cui si vedono quelle righe li' - e non rubano una riga alla
    tabella, che e' la cosa che si sta guardando.
*/
.pagina-testa .filtri {
    /*
        subito dopo il titolo e non spinti al bordo destro: sono la riga che dice perche' si
        stanno vedendo quelle righe li', e a mille pixel di distanza dal titolo non si legge piu'
        come una cosa sola
    */
    margin-bottom: 0;
}

/* il titolo di una pagina di lavoro non deve gridare: sopra c'e' gia' la briciola che dice
   dove siamo, e lo spazio che si risparmia qui diventa una riga in piu' di tabella */
.pagina-testa h1 { font-size: var(--t-grande); }

/*
    Le azioni della pagina a destra, sulla riga del titolo: una riga intera sotto il titolo per un
    pulsante solo erano trenta pixel tolti alla tabella. Centrate e non sulla linea di base: sono
    pulsanti, non testo.
*/
.pagina-testa-azioni {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-self: center;
    gap: var(--s2);
    margin-left: auto;
}

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

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

.solo-telefono { display: none; }

@media (max-width: 900px) {
    /* sul telefono la barra e' stretta: resta la foto, il nome si legge nel menu */
    .menu-persona .persona-nome { display: none; }

    .app { grid-template-columns: 1fr; }

    .laterale {
        position: fixed;
        inset: 0 auto 0 0;
        width: max-content;
        max-width: 85vw;
        z-index: 40;
        transform: translateX(-100%);
        transition: transform var(--transizione);
        box-shadow: var(--ombra-alta);
    }

    .app.cassetto-aperto .laterale { transform: translateX(0); }

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

    .contenuto {
        --spazio-fondo: var(--s3);
        padding: var(--s3);
        padding-bottom: calc(var(--barra-basso) + var(--s3));
    }

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

    .ricerca-tasto { display: none; }
    .briciole { display: none; }

    /*
        Sul telefono la casella nella barra resta stretta fra campanella, telefono e contatori (08/10/2026, il
        committente: "su mobile la ricerca non funziona" - si scriveva senza vedere niente, e la tendina allineata a
        destra della casella usciva dal bordo sinistro). Toccata, la casella prende tutta la barra, sopra il resto;
        la tendina sta sulla larghezza dello schermo, come quella della campanella.
    */
    .ricerca:focus-within {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 210;
        height: var(--barra-alta);
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0 var(--s3);
        background: var(--barra-fondo);
    }

    .ricerca:focus-within .ricerca-segno { left: calc(var(--s3) + var(--s2)); }

    .ricerca-elenco {
        position: fixed;
        top: calc(var(--barra-alta) + 6px);
        left: var(--s3);
        right: var(--s3);
        width: auto;
        max-height: calc(100dvh - var(--barra-alta) - var(--s5));
    }

    /* tipo e data sulla prima riga, il nome sotto su tutta la larghezza: in tre colonne il nome andava a capo a ogni parola */
    .ricerca-voce {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 2px;
        padding: var(--s2) var(--s3);
    }

    .ricerca-voce-testo { grid-column: 1 / -1; grid-row: 2; }

    .solo-telefono { display: inline-flex; }

    .barra-basso {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 20;
        height: var(--barra-basso);
        display: flex;
        background: var(--superficie);
        border-top: 1px solid var(--riga);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .barra-basso a {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        font-size: var(--t-micro);
        color: var(--grigio);
    }

    .barra-basso a.attiva {
        color: var(--link);
        font-weight: 600;
    }

    .barra-basso a:hover { text-decoration: none; }
}

@media (min-width: 901px) {
    .barra-basso { display: none; }
    .velo { display: none; }
}

/*
    La barra di caricamento: accesa da wk.js al clic su un collegamento, spenta quando la pagina
    nuova e' disegnata. Compare dopo un attimo, cosi' sulle pagine veloci non lampeggia.
*/
html.caricando body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 30%;
    height: 3px;
    background: var(--verde);
    opacity: 0;
    animation: caricamento-appare 0s linear .15s forwards, caricamento-scorre 1.1s ease-in-out .15s infinite;
}

/*
    E in basso a destra il dischetto blu, fermo, come il salvataggio di Doom: si vede anche
    quando la barra in cima e' fuori dallo sguardo. Compare con lo stesso ritardo della barra.
*/
html.caricando body::after {
    content: "";
    position: fixed;
    right: var(--s4);
    bottom: var(--s4);
    z-index: 1000;
    width: 56px;
    height: 56px;
    background: var(--blu);
    opacity: 0;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2 1.5h9.8L14.5 4.2V14a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5V2a.5.5 0 0 1 .5-.5zM4 2.5v3.5h6.5V2.5zM8.3 3h1.4v2.5H8.3zM3.5 8.5v5h9v-5z'/%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'%3E%3Cpath fill-rule='evenodd' d='M2 1.5h9.8L14.5 4.2V14a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5V2a.5.5 0 0 1 .5-.5zM4 2.5v3.5h6.5V2.5zM8.3 3h1.4v2.5H8.3zM3.5 8.5v5h9v-5z'/%3E%3C/svg%3E") center / contain no-repeat;
    animation: caricamento-appare 0s linear .15s forwards;
}

html.caricando { cursor: progress; }

@keyframes caricamento-appare { to { opacity: 1; } }

@keyframes caricamento-scorre {
    from { left: -30%; }
    to { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    html.caricando body::before { width: 100%; animation: caricamento-appare 0s linear .15s forwards; }
}

/* ---------- il menu di chi e' collegato (MenuPersona) ---------- */

.menu-persona { position: relative; flex: 0 0 auto; }

/*
    Campanella e persona stanno a destra. In WK le spinge la casella di ricerca (margin-left: auto); dove la
    ricerca non c'e' (DOWEBAdmin), e sul telefono dove le briciole spariscono, le spinge il primo dei due.
*/
.barra-alta > :is(.campanella, .menu-persona):not(.ricerca ~ *, .campanella ~ *) { margin-left: auto; }

/* il nome e' un pulsante: niente bordo ne' fondo da pulsante, resta la pillola della barra */
.menu-persona button.persona {
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
}

.menu-persona .persona-freccia { font-size: var(--t-micro); opacity: .8; }

.menu-persona-elenco {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    /* sopra le parti ferme delle pagine (la testata del calendario e' a 20: la tendina ci finiva sotto, 09/10/2026), come la ricerca */
    z-index: 200;
    display: flex;
    flex-direction: column;
    width: 260px;
    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);
    overflow: hidden;
}

/* in cima chi e': nome ed email, su un fondo appena velato dell'accento */
.menu-persona-chi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: calc(var(--s1) * -1) 0 var(--s1);
    padding: var(--s3) var(--s4);
    background: var(--verde-tenue);
    border-bottom: 1px solid var(--riga);
}

/* il nome e, a destra, l'ingranaggio che porta a Dati personali > Menu */
.menu-persona-chi .menu-persona-chi-nome {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-size: inherit;
    color: inherit;
}

.menu-persona-chi-nome strong { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.menu-persona-impostazioni {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: -6px -8px -6px 0;
    border-radius: var(--raggio);
    color: var(--grigio);
}

.menu-persona-impostazioni:hover,
.menu-persona-impostazioni:focus-visible {
    background: var(--superficie);
    color: var(--link);
    outline: none;
}

.menu-persona-chi > span:not(.menu-persona-chi-nome) {
    font-size: var(--t-micro);
    color: var(--grigio);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-persona-voce {
    display: flex;
    align-items: center;
    gap: var(--s3);
    width: 100%;
    padding: var(--s2) var(--s4);
    font: inherit;
    text-align: left;
    color: var(--inchiostro);
    background: none;
    border: 0;
    text-decoration: none;
    cursor: pointer;
}

.menu-persona-voce .icona { flex: 0 0 auto; color: var(--link); }

.menu-persona-voce:hover,
.menu-persona-voce:focus-visible {
    background: var(--verde-tenue);
    color: var(--inchiostro);
    text-decoration: none;
    outline: none;
}

/*
    Fissate e recenti (07/10/2026): la riga e' il link, la puntina a destra un pulsante suo, come l'accesso
    rapido di Esplora risorse. Grigia e leggera da ferma; piena per le fissate, vuota per le recenti.
*/
.menu-persona-riga {
    display: flex;
    align-items: center;
}

.menu-persona-riga > .menu-persona-voce { flex: 1 1 auto; min-width: 0; padding-right: var(--s2); }

.menu-persona-riga > .menu-persona-voce span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-persona-puntina {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: var(--s2);
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--raggio);
    color: var(--grigio-tenue);
    cursor: pointer;
}

.menu-persona-puntina.fissata { color: var(--grigio); }

.menu-persona-puntina:hover,
.menu-persona-puntina:focus-visible {
    background: var(--verde-tenue);
    color: var(--link);
    outline: none;
}

.menu-persona-recenti {
    display: flex;
    flex-direction: column;
    margin-top: var(--s1);
    padding-top: var(--s1);
    border-top: 1px solid var(--riga);
}

.menu-persona-gruppo {
    padding: var(--s1) var(--s4) 2px;
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--grigio);
}

.menu-persona-recenti .menu-persona-voce .icona { color: var(--grigio); }

/* Esci sempre in fondo, staccato dal resto: e' l'unica voce che non si disfa */
.menu-persona-esci { margin: 0; border-top: 1px solid var(--riga); }

.menu-persona-esci .menu-persona-voce .icona { color: var(--allarme); }

/* ---------- il sollecito delle cose in ritardo (RitardiCoda) ---------- */

/* sopra a tutto, anche alle altre finestre: e' il lavoro fermo */
.sollecito-velo { z-index: 90; background: rgba(22, 33, 28, .55); }

.finestra.sollecito {
    z-index: 91;
    width: min(620px, calc(100vw - var(--s4) * 2));
    border-top: 4px solid var(--allarme);
}

.sollecito-testa { background: var(--allarme-fondo); }

.sollecito-testa .finestra-titolo { color: var(--allarme); padding: var(--s2) 0; }

.sollecito-testo { margin: 0 0 var(--s3); }

.sollecito-elenco {
    list-style: none;
    margin: 0 0 var(--s3);
    padding: 0;
    border: 1px solid var(--riga);
    border-radius: var(--raggio);
}

.sollecito-elenco li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s2) var(--s3);
}

.sollecito-elenco li + li { border-top: 1px solid var(--riga); }

.sollecito-piede { align-items: center; }

.sollecito-conto { margin-right: auto; color: var(--grigio); font-size: var(--t-piccolo); }