/* =====================================================================
   Titillium Web — lo stesso carattere del Domicilio Digitale
   =====================================================================
   27/08/2026, chiesto dal committente: «tutto il testo uguale, stessi font,
   stesse misure, per evitare che sembri fatto da persone diverse».

   Aveva ragione, ed era vero alla lettera: i due portali dello stesso Comune
   usavano due caratteri diversi. Qui il corpo del testo era
   `"Segoe UI", Roboto, Arial` — cioe' nessun carattere scelto, ma quello che
   capita a seconda del sistema: Segoe UI su Windows, Roboto su Android,
   Arial altrove. Il Domicilio, invece, usa Titillium Web.

   Titillium Web non e' una preferenza: e' il carattere indicato dalle linee
   guida di design AgID per i siti della Pubblica Amministrazione. Il portale
   che era fuori standard era questo.

   I file .woff2 sono gli STESSI del Domicilio, copiati in `assets/fonts/`
   (88 KB in tutto, quattro pesi). Serviti dal sito e non da Google Fonts,
   perche' la CSP consente `font-src 'self'` e l'informativa dice che non
   arriva niente da domini esterni.

   `font-display: swap`: il testo si legge subito col carattere di sistema e
   viene ridisegnato appena il file e' pronto. Su una pagina della PA aspettare
   il carattere per mostrare il testo e' il compromesso sbagliato. */
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/titillium-web-300-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/titillium-web-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/titillium-web-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/titillium-web-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/titillium-web-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/titillium-web-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/titillium-web-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/titillium-web-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* === Material Symbols Outlined - Font incorporato === */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  src: url('/assets/fonts/MaterialSymbolsOutlined.woff2') format('woff2');
  font-display: block;
}
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

:root {
  --primary: #004e9f;
  --primary-container: #0066cc;
  --primary-fixed: #d7e3ff;
  --primary-fixed-dim: #a8c7fa;
  --on-primary: #fff;
  --on-primary-fixed: #001b3e;
  --surface: #fcf9f8;
  --surface-lowest: #fff;
  --surface-low: #f6f3f2;
  --surface-container: #f0eded;
  --surface-container-low: #f6f3f2;
  --surface-high: #eae7e7;
  --surface-highest: #e5e2e1;
  --on-surface: #1c1b1b;
  --on-variant: #414753;
  --outline: #727784;
  --outline-variant: #c1c6d5;
  --error: #ba1a1a;
  --error-container: #ffdad6;
  --warning: #b45309;
  --success: #047857;

  /* Raggi delle schede: un'unica scala per tutte le pagine */
  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: 14px;

  /* Spazio riservato in fondo alla pagina (banner cookie / area sicura mobile) */
  --page-bottom-space: 3rem;
}
* { box-sizing: border-box; }
html { max-width: 100%; overflow-x: hidden; }
body {
  margin: 0;
  font-family: "Titillium Web", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--on-surface);
  background: var(--surface);
  line-height: 1.5;
  max-width: 100%;
  overflow-x: hidden;
}
body.drawer-open { overflow: hidden; }
body.drawer-open #main-content { pointer-events: none; }
body.drawer-open #sidebar,
body.drawer-open #sidebar-b { pointer-events: auto; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
table { width: 100%; border-collapse: collapse; border-spacing: 0; }
th { text-align: left; }
.material-symbols-outlined { display: inline-flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; line-height: 1; vertical-align: middle; flex: 0 0 auto; }
.app-icon-svg { display: block; width: 1em; height: 1em; fill: currentColor; }
.fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.skip-link { position: absolute; top: -44px; left: 0; z-index: 1000; background: var(--primary); color: #fff; padding: .5rem 1rem; font-weight: 700; }
.skip-link:focus { top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: .25rem; }

.hidden { display: none !important; } .block { display: block; } .inline { display: inline; }
.flex { display: flex; } .inline-flex { display: inline-flex; } .grid { display: grid; }
.relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } .sticky { position: sticky; }
.left-0 { left: 0; } .right-0 { right: 0; } .top-0 { top: 0; } .bottom-0 { bottom: 0; }
.top-1\/2 { top: 50%; } .right-3 { right: .75rem; } .left-3 { left: .75rem; }
.z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-30 { z-index: 30; } .z-40 { z-index: 40; } .z-50 { z-index: 50; } .-translate-y-1\/2 { transform: translateY(-50%); }
.min-h-screen { min-height: 100vh; } .min-h-0 { min-height: 0; } .min-w-0 { min-width: 0; } .h-screen { height: 100vh; } .h-16 { height: 4rem; }
.h-12 { height: 3rem; } .h-9 { height: 2.25rem; } .w-64 { width: 16rem; } .w-full { width: 100%; }

/* Altezze dei contenitori dei grafici.
   Questo foglio imita alcune utility in stile Tailwind, ma Tailwind non c'e':
   quello che non e' scritto qui semplicemente non esiste. `h-72` era usata dai
   cinque contenitori dei grafici dell'Area Comune e non era mai stata definita,
   quindi quei riquadri restavano senza altezza. Chart.js e' configurato con
   `maintainAspectRatio:false`, che significa "l'altezza prendila dal genitore":
   non trovandola ridisegnava il canvas piu' grande a ogni giro, e il grafico si
   gonfiava fino a sfondare la pagina. Si notava accendendo il tema scuro perche'
   Dark Reader riscrive lo stile di tutta la pagina e scatena una raffica di
   eventi di resize, ma la crescita era gia' in corso prima. */
.h-72 { height: 18rem; } .h-64 { height: 16rem; } .h-80 { height: 20rem; }
/* Rete di sicurezza: anche se un contenitore perde la classe, il canvas non
   puo' comunque crescere oltre il riquadro che lo contiene. */
.h-72 > canvas, .h-64 > canvas, .h-80 > canvas { max-height: 100%; }

/* Le altre utility che i template usavano senza che fossero mai state scritte.
   Trovate con un confronto fra le classi presenti nei template e quelle
   definite qui. La piu' importante e' `min-h-11`: sono i 44px del bersaglio
   tattile minimo, quindi finora la correzione sui bersagli tattili non stava
   facendo effetto in nessuno dei punti che usavano questa classe. */
