/* ==========================================================================
   SISTEMA PCBI — foglio di stile condiviso dalle quattro pagine del backend
   (accesso, clienti, scheda, impostazioni).

   È composto da due strati che non si sovrappongono:
   1) il design system del prototipo validato — palette, tipografia, header,
      elenco clienti, filtri, modali;
   2) i componenti dell'amministrazione reale — pannelli di configurazione,
      tabelle dei pesi, editor della relazione AI, diagnostica.

   Le variabili di colore le dichiara una volta sola lo strato 1: lo strato 2
   le riusa, e mantiene i nomi storici (--muto, --rosso, --verde, --navy2,
   --gold2) come alias, così le regole già scritte continuano a valere.
   ========================================================================== */

/* =========================================================
   PROTOTIPO_IMPRENDITOMETRO_HTML — design system condiviso
   VERSIONE 2 — sostituisce la palette navy/oro/teal dichiarata a voce
   con i token del prototipo "Imprenditometro_UI_Prototype_v8" (ChatGPT),
   adottato su richiesta esplicita del committente in data 30/07/2026.
   ATTENZIONE — lo stesso limite di prima resta valido: anche questi
   valori HEX vengono da un prototipo di terze parti, NON dal codice
   sorgente reale di AssettiMetro 4.3.3 (APPLICAZIONI/, non disponibile
   in questa sessione). Vanno comunque validati appena accessibile.
   ========================================================= */

:root {
  --ink: #0c1828;
  --navy: #14263f;
  --navy-2: #1d3557;
  --gold: #b9924a;
  --gold-2: #c9ae6c;
  --gold-soft: #f6eedc;
  --green: #2f7a4d;
  --green-soft: #e7f3ea;
  --cream: #f4f2ec;
  --paper: #ffffff;
  --paper-soft: #fbfaf7;
  --line: #dfdcd3;
  --muted: #6c7480;
  --gray: #e9e7e1;
  --gray-dark: #727985;
  --red: #ac382f;
  --red-soft: #fbe9e7;
  --amber: #a4600f;
  --amber-soft: #fff4e3;
  --blue-soft: #e9f1fa;
  --content: 1280px;
  --shadow: 0 16px 42px rgba(12, 24, 40, 0.08);
  --shadow-soft: 0 10px 24px rgba(11, 21, 36, 0.05);
  --font-sans: 'Instrument Sans', -apple-system, 'Segoe UI', Roboto, Arial, Helvetica, sans-serif;
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;

  /* Scala di sovrapposizione, dichiarata una volta sola.
     Prima i valori erano sparsi nel foglio e si contraddicevano: la barra
     applicativa stava a 80 e una delle due definizioni di .modal-backdrop a
     50, quindi la maschera finiva sotto la barra e perdeva l'intestazione.
     L'ordine qui è quello vero: la barra copre la pagina, la maschera copre
     la barra, l'avviso copre tutto perché è l'ultima cosa che devi leggere. */
  --z-chrome: 80;
  --z-modal: 200;
  --z-toast: 300;
}

* { box-sizing: border-box; }

html { background: var(--cream); scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.5;
  margin: 0;
  font-size: 15px;
}

/* Titoli in serif — la stessa scelta editoriale dell'admin reale AssettiMetro 4.3.3
   (Fraunces per gerarchie, Instrument Sans per il testo corrente). Fallback su Georgia
   e system-ui: se i font Google non si caricano, l'aspetto resta professionale. */
h1, h2, h3, .serif { font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.005em; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(63, 126, 192, 0.38);
  outline-offset: 2px;
}

