/* ============================================================================
   InnovaCredit — sistema visivo v5 «Carta valori»
   ----------------------------------------------------------------------------
   Sostituisce integralmente il foglio v3/v4 mantenendo TUTTI i nomi delle
   classi: le 53 pagine cambiano aspetto senza essere riscritte una per una.

   Direzione: la carta di sicurezza dei documenti bancari. Fondo grigio-verde
   da carta valori, inchiostro blu del marchio, un secondo inchiostro verde
   petrolio per i dati, l'arancio del marchio SOLO sulle azioni da compiere.
   Bodoni Moda (Parma) per giudizi, cifre e titoli; Archivo con cifre
   tabellari per l'interfaccia. Caratteri ospitati in casa: nessuna chiamata
   a servizi esterni (anche per il GDPR, che le banche guardano).

   Elemento firma: il SIGILLO — rosetta guilloché generata dai dati della
   pratica, con la lettera di giudizio al centro (vedi .sigillo e ui.js).
   Tutto il resto resta quieto.
   ========================================================================== */

@font-face {
  font-family: 'Bodoni Moda';
  src: url('fonts/bodoni-moda.woff2') format('woff2');
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo.woff2') format('woff2');
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
}

/* ------------------------------------------------------------- variabili -- */
:root {
  --navy:       #1D3E85;
  --navy-d:     #13254A;
  --navy-l:     #1D3E85;
  --navy-x:     #2B56A6;
  --petrolio:   #1F6F78;
  --orange:     #C5471F;
  --orange-d:   #A33A18;
  --orange-t:   #FBE9DD;

  --green:      #0F5C4A;
  --green-t:    #E1EFE9;
  --amber:      #9A4A07;
  --amber-t:    #FBEEDD;
  --red:        #9B1C1C;
  --red-t:      #F8E6E4;

  --ink:        #13254A;
  --paper:      #E9EEEC;
  --card:       #FBFCFB;
  --steel:      #475467;
  --steel-l:    #6B7A89;
  --rule:       #DCE3E0;
  --rule-d:     #C3CECA;

  --radius:     22px;
  --radius-s:   12px;
  --shadow:     none;
  --shadow-l:   0 24px 64px -28px rgba(19,37,74,.45);
  --sidebar:    248px;
  --topbar:     68px;

  --font:       'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display:    'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --mono:       'Archivo', system-ui, sans-serif;

  --t-fast:     .14s cubic-bezier(.4,0,.2,1);
  --t-med:      .26s cubic-bezier(.4,0,.2,1);

  --sig-1:      #1D3E85;
  --sig-2:      #1F6F78;
  --sig-fondo:  #FBFCFB;

  /* nomi usati dalle pagine v4 (mai definiti prima: bordi e accenti sparivano) */
  --accento:    var(--navy-l);
  --attenzione: var(--amber);
  --bordo:      var(--rule);
  --ok:         var(--petrolio);
  --sfondo:     var(--paper);
  --testo:      var(--ink);
  --marchio:    var(--navy-l);
}

/* tema scuro: la sala di delibera */
[data-tema="scuro"] {
  --ink:      #E9EEEC;
  --paper:    #0B1629;
  --card:     #122038;
  --steel:    #A9B6C5;
  --steel-l:  #8594A6;
  --rule:     #22324F;
  --rule-d:   #2F4264;
  --navy:     #8FB0EA;
  --navy-l:   #8FB0EA;
  --navy-d:   #081121;
  --navy-x:   #A9C3F2;
  --petrolio: #6FC2C9;
  --orange:   #E0673C;
  --orange-d: #C5471F;
  --orange-t: #3A2016;
  --green:    #6FCFAE;
  --green-t:  #10291F;
  --amber:    #E9AE5C;
  --amber-t:  #2E2210;
  --red:      #F08A80;
  --red-t:    #2E1514;
  --shadow-l: 0 24px 64px -24px rgba(0,0,0,.8);
  --sig-1:    #8FB0EA;
  --sig-2:    #6FC2C9;
  --sig-fondo:#122038;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  font-optical-sizing: auto;
}
a { color: var(--navy-l); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
::selection { background: color-mix(in srgb, var(--petrolio) 24%, transparent); }
:focus-visible { outline: 2px solid var(--petrolio); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* =============================================================== struttura */
.shell { display: flex; min-height: 100vh; }

.side {
  width: var(--sidebar); flex: 0 0 var(--sidebar);
  background: #13254A; color: #D5DEEA;
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  padding: 28px 14px 18px; overflow-y: auto; z-index: 40;
}
[data-tema="scuro"] .side { background: var(--navy-d); border-right: 1px solid var(--rule); }
.side .brand { display: flex; align-items: baseline; gap: 2px; padding: 0 14px 18px; font-family: var(--display); }
.side .brand b { color: #FBFCFB; font-size: 25px; font-weight: 600; letter-spacing: -.01em; }
.side .brand i { color: #9FB3D6; font-style: normal; font-family: var(--font); font-size: 13px; font-weight: 500; }
.side .brand img { height: 30px; width: auto; }
.side .brand-org { padding: 0 14px 14px; margin-top: -12px; font-size: 13px; color: #9FB3D6; }
.navgroup { font-size: 12.5px; color: #8FA3C4; font-weight: 500; padding: 18px 14px 6px; }
.side a {
  display: flex; align-items: center; gap: 12px; min-height: 42px;
  padding: 0 14px; margin: 1px 0; color: #D5DEEA; font-size: 14.5px; font-weight: 500;
  border-radius: 12px; transition: background var(--t-fast), color var(--t-fast); position: relative;
}
.side a:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.side a.on { background: #23457F; color: #fff; font-weight: 600; }
.side a .ico { width: 18px; height: 18px; flex: 0 0 18px; display: grid; place-items: center; opacity: .9; }
.side a .ico svg { width: 18px; height: 18px; }
.side a .pip { margin-left: auto; background: var(--orange); color: #fff; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 20px; }
.side .foot-note { margin-top: auto; padding: 16px 14px 4px; font-size: 13px; color: #9FB3D6; line-height: 1.5; }
.side .foot-note b { display: block; color: #FBFCFB; font-weight: 600; font-size: 14px; }
.side .foot-note .cifra { font-family: var(--display); font-size: 22px; color: #FBFCFB; display: block; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top {
  height: var(--topbar); background: var(--paper);
  display: flex; align-items: center; gap: 12px; padding: 0 40px;
  position: sticky; top: 0; z-index: 30; border-bottom: 1px solid transparent;
  transition: border-color var(--t-med), background var(--t-med);
}
.top.scorre { border-bottom-color: var(--rule); background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(10px); }
.top h1 { font-family: var(--font); font-size: 15px; font-weight: 600; margin: 0; color: var(--steel); }
.top .sp { flex: 1; }
.crumbs { font-size: 13px; color: var(--steel); display: flex; gap: 7px; align-items: center; }
.crumbs span { color: var(--steel-l); }
.page { padding: 20px 40px 56px; max-width: 1480px; width: 100%; }
.page-head { margin-bottom: 26px; }
.page-head h1, .page-head h2 {
  font-family: var(--display); font-size: 42px; font-weight: 600; letter-spacing: -.01em; line-height: 1.06;
  margin: 0 0 8px; color: var(--ink); text-wrap: balance;
}
.page-head p { margin: 0; color: var(--steel); font-size: 16px; max-width: 68ch; line-height: 1.5; }
.page-head .row { margin-top: 16px; }

/* ================================================================ riquadri */
.card { background: var(--card); border: 0; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: box-shadow var(--t-med), transform var(--t-med); }
.card.hover:hover { box-shadow: var(--shadow-l); transform: translateY(-2px); }
.card.acc, .card.acc-navy { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--navy-l) 32%, transparent); }
.card.scura { background: #13254A; color: #E9EEEC; }
.card.scura .card-h h3 { color: #FBFCFB; }
.card-h { padding: 20px 24px 4px; display: flex; align-items: center; gap: 10px; }
.card-h h3 { margin: 0; font-size: 17px; font-weight: 600; font-family: var(--font); }
.card-h .sp { flex: 1; }
.card-h p { margin: 2px 0 0; font-size: 13.5px; color: var(--steel); font-weight: 400; }
.card-h .link { font-size: 14px; color: var(--navy-l); cursor: pointer; font-weight: 500; }
.card-b { padding: 16px 24px 24px; }
.card-b.tight { padding: 12px 16px; }
.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.g-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.row.between { justify-content: space-between; }

/* ================================================================= comandi */
.btn {
  appearance: none; border: 1px solid var(--rule-d); background: var(--card); color: var(--ink);
  font-family: var(--font); font-size: 14.5px; font-weight: 600;
  min-height: 42px; padding: 0 18px; border-radius: var(--radius-s);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
  white-space: nowrap; line-height: 1.2; text-decoration: none;
}
.btn:hover { border-color: var(--navy-l); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.cta { background: var(--orange); border-color: var(--orange); color: #fff; }
.btn.cta:hover { background: var(--orange-d); border-color: var(--orange-d); }
.btn.navy, .btn.primario { background: var(--navy-l); border-color: var(--navy-l); color: #FBFCFB; }
[data-tema="scuro"] .btn.navy, [data-tema="scuro"] .btn.primario { color: #0B1629; }
.btn.navy:hover, .btn.primario:hover { background: var(--navy-d); border-color: var(--navy-d); }
.btn.contorno { background: transparent; border-color: var(--navy-l); color: var(--navy-l); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--steel); }
.btn.ghost:hover { background: color-mix(in srgb, var(--steel) 10%, transparent); color: var(--ink); }
.btn.danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); background: transparent; }
.btn.danger:hover { background: var(--red-t); }
.btn.sm { font-size: 13.5px; min-height: 36px; padding: 0 13px; border-radius: 10px; }
.btn.lg { font-size: 16px; min-height: 52px; padding: 0 26px; border-radius: 14px; }
.btn.link { background: none; border: none; color: var(--navy-l); padding: 0; min-height: 0; font-weight: 600; }
.btn.link:hover { text-decoration: underline; }
.btn.block { width: 100%; }
.btn svg { width: 18px; height: 18px; }

/* ============================================================== indicatori */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 0; white-space: nowrap; line-height: 1.5; }
.b-green { background: var(--green-t); color: var(--green); }
.b-navy  { background: color-mix(in srgb, var(--navy-l) 12%, transparent); color: var(--navy-l); }
.b-amber { background: var(--amber-t); color: var(--amber); }
.b-red   { background: var(--red-t); color: var(--red); }
.b-grey  { background: color-mix(in srgb, var(--steel) 12%, transparent); color: var(--steel); }
.b-petrolio { background: color-mix(in srgb, var(--petrolio) 14%, transparent); color: var(--petrolio); }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--steel-l); }
.dot.live { background: var(--petrolio); animation: puls 2.4s infinite; }
@keyframes puls { 50% { opacity: .35; } }
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; border: 0; margin: 0 0 14px; }
.alert > div > b:first-child { display: block; margin-bottom: 2px; }
.alert:last-child { margin-bottom: 0; }
.alert b { font-weight: 600; }
.alert .ico { font-size: 15px; line-height: 1.35; flex: 0 0 auto; }
.a-navy  { background: color-mix(in srgb, var(--navy-l) 8%, var(--card)); color: var(--ink); }
.a-green { background: var(--green-t); color: var(--ink); }
.a-amber { background: var(--amber-t); color: var(--ink); }
.a-red   { background: var(--red-t); color: var(--ink); }
.a-green > div > b:first-child { color: var(--green); }
.a-amber > div > b:first-child { color: var(--amber); }
.a-red > div > b:first-child { color: var(--red); }

/* ===================================================== dati e cifre chiave */
.kpi { background: var(--card); border: 0; border-radius: 20px; padding: 18px 20px 20px; position: relative; overflow: hidden; }
.kpi.acc { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--orange) 40%, transparent); }
.kpi.ok  { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--green) 35%, transparent); }
.kpi.ko  { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--red) 35%, transparent); }
.kpi .lab { font-size: 14px; color: var(--steel); font-weight: 500; margin-bottom: 8px; }
.kpi b { display: block; font-family: var(--display); font-size: 34px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); line-height: 1.05; }
.kpi .sub { font-size: 13.5px; color: var(--steel); margin-top: 6px; }
.kpi .trend { font-size: 13px; font-weight: 600; }
.kpi .trend.su { color: var(--green); }
.kpi .trend.giu { color: var(--red); }
.dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; font-size: 14.5px; }
.dl dt { color: var(--steel); font-weight: 500; }
.dl dd { margin: 0; font-weight: 600; text-align: right; }
.mono { font-family: var(--font); font-variant-numeric: tabular-nums slashed-zero; letter-spacing: .01em; }
.tiny { font-size: 13px; color: var(--steel); line-height: 1.5; }
.num  { text-align: right; }
.cifra { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; }

