/* Fascicolo chiamate - componenti (versione 2, 17/10/2026).
 * I COLORI non stanno qui: sono i gettoni --bg, --ink, --accent... definiti in temi.css, generato da
 * strumenti/genera_temi.py con il controllo dei contrasti. Qui si usano solo var(--...).
 * Si parte dal cellulare: le regole per gli schermi larghi stanno nei @media (min-width). */

/* ------------------------------------------------------------------ base */
:root {
  --f-ui: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --r: 10px; --r-s: 7px;
  --barra-h: 3.5rem;
  /* 6.4 (sviluppi/21 §15, WCAG 2.4.11): la striscia del percorso guidato sta ferma sotto la barra (la sua altezza la mette app.js, 0 sul
   * telefono e senza percorso); tutto quello che si tiene sotto la barra usa la somma, cosi' niente finisce sotto la striscia */
  --giornata-percorso-h: 0px;
  --alto-fisso: calc(var(--barra-h) + var(--giornata-percorso-h));
  --ombra: 0 1px 2px rgb(16 24 40 / .06), 0 1px 3px rgb(16 24 40 / .08);
}
[data-testo="grande"] { font-size: 112.5%; }
[data-testo="molto-grande"] { font-size: 125%; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: .9375rem/1.55 var(--f-ui); }
a { color: var(--accent); text-underline-offset: .15em; }
a:not(:hover) { text-decoration-thickness: 1px; }
[data-stile="contrasto"] a { text-decoration-thickness: 2px; }
h1, h2, h3 { line-height: 1.25; margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.muto { color: var(--muted); }
.piccolo { font-size: .85rem; }
.nascosto-vista { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icona { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.salta { position: absolute; left: .5rem; top: -4rem; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: .6rem 1rem; border-radius: var(--r-s); }
.salta:focus { top: .5rem; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ------------------------------------------------------------------ struttura */
.app { min-height: 100vh; }
.laterale {
  position: fixed; inset: 0 0 0 auto; z-index: 40; width: min(86vw, 19rem);
  display: flex; flex-direction: column; background: var(--nav); color: var(--nav-ink);
  border-left: 1px solid var(--line); transform: translateX(105%); transition: transform .2s ease;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y;
}
/* 3.1 (Ale 20/10/2026): sul cellulare il menu si apre da destra; con il menu aperto la pagina sotto non scorre */
body.menu-aperto { overflow: hidden; }
.laterale :focus-visible { outline-color: var(--nav-focus); }
/* chiuso, sul cellulare il menu e' fuori schermo e NON raggiungibile con Tab (visibility) */
.laterale { visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }
.menu-aperto .laterale, .laterale:target { transform: none; visibility: visible; transition: transform .2s ease; box-shadow: 0 0 2rem rgb(0 0 0 / .35); }
.velo { position: fixed; inset: 0; z-index: 30; background: rgb(0 0 0 / .45); }
.velo[hidden] { display: none; }
.marchio-riga { display: flex; align-items: center; padding-right: .6rem; }
.marchio { display: flex; align-items: center; gap: .75rem; padding: 1.1rem 1.1rem .9rem; color: inherit; text-decoration: none; }
.marchio .logo { width: 2.4rem; height: 2.4rem; border-radius: .7rem; background: var(--nav-active); color: var(--nav-active-ink); display: grid; place-items: center; flex: none; }
.marchio .logo .icona { width: 1.4rem; height: 1.4rem; }
.marchio b { display: block; font-size: 1.02rem; }
.marchio small { display: block; color: var(--nav-muted); font-size: .78rem; letter-spacing: .02em; }
.chiudi-menu { margin-left: auto; color: var(--nav-ink); }
.laterale .sezioni { padding: .25rem .6rem; flex: 1 1 auto; }
.laterale .sezioni ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.laterale .sezioni a {
  display: flex; align-items: center; gap: .75rem; padding: .62rem .75rem; border-radius: var(--r-s);
  color: var(--nav-ink); text-decoration: none; font-weight: 500;
}
.laterale .sezioni a:hover { background: color-mix(in srgb, var(--nav-active) 55%, transparent); }
.laterale .sezioni a[aria-current="page"] { background: var(--nav-active); color: var(--nav-active-ink); }
.laterale .sezioni .conta { margin-left: auto; min-width: 1.4rem; padding: 0 .4rem; border-radius: 99px; background: var(--err); color: var(--surface); font-size: .75rem; text-align: center; line-height: 1.4rem; }
/* sottomenu (2.7): <details>, si apre e si chiude con un clic, anche da tastiera */
.laterale .gruppo > summary {
  display: flex; align-items: center; gap: .75rem; padding: .62rem .75rem; border-radius: var(--r-s);
  color: var(--nav-ink); font-weight: 500; cursor: pointer; list-style: none;
}
.laterale .gruppo > summary::-webkit-details-marker { display: none; }
.laterale .gruppo > summary:hover { background: color-mix(in srgb, var(--nav-active) 55%, transparent); }
.laterale .gruppo > summary .icona:last-child { margin-left: auto; width: 1rem; height: 1rem; transition: transform .15s ease; }
.laterale .gruppo > summary .conta + .icona { margin-left: .4rem; }
.laterale .gruppo[open] > summary .icona:last-child { transform: rotate(180deg); }
.laterale .gruppo > ul { margin: .15rem 0 .2rem 1.35rem; padding-left: .45rem; border-left: 1px solid color-mix(in srgb, var(--nav-muted) 40%, transparent); }
/* 5.1: un sottomenu dentro un sottomenu (il terzo livello) rientra meno, per lasciare spazio ai nomi */
.laterale .gruppo .gruppo > ul { margin-left: .9rem; padding-left: .35rem; }
.laterale-piede { padding: .8rem; border-top: 1px solid color-mix(in srgb, var(--nav-muted) 30%, transparent); display: grid; gap: .7rem; }
.chi { display: flex; align-items: center; gap: .65rem; color: var(--nav-ink); text-decoration: none; padding: .35rem; border-radius: var(--r-s); }
.chi:hover { background: color-mix(in srgb, var(--nav-active) 55%, transparent); }
.chi .avatar { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--nav-active); color: var(--nav-active-ink); display: grid; place-items: center; font-weight: 700; font-size: .85rem; flex: none; }
.chi span { min-width: 0; }
/* 2.7: nome e livello vanno a capo invece di essere tagliati ("Trascrizione e registrazione") */
.chi b, .chi small { display: block; overflow-wrap: anywhere; }
.chi small { color: var(--nav-muted); font-size: .78rem; }
.esci { display: flex; align-items: center; gap: .6rem; color: var(--nav-muted); text-decoration: none; padding: .4rem .45rem; border-radius: var(--r-s); font-size: .9rem; }
.esci:hover { color: var(--nav-ink); }

/* interruttore chiaro / scuro / automatico */
.interruttore { display: flex; margin: 0; padding: .2rem; border: 0; border-radius: 99px; background: color-mix(in srgb, var(--nav-muted) 18%, transparent); }
.interruttore button { flex: 1; display: flex; justify-content: center; align-items: center; gap: .35rem; padding: .35rem .3rem; border: 0; border-radius: 99px; background: none; color: var(--nav-ink); cursor: pointer; font-size: .78rem; }
.interruttore button[aria-pressed="true"] { background: var(--nav); color: var(--nav-ink); box-shadow: var(--ombra); }
.interruttore .icona { width: 1rem; height: 1rem; }

.corpo { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.barra {
  position: sticky; top: 0; z-index: 20; height: var(--barra-h); display: flex; align-items: center; gap: .6rem;
  padding: 0 1rem; background: color-mix(in srgb, var(--bg) 88%, transparent); border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(1.4) blur(8px);
}
.barra h1 { font-size: 1.12rem; font-weight: 650; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 3.1: sul cellulare a sinistra l'icona della home e il nome della pagina, a destra il menu */
.apri-menu, .vai-home { display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--r-s); color: var(--ink); }
.apri-menu { margin-right: -.4rem; margin-left: auto; }
.vai-home { margin-left: -.4rem; }
.apri-menu:hover, .vai-home:hover { background: var(--surface-2); }
.vai-home[aria-current="page"] { color: var(--accent); }
.apri-menu .icona, .vai-home .icona { width: 1.4rem; height: 1.4rem; }
.barra .azioni { display: flex; gap: .5rem; align-items: center; }
/* 3.1: i pulsanti della barra (Personalizza, Esporta...) sul cellulare stanno in cima al contenuto, non nella barra */
.azioni-pagina { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin: 0 0 .8rem; }
@media (max-width: 63.99em) { .barra .azioni { display: none; } }
main { width: 100%; max-width: 76rem; margin: 0 auto; padding: 1rem 1rem 3rem; flex: 1 0 auto; }
main.stretto { max-width: 46rem; }
.piede { padding: 1rem; text-align: center; color: var(--muted); font-size: .8rem; }
/* 6.2.2 (Ale 28/10/2026: «Metti Comune di Nettunia, ed in piccolo da qualche parte "piattaforma di test"»): la scritta delle copie di
 * prova (etichetta_test() in nucleo/vista.php): una striscia sottile in cima a ogni pagina, sopra la barra (che sul telefono e' gia'
 * piena), e in cima all'accesso. Colori dell'avviso: contrasto AA in tutti gli stili, chiari e scuri. */
.etichetta-test { flex: none; display: inline-block; padding: .08rem .55rem; border: 1px solid currentColor; border-radius: 99px;
  background: var(--warn-soft); color: var(--warn); font-size: .74rem; font-weight: 650; line-height: 1.2; white-space: nowrap; }
.striscia-test { display: flex; justify-content: center; padding: .25rem 1rem; background: var(--bg); border-bottom: 1px solid var(--line); }
.testata-test { height: 2.2rem; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.testata-test + .pagina-accesso { min-height: calc(100vh - 2.2rem); }

@media (min-width: 64em) {
  .app { display: grid; grid-template-columns: 18.5rem 1fr; }
  .laterale { position: sticky; top: 0; height: 100vh; width: auto; transform: none; visibility: visible; box-shadow: none !important; }
  .laterale { left: 0; right: auto; border-left: 0; border-right: 1px solid var(--line); }
  .apri-menu, .chiudi-menu, .velo, .vai-home, .azioni-pagina { display: none !important; }
  .barra { padding: 0 2rem; }
  main { padding: 1.75rem 2rem 3rem; }
}
/* 3.10: sul computer il menu si ritrae alle sole icone (preferenza "laterale"). I nomi restano per i lettori di schermo
 * (nascosti come .nascosto-vista) e compaiono nel riquadro dei suggerimenti; i numeri da leggere stanno sull'icona. */
.riduci-menu { display: none; margin: 0 0 0 auto; }
.riduci-menu .btn { color: var(--nav-muted); background: transparent; border-color: transparent; }
.riduci-menu .btn:hover { color: var(--nav-ink); background: color-mix(in srgb, var(--nav-active) 55%, transparent); }
@media (min-width: 64em) {
  .riduci-menu { display: block; }
  [data-laterale="icone"] .app { grid-template-columns: 4.6rem 1fr; }
  [data-laterale="icone"] .riduci-menu .icona { transform: rotate(180deg); }
  [data-laterale="icone"] .laterale { overflow-x: hidden; }
  [data-laterale="icone"] .marchio-riga { flex-direction: column; padding: .8rem 0 .4rem; gap: .4rem; }
  [data-laterale="icone"] .marchio { padding: 0; }
  [data-laterale="icone"] .riduci-menu { margin: 0; }
  [data-laterale="icone"] .laterale .sezioni { padding: .25rem .5rem; }
  [data-laterale="icone"] .laterale .sezioni a, [data-laterale="icone"] .laterale .gruppo > summary { position: relative; justify-content: center; padding: .62rem 0; }
  [data-laterale="icone"] .marchio > span:last-child, [data-laterale="icone"] .laterale .sezioni a > span:not(.conta),
  [data-laterale="icone"] .laterale .gruppo > summary > span:not(.conta), [data-laterale="icone"] .chi > span:last-child,
  [data-laterale="icone"] .esci > span, [data-laterale="icone"] .interruttore span {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  [data-laterale="icone"] .laterale .gruppo > summary .icona:last-child { display: none; }
  [data-laterale="icone"] .laterale .sezioni .conta { position: absolute; top: .1rem; right: .15rem; margin: 0; min-width: 1.1rem; padding: 0 .25rem;
    font-size: .66rem; line-height: 1.1rem; }
  [data-laterale="icone"] .laterale .gruppo > ul { margin: .1rem 0 .3rem; padding: .1rem 0; border-left: 0; border-radius: var(--r-s);
    background: color-mix(in srgb, var(--nav-muted) 14%, transparent); }
  [data-laterale="icone"] .laterale-piede { padding: .6rem .4rem; justify-items: center; }
  [data-laterale="icone"] .interruttore { flex-direction: column; border-radius: var(--r-s); }
  [data-laterale="icone"] .interruttore button { padding: .4rem .5rem; }
  [data-laterale="icone"] .chi, [data-laterale="icone"] .esci { justify-content: center; }
}

/* ------------------------------------------------------------------ elementi */
.scheda { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem; box-shadow: var(--ombra); }
[data-stile="contrasto"] .scheda { border-width: 2px; box-shadow: none; }
.scheda + .scheda, .scheda + .sezione, .sezione + .scheda, .sezione + .sezione, .numeri + .scheda { margin-top: 1.25rem; }
.scheda h2, .sezione > h2 { font-size: 1.02rem; font-weight: 650; margin-bottom: .8rem; display: flex; align-items: center; gap: .5rem; }
.scheda h2 .icona { color: var(--accent); }
.scheda .testata h2, .strumenti-testo h2 { margin-bottom: 0; }
.scheda .sotto { color: var(--muted); font-size: .87rem; margin: -.5rem 0 .9rem; }
.testata { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.testata p { margin: 0; color: var(--muted); }
.testata .cerca input { min-width: min(18rem, 55vw); }
.saluto { font-size: 1.35rem; font-weight: 650; margin: .2rem 0 .2rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.5rem;
  padding: .45rem .95rem; border: 1px solid var(--line-strong); border-radius: var(--r-s); background: var(--surface);
  color: var(--ink); cursor: pointer; text-decoration: none; font-weight: 550; white-space: nowrap;
}
.btn:hover { border-color: var(--accent); }
.btn.primario { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primario:hover { filter: brightness(1.08); }
.btn.pericolo { color: var(--err); border-color: currentColor; }
.btn.piccolo { min-height: 2rem; padding: .25rem .65rem; font-size: .85rem; font-weight: 500; }
.btn.solo-icona { padding: .45rem; min-width: 2.5rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
@media (pointer: coarse) { .btn, .btn.piccolo { min-height: 2.75rem; } }
button.link { border: 0; background: none; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; }

label { font-weight: 550; }
.campo { display: grid; gap: .3rem; min-width: 0; }
.campo small { color: var(--muted); font-weight: 400; }
input[type=text], input[type=password], input[type=email], input[type=search], input[type=date], input[type=datetime-local], input[type=time],
input[type=number], input[type=tel], input[type=url], input:not([type]), select, textarea {
  width: 100%; min-height: 2.5rem; padding: .45rem .7rem; border: 1px solid var(--line-strong); border-radius: var(--r-s);
  background: var(--surface); color: var(--ink);
}
[data-stile="contrasto"] input, [data-stile="contrasto"] select, [data-stile="contrasto"] textarea { border-width: 2px; }
textarea { min-height: 5rem; resize: vertical; }
/* 3.1: nessun campo piu' largo del suo riquadro. Su iPhone data e ora hanno una larghezza propria che ignora width: si
 * tolgono l'aspetto di sistema e la larghezza minima (la scelta di data e ora resta quella del telefono) */
input, select, textarea { max-width: 100%; }
@supports (-webkit-touch-callout: none) {
  input[type=date], input[type=datetime-local], input[type=time] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; text-align: left; }
}
::placeholder { color: var(--muted); opacity: 1; }
@media (pointer: coarse) { input, select { min-height: 2.75rem; } }
input[type=checkbox], input[type=radio] { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); margin: 0; flex: none; }
.spunta { display: inline-flex; align-items: center; gap: .5rem; font-weight: 400; cursor: pointer; }
fieldset { border: 1px solid var(--line); border-radius: var(--r-s); padding: .7rem .9rem .85rem; margin: 0; min-width: 0; }
legend { padding: 0 .35rem; font-weight: 550; }
.campi { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); align-items: end; }
.campi .largo { grid-column: 1 / -1; }
.campi.in-alto { align-items: start; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.25rem 0; }
.bottoni { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1rem; }
.sopra { margin-top: 1rem; }
.sopra-poco { margin-top: .4rem; }
.bottoni.attaccato { margin-top: 0; }
.scelte { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
/* nuova notifica (2.7): prima a chi, poi solo le scelte per quel tipo */
[data-per-tipo][hidden], [data-dopo-tipo][hidden], .scelte .spunta[hidden] { display: none !important; }
.tipi-notifica { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.tipi-notifica label { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: var(--r-s); cursor: pointer; background: var(--surface); }
.tipi-notifica label:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.tipi-notifica label:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.tipi-notifica input { margin-top: .2rem; }
.tipi-notifica b, .tipi-notifica small { display: block; }
.tipi-notifica small { color: var(--muted); font-size: .82rem; margin-top: .15rem; }
.modulo-notifica fieldset + fieldset, .modulo-notifica fieldset + .nota, .modulo-notifica .nota + fieldset { margin-top: 1rem; }
.filtra-persone { max-width: 22rem; margin-bottom: .6rem; }
.col-apri { width: 1%; }
/* utenti (2.8): uffici in orizzontale sotto la mail, modifica degli uffici a richiesta, modifica cumulativa */
.col-sel { width: 1%; }
.tabella-utenti td[data-etichetta="Livello"] select { min-width: 10.5rem; }
.tabella.tabella-utenti td.azioni { white-space: normal; min-width: 14rem; width: 17rem; }
.tabella.tabella-utenti td.azioni form { display: inline-block; margin: 0 0 .3rem .25rem; }
.uffici-utente { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-top: .4rem; }
.modifica-uffici { margin-top: .35rem; }
.modifica-uffici > summary { cursor: pointer; color: var(--accent); font-size: .82rem; width: max-content; }
.modifica-uffici[open] > summary { margin-bottom: .4rem; }
.modifica-uffici form { padding: .5rem .6rem; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-2); }
.massiva { margin: 0 0 1rem; }
.massiva fieldset { background: var(--surface-2); }
[data-per-operazione][hidden] { display: none !important; }
/* accesso come utente (2.8): una striscia in cima alla finestra e, nella barra che resta in alto, "come <utente>" */
.striscia-come { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  padding: .55rem 1rem; background: var(--warn-soft); color: var(--warn); border-bottom: 2px solid var(--warn); font-size: .88rem; }
.striscia-come p { margin: 0; flex: 1 1 22rem; color: var(--ink); }
.striscia-come b { color: var(--warn); }
.striscia-come .icona { width: 1.3rem; height: 1.3rem; flex: none; }
.come-da { display: inline-block; margin-top: .15rem; }

.nota { padding: .75rem .9rem; border-radius: var(--r-s); margin: 0 0 1rem; border: 1px solid transparent; }
.nota.ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.nota.err { background: var(--err-soft); color: var(--err); border-color: color-mix(in srgb, var(--err) 35%, transparent); }
.nota.att { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.nota.info { background: var(--accent-soft); color: var(--ink); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.nota b { font-weight: 650; }
.nota code { color: var(--ink); }
.pratica-ferma { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }   /* 5.9.2: pratica risolta o chiusa */
code { font-family: var(--f-mono); background: var(--surface-2); padding: .1rem .4rem; border-radius: 5px; overflow-wrap: anywhere; }
.segreto { font-size: 1.1rem; letter-spacing: .04em; padding: .3rem .6rem; }

.etichetta { display: inline-block; padding: .08rem .55rem; border-radius: 99px; font-size: .78rem; font-weight: 600; background: var(--surface-2); color: var(--ink); white-space: nowrap; }
.etichetta.accento { background: var(--accent-soft); color: var(--accent); }
.etichetta.ok { background: var(--ok-soft); color: var(--ok); }
.etichetta.err { background: var(--err-soft); color: var(--err); }
.etichetta.att { background: var(--warn-soft); color: var(--warn); }
/* 3.10: lo stato d'animo con il perche' (pulsante: passandoci sopra compare la spiegazione) */
button.etichetta.con-perche { border: 0; font-family: inherit; line-height: inherit; cursor: help; text-decoration: underline dotted; text-underline-offset: .2em; }
/* 6.0: accanto c'e' l'imbuto che filtra: il pulsante e' alto almeno 24 px (WCAG 2.5.8) */
button.etichetta.con-perche { min-height: 1.5rem; }
.perche-sentimento { margin-top: .35rem; font-size: .86rem; }
.dati-chiamata > div:has(> .perche-sentimento[open]) { flex-basis: 100%; }    /* aperto va a tutta riga, gli altri dati sotto */
.perche-sentimento summary { cursor: pointer; color: var(--accent); font-weight: 550; }
.perche-sentimento ul { margin: .35rem 0 .3rem; padding-left: 1.1rem; display: grid; gap: .2rem; }
.chip { display: inline-block; padding: .05rem .5rem; border: 1px solid var(--line-strong); border-radius: 99px; font-size: .78rem; color: var(--muted); white-space: nowrap; }
/* 3.10: categorie della Conoscenza da cliccare */
a.chip-categoria, .chips-categorie .chip { color: var(--accent); text-decoration: none; border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)); }
/* 29/10/2026 (axe a 375 px, WCAG 2.5.8): la categoria di una voce nell'elenco della Conoscenza era alta 23 px, vicina ad altri collegamenti */
a.chip-categoria { display: inline-flex; align-items: center; min-height: 24px; }
a.chip-categoria:hover, .chips-categorie .chip:hover { background: var(--accent-soft); }
.chips-categorie { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.chips-categorie .chip { font-size: .88rem; padding: .3rem .8rem; white-space: normal; }
.chips-categorie .chip[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chips-categorie .chip[aria-current="page"] .muto { color: inherit; }
@media (pointer: coarse) { .chips-categorie .chip { min-height: 2.75rem; display: inline-flex; align-items: center; } }

/* tabelle: sotto i 45em diventano schede (ogni cella porta data-etichetta) */
/* 4.3: position relative, altrimenti i testi .nascosto-vista (position absolute) delle celle fuori dal riquadro allargano tutta la pagina */
.scorri { overflow-x: auto; position: relative; }
.tabella { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabella th, .tabella td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.tabella th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; background: var(--surface-2); white-space: nowrap; }
.tabella tbody tr:last-child td { border-bottom: 0; }
.tabella tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.tabella td.azioni { white-space: nowrap; text-align: right; }
/* 4.3: l'elenco delle chiamate sta nel riquadro (titoli su due righe, celle piu' strette) */
.tabella.elenco-chiamate th { white-space: normal; }
.tabella.elenco-chiamate th, .tabella.elenco-chiamate td { padding-left: .55rem; padding-right: .55rem; }
.tabella.elenco-chiamate td[data-etichetta="Data e ora"] { white-space: nowrap; }
.tabella.elenco-chiamate td.col-icone { white-space: nowrap; }
.tabella.elenco-chiamate .lav-ufficio { font-weight: 600; }
.tabella td.azioni form { display: inline; }
.tabella a { font-weight: 550; }
.scheda > .scorri { margin: 0 -1.1rem -1.1rem; border-top: 1px solid var(--line); }
.scheda > .scorri:not(:last-child) { margin-bottom: 0; border-bottom: 1px solid var(--line); }
.scheda > .scorri .tabella th:first-child, .scheda > .scorri .tabella td:first-child { padding-left: 1.1rem; }
@media (max-width: 45em) {
  .tabella.schede thead { display: none; }
  .tabella.schede, .tabella.schede tbody, .tabella.schede tr, .tabella.schede td { display: block; width: 100%; }
  .tabella.schede tr { padding: .6rem 1.1rem; border-bottom: 1px solid var(--line); }
  .tabella.schede tbody tr:last-child { border-bottom: 0; }
  /* etichetta a sinistra in una colonna fissa, contenuto a destra che va a capo normalmente */
  .tabella.schede td { border: 0; padding: .3rem 0 .3rem 7.2rem; position: relative; text-align: left; min-height: 1.9rem; }
  .tabella.schede td::before { content: attr(data-etichetta); position: absolute; left: 0; top: .45rem; width: 6.8rem; color: var(--muted);
    font: 600 .7rem/1.3 var(--f-ui); text-transform: uppercase; letter-spacing: .04em; }
  .tabella.schede td[data-etichetta=""] { padding-left: 0; }
  .tabella.schede td:empty { display: none; }
  .scheda > .scorri .tabella.schede td:first-child { padding-left: 7.2rem; }
  .scheda > .scorri .tabella.schede td[data-etichetta=""]:first-child { padding-left: 0; }
  .tabella.schede td[data-etichetta=""]::before { content: none; }
  .tabella.schede td.azioni { white-space: normal; text-align: left; padding-top: .5rem; display: flex; flex-wrap: wrap; gap: .4rem; }
  .tabella.schede tbody tr:hover td { background: none; }
  /* 3.1: dentro una scheda i moduli della riga (livello + Salva) vanno a capo invece di uscire dallo schermo */
  .tabella.schede .cerca { flex-wrap: wrap; }
  .tabella.schede .cerca select { flex: 1 1 9rem; min-width: 0; }
  .tabella-utenti td[data-etichetta="Livello"] select { min-width: 0; }
  .tabella.schede td.azioni form, .tabella.schede td.azioni details { margin: 0; }
  .controlli-manutenzione td:first-child { white-space: normal; }
}
/* sui telefoni stretti l'etichetta sta sopra il valore: tutta la larghezza per il contenuto */
@media (max-width: 22.5em) {
  .tabella.schede td, .scheda > .scorri .tabella.schede td:first-child { padding-left: 0; }
  .tabella.schede td::before { position: static; display: block; width: auto; margin-bottom: .1rem; }
}
.vuoto { padding: 1.5rem 1rem; text-align: center; color: var(--muted); }
.paginazione { display: flex; justify-content: space-between; align-items: center; gap: .6rem 1rem; margin-top: 1rem; flex-wrap: wrap; }
.paginazione ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.paginazione a.num { display: inline-grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding: 0 .5rem; border: 1px solid var(--line-strong);
  border-radius: var(--r-s); background: var(--surface); color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.paginazione a.num:hover { border-color: var(--accent); }
.paginazione a.attuale { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.paginazione .puntini { color: var(--muted); padding: 0 .2rem; }
@media (pointer: coarse) { .paginazione a.num { min-width: 2.75rem; height: 2.75rem; } }

/* ------------------------------------------------------------------ home e widget */
.griglia { display: grid; align-items: start; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); margin-top: 1rem; }
.griglia .widget { margin: 0 !important; display: flex; flex-direction: column; }
@media (min-width: 72em) { .griglia .widget.doppio { grid-column: span 2; } }
/* 29/10/2026: con il testo Molto grande, fra 1180 e 1280 px, nella home ci sta una colonna sola di riquadri ma quello largo ne prendeva due
 * e usciva di lato (la colonna in piu' la creava lui). Il riquadro largo prende due colonne solo se la sua griglia ne ha due: si misura la
 * griglia (2 x 21rem piu' lo spazio fra le due), non la finestra */
.griglia[data-griglia] { container-type: inline-size; }
@container (max-width: 43.09rem) { .griglia .widget.doppio { grid-column: auto; } }
.widget .piu { margin-top: auto; padding-top: .8rem; font-size: .87rem; }
.numeri { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.numero { background: var(--surface-2); border-radius: var(--r-s); padding: .7rem .8rem; }
.numero b { display: block; font-size: 1.65rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.numero span { color: var(--muted); font-size: .82rem; }
.numero.forte { background: var(--accent-soft); }
.numero.forte b { color: var(--accent); }
.numero.allarme b { color: var(--err); }
.elenco { list-style: none; margin: 0; padding: 0; }
.elenco li { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: baseline; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.elenco li:last-child { border-bottom: 0; }
.elenco .muto { font-size: .85rem; }
/* 3.1: il valore a destra resta su una riga; la descrizione sotto un titolo (profilo) va a capo, e se il pulsante non ci
 * sta accanto scende sotto invece di uscire dallo schermo (sul cellulare usciva) */
.elenco li > .muto { white-space: nowrap; }
.elenco li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.figura { margin: 0; }
.grafico { width: 100%; height: auto; overflow: visible; }
.grafico .colonna { fill: var(--accent); }
.grafico .colonna.zero { fill: var(--line); }
.grafico text { fill: var(--muted); font-size: 9px; font-family: var(--f-ui); }
.grafico .asse { stroke: var(--line); stroke-width: 1; }
@media (max-width: 40em) { .grafico text { font-size: 17px; } }
.barre { display: grid; gap: .55rem; }
.barre div { display: grid; grid-template-columns: 7.5rem 1fr 2.5rem; gap: .6rem; align-items: center; font-size: .87rem; }
.barre meter { width: 100%; height: .7rem; }
.barre .mono { text-align: right; }
meter::-webkit-meter-bar { background: var(--surface-2); border: 0; border-radius: 99px; }
meter::-webkit-meter-optimum-value { background: var(--accent); border-radius: 99px; }
meter::-moz-meter-bar { background: var(--accent); border-radius: 99px; }
meter { background: var(--surface-2); border-radius: 99px; }

/* ------------------------------------------------------------------ suggerimenti, grafici, statistiche (2.2) */
/* il riquadro che app.js mette sopra colonne e icone del riepilogo: inchiostro e fondo scambiati, quindi
 * lo stesso contrasto del testo normale in tutti gli stili, chiari e scuri */
.suggerimento { position: fixed; z-index: 90; left: 0; top: 0; max-width: min(24rem, calc(100vw - 12px)); padding: .5rem .75rem;
  border-radius: var(--r-s); background: var(--ink); color: var(--surface); font-size: .86rem; line-height: 1.45;
  box-shadow: 0 .4rem 1.4rem rgb(0 0 0 / .28); pointer-events: none; white-space: pre-line; overflow-wrap: anywhere; }
.suggerimento[hidden] { display: none; }
.grafico .zona { fill: transparent; pointer-events: all; }
.grafico .punto.evidenziato .zona { fill: color-mix(in srgb, var(--accent) 12%, transparent); }
.grafico .punto.evidenziato .colonna { fill: var(--ink); }
.grafico .colonna.alto { fill: var(--ok); }
.grafico .colonna.medio { fill: var(--warn); }
.grafico .colonna.basso { fill: var(--err); }
.grafico .colonna.zero { fill: var(--line); }
.numeri-grafico { margin-top: .4rem; font-size: .85rem; }
.numeri-grafico summary { cursor: pointer; color: var(--accent); width: max-content; }
.numeri-grafico .scorri { margin-top: .5rem; max-height: 16rem; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-s); }
.numeri-grafico .tabella th, .numeri-grafico .tabella td { padding: .3rem .6rem; }
@media (min-width: 48em) { .numeri.larghi { grid-template-columns: repeat(4, 1fr); } }
.periodi { list-style: none; margin: 0 0 .9rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.barre.larghe div { grid-template-columns: minmax(6rem, 9.5rem) 1fr 5.5rem; }
meter.umore-positive::-webkit-meter-optimum-value { background: var(--ok); }
meter.umore-positive::-moz-meter-bar { background: var(--ok); }
meter.umore-negative::-webkit-meter-optimum-value { background: var(--err); }
meter.umore-negative::-moz-meter-bar { background: var(--err); }
meter.umore-nessuno::-webkit-meter-optimum-value { background: var(--line-strong); }
meter.umore-nessuno::-moz-meter-bar { background: var(--line-strong); }
.scheda h3 { font-size: .95rem; font-weight: 650; margin: 1.2rem 0 .4rem; }
.voto-sintesi { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; align-items: center; margin-bottom: .6rem; }
.voto-grande { margin: 0; display: grid; }
.voto-grande b { font-size: 3rem; line-height: 1; font-weight: 750; color: var(--accent); font-variant-numeric: tabular-nums; }
.voto-grande span { color: var(--muted); font-size: .87rem; }
.voto-fasce { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; min-width: min(100%, 17rem); }
.voto-fasce li { display: grid; grid-template-columns: 1fr 2.5rem 3.5rem; gap: .5rem; font-size: .9rem; }
.voto-fasce b, .voto-fasce .muto { text-align: right; font-variant-numeric: tabular-nums; }
.griglia.due { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); margin: 1.25rem 0; }
.griglia.due > .scheda { margin: 0; }
.griglia + .scheda { margin-top: 1.25rem; }
.riepilogo-testo { margin: 0 0 .4rem; line-height: 1.6; max-width: 60rem; }
.numero-tel { white-space: nowrap; }

/* ------------------------------------------------------------------ chiamata */
.cerca { display: flex; gap: .5rem; }
.cerca input { flex: 1 1 auto; }
.dati-chiamata { display: flex; flex-wrap: wrap; gap: .9rem 2rem; }
.dati-chiamata div { display: grid; gap: .1rem; min-width: 0; }
.dati-chiamata .et { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.dati-chiamata .grande { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.dati-chiamata .id { display: flex; align-items: center; gap: .4rem; }
.dati-chiamata .id .mono { font-size: .82rem; overflow-wrap: anywhere; }
.dati-chiamata .azioni-chiamata { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .3rem; }   /* 4.4: Copia fascicolo e Download */
.dati-chiamata .azioni-chiamata form { margin: 0; }
.filtro-collegate { margin: 0 0 .8rem; }                                          /* 4.4: Tutte / Solo collegate */
.dati-chiamata.estratti { margin-bottom: .6rem; }                     /* 3.5.1: dati estratti */
.dati-chiamata.estratti .grande { font-size: 1.05rem; overflow-wrap: anywhere; }
.lettore { position: sticky; top: calc(var(--alto-fisso) + .5rem); z-index: 10; }
.lettore audio { width: 100%; display: block; }
.strumenti-testo { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.strumenti-testo h2 { font-size: 1.02rem; font-weight: 650; display: flex; align-items: center; gap: .5rem; margin: 0; }
.strumenti-testo h2 .icona { color: var(--accent); }
.strumenti-testo .cerca-testo { display: flex; gap: .35rem; align-items: center; flex: 1 1 16rem; }
.strumenti-testo .cerca-testo input { flex: 1 1 auto; }
.trovati { font-size: .82rem; color: var(--muted); min-width: 4.5rem; text-align: center; white-space: nowrap; }
.trovati:empty { display: none; }
@media (max-width: 40em) { .strumenti-testo .cerca-testo { flex-basis: 100%; } .strumenti-testo > .btn { width: 100%; } }
.turni { display: flex; flex-direction: column; gap: .55rem; }
.turno { max-width: min(88%, 44rem); padding: .55rem .85rem; border-radius: 14px; }
.turno small { display: block; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.turno.agente { background: var(--agente); align-self: flex-start; border-top-left-radius: 4px; }
.turno.cittadino { background: var(--cittadino); align-self: flex-end; border-top-right-radius: 4px; }
[data-stile="contrasto"] .turno { border: 2px solid var(--line); }
/* 3.10.1: il sentiment di ogni frase del cittadino, come nella trascrizione della piattaforma */
.sent-frase { display: block; width: fit-content; margin: .3rem 0 0 auto; padding: .02rem .5rem; border-radius: 99px; font-size: .74rem; font-style: normal; font-weight: 600; }
.sent-frase.sent-pos { background: var(--ok-soft); color: var(--ok); }
.sent-frase.sent-neu { background: var(--surface-2); color: var(--ink); }
.sent-frase.sent-neg { background: var(--err-soft); color: var(--err); }
mark { background: var(--mark); color: var(--mark-ink); border-radius: 3px; padding: 0 .1em; }
mark.attuale { outline: 2px solid var(--ink); }
@media (max-width: 30em) { .turno { max-width: 100%; } }

/* ------------------------------------------------------------------ accesso */
.pagina-accesso { min-height: 100vh; display: grid; place-items: center; padding: 1.25rem; background: radial-gradient(60rem 30rem at 10% -10%, var(--accent-soft), transparent 70%), var(--bg); }
.accesso { width: min(100%, 27rem); }
.accesso .scheda { padding: 1.6rem; display: grid; gap: .9rem; }
.accesso .marchio { padding: 0 0 .3rem; color: var(--ink); }
.accesso .marchio .logo { background: var(--accent); color: var(--accent-ink); }
.accesso .marchio small { color: var(--muted); }
.accesso h1 { font-size: 1.3rem; }
.accesso p { margin: 0; }
.accesso button.primario { width: 100%; }
.verifica { font-size: .82rem; color: var(--muted); display: flex; align-items: center; gap: .45rem; min-height: 1.2rem; }
.verifica[data-stato="ok"] { color: var(--ok); }
.verifica[data-stato="err"] { color: var(--err); }
.piede-accesso { text-align: center; color: var(--muted); font-size: .8rem; margin-top: 1rem; }

/* ------------------------------------------------------------------ profilo */
.stili { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.stile-scelta { position: relative; display: block; cursor: pointer; }
.stile-scelta input { position: absolute; opacity: 0; }
.anteprima { display: block; border: 2px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--bg); color: var(--ink); }
.stile-scelta input:checked + .anteprima { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.stile-scelta input:focus-visible + .anteprima { outline: 3px solid var(--focus); outline-offset: 2px; }
.anteprima .ap-corpo { display: grid; grid-template-columns: 2.2rem 1fr; min-height: 4.6rem; }
.anteprima .ap-menu { background: var(--nav); border-right: 1px solid var(--line); padding: .45rem .35rem; display: grid; gap: .3rem; align-content: start; }
.anteprima .ap-menu i { display: block; height: .4rem; border-radius: 3px; background: var(--nav-muted); opacity: .6; }
.anteprima .ap-menu i:first-child { background: var(--nav-active); opacity: 1; }
.anteprima .ap-contenuto { padding: .5rem; display: grid; gap: .35rem; align-content: start; }
.anteprima .ap-contenuto i { display: block; height: .45rem; border-radius: 3px; background: var(--line); }
.anteprima .ap-contenuto i:nth-child(2) { width: 60%; background: var(--accent); }
.anteprima .ap-nome { display: block; padding: .4rem .6rem; background: var(--surface); border-top: 1px solid var(--line); font-weight: 600; font-size: .87rem; }
.qr { background: #fff; padding: .6rem; border-radius: var(--r-s); width: 13rem; max-width: 100%; border: 1px solid var(--line); }
.qr svg { width: 100%; height: auto; }
.codici { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; padding: 0; list-style: none; margin: 0 0 1rem; }
.codici li { font-family: var(--f-mono); font-size: 1.02rem; background: var(--surface-2); padding: .35rem .6rem; border-radius: var(--r-s); text-align: center; }
.passi { padding-left: 1.2rem; margin: 0 0 1rem; display: grid; gap: .4rem; }

/* ------------------------------------------------------------------ 3.7: relazioni del giorno (Analisi) */
.relazione-testo p { max-width: 52rem; line-height: 1.65; margin: .35rem 0 .8rem; overflow-wrap: break-word; }
.relazione-testo .in-evidenza { font-size: 1.04rem; }
.relazione-testo ul { max-width: 52rem; padding-left: 1.3rem; margin: .35rem 0 .8rem; }
.relazione-testo li + li { margin-top: .3rem; }
.relazione-testo h2 small { font-weight: 400; font-size: .85rem; }
details > summary h2.in-riga { display: inline-flex; vertical-align: middle; }
.periodo-relazione { margin: 0 0 1rem; }
/* 3.7.1: il punto elenco in testa a ogni relazione dello storico (sul cellulare la riga e' gia' una scheda: non serve) */
.col-punto { width: 1%; color: var(--accent); }
@media (max-width: 45em) { .tabella.schede td.col-punto { display: none; } }

/* ------------------------------------------------------------------ 3.8: ricerca in tutte le pagine (barra in alto) */
.cerca-globale { position: relative; flex: 0 1 22rem; min-width: 0; display: none; }
.cerca-globale input[type="search"] { width: 100%; min-height: 2.25rem; padding: .35rem .8rem; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); }
.cerca-risultati { position: absolute; z-index: 45; top: calc(100% + .35rem); right: 0; width: min(30rem, calc(100vw - 2rem)); max-height: min(70vh, 34rem); overflow-y: auto;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 10px 30px rgb(0 0 0 / .2); padding: .35rem; }
.cerca-risultati[hidden] { display: none; }
.cerca-gruppo { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: .5rem .6rem .2rem; }
.cerca-voce { display: block; padding: .45rem .6rem; border-radius: var(--r-s); color: var(--ink); text-decoration: none; }
.cerca-voce b { display: block; font-weight: 600; }
.cerca-voce small { display: block; color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cerca-voce:hover, .cerca-voce[aria-selected="true"] { background: var(--surface-2); outline: 2px solid var(--accent); outline-offset: -2px; }
.cerca-risultati p { margin: .5rem .6rem; }
.apri-cerca { display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--r-s); color: var(--ink); }
.apri-cerca .icona { width: 1.3rem; height: 1.3rem; }
/* sul cellulare la lente apre la casella su tutta la larghezza, sotto la barra */
@media (max-width: 63.99em) {
  .cerca-aperta .cerca-globale { display: block; position: absolute; left: .75rem; right: .75rem; top: calc(var(--alto-fisso) + .25rem); flex: none; }
  .cerca-aperta .cerca-risultati { width: 100%; }
}
@media (min-width: 64em) { .cerca-globale { display: block; } .apri-cerca { display: none; } }

/* ------------------------------------------------------------------ 3.9: punti elenco nei riquadri della home (Ale 21/10/2026) */
.widget .elenco li { position: relative; padding-left: 1.1rem; }
.widget .elenco li::before { content: ""; position: absolute; left: .15rem; top: 1.02rem; width: .42rem; height: .42rem; border-radius: 50%; background: var(--accent); }

/* ------------------------------------------------------------------ 3.9: chat */
.chat { display: grid; gap: 1rem; grid-template-columns: 1fr; min-width: 0; }
@media (min-width: 64em) { .chat { grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem); align-items: start; } .chat-conv { order: 1; } .chat-lato { order: 2; } }   /* 4.9: la conversazione a sinistra, l elenco a destra (Ale) */
.chat-lato, .chat-conv { min-width: 0; margin: 0 !important; }
@media (max-width: 63.99em) { .chat.con-conversazione .chat-lato { display: none; } .chat:not(.con-conversazione) .chat-conv { display: none; } }
@media (min-width: 64em) { .chat-indietro { display: none; } .chat-lato { position: sticky; top: calc(var(--alto-fisso) + 1rem); max-height: calc(100vh - var(--alto-fisso) - 2rem); overflow-y: auto; } }
/* 3.10: il nome di chi usa la chat sopra lo stato, e il titolo dell'elenco */
.chat-io { display: flex; align-items: center; gap: .55rem; margin: 0 0 .55rem; min-width: 0; }
.chat-io b { overflow-wrap: anywhere; }
.chat-io .avatar { width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: .8rem; flex: none; }
.chat-elenco-titolo { font-size: .8rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: .2rem 0 .4rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.chat-stato { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem; align-items: center; margin-bottom: .8rem; }
.chat-stato select { grid-column: 1; grid-row: 1; } .chat-stato button { grid-column: 2; grid-row: 1; } .chat-stato input { grid-column: 1 / -1; grid-row: 2; }
.chat-stato input, .chat-stato select { min-width: 0; }
.chat-conversazioni { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.chat-conversazioni a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .2rem .6rem; align-items: center; padding: .55rem .5rem; border-radius: var(--r-s); color: var(--ink); text-decoration: none; }
.chat-conversazioni a:hover { background: var(--surface-2); }
.chat-conversazioni a[aria-current="page"] { background: var(--surface-2); outline: 2px solid var(--accent); outline-offset: -2px; }
.chat-icona { position: relative; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--surface-2); color: var(--accent); }
.chat-icona .stato-chat { position: absolute; right: -.1rem; bottom: -.1rem; }
.chat-nome { min-width: 0; }
.chat-nome b, .chat-nome small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-nome small { color: var(--muted); font-size: .8rem; }
.chat-conversazioni time { font-size: .75rem; }
.chat-conversazioni .conta, .widget .elenco .conta { background: var(--accent); color: var(--accent-ink); border-radius: 99px; font-size: .72rem; font-weight: 700; min-width: 1.3rem; padding: 0 .35rem; text-align: center; }
.stato-chat { display: inline-flex; align-items: center; gap: .35rem; }
.stato-chat .pallino { width: .7rem; height: .7rem; border-radius: 50%; border: 2px solid var(--surface); background: var(--line-strong); flex: none; }
.stato-disponibile .pallino { background: var(--ok); }
.stato-occupato .pallino { background: var(--err); }
.stato-assente .pallino { background: var(--warn); }
.chat-conv { display: flex; flex-direction: column; min-height: min(78vh, 46rem); }
.chat-testa { display: flex; align-items: center; gap: .6rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
.chat-testa > div { flex: 1 1 auto; min-width: 0; }
.chat-testa b { display: block; }
.chat-privacy { display: flex; gap: .4rem; align-items: center; font-size: .78rem; color: var(--muted); margin: .5rem 0; }
.chat-privacy .icona { width: 1rem; height: 1rem; flex: none; }
.chat-messaggi { flex: 1 1 auto; overflow-y: auto; max-height: 60vh; display: flex; flex-direction: column; gap: .45rem; padding: .3rem .1rem; }
.giorno-chat { text-align: center; margin: .6rem 0 .2rem; }
.giorno-chat span { font-size: .75rem; color: var(--muted); background: var(--surface-2); padding: .15rem .7rem; border-radius: 99px; }
.msg { position: relative; max-width: min(42rem, 88%); align-self: flex-start; background: var(--surface-2); border-radius: 14px 14px 14px 4px; padding: .45rem .75rem .5rem; }
.msg.mio { align-self: flex-end; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border-radius: 14px 14px 4px 14px; }
.msg header { font-size: .78rem; color: var(--muted); }
.msg header b { color: var(--ink); }
.msg-testo { overflow-wrap: anywhere; }
.msg.eliminato { opacity: .75; }
.msg-cita { display: block; font-size: .82rem; color: var(--muted); border-left: 3px solid var(--accent); padding: .1rem .5rem; margin: .25rem 0; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-reazioni { display: flex; flex-wrap: wrap; gap: .25rem; }
.msg-reazioni:empty { display: none; }
.reazione { font: inherit; font-size: .85rem; border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 0 .45rem; cursor: pointer; margin-top: .25rem; }
.reazione.mia { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.msg-azioni { position: absolute; top: -.9rem; right: .4rem; display: none; gap: .2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); padding: .1rem; box-shadow: var(--ombra); }
.msg:focus-within .msg-azioni, .msg.azioni-aperte .msg-azioni { display: flex; }
@media (hover: hover) { .msg:hover .msg-azioni { display: flex; } }
.msg.eliminato .msg-azioni { display: none !important; }
.chat-reazioni-scelta { position: fixed; z-index: 50; display: flex; gap: .2rem; background: var(--surface); border: 1px solid var(--line); border-radius: 99px; padding: .25rem .4rem; box-shadow: 0 6px 20px rgb(0 0 0 / .18); }
.chat-reazioni-scelta[hidden] { display: none; }
.chat-reazioni-scelta button { font-size: 1.25rem; background: none; border: 0; cursor: pointer; border-radius: 50%; width: 2.2rem; height: 2.2rem; }
.chat-reazioni-scelta button:hover, .chat-reazioni-scelta button:focus-visible { background: var(--surface-2); }
.chat-letto, .chat-scrive { margin: .2rem 0 0; min-height: 1.2rem; text-align: right; }
.chat-scrive { text-align: left; font-style: italic; }
.chat-scrivi { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: end; margin-top: .4rem; border-top: 1px solid var(--line); padding-top: .6rem; }
.chat-scrivi textarea { resize: none; min-height: 2.6rem; max-height: 12rem; width: 100%; }
.chat-risposta { grid-column: 1 / -1; display: flex; align-items: center; gap: .5rem; font-size: .85rem; border-left: 3px solid var(--accent); padding-left: .5rem; color: var(--muted); }
.chat-risposta[hidden] { display: none; }
.chat-risposta span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-vuota { margin: auto; text-align: center; padding: 2rem 1rem; color: var(--muted); }
.chat-vuota > .icona { width: 3rem; height: 3rem; color: var(--accent); }
.chat-precedenti { text-align: center; }
.scelte-persone { max-height: 18rem; overflow-y: auto; }
@media (max-width: 63.99em) { .chat-scrivi .btn span { display: none; } .msg { max-width: 92%; } }
/* 3.9.1: sul telefono le azioni si aprono toccando il messaggio e stanno sotto il testo, senza coprirlo */
@media (hover: none), (max-width: 40em) { .msg-azioni { position: static; box-shadow: none; border: 0; background: transparent; padding: 0; margin-top: .3rem; } }

/* ------------------------------------------------------------------ 3.9.1: icona della chat in basso a sinistra e riquadro */
.chat-box-icona { position: fixed; z-index: 26; left: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); width: 3.4rem; height: 3.4rem;
  display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 14px rgb(0 0 0 / .28); }
.chat-box-icona .icona { width: 1.6rem; height: 1.6rem; }
.chat-box-icona .conta { position: absolute; top: -.2rem; right: -.2rem; background: var(--err); color: #fff; border: 2px solid var(--surface); border-radius: 99px;
  min-width: 1.4rem; padding: 0 .3rem; font-size: .75rem; font-weight: 700; text-align: center; line-height: 1.25rem; }
.chat-box-icona .conta[hidden] { display: none; }
.chat-box-pannello { position: fixed; z-index: 55; left: 1rem; bottom: 5.2rem; width: min(25rem, calc(100vw - 2rem)); height: min(38rem, calc(100vh - 7rem));
  display: flex; flex-direction: column; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 40px rgb(0 0 0 / .28); overflow: hidden; }
.chat-box-pannello[hidden] { display: none; }
.chat-box-testa { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .6rem .55rem .9rem; background: var(--accent); color: var(--accent-ink); }
.chat-box-testa b { display: flex; align-items: center; gap: .45rem; }
.chat-box-testa .btn { color: var(--accent-ink); border-color: transparent; background: transparent; }
.chat-box-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .7rem; }
.chat-nel-box, .chat-nel-box .chat-conv { display: flex; flex-direction: column; min-height: 100%; height: 100%; }
.chat-nel-box { grid-template-columns: 1fr; }
.chat-nel-box .chat-conv { min-height: 0; }
.chat-nel-box .chat-indietro { display: inline-flex !important; }
/* 3.10.2: «Nuova» dentro il riquadro, e il cestino per eliminare */
.chat-box-nuova { display: grid; gap: .55rem; align-content: start; }
.chat-box-nuova label[for="box-cerca-persona"] { font-weight: 600; }
.chat-box-persone { max-height: 15rem; overflow-y: auto; }
.chat-box-persone li[hidden] { display: none; }
.chat-box-gruppo { border-top: 1px solid var(--line); padding-top: .6rem; }
.chat-box-gruppo summary { display: flex; align-items: center; gap: .45rem; cursor: pointer; font-weight: 600; color: var(--accent); }
.chat-box-gruppo form { margin-top: .6rem; }
.chat-box-gruppo .scelte-persone { max-height: 11rem; overflow-y: auto; }
.chat-testa .chat-elimina { color: var(--err); }
.chat-nel-box .chat-lato { position: static; max-height: none; overflow: visible; }   /* 3.10: nel riquadro niente spazio vuoto in cima */
.chat-nel-box .chat-messaggi { max-height: none; flex: 1 1 auto; min-height: 8rem; }
.chat-nel-box .chat-privacy { margin: .3rem 0; }
.chat-nel-box .msg { max-width: 90%; }
.chat-nel-box .chat-scrivi .btn span { display: none; }
.chat-box-piede { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0 .4rem; }
@media (min-width: 64em) {
  .chat-box-icona { left: calc(18.5rem + 1.5rem); bottom: 1.5rem; }
  .chat-box-pannello { left: calc(18.5rem + 1.5rem); bottom: 5.8rem; }
  [data-laterale="icone"] .chat-box-icona, [data-laterale="icone"] .chat-box-pannello { left: calc(4.6rem + 1.5rem); }     /* 3.10 */
}
@media (max-width: 40em) { .chat-box.aperta .chat-box-pannello { inset: 0; width: auto; height: auto; border-radius: 0; } .chat-box.aperta .chat-box-icona { display: none; } }
@media print { .chat-box { display: none; } }

/* ------------------------------------------------------------------ 3.8: Conoscenza */
.conoscenza-qui { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .4rem; margin: 0 0 1rem; padding: .55rem .85rem; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); font-size: .9rem; }
.conoscenza-qui .icona { color: var(--accent); }
.elenco-voci { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.elenco-voci li { padding: .6rem .2rem; border-bottom: 1px solid var(--line); min-width: 0; }
.elenco-voci li:last-child { border-bottom: 0; }
.elenco-voci .estratto { display: block; font-size: .87rem; overflow-wrap: anywhere; }
.voce-dati { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0 0 1rem; }
.voce-testo { overflow-wrap: break-word; }
.confronto { font-family: var(--f-mono); font-size: .85rem; border: 1px solid var(--line); border-radius: var(--r-s); overflow-x: auto; }
.confronto > * { display: block; padding: .1rem .6rem; white-space: pre-wrap; overflow-wrap: anywhere; text-decoration: none; }
.confronto .riga-uguale { color: var(--muted); }
.confronto .riga-aggiunta { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ink); }
.confronto .riga-tolta { background: color-mix(in srgb, var(--err) 14%, transparent); color: var(--ink); text-decoration: line-through; }
.confronto .riga-aggiunta::before { content: "+ "; color: var(--ok); }
.confronto .riga-tolta::before { content: "− "; color: var(--err); }
.mono-leggero { font-family: var(--f-mono); font-size: .9rem; line-height: 1.5; }
.decidi form + form { margin-top: .8rem; }
.conoscenza-chiamata ul { margin-bottom: .6rem; }

/* ------------------------------------------------------------------ 3.7: torna all'inizio (dalla 3.7.2 anche sul computer) */
.in-cima { position: fixed; z-index: 25; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); width: 3rem; height: 3rem;
  display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-ink); box-shadow: 0 2px 10px rgb(0 0 0 / .28); }
.in-cima .icona { width: 1.5rem; height: 1.5rem; }
.in-cima[hidden] { display: none; }
@media (min-width: 64em) { .in-cima { right: 1.5rem; bottom: 1.5rem; } }
@media print { .in-cima { display: none; } }

/* ------------------------------------------------------------------ avviso di scadenza */
.scadenza { position: fixed; z-index: 60; right: 1rem; bottom: 1rem; width: min(calc(100% - 2rem), 24rem); background: var(--surface); color: var(--ink);
  border: 2px solid var(--accent); border-radius: var(--r); padding: 1rem 1.1rem; box-shadow: 0 .5rem 2rem rgb(0 0 0 / .25); }
.scadenza[hidden] { display: none; }
.scadenza p { margin: 0 0 .6rem; }

/* ------------------------------------------------------------------ guida e documentazione */
.documento { display: grid; gap: 1.25rem; align-items: start; grid-template-columns: minmax(0, 1fr); }
/* 3.1: senza minmax(0, ...) un codice o una tabella lunga allargavano la colonna oltre lo schermo del cellulare */
.documento .sommario { order: -1; }
.documento .sommario h2 { font-size: .95rem; }
.documento .sommario ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; font-size: .92rem; }
@media (min-width: 72em) {
  .documento { grid-template-columns: minmax(0, 1fr) 16rem; }
  .documento .sommario { order: 0; position: sticky; top: calc(var(--alto-fisso) + 1rem); max-height: calc(100vh - var(--alto-fisso) - 2rem); overflow: auto; }
}
.testo-lungo { max-width: 52rem; line-height: 1.65; min-width: 0; overflow-wrap: break-word; }
.testo-lungo h2 { font-size: 1.3rem; margin: 2rem 0 .7rem; padding-top: .5rem; border-top: 1px solid var(--line); scroll-margin-top: .25rem; }
.testo-lungo h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.testo-lungo h3 { font-size: 1.08rem; margin: 1.4rem 0 .5rem; scroll-margin-top: .25rem; }
.testo-lungo p, .testo-lungo ul, .testo-lungo ol, .testo-lungo .scorri, .testo-lungo pre, .testo-lungo .nota { margin: 0 0 .9rem; }
.testo-lungo ul, .testo-lungo ol { padding-left: 1.4rem; }
.testo-lungo li + li { margin-top: .3rem; }
.testo-lungo li > ul, .testo-lungo li > ol { margin: .3rem 0 0; }
.testo-lungo pre { background: var(--surface-2); padding: .8rem 1rem; border-radius: var(--r-s); overflow-x: auto; }
.testo-lungo pre code { background: none; padding: 0; }
.testo-lungo .scorri { border: 1px solid var(--line); border-radius: var(--r-s); }
.testo-lungo .tabella th { white-space: normal; }
.scorri[role="region"]:focus-visible { outline-offset: -3px; }

/* ------------------------------------------------------------------ stampa */
@media print {
  .laterale, .barra, .velo, .salta, .bottoni, .strumenti-testo, form { display: none !important; }
  .app { display: block; }
  body { background: #fff; color: #000; }
  .scheda { box-shadow: none; border-color: #999; }
}

/* ------------------------------------------------------------------ notifiche e manutenzione (2.5) */
/* 3.1 (Ale 20/10/2026): con i punti elenco */
.elenco-notifiche { list-style: disc; margin: 0 0 .75rem; padding-left: 1.2rem; }
.elenco-notifiche li { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.elenco-notifiche li::marker { color: var(--accent); }
.elenco-notifiche li:last-child { border-bottom: 0; }
.testo-notifica { max-width: 70ch; }
.testo-notifica p { margin: 0 0 .8rem; }
/* 2.9: testo HTML dell'editor (elenchi, titoletti, citazioni) */
.testo-notifica ul, .testo-notifica ol { margin: 0 0 .8rem; padding-left: 1.4rem; }
.testo-notifica li { margin: .15rem 0; }
.testo-notifica h3, .testo-notifica h4 { margin: 1rem 0 .4rem; font-size: 1.05rem; }
.testo-notifica blockquote { margin: 0 0 .8rem; padding: .3rem .9rem; border-left: 3px solid var(--accent); color: var(--muted); }
.testo-notifica > :last-child { margin-bottom: 0; }
.controlli-manutenzione td:first-child { white-space: nowrap; }

/* ------------------------------------------------------------------ 2.9: editor delle notifiche
 * Senza JavaScript resta il campo di testo; con JavaScript barra e area modificabile (app.js, data-editor). */
.editor-barra { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; padding: .35rem; border: 1px solid var(--line-strong);
  border-bottom: 0; border-radius: var(--r-s) var(--r-s) 0 0; background: var(--surface-2); }
.editor-barra .btn { min-width: 2.2rem; min-height: 2.2rem; padding: .3rem; }
.editor-barra .btn b, .editor-barra .btn i, .editor-barra .btn u { font-size: 1rem; line-height: 1; min-width: 1.25em; text-align: center; }
.editor-barra .btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.editor-sep { width: 1px; align-self: stretch; margin: .2rem .25rem; background: var(--line-strong); }
.editor-area { min-height: 9rem; max-width: none; padding: .6rem .8rem; border: 1px solid var(--line-strong); border-radius: 0 0 var(--r-s) var(--r-s);
  background: var(--surface); overflow-wrap: anywhere; cursor: text; }
.editor-area:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; }
.editor-area:empty::before { content: "Scrivi qui il messaggio"; color: var(--muted); }
.editor-breve .editor-area { min-height: 5rem; }                                        /* 3.10: note per gli altri */
.editor-breve .editor-area:empty::before { content: "Scrivi qui le note per i colleghi"; }
.note-rubrica p, .note-rubrica ul, .note-rubrica ol { margin: 0 0 .3rem; }
.note-rubrica ul, .note-rubrica ol { padding-left: 1.1rem; }
.editor-link { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .45rem .5rem; border: 1px solid var(--line-strong); border-bottom: 0; background: var(--surface); }
.editor-link label { font-size: .85rem; }
.editor-link input { flex: 1 1 14rem; width: auto; min-height: 2.1rem; }
.editor-barra[hidden], .editor-link[hidden], .editor-area[hidden], [data-editor] textarea[hidden], [data-senza-editor][hidden] { display: none !important; }

/* ------------------------------------------------------------------ 2.9: pagina Download */
.tabella-download tr.spento td { color: var(--muted); }
.tabella-download tr.spento b { font-weight: 500; }
.tabella-download td[data-etichetta="Cancellazione"] { min-width: 9rem; }
/* 3.3: archivio delle sedi (Modifica che si apre nella riga) e grafico di chi chiama piu' spesso */
.tabella.tabella-sedi td.azioni { white-space: normal; min-width: 15rem; }
.tabella.tabella-sedi td.azioni > * { margin: 0 0 .3rem .25rem; }
.modifica-sede { display: inline-block; vertical-align: top; }
.modifica-sede[open] { display: block; text-align: left; margin-bottom: .5rem; }
.modifica-sede > summary { list-style: none; }
.modifica-sede > summary::-webkit-details-marker { display: none; }
.modifica-sede form { margin-top: .5rem; }
.barre.grafico-chiamanti div { grid-template-columns: minmax(9rem, 12rem) 1fr auto; }
.grafico-chiamanti > div > span:last-child { white-space: nowrap; }
@media (max-width: 40em) { .barre.grafico-chiamanti div { grid-template-columns: 1fr auto; row-gap: .15rem; } .barre.grafico-chiamanti div > span:first-child { grid-column: 1 / -1; } }
/* 3.2: regole del controllo delle chiamate (Sicurezza) e note della Rubrica */
.regole-controllo { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); margin-top: .8rem; }
.regole-controllo .regola legend .spunta { font-weight: 550; }
.tabella-rubrica { font-size: .92rem; }
.tabella-rubrica th, .tabella-rubrica td { padding-left: .45rem; padding-right: .45rem; }
.note-rubrica { min-width: 5.5rem; max-width: 15rem; overflow-wrap: anywhere; }
/* verifica del 29/10/2026 con i dati del simulatore («Segreteria del Segretario comunale», telefoni di 16 caratteri): uffici e telefono vanno a
 * capo dentro la Rubrica, altrimenti la tabella usciva dal riquadro e sul telefono la chip usciva dalla scheda */
.tabella-rubrica .chip { white-space: normal; }
.tabella-rubrica td[data-etichetta="Telefono"] a { white-space: normal; overflow-wrap: anywhere; }
.tabella.tabella-rubrica td.azioni { white-space: normal; }
.tabella.tabella-rubrica td.azioni > .btn { margin: 0 0 .3rem .25rem; }
/* Ale 29/10/2026 dal simulatore: «la tabella rubrica eccede lo spazio disponibile, ho dovuto mettere l'impostazione larghezza piena della
 * pagina». La tabella sta nel suo riquadro: celle piu' strette, i pulsanti vanno a capo (gli uffici uno sotto l'altro); quando il riquadro
 * e' piu' stretto di quello che serve alle dieci colonne (circa 60rem con i dati di prova; colonna di Cicerone aperta, finestra stretta,
 * testo Grande o Molto grande) ogni persona diventa una scheda con le etichette, come sul telefono, due affiancate se ci stanno. Si misura
 * il riquadro (container query, in rem: vale con ogni misura del testo), non la finestra */
.rubrica-scorri { container: rubrica / inline-size; }
.tabella-rubrica .btn { white-space: normal; text-align: left; }
@container rubrica (max-width: 62rem) {
  /* verifica del 29/10/2026: a schede i titoli non spariscono, diventano una fila di pulsanti «Ordina per» (Ale 26/10: si ordina dai titoli) */
  .tabella.tabella-rubrica thead { display: block; border-bottom: 1px solid var(--line); background: var(--surface-2); }
  .tabella.tabella-rubrica thead tr { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .45rem; width: 100%; padding: .55rem 1.1rem; border: 0; }
  .tabella.tabella-rubrica thead tr::before { content: "Ordina per"; color: var(--muted); font: 600 .7rem/1.3 var(--f-ui); text-transform: uppercase; letter-spacing: .04em; margin-right: .15rem; }
  .scheda > .scorri .tabella.tabella-rubrica thead th, .scheda > .scorri .tabella.tabella-rubrica thead th:first-child { display: block; width: auto; padding: 0; border: 0; background: none; }
  .tabella.tabella-rubrica thead th:not([data-ordina]) { display: none; }
  .tabella.tabella-rubrica thead .ordina-col { min-height: 1.6rem; padding: .1rem .55rem; border: 1px solid var(--line-strong); border-radius: 99px; background: var(--surface); }
  .tabella.tabella-rubrica thead [aria-sort="ascending"] .ordina-col, .tabella.tabella-rubrica thead [aria-sort="descending"] .ordina-col { border-color: var(--accent); color: var(--ink); }
  .tabella.tabella-rubrica, .tabella.tabella-rubrica tbody, .tabella.tabella-rubrica tbody tr, .tabella.tabella-rubrica td { display: block; width: 100%; }
  .tabella.tabella-rubrica tbody tr { padding: .6rem 1.1rem; border-bottom: 1px solid var(--line); }
  .scheda > .scorri .tabella.tabella-rubrica td, .scheda > .scorri .tabella.tabella-rubrica td:first-child { border: 0; padding: .3rem 0 .3rem 7.2rem; position: relative; text-align: left; min-height: 1.9rem; }
  .tabella.tabella-rubrica td::before { content: attr(data-etichetta); position: absolute; left: 0; top: .45rem; width: 6.8rem; color: var(--muted);
    font: 600 .7rem/1.3 var(--f-ui); text-transform: uppercase; letter-spacing: .04em; }
  .scheda > .scorri .tabella.tabella-rubrica td[data-etichetta=""] { padding-left: 0; }
  .tabella.tabella-rubrica td[data-etichetta=""]::before { content: none; }
  .tabella.tabella-rubrica td:empty { display: none; }
  .tabella.tabella-rubrica td.azioni { padding-top: .5rem; display: flex; flex-wrap: wrap; gap: .4rem; }
  .tabella.tabella-rubrica td.azioni > .btn { margin: 0; }
  .tabella.tabella-rubrica tbody tr:hover td { background: none; }
  .note-rubrica { min-width: 0; max-width: none; }
}
@container rubrica (min-width: 40rem) and (max-width: 62rem) {
  .tabella.tabella-rubrica tbody { display: grid; grid-template-columns: 1fr 1fr; }
  .tabella.tabella-rubrica tbody tr:nth-child(odd) { border-right: 1px solid var(--line); }
}
@container rubrica (max-width: 39.99rem) { .tabella.tabella-rubrica tbody tr:last-child { border-bottom: 0; } }
@media (max-width: 22.5em) {
  .scheda > .scorri .tabella.tabella-rubrica td, .scheda > .scorri .tabella.tabella-rubrica td:first-child { padding-left: 0; }
  .tabella.tabella-rubrica td::before { position: static; display: block; width: auto; margin-bottom: .1rem; }
}
.tabella-download meter { display: block; width: 100%; max-width: 9rem; height: .55rem; margin: .25rem 0 .1rem; }
.giorni-mancanti b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.giorni-mancanti.presto b { color: var(--err); }
.tabella.tabella-download td.azioni { white-space: normal; min-width: 13rem; }
.tabella.tabella-download td.azioni > * { margin: 0 0 .3rem .25rem; }
.tabella.tabella-download td.azioni form { display: inline-block; }
.nota .icona { display: inline-block; vertical-align: -.25em; margin-right: .3rem; }
.nota-pdf { margin: -.4rem 0 1rem; }

/* ------------------------------------------------------------------ 2.9: chiamata precedente e successiva */
.naviga-chiamate { display: grid; grid-template-columns: 1fr auto 1fr; gap: .6rem; align-items: center; margin: 0 0 1rem; }
.naviga-chiamate .btn { justify-content: flex-start; white-space: normal; text-align: left; line-height: 1.25; }
.naviga-chiamate .btn.dopo { justify-content: flex-end; text-align: right; justify-self: end; }
.naviga-chiamate .btn small { display: block; font-weight: 400; color: var(--muted); font-size: .78rem; }
.naviga-chiamate .btn.spento { visibility: hidden; }
.naviga-chiamate .dove { text-align: center; font-size: .85rem; color: var(--muted); }
.naviga-chiamate .dove b { color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 40rem) {
  .naviga-chiamate { grid-template-columns: 1fr 1fr; }
  .naviga-chiamate .dove { grid-column: 1 / -1; grid-row: 1; }
}
.controlli-manutenzione ul { margin: .3rem 0 0; padding-left: 1.1rem; }

/* ------------------------------------------------------------------ stili e personalizzazione (2.6)
 * Ogni stile ha i suoi colori (temi.css) e la sua forma (qui: carattere, angoli, ombre). Le scelte dell'utente
 * (attributi data-* di <html>) vengono dopo, quindi vincono. I caratteri sono ospitati qui (font/, licenza OFL):
 * niente Google Fonts, che manderebbero a Google l'indirizzo IP di chi apre la pagina. */
@font-face { font-family: "Titillium Web"; font-weight: 400; font-display: swap; src: url("font/titillium-web-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Titillium Web"; font-weight: 600; font-display: swap; src: url("font/titillium-web-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Titillium Web"; font-weight: 700; font-display: swap; src: url("font/titillium-web-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap; src: url("font/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap; src: url("font/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); }
:root { --f-titoli: var(--f-ui); --f-sistema: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
        --f-pa: "Titillium Web", "Segoe UI", system-ui, sans-serif; --f-grazie: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif; }
h1, h2, h3 { font-family: var(--f-titoli); }

/* la forma degli stili */
[data-stile="istituzionale"] { --f-ui: var(--f-pa); --f-titoli: var(--f-pa); --r: 4px; --r-s: 3px; --ombra: none; }
[data-stile="carta"] { --f-titoli: var(--f-grazie); --r: 3px; --r-s: 2px; --ombra: none; }
[data-stile="ardesia"] { --r: 12px; --r-s: 8px; --ombra: 0 1px 2px rgb(0 0 0 / .12), 0 4px 12px rgb(0 0 0 / .10); }
[data-stile="mare"] { --f-titoli: var(--f-pa); --r: 10px; --r-s: 6px; }
[data-stile="bosco"] { --r: 16px; --r-s: 10px; --ombra: 0 2px 10px rgb(20 40 20 / .10); }

/* le scelte dell'utente */
[data-carattere="sistema"] { --f-ui: var(--f-sistema); --f-titoli: var(--f-sistema); }
[data-carattere="titillium"] { --f-ui: var(--f-pa); --f-titoli: var(--f-pa); }
[data-carattere="leggibile"] { --f-ui: "Atkinson Hyperlegible", var(--f-sistema); --f-titoli: "Atkinson Hyperlegible", var(--f-sistema); }
[data-carattere="serif"] { --f-ui: var(--f-grazie); --f-titoli: var(--f-grazie); }
[data-angoli="squadrati"] { --r: 2px; --r-s: 2px; }
[data-angoli="arrotondati"] { --r: 10px; --r-s: 7px; }
[data-angoli="molto"] { --r: 18px; --r-s: 12px; }
[data-densita="compatta"] body { line-height: 1.4; }
[data-densita="compatta"] main { padding-top: .6rem; }
[data-densita="compatta"] .scheda { padding: .7rem .85rem; }
[data-densita="compatta"] .scheda + .scheda { margin-top: .75rem; }
[data-densita="compatta"] .tabella th, [data-densita="compatta"] .tabella td { padding: .35rem .5rem; }
[data-densita="compatta"] .laterale .sezioni a, [data-densita="compatta"] .laterale .gruppo > summary { padding-top: .4rem; padding-bottom: .4rem; }
[data-densita="ariosa"] body { line-height: 1.7; }
[data-densita="ariosa"] .scheda { padding: 1.6rem; }
[data-densita="ariosa"] .scheda + .scheda { margin-top: 1.75rem; }
[data-densita="ariosa"] .tabella th, [data-densita="ariosa"] .tabella td { padding: .85rem 1rem; }
[data-larghezza="larga"] main:not(.stretto) { max-width: 96rem; }
[data-larghezza="piena"] main:not(.stretto) { max-width: none; }
[data-movimento="ridotto"] *, [data-movimento="ridotto"] *::before, [data-movimento="ridotto"] *::after {
  transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
[data-link="sottolineati"] a:not(.btn) { text-decoration: underline; text-underline-offset: .15em; }
/* 2.9: "Invia per mail" nella riga del download apre il modulo con gli indirizzi */
.invia-mail { display: inline-block; vertical-align: top; }
.invia-mail > summary { list-style: none; }
.invia-mail > summary::-webkit-details-marker { display: none; }
.invia-mail[open] { display: block; }
.invia-mail form { display: grid !important; gap: .35rem; margin: .4rem 0 .2rem; padding: .6rem .7rem; min-width: min(18rem, 100%);
  text-align: left; white-space: normal; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-2); }
.invia-mail form p { margin: 0; }
.invia-mail form .btn { justify-self: start; }
/* 3.0: password dimenticata, accesso da confermare, browser troppo vecchio, motivo del ritiro, collegamenti in una finestra nuova */
.accesso .dimenticata { text-align: center; }
.accesso .dati-chiamata { margin: 0; }
.accesso form.sopra { display: grid; gap: .6rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.accesso .bottoni form { display: inline; }
.elenco-semplice { margin: 0; padding-left: 1.3rem; }
.elenco-semplice li { margin: .2rem 0; }
/* 3.6: temi delle proposte (Archivi) */
.elenco-temi { columns: 3 16rem; column-gap: 2rem; margin: .5rem 0 1rem; padding-left: 1.8rem; }
.elenco-temi li { break-inside: avoid; padding: .15rem 0; }
.elenco-temi li > * + * { margin-left: .4rem; }
.elenco-altro { margin: .3rem 0 0; padding-left: 1.2rem; }
.elenco-altro li { margin: .35rem 0; overflow-wrap: anywhere; }
.elenco-altro li > a { margin-right: .4rem; }
.motivo-ritiro { margin: 0 0 .8rem; }
.ritira { display: inline-block; vertical-align: top; }
.ritira > summary { list-style: none; }
.ritira > summary::-webkit-details-marker { display: none; }
.ritira[open] { display: block; flex-basis: 100%; }
.ritira form { margin: .5rem 0 .2rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-2); }
.testo-notifica a[target="_blank"]::after { content: "\2197"; display: inline-block; margin-left: .15em; font-size: .85em; text-decoration: none; }
/* 3.4: ricerca libera nell'elenco, suggerimenti dei cittadini, riquadri della home da spostare (solo sul computer) */
.cerca-libera { margin-bottom: .9rem; }
.cerca-libera input { width: 100%; }
.tabella td.trovato { min-width: 13rem; max-width: 22rem; white-space: normal; font-size: .88rem; line-height: 1.4; }
.tabella td.testo-lungo { min-width: 16rem; max-width: 34rem; white-space: normal; }
.temi .etichetta, td .etichetta + .etichetta { margin: 0 .15rem .2rem 0; }
a.etichetta { text-decoration: none; }
.grafico-temi a { color: inherit; }
.sugg-ultimi li a { white-space: normal; }
.in-linea { display: inline; }
.testa-widget { display: flex; align-items: flex-start; gap: .5rem; }
.testa-widget h2 { flex: 1; min-width: 0; }
.comandi-widget { display: none; gap: .3rem; margin: -.2rem -.2rem 0 0; }
.comandi-widget .btn { opacity: .55; }
.widget:hover .comandi-widget .btn, .comandi-widget .btn:focus-visible { opacity: 1; }
.comandi-widget [data-larghezza][aria-pressed="true"] .icona { transform: scaleX(-1); }
.maniglia { cursor: grab; }
.sposta-aiuto, .solo-desktop { display: none; }
@media (min-width: 64em) and (pointer: fine) {
  .solo-desktop { display: block; }
  .comandi-widget { display: flex; }
  .sposta-aiuto .icona { display: inline-block; width: 1em; height: 1em; vertical-align: -.15em; }
}
@media (max-width: 71.99em) { .comandi-widget [data-larghezza] { display: none; } }
.griglia .widget.trascinato { opacity: .45; }
.griglia .widget.bersaglio { outline: 2px dashed var(--accent); outline-offset: 3px; }
.griglia .widget.spostato { animation: spostato .6s ease-out; }
@keyframes spostato { from { box-shadow: 0 0 0 3px var(--accent); } to { box-shadow: none; } }

/* ------------------------------------------------------------------ 3.11: avvisi in alto a destra (promemoria, colleghi che entrano) */
.avvisi-pila { position: fixed; z-index: 58; top: calc(var(--alto-fisso) + .6rem); right: 1rem; width: min(24rem, calc(100vw - 2rem)); display: grid; gap: .6rem; pointer-events: none; }
.avvisi-pila:empty { display: none; }
.avviso-toast { pointer-events: auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; align-items: start; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r); padding: .7rem .6rem .7rem .8rem; box-shadow: 0 .5rem 1.8rem rgb(0 0 0 / .22); }
.avviso-toast > .icona { color: var(--accent); margin-top: .1rem; }
.avviso-toast.promemoria { border-left-color: var(--warn); }
.avviso-toast.promemoria > .icona { color: var(--warn); }
.avviso-toast.promemoria.scaduto { border-left-color: var(--err); }
.avviso-toast.promemoria.scaduto > .icona { color: var(--err); }
.avviso-toast p { margin: 0 0 .35rem; overflow-wrap: anywhere; }
.avviso-titolo { font-weight: 650; }
.avviso-azioni { display: flex; flex-wrap: wrap; gap: .35rem .5rem; align-items: center; margin-top: .2rem; }
.avviso-chiudi { min-width: 2rem !important; min-height: 2rem; border-color: transparent; }
@media (max-width: 40em) { .avvisi-pila { top: auto; bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); } }
@media print { .avvisi-pila { display: none; } }
.modifiche-segno { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--warn); font-weight: 600; }
.modifiche-segno::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--warn); }
.modifiche-segno[hidden] { display: none; }
.scadenza .nota { margin: 0 0 .7rem; font-size: .88rem; }

/* ------------------------------------------------------------------ 3.11: collegati ora (home e chat) */
.collegati { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.collegati-widget li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.collegati-widget li:last-child { border-bottom: 0; }
.collegati .iniziali { font-size: .75rem; font-weight: 700; color: var(--accent); }
.collegato-nome { min-width: 0; }
.collegato-nome b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collegato-nome small { display: block; color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.collegato-nome small .stato-chat { display: inline-flex; }
.collegato-nome small .stato-chat .pallino { display: none; }
.collegato-azioni { display: flex; gap: .3rem; }
.collegati-conto { margin: -.4rem 0 .5rem; }
.collegati-chat a.collegato-voce { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .6rem; align-items: center; padding: .4rem .5rem; border-radius: var(--r-s); color: var(--ink); text-decoration: none; }
.collegati-chat a.collegato-voce:hover { background: var(--surface-2); }
.chat-collegati { margin-bottom: .6rem; }
.chat-collegati .collegati-nessuno { font-size: .85rem; margin: .2rem 0 .6rem; }

/* ------------------------------------------------------------------ 3.11: promemoria */
.tabella-promemoria tr.scaduto td { background: var(--err-soft); }
.tabella-promemoria tr.scaduto td:first-child { box-shadow: inset 4px 0 0 var(--err); }
.tabella-promemoria tr.fatto td { color: var(--muted); }
.tabella-promemoria tr.fatto b { font-weight: 500; text-decoration: line-through; }
.tabella-promemoria .estratto { display: block; }
.tabella-promemoria td.azioni { white-space: nowrap; }
.prm-come { display: inline-flex; gap: .2rem; vertical-align: -.2em; color: var(--accent); }
.prm-selezione { margin-top: 0; margin-bottom: .8rem; }
.conferma-in-linea { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.conferma-in-linea > summary { list-style: none; }
.conferma-in-linea > summary::-webkit-details-marker { display: none; }
/* 6.3 (verifiche del 28/10/2026, WCAG 1.4.3): aperta, il pulsante non si sbiadisce piu' (al 60% il testo scendeva sotto il contrasto minimo,
 * per esempio «Svuota…» rosso su bianco a 3,1:1): il bordo tratteggiato e lo sfondo dicono che e' aperta. Revisione finale del 28/10/2026:
 * lo sfondo grigio non tocca il pulsante primario («Approva…» del verbale, in produzione dalla 5.3): il suo testo resta var(--accent-ink) e
 * diventava bianco su grigio (1,2:1); al primario restano i suoi colori, e la frase e «Sì, approva» che compaiono dicono che e' aperta */
.conferma-in-linea[open] > summary { border-style: dashed; }
.conferma-in-linea[open] > summary:not(.primario) { background: var(--surface-2); }
.promemoria-riquadro h2 { margin-bottom: .5rem; }
.promemoria-riquadro ul { margin-bottom: .5rem; }
.promemoria-rapido { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.promemoria-riquadro .piccolo { margin: .6rem 0 0; }
.prm-segno { display: inline-flex; vertical-align: -.2em; color: var(--warn); }
.widget .elenco li.scaduto a { color: var(--err); font-weight: 600; }
.editor-promemoria .editor-area:empty::before { content: "Scrivi qui la nota (facoltativa)"; }
[data-intervallo][hidden] { display: none; }

/* ------------------------------------------------------------------ 3.11: Conoscenza, sezioni a tendina, indice, sottocategorie */
.voce-indice { display: inline-block; min-width: min(100%, 16rem); max-width: 100%; margin: 0 0 1.1rem; padding: .7rem 1rem .8rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-s); }
.voce-indice-testa { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; }
.voce-indice ol { margin: 0; padding-left: 0; list-style: none; counter-reset: ix; }
.voce-indice li { counter-increment: ix; margin: .15rem 0; }
.voce-indice li::before { content: counters(ix, ".") " "; color: var(--muted); font-variant-numeric: tabular-nums; margin-right: .3rem; }
.voce-indice ol ol { padding-left: 1.2rem; }
.voce-intro { margin-bottom: .8rem; }
.voce-sezione { border-top: 1px solid var(--line); scroll-margin-top: .25rem; }
.voce-sezione > summary { display: flex; align-items: center; gap: .55rem; cursor: pointer; padding: .7rem .2rem; list-style: none; }
.voce-sezione > summary::-webkit-details-marker { display: none; }
.voce-sezione > summary::before { content: ""; flex: none; width: .55rem; height: .55rem; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); transition: transform .15s; }
.voce-sezione[open] > summary::before { transform: rotate(45deg); }
.voce-sezione > summary h3, .voce-sezione > summary h4 { margin: 0; font-size: 1.08rem; font-weight: 700; }
.voce-sezione > summary h4 { font-size: 1rem; }
.voce-sezione > summary:hover h3, .voce-sezione > summary:hover h4 { color: var(--accent); }
.voce-sezione-corpo { padding: 0 .2rem .6rem 1.15rem; }
.voce-sezione.sotto { border-top-style: dashed; }
.voce-sezione:last-child { border-bottom: 1px solid var(--line); }
.editor { position: relative; }
.editor-extra { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; padding: .35rem .5rem; border: 1px solid var(--line-strong); border-bottom: 0; background: var(--surface-2); }
.editor-extra select { width: auto; min-height: 2rem; padding: .2rem .5rem; }
.editor-extra[hidden] { display: none; }
.wikilink-scelta { position: absolute; z-index: 30; width: min(24rem, 100%); max-height: 18rem; overflow-y: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-s); box-shadow: 0 8px 24px rgb(0 0 0 / .2); padding: .25rem; }
.wikilink-scelta[hidden] { display: none; }
.wikilink-voce { padding: .45rem .6rem; border-radius: var(--r-s); cursor: pointer; }
.wikilink-voce b, .wikilink-voce small { display: block; }
.wikilink-voce small { color: var(--muted); font-size: .78rem; }
.wikilink-voce[aria-selected="true"], .wikilink-voce:hover { background: var(--accent-soft); color: var(--ink); }
.wikilink-scelta p { margin: .3rem .5rem; }
.wikilink-aiuto { border-top: 1px solid var(--line); padding-top: .3rem; }
.sintassi-conoscenza { margin-top: .6rem; }
.sintassi-conoscenza > summary { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; font-weight: 600; color: var(--accent); }
.sintassi-conoscenza .tabella td { white-space: normal; vertical-align: top; }
.sintassi-conoscenza .tabella .icona { display: inline-block; width: 1em; height: 1em; vertical-align: -.15em; }
.sintassi-conoscenza code { white-space: nowrap; }
.sotto-categorie { font-size: .85rem; font-weight: 600; color: var(--muted); margin: .9rem 0 .45rem; }
.percorso-categoria { margin: .7rem 0 0; }
.chips-categorie .chip.nel-percorso { background: var(--accent-soft); }
.percorso-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
form.livello-2 { padding-left: 1.2rem; }
form.livello-3 { padding-left: 2.4rem; }.btn.va-a-capo { white-space: normal; text-align: left; }
.avviso-titolo a { color: var(--ink); }
[data-per][hidden], [data-ripeti-fino][hidden] { display: none; }
.prm-per-chi .scelte-persone { max-height: 14rem; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-s); padding: .5rem .7rem; }
.prm-copie { list-style: none; margin: .3rem 0 0; padding: 0; }
.prm-copie li { margin: .15rem 0; }
.prm-ripete { display: flex; align-items: center; gap: .3rem; color: var(--accent); }
.prm-ripete .icona { width: 1em; height: 1em; }
.nota-rif { line-height: 0; scroll-margin-top: 1.25rem; }
.nota-rif a { text-decoration: none; font-weight: 600; padding: 0 .1rem; }
.note-pie { padding-left: 1.6rem; font-size: .92rem; }
.note-pie li { margin: .25rem 0; scroll-margin-top: .25rem; }
.note-pie li:target, .nota-rif:target { background: var(--mark); color: var(--mark-ink); }
.nota-torna { text-decoration: none; margin-left: .2rem; }
.nota-icona { font-size: 1.1rem; line-height: 1; }
.avviso-rimanda { width: auto; min-height: 2rem; padding: .2rem .5rem; font-size: .85rem; }

/* ---------------------------------------------------------------- 4.0: lavorazione delle chiamate */
.testa-pratica { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin-bottom: .6rem; }
.testa-pratica h2 { margin: 0; }
.blocco-stato { margin-bottom: .8rem; }
.blocco-stato:empty { display: none; }
/* 4.3: la barra «Lavora» in cima alle pratiche della chiamata, il riquadro dello smistamento, la pratica passata in una riga */
.barra-lavora { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-bottom: 1rem; padding: .7rem 1rem;
  border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: var(--r-s); background: var(--surface); }
.barra-lavora.attiva { border-left-color: var(--ok); background: var(--ok-soft); }
.barra-lavora-testo { margin: 0; flex: 1 1 18rem; }
.barra-lavora-testo > .icona { margin-right: .35rem; vertical-align: -.15em; }
.barra-lavora .bottoni { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0; }
.testa-pratica .etichetta .icona { width: .9em; height: .9em; margin-right: .25rem; vertical-align: -.1em; }
.smista-box { margin: 0 0 1rem; padding: .8rem 1rem; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: var(--r-s); background: var(--accent-soft); }
.smista-box h3 { margin: 0 0 .6rem; font-size: 1rem; }
.smista-box h3 > .icona { margin-right: .35rem; vertical-align: -.15em; }
.smista-box .campi { margin-bottom: .4rem; }
/* 4.4 (Ale 23/10/2026: "i box delle lavorazioni [...] devono avere una moderata evidenza nel colore o altra cosa che li distacchi da
 * tutti gli altri box"): fondo appena colorato e barra a sinistra nel colore della pagina; il titolo nello stesso colore */
.scheda.pratica, .scheda.pratica-passata { border-left: 5px solid var(--accent); background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
.scheda.pratica .testa-pratica h2 { color: var(--accent); }
[data-stile="contrasto"] .scheda.pratica, [data-stile="contrasto"] .scheda.pratica-passata { border-left-width: 6px; }
.pratica-passata summary { display: flex; gap: .5rem; align-items: center; cursor: pointer; }
.pratica-passata[open] summary { margin-bottom: .6rem; }
.blocco-stato .nota { margin-bottom: .5rem; }
.blocco-stato .bottoni { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.pratica fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.pratica fieldset[disabled] { opacity: .75; }
.sotto-sezione { margin: .8rem 0; border-top: 1px solid var(--line); padding-top: .6rem; }
.sotto-sezione > summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.riquadro-piccolo { display: grid; gap: .4rem; margin: .5rem 0; padding: .6rem; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); max-width: 28rem; }
details.in-linea { display: inline-block; vertical-align: top; }
details.in-linea > summary { list-style: none; }
details.in-linea > summary::-webkit-details-marker { display: none; }
.diario { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .55rem; }
.voce-diario { border-left: 3px solid var(--line-strong); padding: .3rem 0 .3rem .7rem; }
.voce-diario.tipo-richiamata, .voce-diario.tipo-tentativo { border-left-color: var(--accent); }
.voce-diario.tipo-sistema, .voce-diario.tipo-modifica, .voce-diario.tipo-collegamento, .voce-diario.tipo-blocco { border-left-color: var(--line); color: var(--muted); }
.voce-diario.tipo-passaggio { border-left-color: var(--warn); }
.voce-diario.annullata > :not(.piccolo) { text-decoration: line-through; opacity: .6; }
.diario-testa { margin: 0 0 .2rem; }
/* 6.0: il diario in una finestra che scorre */
.diario-box { margin-top: .5rem; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); }
.diario-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem .8rem; padding: .35rem .6rem; border-bottom: 1px solid var(--line); background: var(--surface-2, var(--surface)); }
.diario-finestra { max-height: min(55vh, 30rem); overflow-y: auto; overscroll-behavior: contain; padding: .2rem .6rem .5rem; }
.diario-finestra:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.diario-box.tutto .diario-finestra { max-height: none; }
.diario-box.solo .voce-diario.tipo-sistema, .diario-box.solo .voce-diario.tipo-modifica, .diario-box.solo .voce-diario.tipo-collegamento, .diario-box.solo .voce-diario.tipo-blocco { display: none; }
@media print { .diario-finestra { max-height: none; overflow: visible; } .diario-barra { display: none; } }
.diario-campi { margin: .1rem 0 .2rem; padding-left: 1.1rem; font-size: .9rem; }
.iter { margin: 0; padding-left: 1.2rem; display: grid; gap: .5rem; }
.elenco-collegate { margin: .4rem 0; padding-left: 1.2rem; }
tr.corrente td { background: var(--accent-soft); }
.lucchetto .icona { width: 1em; height: 1em; vertical-align: -.15em; color: var(--warn); }
.elenco-widget { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
/* la "i" con la spiegazione e il collegamento alle istruzioni (finestra piccola a parte) */
.info-i { display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; padding: 0; margin-left: .25rem; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--accent); font: italic 700 .72rem/1 Georgia, serif; vertical-align: .15em; cursor: help; }
.info-i:hover, .info-i:focus-visible { background: var(--accent-soft); }
.info-guida { font-size: .78rem; font-weight: 500; margin-left: .2rem; }
/* avviso di inattivita' della scheda (visivo; il suono lo fa app.js) */
.avviso-inattivo { position: fixed; z-index: 70; left: 50%; bottom: 1.2rem; transform: translateX(-50%); width: min(28rem, calc(100vw - 2rem));
  padding: 1rem 1.1rem; border-radius: var(--r); background: var(--surface); color: var(--ink); border: 2px solid var(--warn); box-shadow: var(--ombra); }
.avviso-inattivo p { margin: 0 0 .5rem; }
@media (prefers-reduced-motion: no-preference) { .avviso-inattivo:not([hidden]) { animation: lampeggia 1s ease-in-out 3; } }
@keyframes lampeggia { 50% { border-color: var(--err); } }
/* la guida aperta nella finestra piccola: solo il testo */
.guida-minima { max-width: 46rem; margin: 0 auto; padding: 1rem; }
.griglia-due { display: grid; gap: 0 1.5rem; }
@media (min-width: 900px) { .griglia-due { grid-template-columns: 1fr 1fr; } }
.testo-mail { white-space: pre-wrap; font: inherit; margin: 0; }
.pratica-campi .editor-area:empty::before { content: "Nota fissa della pratica (le voci vanno nel diario)"; }
.attivita-nuova .editor-area:empty::before { content: "Cosa è stato fatto o detto"; }

/* 4.2: dettaglio della chiamata su due colonne sul computer (la pratica a sinistra, i riquadri brevi a destra) */
.dettaglio-colonne { margin-top: 1.25rem; }
.dettaglio-colonne + .scheda, .dettaglio-colonne + .nota, .dettaglio-colonne + .sezione { margin-top: 1.25rem; }
.dettaglio-sx > * + *, .dettaglio-dx > * + * { margin-top: 1.25rem; }
.dettaglio-dx { margin-top: 1.25rem; }
@media (min-width: 72em) {
  .dettaglio-colonne { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.25rem; align-items: start; }
  .dettaglio-dx { margin-top: 0; }
}

/* 4.2: Archivi → Sedi, un blocco per sede (niente tabella da scorrere di lato) */
.elenco-sedi { list-style: none; margin: 0 -1.1rem; padding: 0; border-top: 1px solid var(--line); }
.sede-voce { padding: .8rem 1.1rem; border-bottom: 1px solid var(--line); }
.sede-testa { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1.5rem; }
.sede-dati { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; align-items: center; }
.sede-azioni { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; align-items: flex-start; }
.sede-azioni .modifica-sede[open] { flex: 1 1 100%; order: 9; margin: .4rem 0 0; padding: .8rem; border: 1px solid var(--line); border-radius: var(--r); }
.sede-azioni form { margin: 0; }

/* 4.6: Feedback e Assistenza nella barra in alto (sul cellulare solo le icone) */
.barra-aiuti { display: flex; gap: .4rem; align-items: center; flex: none; }
.barra-pulsante { list-style: none; }
.barra-pulsante::-webkit-details-marker { display: none; }
@media (max-width: 63.99em) { .barra-aiuti .barra-pulsante > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
/* 6.3 (Ale 29/10/2026: «l'icona esci anche in alto tutta a destra dopo personalizza»): l'ultima della barra, solo sul computer */
.barra-esci { flex: none; }
@media (max-width: 63.99em) { .barra-esci { display: none !important; } }
.fb-menu { position: relative; }
/* 6.0: il cestino nella barra, con il numero */
.barra-cestino { position: relative; }
.barra-cestino .conta { position: absolute; top: -.35rem; right: -.35rem; min-width: 1.1rem; padding: 0 .25rem; border-radius: 99px; background: var(--err); color: var(--surface);
  font-size: .68rem; font-weight: 700; line-height: 1.1rem; text-align: center; }
.cestino-azioni { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .6rem 0; }
.cestino-azioni form { margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.fb-menu > summary { cursor: pointer; }
.fb-pannello { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 40; width: min(24rem, calc(100vw - 2rem)); padding: 1rem;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: var(--ombra); }
.fb-pannello .fb-titolo { margin: 0 0 .3rem; }
.fb-pannello .campo textarea { width: 100%; }
@media (max-width: 40em) { .fb-pannello { position: fixed; left: 1rem; right: 1rem; top: calc(var(--alto-fisso) + .4rem); width: auto; max-height: calc(100vh - var(--alto-fisso) - 2rem); overflow-y: auto; } }
/* le pagine nuove: frase introduttiva fuori dalle schede */
main > p.sotto { color: var(--muted); font-size: .9rem; margin: 0 0 1rem; }
/* Proposte da votare */
.proposta { border-top: 1px solid var(--line); padding: .9rem 0 .4rem; }
.proposta:first-of-type { border-top: 0; padding-top: .2rem; }
.proposta header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; }
.proposta h3 { margin: 0; font-size: 1.02rem; }
.proposta-testo { margin: .5rem 0 .7rem; }
.voto-proposta fieldset { border: 0; padding: 0; margin: 0 0 .5rem; }
.voto-proposta legend { font-size: .87rem; font-weight: 600; margin-bottom: .35rem; }
.voti-scelta { display: flex; flex-wrap: wrap; gap: .4rem; }
.voti-scelta label { position: relative; }
.voti-scelta input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.voti-scelta span { display: inline-block; padding: .35rem .7rem; border: 1px solid var(--line-strong); border-radius: 99px; font-size: .85rem; cursor: pointer; background: var(--surface); }
.voti-scelta input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.voti-scelta input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.fb-miei li { margin: .6rem 0; }
.fb-risposta { margin: .35rem 0 0; padding: .5rem .75rem; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: var(--r-s); }
.fb-risposta p { margin: 0; }
.fb-risposta .et { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.fb-testo { white-space: normal; margin-top: .4rem; }
dl.dati { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0 0 .8rem; }
dl.dati dt { color: var(--muted); font-size: .85rem; }
dl.dati dd { margin: 0; }
/* l'assistente nella chat */
.msg.dell-assistente { background: color-mix(in srgb, var(--ok) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ok) 25%, transparent); }
.scheda-interna { padding: .2rem 0 .6rem; }
.pericolo-zona { margin-top: .6rem; }

/* ---------------------------------------------------------------- 4.7: ruoli, accesso assistito, ticket, newsletter, metriche */
.schede-vista { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.schede-vista a { padding: .4rem .8rem; border: 1px solid var(--line-strong); border-radius: 99px; text-decoration: none; color: var(--ink); background: var(--surface); }
.schede-vista a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
tr.da-leggere td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.elenco-semplice li.da-leggere { font-weight: 600; }
.scorri-scelte { max-height: 14rem; overflow-y: auto; padding: .4rem; border: 1px solid var(--line); border-radius: var(--r-s); }
.fascia-assistito { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.fb-ticket { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.fb-ticket .icona { display: inline-block; width: 1em; height: 1em; vertical-align: -.15em; margin-right: .2rem; }

/* ticket (4.8, Ale: "dai più spazio alla colonna di sinistra [...] compattare le righe e l'allineamento"): conversazione larga a sinistra,
 * gestione stretta a destra; i passi dello stato in fila; i messaggi con nome e ora su una riga, gli eventi in una riga sola */
.tk-testa { display: grid; gap: .45rem; }
.tk-testa h2 { margin: 0; font-size: 1.3rem; }
.tk-sopra, .tk-info, .tk-adesso { margin: 0; }
.tk-info { color: var(--muted); }
.tk-adesso { display: flex; gap: .4rem; align-items: baseline; }
.tk-adesso .icona { width: 1em; height: 1em; flex: none; transform: translateY(.12em); }
.tk-passi { list-style: none; margin: .2rem 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; counter-reset: passo; }
.tk-passi li { position: relative; counter-increment: passo; padding: .4rem .5rem .4rem 2.1rem; border-radius: var(--r-s); background: var(--surface-2); color: var(--muted); font-size: .88rem; line-height: 1.3; }
.tk-passi li::before { content: counter(passo); position: absolute; left: .5rem; top: 50%; transform: translateY(-50%); width: 1.3rem; height: 1.3rem; border-radius: 50%;
  display: grid; place-items: center; font-size: .75rem; font-weight: 700; background: var(--line-strong); color: var(--surface); }
.tk-passi li.fatto { color: var(--ink); }
.tk-passi li.fatto::before { content: "✓"; background: var(--ok); color: #fff; }
.tk-passi li.ora { background: var(--accent-soft); color: var(--ink); font-weight: 700; box-shadow: inset 0 0 0 2px var(--accent); }
.tk-passi li.ora::before { background: var(--accent); color: var(--accent-ink); }
.tk-griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem); gap: 1rem; align-items: start; margin-top: 1rem; }
.tk-griglia > .scheda, .tk-lato > .scheda { margin: 0; }
.tk-lato { display: grid; gap: 1rem; }
@media (max-width: 900px) { .tk-griglia { grid-template-columns: minmax(0, 1fr); } .tk-passi li { padding-left: 1.9rem; font-size: .8rem; } }
.tk-conversazione { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .4rem; }
.tk-msg { padding: .5rem .75rem; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--surface); }
.tk-msg.tk-richiedente { background: var(--surface-2); }
.tk-msg.tk-risposta:not(.tk-richiedente) { border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.tk-msg.tk-nota { border-style: dashed; border-color: var(--warn); background: var(--warn-soft); }
.tk-msg-testa { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .45rem; margin: 0 0 .25rem; font-size: .9rem; line-height: 1.3; }
.tk-msg-testa time { margin-left: auto; color: var(--muted); font-size: .8rem; white-space: nowrap; }
.tk-msg-testa .avatar { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center;
  font-weight: 700; font-size: .7rem; flex: none; }
.tk-testo { white-space: normal; overflow-wrap: anywhere; padding-left: 2.05rem; }
.tk-testo > :first-child { margin-top: 0; }
.tk-testo > :last-child { margin-bottom: 0; }
.tk-testo p, .tk-testo ul, .tk-testo ol { margin: .3rem 0; }
.tk-evento { display: flex; align-items: baseline; gap: .5rem; padding: .05rem .75rem .05rem 2.8rem; font-size: .8rem; line-height: 1.35; color: var(--muted); position: relative; }
.tk-evento::before { content: ""; position: absolute; left: 1.45rem; top: .45em; width: .45rem; height: .45rem; border-radius: 50%; background: var(--line-strong); }
.tk-evento time { margin-left: auto; white-space: nowrap; }
.tk-evento > span { color: var(--ink); }
.tk-evento > span .muto { color: var(--muted); }
.tk-tipo { display: flex; flex-wrap: wrap; gap: .3rem 1rem; border: 0; padding: 0; margin: 0 0 .4rem; }
.tk-bottoni { align-items: center; }
.tk-pronta { display: inline-flex; gap: .35rem; align-items: center; margin-left: auto; }
.tk-pronta select { max-width: 14rem; }
.tk-conferma { margin: 0 0 1rem; padding: .8rem 1rem; border: 2px solid var(--ok); border-radius: var(--r-s); background: var(--ok-soft); }
.tk-conferma h3 { margin: 0 0 .3rem; display: flex; gap: .35rem; align-items: center; }
.tk-conferma h3 .icona { width: 1.1em; height: 1.1em; }
.tk-chiuso p { margin: .2rem 0; }
.tk-gestione h2 { margin-bottom: .4rem; }
.tk-blocco { margin: 0; padding: .7rem 0; border-top: 1px solid var(--line); }
.tk-gestione h2 + .tk-blocco { border-top: 0; padding-top: .2rem; }
.tk-blocco h3 { margin: 0 0 .4rem; font-size: .95rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.tk-blocco p { margin: 0 0 .45rem; }
.tk-blocco .campo { margin-bottom: .45rem; }
.tk-blocco > summary { cursor: pointer; font-weight: 600; font-size: .92rem; }
.tk-blocco[open] > summary { margin-bottom: .5rem; }
.tk-dati { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .3rem .7rem; margin: 0; font-size: .9rem; }
.tk-dati dt { color: var(--muted); }
.tk-dati dd { margin: 0; overflow-wrap: anywhere; }
.tk-dest-spiega { margin: .35rem 0 0; padding-left: 1.1rem; }
.tk-dest-spiega li { margin: .15rem 0; }
.tk-nuovo { grid-template-columns: minmax(0, 2fr) minmax(15rem, 1fr); }
@media (max-width: 900px) { .tk-nuovo { grid-template-columns: minmax(0, 1fr); } }
a.numero { display: block; color: inherit; text-decoration: none; }
a.numero:hover, a.numero:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.tk-voto .voti-scelta { display: flex; flex-wrap: wrap; gap: .4rem; }
.tk-conferma .tk-voto { border: 0; padding: 0; margin: .4rem 0; }

/* newsletter */
.nl-c-comunicazione { --nl-colore: #1f5f8b; }
.nl-c-novita { --nl-colore: #2e7d5b; }
.nl-c-numeri { --nl-colore: #5b4b9a; }
.nl-c-formazione { --nl-colore: #8a5a14; }
.nl-c-urgente { --nl-colore: #a3262a; }
.nl-c-benvenuto { --nl-colore: #2b6f77; }
.nl-c-piattaforma { --nl-colore: #0f6b8f; }          /* 6.0 */
.nl-lettura { padding: 0; overflow: hidden; }
.nl-testa { background: var(--nl-colore, var(--accent)); color: #fff; padding: 1rem 1.2rem; }
.nl-testa h2 { color: #fff; margin: .3rem 0; }
.nl-testa a { color: #fff; }
.nl-corpo { padding: 1rem 1.2rem; }
.nl-modelli { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem; }
.nl-modello { display: flex; flex-direction: column; gap: .35rem; padding: .8rem; border: 1px solid var(--line); border-top: 6px solid var(--nl-colore, var(--accent)); border-radius: var(--r-s); background: var(--surface); }
.nl-modello .btn { align-self: flex-start; margin-top: auto; }
.nl-gruppo { margin-bottom: .5rem; }
.nl-invio { margin-top: 1rem; }

/* ruoli */
.griglia-ruoli-scorri { max-height: 75vh; }
.griglia-ruoli { border-collapse: separate; border-spacing: 0; font-size: .86rem; }
.griglia-ruoli th, .griglia-ruoli td { padding: .35rem .45rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.griglia-ruoli thead th { position: sticky; top: 0; background: var(--surface); z-index: 2; vertical-align: bottom; min-width: 8.5rem; }
.griglia-ruoli .gr-perm { position: sticky; left: 0; background: var(--surface); z-index: 1; text-align: left; min-width: 15rem; font-weight: 500; }
.griglia-ruoli thead .gr-perm { z-index: 3; }
.griglia-ruoli .gr-casella { text-align: center; }
.griglia-ruoli .gr-casella input { width: 1.15rem; height: 1.15rem; }
.griglia-ruoli .gr-gruppo th { background: var(--surface-2); text-align: left; font-weight: 700; position: sticky; left: 0; }
.griglia-ruoli .gr-ruolo.spento { opacity: .6; }
.griglia-ruoli .gr-nome { width: 100%; font-weight: 600; }
.griglia-ruoli .gr-base { width: 100%; font-size: .8rem; }
.gr-delicato { color: var(--warn); margin-right: .25rem; }
.gr-delicato .icona { width: 1em; height: 1em; vertical-align: -.15em; }
.ruoli-elenco .bottoni { margin-top: .3rem; }

/* limiti per persona */
.limiti-applica { margin-top: .8rem; }
/* 4.7 dopo le schermate: nella griglia dei ruoli il testo sotto il nome va a capo; nella coda dei ticket il titolo ha spazio */
.griglia-ruoli thead th small { display: block; white-space: normal; margin-top: .25rem; font-weight: 400; text-transform: none; letter-spacing: 0; }
.tabella-ticket td[data-etichetta="Numero"], .tabella-ticket td[data-etichetta="Aggiornato"] { white-space: nowrap; }
.tabella-ticket td[data-etichetta="Titolo"] { min-width: 16rem; }
@media (max-width: 760px) { .tabella-ticket td[data-etichetta="Titolo"] { min-width: 0; } }

/* ---------------------------------------------------------------- 4.8 */
/* chat: il benvenuto di assistente e analista (non e' un messaggio salvato), le analisi pronte, cosa analizzare, «Salva nella Conoscenza» */
.chat-benvenuto { max-width: min(46rem, 94%); }
.analista-pronte { margin-top: .5rem; display: grid; gap: .25rem; }
.analista-pronte p { margin: .2rem 0 0; }
.chip-elenco { display: flex; flex-wrap: wrap; gap: .35rem; }
button.chip { font: inherit; font-size: .82rem; padding: .3rem .7rem; color: var(--accent); background: var(--surface); cursor: pointer;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)); white-space: normal; text-align: left; }
button.chip:hover, button.chip:focus-visible { background: var(--accent-soft); }
@media (pointer: coarse) { button.chip { min-height: 2.75rem; } }
.chat-scrivi .chat-ambito { grid-column: 1 / -1; justify-self: start; max-width: 100%; }
.msg-salva { margin: .35rem 0 0; }
.msg-salva .btn .icona { width: 1em; height: 1em; }
/* grafico a ciambella (Uso della piattaforma): i colori f1-f6 seguono il tema */
.ciambella { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; }
.grafico-ciambella { width: 9.5rem; height: 9.5rem; flex: none; }
.grafico-ciambella .fondo { stroke: var(--surface-2); }
.grafico-ciambella .ciambella-tot { font-size: .55rem; font-weight: 700; fill: var(--ink); }
.grafico-ciambella .ciambella-sotto { font-size: .22rem; fill: var(--muted); }
.legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .88rem; }
.legenda li { display: flex; align-items: center; gap: .4rem; }
.pallino { width: .75rem; height: .75rem; border-radius: 50%; flex: none; background: var(--accent); }
.fetta.f1 { stroke: var(--accent); } .pallino.f1 { background: var(--accent); }
.fetta.f2 { stroke: var(--ok); } .pallino.f2 { background: var(--ok); }
.fetta.f3 { stroke: var(--warn); } .pallino.f3 { background: var(--warn); }
.fetta.f4 { stroke: var(--err); } .pallino.f4 { background: var(--err); }
.fetta.f5 { stroke: #7b5ea7; } .pallino.f5 { background: #7b5ea7; }
.fetta.f6 { stroke: var(--line-strong); } .pallino.f6 { background: var(--line-strong); }
.griglia.tre { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grafico-titolo { margin: 0 0 .3rem; font-size: .95rem; }
/* Guida (4.8, Ale: "fai un format adeguato moderno e capibile"; "che si ridimensionino automaticamente [...] cliccabili per l'ingrandimento") */
.guida-testa { padding: 1.4rem 1.5rem; border-radius: var(--r); color: var(--ink);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface) 70%); border: 1px solid var(--line); }
.guida-testa h2 { margin: .1rem 0 .5rem; font-size: 1.6rem; }
.guida-testa > p { max-width: 50rem; margin: 0 0 .8rem; }
.guida-sopra { display: flex; align-items: center; gap: .35rem; margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.guida-sopra .icona { width: 1em; height: 1em; }
.guida-cerca { display: flex; gap: .5rem; max-width: 42rem; margin: .4rem 0 .7rem; }
.guida-cerca input { flex: 1; min-width: 0; font-size: 1rem; padding: .6rem .8rem; }
.guida-scorciatoie { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: 0; font-size: .92rem; }
.guida-scorciatoie a { display: inline-flex; gap: .35rem; align-items: center; }
.guida-scorciatoie .icona { width: 1.05em; height: 1.05em; }
.guida-blocco { margin-top: 1.6rem; }
.guida-gruppo { font-size: 1.15rem; margin: 0 0 .7rem; }
.guida-inizio { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.guida-inizio a { display: flex; gap: .7rem; align-items: flex-start; height: 100%; padding: .8rem .9rem; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: var(--ombra); }
.guida-inizio a:hover, .guida-inizio a:focus-visible { border-color: var(--accent); }
.guida-inizio small { display: block; color: var(--muted); font-size: .84rem; margin-top: .15rem; line-height: 1.35; }
.guida-passo { flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--accent); color: var(--accent-ink); }
.guida-capitoli { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.guida-capitolo { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--ombra); }
.guida-capitolo:hover, .guida-capitolo:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.guida-cap-testa { display: flex; align-items: center; gap: .5rem; margin: 0; }
.guida-numero { font-family: var(--f-mono); font-weight: 700; font-size: .85rem; color: var(--muted); }
.guida-icona { width: 2.1rem; height: 2.1rem; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.guida-icona .icona { width: 1.15rem; height: 1.15rem; }
.guida-cap-testa .chip { margin-left: auto; white-space: normal; }
.guida-capitolo h3 { margin: .2rem 0 0; font-size: 1.1rem; }
.guida-capitolo h3 a { color: var(--ink); text-decoration: none; }
.guida-capitolo h3 a:hover { color: var(--accent); text-decoration: underline; }
.guida-spiega { margin: 0; color: var(--muted); font-size: .9rem; }
.guida-sezioni { margin: .2rem 0 .3rem; padding-left: 1.1rem; font-size: .88rem; display: grid; gap: .15rem; }
.guida-capitolo .piu { margin-top: auto; font-weight: 600; }
.guida-risultati { margin: 0; padding-left: 1.3rem; display: grid; gap: .6rem; }
.guida-risultati p { margin: .15rem 0 0; color: var(--muted); }
.guida-risultati mark { background: var(--mark); color: var(--mark-ink); padding: 0 .1em; border-radius: 3px; }
.guida-naviga { display: grid; grid-template-columns: 1fr auto 1fr; gap: .6rem; align-items: center; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.guida-naviga > :last-child { justify-self: end; }
.guida-naviga .btn { white-space: normal; text-align: left; line-height: 1.25; }
/* 6.3, verifiche del 28/10/2026 (axe a 375 px): sul telefono la parola «Cerca» del pulsante si nasconde solo alla vista; con display: none il
   pulsante restava senza nome per il lettore di schermo (WCAG 4.1.2), in Novità, Guida e Manuali */
@media (max-width: 40em) { .guida-naviga { grid-template-columns: 1fr; } .guida-naviga > :last-child { justify-self: start; } .guida-cerca .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.guida-figura { margin: 1rem 0 1.4rem; }
.guida-figura a { display: inline-block; max-width: 100%; border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; background: var(--surface-2); cursor: zoom-in; line-height: 0; }
.guida-figura a:hover, .guida-figura a:focus-visible { border-color: var(--accent); }
.guida-figura img { display: block; max-width: 100%; height: auto; }
.guida-figura figcaption { font-size: .86rem; color: var(--muted); margin-top: .45rem; line-height: 1.4; }
dialog.zoom { padding: 0; border: 0; background: transparent; max-width: 96vw; max-height: 96vh; overflow: visible; }
dialog.zoom::backdrop { background: rgb(10 14 20 / .82); }
dialog.zoom img { display: block; max-width: 96vw; max-height: 86vh; width: auto; height: auto; border-radius: var(--r-s); box-shadow: 0 10px 40px rgb(0 0 0 / .45); background: #fff; }
dialog.zoom p { margin: .5rem auto 0; max-width: 60rem; text-align: center; color: #fff; font-size: .92rem; }
dialog.zoom .zoom-chiudi { position: absolute; top: -.6rem; right: -.6rem; }
@media (max-width: 40em) { dialog.zoom .zoom-chiudi { top: .3rem; right: .3rem; } }
/* Utility -> Documentazione: i materiali da scaricare */
.materiali { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); }
.materiale { display: flex; gap: .8rem; align-items: flex-start; padding: .9rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.materiale b { display: block; }
.materiale p { margin: .2rem 0 .5rem; }
.materiale-tipo { flex: none; width: 3rem; height: 3.6rem; border-radius: 6px; display: grid; place-items: center; font-weight: 800; font-size: .8rem; color: #fff; background: #b3261e; }
.materiale-tipo.pptx { background: #c4501f; }
/* 4.9 (Ale: "nel chatbot il pulsante nuova fallo di colore come la barra della chat") */
.chat-box-piede a[data-box-nuova] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chat-box-piede a[data-box-nuova]:hover, .chat-box-piede a[data-box-nuova]:focus-visible { background: color-mix(in srgb, var(--accent) 82%, #000); border-color: color-mix(in srgb, var(--accent) 82%, #000); color: var(--accent-ink); }
/* 4.9: il menu dei capitoli anche in cima (Ale: "metti lo stesso menù in fondo la pagina anche all'inizio") */
.guida-naviga-cima { margin: 0 0 1.4rem; padding: 0 0 .9rem; border-top: 0; border-bottom: 1px solid var(--line); }
/* 4.9: i ticket della pratica e la domanda con un ticket dalla lavorazione */
.lav-ticket-elenco { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .35rem; }
.lav-ticket-elenco li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; min-width: 0; }
.lav-ticket-elenco a { overflow-wrap: anywhere; }
.lav-ticket-form { display: grid; gap: .7rem; margin-top: .5rem; }
.lav-ticket-form .campi { margin: 0; }
/* ------------------------------------------------------------------ 5.0 */
/* la home a sezioni, le disposizioni e l'ora dell'ultimo aggiornamento dei riquadri */
.home-strumenti { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin: .6rem 0 0; }
.home-strumenti .home-preset { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.home-strumenti .home-preset label { font-weight: 600; font-size: .9rem; }
.home-strumenti select { max-width: 100%; }
@media (min-width: 40em) { .home-strumenti .home-preset select { width: auto; min-width: 16rem; } }
/* 6.0 (Ale 26/10/2026: la casella della disposizione era più alta dei due pulsanti accanto): alta come .btn.piccolo */
.home-strumenti .home-preset select { min-height: 2rem; height: 2rem; padding: .15rem .5rem; font-size: .85rem; }
.home-strumenti .home-salva > summary.btn { min-height: 2rem; }
@media (pointer: coarse) { .home-strumenti .home-preset select { min-height: 2.75rem; height: 2.75rem; } }
.home-salva > summary { list-style: none; }
.home-salva > summary::-webkit-details-marker { display: none; }
.home-salva[open] { flex-basis: 100%; }
.home-salva form { margin-top: .5rem; max-width: 30rem; }
.home-dove { margin: 0; }
.home-sezione { margin-top: 1.5rem; border-radius: var(--r); }
.home-sezione-testa { display: flex; align-items: center; gap: .5rem; padding-bottom: .35rem; border-bottom: 1px solid var(--line); }
.home-sezione-testa h2 { flex: 1; min-width: 0; font-size: 1.05rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; color: var(--ink); }
.home-sezione-testa h2 .icona { color: var(--accent); }
.home-sezione .griglia { margin-top: .8rem; }
.home-sezione.bersaglio { outline: 2px dashed var(--accent); outline-offset: 4px; }
.widget .testa-widget h3 { flex: 1; min-width: 0; font-size: 1.02rem; font-weight: 650; margin-bottom: .8rem; display: flex; align-items: center; gap: .5rem; }
.widget .testa-widget h3 .icona { color: var(--accent); }
.widget-ora { white-space: nowrap; font-size: .74rem; padding-top: .15rem; }
.widget-corpo { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.home-profilo { align-items: start; }
.home-profilo .scheda-interna { border: 1px solid var(--line); border-radius: var(--r); padding: .8rem 1rem; }
.home-mie li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.home-mie form.cerca { max-width: 22rem; }
/* il menu: i collegamenti esterni (Setup -> Layout) */
.laterale .sezioni a.menu-esterno > .icona:last-child { width: .8em; height: .8em; margin-left: auto; opacity: .65; flex: none; }
@media (min-width: 64em) { [data-laterale="icone"] .laterale .sezioni a.menu-esterno > .icona:last-child { display: none; } }
/* Setup -> Layout */
.layout-lista { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .45rem; }
.layout-dentro { margin: .5rem 0 .2rem 1.6rem; padding-left: .8rem; border-left: 2px solid var(--line); }
.layout-voce { border: 1px solid var(--line); border-radius: var(--r-s); padding: .45rem .6rem; background: var(--surface); }
.layout-g { border-color: var(--line-strong); }
.layout-riga { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; }
.layout-testa { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; min-width: 0; }
.layout-testa .icona { color: var(--accent); }
.layout-testa .chip { white-space: normal; }              /* «la vede: …» va a capo: sul telefono non allarga la pagina */
.layout-riga > *, .layout-voce { min-width: 0; overflow-wrap: anywhere; }
.layout-comandi { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.layout-in { display: flex; align-items: center; gap: .3rem; }
.layout-in > span { white-space: nowrap; }
.layout-in select { max-width: 13rem; }
.layout-modifica { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .8rem; margin-top: .5rem; }
.layout-campo { display: grid; gap: .15rem; min-width: 0; }
.layout-campo input { min-width: 12rem; }
.layout-ruoli { flex-basis: 100%; }
.layout-statico { margin: .5rem 0; }
/* 6.0: ticket - consigli, IA, modifiche insieme, analisi */
.tk-consigli h2 { display: flex; align-items: center; gap: .45rem; }
.tk-consigli-elenco { margin: .3rem 0 .6rem; padding-left: 1.2rem; display: grid; gap: .3rem; }
.tk-consigli-elenco li.err::marker { color: var(--err); }
.tk-consigli-elenco li.att::marker { color: var(--warn); }
.tk-previsione { display: flex; gap: .5rem; align-items: flex-start; margin: .4rem 0 .7rem; padding: .5rem .7rem; border-radius: var(--r-s); background: var(--surface-2); }
.tk-ia-modulo { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: .4rem 0 0; }
.tk-ia-esito { border-left: 3px solid var(--accent); }
.tk-ia-esito h2, .tk-ia-esito h3 { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.tk-ia { margin: 1rem 0 .4rem; display: grid; gap: .6rem; }
.tk-ia-bozza { padding: .6rem .8rem; border-radius: var(--r-s); background: var(--surface-2); white-space: normal; }
.tk-massiva { margin: 0 0 1rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-2); }
.tk-massiva h3 { margin: 0 0 .3rem; font-size: 1rem; display: flex; align-items: center; gap: .45rem; }
.tk-massiva-campi .cerca { display: flex; gap: .3rem; align-items: center; }
.tk-massiva-campi .cerca select { min-width: 0; flex: 1 1 auto; }
.tk-cestino { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.tk-cestino p { margin: 0; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.schede-vista .tk-analisi-link { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; border-style: dashed; }
.griglia-grafici { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem 1.6rem; margin: .8rem 0; }
/* 6.0: dati delle righe che filtrano, Id Call da copiare, promemoria nella colonna delle icone */
a.filtra { color: inherit; text-decoration: none; border-radius: 4px; }
a.filtra:hover > .etichetta, a.filtra:hover > .chip, a.filtra:focus-visible > .etichetta, a.filtra:focus-visible > .chip { outline: 2px solid var(--accent); outline-offset: 1px; }
a.filtra:hover, a.filtra:focus-visible { text-decoration: underline; text-decoration-style: dotted; }
.copia-id { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .2rem; border-radius: 4px; padding: 0 .15rem; }
.copia-id .icona { width: .85em; height: .85em; opacity: .6; }
.copia-id:hover, .copia-id:focus-visible { color: var(--ink); outline: 1px dashed var(--accent); }
.copia-id.copiato { color: var(--ok, inherit); outline: 1px solid currentColor; }
.copia-id.copiato::after { content: " copiato"; font-family: inherit; }
.prm-icona.scaduto { color: var(--err, inherit); }
/* 6.0: titoli di colonna che ordinano le righe */
.ordina-col { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; border-radius: 4px; text-transform: inherit; letter-spacing: inherit; }
.ordina-col:hover { color: var(--ink); }
.ordina-col:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a.ordina-col { color: inherit; text-decoration: none; }
.ordina-segno::after { content: "↕"; opacity: .45; font-size: .85em; }
[aria-sort="ascending"] .ordina-segno::after, .ordina-col.su .ordina-segno::after { content: "▲"; opacity: 1; }
[aria-sort="descending"] .ordina-segno::after, .ordina-col.giu .ordina-segno::after { content: "▼"; opacity: 1; }
.layout-spenta { opacity: .62; border-style: dashed; }      /* 6.0: voce spenta in Layout */
.layout-spenta:focus-within { opacity: 1; }
.layout-acceso { white-space: nowrap; margin-right: .3rem; }
.layout-ritrai { margin-right: .1rem; }
.layout-voce > [hidden], .tk-massiva [hidden], .diario-box [hidden] { display: none !important; }     /* 6.0: hidden vince su display: flex/grid */
/* Download: elimina i file scelti o tutti */
.download-elimina { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: .4rem 0 .8rem; }
.download-elimina form { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
/* Setup -> Licenze: le funzioni accessorie */
.funzioni-elenco { list-style: none; margin: .6rem 0; padding: 0; display: grid; gap: .55rem; }
.funzioni-elenco li { display: grid; gap: .1rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: var(--r-s); }
/* 5.0: Setup -> Conservazione dei dati */
.cons-voce + .cons-voce { border-top: 1px solid var(--line); margin-top: .9rem; padding-top: .9rem; }
.cons-voce h3 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .4rem; }
.cons-cancella { display: grid; gap: .5rem; justify-items: start; margin-top: .5rem; }
.cons-periodi { margin: .2rem 0 .8rem; }
/* 5.0: l'app sul telefono (profilo, sezione #app) */
.app-telefono [hidden] { display: none !important; }      /* i pulsanti .btn nascosti finche' app.js non sa cosa mostrare */
/* Ale 29/10/2026 dal simulatore: sul telefono «Accendi le notifiche su questo dispositivo» usciva dal riquadro (i .btn non vanno a capo).
 * Un pulsante di una fila .bottoni piu' lungo della riga va a capo dentro di se' invece di uscire (a 320 px, anche con il testo Molto
 * grande); quelli che ci stanno restano su una riga, perche' la fila manda a capo prima i pulsanti interi */
.bottoni > .btn, .bottoni > form > .btn, .app-telefono .btn { white-space: normal; max-width: 100%; text-align: left; }
.app-scelte { margin: .9rem 0 .4rem; }
.app-scelte fieldset { display: grid; gap: .35rem; }
.app-telefono h3 { margin: 1rem 0 .4rem; font-size: 1rem; }
.app-dispositivi li { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cons-periodo { display: grid; grid-template-columns: minmax(13rem, 19rem) 1fr; gap: .3rem 1.2rem; align-items: end; padding: .7rem 0; border-top: 1px solid var(--line); }
.cons-periodo:first-child { border-top: 0; padding-top: 0; }
.cons-periodo > p { margin: 0; }
@media (max-width: 40em) { .cons-periodo { grid-template-columns: 1fr; } }
.funzioni-elenco .etichetta { justify-self: start; }
/* passaggio di carica, newsletter dei colleghi, capitolo in evidenza */
.passaggio-carica ul { margin: .4rem 0 .9rem; }
.nl-aiuto { display: flex; gap: .6rem; align-items: flex-start; }
.nl-aiuto p { margin: 0; }
.guida-capitolo.in-evidenza { border-color: var(--accent); }
@media (max-width: 40em) { .layout-campo input { min-width: 0; width: 100%; } .layout-campo { flex-basis: 100%; } .layout-dentro { margin-left: .5rem; } }
/* 5.1: comunicazioni da confermare all'accesso (testo lungo in una scheda piu' larga) */
.accesso.accesso-largo { width: min(100%, 46rem); }
.accesso .com-testo { max-height: min(55vh, 34rem); overflow-y: auto; padding: .2rem 1rem .6rem .2rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.accesso .com-testo p { margin: .55rem 0; }
.accesso .com-testo h2 { font-size: 1.05rem; }
.com-vedi .testo-lungo { min-width: 0; }
/* 5.1: «Sei uscito» e la chiusura dell'app sul telefono */
.app-uscito { display: grid; gap: .5rem; }
.app-uscito [hidden] { display: none !important; }
.chiudi-app p { margin: 0; }
/* 5.1: connettori e notizie RSS */
.rss-voci { list-style: disc; margin: 0; padding-left: 1.2rem; }      /* Ale 25/10/2026: "nel widget degli rss metti i punti elenco" */
.rss-voci li { line-height: 1.35; overflow-wrap: anywhere; }
.rss-voci li + li { margin-top: .45rem; }
.rss-voci li::marker { color: var(--accent); }
.rss-voci .rss-meta { display: block; margin-top: .1rem; }
.rss-fonte { margin-top: .6rem; }
.rompi { overflow-wrap: anywhere; }
.testo-err { color: var(--err); }
/* 5.1: la finestra piccola della Guida con una sola parte, e il collegamento al capitolo */
.guida-minima-piede { margin-top: 1.5rem; padding-top: .8rem; border-top: 1px solid var(--line); }
/* 5.1: il lettore dentro la pagina (app sul telefono e schermi stretti): Guida, Conoscenza e Istruzioni senza lasciare la pagina */
dialog.lettore { padding: 0; border: 0; border-radius: var(--r-m, 12px); background: var(--bg); color: var(--ink); width: min(100vw - 1rem, 46rem); max-height: calc(100dvh - 1rem); box-shadow: 0 10px 40px rgb(0 0 0 / .35); }
dialog.lettore::backdrop { background: rgb(10 14 20 / .6); }
.lettore-testa { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .6rem .8rem; background: var(--surface, var(--bg)); border-bottom: 1px solid var(--line); }
.lettore-testa h2 { margin: 0; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lettore-corpo { padding: .8rem 1rem 1.2rem; overflow-wrap: break-word; }
.lettore-corpo .scheda { box-shadow: none; border: 0; padding: 0; margin: 0 0 1rem; }
.lettore-piede { padding: 0 1rem 1rem; }
@media (max-width: 40em) { dialog.lettore { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; } }
/* 5.1: i suggerimenti del ticket nuovo, da leggere qui */
.tk-sugg-leggi { margin-top: .3rem; }
.tk-sugg-leggi summary { cursor: pointer; color: var(--accent); font-size: .9rem; }
.tk-sugg-testo { margin-top: .4rem; padding: .5rem .7rem; border-left: 3px solid var(--accent-soft); font-size: .92rem; }
.tk-sugg-testo p { margin: .35rem 0; }
/* 5.1: i pulsanti .btn e gli elenchi .scelte nascosti con hidden (.btn e .scelte impostano display) */
[data-indietro][hidden], form[data-invio-subito] [hidden], [data-com-per][hidden], [data-chiudi-app][hidden], .lettore-piede[hidden] { display: none !important; }
/* 5.1: la casella «Attiva» nell'elenco delle risposte pronte, grande almeno 24 px al tocco (WCAG 2.5.8) */
form[data-invio-subito] input[type="checkbox"], #pronte input[type="checkbox"] { width: 1.5rem; height: 1.5rem; }
#pronte .scheda-interna > .spunta { margin: .5rem 0; }
/* 5.1: Connettori, la consultazione (moduli/fonti.php): pagina di un connettore e scheda di un atto dell'Albo pretorio */
.fonte-notizie p { margin: .2rem 0 0; }
.atto-campi th { width: 14rem; text-align: left; vertical-align: top; font-weight: 600; }
.atto-allegati li { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.atto-allegati .bottoni { margin: 0; }
@media (max-width: 40em) { .atto-campi th { width: auto; } }
.filtri-fonte > .spunta { margin: .6rem 0 .2rem; }
.filtri-fonte input[type="checkbox"] { width: 1.5rem; height: 1.5rem; }      /* WCAG 2.5.8: almeno 24 px al tocco */

/* ------------------------------------------------------------------ 5.3: agenda e riunioni */
.ag-schede ul { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; margin: 0 0 1rem; padding: 0; border-bottom: 1px solid var(--line); }
.ag-schede a { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .8rem; border-radius: var(--r-s) var(--r-s) 0 0; color: var(--ink); text-decoration: none; border: 1px solid transparent; border-bottom: 0; }
.ag-schede a:hover { background: var(--surface-2); }
.ag-schede a.attiva { background: var(--surface); border-color: var(--line); border-top: 3px solid var(--accent); color: var(--ink); font-weight: 600; margin-bottom: -1px; }
.filtri-rapidi { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.ag-pagina { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.ag-lato .ag-gruppo { border: 0; padding: 0; margin: 0 0 .8rem; }
.ag-lato .ag-gruppo legend { font-weight: 600; font-size: .9rem; margin-bottom: .25rem; }
.ag-lato .scelte { display: flex; flex-direction: column; gap: .15rem; }
.ag-lato .ag-lunga { max-height: 12rem; overflow-y: auto; }
.ag-pallino { display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; margin-right: .35rem; background: var(--ag-col); vertical-align: middle; flex: none; }
.ag-barra { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: .8rem; }
.ag-periodo { margin: 0; font-size: 1.15rem; flex: 1 1 auto; }
.ag-scegli { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.ag-scegli input[type="search"] { width: 11rem; }
/* i colori delle agende: la tinta sul fondo della scheda, cosi' il testo resta leggibile nel tema chiaro e nello scuro */
.ag-c0 { --ag-col: #2f7ed8; } .ag-c1 { --ag-col: #d9822b; } .ag-c2 { --ag-col: #2e9e6b; } .ag-c3 { --ag-col: #a35bd6; }
.ag-c4 { --ag-col: #d64f7a; } .ag-c5 { --ag-col: #1f9fb3; } .ag-c6 { --ag-col: #8a8f2a; } .ag-c7 { --ag-col: #7a7a7a; }
.ag-ev { display: block; position: relative; overflow: hidden; min-width: 0; padding: .15rem .35rem; margin: 1px; border-radius: var(--r-s); border-left: 4px solid var(--ag-col, var(--accent));
         background: color-mix(in srgb, var(--ag-col, var(--accent)) 16%, var(--surface)); color: var(--ink); text-decoration: none; font-size: .8rem; line-height: 1.25; }
a.ag-ev:hover, a.ag-ev:focus-visible { background: color-mix(in srgb, var(--ag-col, var(--accent)) 28%, var(--surface)); }
.ag-ev-ora { font-weight: 700; }
.ag-ev-segni { display: inline-flex; gap: .15rem; margin-left: .2rem; vertical-align: middle; }
.ag-ev-segni .icona { width: .85rem; height: .85rem; }
.ag-ev.ag-occupato { background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, var(--surface) 6px 12px); border-left-color: var(--line-strong); color: var(--muted); }
.ag-ev.ag-da-rispondere { border: 1px dashed var(--ag-col, var(--accent)); border-left-width: 4px; border-left-style: solid; }
.ag-ev.ag-forse { opacity: .85; }
.ag-ev.ag-cat-assenza { border-left-style: dotted; }
.ag-esempio { display: inline-block; vertical-align: middle; }
.ag-griglia-scorri { border: 1px solid var(--line); border-radius: var(--r-s); }
.ag-settimana { min-width: 100%; }
.ag-testa, .ag-corpo { display: grid; grid-template-columns: 3.5rem repeat(7, minmax(7.5rem, 1fr)); }
.ag-giorni-5 .ag-testa, .ag-giorni-5 .ag-corpo { grid-template-columns: 3.5rem repeat(5, minmax(8rem, 1fr)); }
.ag-giorni-1 .ag-testa, .ag-giorni-1 .ag-corpo { grid-template-columns: 3.5rem minmax(12rem, 1fr); }
.ag-testa { border-bottom: 1px solid var(--line-strong); background: var(--surface); }
.ag-testa-giorno { position: relative; padding: .35rem .35rem .3rem; border-left: 1px solid var(--line); min-height: 3.2rem; }
.ag-testa-giorno > a:first-child { color: var(--ink); text-decoration: none; }
.ag-testa-giorno.ag-oggi { background: var(--accent-soft); }
.ag-testa-giorno.ag-oggi b { color: var(--ink); text-decoration: underline 2px; text-underline-offset: 3px; }
.ag-festivo .ag-gsett, .ag-festivo .ag-num { color: var(--err); }
.ag-festa { display: block; font-size: .72rem; color: var(--err); }
.ag-gsett { text-transform: uppercase; font-size: .75rem; color: var(--muted); }
.ag-nuovo { position: absolute; top: .3rem; right: .3rem; color: var(--muted); }
.ag-nuovo:hover, .ag-nuovo:focus-visible { color: var(--accent); }
.ag-tutto { margin-top: .2rem; }
.ag-corpo { max-height: 34rem; overflow-y: auto; }
.ag-colonna, .ag-colonna-ore { display: grid; grid-template-rows: repeat(96, .8rem); grid-template-columns: repeat(12, minmax(0, 1fr)); border-left: 1px solid var(--line);
         background-image: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 3.2rem); }
.ag-colonna-ore { border-left: 0; background-image: none; grid-template-columns: 1fr; }
.ag-colonna.ag-oggi { background-color: color-mix(in srgb, var(--accent) 5%, transparent); }
.ag-ora { font-size: .72rem; color: var(--muted); text-align: right; padding-right: .35rem; grid-column: 1; line-height: 1; }
.ag-colonna .ag-ev { grid-column: 1 / -1; z-index: 1; }
.ag-adesso { grid-column: 1 / -1; align-self: start; height: 0; border-top: 2px solid var(--err); z-index: 3; pointer-events: none; }
.ag-mese { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 42rem; }
.ag-mese th { font-size: .8rem; color: var(--muted); padding: .3rem; text-align: left; }
.ag-mese td { vertical-align: top; height: 6.5rem; border: 1px solid var(--line); padding: .2rem; }
.ag-mese td.ag-fuori { background: var(--surface-2); }
.ag-mese td.ag-fuori .ag-num { color: var(--muted); }
.ag-mese td.ag-oggi { background: var(--accent-soft); }
.ag-num { display: inline-block; font-weight: 600; text-decoration: none; color: var(--ink); padding: 0 .2rem; }
.ag-altri { display: block; font-size: .75rem; margin-top: .1rem; }
.ag-elenco-giorno { font-size: 1rem; margin: 1rem 0 .4rem; border-bottom: 1px solid var(--line); padding-bottom: .2rem; }
.ag-elenco { list-style: none; margin: 0; padding: 0; }
.ag-elenco li { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .1rem .6rem; align-items: start; padding: .25rem 0; }
.ag-elenco li > .muto { grid-column: 2; }
.ag-elenco-ora { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .85rem; padding-top: .15rem; }
.ag-legenda { margin-top: .8rem; display: flex; flex-wrap: wrap; gap: .2rem .4rem; align-items: center; }
.ag-legenda .icona { width: .9rem; height: .9rem; vertical-align: -2px; }
.ag-scheda .ag-quando { font-size: 1.1rem; }
.ag-etichette { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.ag-entra .btn.grande { font-size: 1.05rem; padding: .7rem 1.2rem; }
.ag-modulo fieldset { border: 1px solid var(--line); border-radius: var(--r-s); padding: .7rem .9rem; }
.ag-modulo legend { font-weight: 600; padding: 0 .3rem; }
.ag-modulo .ag-persona { display: inline-flex; align-items: center; gap: .3rem; margin-right: .8rem; }
.ag-annulla { display: grid; gap: .5rem; margin-top: .5rem; }
.ag-odg { margin: 0; padding-left: 1.4rem; }
.ag-odg li { padding: .15rem 0; }
.ag-odg-modifica { padding-left: 1.4rem; }
.ag-odg-modifica > li { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.ag-odg li.ag-punto-in-corso { font-weight: 700; color: var(--accent-ink); background: var(--accent-soft); border-radius: var(--r-s); padding: .15rem .3rem; }
.ag-stanza { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1rem; align-items: start; }
.ag-stanza .chat { display: block; }
.ag-stanza-lato h3 { font-size: .95rem; margin: 1rem 0 .3rem; }
.ag-stanza-striscia { margin: 0 0 .4rem; padding: .35rem .6rem; background: var(--accent-soft); border-radius: var(--r-s); font-size: .85rem; }
.ag-voto { margin: .6rem 0; }
.ag-voto-esito { margin: .3rem 0; }
.ag-verbale-con-chat { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1rem; align-items: start; }
.ag-verbale-punto { margin-top: 1rem; }
.ag-verbale-punto h3 { font-size: 1rem; margin: 0 0 .4rem; }
.ag-verbale-chat { max-height: 70vh; overflow-y: auto; }
.ag-chat-citazioni { list-style: none; padding: 0; margin: 0; }
.ag-chat-citazioni li { padding: .4rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.ag-widget li, .ag-inviti li { flex-wrap: wrap; }
.ag-inviti form { flex-basis: 100%; }
.ag-mini-titolo { margin: 0 0 .3rem; }
.ag-mini { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: center; font-size: .85rem; }
.ag-mini th { color: var(--muted); font-weight: 600; }
.ag-mini a { display: block; padding: .2rem 0; border-radius: var(--r-s); color: var(--ink); text-decoration: none; }
.ag-mini .ag-fuori a { color: var(--muted); }
.ag-mini .ag-impegnato a { font-weight: 700; background: var(--accent-soft); color: var(--accent-ink); }
.ag-mini .ag-oggi a { outline: 2px solid var(--accent); }
.ag-pianifica { border-collapse: collapse; font-size: .8rem; }
.ag-pianifica th { padding: .2rem .4rem; text-align: left; white-space: nowrap; font-weight: 600; }
.ag-pianifica thead th { color: var(--muted); font-weight: 400; }
.ag-cella { width: 1.1rem; min-width: 1.1rem; height: 1.6rem; border: 1px solid var(--line); background: var(--ok-soft); }
span.ag-cella { display: inline-block; height: .9rem; vertical-align: middle; }
.ag-cella.ag-occupato { background: var(--err-soft); background-image: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--err) 35%, transparent) 4px 6px); }
.ag-cella.ag-assente { background: var(--warn-soft); }
@media (max-width: 900px) {
  .ag-pagina, .ag-stanza, .ag-verbale-con-chat { grid-template-columns: minmax(0, 1fr); }
  .ag-lato { order: 2; }
  .ag-elenco li { grid-template-columns: minmax(0, 1fr); }
  .ag-elenco li > .muto { grid-column: 1; }
}
@media print {
  .ag-lato, .ag-schede, .ag-scegli, .ag-legenda, .ag-nuovo { display: none !important; }
  .ag-pagina { grid-template-columns: 1fr; }
  .ag-corpo { max-height: none; overflow: visible; }
}
/* le posizioni nel calendario: riga d'inizio (quarto d'ora), quante righe, corsia fra quelle del gruppo (niente stili nella pagina: CSP) */
.ag-r1 { grid-row-start: 1; }
.ag-r2 { grid-row-start: 2; }
.ag-r3 { grid-row-start: 3; }
.ag-r4 { grid-row-start: 4; }
.ag-r5 { grid-row-start: 5; }
.ag-r6 { grid-row-start: 6; }
.ag-r7 { grid-row-start: 7; }
.ag-r8 { grid-row-start: 8; }
.ag-r9 { grid-row-start: 9; }
.ag-r10 { grid-row-start: 10; }
.ag-r11 { grid-row-start: 11; }
.ag-r12 { grid-row-start: 12; }
.ag-r13 { grid-row-start: 13; }
.ag-r14 { grid-row-start: 14; }
.ag-r15 { grid-row-start: 15; }
.ag-r16 { grid-row-start: 16; }
.ag-r17 { grid-row-start: 17; }
.ag-r18 { grid-row-start: 18; }
.ag-r19 { grid-row-start: 19; }
.ag-r20 { grid-row-start: 20; }
.ag-r21 { grid-row-start: 21; }
.ag-r22 { grid-row-start: 22; }
.ag-r23 { grid-row-start: 23; }
.ag-r24 { grid-row-start: 24; }
.ag-r25 { grid-row-start: 25; }
.ag-r26 { grid-row-start: 26; }
.ag-r27 { grid-row-start: 27; }
.ag-r28 { grid-row-start: 28; }
.ag-r29 { grid-row-start: 29; }
.ag-r30 { grid-row-start: 30; }
.ag-r31 { grid-row-start: 31; }
.ag-r32 { grid-row-start: 32; }
.ag-r33 { grid-row-start: 33; }
.ag-r34 { grid-row-start: 34; }
.ag-r35 { grid-row-start: 35; }
.ag-r36 { grid-row-start: 36; }
.ag-r37 { grid-row-start: 37; }
.ag-r38 { grid-row-start: 38; }
.ag-r39 { grid-row-start: 39; }
.ag-r40 { grid-row-start: 40; }
.ag-r41 { grid-row-start: 41; }
.ag-r42 { grid-row-start: 42; }
.ag-r43 { grid-row-start: 43; }
.ag-r44 { grid-row-start: 44; }
.ag-r45 { grid-row-start: 45; }
.ag-r46 { grid-row-start: 46; }
.ag-r47 { grid-row-start: 47; }
.ag-r48 { grid-row-start: 48; }
.ag-r49 { grid-row-start: 49; }
.ag-r50 { grid-row-start: 50; }
.ag-r51 { grid-row-start: 51; }
.ag-r52 { grid-row-start: 52; }
.ag-r53 { grid-row-start: 53; }
.ag-r54 { grid-row-start: 54; }
.ag-r55 { grid-row-start: 55; }
.ag-r56 { grid-row-start: 56; }
.ag-r57 { grid-row-start: 57; }
.ag-r58 { grid-row-start: 58; }
.ag-r59 { grid-row-start: 59; }
.ag-r60 { grid-row-start: 60; }
.ag-r61 { grid-row-start: 61; }
.ag-r62 { grid-row-start: 62; }
.ag-r63 { grid-row-start: 63; }
.ag-r64 { grid-row-start: 64; }
.ag-r65 { grid-row-start: 65; }
.ag-r66 { grid-row-start: 66; }
.ag-r67 { grid-row-start: 67; }
.ag-r68 { grid-row-start: 68; }
.ag-r69 { grid-row-start: 69; }
.ag-r70 { grid-row-start: 70; }
.ag-r71 { grid-row-start: 71; }
.ag-r72 { grid-row-start: 72; }
.ag-r73 { grid-row-start: 73; }
.ag-r74 { grid-row-start: 74; }
.ag-r75 { grid-row-start: 75; }
.ag-r76 { grid-row-start: 76; }
.ag-r77 { grid-row-start: 77; }
.ag-r78 { grid-row-start: 78; }
.ag-r79 { grid-row-start: 79; }
.ag-r80 { grid-row-start: 80; }
.ag-r81 { grid-row-start: 81; }
.ag-r82 { grid-row-start: 82; }
.ag-r83 { grid-row-start: 83; }
.ag-r84 { grid-row-start: 84; }
.ag-r85 { grid-row-start: 85; }
.ag-r86 { grid-row-start: 86; }
.ag-r87 { grid-row-start: 87; }
.ag-r88 { grid-row-start: 88; }
.ag-r89 { grid-row-start: 89; }
.ag-r90 { grid-row-start: 90; }
.ag-r91 { grid-row-start: 91; }
.ag-r92 { grid-row-start: 92; }
.ag-r93 { grid-row-start: 93; }
.ag-r94 { grid-row-start: 94; }
.ag-r95 { grid-row-start: 95; }
.ag-r96 { grid-row-start: 96; }
.ag-h1 { grid-row-end: span 1; }
.ag-h2 { grid-row-end: span 2; }
.ag-h3 { grid-row-end: span 3; }
.ag-h4 { grid-row-end: span 4; }
.ag-h5 { grid-row-end: span 5; }
.ag-h6 { grid-row-end: span 6; }
.ag-h7 { grid-row-end: span 7; }
.ag-h8 { grid-row-end: span 8; }
.ag-h9 { grid-row-end: span 9; }
.ag-h10 { grid-row-end: span 10; }
.ag-h11 { grid-row-end: span 11; }
.ag-h12 { grid-row-end: span 12; }
.ag-h13 { grid-row-end: span 13; }
.ag-h14 { grid-row-end: span 14; }
.ag-h15 { grid-row-end: span 15; }
.ag-h16 { grid-row-end: span 16; }
.ag-h17 { grid-row-end: span 17; }
.ag-h18 { grid-row-end: span 18; }
.ag-h19 { grid-row-end: span 19; }
.ag-h20 { grid-row-end: span 20; }
.ag-h21 { grid-row-end: span 21; }
.ag-h22 { grid-row-end: span 22; }
.ag-h23 { grid-row-end: span 23; }
.ag-h24 { grid-row-end: span 24; }
.ag-h25 { grid-row-end: span 25; }
.ag-h26 { grid-row-end: span 26; }
.ag-h27 { grid-row-end: span 27; }
.ag-h28 { grid-row-end: span 28; }
.ag-h29 { grid-row-end: span 29; }
.ag-h30 { grid-row-end: span 30; }
.ag-h31 { grid-row-end: span 31; }
.ag-h32 { grid-row-end: span 32; }
.ag-h33 { grid-row-end: span 33; }
.ag-h34 { grid-row-end: span 34; }
.ag-h35 { grid-row-end: span 35; }
.ag-h36 { grid-row-end: span 36; }
.ag-h37 { grid-row-end: span 37; }
.ag-h38 { grid-row-end: span 38; }
.ag-h39 { grid-row-end: span 39; }
.ag-h40 { grid-row-end: span 40; }
.ag-h41 { grid-row-end: span 41; }
.ag-h42 { grid-row-end: span 42; }
.ag-h43 { grid-row-end: span 43; }
.ag-h44 { grid-row-end: span 44; }
.ag-h45 { grid-row-end: span 45; }
.ag-h46 { grid-row-end: span 46; }
.ag-h47 { grid-row-end: span 47; }
.ag-h48 { grid-row-end: span 48; }
.ag-h49 { grid-row-end: span 49; }
.ag-h50 { grid-row-end: span 50; }
.ag-h51 { grid-row-end: span 51; }
.ag-h52 { grid-row-end: span 52; }
.ag-h53 { grid-row-end: span 53; }
.ag-h54 { grid-row-end: span 54; }
.ag-h55 { grid-row-end: span 55; }
.ag-h56 { grid-row-end: span 56; }
.ag-h57 { grid-row-end: span 57; }
.ag-h58 { grid-row-end: span 58; }
.ag-h59 { grid-row-end: span 59; }
.ag-h60 { grid-row-end: span 60; }
.ag-h61 { grid-row-end: span 61; }
.ag-h62 { grid-row-end: span 62; }
.ag-h63 { grid-row-end: span 63; }
.ag-h64 { grid-row-end: span 64; }
.ag-h65 { grid-row-end: span 65; }
.ag-h66 { grid-row-end: span 66; }
.ag-h67 { grid-row-end: span 67; }
.ag-h68 { grid-row-end: span 68; }
.ag-h69 { grid-row-end: span 69; }
.ag-h70 { grid-row-end: span 70; }
.ag-h71 { grid-row-end: span 71; }
.ag-h72 { grid-row-end: span 72; }
.ag-h73 { grid-row-end: span 73; }
.ag-h74 { grid-row-end: span 74; }
.ag-h75 { grid-row-end: span 75; }
.ag-h76 { grid-row-end: span 76; }
.ag-h77 { grid-row-end: span 77; }
.ag-h78 { grid-row-end: span 78; }
.ag-h79 { grid-row-end: span 79; }
.ag-h80 { grid-row-end: span 80; }
.ag-h81 { grid-row-end: span 81; }
.ag-h82 { grid-row-end: span 82; }
.ag-h83 { grid-row-end: span 83; }
.ag-h84 { grid-row-end: span 84; }
.ag-h85 { grid-row-end: span 85; }
.ag-h86 { grid-row-end: span 86; }
.ag-h87 { grid-row-end: span 87; }
.ag-h88 { grid-row-end: span 88; }
.ag-h89 { grid-row-end: span 89; }
.ag-h90 { grid-row-end: span 90; }
.ag-h91 { grid-row-end: span 91; }
.ag-h92 { grid-row-end: span 92; }
.ag-h93 { grid-row-end: span 93; }
.ag-h94 { grid-row-end: span 94; }
.ag-h95 { grid-row-end: span 95; }
.ag-h96 { grid-row-end: span 96; }
.ag-colonna .ag-l0-1 { grid-column: 1 / span 12; }
.ag-colonna .ag-l0-2 { grid-column: 1 / span 6; }
.ag-colonna .ag-l1-2 { grid-column: 7 / span 6; }
.ag-colonna .ag-l0-3 { grid-column: 1 / span 4; }
.ag-colonna .ag-l1-3 { grid-column: 5 / span 4; }
.ag-colonna .ag-l2-3 { grid-column: 9 / span 4; }
.ag-colonna .ag-l0-4 { grid-column: 1 / span 3; }
.ag-colonna .ag-l1-4 { grid-column: 4 / span 3; }
.ag-colonna .ag-l2-4 { grid-column: 7 / span 3; }
.ag-colonna .ag-l3-4 { grid-column: 10 / span 3; }
/* 5.3: connettori, filtri e modifica insieme */
.cn-filtri { margin-bottom: .4rem; }
.cn-massiva { background: var(--surface-2); }
.cn-massiva h3 { margin: 0 0 .4rem; font-size: 1rem; display: flex; align-items: center; gap: .45rem; }
/* 6.0 (Ale 26/10/2026: "nella pagina dei connettori controlla bene l'allineamento dei riquadri"): pulsanti della riga in colonna e larghi
 * uguali, l'indirizzo su al massimo tre righe (intero al passaggio del mouse), il riquadro della modifica insieme staccato dalla tabella */
.cn-massiva { margin: 0 0 1rem; }
.tabella-connettori td[data-etichetta="Nome"] { min-width: 11rem; }
.tabella-connettori td[data-etichetta="Ultima lettura"], .tabella-connettori td[data-etichetta="Stato"] { white-space: nowrap; }
.cn-url { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; max-width: 26rem; }
.cn-azioni { width: 1%; }
@media (min-width: 48em) {
  .cn-azioni { min-width: 9.5rem; }
  .cn-azioni > form.in-linea, .cn-azioni > a.btn { display: flex; width: 100%; margin: 0 0 .3rem; }
  .cn-azioni .btn { width: 100%; justify-content: flex-start; }
}
/* 5.4: orari di accesso */
.or-griglia td { white-space: nowrap; }
.or-fascia { display: inline-flex; align-items: center; gap: .3rem; }
.or-fascia input[type="time"] { width: 7.2rem; }
.orari-fascia { display: flex; align-items: center; gap: .4rem; }
/* 5.4: chiamate nuove */
.chiamate-aggiorna { margin: 0 0 .8rem; }
.chiamate-striscia { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.chiamate-aggiorna-scelte > summary { list-style: none; cursor: pointer; display: inline-flex; }
.chiamate-aggiorna-scelte > summary::-webkit-details-marker { display: none; }
.elenco-chiamate tr.chiamata-nuova > td:first-child { box-shadow: inset 4px 0 0 var(--accent); }
/* 6.0.1: la riga cambiata da un altro utente, ridisegnata da sola: un segno sul bordo per qualche secondo (anche senza animazioni) */
.elenco-chiamate tr.riga-aggiornata > td { box-shadow: inset 0 2px 0 var(--accent), inset 0 -2px 0 var(--accent); }
@media (prefers-reduced-motion: no-preference) { .elenco-chiamate tr.riga-aggiornata > td { animation: riga-aggiornata 4s ease-out; } }
/* 6.0.2: l'etichetta «cambiata 10:20» della riga cambiata da altri e l'ultima modifica nella colonna «In lavorazione a», con l'icona sulla
 * stessa riga del testo */
.elenco-chiamate .riga-cambiata { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; margin-bottom: .25rem; }
.elenco-chiamate .riga-cambiata .icona { width: 1em; height: 1em; }
.elenco-chiamate .ultima-modifica { display: inline-block; margin-top: .2rem; }
@keyframes riga-aggiornata { from { background: color-mix(in srgb, var(--accent) 18%, transparent); } to { background: transparent; } }
/* 5.5: gli schemi che spiegano le pagine (nucleo/schemi.php, sorgenti in app/docs/schemi/). Colori dalle variabili del tema; l'animazione
 * e' solo la luce (.sc-luce) che passa da un passo all'altro e il tratteggio che scorre sulle frecce: ferma, lo schema e' completo. */
.schema { margin: 0 0 1.2rem; }
.schema-disegno { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: .6rem; }
.schema-disegno > svg { width: 100%; min-width: 34rem; height: auto; }
.schema figcaption { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .4rem 1rem; margin-top: .5rem; }
.schema figcaption p { flex: 1 1 24rem; margin: 0; color: var(--muted); font-size: .9rem; }
.come-funziona { margin-bottom: 1rem; }
.come-funziona > summary { cursor: pointer; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-weight: 600; }
.come-funziona[open] > summary { margin-bottom: .8rem; }
.come-funziona > p:last-child { margin: 0; }
.sc text { font-family: var(--f-ui); font-size: 13px; fill: var(--ink); }
.sc .sc-p { font-size: 11.5px; }
.sc .sc-b { font-weight: 650; }
.sc .sc-m { fill: var(--muted); }
.sc .sc-acc { fill: var(--accent); }
.sc .sc-inv { fill: var(--accent-ink); }
.sc-box { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.2; }
.sc-box-acc { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.2; }
.sc-box-att { fill: var(--warn-soft); stroke: var(--warn); stroke-width: 1.2; }
.sc-testa { fill: var(--accent-soft); }
.sc-fondo { fill: var(--surface-2); }
.sc-pill { fill: var(--surface); stroke: var(--line-strong); }
.sc-pill-att { fill: var(--warn-soft); stroke: var(--warn); }
.sc-occupato { fill: var(--surface-2); stroke: var(--line-strong); stroke-dasharray: 4 3; }
.sc-numero { fill: var(--accent); }
.sc-linea { fill: none; stroke: var(--line-strong); stroke-width: 1.6; }
.sc-flusso { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 4; }
.sc-separa { stroke: var(--line-strong); stroke-width: 1.2; stroke-dasharray: 3 4; fill: none; }
.sc-punta { fill: var(--accent); }
.sc-tappa { fill: var(--surface); stroke: var(--accent); stroke-width: 2.2; }
.sc-tappa-forte { fill: var(--accent); }
.sc-dentro { fill: var(--ok-soft); stroke: var(--ok); }
.sc-margine { fill: color-mix(in srgb, var(--ok-soft) 55%, transparent); stroke: var(--ok); stroke-dasharray: 2 3; }
.sc-segno { stroke: var(--warn); stroke-width: 2.5; }
.sc-segno-p { fill: var(--warn); }
.sc-luce { fill: var(--accent); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .sc-flusso { animation: sc-scorre 1.2s linear infinite; }
  .sc-passi-4 .sc-luce { animation: sc-luce-4 10s ease-in-out infinite; }
  .sc-passi-5 .sc-luce { animation: sc-luce-5 12.5s ease-in-out infinite; }
  .sc .sc-d2 { animation-delay: 2.5s; }
  .sc .sc-d3 { animation-delay: 5s; }
  .sc .sc-d4 { animation-delay: 7.5s; }
  .sc .sc-d5 { animation-delay: 10s; }
}
@keyframes sc-scorre { to { stroke-dashoffset: -20; } }
@keyframes sc-luce-4 { 0%, 25%, 100% { opacity: 0; } 5%, 20% { opacity: .16; } }
@keyframes sc-luce-5 { 0%, 20%, 100% { opacity: 0; } 4%, 16% { opacity: .16; } }
.schema.fermo .sc-luce, .schema.fermo .sc-flusso { animation: none; }
.schema.fermo .sc-luce { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .schema-ferma { display: none; } }
@media print {
  .schema-disegno { overflow: visible; border-color: #bbb; }
  .schema-disegno > svg { min-width: 0; }
  .sc-luce, .sc-flusso { animation: none !important; }
  .sc-luce { opacity: 0 !important; }
  .schema-ferma { display: none; }
  .schema { break-inside: avoid; }
}
/* 5.5.1: «Come funziona» visibile: il pulsante in alto (accento, con il pallino finche' non lo si apre la prima volta), la striscia
 * dentro una parte della pagina e la finestra con lo schema */
.come-funziona-btn { border-color: var(--accent); color: var(--accent); position: relative; }
.come-funziona-btn:hover { background: var(--accent-soft); }
.come-funziona-btn.da-vedere::after { content: ""; position: absolute; top: -.25rem; right: -.25rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }
@media (prefers-reduced-motion: no-preference) { .come-funziona-btn.da-vedere::after { animation: cf-pulsa 2s ease-in-out infinite; } }
@keyframes cf-pulsa { 50% { transform: scale(1.35); opacity: .6; } }
.come-funziona-striscia { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: 0 0 1rem; padding: .7rem .9rem; border-radius: var(--r);
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--ink); }
.come-funziona-striscia > .icona { color: var(--accent); }
.come-funziona-striscia > span { flex: 1 1 14rem; }
.dialogo-schema { width: min(56rem, calc(100vw - 1.5rem)); max-height: calc(100vh - 2rem); padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); color: var(--ink); box-shadow: 0 1rem 3rem rgb(0 0 0 / .3); }
.dialogo-schema::backdrop { background: rgb(0 0 0 / .45); }
.dialogo-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.dialogo-testa h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; }
.dialogo-testa h2 .icona { color: var(--accent); }
.dialogo-schema .schema { margin-bottom: .6rem; }
@media print { .come-funziona-btn, .come-funziona-striscia, .dialogo-schema { display: none !important; } }
/* 5.5.2: il giro delle novità (app.js, nucleo/giro.php): quattro pannelli scuriscono la pagina intorno all'elemento e fermano i clic, la luce lo incornicia (l'ombra
 * scurisce il resto con quattro pannelli intorno: l'ombra enorme di un solo elemento Chrome non sempre la disegna), il fumetto spiega */
.giro-ombra { position: fixed; z-index: 1000; background: rgb(0 0 0 / .55); }
.giro-luce { position: fixed; z-index: 1002; border-radius: var(--r-s); outline: 3px solid var(--accent);
  outline-offset: 0; transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease; }
.giro-luce.centro { display: none; }
.giro-fumetto { position: fixed; z-index: 1003; width: min(22rem, calc(100vw - 1rem)); padding: 1rem 1.1rem; border-radius: var(--r);
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 1rem 2.5rem rgb(0 0 0 / .35); }
.giro-fumetto.centro { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.giro-fumetto h2 { font-size: 1.1rem; margin: 0 0 .4rem; }
.giro-fumetto p { margin: 0 0 .8rem; }
.giro-conta { font-size: .8rem; font-weight: 600; color: var(--accent); margin: 0 0 .2rem !important; }
.giro-bottoni { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.giro-bottoni .giro-salta { margin-right: auto; }
@media print { .giro-ombra, .giro-luce, .giro-fumetto { display: none !important; } }

/* 5.7: le automazioni (moduli/automazioni*.php, l'editor in app.js). Il flusso va dall'alto in basso: Quando (accento), Se (inchiostro),
   Allora (verde), Flusso (giallo); sotto i 980px tavolozza e proprietà vanno sotto la tela. */
.ae-sezione { margin-bottom: 1.4rem; }
.ae-sezione > h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ae-carte { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: .8rem; margin-bottom: 1rem; }
.ae-carte > .scheda { margin: 0; }
.ae-carta { display: flex; flex-direction: column; gap: .4rem; margin: 0; }
.ae-carta-testa { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.ae-carta-testa h3 { margin: 0; font-size: 1rem; }
.ae-carta-frase { margin: 0; color: var(--muted); font-size: .9rem; }
.ae-carta-piede { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: auto; padding-top: .3rem; }
.ae-carta-piede select { max-width: 12rem; }
.ae-liv { display: inline-block; font-size: .75rem; font-weight: 700; border: 1px solid currentColor; border-radius: 4px; padding: 0 .4rem; white-space: nowrap; }
.ae-liv-ente { color: var(--accent); }
.ae-liv-ufficio { color: var(--ink); }
.ae-liv-personale { color: var(--warn); }
.ae-chips, .ae-schede { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.ae-chips a, .ae-schede a { border: 1px solid var(--line); border-radius: 99px; padding: .25rem .8rem; text-decoration: none; color: var(--ink); background: var(--surface); }
.ae-chips a[aria-current], .ae-schede a[aria-current] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.ae-passi { margin: .3rem 0 0; padding-left: 1.2rem; font-size: .85rem; }
.ae-passi li.saltato { color: var(--muted); }
.ae-passi li.errore { color: var(--err); }
.ae-passi li.attesa { color: var(--warn); }
.ae-freni { display: grid; gap: 1rem; }
.ae-riga-i { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .8rem; border-bottom: 1px solid var(--line); padding-bottom: .8rem; }
.ae-riga-i p { margin: .2rem 0 0; max-width: 60ch; }
.ae-editor { margin-bottom: 1rem; }
.ae-testa { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem 1rem; }
.ae-nome { flex: 1 1 18rem; min-width: 0; }
.ae-nome input { font-size: 1.15rem; font-weight: 700; }
.ae-frase { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: .7rem 1rem; font-size: 1rem; margin: .8rem 0 0; }
.ae-frase-et { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ae-frase mark, .ae-dett mark { background: transparent; color: var(--accent); font-weight: 700; }
.ae-manca { color: var(--err); font-weight: 700; }
.ae-area { display: grid; grid-template-columns: 13rem minmax(0, 1fr) 16rem; gap: .8rem; margin-top: .8rem; align-items: start; }
.ae-tavolozza, .ae-prop { margin: 0; min-width: 0; }
.ae-tavolozza h2, .ae-prop h2 { font-size: 1rem; }
.ae-cerca { width: 100%; margin-bottom: .6rem; }
.ae-gruppo { margin-bottom: .7rem; }
.ae-gruppo h3 { font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; margin: 0 0 .3rem; }
.ae-gruppo[data-g="quando"] h3 { color: var(--accent); } .ae-gruppo[data-g="allora"] h3 { color: var(--ok); } .ae-gruppo[data-g="flusso"] h3 { color: var(--warn); }
.ae-blocco { display: block; width: 100%; text-align: left; border: 1px solid var(--line); border-left: 4px solid var(--line-strong); background: var(--surface);
  color: var(--ink); border-radius: var(--r-s); padding: .35rem .55rem; margin-bottom: .3rem; font: inherit; font-size: .88rem; cursor: pointer; }
.ae-blocco:hover { background: var(--surface-2); }
.ae-blocco[data-g="quando"], .ae-nodo[data-g="quando"] { border-left-color: var(--accent); }
.ae-blocco[data-g="se"], .ae-nodo[data-g="se"] { border-left-color: var(--ink); }
.ae-blocco[data-g="allora"], .ae-nodo[data-g="allora"] { border-left-color: var(--ok); }
.ae-blocco[data-g="flusso"], .ae-nodo[data-g="flusso"] { border-left-color: var(--warn); }
.ae-tela { background-color: var(--surface); background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 18px 18px;
  border: 1px solid var(--line); border-radius: var(--r); padding: 1.2rem .8rem 1.6rem; min-width: 0; overflow-x: auto; }
.ae-flusso { display: flex; flex-direction: column; align-items: center; min-width: min-content; }
.ae-nodo { display: block; width: min(25rem, 100%); min-width: 12.5rem; text-align: left; background: var(--surface); color: var(--ink); font: inherit;
  border: 1px solid var(--line); border-left-width: 5px; border-radius: var(--r); box-shadow: var(--ombra); padding: .55rem .75rem; cursor: pointer; }
.ae-nodo.scelto { outline: 3px solid var(--accent); outline-offset: 2px; }
.ae-nodo.errore { border-color: var(--err); }
.ae-tipo { display: flex; justify-content: space-between; gap: .5rem; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ae-conta { color: var(--ok); font-variant-numeric: tabular-nums; }
.ae-titolo { display: block; font-weight: 700; margin-top: .1rem; }
.ae-dett { display: block; color: var(--muted); font-size: .85rem; margin-top: .1rem; }
.ae-err { display: block; color: var(--err); font-size: .82rem; font-weight: 700; margin-top: .2rem; }
.ae-giunto { display: flex; flex-direction: column; align-items: center; }
.ae-filo { width: 2px; height: 14px; background: var(--line-strong); }
.ae-piu { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px dashed var(--line-strong); background: var(--surface); color: var(--muted);
  display: grid; place-items: center; font-size: 1.1rem; line-height: 1; padding: 0; cursor: pointer; }
.ae-piu:hover, .ae-piu.sopra, .ae-piu[aria-expanded="true"] { border-style: solid; border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.ae-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; padding: .4rem; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); box-shadow: var(--ombra); max-width: 27rem; }
.ae-rami { display: flex; gap: .8rem; align-items: flex-start; border-top: 2px solid var(--line-strong); }
.ae-ramo { display: flex; flex-direction: column; align-items: center; min-width: 13rem; }
.ae-et-ramo { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .05rem .6rem; border-radius: 99px; }
.ae-ramo-si .ae-et-ramo { background: var(--ok-soft); color: var(--ok); } .ae-ramo-no .ae-et-ramo { background: var(--err-soft); color: var(--err); }
.ae-fine { font-size: .8rem; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: 99px; padding: .05rem .7rem; }
.ae-prop label { display: block; font-size: .85rem; font-weight: 700; margin: .6rem 0 .2rem; }
.ae-prop label.spunta { font-weight: 400; }
.ae-prop select, .ae-prop input[type="text"], .ae-prop input[type="number"] { width: 100%; }
.ae-prop-titolo { font-weight: 700; font-size: 1.05rem; margin: 0; }
.ae-regola { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; padding: .45rem; border: 1px solid var(--line); border-radius: var(--r-s); margin: .35rem 0; background: var(--surface-2); }
.ae-regola select, .ae-regola input { min-width: 0; }
.ae-regola > :nth-child(3) { grid-column: 1 / -1; }
.ae-regola .btn { grid-column: 1 / -1; justify-self: end; }
.ae-eo { display: flex; gap: .35rem; margin: .5rem 0; }
.ae-eo .btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.ae-azioni { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.ae-conferma { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .85rem; }
@media (max-width: 980px) {
  .ae-area { grid-template-columns: minmax(0, 1fr); }
  .ae-tela { order: 1; } .ae-tavolozza { order: 2; } .ae-prop { order: 3; }
}
@media print { .ae-tavolozza, .ae-prop, .ae-piu { display: none; } }
/* 5.7.1: vista a riquadri o a righe, selezione per la modifica cumulativa, registro delle automazioni */
.ae-barra { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.ae-barra .bottoni { margin: 0; }
.ae-vista { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; }
.ae-vista a { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .8rem; text-decoration: none; color: var(--ink); background: var(--surface); }
.ae-vista a + a { border-left: 1px solid var(--line); }
.ae-vista a[aria-current] { background: var(--accent); color: var(--accent-ink); }
.ae-massiva { margin-bottom: 1rem; }
.ae-carta-testa .ae-sel { margin-top: .25rem; flex: none; }
.ae-carta-testa h3 { flex: 1; min-width: 0; }
.ae-righe .col-sel { width: 1%; }
/* 5.8: la vista a righe delle Automazioni dentro il riquadro, con il bordo come le altre tabelle (la tabella arriva ai bordi) */
.ae-righe-box { padding: 0; overflow: hidden; }
.scheda.ae-righe-box > .scorri { margin: 0; border: 0; }
.ae-registro tr.ae-reg-err td { background: var(--err-soft); }
.ae-registro tr.ae-reg-att td { background: var(--warn-soft); }
.ae-registro td:last-child { min-width: 22rem; }
/* 5.7.2: nella pagina Novità, sotto il titolo di una versione, il pulsante per rivedere il suo giro */
.giro-rivedi { margin: -.2rem 0 .8rem; }
/* 5.8: Setup -> Integrazioni (moduli/integrazioni.php) */
.int-carte { display: grid; grid-template-columns: 1fr; gap: .8rem; }
@media (min-width: 40em) { .int-carte { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70em) { .int-carte { grid-template-columns: repeat(3, 1fr); } }
.int-carta { border: 1px solid var(--line); border-radius: var(--r-s); padding: .8rem .9rem; display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.int-carta h3 { margin: 0; font-size: 1rem; }
.int-carta p { margin: 0; }
.int-carta .bottoni { margin-top: auto; padding-top: .3rem; }
.int-eventi { display: grid; grid-template-columns: 1fr; gap: .2rem .9rem; }
@media (min-width: 48em) { .int-eventi { grid-template-columns: repeat(2, 1fr); } }
.int-eventi legend { grid-column: 1 / -1; }
.int-pagina fieldset + fieldset, .int-eventi + .campi { margin-top: .9rem; }
/* 5.8.1 (Ale: «le caselle dei campi non sono allineati bene»): in ogni fila etichetta, casella e aiuto stanno su tre righe comuni, cosi' le
   caselle sono alla stessa altezza anche con un'etichetta su due righe o un aiuto sotto un campo solo */
.int-campi { align-items: start; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }   /* un campo solo non si allarga a tutta la riga */
.int-pagina fieldset + .campi, .int-pagina .campi + fieldset, .int-pagina .campi + .campi { margin-top: .9rem; }
@supports (grid-template-rows: subgrid) {
  .int-campi .campo { grid-row: span 3; grid-template-rows: subgrid; gap: .3rem; align-items: end; }
  .int-campi .campo > small, .int-campi .campo > :nth-child(2) { align-self: start; }   /* caselle in cima alla loro riga, anche accanto a un testo alto */
  .int-campi .campo > .spunta { grid-row: 2; align-self: center; }
}
.int-campi .campo > small { color: var(--muted); font-size: .85rem; }
.int-campi .campo > small:empty { display: none; }
.int-log { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.int-log li { padding: .35rem .6rem; border-left: 3px solid var(--line); overflow-wrap: anywhere; }
.int-log .int-log-att { border-left-color: var(--warn); background: var(--warn-soft); }
.int-log .int-log-err { border-left-color: var(--err); background: var(--err-soft); }
.int-codice { margin: .5rem 0 0; padding: .7rem .8rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-s); overflow: auto; max-height: 26rem; font-size: .82rem; }
.int-codice code { background: none; padding: 0; white-space: pre; overflow-wrap: normal; }

/* 5.9: la testata animata della home (vista.php, testata_home): sotto la barra, larga quanto la pagina, colori del tema */
.testata-anim { flex: none; height: 112px; overflow: hidden; background: var(--bg); border-bottom: 1px solid var(--line); }
.testata-anim svg { display: block; width: 100%; height: 100%; }
.testata-anim path, .testata-anim circle { fill: var(--accent); }
.ta-deriva { animation-name: ta-deriva; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes ta-deriva { to { transform: translateX(-2560px); } }
.testata-anim .ta-v { fill: none; stroke: var(--accent); stroke-width: 1.3; stroke-opacity: .38; stroke-linejoin: round; }
.ta-v { animation-duration: 240s; }   /* lo stile va sul gruppo: le copie (use) lo ereditano, le regole sul tracciato in defs non le raggiungono */
.ta-o1 { animation-duration: 176s; } .ta-o1 path { fill-opacity: .08; }
.ta-o2 { animation-duration: 128s; } .ta-o2 path { fill-opacity: .12; }
.ta-o3 { animation-duration: 93s; } .ta-o3 path { fill-opacity: .18; }
.ta-o4 { animation-duration: 67s; } .ta-o4 path { fill-opacity: .28; }
.ta-scia { animation: ta-scia 19s linear infinite; }
.ta-scia circle:first-child { fill-opacity: .1; } .ta-scia circle:last-child { fill-opacity: .8; }
@keyframes ta-scia { 0% { transform: translateX(-80px); opacity: 0; } 8% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateX(2640px); opacity: 0; } }
@media (max-width: 47.99rem) { .testata-anim { height: 80px; } }
@media print { .testata-anim { display: none; } }

/* 5.9: la testata «Coro»: barre che respirano a ondata (fase ta-f*, durata ta-d*), riflesse sotto l'orizzonte; qualche luce calda */
.testata-coro rect { fill: var(--accent); animation-name: ta-respiro; animation-timing-function: ease-in-out; animation-iteration-count: infinite; transform-box: fill-box; }
.testata-coro .ta-c { transform-origin: 50% 100%; } .testata-coro .ta-r { transform-origin: 50% 0; }
.testata-coro .ta-luce { fill: #d9822b; }
.ta-orizzonte { stroke: var(--accent); stroke-opacity: .22; stroke-width: 1; }
@keyframes ta-respiro { 0%, 100% { transform: scaleY(.42); } 50% { transform: scaleY(1); } }
.ta-d0 { animation-duration: 4.8s; } .ta-d1 { animation-duration: 5.4s; } .ta-d2 { animation-duration: 6s; }
.ta-f0 { animation-delay: -0.00s; } .ta-f1 { animation-delay: -0.14s; } .ta-f2 { animation-delay: -0.27s; } .ta-f3 { animation-delay: -0.41s; } .ta-f4 { animation-delay: -0.54s; } .ta-f5 { animation-delay: -0.68s; } .ta-f6 { animation-delay: -0.81s; } .ta-f7 { animation-delay: -0.95s; }
.ta-f8 { animation-delay: -1.08s; } .ta-f9 { animation-delay: -1.22s; } .ta-f10 { animation-delay: -1.35s; } .ta-f11 { animation-delay: -1.49s; } .ta-f12 { animation-delay: -1.62s; } .ta-f13 { animation-delay: -1.76s; } .ta-f14 { animation-delay: -1.89s; } .ta-f15 { animation-delay: -2.03s; }
.ta-f16 { animation-delay: -2.16s; } .ta-f17 { animation-delay: -2.29s; } .ta-f18 { animation-delay: -2.43s; } .ta-f19 { animation-delay: -2.57s; } .ta-f20 { animation-delay: -2.70s; } .ta-f21 { animation-delay: -2.83s; } .ta-f22 { animation-delay: -2.97s; } .ta-f23 { animation-delay: -3.11s; }
.ta-f24 { animation-delay: -3.24s; } .ta-f25 { animation-delay: -3.38s; } .ta-f26 { animation-delay: -3.51s; } .ta-f27 { animation-delay: -3.65s; } .ta-f28 { animation-delay: -3.78s; } .ta-f29 { animation-delay: -3.92s; } .ta-f30 { animation-delay: -4.05s; } .ta-f31 { animation-delay: -4.19s; }
.ta-f32 { animation-delay: -4.32s; } .ta-f33 { animation-delay: -4.46s; } .ta-f34 { animation-delay: -4.59s; } .ta-f35 { animation-delay: -4.73s; } .ta-f36 { animation-delay: -4.86s; } .ta-f37 { animation-delay: -5.00s; } .ta-f38 { animation-delay: -5.13s; } .ta-f39 { animation-delay: -5.27s; }

/* 5.9: la testata «Il mare dell'ente» (vista.php, testata_mare): il cielo segue l'ora, le onde le pratiche aperte, le barche quelle in
   lavorazione, i gabbiani le richiamate, le nuvole le chiamate negative di oggi, il faro le urgenze altissime (piu' forte se senza nessuno, 5.9.3) */
.testata-mare { position: relative; }
.testata-mare .ta-tela { position: absolute; inset: 0; }
.testata-mare .ta-cielo { fill: color-mix(in srgb, var(--bg) 86%, #6fb7d9); }
.testata-mare.ta-alba .ta-cielo, .testata-mare.ta-tramonto .ta-cielo { fill: color-mix(in srgb, var(--bg) 72%, #f2a65a); }
.testata-mare.ta-notte .ta-cielo { fill: color-mix(in srgb, var(--bg) 22%, #1d3347); }
.testata-mare .ta-stella { fill: #f4f1e6; animation-name: ta-brilla; animation-duration: 3.6s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes ta-brilla { from { opacity: .25; } to { opacity: 1; } }
.testata-mare .ta-luna { fill: #eef0e6; }
.testata-mare .ta-sole { fill: #f2b544; } .testata-mare .ta-sole.ta-sole-basso { fill: #e9874a; }
.testata-mare .ta-sole-alone { fill: #f2b544; fill-opacity: .18; }
.testata-mare .ta-nuvola path { fill: #ffffff; fill-opacity: .9; }
.testata-mare .ta-nuvola.ta-nuvola-scura path { fill: #b9c3cc; }
.testata-mare.ta-notte .ta-nuvola path { fill: #4a5d74; }
[data-tema="scuro"] .testata-mare .ta-nuvola path { fill: #3d4d58; }
.ta-nuvola { animation-name: ta-nuvola; animation-duration: 80s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes ta-nuvola { to { transform: translateX(70px); } }
.testata-mare .ta-ala { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 60%; animation-name: ta-ala; animation-duration: .7s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
.testata-mare.ta-notte .ta-ala { stroke: #dfe6ec; }
@keyframes ta-ala { to { transform: scaleY(.45); } }
.ta-vola { animation-name: ta-vola; animation-duration: 14s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes ta-vola { to { transform: translate(26px, -5px); } }
.testata-mare .ta-fascio { transform-box: fill-box; transform-origin: 100% 50%; animation: ta-fascio 7s ease-in-out infinite alternate; }
.testata-mare .ta-fascio.ta-allerta { animation-duration: 2.6s; }   /* 5.9.3: urgenza senza nessuno */
@keyframes ta-fascio { from { transform: rotate(-9deg); } to { transform: rotate(11deg); } }
.testata-mare .ta-lampada { fill: #ffd36b; transform-box: fill-box; transform-origin: 50% 50%; animation: ta-lampada 1.4s ease-out infinite; }
@keyframes ta-lampada { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
.testata-mare .ta-roccia { fill: #4a5a63; } .testata-mare .ta-torre { fill: #f4f1ea; } .testata-mare .ta-righe { fill: #b9473a; }
.testata-mare .ta-scuro { fill: #3a4750; } .testata-mare .ta-vetro { fill: #c9d3d9; } .testata-mare .ta-vetro.ta-acceso { fill: #ffd36b; }
.testata-mare .ta-onda path { fill: var(--accent); }
.testata-mare .ta-w1 path { fill-opacity: .13; } .testata-mare .ta-w2 path { fill-opacity: .2; }
.testata-mare .ta-w3 path { fill-opacity: .32; } .testata-mare .ta-w4 path { fill-opacity: .5; }
.ta-onda { animation: ta-deriva-mare linear infinite; }
@keyframes ta-deriva-mare { to { transform: translateX(-1440px); } }
.testata-mare .ta-mare-onde { position: absolute; inset: 0; }
.testata-mare .ta-dondola { transform-box: fill-box; transform-origin: 50% 100%; animation-name: ta-dondola; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
@keyframes ta-dondola { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-2px) rotate(3deg); } }
.testata-mare .ta-scafo { fill: #23404a; } .testata-mare .ta-albero { fill: none; stroke: #23404a; stroke-width: 1.2; }
.testata-mare .ta-vela { fill: #ffffff; stroke: #23404a; stroke-width: .6; } .testata-mare .ta-fiocco { fill: var(--accent); }
[data-tema="scuro"] .testata-mare .ta-scafo { fill: #cfd8de; } [data-tema="scuro"] .testata-mare .ta-albero, [data-tema="scuro"] .testata-mare .ta-vela { stroke: #cfd8de; }
.testata-mare .ta-dida { position: absolute; left: 1rem; top: .5rem; margin: 0; padding: .15rem .65rem; border-radius: 999px; font-size: .75rem; line-height: 1.5;
  color: var(--ink); background: color-mix(in srgb, var(--surface) 82%, transparent); white-space: nowrap; max-width: calc(100% - 6rem); overflow: hidden; text-overflow: ellipsis; }
.ta-s0-1 { animation-duration: 108s; } .ta-s0-2 { animation-duration: 79s; } .ta-s0-3 { animation-duration: 58s; } .ta-s0-4 { animation-duration: 43s; }
.ta-s1-1 { animation-duration: 78s; } .ta-s1-2 { animation-duration: 57s; } .ta-s1-3 { animation-duration: 42s; } .ta-s1-4 { animation-duration: 31s; }
.ta-s2-1 { animation-duration: 60s; } .ta-s2-2 { animation-duration: 44s; } .ta-s2-3 { animation-duration: 32s; } .ta-s2-4 { animation-duration: 24s; }
.ta-s3-1 { animation-duration: 42s; } .ta-s3-2 { animation-duration: 31s; } .ta-s3-3 { animation-duration: 22s; } .ta-s3-4 { animation-duration: 17s; }
/* 5.9: la scatola della testata; quando la testata con i dati si aggiorna, la nuova entra in dissolvenza sopra la vecchia (app.js) */
.testata-box { flex: none; display: grid; }
.testata-box > * { grid-area: 1 / 1; }
.ta-entra { animation: ta-entra 1.2s ease both; }
@keyframes ta-entra { from { opacity: 0; } to { opacity: 1; } }
/* 5.9: le sezioni della home si chiudono e si riaprono dal titolo (il pulsante dentro l'h2) */
.home-ritrai { display: inline-flex; align-items: center; gap: .5rem; max-width: 100%; min-height: 2.75rem; padding: 0 .4rem 0 0; margin: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--r-s); }
.home-ritrai:hover span:not(.home-ritrai-freccia) { text-decoration: underline; text-underline-offset: .2em; }
.home-ritrai:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.home-ritrai .icona { color: var(--accent); }
.home-ritrai-freccia { display: inline-flex; color: var(--muted); transition: transform .2s ease; }
.home-ritrai-freccia .icona { color: var(--muted); }
.home-sezione.chiusa .home-ritrai-freccia { transform: rotate(-90deg); }
.home-sezione .griglia[hidden] { display: none; }        /* la griglia ha display: grid, che altrimenti vince su hidden */
.home-tutte { justify-content: flex-end; margin: .5rem 0 -.5rem; }
/* 5.9: «Aggiornata» accanto al titolo di una sezione chiusa quando un suo riquadro cambia (app.js) */
.home-novita { font-size: .72rem; }
.home-novita[hidden] { display: none; }        /* .etichetta e' inline-block, che altrimenti vince su hidden */
@media (prefers-reduced-motion: no-preference) { .home-novita:not([hidden]) { animation: home-novita 1s ease-in-out 3; } }
@keyframes home-novita { 50% { box-shadow: 0 0 0 3px var(--warn); } }      /* un anello che pulsa: il testo resta pieno (contrasto) */

/* 5.9: la testata «La registrazione della giornata» (vista.php, testata_filo): le chiamate di oggi come picchi sul filo delle ore */
.testata-filo { position: relative; }
.testata-filo .ta-tela { position: absolute; inset: 0; }
.testata-filo .ta-inviluppo { fill-opacity: .08; }
.ta-filo { stroke: var(--accent); stroke-opacity: .55; stroke-width: 1; }
.ta-filo-dopo { stroke: var(--muted); stroke-opacity: .6; stroke-width: 1; stroke-dasharray: 4 4; }
.ta-ag { fill: var(--accent); fill-opacity: .75; } .ta-ag.ta-passata { fill-opacity: .3; }
.ta-picco { stroke-width: 3; stroke-linecap: round; stroke-opacity: .88; }
.ta-c-pos { stroke: #2a6fdb; } .ta-c-neu { stroke: #9aa5b1; } .ta-c-neg { stroke: #e08a2c; }
[data-tema="scuro"] .ta-c-pos { stroke: #6ea2ff; } [data-tema="scuro"] .ta-c-neu { stroke: #6d7a86; } [data-tema="scuro"] .ta-c-neg { stroke: #f0a050; }
.ta-nuova { transform-box: fill-box; transform-origin: 50% 50%; animation: ta-nasce .7s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes ta-nasce { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.testata-filo .ta-urg { fill: var(--ink); }
.ta-ora { fill: var(--muted); font-size: 10.5px; text-anchor: middle; }
.ta-adesso { stroke: var(--accent); stroke-width: 1.5; }
.testata-filo .ta-battito { fill-opacity: .7; transform-box: fill-box; transform-origin: 50% 50%; animation: ta-battito 2.2s ease-out infinite; }
@keyframes ta-battito { from { transform: scale(.6); opacity: .7; } to { transform: scale(3.2); opacity: 0; } }
.testata-filo .ta-punto { stroke: var(--bg); stroke-width: 2; }
.ta-ora-adesso { fill: var(--accent); font-size: 11px; font-weight: 700; text-anchor: middle; }
.testata-filo .ta-dida { position: absolute; top: .1rem; left: 3%; margin: 0; font-size: .75rem; line-height: 1.4; color: var(--muted); white-space: nowrap; }
.testata-filo .ta-dida.ta-dida-destra { left: auto; right: 3%; }
@media (max-width: 47.99rem) { .testata-anim.testata-filo { height: 112px; } .ta-dispari, .ta-ora-adesso { display: none; } .testata-filo .ta-dida { max-width: 60%; overflow: hidden; text-overflow: ellipsis; } }

/* 5.9: la testata «Costellazione degli uffici» (vista.php, testata_stelle): uffici come stelle, passaggi come linee e comete, chiamate come
   stelle cadenti */
.testata-stelle { position: relative; }
.testata-stelle .ta-tela { position: absolute; inset: 0; }
.testata-stelle .ta-polvere { fill: var(--accent); fill-opacity: .35; animation-name: ta-brilla; animation-duration: 4.2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
.ta-legame { stroke: var(--accent); stroke-width: 1; }
.ta-l1 { stroke-opacity: .12; } .ta-l2 { stroke-opacity: .2; } .ta-l3 { stroke-opacity: .28; } .ta-l4 { stroke-opacity: .36; } .ta-l5 { stroke-opacity: .45; }
.ta-cometa { stroke: #d9822b; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 16 200; stroke-dashoffset: 16; animation: ta-cometa 9s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes ta-cometa { 0% { stroke-dashoffset: 16; } 18%, 100% { stroke-dashoffset: -100; } }
.ta-caduta { stroke: #d9822b; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 30 200; stroke-dashoffset: 30; animation: ta-caduta 7s ease-in infinite; }
@keyframes ta-caduta { 0% { stroke-dashoffset: 30; } 14%, 100% { stroke-dashoffset: -100; } }
[data-tema="scuro"] .ta-cometa, [data-tema="scuro"] .ta-caduta { stroke: #ffd36b; }
.ta-c0 { animation-delay: 0s; } .ta-c1 { animation-delay: 2.2s; } .ta-c2 { animation-delay: 4.5s; } .ta-c3 { animation-delay: 6.7s; }
.testata-stelle .ta-alone { fill: var(--accent); fill-opacity: .14; transform-box: fill-box; transform-origin: 50% 50%; animation-name: ta-alone; animation-duration: 5s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes ta-alone { from { transform: scale(.85); } to { transform: scale(1.15); } }
.ta-nome-uff { fill: var(--muted); font-size: 11px; text-anchor: middle; }
.ta-numero { fill: var(--ink); font-weight: 700; }
.testata-stelle .ta-dida { position: absolute; top: .1rem; left: 3%; margin: 0; font-size: .75rem; line-height: 1.4; color: var(--muted); white-space: nowrap; }
@media (max-width: 47.99rem) { .testata-anim.testata-stelle { height: 112px; } .ta-molti .ta-nome-uff { display: none; } .testata-stelle .ta-dida { max-width: 90%; overflow: hidden; text-overflow: ellipsis; } }
.ta-nome-uff.ta-inizio { text-anchor: start; } .ta-nome-uff.ta-fine { text-anchor: end; }      /* il primo e l'ultimo ufficio non escono dai bordi */
/* 5.9.1: riaprendo una sezione, i riquadri con dati nuovi si illuminano un attimo (app.js) */
@media (prefers-reduced-motion: no-preference) { .widget.nuovo-dato { animation: nuovo-dato 2.4s ease-out 1; } }
@keyframes nuovo-dato { 0%, 35% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.home-novita { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.elenco-chiamate td[data-etichetta="Stato d'animo"] { white-space: nowrap; }      /* 6.0: l'imbuto del filtro accanto all'etichetta */
/* 6.1: la sezione Privacy (moduli/privacy.php): il testo dei documenti e i pareri del DPO */
.testo-documento { max-width: 46rem; line-height: 1.6; }
.testo-documento h2 { font-size: 1.12rem; margin: 1.4rem 0 .4rem; }
.testo-documento h3 { font-size: 1rem; margin: 1rem 0 .3rem; }
.parere { border-left: 3px solid var(--line); padding: .2rem 0 .2rem .8rem; margin: .8rem 0; }
@media print { .testo-documento { max-width: none; } }
.testo-documento mark.da-completare { background: var(--warn-soft); color: var(--warn); padding: 0 .2rem; border-radius: 3px; font-weight: 600; }
/* 6.1: il credito dell'IA (moduli/costi_ia.php): il saldo in evidenza, giallo sotto la soglia, rosso a zero */
.numero.att b, .numero-grande.att b { color: var(--warn); }
.numero.err b, .numero-grande.err b { color: var(--err); }
.numero-grande { margin: .2rem 0; } .numero-grande b { font-size: 1.8rem; }
.campo-corto { max-width: 18rem; }
/* 6.1: la barra dell'IA in cima a tutte le pagine (nucleo/credito.php, credito_barra): arancione quando il credito sta finendo, rossa
   quando e' finito o l'IA e' ferma (Ale: «una barra di colore che decidi tu, tipo arancione, ma che sia visibile, in alto, su tutte le
   pagine»). Colori pieni, uguali nei due temi, con il testo a contrasto alto. */
.barra-ia { display: flex; align-items: flex-start; gap: .6rem; padding: .65rem 1rem; font-size: .92rem; line-height: 1.4; border-bottom: 2px solid rgba(0, 0, 0, .25); }
.barra-ia p { margin: 0; flex: 1 1 auto; }
.barra-ia .icona { width: 1.35rem; height: 1.35rem; flex: none; margin-top: .05rem; }
.barra-ia.arancione { background: #f59e0b; color: #1c1100; }
.barra-ia.rossa { background: #b91c1c; color: #fff; }
.barra-ia a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.barra-ia b { font-weight: 700; }
.tabella input.corto { max-width: 9rem; }
/* 6.2: Setup -> Lettura e IA -> Modelli e riserve (nucleo/modelli.php): il nome della funzione va a capo, i campi prendono tutta la cella;
   sul telefono le etichette sopra i campi */
.mo-tabella th[scope="row"] { white-space: normal; width: 14rem; }
.mo-tabella input { width: 100%; min-width: 0; }
@media (max-width: 45em) {
  .tabella.schede.mo-tabella th[scope="row"] { display: block; width: auto; padding: .4rem 0; background: none; }
  .tabella.schede.mo-tabella td { padding-left: 0; }
  .tabella.schede.mo-tabella td::before { position: static; display: block; width: auto; margin-bottom: .2rem; }
}
/* 6.2: gli errori dei modelli e delle letture possono essere lunghi e senza spazi (risposte grezze del fornitore): vanno a capo invece di
   allargare la pagina sul telefono (Setup -> Lettura e IA) */
.a-capo li { overflow-wrap: anywhere; min-width: 0; }
/* 6.2: la Guida ai costi dell'IA (moduli/guida_costi.php): colori del tema; i colori fissi sono quelli dei grafici (medi, leggibili su chiaro
   e scuro) e delle barre (uguali alla barra vera in cima alle pagine) */
.gc { display: grid; gap: 2.2rem; max-width: 72rem; }
.gc p { max-width: 75ch; }
.gc-testa { display: grid; gap: .8rem; }
.gc-sopra { margin: 0; color: var(--accent); font-weight: 700; font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; }
.gc-tesi { margin: 0; font-size: 1.1rem; }
.gc-indice { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .2rem 1.2rem; list-style: none; padding: 0; margin: .4rem 0 0; counter-reset: gc; }
.gc-indice li { counter-increment: gc; }
.gc-indice a { display: flex; gap: .6rem; padding: .35rem 0; border-bottom: 1px dashed var(--line); color: var(--ink); text-decoration: none; }
.gc-indice a::before { content: counter(gc, decimal-leading-zero); color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.gc-indice a:hover { color: var(--accent); }
.gc-sez { display: grid; gap: 1rem; scroll-margin-top: 1rem; }
.gc-sez > h2 { display: flex; gap: .6rem; align-items: baseline; margin: 0; }
.gc-num { color: var(--accent); font-variant-numeric: tabular-nums; font-size: .85em; }
.gc-tavola { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem 1.2rem; display: grid; gap: .9rem; min-width: 0; }
.gc-tavola h3 { margin: 0; }
.gc-giornata { display: block; width: 100%; height: 2.6rem; border-radius: var(--r-s); }
.gc-c1 { fill: var(--accent); background: var(--accent); }
.gc-c2 { fill: #2f9ea3; background: #2f9ea3; }
.gc-c3 { fill: #7a5cc4; background: #7a5cc4; }
.gc-c4 { fill: #c2741a; background: #c2741a; }
.gc-c5 { fill: #8a9a9c; background: #8a9a9c; }
.gc-leggenda { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .4rem 1.2rem; list-style: none; margin: 0; padding: 0; }
.gc-leggenda li { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.gc-pallino { display: inline-block; flex: none; width: .75rem; height: .75rem; border-radius: 3px; }
.gc-misura { display: block; width: 100%; height: auto; }
.gc-m-ok { fill: var(--accent); }
.gc-m-att { fill: #f59e0b; }
.gc-m-err { fill: #b91c1c; }
.gc-m-riga { stroke: var(--ink); stroke-width: 2; }
.gc-misura text { font-family: inherit; font-size: 14px; fill: var(--ink); }
.gc-misura .gc-m-cifra { font-weight: 700; font-variant-numeric: tabular-nums; }
.gc-misura .gc-m-dentro { fill: var(--surface); }
.gc-misura .gc-m-nota { fill: var(--muted); font-size: 13px; }
.gc-regole { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .7rem; }
.gc-regola { display: grid; gap: .25rem; padding: .7rem .8rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); font-size: .93rem; }
.gc-avvisa { color: var(--warn); font-weight: 700; }
.gc-ferma { color: var(--err); font-weight: 700; }
.gc-livello { display: grid; gap: .8rem; min-width: 0; padding: .9rem; border: 2px solid var(--accent); border-radius: var(--r); }
.gc-l2 { border-color: #2f9ea3; }
.gc-l3 { border-color: #7a5cc4; }
.gc-l4 { border-color: #c2741a; }
.gc-livello-testa { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; }
.gc-livello-testa b { font-size: 1.05rem; }
.gc-livello-testa span { color: var(--muted); font-size: .85rem; }
.gc-percorsi { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem; }
.gc-percorso { display: grid; list-style: none; margin: 0; padding: 0; }
.gc-percorso li { position: relative; display: grid; gap: .2rem; margin-left: 1rem; padding: .6rem 0 .6rem 1.4rem; border-left: 2px solid var(--line); }
.gc-percorso li::before { content: ""; position: absolute; left: -.55rem; top: .8rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--surface); border: 3px solid var(--accent); }
.gc-percorso li.gc-inizio, .gc-percorso li.gc-fine { margin-left: 0; padding: .6rem .8rem; border-left: 0; border-radius: var(--r-s); font-weight: 700; }
.gc-percorso li.gc-inizio::before, .gc-percorso li.gc-fine::before { display: none; }
.gc-percorso li.gc-inizio { background: var(--accent); color: var(--accent-ink); }
.gc-percorso li.gc-fine { background: var(--ok-soft); color: var(--ok); }
.gc-no { color: var(--err); font-size: .9rem; }
.gc-attesa { color: var(--warn); font-size: .9rem; }
.gc-contatori { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .6rem; list-style: none; margin: 0; padding: 0; }
.gc-contatori li { display: grid; gap: .2rem; padding: .6rem .7rem; border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--r-s); font-size: .92rem; }
.gc-contatori span { color: var(--muted); }
.gc-barre { display: grid; gap: 1rem; }
.gc-barra-voce { display: grid; gap: .35rem; }
.gc-barra-voce .barra-ia, .gc-finta .barra-ia { border-radius: var(--r-s); }
.gc-barra-voce p { margin: 0; }
.gc-chip { display: inline-block; margin: .1rem .2rem 0 0; padding: .05rem .55rem; border-radius: 999px; background: var(--accent-soft); color: var(--ink); font-size: .78rem; font-weight: 700; }
.gc-si { color: var(--ok); font-weight: 700; }
.gc-no-tab { color: var(--muted); }
.gc-tempo { display: grid; list-style: none; margin: 0; padding: 0; }
.gc-tempo li { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: .8rem; padding: .5rem 0; border-bottom: 1px dashed var(--line); }
.gc-tempo b { color: var(--accent); font-variant-numeric: tabular-nums; }
.gc-tempo .gc-rosso b { color: var(--err); }
.gc-tempo .gc-verde b { color: var(--ok); }
.gc-scenari { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem; }
.gc-scenario { display: grid; gap: .6rem; align-content: start; min-width: 0; padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.gc-scenario h3 { margin: 0; }
.gc-scenario .etichetta { justify-self: start; }
.gc-scenario .gc-tempo li { grid-template-columns: 4.4rem minmax(0, 1fr); font-size: .93rem; }
.gc-num-sc { margin: 0; color: var(--muted); font-size: .85rem; }
.gc-morale { margin: 0; padding-top: .6rem; border-top: 1px solid var(--line); font-size: .93rem; }
.gc-simula { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.2rem; }
.gc-comandi { display: grid; gap: .7rem; align-content: start; }
.gc-comandi input[type=range] { width: 100%; accent-color: var(--accent); }
.gc-esito { display: grid; gap: .8rem; align-content: start; min-width: 0; }
.gc-finta { overflow: hidden; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-s); }
.gc-finta [data-gc-barra-qui] > p { margin: 0; padding: .7rem .9rem; color: var(--muted); }
.gc-finta-corpo { display: grid; gap: .5rem; padding: .8rem; }
.gc-finta-corpo span { display: block; height: .6rem; border-radius: .3rem; background: var(--line); }
.gc-finta-corpo span:nth-child(1) { width: 60%; }
.gc-finta-corpo span:nth-child(2) { width: 85%; }
.gc-finta-corpo span:nth-child(3) { width: 40%; }
.gc-link { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.gc-punti { display: grid; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.gc-punti li { display: flex; gap: .6rem; align-items: baseline; }
.gc-punti .s { color: var(--ok); font-weight: 800; }
.gc-punti .n { color: var(--err); font-weight: 800; }
.gc-punti .a { color: var(--warn); font-weight: 800; }
.gc-domanda { padding: .7rem 0; border-bottom: 1px solid var(--line); }
.gc-domanda summary { cursor: pointer; font-weight: 700; }
.gc-domanda p { margin: .5rem 0 0; }
@media (max-width: 45em) {
  .gc-simula { grid-template-columns: 1fr; }
  .gc-tempo li, .gc-scenario .gc-tempo li { grid-template-columns: 4rem minmax(0, 1fr); }
}
@media print { .gc-indice, .gc-simula { display: none; } }
/* 6.2: il calcolatore a cursori della guida (le righe della spesa e i due misuratori: tetto del giorno e spesa sospetta) */
.gc-righe { display: grid; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.gc-righe li { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; border-bottom: 1px dashed var(--line); }
.gc-metro-blocco { display: grid; gap: .45rem; }
.gc-metro-titolo { margin: 0; }
.gc-metro { position: relative; height: .9rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.gc-metro-pieno { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: var(--accent); transition: width .15s ease; }
.gc-metro-pieno.gc-att { background: #f59e0b; }
.gc-metro-pieno.gc-err { background: #b91c1c; }
.gc-metro-segno { position: absolute; top: -.3rem; bottom: -.3rem; width: 3px; margin-left: -1px; border-radius: 2px; }
.gc-metro-segno.gc-att { background: #f59e0b; }
.gc-metro-segno.gc-err { background: #b91c1c; }
@media (prefers-reduced-motion: reduce) { .gc-metro-pieno { transition: none; } }
/* 6.2.1: i cursori del calcolatore in due gruppi (quanto si usa l'IA; credito e controlli) */
.gc-comandi fieldset { display: grid; gap: .7rem; }
/* 6.2.2 (Ale 28/10/2026: il collegamento al simulatore «poco visibile»): in Costi dell'IA il riquadro con i pulsanti del simulatore e della
 * guida, solo per l'amministratore e i dirigenti delegati al credito; nei simulatori «Rimetti i valori di partenza» */
.ci-simulatore { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; margin: 0 0 1rem;
  padding: .9rem 1rem; border-radius: var(--r); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.ci-simulatore > p { display: flex; gap: .6rem; align-items: flex-start; margin: 0; max-width: 62ch; }
.ci-simulatore > p > .icona { flex: none; width: 1.5rem; height: 1.5rem; color: var(--accent); }
.gc-comandi .bottoni { margin-top: .2rem; }

/* ------------------------------------------------------------------ 6.3: Cicerone (sviluppi/19)
 * Ale 28/10/2026: «Per ora mi sembra ok. Ma devo vedere quando sarà tutto pronto. Procedi.» e «Fai l'icona animata». La scheda in cima alla
 * home (moduli/giornata.php), il riquadro «Situazioni critiche», Setup -> Cicerone (moduli/giornata_setup.php) e le parti che scrive
 * nucleo/giornata_ia.php (commento dell'IA, nota, «Come funziona», avviso). Colori solo dai gettoni del tema: Critica var(--err), Attenzione
 * var(--warn), Da tenere d'occhio var(--accent); la gravita' e' sempre anche scritta. Mai la classe home-sezione per Cicerone (le prove della
 * home cercano la prima). Sul telefono: a tutta larghezza, bollini su due colonne, pulsanti alti 44 px, «Vai alla risposta». */
.scheda.giornata { margin: 0 0 1.25rem; border-top: 3px solid var(--accent); }
.giornata-testa { display: flex; align-items: flex-start; gap: .75rem; }
.giornata-titoli { flex: 1 1 auto; min-width: 0; }
.scheda .giornata-titoli h2 { margin: .2rem 0 0; font-size: 1.2rem; }
.giornata-icona { width: 2.75rem; height: 2.75rem; color: var(--accent); flex: none; }
.giornata-riduci { flex: none; margin-left: auto; }
.giornata-riga-ridotta { margin: .1rem 0 0; color: var(--muted); font-size: .88rem; }
.giornata-riga-ridotta[hidden] { display: none; }
/* la frase di Cicerone: piccola, in corsivo, sotto il titolo; il latino a richiesta */
.giornata-frase { margin: .3rem 0 0; font-size: .88rem; color: var(--muted); max-width: 70ch; }
.giornata-frase blockquote { margin: 0; font-style: italic; color: var(--ink); }
.giornata-frase blockquote p { margin: 0; }
.giornata-frase figcaption { margin-top: .1rem; font-size: .82rem; }
.giornata-latino { margin-top: .15rem; font-size: .82rem; color: var(--muted); max-width: 70ch; }
.giornata-latino > summary { cursor: pointer; color: var(--accent); width: max-content; min-height: 1.5rem; }
.giornata-latino p { margin: .25rem 0 0; }
.giornata-latino p[lang="la"] { font-style: italic; color: var(--ink); }
.giornata.ridotta .giornata-frase, .giornata.ridotta .giornata-latino { display: none; }
.giornata.ridotta .giornata-testa { align-items: center; }
.giornata.ridotta .giornata-icona { width: 2rem; height: 2rem; }
.giornata.ridotta .giornata-titoli h2 { margin-top: 0; }
.giornata-corpo { margin-top: .9rem; }
.giornata-corpo[hidden] { display: none; }
/* «La situazione adesso»: i bollini */
.giornata-sit-titolo { margin: 0 0 .35rem; font-size: .82rem; font-weight: 650; color: var(--muted); }
.giornata-bollini { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.giornata-bollino { display: inline-flex; align-items: center; gap: .4rem; min-height: 2rem; padding: .25rem .75rem; border-radius: 99px; border: 1px solid var(--line-strong);
  font-size: .86rem; font-weight: 600; line-height: 1.25; color: var(--ink); background: var(--surface-2); text-decoration: none; }
a.giornata-bollino:hover { text-decoration: underline; }
.giornata-bollino .icona { width: 1rem; height: 1rem; }
.giornata-bollino.critica { color: var(--err); background: var(--err-soft); border-color: color-mix(in srgb, var(--err) 45%, transparent); }
.giornata-bollino.attenzione { color: var(--warn); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.giornata-bollino.occhio { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.giornata-tutto-ok { display: flex; align-items: center; gap: .4rem; margin: 0; color: var(--ok); font-weight: 600; font-size: .9rem; }
/* il campo «Cosa vuoi fare oggi?» e le domande pronte */
.giornata-campo { margin-top: 1rem; }
/* Ale 29/10/2026 dal simulatore: «nella casella "scrivi una domanda ..." forse è meglio mettere un fondino diverso così spezza meglio la
 * videata e si vede dove scrivere». L'area per scrivere (la domanda, «Chiedi», le domande pronte) sta in una fascia con lo sfondo
 * --surface-2 e un filo sopra e sotto; il campo resta chiaro (--surface) con il bordo --line-strong, che sulla fascia ha almeno 3:1 in tutti
 * gli stili, chiari e scuri. Nella colonna e nel pannello del telefono la fascia va da un bordo all'altro; nella scheda della home e' un
 * riquadro. In Alto contrasto il filo e' il bordo forte */
.giornata-campo { padding: .8rem .9rem .9rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); }
.giornata-pannello .giornata-campo { margin-left: -.9rem; margin-right: -.9rem; border-width: 1px 0; border-radius: 0; }
[data-stile="contrasto"] .giornata-campo { border-color: var(--line-strong); }
.giornata-campo > label { display: block; margin-bottom: .35rem; font-size: 1rem; }
.giornata-riga { display: flex; gap: .5rem; align-items: flex-end; }
.giornata-riga textarea { flex: 1 1 auto; min-width: 0; min-height: 2.75rem; max-height: 9.5rem; resize: none; overflow-y: auto; line-height: 1.45; padding: .55rem .75rem; }
.giornata-riga .btn { flex: none; min-height: 2.75rem; }
.giornata-aiuto, .giornata-stato { margin: .3rem 0 0; font-size: .82rem; color: var(--muted); }
.giornata-aiuto[hidden], .giornata-stato[hidden] { display: none; }
.giornata-stato.err { color: var(--err); font-weight: 600; }
.giornata-pronte { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; align-items: flex-start; }
button.giornata-pronta, summary.giornata-pronta { font: inherit; font-size: .86rem; line-height: 1.3; color: var(--accent); background: var(--surface); white-space: normal; text-align: left;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)); padding: .38rem .8rem; min-height: 2rem; cursor: pointer; }
button.giornata-pronta:hover, summary.giornata-pronta:hover, .giornata-altre[open] > summary.giornata-pronta { background: var(--accent-soft); }
summary.giornata-pronta { list-style: none; display: inline-block; }
summary.giornata-pronta::-webkit-details-marker { display: none; }
.giornata-altre .giornata-pronte { margin-top: .4rem; }
.giornata-vai { margin-top: .5rem; }
.giornata-vai[hidden] { display: none !important; }
@media (min-width: 40.01em) { .giornata-vai { display: none !important; } }
/* la nota sotto il campo, «Come funziona» e l'avviso della prima apertura (li scrive nucleo/giornata_ia.php) */
.giornata-nota { margin: .8rem 0 0; font-size: .82rem; color: var(--muted); }
.giornata-nota p { margin: 0; }
.giornata-come { margin-top: .25rem; }
.giornata-come > summary { cursor: pointer; color: var(--accent); width: max-content; max-width: 100%; }
.giornata-come[open] { padding: .5rem .75rem .6rem; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-2); color: var(--ink); }
.giornata-come ul, .giornata-come ol { margin: .3rem 0 0; padding-left: 1.2rem; }
.giornata-avviso { margin: 0 0 .9rem; padding: .7rem .9rem; border-radius: var(--r-s); background: var(--accent-soft); color: var(--ink); font-size: .9rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.giornata-avviso p { margin: 0 0 .5rem; }
.giornata-avviso form, .giornata-avviso .bottoni { margin: .4rem 0 0; }
/* la conversazione di oggi: una risposta per domanda, dalla piu' recente */
.giornata-conversazione { margin-top: 1rem; display: grid; gap: 1rem; }
.giornata-conversazione:empty { display: none; }
.giornata-scambio { border-top: 1px solid var(--line); padding-top: .9rem; scroll-margin-top: .75rem; min-width: 0; }
.giornata-scambio:focus { outline: none; }
.giornata-scambio:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.giornata-domanda { margin: 0 0 .25rem; color: var(--muted); font-size: .88rem; overflow-wrap: anywhere; }
.giornata-domanda-chi { font-weight: 600; }
.scheda .giornata-scambio h3 { margin: 0 0 .5rem; font-size: 1.02rem; }
.giornata-scambio h4 { margin: .9rem 0 .45rem; font-size: .92rem; font-weight: 650; }
.giornata-scambio h5 { margin: .7rem 0 .35rem; font-size: .86rem; font-weight: 650; color: var(--muted); }
.giornata-elenco { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.giornata-fatto { padding: .55rem .75rem; border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: var(--r-s); background: var(--surface); min-width: 0; }
.giornata-fatto.critica { border-left-color: var(--err); }
.giornata-fatto.attenzione { border-left-color: var(--warn); }
.giornata-fatto.occhio { border-left-color: var(--accent); }
.giornata-fatto p { margin: 0; overflow-wrap: anywhere; }
.giornata-fatto-testa { font-weight: 600; }
.giornata-gravita { margin-right: .15rem; }
.giornata-fatto-titolo { font-weight: 400; color: var(--muted); }
.giornata-fatto .giornata-fatto-dati { margin-top: .15rem; font-size: .8rem; color: var(--muted); }
.giornata-fatto .giornata-perche, .giornata-fatto .giornata-passo { margin-top: .25rem; font-size: .88rem; }
.giornata-casi { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .85rem; }
.giornata-casi a { display: inline-block; min-height: 24px; line-height: 24px; }          /* WCAG 2.5.8: bersagli di almeno 24 px */
.giornata-fatto .giornata-azioni { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.giornata-azioni .btn { white-space: normal; text-align: left; }
.giornata-altri, .giornata-letti { margin: .45rem 0 0; font-size: .82rem; color: var(--muted); }
.giornata-numeri ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
.giornata-numeri li { padding: .45rem .65rem; border-radius: var(--r-s); background: var(--surface-2); }
.giornata-numeri li, .giornata-numeri li > a { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.giornata-numeri li > a { flex: 1 1 auto; }
.giornata-numeri b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.giornata-frase-fissa { margin: .6rem 0 0; }
.giornata-pulsanti { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 0; }
.giornata-fonti ul { margin: 0; padding-left: 1.1rem; }
.giornata-conoscenza { display: flex; gap: .4rem; align-items: flex-start; margin: .7rem 0 0; font-size: .86rem; }
.giornata-conoscenza .icona { color: var(--accent); margin-top: .1rem; }
/* unione (28/10/2026): i pulsanti delle risposte possono portare un titolo lungo, scritto dalla persona («Ti ho preparato il promemoria: …»):
 * vanno a capo (.btn non va a capo di suo) e non escono mai dalla scheda, anche a 375 px; lo stesso per il modulo «Non utile…» */
.giornata-pulsanti .btn, .giornata-importante .btn, .giornata-piano .btn, .giornata-scambio .giornata-fonti .btn { white-space: normal; text-align: left; max-width: 100%; }
.giornata-piede form.giornata-giudizio, .giornata-giudizio .conferma-in-linea { min-width: 0; max-width: 100%; }
.giornata-giudizio select { max-width: 100%; min-width: 0; }
/* mentre l'IA scrive: il segnaposto con l'icona che «pensa» (app.js lo sostituisce con il commento) */
.giornata-attesa { display: flex; align-items: center; gap: .6rem; margin-top: .9rem; padding: .6rem .8rem; border: 1px dashed var(--line-strong); border-radius: var(--r-s); color: var(--muted); }
.giornata-attesa p { margin: 0; }
.giornata-attesa .giornata-icona { width: 1.9rem; height: 1.9rem; }
/* il commento dell'IA (nucleo/giornata_ia.php): riquadro tenue, la riga fissa sotto, le parti da verificare segnate */
.giornata-commento { margin-top: .9rem; padding: .75rem .9rem; border-radius: var(--r-s); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); overflow-wrap: anywhere; }
.giornata-commento h4 { margin: .7rem 0 .3rem; font-size: .9rem; }
.giornata-commento h4:first-child { margin-top: 0; }
.giornata-commento p { margin: 0 0 .4rem; }
.giornata-in-breve { margin: 0 0 .4rem; font-weight: 500; }
ul.giornata-importante, ol.giornata-importante, ul.giornata-piano, ol.giornata-piano, ul.giornata-consigli, ol.giornata-consigli { margin: 0 0 .4rem; padding-left: 1.2rem; }
.giornata-importante li, .giornata-piano li, .giornata-consigli li { margin: .2rem 0; }
.giornata-importante .btn, .giornata-piano .btn { margin: .15rem .25rem 0 0; }
.giornata-commento-riga { margin: .55rem 0 0; font-size: .78rem; color: var(--muted); }
.giornata-commento .giornata-commento-riga { margin-bottom: 0; }
.giornata-rif { font-weight: 600; }
.giornata-da-verificare { padding: 0 .25rem; border-radius: 4px; background: var(--warn-soft); color: var(--warn); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.giornata-motivo { margin: .9rem 0 0; padding: .6rem .8rem; border-radius: var(--r-s); background: var(--warn-soft); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); }
/* il piede: chi ha risposto, «da allora N novità», Commentalo, Utile / Non utile */
.giornata-piede { display: flex; flex-wrap: wrap; gap: .45rem 1rem; align-items: center; margin-top: .8rem; padding-top: .55rem; border-top: 1px dashed var(--line); font-size: .84rem; color: var(--muted); }
.giornata-piede p, .giornata-piede form { margin: 0; }
.giornata-ha-risposto { flex: 1 1 100%; }
.giornata-novita-da, form.giornata-giudizio { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.giornata-novita-da > span { color: var(--warn); font-weight: 600; }
.giornata-giudizio select { width: auto; min-height: 2rem; padding: .2rem .5rem; }
.giornata-prima { margin-top: .2rem; font-size: .86rem; }
.giornata-prima > summary { cursor: pointer; color: var(--accent); width: max-content; max-width: 100%; }
.giornata-prima ul { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .35rem; }
.giornata-svuota { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1rem; padding-top: .7rem; border-top: 1px solid var(--line); }
/* il riquadro «Situazioni critiche». Ale 29/10/2026: «in home il widget situazioni critiche ha troppe informazioni è troppo lungo»: un caso
 * per riga sul computer, al massimo due sul telefono, con la gravita' scritta, il titolo che apre il caso e, in grigio, di cosa si tratta
 * (il titolo scritto a mano tagliato o il nome della regola); sotto, «e altre N» e «Chiedi come risolverle» sulla stessa riga (l'errore del
 * pulsante, se c'e', va a capo: .widget davanti, perche' vinca su p.giornata-stato[data-giornata-errore] piu' giu'). Gli indirizzi nascosti
 * (.giornata-segno, .giornata-altri-casi) servono solo al segno delle novita': nessuna regola qui li deve mostrare */
.widget .giornata-critiche { gap: .3rem; }
.widget .giornata-critiche .giornata-fatto { padding: .3rem .55rem; }
.giornata-critiche .giornata-fatto-testa { line-height: 1.4; }
.giornata-critiche .giornata-fatto-regola { font-weight: 400; color: var(--muted); }
.giornata-critiche-piede { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .8rem; margin-top: auto; padding-top: .6rem; }
.giornata-critiche-piede .giornata-altri { margin: 0; }
.widget .giornata-critiche-piede .piu { margin: 0; padding: 0; }
.widget .giornata-critiche-piede > [data-giornata-errore] { flex: 1 1 100%; margin: 0; }
/* Setup -> Cicerone */
.giornata-setup > .scheda + .scheda { margin-top: 1.25rem; }
.giornata-setup-pronta + .giornata-setup-pronta { margin-top: .7rem; }
.giornata-setup-pronta legend small { font-weight: 400; color: var(--muted); }
.giornata-regole { margin-top: 1rem; }
.giornata-regole > summary { cursor: pointer; color: var(--accent); }
.giornata-regole .scorri { margin-top: .5rem; }
.giornata-anteprima { margin-top: .6rem; padding: .6rem .8rem; border: 1px dashed var(--line); border-radius: var(--r-s); }
.giornata-anteprima .piccolo { margin: 0; }
/* 6.4: Cicerone da ogni pagina (sviluppi/21 §2 e §15). Ale 29/10/2026: «ti avevo detto di trovare una soluzione per fare in modo che il menù di
 * cicerone rimanesse sempre presente mentre si naviga»; per il telefono «se sul mobile ti crea problemi fallo solo sul desktop».
 * - il pulsante «Cicerone» della barra (moduli/giornata.php, giornata_barra): l'icona di Cicerone della misura delle altre, il numero delle
 *   situazioni critiche come quello del Cestino; sotto i 64em solo l'icona e il numero, sotto i 40em sta in cima al menu (.giornata-menu-voce);
 * - il pannello (giornata_pannello_html), un dialogo non modale come il riquadro della chat: sotto la barra e la striscia del percorso
 *   (--alto-fisso, piu' quello che sta sopra la barra finche' non scorre via: --giornata-pannello-su, da app.js); da 80em la pagina si
 *   stringe e il pannello le sta accanto, fra 40 e 80em sta sopra la pagina, sul telefono a tutto schermo. Sotto la barra (20) e la striscia
 *   del percorso (19): z-index 18, cosi' la tendina di Feedback, la ricerca e «I passi» gli passano sopra. Niente transizioni: con «meno
 *   movimento» non c'e' niente da fermare */
:root { --giornata-pannello-w: 26rem; }
.giornata-barra { position: relative; }
.giornata-barra .giornata-icona, .giornata-menu-voce .giornata-icona { width: 1.25em; height: 1.25em; color: inherit; }
.giornata-barra .conta { position: absolute; top: -.35rem; right: -.35rem; min-width: 1.1rem; padding: 0 .25rem; border-radius: 99px; background: var(--err); color: var(--surface);
  font-size: .68rem; font-weight: 700; line-height: 1.1rem; text-align: center; }
.giornata-barra .conta[hidden], .giornata-menu-voce .conta[hidden] { display: none; }
/* sotto i 64em le scritte dei pulsanti della barra si nascondono (.barra-aiuti .barra-pulsante > span): il numero resta */
@media (max-width: 63.99em) { .barra-aiuti .giornata-barra > .conta { width: auto; height: auto; overflow: visible; clip: auto; white-space: nowrap; } }
.giornata-menu-voce { display: none; }
@media (max-width: 40em) {
  .barra-aiuti .giornata-barra { display: none; }
  .giornata-menu-voce { display: block; padding-bottom: .15rem; margin-bottom: .15rem; border-bottom: 1px solid color-mix(in srgb, var(--nav-muted) 30%, transparent); }
  .giornata-menu-voce > a { min-height: 2.75rem; }
}
.giornata-pannello { position: fixed; z-index: 18; right: 0; bottom: 0; top: calc(var(--alto-fisso) + var(--giornata-pannello-su, 0px)); width: min(var(--giornata-pannello-w), calc(100vw - 3rem));
  display: flex; flex-direction: column; background: var(--surface); color: var(--ink); border-left: 1px solid var(--line-strong); box-shadow: -10px 0 30px rgb(0 0 0 / .16); }
.giornata-pannello[hidden] { display: none; }
.giornata-pannello:focus, .giornata-pannello:focus-visible { outline: none; }     /* il fuoco va sul dialogo solo per dirne il nome: non e' un comando */
.giornata-pannello-testa { flex: none; display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem .45rem .9rem; border-bottom: 1px solid var(--line); }
.giornata-pannello-testa .giornata-icona { width: 1.9rem; height: 1.9rem; }
.giornata-pannello-testa h2 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 1.05rem; font-weight: 650; }
.giornata-pannello-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.giornata-pannello-corpo > p { margin: 1rem; }
.giornata-pannello .scheda.giornata { margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: .8rem .9rem 1.4rem; }
.giornata-pannello .giornata-corpo { margin-top: 0; }
.giornata-pannello .giornata-numeri ul { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); }
.giornata-pannello .giornata-scambio { scroll-margin-top: .5rem; }
/* Ale 29/10/2026 alle 14:05: la colonna «retraibile»: le sezioni delle risposte si aprono e si chiudono dal titolo (moduli/giornata.php,
 * giornata_vista_sezioni_chiuse); la freccia gira quando la sezione e' aperta */
.giornata-sezione > summary { display: flex; align-items: center; gap: .45rem; min-height: 24px; cursor: pointer; list-style: none; margin: .55rem 0 .3rem; }
.giornata-sezione > summary::-webkit-details-marker { display: none; }
.giornata-sezione > summary::before { content: ""; flex: none; width: .45rem; height: .45rem; margin: 0 .1rem 0 .15rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); color: var(--accent); }
.giornata-sezione[open] > summary::before { transform: rotate(45deg); }
.giornata-sezione > summary h4 { margin: 0; }
.giornata-sezione > summary:hover h4 { text-decoration: underline; }
@media (pointer: coarse) { .giornata-sezione > summary { min-height: 2.75rem; } }
/* Ale 29/10/2026 alle 14:05: «quando clicco nei link [...] mantieni in alto il link utilizzato [...] e magari lo evidenzia con uno sfondo
 * diverso». Il collegamento usato per ultimo (app.js, gioPanUltimo): sfondo e bordo a sinistra, non solo il colore; il testo «l'ultimo che
 * hai aperto» per i lettori di schermo. Testo scuro su --accent-soft, la coppia gia' usata per il percorso consigliato */
.giornata-pannello a.giornata-ultimo { background: var(--accent-soft); color: var(--ink); box-shadow: inset 4px 0 0 var(--accent); border-radius: var(--r-s);
  padding: .1rem .4rem .1rem .6rem; text-decoration: underline; }
[data-stile="contrasto"] .giornata-pannello a.giornata-ultimo { outline: 2px solid var(--accent); outline-offset: 1px; }
/* in Alto contrasto il bordo qui sopra copriva il fuoco della tastiera (WCAG 2.4.7): con il fuoco, l'anello di sempre */
[data-stile="contrasto"] .giornata-pannello a.giornata-ultimo:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (min-width: 40.01em) { body.giornata-pannello-aperto .in-cima { right: calc(min(var(--giornata-pannello-w), 100vw - 3rem) + 1rem); } }
/* verifica dell'unione del 29/10/2026: sotto i 64em gli avvisi (i promemoria, anche quello della scadenza di un'attivita') coprivano Cicerone
 * aperto («Chiudi» fra 40 e 64em, il campo e «Chiedi» sul telefono). Fra 40 e 64em stanno a sinistra della colonna, sulla pagina (che con
 * la colonna aperta e' ferma); sul telefono in alto, sotto la testa di Cicerone, e il corpo di Cicerone lascia libera in cima la loro
 * altezza (--avvisi-h, da app.js), anche quando il fuoco ci scorre sopra */
@media (min-width: 40.01em) and (max-width: 63.99em) {
  body.giornata-pannello-aperto .avvisi-pila { right: calc(min(var(--giornata-pannello-w), 100vw - 3rem) + 1rem);
    width: min(24rem, calc(100vw - min(var(--giornata-pannello-w), 100vw - 3rem) - 2rem)); }
}
@media (max-width: 40em) {
  body.giornata-pannello-aperto .avvisi-pila { top: calc(var(--barra-h) + .4rem); bottom: auto; }
  body.giornata-pannello-aperto .giornata-pannello-corpo { padding-top: var(--avvisi-h, 0px); scroll-padding-top: var(--avvisi-h, 0px); }
}
/* Ale 29/10/2026 alle 8:45: «sul desktop [...] la schermata principale diventa in due videate. la principale come è adesso e una a destra,
 * tipo quella del menù di sinistra». Da 64em la colonna sta a destra come il menu a sinistra: a tutta altezza (dalla cima della pagina,
 * sotto la barra del credito finche' c'e': --giornata-pannello-su), accanto alla pagina e mai sopra; la pagina in mezzo, barra compresa,
 * si stringe. body.giornata-pannello-pronto (giornata_pannello_pronto) la disegna gia' al suo posto prima che arrivi il JavaScript */
@media (min-width: 64em) {
  :root { --giornata-pannello-w: clamp(20rem, 26vw, 26rem); }
  body.giornata-pannello-aperto .corpo, body.giornata-pannello-pronto .corpo { padding-right: var(--giornata-pannello-w); }
  .giornata-pannello { top: var(--giornata-pannello-su, 0px); width: var(--giornata-pannello-w); z-index: 21; box-shadow: none; border-left-color: var(--line); }
  body.giornata-pannello-pronto .giornata-pannello[hidden] { display: flex; }
  .giornata-pannello-testa { min-height: var(--barra-h); }
  body.giornata-pannello-aperto .avvisi-pila, body.giornata-pannello-aperto .scadenza { right: calc(var(--giornata-pannello-w) + 1rem); }
  /* con la colonna la barra e' piu' stretta: la ricerca tiene almeno 9rem (axe target-size: prima in home scendeva a pochi pixel) */
  body.giornata-pannello-aperto .cerca-globale, body.giornata-pannello-pronto .cerca-globale { min-width: 9rem; }
}

/* Verifica del 29/10/2026: con la colonna di Cicerone aperta sul computer i pulsanti della barra finivano sotto la colonna e il titolo
 * spariva (a 1024-1366 px: «Personalizza», «Nuova riunione», «Esci»...; WCAG 2.4.11). Come dice sviluppi/21 §2, con la colonna aperta il menu
 * a sinistra passa alle sole icone (le stesse regole del menu ridotto, 3.10: circa 220 px in piu' per la pagina); le azioni della pagina
 * scendono nella pagina (.azioni-pagina) invece di stare nella barra; «Esci» della barra si nasconde (resta in fondo al menu); il titolo tiene
 * almeno 6rem. app.js mette anche i nomi delle voci nei suggerimenti (nomiMenu) */
@media (min-width: 64em) {
  body.giornata-pannello-aperto .app, body.giornata-pannello-pronto .app { grid-template-columns: 4.6rem 1fr; }
  body.giornata-pannello-aperto .riduci-menu .icona, body.giornata-pannello-pronto .riduci-menu .icona { transform: rotate(180deg); }
  body.giornata-pannello-aperto .laterale, body.giornata-pannello-pronto .laterale { overflow-x: hidden; }
  body.giornata-pannello-aperto .marchio-riga, body.giornata-pannello-pronto .marchio-riga { flex-direction: column; padding: .8rem 0 .4rem; gap: .4rem; }
  body.giornata-pannello-aperto .marchio, body.giornata-pannello-pronto .marchio { padding: 0; }
  body.giornata-pannello-aperto .riduci-menu, body.giornata-pannello-pronto .riduci-menu { margin: 0; }
  body.giornata-pannello-aperto .laterale .sezioni, body.giornata-pannello-pronto .laterale .sezioni { padding: .25rem .5rem; }
  body.giornata-pannello-aperto .laterale .sezioni a, body.giornata-pannello-pronto .laterale .sezioni a, body.giornata-pannello-aperto .laterale .gruppo > summary, body.giornata-pannello-pronto .laterale .gruppo > summary { position: relative; justify-content: center; padding: .62rem 0; }
  body.giornata-pannello-aperto .marchio > span:last-child, body.giornata-pannello-pronto .marchio > span:last-child, body.giornata-pannello-aperto .laterale .sezioni a > span:not(.conta), body.giornata-pannello-pronto .laterale .sezioni a > span:not(.conta),
  body.giornata-pannello-aperto .laterale .gruppo > summary > span:not(.conta), body.giornata-pannello-pronto .laterale .gruppo > summary > span:not(.conta), body.giornata-pannello-aperto .chi > span:last-child, body.giornata-pannello-pronto .chi > span:last-child,
  body.giornata-pannello-aperto .esci > span, body.giornata-pannello-pronto .esci > span, body.giornata-pannello-aperto .interruttore span, body.giornata-pannello-pronto .interruttore span {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.giornata-pannello-aperto .laterale .gruppo > summary .icona:last-child, body.giornata-pannello-pronto .laterale .gruppo > summary .icona:last-child { display: none; }
  body.giornata-pannello-aperto .laterale .sezioni .conta, body.giornata-pannello-pronto .laterale .sezioni .conta { position: absolute; top: .1rem; right: .15rem; margin: 0; min-width: 1.1rem; padding: 0 .25rem;
    font-size: .66rem; line-height: 1.1rem; }
  body.giornata-pannello-aperto .laterale .gruppo > ul, body.giornata-pannello-pronto .laterale .gruppo > ul { margin: .1rem 0 .3rem; padding: .1rem 0; border-left: 0; border-radius: var(--r-s);
    background: color-mix(in srgb, var(--nav-muted) 14%, transparent); }
  body.giornata-pannello-aperto .laterale-piede, body.giornata-pannello-pronto .laterale-piede { padding: .6rem .4rem; justify-items: center; }
  body.giornata-pannello-aperto .interruttore, body.giornata-pannello-pronto .interruttore { flex-direction: column; border-radius: var(--r-s); }
  body.giornata-pannello-aperto .interruttore button, body.giornata-pannello-pronto .interruttore button { padding: .4rem .5rem; }
  body.giornata-pannello-aperto .chi, body.giornata-pannello-pronto .chi, body.giornata-pannello-aperto .esci, body.giornata-pannello-pronto .esci { justify-content: center; }
  /* 29/10/2026, controllo nel simulatore (Ale: «l'icona esci anche in alto tutta a destra dopo personalizza»): «Esci» resta nella barra
   * anche con la colonna aperta, sempre l'ultimo a destra; scendono nella pagina gli altri pulsanti */
  body.giornata-pannello-aperto .barra > .azioni, body.giornata-pannello-pronto .barra > .azioni { display: none !important; }
  body.giornata-pannello-aperto .azioni-pagina, body.giornata-pannello-pronto .azioni-pagina { display: flex !important; }
  body.giornata-pannello-aperto .barra h1, body.giornata-pannello-pronto .barra h1 { min-width: 6rem; }
  /* il menu e' alle icone per la colonna, non per la preferenza: il pulsante che lo riduce o lo allarga qui non serve */
  body.giornata-pannello-aperto .riduci-menu, body.giornata-pannello-pronto .riduci-menu { display: none; }
  body.giornata-pannello-aperto .barra, body.giornata-pannello-pronto .barra { padding: 0 1rem; }
  /* verifica dell'unione del 29/10/2026: l'icona e il riquadro della chat seguono il menu alle icone, come con la preferenza della 3.10
   * (prima restavano a 320 px, in mezzo alla pagina, sopra «Guida» nel piede e sui campi del kanban) */
  body.giornata-pannello-aperto .chat-box-icona, body.giornata-pannello-pronto .chat-box-icona,
  body.giornata-pannello-aperto .chat-box-pannello, body.giornata-pannello-pronto .chat-box-pannello { left: calc(4.6rem + 1.5rem); }
}
/* fino a 120em, con la colonna aperta, i pulsanti della barra hanno solo l'icona (il nome resta per i lettori di schermo), come sotto i 64em */
@media (min-width: 64em) and (max-width: 119.99em) {
  body.giornata-pannello-aperto .barra-aiuti .barra-pulsante > span, body.giornata-pannello-pronto .barra-aiuti .barra-pulsante > span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.giornata-pannello-aperto .barra-aiuti .giornata-barra > .conta, body.giornata-pannello-pronto .barra-aiuti .giornata-barra > .conta {
    width: auto; height: auto; overflow: visible; clip: auto; white-space: nowrap; }
}
/* 29/10/2026, verifica dell'unione e controllo nel simulatore: anche con la colonna CHIUSA, dopo il pulsante «Cicerone» (6.4) e «Esci» (6.3),
 * la barra non ci stava piu': fra 1024 e 1180 px la pagina scorreva di lato e «Esci» finiva fuori dallo schermo; a 1366 px, in home, il
 * titolo diventava «H.» e la ricerca «Cerca… (prem». Le stesse regole della colonna aperta, per gradi:
 * - fino a 100em (fino a 120em con il testo Grande o Molto grande) i pulsanti della barra hanno solo l'icona (il nome resta per i lettori di
 *   schermo e nel suggerimento; il numero di Cicerone resta), il titolo tiene almeno 6rem e la ricerca almeno 9rem;
 * - fino a 80em (fino a 100em con Grande, 120em con Molto grande) anche le azioni della pagina («Personalizza», «Nuova riunione»...)
 *   scendono nella pagina. «Esci» resta sempre l'ultimo a destra. */
@media (min-width: 64em) and (max-width: 99.99em) {
  .barra-aiuti .barra-pulsante > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .barra-aiuti .giornata-barra > .conta { position: absolute; width: auto; height: auto; overflow: visible; clip: auto; white-space: nowrap; }
}
@media (min-width: 64em) and (max-width: 119.99em) {
  [data-testo$="grande"] .barra-aiuti .barra-pulsante > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  [data-testo$="grande"] .barra-aiuti .giornata-barra > .conta { position: absolute; width: auto; height: auto; overflow: visible; clip: auto; white-space: nowrap; }
  .barra h1 { min-width: 6rem; }
  .cerca-globale { min-width: 9rem; }
}
@media (min-width: 64em) and (max-width: 79.99em) {
  .barra > .azioni { display: none !important; }
  .azioni-pagina { display: flex !important; }
}
@media (min-width: 64em) and (max-width: 99.99em) {
  [data-testo$="grande"] .barra > .azioni { display: none !important; }
  [data-testo$="grande"] .azioni-pagina { display: flex !important; }
}
@media (min-width: 64em) and (max-width: 119.99em) {
  [data-testo="molto-grande"] .barra > .azioni { display: none !important; }
  [data-testo="molto-grande"] .azioni-pagina { display: flex !important; }
}
/* con il testo Molto grande e la colonna aperta, sotto i 1180 px, titolo e ricerca un po' piu' stretti: cosi' anche «Esci» ci sta */
@media (min-width: 64em) and (max-width: 73.74em) {
  [data-testo="molto-grande"] body.giornata-pannello-aperto .barra h1, [data-testo="molto-grande"] body.giornata-pannello-pronto .barra h1 { min-width: 4rem; }
  [data-testo="molto-grande"] body.giornata-pannello-aperto .cerca-globale, [data-testo="molto-grande"] body.giornata-pannello-pronto .cerca-globale { min-width: 6rem; }
}
/* verifica del 29/10/2026 con le barre di scorrimento vere di Windows (15 px, che la misura della finestra conta ma la pagina no): fra 1024
 * e 1039 px, con il testo Molto grande, «Esci» usciva di qualche pixel dallo schermo (colonna chiusa) o finiva sotto la colonna (aperta).
 * Qui titolo e ricerca piu' stretti anche con la colonna chiusa, e la ricerca ancora un po' con la colonna aperta */
@media (min-width: 64em) and (max-width: 64.99em) {
  [data-testo="molto-grande"] .barra h1 { min-width: 4rem; }
  [data-testo="molto-grande"] .cerca-globale { min-width: 6rem; }
  [data-testo="molto-grande"] body.giornata-pannello-aperto .cerca-globale, [data-testo="molto-grande"] body.giornata-pannello-pronto .cerca-globale { min-width: 5rem; }
}
/* sul telefono a tutto schermo, come la chat: sopra tutto tranne gli avvisi e la scadenza della sessione; la pagina sotto non scorre (e
 * app.js la rende inerte); «Chiudi» alto 44 px */
@media (max-width: 40em) {
  .giornata-pannello { inset: 0; top: 0; width: auto; z-index: 57; border-left: 0; box-shadow: none; }
  body.giornata-pannello-aperto { overflow: hidden; }
  .giornata-pannello-testa { min-height: var(--barra-h); padding: .3rem .5rem .3rem .9rem; }
}
@media (max-width: 40em), (pointer: coarse) { .giornata-pannello-chiudi { min-height: 2.75rem; min-width: 2.75rem; } }
@media print { .giornata-pannello, .giornata-barra, .giornata-menu-voce { display: none !important; } }
@media (max-width: 40em) {
  /* 29/10/2026 (WCAG 1.4.10): due colonne finche' ci stanno, una con il testo Grande o Molto grande su un telefono stretto (con «1fr 1fr» i
   * bollini uscivano dallo schermo e la pagina scorreva di lato) */
  .giornata-bollini { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); }
  .giornata-bollino { width: 100%; min-height: 2.75rem; border-radius: var(--r-s); }
  .giornata-riga { flex-wrap: wrap; }
  .giornata-riga .btn { flex: 1 1 100%; }
  button.giornata-pronta, summary.giornata-pronta { min-height: 2.75rem; }
  /* sul telefono icona, titolo e «Riduci» su una riga; la frase sotto, a tutta larghezza */
  .giornata-testa { display: grid; grid-template-columns: auto 1fr auto; column-gap: .6rem; align-items: center; }
  .giornata-titoli { display: contents; }
  .giornata-testa > .giornata-icona { grid-column: 1; grid-row: 1; width: 2.25rem; height: 2.25rem; }
  .scheda .giornata-titoli h2 { grid-column: 2; grid-row: 1; margin: 0; }
  .giornata-riduci { grid-column: 3; grid-row: 1; }
  .giornata-riga-ridotta, .giornata-frase, .giornata-latino { grid-column: 1 / -1; }
  .giornata-numeri ul { grid-template-columns: 1fr 1fr; }
}
/* verifiche del 28/10/2026 (Ale 28/10/2026: «Per ora mi sembra ok. Ma devo vedere quando sarà tutto pronto. Procedi.»):
 * - WCAG 2.5.8: «Come funziona», «In latino», «Le altre domande di oggi» e le risposte di prima alte almeno 24 px (prima 20-21), 44 sul
 *   telefono (prima 42-43);
 * - WCAG 2.4.11: l'icona fissa della chat in basso non copre il fuoco ne' le ancore (anche «Manda» e «Altre domande» sul telefono);
 * - le risposte di prima chiuse (una sola aperta per intero), il motivo senza commento in tono neutro, l'aiuto sotto il campo con l'IA */
html { scroll-padding-bottom: 5rem; }
.giornata-latino > summary, .giornata-come > summary, .giornata-prima > summary, .giornata-precedente > summary { min-height: 24px; line-height: 24px; }
@media (pointer: coarse) { button.giornata-pronta, summary.giornata-pronta { min-height: 2.75rem; }
  .giornata-latino > summary, .giornata-come > summary, .giornata-prima > summary, .giornata-precedente > summary { min-height: 2.75rem; line-height: 2.75rem; padding: 0; } }
.giornata-precedente { border-top: 1px solid var(--line); padding-top: .6rem; min-width: 0; }
.giornata-precedente > summary { cursor: pointer; color: var(--accent); font-size: .9rem; overflow-wrap: anywhere; }
.giornata-precedente[open] > summary { margin-bottom: .4rem; }
.giornata-precedente > .giornata-scambio { border-top: 0; padding-top: 0; }
.giornata-motivo.giornata-motivo-info { background: var(--surface-2); color: var(--muted); border-color: var(--line); }
.giornata-ia-ferma { margin: 0; color: var(--muted); }
.giornata-aiuto-ia { color: var(--muted); }
.giornata-casi a { overflow-wrap: anywhere; }
p.giornata-stato[data-giornata-errore] { margin: .35rem 0 0; }
/* 29/10/2026, verifica del riquadro «Situazioni critiche» in una riga per caso (WCAG 2.4.11, errore F110): con Maiuscolo+Tab il fuoco poteva
 * finire tutto sotto la barra in alto, che resta ferma (le righe, alte poco piu' di 20 px, ci stanno intere). Il browser tiene libera l'altezza
 * della barra in cima a ogni scorrimento verso il fuoco o un'ancora; le ancore che gia' contavano la barra (scroll-margin-top di .testo-lungo,
 * .voce-sezione, .nota-rif, .note-pie, .giornata-scambio) ora tengono solo il loro spazio in piu', cosi' arrivano dove arrivavano prima.
 * 6.4: barra e striscia del percorso guidato insieme (--alto-fisso) */
html { scroll-padding-top: calc(var(--alto-fisso) + .75rem); }
/* 29/10/2026 (axe sulla home, WCAG 1.4.3): nello stile Alto contrasto il passaggio del mouse sul menu mescolava il giallo al 55% con il nero e
 * il testo bianco scendeva a 3,57:1 (chiaro) e 4,52:1 (scuro); ora i colori pieni della voce della pagina aperta */
[data-stile="contrasto"] .laterale .sezioni a:hover, [data-stile="contrasto"] .laterale .gruppo > summary:hover, [data-stile="contrasto"] .chi:hover,
[data-stile="contrasto"] .riduci-menu .btn:hover { background: var(--nav-active); color: var(--nav-active-ink); }
[data-stile="contrasto"] .chi:hover small { color: inherit; }
/* 29/10/2026 (WCAG 1.4.10): con il testo Grande o Molto grande, su un telefono stretto, i pulsanti della barra in alto crescevano con il testo e
 * spingevano il menu fuori dallo schermo (a 320 px la pagina scorreva di 54 px). Sul telefono restano della misura del testo normale, un po'
 * piu' vicini; il testo della pagina resta grande. [data-testo$="grande"] vale per «grande» e «molto-grande» */
@media (max-width: 40em) {
  [data-testo$="grande"] .barra { gap: 6px; padding: 0 10px; }
  [data-testo$="grande"] .apri-menu, [data-testo$="grande"] .vai-home, [data-testo$="grande"] .apri-cerca { width: 40px; height: 40px; }
  [data-testo$="grande"] .apri-menu { margin-right: -4px; }
  [data-testo$="grande"] .vai-home { margin-left: -4px; }
  [data-testo$="grande"] .apri-menu .icona, [data-testo$="grande"] .vai-home .icona, [data-testo$="grande"] .apri-cerca .icona { width: 22px; height: 22px; }
  [data-testo$="grande"] .barra-aiuti { gap: 4px; }
  [data-testo$="grande"] .barra-aiuti .barra-pulsante { font-size: 14px; padding: 4px 8px; }
}
/* l'icona animata (Ale 28/10/2026: «Fai l'icona animata»): all'apertura crescono gli steli, poi le foglie dal basso, il fumetto e i puntini, in
 * meno di due secondi, poi resta ferma; mentre l'IA scrive il commento (.pensa) i tre puntini salgono e scendono piano, uno dopo l'altro.
 * Niente lampeggi (WCAG 2.3.1): solo opacita' e un movimento di un pixel. Con «meno movimento» (sistema o profilo) resta sempre ferma. */
.giornata-icona .giornata-icona-foglia, .giornata-icona .giornata-icona-fumetto, .giornata-icona .giornata-icona-punto { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .giornata-icona.entra .giornata-icona-stelo { stroke-dasharray: 1; stroke-dashoffset: 1; animation: giornata-stelo .7s ease-out forwards; }
  .giornata-icona.entra .giornata-icona-foglia, .giornata-icona.entra .giornata-icona-fumetto, .giornata-icona.entra .giornata-icona-punto { opacity: 0; animation: giornata-cresce .45s ease-out forwards; }
  .giornata-icona.entra .f1 { animation-delay: .25s; }
  .giornata-icona.entra .f2 { animation-delay: .37s; }
  .giornata-icona.entra .f3 { animation-delay: .49s; }
  .giornata-icona.entra .f4 { animation-delay: .61s; }
  .giornata-icona.entra .f5 { animation-delay: .73s; }
  .giornata-icona.entra .giornata-icona-fumetto { animation-duration: .5s; animation-delay: .9s; }
  .giornata-icona.entra .p1 { animation-delay: 1.25s; }
  .giornata-icona.entra .p2 { animation-delay: 1.4s; }
  .giornata-icona.entra .p3 { animation-delay: 1.55s; }
  /* revisione finale del 28/10/2026: 150 giri da 1,2 secondi, cioe' i 3 minuti in cui la pagina aspetta il commento (GIORNATA_ATTESA_MAX),
   * poi l'icona si ferma da sola anche dove app.js non la ferma (senza JavaScript); prima era «infinite» */
  .giornata-icona.pensa .giornata-icona-punto { animation: giornata-pensa 1.2s ease-in-out 150; }
  .giornata-icona.pensa .p2 { animation-delay: .2s; }
  .giornata-icona.pensa .p3 { animation-delay: .4s; }
  /* Ale 29/10/2026 («ci manca l'animazione dell'icona di cicerone», poi «Più evidente»): i puntini fanno .pensa anche mentre Cicerone
   * prepara una risposta senza IA (app.js) e, quando la risposta arriva, .parla: il fumetto si gonfia appena e i puntini fanno un'onda,
   * in un secondo e mezzo; poi l'icona torna ferma */
  .giornata-icona.parla .giornata-icona-fumetto { animation: giornata-parla .5s ease-out 2; }
  .giornata-icona.parla .giornata-icona-punto { animation: giornata-pensa .6s ease-in-out 2; }
  .giornata-icona.parla .p2 { animation-delay: .1s; }
  .giornata-icona.parla .p3 { animation-delay: .2s; }
}
@keyframes giornata-parla { 0%, 100% { transform: none; } 45% { transform: scale(1.1); } }
@keyframes giornata-stelo { to { stroke-dashoffset: 0; } }
@keyframes giornata-cresce { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes giornata-pensa { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-1.1px); } }
[data-movimento="ridotto"] .giornata-icona * { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; }
@media print { .giornata-campo, .giornata-riduci, .giornata-svuota, .giornata-giudizio { display: none !important; } }
/* ------------------------------------------------------------------ 6.4 (provvisoria): il percorso guidato di Cicerone (sviluppi/21 §3, §15)
 * Ale 28/10/2026: «È sempre visibile, anche quando cambio pagina: una striscia sotto la barra in alto, sul telefono una pastiglia «2 di 5»
 * che si apre»; 29/10/2026: «Al punto 2 se sul mobile ti crea problemi fallo solo sul desktop» (GIORNATA_PASTIGLIA_TELEFONO in
 * nucleo/giornata_percorso.php). Accodato in fondo a stile.css all'unione.
 * - la striscia (computer e tablet, da 40em): ferma sotto la barra, sopra il contenuto, con il passo di adesso, «Fatto», «I passi» (una
 *   tendina) e «Chiudi»; la sua altezza la mette giornata_percorso.js in --giornata-percorso-h (0 sul telefono), che la parte comune somma
 *   a --barra-h in --alto-fisso per tutto quello che sta fermo sotto la barra (WCAG 2.4.11);
 * - la pastiglia (telefono, sotto 40em): in basso al centro fra l'icona della chat e «torna su», dentro la fascia libera in basso della
 *   pagina (scroll-padding-bottom 5rem); si apre in un foglio dal basso che lascia vedere la pastiglia (si richiude anche senza JavaScript);
 *   mentre si scrive in un campo si nasconde (body.giornata-scrive);
 * - la luce: contorno di 3 px del colore principale (contrasto di almeno 3:1, WCAG 1.4.11) e la nota con «Nascondi»; niente pagina scura;
 * - gli stati sono sempre scritti (WCAG 1.4.1), i bersagli alti almeno 24 px (44 sul telefono, WCAG 2.5.8), 320 px senza scorrimento di
 *   lato (WCAG 1.4.10); niente transizioni ne' animazioni proprie (l'icona e' quella di Cicerone, ferma con «meno movimento»). */
.giornata-percorso-striscia { position: sticky; top: var(--barra-h); z-index: 19; background: var(--surface); color: var(--ink);
  border-bottom: 1px solid var(--line); box-shadow: inset 4px 0 0 var(--accent); padding: .3rem 1rem; }
.giornata-percorso-riga { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; min-width: 0; }
.giornata-percorso-striscia .giornata-icona { width: 1.6rem; height: 1.6rem; }
.giornata-percorso-dove { flex: 1 1 18rem; min-width: 0; margin: 0; font-size: .9rem; line-height: 1.35; overflow-wrap: anywhere; }
.giornata-percorso-nome { font-weight: 650; }
.giornata-percorso-passo b { font-weight: 650; }
.giornata-percorso-comandi { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.giornata-percorso-comandi form, .giornata-percorso-voce-azioni form, .giornata-percorso-piede form { margin: 0; }
.giornata-percorso-stato { vertical-align: .05em; }
/* «Mostrami dove» c'e' solo con la luce accesa (app.js); senza JavaScript non serve */
[data-giornata-mostra][hidden] { display: none !important; }
/* verifica del 29/10/2026: «Inizia» dalla home riapre la pagina su #giornata; sotto i 64em, sopra la scheda, ci sono le azioni della pagina
 * («Installa App», «Personalizza»): con questo spazio restano intere sotto la barra invece di finirci sotto a meta' (axe target-size) */
@media (max-width: 63.99em) { #giornata { scroll-margin-top: 4.25rem; } }
.giornata-percorso-striscia.finito { box-shadow: inset 4px 0 0 var(--ok); }
/* «I passi»: una tendina sotto la striscia, a destra, che scorre se i passi sono tanti */
.giornata-percorso-tendina { position: static; }
.giornata-percorso-striscia { isolation: isolate; }
.giornata-percorso-riga { position: relative; }
.giornata-percorso-tendina > summary { list-style: none; }
.giornata-percorso-tendina > summary::-webkit-details-marker { display: none; }
.giornata-percorso-tendina[open] > summary { background: var(--surface-2); }
/* verifica del 29/10/2026: ancorato al bordo destro della riga della striscia e largo al massimo quanto lei (a 1024 px con la colonna aperta
 * la parte sinistra finiva sotto il menu) */
.giornata-percorso-tendina > .giornata-percorso-foglio { position: absolute; right: 0; top: calc(100% + .45rem); z-index: 5; width: min(32rem, 100%);
  max-height: calc(100vh - var(--barra-h) - var(--giornata-percorso-h, 0px) - 2rem); overflow-y: auto; padding: .8rem .9rem;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 10px 30px rgb(0 0 0 / .22); }
/* l'elenco numerato dei passi (striscia, pastiglia, pannello, conversazione) */
ol.giornata-percorso-elenco { margin: 0; padding: 0 0 0 1.7rem; display: grid; gap: .35rem; }
.giornata-percorso-voce { padding: .35rem .5rem; border-radius: var(--r-s); min-width: 0; }
.giornata-percorso-voce::marker { font-weight: 650; color: var(--muted); }
.giornata-percorso-voce[aria-current="step"] { background: var(--accent-soft); outline: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.giornata-percorso-voce[aria-current="step"]::marker { color: var(--accent); }
.giornata-percorso-voce p { margin: 0; overflow-wrap: anywhere; }
.giornata-percorso-voce-testa { font-weight: 600; }
.giornata-percorso-voce-testa a { display: inline-block; min-height: 24px; line-height: 24px; }
.giornata-percorso-voce.fatto .giornata-percorso-voce-testa > a, .giornata-percorso-voce.fatto .giornata-percorso-voce-testa > span:first-child { font-weight: 500; }
.giornata-percorso-nota, .giornata-percorso-chi { margin: .15rem 0 0; font-size: .85rem; color: var(--muted); }
.giornata-percorso-chi a { display: inline-block; min-height: 24px; line-height: 24px; }
.giornata-percorso-voce-azioni { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.giornata-percorso-piede { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .7rem 0 0; padding-top: .55rem; border-top: 1px dashed var(--line); }
.giornata-percorso-errore { flex: 1 1 100%; margin: .3rem 0 0; color: var(--err); font-weight: 600; font-size: .85rem; }
.giornata-percorso-domanda { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .4rem 0 0; padding: .45rem .6rem; border-radius: var(--r-s);
  background: var(--warn-soft); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); }
.giornata-percorso-domanda p { margin: 0; flex: 1 1 14rem; color: var(--ink); }
.giornata-percorso-conferma > summary, .giornata-percorso-chiudi > summary { list-style: none; }
.giornata-percorso-conferma > summary::-webkit-details-marker, .giornata-percorso-chiudi > summary::-webkit-details-marker { display: none; }
/* la proposta nella conversazione di Cicerone */
.giornata-percorso-proposta { margin-top: .6rem; padding: .7rem .85rem; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-left: 4px solid var(--accent);
  border-radius: var(--r-s); background: var(--surface); min-width: 0; }
.giornata-percorso-proposta > p { margin: 0 0 .45rem; overflow-wrap: anywhere; }
.giornata-percorso-proposta ol.giornata-percorso-elenco { margin-bottom: .2rem; }
.giornata-percorso-ia { display: flex; align-items: flex-start; gap: .4rem; padding: .4rem .6rem; border-radius: var(--r-s); background: var(--warn-soft); color: var(--warn); font-size: .86rem; font-weight: 600; }
.giornata-percorso-riassunto { font-weight: 600; }
.giornata-percorso-pulsanti .btn, .giornata-percorso-pulsanti summary.btn { white-space: normal; text-align: left; max-width: 100%; }
.giornata-percorso-altri { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .6rem; padding-top: .5rem; border-top: 1px dashed var(--line); }
.giornata-percorso-altri p { margin: 0; }
/* sotto le domande pronte della scheda: in corso (pannello), ieri, consigliato, «Percorsi guidati (N)» */
.giornata-percorsi-zona { display: grid; gap: .55rem; margin-top: .8rem; }
.giornata-percorso-ieri, .giornata-percorso-consigliato { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; padding: .5rem .7rem; border-radius: var(--r-s);
  background: var(--accent-soft); color: var(--ink); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.giornata-percorso-ieri p, .giornata-percorso-consigliato p { margin: 0; flex: 1 1 14rem; display: flex; gap: .4rem; align-items: flex-start; flex-wrap: wrap; overflow-wrap: anywhere; }
.giornata-percorso-ieri .icona { color: var(--accent); margin-top: .15rem; }
.giornata-percorsi-lista > summary, .giornata-percorso-incorso > summary { cursor: pointer; color: var(--accent); width: max-content; max-width: 100%; min-height: 24px; line-height: 24px; font-size: .9rem; }
.giornata-percorsi-lista ul { list-style: none; margin: .45rem 0 0; padding: 0; display: grid; gap: .45rem; }
.giornata-percorsi-lista li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: var(--r-s); }
.giornata-percorsi-lista li > p { margin: 0; flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.giornata-percorsi-lista li > p.piccolo { flex-basis: 100%; order: 2; }
.giornata-percorso-incorso[open] { padding: .5rem .7rem .6rem; border: 1px solid var(--line); border-radius: var(--r-s); }
.giornata-percorso-incorso ol.giornata-percorso-elenco { margin-top: .45rem; }
/* la luce sul pulsante del passo e la sua nota (giornata_percorso.js) */
.giornata-luce { outline: 3px solid var(--accent) !important; outline-offset: 3px; border-radius: var(--r-s); }
.giornata-luce-nota { position: absolute; z-index: 18; display: flex; align-items: flex-start; gap: .55rem; width: max-content; max-width: min(22rem, calc(100vw - 1rem));
  padding: .55rem .7rem; border: 2px solid var(--accent); border-radius: var(--r); background: var(--surface); color: var(--ink); box-shadow: 0 6px 20px rgb(0 0 0 / .22); font-size: .88rem; }
.giornata-luce-nota p { margin: 0; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.giornata-luce-nota .btn { flex: none; }
/* la pastiglia del telefono: nascosta sul computer, dove c'e' la striscia */
.giornata-percorso-pastiglia { display: none; }
@media (max-width: 40em) {
  .giornata-percorso-striscia { display: none; }
  .giornata-percorso-pastiglia { display: block; position: fixed; z-index: 24; left: 5rem; right: 4.6rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); text-align: center; pointer-events: none; }
  .giornata-percorso-pastiglia > summary { pointer-events: auto; display: inline-flex; align-items: center; gap: .4rem; max-width: 100%; min-height: 2.75rem; padding: .3rem .9rem;
    border-radius: 99px; border: 2px solid var(--accent); background: var(--surface); color: var(--ink); box-shadow: 0 2px 10px rgb(0 0 0 / .28);
    font-weight: 650; font-size: .9rem; line-height: 1.2; cursor: pointer; list-style: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .giornata-percorso-pastiglia > summary::-webkit-details-marker { display: none; }
  .giornata-percorso-pastiglia > summary .giornata-icona { width: 1.5rem; height: 1.5rem; flex: none; color: var(--accent); }
  .giornata-percorso-pastiglia > summary > span:not(.nascosto-vista) { overflow: hidden; text-overflow: ellipsis; }
  .giornata-percorso-pastiglia[open] > summary { background: var(--accent-soft); }
  /* il foglio dal basso: sopra la pastiglia, che resta visibile e lo richiude anche senza JavaScript */
  .giornata-percorso-pastiglia > .giornata-percorso-foglio { pointer-events: auto; position: fixed; left: 0; right: 0; bottom: calc(4.4rem + env(safe-area-inset-bottom, 0px)); z-index: 50;
    max-height: calc(100vh - var(--barra-h) - 6rem); overflow-y: auto; text-align: left; padding: .8rem 1rem 1rem; background: var(--surface); color: var(--ink);
    border-top: 3px solid var(--accent); border-radius: 14px 14px 0 0; box-shadow: 0 -10px 30px rgb(0 0 0 / .3); }
  .giornata-percorso-foglio-testa { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .55rem; }
  .giornata-percorso-foglio-testa p { margin: 0; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
  .giornata-percorso-foglio .btn, .giornata-percorso-foglio summary.btn { min-height: 2.75rem; white-space: normal; text-align: left; }
  body.giornata-scrive .giornata-percorso-pastiglia { display: none; }
  .giornata-percorso-voce-testa a, .giornata-percorso-chi a, .giornata-percorsi-lista > summary, .giornata-percorso-incorso > summary { min-height: 2.75rem; line-height: 2.75rem; }
  .giornata-percorsi-lista li, .giornata-percorso-ieri, .giornata-percorso-consigliato { align-items: stretch; }
}
@media (min-width: 64em) { .giornata-percorso-striscia { padding: .3rem 2rem; } }
/* verifica del 29/10/2026: sul telefono il piede in fondo alla pagina restava sotto la pastiglia (§3: circa 4,5rem in fondo) */
@media (max-width: 40em) { body:has(.giornata-percorso-pastiglia) .piede { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); } }
/* sugli schermi bassi (telefono di traverso, zoom al 200%) la striscia ferma toglieva un terzo dell'altezza: la pastiglia anche li' (§3: la
 * striscia solo con lo schermo alto almeno 34em) */
@media (min-width: 40.01em) and (max-height: 34em) {
  .giornata-percorso-striscia { display: none; }
  .giornata-percorso-pastiglia { display: block; position: fixed; z-index: 24; left: 5rem; right: 4.6rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); text-align: center; pointer-events: none; }
  .giornata-percorso-pastiglia > summary { pointer-events: auto; display: inline-flex; align-items: center; gap: .4rem; max-width: 100%; min-height: 2.75rem; padding: .3rem .9rem;
    border-radius: 99px; border: 2px solid var(--accent); background: var(--surface); color: var(--ink); box-shadow: 0 2px 10px rgb(0 0 0 / .28);
    font-weight: 650; font-size: .9rem; line-height: 1.2; cursor: pointer; list-style: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .giornata-percorso-pastiglia > summary::-webkit-details-marker { display: none; }
  .giornata-percorso-pastiglia > summary .giornata-icona { width: 1.5rem; height: 1.5rem; flex: none; color: var(--accent); }
  .giornata-percorso-pastiglia > .giornata-percorso-foglio { pointer-events: auto; position: fixed; left: 0; right: 0; bottom: calc(4.4rem + env(safe-area-inset-bottom, 0px)); z-index: 50;
    max-height: calc(100vh - 6rem); overflow-y: auto; text-align: left; padding: .8rem 1rem 1rem; background: var(--surface); color: var(--ink);
    border-top: 3px solid var(--accent); border-radius: 14px 14px 0 0; box-shadow: 0 -10px 30px rgb(0 0 0 / .3); }
  .giornata-percorso-foglio-testa { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .55rem; }
  .giornata-percorso-foglio-testa p { margin: 0; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
  body.giornata-scrive .giornata-percorso-pastiglia { display: none; }
  body:has(.giornata-percorso-pastiglia) .piede { padding-bottom: 4.5rem; }
}
@media (pointer: coarse) { .giornata-percorso-voce-testa a, .giornata-percorso-chi a, .giornata-percorsi-lista > summary, .giornata-percorso-incorso > summary { min-height: 2.75rem; line-height: 2.75rem; } }
@media (prefers-reduced-motion: reduce) { .giornata-percorso-striscia *, .giornata-percorso-pastiglia *, .giornata-luce-nota { transition: none !important; scroll-behavior: auto !important; } }
[data-movimento="ridotto"] .giornata-percorso-striscia *, [data-movimento="ridotto"] .giornata-percorso-pastiglia *, [data-movimento="ridotto"] .giornata-luce-nota { transition: none !important; }
@media print { .giornata-percorso-striscia, .giornata-percorso-pastiglia, .giornata-luce-nota { display: none !important; } .giornata-luce { outline: 0 !important; } }

/* ------------------------------------------------------------------ 6.5: Attività (sviluppi/20)
 * Ale 28/10/2026: «Per ora mi sembra ok. Ma devo vedere quando sarà tutto pronto. Procedi.». Le pagine di moduli/attivita.php (Oggi con
 * l'inserimento rapido, Elenco, Kanban, la scheda) e i riquadri della home, disegnati da nucleo/attivita_pagine.php; in fondo il riquadro
 * «Attività collegate» degli agganci (.att-collegate, nella chiamata e nel ticket). Colori solo dai gettoni del tema; stato, priorità e
 * scadenza hanno sempre il testo e un'icona, il colore non è mai l'unica informazione (WCAG 1.4.1). Bersagli di almeno 24 px (44 al tocco),
 * il fuoco mai coperto dalla barra in alto (scroll-margin), a 375 px niente scorrimento di lato: titoli lunghi a capo, il kanban sotto i
 * 600 px diventa un elenco per stato con il selettore della colonna. Le animazioni solo senza «meno movimento». */
.att-indietro { margin: 0 0 .8rem; }
.att-viste a, .att-per a { display: inline-flex; align-items: center; gap: .35rem; }
.att-viste .icona { width: 1.05em; height: 1.05em; }
.att-per { align-items: center; }
.att-n { display: inline-block; min-width: 1.5rem; padding: 0 .45rem; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
  font-size: .78rem; font-weight: 650; line-height: 1.35rem; text-align: center; font-variant-numeric: tabular-nums; vertical-align: .1em; }
.att-numero { color: var(--muted); font-size: .82rem; white-space: nowrap; }
.att .etichetta .icona, .att-scheda .etichetta .icona, .att-w-kanban .etichetta .icona, .att-collegate .etichetta .icona {
  display: inline-block; width: .95em; height: .95em; margin-right: .25rem; vertical-align: -.12em; }
.att-scad, .att-passi-n, .att-resp { display: inline-flex; align-items: center; gap: .25rem; font-size: .85rem; white-space: nowrap; }
.att-scad:not(.etichetta), .att-passi-n, .att-resp { color: var(--muted); }
.att-scad .icona, .att-passi-n .icona, .att-resp .icona { width: .95em; height: .95em; }
.att-segnali { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.att-errore { display: flex; align-items: flex-start; gap: .4rem; margin: .4rem 0; padding: .45rem .6rem; border-radius: var(--r-s); background: var(--err-soft); color: var(--err); font-weight: 550; }
.att-errore .icona { margin-top: .15rem; }
.att-avviso-dati { display: flex; align-items: flex-start; gap: .4rem; margin: .35rem 0 0; padding: .4rem .6rem; border-radius: var(--r-s); background: var(--warn-soft); color: var(--warn); font-size: .86rem; }
.att-avviso-dati[hidden] { display: none; }
.att-avviso-dati .icona { margin-top: .1rem; }
/* Oggi: l'inserimento rapido e i gruppi */
.att-rapido-box { margin-bottom: 1.25rem; }
.att-rapido { display: grid; gap: .45rem; }
.att-rapido-riga { display: flex; gap: .5rem; align-items: stretch; }
.att-rapido-riga input { flex: 1 1 auto; min-width: 0; }
.att-rapido-riga .btn { flex: none; }
.att-rapido-anteprima:empty { display: none; }
.att-avviso-rapido { margin: .3rem 0 0; color: var(--warn); font-weight: 550; }
.att-rapido-fatto { margin: .4rem 0 0; }
.att-rapido-anteprima { padding: .5rem .7rem; border: 1px dashed var(--line-strong); border-radius: var(--r-s); font-size: .88rem; }
.att-anteprima-voci { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.att-anteprima-voci b { font-weight: 650; margin-right: .25rem; }
.att-gruppo + .att-gruppo { margin-top: 1.25rem; }
.att-gruppo-scadute { border-top: 3px solid var(--err); }
.att-gruppo-oggi { border-top: 3px solid var(--warn); }
.att-righe { list-style: none; margin: 0; padding: 0; }
.att-riga { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem 1rem; align-items: center; padding: .65rem 0 .65rem .7rem; border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent; }
.att-riga:last-child { border-bottom: 0; }
.att-riga.scaduta { border-left-color: var(--err); }
.att-riga-testa { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.att-riga-testa .att-numero { margin-right: .3rem; }
.att-riga-dati { margin: 0; display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: center; grid-column: 1; }
.att-riga-azioni { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
/* l'elenco */
.att-filtri { margin-bottom: 1.25rem; }
.att-filtri-box > summary { margin-bottom: .6rem; max-width: 100%; white-space: normal; text-align: left; }
.att-filtri-box > summary::-webkit-details-marker { display: none; }
/* sul telefono una scheda per riga: le celle vuote («Passi —», nessuna scadenza) non occupano righe */
@media (max-width: 37.49em) { .att-tabella td.att-cella-vuota { display: none; } }
.att-tabella td[data-etichetta="Titolo"] { min-width: 14rem; overflow-wrap: anywhere; }
.att-tabella td[data-etichetta="Titolo"] .att-segnali { margin-top: .3rem; }
.att-tabella td[data-etichetta="Scadenza"] .att-scad { white-space: normal; }
@media (max-width: 45em) { .att-tabella td[data-etichetta="Titolo"] { min-width: 0; } }
/* il kanban: colonne che vanno a capo sul computer (niente scorrimento di lato), un elenco per stato sul telefono */
.att-kanban-scelte { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: flex-start; }
.att-kanban-scelte .schede-vista { margin-bottom: .6rem; }
.att-col-scelta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: 0 0 .8rem; }
.att-col-scelta[hidden] { display: none; }
.att-col-scelta select { width: auto; flex: 1 1 12rem; }
.att-kanban { display: grid; gap: .9rem; align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr)); }
.att-colonna { min-width: 0; padding: .7rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.att-colonna[hidden] { display: none; }
.att-colonna h2 { display: flex; align-items: center; gap: .4rem; margin: 0 0 .6rem; font-size: 1rem; font-weight: 650; }
.att-colonna-dettagli > summary { cursor: pointer; list-style: none; min-height: 24px; }
.att-colonna-dettagli > summary::-webkit-details-marker { display: none; }
.att-colonna-dettagli > summary h2 { margin: 0; }
/* la freccia non entra nel nome della colonna per il lettore di schermo: testo alternativo vuoto (dopo la barra) */
.att-colonna-dettagli > summary h2::after { content: "▸"; content: "▸" / ""; margin-left: auto; color: var(--muted); font-size: .9rem; }
.att-colonna-dettagli[open] > summary h2 { margin-bottom: .6rem; }
.att-colonna-dettagli[open] > summary h2::after { content: "▾"; content: "▾" / ""; }
.att-carte { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; min-height: 2.5rem; }
.att-colonna-vuota { margin: .3rem 0 0; }
.att-colonna-vuota[hidden] { display: none; }
.att-carta { position: relative; padding: .6rem .7rem; border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: var(--r-s); background: var(--surface);
  box-shadow: var(--ombra); scroll-margin-top: .25rem; }
[data-stile="contrasto"] .att-carta { border-width: 2px; border-left-width: 5px; box-shadow: none; }
.att-carta.prio-urgente { border-left-color: var(--err); }
.att-carta.prio-alta { border-left-color: var(--warn); }
.att-carta.chiusa { background: var(--surface-2); }
.att-carta-testa { margin: 0 0 .25rem; display: flex; flex-wrap: wrap; gap: .25rem .45rem; align-items: center; }
.att-carta-titolo { margin: 0 0 .3rem; font-size: .95rem; font-weight: 650; overflow-wrap: anywhere; }
.att-carta-titolo a { color: var(--ink); }
.att-carta-titolo a:hover { color: var(--accent); }
.att-carta-dati, .att-carta-segnali { margin: 0 0 .25rem; display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: center; }
.att-carta .att-menu { margin-top: .2rem; }
.att-menu > summary { list-style: none; }
.att-menu > summary::-webkit-details-marker { display: none; }
.att-menu > summary span { font-size: 1.15rem; line-height: 1; letter-spacing: .05em; }
.att-menu[open] > summary { background: var(--surface-2); border-style: dashed; }
.att-menu-corpo { margin-top: .45rem; padding-top: .45rem; border-top: 1px solid var(--line); display: grid; gap: .5rem; }
.att-menu-corpo form { margin: 0; }
.att-menu-titolo { margin: 0 0 .25rem; font-size: .78rem; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.att-menu-bottoni { display: flex; flex-wrap: wrap; gap: .35rem; }
.att-menu-bottoni .btn { white-space: normal; text-align: left; }
.att-menu-aiuto { margin: 0; }
/* l'aiuto della tastiera solo dove c'e' un puntatore preciso (il computer), non al telefono */
@media (pointer: coarse) { .att-solo-tastiera { display: none; } }
.att-in-linea { display: grid; gap: .45rem; margin: 0; padding: .55rem; border: 1px dashed var(--line-strong); border-radius: var(--r-s); background: var(--surface-2); }
.att-in-linea-campi { display: grid; gap: .45rem; }
.att-in-linea .bottoni { margin-top: 0; }
.att-esito { margin: .4rem 0 0; }
.att-esito ul { margin: .3rem 0; padding-left: 1.1rem; }
/* il trascinamento (solo sul computer, scorciatoia dei pulsanti): la carta presa e la colonna dove cade */
.att-carta.att-trascinata { outline: 2px dashed var(--accent); outline-offset: 2px; }
.att-colonna.att-bersaglio { outline: 3px dashed var(--accent); outline-offset: 2px; background: var(--accent-soft); }
.att-carta[draggable="true"] { cursor: grab; }
@media (prefers-reduced-motion: no-preference) {
  .att-carta.att-spostata { animation: att-spostata 1.6s ease-out; }
}
@keyframes att-spostata { from { box-shadow: 0 0 0 3px var(--accent); } to { box-shadow: var(--ombra); } }
@media (max-width: 37.49em) {
  .att-kanban { grid-template-columns: minmax(0, 1fr); }
  .att-colonna { padding: .6rem .5rem; }
  .att-riga { grid-template-columns: minmax(0, 1fr); padding-left: .5rem; }
  .att-riga-azioni { grid-column: 1; grid-row: auto; }
  .att-rapido-riga { flex-wrap: wrap; }
  .att-rapido-riga .btn { flex: 1 1 100%; }
}
@media (min-width: 37.5em) { .att-col-scelta { display: none !important; } }
/* la scheda: due colonne sul computer (il quadro e la cronologia a sinistra, stato, passi, persone e collegamenti a destra) */
/* verifica dell'unione del 29/10/2026: lo spazio della barra (e della striscia del percorso) lo tiene gia' html { scroll-padding-top }; qui, come
 * nelle altre ancore, solo lo spazio in piu' (prima si contava due volte e le ancore arrivavano una barra piu' in basso) */
.att-scheda section[id], .att-scheda header[id], .att-scheda details[id], #att-nota { scroll-margin-top: .25rem; }
.att-scheda > .nota { margin-bottom: 1.25rem; }
.att-testa { border-top: 3px solid var(--accent); }
.att-testa-sopra { margin: 0 0 .25rem; color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
.scheda .att-testa h2, .att-testa > h2 { font-size: 1.3rem; margin: 0 0 .5rem; overflow-wrap: anywhere; }
.att-testa-segni { display: flex; flex-wrap: wrap; gap: .35rem .5rem; align-items: center; margin: 0 0 .8rem; }
.att-dati { grid-template-columns: max-content minmax(0, 1fr); }
.att-dati dd { overflow-wrap: anywhere; }
.att-descrizione { margin: .2rem 0 .8rem; padding: .6rem .8rem; border-left: 3px solid var(--line-strong); background: var(--surface-2); border-radius: var(--r-s); overflow-wrap: anywhere; }
.att-azioni { margin-top: .6rem; }
.att-azioni form { margin: 0; }
.att-scheda-colonne { margin-top: 1.25rem; }
.att-scheda-sx > * + *, .att-scheda-dx > * + * { margin-top: 1.25rem; }
.att-scheda-dx { margin-top: 1.25rem; }
@media (min-width: 72em) {
  .att-scheda-colonne { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.25rem; align-items: start; }
  .att-scheda-dx { margin-top: 0; }
}
.att-stato-ora { margin: 0 0 .7rem; }
.att-stati { display: grid; gap: .5rem; justify-items: start; }
.att-stati > form { margin: 0; }
.att-stato-scelta { width: 100%; }
.att-stato-scelta > summary { list-style: none; width: max-content; max-width: 100%; }
.att-stato-scelta > summary::-webkit-details-marker { display: none; }
.att-stato-scelta[open] > summary { border-style: dashed; background: var(--surface-2); margin-bottom: .5rem; }
.att-stato-modulo { display: grid; gap: .5rem; padding: .6rem; border: 1px solid var(--line); border-radius: var(--r-s); }
.att-conflitto ul, .att-conferma ul, .att-nascera ul { margin: .35rem 0 .5rem; padding-left: 1.2rem; }
.att-conflitto p, .att-conferma p, .att-nascera p { margin: 0 0 .3rem; }
.att-conflitto .icona, .att-conferma .icona { display: inline-block; vertical-align: -.15em; margin-right: .3rem; }
/* il quadro del problema */
.att-quadro h3 { display: flex; align-items: center; gap: .4rem; margin: .9rem 0 .35rem; font-size: .92rem; }
.att-quadro-voci { margin: 0; padding-left: 1.2rem; display: grid; gap: .25rem; }
.att-quadro-voci li { overflow-wrap: anywhere; }
.att-quadro-voci li.chiuso { color: var(--muted); }
.att-attese { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .35rem; }
.att-attese li { display: flex; align-items: flex-start; gap: .45rem; padding: .45rem .6rem; border-radius: var(--r-s); background: var(--warn-soft); color: var(--ink); }
.att-attese .icona { color: var(--warn); margin-top: .15rem; }
.att-nascosti { display: flex; align-items: center; gap: .35rem; }
/* i passi: la casella «fatto» e' un pulsante grande (28 px) che si preme */
.att-passi { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .35rem; }
.att-passo { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .55rem; padding: .3rem 0; border-bottom: 1px solid var(--line); }
.att-passo:last-child { border-bottom: 0; }
.att-passo-spunta { margin: 0; }
.att-spunta { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 2px solid var(--line-strong); border-radius: var(--r-s);
  background: var(--surface); color: transparent; cursor: pointer; flex: none; }
.att-spunta .icona { width: 1.1rem; height: 1.1rem; }
.att-spunta:hover { border-color: var(--accent); color: var(--muted); }
.att-spunta[aria-pressed="true"], .att-spunta.finta:not(:empty) { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.att-spunta.finta { cursor: default; }
@media (pointer: coarse) { .att-spunta { width: 2.75rem; height: 2.75rem; } }
.att-passo-testo { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.att-passo.fatto .att-passo-testo { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.att-passo.fatto .att-passo-testo small { text-decoration: none; display: inline-block; }
.att-passo-nuovo, .att-persona-nuova, .att-riassegna { margin-top: .6rem; }
.att-passo-nuovo > summary, .att-persona-nuova > summary, .att-riassegna > summary, .att-modifica > summary { list-style: none; width: max-content; max-width: 100%; }
.att-passo-nuovo > summary::-webkit-details-marker, .att-persona-nuova > summary::-webkit-details-marker, .att-riassegna > summary::-webkit-details-marker,
.att-modifica > summary::-webkit-details-marker { display: none; }
.att-passo-nuovo[open] > summary, .att-persona-nuova[open] > summary, .att-riassegna[open] > summary, .att-modifica[open] > summary { margin-bottom: .6rem; border-style: dashed; }
.att-modifica > summary { white-space: normal; }
/* persone e collegamenti */
.att-persone-elenco { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.att-persone-elenco li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.att-coll-elenco { list-style: none; margin: 0 0 .7rem; padding: 0; }
.att-coll { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; padding: .45rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.att-coll:last-child { border-bottom: 0; }
.att-coll a { min-width: 0; }
.att-collega { display: grid; gap: .35rem; }
.att-collega .att-rapido-riga input { min-width: 0; }
.att-visibilita .scelte { flex-direction: column; gap: .45rem; }
.att-visibilita .spunta { align-items: flex-start; }
.att-visibilita .spunta input { margin-top: .2rem; }
.att-visibilita .spunta small { display: block; }
.att-nuova h2 { margin-bottom: .8rem; }
.att-nuova .editor-area:empty::before, .att-modifica-box .editor-area:empty::before { content: "Il problema, quello che si sa già, cosa manca"; }
.att-nota .editor-area:empty::before { content: "Cosa è successo o cosa si è deciso"; }
/* la cronologia: come il diario delle pratiche (finestra che scorre, colore del bordo e nome del tipo, senza icone) */
.att-nota { margin-bottom: .9rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.att-crono-filtri { display: inline-flex; flex-wrap: wrap; gap: .2rem .8rem; }
.att-crono-filtri[hidden] { display: none; }
.att-crono-filtri .spunta { min-height: 24px; }
@media (pointer: coarse) { .att-crono-filtri .spunta { min-height: 2.75rem; } }
.att-crono { scroll-margin-top: .25rem; }
.att-crono-tipo { font-weight: 650; }
.att-crono.tipo-nota { border-left-color: var(--accent); }
.att-crono.tipo-annullamento { border-left-color: var(--warn); }
.att-crono.tipo-stato, .att-crono.tipo-creata { border-left-color: var(--ok); }
.att-crono.tipo-assegnazione, .att-crono.tipo-persona { border-left-color: var(--warn); }
.att-crono.tipo-collegamento, .att-crono.tipo-ritorno, .att-crono.tipo-voce { border-left-color: var(--line-strong); }
.att-crono.tipo-modifica, .att-crono.tipo-passo, .att-crono.tipo-cestino, .att-crono.tipo-conservazione { border-left-color: var(--line); }
/* la nota annullata resta leggibile: barrata e nel colore attenuato del tema (contrasto AA), senza l'opacita' del diario */
.att-crono.annullata > :not(.att-crono-annullata) { text-decoration: line-through; color: var(--muted); opacity: 1; }
.att-crono-testo { overflow-wrap: anywhere; }
.att-crono-annullata { margin: .2rem 0 0; color: var(--warn); }
.att-crono-box.senza-note [data-att-crono-tipo="note"], .att-crono-box.senza-modifiche [data-att-crono-tipo="modifiche"],
.att-crono-box.senza-collegati [data-att-crono-tipo="collegati"] { display: none; }
.att-crono-vuota { margin: .5rem 0; }
.att-crono-vuota[hidden] { display: none; }
.att-crono-pagine { margin: .5rem 0 0; }
.att-verifica { display: flex; align-items: flex-start; gap: .45rem; margin: .7rem 0 0; font-size: .86rem; }
.att-verifica .icona { margin-top: .1rem; }
.att-verifica.ok { color: var(--ok); }
.att-verifica.err { color: var(--err); font-weight: 600; }
/* i riquadri della home */
.att-w-numeri { display: flex; flex-wrap: wrap; gap: .2rem .5rem; margin: 0 0 .6rem; font-size: .9rem; }
.att-w-numeri a { text-decoration: none; color: var(--ink); }
.att-w-numeri a:hover { text-decoration: underline; }
.att-w-numeri b { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.att-w-numeri a.allarme b { color: var(--err); }
.att-w-elenco li > a { overflow-wrap: anywhere; }
.att-w-elenco .mono { color: var(--muted); font-size: .8rem; }
.att-w-kanban { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.att-w-col { min-width: 0; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-2); }
.att-w-col h4 { display: flex; align-items: center; gap: .35rem; margin: 0 0 .4rem; font-size: .88rem; }
.att-w-col p { margin: 0; }
.att-w-carte { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.att-w-carte li { padding: .35rem .5rem; border-left: 3px solid var(--line-strong); border-radius: var(--r-s); background: var(--surface); font-size: .86rem; overflow-wrap: anywhere; }
.att-w-carte li.prio-urgente { border-left-color: var(--err); }
.att-w-carte li.prio-alta { border-left-color: var(--warn); }
.att-w-carte li small { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .2rem; }
.att-w-carte .mono { color: var(--muted); font-size: .78rem; }
/* il riquadro «Attività collegate» (nucleo/attivita_agganci.php) nella chiamata e nel ticket */
.att-collegate .elenco li > span:first-child a { overflow-wrap: anywhere; }
.att-collegate-dati { display: inline-flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.att-collegate .bottoni { margin-top: .6rem; }
@media print {
  .att-rapido-box, .att-menu, .att-azioni, .att-nota, .att-collega, .att-passo-nuovo, .att-persona-nuova, .att-riassegna, .att-modifica-box, .att-crono-filtri,
  .att-stati, .att-annulla, .att-passo-spunta, .att-col-scelta { display: none !important; }
  .att-crono-finestra { max-height: none; overflow: visible; }
}