.eyebrow {
  color: var(--gold);
  display: block;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.primary-button, .secondary-button {
  border-radius: 9px;
  font-size: 14px;
  font-weight: 800;
  min-height: 42px;
  padding: 10px 16px;
}
.primary-button { background: var(--navy); border: 1px solid var(--navy); color: #fff; }
.primary-button:hover { filter: brightness(1.12); }
.secondary-button { background: #fff; border: 1px solid #cdd0d1; color: var(--navy); }
.secondary-button:hover { background: #f4f5f6; }
.secondary-button:disabled, .primary-button:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Login: due colonne, brand + carta ---------- */
.login-page {
  background: var(--cream);
  display: grid;
  grid-template-columns: minmax(500px, 1.05fr) minmax(480px, 0.95fr);
  min-height: 100vh;
}
.login-brand {
  background:
    radial-gradient(circle at 88% 12%, rgba(201, 174, 108, 0.22), transparent 25%),
    linear-gradient(145deg, #0d1d32, var(--navy));
  border-right: 4px solid var(--gold);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  padding: clamp(36px, 6vw, 72px);
}
/* Il gap regola lo spazio tra il logo e il blocco di testo "Piattaforma/Amministrazione"
   nell'header (in login, dove .logo-lockup contiene solo il chip, il gap non ha effetto:
   non c'è un secondo elemento flex). Aumentato da 17 a 26px su richiesta del committente:
   la parola "Piattaforma" toccava troppo da vicino il logo. */
.logo-lockup { align-items: center; display: flex; gap: 26px; }
.logo-lockup img { height: 48px; width: auto; object-fit: contain; flex: none; }
/* Il logo PCBI ha sfondo bianco pieno (nessuna trasparenza): su pannelli scuri va dentro
   un chip bianco, altrimenti il rettangolo bianco dell'immagine "galleggia" male.
   Dimensione aumentata su richiesta del committente (era 40px, sproporzionato rispetto
   al pannello): 72px è il punto in cui il logo si vede bene a colpo d'occhio senza
   sovrastare il titolo sottostante, che deve restare l'ancora visiva principale. */
.logo-chip { background: #fff; border-radius: 14px; padding: 16px 26px; display: inline-flex; align-items: center; }
.logo-chip img { height: 72px; }
.logo-separator { background: rgba(255,255,255,0.23); height: 34px; width: 1px; }
.logo-lockup > span:last-child small, .logo-lockup > span:last-child strong { display: block; }
.logo-lockup > span:last-child small { color: var(--gold); font-size: 10px; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; margin-left: 4px; }
.logo-lockup > span:last-child strong { color: #fff; font-size: 18px; font-weight: 700; margin-top: 3px; }

.login-kicker { color: var(--gold); display: block; font-size: 11px; font-weight: 850; letter-spacing: 0.15em; margin-bottom: 18px; text-transform: uppercase; }
.login-brand h1 {
  font-family: var(--font-serif); font-weight: 500; font-size: clamp(32px, 4vw, 46px);
  letter-spacing: -0.015em; line-height: 1.15; margin: 0; max-width: 620px;
}
.login-brand p { color: #bdc8d7; font-size: 15.5px; line-height: 1.75; margin: 22px 0 0; max-width: 600px; }

.login-path { align-items: flex-start; display: flex; }
.login-path__step { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.login-path__step small { color: #b9c3d0; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; }
.login-path span { align-items: center; border-radius: 50%; color: #fff; display: flex; font-size: 12px; font-weight: 900; height: 36px; justify-content: center; width: 36px; box-shadow: 0 4px 12px rgba(0,0,0,0.18); }
.login-path .assetti { background: var(--navy-2); border: 1px solid rgba(255,255,255,.3); }
.login-path .imprendi { background: var(--gold); color: var(--navy); }
.login-path .cos { background: var(--green); }
.login-path i { background: rgba(255, 255, 255, 0.25); height: 1px; margin: 17px 10px 0; width: 44px; flex: none; }

/* ---------- Carta di login: elegante, campi impilati ed esattamente allineati ---------- */
.login-panel { align-items: center; display: flex; justify-content: center; min-height: 100vh; padding: 48px; position: relative; }
.demo-label { color: var(--muted); font-size: 11px; position: absolute; right: 26px; top: 22px; }
.login-card {
  background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow);
  max-width: 430px; width: 100%; padding: 44px 40px 36px;
}
.login-card__header { border-bottom: 1px solid #ece8df; margin-bottom: 28px; padding-bottom: 24px; }
.login-card h2 {
  font-family: var(--font-serif); color: var(--navy); font-size: 28px; font-weight: 500;
  line-height: 1.2; margin: 10px 0 8px;
}
.login-card > p.lead, .login-card__header p.lead { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0; }

.login-form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.field label { color: var(--navy); font-size: 11.5px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; }
.field input {
  background: var(--paper-soft); border: 1px solid #d7d5ce; border-radius: 10px; box-sizing: border-box;
  color: var(--ink); display: block; font-size: 14.5px; font-weight: 500; padding: 13px 14px; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus { background: #fff; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(185,146,74,0.18); outline: none; }
.field select {
  background: var(--paper-soft); border: 1px solid #d7d5ce; border-radius: 10px; box-sizing: border-box;
  color: var(--ink); display: block; font-size: 14.5px; font-weight: 500; padding: 13px 14px; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field select:focus { background: #fff; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(185,146,74,0.18); outline: none; }
.field-hint { color: var(--muted); display: block; font-size: 11px; margin-top: 4px; }
.field.has-error input, .field.has-error select { border-color: var(--red); }
.field-error-message { color: var(--red); display: block; font-size: 11.5px; font-weight: 700; margin-top: 5px; }

.login-options { align-items: center; display: flex; font-size: 12px; justify-content: space-between; margin-top: 2px; }
.login-options label { align-items: center; color: var(--muted); display: flex; gap: 8px; }
.login-options input[type="checkbox"] { accent-color: var(--navy); height: 15px; width: 15px; }
.login-options button { background: transparent; border: 0; color: var(--navy); font-weight: 800; padding: 0; }
.login-options button:hover { text-decoration: underline; }
.login-button { width: 100%; margin-top: 6px; font-size: 14.5px; letter-spacing: 0.01em; }
.login-card > small { color: var(--muted); display: block; font-size: 11px; margin-top: 22px; text-align: center; line-height: 1.5; }

/* ---------- Header applicativo (due fasce, fisso in scroll) ---------- */
.admin-app { min-height: 100vh; }
.sticky-app-chrome { position: sticky; top: 0; z-index: var(--z-chrome); }
.app-header { background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 4px 16px rgba(12, 24, 40, 0.05); }
.app-header-inner {
  align-items: center; display: grid; gap: 28px; grid-template-columns: 1fr auto 1fr;
  margin: 0 auto; max-width: var(--content); min-height: 117px; padding: 0 24px;
}
/* Logo header a 109px (due ingrandimenti precedenti: 56->84->109, su
   richiesta del committente). La fascia è alta il minimo che lo contiene
   senza farlo toccare il bordo: 4px di margine sopra e sotto, non i 13px di
   prima — una barra più alta del necessario toglieva spazio utile alla
   pagina sotto per non aggiungere nulla che il logo da solo non dica già.
   Non applico qui lo stesso ingrandimento della login: lì il pannello ha
   molto più respiro verticale. Vale per ogni pagina del backend, perché
   tutte condividono .app-header da questo stesso foglio. */
.app-header .logo-lockup img { height: 109px; }
/* Logo di modulo (es. Imprenditometro), al posto della scritta "Sistema PCBI
   / Amministrazione" nelle pagine che appartengono a un modulo solo. Altezza
   propria, più bassa del marchio PCBI: il file è un lettering largo e basso
   (proporzione 5:1 circa), non un simbolo quadrato, e alla stessa altezza
   del logo PCBI sarebbe risultato larghissimo. */
.app-header .logo-lockup img.logo-modulo { height: 46px; }
.app-header .logo-lockup .logo-divider-header { background: var(--line); height: 56px; width: 1px; flex: none; }
.app-header .logo-lockup > span:last-child strong { color: var(--navy); font-size: 19px; font-weight: 750; }
.app-header .logo-lockup > span:last-child small { color: var(--gold); }
.app-header nav { align-self: center; display: flex; gap: 6px; align-items: center; }
.app-header nav a {
  /* justify-content:center: prima il testo restava ancorato a sinistra nel box da
     110px mentre il bordo inferiore (sottolineatura) copriva tutta la larghezza del
     box — risultato, riga non centrata sotto la parola. Ora testo e riga sono centrati
     insieme, per Clienti e per Impostazioni. */
  align-items: center; background: transparent; border: 0; border-bottom: 3px solid transparent;
  color: var(--muted); display: flex; justify-content: center; font-size: 15px; font-weight: 850; min-width: 110px;
  padding: 7px 18px 5px; line-height: 1.3;
}
.app-header nav a.active { border-bottom-color: var(--gold); color: var(--navy); }
.user-menu { align-items: center; display: flex; gap: 9px; justify-self: end; }
.online-dot { background: var(--green); border-radius: 50%; box-shadow: 0 0 0 4px rgba(47, 122, 77, 0.12); height: 8px; width: 8px; flex: none; }
.user-menu span:nth-child(2) strong, .user-menu span:nth-child(2) small { display: block; }
.user-menu span:nth-child(2) strong { color: var(--navy); font-size: 14px; }
.user-menu span:nth-child(2) small { color: var(--muted); font-size: 12px; }
.user-menu button { background: #fff; border: 1px solid var(--line); border-radius: 7px; color: var(--navy); font-size: 13px; font-weight: 800; margin-left: 5px; padding: 6px 9px; }
.prototype-notice { background: #0b1728; color: #b9c3d0; font-size: 12.5px; letter-spacing: 0.02em; padding: 6px 20px; text-align: center; }

/* ---------- Layout pagina ---------- */
.app-shell { margin: 0 auto; max-width: var(--content); padding: 22px 24px 72px; }
.page-heading { align-items: center; display: flex; gap: 24px; justify-content: space-between; margin-bottom: 14px; min-height: 58px; flex-wrap: wrap; }
.heading-copy { min-width: 0; }
.page-heading h1 { color: var(--navy); font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
.title-accent { color: var(--gold); }
.page-heading p { color: var(--muted); font-size: 15px; margin: 4px 0 0; }
.heading-count { align-items: baseline; display: flex; gap: 7px; }
.heading-count strong { color: var(--navy); font-size: 24px; font-weight: 800; }
.heading-count span { color: var(--muted); font-size: 13px; }
.heading-actions { align-items: center; display: flex; gap: 16px; }
/* Release del modulo che si sta configurando (Impostazioni, in alto a
   destra): allineata a destra e in scala minore del titolo, perché è un dato
   di servizio — serve saperlo, non è ciò per cui si è aperta la pagina. */
.release-ambito { display: grid; gap: 1px; text-align: right; line-height: 1.25; }
.release-ambito small { color: var(--gold); font-size: 10px; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }
.release-ambito strong { color: var(--muted); font-size: 12.5px; font-weight: 600; }
/* Terza riga facoltativa: la versione del METODO (versione_algoritmo), che
   avanza per conto suo rispetto alla release del modulo — un modulo può
   restare in release 2.4.0 mentre il metodo passa da 2.0 a 3.0. Le mostriamo
   entrambe per non farle confondere (REGOLA_UI_UX, correzione 7 agosto 2026). */
.release-ambito .algo-versione { color: var(--muted); font-size: 10.5px; font-weight: 600; opacity: .75; margin-top: 1px; }

/* ---------- Filtri: card + drawer interno ---------- */
.filters-card { background: #fff; border: 1px solid var(--line); border-radius: 13px; margin-bottom: 14px; padding: 14px; }
.filters-primary-row { align-items: end; display: grid; gap: 12px; grid-template-columns: minmax(280px, 1fr) auto auto auto auto auto; }
.search-field span { color: var(--muted); display: block; font-size: 11px; font-weight: 850; letter-spacing: 0.07em; margin-bottom: 5px; text-transform: uppercase; }
.search-field input, .filters-card select {
  background: var(--paper-soft); border: 1px solid #d8d6cf; border-radius: 8px; color: var(--ink);
  font-size: 14px; height: 42px; padding: 0 11px; width: 100%;
}
.filter-result { align-items: baseline; display: flex; gap: 6px; min-height: 42px; padding: 8px 4px; white-space: nowrap; }
.filter-result strong { color: var(--navy); font-size: 18px; }
.filter-result span { color: var(--muted); font-size: 12px; }
.filter-toggle-button { align-items: center; display: inline-flex; gap: 7px; justify-content: center; white-space: nowrap; }
.filter-toggle-button > .chev { font-size: 15px; line-height: 1; transform: rotate(-90deg); transition: transform 0.18s ease; display: inline-block; }
.filter-toggle-button.is-open > .chev { transform: rotate(0deg); }
.filter-toggle-button > .count {
  align-items: center; background: var(--navy); border-radius: 999px; color: #fff; display: inline-flex;
  font-size: 10px; height: 20px; justify-content: center; min-width: 20px; padding: 0 5px;
}
.export-csv-button { min-height: 42px; white-space: nowrap; }

.filters-drawer { border-top: 1px solid #e7e3dc; margin-top: 13px; padding-top: 13px; display: none; }
.filters-drawer.open { display: block; }
.filters-drawer-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.filters-drawer-heading > div strong, .filters-drawer-heading > div span { display: block; }
.filters-drawer-heading > div strong { color: var(--navy); font-size: 14px; }
.filters-drawer-heading > div span { color: var(--muted); font-size: 12px; margin-top: 2px; }
.reset-filter-button { background: transparent; border: 0; color: var(--navy); font-size: 12px; font-weight: 800; min-height: 42px; padding: 8px 5px; text-decoration: underline; }

.filter-groups-grid { display: grid; gap: 10px; grid-template-columns: 1.3fr 1fr 0.7fr; }
.filter-group { background: var(--paper-soft); border: 1px solid #e2ded6; border-radius: 10px; padding: 10px; }
.filter-group-title { color: var(--navy); display: block; font-size: 11px; font-weight: 850; letter-spacing: 0.06em; margin-bottom: 8px; text-transform: uppercase; }
.filter-group > div { display: grid; gap: 8px; }
.assetti-filter-group { border-left: 4px solid var(--navy); }
.assetti-filter-group > div { grid-template-columns: repeat(3, 1fr); }
.imprenditometro-filter-group { border-left: 4px solid var(--gold); }
.imprenditometro-filter-group > div { grid-template-columns: repeat(2, 1fr); }
.cos-filter-group { border-left: 4px solid var(--green); }
.filter-group label > span { color: var(--muted); display: block; font-size: 11px; font-weight: 850; letter-spacing: 0.07em; margin-bottom: 5px; text-transform: uppercase; }

/* ---------- Barra azioni multiple + avviso ---------- */
.bulk-actions { align-items: center; background: var(--navy); border-bottom: 3px solid var(--gold); border-radius: 13px; color: #fff; display: flex; justify-content: space-between; margin-bottom: 14px; padding: 12px 14px; flex-wrap: wrap; gap: 10px; }
.bulk-actions > div { align-items: center; display: flex; gap: 12px; }
.bulk-actions strong { font-size: 14px; }
.bulk-actions .link-button { background: transparent; border: 0; color: #c3cbd6; font-size: 12px; text-decoration: underline; }
.bulk-action-buttons { display: flex; gap: 10px; }
.bulk-action-buttons button, .danger-button, .invite-button { border-radius: 8px; font-size: 13px; font-weight: 850; min-height: 37px; padding: 8px 13px; }
.invite-button { background: var(--gold); border: 1px solid var(--gold); color: #132034; }
.danger-button { background: var(--red); border: 1px solid var(--red); color: #fff; }
.bulk-actions .danger-button { background: transparent; border-color: rgba(255, 255, 255, 0.45); }

.action-notice { align-items: center; background: var(--green-soft); border: 1px solid #b6d4be; border-radius: 10px; color: #245d3c; display: flex; font-size: 13px; font-weight: 700; justify-content: space-between; margin-bottom: 14px; padding: 10px 13px; }
.action-notice button { background: transparent; border: 0; color: inherit; font-size: 19px; line-height: 1; }

/* Stessa ricetta ambra dell'.avvertenza nei documenti di stampa isolati
   (report Imprenditometro/AssettiMetro): un avviso che non è un errore ma
   un limite da tenere presente leggendo ciò che segue. Qui condivisa per
   un pannello admin, non un documento a sé — un solo colore per lo stesso
   significato in tutto il sistema. */
.avviso-superato { border: 1px solid #E1CFA6; background: #FBF6E9; border-radius: 11px; padding: 12px 15px; font-size: 13px; line-height: 1.5; color: #7A5B18; margin-bottom: 14px; }

/* ---------- Tabella clienti: 5 zone ---------- */
/* overflow-x:auto (non più hidden): la colonna AssettiMetro qui sotto ha un minimo
   più largo per non far mai andare a capo "Relazione AI" — se lo schermo è troppo
   stretto per ospitare tutte e 5 le colonne, compare una barra di scorrimento
   orizzontale sulla card (intestazione e righe scorrono insieme, stesso contenitore)
   invece di schiacciare il contenuto. Scelta esplicita del committente (sesto giro). */
.clients-table-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 28px rgba(12, 24, 40, 0.04); overflow-x: auto; overflow-y: hidden; }
.table-grid {
  display: grid; gap: 14px;
  grid-template-columns: 24px minmax(200px, 0.85fr) minmax(220px, 0.9fr) minmax(260px, 1.05fr) minmax(320px, 1.35fr);
}
.table-head { background: #f1eee7; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 850; letter-spacing: 0.08em; padding: 11px 15px; text-transform: uppercase; }
.client-row { align-items: center; border-bottom: 1px solid #e8e5df; min-height: 112px; padding: 14px 15px; }
.client-row:last-child { border-bottom: 0; }
.client-row:hover { background: #fcfbf8; }
.client-row.is-selected { background: #eef6f5; box-shadow: inset 4px 0 0 #2d8177; }

.select-cell { align-items: center; display: flex; justify-content: center; }
.select-cell input { accent-color: var(--navy); cursor: pointer; height: 16px; margin: 0; width: 16px; }

.company-column { min-width: 0; }
.company-cell { align-items: center; background: transparent; border: 0; color: var(--ink); display: flex; gap: 11px; min-width: 0; padding: 0; text-align: left; width: 100%; }
.company-avatar {
  align-items: center; background: var(--navy); border-bottom: 3px solid var(--gold); border-radius: 10px; color: #fff;
  display: flex; flex: 0 0 38px; font-size: 19px; font-weight: 800; height: 38px; justify-content: center;
}
.company-cell > span:last-child { min-width: 0; }
.company-cell strong, .company-cell small, .company-cell em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.company-cell strong { color: var(--navy); font-size: 14px; }
.company-cell small { color: var(--ink); font-size: 12.5px; margin-top: 3px; }
.company-cell em { color: var(--muted); font-size: 11px; font-style: normal; margin-top: 3px; }
.row-actions { display: flex; gap: 7px; margin-left: 49px; margin-top: 9px; }
.row-action-button { background: #fff; border: 1px solid #cfd3d7; border-radius: 6px; color: var(--navy); font-size: 11px; font-weight: 850; min-height: 28px; padding: 5px 10px; }
.row-actions .delete-button { background: #fffafa; border-color: #dfb1ad; color: var(--red); }
.row-action-button:hover { background: #f1f4f7; }
.row-actions .delete-button:hover { background: var(--red-soft); }

/* min-width:0 sulla cella-griglia + nowrap/ellipsis sui campi: prima un'email o un
   indirizzo lunghi (nessuno spazio su cui andare a capo) uscivano dal bordo della
   colonna e si sovrapponevano visivamente ad AssettiMetro, invece di restare contenuti.
   Ora il testo che non entra viene troncato con i puntini: il dettaglio completo resta
   raggiungibile aprendo la scheda del cliente/attività, qui serve solo un'anteprima
   leggibile. */
.contact-cell { min-width: 0; }
.contact-cell strong, .contact-cell small, .contact-cell em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-cell strong { font-size: 12.5px; font-weight: 650; }
.contact-cell small { color: var(--muted); font-size: 11.5px; margin-top: 4px; }
.contact-cell em { color: var(--muted); font-size: 11px; font-style: normal; margin-top: 8px; }

/* align-self:start deliberato su entrambe: .client-row usa align-items:center
   sull'intera riga, quindi senza questo le due celle si centrano sull'altezza
   della più alta (questa, che ha Report/Relazione sotto al bottone) e i bottoni
   modulo finiscono a quote diverse invece di partire tutti dalla stessa riga. */
.assettimetro-cell { align-self: start; display: grid; gap: 6px; grid-template-columns: 1fr; }
/* Ogni nuova compilazione dello stesso cliente crea una riga propria: prima
   restava corretta nel database ma irraggiungibile, perché il riquadro del
   modulo apre sempre e solo l'ultima. Questo pulsante rende visitabili
   anche le altre — il caso segnalato il 5 agosto 2026, con lo storico che
   una scorciatoia di collaudo aveva reso evidente. */
.storico-link { background: transparent; border: 0; padding: 0; color: var(--rosso); font-size: 11.5px; font-weight: 700; text-align: left; text-decoration: underline; text-underline-offset: 2px; }
.storico-link:hover { color: var(--navy); }
/* Un pulsante che si legge come un collegamento dentro una frase — per
   saltare a un'altra sezione di Impostazioni senza uscire dal discorso
   che la introduce (es. "la chiave si collega da Generali → ..."). */
.link-inline { background: transparent; border: 0; padding: 0; margin: 0; color: var(--gold2); font: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.link-inline:hover { color: var(--navy); }
/* flex-wrap:nowrap deliberato: con il nuovo minimo di colonna (260px) Report e
   Relazione AI stanno sempre sulla stessa riga per costruzione, non "di solito" —
   se lo schermo è stretto scorre la card (vedi .clients-table-card), non va a capo
   il contenuto interno. */
.assetti-documents { display: flex; gap: 14px; padding: 0 2px; flex-wrap: nowrap; }
.assetti-documents > div { align-items: center; display: flex; gap: 6px; }
.assetti-documents small { color: var(--muted); font-size: 10.5px; font-weight: 750; }

.delivery-badge { background: #edf0f3; border-radius: 999px; color: var(--gray-dark); font-size: 10.5px; font-weight: 850; padding: 4px 7px; white-space: nowrap; }
.delivery-inviato, .delivery-inviata, .delivery-generato { background: var(--green-soft); color: var(--green); }
.delivery-invio-fallito, .delivery-errore { background: var(--red-soft); color: var(--red); }
.delivery-non-generato, .delivery-non-generata { background: #fff2dd; color: #825b16; }
.delivery-non-disponibile { background: var(--gray); color: var(--gray-dark); }

.modules-cell { align-items: start; align-self: start; display: grid; gap: 7px; grid-template-columns: repeat(2, 1fr); }
.module-with-document { display: grid; gap: 6px; }
/* gap:6px al posto di justify-content:space-between: quella regola spingeva "Report"
   a sinistra e il badge all'estremo opposto (con 2 soli figli, space-between li separa
   al massimo). Ora segue lo stesso schema di .assetti-documents > div — etichetta
   seguita subito dal badge, coerente con la colonna AssettiMetro. */
.module-document-status { align-items: center; display: flex; gap: 6px; padding: 0 3px; }
.module-document-status > small { color: var(--muted); font-size: 10.5px; font-weight: 750; }

.module-button {
  align-items: center; background: var(--gray); border: 1px solid #d7d4cd; border-radius: 9px; color: var(--gray-dark);
  display: grid; gap: 7px; grid-template-columns: 27px 1fr auto; min-height: 54px; padding: 7px 8px; text-align: left; width: 100%;
}
.module-icon { align-items: center; background: rgba(255, 255, 255, 0.6); border-radius: 7px; display: flex; font-size: 15px; font-weight: 800; height: 27px; justify-content: center; width: 27px; }
.module-button strong, .module-button small { display: block; }
.module-button strong { font-size: 12px; }
.module-button small { font-size: 10.5px; margin-top: 2px; }
.module-button > b.chev { font-size: 15px; }
.module-button:disabled { cursor: default; }

.module-button.assettimetro.state-completato,
.module-button.assettimetro.state-in-compilazione { background: var(--navy); border-color: var(--navy); color: #fff; }
.module-button.imprenditometro.state-completato { background: var(--gold); border-color: var(--gold); color: #101b2a; }
.module-button.imprenditometro.state-in-compilazione,
.module-button.imprenditometro.state-invitato,
.module-button.imprenditometro.state-aperto,
.module-button.imprenditometro.state-da-attivare { background: var(--gold-soft); border-color: #d9c28e; color: #6f5421; }
.module-button.state-invio-fallito,
.module-button.state-scaduto,
.module-button.state-revocato { background: var(--red-soft); border-color: #e7aaa5; color: var(--red); }
.module-button.cos.state-completato,
.module-button.cos.state-in-compilazione { background: var(--green); border-color: var(--green); color: #fff; }
.module-button.state-non-disponibile { background: var(--gray); border-color: #d7d4cd; color: var(--gray-dark); opacity: .85; }

/* Riga Imprenditometro non ancora completata: il modulo-button (sola lettura
   dello stato) resta com'è, con sotto un tasto stretto per l'unica azione
   manuale che l'admin può fare da qui — generare e inviare il link. */
.modulo-con-invio { display: grid; gap: 5px; }
.invite-mini-button { background: var(--gold-soft); border-color: #d9c28e; color: #6f5421; width: 100%; }
.invite-mini-button:disabled { cursor: default; opacity: .6; }

.empty-state { color: var(--muted); font-size: 15px; padding: 45px; text-align: center; }

/* ---------- Conferma cancellazione (modale) ----------
   La .modal-backdrop che stava qui è stata rimossa: era una seconda
   definizione dello stesso elemento, in conflitto con quella del blocco
   MASCHERE più in basso. Ne resta una sola, là. */
.confirm-dialog { background: #fff; border-radius: 17px; box-shadow: 0 28px 70px rgba(5, 13, 23, 0.3); max-height: 90vh; max-width: 460px; overflow-y: auto; padding: 28px; width: 100%; }
.dialog-icon { align-items: center; background: var(--red-soft); border-radius: 50%; color: var(--red); display: flex; font-size: 20px; font-weight: 900; height: 42px; justify-content: center; margin-bottom: 17px; width: 42px; }
.confirm-dialog h2 { color: var(--navy); font-size: 24px; font-weight: 800; line-height: 1.18; margin: 8px 0 10px; }
.confirm-dialog p { color: var(--muted); font-size: 14px; line-height: 1.65; margin: 0; }
.dialog-actions { display: flex; gap: 9px; justify-content: flex-end; margin-top: 24px; }

/* ---------- Form anagrafica cliente (modale, condivisa da Modifica/Nuovo cliente) ---------- */
.form-dialog { max-width: 640px; }
.client-form { display: grid; gap: 16px 18px; grid-template-columns: repeat(2, 1fr); margin-top: 20px; }
.client-form .field-full { grid-column: 1 / -1; }
.client-form .dialog-actions { grid-column: 1 / -1; margin-top: 6px; }
.client-form-divider { border-top: 1px solid #ece8df; margin-top: 6px; padding-top: 16px; }
.client-form-divider .eyebrow { margin-bottom: 5px; }
.client-form-divider small { color: var(--muted); display: block; font-size: 11.5px; line-height: 1.5; }

/* ---------- Scheda AssettiMetro / Scheda Cliente (modali di dettaglio) ---------- */
.detail-dialog { max-width: 760px; position: relative; }
.modal-close-button { background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 22px; line-height: 1; padding: 4px; position: absolute; right: 16px; top: 16px; }
.modal-close-button:hover { color: var(--navy); }
.detail-header { align-items: flex-start; display: flex; gap: 14px; margin-bottom: 6px; padding-right: 28px; }
.detail-icon { background: var(--navy); border-radius: 12px; color: #fff; flex: none; font-size: 21px; font-weight: 800; height: 50px; width: 50px; }
.detail-header .company-avatar { flex: 0 0 50px; font-size: 21px; height: 50px; }
.detail-header h2 { color: var(--navy); font-size: 21px; font-weight: 800; margin: 3px 0 4px; }
.detail-subtitle { color: var(--muted); font-size: 12.5px; margin: 0; }
.detail-edit-button, #am-modal-badge { align-self: flex-start; margin-left: auto; white-space: nowrap; }

.state-badge { border-radius: 999px; display: inline-block; font-size: 11.5px; font-weight: 850; padding: 5px 12px; white-space: nowrap; }
.state-badge.tone-ok { background: var(--green-soft); color: var(--green); }
.state-badge.tone-warn { background: #fff2dd; color: #825b16; }
.state-badge.tone-gold { background: var(--gold-soft); color: #6f5421; }
.state-badge.tone-danger { background: var(--red-soft); color: var(--red); }
.state-badge.tone-neutral { background: var(--gray); color: var(--gray-dark); }

.demo-data-notice { background: var(--gold-soft); border-radius: 8px; color: #6f5421; font-size: 11.5px; font-weight: 700; margin: 16px 0; padding: 8px 12px; }

.detail-empty-state { padding: 28px 4px 8px; text-align: center; }
.detail-empty-state p { color: var(--muted); font-size: 14px; line-height: 1.65; margin: 0 auto 18px; max-width: 440px; }

.kpi-grid { display: grid; gap: 10px; grid-template-columns: repeat(4, 1fr); margin: 0 0 18px; }
.kpi-card { background: var(--paper-soft); border: 1px solid #e2ded6; border-radius: 10px; display: flex; flex-direction: column; gap: 4px; padding: 12px; }
.kpi-card.kpi-primary { align-items: center; background: var(--navy); border-color: var(--navy); flex-direction: row; grid-column: 1 / -1; justify-content: space-between; padding: 16px 20px; }
.kpi-value { color: var(--navy); font-size: 21px; font-weight: 800; order: 1; }
.kpi-label { color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: 0.04em; order: 2; text-transform: uppercase; }
.kpi-primary .kpi-value { color: #fff; font-size: 32px; order: 2; }
.kpi-primary .kpi-label { color: var(--gold); order: 1; }

.pillar-table { border-collapse: collapse; margin-bottom: 18px; width: 100%; }
.pillar-table th { border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10.5px; font-weight: 750; letter-spacing: 0.05em; padding: 8px 10px; text-align: left; text-transform: uppercase; }
.pillar-table td { border-bottom: 1px solid var(--line); font-size: 13px; padding: 10px; vertical-align: middle; }
.pillar-bar-track { background: #ece9e2; border-radius: 999px; height: 8px; overflow: hidden; width: 110px; }
.pillar-bar-fill { background: var(--navy); height: 100%; }
.diag-badge { border-radius: 999px; font-size: 10.5px; font-weight: 850; padding: 4px 9px; white-space: nowrap; }
.diag-badge.diag-ok { background: var(--green-soft); color: var(--green); }
.diag-badge.diag-warn { background: #fff2dd; color: #825b16; }
.diag-badge.diag-danger { background: var(--red-soft); color: var(--red); }

.detail-documents { border-top: 1px solid #ece8df; display: flex; gap: 20px; margin-bottom: 4px; padding-top: 16px; }
.detail-documents > div { align-items: center; display: flex; gap: 7px; }
.detail-documents small { color: var(--muted); font-size: 11px; font-weight: 750; }
.detail-actions { flex-wrap: wrap; justify-content: flex-start !important; }
.detail-link-button { color: var(--navy); font-size: 12.5px; font-weight: 800; margin-left: auto; padding: 10px 0; }
.detail-link-button:hover { text-decoration: underline; }

.client-tabs { border-bottom: 1px solid var(--line); display: flex; gap: 4px; margin: 16px 0 18px; }
.client-tabs button { background: transparent; border: 0; border-bottom: 3px solid transparent; color: var(--muted); font-size: 13px; font-weight: 800; padding: 9px 12px 8px; }
.client-tabs button.active { border-bottom-color: var(--gold); color: var(--navy); }
.tab-summary-card { background: var(--paper-soft); border: 1px solid #e2ded6; border-radius: 12px; padding: 20px; }
.tab-summary-card p { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin: 10px 0 16px; }
.tab-summary-card > .primary-button { margin-top: 2px; }

/* ---------- Scheda AssettiMetro: pagina dedicata (non più modale — vedi dev-note in
   dashboard.html, "Undicesimo giro"). Riusa i token e diversi pattern delle modali di
   dettaglio qui sopra (.state-badge, .kpi-grid, .pillar-table, .demo-data-notice),
   aggiungendo solo ciò che una pagina intera permette e un modal no. ---------- */
.am-back-link { align-items: center; color: var(--muted); display: inline-flex; font-size: 13px; font-weight: 800; gap: 6px; margin-bottom: 16px; }
.am-back-link:hover { color: var(--navy); text-decoration: underline; }

.am-page-header { align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 14px; display: flex; gap: 16px; margin-bottom: 16px; padding: 22px; }
.am-page-header .company-avatar { flex: 0 0 54px; font-size: 22px; height: 54px; }
.am-page-header h1 { color: var(--navy); font-size: 22px; font-weight: 800; margin: 4px 0 5px; }
.am-page-header .detail-subtitle { font-size: 13px; }
.am-page-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.am-page-actions button, .am-page-actions a { font-size: 12.5px; min-height: 38px; padding: 0 13px; white-space: nowrap; align-items: center; display: inline-flex; justify-content: center; }
.am-page-actions .danger-button { min-height: 38px; }

.am-section { background: #fff; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 16px; padding: 22px; }
.am-section h2 { color: var(--navy); font-size: 15px; font-weight: 800; margin: 0 0 4px; }
.am-section-lead { color: var(--muted); font-size: 12.5px; margin: 0 0 16px; }

.public-link-row { align-items: center; border-bottom: 1px solid #ece8df; display: flex; gap: 14px; padding: 13px 0; }
.public-link-row:first-child { padding-top: 0; }
.public-link-row:last-child { border-bottom: 0; padding-bottom: 0; }
.public-link-row > div:first-child { flex: 1; min-width: 0; }
.public-link-row strong { color: var(--navy); display: block; font-size: 13px; }
.public-link-row code { background: var(--paper-soft); border-radius: 6px; color: var(--muted); display: block; font-size: 11px; margin-top: 5px; overflow: hidden; padding: 4px 8px; text-overflow: ellipsis; white-space: nowrap; }
.public-link-actions { display: flex; flex: none; gap: 6px; }
.public-link-actions button { font-size: 11.5px; min-height: 32px; padding: 0 10px; }

.relazione-meta-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.relazione-meta-block > .eyebrow { margin-bottom: 6px; }
.relazione-meta-block strong { color: var(--navy); display: block; font-size: 13.5px; }
.relazione-meta-block small { color: var(--muted); display: block; font-size: 11.5px; line-height: 1.5; margin-top: 3px; }

.qa-list { display: flex; flex-direction: column; gap: 16px; }
.qa-item small { color: var(--muted); display: block; font-size: 11px; font-weight: 750; letter-spacing: 0.03em; text-transform: uppercase; }
.qa-item p { color: var(--ink); font-size: 13.5px; line-height: 1.55; margin: 5px 0 0; }

/* ---------- Impostazioni: 4 tab + sidebar ---------- */
.settings-module-tabs { display: grid; gap: 10px; grid-template-columns: repeat(4, 1fr); margin-bottom: 14px; }
.settings-module-tabs > button { align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 11px; color: var(--navy); display: flex; gap: 11px; padding: 13px; text-align: left; }
.settings-module-tabs > button.active { border-color: var(--navy); box-shadow: inset 0 -3px 0 var(--navy); }
.settings-module-tabs > button.assettimetro.active { border-color: var(--red); box-shadow: inset 0 -3px 0 var(--red); }
.settings-module-tabs > button.imprenditometro.active { border-color: var(--gold); box-shadow: inset 0 -3px 0 var(--gold); }
.settings-module-tabs > button.cos.active { border-color: var(--green); box-shadow: inset 0 -3px 0 var(--green); }
.settings-module-symbol { align-items: center; background: #ece9e2; border-radius: 8px; display: flex; font-size: 19px; font-weight: 800; height: 38px; justify-content: center; width: 38px; flex: none; }
.settings-module-tabs button.assettimetro .settings-module-symbol { background: var(--red); color: #fff; }
.settings-module-tabs button.imprenditometro .settings-module-symbol { background: var(--gold); color: var(--navy); }
.settings-module-tabs button.cos .settings-module-symbol { background: var(--green); color: #fff; }
.settings-module-tabs strong, .settings-module-tabs small { display: block; }
.settings-module-tabs strong { font-size: 14px; }
.settings-module-tabs small { color: var(--muted); font-size: 11px; margin-top: 3px; }

/* minmax(0,1fr), non 1fr nudo: una colonna a 1fr non si restringe mai sotto
   il contenuto minimo di ciò che contiene. Bastava un campo di testo lungo
   (Impostazioni → AssettiMetro → Aree e pesi → "Frase di aggancio") perché
   la colonna dei contenuti si allargasse oltre la finestra invece di andare
   a capo, spingendo fuori dalla vista l'intera pagina — il difetto
   segnalato il 5 agosto 2026. minmax(0,1fr) dice alla colonna che può
   restringersi fino a zero: da lì in poi è il contenuto interno (qui,
   .rowflex con flex-wrap) a decidere se andare a capo, non la griglia a
   spingersi oltre lo schermo. */
.settings-layout { align-items: start; display: grid; gap: 14px; grid-template-columns: 235px minmax(0,1fr); }
.settings-sidebar { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 15px; }
.settings-sidebar > .eyebrow { margin: 2px 8px 10px; }
.settings-sidebar button { align-items: center; background: transparent; border: 0; border-radius: 7px; color: var(--muted); display: flex; font-size: 12.5px; font-weight: 700; justify-content: space-between; padding: 9px 8px; text-align: left; width: 100%; }
.settings-sidebar button.active { background: #f0ede6; color: var(--navy); font-weight: 850; }
.settings-content { background: #fff; border: 1px solid var(--line); border-radius: 12px; min-height: 460px; padding: 24px; }
.draft-badge { background: var(--gold-soft); border-radius: 999px; color: #71531c; font-size: 11px; font-weight: 850; padding: 5px 9px; }
.configuration-note { border-left: 4px solid var(--gold); margin-top: 18px; padding: 7px 0 7px 14px; }
.configuration-note span, .configuration-note strong { display: block; }
.configuration-note span { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.configuration-note strong { color: var(--navy); font-size: 18px; font-weight: 800; margin: 5px 0; }
.settings-actions { border-top: 1px solid var(--line); display: flex; gap: 9px; justify-content: flex-end; margin-top: 28px; padding-top: 16px; }

/* ---------- Impostazioni: liste preimpostate (Anagrafiche) ---------- */
.preset-list-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); margin-top: 18px; }
.preset-list-card { background: var(--paper-soft); border: 1px solid #e2ded6; border-radius: 12px; padding: 14px; }
.preset-list-card > strong { color: var(--navy); display: block; font-size: 12.5px; margin-bottom: 10px; }
.preset-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; min-height: 26px; }
.preset-empty { color: var(--muted); font-size: 11.5px; font-style: italic; }
.preset-chip { align-items: center; background: #fff; border: 1px solid #d7d4cd; border-radius: 999px; color: var(--ink); display: inline-flex; font-size: 11.5px; gap: 6px; padding: 4px 6px 4px 10px; }
.preset-chip button { background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }
.preset-chip button:hover { color: var(--red); }
.preset-add-form { display: flex; gap: 7px; }
.preset-add-form input { background: #fff; border: 1px solid #d7d5ce; border-radius: 8px; flex: 1; font-size: 12.5px; min-width: 0; padding: 8px 10px; }
.preset-add-form button { font-size: 11.5px; min-height: auto; padding: 8px 10px; white-space: nowrap; }

/* ---------- Tabelle utenti (impostazioni · Generali) ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.table td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 13.5px; }
.table tr:last-child td { border-bottom: none; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.badge--success { background: var(--green-soft); color: var(--green); }
.badge--warning { background: var(--gold-soft); color: #7d5b1d; }
.badge--neutral { background: var(--gray); color: var(--gray-dark); }
.badge--danger { background: var(--red-soft); color: var(--red); }
.badge--gold { background: var(--gold-soft); color: #765820; }

/* Colonna azioni della tabella "Utenti e autorizzazioni": .secondary-button è pensato per
   la barra azioni di un pannello (min-height 42px, padding largo) — dentro una cella stretta
   della tabella, due bottoni affiancati andavano a capo. Stessa idea compatta già in uso in
   .row-action-button (dashboard.html, azioni riga cliente), qui declinata per questa tabella:
   bottoni piccoli, riga singola, nessun a capo anche con due azioni nella stessa cella. */
.table-actions { display: flex; flex-wrap: nowrap; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.table-action-button {
  background: #fff; border: 1px solid #cdd0d1; border-radius: 6px; color: var(--navy);
  font-size: 11.5px; font-weight: 800; min-height: 30px; padding: 5px 10px; white-space: nowrap;
}
.table-action-button:hover { background: #f1f4f7; }
.table-action-button:disabled { opacity: .55; cursor: not-allowed; }
.table th:last-child, .table td:last-child { text-align: right; }

.dev-note { margin-top: 32px; padding: 14px 18px; border: 1px dashed var(--gold); background: #fffdf6; border-radius: 12px; font-size: 12.5px; color: var(--navy); }
.dev-note strong { color: #8a6c26; }
.dev-note code { background: #f1eee7; padding: 1px 5px; border-radius: 4px; }

/* ---------- Impostazioni: pannelli di configurazione (giro 30/07/2026 — nuovi rami) ----------
   Classi generiche riusate da tutti i pannelli reali di Generali e AssettiMetro.
   Sostituiscono il pattern .rowflex/.card del sorgente admin reale (assettimetro_admin.html)
   con lo stesso stile del design system PCBI: bordi chiari, sfondo paper-soft, gap coerenti
   con .preset-list-card. Non introducono nuovi colori né dimensioni fuori scala. */
.settings-card { background: var(--paper-soft); border: 1px solid #e2ded6; border-radius: 12px; padding: 16px 18px; margin-top: 16px; }
.settings-card > h3 { color: var(--navy); font-size: 14px; font-weight: 800; margin: 0 0 4px; }
.settings-card > h4 { color: var(--navy); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin: 14px 0 6px; }
.settings-hint { color: var(--muted); font-size: 12.5px; line-height: 1.55; margin: 0 0 12px; }
/* align-items:end: quando una label va a capo (es. "Max tentativi accesso prima del
   blocco temporaneo") l'input di quella colonna si allineava più in basso e le colonne
   sembravano "sconclusionate". Con align-items:end tutti gli input restano sulla stessa
   baseline anche a label multi-riga. */
.settings-card-row { display: grid; gap: 12px 16px; grid-template-columns: repeat(2, 1fr); margin-top: 8px; align-items: end; }
.settings-card-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.settings-card-row.cols-4 { grid-template-columns: repeat(4, 1fr); }
.settings-card-row.stacked { grid-template-columns: 1fr; }
.settings-card-row .field-full { grid-column: 1 / -1; }
/* Label a due righe fisse: evita che un pannello con una label lunga (Sicurezza) e uno
   con label corte (Email) abbiano etichette a livello diverso. Costa 4px di spazio in più
   nei casi corti — trascurabile. */
.settings-card-row .settings-field > label { min-height: 28px; line-height: 1.35; display: flex; align-items: flex-end; }

/* label + input compatti per i pannelli impostazioni (più piccoli dei .field usati in login,
   che hanno padding generoso). Riprendono i token già presenti — no colori nuovi. */
.settings-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.settings-field > label { color: var(--navy); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.settings-field input, .settings-field select, .settings-field textarea {
  background: #fff; border: 1px solid #d7d5ce; border-radius: 8px; color: var(--ink);
  font-size: 13px; padding: 8px 10px; width: 100%; box-sizing: border-box;
}
.settings-field textarea { min-height: 80px; resize: vertical; font-family: inherit; line-height: 1.5; }
.settings-field input:focus, .settings-field select:focus, .settings-field textarea:focus {
  background: #fff; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(185,146,74,0.18); outline: none;
}
.settings-field input[readonly] { background: #f2efe8; color: var(--muted); }
.settings-field small { color: var(--muted); font-size: 11px; margin-top: 3px; }
.settings-field.has-error input, .settings-field.has-error textarea { border-color: var(--red); }

/* Interruttore on/off — coerente con il "pill" del sorgente reale (assettimetro_admin.html
   riga 522, class="switch"). Riusa le variabili di colore già in :root. */
.toggle-switch { align-items: center; background: #fff; border: 1px solid #d7d5ce; border-radius: 999px;
  color: var(--navy); cursor: pointer; display: inline-flex; font-size: 12.5px; font-weight: 700;
  gap: 8px; padding: 8px 14px; user-select: none; min-height: 36px; }
.toggle-switch input { accent-color: var(--navy); cursor: pointer; height: 15px; margin: 0; width: 15px; }
.toggle-switch.is-off { color: var(--muted); }
/* Toggle dentro un .settings-field: si comporta come un input, allineamento coerente
   con select/input della riga. */
.settings-field .toggle-switch { width: 100%; justify-content: flex-start; }

/* Tabella matrice pesi (Aree e pesi + Coefficiente 2086). Riga totale con .sum-ok/.sum-ko
   verde/rosso, sullo stesso registro cromatico di .badge--success/--danger. */
.settings-matrix { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 8px; font-size: 12.5px; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.settings-matrix th, .settings-matrix td { padding: 8px 10px; text-align: center; vertical-align: middle; border-right: 1px solid #efeae0; border-bottom: 1px solid #efeae0; }
.settings-matrix th:last-child, .settings-matrix td:last-child { border-right: 0; }
.settings-matrix tbody tr:last-child td { border-bottom: 0; }
/* Intestazioni nere in grassetto (era var(--muted), grigio, su richiesta esplicita del
   committente: "messa in nero e in grassetto tutta la riga delle intestazioni, di tutto"). */
.settings-matrix thead th { background: var(--paper-soft); color: var(--ink); font-size: 10.5px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
/* Allineamento a sinistra SOLO sulla colonna "etichetta di riga" (es. Area in Aree e pesi),
   non più su ":first-child" generico — quella regola colpiva per errore anche la colonna
   "Da" della tabella Coefficiente 2086, che è un valore numerico e va centrata come le
   altre due colonne (Committente, 31/07/2026). */
.settings-matrix th.row-label, .settings-matrix td.row-label { text-align: left; }
.settings-matrix td.row-label { background: var(--paper-soft); color: var(--navy); font-weight: 800; }
.settings-matrix input[type="number"] { display: block; margin: 0 auto; width: 74px; padding: 6px 8px; border: 1px solid #d7d5ce; border-radius: 6px; font-size: 12.5px; background: #fff; text-align: center; font-variant-numeric: tabular-nums; }
.settings-matrix input[type="number"]:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(185,146,74,0.18); }
.settings-matrix tfoot td {
  background: var(--paper-soft); border-top: 2px solid var(--navy); border-bottom: 0;
  color: var(--navy); font-weight: 800; text-transform: uppercase; font-size: 11px; letter-spacing: .07em;
  padding: 10px 8px;
}
.settings-matrix tfoot td:first-child { text-align: left; color: var(--navy); }
/* Cella "Totale" con stacco chiaro: sfondo verde/rosso pieno, testo bianco, distinta da
   qualsiasi altra riga della matrice — impossibile non vederla. */
.sum-cell { text-align: center; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 800; letter-spacing: 0; text-transform: none; padding: 8px 6px !important; }
.sum-cell.sum-ok { background: var(--green) !important; color: #fff; border-radius: 6px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.sum-cell.sum-ko { background: var(--red) !important; color: #fff; border-radius: 6px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.settings-matrix-wrap { overflow-x: auto; border-radius: 10px; }

/* Banda soglia/etichetta/testo per Testi report — pattern a due colonne fisse. */
.band-row { display: grid; gap: 12px; grid-template-columns: 180px 1fr; align-items: start; padding: 10px 0; border-bottom: 1px dashed #e6e2d8; }
.band-row:last-child { border-bottom: 0; }
.band-soglia { display: flex; align-items: center; gap: 6px; }
.band-soglia span { color: var(--muted); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.band-soglia input { width: 78px; text-align: center; }

/* Domanda del questionario — blocco con badge tipo presidio + interruttore + textarea. */
.question-row { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px dashed #e6e2d8; }
.question-row:last-child { border-bottom: 0; }
.question-meta { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
.presidio-pill { border-radius: 999px; font-size: 10.5px; font-weight: 800; padding: 3px 9px; text-transform: uppercase; letter-spacing: .04em; }
.presidio-pill.presente { background: var(--green-soft); color: var(--green); }
.presidio-pill.preoccuparsi { background: var(--gold-soft); color: #71531c; }
.presidio-pill.verifica { background: var(--blue-soft); color: var(--navy-2); }
.presidio-pill.auto { background: var(--gray); color: var(--gray-dark); }
.question-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* Anteprima video (Parametri email → riquadro YouTube). Nessun nuovo colore, riusa
   .configuration-note come modello di riquadro chiaro con bordo. */
/* Anteprima video introduttivo: ridotta a max 320px larghezza (era full-width, con
   aspect-ratio 16/9 diventava enormemente dominante — commento del committente).
   Contenitore inline-block per non occupare tutta la larghezza della card. */
.video-preview { background: #fff; border: 1px solid #e2ded6; border-radius: 10px; margin-top: 12px; overflow: hidden; display: inline-block; max-width: 320px; width: 100%; }
.video-preview .frame { aspect-ratio: 16 / 9; background: #000; }
.video-preview iframe { border: 0; height: 100%; width: 100%; display: block; }
.video-preview .head { align-items: center; background: var(--paper-soft); border-bottom: 1px solid #e2ded6; color: var(--navy); display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 700; padding: 6px 10px; gap: 8px; }
.video-preview .head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-preview .head span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; flex: none; }
.video-preview.empty { align-items: center; color: var(--muted); display: inline-flex; font-size: 12.5px; font-style: italic; gap: 8px; padding: 14px 16px; min-height: 60px; max-width: 320px; }
.video-preview.empty .status-dot { background: var(--muted); border-radius: 50%; height: 8px; width: 8px; flex: none; }

/* Slot di upload PDF conoscenza (Relazione AI). Solo mostra nome file — nessuna estrazione. */
.pdf-slots { display: grid; gap: 10px; grid-template-columns: repeat(5, 1fr); margin-top: 12px; }
.pdf-slot { background: #fff; border: 1px dashed #d7d5ce; border-radius: 10px; padding: 10px; }
.pdf-slot b { color: var(--navy); display: block; font-size: 11.5px; margin-bottom: 6px; }
.pdf-slot input[type="file"] { font-size: 11.5px; width: 100%; }
.pdf-slot small { color: var(--muted); display: block; font-size: 11px; margin-top: 5px; }

/* Griglia AI: 5 box (uno wide) affiancati, come nel sorgente reale. */
.ai-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); margin-top: 14px; }
.ai-box { background: var(--paper-soft); border: 1px solid #e2ded6; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ai-box.wide { grid-column: 1 / -1; }
.ai-box h4 { color: var(--navy); font-size: 12px; font-weight: 800; letter-spacing: .06em; margin: 0; text-transform: uppercase; }
.ai-box textarea { background: #fff; border: 1px solid #d7d5ce; border-radius: 8px; font-family: inherit; font-size: 12.5px; line-height: 1.5; min-height: 110px; padding: 8px 10px; resize: vertical; }

/* Diagnostica — sezione con badge di stato, tabelle log. */
.diag-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.diag-checks .diag-badge { font-size: 11px; padding: 5px 10px; }

/* Salva panel — bottone azione singolo pannello (allineato a destra). */
.settings-panel-actions { display: flex; gap: 9px; justify-content: flex-end; margin-top: 18px; }

/* Barra CSV round-trip (Questionario, Aree e pesi): export/import di massa per
   modifiche via Excel o AI. Bordo oro tratteggiato, stessa cifra visiva delle
   demo-data-notice — comunica "azione operativa, non contenuto". */
.csv-toolbar {
  align-items: center; background: #fffdf6; border: 1px dashed var(--gold); border-radius: 12px;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  margin: 14px 0 4px; padding: 12px 16px;
}
.csv-toolbar > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 200px; }
.csv-toolbar strong { color: var(--navy); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.csv-toolbar small { color: var(--muted); font-size: 12px; }
.csv-toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.csv-toolbar-actions button { min-height: 36px; font-size: 12.5px; padding: 6px 14px; }

@media (max-width: 820px) {
  .settings-card-row, .settings-card-row.cols-3, .settings-card-row.cols-4 { grid-template-columns: 1fr; }
  .pdf-slots { grid-template-columns: repeat(2, 1fr); }
  .ai-grid { grid-template-columns: 1fr; }
  .band-row { grid-template-columns: 1fr; }
}

/* =========================================================
   RIDESIGN 30/07/2026 SERA — richiesta committente: "le schermate sono
   anonime, rendile accattivanti prendendo spunto dall'assettimetro admin".
   Le regole seguenti SOVRASCRIVONO deliberatamente alcune classi definite
   più in alto (.am-page-header, .kpi-card, .pillar-table, .qa-item) —
   ordine mantenuto per specificità e leggibilità di git blame.
   Fonte tipografica e cromatica: assettimetro_admin.html, righe 20-100.
   ========================================================= */

/* --- Fascia oro sotto l'header applicativo (era un semplice border-bottom
       grigio, ora è il "marchio" navy+oro dell'admin reale). --- */
.app-header { border-bottom: 3px solid var(--gold); box-shadow: 0 6px 20px rgba(12, 24, 40, 0.06); }

/* --- Titoli di pagina in serif per dare autorevolezza --- */
.page-heading h1 { font-family: var(--font-serif); font-weight: 600; font-size: 28px; letter-spacing: -0.02em; }
.eyebrow { color: var(--gold); font-weight: 900; }

/* --- Scheda AssettiMetro: header con avatar affiancato, non più flottante --- */
.am-page-header {
  align-items: center; background: linear-gradient(135deg, #fff 0%, var(--paper-soft) 100%);
  border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 16px;
  box-shadow: var(--shadow-soft); display: grid; grid-template-columns: auto 1fr auto;
  gap: 20px; margin-bottom: 20px; padding: 22px 26px;
}
.am-page-header .company-avatar { flex: none; height: 58px; width: 58px; font-size: 24px; border-radius: 12px; }
.am-page-header > div:nth-child(2) { min-width: 0; }
.am-page-header h1 { color: var(--navy); font-family: var(--font-serif); font-size: 26px; font-weight: 600; letter-spacing: -0.015em; margin: 2px 0 4px; line-height: 1.15; }
.am-page-header .detail-subtitle { color: var(--muted); font-size: 13.5px; margin: 0; }
.am-page-header #am-badge { align-self: center; font-size: 12px; padding: 6px 14px; }
.am-page-actions { grid-column: 1 / -1; border-top: 1px solid var(--line); margin: 4px -6px -4px; padding: 14px 6px 0; display: flex; gap: 8px; flex-wrap: wrap; }
.am-page-actions button, .am-page-actions a { font-size: 12.5px; min-height: 38px; }

/* --- KPI dell'indice 2086 — hero grande + 3 pilastri "in evidenza" + 4 secondari --- */
.kpi-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  border: 1px solid var(--navy); border-radius: 16px; box-shadow: 0 16px 42px rgba(12, 24, 40, 0.18);
  color: #fff; display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 18px; padding: 22px 28px; margin-bottom: 14px; position: relative; overflow: hidden;
}
.kpi-hero::after {
  content: ''; position: absolute; inset: auto -30px -30px auto; height: 160px; width: 160px;
  background: radial-gradient(circle at center, rgba(201,174,108,0.28) 0%, transparent 70%);
  pointer-events: none;
}
.kpi-hero .kpi-label { color: var(--gold-2); font-size: 11px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px; display: block; }
.kpi-hero h3 { color: #fff; font-family: var(--font-serif); font-size: 20px; font-weight: 500; margin: 0; }
.kpi-hero .kpi-value { color: #fff; font-family: var(--font-serif); font-size: clamp(48px, 6vw, 64px); font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.kpi-hero .kpi-tone { display: inline-block; margin-top: 8px; background: rgba(201,174,108,0.22); color: var(--gold-2); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 700; }

/* Griglia dei 3 pilastri — trattati come sotto-hero, non come KPI generici */
.kpi-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.kpi-pillar {
  background: linear-gradient(180deg, #fff, var(--paper-soft));
  border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px;
  box-shadow: var(--shadow-soft); position: relative;
}
.kpi-pillar::before {
  content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0;
  background: var(--gold);
}
.kpi-pillar .kpi-label { display: block; color: var(--muted); font-size: 10.5px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 8px; }
.kpi-pillar .kpi-value { display: block; color: var(--navy); font-family: var(--font-serif); font-size: 36px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.kpi-pillar .kpi-bar { background: var(--gray); border-radius: 999px; height: 6px; margin-top: 12px; overflow: hidden; }
.kpi-pillar .kpi-bar span { background: var(--navy); border-radius: 999px; display: block; height: 100%; }
.kpi-pillar.tone-ok::before { background: var(--green); }
.kpi-pillar.tone-ok .kpi-value { color: var(--green); }
.kpi-pillar.tone-ok .kpi-bar span { background: var(--green); }
.kpi-pillar.tone-warn::before { background: var(--amber); }
.kpi-pillar.tone-warn .kpi-value { color: var(--amber); }
.kpi-pillar.tone-warn .kpi-bar span { background: var(--amber); }
.kpi-pillar.tone-danger::before { background: var(--red); }
.kpi-pillar.tone-danger .kpi-value { color: var(--red); }
.kpi-pillar.tone-danger .kpi-bar span { background: var(--red); }

/* Griglia dei 4 KPI secondari (Inconsapevolezza, Continuità, Intercettazione, Rischio) */
.kpi-mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 4px; }
.kpi-mini {
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px; position: relative;
}
.kpi-mini .kpi-label { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.kpi-mini .kpi-value { color: var(--navy); font-family: var(--font-serif); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; margin-top: 2px; }
.kpi-mini .kpi-hint { color: var(--muted); font-size: 11px; }
.kpi-mini.tone-ok .kpi-value { color: var(--green); }
.kpi-mini.tone-warn .kpi-value { color: var(--amber); }
.kpi-mini.tone-danger .kpi-value { color: var(--red); }

/* --- Sezioni della scheda: card con eyebrow oro forte e titolo serif --- */
.am-section { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-soft); padding: 24px 26px; margin-bottom: 16px; }
.am-section > .eyebrow { color: var(--gold); font-size: 11px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px; display: block; }
.am-section h2 { color: var(--navy); font-family: var(--font-serif); font-size: 20px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 4px; }
.am-section-lead { color: var(--muted); font-size: 13px; margin: 0 0 18px; }

/* --- Tabella 8 aree: barra di progresso con colore per fascia, badge diagnosi pieno --- */
.pillar-table { border-collapse: separate; border-spacing: 0; width: 100%; }
.pillar-table thead th {
  background: var(--paper-soft); border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: 10.5px; font-weight: 900; letter-spacing: 0.09em;
  padding: 10px 12px; text-align: left; text-transform: uppercase;
}
.pillar-table thead th:first-child { border-top-left-radius: 10px; }
.pillar-table thead th:last-child { border-top-right-radius: 10px; }
.pillar-table tbody td { border-bottom: 1px solid #ece8df; font-size: 13px; padding: 12px; vertical-align: middle; }
.pillar-table tbody tr:last-child td { border-bottom: 0; }
.pillar-table tbody tr:hover td { background: var(--paper-soft); }
.pillar-table td:first-child { color: var(--navy); font-weight: 700; }
.pillar-table td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--navy); font-weight: 600; }
.pillar-cell {
  align-items: center; display: grid; grid-template-columns: 1fr auto; gap: 10px;
}
.pillar-bar-track {
  background: #ece9e2; border-radius: 999px; height: 8px; overflow: hidden; width: 100%; min-width: 90px;
}
.pillar-bar-fill { border-radius: 999px; display: block; height: 100%; background: var(--navy); transition: width .3s ease; }
.pillar-bar-fill.tone-ok { background: var(--green); }
.pillar-bar-fill.tone-warn { background: var(--amber); }
.pillar-bar-fill.tone-danger { background: var(--red); }
.pillar-value { color: var(--navy); font-size: 13px; font-weight: 700; min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; }

/* Badge diagnosi (Adeguato/Da rafforzare/Critico) pieni, con bordo colorato */
.diag-badge { border-radius: 999px; font-size: 11px; font-weight: 800; padding: 5px 12px; border: 1px solid transparent; letter-spacing: 0.02em; }
.diag-badge.diag-ok { background: var(--green-soft); color: #1e6739; border-color: #b9d9c2; }
.diag-badge.diag-warn { background: var(--amber-soft); color: var(--amber); border-color: #eacb93; }
.diag-badge.diag-danger { background: var(--red-soft); color: var(--red); border-color: #e7b7b1; }

/* --- Documenti: chip con bordo colorato + icona invece della sola pillola grigia --- */
.doc-chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.doc-chip {
  align-items: center; background: var(--paper-soft); border: 1px solid var(--line); border-radius: 12px;
  display: inline-flex; gap: 12px; padding: 12px 16px; min-width: 220px;
}
.doc-chip-icon { align-items: center; background: var(--navy); border-radius: 10px; color: var(--gold-2); display: flex; flex: none; font-size: 15px; font-weight: 800; height: 34px; width: 34px; justify-content: center; }
.doc-chip small { color: var(--muted); display: block; font-size: 10.5px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.doc-chip strong { color: var(--navy); display: block; font-size: 13.5px; margin-top: 2px; }
.doc-chip.state-ok { border-color: #b9d9c2; }
.doc-chip.state-ok .doc-chip-icon { background: var(--green); color: #fff; }
.doc-chip.state-warn { border-color: #eacb93; }
.doc-chip.state-warn .doc-chip-icon { background: var(--gold); color: #fff; }
.doc-chip.state-danger { border-color: #e7b7b1; }
.doc-chip.state-danger .doc-chip-icon { background: var(--red); color: #fff; }

/* --- Risposte del questionario: griglia a 2 col con box per-area, pill Sì/No/Parziale --- */
.qa-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.qa-box {
  background: var(--paper-soft); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.qa-box-head { align-items: center; display: flex; gap: 8px; }
.qa-box-head .eyebrow { color: var(--navy); font-size: 10.5px; margin: 0; }
.qa-item-row { border-top: 1px dashed #e6e2d8; padding-top: 10px; }
.qa-item-row:first-of-type { border-top: 0; padding-top: 0; }
.qa-item-row small { color: var(--ink); display: block; font-size: 12px; font-weight: 700; line-height: 1.4; margin-bottom: 4px; text-transform: none; letter-spacing: 0; }
.qa-item-row p { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin: 0; }
.qa-pill { border-radius: 999px; display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em; margin-right: 6px; padding: 2px 9px; text-transform: uppercase; vertical-align: middle; }
.qa-pill.si { background: var(--green-soft); color: #1e6739; border: 1px solid #b9d9c2; }
.qa-pill.no { background: var(--red-soft); color: var(--red); border: 1px solid #e7b7b1; }
.qa-pill.parziale { background: var(--amber-soft); color: var(--amber); border: 1px solid #eacb93; }

/* --- Collegamenti pubblici: riga con azione a destra, più leggibile --- */
.public-link-row { align-items: center; border-bottom: 1px solid #ece8df; display: flex; gap: 14px; padding: 14px 0; }
.public-link-row:last-child { border-bottom: 0; }
.public-link-row strong { color: var(--navy); display: block; font-family: var(--font-serif); font-size: 14.5px; font-weight: 600; }
.public-link-row code { background: var(--paper-soft); border: 1px dashed #d7d5ce; border-radius: 6px; color: var(--muted); display: inline-block; font-size: 11.5px; margin-top: 6px; padding: 4px 10px; }

/* --- Meta relazione consulenziale: 3 box con eyebrow oro forte --- */
.relazione-meta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.relazione-meta-block {
  background: var(--paper-soft); border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 10px; padding: 14px 16px;
}
.relazione-meta-block .eyebrow { color: var(--gold); font-size: 10.5px; font-weight: 900; letter-spacing: 0.12em; margin-bottom: 6px; }
.relazione-meta-block strong { color: var(--navy); display: block; font-family: var(--font-serif); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.relazione-meta-block small { color: var(--muted); display: block; font-size: 12px; margin-top: 4px; }

@media (max-width: 900px) {
  .kpi-pillars { grid-template-columns: 1fr; }
  .kpi-mini-grid { grid-template-columns: repeat(2, 1fr); }
  .qa-grid { grid-template-columns: 1fr; }
  .relazione-meta-grid { grid-template-columns: 1fr; }
  .kpi-hero { grid-template-columns: 1fr; text-align: left; padding: 20px 22px; }
  .kpi-hero .kpi-value { font-size: 48px; }
  .am-page-header { grid-template-columns: 1fr; text-align: left; }
  .am-page-header #am-badge { justify-self: flex-start; }
  .doc-chip { min-width: 0; flex: 1 1 100%; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .login-page { grid-template-columns: 1fr 1fr; }
  .login-brand { padding: 40px; }
  .table-grid { grid-template-columns: 24px minmax(220px, 1fr) minmax(320px, 1.35fr) minmax(280px, 1.15fr); }
  .table-head span:nth-child(3), .contact-cell { display: none; }
  .filters-primary-row { grid-template-columns: minmax(240px, 1fr) auto auto auto auto; }
  .filters-primary-row .filter-result { display: none; }
  .filter-groups-grid { grid-template-columns: 1fr 1fr; }
  .cos-filter-group { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .login-page { grid-template-columns: 1fr; }
  .login-brand { display: none; }
  .login-panel { padding: 26px; }
  .app-header-inner { grid-template-columns: 1fr auto; min-height: 74px; }
  .app-header nav { grid-column: 1 / -1; grid-row: 2; justify-content: center; min-height: 46px; }
  .logo-lockup .logo-separator, .logo-lockup > span:last-child { display: none; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .filters-primary-row { grid-template-columns: repeat(3, 1fr); }
  .filters-primary-row .search-field { grid-column: 1 / -1; }
  .filter-groups-grid { grid-template-columns: 1fr; }
  .cos-filter-group { grid-column: auto; }
  .assetti-filter-group > div, .imprenditometro-filter-group > div { grid-template-columns: 1fr; }
  .table-grid { display: block; }
  .table-head { display: none; }
  .client-row { display: grid; gap: 12px; }
  .select-cell { justify-content: flex-start; margin-bottom: -3px; }
  .bulk-actions { align-items: flex-start; flex-direction: column; gap: 10px; }
  .modules-cell { grid-template-columns: 1fr; }
  .module-button { min-height: 48px; }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-module-tabs { grid-template-columns: repeat(2, 1fr); }
  .preset-list-grid { grid-template-columns: 1fr; }
  .settings-sidebar { display: grid; gap: 5px; grid-template-columns: repeat(2, 1fr); }
  .settings-sidebar > .eyebrow { grid-column: 1 / -1; }
  .am-page-header { flex-direction: column; }
  .am-page-actions { margin-left: 0; }
  .relazione-meta-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .app-header-inner { padding: 0 14px; }
  .user-menu span:nth-child(2), .user-menu .online-dot { display: none; }
  .app-shell { padding: 22px 12px 60px; }
  .filters-primary-row, .filter-groups-grid, .settings-module-tabs, .client-form { grid-template-columns: 1fr; }
  .client-form .field-full { grid-column: auto; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-card.kpi-primary { grid-column: 1 / -1; }
  .client-tabs { flex-wrap: wrap; }
  .filters-primary-row .search-field { grid-column: auto; }
  .heading-actions { align-items: flex-start; flex-direction: column; }
  .assettimetro-cell { grid-template-columns: 1fr; }
  .export-csv-button, .reset-filter-button, .filter-toggle-button { width: 100%; }
  .filters-drawer-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
  .bulk-action-buttons { align-items: stretch !important; flex-direction: column; }
  .dialog-actions { align-items: stretch; flex-direction: column-reverse; }
  .settings-sidebar { display: block; }
  .am-page-actions { flex-direction: column; width: 100%; }
  .am-page-actions button, .am-page-actions a { width: 100%; }
  .relazione-meta-grid { grid-template-columns: 1fr; }
  .public-link-row { align-items: flex-start; flex-direction: column; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* ---------- Stampa: tabella dedicata (vedi dashboard.html) ---------- */
.print-table { display: none; }
@media print {
  @page { size: landscape; margin: 10mm; }
  body { font-size: 11px; background: #fff; }
  .sticky-app-chrome, .filters-card, .bulk-actions, .action-notice, .dev-note,
  .page-heading .secondary-button, .page-heading .primary-button,
  .clients-table-card, .empty-state { display: none !important; }
  .app-shell { padding: 0; max-width: none; }
  .page-heading { margin-bottom: 10px; }
  .print-table { display: table; width: 100%; border-collapse: collapse; font-size: 9.5px; }
  .print-table thead { display: table-header-group; }
  .print-table th, .print-table td { border: 1px solid #ccc; padding: 4px 6px; text-align: left; vertical-align: top; line-height: 1.35; }
  .print-table thead th { background: #f0f2f6; font-size: 8.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
  .print-table tr { page-break-inside: avoid; }
  .print-table td:first-child { width: 22%; }
  .print-table td:nth-child(2), .print-table td:nth-child(3) { width: 30%; }
  .print-table td:last-child { width: 14%; }
  .pt-sub { color: var(--muted); font-size: 8.5px; }
  .pt-ok { color: var(--green); font-weight: 700; }
  .pt-warn { color: #825b16; font-weight: 700; }
  .pt-danger { color: var(--red); font-weight: 700; }
  .pt-gold { color: #7d5b1d; font-weight: 700; }
  .pt-neutral { color: var(--muted); font-weight: 600; }
}

/* === ALIAS STORICI usati dai pannelli di amministrazione === */
:root{ --navy2:var(--navy-2); --gold2:var(--gold-2); --muto:var(--muted); --rosso:var(--red); --verde:var(--green); --r:13px; }

/* ==========================================================================
   STRATO 2 — componenti dell'amministrazione reale (da sistemapcbi.html)
   ========================================================================== */
.topbar{background:var(--navy);color:#fff;padding:12px clamp(16px,3vw,32px);display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:3px solid var(--gold)}
.topbar .brand{display:flex;align-items:center;gap:12px}
.topbar img{height:40px;width:auto;background:transparent;border-radius:0;padding:0;display:block;object-fit:contain}
.topbar .t{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold2)}
.topbar .who{font-size:12.5px;color:#C6CEDA}
.topbar .who button{margin-left:10px;background:none;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:8px;padding:4px 12px;font-size:12.5px}
.tabs{background:var(--paper);border-bottom:1px solid var(--line);padding:0 clamp(16px,3vw,32px);display:flex;gap:4px;overflow-x:auto}
.tabs button{border:none;background:none;padding:13px 16px;font-size:14px;font-weight:600;color:var(--muto);border-bottom:3px solid transparent;white-space:nowrap}
.tabs button.on{color:var(--navy);border-bottom-color:var(--gold)}
/* sotto-schede del menù Impostazioni */
.subtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.subtabs button{border:1px solid var(--line);background:var(--paper);border-radius:99px;padding:8px 14px;font-size:13px;font-weight:600;color:var(--muto)}
.subtabs button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.spane{display:none}.spane.on{display:block}
/* blocchi del questionario più alti (+2 righe) */
#p-domande textarea{min-height:112px}
/* griglia allineata per la scheda Collegamenti e chiavi */
.apigrid{display:grid;grid-template-columns:minmax(260px,1fr) minmax(320px,1.7fr);gap:12px 14px;align-items:end}
.apigrid label.small{white-space:nowrap}
.apiactions{display:flex;gap:8px;justify-content:flex-end;align-items:flex-end}
@media(max-width:820px){.apigrid{grid-template-columns:1fr}.apiactions{justify-content:flex-start}}
.wrap{max-width:1160px;margin:22px auto 70px;padding:0 clamp(16px,3vw,32px)}
.pane{display:none}.pane.on{display:block}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-bottom:16px}
.card h3{font-size:17px;margin-bottom:4px}
.hint{font-size:12.5px;color:var(--muto);margin-bottom:14px}
input,textarea,select{font:inherit;font-size:14px;border:1px solid #CFC9BB;border-radius:8px;padding:8px 10px;background:#FDFCFA;color:var(--ink);width:100%}
input:focus,textarea:focus{outline:2px solid #3F7EC0;outline-offset:1px}
textarea{resize:vertical;min-height:56px}
input[type=number]{text-align:right}
.btn{border-radius:9px;padding:9px 18px;font-size:13.5px;font-weight:600;border:1.5px solid var(--navy);background:var(--navy);color:#fff}
.btn:hover{background:var(--navy2)}
.btn.ghost{background:var(--paper);color:var(--navy)}
.btn.danger{background:var(--paper);border-color:#D8B5B1;color:var(--rosso)}
.btn.gold{background:var(--gold);border-color:var(--gold)}
.btn[disabled]{opacity:.5;cursor:wait}
.pill{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:99px;padding:3px 10px}
.pill.auto{background:#E6EDF6;color:#2C5382}.pill.presente{background:#E6EDF6;color:#2C5382}
.pill.preoccuparsi{background:#F0E3C8;color:#7A5A16}.pill.verifica{background:#E4EFE7;color:#255C3B}
/* Riga di domanda/area nei pannelli di configurazione: i dati brevi
   (codice, peso, interruttore) stanno su UNA riga sopra, il testo lungo
   occupa tutta la larghezza sotto. Prima erano incolonnati in una fascia
   fissa da 150px accanto al testo: quattro elementi impilati rendevano la
   riga alta il triplo del necessario mentre la colonna del testo restava
   stretta, e lo spazio a destra avanzava vuoto. Vale per entrambi i moduli,
   che condividono questa classe. */
.qrow{border-top:1px solid var(--line);padding:14px 0;display:grid;gap:10px}
.qmeta{display:flex;flex-direction:row;flex-wrap:wrap;gap:14px;align-items:center}
.qmeta .campo-inline{display:flex;align-items:center;gap:7px}
.qmeta .campo-inline label{margin:0;white-space:nowrap}
.switch{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muto);cursor:pointer;user-select:none}
.switch input{width:auto}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--navy);color:#fff;border-radius:10px;padding:11px 22px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s;z-index:var(--z-toast);max-width:90vw}
.toast.on{opacity:1;pointer-events:auto}
.toast.err{background:var(--rosso)}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:8px 9px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muto);white-space:nowrap}
td input[type=number]{width:70px;padding:6px 7px}
#tw th:not(:first-child),#tw td:not(:first-child){text-align:center}
#tw th:first-child,#tw td:first-child{text-align:left}
/* Stesso principio di #tw, generalizzato in una classe: intestazione e
   valore centrati sotto la stessa colonna, non allineati al bordo destro —
   una tabella di soli numeri brevi si legge peggio con testo giustificato a
   destra, l'occhio deve cercare la colonna invece di trovarla già sotto
   l'intestazione (richiesto dal proprietario il 7 agosto 2026, REGOLA 44).
   La prima colonna resta a sinistra: contiene testo lungo (nome dell'area),
   non un valore breve. */
.tab-centro th:not(:first-child),.tab-centro td:not(:first-child){text-align:center}
.tab-centro th:first-child,.tab-centro td:first-child{text-align:left}
/* Modificatore facoltativo: l'ultima colonna, quando contiene un giudizio
   testuale (un badge, non un numero breve), si legge meglio allineata a
   destra come le altre — segnalato dal proprietario il 10 agosto 2026 sulla
   tabella "Risultato" della scheda Imprenditometro backend. Non cambia la
   regola generale di .tab-centro: si applica solo dove la tabella porta
   anche questa classe. */
.tab-giudizio-destra th:last-child,.tab-giudizio-destra td:last-child{text-align:right}
#tw td input[type=number]{display:block;margin:0 auto;text-align:center}
#tw tfoot td:not(:first-child){font-weight:800;text-align:center}
tfoot td{font-weight:700}
.sum-ok{color:var(--verde)} .sum-ko{color:var(--rosso)}

/* ---------- Accesso: due colonne, come nel prototipo Sistema PCBI ----------
   La fascia scura di sinistra dichiara che cosa si sta per aprire (la
   piattaforma intera, non un singolo modulo) e mostra il percorso dei tre
   moduli; la carta di destra chiede solo le credenziali. Sotto i 900px le
   due colonne si impilano e la fascia di marca sparisce: su schermo stretto
   conta entrare, non l'effetto. */
.login-page{background:var(--cream);display:grid;grid-template-columns:minmax(460px,1.05fr) minmax(430px,.95fr);min-height:100vh}
.login-brand{background:radial-gradient(circle at 88% 12%,rgba(201,174,108,.22),transparent 25%),linear-gradient(145deg,#0D1D32,var(--navy));border-right:4px solid var(--gold);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(36px,6vw,72px)}
.logo-chip{background:#fff;border-radius:14px;padding:16px 26px;display:inline-flex;align-items:center}
.logo-chip img{height:72px;width:auto;object-fit:contain;display:block}
.login-kicker{color:var(--gold);display:block;font-size:11px;font-weight:850;letter-spacing:.15em;margin-bottom:18px;text-transform:uppercase}
.login-brand h1{font-family:var(--font-serif);font-weight:500;font-size:clamp(30px,3.6vw,44px);letter-spacing:-.015em;line-height:1.15;margin:0;max-width:620px}
.login-brand p{color:#BDC8D7;font-size:15.5px;line-height:1.75;margin:22px 0 0;max-width:600px}
.login-path{align-items:flex-start;display:flex}
.login-path__step{display:flex;flex-direction:column;align-items:center;gap:10px}
.login-path__step small{color:#B9C3D0;font-size:11px;font-weight:800;white-space:nowrap}
.login-path span{align-items:center;border-radius:50%;color:#fff;display:flex;font-size:12px;font-weight:900;height:36px;justify-content:center;width:36px;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.login-path .assetti{background:var(--navy-2);border:1px solid rgba(255,255,255,.3)}
.login-path .imprendi{background:var(--gold);color:var(--navy)}
.login-path .cos{background:var(--green)}
.login-path i{background:rgba(255,255,255,.25);height:1px;margin:17px 10px 0;width:44px;flex:none}
.login-panel{align-items:center;display:flex;justify-content:center;min-height:100vh;padding:48px}
.login-card{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);max-width:430px;width:100%;padding:44px 40px 36px}
.login-card__header{border-bottom:1px solid #ECE8DF;margin-bottom:28px;padding-bottom:24px}
.login-card h2{font-family:var(--font-serif);color:var(--navy);font-size:28px;font-weight:500;line-height:1.2;margin:10px 0 8px}
.login-card p.lead{color:var(--muted);font-size:14px;line-height:1.55;margin:0}
.login-form{display:flex;flex-direction:column;gap:18px}
.login-form .field{display:flex;flex-direction:column;gap:8px;width:100%}
.login-form .field label{color:var(--navy);font-size:11.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.login-form .field input{background:var(--paper-soft);border:1px solid #D7D5CE;border-radius:10px;font-size:14.5px;font-weight:500;padding:13px 14px;width:100%}
.login-form .field input:focus{background:#fff;border-color:var(--gold);box-shadow:0 0 0 3px rgba(185,146,74,.18);outline:none}
.login-button{width:100%;margin-top:6px;font-size:14.5px}
@media(max-width:900px){
  .login-page{grid-template-columns:1fr}
  .login-brand{display:none}
  .login-panel{padding:28px;min-height:auto;margin-top:40px}
}
.scroll-x{overflow-x:auto}
details.val{border:1px solid var(--line);border-radius:10px;background:var(--paper);margin-bottom:9px}
details.val summary{padding:13px 16px;cursor:pointer;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px}
details.val summary b{color:var(--navy)}
details.val .body{border-top:1px solid var(--line);padding:14px 16px;font-size:13px}
.grid-i{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:8px 0}
.grid-i div{background:#FBFAF6;border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.grid-i b{display:block;font-size:17px}
.rowflex{display:flex;gap:14px;flex-wrap:wrap}
.rowflex>div{flex:1;min-width:160px}
/* Riga a griglia, non a flex, per le file con tre campi corti e un
   pulsante (oggi solo "Aggiungi utente" in Impostazioni → Utenti e
   autorizzazioni). Con .rowflex il calcolo del punto di andata a capo
   dipendeva dal contenuto reale delle etichette e dal risultato del
   ridimensionamento flessibile, non dal solo min-width dichiarato: a
   parità di spazio disponibile scattava un a-capo che .rowflex non
   avrebbe dovuto fare, impilando tutti e quattro i campi in colonna e
   sprecando l'altezza della sezione — il difetto segnalato il 5 agosto
   2026. La griglia non ha questa ambiguità: tre colonne di larghezza
   uguale più una colonna della sola larghezza del pulsante, sempre sulla
   stessa riga finché il contenitore non scende sotto i 560px, soglia
   sotto la quale un desktop o un tablet non scendono e un telefono sì. */
.rowflex-utente{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:14px;align-items:end}
@media(max-width:560px){.rowflex-utente{grid-template-columns:1fr}}
label.small{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);margin-bottom:5px}
.savebar{position:sticky;bottom:0;background:linear-gradient(transparent,var(--cream) 30%);padding:14px 0 4px;display:flex;justify-content:flex-end;gap:10px}
.video-preview{margin-top:14px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#FBFAF6}
.video-preview .head{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--muto)}
.video-preview .frame{aspect-ratio:16/9;background:#14263F}
.video-preview iframe{display:block;width:100%;height:100%;border:0}
.video-preview.empty{padding:14px;color:var(--muto);font-size:13px}
.status-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;background:var(--rosso);vertical-align:-1px}
.status-dot.on{background:var(--verde)}
.toast-close{margin-left:12px;font-weight:900;opacity:.85;border-left:1px solid rgba(255,255,255,.4);padding-left:10px}
.release-tag{display:block;font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--gold2);opacity:.9;margin-top:2px;pointer-events:none}
/* risposte del questionario dentro il modal */
.modal-body .rgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.modal-body .rbox{background:#FBFAF6;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.modal-body .rbox .rt{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);margin-bottom:5px}
.modal-body .rbox .rq{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:4px 0;border-top:1px dashed var(--line)}
.modal-body .rbox .rq span{font-size:11.5px;line-height:1.3;color:#4A5261}
.modal-body .rbox .rq b{font-size:11.5px;white-space:nowrap}
.modal-body .rbox .rq b.voto{color:var(--navy)}.modal-body .rbox .rq b.si{color:var(--verde)}.modal-body .rbox .rq b.no{color:var(--rosso)}.modal-body .rbox .rq b.ns{color:var(--muto)}
@media(max-width:760px){.modal-body .rgrid{grid-template-columns:1fr}}
@media print{.release-tag{display:none!important}}

/* ============================================================
   BACKEND CLIENTI — archivio clienti e valutazioni, emergenze
   ============================================================ */
.admin-title{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.admin-title h2{font-size:clamp(24px,3vw,34px);margin-bottom:4px}
.admin-title p{color:var(--muto);font-size:14px;max-width:780px}
.admin-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.statgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 16px}
.stat{background:linear-gradient(180deg,#fff,#FBFAF6);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 10px 24px rgba(11,21,36,.05)}
.stat .k{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muto);font-weight:800}
.stat .v{font-family:'Fraunces',serif;font-size:32px;font-weight:700;color:var(--navy);line-height:1;margin-top:8px}
.stat .s{font-size:12px;color:var(--muto);margin-top:8px;line-height:1.25}
.stat.warn .v{color:#AD6E12}.stat.danger .v{color:var(--rosso)}.stat.ok .v{color:var(--verde)}
.toolbar{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px;display:grid;grid-template-columns:1.4fr .7fr .7fr auto;gap:10px;align-items:end;margin-bottom:12px}
.toolbar label{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muto);font-weight:800;display:block;margin-bottom:5px}
.toolbar .tool-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.table-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.client-table{font-size:12.5px}
.client-table th{position:sticky;top:0;background:#F6F2E8;z-index:2;white-space:nowrap;cursor:pointer}
.client-table th.no-sort{cursor:default}
.client-table td{vertical-align:middle}
.client-table tr:hover td{background:#FBFAF6}
.client-main{display:flex;flex-direction:column;gap:2px}
.client-main b{font-size:13.5px;color:var(--navy)}
.client-main span{font-size:11.5px;color:var(--muto)}
.badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:800;border:1px solid transparent;white-space:nowrap}
.badge.green{background:#E7F3EA;color:#236F3F;border-color:#B9D9C2}
.badge.amber{background:#FFF4E3;color:#A4600F;border-color:#EACB93}
.badge.red{background:#FBE9E7;color:#A9322A;border-color:#E7B7B1}
.badge.gray{background:#F2F4F7;color:#586070;border-color:#D9DEE7}
.badge.blue{background:#E9F1FA;color:#1D558C;border-color:#BED4EC}
.row-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.btn.xs{padding:6px 8px;font-size:11.5px;border-radius:8px}
.btn.blue{background:#1D3557;color:#fff}
.btn.green{background:#2F7A4D;color:#fff}
.btn.warn{background:#A76C19;color:#fff}
.selectionbar{display:none;background:#14263F;color:#fff;border-radius:14px;padding:11px 13px;margin-bottom:12px;align-items:center;justify-content:space-between;gap:12px}
.selectionbar.on{display:flex}
.selectionbar .sel-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.selectionbar .btn{background:#fff;color:var(--navy)}
.selectionbar .btn.danger{background:#B0352C;color:#fff}
.empty-state{background:var(--paper);border:1px dashed #CFC9BB;border-radius:16px;padding:28px;text-align:center;color:var(--muto)}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.detail-box{border:1px solid var(--line);border-radius:12px;background:#FBFAF6;padding:12px}
.detail-box .small{display:block;margin-bottom:3px}
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:14px 0}
.kpi{border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px;text-align:center}
.kpi span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muto);font-weight:800}
.kpi b{font-family:'Fraunces',serif;font-size:24px;color:var(--navy)}
.kpi b small{font-size:13px;font-weight:400;color:var(--muto)}
/* ---------- MASCHERE (modali) — definizione unica ----------
   Qui viveva una seconda .modal-backdrop con z-index:50, che vinceva su
   quella dichiarata più in alto (z-index:100) per semplice ordine di
   cascata. Risultato: la maschera finiva SOTTO la barra applicativa
   (.sticky-app-chrome, z-index:80) e l'intestazione — titolo e tasto
   Chiudi — spariva dietro di essa appena la finestra scorreva.

   Non era un difetto di questa o quella maschera: era il foglio di stile a
   dire due cose diverse sullo stesso elemento. Le regole stanno ora tutte
   qui, in un blocco solo, e la scala di sovrapposizione è dichiarata una
   volta in cima al file (vedi --z-*). Chi aggiunge una maschera nuova non
   deve più indovinare quale delle due definizioni sia quella buona.

   .modal-head è sticky dentro la card: l'intestazione resta visibile anche
   nelle maschere lunghe, così il tasto Chiudi non va mai cercato. */
.modal-backdrop{position:fixed;inset:0;background:rgba(11,21,36,.58);z-index:var(--z-modal);display:flex;align-items:flex-start;justify-content:center;padding:28px 16px;overflow:auto}
.modal-card{width:min(1120px,100%);background:var(--paper);border-radius:20px;border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.25);overflow:hidden}
.modal-head{background:var(--navy);color:#fff;padding:18px 22px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;position:sticky;top:0;z-index:1}
.modal-head .eyebrow{color:var(--gold);display:block;font-size:10.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
.modal-head h3{color:#fff;margin:0;font-size:24px;line-height:1.2}
.modal-head p{color:#C6CEDA;margin-top:4px;font-size:13px}
.modal-body{padding:18px 22px}
.modal-close{border:none;background:rgba(255,255,255,.12);color:#fff;border-radius:10px;padding:8px 10px;font-weight:800;cursor:pointer;flex:none}
.modal-close:hover{background:rgba(255,255,255,.22)}
/* Marchio di modulo nella scheda cliente: alla fine del banner blu, allineato
   a destra insieme al tasto Chiudi (vedi intestazioneModale(), parametro
   `logo`). Stesso sfondo navy del logo pubblico del questionario, quindi lo
   stesso file funziona qui senza adattamenti. */
/* Conferma di una cancellazione: la seconda porta si attraversa scrivendo,
   non cliccando (confermaEliminazione() in pcbi-motore.js). Rosso solo dove
   serve — l'intestazione e il pulsante finale — così l'avviso si distingue
   da una maschera qualunque senza diventare un cartello che si smette di
   leggere. z-index sopra le maschere: può aprirsi da dentro una di esse. */
.conferma-distruttiva{z-index:calc(var(--z-toast) - 1)}
.conferma-card{max-width:600px}
.conferma-head{background:var(--red)}
.conferma-head .eyebrow{color:#FFE0DC}
.conferma-avvertenza{font-size:15px;line-height:1.55;color:var(--ink)}
.conferma-elenco{margin:12px 0 0;padding-left:20px;display:grid;gap:5px;max-height:220px;overflow:auto}
.conferma-elenco li{font-size:14px;line-height:1.45;color:var(--navy)}
.conferma-restano{margin-top:12px;padding:10px 13px;border-radius:10px;background:var(--green-soft);
  font-size:13.5px;line-height:1.5;color:#245B3A}
.conferma-card #cd-parola{margin-top:6px;letter-spacing:.06em;font-weight:700}
.conferma-card .savebar{margin-top:16px}
.conferma-card .btn.danger[disabled]{opacity:.45;cursor:not-allowed}

/* Colonna, non riga: logo e tasto Chiudi restano affiancati in cima
   (.modal-head-right-top, stesso comportamento di sempre per chi non passa
   il parametro `tagAngolo` a intestazioneModale()); l'etichetta facoltativa
   va nella parte bassa della stessa colonna, allineata a destra sotto il
   logo — non un secondo elemento sparso nel banner. Retrocompatibile: con
   una sola riga interna la colonna si comporta come la vecchia riga sola. */
.modal-head-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none}
.modal-head-right-top{display:flex;align-items:center;gap:14px}
.modal-head-logo{height:60px;width:auto;display:block}
.modal-head-tag{font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--gold2,#C9AE6C);opacity:.9;text-align:right}
.relbox{background:#FBFAF6;border:1px solid var(--line);border-radius:12px;padding:14px;white-space:pre-wrap;max-height:360px;overflow:auto;font-size:13px}
.mini-chart{height:8px;background:#EAE6DB;border-radius:99px;overflow:hidden;margin-top:6px}
.mini-chart i{display:block;height:100%;background:linear-gradient(90deg,#14263F,#3F7EC0)}
@media(max-width:980px){
  .statgrid{grid-template-columns:repeat(2,1fr)}
  .toolbar{grid-template-columns:1fr 1fr}
  .toolbar .tool-actions{grid-column:1/-1;justify-content:flex-start}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .detail-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .admin-title{display:block}.admin-actions{justify-content:flex-start;margin-top:12px}
  .statgrid{grid-template-columns:1fr}
  .toolbar{grid-template-columns:1fr}
}


/* ============================================================
   RELAZIONE CONSULENZIALE + GESTIONE AMMINISTRATORI
   ============================================================ */
.ai-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ai-grid .wide{grid-column:1/-1}
.ai-box{background:#FBFAF6;border:1px solid var(--line);border-radius:14px;padding:14px}
.ai-box h4{font-family:'Instrument Sans',system-ui,sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--navy);margin-bottom:6px}
.ai-box textarea{min-height:150px;background:#fff}
.ai-knowledge-tools{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:10px}
.pdf-slot{border:1px dashed #CFC9BB;border-radius:12px;background:#fff;padding:10px;font-size:12px;color:var(--muto)}
.pdf-slot b{display:block;color:var(--navy);margin-bottom:6px}
.pdf-slot input{font-size:11px;padding:6px;background:#FDFCFA}
.config-note{border-left:4px solid var(--gold);background:#FBFAF6;border-radius:10px;padding:12px 14px;color:var(--muto);font-size:13px;line-height:1.35}
.storico-elenco{display:grid;gap:8px;margin-top:14px;max-height:60vh;overflow-y:auto}
/* Riga contenitore (non più il pulsante stesso, 10 agosto 2026): serve
   spazio per una seconda azione, "Elimina", che deve restare un pulsante
   proprio e non innescare anche l'apertura della scheda al clic. */
.storico-riga{display:flex;align-items:stretch;gap:6px;border:1px solid var(--line);background:#FBFAF6;border-radius:12px;padding:4px;font-size:14px;font-weight:700;color:var(--navy)}
.storico-apri{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;background:none;border:0;padding:7px 10px;font:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:9px}
.storico-apri:hover{background:#F1EEE7}
.storico-elimina{flex:0 0 auto;background:none;border:0;padding:0 12px;font-size:12.5px;font-weight:700;color:var(--rosso);cursor:pointer;border-radius:9px}
.storico-elimina:hover{background:var(--red-soft)}
.admin-list{display:grid;gap:8px;margin-top:10px}
/* Identità e comandi sulla stessa riga — richiesta esplicita del 5 agosto
   2026: "a fianco la modifica... e cancellazione". Un tentativo precedente
   li aveva spezzati su due righe per non stringere la tendina del ruolo
   sotto i 1100px; qui si ottiene lo stesso risultato lasciandoli sulla
   stessa riga finché c'è spazio (`flex-wrap`) e scendendo su due sole
   sotto i 720px, non sempre: la richiesta era "a fianco", non "impilati". */
.admin-item{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border:1px solid var(--line);background:#FBFAF6;border-radius:12px;padding:10px 14px}
.admin-item-id{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.admin-item-azioni{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.admin-item b{font-size:14px;color:var(--navy)}
.admin-item .self{font-size:11px;font-weight:800;color:var(--verde);text-transform:uppercase;letter-spacing:.08em}
.ruolo-select{min-width:150px;font-size:13px;font-weight:700;padding:7px 10px}
.ruolo-select:disabled{opacity:.6}
@media(max-width:900px){.ai-grid{grid-template-columns:1fr}.ai-knowledge-tools{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.admin-item{flex-direction:column;align-items:flex-start}.admin-item-azioni{width:100%}.ruolo-select{flex:1 1 auto}}
@media(max-width:560px){.ai-knowledge-tools{grid-template-columns:1fr}}

/* Gabbia ordinata dei controlli della Relazione AI */
.ai-control-grid{
  display:grid;
  gap:16px;
  margin-top:4px;
}
.ai-control-row{
  display:grid;
  gap:14px;
  align-items:end;
}
.ai-control-row.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ai-control-row.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ai-control-field{min-width:0}
.ai-control-field label.small{
  min-height:18px;
  display:flex;
  align-items:flex-end;
  white-space:nowrap;
  line-height:1.15;
}
.ai-control-field input,
.ai-control-field select{
  height:44px;
}
.ai-strict-row{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  margin-top:18px;
}
.ai-strict-control{
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
  color:var(--navy);
  font-weight:700;
  line-height:1.25;
}
.ai-strict-control input[type="checkbox"]{
  width:17px!important;
  min-width:17px!important;
  max-width:17px!important;
  height:17px!important;
  min-height:17px!important;
  margin:0!important;
  padding:0!important;
  flex:0 0 17px;
  border-radius:3px;
  accent-color:#1677e8;
}
@media(max-width:900px){
  .ai-control-row.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ai-control-field label.small{white-space:normal;min-height:34px}
}
@media(max-width:620px){
  .ai-control-row.cols-3,
  .ai-control-row.cols-2{grid-template-columns:1fr}
  .ai-control-field label.small{white-space:normal;min-height:auto}
  .ai-strict-control{align-items:flex-start}
  .ai-strict-control input[type="checkbox"]{margin-top:2px!important}
}




/* v6 rettificata — override stampa finestre backend */
@media print{
  @page{size:A4 portrait;margin:10mm!important}
  html,body{width:210mm!important;background:#fff!important;overflow:visible!important;font-size:9.5pt!important;line-height:1.28!important}
  body{padding:0!important}.page{width:100%!important;max-width:188mm!important;margin:0 auto!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important}.print-actions{display:none!important}
  .doc-head{display:grid!important;grid-template-columns:38mm 1fr!important;gap:7mm!important;align-items:center!important;border-bottom:2px solid #B9924A!important;padding:0 0 3.5mm!important;margin:0 0 4mm!important;break-inside:avoid!important;page-break-inside:avoid!important}.doc-logo,.head img{width:36mm!important;max-width:36mm!important;height:auto!important}.doc-titlebox{text-align:center!important}.doc-kicker{font-size:7pt!important;letter-spacing:.12em!important;margin:0 0 1mm!important;white-space:nowrap!important}.doc-title-main,.doc-titlebox h1{font-size:22pt!important;line-height:1!important;margin:0!important;text-align:center!important;white-space:nowrap!important}.doc-title-sub{font-size:11.2pt!important;line-height:1.05!important;margin:1.2mm 0 0!important;text-align:center!important;white-space:nowrap!important}
  .doc-meta,.rel-meta{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:2mm!important;margin:0 0 4mm!important;break-inside:avoid!important;page-break-inside:avoid!important}.doc-meta div,.rel-meta div{padding:2mm!important;border-radius:7px!important;background:#fff!important}.doc-meta span,.rel-meta span{font-size:6.5pt!important;line-height:1.05!important}.doc-meta b,.rel-meta b{font-size:8.6pt!important;line-height:1.12!important;margin-top:.8mm!important}
  .radar{margin:1mm auto 0!important;display:flex!important;justify-content:center!important;break-inside:avoid!important;page-break-inside:avoid!important}.radar svg{width:100%!important;max-width:100mm!important;max-height:82mm!important;margin:0 auto!important}.legend{font-size:7.5pt!important;margin:0 0 2mm!important;line-height:1!important}.banner{padding:3mm 4mm!important;margin:2mm 0 0!important;border-radius:8px!important;break-inside:avoid!important;page-break-inside:avoid!important}.banner b{font-size:24pt!important;line-height:1!important}.banner p{font-size:7.3pt!important;line-height:1.15!important;margin:.8mm auto 0!important;max-width:150mm!important}.print-cover,.block1{break-inside:avoid!important;page-break-inside:avoid!important;break-after:page!important;page-break-after:always!important;margin:0!important;padding:0!important}.block2,.block3,.block4{break-before:page!important;page-break-before:always!important;margin-top:0!important;padding-top:0!important;border-top:0!important}
  .cards4{grid-template-columns:repeat(4,1fr)!important;gap:2mm!important}.icard{padding:2.5mm!important}.icard .v{font-size:18pt!important}.icard .t{font-size:8pt!important}.icard .s,.icard .lab{font-size:7.2pt!important;line-height:1.15!important}.barcard,.arow,.lettura,.rbox,.prio{break-inside:avoid!important;page-break-inside:avoid!important}.barcard{padding:3mm!important;margin-top:2.5mm!important}.barcard strong{font-size:18pt!important}.barcard p{font-size:8pt!important;line-height:1.2!important}.areas,.rgrid{grid-template-columns:1fr 1fr!important;gap:2mm!important}.arow{padding:2.5mm!important}.arow p{font-size:7.5pt!important;line-height:1.18!important}
  .head{display:grid!important;grid-template-columns:38mm 1fr!important;gap:7mm!important;align-items:center!important}.head .sub{text-align:center!important}.head .sub div:first-child{font-size:21pt!important;line-height:1!important}.head .sub div:nth-child(2){font-size:11.2pt!important;line-height:1.05!important;white-space:nowrap!important}
  .banner,.track i,.dual i,.icard,.barcard,.arow,.prio{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
}


/* ==========================================================================
   STRATO 3 — aggiunte del backend operativo.
   Il prototipo lavorava su dati inventati e conosceva solo gli stati che si
   era scelto. Sul database reale ne servono due che non aveva: un modulo mai
   avviato (diverso da "non disponibile", che suggeriva un limite tecnico) e
   un documento prodotto ma non ancora consegnato al cliente.
   ========================================================================== */

/* Modulo mai avviato: il cliente non ha iniziato, non è un blocco del sistema. */
.module-button.state-non-avviato{ background:var(--gray); border-color:#d7d4cd; color:var(--gray-dark); opacity:.85; }

/* Documento in attesa: esiste il risultato, manca la consegna. Ambra e non
   rosso, perché è un'azione da fare, non un errore avvenuto. */
.delivery-attesa{ background:var(--amber-soft); color:var(--amber); }

/* La pagina Impostazioni non usa la scatola centrata del monolite: sta già
   dentro .app-shell, che le dà larghezza e margini propri. */
.wrap-piatto{ max-width:none; margin:0; padding:0; }

/* Schermate di blocco (utente non autorizzato, configurazione incompleta):
   devono essere leggibili anche quando è l'unica cosa a schermo. */
.blocco-accesso{ display:flex; align-items:center; justify-content:center; min-height:100vh; padding:40px 20px; background:var(--cream); }
.blocco-accesso .card{ max-width:560px; text-align:center; }
.blocco-accesso .card h2{ margin-bottom:12px; }
.blocco-accesso .card p{ color:var(--muted); line-height:1.65; margin-bottom:12px; }

/* Messaggio d'errore della pagina di accesso. */
.login-message{ min-height:20px; margin-top:14px; color:var(--red); font-size:13px; font-weight:600; }

/* Elenco clienti vuoto o filtrato a zero. */
.clients-table-card .empty-state{ padding:38px 24px; text-align:center; color:var(--muted); line-height:1.7; }
.clients-table-card .empty-state b{ color:var(--navy); }

/* I due strati portavano entrambi una regola `.row-actions`: quella
   dell'amministrazione precedente allineava i pulsanti a destra dentro la sua
   tabella, e arrivando dopo prevaleva anche sulle righe dell'elenco clienti,
   dove invece devono restare sotto il nome dell'impresa, allineati al testo.
   Qui la riporto al comportamento del prototipo, limitandola alle righe
   cliente per non toccare la tabella dell'altro strato. */
.client-row .company-column .row-actions{
  display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-start;
  margin-left:49px; margin-top:9px;
}
.client-row .row-action-button.edit-button{ background:#fff; border-color:#cfd3d7; color:var(--navy); }

/* ==========================================================================
   IMPOSTAZIONI DELL'IMPRENDITOMETRO
   Le otto aree portano centoventi domande: mostrarle tutte aperte
   produrrebbe una pagina che nessuno percorre. Ciascuna area si apre da sé,
   e la prima resta aperta perché una pagina di soli titoli chiusi non fa
   capire che cosa c'è dentro.
   ========================================================================== */
.impr-area{
  border:1px solid var(--line); border-radius:11px; background:#fff;
  margin-top:12px; padding:0 14px 4px;
}
.impr-area > summary{
  cursor:pointer; padding:13px 2px; font-size:14.5px; color:var(--navy);
  list-style:none; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
}
.impr-area > summary::-webkit-details-marker{ display:none }
.impr-area > summary::before{ content:"▸"; color:var(--gold); font-size:13px; }
.impr-area[open] > summary::before{ content:"▾"; }
.impr-area > summary:hover{ color:var(--gold); }
.impr-area[open] > summary{ border-bottom:1px solid var(--line); margin-bottom:10px; }
/* In stampa tutte le aree vanno aperte, anche quelle rimaste a tendina
   chiusa a schermo — segnalato dal proprietario il 7 agosto 2026. Un
   <details> chiuso non fa il layout del proprio contenuto nemmeno
   forzando display o content-visibility via CSS (verificato): l'apertura
   vera, con l'attributo, avviene in JS su "beforeprint" in
   condiviso/pcbi-motore.js, condivisa da entrambi i pannelli che usano
   questa classe. Qui solo la freccia, che è puro ornamento CSS. */
@media print{
  .impr-area > summary::before{ content:"▾" !important; }
}

/* I tre passi del calcolo: numerati perché sono una sequenza, non un elenco
   di caratteristiche — il secondo passo non si capisce senza il primo. */
.impr-passi{ margin:10px 0 0 20px; padding:0; color:var(--muted); line-height:1.7; font-size:13.5px; }
.impr-passi li{ margin-bottom:7px; }
.impr-passi b{ color:var(--navy); }

/* ==========================================================================
   IMPRENDITOMETRO — scheda dei risultati
   Il radar porta due figure sovrapposte e non una: la distanza fra capacità
   agita e autonomia è il risultato del modulo, e una risultante unica la
   nasconderebbe. Il punteggio effettivo resta nella tabella accanto.
   ========================================================================== */
.radar-wrap{ margin-top:14px; padding:16px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.radar-wrap svg{ display:block; width:100%; height:auto; max-width:520px; margin:0 auto; }
.radar-legenda{ display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-top:10px; font-size:13px; color:var(--muted); }
.radar-legenda i{ display:inline-block; width:22px; height:3px; border-radius:2px; margin-right:7px; vertical-align:middle; }
.radar-nota{ margin-top:11px; font-size:13.5px; line-height:1.5; color:var(--muted); text-align:center; max-width:62ch; margin-left:auto; margin-right:auto; }

/* Segnalazioni metodologiche: accompagnano il punteggio, non lo cambiano.
   La striscia colorata a sinistra distingue la gravità senza colorare tutto
   il riquadro, che a trentasette schede in fila sarebbe illeggibile. */
.segn{ display:grid; gap:10px; }
.segn article{ border:1px solid var(--line); border-left:5px solid var(--muted); border-radius:11px; padding:12px 15px; background:#fff; }
.segn article.critica{ border-left-color:var(--red); }
.segn article.attenzione{ border-left-color:#C08A2D; }
.segn article.nota{ border-left-color:#3F7EC0; }
.segn b{ display:block; font-size:15px; color:var(--navy); }
.segn p{ margin-top:5px; font-size:14px; line-height:1.5; color:var(--muted); }
.segn-altre{ margin-top:9px; font-size:13.5px; color:var(--muted); }

/* Lettura d'insieme: il blocco che traduce in parole gli indici della scheda
   Imprenditometro. Sta in cima ai risultati perché è ciò che serve per primo
   a chi apre una scheda prima di una consulenza — il numero grande dice dove
   siamo, le tre voci accanto dicono che cosa farci. Stesso registro cromatico
   delle segnalazioni (striscia a sinistra), così i due blocchi si leggono
   come parenti e non come componenti diversi. */
.sinottica-testa{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin:4px 0 14px; }
.sinottica-numero{ display:flex; align-items:baseline; gap:3px; flex-wrap:wrap;
  border-left:5px solid var(--fascia,var(--navy)); padding:6px 0 6px 14px; }
.sinottica-numero b{ font-family:'Fraunces',Georgia,serif; font-size:40px; font-weight:600; line-height:1; color:var(--navy); }
.sinottica-numero span{ font-size:15px; color:var(--muted); }
.sinottica-numero em{ display:block; width:100%; font-style:normal; font-weight:800; font-size:13px;
  letter-spacing:.04em; color:var(--fascia,var(--navy)); margin-top:5px; }
.sinottica-fascia{ flex:1 1 320px; font-size:14.5px; line-height:1.55; color:var(--muted); margin:0; }
.sinottica-griglia{ display:grid; gap:10px; }
.sinottica-voce{ border:1px solid var(--line); border-left:5px solid var(--muted); border-radius:11px;
  padding:12px 15px; background:#fff; }
.sinottica-voce.critica{ border-left-color:var(--red); }
.sinottica-voce.nota{ border-left-color:#3F7EC0; }
.sinottica-voce.ok{ border-left-color:var(--green); }
.sinottica-voce b{ display:block; font-size:15px; color:var(--navy); }
.sinottica-voce p{ margin-top:5px; font-size:14px; line-height:1.55; color:var(--muted); }

/* Nella scheda le celle della tabella portano un sottotitolo (il nome esteso
   dell'area sotto il codice): senza questa regola prendeva la stessa
   dimensione del titolo e le due righe si confondevano. */
td .sub{ display:block; font-size:12px; color:var(--muted); line-height:1.35; margin-top:2px; }
.tab-centro small{ font-size:11px; color:var(--muted); font-weight:400; }

/* Le otto descrizioni d'area sotto il radar: stessa griglia a due colonne
   già in uso nella pagina pubblica del questionario, qui riportata perché
   la scheda backend e il report stampabile leggono pcbi-comune.css, non lo
   stile locale di imprenditometro_checkup.html. */
.esito-aree-desc{ margin-top:14px; display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; }
@media(max-width:760px){ .esito-aree-desc{ grid-template-columns:1fr; } }
.area-desc-riga{ padding:12px 0; border-top:1px solid var(--line); }
.area-desc-riga b{ font-size:14px; color:var(--ink); }
.area-desc-riga .punteggio{ float:right; font-size:15px; font-weight:800; color:var(--navy); }
.area-desc-riga .punteggio small{ font-size:11px; font-weight:400; color:var(--muted); }
.area-desc-riga p{ margin-top:4px; font-size:13.5px; line-height:1.5; color:var(--muted); }