/* ------------------------------------------------------------- il verdetto */
.verdetto { display: flex; align-items: center; gap: 22px; padding: 20px 24px; border-radius: var(--radius); background: var(--card); color: var(--ink); position: relative; overflow: hidden; }
.verdetto .lettera { font-family: var(--display); font-size: 38px; font-weight: 700; line-height: 1; width: 112px; height: 112px; flex: 0 0 112px; display: grid; place-items: center; position: relative; color: var(--navy-l); }
.verdetto .lettera > span { position: relative; z-index: 1; }
.verdetto .lettera svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.verdetto.g-a .lettera { color: var(--green); }
.verdetto.g-b .lettera { color: var(--amber); }
.verdetto.g-c .lettera { color: var(--red); }
.verdetto h4 { margin: 0 0 4px; font-family: var(--display); font-size: 26px; font-weight: 600; line-height: 1.12; }
.verdetto p { margin: 0; font-size: 14.5px; color: var(--steel); line-height: 1.5; }
.verdetto .scala { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--navy-l); background: color-mix(in srgb, var(--navy-l) 10%, transparent); padding: 3px 10px; border-radius: 999px; display: inline-block; }
.stato-rail { display: flex; gap: 4px; height: 6px; margin: 2px 0 14px; }
.stato-rail i { flex: 1; border-radius: 3px; background: var(--rule); transition: background var(--t-med); }
.stato-rail i.on { background: var(--navy-l); }
.stato-rail i.now { background: var(--petrolio); }

/* =============================================================== il sigillo */
.sigillo { position: relative; display: grid; place-items: center; width: 280px; height: 280px; flex: 0 0 auto; color: var(--navy-l); }
.sigillo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sigillo .l { position: relative; z-index: 1; font-family: var(--display); font-weight: 700; line-height: 1; font-size: 92px; letter-spacing: -.02em; }
.sigillo.s { width: 112px; height: 112px; }
.sigillo.s .l { font-size: 36px; }
.sigillo.xs { width: 64px; height: 64px; }
.sigillo.xs .l { font-size: 21px; }
.sigillo.g-a { color: var(--green); }
.sigillo.g-b { color: var(--amber); }
.sigillo.g-c { color: var(--red); }
.sigillo.incidi svg .tr { stroke-dasharray: 1; stroke-dashoffset: 1; animation: incidi 1.7s cubic-bezier(.3,.1,.2,1) forwards; }
.sigillo.incidi svg .tr:nth-child(3n) { animation-delay: .14s; }
.sigillo.incidi svg .tr:nth-child(3n+1) { animation-delay: .28s; }
.sigillo.incidi .l { animation: timbro .5s 1.25s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes incidi { to { stroke-dashoffset: 0; } }
@keyframes timbro { from { opacity: 0; transform: scale(1.35); } to { opacity: 1; transform: none; } }

/* ============================================= «dal numero alla prova» */
.fonte { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 11px; padding: 0; border: 1px solid var(--navy-l); background: transparent; color: var(--navy-l); font: 600 11.5px var(--font); cursor: pointer; vertical-align: super; margin-left: 4px; }
.fonte:hover, .fonte[aria-expanded="true"] { background: var(--navy-l); color: var(--card); }
.fonte-pop { position: absolute; z-index: 60; width: 340px; background: #13254A; color: #E9EEEC; border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow-l); font-size: 14px; line-height: 1.5; }
.fonte-pop b { display: block; color: #FBFCFB; font-size: 15px; margin-bottom: 6px; }
.fonte-pop p { margin: 0 0 8px; }
.fonte-pop p:last-child { margin: 0; }
.fonte-pop a { color: #F4B08A; }

/* =============================================== posizione nel settore */
.quintili { display: flex; flex-direction: column; gap: 10px; }
.quintili .q { display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(0, 1fr) 118px; gap: 16px; align-items: center; font-size: 14.5px; }
.quintili .barre { display: flex; gap: 4px; }
.quintili .barre i { flex: 1; height: 10px; border-radius: 3px; background: var(--rule); }
.quintili .barre i.on { background: var(--navy-l); }
.quintili .q.debole .barre i.on { background: var(--amber); }
.quintili .v { font-size: 13.5px; color: var(--steel); }

/* ============================================== peso dei punti di attenzione */
.peso { font-size: 13px; font-weight: 600; color: var(--steel); white-space: nowrap; }
.peso.rilevante { color: var(--amber); }
.peso.bloccante { color: var(--red); }
.punti { display: flex; flex-direction: column; }
.punti .p { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--rule); font-size: 15px; }
.punti .p .azione { color: var(--petrolio); }

/* =============================================================== tabelle */
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
thead th { text-align: left; font-size: 13px; color: var(--steel); font-weight: 600; padding: 10px 14px; border-bottom: 1.5px solid var(--rule-d); background: var(--card); position: sticky; top: 0; z-index: 2; }
tbody td { padding: 13px 14px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
tbody tr { transition: background var(--t-fast); }
tbody tr:hover { background: color-mix(in srgb, var(--navy-l) 4%, transparent); }
tbody tr.cliccabile { cursor: pointer; }
td.num, th.num { text-align: right; white-space: nowrap; }
td .mono, td.mono, td b.mono { white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
.sortable { cursor: pointer; user-select: none; }
.sortable:hover { color: var(--ink); }
.sortable.act { color: var(--navy-l); }
.sortable .ar { display: none; }
.sortable.act::after { content: ' ↓'; }
.sortable.act.desc::after { content: ' ↑'; }

/* ============================================================ moduli input */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.field .hint { font-size: 13px; color: var(--steel); font-weight: 400; margin-top: 5px; }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], input[type=tel], input[type=url], select, textarea {
  width: 100%; font-family: var(--font); font-size: 15.5px; font-weight: 500;
  min-height: 46px; padding: 10px 14px; border: 1px solid var(--rule-d);
  border-radius: var(--radius-s); background: var(--card); color: var(--ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--navy-l); box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy-l) 18%, transparent); }
input.err, select.err { border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 14%, transparent); }
input::placeholder, textarea::placeholder { color: var(--steel-l); font-weight: 400; }
textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
input[type=range] { accent-color: var(--navy-l); width: 100%; min-height: 0; }
input[type=checkbox], input[type=radio] { accent-color: var(--navy-l); width: 18px; height: 18px; min-height: 0; }
.seg { display: inline-flex; background: color-mix(in srgb, var(--steel) 10%, transparent); border-radius: 12px; padding: 4px; gap: 2px; }
.seg button { border: none; background: none; font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--steel); min-height: 36px; padding: 0 14px; border-radius: 9px; cursor: pointer; transition: all var(--t-fast); }
.seg button.on { background: var(--card); color: var(--ink); }
.tiles { display: grid; gap: 12px; }
.tile { border: 1px solid var(--rule-d); border-radius: 16px; padding: 16px 18px; cursor: pointer; background: var(--card); transition: all var(--t-fast); position: relative; }
.tile:hover { border-color: var(--navy-l); }
.tile.on { border-color: var(--navy-l); box-shadow: 0 0 0 1.5px var(--navy-l) inset; }
.tile.on::after { content: ''; position: absolute; top: 14px; right: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--navy-l); }
.tile b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.tile span { font-size: 13.5px; color: var(--steel); }
.roles { display: flex; gap: 10px; flex-wrap: wrap; }
.role { border: 1px solid var(--rule-d); border-radius: var(--radius-s); min-height: 44px; padding: 10px 16px; cursor: pointer; font-size: 14.5px; font-weight: 600; transition: all var(--t-fast); background: var(--card); }
.role.on { border-color: var(--navy-l); background: color-mix(in srgb, var(--navy-l) 8%, var(--card)); color: var(--navy-l); }

