/* --- Font auto-ospitati (offline/PWA/stampa). Titillium Web = font ufficiale PA italiana. --- */
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/TitilliumWeb-400.woff2') format('woff2')}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/TitilliumWeb-600.woff2') format('woff2')}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/TitilliumWeb-700.woff2') format('woff2')}
@font-face{font-family:'Lora';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/Lora-var.woff2') format('woff2')}

:root{
  --font-sans:'Titillium Web',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-serif:'Lora',Georgia,"Times New Roman",serif;
  --blue:#1E4F92; --blue-d:#143a6b; --blue-t:#E9F0F8;
  --red:#C4392B; --red-t:#F8E7E3;
  --gold:#D99A2B; --gold-t:#FBF0DA;
  --green:#3C7A4E; --green-t:#E7F1E9;
  --ink:#241f18; --slate:#6a6152;
  --paper:#F6EFDF; --card:#fff; --line:#EBE3D2;
  --ok:#2f8a46; --warn:#C4392B;
  --r:16px; --r-sm:11px; --r-lg:22px;
  --sh-sm:0 1px 2px rgba(20,58,107,.05);
  --sh:0 6px 20px rgba(20,58,107,.08),0 1px 2px rgba(20,58,107,.05);
  --sh-lg:0 14px 40px rgba(20,58,107,.14);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-sans);
  color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(58rem 34rem at 88% -8%, rgba(217,154,43,.10), transparent 60%),
    radial-gradient(48rem 30rem at -6% 0%, rgba(30,79,146,.07), transparent 55%),
    var(--paper);
  background-attachment:fixed;}
a{color:var(--blue)}
h1,h2,h3{font-family:var(--font-serif);line-height:1.14;margin:0;letter-spacing:-.2px}

