/* ============================================================================
   ULA ENGINE — ula-theme.css · "Il registro" (versione definitiva)
   Ordine di caricamento: scan360 → sb-override → ula-ui → ula-fonts → QUESTO.
   ATTENZIONE: in index.html, DOPO questo foglio, c'è un blocco <style> inline che
   definisce .lbl .inp .nota .card-b .card-t .sotto-t .chip .link .tab-conf
   .tab-dich #modal #modal .box .dash td. A parità di specificità vince quel
   blocco: per questo qui si usano selettori qualificati (div.card-b, a.chip,
   input.inp, #modal[role=dialog] …) e mai la sola classe.
   ula-ui.css usa molti !important: dove serve vincerli, il !important è
   segnalato con il motivo accanto.
   Font: 'DM Sans' (testo corrente) e 'Space Grotesk' (titoli, occhielli,
   numeri, pulsanti), entrambi self-hosted in ula-fonts.css.
   ========================================================================== */

/* ---------- 0. Token del tema ------------------------------------------- */
:root{
  --ula-head:'Space Grotesk','DM Sans',system-ui,sans-serif;
  --ula-body:'DM Sans',system-ui,sans-serif;

  --ula-page:#EEF2F6;               /* sfondo pagina: carta fredda */
  --ula-ink:#0A2F4C;                /* inchiostro: titoli, nomi, numeri */
  --ula-text:#243044;               /* testo corrente */
  --ula-muted:#5C6B80;              /* testo secondario */
  --ula-faint:#8A97AA;              /* terziario: "—", matite a riposo */
  --ula-line:#D9E0E8;               /* bordi e filetti */
  --ula-line-soft:#E9EEF3;          /* filetti interni alle tabelle */
  --ula-line-strong:#B9C6D3;        /* filetto forte sotto le intestazioni */
  --ula-surface:#FFFFFF;
  --ula-surface-2:#F6F8FA;          /* bande di intestazione */

  --ula-blue:#236FA0;               /* brand Sviluppo Basilicata */
  --ula-blue-deep:#1A5A84;
  --ula-blue-ink:#124568;
  --ula-blue-wash:#EAF3F9;
  --ula-blue-wash-2:#D6E8F3;

  --ula-amber-50:#FFF6DF;
  --ula-amber-200:#F1D38A;
  --ula-amber-500:#D79A06;
  --ula-amber-700:#7E5300;

  --ula-green-50:#E9F7EF;
  --ula-green-200:#B8E6CC;
  --ula-green-600:#1A8C52;
  --ula-green-700:#146B3E;

  --ula-red-50:#FDEEEE;
  --ula-red-200:#F4C2C2;
  --ula-red-600:#C52B2B;
  --ula-red-700:#A01F1F;

  --ula-r:10px;                     /* raggio schede */
  --ula-r-s:7px;                    /* raggio controlli */

  --ula-shadow-card:0 1px 2px rgba(10,47,76,.05);
  --ula-shadow-pop:0 24px 60px rgba(10,47,76,.28),0 6px 16px rgba(10,47,76,.14);
  --ula-ring:0 0 0 3px rgba(35,111,160,.22);

  /* Token semantici riallineati: li leggono gli stili inline di box(kind),
     di notice() e i badge di scan360, quindi cambiano anche senza ritocchi. */
  --warning-50:var(--ula-amber-50);
  --warning-100:var(--ula-amber-200);
  --warning-700:var(--ula-amber-700);
  --success-50:var(--ula-green-50);
  --success-100:var(--ula-green-200);
  --danger-50:var(--ula-red-50);
  --danger-100:var(--ula-red-200);
  --shadow-sm:var(--ula-shadow-card);
  --shadow-md:0 2px 6px rgba(10,47,76,.08);
  --shadow-lg:var(--ula-shadow-pop);
}

/* ---------- 1. Base ------------------------------------------------------ */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{font-family:var(--ula-body);font-size:14px;line-height:1.5;color:var(--ula-text);background:var(--ula-page)}
.content{background:var(--ula-page)}
strong,b{font-weight:600}
::selection{background:var(--ula-blue-wash-2);color:var(--ula-ink)}
/* anello di focus con outline, così non entra in conflitto con le ombre dei pulsanti */
:focus-visible{outline:2px solid rgba(35,111,160,.6);outline-offset:1px}
/* .link sta su button, a, span, summary e div: la qualificazione serve a vincere
   il .link del blocco <style> inline */
.link:is(button,a,span,summary,div){
  font-family:inherit;font-size:inherit;font-weight:600;color:var(--ula-blue);
  text-decoration:none;text-underline-offset:3px;cursor:pointer;
  background:none;border:0;padding:0;
}
.link:is(button,a,span,summary,div):hover{color:var(--ula-blue-deep);text-decoration:underline}
.muted{color:var(--ula-muted)}
.vuoto,.attesa{color:var(--ula-muted);font-size:14px}

