/* Identità CentroPaghe e struttura comune: risorse locali, tipografia di sistema. */
:root {
   --ink:#202c39;
   --muted:#687484;
   --red:#b72b32;
   --line:#e4e8ee;
   --paper:#f5f7fa;
   --radius:18px;
}

* {
   box-sizing:border-box;
}

body {
   margin:0;
   background:var(--paper);
   color:var(--ink);
   font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

a {
   color:var(--red);
}

button,input,select,textarea {
   font:inherit;
}

a,button,input,textarea,select {
   outline-offset:4px;
}

:focus-visible {
   outline:3px solid #4578c8;
}

.sidebar {
   position:fixed;
   inset:0 auto 0 0;
   width:260px;
   background:white;
   border-right:1px solid var(--line);
   padding:34px 24px;
   display:flex;
   flex-direction:column;
   z-index:2;
}

.brand img {
   width:210px;
   height:auto;
   display:block;
}

.product {
   font-size:26px;
   font-weight:750;
   letter-spacing:-1px;
   margin:42px 10px 34px;
}

.product span {
   display:block;
   font-size:14px;
   letter-spacing:3px;
   font-weight:500;
   color:var(--muted);
}

.nav-label {
   font-size:10px;
   letter-spacing:1.5px;
   color:#8a929c;
   margin:0 10px 14px;
}

nav {
   display:grid;
   gap:8px;
}

nav a {
   display:flex;
   align-items:center;
   gap:14px;
   padding:12px 14px;
   text-decoration:none;
   color:#576270;
   border-radius:10px;
   font-weight:550;
}

nav a:hover,nav a[aria-current=page] {
   background:#fbebed;
   color:var(--red);
}

nav a span {
   font-size:14px;
}

.local-note {
   margin-top:auto;
   padding:18px 10px 0;
   font-size:12px;
   color:var(--muted);
}

.local-note small {
   display:block;
   font-size:10px;
   margin-top:5px;
}

.local-note i {
   display:inline-block;
   width:7px;
   height:7px;
   border-radius:50%;
   background:#359b78;
   margin-right:6px;
}

.workspace {
   margin-left:260px;
}

.topbar {
   height:78px;
   display:flex;
   align-items:center;
   justify-content:space-between;
   padding:0 48px;
   border-bottom:1px solid var(--line);
   background:#ffffffb8;
   font-size:10px;
   letter-spacing:1.5px;
   color:var(--muted);
}

.pill {
   background:#e9f4ef;
   color:#358466;
   border:1px solid #d7eadd;
   border-radius:30px;
   padding:6px 14px;
   font-size:11px;
   letter-spacing:0;
}

main {
   max-width:1450px;
   margin:auto;
   padding:40px 48px 60px;
   min-height:calc(100vh - 146px);
}

h1 {
   font-size:38px;
   line-height:1.18;
   letter-spacing:-1.4px;
   margin:14px 0 20px;
   font-weight:720;
}

h2 {
   font-size:22px;
   letter-spacing:-.5px;
   margin:24px 0 12px;
}

h3 {
   font-size:18px;
   line-height:1.4;
   margin:12px 0;
}

p {
   color:var(--muted);
   overflow-wrap:anywhere;
}

.lead {
   font-size:16px;
   max-width:750px;
   margin-bottom:28px;
}

.eyebrow {
   font-size:10px;
   font-weight:700;
   letter-spacing:2px;
   color:var(--red);
}

.hero {
   display:flex;
   justify-content:space-between;
   align-items:center;
   gap:30px;
   padding:12px 10px 40px;
}

.hero h1 {
   font-size:clamp(38px,4vw,58px);
   letter-spacing:-2px;
}

.hero p {
   font-size:16px;
   line-height:1.8;
}

.hero-art {
   width:260px;
   height:240px;
   position:relative;
   margin-right:30px;
   flex-shrink:0;
   background:radial-gradient(ellipse,#e7dfe7,transparent 68%);
}

.file-tile {
   position:absolute;
   top:34px;
   left:22px;
   width:154px;
   height:185px;
   background:white;
   border:1px solid #e8dce0;
   border-radius:20px;
   box-shadow:0 20px 45px #24374615;
   padding:28px 24px;
   font-size:33px;
   font-weight:750;
   transform:rotate(-8deg);
   z-index:1;
   color:var(--red);
}

.file-tile span {
   display:block;
   font-size:8px;
   letter-spacing:1px;
   color:#88919b;
   margin-top:6px;
}

.file-tile b {
   display:block;
   font-size:14px;
   color:#e6c1c4;
   margin-top:30px;
}

.file-tile.rear {
   top:12px;
   left:97px;
   transform:rotate(12deg);
   background:#f0f2f7;
   color:#8f99a8;
   z-index:0;
}

.section-heading {
   display:flex;
   align-items:center;
   justify-content:space-between;
   margin:0 0 20px;
}

.section-heading h2 {
   margin:0;
}

.section-heading>span {
   font-size:12px;
   color:var(--muted);
}

.entry-grid {
   display:grid;
   grid-template-columns:repeat(2,minmax(0,1fr));
   gap:20px;
}

.entry-card {
   position:relative;
   padding:28px 30px;
   background:white;
   border:1px solid var(--line);
   border-radius:var(--radius);
   text-decoration:none;
   color:var(--ink);
   transition:transform .18s,box-shadow .18s;
}

.entry-card:hover {
   transform:translateY(-3px);
   box-shadow:0 14px 28px #2334470b;
   border-color:#cbd2dc;
}

.icon {
   display:inline-grid;
   place-items:center;
   width:46px;
   height:46px;
   border-radius:14px;
   font-size:24px;
   font-weight:600;
   background:#edf1f6;
   color:#667488;
}

.icon.blue {
   background:#eaf1ff;
   color:#4776b9;
}

.icon.rose {
   background:#fcecee;
   color:#be4854;
}

.icon.green {
   background:#eaf5f0;
   color:#378c70;
}

.icon.violet {
   background:#f0edfb;
   color:#8366bc;
}

.tag {
   font-size:9px;
   letter-spacing:1.2px;
   color:#89929f;
   margin-left:14px;
}

.entry-card h3 {
   font-size:22px;
   margin:20px 0 10px;
}

.entry-card p {
   font-size:14px;
   line-height:1.8;
   max-width:450px;
   min-height:50px;
}

.entry-card strong {
   display:flex;
   justify-content:space-between;
   align-items:center;
   font-size:13px;
   color:var(--red);
   padding-top:16px;
   margin-top:22px;
   border-top:1px solid #f0f2f6;
}

.entry-card strong span {
   font-size:22px;
}

.info-strip {
   display:flex;
   gap:24px;
   align-items:center;
   padding:24px 28px;
   border:1px solid var(--line);
   border-radius:var(--radius);
   background:#eef2f6;
   margin:28px 0;
}

.info-strip>div {
   flex:1;
}

.info-strip h3 {
   font-size:15px;
   margin:0 0 4px;
}

.info-strip p {
   font-size:13px;
   margin:0;
}

.icon.small {
   width:36px;
   height:36px;
   font-size:18px;
   flex-shrink:0;
   background:white;
}

.panel {
   background:white;
   padding:28px;
   border:1px solid var(--line);
   border-radius:var(--radius);
   margin:24px 0;
}

.form-grid {
   display:grid;
   grid-template-columns:1fr 1fr;
   gap:0 24px;
}

label {
   display:block;
   font-size:13px;
   font-weight:550;
   margin:16px 0;
   color:#515c6a;
}

input:not([type=checkbox]),select,textarea {
   display:block;
   width:100%;
   padding:11px 13px;
   margin-top:7px;
   background:white;
   border:1px solid #d7dde5;
   border-radius:9px;
   color:var(--ink);
}

input[type=checkbox] {
   accent-color:var(--red);
   margin-right:7px;
}

textarea {
   min-width:200px;
}

button,.button-link {
   display:inline-block;
   border:1px solid transparent;
   background:var(--red);
   color:white;
   border-radius:9px;
   padding:10px 18px;
   font-size:13px;
   font-weight:600;
   cursor:pointer;
   text-decoration:none;
   margin:5px 6px 5px 0;
}

button:hover,.button-link:hover {
   background:#9b2229;
}

button.secondary {
   background:white;
   border-color:var(--line);
   color:var(--ink);
}

button:disabled {
   background:#e0e4e9;
   color:#88929c;
   cursor:not-allowed;
}

.actions {
   padding-top:14px;
}

table {
   display:block;
   max-width:100%;
   overflow:auto;
   border-spacing:0;
   border:1px solid var(--line);
   border-radius:12px;
   background:white;
   margin:20px 0;
}

td,th {
   border-bottom:1px solid var(--line);
   padding:14px 18px;
   vertical-align:top;
   text-align:left;
   font-size:13px;
}

th {
   background:#edf1f6;
   font-weight:650;
   white-space:nowrap;
}

td {
   min-width:130px;
}

td pre {
   max-width:420px;
}

tr:hover td {
   background:#fafbfc;
}

pre {
   white-space:pre-wrap;
   margin:0;
   overflow-wrap:anywhere;
}

code {
   overflow-wrap:anywhere;
   font-size:12px;
}

details {
   border:1px solid var(--line);
   background:white;
   border-radius:12px;
   padding:18px;
   margin:16px 0;
}

summary {
   cursor:pointer;
   font-weight:650;
}

.warning {
   color:#9e651e;
   background:#fff7e7;
   padding:10px;
   border-radius:8px;
}

ul {
   padding-left:24px;
}

li {
   margin-bottom:10px;
}

[role=status] {
   position:sticky;
   top:0;
   background:#fff3dc;
   padding:15px 30px;
   margin:0 0 0 260px;
   z-index:4;
}

footer {
   padding:22px 48px;
   border-top:1px solid var(--line);
   font-size:11px;
   color:#85909e;
   display:flex;
   justify-content:space-between;
}

/* La navigazione resta raggiungibile e i moduli passano a una colonna su schermi stretti. */
@media(min-width:1650px) {
   .entry-grid {
      grid-template-columns:repeat(4,minmax(0,1fr));
   }
   .entry-card {
      padding:25px;
   }
   .tag {
      display:block;
      margin:16px 0 0;
   }
   .entry-card p {
      min-height:100px;
   }
}

@media(max-width:1000px) {
   .sidebar {
      width:210px;
      padding:26px 16px;
   }
   .brand img {
      width:176px;
   }
   .workspace {
      margin-left:210px;
   }
   main {
      padding:30px;
   }
   .topbar {
      padding:0 30px;
   }
   .hero-art {
      display:none;
   }
   .section-heading>span {
      display:none;
   }
   [role=status] {
      margin-left:210px;
   }
}

@media(max-width:650px) {
   .sidebar {
      position:static;
      width:auto;
      padding:20px;
   }
   .brand img {
      width:200px;
   }
   .product,.nav-label,.local-note {
      display:none;
   }
   nav {
      display:flex;
      overflow:auto;
      margin-top:18px;
      gap:2px;
   }
   nav a {
      padding:8px;
      white-space:nowrap;
   }
   nav a span {
      font-size:11px;
   }
   .workspace {
      margin-left:0;
   }
   .topbar {
      height:50px;
      padding:0 20px;
   }
   main {
      padding:24px 20px;
   }
   .hero {
      padding:0 0 25px;
   }
   .hero h1 {
      font-size:40px;
   }
   .hero p {
      font-size:14px;
   }
   .entry-grid,.form-grid {
      grid-template-columns:1fr;
   }
   .entry-card p {
      min-height:0;
   }
   .info-strip {
      align-items:flex-start;
      flex-direction:column;
   }
   .panel {
      padding:20px;
   }
   .tag {
      font-size:8px;
   }
   .section-heading h2 {
      font-size:20px;
   }
   [role=status] {
      margin-left:0;
   }
   footer {
      padding:20px;
      gap:20px;
   }
   footer span {
      display:none;
   }
}

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


/* Il confronto CU mantiene importi e regole leggibili anche su finestre strette. */
.cu-hero { max-width:900px; padding-bottom:20px; }
.cu-card { background:white; border:1px solid var(--line); border-radius:var(--radius); padding:28px; margin-bottom:24px; box-shadow:0 6px 24px #202c3905; }
.cu-card h2:first-child { margin-top:0; }
.cu-card summary { cursor:pointer; font-weight:650; font-size:18px; }
.cu-card table { width:100%; border-collapse:collapse; }
.cu-card th, .cu-card td { padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); }
.cu-card select { width:100%; min-height:46px; }
.cu-summary { display:flex; gap:32px; flex-wrap:wrap; padding:18px 0; }
.cu-summary small, .cu-summary strong { display:block; }
.cu-summary strong { font-size:26px; margin-top:8px; }
.cu-table { overflow:auto; max-height:650px; }
.cu-table th { position:sticky; top:0; background:#edf3f8; }
.cu-table td { vertical-align:top; }
.cu-table td:nth-child(2), .cu-table td:nth-child(3), .cu-table td:nth-child(4) { white-space:nowrap; font-variant-numeric:tabular-nums; }

/* Modulo CU: proporzioni A4 e coordinate originali del modello PagheWeb. */
.cu-document-nav { display:flex; flex-wrap:wrap; gap:12px; align-items:end; }
.cu-document-nav input { max-width:100px; }
.cu-page-buttons { display:flex; flex-wrap:wrap; gap:6px; width:100%; }
.cu-page-buttons button { font-size:12px; padding:8px 12px; }
.cu-sheet-scroll { overflow:auto; background:#dfe3eb; padding:24px; border-radius:14px; }
.cu-sheet { position:relative; width:100%; min-width:794px; max-width:1120px; margin:auto; background:white; box-shadow:0 4px 18px #18243822; container-type:inline-size; }
.cu-sheet > img { display:block; width:100%; }
.cu-sheet .cu-box { position:absolute; display:flex; align-items:center; justify-content:flex-end; color:#071d3b; font:1.18cqw Arial,sans-serif; line-height:1; white-space:pre; overflow:hidden; background:#eaf3ff66; }
.cu-sheet .cu-box:hover { background:#cce4ff; outline:1px solid #6a96bf; }
.cu-sheet input.cu-editable { margin:0; padding:0 2px; min-height:0; border:1px solid #789dc0; border-radius:0; box-sizing:border-box; text-align:right; background:#eaf3ff; }
.cu-sheet input.cu-editable:focus { outline:2px solid #a73538; background:white; }
.cu-page-caption { font-weight:600; }