/* ============================================================
   pipeline.css — M4 Fase 2: Pipeline de oportunidades (carril
   preventa). Vista: static/js/views/pipeline.js.
   ------------------------------------------------------------
   Contrato visual: docs/design/direcciones/pipeline-desktop-a.html
   (kanban por etapa, desktop) + pipeline-b.html (cola priorizada,
   mobile). Reusa TODO lo que ya existe en app.css (.tiles/.tile,
   .today-card/.tc-*, .seg, .vs-wrap, .sheet*, .opt*, .link-btn,
   .today-card.is-adm) — acá solo lo que es nuevo: el kanban y unos
   pocos elementos del detalle de oportunidad.
   ------------------------------------------------------------
   Estrategia de ancho (lección ya medida, no reintroducir el bug):
   .view es `display:flex;flex-direction:column` (ver app.css) — al
   ser un contenedor en COLUMNA, sus hijos NO heredan el min-width:
   auto que infla un contenedor de FILA. Igual se deja overflow-x
   contenido explícitamente en .kanban-wrap/.kanban-track por las
   dudas (defensivo, cero costo): la página nunca scrollea de
   costado, solo el track.
   ============================================================ */

/* ---- Filtros: temporada + comercial (reusa .seg, pero en mobile
   .seg no scrollea — acá sí, para que 4-5 comerciales no rompan el
   layout en una pantalla angosta). ---- */
.view-pipeline .pv-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.view-pipeline .seg {
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.view-pipeline .seg::-webkit-scrollbar { display: none; }
.view-pipeline .seg button { white-space: nowrap; }

/* ============================================================
   FRANJA COMPARADORA (Bloque C, 2026-08-26) — GET /api/pipeline/temporada.
   Contrato visual: docs/design/direcciones/pipeline-b.html (.cmp-strip,
   mobile) + pipeline-desktop-a.html (.ctx-cmp-row, desktop). Una sola
   estructura DOM (js/views/pipeline.js#renderComparativos): el contenido
   es IDÉNTICO en los dos formatos, solo el acomodo cambia — por eso acá
   alcanza con flex-direction column→row en el breakpoint de siempre
   (900px), sin duplicar el árbol como sí hace falta en .tiles/.tiles4
   (esas SÍ cambian de cantidad de columnas de grid, esto no).
   Patrón seguro de barra en flexbox (README-pipeline.md, bug medido en
   ronda 1a: track a 0px por texto adyacente sin min-width):
     .cmp-lbl   { width fijo; flex-shrink:0 }
     .cmp-track { flex:1; min-width:0; overflow:hidden }
     .cmp-val   { flex-shrink:0; white-space:nowrap }
   ============================================================ */
.view-pipeline .pv-cmp {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3);
}
.view-pipeline .cmp-hd {
  font-size: var(--fs-chip); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: var(--sp-2);
}
/* Estado normal (t0_ajustado=false, muestra_chica=false en los tres): SIN ningún .cmp-warn
   en el DOM — no hay hueco reservado, la franja no "espera" el aviso. */
