/* ============================================================
   Fenice · interfaccia (navigazione e pagine ripensate)
   Si carica dopo brand.css. Solo token --fe-*: niente colori scritti a mano.
   Riferimenti: barra laterale di Mail/Promemoria su macOS, liste a gruppi di iOS.
   ============================================================ */

/* ---------- Barra laterale ---------- */
.sidebar {
  background: color-mix(in srgb, var(--fe-paper) 86%, transparent);
  backdrop-filter: var(--fe-glass-blur); -webkit-backdrop-filter: var(--fe-glass-blur);
  border-right: 1px solid var(--fe-separator-soft);
  padding: 16px 12px 12px;
}
.logo { padding: 4px 6px 16px; }
.cerca-btn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  height: 34px; padding: 0 10px; margin: 0 0 14px;
  background: var(--fe-group); border: 0; border-radius: var(--fe-r-field);
  color: var(--fe-tertiary); font: inherit; font-size: 14px; cursor: pointer;
  transition: background var(--fe-dur-fast) var(--fe-ease-out);
}
.cerca-btn:hover { background: color-mix(in srgb, var(--fe-ink) 7%, transparent); color: var(--fe-secondary); }
.cerca-btn svg { width: 15px; height: 15px; }
.cerca-btn kbd { margin-left: auto; font: inherit; font-size: 11.5px; color: var(--fe-tertiary); }
.sidebar.collapsed .cerca-btn span, .sidebar.collapsed .cerca-btn kbd { display: none; }
.sidebar.collapsed .cerca-btn { justify-content: center; padding: 0; }

.nav { gap: 2px; }
.nav-item { height: 40px; border-radius: 10px; font-size: 14.5px; font-weight: 500; transition: background var(--fe-dur-fast) var(--fe-ease-out); }
.nav-item:hover { background: color-mix(in srgb, var(--fe-ink) 5%, transparent); }
.nav-item.active { background: color-mix(in srgb, var(--fe-ink) 8%, transparent); color: var(--fe-ink); font-weight: 600; }
.nav-badge { background: var(--fe-error); }
.nav-badge.neutro { background: none; color: var(--fe-tertiary); font-weight: 500; font-size: 13px; padding: 0; }