/* ============================================================ progressione */
.stepbar { display: flex; align-items: center; gap: 0; margin-bottom: 26px; flex-wrap: wrap; row-gap: 10px; }
.wizard-step { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--steel); font-weight: 500; padding-right: 12px; }
.stepbar .wizard-step { display: flex; }
.wizard-step .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--steel) 13%, transparent); color: var(--steel); font-size: 13px; font-weight: 600; transition: all var(--t-med); }
.wizard-step.on { color: var(--ink); font-weight: 600; }
.wizard-step.on .n { background: var(--navy-l); color: var(--card); }
.wizard-step.done .n { background: var(--petrolio); color: #fff; }
.wizard-step.done .n::after { content: '✓'; }
.wizard-step.done .n span { display: none; }
.wizard-step::after { content: ''; width: 28px; height: 1px; background: var(--rule-d); margin-left: 6px; }
.wizard-step:last-child::after { display: none; }
.progress { height: 8px; border-radius: 4px; background: var(--rule); overflow: hidden; }
.progress i { display: block; height: 100%; border-radius: 4px; background: var(--petrolio); transition: width .7s cubic-bezier(.34,1.2,.36,1); }
.progress.acc i { background: var(--orange); }
.progress.ok i  { background: var(--green); }

/* ============================================================= documenti */
.doclist { display: flex; flex-direction: column; gap: 0; }
.docitem { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: transparent; transition: background var(--t-fast); }
.docitem:last-child { border-bottom: 0; }
.docitem .ico, .docitem .st { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: color-mix(in srgb, var(--steel) 12%, transparent); color: var(--steel); }
.docitem b { font-size: 14.5px; font-weight: 600; display: block; }
.docitem .nm { flex: 1; min-width: 0; }
.docitem .nm span, .docitem .meta { font-size: 13px; color: var(--steel); display: block; }
.docitem .sp { flex: 1; }
.docitem.ok .ico, .docitem.ok .st { background: color-mix(in srgb, var(--petrolio) 16%, transparent); color: var(--petrolio); }
.docitem.ko .ico, .docitem.ko .st { background: var(--red-t); color: var(--red); }
.docitem.run .ico, .docitem.run .st { background: color-mix(in srgb, var(--navy-l) 14%, transparent); color: var(--navy-l); }
.docitem.opt { opacity: .78; }
.drop { border: 1.5px dashed var(--rule-d); border-radius: var(--radius); padding: 32px 20px; text-align: center; cursor: pointer; transition: all var(--t-med); background: color-mix(in srgb, var(--paper) 40%, var(--card)); }
.drop:hover, .drop.on { border-color: var(--navy-l); background: color-mix(in srgb, var(--navy-l) 6%, var(--card)); }
.drop b { display: block; font-size: 15.5px; margin-bottom: 3px; }
.drop span { font-size: 13.5px; color: var(--steel); }

/* ============================================================ conversazione */
.chat { display: flex; flex-direction: column; gap: 12px; padding: 4px; }
.msg { max-width: 78%; padding: 12px 16px; border-radius: 18px; font-size: 14.5px; line-height: 1.55; position: relative; }
.msg .who { font-size: 12.5px; font-weight: 600; margin-bottom: 4px; opacity: .8; }
.msg .quando { font-size: 12px; opacity: .65; margin-top: 5px; }
.msg.them { align-self: flex-start; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); border-bottom-left-radius: 6px; }
.msg.me { align-self: flex-end; color: #FBFCFB; border-bottom-right-radius: 6px; background: #1D3E85; }
.msg.sistema { align-self: center; max-width: 92%; text-align: center; background: color-mix(in srgb, var(--steel) 9%, transparent); color: var(--steel); font-size: 13px; border-radius: 12px; }

/* ============================================================== schede */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rule-d); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
/* V6: con molte schede le etichette non si troncano: vanno a capo su una seconda riga */
.tabs { flex-wrap: wrap; row-gap: 0; }
.tabs button { flex: 0 0 auto; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { border: none; background: none; font-family: var(--font); font-size: 14.5px; font-weight: 500; color: var(--steel); min-height: 44px; padding: 0 16px; cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--t-fast); }
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--ink); border-bottom-color: var(--navy-l); font-weight: 600; }
.tabs button .pip { font-size: 12px; margin-left: 6px; background: color-mix(in srgb, var(--steel) 14%, transparent); padding: 1px 7px; border-radius: 20px; }
.tabpane { display: none; animation: sale .3s cubic-bezier(.4,0,.2,1); }
.tabpane.on { display: block; }
@keyframes sale { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================ cronologia */
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--rule); }
.tl { position: relative; padding: 0 0 18px; }
.tl:last-child { padding-bottom: 0; }
.tl::before { content: ''; position: absolute; left: -22px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--card); border: 2px solid var(--rule-d); }
.tl.done::before { background: var(--petrolio); border-color: var(--petrolio); }
.tl.now::before { background: var(--navy-l); border-color: var(--navy-l); box-shadow: 0 0 0 4px color-mix(in srgb, var(--navy-l) 20%, transparent); }
.tl b, .tl .txt b { display: block; font-size: 14.5px; font-weight: 600; }
.tl span, .tl .txt span { font-size: 13px; color: var(--steel); }

/* ============================================================= banche */
.bank-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 16px; background: var(--card); transition: all var(--t-fast); cursor: pointer; }
tr.bank-row { display: table-row; border: 0; border-radius: 0; padding: 0; }
.bank-row:hover { border-color: var(--navy-l); }
.bank-row.on { border-color: var(--navy-l); box-shadow: 0 0 0 1.5px var(--navy-l) inset; }
.bank-row.ko { opacity: .64; }
.bank-logo { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 15px; background: color-mix(in srgb, var(--navy-l) 12%, transparent); color: var(--navy-l); font-family: var(--display); }
.bank-row .sp { flex: 1; min-width: 0; }
.bank-row b { display: block; font-size: 15px; font-weight: 600; }
.bank-row .meta { font-size: 13px; color: var(--steel); }

/* ============================================================ contenitori */
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(11,22,41,.55); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; padding: 22px; }
.modal.on { display: flex; animation: fade .18s ease; }
.modal .box { background: var(--card); border-radius: 24px; max-width: 640px; width: 100%; max-height: 88vh; overflow: auto; box-shadow: var(--shadow-l); animation: pop .24s cubic-bezier(.34,1.2,.5,1); }
.modal .box.lg { max-width: 920px; }
.modal .box.sm { max-width: 460px; }
.modal .box > header, .modal .box > .h { padding: 20px 24px 8px; display: flex; align-items: center; gap: 12px; }
.modal .box > header h3, .modal .box > .h h3 { margin: 0; font-family: var(--display); font-size: 25px; font-weight: 600; }
.modal .box > .corpo, .modal .box > .b { padding: 12px 24px 20px; }
.modal .box > footer, .modal .box > .f { padding: 14px 24px 20px; display: flex; gap: 10px; justify-content: flex-end; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(12px); } }
.empty { text-align: center; padding: 44px 24px; }
.empty .circle { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; font-size: 22px; background: color-mix(in srgb, var(--navy-l) 10%, transparent); color: var(--navy-l); }
.empty h3 { margin: 0 0 6px; font-family: var(--display); font-size: 24px; font-weight: 600; }
.empty p { margin: 0 auto 16px; color: var(--steel); font-size: 14.5px; max-width: 46ch; }