.view-pipeline .cmp-blocks { display: flex; flex-direction: column; gap: var(--sp-3); }
@media (min-width: 900px) {
  .view-pipeline .cmp-blocks { flex-direction: row; align-items: stretch; flex-wrap: wrap; }
  .view-pipeline .cmp-blocks > .cmp-a { flex: 2 1 260px; }
  .view-pipeline .cmp-blocks > .cmp-b { flex: 1 1 190px; }
}
.view-pipeline .cmp-a, .view-pipeline .cmp-b {
  background: var(--bg-app); border-radius: var(--r); padding: var(--sp-2) var(--sp-3);
}
.view-pipeline .cmp-a-hd { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: 6px; flex-wrap: wrap; }
.view-pipeline .cmp-a-ratio { font-size: 20px; font-weight: 800; letter-spacing: -.03em; }
.view-pipeline .cmp-a-ratio.orange { color: var(--orange-text); }
.view-pipeline .cmp-a-ratio.green { color: var(--green-text); }
.view-pipeline .cmp-a-ratio.dim { color: var(--text-4); font-size: 15px; font-weight: 700; }
.view-pipeline .cmp-a-title { font-size: var(--fs-chip); font-weight: 600; color: var(--text-2); }
.view-pipeline .cmp-t0 { font-size: var(--fs-chip); color: var(--text-4); margin-bottom: var(--sp-2); }
.view-pipeline .cmp-t0 b { color: var(--text-3); font-weight: 600; }
.view-pipeline .cmp-row { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 5px; }
.view-pipeline .cmp-row:last-of-type { margin-bottom: 0; }
.view-pipeline .cmp-lbl { font-size: var(--fs-chip); font-weight: 600; color: var(--text-3); flex-shrink: 0; width: 92px; }
.view-pipeline .cmp-track { flex: 1; height: 6px; background: var(--surface-3); border-radius: 3px; min-width: 0; overflow: hidden; }
.view-pipeline .cmp-fill { height: 100%; border-radius: 3px; }
.view-pipeline .cmp-fill.ref { background: var(--border-strong); }
.view-pipeline .cmp-fill.orange { background: var(--orange); }
.view-pipeline .cmp-fill.green { background: var(--green); }
.view-pipeline .cmp-val { font-size: var(--fs-chip); font-weight: 700; flex-shrink: 0; white-space: nowrap; color: var(--text-2); }
.view-pipeline .cmp-val.orange { color: var(--orange-text); }
.view-pipeline .cmp-val.green { color: var(--green-text); }
/* "bruto · antes de cancelaciones" — no es decorativo, viaja siempre con el valor */
.view-pipeline .cmp-note { font-size: var(--fs-chip); color: var(--text-4); margin-top: 6px; }
/* Aviso de fragilidad: el seguro que habría cazado el "3,4× mejor" falso — existe en el DOM
   solo cuando el endpoint lo enciende (t0_ajustado / muestra_chica / bruto_completo:false). */
.view-pipeline .cmp-warn {
  font-size: var(--fs-chip); color: var(--text-3); line-height: 1.45; margin-top: 6px;
  padding-top: 6px; border-top: .5px solid var(--hairline);
}
.view-pipeline .cmp-warn p { margin: 0 0 2px; }
.view-pipeline .cmp-warn p:last-child { margin-bottom: 0; }
.view-pipeline .cmp-synth { font-size: var(--fs-chip); color: var(--text-2); margin-top: var(--sp-2); }
.view-pipeline .cmp-b { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.view-pipeline .cmp-b-title {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3);
}
.view-pipeline .cmp-b-row { display: flex; align-items: baseline; gap: 8px; }
.view-pipeline .cmp-b-num { font-size: 16px; font-weight: 800; letter-spacing: -.02em; color: var(--blue-text); flex-shrink: 0; }
/* "En construcción" — NUNCA "0" para un dato que el CRM no registra (§4.1 #7/#8) */
.view-pipeline .cmp-b-num.dim { font-size: 11px; font-weight: 700; color: var(--text-4); white-space: nowrap; }
.view-pipeline .cmp-b-txt { font-size: var(--fs-chip); color: var(--text-3); line-height: 1.35; flex: 1; min-width: 0; }

/* ============================================================
   KANBAN (desktop, d-only)
   ============================================================ */
.kanban-wrap { min-width: 0; overflow: hidden; }
.kanban-track {
  display: flex; gap: 10px; min-width: 0; overflow-x: auto;
  padding: 2px 2px 14px; -webkit-overflow-scrolling: touch;
}
.kanban-col {
  flex: 0 0 236px; display: flex; flex-direction: column;
  max-height: calc(100vh - 260px);
}
.kanban-col.col-wide { flex-basis: 256px; }

