/* ==========================================================================
   LA BACHECA DEL FUNNEL (2026-09-17). Pagina DESKTOP: la board sta intera nello
   schermo — sette colonne affiancate a tutta larghezza, testata su una riga, le card
   scorrono DENTRO la propria colonna, mai la pagina (Mattias, con lo screenshot:
   «si deve vedere tutta da pc»). Da telefono si legge e si scorre in orizzontale,
   ma le azioni si fanno dalle pagine di lavoro.
   L'accento di ogni colonna viene dalla palette fase di .crm-fase (crm.css).
   Regole di casa: una property per riga, ombre solo --shadow-*, radius 16/12,
   breakpoint 40/64rem, animazioni dentro prefers-reduced-motion.
   ========================================================================== */

/* Il guscio centra a 760px: la bacheca vuole tutto lo schermo. */
.app-main:has(.bacheca-page) {
  max-width: none;
  padding: 0.75rem 1rem 1rem;
}

.bacheca-page {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* ---------- La testata: una striscia sola ---------- */

.bacheca-testa {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
}

.bacheca-testa h2 {
  margin: 0;
  font-size: 1.15rem;
}

.bacheca-cerca {
  display: block;
  flex: 0 1 20rem;
}

.bacheca-cerca input {
  width: 100%;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--navy);
  font-family: inherit;
  font-size: 0.86rem;
}

.bacheca-cerca input::placeholder {
  color: var(--gray-logo);
}

.bacheca-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}

.bacheca-chips-divisore {
  width: 1px;
  height: 1.2rem;
  margin: 0 0.35rem;
  background: var(--border);
}

/* ---------- Le colonne: la board riempie lo schermo ---------- */

.bacheca-colonne {
  display: flex;
  gap: 0.6rem;
  /* stretch: TUTTE le colonne sono alte quanto la piu' lunga, e la PAGINA scorre in giu'
     normalmente (Mattias 2026-09-17: «perche' non mi fai scrollare in giu'?» — la versione
     ad altezza fissa con lo scroll dentro la colonna non gli piaceva). Prima era flex-start,
     ogni colonna alta quanto il suo contenuto: una colonna vuota finiva dopo dieci righe, e
     in fondo a una colonna lunga la card non aveva dove atterrare accanto (Mattias 2026-10-12:
     «quando la colonna accanto non ha carte e sono in fondo non riesco a spostare la card»).
     Cosi' la zona di rilascio e' l'intera altezza della bacheca. */
  align-items: stretch;
  /* LE COLONNE SCORRONO A DESTRA dentro il loro contenitore; la pagina scorre in giu' come
     sempre. La barra del contenitore e' nascosta: quella che si vede e' .bacheca-barra, in fondo
     alla finestra, tenuta allineata da bacheca_controller. Le testate NON stanno qui dentro
     (un contenitore che scorre spinge in basso le teste sticky): stanno nella riga sopra. */
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
}

.bacheca-colonne::-webkit-scrollbar {
  display: none;
}

/* La riga delle testate: appiccicata sotto l'header, scorre a destra insieme alle colonne
   (scrollLeft impostato dal controller), senza barra sua. Niente altro nella riga: una freccia
   ai lati spostava le testate rispetto alle colonne (12/10). */
.bacheca-testate {
  position: sticky;
  top: var(--header-height);
  z-index: 5;
  display: flex;
  gap: 0.6rem;
  margin-bottom: -0.6rem;
  padding-bottom: 0.6rem;
  overflow: hidden;
  background: var(--bg);
}

/* La barra orizzontale, SEMPRE in fondo alla finestra e sempre visibile: disegnata noi (le
   barre native di Windows 11 compaiono solo al passaggio del mouse). Il cursore navy e' lungo
   quanto la parte di colonne che si vede; si trascina, e un clic sulla barra salta li'. */
.bacheca-barra {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  height: 20px;
  padding: 0;
  border-top: 1px solid var(--border);
  background: var(--border-soft);
  cursor: pointer;
  touch-action: none;
}

.bacheca-barra-cursore {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  min-width: 48px;
  border-radius: 999px;
  background: var(--navy);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  cursor: grab;
}