/* ---------- 2. Sidebar --------------------------------------------------- */
.sidebar{
  background:linear-gradient(180deg,#0B3350 0%,#0A2F4C 55%,#082640 100%);
  color:rgba(255,255,255,.78);
  border-right:1px solid rgba(255,255,255,.06);
}
.sidebar__module-tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--ula-head);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:#9CD0F2!important;            /* ula-ui fissa il colore con !important */
  background:rgba(255,255,255,.06);
  border:1px solid rgba(156,208,242,.35);
  border-radius:6px;padding:4px 10px;
}
.sidebar__module-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:#58A6DF}
.sidebar__section{font-family:var(--ula-head);font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.sidebar .sidebar__item{
  display:flex;align-items:center;gap:12px;
  margin:2px 10px;padding:10px 14px;
  border-radius:8px;border:0;
  font-size:14px;font-weight:500;color:rgba(255,255,255,.78);
  transition:background .15s,color .15s;
}
.sidebar .sidebar__item:hover{background:rgba(255,255,255,.07);color:#fff}
.sidebar .sidebar__item.active{background:rgba(255,255,255,.11);color:#fff;font-weight:600;box-shadow:inset 3px 0 0 #58A6DF}
.sidebar__item-icon{opacity:.85;width:18px;height:18px}
.sidebar .sidebar__item.active .sidebar__item-icon{opacity:1;color:#9CD0F2}
.sidebar__company-name{font-family:var(--ula-head)}

/* ---------- 3. Topbar ---------------------------------------------------- */
.topbar{background:var(--ula-surface);border-bottom:1px solid var(--ula-line);box-shadow:none}
.topbar__breadcrumb{font-size:13px;color:var(--ula-muted);font-weight:500}
.topbar__breadcrumb-sep{color:var(--ula-faint)}
.topbar__breadcrumb-current{color:var(--ula-ink);font-weight:600}
/* "Cambia password" ed "Esci": pulsanti di contorno neutri, senza blu */
.topbar .topbar__actions .btn{border-color:var(--ula-line);color:var(--ula-text);background:#fff;font-weight:500}
.topbar .topbar__actions .btn:hover{background:var(--ula-surface-2);border-color:#C5CFDA}

/* ---------- 4. Titolo pagina (solo l'elenco: #az-title e #imp-title usano
               la stessa classe ma sono nomi di azienda, v. sezione 10) ---- */
#v-dash .content__title{
  position:relative;
  font-family:var(--ula-head);font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.15;
  color:var(--ula-ink);
  padding-top:14px;margin:0 0 6px;
}
#v-dash .content__title::before{            /* la barretta */
  content:"";position:absolute;left:0;top:0;
  width:32px;height:4px;border-radius:2px;background:var(--ula-blue);
}
.content__sub{font-size:14px;color:var(--ula-muted);margin:0 0 22px;max-width:70ch}
#v-dash .content__header{margin-bottom:22px}

/* ---------- 5. Schede ---------------------------------------------------- */
div.card-b{
  background:var(--ula-surface);
  border:1px solid var(--ula-line);
  border-radius:var(--ula-r);
  box-shadow:var(--ula-shadow-card);
  padding:22px 26px;
  margin-bottom:18px;
}
div.card-t{
  font-family:var(--ula-head);font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.25;
  color:var(--ula-ink);margin:0 0 4px;
}
/* .sotto-t è un CONTENITORE di sezione (avvolge .lbl e i campi): resta un blocco */
div.sotto-t{border-top:1px solid var(--ula-line);margin-top:22px;padding-top:18px}
/* il titolo di sezione è il .lbl figlio diretto di .sotto-t: diventa un occhiello
   (ula-ui blocca .lbl con !important, quindi qui serve !important) */
div.sotto-t > .lbl{
  font-family:var(--ula-head);
  font-size:11.5px!important;font-weight:600!important;letter-spacing:.1em!important;
  text-transform:uppercase!important;color:var(--ula-blue-ink)!important;
  margin-bottom:12px!important;
}
.nota:is(div,span){font-size:13px;color:var(--ula-muted);line-height:1.5}
/* titolo di scheda in stile scan360 (.section-label: "Dati della pratica",
   "Mesi del periodo", "File caricati"): misura e colore sono bloccati da ula-ui,
   qui cambia solo la famiglia */
.section-label{font-family:var(--ula-head);letter-spacing:-.01em!important}
details.aiuto > summary{color:var(--ula-blue);font-weight:600}
.campo-avv{color:var(--ula-amber-700)}

/* ---------- 6. Campi ----------------------------------------------------- */
/* qualificati per vincere il .inp del blocco <style> inline */
input.inp,select.inp,textarea.inp{
  font-family:var(--ula-body);font-size:14px;color:var(--ula-ink);
  background:#fff;
  border:1px solid #C5CFDA;border-radius:var(--ula-r-s);
  padding:0 12px;
  box-shadow:inset 0 1px 1px rgba(10,47,76,.04);
  transition:border-color .12s,box-shadow .12s;
}
textarea.inp{height:auto;padding:10px 12px}
input.inp:hover,select.inp:hover,textarea.inp:hover{border-color:#A9B7C6}
input.inp:focus,select.inp:focus,textarea.inp:focus{border-color:var(--ula-blue);box-shadow:var(--ula-ring);outline:none}
input.inp:disabled,select.inp:disabled,input.inp[readonly]{background:var(--ula-surface-2);color:var(--ula-muted);border-color:var(--ula-line)}
input.inp::placeholder{color:var(--ula-faint)}
input.inp.input-err{box-shadow:0 0 0 3px rgba(197,43,43,.15)}
input[type=checkbox],input[type=radio]{accent-color:var(--ula-blue)}
#az-anno{border:1px solid #C5CFDA;border-radius:6px;font-family:var(--ula-head);font-weight:600;color:var(--ula-ink)}
.az-per select{border-color:#C5CFDA}

/* ---------- 7. Pulsanti -------------------------------------------------- */
.btn{
  font-family:var(--ula-head);font-size:13.5px;font-weight:600;letter-spacing:.005em;
  height:38px;padding:0 16px;
  border-radius:var(--ula-r-s);
  border:1px solid var(--ula-line);
  background:#fff;color:var(--ula-ink);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  line-height:1;cursor:pointer;white-space:nowrap;
  transition:background .12s,border-color .12s,box-shadow .12s,transform .06s;
}
.btn:hover{background:var(--ula-surface-2);border-color:#C5CFDA}
.btn:active{transform:translateY(1px)}
.btn svg{width:16px;height:16px}

.btn.btn--primary{
  background:var(--ula-blue);border-color:var(--ula-blue-deep);color:#fff;
  box-shadow:0 1px 2px rgba(10,47,76,.25),inset 0 1px 0 rgba(255,255,255,.12);
}
.btn.btn--primary:hover{background:var(--ula-blue-deep);border-color:var(--ula-blue-ink)}
/* il primario disabilitato resta riconoscibile come primario, solo spento.
   ula-ui lo rende grigio con !important: qui serve !important per vincere. */
.btn.btn--primary:disabled,.btn.btn--primary[disabled]{
  background:var(--ula-blue)!important;color:#fff!important;border-color:transparent!important;
  opacity:.45!important;box-shadow:none!important;transform:none;
}

.btn.btn--ghost{background:#fff;border-color:#B9D3E6;color:var(--ula-blue-deep)}
.btn.btn--ghost:hover{background:var(--ula-blue-wash);border-color:var(--ula-blue)}

/* --danger non esiste in scan360: lo definisce il tema. Nella modale di conferma
   il JS imposta il rosso pieno inline (voluto). */
.btn.btn--danger{background:#fff;border-color:var(--ula-red-200);color:var(--ula-red-700)}
.btn.btn--danger:hover{background:var(--ula-red-50);border-color:var(--ula-red-600)}

.btn.btn--sm{height:30px;padding:0 11px;font-size:12.5px;border-radius:6px}
.btn.btn--lg{height:42px;padding:0 20px;font-size:14px}

/* ---------- 8. Pillole, badge, puntini ----------------------------------- */
/* .chip è sempre un <a>: qualificato per vincere il .chip del blocco <style> inline */
a.chip{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--ula-body);font-size:12px;font-weight:600;line-height:1;
  padding:6px 11px 6px 9px;border-radius:999px;
  background:var(--ula-amber-50);color:var(--ula-amber-700);
  border:1px solid var(--ula-amber-200);
  white-space:nowrap;text-decoration:none;
}
a.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ula-amber-500);flex:none}
a.chip:hover{text-decoration:underline}
a.chip.chip--ok{background:var(--ula-green-50);color:var(--ula-green-700);border-color:var(--ula-green-200)}
a.chip.chip--ok::before{background:var(--ula-green-600)}

/* badge = tipo o categoria: rettangolino in maiuscoletto, non pillola */
.badge{
  display:inline-flex;align-items:center;
  font-family:var(--ula-head);font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1;
  padding:4px 7px;border-radius:5px;
  background:var(--ula-surface-2);color:var(--ula-muted);border:1px solid var(--ula-line);
  white-space:nowrap;
}
.badge.badge--ok{background:var(--ula-green-50);color:var(--ula-green-700);border-color:var(--ula-green-200)}
.badge.badge--warn{background:var(--ula-amber-50);color:var(--ula-amber-700);border-color:var(--ula-amber-200)}
.badge.badge--crit{background:var(--ula-red-50);color:var(--ula-red-700);border-color:var(--ula-red-200)}
.badge.badge--blue{background:var(--ula-blue-wash);color:var(--ula-blue-ink);border-color:var(--ula-blue-wash-2)}
.badge.badge--neutral{background:var(--ula-surface-2);color:var(--ula-muted);border-color:var(--ula-line)}

/* avanzamento: cinque segmenti (uno per passo), stessi colori dello stepper */
.puntini{display:flex;gap:3px;margin-top:7px}
.puntini .pt{width:22px;height:4px;border-radius:2px;background:var(--ula-line)}
.puntini .pt.ok{background:var(--ula-green-600)}
.puntini .pt.w{background:var(--ula-amber-500)}
.warn-t{color:var(--ula-amber-700)}
.nrif{font-family:var(--ula-head)}

/* ---------- 9. Tabelle --------------------------------------------------- */
.data-table{
  width:100%;border-collapse:separate;border-spacing:0;
  font-size:14px;color:var(--ula-text);
  font-variant-numeric:tabular-nums;
}
.data-table-wrap{border-color:var(--ula-line);border-radius:8px}
/* intestazioni: ula-ui blocca con !important trasformazione, spaziatura, misura e peso */
.data-table thead th{
  font-family:var(--ula-head);
  font-size:11px!important;font-weight:600!important;letter-spacing:.08em!important;text-transform:uppercase!important;
  color:var(--ula-muted);
  background:var(--ula-surface-2);
  padding:11px 16px;
  border-bottom:1.5px solid var(--ula-line-strong);
  text-align:left;white-space:nowrap;
}
.data-table tbody td{padding:12px 16px;border-bottom:1px solid var(--ula-line-soft);vertical-align:middle;color:var(--ula-text)}
.data-table tbody tr:last-child td{border-bottom:0}
/* nessun hover generico: solo le righe che si aprono (.dash) e il tabellone (.mat) */
.data-table tbody tr:hover td{background:transparent}
.data-table .az-num{font-family:var(--ula-head);font-weight:500;color:var(--ula-ink);white-space:nowrap}
.data-table td strong{color:var(--ula-ink)}

/* elenco cooperative (.dash): una scheda a sé. L'elenco elaborazioni (.dash.elab)
   sta già dentro una .st-card e non riceve una seconda cornice. */
#az-list > .data-table-wrap{
  background:var(--ula-surface);
  border:1px solid var(--ula-line);border-radius:var(--ula-r);
  box-shadow:var(--ula-shadow-card);
}
/* il padding delle celle .dash è fissato con !important sia da ula-ui sia dal
   blocco <style> inline (9px 8px): serve !important con specificità maggiore */
.data-table.dash thead th{padding:10px 16px!important}
.data-table.dash tbody td{padding:13px 16px!important}
.data-table.dash tbody tr:hover td{background:var(--ula-blue-wash)}
.data-table.dash tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--ula-blue)}
.data-table.dash .az-nome{font-family:var(--ula-body);font-size:15px;font-weight:600;color:var(--ula-ink);line-height:1.3}
.data-table.dash tr:hover .az-nome{color:var(--ula-blue)}
.data-table.dash .az-meta{font-size:12.5px;color:var(--ula-muted);margin-top:3px;font-variant-numeric:tabular-nums}
/* larghezze dichiarate: le righe non cambiano altezza a seconda del testo */
.data-table.dash th:nth-child(1){width:33%}
.data-table.dash th:nth-child(2){width:23%}
.data-table.dash th:nth-child(3){width:21%}
.data-table.dash th:nth-child(4){width:17%}
.data-table.dash .az-nome{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}   /* nomi lunghi: due righe e puntini (title = nome intero) */
.data-table.dash td.ult .nota{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.data-table.dash td:nth-child(2) .nota{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}
.data-table.dash td.ult{font-size:13px;color:var(--ula-text)}
.data-table.dash td.ult .nota{font-size:12px}
.data-table.dash td.apri a{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:6px;border:1px solid var(--ula-line);background:#fff;color:var(--ula-faint);transition:background .12s,color .12s,border-color .12s}
.data-table.dash tr:hover td.apri a{background:var(--ula-blue-wash);color:var(--ula-blue);border-color:var(--ula-blue)}
.data-table.dash td.apri svg{width:15px;height:15px}

/* confronto con l'Allegato 3 (.tab-conf): padding e a-capo sono fissati inline con !important */
.data-table.tab-conf thead th{
  font-size:11px!important;text-transform:none!important;letter-spacing:0!important;  /* ula-ui e <style> inline litigano con !important: qui si chiude */
  line-height:1.3;
}
.data-table.tab-conf td:not(:first-child){font-family:var(--ula-head);font-weight:500;color:var(--ula-ink)}
.data-table.tab-conf td:first-child{font-weight:500}
.data-table.tab-conf .sep{border-left-color:var(--ula-line)}
.data-table.tab-conf tbody tr:last-child td{background:var(--ula-surface-2);border-top-color:var(--ula-line-strong);font-weight:700}   /* il 700 della riga Totale è sul <tr>: le celle lo riprendono */
.data-table.tab-conf td.diff-on{background:var(--ula-red-50);color:var(--ula-red-700)}

/* ---------- 9b. Matrice ULA (.mat): un tabellone, markup di html-struct.py ---
   Colonne: Tipo · Nome(.nm) · D G Sv Do (.th-cat/.td-cat) · 12 mesi (.th-mese/.td-mese) · Totale(.td-tot) · ULA(.td-good) · Azioni(.td-az)
   Righe: tr.r-socio (spunte disabilitate) · tr.r-dip[data-dipcat] (spunte attive, matita) · .r-off (dip. socio tutto l'anno)
   Larghezze: 60 + nome (il resto, min 170) + 4×34 + 12×34 + 46 + 46 + 40 = 906px: sta nei ~916px disponibili a 1280. */
.mat-wrap{max-height:calc(100vh - 240px);overflow:auto;border:1px solid var(--ula-line);border-radius:8px}   /* la cornice scorre: così l'intestazione resta davvero fissa */
.data-table.mat{font-size:12px;line-height:1.3;overflow:visible;table-layout:fixed;width:100%;min-width:906px}   /* overflow:visible: scan360 mette overflow:hidden e romperebbe lo sticky */
.data-table.mat th,.data-table.mat td{padding:5px 3px!important;height:30px;box-sizing:border-box}   /* ula-ui fissa 6px 5px con !important; 30px = altezza di riga costante */
.data-table.mat thead th{
  position:sticky;top:0;z-index:2;
  font-size:10px!important;letter-spacing:0!important;text-transform:none!important;   /* "Gen 25" in tondo: in maiuscolo i 12 mesi non stanno */
  text-align:center;height:34px;vertical-align:middle;
}
.data-table.mat thead th:first-child,.data-table.mat thead th.nm{text-align:left}
.data-table.mat th:first-child,.data-table.mat td:first-child{width:60px;padding-left:6px!important}
.data-table.mat td:first-child .badge{white-space:normal;line-height:1.2;text-align:center}
.data-table.mat th.nm,.data-table.mat td.nm{
  min-width:170px;text-align:left;padding-left:8px!important;
  position:sticky;left:0;z-index:1;background:inherit;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;   /* nome e note su una riga: il testo intero sta nel title */
}
.data-table.mat thead th.nm{z-index:3;background:var(--ula-surface-2)}   /* la colonna fissa non deve lasciar trasparire le righe sotto l'intestazione */
.data-table.mat tbody td{border-bottom:1px solid var(--ula-line-soft);vertical-align:middle;color:var(--ula-text)}
.data-table.mat tbody td.nm{background:#fff;box-shadow:inset -1px 0 0 var(--ula-line)}   /* filetto che separa la colonna fissa durante lo scorrimento */
.data-table.mat tr.r-socio td{background:var(--ula-blue-wash)}
.data-table.mat tbody tr:hover td{background:var(--ula-blue-wash-2)}
.nm-head{display:flex;align-items:center;gap:5px;min-width:0}
.nm-nome{font-weight:600;color:var(--ula-ink);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
.data-table.mat td.nm .badge{flex:none;margin:0}
.data-table.mat .nm-note,.data-table.mat .nm-note2{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11px;line-height:1.3;margin-top:1px;max-width:none}
.data-table.mat .nm-note{color:var(--ula-amber-700);font-weight:600}
.data-table.mat .nm-note2{color:var(--ula-muted);font-weight:400}
/* mesi, Totale, ULA: numeri tabellari in Space Grotesk, centrati; "—" e 0,00* sbiaditi */
.data-table.mat th.th-mese,.data-table.mat td.td-mese{width:34px;text-align:center}
.data-table.mat td.td-mese,.data-table.mat td.td-tot,.data-table.mat td.td-good{font-family:var(--ula-head);font-weight:500;color:var(--ula-ink);white-space:nowrap;text-align:center}
.data-table.mat th.th-mese{white-space:normal;line-height:1.15;padding-top:3px!important;padding-bottom:3px!important}   /* "Gen" sopra "25": in 34px non ci sta su una riga */
.data-table.mat th.th-mese--ok{color:var(--ula-green-700)}
.data-table.mat th.th-mese--no{color:var(--ula-red-700)}
.data-table.mat td.td-off{color:var(--ula-faint)}
.data-table.mat th.th-tot{width:46px;background:var(--ula-blue-wash-2);color:var(--ula-blue-ink)}
.data-table.mat th.th-az{width:40px}
.data-table.mat td.td-tot{font-weight:700}
.data-table.mat td.td-good{font-weight:700;background:var(--ula-blue-wash)}
.data-table.mat tbody tr:hover td.td-good,.data-table.mat tr.r-socio td.td-good{background:#DFEBF4}
.data-table.mat tr.r-off td{opacity:.55}
.data-table.mat tr.r-off td.td-az{opacity:1}
.data-table.mat .badge{font-size:9px;letter-spacing:.03em;padding:3px 5px}
.data-table.mat sup{font-size:10px;color:var(--ula-faint)}
.data-table.mat td.td-az .btn-ic{width:24px;height:24px}

/* ---------- 10. Scheda azienda + stepper -------------------------------- */
.az-head{
  background:var(--ula-surface);
  border:1px solid var(--ula-line);border-radius:var(--ula-r);
  box-shadow:var(--ula-shadow-card);
  padding:20px 26px 0;
  margin-bottom:18px;
  overflow:hidden;
}
.az-head.az-head--imp{padding-bottom:18px}
/* "Scheda dell'azienda" / "Tutte le aziende": occhiello con freccia (è un .btn.btn--ghost.btn--sm) */
.az-head .btn.az-back{
  height:auto;padding:4px 8px;margin:0 0 10px -8px;
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  gap:6px;
}
.az-head .btn.az-back svg{width:14px;height:14px}
/* nome dell'azienda: ha la classe .content__title; la misura è bloccata da ula-ui
   (#az-title 24px !important), quindi si riprende via id */
.az-head .content__title{
  font-family:var(--ula-head);font-weight:700;letter-spacing:-.02em;line-height:1.15;
  color:var(--ula-ink);padding:0;
}
#az-title,#imp-title{font-size:26px!important}
.az-head .az-meta{font-size:13px;color:var(--ula-muted);font-variant-numeric:tabular-nums}
.az-head .az-meta strong{color:var(--ula-text);font-weight:600}
.az-meta .dot{color:var(--ula-faint)}
.az-per{margin:14px 0 18px;font-size:14px;color:var(--ula-muted);gap:8px 10px}
.az-per strong{font-family:var(--ula-head);font-weight:600;color:var(--ula-ink);font-size:15px}
.az-per__k{
  font-family:var(--ula-head);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ula-blue-ink);background:var(--ula-blue-wash);border:1px solid var(--ula-blue-wash-2);
  border-radius:5px;padding:4px 8px;line-height:1;
}

/* lo stepper (ol.passi dentro #az-manca): striscia di linguette a filo della scheda.
   La griglia a 6 colonne viene da ula-ui e tiene tutti i passi a 1280px senza scorrere. */
.az-head .passi{
  margin:16px -26px 0;
  background:var(--ula-surface-2);
  border-top:1px solid var(--ula-line);
  counter-reset:p;
}
.passi .passo{counter-increment:p}
.passi .passo > button{
  padding:13px 14px;gap:11px;
  border-top:3px solid transparent;border-bottom:0;
  transition:background .12s;
}
.passi .passo + .passo > button{border-left:1px solid var(--ula-line)}
.passi .passo > button:hover{background:#fff}
.passi .passo:first-child > button{border-bottom-left-radius:var(--ula-r)}
.passi .passo:last-child > button{border-bottom-right-radius:var(--ula-r)}
.passi .passo.attivo > button{background:#fff;border-top-color:var(--ula-blue)}
.passi .passo.attivo .passo__l{color:var(--ula-ink)}
.passo__n{
  flex:0 0 26px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--ula-head);font-size:12px;font-weight:700;
  background:var(--ula-line-soft);color:var(--ula-faint);
}
.passo__n svg{width:14px;height:14px;stroke-width:2.5}
.passo__l{font-family:var(--ula-head);font-size:13.5px;font-weight:600;line-height:1.2;color:var(--ula-text);letter-spacing:-.005em}
.passo__s{font-size:12px;color:var(--ula-muted);margin-top:2px}
.passi .passo--ok .passo__n{background:var(--ula-green-50);color:var(--ula-green-600)}
.passi .passo--warn .passo__n{background:var(--ula-amber-50);color:var(--ula-amber-700);font-size:14px;font-weight:800}
.passi .passo--warn .passo__s{color:var(--ula-amber-700)}
/* "da fare": numero del passo in un anello, non un punto esclamativo */
.passi .passo--todo .passo__n{background:#fff;color:var(--ula-faint);border:0;box-shadow:inset 0 0 0 1.5px var(--ula-line-strong)}
.passi .passo--todo .passo__n::before{content:counter(p)}
.passi .passo--sto .passo__n{background:var(--ula-blue-wash);color:var(--ula-blue-deep)}

/* ---------- 11. Risultati: numeri chiave (.kpi-ris/.kpi-t) e stato ------ */
.kpi-ris{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1px;background:var(--ula-surface);
  border:1px solid var(--ula-line);border-radius:var(--ula-r);
  box-shadow:var(--ula-shadow-card);
  overflow:hidden;margin:0 0 18px;
}
.kpi-ris .kpi-t{
  position:relative;
  background:var(--ula-surface);border:0;border-radius:0;
  outline:1px solid var(--ula-line);          /* riempie la fessura da 1px: filetto tra i blocchi, comunque vadano a capo */
  padding:18px 22px 18px 24px;
}
.kpi-ris .kpi-t::before{            /* la barretta, a sinistra del numero */
  content:"";position:absolute;left:0;top:16px;bottom:16px;width:4px;border-radius:0 2px 2px 0;
  background:var(--ula-blue);
}
.kpi-ris .kpi-t__l{
  font-family:var(--ula-head);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ula-muted);
}
.kpi-ris .kpi-t__v{
  font-family:var(--ula-head);font-size:36px;font-weight:700;letter-spacing:-.03em;line-height:1;
  color:var(--ula-ink);font-variant-numeric:tabular-nums;margin-top:8px;
}
.kpi-ris .kpi-t__s{font-size:12.5px;color:var(--ula-muted);margin-top:6px}
.kpi-ris .kpi-t--ok{background:var(--ula-green-50)}
.kpi-ris .kpi-t--ok::before{background:var(--ula-green-600)}
.kpi-ris .kpi-t--ok .kpi-t__v{color:var(--ula-green-700)}
.kpi-ris .kpi-t--warn{background:var(--ula-amber-50)}
.kpi-ris .kpi-t--warn::before{background:var(--ula-amber-500)}
.kpi-ris .kpi-t--warn .kpi-t__v{color:var(--ula-amber-700)}
/* "Calcolo fatto ora…": è lo stato della pagina, non un avviso */
.ris-stato{font-size:13px;color:var(--ula-text);margin:0 0 14px}
.ris-stato svg{color:var(--ula-green-600);width:16px;height:16px}
/* .kpi-card: solo nel profilo del Registro imprese (scan360); un tocco di coerenza */
.kpi-card{border-color:var(--ula-line);border-radius:var(--ula-r);box-shadow:var(--ula-shadow-card)}
.kpi-card:hover{transform:none;box-shadow:var(--ula-shadow-card);border-color:var(--ula-line)}
.kpi-card__val{font-family:var(--ula-head);color:var(--ula-ink);font-variant-numeric:tabular-nums}
.chart-card{border-color:var(--ula-line);border-radius:var(--ula-r);box-shadow:var(--ula-shadow-card)}

/* ---------- 12. Allegato 3 (.tab-dich): un modulo, non un elenco ------- */
.data-table.tab-dich thead th{text-align:right}
.data-table.tab-dich thead th:first-child{text-align:left}
.data-table.tab-dich tbody td{padding:9px 14px}
.data-table.tab-dich tbody td:first-child{font-weight:500}
.data-table.tab-dich td:not(:first-child){text-align:right;width:150px}
/* gli input non hanno .inp: si parte dal .tab-dich input del blocco <style> inline */
.data-table.tab-dich input{
  width:110px;height:34px;padding:0 10px;text-align:right;
  font-family:var(--ula-head);font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ula-ink);
  border:1px solid #C5CFDA;border-radius:var(--ula-r-s);background:#fff;
  box-shadow:inset 0 1px 1px rgba(10,47,76,.04);
}
.data-table.tab-dich input:focus{border-color:var(--ula-blue);box-shadow:var(--ula-ring);outline:none}
.data-table.tab-dich input::placeholder{color:var(--ula-faint)}
/* totali calcolati (.dv-auto): sfondo e colore sono inline → !important; si leggono come risultato */
.data-table.tab-dich input.dv-auto{
  background:var(--ula-blue-wash)!important;color:var(--ula-ink)!important;
  border-color:var(--ula-blue-wash-2);font-weight:700;box-shadow:none;
}
.data-table.tab-dich tbody tr:last-child td{background:var(--ula-surface-2);color:var(--ula-ink)}

/* ---------- 13. Avvisi inline: box(kind) con kind = ok | warn | err | info --
   Con il ritocco (a) il div ha .avviso.avviso--<kind>; sfondo e bordo sono
   inline → !important. Senza ritocco restano i token riallineati in :root. */
.avviso{
  border-radius:8px!important;
  padding:12px 16px 12px 18px!important;
  font-size:13.5px!important;line-height:1.5;
  box-shadow:inset 4px 0 0 currentColor;
}
.avviso--ok{background:var(--ula-green-50)!important;border-color:var(--ula-green-200)!important;color:var(--ula-green-700)}
.avviso--warn{background:var(--ula-amber-50)!important;border-color:var(--ula-amber-200)!important;color:var(--ula-amber-700)}
.avviso--err{background:var(--ula-red-50)!important;border-color:var(--ula-red-200)!important;color:var(--ula-red-700)}
.avviso--info{background:var(--ula-blue-wash)!important;border-color:var(--ula-blue-wash-2)!important;color:var(--ula-blue-ink)}
.avviso strong{color:inherit}
.avviso .link:is(button,a,span,summary,div){color:inherit;text-decoration:underline}
.avviso .btn{box-shadow:none}
.avviso .nota:is(div,span){color:inherit;opacity:.85}
/* riquadro "Da controllare" nella Matrice: voci leggibili in testo normale, titolo in ambra */
.avv-d > div{color:var(--ula-muted)}
.avv-l li .btn{background:#fff!important}   /* ula-ui lo impone già con !important: confermato */

/* ---------- 14. Caricamento LUL (#up-drop ha stile inline) --------------- */
#up-drop{
  border:1.5px dashed #9FB9CF!important;             /* bordo inline */
  border-radius:var(--ula-r)!important;              /* raggio inline */
  padding:34px 24px!important;                       /* padding inline */
  color:var(--ula-blue-ink)!important;               /* colore inline */
  background:
    radial-gradient(circle at 50% 0,rgba(35,111,160,.06),transparent 60%),
    var(--ula-blue-wash);
  font-size:14px;
}
#up-drop strong{font-family:var(--ula-head);font-weight:600;color:var(--ula-ink)}
/* al passaggio e durante il trascinamento (il JS scrive border-color:var(--primary-600) inline) */
#up-drop:hover,#up-drop:focus-visible,#up-drop[style*="primary-600"]{
  border-color:var(--ula-blue)!important;background:var(--ula-blue-wash-2);
}
#up-drop svg{color:var(--ula-blue)}
#up-res{font-size:13.5px}
.mcell{font-family:var(--ula-head);font-weight:600;border-radius:5px}
.m-no{background:var(--ula-red-50);color:var(--ula-red-700);border-color:var(--ula-red-200)}
.m-off{background:var(--ula-surface-2);border-color:var(--ula-line)}

/* ---------- 15. Modale --------------------------------------------------- */
/* #modal e #modal .box sono definiti nel blocco <style> inline: [role=dialog] alza la specificità */
#modal[role=dialog]{background:rgba(6,30,50,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#modal[role=dialog] .box{
  background:#fff;
  border:1px solid rgba(10,47,76,.12);
  border-radius:14px;
  box-shadow:var(--ula-shadow-pop);
  max-width:640px;padding:0;overflow:hidden;
  display:flex;flex-direction:column;max-height:85vh;
}
#modal-t{
  font-family:var(--ula-head);font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ula-ink);
  padding:18px 24px 14px;margin:0;
  border-bottom:1px solid var(--ula-line);
  background:var(--ula-surface-2);
}
#modal-b{padding:10px 24px 2px;overflow:auto;flex:1;color:var(--ula-text)}
#modal-b > .nota:first-child{margin-top:0}
/* piè: con il ritocco (c1) è .modal-f; senza, è comunque l'ultimo div di .box */
#modal[role=dialog] .modal-f,#modal[role=dialog] .box > div:last-child{
  padding:14px 24px;border-top:1px solid var(--ula-line);background:#fff;gap:10px;margin:0;
}
#modal-no{color:var(--ula-muted)}

/* modale "Correggi i mesi": cursori con tacche native (0 · 50 · 100, ritocchi c2/c3) */
#modal-b input[type=range]{accent-color:var(--ula-blue);cursor:pointer;min-width:120px}
#modal-b .cm-row{padding:9px 2px;border-bottom-color:var(--ula-line-soft)}
#modal-b .cm-mese{font-family:var(--ula-body)}
#modal-b .cm-nc{display:block;color:var(--ula-muted)}
.cm-val{font-family:var(--ula-head)}
#modal-b .campo-err{font-size:12.5px}

/* ---------- 16. Storico, Registro imprese, varie ------------------------- */
.st-card{border-color:var(--ula-line);border-radius:var(--ula-r);box-shadow:var(--ula-shadow-card)}
.st-h h3{font-family:var(--ula-head);font-size:17px;font-weight:600;color:var(--ula-ink);letter-spacing:-.01em}
.st-h .muted{font-size:12.5px}
.st-nome{color:var(--ula-ink)}
.attivita li{border-top-color:var(--ula-line-soft)}
.attivita .ico{background:var(--ula-blue-wash);color:var(--ula-blue-deep)}
.nuova-elab{background:var(--ula-surface-2);border-color:var(--ula-line);border-radius:var(--ula-r)}
.reg-vuoto{border-color:var(--ula-line);border-radius:var(--ula-r)}
details.reg > summary{border-color:var(--ula-line);border-radius:var(--ula-r);font-family:var(--ula-head);font-weight:600;color:var(--ula-ink)}
details.reg > summary::before{color:var(--ula-blue)}
details > summary:hover{background:var(--ula-blue-wash)}
#notice{font-size:13.5px}
svg.lucide{vertical-align:-.15em}

/* ---------- 19. Struttura (design-struct.md): pulsanti-icona, categorie, Soci, avvisi --
   S1. Azioni di riga: un solo pulsante-icona .btn-ic nell'ultima colonna (.th-az/.td-az) */
.btn-ic{
  display:inline-grid;place-items:center;
  width:28px;height:28px;padding:0;
  border:1px solid var(--ula-line);border-radius:6px;
  background:#fff;color:var(--ula-faint);
  cursor:pointer;line-height:0;text-decoration:none;
  transition:border-color .12s,color .12s,background .12s;
}
.btn-ic svg{width:15px;height:15px}
.btn-ic:hover{border-color:var(--ula-blue);color:var(--ula-blue);background:var(--ula-blue-wash)}
.btn-ic:focus-visible{box-shadow:var(--ula-ring);outline:none}
.btn-ic--danger:hover{border-color:var(--ula-red-200);color:var(--ula-red-700);background:var(--ula-red-50)}
.btn-ic + .btn-ic{margin-left:4px}
.th-az,.td-az{width:40px;text-align:center!important;padding-left:4px!important;padding-right:4px!important;white-space:nowrap}
.td-az{vertical-align:middle!important}
/* righe fuori periodo nelle tabelle normali (nella Matrice .r-off è l'attenuazione) */
.data-table:not(.mat) tr.r-off td{background:var(--ula-surface-2)}

/* S2. Categorie D · G · Sv · Do: quattro colonne da 34px, uguali in Soci e in Matrice */
.th-cat,.td-cat{width:34px;min-width:34px;max-width:34px;text-align:center!important;padding:4px 0!important;vertical-align:middle!important}
.data-table thead th.th-cat{font-family:var(--ula-head);font-size:11px!important;letter-spacing:.02em!important;text-transform:none!important;cursor:help;text-decoration:underline dotted;text-underline-offset:3px}   /* "Sv" e "Do" in tondo: la regola generale delle intestazioni mette il maiuscolo con !important */
.td-cat input[type=checkbox]{width:15px;height:15px;margin:0;display:block;margin-inline:auto;accent-color:var(--ula-blue);cursor:pointer}
.td-cat input[type=checkbox]:disabled{cursor:default;opacity:.55}
/* il gruppo delle quattro colonne si legge come un blocco */
th:not(.th-cat) + .th-cat,td:not(.td-cat) + .td-cat{border-left:1px solid #C9D3DD}
.th-cat:has(+ th:not(.th-cat)),.td-cat:has(+ td:not(.td-cat)){border-right:1px solid #C9D3DD}

/* S4. Soci: campi uniformi a 32px, celle centrate. Il blocco <style> di index.html
   (dopo questo foglio) fissa .soci-tab td/th/input con !important: qui la specificità
   è alzata con .data-table-wrap.soci-tab per vincere a parità di !important. */
.data-table-wrap.soci-tab td{vertical-align:middle!important;padding:5px 4px!important}
.data-table-wrap.soci-tab th{white-space:nowrap!important;padding:9px 6px!important;font-size:10.5px!important}
.data-table-wrap.soci-tab input:not([type=checkbox]){
  height:32px;padding:0 9px;font-size:13px;font-family:var(--ula-body);
  border:1px solid #C5CFDA;border-radius:6px;color:var(--ula-ink);background:#fff;
}
.data-table-wrap.soci-tab input:not([type=checkbox]):focus{border-color:var(--ula-blue);box-shadow:var(--ula-ring);outline:none}
.data-table-wrap.soci-tab input[name=cf]{font-family:var(--ula-head);font-size:12.5px;letter-spacing:.02em;text-transform:uppercase;padding:0 7px}
.data-table-wrap.soci-tab input[type=date]{min-width:116px;padding:0 4px}
.data-table-wrap.soci-tab input[type=checkbox]{width:15px;height:15px;margin:0}
.data-table-wrap.soci-tab td.td-cat input[type=checkbox]{display:block;margin:0 auto}   /* la riga sopra annullava il centraggio: casella sotto la sua intestazione */
/* larghezze fisse (table-layout:fixed): nome = il resto (~258px), CF 160, date 3×124, categorie 4×34, Azioni 40 = 966 */
.data-table-wrap.soci-tab table.data-table{table-layout:fixed;width:100%}
.data-table-wrap.soci-tab th:nth-child(2){width:160px}
.data-table-wrap.soci-tab th:nth-child(3),.data-table-wrap.soci-tab th:nth-child(4),.data-table-wrap.soci-tab th:nth-child(5){width:124px}
/* "dai cedolini" in linea col nome: il campo si restringe, la riga resta alta uguale */
.cel-nome{display:flex;align-items:center;gap:6px;min-width:0}
.cel-nome input{flex:1 1 auto;min-width:110px;width:auto!important}
.cel-nome .badge{flex:none;margin:0}
.data-table-wrap.soci-tab td > button{min-width:0;min-height:0}

/* S5. "Da controllare": chi · cosa · azione */
.avv-l li{
  display:grid;grid-template-columns:minmax(150px,210px) 1fr auto;
  gap:4px 16px;align-items:start;
  padding:10px 0;border-top:1px solid var(--ula-amber-200);
}
.avv-chi{font-family:var(--ula-head);font-weight:600;color:var(--ula-ink);line-height:1.45}
.avv-txt{line-height:1.5;color:var(--ula-text)}
.avv-txt .avv-d{display:inline}
.avv-txt .avv-d > summary{display:inline;margin-left:6px;list-style:none}
.avv-txt .avv-d > summary.link{color:var(--ula-blue);font-weight:600;font-size:inherit}
.avv-txt .avv-d > summary::-webkit-details-marker{display:none}
.avv-txt .avv-d[open] > div{display:block;margin-top:6px;font-size:13px;color:var(--ula-muted)}
.avv-az{justify-self:end}
.avv-az .btn svg{width:14px;height:14px}
@media (max-width:820px){.avv-l li{grid-template-columns:1fr}.avv-az{justify-self:start}}

/* ---------- 20. Avvisi con ✕, fisarmonica, elenchi dei Risultati, modale di dettaglio,
               grammatica delle tabelle (html-struct.py) ------------------------------- */
/* la ✕ dell'avviso: lo stesso .btn-ic della colonna Azioni, piccolo, in alto a destra */
.avviso.avviso--x{position:relative;padding-right:46px!important}
.btn-ic.avviso__x{position:absolute;top:8px;right:8px;width:24px;height:24px;color:inherit;background:rgba(255,255,255,.55);border-color:rgba(10,47,76,.12)}
.btn-ic.avviso__x svg{width:13px;height:13px}
.btn-ic.avviso__x:hover{background:#fff;border-color:currentColor;color:inherit}

/* un solo componente fisarmonica: details.fisa (anche .aiuto e .st-sub quando hanno la classe) */
details.fisa{border:1px solid var(--ula-line);border-radius:8px;background:#fff;margin:12px 0 0;font-size:13.5px;color:var(--ula-text)}
details.fisa + details.fisa{margin-top:8px}
details.fisa > summary{
  list-style:none;cursor:pointer;position:relative;
  padding:9px 14px 9px 32px;
  font-family:var(--ula-head);font-size:13px;font-weight:600;color:var(--ula-ink);
  border-radius:8px;
}
details.fisa > summary::-webkit-details-marker{display:none}
details.fisa > summary::before{
  content:"";position:absolute;left:13px;top:50%;width:7px;height:7px;margin-top:-5px;
  border-right:1.75px solid var(--ula-blue);border-bottom:1.75px solid var(--ula-blue);
  transform:rotate(-45deg);transition:transform .12s;
}
details.fisa[open] > summary::before{transform:rotate(45deg);margin-top:-6px}
details.fisa > summary:hover{background:var(--ula-blue-wash)}
details.fisa[open] > summary{border-bottom:1px solid var(--ula-line);border-radius:8px 8px 0 0;margin-bottom:0}
details.fisa > :not(summary){margin:10px 14px 0}
details.fisa[open]{padding-bottom:12px}
details.fisa > .nota{margin-top:8px}
details.fisa > .data-table-wrap{margin-top:10px}
details.fisa > table.data-table{width:calc(100% - 28px)}
details.fisa .fisa-l{padding-left:18px;line-height:1.6}
details.fisa .fisa-l li+li{margin-top:2px}
/* dentro un avviso la fisarmonica è un velo, non una scheda */
.avviso details.fisa{background:rgba(255,255,255,.5);border-color:rgba(10,47,76,.14);color:inherit;margin-top:8px;font-size:13px}
.avviso details.fisa > summary{color:inherit;font-size:12.5px;padding:7px 12px 7px 30px}
.avviso details.fisa > summary::before{border-color:currentColor}
.avviso details.fisa > summary:hover{background:rgba(255,255,255,.5)}
.avviso details.fisa[open] > summary{border-bottom-color:rgba(10,47,76,.14)}
.avviso details.fisa[open]{padding-bottom:10px}

/* Risultati: elenchi "Differenze", "Cause note", "Persone in nessuna categoria" */
.ris-l{list-style:none;margin:8px 14px 0;padding:0;font-size:13.5px}
.ris-l li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:7px 0;border-top:1px solid var(--ula-line-soft)}
.ris-l li:first-child{border-top:0}
ol.ris-l{counter-reset:r}
ol.ris-l li::before{counter-increment:r;content:counter(r) ".";font-family:var(--ula-head);font-weight:600;color:var(--ula-muted);min-width:22px}
.ris-l li > strong:first-child{font-family:var(--ula-head);color:var(--ula-muted);min-width:22px}
.ris-l__k{flex:1 1 260px;min-width:0;color:var(--ula-text)}
.ris-l__v{font-family:var(--ula-head);font-weight:600;color:var(--ula-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.ris-l .muted{font-size:12.5px;white-space:nowrap}
.ris-l .link:is(button){white-space:nowrap}
.ris-sub{font-family:var(--ula-head);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ula-blue-ink);margin:14px 14px 0}

/* modale di dettaglio (mostraDettaglio): corpo in paragrafi, un solo pulsante */
#modal-b .det-b{padding:6px 0 8px;font-size:14px;line-height:1.55}
#modal-b .det-b p{margin:0 0 10px}
#modal-b .det-b p:last-child{margin-bottom:0}
#modal-b .det-b ul.ris-cause{margin:0 0 10px;padding-left:20px}
#modal-b .det-b ul.ris-cause li{margin-bottom:6px}
#modal-b .det-b ul.ris-cause li > strong:first-child{font-family:var(--ula-head);color:var(--ula-muted)}
#modal-b .det-b .muted{font-size:13px}

/* grammatica delle tabelle: numeri a destra con cifre tabellari, date e mesi su una riga */
.data-table th.c-num,.data-table td.c-num{text-align:right!important;white-space:nowrap}
.data-table td.c-num{font-family:var(--ula-head);font-weight:500;color:var(--ula-ink);font-variant-numeric:tabular-nums}
.data-table th.c-data,.data-table td.c-data,.data-table th.c-mese,.data-table td.c-mese{white-space:nowrap}
.data-table th.c-mese{width:120px}
.data-table th.c-data{width:120px}
.data-table th.c-np{width:170px}
.data-table th.c-num{width:90px}
.data-table th.th-az{width:40px}
.data-table.dash th.th-az{width:56px}
.data-table td.c-file{max-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}   /* il nome lungo del file si tronca (title = nome intero) */
.data-table td.c-file .badge{vertical-align:1px}
/* tabelle secondarie (file, storico, dettagli): righe più raccolte, altezza costante */
.data-table.tab-file tbody td,.data-table.st-tab tbody td,.data-table.tab-cat tbody td,.data-table.tab-pers tbody td{padding:9px 14px;height:44px;box-sizing:border-box}
.data-table.tab-file thead th,.data-table.st-tab thead th,.data-table.tab-cat thead th,.data-table.tab-pers thead th{padding:9px 14px}
.data-table.st-tab td.st-data{white-space:nowrap;width:170px}
.data-table.tab-cat td:first-child{font-weight:500}
.data-table.tab-cat tr.r-tot td{border-top:2px solid var(--ula-line-strong);background:var(--ula-surface-2);font-weight:700;color:var(--ula-ink)}
.data-table.tab-pers{font-size:13px}
/* elenco cooperative ed elaborazioni: stesso allineamento verticale e altezza di riga */
.data-table.dash tbody td{height:88px;box-sizing:border-box}   /* nome su due righe + meta: tutte le righe alte uguali */
.data-table.dash .az-num{font-family:var(--ula-head);font-weight:600}
.data-table.dash td.apri a.btn-ic{width:28px;height:28px}

/* ---------- 17. Tablet e laptop stretti --------------------------------- */
@media (max-width:1100px){
  div.card-b{padding:18px 20px}
  .az-head{padding:18px 20px 0}
  .az-head .passi{margin:16px -20px 0}
  #az-title,#imp-title{font-size:22px!important}
  #v-dash .content__title{font-size:26px}
  /* sotto 1100px le sei colonne uguali non tengono le etichette: la striscia
     scorre e centraPasso() porta in vista il passo attivo (come ula-ui sotto 900px) */
  .az-head .passi{display:flex;overflow-x:auto;scrollbar-width:thin}
  .passi .passo{flex:0 0 auto}
  .passi .passo > button{padding:11px 14px}
  .data-table tbody td{padding:11px 12px}
  .data-table.dash tbody td{padding:11px 12px!important}
  .kpi-ris .kpi-t__v{font-size:30px}
}
@media (max-width:820px){
  .passo__s{display:none}
  .kpi-ris{grid-template-columns:1fr 1fr}
  .data-table.dash td.ult{display:none}
  .data-table thead th,.data-table tbody td{padding-left:10px;padding-right:10px}
  .mat-wrap{max-height:none}
}
@media (max-width:700px){
  .az-head .passi{margin:12px -14px 0}
}

/* ---------- 20. Spazi nelle tabelle: le colonne crescono insieme alla pagina ----
   Prima la colonna del nome prendeva tutto lo spazio in più e le altre restavano a
   larghezza fissa: su uno schermo largo il nome era enorme e il resto compresso.
   Qui le larghezze sono in percentuale (table-layout:fixed) con i minimi dei campi. */
/* Soci: nome 27 · CF 16 · tre date 12,5 · quattro categorie 3,75 · Azioni 4,5 = 100 */
.data-table-wrap.soci-tab th:nth-child(1){width:27%}
.data-table-wrap.soci-tab th:nth-child(2){width:16%}
.data-table-wrap.soci-tab th:nth-child(3),.data-table-wrap.soci-tab th:nth-child(4),.data-table-wrap.soci-tab th:nth-child(5){width:12.5%}
.data-table-wrap.soci-tab th.th-cat,.data-table-wrap.soci-tab td.td-cat{width:3.75%;min-width:34px;max-width:none}
.data-table-wrap.soci-tab th.th-az{width:4.5%}
.data-table-wrap.soci-tab input:not([type=checkbox]){width:100%;box-sizing:border-box}
.data-table-wrap.soci-tab input[type=date]{min-width:0}
.cel-nome input{min-width:90px}
/* Matrice: tipo 6 · nome 24,5 · categorie 4×3,5 · mesi 12×3,5 · Totale 4,5 · ULA 4,5 · Azioni 4,5 = 100 */
.data-table.mat th:first-child,.data-table.mat td:first-child{width:6%;min-width:56px}
.data-table.mat th.nm,.data-table.mat td.nm{width:24.5%;min-width:170px}
.data-table.mat th.th-cat,.data-table.mat td.td-cat{width:3.5%;min-width:34px;max-width:none}
.data-table.mat th.th-mese,.data-table.mat td.td-mese{width:3.5%;min-width:34px}
.data-table.mat th.th-tot{width:4.5%;min-width:46px}
.data-table.mat th.th-az{width:4.5%;min-width:40px}
/* Allegato 3 (Anagrafica): voce 52 · tre numeri 16 */
.data-table.tab-dich th:first-child{width:52%}
.data-table.tab-dich td:not(:first-child),.data-table.tab-dich th:not(:first-child){width:16%}
/* Confronto: voce 28, tre gruppi da 24 (Dichiarato 7 · Calcolato 7 · Differenza 10, che porta la pillola «n. X») */
.data-table.tab-conf thead tr:first-child th:first-child{width:28%}
.data-table.tab-conf thead tr:first-child th.sep{width:24%}
.data-table.tab-conf thead tr:nth-child(2) th{width:7%}
.data-table.tab-conf thead tr:nth-child(2) th:nth-child(3n){width:10%}
.data-table.tab-conf thead tr:nth-child(2) th{padding:6px 3px!important;font-size:9.5px!important;letter-spacing:0!important}   /* «Dichiarato» sta su una riga anche a 1280 */
.data-table.tab-conf th:first-child,.data-table.tab-conf td:first-child{min-width:0;overflow-wrap:anywhere}
/* Soci a 1280: il distintivo «dai cedolini» è più stretto, il nome si legge */
.cel-nome .badge{font-size:9px;padding:2px 5px;letter-spacing:.02em}

/* ---------- 21. Risultati: righe e caselle che aprono la modale -------------- */
.ris-l li.ris-l__row{cursor:pointer;border-radius:6px;margin:0 -8px;padding-left:8px;padding-right:8px;transition:background .12s}
.ris-l li.ris-l__row:hover,.ris-l li.ris-l__row:focus-visible{background:var(--ula-blue-wash);outline:none}
.ris-l li.ris-l__row:focus-visible{box-shadow:var(--ula-ring)}
.ris-l li.ris-l__row .ris-l__go{margin-left:auto;align-self:center;pointer-events:none}
.ris-l li.ris-l__row:hover .ris-l__go{border-color:var(--ula-blue);color:var(--ula-blue);background:#fff}
.data-table.tab-conf td.cella-click{cursor:pointer;text-decoration:underline dotted;text-decoration-color:var(--ula-faint);text-underline-offset:3px;transition:background .12s}
.data-table.tab-conf td.cella-click:hover,.data-table.tab-conf td.cella-click:focus-visible{background:var(--ula-blue-wash);text-decoration-color:var(--ula-blue);outline:none}
.data-table.tab-conf td.diff-on.cella-click:hover,.data-table.tab-conf td.diff-on.cella-click:focus-visible{background:var(--ula-red-200)}
.data-table.tab-conf td.cella-click .nrif{color:inherit}
#modal-b .det-b .det-sub{font-family:var(--ula-head);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ula-muted);margin:14px 0 6px}
#modal-b .det-b .data-table-wrap{margin:0 0 8px;border:1px solid var(--ula-line);border-radius:8px;overflow:auto;max-height:46vh}
#modal-b .det-b table.tab-pers--det{font-size:13px;margin:0}
#modal-b .det-b table.tab-pers--det th{font-size:10.5px!important}
#modal-b .det-b table.tab-pers--det td{padding:6px 10px!important}
#modal-b .det-b table.tab-pers--det tr.r-tot td{font-weight:700;border-top:2px solid var(--ula-line)}
#modal-b .det-b table.tab-pers--det td.c-num,#modal-b .det-b table.tab-pers--det th.c-num{text-align:right;font-family:var(--ula-head);white-space:nowrap}

/* ---------- 18. Stampa --------------------------------------------------- */
@media print{
  body{background:#fff}
  .sidebar,.topbar__actions,.passi{display:none!important}
  div.card-b,.az-head,.kpi-ris,#az-list > .data-table-wrap{box-shadow:none;border-color:#bbb}
  .mat-wrap{max-height:none;overflow:visible}
}