.col-hd {
  padding: 10px 12px; border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--surface); border: 1px solid var(--border); border-bottom: none;
  display: flex; flex-direction: column; gap: 3px;
}
.col-hd-top { display: flex; align-items: center; gap: 6px; }
.col-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.col-dot.blue { background: var(--blue); }
.col-dot.orange { background: var(--orange); }
.col-dot.green { background: var(--green); }
.col-dot.gray { background: var(--text-4); }
.col-name {
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-2); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.col-meta { display: flex; align-items: baseline; gap: 6px; }
.col-count { font-size: 12px; font-weight: 700; color: var(--text-3); }
.col-total { font-size: 13px; font-weight: 800; letter-spacing: -.01em; }
.col-total.green { color: var(--green-text); }
.col-total.orange { color: var(--orange-text); }
.col-total.blue { color: var(--blue-text); }
.col-total.gray { color: var(--text-3); }
.col-body {
  flex: 1; overflow-y: auto; background: var(--border); border: 1px solid var(--border);
  border-top: none; border-radius: 0 0 var(--r-lg) var(--r-lg);
  display: flex; flex-direction: column; gap: 1px; padding: 1px;
}

/* Tarjeta del kanban — §4.1 #12: nombre en su propio renglón, ancho completo */
.kcard {
  background: var(--surface); padding: 10px 12px; cursor: pointer; text-align: left;
  border: none; width: 100%; font-family: var(--font);
  transition: background var(--t-fast) var(--ease);
}
.kcard:hover, .kcard:focus-visible { background: var(--surface-2); }
.kcard-name {
  font-size: 13px; font-weight: 700; color: var(--text-1); line-height: 1.3;
  display: block; overflow-wrap: anywhere;
}
.kcard-amount { display: block; font-size: 13px; font-weight: 700; letter-spacing: -.01em; margin-top: 3px; }
.kcard-amount.green { color: var(--green-text); }
.kcard-amount.orange { color: var(--orange-text); }
.kcard-amount.dim { color: var(--text-3); font-weight: 600; }
.kcard-sub {
  display: block; font-size: 11px; color: var(--text-3); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* "No va" — atenuada, nunca oculta (mismo criterio que .today-card.is-adm de cobranzas:
   clasificar ≠ filtrar, una oportunidad perdida sigue siendo información). */
.kcard.is-lost { opacity: .72; background: var(--surface-2); }
.kcard.is-lost .kcard-name { color: var(--text-2); }
.kcard-alert {
  display: flex; align-items: center; gap: 4px; margin-top: 5px;
  background: var(--red-soft); border: 1px solid var(--red-border); border-radius: 6px;
  padding: 4px 7px; font-size: 10.5px; font-weight: 700; color: var(--red-text);
}

/* Columna vacía — §4.1 #7: el hueco se muestra, explicado, no se esconde */
.col-empty-bg {
  background: var(--surface); border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.col-empty { padding: 16px 12px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.col-empty-icon {
  width: 28px; height: 28px; border-radius: 8px; background: var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--text-4);
}
.col-empty-label { font-size: 12px; font-weight: 600; color: var(--text-3); }
.col-empty-sub { font-size: 11px; color: var(--text-4); line-height: 1.35; max-width: 180px; }

/* ============================================================
   Feed priorizado (mobile, m-only) — reusa .feed/.today-card/.tc-*
   de app.css. Acá solo el encabezado de sección, que no existía.
   ============================================================ */
.pv-sec-hd { display: flex; align-items: center; gap: 6px; margin: var(--sp-1) 0 2px; }
.pv-sec-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.pv-sec-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pv-sec-label.blue { color: var(--blue-text); }
.pv-sec-label.orange { color: var(--orange-text); }
.pv-sec-label.green { color: var(--green-text); }
.pv-sec-label.gray { color: var(--text-3); }
.pv-sec-count { font-size: 11px; color: var(--text-3); font-weight: 600; margin-left: auto; text-align: right; }
.pv-sec-toggle { text-align: center; padding: 4px 0 2px; }

/* El parche que vivía acá (nombre a renglón propio contra el chip "A contactar", medido a 375px
   el 2026-08-26) SUBIÓ a `app.css` → `.tc-hd`, y por eso no queda nada que declarar en esta vista.
   El motivo de la mudanza: se había limitado a `.view-pipeline` argumentando que "Hoy y Cobranzas
   no tienen este problema (sus chips son más cortos)". Era cierto al medirlo y dejó de serlo — el
   2026-08-28 se midió Cobranzas a 375px y "Di Martella Orsi, Santiago Manuel" quedaba al 74%
   contra el chip "Crítico": el chip es corto, pero las razones sociales son largas.
   `.pv-tc-hd` sigue existiendo en el HTML como gancho de la vista; hoy no necesita reglas
   propias. Si alguna vez las necesita, van acá — pero el layout base del nombre vive en app.css,
   una sola vez, para que las tres vistas no diverjan. */

/* Fila de alerta del borrador más antiguo de la etapa (mockup pipeline-b.html .pcard-alert) —
   SOLO la dibuja el ítem marcado `worstId` por prepareColumn(): una sola alerta roja por bloque
   (§4.1 #4), nunca una por tarjeta. */
.tc-alert {
  display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 7px 10px;
  background: var(--red-soft); border: 1px solid var(--red-border); border-radius: var(--r-sm);
  font-size: 11.5px; font-weight: 600; color: var(--red-text); line-height: 1.3;
}
.tc-alert .ico { flex-shrink: 0; }

/* ============================================================
   Sheet de detalle (reusa .sheet/.sheet-hd/.flabel/.opt-grid/.opt/
   .nota/.opt-cal/.form-error/.btn — mismo componente que "Cambiar
   tipo de gestión" de cobranzas.js y "Anotar").
   ============================================================ */
.pv-hero { margin-top: 4px; }
.pv-hero-amt { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--text-1); }
.pv-hero-amt.dim { color: var(--text-3); font-size: 20px; }
.pv-hero-sub { font-size: var(--fs-sm); color: var(--text-3); margin-top: 2px; }

.pv-rows { background: var(--surface); border-radius: var(--r); overflow: hidden; margin-top: 6px; }
.pv-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 9px 12px; border-bottom: .5px solid var(--hairline); font-size: 13px;
}
.pv-row:last-child { border-bottom: none; }
.pv-row .k { color: var(--text-3); font-weight: 500; flex-shrink: 0; }
.pv-row .v { color: var(--text-1); font-weight: 600; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pv-close-row { display: flex; gap: var(--sp-2); margin-top: 8px; }
.pv-close-row .btn { flex: 1; }
.btn-lost { background: var(--red-soft); color: var(--red-text); border-color: var(--red-border); }
.btn-win { background: var(--green-soft); color: var(--green-text); border-color: var(--green-border); }

.pv-history { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.pv-hist-row { display: flex; gap: 9px; }
.pv-hist-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; background: var(--text-4); }
.pv-hist-dot.blue { background: var(--blue); }
.pv-hist-dot.green { background: var(--green); }
.pv-hist-body { flex: 1; min-width: 0; }
.pv-hist-action { font-size: 13px; font-weight: 600; color: var(--text-1); line-height: 1.3; }
.pv-hist-meta { font-size: 11px; color: var(--text-3); }

/* Estado vacío del board entero — nace lleno de a poco (§ carga
   retroactiva); mientras tanto, la vista no puede parecer rota. */
.pv-empty-note { font-size: var(--fs-sm); color: var(--text-3); line-height: 1.5; }

/* ============================================================
   Desktop ≥900px — grid de tiles ya la resuelve .tiles4 (app.css).
   Acá solo el ancho del kanban y algún ajuste fino de columnas.
   ============================================================ */
@media (min-width: 900px) {
  .view-pipeline .kanban-col { max-height: calc(100vh - 300px); }
}