/* Keep every stage in the panel (3 x 3 grid; the seven process stages in one row on wide screens). */
#v-pipe { container-type: inline-size; min-width: 0; }
#v-pipe #board {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100%;
  min-width: 0;
}
#v-pipe #board .pipe-col {
  min-width: 0 !important;
  max-width: none !important;
  max-height: max(420px, calc(100dvh - 300px));
  overflow-y: auto;
  scrollbar-width: thin;
}
#v-pipe .pipeline-card { flex-shrink: 0; min-width: 0; }
#v-pipe .lead-next { grid-template-columns: minmax(0, 1fr); }
#v-pipe .lead-footer { flex-wrap: wrap; }
#v-pipe .lead-card-actions { grid-template-columns: minmax(0, 1fr); }
#v-pipe .lead-action { min-height: 32px; height: auto; white-space: nowrap; }
#v-pipe .lead-code { white-space: nowrap; flex-shrink: 0; }
@container (min-width: 1560px) {
  #v-pipe #board { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
}
@media (max-width: 700px) {
  #v-pipe #board {
    display: flex !important;
    overflow-x: auto !important;
  }
  #v-pipe #board .pipe-col {
    flex: 0 0 86vw !important;
    min-width: 86vw !important;
    max-width: 86vw !important;
  }
}

#v-pipe .pipeline-channels { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 13px 12px; }
#v-pipe .pipeline-channel { border: 1px solid #30323a; border-radius: 5px; padding: 5px 7px; background: #1b1c20; color: #a8abb2; font: inherit; font-size: 11px; text-align: left; }
#v-pipe button.pipeline-channel { cursor: pointer; min-height: 32px; }
#v-pipe .pipeline-channel.contacted { color: #b6bcff; border-color: #454967; }
#v-pipe .pipeline-channel.replied { color: #75cbae; border-color: #355b4e; }
#v-pipe button.pipeline-channel:focus-visible { outline: 2px solid #8189ef; outline-offset: 2px; }
#v-pipe .lead-context span { overflow-wrap: anywhere; }

/* Fase 0: etapas nuevas, cierre (Perdido / Cancelado) y datos que antes no existían. */
#v-pipe .pipe-col-demo-done .col-h span::before { background: #d6a85b; box-shadow: 0 0 0 3px rgba(214, 168, 91, .1); }
#v-pipe .pipe-col-trial .col-h span::before { background: #8189ef; box-shadow: 0 0 0 3px rgba(129, 137, 239, .1); }
#v-pipe .pipe-col-lost .col-h span::before { background: #e5484d; box-shadow: 0 0 0 3px rgba(229, 72, 77, .1); }
#v-pipe .pipe-col-cancelled .col-h span::before { background: #b4233a; box-shadow: 0 0 0 3px rgba(180, 35, 58, .1); }
#v-pipe .pipeline-card.stage-demo-done::before { background: #d6a85b; }
#v-pipe .pipeline-card.stage-trial::before { background: #8189ef; }
#v-pipe .pipeline-card.stage-lost::before { background: #e5484d; }
#v-pipe .pipeline-card.stage-cancelled::before { background: #b4233a; }
#v-pipe .stage-demo-done .lead-code { color: #d6a85b; }
#v-pipe .stage-trial .lead-code { color: #8189ef; }
#v-pipe .stage-lost .lead-code, #v-pipe .stage-cancelled .lead-code { color: #e5484d; }
#v-pipe .pipe-col-lost .pipeline-card, #v-pipe .pipe-col-cancelled .pipeline-card { opacity: .82; }
#v-pipe .lead-legacy { border: 1px dashed #5b4a2a; border-radius: 5px; padding: 5px 7px; color: #d6a85b; font-size: 11px; }
#v-pipe .lead-motivo, #v-pipe .lead-demo, #v-pipe .lead-intencion { margin: 0 13px 10px; font-size: 11.5px; line-height: 1.4; color: #a8abb2; overflow-wrap: anywhere; }
#v-pipe .lead-motivo { color: #f0a3a5; }
#v-pipe .lead-demo { color: #e9c07a; }
#v-pipe .lead-intencion { color: #8189ef; }
#v-pipe .valor-desconocido { color: #8a8f99; font-weight: 500; }
#v-pipe .pipe-aviso { margin: 0 0 12px; padding: 10px 14px; border: 1px solid #5b4a2a; border-radius: 8px; background: rgba(214, 168, 91, .07); color: #e3c58f; font-size: 12.5px; line-height: 1.5; }
.linklike { background: none; border: 0; padding: 0; color: #9aa2ff; text-decoration: underline; cursor: pointer; font: inherit; }
.linklike:focus-visible { outline: 2px solid #8189ef; outline-offset: 2px; }