/* ============================================================
   Fenice · s-vendite.css
   Lead (elenco + scheda) e Pipeline con la grafica della demo
   (demo/sito/fenice.css, sezioni 1, 3 e 4). Disegnati da viewLeads, leadScheda,
   viewPipeline e dalle funzioni ld* / pl* in app.js.
   Solo token --fe-* e --st-* (stellare.css). Si carica dopo stellare.css.
   Testi italiani, mai la lineetta lunga.
   ============================================================ */

/* ===== 0. Comuni ===== */
.ld-lista, #ld-det, .pl-pagina { --ld-carta-om: 0 1px 2px rgba(22,17,15,.06), 0 6px 18px -12px rgba(22,17,15,.28);
  --ld-carta-su: 0 2px 6px rgba(22,17,15,.08), 0 18px 36px -18px rgba(22,17,15,.35);
  --ld-col-bg: color-mix(in srgb, var(--fe-group) 82%, var(--fe-paper)); }
[data-theme="dark"] .ld-lista, [data-theme="dark"] #ld-det, [data-theme="dark"] .pl-pagina {
  --ld-carta-om: 0 0 0 .5px rgba(255,236,228,.08), 0 8px 20px -12px rgba(0,0,0,.7);
  --ld-carta-su: 0 0 0 .5px rgba(255,236,228,.12), 0 20px 40px -18px rgba(0,0,0,.85);
  --ld-col-bg: color-mix(in srgb, var(--fe-group) 70%, var(--fe-paper)); }
.ld-mono-t { font-family: var(--fe-mono); font-weight: 500; font-size: .86em; letter-spacing: .02em; }

/* Anello del punteggio: nella scheda si riempie entrando */
@property --ld-p { syntax: '<number>'; inherits: false; initial-value: 0; }
.st-anello.ld-anima { background: conic-gradient(var(--c) calc(var(--ld-p) * 1%), var(--fe-group) 0); animation: ld-riempi 1100ms var(--st-uscita) 120ms both; }
@keyframes ld-riempi { from { --ld-p: 0; } to { --ld-p: var(--p); } }
.ld-fermo .st-anello.ld-anima { animation: none; --ld-p: var(--p); }
.ld-mono { flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--fe-group); color: var(--fe-secondary);
  font-size: 14px; font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--fe-separator); }
.ld-mono.xl { width: 76px; height: 76px; font-size: 28px; letter-spacing: -.03em; }
.ld-mono.sm { width: 28px; height: 28px; font-size: 12px; }
.ld-st { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ld-st i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }

/* Barre piccole (lead arrivati, punteggi): crescono entrando */
.ld-barre { display: flex; align-items: flex-end; gap: 3px; height: var(--h, 40px); margin-top: 6px; }
.ld-barre i { flex: 1; min-width: 0; height: max(3px, calc(var(--v) * 100%)); border-radius: 3px 3px 1.5px 1.5px; background: var(--c);
  transform-origin: bottom; animation: ld-cresce 620ms var(--st-molla) both; animation-delay: calc(var(--i, 0) * 28ms + 80ms); }
@keyframes ld-cresce { from { transform: scaleY(0); } to { transform: none; } }
.ld-fermo .ld-barre i { animation: none; }
.ld-asse { display: flex; gap: 3px; margin-top: 6px; font: 500 10px/1 var(--fe-mono); color: var(--fe-tertiary); }
.ld-asse span { flex: 1; min-width: 0; text-align: center; }