/* ============================================================ barra alta */
.avatar { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 6px; border-radius: 12px; background: transparent; border: 0; font: inherit; color: inherit; text-align: left; }
.avatar:hover { background: color-mix(in srgb, var(--steel) 9%, transparent); }
.avatar .circle { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; background: #13254A; color: #FBFCFB; }
.avatar .who { font-size: 14px; font-weight: 600; line-height: 1.25; }
.avatar .who span { display: block; font-size: 12.5px; color: var(--steel); font-weight: 400; }
.bell { position: relative; cursor: pointer; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--ink); background: transparent; border: 0; transition: background var(--t-fast); }
.bell:hover { background: color-mix(in srgb, var(--steel) 11%, transparent); }
.bell svg { width: 20px; height: 20px; }
.bell b { position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--orange); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 5px; }
.wallet-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; min-height: 38px; padding: 0 14px; border-radius: 999px; background: var(--card); color: var(--ink); cursor: pointer; transition: all var(--t-fast); border: 0; font-family: var(--font); }
.wallet-chip .et { font-weight: 500; color: var(--steel); font-size: 13px; }
.wallet-chip:hover { box-shadow: inset 0 0 0 1px var(--rule-d); }
.wallet-chip.basso { background: var(--amber-t); color: var(--amber); }
.wallet-chip .mini { display: none; }
/* V6 — residuo del piano in alto: valutazioni, fascicoli, agente */
.consumi-chip { display: inline-flex; align-items: center; gap: 14px; min-height: 38px; padding: 0 14px; border-radius: 999px; background: var(--card); color: var(--ink); text-decoration: none; font-size: 13px; }
.consumi-chip[hidden] { display: none; }
.consumi-chip:hover { box-shadow: inset 0 0 0 1px var(--rule-d); }
.consumi-chip .cm { display: grid; grid-template-columns: auto auto; column-gap: 6px; align-items: baseline; line-height: 1.15; }
.consumi-chip .et { color: var(--steel); font-weight: 500; font-size: 12px; }
.consumi-chip b { font-weight: 650; font-variant-numeric: tabular-nums; }
.consumi-chip i { grid-column: 1 / 3; display: block; height: 4px; margin-top: 3px; border-radius: 4px; background: color-mix(in srgb, var(--steel) 18%, transparent); overflow: hidden; }
.consumi-chip i em { display: block; height: 100%; border-radius: 4px; background: var(--navy-l, var(--navy)); }
.consumi-chip .poco i em { background: var(--orange); }
.consumi-chip .zero b { color: var(--red); }
.cerca { display: flex; align-items: center; gap: 10px; background: var(--card); border: 0; border-radius: 12px; min-height: 42px; padding: 0 14px; min-width: 300px; cursor: text; color: var(--steel); font-size: 14px; font-family: var(--font); transition: all var(--t-fast); }
.cerca:hover { box-shadow: inset 0 0 0 1px var(--rule-d); }
.cerca svg { width: 17px; height: 17px; }
.cerca kbd { margin-left: auto; font-family: var(--font); font-size: 12px; background: var(--paper); border-radius: 6px; padding: 1px 7px; color: var(--steel); }
.top .icona { width: 42px; height: 42px; border-radius: 12px; border: 0; background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.top .icona:hover { background: color-mix(in srgb, var(--steel) 11%, transparent); }
.top .icona.solo-mobile { display: none; }
.top .icona svg { width: 20px; height: 20px; }

/* ============================================================= accesso */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; }
.auth .lato { background: #13254A; color: #fff; padding: 56px 60px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth .lato .rosetta { position: absolute; right: -200px; bottom: -200px; width: 680px; height: 680px; opacity: .3; pointer-events: none; color: #8FB0EA; }
.auth .lato .rosetta svg { width: 100%; height: 100%; }
.auth .lato > *:not(.rosetta) { position: relative; }
.auth .lato h2 { font-family: var(--display); font-size: 46px; font-weight: 600; line-height: 1.08; margin: 0 0 16px; max-width: 14ch; }
.auth .lato p { font-size: 17px; color: #C9D5E6; max-width: 40ch; line-height: 1.6; }
.auth .modulo { display: flex; align-items: center; justify-content: center; padding: 40px 32px; background: var(--card); }
.auth .modulo .box { width: 100%; max-width: 380px; }
.auth .modulo h1 { font-family: var(--display); font-size: 36px; font-weight: 600; margin: 0 0 6px; }
.auth .modulo .sub { color: var(--steel); font-size: 15px; margin: 0 0 26px; }

/* ============================================================== attese */
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--steel) 30%, transparent); border-top-color: var(--navy-l); animation: gira .7s linear infinite; display: inline-block; vertical-align: -3px; }
.spin.dark { border-top-color: #fff; border-color: rgba(255,255,255,.3); }
@keyframes gira { to { transform: rotate(360deg); } }
.skel { background: linear-gradient(90deg, color-mix(in srgb, var(--steel) 10%, transparent) 25%, color-mix(in srgb, var(--steel) 16%, transparent) 37%, color-mix(in srgb, var(--steel) 10%, transparent) 63%); background-size: 400% 100%; animation: onda 1.35s ease-in-out infinite; border-radius: 6px; height: 14px; margin: 8px 0; }
@keyframes onda { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* =========================================================== notifiche */
.toaster { position: fixed; bottom: 22px; right: 22px; z-index: 200; display: flex; flex-direction: column; gap: 10px; max-width: 400px; }
.toast { background: #13254A; color: #E9EEEC; border: 0; border-radius: 16px; box-shadow: var(--shadow-l); padding: 14px 18px; font-size: 14px; animation: entra .28s cubic-bezier(.34,1.2,.5,1); }
.toast b { display: block; font-weight: 600; margin-bottom: 2px; color: #FBFCFB; }
.toast p { margin: 0; color: #C9D5E6; font-size: 13.5px; }
.toast.ok b::before  { content: '● '; color: #6FC2C9; }
.toast.ko b::before  { content: '● '; color: #F08A80; }
.toast.att b::before { content: '● '; color: #E9AE5C; }
.toast.esce { animation: esce .22s forwards; }
@keyframes entra { from { opacity: 0; transform: translateY(12px); } }
@keyframes esce  { to { opacity: 0; transform: translateY(12px); } }

/* ============================================ palette comandi (Cmd+K) */
.palette { position: fixed; inset: 0; z-index: 150; display: none; background: rgba(11,22,41,.5); backdrop-filter: blur(3px); padding: 12vh 20px 20px; justify-content: center; align-items: flex-start; }
.palette.on { display: flex; animation: fade .16s; }
.palette .box { width: 100%; max-width: 600px; background: var(--card); border-radius: 22px; box-shadow: var(--shadow-l); overflow: hidden; animation: pop .22s cubic-bezier(.34,1.2,.5,1); }
.palette input { border: none; border-bottom: 1px solid var(--rule); border-radius: 0; font-size: 17px; min-height: 60px; padding: 0 22px; }
.palette input:focus { box-shadow: none; border-color: var(--rule); }
.palette .voci { max-height: 360px; overflow: auto; padding: 8px; }
.palette .voce { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px; border-radius: 12px; cursor: pointer; font-size: 15px; }
.palette .voce .ico { width: 18px; height: 18px; display: grid; place-items: center; opacity: .8; }
.palette .voce .ico svg { width: 18px; height: 18px; }
.palette .voce .nota { margin-left: auto; font-size: 13px; color: var(--steel-l); }
.palette .voce.on, .palette .voce:hover { background: color-mix(in srgb, var(--navy-l) 9%, transparent); }

/* ======================================================== portale cliente */
.cliente-shell { max-width: 560px; margin: 0 auto; padding: 22px 18px 60px; }
.cliente-hero { background: #13254A; color: #fff; border-radius: 24px; padding: 28px 24px; position: relative; overflow: hidden; margin-bottom: 18px; }
.cliente-hero h1 { font-family: var(--display); font-size: 30px; font-weight: 600; margin: 0 0 6px; position: relative; line-height: 1.1; }
.cliente-hero p { margin: 0; color: #C9D5E6; font-size: 15px; position: relative; }
.anello { position: relative; width: 84px; height: 84px; }
.anello svg { transform: rotate(-90deg); }
.anello .val { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: 22px; font-weight: 600; }

/* ============================================ verifica di bancabilita' (v5) */
.esito { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 52px; align-items: start; background: var(--card); border-radius: 28px; padding: 40px 44px; }
.esito .quando { margin: 0; font-size: 14.5px; color: var(--steel); }
.esito h2 { margin: 6px 0 0; font-family: var(--display); font-size: 46px; font-weight: 600; line-height: 1.05; text-wrap: balance; }
.fatti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; border-top: 1px solid var(--rule); padding-top: 22px; margin-top: 24px; }
.fatti .f b { display: block; font-family: var(--display); font-size: clamp(28px, 2.6vw, 38px); font-weight: 600; line-height: 1.02; white-space: nowrap; }
.fatti .f span { display: block; font-size: 14.5px; color: var(--steel); line-height: 1.4; margin-top: 6px; }
.modulo-verifica { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .8fr) 190px; gap: 16px; align-items: end; margin-bottom: 26px; }
.modulo-verifica .field { margin: 0; position: relative; }
.modulo-verifica .costo { font-size: 13px; color: var(--steel); margin-bottom: 6px; display: block; }
.suggerimenti { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; background: var(--card); border-radius: 16px; box-shadow: var(--shadow-l); padding: 6px; }
.suggerimenti button { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px; text-align: left; border: 0; background: transparent; min-height: 48px; padding: 0 14px; border-radius: 12px; font: 500 15px var(--font); color: var(--ink); cursor: pointer; }
.suggerimenti button span { color: var(--steel); font-size: 13.5px; }
.suggerimenti button:hover, .suggerimenti button.on { background: color-mix(in srgb, var(--navy-l) 9%, transparent); }
.nota-onesta { font-size: 13.5px; color: var(--steel); line-height: 1.5; max-width: 110ch; margin: 18px 0 0; }

/* ================================================================ varie */
.hidden { display: none !important; }
.solo-mobile { display: none; }
.trial, .preview-note { font-size: 13px; color: var(--steel); padding: 10px 14px; background: color-mix(in srgb, var(--steel) 7%, transparent); border-radius: 12px; }
.dimostrativo { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--petrolio); background: color-mix(in srgb, var(--petrolio) 12%, transparent); border-radius: 999px; padding: 3px 10px; }
hr { border: none; border-top: 1px solid var(--rule); margin: 20px 0; }
.sep { height: 1px; background: var(--rule); margin: 18px 0; }
.pill-group { display: flex; flex-wrap: wrap; gap: 6px; }
.prob .bar { height: 8px; border-radius: 4px; background: var(--rule); overflow: hidden; }
.prob .bar i { display: block; height: 100%; background: var(--navy-l); }

/* =========================================================== reattivita' */
@media (max-width: 1280px) {
  .modulo-verifica { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .esito { grid-template-columns: 1fr; justify-items: start; }
}
@media (max-width: 1180px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-2-1, .g-1-2 { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .g3, .fatti { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth { grid-template-columns: 1fr; }
  .auth .lato { display: none; }
}
@media (max-width: 760px) {
  :root { --sidebar: 0px; }
  .side { position: fixed; left: 0; top: 0; width: 272px; flex-basis: 272px; transform: translateX(-100%); transition: transform var(--t-med); box-shadow: var(--shadow-l); }
  .side.aperta { transform: none; }
  .solo-mobile, .top .icona.solo-mobile { display: inline-grid; }
  .page { padding: 12px 16px 40px; }
  .page-head h1, .page-head h2 { font-size: 32px; }
  .g2, .g3, .g4, .fatti, .modulo-verifica { grid-template-columns: 1fr; }
  .top { padding: 0 12px; }
  .top h1, .cerca, .avatar .who, .wallet-chip .et { display: none; }
  .consumi-chip { display: none; }
  .msg { max-width: 90%; }
  .toaster { left: 14px; right: 14px; max-width: none; }
  .esito { padding: 24px 20px; gap: 20px; }
  .esito h2 { font-size: 34px; }
  .sigillo { width: 200px; height: 200px; }
  .sigillo .l { font-size: 64px; }
  .punti .p { grid-template-columns: 1fr; gap: 4px; }
  .quintili .q { grid-template-columns: 1fr; gap: 6px; }
}
@media print {
  .side, .top, .toaster, .btn { display: none !important; }
  .page { padding: 0; max-width: none; }
  .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .sigillo.incidi svg .tr { stroke-dashoffset: 0; }
}

/* inchiostri del sigillo: classi usate dall'SVG generato in ui.js */
.sigillo svg .b1, .verdetto .lettera svg .b1, .rosetta svg .b1 { stroke: var(--sig-1); }
.sigillo svg .b2, .verdetto .lettera svg .b2, .rosetta svg .b2 { stroke: var(--sig-2); }
.sigillo svg .an, .verdetto .lettera svg .an { stroke: var(--sig-1); }
.sigillo svg .fondo, .verdetto .lettera svg .fondo { fill: var(--sig-fondo); }
.rosetta svg .b1, .rosetta svg .b2, .rosetta svg .an { stroke: currentColor; }
.rosetta svg .fondo { fill: none; }

.docrow { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--rule); }
.docrow:last-child { border-bottom: 0; }

/* ================================================================ l'agente */
.ag-griglia { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.ag-chat-card { display: flex; flex-direction: column; height: calc(100vh - 220px); min-height: 560px; }
.ag-testa { display: flex; align-items: center; gap: 12px; padding: 18px 24px 12px; border-bottom: 1px solid var(--rule); }
.ag-testa h3 { margin: 0; font-size: 17px; font-weight: 600; }
.ag-testa select { max-width: 340px; min-height: 40px; margin-left: auto; }
#ag-chat { flex: 1; overflow-y: auto; padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; scroll-behavior: smooth; }
.ag-msg { max-width: 84%; animation: sale .25s ease; }
.ag-msg.io { align-self: flex-end; background: #1D3E85; color: #FBFCFB; padding: 12px 16px; border-radius: 18px 18px 6px 18px; font-size: 15px; }
.ag-msg.ag { align-self: flex-start; background: var(--paper); padding: 16px 18px; border-radius: 18px 18px 18px 6px; }
.ag-msg.errore { background: var(--red-t); }
.ag-testo { font-size: 15px; line-height: 1.55; white-space: pre-line; }
.ag-azioni { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.ag-az { display: grid; grid-template-columns: 34px minmax(0, 1fr) 26px; gap: 12px; align-items: start; background: var(--card);
  border-radius: 14px; padding: 12px 14px; opacity: 0; animation: ag-entra .42s cubic-bezier(.2,.9,.3,1) forwards;
  animation-delay: calc(var(--i) * 380ms); }
.ag-az .ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--navy-l) 12%, transparent); color: var(--navy-l); }
.ag-az .ico svg, .ag-az .ok svg { width: 17px; height: 17px; }
.ag-az b { display: block; font-size: 14.5px; font-weight: 600; }
.ag-az span { display: block; font-size: 13.5px; color: var(--steel); line-height: 1.45; }
.ag-az .ok { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--petrolio); color: #fff;
  transform: scale(0); animation: ag-spunta .3s cubic-bezier(.2,1.6,.4,1) forwards; animation-delay: calc(var(--i) * 380ms + 320ms); }
.ag-bottoni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ag-piede { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.ag-piede:empty { display: none; }
@keyframes ag-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ag-spunta { to { transform: scale(1); } }
.ag-pensa { display: flex; align-items: center; gap: 6px; }
.ag-pensa i { width: 8px; height: 8px; border-radius: 50%; background: var(--navy-l); animation: ag-punto 1s infinite; }
.ag-pensa i:nth-child(2) { animation-delay: .15s; } .ag-pensa i:nth-child(3) { animation-delay: .3s; }
.ag-pensa span { margin-left: 8px; font-size: 14px; color: var(--steel); }
@keyframes ag-punto { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.ag-sim { margin-top: 12px; background: var(--card); border-radius: 14px; overflow: hidden; font-size: 14px; }
.ag-sim thead th { background: var(--card); }
.ag-lista { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.ag-lista a { display: grid; grid-template-columns: 90px minmax(0, 1fr) 110px auto; gap: 12px; align-items: center; background: var(--card);
  border-radius: 12px; padding: 10px 14px; color: var(--ink); font-size: 14px; text-decoration: none; }
.ag-lista a:hover { box-shadow: inset 0 0 0 1px var(--navy-l); }
.ag-input { border-top: 1px solid var(--rule); padding: 14px 20px 16px; }
.ag-input .riga { display: flex; gap: 10px; }
.ag-input input { flex: 1; min-height: 52px; font-size: 16px; border-radius: 14px; }
#ag-voce { width: 52px; min-height: 52px; padding: 0; border-radius: 14px; }
#ag-voce.ascolta { background: var(--orange); border-color: var(--orange); color: #fff; animation: puls 1.2s infinite; }
#ag-sugg { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip { border: 1px solid var(--rule-d); background: var(--card); color: var(--ink); border-radius: 999px; min-height: 36px; padding: 0 14px;
  font: 500 13.5px var(--font); cursor: pointer; text-align: left; }
.chip:hover { border-color: var(--navy-l); color: var(--navy-l); }
.ag-kpi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ag-kpi b { display: block; font-size: 34px; line-height: 1; }
.ag-kpi span { font-size: 13.5px; color: var(--steel); }
.ag-brief-testo { font-size: 14.5px; line-height: 1.55; white-space: pre-line; margin: 16px 0 8px; }
.docitem.nuovo { animation: ag-nuovo 1.6s ease; }
@keyframes ag-nuovo { 0% { background: color-mix(in srgb, var(--petrolio) 20%, transparent); } 100% { background: transparent; } }
@media (max-width: 1100px) { .ag-griglia { grid-template-columns: 1fr; } .ag-chat-card { height: 70vh; } }
@media (max-width: 760px) { .ag-msg { max-width: 96%; } .ag-lista a { grid-template-columns: 1fr auto; } .ag-testa { flex-wrap: wrap; } .ag-testa select { max-width: 100%; margin-left: 0; } }

/* passi del percorso di apertura pratica */
.stepbar .st { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--steel); font-weight: 500; }
.stepbar .st .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600;
  background: color-mix(in srgb, var(--steel) 13%, transparent); color: var(--steel); transition: all var(--t-med); }
.stepbar .st.on { color: var(--ink); font-weight: 600; }
.stepbar .st.on .n { background: var(--navy-l); color: var(--card); }
.stepbar .st.done .n { background: var(--petrolio); color: #fff; }
.stepbar .sep { flex: 1; min-width: 18px; max-width: 64px; height: 2px; background: var(--rule-d); margin: 0 10px; border-radius: 1px; }
.stepbar .sep.done { background: var(--petrolio); }
.wizard-step[id^="s"] { display: none; }
.wizard-step[id^="s"].on { display: block; }
.wizard-step[id^="s"]::after { display: none; }

/* ============================================ micro-interazioni (v5) */
.btn, .chip, .side a, .tile, .role, .seg button, .tabs button, .suggerimenti button, .ag-lista a { position: relative; overflow: hidden; isolation: isolate; }
.inchiostro { position: absolute; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, color-mix(in srgb, currentColor 22%, transparent) 0%, transparent 60%);
  transform: scale(0); animation: inchiostro .62s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes inchiostro { to { transform: scale(1); opacity: 0; } }
.btn:active { transform: translateY(1px) scale(.985); }

/* cambio pagina: dissolvenza morbida, la barra laterale resta ferma */
@view-transition { navigation: auto; }
.side { view-transition-name: menu; }
.top { view-transition-name: testata; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; animation-timing-function: cubic-bezier(.4,0,.2,1); }

/* il timbro di delibera */
.timbro-velo { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  background: color-mix(in srgb, var(--paper) 72%, transparent); backdrop-filter: blur(4px); animation: fade .2s ease; cursor: pointer; }
.timbro-velo.esce { animation: esce-velo .38s ease forwards; }
@keyframes esce-velo { to { opacity: 0; } }
.timbro { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.timbro .sigillo { width: 300px; height: 300px; }
.timbro b { font-family: var(--display); font-size: 46px; font-weight: 600; color: var(--ink); animation: timbro .5s 1.1s cubic-bezier(.2,1.4,.4,1) both; }
.timbro span { font-size: 16px; color: var(--steel); animation: fade .4s 1.4s both; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* accesso: la rosetta si incide una volta, lentamente */
.auth .lato .rosetta.incidi svg .tr { stroke-dasharray: 1; stroke-dashoffset: 1; animation: incidi 3.2s cubic-bezier(.3,.1,.2,1) forwards; }
.auth .lato .rosetta.incidi svg .tr:nth-child(2n) { animation-delay: .25s; }
.auth .lato .rosetta svg .tr { stroke-width: 1.1; }
.auth-fatti { display: flex; gap: 34px; margin-top: 36px; flex-wrap: wrap; }
.auth-fatti b { display: block; font-family: var(--display); font-size: 30px; font-weight: 600; color: #FBFCFB; }
.auth-fatti span { font-size: 13.5px; color: #9FB3D6; }
@media (prefers-reduced-motion: reduce) { .auth .lato .rosetta.incidi svg .tr { stroke-dashoffset: 0; } }
.auth .lato .rosetta svg .tr { stroke-width: .5; }
.auth .lato .rosetta svg .an { stroke-width: .4; }
.auth .lato .rosetta { opacity: .38; }
.kpi b { white-space: nowrap; font-size: clamp(26px, 2.3vw, 34px); }

/* telefono: le tabelle scorrono dentro il loro riquadro, la pagina no */
@media (max-width: 760px) {
  .card table, .card-b table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .card table thead, .card table tbody { display: table; width: 100%; min-width: 560px; }
  .page-head .row.between { flex-direction: column; align-items: flex-start; gap: 14px; }
  .page-head .row.between .row { flex-wrap: wrap; }
  .grid.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.grid > * { min-width: 0; }
@media (max-width: 760px) {
  .grid.g-2-1, .grid.g-1-2, .grid.g2, .grid.g3 { grid-template-columns: minmax(0, 1fr); }
  .seg { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .seg button { flex: 0 0 auto; }
}
@media (max-width: 760px) {
  .tabs, #schede { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .tabs button, #schede button { flex: 0 0 auto; white-space: nowrap; }
}

/* =====================================================================
   MARCHIO INNOVACREDIT.AI (v5.1)
   Colori presi dal logo ufficiale: blu #183C84, arancio #F09450.
   Un solo carattere, Plus Jakarta Sans: geometrico come il logo, con
   cifre tabellari per gli importi. Ospitato sul nostro server.
   ===================================================================== */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/plus-jakarta-sans.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
}
:root {
  --navy: #183C84; --navy-l: #183C84; --navy-d: #0E2150; --navy-x: #2A55B0;
  --orange: #F09450; --orange-d: #E07B33; --orange-t: #FDEEE2;
  --petrolio: #127A5C;
  --green: #127A5C; --green-t: #E3F2EC;
  --amber: #A5590A; --amber-t: #FCEFDC;
  --red: #B42318; --red-t: #FBE8E6;
  --ink: #0F1B3D; --paper: #F3F5F9; --card: #FFFFFF;
  --steel: #4A5670; --steel-l: #6D7890; --rule: #DDE2EC; --rule-d: #C9D1DF;
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Plus Jakarta Sans', system-ui, sans-serif;
  --sig-1: #183C84; --sig-2: #F09450; --sig-fondo: #FFFFFF;
  --shadow-l: 0 24px 64px -30px rgba(14,33,80,.40);
}
[data-tema="scuro"] {
  --ink: #E8EDF7; --paper: #0A1430; --card: #111E40; --steel: #A8B3CB; --steel-l: #8391AE;
  --rule: #22305A; --rule-d: #2E3D6B;
  --navy: #9DB7F2; --navy-l: #9DB7F2; --navy-d: #070F26; --navy-x: #B9CCF6;
  --orange: #F4A468; --orange-d: #F09450; --orange-t: #3A2414;
  --petrolio: #5CC9A4; --green: #5CC9A4; --green-t: #0E2A22;
  --sig-1: #9DB7F2; --sig-2: #F4A468; --sig-fondo: #111E40;
}
body { font-feature-settings: "tnum" 1, "lnum" 1; letter-spacing: -.003em; }
.side { background: #0E2150; }
.side .brand { padding: 2px 14px 22px; }
.side .brand img { width: 188px; height: auto; display: block; }
.btn.cta { background: var(--orange); border-color: var(--orange); color: #0E2150; font-weight: 700; }
.btn.cta:hover { background: var(--orange-d); border-color: var(--orange-d); color: #0E2150; }
[data-tema="scuro"] .btn.cta, [data-tema="scuro"] .btn.cta:hover { color: #0A1430; }
.btn.primario { background: var(--navy); border-color: var(--navy); }

/* titoli e cifre: peso deciso, spaziatura stretta, misure ricalibrate sul nuovo carattere */
.page-head h1 { font-weight: 800; font-size: 34px; letter-spacing: -.028em; line-height: 1.1; }
.esito h2 { font-weight: 800; font-size: 38px; letter-spacing: -.028em; }
.auth .lato h2 { font-weight: 800; font-size: 40px; letter-spacing: -.03em; line-height: 1.1; }
.auth .modulo h1 { font-weight: 800; font-size: 30px; letter-spacing: -.025em; }
.kpi b { font-weight: 750; font-size: clamp(24px, 2.1vw, 30px); letter-spacing: -.025em; }
.fatti .f b { font-weight: 800; font-size: clamp(24px, 2.3vw, 34px); letter-spacing: -.03em; }
.cifra, .side .foot-note .cifra, .auth-fatti b, .timbro b, .empty h3, .verdetto h4,
.modal .box > header h3, .modal .box > .h h3, .cliente-hero h1, .anello .val, .bank-logo { font-weight: 750; letter-spacing: -.02em; }
.timbro b { font-size: 40px; }
.sigillo .l { font-weight: 800; font-size: 78px; letter-spacing: -.04em; color: var(--navy); }
.verdetto .lettera { font-weight: 800; letter-spacing: -.03em; color: var(--navy); }
.card-h h3, h3 { letter-spacing: -.012em; }
.auth .lato { background: #0E2150; }
.auth .lato .marchio-logo { width: 250px; height: auto; display: block; }
.auth .lato .rosetta { color: #F09450; opacity: .30; }
.auth-fatti b { color: #FFFFFF; }
.auth-fatti span, .auth .lato p { color: #B8C6E6; }
a { color: var(--navy); }

/* v5.2 — verifica: legenda del giudizio e elenco completo delle imprese */
.legenda-giudizio { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; margin-top: 14px; font-size: 12.5px; color: var(--steel); max-width: 300px; }
.legenda-giudizio span b { color: var(--navy); font-weight: 800; margin-right: 3px; }
.legenda-giudizio em { flex-basis: 100%; text-align: center; font-style: normal; font-size: 12px; line-height: 1.4; margin-top: 4px; }
.suggerimenti .tutte { border-top: 1px solid var(--rule); border-radius: 0 0 12px 12px; margin-top: 4px; }
.suggerimenti .tutte b { color: var(--navy); }
.suggerimenti.elenco button { min-height: 52px; }
.ag-sep { text-align: center; font-size: 12px; color: var(--steel); margin: 4px 0 10px; }

/* v5.2 — checklist documentale per voce, firme, agente nella pratica */
.dc-stato { margin: 0 0 10px; }
.dc-voce { border: 1px solid var(--rule); border-radius: 14px; padding: 10px 14px; margin-bottom: 10px; background: var(--card); }
.dc-voce.ok { border-color: color-mix(in srgb, var(--green) 40%, var(--rule)); }
.dc-voce.altri { border-style: dashed; }
.dc-testa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dc-testa b { font-weight: 650; }
.dc-testa .tiny { color: var(--steel); }
.dc-testa .btn { margin-left: auto; }
.dc-testa .ic { width: 20px; height: 20px; color: var(--green); display: inline-flex; }
.dc-testa .ic svg { width: 18px; height: 18px; }
.dc-file { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0 2px 30px; font-size: 13.5px; border-top: 1px solid var(--rule); margin-top: 8px; }
.dc-file .nome { font-weight: 550; overflow-wrap: anywhere; }
a.nome { color: inherit; text-decoration: none; }
a.nome:hover, a.nome:focus-visible { text-decoration: underline; color: var(--navy-l); }
.dc-file .nota { flex-basis: 100%; color: var(--steel); font-size: 12.5px; }
.dc-file select { max-width: 220px; padding: 6px 10px; font-size: 13px; min-height: 34px; margin-left: auto; }
.ap-chat { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.ap-chat .ag-msg { max-width: 92%; }
.ap-sugg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
label.check { display: flex; gap: 10px; align-items: center; font-size: 14.5px; margin: 6px 0; cursor: pointer; }
@media (max-width: 720px) { .dc-file { padding-left: 0; } .dc-file select { margin-left: 0; max-width: 100%; } }

/* v5.2.1 — trascina e rilascia, archivi ZIP, «Da abbinare» */
.dc-zona { display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 12px; border: 1.5px dashed var(--rule-d);
  border-radius: 14px; background: color-mix(in srgb, var(--navy-l) 4%, var(--card)); cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast); }
.dc-zona:hover, .dc-zona:focus-visible { border-color: var(--navy-l); outline: none; }
.dc-zona .ic { flex: 0 0 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--navy-l) 12%, transparent); color: var(--navy-l); }
.dc-zona .ic svg { width: 20px; height: 20px; }
.dc-zona b { display: block; font-weight: 650; }
.dc-zona .tiny { display: block; color: var(--steel); margin-top: 2px; }
.dc-voce.sciolti { border-color: color-mix(in srgb, var(--amber) 55%, var(--rule)); background: color-mix(in srgb, var(--amber) 6%, var(--card));
  position: sticky; top: calc(var(--topbar) + 10px); z-index: 4; max-height: 42vh; overflow-y: auto;
  box-shadow: 0 14px 30px -22px rgba(19,37,74,.55); }
.card.card-dc { overflow: visible; overflow: clip; }
.dc-touch { display: none; }
@media (hover: none) and (pointer: coarse) { .dc-mouse { display: none; } .dc-touch { display: inline; } }   /* «hidden» impedirebbe al vassoio di restare in vista */
[data-tema="scuro"] .dc-voce.sciolti { background: color-mix(in srgb, var(--amber) 9%, var(--card)); }
.dc-voce.sciolti .dc-testa .tiny { color: var(--ink); }
.dc-file[draggable="true"] { cursor: grab; }
.dc-file .presa { width: 10px; height: 16px; flex: 0 0 10px; margin-left: -20px; opacity: .45;
  background: radial-gradient(circle, var(--steel) 1.2px, transparent 1.4px) 0 0 / 5px 5px; }
.dc-file.trascinato { opacity: .45; }
.dc-trascina .dc-voce:not(.sciolti) { border-style: dashed; }
.dc-zona.drop-on, .dc-voce.drop-on { border-color: var(--navy-l); border-style: solid;
  background: color-mix(in srgb, var(--navy-l) 10%, var(--card)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy-l) 18%, transparent); }
@media (max-width: 720px) { .dc-file .presa { display: none; } .dc-zona { padding: 14px; } .dc-voce.sciolti { position: static; max-height: none; box-shadow: none; } }

/* v5.2 — accesso: marchio nitido, testi che non si sovrappongono, rosetta visibile */
.side .brand img { width: 172px; }
.auth .lato { padding: clamp(32px, 5vh, 56px) clamp(32px, 4vw, 60px); overflow-y: auto; gap: 28px; }
.auth .lato .marchio-blocco { display: flex; flex-direction: column; gap: 8px; }
.auth .lato .marchio-blocco img { width: 210px; height: auto; display: block; }
.auth .lato .marchio-blocco span { font-size: 12.5px; letter-spacing: .04em; color: #F09450; font-weight: 600; }
.auth .lato h2 { font-size: clamp(30px, 3.2vw, 42px); line-height: 1.12; max-width: 15ch; margin: 0 0 14px; }
.auth .lato p { line-height: 1.6; margin: 0; }
.auth-fatti { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px 22px; margin-top: 26px; }
.auth-fatti div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.auth-fatti b { display: block; font-size: clamp(22px, 2vw, 28px); line-height: 1.1; }
.auth-fatti span { display: block; font-size: 13.5px; line-height: 1.35; }
.auth .lato .rosetta { right: -250px; bottom: -250px; width: 640px; height: 640px; opacity: .5; color: #F09450; }
.auth .lato .rosetta svg .b1 { stroke: #F09450; }
.auth .lato .rosetta svg .b2, .auth .lato .rosetta svg .an { stroke: #8FB0EA; }

/* v5.2 — consumi dell'agente */
.avviso-consumi { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: color-mix(in srgb, var(--orange) 14%, var(--card));
  border: 1px solid color-mix(in srgb, var(--orange) 45%, var(--rule)); border-radius: 14px; padding: 10px 14px; margin: 0 0 18px; font-size: 14px; }
.avviso-consumi.esaurito { background: var(--red-t); border-color: color-mix(in srgb, var(--red) 40%, var(--rule)); }
.avviso-consumi span { flex: 1; min-width: 220px; }
.avviso-consumi a { font-weight: 700; }
.avviso-consumi button { border: 0; background: none; color: var(--steel); cursor: pointer; width: 28px; height: 28px; display: grid; place-items: center; }
.avviso-consumi button svg { width: 16px; height: 16px; }
.scelte-pacchetto { display: grid; gap: 10px; }
.scelte-pacchetto .tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 14px; background: var(--card); cursor: pointer; text-decoration: none; color: var(--ink); font: inherit; }
.scelte-pacchetto .tile:hover { border-color: var(--navy); }
.scelte-pacchetto .tile b { font-size: 15.5px; }
.scelte-pacchetto .tile span { font-size: 13.5px; color: var(--steel); }
.anello-consumi { --p: 0; width: 168px; height: 168px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--c, var(--navy)) calc(var(--p) * 1%), color-mix(in srgb, var(--steel) 14%, transparent) 0); }
.anello-consumi > div { width: 132px; height: 132px; border-radius: 50%; background: var(--card); display: grid; place-items: center; text-align: center; }
.anello-consumi b { font-size: 34px; font-weight: 800; letter-spacing: -.03em; display: block; line-height: 1; }
.anello-consumi span { font-size: 12.5px; color: var(--steel); }
.piani-agente { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.piani-agente .piano { border: 1px solid var(--rule); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.piani-agente .piano.attuale { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy) inset; }
.piani-agente .piano b { font-size: 18px; font-weight: 800; }
.barre-giorni { display: flex; align-items: flex-end; gap: 4px; height: 120px; }
.barre-giorni i { flex: 1; background: color-mix(in srgb, var(--navy) 75%, transparent); border-radius: 4px 4px 0 0; min-height: 2px; }

/* v5.2 — piano e consumi */
.piano-testa { display: flex; gap: 30px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.piano-testa .dl { min-width: 280px; }
.dotazione { padding: 10px 0; border-top: 1px solid var(--rule); }
.dotazione:first-child { border-top: 0; padding-top: 0; }
.dotazione .r { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.dotazione .r span { color: var(--steel); font-size: 14px; }
.dotazione .barra { height: 8px; border-radius: 6px; background: color-mix(in srgb, var(--steel) 14%, transparent); margin-top: 8px; overflow: hidden; }
.dotazione .barra i { display: block; height: 100%; border-radius: 6px; }
.tab-piani th.attuale, .tab-piani td.attuale { background: color-mix(in srgb, var(--navy) 7%, transparent); font-weight: 700; }

/* v5.3 — convenzioni: una scheda per banca */
.cv-testa { gap: 14px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.cv-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
.cv-banca h3 { font-size: 19px; }
.cv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.cv-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 10px; border-radius: 10px; font-size: 13px;
  background: color-mix(in srgb, var(--navy-l) 7%, var(--card)); border: 1px solid var(--rule); }
.cv-chip b { font-weight: 700; color: var(--ink); }
.cv-chip i { font-style: normal; color: var(--steel); font-size: 12px; }
.cv-chip.eredita { border-style: dashed; }
.cv-chip.spenta { opacity: .5; text-decoration: line-through; }
.cv-chip.vuota { color: var(--steel); background: transparent; }
.cv-tab { width: 100%; }
.cv-tab td { vertical-align: middle; padding: 6px 8px; }
.cv-tab input:not([type=checkbox]) { width: 100%; min-width: 90px; text-align: right; }
.cv-tab tr.cv-base td { background: color-mix(in srgb, var(--navy-l) 6%, transparent); }
@media (max-width: 720px) { .cv-griglia { grid-template-columns: 1fr; } }

/* v5.3 — interruttore acceso/spento */
.interruttore { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.interruttore input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruttore i { width: 38px; height: 22px; border-radius: 22px; background: color-mix(in srgb, var(--steel) 30%, transparent);
  position: relative; transition: background var(--t-fast); flex: 0 0 auto; }
.interruttore i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform var(--t-fast); }
.interruttore input:checked + i { background: var(--green); }
.interruttore input:checked + i::after { transform: translateX(16px); }
.interruttore input:focus-visible + i { outline: 2px solid var(--navy-l); outline-offset: 2px; }

/* v5.3 — radar */
.rd-tab { width: 100%; }
.rd-tab td { vertical-align: middle; }
.rd-barra { gap: 10px; }
.rd-viste { margin-bottom: 16px; }

/* v5.3 — report su misura */
.rp-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; }
.rp-elenco { margin: 12px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.55; }
.rp-prezzo { font-family: var(--display); font-size: 34px; font-weight: 600; margin: 4px 0 8px; }
.rp-modelli { display: grid; gap: 8px; }
.rp-mod { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px;
  border: 1px solid var(--rule-d); border-radius: 12px; cursor: pointer; }
.rp-mod:has(input:checked) { border-color: var(--navy-l); background: color-mix(in srgb, var(--navy-l) 6%, transparent); }
.rp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-chips .chip.on { border-color: var(--navy-l); background: color-mix(in srgb, var(--navy-l) 10%, var(--card)); color: var(--navy-l); }
.rp-chips .chip .tiny { margin-left: 6px; }
@media (max-width: 720px) { .rp-griglia { grid-template-columns: 1fr; } }
@media print { .noprint { display: none !important; } .rp-griglia { grid-template-columns: 1fr 1fr; } }

/* v5.3 — impostazioni */
.nt-tab { width: 100%; }
.nt-tab td { vertical-align: middle; padding: 12px 8px; }
.nt-tab td.num { width: 130px; }

/* v5.3 — allegati nella chat dell'agente */
.ag-chat-card.ag-drop { box-shadow: inset 0 0 0 2px var(--navy-l), var(--shadow); }
.ag-nota-allega { margin: 8px 0 0; }

/* v5.3 — campagne */
.cp-tab { width: 100%; }
.cp-tab td { vertical-align: middle; }
.cp-passi { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 18px; flex-wrap: wrap; }
.cp-passi li button { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--rule-d); background: var(--card);
  border-radius: 999px; padding: 6px 14px 6px 6px; font: 600 14px var(--font); color: var(--steel); cursor: pointer; }
.cp-passi li button:disabled { opacity: .5; cursor: default; }
.cp-passi li button span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px;
  background: color-mix(in srgb, var(--steel) 14%, transparent); }
.cp-passi li.on button { color: var(--ink); border-color: var(--navy-l); }
.cp-passi li.on button span { background: var(--navy-l); color: #fff; }
.cp-passi li.fatto button span { background: var(--green); color: #fff; }
.cp-conta { font-family: var(--display); font-size: 46px; font-weight: 600; line-height: 1; }
.cp-barra { height: 10px; border-radius: 6px; background: color-mix(in srgb, var(--steel) 14%, transparent); overflow: hidden; }
.cp-barra i { display: block; height: 100%; background: var(--green); transition: width .4s; }

/* V6 — accesso: password con «Mostra», codici a sei cifre */
.campo-pw { position: relative; }
.campo-pw input { padding-right: 86px; }
.campo-pw .btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.codice-otp { font-family: var(--font); font-variant-numeric: tabular-nums; font-size: 24px; text-align: center; letter-spacing: .45em; }
.forza { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0 6px; }
.forza i { height: 6px; border-radius: 4px; background: color-mix(in srgb, var(--steel) 16%, transparent); }
.forza.l1 i:nth-child(-n+1) { background: var(--red); }
.forza.l2 i:nth-child(-n+2) { background: var(--amber); }
.forza.l3 i:nth-child(-n+3) { background: var(--petrolio); }
.forza.l4 i { background: var(--green); }
.regole-pw { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--steel); }
.regole-pw .si { color: var(--green); }

/* V6 — onboarding del mediatore in sei passi */
.onb { max-width: 860px; margin: 0 auto; padding: 26px 20px 70px; }
.onb-testa { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.onb-testa img { width: 200px; height: auto; display: block; }
.onb-passo { font-size: 13.5px; color: var(--steel); margin: 0 0 8px; }
.onb-barra { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 22px; }
.onb-barra i { height: 6px; border-radius: 4px; background: color-mix(in srgb, var(--steel) 16%, transparent); }
.onb-barra i.fatto { background: var(--green); }
.onb-barra i.on { background: var(--navy-l); }
.onb h1 { font-family: var(--display); font-size: 34px; font-weight: 600; margin: 0 0 6px; }
.onb .intro { color: var(--steel); margin: 0 0 20px; max-width: 64ch; line-height: 1.55; }
.onb-sez { font: 600 13px var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--steel); margin: 22px 0 10px; }
.onb-piede { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; }
.onb-doc { display: flex; align-items: center; gap: 12px; border: 1px solid var(--rule); border-radius: var(--radius-s); padding: 12px 14px; margin-bottom: 10px; background: var(--card); }
.onb-doc.respinto { border-color: var(--red); background: var(--red-t); }
.onb-doc .nome { flex: 1; min-width: 0; }
.onb-doc .nome b { display: block; }
.onb-doc .nome span { font-size: 13px; color: var(--steel); overflow-wrap: anywhere; }
.onb-tipi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.onb-tipi label { border: 1px solid var(--rule-d); border-radius: var(--radius-s); padding: 12px 14px; cursor: pointer; display: flex; gap: 10px; align-items: flex-start; background: var(--card); }
.onb-tipi label.on { border-color: var(--navy-l); box-shadow: inset 0 0 0 1px var(--navy-l); }
.onb-tipi label span { font-size: 13px; color: var(--steel); display: block; }
.onb-facce { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.onb-faccia { border: 1.5px dashed var(--rule-d); border-radius: var(--radius-s); padding: 16px; text-align: center; min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--card); }
.onb-faccia.pieno { border-style: solid; border-color: var(--green); }
.onb-faccia img { max-width: 100%; max-height: 120px; border-radius: 8px; }
.onb-contratto { border: 1px solid var(--rule); border-radius: var(--radius-s); background: var(--card); height: 420px; overflow: auto; padding: 18px 22px; line-height: 1.6; font-size: 14.5px; }
.onb-contratto h2 { font-size: 16px; margin: 18px 0 6px; }
.onb-contratto .avviso { background: var(--amber-t); padding: 10px 12px; border-radius: 10px; }
.onb-contratto.pieno { position: fixed; inset: 16px; height: auto; z-index: 60; box-shadow: var(--shadow-l); }
.onb-otp { display: flex; gap: 8px; justify-content: center; margin: 18px 0 8px; }
.onb-otp input { width: 48px; height: 58px; text-align: center; font-size: 26px; font-variant-numeric: tabular-nums; border-radius: 12px; }
.onb-tappe { list-style: none; padding: 0; margin: 16px 0; }
.onb-tappe li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.onb-tappe li:last-child { border-bottom: 0; }
.onb-tappe li .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--steel) 14%, transparent); font-weight: 600; flex: none; }
.onb-tappe li > div { flex: 1; }
.onb-esito { text-align: center; padding: 34px 26px; }
.onb-esito .ico { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 14px; font-size: 30px; }
.onb-punti { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0; }
.onb-punti > div { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-s); padding: 16px; }
.onb-punti b { display: block; margin-bottom: 4px; }
.onb-punti p { margin: 0; color: var(--steel); font-size: 14px; line-height: 1.5; }
@media (max-width: 720px) {
  .onb-tipi, .onb-facce, .onb-punti { grid-template-columns: 1fr; }
  .onb-otp input { width: 40px; height: 50px; font-size: 22px; }
  .onb-piede { flex-direction: column-reverse; align-items: stretch; }
}

/* V6 — gestione degli utenti dello studio */
.ut-tab td { vertical-align: middle; }
.ut-perm label.check { font-size: 14px; }
.ut-chip { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--steel) 12%, transparent); margin: 2px 4px 2px 0; }
.adm-doc { border: 1px solid var(--rule); border-radius: var(--radius-s); padding: 14px; margin-bottom: 12px; background: var(--card); }
.adm-doc.approvato { border-color: var(--green); }
.adm-doc.respinto { border-color: var(--red); }
.adm-doc .voci { font-size: 13.5px; margin: 8px 0; }
.adm-doc .voci .ok { color: var(--green); }
.adm-doc .voci .ko { color: var(--red); }
.adm-doc .voci .nd { color: var(--steel); }
.adm-griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
@media (max-width: 960px) { .adm-griglia { grid-template-columns: 1fr; } }

/* V6 — anagrafica clienti e soggetti */
.np-sez { font-size: 13px; font-weight: 700; color: var(--steel); margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--rule); }
.an-sez:first-child .np-sez { border-top: 0; padding-top: 0; margin-top: 0; }
.an-griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
.an-griglia .field { min-width: 0; }
.an-dl dd .badge { margin-left: 6px; font-weight: 500; }
.an-sezione { margin-bottom: 16px; }
.an-sezione .card-h .btn { margin-left: auto; }
.cl-filtri { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.cl-filtri input[type=search] { flex: 1 1 240px; min-width: 200px; }
.cl-filtri select { width: auto; min-width: 140px; }
.cl-tab td { vertical-align: middle; }
.cl-tab tr.sel td { background: color-mix(in srgb, var(--navy-l) 6%, transparent); }
.cl-pag { display: flex; gap: 6px; align-items: center; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
.cl-massa { display: none; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--navy-l) 8%, var(--card)); margin-bottom: 12px; flex-wrap: wrap; }
.cl-massa.on { display: flex; }
.cl-testa { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.cl-avatar { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 20px; background: color-mix(in srgb, var(--navy-l) 14%, transparent); color: var(--navy-l); flex: none; }
.cl-pratica { border: 1px solid var(--rule); border-radius: var(--radius-s); padding: 14px 16px; margin-bottom: 10px; background: var(--card); }
.cl-pratica .row { gap: 10px; }
.sg-scheda { border: 1px solid var(--rule); border-radius: var(--radius-s); padding: 12px 14px; margin-bottom: 10px; background: var(--card); }
.sg-scheda .tiny { display: block; }
.dc-gruppo { margin: 18px 0 8px; font-size: 13px; font-weight: 700; color: var(--steel); display: flex; gap: 8px; align-items: center; }
.ch-allegati { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ch-allegati a { font-size: 13px; border: 1px solid var(--rule-d); border-radius: 8px; padding: 3px 8px; text-decoration: none; background: var(--card); }
.ch-richiesti li { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.ch-richiesti li:last-child { border-bottom: 0; }
[data-pendenti]:not(:empty) { margin-bottom: 10px; }
.dc-voce.di-soggetto { margin-left: 12px; }
.an-cond.hidden, .field.hidden { display: none; }
@media (max-width: 900px) { .an-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .an-griglia { grid-template-columns: 1fr; } .an-griglia .field { grid-column: span 1 !important; } }

/* V6 — banca: regole a tre gradi, catalogo, filiali */
.rq-grado { border: 1px solid var(--rule); border-radius: var(--radius-s); padding: 12px 14px; margin-bottom: 10px; background: var(--card); }
.rq-testa { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.rq-riga { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--rule); flex-wrap: wrap; }
.rq-riga .badge { margin-left: 6px; }
.rq-proposta { background: color-mix(in srgb, var(--navy-l) 6%, transparent); border-radius: 8px; padding: 8px; }
.rq-generale { opacity: .7; }
.rq-nuova { margin-top: 14px; }
.cat-stati { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.cat-tab td { vertical-align: top; }
.cat-passi { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.cat-passi button { border: 1px solid var(--rule-d); background: var(--card); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 13px; cursor: pointer; color: var(--steel); }
.cat-passi button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.cat-passi button .n { font-weight: 700; margin-right: 6px; }
.cat-griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
.cat-check { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.cat-check label { display: flex; gap: 6px; align-items: center; font-size: 14px; }
.cat-check input { width: auto; min-height: auto; }
.fil-scheda { border: 1px solid var(--rule); border-radius: var(--radius-s); padding: 14px 16px; background: var(--card); margin-bottom: 12px; }
.fil-scheda .row { gap: 8px; }
.gr-prodotto { display: block; margin-top: 4px; }
.gr-prodotto select { width: auto; max-width: 100%; font-size: 13px; min-height: 32px; padding: 2px 8px; }
.esito-box { border-left: 3px solid var(--red); background: var(--red-t); padding: 10px 12px; border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.esito-box.ok { border-left-color: var(--green); background: var(--green-t); }
.esito-motivi li { margin: 4px 0; }
@media (max-width: 900px) { .cat-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cat-griglia { grid-template-columns: 1fr; } }
.field .lab { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.field .cat-check label, .field label.check { display: flex; font-weight: 500; }
.testo-att { color: var(--red); }

/* ---------------------------------------- V6 (tappa 5): Centrale dei Rischi -- */
:root { --g-uti: #2B56A6; --g-acc: #C5471F; --g-alert: #9B1C1C; }
[data-tema="scuro"] { --g-uti: #5B8DEB; --g-acc: #E0673C; --g-alert: #F07070; }
.cr-riga { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--rule); }
.cr-riga:first-child { border-top: 0; padding-top: 0; }
.cr-ul { margin: 4px 0 0; padding-left: 18px; }
.cr-h { font-size: 14px; font-weight: 600; margin: 18px 0 8px; }
.cr-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 0 0 14px; }
.cr-tiles > div { border: 1px solid var(--rule); border-radius: 14px; padding: 10px 12px; }
.cr-tiles span { display: block; font-size: 12.5px; color: var(--steel); }
.cr-tiles b { display: block; font-size: 20px; font-weight: 600; margin: 2px 0; font-variant-numeric: tabular-nums; }
.cr-tiles small { font-size: 12px; color: var(--steel-l); }
.cr-graf { position: relative; margin: 4px 0 6px; }
.cr-graf svg { width: 100%; height: auto; display: block; }
.cr-g { stroke: var(--rule); stroke-width: 1; }
.cr-t { fill: var(--steel-l); font-size: 10.5px; font-family: var(--font); }
.cr-l { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cr-l.uti { stroke: var(--g-uti); } .cr-l.acc { stroke: var(--g-acc); }
.cr-area { fill: var(--g-uti); opacity: .1; }
.cr-sc { fill: var(--g-alert); stroke: var(--card); stroke-width: 2; }
.cr-fine { fill: var(--g-uti); stroke: var(--card); stroke-width: 2; }
.cr-croce { stroke: var(--steel-l); stroke-width: 1; }
.cr-leg { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--steel); margin-bottom: 4px; }
.cr-leg span { display: inline-flex; align-items: center; gap: 6px; }
.cr-k { display: inline-block; width: 14px; height: 2px; border-radius: 2px; vertical-align: middle; }
.cr-k.uti { background: var(--g-uti); } .cr-k.acc { background: var(--g-acc); }
.cr-k.sc { width: 8px; height: 8px; border-radius: 50%; background: var(--g-alert); }
.cr-tip { position: absolute; top: 28px; background: var(--card); border: 1px solid var(--rule-d); border-radius: 10px; padding: 8px 10px; font-size: 12.5px;
          box-shadow: var(--shadow-l); pointer-events: none; min-width: 150px; color: var(--ink); }
.cr-tip b { display: block; margin-bottom: 4px; font-weight: 600; }
.cr-tr { display: flex; align-items: center; gap: 6px; color: var(--steel); }
.cr-tr strong { color: var(--ink); font-variant-numeric: tabular-nums; }
/* V6 — uso dell'agente come barra a percentuale, con il livello del piano */
.uso-agente { position: relative; height: 14px; margin: 12px 56px 4px 0; border-radius: 8px; background: color-mix(in srgb, var(--steel) 16%, transparent); }
.uso-agente i { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); border-radius: 8px; background: var(--c, var(--navy)); transition: width .6s ease; }
.uso-agente b { position: absolute; right: -56px; top: 50%; transform: translateY(-50%); font-size: 15px; font-variant-numeric: tabular-nums; }
/* V6 — gruppi di scelte rapide (durata dell'omaggio e simili) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips .chip.on { border-color: var(--navy-l); background: color-mix(in srgb, var(--navy-l) 10%, var(--card)); color: var(--navy-l); }
.field .lbl { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
/* V6 — barra in alto con il residuo del piano: niente a capo; sotto i 1480 px la ricerca resta
   un'icona con la scorciatoia, sotto i 1180 px il residuo mostra solo le cifre */
.wallet-chip, .consumi-chip, .avatar .who, .cerca span, .cerca kbd { white-space: nowrap; }
.avatar .who { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1480px) {
  .cerca { min-width: 0; }
  .cerca span { display: none; }
}
@media (max-width: 1180px) {
  .consumi-chip { gap: 10px; padding: 0 10px; }
  .consumi-chip .et { display: none; }
  .consumi-chip .cm { grid-template-columns: auto; }
  .consumi-chip i { grid-column: 1; }
}

/* V6 — interesse stimato della banca: quattro tacche, il giudizio, l'affidabilita' */
.int-m { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; min-width: 120px; }
.int-m .int-s { display: inline-flex; gap: 3px; grid-row: span 2; }
.int-m .int-s i { width: 7px; height: 18px; border-radius: 3px; background: color-mix(in srgb, var(--steel) 18%, transparent); }
.int-m .int-s i.on.l0 { background: var(--steel); }
.int-m .int-s i.on.l1 { background: var(--amber); }
.int-m .int-s i.on.l2 { background: var(--navy-l, var(--navy)); }
.int-m .int-s i.on.l3 { background: var(--green); }
.int-m b { font-size: 14px; line-height: 1.2; }
.int-m .tiny { line-height: 1.2; }

/* V6 (9 ottobre 2026): livello dell'agente a stelle, wallet non disponibile */
.stelle { color: var(--orange); letter-spacing: 1px; white-space: nowrap; }
.stelle i { color: var(--rule-d); font-style: normal; }
.tile.disabilitato { opacity: .5; cursor: not-allowed; }

/* V6 (tappa 8, K1) — centro notifiche */
.nt-barra { margin: 0 0 16px; align-items: center; gap: 12px; flex-wrap: wrap; }
.nt-filtri { display: flex; flex-wrap: wrap; gap: 8px; }
.nt-filtri .chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.nt-gruppo { margin-bottom: 20px; }
.nt-gruppo h4 { margin: 0 0 8px; font-size: 14px; color: var(--ink); }
.nt-voce { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--navy-l);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; }
.nt-voce.p-urgente { border-left-color: var(--red); }
.nt-voce.p-info { border-left-color: var(--rule-d); }
.nt-voce.letta { opacity: .78; }
.nt-punto { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); margin-top: 7px; flex: none; }
.nt-voce.letta .nt-punto { background: var(--rule-d); }
.nt-corpo { flex: 1; min-width: 0; }
.nt-titolo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nt-corpo p { margin: 4px 0; font-size: 14px; color: var(--steel); }
@media (max-width: 640px) { .nt-voce { flex-wrap: wrap; } .nt-voce .btn { margin-left: 21px; } }
.avatar .circle img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
/* V6 (tappa 8, K3) — foto del profilo nelle impostazioni */
.pf-foto { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pf-foto .circle { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #13254A; color: #FBFCFB; font-weight: 600; overflow: hidden; }
.pf-foto .circle img { width: 100%; height: 100%; object-fit: cover; }