.bacheca-barra-cursore:hover,
.bacheca-barra-cursore.is-preso {
  background: var(--navy-bright, #2b4fa2);
  cursor: grabbing;
}

/* Spazio in fondo alla pagina perche' la barra fissa non copra l'ultima card. */
.bacheca-page {
  padding-bottom: 1.6rem;
}

.bacheca-colonna {
  --colonna-accento: var(--navy);
  /* LARGHEZZA FISSA, anche da PC: le colonne non si stringono per starci tutte, si va a
     destra (Mattias 2026-10-12, con lo screenshot delle card tagliate: «le colonne possono
     essere piu' larghe e posso andare verso destra se non ci entrano»). Prima, sopra i 64rem,
     le sette colonne si dividevano lo schermo e con la nota rapida le card sbordavano. */
  flex: 0 0 min(84vw, 320px);
  display: flex;
  flex-direction: column;
  min-height: 10rem;
  border: 1px solid var(--border-soft);
  border-top: 0;
  /* Il bordo colorato in alto ce l'ha la testa, nella riga sopra: qui solo gli angoli in basso. */
  border-radius: 0 0 var(--radius) var(--radius);
  background: rgba(255, 255, 255, 0.55);
}

/* L'accento di ogni fase, sulla colonna e sulla sua testa (che sta nella riga sopra). */
.bacheca-colonna.is-tentato,
.bacheca-colonna-testa.is-tentato {
  --colonna-accento: var(--gray-logo);
}

.bacheca-colonna.is-in_contatto,
.bacheca-colonna-testa.is-in_contatto {
  --colonna-accento: var(--navy-bright);
}

.bacheca-colonna.is-appuntamento,
.bacheca-colonna-testa.is-appuntamento {
  --colonna-accento: var(--corallo);
}

.bacheca-colonna.is-visitato,
.bacheca-colonna-testa.is-visitato {
  --colonna-accento: var(--semaforo-arancio);
}

.bacheca-colonna.is-primo_ordine,
.bacheca-colonna-testa.is-primo_ordine {
  --colonna-accento: var(--semaforo-verde);
}

.bacheca-colonna.is-futuro,
.bacheca-colonna-testa.is-futuro {
  --colonna-accento: var(--navy-bright);
}

.bacheca-colonna.is-cliente,
.bacheca-colonna-testa.is-cliente {
  --colonna-accento: var(--navy);
}

.bacheca-colonna.is-perso,
.bacheca-colonna-testa.is-perso {
  --colonna-accento: var(--gray-text);
}

.bacheca-colonna-testa {
  --colonna-accento: var(--navy);
  flex: 0 0 min(84vw, 320px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.1rem 0.5rem;
  align-items: center;
  padding: 0.55rem 0.7rem 0.45rem;
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--colonna-accento);
  border-radius: var(--radius) var(--radius) 0 0;
  /* La testa prende una velatura del suo accento: la colonna si riconosce da lontano. */
  background: color-mix(in srgb, var(--colonna-accento) 10%, var(--surface));
}

.bacheca-colonna-testa h3 {
  margin: 0;
  overflow: hidden;
  color: color-mix(in srgb, var(--colonna-accento) 80%, var(--ink));
  font-size: 0.88rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bacheca-colonna-n {
  justify-self: end;
  min-width: 1.6rem;
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
  background: var(--colonna-accento);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.bacheca-colonna-fare {
  grid-column: 1 / -1;
  overflow: hidden;
  margin: 0;
  color: var(--gray-text);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bacheca-colonna-corpo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.5rem;
}

/* Le card non si comprimono ne' sbordano: altezza loro, larghezza della colonna. */
.bacheca-colonna-corpo > * {
  flex: 0 0 auto;
  min-width: 0;
}


/* «Nessuno qui» si nasconde da solo appena una card c'e' — anche una arrivata col refresh. */
.bacheca-colonna-corpo:has(.bacheca-card) .bacheca-colonna-vuota {
  display: none;
}

.bacheca-colonna-vuota {
  margin: 0.5rem 0;
  color: var(--gray-logo);
  font-size: 0.82rem;
  text-align: center;
}

/* ---------- Le card ---------- */

.bacheca-card {
  --cluster-colore: var(--gray-logo);
  display: grid;
  min-width: 0;
  gap: 0.28rem;
  padding: 0.55rem 0.65rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-left: 4px solid var(--cluster-colore);
  border-radius: var(--radius-small);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  cursor: grab;
}

/* I colori dei cluster: gli stessi delle mappe (Prospects::Cluster::COLORI, come in chiamate.css). */
.bacheca-card.is-cluster-pescheria {
  --cluster-colore: #1f78b4;
}

.bacheca-card.is-cluster-sushi_etnico {
  --cluster-colore: #e05a48;
}

.bacheca-card.is-cluster-premium {
  --cluster-colore: #26327e;
}

.bacheca-card.is-cluster-trattoria {
  --cluster-colore: #1b873f;
}

.bacheca-card.is-cluster-misto {
  --cluster-colore: #b7791f;
}

.bacheca-card-testa {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
  justify-content: space-between;
}

.bacheca-card-nome {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.25;
}

/* Il nome apre la scheda: e' un bottone, ma deve dire «cliccami» come un link — sottolineato
   tratteggiato a riposo, pieno quando ci passi sopra (Mattias 2026-09-18: «deve essere chiaro
   che si puo' selezionare il cliente»). */
.bacheca-card-nome button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--navy);
  font: inherit;
  text-align: left;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}

.bacheca-card-nome button:hover {
  color: var(--navy-bright);
  text-decoration: underline solid;
}

.bacheca-card:hover {
  border-color: var(--navy-bright);
}

.bacheca-card-dove {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin: 0;
  color: var(--gray-text);
  font-size: 0.75rem;
}

.bacheca-card-cluster {
  padding: 0.06rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cluster-colore) 14%, var(--surface));
  color: var(--cluster-colore);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.bacheca-card-contatto {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  margin: 0;
  font-size: 0.78rem;
}

