/* Titillium Web (SIL Open Font License 1.1) servito in locale da assets/fonts/.
   La CSP del progetto consente style-src 'self' soltanto: un @import verso
   fonts.googleapis.com verrebbe bloccato, quindi i file .woff2 sono vendored. */
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:300;font-display:swap;src:url('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('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('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('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('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('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('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('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}
/* Materiale Symbols Outlined: stesso file di font del gestionale
   (/assets/fonts/, servito dalla radice del sito, non da questa cartella),
   ma qui la classe non era mai stata caricata — le pagine usavano le emoji
   al suo posto (📋🖨📥🔍⚠), tolte il 30/08/2026. */
@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:20px;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;vertical-align:-4px}
:root{--blue:#0066CC;--blue2:#004080;--gold:#F83E5A;--bg:#f8f9fa;--text:#1C2024;--muted:#5A6772;--line:#E6E9F2;--white:#fff;--red:#E02B20;--green:#00803C;--side:250px}*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;font-family:"Titillium Web",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}a{color:var(--blue);text-decoration:none}.shell{max-width:1220px;margin:auto;padding:0 24px}.site-header{height:82px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;box-shadow:0 2px 4px rgba(0,0,0,0.05)}.header-row{height:82px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:13px;align-items:center;color:var(--text)}.brand strong{font-size:17px;font-weight:700}.brand small{display:block;color:var(--muted);font-weight:600}.crest{width:48px;height:48px;object-fit:contain;border-radius:50%;background:#fff;border:none;padding:0}.site-header nav{display:flex;align-items:center;gap:22px}.main-content{padding-top:38px;min-height:calc(100vh - 250px)}.btn{border:0;border-radius:4px;background:var(--blue);color:#fff;font-weight:600;padding:12px 24px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.2s}.btn:hover{background:var(--blue2)}.btn.compact{padding:8px 16px;font-size:14px}.btn.light{background:#fff;color:var(--blue);border:1px solid var(--blue)}.btn.danger{background:var(--red);color:#fff}.btn.wide{width:100%}.hero{background:var(--blue);color:#fff;border-radius:4px;padding:60px;display:grid;grid-template-columns:1.5fr .8fr;gap:44px;box-shadow:0 8px 16px rgba(0,0,0,0.1)}.hero h1{font-size:52px;line-height:1.1;max-width:720px;margin:12px 0 20px;font-weight:700}.hero p{font-size:20px;color:#eaf1f7;max-width:700px;font-weight:300}.hero-card{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:4px;padding:30px}.hero-card li{margin:12px 0}.hero-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--blue);font-size:24px;font-weight:900}.eyebrow{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}.eyebrow.dark{color:var(--muted)}.hero .eyebrow{color:rgba(255,255,255,.85)}.actions{display:flex;gap:12px;flex-wrap:wrap}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:26px 0 44px}.steps article,.panel,.metric-grid article,.status-card{background:#fff;border:1px solid var(--line);border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,0.05)}.steps article{padding:26px}.steps b{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff}.site-footer{background:#1C2024;border-top:0;margin-top:50px;color:#fff}.footer-grid{display:grid;grid-template-columns:1.15fr 1fr .9fr;gap:32px;padding-top:44px;padding-bottom:28px;font-size:15px}.footer-title{color:#fff;font-weight:700;font-size:16px;margin:0 0 12px}.footer-grid address{font-style:normal;display:flex;flex-direction:column;gap:4px;color:#8B99A6}.footer-col-center{display:flex;flex-direction:column}.footer-col-center a{color:#8B99A6;margin-top:6px}.footer-col-center a:hover{color:#fff}.footer-links{display:flex;flex-direction:column;gap:8px;align-items:flex-end;font-weight:600}.footer-links a{color:#8B99A6}.footer-links a:hover{color:#fff}.footer-meta{border-top:1px solid #2C353D;padding:24px 24px 30px;font-size:14px;display:flex;flex-direction:column;gap:8px;color:#8B99A6}.footer-credit{margin-left:8px}.footer-testmode{color:var(--gold);font-weight:700}
.legal-editor-wrap{border:1px solid #b9c8d5;border-radius:9px;overflow:hidden;background:#fff}.legal-toolbar{display:flex;flex-wrap:wrap;gap:6px;padding:8px;border-bottom:1px solid var(--line);background:#f6f8fa}.legal-toolbar button{min-height:34px;padding:6px 10px;border-radius:6px;font-size:12px;font-weight:700;background:#fff;border:1px solid #d8dae2;cursor:pointer}.legal-toolbar button:hover{background:#e8eef8}.legal-editor{min-height:200px;max-height:460px;overflow-y:auto;padding:14px;line-height:1.6;outline:none;color:var(--text)}.legal-editor:focus{box-shadow:inset 0 0 0 2px var(--gold)}.legal-editor h2{font-size:1.3rem;font-weight:800;margin:.9rem 0 .5rem}.legal-editor h3{font-size:1.05rem;font-weight:800;margin:.8rem 0 .4rem}.legal-editor p{margin:.5rem 0}.legal-editor ul,.legal-editor ol{padding-left:1.4rem;margin:.5rem 0}.hidden{display:none}
.legal-panel{max-width:860px;margin:0 auto}.legal-panel h1{font-size:30px;margin:10px 0 22px;padding-bottom:16px;border-bottom:1px solid var(--line)}.legal-content{line-height:1.75}.legal-content h2{font-size:1.3rem;margin:1.4rem 0 .6rem}.legal-content h3{font-size:1.1rem;margin:1.1rem 0 .5rem}.legal-content p{margin:.6rem 0}.legal-content ul,.legal-content ol{padding-left:1.4rem}.legal-content a{color:var(--blue)}
@media(max-width:800px){.footer-grid{grid-template-columns:1fr;gap:18px}.footer-links{align-items:flex-start}}.panel{padding:32px;margin-bottom:28px}.form-panel{max-width:900px;margin-left:auto;margin-right:auto}.panel-heading{margin-bottom:24px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.span2{grid-column:1/-1}form{display:grid;gap:20px}label{display:grid;gap:6px;font-weight:600}label small,.muted{font-weight:400;color:var(--muted)}input,select,textarea{width:100%;border:1px solid #5A6772;border-radius:4px;padding:12px 16px;font:inherit;background:#fff;transition:all 0.2s}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 3px rgba(0,102,204,0.3);border-color:var(--blue)}.check{display:flex;align-items:flex-start;gap:10px;font-weight:400}.check input{width:auto;margin-top:5px;transform:scale(1.2)}.alert{max-width:1220px;margin:0 auto 18px;border-radius:4px;padding:16px 20px}.alert.success{background:#F0F8EC;color:#00803B;border-left:4px solid #00803B}.alert.danger{background:#FDEAE9;color:#D21D12;border-left:4px solid #D21D12}.alert.warning{background:#FFF4E5;color:#BB4D00;border-left:4px solid #BB4D00}.login-layout{display:grid;grid-template-columns:1fr 480px;gap:70px;align-items:center;min-height:540px}.login-copy h1{font-size:46px;line-height:1.1;margin:14px 0;font-weight:700}.security-note,.info-box{background:#F2F7FC;border-left:4px solid var(--blue);padding:16px 20px;border-radius:4px;margin-top:22px}.login-panel{margin:0}.center{text-align:center}.page-title{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:24px}.page-title h1{font-size:34px;margin:6px 0;font-weight:700}.status-card{display:flex;align-items:center;gap:20px;padding:24px;margin-bottom:24px}.status-card.is-active{border-left:6px solid var(--green)}.status-card.is-empty{border-left:6px solid var(--gold)}.status-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#F0F8EC;font-size:24px}.metric-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:24px}.metric-grid article{padding:20px}.metric-grid small{display:block;color:var(--muted)}.metric-grid strong{font-size:29px}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:18px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:850px}th,td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:top}th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700}.badge{display:inline-block;padding:4px 10px;border-radius:4px;font-size:12px;font-weight:600;white-space:nowrap}.badge.success{background:#F0F8EC;color:#00803B}.badge.warning{background:#FFF4E5;color:#BB4D00}.badge.info{background:#F2F7FC;color:#0066CC}.badge.danger{background:#FDEAE9;color:#D21D12}.badge.muted{background:#F8F9FA;color:#5A6772}.link-btn{font-weight:600;white-space:nowrap}.col-protocollo{white-space:nowrap}.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.detail-grid small{display:block;color:var(--muted);margin-bottom:4px;font-size:13px}.detail-grid strong{word-break:break-word}.back-link{display:inline-block;margin-bottom:18px;font-weight:600}.sidebar{position:fixed;left:0;top:82px;bottom:0;width:var(--side);background:var(--text);padding:25px 14px;z-index:20;overflow:auto}.side-title{color:var(--muted);font-size:12px;letter-spacing:.1em;font-weight:700;padding:0 13px 15px;text-transform:uppercase}.sidebar a{display:block;color:#E6E9F2;padding:10px 14px;border-radius:4px;margin:2px 0;transition:background 0.2s}.sidebar a:hover,.sidebar a.active{background:var(--blue);color:#fff}.content-with-sidebar{margin-left:var(--side);padding:40px;min-height:calc(100vh - 220px)}.has-sidebar .site-footer{margin-left:var(--side)}hr{border:0;border-top:1px solid var(--line);margin:25px 0}code{background:#F8F9FA;padding:4px 8px;border-radius:4px;word-break:break-all;border:1px solid var(--line)}@media(max-width:1100px){.metric-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:800px){.shell{padding:0 15px}.site-header nav a:not(.btn){display:none}.hero{grid-template-columns:1fr;padding:34px}.hero h1{font-size:38px}.steps,.form-grid,.login-layout,.detail-grid{grid-template-columns:1fr}.span2{grid-column:auto}.metric-grid{grid-template-columns:repeat(2,1fr)}.content-with-sidebar,.has-sidebar .site-footer{margin-left:0}.content-with-sidebar{padding:24px 15px}.page-title{flex-direction:column}.footer-grid{grid-template-columns:1fr}.footer-links{flex-wrap:wrap}.login-layout{min-height:auto}.login-copy h1{font-size:36px}}

 /* V7 - produzione, OTP, validazioni e ricevute */
[hidden]{display:none!important}.logout-form{display:inline;margin:0}.nav-link-button{border:0;background:transparent;color:var(--blue);font:inherit;cursor:pointer;padding:0}.nav-link-button:hover{text-decoration:underline}.btn.bordered{border:1px solid var(--line);background:#fff;color:var(--blue)}.btn.is-loading{opacity:.75}.alert.info{background:#F2F7FC;color:#0066CC}.status-card.is-pending{border-left:6px solid #004080}.password-wrap{display:grid;grid-template-columns:1fr auto;align-items:stretch}.password-wrap input{border-radius:4px 0 0 4px}.password-toggle{border:1px solid #5A6772;border-left:0;border-radius:0 4px 4px 0;background:#F8F9FA;color:var(--blue);font-weight:600;padding:0 16px;cursor:pointer}.password-toggle:hover{background:#E6E9F2}.uppercase{text-transform:uppercase}.field-help,.cf-check,.upload-status{display:block;font-size:13px;font-weight:600;color:var(--muted);min-height:20px}.field-help.is-valid,.cf-check.is-valid,.upload-status.is-valid{color:var(--green)}.field-help.is-invalid,.cf-check.is-invalid,.upload-status.is-invalid{color:var(--red)}.cf-check.is-info{color:#0066CC}.otp-panel{max-width:540px;margin:40px auto}.otp-panel h1{margin-bottom:8px}.otp-input{text-align:center;font-size:28px;font-weight:700;letter-spacing:.35em;padding-left:.35em}.center-link{display:block;text-align:center;font-weight:600;margin-top:5px}.table-actions{display:flex;gap:12px;flex-wrap:wrap;min-width:180px}.top-gap{margin-top:20px}.office-notes,.decision-summary{background:#F8F9FA;border:1px solid var(--line);border-radius:4px;padding:18px}.decision-summary p{margin:.5rem 0}.receipt-check{text-align:center}.receipt-check .status-icon{margin:0 auto 12px}.receipt-check.is-valid{border-top:5px solid var(--green)}.receipt-check.is-invalid{border-top:5px solid var(--red)}.receipt-check .detail-grid{text-align:left;margin:24px 0}.legal-field{margin-bottom:22px}.legal-toolbar{position:sticky;top:0;z-index:2}.legal-editor a{text-decoration:underline}.info-box strong{color:var(--blue2)}input[readonly]{background:#F8F9FA;color:var(--muted)}.form-panel h1,.panel-title h1{margin:.25rem 0}.panel-title h2{margin:0}.metric-grid article strong{display:block}.footer-meta p{margin:0}.site-header nav form{display:inline-flex;align-items:center}.site-header nav{white-space:nowrap}
@media(max-width:800px){.password-wrap{grid-template-columns:1fr auto}.password-toggle{padding:0 10px}.table-actions{min-width:150px}.otp-input{font-size:24px}.receipt-check .detail-grid{text-align:left}}

.cf-actions { display: flex; justify-content: flex-start; margin-top: .45rem; }
.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:#1C2024;color:#fff;z-index:100;padding:16px 0;border-top:1px solid #2C353D;box-shadow:0 -4px 10px rgba(0,0,0,0.1)}.cookie-banner .shell{display:flex;align-items:center;justify-content:space-between;gap:20px}.cookie-banner p{margin:0;font-size:14px;color:#E6E9F2;line-height:1.4}.cookie-banner a{color:#fff;text-decoration:underline;font-weight:600}
@media(max-width:800px){.cookie-banner .shell{flex-direction:column;align-items:stretch;text-align:center}.cookie-banner button{width:100%}}
.cf-actions .link-btn { font-size: .82rem; cursor: pointer; }

/* V8 - componenti estratti dagli stili inline di index.php.
   Nota: il template HTML delle email in index.php mantiene gli stili inline,
   perche' i client di posta scartano CSS esterno e regole <style>. */

/* Barra filtri sopra gli elenchi (form GET) */
.filter-bar{padding:14px;background:#f8f9fa;border:1px solid var(--line);border-radius:4px;margin-bottom:16px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.filter-bar.nowrap{flex-wrap:nowrap}
.filter-field{padding:8px 12px;border:1px solid #5A6772;border-radius:4px;font:inherit}
.filter-field.grow{flex:1;min-width:200px;max-width:300px}
.filter-field.grow-lg{flex:1;min-width:200px;max-width:320px}
.filter-field.grow-xl{flex:1;max-width:360px}

/* Sezioni informative della homepage */
.section-panel{margin-top:32px;padding:36px 32px}
.section-intro{text-align:center;max-width:700px;margin:0 auto 28px}
.section-intro.gap-lg{margin-bottom:32px}
.section-intro h2{font-size:28px;margin:8px 0 12px;font-weight:700}

/* Guida passo-passo */
.guide-steps{display:flex;flex-direction:column;gap:16px;max-width:850px;margin:0 auto}
.guide-step{display:flex;gap:18px;background:#fff;border:1px solid var(--line);border-left:6px solid #003366;border-radius:6px;padding:20px 24px;box-shadow:0 2px 6px rgba(0,0,0,0.03)}
.guide-step-num{font-size:26px;font-weight:bold;color:#003366;min-width:38px}
.guide-step h3{margin:0 0 6px;font-size:17px}
.guide-step p{margin:0;font-size:14px;color:var(--text);line-height:1.55}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.faq-card{background:#f8f9fa;border:1px solid var(--line);border-radius:6px;padding:20px}
.faq-card h4{margin:0 0 8px;font-size:16px;color:var(--blue2)}
.faq-card p{margin:0;font-size:14px;color:var(--text);line-height:1.5}

/* Varianti di .info-box */
.info-box.support-note{margin-top:28px;padding:18px;text-align:center}
.info-box.pec-legend{margin-top:24px;padding:14px 18px}

/* Pagina "Copia PEC" */
.narrow-page{max-width:820px;margin:0 auto}
.copy-actions{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.copy-label{font-weight:700;margin-bottom:6px;display:block}
.copy-area{width:100%;font-family:monospace;font-size:14px;padding:12px;border:1px solid #5A6772;border-radius:4px;resize:vertical}
.plain-list{margin:10px 0 0;padding-left:1.4rem}

/* Barra di stampa (nascosta in stampa dalla classe .no-print) */
.print-bar{background:#003366;color:#fff;padding:12px 20px;display:flex;gap:16px;align-items:center;margin-bottom:0}
.print-bar button{background:#fff;color:#003366;border:0;padding:8px 20px;border-radius:4px;cursor:pointer;font-size:14px;font-weight:bold}
.print-bar span{font-size:13px}
.print-bar .print-back{color:#aad4ff;font-size:13px;margin-left:auto}

/* Paginazione */
.pagination-bar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-top:1px solid var(--line);flex-wrap:wrap;gap:12px;background:#fcfcfc}
.pagination-count{font-size:14px;color:var(--muted)}
.pagination-nav{display:flex;gap:8px;align-items:center}
.pagination-page{font-size:14px;font-weight:600;padding:0 6px}

/* Utility. .icon-copy segue .btn.compact per vincere a parita' di specificita'. */
.btn.icon-copy{margin-left:8px;padding:2px 6px;font-size:12px}
.inline-row{display:flex;gap:.5rem}
.inline-row.wrap{flex-wrap:wrap}
.mb-8{margin-bottom:8px}
.mb-16{margin-bottom:16px}
.mb-20{margin-bottom:20px}
.mb-24{margin-bottom:24px}

@media(max-width:800px){.faq-grid{grid-template-columns:1fr}.print-bar{flex-wrap:wrap}.print-bar .print-back{margin-left:0}}

/* =========================================================================
   TEMA SCURO
   Le variabili di :root sono gia' la tavolozza del tema chiaro; qui vengono
   ridefinite per lo scuro, piu' le regole che nel CSS storico hanno colori
   scritti a mano e quindi non seguono le variabili.

   Perche' non Dark Reader: quella libreria calcola i colori a runtime e,
   se l'analisi non fa in tempo (scheda in secondo piano, dispositivo lento,
   sessione ripristinata), applica un ripiego che rende la pagina nera con
   pulsanti secondari bianchi su bianco, cioe' invisibili. Qui i colori sono
   decisi in anticipo: non esiste uno stato intermedio sbagliato, e non
   servono 94 KB di JavaScript.

   Attivazione: attributo data-theme sull'elemento <html>, scritto dallo
   script nel <head> di index.php prima che la pagina si disegni.
   ========================================================================= */

/* Campi: il colore del testo va dichiarato anche in tema CHIARO.
   ------------------------------------------------------------------
   La regola di base dichiarava `background:#fff` ma non `color`, quindi in
   chiaro il colore del testo lo sceglieva il browser. Con il sistema operativo
   in tema scuro e il <meta name="color-scheme" content="light dark"> di
   index.php, Chrome applica ai campi il suo stile scuro: testo BIANCO. Unito al
   fondo bianco forzato dal CSS, il risultato era un campo che sembra vuoto
   mentre ci si scrive dentro — si vedeva solo in tema scuro, dove il colore
   era dichiarato (riga piu' sotto).
   `color-scheme: light` su :root chiude lo stesso problema per tutto cio' che
   disegna il browser e che il CSS non puo' colorare: tendine dei <select>,
   selettori di data, barre di scorrimento. Il blocco scuro qui sotto ha
   specificita' maggiore e continua a vincere quando serve. */
:root { color-scheme: light; }
input, select, textarea { color: var(--text); }

:root[data-theme="dark"] {
    color-scheme: dark;

    --bg: #0f1419;
    --surface: #1a2028;      /* schede, pannelli, intestazione */
    --surface-2: #222a34;    /* fondi tenui: filtri, FAQ, code, note */
    --text: #e4e8ee;
    --muted: #9aa6b4;
    --line: #2c3641;
    --white: #1a2028;

    /* Due blu distinti: uno per il testo su fondo scuro, uno per le
       superfici piene che sopra ci tengono testo bianco. Con un solo blu
       uno dei due casi non raggiunge il contrasto minimo. */
    --blue: #7cb8ff;
    --blue-solid: #1e63c9;
    --blue2: #a5cfff;

    --red: #ff7b70;
    --green: #4ade80;
    --gold: #ff8fa3;
}

/* --- superfici --- */
:root[data-theme="dark"] .site-header { background: var(--surface); box-shadow: 0 2px 4px rgba(0,0,0,.4); }
:root[data-theme="dark"] .steps article,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .metric-grid article,
:root[data-theme="dark"] .status-card { background: var(--surface); box-shadow: 0 2px 8px rgba(0,0,0,.35); }
:root[data-theme="dark"] .guide-step { background: var(--surface); border-left-color: var(--blue); box-shadow: 0 2px 6px rgba(0,0,0,.3); }
:root[data-theme="dark"] .guide-step-num { color: var(--blue); }
:root[data-theme="dark"] .faq-card,
:root[data-theme="dark"] .office-notes,
:root[data-theme="dark"] .decision-summary,
:root[data-theme="dark"] .filter-bar,
:root[data-theme="dark"] code,
:root[data-theme="dark"] input[readonly] { background: var(--surface-2); }
:root[data-theme="dark"] .pagination-bar { background: var(--surface-2); }
:root[data-theme="dark"] .legal-editor-wrap { background: var(--surface); border-color: var(--line); }
:root[data-theme="dark"] .legal-toolbar { background: var(--surface-2); }
:root[data-theme="dark"] .legal-toolbar button { background: var(--surface); border-color: var(--line); color: var(--text); }
:root[data-theme="dark"] .legal-toolbar button:hover { background: var(--surface-2); }

/* --- il logo resta su fondo chiaro: e' uno stemma, invertirlo lo sporca --- */
:root[data-theme="dark"] .crest { background: #fff; padding: 2px; }

/* --- pulsanti --- */
:root[data-theme="dark"] .btn { background: var(--blue-solid); color: #fff; }
:root[data-theme="dark"] .btn:hover { background: #2a74dc; }
/* Questi due erano il difetto piu' grave in scuro: fondo bianco fisso e
   testo che diventava chiaro, cioe' pulsanti illeggibili. */
:root[data-theme="dark"] .btn.light,
:root[data-theme="dark"] .btn.bordered { background: var(--surface-2); color: var(--blue); border: 1px solid var(--line); }
:root[data-theme="dark"] .btn.light:hover,
:root[data-theme="dark"] .btn.bordered:hover { background: #2c3641; }
:root[data-theme="dark"] .btn.danger { background: #b3231a; color: #fff; }

/* --- campi --- */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea { background: var(--surface-2); color: var(--text); border-color: var(--line); }
:root[data-theme="dark"] .filter-field,
:root[data-theme="dark"] .copy-area { border-color: var(--line); }
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: var(--muted); }
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] select:focus,
:root[data-theme="dark"] textarea:focus { box-shadow: 0 0 0 3px rgba(124,184,255,.35); border-color: var(--blue); }
:root[data-theme="dark"] .password-toggle { background: var(--surface-2); border-color: var(--line); color: var(--blue); }
:root[data-theme="dark"] .password-toggle:hover { background: #2c3641; }

/* --- avvisi e badge: fondo tenue ricavato dal colore di stato --- */
:root[data-theme="dark"] .alert.success { background: rgba(74,222,128,.12); color: #6ee7a0; }
:root[data-theme="dark"] .alert.danger  { background: rgba(255,123,112,.12); color: #ff9d94; }
:root[data-theme="dark"] .alert.warning { background: rgba(230,120,0,.15);  color: #ffb454; }
:root[data-theme="dark"] .alert.info    { background: rgba(124,184,255,.12); color: var(--blue); }
:root[data-theme="dark"] .badge.success { background: rgba(74,222,128,.15); color: #6ee7a0; }
:root[data-theme="dark"] .badge.warning { background: rgba(230,120,0,.18);  color: #ffb454; }
:root[data-theme="dark"] .badge.info    { background: rgba(124,184,255,.15); color: var(--blue); }
:root[data-theme="dark"] .badge.danger  { background: rgba(255,123,112,.15); color: #ff9d94; }
:root[data-theme="dark"] .badge.muted   { background: var(--surface-2); color: var(--muted); }
:root[data-theme="dark"] .security-note,
:root[data-theme="dark"] .info-box { background: rgba(124,184,255,.10); }
:root[data-theme="dark"] .info-box strong { color: var(--blue); }
:root[data-theme="dark"] .status-icon { background: rgba(74,222,128,.15); }
:root[data-theme="dark"] .cf-check.is-info { color: var(--blue); }
/* Il bordo di `is-pending` e' un blu scuro fisso (#004080): sul fondo scuro
   spariva, e la scheda "in lavorazione" restava senza il suo segnale di stato,
   mentre le gemelle is-active e is-empty usano variabili e si vedono. */
:root[data-theme="dark"] .status-card.is-pending { border-left-color: var(--blue); }

/* --- sidebar: nel CSS storico il fondo e' var(--text). Invertendo --text
       diventerebbe chiara con testo chiaro, quindi va fissata a mano. --- */
:root[data-theme="dark"] .sidebar { background: #151b22; border-right: 1px solid var(--line); }
:root[data-theme="dark"] .sidebar a { color: #d3dae3; }
:root[data-theme="dark"] .sidebar a:hover,
:root[data-theme="dark"] .sidebar a.active { background: var(--blue-solid); color: #fff; }

/* --- superfici blu piene: il testo bianco sopra resta leggibile --- */
:root[data-theme="dark"] .hero { background: var(--blue-solid); }
:root[data-theme="dark"] .steps b { background: var(--blue-solid); color: #fff; }
:root[data-theme="dark"] .hero-icon { background: #fff; color: var(--blue-solid); }

/* --- pie' di pagina e banner: gia' scuri, si allineano alla tavolozza --- */
:root[data-theme="dark"] .site-footer,
:root[data-theme="dark"] .cookie-banner { background: #10151b; }
:root[data-theme="dark"] .footer-meta { border-top-color: var(--line); }

/* --- il tema scuro non deve finire sulla carta --- */
@media print {
    :root[data-theme="dark"] { color-scheme: light; }
    :root[data-theme="dark"] body,
    :root[data-theme="dark"] .panel,
    :root[data-theme="dark"] .site-header { background: #fff !important; color: #000 !important; }
    .no-print, .cookie-banner, .tema-toggle { display: none !important; }
}

/* --- interruttore del tema ---------------------------------------------
   --surface/--surface-2 esistevano solo nel blocco scuro: qui si dichiarano
   anche per il chiaro, cosi' le regole comuni possono usarli in entrambi.
   Il blocco scuro ha specificita' maggiore, quindi continua a vincere. */
:root { --surface: #fff; --surface-2: #f8f9fa; }

.tema-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: 0 0 auto; padding: 0;
    border: 1px solid var(--line); border-radius: 50%;
    background: transparent; color: var(--muted); cursor: pointer;
    transition: background .2s, color .2s;
}
.tema-toggle:hover { background: var(--surface-2); color: var(--blue); }
.tema-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Si mostra l'icona dell'azione disponibile, non dello stato corrente. */
.tema-icona-chiaro { display: none; }
:root[data-theme="dark"] .tema-icona-scuro { display: none; }
:root[data-theme="dark"] .tema-icona-chiaro { display: inline; }

/* --- correzioni di contrasto sul tema chiaro ---------------------------
   Difetti preesistenti, misurati con il rapporto di contrasto WCAG 2.1 AA
   (minimo 4.5:1 per il testo normale). I colori restano gli stessi come
   tinta: sono solo abbassati di luminosita' quel tanto che basta.
   Valori prima -> dopo: avviso 2.74, successo 4.10, errore 4.00,
   titolo sidebar 2.82. */
.alert.success, .badge.success { color: #00753A; }
.alert.danger,  .badge.danger  { color: #C02318; }
.alert.warning, .badge.warning { color: #8F4E00; }
.alert.warning { border-left-color: #8F4E00; }
.field-help.is-valid, .cf-check.is-valid, .upload-status.is-valid { color: #00753A; }
/* Il titolo della sidebar sta su fondo scuro: li' --muted e' troppo cupo. */
.side-title { color: #9AA6B4; }
/* Le correzioni di contrasto qui sopra usano colori fissi e, stando dopo il
   blocco scuro, ne vincerebbero le regole a parita' di specificita' dove
   questa non e' maggiore. Qui si ripristina la variante chiara per lo scuro. */
:root[data-theme="dark"] .field-help.is-valid,
:root[data-theme="dark"] .cf-check.is-valid,
:root[data-theme="dark"] .upload-status.is-valid { color: #6EE7A0; }

/* --- bersagli tattili su schermi piccoli -------------------------------
   Su telefono i comandi erano alti 24-32 px. Le linee guida iOS e Android
   indicano 44 px come area minima toccabile: sotto, il dito manca il
   bersaglio o ne colpisce uno vicino. Cresce l'area, non il testo. */
@media (max-width: 800px) {
    .btn, .btn.compact { min-height: 44px; }
    .link-btn, .nav-link-button {
        min-height: 44px; display: inline-flex; align-items: center;
    }
    .tema-toggle { width: 44px; height: 44px; }
    input, select, textarea { min-height: 44px; }
    .otp-input { min-height: 56px; }
    /* La casella di spunta dell'informativa: 16 px erano difficili da colpire. */
    .check input[type="checkbox"] { width: 22px; height: 22px; transform: none; margin-top: 2px; }
    .sidebar a { min-height: 44px; display: flex; align-items: center; }
    .footer-links a, .footer-col-center a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* --- barra di navigazione su telefono ----------------------------------
   Sotto gli 800px la sidebar diventa una striscia orizzontale. Con
   overflow:auto le voci oltre la terza restavano fuori schermo e nulla
   segnalava che si potesse scorrere: di fatto erano irraggiungibili.
   Qui va a capo, cosi' sono tutte visibili e toccabili. */
@media (max-width: 800px) {
    /* QUI C'ERA IL VECCHIO MENU A PASTIGLIE — tolto il 26/08/2026.
       Sotto gli 800px la barra laterale diventava una striscia orizzontale
       di pastiglie che andavano a capo. Poi e' arrivato il cassetto
       (piu' sotto, nel blocco a 1024px), che la trasforma in un pannello
       verticale: da quel momento queste regole non descrivevano piu'
       niente di reale, ma continuavano ad applicarsi.
       Il risultato si vedeva: `margin: 0` con `border-radius: 999px` in
       una colonna verticale attaccava un contorno tondo all'altro, e le
       voci formavano un'onda continua invece di un elenco.
       Restano solo le cose che servono anche nel cassetto: fondo tenue e
       misura del testo. Il resto — margini, raggio, spaziatura — lo decide
       il blocco del cassetto, che e' l'unico a sapere com'e' fatto. */
    .sidebar a {
        padding: 12px 14px;
        margin: 4px 0;
        border-radius: 8px;
        background: rgba(255,255,255,.06);
        font-size: 14px;
    }
    .sidebar a:hover,
    .sidebar a.active { background: var(--blue); }

    /* L'intestazione occupava 82px fissi anche da telefono. */
    .site-header, .header-row { height: auto; min-height: 64px; }
    /* Solo sopra e sotto: il margine laterale lo mette gia' .shell, e
       scrivendo `padding: 10px 0` lo si cancellava. Da telefono si vedeva
       cosi': il nome dell'Ente attaccato al bordo sinistro e il pulsante del
       menu attaccato al destro, mentre tutto il resto della pagina stava
       dentro i suoi 15px. La barra sembrava uscire dallo schermo. */
    .header-row { padding-top: 10px; padding-bottom: 10px; gap: 10px; }
    .brand strong { font-size: 15px; }
    .crest { width: 38px; height: 38px; }
    .site-header nav { gap: 12px; }

    /* Le azioni in testa alle pagine admin si accavallavano. */
    .page-title .actions,
    .panel-title { flex-wrap: wrap; gap: 10px; }
}

/* --- FAQ raggruppate per categoria ------------------------------------
   Le voci arrivano da dd_faq_voci e sono raggruppate: serve un titolo di
   sezione, che nella versione scritta a mano non esisteva. */
.faq-categoria { font-size: 18px; margin: 26px 0 12px; font-weight: 700; }
.faq-categoria:first-of-type { margin-top: 8px; }
.faq-card p { margin: 0 0 .5rem; }
.faq-card p:last-child { margin-bottom: 0; }
.faq-card ul, .faq-card ol { margin: .5rem 0; padding-left: 1.3rem; font-size: 14px; }
.faq-card li { margin: .25rem 0; }
.faq-rif {
    margin-top: .6rem; font-size: 12px; font-weight: 700;
    color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
}
:root[data-theme="dark"] .faq-rif { color: var(--muted); }

/* --- credito dello sviluppatore nel pie' di pagina --------------------- */
.footer-credit-dev { margin: 6px 0 0; font-size: 13px; }
.footer-credit-dev a { color: inherit; text-decoration: none; }
.footer-credit-dev a:hover { color: #fff; text-decoration: underline; }

/* =====================================================================
   Tendina dei <select>: le voci si devono leggere anche in tema chiaro
   =====================================================================
   Sintomo: aprendo un filtro (Stato, Ruolo) compariva un riquadro bianco
   quasi vuoto, con leggibile solo la voce evidenziata — bianco su blu — e
   tutte le altre invisibili, bianco su bianco.

   La causa e' la stessa del campo password: l'elenco che si apre lo disegna
   il sistema operativo, non il CSS della pagina. Con Windows in tema scuro
   il browser colora quelle voci di BIANCO, e sotto ci mette il fondo chiaro
   della pagina. `color-scheme: light` su :root risolve il caso generale, ma
   non copre gli <option>, che su Windows restano disegnati dal sistema.

   Qui il colore lo si dichiara a mano su entrambi i temi. Le due proprieta'
   vanno insieme: dichiararne una sola lascia l'altra al browser, e il
   problema si ripresenta a parti invertite. */
select option {
    background-color: #ffffff;
    color: #1C2024;
}
:root[data-theme="dark"] select option {
    background-color: #222a34;
    color: #e4e8ee;
}

/* Nota in evidenza dentro un passo della Guida operatore: serve per le cose
   che, se non lette, fanno sbagliare il lavoro — tipo il fatto che il rifiuto
   vada deciso prima di generare il codice. */
.guide-nota {
    border-left: 4px solid var(--gold, #E67800);
    background: rgba(230, 120, 0, .08);
    border-radius: 4px;
    padding: 12px 16px;
    margin-top: 12px;
}

/* =====================================================================
   Mostra / Nascondi la password: larghezza che non salta
   =====================================================================
   Il pulsante cambia testo, e "Nascondi" e' piu' lungo di "Mostra": a ogni
   clic il campo accanto si allargava e si restringeva, con tutta la riga
   che si muoveva sotto le dita. Si riserva la larghezza della parola piu'
   lunga una volta per tutte. */
.password-toggle {
    min-width: 104px;
    text-align: center;
    white-space: nowrap;
}
@media (max-width: 800px) {
    .password-toggle { min-width: 92px; }
}

/* =====================================================================
   Finestra di conferma interna
   =====================================================================
   Sostituisce il riquadro del browser, quello che scrive in alto
   "realmonte-tributi.netsons.org dice". Colori e caratteri sono quelli del
   portale, in tutti e due i temi. */
.dd-conferma {
    max-width: 460px;
    width: calc(100% - 32px);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 28px;
    background: var(--white, #fff);
    color: var(--text);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
}
.dd-conferma::backdrop { background: rgba(15, 20, 25, .55); }
.dd-conferma h2 { margin: 0 0 10px; font-size: 21px; }
.dd-conferma p { margin: 0 0 24px; font-size: 16px; line-height: 1.6; color: var(--muted); }
.dd-conferma p { margin: 0 0 14px; }
/* Elenco di controlli da fare prima di confermare. Sta fra il testo e i
   pulsanti perche' e' quello che decide la risposta: metterlo dopo i
   pulsanti vorrebbe dire farlo leggere a chi ha gia' scelto. */
.dd-conferma-elenco {
    margin: 0 0 22px;
    padding-left: 22px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
}
.dd-conferma-elenco li { margin: 6px 0; }
.dd-conferma-azioni { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.dd-conferma-azioni .btn { min-height: 44px; }

/* Su schermo stretto i due pulsanti vanno uno sopra l'altro, con l'azione
   distruttiva SOTTO: il pollice arriva prima su "Annulla". */
@media (max-width: 480px) {
    .dd-conferma { padding: 22px; }
    .dd-conferma-azioni { flex-direction: column-reverse; }
    .dd-conferma-azioni .btn { width: 100%; }
}

:root[data-theme="dark"] .dd-conferma {
    background: var(--surface);
    border-color: var(--line);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
}
:root[data-theme="dark"] .dd-conferma::backdrop { background: rgba(0, 0, 0, .66); }

/* Asterisco dei campi obbligatori. Rosso e in grassetto perche' deve essere
   visto senza cercarlo, ma aria-hidden nel markup: ai lettori di schermo
   l'obbligatorieta' la comunica gia' l'attributo `required`, e leggere
   "asterisco" dopo ogni etichetta sarebbe rumore. */
.obbligatorio { color: var(--red, #E02B20); font-weight: 700; }
.legenda-obbligatori {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--muted);
    font-weight: 400;
}
/* Il testo dell'etichetta e il suo asterisco stanno insieme, su una riga
   sola: senza questo guscio, dentro `label{display:grid}` l'asterisco
   diventava una riga a se' e si leggeva sotto l'etichetta. */
.etichetta-testo { display: inline; }

/* Il pulsante di invio non deve stare attaccato all'ultimo campo: dentro una
   griglia di campi eredita il gap piccolo della griglia e sembra incollato al
   riquadro sopra. */
form > .btn,
form > button[type="submit"] { margin-top: 6px; }
.form-grid > .btn,
.form-grid > button[type="submit"] { margin-top: 10px; }

/* =====================================================================
   Menu dell'Area Comune su schermo stretto: cassetto, non pila
   =====================================================================
   Prima le 14 voci diventavano pastiglie impilate alte mezzo schermo, e
   il contenuto della pagina finiva sotto la piega: per leggere il titolo
   bisognava scorrere. Adesso il menu sta chiuso e si apre da un pulsante,
   come sul portale dell'imposta di soggiorno. */
.apri-menu, .velo-menu, .sidebar-intestazione { display: none; }

/* Il limite e 1024 e non 800: fra 801 e 1100 la sidebar restava fissa a
   215px sopra il contenuto e non cera il cassetto. Un telefono in
   orizzontale (844) o un tablet piccolo cadeva li, con la barra in alto
   strozzata e il menu che rubava un quarto di schermo. */
@media (max-width: 1024px) {
    .apri-menu {
        display: flex;
        align-items: center;
        gap: 10px;
        width: calc(100% - 30px);
        margin: 15px;
        padding: 13px 18px;
        min-height: 48px;
        border: 1px solid var(--line);
        border-radius: 4px;
        background: var(--white, #fff);
        color: var(--text);
        font: inherit;
        font-weight: 700;
        cursor: pointer;
    }
    /* Tre righe disegnate col bordo: nessuna immagine da scaricare. */
    .apri-menu-icona {
        width: 20px; height: 2px;
        background: currentColor;
        box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor;
    }

    .velo-menu {
        position: fixed; inset: 0;
        background: rgba(15, 20, 25, .5);
        z-index: 39;
    }
    .velo-menu:not([hidden]) { display: block; }

    .sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: min(280px, 82vw);
        padding: 0 12px 20px;
        display: block;
        overflow-y: auto;
        z-index: 40;
        transform: translateX(-100%);
        transition: transform .22s ease;
    }
    .sidebar.aperto { transform: none; }
    .sidebar a { white-space: normal; }

    .sidebar-intestazione {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 14px 14px;
        color: var(--muted);
        font-size: 12px;
        letter-spacing: .1em;
        font-weight: 700;
    }
    .chiudi-menu {
        background: none; border: 0;
        color: #E6E9F2;
        font-size: 30px; line-height: 1;
        min-width: 44px; min-height: 44px;
        cursor: pointer;
    }
    /* Il titolo doppione della versione da scrivania si nasconde. */
    .sidebar .side-title { display: none; }
    /* Il corpo non deve scorrere dietro al cassetto aperto. */
    body.menu-aperto { overflow: hidden; }
}

/* =====================================================================
   La barra principale su schermo stretto: il cassetto che mancava
   =====================================================================
   ⚠️ Il difetto era questa riga, nella media query a 800px piu' sotto:

       .site-header nav a:not(.btn) { display: none }

   Sotto gli 800px nascondeva TUTTI i link della barra che non fossero
   pulsanti, e non c'era nessun cassetto a raccoglierli: sparivano e basta.
   Il risultato, da telefono:
     - non autenticato: restavano il tema e «Registrati». **«Accedi»
       spariva** — cioe' proprio la cosa per cui uno apre il portale;
     - autenticato: sparivano «Dashboard» e «Il mio profilo», e restava il
       solo «Esci», che e' un <button> e quindi sfuggiva alla regola.

   Ora le voci finiscono nel cassetto, che riusa il meccanismo del menu
   dell'Area Comune qui sopra: stesso velo, stessa animazione, stesso
   comportamento di fuoco e tastiera. */
.apri-nav, .cassetto-nav, .velo-nav { display: none; }

/* ⚠️ 1024 e non 800 — 26/08/2026.
   Era 800, e il menu dell'Area Comune qui sopra si apriva invece fino a 1024:
   nella fascia in comune comparivano DUE pulsanti di menu, uno sotto l'altro.
   Adesso il pulsante nell'intestazione copre la stessa fascia del cassetto
   laterale, e di menu se ne vede uno solo a ogni larghezza. */
@media (max-width: 1024px) {
    .apri-nav {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* 44px: la misura minima di un bersaglio da dito. */
        width: 44px; height: 44px;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 4px;
        background: var(--white, #fff);
        color: var(--text);
        cursor: pointer;
    }
    /* Tre righe disegnate col bordo, come il pulsante dell'Area Comune:
       nessuna immagine da scaricare. */
    .apri-nav-icona {
        width: 20px; height: 2px;
        background: currentColor;
        box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor;
    }

    /* Il velo della barra e' un `.velo-menu` a tutti gli effetti: eredita
       colore, posizione e animazioni gia' scritte. */
    .velo-nav { z-index: 41; }
    .velo-nav:not([hidden]) { display: block; }

    .cassetto-nav {
        position: fixed;
        top: 0; right: 0; bottom: 0;
        width: min(280px, 82vw);
        display: block;
        padding: 0 12px 20px;
        overflow-y: auto;
        z-index: 42;
        background: var(--text);
        /* Esce da DESTRA e non da sinistra: il pulsante che lo apre sta a
           destra, e un pannello che compare dalla parte opposta a quella
           che si e' toccata si legge come un'altra cosa. */
        transform: translateX(100%);
        transition: transform .22s ease;
    }
    .cassetto-nav.aperto { transform: none; }

    .cassetto-nav a,
    .cassetto-nav .nav-link-button {
        display: block;
        width: 100%;
        text-align: left;
        padding: 13px 14px;
        margin: 2px 0;
        border-radius: 4px;
        color: #E6E9F2;
        font-weight: 600;
        white-space: normal;
    }
    .cassetto-nav a:hover,
    .cassetto-nav a:focus-visible { background: var(--blue); color: #fff; }

    /* L'azione principale resta riconoscibile anche qui dentro, ma senza le
       misure del pulsante della barra, che in una colonna stonerebbero. */
    .cassetto-nav a.cassetto-nav-forte { background: var(--blue); color: #fff; }
    .cassetto-nav a.cassetto-nav-forte:hover { background: var(--blue2); }

    .cassetto-nav-esci { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid #2C353D; }
    .cassetto-nav .nav-link-button { color: #8B99A6; }

    .cassetto-nav-intestazione {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 14px 14px;
        color: var(--muted);
        font-size: 12px;
        letter-spacing: .1em;
        font-weight: 700;
        text-transform: uppercase;
    }

    /* «Esci» sta nel cassetto insieme alle altre voci: lasciandolo anche
       nella barra comparirebbe due volte, e nella barra da telefono e'
       l'ultima cosa che serve avere sotto il pollice. */
    .site-header nav .logout-form { display: none; }

    /* Lo spazio fra le voci della barra si stringe: da telefono restano il
       tema, l'azione principale e il pulsante del menu, e 22px fra tre
       elementi spingevano l'ultimo contro il bordo dello schermo. */
    .site-header nav { gap: 10px; }
}

/* Passi dell'attesa e riquadro del codice ancora spento. */
.passi-attesa {
    margin: 0 0 22px;
    padding-left: 22px;
    text-align: left;
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
}
.passi-attesa strong { color: var(--text); }
.campo-in-attesa { opacity: .55; }
.campo-in-attesa input:disabled {
    background: var(--bg);
    cursor: not-allowed;
    letter-spacing: 8px;
    text-align: center;
}
.center { text-align: center; }

/* Anteprime del documento d'identità, fronte e retro affiancati. */
.anteprime-documento {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 0 0 18px;
}
.anteprima-lato { margin: 0; }
.anteprima-lato figcaption {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
}
.anteprima-lato img {
    width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: contain;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--bg);
    display: block;
}
.anteprima-vuota {
    display: grid;
    place-items: center;
    min-height: 140px;
    border: 1px dashed var(--line);
    border-radius: 4px;
    color: var(--muted);
    background: var(--bg);
    font-size: 15px;
}
@media (max-width: 640px) {
    .anteprime-documento { grid-template-columns: 1fr; }
}

/* Pratica respinta: bordo rosso come le altre schede di stato, e il testo del
   motivo che deve leggersi, non stare in grigio piccolo. */
.status-card.is-rejected { border-left: 6px solid var(--red, #E02B20); }
.status-card.is-rejected .status-icon { background: #FDEAE9; color: var(--red, #E02B20); }
.status-card.is-rejected p { margin: 8px 0 0; }
.top-gap { margin-top: 14px; }

/* =====================================================================
   Barra in alto su schermo stretto
   =====================================================================
   Il nome dell'Ente, il sottotitolo, il pulsante del tema e "Esci" stavano
   tutti sulla stessa riga e si accavallavano: "Esci" finiva tagliato fuori
   dallo schermo. La regola che nasconde i link non lo prendeva, perche' e'
   un <button> dentro un <form>, non un <a>. */
@media (max-width: 1024px) {
    .site-header, .header-row { height: auto; min-height: 64px; }
    /* Anche qui solo sopra e sotto: i 15px laterali sono dello .shell. */
    .header-row { padding-top: 10px; padding-bottom: 10px; gap: 10px; }
    .brand { gap: 10px; min-width: 0; }
    .brand strong { font-size: 15px; line-height: 1.2; }
    /* Il sottotitolo sparisce: su 360 punti di larghezza ruba lo spazio a
       "Esci", che invece serve. */
    .brand small { display: none; }
    .crest { width: 38px; height: 38px; flex: 0 0 38px; }
    .site-header nav { gap: 10px; flex-shrink: 0; }
    .site-header nav .btn.compact { padding: 8px 12px; font-size: 14px; }
    .nav-link-button, .site-header nav form { white-space: nowrap; }
}
@media (max-width: 380px) {
    .brand strong { font-size: 14px; }
    .crest { width: 32px; height: 32px; flex: 0 0 32px; }
}

/* Anteprima del documento: pulsante e finestra richiudibile. */
.anteprima-apri {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    position: relative;
}
.anteprima-apri img { pointer-events: none; }
.anteprima-lente {
    position: absolute;
    right: 8px;
    bottom: 8px;
    background: rgba(15, 20, 25, .78);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 4px;
}
.dd-anteprima {
    max-width: min(900px, 94vw);
    max-height: 92vh;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: var(--white, #fff);
    color: var(--text);
    overflow: auto;
}
.dd-anteprima::backdrop { background: rgba(15, 20, 25, .72); }
.dd-anteprima-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    background: inherit;
}
.dd-anteprima-chiudi {
    background: none;
    border: 0;
    font-size: 30px;
    line-height: 1;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
    color: var(--muted);
}
.dd-anteprima img { display: block; max-width: 100%; height: auto; }
.dd-anteprima-apri-file { display: block; padding: 14px 18px; font-weight: 600; }
:root[data-theme="dark"] .dd-anteprima { background: var(--surface); }

/* Riga sotto ogni anteprima: che file è, quanto pesa, e come toglierlo.
   L'informazione sta accanto all'immagine e non in una scritta piccola sotto
   il campo, dove non la legge nessuno. */
.anteprima-riga {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.anteprima-info { font-size: 13px; color: var(--muted); }
.anteprima-elimina { display: inline; margin: 0; }
.btn-elimina {
    background: none;
    border: 1px solid var(--red, #E02B20);
    color: var(--red, #E02B20);
    border-radius: 4px;
    padding: 7px 12px;
    min-height: 40px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.btn-elimina:hover { background: var(--red, #E02B20); color: #fff; }
:root[data-theme="dark"] .btn-elimina { border-color: #ff6b60; color: #ff6b60; }
:root[data-theme="dark"] .btn-elimina:hover { background: #ff6b60; color: #1a2028; }

/* Anteprima del file appena scelto, prima dell'invio. */
.scelta-anteprima {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--bg);
}
.scelta-anteprima img {
    display: block;
    width: 100%;
    max-height: 260px;
    object-fit: contain;
    border-radius: 4px;
    background: var(--white, #fff);
}
.scelta-nessuna-immagine {
    display: grid;
    place-items: center;
    min-height: 90px;
    color: var(--muted);
    font-size: 15px;
}
.scelta-riga {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.scelta-nome {
    font-size: 13px;
    font-weight: 600;
    word-break: break-all;
    flex: 1 1 auto;
    min-width: 0;
}
.scelta-avviso {
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--gold, #E67800);
}
:root[data-theme="dark"] .scelta-anteprima { background: var(--surface-2, #1a2028); }

/* Le due fasi della pagina documento: numero, titolo, e il segno di spunta
   quando la fase è completa. */
.passo-titolo { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.passo-numero {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--blue); color: #fff;
    font-size: 16px; font-weight: 700;
    flex: 0 0 34px;
}

/* =====================================================================
   «AZIONE RICHIESTA» — la scheda che chiede di fare qualcosa
   =====================================================================
   Era identica alle schede informative: stesso bianco, stesso bordo blu.
   Chi si era perso l'email non aveva niente che gli saltasse all'occhio, e
   quella scheda è l'unico posto in cui il portale gli dice che la pratica è
   ferma e aspetta lui.

   Cambia il COLORE, non il tipo di avviso: resta una scheda di stato, non
   diventa un errore. Il rosso direbbe «hai sbagliato», e non ha sbagliato
   niente — deve solo inserire un codice. L'ambra è la stessa tinta che il
   portale usa già per «guarda qui» (`.alert.warning`). */
.status-card.is-action {
    border-left: 6px solid #E67800;
    background: #FFF9F0;
}
.status-card.is-action .status-icon {
    background: #E67800;
    color: #fff;
    font-weight: 700;
}
.status-card.is-action small { color: #B35F00; }
:root[data-theme="dark"] .status-card.is-action {
    background: rgba(230,120,0,.10);
    border-left-color: #F0A344;
}
:root[data-theme="dark"] .status-card.is-action .status-icon { background: #F0A344; color: #1a2028; }
:root[data-theme="dark"] .status-card.is-action small { color: #F0A344; }

/* Animazioni leggere: solo transform e opacity.
   1) Ingresso degli avvisi (conferme, errori): compaiono al load dopo il
      redirect post-invio; senza transizione passano inosservati.
   2) Indicatore "operazione in corso": app.js aggiunge .is-loading al
      pulsante durante gli invii lunghi (upload documento compreso). */
.alert { animation: dd-avviso-in .18s ease-out; }
@keyframes dd-avviso-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
.is-loading::after {
    content: '';
    display: inline-block;
    width: .85em; height: .85em;
    margin-left: .5em;
    border: 2px solid currentColor;
    border-bottom-color: transparent;
    border-radius: 50%;
    vertical-align: -.1em;
    animation: dd-giro .7s linear infinite;
}
@keyframes dd-giro { to { transform: rotate(360deg); } }

/* Rispetto della preferenza di movimento ridotto: durate azzerate su tutto,
   cosi' ogni animazione presente e futura eredita il comportamento giusto. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
    html { scroll-behavior: auto; }
}

/* =====================================================================
   Hover e aperture — stesso criterio del portale Tributi
   =====================================================================
   Solo transform e opacity. Il cassetto del menu su schermo stretto qui
   scorreva gia' (`.sidebar` ha transform + transition): manca solo il velo
   dietro, che compariva di colpo. */
.velo-menu:not([hidden]) { animation: dd-velo-entra .22s ease-out; }
@keyframes dd-velo-entra { from { opacity: 0; } to { opacity: 1; } }
/* In uscita sfuma insieme al cassetto, che scorre gia' per conto suo.
   `forwards` tiene l'ultimo fotogramma finche' il JS non mette `hidden`,
   altrimenti fra la fine della dissolvenza e la sparizione si vedrebbe il
   grigio tornare pieno per un istante. */
.velo-menu.velo-in-uscita { animation: dd-velo-esce .2s ease-in forwards; }
@keyframes dd-velo-esce { from { opacity: 1; } to { opacity: 0; } }

/* Un pixel di sollevamento sui pulsanti: si vede, non sposta nulla. */
.btn { transition: background .2s, transform .15s ease, box-shadow .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* I collegamenti-pulsante degli elenchi e le voci del menu si spostano di
   lato: in verticale farebbero ballare la riga sotto il dito. */
.link-btn, .sidebar a, .back-link, .center-link {
    transition: color .15s, background .2s, transform .15s ease;
}
.link-btn:hover, .sidebar a:hover, .center-link:hover { transform: translateX(2px); }
.back-link:hover { transform: translateX(-2px); }

/* Le anteprime del documento reagiscono al passaggio: sono l'unico punto
   della pagina in cui si clicca un'immagine, e non lo sembra. */
.anteprima-apri { transition: transform .15s ease, box-shadow .15s ease; }
.anteprima-apri:hover { transform: scale(1.01); box-shadow: 0 6px 16px rgba(0,0,0,.14); }

@media (prefers-reduced-motion: reduce) {
    .velo-menu:not([hidden]), .velo-menu.velo-in-uscita { animation: none; }
    .btn:hover, .btn:active,
    .link-btn:hover, .sidebar a:hover,
    .back-link:hover, .center-link:hover,
    .anteprima-apri:hover { transform: none; }
}

/* =====================================================================
   Respiro sopra i pulsanti che chiudono un blocco
   =====================================================================
   «Salva le modifiche» stava attaccato all'ultimo campo (il CAP da
   scrivania, il telefono da telefono, perche' la griglia si ridispone), e
   «Torna ai dettagli della pratica» e «Chiedi un nuovo codice» erano
   incollati al riquadro sopra.
   La regola che esisteva copriva solo `form > .btn` con 6px: troppo poco, e
   non prendeva i pulsanti dentro un <fieldset> ne' i collegamenti-pulsante,
   che sono <a> e non <button>. Si allarga la copertura invece di aggiungere
   margini a mano nei singoli punti, cosi' vale anche per le pagine future. */
form > .btn,
form > button[type="submit"],
fieldset > .btn,
fieldset > button[type="submit"] { margin-top: 16px; }

/* Collegamenti-pulsante che seguono un riquadro o un modulo. */
.security-note + .btn,
.info-box + .btn,
form + .btn,
.panel > .btn { margin-top: 18px; }

.center-link { margin-top: 14px; }

/* =====================================================================
   La barra in alto su telefono — SECONDO TENTATIVO, 25/08/2026
   =====================================================================
   QUI C'ERA UN PRIMO RIMEDIO, ED E' STATO TOLTO PERCHE' NE PRODUCEVA UN
   ALTRO. Partiva dal problema giusto — `.site-header nav a:not(.btn)
   {display:none}` toglieva i collegamenti sotto gli 800 punti, e da
   telefono non c'era piu' modo di aprire Dashboard, profilo o «Accedi» —
   ma lo risolveva rimettendoli in barra con `flex-wrap: wrap`.
   Il guaio e' che `.site-header` e `.header-row` hanno **`height: 82px`
   fissa**: le voci andavano a capo dentro un contenitore che non poteva
   crescere, e la seconda riga finiva tagliata a meta' o sovrapposta al
   contenuto. Da autenticato le voci sono quattro — tema, Dashboard, Il mio
   profilo, Esci — piu' lo stemma: a 375 punti non ci stanno in una riga, e
   il rimpicciolimento del testo a 13px rimandava il problema di qualche
   pixel senza risolverlo.

   Ora le voci non stanno piu' in barra: stanno in un CASSETTO, come sul
   portale dell'imposta di soggiorno e come il menu dell'Area Comune qui
   accanto. La regola `display:none` sui link resta buona — quello che
   mancava non era la visibilita', era il posto dove metterli.
   Il cassetto, il velo e le animazioni stanno piu' in alto in questo file,
   accanto a quelli del menu dell'Area Comune con cui condividono tutto. */

/* =====================================================================
   Salto al contenuto principale — WCAG 2.4.1 (livello A)
   =====================================================================
   Sta fuori dallo schermo e rientra solo quando riceve il fuoco da
   tastiera: chi usa il mouse non lo vede mai, chi usa la tastiera o un
   lettore di schermo lo trova come primo elemento e salta l'intestazione.
   `outline` esplicito perche' il fuoco su questo collegamento deve essere
   evidente: e' il primo segnale che la tastiera funziona. */
.salta-al-contenuto {
    position: absolute;
    left: 0;
    top: -60px;
    z-index: 100;
    padding: 12px 20px;
    background: var(--blue, #0066CC);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    transition: top .15s ease;
}
.salta-al-contenuto:focus {
    top: 0;
    outline: 3px solid #fff;
    outline-offset: -6px;
}
/* Il contenuto principale riceve il fuoco dopo il salto, ma non deve
   mostrare il contorno: il fuoco e' un mezzo per arrivarci, non una
   selezione da evidenziare. */
#contenuto-principale:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
    .salta-al-contenuto { transition: none; }
}

/* =====================================================================
   Il fondo dei menu scuri — 26/08/2026
   =====================================================================
   La barra laterale dell'Area Comune e il cassetto del menu su telefono
   usavano `background: var(--text)`: cioe' il colore del TESTO come
   sfondo. In tema chiaro funziona per caso — il testo e' quasi nero — ma
   in tema scuro `--text` diventa chiaro, e il menu si ritrovava con il
   fondo bianco e le scritte bianche sopra: illeggibile.

   Un colore usato per il suo valore invece che per il suo significato si
   rompe il giorno in cui quel valore cambia. Qui il significato serviva:
   «fondo dei menu scuri». Adesso ce l'ha un nome suo, e in tema scuro
   prende una tinta scura vera invece di rovesciarsi. */
:root { --menu-fondo: #1C2024; }
:root[data-theme="dark"] { --menu-fondo: #10151b; }

.sidebar,
.cassetto-nav { background: var(--menu-fondo); }

/* =====================================================================
   Cose in fila: stessa misura, stessa linea — 26/08/2026
   =====================================================================
   Tre segnalazioni diverse, una sola causa: in una riga flex gli elementi
   vengono centrati come SCATOLE, ma se le scatole hanno altezze diverse
   il TESTO dentro finisce su linee diverse. Si vede come un pulsante
   «piu' in basso» dell'altro, anche se sono perfettamente centrati.

   Succedeva fra:
     - «Dashboard» (un <a> alto quanto il suo testo) ed «Esci» (un <button>
       dentro un <form>, con il box del pulsante);
     - i campi dei filtri (padding 8px, ~36px) e il pulsante (padding 12px,
       ~44px), in Audit log e Registro email;
     - «Modifica» ed «Elimina» nelle FAQ, per la stessa ragione.

   La cura e' la stessa in tutti e tre: una misura minima comune e lo
   stesso modo di disporre il contenuto. Non si sposta niente a mano con
   margini negativi, che e' la correzione che sembra funzionare finche'
   non cambia il testo. */

/* Barra in alto: link e pulsanti diventano scatole uguali. */
.site-header nav > a,
.site-header nav .nav-link-button {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    line-height: 1.2;
}

/* Filtri: campi e pulsanti alla stessa altezza. */
.filter-bar .filter-field,
.filter-bar .btn,
.filter-bar .btn.compact,
.filter-bar button,
.filter-bar select,
.filter-bar input {
    min-height: 40px;
}
/* Il pulsante dei filtri e' alto come i campi: i 12px sopra e sotto lo
   facevano sporgere. La larghezza resta, cosi' non diventa un francobollo. */
.filter-bar .btn { padding-top: 0; padding-bottom: 0; }

/* Azioni in tabella: «Modifica» ed «Elimina» sulla stessa linea. */
.table-actions > a,
.table-actions > button,
.table-actions > form > button,
.table-actions .link-btn {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    line-height: 1.2;
}
.table-actions > form { display: inline-flex; margin: 0; }

/* Il pulsante «Esci» nella barra in alto — 26/08/2026.
   Sta dentro un <form> (deve esserlo: uscire e' una POST con il token, non
   un link che chiunque puo' far seguire a un altro sito). Ma i pulsanti di
   invio dentro un form prendono `margin-top: 16px`, una regola giusta per i
   moduli veri — dove il pulsante va staccato dai campi — e sbagliata qui,
   dove il form contiene solo lui. Erano proprio quei 16px a farlo sembrare
   piu' in basso di «Dashboard»: le due scatole erano centrate, il testo no. */
.site-header nav .logout-form > button,
.site-header nav .logout-form > .btn { margin-top: 0; }
.site-header nav .logout-form { align-items: center; }

/* I campi dei filtri stanno in riga — 26/08/2026.
   La regola generale `input, select, textarea { width: 100% }` e' giusta
   nei moduli, dove ogni campo ha la sua riga. Nella barra dei filtri no:
   ogni campo prendeva tutta la larghezza e andava a capo da solo, cosi'
   la «barra» era in realta' una colonna, e il pulsante finiva staccato
   sotto — e' quello che si vedeva in Audit log e Registro email.
   Qui i campi si dimensionano sul contenuto, con un minimo perche' la
   casella di ricerca non diventi un francobollo. Sotto gli 800px tornano
   a larghezza piena: su un telefono la riga non ci sta comunque, e un
   campo largo e' piu' facile da toccare. */
.filter-bar .filter-field {
    width: auto;
    min-width: 11rem;
}
.filter-bar input[type="search"],
.filter-bar input[type="text"] { min-width: 16rem; }

@media (max-width: 800px) {
    .filter-bar .filter-field,
    .filter-bar input[type="search"],
    .filter-bar input[type="text"] { width: 100%; min-width: 0; }
    .filter-bar .btn { width: 100%; }
}

/* =====================================================================
   Visualizzatore PDF a schermo intero (Area Comune) — 26/08/2026
   =====================================================================
   Stessa cornice del portale dell'imposta di soggiorno. Nessuna libreria:
   la CSP non permette risorse esterne, e la dichiarazione di accessibilita'
   promette ai cittadini che niente arriva da domini di terzi. Si costruisce
   la cornice attorno al lettore PDF che il browser ha gia'.
   Fondo #525659 e non nero: accanto a un foglio bianco il nero pieno fa un
   contrasto che stanca. */
.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%; }

.pdf-barra {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 16px;
    background: #323639;
    color: #f1f3f4;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.pdf-titolo {
    margin: 0;
    font-weight: 700;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.pdf-comandi { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.pdf-zoom-etichetta { font-size: 13px; color: #c4c7c5; }
.pdf-zoom {
    width: auto;
    background: #202124;
    color: #f1f3f4;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 4px;
    padding: 6px 8px;
    font: inherit;
    font-size: 14px;
    min-height: 36px;
}
.pdf-comando {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #f1f3f4;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
}
.pdf-comando:hover,
.pdf-comando:focus-visible { background: rgba(255,255,255,.14); }
.pdf-chiudi:hover { background: #c5221f; }
.pdf-foglio { flex: 1 1 auto; width: 100%; border: 0; background: #525659; }

/* Su telefono restano i comandi che servono davanti a un documento:
   chiudere, scaricare, aprire in una scheda. Zoom e stampa li fa gia' il
   telefono, meglio di noi: due dita e il menu di sistema. */
@media (max-width: 720px) {
    .pdf-zoom, .pdf-zoom-etichetta,
    .pdf-comando[data-pdf-zoom],
    #pdf-stampa { display: none; }
    .pdf-barra { padding: 8px 10px; }
    .pdf-comando { width: 44px; height: 44px; }
}

/* Titoli rimessi al livello giusto — 26/08/2026.
   Sulla pagina iniziale i titoli saltavano di livello: h1 e poi h3, h2 e poi
   h4. Chi naviga con un lettore di schermo si sposta per intestazioni, e un
   livello saltato gli fa credere di aver perso un pezzo — era il rilievo
   dichiarato nella dichiarazione di accessibilita'.
   I tag sono stati corretti; qui si tiene l'aspetto identico a prima, perche'
   la gerarchia e' una cosa che si annuncia, non che si guarda. */
.hero-card .hero-card-titolo { font-size: 1.05rem; font-weight: 800; margin: .8rem 0 .4rem; }
.steps-titolo { font-size: 1.3rem; font-weight: 800; margin: 0 0 1rem; }
.steps-sezione { margin: 2rem 0; }

/* =====================================================================
   UN MENU SOLO, e niente collegamenti fuori schermo
   =====================================================================
   26/08/2026, segnalato dal committente: «domicilio digitale ha due
   navbar, c'e' qualcosa che non va». Aveva ragione, ed erano TRE difetti
   distinti sotto lo stesso sintomo.

   1. LE DUE BARRE. Comparivano insieme il pulsante del menu
      nell'intestazione (`.apri-nav`, fino a 800px) e la barra a tutta
      larghezza «Menu Area Comune» (`.apri-menu`, fino a 1024px). Le due
      media query si sovrappongono per 800 pixel di larghezza, e nessuno
      aveva guardato la fascia in comune.
      Misurato su 375x812: intestazione 0-65, barra del menu 80-132,
      contenuto a 147px. Il 18% dello schermo per arrivare al titolo.
      Adesso il cassetto laterale si apre SOLO dal pulsante
      nell'intestazione, alle stesse larghezze: un menu, un pulsante.

   2. IL MARGINE FANTASMA. Fra 801 e 1024 il contenuto teneva
      `margin-left: var(--side)` — 250px — ma li' il menu laterale non e'
      una colonna, e' un cassetto fuori schermo. Misurato a 900px: main a
      sinistra 250, largo 650. Il 28% della finestra era vuoto, e il
      contenuto stava schiacciato a destra. Il margine si azzerava solo
      sotto gli 800, insieme al resto.

   3. I CASSETTI CHIUSI RESTAVANO RAGGIUNGIBILI DA TASTIERA. Chiusi non
      sono `display:none`: escono di scena con `transform`, che sposta e
      basta. Misurato sulla dashboard a 375px: 16 collegamenti a fuoco
      fuori dallo schermo (3 nel cassetto della barra, 13 in quello
      dell'Area Comune), nessun `inert`, nessun `aria-hidden`. Con il TAB
      si finiva dentro un menu invisibile; a lettore di schermo venivano
      annunciate tredici voci che non erano sullo schermo.
      `visibility: hidden` li toglie dall'ordine di tabulazione E
      dall'albero di accessibilita', e a differenza di `display:none` si
      lascia animare: la transizione ritarda il ritorno a `hidden` fino a
      cassetto uscito, cosi' lo scorrimento resta quello di prima.
      Il portale dell'imposta di soggiorno il problema non ce l'ha: li' il
      menu chiuso e' `hidden md:flex`, cioe' `display:none`. */

@media (max-width: 1024px) {
    /* Sotto i 1024 le voci dell'Area Comune stanno nel cassetto unico, e
       questa colonna non c'e' proprio. `display:none` e non «fuori
       schermo»: cosi' i suoi dodici collegamenti non esistono nemmeno per
       la tastiera e per i lettori di schermo, e non risultano in doppia
       copia con quelli del cassetto.
       Sopra i 1024 vale il contrario — colonna fissa qui, `.cassetto-nav`
       a `display:none`. A ogni larghezza ce n'e' esattamente uno. */
    .sidebar { display: none; }

    /* Il contenuto riprende tutta la larghezza: sotto i 1024 alla sua
       sinistra non c'e' nessuna colonna da scansare. */
    .content-with-sidebar,
    .has-sidebar .site-footer { margin-left: 0; }

    /* Il cassetto chiuso esce dall'ordine di tabulazione. */
    .cassetto-nav {
        visibility: hidden;
        transition: transform .22s ease, visibility 0s linear .22s;
    }
    .cassetto-nav.aperto {
        visibility: visible;
        transition: transform .22s ease, visibility 0s;
    }

    /* Il titolino che separa le voci dell'Area Comune da quelle della
       navigazione, dentro il cassetto unico. Non e' un collegamento e non
       deve sembrarlo. */
    .cassetto-nav-gruppo {
        margin: 14px 0 4px;
        padding: 12px 14px 0;
        border-top: 1px solid #2C353D;
        color: var(--muted);
        font-size: 12px;
        letter-spacing: .1em;
        font-weight: 700;
        text-transform: uppercase;
    }
    /* La pagina in cui ci si trova, segnata come nel menu laterale. */
    .cassetto-nav a.attiva { background: var(--blue); color: #fff; }
}

/* Con il movimento ridotto il ritardo non serve: il cassetto non scorre,
   quindi aspettare 220ms vorrebbe solo dire tenerlo raggiungibile da
   tastiera per un quinto di secondo dopo che e' sparito. */
@media (prefers-reduced-motion: reduce) {
    .cassetto-nav { transition-delay: 0s !important; }
}

/* =====================================================================
   L'indice delle domande, sulla pagina iniziale
   =====================================================================
   26/08/2026. La pagina iniziale mostrava tutte e diciotto le risposte per
   esteso — 1356 parole su 1706, il 78% della pagina — e da quando esiste
   `?route=faq` le stesse risposte stavano scritte in due posti.
   Qui restano le domande, che sono la parte che si scorre per capire se la
   propria c'e'. Le misure sono quelle gia' in uso nel resto del portale:
   stesso colore dei titoli di categoria (`.faq-categoria`, invariato),
   stessa spaziatura delle altre sezioni, nessun carattere nuovo. */
.faq-indice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 32px;
    max-width: 900px;
    margin: 0 auto;
}
.faq-indice-gruppo { break-inside: avoid; }
.faq-indice ul {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}
.faq-indice li { margin: 0; }
.faq-indice a {
    display: block;
    /* 44px di bersaglio: e' un elenco che si tocca da telefono. */
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 4px;
    font-weight: 600;
    line-height: 1.45;
}
.faq-indice a:hover,
.faq-indice a:focus-visible { background: rgba(0, 102, 204, .08); }
/* Il titolo della categoria dentro l'indice sta piu' stretto che altrove:
   qui sopra non c'e' una risposta lunga a distanziarlo dal gruppo prima. */
.faq-indice .faq-categoria { margin: 14px 0 6px; }

@media (max-width: 800px) {
    .faq-indice { grid-template-columns: 1fr; gap: 0; }
}

/* =====================================================================
   La tendina dei Comuni, disegnata da noi
   =====================================================================
   27/08/2026, segnalato dal committente: «la lista lì a destra è
   bruttissima, sembra rotto».

   Aveva ragione, e la causa non era il foglio di stile: il campo usava un
   `<datalist>`, che il browser disegna per conto suo. Chrome lo apre col
   vestito del sistema operativo e lo posiziona dove decide lui — nella
   segnalazione compariva come una colonna bianca staccata sul bordo destro
   della finestra, senza nessun legame visivo con il campo.

   Adesso l'elenco e' un `<ul>` nostro, ancorato sotto il campo, con i colori
   e i bordi del portale: lo stesso schema del portale dell'imposta di
   soggiorno, dove la tendina e' un `<ul>` in posizione assoluta. */
.campo-con-tendina { position: relative; display: block; }

.tendina-comuni {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 260px;
    overflow-y: auto;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    background: var(--white, #fff);
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: 0 8px 20px rgba(15, 20, 25, .16);
}
.tendina-comuni[hidden] { display: none; }

.tendina-voce {
    /* 44px: la misura minima di un bersaglio da dito. Un elenco di Comuni
       si usa soprattutto da telefono. */
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 14px;
    font-size: 15px;
    cursor: pointer;
    border-bottom: 1px solid var(--line);
}
.tendina-voce:last-child { border-bottom: 0; }
.tendina-voce:hover,
.tendina-voce.evidenziata { background: var(--blue); color: #fff; }

/* Il tema scuro: il fondo bianco fisso qui stonerebbe con tutto il resto. */
:root[data-theme="dark"] .tendina-comuni {
    background: var(--menu-fondo, #151b22);
    border-color: var(--line);
}
:root[data-theme="dark"] .tendina-voce { color: #d3dae3; }
:root[data-theme="dark"] .tendina-voce:hover,
:root[data-theme="dark"] .tendina-voce.evidenziata { background: var(--blue-solid, #0066CC); color: #fff; }