/* Il pannello di Nexus Preview. Dal 2026-10-11 (D321, docs/online.md par. 15)
   veste il guscio del portale: colonna di navigazione, foglio incassato e
   colonna delle azioni sono il CSS del kit (nexus-shell.css); qui stanno
   solo cio' che il portale prende da DevExpress (campi, griglie), le parti
   proprie del pannello e l'assetto sul telefono. Solo token --nx-* /
   --nexus-*: niente colori letterali dove il kit ha un token. Testi in
   italiano: e' lo strumento di chi vende, come l'Admin Console. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: var(--nexus-font-family); color: var(--nexus-text-primary); background: var(--nx-canvas); display: flex; flex-direction: column; min-height: 100vh; }
a { color: var(--nx-teal-ink, #0b7a75); }
button { font-family: inherit; }
[hidden] { display: none !important; }

/* ---- Le pagine del cliente (_LayoutCliente, D313): marchio e foglio, nessun menu ---- */
.pn-top { display: flex; align-items: center; gap: 28px; padding: 14px 28px; color: #fff; }
.pn-brand { color: #fff; font-weight: 600; font-size: 22px; text-decoration: none; }
.pn-brand span { color: var(--nx-teal); }
.pn-main { flex: 1; padding: 0 28px 28px; }
.pn-sheet { max-width: 1180px; margin: 0 auto; background: var(--nx-sheet); border-radius: var(--nx-radius-sheet); padding: 28px 32px 36px; }
.pn-sheet--narrow { max-width: 520px; margin-top: 8vh; }
.pn-foot { color: var(--nx-on-canvas-muted, #8FA3B8); font-size: 12px; padding: 14px 28px 20px; max-width: 1240px; margin: 0 auto; width: 100%; }

/* ---- Il guscio del portale (D321) ---- */
/* Un solo contenitore che scorre, come nel portale: il foglio. */
body.pn-portale { display: block; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
.pn-portale .nx-shell { height: 100%; }
/* Le icone del kit in linea: il colore lo da' il testo (nel portale arrivano
   come <img> col filtro, nel motore come qui). */
.pn-icon { display: inline-grid; place-items: center; width: 1em; height: 1em; font-size: 18px; flex: none; }
.pn-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; }
.nx-rail-row__icon .pn-icon { font-size: 18px; }
.nx-rail-row--leaf .nx-rail-row__icon .pn-icon { font-size: 16px; }
.nx-rail-item__icon .pn-icon { font-size: 20px; }
/* Nei riquadri della colonna compressa l'etichetta va a capo sillabata, non a meta' parola. */
.nx-rail-item__label { hyphens: auto; }
.nx-nav-handle .pn-icon { font-size: 16px; }
.nx-topbtn .pn-icon { font-size: 20px; }
.nx-account__item-icon .pn-icon { font-size: 16px; }
/* Nel portale le voci sono pulsanti; qui sono link (si aprono anche in un'altra scheda). */
a.nx-rail-row, a.nx-rail-item, a.nx-topbtn, a.nx-account__item { text-decoration: none; }
.nx-rail-row__chev { transition: transform .15s ease; }
.nx-rail-row--open .nx-rail-row__chev { transform: rotate(90deg); }
.nx-actrail .nx-account__user-mark { width: 34px; height: 34px; font-weight: 600; font-size: 12px; }
.nx-actrail .nx-topbtn .nx-account__user-mark { cursor: pointer; }
.nx-account__menu .pn-inline { display: block; }
/* Il marchio: il logo del portale e, accanto, il nome dello strumento. */
.pn-brand-link { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.pn-brand-tag { color: var(--nx-on-canvas-muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1; padding-top: 4px; }
/* Il foglio della pagina: il contenitore del portale da' larghezza e margini,
   le pagine tengono il loro .pn-sheet come semplice involucro. */
.nx-content .pn-sheet { max-width: none; margin: 0; background: none; border-radius: 0; padding: 0; }
.nx-content .pn-sheet--narrow { max-width: 560px; }
.nx-content__inner { min-height: 100%; }
.pn-card + .pn-grid, .pn-grid + .pn-card { margin-top: 14px; }
.nx-content .pn-foot { color: var(--nexus-text-muted); padding: 18px 0 4px; margin: auto 0 0; max-width: none; border-top: 1px solid var(--nx-line-soft); }
/* Il titolo della pagina nel registro dei titoli del portale. */
.nx-content h1 { font-family: var(--nexus-font-heading); font-size: var(--nexus-fs-h2); line-height: var(--nexus-lh-h2); font-weight: var(--nexus-fw-semibold); margin: 0 0 4px; }
.nx-content h2 { font-family: var(--nexus-font-heading); font-size: var(--nexus-fs-h3); line-height: var(--nexus-lh-h3); font-weight: var(--nexus-fw-semibold); margin: 24px 0 10px; }
.nx-content .pn-lead { font-size: var(--nexus-fs-body-sm); }

/* Sul telefono la barra in cima e la colonna che si apre sopra il foglio;
   sul desktop non ci sono. */
.pn-mbar, .pn-scrim { display: none; }
@media (max-width: 760px) {
  .pn-portale .nx-shell.nx-canvas { --nx-content-padding: 14px; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); padding: 0 8px 8px; gap: 0 4px; }
  .pn-mbar { display: flex; align-items: center; gap: 8px; grid-column: 1; grid-row: 1; height: 52px; min-width: 0; }
  .pn-mbar__menu { color: var(--nx-on-canvas); }
  /* La colonna sul telefono e' sempre estesa: la maniglia li' non serve. */
  .pn-portale .nx-nav-handle { display: none; }
  .pn-mbar__brand { display: flex; align-items: center; gap: 6px; text-decoration: none; }
  .pn-portale .nx-actrail { grid-column: 2; grid-row: 1; flex-direction: row; align-items: center; height: 52px; }
  .pn-portale .nx-main { grid-column: 1 / -1; grid-row: 2; }
  /* La colonna del menu esce da sinistra sopra il foglio, col velo dietro. */
  .pn-portale .nx-nav-col { position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; padding: 6px 0; background: var(--nx-canvas); box-shadow: var(--nx-shadow-float); transform: translateX(-105%); transition: transform .2s ease; }
  .pn-portale .pn-nav-open .nx-nav-col { transform: none; }
  .pn-portale .pn-nav-open .pn-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: color-mix(in srgb, var(--nx-navy-deep, #050E1A) 45%, transparent); }
  /* Il menu dell'account si apre sotto il pulsante, non al suo fianco. */
  .pn-portale .nx-account__menu { right: 0; top: calc(100% + 8px); max-width: calc(100vw - 24px); }
}

/* ---- L'accesso: il foglio stretto sul telaio, con il marchio sopra ---- */
body.pn-solo { align-items: center; }
.pn-solo__frame { width: 100%; max-width: 560px; padding: 9vh 16px 24px; display: flex; flex-direction: column; gap: 18px; }
.pn-solo__brand { display: flex; align-items: center; gap: 10px; padding-left: 4px; }
.pn-solo .pn-sheet--narrow { margin: 0; max-width: none; }
.pn-solo .pn-foot { padding: 0 4px; max-width: none; }
.pn-solo .pn-flash { margin: 0; max-width: none; }

h1 { font-size: 24px; margin: 0 0 6px; } h2 { font-size: 18px; margin: 22px 0 10px; }
.pn-lead { color: var(--nexus-text-secondary); margin: 0 0 22px; max-width: 760px; }
.pn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; } .pn-wide { grid-column: 1 / -1; }
@media (max-width: 760px) { .pn-grid { grid-template-columns: 1fr; } .pn-top { flex-wrap: wrap; gap: 12px; } .pn-main { padding: 0 12px 20px; } .pn-sheet { padding: 20px 16px; } }
label { display: block; font-size: 12.5px; font-weight: 600; color: var(--nexus-text-secondary); margin-bottom: 4px; }
.pn-inline { display: inline; margin: 0; }
/* I campi nella forma degli editor DevExpress del portale (come nel motore). */
:where(input:not([type]), input[type=text], input[type=password], input[type=email], input[type=search], input[type=number], select, textarea) { width: 100%; min-height: var(--nx-control-h, 38px); border: 0; border-radius: var(--nx-radius-sm); background: var(--nx-field); color: var(--nx-text); font: inherit; font-size: var(--nexus-fs-body-sm); padding: 8px 10px; }
textarea { min-height: 180px; resize: vertical; line-height: 1.5; }
:where(input, textarea, select):focus { outline: none; box-shadow: var(--nx-focus); background: var(--nx-field-hover, var(--nx-field)); }
.pn-hint { font-size: 12px; color: var(--nexus-text-muted); margin-top: 4px; }
.pn-actions { display: flex; gap: 10px; margin-top: 18px; align-items: center; flex-wrap: wrap; }
.pn-check { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--nx-text); }
.pn-check input { width: auto; }
/* Gli avvisi come nexus-alert del portale. */
.pn-flash { padding: 11px 13px; border: var(--nexus-border-width, 1px) solid var(--nexus-border); border-left: 3px solid var(--nexus-success); border-radius: var(--nexus-radius-md); background: var(--nexus-success-subtle); color: var(--nexus-success-text); font-size: var(--nexus-fs-body-sm); line-height: 1.5; }
.pn-flash--errore { background: var(--nexus-error-subtle); border-left-color: var(--nexus-error); color: var(--nexus-error-text); }
/* Le tabelle come le griglie del portale: sole linee orizzontali, testata attenuata. */
.pn-table { width: 100%; border-collapse: collapse; font-size: var(--nexus-fs-body-sm); }
.pn-table th { text-align: left; font-size: var(--nexus-fs-table-head, 12px); color: var(--nexus-text-muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--nx-line); white-space: nowrap; }
.pn-table td { padding: 9px 10px; border-bottom: 1px solid var(--nx-line-soft); vertical-align: top; }
.pn-table tbody tr:hover td { background: var(--nx-row-selected, var(--nexus-hover-surface)); }
.pn-table .pn-num { text-align: right; font-variant-numeric: tabular-nums; }
/* Gli stati come nexus-chip del portale. */
.pn-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--nexus-radius-pill, 999px); font-size: var(--nexus-fs-caption, 12px); font-weight: var(--nexus-fw-medium, 500); white-space: nowrap; vertical-align: middle; background: var(--nexus-surface-alt); color: var(--nexus-text-secondary); }
.pn-chip--ok { background: var(--nexus-success-subtle); color: var(--nexus-success-text); } .pn-chip--warn { background: var(--nexus-warning-subtle); color: var(--nexus-warning-text); } .pn-chip--bad { background: var(--nexus-error-subtle); color: var(--nexus-error-text); } .pn-chip--run { background: var(--nexus-info-subtle); color: var(--nexus-info-text); }
.pn-log { background: var(--nx-surface); border-radius: var(--nx-radius-card); box-shadow: var(--nx-shadow-card); padding: 14px 16px; font-family: var(--nexus-font-mono); font-size: 12.5px; white-space: pre-wrap; min-height: 60px; max-height: 360px; overflow: auto; }
.pn-card { background: var(--nx-surface); border-radius: var(--nx-radius-card); box-shadow: var(--nx-shadow-card); padding: 16px 18px; margin-top: 14px; }
.pn-md { font-size: 14px; line-height: 1.55; } .pn-md table { border-collapse: collapse; font-size: 13px; } .pn-md th, .pn-md td { border: 1px solid var(--nx-line); padding: 5px 8px; vertical-align: top; } .pn-md code { background: var(--nx-field); padding: 1px 4px; border-radius: 4px; }
.pn-kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 14px; margin: 0; } .pn-kv dt { color: var(--nexus-text-secondary); } .pn-kv dd { margin: 0; }
/* Sul telefono (2026-10-11): i valori lunghi senza spazi (percorsi, codici)
   vanno a capo, e una tabella piu' larga dello schermo scorre dentro il suo
   riquadro invece di allargare tutta la pagina. */
.pn-kv dd, .pn-mono { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 760px) { .pn-table, .pn-md table { display: block; max-width: 100%; overflow-x: auto; } }
.pn-mono { font-family: var(--nexus-font-mono); font-size: 13px; }
.pn-danger { color: var(--nx-danger-ink, var(--nexus-error-text)); }
a.nx-cmd, a.nx-cmd:hover { text-decoration: none; }
.pn-empty { color: var(--nexus-text-muted); font-style: italic; }

/* ---- Generazione in corso: spinner, barra, fasi e racconto (docs/online.md par. 2) ---- */
.pn-spinner { display: inline-block; width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgb(28 207 201 / .22); border-top-color: var(--nx-teal, #1CCFC9); animation: pn-spin .8s linear infinite; flex: none; vertical-align: middle; }
.pn-spinner--xs { width: 11px; height: 11px; border-width: 2px; margin-right: 6px; }
.pn-spinner--on-btn { border-color: rgb(8 23 43 / .2); border-top-color: currentColor; }
.pn-spinner--done { animation: none; border-color: var(--nx-teal, #1CCFC9); background: var(--nx-teal, #1CCFC9); }
@keyframes pn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pn-spinner { animation-duration: 2.4s; } .pn-story__item { animation: none; } }
.pn-busy { pointer-events: none; opacity: .85; }
.pn-chip .pn-spinner--xs { margin: -1px 5px 0 0; border-color: rgb(29 78 154 / .2); border-top-color: currentColor; }
.pn-run { background: var(--nx-surface); border-radius: var(--nx-radius-card); box-shadow: var(--nx-shadow-card); padding: 20px 22px 18px; margin-top: 20px; }
.pn-run__head { display: flex; align-items: center; gap: 14px; }
.pn-run__title { margin: 0; font-size: 19px; }
.pn-run__eta { color: var(--nexus-text-secondary); font-size: 14.5px; margin-top: 2px; }
.pn-run__clock { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--nexus-text-muted); font-size: 13px; }
.pn-bar { height: 6px; border-radius: 999px; background: #E6ECF2; overflow: hidden; margin: 16px 0 14px; }
.pn-bar__fill { height: 100%; width: 2%; background: var(--nx-teal, #1CCFC9); border-radius: inherit; transition: width .9s ease; }
.pn-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; }
.pn-step { display: inline-flex; align-items: center; gap: 2px; padding: 5px 12px 5px 9px; border-radius: 999px; background: #EEF2F6; color: var(--nexus-text-secondary); font-size: 13px; font-weight: 600; }
.pn-step__dot { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-right: 5px; border-radius: 50%; border: 2px solid #B8C4D0; }
.pn-step__dot svg { width: 10px; height: 10px; }
.pn-step--done { background: var(--nexus-teal-100, #E6F8F7); color: var(--nx-teal-ink, #0B7B77); }
.pn-step--done .pn-step__dot { border-color: var(--nx-teal, #1CCFC9); background: var(--nx-teal, #1CCFC9); color: var(--nx-navy-deep, #08172B); }
.pn-step--now { background: var(--nx-navy-deep, #08172B); color: #fff; }
.pn-step--now .pn-spinner--xs { border-color: rgb(28 207 201 / .3); border-top-color: var(--nx-teal, #1CCFC9); }
.pn-run__label { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--nx-teal-ink, #0B7B77); margin-bottom: 6px; }
.pn-story { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow: auto; }
.pn-story__item { display: grid; grid-template-columns: 20px 42px 1fr; align-items: start; gap: 8px; padding: 7px 2px; font-size: 15.5px; line-height: 1.45; color: var(--nexus-text-secondary); animation: pn-in .35s ease both; }
.pn-story__item + .pn-story__item { border-top: 1px solid #EEF1F5; }
.pn-story__item--live, .pn-story__item:last-child { color: var(--nx-text, #0F1B2D); }
.pn-story__item--live .pn-story__text { font-weight: 600; }
.pn-story__icon { display: grid; place-items: center; width: 20px; height: 22px; color: var(--nx-teal-ink, #0B7B77); }
.pn-story__icon svg { width: 16px; height: 16px; }
.pn-story__dot { width: 8px; height: 8px; border-radius: 50%; background: #B8C4D0; }
.pn-story__item--live .pn-story__dot { background: var(--nx-teal, #1CCFC9); box-shadow: 0 0 0 4px rgb(28 207 201 / .18); animation: pn-pulse 1.4s ease-in-out infinite; }
.pn-story__item--fix .pn-story__icon { color: #B7791F; }
.pn-story__item--fail .pn-story__icon, .pn-story__item--fail { color: #8a1f1f; }
.pn-story__item--end .pn-story__icon { color: var(--nx-teal, #1CCFC9); }
.pn-story__item--end .pn-story__text { font-weight: 700; color: var(--nx-teal-ink, #0B7B77); }
.pn-story__t { color: var(--nexus-text-muted); font-size: 12px; font-variant-numeric: tabular-nums; padding-top: 3px; }
@keyframes pn-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes pn-pulse { 50% { box-shadow: 0 0 0 7px rgb(28 207 201 / .06); } }
.pn-techlog { margin-top: 14px; }
.pn-techlog summary { cursor: pointer; font-size: 12.5px; color: var(--nexus-text-muted); }
.pn-techlog .pn-log { margin-top: 8px; max-height: 260px; }
@media (max-width: 760px) { .pn-story__item { grid-template-columns: 20px 1fr; } .pn-story__t { display: none; } }
/* A corsa finita la pagina non si ricarica da sola: il pulsante prende il posto dell'orologio. */
.pn-run__next { margin-left: auto; white-space: nowrap; }
.pn-spinner--fail { animation: none; border-color: #D64545; background: #D64545; }
/* Interrompi e Ferma (docs/online.md par. 18): ogni corsa e ogni attesa lunga si possono fermare. */
.pn-run__stop { white-space: nowrap; }
.pn-run__stopicon { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: currentColor; margin-right: 7px; vertical-align: 0; }
.pn-ferma { margin-left: 8px; }
.pn-spinner--stop { animation: none; border-color: #B7791F; background: #B7791F; }
.pn-story__item--stop .pn-story__icon, .pn-story__item--stop .pn-story__text { color: #8a5a12; font-weight: 600; }
/* La ricerca nell'elenco e il modulo per rinominare. */
/* La ricerca come i campi del portale: fondo del campo, lente a sinistra, anello teal al fuoco. */
.pn-search { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
.pn-search__field { position: relative; flex: 0 1 440px; }
/* I filtri della lista (D314): accanto alla ricerca, vanno a capo se lo spazio manca. */
.pn-filters { flex-wrap: wrap; gap: 10px; }
.pn-filters .pn-search__field { flex: 1 1 280px; }
.pn-filters select { width: auto; flex: 0 0 auto; height: 38px; padding: 0 10px; }
.pn-chip--cat { margin-left: 8px; background: var(--nexus-teal-100, #E6F8F7); color: var(--nx-teal-ink, #0B7B77); vertical-align: 1px; }
.pn-search__icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--nexus-text-muted); pointer-events: none; }
.pn-search__field input[type=search] { padding-left: 34px; height: 38px; }
.pn-search__field input[type=search]::-webkit-search-cancel-button { cursor: pointer; }
.pn-rename { display: inline-block; position: relative; }
.pn-rename > summary { list-style: none; cursor: pointer; }
.pn-rename > summary::-webkit-details-marker { display: none; }
.pn-rename[open] > summary { background: var(--nexus-teal-100, #E6F8F7); }
.pn-rename__form { position: absolute; z-index: 5; top: calc(100% + 6px); right: 0; width: min(420px, 90vw); background: var(--nx-surface, #fff); border-radius: var(--nx-radius-card); box-shadow: var(--nx-shadow-float, 0 12px 30px rgb(10 21 38 / .2)); padding: 14px 16px; }
.pn-rename__form label { margin-top: 8px; }
.pn-rename__form .pn-actions { margin-top: 12px; }
/* La scheda: modifica a parole e condivisione (docs/online.md par. 7.2 e 7.4). */
.pn-tools { margin-top: 18px; align-items: start; }
.pn-tools .pn-card { margin-top: 0; }
.pn-share { display: grid; grid-template-columns: 140px 1fr auto; gap: 10px; align-items: end; }
@media (max-width: 760px) { .pn-share { grid-template-columns: 1fr; } }
.pn-share-new { margin-top: 16px; border-left: 4px solid var(--nx-teal, #1CCFC9); }
.pn-share-new__row { display: flex; gap: 10px; margin-top: 10px; }
.pn-share-new__row input { font-family: var(--nexus-font-mono); font-size: 13px; }
/* Il questionario del cliente (D313 di Nexus, docs/online.md par. 10): la
   pagina che apre il cliente e la scheda delle risposte nel pannello. */
.pn-q { max-width: 820px; }
.pn-q__notice { font-size: 13px; color: var(--nexus-text-muted); background: var(--nx-field, #F1F5F9); border-radius: var(--nx-radius-sm, 8px); padding: 10px 12px; line-height: 1.5; }
.pn-q__section { border: 0; margin: 22px 0 0; padding: 0; min-width: 0; }
.pn-q__section legend { font-size: 18px; font-weight: 600; color: var(--nx-text, #0F1B2D); padding: 0; margin-bottom: 8px; }
.pn-q__item { margin-top: 14px; padding-left: 10px; border-left: 3px solid transparent; }
.pn-q__item[hidden] { display: none !important; }
.pn-q__item--missing { border-left-color: var(--nexus-error-strong, #DC2626); }
.pn-q__label { font-size: 14px; font-weight: 600; color: var(--nx-text, #0F1B2D); margin-bottom: 6px; }
.pn-q__req { font-weight: 400; font-size: 12px; color: var(--nexus-text-muted); }
.pn-q__choices { display: flex; flex-wrap: wrap; gap: 8px; }
label.pn-q__choice { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 12px; border-radius: 999px; background: var(--nx-field, #F1F5F9); font-size: 14px; font-weight: 400; color: var(--nx-text, #0F1B2D); cursor: pointer; }
label.pn-q__choice:has(input:checked) { background: var(--nexus-teal-100, #E6F8F7); box-shadow: inset 0 0 0 1px var(--nx-teal-ink, #0B7B77); }
.pn-q__choice input { margin: 0; accent-color: var(--nx-teal-ink, #0B7B77); }
.pn-q__number { max-width: 200px; }
.pn-q__h3 { font-size: 14px; margin: 14px 0 6px; }
.pn-q__idea { margin-top: 10px; font-size: 13px; line-height: 1.55; }
.pn-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
/* La stima del risparmio nella scheda (D313): i numeri grandi, le ipotesi sotto. */
.pn-estimate__numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 4px 0 10px; }
.pn-estimate__numbers > div { border: 1px solid var(--nx-border, #DDE3EA); border-radius: var(--nx-radius-sm, 8px); padding: 10px 12px; display: grid; gap: 2px; }
.pn-estimate__numbers span, .pn-estimate__numbers small { font-size: 12px; color: var(--nexus-text-muted); }
.pn-estimate__numbers b { font-size: 24px; line-height: 1.2; color: var(--nx-text, #0F1B2D); }
.pn-estimate__numbers .pn-estimate__main { border-color: var(--nx-teal, #1CCFC9); background: var(--nexus-teal-100, #E6F8F7); }
.pn-estimate__edit { margin-top: 10px; }
.pn-estimate__edit > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--nx-teal-ink, #0B7B77); }
.pn-estimate__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; align-items: end; margin-top: 10px; }
.pn-estimate__form .pn-actions { margin-top: 0; }

/* Completa le sezioni (D312 di Nexus, docs/online.md par. 8): le voci del
   menu del portale raggruppate come il menu, una casella per voce. */
.pn-sections__groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px 22px; margin-top: 12px; }
.pn-sections__group { border: 0; margin: 0; padding: 0; min-width: 0; }
.pn-sections__group legend { font-weight: 600; font-size: 13px; color: var(--nx-text, #0F1B2D); padding: 0; margin-bottom: 6px; }
label.pn-sections__item { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: baseline; margin: 0; padding: 4px 0; font-size: 14px; font-weight: 400; color: var(--nx-text, #0F1B2D); cursor: pointer; }
.pn-sections__item input { margin: 0; align-self: center; accent-color: var(--nx-teal-ink, #0B7B77); }
.pn-sections__state { grid-column: 2; font-size: 12px; color: var(--nexus-text-muted); }
.pn-sections__state--empty { color: #8a5a00; }
label.pn-sections__item--off { cursor: default; color: var(--nexus-text-muted); }
.pn-questions { margin-top: 4px; border-left: 4px solid var(--nx-teal, #1CCFC9); }
.pn-questions label { margin-top: 12px; font-size: 14px; color: var(--nx-text, #0F1B2D); }

/* I modelli di questionario e la bozza (D315 di Nexus, docs/online.md par.
   11): la scelta dei modelli, la composizione per il cliente, l'editor del
   JSON e la nota del commerciale sulla pagina del cliente. */
.pn-qnew { display: grid; grid-template-columns: 1fr 160px 140px; gap: 10px; align-items: end; }
.pn-dup { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; align-items: end; }
@media (max-width: 760px) { .pn-qnew, .pn-dup { grid-template-columns: 1fr; } }
.pn-models { border: 0; padding: 0; margin: 16px 0 0; min-width: 0; }
.pn-models legend { font-size: 14px; font-weight: 600; padding: 0; margin-bottom: 4px; }
label.pn-models__item { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 0; padding: 10px 12px; border-radius: var(--nx-radius-sm, 8px); background: var(--nx-field, #F1F5F9); font-weight: 400; cursor: pointer; }
label.pn-models__item:has(input:checked) { background: var(--nexus-teal-100, #E6F8F7); box-shadow: inset 0 0 0 1px var(--nx-teal-ink, #0B7B77); }
.pn-models__item input { margin-top: 3px; accent-color: var(--nx-teal-ink, #0B7B77); }
.pn-models__item b { margin-right: 6px; }
.pn-models__item small { display: block; margin-top: 3px; font-size: 12px; color: var(--nexus-text-muted); line-height: 1.45; }
.pn-compose .pn-card { margin-top: 16px; }
.pn-compose textarea[name="Nota"] { min-height: 80px; }
.pn-compose__list { list-style: none; margin: 0; padding: 0; }
label.pn-compose__q { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0; font-size: 14px; font-weight: 400; cursor: pointer; }
.pn-compose__q input { margin-top: 3px; accent-color: var(--nx-teal-ink, #0B7B77); }
label.pn-compose__q:has(input:not(:checked)) span { color: var(--nexus-text-muted); text-decoration: line-through; }
.pn-compose__extra { display: grid; grid-template-columns: 2fr 150px 1.4fr auto; gap: 10px; align-items: end; margin-top: 12px; }
.pn-compose__extra textarea { min-height: 42px; }
.pn-compose__flags { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.pn-compose__flags label { display: flex; gap: 6px; align-items: center; margin: 0; font-weight: 400; }
@media (max-width: 860px) { .pn-compose__extra { grid-template-columns: 1fr; } }
.pn-q__note { font-size: 15px; line-height: 1.55; border-left: 4px solid var(--nx-teal, #1CCFC9); padding: 6px 12px; margin: 12px 0; }
.pn-json { font-family: var(--nexus-font-mono); font-size: 12.5px; line-height: 1.45; min-height: 420px; tab-size: 2; }
.pn-errors { margin: 6px 0 0; padding-left: 20px; font-size: 13px; }
/* Il motore (D317): stato di Claude Code e finestre dell'abbonamento. Il
   percorso del programma non ha spazi: sul telefono va a capo dove capita
   invece di uscire dal riquadro. */
.pn-motore { overflow-wrap: anywhere; }
.pn-motore__stato { font-size: 14px; line-height: 1.5; }
.pn-motore__finestre { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; margin-top: 10px; }
@media (max-width: 860px) { .pn-motore__finestre { grid-template-columns: 1fr; } }
.pn-motore__titolo { font-size: 13px; }
.pn-motore .pn-bar { margin: 6px 0 4px; }
.pn-bar__fill--alta { background: #E0A100; }
.pn-scelte { display: grid; gap: 8px; }
.pn-scelte .pn-check { align-items: flex-start; font-weight: 400; line-height: 1.45; }
.pn-scelte .pn-check input { margin-top: 4px; }
/* I materiali (D317): anteprime delle slide e della prima pagina. */
.pn-crumb { font-size: 13px; margin-bottom: 4px; }
.pn-crumb a { color: var(--nexus-text-secondary); text-decoration: none; }
.pn-crumb a::before { content: '\2190  '; }
/* I materiali per cliente (D319): scelte multiple a pillole, gruppi dell'elenco. */
.pn-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--nexus-text-secondary); margin-bottom: 6px; }
.pn-pillole { display: flex; flex-wrap: wrap; gap: 8px; }
.pn-pillole label.pn-q__choice { font-size: 13px; padding: 5px 11px; }
.pn-gruppo { margin: 22px 0 6px; font-size: 15px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pn-gruppo .pn-hint { font-weight: 400; }
.pn-profilo { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.pn-profilo .pn-chip { font-weight: 500; }
.pn-inline-details { display: inline-block; vertical-align: top; }
.pn-inline-details[open] { display: block; margin-top: 6px; min-width: min(560px, 80vw); }
.pn-inline-details > summary { list-style: none; cursor: pointer; }
.pn-inline-details > summary::-webkit-details-marker { display: none; }
.pn-thumbs { display: grid; gap: 10px; margin-top: 6px; }
.pn-thumbs--slide { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.pn-thumbs--pagina { grid-template-columns: repeat(auto-fill, minmax(260px, 320px)); }
.pn-thumbs img { width: 100%; display: block; border: 1px solid var(--nexus-border, #D6E0EA); border-radius: 6px; background: #fff; }
.pn-scarica { white-space: nowrap; }
.pn-scarica .nx-cmd { margin: 0 4px 4px 0; }
.pn-textarea--breve { min-height: 64px; }

/* Il pannello per chi vende (utente 2026-10-12: "piu' fruibile da un
   commerciale e meno caotica", docs/online.md par. 16). La testata della
   pagina con l'azione principale accanto al titolo; nella lista dei
   prototipi il titolo e' cio' che si legge, il nome (indirizzo della demo)
   sta sotto, piccolo. */
.pn-pagehead { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 4px; }
.nx-content .pn-pagehead h1 { margin: 0; }
a.pn-proto { display: inline-block; text-decoration: none; }
a.pn-proto strong { font-weight: 600; }
a.pn-proto:hover strong { text-decoration: underline; }
.pn-proto__nome { display: block; margin-top: 2px; font-family: var(--nexus-font-mono); font-size: 11.5px; font-weight: 400; color: var(--nexus-text-muted); }
.pn-protos__apri { width: 1%; white-space: nowrap; text-align: right; }
.pn-nowrap { white-space: nowrap; }
.pn-gruppo__nota { margin: -2px 0 8px; }
/* La scheda del prototipo nell'ordine di chi vende: i comandi davanti al
   cliente in testa, il resto in fondo. I riquadri che si richiudono
   (.pn-fold) hanno la freccia del portale e, chiusi, dicono cosa c'e' dentro. */
.pn-actions--testa { margin-top: 0; align-content: start; }
.pn-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; }
.pn-fold > summary::-webkit-details-marker { display: none; }
.pn-fold > summary::before { content: ''; flex: none; width: 7px; height: 7px; margin: 0 4px 0 2px; border-right: 2px solid var(--nexus-text-muted); border-bottom: 2px solid var(--nexus-text-muted); transform: rotate(-45deg); transition: transform .15s ease; align-self: center; }
.pn-fold[open] > summary::before { transform: rotate(45deg); }
.pn-fold > summary h2 { margin: 0; }
.pn-fold[open] > summary { margin-bottom: 8px; }
.pn-rename--sinistra .pn-rename__form { left: 0; right: auto; }
.pn-textarea--media { min-height: 96px; }
/* Materiali: le azioni sulla serie di base in una riga, sotto l'introduzione. */
.pn-serie { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 6px; padding: 10px 12px; border-radius: var(--nx-radius-sm, 8px); background: var(--nx-field, #F1F5F9); }
.pn-serie__titolo { font-size: 12.5px; font-weight: 600; color: var(--nexus-text-secondary); margin-right: 2px; }
.pn-serie .pn-hint { margin: 0; flex: 1 1 260px; }
/* Usa per un cliente: ora a tutta larghezza, i quattro campi su una riga. */
.pn-copy { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 14px; align-items: end; }
.pn-copy .pn-actions { grid-column: 1 / -1; margin-top: 4px; }
/* Le sezioni della lista si chiudono (D322.1): il titolo e' il summary, la
   freccia e' quella di .pn-fold; la scelta sta nel cookie pn-sezioni. */
.pn-sezione { margin-top: 22px; }
.pn-sezione > summary { padding: 2px 0; }
.pn-sezione > summary:hover .pn-gruppo { color: var(--nx-teal-ink, #0b7a75); }

/* La ricerca sul cliente (D323): il profilo con le sue fonti. L'avviso del
   modello e' un avviso, non un successo; i rimandi [n] sono piccoli e non
   rompono la riga; "togli" e' un comando discreto accanto alla voce. */
.pn-flash--avviso { background: var(--nexus-warning-subtle); border-left-color: var(--nexus-warning, #b7791f); color: var(--nexus-warning-text); }
.pn-list { margin: 6px 0 12px; padding-left: 20px; }
.pn-list li { margin: 4px 0; line-height: 1.5; }
.pn-fonti li::marker { color: var(--nexus-text-muted); }
.pn-fonte { font-size: var(--nexus-fs-caption, 12px); text-decoration: none; white-space: nowrap; }
.pn-link { background: none; border: 0; padding: 0 2px; font: inherit; font-size: var(--nexus-fs-caption, 12px); color: var(--nexus-text-muted); text-decoration: underline; cursor: pointer; }
.pn-link:hover { color: var(--nexus-error-text); }

/* Il percorso del cliente nella sua scheda (2026-10-21): il passo da fare
   ha il bordo verde acqua, quelli fatti la spunta. */
.pn-percorso { margin-top: 4px; }
.pn-step--next { background: #fff; box-shadow: inset 0 0 0 2px var(--nx-teal, #1CCFC9); color: var(--nx-text, #0F1B2D); font-weight: 600; }

/* Lo schema del piano (D369): i riquadri del kit con il titolo su tre righe
   (nel Progettista c'e' anche il codice, qui per il cliente solo il titolo). */
.pn-schema { margin: 18px 0 20px; }
.pn-schema .nx-n8nd { max-height: 640px; }
.pn-schema .nx-n8nd__name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 1.25; }
.pn-schema__n { display: inline-block; min-width: 18px; margin-right: 2px; color: var(--nexus-text-muted); font-variant-numeric: tabular-nums; }

/* Lo schema a schermo intero (D369.1): la barra della scheda tiene la frase a
   sinistra e il pulsante a destra; nella finestra il titolo dei riquadri resta
   su tre righe come nella scheda. */
.pn-schema .nx-n8nd__toolbar { justify-content: space-between; }
.nx-n8nd__overlay .nx-n8nd__name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 1.25; }
.nx-n8nd__overlay .pn-schema__n { display: inline-block; min-width: 18px; margin-right: 2px; color: var(--nexus-text-muted); }
.nx-n8nd__overlay-body .nx-n8nd__zoomer { margin: 0 auto; }

/* La voce raggiunta dallo schema (D369.2): la riga si illumina e torna com'era. */
@keyframes pn-voce-flash { from { background: var(--nexus-accent-subtle, #E6F8F7); } to { background: transparent; } }
tr.pn-voce-flash > td { animation: pn-voce-flash 1.6s ease-out; }
tr.pn-voce-flash:focus { outline: 2px solid var(--nexus-accent, #1CCFC9); outline-offset: -2px; }
.pn-schema .nx-n8nd__node--link:focus-visible { outline: 2px solid var(--nexus-accent, #1CCFC9); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { tr.pn-voce-flash > td { animation: none; background: var(--nexus-accent-subtle, #E6F8F7); } }