.bacheca-card-contatto svg {
  width: 0.85rem;
  height: 0.85rem;
  color: var(--gray-logo);
}

.bacheca-card-contatto a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
}

.bacheca-card-stato {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.5rem;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  color: var(--ink);
  font-size: 0.76rem;
}

.bacheca-card-valore {
  color: var(--semaforo-verde);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.bacheca-card-scaduta {
  color: var(--corallo-dark);
  font-weight: 600;
}

.bacheca-card.is-scaduta {
  border-color: var(--corallo);
}

.bacheca-card-stato svg {
  flex: 0 0 auto;
  width: 0.85rem;
  height: 0.85rem;
  color: var(--gray-logo);
}

.bacheca-card-chi {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  min-width: 0;
  margin: 0.1rem 0 0;
  padding-top: 0.35rem;
  border-top: 1px solid var(--border-soft);
  color: var(--gray-text);
  font-size: 0.72rem;
}

.bacheca-card-chi-testo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bacheca-avatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: var(--navy);
  color: #ffffff;
  font-size: 0.6rem;
  font-weight: 700;
}

/* ---------- Drag&drop ---------- */

/* IL SOLCO che resta quando sfili la scheda dalla fila: il contenuto sparisce, il posto si
   stringe e resta un rettangolo tratteggiato — si vede da dove l'hai presa e dove tornera'
   se la lasci cadere nel vuoto. */
.bacheca-card.is-presa {
  height: 2.4rem;
  padding: 0;
  overflow: hidden;
  border: 1px dashed var(--gray-logo);
  background: transparent;
  box-shadow: none;
  cursor: grabbing;
}

.bacheca-card.is-presa > * {
  opacity: 0;
}

/* LA SCHEDA IN MANO: il clone che viaggia sotto il cursore, alzato e storto come una carta
   presa dal mazzo. Fuori schermo ma disegnato, se no Chrome non la fotografa. */
.bacheca-card.is-in-mano {
  position: fixed;
  top: -1000px;
  left: 0;
  z-index: -1;
  transform: rotate(-3deg);
  box-shadow: var(--shadow-3);
  pointer-events: none;
}

/* IL POSTO CHE SI APRE nella colonna d'arrivo: la fila fa spazio in testa, dove la scheda
   andra' davvero, e dentro c'e' scritta l'azione che stai per fare. Cresce dall'altezza zero
   fino a quella della scheda che hai in mano, cosi' la colonna si apre della misura giusta. */
