/* NAVIGAZIONE (docs/navigazione.md): la barra del gestionale, le tendine, il pannello del telefono, la barra in basso, la ricerca rapida.
   Markup: schermi/templates/schermi/_nav.html (voci da schermi/navigazione.py). Stile «scena»: vetro, bordo luminoso, luce sulla voce accesa.
   Regola di costo (docs/scena.md): si animano SOLO transform, opacity e filter; con prefers-reduced-motion tutto diventa dissolvenza o niente.
   Si carica dopo scena.css. La barra è un <div role="navigation">, non un <nav>: le vecchie regole `.testata nav …` (base.css, scena.css) non la toccano. *

/* ---------- 0. i bottoni del telaio (base.css, scena.css) hanno stile e luce propri: qui li si rimette a zero ---------- */
.testata.nv button, .nv-pannello button, .nv-palette button, .nv-basso button { font: inherit; margin: 0; background: none; border: 0; border-radius: 0; padding: 0; min-height: 0; color: inherit; letter-spacing: inherit; cursor: pointer; text-decoration: none; }
.testata.nv button:hover:not(:disabled), .testata.nv button:active:not(:disabled), .nv-pannello button:hover:not(:disabled), .nv-pannello button:active:not(:disabled),
.nv-palette button:hover:not(:disabled), .nv-palette button:active:not(:disabled), .nv-basso button:hover:not(:disabled), .nv-basso button:active:not(:disabled) { transform: none; filter: none; background: none; }
.testata.nv button::after, .nv-pannello button::after, .nv-palette button::after, .nv-basso button::after { content: none; }
.nv svg, .nv-pannello svg, .nv-palette svg, .nv-basso svg { flex: none; display: block; }
.nv-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nv-kbd { font: 600 .68rem/1 var(--carattere); padding: .22rem .4rem; border-radius: .35rem; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); color: var(--testo-2); }

/* ---------- 1. la barra: logo su UNA riga, sezioni a sinistra, ricerca e persona a destra ---------- */
.testata.nv { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: var(--s4); min-height: 3.6rem; padding: .45rem 1.25rem; border-bottom: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* il vetro sta in un pseudo-elemento: la testata NON ha backdrop-filter, così le tendine (che ne hanno uno loro) vedono la pagina sotto e non solo la barra */
.testata.nv::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(14, 11, 20, .82), rgba(14, 11, 20, .58)); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); border-bottom: 1px solid rgba(42, 34, 56, .65); }
.testata.nv::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; z-index: -1; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(139, 92, 246, .55) 18%, rgba(245, 165, 36, .38) 82%, transparent); opacity: .6; }
.nv-marchio { flex: none; white-space: nowrap; font-size: 1.02rem; }
.nv-marchio:hover { text-decoration: none; }
.nv-nome { white-space: nowrap; }
.nv-nav { flex: 0 1 auto; min-width: 0; margin: 0 0 0 var(--s2); padding: 0; overflow: visible; order: 0; font-size: inherit; color: inherit; }
.nv-lista { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.nv-sez { position: relative; }
.nv-destra { margin-left: auto; display: flex; align-items: center; gap: .65rem; flex: none; min-width: 0; }
.nv-esci { margin: 0; display: inline-flex; }

/* ---------- 2. la sezione di primo livello ---------- */
.testata.nv .nv-tasto { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: .45rem; height: 2.4rem; padding: 0 .85rem; border-radius: .7rem; color: #fff; font-size: .92rem; font-weight: 600; white-space: nowrap; }
.testata.nv .nv-tasto:hover { text-decoration: none; }
.nv-tasto .nv-etic { opacity: .78; transition: opacity 160ms var(--curva); }
.nv-tasto:hover .nv-etic, .nv-tasto[aria-expanded="true"] .nv-etic, .nv-sez-attiva > .nv-tasto .nv-etic { opacity: 1; }
/* la piastra di vetro dietro il tasto (si anima solo l'opacità) */
.testata.nv .nv-tasto::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: none; background: rgba(139, 92, 246, .22); opacity: 0; transition: opacity 160ms var(--curva); pointer-events: none; }
.testata.nv .nv-tasto:hover::after { opacity: .55; }
.testata.nv .nv-tasto[aria-expanded="true"]::after { opacity: 1; }
.nv-tasto .nv-ico { color: var(--viola); }
.nv-sez-attiva > .nv-tasto .nv-ico { color: var(--ambra); }
.nv-tasto .nv-freccia { width: 14px; height: 14px; margin: 0 -.2rem 0 -.1rem; opacity: .6; transition: transform 180ms var(--curva), opacity 160ms; }
.nv-sez.aperta > .nv-tasto .nv-freccia { transform: rotate(180deg); opacity: 1; }
/* la voce accesa: testo pieno e una linea di luce viola→ambra sotto */
.testata.nv .nv-tasto::before { content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .12rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--viola), var(--ambra)); box-shadow: 0 0 10px rgba(245, 165, 36, .6); opacity: 0; transform: scaleX(.4); transition: opacity 180ms var(--curva), transform 220ms var(--curva); pointer-events: none; }
.testata.nv .nv-sez-attiva > .nv-tasto::before { opacity: 1; transform: none; }

