/* ============================================================
   microcredito-ui.css — LINGUAGGIO VISIVO UNIFICATO
   Layer di componenti condivisi per tutte le pagine del
   microcredito-di (consulente, operatore, richiedente, index,
   sotto-pagine). Modello di riferimento: operatore.html.
   NON ridefinisce token: usa quelli di scan360.css.
   Caricare DOPO scan360.css.
   ============================================================ */

/* ---------- 1. BOTTONI ---------- */
.mui-btn{font-family:inherit;cursor:pointer;transition:var(--fast);display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--r-md);font-size:13px;font-weight:700;line-height:1;text-decoration:none;white-space:nowrap}
.mui-btn:disabled{opacity:.5;cursor:not-allowed}
.mui-btn--primary{padding:8px var(--sp-4);background:var(--primary-700);border:1px solid var(--primary-700);color:var(--white)}
.mui-btn--primary:hover:not(:disabled){background:var(--primary-600);border-color:var(--primary-600)}
.mui-btn--secondary{padding:8px var(--sp-4);background:var(--white);border:1px solid var(--neutral-200);color:var(--neutral-700);font-weight:600}
.mui-btn--secondary:hover:not(:disabled){background:var(--neutral-100)}
.mui-btn--ghost{padding:8px var(--sp-3);background:transparent;border:1px solid transparent;color:var(--neutral-600);font-weight:600}
.mui-btn--ghost:hover:not(:disabled){background:var(--neutral-100);color:var(--neutral-800)}
.mui-btn--danger{padding:8px var(--sp-4);background:var(--white);border:1px solid var(--danger-200);color:var(--danger-600);font-weight:600}
.mui-btn--danger:hover:not(:disabled){background:var(--danger-50);border-color:var(--danger-300)}
.mui-btn--success{padding:8px var(--sp-4);background:var(--success-600);border:1px solid var(--success-600);color:var(--white)}
.mui-btn--success:hover:not(:disabled){filter:brightness(1.06)}
.mui-btn--sm{padding:6px var(--sp-3);font-size:12px;font-weight:600}

/* back link */
.mui-back{display:inline-flex;align-items:center;gap:6px;padding:6px var(--sp-3);background:var(--neutral-50);border:1px solid var(--neutral-200);border-radius:var(--r-md);color:var(--neutral-700);font-size:12px;font-weight:600;cursor:pointer;transition:var(--fast);font-family:inherit;text-decoration:none}
.mui-back:hover{background:var(--primary-50);border-color:var(--primary-200);color:var(--primary-700)}

/* ---------- 2. HERO PRATICA (header pagina dettaglio) ---------- */
.mui-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-4);margin:var(--sp-2) 0 var(--sp-4);padding-bottom:var(--sp-4);border-bottom:1px solid var(--neutral-200)}
.mui-hero__main{flex:1;min-width:0}
.mui-hero__title{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:800;color:var(--primary-700);margin:0 0 var(--sp-2);letter-spacing:-0.02em;line-height:1.15}
.mui-hero__meta{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;font-size:13px;color:var(--neutral-600)}
.mui-hero__meta > * + *::before{content:"·";margin-right:var(--sp-3);color:var(--neutral-300)}
.mui-hero__meta .status-badge::before{content:none}
.mui-hero__meta .status-badge{margin-right:0}
.mui-hero__num{font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums}
.mui-hero__actions{display:flex;align-items:center;gap:var(--sp-2);flex-shrink:0}
@media(max-width:680px){.mui-hero{flex-direction:column;gap:var(--sp-3)}.mui-hero__title{font-size:var(--text-2xl)}}

/* ---------- 3. CARD / SEZIONE ---------- */
.mui-card{background:var(--white);border:1px solid var(--neutral-200);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.mui-card__head{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--neutral-100)}
.mui-card__head-icon{width:30px;height:30px;border-radius:var(--r-md);background:var(--primary-50);color:var(--primary-600);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.mui-card__title{font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--neutral-900);margin:0;letter-spacing:-0.01em}
.mui-card__head-aside{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2)}
.mui-card__body{padding:var(--sp-4)}

/* ---------- 4. KPI / STAT-BOX ---------- */
.mui-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--sp-4)}
.mui-kpi{padding:var(--sp-4) var(--sp-5);border-radius:var(--r-md);background:var(--white);border:1px solid var(--neutral-200);box-shadow:var(--shadow-sm);transition:var(--fast);display:flex;flex-direction:column;gap:4px}
.mui-kpi:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.mui-kpi__label{font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--neutral-500)}
.mui-kpi__value{font-family:var(--font-display);font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums;font-size:26px;font-weight:800;color:var(--primary-700);line-height:1.1;letter-spacing:-0.015em}
.mui-kpi__sub{font-size:11px;color:var(--neutral-500);font-feature-settings:"tnum" 1}
.mui-kpi--success .mui-kpi__value{color:var(--success-600)}
.mui-kpi--warn .mui-kpi__value{color:var(--warning-700)}
.mui-kpi--danger .mui-kpi__value{color:var(--danger-600)}