/* ===== 1. Elenco dei lead ===== */
.split .lista.ld-lista { overflow-y: auto; overscroll-behavior: contain; background: var(--fe-paper); scrollbar-width: thin; scrollbar-color: var(--fe-separator) transparent; padding: 0 12px 28px; }
.ld-lt { display: flex; flex-direction: column; gap: 14px; padding: 24px 8px 18px; }
.ld-lt__riga { display: flex; align-items: center; gap: 10px; }
.ld-lt__h { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -.045em; line-height: 1.08; }
.ld-lt__conta { flex: 1; min-width: 0; font-size: 13px; color: var(--fe-secondary); white-space: nowrap; padding-top: 6px; }
.ld-lt .lista__az { display: flex; gap: 2px; }
.ld-lt .lista__az .icon-btn { width: 32px; height: 32px; border-radius: 10px; color: var(--fe-secondary); }
.ld-lt .lista__az .icon-btn.on { color: var(--fe-primary-text); background: var(--fe-primary-soft); }
.ld-mini2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ld-mini { min-width: 0; margin: 0; padding: 10px 12px 8px; border-radius: 14px; background: var(--fe-surface); box-shadow: 0 0 0 .5px var(--fe-separator), var(--st-sh-flat); }
.ld-mini__t { margin: 0; font-size: 12px; color: var(--fe-secondary); }
.ld-mini__v { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ld-mini__v span { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--fe-secondary); }
.ld-smart { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ld-smart__t { --c: var(--fe-primary); position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; gap: 8px 6px;
  padding: 10px 12px 10px 10px; border: 0; border-radius: 14px; background: var(--fe-surface); text-align: left; color: var(--fe-ink); font: inherit; cursor: pointer;
  box-shadow: 0 0 0 .5px var(--fe-separator), var(--st-sh-flat);
  transition: background-color var(--st-t-medio) var(--st-uscita), transform var(--st-t-breve) var(--st-molla), box-shadow var(--st-t-medio); }
.ld-smart__t:hover { transform: translateY(-1px); box-shadow: 0 0 0 .5px var(--fe-separator), var(--ld-carta-om); }
.ld-smart__t:active { transform: scale(.97); }
.ld-smart__t:focus-visible { outline: 2px solid var(--fe-primary-text); outline-offset: 2px; }
.ld-smart__ico { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff;
  box-shadow: 0 3px 8px -3px color-mix(in srgb, var(--c) 70%, transparent); }
.ld-smart__ico svg { width: 15px; height: 15px; stroke-width: 2.3; }
.ld-smart__n { justify-self: end; font-size: 22px; font-weight: 600; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.ld-smart__et { grid-column: 1 / -1; font-size: 13px; font-weight: 500; color: var(--fe-graphite); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-smart__t.is-zero .ld-smart__n { color: var(--fe-tertiary); }
.ld-smart__t.is-attivo { background: var(--c); color: #fff; box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--c) 80%, transparent); }
.ld-smart__t.is-attivo .ld-smart__et { color: rgba(255,255,255,.92); }
.ld-smart__t.is-attivo .ld-smart__ico { background: #fff; color: var(--c); box-shadow: none; }
.ld-smart__t.is-attivo.is-chiaro { color: #2B1C00; }
.ld-smart__t.is-attivo.is-chiaro .ld-smart__et { color: rgba(43,28,0,.85); }
.ld-smart__t.is-attivo.is-zero .ld-smart__n { color: inherit; opacity: .75; }
.ld-cerca.pj-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--fe-surface); width: auto;
  box-shadow: inset 0 0 0 .5px var(--fe-separator); color: var(--fe-secondary); transition: box-shadow var(--st-t-breve); }
.ld-cerca.pj-search:focus-within { box-shadow: inset 0 0 0 1.5px var(--fe-primary), 0 0 0 4px color-mix(in srgb, var(--fe-primary) 16%, transparent); }
.ld-cerca svg { width: 16px; height: 16px; flex: none; }
.ld-cerca input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--fe-ink); outline: none; }
.ld-lista .ld-filtri { display: flex; gap: 8px; }
.ld-lista .ld-filtri[hidden] { display: none; }
.ld-lista .ld-filtri select { flex: 1; min-width: 0; height: 34px; border: 0; border-radius: 999px; padding: 0 12px; font: inherit; font-size: 13px; color: var(--fe-ink);
  background: var(--fe-surface); box-shadow: inset 0 0 0 .5px var(--fe-separator); }

.ld-gr__t { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 12px 6px; font-size: 13px; font-weight: 600; letter-spacing: -.005em; color: var(--fe-graphite); }
.ld-gr__t span { font-weight: 500; color: var(--fe-secondary); }
.ld-righe { display: flex; flex-direction: column; }
.ld-r { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 11px 12px; border-radius: 14px; color: inherit; text-decoration: none;
  transition: background-color var(--st-t-breve) var(--st-uscita); }
.ld-r::after { content: ""; position: absolute; left: 60px; right: 12px; bottom: 0; height: var(--st-linea); background: var(--fe-separator); pointer-events: none; }
.ld-r:last-child::after, .ld-r.is-attiva::after, .ld-r:has(+ .ld-r.is-attiva)::after { opacity: 0; }
.ld-r:hover { background: var(--fe-hover); }
.ld-r:active { background: var(--fe-sel); }
.ld-r.is-attiva { background: color-mix(in srgb, var(--fe-primary) 11%, transparent); }
.ld-r:focus-visible { outline: 2px solid var(--fe-primary-text); outline-offset: -2px; }
.ld-r__icona { flex: none; display: flex; align-self: center; }
.ld-r .ap-check { align-self: center; margin: 0; }
.ld-r__testi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ld-r__l1 { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.ld-r__tit { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; letter-spacing: -.01em; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-r__quando { flex: none; font-style: normal; font-size: 12.5px; color: var(--fe-secondary); white-space: nowrap; }
.ld-r__quando.is-urg { color: var(--fe-error-text); font-weight: 500; }
.ld-r__l2 { font-size: 13px; color: var(--fe-secondary); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-r__l3 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 1px; font-size: 13px; color: var(--fe-graphite); line-height: 1.35; }
.ld-r__l3 .fa-wrap { display: inline-flex; flex-direction: row; flex-wrap: nowrap; gap: 4px; min-width: 0; }
.ld-r .fpill, .ld3-chips .fpill { display: inline-flex; align-items: center; gap: 5px; height: 20px; margin: 0; padding: 0 8px; border: 0; border-radius: 999px;
  font: 500 10px/1 var(--fe-mono); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; color: var(--fe-secondary);
  background: var(--fe-surface); box-shadow: inset 0 0 0 .5px var(--fe-separator); }
.ld-r .fpill .fd, .ld3-chips .fpill .fd { width: 6px; height: 6px; border-radius: 50%; background: var(--fe-tertiary); flex: none; }
.ld-r .fpill.on .fd, .ld3-chips .fpill.on .fd { background: var(--fe-success); }
.ld-r .fpill.on, .ld3-chips .fpill.on { color: var(--fe-success-text); }
.ld-r .fpill small, .ld3-chips .fpill small { font-size: inherit; }
.ld-r.is-nuova { animation: ld-nuova 1.8s var(--st-uscita) both; }
@keyframes ld-nuova { 0% { background: color-mix(in srgb, var(--fe-primary) 26%, transparent); transform: translateY(-8px); } 30% { transform: none; } 100% { background: transparent; } }

/* Pannello senza lead scelto */
.ld-pano { display: flex; flex-direction: column; gap: 18px; max-width: 720px; margin: 0 auto; padding: 56px 40px 40px; }
.ld-pano__k { display: flex; align-items: center; gap: 8px; margin: 0; font: 500 11px/1.3 var(--fe-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--fe-primary-text); }
.ld-pano__k svg { width: 16px; height: 16px; }
.ld-pano__t { margin: -8px 0 0; font-size: clamp(32px, 4vw, 44px); font-weight: 600; letter-spacing: -.045em; line-height: 1.05; text-wrap: balance; }
.ld-pano__s { margin: 0; font-size: 17px; line-height: 1.5; color: var(--fe-graphite); text-wrap: pretty; max-width: 56ch; }
.ld-pano__s b { font-weight: 600; color: var(--fe-ink); }
.ld-pano__s b.is-urg { color: var(--fe-error-text); }
.ld-pano__g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ld-pano__card { min-width: 0; padding: 18px 18px 14px; border-radius: var(--fe-r-card); background: var(--fe-surface); box-shadow: var(--st-sh-card); }
.ld-pano__ct { margin: 0 0 12px; font-size: 13px; color: var(--fe-secondary); }
.ld-pano__ct b { color: var(--fe-ink); font-weight: 600; }
.ld-pano__card .ld-barre { gap: 5px; }
.ld-pano__card .ld-asse { gap: 5px; }
.ld-pano__numeri { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 14px; color: var(--fe-secondary); }
.ld-pano__numeri b { font-size: 22px; font-weight: 600; letter-spacing: -.03em; color: var(--fe-ink); margin-right: 6px; font-variant-numeric: tabular-nums; }
.ld-pano__hint { display: flex; align-items: center; gap: 8px; margin: 0; padding-top: 4px; font-size: 13px; color: var(--fe-secondary); }
.ld-pano__hint::before { content: ""; width: 18px; height: 1.5px; border-radius: 2px; background: var(--fe-tertiary); }

/* ===== 2. Scheda del lead ===== */
.ld-barra { gap: 10px; }
.ld-barra__titolo { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(6px); transition: opacity var(--st-t-medio) var(--st-uscita), transform var(--st-t-medio) var(--st-uscita); }
.ld-barra.is-titolo .ld-barra__titolo { opacity: 1; transform: none; }
.ld-barra .det__azioni { gap: 6px; }
.ld-barra .st-btn { flex: none; }
.ld-barra .st-btn svg { width: 16px; height: 16px; }
.ld-barra .st-btn--tondo { font-size: 18px; line-height: 1; }

.det__in.ld3 { max-width: 1120px; margin: 0 auto; padding: 30px 40px 96px; transition: max-width var(--st-t-medio) var(--st-uscita); }
.split.senza-lista .det__in.ld3 { max-width: 1240px; }
.ld3-testa { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.ld3-testa__testi { flex: 1; min-width: 0; }
.ld3-kicker { margin: 0 0 4px; font: 500 11px/1.3 var(--fe-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--fe-secondary); }
.ld3-titolo { margin: 0; font-size: clamp(26px, 3.2vw, 34px); font-weight: 600; letter-spacing: -.04em; line-height: 1.08; overflow-wrap: anywhere; text-wrap: balance; }
.ld3-sotto { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 6px 0 0; font-size: 15px; color: var(--fe-secondary); }
.ld3-sotto a { color: inherit; text-decoration: none; border-bottom: .5px solid var(--fe-separator); }
.ld3-sotto a:hover { color: var(--fe-primary-text); }
.ld3-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ld3-chips .fa-wrap { display: inline-flex; flex-direction: row; gap: 6px; }
.ld3-chips .fpill { height: 24px; padding: 0 10px; }

.ld-fatti.st-fatti { grid-template-columns: repeat(var(--n, 4), minmax(min-content, 1fr)); margin: 6px 0 4px; }
.ld-fatti .st-fatti__cella { padding: 14px 16px; }
.ld-fatti .st-fatti__valore { display: flex; align-items: center; gap: 7px; font-size: 16.5px; white-space: nowrap; }
.ld-fatti .st-fatti__valore .st-punto { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }
.ld-fatti__sotto { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--fe-secondary); }
.ld-fatti__passo { cursor: pointer; border-radius: 12px; transition: background-color var(--st-t-breve); }
.ld-fatti__passo:hover { background: var(--fe-hover); }
.ld-fatti__passo .st-fatti__valore::after { content: " ›"; color: var(--fe-tertiary); font-weight: 400; }
.ld-fatti__passo:focus-visible, .ld-fatti button.st-fatti__cella:focus-visible { outline: 2px solid var(--fe-primary-text); outline-offset: -2px; }
.ld-fatti__passo input { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
@container (max-width: 639px) { .ld-fatti.st-fatti { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-fatti .st-fatti__cella:nth-child(odd)::before { display: none; }
  .ld-fatti .st-fatti__cella:nth-child(n+3) { border-top: .5px solid var(--fe-separator); }
  .ld-fatti .st-fatti__cella:last-child:nth-child(odd) { grid-column: 1 / -1; } }

.ld3-corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 32px; align-items: start; }
.ld3-main { min-width: 0; }
.ld3-lato { min-width: 0; display: flex; flex-direction: column; gap: 22px; margin-top: 44px; }
@container (min-width: 940px) {
  .ld3-corpo { grid-template-columns: minmax(0, 1fr) 320px; }
  .ld3-lato { position: sticky; top: 70px; margin-top: 36px; }
}
.ld-sez.st-sezione { margin-top: 44px; }
.ld3-main > .ld-sez:first-child { margin-top: 36px; }
.ld-frase { margin: 0; font-size: clamp(19px, 1.6vw, 21px); line-height: 1.42; letter-spacing: -.012em; text-wrap: pretty; }

/* Da dove arriva */
.ld-dadove { display: flex; flex-direction: column; gap: 16px; padding: 18px 20px; border-radius: var(--fe-r-card); background: var(--fe-surface); box-shadow: var(--st-sh-card); }
.ld-dadove__q { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 16px; line-height: 1.4; }
.ld-dadove__q svg { flex: none; width: 18px; height: 18px; color: var(--fe-secondary); margin-top: 2px; }
.ld-dadove__q q { font-weight: 600; quotes: "«" "»"; }
.ld-dadove__f { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ld-dadove__f li { font-size: 13px; line-height: 1.3; padding: 6px 10px; border-radius: 999px; background: var(--fe-group); color: var(--fe-graphite); overflow-wrap: anywhere; }
.ld-dadove__f b { font-weight: 500; }
.ld-dadove__f a { color: var(--fe-primary-text); text-decoration: none; }
.ld-dadove .st-fonti { margin: 0; }

/* Cosa non va nel sito: segni nel cerchio, come «Perché» della demo */
.ld-punti { display: flex; flex-direction: column; padding: 4px 0; border-radius: var(--fe-r-group); background: var(--fe-surface); box-shadow: 0 0 0 .5px var(--fe-separator), var(--st-sh-flat); }
.ld-punti__v { position: relative; display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 8px 14px 8px 12px; }
.ld-punti__v + .ld-punti__v::before { content: ""; position: absolute; left: 50px; right: 0; top: 0; height: var(--st-linea); background: var(--fe-separator); }
.ld-punti__n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; line-height: 1;
  background: var(--fe-error-soft); color: var(--fe-error-text); }
.ld-punti__t { flex: 1; min-width: 0; font-size: 15px; line-height: 1.4; }

/* Concorrenti */
.ld-conc { display: flex; flex-wrap: wrap; gap: 8px; }
.ld-conc__c { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 7px; border-radius: 999px; background: var(--fe-surface); font-size: 14px;
  box-shadow: 0 0 0 .5px var(--fe-separator), var(--st-sh-flat); }
.ld-conc__c .st-mono { box-shadow: none; }

/* Dal click al contratto */
.ld-tappe { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.ld-tappe li { position: relative; display: flex; flex-direction: column; gap: 3px; padding-right: 8px; min-width: 0; }
.ld-tappe li::before { content: ""; position: absolute; left: 24px; right: 0; top: 10px; height: 2px; background: var(--fe-separator); }
.ld-tappe li:last-child::before { display: none; }
.ld-tappe li.is-fatta::before { background: var(--fe-success); transform-origin: left; animation: ld-linea 520ms var(--st-uscita) both; animation-delay: calc(var(--i, 0) * 140ms + 120ms); }
@keyframes ld-linea { from { transform: scaleX(0); } to { transform: none; } }
.ld-tappe i { position: relative; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--fe-surface); box-shadow: inset 0 0 0 2px var(--fe-separator); color: #fff; margin-bottom: 5px;
  animation: ld-pop 480ms var(--st-molla) both; animation-delay: calc(var(--i, 0) * 140ms); }
@keyframes ld-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
.ld-tappe i svg { width: 12px; height: 12px; stroke-width: 3; }
.ld-tappe li.is-fatta i { background: var(--fe-success); box-shadow: none; }
.ld-tappe li.is-ora i { background: var(--fe-primary); box-shadow: 0 0 0 5px color-mix(in srgb, var(--fe-primary) 20%, transparent); }
.ld-tappe li.is-ora i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--fe-primary); animation: ld-anello 2s var(--st-uscita) infinite; }
@keyframes ld-anello { 0% { opacity: .7; transform: scale(1); } 55%, 100% { opacity: 0; transform: scale(1.7); } }
.ld-tappe__n { font-size: 13.5px; font-weight: 500; line-height: 1.25; }
.ld-tappe small { font-size: 12px; color: var(--fe-secondary); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-tappe li.is-ora .ld-tappe__n { color: var(--fe-primary-text); }
.ld-tappe__pdf { align-self: flex-start; margin-top: 4px; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--fe-primary-text); background: var(--fe-primary-soft); text-decoration: none; }
.ld-fermo .ld-tappe i, .ld-fermo .ld-tappe li::before { animation: none; }

/* Attività */
.ld-att-comp { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.ld-att-tipi.st-segmenti { height: 36px; }
.ld-att-tipi button svg { width: 15px; height: 15px; }
.ld-att-comp__riga { display: flex; gap: 8px; }
.ld-campo { flex: 1; height: 44px; min-width: 0; padding: 0 16px; border-radius: 999px; border: 0; background: var(--fe-group); color: var(--fe-ink); font: inherit; font-size: 15px;
  box-shadow: inset 0 0 0 .5px var(--fe-separator); transition: box-shadow var(--st-t-breve), background-color var(--st-t-breve); }
.ld-campo::placeholder { color: var(--fe-secondary); }
.ld-campo:focus { outline: none; background: var(--fe-surface); box-shadow: inset 0 0 0 1.5px var(--fe-primary), 0 0 0 4px color-mix(in srgb, var(--fe-primary) 16%, transparent); }
.ld-att-comp__riga .st-btn { height: 44px; }
.ld-att { position: relative; display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ld-att::before { content: ""; position: absolute; left: 17px; top: 20px; bottom: 20px; width: 1.5px; background: var(--fe-separator); }
.ld-att__v { position: relative; display: flex; gap: 14px; padding: 10px 0; border-radius: 14px; }
.ld-att__ico { position: relative; z-index: 1; flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--fe-surface); color: var(--fe-secondary);
  box-shadow: 0 0 0 .5px var(--fe-separator), var(--st-sh-flat); }
.ld-att__ico svg { width: 17px; height: 17px; }
.ld-att__v.is-chiamata .ld-att__ico { color: var(--fe-success-text); } .ld-att__v.is-email .ld-att__ico { color: var(--fe-primary); }
.ld-att__v.is-meeting .ld-att__ico { color: var(--fe-info); } .ld-att__v.is-stato .ld-att__ico { color: var(--fe-warning-text); }
.ld-att__c { flex: 1; min-width: 0; padding-top: 2px; }
.ld-att__t { margin: 0; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-line; }
.ld-att__m { margin: 2px 0 0; font-size: 12.5px; color: var(--fe-secondary); }
.ld-att__del { flex: none; align-self: flex-start; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--fe-tertiary); font-size: 18px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity var(--st-t-breve), background-color var(--st-t-breve), color var(--st-t-breve); }
.ld-att__v:hover .ld-att__del, .ld-att__del:focus-visible { opacity: 1; }
.ld-att__del:hover { background: var(--fe-error-soft); color: var(--fe-error-text); }
@media (hover: none) { .ld-att__del { opacity: .7; } }
.ld-att__vuota { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--fe-group); color: var(--fe-graphite); font-size: 14px; }
.ld-att__vuota svg { width: 18px; height: 18px; color: var(--fe-secondary); flex: none; }
.ld-att:has(.ld-att__vuota)::before { display: none; }

/* Colonna laterale: gruppi come iOS, titolo fuori */
.ld-lato__sez { min-width: 0; }
.ld-lato__t { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 8px 16px; font-size: 13px; font-weight: 600; color: var(--fe-graphite); }
.ld-lato__t span { font-weight: 400; font-size: 12px; color: var(--fe-secondary); margin-right: 16px; text-align: right; }
.ld-gruppo { background: var(--fe-surface); border-radius: var(--fe-r-group); box-shadow: 0 0 0 .5px var(--fe-separator), var(--st-sh-flat); overflow: hidden; }
.ld-kv { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 16px; font-size: 14.5px; color: var(--fe-ink); }
.ld-kv + .ld-kv::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: var(--st-linea); background: var(--fe-separator); }
.ld-kv > span:first-child { flex: none; width: 108px; font-size: 13.5px; color: var(--fe-secondary); }
.ld-kv > *:last-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ld-kv a { color: var(--fe-primary-text); text-decoration: none; }
.ld-kv input, .ld-kv select { border: 0; background: none; font: inherit; font-size: 14.5px; color: var(--fe-ink); text-align: right; padding: 4px 0; outline: none; min-width: 0; width: 100%; }
.ld-kv select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.ld-kv input:focus, .ld-kv select:focus { color: var(--fe-primary-text); }
.ld-kv input::placeholder { color: var(--fe-tertiary); }
.ld-kv .switch { flex: none !important; margin-left: auto; }
.ld-kv .muted { color: var(--fe-secondary); }

/* Scelta dello stato (modale) */
.ld-scelte { display: flex; flex-direction: column; gap: 4px; margin: 0 -8px 8px; }
.ld-scelta { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 12px; border: 0; border-radius: 14px; background: none; text-align: left; color: var(--fe-ink);
  font: inherit; cursor: pointer; transition: background-color var(--st-t-breve); }
.ld-scelta:hover { background: var(--fe-hover); }
.ld-scelta.is-attiva { background: color-mix(in srgb, var(--fe-primary) 10%, transparent); }
.ld-scelta b { flex: 1; font-weight: 500; font-size: 15px; }
.ld-scelta .st-punto { margin-left: 4px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }
.ld-scelta svg { width: 18px; height: 18px; color: var(--fe-primary-text); }

/* Entrata della scheda: le sezioni salgono una dopo l'altra (non quando si ridisegna) */
.ld3 .ld-entra { animation: st-sale var(--st-t-lungo) var(--st-molla) both; animation-delay: calc(min(var(--i, 0), 12) * 50ms); }
.ld-fermo .ld-entra { animation: none; }

/* ===== 3. Pipeline ===== */
.main:has(.pl-pagina) { max-width: none; }
.pl-pagina { padding: 0 0 40px; }
.pl-testa { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.pl-testa .st-t1 { font-size: clamp(34px, 3.6vw, 40px); }
.pl-sotto { margin: 6px 0 0; font-size: 16px; color: var(--fe-secondary); line-height: 1.45; text-wrap: pretty; }
.pl-testa .st-btn svg { width: 17px; height: 17px; }

.pl-pt { display: grid; grid-template-columns: repeat(calc(var(--n, 4) - 1), minmax(0, 1fr)) minmax(0, 1.35fr); background: var(--fe-surface); border-radius: var(--fe-r-card); box-shadow: var(--st-sh-card); overflow: hidden; }
.pl-pt__c { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; min-width: 0; }
.pl-pt__c + .pl-pt__c::before { content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: var(--st-linea); background: var(--fe-separator); }
.pl-pt__c.is-eroe { background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--fe-primary) 12%, var(--fe-surface)), var(--fe-surface) 65%); }
.pl-pt__e { font-size: 13px; color: var(--fe-secondary); font-weight: 500; }
.pl-pt__n { font-size: clamp(28px, 3.2vw, 38px); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-pt__n small { font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: var(--fe-secondary); }
.pl-pt__n.is-eroe { font-size: clamp(34px, 4.4vw, 52px); color: var(--fe-primary-text); }
.pl-pt__s { font-size: 13px; color: var(--fe-secondary); }
.pl-pt__nessuna { margin: 4px 0 0; font-size: 17px; font-weight: 500; line-height: 1.35; color: var(--fe-graphite); text-wrap: pretty; }
.pl-striscia { grid-column: 1 / -1; position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px 22px 18px; }
.pl-striscia::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: var(--st-linea); background: var(--fe-separator); }
.pl-striscia__barra { display: flex; gap: 3px; height: 10px; border-radius: 6px; overflow: hidden; }
.pl-striscia__barra span { background: var(--c); transform-origin: left; animation: ld-linea 700ms var(--st-uscita) both; animation-delay: calc(var(--i, 0) * 90ms + 150ms); }
.pl-striscia__leg { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--fe-secondary); }
.pl-striscia__leg span { display: inline-flex; align-items: center; gap: 6px; }
.pl-striscia__leg b { color: var(--fe-ink); font-weight: 600; }
.pl-fermo .pl-striscia__barra span { animation: none; }