/* il pallino sulla sezione: il numero dentro, una luce che respira (gestione_badge.js lo riempie; senza risposta resta il tondino che luccica) */
.nv-pallino, .nv-conta { display: inline-grid; place-items: center; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 999px; background: var(--ambra); color: #2a1d00; font-size: .68rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.nv-pallino[hidden], .nv-conta[hidden] { display: none; }
.nv-pallino { position: absolute; top: -.2rem; right: -.25rem; box-shadow: 0 0 0 2px rgba(14, 11, 20, .9), 0 0 12px rgba(245, 165, 36, .6); animation: nv-sale 380ms var(--curva-scatto) both; }
.nv-pallino::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; box-shadow: 0 0 0 2px rgba(245, 165, 36, .55); opacity: 0; animation: nv-alone 2.6s ease-out infinite; pointer-events: none; }
.nv-conta { margin-left: auto; min-width: 1.4rem; height: 1.4rem; font-size: .74rem; box-shadow: 0 0 12px rgba(245, 165, 36, .45); animation: nv-sale 380ms var(--curva-scatto) both; }
.nv-attesa { position: absolute; top: .2rem; right: .15rem; width: .8rem; height: .8rem; border-radius: 50%; }  /* fuori dal flusso: quando sparisce la barra non salta */
@keyframes nv-sale { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
@keyframes nv-alone { 0% { opacity: .75; transform: scale(.7); } 70%, 100% { opacity: 0; transform: scale(1.5); } }

/* la piastra comune dei controlli secondari: un velo viola con filo che si accende (solo opacità) */
.testata.nv .nv-cerca, .testata.nv .nv-esci-tasto, .nv-p-piede .nv-esci-tasto, .nv-pagina a, .nv-pannello .nv-chiudi, .nv-pannello .nv-p-cerca, .nv-basso .nv-b-voce { position: relative; isolation: isolate; }
.testata.nv .nv-cerca::before, .testata.nv .nv-esci-tasto::before, .nv-p-piede .nv-esci-tasto::before, .nv-pagina a::before, .nv-pannello .nv-chiudi::before, .nv-pannello .nv-p-cerca::before, .nv-basso .nv-b-voce::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: rgba(139, 92, 246, .2); box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .6); opacity: 0; transition: opacity 160ms var(--curva); pointer-events: none; }
.testata.nv .nv-cerca:hover::before, .testata.nv .nv-esci-tasto:hover::before, .nv-p-piede .nv-esci-tasto:hover::before, .nv-pagina a:hover::before, .nv-pannello .nv-chiudi:hover::before, .nv-pannello .nv-p-cerca:hover::before, .nv-basso .nv-b-voce:hover::before,
.testata.nv .nv-cerca:focus-visible::before, .nv-basso .nv-b-voce:focus-visible::before { opacity: 1; }

/* ---------- 3. la tendina di vetro ---------- */
.nv-tendina { position: absolute; top: 100%; left: -.35rem; z-index: 5; min-width: 22rem; margin-top: .55rem; padding: .45rem; border-radius: 1.05rem; opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.985); transform-origin: 2rem 0;
  background: radial-gradient(120% 70% at 0% 0%, rgba(255, 255, 255, .075), transparent 55%), linear-gradient(160deg, rgba(36, 28, 54, .9), rgba(16, 12, 26, .93)); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: var(--ombra-profonda), 0 18px 60px -20px rgba(139, 92, 246, .35); transition: opacity 170ms var(--curva), transform 170ms var(--curva), visibility 0s linear 170ms; }