.bacheca-arrivo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 2px dashed var(--colonna-accento);
  border-radius: var(--radius-small);
  background: color-mix(in srgb, var(--colonna-accento) 8%, var(--surface));
  color: color-mix(in srgb, var(--colonna-accento) 75%, var(--ink));
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  opacity: 0;
}

.bacheca-arrivo.is-aperto {
  height: var(--arrivo-altezza, 5.5rem);
  padding: 0.4rem;
  opacity: 1;
}

/* Col posto aperto la colonna vuota non dice piu' «Nessuno qui»: uno ce ne sta arrivando. */
.bacheca-colonna-corpo:has(.bacheca-arrivo) .bacheca-colonna-vuota {
  display: none;
}

/* Dove si puo' posare: la colonna si apre appena, e quella sotto il cursore si accende. */
.bacheca-colonna.is-accetta {
  border-color: color-mix(in srgb, var(--colonna-accento) 55%, var(--border-soft));
  background: var(--surface);
}

.bacheca-colonna.is-sopra {
  border-color: var(--colonna-accento);
  box-shadow: var(--shadow-2);
  background: var(--surface);
}

.bacheca-colonna.is-vietata {
  opacity: 0.45;
}

/* `hidden` deve vincere anche su display espliciti (trappola gia' pagata sulle visite). */
.bacheca-card[hidden],
.bacheca-colonna[hidden],
.bacheca-conferma[hidden] {
  display: none;
}

/* ---------- Il pannellino di conferma ---------- */

.bacheca-conferma {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 30;
  width: min(92vw, 24rem);
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-3);
}

.bacheca-conferma h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.bacheca-conferma-form {
  display: grid;
  gap: 0.6rem;
}

.bacheca-conferma-motivi {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.bacheca-conferma-rimbalzo {
  margin: 0;
  color: var(--gray-text);
  font-size: 0.9rem;
}

@media (prefers-reduced-motion: no-preference) {
  .bacheca-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease,
      height 0.18s ease, padding 0.18s ease, opacity 0.15s ease;
  }

  .bacheca-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
  }

  /* La scheda che rientra nella fila: si riappoggia, non ricompare e basta. */
  .bacheca-card.is-rientrata {
    animation: bacheca-rientro 0.22s ease;
  }

  @keyframes bacheca-rientro {
    from {
      transform: scale(0.94);
      box-shadow: var(--shadow-3);
    }

    to {
      transform: scale(1);
      box-shadow: var(--shadow-1);
    }
  }

  .bacheca-colonna {
    transition: box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  }

  .bacheca-arrivo {
    transition: height 0.16s ease, opacity 0.16s ease, padding 0.16s ease;
  }
}

/* IL PASSO INDIETRO e' una CORREZIONE, non un esito: si veste da correzione — grigio, non il
   colore della colonna — cosi' a colpo d'occhio si distingue da un locale che avanza. */
.bacheca-colonna.is-indietro {
  border-color: var(--gray-logo);
}

.bacheca-arrivo.is-indietro {
  border-color: var(--gray-logo);
  background: color-mix(in srgb, var(--gray-logo) 10%, var(--surface));
  color: var(--gray-text);
}

.bacheca-conferma-scelta {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.88rem;
  line-height: 1.3;
}

.bacheca-conferma-scelta input {
  margin-top: 0.15rem;
}

/* Task ownership is distinct from the author of the last activity. */
.board-order-hint {
  margin: 0;
  color: var(--gray-text);
  font-size: 12px;
}

/* DA FARE / QUANDO / CHI: il blocco dell'azione, tre righe che si leggono in un colpo. Il
   bordo sinistro e la riga del quando prendono il colore dell'urgenza: rosso scaduta, ambra
   oggi, navy programmata, grigio senza data. */
.board-task {
  --task-colore: var(--navy);
  display: grid;
  gap: 4px;
  margin: 4px 0;
  padding: 6px 0 6px 9px;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  border-left: 3px solid var(--task-colore);
}