/* profilo in fondo: un tocco apre il menu delle cose che servono ogni tanto */
.profilo { position: relative; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--fe-separator-soft); }
.sidebar-user {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px; border: 0; border-radius: 12px; background: none; cursor: pointer;
  font: inherit; text-align: left; color: var(--fe-ink);
}
.sidebar-user:hover { background: color-mix(in srgb, var(--fe-ink) 5%, transparent); }
.sidebar-user-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.profilo-chev { width: 16px; height: 16px; color: var(--fe-tertiary); flex: none; }
.sidebar.collapsed .sidebar-user-txt, .sidebar.collapsed .profilo-chev { display: none; }
.profilo-menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 50;
  background: var(--fe-surface); border-radius: var(--fe-r-box); box-shadow: var(--fe-shadow-pop);
  padding: 6px; display: flex; flex-direction: column;
  animation: fe-pop var(--fe-dur-panel) var(--fe-ease-spring);
}
.sidebar.collapsed .profilo-menu { right: auto; width: 230px; }
.profilo-menu > button {
  text-align: left; border: 0; background: none; font: inherit; font-size: 14px; color: var(--fe-ink);
  padding: 9px 10px; border-radius: 8px; cursor: pointer;
}
.profilo-menu > button:hover { background: var(--fe-primary); color: #fff; }
.profilo-sep { height: 1px; background: var(--fe-separator-soft); margin: 5px 4px; }
.profilo-tema { margin: 2px 4px; }
.profilo-tema .seg-btn { flex: 1; justify-content: center; }
@keyframes fe-pop { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }

/* barra in alto (telefono) */
.topbar .logo-icona { width: 28px; height: 28px; border-radius: var(--fe-r-tile); }
.topbar .avatar { width: 28px; height: 28px; font-size: 12px; }
.tab-item { position: relative; }
.tab-dot { position: absolute; top: 6px; left: calc(50% + 8px); width: 7px; height: 7px; border-radius: 50%; background: var(--fe-error); }
.tabbar { background: var(--fe-glass-bg); backdrop-filter: var(--fe-glass-blur); -webkit-backdrop-filter: var(--fe-glass-blur); border-top: 1px solid var(--fe-glass-border); }

/* ---------- Cerca (⌘K) ---------- */
.cerca-velo {
  position: fixed; inset: 0; z-index: 300; display: flex; justify-content: center; align-items: flex-start;
  padding: 14vh 16px 16px; background: color-mix(in srgb, var(--fe-ink) 22%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fe-fade var(--fe-dur-fast) var(--fe-ease-out);
}
.cerca-box {
  width: min(620px, 100%); background: var(--fe-surface); border-radius: 18px; box-shadow: var(--fe-shadow-pop);
  overflow: hidden; animation: fe-pop var(--fe-dur-panel) var(--fe-ease-spring);
}
.cerca-campo { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 58px; border-bottom: 1px solid var(--fe-separator-soft); }
.cerca-campo svg { width: 20px; height: 20px; color: var(--fe-tertiary); flex: none; }
.cerca-campo input { flex: 1; border: 0; outline: 0; background: none; font: inherit; font-size: 19px; color: var(--fe-ink); }
.cerca-ris { max-height: 52vh; overflow: auto; padding: 6px; }
.cerca-voce {
  display: grid; grid-template-columns: 72px 1fr; gap: 0 10px; width: 100%; text-align: left;
  border: 0; background: none; font: inherit; padding: 9px 12px; border-radius: 10px; cursor: pointer; color: var(--fe-ink);
}
.cerca-voce.on, .cerca-voce:hover { background: var(--fe-primary); color: #fff; }
.cerca-voce.on .cerca-tipo, .cerca-voce.on .cerca-s, .cerca-voce:hover .cerca-tipo, .cerca-voce:hover .cerca-s { color: rgba(255,255,255,.8); }
.cerca-tipo { grid-row: span 2; align-self: center; font-size: 12px; color: var(--fe-tertiary); }
.cerca-t { font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cerca-s { font-size: 12.5px; color: var(--fe-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cerca-vuoto { padding: 22px; text-align: center; color: var(--fe-tertiary); font-size: 14px; }
@keyframes fe-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Pagine «a lista» (Oggi e simili) ---------- */
.ap-pagina { max-width: 860px; margin: 0 auto; padding: 8px 0 64px; }
.ap-testa { margin: 8px 0 28px; animation: fe-su var(--fe-dur-spring) var(--fe-ease-spring) both; }
.ap-data-lunga { font-size: 13px; font-weight: 600; color: var(--fe-primary-text); }
.ap-titolo { font-size: clamp(30px, 4vw, 40px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; margin: 6px 0 0; color: var(--fe-ink); }
.ap-riassunto { font-size: 17px; color: var(--fe-secondary); margin: 8px 0 0; }

.ap-sez { margin-top: 28px; animation: fe-su var(--fe-dur-spring) var(--fe-ease-spring) both; }
.ap-sez:nth-of-type(2) { animation-delay: calc(var(--fe-stagger) * 1); }
.ap-sez:nth-of-type(3) { animation-delay: calc(var(--fe-stagger) * 2); }
.ap-sez:nth-of-type(4) { animation-delay: calc(var(--fe-stagger) * 3); }
.ap-sez:nth-of-type(5) { animation-delay: calc(var(--fe-stagger) * 4); }
.ap-sez:nth-of-type(n+6) { animation-delay: calc(var(--fe-stagger) * 5); }
.ap-sez-head { display: flex; align-items: baseline; gap: 8px; padding: 0 4px 10px; }
.ap-sez-head h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; margin: 0; color: var(--fe-ink); }
.ap-conta { font-size: 15px; font-weight: 500; color: var(--fe-tertiary); }
.ap-conta.rosso { color: var(--fe-error-text); }
.ap-link { margin-left: auto; border: 0; background: none; font: inherit; font-size: 14px; color: var(--fe-primary-text); cursor: pointer; padding: 0; }
.ap-link:hover { text-decoration: underline; }

.ap-lista { background: var(--fe-surface); border-radius: 16px; box-shadow: var(--fe-shadow-card); overflow: hidden; }
.ap-riga {
  position: relative; display: flex; align-items: center; gap: 14px;
  min-height: 60px; padding: 11px 16px; cursor: default;
  transition: background var(--fe-dur-fast) var(--fe-ease-out);
}
.ap-riga + .ap-riga::before { content: ""; position: absolute; top: 0; left: 56px; right: 0; height: 1px; background: var(--fe-separator-soft); }
.ap-riga[data-go] { cursor: pointer; }
.ap-riga[data-go]:hover { background: var(--fe-paper); }
.ap-riga:focus-visible { outline: 2px solid var(--fe-primary); outline-offset: -2px; }
.ap-lead { width: 26px; flex: none; display: flex; justify-content: center; }
.ap-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ap-t { font-size: 15.5px; font-weight: 500; color: var(--fe-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-s { font-size: 13.5px; color: var(--fe-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-coda { flex: none; font-size: 13.5px; color: var(--fe-secondary); }
.ap-chev { flex: none; width: 14px; height: 14px; color: var(--fe-tertiary); display: flex; }
.ap-chev svg { width: 14px; height: 14px; }
.ap-tempo { font-variant-numeric: tabular-nums; }
.ap-ritardo { color: var(--fe-accent-text); font-weight: 600; }
.ap-soldi { color: var(--fe-ink); font-weight: 600; }
.ap-pallino { width: 10px; height: 10px; border-radius: 50%; display: block; }
.ap-pallino.rosso { background: var(--fe-error); box-shadow: 0 0 0 4px var(--fe-error-soft); }
.ap-pallino.ambra { background: var(--fe-accent); box-shadow: 0 0 0 4px var(--fe-accent-soft); }
.ap-data { display: flex; flex-direction: column; align-items: center; line-height: 1; font-size: 10.5px; text-transform: uppercase; color: var(--fe-primary-text); font-weight: 600; }
.ap-data b { font-size: 18px; color: var(--fe-ink); font-weight: 600; }
.ap-lead .score-pill { min-width: 30px; padding: 3px 7px; font-size: 12.5px; }

/* la spunta tonda di Promemoria */
.ap-check {
  appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; flex: none;
  border-radius: 50%; border: 1.5px solid var(--fe-tertiary); cursor: pointer; display: grid; place-content: center;
  transition: all var(--fe-dur-fast) var(--fe-ease-out);
}
.ap-check:hover { border-color: var(--fe-primary); }
.ap-check:checked { background: var(--fe-success); border-color: var(--fe-success); }
.ap-check:checked::after { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.ap-riga.fatta { opacity: .45; }
.ap-riga.fatta .ap-t { text-decoration: line-through; }

.ap-vuoto { text-align: center; padding: 64px 0; color: var(--fe-secondary); font-size: 17px; }
.ap-vuoto img { width: 64px; height: 64px; border-radius: var(--fe-r-tile); animation: fe-respira 3.2s ease-in-out infinite; }
@keyframes fe-respira { 50% { transform: scale(1.05); } }
@keyframes fe-su { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* segmenti in testa a una sezione (es. Vendite: Elenco · Pipeline) */
.ap-segmenti { display: inline-flex; background: var(--fe-group); border-radius: 10px; padding: 3px; gap: 2px; margin-bottom: 18px; }
.ap-segmenti button { border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--fe-secondary); padding: 6px 16px; border-radius: 8px; cursor: pointer; }
.ap-segmenti button.on { background: var(--fe-surface); color: var(--fe-ink); box-shadow: var(--fe-shadow-flat); }

@media (max-width: 760px) {
  .ap-pagina { padding-top: 0; }
  .ap-riga + .ap-riga::before { left: 16px; }
  .ap-coda { display: none; }
  .ap-riga .ap-coda:has(.ap-soldi), .ap-riga .ap-coda:has(.ap-ritardo) { display: block; }
}
.profilo-menu[hidden] { display: none; }

/* ---------- Progetti ---------- */
.ap-pagina.larga { max-width: 1080px; }
.pj-testa { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pj-testa .pj-sync { font-size: 12.5px; color: var(--fe-tertiary); margin-top: 6px; }
.pj-strumenti { display: flex; align-items: center; gap: 8px; }
.pj-strumenti .pj-search { height: 34px; background: var(--fe-group); border: 0; border-radius: var(--fe-r-field); width: 200px; }
.pj-strumenti .icon-btn { width: 34px; height: 34px; border-radius: var(--fe-r-field); font-size: 18px; color: var(--fe-secondary); }
.ap-segmenti.mini { margin: 0; }
.ap-segmenti.mini button { padding: 5px 9px; display: flex; }
.ap-segmenti.mini svg { width: 16px; height: 16px; }
.pj-altro { position: relative; }
.pj-altro-menu { top: calc(100% + 6px); bottom: auto; left: auto; right: 0; width: 250px; }
.ap-nota { font-size: 13px; color: var(--fe-tertiary); }

.pj-mono {
  width: 34px; height: 34px; border-radius: var(--fe-r-tile); flex: none;
  display: grid; place-items: center; background: var(--tile); color: #fff;
  font-size: 15px; font-weight: 600; letter-spacing: 0;
}
.ap-lead:has(.pj-mono) { width: 34px; }
.ap-riga:has(.pj-mono) + .ap-riga::before { left: 64px; }
.ap-riga.noi .pj-mono { box-shadow: 0 0 0 2px var(--fe-surface), 0 0 0 4px var(--fe-error); }
.pj-r-noi { color: var(--fe-error-text); font-weight: 600; }
.pj-r-data { font-size: 13px; color: var(--fe-secondary); }
.pj-r-data .vicina { color: var(--fe-primary-text); font-weight: 600; }
.pj-r-perso { color: var(--fe-tertiary); }
.ap-t .pj-ai-tag, .ap-t .pj-ric { margin-left: 8px; vertical-align: 1px; }

.pj-rivedi {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  border: 0; font: inherit; cursor: pointer; margin: 0 0 22px; padding: 14px 18px;
  background: var(--fe-accent-soft); color: var(--fe-ink); border-radius: 16px;
  transition: transform var(--fe-dur-fast) var(--fe-ease-out);
}
.pj-rivedi:hover { transform: translateY(-1px); }
.pj-rivedi > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pj-rivedi small { color: var(--fe-secondary); font-size: 13px; }
.pj-rivedi-ico { width: 38px; height: 38px; border-radius: var(--fe-r-tile); background: var(--fe-accent); color: #fff; display: grid; place-items: center; }
.pj-rivedi-ico svg { width: 20px; height: 20px; }
.pj-bcard-top .pj-mono { width: 22px; height: 22px; font-size: 11px; }
.pj-bcard-top { gap: 8px; }

@media (max-width: 760px) {
  .pj-testa { align-items: flex-start; }
  .pj-strumenti { width: 100%; }
  .pj-strumenti .pj-search { flex: 1; width: auto; }
}

/* ---------- Scheda progetto: in cima la situazione, detta come una frase ---------- */
.pj-det-cliente { display: flex; align-items: center; gap: 10px; }
.pj-det-cliente .pj-mono { width: 26px; height: 26px; font-size: 12px; }
.pj-eroe {
  --c: var(--fe-secondary); --soft: var(--fe-group);
  position: relative; border-radius: var(--fe-r-card); padding: 26px 28px 20px;
  background: linear-gradient(180deg, var(--soft), var(--fe-surface) 140px), var(--fe-surface);
  box-shadow: var(--fe-shadow-card); margin-bottom: 20px;
  animation: fe-su var(--fe-dur-spring) var(--fe-ease-spring) both;
}
.pj-eroe.noi { --c: var(--fe-error-text); --soft: var(--fe-error-soft); }
.pj-eroe.cliente { --c: var(--fe-accent-text); --soft: var(--fe-accent-soft); }
.pj-eroe.ok { --c: var(--fe-success-text); --soft: var(--fe-success-soft); }
.pj-eroe-kick { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--c); text-transform: uppercase; letter-spacing: .06em; }
.pj-eroe-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.pj-eroe.noi .pj-eroe-dot { animation: fe-pulsa 1.8s ease-in-out infinite; }
@keyframes fe-pulsa { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fe-error) 45%, transparent); } 50% { box-shadow: 0 0 0 7px transparent; } }
.pj-eroe-titolo { font-size: clamp(22px, 2.6vw, 28px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin-top: 10px; color: var(--fe-ink); }
.pj-eroe-sotto { font-size: 15px; color: var(--fe-secondary); margin-top: 6px; }
.pj-eroe .pj-richiesta { margin-top: 18px; }
.pj-eroe .pj-attesa { background: none; border: 0; padding: 0; margin-top: 12px; }
.pj-eroe .pj-attesa > .pj-ric-k, .pj-eroe .pj-attesa-cosa { display: none; }
.pj-eroe .pj-fatto-box { margin-top: 18px; }
.pj-eroe-piede { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--fe-separator-soft); flex-wrap: wrap; }
.pj-eroe-cambia { font-size: 13px; color: var(--fe-tertiary); }
.pj-eroe .pj-palla-seg { margin: 0; }
.pj-percorso .pj-steps { margin-top: 4px; }
.pj-percorso .pj-facts { margin-top: 16px; }

/* ---------- Tutte le altre pagine: stessa grammatica (titoli grandi, superfici senza bordo) ---------- */
.main { max-width: 1240px; padding: 36px 44px 96px; }
.page-title { font-size: clamp(28px, 3.4vw, 36px); font-weight: 600; letter-spacing: -0.03em; }
.page-sub { color: var(--fe-secondary); font-size: 15px; }
.card, .tbl-wrap { border: 0; box-shadow: var(--fe-shadow-card); border-radius: 16px; }
.card-title, .pj-kick { letter-spacing: .06em; color: var(--fe-tertiary); }
.tbl th { font-size: 11.5px; letter-spacing: .06em; color: var(--fe-tertiary); background: var(--fe-surface); border-bottom-color: var(--fe-separator-soft); }
.tbl td { border-bottom-color: var(--fe-separator-soft); font-size: 14.5px; }
.tbl tbody tr:hover { background: var(--fe-paper); }
.btn { border-radius: var(--fe-r-field); font-weight: 500; }
.btn.primary { box-shadow: none; }
.input { border-radius: var(--fe-r-field); }
.chip { border-radius: var(--fe-r-pill); }
#view > * { animation-duration: var(--fe-dur-spring); animation-timing-function: var(--fe-ease-spring); }
@media (max-width: 760px) { .main { padding: 16px 16px 110px; } }

/* ---------- Lista + dettaglio (come Mail e Note): Progetti, poi Richieste ---------- */
.main.main--split { padding: 0; max-width: none; height: 100vh; overflow: hidden; }
.split { display: grid; grid-template-columns: var(--fe-list-w) minmax(0, 1fr); height: 100%; }
.lista { display: flex; flex-direction: column; min-height: 0; border-right: .5px solid var(--fe-separator); background: var(--fe-surface); }
.lista__testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 24px 20px 10px; }
.lista__tt h1 { font-size: 30px; font-weight: 600; line-height: 1.08; letter-spacing: -.045em; margin: 0; }
.lista__tt p { margin: 4px 0 0; font-size: 13.5px; color: var(--fe-secondary); }
.lista__az { display: flex; gap: 2px; }
.lista__az .icon-btn { width: 32px; height: 32px; border-radius: 9px; color: var(--fe-secondary); font-size: 18px; }
.lista__az .icon-btn svg { width: 17px; height: 17px; }
.lista__filtri { display: flex; flex-direction: column; gap: 10px; padding: 0 20px 12px; border-bottom: .5px solid var(--fe-separator); }
.lista__filtri .pj-search { height: 32px; background: var(--fe-sel); border: 0; border-radius: var(--fe-r-field); width: auto; }
.lista__filtri .ap-segmenti { margin: 0; display: flex; }
.lista__filtri .ap-segmenti button { flex: 1; padding: 5px 8px; }
.lista__filtri .pj-sync { font-size: 12px; color: var(--fe-tertiary); }
.righe { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 8px 28px; }
.lista__sez { padding: 14px 12px 4px; font-size: 12.5px; font-weight: 600; color: var(--fe-secondary); }
.lista__sez.rosso { color: var(--fe-error-text); }
.riga {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: var(--fe-r-row);
  color: var(--fe-ink); position: relative; text-decoration: none;
  transition: background var(--fe-dur-fast) var(--fe-ease-out);
}
.riga + .riga::before { content: ""; position: absolute; top: 0; left: 58px; right: 12px; border-top: .5px solid var(--fe-separator); }
.riga:hover { background: var(--fe-hover); color: var(--fe-ink); }
.riga--sel, .riga--sel:hover { background: var(--fe-primary-soft); }
.riga--sel::before, .riga--sel + .riga::before { display: none; }
.riga--noi .pj-mono { box-shadow: 0 0 0 2px var(--fe-surface), 0 0 0 3.5px var(--fe-error); }
.riga__c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.riga__1 { display: flex; align-items: baseline; gap: 8px; }
.riga__1 b { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.riga__1 em { flex: none; font-style: normal; font-size: 12.5px; color: var(--fe-secondary); white-space: nowrap; }
.riga__2 { font-size: 13.5px; color: var(--fe-graphite); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.riga__3 { font-size: 12.5px; color: var(--fe-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.riga .pj-mono { margin-top: 2px; }
.lista__vuota { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 20px; text-align: center; color: var(--fe-secondary); }
.lista__vuota b { color: var(--fe-ink); font-size: 17px; }
.lista .pj-rivedi { margin: 6px 4px 8px; padding: 12px 14px; width: calc(100% - 8px); }
.lista .pj-rivedi-ico { width: 32px; height: 32px; }
.lista .pj-altro-menu { width: 240px; }

.det { min-width: 0; overflow-y: auto; background: var(--fe-paper); container-type: inline-size; }
.det__in.pj-wrap { max-width: 1040px; margin: 0 auto; padding: 32px 36px 88px; }
.det__vuoto { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 40px; text-align: center; color: var(--fe-secondary); }
.det__vuoto img { width: 72px; height: 72px; border-radius: var(--fe-r-tile); opacity: .9; animation: fe-respira 3.2s ease-in-out infinite; }
.det__vuoto b { margin-top: 10px; font-size: 22px; font-weight: 600; letter-spacing: -.03em; color: var(--fe-ink); }
.split .indietro { display: none; }
.det .pj-det-grid { grid-template-columns: minmax(0, 1fr) 320px; }
@container (max-width: 900px) {
  .det .pj-det-grid { grid-template-columns: 1fr; }
  .det .pj-side { position: static; }
}
@media (max-width: 1100px) and (min-width: 761px) { .split { grid-template-columns: 310px minmax(0, 1fr); } }
@media (max-width: 760px) {
  .main.main--split { height: auto; overflow: visible; padding: 0 0 100px; }
  .split { display: block; height: auto; }
  .split.aperta .lista { display: none; }
  .split:not(.aperta) .det { display: none; }
  .lista { border-right: 0; background: transparent; }
  .righe { overflow: visible; }
  .split .indietro { display: inline-flex; }
  .det { overflow: visible; }
  .det__in.pj-wrap { padding: 16px 16px 40px; }
}

/* ---------- Richieste: Promemoria a sinistra, Mail a destra ---------- */
.det__bar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px;
  height: var(--fe-toolbar-h); padding: 0 24px;
  background: var(--fe-glass-bg); backdrop-filter: var(--fe-glass-blur); -webkit-backdrop-filter: var(--fe-glass-blur);
  border-bottom: .5px solid var(--fe-separator);
}
.det__azioni { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.det__bar .indietro { border: 0; background: none; font: inherit; font-size: 16px; font-weight: 500; color: var(--fe-primary-text); cursor: pointer; align-items: center; gap: 2px; padding: 0; }
.det__bar .indietro svg { width: 18px; height: 18px; }
.riga .ap-check { margin-top: 1px; }
.riga--off { opacity: .55; }
.riga__1 em.tardi, .todo-mitt em.tardi { color: var(--fe-error-text); font-weight: 500; }
.det__in.todo-det { max-width: 760px; margin: 0 auto; padding: 32px 40px 88px; }
.todo-mitt { display: flex; align-items: center; gap: 12px; }
.todo-mitt .avatar { width: 40px; height: 40px; font-size: 15px; }
.todo-mitt > div:not(.avatar) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.todo-mitt .avatar { flex: none; }
.det__azioni .btn { height: 34px; display: inline-flex; align-items: center; text-decoration: none; }
.todo-mitt b { font-size: 15px; font-weight: 600; }
.todo-mitt span { font-size: 13px; color: var(--fe-secondary); }
.todo-mitt em { font-style: normal; font-size: 13px; color: var(--fe-secondary); }
.todo-ogg { font-size: 26px; font-weight: 600; letter-spacing: -.03em; line-height: 1.2; margin: 22px 0 16px; }
.todo-corpo {
  white-space: pre-wrap; font-size: 16px; line-height: 1.6; color: var(--fe-ink);
  background: var(--fe-surface); border-radius: var(--fe-r-group); box-shadow: var(--fe-shadow-flat); padding: 22px 24px;
}
.todo-via { margin-top: 12px; font-size: 13px; color: var(--fe-tertiary); }
@media (max-width: 760px) {
  .det__bar { padding: 0 16px; top: 0; }
  .det__in.todo-det { padding: 18px 16px 40px; }
  .todo-ogg { font-size: 22px; }
}

/* «Vista come non admin»: una pillola blu fissa in alto, sempre visibile */
.banda-come {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 120;
  display: flex; align-items: center; gap: 12px; padding: 7px 8px 7px 16px; border-radius: var(--fe-r-pill);
  background: var(--fe-info); color: var(--fe-on-primary); font-size: 13.5px; box-shadow: var(--fe-shadow-pop);
  animation: fe-pop var(--fe-dur-panel) var(--fe-ease-spring);
}
.banda-come button { border: 0; font: inherit; font-weight: 600; font-size: 13px; padding: 5px 12px; border-radius: var(--fe-r-pill); background: rgba(255,255,255,.22); color: var(--fe-on-primary); cursor: pointer; }
@media (max-width: 760px) { .banda-come { top: auto; bottom: 86px; width: calc(100% - 32px); justify-content: space-between; } }
.nav-label { padding: 14px 10px 6px; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--fe-tertiary); }
.nav .nav-label:first-child { padding-top: 0; }
.nav-item { height: 36px; }

/* ---------- Marchio e piede della barra laterale, come Falcon e Colibrì ---------- */
.logo { gap: 10px; padding: 4px 8px 16px; }
.logo .logo-icona { width: 30px; height: 30px; border-radius: 0; box-shadow: none; filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--fe-primary) 25%, transparent)); }
.logo-testo b { font-size: 17px; letter-spacing: -0.02em; line-height: 1.1; }
.logo-testo small { font-size: 11.5px; }
.temi { display: flex; background: var(--fe-group); border-radius: 10px; padding: 3px; gap: 2px; margin: 12px 2px 0; }
.temi button { flex: 1; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 500; color: var(--fe-secondary); padding: 5px 4px; border-radius: 8px; cursor: pointer; }
.temi button.on { background: var(--fe-surface); color: var(--fe-ink); box-shadow: var(--fe-shadow-flat); }
.firma { font-size: 12px; line-height: 1.45; color: var(--fe-secondary); padding: 0 8px; margin: 12px 0 4px; }
.firma b { display: inline-block; margin-top: 3px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--fe-ink); }
.profilo { display: flex; flex-direction: column; }
.profilo .sidebar-user { order: 3; margin-top: 8px; }
.sidebar.collapsed .temi, .sidebar.collapsed .firma { display: none; }

/* ---------- Barra laterale come Falcon (Ottobix Intelligence) ---------- */
.sidebar { padding: 22px 12px 16px; }
.logo { align-items: center; gap: 12px; padding: 4px 6px 22px; }
.logo .logo-icona { width: 44px; height: 44px; border-radius: var(--fe-r-tile); filter: none; box-shadow: 0 8px 22px -6px color-mix(in srgb, var(--fe-ink) 35%, transparent); }
.logo-testo b { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.logo-testo small { font-size: 12.5px; margin-top: 3px; color: var(--fe-secondary); }
.logo-intel { margin-left: auto; align-self: flex-start; margin-top: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; color: var(--fe-secondary); background: var(--fe-group); border-radius: 7px; padding: 4px 7px; }
.logo .collapse-btn { display: none; }
.cerca-btn { margin-bottom: 16px; }
.nav { gap: 4px; }
.nav-item { height: auto; min-height: 50px; padding: 8px 10px; gap: 12px; border-radius: 12px; align-items: center; }
.nav-item svg { width: 30px; height: 30px; padding: 7px; box-shadow: 0 3px 8px -3px color-mix(in srgb, var(--tile) 70%, transparent); background: linear-gradient(180deg, var(--fe-tile-sheen), transparent 60%), var(--tile); }
.nav-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.nav-txt > span { font-size: 15px; font-weight: 500; color: var(--fe-ink); }
.nav-txt small { font-size: 12.5px; color: var(--fe-secondary); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.nav-item.active { background: color-mix(in srgb, var(--fe-primary) 9%, transparent); }
.nav-item.active .nav-txt > span { font-weight: 600; }
.sidebar.collapsed .nav-txt, .sidebar.collapsed .logo-intel { display: none; }
.temi { margin: 14px 0 0; padding: 4px; border-radius: 12px; }
.temi button { font-size: 14px; padding: 8px 4px; border-radius: 9px; }
.temi button.on { font-weight: 600; }
.torna-intel { display: flex; align-items: center; gap: 10px; padding: 14px 10px 6px; font-size: 15px; color: var(--fe-ink); text-decoration: none; }
.torna-intel svg { width: 18px; height: 18px; }
.torna-intel:hover { color: var(--fe-primary-text); }
.firma { font-size: 13px; margin: 10px 0 0; }
.firma b { font-size: 14.5px; }
.profilo .sidebar-user { order: 0; margin: 0 0 4px; }
.sidebar.collapsed .torna-intel { display: none; }
.logo-testo small { white-space: nowrap; }
.profilo .sidebar-user { order: -1; }
@media (min-width: 761px) { .shell:not(.collapsed) { grid-template-columns: 256px 1fr; } }

/* ---------- Oggi: panoramica (widget come su macOS, schede, due grafici) ---------- */
.og-pagina { max-width: 1240px; margin: 0 auto; padding: 4px 0 64px; }
.og-testa { margin-bottom: 26px; }
.og-rivedi { margin-bottom: 20px; }
.og-widget { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.og-w {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; border: 0; font: inherit; cursor: pointer;
  background: var(--fe-surface); border-radius: var(--fe-r-card); box-shadow: var(--fe-shadow-card); padding: 18px 20px 20px; color: var(--fe-ink);
  min-height: 148px; transition: transform var(--fe-dur-fast) var(--fe-ease-out), box-shadow var(--fe-dur-fast);
  animation: fe-su var(--fe-dur-spring) var(--fe-ease-spring) both;
}
.og-w:nth-child(2) { animation-delay: calc(var(--fe-stagger) * 1); } .og-w:nth-child(3) { animation-delay: calc(var(--fe-stagger) * 2); } .og-w:nth-child(4) { animation-delay: calc(var(--fe-stagger) * 3); }
.og-w:hover { transform: translateY(-2px); box-shadow: var(--fe-shadow-pop); }
.og-w-t { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--fe-secondary); }
.og-w-ico { width: 22px; height: 22px; border-radius: var(--fe-r-tile); background: var(--tile); color: #fff; display: grid; place-items: center; }
.og-w-ico svg { width: 13px; height: 13px; }
.og-w-num { font-size: clamp(32px, 3.4vw, 44px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; margin-top: auto; font-variant-numeric: tabular-nums; }
.og-w-sotto { font-size: 13px; color: var(--fe-secondary); }
.og-w.rosso .og-w-num { color: var(--fe-error-text); }
.og-w.ambra .og-w-num { color: var(--fe-accent-text); }
.og-w.primario { background: var(--fe-primary); color: var(--fe-on-primary); }
.og-w.primario .og-w-t, .og-w.primario .og-w-sotto { color: color-mix(in srgb, var(--fe-on-primary) 82%, transparent); }
.og-w.primario .og-w-ico { background: rgba(255,255,255,.22); }

.og-griglia { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.og-card { background: var(--fe-surface); border-radius: var(--fe-r-card); box-shadow: var(--fe-shadow-card); padding: 20px 20px 16px; min-width: 0;
  animation: fe-su var(--fe-dur-spring) var(--fe-ease-spring) both; animation-delay: calc(var(--fe-stagger) * 4); }
.og-7 { grid-column: span 7; } .og-5 { grid-column: span 5; } .og-6 { grid-column: span 6; } .og-12 { grid-column: span 12; }
.og-card-t { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.og-card-t h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.og-card-t h2 small { font-size: 13px; font-weight: 400; color: var(--fe-secondary); letter-spacing: 0; margin-left: 6px; }
.og-card .ap-lista.piatta { box-shadow: none; border-radius: 0; background: none; margin: 0 -8px; }
.og-card .ap-riga { padding: 10px 8px; min-height: 54px; border-radius: 12px; }
.og-card .ap-riga + .ap-riga::before { left: 48px; right: 8px; }
.og-tag { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: var(--fe-r-pill); }
.og-tag.rosso { background: var(--fe-error-soft); color: var(--fe-error-text); }
.ap-pallino.viola { background: var(--fe-tile-todo); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fe-tile-todo) 14%, transparent); }
.og-vuoto { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 0 20px; color: var(--fe-secondary); }
.og-vuoto img { width: 56px; height: 56px; border-radius: var(--fe-r-tile); animation: fe-respira 3.2s ease-in-out infinite; margin-bottom: 8px; }
.og-vuoto b { font-size: 18px; color: var(--fe-ink); }
.og-nota { color: var(--fe-secondary); font-size: 14px; margin: 6px 0; }
.og-soldi { display: flex; align-items: baseline; justify-content: space-between; padding: 6px 0; }
.og-soldi span { font-size: 13.5px; color: var(--fe-secondary); }
.og-soldi b { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.og-soldi.rosso b { font-size: 18px; color: var(--fe-error-text); }
.og-soldi + .ap-lista { margin-top: 8px; }

.og-area { width: 100%; height: 190px; display: block; overflow: visible; }
.og-asse { stroke: var(--fe-separator); stroke-width: 1; }
.og-linea { fill: none; stroke: var(--fe-primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.og-punto circle { fill: var(--fe-surface); stroke: var(--fe-primary); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity var(--fe-dur-fast); }
.og-punto:hover circle { opacity: 1; }
.og-etich { font-size: 11px; fill: var(--fe-tertiary); }
.og-barre { display: flex; flex-direction: column; gap: 12px; padding: 6px 0 4px; }
.og-barra { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 12px; cursor: pointer; }
.og-barra-t { font-size: 13.5px; color: var(--fe-graphite); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.og-barra-b { height: 10px; background: var(--fe-group); border-radius: var(--fe-r-pill); overflow: hidden; }
.og-barra-b i { display: block; height: 100%; background: var(--fe-primary); border-radius: var(--fe-r-pill); transition: width var(--fe-dur-spring) var(--fe-ease-spring); }
.og-barra:hover .og-barra-b i { background: color-mix(in srgb, var(--fe-primary) 85%, black); }
.og-barra-v { font-size: 13px; color: var(--fe-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.og-feed .feed-item { padding: 10px 0; }

@media (max-width: 1100px) { .og-widget { grid-template-columns: repeat(2, minmax(0, 1fr)); } .og-7, .og-5, .og-6 { grid-column: span 12; } }
@media (max-width: 760px) { .og-widget { gap: 10px; } .og-w { min-height: 120px; padding: 14px; } .og-w-num { font-size: 30px; } .og-barra { grid-template-columns: 96px minmax(0, 1fr) auto; } }
.og-griglia { align-items: start; }

/* ---------- Gruppi stile Impostazioni iOS ---------- */
.gruppo { background: var(--fe-surface); border-radius: var(--fe-r-group); box-shadow: var(--fe-shadow-flat); overflow: hidden; min-width: 0; }
.gruppo__testa { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 18px 8px; }
.gruppo__testa h3 { font-size: 15px; font-weight: 600; letter-spacing: -.02em; margin: 0; }
.gruppo__testa > span { font-size: 12.5px; color: var(--fe-secondary); }
.gr { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 18px; position: relative; color: var(--fe-ink); font-size: 15px; }
.gr + .gr::before { content: ""; position: absolute; top: 0; left: 18px; right: 0; border-top: .5px solid var(--fe-separator); }
.gr--kv > span:first-child { flex: none; width: 150px; font-size: 14px; color: var(--fe-secondary); }
.gr--kv > *:last-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.gr a { color: var(--fe-primary-text); text-decoration: none; }
.gr--campo input, .gr--campo select { border: 0; background: none; font: inherit; font-size: 15px; color: var(--fe-ink); text-align: right; padding: 4px 0; outline: none; min-width: 0; }
.gr--campo input:focus, .gr--campo select:focus { color: var(--fe-primary-text); }
.gr--campo .switch { flex: none !important; margin-left: auto; }
.gr--campo select { appearance: none; -webkit-appearance: none; cursor: pointer; }

/* ---------- Lead ---------- */
.ld-anello {
  --c: var(--fe-tertiary); flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--fe-group) 0);
}
.ld-anello::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--fe-surface); }
.ld-anello b { position: relative; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ld-anello.alto { --c: var(--fe-accent); } .ld-anello.medio { --c: var(--fe-primary); }
.ld-anello.alto b { color: var(--fe-accent-text); } .ld-anello.medio b { color: var(--fe-primary-text); }
.ld-anello.xl { width: 88px; height: 88px; } .ld-anello.xl::before { inset: 6px; } .ld-anello.xl b { font-size: 30px; letter-spacing: -.03em; }
.ld-riga .ld-anello { margin-top: 1px; }
.ld-riga-piede { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.ld-riga-piede .fa-wrap { display: inline-flex; gap: 4px; }
.ld-riga-piede .fpill { font-size: 11px; }
.ld-pill { display: inline-flex; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: var(--fe-r-pill); white-space: nowrap; }
.ld-caldi { color: var(--fe-accent-text); font-weight: 600; }
.ld-filtri { display: flex; gap: 8px; }
.ld-filtri select { flex: 1; min-width: 0; border: 0; background: var(--fe-sel); border-radius: var(--fe-r-field); height: 30px; padding: 0 8px; font: inherit; font-size: 13px; color: var(--fe-ink); }
.ld-lista .ap-segmenti button { font-size: 12.5px; padding: 5px 4px; }
.pj-altro-menu .rosso { color: var(--fe-error-text); }

.det__in.ld-det { max-width: 880px; margin: 0 auto; padding: 32px 40px 88px; display: flex; flex-direction: column; gap: 18px; }
.ld-testa { display: flex; align-items: center; gap: 22px; }
.ld-testa-c { min-width: 0; }
.ld-testa h1 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; margin: 0; overflow-wrap: anywhere; }
.ld-testa p { margin: 6px 0 0; font-size: 15px; color: var(--fe-secondary); }
.ld-testa-pill { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ld-stato { position: relative; display: inline-flex; border-radius: var(--fe-r-pill); background: var(--fe-group); }
.ld-stato select { appearance: none; -webkit-appearance: none; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: inherit; padding: 5px 26px 5px 12px; cursor: pointer; }
.ld-stato::after { content: "▾"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 10px; pointer-events: none; }
.ld-chip { font-size: 13px; font-weight: 500; padding: 5px 12px; border-radius: var(--fe-r-pill); background: var(--fe-group); color: var(--fe-graphite); }
.ld-chip.tardi { background: var(--fe-error-soft); color: var(--fe-error-text); }
.ld-insight { background: var(--fe-surface); border-radius: var(--fe-r-group); box-shadow: var(--fe-shadow-flat); padding: 20px 22px; }
.ld-kick { font-size: 12.5px; font-weight: 600; color: var(--fe-primary-text); }
.ld-insight p { font-size: 19px; line-height: 1.45; letter-spacing: -.01em; margin: 6px 0 0; color: var(--fe-ink); }
.ld-due { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.ld-num { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--fe-error-soft); color: var(--fe-error-text); }
.ld-num.neutro { background: var(--fe-group); color: var(--fe-graphite); }
.ld-composer { padding: 0 18px 8px; display: flex; gap: 8px; }
.ld-composer select { width: 120px; flex: none; }
.ld-det .timeline { padding: 0 18px 12px; }
.ld-det #ld-percorso .card { margin: 0 !important; box-shadow: var(--fe-shadow-flat); }
.ld-info { padding: 4px 0; }
@container (max-width: 640px) {
  .ld-due { grid-template-columns: 1fr; }
  .ld-testa { flex-direction: column; align-items: flex-start; gap: 14px; }
  .gr--kv > span:first-child { width: 120px; }
}
@media (max-width: 760px) { .det__in.ld-det { padding: 18px 16px 40px; } }
.det__azioni { min-width: 0; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.det__azioni::-webkit-scrollbar { display: none; }
.det__azioni .pj-altro-menu { position: fixed; top: 60px; right: 16px; }
.ld-riga-piede .fa-wrap { flex-direction: row; flex-wrap: nowrap; }
.ld-riga-piede .fpill { display: inline-flex; margin: 0; }
@media (max-width: 760px) { .det__bar { gap: 8px; } .det__azioni .btn { padding: 0 12px; } }
.ld-riga-piede .fa-wrap { min-width: 0; gap: 4px; }
.ld-riga-piede .fpill { background: var(--fe-group); color: var(--fe-secondary); border-color: transparent; padding: 2px 8px; }
.ld-riga-piede .fpill.on { background: var(--fe-success-soft); color: var(--fe-success-text); }

/* ---------- Pipeline ---------- */
.pipe-pagina { max-width: none; padding: 4px 0 40px; }
.pipe-testa { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pipe-testa .ap-riassunto b { color: var(--fe-ink); font-weight: 600; }
.pipe-striscia { display: flex; gap: 4px; margin: 0 0 22px; }
.pipe-seg { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pipe-seg i { display: block; height: 8px; border-radius: var(--fe-r-pill); background: var(--c); }
.pipe-seg span { font-size: 12.5px; color: var(--fe-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pipe-seg b { color: var(--fe-ink); font-weight: 600; }
.pipe-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 16px; overflow-x: auto; padding-bottom: 12px; align-items: start; }
.pcol { background: var(--fe-group); border-radius: var(--fe-r-card); padding: 14px 10px 10px; min-height: 240px; transition: background var(--fe-dur-fast), box-shadow var(--fe-dur-fast); }
.pcol.su { background: color-mix(in srgb, var(--c) 12%, var(--fe-group)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 55%, transparent); }
.pcol-t { display: flex; align-items: center; gap: 8px; padding: 0 6px; font-size: 14.5px; font-weight: 600; }
.pcol-t i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.pcol-t em { margin-left: auto; font-style: normal; font-weight: 500; font-size: 13px; color: var(--fe-secondary); }
.pcol-v { padding: 2px 6px 10px 23px; font-size: 13px; color: var(--fe-secondary); font-variant-numeric: tabular-nums; }
.pcol-carte { display: flex; flex-direction: column; gap: 8px; }
.pc {
  background: var(--fe-surface); border-radius: 14px; padding: 12px 12px 10px; box-shadow: var(--fe-shadow-flat); cursor: grab;
  transition: transform var(--fe-dur-fast) var(--fe-ease-out), box-shadow var(--fe-dur-fast);
}
.pc:hover { transform: translateY(-1px); box-shadow: var(--fe-shadow-card); }
.pc.drag { opacity: .45; transform: scale(.98); }
.pc-1 { display: flex; align-items: center; gap: 10px; }
.pc-1 .ld-anello { width: 30px; height: 30px; } .pc-1 .ld-anello b { font-size: 12px; }
.pc-dom { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-2 { font-size: 12.5px; color: var(--fe-secondary); margin: 6px 0 0 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-3 { display: flex; align-items: center; gap: 8px; margin: 8px 0 0 40px; font-size: 12px; }
.pc-data { color: var(--fe-secondary); } .pc-data.tardi { color: var(--fe-error-text); font-weight: 600; } .pc-data.vuota { color: var(--fe-tertiary); }
.pc-rc { color: var(--fe-secondary); }
.pc-val { margin-left: auto; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pcol-vuota { border: 1.5px dashed var(--fe-separator); border-radius: 14px; padding: 22px 0; text-align: center; font-size: 13px; color: var(--fe-tertiary); }
.pipe-aiuto { font-size: 13px; color: var(--fe-tertiary); margin: 8px 0 0; }
@media (max-width: 760px) {
  .pipe-board { grid-auto-columns: 84%; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 12px; }
  .pcol { scroll-snap-align: start; }
  .pipe-striscia span { display: none; }
}
.main:has(.pipe-pagina) { max-width: none; }
.pipe-board { grid-auto-columns: minmax(236px, 1fr); }

/* menu diviso in parti, senza rumore: una parola grigia e un po' d'aria */
.nav { gap: 0; }
.nav-sez { display: flex; flex-direction: column; gap: 2px; }
.nav-sez + .nav-sez { margin-top: 14px; }
.nav-sez .nav-label { padding: 0 12px 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--fe-tertiary); }
.sidebar.collapsed .nav-sez .nav-label { visibility: hidden; height: 6px; padding: 0; }
.sidebar { overflow-y: auto; }

/* ---------- Incassi ---------- */
.inc2-eroe { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: end;
  background: var(--fe-surface); border-radius: var(--fe-r-card); box-shadow: var(--fe-shadow-card); padding: 26px 28px 22px; margin-bottom: 24px; }
.inc2-kick { font-size: 13.5px; font-weight: 500; color: var(--fe-secondary); }
.inc2-num { display: block; font-size: clamp(40px, 5vw, 60px); font-weight: 600; letter-spacing: -.045em; line-height: 1; margin: 10px 0 16px; font-variant-numeric: tabular-nums; }
.inc2-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.inc2-chip { font-size: 13px; font-weight: 500; padding: 5px 12px; border-radius: var(--fe-r-pill); background: var(--fe-group); color: var(--fe-graphite); font-variant-numeric: tabular-nums; }
.inc2-chip.tardi { background: var(--fe-error-soft); color: var(--fe-error-text); font-weight: 600; }
.inc2-chip.ok { background: var(--fe-success-soft); color: var(--fe-success-text); }
.inc2-barre { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; height: 170px; align-items: end; }
.inc2-bar { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.inc2-bar i { display: block; width: 100%; max-width: 30px; border-radius: 6px 6px 3px 3px; background: color-mix(in srgb, var(--fe-primary) 45%, var(--fe-group)); transition: background var(--fe-dur-fast); }
.inc2-bar.ora i { background: var(--fe-primary); }
.inc2-bar:hover i { background: color-mix(in srgb, var(--fe-primary) 85%, black); }
.inc2-bar-v { font-size: 10.5px; color: var(--fe-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.inc2-bar-m { font-size: 11px; color: var(--fe-tertiary); text-transform: capitalize; }
.inc2 .ap-sez-head h2.rosso { color: var(--fe-error-text); }
.inc2 .ap-sez-head .ap-conta { margin-left: auto; color: var(--fe-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.inc2-riga { gap: 12px; }
.inc2-riga + .inc2-riga::before { left: 104px; }
.inc2-data { width: 30px; flex: none; }
.inc2-riga.tardi .inc2-data b, .inc2-riga.tardi .inc2-data { color: var(--fe-error-text); }
.inc2-coda { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.inc2-coda b { font-size: 15.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.inc2-stato { font-style: normal; font-size: 12px; color: var(--fe-secondary); }
.inc2-stato.tardi { color: var(--fe-error-text); font-weight: 600; }
.inc2-stato.fatturato { color: var(--fe-accent-text); }
.inc2-stato.incassato { color: var(--fe-success-text); }
.inc2-del { width: 26px; flex: none; opacity: 0; transition: opacity var(--fe-dur-fast); }
.inc2-riga:hover .inc2-del { opacity: 1; }
@media (max-width: 900px) { .inc2-eroe { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .inc2-riga .pj-mono { display: none; } .inc2-riga + .inc2-riga::before { left: 16px; } .inc2-bar-v { display: none; } .inc2-del { display: none; } }
/* con la parte Admin le voci sono di più: più compatte, così il piede resta sempre visibile */
.nav-item { min-height: 44px; padding: 5px 10px; }
.nav-item svg { width: 28px; height: 28px; padding: 6px; }
.nav-sez + .nav-sez { margin-top: 10px; }
.logo { padding-bottom: 16px; }
.cerca-btn { margin-bottom: 12px; }
.profilo { padding-top: 8px; } .temi { margin-top: 10px; } .firma { margin-top: 8px; }

/* Falcon nella barra laterale: la sua icona vera (static/fenice/falcon-icon.svg) */
.nav-item .nav-img { width: 28px; height: 28px; flex: none; border-radius: var(--fe-r-tile); box-shadow: 0 3px 8px -3px rgba(0,0,0,.35); display: block; }
.sidebar.collapsed .nav-item .nav-img { width: 30px; height: 30px; }

/* Firma nel login (brandbook v2: «Fenice è un prodotto di / Ottobix Intelligence», sempre su due righe) */
.login-firma { margin: 10px 0 0; text-align: center; font-size: 12px; line-height: 1.45; color: var(--fe-tertiary); }
.login-firma b { font-weight: 600; color: var(--fe-secondary); }

/* ============================================================
   Lead 2 · elenco compatto e scheda «a colpo d'occhio»
   ============================================================ */
.profilo-menu > a.menu-voce { font-size: 14px; color: var(--fe-ink); padding: 9px 10px; border-radius: 8px; text-decoration: none; }
.profilo-menu > a.menu-voce:hover { background: var(--fe-primary); color: #fff; }

/* Spazio per la scheda: nascondi l'elenco, oppure anche il menu (scheda intera) */
.vista-btns { display: inline-flex; gap: 2px; margin-left: 4px; }
.vista-btns .icon-btn { width: 32px; height: 32px; border-radius: 9px; color: var(--fe-secondary); }
.vista-btns .icon-btn svg { width: 19px; height: 19px; }
.vista-btns .icon-btn:hover { background: var(--fe-hover); color: var(--fe-ink); }
.vista-btns .icon-btn.on { color: var(--fe-primary-text); background: var(--fe-primary-soft); }
.split { transition: grid-template-columns var(--fe-dur-panel, .36s) var(--fe-ease-out, ease); }
@media (min-width: 761px) {
  .split.senza-lista { grid-template-columns: 0 minmax(0, 1fr); }
  .split.senza-lista .lista { visibility: hidden; overflow: hidden; border-right: 0; }
  .shell.intera { grid-template-columns: 0 1fr !important; }
  .shell.intera .sidebar { visibility: hidden; overflow: hidden; }
  .split.senza-lista .det__in.ld2 { max-width: 1240px; }
}
@media (max-width: 760px) { .vista-btns { display: none; } }

/* Elenco: righe basse, lo stato è un pallino colorato, Flow e Audit solo quando ci sono */
.ld-mono { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--fe-group); color: var(--fe-secondary); font-size: 15px; font-weight: 600; }
.ld-mono.xl { width: 76px; height: 76px; font-size: 32px; letter-spacing: -.03em;
  background: linear-gradient(180deg, var(--fe-surface), var(--fe-group)); box-shadow: inset 0 0 0 .5px var(--fe-separator), var(--fe-shadow-flat); color: var(--fe-graphite); }
.ld-anello.xl { width: 76px; height: 76px; } .ld-anello.xl b { font-size: 28px; }
.ld-riga { padding-top: 11px; padding-bottom: 11px; }
.ld-riga .ld-mono, .ld-riga .ld-anello { margin-top: 1px; }
.ld-riga-piede { gap: 10px; margin-top: 4px; }
.ld-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--fe-graphite); white-space: nowrap; }
.ld-st i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.ld-riga-piede .fpill.off, .ld-riga-piede .fpill.wait { display: none; }
.ld-riga-piede .fpill.on { background: none; padding: 0; font-size: 12px; font-weight: 500; color: var(--fe-success-text); }
.ld-riga-piede .fpill.on .fd { background: var(--fe-success); }
.riga--sel .ld-st { color: var(--fe-ink); }
.lista__az .icon-btn.on { color: var(--fe-primary-text); background: var(--fe-primary-soft); }
.ld-filtri[hidden] { display: none; }

/* Scheda */
.det__in.ld2 { max-width: 1120px; margin: 0 auto; padding: 30px 40px 96px; display: flex; flex-direction: column; gap: 20px; transition: max-width var(--fe-dur-panel, .36s) var(--fe-ease-out, ease); }
.ld2-eroe { display: flex; align-items: center; gap: 20px; }
.ld2-chi { min-width: 0; }
.ld2-chi h1 { font-size: clamp(28px, 3.2vw, 42px); font-weight: 600; letter-spacing: -.045em; line-height: 1.04; margin: 0; overflow-wrap: anywhere; }
.ld2-chi p { margin: 6px 0 0; font-size: 15px; color: var(--fe-secondary); }
.ld2-chi p a { color: inherit; text-decoration: none; border-bottom: .5px solid var(--fe-separator); }
.ld2-chi p a:hover { color: var(--fe-primary-text); }

/* la riga dei fatti: cinque risposte, una occhiata */
.ld2-fatti { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); background: var(--fe-surface); border-radius: var(--fe-r-group); box-shadow: var(--fe-shadow-flat); overflow: hidden; }
.ld2-fatto { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 18px 15px; min-width: 0; }
.ld2-fatto + .ld2-fatto::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; border-left: .5px solid var(--fe-separator); }
.ld2-fatto > span { font-size: 12.5px; color: var(--fe-secondary); }
.ld2-fatto > b { display: flex; min-width: 0; align-items: baseline; gap: 6px; font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--fe-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld2-fatto > b small { font-size: 12.5px; font-weight: 400; color: var(--fe-secondary); letter-spacing: 0; }
.ld2-fatto--stato { cursor: pointer; }
.ld2-fatto--stato b { align-items: center; }
.ld2-fatto--stato b i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.ld2-fatto--stato select { appearance: none; -webkit-appearance: none; border: 0; background: none; font: inherit; color: inherit; padding: 0 16px 0 0; cursor: pointer; min-width: 0; max-width: 100%; field-sizing: content; text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 6px top 55%, right 2px top 55%; background-size: 4px 4px; background-repeat: no-repeat; }
.ld2-fatto--stato select:focus { outline: none; }
.ld2-fatto--data { cursor: pointer; }
.ld2-fatto--data input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.ld2-fatto--data:hover > b, .ld2-fatto--stato:hover select { color: var(--fe-primary-text); }
.ld2-fatto--data.tardi > span, .ld2-fatto--data.tardi > b { color: var(--fe-error-text); }
.ld2-fatto:focus-visible { outline: 2px solid var(--fe-primary); outline-offset: -2px; border-radius: var(--fe-r-group); }

/* corpo: il perché a sinistra, chi è e cosa sappiamo a destra */
.ld2-corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.ld2-main, .ld2-lato { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
@container (min-width: 940px) {
  .ld2-corpo { grid-template-columns: minmax(0, 1fr) 340px; }
  .ld2-lato { position: sticky; top: calc(var(--fe-toolbar-h) + 18px); }
}
.ld2-insight { padding: 4px 4px 0; }
.ld2-insight p { font-size: 21px; line-height: 1.42; letter-spacing: -.015em; margin: 8px 0 0; color: var(--fe-ink); text-wrap: pretty; }
.ld2-cercato { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 4px 18px 14px; }
.ld2-cercato span { width: 100%; font-size: 12.5px; color: var(--fe-secondary); }
.ld2-cercato b { font-size: 22px; font-weight: 600; letter-spacing: -.025em; color: var(--fe-primary-text); }
.ld2-cercato em { font-style: normal; font-size: 13.5px; color: var(--fe-secondary); }
.ld2-prob { align-items: flex-start; font-size: 15px; line-height: 1.5; padding-top: 12px; padding-bottom: 12px; }
.ld2-prob .ld-num { margin-top: 1px; }
.ld2-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 18px 16px; }
.ld2-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: var(--fe-r-pill); background: var(--fe-group); font-size: 14px; color: var(--fe-ink); }
.ld2-chip i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--fe-surface); font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--fe-secondary); }
.ld2 #ld-percorso:empty { display: none; }
.ld2 #ld-percorso .card { margin: 0 !important; border-radius: var(--fe-r-group); box-shadow: var(--fe-shadow-flat); border: 0; }
.ld2-lato .gr--kv > span:first-child { width: 112px; }
.ld2-lato .gr { font-size: 14.5px; min-height: 44px; }
.ld2-attivita .timeline { padding: 0 18px 12px; }
@media (max-width: 760px) {
  .det__in.ld2 { padding: 16px 16px 40px; gap: 16px; }
  .ld2-eroe { gap: 14px; }
  .ld2-fatti { grid-template-columns: 1fr 1fr; }
  .ld2-fatto:nth-child(odd)::before { display: none; }
  .ld2-insight p { font-size: 18px; }
}
@media (max-width: 760px) { .ld-composer select { width: 92px; } .ld-composer .input { min-width: 0; } .ld2-lato .gr--kv > span:first-child { width: 100px; } }

/* ============================================================
   Progetti 2 · liste smart come Promemoria, scheda come quella del lead
   ============================================================ */
.pj-smart { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pj-smart-t { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; gap: 6px 8px;
  border: 0; text-align: left; font: inherit; cursor: pointer; padding: 10px 10px 9px; border-radius: 12px;
  background: var(--fe-group); color: var(--fe-ink); transition: transform var(--fe-dur-fast, .2s) var(--fe-ease-spring, ease), background .2s; }
.pj-smart-t i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--k); color: #fff; }
.pj-smart-t i svg { width: 15px; height: 15px; }
.pj-smart-t b { justify-self: end; font-size: 20px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pj-smart-t span { grid-column: 1 / -1; font-size: 12.5px; font-weight: 500; color: var(--fe-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-smart-t.rosso { --k: var(--fe-error); } .pj-smart-t.ambra { --k: var(--fe-accent); } .pj-smart-t.blu { --k: var(--fe-info, #3B6FF5); }
.pj-smart-t:hover { background: var(--fe-sel); }
.pj-smart-t:active { transform: scale(.97); }
.pj-smart-t.on { background: var(--k); }
.pj-smart-t.on b, .pj-smart-t.on span { color: #fff; }
.pj-smart-t.on i { background: rgba(255,255,255,.25); }
.pj-smart-t.zero b { color: var(--fe-tertiary); }
.lista__piede { padding: 10px 20px 14px; border-top: .5px solid var(--fe-separator); font-size: 12px; color: var(--fe-tertiary); }
.lista__piede:empty { display: none; }

.det__in.pj2 { max-width: 1120px; }
.pj2-testa { display: flex; flex-direction: column; gap: 4px; }
.pj2-cliente { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--fe-secondary); }
.pj2-cliente .pj-mono { width: 22px; height: 22px; font-size: 11px; border-radius: 7px; margin: 0; }
.pj2-testa h1 { font-size: clamp(28px, 3.2vw, 42px); font-weight: 600; letter-spacing: -.045em; line-height: 1.04; margin: 4px 0 0; }
.pj2-testa p { margin: 2px 0 0; font-size: 15px; color: var(--fe-secondary); }

/* la situazione: una sola frase grande, poi il messaggio del cliente come in Messaggi */
.pj2-eroe { --k: var(--fe-success); background: var(--fe-surface); border-radius: var(--fe-r-card); box-shadow: var(--fe-shadow-card); padding: 22px 24px 18px; display: flex; flex-direction: column; gap: 14px; }
.pj2-eroe.noi { --k: var(--fe-error); background: linear-gradient(180deg, color-mix(in srgb, var(--fe-error) 7%, var(--fe-surface)), var(--fe-surface) 70%); }
.pj2-eroe.cliente { --k: var(--fe-accent); }
.pj2-eroe.chiuso { --k: var(--fe-tertiary); }
.pj2-kick { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--k); }
.pj2-eroe.cliente .pj2-kick { color: var(--fe-accent-text); }
.pj2-kick i { width: 8px; height: 8px; border-radius: 50%; background: var(--k); }
.pj2-eroe.noi .pj2-kick i { animation: fe-pulsa 2s ease-in-out infinite; box-shadow: 0 0 0 0 color-mix(in srgb, var(--fe-error) 50%, transparent); }
@keyframes fe-pulsa { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fe-error) 45%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.pj2-azione { font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; letter-spacing: -.03em; line-height: 1.2; color: var(--fe-ink); margin-top: -6px; text-wrap: balance; }
.pj2-sotto { font-size: 14.5px; color: var(--fe-secondary); margin-top: -6px; }
.pj2-bolla { align-self: flex-start; max-width: min(640px, 100%); background: var(--fe-group); border-radius: 18px 18px 18px 6px; padding: 12px 16px 12px; }
.pj2-bolla-da { font-size: 12.5px; color: var(--fe-secondary); margin-bottom: 4px; }
.pj2-bolla-testo { font-size: 15.5px; line-height: 1.5; color: var(--fe-ink); white-space: pre-line; }
.pj2-link { border: 0; background: none; padding: 0; margin-top: 8px; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--fe-primary-text); cursor: pointer; }
.pj2-fatto { display: flex; gap: 8px; }
.pj2-fatto .input { flex: 1; min-width: 0; height: 40px; border-radius: var(--fe-r-field); background: var(--fe-group); border: 1px solid transparent; }
.pj2-fatto .input:focus { background: var(--fe-surface); border-color: var(--fe-primary); }
.pj2-chi { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: .5px solid var(--fe-separator); }
.pj2-chi > span { font-size: 13px; color: var(--fe-secondary); }
.pj2-seg { margin: 0; display: inline-flex; }
.pj2-seg button { padding: 5px 14px; }
.pj2-eroe .pj-attesa { margin: 0; border-radius: var(--fe-r-box); }

.ld2-fatto .ld2-nota { font-size: 12.5px; color: var(--fe-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld2-fatto.vicina > b { color: var(--fe-primary-text); }
.ld2-fatto.fermo > b { color: var(--fe-accent-text); }

.pj2-brief { padding: 2px 4px 0; }
.pj2-brief .pj-bf-lead { font-size: 20px; line-height: 1.45; letter-spacing: -.015em; margin: 8px 0 14px; }
.pj2-ai { background: var(--fe-accent-soft); border-radius: var(--fe-r-group); padding: 16px 20px; }
.pj2-ai-k { font-size: 12.5px; font-weight: 600; color: var(--fe-accent-text); }
.pj2-ai p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; }
.pj2-mail { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; justify-content: space-between; }
.pj2-mail:hover { background: var(--fe-hover); }
.pj2-mail + .pj2-mail::before { content: ""; position: absolute; top: 0; left: 18px; right: 0; border-top: .5px solid var(--fe-separator); }
.pj2-mail-c { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pj2-mail-c b { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj2-mail-c small { font-size: 12.5px; color: var(--fe-secondary); }
.pj2-mail .pj-chev svg { width: 15px; height: 15px; color: var(--fe-tertiary); }
.pj2-vuoto { margin: 0; padding: 4px 18px 18px; font-size: 14px; color: var(--fe-secondary); }
.pj2-crono { list-style: none; margin: 0; padding: 0 18px 12px; }
.pj2-crono li { display: grid; grid-template-columns: 78px 1fr; gap: 12px; padding: 10px 0; border-top: .5px solid var(--fe-separator); }
.pj2-crono li:first-child { border-top: 0; }
.pj2-crono span { font-size: 13px; color: var(--fe-secondary); font-variant-numeric: tabular-nums; }
.pj2-crono p { margin: 0; font-size: 14.5px; line-height: 1.45; }
.pj2-tappe .pj-tappe { padding: 0 18px 10px; margin: 0; }
.pj2-note { margin: 0; padding: 0 18px 16px; font-size: 14.5px; line-height: 1.5; white-space: pre-line; }
.pj2-unisci { padding: 8px 18px 16px; }
.ld2-lato .pj-card { margin: 0; }
@media (max-width: 760px) {
  .pj2-eroe { padding: 18px 16px 14px; }
  .pj2-chi { flex-wrap: wrap; }
  .pj-smart-t b { font-size: 18px; }
}
.pj2-eroe .pj-attesa { background: var(--fe-group); border: 0; padding: 12px 16px; border-radius: var(--fe-r-box); }
.pj2-eroe .pj-attesa > .pj-ric-k, .pj2-eroe .pj-attesa-cosa { display: none; }
.pj2-tappe .pj-tappa { grid-template-columns: 12px 1fr auto; gap: 2px 10px; padding: 10px 0; }
.pj2-tappe .pj-tappa-data { grid-column: 2; grid-row: 2; font-size: 12.5px; color: var(--fe-secondary); }
.pj2-tappe .pj-tappa-cosa { grid-column: 2; grid-row: 1; font-size: 14.5px; }
.pj2-tappe .pj-tappa-quando { grid-column: 3; grid-row: 1; font-size: 12.5px; }
.pj2-tappe .pj-tappa-dot { grid-row: 1; align-self: center; }
@container (min-width: 940px) { .ld2-corpo.solo { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   Clienti 2 · favicon dell'azienda, scheda come Lead e Progetti, conversazione come Mail
   ============================================================ */
.cl-ico { position: relative; flex: none; width: 38px; height: 38px; border-radius: 10px; overflow: hidden;
  display: grid; place-items: center; background: var(--fe-group); box-shadow: inset 0 0 0 .5px var(--fe-separator); }
.cl-ico b { font-size: 15px; font-weight: 600; color: var(--fe-secondary); }
.cl-ico img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 7px; box-sizing: border-box; background: #fff; opacity: 0; transition: opacity .25s; }
.cl-ico.ok img { opacity: 1; }
.cl-ico.ok b { visibility: hidden; }
.cl-ico.xl { width: 76px; height: 76px; border-radius: 20px; box-shadow: inset 0 0 0 .5px var(--fe-separator), var(--fe-shadow-flat); }
.cl-ico.xl b { font-size: 32px; letter-spacing: -.03em; color: var(--fe-graphite); }
.cl-ico.xl img { padding: 14px; }
.cl-riga { padding-top: 11px; padding-bottom: 11px; }
.cl-riga .cl-ico { margin-top: 1px; }
.cl-conta { font-size: 12px; color: var(--fe-tertiary); margin-top: 3px; }
.riga--sel .cl-conta { color: var(--fe-secondary); }

.cl2-cerca { padding: 0 18px 10px; }
.cl2-cerca .pj-search { height: 34px; background: var(--fe-group); border: 0; border-radius: var(--fe-r-field); width: 100%; }
.cl2-mail { position: relative; }
.cl2-mail + .cl2-mail::before { content: ""; position: absolute; top: 0; left: 58px; right: 0; border-top: .5px solid var(--fe-separator); }
.cl2-mail-t { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 18px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--fe-ink); }
.cl2-mail-t:hover { background: var(--fe-hover); }
.cl2-dir { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 600; }
.cl2-mail.in .cl2-dir { background: var(--fe-info-soft, rgba(59,111,245,.12)); color: var(--fe-info-text, #3B6FF5); }
.cl2-mail.out .cl2-dir { background: var(--fe-primary-soft); color: var(--fe-primary-text); }
.cl2-mail-c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cl2-mail-c b { font-size: 14.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl2-mail-c small { font-size: 12.5px; color: var(--fe-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl2-mail-t em { flex: none; font-style: normal; font-size: 12.5px; color: var(--fe-secondary); }
.cl2-mail.aperta .cl2-mail-c b { white-space: normal; font-weight: 600; }
.cl2-mail-corpo { padding: 0 18px 16px 58px; }
.cl2-mail-meta { font-size: 12.5px; color: var(--fe-secondary); margin-bottom: 8px; overflow-wrap: anywhere; }
.cl2-mail-testo { font-size: 14.5px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; background: var(--fe-group); border-radius: 14px; padding: 12px 14px; max-height: 420px; overflow: auto; }
.cl2-mail.out .cl2-mail-testo { background: color-mix(in srgb, var(--fe-primary) 7%, var(--fe-surface)); }
.cl2-altre { display: flex; justify-content: center; padding: 6px 0 14px; }
.cl2-altre [hidden] { display: none; }
.cl2-note { display: block; width: calc(100% - 36px); margin: 0 18px 16px; min-height: 96px; resize: vertical; border: 1px solid transparent; border-radius: var(--fe-r-field);
  background: var(--fe-group); padding: 10px 12px; font: inherit; font-size: 14.5px; line-height: 1.5; color: var(--fe-ink); box-sizing: border-box; }
.cl2-note:focus { outline: none; background: var(--fe-surface); border-color: var(--fe-primary); }
.cl2-muto { color: var(--fe-tertiary); font-size: 13.5px; }
.cl2-alias { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 10px; }
.cl2-alias .ld2-chip { padding: 5px 6px 5px 12px; font-size: 13px; }
.cl2-x { border: 0; background: none; cursor: pointer; color: var(--fe-tertiary); font-size: 16px; line-height: 1; padding: 0 4px; }
.cl2-x:hover { color: var(--fe-error-text); }
.cl2-alias-add { display: flex; gap: 8px; padding: 0 18px 16px; }
.cl2-alias-add .input { flex: 1; min-width: 0; height: 34px; }
@media (max-width: 760px) { .cl2-mail-corpo { padding-left: 18px; } }

/* ============================================================
   Daily Tasks · i compiti dell'ODG, come Promemoria
   ============================================================ */
.ct-pagina { max-width: 860px; }
.ct-smart { margin: 4px 0 22px; }
.pj-smart-t.verde { --k: var(--fe-success); }
.ct-corpo { display: flex; flex-direction: column; gap: 16px; }
.ct-gruppo-t { display: flex; align-items: center; gap: 10px; padding: 14px 18px 6px; }
.ct-gruppo-t .pj-mono { width: 26px; height: 26px; font-size: 12px; border-radius: 8px; margin: 0; }
.ct-gruppo-t h3 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.ct-n { font-size: 13px; color: var(--fe-tertiary); font-variant-numeric: tabular-nums; }
.ct-link { margin-left: auto; font-size: 13.5px; font-weight: 500; color: var(--fe-primary-text); text-decoration: none; }
.ct-lista { padding: 2px 0 6px; }
.ct-riga { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 11px 18px; transition: opacity .35s var(--fe-ease-out, ease); }
.ct-riga + .ct-riga::before { content: ""; position: absolute; top: 0; left: 52px; right: 0; border-top: .5px solid var(--fe-separator); }
.ct-cerchio { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; border: 1.6px solid var(--fe-tertiary); background: none;
  display: grid; place-items: center; cursor: pointer; padding: 0; color: transparent; transition: background .2s, border-color .2s, transform .2s var(--fe-ease-spring, ease); }
.ct-cerchio svg { width: 13px; height: 13px; }
.ct-cerchio:hover { border-color: var(--fe-primary); }
.ct-cerchio:active { transform: scale(.88); }
.ct-riga.fatto .ct-cerchio { background: var(--fe-primary); border-color: var(--fe-primary); color: #fff; }
.ct-c { flex: 1; min-width: 0; }
.ct-c p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--fe-ink); text-wrap: pretty; }
.ct-riga.fatto .ct-c p { color: var(--fe-tertiary); }
.ct-c small { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 12.5px; color: var(--fe-secondary); }
.ct-scade { font-weight: 500; }
.ct-scade.ambra { color: var(--fe-accent-text); }
.ct-scade.rosso { color: var(--fe-error-text); }
.ct-riservato { color: var(--fe-accent-text); font-weight: 500; }
.ct-vuoto { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 56px 20px; text-align: center; color: var(--fe-secondary); }
.ct-vuoto img { width: 64px; height: 64px; border-radius: var(--fe-r-tile); margin-bottom: 8px; }
.ct-vuoto b { font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--fe-ink); }
.ct-nota { margin: 22px 4px 0; font-size: 12.5px; color: var(--fe-tertiary); }
.ct-card .gruppo__testa a { color: var(--fe-primary-text); text-decoration: none; }
@media (max-width: 760px) { .ct-riga { padding: 12px 16px; } .ct-c p { font-size: 15.5px; } }
.ct-pagina .ap-testa { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.ct-prog { color: var(--fe-primary-text); text-decoration: none; font-weight: 500; }
.ct-prog:hover { text-decoration: underline; }