.h-1\.5 { height: .375rem; } .h-full { height: 100%; }
.min-h-10 { min-height: 2.5rem; } .min-h-11 { min-height: 2.75rem; }
.min-w-full { min-width: 100%; } .max-w-6xl { max-width: 72rem; }
.w-16 { width: 4rem; } .w-32 { width: 8rem; } .w-48 { width: 12rem; } .w-80 { width: 20rem; }
.w-auto { width: auto; } .w-fit { width: fit-content; }
.w-52 { width: 13rem; } .w-44 { width: 11rem; } .w-12 { width: 3rem; } .w-9 { width: 2.25rem; }
.max-w-md { max-width: 28rem; } .max-w-4xl { max-width: 56rem; } .max-w-screen-xl { max-width: 1280px; }
.w-96 { width: 24rem; }
.flex-1 { flex: 1 1 0%; min-width: 0; } .shrink-0 { flex-shrink: 0; }
.overflow-hidden { overflow: hidden; } .overflow-y-auto { overflow-y: auto; } .overflow-x-auto { overflow-x: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-0\.5 { margin-top: .125rem; } .mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: .5rem; } .mb-4 { margin-bottom: 1rem; } .mb-5 { margin-bottom: 1.25rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; }
.ml-3 { margin-left: .75rem; }
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.p-1\.5 { padding: .375rem; } .p-2 { padding: .5rem; } .p-3 { padding: .75rem; } .p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; } .p-8 { padding: 2rem; }
.px-2 { padding-left: .5rem; padding-right: .5rem; } .px-3 { padding-left: .75rem; padding-right: .75rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-1 { padding-top: .25rem; padding-bottom: .25rem; } .py-1\.5 { padding-top: .375rem; padding-bottom: .375rem; } .py-2 { padding-top: .5rem; padding-bottom: .5rem; } .py-2\.5 { padding-top: .625rem; padding-bottom: .625rem; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; } .py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.pt-4 { padding-top: 1rem; } .pt-5 { padding-top: 1.25rem; } .pr-3 { padding-right: .75rem; } .pr-10 { padding-right: 2.5rem; } .pl-9 { padding-left: 2.25rem; } .pl-10 { padding-left: 2.5rem; }
.pb-20 { padding-bottom: 5rem; }
.flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; } .items-start { align-items: flex-start; }
.justify-center { justify-content: center; } .justify-between { justify-content: space-between; }
.gap-0\.5 { gap: .125rem; } .gap-1 { gap: .25rem; } .gap-1\.5 { gap: .375rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; } .gap-4 { gap: 1rem; } .gap-5 { gap: 1.25rem; } .gap-6 { gap: 1.5rem; }
.gap-x-3 { column-gap: .75rem; } .gap-y-1 { row-gap: .25rem; }
.space-y-1 > * + * { margin-top: .25rem; } .space-y-2 > * + * { margin-top: .5rem; } .space-y-3 > * + * { margin-top: .75rem; } .space-y-4 > * + * { margin-top: 1rem; } .space-y-5 > * + * { margin-top: 1.25rem; } .space-y-6 > * + * { margin-top: 1.5rem; }
.space-x-3 > * + * { margin-left: .75rem; }
.list-none { list-style: none; } .pl-0 { padding-left: 0; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; }
.align-middle { vertical-align: middle; } .uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; }
.tracking-wider { letter-spacing: .05em; } .tracking-tight { letter-spacing: 0; } .leading-tight { line-height: 1.2; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.text-\[10px\] { font-size: 10px; line-height: 1rem; }
.text-xs { font-size: .75rem; line-height: 1rem; } .text-sm { font-size: .875rem; line-height: 1.25rem; } .text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .text-5xl { font-size: 3rem; line-height: 1; } .text-6xl { font-size: 3.75rem; line-height: 1; }
.font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; }
.rounded { border-radius: .25rem; } .rounded-lg { border-radius: .5rem; } .rounded-xl { border-radius: .75rem; } .rounded-full { border-radius: 9999px; }
.border { border: 1px solid var(--outline-variant); } .border-t { border-top: 1px solid var(--outline-variant); } .border-b { border-bottom: 1px solid var(--outline-variant); } .border-r { border-right: 1px solid var(--outline-variant); }
.border-red-200 { border-color: #fecaca; } .border-amber-200 { border-color: #fde68a; } .border-orange-200 { border-color: #fed7aa; } .border-blue-200 { border-color: #bfdbfe; } .border-emerald-200 { border-color: #a7f3d0; } .border-gray-200 { border-color: #e5e7eb; }
.border-outline-variant { border-color: var(--outline-variant); } .border-outline { border-color: var(--outline); }
.bg-primary { background: var(--primary); } .bg-primary-container { background: var(--primary-container); } .bg-primary-fixed { background: var(--primary-fixed); }
.bg-surface { background: var(--surface); } .bg-background { background: var(--surface); } .bg-surface-container { background: var(--surface-container); } .bg-surface-container-low { background: var(--surface-low); }
.bg-surface-container-high { background: var(--surface-high); } .bg-surface-container-highest { background: var(--surface-highest); } .bg-surface-container-lowest { background: var(--surface-lowest); }
.bg-error { background: var(--error); } .bg-error-container { background: var(--error-container); } .bg-white\/20 { background: rgba(255,255,255,.2); } .bg-amber-50 { background: #fffbeb; }
.bg-orange-100 { background: #ffedd5; } .bg-red-50 { background: #fef2f2; } .bg-red-100 { background: #fee2e2; } .bg-blue-50 { background: #eff6ff; } .bg-blue-100 { background: #dbeafe; } .bg-emerald-50 { background: #ecfdf5; } .bg-emerald-100 { background: #d1fae5; } .bg-gray-100 { background: #f3f4f6; }
.bg-surface-container-low\/30 { background: rgba(246, 243, 242, .3); }
.bg-surface-variant { background: var(--surface-high); }
.bg-success-container { background: #d1fae5; }
.bg-primary-fixed\/30 { background: rgba(215, 227, 255, .3); }
.bg-danger-container\/10 { background: rgba(255, 218, 214, .25); }
.text-primary { color: var(--primary); } .text-on-primary { color: var(--on-primary); } .text-on-primary-fixed { color: var(--on-primary-fixed); }
.text-on-surface { color: var(--on-surface); } .text-on-surface-variant { color: var(--on-variant); } .text-error { color: var(--error); }
.text-white { color: #fff; } .text-white\/70 { color: rgba(255,255,255,.7); } .text-emerald-500 { color: #10b981; } .text-emerald-600 { color: #059669; } .text-emerald-700 { color: #047857; } .text-emerald-800 { color: #065f46; } .text-orange-700 { color: #c2410c; } .text-orange-800 { color: #9a3412; } .text-red-700 { color: #b91c1c; } .text-red-800 { color: #991b1b; } .text-blue-700 { color: #1d4ed8; } .text-blue-800 { color: #1e40af; } .text-gray-800 { color: #1f2937; } .text-amber-700 { color: #b45309; } .text-amber-800 { color: #92400e; }
.text-on-primary-container { color: #fff; }
.text-on-success-container { color: #065f46; }
.text-danger { color: var(--error); }
.border-danger-container { border-color: #fecaca; }
.border-primary\/20 { border-color: rgba(0, 78, 159, .2); }
.border-primary-container\/20 { border-color: rgba(0, 102, 204, .2); }
.shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,.06); } .opacity-10 { opacity: .1; } .opacity-40 { opacity: .4; } .opacity-50 { opacity: .5; }
.shadow-md { box-shadow: 0 4px 10px rgba(0,0,0,.10); } .shadow-lg { box-shadow: 0 10px 24px rgba(0,0,0,.14); }
.border-2 { border-width: 2px; } .border-on-primary { border-color: var(--on-primary); }
.object-cover { object-fit: cover; }
.text-primary-container { color: #d7e8ff; }
.pointer-events-none { pointer-events: none; } .cursor-not-allowed { cursor: not-allowed; } .transition-colors { transition: color .15s, background-color .15s, border-color .15s; } .transition-opacity { transition: opacity .15s; }
.outline-none { outline: 0; } .not-italic { font-style: normal; } .min-h-\[44px\] { min-height: 44px; } .h-\[calc\(100vh-4rem\)\] { height: calc(100vh - 4rem); }
.hover\:bg-primary-container:hover { background: var(--primary-container); text-decoration: none; } .hover\:bg-surface-container:hover { background: var(--surface-container); text-decoration: none; } .hover\:bg-surface-container-high:hover { background: var(--surface-high); text-decoration: none; } .hover\:bg-surface-container-lowest:hover { background: var(--surface-lowest); text-decoration: none; } .hover\:bg-error-container:hover { background: var(--error-container); text-decoration: none; } .hover\:bg-primary-fixed:hover { background: var(--primary-fixed); text-decoration: none; }
.hover\:text-primary:hover { color: var(--primary); } .hover\:text-error:hover { color: var(--error); } .hover\:text-on-surface:hover { color: var(--on-surface); } .hover\:text-on-primary-fixed:hover { color: var(--on-primary-fixed); } .hover\:underline:hover { text-decoration: underline; }
.hover\:text-on-primary-container:hover { color: #fff; }
.hover\:bg-surface-variant:hover { background: var(--surface-high); text-decoration: none; }
.group:hover .group-hover\:opacity-20 { opacity: .2; }
input, select, textarea { border: 1px solid var(--outline-variant); background: var(--surface); color: var(--on-surface); border-radius: .5rem; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 78, 159, .16); outline: none; }
@media (min-width: 640px) {
  .sm\:block { display: block !important; } .sm\:inline { display: inline !important; } .sm\:flex { display: flex !important; } .sm\:grid { display: grid !important; } .sm\:flex-row { flex-direction: row; } .sm\:items-center { align-items: center; } .sm\:items-end { align-items: flex-end; } .sm\:justify-between { justify-content: space-between; } .sm\:w-48 { width: 12rem; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)); } .sm\:grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (min-width: 768px) {
  .md\:flex { display: flex !important; } .md\:hidden { display: none !important; } .md\:ml-64 { margin-left: 16rem; }
  .md\:pb-0 { padding-bottom: 0; } .md\:p-6 { padding: 1.5rem; } .md\:w-96 { width: 24rem; }
  .md\:left-auto { left: auto; } .md\:right-4 { right: 1rem; } .md\:bottom-4 { bottom: 1rem; }
  .md\:flex-row { flex-direction: row; } .md\:items-center { align-items: center; } .md\:items-start { align-items: flex-start; } .md\:items-end { align-items: flex-end; }
  .md\:justify-between { justify-content: space-between; } .md\:justify-end { justify-content: flex-end; } .md\:justify-start { justify-content: flex-start; } .md\:text-left { text-align: left; }
  .md\:col-span-2 { grid-column: span 2 / span 2; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .md\:sticky { position: sticky; }
  [class~="md:grid-cols-[1fr_180px_auto]"] { grid-template-columns: minmax(0,1fr) 180px auto; }
}
@media (min-width: 1024px) {
  .lg\:flex { display: flex !important; } .lg\:hidden { display: none !important; } .lg\:ml-64 { margin-left: 16rem; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg\:flex-row { flex-direction: row; } .lg\:items-start { align-items: flex-start; } .lg\:justify-between { justify-content: space-between; }
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
  [class~="lg:grid-cols-[1fr_420px]"] { grid-template-columns: minmax(0,1fr) 420px; }
}
@media (min-width: 1280px) {
  .xl\:grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)); } .xl\:grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)); } .xl\:grid-cols-5 { grid-template-columns: repeat(5,minmax(0,1fr)); }
  [class~="xl:grid-cols-[minmax(0,2fr)_minmax(320px,1fr)]"] { grid-template-columns: minmax(0,2fr) minmax(320px,1fr); }
  [class~="xl:grid-cols-[minmax(0,1fr)_minmax(360px,1fr)]"] { grid-template-columns: minmax(0,1fr) minmax(360px,1fr); }
}
@media (max-width: 767px) {
  body { font-size: 15px; width: 100%; } .p-6 { padding: 1rem; } .p-8 { padding: 1.25rem; } .text-5xl { font-size: 2.25rem; } .text-3xl { font-size: 1.5rem; }
  main, #main-content, main > div, .max-w-screen-xl { min-width: 0; max-width: 100%; }
  header > div { padding-left: 1rem !important; padding-right: 1rem !important; width: 100%; }
  article, section, form, fieldset { min-width: 0; max-width: 100%; }
  .grid { min-width: 0; width: 100%; }
  .grid > * { min-width: 0; }
  .flex.items-center.justify-between { min-width: 0; }
  main .flex.items-center.justify-between { flex-wrap: wrap; gap: .75rem; }
  h1, h2, h3, p, a, span, dd, dt { overflow-wrap: anywhere; }
  [data-print] { display: none !important; }
  header[role="banner"] .h-16 { min-width: 0; }
  header[role="banner"] img { width: 44px !important; height: 44px !important; }
  header[role="banner"] .text-xs.leading-tight { display: none; }
  #sidebar-b + #main-content { padding-bottom: 5rem; }
  #sidebar-b + #main-content > div { padding-bottom: 1.5rem; }
  section.grid > article, .grid > .bg-surface { padding: 1rem; }
  article .text-6xl { font-size: 2.5rem; }
  .inline-flex.px-8 { width: 100%; padding-left: 1rem; padding-right: 1rem; }
  footer + nav[aria-label="Navigazione mobile"] {
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -2px 10px rgba(0,0,0,.08);
  }
  nav[aria-label="Navigazione mobile"] a { min-width: 0; padding-left: .15rem; padding-right: .15rem; }
  nav[aria-label="Navigazione mobile"] .text-xs { font-size: .68rem; }
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th, td { min-width: 8rem; }
  input, select, textarea, button { min-height: 44px; }
  .fixed.left-4.right-4 { max-height: calc(100vh - 7rem); overflow-y: auto; }
  #sidebar, #sidebar-b {
    width: min(21rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    position: fixed !important;
    display: flex;
    z-index: 55 !important;
    top: 4rem !important;
    left: 0 !important;
    bottom: 0 !important;
    height: calc(100dvh - 4rem) !important;
    background: var(--surface-lowest) !important;
  }
  body.drawer-open #sidebar:not(.hidden),
  body.drawer-open #sidebar-b:not(.hidden) { transform: none; }
  #sidebar-overlay:not(.hidden) { display: block !important; z-index: 54 !important; }
  #sidebar .overflow-y-auto, #sidebar-b .overflow-y-auto { padding-top: 1rem; }
  #sidebar-b .client-new-declaration-action {
    display: flex !important;
    margin-bottom: 1rem;
    position: sticky;
    top: 0;
    z-index: 2;
  }
  .account-summary { max-width: 44vw; padding-right: .25rem; }
  .account-avatar { width: 34px; height: 34px; }
  .account-panel, .notification-panel { right: -.25rem; width: min(20rem, calc(100vw - 1rem)); }
  .site-header .flex.items-center.gap-2, .site-header .flex.items-center.gap-3 { min-width: 0; }
}

.inline-block { display: inline-block; }
.flex-col-reverse { flex-direction: column-reverse; }
.justify-end { justify-content: flex-end; }
.w-24 { width: 6rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.pt-2 { padding-top: .5rem; }
.bg-white { background: #fff; }
.bg-blue-700 { background: #1d4ed8; }
.text-secondary { color: #3a5f94; }
.text-red-600 { color: #dc2626; }
.text-gray-600 { color: #4b5563; }
.hover\:bg-on-surface:hover { background: var(--on-surface); text-decoration: none; }
.legal-content p { margin: 0 0 1rem; }
.legal-content h2 { font-size: 1.25rem; font-weight: 700; margin: 1.25rem 0 .5rem; }
.legal-content h3 { font-size: 1.05rem; font-weight: 700; margin: 1rem 0 .5rem; }
.legal-content ul, .legal-content ol { margin: .5rem 0 1rem 1.5rem; }
.legal-content a { color: var(--primary); text-decoration: underline; }
.legal-content img { max-width: 100%; height: auto; border: 1px solid var(--outline-variant); border-radius: .5rem; margin: .75rem 0; }
.legal-content { overflow-wrap: anywhere; }
.legal-content li { margin-bottom: .4rem; }

.auth-footer-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr) minmax(180px,.7fr); gap: 2rem; align-items: start; }
.auth-footer-links { display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; }
.auth-footer-bottom { display: flex; justify-content: space-between; gap: 1rem; }
.site-footer { background: transparent; border-top: none; }
.site-footer-inner { max-width: 80rem; margin: 0 auto; padding: 1.25rem 1.5rem; }
.site-footer-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr) minmax(13rem,.75fr); gap: 1.5rem; align-items: start; color: var(--on-variant); font-size: .875rem; }
.site-footer-title { color: var(--on-surface); font-weight: 800; font-size: 1rem; margin: 0 0 .35rem; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--primary); text-decoration: underline; }
.site-footer-meta { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--outline-variant); display: flex; justify-content: space-between; gap: 1rem; color: var(--on-variant); font-size: .8125rem; }
.account-summary { min-height: 40px; max-width: min(20rem, 42vw); display: inline-flex; align-items: center; gap: .55rem; border: 1px solid var(--outline-variant); border-radius: 999px; padding: .2rem .65rem .2rem .25rem; cursor: pointer; background: var(--surface-lowest); overflow: hidden; }
.account-summary::-webkit-details-marker { display: none; }
.account-summary .account-label { min-width: 0; overflow: hidden; }
.account-summary .account-label strong,
.account-summary .account-label span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-avatar { width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: #1f9d8a; color: #fff; font-weight: 800; font-size: .85rem; }
.account-avatar-image { object-fit: cover; background: #fff; border: 1px solid var(--outline-variant); color: transparent; }
.account-label { line-height: 1.05; text-align: left; }
.account-label strong { display: block; max-width: 13rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
.account-label small { color: var(--on-variant); font-size: .68rem; }
.site-header { z-index: 60; box-shadow: 0 1px 0 rgba(0,0,0,.04); }
.global-main { padding-bottom: 6rem; }
.page-container { padding-left: clamp(1rem, 2.4vw, 2rem); padding-right: clamp(1rem, 2.4vw, 2rem); }
.account-panel { position: absolute; top: calc(100% + .5rem); right: 0; z-index: 70; width: min(20rem, calc(100vw - 2rem)); max-height: calc(100dvh - 5rem); overflow-y: auto; border: 1px solid var(--outline-variant); border-radius: .5rem; background: var(--surface-lowest); box-shadow: 0 10px 24px rgba(0,0,0,.14); padding: 1rem; }
.account-panel-link { display: flex; align-items: center; gap: .5rem; padding: .55rem .25rem; border-radius: .35rem; font-weight: 700; }
.account-panel-link:hover { background: var(--surface-container); text-decoration: none; }
.icon-button { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: transparent; color: var(--on-variant); }
.icon-button:hover { background: var(--surface-container); color: var(--primary); text-decoration: none; }
.top-search { max-width: min(34vw, 22rem); }
.top-search input { width: 100%; min-width: 13rem; }
.notification-summary { position: relative; list-style: none; }
.notification-summary::-webkit-details-marker { display: none; }
.notification-badge { position: absolute; top: -.12rem; right: -.12rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .22rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--error); color: #fff; font-size: .65rem; line-height: 1; font-weight: 900; border: 2px solid var(--surface-lowest); box-sizing: border-box; }
.notification-panel { position: absolute; top: calc(100% + .5rem); right: 0; z-index: 70; width: min(24rem, calc(100vw - 2rem)); border: 1px solid var(--outline-variant); border-radius: .6rem; background: var(--surface-lowest); box-shadow: 0 10px 24px rgba(0,0,0,.14); padding: .85rem; }
.notification-panel > p:first-child { padding: .15rem .25rem .65rem; margin: 0; border-bottom: 1px solid var(--outline-variant); }
.notification-link { position: relative; display: block; margin-top: .5rem; padding: .78rem .85rem .78rem 2.05rem; border: 1px solid var(--outline-variant); border-radius: .55rem; background: var(--surface-lowest); font-size: .88rem; line-height: 1.35rem; font-weight: 800; color: var(--on-surface); overflow-wrap: anywhere; }
.notification-link:nth-of-type(even) { background: var(--surface-low); }
.notification-link::before { content: ""; position: absolute; left: .85rem; top: 1rem; width: .55rem; height: .55rem; border-radius: 999px; background: var(--primary); box-shadow: 0 0 0 3px var(--primary-fixed); }
.notification-link:hover { background: var(--primary-fixed); border-color: #93c5fd; text-decoration: none; }
.ticket-code { display: inline-flex; align-items: center; min-height: 1.5rem; border-radius: 999px; background: var(--surface-container); color: var(--primary); padding: .15rem .55rem; font-size: .72rem; line-height: 1rem; font-weight: 900; margin: 0 0 .25rem; }
.ticket-status-open { background: #fbbf24; color: #3f2a00; border-color: #b77900; }
.ticket-state-button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--outline); color: var(--on-surface); background: var(--surface-lowest); padding: .45rem .8rem; border-radius: .5rem; font-size: .85rem; font-weight: 800; }
.ticket-state-button:hover { background: var(--surface-container); text-decoration: none; }
.char-counter { display: flex; width: max-content; margin: .35rem 0 0 auto; padding: .15rem .5rem; border: 1px solid var(--outline-variant); border-radius: 999px; background: var(--surface-container-low); color: var(--on-variant); font-size: .75rem; font-weight: 700; }
.char-counter-warning { border-color: var(--warning); background: #fff8e1; color: #8a5a00; }
.cookie-banner { left: 50%; right: auto; bottom: 1.5rem; width: min(44rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; transform: translateX(-50%); }
.payment-status-badge { min-height: 1.75rem; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; border: 1px solid var(--outline-variant); border-radius: 999px; padding: .25rem .65rem; font-size: .75rem; line-height: 1rem; font-weight: 800; white-space: nowrap; }
.payment-status-unpaid { background: #f3f4f6; color: #374151; border-color: #d1d5db; }
.payment-status-paid { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.payment-status-checking { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.payment-status-error { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.min-w-\[800px\] { min-width: 800px; }
.rounded-2xl { border-radius: 1rem; }
.divide-y > * + * { border-top: 1px solid var(--outline-variant); }
.last\:border-b-0:last-child { border-bottom: 0; }
.panel-card { border: 1px solid var(--outline-variant); border-radius: .5rem; background: var(--surface-lowest); padding: 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.form-control { width: 100%; min-height: 42px; border: 1px solid var(--outline-variant); border-radius: .45rem; background: var(--surface-lowest); color: var(--on-surface); padding: .55rem .75rem; font-size: .9rem; line-height: 1.25rem; outline: none; }
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,89,168,.16); }
.action-bar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; }
.action-button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border-radius: .45rem; padding: .45rem .75rem; font-size: .82rem; font-weight: 800; border: 1px solid var(--outline-variant); white-space: nowrap; }
.action-button:hover { text-decoration: none; }
.action-button-primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.action-button-secondary { background: var(--surface-lowest); color: var(--on-surface); }
/* `action-button-danger` era GIA' USATA e non esisteva.
   La scrive `app.js` sul pulsante di conferma delle azioni distruttive
   (`chiedi(..., pericolo)`): senza questa regola quel pulsante veniva
   disegnato come un pulsante qualunque, e nella finestra «Confermi?» il
   pulsante che cancella era indistinguibile da quello che annulla.
   E' l'esempio da manuale della trappola gia' annotata: una classe che non
   esiste non da' errore, semplicemente non fa niente, e il codice sembra
   giusto. Aggiunta il 23/08/2026. */
.action-button-danger { background: var(--error, #ba1a1a); color: #fff; border-color: var(--error, #ba1a1a); }
.action-button-danger:hover { filter: brightness(.92); }
.filter-actions > * { white-space: nowrap; }
.table-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.table-action { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border: 1px solid var(--outline-variant); border-radius: .5rem; padding: .5rem .8rem; font-size: .84rem; line-height: 1.15rem; font-weight: 800; color: var(--on-variant); white-space: nowrap; }
.table-action:hover { background: var(--surface-container); text-decoration: none; }
.table-action-primary { color: var(--primary); border-color: #bfdbfe; }
.table-action-warning { color: #92400e; border-color: #fde68a; }
.table-action-danger { color: var(--error); border-color: #fecaca; }
.detail-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; }
.detail-list > div { min-width: 0; padding-left: .65rem; border-left: 3px solid var(--primary-fixed); }
.detail-list dt { color: var(--on-variant); font-size: .72rem; line-height: 1rem; text-transform: uppercase; font-weight: 800; }
.detail-list dd { margin: .15rem 0 0; text-align: left; overflow-wrap: anywhere; }
.doc-action-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.doc-action { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border: 1px solid var(--outline-variant); border-radius: .5rem; padding: .45rem .75rem; color: var(--primary); font-size: .85rem; font-weight: 800; background: var(--surface-lowest); white-space: nowrap; }
.doc-action:hover { background: var(--primary-fixed); text-decoration: none; }
.internal-users-list { display: grid; gap: .85rem; }
.internal-user-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1rem; align-items: center; padding: 1rem; border: 1px solid var(--outline-variant); border-radius: .65rem; background: var(--surface-lowest); }
.internal-user-card:nth-child(even) { background: var(--surface-low); }
.internal-user-card.is-disabled { opacity: .68; }
.internal-user-main { display: flex; gap: .85rem; align-items: flex-start; min-width: 0; }
.internal-user-avatar { width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-weight: 900; flex: 0 0 auto; }
.internal-user-meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .6rem; color: var(--on-variant); font-size: .82rem; }
.internal-user-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; }
.internal-user-actions form { margin: 0; }
.status-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: .2rem .55rem; background: var(--surface-container); color: var(--on-variant); font-size: .72rem; line-height: 1rem; font-weight: 800; }
.status-pill-success { background: #d1fae5; color: #047857; }
.email-verification-badge { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; max-width: 100%; border: 1px solid var(--outline-variant); border-radius: 999px; background: var(--surface-container); color: var(--on-variant); padding: .25rem .65rem; font-size: .75rem; line-height: 1rem; font-weight: 800; white-space: nowrap; }
.email-verification-badge.is-verified { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
.doc-action-warning { color: #92400e; border-color: #fde68a; background: #fffbeb; }
.doc-action-small { min-height: 34px; padding: .35rem .55rem; font-size: .78rem; }
.year-filter { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; }
.compact-year-filter select { min-width: 6.5rem; }
.form-footer-actions { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--outline-variant); }
.form-footer-actions > * { flex: 0 1 auto; min-width: max-content; }
.form-cancel-action { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: .75rem; border: 1px solid var(--outline); padding: .75rem 1.25rem; font-size: .875rem; color: var(--on-variant); background: var(--surface-lowest); }
.form-cancel-action:hover { background: var(--surface-container-high); text-decoration: none; }
.detail-link { color: var(--primary); font-weight: 700; }
.detail-link:hover { text-decoration: underline; }
.auto-filter-form { border-radius: .75rem; }
.auto-filter-form button:not(.keep-visible) { min-height: 0; }
.client-kpi-grid > a { display: flex; min-height: 180px; flex-direction: column; justify-content: space-between; border-radius: .75rem; transition: transform .15s, box-shadow .15s, border-color .15s; }
.client-kpi-grid > a:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.08); text-decoration: none; }
.client-kpi-grid .kpi-action { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; color: var(--primary); }
.chat-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.chat-thread { border: 1px solid var(--outline-variant); border-radius: .75rem; background: var(--surface-lowest); overflow: hidden; }
.chat-thread-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--outline-variant); background: var(--surface); }
.chat-thread-header > * { min-width: 0; }
.chat-thread-header > span { align-self: flex-start; flex: 0 0 auto; white-space: nowrap; }
.chat-meta { color: var(--on-variant); font-size: .78rem; margin-top: .2rem; }
.chat-messages { padding: 1rem; background: var(--surface-low); max-height: 28rem; overflow-y: auto; }
.chat-message { display: flex; margin-bottom: .75rem; }
.chat-message:last-child { margin-bottom: 0; }
.chat-message.is-own { justify-content: flex-end; }
.chat-bubble { max-width: min(78%, 42rem); min-width: min(12rem, 100%); border-radius: .75rem; padding: .75rem .9rem; border: 1px solid var(--outline-variant); background: var(--surface-lowest); overflow-wrap: anywhere; }
.chat-message.is-own .chat-bubble { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.chat-author { display: block; font-size: .72rem; font-weight: 800; margin-bottom: .25rem; opacity: .82; }
.chat-time { display: block; font-size: .68rem; margin-top: .35rem; opacity: .72; }
.chat-compose { padding: 1rem; border-top: 1px solid var(--outline-variant); background: var(--surface-lowest); }
.chat-compose-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .75rem; }
.auth-footer { margin: 2.75rem auto 0; width: min(100%, 900px); border-radius: .75rem .75rem 0 0; }
.drawer-mobile { box-shadow: 12px 0 30px rgba(0,0,0,.18); }
.faq-item { border: 1px solid var(--outline-variant); border-radius: .75rem; background: var(--surface-lowest); transition: background .15s, border-color .15s; overflow: hidden; }
.faq-item[open] { background: var(--surface-container-low); border-color: var(--primary-fixed); }
.faq-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; cursor: pointer; padding: 1rem; font-weight: 800; color: var(--on-surface); list-style: none; }
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary span { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 1.35rem; line-height: 1; transition: transform .15s; flex: 0 0 auto; }
.faq-item[open] .faq-summary span { transform: rotate(180deg); }
.faq-item > :not(summary) { padding-left: 1rem; padding-right: 1rem; padding-bottom: 1rem; }
.faq-summary .faq-chevron { width: .7rem; height: .7rem; border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(45deg); transition: transform .18s ease; flex: 0 0 auto; margin-top: .1rem; font-size: 0; line-height: 0; }
.faq-item[open] .faq-summary .faq-chevron { transform: rotate(225deg); }
.bg-surface.rounded-xl details.group { overflow: hidden; border-radius: .75rem; }
.bg-surface.rounded-xl details.group summary { width: 100%; min-height: 3.25rem; padding: .25rem 0; user-select: none; }
.bg-surface.rounded-xl details.group summary span { flex: 0 0 auto; pointer-events: none; }
.faq-panel details.group { border-color: #aeb6c8; box-shadow: 0 1px 0 rgba(0,0,0,.03); }
.faq-panel details.group summary { padding: .9rem 1rem !important; margin: -1rem; min-height: 3.75rem; }
.faq-panel details.group summary::after {
  content: "Apri";
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  border: 1px solid var(--outline-variant);
  border-radius: 999px;
  padding: .35rem .65rem;
  color: var(--primary);
  background: var(--surface-lowest);
  font-size: .78rem;
  font-weight: 800;
  white-space: nowrap;
}
.faq-panel details.group[open] summary::after { content: "Chiudi"; }
.faq-panel details.group[open] { border-color: var(--primary); }

@media (max-width: 767px) {
  .auth-footer-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .auth-footer-bottom { flex-direction: column; text-align: left; }
  .site-footer-grid { grid-template-columns: 1fr; }
  .site-footer-meta { flex-direction: column; }
  .top-search { max-width: none; }
  .chat-thread-header { flex-direction: column; }
  .chat-messages { max-height: 22rem; }
  .chat-bubble { max-width: 94%; min-width: 0; }
  .chat-compose-actions, .form-footer-actions { justify-content: stretch; flex-wrap: wrap; }
  .chat-compose-actions button, .form-footer-actions > * { width: 100%; min-width: 0; }
  .internal-user-card { grid-template-columns: 1fr; }
  .internal-user-actions { justify-content: stretch; }
  .internal-user-actions > *, .internal-user-actions .table-action { width: 100%; }
  .doc-action-row { align-items: stretch; }
  .doc-action { width: 100%; white-space: normal; }
  .year-filter { justify-content: flex-start; }
  .faq-summary { align-items: flex-start; }
  .action-bar { justify-content: flex-start; }
  .action-button { flex: 0 1 auto; white-space: normal; }
  .detail-list { grid-template-columns: 1fr; }
}

/* === UI REFINEMENT — BORDI ARROTONDATI E STILE MATERIAL CLEAN === */
.bg-surface-container-lowest,
.bg-surface,
.bg-surface-container-low,
article,
section.grid > article,
.chat-thread,
.faq-item {
  border-radius: 14px !important;
}

/* Sidebar Navigation Pills */
#sidebar nav a,
#sidebar-desktop nav a,
#sidebar-b nav a {
  border-radius: 12px !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#sidebar nav a.bg-primary-fixed,
#sidebar-desktop nav a.bg-primary-fixed,
#sidebar-b nav a.bg-primary-fixed,
.bg-primary-fixed {
  background-color: #e8f0fe !important;
  color: #0b57d0 !important;
  font-weight: 700 !important;
}

#sidebar nav a.bg-primary-fixed .material-symbols-outlined,
#sidebar-desktop nav a.bg-primary-fixed .material-symbols-outlined,
#sidebar-b nav a.bg-primary-fixed .material-symbols-outlined {
  color: #0b57d0 !important;
}

/* Rounded Inputs, Selects, Buttons */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
  border-radius: 10px !important;
  border: 1px solid #dadce0 !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus, select:focus, textarea:focus {
  border-color: #0b57d0 !important;
  box-shadow: 0 0 0 3px rgba(11, 87, 208, 0.15) !important;
}

button, .btn, .action-button {
  border-radius: 10px !important;
}

button.bg-primary, .bg-primary {
  background-color: #0b57d0 !important;
}

/* Rounded Status Badges / Pills */
[class*="rounded-full"],
.badge,
.status-badge {
  border-radius: 9999px !important;
}

/* Soft Badge Colors (Google Style) */
.bg-emerald-100, .bg-green-100, .is-verified {
  background-color: #e6f4ea !important;
  color: #137333 !important;
  border: 1px solid #ceead6 !important;
}

.bg-amber-100, .bg-yellow-100 {
  background-color: #fef7e0 !important;
  color: #b06000 !important;
  border: 1px solid #feefc3 !important;
}

.bg-red-100, .bg-rose-100 {
  background-color: #fce8e6 !important;
  color: #c5221f !important;
  border: 1px solid #fad2cf !important;
}

.bg-gray-100, .bg-slate-100 {
  background-color: #f1f3f4 !important;
  color: #5f6368 !important;
  border: 1px solid #dadce0 !important;
}

/* Chat Speech Bubbles */
.chat-bubble {
  border-radius: 16px !important;
  padding: 0.85rem 1.1rem !important;
}

.chat-message:not(.is-own) .chat-bubble {
  background-color: #f1f3f4 !important;
  color: #202124 !important;
  border: 1px solid #e0e0e0 !important;
}

.chat-message.is-own .chat-bubble {
  background-color: #004e9f !important;
  color: #ffffff !important;
  border: 1px solid #004e9f !important;
}

@media print {
  @page { margin: 14mm; }
  html, body {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 10.5pt;
    line-height: 1.35;
  }
  header, #sidebar, #sidebar-b, footer, .print\:hidden {
    display: none !important;
  }
  main, #main-content, main > div, .max-w-screen-xl,
  .bg-surface-container-lowest, .bg-surface, .bg-surface-container-low, .bg-surface-container-high {
    background: #fff !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .flex-1 {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  main > div {
    padding: 0 !important;
  }
  .max-w-screen-xl {
    max-width: none !important;
  }
  .border, .border-t, .border-b, .border-r {
    border-color: #777 !important;
  }
  .rounded-lg, .rounded-xl {
    border-radius: 0 !important;
  }
  a {
    color: #000 !important;
    text-decoration: none !important;
  }
  table {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: collapse !important;
    overflow: visible !important;
  }
  thead { display: table-header-group !important; }
  tfoot { display: table-footer-group !important; }
  tbody { display: table-row-group !important; }
  .overflow-hidden, .overflow-x-auto, .overflow-y-auto, [class*="max-h-"] {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  th, td {
    min-width: 0 !important;
    border-bottom: 1px solid #bbb !important;
    padding: 6px 8px !important;
    overflow-wrap: anywhere;
  }
  tr, article {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  section {
    break-inside: auto;
    page-break-inside: auto;
  }
}

/* =========================================================================
   COMPLETAMENTO E COERENZA — aggiunto nella revisione grafica
   1. Utility usate nei template ma non ancora definite (spaziature, testo,
      colori, stati hover/focus): senza queste alcune pagine risultavano
      spaziate o colorate in modo diverso dalle altre.
   2. Uniformazione di raggi, ombre e schede fra le pagine.
   3. Ottimizzazione per smartphone e tablet.
   ========================================================================= */

/* --- 1a. Posizionamento e dimensioni --- */
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.left-1\/2 { left: 50%; }
.bottom-6 { bottom: 1.5rem; }
.-translate-x-1\/2 { transform: translateX(-50%); }
.h-4 { height: 1rem; } .h-5 { height: 1.25rem; } .h-10 { height: 2.5rem; }
.w-4 { width: 1rem; } .w-5 { width: 1.25rem; } .w-10 { width: 2.5rem; }
.max-w-xs { max-width: 20rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-h-48 { max-height: 12rem; overflow-y: auto; }
.w-\[calc\(100\%-2rem\)\] { width: calc(100% - 2rem); }
.min-w-\[600px\] { min-width: 600px; }
.items-end { align-items: flex-end; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.border-collapse { border-collapse: collapse; }

/* --- 1b. Spaziature --- */
.-ml-2 { margin-left: -.5rem; }
.mb-1 { margin-bottom: .25rem; }
.mb-3 { margin-bottom: .75rem; }
.mb-7 { margin-bottom: 1.75rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }
.ml-2 { margin-left: .5rem; }
.ml-5 { margin-left: 1.25rem; }
.mr-1 { margin-right: .25rem; }
.p-0 { padding: 0; }
.p-12 { padding: 3rem; }
.pt-3 { padding-top: .75rem; }
.pt-6 { padding-top: 1.5rem; }
.pb-4 { padding-bottom: 1rem; }
.pl-5 { padding-left: 1.25rem; }
.pr-4 { padding-right: 1rem; }
.pr-12 { padding-right: 3rem; }
.px-1\.5 { padding-left: .375rem; padding-right: .375rem; }
.px-2\.5 { padding-left: .625rem; padding-right: .625rem; }
.py-0\.5 { padding-top: .125rem; padding-bottom: .125rem; }
.py-3\.5 { padding-top: .875rem; padding-bottom: .875rem; }
.py-7 { padding-top: 1.75rem; padding-bottom: 1.75rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }

/* --- 1c. Tipografia --- */
.font-sans { font-family: "Titillium Web", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace; }
.font-black { font-weight: 900; }
.leading-relaxed { line-height: 1.625; }
.underline { text-decoration: underline; }
.tracking-wide { letter-spacing: .025em; }
.tracking-widest { letter-spacing: .1em; }
.tracking-\[0\.24em\] { letter-spacing: .24em; }
.tracking-\[0\.35em\] { letter-spacing: .35em; }
.tracking-\[0\.5em\] { letter-spacing: .5em; }
.text-\[11px\] { font-size: 11px; line-height: 1rem; }
.text-\[14px\] { font-size: 14px; line-height: 1.25rem; }
.text-\[16px\] { font-size: 16px; line-height: 1.5rem; }
.text-\[18px\] { font-size: 18px; line-height: 1.5rem; }
.text-\[20px\] { font-size: 20px; line-height: 1.75rem; }
.list-disc { list-style: disc; }
.list-decimal { list-style: decimal; }
.list-disc, .list-decimal { padding-left: 1.25rem; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.select-none { -webkit-user-select: none; user-select: none; }
.cursor-pointer { cursor: pointer; }

/* --- 1d. Colori mancanti (allineati alla palette del portale) --- */
.bg-black\/50 { background: rgba(0, 0, 0, .5); }
.bg-surface-lowest { background: var(--surface-lowest); }
.bg-green-50 { background: #f0fdf4; }
.border-green-200 { border-color: #bbf7d0; }
.text-green-800 { color: #166534; }
.border-gray-100 { border-color: #f3f4f6; }
.border-red-300 { border-color: #fca5a5; }
.border-primary { border-color: var(--primary); }
.border-primary-fixed-dim { border-color: var(--primary-fixed-dim); }
.text-blue-600 { color: #2563eb; }
.text-blue-900 { color: #1e3a8a; }
.text-emerald-900 { color: #064e3b; }
.text-red-900 { color: #7f1d1d; }
.text-gray-900 { color: #111827; }
.text-gray-500 { color: #6b7280; }
.text-warning { color: var(--warning); }
.divide-outline-variant > * + * { border-color: var(--outline-variant); }

/* --- 1e. Opacita, transizioni e animazioni --- */
.opacity-20 { opacity: .2; }
.opacity-80 { opacity: .8; }
.transition-all { transition: all .15s ease; }
.transition-shadow { transition: box-shadow .15s ease; }
@keyframes app-spin { to { transform: rotate(360deg); } }
.animate-spin { animation: app-spin 1s linear infinite; }

/* Attesa dei filtri tabelle (Area Comune e portale gestori): app.js imposta
   aria-busy sul contenitore durante il caricamento del frammento. Solo
   opacity/transform, nessun reflow. La barra in cima usa scaleX. */
[aria-busy="true"] { position: relative; opacity: .55; transition: opacity .15s ease; pointer-events: none; }
[aria-busy="true"]::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--primary);
  transform-origin: left center;
  animation: barra-caricamento 1.1s ease-in-out infinite alternate;
}
@keyframes barra-caricamento { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .animate-spin { animation-duration: 3s; }
  [aria-busy="true"] { opacity: 1; }
  [aria-busy="true"]::after { animation: none; opacity: .35; }
  * { scroll-behavior: auto !important; }
}

/* --- 1f. Stati hover / focus / open --- */
.hover\:bg-primary:hover { background: var(--primary); text-decoration: none; }
.hover\:bg-primary-dark:hover { background: #003b78; text-decoration: none; }
.hover\:bg-primary-hover:hover { background: var(--primary-container); text-decoration: none; }
.hover\:bg-surface-container-low:hover { background: var(--surface-low); text-decoration: none; }
.hover\:text-on-primary:hover { color: var(--on-primary); }
.hover\:text-primary-container:hover { color: var(--primary-container); }
.hover\:no-underline:hover { text-decoration: none; }
.group:hover .group-hover\:text-on-surface { color: var(--on-surface); }
details[open].open\:bg-surface-container-low { background: var(--surface-low); }
.focus\:outline-none:focus { outline: none; }
.focus\:border-primary:focus { border-color: var(--primary); }
.focus\:ring-1:focus,
.focus\:ring-2:focus { box-shadow: 0 0 0 3px rgba(0, 78, 159, .18); }
.focus\:ring-primary:focus,
.focus\:ring-primary\/20:focus { box-shadow: 0 0 0 3px rgba(0, 78, 159, .18); }
.focus\:ring-opacity-20:focus { box-shadow: 0 0 0 3px rgba(0, 78, 159, .18); }
/* La messa a fuoco da tastiera resta sempre visibile anche con .focus:outline-none */
.focus\:outline-none:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* Griglia specifica dello storico dichiarazioni */
@media (min-width: 1280px) {
  [class~="xl:grid-cols-[minmax(240px,360px)_minmax(240px,1fr)]"] {
    grid-template-columns: minmax(240px, 360px) minmax(240px, 1fr);
  }
}
@media (min-width: 768px) {
  .md\:top-16 { top: 4rem; }
  [class~="md:h-[calc(100vh-4rem)]"] { height: calc(100vh - 4rem); }
}
@media (min-width: 640px) {
  .sm\:flex-wrap { flex-wrap: wrap; }
  .sm\:justify-end { justify-content: flex-end; }
  .sm\:items-start { align-items: flex-start; }
  .sm\:text-left { text-align: left; }
  .sm\:w-auto { width: auto; }
  .sm\:p-6 { padding: 1.5rem; }
  .sm\:p-8 { padding: 2rem; }
}

/* --- 2. Coerenza visiva fra le pagine --- */

/* Tutte le schede usano lo stesso raggio: prima convivevano 8, 12, 14 e 16px */
.rounded-xl, .rounded-2xl { border-radius: var(--radius-lg); }
.rounded-lg { border-radius: var(--radius-sm); }

/* Ombra unica per le schede in rilievo */
.shadow-sm { box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .04); }

/* Titolo di pagina: stessa gerarchia su tutte le schermate, con scala fluida
   fra telefono e desktop invece del salto secco al breakpoint */
main h1.text-3xl { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 1.875rem); line-height: 1.2; letter-spacing: -.01em; }

/* La barra laterale desktop torna bianca come previsto dal markup */
#sidebar-b, #sidebar { background: var(--surface-lowest); }

/* Intestazioni di tabella coerenti e sempre leggibili durante lo scorrimento */
thead th { background: var(--surface-low); }

/* Contenitori con scorrimento orizzontale: ombra laterale che segnala
   la presenza di altre colonne (utile soprattutto da telefono) */
.overflow-x-auto {
  background-image:
    linear-gradient(90deg, var(--surface-lowest) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(90deg, rgba(255, 255, 255, 0), var(--surface-lowest) 70%),
    radial-gradient(farthest-side at 0 50%, rgba(28, 27, 27, .14), rgba(28, 27, 27, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(28, 27, 27, .14), rgba(28, 27, 27, 0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* Spazio finale della pagina: prima erano riservati 6rem per una barra
   di navigazione mobile che non esiste in questo portale */
.global-main { padding-bottom: var(--page-bottom-space); }

/* Footer del portale, allineato a quello delle pagine di accesso */
.site-footer { margin-top: 2.5rem; border-top: 1px solid var(--outline-variant); background: var(--surface-lowest); }
.site-footer-inner { max-width: 1280px; margin: 0 auto; padding: 1.5rem clamp(1rem, 2.4vw, 2rem); }

/* --- 3. Ottimizzazione per tablet e smartphone --- */
@media (max-width: 1023px) {
  .client-kpi-grid > a { min-height: 150px; }
}

@media (max-width: 767px) {
  :root { --page-bottom-space: 4.5rem; }
  #sidebar-b + #main-content, #sidebar + #main-content { padding-bottom: var(--page-bottom-space); }

  /* Evita lo zoom automatico di iOS alla messa a fuoco dei campi:
     serve una dimensione di almeno 16px */
  input, select, textarea { font-size: 16px; }

  /* Tabelle piu compatte: prima ogni cella era larga almeno 8rem e le
     tabelle a 6 colonne diventavano larghissime */
  th, td { min-width: 6rem; padding-left: .625rem; padding-right: .625rem; }
  th.px-5, td.px-5, th.px-4, td.px-4 { padding-left: .75rem; padding-right: .75rem; }
  th { font-size: .7rem; }
  table { font-size: .8125rem; }
  .min-w-\[800px\] { min-width: 640px; }
  .min-w-\[600px\] { min-width: 560px; }

  /* Aree toccabili di almeno 44px anche per i link a forma di pulsante */
  .doc-action, .table-action, .action-button, .ticket-state-button,
  .form-cancel-action, .kpi-action, .pagination-btn { min-height: 44px; }
  .doc-action-small { min-height: 40px; }

  /* Schede e riquadri: padding uniforme su tutte le pagine */
  .p-5, .p-8, .p-12 { padding: 1.25rem; }
  .py-10 { padding-top: 1.75rem; padding-bottom: 1.75rem; }
  .p-12 { padding-top: 2rem; padding-bottom: 2rem; }
  .rounded-2xl { border-radius: var(--radius-lg); }

  /* Titoli leggermente ridotti per non andare a capo */
  .text-4xl { font-size: 1.75rem; line-height: 2.25rem; }
  .text-2xl { font-size: 1.35rem; line-height: 1.9rem; }

  /* Filtri e intestazioni con azioni: elementi a piena larghezza */
  .year-filter, .compact-year-filter { width: 100%; }
  .compact-year-filter select { flex: 1 1 auto; min-width: 0; }

  /* Griglie a due colonne troppo strette sotto i 380px */
  .grid-cols-2 { gap: .5rem; }

  /* Riquadri di avviso: icona e testo allineati anche su schermi stretti */
  [role="alert"], [role="status"] { overflow-wrap: anywhere; }

  /* Il banner dei cookie non deve coprire i pulsanti in fondo alla pagina */
  .cookie-banner { bottom: .75rem; padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
}

/* Su telefono in verticale due colonne di campi risultano troppo strette:
   moduli e riquadri passano a una sola colonna */
@media (max-width: 480px) {
  .grid-cols-2 { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  .account-summary { max-width: 40vw; }
  main h1.text-3xl { font-size: 1.3rem; }
}

/* Rispetta le aree sicure dei telefoni con notch anche in orizzontale */
@supports (padding: max(0px)) {
  .page-container {
    padding-left: max(clamp(1rem, 2.4vw, 2rem), env(safe-area-inset-left));
    padding-right: max(clamp(1rem, 2.4vw, 2rem), env(safe-area-inset-right));
  }
}

/* =========================================================================
   BARRA SUPERIORE E PANNELLO DI NAVIGAZIONE — revisione
   Tre problemi risolti insieme:
   a) l'intestazione "sticky" in realta non restava in alto: scorrendo spariva;
   b) la barra a tutta larghezza aveva gli angoli arrotondati appiccicati ai
      bordi dello schermo;
   c) a pannello aperto dopo uno scorrimento restava un angolo a 90 gradi a
      meta schermo, perche il pannello partiva da un'altezza fissa di 4rem
      calcolata sull'intestazione che nel frattempo era sparita.
   ========================================================================= */

/* --- a) Ripristino dello sticky ------------------------------------------
   `overflow-x: hidden` su body lo trasforma in un contenitore di scorrimento
   e annulla `position: sticky` degli elementi interni. `clip` ottiene lo
   stesso effetto anti-sbordamento senza creare il contenitore.
   La regola con `hidden` resta come ripiego per i browser piu vecchi. */
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}

/* --- b) La barra non ha angoli arrotondati quando tocca i bordi ---------- */
.site-header { border-radius: 0 !important; }

/* --- Portale gestori: barra flottante ------------------------------------
   Vale solo per chi ha la classe `site-header--floating` (il portale gestori).
   L'Area Comune usa la stessa classe `site-header` ma resta attaccata ai bordi,
   come richiesto. */
@media (max-width: 767px) {
  .site-header--floating {
    position: sticky;
    top: .5rem;
    margin: .5rem;
    border: 1px solid var(--outline-variant) !important;
    border-radius: 16px !important;
    background: var(--surface-lowest);
    box-shadow: 0 6px 20px rgba(16, 24, 40, .10), 0 2px 6px rgba(16, 24, 40, .06);
    /* Niente overflow:hidden qui: ritaglierebbe le tendine di notifiche e
       account, che sono posizionate in modo assoluto sotto la barra. */
  }
  /* Piu respiro fra il cerchio dell'account e il bordo della barra flottante */
  .site-header--floating .desktop-header { padding-left: 1rem; padding-right: 1rem; }
  .site-header--floating .h-16 { height: 3.5rem; }
  .site-header--floating img { width: 36px !important; height: 36px !important; }

  /* Il contenuto scorre sotto una barra che ora e sempre visibile */
  .global-main { padding-top: .25rem; }
}

/* --- c) Pannello di navigazione ------------------------------------------
   Parte dal bordo superiore dello schermo: non dipende piu dalla posizione
   dell'intestazione, quindi l'angolo a meta schermo non puo piu comparire. */
@media (max-width: 767px) {
  #sidebar, #sidebar-b {
    top: 0 !important;
    height: 100dvh !important;
    z-index: 70 !important;
  }
  #sidebar-overlay:not(.hidden) { z-index: 65 !important; }

  /* Portale gestori: pannello flottante, coerente con la barra */
  #sidebar-b {
    top: .5rem !important;
    left: .5rem !important;
    bottom: .5rem !important;
    height: auto !important;
    width: min(20rem, calc(100vw - 1rem));
    max-width: calc(100vw - 1rem);
    border: 1px solid var(--outline-variant);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(16, 24, 40, .22);
    overflow: hidden;
  }
  #sidebar-b .overflow-y-auto { padding-top: .75rem; }

  /* Area Comune: pannello a tutta altezza attaccato al bordo, come richiesto */
  #sidebar {
    left: 0 !important;
    bottom: 0 !important;
    border-radius: 0 !important;
    box-shadow: 12px 0 30px rgba(16, 24, 40, .18);
  }
}

/* L'Area Comune mostra il pannello fino a 1023px: in questa fascia il markup
   non imposta alcuna altezza, quindi il pannello si fermava all'altezza del
   contenuto lasciando un bordo netto a meta schermo. */
@media (min-width: 768px) and (max-width: 1023px) {
  #sidebar {
    top: 0 !important;
    bottom: 0 !important;
    height: 100dvh !important;
    z-index: 70 !important;
    border-radius: 0 !important;
    box-shadow: 12px 0 30px rgba(16, 24, 40, .18);
  }
  #sidebar-overlay:not(.hidden) { z-index: 65 !important; }
  .drawer-mobile .drawer-close-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem .75rem .25rem;
  }
}

/* --- Pulsante del menu: stesso aspetto degli altri pulsanti-icona ---------
   Non aveva ne classe di sfondo ne bordo, quindi mostrava lo stile predefinito
   del browser: riquadro grigio con bordo nero "outset", per giunta arrotondato
   a 10px dalla regola generale sui bottoni. */
#menu-toggle {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px !important;
  background: transparent;
  color: var(--on-variant);
  transition: background-color .15s, color .15s;
}
#menu-toggle:hover { background: var(--surface-container); color: var(--primary); }

/* --- Sottolineatura in hover solo dove serve -----------------------------
   La regola generale `a:hover { text-decoration: underline }` sottolineava
   qualunque collegamento, quindi anche le voci del menu laterale e le schede
   cliccabili, dove finiva sottolineato tutto il contenuto, icone comprese.
   Ora la sottolineatura resta solo sui collegamenti testuali veri. */
a:hover { text-decoration: none; }
a.hover\:underline:hover,
a.underline,
p a:hover,
li a:hover,
dd a:hover,
small a:hover,
.legal-content a:hover,
.faq-panel a:hover { text-decoration: underline; }

/* I contenitori cliccabili non si sottolineano mai, nemmeno al loro interno */
nav a:hover,
.sidebar a:hover,
#sidebar a:hover,
#sidebar-b a:hover,
#sidebar-desktop a:hover,
.client-kpi-grid > a:hover,
.icon-button:hover,
.account-panel-link:hover,
.notification-link:hover,
.doc-action:hover,
.table-action:hover,
.action-button:hover,
.btn:hover,
.brand:hover,
article a:hover:has(.material-symbols-outlined) { text-decoration: none; }

nav a:hover *,
.sidebar a:hover *,
#sidebar a:hover *,
#sidebar-b a:hover *,
#sidebar-desktop a:hover *,
.client-kpi-grid > a:hover *,
.notification-link:hover *,
.account-panel-link:hover * { text-decoration: none; }

/* --- Pastiglia dell'account: su telefono l'etichetta e nascosta -----------
   Con il solo avatar dentro, il padding asimmetrico (4px a sinistra, 10,4px a
   destra) rendeva ovale quello che deve essere un cerchio. */
@media (max-width: 767px) {
  .account-summary {
    max-width: none;
    padding: .25rem;
    gap: 0;
  }
  .account-avatar { width: 34px; height: 34px; }

  /* Il pulsante del menu resta un cerchio anche con l'altezza minima di 44px
     imposta a tutti i pulsanti per la comodita di tocco. */
  #menu-toggle { width: 44px; height: 44px; }

  /* --- Tendine di notifiche e account --------------------------------------
     Erano ancorate al proprio pulsante, ma larghe quanto lo schermo: quella
     delle notifiche finiva 48px fuori dal bordo sinistro. Su telefono
     diventano una scheda a tutta larghezza sotto la barra. */
  .notification-panel,
  .account-panel {
    position: fixed;
    top: 4.5rem;
    left: .75rem;
    right: .75rem;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 6rem);
  }
}

/* Riga di chiusura del pannello: l'aspetto e sempre definito, la visibilita
   dipende dalla larghezza (il pannello copre il pulsante che lo ha aperto). */
.drawer-close-row { display: none; }
.drawer-close-row .drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 40px;
  padding: .35rem .75rem;
  border: 1px solid var(--outline-variant);
  border-radius: 999px;
  background: var(--surface-lowest);
  color: var(--on-variant);
  font-size: .8125rem;
  font-weight: 700;
}
.drawer-close-row .drawer-close:hover { background: var(--surface-container); color: var(--primary); }
.drawer-close-row .drawer-title { font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--on-variant); }

@media (max-width: 767px) {
  .drawer-mobile .drawer-close-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem .75rem .25rem;
  }
}

/* ============================================================
   Cosa devi fare adesso — pannello di apertura del portale gestori
   ============================================================
   Fino al 15/08/2026 la dashboard enunciava le scadenze del
   Regolamento ma non diceva mai quali adempimenti mancassero
   davvero: il gestore doveva ricordarseli. Questo blocco elenca
   le cose aperte, in ordine di urgenza, con un solo pulsante per
   ciascuna. */

.da-fare { display: grid; gap: .75rem; }

.da-fare-voce {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1rem;
  border: 1px solid var(--outline-variant);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  background: var(--surface-lowest);
}
.da-fare-voce--ritardo { border-left-color: var(--error); background: #fff6f5; }
.da-fare-voce--scade   { border-left-color: var(--warning); background: #fffaf2; }
.da-fare-voce--aperto  { border-left-color: var(--primary); }

.da-fare-titolo { font-weight: 800; color: var(--on-surface); }
.da-fare-dettaglio { font-size: .875rem; color: var(--on-variant); }

.da-fare-chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.da-fare-chip--ritardo { background: var(--error-container); color: var(--error); }
.da-fare-chip--scade   { background: #fde9cf; color: var(--warning); }
.da-fare-chip--aperto  { background: var(--primary-fixed); color: var(--on-primary-fixed); }

.da-fare-azione {
  align-self: flex-start;
  margin-top: .35rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 800;
  color: var(--primary);
  text-decoration: none;
}
.da-fare-azione:hover { text-decoration: underline; }

.da-fare-vuoto {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: 1rem;
  border: 1px solid #a7d9c4;
  border-radius: var(--radius-md);
  background: #eefaf4;
  color: #04543c;
}

/* ============================================================
   Indicatori radiali
   ============================================================
   SVG in linea: nessuna libreria esterna da caricare, nessun
   problema con la CSP e nessun grafico che scompare se il
   browser blocca uno script. Il cerchio è disegnato con
   stroke-dasharray, e il valore è ripetuto in testo per chi
   usa uno screen reader. */

.radiali { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.radiale {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1.25rem 1rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-lowest);
  text-align: center;
}
.radiale svg { display: block; transform: rotate(-90deg); }
.radiale .radiale-traccia { stroke: var(--surface-highest); }
.radiale .radiale-valore  { stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.radiale--ok         .radiale-valore { stroke: var(--success); }
.radiale--attenzione .radiale-valore { stroke: var(--warning); }
.radiale--critico    .radiale-valore { stroke: var(--error); }

/* La cifra al centro prende il colore da `color`, non direttamente da
   `fill`. Il tema scuro è prodotto a runtime da Dark Reader, che riscrive
   solo le proprietà che riconosce come testo — color, caret-color,
   -webkit-text-fill-color: davanti a un `fill` che punta a una variabile
   non interviene affatto. Il risultato era la percentuale rimasta nera
   sulla scheda diventata nera, 1,22:1, cioè illeggibile. Passando per
   `color` la cifra viene schiarita insieme a tutto il resto del testo,
   e in tema chiaro il colore risolto resta lo stesso di prima. */
/* La cifra e' HTML sovrapposto all'anello, non piu' un <text> dentro l'SVG.
   Il giro precedente (color + fill:currentColor) era gia' meglio del `fill`
   diretto, ma Dark Reader tratta gli SVG per conto suo: sulla stessa scheda
   l'etichetta in <p> diventava bianca e la percentuale dentro l'SVG restava
   scura, cioe' illeggibile sul fondo nero — pur leggendo tutte e due
   var(--on-surface). Fuori dall'SVG la cifra segue esattamente la sorte
   dell'etichetta, che si vede funzionare.
   Vantaggio secondario: non serve piu' il rotate(90) che annullava il
   rotate(-90) dell'SVG, e il testo si puo' selezionare e ingrandire. */
.radiale-quadro { position: relative; display: inline-flex; }
.radiale-cifra {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 800; color: var(--on-surface);
  pointer-events: none;
}
.radiale-etichetta { font-weight: 800; color: var(--on-surface); font-size: .9375rem; }
.radiale-nota { font-size: .8125rem; color: var(--on-variant); }

/* ============================================================
   Prossimo passo — chiusura delle pagine operative
   ============================================================ */

.prossimo-passo {
  margin-top: 2rem;
  padding: 1.25rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-lowest);
}
.prossimo-passo h2 { margin: 0 0 .35rem; font-size: 1rem; font-weight: 800; color: var(--on-surface); }
.prossimo-passo p  { margin: 0; font-size: .875rem; color: var(--on-variant); }
.prossimo-passo ol { margin: .75rem 0 0; padding-left: 1.25rem; font-size: .875rem; color: var(--on-variant); }
.prossimo-passo li + li { margin-top: .35rem; }
.prossimo-passo .prossimo-passo-azione {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .85rem;
  font-weight: 800;
  color: var(--primary);
  text-decoration: none;
}
.prossimo-passo .prossimo-passo-azione:hover { text-decoration: underline; }

/* Filtro anno: il pulsante non è più decorativo, perché il menu non
   invia più il modulo da solo (era l'ultimo onchange="this.form.submit()"
   rimasto nel portale gestori). */
.year-filter .year-filter-submit {
  padding: .5rem .9rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
  background: var(--surface-lowest);
  color: var(--primary);
  font-weight: 800;
  font-size: .875rem;
  cursor: pointer;
}
.year-filter .year-filter-submit:hover { background: var(--surface-container); }

/* =========================================================================
   PULSANTE DEL TEMA
   =========================================================================
   Il tema scuro non e' piu' scritto qui: lo calcola Dark Reader, che e'
   ospitato in `assets/darkreader.min.js` e lavora sull'intera pagina.
   Il foglio di stile resta quello chiaro, uno solo, come prima del
   15/08/2026: e' anche il motivo per cui non ci sono piu' pagine con
   meta' dei riquadri illeggibili.

   Qui resta soltanto l'aspetto del pulsante nella barra in alto. */

/* Il pulsante nella barra in alto */
.tema-toggle { position: relative; }
/* L icona segue lo stato dichiarato dal pulsante stesso: niente media query
   e niente attributi sul documento, cosi il tema chiaro resta il
   predefinito per tutti finche qualcuno non preme. */
.tema-toggle .tema-icona-scuro { display: none; }
.tema-toggle[aria-pressed="true"] .tema-icona-chiaro { display: none; }
.tema-toggle[aria-pressed="true"] .tema-icona-scuro { display: inline-flex; }


/* =========================================================================
   STAMPA — meno carta, piu leggibile
   =========================================================================
   Rivisto il 15/08/2026. Il blocco @media print precedente sistemava gia i
   fondi e le tabelle; qui si aggiunge quello che fa la differenza sul
   consumo di carta: togliere dalla pagina stampata tutto cio che su carta
   non serve, e impedire le interruzioni di pagina nei punti sbagliati.

   Le pagine dell Area Comune sono lunghe: senza queste regole una
   stampa di «Dichiarazioni e pagamenti» usava anche il doppio dei fogli
   necessari, con righe spezzate a meta fra un foglio e l altro. */

@media print {
  @page { size: A4; margin: 12mm 12mm 14mm 12mm; }

  body { font-size: 9.5pt; line-height: 1.3; }

  /* Su carta non serve: non e cliccabile. */
  .tema-toggle, .icon-button, .notification-menu, .account-menu,
  .da-fare-azione, .prossimo-passo-azione, .year-filter,
  .pagination, .pagination-btn, .skip-link, .drawer-close-row,
  form[data-filtro-tabella], .filtro-tabella-form,
  button, input[type="submit"], input[type="button"],
  .action-button, .doc-action, .client-new-declaration-action,
  #sidebar-overlay, .cookie-banner, .faq-chevron {
    display: none !important;
  }

  /* I moduli di caricamento e ricerca: su carta sono spazio sprecato. */
  input[type="file"], input[type="search"], textarea:not([data-stampa]) {
    display: none !important;
  }

  /* I riquadri diventano leggeri: niente ombre e niente fondi pieni, che
     su una stampante consumano toner senza aggiungere informazione. */
  .bg-surface, .bg-surface-container, .bg-surface-container-low,
  .bg-surface-container-lowest, .bg-surface-container-high,
  .da-fare-voce, .radiale, .prossimo-passo, .faq-panel {
    box-shadow: none !important;
    background: #fff !important;
    padding: 6px 8px !important;
    margin-bottom: 6px !important;
  }

  /* ⚠️ «NON TAGLIARE» VA CHIESTO SOLO PER I PEZZI PICCOLI — 26/08/2026.
     Qui l'elenco comprendeva `section > div`, `.rounded-xl` e
     `.rounded-lg`: classi che stanno addosso ai CONTENITORI di pagina,
     non alle singole schede. Chiedere di non spezzare un contenitore
     alto due terzi di foglio ha un effetto solo: non ci sta dov'e', e
     slitta tutto al foglio dopo. Da qui la prima pagina con il solo
     titolo e mezzo foglio bianco, segnalata dal committente.
     Si tiene unito quello che perde senso spezzato — una scheda, una
     voce di elenco, una riga di tabella — e si lascia che i contenitori
     scorrano da un foglio all'altro, che e' quello che devono fare. */
  .da-fare-voce, .radiale, .prossimo-passo, details, li, dl > div,
  tr, .payment-card, .panel-card, .email-template-card {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* E si dice esplicitamente il contrario ai contenitori, perche' una
     regola piu' generica non torni a bloccarli. */
  main, main > div, section, .grid, .space-y-6, .rounded-xl, .rounded-lg {
    break-inside: auto;
    page-break-inside: auto;
  }

  /* Le griglie di schede: su carta bastano due colonne, e senza il vuoto
     fra le celle ci sta il doppio delle informazioni per foglio. */
  .grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
  .grid.grid-cols-1 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Il primo titolo non deve aprire un foglio quasi vuoto. */
  h1 { margin-top: 0 !important; }
  main > div:first-child, section:first-of-type { margin-top: 0 !important; }

  /* Un titolo non deve restare da solo in fondo al foglio. */
  h1, h2, h3, h4 {
    break-after: avoid;
    page-break-after: avoid;
    margin: .5em 0 .25em !important;
  }
  h1 { font-size: 15pt; }
  h2 { font-size: 12pt; }
  h3 { font-size: 10.5pt; }

  /* Le FAQ si stampano aperte: un elenco di domande chiuse, su carta, e
     un foglio di titoli senza risposte. */
  details > div, details > p, details > ol, details > ul {
    display: block !important;
  }
  details { border: 0 !important; border-bottom: 1px solid #ccc !important; }

  /* Le griglie a schede diventano colonne strette invece di occupare
     mezzo foglio ciascuna. */
  .radiali, .client-kpi-grid, .da-fare {
    display: block !important;
  }
  .radiale svg { width: 64px !important; height: 64px !important; }

  /* Le tabelle lunghe ripetono l intestazione su ogni foglio: e gia nel
     blocco precedente (thead: table-header-group). Qui si stringono i
     margini per far entrare piu righe. */
  th, td { padding: 3px 5px !important; font-size: 9pt !important; }

  /* Gli indirizzi dei collegamenti servono solo dove non si capiscono dal
     testo: stamparli tutti raddoppia la lunghezza di una pagina di FAQ. */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #555;
    word-break: break-all;
  }
  a[href^="/"]::after, a[href^="#"]::after, a[href^="mailto:"]::after { content: ""; }

  /* Intestazione e piede: chi legge un foglio stampato deve sapere da dove
 viene, quando e stato prodotto e chi ha fatto il programma. */
  .stampa-intestazione, .stampa-piede { display: block !important; }
  .stampa-piede {
    margin-top: 10mm;
    padding-top: 3mm;
    border-top: 1px solid #999;
    font-size: 7.5pt;
    color: #555;
    text-align: center;
  }
}

/* Fuori dalla stampa intestazione e piede non esistono. */
.stampa-intestazione, .stampa-piede { display: none; }


/* Asterisco dei campi obbligatori. aria-hidden nel markup: ai lettori di
   schermo l'obbligatorietà la comunica già l'attributo `required`, e leggere
   "asterisco" dopo ogni etichetta sarebbe solo rumore. */
.obbligatorio { color: #E02B20; font-weight: 700; }
:root[data-theme="dark"] .obbligatorio,
/* `.dark` non viene mai messo su questo portale: la regola era inerte.
   Il segno vero e' `.tema-scuro` sulla radice (lo mette app.js). */
.dark .obbligatorio,
:root.tema-scuro .obbligatorio { color: #ff6b60; }
.legenda-obbligatori { margin: .75rem 0 0; font-size: .875rem; font-weight: 400; opacity: .75; }

/* Finestra di conferma interna, al posto del riquadro del browser. */
.conferma-interna {
    max-width: 28rem;
    width: calc(100% - 2rem);
    border: 1px solid var(--outline-variant, #d5d9e0);
    border-radius: .5rem;
    padding: 1.75rem;
    background: var(--surface, #fff);
    color: var(--on-surface, #1a1c1e);
    box-shadow: 0 1.125rem 3rem rgba(0, 0, 0, .22);
}
.conferma-interna::backdrop { background: rgba(15, 20, 25, .55); }
.conferma-interna h2 { margin: 0 0 .5rem; font-size: 1.3rem; font-weight: 700; }
.conferma-interna p { margin: 0 0 1.5rem; line-height: 1.6; }
.conferma-interna-azioni { display: flex; gap: .625rem; justify-content: flex-end; flex-wrap: wrap; }
/* Su schermo stretto in colonna, con l'azione distruttiva SOTTO: il pollice
   incontra prima "Annulla". */
@media (max-width: 30rem) {
    .conferma-interna-azioni { flex-direction: column-reverse; }
    .conferma-interna-azioni .action-button { width: 100%; }
}

/* Avviso che si apre da solo al caricamento della pagina.
   Serve per le cose che l'utente non si aspetta e che vanno spiegate, non
   solo segnalate: oggi l'unico caso e' l'indirizzo email chiuso su richiesta,
   a cui non basta una riga rossa in cima al modulo.

   Il testo sta NEL DOCUMENTO e non viene costruito dal JavaScript: senza
   JavaScript il riquadro resta a schermo in fondo alla pagina e si legge lo
   stesso. Quando il JavaScript c'e', il riquadro viene spostato dentro un
   <dialog> e queste decorazioni si spengono (il bordo lo mette gia' il
   dialogo). */
.avviso-modale {
    max-width: 40rem;
    margin: 1.5rem auto;
    padding: 1.25rem;
    border: 1px solid #f0c36d;
    border-radius: .75rem;
    background: #fdf6e3;
    color: #6b4e00;
    line-height: 1.6;
}
.avviso-modale p { margin: 0 0 .875rem; }
.avviso-modale p:last-child { margin-bottom: 0; }
.avviso-modale .testo-secondario { font-size: .8125rem; opacity: .85; }
:root[data-theme="dark"] .avviso-modale,
.dark .avviso-modale,
:root.tema-scuro .avviso-modale { background: #3a2f10; border-color: #7a6420; color: #f6e6bd; }

.conferma-interna .avviso-modale {
    max-width: none;
    margin: 0 0 1.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
}

/* =====================================================================
   Movimento: le cose che si aprono, e quelle che si toccano
   =====================================================================
   Regola unica di questo blocco: si animano solo `transform`, `opacity` e
   l'ombra. Niente larghezze, altezze o margini, che farebbero ricalcolare
   la pagina a ogni fotogramma. */

/* 1. Tendine della barra in alto: campanella e profilo.

   COSA C'ERA, E PERCHE' NON POTEVA FUNZIONARE — rifatto il 26/08/2026.
   Erano <details>, animati con un @keyframes che il JS accendeva togliendo
   e rimettendo una classe, con reflow forzato e timer di riserva. Due
   difetti irrisolvibili per costruzione:
     - un <details> chiuso NON renderizza il contenuto. Il pannello entrava
       nel documento gia' visibile e SUBITO DOPO partiva l'animazione dal
       suo stato iniziale: si vedeva comparire due volte, quel «flicker»;
     - in chiusura il contenuto sparisce nello stesso istante in cui cade
       `open`. Nessuna animazione poteva partire: si chiudeva di scatto.

   COSA C'E' ADESSO.
   Il pannello e' SEMPRE renderizzato — `display:block` scavalca la regola
   del browser che lo nasconde a details chiuso — e sta fuori dal flusso,
   quindi non occupa spazio. Quello che cambia e' solo `opacity` e
   `transform`, con una `transition` legata all'attributo [open].
   Da qui: una sola animazione in apertura, perche' non c'e' piu' niente da
   far ricomparire, e finalmente un'animazione anche in CHIUSURA.
   Niente classi, niente reflow forzati, niente timer: lo stato lo tiene
   l'attributo del <details>, che e' l'unico che sa davvero se e' aperto.

   `visibility` si anima con ritardo: da chiuso il pannello deve sparire
   davvero — non raggiungibile da tastiera ne' dai lettori di schermo — ma
   solo DOPO che la dissolvenza e' finita, altrimenti sparisce di colpo. */
.notification-panel,
.account-panel {
    display: block;
    opacity: 0;
    transform: translateY(-6px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
details[open] > .notification-panel,
details[open] > .account-panel {
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .16s ease, transform .16s ease, visibility 0s;
}

/* 2. Cassetto del menu su schermo stretto.
   Stessa ragione: il pannello passa da `display:none` a `display:flex`, e
   `display` non si anima. Il velo dietro entra in dissolvenza. */
body.drawer-open .drawer-mobile { animation: cassetto-entra .22s ease-out; }
@keyframes cassetto-entra {
    from { transform: translateX(-100%); }
    to   { transform: none; }
}
#sidebar-overlay:not(.hidden) { animation: velo-entra .22s ease-out; }
@keyframes velo-entra { from { opacity: 0; } to { opacity: 1; } }

/* Uscita. Il cassetto spariva di colpo: si apriva con garbo e si chiudeva
   come se fosse stato staccato. `forwards` tiene l'ultimo fotogramma finche'
   il JS non nasconde davvero l'elemento, altrimenti nell'attimo fra la fine
   dell'animazione e `display:none` il cassetto tornerebbe al suo posto e si
   vedrebbe un lampo. */
.drawer-mobile.cassetto-in-chiusura { animation: cassetto-esce .2s ease-in forwards; }
@keyframes cassetto-esce {
    from { transform: none; }
    to   { transform: translateX(-100%); }
}
#sidebar-overlay.velo-in-chiusura { animation: velo-esce .2s ease-in forwards; }
@keyframes velo-esce { from { opacity: 1; } to { opacity: 0; } }

/* 3. Hover, su tutto il sito.
   `transition-colors` è già scritta a mano su 59 fra pulsanti e
   collegamenti dei due portali: invece di inventare selettori nuovi, il
   movimento si aggiunge lì. Così compare esattamente dove qualcuno aveva
   già deciso che c'è qualcosa da cliccare, e non altrove.
   Un pixel di sollevamento: si vede, e non sposta niente attorno. */
.transition-colors {
    transition: color .15s, background-color .15s, border-color .15s,
                transform .15s ease, box-shadow .15s ease;
}
a.transition-colors:hover,
button.transition-colors:hover { transform: translateY(-1px); }
/* Alla pressione torna giù: è il modo più economico di far sentire il clic. */
a.transition-colors:active,
button.transition-colors:active { transform: translateY(0); }

.icon-button, .account-summary, .notification-summary {
    transition: background-color .15s, color .15s, transform .15s ease;
}
.icon-button:hover,
.account-summary:hover,
.notification-summary:hover { transform: translateY(-1px); }

/* Dentro le tendine il movimento è laterale: verticale farebbe ballare
   l'elenco sotto il dito. */
.notification-link, .account-panel-link {
    transition: background-color .15s, border-color .15s, transform .15s ease;
}
.notification-link:hover, .account-panel-link:hover { transform: translateX(2px); }

/* Chi ha chiesto meno movimento non lo riceve: restano i colori, che
   l'informazione la danno lo stesso. */
@media (prefers-reduced-motion: reduce) {
    /* Le tendine adesso usano una transition, non un @keyframes: va
       spenta quella, altrimenti chi ha chiesto meno movimento vede
       comunque scorrere il pannello. `visibility` resta istantanea. */
    .notification-panel,
    .account-panel,
    details[open] > .notification-panel,
    details[open] > .account-panel { transition: none; transform: none; }
    body.drawer-open .drawer-mobile,
    #sidebar-overlay:not(.hidden),
    .drawer-mobile.cassetto-in-chiusura,
    #sidebar-overlay.velo-in-chiusura { animation: none; }
    a.transition-colors:hover,
    button.transition-colors:hover,
    .icon-button:hover,
    .account-summary:hover,
    .notification-summary:hover,
    .notification-link:hover,
    .account-panel-link:hover { transform: none; }
}

/* Il pannello del modulo quando si sta modificando una voce esistente.
   Serve una classe vera: in questo progetto le utility sono scritte a mano e
   `ring-2` non esiste — c'e' solo `focus:ring-2`. Una classe che non esiste
   non da' errore, semplicemente non fa niente, ed e' il modo peggiore di
   accorgersene. */
.pannello-in-modifica {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 78, 159, .18);
}

/* =====================================================================
   Modulo di dichiarazione: le prenotazioni
   =====================================================================
   Segnalazioni del collaudo del 24/08/2026. Tre cose che si vedevano male,
   e una che non si vedeva affatto. */

/* «Dettaglio»: era un testo azzurro su fondo grigio, senza bordi, diverso da
   ogni altro pulsante del portale — si leggeva a fatica e non sembrava
   nemmeno un pulsante. Ora e' un pulsante come gli altri, con il numero dei
   non paganti in evidenza e una freccia che dice se e' aperto o chiuso. */
/* LA BARRA DI SCORRIMENTO ORIZZONTALE, segnalata il 25/08.
   Da PC la tabella delle prenotazioni scorreva di NOVE pixel: un movimento
   minimo e inutile, che pero' basta a far comparire la barra.
   La causa e' aritmetica, e viene da questa stessa lavorazione del 24/08. Il
   contenitore del modulo e' `max-w-2xl` (672px) meno `p-6` per lato: restano
   622px. Le sei colonne ne volevano 631, e le due che non si possono
   restringere sono le date (larghezza minima nativa di `input[type=date]`,
   125px l'una) e questo pulsante, che essendo `white-space: nowrap` non va
   mai a capo. Trasformando «Dettaglio» da testo azzurro nudo a pulsante vero
   — bordo, pallino e freccia — si sono aggiunti i pixel che hanno superato
   il limite.
   Rimedio: qualche pixel qui e sul padding delle celle (regola in fondo a
   questo blocco). NON si rimpicciolisce il testo: era illeggibile prima ed e'
   il motivo per cui il pulsante e' stato rifatto. Misurato: la larghezza
   minima della tabella scende da 631 a 594, con 28px di margine. */
.btn-dettaglio {
    display: inline-flex; align-items: center; gap: .25rem;
    min-height: 34px; padding: .3rem .45rem;
    border: 1px solid var(--outline-variant); border-radius: .5rem;
    background: var(--surface-lowest); color: var(--primary);
    font-size: .8rem; font-weight: 800; line-height: 1;
    white-space: nowrap; cursor: pointer;
}
.btn-dettaglio:hover { background: var(--primary-fixed); }
.btn-dettaglio .riepilogo-non-paganti {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.4rem; height: 1.4rem; padding: 0 .3rem;
    border-radius: 999px; background: var(--primary); color: var(--on-primary);
    font-size: .75rem;
}
/* Nessuno che non paga: il pallino non deve gridare. */
.btn-dettaglio .riepilogo-non-paganti:not(.ha-esenti) { background: var(--surface-container-high, #e6e9ee); color: var(--on-variant); }
.btn-dettaglio-freccia { font-size: 1.05rem; transition: transform .15s ease; }
.btn-dettaglio.is-aperto .btn-dettaglio-freccia { transform: rotate(180deg); }

/* La seconda meta' del rimedio alla barra di scorrimento: sei colonne per
   ~5px risparmiati l'una. Solo l'orizzontale — l'altezza delle righe non
   c'entra e stringerla renderebbe i campi piu' difficili da toccare. */
#prenotazioni-table th,
#prenotazioni-table td { padding-left: .35rem; padding-right: .35rem; }

/* =====================================================================
   Utility usate dai template e mai definite — inventario del 25/08/2026
   =====================================================================
   Confrontando le classi scritte nei template con quelle che esistono qui
   dentro ne sono uscite **240 senza regola**. In questo progetto le utility
   sono scritte a mano: una classe che non c'e' non da' errore, semplicemente
   non fa niente — ed e' il modo peggiore di accorgersene, perche' il codice
   sembra giusto.

   Qui sotto ci sono quelle **piu' usate e piu' visibili**, con il numero di
   punti in cui comparivano senza fare niente. Non sono tutte e 240: le altre
   sono per lo piu' classi di componente (`legal-editor`, `payment-btn`) che
   hanno una regola scritta altrove, o varianti rare che vanno guardate una
   per una. L'elenco completo si rifa' con lo script di § 6bis.

   ⚠️ Fra queste c'era `bg-emerald-600`, usata su QUATTRO pulsanti «Approva»
   e «Riattiva»: erano pulsanti verdi che verdi non erano mai stati. */

.font-normal { font-weight: 400; }                    /* 29 punti */
.text-amber-900 { color: #78350f; }                   /* 26 punti */
.align-top { vertical-align: top; }                   /* 19 punti */
.normal-case { text-transform: none; }                /*  8 punti */
.bg-transparent { background: transparent; }          /*  5 punti */
.border-amber-300 { border-color: #fcd34d; }          /*  5 punti */
.p-10 { padding: 2.5rem; }                            /*  5 punti */
.pb-2 { padding-bottom: .5rem; }                      /*  5 punti */
.ml-1 { margin-left: .25rem; }                        /*  5 punti */
.pl-4 { padding-left: 1rem; }                         /*  5 punti */
.border-l-4 { border-left-width: 4px; }               /*  4 punti */
.bg-emerald-600 { background: #059669; }              /*  4 punti */
.hover\:bg-emerald-700:hover { background: #047857; } /*  4 punti */
.hover\:shadow-sm:hover { box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.tracking-\[0\.15em\] { letter-spacing: .15em; }

/* Le misure minute usate nelle note e nelle etichette secondarie. */
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }

/* Il contorno di messa a fuoco da tastiera: c'era `focus:ring-2`, ma i
   template usano la variante `focus-visible`, che senza regola non faceva
   niente. Riguarda chi naviga senza mouse. */
.focus-visible\:outline-none:focus-visible { outline: none; }
.focus-visible\:ring-2:focus-visible { box-shadow: 0 0 0 2px rgba(0, 78, 159, .45); }
.focus-visible\:ring-primary:focus-visible { box-shadow: 0 0 0 2px var(--primary); }
.focus-visible\:ring-offset-2:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--primary); }

/* Il contatore che fa da filtro, quando il filtro e' acceso.
   ⚠️ Scritta perche' la prima stesura usava `ring-primary`, che in questo
   progetto NON ESISTE: le utility sono a mano, e una classe inventata non
   da' errore — semplicemente non fa niente, e il filtro attivo si vede
   uguale a quelli spenti. Vale la pena ricordarlo ogni volta: prima di
   scrivere una utility «da Tailwind», cercarla qui dentro. */
.filtro-attivo {
    border-width: 2px;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 78, 159, .16);
}

/* Il cestino: era un'icona nuda in mezzo alla cella, senza area cliccabile
   dichiarata e senza etichetta per i lettori di schermo. */
.btn-remove {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border: 1px solid #fecaca; border-radius: .5rem;
    background: var(--surface-lowest); color: var(--error);
    cursor: pointer;
}
.btn-remove:hover { background: #fee2e2; }
.btn-remove .material-symbols-outlined { font-size: 1.25rem; }

/* L'icona del calendario del browser: su alcuni temi non si vedeva.
   Qui si rende visibile. Il modo PRINCIPALE di aprire il selettore e'
   ora il pulsante accanto alla casella (`.apri-calendario`): questa
   icona resta come scorciatoia per chi la conosce.

   `cursor: text`, non `pointer` — 26/08/2026.
   La freccia a manina diceva «qui si clicca per aprire qualcosa», e
   veniva da quando il clic sulla casella apriva il calendario: quel
   comportamento e' stato tolto perche' impediva di SCRIVERE la data.
   Lasciare la manina prometteva una cosa che non succede piu'. Ora il
   cursore dice quello che la casella fa davvero: ci si scrive dentro. */
input[type="date"] { cursor: text; }
input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: .75;
    cursor: pointer;
    padding: .15rem;
    border-radius: .25rem;
}

/* DUE CALENDARI SULLA STESSA CASELLA, UNO SOLO RESTA — 31/08/2026.
   Nelle righe delle prenotazioni la casella mostrava DUE icone di
   calendario appaiate: quella che il browser disegna dentro il campo e
   il pulsante `.apri-calendario` messo accanto. Due comandi identici a
   mezzo centimetro di distanza, che fanno la stessa identica cosa: chi
   guarda si chiede quale sia quello giusto.

   Resta il pulsante — quello a destra, fuori dalla casella: e' piu'
   grande, ha un'etichetta per i lettori di schermo e si vede su tutti i
   temi, mentre l'icona nativa su alcuni sfondi spariva (era la ragione
   per cui il pulsante era stato aggiunto).

   ⚠️ La regola e' AGGANCIATA A `.cella-data`, non globale: sulle altre
   pagine — /admin/esenzioni, i filtri per data — il pulsante non c'e',
   e togliere anche li' l'icona nativa lascerebbe quelle caselle senza
   nessun modo di aprire il calendario.

   Da tastiera non si perde niente: la data si scrive dentro il campo, e
   Alt+Freccia giu' apre comunque il selettore nativo. */
.cella-data input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
}
/* `background-color`, NON la scorciatoia `background` — 26/08/2026.
   L'icona del calendario il browser la disegna come background-image del
   pseudo-elemento. Scrivendo `background: var(--surface-container)` la
   scorciatoia azzerava anche l'immagine: passando il mouse sopra, l'icona
   SPARIVA. Si vedeva bene in /admin/esenzioni, sul campo della nuova
   tariffa. Con background-color si colora solo il fondo e l'icona resta. */
input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    background-color: var(--surface-container);
}

/* L'ICONA DEL CALENDARIO IN TEMA SCURO — 26/08/2026.
   Qui c'era `filter: invert(1)` legato a [data-theme="dark"] e a .dark:
   due segni che su questo portale non venivano messi da nessuno, perche'
   il tema scuro lo fa Dark Reader. Risultato: regola mai applicata, e
   l'icona — che il browser disegna scura e che Dark Reader non tocca,
   perche' sta nella shadow DOM del campo — spariva sul fondo scuro.

   `color-scheme: dark` e' la strada giusta: non ritocca l'icona con un
   filtro, dice al browser che quel campo e' in tema scuro, e il browser
   disegna da se' la versione chiara di TUTTI i suoi comandi nativi.
   La classe la mette app.js (e lo script nel <head>, prima del disegno). */
:root.tema-scuro input[type="date"],
:root.tema-scuro input[type="datetime-local"],
:root.tema-scuro input[type="month"],
:root.tema-scuro input[type="time"],
:root.tema-scuro input[type="week"] { color-scheme: dark; }


/* DATE INCOERENTI: si vedono mentre si scrive, non solo all'invio.
   Il controllo c'era gia' e fermava l'invio, ma `aria-invalid` non aveva
   nessuna regola: chi scriveva la partenza prima dell'arrivo non vedeva
   niente e se ne accorgeva solo premendo «Invia». */
[aria-invalid="true"] {
    border-color: var(--error) !important;
    box-shadow: 0 0 0 2px rgba(186, 26, 26, .18);
}

/* =====================================================================
   Cestino delle strutture
   =====================================================================
   Sta accanto a «Modifica» nella riga della struttura e nella scheda.
   E' un comando distruttivo: si colora di rosso solo al passaggio del
   mouse e col fuoco, non a riposo — un cestino rosso su ogni riga di una
   tabella di dieci strutture urla, e a furia di urlare non si legge piu'.
   Misura 40px: sotto i 44 consigliati per il dito solo perche' sta in una
   cella di tabella, dove uno sbaglio di tocco apre una scheda e non
   cancella niente; il pannello che apre chiede comunque il nome scritto. */
.icona-cestino {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid transparent;
    border-radius: .5rem;
    background: transparent;
    color: var(--on-variant);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.icona-cestino:hover,
.icona-cestino:focus-visible {
    background: var(--error-container, #fdeaea);
    border-color: var(--error, #b3261e);
    color: var(--error, #b3261e);
}
/* Aperto: resta acceso, cosi' si vede a colpo d'occhio quale riga ha il
   pannello aperto quando la tabella e' lunga. */
.icona-cestino.aperto {
    background: var(--error-container, #fdeaea);
    border-color: var(--error, #b3261e);
    color: var(--error, #b3261e);
}

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

/* =====================================================================
   Le undici spaziature che mancavano davvero — 26/08/2026
   =====================================================================
   Sono usate nei template e non erano definite da nessuna parte: il
   markup le chiedeva, il browser usava il valore predefinito. Tutte rare
   (una o due comparse), ma una spaziatura che non c'e' non si vede
   scritta da nessuna parte — si vede solo guardando la pagina storta.

   La scala e' quella gia' in uso nel resto del foglio, n x 0.25rem.

   ⚠️ NOTA PER CHI CONTROLLA. Il foglio impacchetta piu' regole sulla
   stessa riga (`.p-2 { } .p-3 { } .p-4 { }`). Un controllo che cerchi le
   classi con `^\.` — cioe' solo a inizio riga — ne trova una su sette e
   dichiara «mancanti» decine di utility che invece ci sono. E' successo
   scrivendo questo blocco: la prima misura diceva 59 mancanti, comprese
   `mt-1` (335 usi) e `px-4` (241), che erano definite da sempre.
   Le trova tutte tests/collaudo/test_spaziature.php. */
.m-0 { margin: 0; }
.m-4 { margin: 1rem; }
.my-2 { margin-top: .5rem; margin-bottom: .5rem; }
.mt-7 { margin-top: 1.75rem; }
.mt-10 { margin-top: 2.5rem; }
.pt-0 { padding-top: 0; }
.pt-1 { padding-top: .25rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }

/* =====================================================================
   Visualizzatore PDF a schermo intero — 26/08/2026
   =====================================================================
   Fondo grigio scuro e non nero: il nero pieno accanto a un foglio bianco
   fa un contrasto che stanca dopo dieci contabili. #525659 e' la tinta che
   usano i lettori PDF proprio per questo.
   La cornice sta sopra tutto tranne i messaggi di sistema, e il documento
   prende tutto lo spazio che resta sotto la barra. */
.pdf-schermo {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: #525659;
    display: flex;
    flex-direction: column;
}
.pdf-schermo[hidden] { display: none; }

.pdf-finestra { display: flex; flex-direction: column; height: 100%; width: 100%; }

/* La barra resta ferma in alto: e' l'unico modo di uscire, e cercarla
   scorrendo sarebbe la prima cosa che si impreca. */
.pdf-barra {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 1rem;
    background: #323639;
    color: #f1f3f4;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.pdf-titolo {
    margin: 0;
    font-weight: 700;
    font-size: .95rem;
    /* Un nome di file lungo non deve spingere fuori i comandi. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.pdf-comandi { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; }

.pdf-zoom-etichetta {
    font-size: .8rem;
    color: #c4c7c5;
    margin-right: .15rem;
}
.pdf-zoom {
    background: #202124;
    color: #f1f3f4;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: .4rem;
    padding: .35rem .5rem;
    font: inherit;
    font-size: .85rem;
    min-height: 36px;
}

.pdf-comando {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: .4rem;
    background: transparent;
    color: #f1f3f4;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease;
}
.pdf-comando:hover,
.pdf-comando:focus-visible { background: rgba(255,255,255,.14); }
.pdf-comando:focus-visible { outline: 2px solid #8ab4f8; outline-offset: 1px; }
.pdf-chiudi:hover { background: #c5221f; }

.pdf-foglio {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    background: #525659;
}

/* Su telefono i comandi non ci stanno tutti in riga, e comprimerli li rende
   impossibili da centrare col dito. Restano quelli che servono davvero
   davanti a un documento: chiudere, scaricare, aprire in una scheda. Zoom
   e stampa spariscono perche' li fa gia' il telefono, meglio di noi:
   si ingrandisce con due dita e si stampa dal menu di sistema. */
@media (max-width: 720px) {
    .pdf-zoom, .pdf-zoom-etichetta,
    .pdf-comando[data-pdf-zoom],
    #pdf-stampa { display: none; }
    .pdf-barra { padding: .5rem .6rem; }
    .pdf-comando { width: 44px; height: 44px; }
}

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

/* Casella data con il pulsante del calendario accanto — 26/08/2026.
   Il campo resta scrivibile da tastiera; il pulsante e' l'altro modo, quello
   visibile. Prima il calendario si apriva cliccando ovunque sul campo e
   impediva di scrivere; togliendo quel comportamento restava solo la piccola
   icona del browser, che su alcuni temi non si vede. */
.cella-data {
    display: flex;
    align-items: center;
    gap: .25rem;
}
.cella-data input[type="date"] { flex: 1 1 auto; min-width: 0; }
.apri-calendario {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--outline-variant, #dadce0);
    border-radius: .4rem;
    background: transparent;
    color: var(--on-variant);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.apri-calendario:hover,
.apri-calendario:focus-visible {
    background: var(--surface-container, #eef1f5);
    color: var(--primary, #004e9f);
}
.apri-calendario .material-symbols-outlined { font-size: 20px; }

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

/* ─────────────────────────────────────────────────────────────────────────
   LO SCHEMA DI COLORI DELLA PAGINA, DICHIARATO — 26/08/2026

   IL DIFETTO: «i pulsanti che si aprono in tutto il sito ogni tanto spuntano
   neri». Sono i comandi NATIVI — la tendina di un <select>, il selettore di
   una data, le barre di scorrimento — che il browser disegna da sé, fuori
   dalla pagina, e che nessun foglio di stile può colorare.

   Non avendo mai dichiarato `color-scheme`, quei comandi seguivano il TEMA
   DEL SISTEMA OPERATIVO invece di quello della pagina: con Windows in tema
   scuro, la tendina di un menu usciva nera anche su una pagina chiara. Da qui
   l'«ogni tanto»: dipendeva dalle impostazioni di chi guardava, non dal sito.

   Dichiararlo sulla radice risolve per TUTTI i comandi nativi in una volta,
   e rende superflue le regole scritte campo per campo qui sopra — che restano
   perché non fanno danno e documentano il caso da cui si era partiti.

   Non si usa `light dark`: quello dice «vanno bene tutti e due» e lascia
   decidere al sistema, che è esattamente il problema. Qui il tema lo decide
   la pagina, e i comandi nativi devono seguirla. */
:root { color-scheme: light; }
:root.tema-scuro { color-scheme: dark; }