.nv-tendina::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(135deg, rgba(139, 92, 246, .65), rgba(139, 92, 246, .12) 34%, rgba(245, 165, 36, .08) 64%, rgba(245, 165, 36, .5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.nv-tendina::after { content: ""; position: absolute; left: 0; right: 0; top: -.7rem; height: .7rem; }  /* ponte: il puntatore passa dal tasto alla tendina senza chiuderla */
.nv-sez.aperta > .nv-tendina { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nv-tendina.nv-a-destra { left: auto; right: -.35rem; transform-origin: calc(100% - 2rem) 0; }
.nv-tendina ul, .nv-carta ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.nv-gruppo { margin: .55rem .65rem .2rem; padding-top: .5rem; border-top: 1px solid rgba(255, 255, 255, .08); color: var(--grigio); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.nv-voce { position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: .75rem; align-items: center; padding: .5rem .65rem; border-radius: .75rem; color: var(--testo-2); font-size: .93rem; font-weight: 700; line-height: 1.25; text-decoration: none; }
.nv-voce::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(139, 92, 246, .2); opacity: 0; transition: opacity 140ms var(--curva); pointer-events: none; }
.nv-voce:hover, .nv-voce:focus-visible { color: #fff; text-decoration: none; }
.nv-voce:hover::before, .nv-voce:focus-visible::before { opacity: 1; }
.nv-voce:focus-visible { box-shadow: inset 0 0 0 2px var(--ambra); }
.nv-voce .nv-voce-ico { grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center; width: 2.15rem; height: 2.15rem; border-radius: .65rem; background: rgba(255, 255, 255, .055); color: #B79CFF; }
.nv-voce .nv-conta { grid-column: 3; grid-row: 1 / span 2; }
.nv-voce[data-desc]::after { content: attr(data-desc); grid-column: 2; grid-row: 2; font-size: .76rem; font-weight: 400; line-height: 1.25; color: var(--grigio); }
.nv-voce:hover .nv-voce-ico, .nv-voce:focus-visible .nv-voce-ico { background: rgba(139, 92, 246, .35); color: #fff; }
.nv-voce[aria-current="page"] { color: #fff; background: linear-gradient(var(--ambra), var(--ambra)) 0 50% / 3px 62% no-repeat, linear-gradient(90deg, rgba(245, 165, 36, .17), rgba(245, 165, 36, .03) 75%); }
.nv-voce[aria-current="page"] .nv-voce-ico { background: rgba(245, 165, 36, .18); color: var(--ambra); }
/* le righe dei risultati della ricerca: icona, testo su due righe, tipo */
.nv-voce-testo { display: grid; gap: .05rem; min-width: 0; }
.nv-voce-nome { font-size: .93rem; font-weight: 700; line-height: 1.2; }
.nv-voce-desc { font-size: .76rem; font-weight: 400; color: var(--grigio); line-height: 1.25; }
/* senza JavaScript la tendina si apre col puntatore o col focus (html.js lo aggiunge lo script in testa a base.html) */
html:not(.js) .nv-sez:hover > .nv-tendina, html:not(.js) .nv-sez:focus-within > .nv-tendina { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* ---------- 4. a destra: azioni della pagina, ricerca, persona, Esci ---------- */
.nv-pagina { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--grigio); }
.nv-pagina a { position: relative; isolation: isolate; padding: .3rem .7rem; border-radius: 999px; border: 1px solid rgba(139, 92, 246, .38); background: rgba(139, 92, 246, .1); color: var(--testo-2); white-space: nowrap; }
.nv-pagina a:hover { color: #fff; text-decoration: none; }
.nv-pagina .filo { white-space: nowrap; }
.testata.nv .nv-cerca { display: inline-flex; align-items: center; gap: .55rem; height: 2.3rem; padding: 0 .6rem 0 .75rem; border-radius: .7rem; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .045); color: var(--grigio); font-size: .88rem; font-weight: 500; }
.testata.nv .nv-cerca:hover { color: #fff; }
.nv-cerca-testo { min-width: 3rem; text-align: left; }
.nv-persona { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.nv-avatar { flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; font-size: .78rem; font-weight: 800; letter-spacing: .02em; color: #fff; background: linear-gradient(135deg, var(--viola-scuro), var(--viola) 55%, var(--ambra)); box-shadow: 0 0 0 2px rgba(14, 11, 20, .9), 0 0 14px rgba(139, 92, 246, .45); }
.nv-persona-testo { display: grid; line-height: 1.15; min-width: 0; }
.nv-persona-nome { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; font-weight: 700; color: #fff; }
.nv-persona-ruolo { font-size: .72rem; color: var(--grigio); white-space: nowrap; }
.testata.nv .nv-esci-tasto, .nv-p-piede .nv-esci-tasto { display: inline-flex; align-items: center; gap: .45rem; height: 2.3rem; padding: 0 .7rem; border-radius: .7rem; border: 1px solid rgba(255, 255, 255, .1); color: var(--grigio); font-size: .85rem; font-weight: 600; }
.testata.nv .nv-esci-tasto:hover, .nv-p-piede .nv-esci-tasto:hover { color: #fff; }
.testata.nv .nv-menu-tasto { display: none; }

/* ---------- 5. il pannello del telefono: a tutto schermo, in vetro, le sezioni come carte ---------- */
.nv-pannello { display: none; margin: 0; padding: 0; border: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; overflow: hidden; color: var(--testo);
  background: radial-gradient(90% 46% at 8% 0%, rgba(139, 92, 246, .3), transparent 62%), radial-gradient(70% 42% at 100% 100%, rgba(245, 165, 36, .17), transparent 62%), rgba(11, 8, 18, .9); -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2); }
.nv-pannello::backdrop { background: rgba(6, 4, 10, .55); }
.nv-pannello[open] { display: flex; flex-direction: column; animation: nv-pannello-entra 220ms var(--curva) both; }
.nv-pannello.chiude { animation: nv-pannello-esce 170ms ease-in both; }
@keyframes nv-pannello-entra { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes nv-pannello-esce { to { opacity: 0; transform: translateY(10px) scale(.985); } }
.nv-p-testa { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: max(.6rem, env(safe-area-inset-top)) .9rem .5rem 1.1rem; }
.nv-p-titolo { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.nv-pannello .nv-chiudi { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: #fff; }
.nv-p-corpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: .25rem .9rem calc(1.2rem + env(safe-area-inset-bottom)); display: grid; gap: .8rem; align-content: start; }
.nv-pannello .nv-p-cerca { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 3rem; padding: 0 1rem; border-radius: .9rem; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .06); color: var(--testo-2); font-size: .98rem; text-align: left; }
.nv-pannello .nv-p-cerca:hover { border-color: rgba(139, 92, 246, .6); }
.nv-carte { display: grid; gap: .7rem; grid-template-columns: 1fr; }
.nv-carta { position: relative; padding: .55rem .5rem .5rem; border-radius: 1.05rem; background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025)); border: 1px solid rgba(255, 255, 255, .08); }
.nv-carta-attiva { border-color: rgba(245, 165, 36, .45); background: linear-gradient(160deg, rgba(245, 165, 36, .1), rgba(255, 255, 255, .03)); box-shadow: 0 0 28px -10px rgba(245, 165, 36, .5); }
.nv-carta-titolo { display: flex; align-items: center; gap: .55rem; margin: .1rem .55rem .35rem; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--grigio); }
.nv-carta-titolo .nv-ico { color: var(--viola); }
.nv-carta-attiva .nv-carta-titolo { color: var(--ambra); }
.nv-carta-attiva .nv-carta-titolo .nv-ico { color: var(--ambra); }
.nv-carta-titolo .nv-conta { margin-left: auto; }
.nv-voce.nv-voce-grande { min-height: 2.75rem; padding: .35rem .55rem; font-size: 1rem; }
.nv-p-piede { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: .8rem .4rem 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.nv-p-piede .nv-esci-tasto { height: 2.75rem; padding: 0 1rem; }
.nv-p-piede .nv-persona-nome { max-width: 12rem; }
html.nv-aperto { overflow: hidden; }
/* le carte entrano una dopo l'altra (solo transform e opacity) */
.nv-pannello[open] .nv-carta, .nv-pannello[open] .nv-p-cerca, .nv-pannello[open] .nv-p-piede { animation: nv-carta 380ms var(--curva) both; }
.nv-pannello[open] .nv-carta:nth-child(1) { animation-delay: 40ms; } .nv-pannello[open] .nv-carta:nth-child(2) { animation-delay: 80ms; } .nv-pannello[open] .nv-carta:nth-child(3) { animation-delay: 120ms; }
.nv-pannello[open] .nv-carta:nth-child(4) { animation-delay: 160ms; } .nv-pannello[open] .nv-carta:nth-child(5) { animation-delay: 200ms; } .nv-pannello[open] .nv-p-piede { animation-delay: 240ms; }
@keyframes nv-carta { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- 6. la barra in basso del telefono: quattro scorciatoie (sparisce dove la pagina ha già la sua barra fissa) ---------- */
.nv-basso { display: none; }
.nv-basso .nv-b-voce { position: relative; display: grid; justify-items: center; align-content: center; gap: .15rem; min-height: 3.1rem; padding: .3rem .2rem; border-radius: .9rem; color: var(--grigio); font-size: .68rem; font-weight: 700; letter-spacing: .02em; line-height: 1.2; text-decoration: none; isolation: isolate; }
.nv-basso .nv-b-voce:hover { color: #fff; text-decoration: none; }
.nv-basso .nv-b-voce[aria-current="page"] { color: #fff; background: rgba(245, 165, 36, .14); }
.nv-basso .nv-b-voce[aria-current="page"] svg { color: var(--ambra); filter: drop-shadow(0 0 6px rgba(245, 165, 36, .7)); }
.nv-basso .nv-pallino { top: .25rem; right: calc(50% - 1.45rem); }

/* ---------- 7. la ricerca rapida: un riquadro di vetro (tasto «/») ---------- */
.nv-palette { display: none; width: min(40rem, calc(100vw - 1.5rem)); max-height: min(36rem, calc(100dvh - 2rem)); margin: 11vh auto auto; padding: 0; overflow: hidden; border: 1px solid rgba(139, 92, 246, .45); border-radius: 1.2rem; color: var(--testo);
  background: radial-gradient(110% 60% at 0% 0%, rgba(255, 255, 255, .07), transparent 55%), linear-gradient(160deg, rgba(34, 27, 52, .9), rgba(14, 11, 24, .94)); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); box-shadow: var(--ombra-profonda), 0 0 70px -12px rgba(139, 92, 246, .45); }
.nv-palette::backdrop { background: rgba(6, 4, 10, .6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.nv-palette[open] { display: flex; flex-direction: column; animation: nv-palette-entra 190ms var(--curva) both; }
.nv-palette.chiude { animation: nv-palette-esce 140ms ease-in both; }
@keyframes nv-palette-entra { from { opacity: 0; transform: translateY(-10px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes nv-palette-esce { to { opacity: 0; transform: translateY(-6px) scale(.985); } }
.nv-pal-campo { flex: none; display: flex; align-items: center; gap: .75rem; padding: .35rem .8rem .35rem 1.05rem; border-bottom: 1px solid rgba(255, 255, 255, .09); color: var(--viola); }
.nv-palette .nv-q { flex: 1; min-width: 0; height: 3.4rem; padding: 0; border: 0; border-radius: 0; background: none; color: #fff; font-size: 1.08rem; font-weight: 500; box-shadow: none; -webkit-appearance: none; appearance: none; }
.nv-palette .nv-q:hover, .nv-palette .nv-q:focus { background: none; border: 0; box-shadow: none; outline: none; }
.nv-palette .nv-q::placeholder { color: var(--grigio); opacity: 1; }
.nv-palette .nv-q::-webkit-search-cancel-button { display: none; }
.nv-palette .nv-pal-chiudi { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; height: 2.75rem; border-radius: .7rem; }
.nv-pal-x { display: none; }
.nv-risultati { list-style: none; margin: 0; padding: .45rem; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: .1rem; align-content: start; flex: 1; min-height: 0; }
.nv-ris-titolo { padding: .55rem .65rem .25rem; color: var(--grigio); font-size: .66rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.nv-ris a { display: flex; align-items: center; gap: .75rem; padding: .5rem .65rem; border-radius: .75rem; color: var(--testo-2); text-decoration: none; }
.nv-ris a:hover { text-decoration: none; }
.nv-ris[aria-selected="true"] a { background: rgba(139, 92, 246, .22); color: #fff; box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .5); }
.nv-ris .nv-voce-ico { display: grid; place-items: center; flex: none; width: 2.1rem; height: 2.1rem; border-radius: .65rem; background: rgba(255, 255, 255, .055); color: #B79CFF; }
.nv-ris[aria-selected="true"] .nv-voce-ico { background: rgba(139, 92, 246, .4); color: #fff; }
.nv-ris-tipo { margin-left: auto; padding-left: .6rem; color: var(--grigio); font-size: .72rem; white-space: nowrap; }
.nv-ris .nv-voce-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-pal-stato { flex: none; margin: 0; padding: .1rem 1rem .6rem; min-height: 1.1rem; color: var(--grigio); font-size: .82rem; }
.nv-pal-stato:empty { padding: 0; min-height: 0; }
.nv-pal-piede { flex: none; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; padding: .6rem 1rem; border-top: 1px solid rgba(255, 255, 255, .08); color: var(--grigio); font-size: .72rem; }
.nv-pal-piede span { display: inline-flex; align-items: center; gap: .3rem; }

/* ---------- 8. larghezze: sotto i 1300 px (1700 dove la pagina ha azioni proprie) le sezioni perdono l'icona; sotto i 1200 il nome e il «Cerca» si ritirano; sotto i 900 è telefono ---------- */
@media (max-width: 1699.98px) {
  .testata.nv:has(.nv-pagina) .nv-lista .nv-tasto > .nv-ico:not(.nv-freccia) { display: none; }  /* le pagine con azioni proprie (pannello: «Schermo cliente», «TV», «filo») hanno bisogno di posto */
}
@media (max-width: 1299.98px) {
  .nv-lista .nv-tasto > .nv-ico:not(.nv-freccia) { display: none; }
  .testata.nv .nv-tasto { padding: 0 .75rem; }
  .testata.nv .nv-tasto::before { left: .75rem; right: .75rem; }
}
@media (max-width: 1399.98px) {  /* dove la pagina ha azioni sue (il pannello) la parte destra si ritira prima: nome, «Cerca» ed «Esci» diventano segni */
  .testata.nv:has(.nv-pagina) :is(.nv-persona-testo, .nv-cerca-testo, .nv-cerca .nv-kbd, .nv-esci-tasto > span) { display: none; }
  .testata.nv:has(.nv-pagina) .nv-cerca, .testata.nv:has(.nv-pagina) .nv-esci-tasto { padding: 0; width: 2.3rem; justify-content: center; }
}
@media (max-width: 1199.98px) {
  .testata.nv { gap: var(--s3); padding-left: 1rem; padding-right: 1rem; }
  .testata.nv .nv-tasto { padding: 0 .55rem; font-size: .88rem; gap: .3rem; }
  .testata.nv .nv-tasto::before { left: .55rem; right: .55rem; }
  .nv-nav { margin-left: 0; }
  .nv-persona-testo, .nv-cerca-testo, .nv-cerca .nv-kbd, .nv-esci-tasto > span { display: none; }
  .testata.nv .nv-cerca { padding: 0; width: 2.3rem; justify-content: center; }
  .testata.nv .nv-esci-tasto { padding: 0; width: 2.3rem; justify-content: center; }
  .nv-pagina a { padding: .25rem .55rem; }
  .nv-tendina { min-width: 20rem; }
}
@media (max-width: 899.98px) {
  .testata.nv { flex-wrap: wrap; gap: .35rem .6rem; min-height: 3.4rem; padding: .4rem .9rem; row-gap: .3rem; }
  .nv-destra { display: contents; }
  .nv-nav, .nv-destra > .nv-persona, .nv-destra > .nv-esci { display: none; }
  .testata.nv .nv-cerca { order: 1; margin-left: auto; width: 2.75rem; height: 2.75rem; padding: 0; justify-content: center; border-radius: .85rem; }
  .testata.nv .nv-menu-tasto { display: inline-flex; align-items: center; gap: .5rem; order: 2; margin-left: 0; position: relative; height: 2.75rem; padding: 0 .95rem 0 .8rem; border-radius: .85rem; border: 1px solid rgba(139, 92, 246, .5); background: rgba(139, 92, 246, .16); color: #fff; font-size: .92rem; font-weight: 700; }
  .nv-menu-tasto .nv-pallino { top: -.3rem; right: -.3rem; }
  .nv-pagina { order: 3; flex: 1 0 100%; flex-wrap: wrap; gap: .4rem .5rem; padding-bottom: .3rem; }
  .nv-pagina a { min-height: 2.25rem; display: inline-flex; align-items: center; }
  .nv-carte { grid-template-columns: 1fr; }
  .nv-basso { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .1rem; position: fixed; left: .6rem; right: .6rem; bottom: calc(.55rem + env(safe-area-inset-bottom, 0px)); z-index: 38; padding: .3rem; border-radius: 1.25rem;
    background: linear-gradient(160deg, rgba(34, 27, 52, .86), rgba(14, 11, 24, .9)); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border: 1px solid rgba(139, 92, 246, .38); box-shadow: var(--ombra-profonda), 0 0 30px -10px rgba(139, 92, 246, .5); }
  /* le pagine con una barra fissa propria (agenda, passo successivo del pannello semplice, barre di salvataggio): niente barra del menu, niente sovrapposizione.
     Una pagina nuova con una barra fissa in basso dichiara `data-barra-fissa` sul suo contenitore e finisce qui. */
  body:has(:is(.agenda-pagina, .barra-prova, .sp-piede, .cl-form-piede, .ft-impo-piede, .cmp-navigazione, [data-barra-fissa]:not([hidden]))) .nv-basso { display: none; }
  body:has(.nv-basso):not(:has(:is(.agenda-pagina, .barra-prova, .sp-piede, .cl-form-piede, .ft-impo-piede, .cmp-navigazione, [data-barra-fissa]:not([hidden])))) { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
  body:has(.nv-basso):not(:has(:is(.agenda-pagina, .barra-prova, .sp-piede, .cl-form-piede, .ft-impo-piede, .cmp-navigazione, [data-barra-fissa]:not([hidden])))) .toast { bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px)); }
  .nv-palette { margin-top: .75rem; width: calc(100vw - 1rem); max-height: calc(100dvh - 1.5rem); }
  .nv-palette .nv-pal-chiudi .nv-kbd { display: none; }
  .nv-palette .nv-pal-chiudi .nv-pal-x { display: grid; }
  .nv-pal-piede { display: none; }
  .nv-ris a { min-height: 2.75rem; }
}
@media (min-width: 600px) and (max-width: 899.98px) { .nv-carte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .nv-pannello, .nv-pannello[open] { display: none !important; } .nv-basso { display: none !important; } }
@media (max-width: 899.98px) and (max-height: 520px) { .nv-basso { display: none; } }  /* telefono in orizzontale: la barra in basso toglierebbe troppo spazio */

/* ---------- 9. movimento ridotto: dissolvenze, niente respiro, niente scorrimenti ---------- */
@media (prefers-reduced-motion: reduce) {
  .nv-tendina, .testata.nv .nv-tasto::after, .testata.nv .nv-tasto::before, .nv-tasto .nv-freccia, .nv-tasto .nv-etic, .nv-voce::before { transition-duration: 1ms; }
  .nv-tendina { transform: none; transition: opacity 120ms linear, visibility 0s linear 120ms; }
  .nv-sez.aperta > .nv-tendina { transition-delay: 0s; }
  .nv-pallino::after { animation: none; }
  .nv-pallino, .nv-conta { animation: none; }
  .nv-pannello[open], .nv-palette[open] { animation: nv-dissolvi 140ms linear both; }
  .nv-pannello.chiude, .nv-palette.chiude { animation: nv-dissolvi-via 100ms linear both; }
  .nv-pannello[open] .nv-carta, .nv-pannello[open] .nv-p-cerca, .nv-pannello[open] .nv-p-piede { animation: none; }
  @keyframes nv-dissolvi { from { opacity: 0; } to { opacity: 1; } }
  @keyframes nv-dissolvi-via { to { opacity: 0; } }
}
@media (forced-colors: active) { .nv-voce[aria-current="page"], .nv-basso .nv-b-voce[aria-current="page"] { outline: 2px solid Highlight; } .testata.nv::before { background: Canvas; } }
@media print { .testata.nv, .nv-basso, .nv-pannello, .nv-palette { display: none !important; } }
/* --- personale (10/10/2026): «Vedi tutti» nei gruppi della ricerca globale (gestione/ricerca.py) --- */
.nv-ris-tutti .nv-voce-nome { color: var(--ambra); font-weight: 700; }
.nv-ris-tutti .nv-ris-tipo { color: var(--ambra); }
/* --- fine personale --- */

/* --- collaudo3 (11/10/2026): le strisce in testa (schermi/_strisce.html): al massimo due visibili, le altre in «Hai N avvisi» --------------------------- */
.testa-avvisi { position: relative; z-index: 4; }
.testa-avvisi .ta-pagina { max-width: 1400px; margin: 0 auto; padding: var(--s4, 1rem) var(--s5, 1.5rem) 0; }
.testa-avvisi .ta-pagina > .sede-avvisi, .testa-avvisi .ta-pagina > .pannello { margin-bottom: 0; }
.testa-avvisi .ta-pagina .sede-avvisi { margin-bottom: 0; }
.ta-altri { max-width: 1400px; margin: var(--s3, .75rem) auto 0; padding: 0 var(--s5, 1.5rem); }
.ta-altri > summary { list-style: none; display: flex; align-items: center; gap: .7rem; min-height: 2.9rem; padding: .45rem .9rem; border-radius: 999px; cursor: pointer; color: var(--testo, #fff);
  background: linear-gradient(135deg, rgba(139, 92, 246, .16), rgba(245, 165, 36, .07)); border: 1px solid rgba(139, 92, 246, .38); box-shadow: 0 8px 26px rgba(0, 0, 0, .25);
  -webkit-backdrop-filter: blur(var(--vetro-sfocatura, 14px)); backdrop-filter: blur(var(--vetro-sfocatura, 14px)); transition: border-color 160ms ease, transform 160ms ease; }
.ta-altri > summary::-webkit-details-marker { display: none; }
.ta-altri > summary:hover { border-color: rgba(245, 165, 36, .55); }
.ta-altri > summary:focus-visible { outline: none; box-shadow: var(--anello-focus, 0 0 0 3px rgba(245, 165, 36, .6)); }
.ta-segno { flex: none; display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .4rem; border-radius: 999px; background: var(--ambra, #F5A524); color: #2a1d00; font-weight: 800; font-size: .8rem; font-variant-numeric: tabular-nums; }
.ta-testo { font-weight: 700; white-space: nowrap; }
.ta-sotto { flex: 1 1 auto; min-width: 0; color: var(--grigio, #9A94AB); font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-freccia { flex: none; width: .6rem; height: .6rem; margin-right: .2rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 180ms ease; opacity: .8; }
.ta-altri[open] > summary .ta-freccia { transform: rotate(-135deg) translateY(-1px); }
.ta-corpo { display: grid; gap: var(--s3, .75rem); padding-top: var(--s3, .75rem); }
.ta-corpo .ta-pagina { padding: 0; max-width: none; }
.ta-altri[open] > .ta-corpo { animation: ta-entra 200ms var(--curva, ease) both; }
@keyframes ta-entra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 899.98px) {
  .testa-avvisi .ta-pagina { padding: var(--s3, .75rem) var(--s4, 1rem) 0; }
  .ta-altri { padding: 0 var(--s4, 1rem); }
  .ta-altri > summary { flex-wrap: wrap; row-gap: .1rem; border-radius: 1rem; }
  .ta-testo { flex: 1 1 auto; }
  .ta-sotto { order: 3; flex-basis: 100%; padding-left: 2.3rem; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .ta-altri[open] > .ta-corpo { animation: none; } .ta-freccia { transition: none; } }
/* --- fine collaudo3 --- */

/* --- collaudo3 (11/10/2026): una tendina lunga (più di nove voci: «Negozio» dell'amministratore ne ha più di venti) va su due colonne e non esce mai dallo schermo:
   prima a 1280×900 le ultime voci («Impostazioni», «Notifiche») stavano sotto il bordo e la testata fissa non le lasciava raggiungere. --- */
.nv-tendina.nv-larga { min-width: min(44rem, calc(100vw - 2rem)); }
.nv-tendina.nv-larga > ul { display: block; columns: 2; column-gap: .5rem; }
.nv-tendina.nv-larga > ul > li { break-inside: avoid; }
.nv-tendina.nv-larga > ul > .nv-gruppo { break-after: avoid; }
/* --- fine collaudo3 --- */

/* --- semplice3 (12/10/2026): sulle pagine di lavoro (pannello, revisione) una riga sola «Hai N avvisi →» al posto delle strisce (schermi/templatetags/strisce_tags.py) --- */
.testa-avvisi-compatto { max-width: 1400px; margin: var(--s2, .5rem) auto 0; padding: 0 var(--s5, 1.5rem); }
.ta-compatto { display: flex; align-items: center; gap: .6rem; min-height: 2.5rem; padding: .3rem .85rem; border-radius: 999px; color: var(--testo, #fff); text-decoration: none;
  background: linear-gradient(135deg, rgba(139, 92, 246, .14), rgba(245, 165, 36, .06)); border: 1px solid rgba(139, 92, 246, .32); font-size: .9rem; }
.ta-compatto:hover { text-decoration: none; border-color: rgba(245, 165, 36, .55); }
.ta-compatto:focus-visible { outline: none; box-shadow: var(--anello-focus, 0 0 0 3px rgba(245, 165, 36, .6)); }
.ta-compatto .ta-testo { font-weight: 700; flex: 1 1 auto; }
.ta-compatto .ta-vai { flex: none; color: var(--ambra, #F5A524); font-weight: 800; }
@media (max-width: 899.98px) { .testa-avvisi-compatto { padding: 0 var(--s4, 1rem); } }
/* --- fine semplice3 --- */

/* --- pronti (12/10/2026): la riga «Per aprire mancano N cose →» (apertura/_striscia.html): su un telefono da 390 il testo lungo va a capo --- */
.ta-compatto.ta-apertura .ta-testo { white-space: normal; line-height: 1.25; }
.ta-compatto.ta-apertura .ta-segno { padding: 0; min-width: 1.5rem; height: 1.5rem; }
/* --- fine pronti --- */