.board-task.is-overdue {
  --task-colore: var(--corallo-dark, #b42318);
}

.board-task.is-today {
  --task-colore: var(--semaforo-arancio, #d97706);
}

.board-task.is-unplanned,
.board-task.is-closed {
  --task-colore: var(--gray-logo);
}

.board-task-label,
.board-history-label,
.board-potential-label {
  display: block;
  font-size: 10px;
  color: var(--gray-text);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.board-task-cosa {
  display: grid;
  gap: 1px;
  margin: 0;
}

.board-task-action {
  color: var(--navy);
  font-size: 13.5px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.board-task-quando {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  color: var(--task-colore);
  font-size: 12px;
  font-weight: 600;
}

.board-task-quando svg {
  flex: 0 0 auto;
  width: 0.8rem;
  height: 0.8rem;
}

.board-task.is-overdue .board-task-quando {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--corallo-soft, #fdecea);
  justify-self: start;
}

.board-task-chi {
  display: grid;
  gap: 1px;
}

.board-task-chi-nome {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

.board-task-open {
  justify-self: start;
  min-height: 28px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--navy);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.board-task-open:hover {
  text-decoration: underline;
}

/* «REGISTRA UN'AZIONE» e «REGISTRA ANAGRAFICA» sulla card: aprono i due modal centrali. */
.bacheca-card-registra-riga {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.bacheca-card-registra.is-anagrafica {
  border-color: var(--border);
  color: var(--gray-text);
}

.bacheca-card-registra.is-anagrafica:hover {
  border-color: var(--navy);
  background: var(--surface);
  color: var(--navy);
}

/* Il segno del giro col Hub accanto a «Registra anagrafica»: stesso pillolino, colore di stato. */
.bacheca-card-hub {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid var(--semaforo-arancio);
  border-radius: 999px;
  color: var(--semaforo-arancio);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.bacheca-card-hub.is-approvata,
.bacheca-card-hub.is-confermata {
  border-color: var(--semaforo-verde);
  color: var(--semaforo-verde);
}

.bacheca-card-hub.is-respinta {
  border-color: var(--danger);
  color: var(--danger);
}

.anagrafica-modal-locale {
  margin: 0 0 0.6rem;
  color: var(--gray-text);
  font-size: 0.9rem;
}

.bacheca-card-registra {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.3rem;
  padding: 4px 9px;
  border: 1px solid var(--navy);
  border-radius: 999px;
  background: var(--surface);
  color: var(--navy);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
}

.bacheca-card-registra:hover {
  background: var(--navy);
  color: #fff;
}

.bacheca-card-registra svg {
  width: 0.8rem;
  height: 0.8rem;
}

/* IL RESPONSABILE si cambia dalla card: una tendina nuda, che sembra testo finche' non la tocchi. */
.bacheca-card-owner {
  margin: 0;
}

.bacheca-card-owner select {
  max-width: 100%;
  padding: 1px 1.1rem 1px 0;
  border: 0;
  border-bottom: 1px dashed var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.bacheca-card-owner select:hover,
.bacheca-card-owner select:focus {
  border-bottom-color: var(--navy);
  color: var(--navy);
  outline: none;
}

/* LE NOTE sulla card: l'ultima in UNA riga (un clic la apre per intero) e sotto, sempre
   pronta, la riga per scriverne una nuova. */
.bacheca-card-nota {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.3rem 0.45rem;
  overflow: hidden;
  border: 0;
  border-left: 2px solid var(--border);
  border-radius: 0;
  background: var(--surface-soft, #f6f7f9);
  color: var(--gray-text);
  font: inherit;
  font-size: 0.74rem;
  font-style: italic;
  line-height: 1.35;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.bacheca-card-nota.is-aperta {
  white-space: normal;
}

.bacheca-card-nota-form {
  display: flex;
  gap: 0.25rem;
  margin: 0;
}

.bacheca-card-nota-campo {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 7px;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  background: var(--surface);
  font: inherit;
  font-size: 0.76rem;
}

.bacheca-card-nota-campo:focus {
  border-color: var(--navy);
  outline: none;
}

.bacheca-card-nota-salva {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  background: var(--surface);
  color: var(--navy);
  cursor: pointer;
}

.bacheca-card-nota-salva svg {
  width: 0.75rem;
  height: 0.75rem;
}

.bacheca-card-nota-salva:hover {
  border-color: var(--navy);
}

/* IL MODAL «REGISTRA UN'AZIONE» (bacheca/azione): gruppi di scelte grandi e leggibili, poi i
   campi che l'azione scelta chiede, poi Salva. Deve essere chiaro a colpo d'occhio. */
.app-modal.is-azione {
  width: min(860px, 96vw);
}

.azione-modal {
  display: grid;
  gap: 1rem;
}

.azione-modal-dove {
  margin: 0;
  color: var(--gray-text);
  font-size: 0.9rem;
}

.azione-gruppo {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--surface);
}

.azione-gruppo legend {
  padding: 0 0.3rem;
  color: var(--navy);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.azione-gruppo.is-chi {
  border-color: var(--navy);
  background: var(--navy-soft, #eef2f8);
}

/* Nel pannellino del drop: stessa domanda, piu' stretta. */
.azione-gruppo.is-compatto {
  gap: 0.35rem;
  padding: 0.5rem 0.6rem;
}

.azione-gruppo.is-compatto legend {
  font-size: 0.72rem;
}

.azione-gruppo-nota {
  margin: 0;
  color: var(--gray-text);
  font-size: 0.82rem;
}

.azione-scelte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.azione-scelta {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}

.azione-scelta.is-piccola {
  min-height: 34px;
  padding: 0.3rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 500;
}

.azione-scelta input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.azione-scelta:hover {
  border-color: var(--navy);
}

.azione-scelta:has(input:checked),
.azione-scelta.is-scelta {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}

.azione-scelta.is-gia_cliente:has(input:checked) {
  border-color: var(--semaforo-verde);
  background: var(--semaforo-verde);
}

.azione-scelta.is-non_interessato:has(input:checked),
.azione-scelta.is-numero_errato:has(input:checked),
.azione-scelta.is-chiuso:has(input:checked) {
  border-color: var(--semaforo-rosso, #b42318);
  background: var(--semaforo-rosso, #b42318);
}

.azione-campo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  padding: 0.8rem 0.9rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-small);
}

.azione-campo .crm-campo-label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.azione-campo .azione-scelte {
  flex-basis: 100%;
}

/* La visita: chi va, il calendario aperto, ora e durata su una griglia; i campi stanno in alto,
   non si stirano all'altezza del calendario. Sotto, l'agenda del capo area (visit-planner). */
.azione-campo.is-visita {
  display: grid;
  gap: 0.8rem;
}

.azione-campo.is-visita .visita-campi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.6rem 1rem;
  align-items: start;
}

.azione-campo.is-visita .visita-campi select {
  width: 100%;
}

/* Quando: il calendario aperto a sinistra, l'ora a mezz'ore accanto. */
.azione-campo.is-data {
  align-items: flex-start;
}

.azione-quando {
  flex: 1 1 18rem;
}

.azione-ora {
  flex: 0 0 9rem;
}

.azione-ora .ora-mezzora {
  width: 100%;
  min-height: 42px;
  font-size: 1rem;
  font-weight: 600;
}

.azione-nota textarea {
  width: 100%;
}

.azione-modal-azioni {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}

.azione-modal-errore {
  margin: 0;
  padding: 1rem;
}

/* La zona rossa in fondo al modal: eliminare la card sbagliata (solo direzione). */
.azione-elimina {
  display: grid;
  gap: 0.35rem;
  margin-top: 1.2rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--semaforo-rosso, #b42318);
  border-radius: var(--radius-small);
  background: #fff5f4;
}

.azione-elimina-titolo {
  margin: 0;
  color: var(--semaforo-rosso, #b42318);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.azione-elimina-spiega {
  margin: 0;
  color: var(--gray-text);
  font-size: 0.82rem;
}

.azione-elimina-bottone {
  justify-self: start;
  margin-top: 0.3rem;
  border-color: var(--semaforo-rosso, #b42318);
  color: var(--semaforo-rosso, #b42318);
}

.azione-elimina-bottone:hover {
  background: var(--semaforo-rosso, #b42318);
  color: #fff;
}

.bacheca-card-chi-testo {
  white-space: normal;
  overflow: visible;
  line-height: 1.4;
}

.bacheca-colonna-testa h3 {
  white-space: normal;
}

/* Le visite ai clienti che abbiamo gia': fuori dal funnel, bordo tratteggiato a dirlo. */
.bacheca-colonna.is-visite_clienti {
  --colonna-accento: var(--navy-bright);
  border-top-style: dashed;
}

.bacheca-card.is-visita-cliente {
  cursor: default;
}