/* ========================================================================== Project & Portfolio Manager – design system "Minimal enterprise" (Fase 2) Riferimenti: docs/fase2_grafica.md (direzione A). Solo monitor desktop (≥ 1280 px). ========================================================================== */ /* ---- Design token: solo tema chiaro, colorato (richiesta 15/10/2026) -------------------- */ :root { --bg: #f6f8fb; /* sfondo pagina chiaro */ --surface: #ffffff; /* card */ --surface-2: #f7f9fc; /* aree secondarie dentro le card */ --sidebar: #ffffff; --border: #dfe4ec; --border-strong: #b7c0cd; --fg: #0a0d14; /* testo principale */ --fg-2: #353e4c; /* testo secondario */ --muted: #586273; --primary: #0b7a45; /* pulsante principale: verde */ --primary-fg: #ffffff; --accent: #0b7a45; /* verde: link, focus, selezione (testo leggibile su bianco) */ --accent-bg: #e3f7ec; --ok: #0a8a47; --ok-bg: #e3f7ec; --warn: #b85f00; --warn-bg: #fff1d6; --ko: #d11f1f; --ko-bg: #fde4e4; /* tinte per card e icone colorate */ --c-green: #00a35a; --t-green: #e3f7ec; --x-green: #0b7a45; --c-violet: #6a3de8; --t-violet: #efeafe; --x-violet: #5530c7; --c-blue: #2a78d6; --t-blue: #e6f0fc; --x-blue: #1f5fae; --c-amber: #eda100; --t-amber: #fff3d6; --x-amber: #9a5b00; --c-pink: #d4497f; --t-pink: #fde8f0; --x-pink: #a8305f; /* grafici: verde + viola vivaci, validati (dataviz, CVD e contrasto) */ --series-1: #00a35a; --series-2: #6a3de8; --grid: #cfd6e0; --zona-1: #cfeedd; --zona-2: #e7ecf3; --zona-3: #f5f7fa; /* forma */ --radius: 16px; --radius-sm: 10px; --shadow: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04); --shadow-pop: 0 8px 24px rgba(16, 24, 40, .16); --font: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif; --sidebar-w: 248px; /* neutri (diagrammi, elementi esclusi) */ --neutro: #9aa3ae; --neutro-chiaro: #d9dce1; --neutro-bg: #f4f5f7; --neutro-testo: #a3a9b2; } /* ---- Base ---------------------------------------------------------------- */ * { box-sizing: border-box; } html { color-scheme: light; } body { margin: 0; font: 14px/1.55 var(--font); background: var(--bg); color: var(--fg); min-width: 1200px; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1 { font-size: 1.6rem; line-height: 1.25; margin: 0; letter-spacing: -.01em; } h2 { font-size: 1.1rem; margin: 0 0 .75rem; } h3 { font-size: .95rem; margin: 0 0 .5rem; } h4 { font-size: .8rem; margin: .5rem 0 .35rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 0 .3em; font-size: .9em; } ul, ol { padding-left: 1.2rem; } li { margin: .2rem 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---- Layout con sidebar ------------------------------------------------- */ .app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; } .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--sidebar); border-right: 1px solid var(--border); padding: 1rem .75rem; display: flex; flex-direction: column; gap: 1.25rem; } .brand { display: flex; align-items: center; gap: .6rem; padding: .25rem .5rem; color: var(--fg); font-weight: 700; } .brand:hover { text-decoration: none; } .brand-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--primary); color: var(--primary-fg); display: grid; place-items: center; font-size: .8rem; font-weight: 700; } .brand small { display: block; font-weight: 500; color: var(--muted); font-size: .72rem; } .nav-group { display: flex; flex-direction: column; gap: 2px; } .nav-title { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 0 .6rem .3rem; } .nav-item { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border-radius: var(--radius-sm); color: var(--fg-2); font-weight: 500; } .nav-item svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .nav-item:hover { background: var(--surface); color: var(--fg); text-decoration: none; } .nav-item.active { background: var(--surface); color: var(--fg); box-shadow: var(--shadow); border: 1px solid var(--border); } .nav-item.disabled { color: var(--muted); cursor: default; } .nav-item.disabled:hover { background: none; } .soon { margin-left: auto; font-size: .65rem; border: 1px solid var(--border-strong); border-radius: 999px; padding: 0 .4rem; } .sidebar-foot { margin-top: auto; font-size: .75rem; color: var(--muted); padding: 0 .6rem; } .content { min-width: 0; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 2rem; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 5; } .breadcrumb { font-size: .82rem; color: var(--muted); } .breadcrumb a { color: var(--muted); } .breadcrumb span + span::before { content: "/"; margin: 0 .45rem; color: var(--border-strong); } main { max-width: 1440px; padding: 1.75rem 2rem 4rem; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.25rem; } .page-head p { margin: .35rem 0 0; color: var(--fg-2); max-width: 900px; } .page-actions { display: flex; gap: .5rem; flex: none; } /* ---- Card e griglie ----------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.4rem; margin: 0 0 1.25rem; box-shadow: var(--shadow); } .card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; } .card-head h2 { margin: 0; } .card-head .muted { margin: 0; } .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } /* KPI */ .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; } .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1.1rem; box-shadow: var(--shadow); } .kpi-label { font-size: .78rem; color: var(--muted); font-weight: 500; } .kpi-value { font-size: 1.55rem; font-weight: 650; letter-spacing: -.01em; margin-top: .15rem; line-height: 1.2; } .kpi-value.small { font-size: 1.05rem; font-weight: 600; } .kpi-sub { font-size: .78rem; color: var(--fg-2); margin-top: .25rem; } /* ---- Testi di servizio ------------------------------------------------- */ .muted { color: var(--muted); } .fonte { color: var(--muted); font-size: .78rem; } .warn { color: var(--warn); } .notice { background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); border-left: 3px solid var(--warn); padding: .6rem .9rem; margin: 0 0 .75rem; border-radius: var(--radius-sm); } .notice.info { background: var(--accent-bg); border-color: color-mix(in srgb, var(--accent) 30%, transparent); border-left-color: var(--accent); } .notice.ok { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 30%, transparent); border-left-color: var(--ok); } /* ---- Pulsanti e controlli ---------------------------------------------- */ button, .button { display: inline-flex; align-items: center; gap: .4rem; background: var(--primary); color: var(--primary-fg); border: 1px solid var(--primary); border-radius: var(--radius-sm); padding: .5rem .95rem; font: 500 .88rem var(--font); cursor: pointer; text-decoration: none; } button:hover, .button:hover { opacity: .9; text-decoration: none; } button.danger, .button.danger { background: var(--ko); color: #fff; border-color: var(--ko); } button.danger:disabled { opacity: .45; cursor: not-allowed; } .secondary, .button.secondary { background: var(--surface); color: var(--fg); border-color: var(--border-strong); } /* Controllo «Modifica» non disponibile (17/10): resta visibile ma disabilitato, senza hover; il perché sta nel title */ .disabilitato, .button.disabilitato, .button.secondary.disabilitato { opacity: .5; cursor: not-allowed; user-select: none; } .disabilitato:hover, .button.disabilitato:hover { opacity: .5; text-decoration: none; } span.disabilitato:not(.button) { color: var(--muted); } .modifica-bloccata { display: inline-flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; } .row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: .9rem; } input[type=file] { font: inherit; color: var(--fg-2); } textarea { width: 100%; font: inherit; padding: .6rem .7rem; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--fg); } details { margin-top: .9rem; } summary { cursor: pointer; color: var(--fg-2); font-weight: 500; } /* Badge di stato */ .badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 600; padding: .1rem .55rem; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--fg-2); background: var(--surface); vertical-align: middle; } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge.verificato, .badge.ok { color: var(--ok); background: var(--ok-bg); border-color: transparent; } .badge.provvisorio, .badge.attenzione { color: var(--warn); background: var(--warn-bg); border-color: transparent; } .badge.ko { color: var(--ko); background: var(--ko-bg); border-color: transparent; } .badge.neutro::before { display: none; } /* Tabelle */ table { width: 100%; border-collapse: collapse; } th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--border); background: var(--surface-2); } td { padding: .6rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; } tr:last-child td { border-bottom: 0; } tbody tr:hover td { background: var(--surface-2); } tr.sel td { font-weight: 600; } .bar-cell { width: 40%; vertical-align: middle; } .bar { height: 10px; background: var(--series-1); border-radius: 4px; min-width: 2px; } .table-wrap { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } /* ---- Wizard ------------------------------------------------------------- */ .wizard-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.5rem; align-items: start; } .stepper { display: flex; gap: .5rem; margin-bottom: 1.25rem; } .step { flex: 1; display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--muted); } .step-num { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 700; border: 1px solid var(--border-strong); flex: none; } .step-label { font-size: .85rem; font-weight: 600; line-height: 1.25; } .step-label small { display: block; font-weight: 400; font-size: .72rem; } .step.done { color: var(--fg-2); } .step.done .step-num { background: var(--ok-bg); color: var(--ok); border-color: transparent; } .step.current { color: var(--fg); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .step.current .step-num { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); } .question h2 { font-size: 1.25rem; margin: .15rem 0 .5rem; } .question .help { color: var(--fg-2); margin: 0 0 1rem; } .option { display: flex; gap: .7rem; align-items: flex-start; padding: .75rem .9rem; border: 1px solid var(--border); border-radius: var(--radius-sm); margin: .5rem 0; cursor: pointer; background: var(--surface); } .option:hover { border-color: var(--border-strong); background: var(--surface-2); } .option input { margin-top: .2rem; accent-color: var(--accent); } .option:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent); } .storico ol { margin: 0; padding-left: 1.1rem; } .storico li { margin: .45rem 0; font-size: .85rem; color: var(--fg-2); } .storico li strong { color: var(--fg); font-weight: 600; } .progress { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin: .4rem 0 1rem; } .progress > span { display: block; height: 100%; background: var(--accent); } /* ---- Esito -------------------------------------------------------------- */ .eyebrow { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; margin-bottom: .3rem; } .proposta { margin: .4rem 0 0; color: var(--fg-2); } .path { counter-reset: p; list-style: none; padding: 0; margin: 0; } .path li { counter-increment: p; position: relative; padding: .45rem 0 .45rem 2.1rem; border-bottom: 1px dashed var(--border); } .path li:last-child { border-bottom: 0; } .path li::before { content: counter(p); position: absolute; left: 0; top: .45rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border-strong); display: grid; place-items: center; font-size: .72rem; font-weight: 700; color: var(--fg-2); } /* Fasi come timeline */ .timeline { display: flex; gap: 0; margin: 0 0 1.25rem; padding: 0; list-style: none; } .timeline li { flex: 1; position: relative; padding: 2rem .5rem 0; text-align: center; font-size: .8rem; color: var(--fg-2); margin: 0; } .timeline li::before { content: ""; position: absolute; top: .65rem; left: 0; right: 0; height: 2px; background: var(--border-strong); } .timeline li:first-child::before { left: 50%; } .timeline li:last-child::before { right: 50%; } .timeline li::after { content: attr(data-n); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--primary); color: var(--primary-fg); font-size: .72rem; font-weight: 700; display: grid; place-items: center; } .fasi { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } .fasi > li.card { margin: 0; } .fase-head { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .5rem; } .fase-num { width: 1.8rem; height: 1.8rem; flex: none; border-radius: 8px; background: var(--primary); color: var(--primary-fg); display: grid; place-items: center; font-weight: 700; font-size: .85rem; } .fase-head h3 { margin: .1rem 0 0; font-size: 1rem; } .meta { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .8rem; font-size: .85rem; margin: .6rem 0; } .meta dt { color: var(--muted); } .meta dd { margin: 0; } .gruppi-pmbok { font-size: .82rem; color: var(--muted); } /* ---- Grafico radiale --------------------------------------------------- */ .radar-wrap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.75rem; align-items: start; position: relative; } .radar-wrap > div { position: relative; } .chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .7rem; } .chip { background: var(--surface); color: var(--fg-2); border: 1px solid var(--border-strong); border-radius: 999px; padding: .25rem .7rem; font-size: .8rem; font-weight: 500; } .chip[aria-pressed="true"] { color: var(--fg); border-color: var(--series-2); box-shadow: inset 0 0 0 1px var(--series-2); } .legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--muted); } .sw { display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-right: .35rem; vertical-align: middle; } .sw-1 { background: var(--series-1); } .sw-2 { background: var(--series-2); } .tip { position: absolute; pointer-events: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .45rem .65rem; font-size: .8rem; box-shadow: var(--shadow-pop); max-width: 260px; z-index: 6; } .radar { width: 100%; display: block; margin: 0 auto; } .radar .grid { fill: none; stroke: var(--grid); stroke-width: 1; } .radar .axis { stroke: var(--grid); stroke-width: 1; } .radar .lbl { fill: var(--fg); font-size: 14px; font-weight: 650; font-family: var(--font); } .radar .lbl-sub { fill: var(--muted); font-size: 12px; font-family: var(--font); } .radar .area { stroke-width: 2.5; stroke-linejoin: round; } .radar .area.s1 { fill: var(--series-1); fill-opacity: .26; stroke: var(--series-1); } .radar .area.s2 { fill: var(--series-2); fill-opacity: .14; stroke: var(--series-2); stroke-dasharray: 7 4; } .radar .dot { stroke: var(--surface); stroke-width: 2; } .radar .dot.s1 { fill: var(--series-1); } .radar .dot.s2 { fill: var(--series-2); } .radar .zona { stroke: none; } .radar .zona.z-agile { fill: var(--zona-1); } .radar .zona.z-ibrido { fill: var(--zona-2); } .radar .zona.z-predittivo { fill: var(--zona-3); } .radar .zona-lbl { fill: var(--muted); font-size: 11px; font-family: var(--font); } .zona-badge { display: inline-block; padding: .1rem .6rem; border-radius: 999px; border: 1px solid var(--border-strong); font-weight: 600; } /* Fattori di contesto: grafico | Coerenza | Perché */ .fattori-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.5rem 2rem; align-items: start; } .fattori-grid .radar-solo { grid-row: span 2; } .radar-solo { position: relative; } .fattori-grid .coerenza-perche { display: contents; } .fattori-grid h3 { margin-top: 0; } .coerenza td:first-child { white-space: nowrap; } /* Motivi della scelta */ .motivi { border: 1px solid var(--border); border-left: 3px solid var(--series-1); border-radius: var(--radius-sm); padding: .75rem 1rem; background: var(--surface-2); } .motivi h3 { margin: 0 0 .4rem; font-size: .95rem; } .motivi ul { margin: 0; padding-left: 1.1rem; } .motivi li { margin: .35rem 0; } .motivi li.m-decisivo { font-weight: 600; } .motivi li.m-attenzione::marker { content: "⚠ "; } .radar-wrap .motivi { margin-top: 1rem; } /* Risposte non coerenti */ .incoerenze { border-color: color-mix(in srgb, var(--ko) 45%, transparent); background: var(--ko-bg); } .incoerenze h2 { color: var(--ko); } .ko, .ko strong { color: var(--ko); } .ko-tag { display: inline-block; font-size: .7rem; font-weight: 600; color: #fff; background: var(--ko); border-radius: 999px; padding: .05rem .5rem; margin-right: .3rem; } #radar .dot.s1.ko { fill: var(--ko); } /* Spiegazione AI */ #ai-out { margin-top: .9rem; } #ai-out p { margin: .5rem 0; } .coerenza .bar-cell { width: 30%; min-width: 56px; } .coerenza td { padding-left: .4rem; padding-right: .4rem; } .coerenza td:last-child { text-align: right; white-space: nowrap; } /* monitor da 1280 a 1400 px: grafico a sinistra, Coerenza e Perché impilati a destra */ @media (max-width: 1400px) { .fattori-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.5rem; } .fattori-grid .radar-solo { grid-row: span 2; } } /* ---- Interfaccia colorata su sfondo chiaro (richiesta 15/10/2026) ----------------------- */ .brand-mark { background: linear-gradient(135deg, var(--c-green), var(--c-blue)); color: #fff; } .nav-item.active { background: var(--t-green); color: var(--x-green); border-color: transparent; box-shadow: none; } .nav-item:hover { background: var(--surface-2); } .nav-group:nth-of-type(1) .nav-item svg { color: var(--c-green); } .nav-group:nth-of-type(2) .nav-item svg { color: var(--c-violet); opacity: .6; } .topbar { border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, var(--c-green), var(--c-blue), var(--c-violet)) 1; } /* KPI: colore per significato (tono-*) */ .kpi { border-top: 4px solid var(--k, var(--c-blue)); background: linear-gradient(180deg, var(--kt, var(--t-blue)) 0, var(--surface) 70%); } .kpi .kpi-value { color: var(--kx, var(--x-blue)); } /* Titoli delle card con barra colorata */ .card > h2:first-child, .card-head h2 { position: relative; padding-left: .8rem; } .card > h2:first-child::before, .card-head h2::before { content: ""; position: absolute; left: 0; top: .15em; bottom: .15em; width: 4px; border-radius: 2px; background: var(--k, var(--c-blue)); } /* Wizard */ .step.current { background: var(--t-green); } .step.current .step-num { background: var(--c-green); border-color: var(--c-green); color: #fff; } /* Fasi: colore per tipo di fase, uguale in timeline, numeri, card e legenda */ .timeline li::after { background: var(--n, var(--c-blue)); } .fase-num { background: var(--n, var(--c-blue)); color: #fff; } .fasi > li.card { border-top: 4px solid var(--n, var(--c-blue)); } .legenda-fasi { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: .8rem; color: var(--fg-2); margin: 0 0 1rem; } .legenda-fasi span { display: inline-flex; align-items: center; gap: .4rem; } .legenda-fasi i { width: 12px; height: 12px; border-radius: 4px; background: var(--n); } .tipo-fase { display: inline-block; font-size: .7rem; font-weight: 600; border-radius: 999px; padding: .05rem .55rem; background: var(--nt); color: var(--nx); margin-left: .35rem; } /* Tabelle e intestazioni */ th { background: var(--t-blue); color: var(--x-blue); } .motivi { border-left-color: var(--c-violet); background: var(--t-violet); } /* viola = approccio, come nei grafici */ .notice.info { background: var(--t-blue); border-left-color: var(--c-blue); } /* ---- Colori per significato (richiesta 15/10/2026: coerenti tra fasi e riquadri) --------- verde = il tuo progetto / esito positivo · viola = approccio (come la serie del grafico) blu = informazione · ambra = attenzione · rosso = incoerenza Tipi di fase: avvio blu · pianificazione viola · esecuzione verde · verifica turchese · rilascio rosa */ :root { --c-teal: #0f8f8c; --t-teal: #dcf3f2; --x-teal: #0b6b69; } .tono-progetto { --k: var(--c-green); --kt: var(--t-green); --kx: var(--x-green); } .tono-approccio { --k: var(--c-violet); --kt: var(--t-violet); --kx: var(--x-violet); } .tono-info { --k: var(--c-blue); --kt: var(--t-blue); --kx: var(--x-blue); } .tono-attenzione { --k: var(--c-amber); --kt: var(--t-amber); --kx: var(--x-amber); } .tono-ko { --k: var(--ko); --kt: var(--ko-bg); --kx: var(--ko); } .card.tono-progetto, .card.tono-approccio, .card.tono-info, .card.tono-attenzione, .card.tono-ko { border-top: 4px solid var(--k); } .fase-avvio { --n: var(--c-blue); --nt: var(--t-blue); --nx: var(--x-blue); } .fase-pianificazione { --n: var(--c-violet); --nt: var(--t-violet); --nx: var(--x-violet); } .fase-esecuzione { --n: var(--c-green); --nt: var(--t-green); --nx: var(--x-green); } .fase-verifica { --n: var(--c-teal); --nt: var(--t-teal); --nx: var(--x-teal); } .fase-rilascio { --n: var(--c-pink); --nt: var(--t-pink); --nx: var(--x-pink); } /* ---- Moduli (Fase 3) ------------------------------------------------------------------- */ .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.25rem; } .campo { display: flex; flex-direction: column; gap: .3rem; font-size: .82rem; font-weight: 600; color: var(--fg-2); } .span-2 { grid-column: span 2; } input[type=text], input:not([type]), input[type=date], input[type=number], select { font: 400 .9rem var(--font); color: var(--fg); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: .45rem .6rem; width: 100%; } td input, td select { min-width: 0; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); } /* campi non modificabili (es. passo 1 del PM su un progetto approvato): sfondo spento, come i controlli «Modifica» disabilitati */ input:disabled, select:disabled, textarea:disabled { background: color-mix(in srgb, var(--muted) 12%, var(--surface)); color: var(--muted); cursor: not-allowed; } a.step { text-decoration: none; } a.step:hover { border-color: var(--border-strong); } /* ---- Gantt delle fasi ------------------------------------------------------------------ */ .gantt { display: flex; flex-direction: column; gap: .5rem; } .gantt-row { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1rem; align-items: center; } .gantt-label { font-size: .85rem; } .gantt-track { position: relative; height: 26px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; } .gantt-bar { position: absolute; top: 3px; bottom: 3px; left: var(--start); width: var(--len); min-width: 4px; border-radius: 6px; background: var(--n); } .gantt-ms { position: absolute; top: 50%; left: var(--pos); width: 10px; height: 10px; background: var(--c-amber); transform: translate(-50%, -50%) rotate(45deg); border: 2px solid var(--surface-solido, #fff); z-index: 1; } td[style*="text-align:right"], th[style*="text-align:right"] { white-space: nowrap; } .card-head form select { width: auto; min-width: 180px; } .card-head form.row { flex-wrap: nowrap; } td:first-child a strong { white-space: nowrap; } /* ---- Portfolio (Fase 4) ----------------------------------------------------------------- */ /* Proposti: stessa tinta, tratteggiati e più chiari */ .campione-prop { display: inline-block; width: 22px; height: 10px; border-radius: 3px; vertical-align: middle; border: 1px dashed var(--fg-2); background: repeating-linear-gradient(45deg, var(--neutro) 0 3px, transparent 3px 6px); } .riga-prop td { background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(16,24,40,.025) 10px 20px); } .punteggio { display: flex; align-items: center; gap: .6rem; } .barra-punt { flex: 1; height: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; overflow: hidden; min-width: 60px; } .barra-punt > span { display: block; height: 100%; background: var(--c-violet); } .contr-max { color: var(--fg-2); opacity: .8; font-variant-numeric: tabular-nums; } .classifica select { width: auto; min-width: 64px; font-size: .82rem; padding: .35rem .45rem; } .classifica th, .classifica td { padding-left: .4rem; padding-right: .4rem; } .classifica .cl-progetto { min-width: 150px; } /* 150: la tabella sta nei 650 px disponibili a 1280 px (18/10) */ .classifica .cl-stato { white-space: nowrap; } /* stato in una colonna a parte (18/10) */ .legenda-semaforo { margin-bottom: .5rem; } .legenda-semaforo .semaforo-test { flex: none; } .classifica th.cl-voto { width: 1%; min-width: 96px; } /* colonne dei voti strette: solo l'etichetta («molto alto»), il «?» spiega la scala (18/10) */ .classifica .cl-codice { font-size: .78rem; color: var(--fg-2); font-variant-numeric: tabular-nums; } /* in evidenza il nome, il codice sotto (18/10) */ .classifica .th-sub { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--fg-2); font-size: .75rem; } .aiuto-voto { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; margin-left: .2rem; vertical-align: 1px; border: 1px solid var(--border); background: var(--surface); color: var(--fg-2); font-size: .7rem; font-weight: 700; cursor: help; } /* Legende a fianco del contenuto, in colonna (18/10): supporto all'operatività */ .con-legenda { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 1rem; align-items: start; } .legenda-lato { position: sticky; top: 72px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); padding: .6rem .75rem; font-size: .76rem; line-height: 1.35; display: flex; flex-direction: column; gap: .55rem; } .legenda-lato h3 { margin: 0 0 .2rem; font-size: .8rem; } .con-legenda.stretta { grid-template-columns: minmax(0, 1fr) 160px; } .legenda-lato .legenda-fasi, .legenda-lato .legend { flex-direction: column; flex-wrap: nowrap; gap: .3rem; margin: 0; font-size: .76rem; color: var(--fg-2); } .legenda-lato .legend span { display: inline-flex; align-items: center; gap: .4rem; } .legenda-lato .legend .sw { flex: none; margin-right: 0; } .radar-box { position: relative; } /* il tooltip del radar si posiziona sul genitore dell'svg */ .legenda-lato .legend span span { display: inline; } /* con la legenda a fianco il radar prende più spazio, così le etichette restano leggibili */ .con-legenda.minima { grid-template-columns: minmax(0, 1fr) 130px; gap: .75rem; } .radar-wrap:has(.legenda-lato) { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); gap: 1.25rem; } .fattori-grid:has(.legenda-lato) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.5rem 1.25rem; } .fattori-grid:has(.legenda-lato) .coerenza td:first-child { white-space: normal; } .legenda-lato .nota { margin: 0 0 .25rem; color: var(--fg-2); font-size: .72rem; } .legenda-lato ul, .legenda-lato ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .2rem; } .legenda-criteri li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: .4rem; align-items: center; } .legenda-criteri i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); } .legenda-lato.compatta { padding: .45rem .55rem; gap: .35rem; font-size: .72rem; line-height: 1.25; } .legenda-lato.compatta h3 { display: flex; justify-content: space-between; margin: 0; font-size: .74rem; } .legenda-lato.compatta .nota { margin: 0; font-size: .68rem; } .legenda-lato.compatta ul { gap: .1rem; } .legenda-criteri li > span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .legenda-lato.compatta .legenda-scala { border-top: 1px solid var(--border); padding-top: .3rem; } .legenda-lato.compatta .legenda-scala h3 { cursor: help; } .legenda-lato.compatta .legenda-scala ol { gap: .05rem; } .legenda-lato.compatta .legenda-scala li { display: grid; grid-template-columns: .7rem minmax(0, 1fr) auto; column-gap: .35rem; cursor: help; } .legenda-lato.compatta .breve { color: var(--fg-2); } .barra-punt.segmenti { display: flex; height: 14px; } .barra-punt.segmenti > .seg-crit { flex: none; background: var(--c); border-right: 1px solid var(--surface); } .barra-punt.segmenti > .seg-crit.neutro { background: repeating-linear-gradient(45deg, var(--c) 0 3px, transparent 3px 6px); } .anteprima { padding-left: 1.4rem; } .anteprima li { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px dashed var(--border); } .anteprima .punteggio { width: 45%; } /* Roadmap */ .rm { display: flex; flex-direction: column; gap: .45rem; } .rm-head, .rm-row { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1rem; align-items: center; } .rm-trim { display: flex; } .rm-trim span { flex: 1; text-align: center; font-size: .72rem; font-weight: 600; color: var(--muted); border-left: 1px solid var(--border); } .rm-label { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rm-track { position: relative; height: 28px; border: 1px solid var(--border); border-radius: 8px; background: repeating-linear-gradient(90deg, var(--surface-2) 0, var(--surface-2) calc(100% / var(--n-trim) - 1px), var(--border) calc(100% / var(--n-trim) - 1px), var(--border) calc(100% / var(--n-trim))); } .rm-bar { position: absolute; top: 4px; bottom: 4px; min-width: 4px; border-radius: 6px; background: var(--n); } .rm-row.prop .rm-bar { background: repeating-linear-gradient(45deg, var(--n) 0 4px, color-mix(in srgb, var(--n) 35%, white) 4px 8px); outline: 1.5px dashed var(--n); outline-offset: -1px; } .rm-oggi { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ko); z-index: 2; } .ms-legenda { display: inline-block; width: 9px; height: 9px; background: var(--c-amber); transform: rotate(45deg); margin-right: .2rem; } .oggi-legenda { display: inline-block; width: 2px; height: 12px; background: var(--ko); } /* Barre impilate per trimestre */ .barre { display: flex; align-items: flex-end; gap: .6rem; height: 260px; padding-top: 1.2rem; border-bottom: 1px solid var(--border-strong); } .barra-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; min-width: 0; } .barra-stack { width: 70%; max-width: 64px; display: flex; flex-direction: column-reverse; border-radius: 6px 6px 0 0; overflow: hidden; gap: 2px; background: var(--surface); } .seg { display: block; background: var(--c); min-height: 2px; } .seg.prop { background: repeating-linear-gradient(45deg, var(--c) 0 4px, color-mix(in srgb, var(--c) 30%, white) 4px 8px); } .barra-val { font-size: .72rem; font-weight: 600; color: var(--fg-2); margin-bottom: .2rem; } .barra-lbl { position: absolute; bottom: -1.5rem; font-size: .72rem; color: var(--muted); white-space: nowrap; } .barre + details, .con-legenda:has(.barre) + details { margin-top: 2rem; } .con-legenda .barre { gap: .35rem; } .con-legenda .barra-lbl { font-size: .62rem; } .cap-line { position: absolute; left: 6%; right: 6%; height: 0; border-top: 2px dashed var(--ko); z-index: 2; } .cap-legenda { display: inline-block; width: 18px; border-top: 2px dashed var(--ko); vertical-align: middle; margin-right: .2rem; } .tabella-modifica td { padding: .3rem; } .table-wrap:has(.tabella-ruoli) { overflow-x: auto; } .tabella-ruoli td:nth-child(1) input { min-width: 8rem; } .tabella-ruoli th.col-scelta, .tabella-ruoli td:nth-child(2) { width: 7rem; } .tabella-ruoli td:nth-child(2) select { width: 6.5rem; min-width: 0; } .tabella-ruoli th:nth-child(3), .tabella-ruoli td:nth-child(3) { width: 4.6rem; } /* costo orario il più stretto possibile (18/10) */ .tabella-ruoli td:nth-child(3) input { width: 4.2rem; min-width: 0; padding-left: .35rem; padding-right: .25rem; -moz-appearance: textfield; } .tabella-ruoli td:nth-child(3) input::-webkit-inner-spin-button, .tabella-ruoli td:nth-child(3) input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .tabella-ruoli .mercato-costo { min-width: 7.5rem; } .tabella-ruoli .mercato-note { min-width: 8rem; max-width: 12rem; line-height: 1.25; } .tabella-ruoli .mercato-azioni { white-space: nowrap; } .tabella-ruoli .mercato-azioni button { display: block; width: 100%; font-size: .75rem; padding: .25rem .4rem; } .tabella-ruoli .mercato-azioni button + button { margin-top: .3rem; } .tabella-ruoli .mercato-azioni button:disabled { opacity: .4; cursor: not-allowed; } details.foglio > summary { list-style: none; cursor: pointer; } details.foglio > summary::before { content: "▸ "; color: var(--muted); } details.foglio[open] > summary::before { content: "▾ "; } details.foglio[open] > summary { margin-bottom: .8rem; } .apri-foglio { float: right; padding: .3rem .7rem; font-size: .78rem; } .page-actions form { margin: 0; } /* Impostazioni a riquadri per tema */ .indice-temi { display: flex; gap: .5rem; margin: -.4rem 0 1.25rem; } .indice-temi a { padding: .3rem .8rem; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--fg-2); font-size: .82rem; font-weight: 500; } .indice-temi a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; } .tabella-impostazioni td { vertical-align: middle; } .tabella-impostazioni input[type=checkbox], .spunta input { width: auto; accent-color: var(--accent); transform: scale(1.15); } .tabella-impostazioni tr.spento td { color: var(--muted); } .griglia-fogli { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } .testa-foglio { display: flex; align-items: center; gap: .5rem; text-transform: none; font-size: .85rem; color: var(--fg); } .testa-foglio input { width: auto; flex: 1; } .testa-foglio .apri-foglio { float: none; margin-left: auto; } .spunta { display: flex; gap: .45rem; align-items: center; font-size: .88rem; } .azioni-file { display: flex; gap: .5rem; flex-wrap: wrap; } /* ---- Sottomenu della sezione Portfolio ---- */ .sotto-nav { display: flex; gap: .35rem; margin: 0 0 1.1rem; border-bottom: 1px solid var(--border); } .sotto-nav a { padding: .55rem 1rem; border-radius: 10px 10px 0 0; color: var(--fg-2); text-decoration: none; font-weight: 600; font-size: .9rem; border-bottom: 3px solid transparent; margin-bottom: -1px; } .sotto-nav a:hover { background: var(--t-green); color: var(--fg); } .sotto-nav a.attiva { color: var(--x-green); border-bottom-color: var(--c-green); background: var(--t-green); } .filtri { display: flex; gap: 1.2rem; align-items: flex-end; flex-wrap: wrap; padding: .8rem 1.1rem; margin-bottom: 1.1rem; } .filtri .campo select { min-width: 170px; } /* ---- Gantt di portfolio ---- */ .gt { --label: 300px; } .gt-head, .gt-riga { display: grid; grid-template-columns: var(--label) 1fr; align-items: center; } .gt-scala { display: grid; grid-template-columns: repeat(var(--np), 1fr); font-size: .74rem; color: var(--fg-3, var(--fg-2)); font-weight: 600; } .gt-scala span { border-left: 1px solid var(--border); padding: 0 .3rem .35rem; white-space: nowrap; overflow: hidden; } .gt-gruppo { font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-2); border-bottom: 1px solid var(--border); padding: .9rem 0 .35rem; } .gt-prog { border-bottom: 1px solid var(--border); } .gt-prog > summary { list-style: none; cursor: pointer; } .gt-prog > summary::-webkit-details-marker { display: none; } .gt-sommario .gt-label::before { content: "▸"; display: inline-block; width: 1em; color: var(--fg-2); transition: transform .15s; } .gt-prog[open] .gt-sommario .gt-label::before { transform: rotate(90deg); } .gt-label { font-size: .85rem; padding: .35rem .8rem .35rem 0; line-height: 1.3; } .gt-label.gt-fase { padding-left: 1.4rem; font-size: .8rem; color: var(--fg-2); } .gt-track { position: relative; height: 30px; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / var(--np) - 1px), var(--border) calc(100% / var(--np) - 1px), var(--border) calc(100% / var(--np))); } .gt-bar { position: absolute; top: 8px; height: 14px; border-radius: 6px; background: var(--n, var(--c-green)); min-width: 3px; } .gt-tot { top: 10px; height: 10px; background: var(--fg-2); opacity: .55; } .gt-prog.prop .gt-bar { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.45) 0 4px, transparent 4px 8px); } .gt-base { position: absolute; top: 4px; height: 22px; border: 1.5px dashed var(--fg-2); border-radius: 7px; opacity: .6; } .gt-gate { z-index: 1; } .base-legenda { border: 1.5px dashed var(--fg-2); background: transparent !important; } .ms-legenda { background: var(--c-amber) !important; transform: rotate(45deg) scale(.8); } .oggi-legenda { width: 2px !important; background: var(--ko) !important; } .gt-celle { display: grid; grid-template-columns: repeat(var(--np), 1fr); gap: 2px; padding: 3px 0; } .gt-cella { height: 24px; border-radius: 5px; font-size: .72rem; display: flex; align-items: center; justify-content: center; font-weight: 600; background: transparent; border: 1px dashed var(--border); color: var(--fg); font-variant-numeric: tabular-nums; } .gt-cella[title] { cursor: help; border: 0; } .gt-cella.ok { background: var(--t-green); color: var(--x-green); } .gt-cella.warn { background: var(--t-amber); color: var(--x-amber); } .gt-cella.ko { background: var(--ko-bg); color: var(--ko); } /* senza capacità: scala sequenziale a una tinta (blu, dal chiaro allo scuro), testo neutro */ .gt-cella.nocap.l1 { background: #e6f0fc; } .gt-cella.nocap.l2 { background: #cde2fb; } .gt-cella.nocap.l3 { background: #9ec5f4; } .gt-cella.nocap.l4 { background: #6da7ec; } .gt-cella.nocap.l5 { background: #3987e5; } html[data-modo="scuro"] .gt-cella.nocap.l1 { background: #0d366b; } html[data-modo="scuro"] .gt-cella.nocap.l2 { background: #184f95; } html[data-modo="scuro"] .gt-cella.nocap.l3 { background: #1c5cab; } html[data-modo="scuro"] .gt-cella.nocap.l4 { background: #256abf; } html[data-modo="scuro"] .gt-cella.nocap.l5 { background: #2a78d6; } html[data-modo="scuro"] .gt-cella.nocap { color: #ffffff; } .gt-carico-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem; } .gt-carico-testa .gt-gruppo { margin: 0; } .gt-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; font-size: .75rem; color: var(--fg-2); } .gt-legenda span { display: inline-flex; align-items: center; gap: .3rem; } .gt-legenda .gt-cella { display: inline-block; width: 18px; height: 12px; border: 0; } .gt-nota { font-size: .8rem; color: var(--fg-2); margin: .4rem 0; } .gt-nota .button { margin-left: .4rem; padding: .25rem .6rem; font-size: .78rem; } .gt-carico { grid-template-columns: var(--label) 1fr 64px; } .gt-picco { text-align: right; font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; padding-right: .2rem; } .gt-carico-intest .gt-celle span, .gt-carico-tot .gt-celle span { text-align: center; font-size: .74rem; font-weight: 600; color: var(--fg-2); } .gt-carico-tot { border-top: 1px solid var(--border-strong); margin-top: 2px; } .gt-carico-tot .gt-label, .gt-carico-tot .gt-celle span { font-weight: 700; color: var(--fg); } /* ---- Prospetto costi ---- */ .curva-s { display: grid; grid-template-columns: 90px 1fr; grid-template-rows: 280px 24px; gap: 0 .6rem; margin: .6rem 0 1rem; } .cs-asse { display: flex; flex-direction: column; justify-content: space-between; font-size: .72rem; color: var(--fg-2); text-align: right; transform: translateY(-.45em); } .cs-area { position: relative; border-left: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); } .cs-area svg { width: 100%; height: 100%; overflow: visible; } .cs-griglia { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; } .cs-cum { fill: none; stroke: var(--c-green); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; } .cs-disp { fill: none; stroke: var(--c-blue); stroke-width: 2; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; } .cs-punto { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--c-green); border: 2px solid var(--surface); cursor: default; } .cs-punto:hover { transform: scale(1.4); } .cs-x { position: relative; font-size: .72rem; color: var(--fg-2); } .cs-x span { position: absolute; transform: translateX(-50%); top: .3rem; white-space: nowrap; } table.prospetto td, table.prospetto th { white-space: nowrap; } table.prospetto .num { text-align: right; font-variant-numeric: tabular-nums; } table.prospetto .riga-prog td { border-top: 1px solid var(--border-strong); } table.prospetto .riga-voce td { font-size: .8rem; color: var(--fg-2); border-top: 0; padding-top: .15rem; padding-bottom: .15rem; } table.prospetto tfoot th { background: var(--t-green); } .ko-testo { color: var(--ko); } .table-wrap:has(.prospetto) { overflow-x: auto; } /* ---- Diagramma di flusso del wizard ---- */ .diagramma-flusso { margin-top: 1.25rem; } .df-info { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; font-size: .88rem; margin: -.2rem 0 .6rem; } .df-legenda { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: .78rem; color: var(--fg-2); margin-bottom: .7rem; } .df-legenda span { display: inline-flex; align-items: center; gap: .4rem; } .df-l { width: 18px; height: 11px; border-radius: 3px; border: 1.5px solid var(--border-strong); background: var(--surface); } .df-l.fatto { background: var(--t-green); border-color: var(--c-green); } .df-l.attuale { background: var(--t-blue); border: 2.5px solid var(--c-blue); } .df-l.escluso { background: var(--neutro-bg); border-color: var(--neutro-chiaro); } .df-l.esito { background: var(--t-violet); border-color: var(--c-violet); border-radius: 6px; } .df-l.aggiunto { border-style: dashed; } .df-scroll { max-height: 620px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg, #fafbfc); padding: 12px; } .df { display: block; margin: 0 auto; font-family: inherit; max-width: 100%; height: auto; } .df-arco { fill: none; stroke-width: 1.5; } .df-arco.percorso { stroke: var(--c-green); stroke-width: 3; } .df-arco.possibile { stroke: var(--neutro); } .df-arco.escluso { stroke: var(--neutro-chiaro); stroke-dasharray: 3 3; } .df-punta.percorso { fill: var(--c-green); } .df-punta.possibile { fill: var(--neutro); } .df-punta.escluso { fill: var(--neutro-chiaro); } .df-etichetta rect { fill: var(--surface); stroke: var(--border); } .df-etichetta text { font-size: 10.5px; text-anchor: middle; fill: var(--fg-2); } .df-etichetta.percorso text { fill: var(--x-green); font-weight: 700; } .df-etichetta.escluso { opacity: .55; } .df-nodo rect { fill: var(--surface-solido, var(--surface)); stroke: var(--neutro); stroke-width: 1.5; } .df-nodo text { font-size: 11.5px; text-anchor: middle; fill: var(--fg); } .df-nodo.aggiunto rect { stroke-dasharray: 5 3; } .df-nodo.fatto rect { fill: var(--t-green); stroke: var(--c-green); } .df-nodo.attuale rect { fill: var(--t-blue); stroke: var(--c-blue); stroke-width: 3; } .df-nodo.attuale text { font-weight: 700; fill: var(--x-blue); } .df-nodo.esito rect { fill: var(--t-violet); stroke: var(--c-violet); } .df-nodo.esito text { fill: var(--x-violet); font-weight: 600; } .df-nodo.esito.esito rect { stroke-width: 3; } .df-nodo.escluso rect { fill: var(--neutro-bg); stroke: var(--neutro-chiaro); } .df-nodo.escluso text { fill: var(--neutro-testo); font-weight: 400; } .df-nodo.esito.possibile rect { fill: var(--surface); stroke: var(--c-violet); } .df-nodo.regola rect { stroke-width: 1.5; } /* ---- Menu dei progetti nell'header ---- */ .menu-progetti { margin-left: auto; display: flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 600; color: var(--fg-2); } .menu-progetti select { width: 300px; padding: .4rem .6rem; font-size: .85rem; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); } .menu-progetti select:focus { outline: 2px solid var(--c-green); outline-offset: 1px; } /* ---- Riepilogo progetti del wizard ---- */ .riepilogo-wizard td { vertical-align: middle; } .riepilogo-wizard td.azioni { display: flex; gap: .4rem; justify-content: flex-end; align-items: center; white-space: nowrap; } .riepilogo-wizard td.azioni form { margin: 0; } .riepilogo-wizard tr.archiviato td { color: var(--muted); } .av-barra { height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; margin-bottom: .25rem; } .av-barra i { display: block; height: 100%; border-radius: 999px; background: var(--c-blue); } .av-salvato i { background: var(--c-green); } .av-da_salvare i { background: var(--c-amber); } /* ---- Wizard: domanda stretta a sinistra, diagramma del ramo attuale a destra ---- */ .wizard-layout { grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); } .wizard-layout .question { position: sticky; top: 1rem; } .wizard-layout .question h2 { font-size: 1.1rem; } .wizard-layout .option { padding: .6rem .75rem; } .wizard-layout .diagramma-flusso { margin-top: 0; } .wizard-layout .df-scroll { max-height: calc(100vh - 300px); min-height: 420px; } .df-titolo { margin: -.4rem 0 .6rem; font-size: .82rem; } .wizard-layout .df { max-width: none; } /* grandezza naturale: si scorre, centrato sulla domanda attuale */ .wizard-layout .df-legenda { font-size: .72rem; gap: .7rem; margin-bottom: .5rem; } /* con la legenda a fianco del diagramma la domanda scende alla larghezza minima, così il diagramma resta ampio */ .wizard-layout:has(.diagramma-flusso .legenda-lato) { grid-template-columns: 340px minmax(0, 1fr); } .diagramma-flusso .legenda-lato .df-legenda { flex-direction: column; flex-wrap: nowrap; gap: .3rem; margin: 0; font-size: .76rem; } .legenda-lato .df-l { flex: none; } .wizard-layout .df-info { font-size: .82rem; margin-bottom: .4rem; } button.link { background: none; border: 0; padding: 0; color: var(--x-blue, #1d4ed8); text-decoration: underline; font: inherit; cursor: pointer; } .gt-bar .gt-av { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: rgba(0,0,0,.28); } .gt-av-testo { position: absolute; right: -2.6rem; top: -1px; font-size: .68rem; color: var(--fg-2); } /* ---- Accesso ---- */ body.pagina-accesso { display: flex; min-height: 100vh; align-items: center; justify-content: center; background: var(--bg, #f6f7f9); } .accesso { width: 480px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 2.4rem 2.2rem; box-shadow: var(--shadow); } .accesso h1 { margin: 1.4rem 0 1.6rem; text-align: center; font-size: 1.3rem; font-weight: 500; white-space: nowrap; } .accesso-logo { display: flex; gap: .7rem; align-items: center; justify-content: center; } .accesso-marchio { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--fg); } .accesso-marchio span { font-weight: 400; color: var(--muted); } .logo-pm { width: 40px; height: 40px; border-radius: 12px; background: var(--c-green); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; } .accesso-logo .logo-pm { width: 48px; height: 48px; font-size: 1.15rem; } .accesso .accesso-password input:not([type=hidden]) { width: 100%; padding: .8rem .9rem; font-size: 1rem; } .accesso .btn-accesso { width: 100%; padding: .8rem; font-size: 1rem; justify-content: center; text-align: center; } .accesso-chi { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .55rem .9rem; margin-bottom: .2rem; border: 1px solid var(--border); border-radius: 999px; font-size: .9rem; } .accesso-chi span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .accesso-nota { margin: .5rem 0 0; font-size: .75rem; color: var(--muted); text-align: center; } html[data-tema] a.button.btn-google, .btn-google { display: flex; gap: .8rem; align-items: center; justify-content: center; width: 100%; padding: .8rem; font-size: 1rem; background: var(--surface-2, #eef0f3); color: var(--fg); border: 1px solid transparent; } html[data-tema] a.button.btn-google:hover { background: var(--border); } .accesso-sviluppo { margin-top: 1.5rem; } .accesso-sviluppo h2 { font-size: 1rem; } .accesso-sviluppo select { flex: 1; } .utente-header { display: flex; align-items: center; gap: .6rem; font-size: .82rem; color: var(--fg-2); margin-left: .8rem; } .utente-header strong { color: var(--fg); } .carica-excel { margin: 0; } .carica-excel label.button { cursor: pointer; } body.pagina-accesso { min-width: 0; width: 100%; } /* ---- Cosa manca (progetti non approvati) ---- */ .cosa-manca h3 { font-size: .95rem; margin: .2rem 0 .5rem; } .lista-manca { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; } .lista-manca li { display: flex; gap: .5rem; align-items: baseline; font-size: .9rem; } .lista-manca li.facoltativo { color: var(--fg-2); } .manca-n { font-size: .72rem; font-weight: 600; color: var(--ko); white-space: nowrap; } /* ---- Aiuto: guida e metodi ---- */ .guida { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1.25rem; align-items: start; } .guida-indice { position: sticky; top: 5rem; } .guida-indice ol { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .35rem; font-size: .9rem; } .guida-testo { display: flex; flex-direction: column; gap: 1rem; } .guida-testo .card { scroll-margin-top: 5rem; } .guida-testo h2 { display: flex; align-items: center; gap: .5rem; } .tabella-guida td:first-child { white-space: nowrap; font-weight: 600; } .flusso-guida { display: flex; flex-direction: column; gap: .4rem; padding-left: 1.2rem; } .glossario { display: grid; grid-template-columns: 180px 1fr; gap: .4rem 1rem; margin: 0; } .glossario dt { font-weight: 600; } .glossario dd { margin: 0; color: var(--fg-2); } .indice-metodi { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; } .indice-metodi a { display: inline-block; margin: 0 .8rem .35rem 0; font-size: .9rem; } .indice-metodi h3 { margin: 0 0 .5rem; font-size: .9rem; } .titolo-gruppo { margin: 1.6rem 0 .8rem; } .metodo { margin-bottom: 1rem; scroll-margin-top: 5rem; } .metodo h3 { font-size: .9rem; margin: 1rem 0 .4rem; } .metodo ul { margin: 0; padding-left: 1.1rem; } .metodo-fasi { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; } .metodo-fasi li { display: flex; gap: .7rem; align-items: flex-start; padding: .55rem .7rem; border-radius: 10px; background: var(--nt, var(--surface-2)); } .metodo-fasi .fase-num { flex: none; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; } /* ---- Chiedi all'AI (richiesta 15/10/2026) ------------------------------------------------------ */ .chat-ai { display: flex; flex-direction: column; gap: .75rem; } .chat-messaggi { display: flex; flex-direction: column; gap: .6rem; max-height: 60vh; overflow-y: auto; } .chat-messaggi:empty { display: none; } .chat-msg { padding: .7rem .95rem; border-radius: var(--radius-sm); max-width: 92%; line-height: 1.5; } .chat-msg > :first-child { margin-top: 0; } .chat-msg > :last-child { margin-bottom: 0; } .chat-msg h4 { margin: .6rem 0 .3rem; font-size: .95rem; } .chat-msg ul, .chat-msg ol { margin: .3rem 0; padding-left: 1.2rem; } .chat-msg.domanda { align-self: flex-end; background: var(--accent-bg); color: var(--fg); } .chat-msg.risposta { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); color: var(--fg); } .chat-msg.errore { align-self: flex-start; background: var(--ko-bg); color: var(--ko); } .chat-msg.attesa { color: var(--muted); font-style: italic; } .chat-esempi { display: flex; flex-wrap: wrap; gap: .4rem; } .chat-esempi .chip { background: var(--surface-2); color: var(--fg-2); border: 1px solid var(--border); border-radius: 999px; padding: .3rem .75rem; font-size: .85rem; font-weight: 500; cursor: pointer; } .chat-esempi .chip:hover { border-color: var(--accent); color: var(--accent); } .chat-form textarea { width: 100%; } .chat-azioni { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; } .chat-nota { margin-left: auto; font-size: .82rem; } /* Squadre e costi · Test */ .test-banner { margin: 0 0 1rem; padding: .7rem 1rem; border: 2px dashed var(--warn); background: var(--warn-bg); border-radius: 10px; } .sim-form label { font-size: .85rem; color: var(--muted); } .sim-form .sett { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .8rem; align-items: center; } .sim-form .sett input { width: 4.2rem; } .raci { display: inline-block; min-width: 1.5rem; text-align: center; font-weight: 700; font-size: .75rem; padding: .05rem .35rem; border-radius: 6px; } .raci-R { background: var(--ok-bg); color: var(--ok); } .raci-A { background: var(--ko-bg); color: var(--ko); } .raci-C { background: var(--warn-bg); color: var(--warn); } .raci-I { background: var(--surface-2, #eee); color: var(--muted); } .raci-tab th { font-size: .75rem; white-space: normal; } .nav-test { font-size: .62rem; font-weight: 700; color: var(--warn); border: 1px solid var(--warn); border-radius: 4px; padding: 0 .3rem; margin-left: .3rem; } /* ---- Scelta del progetto in testa al menu, con ricerca (richiesta 16/10/2026) ---------------------- */ .topbar .scelta-tema { margin-left: auto; } .cerca-progetto { position: relative; margin: .75rem .25rem .5rem; } .cerca-campo { display: flex; align-items: center; gap: .45rem; padding: 0 .6rem; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--campo-bg, var(--surface)); } .cerca-campo:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; } .cerca-campo svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; } .cerca-campo input { border: 0; outline: 0; background: transparent; padding: .5rem 0; font-size: .85rem; width: 100%; min-width: 0; color: var(--fg); } .cerca-campo input::placeholder { color: var(--fg-2); opacity: .85; } .cerca-lista { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: .3rem; list-style: none; max-height: 60vh; overflow-y: auto; background: var(--surface-solido, var(--surface)); color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); } .cerca-lista [role="option"] { display: flex; flex-direction: column; padding: .4rem .55rem; border-radius: 8px; cursor: pointer; font-size: .82rem; } .cerca-lista [role="option"] span { color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cerca-lista [role="option"][aria-selected="true"] strong::after { content: " · aperto"; font-weight: 500; color: var(--muted); } .cerca-lista [role="option"].attiva, .cerca-lista [role="option"]:hover { background: var(--accent-bg); } .cerca-lista .cerca-nuovo { flex-direction: row; align-items: center; gap: .45rem; font-weight: 600; color: var(--accent); border-bottom: 1px solid var(--border); border-radius: 8px 8px 0 0; margin-bottom: .2rem; } .cerca-lista .cerca-nuovo span { color: inherit; } .cerca-lista .cerca-nuovo svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; } .cerca-gruppo { padding: .45rem .55rem .15rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .cerca-vuoto { padding: .5rem .55rem; font-size: .82rem; color: var(--muted); } .cerca-lista [hidden], .cerca-lista[hidden] { display: none !important; } /* ---- Accesso con credenziali proprie (D31, 16/10/2026) --------------------------------------------- */ .accesso-password { display: flex; flex-direction: column; gap: .7rem; margin-top: .6rem; } .accesso-password .campo input { width: 100%; } .accesso-registrati { margin: 1.4rem 0 0; font-size: .85rem; text-align: center; } .o-separatore { display: flex; align-items: center; gap: .6rem; margin: 1.1rem 0; color: var(--muted); font-size: .85rem; } .o-separatore::before, .o-separatore::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* ---- Sincronizzazioni: riquadri compatti per direzione (16/10/2026) --------------------------------- */ .sync-gruppo { margin: 1.1rem 0 .4rem; } .sync-lista { padding: .2rem .9rem; } .sync-voce { border-bottom: 1px solid var(--border); padding: .15rem 0; } .sync-voce:last-child { border-bottom: 0; } .sync-voce > summary { display: grid; grid-template-columns: minmax(180px, 1.1fr) 2fr auto; align-items: center; gap: .8rem; padding: .55rem 0; cursor: pointer; list-style: none; } .sync-voce > summary::-webkit-details-marker { display: none; } .sync-voce > summary::before { content: "▸"; position: absolute; margin-left: -.9rem; color: var(--muted); } .sync-voce[open] > summary::before { content: "▾"; } .sync-nome { font-weight: 600; } .sync-stato { font-size: .86rem; } .sync-azioni { display: flex; gap: .4rem; justify-content: flex-end; } .sync-azioni form { margin: 0; } .sync-azioni .button, .sync-azioni button { padding: .3rem .7rem; font-size: .8rem; white-space: nowrap; } .sync-dettagli { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 0 0 .8rem 0; font-size: .88rem; } .sync-dettagli h3 { margin: .3rem 0 .1rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); } .sync-dettagli p { margin: 0 0 .4rem; } .sync-problema > summary .sync-nome::after { content: " ⚠"; } /* ---- Indicatori di progresso (16/10/2026) ---------------------------------------------------------- */ #ppm-progresso { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100; overflow: hidden; opacity: 0; transition: opacity .2s; pointer-events: none; } #ppm-progresso i { position: absolute; top: 0; bottom: 0; width: 35%; background: var(--accent, #2563eb); border-radius: 3px; animation: ppm-barra 1.1s ease-in-out infinite; } .ppm-in-corso #ppm-progresso { opacity: 1; } @keyframes ppm-barra { 0% { left: -35%; } 100% { left: 100%; } } #ppm-attesa { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 100; display: flex; align-items: center; gap: .6rem; max-width: 380px; padding: .65rem .9rem; border-radius: 12px; background: var(--surface-solido, var(--surface)); color: var(--fg); border: 1px solid var(--border-strong); box-shadow: var(--shadow-pop); font-size: .88rem; } #ppm-attesa[hidden] { display: none; } .ppm-rotella { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--accent, #2563eb); display: inline-block; vertical-align: -2px; animation: ppm-gira .8s linear infinite; } @keyframes ppm-gira { to { transform: rotate(360deg); } } .ppm-in-corso { cursor: progress; } @media (prefers-reduced-motion: reduce) { #ppm-progresso i, .ppm-rotella { animation-duration: 2.5s; } } /* Righe proposte dall'AI nelle tabelle del passo 5 (stakeholder e rischi): bozza da rivedere, evidenziata finché non si salva. I colori seguono le variabili del tema (chiaro/scuro). */ tr.ai-nuova > td { background: var(--accent-bg); } tr.ai-nuova > td:first-child { box-shadow: inset 3px 0 0 var(--accent); } /* ---- Sincronizzazioni: schema a blocchi (16/10/2026) ------------------------------------------------- */ .fx { padding: 1.2rem 1.2rem 1rem; } .fx-griglia { display: grid; grid-template-columns: minmax(210px, 1fr) minmax(300px, 1.7fr) minmax(210px, 1fr); grid-template-areas: "app lanes clickup" "vert . ." "excel altri altri"; gap: .8rem 1rem; align-items: stretch; } .fx-box { display: flex; flex-direction: column; gap: .25rem; justify-content: center; padding: 1rem 1.1rem; border-radius: var(--radius); border: 2px solid var(--border-strong); background: var(--surface-2, var(--surface)); box-shadow: var(--shadow); } .fx-box strong { font-size: 1.02rem; } .fx-box small { color: var(--muted); } .fx-etichetta { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); } .fx-app { grid-area: app; border-color: var(--accent); } .fx-clickup { grid-area: clickup; border-color: var(--c-violet, #6a3de8); } .fx-clickup .fx-etichetta { color: var(--c-violet, #6a3de8); } .fx-excel { grid-area: excel; border-color: var(--ok, #0a8a47); } .fx-excel .fx-etichetta { color: var(--ok, #0a8a47); } .fx-spento { opacity: .6; } .fx-problema { border-color: var(--warn); } .fx-lanes { grid-area: lanes; display: flex; flex-direction: column; gap: .6rem; justify-content: center; } .fx-lane { display: grid; align-items: center; gap: .6rem; } .fx-lane.fx-dx { grid-template-columns: 1fr 34px; } .fx-lane.fx-sx { grid-template-columns: 34px 1fr; } .fx-et { display: flex; flex-direction: column; gap: .15rem; font-size: .83rem; padding: .5rem .7rem; border: 1px dashed var(--border-strong); border-radius: 10px; background: var(--surface); } .fx-et b { font-size: .86rem; } .fx-et form { margin: .2rem 0 0; } .fx-et .button, .fx-et button { align-self: flex-start; padding: .25rem .7rem; font-size: .78rem; margin-top: .2rem; } .fx-problema > .fx-et, .fx-lane.fx-problema .fx-et { border-color: var(--warn); } /* frecce: linea con punta (orizzontali e verticali) */ .fx-freccia { position: relative; height: 2px; background: var(--accent); align-self: center; } .fx-lane.fx-dx .fx-freccia::after { content: ""; position: absolute; right: -2px; top: -5px; border-left: 9px solid var(--accent); border-top: 6px solid transparent; border-bottom: 6px solid transparent; } .fx-lane.fx-sx .fx-freccia { background: var(--c-violet, #6a3de8); } .fx-lane.fx-sx .fx-freccia::before { content: ""; position: absolute; left: -2px; top: -5px; border-right: 9px solid var(--c-violet, #6a3de8); border-top: 6px solid transparent; border-bottom: 6px solid transparent; } .fx-vert { grid-area: vert; display: grid; grid-template-columns: 34px 1fr; gap: .6rem; align-items: stretch; } .fx-freccia-v { position: relative; width: 2px; margin: 0 auto; background: var(--ok, #0a8a47); } .fx-freccia-v::before, .fx-freccia-v::after { content: ""; position: absolute; left: -5px; border-left: 6px solid transparent; border-right: 6px solid transparent; } .fx-freccia-v::before { top: -2px; border-bottom: 9px solid var(--ok, #0a8a47); } .fx-freccia-v::after { bottom: -2px; border-top: 9px solid var(--ok, #0a8a47); } .fx-altri { grid-area: altri; display: flex; gap: .8rem; align-items: stretch; } .fx-mini { flex: 1; display: flex; flex-direction: column; gap: .15rem; padding: .7rem .9rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--fg); text-decoration: none; } .fx-mini:hover { border-color: var(--accent); } .fx-mini small { color: var(--muted); } /* Marchi di ClickUp ed Excel accanto alle operazioni che leggono, scrivono o sincronizzano le due applicazioni */ .ico-app { width: 1.15em; height: 1.15em; vertical-align: -.25em; margin-right: .4em; flex: none; background: #fff; border-radius: .3em; padding: .09em; box-shadow: 0 0 0 1px rgba(0,0,0,.08); } .nav-item .ico-app { margin: 0 0 0 auto; width: 1em; height: 1em; opacity: .9; } .nav-ico-tool { width: 16px; height: 16px; flex: none; background: #fff; border-radius: 4px; padding: 1px; } /* voce «Tool»: icona del tool attivo (22/10) */ .fx-etichetta .ico-app { width: 1.1em; height: 1.1em; vertical-align: -.2em; } /* Sezioni chiuse affiancate: ognuna alta quanto il proprio titolo, senza riquadri vuoti */ .grid-2 > details.foglio { align-self: start; } /* PC7 (16/10): campanella degli avvisi nell'header (proposti per il portfolio manager, approvati di recente per il project manager) */ .avviso-header { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; margin-left: .8rem; border-radius: 50%; color: var(--muted); text-decoration: none; } .avviso-header svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .avviso-header.attivo { color: var(--fg); background: var(--surface); border: 1px solid var(--border-strong); } .avviso-header.attivo:hover { border-color: var(--accent); color: var(--accent); } .avviso-n { position: absolute; top: -.35rem; right: -.35rem; min-width: 1.1rem; height: 1.1rem; padding: 0 .28rem; box-sizing: border-box; border-radius: 999px; background: var(--ko, #c0392b); color: #fff; font-size: .68rem; font-weight: 700; line-height: 1.1rem; text-align: center; } /* Voce di menu che apre la mappa del workflow in una nuova finestra: freccia «esterno» a destra */ .nav-item .nav-esterno { margin: 0 0 0 auto; width: .85em; height: .85em; opacity: .6; stroke-width: 2; } /* Scheda progetto a tab (17/10): stesso linguaggio dei tab del portfolio (.sotto-nav), sottolineatura col colore primario. Senza JavaScript la barra è nascosta e tutti i pannelli restano visibili; con JS (classe .schede-js) si vede solo il pannello attivo. */ .schede-barra { display: none; gap: .35rem; margin: 0 0 1.1rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .schede-js .schede-barra { display: flex; } /* selettori doppi: devono battere lo stile globale dei