.pl-aiuto { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 26px 0 12px; font-size: 13px; color: var(--fe-secondary); }
.pl-aiuto > svg { width: 16px; height: 16px; }
.pl-tasti { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; }
.pl-tasti kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 6px; font: 500 11px/1 var(--fe-mono); background: var(--fe-surface);
  box-shadow: 0 0 0 .5px var(--fe-separator), var(--st-sh-flat); color: var(--fe-graphite); }
.pl-tasti span { margin-left: 5px; }

.pl-kanban { --fasi: 4; display: grid; grid-template-columns: repeat(var(--fasi), minmax(236px, 1fr)); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 8px;
  scrollbar-width: thin; scrollbar-color: var(--fe-separator) transparent; }
.pl-col { --c: var(--fe-tertiary); display: flex; flex-direction: column; min-width: 0; padding: 10px; border-radius: 20px; background: var(--ld-col-bg);
  box-shadow: inset 0 0 0 .5px var(--fe-separator); transition: background-color var(--st-t-medio) var(--st-uscita), box-shadow var(--st-t-medio) var(--st-uscita); }
.pl-col.is-chiusa { background: color-mix(in srgb, var(--ld-col-bg) 60%, var(--fe-paper)); }
.pl-col.is-sopra { background: color-mix(in srgb, var(--c) 14%, var(--ld-col-bg)); box-shadow: inset 0 0 0 2px var(--c); }
.pl-col__t { display: flex; align-items: center; gap: 6px; padding: 4px 6px 10px; }
.pl-col__nome { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-col__nome .st-punto { width: 8px; height: 8px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }
.pl-col__n { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; display: inline-grid; place-items: center; background: var(--fe-surface); font-size: 12.5px; font-weight: 600;
  box-shadow: 0 0 0 .5px var(--fe-separator); font-variant-numeric: tabular-nums; }
.pl-col__tot { font-size: 12.5px; font-weight: 500; color: var(--fe-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-col__carte { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pl-col__vuota { display: grid; place-items: center; min-height: 40px; margin: 0; border-radius: 12px; font-size: 13px; color: var(--fe-secondary);
  transition: min-height var(--st-t-medio) var(--st-molla), background-color var(--st-t-medio); }
.pl-col__qui { display: none; }
body.pl-trascina .pl-col { min-height: 240px; }
body.pl-trascina .pl-col.is-vuota { min-height: 0; }
body.pl-trascina .pl-col__vuota { min-height: 140px; border: 1.5px dashed color-mix(in srgb, var(--fe-ink) 16%, transparent); }
body.pl-trascina .pl-col__nessuna { display: none; }
body.pl-trascina .pl-col__qui { display: inline; }
body.pl-trascina .pl-col.is-vuota.is-sopra .pl-col__vuota { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); }

.pl-carta { position: relative; display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 12px 12px 11px; border-radius: 16px; text-align: left; color: var(--fe-ink); text-decoration: none;
  background: var(--fe-surface); box-shadow: var(--ld-carta-om); cursor: grab; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
  transition: transform var(--st-t-medio) var(--st-molla), box-shadow var(--st-t-medio) var(--st-uscita), opacity var(--st-t-breve); }
.pl-carta:hover { transform: translateY(-2px); box-shadow: var(--ld-carta-su); color: var(--fe-ink); }
.pl-carta:active { transform: scale(.985); }
.pl-carta:focus-visible { outline: 2px solid var(--fe-primary-text); outline-offset: 2px; }
.pl-carta__testa { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pl-carta__az { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-carta__rc { flex: none; display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--fe-group); font-size: 11.5px; font-weight: 600; color: var(--fe-secondary); }
.pl-carta__rc svg { width: 11px; height: 11px; }
.pl-carta__tit { font-size: 13px; color: var(--fe-secondary); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-carta__piede { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 2px; }
.pl-carta__val { font-size: 17px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-carta__data { margin-left: auto; font-size: 12px; color: var(--fe-secondary); white-space: nowrap; }
.pl-carta__data.is-urg { color: var(--fe-error-text); font-weight: 500; }
.pl-carta__data.is-vuota { color: var(--fe-tertiary); }
.pl-carta .st-anello::before { background: var(--fe-surface); }
.pl-carta.is-sorgente { opacity: .32; transform: scale(.98); box-shadow: none; outline: 1.5px dashed color-mix(in srgb, var(--fe-ink) 22%, transparent); outline-offset: -1.5px; }
.pl-carta.is-spostata { animation: pl-acceso 1.8s var(--st-uscita) both; }
@keyframes pl-acceso { 0%, 30% { box-shadow: var(--ld-carta-su), 0 0 0 3px var(--fe-primary), 0 0 30px 4px color-mix(in srgb, var(--fe-primary) 40%, transparent); } 100% { box-shadow: var(--ld-carta-om); } }
.pl-fantasma { position: fixed !important; left: 0; top: 0; z-index: 78; margin: 0; pointer-events: none; cursor: grabbing; opacity: .98;
  box-shadow: 0 2px 6px rgba(22,17,15,.12), 0 30px 60px -18px rgba(22,17,15,.45) !important; will-change: transform; transition: none; }
body.pl-trascina, body.pl-trascina * { cursor: grabbing !important; }
.pl-pagina .st-entra { animation-delay: calc(min(var(--i, 0), 16) * 30ms); }
.pl-fermo .st-entra { animation: none; }

/* Vassoio: mentre si trascina, le fasi chiuse in basso */
.pl-vassoio { position: fixed; z-index: 77; left: 50%; bottom: calc(24px + var(--st-safe-b, 0px)); transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  width: max-content; max-width: calc(100vw - 32px); padding: 10px; border-radius: 24px;
  background: var(--st-vetro-forte); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  box-shadow: var(--st-sh-pop), inset 0 0 0 .5px var(--st-glass-border); animation: pl-vassoio-su 360ms var(--st-molla) both; }
.pl-vassoio.is-via { animation: pl-vassoio-giu 240ms var(--st-uscita) both; }
@keyframes pl-vassoio-su { from { opacity: 0; transform: translate(-50%, 24px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes pl-vassoio-giu { to { opacity: 0; transform: translate(-50%, 16px) scale(.97); } }
.pl-zona { --z: var(--fe-tertiary); display: flex; align-items: center; gap: 10px; width: 188px; min-height: 58px; padding: 10px 14px; border-radius: 16px;
  border: 1.5px dashed color-mix(in srgb, var(--z) 55%, transparent); background: color-mix(in srgb, var(--z) 6%, transparent); color: var(--fe-ink);
  transition: background-color var(--st-t-breve), transform var(--st-t-breve) var(--st-molla), border-color var(--st-t-breve); }
.pl-zona.is-vinta { --z: var(--fe-success); } .pl-zona.is-persa { --z: var(--fe-error); }
.pl-zona > svg { flex: none; width: 22px; height: 22px; color: var(--z); }
.pl-zona > span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.pl-zona b { font-size: 14px; font-weight: 600; white-space: nowrap; }
.pl-zona small { font-size: 12px; color: var(--fe-secondary); }
.pl-zona.is-sopra { background: color-mix(in srgb, var(--z) 18%, transparent); border-style: solid; border-color: var(--z); transform: scale(1.03); }

/* ===== 4. Tablet ===== */
@media (max-width: 1100px) {
  .pl-pt { grid-template-columns: 1fr 1fr; }
  .pl-pt__c.is-eroe { grid-column: 1 / -1; }
  .pl-pt__c:nth-child(odd):not(.is-eroe)::before { display: none; }
  .pl-pt__c.is-eroe::before { left: 20px; right: 20px; top: 0; bottom: auto; width: auto; height: var(--st-linea); display: block; }
  .pl-kanban { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(240px, 1fr); scroll-snap-type: x mandatory; scroll-padding: 0 2px; }
  .pl-col { scroll-snap-align: start; }
  .ld-smart__t { padding: 9px 10px 9px 8px; }
  .ld-smart__ico { width: 24px; height: 24px; }
  .ld-smart__n { font-size: 20px; }
  .ld-smart__et { font-size: 12.5px; }
}

/* ===== 5. Telefono ===== */
@media (max-width: 760px) {
  .split .lista.ld-lista { overflow: visible; padding: 0 16px 12px; background: transparent; }
  .ld-lt { padding: 8px 0 14px; }
  .ld-smart { gap: 6px; }
  .ld-r { padding-left: 4px; padding-right: 4px; }
  .ld-r::after { left: 52px; right: 4px; }
  .ld-pano { padding: 24px 0; }
  .det__in.ld3 { padding: 16px 16px 40px; }
  .ld3-testa { gap: 14px; align-items: flex-start; }
  .ld3-testa .st-anello--xl { --s: 60px; }
  .ld3-testa .st-anello--xl::before { inset: 6px; }
  .ld-mono.xl { width: 60px; height: 60px; font-size: 22px; }
  .ld-barra .st-btn span { display: none; }
  .ld-barra .st-btn { width: 36px; padding: 0; }
  .ld-barra .st-btn svg { margin: 0; }
  .ld-barra__titolo { display: none; }
  .ld-tappe { grid-template-columns: 1fr; }
  .ld-tappe li { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 0 0 14px; }
  .ld-tappe li::before { left: 10px; right: auto; top: 22px; bottom: 0; width: 2px; height: auto; transform-origin: top; }
  .ld-tappe i { margin-bottom: 0; flex: none; }
  .ld-tappe small { flex: 1; }
  .ld-tappe small.ld-tappe__q { flex: none; margin-left: auto; }
  .ld-tappe__pdf { margin: 0 0 0 32px; }
  .ld-kv > span:first-child { width: 100px; }
  .pl-testa { align-items: flex-start; }
  .pl-pt__c { padding: 16px; }
  .pl-pt__n { font-size: 26px; }
  .pl-pt__n.is-eroe { font-size: 38px; }
  .pl-striscia { padding: 14px 16px 16px; }
  .pl-striscia::before { left: 16px; right: 16px; }
  .pl-tasti { display: none; }
  .pl-kanban { grid-auto-columns: 82%; margin: 0 -16px; padding: 0 16px 8px; scroll-padding: 0 16px; scrollbar-width: none; }
  .pl-kanban::-webkit-scrollbar { display: none; }
  .pl-vassoio { bottom: calc(var(--st-tab, 64px) + 16px + var(--st-safe-b, 0px)); }
  .pl-zona { width: calc(50vw - 36px); min-height: 52px; padding: 8px 10px; }
  .pl-zona b { font-size: 13px; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .st-anello.ld-anima, .ld-barre i, .ld-tappe i, .ld-tappe li::before, .pl-striscia__barra span, .ld3 .ld-entra, .ld-r.is-nuova { animation: none !important; }
  .st-anello.ld-anima { --ld-p: var(--p); }
}
/* l'entrata delle carte non deve bloccare il transform (passaggio del mouse, carta sorgente) */
.pl-carta.st-entra { animation-fill-mode: backwards; }
/* testata con quattro numeri (chi vede i soldi): sotto i 1100 px una griglia 2×2 */
@media (max-width: 1100px) {
  .pl-pt.is-4 .pl-pt__c.is-eroe { grid-column: auto; }
  .pl-pt.is-4 .pl-pt__c.is-eroe::before { left: 0; right: auto; top: 20px; bottom: 20px; width: var(--st-linea); height: auto; }
  .pl-pt.is-4 .pl-pt__c:nth-child(3)::before { display: none; }
  .pl-pt.is-4 .pl-pt__c:nth-child(n+3) { border-top: .5px solid var(--fe-separator); }
}
@media (max-width: 760px) { .pl-pt__n.is-eroe { font-size: 34px; } .pl-pt__c { gap: 4px; } }

/* La richiesta dal modulo del sito: il messaggio con le sue parole, poi i campi (servizio, azienda, sito, fonte) */
.ld-rp { margin-top: 0; }
.ld-richiesta__msg { margin: 0; padding: 14px 18px; border-left: 3px solid var(--fe-primary); border-radius: 0 14px 14px 0;
  background: color-mix(in srgb, var(--fe-primary) 6%, transparent); font-size: 15.5px; line-height: 1.55; color: var(--fe-ink); text-wrap: pretty; }
.ld-richiesta__campi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ld-richiesta__c { display: inline-flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--fe-ink) 10%, transparent); min-width: 0; max-width: 100%; }
.ld-richiesta__c small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fe-tertiary); }
.ld-richiesta__c b { font-weight: 500; font-size: 14px; color: var(--fe-ink); overflow-wrap: anywhere; }