@import url("https://fonts.googleapis.com/css2?family=Carlito:ital,wght@0,400;0,700;1,400&display=swap");
/* Business Credit Pilot — NSA: componenti, versione 2 (14/10/2026).
 *
 * Due famiglie. «Documento NSA»: elementi che il § 24 delle ISTRUZIONI v10.1 definisce per i
 * report Word (tabella dati, tabella a label, box 1 × 1, testata), riprodotti per l'anteprima in
 * console: restano come NSA li definisce, squadrati e invariati. «Console»: elementi nostri,
 * costruiti sugli stessi token. La versione 2 li rende più moderni senza cambiarne il carattere:
 * angoli più morbidi, un'ombra leggera al posto dei bordi netti, maiuscola solo all'inizio,
 * cinque toni di stato, e i componenti di struttura (barra laterale, testata di pagina, sezioni
 * pieghevoli, tabelle, filtri). Ogni var() porta il valore di tokens.json come riserva.
 */

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--sfondo, #FAFAFB); color: var(--nsa-grigio, #575756);
  font: 400 14.5px/1.5 var(--font-testo, Calibri, Carlito, "Segoe UI", Arial, sans-serif);
}
a { color: var(--nsa-blu, #5267AE); }
a:hover { color: var(--blu-scuro, #3F5294); }
:focus-visible { outline: 2px solid var(--nsa-blu, #5267AE); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ── Marchio ──────────────────────────────────────────────────────────────── */

/* La striscia argento segmentata della testata della carta intestata. */
.striscia {
  height: 10px;
  background: repeating-linear-gradient(90deg, var(--nsa-argento, #B2B2B2) 0 46px, transparent 46px 52px,
    var(--nsa-argento, #B2B2B2) 52px 64px, transparent 64px 70px);
}
/* La barra verticale blu del piè di pagina: separa e marca le sezioni. */
.barra { border-left: var(--barra, 4px) solid var(--nsa-blu, #5267AE); padding-left: var(--s-3, 12px); }

/* Testata orizzontale della versione 1: resta per le pagine senza barra laterale. */
.testata-console {
  background: var(--carta, #FFFFFF); display: flex; align-items: center; gap: var(--s-5, 24px);
  padding: var(--s-3, 12px) var(--s-6, 32px); border-bottom: 1px solid var(--bordo, #E3E4E8);
}
.testata-console img { height: 44px; }
.testata-console h1 {
  margin: 0; font: 700 20px var(--font-titoli, Georgia, "Times New Roman", serif); color: var(--nsa-blu, #5267AE);
}
.testata-console .sotto { margin: 0; font-size: 11.5px; color: var(--nsa-grigio, #575756); }

/* ── Struttura: barra laterale e contenuto ────────────────────────────────── */
.shell { display: flex; flex-wrap: wrap; min-height: 100%; background: var(--sfondo, #FAFAFB); }
.sidebar {
  flex: 1 1 232px; max-width: 256px; background: var(--carta, #FFFFFF);
  border-right: 1px solid var(--bordo, #E3E4E8); display: flex; flex-direction: column;
  gap: var(--s-4, 16px); padding: var(--s-4, 16px) var(--s-3, 12px);
}
.sidebar .marchio {
  display: flex; flex-direction: column; gap: 6px; padding: 0 var(--s-2, 8px) var(--s-4, 16px);
  border-bottom: 1px solid var(--bordo, #E3E4E8);
}
.sidebar .marchio img { height: 36px; align-self: flex-start; }
.sidebar .prodotto { margin: 0; font: 700 17px/1.2 var(--font-titoli, Georgia, serif); color: var(--nsa-blu, #5267AE); }
.nav-gruppo { display: flex; flex-direction: column; gap: 2px; }
.nav-titolo { font-size: 12px; font-weight: 700; color: var(--nsa-grigio, #575756); padding: var(--s-2, 8px) var(--s-3, 12px) 4px; }
.nav-voce {
  display: flex; align-items: center; gap: var(--s-2, 8px); min-height: 40px; padding: 0 var(--s-2, 8px) 0 var(--s-3, 12px);
  border-radius: var(--raggio, 6px); color: var(--nsa-grigio, #575756); text-decoration: none; font-size: 14.5px;
  transition: background-color .15s ease;
}
.nav-voce:hover { background: var(--blu-tenue, #F3F5FA); color: var(--nsa-grigio, #575756); }
.nav-voce.attiva {
  background: var(--nsa-azzurro, #E7EAF3); color: var(--blu-scuro, #3F5294); font-weight: 700;
  box-shadow: inset var(--barra, 4px) 0 0 var(--nsa-blu, #5267AE);
}
.nav-voce .conteggio {
  margin-left: auto; font-size: 12px; font-weight: 700; min-width: 24px; text-align: center; padding: 1px 8px;
  border-radius: var(--raggio-pill, 999px); background: var(--neutro-fondo, #EEF0F4); color: var(--nsa-grigio, #575756);
}
.nav-voce .conteggio.allarme { background: var(--allarme, #A23434); color: #FFFFFF; }
.sidebar .utente {
  margin-top: auto; padding: var(--s-3, 12px) var(--s-2, 8px) 0; border-top: 1px solid var(--bordo, #E3E4E8);
  font-size: 13px; display: flex; flex-direction: column; gap: 2px;
}
.sidebar .utente b { color: var(--nsa-grigio, #575756); font-size: 14px; }
.sidebar .utente .esci { align-self: flex-start; margin-top: 8px; display: inline-flex; align-items: center; min-height: 36px;
  padding: 0 14px; border: 1px solid var(--bordo, #E3E4E8); border-radius: var(--raggio, 6px); font-weight: 700;
  font-size: 13px; text-decoration: none; color: var(--nsa-blu, #5267AE); background: #FFFFFF; }
.sidebar .utente .esci:hover { background: var(--blu-tenue, #F3F5FA); }
.contenuto { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; }
.pagina { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--s-6, 32px) 56px; display: flex; flex-direction: column; gap: var(--s-5, 24px); }

/* ── Testata di pagina ────────────────────────────────────────────────────── */
.testata-pagina {
  width: 100%; max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--s-3, 12px) var(--s-5, 24px); padding: var(--s-5, 24px) var(--s-6, 32px) var(--s-4, 16px);
}
.testata-pagina .titoli { flex: 1 1 360px; min-width: 0; }
.briciole { font-size: 13px; color: var(--nsa-grigio, #575756); display: flex; flex-wrap: wrap; gap: 6px; }
.briciole a { text-decoration: none; }
.testata-pagina h1 { margin: 4px 0 0; font: 700 26px/1.2 var(--font-titoli, Georgia, serif); color: var(--nsa-blu, #5267AE); }
.testata-pagina .sotto { margin: 6px 0 0; font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.testata-pagina .azioni { display: flex; flex-wrap: wrap; gap: var(--s-2, 8px); }

/* ── Titoli ───────────────────────────────────────────────────────────────── */
h2.sezione {
  font: 700 16px var(--font-titoli, Georgia, "Times New Roman", serif); color: var(--nsa-blu, #5267AE);
  margin: 0 0 var(--s-2, 8px);
}
.aiuto { font-size: 13px; color: var(--nsa-grigio, #575756); margin: 0 0 var(--s-3, 12px); }
.nota { font-size: 12px; color: var(--nsa-grigio, #575756); }

/* ── Documento NSA (§ 24) — invariato ─────────────────────────────────────── */

/* Testata: riga 1 grassetto Blu NSA centrata; riga 2 «RAGIONE SOCIALE — CF» grassetto Grigio. */
.doc-testata { text-align: center; font-weight: 700; }
.doc-testata .r1 { color: var(--nsa-blu, #5267AE); }
.doc-testata .r2 { color: var(--nsa-grigio, #575756); margin-top: 1.2em; }

/* Tabelle dati: Calibri 10; intestazione Blu NSA, testo bianco grassetto; celle Grigio NSA. */
table.nsa { border-collapse: collapse; width: 100%; font-size: 13px; }
table.nsa th {
  background: var(--nsa-blu, #5267AE); color: #FFFFFF; font-weight: 700;
  text-align: left; padding: 6px 8px; border: 1px solid var(--nsa-argento, #B2B2B2);
}
table.nsa td { color: var(--nsa-grigio, #575756); padding: 6px 8px; border: 1px solid var(--nsa-argento, #B2B2B2); }
table.nsa td.label { background: var(--nsa-blu, #5267AE); color: #FFFFFF; font-weight: 700; width: 50%; }
table.nsa tr.totale td { font-weight: 700; }

/* Box 1 × 1: riempimento Azzurro box NSA, Calibri 8,5, etichetta in grassetto. */
.box-nsa {
  background: var(--nsa-azzurro, #E7EAF3); padding: var(--s-2, 8px) var(--s-3, 12px); font-size: 11.5px;
  border: 1px solid var(--nsa-argento, #B2B2B2);
}
.box-nsa b { color: var(--nsa-grigio, #575756); }
.box-nsa.conclusivo { font-size: 13px; color: var(--nsa-blu, #5267AE); }

/* ── Console: superfici ───────────────────────────────────────────────────── */
.card {
  background: var(--carta, #FFFFFF); border: 1px solid var(--bordo, #E3E4E8); border-radius: var(--raggio-card, 10px);
  padding: var(--s-4, 16px) var(--s-5, 24px);
  box-shadow: var(--ombra-morbida, 0 1px 2px rgba(46, 61, 115, 0.06), 0 2px 12px rgba(46, 61, 115, 0.06));
}
.card.pratica { border-left: var(--barra, 4px) solid var(--nsa-blu, #5267AE); }
.sollevata { box-shadow: var(--ombra-sollevata, 0 8px 28px rgba(46, 61, 115, 0.16)); }

/* Sezione pieghevole: <details class="sezione"><summary class="sezione-testa">…</summary>
   <div class="sezione-corpo">…</div></details>. Chiusa, dice in una riga a che punto è. */
.sezione {
  background: var(--carta, #FFFFFF); border: 1px solid var(--bordo, #E3E4E8); border-radius: var(--raggio-card, 10px);
  box-shadow: var(--ombra-morbida, 0 1px 2px rgba(46, 61, 115, 0.06), 0 2px 12px rgba(46, 61, 115, 0.06));
  overflow: hidden;
}
.sezione.attiva { border-color: var(--nsa-blu, #5267AE); box-shadow: inset var(--barra, 4px) 0 0 var(--nsa-blu, #5267AE), var(--ombra-morbida, 0 2px 12px rgba(46, 61, 115, 0.06)); }
.sezione-testa {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 16px 24px; cursor: pointer;
  list-style: none; min-height: 60px; transition: background-color .15s ease;
}
.sezione-testa::-webkit-details-marker { display: none; }
.sezione-testa:hover { background: var(--blu-tenue, #F3F5FA); }
.sezione-testa h3 { margin: 0; font: 700 18px var(--font-titoli, Georgia, serif); color: var(--nsa-blu, #5267AE); }
.sezione-testa .riassunto { flex: 1 1 240px; min-width: 0; font-size: 14px; color: var(--nsa-grigio, #575756); }
.sezione-testa .freccia { margin-left: auto; transition: transform .2s ease; }
.sezione[open] > .sezione-testa .freccia { transform: rotate(180deg); }
.sezione-corpo {
  padding: 20px 24px 24px; border-top: 1px solid var(--bordo, #E3E4E8);
  display: flex; flex-direction: column; gap: 16px;
}

/* ── Console: pulsanti per costo (brief § 5) ──────────────────────────────── */
.btn {
  font: 700 13.5px var(--font-testo, Calibri, Carlito, "Segoe UI", Arial, sans-serif); min-height: 36px; padding: 6px 14px;
  border-radius: var(--raggio, 6px); border: 1px solid var(--nsa-blu, #5267AE); cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--s-2, 8px); text-decoration: none;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.btn .costo { font-weight: 400; font-size: 12px; opacity: .85; }
/* Gratuito: contorno. Non costa niente e lo dice la forma, prima ancora del testo. */
.btn.gratuito { background: var(--carta, #FFFFFF); color: var(--nsa-blu, #5267AE); }
.btn.gratuito:hover { background: var(--blu-tenue, #F3F5FA); }
/* Pagato breve: pieno blu. */
.btn.breve { background: var(--nsa-blu, #5267AE); color: #FFFFFF; }
.btn.breve:hover { background: var(--blu-scuro, #3F5294); color: #FFFFFF; }
/* Pagato lungo: pieno scuro, con l'indicazione di durata e costo nel pulsante stesso. */
.btn.lungo { background: var(--costo-lungo, #2E3D73); border-color: var(--costo-lungo, #2E3D73); color: #FFFFFF; }
.btn.lungo:hover { box-shadow: var(--ombra-sollevata, 0 8px 28px rgba(46, 61, 115, 0.16)); color: #FFFFFF; }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn.pericolo { background: var(--allarme, #A23434); border-color: var(--allarme, #A23434); color: #FFFFFF; }
/* Discreto: un'azione secondaria dentro una riga, senza bordo. */
.btn.discreto { background: transparent; border-color: transparent; color: var(--nsa-blu, #5267AE); padding: 6px 8px; }
.btn.discreto:hover { background: var(--blu-tenue, #F3F5FA); }

/* ── Stato: cinque toni, sempre con una parola ────────────────────────────── */
.badge, .chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; line-height: 1.5;
  padding: 1px 10px; border-radius: var(--raggio-pill, 999px); white-space: nowrap;
  background: var(--neutro-fondo, #EEF0F4); color: var(--nsa-grigio, #575756);
}
.badge.ok, .chip.ok { background: var(--ok-fondo, #E7F0E9); color: var(--ok, #2F6B3D); }
.badge.attesa, .chip.attesa { background: var(--attesa-fondo, #FDF3E0); color: var(--attesa, #8A5A10); }
.badge.allarme, .chip.allarme { background: var(--allarme-fondo, #FBEAEA); color: var(--allarme, #A23434); }
/* Blu scuro, non blu NSA: il blu NSA su azzurro è 4,47:1, appena sotto 4,5. */
.badge.info, .chip.info, .badge.conclusione { background: var(--nsa-azzurro, #E7EAF3); color: var(--blu-scuro, #3F5294); }
.punto { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--bordo-controllo, #868685); }
.punto.ok { background: var(--ok, #2F6B3D); }
.punto.attesa { background: var(--attesa, #8A5A10); }
.punto.allarme { background: var(--allarme, #A23434); }
.punto.info { background: var(--nsa-blu, #5267AE); }

/* ── Console: avvisi ──────────────────────────────────────────────────────── */
.avviso { padding: var(--s-2, 8px) var(--s-3, 12px); font-size: 13.5px; border-left: 3px solid; border-radius: 0 var(--raggio, 6px) var(--raggio, 6px) 0; }
.avviso.attesa { background: var(--attesa-fondo, #FDF3E0); border-color: var(--attesa, #8A5A10); }
.avviso.errore { background: var(--allarme-fondo, #FBEAEA); border-color: var(--allarme, #A23434);
  font-family: var(--font-codice, "Cascadia Mono", Consolas, ui-monospace, monospace); white-space: pre-wrap; }
.avviso.allarme { background: var(--allarme-fondo, #FBEAEA); border-color: var(--allarme, #A23434); }
.avviso.info { background: var(--nsa-azzurro, #E7EAF3); border-color: var(--nsa-blu, #5267AE); }
.avviso.ok { background: var(--ok-fondo, #E7F0E9); border-color: var(--ok, #2F6B3D); }
/* La proposta di stop: seria e inequivocabile, ma non un errore — niente carattere tecnico. */
.stop {
  background: var(--allarme-fondo, #FBEAEA); border: 1px solid var(--allarme, #A23434);
  border-left-width: var(--barra, 4px); border-radius: var(--raggio-card, 10px);
  padding: var(--s-4, 16px) var(--s-5, 24px); font-size: 14px;
}
.stop h4 { margin: 0 0 var(--s-1, 4px); color: var(--allarme, #A23434); font-size: 16px; }

/* ── Filtri e schede ──────────────────────────────────────────────────────── */
.filtri { display: flex; flex-wrap: wrap; gap: 8px; }
.filtro {
  font: inherit; font-size: 13.5px; min-height: 36px; padding: 0 14px; border-radius: var(--raggio-pill, 999px);
  border: 1px solid var(--bordo, #E3E4E8); background: var(--carta, #FFFFFF); color: var(--nsa-grigio, #575756);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background-color .15s ease;
}
.filtro:hover { background: var(--blu-tenue, #F3F5FA); }
.filtro .n { font-weight: 700; }
.filtro.attivo { background: var(--nsa-blu, #5267AE); border-color: var(--nsa-blu, #5267AE); color: #FFFFFF; }
.schede { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--bordo, #E3E4E8); }
.scheda {
  font: inherit; font-size: 14.5px; min-height: 44px; padding: 0 14px; border: 0; border-bottom: 3px solid transparent;
  background: none; color: var(--nsa-grigio, #575756); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.scheda:hover { color: var(--blu-scuro, #3F5294); }
.scheda.attiva { border-bottom-color: var(--nsa-blu, #5267AE); color: var(--blu-scuro, #3F5294); font-weight: 700; }

/* ── Console: righe e tabelle ─────────────────────────────────────────────── */
.tabella { background: var(--carta, #FFFFFF); border: 1px solid var(--bordo, #E3E4E8); border-radius: var(--raggio-card, 10px);
  box-shadow: var(--ombra-morbida, 0 2px 12px rgba(46, 61, 115, 0.06)); overflow-x: auto; }
table.elenco { border-collapse: collapse; width: 100%; font-size: 14px; }
table.elenco th {
  text-align: left; font-size: 12.5px; font-weight: 700; color: var(--nsa-grigio, #575756);
  padding: 10px 12px; background: var(--sfondo, #FAFAFB); border-bottom: 1px solid var(--bordo, #E3E4E8);
}
table.elenco td { padding: 12px; border-bottom: 1px solid var(--bordo, #E3E4E8); vertical-align: top; }
table.elenco tr:last-child td { border-bottom: 0; }
table.elenco tbody tr { transition: background-color .15s ease; }
table.elenco tbody tr:hover td { background: var(--blu-tenue, #F3F5FA); }
table.elenco th:first-child, table.elenco td:first-child { padding-left: 20px; }
.sotto-riga { display: block; font-size: 12.5px; color: var(--nsa-grigio, #575756); font-weight: 400; }
.tabella .piede { padding: 10px 20px; font-size: 13px; border-top: 1px solid var(--bordo, #E3E4E8); background: var(--sfondo, #FAFAFB); }
.riga-doc { display: flex; align-items: center; gap: var(--s-3, 12px); padding: 7px 0;
  border-bottom: 1px solid var(--bordo, #E3E4E8); font-size: 13px; }
.riga-doc .nome { flex: 1; color: var(--nsa-grigio, #575756); }

/* Riga di campo: etichetta, valore e provenienza del valore. */
.righe-campo { display: flex; flex-direction: column; }
.riga-campo {
  display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--bordo, #E3E4E8);
}
.riga-campo:last-child { border-bottom: 0; }
.riga-campo .etichetta { font-size: 13px; }
.riga-campo .valore { font-size: 14.5px; color: #3E3E3D; min-width: 0; }
.provenienza { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--nsa-grigio, #575756); white-space: nowrap; }

/* ── Caricamento e stati vuoti ────────────────────────────────────────────── */
.zona {
  border: 2px dashed var(--bordo-controllo, #868685); border-radius: var(--raggio-card, 10px); padding: var(--s-4, 16px);
  text-align: center; font-size: 13.5px; background: var(--carta, #FFFFFF); transition: background-color .15s ease, border-color .15s ease;
}
.zona.sopra, .zona:hover { border-color: var(--nsa-blu, #5267AE); background: var(--blu-tenue, #F3F5FA); }
.vuoto {
  border: 1px dashed var(--bordo-controllo, #868685); border-radius: var(--raggio-card, 10px); padding: 24px;
  text-align: center; font-size: 14px; color: var(--nsa-grigio, #575756); background: var(--carta, #FFFFFF);
}

/* ── Console: avanzamento ─────────────────────────────────────────────────── */
.barra-progresso { height: 8px; border-radius: var(--raggio-pill, 999px); background: var(--neutro-fondo, #EEF0F4); overflow: hidden; }
.barra-progresso > span { display: block; height: 100%; background: var(--nsa-blu, #5267AE); border-radius: var(--raggio-pill, 999px); transition: width .3s ease; }
.passi { display: flex; flex-wrap: wrap; gap: 6px; }
.passo { font-size: 12px; padding: 2px 10px; border-radius: var(--raggio-pill, 999px);
  background: var(--neutro-fondo, #EEF0F4); color: #575756; }
.passo.fatto { background: var(--ok-fondo, #E7F0E9); color: var(--ok, #2F6B3D); }
.passo.ora { background: var(--nsa-azzurro, #E7EAF3); color: var(--blu-scuro, #3F5294); font-weight: 700; }

/* ── Campi ────────────────────────────────────────────────────────────────── */
label.campo { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
input.campo, textarea.campo, select.campo {
  width: 100%; min-height: 38px; padding: 7px 10px; font: inherit; font-size: 14px; color: var(--nsa-grigio, #575756);
  border: 1px solid var(--bordo-controllo, #868685); border-radius: var(--raggio, 6px); background: var(--carta, #FFFFFF);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input.campo:focus, textarea.campo:focus, select.campo:focus {
  outline: none; border-color: var(--nsa-blu, #5267AE); box-shadow: 0 0 0 3px rgba(82, 103, 174, 0.25);
}
.campo.attesa { border-color: var(--attesa, #8A5A10); }
.campo.allarme { border-color: var(--allarme, #A23434); }