:root {
    --primario: #1e3a8a;
    --primario-chiaro: #2f54c4;
    --sfondo: #f3f5fa;
    --card: #ffffff;
    --testo: #1a2233;
    --testo-2: #5d6779;
    --bordo: #dfe3ec;
    --ok: #15803d;
    --ok-sfondo: #e7f6ec;
    --errore: #b42318;
    --errore-sfondo: #fdecea;
    --raggio: 14px;
    --altezza-menu: 64px;
    color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--sfondo);
    color: var(--testo);
    -webkit-tap-highlight-color: transparent;
}

h1, h2 { line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.1rem; }
code { font-family: ui-monospace, Consolas, monospace; }

/* ---------- barra superiore + menu ---------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: calc(.6rem + env(safe-area-inset-top, 0px)) 1rem .6rem;
    background: var(--primario);
    color: #fff;
}

.brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    margin-right: auto;
}
.brand img { border-radius: 8px; }

.menu { display: flex; gap: .25rem; }
.menu a {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .8rem;
    border-radius: 10px;
    color: rgba(255,255,255,.8);
    text-decoration: none;
    font-weight: 500;
}
.menu a:hover { background: rgba(255,255,255,.1); color: #fff; }
.menu a.attivo { background: rgba(255,255,255,.18); color: #fff; }

.logout { margin: 0; }
.logout button {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: none;
    border: 1px solid rgba(255,255,255,.35);
    color: #fff;
    border-radius: 10px;
    padding: .45rem .8rem;
    font: inherit;
    cursor: pointer;
}

.contenuto {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.25rem 1rem 2rem;
}

/* su telefono il menu diventa una barra in basso, come in un'app */
@media (max-width: 720px) {
    .menu {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        justify-content: space-around;
        gap: 0;
        background: var(--card);
        border-top: 1px solid var(--bordo);
        padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom, 0px));
        z-index: 10;
    }
    .menu a {
        flex: 1;
        flex-direction: column;
        gap: .1rem;
        font-size: .75rem;
        color: var(--testo-2);
        padding: .35rem;
    }
    .menu a:hover { background: none; color: var(--testo-2); }
    .menu a.attivo { background: none; color: var(--primario); }
    .logout button span { display: none; }
    .logout button { border: none; padding: .4rem; }
    .con-menu .contenuto {
        padding-bottom: calc(var(--altezza-menu) + 1.5rem + env(safe-area-inset-bottom, 0px));
    }
}

/* ---------- componenti ---------- */

.intestazione { margin: .25rem 0 1.25rem; }
.intestazione p { margin: 0; color: var(--testo-2); }

.card {
    background: var(--card);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 1.1rem;
    margin-bottom: 1rem;
}
.card-testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .5rem;
}
.card-testa h2 { margin: 0; }

.segnaposto {
    border-style: dashed;
    background: transparent;
    color: var(--testo-2);
}
.segnaposto h2 { color: var(--testo); }
.segnaposto p { margin: 0; }

.statistiche {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    margin-bottom: 1rem;
}
.stat {
    background: var(--card);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: .9rem;
    display: flex;
    flex-direction: column;
}
.stat-valore { font-size: 1.75rem; font-weight: 700; color: var(--primario); line-height: 1.1; }
.stat-label { font-size: .85rem; color: var(--testo-2); }

.lista { list-style: none; margin: 0; padding: 0; }
.riga {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 0;
    border-top: 1px solid var(--bordo);
}
.riga:first-child { border-top: none; }
.riga-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.riga-testo small { color: var(--testo-2); overflow-wrap: anywhere; }
.riga-agente { flex-wrap: wrap; }
.riga-azioni { display: flex; flex-wrap: wrap; gap: .4rem; width: 100%; padding-left: 3.25rem; }
.riga-azioni form { margin: 0; }

.avatar {
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #e3e9fb;
    color: var(--primario);
    display: grid;
    place-items: center;
    font-weight: 700;
}

.badge {
    flex: none;
    font-size: .75rem;
    font-weight: 600;
    padding: .15rem .55rem;
    border-radius: 999px;
}
.badge-ok { background: var(--ok-sfondo); color: var(--ok); }
.badge-off { background: #eceef2; color: var(--testo-2); }

.vuoto { text-align: center; color: var(--testo-2); padding: 1rem 0; }

.avviso {
    border-radius: 10px;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    font-weight: 500;
}
.avviso-ok { background: var(--ok-sfondo); color: var(--ok); }
.avviso-errore { background: var(--errore-sfondo); color: var(--errore); }

.nota { color: var(--testo-2); font-size: .9rem; }

/* ---------- moduli e pulsanti ---------- */

.form { display: flex; flex-direction: column; gap: .9rem; }
.form label { display: flex; flex-direction: column; gap: .3rem; font-weight: 500; font-size: .92rem; }

input[type=text], input[type=password], textarea {
    width: 100%;
    font: inherit;
    font-size: 16px; /* evita lo zoom automatico su iPhone */
    padding: .7rem .8rem;
    border: 1px solid var(--bordo);
    border-radius: 10px;
    background: #fff;
    color: var(--testo);
}
textarea { resize: vertical; min-height: 4.5rem; }
input:focus, textarea:focus { outline: 2px solid var(--primario-chiaro); outline-offset: 1px; border-color: transparent; }

.form-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: end; }