/* ---------- TOP BAR ---------- */
.topnav{background:linear-gradient(180deg,#1a4a86,var(--blue-d));color:#fff;display:flex;align-items:center;gap:15px;
  padding:11px 20px;position:sticky;top:0;z-index:50;
  box-shadow:0 2px 0 var(--gold),0 8px 22px rgba(20,58,107,.20)}
.topnav .stemma{height:40px;display:block;flex:0 0 auto;
  filter:drop-shadow(0 0 1.5px rgba(255,255,255,.65)) drop-shadow(0 1px 2px rgba(0,0,0,.28))}
.topnav .brand{font-family:var(--font-serif);font-weight:700;font-size:18.5px;letter-spacing:.3px}
.topnav .brand b{color:var(--gold)}
.topnav .sp{flex:1}
.topnav a{color:#dbe6f5;text-decoration:none;font-size:14px;font-weight:600;padding:7px 12px;border-radius:9px;transition:.15s}
.topnav a:hover{background:rgba(255,255,255,.14);color:#fff}
.topnav .who{font-size:12.5px;color:#aec3e2;font-weight:600}

/* ---------- LAYOUT ---------- */
.wrap{max-width:1060px;margin:0 auto;padding:28px 18px 72px}
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:2px 0 22px}
.pagehead h1{font-size:30px;color:var(--blue-d);font-weight:700}
.pagehead .sub{color:var(--slate);font-size:14.5px;margin-top:5px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--sh)}
.card + .card{margin-top:18px}
.grid{display:grid;gap:18px}
.grid.c2{grid-template-columns:1fr 1fr}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
/* ---------- MOBILE ---------- */
@media(max-width:760px){
  .grid.c2,.grid.c3{grid-template-columns:1fr}
  .grid.c4{grid-template-columns:1fr 1fr}          /* 4 statistiche -> 2x2, non impilate */
  .wrap{padding:18px 13px 56px}
  .pagehead{flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:16px}
  .pagehead h1{font-size:24px}
  .card{padding:16px}
  .stat{padding:16px 10px}
  .stat .n{font-size:27px}
  /* barra: si dispone su più righe, niente testo ruolo, tap target comodi */
  .topnav{flex-wrap:wrap;gap:6px 8px;padding:9px 13px}
  .topnav .sp{display:none}
  .topnav .brand{font-size:17px}
  .topnav .stemma{height:34px}
  .topnav a{padding:7px 10px;font-size:13.5px}
  .topnav .who{display:none}
}
@media(max-width:430px){
  th,td{padding:9px 8px;font-size:12.5px}
  th{font-size:10.5px}
  .btn.sm{padding:7px 10px;font-size:12px}
  .topnav a{padding:6px 8px;font-size:13px}
  /* tabelle larghe: scorrono in orizzontale invece di rompere il layout */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
}

/* ---------- FORMS ---------- */
label{display:block;font-size:12px;font-weight:700;color:var(--slate);margin:12px 0 5px;text-transform:uppercase;letter-spacing:.04em}
input,select,textarea{width:100%;padding:11px 13px;border:1px solid #ded4bf;border-radius:var(--r-sm);
  font-size:15px;background:#fffdf8;color:var(--ink);transition:.15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-t);background:#fff}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:#fff;border:0;
  padding:11px 18px;border-radius:var(--r-sm);font-size:15px;font-weight:700;cursor:pointer;text-decoration:none;
  box-shadow:0 2px 8px rgba(30,79,146,.24);transition:transform .12s,box-shadow .12s,background .15s}
.btn:hover{background:var(--blue-d);transform:translateY(-1px);box-shadow:0 6px 16px rgba(30,79,146,.30)}
.btn:active{transform:translateY(0)}
.btn.red{background:var(--red);box-shadow:0 2px 8px rgba(196,57,43,.24)}.btn.red:hover{background:#9f2e22}
.btn.green{background:var(--green);box-shadow:0 2px 8px rgba(60,122,78,.24)}.btn.green:hover{background:#2c5c3b}
.btn.gold{background:var(--gold);color:#3a2a06;box-shadow:0 2px 8px rgba(217,154,43,.28)}.btn.gold:hover{background:#c2871f}
.btn.ghost{background:#fff;color:var(--blue-d);border:1px solid var(--line);box-shadow:var(--sh-sm)}
.btn.ghost:hover{background:var(--blue-t);border-color:#cfe0f2}
.btn.sm{padding:8px 13px;font-size:13px}
/* pulsanti login cittadino SPID/CIE */
.btn-spid,.btn-cie{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:12px 16px;border-radius:10px;font-weight:800;font-size:15px;text-decoration:none;color:#fff;
  margin-top:8px;box-shadow:0 2px 8px rgba(0,0,0,.16)}
.btn-spid{background:#0066cc}.btn-spid:hover{background:#0055aa}
.btn-cie{background:#0a2f5e}.btn-cie:hover{background:#08264c}
.btn-spid .ic,.btn-cie .ic{font-size:17px}

/* ---------- TABLES ---------- */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);border-bottom:2px solid #e4dcc8}
tbody tr:nth-child(even) td{background:#faf5e9}
tbody tr:hover td{background:var(--blue-t)}
tfoot th{border-top:2px solid #e4dcc8;color:var(--blue-d);font-family:var(--font-serif);font-size:13px}

/* ---------- BADGES ---------- */
.badge{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:20px}
.badge.blue{background:var(--blue-t);color:var(--blue-d)}
.badge.green{background:var(--green-t);color:var(--green)}
.badge.red{background:var(--red-t);color:var(--red)}
.badge.gold{background:var(--gold-t);color:#8a5e12}

/* ---------- STAT CARDS ---------- */
.stat{position:relative;background:linear-gradient(180deg,#fff,#fffdf7);border:1px solid var(--line);
  border-radius:var(--r);padding:20px 16px;text-align:center;box-shadow:var(--sh);overflow:hidden}
.stat::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--blue)}
.stat .n{font-family:var(--font-serif);font-size:33px;color:var(--blue);font-weight:700;line-height:1;letter-spacing:-.5px}
.stat .l{font-size:11.5px;color:var(--slate);text-transform:uppercase;letter-spacing:.06em;margin-top:8px;font-weight:600}
.stat.red::before{background:var(--red)} .stat.red .n{color:var(--red)}
.stat.green::before{background:var(--green)} .stat.green .n{color:var(--green)}
.stat.gold::before{background:var(--gold)} .stat.gold .n{color:var(--gold)}

/* ---------- UTIL ---------- */
.muted{color:var(--slate)} .right{text-align:right} .center{text-align:center}
.flash{padding:13px 16px;border-radius:var(--r-sm);margin-bottom:18px;font-weight:600;box-shadow:var(--sh-sm)}
.flash.ok{background:var(--green-t);color:var(--green);border:1px solid #c8e2cd}
.flash.err{background:var(--red-t);color:var(--red);border:1px solid #ecccc6}
.pill-row{display:flex;flex-wrap:wrap;gap:8px}
hr{border:0;border-top:1px solid var(--line);margin:18px 0}
.saldo-pos{color:var(--green);font-weight:700}
.saldo-neg{color:var(--red);font-weight:700}

/* Fascia di dimostrazione: testo scuro su oro, contrasto 6,16:1 */
.fascia-demo{background:#C89B3C;color:#2B2205;font-weight:700;font-size:14px;padding:9px 18px;text-align:center;line-height:1.45}