/* PDD CHIARO Fase 2 — bacheca, viste e scheda (owner: pipeline.js) */

/* ============================================================
   Selettore pipeline compatto: Qualifica leads | Affari | Servizi ▾
   (spegnibile con «Mostra tutte le tab»: tornano le tab della Fase 1)
   ============================================================ */
.kanban-testata.con-selettore { gap: 8px; }
.pl-cambia-sel { margin-left: auto; }

.pl-selettore {
  position: relative;
  display: inline-flex; align-items: center; gap: 2px; max-width: 100%;
  height: 36px; padding: 3px; border-radius: 8px; background: var(--n-100);
}
.pl-seg {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  height: 30px; padding: 0 10px; border: none; border-radius: 6px;
  background: transparent; color: var(--n-700);
  font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: background-color .12s ease, box-shadow .12s ease, color .12s ease;
}
.pl-seg:hover { color: var(--n-900); background: color-mix(in srgb, var(--n-0) 60%, transparent); }
.pl-seg.attiva { background: var(--n-0); color: var(--n-900); font-weight: 600; box-shadow: var(--sh-1); }
.pl-seg .tab-nome { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.pl-seg .tab-conta { background: var(--n-0); }
.pl-seg.attiva .tab-conta { background: var(--n-100); }
.pl-seg-fam { color: var(--n-500); font-weight: 500; }
.pl-seg-sep { color: var(--n-400); }
.pl-seg-freccia { font-size: 10px; color: var(--n-500); }
.pl-seg-servizi { flex-shrink: 1; min-width: 88px; }
.pl-seg-servizi .tab-pallino { background: var(--fam); }

.pl-popover {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: max(0px, calc(100% - 340px));
  display: flex; flex-direction: column;
  width: min(340px, calc(100vw - 32px)); max-height: min(70dvh, 520px);
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: 12px; box-shadow: var(--sh-4);
}
.pl-popover[hidden] { display: none; }
.pl-pop-cerca { padding: 8px; border-bottom: 1px solid var(--n-200); }
.pl-pop-cerca input { height: 34px; padding: 0 10px; border-radius: 8px; font-size: 13px; }
.pl-pop-corpo { overflow-y: auto; padding: 2px 6px 8px; }
.pl-pop-gruppo[hidden], .pl-voce[hidden], .pl-pop-vuoto[hidden] { display: none; }
.pl-pop-tit {
  display: flex; align-items: center; gap: 6px; padding: 10px 8px 4px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--n-500);
}
.pl-pop-tit .tab-pallino { width: 6px; height: 6px; }
.pl-voce {
  display: flex; align-items: center; gap: 8px; width: 100%;
  height: 32px; padding: 0 8px; border: none; border-radius: 6px;
  background: transparent; color: var(--n-700); text-align: left; font-size: 13px; font-weight: 500;
}
.pl-voce:hover { background: var(--n-100); color: var(--n-900); }
.pl-voce.attiva { background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
.pl-voce .tab-nome { flex: 1; min-width: 0; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-pop-vuoto { padding: 16px 8px; text-align: center; font-size: 13px; color: var(--n-500); }

/* ============================================================
   Interruttore Vista: Bacheca | Lista | Coda
   ============================================================ */
.pl-vista {
  display: inline-flex; align-items: center; gap: 2px; margin-left: auto;
  height: 36px; padding: 3px; border-radius: 8px; background: var(--n-100);
}
.pl-vista button {
  height: 30px; padding: 0 12px; border: none; border-radius: 6px;
  background: transparent; color: var(--n-700); font-size: 13px; font-weight: 500;
  transition: background-color .12s ease, box-shadow .12s ease, color .12s ease;
}
.pl-vista button:hover { color: var(--n-900); }
.pl-vista button.attiva { background: var(--n-0); color: var(--n-900); font-weight: 600; box-shadow: var(--sh-1); }

/* ============================================================
   Elementi comuni di Lista e Coda
   ============================================================ */
.pl-corpo { min-width: 0; }
.pl-tel {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  color: var(--brand-700); font-weight: 500; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none;
}
.pl-tel:hover { text-decoration: underline; }
.pl-tel .ic { width: 12px; height: 12px; flex-shrink: 0; }
.pl-tenue { color: var(--n-500); }
.pl-freccia {
  width: 7px; height: 7px; flex-shrink: 0; margin: 0 2px;
  border-right: 2px solid var(--n-500); border-bottom: 2px solid var(--n-500);
  transform: rotate(-45deg); transition: transform .18s ease;
}
[aria-expanded="true"] > .pl-freccia { transform: rotate(45deg); }
.card-urg.nuovo { background: var(--brand-50); color: var(--brand-700); }

/* chip «da N gg» (card, Lista): ambra oltre la soglia SLA, rosso oltre il doppio */
.card-chip-sla { font-variant-numeric: tabular-nums; }
.card-chip-sla.sla-ambra { background: var(--warn-bg); color: var(--warn-ink); }
.card-chip-sla.sla-rosso { background: var(--err-bg); color: var(--err-ink); }

/* ============================================================
   Vista Lista
   ============================================================ */
.pl-tabella-scorri {
  overflow-x: auto; background: var(--n-0);
  border: 1px solid var(--n-200); border-radius: 12px;
}
.pl-tabella {
  width: 100%; min-width: 880px; border-collapse: separate; border-spacing: 0;
  font-size: 13px; color: var(--n-900);
}
.pl-tabella thead th {
  position: sticky; top: 0; z-index: 1; padding: 0; text-align: left;
  background: var(--n-25); border-bottom: 1px solid var(--n-200);
}
.pl-tabella thead th button {
  display: inline-flex; align-items: center; gap: 4px; width: 100%; height: 36px; padding: 0 12px;
  border: none; background: none; text-align: left; white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--n-500);
}
.pl-tabella thead th button:hover { color: var(--n-900); }
.pl-tabella thead th[aria-sort="ascending"] button,
.pl-tabella thead th[aria-sort="descending"] button { color: var(--n-900); }
.pl-ord { color: var(--brand-600); font-size: 12px; }

.pl-gruppo-testa th {
  padding: 0; text-align: left;
  background: color-mix(in srgb, var(--fase) 7%, #fff);
  border-top: 1px solid var(--n-200);
  box-shadow: inset 3px 0 0 var(--fase);
}
.pl-tabella > tbody:first-of-type .pl-gruppo-testa th { border-top: none; }
.pl-gruppo-testa button {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 12px 0 14px;
  border: none; background: none; text-align: left; font-size: 13px; font-weight: 600; color: var(--n-900);
}
.pl-gruppo-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-gruppo-conta {
  padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--fase) 14%, #fff);
  color: color-mix(in srgb, var(--fase) 50%, #101828);
}
.pl-gruppo-testa .colonna-gate { display: inline-flex; margin-left: 4px; font-weight: 400; }
@supports not (color: color-mix(in srgb, red 50%, white)) {
  .pl-gruppo-testa th { background: var(--n-50); }
  .pl-gruppo-conta { background: var(--n-100); color: var(--n-900); }
}

.pl-riga { cursor: pointer; }
.pl-riga td {
  height: 40px; padding: 0 12px; max-width: 260px;
  border-top: 1px solid var(--n-100);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
}
.pl-riga:hover td { background: var(--n-50); }
.pl-riga:focus-visible { outline: 2px solid var(--brand-600); outline-offset: -2px; }
.pl-riga.urg-scaduta td:first-child { box-shadow: inset 3px 0 0 var(--urg-scaduta); }
.pl-riga.urg-oggi td:first-child { box-shadow: inset 3px 0 0 var(--urg-oggi); }
.pl-riga.urg-nuovo td:first-child { box-shadow: inset 3px 0 0 var(--urg-nuovo); }
.pl-riga.chiusa td { color: var(--n-500); }
.pl-c-nome { font-weight: 600; }
.pl-c-prossima { color: var(--n-700); }
.pl-c-prossima.scaduta { color: var(--err-ink); font-weight: 500; }
.pl-c-num { font-variant-numeric: tabular-nums; color: var(--n-700); }
.pl-c-chi, .pl-c-serv { color: var(--n-700); }
.pl-riga .badge { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-altre td { padding: 6px 12px; text-align: center; border-top: 1px solid var(--n-100); }

/* ============================================================
   Vista Coda
   ============================================================ */
.pl-corpo-coda {
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: 12px; overflow: hidden;
}
.pl-coda-testa {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--n-25); border-bottom: 1px solid var(--n-200);
  font-size: 13px; color: var(--n-700);
}
.pl-coda-conti strong { color: var(--n-900); font-variant-numeric: tabular-nums; }
.pl-coda-conti strong.pl-rosso { color: var(--err-ink); }
.pl-coda-aiuto { font-size: 12px; color: var(--n-500); }
.pl-kbd {
  display: inline-block; margin: 0 2px; padding: 1px 5px; border-radius: 4px;
  background: var(--n-100); border: 1px solid var(--n-300);
  font-size: 11px; font-weight: 600; line-height: 1.3; color: var(--n-700);
}

.pl-coda-gruppo { --cg: var(--n-400); }
.pl-cg-ritardo { --cg: var(--urg-scaduta); }
.pl-cg-oggi { --cg: var(--urg-oggi); }
.pl-cg-nuovi { --cg: var(--urg-nuovo); }
.pl-coda-gtit { margin: 0; font-size: 13px; }
.pl-coda-gtit button {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 16px;
  border: none; border-top: 1px solid var(--n-200); background: var(--n-50);
  box-shadow: inset 3px 0 0 var(--cg); text-align: left;
  font-size: 13px; font-weight: 600; color: var(--n-900);
}
.pl-coda-gruppo:first-of-type .pl-coda-gtit button { border-top: none; }
.pl-cg-conta {
  padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--cg) 14%, #fff); color: color-mix(in srgb, var(--cg) 55%, #101828);
}
.pl-coda-righe[hidden] { display: none; }
.pl-coda-riga {
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: 64px minmax(160px, 1.6fr) minmax(130px, 160px) minmax(140px, 1fr) 44px 28px minmax(120px, .8fr);
  height: 44px; padding: 0 16px; border-top: 1px solid var(--n-100);
  font-size: 13px; cursor: pointer;
}
.pl-coda-riga:hover { background: var(--n-50); }
.pl-coda-riga:focus-visible { outline: 2px solid var(--brand-600); outline-offset: -2px; background: var(--brand-50); }
.pl-coda-riga.urg-scaduta { box-shadow: inset 3px 0 0 var(--urg-scaduta); }
.pl-coda-riga.urg-oggi { box-shadow: inset 3px 0 0 var(--urg-oggi); }
.pl-coda-riga.urg-nuovo { box-shadow: inset 3px 0 0 var(--urg-nuovo); }
.pl-coda-riga > span { min-width: 0; }
.pl-c-urg .card-urg { display: inline-block; }
.pl-coda-riga .pl-c-nome { font-weight: 600; color: var(--n-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-c-fase .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-c-chi { display: flex; align-items: center; gap: 6px; }
.pl-c-chi .avatar {
  width: 22px; height: 22px; flex-shrink: 0; font-size: 10px; font-weight: 600;
  background: var(--brand-50); color: var(--brand-700);
}
.pl-c-chi-nome { font-size: 12px; color: var(--n-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pl-esito {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; color: var(--n-500);
}
.pl-esito .ic { width: 15px; height: 15px; }
.pl-esito-si { color: var(--ok-ink); }
.pl-esito-rich { color: var(--brand-600); }
.pl-esito-ko { color: var(--err-ink); }
/* cornetta barrata: nessun contatto */
.pl-esito-no::after {
  content: ''; position: absolute; left: 50%; top: 1px; bottom: 1px; width: 1.5px;
  background: currentColor; transform: rotate(45deg); border-radius: 1px;
}

/* ============================================================
   Telefono: segmenti scorrevoli, Coda su due righe
   ============================================================ */
@media (max-width: 820px) {
  .pl-selettore { flex-wrap: wrap; height: auto; }
  .pl-seg .tab-nome { max-width: 140px; }
  .pl-seg-fam, .pl-seg-sep { display: none; }
  .pl-popover { position: fixed; top: auto; left: 16px; right: 16px; bottom: 16px; width: auto; }
  .pl-cambia-sel { margin-left: 0; }
  .pl-vista { margin-left: 0; }
  .pl-coda-aiuto { display: none; }
  .pl-coda-riga {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-areas: "urg nome tent" "urg tel tel" "urg fase fase";
    height: auto; min-height: 44px; padding: 8px 12px; row-gap: 4px; column-gap: 8px;
  }
  .pl-coda-riga .pl-c-urg { grid-area: urg; }
  .pl-coda-riga .pl-c-nome { grid-area: nome; }
  .pl-coda-riga .pl-c-tel { grid-area: tel; }
  .pl-coda-riga .pl-c-fase { grid-area: fase; }
  .pl-coda-riga .pl-c-tent { grid-area: tent; justify-self: end; }
  .pl-coda-riga .pl-c-esito, .pl-coda-riga .pl-c-chi { display: none; }
}
/* tablet in verticale (rail a sole icone): sette colonne non ci stanno, «Chi» esce */
@media (min-width: 821px) and (max-width: 900px) {
  .pl-coda-riga .pl-c-chi { display: none; }
  .pl-coda-riga { grid-template-columns: 56px minmax(0, 1.6fr) minmax(0, 150px) minmax(0, 1fr) 44px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .pl-freccia, .pl-seg, .pl-vista button { transition: none; }
}

/* ============================================================
   Scheda come pannello laterale destro (spegnibile dal menu ⋯:
   si torna alla modale centrata). Le modali impilate sopra
   (commento, esiti, vendita) restano centrate.
   ============================================================ */
.modal-overlay.scheda-laterale {
  justify-content: flex-end; align-items: stretch; padding: 0; overflow: hidden;
  background: rgba(16, 24, 40, .32); backdrop-filter: none; -webkit-backdrop-filter: none;
}
[data-theme="dark"] .modal-overlay.scheda-laterale { background: rgba(0, 0, 0, .5); }
.scheda-laterale > .modal-scheda {
  width: min(880px, calc(100vw - 72px)); max-width: none;
  height: 100dvh; max-height: 100dvh;
  border-radius: 16px 0 0 16px; box-shadow: var(--sh-4);
  animation: scheda-entra 240ms var(--ease, cubic-bezier(.2, .8, .2, 1));
}
@keyframes scheda-entra { from { transform: translateX(100%); } to { transform: none; } }
.modal-overlay.senza-ingresso, .senza-ingresso > .modal { animation: none; }
.modal-scheda:focus { outline: none; }

/* testata: dove si trova, ‹ n di N ›, menu ⋯ e X */
.modal-scheda .modal-head { gap: 12px; }
.modal-scheda .modal-head h3 { flex: 1; }
.scheda-dove { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scheda-testa-dx { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.scheda-nav { display: inline-flex; align-items: center; gap: 2px; margin-right: 4px; }
.scheda-nav .btn-icona { font-size: 18px; line-height: 1; }
.scheda-nav-pos { padding: 0 4px; font-size: 12px; color: var(--n-500); font-variant-numeric: tabular-nums; white-space: nowrap; }
.scheda-opzioni { position: relative; }
.scheda-opzioni-menu {
  position: absolute; z-index: 5; top: calc(100% + 6px); right: 0; min-width: 220px; padding: 4px;
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: 10px; box-shadow: var(--sh-4);
}
.scheda-opzioni-menu[hidden] { display: none; }
.scheda-opzioni-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 10px;
  border: none; border-radius: 6px; background: transparent; color: var(--n-900);
  font-size: 13px; text-align: left; cursor: pointer;
}
.scheda-opzioni-menu button:hover, .scheda-opzioni-menu button:focus-visible { background: var(--n-100); }
.scheda-opzioni-menu button::before { content: ''; width: 14px; flex-shrink: 0; color: var(--brand-600); font-weight: 700; }
.scheda-opzioni-menu button[aria-checked="true"]::before { content: '✓'; }
.scheda-piede-sx { display: flex; align-items: center; gap: 12px; }
.scheda-piede .btn .kbd {
  margin-left: 6px; padding: 0 5px; font-size: 10px;
  background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .35); color: inherit;
}

/* striscia «Percorso del cliente» sotto l'hero */
.scheda-percorso {
  flex: none; display: flex; align-items: center; gap: 4px; padding: 6px 20px;
  overflow-x: auto; scrollbar-width: none; background: var(--n-0); border-bottom: 1px solid var(--n-200);
}
.scheda-percorso::-webkit-scrollbar { display: none; }
.scheda-percorso[hidden] { display: none; }
.perc-tit {
  flex-shrink: 0; margin-right: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--n-500);
}
.perc-chip {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; height: 24px; padding: 0 8px;
  border: 1px solid var(--n-200); border-radius: 999px; background: var(--n-0); color: var(--n-700);
  font-size: 11px; font-weight: 500; white-space: nowrap; cursor: pointer;
}
.perc-chip:hover:not([disabled]) { background: var(--n-50); border-color: var(--n-300); color: var(--n-900); }
.perc-chip.persa { color: var(--n-500); }
.perc-chip.questa, .perc-chip.questa:disabled {
  background: var(--brand-50); border-color: var(--brand-100); color: var(--brand-700); font-weight: 600; cursor: default; opacity: 1;
}
.perc-chip em { font-style: normal; font-weight: 500; }
.perc-pallino { width: 6px; height: 6px; border-radius: 50%; background: var(--fam); flex-shrink: 0; }
.perc-sep { flex-shrink: 0; font-size: 12px; color: var(--n-400); }

/* ============================================================
   Scheda per contesto (Lead, Affare, Servizio)
   ============================================================ */
.ctx-fase { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.fase-pill-wrap { position: relative; }
.fase-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--fase) 45%, var(--n-200)); border-radius: 999px;
  background: color-mix(in srgb, var(--fase) 14%, var(--n-0));
  color: color-mix(in srgb, var(--fase) 50%, var(--n-900));
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: box-shadow .12s ease;
}
.fase-pill strong { font-weight: 600; }
.fase-pill:hover:not([disabled]) { box-shadow: var(--sh-2); }
.fase-pill[disabled] { cursor: default; opacity: 1; }
.fase-pill-pallino { width: 8px; height: 8px; border-radius: 50%; background: var(--fase); flex-shrink: 0; }
.fase-pill-freccia { font-size: 10px; }
.fase-menu {
  position: absolute; z-index: 5; top: calc(100% + 6px); left: 0;
  width: min(300px, calc(100vw - 48px)); max-height: min(60dvh, 440px); overflow-y: auto; padding: 4px;
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: 12px; box-shadow: var(--sh-4);
}
.fase-menu[hidden] { display: none; }
.fase-menu-tit {
  padding: 8px 8px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--n-500);
}
.fase-voce {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 4px 8px;
  border: none; border-radius: 6px; background: transparent; color: var(--n-900);
  font-size: 13px; text-align: left; cursor: pointer;
}
.fase-voce:hover:not([disabled]), .fase-voce:focus-visible { background: var(--n-100); }
.fase-voce.fatta { color: var(--n-500); }
.fase-voce.attuale { background: color-mix(in srgb, var(--fase) 14%, var(--n-0)); font-weight: 600; cursor: default; }
.fase-voce[disabled]:not(.attuale) { opacity: .55; cursor: not-allowed; }
.fase-voce-pallino { width: 8px; height: 8px; border-radius: 50%; background: var(--fase); flex-shrink: 0; }
.fase-voce-nome { flex: 1; min-width: 0; }
.fase-voce-qui { font-size: 11px; font-weight: 500; color: var(--n-500); }
.fase-voce-ok { color: var(--ok-ink); }
.fase-voce .ic { width: 13px; height: 13px; color: var(--n-500); flex-shrink: 0; }
.fase-prossima {
  height: 28px; padding: 0 10px; border: 1px dashed var(--n-300); border-radius: 999px;
  background: var(--n-0); color: var(--n-700); font-size: 12px; font-weight: 500; cursor: pointer;
}
.fase-prossima:hover:not([disabled]) { border-style: solid; border-color: var(--fase); color: var(--n-900); }
.fase-prossima[disabled] { opacity: .55; cursor: not-allowed; }
@supports not (color: color-mix(in srgb, red 50%, white)) {
  .fase-pill { background: var(--n-100); color: var(--n-900); border-color: var(--n-200); box-shadow: inset 3px 0 0 var(--fase); }
  .fase-voce.attuale { background: var(--n-100); }
}

/* tre colonne logiche: Lavoro e Storia a sinistra, Dati cliente a destra;
   sotto i 1100px diventano tre schede interne */
.ctx-tabs {
  display: none; gap: 2px; height: 36px; padding: 3px; margin-bottom: 12px;
  border-radius: 8px; background: var(--n-100);
}
.ctx-tabs button {
  flex: 1; height: 30px; border: none; border-radius: 6px; background: transparent;
  color: var(--n-700); font-size: 13px; font-weight: 500; cursor: pointer;
}
.ctx-tabs button[aria-selected="true"] { background: var(--n-0); color: var(--n-900); font-weight: 600; box-shadow: var(--sh-1); }
.ctx-griglia {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr; grid-template-areas: "lavoro dati" "storia dati"; gap: 14px 20px; align-items: start;
}
.ctx-pan { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ctx-lavoro { grid-area: lavoro; }
.ctx-dati { grid-area: dati; }
.ctx-storia { grid-area: storia; }
.ctx-pan:empty { display: none; }
@media (max-width: 1100px) {
  .ctx-tabs { display: flex; }
  .ctx-griglia { display: block; }
  .scheda-ctx .ctx-pan { display: none; }
  .scheda-ctx[data-tab-attiva="lavoro"] .ctx-lavoro,
  .scheda-ctx[data-tab-attiva="dati"] .ctx-dati,
  .scheda-ctx[data-tab-attiva="storia"] .ctx-storia { display: flex; }
}

/* fasi gestite da un altro reparto: niente esiti, si dice chi la segue */
.ctx-gate { display: flex; align-items: flex-start; gap: 10px; background: var(--n-50); }
.ctx-gate > .ic { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; color: var(--n-500); }
.ctx-gate strong { display: block; font-size: 14px; color: var(--n-900); }
.ctx-gate .tenue { margin-top: 2px; font-size: 12.5px; }

/* prossimo appuntamento e grande «Esito appuntamento» */
.ctx-app { display: flex; flex-direction: column; gap: 10px; }
.ctx-app[hidden], .ctx-passo[hidden] { display: none; }
.ctx-app-riga { display: flex; align-items: flex-start; gap: 12px; }
.ctx-app-ic {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 8px; background: var(--brand-50); color: var(--brand-700);
}
.ctx-app-ic .ic { width: 18px; height: 18px; }
.ctx-app-testo { min-width: 0; }
.ctx-app-quando { font-size: 15px; font-weight: 600; color: var(--n-900); font-variant-numeric: tabular-nums; }
.ctx-app-quando::first-letter { text-transform: uppercase; }
.ctx-app-quando.passato { color: var(--warn-ink); }
.ctx-app-dove { margin-top: 2px; font-size: 12.5px; color: var(--n-500); }
.ctx-app-esito { width: 100%; height: 48px; justify-content: center; font-size: 15px; }
.ctx-app-nota { font-size: 12px; color: var(--n-500); }
.ctx-altri > summary { padding: 6px 2px; font-size: 13px; font-weight: 500; color: var(--brand-700); cursor: pointer; }
.ctx-altri[open] > summary { margin-bottom: 8px; }

/* prossimo passo dei servizi */
.passo-lista { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.passo-voce { display: flex; flex-direction: column; gap: 6px; }
.passo-tit { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--n-500); }
.passo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.passo-chip {
  padding: 2px 8px; border-radius: 6px; background: var(--n-100); color: var(--n-700);
  font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.passo-chip.fatta { background: var(--ok-bg); color: var(--ok-ink); }
.passo-chip.oggi { background: var(--warn-bg); color: var(--warn-ink); }
.passo-chip.scaduta { background: var(--err-bg); color: var(--err-ink); }
.passo-barra { height: 6px; border-radius: 3px; background: var(--n-100); overflow: hidden; }
.passo-barra span { display: block; height: 100%; background: var(--brand-600); }
.passo-barra span.pieno { background: var(--ok); }
.passo-riga { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 13px; color: var(--n-700); }
.passo-stato { font-weight: 500; font-variant-numeric: tabular-nums; }
.passo-stato.oggi { color: var(--warn-ink); }
.passo-stato.scaduta { color: var(--err-ink); }
.passo-stato.fatta { color: var(--ok-ink); }

/* esiti: frasi rapide, tasti Alt+1…9, esito scelto e anteprima della destinazione */
.esiti-frasi { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.esiti-frase {
  height: 26px; padding: 0 10px; border: 1px solid var(--n-300); border-radius: 999px;
  background: var(--n-0); color: var(--n-700); font-size: 12px; font-weight: 500; cursor: pointer;
}
.esiti-frase:hover { border-color: var(--brand-600); color: var(--brand-700); }
.esiti-kbd { margin-left: 4px; padding: 0 4px; font-size: 10px; }
/* con i tasti accanto, i quattro «Nessun contatto» vanno su due righe quando lo spazio è poco */
[data-esiti] { container-type: inline-size; }
@container (max-width: 560px) {
  .esiti-nocontatto { grid-template-columns: 1fr 1fr; }
}
.btn-primario .esiti-kbd { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .35); color: inherit; }
.esito-scelto { outline: 2px solid var(--brand-600); outline-offset: 1px; }
.esiti-anteprima { min-height: 18px; margin-top: 8px; font-size: 12.5px; color: var(--n-700); }
.esiti-anteprima.scelto { color: var(--brand-700); font-weight: 500; }
@media (pointer: coarse) { .esiti-kbd, .scheda-piede .btn .kbd { display: none; } }

/* telefono: il pannello occupa tutto lo schermo */
@media (max-width: 820px) {
  .scheda-laterale > .modal-scheda { width: 100vw; border-radius: 0; }
  .scheda-nav-pos { display: none; }
  .scheda-percorso { padding: 6px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .scheda-laterale > .modal-scheda { animation: none; }
  .fase-pill { transition: none; }
}

/* ============================================================
   Esito appuntamento a passi: «1 Esito · 2 Servizio · 3 Preventivo · 4 Vendita»
   (spegnibile dal menu ⋯ della scheda: tornano le finestre separate)
   ============================================================ */
.ep { display: flex; flex-direction: column; gap: 14px; }
.ep-barra { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ep-passo, .ep-passo > button { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ep-passo {
  flex: 1; padding-bottom: 8px; border-bottom: 3px solid var(--n-200);
  font-size: 13px; color: var(--n-500);
}
.ep-passo > button {
  width: 100%; padding: 0; border: none; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.ep-passo > button:hover .ep-nome { text-decoration: underline; }
.ep-num {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 50%; background: var(--n-100); color: var(--n-500);
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.ep-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-passo.fatto { border-color: var(--brand-100); color: var(--brand-700); }
.ep-passo.fatto .ep-num { background: var(--brand-100); color: var(--brand-700); }
.ep-passo.attuale { border-color: var(--brand-600); color: var(--n-900); font-weight: 600; }
.ep-passo.attuale .ep-num { background: var(--brand-pieno); color: #fff; }
.ep-passo.saltato { color: var(--n-500); text-decoration: line-through; }

.ep-riep {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 10px; border: 1px solid var(--n-200); border-radius: 8px; background: var(--n-50);
}
.ep-riep[hidden] { display: none; }
.ep-chip {
  max-width: 100%; padding: 2px 8px; border-radius: 6px; background: var(--n-0);
  box-shadow: inset 0 0 0 1px var(--n-200); color: var(--n-900);
  font-size: 12px; font-weight: 500; overflow-wrap: anywhere;
}
.ep-chip > span { color: var(--n-500); font-weight: 400; }

.ep-corpo .campo:last-child { margin-bottom: 0; }
.ep-scelte { display: grid; grid-template-columns: 1fr; gap: 8px; }
.ep-scelta {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 12px; border: 1px solid var(--n-300); border-radius: 8px;
  background: var(--n-0); color: var(--n-900); font: inherit; text-align: left; cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.ep-scelta strong { font-size: 14px; font-weight: 600; }
.ep-scelta span { font-size: 12.5px; color: var(--n-500); }
.ep-scelta:hover:not([disabled]) { border-color: var(--brand-600); background: var(--brand-50); }
.ep-scelta.primaria strong { color: var(--brand-700); }
.ep-scelta.pericolo strong { color: var(--err-ink); }
.ep-scelta.pericolo:hover:not([disabled]) { border-color: var(--err); background: var(--err-bg); }
.ep-scelta.scelta { border-color: var(--brand-600); box-shadow: 0 0 0 1px var(--brand-600); }
.ep-scelta[disabled] { opacity: .6; cursor: default; }

.ep-sugg {
  margin-bottom: 12px; padding: 8px 10px; border-left: 3px solid var(--sugg, var(--brand-600)); border-radius: 0 6px 6px 0;
  background: var(--n-50); color: var(--n-700); font-size: 12.5px;
}
.ep-fam + .ep-fam { margin-top: 12px; }
.ep-fam-tit {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--n-500);
}
.ep-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--dot, var(--n-400)); }
.proponi-btn.ep-serv {
  min-width: 0; justify-content: flex-start; padding: 11px 12px;
  font-size: 13.5px; line-height: 1.3; text-align: left; white-space: normal;
}
.proponi-btn.ep-serv.scelta { border-color: var(--brand-600); background: var(--brand-50); color: var(--brand-700); }
.ep-nota { margin: 0; font-size: 12px; color: var(--n-500); }
.ep-nota-su { margin-bottom: 12px; }
.ep-scelte + .ep-nota, .ep-fam + .ep-nota, .vuoto + .ep-nota { margin-top: 12px; }
.ep .form-errore { margin-bottom: 0; }
.ep-piede {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-top: 12px; border-top: 1px solid var(--n-200);
}
.ep-avanti { margin-left: auto; }
.ep-prova { margin-top: 10px; }

@media (max-width: 520px) {
  .ep-passo:not(.attuale) .ep-nome { display: none; }
  .ep-passo.attuale { flex: 2.5; }
  .ep-avanti { width: 100%; justify-content: center; }
}