.campo-password { position: relative; display: block; }
.campo-password input { padding-right: 5rem; }
.mostra-password {
    position: absolute;
    right: .4rem; top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--primario-chiaro);
    font: inherit;
    font-size: .85rem;
    padding: .4rem;
    cursor: pointer;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font: inherit;
    font-weight: 600;
    padding: .7rem 1.1rem;
    border-radius: 10px;
    border: 1px solid var(--bordo);
    background: #fff;
    color: var(--testo);
    text-decoration: none;
    cursor: pointer;
}
.btn:hover { border-color: var(--primario-chiaro); }
.btn-primario { background: var(--primario); border-color: var(--primario); color: #fff; }
.btn-primario:hover { background: var(--primario-chiaro); }
.btn-piccolo { padding: .4rem .75rem; font-size: .85rem; }
.btn-pericolo { color: var(--errore); }
.btn-pieno { width: 100%; }

.azioni { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- credenziali ---------- */

.card-credenziali { border-color: var(--primario-chiaro); background: #f5f8ff; }
.credenziali {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .35rem 1rem;
    margin: .75rem 0 1rem;
}
.credenziali dt { color: var(--testo-2); }
.credenziali dd { margin: 0; overflow-wrap: anywhere; font-weight: 600; }

/* ---------- righe cliccabili, indietro ---------- */

.lista li { border-top: 1px solid var(--bordo); }
.lista li:first-child { border-top: none; }
.lista li > .riga { border-top: none; }
.riga-link { color: inherit; text-decoration: none; margin: 0 -.5rem; padding: .75rem .5rem; border-radius: 10px; }
.riga-link:hover, .riga-link:active { background: var(--sfondo); }
.freccia { color: var(--testo-2); font-size: 1.5rem; line-height: 1; }

/* dashboard area manager: riga agente con i conteggi delle attività */
.agente-link {
    display: block;
    color: inherit;
    text-decoration: none;
    margin: 0 -.5rem;
    padding: .8rem .5rem;
    border-radius: 12px;
}
.agente-link:hover, .agente-link:active { background: var(--sfondo); }
.agente-link .riga { padding: 0; border: none; }
/* barra di avanzamento del trimestre sotto ogni agente */
.agente-avanzamento {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-top: .65rem;
    padding: .6rem .7rem;
    border-radius: 12px;
    background: #f3eefe;
}
.agente-av-testa {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
    font-size: .8rem;
    font-weight: 700;
    color: #6d28d9;
}
.agente-av-testa > span:last-child { font-weight: 500; color: var(--testo-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.agente-av-testa strong { color: #0369a1; font-weight: 750; }
.agente-avanzamento .av-esito { display: block; font-size: .8rem; }
.agente-avanzamento .av-esito:not(.esito-ok):not(.esito-manca) { color: var(--testo-2); font-weight: 500; }

.mini-stati {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .45rem;
    margin-top: .65rem;
}
.mini {
    --c: var(--testo-2);
    --c-sfondo: var(--sfondo);
    display: flex;
    flex-direction: column;
    padding: .45rem .6rem;
    border-radius: 10px;
    background: var(--c-sfondo);
    border-left: 3px solid var(--c);
    min-width: 0;
}
.mini strong { font-size: 1.25rem; line-height: 1.15; color: var(--c); font-variant-numeric: tabular-nums; }
.mini span { font-size: .72rem; font-weight: 600; color: var(--c); overflow-wrap: anywhere; line-height: 1.25; }
.mini .mini-euro { margin-top: .1rem; font-size: .8rem; font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mini-trattativa { --c: #2f54c4; --c-sfondo: #eef2fd; }
.mini-rimando    { --c: #b45309; --c-sfondo: #fff6e6; }
.mini-chiusura   { --c: #15803d; --c-sfondo: #e8f8ee; }
.da-fare { color: #c2410c !important; font-weight: 500; }

.indietro {
    display: inline-block;
    color: var(--primario-chiaro);
    text-decoration: none;
    font-weight: 500;
    margin-bottom: .5rem;
}


/* ---------- cruscotto agente: 7 sezioni ---------- */

.cruscotto {
    background: var(--card);
    border: 1px solid var(--bordo);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: 0 6px 24px rgba(30, 58, 138, .07);
}
.cruscotto-testa {
    background: linear-gradient(135deg, var(--primario), var(--primario-chiaro));
    color: #fff;
    padding: 1rem 1.1rem;
}
.cruscotto-testa h2 { margin: 0; font-size: 1.15rem; }
.cruscotto-testa p { margin: .1rem 0 0; opacity: .8; font-size: .85rem; }

.cruscotto-vuoto {
    margin: .7rem .7rem 0;
    padding: .7rem .9rem;
    border-radius: 12px;
    background: #fff8e6;
    color: #8a5a00;
    font-size: .9rem;
}

/* box piccoli a due colonne (anche su telefono), l'Avanzamento occupa tutta la larghezza */
.sezioni {
    list-style: none;
    margin: 0;
    padding: .7rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
}

/* box piccoli: titolo in grassetto, numero sotto, nota piccola */
.sez.sez-tile {
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    min-width: 0;
    padding: .75rem .85rem .7rem;
}
.sez-tile .sez-nome { font-size: 1.05rem; font-weight: 750; line-height: 1.2; }
.sez-tile .sez-valore { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.sez-tile .sez-nota { font-size: .72rem; line-height: 1.25; color: var(--testo-2); }
.sez-tile .campo-con-euro { width: 100%; }

/* campo importo con il simbolo € davanti */
.campo-con-euro { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.campo-con-euro > span { flex: none; font-weight: 750; color: var(--c); font-size: 1.05rem; }
.campo-con-euro input { min-width: 0; }
.sez-tile .campo-con-euro input.sez-campo { flex: 1; width: auto; max-width: none; text-align: left; }
.sez {
    --c: var(--primario-chiaro);
    --c-sfondo: #eef2fd;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .85rem .9rem;
    border-radius: 14px;
    background: var(--c-sfondo);
    border-left: 4px solid var(--c);
}
.sez-num {
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--c);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: .85rem;
}
.sez-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sez-nome { font-weight: 650; font-size: 1rem; }
.sez-nota { font-size: .78rem; color: var(--testo-2); }
.sez-valore {
    flex: none;
    font-size: 1.4rem;
    font-weight: 750;
    color: var(--c);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sez-manager   { --c: #2f54c4; --c-sfondo: #eef2fd; }
.sez-recupero  { --c: #c2410c; --c-sfondo: #fff3eb; }
.sez-recupero.sez-ok { --c: var(--ok); --c-sfondo: var(--ok-sfondo); }
.sez-attesa    { --c: #8a93a5; --c-sfondo: #f4f5f8; }
.sez-nuovo     { --c: #0f766e; --c-sfondo: #e8f7f4; }

/* avanzamento del trimestre, mese per mese */
.sez-avanzamento { --c: #6d28d9; --c-sfondo: #f3eefe; align-items: flex-start; grid-column: 1 / -1; }
.sez-corpo { flex: 1; min-width: 0; }

.av-testa { display: flex; flex-direction: column; gap: .5rem; }
.av-testa > .sez-nome { font-size: 1.1rem; font-weight: 750; }
.av-numeri { display: flex; justify-content: space-between; align-items: flex-end; gap: .75rem; }
.av-dato { display: flex; flex-direction: column; line-height: 1.15; gap: .15rem; }
.av-dato small, .av-dato label { font-size: .85rem; font-weight: 700; color: var(--testo); }
.av-dato strong { font-size: 1.35rem; font-weight: 750; color: var(--c); font-variant-numeric: tabular-nums; }
.av-dato-destra { text-align: right; }
.av-dato-destra strong { color: #0369a1; }
input.av-campo {
    width: 8rem;
    padding: .35rem .5rem;
    font-size: 1.25rem;
    font-weight: 750;
    color: var(--c);
    background: #fff;
    border: 1px solid #d8c8f8;
    font-variant-numeric: tabular-nums;
}

.av-barra-riga { display: flex; align-items: center; gap: .5rem; }
.barra { flex: 1; height: 10px; border-radius: 999px; background: rgba(0, 0, 0, .08); overflow: hidden; }
.barra-piena {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0369a1, #22a55a);
    transition: width .3s;
}
.av-pct { flex: none; min-width: 2.6rem; text-align: right; font-size: .8rem; font-weight: 700; color: var(--testo-2); font-variant-numeric: tabular-nums; }

/* barra del trimestre: segnaposto a fine mese (piano), nomi dei mesi sotto, colore avanti/indietro */
.bt { display: flex; flex-direction: column; gap: .3rem; }
.bt > .av-barra-riga { padding-top: 24px; } /* spazio per i segnaposto sopra la barra */
.bt .av-pct { width: 2.6rem; min-width: 0; }
.barra-trimestre { position: relative; height: 14px; overflow: visible; }
.barra-trimestre.bt-avanti .barra-piena { background: linear-gradient(90deg, #22a55a, #15803d); }
.barra-trimestre.bt-indietro .barra-piena { background: linear-gradient(90deg, #f59e0b, #ea580c); }
/* la punta del segnaposto tocca la barra nel punto del piano */
.bt-pin {
    position: absolute;
    bottom: calc(100% - 3px);
    width: 18px;
    height: 24px;
    margin-left: -9px;
    color: #8a93a5;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3));
}
.bt-pin svg { display: block; width: 100%; height: 100%; }
.bt-pin path { fill: currentColor; }
.bt-pin circle { fill: #fff; }
.bt-pin-ok { color: #15803d; }
.bt-pin-manca { color: #ea580c; }
.bt-pin-rif { width: 22px; height: 29px; margin-left: -11px; z-index: 1; }
.bt-mesi { position: relative; height: 1.05rem; margin-right: 3.1rem; } /* 3.1rem = percentuale + spazio, per allinearsi alla barra */
.bt-mese {
    position: absolute;
    top: 0;
    text-align: center;
    font-size: .72rem;
    font-weight: 650;
    line-height: 1.05rem;
    color: var(--testo-2);
    white-space: nowrap;
    overflow: hidden;
}
.bt-mese + .bt-mese { border-left: 1px dashed rgba(26, 34, 51, .2); }
.bt-mese.bt-ok { color: var(--ok); }
.bt-mese.bt-manca { color: #c2410c; }
.bt-mese-rif { font-weight: 800; }

.av-esito { margin: 0; font-size: .85rem; font-weight: 650; }
.esito-manca { color: #c2410c; }
.esito-ok { color: var(--ok); }

.av-mesi { list-style: none; margin: .85rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.av-mese {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .65rem .75rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(109, 40, 217, .12);
}
.av-mese-testa { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.av-mese-testa strong { font-size: 1.02rem; font-weight: 750; }
.av-stato {
    font-size: .7rem;
    font-weight: 700;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: #eceef2;
    color: var(--testo-2);
    white-space: nowrap;
}
.av-in-corso { border-color: #7dd3fc; }
.av-in-corso .av-stato { background: #e0f2fe; color: #0369a1; }
.av-chiuso .av-stato { background: var(--ok-sfondo); color: var(--ok); }

.av-riga { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .92rem; font-weight: 600; color: var(--testo); }
.av-valore { font-weight: 750; color: var(--testo); font-variant-numeric: tabular-nums; }
.av-obiettivo { color: var(--c); font-size: 1rem; }
.av-dettaglio {
    margin: 0;
    padding: .25rem .5rem;
    border-radius: 8px;
    background: #fff3eb;
    color: #c2410c;
    font-size: .76rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.av-dettaglio.dettaglio-meno { background: var(--ok-sfondo); color: var(--ok); }
.av-mese .barra { height: 7px; }

.somma-mesi { margin: .6rem 0 0; padding: .45rem .6rem; border-radius: 10px; background: #fff6e6; color: #b45309; font-size: .8rem; }

/* campi dell'area manager dentro i mesi */
.campo-perc { display: flex; align-items: center; gap: .25rem; margin-left: auto; color: var(--c); font-weight: 700; white-space: nowrap; }
.av-riga [data-m-base] { min-width: 4.2rem; text-align: right; }
input[data-perc] {
    width: 3.8rem;
    padding: .3rem .45rem;
    text-align: right;
    font-size: 1rem;
    font-weight: 700;
    color: var(--c);
    background: #fff;
    border: 1px solid #d8c8f8;
    font-variant-numeric: tabular-nums;
}
input[data-acq] {
    width: 7.5rem;
    padding: .3rem .45rem;
    text-align: right;
    font-size: 1rem;
    font-weight: 700;
    color: #0369a1;
    background: #fff;
    border: 1px solid #bcdcef;
    font-variant-numeric: tabular-nums;
}
input[data-perc].campo-errato,
input[data-acq].campo-errato,
input.av-campo.campo-errato { color: var(--errore); background: var(--errore-sfondo); outline: 2px solid var(--errore); }

.sez-presto {
    font-size: .75rem;
    font-weight: 600;
    color: var(--testo-2);
    background: #e6e8ee;
    padding: .25rem .65rem;
    border-radius: 999px;
}


/* ---------- scheda agente (area manager): sezioni modificabili ---------- */

.intestazione-agente { display: flex; align-items: center; gap: .9rem; }
.intestazione-agente h1 { margin: 0; }
.intestazione-agente { flex-wrap: wrap; }
.scheda-scrivi { margin-left: auto; }
.avatar-grande { width: 3.25rem; height: 3.25rem; font-size: 1.3rem; }

.cruscotto-modifica .sez-con-campo {
    background: #fff;
    border: 2px solid #c9d5f7;
    border-left: 4px solid var(--c);
}
.cruscotto-modifica .sez-con-campo:focus-within { border-color: var(--c); box-shadow: 0 0 0 3px rgba(47, 84, 196, .15); }
.cruscotto-modifica label.sez-nome { cursor: pointer; }

input.sez-campo {
    flex: none;
    width: 8.5rem;
    max-width: 42%;
    text-align: right;
    font-size: 1.35rem;
    font-weight: 750;
    color: var(--c);
    background: #eef2fd;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: .45rem .6rem;
    font-variant-numeric: tabular-nums;
}
input.sez-campo::placeholder { color: #a9b5d6; }
input.sez-campo.campo-errato { background: var(--errore-sfondo); color: var(--errore); outline: 2px solid var(--errore); }

.cruscotto-piede {
    position: sticky;
    bottom: 0;
    padding: .7rem;
    background: linear-gradient(to top, var(--card) 75%, rgba(255, 255, 255, 0));
}
.stato-modifiche {
    margin: 0 0 .5rem;
    text-align: center;
    font-size: .85rem;
    font-weight: 600;
    color: #c2410c;
}
.btn-da-salvare,
.btn-da-salvare:hover { background: #ea580c; border-color: #ea580c; }

@media (max-width: 720px) {
    .cruscotto-piede { bottom: calc(var(--altezza-menu) + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- selettore trimestri ---------- */

.periodo {
    background: var(--card);
    border: 1px solid var(--bordo);
    border-radius: 16px;
    padding: .6rem;
    margin-bottom: 1rem;
}
.periodo-anno { display: flex; align-items: center; gap: .5rem; padding: 0 .2rem .5rem; }
.periodo-anno strong { font-size: 1.05rem; min-width: 3rem; text-align: center; }
.periodo-freccia {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--sfondo);
    color: var(--primario);
    text-decoration: none;
    font-size: 1.3rem;
    line-height: 1;
}
.periodo-freccia.disabilitata { color: #c5cad6; }
.periodo-oggi {
    margin-left: auto;
    font-size: .82rem;
    font-weight: 600;
    color: var(--primario-chiaro);
    text-decoration: none;
}
.periodo-trimestri {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .35rem;
    padding: .25rem;
    border-radius: 12px;
    background: var(--sfondo);
}
.trimestre {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .45rem .2rem;
    border-radius: 9px;
    color: var(--testo);
    text-decoration: none;
    line-height: 1.2;
}
.trimestre strong { font-size: 1.05rem; }
.trimestre small { font-size: .68rem; color: var(--testo-2); white-space: nowrap; }
.trimestre.in-corso small { color: #15803d; font-weight: 700; }
.trimestre.scelto { background: var(--primario); color: #fff; box-shadow: 0 2px 8px rgba(30, 58, 138, .25); }
.trimestre.scelto small { color: rgba(255, 255, 255, .85); }
.trimestre.futuro { color: #a3aab8; }
.trimestre.futuro.scelto { color: #fff; }
span.trimestre { cursor: not-allowed; }

.avviso-storico { background: #eef2fd; color: var(--primario); font-weight: 400; }

.att-sposta { margin: .7rem 0 0; }

/* ---------- attività dell'agente ---------- */

.conteggio {
    min-width: 1.9rem;
    padding: .1rem .55rem;
    border-radius: 999px;
    background: #e3e9fb;
    color: var(--primario);
    font-weight: 700;
    text-align: center;
}

.riepilogo-stati { display: flex; flex-wrap: wrap; gap: .4rem; margin: .25rem 0 .9rem; }
.chip {
    --c: var(--testo-2);
    font-size: .8rem;
    font-weight: 600;
    padding: .25rem .65rem;
    border-radius: 999px;
    background: var(--sfondo);
    color: var(--c);
}
.chip strong { margin-left: .15rem; }
.chip-trattativa, .stato-trattativa { --c: #2f54c4; }
.chip-rimando, .stato-rimando       { --c: #b45309; }
.chip-chiusura, .stato-chiusura     { --c: #15803d; }

.btn-aggiungi { font-size: 1.05rem; padding: .85rem; }
.btn-aggiungi span { font-size: 1.2rem; line-height: 1; }

.attivita-lista { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.att {
    border: 1px solid var(--bordo);
    border-radius: 16px;
    padding: .9rem;
    background: #fff;
    transition: background .2s, border-color .2s;
}
.att.att-chiusa { border-color: #a7e3bf; background: #f5fdf8; }
.att-testa { display: flex; align-items: flex-start; gap: .75rem; }
.att-titolo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.att-titolo strong { font-size: 1.05rem; overflow-wrap: anywhere; }
.att-titolo small { color: var(--testo-2); overflow-wrap: anywhere; }
.att-note {
    margin: .6rem 0 0;
    padding: .5rem .7rem;
    border-radius: 10px;
    background: var(--sfondo);
    color: var(--testo-2);
    font-size: .9rem;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* tre interruttori stile iPhone */
.interruttori { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .8rem; }
.interruttore {
    --c: #34c759;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: .6rem .25rem;
    border-radius: 12px;
    background: var(--sfondo);
    font-size: .8rem;
    font-weight: 600;
    color: var(--testo-2);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.interruttore-trattativa { --c: #2f54c4; }
.interruttore-rimando    { --c: #f59e0b; }
.interruttore-chiusura   { --c: #22a55a; }
.interruttore:has(.switch:checked) { color: var(--c); }

.switch {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex: none;
    width: 51px;
    height: 31px;
    margin: 0;
    border-radius: 31px;
    background: #dcdfe5;
    cursor: pointer;
    transition: background .25s;
}
.switch::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .22);
    transition: transform .25s;
}
.switch:checked { background: var(--c); }
.switch:checked::before { transform: translateX(20px); }
.switch:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }

.att-importo {
    margin-top: .7rem;
    padding: .75rem;
    border-radius: 12px;
    background: #e3f6ea;
    animation: apri .2s ease-out;
}
@keyframes apri { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.att-importo label { display: block; margin-bottom: .4rem; font-weight: 600; color: #15803d; font-size: .9rem; }
.importo-riga { display: flex; gap: .5rem; align-items: center; }
.campo-euro { display: flex; align-items: center; gap: .35rem; flex: 1; min-width: 0; }
.btn-conclude { flex: none; background: #16a34a; border-color: #16a34a; color: #fff; }
.btn-conclude:hover { background: #15803d; border-color: #15803d; }
.btn-conclude:disabled { opacity: .7; }

/* attività conclusa */
.att.att-conclusa { border-color: #86d9a6; background: #f0fbf4; }
.att-esito {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    margin-top: .8rem;
    padding: .7rem .85rem;
    border-radius: 12px;
    background: #dcf5e5;
}
.esito-badge {
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
    background: #16a34a;
    padding: .25rem .65rem;
    border-radius: 999px;
}
.esito-importo { flex: 1; font-size: 1.3rem; font-weight: 750; color: #15803d; font-variant-numeric: tabular-nums; }
.esito-riapri {
    border: none;
    background: none;
    padding: .3rem;
    color: var(--testo-2);
    font: inherit;
    font-size: .85rem;
    text-decoration: underline;
    cursor: pointer;
}
.campo-euro span { font-weight: 700; color: #15803d; font-size: 1.1rem; }
input[data-importo] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #15803d;
    text-align: right;
    font-variant-numeric: tabular-nums;
    padding: .45rem .6rem;
}
input[data-importo].campo-errato { color: var(--errore); outline: 2px solid var(--errore); }

/* vista area manager: stati in sola lettura */
.att-stati { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.stato {
    --c: var(--testo-2);
    font-size: .8rem;
    font-weight: 600;
    padding: .2rem .65rem;
    border-radius: 999px;
    color: var(--c);
    background: var(--sfondo);
    border: 1px solid currentColor;
}

/* modulo attività: foglio che sale dal basso */
dialog.foglio {
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    max-height: 92dvh;
    margin: auto auto 0;
    padding: 0;
    border: none;
    border-radius: 22px 22px 0 0;
    overflow: auto;
    background: var(--card);
    color: var(--testo);
}
dialog.foglio[open] { animation: sali .25s ease-out; }
dialog.foglio::backdrop { background: rgba(15, 23, 42, .45); }
@keyframes sali { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (min-width: 721px) {
    dialog.foglio { margin: auto; border-radius: 22px; }
}
.foglio .form { padding: 1.1rem 1.1rem .75rem; }
.foglio-testa { display: flex; align-items: center; justify-content: space-between; }
.foglio-testa h2 { margin: 0; font-size: 1.2rem; }
.foglio-chiudi {
    width: 2.2rem;
    height: 2.2rem;
    border: none;
    border-radius: 50%;
    background: var(--sfondo);
    color: var(--testo-2);
    font-size: 1rem;
    cursor: pointer;
}
.foglio-elimina { padding: 0 1.1rem calc(1.1rem + env(safe-area-inset-bottom, 0px)); }
.campi-due { display: grid; grid-template-columns: 1.6fr 1fr; gap: .7rem; }
.obbligatorio { color: var(--errore); }

.toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--altezza-menu) + 1rem + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 50;
    max-width: calc(100% - 2rem);
    padding: .7rem 1rem;
    border-radius: 12px;
    background: #1f2937;
    color: #fff;
    font-size: .9rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

/* ---------- login ---------- */

.senza-menu .contenuto {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
}
.login-box {
    width: 100%;
    max-width: 380px;
    background: var(--card);
    border: 1px solid var(--bordo);
    border-radius: 20px;
    padding: 1.75rem 1.25rem;
    box-shadow: 0 10px 30px rgba(30, 58, 138, .08);
}
.login-logo { text-align: center; margin-bottom: 1.25rem; }
.login-logo img { border-radius: 18px; }
.login-logo h1 { margin: .75rem 0 .25rem; }
.login-logo p { margin: 0; color: var(--testo-2); }
.login-box .nota { text-align: center; margin: 1.25rem 0 0; }

/* ---------- Pausa caffè: pagine dell'area manager e classifiche ---------- */

.schede-pausa {
    display: flex;
    gap: .35rem;
    overflow-x: auto;
    margin: 0 0 1rem;
    padding-bottom: .15rem;
    scrollbar-width: none;
}
.schede-pausa a {
    flex: none;
    padding: .45rem .85rem;
    border-radius: 999px;
    border: 1px solid var(--bordo);
    background: var(--card);
    color: var(--testo-2);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
}
.schede-pausa a.attiva { background: var(--primario); border-color: var(--primario); color: #fff; }

.interruttore-pausa form { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0; }
.interruttore-pausa .ip-testo { flex: 1; min-width: 14rem; }
.interruttore-pausa h2 { margin: 0 0 .2rem; }
.interruttore-pausa .nota { margin: 0; }
.interruttore-pausa.acceso { border-color: #86d4a1; background: var(--ok-sfondo); }
.interruttore-pausa.acceso h2 { color: var(--ok); }

.avviso-da-verificare { display: block; background: #fff6e6; color: #b45309; text-decoration: none; }
.titolo-sezione { margin: 1.5rem 0 .25rem; }
.classifiche { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 1rem; }

.classifica { list-style: none; margin: .25rem 0 0; padding: 0; }
.classifica li {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .5rem;
    border-radius: 10px;
    font-variant-numeric: tabular-nums;
}
.classifica li:nth-child(odd) { background: var(--sfondo); }
.classifica li.io { background: #e3e9fb; font-weight: 700; }
.cl-pos { flex: none; width: 1.8rem; text-align: center; font-weight: 700; color: var(--testo-2); }
.cl-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-punti { font-weight: 700; color: var(--primario); }
.classifica-vuota { margin: .25rem 0 0; color: var(--testo-2); font-size: .9rem; }

/* pulsanti Oggi / Settimana / Mese sopra le classifiche */
.periodi {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    margin: .25rem 0 .5rem;
    padding: 3px;
    border-radius: 10px;
    background: var(--sfondo);
}
.periodi button {
    padding: .35rem .4rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--testo-2);
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
}
.periodi button.attivo { background: var(--card); color: var(--primario); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.classifica-gioco .card-testa { margin-bottom: .25rem; }
.interruttore-piccolo h2 { font-size: 1rem; }

/* domande del quiz */
.azioni-domande { margin-bottom: 1rem; }
.filtri { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.filtri a {
    padding: .35rem .75rem;
    border-radius: 999px;
    background: #eceef2;
    color: var(--testo-2);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
}
.filtri a strong { margin-left: .2rem; }
.filtri a.attivo { background: var(--testo); color: #fff; }
.domande { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.domanda {
    background: var(--card);
    border: 1px solid var(--bordo);
    border-left: 4px solid #f59e0b;
    border-radius: var(--raggio);
    padding: .9rem 1rem;
}
.domanda.stato-approvata { border-left-color: #22a55a; }
.domanda.stato-disattivata { border-left-color: #b8bfcc; opacity: .75; }
.domanda-testa { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.domanda-testo { margin: .5rem 0; font-weight: 650; }
.domanda-risposte { margin: 0 0 .5rem; padding-left: 1.4rem; }
.domanda-risposte li { margin: .1rem 0; }
.domanda-risposte li.giusta { color: var(--ok); font-weight: 700; }
.domanda-spiegazione { margin: 0 0 .4rem; padding: .45rem .6rem; border-radius: 8px; background: var(--sfondo); font-size: .9rem; }
.domanda-fonte { margin: 0 0 .6rem; color: var(--testo-2); font-size: .8rem; }
.domanda .azioni form { margin: 0; }
.badge-stato { font-size: .75rem; font-weight: 700; padding: .15rem .6rem; border-radius: 999px; }
.badge-da_verificare { background: #fff6e6; color: #b45309; }
.badge-approvata { background: var(--ok-sfondo); color: var(--ok); }
.badge-disattivata { background: #eceef2; color: var(--testo-2); }
.btn-approva { color: var(--ok); border-color: #86d4a1; }
.approva-tutte {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin: 0 0 1rem;
    padding: .6rem .8rem;
    border-radius: 12px;
    background: #fff6e6;
}
.approva-tutte .nota { margin: 0; }
.tutto-approvato { margin: 0 0 1rem; padding: .55rem .8rem; border-radius: 12px; background: var(--ok-sfondo); color: var(--ok); font-weight: 600; font-size: .9rem; }
.filtro-prodotto { display: flex; align-items: center; gap: .6rem; margin: 0 0 .6rem; }
.filtro-prodotto label { font-weight: 600; font-size: .9rem; flex: none; }
.filtro-prodotto select { flex: 1; min-width: 0; padding: .5rem .7rem; }
.domanda-argomento { flex: 1; min-width: 0; font-size: .78rem; font-weight: 600; color: var(--testo-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.da-approvare { border-color: #f5c77a; background: #fffaf0; }
.da-approvare.tutto-ok { border-color: #86d4a1; background: var(--ok-sfondo); }
.da-approvare.tutto-ok h2 { color: var(--ok); }
.da-approvare-lista { list-style: none; margin: .25rem 0 .75rem; padding: 0; }
.da-approvare-lista li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .45rem 0; border-top: 1px solid rgba(0, 0, 0, .06); }
.da-approvare-lista li:first-child { border-top: none; }
.da-approvare-lista a { color: var(--testo); font-weight: 600; text-decoration: none; }
.da-approvare .nota { margin: .5rem 0 0; }

.risposte-campo { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.risposte-campo legend { font-weight: 500; font-size: .92rem; margin-bottom: .4rem; padding: 0; }
.risposta-riga { display: flex; align-items: center; gap: .5rem; }
.risposta-riga input[type=radio] { width: 1.3rem; height: 1.3rem; flex: none; accent-color: var(--ok); }
.risposta-lettera { flex: none; width: 1.2rem; font-weight: 700; color: var(--testo-2); }
select {
    width: 100%;
    font: inherit;
    font-size: 16px;
    padding: .65rem .8rem;
    border: 1px solid var(--bordo);
    border-radius: 10px;
    background: #fff;
    color: var(--testo);
}
input[type=file] { font: inherit; font-size: .95rem; max-width: 100%; }
.spunta { flex-direction: row !important; align-items: center; gap: .5rem !important; }
.spunta input { width: 1.15rem; height: 1.15rem; }

/* frasi del Memory */
.frase-riga { display: flex; flex-direction: column; gap: .3rem; padding-top: .75rem; border-top: 1px solid var(--bordo); }
.frase-riga:first-of-type { border-top: none; padding-top: 0; }
.form .frase-ok { flex-direction: row; align-items: center; gap: .4rem; font-size: .88rem; color: var(--ok); }
.form .frase-prodotto { flex-direction: row; align-items: center; gap: .6rem; }
details.frase-riga > summary { display: flex; align-items: center; gap: .6rem; cursor: pointer; list-style: none; padding: .2rem 0; }
details.frase-riga > summary::-webkit-details-marker { display: none; }
details.frase-riga > summary::after { content: '›'; margin-left: auto; font-size: 1.4rem; color: var(--testo-2); transition: transform .2s; }
details.frase-riga[open] > summary::after { transform: rotate(90deg); }
details.frase-riga[open] { padding-bottom: .75rem; }
details.frase-riga label { font-weight: 500; font-size: .92rem; }
.frase-scheda { display: grid; grid-template-columns: 1fr; gap: .1rem; margin: .5rem 0 .75rem; padding: .6rem .75rem; border-radius: 10px; background: var(--sfondo); font-size: .9rem; }
.frase-scheda dt { font-size: .75rem; font-weight: 700; text-transform: uppercase; color: var(--testo-2); margin-top: .35rem; }
.frase-scheda dt:first-child { margin-top: 0; }
.frase-scheda dd { margin: 0; }
.frase-nome { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.frase-nome > span { display: flex; flex-wrap: wrap; gap: .3rem; }
details.frase-riga.fuori-gioco > summary img { filter: grayscale(1); opacity: .55; }
details.frase-riga.fuori-gioco > summary strong { color: var(--testo-2); }
.frase-gioco { display: flex; justify-content: flex-end; margin-top: .4rem; }
.memoria-esclusi { background: #eef2fd; }
.frase-scheda ul { margin: 0; padding-left: 1.1rem; }
.frase-prodotto img { width: 64px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid var(--bordo); flex: none; }
.frasi-testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.frasi-testa .nota { margin: 0; flex: 1; min-width: 14rem; }
.frasi-sito { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; border-color: var(--primario-chiaro); background: #f5f8ff; }
.frasi-sito .nota { margin: 0; flex: 1; min-width: 14rem; }

/* documenti */
.doc-icona {
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: #fdecea;
    color: var(--errore);
    font-size: .68rem;
    font-weight: 800;
}
.riga-testo a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.riga-testo a:hover strong { text-decoration: underline; }

@media (max-width: 420px) {
    .statistiche { gap: .5rem; }
    .stat { padding: .7rem; }
    .stat-valore { font-size: 1.4rem; }
    .riga-azioni { padding-left: 0; }
}

/* ---------- Utility: pagina "blog" con sezioni e schede dei file ---------- */

mark { background: #fff0a3; color: inherit; border-radius: 3px; padding: 0 .1em; }
input[type=search] {
    width: 100%;
    font: inherit;
    font-size: 16px;
    padding: .7rem .8rem;
    border: 1px solid var(--bordo);
    border-radius: 10px;
    background: #fff;
    color: var(--testo);
}
input[type=search]:focus { outline: 2px solid var(--primario-chiaro); outline-offset: 1px; border-color: transparent; }

.utility-testa { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1rem; }
.utility-testa .intestazione { margin: .25rem 0 0; }
.utility-azioni { margin: 0; }

/* ricerca */
.cerca-file {
    position: relative;
    display: flex;
    gap: .5rem;
    margin: 0 0 .4rem;
    padding: .35rem;
    border-radius: 16px;
    background: var(--card);
    border: 1px solid var(--bordo);
    box-shadow: 0 4px 14px rgba(30, 58, 138, .06);
}
.cerca-lente { display: grid; place-items: center; padding-left: .5rem; font-size: 1.05rem; opacity: .6; }
.cerca-file input { flex: 1; min-width: 0; border: none; background: transparent; padding-left: .2rem; }
.cerca-file input:focus { outline: none; }
.cerca-file .btn { border-radius: 12px; }
.chiedi-maria-riga { margin: 0 0 1.4rem; font-size: .88rem; color: var(--testo-2); }
.esito-ricerca { margin: 0 0 1rem; font-size: .92rem; color: var(--testo-2); }
.esito-ricerca a { white-space: nowrap; }
.titolo-blocco { margin: 1.6rem 0 .8rem; font-size: 1.2rem; }
.titolo-blocco:first-of-type { margin-top: .4rem; }

/* sezioni: copertine */
.griglia-sezioni { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.1rem; }
.scard {
    --c1: #1e3a8a; --c2: #3b82f6;
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    background: var(--card);
    border: 1px solid var(--bordo);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(30, 58, 138, .06);
    transition: transform .18s ease, box-shadow .18s ease;
}
.scard:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(15, 23, 42, .06), 0 16px 36px rgba(30, 58, 138, .13); }
.scard-link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }
.scard-copertina {
    position: relative;
    display: grid;
    gap: 3px;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--c1), var(--c2));
    overflow: hidden;
}
.scard-copertina img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; background: #fff; }
.mosaico-2 { grid-template-columns: 1fr 1fr; }
.mosaico-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.mosaico-3 img:first-child { grid-row: span 2; }
.mosaico-1, .mosaico-2, .mosaico-3 { padding: 0; }
.scard-copertina::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .18)); pointer-events: none; }
.scard-emoji-grande { place-self: center; font-size: 3.6rem; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .25)); }
.scard-emoji { /* l'emoji della sezione, a cavallo tra copertina e testo */
    align-self: flex-start;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin: -1.5rem 0 0 1rem;
    z-index: 1;
    border-radius: 14px;
    background: var(--card);
    font-size: 1.55rem;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .15);
}
.scard-corpo { padding: .55rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.scard-corpo h3 { margin: 0; font-size: 1.15rem; line-height: 1.25; }
.scard-corpo p { margin: 0; color: var(--testo-2); font-size: .92rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.scard-meta { margin-top: auto; padding-top: .35rem; font-size: .8rem; font-weight: 600; color: var(--c1); }
.scard-admin { display: flex; gap: .35rem; padding: 0 1.1rem 1rem; }
.scard-admin form { margin: 0; }
.scard-nuova {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 15rem;
    padding: 1.5rem;
    border: 2px dashed #c7cfe0;
    border-radius: 18px;
    background: transparent;
    color: var(--testo-2);
    font: inherit;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.scard-nuova:hover { border-color: var(--primario-chiaro); background: #f5f8ff; color: var(--primario); }
.scard-nuova > span { font-size: 2.2rem; line-height: 1; }
.scard-nuova small { font-size: .82rem; }

/* pagina di una sezione */
.torna-sezioni { display: inline-block; margin: 0 0 .7rem; font-weight: 600; color: var(--primario-chiaro); text-decoration: none; }
.sezione-hero {
    --c1: #1e3a8a; --c2: #3b82f6;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.2rem;
    margin: 0 0 1.2rem;
    padding: 1.5rem 1.4rem;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--c1), var(--c2));
    color: #fff;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .15);
}
.sezione-hero::before { content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.sezione-hero > div { flex: 1; min-width: 14rem; position: relative; }
.sezione-hero h1 { margin: 0 0 .25rem; font-size: 1.6rem; }
.sezione-hero p { margin: 0 0 .4rem; opacity: .92; max-width: 46rem; }
.sezione-hero-meta { font-size: .85rem; font-weight: 600; opacity: .85; }
.sezione-hero-emoji { display: grid; place-items: center; width: 4.2rem; height: 4.2rem; border-radius: 18px; background: rgba(255, 255, 255, .2); font-size: 2.3rem; position: relative; }
.sezione-hero-azioni { display: flex; flex-wrap: wrap; gap: .4rem; position: relative; }
.btn-chiaro { background: rgba(255, 255, 255, .95); border-color: transparent; color: var(--testo); }
.vuoto-sezione { text-align: center; }

/* schede dei file */
.griglia-file { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.striscia-file {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(210px, 240px);
    gap: 1rem;
    overflow-x: auto;
    margin: 0 -1rem;
    padding: .2rem 1rem 1rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}
.striscia-file > .fcard { scroll-snap-align: start; }
@media (min-width: 721px) { /* sul computer c'è spazio: griglia invece della striscia da scorrere */
    .striscia-file { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); overflow: visible; margin: 0; padding: 0; }
}
.fcard {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    background: var(--card);
    border: 1px solid var(--bordo);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: transform .18s ease, box-shadow .18s ease;
    scroll-margin-top: 5rem;
}
.fcard:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(30, 58, 138, .12); }
.fcard:target { border-color: var(--primario-chiaro); box-shadow: 0 0 0 3px #dbe4fb; }
.fanteprima {
    --s: #eef1f6;
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    background: var(--s);
    overflow: hidden;
    text-decoration: none;
    color: var(--testo);
}
.fanteprima.cat-pdf { --s: #fdecea; }
.fanteprima.cat-documenti { --s: #e8efff; }
.fanteprima.cat-fogli { --s: #e4f6eb; }
.fanteprima.cat-presentazioni { --s: #fff0e3; }
.fanteprima.cat-immagini { --s: #f3eafd; }
.fanteprima.cat-video { --s: #1f2937; }
.fanteprima.cat-audio { --s: #ddf5f2; }
.fanteprima > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; background: #fff; }
.fanteprima.cat-video > img, .fanteprima.cat-immagini > img { object-position: center; }
.fanteprima-icona { font-size: 2.6rem; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .12)); }
.fanteprima-tipo {
    position: absolute;
    left: .55rem;
    top: .55rem;
    padding: .12rem .45rem;
    border-radius: 6px;
    background: rgba(17, 24, 39, .72);
    color: #fff;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .03em;
}
.fanteprima-play {
    position: absolute;
    display: grid;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #111827;
    font-size: 1.15rem;
    padding-left: .2rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}
/* anteprime di testo (Word, Excel, PowerPoint): un foglietto in miniatura */
.mini-pagina, .mini-slide, .mini-foglio {
    position: absolute;
    inset: .9rem .9rem 0;
    padding: .8rem .85rem;
    border-radius: 6px 6px 0 0;
    background: #fff;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .12);
    overflow: hidden;
    font-size: .62rem;
    line-height: 1.45;
    color: #374151;
}
.mini-pagina strong { display: block; margin-bottom: .3rem; font-size: .78rem; color: #1e3a8a; line-height: 1.25; }
.mini-pagina p { margin: 0; }
.mini-pagina::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2.2rem; background: linear-gradient(transparent, #fff); }
.mini-slide {
    inset: auto .9rem;
    top: 50%;
    transform: translateY(-50%);
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .3rem;
    background: linear-gradient(135deg, #fff, #fff7ef);
    border-left: 4px solid #f97316;
}
.mini-slide strong { font-size: .85rem; line-height: 1.2; color: #111827; }
.mini-foglio { padding: 0; }
.mini-foglio table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mini-foglio th, .mini-foglio td { border: 1px solid #d9e2d9; padding: .2rem .3rem; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-foglio th { background: #dcfce7; color: #14532d; }

.fcard-corpo { flex: 1; display: flex; flex-direction: column; gap: .3rem; padding: .75rem .85rem .7rem; }
.fcard-sezione { font-size: .72rem; font-weight: 700; color: var(--testo-2); text-transform: uppercase; letter-spacing: .03em; }
.fcard h3 { margin: 0; font-size: .98rem; line-height: 1.3; overflow-wrap: anywhere; }
.fcard h3 a { color: inherit; text-decoration: none; }
.fcard h3 a:hover { text-decoration: underline; }
.fcard-desc { margin: 0; font-size: .85rem; color: var(--testo-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fcard-estratto { display: block; padding: .45rem .55rem; border-radius: 8px; background: var(--sfondo); color: var(--testo); font-size: .82rem; text-decoration: none; }
.fcard-estratto small { display: block; margin-top: .2rem; color: var(--primario-chiaro); font-weight: 600; }
.fcard-piede { margin-top: auto; padding-top: .35rem; display: flex; align-items: center; gap: .35rem; font-size: .76rem; color: var(--testo-2); }
.fcard-piede > span:first-child { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fcard { position: relative; }
.fcard > .badge-maria { position: absolute; top: .55rem; right: .55rem; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
.fcard-tasto {
    flex: none;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--bordo);
    border-radius: 50%;
    background: #fff;
    color: var(--testo-2);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
}
.fcard-tasto:hover { border-color: var(--primario-chiaro); color: var(--primario); }
.badge-maria {
    flex: none;
    font-size: .68rem;
    font-weight: 700;
    padding: .12rem .45rem;
    border-radius: 999px;
    background: #fff6e6;
    color: #b45309;
    cursor: help;
}
.badge-maria.stato-letto { background: var(--ok-sfondo); color: var(--ok); }
.badge-maria.stato-non_previsto { background: #eceef2; color: var(--testo-2); }
.file-avviso { margin: 0; padding: .45rem .6rem; border-radius: 8px; background: #fff6e6; color: #92400e; font-size: .83rem; }
.rileggi-tutti { margin: 2rem 0 0; text-align: center; }
.rileggi-tutti .nota { margin: 0 0 .4rem; }

/* area manager: cestino, modalità "Seleziona", eliminazione della sezione, barra di caricamento */
.fcard-piede form { margin: 0; }
.fcard-cestino:hover { border-color: var(--errore); color: var(--errore); background: var(--errore-sfondo); }
.btn-pericolo-pieno { background: var(--errore); border-color: var(--errore); color: #fff; }
.btn-pericolo-pieno:hover { background: #8f1c13; border-color: #8f1c13; }
.btn:disabled { opacity: .45; cursor: default; }
.barra-strumenti { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 .9rem; }
.barra-strumenti .nota { margin: 0; }
.fcard-spunta { display: none; position: absolute; left: .55rem; top: .55rem; z-index: 3; cursor: pointer; }
.fcard-spunta input { position: absolute; opacity: 0; }
.fcard-spunta span[aria-hidden] {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    border: 2px solid #fff;
    background: rgba(17, 24, 39, .45);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    color: #fff;
    font-weight: 800;
}
.fcard-spunta input:checked + span { background: var(--primario-chiaro); }
.fcard-spunta input:checked + span::after { content: '✓'; }
.selezione-attiva .fcard-spunta { display: block; }
.selezione-attiva .fcard { cursor: pointer; }
.selezione-attiva .fcard .fanteprima-tipo { left: 2.9rem; }
.selezione-attiva .fcard:hover { transform: none; }
.fcard.scelta { border-color: var(--primario-chiaro); box-shadow: 0 0 0 3px #c9d6fb; }
.fcard.scelta .fanteprima { opacity: .8; }
.barra-selezione {
    position: fixed;
    left: 50%;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 70;
    width: min(680px, calc(100% - 1.5rem));
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: .8rem .9rem;
    border-radius: 18px;
    background: #111827;
    color: #fff;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
    animation: sali .2s ease-out;
}
.bs-testa { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.bs-testa .link-pulsante { color: #93c5fd; }
.bs-azioni { display: flex; flex-wrap: wrap; gap: .45rem; }
.bs-azioni select { flex: 1 1 12rem; width: auto; padding: .45rem .6rem; font-size: 15px; }
.selezione-attiva .maria-widget { display: none; } /* la barra prende il suo posto */
.selezione-attiva .contenuto { padding-bottom: 9rem; }
.elimina-sezione { flex-direction: column; align-items: stretch; gap: .45rem; border-top: 1px solid var(--bordo); padding-top: .9rem !important; margin: 0 1.1rem; padding-left: 0 !important; padding-right: 0 !important; }
.elimina-sezione strong { font-size: .9rem; color: var(--errore); }
.elimina-sezione .btn { width: 100%; justify-content: flex-start; text-align: left; }
.elimina-sezione small { font-weight: 400; opacity: .8; }
/* doppioni fermati al caricamento */
.avviso-doppioni { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; background: #fff6e6; color: #92400e; }
.doppione { display: flex; flex-direction: column; gap: .35rem; padding: .8rem .9rem; border-radius: 14px; border: 1px solid var(--bordo); border-left: 5px solid #f59e0b; background: #fffdf7; }
.doppione-identico { border-left-color: var(--errore); background: #fff8f7; }
.doppione-etichetta { align-self: flex-start; font-size: .75rem; font-weight: 800; padding: .15rem .55rem; border-radius: 999px; background: #fff0d6; color: #92400e; }
.doppione-identico .doppione-etichetta { background: var(--errore-sfondo); color: var(--errore); }
.doppione strong { overflow-wrap: anywhere; }
.doppione strong small { font-weight: 400; color: var(--testo-2); }
.doppione p { margin: 0; font-size: .9rem; }
.doppione .azioni form { margin: 0; }
.elimina-sezione label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; font-weight: 500; }
.progresso { display: flex; flex-direction: column; gap: .35rem; }
.progresso-binario { height: .7rem; border-radius: 999px; background: #e3e8f2; overflow: hidden; }
.progresso-barra { width: 0; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primario-chiaro), #7c3aed); transition: width .2s ease; }
.progresso span { font-size: .85rem; font-weight: 600; color: var(--testo-2); }
@media (max-width: 720px) {
    .barra-selezione { bottom: calc(var(--altezza-menu) + .6rem + env(safe-area-inset-bottom, 0px)); }
}

/* moduli nei fogli: scelta dei file, icona e colore della sezione */
.foglio .foglio-elimina { display: flex; flex-wrap: wrap; gap: .5rem; }
.foglio .foglio-elimina form { margin: 0; }
.zona-file {
    position: relative;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: .25rem !important;
    padding: 1.4rem 1rem;
    border: 2px dashed #c7cfe0;
    border-radius: 14px;
    background: #f8faff;
    text-align: center;
    cursor: pointer;
}
.zona-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.zona-file-icona { font-size: 1.8rem; }
.zona-file small { color: var(--testo-2); font-weight: 400; }
.zona-file.scelti { border-color: var(--ok); background: var(--ok-sfondo); }
.scelta-emoji, .scelta-colore { border: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.scelta-emoji legend, .scelta-colore legend { font-weight: 500; font-size: .92rem; margin-bottom: .4rem; padding: 0; }
.scelta-emoji label, .scelta-colore label { position: relative; display: block !important; cursor: pointer; }
.scelta-emoji input, .scelta-colore input { position: absolute; opacity: 0; }
.scelta-emoji span { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: var(--sfondo); font-size: 1.35rem; border: 2px solid transparent; }
.scelta-emoji input:checked + span { border-color: var(--primario-chiaro); background: #e8eefc; }
.scelta-colore span:first-of-type { display: block; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--bordo); }
.scelta-colore input:checked + span { box-shadow: 0 0 0 3px var(--primario-chiaro); }
.scelta-emoji input:focus-visible + span, .scelta-colore input:focus-visible + span { outline: 2px solid var(--primario-chiaro); outline-offset: 2px; }

@media (max-width: 720px) {
    .griglia-sezioni { grid-template-columns: 1fr; }
    .griglia-file { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
    .fcard-corpo { padding: .6rem .65rem .6rem; }
    .fcard h3 { font-size: .9rem; }
    .fcard-desc { font-size: .8rem; }
    .sezione-hero { padding: 1.2rem 1.1rem; border-radius: 18px; }
    .sezione-hero h1 { font-size: 1.35rem; }
    .sezione-hero-emoji { width: 3.4rem; height: 3.4rem; font-size: 1.9rem; }
    .utility-azioni { width: 100%; }
    .utility-azioni .btn { flex: 1; }
}
@media (max-width: 380px) {
    .griglia-file { grid-template-columns: 1fr; }
}

.tabella-scorre { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.mini-tabella { border-collapse: collapse; font-size: .85rem; margin: .1rem 0; }
.mini-tabella th, .mini-tabella td { border: 1px solid var(--bordo); padding: .25rem .45rem; text-align: left; vertical-align: top; background: #fff; }
.mini-tabella th { background: #eef2fb; font-weight: 700; }

/* ---------- Maria: chat in basso a destra (chat_maria() in layout.php, logica in app.js) ---------- */

.visivamente-nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.link-pulsante { font: inherit; background: none; border: none; padding: 0; color: var(--primario-chiaro); font-weight: 600; cursor: pointer; text-decoration: underline; }

.maria-widget {
    --maria-grad: linear-gradient(135deg, #7c3aed 0%, #2f54c4 100%);
    --maria-fondo: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    position: fixed;
    right: calc(1.25rem + env(safe-area-inset-right, 0px));
    bottom: var(--maria-fondo);
    z-index: 60;
    font-size: 15px;
}
/* icona */
.maria-lancia {
    position: relative;
    width: 3.75rem;
    height: 3.75rem;
    border: none;
    border-radius: 50%;
    background: var(--maria-grad);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(76, 29, 149, .35), 0 2px 4px rgba(0, 0, 0, .12);
    transition: transform .2s ease, box-shadow .2s ease;
}
.maria-lancia:hover { transform: scale(1.06); box-shadow: 0 10px 24px rgba(76, 29, 149, .42), 0 2px 4px rgba(0, 0, 0, .12); }
.maria-lancia:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 3px; }
.maria-lancia > span[aria-hidden] { position: absolute; inset: 0; display: grid; place-items: center; transition: transform .25s ease, opacity .2s ease; }
.maria-lancia-chiudi { opacity: 0; transform: rotate(-90deg) scale(.6); }
.maria-widget.aperta .maria-lancia-apri { opacity: 0; transform: rotate(90deg) scale(.6); }
.maria-widget.aperta .maria-lancia-chiudi { opacity: 1; transform: none; }
.maria-punto { position: absolute; top: .1rem; right: .1rem; width: .9rem; height: .9rem; border-radius: 50%; background: #ef4444; border: 2px solid #fff; }
/* finestra */
.maria-pannello {
    position: absolute;
    right: 0;
    bottom: calc(100% + .9rem);
    width: 390px;
    height: min(640px, calc(100vh - 7.5rem));
    height: min(640px, calc(100dvh - 7.5rem));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 22px;
    background: #f7f7fb;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28), 0 4px 12px rgba(15, 23, 42, .12);
    transform-origin: bottom right;
    animation: maria-apre .22s cubic-bezier(.2, .9, .3, 1.2);
}
.maria-widget.senza-animazione .maria-pannello { animation: none; }
@keyframes maria-apre { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
.maria-testa {
    flex: none;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .8rem .7rem .8rem 1rem;
    background: var(--maria-grad);
    color: #fff;
}
.maria-testa .maria-avatar { background: rgba(255, 255, 255, .22); box-shadow: none; }
.maria-testa-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.maria-testa-nome strong { font-size: 1.05rem; }
.maria-testa-nome small { opacity: .85; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.maria-testa-nome small::before { content: ''; display: inline-block; width: .5rem; height: .5rem; margin-right: .35rem; border-radius: 50%; background: #4ade80; vertical-align: .05em; }
.maria-tasto {
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
}
.maria-tasto:hover, .maria-tasto:focus-visible { background: rgba(255, 255, 255, .18); outline: none; }
.maria-corpo { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1rem .85rem .5rem; scrollbar-width: thin; scrollbar-color: #d4cdee transparent; }
/* messaggi */
.maria-chat { display: flex; flex-direction: column; gap: .8rem; }
.msg { display: flex; gap: .5rem; align-items: flex-end; max-width: 100%; animation: msg-entra .25s ease-out; }
@keyframes msg-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.msg .bolla { min-width: 0; padding: .65rem .85rem; border-radius: 18px; overflow-wrap: anywhere; line-height: 1.45; }
.msg .bolla > p:first-child { margin-top: 0; }
.msg .bolla > p:last-child { margin-bottom: 0; }
.msg .bolla p { margin: .45rem 0; }
.msg-maria .bolla { background: #fff; border: 1px solid #e6e3f3; border-bottom-left-radius: 6px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.msg-utente { justify-content: flex-end; }
.msg-utente .bolla { background: var(--primario); color: #fff; border-bottom-right-radius: 6px; max-width: 85%; white-space: pre-wrap; }
.maria-avatar {
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #7c3aed, #2f54c4);
    color: #fff;
    font-weight: 800;
    font-size: .9rem;
    box-shadow: 0 2px 6px rgba(47, 84, 196, .3);
}
.maria-fonte { margin: .55rem 0; padding: .5rem .65rem; border-left: 3px solid #7c3aed; border-radius: 4px 10px 10px 4px; background: #f6f3ff; font-size: .93rem; }
.maria-fonte > p { margin: 0 0 .4rem; }
.maria-da { display: flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--testo-2); text-decoration: none; }
.maria-da strong { color: var(--testo); }
.maria-da > span:nth-child(2) { flex: 1; min-width: 0; }
.maria-apri { flex: none; font-weight: 700; color: #fff; background: var(--primario-chiaro); padding: .2rem .6rem; border-radius: 999px; }
.maria-da:hover .maria-apri { background: var(--primario); }
.maria-altri, .maria-tutti { font-size: .82rem; color: var(--testo-2); }
.maria-elenco { margin: .3rem 0 0; padding-left: 1.1rem; }
.maria-elenco li { margin: .2rem 0; }
.maria-scrive { display: inline-flex; gap: .25rem; padding: .2rem 0; }
.maria-scrive i { width: .45rem; height: .45rem; border-radius: 50%; background: #a99bd6; animation: puntini 1s infinite ease-in-out; }
.maria-scrive i:nth-child(2) { animation-delay: .15s; }
.maria-scrive i:nth-child(3) { animation-delay: .3s; }
@keyframes puntini { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } }
.maria-suggerimenti { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0 .3rem 2.5rem; }
.maria-suggerimenti button {
    font: inherit;
    font-size: .84rem;
    padding: .4rem .8rem;
    border-radius: 999px;
    border: 1px solid #c9bdf3;
    background: #fff;
    color: #5b21b6;
    cursor: pointer;
}
.maria-suggerimenti button:hover { background: #f6f3ff; }
/* campo per scrivere */
.maria-scrivi { flex: none; display: flex; align-items: center; gap: .5rem; padding: .65rem .75rem calc(.65rem + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid #ebe8f5; }
.maria-scrivi input {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 16px;
    padding: .65rem 1rem;
    border: 1px solid var(--bordo);
    border-radius: 999px;
    background: #f7f7fb;
    color: var(--testo);
}
.maria-scrivi input:focus { outline: 2px solid #a78bfa; outline-offset: 0; border-color: transparent; background: #fff; }
.maria-scrivi button {
    flex: none;
    width: 2.7rem;
    height: 2.7rem;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: var(--maria-grad);
    color: #fff;
    cursor: pointer;
}
.maria-scrivi button:disabled { opacity: .5; cursor: default; }

/* telefono: icona sopra la barra del menu, chat a tutto schermo */
@media (max-width: 720px) {
    .con-menu:not(.vista-cliente) .maria-widget { --maria-fondo: calc(var(--altezza-menu) + .9rem + env(safe-area-inset-bottom, 0px)); }
    .maria-widget { right: calc(.9rem + env(safe-area-inset-right, 0px)); }
    .maria-lancia { width: 3.4rem; height: 3.4rem; }
    .maria-widget.aperta .maria-lancia { display: none; }
    .maria-pannello {
        position: fixed;
        inset: 0;
        width: auto;
        height: auto;
        border-radius: 0;
        animation-name: maria-sale;
    }
    @keyframes maria-sale { from { transform: translateY(100%); } to { transform: none; } }
    .maria-testa { padding-top: calc(.8rem + env(safe-area-inset-top, 0px)); }
    .maria-suggerimenti { margin-left: 0; }
    body.maria-schermo { overflow: hidden; }
}
/* mentre un file è a tutto schermo la chat non si vede */
body.schermo-pieno .maria-widget { display: none; }
@media print { .maria-widget { display: none; } }

/* ---------- Utility: file mostrato al cliente (senza menu) ---------- */

.vista-cliente .topbar { display: none; }
.vista-cliente .contenuto { max-width: none; padding: 0 1rem 1.5rem; }
.vista-corpo { max-width: 1100px; margin: 0 auto; }
.vista-barra {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 -1rem 1rem;
    padding: calc(.5rem + env(safe-area-inset-top, 0px)) 1rem .5rem;
    background: var(--card);
    border-bottom: 1px solid var(--bordo);
}
.vista-indietro {
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 1.9rem;
    line-height: 1;
    color: var(--primario);
    text-decoration: none;
    background: var(--sfondo);
}
.vista-titolo { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.vista-titolo strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vista-titolo small { color: var(--testo-2); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) {
    [data-schermo-intero] span { display: none; } /* sul telefono basta il simbolo ⛶ */
    .vista-barra .btn-piccolo { padding: .45rem .6rem; }
}
.vista-descrizione { margin: 0 0 1rem; padding: .7rem .9rem; border-radius: 12px; background: #f5f8ff; border: 1px solid #dbe4fb; }
.vista-immagine { margin: 0; text-align: center; }
.vista-immagine img { max-width: 100%; max-height: calc(100vh - 7rem); max-height: calc(100dvh - 7rem); object-fit: contain; border-radius: 10px; background: #fff; }
.vista-video { display: block; width: 100%; max-height: calc(100dvh - 8rem); border-radius: 12px; background: #000; }
.vista-audio { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2rem 1rem; border-radius: 16px; background: var(--card); border: 1px solid var(--bordo); }
.vista-audio span { font-size: 4rem; line-height: 1; }
.vista-audio audio { width: 100%; max-width: 520px; }
.vista-apri { display: flex; flex-direction: column; align-items: center; gap: .8rem; padding: 2.5rem 1rem; text-align: center; border-radius: 16px; background: var(--card); border: 1px solid var(--bordo); }
.vista-apri .nota { margin: 0; max-width: 26rem; }
.vista-apri-icona { font-size: 4rem; line-height: 1; }
.vista-apri .btn { font-size: 1.05rem; padding: .85rem 1.4rem; }

/* PDF disegnato da pdf.js (assets/vista-pdf.js): pagine una sotto l'altra */
.pdf-pagine { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.pdf-pagina {
    position: relative;
    width: 100%;
    max-width: 900px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 6px 18px rgba(30, 58, 138, .08);
    scroll-margin-top: 4.5rem;
}
.pdf-pagina:not(.pronta)::after { content: ''; position: absolute; inset: 0; margin: auto; width: 2rem; height: 2rem; border-radius: 50%; border: 3px solid #dfe3ec; border-top-color: var(--primario-chiaro); animation: gira 1s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.pdf-pagina canvas { display: block; width: 100%; height: 100%; }
.pdf-contatore {
    position: fixed;
    left: 50%;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 20;
    padding: .3rem .8rem;
    border-radius: 999px;
    background: rgba(17, 24, 39, .75);
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* ---------- a tutto schermo: niente bordi, niente riquadri ---------- */
.vista-chiudi { display: none; }
body.schermo-pieno { overflow: hidden; }
.a-tutto-schermo {
    position: fixed;
    inset: 0;
    z-index: 100;
    margin: 0;
    padding: 0;
    overflow: auto;
    overscroll-behavior: contain;
    background: #0f1115;
    scrollbar-width: none;
}
.a-tutto-schermo::-webkit-scrollbar { display: none; }
.a-tutto-schermo .vista-chiudi {
    display: grid;
    place-items: center;
    position: fixed;
    top: calc(.7rem + env(safe-area-inset-top, 0px));
    right: .7rem;
    z-index: 110;
    width: 2.8rem;
    height: 2.8rem;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
}
/* immagine e video: riempiono lo schermo mantenendo le proporzioni */
.a-tutto-schermo .vista-immagine { height: 100%; display: flex; align-items: center; justify-content: center; }
.a-tutto-schermo .vista-immagine img { max-width: 100%; max-height: 100%; border-radius: 0; background: transparent; }
.a-tutto-schermo .vista-video { width: 100%; height: 100%; max-height: none; border-radius: 0; object-fit: contain; }
/* PDF: una pagina per schermata, si scorre una alla volta */
.a-tutto-schermo.vista-pdf { scroll-snap-type: y mandatory; }
.a-tutto-schermo .pdf-pagine { gap: 0; }
.a-tutto-schermo .pdf-pagina {
    height: 100vh;
    height: 100dvh;
    max-width: none;
    aspect-ratio: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    box-shadow: none;
    scroll-snap-align: start;
}
.a-tutto-schermo .pdf-pagina canvas { width: auto; height: auto; max-width: 100%; max-height: 100%; background: #fff; }
.a-tutto-schermo .pdf-pagina:not(.pronta)::after { border-color: #374151; border-top-color: #fff; }
.a-tutto-schermo .pdf-contatore { z-index: 110; }
/* Word / Excel: foglio bianco a tutto schermo, senza riquadri */
.a-tutto-schermo.vista-documento, .a-tutto-schermo.vista-tabelle { background: #fff; }
.a-tutto-schermo .vista-documento { gap: 0; max-width: 860px; margin: 0 auto; padding: 3.5rem 1.5rem 3rem; }
.a-tutto-schermo.vista-tabelle .vista-documento { max-width: none; }
.a-tutto-schermo .vista-sezione { border: none; border-radius: 0; box-shadow: none; padding: 0 0 1.5rem; font-size: 1.12rem; }
.a-tutto-schermo .vista-sezione.vista-evidenziata { box-shadow: none; background: #fffbe0; }
/* PowerPoint: una diapositiva per schermata, testo grande al centro */
.a-tutto-schermo.vista-diapositive { scroll-snap-type: y mandatory; background: #fff; }
.a-tutto-schermo .vista-documento.tipo-diapositiva { gap: 0; max-width: none; padding: 0; }
.a-tutto-schermo .tipo-diapositiva .vista-sezione {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    border-bottom: 1px solid var(--bordo);
    scroll-snap-align: start;
    overflow: hidden;
}
.a-tutto-schermo .slide-testo { width: 100%; max-width: 1000px; }
.a-tutto-schermo .tipo-diapositiva h2 { font-size: clamp(1.6rem, 5vw, 3.2rem); line-height: 1.15; margin-bottom: 1rem; }
.a-tutto-schermo .tipo-diapositiva p { font-size: clamp(1.1rem, 2.6vw, 1.8rem); }
.a-tutto-schermo.vista-documento .vista-chiudi, .a-tutto-schermo.vista-tabelle .vista-chiudi,
.a-tutto-schermo.vista-diapositive .vista-chiudi { background: rgba(17, 24, 39, .7); }

.vista-documento { display: flex; flex-direction: column; gap: 1rem; }
.vista-sezione {
    background: var(--card);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 1.1rem 1.2rem;
    scroll-margin-top: 4.5rem;
    font-size: 1.02rem;
    line-height: 1.6;
}
.vista-sezione h2 { font-size: 1.15rem; margin: .4rem 0 .5rem; color: var(--primario); }
.vista-sezione h2:first-child { margin-top: 0; }
.vista-sezione p { margin: .5rem 0; }
.vista-sezione.vista-evidenziata { border-color: #f5b301; box-shadow: 0 0 0 3px #fff0a3; }
.tipo-diapositiva .vista-sezione { min-height: 12rem; box-shadow: 0 4px 14px rgba(30, 58, 138, .08); }
.tipo-diapositiva .vista-sezione h2 { font-size: 1.35rem; }
.vista-numero { display: block; margin-bottom: .35rem; color: var(--testo-2); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.vista-tabella { border-collapse: collapse; font-size: .9rem; min-width: 100%; }
.vista-tabella th, .vista-tabella td { border: 1px solid var(--bordo); padding: .4rem .6rem; text-align: left; vertical-align: top; }
.vista-tabella th { position: sticky; top: 0; background: #eef2fb; }
.vista-tabella tbody tr:nth-child(even) td { background: #fafbfd; }

/* ---------- Notifiche: campanella, conversazioni, chat ---------- */

.campanella {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
}
.campanella:hover, .campanella.attivo { background: rgba(255, 255, 255, .16); }
.campanella-numero {
    position: absolute;
    top: .05rem;
    right: .02rem;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: #ef4444;
    border: 2px solid var(--primario);
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    line-height: 1.05rem;
    text-align: center;
    animation: campanella-entra .3s ease-out;
}
@keyframes campanella-entra { from { transform: scale(.4); } to { transform: none; } }
.toast-notifica {
    top: calc(4.2rem + env(safe-area-inset-top, 0px));
    bottom: auto;
    text-decoration: none;
    max-width: min(30rem, calc(100% - 2rem));
    background: #1e3a8a;
}

.banner-push {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 0 0 1rem;
    padding: .75rem .9rem;
    border-radius: 14px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
}
.banner-push > span { font-size: 1.5rem; }
.banner-push > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.banner-push small { color: var(--testo-2); }

/* elenco delle conversazioni (area manager) */
.lista-conversazioni { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; }
.lista-conversazioni li + li { border-top: 1px solid var(--bordo); }
.conv-riga { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; color: inherit; text-decoration: none; }
.conv-riga:hover { background: var(--sfondo); }
.conv-riga.disattivo { opacity: .55; }
.conv-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.conv-testo small { color: var(--testo-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-riga.da-leggere .conv-testo small { color: var(--testo); font-weight: 600; }
.conv-lato { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; flex: none; }
.conv-lato small { color: var(--testo-2); font-size: .75rem; }
.conv-riga.da-leggere .conv-lato small { color: #16a34a; font-weight: 700; }
.conv-numero { min-width: 1.4rem; height: 1.4rem; padding: 0 .35rem; border-radius: 999px; background: #16a34a; color: #fff; font-size: .75rem; font-weight: 800; display: grid; place-items: center; }

/* la conversazione */
.pagina-chat .contenuto { max-width: 820px; padding-bottom: 0; }
.chat-testa { display: flex; align-items: center; gap: .7rem; margin: 0 0 .7rem; }
.chat-indietro { font-size: 2rem; line-height: 1; color: var(--primario); text-decoration: none; padding: 0 .3rem; }
.chat-chi { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-chi strong { font-size: 1.1rem; }
.chat-chi small { color: var(--testo-2); }
.chat-filtri { display: flex; gap: .35rem; overflow-x: auto; margin: 0 -1rem .8rem; padding: 0 1rem .2rem; scrollbar-width: none; }
.chat-filtri button {
    flex: none;
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    padding: .4rem .8rem;
    border-radius: 999px;
    border: 1px solid var(--bordo);
    background: var(--card);
    color: var(--testo-2);
    cursor: pointer;
}
.chat-filtri button.attivo { background: var(--primario); border-color: var(--primario); color: #fff; }
.chat-filtri input { flex: 1 0 9rem; min-width: 9rem; padding: .4rem .8rem; border-radius: 999px; font-size: 15px; }
.chat-importanti {
    position: sticky;
    top: calc(3.6rem + env(safe-area-inset-top, 0px));
    z-index: 4;
    display: flex;
    gap: .4rem;
    align-items: center;
    overflow-x: auto;
    margin: 0 0 .8rem;
    padding: .5rem .6rem;
    border-radius: 12px;
    background: #fffbea;
    border: 1px solid #fde68a;
    scrollbar-width: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
}
.chat-importanti strong { flex: none; font-size: .82rem; color: #92400e; }
.chat-importanti button {
    flex: none;
    max-width: 16rem;
    font: inherit;
    font-size: .8rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    border: 1px solid #fcd34d;
    background: #fff;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-messaggi { display: flex; flex-direction: column; gap: .35rem; padding-bottom: 1rem; min-height: 40vh; }
.chat-vuota, .chat-nessuno { margin: 2rem auto; max-width: 28rem; text-align: center; color: var(--testo-2); }
.msg-giorno { display: flex; justify-content: center; margin: .8rem 0 .4rem; }
.msg-giorno span { padding: .2rem .7rem; border-radius: 999px; background: #e3e8f2; color: var(--testo-2); font-size: .75rem; font-weight: 700; }
.msg-riga { display: flex; }
.msg-riga.mia { justify-content: flex-end; }
.msg-bolla {
    max-width: min(78%, 34rem);
    padding: .5rem .7rem .3rem;
    border-radius: 16px;
    background: var(--card);
    border: 1px solid var(--bordo);
    border-bottom-left-radius: 5px;
    overflow-wrap: anywhere;
    box-shadow: 0 1px 1px rgba(15, 23, 42, .04);
}
.mia .msg-bolla { background: #dbe7ff; border-color: #c3d4fb; border-radius: 16px; border-bottom-right-radius: 5px; }
.msg-bolla p { margin: .1rem 0 .2rem; white-space: normal; line-height: 1.4; }
.msg-meta { display: flex; justify-content: flex-end; align-items: center; gap: .3rem; font-size: .7rem; color: var(--testo-2); margin-top: .1rem; }
.msg-spunte { font-weight: 800; letter-spacing: -.15em; color: #94a3b8; }
.msg-spunte.letto { color: #2563eb; }
.msg-stella, .msg-elimina { border: none; background: none; padding: 0 .1rem; cursor: pointer; color: #94a3b8; font-size: .95rem; line-height: 1; }
.msg-stella.attiva { color: #f59e0b; }
.msg-elimina { font-size: .75rem; opacity: 0; transition: opacity .15s; }
.msg-riga:hover .msg-elimina, .msg-riga:focus-within .msg-elimina { opacity: .8; }
@media (pointer: coarse) { .msg-elimina { opacity: .5; } }
.msg-avviso { display: inline-block; margin-bottom: .25rem; font-size: .72rem; font-weight: 800; color: #9a3412; }
.msg-foto img { display: block; max-width: 100%; width: 260px; max-height: 340px; object-fit: cover; border-radius: 10px; background: #eee; }
.msg-video { display: block; width: 280px; max-width: 100%; border-radius: 10px; background: #000; }
.msg-vocale { display: flex; align-items: center; gap: .4rem; }
.msg-vocale audio { width: 250px; max-width: 100%; height: 40px; }
.msg-file { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: 10px; background: rgba(255, 255, 255, .7); border: 1px solid var(--bordo); color: inherit; text-decoration: none; min-width: 12rem; }
.msg-file:hover strong { text-decoration: underline; }
.msg-file-icona { font-size: 1.6rem; }
.msg-file span:last-child { display: flex; flex-direction: column; min-width: 0; }
.msg-file small { color: var(--testo-2); font-size: .75rem; }
.msg-sparito { color: var(--testo-2); font-style: italic; }
.msg-promemoria { display: flex; flex-direction: column; gap: .3rem; padding: .55rem .7rem; border-radius: 12px; background: #fffbea; border: 1px solid #fde68a; min-width: 13rem; }
.msg-promemoria.scaduto { background: #fff1f0; border-color: #fca5a5; }
.msg-promemoria.fatto { background: #f0fdf4; border-color: #bbf7d0; }
.msg-promemoria.fatto p { text-decoration: line-through; color: var(--testo-2); }
.prom-testa { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-weight: 700; font-size: .85rem; }
.prom-stato { font-size: .7rem; padding: .1rem .45rem; border-radius: 999px; background: #fef3c7; color: #92400e; white-space: nowrap; }
.prom-scaduto { background: #fee2e2; color: #b91c1c; }
.prom-fatto { background: #dcfce7; color: #15803d; }
.prom-privato { color: var(--testo-2); }
.prom-fai { align-self: flex-start; color: #15803d; border-color: #86efac; }
.msg-sistema { display: flex; justify-content: center; align-items: center; gap: .2rem; margin: .3rem 0; }
.msg-sistema > span {
    max-width: 90%;
    padding: .45rem .8rem;
    border-radius: 12px;
    background: #eef1f6;
    color: var(--testo);
    font-size: .85rem;
    text-align: center;
}
.msg-sistema small { display: block; color: var(--testo-2); font-size: .7rem; margin-top: .1rem; }
.msg-sistema a { font-weight: 700; }
.lampeggia .msg-bolla, .msg-sistema.lampeggia > span { animation: lampeggia 1.5s ease-out; }
@keyframes lampeggia { 0%, 40% { box-shadow: 0 0 0 4px #fcd34d; } 100% { box-shadow: none; } }

/* barra per scrivere, registrazione, invio */
.chat-scrivi, .chat-registra, .chat-invio {
    position: sticky;
    bottom: 0;
    z-index: 6;
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    margin: 0 -1rem;
    padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom, 0px));
    background: var(--sfondo);
    border-top: 1px solid var(--bordo);
}
.chat-scrivi textarea {
    flex: 1;
    min-width: 0;
    min-height: 2.75rem;
    max-height: 10rem;
    padding: .65rem 1rem;
    border-radius: 22px;
    resize: none;
    line-height: 1.35;
}
.chat-tondo {
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: var(--primario);
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
}
.chat-allega .chat-tondo { background: var(--card); color: var(--primario); border: 1px solid var(--bordo); }
.chat-allega { position: relative; }
.chat-menu {
    position: absolute;
    left: 0;
    bottom: calc(100% + .5rem);
    z-index: 8;
    display: flex;
    flex-direction: column;
    min-width: 14rem;
    padding: .4rem;
    border-radius: 14px;
    background: var(--card);
    border: 1px solid var(--bordo);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .18);
}
.chat-menu label, .chat-menu button {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .7rem;
    border: none;
    border-radius: 10px;
    background: none;
    font: inherit;
    font-weight: 500;
    color: var(--testo);
    text-align: left;
    cursor: pointer;
}
.chat-menu label:hover, .chat-menu button:hover { background: var(--sfondo); }
.chat-menu span { font-size: 1.2rem; }
.chat-registra { align-items: center; }
.reg-punto { width: .8rem; height: .8rem; border-radius: 50%; background: #ef4444; animation: pulsa 1s infinite; }
@keyframes pulsa { 50% { opacity: .3; } }
.chat-registra [data-reg-tempo] { font-weight: 700; font-variant-numeric: tabular-nums; }
.reg-testo { flex: 1; color: var(--testo-2); }
.chat-invio { flex-direction: column; align-items: stretch; }
.chat-invio span { font-size: .85rem; color: var(--testo-2); }
.scelta-utility { list-style: none; margin: 0; padding: 0; max-height: 55vh; overflow-y: auto; }
.scelta-utility button { display: flex; gap: .6rem; align-items: center; width: 100%; padding: .6rem .5rem; border: none; border-bottom: 1px solid var(--bordo); background: none; font: inherit; text-align: left; cursor: pointer; }
.scelta-utility button:hover { background: var(--sfondo); }
.scelta-utility button span:first-child { font-size: 1.4rem; }
.scelta-utility button span:last-child { display: flex; flex-direction: column; min-width: 0; }
.scelta-utility small { color: var(--testo-2); }
input[type=datetime-local] { width: 100%; font: inherit; font-size: 16px; padding: .65rem .8rem; border: 1px solid var(--bordo); border-radius: 10px; background: #fff; color: var(--testo); }

@media (max-width: 720px) {
    .chat-scrivi, .chat-registra, .chat-invio { bottom: calc(var(--altezza-menu) + env(safe-area-inset-bottom, 0px) - 1px); padding-bottom: .6rem; }
    .pagina-chat .contenuto { padding-bottom: calc(var(--altezza-menu) + env(safe-area-inset-bottom, 0px)); }
    .msg-bolla { max-width: 86%; }
    .topbar { gap: .4rem; }
}