/* ---------- 5. INFO GRID (campi label/valore) ---------- */
.mui-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-4) var(--sp-5)}
.mui-field{display:flex;flex-direction:column;gap:2px;min-width:0}
.mui-field__label{font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--neutral-500)}
.mui-field__value{font-size:14px;font-weight:600;color:var(--neutral-900);word-break:break-word}

/* ---------- 6. BANNER ESITO ---------- */
.mui-banner{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);border:1px solid var(--neutral-200);background:var(--neutral-50);margin-bottom:var(--sp-4)}
.mui-banner__icon{width:34px;height:34px;border-radius:var(--r-md);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--white)}
.mui-banner__body{flex:1;min-width:0}
.mui-banner__title{font-family:var(--font-display);font-size:14px;font-weight:700;margin:0 0 2px;color:var(--neutral-900)}
.mui-banner__sub{font-size:12px;color:var(--neutral-600);font-feature-settings:"tnum" 1}
.mui-banner--success{background:var(--success-50);border-color:var(--success-100)}
.mui-banner--success .mui-banner__icon{color:var(--success-600)}
.mui-banner--warn{background:var(--gold-50);border-color:var(--gold-200)}
.mui-banner--warn .mui-banner__icon{color:var(--gold-700)}
.mui-banner--danger{background:var(--danger-50);border-color:var(--danger-200)}
.mui-banner--danger .mui-banner__icon{color:var(--danger-600)}

/* ---------- 7. BADGE-MINI (etichette piccole) ---------- */
.mui-tag{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:6px;font-size:11px;font-weight:600;line-height:1;white-space:nowrap;background:var(--neutral-100);color:var(--neutral-600);border:1px solid var(--neutral-200)}
.mui-tag--success{background:var(--success-50);color:var(--success-600);border-color:var(--success-100)}
.mui-tag--warn{background:var(--gold-50);color:var(--gold-700);border-color:var(--gold-200)}
.mui-tag--danger{background:var(--danger-50);color:var(--danger-600);border-color:var(--danger-200)}
.mui-tag--info{background:var(--info-50,var(--primary-50));color:var(--info-600,var(--primary-600));border-color:var(--info-100,var(--primary-100))}

/* ---------- 8. TABELLA DATI ---------- */
.mui-table{width:100%;border-collapse:collapse;font-size:13px}
.mui-table th{font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--neutral-500);text-align:right;padding:8px var(--sp-3);border-bottom:1px solid var(--neutral-200)}
.mui-table th:first-child{text-align:left}
.mui-table td{padding:8px var(--sp-3);border-bottom:1px solid var(--neutral-100);text-align:right;font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums;color:var(--neutral-700)}
.mui-table td:first-child{text-align:left;color:var(--neutral-800);font-weight:500}
.mui-table tr:hover td{background:var(--neutral-50)}
.mui-table tr.mui-table__total td{font-weight:800;color:var(--neutral-900);border-top:2px solid var(--neutral-200);background:var(--neutral-50)}

/* ---------- 9. PROGRESS STEPS (avanzamento sobrio, no wizard semaforo) ---------- */
.mui-progress{background:var(--white);border:1px solid var(--neutral-200);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-4)}
.mui-progress__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.mui-progress__label{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--neutral-500)}
.mui-progress__pct{font-family:var(--font-display);font-size:12px;font-weight:700;color:var(--neutral-700);font-feature-settings:"tnum" 1}
.mui-progress__track{display:flex;gap:4px;margin-bottom:10px}
.mui-progress__seg{flex:1;height:6px;border-radius:3px;background:var(--neutral-100);transition:background .3s ease}
.mui-progress__seg.is-done{background:var(--primary-600)}
.mui-progress__seg.is-current{background:var(--primary-300)}
.mui-progress__steps{display:flex;gap:var(--sp-4);flex-wrap:wrap}
.mui-progress__step{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--neutral-400);white-space:nowrap}
.mui-progress__step.is-done{color:var(--neutral-700)}
.mui-progress__step.is-current{color:var(--primary-700);font-weight:700}

/* ---------- 10. MODALE ---------- */
.mui-modal-overlay{position:fixed;inset:0;background:rgba(15,18,40,.55);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--sp-4);animation:mui-fade .15s ease}
@keyframes mui-fade{from{opacity:0}to{opacity:1}}
.mui-modal{background:var(--white);border-radius:var(--r-lg);box-shadow:0 24px 64px rgba(0,0,0,.28);width:100%;max-width:520px;max-height:88vh;overflow:auto;animation:mui-pop .18s cubic-bezier(.2,.9,.3,1)}
@keyframes mui-pop{from{transform:translateY(8px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.mui-modal__head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--neutral-100)}
.mui-modal__title{font-family:var(--font-display);font-size:16px;font-weight:800;color:var(--neutral-900);margin:0;letter-spacing:-0.01em}
.mui-modal__close{width:30px;height:30px;border-radius:var(--r-md);background:var(--neutral-50);border:1px solid var(--neutral-200);color:var(--neutral-600);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:var(--fast)}
.mui-modal__close:hover{background:var(--danger-50);color:var(--danger-600);border-color:var(--danger-200)}
.mui-modal__body{padding:var(--sp-5)}

/* pallino semaforo riusabile */
.sem-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-right:2px;box-shadow:0 0 0 2px rgba(255,255,255,.5)}