/* Perfetti sconosciuti · Dashboard
   La vista tradizionale degli stessi dati della mappa. Fondo bianco, grigi freddi, fucsia solo per rischio.
   Una schermata per sezione: la pagina non scorre, scorrono solo tabelle e schede lunghe. */

:root {
  --jet: #0e2e3e; --imperial: #1d2f7a; --sky: #8eb7ce; --sky-chiaro: #d6e5ee; --sky-velo: #eef4f8;
  --fux: #e0283f; --fux-velo: #fde6e9; --peach: #f7cdb6; --peach-velo: #fdf1ea; --peach-scuro: #8a4b30; --verde: #2f8a6c; --verde-velo: #e3f3ec;
  --carta: #ffffff; --nebbia: #f5f7fa; --brina: #eaeff4; --filo: #dbe2e9; --filo-2: #c5d0da;
  --ink: #0e2e3e; --ink-2: #3b5262; --ardesia: #627385;
  --l1: #e6eff5; --l2: #bcd4e4; --l3: #7fa9c9; --l4: #3f6aa8; --l5: #1d2f7a;
  --font: "Geist", "Helvetica Neue", Arial, sans-serif; --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --ombra: 0 1px 2px rgba(14, 46, 62, .06), 0 8px 24px rgba(14, 46, 62, .08);
  --ombra-forte: 0 2px 8px rgba(14, 46, 62, .1), 0 24px 64px rgba(14, 46, 62, .18);
  --r: 12px; --ease: cubic-bezier(.22, 1, .36, 1);
  --f-dir: #56687a; --f-com: #1d2f7a; --f-ut: #2a8ca0; --f-prod: #4a7fb0; --f-qual: #3f9c82; --f-acq: #c4774f; --f-amm: #7a62b8;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--nebbia); color: var(--ink); font: 400 14px/1.45 var(--font); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; overflow: hidden; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--l4); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--sky-chiaro); }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
kbd { font: 500 11px/1 var(--mono); padding: 3px 5px; border-radius: 5px; border: 1px solid var(--filo-2); color: var(--ardesia); background: var(--carta); }
q { quotes: "«" "»"; }

.dash { height: 100vh; display: grid; grid-template-columns: 220px 1fr; grid-template-rows: 60px 1fr; }

/* ---------- testata */
.testa { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; padding: 0 16px 0 20px; background: var(--carta); border-bottom: 1px solid var(--filo); }
.marchio { display: flex; align-items: center; text-decoration: none; }
.marchio img { display: block; width: 128px; height: auto; }
.marchio-neutro { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.marchio-neutro i { width: 14px; height: 14px; border-radius: 50%; background: var(--l4); }
.prodotto { display: flex; align-items: baseline; gap: 8px; padding-left: 18px; border-left: 1px solid var(--filo); white-space: nowrap; }
.prodotto b { font-weight: 600; font-size: 15px; }
.prodotto span { color: var(--ardesia); font-size: 13px; }
.simulata { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--peach); white-space: nowrap; overflow: hidden; }
.simulata b { background: var(--peach); color: var(--jet); font-size: 12px; font-weight: 600; padding: 4px 10px; }
.simulata span { font-size: 12px; padding: 4px 10px; color: var(--ink-2); }
.testa-dx { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--filo); background: var(--carta); font-size: 13px; font-weight: 500; color: var(--ink-2); text-decoration: none; transition: background .15s, border-color .15s; white-space: nowrap; }
.btn:hover { background: var(--nebbia); border-color: var(--filo-2); }
.btn.primario { background: var(--jet); color: #fff; border-color: var(--jet); }
.btn.primario:hover { background: var(--imperial); }
.btn.piccolo { height: 30px; padding: 0 10px; font-size: 12.5px; }

/* interruttore Mappa | Dashboard (uguale nelle due viste) */
.vista { display: inline-flex; padding: 3px; border-radius: 11px; background: var(--brina); gap: 2px; }
.vista a { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.vista a:hover { color: var(--ink); background: rgba(255, 255, 255, .6); }
.vista a[aria-current="page"] { background: var(--carta); color: var(--ink); box-shadow: 0 1px 2px rgba(14, 46, 62, .12); }
.vista kbd { padding: 2px 4px; font-size: 10.5px; }

/* ---------- menu */
.menu { background: var(--carta); border-right: 1px solid var(--filo); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; overflow: auto; }
.menu a { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border-radius: 9px; text-decoration: none; color: var(--ink-2); font-weight: 500; }
.menu a:hover { background: var(--nebbia); color: var(--ink); }
.menu a[aria-current="true"] { background: var(--sky-velo); color: var(--imperial); }
.menu a .n { margin-left: auto; font: 500 11px/1 var(--mono); color: var(--ardesia); opacity: .7; }
.menu a .conta { margin-left: auto; min-width: 20px; height: 20px; border-radius: 10px; padding: 0 6px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 600; background: var(--fux-velo); color: var(--fux); }
.menu a .conta + .n { margin-left: 6px; }
.menu-piede { margin-top: auto; padding: 12px 10px 4px; border-top: 1px solid var(--brina); font-size: 12px; color: var(--ardesia); display: grid; gap: 6px; }
.menu-piede div { display: flex; justify-content: space-between; gap: 8px; }
.menu-piede b { color: var(--ink-2); font-weight: 500; }

/* ---------- corpo */
.corpo { min-height: 0; min-width: 0; padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.corpo-testa { display: flex; align-items: flex-end; gap: 16px; }
.corpo-testa h1 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.corpo-testa p { color: var(--ardesia); font-size: 13.5px; margin-top: 2px; }
.corpo-testa .azioni-testa { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.sezione { flex: 1; min-height: 0; display: grid; gap: 14px; }

.box { background: var(--carta); border: 1px solid var(--filo); border-radius: var(--r); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.box-testa { display: flex; align-items: baseline; gap: 10px; padding: 13px 16px 10px; }
.box-testa h2 { font-size: 14px; font-weight: 600; }
.box-testa span { color: var(--ardesia); font-size: 12.5px; }
.box-testa .dx { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.box-corpo { padding: 0 16px 14px; min-height: 0; overflow: auto; flex: 1; }
.box-corpo.piatto { padding: 0; }

/* ---------- KPI */
.kpi { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.kpi > button { text-align: left; background: var(--carta); border: 1px solid var(--filo); border-radius: var(--r); padding: 12px 14px 13px; display: grid; gap: 2px; transition: border-color .15s, box-shadow .15s; }
.kpi > button:hover { border-color: var(--filo-2); box-shadow: var(--ombra); }
.kpi .et { font-size: 12px; color: var(--ardesia); font-weight: 500; }
.kpi .val { font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.kpi .val small { font-size: 15px; font-weight: 500; color: var(--ardesia); margin-left: 2px; }
.kpi .sub { font-size: 12px; color: var(--ink-2); }
.kpi .allarme .val { color: var(--fux); }

/* ---------- tabelle */
.tab { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.tab th { position: sticky; top: 0; z-index: 1; background: var(--carta); text-align: left; font-weight: 500; font-size: 12px; color: var(--ardesia); padding: 9px 10px; border-bottom: 1px solid var(--filo); white-space: nowrap; user-select: none; }
.tab th.ord { cursor: pointer; }
.tab th.ord:hover { color: var(--ink); }
.tab th.ord[aria-sort]::after { content: "↓"; margin-left: 4px; color: var(--l4); }
.tab th.ord[aria-sort="ascending"]::after { content: "↑"; }
.tab td { padding: 8px 10px; border-bottom: 1px solid var(--brina); vertical-align: middle; }
.tab tr.cl { cursor: pointer; }
.tab tr.cl:hover td { background: var(--nebbia); }
.tab tr.sel td { background: var(--sky-velo); }
.tab .num { text-align: right; white-space: nowrap; }
.tab .mut { color: var(--ardesia); }
.tab td:first-child, .tab th:first-child { padding-left: 16px; }
.tab td:last-child, .tab th:last-child { padding-right: 16px; }

.chi { display: flex; align-items: center; gap: 9px; min-width: 0; }
.chi > div { min-width: 0; }
.chi b { font-weight: 500; white-space: nowrap; }
.chi > div > span { display: block; color: var(--ardesia); font-size: 12px; }
.av { width: 28px; height: 28px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; font-size: 11px; font-weight: 600; color: #fff; background: var(--c, var(--ardesia)); }
.av.piccolo { width: 22px; height: 22px; font-size: 9.5px; }
.fz { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.fz i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }

.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11.5px; font-weight: 500; white-space: nowrap; background: var(--brina); color: var(--ink-2); }
.tag.rischio { background: var(--fux-velo); color: var(--fux); }
.tag.pesca { background: var(--peach-velo); color: var(--peach-scuro); }
.tag.blu { background: var(--sky-velo); color: var(--imperial); }
.tag.verde { background: var(--verde-velo); color: var(--verde); }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }

/* barra orizzontale semplice */
.barra { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.barra .tr { flex: 1; height: 6px; border-radius: 3px; background: var(--brina); overflow: hidden; }
.barra .tr i { display: block; height: 100%; border-radius: 3px; background: var(--l4); }
.barra.alta .tr i { background: var(--fux); }
.barra b { font-weight: 500; font-size: 12.5px; min-width: 34px; text-align: right; }

/* gap divergente: centro = assessment */
.div { display: flex; align-items: center; gap: 8px; }
.div .tr { position: relative; flex: 1; height: 10px; min-width: 70px; }
.div .tr::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--filo-2); }
.div .tr i { position: absolute; top: 2px; height: 6px; border-radius: 3px; background: var(--l3); }
.div .tr i.giu { background: var(--fux); }
.div b { font-weight: 500; font-size: 12.5px; min-width: 38px; text-align: right; }

.pallini { display: inline-flex; gap: 3px; }
.pallini i { width: 7px; height: 7px; border-radius: 50%; background: var(--brina); }
.pallini i.on { background: var(--l4); }

/* filtri */
.filtri { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cerca { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border: 1px solid var(--filo); border-radius: 9px; background: var(--carta); width: 260px; color: var(--ardesia); }
.cerca input { border: 0; outline: 0; flex: 1; min-width: 0; background: transparent; color: var(--ink); font-size: 13px; }
.sel { height: 34px; border: 1px solid var(--filo); border-radius: 9px; background: var(--carta); padding: 0 8px; font-size: 13px; color: var(--ink-2); }
.pill-gruppo { display: inline-flex; background: var(--brina); border-radius: 9px; padding: 3px; gap: 2px; }
.pill-gruppo button { height: 28px; padding: 0 10px; border-radius: 7px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.pill-gruppo button[aria-pressed="true"] { background: var(--carta); color: var(--ink); box-shadow: 0 1px 2px rgba(14, 46, 62, .12); }

/* ---------- sintesi */
.g-sintesi { grid-template-rows: auto 1fr; }
.g-sintesi-giu { display: grid; grid-template-columns: 1.35fr 1fr 0.9fr; gap: 14px; min-height: 0; }
.scoperta { display: grid; grid-template-columns: 8px 1fr auto; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--brina); align-items: start; }
.scoperta:last-child { border-bottom: 0; }
.scoperta .gr { width: 8px; align-self: stretch; border-radius: 4px; background: var(--l3); }
.scoperta .gr.g5 { background: var(--fux); }
.scoperta .gr.g4 { background: #f08a5d; }
.scoperta .tipo { font-size: 11.5px; font-weight: 600; color: var(--ardesia); text-transform: uppercase; letter-spacing: .04em; }
.scoperta h3 { font-size: 14px; font-weight: 600; margin: 1px 0 3px; }
.scoperta p { font-size: 13px; color: var(--ink-2); }
.scoperta .vai { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }

.azione { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--brina); }
.azione:last-child { border-bottom: 0; }
.azione .t { font-size: 13px; font-weight: 500; }
.azione .m { font-size: 12px; color: var(--ardesia); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.azione.fatta .t { text-decoration: line-through; color: var(--ardesia); }
.spunta { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--filo-2); display: grid; place-items: center; color: transparent; background: var(--carta); margin-top: 1px; }
.spunta:hover { border-color: var(--l4); }
.spunta[aria-checked="true"] { background: var(--verde); border-color: var(--verde); color: #fff; }
.spunta .ico { width: 14px; height: 14px; stroke-width: 2.2; }

.colonne { display: grid; gap: 9px; padding-top: 4px; }
.colonne .riga { display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, 110px) 38px; gap: 10px; align-items: center; font-size: 13px; }
.colonne .riga .tr { height: 8px; border-radius: 4px; background: var(--brina); overflow: hidden; }
.colonne .riga .tr i { display: block; height: 100%; background: var(--c, var(--l4)); }
.colonne .riga b { text-align: right; font-weight: 500; }
.nota { font-size: 12px; color: var(--ardesia); }

/* ---------- organigramma */
.g-org { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); }
.org-ad { display: flex; justify-content: center; }
.org-cols { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; min-height: 0; overflow: auto; align-items: start; padding-bottom: 4px; }
.org-col.larga { grid-column: span 2; }
.org-col.larga .org-lista { columns: 2; column-gap: 4px; }
.org-lista .org-p { break-inside: avoid; }
.org-col { background: var(--carta); border: 1px solid var(--filo); border-top: 3px solid var(--c); border-radius: 10px; padding: 6px; min-width: 0; }
.org-lista { display: block; }
.org-col h3 { font-size: 12px; font-weight: 600; color: var(--ardesia); text-transform: uppercase; letter-spacing: .04em; padding: 2px 4px 4px; display: flex; justify-content: space-between; }
.org-p { display: flex; align-items: center; gap: 7px; padding: 4px 5px; margin-bottom: 1px; border-radius: 7px; text-align: left; width: 100%; position: relative; min-width: 0; }
.org-p .av { width: 22px; height: 22px; font-size: 9.5px; }
.org-p .chi { min-width: 0; flex: 1; }
.org-p .chi b, .org-p .chi > div > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-p:hover { background: var(--nebbia); }
.org-p.capo { background: var(--nebbia); }
.org-p.l1 { margin-left: 10px; width: calc(100% - 10px); }
.org-p.l2 { margin-left: 20px; width: calc(100% - 20px); }
.org-p .chi b { font-size: 12.5px; }
.org-p .chi span { font-size: 11.5px; }
.org-p .seg { margin-left: auto; display: flex; gap: 3px; }
.org-p .seg i { width: 8px; height: 8px; border-radius: 50%; }
.org-ad .org-p { width: auto; background: var(--carta); border: 1px solid var(--filo); padding: 8px 14px; border-radius: 10px; }
.org-legenda { display: flex; gap: 14px; font-size: 12px; color: var(--ink-2); align-items: center; flex-wrap: wrap; }
.org-legenda i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }
.g-org.reale { grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0, 1fr); overflow: auto; }
.g-org.reale .org-wrap { grid-column: 1 / -1; }
.g-org.reale .org-cols { overflow: visible; }
.org-wrap { display: grid; grid-template-rows: auto 1fr; gap: 10px; min-height: 0; }
.dot-ponte { background: var(--l4); }
.dot-capo { background: #f08a5d; }
.dot-custode { background: var(--fux); }
.dot-firma { background: var(--ardesia); }
.matrice { border-collapse: collapse; font-size: 12px; width: 100%; }
.matrice th { font-weight: 500; color: var(--ardesia); padding: 4px; font-size: 11px; }
.matrice th.r { text-align: right; white-space: nowrap; }
.matrice td { text-align: center; padding: 0; border: 2px solid var(--carta); height: 26px; min-width: 30px; font-weight: 500; border-radius: 4px; }

/* ---------- competenze */
.g-comp { grid-template-columns: 1fr 300px; }
.heat { border-collapse: separate; border-spacing: 3px; width: 100%; font-size: 12px; table-layout: fixed; }
.heat th { font-weight: 500; color: var(--ardesia); font-size: 11.5px; }
.heat thead th { height: 112px; vertical-align: bottom; padding: 0 0 6px; }
.heat thead th span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; text-align: left; }
.heat thead th:first-child { width: 168px; }
.heat tbody th { text-align: left; white-space: nowrap; padding-right: 6px; color: var(--ink-2); }
.heat td { height: 34px; text-align: center; border-radius: 5px; font-weight: 500; cursor: default; }
.heat td.vuoto { background: var(--nebbia); color: transparent; }
.heat tfoot th { text-align: left; color: var(--ink-2); padding-top: 6px; }
.heat tfoot td { background: none; font-weight: 600; padding-top: 6px; }
.heat tfoot td.poca { color: var(--fux); }
.scala { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ardesia); }
.scala i { width: 22px; height: 12px; border-radius: 3px; }

/* ---------- percezione, rischi */
.g-perc { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto 1fr; }
.g-perc .larga { grid-column: 1 / -1; }
.g-rischi { grid-template-columns: 1.7fr 1fr; grid-template-rows: auto 1fr; }
.g-rischi .larga { grid-column: 1 / -1; }
.linea-t { position: relative; height: 92px; margin: 6px 8px 0; }
.linea-t .asse { position: absolute; left: 0; right: 0; top: 46px; height: 2px; background: var(--brina); }
.linea-t .anno { position: absolute; top: 54px; font-size: 11.5px; color: var(--ardesia); transform: translateX(-50%); }
.linea-t .anno::before { content: ""; position: absolute; left: 50%; top: -11px; width: 1px; height: 8px; background: var(--filo-2); }
.linea-t .ev { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.linea-t .ev.su { bottom: 50px; }
.linea-t .ev.giu { top: 72px; }
.linea-t .ev b { font-size: 12px; font-weight: 600; white-space: nowrap; }
.linea-t .ev span { font-size: 11px; color: var(--ardesia); white-space: nowrap; }
.linea-t .ev.rosso b { color: var(--fux); }
.linea-t .pt { position: absolute; top: 41px; width: 12px; height: 12px; border-radius: 50%; background: var(--l4); border: 2px solid var(--carta); transform: translateX(-50%); box-shadow: 0 0 0 1px var(--l4); }
.linea-t .pt.rosso { background: var(--fux); box-shadow: 0 0 0 1px var(--fux); }
.linea-t .oggi { position: absolute; top: 30px; height: 34px; width: 2px; background: var(--jet); }
.linea-t .oggi span { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 600; white-space: nowrap; }
.rischio-v { display: inline-grid; place-items: center; width: 26px; height: 22px; border-radius: 6px; font-weight: 600; font-size: 12px; }
.rischio-v.r5 { background: var(--fux); color: #fff; }
.rischio-v.r4 { background: var(--fux-velo); color: var(--fux); }
.rischio-v.r3 { background: var(--peach-velo); color: var(--peach-scuro); }
.rischio-v.r2, .rischio-v.r1 { background: var(--brina); color: var(--ink-2); }

/* ---------- ruoli */
.g-ruoli { grid-template-columns: 1.1fr 1fr; }
.confr { display: grid; gap: 8px; }
.confr .riga { display: grid; grid-template-columns: 1fr 150px; gap: 12px; align-items: center; font-size: 13px; }
.confr .riga .bb { display: grid; gap: 3px; }
.confr .riga .bb div { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ardesia); }
.confr .riga .bb i { height: 7px; border-radius: 3px; display: block; }
.confr .riga .bb .s i { background: var(--filo-2); }
.confr .riga .bb .v i { background: var(--l4); }
.confr .riga.nuovo .bb .v i { background: var(--fux); }
.confr .riga.via .t { color: var(--ardesia); text-decoration: line-through; }
.confr .riga .t small { display: block; font-size: 11.5px; color: var(--fux); font-weight: 500; }
.confr .riga.via .t small { color: var(--ardesia); }
.leg { display: flex; gap: 14px; font-size: 12px; color: var(--ink-2); margin: 2px 0 10px; }
.leg i { display: inline-block; width: 14px; height: 7px; border-radius: 3px; margin-right: 6px; }

/* ---------- scheda persona (cassetto a destra) */
.velo { position: fixed; inset: 60px 0 0 220px; background: rgba(14, 46, 62, .12); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 30; }
.velo.su { opacity: 1; pointer-events: auto; }
.scheda { position: fixed; top: 60px; right: 0; bottom: 0; width: min(560px, 100vw); background: var(--carta); border-left: 1px solid var(--filo); box-shadow: var(--ombra-forte); transform: translateX(104%); transition: transform .32s var(--ease); z-index: 31; display: flex; flex-direction: column; }
.scheda.su { transform: none; }
.scheda-testa { padding: 16px 18px 12px; border-bottom: 1px solid var(--brina); display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.scheda-testa .av { width: 44px; height: 44px; font-size: 15px; }
.scheda-testa h2 { font-size: 18px; font-weight: 600; }
.scheda-testa p { font-size: 13px; color: var(--ink-2); }
.scheda-testa .tags { grid-column: 1 / -1; }
.scheda-bar { display: flex; gap: 6px; padding: 10px 18px; border-bottom: 1px solid var(--brina); align-items: center; }
.scheda-bar .dx { margin-left: auto; font-size: 12px; color: var(--ardesia); display: flex; gap: 6px; align-items: center; }
.scheda-corpo { flex: 1; overflow: auto; padding: 4px 18px 24px; }
.scheda-corpo h3 { font-size: 12px; font-weight: 600; color: var(--ardesia); text-transform: uppercase; letter-spacing: .04em; margin: 18px 0 8px; }
.x { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--ink-2); }
.x:hover { background: var(--nebbia); }
.cit { display: block; font-size: 13.5px; color: var(--ink); padding: 8px 12px; border-left: 3px solid var(--sky); background: var(--sky-velo); border-radius: 0 8px 8px 0; margin-bottom: 6px; }
.cit small { display: block; margin-top: 3px; color: var(--ardesia); font-size: 11.5px; }
.cit.resp { border-left-color: var(--peach); background: var(--peach-velo); }
.lista-mot { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.lista-mot li { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.lista-mot li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--l3)); flex: none; }

/* scala 1-5 con tre segni: auto, responsabile, assessment */
.scala5 { position: relative; height: 22px; min-width: 150px; }
.scala5 .tr { position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: var(--brina); }
.scala5 .req { position: absolute; top: 3px; width: 2px; height: 16px; background: var(--jet); border-radius: 1px; }
.scala5 .m { position: absolute; top: 5px; width: 12px; height: 12px; border-radius: 50%; transform: translateX(-50%); border: 2px solid var(--carta); }
.scala5 .m.a { background: var(--sky); }
.scala5 .m.r { background: #f08a5d; }
.scala5 .m.s { background: var(--imperial); width: 14px; height: 14px; top: 4px; }
.leg-scala { display: flex; gap: 12px; font-size: 11.5px; color: var(--ardesia); flex-wrap: wrap; }
.leg-scala i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; }

.vuota { display: grid; place-items: center; height: 100%; color: var(--ardesia); font-size: 13px; text-align: center; padding: 20px; }
.notifica { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 20px); background: var(--jet); color: #fff; padding: 9px 14px; border-radius: 10px; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50; }
.notifica.su { opacity: 1; transform: translate(-50%, 0); }
.modale { position: fixed; inset: 0; background: rgba(14, 46, 62, .3); display: none; place-items: center; z-index: 60; }
.modale.su { display: grid; }
.mod-box { background: var(--carta); border-radius: 14px; padding: 20px 22px; width: min(520px, calc(100vw - 32px)); box-shadow: var(--ombra-forte); }
.mod-box h2 { font-size: 17px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
.tasti { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; font-size: 13px; }
.tasti dt { text-align: right; }
.tasti dd { margin: 0; color: var(--ink-2); }

/* ---------- schermi stretti: qui la pagina scorre */
@media (max-width: 1100px) {
  .kpi { grid-template-columns: repeat(3, 1fr); }
  .g-sintesi-giu, .g-comp, .g-perc, .g-rischi, .g-ruoli, .g-org.reale { grid-template-columns: 1fr; }
  .g-perc .larga, .g-rischi .larga { grid-column: auto; }
  .g-org.reale .org-wrap { grid-row: auto; }
}
@media (max-width: 900px) {
  body { overflow: auto; }
  .dash { height: auto; min-height: 100vh; grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; }
  .testa { flex-wrap: wrap; padding: 10px 16px; height: auto; gap: 10px; }
  .prodotto span, .simulata span, .testa-dx .btn .lbl { display: none; }
  .menu { flex-direction: row; overflow-x: auto; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--filo); }
  .menu a { flex: none; }
  .menu a .n, .menu-piede { display: none; }
  .corpo { overflow: visible; padding: 14px 16px; }
  .sezione { display: flex; flex-direction: column; }
  .box-corpo { overflow: visible; }
  .kpi { grid-template-columns: repeat(2, 1fr); }
  .cerca { width: 100%; }
  .org-cols { grid-template-columns: 1fr 1fr; }
  .velo { inset: 0; }
  .scheda { top: 0; }
  .tab-scroll { overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print {
  body { overflow: visible; background: #fff; }
  .dash { height: auto; display: block; }
  .menu, .testa-dx, .velo, .scheda { display: none; }
  .corpo, .box-corpo, .org-cols { overflow: visible; }
}

/* rifiniture: tabella persone su una riga, organigramma senza avatar per lasciare spazio ai nomi */
#tabP .chi > div > span { white-space: nowrap; }
.org-p .av { display: none; }
.org-p { padding: 5px 7px; }

/* passaggio alla mappa: un solo pulsante pieno con la destinazione scritta */
.vista-vai { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px 0 13px; border-radius: 11px; background: var(--jet); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; flex: none; box-shadow: 0 0 0 4px var(--sky-velo); transition: background .15s, transform .15s; }
.vista-vai:hover { background: var(--imperial); transform: translateY(-1px); }
.vista-vai .ico { stroke-width: 2; }
.vista-vai kbd { padding: 2px 5px; font-size: 11px; color: #fff; background: transparent; border-color: rgba(255, 255, 255, .45); }
@media (max-width: 900px) { .vista-vai .lbl, .vista-vai kbd { display: none; } }